/* ═══════════════════════════════════════════════════════════
   COPPER FOX — THE VOYAGER
   Cinematic scroll experience · GSAP + Lenis
   ═══════════════════════════════════════════════════════════ */

:root {
  --copper:        #c97a5e;
  --copper-light:  #e8ac97;
  --copper-deep:   #a05a40;

  --dark-bg:       #14100b;
  --dark-soft:     #1c1710;
  --dark-fg:       #efe6d2;
  --light-bg:      #f6f2e9;
  --light-soft:    #ebe5d7;
  --light-fg:      #211b11;

  --bg:       var(--dark-bg);
  --bg-soft:  var(--dark-soft);
  --fg:       var(--dark-fg);
  --fg-dim:   rgba(240, 234, 225, .55);
  --line:     rgba(240, 234, 225, .12);
  --card:     rgba(240, 234, 225, .04);
  --accent:   var(--copper);          /* text-accent; darkened on light theme for contrast */
  --ground:   rgba(201, 122, 94, .22); /* product ground glow: copper on dark, shadow on light */

  --font-display: 'Big Shoulders Display', 'Arial Narrow', sans-serif;
  --font-stencil: 'Big Shoulders Stencil Display', 'Big Shoulders Display', sans-serif;
  --font-body:    'Archivo', Arial, sans-serif;
  --font-mono:    'Share Tech Mono', 'Courier New', monospace;

  /* type scale — one system across every section */
  --text-h2:    clamp(52px, 7.2vw, 118px);   /* primary section headline */
  --text-h2-md: clamp(44px, 5.6vw, 92px);    /* half-column / secondary headline */
  --text-h2-sm: clamp(36px, 4.6vw, 68px);    /* card-level headline */

  --radius:    20px;
  --radius-lg: 24px;

  --ease-expo: cubic-bezier(.16, 1, .3, 1);
  --pad: clamp(20px, 5vw, 72px);
}

html[data-theme="light"] {
  --bg:      var(--light-bg);
  --bg-soft: var(--light-soft);
  --fg:      var(--light-fg);
  --fg-dim:  rgba(23, 21, 18, .6);
  --line:    rgba(23, 21, 18, .14);
  --card:    rgba(23, 21, 18, .04);
  --accent:  #a3573c;
  --ground:  rgba(62, 44, 32, .32);
}

/* ─── Reset ─────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scrollbar-width: thin; scrollbar-color: var(--copper) var(--light-soft); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--light-soft); }
::-webkit-scrollbar-thumb { background: var(--copper); border-radius: 3px; }

::selection { background: var(--copper); color: var(--dark-bg); }

body {
  font-family: var(--font-body);
  font-weight: 300;
  background: var(--bg);
  color: var(--fg);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  transition: background-color 1s var(--ease-expo), color 1s var(--ease-expo);
}

/* film grain */
body::after {
  content: '';
  position: fixed; inset: -50%;
  pointer-events: none;
  background-image: url('data:image/svg+xml,%3Csvg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"%3E%3Cfilter id="n"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="3" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="100%25" height="100%25" filter="url(%23n)"/%3E%3C/svg%3E');
  opacity: .035;
  z-index: 9000;
  mix-blend-mode: overlay;
  animation: grain 900ms steps(2) infinite;
}
@keyframes grain {
  0%, 100% { transform: translate(0, 0); }
  25%      { transform: translate(2%, -3%); }
  50%      { transform: translate(-3%, 2%); }
  75%      { transform: translate(3%, 3%); }
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; background: none; border: none; font: inherit; color: inherit; }

a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid var(--copper);
  outline-offset: 4px;
  border-radius: 2px;
}

.mono {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: .1em;
}

.kicker { color: var(--accent); margin-bottom: 22px; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: .94;
  letter-spacing: .012em;
  text-transform: uppercase;
}
em {
  font-style: normal;
  font-family: var(--font-stencil);
  font-weight: 700;
  color: var(--accent);
}

/* split-line masks */
.split-mask .line {
  display: block;
  overflow: hidden;
  padding-bottom: .1em;
  margin-bottom: -.1em;
}
.split-mask .line > .line-inner { display: block; will-change: transform; }

/* word reveal targets */
[data-reveal-words] .w {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
}
[data-reveal-words] .w > span { display: inline-block; will-change: transform; }

/* ═══════════════ PRELOADER ═══════════════ */
.preloader {
  position: fixed; inset: 0;
  z-index: 10000;
  background: var(--dark-bg);
  display: flex; align-items: center; justify-content: center;
}
.preloader-inner {
  width: min(420px, 78vw);
  display: flex; flex-direction: column; gap: 26px;
}
.preloader-mark { width: 100%; opacity: 0; transform: translateY(14px); }
.preloader-meta {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--font-mono);
  color: rgba(240, 234, 225, .55);
}
.preloader-label { font-size: 10px; letter-spacing: .18em; }
.preloader-count { font-size: 15px; color: var(--copper); letter-spacing: .1em; }
.preloader-bar {
  height: 1px; background: rgba(240, 234, 225, .14);
  overflow: hidden;
}
.preloader-bar i {
  display: block; height: 100%; width: 100%;
  background: var(--copper);
  transform: scaleX(0); transform-origin: left;
}
.preloader-cleared {
  position: absolute;
  left: 50%; top: 34%;
  transform: translateX(-50%) rotate(-8deg);
  font-family: var(--font-stencil);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(22px, 3vw, 34px);
  letter-spacing: .08em;
  color: var(--copper);
  border: 3px solid var(--copper);
  border-radius: 8px;
  padding: 8px 20px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
}
.preloader-inner { position: relative; }

/* ═══════════════ CURSOR ═══════════════ */
.cursor { position: fixed; inset: 0; pointer-events: none; z-index: 9500; }
.cursor-dot, .cursor-ring {
  position: absolute; top: 0; left: 0;
  border-radius: 50%;
  will-change: transform;
}
.cursor-dot {
  width: 6px; height: 6px;
  background: var(--copper);
  margin: -3px 0 0 -3px;
}
.cursor-ring {
  width: 38px; height: 38px;
  margin: -19px 0 0 -19px;
  border: 1px solid rgba(201, 122, 94, .5);
  display: flex; align-items: center; justify-content: center;
  transition: width .4s var(--ease-expo), height .4s var(--ease-expo),
              margin .4s var(--ease-expo),
              background-color .4s, border-color .4s, opacity .3s;
}
.cursor-label {
  font-family: var(--font-mono);
  font-size: 9px; letter-spacing: .16em;
  color: var(--dark-bg);
  opacity: 0; transition: opacity .25s;
  white-space: nowrap;
}
.cursor.-link .cursor-ring {
  width: 56px; height: 56px; margin: -28px 0 0 -28px;
  background: rgba(201, 122, 94, .12);
}
.cursor.-sm .cursor-ring { width: 48px; height: 48px; margin: -24px 0 0 -24px; }
.cursor.-drag .cursor-ring {
  width: 78px; height: 78px; margin: -39px 0 0 -39px;
  background: var(--copper); border-color: var(--copper);
}
.cursor.-drag .cursor-label { opacity: 1; }
.cursor.-drag .cursor-dot { opacity: 0; }
.cursor.-hide .cursor-ring { opacity: 0; }

@media (hover: none), (pointer: coarse) {
  .cursor { display: none; }
}

/* ═══════════════ SCROLL PROGRESS — flight path ═══════════════ */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0;
  height: 18px;
  z-index: 8000;
  pointer-events: none;
}
.scroll-progress::before {          /* dashed route */
  content: '';
  position: absolute; top: 8px; left: 0; right: 0;
  height: 0;
  border-top: 1.5px dashed color-mix(in srgb, var(--fg) 22%, transparent);
}
.progress-trail {                   /* flown segment */
  position: absolute; top: 8px; left: 0;
  width: 100%; height: 2px;
  margin-top: -1px;
  background: var(--copper);
  transform: scaleX(0); transform-origin: left;
}
.progress-plane {
  position: absolute; top: 0; left: 0;
  font-size: 15px;
  line-height: 18px;
  color: var(--accent);
  transform: translateX(-4px);
  filter: drop-shadow(0 1px 2px rgba(35, 25, 18, .3));
}

/* ═══════════════ NAV ═══════════════ */
.site-nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 7000;
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px var(--pad);
  transition: transform .6s var(--ease-expo), background-color .5s,
              padding .5s, border-color .5s;
  border-bottom: 1px solid transparent;
}
.site-nav.is-hidden { transform: translateY(-110%); }
.site-nav.is-scrolled {
  background: color-mix(in srgb, var(--bg) 75%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--line);
  padding-block: 14px;
}
.nav-logo img { height: 16px; width: auto; }
html[data-theme="light"] .nav-logo img { filter: brightness(.6) saturate(1.5); }

.nav-links { display: flex; gap: clamp(18px, 3vw, 42px); }

/* rolling text link */
.nav-link span {
  position: relative;
  display: inline-block;
  overflow: hidden;
  font-size: 13px;
  letter-spacing: .06em;
  line-height: 1.5;
}
.nav-link span::before {
  content: attr(data-text);
  position: absolute; left: 0; top: 100%;
  color: var(--accent);
}
.nav-link span, .nav-link span::before { transition: transform .5s var(--ease-expo); }
.nav-link:hover span { transform: translateY(-100%); }
.nav-link:hover span::before { transform: translateY(0); }

.nav-right { display: flex; align-items: center; gap: 22px; }
.nav-clock { display: flex; align-items: center; gap: 8px; color: var(--fg-dim); }
.clock-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--copper);
  animation: pulse 2.4s infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

/* pill button w/ fill sweep */
.btn-pill {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 12px 26px;
  border: 1px solid var(--accent);
  border-radius: 100px;
  overflow: hidden;
  isolation: isolate;
  transition: border-color .4s;
}
.btn-pill-fill {
  position: absolute; inset: -2px;
  background: var(--accent);
  border-radius: inherit;
  transform: translateY(102%);
  transition: transform .5s var(--ease-expo);
  z-index: -1;
}
.btn-pill:hover .btn-pill-fill,
.btn-pill:focus-visible .btn-pill-fill { transform: translateY(0); }
.btn-pill-text {
  font-size: 13px; letter-spacing: .08em; font-weight: 400;
  color: var(--accent);
  transition: color .4s;
}
.btn-pill:hover .btn-pill-text,
.btn-pill:focus-visible .btn-pill-text { color: var(--bg); }
.btn-pill-solid { background: var(--copper); }
.btn-pill-solid .btn-pill-text { color: var(--dark-bg); }
.btn-pill-solid .btn-pill-fill { background: var(--copper-light); }
.btn-pill-solid:hover .btn-pill-text { color: var(--dark-bg); }

/* ═══════════════ HERO ═══════════════ */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: center;
  padding: clamp(90px, 13vh, 150px) var(--pad) 60px;
  overflow: hidden;
}
.hero-embers, .finale-embers {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}
.hero-halo {
  position: absolute;
  top: 50%; left: 50%;
  width: 115%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(201, 122, 94, .18) 0%, rgba(201, 122, 94, .06) 42%, transparent 68%);
  border-radius: 50%;
  pointer-events: none;
}

.hero-frame { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
.hero-frame-item {
  position: absolute;
  color: var(--fg-dim);
  font-size: 10px;
}
.hf-tl { top: 90px; left: var(--pad); }
.hf-tr { top: 90px; right: var(--pad); }
.hf-bl { bottom: 30px; left: var(--pad); }
.hf-br { bottom: 30px; right: var(--pad); }

.hero-content { position: relative; z-index: 3; max-width: 660px; margin-top: 5vh; }
.hero-kicker { margin-bottom: 26px; color: var(--accent); }
.hero-title {
  font-size: clamp(72px, 11.5vw, 190px);
  margin-bottom: 26px;
}
.hero-title .line {
  display: block; overflow: hidden;
  padding-bottom: .1em; margin-bottom: -.1em;
}
.hero-title .line-inner { display: block; }
.hero-sub {
  max-width: 400px;
  font-size: clamp(15px, 1.3vw, 17px);
  line-height: 1.7;
  color: var(--fg-dim);
  margin-bottom: 44px;
}
.hero-actions { display: flex; align-items: center; gap: 26px; }
.hero-cta-note { color: var(--fg-dim); font-size: 10px; line-height: 1.9; }

/* rubber-stamp CTA */
.btn-stamp {
  position: relative;
  width: 142px; height: 142px;
  border-radius: 50%;
  border: 2.5px solid var(--accent);
  color: var(--accent);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 6px;
  flex: none;
  transform: rotate(-8deg);
  transition: transform .35s var(--ease-expo), box-shadow .35s, background-color .35s;
}
.stamp-ring {
  position: absolute; inset: 7px;
  border: 1px dashed var(--accent);
  border-radius: 50%;
  opacity: .75;
}
.btn-stamp::before {
  content: '';
  position: absolute; inset: -8px;
  border-radius: 50%;
  border: 1px solid var(--accent);
  animation: cta-pulse 3.2s ease-out infinite;
  pointer-events: none;
}
.stamp-text {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 21px;
  line-height: .95;
  text-align: center;
  letter-spacing: .03em;
}
.stamp-sub { font-size: 9px; letter-spacing: .22em; opacity: .8; }
.btn-stamp:hover {
  transform: rotate(-2deg) scale(.94);
  background: rgba(163, 87, 60, .08);
  box-shadow: 0 3px 0 rgba(35, 25, 18, .25), inset 0 0 24px rgba(163, 87, 60, .1);
}
.btn-stamp:active { transform: rotate(-1deg) scale(.88); }
.btn-stamp-lg { width: 178px; height: 178px; }
.btn-stamp-lg .stamp-text { font-size: 27px; }
@keyframes cta-pulse {
  0%        { transform: scale(.9); opacity: .5; }
  70%, 100% { transform: scale(1.35); opacity: 0; }
}
@keyframes spin { to { transform: rotate(360deg); } }

/* hero product — floats free on the page */
.hero-stage {
  position: relative; z-index: 2;
  justify-self: stretch;
  align-self: center;
  height: min(72vh, 680px);
  display: grid; place-items: center;
  will-change: transform;
}
.hero-product {
  position: relative; z-index: 2;
  width: min(26vw, 345px);
}
.hero-product-move { position: relative; will-change: transform; }
.hero-pack {
  width: 100%;
}
.hero-pack-shadow {
  position: absolute; left: 4%; right: 4%; bottom: -7%;
  height: 44px;
  background: radial-gradient(ellipse, rgba(62, 44, 32, .36), transparent 70%);
  filter: blur(14px);
}

/* spec pins: crosshair markers with tag-chip callouts */
.spec-pins { position: absolute; inset: 0; z-index: 2; }
.spec-pin {
  position: absolute;
  left: var(--px); top: var(--py);
  width: 30px; height: 30px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
}
.spec-pin i {
  position: absolute; inset: 3px;
  border: 1.5px solid var(--copper);
  border-radius: 50%;
  background: rgba(235, 229, 215, .12);
  transition: background-color .3s, transform .4s var(--ease-expo);
}
.spec-pin i::before, .spec-pin i::after {
  content: '';
  position: absolute; top: 50%; left: 50%;
  background: var(--copper);
  transform: translate(-50%, -50%);
}
.spec-pin i::before { width: 10px; height: 1.5px; }
.spec-pin i::after { width: 1.5px; height: 10px; }
.spec-pin::before {                 /* pulse */
  content: '';
  position: absolute; inset: 0;
  border: 1px solid var(--copper);
  border-radius: 50%;
  animation: cta-pulse 2.6s ease-out infinite;
}
.spec-pin::after {                  /* tag chip */
  content: attr(data-tip);
  position: absolute;
  left: calc(100% + 10px); top: 50%;
  transform: translateY(-50%) translateX(-6px);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .1em;
  white-space: nowrap;
  color: #211b11;
  background: #f3e9cf;
  border: 1.5px solid rgba(33, 27, 17, .75);
  border-radius: 5px;
  padding: 6px 10px;
  box-shadow: 0 6px 14px rgba(35, 25, 18, .25);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s, transform .45s var(--ease-expo);
}
.spec-pin:hover i, .spec-pin:focus-visible i { background: var(--copper); transform: scale(1.15); }
.spec-pin:hover i::before, .spec-pin:hover i::after,
.spec-pin:focus-visible i::before, .spec-pin:focus-visible i::after { background: #ebe5d7; }
.spec-pin:hover::after, .spec-pin:focus-visible::after {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

/* rotating passport stamp */
.hero-stamp {
  position: absolute;
  top: 9%; left: 6%;
  width: clamp(96px, 9vw, 148px);
  color: var(--accent);
  opacity: .55;
  transform: rotate(-12deg);
  animation: spin 60s linear infinite;
  pointer-events: none;
  z-index: 1;
}
.hero-stamp text {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .18em;
  fill: currentColor;
}

/* luggage tag hanging from the handle */
.lug-tag {
  position: absolute;
  top: 2.5%; left: 58%;
  z-index: 3;
  transform-origin: 50% 0;
  will-change: transform;
}
.lug-string {
  display: block;
  width: 2px; height: 34px;
  margin: 0 auto;
  background: rgba(33, 27, 17, .55);
  border-radius: 2px;
}
.lug-card {
  position: relative;
  width: 128px;
  padding: 16px 12px 10px;
  background: #f3e9cf;
  border: 1.5px solid rgba(33, 27, 17, .75);
  border-radius: 8px;
  box-shadow: 0 10px 22px rgba(35, 25, 18, .3);
  display: flex; flex-direction: column; gap: 4px;
  color: #211b11;
}
.lug-card::before {  /* metal grommet */
  content: '';
  position: absolute; top: 5px; left: 50%;
  width: 12px; height: 12px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, #f6f2e9 34%, #b98a63 40%, #8a5a3a 100%);
}
.lug-card b {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 19px;
  line-height: 1;
  margin-top: 4px;
}
.lug-code, .lug-route { font-size: 9px; letter-spacing: .12em; color: rgba(33, 27, 17, .65); }
.lug-barcode {
  height: 15px;
  margin-top: 5px;
  background: repeating-linear-gradient(90deg,
    #211b11 0 2px, transparent 2px 4px,
    #211b11 4px 5px, transparent 5px 8px,
    #211b11 8px 11px, transparent 11px 13px);
}
.hero-product-tag {
  position: absolute;
  right: 8%; bottom: 4px;
  display: flex; align-items: center; gap: 10px;
  color: var(--fg-dim);
  z-index: 3;
}
.hero-product-tag b { color: var(--accent); font-weight: 500; }
.hero-product-tag i { width: 46px; height: 1px; background: var(--line); }

.hero-wordmark {
  position: absolute;
  left: 50%; bottom: 7vh;
  transform: translateX(-50%);
  width: min(86vw, 1300px);
  opacity: .05;
  pointer-events: none;
  z-index: 1;
}

/* ═══════════════ DEPARTURE BOARD ═══════════════ */
.board {
  background: var(--dark-bg);
  border-top: 3px solid var(--copper);
  padding: 0 0 clamp(26px, 4vh, 40px);
  overflow: hidden;
}
.board-head {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 14px var(--pad);
  color: rgba(239, 230, 210, .55);
  font-size: 11px;
  border-bottom: 1px solid rgba(239, 230, 210, .1);
  margin-bottom: clamp(22px, 3.6vh, 34px);
}
.board-head span { display: flex; align-items: center; gap: 10px; }
.board-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--copper);
  animation: pulse 2.4s infinite;
}
.board-line {
  display: flex; justify-content: center; gap: 5px;
  padding: 0 var(--pad);
  flex-wrap: nowrap;
}
.flap {
  position: relative;
  width: clamp(20px, 2.6vw, 44px);
  height: clamp(30px, 3.8vw, 62px);
  display: grid; place-items: center;
  background: linear-gradient(180deg, #262019 48%, #1b1610 52%);
  border-radius: 5px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(19px, 2.4vw, 40px);
  color: var(--dark-fg);
  box-shadow: inset 0 -2px 4px rgba(0,0,0,.5), 0 2px 3px rgba(0,0,0,.35);
  transition: transform .07s;
}
.flap::after {
  content: '';
  position: absolute; left: 0; right: 0; top: 50%;
  height: 2px;
  background: rgba(0, 0, 0, .55);
  transform: translateY(-50%);
}
.flap.is-flip { transform: scaleY(.55); filter: brightness(1.25); }
.flap.is-space { background: linear-gradient(180deg, #1c1712 48%, #151009 52%); box-shadow: inset 0 -2px 4px rgba(0,0,0,.4); }

/* crate stencil section numbers */
.crate-num {
  position: absolute;
  top: clamp(64px, 9vh, 100px);
  right: var(--pad);
  font-family: var(--font-stencil);
  font-weight: 700;
  font-size: clamp(100px, 15vw, 240px);
  line-height: 1;
  color: var(--fg);
  opacity: .06;
  transform: rotate(-6deg);
  pointer-events: none;
  z-index: 0;
}

/* ═══════════════ ORBIT ═══════════════ */
.orbit { position: relative; }
.orbit-pin {
  position: relative;
  min-height: 100svh;
  display: flex; flex-direction: column;
  justify-content: center;
  padding: clamp(80px, 11vh, 120px) var(--pad) 40px;
}
.orbit-header { margin-bottom: clamp(20px, 4vh, 48px); }
.orbit-header h2 { font-size: var(--text-h2); }

.orbit-stage {
  position: relative;
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(24px, 4vw, 80px);
}

.orbit-views {
  position: relative;
  height: min(58vh, 580px);
  display: grid; place-items: center;
}
.orbit-film {
  position: relative;
  height: 100%;
  aspect-ratio: 404 / 639;
  will-change: transform, opacity;
  touch-action: pan-y;      /* horizontal drags spin the bag; vertical still scrolls */
  cursor: grab;
  user-select: none;
}
.orbit-film.is-spinning { cursor: grabbing; }
.orbit-canvas, .orbit-poster {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
}
.orbit-poster { transition: opacity .6s; }
.orbit-film.is-live .orbit-poster { opacity: 0; }
.orbit-load {
  position: absolute; left: 50%; bottom: 18px;
  transform: translateX(-50%);
  color: rgba(240, 234, 225, .6);
  background: rgba(14, 13, 11, .55);
  padding: 6px 12px;
  border-radius: 100px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-size: 9px;
  transition: opacity .5s;
}
.orbit-film.is-live .orbit-load { opacity: 0; }
.orbit-ground {
  position: absolute; bottom: 4%; left: 20%; right: 20%;
  height: 34px;
  background: radial-gradient(ellipse, var(--ground), transparent 70%);
  filter: blur(10px);
}

.orbit-rings { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.ring {
  position: absolute;
  border: 1px solid rgba(201, 122, 94, .15);
  border-radius: 50%;
  will-change: transform;
}
.ring-a { width: min(46vw, 560px); height: min(46vw, 560px); border-style: dashed; }
.ring-b { width: min(34vw, 420px); height: min(34vw, 420px); }

.orbit-copy { position: relative; min-height: 320px; }
.orbit-caption {
  position: absolute; inset: 0 0 auto 0;
  opacity: 0;
  visibility: hidden;
  will-change: transform, opacity;
}
.orbit-cap-label { display: block; color: var(--accent); margin-bottom: 18px; }
.orbit-caption h3 { font-size: var(--text-h2-sm); margin-bottom: 20px; }
.orbit-caption p { max-width: 430px; line-height: 1.75; color: var(--fg-dim); font-size: 15px; }

.orbit-progress {
  position: absolute; bottom: 0; left: 0; right: 0;
  display: flex; align-items: center; gap: 18px;
}
.orbit-count { color: var(--fg-dim); }
.orbit-count b { color: var(--accent); font-weight: 500; }
.orbit-rail { flex: 1; max-width: 220px; height: 1px; background: var(--line); }
.orbit-rail i {
  display: block; height: 100%;
  background: var(--copper);
  transform: scaleX(.25); transform-origin: left;
  will-change: transform;
}
.orbit-hud {
  position: absolute; top: 0; right: 0;
  color: var(--fg-dim);
  border: 1px solid var(--line);
  padding: 8px 14px;
  border-radius: 100px;
}

/* ═══════════════ CRAFT — horizontal scroll ═══════════════ */
.craft { position: relative; }
.craft-pin {
  position: relative;
  min-height: 100svh;
  display: flex; flex-direction: column;
  justify-content: center;
  overflow: hidden;
  padding: clamp(80px, 11vh, 130px) 0 60px;
}
.craft-header {
  padding: 0 var(--pad);
  margin-bottom: clamp(30px, 6vh, 64px);
  display: flex; align-items: flex-end; justify-content: space-between; gap: 30px;
  flex-wrap: wrap;
}
.craft-header h2 { font-size: var(--text-h2); }
.craft-hint { color: var(--fg-dim); }

.craft-track {
  display: flex; gap: clamp(18px, 2vw, 30px);
  padding: 0 var(--pad);
  width: max-content;
  will-change: transform;
}
.craft-card {
  position: relative;
  width: clamp(300px, 34vw, 430px);
  min-height: clamp(320px, 44vh, 430px);
  padding: 34px;
  border: 1px solid rgba(240, 234, 225, .1);
  border-radius: var(--radius);
  background: linear-gradient(165deg, #1b1712, #12100d);
  color: var(--dark-fg);
  display: flex; flex-direction: column;
  overflow: hidden;
  transition: border-color .5s;
  box-shadow: 0 24px 50px rgba(35, 25, 18, .18);
}
.craft-card em { color: var(--copper-light); }
.craft-card:hover { border-color: rgba(201, 122, 94, .55); }
.craft-card-glow {
  position: absolute; inset: 0;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(201, 122, 94, .13), transparent 65%);
  opacity: 0; transition: opacity .5s;
  pointer-events: none;
}
.craft-card:hover .craft-card-glow { opacity: 1; }
.craft-index {
  color: var(--copper);
  font-size: 13px;
  margin-bottom: auto;
}
.craft-card h3 {
  font-size: clamp(26px, 2.6vw, 38px);
  margin: 26px 0 16px;
}
.craft-card p { color: rgba(240, 234, 225, .6); line-height: 1.7; font-size: 15px; max-width: 330px; }
.craft-card .btn-pill { border-color: var(--copper); }
.craft-card .btn-pill-text { color: var(--copper); }
.craft-card .btn-pill-fill { background: var(--copper); }
.craft-card .btn-pill:hover .btn-pill-text { color: var(--dark-bg); }
.craft-card-cta {
  align-items: flex-start; justify-content: center; gap: 28px;
}
.craft-card-cta h3 { font-size: clamp(34px, 3.4vw, 52px); margin: 0; }

/* ═══════════════ MATERIALS ═══════════════ */
.materials {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(30px, 5vw, 90px);
  align-items: center;
  padding: clamp(90px, 14vh, 170px) var(--pad);
}
.materials-media {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  aspect-ratio: .94;
  background: #0a0a09;
}
.materials-media img {
  width: 100%; height: 118%;
  object-fit: cover;
  will-change: transform;
}
.materials-copy h2 { font-size: var(--text-h2-md); margin-bottom: 44px; }
.materials-list { list-style: none; }
.materials-list li {
  position: relative;
  display: flex; gap: 22px;
  padding: 22px 0;
  border-top: 1px solid var(--line);
  transition: padding-left .45s var(--ease-expo);
}
.materials-list li::after {
  content: '';
  position: absolute; left: 0; bottom: -1px;
  width: 100%; height: 1.5px;
  background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform .55s var(--ease-expo);
  z-index: 1;
}
.materials-list li:hover { padding-left: 12px; }
.materials-list li:hover::after { transform: scaleX(1); }
.materials-list li:last-child { border-bottom: 1px solid var(--line); }
.materials-list .mono { color: var(--accent); padding-top: 3px; }
.materials-list strong {
  display: block;
  font-weight: 400;
  font-size: 17px;
  margin-bottom: 6px;
}
.materials-list p { color: var(--fg-dim); font-size: 15px; line-height: 1.65; }

/* ═══════════════ STORY (light) ═══════════════ */
.story {
  position: relative;
  padding: clamp(110px, 16vh, 190px) var(--pad) clamp(80px, 10vh, 130px);
  text-align: center;
}
.story-title { font-size: clamp(46px, 7.4vw, 118px); margin-bottom: clamp(40px, 7vh, 80px); }
.story-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 4vw, 60px);
  max-width: 980px;
  margin: 0 auto clamp(60px, 9vh, 110px);
  text-align: left;
}
.story-cols p { line-height: 1.8; color: var(--fg-dim); font-size: clamp(15px, 1.25vw, 17px); }
.story-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  max-width: 1100px;
  margin: 0 auto;
}
.stat {
  padding: clamp(24px, 4vh, 44px) 10px 0;
  display: flex; flex-direction: column; gap: 12px;
  align-items: center;
}
.stat + .stat { border-left: 1px solid var(--line); }
.stat-num {
  display: block;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(44px, 5.4vw, 84px);
  line-height: 1;
  color: var(--accent);
  will-change: transform;
}
.stat .mono { color: var(--fg-dim); font-size: 10px; }

/* ═══════════════ FOUNDER (light) ═══════════════ */
.founder { padding: clamp(40px, 7vh, 90px) var(--pad) clamp(90px, 13vh, 150px); }
.founder-card {
  max-width: 780px;
  margin: 0 auto;
  padding: clamp(36px, 6vw, 80px);
  border: 1px solid rgba(201, 122, 94, .22);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(120% 80% at 85% 0%, rgba(201, 122, 94, .1), transparent 50%),
    linear-gradient(165deg, #1a1611, #0e0d0b);
  color: var(--dark-fg);
  position: relative;
  box-shadow: 0 36px 80px rgba(35, 25, 18, .22);
}
.founder-card .kicker { color: var(--copper); }
.founder-card em { color: var(--copper-light); }
.founder-card h2 { font-size: var(--text-h2-sm); margin-bottom: 36px; }
.founder-text p {
  line-height: 1.85;
  color: rgba(240, 234, 225, .62);
  font-size: clamp(15px, 1.25vw, 17px);
  margin-bottom: 22px;
}
.founder-signoff { margin-top: 40px; }
.founder-name {
  font-family: 'Caveat', cursive;
  font-weight: 600;
  font-size: clamp(34px, 3.4vw, 48px);
  color: var(--copper-light);
  margin-bottom: 8px;
  text-transform: none;
}
.founder-signoff .mono { color: rgba(240, 234, 225, .5); font-size: 10px; }

/* ═══════════════ VOICES (light) ═══════════════ */
.voices { padding: 0 0 clamp(90px, 13vh, 150px); overflow: hidden; }
.voices-header {
  padding: 0 var(--pad);
  margin-bottom: clamp(34px, 6vh, 60px);
  display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; flex-wrap: wrap;
}
.voices-header h2 { font-size: var(--text-h2-md); }
.voices-hint { color: var(--fg-dim); }
.voices-strip {
  overflow-x: auto;
  scrollbar-width: none;
  cursor: grab;
  -webkit-overflow-scrolling: touch;
}
.voices-strip::-webkit-scrollbar { display: none; }
.voices-strip.is-dragging { cursor: grabbing; }
.voices-row {
  display: flex; gap: clamp(18px, 2vw, 28px);
  padding: 4px var(--pad);
  width: max-content;
}
.voice-card {
  width: clamp(300px, 30vw, 420px);
  padding: 34px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  display: flex; flex-direction: column; gap: 20px;
  transition: transform .6s var(--ease-expo), border-color .5s;
  user-select: none;
}
.voice-card:hover { transform: translateY(-6px); border-color: rgba(201, 122, 94, .5); }
.voice-stars { color: var(--accent); letter-spacing: .3em; }
.voice-card p {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(16px, 1.4vw, 20px);
  line-height: 1.55;
}
.voice-card footer { margin-top: auto; font-size: 14px; }
.voice-card footer .mono {
  display: block; margin-top: 4px;
  color: var(--fg-dim); font-size: 10px;
}

/* ═══════════════ FAQ (light) ═══════════════ */
.faq {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(40px, 6vw, 110px);
  padding: 0 var(--pad) clamp(110px, 16vh, 190px);
}
.faq-intro h2 { font-size: var(--text-h2-md); margin-bottom: 24px; }
.faq-desc { color: var(--fg-dim); line-height: 1.75; max-width: 340px; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item:first-child { border-top: 1px solid var(--line); }
.faq-q {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 26px 4px;
  text-align: left;
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  font-size: clamp(22px, 2.2vw, 34px);
  letter-spacing: .02em;
  transition: color .4s, padding-left .5s var(--ease-expo);
}
.faq-q:hover { color: var(--accent); padding-left: 14px; }
.faq-icon {
  position: relative;
  width: 34px; height: 34px; flex: none;
  border: 1px solid var(--line);
  border-radius: 50%;
  transition: transform .6s var(--ease-expo), background-color .4s, border-color .4s, color .4s;
}
.faq-icon::before, .faq-icon::after {
  content: '';
  position: absolute; top: 50%; left: 50%;
  width: 11px; height: 1.5px;
  background: currentColor;
  transform: translate(-50%, -50%);
}
.faq-icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq-item.is-open .faq-icon {
  transform: rotate(135deg);
  background: var(--copper); border-color: var(--copper);
  color: var(--dark-bg);
}
.faq-a { overflow: hidden; height: 0; }
.faq-a p {
  padding: 2px 4px 28px;
  max-width: 560px;
  color: var(--fg-dim);
  line-height: 1.75;
  font-size: 15px;
}

/* ═══════════════ FINALE (dark) ═══════════════ */
.finale {
  position: relative;
  min-height: 92svh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  padding: clamp(100px, 14vh, 160px) var(--pad);
  overflow: hidden;
}
.finale-title {
  font-size: clamp(64px, 12vw, 200px);
  margin-bottom: 34px;
}
.finale-sub { color: var(--fg-dim); margin-bottom: 54px; font-size: clamp(15px, 1.3vw, 18px); }

/* ═══════════════ FOOTER ═══════════════ */
.site-footer {
  border-top: 1px solid var(--line);
  padding: clamp(60px, 9vh, 100px) var(--pad) 30px;
  position: relative;
  overflow: hidden;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 40px;
  margin-bottom: clamp(50px, 8vh, 90px);
}
.footer-brand p {
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  font-size: clamp(26px, 2.6vw, 40px);
  line-height: 1.05;
  letter-spacing: .02em;
  margin-bottom: 28px;
}
.footer-social { display: flex; gap: 24px; }
.footer-col { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.footer-col h4 { color: var(--accent); font-weight: 400; margin-bottom: 8px; font-size: 10px; }
.footer-col .nav-link span { font-size: 14px; }
.footer-wordmark {
  margin: 0 auto clamp(30px, 5vh, 50px);
  width: min(92vw, 1400px);
  overflow: hidden;
}
.footer-wordmark img { width: 100%; opacity: .9; will-change: transform; }
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  flex-wrap: wrap;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  color: var(--fg-dim);
}
.footer-bottom small { font-size: 10px; letter-spacing: .16em; }
.footer-legal { display: flex; gap: 20px; }
.footer-legal a { font-size: 10px; letter-spacing: .16em; transition: color .3s; }
.footer-legal a:hover { color: var(--accent); }

/* ═══════════════ FLOATING CTA ═══════════════ */
.floating-cta {
  position: fixed;
  bottom: calc(26px + env(safe-area-inset-bottom, 0px)); right: 26px;
  z-index: 6500;
  display: flex; align-items: center; gap: 10px;
  padding: 16px 24px;
  border-radius: 100px;
  background: var(--copper);
  color: var(--dark-bg);
  font-size: 10px;
  box-shadow: 0 14px 40px rgba(201, 122, 94, .35);
  transform: translateY(160%);
  transition: transform .7s var(--ease-expo), box-shadow .4s;
}
.floating-cta.visible { transform: translateY(0); }
.floating-cta:hover { box-shadow: 0 18px 50px rgba(201, 122, 94, .55); }
.floating-cta span { transition: transform .4s var(--ease-expo); }
.floating-cta:hover span { transform: translate(3px, -3px); }

/* ═══════════════ MODAL ═══════════════ */
.modal-overlay {
  position: fixed; inset: 0;
  z-index: 9800;
  background: rgba(10, 9, 8, .7);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  display: grid; place-items: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .6s var(--ease-expo), visibility 0s .6s;
}
.modal-overlay.open { opacity: 1; visibility: visible; transition-delay: 0s, 0s; }
.modal-card {
  position: relative;
  width: min(520px, 100%);
  max-height: min(780px, 92svh);
  overflow-y: auto;
  scrollbar-width: none;
  background: #f2e9d2;
  border: 1.5px solid rgba(33, 27, 17, .7);
  border-radius: 14px;
  padding: clamp(34px, 5vw, 56px);
  transform: translateY(40px) scale(.96);
  opacity: 0;
  transition: transform .7s var(--ease-expo), opacity .5s;
  color: #211b11;
}
.modal-card::-webkit-scrollbar { display: none; }
.modal-overlay.open .modal-card { transform: translateY(0) scale(1); opacity: 1; }
.modal-glow {
  position: absolute; top: -30%; right: -30%;
  width: 70%; aspect-ratio: 1;
  background: radial-gradient(circle, rgba(201, 122, 94, .28), transparent 65%);
  pointer-events: none;
}
.modal-watermark {
  position: absolute; bottom: 6%; left: 50%;
  transform: translateX(-50%);
  width: 84%;
  opacity: .08;
  pointer-events: none;
}
.pass-head {
  display: flex; justify-content: space-between; align-items: center;
  background: var(--copper);
  color: #211b11;
  font-size: 11px;
  padding: 10px 14px;
  border-radius: 6px;
  margin-bottom: 24px;
}
.pass-barcode {
  display: block;
  height: 34px;
  margin-top: 18px;
  background: repeating-linear-gradient(90deg,
    #211b11 0 2px, transparent 2px 5px,
    #211b11 5px 6px, transparent 6px 9px,
    #211b11 9px 13px, transparent 13px 15px,
    #211b11 15px 16px, transparent 16px 21px);
  opacity: .8;
}
.modal-close {
  position: absolute; top: 18px; right: 18px;
  width: 44px; height: 44px;
  border: 1px solid rgba(33, 27, 17, .3);
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 13px;
  transition: background-color .4s, transform .5s var(--ease-expo), color .4s;
  z-index: 3;
}
.modal-close:hover {
  background: var(--copper);
  color: var(--dark-bg);
  transform: rotate(90deg);
}
.modal-body { position: relative; z-index: 2; }
.modal-badge { color: var(--copper); margin-bottom: 20px; }
.modal-body h2 { font-size: clamp(34px, 4.4vw, 48px); margin-bottom: 14px; }
.modal-body h2 em { color: var(--copper); }
.modal-sub { color: rgba(33, 27, 17, .6); line-height: 1.65; font-size: 14px; margin-bottom: 36px; }

.form-group { position: relative; margin-bottom: 26px; }
.form-group input {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1.5px dashed rgba(33, 27, 17, .35);
  padding: 12px 2px;
  font-family: var(--font-body);
  font-size: 16px;
  color: #211b11;
  outline: none;
  border-radius: 0;
}
.form-group label {
  position: absolute; left: 2px; top: 12px;
  color: rgba(33, 27, 17, .5);
  font-size: 11px;
  pointer-events: none;
  transition: transform .4s var(--ease-expo), color .4s;
  transform-origin: left;
}
.form-group input:focus ~ label,
.form-group input:not(:placeholder-shown) ~ label {
  transform: translateY(-26px) scale(.82);
  color: var(--copper);
}
.form-group .bar {
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 1px;
  background: var(--copper);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .6s var(--ease-expo);
}
.form-group input:focus ~ .bar { transform: scaleX(1); }

#submit-btn { width: 100%; padding: 16px; margin-top: 10px; }
#submit-btn.loading { opacity: .6; pointer-events: none; }
.form-note {
  color: rgba(33, 27, 17, .5);
  font-size: 10px;
  margin-top: 18px;
  text-align: center;
}
.form-success {
  margin-top: 16px;
  text-align: center;
  color: #a3573c;
  font-size: 14px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .5s, transform .5s var(--ease-expo);
}
.form-success.visible { opacity: 1; transform: translateY(0); }

/* ═══════════════ LEGAL DOC PAGES ═══════════════ */
.legal-body { background: var(--light-bg); color: var(--light-fg); }
.legal-body::after { display: none; }
.legal-page {
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(60px, 10vh, 110px) var(--pad) 80px;
}
.legal-back { display: inline-block; color: #a3573c; margin-bottom: 40px; }
.legal-page h1 { font-size: clamp(52px, 8vw, 96px); margin-bottom: 26px; }
.legal-intro { font-size: 17px; line-height: 1.75; color: rgba(33, 27, 17, .7); margin-bottom: 48px; }
.legal-page section { margin-bottom: 42px; }
.legal-page h2 {
  font-size: clamp(24px, 2.6vw, 34px);
  margin-bottom: 14px;
  color: #a3573c;
}
.legal-page p, .legal-page li { line-height: 1.8; color: rgba(33, 27, 17, .75); font-size: 15.5px; }
.legal-page p + p { margin-top: 12px; }
.legal-page ul { padding-left: 22px; margin-top: 10px; }
.legal-page li { margin-bottom: 8px; }
.legal-page a { color: #a3573c; text-decoration: underline; text-underline-offset: 3px; }
.legal-page strong { font-weight: 600; color: #211b11; }
.legal-foot { margin-top: 70px; padding-top: 22px; border-top: 1px solid rgba(33,27,17,.15); color: rgba(33,27,17,.5); font-size: 10px; }

/* consent row on the boarding pass */
.consent-group {
  display: flex; align-items: flex-start; gap: 12px;
  margin: 4px 0 20px;
}
.consent-group input[type="checkbox"] {
  appearance: none;
  width: 20px; height: 20px; flex: none;
  margin-top: 2px;
  border: 1.5px solid rgba(33, 27, 17, .6);
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
  display: grid; place-items: center;
  transition: background-color .25s, border-color .25s;
}
.consent-group input[type="checkbox"]::before {
  content: '';
  width: 10px; height: 10px;
  background: var(--copper);
  border-radius: 2px;
  transform: scale(0);
  transition: transform .25s var(--ease-expo);
}
.consent-group input[type="checkbox"]:checked { border-color: var(--copper); }
.consent-group input[type="checkbox"]:checked::before { transform: scale(1); }
.consent-group label {
  font-size: 12px; line-height: 1.6;
  color: rgba(33, 27, 17, .7);
  cursor: pointer;
}
.consent-group a { color: #a3573c; text-decoration: underline; text-underline-offset: 2px; }

/* ═══════════════ RESPONSIVE ═══════════════ */
@media (max-width: 1020px) {
  .nav-links, .nav-clock { display: none; }

  .hero {
    grid-template-columns: 1fr;
    gap: 34px;
    padding-top: 120px;
    padding-bottom: 100px;
    text-align: center;
  }
  .hero-content { max-width: none; display: flex; flex-direction: column; align-items: center; }
  .hero-sub { margin-inline: auto; }
  .hero-actions { flex-direction: column; gap: 18px; }
  .hero-cta-note { text-align: center; }
  .hero-stage { width: 100%; height: min(56vh, 500px); }
  .hero-product { width: min(52vw, 300px); }
  .hero-product-tag { right: 18px; bottom: 16px; }
  .hf-tl { top: 76px; }
  .hf-tr, .hf-br { display: none; }

  .orbit-pin { min-height: 0; padding-bottom: 70px; }
  .orbit-stage { grid-template-columns: 1fr; gap: 14px; }
  .orbit-views { height: min(44vh, 420px); }
  .orbit-copy { min-height: 360px; }
  .orbit-hud { display: none; }

  .materials { grid-template-columns: 1fr; }
  .story-cols { grid-template-columns: 1fr; }
  .story-stats { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(3) { border-left: none; }
  .stat:nth-child(n+3) { border-top: 1px solid var(--line); }

  .faq { grid-template-columns: 1fr; gap: 30px; }
  .footer-grid { grid-template-columns: 1fr; gap: 44px; }
}

@media (max-width: 620px) {
  .hero-title { font-size: clamp(52px, 15.5vw, 86px); }
  .craft-card { width: min(82vw, 360px); }
  .btn-pill { padding: 11px 20px; }
  .floating-cta { bottom: calc(18px + env(safe-area-inset-bottom, 0px)); right: 18px; }
  .voice-card { width: min(80vw, 340px); }
}

/* ═══════════════ REDUCED MOTION ═══════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
  body::after { animation: none; }
  .preloader, .cursor { display: none; }
}
html.reduced-motion [data-reveal],
html.reduced-motion .line-inner,
html.reduced-motion [data-reveal-words] .w > span {
  opacity: 1 !important;
  transform: none !important;
}