/* ============================================================================
   JEDI — "Sound Becomes Story" cinematic engine · dual theme (black / white).
   ----------------------------------------------------------------------------
   ONE fixed, full-viewport WebGL canvas is the protagonist. Content chapters
   float above it as glass. A switch toggles two moods that share the same film:
     · data-theme="dark"  → deep cinematic stage, sound glows (additive bloom)
     · data-theme="light" → airy white/lavender stage, blue sound on white
   The WebGL scene adapts via a u_dark uniform (see cinema.js). Loaded AFTER
   styles.css so these rules win the cascade.
   ============================================================================ */

/* ===================== SHARED SCENE LAYOUT (both themes) =================== */
/* The page is a vertical film — it must NEVER scroll sideways. GSAP entrance
   reveals slide elements in from off-canvas and the corner badge's ring text
   pokes a few px past the edge; both transiently widen scrollWidth on iOS.
   `clip` kills the horizontal scroll without creating a new scroll container
   (which would break position:fixed/sticky); `hidden` is the fallback. */
html, body{ overflow-x:hidden; }
@supports (overflow-x:clip){ html, body{ overflow-x:clip; } }
#cinema{ position:fixed; inset:0; width:100%; height:100%; display:block; z-index:0; pointer-events:none; }
main, footer.foot{ position:relative; z-index:2; }
/* the top bar stays with you: restore styles.css's sticky (this file used to
   flatten it to relative, which pinned the bar to the top of the document) */
header.nav{ position:sticky; top:0; z-index:60; }
/* The sections must stay transparent so the film shows through. These used to
   beat styles.css only by load order at equal specificity — one stylesheet
   reorder would have re-enabled three fully opaque section backgrounds. The
   `html` prefix makes the intent win on specificity instead of on luck. */
html .hero, html .band, html .band.soft, html .beta{ background:transparent; }

.hero{ min-height:clamp(640px, 94vh, 1000px); display:flex; align-items:center; overflow:visible; }
.hero .wrap{ position:relative; z-index:2; width:100%; padding-top:112px; padding-bottom:64px; }
.hero-copy{ max-width:680px; }
/* The themed scrims below stack a HORIZONTAL gradient that never fades
   vertically, so it used to terminate at ~0.92 alpha right on the hero's bottom
   edge — a hard seam straight across the hero/#why boundary. This mask feathers
   every layer to zero INSIDE the box, so the clip is invisible by construction
   instead of depending on getting each gradient's stops exactly right. */
.hero-scrim{ position:absolute; inset:0; z-index:1; pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg, #000 0%, #000 55%, rgba(0,0,0,0) 100%);
          mask-image:linear-gradient(180deg, #000 0%, #000 55%, rgba(0,0,0,0) 100%); }
@media (max-width:900px){ .hero{ min-height:auto; padding:16px 0 8px; } }

/* glass cards share the blur; per-theme tints below */
.phase, .diff, .ac, .badge, .beta-badge{
  -webkit-backdrop-filter:saturate(160%) blur(16px); backdrop-filter:saturate(160%) blur(16px);
}
/* soft legibility panels behind copy-only chapters */
#why .why-grid, .beta-cta, .sec-head{ position:relative; }
#why .why-grid::before, .beta-cta::before{ content:""; position:absolute; inset:-30px -40px; z-index:-1; border-radius:36px; }
.sec-head::before{ content:""; position:absolute; inset:-24px -34px; z-index:-1; border-radius:30px; }
/* Their radial fills reach 115-120% of the box, so they were still opaque where
   the box clipped them — visible as soft rectangular slabs at the corners.
   Feather the whole layer to zero at its own edge. */
#why .why-grid::before, .beta-cta::before, .sec-head::before{
  -webkit-mask-image:radial-gradient(105% 105% at 50% 50%, #000 52%, rgba(0,0,0,0) 100%);
          mask-image:radial-gradient(105% 105% at 50% 50%, #000 52%, rgba(0,0,0,0) 100%); }

/* The closing statement is drawn by the particles themselves — no overlay
   canvas, no SVG layer. See the finale note in cinema.js. */

/* ---- ambient sound switch — quiet iOS-style pill, top-right, left of the
   theme switch. Off: neutral grey. On: flat brand blue. No ornament. ------- */
.sound-toggle{
  position:fixed; top:20px; right:74px; left:auto; z-index:70;
  appearance:none; -webkit-appearance:none; border:0; background:none; padding:0;
  cursor:pointer; display:inline-flex; line-height:0;
}
.st-track{ position:relative; display:block; width:42px; height:26px; border-radius:999px;
  overflow:hidden; box-sizing:border-box; border:1px solid rgba(11,18,32,.06);
  background:#E3E6EC;
  transition:background .3s ease, border-color .3s ease, box-shadow .2s ease; }
.sound-toggle:not(.is-muted) .st-track{ background:var(--brand,#0045FF); border-color:transparent; }
:root[data-theme="dark"] .st-track{ background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.08); }
:root[data-theme="dark"] .sound-toggle:not(.is-muted) .st-track{ background:var(--brand-2,#1E4CFF); }
.st-eq{ display:none; }
.st-knob{ position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:50%;
  display:grid; place-items:center; z-index:2;
  background:#fff; color:#8A90A0; box-shadow:0 1.5px 3px rgba(11,18,32,.25);
  transition:transform .28s cubic-bezier(.3,.9,.3,1), color .28s ease; }
.sound-toggle:not(.is-muted) .st-knob{ transform:translateX(16px); color:var(--brand,#0045FF); }
.st-knob svg{ width:11px; height:11px; }
.sound-toggle .snd-off{ display:none; }
.sound-toggle.is-muted .snd-on{ display:none; }
.sound-toggle.is-muted .snd-off{ display:block; }
.sound-toggle:focus-visible{ outline:none; }
.sound-toggle:focus-visible .st-track{ box-shadow:0 0 0 3px color-mix(in srgb, var(--brand-2,#1E4CFF) 38%, transparent); }
.sound-toggle.pulse .st-track{ animation:sndpulse 2.4s ease-in-out infinite; }
@keyframes sndpulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(61,107,255,.0); } 50%{ box-shadow:0 0 0 5px rgba(61,107,255,.14); } }
@media (prefers-reduced-motion: reduce){ .sound-toggle.pulse .st-track{ animation:none; } }

/* ---- closing act: the particle statement composes here, full-screen & clean */
.closing{
  /* dvh, not vh: on mobile every URL-bar show/hide changed this height, which
     moved scrollHeight and remapped u_scroll in the middle of a scroll.
     The vh line stays first as the fallback for engines without dvh. */
  min-height:110vh;
  min-height:110dvh; display:flex; align-items:flex-end; justify-content:center;
  padding-bottom:3.5vh; position:relative;
}
.closing-cta{
  display:inline-flex; align-items:center; gap:10px; height:54px; padding:0 34px;
  border-radius:999px; font-family:var(--font-body); font-size:16px; font-weight:600; color:#fff;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
  box-shadow:0 18px 46px -16px color-mix(in srgb, var(--brand) 85%, transparent), inset 0 1px 0 rgba(255,255,255,.3);
  transition:transform .15s ease, box-shadow .2s ease; opacity:.96;
}
.closing-cta:hover{ transform:translateY(-2px); opacity:1; }

/* ---- the theme switch (in the nav) --------------------------------------- */
/* ── celestial day / night theme switch — fixed, top-right ─ */
.theme-switch{ position:fixed; top:20px; right:22px; z-index:70;
  appearance:none; -webkit-appearance:none; border:0; background:none; padding:0;
  cursor:pointer; display:inline-flex; align-items:center; line-height:0; }
/* reserve room on the right of the navbar so the CTA never slides under the switch */
.nav-inner{ padding-right:132px; }   /* room for BOTH pills: sound (right:74) + theme (right:22) */
.theme-switch:focus-visible{ outline:none; }
.theme-switch:focus-visible .ts-track{ box-shadow:inset 0 1px 3px rgba(11,18,32,.12),
  0 0 0 3px color-mix(in srgb,var(--brand-2) 42%, transparent); }
.theme-switch:hover .ts-knob{ filter:brightness(1.06); }

.ts-track{ position:relative; display:block; width:42px; height:26px; border-radius:999px;
  overflow:hidden; box-sizing:border-box; border:1px solid rgba(11,18,32,.06);
  background:#E3E6EC;
  transition:background .3s ease, box-shadow .2s ease, border-color .3s ease; }

/* ornament retired: quiet iOS-style switch */
.ts-clouds{ display:none; }
.ts-stars{ display:none; }

/* the sliding knob: plain white, a small quiet glyph says which mode */
.ts-knob{ position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:50%;
  display:grid; place-items:center; z-index:2;
  background:#fff; color:#8A90A0; box-shadow:0 1.5px 3px rgba(11,18,32,.25);
  transition:transform .28s cubic-bezier(.3,.9,.3,1), color .28s ease; }
.ts-knob svg{ position:absolute; width:12px; height:12px; }
.ts-sun{ color:#B7893B; transition:opacity .25s ease, transform .3s ease; }
.ts-moon{ color:#5A6B9E; opacity:0; transform:rotate(-40deg) scale(.6);
  transition:opacity .25s ease, transform .3s ease; }

/* ── night state ─────────────────────────────────────────── */
:root[data-theme="dark"] .ts-track{
  background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.08); }
:root[data-theme="dark"] .ts-knob{ transform:translateX(16px); }
:root[data-theme="dark"] .ts-sun{ opacity:0; transform:rotate(40deg) scale(.6); }
:root[data-theme="dark"] .ts-moon{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  .ts-track,.ts-knob,.ts-sun,.ts-moon,.ts-clouds,.ts-stars{ transition:none; }
  .ts-stars i{ animation:none; } }

/* ============================================================================
   DARK THEME — deep cinematic stage
   ============================================================================ */
:root[data-theme="dark"]{
  --bg:#070912; --bg-soft:transparent; --surface:rgba(150,180,255,0.055);
  --ink:#EAF0FF; --ink-2:#C6D2F2; --muted:#8C99BC;
  --line:rgba(150,180,255,0.16); --line-2:rgba(150,180,255,0.10);
  --brand:#3D6BFF; --brand-2:#6E8BFF; --brand-ink:#0A1533;
  --shadow:0 40px 80px -40px rgba(0,0,0,.7);
  --shadow-sm:0 2px 4px rgba(0,0,0,.3), 0 18px 40px -26px rgba(0,0,0,.7);
}
:root[data-theme="dark"]{ }
[data-theme="dark"] html, [data-theme="dark"] body{ background:#070912; }
html[data-theme="dark"], html[data-theme="dark"] body{ background:#070912; color:var(--ink); }
html[data-theme="dark"] #cinema{ background:#070912; }
/* ran out at 75%, leaving the last quarter of #how and #about abruptly untinted */
html[data-theme="dark"] .band.soft{ background:linear-gradient(180deg, transparent 0%, rgba(120,150,255,0.035) 42%, transparent 100%); }

html[data-theme="dark"] header.nav{ background:rgba(9,12,22,0.55);
  -webkit-backdrop-filter:saturate(160%) blur(16px); backdrop-filter:saturate(160%) blur(16px); border-bottom:1px solid var(--line-2); }
html[data-theme="dark"] header.nav.scrolled{ box-shadow:0 20px 50px -30px rgba(0,0,0,.8); background:rgba(9,12,22,0.72); }
html[data-theme="dark"] .nav-links a{ color:var(--ink-2); }
html[data-theme="dark"] .nav-links a:hover{ color:#fff; }
html[data-theme="dark"] .brandlock .part{ color:var(--muted); border-left-color:var(--line); }

html[data-theme="dark"] .hero-scrim{
  background:
    linear-gradient(90deg, rgba(7,9,18,0.92) 0%, rgba(7,9,18,0.66) 30%, rgba(7,9,18,0.0) 62%),
    radial-gradient(130% 100% at 8% 46%, rgba(7,9,18,0.55) 0%, transparent 58%),
    linear-gradient(180deg, rgba(7,9,18,0.0) 50%, rgba(7,9,18,0.40) 78%, rgba(7,9,18,0.0) 100%);
}
@media (max-width:900px){ html[data-theme="dark"] .hero-scrim{
  background:linear-gradient(180deg, rgba(7,9,18,0.80) 0%, rgba(7,9,18,0.35) 48%, rgba(7,9,18,0.0) 100%); } }

html[data-theme="dark"] h1.hero-title{ color:#F4F7FF; text-shadow:0 2px 40px rgba(10,20,60,.65), 0 1px 2px rgba(0,0,0,.4); }
html[data-theme="dark"] .why-grid h2, html[data-theme="dark"] .sec-head h2,
html[data-theme="dark"] .beta h2, html[data-theme="dark"] .about-grid h2{ color:#F1F5FF; text-shadow:0 2px 34px rgba(6,10,30,.6); }
html[data-theme="dark"] .hero-sub, html[data-theme="dark"] .why-body p,
html[data-theme="dark"] .sec-head p, html[data-theme="dark"] .beta-lead{ color:var(--ink-2); text-shadow:0 1px 14px rgba(6,10,30,.7); }
html[data-theme="dark"] .badge .dot{ box-shadow:0 0 0 4px rgba(61,107,255,.25), 0 0 14px rgba(61,107,255,.8); }

html[data-theme="dark"] #why .why-grid::before{
  background:radial-gradient(120% 120% at 50% 45%, rgba(7,9,18,0.66) 0%, rgba(7,9,18,0.30) 55%, transparent 82%); }
html[data-theme="dark"] .sec-head::before{
  background:radial-gradient(120% 140% at 18% 45%, rgba(7,9,18,0.62) 0%, transparent 78%); }
/* the finale sits over the bright bloom — a stronger scrim keeps the CTA legible.
   Uses the SAME ink as everything else (#070912): the old #040610 was a second,
   darker black, which read as a rectangular patch instead of a veil. */
html[data-theme="dark"] .beta-cta::before{
  inset:-56px -72px;
  background:radial-gradient(115% 115% at 50% 46%, rgba(7,9,18,0.84) 0%, rgba(7,9,18,0.52) 50%, rgba(7,9,18,0.0) 84%); }
html[data-theme="dark"] .beta h2{ color:#FFFFFF; text-shadow:0 2px 30px rgba(0,0,0,.9), 0 1px 3px rgba(0,0,0,.8); }
html[data-theme="dark"] .beta-lead{ color:#EFF3FF; text-shadow:0 1px 18px rgba(0,0,0,.9); }
html[data-theme="dark"] .beta-list li{ color:#EEF3FF; text-shadow:0 1px 12px rgba(0,0,0,.85); }
html[data-theme="dark"] .beta-list .dot{ box-shadow:0 0 10px rgba(61,107,255,.9); }
html[data-theme="dark"] .beta-badge{ color:#DCE7FF; background:rgba(9,12,22,0.62); border-color:rgba(150,180,255,.42); }
html[data-theme="dark"] .btn-cta{ box-shadow:0 20px 50px -14px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.14), inset 0 1px 0 rgba(255,255,255,.35); }

/* The glass cards sit directly over the particle stage, which at the
   constellation act fills the frame with bright ADDITIVE points. A lightening
   tint (the old rgba(150,180,255,.08)) cannot hold contrast against that — the
   body copy washed out completely. The base is now a deep translucent panel
   with the light sheen kept on top, so it still reads as glass. */
html[data-theme="dark"] .phase, html[data-theme="dark"] .diff, html[data-theme="dark"] .ac,
html[data-theme="dark"] .badge, html[data-theme="dark"] .beta-badge{
  background:
    linear-gradient(180deg, rgba(150,180,255,0.07), rgba(150,180,255,0.02)),
    linear-gradient(180deg, rgba(8,11,22,0.78), rgba(8,11,22,0.62));
  border:1px solid var(--line); }
/* the small pills carry little text — keep them lighter so they stay jewel-like */
html[data-theme="dark"] .badge, html[data-theme="dark"] .beta-badge{
  background:
    linear-gradient(180deg, rgba(150,180,255,0.08), rgba(150,180,255,0.03)),
    linear-gradient(180deg, rgba(8,11,22,0.52), rgba(8,11,22,0.40)); }
html[data-theme="dark"] .phase, html[data-theme="dark"] .diff, html[data-theme="dark"] .ac{
  box-shadow:0 30px 70px -44px rgba(0,0,0,.8), inset 0 1px 0 rgba(180,200,255,.14); }
html[data-theme="dark"] .phase:hover{ border-color:rgba(120,150,255,.5); box-shadow:0 40px 90px -46px rgba(20,40,120,.9), inset 0 1px 0 rgba(180,200,255,.2); }
html[data-theme="dark"] .diff .ic{ background:rgba(61,107,255,.16); color:#A9C0FF; border:1px solid rgba(120,150,255,.28); }
html[data-theme="dark"] .beta-badge{ color:#B9CBFF; }
html[data-theme="dark"] .ac.fair{ background:linear-gradient(180deg, rgba(61,107,255,.14), rgba(61,107,255,.05)); border-color:rgba(120,150,255,.30); }
html[data-theme="dark"] .ac-logo{ filter:brightness(0) invert(1) opacity(.92); }
html[data-theme="dark"] .ac-logo--geneea{ filter:none; background:#fff; padding:8px 10px; border-radius:10px; }
html[data-theme="dark"] .fair-logo{ background:#fff; padding:8px 10px; border-radius:10px; }
html[data-theme="dark"] .btn-primary, html[data-theme="dark"] .btn-cta{ box-shadow:0 18px 46px -16px rgba(61,107,255,.9), inset 0 1px 0 rgba(255,255,255,.28); }
html[data-theme="dark"] .btn-ghost{ background:rgba(150,180,255,.06); color:var(--ink); border-color:var(--line); }
html[data-theme="dark"] .btn-ghost:hover{ border-color:var(--brand-2); color:#fff; }
html[data-theme="dark"] .stats{ border-top-color:var(--line); }
html[data-theme="dark"] .stat .n{ color:#F4F7FF; }
html[data-theme="dark"] footer.foot{ background:rgba(9,12,22,0.6);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); border-top-color:var(--line-2); }

html[data-theme="dark"] body.no-webgl{
  background:
    radial-gradient(1100px 640px at 22% -6%, rgba(30,60,180,.34) 0%, transparent 60%),
    radial-gradient(1000px 560px at 100% 8%, rgba(60,40,160,.28) 0%, transparent 55%),
    radial-gradient(900px 700px at 50% 120%, rgba(20,50,170,.30) 0%, transparent 60%),
    #070912;
  background-attachment:fixed;
}

/* ============================================================================
   LIGHT THEME — airy white/lavender stage (tokens inherit styles.css defaults)
   ============================================================================ */
html[data-theme="light"], html[data-theme="light"] body{ background:#FCFBFF; }
html[data-theme="light"] #cinema{ background:#FCFBFF; }

html[data-theme="light"] .hero-scrim{
  background:
    linear-gradient(90deg, rgba(255,255,255,0.88) 0%, rgba(255,255,255,0.60) 30%, rgba(255,255,255,0.0) 62%),
    radial-gradient(130% 100% at 8% 46%, rgba(255,255,255,0.55) 0%, transparent 58%);
}
@media (max-width:900px){ html[data-theme="light"] .hero-scrim{
  background:linear-gradient(180deg, rgba(255,255,255,0.82) 0%, rgba(255,255,255,0.40) 48%, rgba(255,255,255,0.0) 100%); } }

html[data-theme="light"] h1.hero-title, html[data-theme="light"] .why-grid h2,
html[data-theme="light"] .sec-head h2, html[data-theme="light"] .beta h2, html[data-theme="light"] .about-grid h2{
  text-shadow:0 1px 22px rgba(255,255,255,0.72); }
html[data-theme="light"] .hero-sub, html[data-theme="light"] .why-body p,
html[data-theme="light"] .sec-head p, html[data-theme="light"] .beta-lead{ text-shadow:0 1px 10px rgba(255,255,255,0.9); }

/* the light stage composites the particles as opaque blue dots, so a copy scrim
   needs enough white to actually subdue them under the headings */
html[data-theme="light"] #why .why-grid::before, html[data-theme="light"] .beta-cta::before{
  background:radial-gradient(120% 120% at 50% 45%, rgba(255,255,255,0.88) 0%, rgba(255,255,255,0.58) 55%, transparent 84%); }
html[data-theme="light"] .sec-head::before{
  background:radial-gradient(110% 130% at 20% 45%, rgba(255,255,255,0.84) 0%, rgba(255,255,255,0.44) 52%, transparent 82%); }

/* At 80% white the blue particle field bled straight through the cards and the
   body copy lost contrast — and on a white stage a translucent white panel has
   no edge of its own either. Denser fill + a real border so the card reads as a
   surface; the backdrop blur still carries the glass. */
html[data-theme="light"] .phase, html[data-theme="light"] .diff, html[data-theme="light"] .ac{
  background:color-mix(in srgb, #ffffff 94%, transparent);
  border-color:color-mix(in srgb, #ffffff 30%, var(--line));
  box-shadow:0 24px 50px -32px rgba(11,18,32,.34), inset 0 1px 0 rgba(255,255,255,.6); }
html[data-theme="light"] .badge, html[data-theme="light"] .beta-badge{ background:color-mix(in srgb, #ffffff 88%, transparent); }
html[data-theme="light"] .ac.fair{ background:color-mix(in srgb, var(--brand) 9%, rgba(255,255,255,0.82)); }
html[data-theme="light"] footer.foot{ background:color-mix(in srgb, #ffffff 70%, transparent);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }

html[data-theme="light"] body.no-webgl{
  background:
    radial-gradient(1100px 620px at 15% 0%, #EEE9FF 0%, transparent 60%),
    radial-gradient(1000px 560px at 100% 4%, #E4EEFF 0%, transparent 55%),
    linear-gradient(180deg, #FCFBFF 0%, #FFFFFF 100%);
  background-attachment:fixed;
}

/* both: hide canvas when WebGL is gone */
body.no-webgl #cinema{ display:none; }

/* graceful degrade where backdrop-filter is unsupported → solid glass */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  html[data-theme="dark"] .phase, html[data-theme="dark"] .diff, html[data-theme="dark"] .ac,
  html[data-theme="dark"] .badge, html[data-theme="dark"] .beta-badge{ background:rgba(18,24,44,0.92); }
  html[data-theme="dark"] header.nav, html[data-theme="dark"] footer.foot{ background:rgba(9,12,22,0.94); }
  html[data-theme="light"] .phase, html[data-theme="light"] .diff, html[data-theme="light"] .ac{ background:rgba(255,255,255,0.95); }
}

/* ---- finale CTA: spectacular centered button → signup ---- */
.finale-cta{
  position:relative; overflow:hidden; isolation:isolate;
  display:inline-flex; align-items:center; gap:12px;
  height:64px; padding:0 44px; border-radius:999px;
  font-family:var(--font-body); font-size:18px; font-weight:700; letter-spacing:.005em;
  color:#fff; text-decoration:none;
  background:linear-gradient(135deg, var(--brand), var(--brand-2));
  box-shadow:0 24px 60px -18px var(--brand), inset 0 1px 0 rgba(255,255,255,.35);
  transition:transform .2s cubic-bezier(.2,.7,.2,1), box-shadow .25s ease;
  animation:cta-pulse 3s ease-in-out infinite;
}
.finale-cta > *{ position:relative; z-index:2; }
.finale-cta::before{ content:""; position:absolute; inset:0; z-index:1; border-radius:inherit;
  background:linear-gradient(120deg, transparent 32%, rgba(255,255,255,.5) 50%, transparent 68%);
  transform:translateX(-135%); }
.finale-cta:hover::before{ transition:transform .8s ease; transform:translateX(135%); }
.finale-cta:hover{ transform:translateY(-3px) scale(1.02); }
.finale-cta svg{ transition:transform .2s ease; }
.finale-cta:hover svg{ transform:translateX(5px); }
.finale-cta:focus-visible{ outline:2px solid #fff; outline-offset:3px; }
@keyframes cta-pulse{
  0%,100%{ box-shadow:0 24px 60px -18px var(--brand), 0 0 0 0 color-mix(in srgb,var(--brand) 45%, transparent), inset 0 1px 0 rgba(255,255,255,.35); }
  50%{ box-shadow:0 28px 72px -16px var(--brand), 0 0 0 14px color-mix(in srgb,var(--brand) 0%, transparent), inset 0 1px 0 rgba(255,255,255,.35); }
}
@media (prefers-reduced-motion:reduce){ .finale-cta{ animation:none; } .finale-cta::before{ display:none; } }

/* ── final period → CTA comet (fires on the last scroll) ─── */
.final-comet, .final-spark{ position:fixed; left:0; top:0; border-radius:50%; pointer-events:none;
  will-change:transform,opacity; }
.final-comet{ width:14px; height:14px; margin:-7px 0 0 -7px; z-index:66; opacity:0;
  background:radial-gradient(circle at 50% 45%, #ffffff, #8ea8ff 45%, #3D6BFF 82%);
  box-shadow:0 0 15px 4px rgba(122,150,255,.9), 0 0 36px 11px rgba(61,107,255,.5); }
.final-spark{ width:8px; height:8px; margin:-4px 0 0 -4px; z-index:65;
  background:radial-gradient(circle, rgba(150,175,255,.95), rgba(61,107,255,0) 70%); }
/* the corner-badge greets the arriving period, drawing the eye to the CTA */
.corner-badge.cta-arrive{ animation:cta-arrive 1.2s cubic-bezier(.2,.7,.2,1); }
@keyframes cta-arrive{ 0%{ transform:scale(1);} 22%{ transform:scale(1.22);} 55%{ transform:scale(.95);} 100%{ transform:scale(1);} }
@media (prefers-reduced-motion:reduce){ .final-comet,.final-spark{ display:none; } .corner-badge.cta-arrive{ animation:none; } }

/* ── full-screen nav hover FX: a giant ghost word + brand wash ─ */
.nav-fx{ position:fixed; inset:0; z-index:55; pointer-events:none; display:grid; place-items:center;
  overflow:hidden; opacity:0; transition:opacity .45s ease; }
.nav-fx.is-on{ opacity:1; }
.nav-fx__wash{ position:absolute; inset:0;
  background:radial-gradient(58% 58% at 50% 44%, color-mix(in srgb,var(--brand) 20%, transparent), transparent 72%); }
.nav-fx__word{ max-width:92vw; text-align:center; text-transform:uppercase;
  font-family:var(--font-display,"Power Grotesk",sans-serif); font-weight:700; line-height:1; letter-spacing:.01em;
  font-size:clamp(40px, 10vw, 185px);
  background:linear-gradient(180deg, color-mix(in srgb,var(--brand-2) 85%, #fff), var(--brand));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  opacity:.17; transform:translateY(18px) scale(1.05);
  filter:drop-shadow(0 0 46px color-mix(in srgb,var(--brand) 45%, transparent));
  transition:transform .65s cubic-bezier(.2,.7,.2,1); }
.nav-fx.is-on .nav-fx__word{ transform:none; }
:root[data-theme="light"] .nav-fx__word{ opacity:.12; }
:root[data-theme="light"] .nav-fx__wash{ background:radial-gradient(58% 58% at 50% 44%, color-mix(in srgb,var(--brand) 11%, transparent), transparent 72%); }
@media (prefers-reduced-motion:reduce){ .nav-fx,.nav-fx__word{ transition:none; } .nav-fx__word{ transform:none; } }

/* ── mobile navigation: hamburger + full-screen overlay ─────────── */
.nav-burger{ display:none; }
@media (max-width:760px){
  .nav-links{ display:none; }
  .nav-tools{ display:none; }              /* the crowded inline Sign in + Try for free */
  .brandlock .part{ display:none; }        /* drop the tagline on phones */
  .nav-inner{ padding-right:28px; }        /* logo stays left (default flex start) */
  /* top-right on phones: sound pill in the corner, burger beside it;
     the theme switch lives inside the menu (Appearance row) */
  .nav-burger{ position:fixed; top:16px; right:16px; z-index:71; margin-left:0;
    display:inline-flex; flex-direction:column; justify-content:center; gap:5px;
    width:40px; height:40px; padding:0 8px; border:0; background:transparent; cursor:pointer; }
  /* phones: the top-right corner belongs to the burger alone — BOTH pills
     live inside the menu (Appearance / Sound rows) */
  .theme-switch{ display:none; }
  .sound-toggle{ display:none; }
  .nav-burger span{ height:2px; width:100%; border-radius:2px; background:var(--ink);
    transition:transform .3s ease, opacity .2s ease; }
  .nav-burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .nav-burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
  .nav-burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
}
.mnav{ position:fixed; inset:0; z-index:80; display:flex; flex-direction:column; justify-content:center;
  gap:6px; padding:40px 32px; opacity:0; visibility:hidden; transform:translateY(-12px);
  background:color-mix(in srgb, var(--bg) 94%, transparent);
  -webkit-backdrop-filter:blur(22px) saturate(160%); backdrop-filter:blur(22px) saturate(160%);
  transition:opacity .35s ease, transform .35s cubic-bezier(.2,.7,.2,1), visibility .35s; }
.mnav.open{ opacity:1; visibility:visible; transform:none; }
.mnav a{ font-family:var(--font-display,"Power Grotesk",sans-serif); font-weight:700;
  font-size:clamp(28px,8.5vw,40px); line-height:1.28; color:var(--ink); text-decoration:none; }
.mnav a.mnav-signin{ color:var(--muted); font-size:22px; margin-top:6px; }
.mnav a.mnav-cta{ margin-top:22px; align-self:flex-start; color:#fff; font-size:19px; padding:14px 30px;
  border-radius:999px; background:linear-gradient(135deg,var(--brand),var(--brand-2));
  box-shadow:0 16px 34px -14px var(--brand); }
.mnav__close{ position:absolute; top:14px; right:14px; width:46px; height:46px; border:0; background:transparent;
  color:var(--ink); font-size:32px; line-height:1; cursor:pointer; }
/* Appearance row: hosts the theme switch on phones */
.mnav__row{ display:flex; align-items:center; justify-content:space-between; gap:16px;
  margin-top:30px; padding-top:24px;
  border-top:1px solid color-mix(in srgb, var(--ink) 14%, transparent); }
.mnav__row-label{ font-family:var(--font-display,"Power Grotesk",sans-serif); font-weight:700;
  font-size:20px; color:var(--muted); }
.mnav .theme-switch, .mnav .sound-toggle{ display:inline-flex; position:static; }
@media (prefers-reduced-motion:reduce){ .mnav, .nav-burger span{ transition:none; } }

/* ── mobile: stack the sound toggle directly above the corner CTA ── */
@media (max-width:560px){
  .sound-toggle{ right:40px; bottom:122px; }   /* centred over the 96px badge (right:14, bottom:14) */
}

/* ── filigrana: fine grain/texture over the backdrop (adds richness, breaks
   gradient banding & any visible seam). Sits above the canvas, below content. */
body::before{ content:""; position:fixed; inset:0; z-index:1; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:140px 140px; opacity:.05; mix-blend-mode:overlay; }
:root[data-theme="light"] body::before{ opacity:.03; }

/* The finale backdrop is drawn by the shader (deep water + god-rays), so the
   old #finale-bg gradient element is gone: the canvas is opaque and stays live
   to the end, which made a DOM layer underneath it unreachable anyway. */