@charset "UTF-8";
/* ==========================================================================
   BrainDetox — landing page
   Design system: Deep Forest + Liquid Glass + Soft 3D + Digital Wellness

   Contents
     01  Design tokens
     02  Reset & base
     03  Typography
     04  Layout primitives
     05  Atmosphere (aurora, grain, blobs)
     06  Liquid-glass system
     07  Buttons & pills
     08  Navigation
     09  Hero
     10  Marquee
     11  Problem
     12  How it works
     13  Feature grid
     14  Brain-score band
     15  Screens rail
     16  Privacy
     17  FAQ
     18  CTA
     19  Footer
     20  Motion & reveal
   ========================================================================== */

/* ── 01  Design tokens ─────────────────────────────────────────────────── */
:root {
  /* Deep-forest surface ramp. Darkest is the page floor; each step lifts. */
  --bg-abyss:  #030D07;
  --bg-base:   #06180E;
  --bg-raise:  #0A2416;
  --bg-lift:   #0F3A20;

  /* Brand greens — the reference accent family. */
  --green:        #8DF06A;
  --green-soft:   #B6FA9B;
  --green-deep:   #63D93F;
  --green-pale:   #A5F57F;
  --grad-green:   linear-gradient(180deg, var(--green-pale), var(--green-deep));

  /* Secondary accents, used sparingly and always meaningfully:
     amber = "over your limit", blue = the app's light/insights surfaces. */
  --amber:      #E8994A;
  --amber-soft: #F5B77C;
  --blue:       #6EA8FF;
  --blue-soft:  #8CBEFF;

  /* Ink. The two dim tones are named, not numbered, because their alpha is set
     by contrast rather than by taste: on --bg-base, .54 lands at 5.1:1 and .50
     at 4.8:1, so even 11px captions clear WCAG AA (4.5:1). Dimming them further
     looks better in isolation and fails the audit. */
  --ink:        #EAF6EE;
  --ink-70:     rgba(234, 246, 238, .70);
  --ink-60:     rgba(234, 246, 238, .62);
  --ink-muted:  rgba(234, 246, 238, .54);
  --ink-faint:  rgba(234, 246, 238, .50);

  /* Liquid glass — layered so surfaces read as real glass, not flat rgba.
     tint  : the body of the glass (a vertical gradient = light falling off)
     edge  : hairline border
     sheen : inner top highlight, the lit lip of the pane
     drop  : outer shadow that seats the pane above the page */
  --glass-tint:   linear-gradient(160deg, rgba(180, 255, 205, .10), rgba(6, 24, 14, .34) 62%);
  --glass-tint-2: linear-gradient(160deg, rgba(180, 255, 205, .14), rgba(6, 24, 14, .28) 58%);
  --glass-edge:   rgba(141, 240, 106, .18);
  --glass-edge-2: rgba(234, 246, 238, .13);
  --glass-sheen:  inset 0 1px 0 rgba(226, 255, 236, .22);
  --glass-inner:  inset 0 -30px 60px -40px rgba(0, 0, 0, .8);
  --glass-drop:   0 28px 70px -34px rgba(0, 0, 0, .92);
  --glass-blur:   18px;
  --glass-sat:    150%;

  /* Glow */
  --glow-green: 0 24px 60px -24px rgba(141, 240, 106, .70);
  --glow-ring:  0 0 0 1px rgba(141, 240, 106, .28);

  /* Type */
  --font-display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --font-body:    "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "DM Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Capped at 4.5rem: the longest hero line ("one hour at a time.") has to fit
     the copy column without wrapping to a stray fourth line. */
  --fs-hero:    clamp(2.5rem, 4.9vw, 4.5rem);
  --fs-h2:      clamp(2.125rem, 4.4vw, 3.625rem);
  --fs-h3:      clamp(1.75rem, 3.2vw, 2.625rem);
  --fs-huge:    clamp(5.5rem, 17vw, 13.75rem);
  --fs-lead:    clamp(1.0625rem, 1.35vw, 1.1875rem);
  --fs-body:    1.0625rem;
  --fs-small:   .875rem;
  --fs-eyebrow: .78rem;

  /* Space */
  --sp-1: .25rem;  --sp-2: .5rem;   --sp-3: .75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;  --sp-6: 2rem;    --sp-7: 3rem;    --sp-8: 4rem;
  --sp-9: 6rem;    --sp-10: 8.125rem;

  --shell:   1240px;
  --gutter:  clamp(1.25rem, 4vw, 2rem);
  --section: clamp(5rem, 10vw, 8.125rem);

  /* Radii */
  --r-sm: 12px;  --r-md: 18px;  --r-lg: 24px;
  --r-xl: 32px;  --r-2xl: 40px; --r-pill: 999px;

  /* Motion */
  --ease-out:  cubic-bezier(.2, .8, .2, 1);
  --ease-soft: cubic-bezier(.4, 0, .2, 1);
  --t-fast: .18s;  --t-mid: .34s;  --t-slow: .95s;

  --nav-h: 68px;
}

/* ── 02  Reset & base ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* Anchors clear the fixed nav instead of hiding under it. */
  scroll-padding-top: calc(var(--nav-h) + 28px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg-base);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* The single guard against sideways scroll from glows and the tilted band. */
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: var(--green); text-decoration: none; transition: color var(--t-fast) var(--ease-soft); }
a:hover { color: var(--green-soft); }
button { font: inherit; color: inherit; }
ul { margin: 0; padding: 0; list-style: none; }
::selection { background: var(--green); color: var(--bg-base); }

/* Keyboard focus stays visible everywhere — never trade this for looks. */
:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 3px;
  border-radius: 4px;
}
:focus:not(:focus-visible) { outline: none; }

.skip-link {
  position: absolute; left: 50%; top: 0;
  transform: translate(-50%, -120%);
  z-index: 200;
  padding: .75rem 1.25rem;
  background: var(--green); color: var(--bg-base);
  font-weight: 700; border-radius: 0 0 var(--r-sm) var(--r-sm);
  transition: transform var(--t-mid) var(--ease-out);
}
.skip-link:focus { transform: translate(-50%, 0); color: var(--bg-base); }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: var(--bg-abyss); }
::-webkit-scrollbar-thumb { background: #1d4a2d; border-radius: var(--r-pill); }
::-webkit-scrollbar-thumb:hover { background: #2a6640; }

/* ── 03  Typography ────────────────────────────────────────────────────── */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -.04em;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--fs-hero); line-height: .93; letter-spacing: -.045em; }
h2 { font-size: var(--fs-h2);   line-height: 1.02; }
h3 { font-size: var(--fs-h3);   line-height: 1.06; letter-spacing: -.03em; }

p { margin: 0; text-wrap: pretty; }
.lead { font-size: var(--fs-lead); line-height: 1.58; color: var(--ink-60); }

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--green);
  margin: 0 0 var(--sp-4);
}
.eyebrow--amber { color: var(--amber); }
.eyebrow--blue  { color: var(--blue); }

.accent { color: var(--green); }

/* A gradient wash on key words. Falls back to solid ink where unsupported. */
.text-grad {
  background: linear-gradient(96deg, var(--green-soft), var(--green) 42%, var(--green-deep));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

.num { font-family: var(--font-display); font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }

/* ── 04  Layout primitives ─────────────────────────────────────────────── */
.shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); }
.section { position: relative; z-index: 2; padding-block: var(--section); }
.section--tight { padding-block: clamp(3.5rem, 7vw, 5.5rem); }
.section-head { max-width: 660px; margin-bottom: clamp(3rem, 6vw, 4.5rem); }
.section-head--center { margin-inline: auto; text-align: center; }
.stack > * + * { margin-top: var(--sp-4); }

/* ── 05  Atmosphere ────────────────────────────────────────────────────── */
/* Fixed, painted behind everything. pointer-events:none so it never eats clicks.
   Kept out of the flow so the blobs can bleed past the viewport without
   widening the document (which would reintroduce horizontal scroll). */
.atmosphere {
  position: fixed; inset: 0;
  pointer-events: none; z-index: 0;
  overflow: hidden;
  contain: strict;
}
.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(26px);
  will-change: transform, opacity;
}
.blob--green {
  top: -240px; right: -180px; width: 740px; height: 740px;
  background: radial-gradient(circle, rgba(141, 240, 106, .20), transparent 62%);
  animation: breathe 9s var(--ease-soft) infinite;
}
.blob--amber {
  bottom: -320px; left: -240px; width: 780px; height: 780px;
  background: radial-gradient(circle, rgba(232, 153, 74, .13), transparent 62%);
  animation: breathe 13s var(--ease-soft) infinite;
}
.blob--teal {
  top: 38%; left: 46%; width: 620px; height: 620px;
  background: radial-gradient(circle, rgba(90, 200, 160, .10), transparent 64%);
  animation: breathe 16s var(--ease-soft) infinite;
}
/* A faint canopy wash at the very top, like light through leaves. */
.atmosphere::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(1100px 700px at 78% -8%, rgba(15, 58, 32, .85) 0%, transparent 60%);
}

/* Film grain keeps large flat gradients from banding on wide dark screens. */
.grain {
  position: fixed; inset: 0; z-index: 1;
  pointer-events: none; opacity: .035;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)'/></svg>");
}

/* ── 06  Liquid-glass system ───────────────────────────────────────────── */
/* .glass is the base pane. Layers, outermost first:
     · backdrop-filter blurs + saturates whatever sits behind
     · --glass-tint paints the body of the pane
     · ::before draws a gradient hairline via mask (brighter top-left)
     · ::after is the specular sheen that tracks the pointer
   Every layer is transform/opacity-friendly so hover stays on the GPU. */
.glass {
  position: relative;
  background: var(--glass-tint);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  border-radius: var(--r-lg);
  box-shadow: var(--glass-sheen), var(--glass-inner), var(--glass-drop);
  isolation: isolate;
}

/* Gradient hairline. A masked border beats `border-color` because the edge can
   fade around the pane the way a real bevel catches light. */
.glass::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(150deg,
              rgba(182, 250, 155, .55) 0%,
              rgba(141, 240, 106, .18) 26%,
              rgba(234, 246, 238, .06) 52%,
              rgba(141, 240, 106, .16) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
}

/* Specular sheen. --mx/--my are written by JS (see js/main.js → glassSheen).
   Default 50%/0% keeps it looking lit even before the pointer arrives. */
.glass::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%),
              rgba(198, 255, 216, .13), transparent 58%);
  opacity: 0;
  transition: opacity var(--t-mid) var(--ease-soft);
  pointer-events: none;
  z-index: 0;
}
.glass:hover::after, .glass:focus-within::after { opacity: 1; }

/* Where backdrop-filter is unavailable, lean on a denser solid so text keeps
   its contrast instead of floating on a washed-out panel. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: linear-gradient(160deg, rgba(18, 56, 34, .96), rgba(6, 24, 14, .96)); }
}

.glass--flat  { box-shadow: var(--glass-sheen), var(--glass-drop); }
.glass--panel { background: var(--glass-tint-2); border-radius: var(--r-xl); }
.glass--pill  { border-radius: var(--r-pill); }

/* Card: a glass pane that lifts toward the pointer. */
.card {
  padding: clamp(1.5rem, 2.6vw, 2rem);
  height: 100%;
  transition: transform var(--t-mid) var(--ease-out),
              box-shadow var(--t-mid) var(--ease-out);
}
.card:hover {
  transform: translateY(-6px);
  box-shadow: var(--glass-sheen), var(--glass-inner),
              0 40px 90px -38px rgba(0, 0, 0, .95),
              0 0 0 1px rgba(141, 240, 106, .16);
}
.card__icon {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 14px;
  background: linear-gradient(160deg, rgba(141, 240, 106, .22), rgba(141, 240, 106, .06));
  box-shadow: inset 0 1px 0 rgba(226, 255, 236, .25);
  margin-bottom: var(--sp-5);
  color: var(--green);
}
.card__icon svg { width: 23px; height: 23px; }
.card__icon--amber { background: linear-gradient(160deg, rgba(232, 153, 74, .22), rgba(232, 153, 74, .06)); color: var(--amber); }
.card__icon--blue  { background: linear-gradient(160deg, rgba(110, 168, 255, .22), rgba(110, 168, 255, .06)); color: var(--blue); }
.card h3 { font-size: 1.3125rem; line-height: 1.25; letter-spacing: -.02em; }
.card p  { margin-top: var(--sp-3); color: var(--ink-60); font-size: .975rem; line-height: 1.6; }

/* ── 07  Buttons & pills ───────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  padding: 1.0625rem 1.875rem;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  font-weight: 700; font-size: 1.0625rem; line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  transition: transform var(--t-fast) var(--ease-out),
              box-shadow var(--t-mid) var(--ease-out),
              background-color var(--t-fast) var(--ease-soft),
              border-color var(--t-fast) var(--ease-soft),
              color var(--t-fast) var(--ease-soft);
}
.btn:active { transform: translateY(1px) scale(.988); }

.btn--primary {
  position: relative;
  overflow: hidden;
  background: var(--grad-green);
  color: var(--bg-base);
  box-shadow: var(--glow-green);
}
.btn--primary:hover { transform: translateY(-2px); color: var(--bg-base); box-shadow: 0 30px 70px -24px rgba(141, 240, 106, .85); }
/* A light sweep on hover — the same specular idea as the glass, at button scale. */
.btn--primary::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .45) 50%, transparent 80%);
  transform: translateX(-130%);
  transition: transform .7s var(--ease-out);
}
.btn--primary:hover::after { transform: translateX(130%); }

.btn--ghost {
  background: rgba(234, 246, 238, .04);
  border-color: rgba(234, 246, 238, .20);
  color: var(--ink);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.btn--ghost:hover { border-color: var(--green); color: var(--green); transform: translateY(-2px); }

.btn--sm { padding: .6875rem 1.25rem; font-size: .9rem; }
.btn__arrow { transition: transform var(--t-mid) var(--ease-out); }
.btn:hover .btn__arrow { transform: translateX(4px); }

.chip {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .5rem .875rem;
  border-radius: var(--r-pill);
  border: 1px solid rgba(234, 246, 238, .14);
  font-size: .875rem; color: var(--ink-70);
  background: rgba(234, 246, 238, .03);
}
.chip-row { display: flex; flex-wrap: wrap; gap: .5625rem; margin-top: var(--sp-5); }

.badge {
  display: inline-flex; align-items: center; gap: .5625rem;
  padding: .5rem .9375rem .5rem .75rem;
  border-radius: var(--r-pill);
  border: 1px solid rgba(141, 240, 106, .28);
  background: rgba(141, 240, 106, .07);
  font-family: var(--font-mono); font-size: .78rem;
  letter-spacing: .06em; text-transform: uppercase; color: var(--green);
}
.badge__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--green); box-shadow: 0 0 10px var(--green);
  animation: blip 1.6s var(--ease-soft) infinite;
}

/* ── 08  Navigation ────────────────────────────────────────────────────── */
.nav {
  position: fixed; top: 18px; left: 0; right: 0;
  z-index: 60;
  display: flex; justify-content: center;
  padding-inline: var(--gutter);
}
.nav__inner {
  display: flex; align-items: center; gap: 1.625rem;
  width: 100%; max-width: 1040px;
  padding: .625rem .625rem .625rem 1.25rem;
  border-radius: var(--r-pill);
  background: rgba(8, 30, 18, .72);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(226, 255, 236, .10), 0 20px 50px -30px rgba(0, 0, 0, .9);
  transition: background-color var(--t-mid) var(--ease-soft),
              box-shadow var(--t-mid) var(--ease-soft);
}
/* Scrolled state: the bar tightens and darkens so content reads under it. */
.nav.is-scrolled .nav__inner {
  background: rgba(6, 22, 13, .88);
  box-shadow: inset 0 1px 0 rgba(226, 255, 236, .12), 0 22px 46px -26px rgba(0, 0, 0, .95);
}
.nav__brand {
  display: inline-flex; align-items: center; gap: .5625rem;
  font-family: var(--font-display); font-weight: 800;
  font-size: 1.125rem; letter-spacing: -.02em; color: var(--ink);
}
.nav__brand:hover { color: var(--ink); }
/* The mark ships with its own pale tile, so it is rounded here rather than
   glowing — a drop-shadow on an opaque square reads as a halo, not a logo. */
.nav__logo { width: 26px; height: 26px; border-radius: 6px; }
.nav__links { display: flex; gap: 1.375rem; margin-left: auto; font-size: .9rem; }
.nav__links a { color: var(--ink-60); position: relative; padding-block: .25rem; }
.nav__links a:hover { color: var(--ink); }
/* Underline grows from the left rather than fading — cheaper and crisper. */
.nav__links a::after {
  content: ""; position: absolute; left: 0; bottom: -2px;
  width: 100%; height: 1.5px; border-radius: 2px;
  background: var(--green);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-mid) var(--ease-out);
}
.nav__links a[aria-current="page"] { color: var(--ink); }
.nav__links a:hover::after,
.nav__links a[aria-current="true"]::after,
.nav__links a[aria-current="page"]::after { transform: scaleX(1); }
.nav__cta { margin-left: 0; }

.nav__toggle {
  display: none;
  margin-left: auto;
  width: 42px; height: 42px;
  align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(234, 246, 238, .16);
  background: rgba(234, 246, 238, .05);
  cursor: pointer;
}
.nav__toggle span {
  display: block; width: 17px; height: 1.5px; border-radius: 2px;
  background: var(--ink); position: relative;
  transition: background-color var(--t-fast) linear;
}
.nav__toggle span::before, .nav__toggle span::after {
  content: ""; position: absolute; left: 0;
  width: 17px; height: 1.5px; border-radius: 2px; background: var(--ink);
  transition: transform var(--t-mid) var(--ease-out);
}
.nav__toggle span::before { top: -5.5px; }
.nav__toggle span::after  { top: 5.5px; }
.nav__toggle[aria-expanded="true"] span { background: transparent; }
.nav__toggle[aria-expanded="true"] span::before { transform: translateY(5.5px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span::after  { transform: translateY(-5.5px) rotate(-45deg); }

.nav__drawer {
  position: fixed; inset: 0 0 auto;
  top: calc(var(--nav-h) + 22px);
  margin-inline: var(--gutter);
  padding: var(--sp-5);
  border-radius: var(--r-xl);
  background: rgba(7, 26, 16, .94);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  backdrop-filter: blur(20px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(226, 255, 236, .12), 0 30px 70px -30px rgba(0, 0, 0, .95);
  display: grid; gap: var(--sp-2);
  z-index: 59;
  opacity: 0; visibility: hidden;
  transform: translateY(-12px) scale(.985);
  transform-origin: top center;
  transition: opacity var(--t-mid) var(--ease-out),
              transform var(--t-mid) var(--ease-out),
              visibility 0s linear var(--t-mid);
}
.nav__drawer.is-open {
  opacity: 1; visibility: visible; transform: translateY(0) scale(1);
  transition-delay: 0s;
}
.nav__drawer a {
  padding: .875rem 1rem;
  border-radius: var(--r-md);
  color: var(--ink);
  font-size: 1.0625rem; font-weight: 500;
  transition: background-color var(--t-fast) var(--ease-soft);
}
.nav__drawer a:hover { background: rgba(141, 240, 106, .10); color: var(--green); }
.nav__drawer .btn { margin-top: var(--sp-2); width: 100%; }

/* ── 09  Hero ──────────────────────────────────────────────────────────── */
.hero {
  position: relative; z-index: 2;
  padding-top: clamp(8.5rem, 15vw, 10.625rem);
  padding-bottom: var(--sp-7);
}
.hero__grid {
  display: grid;
  /* Copy gets the wider share; the phone is a fixed-ish 330px so the extra
     room would only pad empty space on that side. */
  grid-template-columns: minmax(0, 1.14fr) minmax(0, .86fr);
  gap: clamp(2rem, 4vw, 3rem);
  align-items: center;
}
/* h1 uses explicit <br>s for its rhythm, so balancing would fight them. */
.hero h1 { text-wrap: normal; }
.hero h1 { margin: 1.375rem 0 0; }
.hero__lead { max-width: 33rem; margin-top: 1.625rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .8125rem; margin-top: 2.125rem; }
.hero__note {
  display: flex; align-items: center; gap: .5rem;
  margin-top: 1.125rem;
  font-size: .875rem; color: var(--ink-muted);
}
.hero__note svg { width: 15px; height: 15px; color: var(--green); flex: 0 0 auto; }

.hero__stats { display: flex; gap: clamp(1.5rem, 3.4vw, 2.5rem); margin-top: 3.125rem; flex-wrap: wrap; }
.hero__stat .num { font-size: clamp(1.9rem, 3vw, 2.375rem); display: block; }
.hero__stat p { font-size: .8125rem; color: var(--ink-muted); margin-top: .125rem; }

/* Phone stage. perspective on the stage + transform-style on the tilt target
   is what makes the floating chips sit at real depth instead of sliding flat. */
.hero__stage {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  min-height: 620px;
  /* Reserves a strip under the centred phone for .stage-note, which would
     otherwise sit on top of the screenshot. */
  padding-bottom: 2.5rem;
  perspective: 1200px;
}
.hero__halo {
  position: absolute;
  width: 430px; height: 430px; border-radius: 50%;
  background: radial-gradient(circle, rgba(141, 240, 106, .30), transparent 65%);
  filter: blur(30px);
  pointer-events: none;
}
.tilt {
  position: relative;
  transform-style: preserve-3d;
  transition: transform .5s var(--ease-out);
  will-change: transform;
}
.hero__phone {
  position: relative;
  width: min(330px, 78%);
  /* .tilt fills the stage so the chips have a stable box to anchor to, which
     means the phone needs its own centring — otherwise it hugs the left edge. */
  margin-inline: auto;
  filter: drop-shadow(0 50px 90px rgba(0, 0, 0, .65));
  animation: floaty 8s var(--ease-soft) infinite;
  transform: translateZ(40px);
  border-radius: 34px;
}
.float-chip {
  position: absolute;
  padding: .8125rem 1.0625rem;
  border-radius: var(--r-md);
  background: rgba(10, 36, 22, .82);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  backdrop-filter: blur(12px) saturate(140%);
  box-shadow: inset 0 1px 0 rgba(226, 255, 236, .16), 0 22px 44px -22px rgba(0, 0, 0, .9);
  z-index: 3;
}
.float-chip__label {
  font-family: var(--font-mono); font-size: .6875rem;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted);
}
.float-chip__value { font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; line-height: 1.2; }
/* The float keyframes must carry translateZ themselves: an animation on
   `transform` replaces the whole property, so animating translateY alone would
   drop the chip to z=0 and bury it behind the phone (which sits at 40px).
   `translate` is not an option here — the parallax JS owns that property. */
.float-chip--streak {
  left: -66px; top: 84px;
  border: 1px solid rgba(141, 240, 106, .24);
  transform: translateZ(78px);
  animation: chip-float-a 6s var(--ease-soft) infinite;
}
.float-chip--streak .float-chip__value { color: var(--green); }
.float-chip--screen {
  right: -58px; bottom: 108px;
  border: 1px solid rgba(232, 153, 74, .30);
  transform: translateZ(64px);
  animation: chip-float-b 7.5s var(--ease-soft) .6s infinite;
}
.float-chip--screen .float-chip__value { color: var(--amber); }

/* The screenshots show one device's real numbers; say so rather than let them
   read as a claim about what every user sees. */
.stage-note {
  position: absolute; bottom: 0; left: 0; right: 0;
  text-align: center;
  font-family: var(--font-mono); font-size: .7rem;
  color: var(--ink-faint);
}

/* ── 10  Marquee ───────────────────────────────────────────────────────── */
/* The band is tilted and wider than the viewport on purpose. It lives inside a
   clipping wrapper so the overhang can never create horizontal scroll. */
.marquee-clip { position: relative; z-index: 2; overflow: hidden; padding-block: 3.5rem 0; }
.marquee {
  transform: rotate(-1.6deg);
  background: var(--green);
  padding-block: 1rem;
  width: 108%;
  margin-left: -4%;
  overflow: hidden;
  box-shadow: 0 24px 60px -34px rgba(141, 240, 106, .6);
}
.marquee__track { display: flex; width: max-content; animation: mq 26s linear infinite; }
.marquee__group {
  display: flex; gap: 2.125rem; padding-right: 2.125rem;
  font-family: var(--font-display); font-weight: 800; font-size: 1.375rem;
  color: var(--bg-base); letter-spacing: -.02em; white-space: nowrap;
}
.marquee__sep { opacity: .35; }
.marquee-clip:hover .marquee__track { animation-play-state: paused; }

/* ── 11  Problem ───────────────────────────────────────────────────────── */
.problem__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--sp-5);
}
.stat-card { padding: clamp(1.5rem, 2.4vw, 1.875rem); }
.stat-card .num { font-size: clamp(2.25rem, 4vw, 3rem); line-height: 1; display: block; }
.stat-card p { margin-top: .625rem; color: var(--ink-60); font-size: .9375rem; }
.stat-card--amber .num { color: var(--amber); }
.stat-card--green .num { color: var(--green); }
.stat-card--blue  .num { color: var(--blue); }
.stat-card__src { display: block; margin-top: .875rem; font-size: .75rem; color: var(--ink-faint); }

/* ── 12  How it works ──────────────────────────────────────────────────── */
.steps { display: grid; gap: clamp(4rem, 8vw, 6.25rem); }
.step {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(2rem, 5vw, 3.75rem);
  align-items: center;
}
.step--reverse .step__media { order: 2; }
.step__media { position: relative; display: flex; justify-content: center; perspective: 1000px; }
.step__glow {
  position: absolute; width: 340px; height: 340px; border-radius: 50%;
  filter: blur(26px); pointer-events: none;
}
.step__glow--green { background: radial-gradient(circle, rgba(141, 240, 106, .22), transparent 65%); }
.step__glow--amber { background: radial-gradient(circle, rgba(232, 153, 74, .18), transparent 65%); }
.step__glow--blue  { background: radial-gradient(circle, rgba(110, 168, 255, .20), transparent 65%); }
.step__phone {
  position: relative;
  width: min(300px, 86%);
  border-radius: 30px;
  filter: drop-shadow(0 40px 70px rgba(0, 0, 0, .6));
  transition: transform .6s var(--ease-out);
}
.step__media:hover .step__phone { transform: translateY(-10px) scale(1.015); }
.step__index { font-family: var(--font-mono); font-size: .78rem; letter-spacing: .14em; color: rgba(141, 240, 106, .78); }
.step__index--amber { color: rgba(232, 153, 74, .88); }
.step__index--blue  { color: rgba(140, 190, 255, .88); }
.step h3 { margin-top: .875rem; }
/* Same reason as .score__note: `.step p` would outrank .step__index. */
.step__desc { margin-top: 1rem; font-size: 1.0625rem; line-height: 1.62; color: var(--ink-60); max-width: 30rem; }
.step__metrics { display: flex; gap: 1.625rem; margin-top: 1.75rem; flex-wrap: wrap; }
.step__metrics .num { font-size: 1.875rem; display: block; }
.step__metrics p { font-size: .8125rem; color: var(--ink-muted); margin-top: 0; }
/* padding-block keeps the hit area comfortable on touch without moving the
   text baseline (the negative margin absorbs it). */
.step__link {
  display: inline-flex; align-items: center; gap: .5625rem;
  margin-top: 1.25rem; padding-block: .5rem;
  font-weight: 700;
}

/* ── 13  Feature grid ──────────────────────────────────────────────────── */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--sp-5);
}

/* ── 14  Brain-score band ──────────────────────────────────────────────── */
.score {
  position: relative; z-index: 2;
  padding-block: clamp(4.5rem, 9vw, 6.25rem);
  /* Fades in and back out. A gradient that starts at full tint would draw a
     visible seam against the section above it. */
  background: linear-gradient(180deg,
              transparent, rgba(141, 240, 106, .075) 42%, transparent);
  text-align: center;
}
.score__value {
  font-family: var(--font-display); font-weight: 800;
  font-size: var(--fs-huge); line-height: .85; letter-spacing: -.05em;
  margin: 1.375rem 0 0;
  text-shadow: 0 0 80px rgba(141, 240, 106, .35);
  font-variant-numeric: tabular-nums;
}
.score__label { font-family: var(--font-display); font-weight: 600; font-size: 1.375rem; color: var(--green); margin-top: .625rem; }
.score__track {
  height: 12px; border-radius: var(--r-pill);
  background: rgba(234, 246, 238, .09);
  margin: 2.125rem auto 0; max-width: 560px; overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .5);
}
.score__bar {
  width: 0; height: 100%; border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--green-deep), var(--green-soft));
  box-shadow: 0 0 20px rgba(141, 240, 106, .6);
  transition: width 1.8s var(--ease-out);
}
.score__ticks { display: flex; justify-content: space-between; max-width: 560px; margin: .75rem auto 0; font-family: var(--font-mono); font-size: .7rem; color: var(--ink-faint); }
/* Scoped to its own class, not `.score p` — an element selector here would
   outrank .score__value/.score__label and silently shrink both. */
.score__note { max-width: 33rem; margin: 1.875rem auto 0; color: var(--ink-60); font-size: 1.0625rem; }

/* ── 15  Screens rail ──────────────────────────────────────────────────── */
.rail-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-5); flex-wrap: wrap; }
.rail-hint { font-family: var(--font-mono); font-size: .78rem; color: var(--ink-muted); }
.rail {
  display: flex; gap: 1.625rem;
  overflow-x: auto;
  padding: 2.875rem var(--gutter) 2.5rem;
  scroll-snap-type: x mandatory;
  cursor: grab;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
.rail::-webkit-scrollbar { display: none; }
.rail.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.rail__item {
  flex: 0 0 auto;
  width: 270px;
  scroll-snap-align: center;
  transition: transform .45s var(--ease-out);
}
.rail__item img {
  width: 100%; border-radius: 28px;
  filter: drop-shadow(0 30px 60px rgba(0, 0, 0, .55));
  -webkit-user-drag: none; user-select: none;
}
.rail__item:hover { transform: translateY(-14px); }
.rail__cap { margin-top: 1rem; text-align: center; font-size: .8125rem; color: var(--ink-muted); }
.rail__pad { flex: 0 0 max(0px, calc((100vw - var(--shell)) / 2)); }

/* ── 16  Privacy ───────────────────────────────────────────────────────── */
.privacy { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
.privacy__list { display: grid; gap: var(--sp-4); margin-top: var(--sp-6); }
.privacy__item { display: flex; gap: .875rem; align-items: flex-start; }
.privacy__tick {
  flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(141, 240, 106, .14);
  color: var(--green);
  margin-top: 2px;
}
.privacy__tick svg { width: 13px; height: 13px; }
.privacy__item p { color: var(--ink-70); font-size: .9688rem; }
.privacy__item strong { color: var(--ink); font-weight: 600; }
.privacy__panel { padding: clamp(1.75rem, 3vw, 2.5rem); }
.privacy__row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: .9375rem; border-bottom: 1px solid rgba(234, 246, 238, .08); }
.privacy__row:last-child { border-bottom: 0; }
.privacy__row span { font-size: .9375rem; color: var(--ink-70); }
.privacy__flag { font-family: var(--font-mono); font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--green); white-space: nowrap; }
.privacy__flag--off { color: var(--ink-faint); }

/* ── 17  FAQ ───────────────────────────────────────────────────────────── */
.faq { display: grid; gap: var(--sp-3); max-width: 780px; margin-inline: auto; }
.faq__item { padding: 0; overflow: hidden; }
.faq__q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.25rem 1.5rem;
  background: none; border: 0; cursor: pointer; text-align: left;
  font-family: var(--font-display); font-weight: 600; font-size: 1.0625rem; letter-spacing: -.01em;
  color: var(--ink);
}
.faq__icon { flex: 0 0 auto; width: 18px; height: 18px; position: relative; }
.faq__icon::before, .faq__icon::after {
  content: ""; position: absolute; inset: 50% 0 auto 0;
  height: 1.75px; border-radius: 2px; background: var(--green);
  transition: transform var(--t-mid) var(--ease-out);
}
.faq__icon::after { transform: rotate(90deg); }
.faq__item.is-open .faq__icon::after { transform: rotate(0deg); }
.faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--t-mid) var(--ease-out); }
.faq__item.is-open .faq__a { grid-template-rows: 1fr; }
.faq__a > div { overflow: hidden; }
.faq__a p { padding: 0 1.5rem 1.375rem; color: var(--ink-60); font-size: .9688rem; line-height: 1.65; }

/* ── 17b  Long-form home copy (approved PDF content) ───────────────────── */
.copy { max-width: 46rem; }
.copy h2 { font-size: clamp(1.6rem, 3.2vw, 2.2rem); line-height: 1.12; margin-top: clamp(2.25rem, 4.5vw, 3rem); }
.copy h2:first-child { margin-top: 0; }
.copy p { color: var(--ink-70); margin: 0 0 1.1rem; font-size: 1.0625rem; line-height: 1.72; }
.copy ul { list-style: disc; padding-left: 1.3rem; margin: 0 0 1.15rem; color: var(--ink-70); }
.copy li { margin-bottom: .5rem; }

/* ── 18  CTA ───────────────────────────────────────────────────────────── */
.cta {
  position: relative; overflow: hidden;
  border-radius: var(--r-2xl);
  background: linear-gradient(160deg, rgba(141, 240, 106, .14), rgba(6, 24, 14, .40));
  padding: clamp(2.75rem, 6vw, 5.75rem) clamp(1.5rem, 5vw, 4rem);
  text-align: center;
}
.cta::before {
  content: "";
  position: absolute; top: -160px; left: 50%;
  transform: translateX(-50%);
  width: 520px; height: 520px; border-radius: 50%;
  background: radial-gradient(circle, rgba(141, 240, 106, .25), transparent 62%);
  filter: blur(20px);
  animation: breathe 8s var(--ease-soft) infinite;
  pointer-events: none;
}
.cta__inner { position: relative; z-index: 1; }
.cta h2 { font-size: clamp(2.25rem, 5.4vw, 4.625rem); line-height: .96; letter-spacing: -.045em; }
.cta p { font-size: var(--fs-lead); color: var(--ink-60); max-width: 30rem; margin: 1.375rem auto 0; }
.cta__lead { max-width: 42rem; }
.cta__actions { display: flex; gap: .8125rem; justify-content: center; flex-wrap: wrap; margin-top: 2.125rem; }
.cta__meta { display: flex; justify-content: center; gap: 1.5rem; flex-wrap: wrap; margin-top: 1.75rem; font-size: .8125rem; color: var(--ink-muted); }

/* ── 19  Footer ────────────────────────────────────────────────────────── */
.footer { position: relative; z-index: 2; margin-top: clamp(4rem, 8vw, 6rem); border-top: 1px solid rgba(234, 246, 238, .08); }
.footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: var(--sp-6); padding-block: clamp(2.75rem, 5vw, 4rem); }
.footer__brand { display: inline-flex; align-items: center; gap: .5625rem; font-family: var(--font-display); font-weight: 800; font-size: 1.0625rem; color: var(--ink); letter-spacing: -.02em; }
.footer__brand img { width: 24px; height: 24px; border-radius: 6px; }
.footer__tag { margin-top: .875rem; color: var(--ink-muted); font-size: .9375rem; max-width: 24rem; }
.footer__col h3 { font-family: var(--font-body); font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); font-weight: 500; margin-bottom: var(--sp-4); }
.footer__col a { display: block; color: var(--ink-60); font-size: .9375rem; padding-block: .5rem; }
.footer__col a:hover { color: var(--green); }
.footer__base {
  display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4);
  flex-wrap: wrap;
  padding-block: 1.5rem 2.5rem;
  border-top: 1px solid rgba(234, 246, 238, .06);
  color: var(--ink-faint); font-size: .8125rem;
}

/* The wordmark that signs off the page: the name at the largest size it will
   ever appear, sitting just above the fold of the document.
   - `font-size: 19vw` rather than a clamp, so it always spans the viewport and
     reads as a band of type rather than a heading someone forgot to size.
   - `line-height: .86` + a bottom margin so the whole word is legible with air
     under it. An earlier version pulled it down with a negative margin to crop
     the letters against the page edge; at 19vw that clipped 16px off the
     baseline and read as a mistake rather than as a deliberate bleed.
   - `overflow: hidden` on the footer stays, as the backstop for the few pixels a
     display face overshoots its line box at this size.
   - Barely-there alpha: it is texture, not information. The name is already in
     the nav, the brand row and the copyright line, which is why this can be
     decorative and hidden from assistive tech without losing anything.
   - `user-select: none` because dragging to select text should not lasso a
     40-storey word. */
.footer { overflow: hidden; }
.footer__wordmark {
  display: block;
  margin: 0 0 clamp(1rem, 2.5vw, 2rem);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 19vw;
  line-height: .86;
  letter-spacing: -.04em;
  text-align: center;
  white-space: nowrap;
  color: rgba(234, 246, 238, .045);
  user-select: none;
  -webkit-user-select: none;
}

/* ── 20  Motion & reveal ───────────────────────────────────────────────── */
@keyframes mq      { from { transform: translateX(0); }      to { transform: translateX(-50%); } }
@keyframes floaty  { 0%, 100% { transform: translateZ(40px) translateY(0) rotate(-1deg); } 50% { transform: translateZ(40px) translateY(-18px) rotate(1deg); } }
@keyframes chip-float-a { 0%, 100% { transform: translateZ(78px) translateY(0); } 50% { transform: translateZ(78px) translateY(-11px); } }
@keyframes chip-float-b { 0%, 100% { transform: translateZ(64px) translateY(0); } 50% { transform: translateZ(64px) translateY(-9px); } }
@keyframes breathe { 0%, 100% { opacity: .45; transform: scale(1); } 50% { opacity: .85; transform: scale(1.12); } }
@keyframes blip    { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }

/* Reveal-on-scroll. JS adds .is-in; without JS the .no-js rule below shows all. */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out);
}
[data-reveal].is-in { opacity: 1; transform: none; }

.no-js [data-reveal] { opacity: 1; transform: none; }
.no-js .nav__toggle { display: none; }

/* Honour the OS setting: kill transforms/animation, keep everything readable. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  /* Keep the depth offsets — they are layout, not motion. */
  .hero__phone { transform: translateZ(40px); }
  .float-chip--streak { transform: translateZ(78px); }
  .float-chip--screen { transform: translateZ(64px); }
  .marquee__track { animation: none; }
  .tilt { transform: none !important; }
}