/* ===========================================================================
   SAQUA — DESIGN SYSTEM
   ---------------------------------------------------------------------------
   Three layers, no magic numbers:
     1. PRIMITIVES  — the only raw values (color ramp, space, radius, type, motion)
     2. SEMANTIC    — meaning-named tokens the whole product references
     3. COMPONENTS  — built strictly from the layers above
   Identity: near-black canvas, a precise neutral ramp, one teal accent spent
   almost nowhere. Typography and space carry the design. Borders over shadows.
   =========================================================================== */

:root{
  /* ── 1. PRIMITIVES ─────────────────────────────────────────────────── */
  /* Neutral surface ramp (dark) */
  --n-0:#0A0A0B;  /* canvas            */
  --n-1:#0E0E10;  /* sunken (rail/side)*/
  --n-2:#141416;  /* surface (card)    */
  --n-3:#191A1C;  /* raised (hover)    */
  --n-4:#202024;  /* overlay control   */
  /* Hairline borders — white at fixed opacities */
  --w-05:rgba(255,255,255,.05);
  --w-08:rgba(255,255,255,.08);
  --w-13:rgba(255,255,255,.13);
  /* Ink ramp */
  --ink-hi:#ECECEE;
  --ink-mid:#A7A8AE;
  --ink-lo:#78797F;
  --ink-dim:#54555B;
  /* Accent — the single hue, used only for signal */
  --teal:#3FD0BE;
  --teal-hi:#5CDECE;

  /* Space — 4px base, one scale for everything */
  --sp-1:4px;  --sp-2:8px;  --sp-3:12px; --sp-4:16px; --sp-5:20px;
  --sp-6:24px; --sp-7:32px; --sp-8:40px; --sp-9:48px; --sp-10:64px;
  --sp-11:80px; --sp-12:96px; --sp-13:128px;

  /* Radius */
  --r-xs:6px; --r-sm:8px; --r-md:10px; --r-lg:12px; --r-xl:16px; --r-2xl:20px; --r-full:999px;

  /* Type scale (px) */
  --fs-1:12px; --fs-2:13px; --fs-3:14px; --fs-4:15px; --fs-5:16px;
  --fs-6:18px; --fs-7:21px; --fs-8:26px; --fs-9:33px; --fs-10:42px; --fs-11:52px;
  --fw-normal:400; --fw-medium:500; --fw-semibold:600;
  --lh-tight:1.08; --lh-snug:1.3; --lh-body:1.6; --lh-relaxed:1.72;

  /* Motion */
  --ease:cubic-bezier(.22,.61,.36,1);
  --dur-1:120ms; --dur-2:160ms; --dur-3:220ms;

  /* ── 2. SEMANTIC (names the product uses) ─────────────────────────── */
  --bg:var(--n-0); --panel:var(--n-1); --card:var(--n-2); --card-2:var(--n-3); --raised:var(--n-4);
  --border-faint:var(--w-05); --border:var(--w-08); --border-strong:var(--w-13);
  --text:var(--ink-hi); --text-2:var(--ink-mid); --muted:var(--ink-lo); --faint:var(--ink-dim);
  --accent:var(--teal); --accent-2:var(--teal-hi);
  --accent-soft:rgba(63,208,190,.10); --accent-line:rgba(63,208,190,.28); --accent-ink:#04231F;
  --danger:#E28A8A; --danger-soft:rgba(226,138,138,.10); --danger-line:rgba(226,138,138,.30);

  --radius-sm:var(--r-sm); --radius:var(--r-md); --radius-lg:var(--r-lg); --radius-xl:var(--r-xl);
  --shadow-pop:0 16px 50px rgba(0,0,0,.55);

  --maxw:1080px; --w-prose:680px; --nav-h:64px;
  --font:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ── Reset ──────────────────────────────────────────────────────────── */
*{ box-sizing:border-box; }
*::selection{ background:rgba(63,208,190,.20); color:#fff; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font); font-size:var(--fs-5); line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility; letter-spacing:-.011em;
  font-feature-settings:"cv11" 1,"ss01" 1,"calt" 1;
}
a{ color:inherit; text-decoration:none; }
img,svg{ display:block; max-width:100%; }
button{ font-family:inherit; }
[data-lucide]{ width:18px; height:18px; stroke-width:1.75; }

/* ── 3a. Typography roles ───────────────────────────────────────────── */
h1,h2,h3,h4{ margin:0; font-weight:var(--fw-semibold); color:var(--text);
  letter-spacing:-.025em; line-height:var(--lh-tight); font-feature-settings:"cv11" 1,"ss01" 1; }
h1{ font-size:clamp(var(--fs-9),4.6vw,var(--fs-11)); letter-spacing:-.034em; line-height:1.06; }
h2{ font-size:clamp(var(--fs-8),3vw,var(--fs-9)); letter-spacing:-.028em; line-height:1.14; }
h1,h2,h3{ text-wrap:balance; }         /* considered line-wrapping, no orphans */
p,.lede{ text-wrap:pretty; }
h3{ font-size:var(--fs-7); letter-spacing:-.02em; line-height:1.25; }
h4{ font-size:var(--fs-5); }
p{ margin:0; color:var(--text-2); }
.eyebrow, .kicker{ font-size:var(--fs-1); font-weight:var(--fw-semibold); letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); display:inline-flex; align-items:center; gap:var(--sp-2); }
.eyebrow .dot{ display:none; }         /* restraint: labels, not colored dots */
.lede{ font-size:clamp(var(--fs-5),1.5vw,var(--fs-6)); color:var(--text-2); line-height:var(--lh-body); }
.muted{ color:var(--muted); } .faint{ color:var(--faint); }
.tnum{ font-variant-numeric:tabular-nums; }

/* ── 3b. Layout ─────────────────────────────────────────────────────── */
.container{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 var(--sp-6); }
.section{ padding:clamp(var(--sp-11),9vw,var(--sp-13)) 0; }
.section-sm{ padding:var(--sp-11) 0; }
.center{ text-align:center; }
.hr{ height:1px; background:var(--border-faint); border:0; margin:0; }
.split{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-11); align-items:start; }
@media (max-width:820px){ .split{ grid-template-columns:1fr; gap:var(--sp-8); } }
.grid{ display:grid; gap:var(--sp-5); }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }

/* ── 3c. Buttons ────────────────────────────────────────────────────── */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2);
  height:40px; padding:0 var(--sp-4); border-radius:var(--r-sm); font-size:var(--fs-3);
  font-weight:var(--fw-medium); letter-spacing:-.01em; cursor:pointer; white-space:nowrap;
  border:1px solid transparent; background:transparent; color:var(--text);
  transition:background var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease),
             color var(--dur-2) var(--ease), opacity var(--dur-2) var(--ease); }
.btn [data-lucide]{ width:16px; height:16px; }
.btn-primary{ background:#F5F5F6; color:#0A0A0B; font-weight:var(--fw-semibold); }
.btn-primary:hover{ background:#fff; }
.btn-secondary{ border-color:var(--border-strong); color:var(--text); }
.btn-secondary:hover{ border-color:rgba(255,255,255,.22); background:var(--w-05); }
.btn-ghost{ color:var(--text-2); }
.btn-ghost:hover{ color:var(--text); background:var(--w-05); }
.btn-accent{ background:var(--accent); color:var(--accent-ink); font-weight:var(--fw-semibold); }
.btn-accent:hover{ background:var(--accent-2); }
.btn-danger{ border-color:var(--danger-line); color:var(--danger); }
.btn-danger:hover{ border-color:rgba(226,138,138,.5); background:var(--danger-soft); }
.btn-lg{ height:46px; padding:0 var(--sp-5); font-size:var(--fs-4); border-radius:var(--r-md); }
.btn-block{ width:100%; }

/* Focus: keyboard only, one consistent ring */
:where(a,button,input,textarea,select,[tabindex]):focus-visible{
  outline:2px solid var(--accent-line); outline-offset:2px; }
button:focus:not(:focus-visible){ outline:none; }

/* ── 3d. Navigation ─────────────────────────────────────────────────── */
.nav{ position:sticky; top:0; z-index:50; height:var(--nav-h);
  background:color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter:saturate(140%) blur(14px); border-bottom:1px solid var(--border-faint); }
.nav-inner{ height:100%; display:flex; align-items:center; justify-content:space-between; gap:var(--sp-5); }
.wordmark{ font-size:var(--fs-6); font-weight:var(--fw-semibold); letter-spacing:-.03em; color:var(--text); }
.nav-links{ display:flex; align-items:center; gap:var(--sp-1); }
.nav-links a{ padding:var(--sp-2) var(--sp-3); border-radius:var(--r-xs); font-size:var(--fs-3);
  color:var(--muted); transition:color var(--dur-1) var(--ease), background var(--dur-1) var(--ease); }
.nav-links a:hover{ color:var(--text); background:var(--w-05); }
.nav-links a.active{ color:var(--text); }
.nav-cta{ display:flex; align-items:center; gap:var(--sp-2); }
.nav-burger{ display:none; background:none; border:1px solid var(--border); color:var(--text);
  border-radius:var(--r-sm); width:40px; height:40px; cursor:pointer; }

/* ── 3e. Surfaces ───────────────────────────────────────────────────── */
.card{ background:var(--card); border:1px solid var(--border); border-radius:var(--r-lg); }
.card-pad{ padding:var(--sp-7); }
.panel{ background:var(--panel); border:1px solid var(--border); border-radius:var(--r-lg); }
.badge{ display:inline-flex; align-items:center; gap:var(--sp-2); height:26px; padding:0 var(--sp-3);
  border:1px solid var(--border); border-radius:var(--r-full); font-size:var(--fs-2); color:var(--text-2);
  background:var(--w-05); }
.badge .dot{ width:6px; height:6px; border-radius:50%; background:var(--accent); }

/* Feature tile */
.tile{ padding:var(--sp-6); border:1px solid var(--border); border-radius:var(--r-lg); background:var(--card);
  transition:border-color var(--dur-2) var(--ease); }
.tile:hover{ border-color:var(--border-strong); }
.tile .ic{ width:38px; height:38px; border-radius:var(--r-md); display:flex; align-items:center;
  justify-content:center; border:1px solid var(--border); background:var(--card-2); color:var(--text); margin-bottom:var(--sp-4); }
.tile h3{ font-size:var(--fs-6); margin-bottom:var(--sp-2); }
.tile p{ font-size:var(--fs-3); color:var(--muted); }

/* Feature checklist (compact, two columns) */
.checks{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-3) var(--sp-5); }
.checks li{ display:flex; gap:var(--sp-2); align-items:center; font-size:var(--fs-3); color:var(--text-2); }
.checks li [data-lucide]{ color:var(--accent); width:16px; height:16px; flex-shrink:0; stroke-width:2; }
@media (max-width:520px){ .checks{ grid-template-columns:1fr; } }

/* ── 3f. Forms ──────────────────────────────────────────────────────── */
.field{ display:flex; flex-direction:column; gap:var(--sp-2); }
.label{ font-size:var(--fs-2); color:var(--text-2); font-weight:var(--fw-medium); }
.input,.textarea,.select{ width:100%; background:var(--card); border:1px solid var(--border-strong);
  color:var(--text); border-radius:var(--r-sm); padding:var(--sp-3); font-size:var(--fs-3); font-family:inherit;
  transition:border-color var(--dur-2) var(--ease), background var(--dur-2) var(--ease); }
.input::placeholder,.textarea::placeholder{ color:var(--faint); }
.input:focus,.textarea:focus,.select:focus{ outline:none; border-color:var(--accent-line); background:var(--card-2); }
.textarea{ min-height:120px; resize:vertical; line-height:var(--lh-body); }

/* ── 3g. FAQ ────────────────────────────────────────────────────────── */
.faq-item{ border-bottom:1px solid var(--border-faint); }
.faq-q{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4);
  background:none; border:0; color:var(--text); text-align:left; cursor:pointer;
  padding:var(--sp-5) 2px; font-size:var(--fs-5); font-weight:var(--fw-medium); letter-spacing:-.01em; }
.faq-q [data-lucide]{ color:var(--muted); transition:transform var(--dur-3) var(--ease); flex-shrink:0; }
.faq-item.open .faq-q [data-lucide]{ transform:rotate(45deg); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height var(--dur-3) var(--ease); }
.faq-a p{ padding:0 2px var(--sp-5); color:var(--muted); font-size:var(--fs-4); max-width:68ch; }

/* ── 3h. Pricing ────────────────────────────────────────────────────── */
.price-card{ padding:var(--sp-7); border:1px solid var(--border); border-radius:var(--r-lg); background:var(--card);
  display:flex; flex-direction:column; gap:var(--sp-5); }
.price-card.featured{ border-color:var(--border-strong); background:var(--card-2); }
.price-name{ font-size:var(--fs-4); font-weight:var(--fw-semibold); color:var(--text);
  display:flex; align-items:center; justify-content:space-between; }
.price-amt{ font-size:var(--fs-9); font-weight:var(--fw-semibold); letter-spacing:-.03em; }
.price-amt span{ font-size:var(--fs-3); color:var(--muted); font-weight:var(--fw-normal); letter-spacing:0; }
.price-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--sp-3); }
.price-list li{ display:flex; gap:var(--sp-2); align-items:flex-start; font-size:var(--fs-3); color:var(--text-2); }
.price-list li [data-lucide]{ color:var(--accent); width:16px; height:16px; margin-top:3px; flex-shrink:0; }

/* ── 3i. Steps (how it works) ──────────────────────────────────────── */
.step{ display:flex; gap:var(--sp-5); padding:var(--sp-6) 0; border-top:1px solid var(--border-faint); }
.step-n{ font-size:var(--fs-2); color:var(--faint); font-variant-numeric:tabular-nums; padding-top:3px; min-width:28px; }
.step h3{ margin-bottom:var(--sp-2); font-size:var(--fs-6); }
.step p{ color:var(--muted); font-size:var(--fs-4); }

/* ── 3j. Footer ─────────────────────────────────────────────────────── */
.footer{ border-top:1px solid var(--border-faint); padding:var(--sp-10) 0 var(--sp-8); margin-top:var(--sp-8); }
.footer-grid{ display:grid; grid-template-columns:1.6fr repeat(4,1fr); gap:var(--sp-7); }
.footer h4{ font-size:var(--fs-1); text-transform:uppercase; letter-spacing:.12em; color:var(--muted);
  margin-bottom:var(--sp-4); font-weight:var(--fw-semibold); }
.footer a{ display:block; color:var(--text-2); font-size:var(--fs-3); padding:var(--sp-1) 0;
  transition:color var(--dur-1) var(--ease); }
.footer a:hover{ color:var(--text); }
.footer-bottom{ display:flex; align-items:center; justify-content:space-between; margin-top:var(--sp-9);
  padding-top:var(--sp-6); border-top:1px solid var(--border-faint); color:var(--faint); font-size:var(--fs-2); }

/* ── 3k. Prose (content pages) ─────────────────────────────────────── */
.prose{ max-width:var(--w-prose); }
.prose h2{ font-size:var(--fs-7); margin:var(--sp-9) 0 var(--sp-3); }
.prose h3{ font-size:var(--fs-6); margin:var(--sp-7) 0 var(--sp-2); color:var(--text); }
.prose p{ color:var(--text-2); font-size:var(--fs-4); line-height:var(--lh-relaxed); margin:0 0 var(--sp-4); }
.prose ul{ margin:0 0 var(--sp-4); padding-left:var(--sp-5); }
.prose li{ color:var(--text-2); font-size:var(--fs-4); line-height:var(--lh-body); margin:var(--sp-2) 0; }
.prose a{ color:var(--text); border-bottom:1px solid var(--border-strong); }
.prose a:hover{ border-color:var(--accent-line); }
.page-head{ padding:var(--sp-11) 0 var(--sp-2); }
.page-head h1{ font-size:clamp(var(--fs-9),3.6vw,var(--fs-10)); }

/* ── 3l. Toast ──────────────────────────────────────────────────────── */
.toast-wrap{ position:fixed; bottom:var(--sp-6); left:50%; transform:translateX(-50%); z-index:100;
  display:flex; flex-direction:column; gap:var(--sp-2); align-items:center; pointer-events:none; }
.toast{ display:flex; align-items:center; gap:var(--sp-3); background:var(--raised);
  border:1px solid var(--border-strong); color:var(--text); padding:var(--sp-3) var(--sp-4);
  border-radius:var(--r-md); font-size:var(--fs-2); box-shadow:var(--shadow-pop);
  animation:toast-in var(--dur-3) var(--ease); pointer-events:auto; }
.toast [data-lucide]{ width:15px; height:15px; color:var(--muted); }
.toast.out{ opacity:0; transform:translateY(8px); transition:opacity var(--dur-3) var(--ease), transform var(--dur-3) var(--ease); }
@keyframes toast-in{ from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:none;} }

/* ── 3m. Modal ──────────────────────────────────────────────────────── */
.modal-scrim{ position:fixed; inset:0; z-index:110; background:rgba(6,6,7,.62); backdrop-filter:blur(3px);
  display:flex; align-items:center; justify-content:center; padding:var(--sp-6); animation:mfade var(--dur-2) var(--ease); }
.modal{ width:100%; max-width:404px; background:var(--card); border:1px solid var(--border-strong);
  border-radius:var(--r-xl); padding:var(--sp-6); box-shadow:var(--shadow-pop); animation:min var(--dur-3) var(--ease); }
.modal h3{ font-size:var(--fs-6); letter-spacing:-.02em; }
.modal p{ font-size:var(--fs-3); color:var(--muted); margin-top:var(--sp-2); line-height:var(--lh-body); }
.modal-actions{ display:flex; gap:var(--sp-2); justify-content:flex-end; margin-top:var(--sp-6); }
@keyframes mfade{ from{opacity:0;} to{opacity:1;} }
@keyframes min{ from{opacity:0; transform:translateY(6px) scale(.985);} to{opacity:1; transform:none;} }

/* ── 3n. Product visual (landing) ──────────────────────────────────── */
.app-frame{ border:1px solid var(--border); border-radius:var(--r-2xl); overflow:hidden; background:var(--card);
  box-shadow:0 30px 80px rgba(0,0,0,.5); }
.af-bar{ display:flex; align-items:center; gap:var(--sp-2); padding:var(--sp-3) var(--sp-4);
  border-bottom:1px solid var(--border-faint); background:var(--panel); }
.af-dot{ width:11px; height:11px; border-radius:50%; background:var(--w-08); }
.af-url{ margin-left:var(--sp-3); font-size:var(--fs-2); color:var(--faint); }
.af-body{ display:grid; grid-template-columns:210px 1fr 224px; min-height:430px; }
.af-rail{ border-right:1px solid var(--border-faint); padding:var(--sp-4) var(--sp-3); background:var(--panel); }
.af-brand{ font-size:var(--fs-4); font-weight:var(--fw-semibold); letter-spacing:-.03em; padding:2px var(--sp-2) var(--sp-4); }
.af-newchat{ display:flex; align-items:center; gap:var(--sp-2); font-size:var(--fs-2); color:var(--text-2);
  padding:9px var(--sp-3); border:1px solid var(--border); border-radius:var(--r-sm); }
.af-newchat [data-lucide]{ width:15px; height:15px; }
.af-rail-label{ font-size:var(--fs-1); letter-spacing:.1em; text-transform:uppercase; color:var(--faint); padding:var(--sp-4) var(--sp-3) var(--sp-2); }
.af-chat{ font-size:var(--fs-2); color:var(--muted); padding:var(--sp-2) var(--sp-3); border-radius:var(--r-sm); }
.af-chat.active{ color:var(--text); background:var(--w-05); box-shadow:inset 2px 0 0 var(--accent); }
.af-main{ padding:var(--sp-6); display:flex; flex-direction:column; gap:var(--sp-4); }
.af-msg-user{ align-self:flex-start; background:var(--card-2); border:1px solid var(--border); border-radius:var(--r-lg);
  padding:var(--sp-3) var(--sp-4); font-size:var(--fs-3); color:var(--text); }
.af-steps{ display:flex; flex-direction:column; gap:9px; }
.af-step{ display:flex; align-items:center; gap:9px; font-size:var(--fs-2); color:var(--muted); }
.af-step.done [data-lucide]{ color:var(--accent); width:15px; height:15px; }
.af-step.live{ color:var(--text); }
.pulse{ width:8px; height:8px; border-radius:50%; background:var(--accent); animation:pulse 1.8s infinite; }
@keyframes pulse{ 0%{box-shadow:0 0 0 0 rgba(63,208,190,.4);} 70%{box-shadow:0 0 0 7px rgba(63,208,190,0);} 100%{box-shadow:0 0 0 0 rgba(63,208,190,0);} }
.af-artifact{ border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; background:var(--bg); }
.af-art-bar{ display:flex; align-items:center; justify-content:space-between; padding:var(--sp-3) var(--sp-4); border-bottom:1px solid var(--border-faint); }
.af-art-title{ display:flex; align-items:center; gap:var(--sp-2); font-size:var(--fs-2); color:var(--text-2); }
.af-art-title [data-lucide]{ width:15px; height:15px; }
.af-art-actions{ display:flex; gap:var(--sp-4); font-size:var(--fs-1); color:var(--faint); }
.af-art-body{ padding:var(--sp-4); }
.af-subject{ font-size:var(--fs-3); font-weight:var(--fw-semibold); color:var(--text); margin-bottom:var(--sp-3); }
.af-art-body p{ font-size:var(--fs-2); color:var(--text-2); margin:0 0 9px; line-height:var(--lh-relaxed); }
.af-side{ border-left:1px solid var(--border-faint); padding:var(--sp-5) var(--sp-4); background:var(--panel); }
.af-side-h{ font-size:var(--fs-1); letter-spacing:.08em; text-transform:uppercase; color:var(--faint); font-weight:var(--fw-semibold); }
.af-side-p{ font-size:var(--fs-2); color:var(--text-2); margin-top:var(--sp-2); line-height:var(--lh-body); }
.af-conf{ height:6px; border-radius:var(--r-full); background:var(--w-05); margin-top:var(--sp-3); overflow:hidden; }
.af-conf-fill{ height:100%; background:var(--accent); border-radius:var(--r-full); }
.af-src{ display:flex; gap:7px; margin-top:var(--sp-3); }
.af-src span{ width:28px; height:28px; border-radius:var(--r-sm); border:1px solid var(--border); background:var(--card-2);
  display:flex; align-items:center; justify-content:center; font-size:10.5px; font-weight:var(--fw-semibold); color:var(--muted); }
@media (max-width:820px){ .af-body{ grid-template-columns:1fr; } .af-rail,.af-side{ display:none; } }

/* ── 3o. Hero eyebrow spacing helpers used inline are avoided; motion ─ */
.reveal{ opacity:0; transform:translateY(10px);
  transition:opacity var(--dur-3) var(--ease), transform var(--dur-3) var(--ease); }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
  .reveal{ opacity:1; transform:none; }
}

/* Scrollbars — quiet */
::-webkit-scrollbar{ width:9px; height:9px; }
::-webkit-scrollbar-thumb{ background:var(--w-08); border-radius:var(--r-sm); }
::-webkit-scrollbar-thumb:hover{ background:var(--w-13); }
::-webkit-scrollbar-track{ background:transparent; }

/* ── Responsive ─────────────────────────────────────────────────────── */
@media (max-width:900px){
  .grid-3,.grid-4{ grid-template-columns:1fr 1fr; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .nav-links{ display:none; }
  .nav-cta .btn-ghost{ display:none; }   /* keep only the primary CTA on mobile */
  .nav-burger{ display:inline-flex; align-items:center; justify-content:center; }
}
@media (max-width:620px){
  .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; }
  .container{ padding:0 var(--sp-5); }
}