/* ============================================================
   Rocht AB — shared stylesheet
   Built on the MindWell design system (blue / trust palette)
   ============================================================ */

/* ── Fonts (self-hosted) ──────────────────────────────────── */
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('fonts/PlusJakartaSans-VariableFont_wght.ttf') format('truetype');
  font-weight: 200 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('fonts/PlusJakartaSans-Italic-VariableFont_wght.ttf') format('truetype');
  font-weight: 200 800; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('fonts/CormorantGaramond-VariableFont_wght.ttf') format('truetype');
  font-weight: 300 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('fonts/CormorantGaramond-Italic-VariableFont_wght.ttf') format('truetype');
  font-weight: 300 700; font-style: italic; font-display: swap;
}

:root {
  /* Tailwind blue scale (uicolors.app/tailwind-colors/blue) */
  --blue-50:#eff6ff; --blue-100:#dbeafe; --blue-200:#bfdbfe; --blue-300:#93c5fd;
  --blue-400:#60a5fa; --blue-500:#3b82f6; --blue-600:#2563eb; --blue-700:#1d4ed8;
  --blue-800:#1e40af; --blue-900:#1e3a8a;
  /* Cool slate neutral scale (blue-tinted, no warm/brown) */
  --neutral-0:#FFFFFF; --neutral-50:#F8FAFC; --neutral-100:#F1F5F9; --neutral-200:#E2E8F0;
  --neutral-300:#CBD5E1; --neutral-400:#94A3B8; --neutral-500:#64748B; --neutral-600:#475569;
  --neutral-700:#334155; --neutral-800:#1E293B; --neutral-900:#0F172A;
  /* Brand bright accent (logo / large fills) */
  --teal-bright:#2563EB;
  /* Accent (repointed to blue scale) */
  --warm-50:#EFF6FF; --warm-100:#DBEAFE; --warm-200:#BFDBFE; --warm-300:#93C5FD;
  --warm-400:#3B82F6; --warm-500:#2563EB;

  --color-bg:#F4F7FB; --color-bg-subtle:var(--blue-50);
  --color-surface:var(--neutral-0); --color-border:var(--neutral-200);
  --color-primary:var(--blue-500); --color-primary-hover:var(--blue-600);
  --color-text:var(--neutral-800); --color-text-secondary:var(--neutral-500);
  --color-text-tertiary:var(--neutral-400); --color-accent:var(--warm-400);

  --font-sans:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,sans-serif;
  --font-serif-italic:'Cormorant Garamond',Georgia,'Times New Roman',serif;

  --text-xs:.75rem; --text-sm:.875rem; --text-base:1rem; --text-md:1.125rem;
  --text-lg:1.25rem; --text-xl:1.5rem; --text-2xl:1.875rem; --text-3xl:2.25rem;
  --text-4xl:2.75rem; --text-5xl:3.5rem; --text-6xl:4.5rem;

  --weight-light:300; --weight-regular:400; --weight-medium:500;
  --weight-semibold:600; --weight-bold:700;

  --leading-tight:1.1; --leading-snug:1.3; --leading-normal:1.5; --leading-relaxed:1.7;

  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem; --space-5:1.25rem;
  --space-6:1.5rem; --space-8:2rem; --space-10:2.5rem; --space-12:3rem; --space-16:4rem;
  --space-20:5rem; --space-24:6rem; --space-32:8rem;

  --radius-xs:4px; --radius-sm:8px; --radius-md:12px; --radius-lg:16px; --radius-xl:20px;
  --radius-2xl:24px; --radius-3xl:32px; --radius-pill:999px;

  --shadow-xs:0 1px 3px rgba(26,39,68,.06); --shadow-sm:0 2px 8px rgba(26,39,68,.08);
  --shadow-md:0 4px 16px rgba(26,39,68,.10); --shadow-lg:0 8px 32px rgba(26,39,68,.12);
  --shadow-xl:0 16px 48px rgba(26,39,68,.16);

  --ease-out:cubic-bezier(0,0,.2,1); --ease-in-out:cubic-bezier(.4,0,.2,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --duration-fast:150ms; --duration-normal:250ms; --duration-slow:400ms;

  --max-w:1200px;
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }

html { scroll-behavior:smooth; }

body {
  font-family:var(--font-sans);
  font-size:var(--text-base);
  font-weight:var(--weight-regular);
  line-height:var(--leading-relaxed);
  color:var(--color-text);
  background:var(--color-bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

.serif-em { font-family:var(--font-serif-italic); font-style:italic; font-weight:600; }

a { color:var(--color-primary); text-decoration:none; transition:color var(--duration-fast) var(--ease-out); }
a:hover { color:var(--color-primary-hover); }

img, svg { display:block; }

/* ── Layout helpers ───────────────────────────────────────── */
.wrap { width:100%; max-width:var(--max-w); margin:0 auto; padding-inline:var(--space-6); }
.section { padding-block:var(--space-24); }
.section--tight { padding-block:var(--space-16); }

.eyebrow {
  display:inline-flex; align-items:center; gap:var(--space-2);
  font-size:var(--text-sm); font-weight:var(--weight-semibold);
  letter-spacing:.04em; text-transform:uppercase; color:var(--color-primary);
}
.eyebrow--light { color:var(--blue-200); }

.section-head { max-width:680px; margin-bottom:var(--space-12); }
.section-head h2 {
  font-size:var(--text-4xl); font-weight:var(--weight-bold);
  line-height:var(--leading-snug); color:var(--color-text);
  margin-top:var(--space-4); text-wrap:balance;
}
.section-head p {
  font-size:var(--text-md); color:var(--color-text-secondary);
  margin-top:var(--space-4); line-height:var(--leading-relaxed);
}
.section-head--center { margin-inline:auto; text-align:center; }

/* ── Buttons ──────────────────────────────────────────────── */
.btn {
  font-family:var(--font-sans); font-weight:var(--weight-semibold);
  border-radius:var(--radius-pill); display:inline-flex; align-items:center;
  justify-content:center; gap:var(--space-2); cursor:pointer; border:none;
  transition:all var(--duration-normal) var(--ease-out); white-space:nowrap;
  padding:13px 28px; font-size:var(--text-base); line-height:1;
}
.btn:active { transform:scale(.97); }
.btn svg { width:18px; height:18px; }
.btn--primary { background:var(--neutral-800); color:#fff; }
.btn--primary:hover { background:var(--neutral-900); color:#fff; transform:translateY(-2px); box-shadow:var(--shadow-md); }
.btn--blue { background:var(--blue-500); color:#fff; }
.btn--blue:hover { background:var(--blue-600); color:#fff; transform:translateY(-2px); box-shadow:var(--shadow-md); }
.btn--secondary { background:transparent; color:var(--neutral-800); border:1.5px solid var(--neutral-300); }
.btn--secondary:hover { border-color:var(--neutral-800); background:var(--neutral-800); color:#fff; }
.btn--light { background:#fff; color:var(--neutral-800); }
.btn--light:hover { background:var(--blue-50); color:var(--neutral-800); transform:translateY(-2px); }
.btn--ghost-light { background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,.35); }
.btn--ghost-light:hover { background:rgba(255,255,255,.12); color:#fff; }
.btn--lg { padding:16px 36px; font-size:var(--text-md); }
.btn--sm { padding:9px 18px; font-size:var(--text-sm); }
.nav__cta .btn { padding:12px 20px; font-size:var(--text-sm); }

.arrow-link {
  display:inline-flex; align-items:center; gap:var(--space-2);
  font-weight:var(--weight-semibold); font-size:var(--text-base);
  color:var(--color-primary);
}
.arrow-link svg { width:18px; height:18px; transition:transform var(--duration-normal) var(--ease-out); }
.arrow-link:hover svg { transform:translateX(4px); }

/* ── Top nav ──────────────────────────────────────────────── */
.nav {
  position:sticky; top:0; z-index:100;
  background:rgba(244,247,251,.82); backdrop-filter:blur(12px);
  border-bottom:1px solid transparent;
  transition:border-color var(--duration-normal), background var(--duration-normal);
}
.nav.is-scrolled { border-bottom-color:var(--neutral-200); background:rgba(255,255,255,.85); }
.nav__inner {
  max-width:var(--max-w); margin:0 auto; padding:var(--space-4) var(--space-6);
  display:flex; align-items:center; justify-content:space-between; gap:var(--space-6);
}
.brand { display:inline-flex; align-items:center; gap:var(--space-3); color:var(--neutral-800); }
.brand:hover { color:var(--neutral-800); }
.brand__mark { width:38px; height:38px; flex-shrink:0; }
.brand__name { font-size:var(--text-xl); font-weight:var(--weight-bold); letter-spacing:-.02em; }
.brand__name .dot { color:var(--blue-500); }

.nav__links { display:flex; align-items:center; gap:var(--space-2); list-style:none; }
.nav__link {
  position:relative; padding:var(--space-2) var(--space-4); border-radius:var(--radius-pill);
  color:var(--neutral-600); font-weight:var(--weight-medium); font-size:var(--text-base);
  transition:color var(--duration-fast), background var(--duration-fast);
}
.nav__link:hover { color:var(--neutral-800); background:var(--neutral-100); }
.nav__link.is-active { color:var(--neutral-800); background:var(--neutral-100); }

/* dropdown */
.nav__item { position:relative; }
.nav__item--has-menu > .nav__link { display:inline-flex; align-items:center; gap:4px; }
.nav__item--has-menu > .nav__link svg { width:15px; height:15px; transition:transform var(--duration-fast); }
.nav__item--has-menu:hover > .nav__link svg { transform:rotate(180deg); }
.nav__dropdown {
  position:absolute; top:calc(100% + 8px); left:0; min-width:280px; white-space:nowrap;
  background:#fff; border:1px solid var(--neutral-200); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg); padding:var(--space-2);
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition:all var(--duration-normal) var(--ease-out); list-style:none;
}
.nav__item--has-menu:hover .nav__dropdown { opacity:1; visibility:visible; transform:translateY(0); }
.nav__dropdown a {
  display:flex; align-items:center; gap:var(--space-3); padding:var(--space-3) var(--space-3);
  border-radius:var(--radius-md); color:var(--neutral-700); font-weight:var(--weight-medium);
  font-size:var(--text-base);
}
.nav__dropdown a:hover { background:var(--blue-50); color:var(--blue-700); }
.nav__dropdown a svg { width:18px; height:18px; color:var(--blue-500); flex-shrink:0; }

.nav__cta { display:flex; align-items:center; gap:var(--space-3); }
.nav__burger {
  display:none; width:44px; height:44px; border:none; background:transparent;
  cursor:pointer; border-radius:var(--radius-md); color:var(--neutral-800);
  align-items:center; justify-content:center;
}
.nav__burger:hover { background:var(--neutral-100); }
.nav__burger svg { width:24px; height:24px; }

/* mobile menu */
.mobile-menu {
  position:fixed; inset:0; z-index:200; background:var(--neutral-50);
  display:flex; flex-direction:column; padding:var(--space-6);
  transform:translateX(100%); transition:transform var(--duration-slow) var(--ease-out);
  overflow-y:auto;
}
.mobile-menu.is-open { transform:translateX(0); }
.mobile-menu__top { display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--space-8); }
.mobile-menu__close { width:44px; height:44px; border:none; background:transparent; cursor:pointer; color:var(--neutral-800); border-radius:var(--radius-md); }
.mobile-menu__close svg { width:26px; height:26px; }
.mobile-menu nav { display:flex; flex-direction:column; gap:var(--space-1); }
.mobile-menu nav > a:not(.btn), .mobile-menu__row > a, .mobile-menu__group > span {
  font-size:var(--text-2xl); font-weight:var(--weight-semibold); color:var(--neutral-800);
  padding:var(--space-3) 0;
}
.mobile-menu nav > a.is-active, .mobile-menu__row > a.is-active { color:var(--blue-700); }
.mobile-menu nav > a.btn { align-self:stretch; }
.mobile-menu__row { display:flex; align-items:center; justify-content:space-between; gap:var(--space-2); }
.mobile-menu__toggle {
  width:44px; height:44px; border:none; background:transparent; cursor:pointer;
  color:var(--neutral-700); border-radius:var(--radius-md);
  display:inline-flex; align-items:center; justify-content:center;
  transition: background .2s var(--ease-out), transform .25s var(--ease-out);
}
.mobile-menu__toggle:hover { background:var(--neutral-100); }
.mobile-menu__toggle svg { width:22px; height:22px; transition:transform .25s var(--ease-out); }
.mobile-menu__toggle[aria-expanded="true"] svg { transform:rotate(180deg); }
.mobile-menu__sub {
  max-height:0; overflow:hidden;
  transition: max-height .35s var(--ease-out);
}
.mobile-menu__sub-inner {
  display:flex; flex-direction:column; gap:var(--space-1);
  padding:var(--space-2) 0 var(--space-2) var(--space-8);
}
.mobile-menu__group.is-open .mobile-menu__sub { max-height:480px; }
.mobile-menu__sub a {
  display:flex; flex-direction:row; align-items:center; gap:var(--space-3);
  padding:var(--space-3) var(--space-3);
  border-radius:var(--radius-md);
  font-size:var(--text-base); font-weight:var(--weight-medium);
  color:var(--neutral-700);
  transition:background var(--duration-fast), color var(--duration-fast);
}
.mobile-menu__sub a svg { width:20px; height:20px; color:var(--blue-500); flex-shrink:0; }
.mobile-menu__sub a:hover { background:var(--blue-50); color:var(--blue-700); }
.mobile-menu__sub a:hover svg { color:var(--blue-600); }
.mobile-menu__sub a.is-active {
  background:var(--blue-50); color:var(--blue-700);
}
.mobile-menu__sub a.is-active svg { color:var(--blue-600); }
.mobile-menu__group > span { display:block; }
.mobile-menu .btn { margin-top:var(--space-6); }

/* ── Cards ────────────────────────────────────────────────── */
.card {
  background:var(--color-surface); border-radius:var(--radius-2xl);
  box-shadow:var(--shadow-sm); transition:all var(--duration-normal) var(--ease-out);
}
.card--hover:hover { box-shadow:var(--shadow-lg); transform:translateY(-4px); }

/* icon chip */
.chip {
  width:56px; height:56px; border-radius:var(--radius-lg);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  background:var(--blue-50); color:var(--blue-600);
}
.chip svg { width:26px; height:26px; }
.chip--navy { background:var(--neutral-800); color:#fff; }

/* ── Footer ───────────────────────────────────────────────── */
.footer { background:var(--neutral-900); color:var(--neutral-300); padding-block:var(--space-20) var(--space-8); }
.footer a { color:var(--neutral-300); }
.footer a:hover { color:#fff; }
.footer__grid {
  display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:var(--space-12);
  padding-bottom:var(--space-12); border-bottom:1px solid rgba(255,255,255,.1);
}
.footer__brand .brand { color:#fff; margin-bottom:var(--space-5); }
.footer__brand .brand:hover { color:#fff; }
.footer__brand p { color:var(--neutral-400); font-size:var(--text-base); max-width:34ch; line-height:var(--leading-relaxed); }
.footer__col h4 { font-size:var(--text-sm); font-weight:var(--weight-semibold); letter-spacing:.06em; text-transform:uppercase; color:var(--neutral-400); margin-bottom:var(--space-5); }
.footer__col ul { list-style:none; display:flex; flex-direction:column; gap:var(--space-3); }
.footer__col p { font-size:var(--text-base); line-height:var(--leading-relaxed); color:var(--neutral-300); }
.footer__col p + p { margin-top:var(--space-3); }
.footer__social { display:flex; gap:var(--space-3); margin-top:var(--space-5); }
.footer__social a {
  width:42px; height:42px; border-radius:var(--radius-pill); background:rgba(255,255,255,.08);
  display:flex; align-items:center; justify-content:center; transition:background var(--duration-fast);
}
.footer__social a:hover { background:var(--blue-500); }
.footer__social svg { width:19px; height:19px; }
.footer__bottom {
  padding-top:var(--space-6); display:flex; align-items:center; justify-content:space-between;
  gap:var(--space-4); flex-wrap:wrap; font-size:var(--text-sm); color:var(--neutral-500);
}
.footer__bottom a { color:var(--neutral-400); }

/* ── Page hero (inner pages) ──────────────────────────────── */
.page-hero { position:relative; overflow:hidden; padding-block:var(--space-16) var(--space-12); }
.page-hero__bg { position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(55% 70% at 85% 0%, rgba(59,130,246,.14), transparent 60%); }
.page-hero .wrap { position:relative; z-index:1; }
.page-hero h1 { font-size:clamp(2.25rem,4.4vw,3.25rem); font-weight:var(--weight-bold);
  line-height:1.08; letter-spacing:-.02em; margin-block:var(--space-4) var(--space-5); text-wrap:balance; max-width:18ch; }
.page-hero p { font-size:var(--text-md); color:var(--neutral-600); max-width:56ch; line-height:var(--leading-relaxed); }
.breadcrumb { display:flex; align-items:center; gap:var(--space-2); font-size:var(--text-sm); color:var(--neutral-400); }
.breadcrumb a { color:var(--neutral-500); font-weight:var(--weight-medium); }
.breadcrumb svg { width:14px; height:14px; }

/* ── Generic CTA band ─────────────────────────────────────── */
.cta-band { background:var(--neutral-800); color:#fff; border-radius:var(--radius-3xl); padding:var(--space-16); text-align:center; position:relative; overflow:hidden; }
.cta-band::before, .cta-band::after { content:""; position:absolute; border-radius:50%; }
.cta-band::before { width:320px; height:320px; left:-120px; bottom:-150px; background:rgba(59,130,246,.2); }
.cta-band::after { width:240px; height:240px; right:-80px; top:-120px; background:rgba(59,130,246,.13); }
.cta-band .eyebrow { color:var(--blue-300); position:relative; }
.cta-band h2 { font-size:var(--text-4xl); color:#fff; line-height:var(--leading-snug); margin:var(--space-4) auto var(--space-8); max-width:20ch; position:relative; text-wrap:balance; }
.cta-band__actions { display:flex; gap:var(--space-3); justify-content:center; flex-wrap:wrap; position:relative; }

/* ── Feature / check list ─────────────────────────────────── */
.check-list { list-style:none; display:flex; flex-direction:column; gap:var(--space-3); }
.check-list li { display:flex; align-items:flex-start; gap:var(--space-3); color:var(--neutral-700); font-size:var(--text-base); }
.check-list svg { width:22px; height:22px; flex-shrink:0; color:var(--blue-500); margin-top:1px; }

/* ── Forms ────────────────────────────────────────────────── */
.field { display:flex; flex-direction:column; gap:var(--space-2); }
.field label { font-size:var(--text-sm); font-weight:var(--weight-semibold); color:var(--neutral-700); }
.field input, .field select, .field textarea {
  font-family:var(--font-sans); font-size:var(--text-base); color:var(--neutral-800);
  background:#fff; border:1.5px solid var(--neutral-200); border-radius:var(--radius-md);
  padding:13px 16px; transition:border-color var(--duration-fast), box-shadow var(--duration-fast); width:100%;
}
.field textarea { resize:vertical; min-height:130px; line-height:var(--leading-normal); }
.field input::placeholder, .field textarea::placeholder { color:var(--neutral-400); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline:none; border-color:var(--blue-400); box-shadow:0 0 0 3px rgba(59,130,246,.2);
}
.field__err { font-size:var(--text-sm); color:#C0392B; display:none; }
.field--error input, .field--error select, .field--error textarea { border-color:#E07A6B; box-shadow:0 0 0 3px rgba(224,122,107,.16); }
.field--error .field__err { display:block; }

/* ── Scroll reveal ────────────────────────────────────────── */
.reveal { opacity:1; transform:none; transition:opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.js-anim .reveal { opacity:0; transform:translateY(24px); }
.js-anim .reveal.is-in { opacity:1; transform:none; }
.reveal[data-delay="1"] { transition-delay:.08s; }
.reveal[data-delay="2"] { transition-delay:.16s; }
.reveal[data-delay="3"] { transition-delay:.24s; }
.reveal[data-delay="4"] { transition-delay:.32s; }
@media (prefers-reduced-motion:reduce) {
  .reveal { opacity:1; transform:none; transition:none; }
  html { scroll-behavior:auto; }
}

/* ── Service detail pages (shared) ────────────────────────── */
.split { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-16); align-items:center; }
.split h2 { font-size:var(--text-3xl); font-weight:var(--weight-bold); margin-bottom:var(--space-4); text-wrap:balance; }
.split > div > p { color:var(--neutral-600); font-size:var(--text-md); line-height:var(--leading-relaxed); }
.split > div > p + p { margin-top:var(--space-4); }
.split .check-list { margin-top:var(--space-6); }
.split__media {
  position:relative; border-radius:var(--radius-3xl); padding:var(--space-12);
  background:linear-gradient(160deg, var(--blue-50), var(--blue-100));
  min-height:360px; display:flex; align-items:center; justify-content:center; overflow:hidden;
  box-shadow:var(--shadow-sm);
}
.split__media--navy { background:linear-gradient(160deg, var(--blue-600), var(--blue-800)); }
.split__media .big-icon { width:128px; height:128px; color:var(--blue-700); }
.split__media--navy .big-icon { color:#fff; }
.split__media .big-icon svg { width:100%; height:100%; }
.split__media::after { content:""; position:absolute; width:240px; height:240px; border-radius:50%; background:rgba(255,255,255,.4); right:-80px; bottom:-80px; }
.split__media--navy::after { background:rgba(255,255,255,.07); }
.media-card { position:absolute; background:#fff; border-radius:var(--radius-xl); box-shadow:var(--shadow-lg);
  padding:var(--space-4) var(--space-5); display:flex; align-items:center; gap:var(--space-3);
  font-size:var(--text-sm); font-weight:var(--weight-semibold); color:var(--neutral-700); }
.media-card svg { width:20px; height:20px; color:var(--blue-600); }
.media-card--tl { top:var(--space-8); left:var(--space-6); }
.media-card--br { bottom:var(--space-8); right:var(--space-6); }

.feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-6); }
.feature-card { padding:var(--space-8); border:1px solid var(--neutral-100); }
.feature-card .chip { margin-bottom:var(--space-5); }
.feature-card h3 { font-size:var(--text-xl); font-weight:var(--weight-semibold); margin-bottom:var(--space-3); }
.feature-card p { color:var(--neutral-600); font-size:var(--text-base); }

.flow { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-6); counter-reset:fstep; }
.flow__step { position:relative; padding-top:60px; }
.flow__step::before { counter-increment:fstep; content:counter(fstep); position:absolute; top:0; left:0;
  width:44px; height:44px; border-radius:50%; background:var(--neutral-800); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:var(--weight-bold); font-size:var(--text-md); }
.flow__step h4 { font-size:var(--text-lg); font-weight:var(--weight-semibold); margin-bottom:var(--space-2); }
.flow__step p { font-size:var(--text-base); color:var(--neutral-600); }
.flow__step:not(:last-child)::after { content:""; position:absolute; top:22px; left:54px; right:-12px; height:1.5px; background:var(--neutral-200); }

.related { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-5); }
.related__card { display:flex; align-items:center; gap:var(--space-4); padding:var(--space-5) var(--space-6);
  border:1px solid var(--neutral-200); border-radius:var(--radius-xl); color:var(--neutral-800);
  font-weight:var(--weight-semibold); transition:all var(--duration-normal) var(--ease-out); }
.related__card:hover { color:var(--neutral-800); border-color:transparent; box-shadow:var(--shadow-md); transform:translateY(-3px); }
.related__card .chip { width:46px; height:46px; }
.related__card .chip svg { width:22px; height:22px; }
.related__card .arrow { margin-left:auto; color:var(--blue-600); }
.related__card .arrow svg { width:20px; height:20px; }

@media (max-width:900px){
  .split { grid-template-columns:1fr; gap:var(--space-8); }
  .feature-grid, .related { grid-template-columns:1fr; }
  .flow { grid-template-columns:1fr 1fr; gap:var(--space-10) var(--space-6); }
  .flow__step:not(:last-child)::after { display:none; }
}
@media (max-width:560px){ .flow { grid-template-columns:1fr; } }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width:900px) {
  .nav__links { display:none; }
  .nav__cta .btn { padding:8px 14px !important; font-size:var(--text-sm); }
  .nav__burger { display:flex; }
  .section { padding-block:var(--space-16); }
  .section-head h2 { font-size:var(--text-3xl); }
  .footer__grid { grid-template-columns:1fr 1fr; gap:var(--space-8); }
  .footer__brand { grid-column:1 / -1; }
}
@media (max-width:560px) {
  .footer__grid { grid-template-columns:1fr; text-align:center; }
  .footer__brand p { margin-inline:auto; }
  .footer__social { justify-content:center; }
  .footer__col ul { align-items:center; }
  .footer__grid > :nth-child(3) { order:2; }
  .footer__grid > :nth-child(4) { order:1; }
  .footer__bottom { flex-direction:column; align-items:center; text-align:center; }
  .cta-band h2 { font-size:var(--text-3xl); }
  .cta-band__actions { flex-direction:column; }
  .cta-band__actions .btn { width:100%; }
  .wrap { padding-inline:var(--space-5); }
}
@media (max-width:420px) {
  .nav__cta .btn { display:none; }
}