/* ==========================================================================
   Prithviraj Chowdhury, GTM Engineer.
   Dark cosmic skin (Crystallize-class): deep plum base, emerald accent,
   floating pill nav, orbital hero. Vanilla CSS, no build step.
   ========================================================================== */

/* Self-hosted fonts, latin subsets, ~52KB total */
@font-face {
  font-family: "Geist";
  src: url("assets/fonts/geist-var-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("assets/fonts/geistmono-var-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg:        #1F1A38;   /* deep plum-navy */
  --bg-deep:   #171331;
  --panel:     #272147;
  --panel-2:   #2E2752;
  --text:      #F5F3FC;
  --muted:     #A9A3C7;
  --line:      rgba(245, 243, 252, 0.12);
  --line-soft: rgba(245, 243, 252, 0.07);
  --accent:    #34D399;   /* emerald, the one accent: verified states, CTA */
  --accent-deep: #10B981;
  --accent-ink: #06281C;  /* text on emerald */
  --reject:    #E2A18E;

  --font-sans: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "Cascadia Mono", monospace;

  --measure: 62ch;
  --max-w: 1200px;
  --radius: 14px;
  --radius-sm: 9px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);

  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4.5rem;
  --space-6: 8rem;
}

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

html { scroll-behavior: smooth; background: var(--bg); }

body {
  margin: 0;
  background:
    radial-gradient(1100px 600px at 78% -5%, rgba(52, 211, 153, 0.07), transparent 60%),
    radial-gradient(900px 700px at -10% 30%, rgba(120, 90, 220, 0.10), transparent 55%),
    var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip; /* the evidence table scrolls inside its own container, never the page */
}

h1, h2, h3 { line-height: 1.08; margin: 0; letter-spacing: -0.025em; }
p { margin: 0; }
a { color: inherit; }
em { font-style: italic; color: var(--accent); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

.skip-link {
  position: absolute; left: var(--space-2); top: -3rem;
  background: var(--accent); color: var(--accent-ink);
  padding: 0.5rem 1rem; border-radius: var(--radius-sm);
  z-index: 30; transition: top 150ms; font-weight: 600;
}
.skip-link:focus { top: var(--space-1); }

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

#nav-sentinel { position: absolute; top: 0; height: 1px; width: 1px; }

/* ===== CTA ===== */
.cta {
  display: inline-block;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.cta-primary {
  background: var(--accent);
  color: var(--accent-ink);
  padding: 0.85rem 1.7rem;
  border-radius: 999px;
  font-size: 1rem;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.3),
    0 8px 28px rgba(52, 211, 153, 0.28);
  transition:
    background-color 200ms var(--ease-standard),
    transform 200ms var(--ease-standard),
    box-shadow 200ms var(--ease-standard);
}
.cta-primary:hover {
  background: #4AE2AB;
  transform: translateY(-1px);
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.3),
    0 12px 36px rgba(52, 211, 153, 0.38);
}
.cta-primary:active { transform: translateY(0); }

/* ===== Floating pill navigation (Crystallize-style) ===== */
.site-nav {
  position: sticky;
  top: 0.9rem;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  max-width: var(--max-w);
  margin: 0.9rem auto 0;
  padding: 0.55rem 0.6rem 0.55rem 1.4rem;
  background: #FFFFFF;
  color: #17132B;
  border-radius: 999px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
  transition: box-shadow 260ms var(--ease-standard), transform 260ms var(--ease-standard);
}
.site-nav.scrolled { box-shadow: 0 14px 48px rgba(0, 0, 0, 0.5); }
.wordmark { font-weight: 650; letter-spacing: -0.015em; font-size: 1rem; white-space: nowrap; }
.site-nav nav { display: flex; align-items: center; gap: var(--space-3); }
.site-nav nav a { text-decoration: none; font-weight: 500; font-size: 0.95rem; }
.site-nav nav a:hover:not(.cta) { color: var(--accent-deep); }
.site-nav .cta-nav {
  background: var(--accent);
  color: var(--accent-ink);
  padding: 0.55rem 1.15rem;
  border-radius: 999px;
  font-weight: 600;
  transition: background-color 180ms var(--ease-standard), transform 180ms var(--ease-standard);
}
.site-nav .cta-nav:hover { background: #4AE2AB; transform: translateY(-1px); }

@media (max-width: 900px) {
  .site-nav { margin-left: var(--space-3); margin-right: var(--space-3); }
}

/* ===== Hero ===== */
.hero {
  position: relative;
  display: grid;
  grid-template-columns: 6fr 6fr;
  gap: var(--space-4);
  align-items: center;
  /* full-bleed: the canvas belt reaches the screen edge, the copy stays in
     the same content column as before */
  max-width: none;
  margin: 0;
  padding: var(--space-5) max(var(--space-4), calc((100% - var(--max-w)) / 2)) var(--space-6);
  min-height: min(88dvh, 60rem);
  overflow: clip;
}
.hero > * { position: relative; }

/* WebGL belt canvas: sits under the copy, spans the whole hero */
.hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}
.hero-copy { z-index: 1; }
/* when the belt runs, the static fallback sprites and centerpiece hide;
   the glow, clouds, and star specks stay as ambience under the canvas */
.hero.gl-on .orb-img,
.hero.gl-on .sprite { display: none; }
.hero.gl-on .cosmos::after { display: none; }
/* clouds become foreground scenery at the bottom edge, like the reference */
.hero.gl-on .cloud { display: none; }
.hero.gl-on .orb-glow {
  width: 66%;
  height: 66%;
  opacity: 0.72;
}

.hero-copy h1 {
  font-size: clamp(2.6rem, 5vw, 4.1rem);
  font-weight: 680;
  letter-spacing: -0.035em;
  color: #FFFFFF;
}
.role {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--accent);
  margin-bottom: var(--space-2);
}
.positioning {
  font-size: clamp(1.2rem, 1.9vw, 1.5rem);
  line-height: 1.5;
  color: var(--muted);
  max-width: 32ch;
  margin-top: var(--space-3);
}
.hero-copy [data-hero="4"] { margin-top: var(--space-4); }

/* Hero entrance choreography (gated behind html.js + motion-ok) */
html.js.motion-ok [data-hero] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
}
html.js.motion-ok body.loaded [data-hero] { opacity: 1; transform: none; }
html.js.motion-ok body.loaded [data-hero="1"] { transition-delay: 60ms; }
html.js.motion-ok body.loaded [data-hero="2"] { transition-delay: 140ms; }
html.js.motion-ok body.loaded [data-hero="3"] { transition-delay: 240ms; }
html.js.motion-ok body.loaded [data-hero="4"] { transition-delay: 340ms; }
html.js.motion-ok body.loaded [data-hero="5"] { transition-delay: 200ms; }

/* ===== The orbital gate (the black-hole moment) ===== */
.hero-visual { position: relative; }
.cosmos {
  position: relative;
  aspect-ratio: 1 / 1;
  max-width: 640px;
  margin: 0 auto;
}

/* star specks */
.stars, .stars::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 18%, rgba(255,255,255,0.55), transparent 100%),
    radial-gradient(1px 1px at 32% 8%,  rgba(255,255,255,0.4), transparent 100%),
    radial-gradient(1.5px 1.5px at 78% 12%, rgba(255,255,255,0.5), transparent 100%),
    radial-gradient(1px 1px at 90% 34%, rgba(255,255,255,0.35), transparent 100%),
    radial-gradient(1.5px 1.5px at 8% 56%,  rgba(255,255,255,0.4), transparent 100%),
    radial-gradient(1px 1px at 22% 84%, rgba(255,255,255,0.4), transparent 100%),
    radial-gradient(1.5px 1.5px at 66% 92%, rgba(255,255,255,0.45), transparent 100%),
    radial-gradient(1px 1px at 94% 72%, rgba(255,255,255,0.35), transparent 100%),
    radial-gradient(1px 1px at 48% 30%, rgba(255,255,255,0.3), transparent 100%),
    radial-gradient(1px 1px at 58% 64%, rgba(255,255,255,0.3), transparent 100%);
}
.stars::after { transform: rotate(58deg) scale(1.15); opacity: 0.6; }

/* faint elliptical track behind the scene */
.cosmos::after {
  content: "";
  position: absolute;
  top: 54%;
  left: 50%;
  translate: -50% -50%;
  width: 96%;
  height: 40%;
  border-radius: 50%;
  border: 1px solid var(--line-soft);
  pointer-events: none;
}

/* the illustrated scene: emerald planet + floating robots + clouds */
.fl { position: absolute; height: auto; user-select: none; -webkit-user-drag: none; }

.orb-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 78%;
  height: 78%;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(52, 211, 153, 0.28), rgba(52, 211, 153, 0.08) 48%, transparent 70%);
}
html.js.motion-ok .orb-glow { animation: pulse 7s var(--ease-standard) infinite alternate; }
@keyframes pulse {
  from { opacity: 0.75; transform: scale(0.97); }
  to   { opacity: 1;    transform: scale(1.05); }
}

.orb-img {
  top: 50%;
  left: 50%;
  width: 47%;
  margin: 0;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 24px 60px rgba(0, 0, 0, 0.45));
}
html.js.motion-ok .orb-img { animation: bob-orb 7s ease-in-out infinite alternate; }
@keyframes bob-orb {
  from { transform: translate(-50%, -51.5%); }
  to   { transform: translate(-50%, -48.5%); }
}

.sprite { filter: drop-shadow(0 14px 30px rgba(0, 0, 0, 0.4)); }
.sp-amr   { width: 30%; left: -3%;  top: 26%; }
.sp-drone { width: 27%; right: 1%;  top: 4%;  }
.sp-arm   { width: 16%; left: 38%;  top: -3%; }
.sp-human { width: 20%; right: 2%;  bottom: 12%; }

.cloud { width: 40%; opacity: 0.5; }
.c1 { top: 4%; left: -8%; }
.c2 { bottom: 6%; right: -10%; transform: scaleX(-1); }

html.js.motion-ok .sp-amr   { animation: bob-a 5.6s ease-in-out infinite alternate; }
html.js.motion-ok .sp-drone { animation: bob-b 4.8s ease-in-out 0.7s infinite alternate; }
html.js.motion-ok .sp-arm   { animation: bob-c 6.4s ease-in-out 0.3s infinite alternate; }
html.js.motion-ok .sp-human { animation: bob-d 5.2s ease-in-out 1.1s infinite alternate; }
html.js.motion-ok .c1 { animation: drift-a 26s ease-in-out infinite alternate; }
html.js.motion-ok .c2 { animation: drift-b 32s ease-in-out infinite alternate; }

@keyframes bob-a { from { transform: translateY(-9px)  rotate(-2.5deg); } to { transform: translateY(10px) rotate(1.5deg); } }
@keyframes bob-b { from { transform: translateY(-12px) rotate(2deg); }    to { transform: translateY(8px)  rotate(-2deg); } }
@keyframes bob-c { from { transform: translateY(-7px)  rotate(1.5deg); }  to { transform: translateY(9px)  rotate(-1.5deg); } }
@keyframes bob-d { from { transform: translateY(-10px) rotate(-1.5deg); } to { transform: translateY(7px)  rotate(2.5deg); } }
@keyframes drift-a { from { transform: translateX(-14px); } to { transform: translateX(22px); } }
@keyframes drift-b { from { transform: scaleX(-1) translateX(-20px); } to { transform: scaleX(-1) translateX(14px); } }

.verified { color: var(--accent); font-weight: 600; }

/* ===== Scroll reveal (shared) ===== */
html.js.motion-ok [data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 750ms var(--ease-out), transform 750ms var(--ease-out);
  transition-delay: var(--d, 0ms);
}
html.js.motion-ok [data-reveal].in { opacity: 1; transform: none; }

/* ===== Proof ledger ===== */
.ledger {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: var(--space-5) var(--space-4) var(--space-6);
  display: grid;
  grid-template-columns: 5fr 3fr 2fr 2fr;
  gap: var(--space-4);
  align-items: end;
  border-top: 1px solid var(--line-soft);
}
.stat-value {
  font-weight: 660;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  font-size: 2.6rem;
  line-height: 1;
  color: #FFFFFF;
}
.stat-dominant .stat-value { font-size: clamp(4rem, 8vw, 6.5rem); color: var(--accent); }
.stat-of { font-size: 0.42em; color: var(--muted); font-weight: 500; letter-spacing: 0; }
.stat-caption {
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.5;
  margin-top: var(--space-2);
  max-width: 30ch;
}

/* ===== Case study ===== */
.case {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: var(--space-6) var(--space-4);
  border-top: 1px solid var(--line-soft);
}
.case-label {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.35rem 0.95rem;
  color: var(--muted);
}
.case-header h2 {
  font-size: clamp(1.9rem, 3.4vw, 2.9rem);
  font-weight: 650;
  margin-top: var(--space-3);
  max-width: 26ch;
  color: #FFFFFF;
}
.case-intro {
  margin-top: var(--space-3);
  max-width: var(--measure);
  color: var(--muted);
  font-size: 1.1rem;
}

.trace {
  display: grid;
  grid-template-columns: 3fr 9fr;
  gap: var(--space-5);
  margin-top: var(--space-5);
}
.trace, .scenes, .scene { min-width: 0; }

.trace-rail {
  list-style: none;
  margin: 0;
  padding: 0;
  position: sticky;
  top: 7rem;
  align-self: start;
  display: grid;
  gap: 1.1rem;
  font-family: var(--font-mono);
  font-size: 0.82rem;
}
.trace-rail li {
  position: relative;
  padding-left: 1.6rem;
  color: var(--muted);
  transition: color 300ms var(--ease-standard);
}
.trace-rail li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  translate: 0 -50%;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  background: var(--bg);
  transition: border-color 300ms var(--ease-standard), background-color 300ms var(--ease-standard), box-shadow 300ms var(--ease-standard);
}
.trace-rail li.active { color: #FFFFFF; font-weight: 600; }
.trace-rail li.active::before {
  border-color: var(--accent);
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(52, 211, 153, 0.18);
}
.trace-rail li.done { color: var(--text); }
.trace-rail li.done::before { border-color: var(--accent); background: var(--accent); }

.scenes { display: grid; gap: var(--space-6); }
.scene-stage {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent);
}
.scene h3 { font-size: 1.55rem; font-weight: 640; margin-top: var(--space-1); color: #FFFFFF; }
.scene > p:not(.scene-stage) { margin-top: var(--space-2); max-width: var(--measure); color: var(--muted); }

/* Evidence table */
.table-wrap {
  margin-top: var(--space-3);
  overflow-x: auto;
  max-width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.3);
}
.evidence-table {
  border-collapse: collapse;
  width: 100%;
  min-width: 640px;
  font-family: var(--font-mono);
  font-size: 0.8rem;
}
.evidence-table th, .evidence-table td {
  text-align: left;
  padding: 0.7rem 1rem;
  white-space: nowrap;
}
.evidence-table thead th {
  font-size: 0.66rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.14);
}
.evidence-table tbody tr { transition: background-color 160ms var(--ease-standard); }
.evidence-table tbody tr:hover { background: rgba(52, 211, 153, 0.05); }
.evidence-table tbody tr + tr td { border-top: 1px solid var(--line-soft); }

/* Table rows cascade in when the table enters view */
html.js.motion-ok .evidence-table tbody tr {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 550ms var(--ease-out), transform 550ms var(--ease-out), background-color 160ms var(--ease-standard);
}
html.js.motion-ok .table-wrap.in .evidence-table tbody tr { opacity: 1; transform: none; }
html.js.motion-ok .table-wrap.in .evidence-table tbody tr:nth-child(1) { transition-delay: 80ms; }
html.js.motion-ok .table-wrap.in .evidence-table tbody tr:nth-child(2) { transition-delay: 170ms; }
html.js.motion-ok .table-wrap.in .evidence-table tbody tr:nth-child(3) { transition-delay: 260ms; }
html.js.motion-ok .table-wrap.in .evidence-table tbody tr:nth-child(4) { transition-delay: 350ms; }
html.js.motion-ok .table-wrap.in .evidence-table tbody tr:nth-child(5) { transition-delay: 440ms; }
html.js.motion-ok .table-wrap.in .evidence-table tbody tr:nth-child(6) { transition-delay: 530ms; }

.chip {
  display: inline-block;
  border-radius: 999px;
  padding: 0.12rem 0.65rem;
  font-size: 0.7rem;
  font-weight: 500;
  border: 1px solid var(--line);
  color: var(--muted);
  background: rgba(255, 255, 255, 0.03);
}
.chip-verified {
  border-color: rgba(52, 211, 153, 0.5);
  color: var(--accent);
  background: rgba(52, 211, 153, 0.1);
  font-weight: 600;
}
.chip-reject { border-color: rgba(226, 161, 142, 0.45); color: var(--reject); background: rgba(226, 161, 142, 0.07); }
.table-note {
  margin-top: var(--space-2);
  font-size: 0.88rem;
  color: var(--muted);
  max-width: var(--measure);
}

/* Fit / heat pair */
.fit-heat { display: flex; gap: var(--space-5); margin-top: var(--space-3); }
.fh-pair { display: grid; gap: 0.3rem; }
.fh-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--muted);
}
.fh-value {
  font-weight: 660;
  font-variant-numeric: tabular-nums;
  font-size: 2.6rem;
  line-height: 1;
  letter-spacing: -0.02em;
  color: #FFFFFF;
}
.fh-meaning { font-size: 0.88rem; color: var(--muted); }

/* Gate tally */
.gate-tally {
  margin-top: var(--space-3);
  font-family: var(--font-mono);
  font-size: 1.6rem;
  font-weight: 500;
}
.gate-sep { color: var(--line); padding: 0 0.45rem; }

/* Loom slot */
.loom-slot { margin: var(--space-6) 0 0; }
.loom-poster {
  aspect-ratio: 16 / 9;
  max-width: 820px;
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) + 4px);
  background:
    radial-gradient(ellipse at 30% 20%, rgba(52, 211, 153, 0.09), transparent 60%),
    linear-gradient(165deg, var(--panel-2) 0%, var(--panel) 100%);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.3);
  display: grid;
  place-content: center;
  text-align: center;
  gap: 0.45rem;
}
.loom-label { font-weight: 600; font-size: 1.05rem; color: #FFFFFF; }
.loom-sub { color: var(--muted); font-size: 0.92rem; }

/* ===== How I work ===== */
.method {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: var(--space-6) var(--space-4);
  border-top: 1px solid var(--line-soft);
}
.method h2, .next h2 { font-size: clamp(1.7rem, 2.6vw, 2.2rem); font-weight: 650; color: #FFFFFF; }
.principles {
  list-style: none;
  margin: var(--space-4) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-4);
  max-width: var(--measure);
  font-size: 1.08rem;
}
.principles li { color: var(--muted); }
.principles strong { display: block; font-size: 1.3rem; font-weight: 640; color: #FFFFFF; letter-spacing: -0.015em; margin-bottom: 0.2rem; }

/* ===== Next builds ===== */
.next {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: var(--space-6) var(--space-4);
  border-top: 1px solid var(--line-soft);
}
.next-list {
  list-style: none;
  margin: var(--space-4) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}
.next-list li {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  padding: var(--space-3);
  transition: transform 240ms var(--ease-standard), box-shadow 240ms var(--ease-standard), border-color 240ms var(--ease-standard);
}
.next-list li:hover {
  transform: translateY(-3px);
  border-color: rgba(52, 211, 153, 0.35);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
}
.next-title { font-weight: 640; font-size: 1.15rem; letter-spacing: -0.015em; color: #FFFFFF; }
.next-line { color: var(--muted); margin-top: var(--space-1); max-width: 45ch; }

/* ===== Closing ===== */
.close {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: var(--space-6) var(--space-4);
  border-top: 1px solid var(--line-soft);
  text-align: center;
}
.close h2 {
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  font-weight: 650;
  max-width: 22ch;
  margin: 0 auto;
  color: #FFFFFF;
}
.close h2 + div { margin-top: var(--space-4); }

/* ===== Footer ===== */
.site-footer {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: var(--space-3) var(--space-4) var(--space-4);
  border-top: 1px solid var(--line-soft);
  color: var(--muted);
  font-size: 0.9rem;
}

/* ==========================================================================
   Reduced motion: everything visible and final, no choreography
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; padding-bottom: var(--space-5); gap: var(--space-3); min-height: 0; }
  .hero-visual { max-width: 480px; margin: 0 auto; width: 100%; }
  .cosmos { max-width: 100%; }
  .orbit { --r: calc(var(--r-base, 150px)); }
  .ledger { grid-template-columns: 1fr 1fr; gap: var(--space-4) var(--space-3); }
  .trace { grid-template-columns: 1fr; gap: var(--space-4); }
  .trace-rail { position: static; display: none; }
  .scenes { gap: var(--space-5); }
}

@media (min-width: 901px) {
  /* Desktop: the sticky rail names the stage; the inline label would duplicate it. */
  .scene-stage { display: none; }
}

@media (max-width: 560px) {
  .site-nav { margin: 0.6rem var(--space-2) 0; padding-left: 1rem; }
  .site-nav nav a:not(.cta) { display: none; }
  .wordmark { font-size: 0.88rem; }
  .site-nav .cta-nav { padding: 0.45rem 0.9rem; font-size: 0.88rem; }
  .hero { padding-left: var(--space-3); padding-right: var(--space-3); overflow: clip; }
  .ledger, .case, .method, .next, .close { padding-left: var(--space-3); padding-right: var(--space-3); }
  .ledger { grid-template-columns: 1fr; }
  .next-list { grid-template-columns: 1fr; }
  .fit-heat { gap: var(--space-4); }
}

/* ==========================================================================
   Light band: wave dividers, tool marquee, serif statement, case card.
   Crystallize-style alternating band. Paper background, plum ink.
   ========================================================================== */
:root {
  --paper: #F6F4EE;
  --paper-ink: #221C40;
  --paper-muted: #6A6390;
  --paper-line: rgba(34, 28, 64, 0.12);
  --accent-on-paper: #0E9F72;
  --font-serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
}

/* Illustrated scene dividers between the dark cosmos and the paper band.
   Hills are inline SVG; the characters are the same sprite art as the hero. */
.scene-div {
  position: relative;
  height: clamp(150px, 19vw, 260px);
  pointer-events: none;
  overflow: hidden;
}
.sd-hills, .sd-flora {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.sd-flora { object-fit: cover; }
.sd-el { position: absolute; height: auto; }
.sd-into-light { margin-top: calc(-1 * clamp(16px, 2.5vw, 36px)); }
.sd-into-light .sd-cloud { width: clamp(90px, 11vw, 150px); right: 26%; top: 2%; opacity: 0.85; }
.sd-into-dark { background: var(--paper); }
html.motion-ok .sd-into-light .sd-cloud { animation: sd-hover 9s ease-in-out infinite alternate; }
@keyframes sd-hover { from { transform: translateX(0); } to { transform: translateX(18px); } }

.band-light {
  background: var(--paper);
  color: var(--paper-ink);
  padding: var(--space-4) var(--space-3) var(--space-6);
}
.band-light em { color: var(--accent-on-paper); }

.band-kicker {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--paper-muted);
  text-align: center;
  margin: 0 auto var(--space-3);
}

/* Tool-logo marquee: crops of the same atlas the hero belt draws from */
.marquee {
  overflow: hidden;
  /* full-bleed strip, like the reference: escape the band's side padding */
  margin: 0 calc(-1 * var(--space-3));
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.marquee-track { display: flex; width: max-content; }
.marquee-set { display: flex; align-items: center; gap: 3.4rem; padding-right: 3.4rem; }
html.motion-ok .marquee-track { animation: marquee-scroll 42s linear infinite; }
@keyframes marquee-scroll { to { transform: translateX(-50%); } }
.lg {
  height: 48px;
  flex: none;
  display: inline-block;
  background-image: url("assets/img/atlas.webp");
  background-repeat: no-repeat;
}
.lg-0 { width: 76.8px; background-size: 404.4px auto; background-position: -2.0px -26.4px; } /* n8n */
.lg-1 { width: 52.6px; background-size: 277.0px auto; background-position: -56.7px -10.6px; } /* hunter */
.lg-2 { width: 38.2px; background-size: 201.1px auto; background-position: -81.3px -1.1px; } /* leadmagic */
.lg-3 { width: 49.4px; background-size: 260.0px auto; background-position: -157.1px -8.5px; } /* aiark */
.lg-4 { width: 34.2px; background-size: 200.3px auto; background-position: -162.8px -1.0px; } /* bettercontact */
.lg-5 { width: 66.2px; background-size: 357.4px auto; background-position: -2.6px -109.9px; } /* findymail */
.lg-6 { width: 47.6px; background-size: 255.3px auto; background-position: -52.6px -71.7px; } /* ocean */
.lg-7 { width: 61.4px; background-size: 323.5px auto; background-position: -130.8px -97.3px; } /* clay */
.lg-8 { width: 41.5px; background-size: 218.4px auto; background-position: -131.9px -57.9px; } /* lusha */
.lg-9 { width: 44.4px; background-size: 233.6px auto; background-position: -187.7px -63.5px; } /* hubspot */
.lg-10 { width: 47.8px; background-size: 300.6px auto; background-position: -6.0px -163.8px; } /* snov */
.lg-11 { width: 44.3px; background-size: 295.2px auto; background-position: -66.3px -160.4px; } /* exa */
.lg-12 { width: 34.2px; background-size: 205.7px auto; background-position: -85.6px -104.5px; } /* firecrawl */
.lg-13 { width: 54.1px; background-size: 284.9px auto; background-position: -172.1px -154.0px; } /* heyreach */
.lg-14 { width: 48.4px; background-size: 254.8px auto; background-position: -204.8px -135.2px; } /* prospeo */
.lg-15 { width: 48.4px; background-size: 276.2px auto; background-position: -3.4px -217.7px; } /* rocketreach */
.lg-16 { width: 46.0px; background-size: 269.2px auto; background-position: -57.6px -211.5px; } /* instantly */

/* Serif display statement, Crystallize-style */
.statement {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(2.5rem, 6.2vw, 4.4rem);
  line-height: 1.06;
  letter-spacing: -0.015em;
  text-align: center;
  max-width: 18ch;
  margin: var(--space-6) auto 0;
}
.statement em { font-style: italic; }
.statement-sub {
  max-width: 52ch;
  margin: var(--space-3) auto 0;
  text-align: center;
  color: var(--paper-muted);
  font-size: 1.05rem;
}

/* Case-study stat card */
.case-card {
  background: #FFFFFF;
  border: 1px solid var(--paper-line);
  border-radius: var(--radius);
  box-shadow: 0 24px 60px rgba(34, 28, 64, 0.10);
  max-width: 760px;
  margin: var(--space-5) auto 0;
  padding: var(--space-3) var(--space-4) var(--space-4);
}
.cc-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-2);
  border-bottom: 1px solid var(--paper-line);
  padding-bottom: var(--space-2);
}
.cc-brand {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
}
.cc-tag { font-size: 0.85rem; color: var(--paper-muted); }
.cc-claim {
  font-family: var(--font-serif);
  font-size: clamp(1.6rem, 3.4vw, 2.3rem);
  line-height: 1.15;
  margin: var(--space-3) 0 var(--space-3);
}
.cc-claim em { font-style: italic; }
.cc-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  margin: 0;
  border-top: 1px solid var(--paper-line);
  padding-top: var(--space-3);
}
.cc-stats div:not(:first-child) { border-left: 1px solid var(--paper-line); padding-left: var(--space-3); }
.cc-stats dt {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--paper-muted);
}
.cc-stats dd {
  margin: 0.2rem 0 0;
  font-size: 2.1rem;
  font-weight: 660;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
}

@media (max-width: 640px) {
  .band-light { padding-bottom: var(--space-5); }
  .statement { margin-top: var(--space-5); }
  .cc-head { flex-direction: column; gap: 0.3rem; }
  .cc-stats { grid-template-columns: 1fr; }
  .cc-stats div:not(:first-child) { border-left: 0; padding-left: 0; border-top: 1px solid var(--paper-line); padding-top: var(--space-2); }
}