/* =============================================================
   AKU WORLD — STYLES
   Organized in labeled blocks. Order:
   00 BASE/RESET · 01 PRIMITIVES · 02 NAV · 03 HERO (immersive)
   04 ORIGIN STORY · 05 BOOKS BAND · 06 BENTO · 07 PROOF BAR
   08 AUTHOR · 09 NEWSLETTER · 10 FOOTER · 11 CURSOR
   12 REVEAL/MOTION · 13 RESPONSIVE
   Tokens live in tokens.css — change look there first.
   ============================================================= */

/* ===== 00 · BASE / RESET ===================================== */
*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }  /* smooth scroll = Lenis (js/story.js) */
/* Lenis root hygiene (recommended): no competing smooth-behavior, clean stop state */
html.lenis, html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
.lenis.lenis-smooth [data-lenis-prevent]{ overscroll-behavior:contain; }
.lenis.lenis-stopped{ overflow:hidden; }
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:var(--body); font-size:var(--t-body); line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,model-viewer{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,p{ margin:0; }
:focus-visible{ outline:2px solid var(--focus); outline-offset:3px; border-radius:2px; }
::selection{ background:var(--blue); color:#fff; }
.skip-link{ position:absolute; left:-999px; top:8px; z-index:200; background:var(--ink); color:#fff;
  padding:10px 16px; font-family:var(--mono); font-size:12px; letter-spacing:.1em; }
.skip-link:focus{ left:8px; }

/* ===== 01 · PRIMITIVES ====================================== */
.wrap{ width:100%; max-width:calc(var(--wrap) + var(--gut)*2); padding-inline:var(--gut);
  margin-inline:auto; }
.wrap-text{ max-width:var(--wrap-text); }

/* eyebrow — handwritten, sticker-rotated (Tom Sachs touch) */
.eyebrow{ font-family:var(--hand); font-size:clamp(1.05rem,1.6vw,1.45rem);
  color:var(--blue); display:inline-block; transform:rotate(-2.5deg); line-height:1; }
/* mono HUD label (precision counterpoint) */
.label{ font-family:var(--mono); font-size:var(--t-label); letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink-3); display:inline-flex; align-items:center; gap:.5em; }
.label::before{ content:""; width:18px; height:1px; background:currentColor; opacity:.6; }
.label.is-blue{ color:var(--blue); }

/* stamp — rotated tape/label accent */
.stamp{ font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  border:1px solid var(--ink); padding:6px 10px; display:inline-block; transform:rotate(-1.5deg);
  background:var(--paper); }

h1,.h1{ font-family:var(--display); font-weight:900; text-transform:uppercase;
  font-size:var(--t-h1); line-height:1.02; letter-spacing:-.01em; }
h2,.h2{ font-family:var(--display); font-weight:800; text-transform:uppercase;
  font-size:var(--t-h2); line-height:1.05; letter-spacing:-.01em; }
h3,.h3{ font-family:var(--display); font-weight:500; text-transform:uppercase;
  font-size:var(--t-h3); letter-spacing:.01em; }
.lede{ font-size:var(--t-lede); color:var(--fg-2); line-height:1.5; }
.muted{ color:var(--fg-3); }
.measure{ max-width:54ch; }

/* buttons — Aku Dream Console "bracket" CTA: [ TEXT ], Share Tech Mono,
   fill-on-hover. The [  ] brackets replace trailing arrows. */
.btn{ --bg:transparent; --fg:var(--blue); --edge:var(--blue);
  display:inline-flex; align-items:center; gap:0; font-family:var(--mono);
  font-size:14px; letter-spacing:.14em; text-transform:uppercase; padding:13px 18px;
  background:var(--bg); color:var(--fg); border:1px solid var(--edge); border-radius:2px;
  white-space:nowrap; cursor:pointer; position:relative;
  transition:background var(--dur-fast) var(--ease), color var(--dur-fast),
    border-color var(--dur-fast), box-shadow var(--dur) var(--ease), transform var(--dur-fast); }
.btn::before{ content:"[\00a0\00a0"; opacity:.55; }
.btn::after{ content:"\00a0\00a0]"; opacity:.55; }
.btn:hover{ --bg:var(--blue); --fg:#fff; --edge:var(--blue); box-shadow:0 0 0 3px rgba(19,85,185,.16); }
.btn:hover::before,.btn:hover::after{ opacity:1; }
.btn:active{ transform:translateY(1px); }
.btn .arr{ display:none; }   /* brackets replace the arrow */
.btn--solid{ --bg:var(--blue); --fg:#fff; --edge:var(--blue); }
.btn--solid:hover{ --bg:var(--blue-deep); --edge:var(--blue-deep); }
.btn--ghost{ --fg:var(--ink); --edge:var(--line-2); }
.btn--ghost:hover{ --bg:var(--ink); --fg:#fff; --edge:var(--ink); box-shadow:0 0 0 3px rgba(20,20,20,.12); }
/* on dark surfaces — cyan-accented HUD brackets */
.btn--on-dark{ --fg:#fff; --edge:rgba(255,255,255,.5); }
.btn--on-dark::before,.btn--on-dark::after{ color:var(--cyan); opacity:.85; }
.btn--on-dark:hover{ --bg:var(--cyan); --fg:var(--blue-night); --edge:var(--cyan); box-shadow:0 0 0 3px rgba(159,227,255,.22); }
.btn--on-dark:hover::before,.btn--on-dark:hover::after{ color:var(--blue-night); opacity:1; }
.btn--on-dark.btn--solid{ --bg:#fff; --fg:var(--ink); --edge:#fff; }
.btn--on-dark.btn--solid:hover{ --bg:var(--cyan); --fg:var(--blue-night); --edge:var(--cyan); }

/* section scaffolding */
.section{ padding-block:var(--section-y); }
.section-head{ display:flex; flex-direction:column; gap:14px; margin-bottom:clamp(28px,4vw,52px); }
.divider{ height:1px; background:var(--line); border:0; margin:0; }

/* ===== 02 · NAV ============================================= */
.nav{ position:sticky; top:0; z-index:100; display:flex; align-items:center;
  justify-content:space-between; gap:20px; padding:14px var(--gut);
  background:color-mix(in srgb,var(--paper) 82%,transparent);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid transparent; transition:border-color var(--dur-fast), padding var(--dur-fast); }
.nav.is-scrolled{ border-bottom-color:var(--line); padding-block:10px; }
.nav__logo img{ height:18px; }
.nav__links{ display:flex; align-items:center; gap:clamp(14px,2vw,30px); }
.nav__links a{ font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-2); transition:color var(--dur-fast); }
.nav__links a:hover{ color:var(--blue); }
.nav__cta{ border:1px solid var(--blue); color:var(--blue) !important; padding:9px 12px; border-radius:2px; }
.nav__cta::before{ content:"[\00a0"; opacity:.55; }
.nav__cta::after{ content:"\00a0]"; opacity:.55; }
.nav__cta:hover{ background:var(--blue); color:#fff !important; }
.nav__cta:hover::before,.nav__cta:hover::after{ opacity:1; }
@media (max-width:760px){ .nav__links a.nav__hide{ display:none; } }

/* ===== 03 · HERO (cinematic Book video · centered text) ======
   Apple-style: full-bleed Aku animation behind a scrim, centered
   title + tagline + "Get Your Copy". */
.bookhero{ position:relative; isolation:isolate; overflow:hidden; background:#061A44;
  min-height:clamp(560px,90svh,940px); display:flex; align-items:center; justify-content:center;
  text-align:center; color:#fff; padding-inline:var(--gut); }
.bookhero__media{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; }
/* bottom stop goes solid #030712 so the video melts into the black book section below */
.bookhero__scrim{ position:absolute; inset:0; z-index:-1; background:
  radial-gradient(120% 88% at 50% 44%, rgba(3,7,18,.40), rgba(3,7,18,.62) 70%, rgba(3,7,18,.78) 92%),
  linear-gradient(180deg, rgba(3,7,18,.5) 0%, rgba(3,7,18,.1) 24%, rgba(3,7,18,.2) 58%, rgba(3,7,18,.85) 90%, rgba(3,7,18,1) 100%); }
.bookhero__content{ width:min(var(--wrap),100%); display:flex; flex-direction:column; align-items:center; }
.bookhero__eyebrow{ font-family:var(--mono); font-size:11px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--cyan); margin-bottom:16px; }
.bookhero__title{ font-family:var(--display); font-weight:800; text-transform:uppercase; color:#fff;
  font-size:clamp(2.1rem,6vw,4.6rem); line-height:1.02; letter-spacing:-.01em;
  text-shadow:0 2px 30px rgba(0,0,0,.5); }
.bookhero__sub{ font-family:var(--body); font-weight:500; color:rgba(255,255,255,.94);
  font-size:clamp(1.15rem,2.2vw,1.7rem); line-height:1.32; margin-top:18px;
  text-shadow:0 1px 22px rgba(0,0,0,.5); }
.bookhero__sub .awaits{ display:block; }
/* hero CTA — Dream Console bracket button, cyan HUD brackets on glass */
.bookhero__cta{ display:inline-flex; align-items:center; margin-top:32px; position:relative;
  font-family:var(--mono); font-size:16px; letter-spacing:.16em; text-transform:uppercase;
  color:#fff; border:1px solid rgba(255,255,255,.55); background:rgba(6,16,40,.22);
  padding:15px 20px; -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); white-space:nowrap;
  transition:background var(--dur-fast) var(--ease), color var(--dur-fast),
    border-color var(--dur-fast), box-shadow var(--dur) var(--ease), transform var(--dur-fast); }
.bookhero__cta::before{ content:"[\00a0\00a0"; color:var(--cyan); }
.bookhero__cta::after{ content:"\00a0\00a0]"; color:var(--cyan); }
.bookhero__cta:hover{ background:var(--cyan); color:var(--blue-night); border-color:var(--cyan);
  transform:translateY(-2px); box-shadow:0 0 0 3px rgba(159,227,255,.22); }
.bookhero__cta:hover::before,.bookhero__cta:hover::after{ color:var(--blue-night); }
.bookhero__cta:active{ transform:translateY(0); }

/* 3D viewer styling (lives in the Aku ID tile) */
model-viewer{ --poster-color:transparent; --progress-bar-color:#1355B9; background:transparent; }

/* ===== DREAM CONSOLE primitives (fanart.aku.world language) ===
   hud-line labels · hud-tag dots · chips · chassis corner-crop cards */
.hud-line{ display:flex; align-items:center; gap:12px; font-family:var(--mono); font-size:11px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--blue); }
.hud-line::before,.hud-line::after{ content:""; flex:1; height:1px; background:var(--line); }
.hud-line.left::before{ display:none; }
.hud-tag{ display:inline-flex; align-items:center; gap:7px; padding:6px 10px 5px; border:1px solid var(--blue);
  font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--blue); }
.hud-tag .dot{ width:6px; height:6px; border-radius:50%; background:#12B886; box-shadow:0 0 7px #12B886; flex:0 0 auto; }
.hud-tag.muted{ color:var(--ink-3); border-color:var(--line-2); }
.chip{ display:inline-flex; align-items:center; gap:5px; padding:6px 10px; font-family:var(--mono); font-size:10px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--blue); border:1px solid var(--line-2); }
.chip.new{ color:#8a6d00; border-color:rgba(255,210,63,.75); background:rgba(255,210,63,.16); }
.chassis{ position:relative; background:#fff; border:1px solid var(--line-2); }
.chassis::before,.chassis::after,.chassis>.crop-bl,.chassis>.crop-br{ position:absolute; width:14px; height:14px;
  border-color:var(--blue); border-style:solid; border-width:0; pointer-events:none; }
.chassis::before{ content:""; top:-1px; left:-1px; border-top-width:1px; border-left-width:1px; }
.chassis::after{ content:""; top:-1px; right:-1px; border-top-width:1px; border-right-width:1px; }
.chassis>.crop-bl{ bottom:-1px; left:-1px; border-bottom-width:1px; border-left-width:1px; }
.chassis>.crop-br{ bottom:-1px; right:-1px; border-bottom-width:1px; border-right-width:1px; }

/* ===== 03A · THE BOOK (fanart Dream Console · INK/dark) ======
   Same #030712 as the hero scrim bottom so the video melts in,
   with the full Dream Console chrome (surface-ink): // hud-line,
   brushstroke eyebrow, Nostromo + cyan pop, hud-tag accolades,
   reviews in a chassis card, bracket CTAs. */
.bookfeat{ position:relative; background:#030712; color:#fff; overflow:hidden;
  min-height:100svh; display:flex; align-items:center; padding-block:clamp(38px,6vh,76px); }
.bookfeat > .wrap{ position:relative; z-index:1; width:100%; }
.bookfeat__hud{ margin-bottom:clamp(20px,3.5vh,38px); }
/* surface-ink theme for the Dream Console primitives inside the book */
.bookfeat .hud-line{ color:var(--cyan); }
.bookfeat .hud-line::before,.bookfeat .hud-line::after{ background:rgba(255,255,255,.14); }
.bookfeat .hud-tag{ border-color:var(--cyan); color:var(--cyan); }
.bookfeat .hud-tag.muted{ color:rgba(255,255,255,.62); border-color:rgba(255,255,255,.24); }
.bookfeat .chip{ color:var(--cyan); border-color:rgba(255,255,255,.24); }
.bookfeat .chip.new{ color:var(--yellow); border-color:rgba(255,210,63,.6); background:rgba(255,210,63,.1); }
.bookfeat .chassis{ background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.14); }
.bookfeat .chassis::before,.bookfeat .chassis::after,
.bookfeat .chassis>.crop-bl,.bookfeat .chassis>.crop-br{ border-color:var(--cyan); }

.bookfeat__inner{ display:grid; grid-template-columns:.96fr 1.04fr; gap:clamp(30px,5vw,72px); align-items:center; }
.bookfeat__cover{ position:relative; display:flex; flex-direction:column; align-items:center; gap:16px; isolation:isolate; }
.bookfeat__cover::before{ content:""; position:absolute; inset:0% 4% 18%; z-index:-1;
  background:radial-gradient(58% 50% at 50% 40%, rgba(63,180,255,.34), transparent 72%); filter:blur(34px); }
.bookfeat__cover img{ width:min(470px,90%); height:auto; transform:rotate(-2deg);
  filter:drop-shadow(0 42px 62px rgba(0,0,0,.7)); }
.bookfeat__stamp{ position:absolute; top:1%; right:7%; z-index:2; background:var(--yellow); color:var(--ink);
  border:1px solid var(--ink); font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  padding:6px 10px; transform:rotate(4deg); }
.bookfeat__rating{ display:inline-flex; align-items:center; gap:10px; text-decoration:none; }
.bookfeat__rating-score{ font-family:var(--display); font-weight:900; font-size:1.3rem; color:#fff; line-height:1; }
.bookfeat__rating-stars{ color:var(--yellow); font-size:18px; letter-spacing:2px; line-height:1; }
.bookfeat__rating-meta{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:rgba(255,255,255,.62); transition:color var(--dur-fast); }
.bookfeat__rating:hover .bookfeat__rating-meta{ color:var(--cyan); }

.bookfeat__eyebrow{ color:var(--blue-glow); }
.bookfeat__title{ font-family:var(--display); font-weight:900; text-transform:uppercase; color:#fff;
  font-size:clamp(2.1rem,4vw,3.6rem); line-height:1.0; letter-spacing:-.015em; margin:8px 0 0; text-wrap:balance; }
.bookfeat__title .pop{ color:var(--cyan); }
.bookfeat__synopsis{ color:rgba(255,255,255,.72); margin:16px 0 0; max-width:46ch; line-height:1.5;
  font-size:clamp(1rem,1.3vw,1.15rem); }
.bookfeat__synopsis strong{ color:var(--cyan); font-weight:600; }
.bookfeat__tags{ display:flex; flex-wrap:wrap; gap:8px; margin:18px 0 0; }

/* reviews inside a chassis card */
.bookfeat__reviewchassis{ margin:20px 0 0; padding:22px 24px 16px; }
.revslide{ position:relative; }
.revslide__track{ position:relative; min-height:clamp(120px,14vh,148px); }
.review-card{ position:absolute; inset:0; margin:0; text-align:center; display:flex; flex-direction:column;
  align-items:center; justify-content:center; opacity:0; visibility:hidden; transition:opacity .5s var(--ease-out); }
.review-card.is-active{ opacity:1; visibility:visible; }
.review-card__stars{ display:block; color:var(--yellow); font-size:14px; letter-spacing:2px; margin-bottom:8px; }
.review-card p{ margin:0 auto; color:#fff; font-size:1.02rem; line-height:1.5; max-width:52ch; }
.review-card__src{ display:block; margin-top:12px; font-family:var(--mono); font-size:10px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--cyan); }
.revslide__nav{ display:flex; align-items:center; justify-content:center; gap:14px; margin-top:14px; }
.revslide__arrow{ width:30px; height:30px; border:1px solid rgba(255,255,255,.3); background:transparent; color:#fff;
  border-radius:50%; cursor:pointer; font-size:16px; line-height:1; display:grid; place-items:center;
  transition:border-color var(--dur-fast), color var(--dur-fast); }
.revslide__arrow:hover{ border-color:var(--cyan); color:var(--cyan); }
.revslide__dots{ display:flex; gap:7px; }
.revslide__dot{ width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.25); border:0; padding:0; cursor:pointer;
  transition:background var(--dur-fast), transform var(--dur-fast); }
.revslide__dot.is-active{ background:var(--cyan); transform:scale(1.25); }

.bookfeat__ctas{ display:flex; flex-wrap:wrap; gap:12px; margin-top:24px; }

@media (max-width:880px){ .bookfeat__inner{ grid-template-columns:1fr; gap:28px; } }

/* ===== MODALS (buy + look inside) =========================== */
.modal[hidden]{ display:none; }
.modal{ position:fixed; inset:0; z-index:400; display:grid; place-items:center; padding:20px; }
.modal__backdrop{ position:absolute; inset:0; background:rgba(3,7,18,.78);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); animation:modalFade .25s var(--ease-out); }
.modal__panel{ position:relative; z-index:1; width:min(560px,100%); max-height:90svh; overflow:auto;
  background:#0A1322; border:1px solid rgba(159,227,255,.22); border-radius:12px; padding:clamp(24px,4vw,40px);
  color:#fff; box-shadow:0 40px 90px -30px rgba(0,0,0,.8); animation:modalPop .3s var(--ease-out); }
.modal__panel--wide{ width:min(920px,100%); }
@keyframes modalFade{ from{ opacity:0; } }
@keyframes modalPop{ from{ opacity:0; transform:translateY(14px) scale(.98); } }
.modal__x{ position:absolute; top:12px; right:12px; width:38px; height:38px; border:1px solid rgba(255,255,255,.2);
  background:transparent; color:#fff; border-radius:50%; font-size:22px; line-height:1; cursor:pointer; display:grid;
  place-items:center; transition:border-color var(--dur-fast), color var(--dur-fast); }
.modal__x:hover{ border-color:var(--cyan); color:var(--cyan); }
.modal__title{ font-family:var(--display); font-weight:900; text-transform:uppercase; color:#fff;
  font-size:clamp(1.5rem,2.6vw,2.1rem); line-height:1.04; letter-spacing:-.01em; margin:10px 0 0; }
.modal .label{ color:var(--cyan); }
.modal__sub{ color:rgba(255,255,255,.7); margin:10px 0 0; font-size:.95rem; }

/* retailers grid */
.retailers{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:22px; }
.retailer{ display:flex; align-items:center; justify-content:space-between; gap:10px; text-decoration:none;
  padding:16px 18px; border:1px solid rgba(255,255,255,.16); border-radius:8px; background:rgba(255,255,255,.04);
  color:#fff; font-family:var(--display); font-weight:800; text-transform:uppercase; letter-spacing:-.01em;
  font-size:1.05rem; transition:border-color var(--dur-fast), background var(--dur-fast), transform var(--dur-fast); }
.retailer:hover{ border-color:var(--cyan); background:rgba(159,227,255,.08); transform:translateY(-2px); }
.retailer span{ font-family:var(--mono); font-weight:400; font-size:11px; letter-spacing:.1em; color:var(--cyan); }
@media (max-width:520px){ .retailers{ grid-template-columns:1fr; } }

/* look-inside gallery */
.gallery{ position:relative; margin-top:20px; display:grid; grid-template-columns:auto 1fr auto;
  align-items:center; gap:12px; }
.gallery__frame{ position:relative; aspect-ratio:3/2; background:#05080F; border:1px solid rgba(255,255,255,.1);
  border-radius:8px; overflow:hidden; }
.gallery__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain;
  opacity:0; visibility:hidden; transition:opacity .4s var(--ease-out); }
.gallery__img.is-active{ opacity:1; visibility:visible; }
.gallery__arrow{ width:42px; height:42px; border:1px solid rgba(255,255,255,.28); background:rgba(255,255,255,.04);
  color:#fff; border-radius:50%; cursor:pointer; font-size:20px; display:grid; place-items:center;
  transition:border-color var(--dur-fast), color var(--dur-fast); }
.gallery__arrow:hover{ border-color:var(--cyan); color:var(--cyan); }
.gallery__dots{ grid-column:2; justify-self:center; display:flex; gap:7px; margin-top:4px; }
.gallery__dot{ width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.25); border:0; cursor:pointer; }
.gallery__dot.is-active{ background:var(--cyan); }
@media (max-width:600px){
  .gallery{ grid-template-columns:1fr; }
  .gallery__arrow{ position:absolute; top:50%; transform:translateY(-50%); z-index:2; }
  .gallery__arrow--prev{ left:8px; } .gallery__arrow--next{ right:8px; }
  .gallery__dots{ grid-column:1; }
}

@media (max-width:880px){
  .bookfeat{ min-height:auto; }
  .bookfeat__inner{ grid-template-columns:1fr; gap:24px; }
  .bookfeat__cover{ max-width:230px; margin-inline:auto; }
  .bookfeat__body{ text-align:center; }
  .bookfeat__synopsis{ margin-inline:auto; }
  .bookfeat__ctas{ justify-content:center; }
  .bookfeat__reviews{ grid-template-columns:1fr; }
  .statline{ grid-template-columns:1fr 1fr; }
}

/* ===== 03C · WORLD GRID (explore) ===========================
   Desktop: PINNED (sticky) 3×2 grid that fills the viewport and
   stays locked while the question slides over it. Contained with
   padding all around (not full-bleed), thick gaps. */
.pinstack{ position:relative; }
/* tall grid of SQUARE cards (scroll through them). It sticks at the BOTTOM,
   so it freezes once the last row (bottom 2 cards) reaches the bottom of the
   viewport — then it stays locked while the question slides over it.
   --gridpin top offset is set by JS to (viewport − grid height). */
.worldgrid{ position:sticky; top:var(--gridpin,0px); z-index:1; box-sizing:border-box;
  background:var(--paper); padding:clamp(8px,0.9vw,14px); }
.worldgrid__head{ padding:clamp(28px,5vh,56px) 6px clamp(14px,1.8vh,22px); }
.worldgrid__grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(8px,0.9vw,14px); }
.wtile{ position:relative; overflow:hidden; isolation:isolate; aspect-ratio:5/4; border-radius:0;
  display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center;
  padding:clamp(18px,2vw,38px); text-decoration:none;
  transition:transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out); }
.wtile:hover{ transform:translateY(-4px); box-shadow:var(--shadow-pop); }
.wtile__bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2;
  transition:transform .7s var(--ease-out); }
.wtile:hover .wtile__bg{ transform:scale(1.06); }
/* center-weighted dark overlay keeps the centered text legible over any image */
.wtile__scrim{ position:absolute; inset:0; z-index:-1;
  background:radial-gradient(120% 100% at 50% 50%, rgba(6,12,30,.42), rgba(6,12,30,.74)); }
.wtile__num{ position:absolute; top:20px; left:0; right:0; text-align:center; font-family:var(--mono); font-size:11px;
  letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.65); }
.wtile__cat{ font-family:var(--display); font-weight:900; text-transform:uppercase; color:#fff;
  font-size:clamp(1.6rem,2.6vw,2.6rem); line-height:1.02; letter-spacing:-.01em; text-wrap:balance; }
.wtile__tag{ color:rgba(255,255,255,.9); margin-top:10px; font-size:clamp(1rem,1.25vw,1.25rem); font-family:var(--body); }
/* arrow rendered as a Dream Console bracket BUTTON */
.wtile__arrow{ margin-top:20px; font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:#fff; display:inline-flex; align-items:center; gap:0; border:1px solid rgba(255,255,255,.55);
  padding:12px 18px; transition:background var(--dur-fast) var(--ease), color var(--dur-fast), border-color var(--dur-fast); }
.wtile__arrow::before{ content:"[\00a0\00a0"; color:var(--cyan); }
.wtile__arrow::after{ content:"\00a0\00a0]"; color:var(--cyan); }
.wtile__arrow .arr{ display:none; }
.wtile:hover .wtile__arrow{ background:#fff; color:var(--ink); border-color:#fff; }
.wtile:hover .wtile__arrow::before,.wtile:hover .wtile__arrow::after{ color:var(--blue); }
/* the give-back tile gets the solar-yellow accent */
.wtile--yellow .wtile__scrim{ background:radial-gradient(120% 100% at 50% 50%, rgba(24,17,0,.42), rgba(12,9,0,.78)); }
.wtile--yellow .wtile__cat{ color:var(--yellow); }
.wtile--yellow .wtile__num{ color:var(--yellow); }
.wtile--yellow .wtile__arrow{ color:var(--yellow); border-color:rgba(255,210,63,.55); }
.wtile--yellow .wtile__arrow::before,.wtile--yellow .wtile__arrow::after{ color:var(--yellow); }
.wtile--yellow:hover .wtile__arrow{ background:var(--yellow); color:var(--ink); border-color:var(--yellow); }
.wtile--yellow:hover .wtile__arrow::before,.wtile--yellow:hover .wtile__arrow::after{ color:var(--ink); }
/* tablet/mobile: unpin everything, normal flow (no pin/slide-over) */
@media (max-width:880px){
  .worldgrid{ height:auto; display:block; padding:0; }  /* stays sticky — glass slides over it */
  .worldgrid__head{ padding:clamp(38px,5vh,60px) var(--gut) 20px; }
  .worldgrid__grid{ grid-template-columns:1fr 1fr; grid-template-rows:none; aspect-ratio:auto;
    padding:0 var(--gut) clamp(40px,6vh,72px); }
  .wtile{ aspect-ratio:5/4; min-height:0; }
}
/* phones: horizontal scroll-snap carousel, cards peeking at the edge */
@media (max-width:560px){
  .worldgrid__grid{ display:flex; grid-template-columns:none; gap:12px;
    overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
    padding:0 var(--gut) 12px; scroll-padding-left:var(--gut); scrollbar-width:none; }
  .worldgrid__grid::-webkit-scrollbar{ display:none; }
  .wtile{ flex:0 0 80%; aspect-ratio:5/4; min-height:0; scroll-snap-align:start; }
}

/* ===== 03B · QUESTION (word-cycler / slot machine) ========== */
.sr-only{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
/* STICKY: slides up over the pinned grid as a frosted-glass panel, then
   locks at top:0 (held by .pin-spacer--hold) before releasing to the
   next section. The grid shows through blurred (seamless glass). */
.pinstack{ position:relative; }
.pin-spacer{ pointer-events:none; }
.pin-spacer--freeze{ height:70vh; }   /* grid holds frozen on the bottom 2 cards this long before the question rises */
.pin-spacer--hold{ height:520vh; }    /* glass stays pinned this long — scroll room for the 5 story chapters (js/story.js) */
/* after the grid freezes, this slides up over it and locks at top:0 for the
   hold-spacer, then releases to the next section. */
.question{ position:sticky; top:0; z-index:3;
  min-height:100svh; display:flex; align-items:center; justify-content:center; text-align:center;
  background:color-mix(in srgb, var(--paper) 68%, transparent);
  -webkit-backdrop-filter:blur(26px) saturate(120%); backdrop-filter:blur(26px) saturate(120%);
  border-top:1px solid rgba(255,255,255,.55);
  border-top-left-radius:32px; border-top-right-radius:32px;
  box-shadow:0 -36px 80px -40px rgba(20,20,20,.34); }
.question__eyebrow{ color:var(--blue); }
/* one line, never wraps — JS auto-fits the font-size to the container so
   the longest possible line still fits on a single row. */
.question__phrase{ font-family:var(--display); font-weight:900; text-transform:uppercase;
  font-size:clamp(1rem,4.4vw,3.4rem); line-height:1.1; letter-spacing:-.015em; color:var(--ink);
  margin:20px auto 0; white-space:nowrap; }
/* "Astronauts" stays fixed (blue, the steady half of the question). */
.fixedword{ color:var(--blue); }
/* "Black" is a vertical reel — a single transform rolls the strip fast,
   then eases to a stop. Window is one line tall; JS locks its width to
   the widest word and builds the strip. */
/* overflow:hidden makes an inline-block baseline its bottom edge, which
   lifts the word ~0.25em; nudge it back down so it sits on the text baseline. */
.reel{ display:inline-block; overflow:hidden; vertical-align:bottom; height:1.1em;
  position:relative; top:0.25em; color:var(--blue); }
.reel__strip{ display:block; will-change:transform; }
.reel__word{ display:block; height:1.1em; line-height:1.1; white-space:nowrap; }
@keyframes reelSettle{ 0%{ transform:scale(1.05); } 60%{ transform:scale(.995); } 100%{ transform:none; } }
.reel.is-final{ animation:reelSettle .42s var(--ease-out); }
/* tablet/mobile: same glass experience, tuned — slightly tighter blur/radius
   and a shorter scroll runway for thumb-flick pacing */
@media (max-width:880px){
  .pin-spacer--freeze{ height:45vh; }
  .pin-spacer--hold{ height:700vh; }  /* flick momentum eats px fast — ~1 flick per chapter */
  .question{ border-top-left-radius:20px; border-top-right-radius:20px;
    -webkit-backdrop-filter:blur(18px) saturate(120%); backdrop-filter:blur(18px) saturate(120%); }
}

/* ---- STORY CHAPTERS on the glass --------------------------------
   Scenes overlap, centered; js/story.js (GSAP ScrollTrigger, scrubbed
   by the hold spacer) plays them as cinematic in/out beats. CH.01 is
   visible by default so the glass never rises empty (and no-GSAP
   still shows the question). ------------------------------------- */
.story__scene{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(var(--wrap),100%); padding-inline:var(--gut);
  opacity:0; visibility:hidden; }
.story__scene[data-scene="01"]{ opacity:1; visibility:visible; }
.story__big{ font-family:var(--display); font-weight:900; text-transform:uppercase;
  font-size:clamp(1.7rem,4.2vw,3.5rem); line-height:1.04; letter-spacing:-.015em;
  color:var(--ink); margin:0; text-wrap:balance; }
.story__sub{ font-family:var(--body); font-weight:500; color:var(--ink-3);
  font-size:clamp(1rem,1.5vw,1.35rem); line-height:1.5; max-width:52ch;
  margin:clamp(14px,2.4vh,24px) auto 0; }
.story__eyebrow{ color:var(--blue); display:block; margin-bottom:14px; }
.story__scene [data-line]{ will-change:transform,opacity,filter; }
.answer__aku{ font-family:var(--display); font-weight:900; text-transform:uppercase;
  color:var(--blue); letter-spacing:-.01em; }

/* chapter meter — bottom-center HUD readout */
.story__meter{ position:absolute; left:50%; bottom:30px; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:9px; }
.story__ch{ font-family:var(--mono); font-size:10px; letter-spacing:.3em; text-transform:uppercase;
  color:var(--ink-3); }
.story__ticks{ display:flex; gap:6px; }
.story__ticks i{ width:18px; height:2px; background:var(--line-2); transition:background .3s; }
.story__ticks i.is-on{ background:var(--blue); }
@media (max-width:880px){ .story__meter{ bottom:22px; } .story__ticks i{ width:14px; } }

/* reduced motion (any width): no pin, no timeline — a plain readable story */
@media (prefers-reduced-motion: reduce){
  .pin-spacer{ display:none; }
  .question{ position:static; min-height:auto; padding-block:clamp(70px,14vh,150px);
    flex-direction:column; border-radius:0; box-shadow:none;
    -webkit-backdrop-filter:none; backdrop-filter:none; background:var(--paper); }
  .story__scene{ position:static; transform:none; opacity:1; visibility:visible; width:auto; }
  .story__scene + .story__scene{ margin-top:clamp(44px,9vh,84px); }
  .story__scene [data-line]{ opacity:1; transform:none; filter:none; }
  .story__meter{ display:none; }
}

/* desktop fallback when GSAP fails to load: plain stacked story */
.question.story--static{ flex-direction:column; min-height:auto; padding-block:16vh; }
.question.story--static .story__scene{ position:static; transform:none; opacity:1; visibility:visible; }
.question.story--static .story__scene + .story__scene{ margin-top:clamp(44px,9vh,84px); }
.question.story--static .story__meter{ display:none; }

/* ===== 03E · SHOWCASE (two horizontal-scroll card rows) ===== */
.showcase{ background:var(--paper); padding-block:clamp(48px,8vh,100px); overflow:hidden; }
.showcase__head{ padding-inline:clamp(8px,0.9vw,14px); margin-bottom:clamp(24px,3.5vh,40px); }
.showcase__title{ font-family:var(--display); font-weight:900; text-transform:uppercase; color:var(--ink);
  font-size:clamp(2.1rem,5.2vw,4.4rem); line-height:1; letter-spacing:-.02em; margin-top:14px; text-wrap:balance; }
/* same padding/gap as the world grid */
.showcase__row{ display:flex; gap:clamp(8px,0.9vw,14px); overflow-x:auto;
  -webkit-overflow-scrolling:touch; padding-inline:clamp(8px,0.9vw,14px);
  scroll-padding-left:clamp(8px,0.9vw,14px); scrollbar-width:none; }
.showcase__row::-webkit-scrollbar{ display:none; }
.showcase__row--big{ scroll-snap-type:x mandatory; }   /* snap to each big card */
.showcase__row--small{ margin-top:clamp(8px,0.9vw,14px); scroll-snap-type:x proximity; }
.scard{ position:relative; flex:0 0 auto; aspect-ratio:16/9; overflow:hidden; isolation:isolate;
  scroll-snap-align:start; border-radius:0; text-decoration:none; display:block;
  transition:transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out); }
.scard:hover{ transform:translateY(-4px); box-shadow:var(--shadow-pop); }
/* big cards ≈ same height as the world-grid cards; small row a bit shorter */
.showcase__row--big .scard{ height:clamp(380px,60vh,580px); width:auto; }
.showcase__row--small .scard{ height:clamp(230px,34vh,360px); width:auto; }
.scard__media{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2;
  transition:transform .6s var(--ease-out); }
.scard:hover .scard__media{ transform:scale(1.05); }
.scard__scrim{ position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(6,12,30,0) 42%, rgba(6,12,30,.55) 72%, rgba(6,12,30,.85) 100%); }
.scard__title{ position:absolute; left:0; bottom:0; padding:clamp(12px,1.3vw,20px); color:#fff;
  font-family:var(--display); font-weight:800; text-transform:uppercase; line-height:1.04; letter-spacing:-.01em;
  font-size:clamp(1rem,1.4vw,1.4rem); }
.showcase__row--small .scard__title{ font-size:clamp(.85rem,1vw,1.1rem); }
/* mobile: size cards by WIDTH — one big card per viewport with the next
   peeking ~34px so the horizontal scroll is obvious */
@media (max-width:880px){
  .showcase__row--big .scard{ width:calc(100vw - clamp(8px,0.9vw,14px)*2 - 34px); height:auto; }
  .showcase__row--small .scard{ width:62vw; height:auto; }
}

/* ===== 03F · AKU ID (scroll-driven build assembly) ========= */
/* Tall section → its scroll length drives the 3D assembly; the
   sticky stage pins for the duration. --akb-steps controls length. */
/* --akb-steps drives assembly length · --akb-hold adds a "locked" tail at the
   end where the finished figure + end card hold pinned before the page releases. */
.akubuild{ --akb-steps:8; --akb-hold:1.6; position:relative;
  height:calc((var(--akb-steps) + var(--akb-hold)) * 100vh); background:var(--paper); }
.akubuild__sticky{ position:sticky; top:0; height:100vh; overflow:hidden; isolation:isolate; }
.akubuild__canvas{ position:absolute; inset:0; width:100%; height:100%; z-index:2; display:block; }

/* big editorial word sits behind the figure */
.akubuild__labels{ position:absolute; inset:0; z-index:1; pointer-events:none;
  display:flex; align-items:center; justify-content:center; overflow:hidden; }
.akb-biglabel{ text-align:center; will-change:opacity; transition:opacity .35s ease; }
.akb-bigword{ font-family:var(--display); font-weight:900; text-transform:uppercase;
  font-size:clamp(72px,14vw,210px); line-height:.92; letter-spacing:-.01em; color:var(--ink);
  white-space:nowrap; opacity:.10; }
.akb-bigindex{ font-family:var(--mono); font-size:12px; letter-spacing:.32em; color:var(--ink-3);
  margin-top:14px; text-transform:uppercase; }

/* HUD chrome + headline overlays */
.akubuild__ui{ position:absolute; inset:0; z-index:4; pointer-events:none; color:var(--ink); }
.akb-hud{ position:absolute; font-family:var(--mono); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-3); }
.akb-hud.tl{ top:24px; left:var(--gut); } .akb-hud.tr{ top:24px; right:var(--gut); text-align:right; }
.akb-hud.bl{ bottom:24px; left:var(--gut); } .akb-hud.br{ bottom:24px; right:var(--gut); text-align:right; }
.akb-rail{ position:absolute; bottom:62px; left:var(--gut); right:var(--gut); height:1px;
  background:var(--line); overflow:hidden; }
.akb-fill{ height:100%; width:0%; background:var(--blue); transition:width .05s linear; }

.akb-title{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); text-align:center;
  width:min(680px, 88vw); will-change:opacity,transform; }
.akb-eyebrow{ color:var(--blue); display:block; margin-bottom:14px; }
.akb-h1{ font-family:var(--display); font-weight:900; text-transform:uppercase; color:var(--ink);
  font-size:clamp(2.6rem,8vw,6rem); line-height:.92; letter-spacing:-.02em; margin:0; }
.akb-sub{ margin-top:16px; font-family:var(--body); font-size:clamp(.95rem,1.2vw,1.1rem); color:var(--ink-3); }

.akb-end{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center;
  justify-content:center; text-align:center; pointer-events:none;
  opacity:0; transform:translateY(14px); transition:opacity .8s ease, transform .8s var(--ease-out); }
.akb-end.show{ opacity:1; transform:translateY(0); }
/* soft paper halo so the centered card stays legible over the figure */
.akb-end__panel{ position:relative; display:flex; flex-direction:column; align-items:center;
  padding:34px 56px; }
.akb-end__panel::before{ content:""; position:absolute; inset:-10% -20%; z-index:-1;
  background:radial-gradient(ellipse at center, color-mix(in srgb, var(--paper) 86%, transparent) 38%, transparent 72%);
  filter:blur(6px); }
.akb-end .btn{ pointer-events:auto; margin-top:18px; }
.akb-stamp{ font-family:var(--mono); font-size:11px; letter-spacing:.3em; text-transform:uppercase; color:var(--ink-3); }
.akb-meta{ margin-top:16px; font-family:var(--mono); font-size:10px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-3); }

.akb-cue{ position:absolute; bottom:84px; left:50%; transform:translateX(-50%); font-family:var(--mono);
  font-size:10px; letter-spacing:.3em; text-transform:uppercase; color:var(--ink-3); opacity:.9;
  transition:opacity .4s ease; animation:akb-bob 2.2s ease-in-out infinite; }
/* animate transform only — opacity is owned by JS / the is-final rule */
@keyframes akb-bob{ 0%,100%{ transform:translate(-50%,0); } 50%{ transform:translate(-50%,8px); } }

/* hide bottom chrome on the final hero frame */
.akubuild.is-final .akb-hud.bl, .akubuild.is-final .akb-hud.br,
.akubuild.is-final .akb-rail, .akubuild.is-final .akb-cue{ opacity:0; transition:opacity .5s ease; }

@media (max-width:880px){
  .akubuild{ --akb-steps:7; --akb-hold:1.2; }
  .akb-hud.tr, .akb-hud.tl{ font-size:10px; }
  .akb-end__panel{ padding:28px 32px; }
}

/* ===== 03G · SHOP STRIP (floating products, AKU SHOP look) === */
.shopstrip{ background:var(--paper); padding-block:clamp(48px,8vh,96px); overflow:hidden; }
.shopstrip__head{ display:flex; align-items:flex-end; gap:18px; flex-wrap:wrap;
  padding-inline:clamp(8px,0.9vw,14px); margin-bottom:clamp(20px,3vh,34px); }
.shopstrip__heading{ display:flex; flex-direction:column; gap:10px; }
.shopstrip__title{ font-family:var(--display); font-weight:900; text-transform:uppercase; color:var(--ink);
  font-size:clamp(2.1rem,5.2vw,4.4rem); line-height:1; letter-spacing:-.02em; margin:0; }
.shopstrip__all{ margin-left:auto; align-self:flex-end; font-family:var(--mono); font-size:12px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--blue); text-decoration:none; }
.shopstrip__all:hover{ opacity:.7; }
.shopstrip__all .arr{ transition:transform var(--dur-fast) var(--ease-out); display:inline-block; }
.shopstrip__all:hover .arr{ transform:translateX(4px); }

.shopstrip__rail{ display:flex; gap:clamp(8px,0.9vw,14px); overflow-x:auto;
  -webkit-overflow-scrolling:touch; padding-inline:clamp(8px,0.9vw,14px);
  scroll-padding-left:clamp(8px,0.9vw,14px); scroll-snap-type:x proximity; scrollbar-width:none; }
.shopstrip__rail::-webkit-scrollbar{ display:none; }

.pcard{ flex:0 0 auto; width:clamp(220px,23vw,300px); aspect-ratio:4/5; scroll-snap-align:start;
  display:flex; flex-direction:column; text-decoration:none; background:#fff;
  border:1px solid var(--line); padding:clamp(14px,1.4vw,20px);
  transition:transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out); }
.pcard:hover{ transform:translateY(-5px); box-shadow:var(--shadow-card); border-color:var(--line-2); }
.pcard__float{ flex:1 1 auto; min-height:0; display:grid; place-items:center; margin-bottom:12px; }
.pcard__float img{ max-width:84%; max-height:84%; width:auto; height:auto; object-fit:contain;
  transition:transform .4s var(--ease-out); }
.pcard:hover .pcard__float img{ transform:translateY(-5%); }
.pcard__name{ font-family:var(--display); font-weight:700; text-transform:uppercase;
  font-size:clamp(.9rem,1.1vw,1.05rem); letter-spacing:.01em; color:var(--ink); line-height:1.1; }
.pcard__price{ font-family:var(--mono); font-size:13px; letter-spacing:.06em; color:var(--ink-3); margin-top:4px; }
.pcard__cat{ font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--blue); margin-top:9px; }
@media (max-width:600px){ .pcard{ width:clamp(190px,68vw,240px); } }

/* ===== 03H · SPLIT — the creator | the mission ============== */
/* same gutter + gap as the grids above so panels never touch edges or each other */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(8px,0.9vw,14px);
  padding:clamp(8px,0.9vw,14px); background:var(--paper); min-height:clamp(560px,82vh,820px); }
.split--solo{ grid-template-columns:1fr; min-height:clamp(440px,62vh,680px); }
.split--solo .split__body{ max-width:60ch; }
.split__half{ position:relative; display:flex; align-items:flex-end; overflow:hidden;
  padding:clamp(32px,4.5vw,72px); isolation:isolate; }
.split__bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; }
.split__scrim{ position:absolute; inset:0; z-index:-1;
  background:linear-gradient(0deg, rgba(6,16,44,.92) 0%, rgba(6,16,44,.55) 42%, rgba(6,16,44,.12) 78%, rgba(6,16,44,.18) 100%); }
.split__body{ position:relative; max-width:46ch; }

/* creator side — photo + white copy */
.split__half--creator{ color:#fff; }
.split__half--creator .hud-line{ color:var(--blue-glow); }

/* mission side — deep ibra-blue typographic panel */
.split__half--mission{ color:#fff; align-items:center;
  background:linear-gradient(155deg,#0B2B6B 0%,#061A44 60%,#08214f 100%); }
.split__half--mission .hud-line{ color:var(--blue-glow); }

.split__title{ font-family:var(--display); font-weight:900; text-transform:uppercase; color:#fff;
  font-size:clamp(2rem,4vw,3.4rem); line-height:.96; letter-spacing:-.02em; margin:14px 0 0; text-wrap:balance; }
.split__half--mission .split__title{ font-size:clamp(2.2rem,4.6vw,4rem); }
.split__half--mission .split__title em{ font-style:normal; color:var(--blue-glow); }
.split__text{ margin:18px 0 26px; color:rgba(255,255,255,.82);
  font-size:clamp(.98rem,1.15vw,1.12rem); line-height:1.6; }

.split__stats{ list-style:none; margin:0; padding:0; display:flex; gap:clamp(20px,2.4vw,40px); flex-wrap:wrap; }
.split__stats li{ display:flex; flex-direction:column; }
.split__stats b{ font-family:var(--display); font-weight:900; color:#fff;
  font-size:clamp(1.5rem,2.6vw,2.3rem); line-height:1; letter-spacing:-.01em; }
.split__stats span{ font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--blue-glow); margin-top:7px; }

@media (max-width:820px){
  .split{ grid-template-columns:1fr; }
  .split__half{ align-items:flex-end; }
  .split__half--creator{ min-height:64vh; }
  .split__half--mission{ align-items:flex-start; padding-block:clamp(44px,8vh,72px); }
}

/* ===== 03I · AKU FOUNDATION (mission · visits · map) ======== */
.visits{ background:var(--paper); padding-block:clamp(56px,9vh,120px); }
/* foundation mission intro */
.foundation__intro{ width:min(760px,100% - var(--gut)*2); margin:0 auto clamp(40px,6vh,72px);
  text-align:center; }
.foundation__intro .hud-line{ color:var(--blue); justify-content:center; }
.foundation__title{ font-family:var(--display); font-weight:900; text-transform:uppercase; color:var(--ink);
  font-size:clamp(2.2rem,5vw,4rem); line-height:.95; letter-spacing:-.02em; margin:14px 0 0; text-wrap:balance; }
.foundation__lead{ margin:18px auto 26px; max-width:54ch; color:var(--ink-2);
  font-size:clamp(1.02rem,1.3vw,1.22rem); line-height:1.6; }
.foundation__lead em{ font-style:normal; color:var(--blue); font-weight:600; }
.foundation__stats{ list-style:none; margin:0; padding:0; display:flex; justify-content:center; flex-wrap:wrap;
  gap:clamp(22px,3vw,48px); }
.foundation__stats li{ display:flex; flex-direction:column; }
.foundation__stats b{ font-family:var(--display); font-weight:900; color:var(--ink);
  font-size:clamp(1.6rem,2.8vw,2.4rem); line-height:1; letter-spacing:-.01em; }
.foundation__stats span{ font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-3); margin-top:7px; }

.visits__inner{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,4vw,64px);
  align-items:center; width:min(var(--wrap),100% - var(--gut)*2); margin-inline:auto; }

/* slideshow */
.visits__slides{ position:relative; }
.visits__viewport{ position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--paper-2);
  box-shadow:var(--shadow-card); }
.vslide{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity .7s var(--ease-out); }
.vslide.is-active{ opacity:1; }
.vslide__arrow{ position:absolute; top:50%; transform:translateY(-50%); width:42px; height:42px;
  display:grid; place-items:center; border:0; cursor:pointer; z-index:2;
  background:color-mix(in srgb, var(--paper) 84%, transparent); color:var(--ink);
  font-size:22px; line-height:1; backdrop-filter:blur(4px); transition:background .2s; }
.vslide__arrow:hover{ background:var(--paper); }
.vslide__arrow--prev{ left:10px; } .vslide__arrow--next{ right:10px; }
.vslide__dots{ display:flex; justify-content:center; gap:7px; margin-top:14px; }
.vslide__dot{ width:7px; height:7px; border:0; padding:0; cursor:pointer; border-radius:50%;
  background:var(--line-2); transition:background .2s, transform .2s; }
.vslide__dot.is-active{ background:var(--blue); transform:scale(1.25); }

/* copy */
.visits__title{ font-family:var(--display); font-weight:800; text-transform:uppercase; color:var(--ink);
  font-size:clamp(1.5rem,2.6vw,2.2rem); line-height:1; letter-spacing:-.01em; margin:10px 0 0; }
.visits__lead{ margin:18px 0 24px; color:var(--ink-2); font-size:clamp(1rem,1.2vw,1.12rem); line-height:1.6; }
.visits__lead em{ font-style:italic; }

/* rotating testimonial */
.visits__quote{ position:relative; margin:0 0 26px; padding:20px 22px; border-left:3px solid var(--blue);
  background:var(--paper-2); min-height:148px; }
.vquote{ position:absolute; inset:0; margin:0; padding:20px 22px; opacity:0; pointer-events:none;
  transition:opacity .5s var(--ease-out); display:flex; flex-direction:column; justify-content:center; }
.vquote.is-active{ opacity:1; pointer-events:auto; position:relative; }
.vquote p{ font-family:var(--body); font-size:clamp(1rem,1.25vw,1.18rem); line-height:1.5; color:var(--ink);
  font-style:italic; margin:0; }
.vquote figcaption{ margin-top:12px; font-family:var(--mono); font-size:10px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-3); }

/* US visit map */
.visits__map{ width:min(var(--wrap),100% - var(--gut)*2); margin:clamp(40px,6vh,72px) auto 0; text-align:center; }
.visits__maplead{ font-family:var(--body); color:var(--ink-2); margin:8px 0 22px;
  font-size:clamp(.98rem,1.15vw,1.1rem); }
.usmap__svg{ display:block; width:100%; height:auto; max-width:960px; margin-inline:auto; overflow:visible; }
.usmap__land{ fill:var(--paper-2); stroke:var(--line-2); stroke-width:.8; stroke-linejoin:round; }
.usmap__dot{ fill:var(--blue); stroke:var(--paper); stroke-width:1.6; }
.usmap__pulse{ fill:var(--blue); opacity:.28; transform-box:fill-box; transform-origin:center;
  animation:usmap-pulse 2.6s ease-out infinite; }
@keyframes usmap-pulse{ 0%{ transform:scale(.7); opacity:.4; } 70%,100%{ transform:scale(2.6); opacity:0; } }
.usmap__label{ font-family:var(--mono); font-size:13px; letter-spacing:.04em; fill:var(--ink);
  text-transform:uppercase; dominant-baseline:middle; paint-order:stroke; stroke:var(--paper); stroke-width:3px; }
@media (prefers-reduced-motion:reduce){ .usmap__pulse{ animation:none; opacity:.2; } }

@media (max-width:860px){
  .visits__inner{ grid-template-columns:1fr; gap:24px; }
  .visits__quote{ min-height:170px; }
  .usmap__label{ font-size:20px; }   /* keep labels legible as the map scales down */
}

/* ===== 04 · ORIGIN STORY (scroll-revealed narrative) ========= */
.origin{ background:var(--paper); position:relative; }
.origin__intro{ text-align:center; max-width:var(--wrap-text); margin:0 auto;
  padding-block:clamp(60px,9vh,110px) clamp(20px,4vh,40px); }
.story{ display:flex; flex-direction:column; gap:clamp(50px,9vh,120px);
  padding-bottom:var(--section-y); }
.beat{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,5vw,68px); align-items:center; }
.beat:nth-child(even) .beat__media{ order:-1; }
.beat__step{ font-family:var(--mono); font-size:var(--t-meta); letter-spacing:.2em; color:var(--blue);
  text-transform:uppercase; margin-bottom:14px; }
.beat__title{ font-family:var(--display); font-weight:900; text-transform:uppercase;
  font-size:clamp(1.8rem,4.5vw,3.4rem); line-height:1.02; letter-spacing:-.01em; margin-bottom:16px; }
.beat__title .hi{ color:var(--blue); }
.beat__body{ color:var(--fg-2); font-size:var(--t-lede); max-width:42ch; }
.beat__quote{ font-family:var(--display); font-weight:500; text-transform:uppercase; font-size:clamp(1rem,2vw,1.3rem);
  letter-spacing:.01em; line-height:1.3; margin-top:18px; padding-left:18px; border-left:2px solid var(--blue); }
.beat__media{ position:relative; }
.beat__media img{ width:100%; border-radius:var(--radius); box-shadow:var(--shadow-card); }
.beat__cap{ font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--fg-3); margin-top:12px; }
/* closing line of the story */
.origin__close{ text-align:center; padding-block:clamp(50px,8vh,100px); border-top:1px solid var(--line); }
.origin__close .big{ font-family:var(--display); font-weight:900; text-transform:uppercase;
  font-size:clamp(1.8rem,6vw,4.4rem); line-height:1; letter-spacing:-.01em; }
.origin__close .big .hi{ color:var(--blue); }

/* ===== 04B · CINEMA (full-bleed video · left black vignette) = */
.cinema{ position:relative; isolation:isolate; overflow:hidden; background:#061A44;
  min-height:clamp(440px,74vh,780px); display:flex; align-items:center; }
.cinema__media{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; }
/* black vignette weighted to the LEFT so the copy stays legible */
.cinema__vignette{ position:absolute; inset:0; z-index:-1; background:
  linear-gradient(90deg, rgba(3,7,18,.94) 0%, rgba(3,7,18,.78) 28%, rgba(3,7,18,.34) 56%, rgba(3,7,18,0) 80%),
  linear-gradient(0deg, rgba(3,7,18,.45) 0%, rgba(3,7,18,0) 40%); }
.cinema__inner{ width:100%; max-width:calc(var(--wrap) + var(--gut)*2);
  margin-inline:auto; padding-inline:var(--gut); padding-block:clamp(48px,8vh,90px); }
.cinema__text{ max-width:min(46ch, calc(100vw - var(--gut)*2)); color:#fff; }
.cinema__eyebrow{ color:var(--blue-glow); }
.cinema__title{ font-family:var(--display); font-weight:900; text-transform:uppercase; color:#fff;
  font-size:clamp(1.9rem,4.4vw,3.4rem); line-height:1.04; letter-spacing:-.01em; margin:14px 0 0;
  text-wrap:balance; }
.cinema__body{ color:rgba(255,255,255,.86); font-size:var(--t-lede); line-height:1.55; margin-top:18px; }
@media (max-width:680px){
  .cinema{ min-height:clamp(420px,80vh,640px); }
  /* heavier full scrim on small screens for guaranteed contrast */
  .cinema__vignette{ background:
    linear-gradient(90deg, rgba(3,7,18,.92) 0%, rgba(3,7,18,.72) 45%, rgba(3,7,18,.5) 100%),
    linear-gradient(0deg, rgba(3,7,18,.5) 0%, rgba(3,7,18,0) 50%); }
}

/* ===== 05 · BOOKS BAND (leads — full-width feature) ========= */
.books{ background:var(--blue); color:#fff; }
.books__inner{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(28px,6vw,80px); align-items:center;
  padding-block:var(--section-y); }
.books__cover{ position:relative; }
.books__cover img{ width:min(360px,80%); border-radius:6px;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.6); transform:rotate(-2deg); }
.books__cover .stamp{ position:absolute; top:-14px; right:8%; background:var(--yellow); border-color:var(--ink);
  color:var(--ink); transform:rotate(4deg); z-index:2; }
.books__title{ font-size:clamp(2rem,5vw,3.8rem); }
.books .eyebrow{ color:var(--yellow); }
.books__badges{ display:flex; flex-wrap:wrap; gap:8px; margin:22px 0 4px; }
.books__badge{ font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  border:1px solid rgba(255,255,255,.4); padding:7px 11px; border-radius:2px; }
.books__body{ color:rgba(255,255,255,.86); max-width:46ch; margin:18px 0 0; }
.books__ctas{ display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }

/* ===== 06 · BENTO (Sculptures · Activities · Store) ========= */
.pillars{ background:var(--paper-2); }
.bento{ display:grid; grid-template-columns:repeat(6,1fr); gap:clamp(14px,1.6vw,22px);
  grid-auto-rows:minmax(220px,auto); }
.tile{ position:relative; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
  background:var(--paper); display:flex; flex-direction:column; justify-content:flex-end;
  padding:26px; min-height:100%; isolation:isolate; transition:transform var(--dur) var(--ease-out),
  box-shadow var(--dur) var(--ease-out); text-decoration:none; }
.tile:hover{ transform:translateY(-4px); box-shadow:var(--shadow-pop); }
.tile__bg{ position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover;
  transition:transform .6s var(--ease-out); }
.tile:hover .tile__bg{ transform:scale(1.05); }
.tile__scrim{ position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(20,20,20,0) 30%, rgba(8,16,40,.86) 100%); }
.tile__eyebrow{ font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--cyan); margin-bottom:10px; }
.tile__title{ font-family:var(--display); font-weight:900; text-transform:uppercase; color:#fff;
  font-size:clamp(1.4rem,2.4vw,2rem); line-height:1; letter-spacing:-.01em; }
.tile__sub{ color:rgba(255,255,255,.82); margin-top:10px; max-width:34ch; font-size:.95rem; }
.tile__arrow{ margin-top:18px; font-family:var(--mono); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:#fff; display:inline-flex; gap:.5em; align-items:center; }
.tile:hover .tile__arrow .arr{ transform:translateX(4px); }
.tile__arrow .arr{ transition:transform var(--dur-fast) var(--ease); }
/* sizing — sculptures is the big one (leads the bento) */
.tile--lg{ grid-column:span 4; grid-row:span 2; }
.tile--sm{ grid-column:span 2; }
/* a "soon" tile badge */
.tile__soon{ position:absolute; top:18px; left:18px; z-index:1; font-family:var(--mono); font-size:9px;
  letter-spacing:.16em; text-transform:uppercase; background:var(--yellow); color:var(--ink);
  padding:5px 9px; border-radius:2px; transform:rotate(-2deg); }
.tile--light{ color:var(--ink); }
.tile--light .tile__scrim{ background:linear-gradient(180deg, rgba(251,248,242,0) 40%, rgba(251,248,242,.92) 100%); }
.tile--light .tile__title{ color:var(--ink); }
.tile--light .tile__sub{ color:var(--fg-2); }
.tile--light .tile__eyebrow{ color:var(--blue); }
.tile--light .tile__arrow{ color:var(--ink); }

/* 3D tile (Aku ID): blue stage with a rotating Aku behind the copy.
   Poster render + injected <model-viewer> both sit behind the scrim;
   pointer-events:none keeps the whole tile a single click-through link. */
.tile--3d{ background:linear-gradient(165deg, #0B2B6B 0%, #061A44 100%); }
.tile--3d .tile__poster{ position:absolute; inset:4% 4% 2%; width:auto; height:92%;
  margin:auto; left:0; right:0; object-fit:contain; z-index:-2;
  filter:drop-shadow(0 24px 40px rgba(0,0,0,.5)); }
.tile--3d model-viewer{ position:absolute !important; inset:0; width:100% !important;
  height:100% !important; z-index:-2; pointer-events:none; }
.tile--3d .tile__scrim{ background:
  radial-gradient(80% 60% at 50% 38%, rgba(63,180,255,.16), transparent 70%),
  linear-gradient(180deg, rgba(6,16,40,0) 45%, rgba(6,16,40,.9) 100%); }

/* ===== 07 · PROOF BAR ======================================= */
.proof{ background:var(--ink); color:#fff; }
.proof__inner{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(16px,3vw,40px);
  padding-block:clamp(40px,6vh,72px); }
.stat__n{ font-family:var(--display); font-weight:900; font-size:clamp(2rem,4vw,3.2rem); line-height:1;
  letter-spacing:-.02em; }
.stat__l{ font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:rgba(255,255,255,.6); margin-top:10px; }
.proof__foot{ text-align:center; font-family:var(--mono); font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; color:rgba(255,255,255,.4); padding-bottom:clamp(28px,5vh,48px); }

/* ===== 08 · AUTHOR ========================================== */
.author__inner{ display:grid; grid-template-columns:1fr 1.2fr; gap:clamp(28px,5vw,70px); align-items:center;
  padding-block:var(--section-y); }
.author__photo{ border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-card); }
.author__photo img{ width:100%; }
.author__body{ color:var(--fg-2); margin:18px 0; max-width:48ch; }

/* ===== 09 · NEWSLETTER / NOTIFY ============================= */
.signup{ background:var(--paper-2); border-top:1px solid var(--line); }
.signup__inner{ text-align:center; max-width:var(--wrap-text); margin-inline:auto; padding-block:var(--section-y); }
.signup__form{ display:flex; gap:10px; max-width:460px; margin:24px auto 0; flex-wrap:wrap; }
.signup__form input{ flex:1 1 220px; padding:15px 16px; border:1px solid var(--line-2); border-radius:2px;
  font-family:var(--body); font-size:1rem; background:var(--paper); color:var(--ink); }
.signup__form input:focus{ outline:2px solid var(--blue); outline-offset:1px; }
.signup__note{ font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--fg-3); margin-top:14px; }

/* ===== 10 · FOOTER ========================================== */
.footer{ background:var(--ink); color:#fff; }
.footer__inner{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:32px; padding-block:clamp(48px,7vh,80px); }
.footer__brand img{ height:20px; margin-bottom:16px; }
.footer__brand p{ color:rgba(255,255,255,.6); max-width:30ch; font-size:.9rem; }
.footer__col h4{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(255,255,255,.5); margin-bottom:14px; }
.footer__col a{ display:block; color:rgba(255,255,255,.82); padding:5px 0; font-size:.95rem; transition:color var(--dur-fast); }
.footer__col a:hover{ color:var(--blue-glow); }
.footer__bottom{ border-top:1px solid rgba(255,255,255,.12); padding-block:22px; display:flex;
  justify-content:space-between; flex-wrap:wrap; gap:12px; font-family:var(--mono); font-size:10px;
  letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.45); }

/* ===== 11 · CURSOR (desktop, fine-pointer only) ============= */
.cursor{ position:fixed; top:0; left:0; width:30px; height:30px; margin:-15px 0 0 -15px; z-index:300;
  pointer-events:none; border:1.5px solid var(--blue); border-radius:50%; opacity:0;
  transition:opacity .3s, transform .12s var(--ease-out), width .2s, height .2s, background .2s; mix-blend-mode:multiply; }
.cursor.is-on{ opacity:.9; }
.cursor.is-hover{ width:54px; height:54px; margin:-27px 0 0 -27px; background:rgba(19,85,185,.08); }
@media (hover:none),(pointer:coarse){ .cursor{ display:none; } }

/* ===== 12 · REVEAL / MOTION ================================= */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.reveal.is-in{ opacity:1; transform:none; }
.reveal[data-d="1"]{ transition-delay:.08s; }
.reveal[data-d="2"]{ transition-delay:.16s; }
.reveal[data-d="3"]{ transition-delay:.24s; }

/* ===== 13 · RESPONSIVE ====================================== */
@media (max-width:980px){
  .books__inner,.author__inner,.proof__inner{ grid-template-columns:1fr; }
  .proof__inner{ grid-template-columns:1fr 1fr; }
  .beat,.beat:nth-child(even) .beat__media{ grid-template-columns:1fr; }
  .beat__media{ order:-1 !important; }
  .bento{ grid-template-columns:repeat(2,1fr); }
  .tile--lg{ grid-column:span 2; grid-row:span 1; min-height:300px; }
  .tile--sm{ grid-column:span 1; }
  .footer__inner{ grid-template-columns:1fr 1fr; }
}
@media (max-width:560px){
  .bookhero{ min-height:clamp(480px,82svh,720px); }
  .bento{ grid-template-columns:1fr; }
  .tile--lg,.tile--sm{ grid-column:span 1; }
  .proof__inner{ grid-template-columns:1fr 1fr; gap:24px 16px; }
  .footer__inner{ grid-template-columns:1fr; }
  .books__cover img{ width:min(280px,70%); }
}

/* ===== REDUCED MOTION (kill all enhancement motion) ========= */
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important;
     transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .reveal{ opacity:1 !important; transform:none !important; }
  .cursor{ display:none !important; }
  .scroll-cue .dot{ animation:none; }
}

/* ===== 11 · SPACE-KID DESIGN LAYER (audit 2026-06) =========== */
/* Starfield — two repeating radial-gradient tiles at co-prime sizes
   so the pattern never reads as a grid. Static, zero JS. */
.starfield{ position:relative; }
.starfield::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    radial-gradient(1px 1px at 25px 35px,  rgba(255,255,255,.85), transparent 55%),
    radial-gradient(1px 1px at 160px 92px, rgba(255,255,255,.45), transparent 55%),
    radial-gradient(1.4px 1.4px at 304px 152px, rgba(168,214,255,.75), transparent 55%),
    radial-gradient(1px 1px at 92px 201px, rgba(255,255,255,.35), transparent 55%),
    radial-gradient(1px 1px at 348px 44px, rgba(255,255,255,.6), transparent 55%),
    radial-gradient(1.6px 1.6px at 218px 230px, rgba(63,180,255,.6), transparent 55%),
    radial-gradient(1px 1px at 56px 132px, rgba(255,255,255,.5), transparent 55%);
  background-size:383px 271px, 383px 271px, 383px 271px, 383px 271px, 547px 389px, 547px 389px, 547px 389px;
  opacity:.55; }
/* a few brighter glow stars, drifting very slowly */
.starfield::after{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    radial-gradient(2px 2px at 18% 26%, rgba(63,180,255,.9), transparent 60%),
    radial-gradient(2.4px 2.4px at 78% 64%, rgba(255,255,255,.8), transparent 60%),
    radial-gradient(2px 2px at 56% 12%, rgba(168,214,255,.8), transparent 60%),
    radial-gradient(1.8px 1.8px at 90% 22%, rgba(255,255,255,.7), transparent 60%);
  opacity:.5; animation:star-drift 60s linear infinite alternate; }
@keyframes star-drift{ from{ transform:translateY(0); } to{ transform:translateY(-14px); } }
@media (prefers-reduced-motion:reduce){ .starfield::after{ animation:none; } }

/* HUD corner ticks — viewfinder brackets on key media frames */
.hud-corners{ position:relative; }
.hud-corners::after{ content:""; position:absolute; inset:10px; pointer-events:none; z-index:3;
  --tick:var(--blue);
  background:
    linear-gradient(var(--tick),var(--tick)) left 0 top 0/14px 2px,
    linear-gradient(var(--tick),var(--tick)) left 0 top 0/2px 14px,
    linear-gradient(var(--tick),var(--tick)) right 0 top 0/14px 2px,
    linear-gradient(var(--tick),var(--tick)) right 0 top 0/2px 14px,
    linear-gradient(var(--tick),var(--tick)) left 0 bottom 0/14px 2px,
    linear-gradient(var(--tick),var(--tick)) left 0 bottom 0/2px 14px,
    linear-gradient(var(--tick),var(--tick)) right 0 bottom 0/14px 2px,
    linear-gradient(var(--tick),var(--tick)) right 0 bottom 0/2px 14px;
  background-repeat:no-repeat; opacity:.85; }
.hud-corners--glow::after{ --tick:var(--blue-glow); }

/* foundation stat suffixes — visor-glow accents */
.foundation__stats b i{ font-style:normal; color:var(--blue); }

/* footer transmission stamp */
.footer__transmission{ font-family:var(--mono); font-size:10px; letter-spacing:.22em;
  text-transform:uppercase; color:rgba(255,255,255,.38); }

/* ===== 12 · FINALE (closing book CTA · dark) ================= */
.finale{ background:#030712; color:#fff; overflow:hidden; text-align:center;
  padding-block:clamp(88px,16vh,180px); }
.finale__inner{ position:relative; z-index:1; width:min(820px,100% - var(--gut)*2); margin-inline:auto;
  display:flex; flex-direction:column; align-items:center; }
.finale__hud{ width:min(420px,100%); color:var(--blue-glow); margin-bottom:clamp(28px,5vh,48px); }
.finale__hud::before,.finale__hud::after{ background:rgba(255,255,255,.18); }
.finale__eyebrow{ color:var(--blue-glow); }
.finale__title{ font-family:var(--display); font-weight:900; text-transform:uppercase; color:#fff;
  font-size:clamp(2.4rem,5.6vw,4.6rem); line-height:.94; letter-spacing:-.02em; margin:16px 0 0; text-wrap:balance;
  text-shadow:0 0 60px rgba(63,180,255,.25); }
.finale__sub{ margin:20px 0 34px; color:rgba(255,255,255,.72); max-width:46ch;
  font-size:clamp(1rem,1.3vw,1.18rem); line-height:1.6; }
.finale__ctas{ display:flex; gap:14px; flex-wrap:wrap; justify-content:center; }