:root {
  --bg: #05070a;
  --ink: #eef2f7;
  --muted: #8a93a3;
  --faint: #5b6474;
  --line: rgba(255, 255, 255, 0.08);
  --accent: #5ee0c4;
  --accent-dim: rgba(94, 224, 196, 0.14);
  --max: 1180px;
  --mono: "JetBrains Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
/* overflow-x clip on html avoids sideways scroll without turning body into a
   scroll container (which would break window scrolling + sticky pinning). */
html { scroll-behavior: smooth; overflow-x: clip; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-weight: 450;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.nav, main, footer { position: relative; z-index: 2; }

/* pinned scrollytelling hero: a tall track with a sticky full-viewport stage.
   Scroll progress through the track drives the 3D scene -> graph morph (hero.js). */
.hero {
  position: relative;
  height: 460vh; /* scroll length of the story; sticky stage holds one viewport */
}
.hero-stage {
  position: sticky;
  top: 0;
  height: 100dvh;
  overflow: hidden;
}
#scene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.vignette {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(120% 90% at 62% 34%, transparent 46%, rgba(5, 7, 10, 0.72) 100%),
    linear-gradient(90deg, rgba(5, 7, 10, 0.6) 0%, transparent 42%);
}
/* scene crossfade + snapshot flash overlays */
.scene-fade { position: absolute; inset: 0; z-index: 2; background: #05070a; opacity: 0; pointer-events: none; }
.snap-flash { position: absolute; inset: 0; z-index: 4; background: radial-gradient(circle at 60% 42%, rgba(94,224,196,0.5), rgba(210,255,246,0.18) 40%, transparent 72%); opacity: 0; pointer-events: none; }

/* time / day HUD */
.time-hud {
  position: absolute; top: 92px; left: 50%; transform: translateX(-50%); z-index: 3;
  font-family: var(--mono); display: flex; align-items: baseline; gap: 12px;
  opacity: 0; transition: opacity 0.4s;
}
.time-hud .scene-name { color: var(--muted); text-transform: uppercase; letter-spacing: 0.24em; font-size: 12px; }
.time-hud .sep { color: var(--faint); }
.time-hud .day { color: var(--accent); font-size: 13px; letter-spacing: 0.1em; }
.time-hud .clock { color: var(--ink); font-size: 13px; font-variant-numeric: tabular-nums; }
.time-hud .rec { color: #ff6b6b; font-size: 11px; letter-spacing: 0.12em; margin-left: 4px; }

/* graph node labels, positioned per-frame by hero.js */
#labels { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
#labels .nlabel {
  position: absolute;
  font-family: var(--mono);
  font-size: 12px;
  color: #b6c1cf;
  white-space: nowrap;
  transform: translate(-50%, -50%);
  opacity: 0;
  will-change: transform, opacity;
}
/* delta labels: a glowing chip so the change is impossible to miss */
#labels .nlabel.d {
  color: var(--accent); font-weight: 600;
  padding: 2px 8px; border-radius: 6px;
  background: rgba(94, 224, 196, 0.13); border: 1px solid rgba(94, 224, 196, 0.45);
  text-shadow: 0 0 8px rgba(94, 224, 196, 0.55);
}
#labels .nlabel.d.remove { color: #ff8f8f; background: rgba(255, 107, 107, 0.15); border-color: rgba(255, 107, 107, 0.55); text-shadow: 0 0 8px rgba(255, 107, 107, 0.55); }
#labels .nlabel.d.move { color: #ffd08a; background: rgba(255, 180, 84, 0.15); border-color: rgba(255, 180, 84, 0.55); text-shadow: 0 0 8px rgba(255, 180, 84, 0.55); }

/* hero copy overlays the stage, aligned to the page column */
.hero-ui {
  position: absolute;
  inset: 0;
  z-index: 3;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  pointer-events: none;
}
.hero-ui a { pointer-events: auto; }

/* stage caption during the morph */
.stage-cap {
  position: absolute;
  left: max(30px, calc(50vw - var(--max) / 2 + 30px));
  bottom: 46px;
  z-index: 3;
  font-family: var(--mono);
  opacity: 0;
  display: flex;
  align-items: baseline;
  gap: 14px;
}
.stage-cap .cap-k { color: var(--accent); font-size: 13px; letter-spacing: 0.1em; }
.stage-cap .cap-t { color: var(--ink); font-size: 15px; letter-spacing: 0.02em; }

/* nav */
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--max);
  margin: 0 auto;
  height: 68px;
  padding: 0 30px;
}
.brand {
  display: flex; align-items: center; gap: 10px;
  color: var(--ink); text-decoration: none;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 600; font-size: 19px; letter-spacing: -0.01em;
}
.mark path { stroke: var(--faint); stroke-width: 1.3; }
.mark circle { fill: var(--faint); }
.mark .node-hot { fill: var(--accent); }
.nav-cta {
  font-family: var(--mono);
  font-size: 12.5px; letter-spacing: 0.04em;
  color: var(--ink); text-decoration: none;
  border: 1px solid var(--line);
  padding: 9px 16px; border-radius: 8px;
  display: inline-flex; align-items: center; gap: 8px;
  transition: border-color 0.25s, background 0.25s;
}
.nav-cta:hover { border-color: var(--accent-dim); background: rgba(94, 224, 196, 0.05); }
.nav-cta .arrow { transition: transform 0.25s; }
.nav-cta:hover .arrow { transform: translateX(3px); }

/* type helpers */
main { max-width: var(--max); margin: 0 auto; padding: 0 30px; }
.label {
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.28em;
  font-size: 12px;
  color: var(--accent);
}
h1, h2, h3 {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 600; letter-spacing: -0.02em; line-height: 1.05;
}
.prose { color: var(--muted); max-width: 62ch; }
.prose p { font-size: 1.13rem; margin-bottom: 18px; }
.prose em { color: var(--ink); font-style: normal; }

/* buttons */
.btn {
  display: inline-block;
  background: var(--accent); color: #04120f;
  font-weight: 600; font-size: 15px;
  padding: 13px 24px; border-radius: 9px;
  text-decoration: none;
  transition: transform 0.15s, box-shadow 0.25s;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 14px 34px -14px var(--accent); }
.btn.ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.btn.ghost:hover { border-color: var(--accent); box-shadow: none; }
.btn.big { font-size: 1.1rem; padding: 16px 32px; }

/* hero copy: label top, split headline, statement + CTAs lower-left */
.hero-ui .label { margin-bottom: 26px; }
.hero-title {
  font-size: clamp(2.4rem, 6.6vw, 5.1rem);
  text-transform: uppercase;
  letter-spacing: -0.015em;
  margin-bottom: 34px;
}
.hero-title .ln { display: block; }
.hero-title .ln.r { color: var(--muted); }
.statement {
  color: var(--accent);
  font-size: clamp(1.05rem, 1.9vw, 1.35rem);
  max-width: 44ch; margin-bottom: 30px;
  line-height: 1.45;
}
.actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* section rhythm */
section.statement-block, section.process, section.why, section.contact {
  padding: 130px 0;
  border-top: 1px solid var(--line);
}
h2 { font-size: clamp(2rem, 4.4vw, 3.2rem); }
.statement-block { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.statement-block h2 { position: sticky; top: 120px; }

/* process — asymmetric numbered sequence, not equal cards */
.process h2 { margin-bottom: 70px; max-width: 16ch; }
.steps { list-style: none; }
.step {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 30px;
  padding: 42px 0;
  border-top: 1px solid var(--line);
  align-items: baseline;
}
.step:last-child { border-bottom: 1px solid var(--line); }
/* stagger the rows for asymmetry */
.step:nth-child(2) { padding-left: 6%; }
.step:nth-child(3) { padding-left: 12%; }
.idx {
  font-family: var(--mono);
  font-size: 1.05rem; color: var(--faint); letter-spacing: 0.1em;
}
.idx.accent { color: var(--accent); }
.step-body h3 { font-size: 1.7rem; margin-bottom: 12px; }
.step-body p { color: var(--muted); font-size: 1.1rem; max-width: 52ch; }

/* why — full-bleed editorial, centered composition (distinct layout family) */
.why { text-align: center; display: flex; flex-direction: column; align-items: center; }
.why h2 { margin-bottom: 34px; }
.why .prose { text-align: left; }

/* contact */
.contact { text-align: center; display: flex; flex-direction: column; align-items: center; }
.contact h2 { margin-bottom: 20px; }
.contact .sub { color: var(--muted); font-size: 1.15rem; margin-bottom: 34px; }

/* legal page */
.legal { max-width: 760px; margin: 0 auto; padding: 80px 30px 90px; }
.legal h1 { font-size: clamp(2rem, 5vw, 3rem); margin-bottom: 40px; }
.legal section { padding: 26px 0; border-top: 1px solid var(--line); }
.legal h2 { font-size: 1.5rem; margin-bottom: 16px; }
.legal .prose { margin-bottom: 14px; }
.legal a { color: var(--accent); text-decoration: none; }

/* footer */
footer {
  max-width: var(--max); margin: 0 auto;
  padding: 40px 30px 64px;
  border-top: 1px solid var(--line);
  color: var(--faint); font-family: var(--mono); font-size: 13px;
  display: flex; align-items: center; gap: 12px;
}
footer a { color: var(--faint); text-decoration: none; }
footer a:hover { color: var(--accent); }
.mid { opacity: 0.6; }

/* scroll-reveal (MOTION 7) — progressive enhancement: hidden only once JS opts in,
   so no-JS / IO-less browsers still show all content. */
.js-anim .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.js-anim .reveal.in { opacity: 1; transform: none; }

@media (max-width: 820px) {
  .statement-block { grid-template-columns: 1fr; }
  .statement-block h2 { position: static; }
  .step { grid-template-columns: 60px 1fr; gap: 18px; }
  .step:nth-child(2), .step:nth-child(3) { padding-left: 0; }
  section.statement-block, section.process, section.why, section.contact { padding: 90px 0; }
  .hero-foot { margin-top: 6vh; }
}

/* no scroll-story when motion is off or WebGL is missing: collapse the tall
   track to one screen so there is no dead scroll; hero.js renders a static frame */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero { height: 100dvh; }
}
.no-webgl .hero { height: 100dvh; }
.no-webgl #scene { display: none; }