:root {
  --ink: #2A1D32;
  --night: #170F1C;
  --night-2: #21162A;
  --paper: #F6F5F7;
  --paper-2: #CFC8D6;
  --muted: #9A8FA3;
  --line: #3A2C45;
  --orange: #FF4000;
  --orange-soft: rgba(255, 64, 0, 0.16);
  --display: "Poppins", system-ui, sans-serif;
  --body: "Inter", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --ease: cubic-bezier(.2, .8, .2, 1);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--night); color: var(--paper); overflow: hidden; }
body { font: 400 clamp(15px, 1.25vw, 20px)/1.5 var(--body); -webkit-font-smoothing: antialiased; }
a { color: var(--orange); }
em { font-style: normal; color: var(--orange); }

/* terrain */
#terrain { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; }
#terrain .contour { fill: none; stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; transition: stroke 900ms var(--ease), opacity 900ms var(--ease); }
#terrain .contour.lit { stroke: #5A4466; }
#terrain .route-bg { fill: none; stroke: #3A2C45; stroke-width: 1.5; stroke-dasharray: 2 6; vector-effect: non-scaling-stroke; }
#terrain .route { fill: none; stroke: var(--orange); stroke-width: 2.2; stroke-linecap: round; vector-effect: non-scaling-stroke; transition: stroke-dashoffset 1400ms var(--ease); filter: drop-shadow(0 0 6px rgba(255, 64, 0, .55)); }
#terrain .wp { fill: var(--night); stroke: #5A4466; stroke-width: 1.5; vector-effect: non-scaling-stroke; transition: fill 600ms var(--ease), stroke 600ms var(--ease); }
#terrain .wp.done { fill: var(--orange); stroke: var(--orange); }
#terrain .summit { transform-box: fill-box; transform-origin: 50% 100%; transition: transform 900ms var(--ease), filter 900ms var(--ease); }
#terrain .summit.reached { transform: scale(1.35); filter: drop-shadow(0 0 18px rgba(255, 64, 0, .9)); }
.veil { position: fixed; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(23, 15, 28, .92) 0%, rgba(23, 15, 28, .8) 50%, rgba(23, 15, 28, .2) 80%); }

/* slides */
#deck { position: relative; z-index: 2; height: 100%; }
.slide { position: absolute; inset: 0; padding: clamp(28px, 6vh, 72px) clamp(20px, 6vw, 96px); display: flex; flex-direction: column; justify-content: center; gap: clamp(14px, 2.2vh, 28px); visibility: hidden; pointer-events: none; }
.slide.on { visibility: visible; pointer-events: auto; }
[data-a] { opacity: 0; transform: translateY(22px); filter: blur(6px); transition: opacity 700ms var(--ease), transform 900ms var(--ease), filter 700ms var(--ease); transition-delay: calc(var(--i, 0) * 120ms + 150ms); }
.slide.on [data-a] { opacity: 1; transform: none; filter: none; }
.slide.leaving [data-a] { opacity: 0; transform: translateY(-14px); filter: blur(4px); transition-duration: 350ms; transition-delay: 0ms; }

h1, h2, h3 { font-family: var(--display); margin: 0; letter-spacing: -0.02em; }
.hero { font-weight: 800; font-size: clamp(40px, 6.6vw, 112px); line-height: 0.98; max-width: 14ch; }
.hero .line { display: block; }
.hero .line + .line { margin-top: 0.12em; font-size: 0.62em; line-height: 1.08; max-width: 18ch; color: var(--paper-2); }
h2 { font-weight: 700; font-size: clamp(30px, 4.2vw, 68px); line-height: 1.04; max-width: 17ch; }
.logo svg { height: clamp(28px, 4.5vh, 48px); width: auto; color: var(--paper); display: block; }
.byline { color: var(--muted); font-family: var(--mono); font-size: 0.8em; margin: 0; }
.kicker { font-family: var(--mono); color: var(--orange); margin: 0; font-size: 0.82em; }
.body { color: var(--paper-2); max-width: 44ch; margin: 0; font-size: clamp(16px, 1.45vw, 23px); }
.body.wide { max-width: 64ch; }
.stat { margin: 6px 0 0; font-family: var(--mono); color: var(--paper); font-size: 0.9em; }
.stat .num { color: var(--orange); font-weight: 600; }

.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 80px); align-items: center; }
.split > div:first-child { display: grid; gap: clamp(12px, 2vh, 22px); }

/* list threads */
.threads { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; max-width: 62ch; }
.threads li { position: relative; padding: 12px 16px 12px 16px; border-left: 2px solid var(--orange); background: rgba(33, 22, 42, .78); color: var(--paper-2); font-size: clamp(15px, 1.3vw, 21px); }
.threads .tag { display: block; font-family: var(--mono); font-size: 0.7em; color: var(--orange); margin-bottom: 2px; }

/* race */
.viz { background: rgba(33, 22, 42, .94); border: 1px solid var(--line); border-radius: 2px; padding: clamp(16px, 2.5vw, 32px); }
.race { display: grid; gap: 16px; }
.lane { position: relative; height: 34px; border-bottom: 1px dashed var(--line); }
.lane b { position: absolute; left: 0; bottom: 6px; font: 500 0.72em var(--mono); color: var(--muted); }
.runner { position: absolute; bottom: -6px; width: 12px; height: 12px; border-radius: 50%; background: var(--paper-2); left: 20%; }
.slide.on .runner { animation: leap 7.2s var(--ease) infinite; }
.slide.on .r1 { animation-delay: 0s; }
.slide.on .r2 { animation-delay: -1.8s; }
.slide.on .r3 { animation-delay: -3.6s; }
.slide.on .r4 { animation-delay: -5.4s; }
@keyframes leap { 0% { left: 18%; background: var(--paper-2); } 22% { left: 92%; background: var(--orange); box-shadow: 0 0 14px var(--orange); } 34% { left: 92%; background: var(--orange); } 60% { left: 40%; background: var(--paper-2); box-shadow: none; } 100% { left: 18%; } }
.you { margin-top: 8px; font: 500 0.78em var(--mono); color: var(--muted); display: flex; gap: 10px; align-items: center; }
.you .pin { width: 12px; height: 12px; border: 2px solid var(--muted); border-radius: 50%; flex: none; }

/* sorter */
.sorter { display: grid; gap: 14px; position: relative; }
.post { font-family: var(--mono); font-size: 0.8em; padding: 12px 14px; border: 1px solid var(--line); background: var(--night); color: var(--paper); }
.post span { color: var(--muted); }
.beam { height: 2px; background: linear-gradient(90deg, transparent, var(--orange), transparent); transform-origin: left; transform: scaleX(0); }
.slide.on .beam { animation: beam 2.4s var(--ease) 900ms infinite; }
@keyframes beam { 0% { transform: scaleX(0); opacity: 1; } 40% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }
.bins { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bin { font: 500 0.76em var(--mono); color: var(--muted); padding: 10px; border: 1px solid var(--line); text-align: center; transition: all 400ms var(--ease); }
.slide.on .bin.hit { animation: hit 2.4s var(--ease) 1.5s infinite; }
@keyframes hit { 0%, 10% { color: var(--muted); border-color: var(--line); background: transparent; } 20%, 80% { color: #1B0F00; background: var(--orange); border-color: var(--orange); } 100% { color: var(--muted); background: transparent; border-color: var(--line); } }
.ms { position: absolute; right: 16px; top: -14px; font: 600 0.78em var(--mono); background: var(--orange); color: #1B0F00; padding: 3px 8px; border-radius: 2px; }

/* bars */
.bars { display: grid; gap: 18px; }
.bar { position: relative; display: grid; gap: 6px; }
.bar b { font: 500 0.8em var(--mono); color: var(--paper-2); }
.bar i { font-style: normal; font: 600 0.9em var(--mono); color: var(--paper); }
.fill { height: 18px; display: block; background: var(--paper-2); width: 0; transition: width 1400ms var(--ease) 700ms; }
.fill.f2 { background: var(--orange); }
.slide.on .fill.f1 { width: 100%; }
.slide.on .fill.f2 { width: 21%; transition-delay: 1300ms; }
.note { margin: 6px 0 0; color: var(--muted); font-size: 0.9em; }

/* fan */
.fan { display: grid; gap: 18px; justify-items: center; }
.hub { font: 600 0.85em var(--mono); background: var(--orange); color: #1B0F00; padding: 10px 16px; border-radius: 2px; }
.tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; width: 100%; }
.tile { font: 500 0.66em var(--mono); color: var(--muted); border: 1px solid var(--line); padding: 8px 6px; min-height: 64px; display: grid; gap: 3px; align-content: start; opacity: 0; transform: translateY(10px); transition: opacity 500ms var(--ease), transform 500ms var(--ease), border-color 400ms; }
.tile b { color: var(--paper-2); font-weight: 600; }
.tile .warn { color: var(--orange); }
.slide.on .tile { opacity: 1; transform: none; }
.tile.alarm { border-color: var(--orange); }

/* pillars */
.pillars { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.pillars article { background: rgba(33, 22, 42, .95); border-top: 2px solid var(--orange); padding: 16px; }
.pillars h3 { font-size: clamp(15px, 1.25vw, 21px); line-height: 1.2; margin-bottom: 8px; }
.pillars p { margin: 0; color: var(--paper-2); font-size: clamp(13px, 1vw, 16px); }

/* counters */
.counters { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; max-width: 1100px; }
.counters .big { font: 700 clamp(40px, 6vw, 96px)/1 var(--display); color: var(--orange); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.counters p { margin: 6px 0 0; color: var(--paper-2); font-size: 0.9em; max-width: 18ch; }

/* compare */
.compare { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; max-width: 1100px; }
.compare > div { padding: 18px; border: 1px solid var(--line); background: rgba(33, 22, 42, .95); }
.compare h3 { font-size: clamp(18px, 1.6vw, 26px); margin-bottom: 8px; color: var(--paper-2); }
.compare p { margin: 0; color: var(--muted); }
.compare .us { border-color: var(--orange); background: #2B1620; }
.compare .us h3 { color: var(--orange); }
.compare .us p { color: var(--paper); }
.tagline { font: 700 clamp(22px, 2.4vw, 40px)/1.15 var(--display); letter-spacing: -0.02em; margin: 8px 0 0; max-width: 30ch; }

/* close */
.closer { font-size: clamp(38px, 5.6vw, 96px); max-width: 14ch; }
.email { font: 600 clamp(26px, 3.4vw, 56px) var(--mono); margin: 0; }
.email a { color: var(--paper); text-decoration: none; border-bottom: 3px solid var(--orange); }
.fine { color: var(--muted); margin: 0; font-family: var(--mono); font-size: 0.85em; }

/* hud */
.hud { position: fixed; z-index: 3; right: clamp(16px, 3vw, 40px); bottom: clamp(14px, 3vh, 32px); display: flex; gap: 10px; align-items: center; font: 500 13px var(--mono); color: var(--muted); }
.hud button { font: inherit; background: transparent; color: var(--paper-2); border: 1px solid var(--line); width: 36px; height: 32px; border-radius: 2px; cursor: pointer; }
.hud button:hover { border-color: var(--orange); color: var(--orange); }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }

@media (max-width: 900px) {
  html, body { overflow: auto; }
  .split, .pillars, .counters, .compare { grid-template-columns: 1fr; }
  .slide { justify-content: flex-start; overflow-y: auto; padding-bottom: 88px; }
  .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .veil { background: rgba(23, 15, 28, .82); }
}
@media (prefers-reduced-motion: reduce) {
  [data-a], .fill, .tile, #terrain .route, #terrain .summit { transition: none !important; filter: none !important; }
  .runner, .beam, .bin.hit { animation: none !important; }
}