/* ============================================================
   DIALDO · trailer site
   warm charcoal · cream waveform · coral voice · acid checkmarks
   ============================================================ */

:root {
  --bg: #100f0c;
  --bg2: #191713;
  --ink: #181713;
  --panel: rgba(26, 24, 19, .82);
  --panel-solid: #1a1813;
  --line: rgba(255, 248, 235, .1);
  --line-strong: rgba(255, 248, 235, .18);
  --cream: #fff8eb;
  --cream-dim: #ddd6c8;
  --muted: #9a9184;
  --acid: #D7FF43;
  --coral: #FF5C35;
  --coral2: #ff8b70;
  --serif: "Fraunces", Georgia, serif;
  --sans: "Plus Jakarta Sans", "Inter", -apple-system, sans-serif;
  --mono: "DM Mono", "JetBrains Mono", ui-monospace, monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: auto; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body {
  background: var(--bg);
  color: var(--cream);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--acid); color: var(--ink); }

.mono { font-family: var(--mono); }
.serif { font-family: var(--serif); font-style: italic; font-weight: 420; }

/* ---------------- atmosphere layers ---------------- */

#bg3d {
  position: fixed; inset: 0;
  width: 100vw; height: 100vh;
  z-index: 0; pointer-events: none;
}
body.no-webgl #bg3d { display: none; }
body.no-webgl { background: radial-gradient(120vw 90vh at 50% 0%, #1c1a14 0%, var(--bg) 60%); }

.scrim {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(90vw 70vh at 50% 45%, rgba(16,15,13,0) 0%, rgba(16,15,13,.55) 100%);
}

.grain {
  position: fixed; inset: -60px; z-index: 70; pointer-events: none; opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  animation: grainJitter 1.1s steps(4) infinite;
}
@keyframes grainJitter {
  0% { transform: translate(0,0); } 25% { transform: translate(-18px,12px); }
  50% { transform: translate(12px,-20px); } 75% { transform: translate(-10px,-8px); }
  100% { transform: translate(0,0); }
}

.vignette {
  position: fixed; inset: 0; z-index: 71; pointer-events: none;
  box-shadow: inset 0 0 22vmin rgba(0,0,0,.55);
}

/* film progress line */
.progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 95;
  background: linear-gradient(90deg, #ff8b70, #ff5430);
  transform: scaleX(0); transform-origin: left center; pointer-events: none;
  box-shadow: 0 0 12px rgba(255, 92, 53, .5);
}

/* anchor jumps clear the fixed nav */
section[id] { scroll-margin-top: 72px; }

/* ---------------- cursor ---------------- */

.cursor, .cursor-dot { display: none; }
@media (hover: hover) and (pointer: fine) {
  .cursor {
    display: block; position: fixed; z-index: 90; pointer-events: none;
    width: 38px; height: 38px; border: 1.5px solid rgba(255,107,72,.65);
    border-radius: 50%; top: 0; left: 0;
    transform: translate(-50%,-50%);
    transition: width .25s ease, height .25s ease, border-color .25s ease, background .25s ease;
  }
  .cursor-dot {
    display: block; position: fixed; z-index: 91; pointer-events: none;
    width: 5px; height: 5px; background: var(--coral2); border-radius: 50%;
    top: 0; left: 0; transform: translate(-50%,-50%);
  }
  .cursor.is-hover { width: 62px; height: 62px; background: rgba(255,96,64,.08); border-color: var(--coral2); }
  body.anim, body.anim a, body.anim .btn { cursor: none; }
}

/* ---------------- nav ---------------- */

.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px clamp(18px, 4vw, 48px);
  transition: background .4s ease, backdrop-filter .4s ease, box-shadow .4s ease, padding .4s ease;
}
.nav.scrolled {
  padding: 11px clamp(18px, 4vw, 48px);
  background: rgba(16,15,13,.72);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  box-shadow: 0 1px 0 var(--line);
}
.nav-logo {
  display: flex; align-items: center; gap: 10px;
  color: var(--cream); text-decoration: none;
  font-weight: 650; letter-spacing: -.02em; font-size: 17px;
}
.mark { width: 30px; height: 30px; border-radius: 8px; transition: transform .35s cubic-bezier(.34,1.56,.64,1); }
.nav-logo:hover .mark { transform: rotate(-6deg) scale(1.08); }
.nav-links { display: flex; gap: clamp(14px, 2.4vw, 30px); }
.nav-links a {
  color: var(--muted); text-decoration: none; font-size: 13.5px; font-weight: 500;
  letter-spacing: .01em; transition: color .25s ease;
}
.nav-links a:hover { color: var(--coral2); }
.nav-cta { display: flex; gap: 10px; }
@media (max-width: 860px) { .nav-links { display: none; } }

/* ---------------- buttons ---------------- */

.btn {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--sans); font-weight: 700; text-decoration: none;
  border-radius: 14px; white-space: nowrap;
  transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease, background .3s ease, color .3s ease, border-color .3s ease;
  will-change: transform;
}
.btn-primary {
  background: var(--acid); color: var(--ink);
  box-shadow: 5px 5px 0 rgba(255,92,53,.9);
}
.btn-primary:hover { box-shadow: 7px 7px 0 var(--coral), 0 10px 44px rgba(215,255,67,.25); }
.btn-ghost {
  color: var(--cream); border: 1px solid var(--line-strong);
  background: rgba(255,248,235,.04);
}
.btn-ghost:hover { border-color: var(--coral2); color: var(--coral2); background: rgba(255,96,64,.06); }
.btn-sm { padding: 8px 16px; font-size: 13px; }
.btn-lg { padding: 15px 28px; font-size: 15.5px; }
.btn-ic { font-size: 17px; line-height: 1; }

/* ---------------- slates (film labels) ---------------- */

.slate {
  font-family: var(--mono); font-size: clamp(10px, 1.1vw, 12px);
  letter-spacing: .22em; color: var(--muted);
  display: flex; align-items: center; gap: 10px;
  text-transform: uppercase;
}
.slate-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--coral);
  box-shadow: 0 0 12px rgba(255,92,53,.8); flex: none;
  animation: recBlink 1.6s ease-in-out infinite;
}
@keyframes recBlink { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

/* ---------------- hero ---------------- */

.hero {
  position: relative; z-index: 2;
  min-height: 100vh; min-height: 100svh;
  display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 120px 20px 80px;
}
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(72vw 62vh at 50% 44%, rgba(13,12,9,.62), rgba(13,12,9,.26) 55%, transparent 78%);
}
.hero-inner { position: relative; max-width: 880px; display: flex; flex-direction: column; align-items: center; gap: clamp(18px, 2.6vh, 28px); }
.hero-slate { justify-content: center; }
.hero-title {
  font-size: clamp(56px, 11vw, 132px);
  line-height: .96; letter-spacing: -.04em; font-weight: 800;
}
.hero-title .line { display: block; overflow: hidden; perspective: 720px; padding-bottom: .06em; margin-bottom: -.06em; }
.hero-title .line > span { display: inline-block; }
.hero-title .ch { display: inline-block; transform-origin: 50% 100%; will-change: transform; }
.accent-serif {
  font-family: var(--serif); font-style: italic; font-weight: 380; letter-spacing: -.02em;
  color: var(--coral2);
  background: linear-gradient(120deg, #ffa38c, #ff5430);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
/* split chars carry their own gradient: background-clip on a parent
   does not follow transformed children */
.accent-serif .ch {
  background: linear-gradient(120deg, #ffa38c, #ff5430);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.hero-wave { width: min(560px, 82vw); height: auto; overflow: visible; }
#heroWavePath { filter: drop-shadow(0 0 14px rgba(255,248,235,.35)); }
.hero-sub {
  max-width: 620px; color: var(--cream-dim); font-size: clamp(15px, 1.7vw, 18px);
  font-weight: 450; line-height: 1.65;
}
.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.hero-fine { font-family: var(--mono); font-size: 11.5px; letter-spacing: .12em; color: var(--muted); text-transform: uppercase; }

.scroll-hint {
  position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .3em;
  color: var(--muted); text-transform: uppercase;
}
.hint-bar {
  width: 1.5px; height: 44px; background: linear-gradient(var(--coral2), transparent);
  animation: hintDrop 1.8s ease-in-out infinite;
}
@keyframes hintDrop { 0% { transform: scaleY(0); transform-origin: top; } 55% { transform: scaleY(1); transform-origin: top; } 56% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* ============================================================
   SCENES (pinned stages)
   ============================================================ */

.scene { position: relative; z-index: 2; }
.stage {
  height: 100vh; height: 100svh; width: 100%;
  position: relative; overflow: hidden;
  background: rgba(13, 12, 10, .48);
  box-shadow: inset 0 1px 0 var(--line), inset 0 -1px 0 var(--line);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.stage > .slate { position: absolute; top: clamp(74px, 10vh, 110px); left: clamp(20px, 5vw, 64px); z-index: 8; }

/* beats: story copy blocks */
.beats { position: absolute; z-index: 7; }
.beats-left { left: clamp(20px, 5vw, 64px); top: 28%; width: min(500px, 88vw); }
.beats-top { left: clamp(20px, 5vw, 64px); top: clamp(120px, 17vh, 180px); width: min(560px, 88vw); }
.beats-center { left: 50%; transform: translateX(-50%); top: clamp(118px, 16vh, 170px); width: min(680px, 90vw); text-align: center; }
body.anim .beat { position: absolute; top: 0; left: 0; width: 100%; }
body:not(.anim) .beat { margin-bottom: 34px; }

/* glass slab behind story copy so it always wins over the moving set */
.beat {
  background: linear-gradient(165deg, rgba(14, 13, 10, .82), rgba(14, 13, 10, .58));
  border: 1px solid rgba(255, 248, 235, .08);
  border-radius: 22px;
  padding: clamp(20px, 2.6vw, 30px) clamp(22px, 2.8vw, 34px);
  backdrop-filter: blur(14px) saturate(130%);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
  box-shadow: 0 26px 70px rgba(0, 0, 0, .38);
}

.beat h2 {
  font-size: clamp(30px, 4.6vw, 56px); line-height: 1.04;
  letter-spacing: -.03em; font-weight: 700; margin-bottom: 18px;
}
.beat h2 em { font-weight: 400; color: var(--coral2); }
.beat-p { color: var(--cream-dim); font-size: clamp(14.5px, 1.6vw, 17.5px); line-height: 1.68; margin-bottom: 12px; max-width: 470px; }
.beats-center .beat-p { margin-inline: auto; }
.beat-p.strong { color: var(--cream); font-weight: 550; }
.done-line { font-size: clamp(20px, 2.6vw, 28px); color: var(--coral2); margin-top: 14px; }

/* ---------------- scene 01 · airport + maya ---------------- */

.airport { position: absolute; inset: 0; z-index: 3; }
.departure-board {
  position: absolute; right: clamp(16px, 6vw, 90px); top: clamp(90px, 14vh, 150px);
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  padding: 14px 18px; font-family: var(--mono); font-size: clamp(10px, 1.15vw, 13px);
  letter-spacing: .12em; color: var(--cream-dim);
  box-shadow: 0 20px 60px rgba(0,0,0,.4);
}
.board-row { display: grid; grid-template-columns: 52px 62px auto; gap: 14px; padding: 5px 0; }
.board-row .ok { color: var(--acid); animation: boardFlick 2.4s steps(2) infinite; }
.board-row.dim { opacity: .45; }
@keyframes boardFlick { 0%, 92% { opacity: 1; } 96% { opacity: .3; } }

.window-plane {
  position: absolute; right: clamp(14px, 7vw, 110px); bottom: clamp(160px, 30vh, 300px);
  width: clamp(180px, 24vw, 330px); opacity: .8;
}
.floor-line {
  position: absolute; left: 0; right: 0; bottom: clamp(52px, 9vh, 92px);
  border-bottom: 1.5px dashed rgba(255,248,235,.14);
}

.maya-wrap {
  position: absolute; z-index: 6;
  bottom: clamp(36px, 6.5vh, 72px);
  left: 8vw; width: clamp(170px, 21vw, 280px);
  filter: drop-shadow(0 24px 30px rgba(0,0,0,.5));
}
.maya { width: 100%; height: auto; overflow: visible; }

/* walk cycle: runs only while .walking */
.maya #mayaBody { animation: bodyBob .6s ease-in-out infinite alternate; animation-play-state: paused; }
@keyframes bodyBob { from { transform: translateY(0); } to { transform: translateY(-5px); } }
.maya #mayaLegF { animation: legF .6s ease-in-out infinite alternate; animation-play-state: paused; }
@keyframes legF { from { transform: rotate(-26deg); } to { transform: rotate(20deg); } }
.maya #mayaLegB { animation: legB .6s ease-in-out infinite alternate; animation-play-state: paused; }
@keyframes legB { from { transform: rotate(22deg); } to { transform: rotate(-24deg); } }
.maya .wheel { animation: wheelSpin .8s linear infinite; animation-play-state: paused; }
@keyframes wheelSpin { to { transform: rotate(360deg); } }
.maya.walking #mayaBody, .maya.walking #mayaLegF, .maya.walking #mayaLegB, .maya.walking .wheel { animation-play-state: running; }

/* ---------------- scene 02 · the journey ---------------- */

.journey-viewport {
  position: absolute; left: 0; right: 0; bottom: 0; top: 37vh;
  overflow: hidden; z-index: 4;
  -webkit-mask-image: linear-gradient(to bottom, transparent, black 12%);
  mask-image: linear-gradient(to bottom, transparent, black 12%);
}
.journey-track { height: 100%; aspect-ratio: 2300 / 640; will-change: transform; }
#journeySvg { width: 100%; height: 100%; display: block; }
.j-label { font-family: var(--sans); font-weight: 800; font-size: 25px; letter-spacing: .08em; }
.j-mono { font-family: var(--mono); font-size: 16px; letter-spacing: .09em; }
.j-num { font-family: var(--mono); font-weight: 500; font-size: 21px; letter-spacing: .04em; }

.emit { animation: emitPulse 1.6s ease-out infinite; }
.emit.e2 { animation-delay: .25s; }
.emit.e3 { animation-delay: .5s; }
@keyframes emitPulse { 0% { opacity: 0; } 30% { opacity: .95; } 100% { opacity: 0; } }

#tunnelFlow { animation: tunnelDash 1.2s linear infinite; }
@keyframes tunnelDash { to { stroke-dashoffset: -84; } }

/* PIN gate */
.pin-gate {
  position: absolute; inset: 0; z-index: 9;
  display: flex; align-items: center; justify-content: center;
  background: rgba(13,12,10,.62);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.pin-card {
  position: relative;
  background: var(--panel-solid); border: 1px solid var(--line-strong);
  border-radius: 22px; padding: clamp(26px, 4vw, 44px) clamp(30px, 5vw, 60px);
  display: flex; flex-direction: column; align-items: center; gap: 18px;
  box-shadow: 0 40px 120px rgba(0,0,0,.6), 0 0 0 1px rgba(215,255,67,.06);
}
.pin-lock { width: clamp(64px, 8vw, 96px); overflow: visible; }
.pin-caller { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 15px; letter-spacing: .06em; }
.pin-ok { color: var(--acid); font-family: var(--mono); font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; }
.pin-dots { display: flex; gap: 14px; }
.pin-dot {
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid var(--line-strong); background: transparent;
  transition: background .2s, border-color .2s, box-shadow .2s;
}
.pin-dot.filled { background: var(--acid); border-color: var(--acid); box-shadow: 0 0 16px rgba(215,255,67,.5); }
.pin-note { font-size: 10.5px; letter-spacing: .16em; color: var(--muted); text-transform: uppercase; }
.pin-stamp {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%,-50%) rotate(-9deg);
  font-family: var(--mono); font-weight: 600; font-size: clamp(24px, 3.4vw, 40px);
  letter-spacing: .3em; color: var(--acid);
  border: 3px solid var(--acid); border-radius: 10px; padding: 8px 20px 8px 26px;
  text-shadow: 0 0 26px rgba(215,255,67,.6);
  box-shadow: 0 0 40px rgba(215,255,67,.25), inset 0 0 24px rgba(215,255,67,.08);
  pointer-events: none;
}

/* ---------------- scene 03 · mac + plan ---------------- */

.mac-wrap {
  position: absolute; z-index: 5;
  right: clamp(16px, 7vw, 110px); top: clamp(96px, 16vh, 170px);
  width: clamp(230px, 27vw, 390px);
}
.mac { width: 100%; height: auto; position: relative; z-index: 2; }
.mac-glow {
  position: absolute; inset: -18%; z-index: 1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255,110,78,.15), transparent 70%);
}
.eq { transform-box: fill-box; transform-origin: center; animation: eqBounce 1s ease-in-out infinite alternate; }
#macEq .eq:nth-child(1) { animation-delay: 0s; }
#macEq .eq:nth-child(2) { animation-delay: .14s; }
#macEq .eq:nth-child(3) { animation-delay: .28s; }
#macEq .eq:nth-child(4) { animation-delay: .07s; }
#macEq .eq:nth-child(5) { animation-delay: .21s; }
@keyframes eqBounce { from { transform: scaleY(.35); } to { transform: scaleY(1.15); } }

.plan-card {
  position: absolute; z-index: 6;
  right: clamp(14px, 6vw, 90px); bottom: clamp(30px, 7vh, 80px);
  width: min(560px, 92vw);
  background: rgba(14,13,11,.92); border: 1px solid var(--line-strong);
  border-radius: 16px; overflow: hidden;
  box-shadow: 0 40px 100px rgba(0,0,0,.55);
}
.plan-head, .dm-head {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 16px; font-size: 11px; letter-spacing: .12em;
  color: var(--muted); border-bottom: 1px solid var(--line);
  background: rgba(255,248,235,.03); text-transform: uppercase;
}
.dot-r, .dot-y, .dot-g { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.dot-r { background: #ff5f57; } .dot-y { background: #febc2e; } .dot-g { background: #28c840; margin-right: 6px; }
.plan-body { padding: 18px 20px 20px; font-size: clamp(11.5px, 1.3vw, 14px); line-height: 2.05; }
.plan-line { white-space: nowrap; overflow: hidden; }
.pk { display: inline-block; width: 108px; color: var(--muted); letter-spacing: .08em; font-size: .86em; }
.crit { color: var(--cream-dim); margin-right: 18px; }
.caret {
  display: inline-block; width: 9px; height: 1.1em; background: var(--acid);
  vertical-align: text-bottom; margin-left: 6px;
  animation: caretBlink 1s steps(2) infinite;
}
@keyframes caretBlink { 50% { opacity: 0; } }

/* ---------------- scene 04 · ledger + confirm ---------------- */

.ledger {
  position: absolute; z-index: 5;
  right: clamp(14px, 6vw, 90px); top: 50%; transform: translateY(-50%);
  width: min(480px, 90vw);
  display: flex; flex-direction: column; gap: 12px;
}
.tool-card {
  background: var(--panel-solid); border: 1px solid var(--line);
  border-left: 3px solid var(--acid);
  border-radius: 12px; padding: 13px 18px;
  box-shadow: 0 18px 50px rgba(0,0,0,.4);
}
.tc-head { display: flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 600; letter-spacing: .04em; color: var(--cream); }
.tc-ic {
  width: 26px; height: 26px; flex: none; border-radius: 7px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,96,64,.12); color: var(--coral2); font-size: 14px;
}
.tc-risk {
  margin-left: auto; font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 99px; border: 1px solid var(--line-strong); color: var(--muted);
}
.tc-risk.write { color: #eeda7a; border-color: rgba(238,218,122,.4); }
.tc-risk.ext { color: var(--coral); border-color: rgba(255,92,53,.45); }
.tc-ev { margin-top: 7px; font-size: 12px; color: #aca397; letter-spacing: .03em; }
.ledger-done { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 6px; align-items: center; }
.crit-final {
  font-size: 11px; letter-spacing: .08em; color: var(--acid);
  border: 1px solid rgba(215,255,67,.35); background: rgba(215,255,67,.07);
  border-radius: 99px; padding: 4px 12px;
}
.task-stamp { width: 100%; margin-top: 8px; font-size: 11px; letter-spacing: .24em; color: var(--muted); }

.confirm-modal {
  position: absolute; z-index: 10; left: 58%; top: 50%;
  transform: translate(-50%,-52%);
  display: flex; flex-direction: column; align-items: center; gap: 22px;
  filter: drop-shadow(0 30px 70px rgba(0,0,0,.55));
}
.cm-card {
  background: #211f19; border: 1px solid var(--line-strong); border-radius: 18px;
  padding: 26px 30px; width: min(400px, 88vw); text-align: center;
  box-shadow: 0 50px 140px rgba(0,0,0,.7);
}
.cm-title { font-weight: 650; font-size: 16.5px; margin-bottom: 12px; letter-spacing: -.01em; }
.cm-body { color: var(--muted); font-size: 12.5px; line-height: 1.9; letter-spacing: .04em; }
.cm-actions { display: flex; gap: 12px; margin-top: 20px; justify-content: center; }
.cm-btn { flex: 1; padding: 10px 0; border-radius: 10px; font-size: 14px; font-weight: 600; }
.cm-cancel { background: rgba(255,248,235,.07); color: var(--cream-dim); }
.cm-ok { background: var(--acid); color: var(--ink); box-shadow: 0 6px 26px rgba(215,255,67,.3); }
.cm-bubble {
  background: var(--cream); color: var(--ink); border-radius: 18px 18px 18px 4px;
  padding: 12px 22px; font-size: 20px; display: flex; align-items: baseline; gap: 10px;
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.cm-bubble em { font-family: var(--mono); font-style: normal; font-size: 10.5px; color: #756f65; letter-spacing: .1em; text-transform: uppercase; }

/* ---------------- scene 05 · wheels up ---------------- */

.done-sky { position: absolute; inset: 0; z-index: 3; overflow: hidden; }
.big-plane { position: absolute; width: clamp(120px, 15vw, 210px); left: -18vw; top: 30vh; filter: drop-shadow(0 14px 30px rgba(0,0,0,.5)); }
.star { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: rgba(255,248,235,.5); animation: starTwinkle 3s ease-in-out infinite; }
.star.s1 { left: 16%; top: 22%; } .star.s2 { left: 78%; top: 16%; animation-delay: .7s; }
.star.s3 { left: 62%; top: 34%; animation-delay: 1.4s; } .star.s4 { left: 30%; top: 12%; animation-delay: 2.1s; }
.star.s5 { left: 88%; top: 42%; animation-delay: 1s; }
@keyframes starTwinkle { 0%,100% { opacity: .2; } 50% { opacity: .9; } }

.phone-frame {
  position: absolute; z-index: 5; left: 50%; bottom: -4vh; transform: translateX(-50%);
  width: min(340px, 78vw); height: clamp(300px, 44vh, 430px);
  background: #191713; border: 3px solid #2c2922; border-bottom: none;
  border-radius: 44px 44px 0 0; overflow: hidden;
  box-shadow: 0 -20px 90px rgba(0,0,0,.6), inset 0 0 0 2px rgba(0,0,0,.6);
}
.pf-notch { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); width: 108px; height: 22px; border-radius: 99px; background: #0c0b09; }
.pf-time { position: absolute; top: 52px; width: 100%; text-align: center; font-size: 44px; font-weight: 500; color: var(--cream); letter-spacing: .02em; }
.notif {
  position: absolute; top: 118px; left: 14px; right: 14px;
  display: flex; gap: 12px; align-items: flex-start;
  background: rgba(255,248,235,.1); border: 1px solid rgba(255,248,235,.14);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-radius: 18px; padding: 13px 15px;
}
.notif-ic { width: 38px; height: 38px; flex: none; border-radius: 9px; overflow: hidden; }
.notif-ic svg { width: 100%; height: 100%; display: block; }
.notif-tx { display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; line-height: 1.45; }
.notif-tx strong { font-size: 13px; }
.notif-tx span { color: var(--cream-dim); }

/* ============================================================
   BLOCKS (post-credits sections)
   ============================================================ */

.block { position: relative; z-index: 2; padding: clamp(90px, 14vh, 160px) clamp(20px, 5vw, 64px); }
.block::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: rgba(13,12,10,.72);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.block-inner { max-width: 1180px; margin: 0 auto; }
.block-title {
  font-size: clamp(40px, 6.4vw, 84px); line-height: .98; letter-spacing: -.035em;
  font-weight: 700; margin: 26px 0 22px;
}
.block-title em { font-weight: 400; color: var(--coral2); }
.block-title.center { text-align: center; }
.block-sub { max-width: 640px; color: var(--cream-dim); font-size: clamp(15px, 1.7vw, 18px); line-height: 1.7; }
.block-sub.center { margin-inline: auto; text-align: center; }

/* abilities */
.cards {
  margin-top: clamp(40px, 6vh, 70px);
  display: grid; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); gap: 16px;
}
.card {
  position: relative; overflow: hidden;
  background: var(--panel); border: 1px solid var(--line); border-radius: 18px;
  padding: 24px 22px; transition: border-color .35s ease, transform .35s ease, box-shadow .35s ease;
  transform-style: preserve-3d; will-change: transform;
}
.card::after {
  content: ""; position: absolute; top: -40%; left: -70%; width: 55%; height: 200%;
  transform: rotate(18deg) translateX(-160%);
  background: linear-gradient(90deg, transparent, rgba(255,248,235,.07), transparent);
  transition: transform .9s cubic-bezier(.2,.8,.2,1); pointer-events: none;
}
.card:hover::after { transform: rotate(18deg) translateX(360%); }
.card:hover { border-color: rgba(255,92,53,.45); box-shadow: 0 24px 70px rgba(0,0,0,.45), 0 0 0 1px rgba(255,92,53,.14); }
.card-ic {
  width: 40px; height: 40px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,96,64,.1); color: var(--coral2); font-size: 19px; margin-bottom: 16px;
}
.card h3 { font-size: 16.5px; font-weight: 650; letter-spacing: -.01em; margin-bottom: 8px; }
.card p { color: var(--muted); font-size: 13.5px; line-height: 1.62; }

/* security */
.trust-list {
  list-style: none; margin-top: clamp(40px, 6vh, 70px);
  display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px 28px;
}
.trust-list li {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 18px 4px; border-bottom: 1px solid var(--line);
  color: var(--muted); font-size: 14.5px; line-height: 1.62;
}
.trust-list strong { color: var(--cream); display: block; margin-bottom: 3px; font-weight: 650; }
.tl-ic {
  width: 34px; height: 34px; flex: none; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(215,255,67,.3); color: var(--acid); font-size: 15px;
}

/* control room */
.control-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(30px, 5vw, 70px); align-items: center; }
@media (max-width: 940px) { .control-grid { grid-template-columns: 1fr; } }
.control-list { list-style: none; margin-top: 26px; display: flex; flex-direction: column; gap: 14px; }
.control-list li {
  position: relative; padding-left: 26px; color: var(--cream-dim); font-size: 15px; line-height: 1.62;
}
.control-list li::before { content: "◆"; position: absolute; left: 0; top: 2px; color: var(--coral2); font-size: 11px; }

.dash-mock {
  background: rgba(14,13,11,.92); border: 1px solid var(--line-strong); border-radius: 18px;
  overflow: hidden; box-shadow: 0 50px 130px rgba(0,0,0,.55);
  transform: perspective(1200px) rotateY(-5deg) rotateX(2deg);
}
.dm-body { padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.dm-row {
  display: flex; align-items: center; gap: 13px;
  background: rgba(255,248,235,.035); border: 1px solid var(--line);
  border-radius: 12px; padding: 11px 14px;
}
.dm-avatar {
  width: 36px; height: 36px; flex: none; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--acid); color: var(--ink); font-weight: 700; font-size: 15px;
}
.dm-avatar.alt { background: var(--coral); color: #fff; }
.dm-avatar.dim { background: rgba(255,248,235,.1); color: var(--muted); }
.dm-tx { display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; }
.dm-tx .mono { font-size: 10px; color: var(--muted); letter-spacing: .08em; }
.dm-pill {
  margin-left: auto; font-family: var(--mono); font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 99px; border: 1px solid var(--line-strong); color: var(--muted);
}
.dm-pill.ok { color: var(--acid); border-color: rgba(215,255,67,.4); display: inline-flex; align-items: center; gap: 6px; }
.dm-pill.ok::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--acid);
  animation: livePing 2.2s ease-out infinite;
}
@keyframes livePing {
  0% { box-shadow: 0 0 0 0 rgba(215,255,67,.55); }
  70% { box-shadow: 0 0 0 7px rgba(215,255,67,0); }
  100% { box-shadow: 0 0 0 0 rgba(215,255,67,0); }
}
.dm-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.dm-stat {
  background: rgba(255,248,235,.035); border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 14px; display: flex; flex-direction: column; gap: 4px;
}
.dm-k { font-size: 9px; letter-spacing: .14em; color: var(--muted); text-transform: uppercase; }
.dm-stat strong { font-size: 19px; letter-spacing: -.02em; }
.ok-tx { color: var(--acid); font-size: 14px !important; }
.dm-sim {
  border: 1px dashed var(--line-strong); border-radius: 12px; padding: 11px 14px;
  color: var(--muted); font-size: 11px; letter-spacing: .08em;
}

/* cost */
#cost .block-title em { white-space: nowrap; }
.cost-bars { margin-top: clamp(40px, 6vh, 60px); display: flex; flex-direction: column; gap: 18px; max-width: 760px; }
.cost-bar { display: grid; grid-template-columns: 170px 1fr 74px; align-items: center; gap: 16px; }
.cb-label { font-size: 13.5px; color: var(--cream-dim); font-weight: 550; }
.cb-track { height: 14px; border-radius: 99px; background: rgba(255,248,235,.06); overflow: hidden; }
.cb-fill { position: relative; overflow: hidden; height: 100%; width: 0; border-radius: 99px; }
.cb-fill::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent);
  transform: translateX(-100%); animation: barSheen 2.8s ease-in-out infinite;
}
@keyframes barSheen { 0% { transform: translateX(-100%); } 55%, 100% { transform: translateX(100%); } }
.cb-fill.acid { background: linear-gradient(90deg, #9fc22e, var(--acid)); box-shadow: 0 0 18px rgba(215,255,67,.4); }
.cb-fill.cream { background: linear-gradient(90deg, #8b8377, var(--cream-dim)); }
.cb-fill.coral { background: linear-gradient(90deg, #c2431f, var(--coral)); }
.cb-val { font-size: 13px; color: var(--muted); text-align: right; }
.cost-fine { margin-top: 30px; font-size: 11px; letter-spacing: .14em; color: var(--muted); text-transform: uppercase; }
@media (max-width: 640px) { .cost-bar { grid-template-columns: 1fr; gap: 6px; } .cb-val { text-align: left; } }

/* cta */
.cta-inner { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.cta-wave { width: min(480px, 80vw); margin-bottom: 12px; overflow: visible; }
.cta .hero-ctas { margin-top: 26px; }
.cta .hero-fine { margin-top: 18px; }

/* footer */
.footer { position: relative; z-index: 2; border-top: 1px solid var(--line); padding: 44px clamp(20px, 5vw, 64px) 60px; background: rgba(13,12,10,.85); }
.footer-inner { max-width: 1180px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.footer-line { color: var(--cream-dim); font-size: 14.5px; }
.footer-fine { color: var(--muted); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; }

/* ============================================================
   responsive + motion preferences
   ============================================================ */

@media (max-width: 760px) {
  .grain { display: none; }
  .stage { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(13,12,10,.86); }
  .block::before { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(13,12,10,.9); }
  .beat { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(12,11,9,.92); padding: 18px 18px; }
  .beats-left, .beats-top { top: auto; bottom: 16vh; }
  .maya-wrap { left: 4vw; width: 150px; bottom: 5vh; }
  .journey-viewport { top: 16vh; bottom: 34vh; }
  .mac-wrap { right: 4vw; top: 12vh; width: 190px; }
  .plan-card { right: 4vw; left: 4vw; width: auto; bottom: auto; top: 34vh; }
  .plan-body { line-height: 1.9; }
  .ledger { right: 4vw; left: 4vw; width: auto; top: 15vh; transform: none; gap: 8px; }
  .confirm-modal { left: 50%; }
  .tool-card { padding: 10px 14px; }
  .departure-board { top: 12vh; }
  .window-plane { display: none; }
  .phone-frame { height: 300px; }
}

@media (prefers-reduced-motion: reduce) {
  #bg3d, .cursor, .cursor-dot, .grain { display: none !important; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  body { background: radial-gradient(120vw 90vh at 50% 0%, #1c1a14 0%, var(--bg) 60%); }
  .stage { height: auto; min-height: 100vh; padding: 120px 0; }
}