/* ═══════════════════════════════════════════════════════
   dzyga.ua — WWDC / Apple keynote vibe
   Pure black canvas · big bold sans · centered slides
   Pinned scroll scenes · ambient glow
   ═══════════════════════════════════════════════════════ */

:root {
  --bg:        #000000;
  --ink:       #F5F5F7;
  --muted:     #86868B;
  --line:      rgba(255,255,255,0.10);
  --accent:    #FF453A;       /* Apple system red */
  --accent-2:  #0A84FF;       /* Apple system blue */
  --accent-3:  #15945A;       /* deep noble green */
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;
  --ease: cubic-bezier(.65,.05,.36,1);
  --ease-out: cubic-bezier(.2,.85,.2,1);
  --ease-emph: cubic-bezier(.16,1,.3,1);
  --pad-x: clamp(24px, 5vw, 64px);
}

* { margin:0; padding:0; box-sizing:border-box; }
*::selection { background: var(--accent); color: #fff; }

/* `clip` (not `hidden`) — prevents horizontal scroll WITHOUT establishing
   a new scroll container, so position: sticky descendants still work. */
html, body {
  overflow-x: clip;
  max-width: 100%;
}
html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  touch-action: pan-y;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.45;
  background: var(--bg);
  color: var(--ink);
  letter-spacing: -0.01em;
  position: relative;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; background:none; border:0; color: inherit; cursor: pointer; }
img, svg { display: block; max-width: 100%; }

/* ── Ambient orbs (subtle background glows) ────────── */
.ambient {
  position: fixed;
  top: 0; left: 0;
  width: 100vw;
  height: 100dvh; /* dynamic — covers viewport at any URL-bar state */
  max-width: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  contain: strict;
}
.ambient__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.18;
  will-change: transform;
  animation: float 22s var(--ease) infinite;
}
.ambient__orb--1 { width: 600px; height: 600px; background: var(--accent-2); top: -120px; left: -200px; }
.ambient__orb--2 { width: 500px; height: 500px; background: var(--accent-3); top: 40svh; right: -180px; animation-delay: -8s; animation-duration: 26s; }
.ambient__orb--3 { width: 700px; height: 700px; background: var(--accent); bottom: -200px; left: 30vw; animation-delay: -14s; animation-duration: 30s; opacity: 0.12; }
@keyframes float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%  { transform: translate(60px, -40px) scale(1.08); }
  66%  { transform: translate(-30px, 30px) scale(0.95); }
}
.grain {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.05;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  mix-blend-mode: overlay;
}

/* ── Loader ────────────────────────────────────────── */
.loader {
  position: fixed; inset: 0;
  background: #000;
  color: var(--ink);
  z-index: 9999;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 32px;
  transition: opacity .8s var(--ease) .2s, visibility 1.2s;
}
.loader.is-done { opacity: 0; visibility: hidden; }
.loader__brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: 0.02em;
  color: var(--ink);
  opacity: 0;
  animation: fadeUp 0.7s var(--ease-out) 0.1s forwards;
}
.loader__brand svg { animation: spin 14s linear infinite; }
.loader__count {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(48px, 8vw, 96px);
  letter-spacing: -0.04em;
  font-feature-settings: "tnum";
  opacity: 0;
  animation: fadeUp 0.7s var(--ease-out) 0.3s forwards;
}
.loader__count i { font-style: normal; color: var(--muted); }
.loader__bar {
  width: min(360px, 60vw); height: 1px;
  background: rgba(255,255,255,0.12);
  overflow: hidden;
  opacity: 0;
  animation: fadeUp 0.7s var(--ease-out) 0.5s forwards;
}
.loader__bar i {
  display: block; height: 100%;
  background: var(--ink);
  transform: scaleX(0); transform-origin: left;
  transition: transform 2s var(--ease-out);
}
.loader.is-active .loader__bar i { transform: scaleX(1); }
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Nav ───────────────────────────────────────────── */
.nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 100;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  /* Constant padding — never animates on scroll. Padding change at a
     scroll threshold causes perceived block-jumping on mobile. */
  padding: 14px var(--pad-x);
  background: rgba(0,0,0,0.55);
  backdrop-filter: saturate(140%) blur(20px);
  -webkit-backdrop-filter: saturate(140%) blur(20px);
  border-bottom: 1px solid transparent;
  transition: border-color .4s var(--ease);
}
.nav.is-scrolled { border-bottom-color: var(--line); }
.nav__logo {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.nav__logo svg {
  color: var(--accent);
  animation: spin 16s linear infinite;
}
.nav__menu {
  justify-self: center;
  display: flex; gap: clamp(20px, 3vw, 36px);
}
.nav__menu a {
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  padding: 6px 4px;
  position: relative;
  transition: color .3s var(--ease);
}
.nav__menu a::after {
  content: ""; position: absolute;
  left: 4px; right: 4px; bottom: 4px;
  height: 1px; background: var(--ink);
  transform: scaleX(0); transform-origin: left;
  transition: transform .4s var(--ease-out);
}
.nav__menu a:hover { color: var(--ink); }
.nav__menu a:hover::after { transform: scaleX(1); }

.nav__cta {
  justify-self: end;
  display: inline-flex; align-items: center;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--ink);
  color: #000;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.005em;
  transition: background .3s var(--ease), transform .3s var(--ease);
}
.nav__cta:hover { background: #fff; transform: translateY(-1px); }

@media (max-width: 860px) {
  .nav { grid-template-columns: 1fr auto; }
  .nav__menu { display: none; }
}

/* ── SLIDE — Apple keynote base ──────────────────── */
.slide {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  min-height: 100svh;
  padding: clamp(100px, 14svh, 160px) var(--pad-x) clamp(60px, 8svh, 96px);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  gap: clamp(20px, 3svh, 40px);
}
.slide--hero { padding-top: clamp(140px, 18svh, 220px); }

.slide__eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  display: inline-flex; align-items: center; gap: 10px;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
}
.slide__eyebrow i {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  animation: pulse 1.8s var(--ease) infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 0 rgba(255,69,58,0.55); }
  60% { opacity: 0.3; transform: scale(0.6); box-shadow: 0 0 0 12px rgba(255,69,58,0); }
}

.slide__title {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(36px, 4.4vw, 64px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  max-width: 20ch;
  background: linear-gradient(180deg, #FFFFFF 0%, #BDBDC2 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: blur(20px);
  opacity: 0;
  transform: translateY(40px) scale(1.03);
  transition: opacity 1.1s var(--ease-emph), transform 1.1s var(--ease-emph), filter 1.1s var(--ease-emph);
}
.slide__title em {
  font-style: normal;
  background: linear-gradient(180deg, #FF6A60 0%, #FF453A 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.slide__title .accent {
  background: linear-gradient(180deg, #FF6A60 0%, #FF453A 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.slide__title--xxl {
  font-weight: 800;
  font-size: clamp(48px, 7vw, 112px);
  line-height: 0.98;
  letter-spacing: -0.04em;
}
.slide__title > span,
.slide__title > br + span,
.slide__title > br,
.slide__title em {
  /* For multi-line title with spans (hero) */
}
.slide--hero .slide__title > span {
  display: block;
}

.slide__sub {
  max-width: 56ch;
  font-size: clamp(15px, 1.3vw, 19px);
  line-height: 1.5;
  color: var(--muted);
  letter-spacing: -0.005em;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .9s var(--ease-out) .3s, transform .9s var(--ease-out) .3s;
}

/* In-view reveal */
.slide.is-in .slide__eyebrow,
.slide.is-in .slide__sub { opacity: 1; transform: translateY(0); }
.slide.is-in .slide__title { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }

.slide__scroll {
  margin-top: clamp(40px, 6svh, 64px);
  display: inline-flex; flex-direction: column; align-items: center; gap: 10px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .9s var(--ease-out) .6s, transform .9s var(--ease-out) .6s;
}
.slide.is-in .slide__scroll { opacity: 1; transform: translateY(0); }
.slide__scroll i {
  display: inline-flex;
  width: 36px; height: 36px;
  border: 1px solid var(--line);
  border-radius: 50%;
  align-items: center; justify-content: center;
  color: var(--ink);
  font-size: 16px;
  animation: bounce 2s var(--ease) infinite;
}
.slide__scroll i::before { content: "↓"; }
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}

/* ── TICKER strip ─────────────────────────────────── */
.ticker {
  position: relative; z-index: 2;
  padding: 22px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  background: rgba(0,0,0,0.4);
  backdrop-filter: blur(20px);
  max-width: 100vw;
  width: 100%;
}
.ticker__track {
  display: inline-flex; gap: 24px; align-items: center;
  white-space: nowrap;
  font-family: var(--sans);
  font-weight: 600;
  font-size: clamp(20px, 2vw, 32px);
  letter-spacing: -0.02em;
  color: var(--ink);
  animation: scroll 38s linear infinite;
  padding-left: 24px;
}
.ticker__track i {
  color: var(--accent);
  font-style: normal;
  opacity: 0.8;
}
@keyframes scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.ticker:hover .ticker__track { animation-play-state: paused; }

/* ── PINNED metric scene ──────────────────────────── */
.pinned {
  position: relative;
  z-index: 2;
  /* svh = small viewport height — locked, doesn't pulse with iOS URL bar.
     This prevents the entire page below from jumping when the address bar
     hides/shows during scroll. */
  height: 300vh;
  height: 300svh;
}
.pinned__stage {
  position: sticky; top: 0;
  height: 100vh;
  height: 100svh;
  display: flex; align-items: center; justify-content: center;
  padding: var(--pad-x);
}
.metric-card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(720px, 92vw);
  padding: 0 16px;
  display: flex; flex-direction: column;
  align-items: center; text-align: center;
  gap: 28px;
  opacity: 0;
  transform: translate(-50%, calc(-50% + 40px)) scale(0.95);
  transition: opacity .9s var(--ease-emph), transform .9s var(--ease-emph), filter .9s var(--ease-emph);
  filter: blur(16px);
  pointer-events: none;
}
.metric-card.is-active {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  filter: blur(0);
  pointer-events: auto;
}
.metric-card__eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.metric-card__num {
  font-family: var(--sans);
  font-weight: 800;
  font-size: clamp(72px, 13vw, 200px);
  line-height: 0.9;
  letter-spacing: -0.045em;
  font-feature-settings: "tnum";
  background: linear-gradient(180deg, #FFFFFF 0%, #6E6E73 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  max-width: 100%;
  word-break: break-word;
}
.metric-card[data-metric="0"] .metric-card__num {
  background: linear-gradient(180deg, #FFE9A3 0%, #FF9F0A 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.metric-card[data-metric="1"] .metric-card__num {
  background: linear-gradient(180deg, #BFE2FF 0%, #0A84FF 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.metric-card[data-metric="2"] .metric-card__num {
  background: linear-gradient(180deg, #6FE5A6 0%, #0E6B40 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.metric-card__sub {
  max-width: 44ch;
  font-size: clamp(15px, 1.3vw, 19px);
  line-height: 1.5;
  color: var(--muted);
}
.pinned__dots {
  position: absolute;
  bottom: 60px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 12px;
  z-index: 3;
}
.pinned__dots i {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  transition: width .35s var(--ease-out), background .35s var(--ease);
}
.pinned__dots i.is-active {
  width: 24px; background: var(--ink);
  border-radius: 4px;
}

/* ── METERS — animated micro-viz grid ────────────── */
.slide--meters { justify-content: flex-start; padding-top: clamp(80px, 12svh, 140px); }
.slide--meters .slide__title { font-size: clamp(36px, 4.4vw, 64px); margin-bottom: 8px; }
.meters {
  width: 100%;
  max-width: 1280px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: clamp(28px, 4svh, 48px);
}
@media (min-width: 720px)  { .meters { grid-template-columns: 1fr 1fr; gap: 16px; } }
@media (min-width: 1100px) { .meters { grid-template-columns: repeat(3, 1fr); gap: 18px; } }

.meter {
  position: relative;
  display: flex; flex-direction: column;
  gap: 16px;
  padding: 22px;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.015) 100%);
  border: 1px solid rgba(255,255,255,0.08);
  overflow: hidden;
  text-align: left;
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out), border-color .35s var(--ease), background .35s var(--ease);
  min-height: 280px;
}
.meter.is-in { opacity: 1; transform: translateY(0); }
.meter:hover { border-color: rgba(255,255,255,0.22); background: linear-gradient(180deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.02) 100%); }

.meter__viz {
  width: 100%;
  height: 130px;
  border-radius: 14px;
  background: radial-gradient(80% 100% at 50% 0%, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.01) 100%);
  border: 1px solid rgba(255,255,255,0.06);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  position: relative;
}
.meter__viz svg { width: 100%; height: 100%; }
.meter__head { display: flex; flex-direction: column; gap: 8px; }
.meter__idx {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--accent);
}
.meter h4 {
  font-weight: 600;
  font-size: clamp(18px, 1.6vw, 22px);
  letter-spacing: -0.015em;
  color: var(--ink);
}
.meter p {
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
}

/* Shared viz captions */
.viz-cap {
  fill: var(--muted);
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-anchor: middle;
  opacity: 0;
  transition: opacity .6s var(--ease-out) 0.9s;
}
.meter.is-in .viz-cap { opacity: 1; }

/* 01 — Funnel bars */
.funnel .bar {
  fill: rgba(255,69,58,0.7);
  transform-origin: bottom center;
  transform-box: fill-box;
  transform: scaleY(0);
  transition: transform 1s var(--ease-emph);
}
.funnel .bar:nth-child(1) { fill: #FF6A60; }
.funnel .bar:nth-child(2) { fill: #FF5A4F; }
.funnel .bar:nth-child(3) { fill: #FF4A40; }
.funnel .bar:nth-child(4) { fill: #E83A30; }
.funnel .bar:nth-child(5) { fill: #B82A22; }
.meter--funnel.is-in .funnel .bar { transform: scaleY(1); }
.meter--funnel.is-in .funnel .bar:nth-child(1) { transition-delay: 0.10s; }
.meter--funnel.is-in .funnel .bar:nth-child(2) { transition-delay: 0.20s; }
.meter--funnel.is-in .funnel .bar:nth-child(3) { transition-delay: 0.30s; }
.meter--funnel.is-in .funnel .bar:nth-child(4) { transition-delay: 0.40s; }
.meter--funnel.is-in .funnel .bar:nth-child(5) { transition-delay: 0.50s; }

/* 02 — Venn */
.venn-a, .venn-b {
  fill: rgba(10,132,255,0.20);
  stroke: var(--accent-2);
  stroke-width: 1.4;
  transform-origin: center;
  transform-box: fill-box;
  opacity: 0;
  transform: scale(0.5);
  transition: opacity .8s var(--ease-emph), transform .8s var(--ease-emph);
}
.venn-b {
  fill: rgba(255,69,58,0.20);
  stroke: var(--accent);
  mix-blend-mode: screen;
}
.meter--venn.is-in .venn-a { opacity: 1; transform: scale(1); transition-delay: 0.15s; }
.meter--venn.is-in .venn-b { opacity: 1; transform: scale(1); transition-delay: 0.35s; }
.venn-lbl {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.06em;
  fill: var(--ink);
  text-anchor: middle;
  opacity: 0;
  transition: opacity .6s var(--ease-out) 0.7s;
}
.meter--venn.is-in .venn-lbl { opacity: 0.85; }

/* 03 — Sparkline */
.spark-line {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 800;
  stroke-dashoffset: 800;
  transition: stroke-dashoffset 1.4s var(--ease-out) 0.2s;
}
.spark-fill {
  opacity: 0;
  transition: opacity 1s var(--ease-out) 0.9s;
}
.spark-dot {
  fill: var(--accent);
  opacity: 0;
  transform-origin: center;
  transform-box: fill-box;
  transform: scale(0);
  transition: opacity .4s var(--ease-out) 1.4s, transform .5s var(--ease-bounce, var(--ease-emph)) 1.4s;
  filter: drop-shadow(0 0 8px var(--accent));
}
.meter--spark.is-in .spark-line { stroke-dashoffset: 0; }
.meter--spark.is-in .spark-fill { opacity: 1; }
.meter--spark.is-in .spark-dot { opacity: 1; transform: scale(1); animation: blink 1.5s infinite 1.6s; }
@keyframes blink {
  0%, 100% { filter: drop-shadow(0 0 8px var(--accent)); }
  50% { filter: drop-shadow(0 0 18px var(--accent)); }
}

/* 04 — Cohort heatmap */
.heat .cell {
  fill: var(--accent-3);
  opacity: 0;
  transform: scale(0);
  transform-origin: center;
  transform-box: fill-box;
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-out);
}
.heat .cell[data-h="9"] { fill: #15945A; }
.heat .cell[data-h="8"] { fill: #15945A; opacity: 0.9; }
.heat .cell[data-h="7"] { fill: #15945A; opacity: 0.78; }
.heat .cell[data-h="6"] { fill: #15945A; opacity: 0.66; }
.heat .cell[data-h="5"] { fill: #15945A; opacity: 0.54; }
.heat .cell[data-h="4"] { fill: #15945A; opacity: 0.42; }
.heat .cell[data-h="3"] { fill: #15945A; opacity: 0.32; }
.heat .cell[data-h="2"] { fill: #15945A; opacity: 0.22; }
.heat .cell[data-h="1"] { fill: #15945A; opacity: 0.14; }
.meter--heat.is-in .heat .cell {
  opacity: var(--targetOpacity, 1);
  transform: scale(1);
}
/* Stagger by index — handled in JS for cleanness; CSS fallback delays */
.meter--heat.is-in .heat .cell:nth-child(8n+1) { transition-delay: 0.05s; }
.meter--heat.is-in .heat .cell:nth-child(8n+2) { transition-delay: 0.10s; }
.meter--heat.is-in .heat .cell:nth-child(8n+3) { transition-delay: 0.15s; }
.meter--heat.is-in .heat .cell:nth-child(8n+4) { transition-delay: 0.20s; }
.meter--heat.is-in .heat .cell:nth-child(8n+5) { transition-delay: 0.25s; }
.meter--heat.is-in .heat .cell:nth-child(8n+6) { transition-delay: 0.30s; }
.meter--heat.is-in .heat .cell:nth-child(8n+7) { transition-delay: 0.35s; }
.meter--heat.is-in .heat .cell:nth-child(8n+8) { transition-delay: 0.40s; }

/* 05 — Network nodes */
.net .edge {
  stroke: rgba(255,255,255,0.25);
  stroke-width: 1;
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  transition: stroke-dashoffset 1s var(--ease-out);
}
.net .node {
  fill: var(--ink);
  opacity: 0;
  transform: scale(0);
  transform-origin: center;
  transform-box: fill-box;
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-bounce, var(--ease-emph));
}
.net .node--c { fill: var(--accent); }
.net .node--g { fill: var(--accent-3); animation: nodePulse 2s infinite 1.5s; }
@keyframes nodePulse {
  0%, 100% { filter: drop-shadow(0 0 0 var(--accent-3)); }
  50% { filter: drop-shadow(0 0 12px var(--accent-3)); }
}
.meter--net.is-in .net .edge { stroke-dashoffset: 0; }
.meter--net.is-in .net .edge:nth-child(1) { transition-delay: 0.15s; }
.meter--net.is-in .net .edge:nth-child(2) { transition-delay: 0.25s; }
.meter--net.is-in .net .edge:nth-child(3) { transition-delay: 0.35s; }
.meter--net.is-in .net .edge:nth-child(4) { transition-delay: 0.45s; }
.meter--net.is-in .net .edge:nth-child(5) { transition-delay: 0.55s; }
.meter--net.is-in .net .edge:nth-child(6) { transition-delay: 0.65s; }
.meter--net.is-in .net .node { opacity: 1; transform: scale(1); }
.meter--net.is-in .net .node:nth-of-type(1) { transition-delay: 0.10s; }
.meter--net.is-in .net .node:nth-of-type(2) { transition-delay: 0.30s; }
.meter--net.is-in .net .node:nth-of-type(3) { transition-delay: 0.50s; }
.meter--net.is-in .net .node:nth-of-type(4) { transition-delay: 0.70s; }

/* 06 — Live dashboard mock */
.dash {
  width: 100%;
  height: 100%;
  padding: 12px 14px;
  display: flex; flex-direction: column;
  gap: 8px;
}
.dash__row {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.dash__chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 7px;
  border: 1px solid rgba(255,69,58,0.45);
  border-radius: 999px;
  color: var(--accent);
  font-size: 9px;
}
.dash__chip i {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent);
  animation: pulseDot 1.2s infinite;
}
@keyframes pulseDot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,69,58,0.7); }
  50%      { box-shadow: 0 0 0 6px rgba(255,69,58,0); }
}
.dash__ticker {
  font-size: 11px;
  color: var(--ink);
  font-feature-settings: "tnum";
}
.dash__bars {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 4px;
  align-items: end;
  padding: 4px 0;
}
.dash__bars i {
  display: block;
  width: 100%;
  height: var(--h);
  background: linear-gradient(180deg, var(--accent) 0%, rgba(255,69,58,0.2) 100%);
  border-radius: 3px;
  transform-origin: bottom;
  transform: scaleY(0);
  transition: transform .6s var(--ease-emph);
  animation: barWobble 3.5s ease-in-out infinite;
  animation-play-state: paused;
}
.meter--dash.is-in .dash__bars i {
  transform: scaleY(1);
  animation-play-state: running;
}
.meter--dash.is-in .dash__bars i:nth-child(1) { transition-delay: 0.10s; animation-delay: 0s; }
.meter--dash.is-in .dash__bars i:nth-child(2) { transition-delay: 0.15s; animation-delay: 0.3s; }
.meter--dash.is-in .dash__bars i:nth-child(3) { transition-delay: 0.20s; animation-delay: 0.6s; }
.meter--dash.is-in .dash__bars i:nth-child(4) { transition-delay: 0.25s; animation-delay: 0.9s; }
.meter--dash.is-in .dash__bars i:nth-child(5) { transition-delay: 0.30s; animation-delay: 1.2s; }
.meter--dash.is-in .dash__bars i:nth-child(6) { transition-delay: 0.35s; animation-delay: 1.5s; }
.meter--dash.is-in .dash__bars i:nth-child(7) { transition-delay: 0.40s; animation-delay: 1.8s; }
.meter--dash.is-in .dash__bars i:nth-child(8) { transition-delay: 0.45s; animation-delay: 2.1s; }
@keyframes barWobble {
  0%, 100% { transform: scaleY(1); }
  50%      { transform: scaleY(calc(var(--h, 50%) === '50%' ? 0.6 : 0.7)); }
}
.dash__lbl { color: var(--muted); }
.dash__num {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-feature-settings: "tnum";
}

/* ── TREE diagram (SVG) ───────────────────────────── */
.slide--diagram { padding-top: clamp(80px, 10svh, 120px); }
.tree {
  width: 100%;
  max-width: 980px;
  position: relative;
}
.tree__svg {
  width: 100%; height: auto;
  overflow: visible;
}

/* Desktop SVG vs Mobile cards switch */
.ht { display: none; }
@media (max-width: 760px) {
  .tree__svg { display: none; }
  .ht { display: block; width: 100%; }
}

/* ── HT — mobile hypothesis tree cards ────────── */
.ht__root { display: flex; justify-content: center; position: relative; padding-bottom: 28px; }
.ht__root::after {
  content: ""; position: absolute;
  bottom: 0; left: 50%;
  width: 1px; height: 28px;
  background: linear-gradient(to bottom, var(--accent) 0%, rgba(255,69,58,0.15) 100%);
  transform-origin: top;
  transform: scaleY(0);
  transition: transform .7s var(--ease-out) 0.3s;
}
.slide--diagram.is-in .ht__root::after { transform: scaleY(1); }

.ht__rootCard {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 14px 24px;
  border: 1px solid var(--accent);
  background: rgba(255,69,58,0.15);
  border-radius: 999px;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.015em;
  opacity: 0;
  transform: translateY(-12px) scale(0.92);
  transition: opacity .8s var(--ease-out), transform .9s var(--ease-bounce, var(--ease-emph));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.slide--diagram.is-in .ht__rootCard { opacity: 1; transform: translateY(0) scale(1); }
.slide--diagram.is-in .ht__rootCard {
  animation: rootGlow 2.6s ease-in-out infinite 1.8s;
}
.ht__rootDot {
  display: inline-block;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent);
  animation: pulseDot 1.5s ease-in-out infinite;
}

.ht__divider {
  display: flex; align-items: center; justify-content: center;
  gap: 12px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 28px;
  opacity: 0;
  transition: opacity .6s var(--ease-out) 0.6s;
}
.slide--diagram.is-in .ht__divider { opacity: 1; }
.ht__divider i {
  width: 28px; height: 1px;
  background: rgba(255,255,255,0.18);
}

.ht__branches {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  position: relative;
}
/* Connector lines from divider into 2x2 */
.ht__branches::before {
  content: "";
  position: absolute;
  top: -28px; left: 25%; right: 25%;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.25) 50%, transparent 100%);
  transform: scaleX(0);
  transition: transform .8s var(--ease-out) 0.7s;
}
.slide--diagram.is-in .ht__branches::before { transform: scaleX(1); }

.ht__driver {
  position: relative;
  padding: 18px 14px 16px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.01) 100%);
  display: flex; flex-direction: column;
  gap: 10px;
  text-align: left;
  min-height: 132px;
  opacity: 0;
  transform: translateY(20px) scale(0.96);
  transition:
    opacity .7s var(--ease-emph) calc(var(--d, 0s) + 0.7s),
    transform .8s var(--ease-emph) calc(var(--d, 0s) + 0.7s),
    border-color .35s var(--ease),
    background .35s var(--ease);
}
.slide--diagram.is-in .ht__driver { opacity: 1; transform: translateY(0) scale(1); }
.ht__driver:hover {
  border-color: rgba(255,255,255,0.28);
  background: linear-gradient(180deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.02) 100%);
}
/* Vertical connector from divider to each card */
.ht__driver::before {
  content: "";
  position: absolute;
  top: -16px; left: 50%;
  width: 1px; height: 16px;
  background: rgba(255,255,255,0.18);
  transform-origin: top;
  transform: scaleY(0);
  transition: transform .5s var(--ease-out) 0.9s;
}
.slide--diagram.is-in .ht__driver::before { transform: scaleY(1); }
.ht__num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--accent);
}
.ht__title {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: var(--ink);
}
.ht__hypos {
  display: flex; gap: 6px;
  margin-top: auto;
}
.ht__hypo {
  flex: 1;
  display: inline-flex; align-items: center; justify-content: center;
  height: 32px;
  border-radius: 999px;
  border: 1px solid var(--accent-2);
  background: rgba(10,132,255,0.16);
  font-size: 12px;
  font-weight: 600;
  color: var(--accent-2);
  letter-spacing: 0.04em;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity .5s var(--ease-bounce, var(--ease-emph)) var(--hd, 0s),
              transform .5s var(--ease-bounce, var(--ease-emph)) var(--hd, 0s),
              background .25s var(--ease), color .25s var(--ease);
}
.slide--diagram.is-in .ht__hypo { opacity: 1; transform: scale(1); }
.ht__hypo:hover { background: rgba(10,132,255,0.32); color: #B7DCFF; }

.ht__cap {
  margin: 28px 0 0;
  text-align: center;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: 0;
  transition: opacity .8s var(--ease-out) 1.9s;
}
.slide--diagram.is-in .ht__cap { opacity: 1; }

/* Nodes & their text — use per-element --delay set by JS for stagger */
.tree__node rect, .tree__node circle {
  fill: rgba(255,255,255,0.06);
  stroke: rgba(255,255,255,0.30);
  stroke-width: 1;
  opacity: 0;
  transform-origin: center;
  transform: scale(0.6);
  transition:
    opacity .7s var(--ease-emph) var(--delay, 0s),
    transform .9s var(--ease-bounce, var(--ease-emph)) var(--delay, 0s),
    fill .3s var(--ease),
    stroke .3s var(--ease);
}
.tree__node text {
  fill: var(--ink);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  opacity: 0;
  transition: opacity .55s var(--ease-out) calc(var(--delay, 0s) + .15s);
}
.tree__node--root rect { fill: rgba(255,69,58,0.22); stroke: var(--accent); }
.tree__node--leaf circle { fill: rgba(10,132,255,0.18); stroke: var(--accent-2); }

/* Connector lines */
[data-tree-line] {
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
  transition: stroke-dashoffset 0.9s var(--ease-out) var(--delay, 0s);
}

/* Energy pulses (small dot travelling along the line) */
.tree__pulse {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 6 600;
  stroke-dashoffset: 0;
  opacity: 0;
  filter: drop-shadow(0 0 4px var(--accent));
  pointer-events: none;
}
.slide--diagram.is-in .tree__pulse {
  opacity: 0.95;
  animation: pulseFlow 2.6s linear infinite;
  animation-delay: var(--pulseDelay, 0s);
}
@keyframes pulseFlow {
  0%   { stroke-dashoffset:  20;  opacity: 0; }
  10%  { opacity: 0.95; }
  90%  { opacity: 0.95; }
  100% { stroke-dashoffset: -600; opacity: 0; }
}

/* Caption */
.tree__caption {
  fill: var(--muted);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity .8s var(--ease-out) var(--delay, 2.8s);
}

/* Build-in: trigger transitions on is-in */
.slide--diagram.is-in [data-tree-node] rect,
.slide--diagram.is-in [data-tree-node] circle { opacity: 1; transform: scale(1); }
.slide--diagram.is-in [data-tree-node] text { opacity: 1; }
.slide--diagram.is-in [data-tree-line] { stroke-dashoffset: 0; }
.slide--diagram.is-in .tree__caption { opacity: 1; }

/* After-build: subtle continuous life */
.slide--diagram.is-in .tree__node--root rect {
  animation: rootGlow 2.6s ease-in-out infinite;
  animation-delay: 2s;
}
@keyframes rootGlow {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(255,69,58,0)); }
  50%      { filter: drop-shadow(0 0 14px rgba(255,69,58,0.7)); }
}
.slide--diagram.is-in .tree__node--leaf circle {
  animation: leafBlink 4.5s ease-in-out infinite;
}
@keyframes leafBlink {
  0%, 100% { fill: rgba(10,132,255,0.18); stroke-opacity: 1; }
  50%      { fill: rgba(10,132,255,0.42); stroke-opacity: 1; }
}
/* Desync the 8 leaves */
.tree__node--leaf:nth-of-type(3n+1) circle { animation-delay: 2.6s; }
.tree__node--leaf:nth-of-type(3n+2) circle { animation-delay: 3.4s; }
.tree__node--leaf:nth-of-type(3n+3) circle { animation-delay: 4.2s; }

/* ── TIMELINE track ───────────────────────────────── */
.track {
  width: 100%;
  max-width: 1280px;
  position: relative;
}
.track__axis {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}
.track__axis::before {
  content: ""; position: absolute;
  left: 8%; right: 8%; top: 50%;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.4) 50%, transparent 100%);
  transform: translateY(-50%) scaleX(0);
  transform-origin: left;
  transition: transform 1.6s var(--ease-out);
}
.slide--diagram.is-in .track__axis::before { transform: translateY(-50%) scaleX(1); }
.track__axis i {
  display: block;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid rgba(255,255,255,0.4);
  margin: 0 auto;
  position: relative; z-index: 1;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-out), border-color .3s var(--ease), background .3s var(--ease);
}
.track__axis i:nth-child(1) { transition-delay: 0.2s; }
.track__axis i:nth-child(2) { transition-delay: 0.35s; }
.track__axis i:nth-child(3) { transition-delay: 0.5s; }
.track__axis i:nth-child(4) { transition-delay: 0.65s; }
.track__axis i:nth-child(5) { transition-delay: 0.8s; }
.track__axis i:nth-child(6) { transition-delay: 0.95s; background: var(--accent); border-color: var(--accent); box-shadow: 0 0 24px rgba(255,69,58,0.5); }
.slide--diagram.is-in .track__axis i { opacity: 1; transform: scale(1); }

.track__weeks {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
  text-align: left;
}
.track__week {
  padding: 20px 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255,255,255,0.03);
  display: flex; flex-direction: column;
  gap: 10px;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out), background .35s var(--ease), border-color .35s var(--ease);
}
.track__week:hover { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.2); }
.slide--diagram.is-in .track__week { opacity: 1; transform: translateY(0); }
.slide--diagram.is-in .track__week[data-week-step="0"] { transition-delay: 1.0s; }
.slide--diagram.is-in .track__week[data-week-step="1"] { transition-delay: 1.1s; }
.slide--diagram.is-in .track__week[data-week-step="2"] { transition-delay: 1.2s; }
.slide--diagram.is-in .track__week[data-week-step="3"] { transition-delay: 1.3s; }
.slide--diagram.is-in .track__week[data-week-step="4"] { transition-delay: 1.4s; }
.slide--diagram.is-in .track__week[data-week-step="5"] { transition-delay: 1.5s; }

.track__num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--accent);
}
.track__week h4 {
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.track__week p {
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
}
@media (max-width: 900px) {
  .track { display: none; }
}

/* ── VTRACK — mobile vertical timeline ─────────── */
.vtrack { display: none; }
@media (max-width: 900px) {
  .vtrack {
    display: block;
    list-style: none;
    position: relative;
    width: 100%;
    max-width: 520px;
    padding: 8px 0 8px 40px;
    text-align: left;
  }
}

/* The static rail */
.vtrack::before {
  content: "";
  position: absolute;
  left: 13px; top: 8px; bottom: 8px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg,
    rgba(255,255,255,0.06) 0%,
    rgba(255,255,255,0.18) 12%,
    rgba(255,255,255,0.18) 80%,
    rgba(255,69,58,0.65) 100%);
  transform-origin: top;
  transform: scaleY(0);
  transition: transform 1.4s var(--ease-out) 0.2s;
}
.slide--track.is-in .vtrack::before { transform: scaleY(1); }

/* Progress rail (orange overlay that fills as user scrolls) */
.vtrack::after {
  content: "";
  position: absolute;
  left: 13px; top: 8px;
  width: 2px;
  height: var(--progressH, 0px);
  border-radius: 2px;
  background: linear-gradient(180deg, var(--accent) 0%, rgba(255,69,58,0.4) 100%);
  box-shadow: 0 0 16px rgba(255,69,58,0.55);
  transition: height .25s var(--ease-out);
  z-index: 0;
}

.vtrack__step {
  position: relative;
  padding-bottom: 28px;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
}
.vtrack__step:last-child { padding-bottom: 0; }
.slide--track.is-in .vtrack__step { opacity: 1; transform: translateY(0); }
.slide--track.is-in .vtrack__step:nth-child(1) { transition-delay: 0.30s; }
.slide--track.is-in .vtrack__step:nth-child(2) { transition-delay: 0.45s; }
.slide--track.is-in .vtrack__step:nth-child(3) { transition-delay: 0.60s; }
.slide--track.is-in .vtrack__step:nth-child(4) { transition-delay: 0.75s; }
.slide--track.is-in .vtrack__step:nth-child(5) { transition-delay: 0.90s; }
.slide--track.is-in .vtrack__step:nth-child(6) { transition-delay: 1.05s; }

/* Node circle on the rail */
.vtrack__node {
  position: absolute;
  left: -32px;
  top: 6px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #0A0A0A;
  border: 1.5px solid rgba(255,255,255,0.35);
  z-index: 2;
  box-shadow: 0 0 0 3px #000;
  transition: background .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease), transform .35s var(--ease);
}
.vtrack__node::after {
  /* inner dot, appears on "passed" */
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0;
  transform: scale(0.3);
  transition: opacity .4s var(--ease), transform .4s var(--ease-bounce, var(--ease-emph));
}
.vtrack__step.is-passed .vtrack__node {
  border-color: var(--accent);
  background: #1A0606;
  box-shadow: 0 0 0 3px #000, 0 0 18px rgba(255,69,58,0.55);
}
.vtrack__step.is-passed .vtrack__node::after { opacity: 1; transform: scale(1); }
.vtrack__step.is-current .vtrack__node {
  transform: scale(1.18);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px #000, 0 0 26px rgba(255,69,58,0.85);
}
.vtrack__step--final .vtrack__node {
  width: 22px; height: 22px;
  left: -35px;
  top: 3px;
  background: rgba(255,69,58,0.18);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px #000, 0 0 24px rgba(255,69,58,0.7);
  animation: vtrackFinal 2.2s ease-in-out infinite;
}
.vtrack__step--final .vtrack__node::after { opacity: 1; transform: scale(1); }
@keyframes vtrackFinal {
  0%, 100% { box-shadow: 0 0 0 3px #000, 0 0 24px rgba(255,69,58,0.7); }
  50%      { box-shadow: 0 0 0 3px #000, 0 0 40px rgba(255,69,58,1); }
}

/* The week card */
.vtrack__card {
  padding: 16px 18px;
  border: 1px solid rgba(255,255,255,0.10);
  background: linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.01) 100%);
  border-radius: 16px;
  display: flex; flex-direction: column; gap: 6px;
  transition: border-color .35s var(--ease), background .35s var(--ease);
}
.vtrack__step.is-current .vtrack__card,
.vtrack__step.is-passed .vtrack__card {
  border-color: rgba(255,255,255,0.20);
}
.vtrack__card--final {
  border-color: rgba(255,69,58,0.35);
  background: linear-gradient(180deg, rgba(255,69,58,0.08) 0%, rgba(255,69,58,0.01) 100%);
}
.vtrack__head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 4px;
}
.vtrack__num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--accent);
}
.vtrack__chip {
  padding: 3px 8px;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--muted);
}
.vtrack__chip--accent {
  border-color: rgba(255,69,58,0.5);
  color: var(--accent);
  background: rgba(255,69,58,0.10);
}
.vtrack__card h4 {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.15;
  color: var(--ink);
}
.vtrack__card p {
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
}

/* ── PROOF ──────────────────────────────────────── */
.slide--proof { gap: clamp(40px, 6svh, 80px); }
.big-num {
  display: flex; flex-direction: column;
  align-items: center; gap: 16px;
}
.big-num__val {
  font-family: var(--sans);
  font-weight: 800;
  font-size: clamp(120px, 18vw, 280px);
  line-height: 0.88;
  letter-spacing: -0.05em;
  font-feature-settings: "tnum";
  background: linear-gradient(180deg, #FFFFFF 0%, #555 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-flex; align-items: baseline;
  max-width: 100%;
}
.big-num__val i {
  font-style: normal;
  font-size: 0.42em;
  background: linear-gradient(180deg, #FF6A60 0%, #FF453A 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.big-num__caption {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
  max-width: 50ch;
}
.proof-grid {
  width: 100%;
  max-width: 980px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 20px;
  overflow: hidden;
}
.proof-cell {
  background: rgba(0,0,0,0.6);
  padding: clamp(24px, 3vw, 40px) 20px;
  display: flex; flex-direction: column; gap: 14px;
  text-align: left;
  transition: background .35s var(--ease);
}
.proof-cell:hover { background: rgba(255,255,255,0.05); }
.proof-cell__num {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(36px, 5vw, 64px);
  letter-spacing: -0.04em;
  line-height: 0.95;
  font-feature-settings: "tnum";
}
.proof-cell__lbl {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
@media (max-width: 720px) {
  .proof-grid { grid-template-columns: 1fr 1fr; }
}

/* ── CTA ───────────────────────────────────────── */
.slide--cta { gap: clamp(30px, 5svh, 56px); }
.cta-mail {
  display: inline-flex; align-items: center; gap: 16px;
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(28px, 3.4vw, 56px);
  letter-spacing: -0.035em;
  color: var(--ink);
  padding: 18px 32px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  transition: background .35s var(--ease), transform .35s var(--ease), border-color .35s var(--ease);
}
.cta-mail:hover {
  background: var(--ink);
  color: #000;
  border-color: var(--ink);
  transform: translateY(-2px);
}
.cta-mail i {
  font-style: normal;
  font-size: 0.6em;
  transition: transform .35s var(--ease-out);
}
.cta-mail:hover i { transform: translate(4px, -4px); }

.cta-chips {
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: center;
}
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 13px;
  color: var(--ink);
  transition: background .3s var(--ease), border-color .3s var(--ease);
}
.chip em { font-style: normal; color: var(--muted); font-family: var(--mono); font-size: 12px; }
.chip:not(.chip--ghost):hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.3); }
.chip--ghost { color: var(--muted); cursor: default; }

/* ── FOOT ──────────────────────────────────────── */
.foot {
  position: relative;
  z-index: 2;
  padding: 80px var(--pad-x) 32px;
  border-top: 1px solid var(--line);
  background: #000;
}
.foot__big {
  font-family: var(--sans);
  font-weight: 800;
  font-size: clamp(80px, 16vw, 240px);
  line-height: 0.85;
  letter-spacing: -0.05em;
  background: linear-gradient(180deg, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.1) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-align: center;
  margin-bottom: 60px;
  user-select: none;
}
.foot__big i {
  font-style: normal;
  background: linear-gradient(180deg, #FF6A60 0%, #FF453A 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.foot__row {
  display: flex; justify-content: space-between;
  flex-wrap: wrap; gap: 16px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ── Progress bar ──────────────────────────────── */
.progress {
  position: fixed; top: 0; left: 0;
  width: 100%; height: 2px;
  z-index: 200;
  pointer-events: none;
}
.progress__bar {
  height: 100%;
  background: var(--accent);
  width: 0%;
  transition: width .1s linear;
}

/* ── Reduced motion ─────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .slide__title, .slide__eyebrow, .slide__sub, .slide__scroll,
  .metric-card, .tree__node rect, .tree__node circle, .tree__node text,
  .track__week, .track__axis i, .track__axis::before {
    filter: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ── Mobile refinements ─────────────────────────── */
@media (max-width: 640px) {
  :root { --pad-x: 20px; }
  .nav { padding: 12px var(--pad-x); }
  .nav__cta { padding: 7px 14px; font-size: 12px; }

  .slide { gap: 20px; padding-top: 100px; padding-bottom: 60px; }
  .slide__title--xxl { font-size: clamp(48px, 14vw, 92px); line-height: 1; letter-spacing: -0.04em; }
  .slide__sub { font-size: 15px; }

  .metric-card { padding: 0 8px; }
  .metric-card__num { font-size: clamp(68px, 22vw, 130px); letter-spacing: -0.055em; }

  .big-num__val { font-size: clamp(110px, 32vw, 200px); letter-spacing: -0.06em; }

  .cta-mail { font-size: clamp(22px, 7vw, 44px); padding: 14px 22px; flex-wrap: wrap; }

  .listing li { padding: 18px 8px; }

  .foot__big { font-size: clamp(72px, 26vw, 160px); }
}

@media (max-width: 380px) {
  .metric-card__num { font-size: 64px; }
  .slide__title--xxl { font-size: 44px; }
  .big-num__val { font-size: 100px; }
}