/* ============ TOKENS ============ */
:root {
  --c-night-1: #0F1A17;
  --c-night-2: #16261F;
  --c-transition: #3B4A3F;
  --c-dawn-1: #E9E4D2;
  --c-dawn-2: #F6F3EA;
  --c-sunrise-glow: #EDBC86; /* warm flash where night meets morning, a tint of the accent */

  --c-text-dark: #EDEBE3;   /* text on dark backgrounds */
  --c-text-light: #14201B;  /* text on light backgrounds */
  --c-sub-dark: #8E9A90;    /* secondary text on dark */
  --c-sub-light: #56625A;   /* secondary text on light */

  --c-accent: #F28C28;      /* tweak this one value to re-theme the whole site */
  --c-accent-text: #14201B; /* text colour used on top of accent fills */

  --font-display: 'Syne', sans-serif;
  --font-body: 'DM Sans', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  --container-w: 1200px;
  --nav-clear: 88px; /* minimum top clearance so content never sits under the fixed nav (measured ~79px desktop) */
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
html {
  overflow-x: auto;
  overflow-y: hidden;
  /* No scroll-snap: snapping forces a hard jump to the next full panel on
     any scroll release, which reads as slide-by-slide (PPT-like) rather
     than continuous scrolling. Plain overflow scrolling stays fluid and
     tracks wheel/trackpad input 1:1. */
  /* Without its own background, browsers propagate body's background to
     paint the canvas — and then size gradient percentages to the viewport
     instead of body's real (much wider) box, making the gradient repeat
     every viewport-width instead of spanning the whole scroll track. An
     explicit background here stops that propagation. */
  background: var(--c-night-1);
  /* Hide the scrollbar chrome; wheel/trackpad scrolling and the nav still
     work identically, this only removes the visible bar. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
html::-webkit-scrollbar { display: none; }
body {
  display: flex;
  flex-direction: row;
  width: max-content;
  min-height: 100vh;
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.6;
  color: var(--c-text-dark);
  /* Fallback for no-JS: a rough night -> dawn gradient, left to right since
     the page now scrolls sideways. script.js replaces this with one whose
     stops match each panel's real position, so text always lands on the
     colour it was designed for. */
  background: linear-gradient(
    to right,
    var(--c-night-1) 0%,
    var(--c-night-2) 30%,
    var(--c-transition) 62%,
    var(--c-sunrise-glow) 76%,
    var(--c-dawn-1) 85%,
    var(--c-dawn-2) 100%
  );
}
/* Lets <main>'s section children act as direct flex items of body, without
   main itself adding a box to the horizontal row. */
main { display: contents; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 700; margin: 0; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
ul { margin: 0; padding: 0; }

.mono {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.container {
  max-width: var(--container-w);
  margin: 0 auto;
  padding: 0 40px;
}

.section {
  position: relative;
  flex: 0 0 100vw;
  width: 100vw;
  height: 100vh;
  /* No vertical scroll anywhere, including inside a panel: every section's
     content is sized with vh-aware clamp()s (below) so it fits the screen
     height on its own. Horizontal page scroll is the only scroll axis. */
  overflow: hidden;
}

/* ============ FOCUS / A11Y ============ */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 3px;
}

/* ============ BUTTONS ============ */
.btn {
  display: inline-block;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 14px;
  font-weight: 600;
  padding: 16px 30px;
  border-radius: 2px;
  border: 1px solid var(--c-accent);
  transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
}
.btn--solid {
  background: var(--c-accent);
  color: var(--c-accent-text);
}
.btn--solid:hover { background: #d97b1c; transform: translateY(-1px); }
.btn--outline {
  background: transparent;
  color: var(--c-text-dark);
}
.btn--outline:hover { background: rgba(242, 140, 40, 0.1); }

.badge {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-accent);
  border: 1px solid var(--c-accent);
  padding: 6px 12px;
  border-radius: 2px;
}

/* ============ NAV ============ */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: transparent;
  transition: background 0.3s ease, backdrop-filter 0.3s ease;
}
.nav.scrolled {
  background: rgba(15, 26, 23, 0.85);
  backdrop-filter: blur(8px);
}
.nav__inner {
  max-width: var(--container-w);
  margin: 0 auto;
  padding: 22px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: 0.05em;
  color: var(--c-text-dark);
}
.nav__logo-mark {
  width: 34px;
  height: auto;
  flex-shrink: 0;
  transition: transform 0.3s ease;
}
.nav__brand:hover .nav__logo-mark {
  transform: translateX(3px);
}
.nav__links {
  display: flex;
  gap: 32px;
}
.nav__links a {
  font-family: var(--font-mono);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--c-text-dark);
  position: relative;
  padding-bottom: 4px;
}
.nav__links a::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 1px;
  background: var(--c-accent);
  transition: width 0.2s ease;
}
.nav__links a:hover::after { width: 100%; }
.nav__right { display: flex; align-items: center; gap: 18px; }
.nav__toggle {
  display: none;
  background: none;
  border: none;
  flex-direction: column;
  gap: 5px;
  padding: 4px;
}
.nav__toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--c-text-dark);
}

/* ============ HERO ============ */
.hero {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: var(--nav-clear);
}
.hero__content {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 40px;
  text-align: center;
  position: relative;
  z-index: 2;
}
.hero__title {
  font-size: clamp(30px, min(9vh, 6.2vw), 120px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin-bottom: clamp(12px, 3vh, 32px);
}
.hero__sub {
  font-size: clamp(13px, 2.2vh, 20px);
  color: var(--c-sub-dark);
  max-width: 620px;
  margin: 0 auto clamp(14px, 3vh, 40px);
}
.hero__actions {
  display: flex;
  gap: 18px;
  justify-content: center;
  flex-wrap: wrap;
}
.hero__scene {
  position: relative;
  width: 100%;
  height: clamp(70px, 18vh, 420px);
  margin-top: clamp(10px, 3vh, 40px);
}
.scene-svg { width: 100%; height: 100%; display: block; }
.hut-window { animation: flicker 3.5s ease-in-out infinite; }
@keyframes flicker {
  0%, 100% { opacity: 1; }
  48% { opacity: 0.85; }
  50% { opacity: 0.6; }
  52% { opacity: 0.9; }
}
.hero__credit {
  position: relative;
  z-index: 2;
  text-align: center;
  font-size: 11px;
  color: var(--c-sub-dark);
  padding: clamp(8px, 2vh, 32px) 20px 0;
  letter-spacing: 0.12em;
}

/* ============ SECTION HEADERS ============ */
.eyebrow {
  font-size: 13px;
  color: var(--c-accent);
  margin-bottom: clamp(8px, 2vh, 20px);
}
.section-title {
  font-size: clamp(22px, min(5.2vh, 4vw), 48px);
  line-height: 1.15;
  margin-bottom: clamp(14px, 3vh, 48px);
  max-width: 800px;
}

/* ============ PROBLEM ============ */
.problem {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--nav-clear) 0 clamp(16px, 4vh, 48px);
}
.pull-quote {
  font-size: clamp(20px, min(5.6vh, 4.2vw), 56px);
  line-height: 1.2;
  max-width: 900px;
  margin-bottom: clamp(14px, 3vh, 56px);
}
.problem__copy {
  max-width: 720px;
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1.6vh, 24px);
  color: var(--c-text-dark);
  margin-bottom: clamp(16px, 3.5vh, 80px);
  font-size: clamp(12px, 1.8vh, 18px);
  line-height: 1.5;
}
.problem__copy p { color: var(--c-sub-dark); }
.stat-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 3vh, 40px);
  border-top: 1px solid rgba(142, 154, 144, 0.25);
  padding-top: clamp(12px, 3vh, 48px);
}
.stat-block { display: flex; flex-direction: column; gap: 6px; }
.stat-value {
  font-size: clamp(18px, 4vh, 40px);
  color: var(--c-accent);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.stat-caption { font-size: 10px; color: var(--c-sub-dark); }

/* ============ HOW IT WORKS ============ */
.how {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--nav-clear) 0 clamp(16px, 4vh, 48px);
}
.timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 3vh, 40px);
  padding-top: clamp(14px, 3vh, 40px);
}
.timeline__line {
  position: absolute;
  top: 16px;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(242,140,40,0.15), var(--c-accent) 15%, var(--c-accent) 85%, rgba(242,140,40,0.15));
}
.step { position: relative; padding-top: clamp(14px, 3vh, 40px); }
.step__dot {
  position: absolute;
  top: 8px;
  left: 0;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--c-accent);
  box-shadow: 0 0 0 4px rgba(242,140,40,0.18), 0 0 18px rgba(242,140,40,0.55);
}
.step__num {
  display: block;
  font-size: 11px;
  color: var(--c-sub-dark);
  margin-bottom: clamp(6px, 1.5vh, 20px);
}
.step__icon {
  width: clamp(26px, 5vh, 48px);
  height: clamp(26px, 5vh, 48px);
  color: var(--c-accent);
  margin-bottom: clamp(6px, 1.5vh, 20px);
}
.step__icon svg { width: 100%; height: 100%; }
.step__title {
  font-size: clamp(15px, 2.6vh, 24px);
  margin-bottom: clamp(4px, 1vh, 12px);
}
.step__desc { color: var(--c-sub-dark); font-size: clamp(11px, 1.7vh, 16px); line-height: 1.4; }

/* ============ SPECTRUM ============ */
.spectrum {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--nav-clear) 0 clamp(16px, 4vh, 48px);
}
.spectrum__caption {
  max-width: 640px;
  color: var(--c-sub-dark);
  margin-bottom: clamp(16px, 4vh, 64px);
  font-size: clamp(12px, 1.8vh, 18px);
  line-height: 1.5;
}
.spectrum-bar {
  position: relative;
  display: flex;
  height: clamp(90px, 16vh, 160px);
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid rgba(142,154,144,0.25);
}
.spectrum-zone {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  position: relative;
}
.spectrum-zone--infra, .spectrum-zone--ultra {
  flex: 1;
  background: radial-gradient(ellipse at center, rgba(242,140,40,0.28), rgba(242,140,40,0.05));
}
.spectrum-zone--human {
  flex: 1.4;
  background: rgba(142,154,144,0.12);
}
.zone-label {
  font-size: 11px;
  text-align: center;
  line-height: 1.6;
  color: var(--c-text-dark);
}
.spectrum-zone--infra .zone-label, .spectrum-zone--ultra .zone-label { color: var(--c-accent); }
.spectrum-wave {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  opacity: 0.9;
  pointer-events: none;
}

/* ============ TECHNOLOGY ============ */
.technology {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--nav-clear) 0 clamp(16px, 4vh, 48px);
  color: var(--c-text-light);
}
.technology .eyebrow { color: var(--c-accent); margin-bottom: clamp(4px, 1vh, 20px); }
.technology .section-title { color: var(--c-text-light); margin-bottom: clamp(8px, 1.6vh, 48px); }
.tech__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vh, 60px);
  align-items: center;
}
.tech__art {
  background: rgba(233, 228, 210, 0.5);
  border-radius: 4px;
  padding: 16px;
  display: flex;
  justify-content: center;
}
.tech__art svg { width: auto; height: clamp(120px, 32vh, 420px); max-width: 100%; }
.spec-list { display: flex; flex-direction: column; }
.spec-row {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 24px;
  padding: clamp(4px, 1vh, 14px) 0;
  border-bottom: 1px solid rgba(20,32,27,0.15);
}
.spec-row dt { font-size: 11px; color: var(--c-text-light); opacity: 0.7; }
.spec-row dd { margin: 0; font-size: clamp(13px, 2vh, 18px); color: var(--c-text-light); font-weight: 500; }

/* ============ IMPACT ============ */
.impact {
  display: flex;
  flex-direction: column;
  color: var(--c-text-light);
  padding-top: 0;
  position: relative;
}
.impact__sunrise {
  width: 100%;
  height: clamp(90px, 20vh, 200px);
  overflow: hidden;
  flex: none;
}
.impact .container {
  padding-top: clamp(14px, 3vh, 40px);
  padding-bottom: clamp(16px, 4vh, 48px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;
  min-height: 0;
}
.impact .eyebrow { color: #b8621a; }
.impact .section-title { color: var(--c-text-light); }
.impact__cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 4vh, 48px);
  margin-top: clamp(10px, 3vh, 40px);
}
.impact__col { display: flex; flex-direction: column; gap: 8px; }
.impact__num { font-size: 12px; color: var(--c-accent); }
.impact__col h3 { font-size: clamp(16px, 2.6vh, 26px); color: var(--c-text-light); }
.impact__col p { color: var(--c-sub-light); font-size: clamp(11px, 1.6vh, 16px); line-height: 1.4; }

/* ============ RESPONSIVE — MOBILE ============ */
/* Font sizes and vertical spacing above are already fluid (clamp() tied to
   vh, so every section fits the screen height on its own with no scroll).
   These breakpoints only handle layout that depends on available WIDTH:
   switching grids to a single column, the mobile nav menu, etc. */
@media (max-width: 640px) {
  :root { --nav-clear: 76px; } /* nav is shorter on mobile (~63px) */
  body { font-size: 16px; }
  .container { padding: 0 20px; }

  /* Narrower width means more text wraps onto extra lines at any given
     font-size, so mobile needs its own (smaller) clamp ranges rather than
     reusing the desktop vh-only ones. */
  .section-title { font-size: clamp(19px, 4.4vh, 28px); margin-bottom: clamp(8px, 1.6vh, 20px); }
  .pull-quote { font-size: clamp(15px, 3.2vh, 24px); line-height: 1.25; margin-bottom: clamp(8px, 1.6vh, 18px); }
  .problem__copy { font-size: clamp(11px, 1.5vh, 14px); line-height: 1.35; gap: clamp(5px, 1vh, 10px); margin-bottom: clamp(8px, 1.6vh, 20px); }
  .stat-value { font-size: clamp(13px, 2.6vh, 22px); }
  .stat-caption { font-size: 8px; }
  /* The icon is decorative; dropping it on mobile buys back real vertical
     room across 4 stacked steps. */
  .step__icon { display: none; }
  .step__desc { font-size: clamp(10px, 1.4vh, 12px); line-height: 1.3; }
  .step__title { font-size: clamp(13px, 2.2vh, 18px); }
  .spectrum__caption { font-size: clamp(11px, 1.5vh, 14px); margin-bottom: clamp(8px, 1.8vh, 20px); }
  .impact__col p { font-size: clamp(10px, 1.4vh, 13px); }
  .impact__col h3 { font-size: clamp(14px, 2.2vh, 20px); }

  .nav__inner { padding: 14px 20px; }
  .nav__links {
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: var(--c-night-1);
    flex-direction: column;
    gap: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }
  .nav__links.open { max-height: 320px; }
  .nav__links a {
    padding: 16px 20px;
    border-bottom: 1px solid rgba(142,154,144,0.15);
  }
  .nav__toggle { display: flex; }
  .badge { display: none; }

  .hero__content { padding: 0 20px; }
  .hero__actions { flex-direction: column; align-items: stretch; }

  /* Stay 3-across even on mobile — stacking triples the row's height, and
     these values are short placeholders, so 3 narrow columns still work. */
  .stat-row { gap: clamp(8px, 1.6vh, 16px) 10px; }

  .timeline { grid-template-columns: 1fr; gap: clamp(6px, 1.2vh, 14px); padding-top: clamp(8px, 1.5vh, 20px); }
  .timeline__line { display: none; }
  .step {
    padding: clamp(6px, 1.2vh, 14px) 0 clamp(6px, 1.2vh, 14px) 20px;
    border-left: 1px solid rgba(242,140,40,0.35);
  }
  .step__dot { top: clamp(6px, 1.2vh, 14px); left: -8px; }
  .step__icon { margin-bottom: clamp(4px, 1vh, 10px); }
  .step__num { margin-bottom: clamp(4px, 1vh, 10px); }

  .spectrum-bar { flex-direction: column; height: auto; }
  .spectrum-zone { padding: clamp(8px, 1.6vh, 18px) 16px; }
  .spectrum-zone--human { flex: none; }
  .spectrum-wave { display: none; }

  .tech__grid { grid-template-columns: 1fr; gap: clamp(12px, 2.5vh, 30px); }
  .tech__art svg { height: clamp(70px, 18vh, 300px); }
  .spec-row { grid-template-columns: 110px 1fr; gap: 14px; }

  .impact__cols { grid-template-columns: 1fr; gap: clamp(10px, 2vh, 24px); }
}

@media (min-width: 641px) and (max-width: 1024px) {
  /* Art stacks above specs here, so their heights add together instead of
     sharing a row — needs a smaller share of the vh budget than the
     side-by-side desktop layout. */
  .tech__grid { grid-template-columns: 1fr; gap: clamp(10px, 2vh, 30px); }
  .tech__art svg { height: clamp(80px, 16vh, 300px); }
}

/* ============ SCROLL MASCOT ============ */
/* A little elephant that walks along the bottom of the screen, its
   horizontal position tied to scroll progress (JS sets its transform), so
   it treks from the night side of the site to the dawn side as you go. */
.scroll-elephant {
  position: fixed;
  bottom: 16px;
  left: 0;
  width: 64px;
  height: auto;
  color: var(--c-accent);
  z-index: 60;
  pointer-events: none;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
  transform: translateX(14px);
}
.scroll-elephant svg { display: block; width: 100%; height: auto; overflow: visible; }
.ele-leg-front,
.ele-leg-back {
  transform-box: fill-box;
  transform-origin: center top;
  animation: eleWalk 0.6s ease-in-out infinite;
}
.ele-leg-back { animation-delay: 0.3s; }
.ele-body {
  transform-box: fill-box;
  transform-origin: center;
  animation: eleBob 0.6s ease-in-out infinite;
}
@keyframes eleWalk {
  0%, 100% { transform: rotate(-16deg); }
  50% { transform: rotate(16deg); }
}
@keyframes eleBob {
  0%, 50%, 100% { transform: translateY(0); }
  25%, 75% { transform: translateY(-2px); }
}
@media (prefers-reduced-motion: reduce) {
  .ele-leg-front, .ele-leg-back, .ele-body { animation: none; }
}
@media (max-width: 640px) {
  .scroll-elephant { width: 44px; bottom: 10px; }
}