/* ============================================================
   Cexi - marketing + legal site
   Design tokens mirror the iOS app (IronForge/Design/DesignSystem.swift):
   pure-black canvas, anodized gold accent, cyan/green data accents,
   layered glass materials, SF Pro type, restrained warm ambient glow.

   Accent semantics (used consistently):
     gold   -> brand + primary actions + training load
     green  -> positive readiness / recovery
     cyan   -> biometric data signals (sleep, HRV, heart rate)
     violet -> model / intelligence signals
     amber  -> caution
   ============================================================ */

/* Inter is the cross-platform fallback only. Apple devices resolve SF Pro
   first (via -apple-system) and never download this file. */
@font-face {
  font-family: "InterVar";
  src: url("/assets/fonts/inter-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #000000;
  --bg-2: #050507;
  --surface: #101013;
  --surface-2: #17171b;

  --gold: #ccad73;
  --gold-light: #efdfba;
  --gold-dark: #8a7042;

  --cyan: #5cd0e6;
  --green: #58dd8a;
  --amber: #e5b567;
  --violet: #a68cf0;
  --red: #ff7a7a;

  /* Text - all body tokens meet 4.5:1 on black */
  --text: #ffffff;
  --text-2: #cdd2db;
  --text-3: #9ea4af;
  --text-dim: #7c828d;
  --text-4: #7c828d;

  /* Glass material stack */
  --glass: rgba(255, 255, 255, 0.04);
  --glass-2: rgba(255, 255, 255, 0.068);
  --glass-3: rgba(255, 255, 255, 0.1);
  --edge: rgba(255, 255, 255, 0.13);
  --edge-soft: rgba(255, 255, 255, 0.07);
  --edge-strong: rgba(255, 255, 255, 0.22);
  --hairline: var(--edge);
  --hairline-soft: var(--edge-soft);
  --hairline-strong: var(--edge-strong);
  --blur: 28px;

  --amber-glow: rgba(150, 104, 36, 0.2);
  --bronze-glow: rgba(74, 53, 18, 0.17);

  /* Rim mask for the glass material: the union of a horizontal and a vertical
     edge ramp. Unlike a padding-box ring this stays correct on pill shapes and
     gives the specular a soft optical falloff instead of a hard hairline.
     Multiple mask layers default to mask-composite: add, i.e. union. */
  --rim-x: linear-gradient(90deg, #000 0, transparent 4.5%, transparent 95.5%, #000 100%);
  --rim-y: linear-gradient(180deg, #000 0, transparent 26%, transparent 74%, #000 100%);

  --sans: -apple-system, "SF Pro Display", "SF Pro Text", "InterVar",
    BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, Helvetica, Arial, sans-serif;
  --rounded: ui-rounded, "SF Pro Rounded", var(--sans);
  --mono: "SF Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Type scale */
  --fs-display: clamp(2.7rem, 7vw, 5.3rem);
  --fs-h2: clamp(1.95rem, 4.3vw, 3.4rem);
  --fs-h3: clamp(1.3rem, 2.3vw, 1.8rem);
  --fs-lede: clamp(1.05rem, 1.5vw, 1.28rem);

  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 30px;
  --r-2xl: 40px;

  --maxw: 1200px;
  --nav-h: 58px;
  --nav-gap: 12px;
  --nav-total: 82px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ------------------------------------------------------------ Reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  letter-spacing: -0.011em;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
body.no-scroll { overflow: hidden; }
a { color: inherit; text-decoration: none; }
img, svg { max-width: 100%; display: block; }
button { font-family: inherit; color: inherit; }
::selection { background: rgba(204, 173, 115, 0.3); color: #fff; }

/* ------------------------------------------------------------ Focus + skip link (WCAG 2.2) */
:focus-visible {
  outline: 2px solid var(--gold-light);
  outline-offset: 3px;
  border-radius: 6px;
}
.skip {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 300;
  background: var(--gold);
  color: #1a140a;
  font-weight: 700;
  padding: 12px 18px;
  border-radius: 12px;
  transform: translateY(-180%);
  transition: transform 0.24s var(--ease);
}
.skip:focus { transform: none; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ------------------------------------------------------------ Ambient background */
.ambient {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(900px 620px at 82% -10%, var(--amber-glow), transparent 60%),
    radial-gradient(760px 560px at 6% 8%, var(--bronze-glow), transparent 62%),
    radial-gradient(1200px 900px at 50% 118%, rgba(80, 58, 22, 0.13), transparent 60%),
    #000;
}
.ambient::after {
  content: "";
  position: absolute;
  left: 50%;
  top: var(--bloom-y, 26%);
  width: 60vw;
  height: 60vw;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(204, 173, 115, 0.05), transparent 60%);
  transition: top 0.6s linear;
}
.grain {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.032;
  mix-blend-mode: overlay;
  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.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Parallax light orbs (pre-blurred gradients, transform only) */
.orbs { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.orb {
  position: absolute; border-radius: 50%;
  will-change: transform;
}
.orb--gold { width: 46vw; height: 46vw; left: -12vw; top: 8%; background: radial-gradient(circle, rgba(204, 173, 115, 0.14), transparent 66%); }
.orb--cyan { width: 38vw; height: 38vw; right: -10vw; top: 42%; background: radial-gradient(circle, rgba(92, 208, 230, 0.075), transparent 68%); }
.orb--green { width: 34vw; height: 34vw; left: 26%; bottom: -8%; background: radial-gradient(circle, rgba(88, 221, 138, 0.06), transparent 68%); }

/* ------------------------------------------------------------ Layout container */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 20px; }
@media (min-width: 640px) { .wrap { padding-inline: 24px; } }
@media (min-width: 1024px) { .wrap { padding-inline: 40px; } }

.section { padding-block: 68px; position: relative; }
.section--tight { padding-block: 54px; }
[id] { scroll-margin-top: calc(var(--nav-total) + 18px); }
@media (min-width: 1024px) {
  .section { padding-block: 118px; }
  .section--tight { padding-block: 86px; }
}

/* ------------------------------------------------------------ Type */
h1, h2, h3, h4 { font-weight: 700; letter-spacing: -0.03em; line-height: 1.06; margin: 0; }
.display {
  font-size: var(--fs-display);
  letter-spacing: -0.045em;
  line-height: 0.99;
  font-weight: 700;
}
.h2 { font-size: var(--fs-h2); letter-spacing: -0.038em; line-height: 1.05; }
.h3 { font-size: var(--fs-h3); letter-spacing: -0.028em; }
.lede {
  font-size: var(--fs-lede);
  line-height: 1.58;
  color: var(--text-2);
  font-weight: 400;
  letter-spacing: -0.013em;
}
.muted { color: var(--text-3); }
.gold-text {
  background: linear-gradient(96deg, var(--gold-light), var(--gold) 52%, var(--gold-dark));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.c-good { color: var(--green); }
.c-caution { color: var(--amber); }
.c-bad { color: var(--red); }

.section-head { max-width: 40ch; }
.section-head .lede { margin-top: 18px; }
.section-head--wide { max-width: 54ch; }
.section-head--center { margin-inline: auto; text-align: center; }

/* Eyebrow chip (glass pill) */
.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 7px 15px 7px 12px;
  border-radius: 999px;
  font-size: 0.79rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-2);
  background: var(--glass-2);
  border: 1px solid var(--edge);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
  margin: 0 0 22px;
}
.eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px var(--green); flex: none; }

/* ------------------------------------------------------------ Glass material */
.glass {
  position: relative;
  background-color: transparent;
  background-image: linear-gradient(180deg, var(--glass-2), var(--glass));
  border: 1px solid var(--edge);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -1px 0 rgba(255, 255, 255, 0.04),
    0 30px 70px -34px rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(var(--blur)) saturate(170%);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(170%);
}
/* specular sweep across the surface */
.glass::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(104deg, rgba(255, 255, 255, 0.13), transparent 28%, transparent 74%, rgba(255, 255, 255, 0.06));
  mix-blend-mode: screen;
}
/* cursor-following highlight, desktop pointers only */
@media (hover: hover) and (pointer: fine) {
  [data-shine] { --mx: 50%; --my: 0%; }
  [data-shine]::before {
    content: "";
    position: absolute; inset: 0;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s var(--ease-soft);
    background: radial-gradient(420px circle at var(--mx) var(--my), rgba(204, 173, 115, 0.16), transparent 62%);
  }
  [data-shine]:hover::before { opacity: 1; }
}

/* ------------------------------------------------------------ Buttons */
.btn {
  --h: 52px;
  min-height: var(--h);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 0 26px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.98rem;
  letter-spacing: -0.012em;
  border: 1px solid transparent;
  cursor: pointer;
  position: relative;
  transition: transform 0.18s var(--ease), box-shadow 0.34s var(--ease), background 0.34s var(--ease), border-color 0.3s;
}
.btn:active { transform: scale(0.98); }
.btn-sm { --h: 42px; padding: 0 18px; font-size: 0.9rem; }
.btn-primary {
  background: linear-gradient(180deg, var(--gold-light), var(--gold) 56%, var(--gold-dark));
  color: #1a140a;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 -1px 0 rgba(0, 0, 0, 0.12),
    0 12px 34px -14px rgba(204, 173, 115, 0.6);
}
.btn-primary:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    0 18px 46px -14px rgba(204, 173, 115, 0.78);
  transform: translateY(-1px);
}
.btn-ghost {
  background: var(--glass-2);
  color: var(--text);
  border-color: var(--edge);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
}
.btn-ghost:hover { border-color: var(--edge-strong); background: var(--glass-3); }
.btnrow { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* ------------------------------------------------------------ Liquid glass navigation
   Glass only reads as glass when there is light behind it to bend, so the bar
   carries its own warm pool of light (.nav::before) and then distorts it.
   The material is stacked the way real glass behaves:

     .nav-inner         base refraction, adaptive tint, and the bevel volume
     .nav-inner::before specular that tracks the pointer
     .nav-inner::after  directional specular: two bright arcs, soft falloff
     .nav-lens          a second, heavier blur masked to the rim only, so the
                        backdrop smears where the glass is thickest
     .nav-lens::before  chromatic dispersion along that rim
     .nav-lens::after   the inner top gloss

   Rim effects are masked with a union of two edge ramps rather than the usual
   padding-box ring, which keeps the falloff correct around the pill caps.  */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  display: flex;
  justify-content: center;
  padding-top: var(--nav-gap);
  pointer-events: none;
  transition: padding-top 0.45s var(--ease);
}
/* the light the glass has to work with */
.nav::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -34px;
  width: min(1320px, 128vw);
  height: 190px;
  transform: translateX(-50%);
  pointer-events: none;
  background:
    radial-gradient(46% 62% at var(--nav-lightx, 34%) 62%, rgba(204, 173, 115, 0.17), transparent 72%),
    radial-gradient(38% 58% at calc(var(--nav-lightx, 34%) + 44%) 52%, rgba(92, 208, 230, 0.075), transparent 74%);
  transition: opacity 0.6s var(--ease);
}

.nav-inner {
  pointer-events: auto;
  width: min(1180px, calc(100% - 24px));
  max-width: none;
  padding: 0 8px 0 18px;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-radius: 999px;
  position: relative;
  isolation: isolate;
  /* The scrim is what keeps the bar readable when bright app screenshots pass
     behind it. Apple's material darkens over busy content for the same reason;
     without it the labels have to compete with whatever is underneath. */
  background-color: rgba(9, 9, 12, 0.5);
  background-image: linear-gradient(
    177deg,
    rgba(255, 255, 255, 0.075),
    rgba(255, 255, 255, 0.022) 48%,
    rgba(255, 255, 255, 0.042)
  );
  border: 1px solid rgba(255, 255, 255, 0.13);
  box-shadow:
    /* the glass wall: bright crown, faint underside, then the drop */
    inset 0 1px 0.5px -0.25px rgba(255, 255, 255, 0.44),
    inset 0 -1px 1px -0.5px rgba(255, 255, 255, 0.1),
    inset 1.5px 0 1px -1px rgba(255, 255, 255, 0.14),
    inset -1.5px 0 1px -1px rgba(255, 255, 255, 0.14),
    inset 0 -14px 22px -20px rgba(0, 0, 0, 0.6),
    /* reads as an edge on light backdrops as well as dark ones */
    0 0 0 0.5px rgba(0, 0, 0, 0.4),
    0 22px 48px -28px rgba(0, 0, 0, 0.94),
    0 4px 14px -10px rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(24px) saturate(170%) brightness(1.04);
  -webkit-backdrop-filter: blur(24px) saturate(170%) brightness(1.04);
  transition:
    width 0.55s var(--ease), height 0.45s var(--ease),
    background-color 0.45s var(--ease), box-shadow 0.45s var(--ease),
    border-color 0.45s var(--ease);
}
/* pointer-tracked specular: a small hot spot riding the surface */
.nav-inner::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 2;
  opacity: var(--nav-glare, 0);
  transition: opacity 0.45s var(--ease-soft);
  background:
    radial-gradient(190px circle at var(--nav-mx, 50%) var(--nav-my, 50%), rgba(255, 255, 255, 0.16), transparent 62%),
    radial-gradient(90px circle at var(--nav-mx, 50%) var(--nav-my, 50%), rgba(239, 223, 186, 0.22), transparent 68%);
  mix-blend-mode: screen;
}
/* directional specular along the rim */
.nav-inner::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 2;
  background: conic-gradient(
    from 126deg,
    rgba(255, 255, 255, 0.5),
    rgba(255, 255, 255, 0.05) 38deg,
    rgba(255, 255, 255, 0.01) 92deg,
    rgba(255, 255, 255, 0.15) 148deg,
    rgba(255, 255, 255, 0.38) 184deg,
    rgba(255, 255, 255, 0.04) 226deg,
    rgba(255, 255, 255, 0.01) 292deg,
    rgba(255, 255, 255, 0.24) 338deg,
    rgba(255, 255, 255, 0.5)
  );
  -webkit-mask-image: var(--rim-x), var(--rim-y);
  mask-image: var(--rim-x), var(--rim-y);
  mix-blend-mode: screen;
}

/* The bevel: where the glass thickens it smears the backdrop further and
   concentrates its colour, so the rim visibly picks up whatever is passing
   behind the bar. This layer re-samples the raw backdrop rather than the
   already blurred one beneath it, so its blur has to stay above the base or
   the rim would reveal sharper content than the middle of the bar. */
.nav-lens {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
  backdrop-filter: blur(34px) saturate(300%) brightness(1.16);
  -webkit-backdrop-filter: blur(34px) saturate(300%) brightness(1.16);
  -webkit-mask-image: var(--rim-x), var(--rim-y);
  mask-image: var(--rim-x), var(--rim-y);
}
/* chromatic dispersion: a real lens splits colour at the edge */
.nav-lens::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow:
    inset 1.5px 0 2px -1px rgba(255, 128, 128, 0.3),
    inset -1.5px 0 2px -1px rgba(112, 210, 255, 0.3),
    inset 0 1px 1.5px -0.5px rgba(255, 196, 138, 0.16),
    inset 0 -1px 1.5px -0.5px rgba(150, 190, 255, 0.16);
  mix-blend-mode: screen;
}
/* inner gloss just under the crown */
.nav-lens::after {
  content: "";
  position: absolute;
  left: 2.5%;
  right: 2.5%;
  top: 1px;
  height: 38%;
  border-radius: 999px 999px 60% 60% / 999px 999px 100% 100%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.014) 64%, transparent);
  mix-blend-mode: screen;
}

/* condensed state: the glass thickens and the tint comes up */
.nav.scrolled { padding-top: 8px; }
.nav.scrolled .nav-inner {
  width: min(1040px, calc(100% - 20px));
  height: 52px;
  border-color: rgba(255, 255, 255, 0.17);
  background-image: linear-gradient(
    177deg,
    rgba(255, 255, 255, 0.105),
    rgba(255, 255, 255, 0.04) 48%,
    rgba(255, 255, 255, 0.06)
  );
  box-shadow:
    inset 0 1px 0.5px -0.25px rgba(255, 255, 255, 0.56),
    inset 0 -1px 1px -0.5px rgba(255, 255, 255, 0.13),
    inset 1.5px 0 1px -1px rgba(255, 255, 255, 0.18),
    inset -1.5px 0 1px -1px rgba(255, 255, 255, 0.18),
    inset 0 -16px 26px -20px rgba(0, 0, 0, 0.64),
    0 26px 54px -26px rgba(0, 0, 0, 0.96),
    0 5px 16px -10px rgba(0, 0, 0, 0.66);
  backdrop-filter: blur(26px) saturate(180%) brightness(1.03);
  -webkit-backdrop-filter: blur(26px) saturate(180%) brightness(1.03);
}

.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: -0.025em; font-size: 1.1rem; flex: none; position: relative; z-index: 3; }
.brand img { width: 28px; height: 28px; border-radius: 8px; background: #17130b; box-shadow: 0 0 0 1px var(--edge), 0 4px 14px -6px rgba(204, 173, 115, 0.6); }

.nav-links { display: flex; gap: 2px; align-items: center; position: relative; z-index: 3; }
.nav-links a {
  font-size: 0.9rem;
  color: var(--text-3);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0 13px;
  border-radius: 999px;
  position: relative;
  z-index: 1;
  /* Keeps labels separated from the backdrop if a browser reports
     backdrop-filter support but never composites it. Invisible otherwise. */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
  transition: color 0.28s var(--ease-soft);
}
.nav-links a:hover { color: var(--text); }
.nav-links a[aria-current="true"] { color: var(--text); }

/* The liquid part: one lozenge of glass that travels between items and
   stretches along the way, the way a droplet does under surface tension. */
.nav-pill {
  position: absolute;
  z-index: 0;
  left: 0;
  top: 50%;
  height: 34px;
  width: var(--pill-w, 0px);
  border-radius: 999px;
  pointer-events: none;
  opacity: var(--pill-o, 0);
  transform: translate3d(var(--pill-x, 0px), -50%, 0) scaleX(var(--pill-sx, 1));
  transform-origin: 50% 50%;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.05));
  box-shadow:
    inset 0 1px 0.5px -0.25px rgba(255, 255, 255, 0.6),
    inset 0 -1px 1px -0.5px rgba(255, 255, 255, 0.1),
    0 3px 10px -6px rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(6px) saturate(170%) brightness(1.1);
  -webkit-backdrop-filter: blur(6px) saturate(170%) brightness(1.1);
  transition:
    transform 0.52s cubic-bezier(0.34, 1.42, 0.5, 1),
    width 0.52s cubic-bezier(0.34, 1.42, 0.5, 1),
    opacity 0.3s var(--ease-soft);
}
.nav-pill::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -1px;
  width: 16px;
  height: 2px;
  border-radius: 2px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: var(--pill-dot, 0);
  transition: opacity 0.3s var(--ease-soft);
}
.nav-cta { display: flex; align-items: center; gap: 8px; flex: none; position: relative; z-index: 3; }

/* Mobile menu button */
.menu-toggle {
  display: none;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  flex-direction: column; gap: 5px;
  background: transparent; border: 0; cursor: pointer;
  border-radius: 999px;
}
.menu-toggle span { width: 19px; height: 2px; background: var(--text); border-radius: 2px; transition: transform 0.28s var(--ease), opacity 0.22s; }
.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 99;
  padding: calc(var(--nav-total) + 10px) 20px 32px;
  background: rgba(6, 6, 8, 0.72);
  backdrop-filter: blur(34px) saturate(180%);
  -webkit-backdrop-filter: blur(34px) saturate(180%);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.mobile-menu[hidden] { display: none; }
.mobile-menu nav { display: flex; flex-direction: column; gap: 2px; }
.mobile-menu a {
  min-height: 54px;
  display: flex;
  align-items: center;
  font-size: 1.08rem;
  font-weight: 550;
  color: var(--text-2);
  border-bottom: 1px solid var(--edge-soft);
}
.mobile-menu a.btn { justify-content: center; color: #1a140a; border-bottom: 0; margin-top: 18px; }

@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav-cta .btn-sm { display: none; }
  .menu-toggle { display: inline-flex; }
  .nav-inner { padding-right: 6px; }
}

/* ------------------------------------------------------------ Motion primitives */
/* JS-gated so a no-JS visit shows everything. Reveals fade, rise and zoom. */
.js .reveal {
  opacity: 0;
  transform: translateY(18px) scale(0.972);
  transition: opacity 0.62s var(--ease-out), transform 0.74s var(--ease-out);
}
.js .reveal.in { opacity: 1; transform: none; }
.js .reveal[data-delay="1"] { transition-delay: 0.07s; }
.js .reveal[data-delay="2"] { transition-delay: 0.14s; }
.js .reveal[data-delay="3"] { transition-delay: 0.21s; }
.js .reveal[data-delay="4"] { transition-delay: 0.28s; }
.js .reveal[data-delay="5"] { transition-delay: 0.35s; }

/* Headline lines rise on load. CSS animation so no-JS still sees them. */
.words > span { display: block; }
.words > span {
  animation: riseIn 0.95s var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 0.09s);
}
@keyframes riseIn {
  from { opacity: 0; transform: translateY(0.38em); }
  to { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------ Hero */
.hero {
  position: relative;
  padding-top: calc(var(--nav-total) + 26px);
  padding-bottom: 40px;
  overflow: hidden;
}
@media (min-width: 1024px) { .hero { padding-top: calc(var(--nav-total) + 62px); padding-bottom: 80px; } }
.hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.03fr 0.97fr;
  gap: clamp(26px, 5vw, 60px);
  align-items: center;
}
.hero h1 { margin-bottom: 24px; }
.hero .lede { max-width: 33rem; margin-bottom: 30px; }
.hero-note { display: inline-flex; align-items: center; gap: 9px; color: var(--text-3); font-size: 0.92rem; margin: 0; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 16px; }
.hero-actions--center { justify-content: center; margin-top: 8px; }
.hero-note .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px var(--green); flex: none; }
.hero-visual {
  display: flex;
  justify-content: center;
  /* --hz is driven by scroll for a slow push-in */
  transform: scale(var(--hz, 1));
  transform-origin: 50% 42%;
  will-change: transform;
  perspective: 1500px;
  perspective-origin: 50% 44%;
}
/* The device sits in space rather than flat on the page. A resting tilt is what
   stops it reading as a pasted rectangle; main.js then steers it with the
   pointer. Angles stay small so the screen content is never keystoned enough
   to be hard to read. */
.js .phone--hero {
  transform: rotateY(var(--ph-ry, -7deg)) rotateX(var(--ph-rx, 1.8deg));
  transform-style: preserve-3d;
  transition: transform 0.6s var(--ease-out);
}
.hero-glow {
  position: absolute;
  left: 50%; top: 46%;
  width: 74%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(204, 173, 115, 0.2), transparent 62%);
  pointer-events: none;
}
.scroll-cue {
  display: flex; justify-content: center;
  margin-top: 34px;
  color: var(--text-dim);
  font-size: 0.76rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.scroll-cue span { animation: cue 2.4s var(--ease-soft) infinite; }
@keyframes cue { 0%, 100% { opacity: 0.45; transform: translateY(0); } 50% { opacity: 1; transform: translateY(4px); } }

/* ------------------------------------------------------------ Device frame
   The shots are real captures, but a bare capture in a flat bezel reads as a
   screenshot. The frame below is built as an object: a machined titanium rail
   with its own bevel, a black gap between rail and glass, the Dynamic Island,
   one crisp status bar shared by every shot, and a sheet of glass over the top
   that catches light. The iOS status bar was blanked out of the source images
   (see the asset pipeline) precisely so this can render it consistently -
   the shipped captures had eight different wall-clock times side by side. */
.phone {
  --w: 320px;
  --r: calc(var(--w) * 0.147);
  --rail: calc(var(--w) * 0.0295);
  width: var(--w);
  max-width: 84vw;
  aspect-ratio: 1206 / 2622;
  border-radius: var(--r);
  padding: var(--rail);
  /* machined rail: two light-catching facets, dark on the axis between them */
  background:
    linear-gradient(
      145deg,
      #6e6e78 0%,
      #2c2c33 9%,
      #55555f 17%,
      #17171b 34%,
      #0d0d10 52%,
      #1e1e23 68%,
      #4a4a54 84%,
      #23232a 93%,
      #5c5c66 100%
    );
  box-shadow:
    inset 0 0 0 0.5px rgba(255, 255, 255, 0.22),
    inset 0 1.5px 2px -0.5px rgba(255, 255, 255, 0.3),
    inset 0 -1.5px 2px -0.5px rgba(255, 255, 255, 0.12),
    0 0 0 0.5px rgba(0, 0, 0, 0.9),
    0 50px 110px -42px rgba(0, 0, 0, 0.95),
    0 0 90px -34px rgba(204, 173, 115, 0.3);
  position: relative;
  flex: none;
  isolation: isolate;
}
/* side buttons */
.phone::before {
  content: "";
  position: absolute;
  right: calc(var(--w) * -0.006);
  top: 23%;
  width: calc(var(--w) * 0.008);
  height: 11%;
  border-radius: 0 2px 2px 0;
  background: linear-gradient(#585862, #24242a 40%, #3d3d45);
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.7);
}
/* Dynamic Island */
.phone::after {
  content: "";
  position: absolute;
  z-index: 3;
  left: 50%;
  top: calc(var(--rail) + var(--w) * 0.0285);
  width: 29.2%;
  height: calc(var(--w) * 0.0855);
  transform: translateX(-50%);
  border-radius: 999px;
  background: #000;
  box-shadow:
    0 0 0 0.5px rgba(255, 255, 255, 0.07),
    inset 0 0.5px 1px rgba(255, 255, 255, 0.04);
  pointer-events: none;
}
.phone-in {
  height: 100%;
  border-radius: calc(var(--r) - var(--rail) * 0.72);
  overflow: hidden;
  background: #000;
  position: relative;
  /* the dark gap between the rail and the glass, as on the real device */
  box-shadow: 0 0 0 1px #000, 0 0 0 1.5px rgba(0, 0, 0, 0.9);
}

/* One status bar for every shot: 9:41 the way Apple ships it in marketing. */
.phone-in::before {
  content: "9:41";
  position: absolute;
  z-index: 2;
  inset: 0 0 auto 0;
  height: 6.79%;
  display: flex;
  align-items: center;
  padding: 0.35% 8.7% 0 12.4%;
  font-family: var(--sans);
  font-size: calc(var(--w) * 0.0398);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1;
  color: #fff;
  background-image: url("/assets/statusbar.svg");
  background-repeat: no-repeat;
  background-position: right 8.7% center;
  background-size: auto 26%;
  pointer-events: none;
}
/* The glass itself: a sheet with a raking highlight plus a darkened rim, so the
   capture sits under something rather than being pasted on. Kept on normal
   blending because the rim darkening has to actually subtract light - under
   screen blending black is a no-op and only the highlight would survive. */
.phone-in::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  border-radius: inherit;
  pointer-events: none;
  opacity: var(--glass-o, 1);
  background:
    /* raking highlight across the sheet */
    linear-gradient(
      104deg,
      rgba(255, 255, 255, 0.1) 0%,
      rgba(255, 255, 255, 0.045) 9%,
      rgba(255, 255, 255, 0) 22%,
      rgba(255, 255, 255, 0) 63%,
      rgba(255, 255, 255, 0.022) 79%,
      rgba(255, 255, 255, 0.062) 100%
    ),
    /* the rim of the cover glass falls off into the bezel */
    radial-gradient(125% 108% at 50% 46%, transparent 62%, rgba(0, 0, 0, 0.5) 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.055);
}
.phone--hero {
  --w: 344px;
  box-shadow:
    inset 0 0 0 0.5px rgba(255, 255, 255, 0.24),
    inset 0 1.5px 2px -0.5px rgba(255, 255, 255, 0.34),
    inset 0 -1.5px 2px -0.5px rgba(255, 255, 255, 0.14),
    0 0 0 0.5px rgba(0, 0, 0, 0.9),
    0 60px 130px -40px rgba(0, 0, 0, 0.96),
    0 0 120px -28px rgba(204, 173, 115, 0.42);
}
/* real app screenshot inside the device frame */
.shot { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }

/* ------------------------------------------------------------ Spec strip */
.strip-wrap { border-block: 1px solid var(--edge-soft); background: linear-gradient(180deg, rgba(255, 255, 255, 0.022), transparent); }
.strip { list-style: none; margin: 0; padding: 22px 0; display: flex; flex-wrap: wrap; gap: 14px 32px; align-items: center; justify-content: center; }
.strip li { display: inline-flex; align-items: center; gap: 10px; color: var(--text-2); font-size: 0.94rem; font-weight: 500; letter-spacing: -0.012em; }
.strip li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); flex: none; box-shadow: 0 0 8px rgba(204, 173, 115, 0.7); }

/* ------------------------------------------------------------ Screen rail (scroll-linked gallery) */
.rail-sec { padding-block: 46px 8px; overflow: hidden; }
@media (min-width: 1024px) { .rail-sec { padding-block: 74px 12px; } }
.rail-head { margin-bottom: 30px; }
.rail-track { display: flex; gap: 24px; width: max-content; padding-inline: 20px; will-change: transform; perspective: 2200px; }
.rail-item { list-style: none; text-align: center; }
.rail-item .phone { --w: 272px; max-width: none; }
@media (max-width: 700px) { .rail-item .phone { --w: 210px; } }
.rail-cap { margin: 14px 0 0; font-size: 0.82rem; color: var(--text-3); letter-spacing: -0.008em; }

/* A filmstrip of identical upright rectangles is the flattest way to show a set
   of screens. Alternating depth and lift turns the row into a composition, and
   each screen takes the accent colour of what it is showing. */
.js .rail-item .phone {
  transform: rotateY(var(--rl-ry, -8deg)) translateY(var(--rl-y, 0px));
  transform-style: preserve-3d;
}
.js .rail-item:nth-child(even) .phone { --rl-ry: 8deg; --rl-y: 18px; }
.js .rail-item:nth-child(3n) .phone { --rl-y: 9px; }
.rail-item:nth-child(4n) .phone { box-shadow:
    inset 0 0 0 0.5px rgba(255, 255, 255, 0.22),
    inset 0 1.5px 2px -0.5px rgba(255, 255, 255, 0.3),
    0 0 0 0.5px rgba(0, 0, 0, 0.9),
    0 50px 110px -42px rgba(0, 0, 0, 0.95),
    0 0 90px -34px rgba(88, 221, 138, 0.3); }
.rail-item:nth-child(4n + 2) .phone { box-shadow:
    inset 0 0 0 0.5px rgba(255, 255, 255, 0.22),
    inset 0 1.5px 2px -0.5px rgba(255, 255, 255, 0.3),
    0 0 0 0.5px rgba(0, 0, 0, 0.9),
    0 50px 110px -42px rgba(0, 0, 0, 0.95),
    0 0 90px -34px rgba(92, 208, 230, 0.28); }
.rail-item:nth-child(4n + 3) .phone { box-shadow:
    inset 0 0 0 0.5px rgba(255, 255, 255, 0.22),
    inset 0 1.5px 2px -0.5px rgba(255, 255, 255, 0.3),
    0 0 0 0.5px rgba(0, 0, 0, 0.9),
    0 50px 110px -42px rgba(0, 0, 0, 0.95),
    0 0 90px -34px rgba(166, 140, 240, 0.26); }
/* No JS or reduced motion: allow native horizontal scrolling instead */
.rail-scroll { overflow-x: auto; overscroll-behavior-x: contain; }
.js .rail-scroll { overflow-x: hidden; }

/* ------------------------------------------------------------ Sticky scrubber (pinned device, stepping copy) */
.scrub { position: relative; }
.scrub-inner { display: grid; gap: 34px; }
.scrub-copy { max-width: 34rem; }
.scrub-steps { list-style: none; margin: 32px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.scrub-step {
  padding: 20px 22px;
  border-radius: var(--r-lg);
  border: 1px solid transparent;
  background: transparent;
  transition: background 0.5s var(--ease-soft), border-color 0.5s var(--ease-soft), transform 0.5s var(--ease);
}
.scrub-step h3 { font-size: 1.12rem; margin-bottom: 7px; display: flex; align-items: center; gap: 11px; }
.scrub-step p { margin: 0; color: var(--text-3); font-size: 0.96rem; transition: color 0.4s; }
.scrub-n {
  flex: none; width: 26px; height: 26px; border-radius: 8px;
  display: grid; place-items: center;
  font-family: var(--rounded); font-weight: 700; font-size: 0.84rem;
  color: var(--gold-light);
  background: rgba(204, 173, 115, 0.12);
  border: 1px solid rgba(204, 173, 115, 0.28);
}
.scrub-step.is-on {
  background: linear-gradient(180deg, var(--glass-2), var(--glass));
  border-color: var(--edge);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
.scrub-step.is-on p { color: var(--text-2); }
.scrub-stage { display: flex; gap: 20px; justify-content: center; }
.scrub-stage .phone { --w: 262px; }

@media (min-width: 900px) {
  .scrub { min-height: 300vh; }
  .scrub-inner {
    position: sticky; top: 0;
    min-height: 100vh;
    grid-template-columns: 1fr 0.86fr;
    align-items: center;
    gap: 56px;
  }
  .scrub-stage { position: relative; display: grid; place-items: center; min-height: 620px; perspective: 1700px; }
  .scrub-stage .phone {
    --w: 300px;
    position: absolute;
    opacity: 0;
    /* each screen swings in rather than cross-fading flat */
    transform: rotateY(-16deg) scale(0.93) translateY(14px);
    transition: opacity 0.6s var(--ease-soft), transform 0.75s var(--ease-out);
  }
  .scrub-stage .phone.is-on { opacity: 1; transform: rotateY(-5deg) rotateX(1.4deg); }
}
@media (max-width: 899px) {
  /* natively swipeable row on small screens */
  .scrub-stage {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 6px 20px 18px;
    margin-inline: -20px;
    overscroll-behavior-x: contain;
  }
  .scrub-stage .phone { scroll-snap-align: center; }
  /* nothing is being scrubbed here, so every step reads at full strength */
  .scrub-step {
    background: linear-gradient(180deg, var(--glass-2), var(--glass));
    border-color: var(--edge);
  }
  .scrub-step p { color: var(--text-2); }
}

/* ------------------------------------------------------------ Zoom moment */
.zoom { position: relative; min-height: 190vh; }
.zoom-inner {
  position: sticky; top: 0;
  height: 100vh;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.zoom-art {
  position: relative;
  width: auto;
  height: min(68vh, 620px);
  max-width: 88vw;
  border-radius: 26px;
  overflow: hidden;
  border: 1px solid var(--edge);
  box-shadow: 0 60px 130px -50px rgba(0, 0, 0, 0.95), 0 0 120px -40px rgba(88, 221, 138, 0.28);
  transform: scale(var(--z, 0.86));
  transform-origin: 50% 46%;
  will-change: transform;
}
.zoom-art img { height: 100%; width: auto; max-width: none; }
/* A vignette plus a lit inner rim gives the panel a body, and it damps the faint
   edges of the muscle-model's own render container at the same time. */
.zoom-art::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background:
    radial-gradient(118% 104% at 50% 42%, transparent 54%, rgba(0, 0, 0, 0.42) 88%, rgba(0, 0, 0, 0.62) 100%),
    linear-gradient(112deg, rgba(255, 255, 255, 0.07), transparent 26%, transparent 76%, rgba(255, 255, 255, 0.04));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}
.zoom-copy {
  position: absolute;
  left: 50%; bottom: clamp(28px, 6vh, 64px);
  transform: translateX(-50%);
  width: min(560px, 88vw);
  text-align: center;
  padding: 22px 26px;
  border-radius: var(--r-lg);
  opacity: var(--zc, 1);
}
.zoom-copy h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); margin-bottom: 10px; }
.zoom-copy p { margin: 0; color: var(--text-2); font-size: 0.98rem; }
@media (max-width: 700px) {
  .zoom { min-height: 150vh; }
  .zoom-art { border-radius: 18px; }
}

/* ------------------------------------------------------------ Detail bands (real UI close-ups) */
.bands { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; margin-top: 44px; }
.band {
  grid-column: span 3;
  border-radius: var(--r-xl);
  padding: 26px 26px 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.band--wide { grid-column: span 6; }
.band--half { grid-column: span 3; }
.band--third { grid-column: span 2; }
.band-txt { flex: none; }
.band-txt h3 { font-size: 1.16rem; margin-bottom: 8px; }
.band-txt p { margin: 0; color: var(--text-3); font-size: 0.93rem; line-height: 1.5; }
.band-kick { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.08em; color: var(--gold); margin: 0 0 10px; text-transform: uppercase; }
/* A crop inside a bordered rectangle announces itself as a crop. These fade out
   at the bottom instead of being cut off, catch light along the top edge, and
   sit in a wash of the accent colour belonging to whatever they are showing, so
   they read as panels of UI surfacing out of the card. */
.band-art {
  --band-glow: rgba(204, 173, 115, 0.16);
  position: relative;
  margin-top: auto;
  border-radius: 16px 16px 0 0;
  overflow: hidden;
  /* caps tall crops so cards in a row stay balanced */
  max-height: 340px;
}
.band-art--tall { max-height: 560px; }
.band-art img {
  width: 100%;
  height: auto;
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 72%, rgba(0, 0, 0, 0.55) 90%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0, #000 72%, rgba(0, 0, 0, 0.55) 90%, transparent 100%);
}
/* the panel edge catches light */
.band-art::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  z-index: 2;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.26) 16%, rgba(255, 255, 255, 0.26) 84%, transparent);
}
.band-art::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(125% 78% at 50% 0%, var(--band-glow), transparent 64%);
  mix-blend-mode: screen;
}
.band-art[data-accent="amber"]  { --band-glow: rgba(229, 181, 103, 0.16); }
.band-art[data-accent="green"]  { --band-glow: rgba(88, 221, 138, 0.15); }
.band-art[data-accent="cyan"]   { --band-glow: rgba(92, 208, 230, 0.15); }
.band-art[data-accent="violet"] { --band-glow: rgba(166, 140, 240, 0.16); }
.band--wide .band-art { max-width: 760px; margin-inline: auto; }
@media (max-width: 900px) {
  .bands { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .band, .band--wide, .band--half, .band--third { grid-column: span 2; }
  .band { padding: 22px 20px 0; }
  .band-art, .band-art--tall { max-height: 260px; }
}

/* ------------------------------------------------------------ Adaptation example */
.adapt { list-style: none; margin: 42px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.adapt-step { position: relative; padding: 26px 24px; border-radius: var(--r-lg); }
.adapt-n {
  width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center;
  font-family: var(--rounded); font-weight: 700; font-size: 1rem;
  color: var(--gold-light); background: rgba(204, 173, 115, 0.12);
  border: 1px solid rgba(204, 173, 115, 0.28); margin-bottom: 15px;
}
.adapt-step h3 { font-size: 1.1rem; margin-bottom: 9px; }
.adapt-step p { margin: 0; color: var(--text-2); font-size: 0.94rem; }
.adapt-step strong { color: var(--text); font-weight: 700; }
.mini { margin-top: 15px; font-family: var(--mono); font-size: 0.79rem; color: var(--text-3); background: rgba(255, 255, 255, 0.03); border: 1px solid var(--edge-soft); border-radius: 10px; padding: 9px 11px; }
.ba { margin-top: 15px; display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; }
.ba-before, .ba-after { border-radius: 12px; padding: 11px; border: 1px solid var(--edge-soft); }
.ba-before { background: rgba(255, 255, 255, 0.02); opacity: 0.82; }
.ba-after { background: rgba(88, 221, 138, 0.07); border-color: rgba(88, 221, 138, 0.3); }
.ba span { display: block; font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-3); font-weight: 700; margin-bottom: 4px; }
.ba b { font-family: var(--rounded); font-size: 0.98rem; display: block; }
.ba em { font-style: normal; font-size: 0.74rem; color: var(--text-3); }
.ba-before b { text-decoration: line-through; text-decoration-color: var(--text-dim); color: var(--text-3); }
.ba-arrow { color: var(--gold); font-size: 1.1rem; }

/* ------------------------------------------------------------ Intelligence */
/* Each large panel owns a colour zone: gold for brand + intelligence,
   cyan for the biometric/privacy story. */
.intel {
  border-radius: var(--r-2xl);
  overflow: hidden;
  padding: clamp(28px, 5vw, 58px);
  background-image:
    radial-gradient(120% 100% at 86% -14%, rgba(204, 173, 115, 0.13), transparent 56%),
    linear-gradient(180deg, var(--glass-2), var(--glass));
}
.intel .section-head { max-width: 44ch; }
.intel-rows { margin-top: 38px; }
.intel-row {
  display: grid; grid-template-columns: 210px 1fr auto; gap: 22px; align-items: baseline;
  padding: 20px 2px; border-top: 1px solid var(--edge-soft);
  transition: background 0.3s;
}
.intel-row:first-child { border-top: 0; }
.intel-name { font-weight: 700; letter-spacing: -0.022em; font-size: 1.05rem; }
.intel-desc { color: var(--text-2); font-size: 0.96rem; }
.intel-tech {
  font-family: var(--mono); font-size: 0.74rem; color: var(--gold-light);
  text-align: right; white-space: nowrap;
  background: rgba(204, 173, 115, 0.08);
  border: 1px solid rgba(204, 173, 115, 0.2);
  border-radius: 999px; padding: 5px 12px;
}
.intel-note { margin: 30px 0 0; font-size: 0.9rem; color: var(--text-3); padding-top: 20px; border-top: 1px solid var(--edge-soft); }
@media (max-width: 760px) {
  .intel-row { grid-template-columns: 1fr; gap: 8px; padding: 18px 0; }
  .intel-tech { text-align: left; justify-self: start; }
}

/* ------------------------------------------------------------ Capability matrix */
/* Subgrid keeps every row aligned across the three columns, even when
   descriptions wrap to different line counts. */
.matrix { margin-top: 42px; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: auto repeat(4, auto); gap: 0 40px; }
.matrix-group { display: grid; grid-template-columns: 1fr; grid-template-rows: subgrid; grid-row: span 5; }
.matrix-group > h3 { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--gold); padding-bottom: 12px; border-bottom: 1px solid var(--edge); margin: 0; }
.matrix dl { display: contents; margin: 0; }
.matrix dl > div { display: flex; flex-direction: column; padding: 15px 0; border-bottom: 1px solid var(--edge-soft); }
.matrix dt { font-weight: 650; font-size: 0.98rem; letter-spacing: -0.015em; }
.matrix dd { margin: 5px 0 0; color: var(--text-3); font-size: 0.9rem; line-height: 1.45; }
@media (max-width: 820px) {
  .matrix { grid-template-columns: 1fr; grid-template-rows: none; gap: 26px; }
  .matrix-group { display: block; grid-row: auto; }
  .matrix dl { display: block; }
}

/* ------------------------------------------------------------ Privacy */
.priv {
  border-radius: var(--r-2xl);
  padding: clamp(28px, 5vw, 56px);
  background-image:
    radial-gradient(110% 100% at 8% -12%, rgba(92, 208, 230, 0.1), transparent 56%),
    linear-gradient(180deg, var(--glass-2), var(--glass));
}
.priv .section-head { max-width: 42ch; }
.priv-cols { margin-top: 38px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.priv-col { padding-top: 20px; border-top: 2px solid var(--gold-dark); }
.priv-col h3 { font-size: 1.1rem; margin-bottom: 10px; }
.priv-col p { color: var(--text-2); font-size: 0.95rem; margin: 0; line-height: 1.55; }
.priv-more { margin: 32px 0 0; font-size: 0.95rem; color: var(--text-3); }
.priv-more a { color: var(--gold-light); border-bottom: 1px solid rgba(204, 173, 115, 0.35); padding-bottom: 1px; }
.priv-more a:hover { border-bottom-color: var(--gold-light); }
@media (max-width: 820px) { .priv-cols { grid-template-columns: 1fr; gap: 22px; } }

/* ------------------------------------------------------------ Waitlist form */
.waitlist { max-width: 468px; margin: 0 0 16px; }
.waitlist-controls { display: flex; gap: 10px; align-items: stretch; }
.waitlist-input {
  flex: 1 1 auto; min-width: 0; --h: 52px; min-height: var(--h);
  padding: 0 20px; border-radius: 999px;
  background: var(--glass-2);
  border: 1px solid var(--edge-strong);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  color: var(--text); font-size: 1rem; font-family: inherit; letter-spacing: -0.01em;
  transition: border-color 0.24s, box-shadow 0.24s, background 0.24s;
}
.waitlist-input::placeholder { color: var(--text-3); }
.waitlist-input:hover { border-color: rgba(255, 255, 255, 0.3); }
.waitlist-input:focus { outline: none; border-color: var(--gold); background: rgba(255, 255, 255, 0.09); box-shadow: 0 0 0 3px rgba(204, 173, 115, 0.22); }
.waitlist-input:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 2px; }
.waitlist-input:disabled { opacity: 0.6; }
.waitlist-btn { flex: none; white-space: nowrap; }
/* honeypot: kept in the DOM, hidden from people and assistive tech */
.waitlist-hp { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.waitlist-msg { min-height: 1.2em; margin: 10px 2px 0; font-size: 0.88rem; color: var(--text-3); }
.waitlist-msg.is-error { color: var(--red); }
.waitlist-success {
  display: inline-flex; align-items: center; gap: 11px; margin: 0; padding: 8px 2px;
  color: var(--text); font-weight: 550; font-size: 1.02rem;
}
.waitlist-check { position: relative; flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--green); box-shadow: 0 0 16px -2px rgba(88, 221, 138, 0.6); }
.waitlist-check::after { content: ""; position: absolute; left: 8px; top: 4px; width: 5px; height: 10px; border: solid #06210f; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.waitlist--center { margin-inline: auto; max-width: 540px; }
.waitlist--center .waitlist-controls { justify-content: center; }
.waitlist--center .waitlist-msg { text-align: center; }
.waitlist--center .waitlist-success { display: flex; justify-content: center; }
.waitlist--stack { max-width: none; margin: 0; }
.waitlist--stack .waitlist-controls { flex-direction: column; align-items: stretch; }
.waitlist--stack .waitlist-btn { width: 100%; }
.waitlist--stack .waitlist-msg { text-align: center; }
.waitlist--stack .waitlist-success { display: flex; justify-content: center; }

/* ------------------------------------------------------------ Final CTA */
.cta {
  text-align: center;
  border-radius: var(--r-2xl);
  padding: clamp(40px, 7vw, 82px) clamp(24px, 5vw, 56px);
  overflow: hidden;
  background-image:
    radial-gradient(120% 150% at 50% -14%, rgba(204, 173, 115, 0.18), transparent 58%),
    linear-gradient(180deg, var(--glass-2), var(--glass));
}
.cta::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  z-index: 1;
}
.cta h2 { margin-bottom: 16px; }
.cta .lede { max-width: 40rem; margin: 0 auto 30px; }
.cta .btnrow { justify-content: center; }
.cta > * { position: relative; z-index: 1; }

/* ------------------------------------------------------------ Footer */
.footer { border-top: 1px solid var(--edge-soft); padding-block: 56px 36px; margin-top: 40px; }
.footer-top { display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.footer-brand { max-width: 22rem; }
.footer .brand { margin-bottom: 14px; }
.footer .tagline { color: var(--text-3); font-size: 0.92rem; }
.footer-cols { display: flex; gap: clamp(32px, 6vw, 72px); flex-wrap: wrap; }
.footer-col h2 { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); margin: 0 0 14px; font-weight: 700; }
.footer-col a { display: flex; align-items: center; min-height: 44px; color: var(--text-2); font-size: 0.93rem; transition: color 0.2s; }
.footer-col a:hover { color: var(--gold-light); }
.footer-col a[aria-current="page"] { color: var(--gold-light); }
.footer-bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--edge-soft); color: var(--text-3); font-size: 0.85rem; }

/* ------------------------------------------------------------ Responsive */
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; text-align: center; }
  .hero h1, .hero .lede { margin-inline: auto; }
  .hero .eyebrow { margin-inline: auto; }
  .hero .waitlist { margin-inline: auto; }
  .hero .waitlist-controls { justify-content: center; }
  .hero .waitlist-msg { text-align: center; }
  .hero .waitlist-success { display: flex; justify-content: center; }
  .hero-visual { margin-top: 20px; order: 2; transform: none; }
  .adapt { grid-template-columns: 1fr; }
  .scrub-copy { max-width: none; }
}
@media (max-width: 560px) {
  .waitlist-controls { flex-direction: column; align-items: stretch; }
  .waitlist-btn { width: 100%; }
}
/* Keep scrolling cheap on small screens: only the nav keeps a live blur.
   background-color (not the shorthand) so per-section colour tints survive. */
@media (max-width: 720px) {
  .glass, .waitlist-input, .btn-ghost {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .glass { background-color: #08080a; }
}

/* ============================================================
   Document pages (privacy / terms / support)
   ============================================================ */
.doc-page { padding-top: calc(var(--nav-total) + 28px); padding-bottom: 20px; }
.doc-wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 20px; }
@media (min-width: 640px) { .doc-wrap { padding-inline: 24px; } }
@media (min-width: 1024px) { .doc-wrap { padding-inline: 40px; display: grid; grid-template-columns: 220px minmax(0, 72ch); gap: 56px; justify-content: center; align-items: start; } }

.doc-back { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; font-size: 0.88rem; color: var(--text-3); margin-bottom: 14px; }
.doc-back:hover { color: var(--gold-light); }
.doc-back svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; }

/* TOC */
.doc-toc { display: none; }
@media (min-width: 1024px) {
  .doc-toc { display: block; position: sticky; top: calc(var(--nav-total) + 22px); align-self: start; }
  .doc-toc h2 { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--text-3); margin: 0 0 14px; }
  .doc-toc ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
  .doc-toc a { display: block; padding: 6px 10px; border-radius: 8px; font-size: 0.86rem; color: var(--text-3); border-left: 2px solid transparent; line-height: 1.35; }
  .doc-toc a:hover { color: var(--text); background: var(--glass); }
  .doc-toc a[aria-current="true"] { color: var(--gold-light); border-left-color: var(--gold); background: rgba(204, 173, 115, 0.06); }
}
/* mobile contents */
.doc-toc-m { margin: 0 0 26px; border: 1px solid var(--edge-soft); border-radius: var(--r-md); background: var(--glass); }
@media (min-width: 1024px) { .doc-toc-m { display: none; } }
.doc-toc-m summary { cursor: pointer; padding: 14px 16px; font-weight: 650; font-size: 0.95rem; list-style: none; display: flex; align-items: center; justify-content: space-between; }
.doc-toc-m summary::-webkit-details-marker { display: none; }
.doc-toc-m summary::after { content: "+"; color: var(--gold); font-size: 1.1rem; }
.doc-toc-m[open] summary::after { content: "\2013"; }
.doc-toc-m ol { margin: 0; padding: 0 16px 14px; list-style: none; display: flex; flex-direction: column; gap: 2px; }
.doc-toc-m a { display: flex; align-items: center; min-height: 44px; padding: 0 8px; color: var(--text-2); font-size: 0.92rem; border-bottom: 1px solid var(--edge-soft); }
.doc-toc-m a:last-child { border-bottom: 0; }

/* article */
.doc { min-width: 0; }
.doc h1 { font-size: clamp(2rem, 5vw, 2.7rem); letter-spacing: -0.035em; margin-bottom: 10px; }
.doc .meta { color: var(--text-3); font-size: 0.9rem; margin: 0 0 18px; display: inline-flex; align-items: center; gap: 8px; }
.doc .meta .badge { color: var(--gold-light); background: rgba(204, 173, 115, 0.1); border: 1px solid rgba(204, 173, 115, 0.22); border-radius: 999px; padding: 2px 10px; font-size: 0.78rem; }
.doc .intro { font-size: 1.12rem; color: var(--text-2); line-height: 1.6; margin: 0 0 8px; }
.doc section { scroll-margin-top: calc(var(--nav-total) + 20px); }
.doc h2 { font-size: 1.24rem; letter-spacing: -0.02em; margin: 38px 0 12px; display: flex; align-items: center; gap: 10px; scroll-margin-top: calc(var(--nav-total) + 20px); }
.doc h2 .idx { font-family: var(--mono); font-size: 0.8rem; color: var(--gold); flex: none; }
.doc h2 .h-link { opacity: 0; margin-left: 2px; width: 26px; height: 26px; border-radius: 7px; display: inline-grid; place-items: center; color: var(--text-3); background: transparent; border: 0; cursor: pointer; transition: opacity 0.2s, color 0.2s, background 0.2s; }
.doc h2:hover .h-link, .doc h2 .h-link:focus-visible { opacity: 1; }
.doc h2 .h-link:hover { color: var(--gold-light); background: var(--glass); }
.doc h2 .h-link svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; }
.doc h2 .h-link.copied { color: var(--green); opacity: 1; }
.doc p, .doc li { color: var(--text-2); line-height: 1.68; }
.doc p { margin: 0 0 14px; }
.doc strong { color: var(--text); font-weight: 650; }
.doc a.inline { color: var(--gold-light); border-bottom: 1px solid rgba(204, 173, 115, 0.35); }
.doc a.inline:hover { border-bottom-color: var(--gold-light); }
.doc ul { padding-left: 0; margin: 0 0 16px; display: flex; flex-direction: column; gap: 9px; }
.doc ul li { list-style: none; padding-left: 24px; position: relative; }
.doc ul li::before { content: ""; position: absolute; left: 4px; top: 11px; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }
.doc .callout { padding: 20px 22px; border-radius: var(--r-md); border: 1px solid var(--edge-soft); background: var(--glass); margin: 8px 0 24px; }
.doc .callout h2 { margin: 0 0 12px; }
.doc .callout p:last-child, .doc .callout ul { margin-bottom: 0; }
.doc .note { padding: 16px 18px; border-radius: var(--r-md); border: 1px solid rgba(204, 173, 115, 0.25); background: rgba(204, 173, 115, 0.05); margin: 8px 0 24px; font-size: 0.94rem; color: var(--text-2); }
.doc .note strong { color: var(--gold-light); }
.doc hr { border: 0; border-top: 1px solid var(--edge-soft); margin: 40px 0 22px; }
.doc .docfoot { color: var(--text-3); font-size: 0.9rem; }
.doc .docfoot a { color: var(--text-2); }
.doc .docfoot a:hover { color: var(--gold-light); }

/* Support-specific */
.sup-actions { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin: 8px 0 26px; }
.sup-action { display: flex; flex-direction: column; gap: 6px; padding: 20px; border-radius: var(--r-md); border: 1px solid var(--edge); background: linear-gradient(180deg, var(--glass-2), transparent); }
.sup-action h3 { font-size: 1rem; margin: 0; }
.sup-action p { font-size: 0.9rem; color: var(--text-3); margin: 0; }
.sup-action .btn { margin-top: auto; align-self: flex-start; }
.sup-steps { margin: 8px 0 24px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.sup-steps .st { padding: 16px 18px; border-radius: var(--r-md); border: 1px solid var(--edge-soft); background: var(--glass); }
.sup-steps .st h3 { font-size: 0.98rem; margin: 0 0 5px; }
.sup-steps .st p { font-size: 0.9rem; color: var(--text-3); margin: 0; }
.faq details { border-bottom: 1px solid var(--edge-soft); }
.faq summary { cursor: pointer; padding: 16px 2px; font-weight: 650; font-size: 1.02rem; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--gold); font-weight: 400; flex: none; font-size: 1.2rem; }
.faq details[open] summary::after { content: "\2013"; }
.faq details p { margin: 0 2px 18px; color: var(--text-2); }
@media (max-width: 620px) { .sup-actions, .sup-steps { grid-template-columns: 1fr; } }

/* ============================================================
   Reduced motion: no reveals, no scroll-driven transforms, no loops
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0s !important;
  }
  .js .reveal { opacity: 1 !important; transform: none !important; }
  .words > span { animation: none !important; opacity: 1 !important; transform: none !important; }
  .hero-visual { transform: none !important; }
  .zoom-art { transform: scale(1) !important; }
  .zoom-copy { opacity: 1 !important; }
  .zoom { min-height: 0 !important; }
  .zoom-inner { position: static !important; height: auto !important; padding-block: 40px; }
  .scrub { min-height: 0 !important; }
  .scrub-inner { position: static !important; min-height: 0 !important; }
  .scrub-stage .phone { opacity: 1 !important; transform: none !important; position: static !important; }
  .scrub-stage { display: flex !important; overflow-x: auto; gap: 16px; }
  /* rail wraps into a grid so nothing needs scrolling; the staggered depth is
     dropped with it so the wrapped rows stay on a baseline */
  .rail-track { transform: none !important; flex-wrap: wrap; justify-content: center; width: auto; perspective: none; }
  .js .rail-item .phone { transform: none !important; }
  .js .rail-scroll { overflow-x: visible; }
  .scroll-cue { display: none; }
  .ambient::after { transition: none !important; }
  .btn-primary:hover { transform: none !important; }
  .orb { display: none; }
}

/* ============================================================
   Print (legal pages)
   ============================================================ */
@media print {
  .ambient, .grain, .orbs, .nav, .mobile-menu, .doc-toc, .doc-toc-m, .doc-back, .footer, .skip { display: none !important; }
  body { background: #fff; color: #111; overflow: visible; }
  .doc-page { padding: 0; }
  .doc-wrap { display: block; max-width: none; padding: 0; }
  .doc, .doc p, .doc li, .doc .intro { color: #111 !important; }
  .doc h1, .doc h2, .doc strong { color: #000 !important; }
  .doc h2 .idx { color: #555 !important; }
  .doc a { color: #111 !important; }
  .doc h2 .h-link { display: none !important; }
  .doc .callout, .doc .note { border: 1px solid #ccc; background: #f6f6f6; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; color: #555; }
}