/* ============================================================
   UbiRing landing — v4.
   Live vitals monitor, cursor-reactive depth, 3D tilt cards,
   spotlight glow, scan-rings. Every motion is reduced-motion safe.
   ============================================================ */

/* Fonts are loaded via <link> in the document head (non-render-blocking). */

/* -- Tokens ------------------------------------------------- */

:root {
  color-scheme: dark;

  /* Obsidian stage — near-black with the faintest cool cast, Apple-style. */
  --bg: oklch(0.135 0.010 260);
  --surface: oklch(0.180 0.012 260);
  --surface-2: oklch(0.220 0.014 260);
  --ink: oklch(0.965 0.004 250);
  --ink-2: oklch(0.760 0.010 252);
  --ink-3: oklch(0.600 0.012 252);
  --border: oklch(1 0 0 / 0.09);
  --border-strong: oklch(1 0 0 / 0.17);

  --accent: oklch(0.74 0.145 252);
  --accent-press: oklch(0.80 0.115 252);
  --accent-soft: oklch(0.74 0.145 252 / 0.13);
  --accent-ink: oklch(0.12 0.02 252);

  --stage: oklch(0.190 0.018 262);
  --stage-2: oklch(0.235 0.022 262);
  --stage-fg: oklch(0.97 0.006 264);
  --stage-mute: oklch(0.72 0.018 264);
  --stage-border: oklch(1 0 0 / 0.13);

  --font-display: "Hanken Grotesk", system-ui, -apple-system, sans-serif;
  --font-body: "Hanken Grotesk", system-ui, -apple-system, sans-serif;

  --t-xs: 0.7rem;
  --t-sm: 0.875rem;
  --t-base: 1rem;
  --t-md: 1.0625rem;
  --t-lg: 1.5rem;
  --t-xl: 1.85rem;
  --t-2xl: clamp(2.25rem, 4.2vw, 3.4rem);
  --t-3xl: clamp(3rem, 7.5vw, 6.25rem);

  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 22px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 140px;

  --r-sm: 6px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-pill: 9999px;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --d-fast: 200ms;
  --d-base: 380ms;
  --d-slow: 700ms;

  /* Heartbeat period — shared by ECG, HR beat scale, and status ping. */
  --bpm-period: 0.9s;

  --container: 1240px;
  --shadow-1: 0 1px 0 oklch(0 0 0 / 0.25), 0 14px 40px -10px oklch(0 0 0 / 0.55);
  --shadow-2: 0 1px 0 oklch(0 0 0 / 0.3), 0 40px 80px -20px oklch(0 0 0 / 0.65);

  /* Ambient field — restrained: one cool bloom + a whisper of the ring's
     biosensor emerald. Monochrome-first, never candy-coloured. */
  --bloom-1: oklch(0.45 0.11 252 / 0.22);
  --bloom-2: oklch(0.52 0.09 170 / 0.10);
  --bloom-3: oklch(0.40 0.08 252 / 0.14);
  --grid-line: oklch(0.85 0.03 252 / 0.05);
  --glow: oklch(0.72 0.17 252 / 0.55);
  --glow-soft: oklch(0.72 0.17 252 / 0.22);
  --hairline: oklch(0.72 0.17 252 / 0.32);
}

[data-theme="light"] {
  color-scheme: light;

  --bg: oklch(0.965 0.006 250);
  --surface: oklch(0.995 0.002 250);
  --surface-2: oklch(0.925 0.010 250);
  --ink: oklch(0.18 0.030 252);
  --ink-2: oklch(0.42 0.020 252);
  --ink-3: oklch(0.50 0.018 252);
  --border: oklch(0 0 0 / 0.10);
  --border-strong: oklch(0 0 0 / 0.20);

  --accent: oklch(0.55 0.20 252);
  --accent-press: oklch(0.46 0.22 252);
  --accent-soft: oklch(0.55 0.20 252 / 0.11);
  --accent-ink: oklch(0.99 0.005 252);

  --stage: oklch(0.235 0.030 262);
  --stage-2: oklch(0.290 0.034 262);
  --stage-border: oklch(0.40 0.04 264);
  /* Same as :root — declared explicitly because the footer stage stays
     DARK in light theme (its wordmark/headings are hard-coded light);
     without these a refactor could strand them. */
  --stage-fg: oklch(0.97 0.006 264);
  --stage-mute: oklch(0.72 0.018 264);

  --shadow-1: 0 1px 0 oklch(0.18 0.045 252 / 0.04), 0 10px 30px -10px oklch(0.18 0.045 252 / 0.12);
  --shadow-2: 0 1px 0 oklch(0.18 0.045 252 / 0.05), 0 30px 60px -20px oklch(0.18 0.045 252 / 0.2);

  --bloom-1: oklch(0.64 0.14 252 / 0.14);
  --bloom-2: oklch(0.72 0.09 205 / 0.10);
  --bloom-3: oklch(0.70 0.10 252 / 0.08);
  --grid-line: oklch(0.45 0.04 252 / 0.05);
  --glow: oklch(0.62 0.19 252 / 0.45);
  --glow-soft: oklch(0.62 0.19 252 / 0.16);
  --hairline: oklch(0.62 0.19 252 / 0.28);
}

/* -- Reset -------------------------------------------------- */

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

* { margin: 0; }

/* No scroll-behavior:smooth — Lenis owns smoothness; reduced-motion stays instant. */
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 88px; }

body {
  font-family: var(--font-body);
  font-size: var(--t-md);
  line-height: 1.55;
  color: var(--ink);
  background-color: var(--bg);
  background-image:
    radial-gradient(58% 48% at 82% -6%, var(--bloom-1), transparent 62%),
    radial-gradient(52% 46% at -4% 14%, var(--bloom-2), transparent 60%),
    radial-gradient(48% 44% at 52% 118%, var(--bloom-3), transparent 60%);
  background-size: 100% 100%, 100% 100%, 100% 100%;
  background-position: center top;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-attachment: fixed;
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color var(--d-base) var(--ease), color var(--d-base) var(--ease);
  /* clip, not hidden: hidden makes <body> a scroll container, which
     silently disables every position:sticky descendant (the section
     overlap deck and the story stack). clip guards horizontal bleed
     without capturing the sticky scrollport. */
  overflow-x: hidden;
  overflow-x: clip;
}

img { display: block; max-width: 100%; height: auto; }

a { color: inherit; text-decoration: none; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

input { font: inherit; }

::selection { background: var(--accent); color: var(--accent-ink); }

/* -- Layout primitives ------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding-inline: clamp(20px, 4vw, 40px);
}

.wrap--wide { max-width: 1480px; }

.section { padding-block: var(--s-8); position: relative; }
.section--tight { padding-block: var(--s-7); }

/* Per-section background rhythm — monochrome, Apple-style. Sections alternate
   between the base stage and a barely-lifted panel; depth comes from light,
   not hue. --ink-mixed values auto-adapt to both themes. */
.section--panel  { background: color-mix(in oklab, var(--ink) 4.5%, var(--bg)); }
.section--cool   { background: color-mix(in oklab, var(--ink) 2.5%, var(--bg)); }
.section--violet { background: transparent; }
.section--mint   { background: color-mix(in oklab, var(--ink) 2.5%, var(--bg)); }
.section--warm   { background: transparent; }

/* Clear hairline separation between stacked sections. */
.section:not(.hero), .howto, .band { border-top: 1px solid var(--border); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.025em;
  line-height: 1.04;
}

h2 { font-size: var(--t-2xl); }
h3 { font-size: var(--t-xl); line-height: 1.15; }

p { max-width: 64ch; }

.lead { font-size: var(--t-md); color: var(--ink-2); line-height: 1.6; }

/* -- Scroll progress bar ----------------------------------- */

.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 100%;
  transform: scaleX(var(--progress, 0));
  transform-origin: left;
  background: linear-gradient(90deg, var(--accent), color-mix(in oklab, var(--accent) 68%, var(--bg)));
  z-index: 100;
  pointer-events: none;
  transition: transform 80ms linear;
}

/* -- Header ------------------------------------------------- */

.site-header {
  --active-hue: 252;
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 90;
  padding-block: 6px;
  background: color-mix(in oklab, var(--bg) 85%, transparent);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--d-base) var(--ease),
    background-color var(--d-base) var(--ease),
    padding-block var(--d-base) var(--ease);
}

.site-header.is-scrolled {
  padding-block: 2px;
  border-bottom-color: var(--border);
}

/* Accent line that reflects the colour of the active section. */
.site-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: linear-gradient(90deg, transparent, oklch(0.62 0.19 var(--active-hue) / 0.95) 50%, transparent);
  opacity: 0;
  transition: opacity var(--d-base) var(--ease), background var(--d-slow) var(--ease);
  pointer-events: none;
}

.site-header.is-scrolled::after { opacity: 1; }

.site-header__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
}

.site-header__brand { display: inline-flex; align-items: center; }

.site-header__brand img {
  height: 110px;
  width: auto;
  margin-block: -28px;
  transition: filter var(--d-base) var(--ease);
}

.site-header.is-scrolled .site-header__brand img {
  height: 90px;
  margin-block: -24px;
}

[data-theme="dark"] .site-header__brand img { filter: brightness(0) invert(1); }

/* -- Glow nav (3D flip + per-item radial glow) ------------- */

/* One uniform glow colour for every menu item (brand accent hue). */
.glow-nav { --gl: 0.58; --gc: 252; display: flex; }
[data-theme="dark"] .glow-nav { --gl: 0.74; }

/* The bar sits inline in the header — no separate pill container. */
.glow-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 2px;
  position: relative;
}

.glow-nav__item { position: relative; }

.glow-nav__link {
  position: relative;
  display: block;
  border-radius: var(--r-pill);
  padding: 8px 15px;
  font-family: var(--font-display);
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--ink-2);
  perspective: 600px;
  isolation: isolate;
  transition: color var(--d-fast) var(--ease), background-color var(--d-base) var(--ease);
}

.glow-nav__face {
  display: flex;
  align-items: center;
  gap: 7px;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  transition: transform 1s var(--ease), opacity 0.75s var(--ease);
}

.glow-nav__face--front { transform-origin: center bottom; }

.glow-nav__face--back {
  position: absolute;
  inset: 0;
  justify-content: center;
  padding: 8px 15px;
  transform-origin: center top;
  transform: rotateX(90deg);
  opacity: 0;
}

.glow-nav__link:hover .glow-nav__face--front { transform: rotateX(-90deg); opacity: 0; }
.glow-nav__link:hover .glow-nav__face--back { transform: rotateX(0deg); opacity: 1; }

.glow-nav__link:hover,
.glow-nav__link.is-active { color: var(--ink); }
.glow-nav__link.is-active { background: oklch(var(--gl) 0.16 var(--gc) / 0.12); }

.glow-nav__ic {
  width: 17px;
  height: 17px;
  color: var(--ink-3);
  transition: color var(--d-base) var(--ease), transform var(--d-base) var(--ease);
}

.glow-nav__link:hover .glow-nav__ic,
.glow-nav__link.is-active .glow-nav__ic { color: oklch(var(--gl) 0.19 var(--gc)); }

/* Per-item radial glow halo. */
.glow-nav__glow {
  position: absolute;
  inset: -3px;
  border-radius: var(--r-pill);
  background: radial-gradient(circle at center,
    oklch(var(--gl) 0.19 var(--gc) / 0.5),
    oklch(var(--gl) 0.19 var(--gc) / 0.12) 46%,
    transparent 72%);
  opacity: 0;
  transform: scale(0.8);
  filter: blur(3px);
  pointer-events: none;
  z-index: -1;
  transition: opacity 1s var(--ease), transform 1s var(--ease);
}

.glow-nav__link:hover .glow-nav__glow,
.glow-nav__link.is-active .glow-nav__glow { opacity: 1; transform: scale(1); }

@media (prefers-reduced-motion: reduce) {
  .glow-nav__face { transition: none; }
  .glow-nav__link:hover .glow-nav__face--front { transform: none; opacity: 1; }
  .glow-nav__link:hover .glow-nav__face--back { display: none; }
}

.header-cluster { display: inline-flex; align-items: center; gap: var(--s-3); }

/* -- Theme toggle ------------------------------------------ */

.theme-toggle {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-pill);
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border);
  transition: background-color var(--d-fast) var(--ease),
    border-color var(--d-fast) var(--ease),
    color var(--d-fast) var(--ease),
    transform var(--d-fast) var(--ease);
}

.theme-toggle:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}

.theme-toggle:active { transform: scale(0.92); }

.theme-toggle__icon { position: relative; width: 18px; height: 18px; }

.theme-toggle__sun,
.theme-toggle__moon {
  position: absolute;
  inset: 0;
  transition: transform var(--d-base) var(--ease), opacity var(--d-base) var(--ease);
}

[data-theme="light"] .theme-toggle__sun { transform: scale(0) rotate(-90deg); opacity: 0; }
[data-theme="light"] .theme-toggle__moon { transform: scale(1) rotate(0); opacity: 1; }
[data-theme="dark"] .theme-toggle__sun { transform: scale(1) rotate(0); opacity: 1; }
[data-theme="dark"] .theme-toggle__moon { transform: scale(0) rotate(90deg); opacity: 0; }

/* -- Buttons (with shine sweep) ---------------------------- */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 12px 22px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-sm);
  letter-spacing: -0.005em;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  cursor: pointer;
  isolation: isolate;
  overflow: hidden;
  transition: transform var(--d-fast) var(--ease),
    background-color var(--d-fast) var(--ease),
    border-color var(--d-fast) var(--ease),
    color var(--d-fast) var(--ease),
    box-shadow var(--d-fast) var(--ease);
}

.btn span { position: relative; z-index: 2; }

.btn__arrow { display: inline-flex; width: 18px; height: 18px; transition: transform var(--d-base) var(--ease); }
.btn:hover .btn__arrow { transform: translateX(4px); }

/* Diagonal shine that sweeps across on hover. */
.btn--primary::before,
.btn--accent::before {
  content: "";
  position: absolute;
  top: 0;
  left: -130%;
  width: 60%;
  height: 100%;
  background: linear-gradient(100deg, transparent, oklch(1 0 0 / 0.28), transparent);
  transform: skewX(-18deg);
  transition: left 0.6s var(--ease);
  z-index: 1;
  pointer-events: none;
}

.btn--primary:hover::before,
.btn--accent:hover::before { left: 150%; }

.btn--primary { background: var(--ink); color: var(--bg); }

.btn--primary::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--accent);
  transform: translateY(100%);
  transition: transform var(--d-base) var(--ease);
  z-index: 0;
}

.btn--primary:hover::after { transform: translateY(0); }
.btn--primary:hover { color: var(--accent-ink); border-color: var(--accent); box-shadow: 0 10px 24px -10px var(--accent); }

.btn--ghost { background: transparent; border-color: var(--border-strong); color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }

.btn--accent { background: var(--accent); color: var(--accent-ink); }
.btn--accent:hover { background: var(--accent-press); box-shadow: 0 12px 28px -10px var(--accent); }

.btn--lg { padding: 16px 28px; font-size: var(--t-base); }

/* -- Hero --------------------------------------------------- */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-top: calc(var(--s-7) + 22px);
  padding-bottom: var(--s-5);
  overflow: hidden;
}

.hero > .wrap { width: 100%; }

/* Cursor-reactive depth glow. Positions driven by --hero-mx / --hero-my. */
.hero::before {
  content: "";
  position: absolute;
  inset: -10% 0 0 0;
  background:
    radial-gradient(circle 420px at var(--hero-mx, 78%) var(--hero-my, 26%), var(--accent-soft), transparent 60%),
    radial-gradient(ellipse 42% 40% at 10% 82%, color-mix(in oklab, var(--accent) 12%, transparent), transparent 70%);
  pointer-events: none;
  z-index: 0;
  transition: background-position 200ms var(--ease);
}

[data-theme="dark"] .hero::before {
  background:
    radial-gradient(circle 420px at var(--hero-mx, 78%) var(--hero-my, 26%), oklch(0.42 0.13 252 / 0.30), transparent 60%),
    radial-gradient(ellipse 30% 24% at 50% 44%, oklch(0.55 0.10 165 / 0.10), transparent 70%),
    radial-gradient(ellipse 42% 40% at 10% 82%, oklch(0.4 0.12 252 / 0.16), transparent 70%);
}

/* Cinematic vignette — edges fall to black so the ring owns the light. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(130% 100% at 50% 42%, transparent 58%, oklch(0 0 0 / 0.34) 100%);
  opacity: 0;
  transition: opacity var(--d-slow) var(--ease);
}

[data-theme="dark"] .hero::after { opacity: 1; }

.hero > * { position: relative; z-index: 1; }

.hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(var(--s-3), 1.7vh, var(--s-5));
}

.hero__copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 780px;
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: var(--s-4);
  padding: 7px 16px;
  border-radius: var(--r-pill);
  background: color-mix(in oklab, var(--surface) 55%, transparent);
  border: 1px solid color-mix(in oklab, var(--accent) 30%, var(--border));
  color: var(--ink-2);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.hero__eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--glow);
}

.hero__display {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(3rem, 7.2vw, 6.1rem);
  line-height: 0.94;
  letter-spacing: -0.045em;
  color: var(--ink);
}

.hero__display em { font-style: normal; color: var(--accent); position: relative; }

.hero__display em::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.06em;
  height: 0.07em;
  background: var(--accent);
  opacity: 0.2;
}

/* Headline rises out of this mask ("Meet UbiRing from down"). */
.hero__head-mask { display: block; overflow: hidden; padding-block: 0.12em; margin-block: -0.12em; }
.hero__head-rise { display: block; will-change: transform; }

/* Scroll cue while the hero waits for the first scroll. */
.hero__scroll {
  position: absolute;
  left: 50%;
  bottom: clamp(12px, 3vh, 26px);
  transform: translateX(-50%);
  display: grid;
  place-items: center;
  color: var(--ink-3);
  z-index: 3;
  pointer-events: none;
}

.hero__scroll svg { width: 26px; height: 26px; animation: hero-scroll-bob 1.8s ease-in-out infinite; }

@keyframes hero-scroll-bob {
  0%, 100% { transform: translateY(0); opacity: 0.45; }
  50% { transform: translateY(6px); opacity: 1; }
}

.hero__lede {
  margin-top: var(--s-4);
  margin-inline: auto;
  max-width: 52ch;
  font-size: clamp(1.02rem, 1.5vw, 1.22rem);
  color: var(--ink-2);
  line-height: 1.5;
}

.hero__actions {
  margin-top: var(--s-6);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
}

/* "Available on Amazon" mark. */
.amazon-cta {
  margin-top: var(--s-5);
  margin-inline: auto;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  width: max-content;
  font-size: var(--t-sm);
  color: var(--ink-3);
  transition: color var(--d-fast) var(--ease);
}

.amazon-cta__label { font-weight: 500; }

.amazon-cta__brand {
  position: relative;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.18rem;
  letter-spacing: -0.02em;
  color: var(--ink);
  padding-bottom: 11px;
  transition: color var(--d-fast) var(--ease);
}

.amazon-cta__smile {
  position: absolute;
  left: 2px;
  bottom: 0;
  width: 90%;
  height: 11px;
  color: #ff9900;
  overflow: visible;
}

.amazon-cta:hover { color: var(--ink-2); }
.amazon-cta:hover .amazon-cta__brand { color: var(--accent); }

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-5) var(--s-8);
  width: 100%;
  max-width: 760px;
  margin-inline: auto;
  padding-top: var(--s-5);
  border-top: 1px solid var(--border);
}

.hero__stat { display: flex; flex-direction: column; align-items: center; gap: 2px; }

.hero__stat-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--ink);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

.hero__stat-label {
  font-size: var(--t-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-3);
}

/* Hero visual: ring + rotating scan-rings + live HUD. */
.hero__visual {
  position: relative;
  height: clamp(230px, 40vh, 430px);
  width: auto;
  aspect-ratio: 7 / 5;
  max-width: 94%;
  margin-inline: auto;
  display: grid;
  place-items: center;
  isolation: isolate;
  align-self: center;
}

/* Live vitals HUD — a real readout panel, not a glass card. */
.vitals {
  position: absolute;
  left: 0;
  bottom: 2%;
  width: min(300px, 88%);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-1);
  padding: 14px 16px;
  display: grid;
  gap: 10px;
  z-index: 2;
}

.vitals__status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.vitals__ping { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }

.vitals__ping::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--accent);
  animation: ping var(--bpm-period) var(--ease) infinite;
}

@keyframes ping {
  0% { transform: scale(1); opacity: 0.55; }
  100% { transform: scale(3.4); opacity: 0; }
}

.vitals__ecg {
  position: relative;
  height: 48px;
  border-radius: 8px;
  overflow: hidden;
  background: color-mix(in oklab, var(--accent) 9%, transparent);
  border: 1px solid color-mix(in oklab, var(--accent) 16%, transparent);
}

.vitals__ecg svg {
  width: 100%;
  height: 100%;
  display: block;
  -webkit-mask: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
  mask: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
}

.vitals__ecg .ecg-g {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 3px color-mix(in oklab, var(--accent) 60%, transparent));
}

.vitals__readouts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.vitals__readout { display: flex; flex-direction: column; gap: 2px; }

.vitals__num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.vitals__pct { font-size: 0.62em; color: var(--ink-3); }

.vitals__unit {
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.beat { display: inline-block; transform-origin: center; animation: beat var(--bpm-period) var(--ease) infinite; }

@keyframes beat {
  0%, 30%, 100% { transform: scale(1); }
  14% { transform: scale(1.2); }
}

.hero__pills { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2); margin-top: var(--s-4); }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 8px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: var(--t-xs);
  font-weight: 500;
  color: var(--ink-2);
}

.pill__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }

/* -- Section headers --------------------------------------- */

/* Standard centered section header: badge → title → subtitle. */
.section-head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto var(--s-7);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-4);
}

.section-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 15px;
  border-radius: var(--r-pill);
  background: transparent;
  border: 1px solid color-mix(in oklab, var(--accent) 32%, var(--border));
  color: var(--accent);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.section-badge::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
}

/* Light theme's accent is only ~4:1 at this tiny size — use the pressed
   (darker) accent for the label text; the dot stays decorative. */
[data-theme="light"] .section-badge { color: var(--accent-press); }

/* The toggle can't do anything without JS — don't show a dead control. */
html:not(.js) .theme-toggle { display: none; }

.section-head__title {
  font-size: var(--t-2xl);
  line-height: 1.1;
  letter-spacing: -0.025em;
}

.section-head__title em { font-style: normal; color: var(--accent); }

.section-head .lead {
  max-width: 60ch;
  margin: 0 auto;
}

/* -- Spotlight glow (shared) ------------------------------- */

[data-spot] { position: relative; }

[data-spot] > * { position: relative; z-index: 1; }

[data-spot]::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%),
    color-mix(in oklab, var(--accent) 22%, transparent), transparent 62%);
  opacity: 0;
  transition: opacity var(--d-base) var(--ease);
  pointer-events: none;
  z-index: 0;
}

[data-spot]:hover::after { opacity: 1; }

/* -- 3D tilt (shared) -------------------------------------- */

[data-tilt] {
  transition: transform 160ms ease-out,
    box-shadow var(--d-base) var(--ease),
    border-color var(--d-base) var(--ease);
  transform-style: preserve-3d;
}

/* Promote to its own layer only while actually being tilted. */
[data-tilt]:hover { will-change: transform; }

/* -- Feature grid: standard 3-col, equal cards -------------- */

.feature__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: var(--s-4);
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: 0 8px 22px -6px color-mix(in oklab, var(--accent) 55%, transparent);
  transition: transform var(--d-base) var(--ease),
    box-shadow var(--d-base) var(--ease);
}

.feature__icon svg { width: 26px; height: 26px; }

.feature__title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ink);
}

.feature__desc {
  margin-top: var(--s-2);
  font-size: var(--t-sm);
  color: var(--ink-2);
  line-height: 1.55;
  max-width: 40ch;
}

/* -- Premium two-up ---------------------------------------- */

.premium { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-5); }

@media (max-width: 900px) { .premium { grid-template-columns: 1fr; } }

.premium__card {
  position: relative;
  padding: var(--s-7) var(--s-6);
  border-radius: var(--r-lg);
  background: var(--stage);
  color: var(--stage-fg);
  border: 1px solid transparent;
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--d-base) var(--ease),
    box-shadow var(--d-base) var(--ease),
    border-color var(--d-base) var(--ease);
}

.premium__card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-2);
  border-color: var(--accent);
}

.premium__card::before {
  content: "";
  position: absolute;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  background: radial-gradient(circle at center, var(--accent), transparent 70%);
  opacity: 0.32;
  top: -55%;
  right: -25%;
  z-index: -1;
  transition: transform var(--d-slow) var(--ease);
}

.premium__card:hover::before { transform: translate(-40px, 40px) scale(1.1); }

.premium__card[data-spot]::after {
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%),
    oklch(1 0 0 / 0.10), transparent 60%);
}

.premium__icon {
  display: inline-flex;
  width: 52px;
  height: 52px;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: oklch(1 0 0 / 0.10);
  border: 1px solid oklch(1 0 0 / 0.16);
  color: var(--stage-fg);
  margin-bottom: var(--s-4);
  transition: transform var(--d-base) var(--ease);
}

.premium__icon svg { width: 24px; height: 24px; }
.premium__card:hover .premium__icon { transform: rotate(-4deg) translateY(-2px); }

.premium__title { font-size: 1.75rem; letter-spacing: -0.025em; color: var(--stage-fg); }
.premium__desc { margin-top: var(--s-4); color: oklch(1 0 0 / 0.78); font-size: var(--t-sm); max-width: 42ch; }

.premium__list { list-style: none; padding: 0; margin-top: var(--s-5); display: grid; gap: 12px; }

.premium__list li {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-size: var(--t-sm);
  color: oklch(1 0 0 / 0.88);
}

.premium__list svg { flex-shrink: 0; color: var(--accent); }

.premium__chip-row {
  margin-top: var(--s-5);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-3);
}

@media (min-width: 540px) { .premium__chip-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.premium__chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  background: oklch(1 0 0 / 0.06);
  border: 1px solid oklch(1 0 0 / 0.10);
  font-size: var(--t-xs);
  font-weight: 500;
  color: oklch(1 0 0 / 0.86);
  letter-spacing: 0.04em;
  transition: background-color var(--d-fast) var(--ease),
    border-color var(--d-fast) var(--ease),
    transform var(--d-fast) var(--ease);
}

.premium__chip:hover { background: oklch(1 0 0 / 0.12); border-color: oklch(1 0 0 / 0.22); transform: translateY(-2px); }

/* -- Marquee CTA band -------------------------------------- */

/* Deep obsidian band with a restrained accent aurora — reads premium in both
   themes (dark band on light page is an Apple staple), with a fixed light
   foreground so it never inherits the theme's dark accent-ink. */
.band {
  --band-fg: oklch(0.99 0.01 252);
  background:
    radial-gradient(90% 170% at 14% 0%, oklch(0.50 0.13 252 / 0.45), transparent 62%),
    radial-gradient(70% 140% at 88% 110%, oklch(0.46 0.09 195 / 0.25), transparent 62%),
    linear-gradient(180deg, oklch(0.185 0.018 260), oklch(0.140 0.012 260));
  color: var(--band-fg);
  padding-block: var(--s-7);
  position: relative;
  overflow: hidden;
}

/* Hairline top edge catches the light like a machined chamfer. */
.band::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, oklch(1 0 0 / 0.22) 50%, transparent);
}

.band__title { color: var(--band-fg); }

.band__row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-6); flex-wrap: wrap; }

.band__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  letter-spacing: -0.025em;
  max-width: 20ch;
}

.band__sub {
  margin-top: 8px;
  color: oklch(0.99 0.01 252 / 0.82);
  font-size: var(--t-sm);
  max-width: 52ch;
}

.band .btn--ghost { background: oklch(1 0 0 / 0.14); color: var(--band-fg); border-color: oklch(1 0 0 / 0.4); }
/* The hover fill is fixed near-white, so the text must be a fixed dark accent
   too — the theme's --accent is too light for it in dark mode (2.2:1). */
.band .btn--ghost:hover { background: oklch(1 0 0 / 0.96); color: oklch(0.46 0.22 252); border-color: oklch(1 0 0 / 0.96); }

.marquee {
  display: flex;
  gap: var(--s-7);
  margin-top: var(--s-5);
  font-size: var(--t-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: oklch(0.99 0.01 252 / 0.9);
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
}

.marquee__track { display: flex; gap: var(--s-7); animation: marquee 40s linear infinite; white-space: nowrap; }
.marquee__track > span::before { content: "◆"; margin-right: var(--s-3); color: oklch(0.99 0.01 252 / 0.5); }

@keyframes marquee { to { transform: translateX(-50%); } }

/* -- Technology section ------------------------------------ */

.tech { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: var(--s-8); align-items: center; }

@media (max-width: 900px) { .tech { grid-template-columns: 1fr; } }

.tech__list { list-style: none; padding: 0; display: grid; grid-template-rows: repeat(4, auto); gap: 0; border-top: 1px solid var(--border); }

.tech__item {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  gap: var(--s-4);
  align-items: center;
  padding-block: var(--s-5);
  border-bottom: 1px solid var(--border);
  position: relative;
  transition: padding-left var(--d-base) var(--ease);
}

.tech__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  background: var(--accent);
  transition: width var(--d-base) var(--ease);
}

.tech__item:hover { padding-left: var(--s-5); }
.tech__item:hover::before { width: 3px; }
.tech__item:hover .tech__chev { transform: translateX(6px); color: var(--accent); }

.tech__icon {
  display: inline-flex;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: var(--accent-soft);
  color: var(--accent);
  transition: transform var(--d-base) var(--ease),
    background-color var(--d-base) var(--ease),
    color var(--d-base) var(--ease);
}

.tech__icon svg { width: 22px; height: 22px; }

.tech__item:hover .tech__icon {
  background: var(--accent);
  color: var(--accent-ink);
  transform: translateY(-2px) rotate(-4deg);
}

.tech__h { font-family: var(--font-display); font-weight: 700; font-size: 1.125rem; color: var(--ink); }
.tech__sub { display: block; font-weight: 400; font-size: var(--t-sm); color: var(--ink-2); margin-top: 4px; max-width: 50ch; }
.tech__chev { color: var(--ink-3); transition: transform var(--d-base) var(--ease), color var(--d-base) var(--ease); }

.tech__visual {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface-2);
  border: 1px solid var(--border);
  height: clamp(360px, 42vw, 460px);
}

.tech__visual img { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform var(--d-slow) var(--ease); }
.tech__visual:hover img { transform: scale(1.04); }

.tech__visual-caption {
  position: absolute;
  left: var(--s-4);
  bottom: var(--s-4);
  right: var(--s-4);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: oklch(1 0 0 / 0.95);
  background: oklch(0 0 0 / 0.62);
  padding: 8px 12px;
  border-radius: var(--r-sm);
  backdrop-filter: blur(8px);
}

/* -- Pricing ----------------------------------------------- */

.pricing { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: var(--s-5); }

@media (max-width: 900px) { .pricing { grid-template-columns: 1fr; } }

.plan {
  position: relative;
  padding: var(--s-7) var(--s-6);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  display: flex;
  flex-direction: column;
  transition: transform var(--d-base) var(--ease),
    box-shadow var(--d-base) var(--ease),
    border-color var(--d-base) var(--ease);
}

.plan:hover { transform: translateY(-6px); border-color: var(--accent); box-shadow: var(--shadow-2); }

.plan--featured { background: var(--stage); color: var(--stage-fg); border-color: var(--stage); }
.plan--featured:hover { transform: translateY(-6px); border-color: var(--accent); box-shadow: var(--shadow-2); }

.plan--featured[data-spot]::after {
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%),
    oklch(1 0 0 / 0.10), transparent 60%);
}

.plan__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--border);
}

.plan--featured .plan__head { border-bottom-color: var(--stage-border); }

.plan__name { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; }
.plan--featured .plan__name { color: var(--stage-fg); }

.plan__tag {
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.plan--featured .plan__tag { color: oklch(1 0 0 / 0.62); }

.plan__price {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 3.25rem;
  letter-spacing: -0.03em;
  line-height: 1;
  margin-top: var(--s-5);
  font-variant-numeric: tabular-nums;
}

.plan__price-unit { font-family: var(--font-body); font-size: var(--t-sm); color: var(--ink-3); margin-left: 6px; letter-spacing: 0; font-weight: 500; }
.plan--featured .plan__price-unit { color: oklch(1 0 0 / 0.62); }

.plan__lede { margin-top: var(--s-3); color: var(--ink-2); font-size: var(--t-sm); }
.plan--featured .plan__lede { color: oklch(1 0 0 / 0.78); }

.plan__list { list-style: none; padding: 0; margin-top: var(--s-5); display: grid; gap: 10px; flex: 1; }

.plan__list li {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-size: var(--t-sm);
  color: var(--ink);
  padding-block: 2px;
  transition: transform var(--d-fast) var(--ease);
}

.plan__list li:hover { transform: translateX(4px); }
.plan--featured .plan__list li { color: oklch(1 0 0 / 0.92); }

.plan__check {
  display: inline-flex;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
}

.plan--featured .plan__check { background: oklch(1 0 0 / 0.12); color: var(--accent); }

.plan__cta { margin-top: var(--s-5); }
.plan__cta .btn { width: 100%; justify-content: center; }

.plan__badge {
  position: absolute;
  top: -10px;
  left: var(--s-6);
  padding: 4px 10px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: var(--r-pill);
  z-index: 2;
}

/* -- Footer ------------------------------------------------- */

.site-footer { padding-block: var(--s-9) var(--s-6); background: var(--stage); color: var(--stage-mute); }
.site-footer a { color: inherit; }

.site-footer__wordmark {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(3.5rem, 12vw, 9.5rem);
  letter-spacing: -0.055em;
  line-height: 0.9;
  color: oklch(1 0 0 / 0.94);
}

.site-footer__wordmark em { font-style: normal; color: var(--accent); }

.site-footer__cols {
  margin-top: var(--s-7);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-6);
  padding-top: var(--s-5);
  border-top: 1px solid oklch(1 0 0 / 0.14);
}

@media (max-width: 760px) { .site-footer__cols { grid-template-columns: repeat(2, 1fr); } }

.site-footer__col h3 {
  font-family: var(--font-body);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: oklch(1 0 0 / 0.58);
  margin-bottom: var(--s-4);
}

.site-footer__col ul { list-style: none; padding: 0; display: grid; gap: 10px; }
.site-footer__col a { font-size: var(--t-sm); transition: color var(--d-fast) var(--ease); }
.site-footer__col a:hover { color: var(--accent); }

.site-footer__bottom {
  margin-top: var(--s-7);
  padding-top: var(--s-4);
  border-top: 1px solid oklch(1 0 0 / 0.14);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-3);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.06em;
  color: oklch(1 0 0 / 0.55);
}

.socials { display: flex; gap: 12px; }

.socials .social {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: color-mix(in oklab, var(--brand, #fff) 16%, oklch(1 0 0 / 0.05));
  color: var(--brand, oklch(1 0 0 / 0.86));
  border: 1px solid color-mix(in oklab, var(--brand, #fff) 30%, transparent);
  transition: background-color var(--d-fast) var(--ease), color var(--d-fast) var(--ease),
    border-color var(--d-fast) var(--ease), transform var(--d-fast) var(--ease), box-shadow var(--d-fast) var(--ease);
}

.socials .social:hover {
  background: var(--brand, var(--accent));
  color: var(--brand-fg, #fff);
  border-color: var(--brand, var(--accent));
  transform: translateY(-2px);
  box-shadow: 0 8px 20px -6px color-mix(in oklab, var(--brand, var(--accent)) 70%, transparent);
}

/* -- Mobile menu ------------------------------------------- */

.menu-toggle {
  width: 42px;
  height: 42px;
  display: none;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink);
}

@media (max-width: 900px) {
  .glow-nav { display: none; }
}

@media (max-width: 760px) {
  .header-cta { display: none; }
  .menu-toggle { display: inline-flex; }
}

.mobile-menu {
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 95;
  padding-top: calc(var(--s-9) + 20px);
  padding-inline: clamp(20px, 5vw, 40px);
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  transform: translateY(-100%);
  transition: transform var(--d-base) var(--ease);
  /* Content taller than the viewport must never poke past the translated
     container — clip it, and let short screens scroll the menu instead. */
  overflow-y: auto;
}

.mobile-menu.is-open { transform: translateY(0); }

.mobile-menu a {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 8vw, 3rem);
  letter-spacing: -0.025em;
  color: var(--ink);
  position: relative;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 480ms var(--ease), transform 480ms var(--ease), color var(--d-fast) var(--ease);
}

.mobile-menu.is-open a { opacity: 1; transform: translateY(0); }

.mobile-menu a:nth-child(1) { transition-delay: 80ms; }
.mobile-menu a:nth-child(2) { transition-delay: 160ms; }
.mobile-menu a:nth-child(3) { transition-delay: 240ms; }
.mobile-menu a:nth-child(4) { transition-delay: 320ms; }
.mobile-menu a:nth-child(5) { transition-delay: 400ms; }

.mobile-menu a:hover { color: var(--accent); }

.mobile-menu__data {
  margin-top: auto;
  padding-block: var(--s-5);
  font-size: var(--t-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-3);
  display: flex;
  justify-content: space-between;
  border-top: 1px solid var(--border);
}

/* -- Scroll reveal (with soft blur) ------------------------ */

[data-reveal] {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}

[data-reveal].is-visible { opacity: 1; transform: none; }

[data-reveal-delay="1"] { transition-delay: 60ms; }
[data-reveal-delay="2"] { transition-delay: 120ms; }
[data-reveal-delay="3"] { transition-delay: 180ms; }
[data-reveal-delay="4"] { transition-delay: 240ms; }
[data-reveal-delay="5"] { transition-delay: 300ms; }
[data-reveal-delay="6"] { transition-delay: 360ms; }

.counter { font-variant-numeric: tabular-nums; }

/* -- Utility ----------------------------------------------- */

.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;
}

/* -- Reduced motion ---------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1; transform: none; filter: none; }
  .marquee__track { animation: none; }
  .vitals__ping::after, .beat { animation: none; }
}

/* -- Lenis smooth scroll (self-hosted) --------------------- */

html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-smooth iframe { pointer-events: none; }

@media (max-width: 760px) {
  /* fixed background attachment is janky on mobile */
  body { background-attachment: scroll; }
}

/* -- Bento feature grid (v5) ------------------------------- */

.bento {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: minmax(188px, auto);
  gap: var(--s-4);
}

@media (max-width: 900px) { .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .bento { grid-template-columns: 1fr; } }

.bento-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--s-6);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--d-base) var(--ease),
    box-shadow var(--d-base) var(--ease),
    border-color var(--d-base) var(--ease);
}

.bento-tile.is-lead { grid-column: span 2; grid-row: span 2; }
.bento-tile.is-wide { grid-column: span 2; }

@media (max-width: 900px) {
  /* At 2 columns the lead tile goes full-width but normal height (no tall gap). */
  .bento-tile.is-lead { grid-column: span 2; grid-row: span 1; }
}
@media (max-width: 560px) {
  .bento-tile.is-lead, .bento-tile.is-wide { grid-column: span 1; grid-row: auto; }
}

.bento-tile:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-2);
  border-color: var(--accent);
}

/* Gradient glow border that fades in on hover. */
.bento-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, var(--accent), oklch(0.72 0.16 205));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity var(--d-base) var(--ease);
  pointer-events: none;
  z-index: 2;
}

.bento-tile:hover::before { opacity: 1; }

.bento-tile > * { position: relative; z-index: 1; }

.bento-tile:hover .feature__icon {
  transform: translateY(-2px) rotate(-6deg) scale(1.05);
  box-shadow: 0 14px 30px -8px color-mix(in oklab, var(--accent) 70%, transparent);
}

.bento-tile.is-lead .feature__title { font-size: 1.6rem; }
.bento-tile.is-lead .feature__desc { max-width: 46ch; }

/* Live mini-ECG inside the lead tile. */
.bento-spark {
  margin-top: auto;
  height: clamp(110px, 22vh, 180px);
  border-radius: 10px;
  overflow: hidden;
  background: color-mix(in oklab, var(--accent) 8%, transparent);
  border: 1px solid color-mix(in oklab, var(--accent) 16%, transparent);
}

.bento-spark svg {
  width: 100%;
  height: 100%;
  display: block;
  -webkit-mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.bento-spark .ecg-g {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 3px color-mix(in oklab, var(--accent) 55%, transparent));
}

/* Accent CTA tile. */
.bento-tile--cta {
  background: var(--accent-soft);
  border-color: transparent;
  justify-content: center;
}

.bento-tile--cta .bento-cta-k {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  letter-spacing: -0.03em;
  color: var(--accent);
  line-height: 1;
}

.bento-tile--cta .bento-cta-sub {
  margin-top: 8px;
  font-size: var(--t-sm);
  color: var(--ink-2);
  max-width: 36ch;
}

.bento-tile--cta .bento-cta-link {
  margin-top: var(--s-4);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-sm);
  color: var(--ink);
}

.bento-tile--cta .bento-cta-link svg { transition: transform var(--d-base) var(--ease); }
.bento-tile--cta:hover .bento-cta-link svg { transform: translateX(4px); }

[data-theme="dark"] .bento-tile--cta { background: var(--accent-soft); }

/* -- Hero cinematic canvas + sensor callouts (v5) ---------- */

.hero__canvas {
  width: 100%;
  height: 100%;
  display: block;
  filter: drop-shadow(0 26px 36px oklch(0.18 0.04 254 / 0.10));
  transition: transform 160ms ease-out;
  transform-origin: center 58%;
  will-change: transform;
}

[data-theme="dark"] .hero__canvas {
  filter: drop-shadow(0 26px 40px oklch(0 0 0 / 0.45));
}

/* Exploded sensor labels around the device (Dandy-style). */
/* Leader-line annotation: a pill, a connector line, and a node that sits on
   the ring — so each label reads as wired to the ring, set out from it. */
.callout {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  z-index: 3;
  opacity: 0;
  white-space: nowrap;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-xs);
  letter-spacing: 0.01em;
  color: var(--ink-2);
}

/* Sensor-HUD pill: icon chip + technical label + live value on dark glass. */
.callout__pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 15px 8px 9px;
  border-radius: 14px;
  background: color-mix(in oklab, var(--surface) 76%, transparent);
  border: 1px solid color-mix(in oklab, var(--accent) 18%, var(--border));
  box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.07), var(--shadow-1);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  backdrop-filter: blur(14px) saturate(1.3);
  transition: transform var(--d-fast) var(--ease),
    border-color var(--d-fast) var(--ease),
    box-shadow var(--d-fast) var(--ease);
}

.callout:hover .callout__pill {
  transform: translateY(-2px);
  border-color: color-mix(in oklab, var(--accent) 48%, var(--border));
  box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.07), 0 10px 26px -10px var(--glow), var(--shadow-1);
}

.callout__ic {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  flex: 0 0 auto;
  background: color-mix(in oklab, var(--accent) 14%, transparent);
  border: 1px solid color-mix(in oklab, var(--accent) 26%, transparent);
  color: var(--accent);
}

.callout__ic svg { width: 16px; height: 16px; }

.callout__txt { display: flex; flex-direction: column; gap: 1px; }

.callout__k {
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.callout__v {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.98rem;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.callout__v i {
  font-style: normal;
  font-size: 0.72em;
  font-weight: 500;
  color: var(--ink-3);
  margin-left: 1px;
}

/* Leader line with a data pulse travelling toward the ring. */
.callout__line {
  position: relative;
  width: clamp(26px, 4.5vw, 60px);
  height: 1.5px;
  flex: 0 0 auto;
  background: linear-gradient(90deg, color-mix(in oklab, var(--accent) 20%, transparent), var(--accent));
  overflow: visible;
}

.callout__line::after {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 14px;
  height: 3.5px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--accent));
  filter: drop-shadow(0 0 5px var(--glow));
  animation: callout-packet 2.8s ease-in-out infinite;
}

@keyframes callout-packet {
  0% { transform: translateX(0); opacity: 0; }
  18% { opacity: 1; }
  82% { opacity: 1; }
  100% { transform: translateX(calc(clamp(26px, 4.5vw, 60px) - 14px)); opacity: 0; }
}

/* Reticle node on the ring: core dot, halo ring, heartbeat ping. */
.callout__node {
  position: relative;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: var(--accent);
  box-shadow: 0 0 10px var(--glow);
}

.callout__node::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1px solid color-mix(in oklab, var(--accent) 45%, transparent);
}

.callout__node::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--accent);
  animation: ping calc(var(--bpm-period) * 3) var(--ease) infinite;
}

/* Right-hand labels mirror: node — line — pill (node points left, to the ring). */
.callout--tr, .callout--r { flex-direction: row-reverse; }

.callout--tr .callout__line,
.callout--r .callout__line { background: linear-gradient(270deg, color-mix(in oklab, var(--accent) 20%, transparent), var(--accent)); }

/* Mirrored lines: the pulse travels right-to-left, still toward the ring. */
.callout--tr .callout__line::after,
.callout--r .callout__line::after {
  background: linear-gradient(270deg, transparent, var(--accent));
  animation-direction: reverse;
}

/* Nodes sit on the ring; pills set out beyond it. */
.callout--tl { top: 14%; right: 70%; }
.callout--l  { top: 60%; right: 72%; }
.callout--tr { top: 20%; left: 70%; }
.callout--r  { top: 64%; left: 72%; }

@media (prefers-reduced-motion: reduce) {
  .callout { opacity: 1; }
}

/* -- Hero responsive: collapse to stacked layout at the grid breakpoint --- */

@media (max-width: 900px) {
  .hero__visual { aspect-ratio: 16 / 10; min-height: 0; height: clamp(240px, 48vw, 360px); }
  .vitals { position: static; width: 100%; margin-top: var(--s-4); }
  .callout { display: none; }
  .hero__scroll { display: none; }
}

/* No scroll-driven reveal under reduced motion — show everything, hide cue. */
@media (prefers-reduced-motion: reduce) {
  .hero__scroll { display: none; }
  .hero__head-rise { transform: none !important; }
}

/* -- Accessibility: focus indicators, skip link, no-JS + focus reveals ---- */

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.premium__card :focus-visible,
.plan--featured :focus-visible,
.site-footer :focus-visible { outline-color: var(--stage-fg); }

.band :focus-visible { outline-color: oklch(0.99 0.01 252); }

.skip-link {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 200;
  padding: 10px 16px;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: var(--bg);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-sm);
  transform: translateY(-160%);
  transition: transform var(--d-fast) var(--ease);
}

.skip-link:focus { transform: translateY(0); outline: 2px solid var(--accent); outline-offset: 2px; }

/* Content is hidden for the reveal ONLY when JS is present — never strand it
   for no-JS/slow-JS, and reveal anything a keyboard focuses. */
html:not(.js) [data-reveal] { opacity: 1; transform: none; filter: none; }
[data-reveal]:focus-within { opacity: 1; transform: none; filter: none; }

/* Brighter accent for the small check icons on the deep-indigo stage cards. */
.premium__list svg,
.plan--featured .plan__check { color: oklch(0.74 0.16 252); }

/* -- Dotted-wave WebGL background (Three.js, lazy) --------- */

.dotted-surface {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.dotted-surface canvas { display: block; }

/* Icons on the camera-card metric chips. */
.premium__chip-ic {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  color: var(--accent);
  transition: transform var(--d-base) var(--ease);
}

[data-theme="dark"] .premium__chip-ic { color: oklch(0.78 0.15 252); }
.premium__chip:hover .premium__chip-ic { transform: scale(1.12); }

/* -- Load intro: branded logo loader ----------------------- */

.intro-curtain {
  position: fixed;
  inset: 0;
  z-index: 120;
  overflow: hidden;
  display: grid;
  place-items: center;
  background:
    radial-gradient(120% 80% at 50% 42%, color-mix(in oklab, var(--accent-soft) 66%, white), transparent 70%),
    linear-gradient(180deg, var(--surface), color-mix(in oklab, var(--accent-soft) 40%, var(--surface)));
}

[data-theme="dark"] .intro-curtain {
  background:
    radial-gradient(120% 80% at 50% 42%, color-mix(in oklab, var(--accent) 22%, var(--surface)), transparent 70%),
    linear-gradient(180deg, var(--bg), color-mix(in oklab, var(--accent) 10%, var(--bg)));
}

/* Never trap content: no-JS, reduced-motion, or after teardown. */
html:not(.js) .intro-curtain { display: none; }

@media (prefers-reduced-motion: reduce) { .intro-curtain { display: none; } }

html.intro-active { overflow: hidden; }

.loader-brand { display: flex; flex-direction: column; align-items: center; gap: 22px; will-change: transform, opacity; }

.loader-logo { position: relative; width: clamp(112px, 17vh, 156px); aspect-ratio: 1; display: grid; place-items: center; }

/* Progress ring that draws concentric with the brand mark. */
.loader-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.loader-ring__track { fill: none; stroke: color-mix(in oklab, var(--accent) 16%, transparent); stroke-width: 2.5; }
.loader-ring__arc {
  fill: none;
  stroke: var(--accent);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 351.9;
  stroke-dashoffset: 351.9;
  filter: drop-shadow(0 0 6px color-mix(in oklab, var(--accent) 55%, transparent));
}

.loader-logo__icon { width: 56%; height: auto; animation: loader-logo-pulse 2s ease-in-out infinite; }

@keyframes loader-logo-pulse {
  0%, 100% { transform: scale(0.96); opacity: 0.9; }
  50% { transform: scale(1.04); opacity: 1; }
}

.loader-word {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: 0.04em;
  font-size: clamp(1.3rem, 3.6vw, 1.7rem);
  color: var(--ink);
}

.loader-word em, .loader-word { color: var(--ink); }

/* Word masks for the rising-type reveal (each word rises from its own mask). */
.tr-line {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: 0.12em;
  margin-bottom: -0.12em;
}

.tr-inner { display: inline-block; will-change: transform; }

/* -- Liquid-glass button (CSS + SVG displacement) --------- */

.btn--glass {
  position: relative;
  isolation: isolate;
  background: color-mix(in oklab, var(--surface) 34%, transparent);
  color: var(--ink);
  border-color: transparent;
  -webkit-backdrop-filter: blur(2px) saturate(1.2);
  backdrop-filter: blur(2px) saturate(1.2);
}

/* Refraction of whatever sits behind the button (the dotted wave). */
.btn--glass::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  -webkit-backdrop-filter: url(#liquid-glass);
  backdrop-filter: url(#liquid-glass);
}

/* Glass bevel: layered inset highlights + soft drop. */
.btn--glass::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  box-shadow:
    0 0 6px rgba(0, 0, 0, 0.03),
    0 2px 6px rgba(0, 0, 0, 0.08),
    inset 3px 3px 0.5px -3px rgba(0, 0, 0, 0.9),
    inset -3px -3px 0.5px -3px rgba(0, 0, 0, 0.85),
    inset 1px 1px 1px -0.5px rgba(0, 0, 0, 0.6),
    inset -1px -1px 1px -0.5px rgba(0, 0, 0, 0.6),
    inset 0 0 6px 6px rgba(0, 0, 0, 0.12),
    inset 0 0 2px 2px rgba(0, 0, 0, 0.06),
    0 0 12px rgba(255, 255, 255, 0.18);
  transition: box-shadow var(--d-base) var(--ease);
}

[data-theme="dark"] .btn--glass {
  background: color-mix(in oklab, var(--surface) 30%, transparent);
  color: var(--stage-fg);
}

[data-theme="dark"] .btn--glass::after {
  box-shadow:
    0 0 8px rgba(0, 0, 0, 0.03),
    0 2px 6px rgba(0, 0, 0, 0.08),
    inset 3px 3px 0.5px -3.5px rgba(255, 255, 255, 0.09),
    inset -3px -3px 0.5px -3.5px rgba(255, 255, 255, 0.85),
    inset 1px 1px 1px -0.5px rgba(255, 255, 255, 0.6),
    inset -1px -1px 1px -0.5px rgba(255, 255, 255, 0.6),
    inset 0 0 6px 6px rgba(255, 255, 255, 0.12),
    inset 0 0 2px 2px rgba(255, 255, 255, 0.06),
    0 0 12px rgba(0, 0, 0, 0.18);
}

.btn--glass:hover { transform: translateY(-1px); filter: brightness(1.04); }
.btn--glass:active { transform: translateY(0) scale(0.99); filter: brightness(0.97); }

/* -- Premium product spotlight behind the hero ring ------- */

.hero__visual::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 46%;
  width: 76%;
  height: 76%;
  transform: translate(-50%, -50%);
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in oklab, var(--accent) 26%, transparent), transparent 68%);
  filter: blur(36px);
  pointer-events: none;
}

[data-theme="dark"] .hero__visual::before {
  background: radial-gradient(circle, color-mix(in oklab, var(--accent) 42%, transparent), transparent 66%);
}

/* The spotlight breathes with the same heartbeat that drives the ECG and
   the vitals ping — the whole hero shares one pulse. */
.hero__visual::before {
  opacity: 0.82;
  animation: hero-glow-beat calc(var(--bpm-period) * 2) var(--ease) infinite;
}

@keyframes hero-glow-beat {
  0%, 34%, 100% { opacity: 0.82; }
  12% { opacity: 1; }
}

/* -- Unfold: 3D dashboard reveal (scroll tilt/zoom) ------- */

.unfold__head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto var(--s-6);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-4);
}

.unfold__head .section-head__title { font-size: var(--t-2xl); line-height: 1.1; letter-spacing: -0.025em; }
.unfold__head .section-head__title em { font-style: normal; color: var(--accent); }

.unfold__stage { perspective: 1400px; }

.unfold__card {
  max-width: 1000px;
  margin: 0 auto;
  padding: 16px;
  background: var(--stage);
  border: 4px solid color-mix(in oklab, var(--stage-border) 64%, oklch(0.52 0.012 264));
  border-radius: 30px;
  box-shadow:
    0 9px 20px oklch(0 0 0 / 0.18),
    0 37px 37px oklch(0 0 0 / 0.14),
    0 84px 50px oklch(0 0 0 / 0.08),
    0 60px 70px -30px oklch(0.2 0.05 264 / 0.5);
  transform-style: preserve-3d;
  will-change: transform;
}

.dash {
  background: var(--surface);
  border-radius: 18px;
  padding: clamp(16px, 3vw, 28px);
  display: grid;
  gap: var(--s-5);
}

.dash__bar { display: flex; align-items: center; justify-content: space-between; }
.dash__brand { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 700; color: var(--ink); }
.dash__logo { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--accent); color: var(--accent-ink); font-size: 0.66rem; font-weight: 800; }
.dash__date { font-size: var(--t-sm); color: var(--ink-3); }

.dash__grid { display: grid; grid-template-columns: auto 1fr; gap: var(--s-5); align-items: center; }
@media (max-width: 560px) { .dash__grid { grid-template-columns: 1fr; justify-items: center; } }

.dash__score { position: relative; width: clamp(124px, 26vw, 168px); aspect-ratio: 1; }
.dash__ring { width: 100%; height: 100%; transform: rotate(-90deg); }
.dash__track { fill: none; stroke: var(--border); stroke-width: 9; }
.dash__prog {
  fill: none;
  stroke: var(--accent);
  stroke-width: 9;
  stroke-linecap: round;
  stroke-dasharray: 326.7;
  stroke-dashoffset: 39.2;
  filter: drop-shadow(0 0 6px var(--glow-soft));
}
.dash__score-txt { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; gap: 2px; }
.dash__score-num { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.9rem, 5vw, 2.7rem); color: var(--ink); line-height: 1; }
.dash__score-lbl { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-3); }

.dash__metrics { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); width: 100%; }
.dash__metric { display: flex; flex-direction: column; gap: 2px; padding: var(--s-3) var(--s-4); border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--border); }
.dash__m-k { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); }
.dash__m-v { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; color: var(--ink); }
.dash__m-v i { font-style: normal; font-size: 0.7em; color: var(--ink-3); }

.dash__sleep { border-top: 1px solid var(--border); padding-top: var(--s-4); }
.dash__sleep-head { display: flex; justify-content: space-between; font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); margin-bottom: 10px; }
.dash__bars { display: flex; align-items: flex-end; gap: 4px; height: 92px; }
.dash__bars span { flex: 1; height: var(--h); border-radius: 4px 4px 2px 2px; }
.dash__bars .s-deep { background: var(--accent); }
.dash__bars .s-light { background: color-mix(in oklab, var(--accent) 52%, var(--surface-2)); }
.dash__bars .s-rem { background: oklch(0.7 0.13 200); }
.dash__bars .s-awake { background: var(--border-strong); }

@media (max-width: 560px) { .unfold__card { border-radius: 22px; padding: 10px; } }

/* -- Vaporize cycling word -------------------------------- */

.vapor__wrap { display: flex; flex-direction: column; align-items: center; gap: var(--s-4); text-align: center; }
.vapor__stage { width: 100%; max-width: 820px; height: clamp(84px, 14vw, 168px); }
.vapor__canvas { width: 100%; height: 100%; display: block; }
.vapor__sub { color: var(--ink-2); font-size: var(--t-md); max-width: 46ch; }

/* -- Testimonials: draggable shuffle deck ----------------- */

.testi__wrap { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-8); align-items: center; }
@media (max-width: 860px) { .testi__wrap { grid-template-columns: 1fr; gap: var(--s-7); } }

.testi__intro { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-4); }
.testi__intro .section-head__title { text-align: left; font-size: var(--t-2xl); line-height: 1.08; letter-spacing: -0.025em; }
.testi__intro .section-head__title em { font-style: normal; color: var(--accent); }
.testi__intro .lead { text-align: left; }
@media (max-width: 860px) {
  .testi__intro { align-items: center; text-align: center; }
  .testi__intro .section-head__title, .testi__intro .lead { text-align: center; }
}

.testi__deck { position: relative; height: 430px; width: 330px; margin: 0 auto; touch-action: pan-y; }

.testi__card {
  position: absolute;
  top: 0;
  left: 0;
  width: 330px;
  height: 430px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--s-4);
  padding: var(--s-6);
  background:
    radial-gradient(125% 95% at 100% 0%, color-mix(in oklab, var(--a, var(--accent)) 55%, var(--surface)), transparent 62%),
    linear-gradient(155deg, color-mix(in oklab, var(--a, var(--accent)) 34%, var(--surface)) 0%, color-mix(in oklab, var(--a, var(--accent)) 8%, var(--surface)) 82%);
  border: 1px solid color-mix(in oklab, var(--a, var(--accent)) 46%, var(--border));
  border-radius: 24px;
  box-shadow:
    0 28px 60px -26px color-mix(in oklab, var(--a, var(--accent)) 55%, transparent),
    var(--shadow-2);
  transform-origin: bottom center;
  overflow: hidden;
  will-change: transform;
  user-select: none;
  -webkit-user-select: none;
}

/* Coloured accent rail down the left edge. */
.testi__card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  background: linear-gradient(180deg, var(--a, var(--accent)), color-mix(in oklab, var(--a, var(--accent)) 45%, transparent));
}

/* Big decorative quotation glyph, tinted with the card hue. */
.testi__card::after {
  content: "\201C";
  position: absolute;
  top: -0.32em;
  right: 0.16em;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 11rem;
  line-height: 1;
  color: color-mix(in oklab, var(--a, var(--accent)) 30%, transparent);
  pointer-events: none;
  z-index: 0;
}

.testi__avatar {
  display: inline-grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: linear-gradient(145deg, color-mix(in oklab, var(--a, var(--accent)) 88%, white), var(--a, var(--accent)));
  color: #fff;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.02rem;
  box-shadow: 0 10px 22px -6px color-mix(in oklab, var(--a, var(--accent)) 70%, transparent);
  position: relative;
  z-index: 1;
  margin-top: auto;
}

.testi__quote { position: relative; z-index: 1; font-family: var(--font-display); font-weight: 600; font-size: 1.18rem; line-height: 1.42; letter-spacing: -0.01em; color: var(--ink); }
.testi__author { position: relative; z-index: 1; font-size: var(--t-sm); font-weight: 700; color: color-mix(in oklab, var(--a, var(--accent)) 70%, var(--ink)); }

@media (max-width: 380px) { .testi__deck, .testi__card { width: 290px; } }

/* -- How it works: horizontal pinned scroll --------------- */

.howto { position: relative; overflow: hidden; }
.howto__track { display: flex; width: max-content; }

.howto__panel {
  flex: 0 0 100vw;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding-inline: clamp(24px, 8vw, 120px);
}

.howto__inner {
  position: relative;
  width: 100%;
  max-width: 1160px;
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  gap: clamp(var(--s-6), 5vw, var(--s-8));
  align-items: center;
}

.howto__body { position: relative; z-index: 1; }

.howto__kicker {
  display: inline-block;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-press);
}

/* Giant outlined numeral — part of the editorial stack (kicker, numeral,
   title), in its own space so it never sits behind the copy. */
.howto__num {
  display: block;
  margin-top: var(--s-2);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(5.5rem, 11vw, 9.5rem);
  line-height: 0.85;
  letter-spacing: -0.05em;
  color: transparent;
  -webkit-text-stroke: 2px color-mix(in oklab, var(--accent) 45%, transparent);
  pointer-events: none;
  user-select: none;
}

.howto__title { font-size: var(--t-2xl); margin-top: var(--s-4); letter-spacing: -0.025em; }
.howto__desc { margin-top: var(--s-4); color: var(--ink-2); font-size: var(--t-md); max-width: 46ch; line-height: 1.55; }

.howto__chips { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-5); }

/* Artwork sits on a glass stage tile instead of floating in space. */
.howto__art {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: min(100%, 470px);
  aspect-ratio: 1;
  margin-inline: auto;
  border-radius: var(--r-lg);
  background:
    radial-gradient(85% 75% at 50% 28%, color-mix(in oklab, var(--accent) 10%, transparent), transparent 70%),
    linear-gradient(180deg, color-mix(in oklab, var(--ink) 5%, var(--bg)), color-mix(in oklab, var(--ink) 2%, var(--bg)));
  border: 1px solid var(--border);
  box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.06), var(--shadow-1);
  overflow: hidden;
}

/* Faint dot-grid inside the stage — instrument-panel texture. */
.howto__art::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(color-mix(in oklab, var(--ink) 14%, transparent) 1px, transparent 1px);
  background-size: 24px 24px;
  opacity: 0.35;
  -webkit-mask: radial-gradient(90% 90% at 50% 50%, #000 30%, transparent 100%);
  mask: radial-gradient(90% 90% at 50% 50%, #000 30%, transparent 100%);
}

.howto__art svg {
  position: relative;
  width: clamp(200px, 24vw, 310px);
  height: auto;
  color: var(--accent);
  filter: drop-shadow(0 12px 30px var(--glow-soft));
}

/* Pinned progress rail — tells the user where the horizontal journey ends. */
.howto__progress {
  position: absolute;
  left: 50%;
  bottom: clamp(22px, 5vh, 46px);
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  align-items: center;
  gap: var(--s-4);
}

.howto__progress-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-sm);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.howto__progress-num i { font-style: normal; font-weight: 500; color: var(--ink-3); }

.howto__progress-bar {
  width: clamp(140px, 22vw, 260px);
  height: 2px;
  border-radius: 2px;
  background: color-mix(in oklab, var(--ink) 16%, transparent);
  overflow: hidden;
}

.howto__progress-bar span {
  display: block;
  height: 100%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--glow);
  transform: scaleX(var(--hp, 0));
  transform-origin: left;
}

.howto__progress-hint {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* No pin on mobile or under reduced motion — no rail either. */
@media (max-width: 900px) { .howto__progress { display: none; } }
@media (prefers-reduced-motion: reduce) { .howto__progress { display: none; } }

@media (max-width: 900px) {
  .howto__track { flex-direction: column; width: auto; }
  .howto__panel { flex: none; width: 100%; min-height: auto; padding-block: var(--s-8); }
  .howto__inner { grid-template-columns: 1fr; gap: var(--s-5); text-align: center; justify-items: center; }
  .howto__desc { margin-inline: auto; }
  .howto__art { order: -1; width: min(100%, 340px); }
  .howto__art svg { width: clamp(140px, 46vw, 220px); }
  .howto__num { font-size: 4rem; -webkit-text-stroke-width: 1.2px; }
  .howto__chips { justify-content: center; }
}

/* -- Film grain (v6) ---------------------------------------- */

/* Static fractal-noise overlay — the "shot on film" texture that separates a
   cinematic page from a flat one. Fixed, non-animated, pointer-transparent. */
.grain {
  position: fixed;
  inset: 0;
  z-index: 105;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

[data-theme="light"] .grain { opacity: 0.03; }

/* -- Materials chapter: full-bleed cinematic image (v6) ----- */

.materials {
  position: relative;
  border-top: 1px solid var(--border);
  background: oklch(0.105 0.008 260);
  overflow: hidden;
}

.materials__media {
  position: relative;
  margin: 0;
  height: clamp(560px, 104vh, 920px);
}

/* Image is oversized vertically so the scroll parallax never shows edges. */
.materials__media img {
  position: absolute;
  inset: -6% 0 auto 0;
  width: 100%;
  height: 112%;
  object-fit: cover;
  object-position: center;
  will-change: transform;
}

/* Scrim: the copy always reads, the image still breathes. */
.materials__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, oklch(0.105 0.008 260 / 0.62), transparent 26% 55%, oklch(0.105 0.008 260 / 0.90) 92%),
    radial-gradient(85% 65% at 20% 80%, oklch(0.08 0.008 260 / 0.55), transparent 62%);
}

.materials__copy {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding-bottom: clamp(36px, 6vh, 72px);
  color: oklch(0.97 0.004 250);
}

.materials__kicker {
  display: inline-block;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: oklch(0.78 0.06 252);
}

.materials__title {
  margin-top: var(--s-3);
  font-size: clamp(2.5rem, 6vw, 5.2rem);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 0.98;
  color: oklch(0.98 0.002 250);
  max-width: 14ch;
}

/* Machined-titanium gradient text with a slow specular sweep — the bright
   band glides across the letters like light over brushed metal. */
.materials__title em {
  font-style: normal;
  background-image: linear-gradient(100deg,
    oklch(0.93 0.004 250) 0%,
    oklch(0.60 0.010 252) 32%,
    oklch(0.99 0.002 250) 46%,
    oklch(0.95 0.004 250) 52%,
    oklch(0.58 0.010 252) 68%,
    oklch(0.90 0.004 250) 100%);
  background-size: 220% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* background-position on clipped text repaints on the main thread, so the
     sweep only runs once the chapter reveals, and only four times. */
  animation: ti-shimmer 7s ease-in-out 4;
  animation-play-state: paused;
}

.materials__copy .is-visible .materials__title em { animation-play-state: running; }

@keyframes ti-shimmer {
  0%, 55% { background-position: 100% 0; }
  100% { background-position: 0% 0; }
}

.materials__lede {
  margin-top: var(--s-4);
  max-width: 46ch;
  font-size: var(--t-md);
  line-height: 1.6;
  color: oklch(0.97 0.004 250 / 0.72);
}

.materials__specs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-5);
  margin-top: clamp(26px, 4.5vh, 44px);
  padding-top: var(--s-5);
  border-top: 1px solid oklch(1 0 0 / 0.16);
}

.spec { display: flex; flex-direction: column; gap: 4px; }

/* Specs cascade in one after another once the chapter copy reveals. */
.materials__specs .spec {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

.materials__copy [data-reveal].is-visible .spec,
.materials__copy [data-reveal]:focus-within .spec,
html:not(.js) .materials__specs .spec {
  opacity: 1;
  transform: none;
}

.materials__specs .spec:nth-child(2) { transition-delay: 90ms; }
.materials__specs .spec:nth-child(3) { transition-delay: 180ms; }
.materials__specs .spec:nth-child(4) { transition-delay: 270ms; }

.spec__num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.7rem, 3.2vw, 2.5rem);
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: oklch(0.98 0.002 250);
}

.spec__lbl {
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: oklch(0.97 0.004 250 / 0.55);
}

@media (max-width: 760px) {
  .materials__specs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .materials__media { height: clamp(620px, 110vh, 900px); }
  /* On narrow screens the copy rides higher over the image's bright LED
     area — start the bottom scrim ramp much earlier so the title always
     sits on a dark ground. */
  .materials__media::after {
    background:
      linear-gradient(180deg, oklch(0.105 0.008 260 / 0.62), transparent 24% 36%, oklch(0.105 0.008 260 / 0.92) 72%),
      radial-gradient(85% 65% at 20% 80%, oklch(0.08 0.008 260 / 0.55), transparent 62%);
  }
}

/* -- Statement: scroll-lit words (v6) ----------------------- */

.statement {
  padding-block: clamp(110px, 16vh, 190px);
  border-top: 1px solid var(--border);
}

.statement__text {
  margin-inline: auto;
  max-width: 21ch;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.95rem, 4.8vw, 4rem);
  line-height: 1.1;
  letter-spacing: -0.035em;
  color: var(--ink);
}

/* The payoff phrase carries an accent underline that draws itself in as the
   scrub completes (--u is animated by JS; 0% without JS keeps it clean). */
.statement__text em {
  font-style: normal;
  color: var(--accent);
  background-image: linear-gradient(90deg, var(--accent), var(--accent));
  background-repeat: no-repeat;
  background-size: var(--u, 0%) 0.06em;
  background-position: 0 96%;
}

/* JS splits into .st-w spans and scrubs opacity + rise; without JS the
   sentence simply reads at full strength. No will-change here — dozens of
   permanent tiny layers cost more than GSAP's own tween-time promotion. */
.statement__text .st-w { display: inline-block; }

/* Footer wordmark letters (split by JS) rise in on scroll. */
.site-footer__wordmark .fw-c { display: inline-block; }