/* ============================================================
   CRITIX — The Living Run
   One page, one run, night to sunrise.
   Contrast law: every text block sits on a dark scrim or panel.
   No emojis, no icon fonts, no template visuals.
   ============================================================ */

* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --ink: #f2f7ff;          /* headline white           */
  --body: #c3d2ec;         /* body copy on dark        */
  --dim: #8fa3c8;          /* secondary labels         */
  --faint: #5d7096;        /* smallest print           */
  --blue: #3f8cff;
  --blue-deep: #1e5fe0;
  --blue-glow: rgba(64, 140, 255, 0.55);
  --panel: rgba(9, 14, 30, 0.78);
  --panel-edge: rgba(96, 148, 255, 0.22);
  --amber: #ffb066;
  --page: #04060f;
}

html { scroll-behavior: smooth; }
html, body { background: var(--page); }

body {
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  color: var(--body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection { background: rgba(63, 140, 255, 0.4); color: #ffffff; }

/* ---------- fixed world canvas ---------- */
#world {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
}
#vignette {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 120% 90% at 50% 45%, rgba(0, 0, 0, 0) 55%, rgba(2, 3, 8, 0.55) 100%);
}
body.no-webgl #world { display: none; }
body.no-webgl {
  background: linear-gradient(180deg, #04060f 0%, #0a1128 60%, #1c1233 100%);
}

/* ---------- header ---------- */
#topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 30px;
  padding: 14px 30px;
  transition: background 0.35s ease, box-shadow 0.35s ease;
}
#topbar.solid {
  background: rgba(4, 7, 16, 0.82);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 rgba(96, 148, 255, 0.14);
}
#topbar .brand img { height: 64px; width: auto; display: block; }
#topbar nav { display: flex; gap: 24px; margin-left: auto; }
#topbar nav a {
  color: var(--dim);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  transition: color 0.2s ease;
}
#topbar nav a:hover, #topbar nav a:focus-visible { color: var(--ink); }
.top-cta {
  color: #ffffff;
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 700;
  padding: 9px 20px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--blue), var(--blue-deep));
  box-shadow: 0 0 18px rgba(52, 118, 255, 0.35);
  white-space: nowrap;
}
.top-cta:hover { filter: brightness(1.12); }

/* ---------- shared type ----------
   Display face: Rajdhani (embedded) — engineered, condensed, athletic.
   Headlines run UPPERCASE with open tracking, like race telemetry.   */
.kicker {
  font-family: 'Rajdhani', 'Bahnschrift', 'Segoe UI', sans-serif;
  font-size: 13px;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: #6fa5ff;
  font-weight: 600;
  margin-bottom: 16px;
}
h1 {
  font-family: 'Rajdhani', 'Bahnschrift', 'Segoe UI', sans-serif;
  font-size: clamp(46px, 5.4vw, 78px);
  line-height: 0.98;
  color: var(--ink);
  font-weight: 700;
  letter-spacing: 0.035em;
  text-transform: uppercase;
  margin-bottom: 20px;
}
h1 .glow { color: #58a6ff; text-shadow: 0 0 28px var(--blue-glow); }
h2 {
  font-family: 'Rajdhani', 'Bahnschrift', 'Segoe UI', sans-serif;
  font-size: clamp(30px, 3.4vw, 48px);
  line-height: 1.02;
  color: var(--ink);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
h2 .glow { color: #58a6ff; text-shadow: 0 0 24px var(--blue-glow); }
h3 {
  font-family: 'Rajdhani', 'Bahnschrift', 'Segoe UI', sans-serif;
  color: var(--ink); font-size: 22px; font-weight: 700;
  letter-spacing: 0.05em; text-transform: uppercase;
}
.sub {
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.6;
  max-width: 46ch;
}

/* ---------- hero ---------- */
main { position: relative; z-index: 2; }

.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 0 6.5vw;
  position: relative;
}
.hero-copy { max-width: 600px; }
.hero .cta-row { margin-top: 34px; display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }

.cta {
  display: inline-block;
  padding: 15px 36px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--blue), var(--blue-deep));
  color: #ffffff;
  font-weight: 700;
  font-size: 15.5px;
  text-decoration: none;
  box-shadow: 0 0 34px rgba(52, 118, 255, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transition: transform 0.2s ease, filter 0.2s ease;
}
.cta:hover { filter: brightness(1.1); transform: translateY(-1px); }
.cta.big { font-size: 18px; padding: 18px 48px; }
.cta-ghost {
  display: inline-block;
  padding: 14px 28px;
  border-radius: 999px;
  border: 1px solid rgba(130, 165, 220, 0.45);
  color: #cfe0ff;
  font-weight: 600;
  font-size: 14.5px;
  text-decoration: none;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.cta-ghost:hover { border-color: rgba(160, 195, 255, 0.85); color: #ffffff; }

/* the triathlon scroll cue: swim, ride, run light up in sequence —
   the page you are about to scroll through — then a soft chevron    */
.scroll-tri {
  position: absolute;
  bottom: 46px;
  left: 50%;
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-items: center;
  align-items: center;
  column-gap: 26px;
  row-gap: 11px;
  color: #9fc2f2;
}
.tri-ic { opacity: 0.42; line-height: 0; }
.tri-swim { animation: triPulse 3.3s ease-in-out infinite; }
.tri-bike { animation: triPulse 3.3s ease-in-out 1.1s infinite; }
.tri-run  { animation: triPulse 3.3s ease-in-out 2.2s infinite; }
@keyframes triPulse {
  0%, 30%, 100% { opacity: 0.28; filter: none; }
  12% { opacity: 1; color: #cfe6ff; filter: drop-shadow(0 0 7px rgba(110, 170, 255, 0.9)); }
}
.tri-chev {
  grid-column: 1 / -1;
  line-height: 0;
  animation: chevDrop 2.2s ease-in-out infinite;
}
@keyframes chevDrop {
  0%, 100% { transform: translateY(-3px); opacity: 0.25; }
  50% { transform: translateY(3px); opacity: 0.9; }
}

/* ---------- hero intro: the headline decodes itself in ---------- */
.js .hero .kicker, .js .hero .sub, .js .hero .cta-row, .js .scroll-tri { opacity: 0; }
body.hero-in .hero .kicker { animation: fadeUp 0.7s 0.1s ease both; }
body.hero-in .hero .sub { animation: fadeUp 0.8s 1.8s ease both; }
body.hero-in .hero .cta-row { animation: fadeUp 0.8s 2.1s ease both; }
body.hero-in .scroll-tri { animation: fadeUp 0.8s 2.55s ease both; }
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}
.hero h1 .ltr { opacity: 0; }
.hero h1 .ltr.scr {
  opacity: 1;
  color: #6f9fd8;
  filter: blur(2.5px);
  text-shadow: 0 0 14px rgba(90, 150, 255, 0.5);
}
.hero h1 .ltr.lock {
  opacity: 1;
  color: #d6ecff;
  text-shadow: 0 0 24px rgba(130, 195, 255, 0.95);
  transition: color 0.45s ease, text-shadow 0.6s ease, filter 0.3s ease;
}
.hero h1 .ltr.lock.set { color: inherit; text-shadow: inherit; filter: none; }
/* once decoded, SLEEPS keeps breathing */
.hero h1.h1-done .glow { animation: glowBreathe 3.6s ease-in-out infinite; }
@keyframes glowBreathe {
  0%, 100% { text-shadow: 0 0 22px rgba(70, 140, 255, 0.55); }
  50% { text-shadow: 0 0 42px rgba(96, 170, 255, 0.95); }
}
@media (prefers-reduced-motion: reduce) {
  .js .hero .kicker, .js .hero .sub, .js .hero .cta-row, .js .scroll-tri,
  .hero h1 .ltr { opacity: 1; animation: none; }
  .tri-ic, .tri-chev, .hero h1.h1-done .glow { animation: none; }
}
/* deterministic stills (?snap=): intro pre-completed */
body.hero-still .hero .kicker, body.hero-still .hero .sub,
body.hero-still .hero .cta-row, body.hero-still .scroll-tri {
  opacity: 1; animation: none;
}

/* ---------- cinematic runway + captions ---------- */
.runway { height: 220vh; }

.caption {
  position: fixed;
  left: 50%;
  top: 42%;
  transform: translate(-50%, -50%);
  z-index: 5;
  width: min(90vw, 720px);
  text-align: center;
  opacity: 0;
  pointer-events: none;
}
.caption p {
  display: inline-block;
  font-size: clamp(18px, 2vw, 26px);
  font-weight: 600;
  color: var(--ink);
  line-height: 1.5;
  padding: 10px 26px;
  border-radius: 14px;
  background: rgba(4, 7, 16, 0.55);
  backdrop-filter: blur(4px);
  letter-spacing: 0.01em;
}
.caption-alert p { color: #ffd9ae; text-shadow: 0 0 22px rgba(255, 150, 70, 0.35); }

/* ---------- sections + panels ---------- */
.panel-section {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 16vh 6.5vw;
  position: relative;
}
.panel-section.feature { min-height: 92vh; }

.panel {
  background: var(--panel);
  border: 1px solid var(--panel-edge);
  border-radius: 22px;
  padding: 40px 44px;
  max-width: 620px;
  backdrop-filter: blur(9px);
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(140, 180, 255, 0.10);
  will-change: transform;
}
.panel.wide { max-width: 900px; width: 100%; }
.panel p { line-height: 1.7; font-size: 16px; }
.panel p + p { margin-top: 12px; }

.section-head {
  max-width: 640px;
  margin-bottom: 34px;
  background: rgba(4, 7, 16, 0.6);
  border-radius: 16px;
  padding: 20px 26px;
  backdrop-filter: blur(5px);
}
.section-sub { color: var(--body); line-height: 1.65; font-size: 16.5px; }

/* alternate feature panels to the right so the athlete stays visible */
.panel-section.panel-right { align-items: flex-end; }

/* ---------- plan centerpiece ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.chip {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: #cfe2ff;
  border: 1px solid rgba(111, 165, 255, 0.4);
  background: rgba(24, 44, 92, 0.35);
  border-radius: 999px;
  padding: 8px 16px;
  box-shadow: 0 0 16px rgba(40, 90, 220, 0.14);
}
.plan-flow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 22px 0 18px;
}
.flow-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(111, 165, 255, 0), rgba(111, 165, 255, 0.5), rgba(111, 165, 255, 0));
}
.flow-note {
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #6fa5ff;
  font-weight: 700;
  white-space: nowrap;
}
.plan-viz {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  min-height: 112px;
  padding: 0 2px;
}
.pv-col { flex: 1; display: flex; align-items: flex-end; }
.pv-bar {
  display: block;
  width: 100%;
  height: var(--h, 40px);
  border-radius: 7px 7px 3px 3px;
}
body.js .pv-bar.reveal-target {
  opacity: 1;
  transform: scaleY(0);
  transform-origin: bottom;
}
body.js .pv-bar.reveal-target.in {
  opacity: 1;
  transform: scaleY(1);
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.pv-bar.base  { background: linear-gradient(180deg, #2f6cd8, #1c3f92); box-shadow: 0 0 14px rgba(47, 108, 216, 0.3); }
.pv-bar.build { background: linear-gradient(180deg, #3f8cff, #2456b8); box-shadow: 0 0 18px rgba(63, 140, 255, 0.35); }
.pv-bar.peak  { background: linear-gradient(180deg, #9fc8ff, #3f8cff); box-shadow: 0 0 24px rgba(140, 190, 255, 0.5); }
.pv-bar.taper { background: linear-gradient(180deg, #5f74ff, #37429a); box-shadow: 0 0 16px rgba(95, 116, 255, 0.3); }
.pv-race {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  padding: 0 4px;
}
.pv-flagpole {
  width: 2px;
  height: 96px;
  background: linear-gradient(180deg, #ffc37e, rgba(255, 176, 102, 0.15));
  box-shadow: 0 0 14px rgba(255, 170, 100, 0.55);
}
.pv-racelabel {
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #ffce9e;
  white-space: nowrap;
}
.pv-phases {
  display: flex;
  margin-top: 10px;
  padding-right: 54px;
}
.pv-phases span {
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--faint);
}
.pv-phases span:nth-child(1) { flex: 4; }
.pv-phases span:nth-child(2) { flex: 4; }
.pv-phases span:nth-child(3) { flex: 2; }
.pv-phases span:nth-child(4) { flex: 2; }
.pv-note { margin-top: 20px; color: var(--body); }

/* ---------- Alex ---------- */
#alex .panel { display: flex; gap: 34px; max-width: 760px; }
.panel-body { flex: 1; }

.avatar-slot {
  flex: 0 0 auto;
  width: 108px;
  height: 108px;
  border-radius: 50%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
}
.avatar-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px dashed rgba(111, 165, 255, 0.6);
  animation: spin 26s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.avatar-initial {
  font-size: 34px;
  font-weight: 800;
  color: #9cc4ff;
  text-shadow: 0 0 18px rgba(80, 150, 255, 0.6);
}
.avatar-note {
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
}
.avatar-slot.small { width: 88px; height: 88px; margin-bottom: 16px; }
.avatar-slot.small .avatar-initial { font-size: 24px; }

/* portrait framed to the face: the source images are 3/4 body
   shots, so the photo is enlarged inside the clipped circle     */
.avatar-slot.has-photo {
  overflow: hidden;
  border-radius: 50%;
  box-shadow: 0 0 26px rgba(63, 140, 255, 0.3);
}
.avatar-slot.has-photo .avatar-ring { z-index: 2; }
.avatar-photo {
  position: absolute;
  top: -12%;
  left: 50%;
  transform: translateX(-50%);
  width: 220%;
  height: 220%;
  object-fit: cover;
}

/* ---- coach portraits printed in light: the face assembles from
   particles (canvas), resolves into the real photo, then WATCHES
   the athlete run through the 3D street (slot tilt + photo pan set
   per frame from JS). fx-wait while particles fly, fx-on after.   */
.avatar-fx {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}
.avatar-slot.fx-wait .avatar-photo { opacity: 0; }
.avatar-slot.fx-on .avatar-photo { opacity: 1; transition: opacity 0.55s ease; }
.coach-card { position: relative; }
.panel { position: relative; }

@media (prefers-reduced-motion: reduce) {
  .avatar-slot.fx-wait .avatar-photo { opacity: 1; }
}

.chat { margin-top: 24px; display: flex; flex-direction: column; gap: 10px; }
.bubble {
  max-width: 92%;
  align-self: flex-start;
  background: rgba(24, 44, 92, 0.55);
  border: 1px solid rgba(96, 148, 255, 0.3);
  border-radius: 4px 16px 16px 16px;
  padding: 11px 16px;
  font-size: 14.5px;
  line-height: 1.55;
  color: #dbe7ff;
  box-shadow: 0 0 22px rgba(40, 90, 220, 0.16);
}
.bubble-you {
  align-self: flex-end;
  background: rgba(14, 20, 40, 0.7);
  border-color: rgba(130, 150, 190, 0.25);
  border-radius: 16px 4px 16px 16px;
  color: var(--body);
}
.bubble-who {
  display: block;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #6fa5ff;
  margin-bottom: 3px;
}
.bubble-you .bubble-who { color: var(--dim); }

.voice-slot {
  margin-top: 22px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  letter-spacing: 0.06em;
  color: var(--dim);
  border: 1px solid rgba(96, 148, 255, 0.25);
  border-radius: 999px;
  padding: 9px 18px;
}
.voice-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 12px var(--blue-glow);
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }

/* ---------- team ---------- */
.team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  width: 100%;
  max-width: 1100px;
}
.coach-card {
  background: var(--panel);
  border: 1px solid var(--panel-edge);
  border-radius: 18px;
  padding: 26px 22px;
  backdrop-filter: blur(9px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}
.coach-card .coach-role {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #6fa5ff;
  margin: 4px 0 10px;
}
.coach-card p { font-size: 14px; line-height: 1.6; color: var(--body); }

/* ---------- proof widget ---------- */
.controls {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  margin-bottom: 30px;
}
.control label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 10px;
  font-weight: 700;
}
.control output { color: var(--ink); font-size: 14px; letter-spacing: 0; text-transform: none; }

input[type="range"] {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  height: 4px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--blue) var(--fill, 50%), rgba(90, 120, 180, 0.3) var(--fill, 50%));
  outline: none;
  cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid var(--blue);
  box-shadow: 0 0 16px rgba(63, 140, 255, 0.65);
}
input[type="range"]::-moz-range-thumb {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid var(--blue);
  box-shadow: 0 0 16px rgba(63, 140, 255, 0.65);
}
input[type="range"]:focus-visible { box-shadow: 0 0 0 3px rgba(63, 140, 255, 0.35); }

.week {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 10px;
  align-items: end;
  min-height: 190px;
}
.day { display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; text-align: center; }
.day-bar {
  border-radius: 10px 10px 4px 4px;
  min-height: 8px;
  transition: height 0.55s cubic-bezier(0.22, 1, 0.36, 1), background 0.4s ease, box-shadow 0.4s ease;
  position: relative;
}
.day-bar.easy     { background: linear-gradient(180deg, #3f8cff, #2456b8); box-shadow: 0 0 18px rgba(63, 140, 255, 0.28); }
.day-bar.quality  { background: linear-gradient(180deg, #7fc0ff, #3f8cff); box-shadow: 0 0 24px rgba(110, 170, 255, 0.45); }
.day-bar.long     { background: linear-gradient(180deg, #5f74ff, #3742c8); box-shadow: 0 0 20px rgba(95, 116, 255, 0.35); }
.day-bar.rest     { background: rgba(80, 100, 150, 0.28); }
.day-bar.race     { background: linear-gradient(180deg, #ffc37e, #e07830); box-shadow: 0 0 24px rgba(255, 160, 80, 0.4); }
.day-type { font-size: 10.5px; letter-spacing: 0.04em; color: var(--body); min-height: 26px; line-height: 1.25; }
.day-name { font-size: 10px; letter-spacing: 0.18em; color: var(--faint); text-transform: uppercase; }

.coach-line {
  margin-top: 26px;
  padding: 13px 20px;
  border-left: 2px solid var(--blue);
  background: rgba(24, 44, 92, 0.4);
  border-radius: 0 12px 12px 0;
  color: #dbe7ff;
  font-size: 15px;
  line-height: 1.55;
  transition: opacity 0.3s ease;
}
.coach-line.flash { animation: lineflash 0.7s ease; }
@keyframes lineflash {
  0% { background: rgba(63, 140, 255, 0.35); }
  100% { background: rgba(24, 44, 92, 0.4); }
}

/* ---------- features ---------- */
.spec-row { display: flex; gap: 10px; margin-top: 22px; }
.spec-row span {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: #9cc4ff;
  border: 1px solid rgba(96, 148, 255, 0.35);
  border-radius: 8px;
  padding: 6px 14px;
}

.predict-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 24px;
}
.predict {
  border: 1px solid rgba(96, 148, 255, 0.28);
  border-radius: 14px;
  padding: 14px 10px;
  text-align: center;
  background: rgba(14, 24, 52, 0.5);
}
.p-dist { display: block; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--dim); margin-bottom: 6px; }
.p-time { display: block; font-size: 20px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; text-shadow: 0 0 16px rgba(80, 150, 255, 0.35); }

.wave { width: 100%; max-width: 560px; height: 56px; margin-top: 22px; display: block; }

.badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #ffd9ae;
  border: 1px solid rgba(255, 176, 102, 0.45);
  border-radius: 999px;
  padding: 7px 16px;
  margin-bottom: 18px;
  background: rgba(60, 34, 8, 0.35);
}

/* ---------- finish ---------- */
.finish {
  min-height: 120vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20vh 6vw 10vh;
}
.finish-copy {
  background: rgba(10, 8, 22, 0.62);
  border: 1px solid rgba(255, 170, 110, 0.2);
  border-radius: 26px;
  padding: 54px 58px;
  backdrop-filter: blur(10px);
  box-shadow: 0 40px 110px rgba(0, 0, 0, 0.55);
  max-width: 720px;
}
.finish .kicker { color: #ffb066; }
.finish .sub { margin: 0 auto 30px; }
.finish .fine { margin-top: 18px; font-size: 13px; color: var(--dim); }

/* ---------- footer ---------- */
footer {
  position: relative;
  z-index: 2;
  /* fully opaque: at 0.92 the world's particles ghosted through it */
  background: #03050c;
  border-top: 1px solid rgba(96, 148, 255, 0.14);
  padding: 44px 6.5vw 96px;
  display: flex;
  align-items: center;
  gap: 34px;
  flex-wrap: wrap;
}
.foot-brand { display: flex; align-items: center; gap: 16px; }
.foot-brand img { height: 58px; }
.foot-brand p { font-size: 13px; color: var(--dim); letter-spacing: 0.06em; }
.foot-links { display: flex; gap: 22px; margin-left: auto; flex-wrap: wrap; }
.foot-links a {
  color: var(--dim);
  text-decoration: none;
  font-size: 13px;
}
.foot-links a:hover { color: var(--ink); }
.foot-small { width: 100%; font-size: 12px; color: var(--faint); }

/* ---------- ECG progress ---------- */
#ecg {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 56px;
  z-index: 30;
  pointer-events: none;
}

/* ---------- reveals ---------- */
.reveal, .reveal-stagger, .section-head, .panel { opacity: 1; }
body.js .reveal-target {
  opacity: 0;
  transform: translateY(34px);
}
body.js .reveal-target.in {
  opacity: 1;
  transform: none;
  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- responsive ---------- */
@media (max-width: 980px) {
  .team-grid { grid-template-columns: repeat(2, 1fr); }
  .predict-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px) {
  #topbar { padding: 10px 16px; gap: 14px; }
  #topbar .brand img { height: 50px; }
  #topbar nav { display: none; }
  .top-cta { margin-left: auto; font-size: 12.5px; padding: 8px 16px; }

  .hero {
    padding: 0 6vw 15vh;
    flex-direction: column;
    justify-content: flex-end;
    align-items: stretch;
  }
  .hero-copy { max-width: none; }
  .runway { height: 160vh; }
  /* the tri cue leaves the absolute bottom (it sat on the buttons) and
     docks under the copy in flow                                      */
  .scroll-tri {
    position: static;
    transform: none;
    margin: 30px auto 0;
    width: max-content;
  }
  .hero h1 { font-size: clamp(40px, 11.5vw, 52px); }

  .panel-section { padding: 12vh 5vw; }
  .panel { padding: 26px 22px; border-radius: 18px; backdrop-filter: none; background: rgba(7, 11, 24, 0.92); }
  .panel p { font-size: 14.5px; line-height: 1.6; }
  .panel-section.panel-right { align-items: flex-start; }

  /* phone stage layout: every scene section keeps its upper half
     as a clear window onto the world; the panel docks at the
     bottom and arrives only after the scene has played          */
  .panel-section.feature,
  #alex.panel-section,
  #plan.panel-section {
    min-height: 138vh;
    justify-content: flex-end;
    padding: 46vh 5vw 6vh;
  }
  .panel-section.feature .panel,
  #alex .panel,
  #plan .panel { width: 100%; }

  .bubble { font-size: 13px; padding: 9px 13px; }
  .chips { gap: 7px; }
  .chip { font-size: 12px; padding: 7px 12px; }
  .plan-viz { gap: 4px; min-height: 92px; }
  .pv-phases { padding-right: 40px; }

  #alex .panel { flex-direction: column; gap: 22px; }
  .team-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .coach-card { padding: 20px 16px; backdrop-filter: none; background: rgba(7, 11, 24, 0.9); }

  .controls { grid-template-columns: 1fr; gap: 20px; }
  .week { gap: 5px; min-height: 150px; }
  .day-type { font-size: 9px; }

  .finish-copy { padding: 36px 26px; }
  .foot-links { margin-left: 0; }

  #ecg { height: 44px; }
  .caption { top: 34%; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .tri-ic, .tri-chev, .avatar-ring, .voice-dot { animation: none; }
  body.js .reveal-target { opacity: 1; transform: none; }
  body.js .pv-bar.reveal-target { opacity: 1; transform: scaleY(1); }
  .day-bar { transition: none; }
}