/* SoundCloud Dark tokens (fleet default) */
:root {
  --page: #121212;
  --surface: #1e1e1e;
  --surface-e: #181818;
  --outline: #333333;
  --text: #f2f2f2;
  --muted: #999999;
  --primary: #ff5500;
  --primary-hover: #ff3300;
  --on-primary: #121212;
  --font: 'Lexend', system-ui, -apple-system, sans-serif;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--page);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
}

a { color: var(--text); text-decoration: none; transition: color 0.2s var(--ease); }
a:hover { color: var(--primary); }

h1, h2, h3 { font-family: var(--font); font-weight: 600; line-height: 1.15; margin: 0; }

.wrap { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; }

/* Header */
.top { position: sticky; top: 0; z-index: 20; background: var(--page); padding: 10px 0 4px; text-align: center; }
.top .brand { display: inline-block; margin: 6px 0; font-size: 1.3rem; font-weight: 700; color: var(--text); }
.menu { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 8px 0 4px; }
.menu a {
  flex: 1 1 0; text-align: center; white-space: nowrap;
  padding: 0.5rem 1.1rem; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--outline); color: var(--text);
  font-size: 0.85rem; font-weight: 500; transition: all 0.2s var(--ease);
}
.menu a:hover { border-color: var(--primary); color: var(--primary); }
.menu a.on { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
.menu a.cta { background: var(--primary); color: var(--on-primary); border-color: var(--primary); font-weight: 600; }
.menu a.cta:hover { background: var(--primary-hover); color: var(--on-primary); }

/* Progress line */
#story-progress {
  position: sticky; top: 0; z-index: 21; height: 3px; background: var(--primary);
  width: 0%; transition: width 0.15s linear;
}

/* Hero */
.hero {
  min-height: 90vh; display: flex; flex-direction: column; align-items: center;
  justify-content: center; text-align: center; padding: 4rem 1.5rem 3rem; gap: 1.5rem;
}
.hero .eyebrow { font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.hero h1 { font-size: clamp(2.5rem, 7vw, 5rem); line-height: 1.05; letter-spacing: -0.02em; max-width: 44rem; }
.hero h1 em { color: var(--primary); font-style: italic; }
.hero .sub { color: var(--muted); font-size: 1.1rem; max-width: 32rem; margin: 0; }
.hero .loop { font-size: 0.95rem; letter-spacing: 0.02em; color: #bfbfbf; margin: 0; }
.hero-stats { display: flex; flex-wrap: wrap; gap: 2rem; justify-content: center; margin-top: 0.5rem; }
.hero-stats div { text-align: center; }
.hero-stats .n { font-size: 2rem; color: var(--primary); margin: 0; font-weight: 700; }
.hero-stats .l { font-size: 0.75rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; margin: 0; }
.hero-stats .asof { width: 100%; font-size: 0.7rem; color: #bfbfbf; margin-top: 0.25rem; }
.scroll-cue { margin-top: 1rem; font-size: 0.8rem; color: #bfbfbf; animation: bob 1.8s ease-in-out infinite; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }

/* Story scrollytelling */
.story-wrap { display: grid; grid-template-columns: 1fr; max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; }
@media (min-width: 900px) { .story-wrap { grid-template-columns: 1fr 1fr; gap: 2rem; } }

.stage {
  position: sticky; top: 3px; height: 42vh; display: flex; align-items: center;
  justify-content: center; z-index: 1; background: var(--page);
}
@media (min-width: 900px) { .stage { height: 100vh; order: 2; } }
.stage svg { width: 100%; max-width: 380px; }

.sc { opacity: 0; transition: opacity 0.5s var(--ease); }
.sc.on { opacity: 1; }
.sc[data-s="1"] { opacity: 1; }

.steps { order: 1; padding-bottom: 4rem; }
.step { min-height: 70vh; display: flex; align-items: center; padding: 2rem 0; opacity: 0.45; transition: opacity 0.3s var(--ease); }
.step.on { opacity: 1; }
@media (min-width: 900px) { .step { min-height: 85vh; } }
.step .box { background: var(--surface); border: 1px solid var(--outline); border-radius: 14px; padding: 1.25rem 1.5rem; transition: border-color 0.3s var(--ease); }
.step.on .box { border-color: var(--primary); }
.step .num { display: block; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.35rem; }
.step h2 { font-size: clamp(1.4rem, 3vw, 2rem); margin-bottom: 0.6rem; }
.step p { color: var(--muted); margin: 0 0 0.5rem; max-width: 34rem; }
.step .k { font-size: 0.8rem; color: #bfbfbf; }
.step .pills { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1rem; }

.pill {
  display: inline-flex; align-items: center; padding: 0.5rem 1.1rem;
  border: 1px solid var(--outline); border-radius: 999px; font-size: 0.85rem;
  color: var(--text); transition: all 0.2s var(--ease);
}
.pill:hover { border-color: var(--primary); color: var(--primary); }
.pill.fill { background: var(--primary); color: var(--on-primary); border-color: var(--primary); font-weight: 600; }
.pill.fill:hover { background: var(--primary-hover); color: var(--on-primary); }

.end { padding: 3rem 1.5rem 4rem; text-align: center; }
.end .loop { color: #bfbfbf; margin-bottom: 1rem; }
.end h2 { font-size: clamp(1.4rem, 3vw, 2rem); margin-bottom: 1rem; }
.end p { color: var(--muted); margin: 0 0 1.5rem; }
.end .pills { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; }

.quotes { max-width: 48rem; margin: 0 auto; padding: 4rem 1.5rem; }
.quotes .eyebrow, .quotes h2 { text-align: center; }
.quotes .eyebrow { font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.75rem; }
.quotes h2 { margin-bottom: 2rem; font-size: clamp(1.4rem, 3vw, 2rem); }
.quotes blockquote { font-style: italic; font-size: 1.1rem; line-height: 1.5; margin: 0 0 1.5rem; color: var(--text); }
.quotes cite { display: block; font-size: 0.8rem; color: var(--muted); font-style: normal; margin-top: 0.4rem; }

@media (prefers-reduced-motion: reduce) {
  .flow, .blink { animation: none !important; }
  .sc, .step { transition: none; }
}
.flow { stroke-dasharray: 6 6; animation: flow 1.4s linear infinite; }
@keyframes flow { to { stroke-dashoffset: -24; } }
.blink { animation: blink 1.6s ease-in-out infinite; }
@keyframes blink { 50% { opacity: 0.25; } }

/* Connect page */
.connect { max-width: 56rem; margin: 0 auto; padding: 2rem 1.5rem 4rem; }
.connect h1 { font-size: clamp(2rem, 5vw, 3rem); margin-bottom: 0.5rem; }
.connect .sub { color: var(--muted); font-size: 1.1rem; margin: 0 0 2rem; }
.card { background: var(--surface); border: 1px solid var(--outline); border-radius: 14px; padding: 2rem; }
.card.cta { text-align: center; margin-bottom: 2rem; }
.card.cta h2 { font-size: 1.5rem; margin-bottom: 0.5rem; }
.card.cta p { color: var(--muted); margin: 0 0 1.5rem; }
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.85rem 2rem; border-radius: 999px; background: var(--primary);
  color: var(--on-primary); font-weight: 600; font-size: 1rem; border: none;
  transition: all 0.2s var(--ease);
}
.btn-primary:hover { background: var(--primary-hover); color: var(--on-primary); }
.connect .links-label { color: var(--muted); margin: 0 0 1rem; }
.links-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
@media (min-width: 640px) { .links-grid { grid-template-columns: repeat(3, 1fr); } }
.links-grid .card { padding: 1.25rem; }
.links-grid h3 { font-size: 1rem; margin-bottom: 0.4rem; }
.links-grid a.sublink { color: var(--primary); font-size: 0.9rem; }

/* Footer */
.foot { padding: 3rem 1.5rem; text-align: center; border-top: 1px solid var(--outline); margin-top: 2rem; }
.foot .tagline { font-size: 1.1rem; margin: 0 0 0.75rem; }
.foot .copyright { font-size: 0.8rem; color: var(--muted); margin: 0; }