/* ─── gogee gogee — homepage ──────────────────────────────────────────────────
   Night canvas, cream sheets, one saffron accent. Geist for everything you
   read, Fraunces italic only for the emphasised word, Geist Mono for labels.
   Scroll choreography lives in site.js, which only writes custom properties
   (--p, --sp, --cover, --ry …); every effect here reads them with a sensible
   fallback, so the page is complete without JS. Hidden-until-revealed states
   are scoped under `.js`. */

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

:root{
  --night:#070C16; --night-2:#0C1528;
  --cream:#F4EFDD; --paper:#FFFCF4; --sand:#EDE5CD;
  --ink:#0A1A2F; --cobalt:#0B3A6F; --cobalt-deep:#072649; --sky:#5BA0D0;
  --saffron:#F2A93B; --red:#C8323C;
  --muted-l:rgba(10,26,47,.62);
  --muted-d:rgba(244,239,221,.66);

  --sans:'Geist', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono:'Geist Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --serif:'Fraunces', Georgia, serif;

  --gut:clamp(16px, 3vw, 32px);
  --ease:cubic-bezier(.22,1,.36,1);
  --chrome:104px;
  --ann:40px;
}

html{ background:var(--cream); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-size-adjust:100%; -webkit-text-size-adjust:100%; }
body{ font-family:var(--sans); font-size:16px; line-height:1.5; color:var(--ink); background:var(--cream); overflow-x:clip; }
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; }
ul,ol{ list-style:none; }
::selection{ background:var(--saffron); color:var(--ink); }
:focus-visible{ outline:2px solid var(--saffron); outline-offset:3px; border-radius:6px; }
svg.lucide{ width:1em; height:1em; stroke-width:1.8; flex:none; }
/* The real app icon (Billie), painted as the background of a rounded box, the
   same way v1 painted its saffron icon boxes. (An <img> cropped by a rounded
   overflow clip was part of what some GPUs failed to draw.) */
.app-ico{ background:url(assets/img/app-icon-128.png) center / cover no-repeat; }

.wrap{ width:100%; max-width:calc(1320px + 2 * var(--gut)); margin-inline:auto; padding-inline:var(--gut); }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.skip{ position:fixed; left:12px; top:-80px; z-index:300; padding:10px 14px; border-radius:10px; background:var(--ink); color:var(--cream); font-size:14px; }
.skip:focus{ top:12px; }
.alias{ position:absolute; width:1px; height:1px; pointer-events:none; }

/* ─── type ─────────────────────────────────────────────────────────────────── */
.eyebrow{ display:inline-flex; align-items:center; gap:10px; font:500 12px/1.2 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--muted-l); }
.eyebrow svg{ width:14px; height:14px; color:var(--cobalt); }
.eyebrow__ico{ flex:none; width:16px; height:16px; border-radius:4px; }
.eyebrow--dark{ color:rgba(244,239,221,.58); }
.eyebrow--dark svg{ color:var(--saffron); }
.eyebrow--ink{ color:rgba(10,26,47,.72); }

.h2{ font-weight:400; font-size:clamp(34px, 4.3vw, 64px); line-height:1.02; letter-spacing:-.038em; text-wrap:balance; }
.h3{ font-weight:400; font-size:clamp(28px, 2.6vw, 40px); line-height:1.06; letter-spacing:-.032em; text-wrap:balance; }

.h2 em, .h3 em, .hero__title em, .intro__body em, .collect__title em, .cta__title em, .foot__giant em{
  font-family:var(--serif); font-style:italic; font-weight:400; letter-spacing:-.02em; font-variation-settings:'opsz' 144;
}
.hero em, .intro em, .story em, .collect em, .foot em, .duo__card--world em{ color:var(--saffron); }
.sheet em{ color:var(--cobalt); }
.sheet .duo__card--world em{ color:var(--saffron); }

/* ─── buttons ──────────────────────────────────────────────────────────────── */
.btn{
  --h:48px; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  height:var(--h); padding:0 20px; border:0; border-radius:12px; cursor:pointer; white-space:nowrap;
  font:500 15px/1 var(--sans); letter-spacing:-.01em;
  transition:transform .35s var(--ease), background-color .3s, color .3s, box-shadow .35s var(--ease);
}
.btn svg{ width:16px; height:16px; transition:transform .35s var(--ease); }
.btn:hover svg{ transform:translateX(3px); }
.btn:active{ transform:scale(.98); }
.btn--sm{ --h:40px; padding:0 14px 0 16px; font-size:14px; border-radius:10px; }
.btn--dark{ background:var(--ink); color:var(--cream); }
.btn--dark:hover{ background:#000; box-shadow:0 12px 26px -12px rgba(10,26,47,.7); }
.btn--light{ background:var(--cream); color:var(--ink); }
.btn--light:hover{ background:#fff; box-shadow:0 14px 34px -14px rgba(0,0,0,.6); }
.btn--glass{ background:rgba(10,16,28,.4); color:var(--cream); box-shadow:inset 0 0 0 1px rgba(255,255,255,.26); }
.btn--glass:hover{ background:rgba(10,16,28,.58); }
.btn--chip{ --h:34px; padding:0 14px; font-size:13px; border-radius:9px; background:rgba(10,26,47,.06); color:var(--ink); }
.btn--chip:hover{ background:rgba(10,26,47,.11); }

/* ─── header: announcement + nav ───────────────────────────────────────────── */
.header{ position:fixed; top:0; left:0; right:0; z-index:100; transition:transform .6s var(--ease); }
.header.is-scrolled{ transform:translateY(calc(-1 * var(--ann))); }
.header.is-hidden{ transform:translateY(calc(-100% - 60px)); }

.announce{ position:relative; height:40px; display:flex; align-items:center; justify-content:center; padding:0 48px; background:var(--cobalt-deep); color:var(--cream); font-size:13px; }
.announce[hidden]{ display:none; }
.announce__link{ display:inline-flex; align-items:center; gap:10px; min-width:0; white-space:nowrap; }
.announce__link > span:nth-child(2){ overflow:hidden; text-overflow:ellipsis; opacity:.9; }
.announce__dot{ flex:none; width:6px; height:6px; border-radius:50%; background:var(--saffron); box-shadow:0 0 0 4px rgba(242,169,59,.2); }
.announce__go{ display:inline-flex; align-items:center; gap:4px; font-weight:500; color:var(--saffron); }
.announce__go svg{ width:14px; height:14px; transition:transform .3s var(--ease); }
.announce__link:hover .announce__go svg{ transform:translate(2px,-2px); }
.announce__x{ position:absolute; right:8px; top:50%; transform:translateY(-50%); width:28px; height:28px; display:grid; place-items:center; border:0; border-radius:8px; background:none; color:rgba(244,239,221,.6); cursor:pointer; }
.announce__x:hover{ background:rgba(255,255,255,.08); color:var(--cream); }
.announce__x svg{ width:16px; height:16px; }

.nav{ display:flex; justify-content:center; }
.nav__bar{
  width:100%; max-width:100%; height:64px; margin-top:0;
  display:flex; align-items:center; gap:clamp(16px, 2.8vw, 40px);
  padding:0 clamp(16px, 2.4vw, 28px); border-radius:0; color:var(--ink);
  background-color:rgba(250,246,234,0); box-shadow:inset 0 0 0 1px rgba(10,26,47,0), 0 18px 50px -20px rgba(0,0,0,0);
  transition:max-width .8s var(--ease), width .8s var(--ease), height .8s var(--ease), margin .8s var(--ease), border-radius .8s var(--ease), padding .8s var(--ease), background-color .5s, box-shadow .5s;
}
/* Floating pill: the same cream as the top bar, so the text never changes
   colour — only the background and shape ease in. Solid, not frosted: a
   backdrop blur over the moving hero flickers on some GPU/browser setups. */
.header.is-scrolled .nav__bar{
  width:calc(100% - 20px); max-width:960px; height:54px; margin-top:10px; border-radius:16px;
  padding:0 7px 0 14px; background-color:rgba(250,246,234,.97);
  box-shadow:inset 0 0 0 1px rgba(10,26,47,.08), 0 18px 50px -20px rgba(0,0,0,.45);
}
.brand{ display:inline-flex; align-items:center; gap:10px; font-family:var(--serif); font-weight:700; font-size:22px; letter-spacing:-.02em; white-space:nowrap; font-variation-settings:'opsz' 36; }
.brand span{ color:var(--saffron); }
.brand__icon{ flex:none; width:28px; height:28px; border-radius:8px; box-shadow:0 0 0 1px rgba(10,26,47,.08); }
.brand--lg{ gap:14px; font-size:30px; }
.brand--lg .brand__icon{ width:40px; height:40px; border-radius:11px; }
.nav__links{ display:flex; gap:clamp(14px, 2vw, 28px); margin-right:auto; font-size:14px; }
.nav__links a{ opacity:.68; transition:opacity .2s; }
.nav__links a:hover{ opacity:1; }

/* ─── hero ─────────────────────────────────────────────────────────────────── */
.hero{ position:relative; height:190vh; background:var(--cream); }
.hero__sticky{ position:sticky; top:0; height:100vh; height:100svh; overflow:hidden; }
.hero__card{ position:absolute; inset:0; overflow:hidden; background:var(--night); }
/* The inset, rounded "card" look comes from a cream mat laid over the full-
   bleed photo, shrinking away as --p goes 0 → 1. It used to be a clip-path that
   changed every frame, and some GPUs dropped the whole clipped card on random
   frames (the live-site flashing). The mat is plain transforms, no masks. */
.hero__mat{ --k:calc(1 - var(--p, 0)); position:absolute; inset:0; pointer-events:none; }
.mat, .mat-c{ will-change:transform; }
.mat{ position:absolute; background:var(--cream); }
.mat--t{ left:0; right:0; top:0; height:var(--chrome); transform-origin:50% 0; transform:scaleY(var(--k)); }
.mat--b{ left:0; right:0; bottom:0; height:12px; transform-origin:50% 100%; transform:scaleY(var(--k)); }
.mat--l{ top:0; bottom:0; left:0; width:12px; transform-origin:0 50%; transform:scaleX(var(--k)); }
.mat--r{ top:0; bottom:0; right:0; width:12px; transform-origin:100% 50%; transform:scaleX(var(--k)); }
/* Rounded inner corners: a cream square with a quarter-circle cut out, sat in
   each inner corner of the card and scaled with it. */
.mat-c{ position:absolute; width:22px; height:22px; background:radial-gradient(circle farthest-side at var(--at), transparent 96%, var(--cream) 100%); }
.mat-c--tl{ --at:100% 100%; left:0; top:0; transform-origin:0 0; transform:translate(calc(12px * var(--k)), calc(var(--chrome) * var(--k))) scale(var(--k)); }
.mat-c--tr{ --at:0 100%; right:0; top:0; transform-origin:100% 0; transform:translate(calc(-12px * var(--k)), calc(var(--chrome) * var(--k))) scale(var(--k)); }
.mat-c--bl{ --at:100% 0; left:0; bottom:0; transform-origin:0 100%; transform:translate(calc(12px * var(--k)), calc(-12px * var(--k))) scale(var(--k)); }
.mat-c--br{ --at:0 0; right:0; bottom:0; transform-origin:100% 100%; transform:translate(calc(-12px * var(--k)), calc(-12px * var(--k))) scale(var(--k)); }
/* Rendering budget for the hero (from the user's screen recordings): anything
   that changes while you scroll sits on its own GPU layer (will-change) and
   only fades or moves. Nothing re-scales the photos — a zooming full-screen
   photo had to be redrawn every frame and slower GPUs showed dark, half-drawn
   tiles. */
.hero__media{ position:absolute; inset:0; }
/* Inactive slides stay painted at opacity 0 (not visibility:hidden), so the
   browser keeps their decoded photos ready for the next crossfade. */
.slide{ position:absolute; inset:0; opacity:0; transition:opacity 1.6s ease; }
.slide.is-on{ opacity:1; }
.slide img{ width:100%; height:100%; object-fit:cover; }
.hero__shade{
  position:absolute; inset:0;
  background:
    radial-gradient(70% 55% at 50% 52%, rgba(7,12,22,.5), rgba(7,12,22,0) 72%),
    linear-gradient(180deg, rgba(7,12,22,.6) 0%, rgba(7,12,22,.12) 32%, rgba(7,12,22,.2) 62%, rgba(7,12,22,.82) 100%);
}
.hero__night{ position:absolute; inset:0; background:var(--night); opacity:calc(var(--q, 0) * .72); will-change:opacity; }

.hero__frame{ position:absolute; top:var(--chrome); left:12px; right:12px; bottom:12px; color:var(--cream); }
.hud{ position:absolute; inset:0; pointer-events:none; opacity:calc(1 - var(--p, 0) * 2); will-change:opacity; }
.hud__tick{ position:absolute; width:22px; height:22px; border:0 solid rgba(244,239,221,.7); }
.hud__tick--tl{ top:22px; left:22px; border-top-width:1.5px; border-left-width:1.5px; }
.hud__tick--tr{ top:22px; right:22px; border-top-width:1.5px; border-right-width:1.5px; }
.hud__tick--bl{ bottom:22px; left:22px; border-bottom-width:1.5px; border-left-width:1.5px; }
.hud__tick--br{ bottom:22px; right:22px; border-bottom-width:1.5px; border-right-width:1.5px; }
.hud__coord, .hud__count{ position:absolute; top:28px; display:flex; align-items:center; gap:10px; font:500 11.5px/1 var(--mono); letter-spacing:.1em; color:rgba(244,239,221,.85); }
.hud__coord{ left:60px; }
.hud__count{ right:60px; }
/* "Live" dots blink with opacity (GPU-only), not an animated box-shadow. */
.hud__live{ width:7px; height:7px; border-radius:50%; background:var(--saffron); box-shadow:0 0 0 3px rgba(242,169,59,.25); animation:blink 2s ease-in-out infinite; }
@keyframes blink{ 50%{ opacity:.35; } }
.hud__tip{
  position:absolute; right:clamp(28px, 6vw, 100px); top:15%; max-width:290px;
  display:flex; align-items:center; gap:12px; padding:10px 16px 10px 10px; border-radius:14px;
  background:rgba(10,16,28,.62);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14), 0 20px 40px -20px rgba(0,0,0,.5);
  font-size:13.5px; line-height:1.35; color:rgba(244,239,221,.92);
}
.hud__tip b{ display:block; margin-bottom:5px; font:500 10.5px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--saffron); }
.hud__tip-i{ flex:none; width:36px; height:36px; border-radius:9px; }
.hud__place{ position:absolute; left:30px; bottom:30px; display:grid; gap:3px; }
.hud__place b{ font-size:15px; font-weight:500; letter-spacing:-.01em; }
.hud__place > span{ font-size:13px; color:rgba(244,239,221,.68); }
.hud__segs{ display:flex; gap:6px; margin-top:12px; }
.hud__segs i{ position:relative; width:30px; height:2px; overflow:hidden; border-radius:2px; background:rgba(244,239,221,.25); }
.hud__segs i::after{ content:''; position:absolute; inset:0; background:var(--cream); transform:scaleX(0); transform-origin:left; }
.hud__segs i.is-done::after{ transform:scaleX(1); }
.hud__segs i.is-on::after{ animation:segfill 6s linear forwards; }
@keyframes segfill{ to{ transform:scaleX(1); } }
[data-hud]{ transition:opacity .35s ease; }
.hud.is-swap [data-hud]{ opacity:0; }

.hero__copy{
  position:absolute; inset:0; padding:0 24px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  transform:translateY(calc(var(--p, 0) * -90px)); opacity:calc(1 - var(--p, 0) * 1.6); will-change:transform, opacity;
}
/* No backdrop-filter inside the hero: its parents fade with scroll, and a
   fading parent makes browsers drop or flicker the blur. */
.pill-label{
  display:inline-flex; align-items:center; gap:10px; padding:9px 14px; border-radius:999px;
  background:rgba(10,16,28,.48);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);
  font:500 11.5px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:rgba(244,239,221,.9);
}
.pill-label__dot{ width:6px; height:6px; border-radius:50%; background:var(--saffron); }
.hero__title{ margin-top:26px; font-weight:400; font-size:clamp(44px, 7.2vw, 116px); line-height:.95; letter-spacing:-.045em; text-shadow:0 2px 40px rgba(0,0,0,.25); }
.hero__sub{ margin-top:24px; max-width:540px; font-size:clamp(16px, 1.35vw, 19px); line-height:1.5; color:rgba(244,239,221,.84); }
.hero__ctas{ margin-top:34px; display:flex; flex-wrap:wrap; justify-content:center; gap:12px; }
.hero__scroll{ position:absolute; right:30px; bottom:26px; display:flex; align-items:center; gap:12px; font-size:13px; color:rgba(244,239,221,.82); opacity:calc(1 - var(--p, 0) * 3); will-change:opacity; }
.hero__scroll span{ width:34px; height:34px; border-radius:9px; display:grid; place-items:center; box-shadow:inset 0 0 0 1px rgba(244,239,221,.35); transition:background .3s; }
.hero__scroll:hover span{ background:rgba(244,239,221,.12); }
.hero__scroll svg{ width:15px; height:15px; animation:nudge 2.2s var(--ease) infinite; }
@keyframes nudge{ 0%,100%{ transform:translateY(-2px); } 50%{ transform:translateY(3px); } }

.js .hero__copy > *{ animation:rise 1.2s var(--ease) both; }
.js .hero__copy > :nth-child(2){ animation-delay:.1s; }
.js .hero__copy > :nth-child(3){ animation-delay:.22s; }
.js .hero__copy > :nth-child(4){ animation-delay:.34s; }
.js .hud > *{ animation:fadein 1.4s ease .5s both; }
@keyframes rise{ from{ opacity:0; transform:translateY(32px); } }
@keyframes fadein{ from{ opacity:0; } }

/* ─── intro ────────────────────────────────────────────────────────────────── */
/* Rises over the last stretch of the pinned hero, so the pitch arrives over the
   dimming photo instead of after a blank screen. */
.intro{
  position:relative; z-index:2; margin-top:-60vh; padding:34vh var(--gut) clamp(30px, 5vh, 60px);
  background:linear-gradient(180deg, rgba(7,12,22,0) 0, rgba(7,12,22,.55) 18vh, var(--night) 46vh);
  color:var(--cream); text-align:center;
}
.intro__title{ margin-top:22px; font-weight:400; font-size:clamp(30px, 3.6vw, 52px); line-height:1.05; letter-spacing:-.035em; }
.intro .dim{ color:rgba(244,239,221,.4); }
.intro__body{ max-width:960px; margin:36px auto 0; font-size:clamp(21px, 2.3vw, 34px); line-height:1.28; letter-spacing:-.025em; }
.js [data-scrub] .w{ color:rgba(244,239,221,.2); transition:color .4s ease; }
.js [data-scrub] .w.is-lit{ color:inherit; }

.stats{ max-width:1100px; margin:clamp(70px, 11vh, 130px) auto 0; display:grid; grid-template-columns:repeat(4, 1fr); text-align:left; border-top:1px solid rgba(244,239,221,.12); }
.stats > div{ padding:28px 22px 0; border-left:1px solid rgba(244,239,221,.12); }
.stats > div:first-child{ border-left:0; padding-left:0; }
.stats dt{ font-size:clamp(34px, 3.4vw, 54px); font-weight:400; line-height:1; letter-spacing:-.045em; font-variant-numeric:tabular-nums; }
.stats dd{ margin-top:12px; font:500 11.5px/1.4 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:rgba(244,239,221,.5); }

/* ─── story (pinned 3D stack) ──────────────────────────────────────────────── */
@property --glow{ syntax:'<color>'; inherits:true; initial-value:rgba(91,160,208,.4); }
.story{
  --chap:90vh; --glow:rgba(91,160,208,.4);
  position:relative; height:calc(100vh + var(--n) * var(--chap));
  background:var(--night); color:var(--cream); overflow:clip; transition:--glow 1.2s ease;
}
@supports (height:100svh){ .story{ --chap:90svh; height:calc(100svh + var(--n) * var(--chap)); } }
.story[data-chap="1"]{ --glow:rgba(242,169,59,.34); }
.story[data-chap="2"]{ --glow:rgba(218,55,67,.3); }
.story[data-chap="3"]{ --glow:rgba(91,160,208,.42); }
.story__mark{ position:absolute; left:0; top:calc(var(--i) * var(--chap) + 12vh); width:1px; height:1px; pointer-events:none; }

.story__sticky{
  position:sticky; top:0; height:100vh; height:100svh; max-width:1440px; margin:0 auto;
  padding:84px clamp(20px, 4vw, 60px) 36px;
  display:grid; grid-template-columns:minmax(0, .92fr) minmax(0, 1.08fr); align-items:center; gap:clamp(24px, 4vw, 72px);
}
.story__copy{ position:relative; display:flex; flex-direction:column; height:min(620px, calc(100svh - 150px)); }
.chaps{ position:relative; flex:1; }
.chap .h2{ margin-top:22px; font-size:clamp(34px, 3.7vw, 58px); }
.chap__p{ margin-top:22px; max-width:520px; font-size:17px; line-height:1.6; color:var(--muted-d); }
.chap__p strong{ font-weight:500; color:var(--cream); }
.chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:26px; }
.chips li{ padding:8px 12px; border-radius:9px; font-size:13px; color:rgba(244,239,221,.85); background:rgba(244,239,221,.05); box-shadow:inset 0 0 0 1px rgba(244,239,221,.12); }
.chap__fine{ margin-top:18px; max-width:500px; font-size:12px; line-height:1.5; color:rgba(244,239,221,.42); }
.js .chap{
  position:absolute; left:0; right:0; top:50%;
  opacity:0; transform:translateY(calc(-50% + 30px)); pointer-events:none;
  transition:opacity .5s ease, transform .9s var(--ease);
}
.js .chap.is-past{ transform:translateY(calc(-50% - 30px)); }
.js .chap.is-on{ opacity:1; transform:translateY(-50%); pointer-events:auto; transition-delay:.12s; }

.rail{ display:grid; grid-template-columns:repeat(4, 1fr); gap:12px; padding-top:20px; }
.rail a{ display:flex; gap:8px; padding-bottom:12px; font-size:13px; color:rgba(244,239,221,.42); transition:color .3s; }
.rail a span{ font:500 11px/1.6 var(--mono); }
.rail li.is-on a, .rail li.is-done a, .rail a:hover{ color:var(--cream); }
.rail i{ position:relative; display:block; height:2px; overflow:hidden; border-radius:2px; background:rgba(244,239,221,.14); }
.rail i::after{ content:''; position:absolute; inset:0; background:var(--saffron); transform:scaleX(var(--f, 0)); transform-origin:left; }

.story__stage{ position:relative; height:min(68vh, 620px); display:grid; place-items:center; perspective:1900px; perspective-origin:40% 40%; }
.story__glow{ position:absolute; inset:8% 4%; border-radius:50%; background:radial-gradient(closest-side, var(--glow), transparent); filter:blur(36px); pointer-events:none; }
.stack{
  position:absolute; left:50%; top:50%; width:580px; height:430px; margin:-215px 0 0 -290px; transform-style:preserve-3d;
  transform:scale(var(--s, 1)) rotateX(var(--rx, 9deg)) rotateY(var(--ry, -14deg));
}
.pane{ position:absolute; inset:0; border-radius:20px; }
.pane--3{
  transform:translate3d(9%, -11%, -240px);
  background:radial-gradient(rgba(244,239,221,.17) 1px, transparent 1.4px) 0 0 / 20px 20px;
  box-shadow:inset 0 0 0 1px rgba(244,239,221,.16);
}
.pane--3 svg{ position:absolute; inset:0; width:100%; height:100%; }
.pane--2{
  transform:translate3d(4.5%, -5.5%, -120px);
  background:linear-gradient(150deg, rgba(91,160,208,.16), rgba(11,58,111,.05) 60%);
  box-shadow:inset 0 0 0 1px rgba(244,239,221,.26);
}
.pane__lbl{ position:absolute; font:500 10px/1 var(--mono); letter-spacing:.14em; color:rgba(244,239,221,.5); }
.pane__lbl--tl{ top:9px; left:18px; }
.pane__lbl--tr{ top:9px; right:18px; }
.pane__lbl--bl{ display:none; }
.pane__lbl--br{ right:9px; top:50%; writing-mode:vertical-rl; }
.pane__cross{ position:absolute; right:7%; top:18%; width:22px; height:22px; }
.pane__cross::before, .pane__cross::after{ content:''; position:absolute; background:rgba(244,239,221,.45); }
.pane__cross::before{ left:50%; top:0; bottom:0; width:1px; }
.pane__cross::after{ top:50%; left:0; right:0; height:1px; }
.pane--1{
  overflow:hidden; color:var(--cream);
  background:linear-gradient(165deg, #15284A 0%, #0E1B33 45%, #0A1427 100%);
  box-shadow:inset 0 0 0 1px rgba(244,239,221,.16), inset 0 1px 0 rgba(255,255,255,.1), 0 50px 120px -40px rgba(0,0,0,.95), 0 30px 60px -30px rgba(0,0,0,.6);
}
.pane--1::after{ content:''; position:absolute; inset:0; z-index:600; pointer-events:none; background:linear-gradient(105deg, transparent 38%, rgba(255,255,255,.09) 50%, transparent 62%); transform:translateX(-120%); }
.pane--1.is-flash::after{ animation:sheen 1.1s var(--ease); }
@keyframes sheen{ to{ transform:translateX(120%); } }
.pane__bar{ position:absolute; top:0; left:0; right:0; height:44px; display:flex; align-items:center; gap:14px; padding:0 16px; border-bottom:1px solid rgba(244,239,221,.08); font:500 10.5px/1 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:rgba(244,239,221,.58); }
.pane__dots{ display:flex; gap:6px; }
.pane__dots i{ width:8px; height:8px; border-radius:50%; background:rgba(244,239,221,.18); }
.pane__title{ flex:1; }
.pane__live{ display:flex; align-items:center; gap:7px; color:var(--saffron); }
.pane__live::before{ content:''; width:6px; height:6px; border-radius:50%; background:currentColor; box-shadow:0 0 0 3px rgba(242,169,59,.22); animation:blink 2s ease-in-out infinite; }

.scene{ position:absolute; top:44px; left:0; right:0; bottom:0; padding:20px 22px; opacity:0; transform:translateY(18px) scale(.985); pointer-events:none; transition:opacity .45s ease, transform .8s var(--ease); }
.scene.is-on{ opacity:1; transform:none; transition-delay:.1s; }
.k{ display:block; font:500 10.5px/1.2 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:rgba(244,239,221,.5); }
.sc-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.sc-head strong{ display:block; margin-top:7px; font-size:19px; font-weight:500; letter-spacing:-.02em; }
.avatars{ display:flex; padding-left:8px; }
.avatars i{ width:28px; height:28px; margin-left:-8px; border-radius:50%; display:grid; place-items:center; font:600 10px/1 var(--sans); font-style:normal; color:var(--ink); background:var(--sky); box-shadow:0 0 0 2px #10203A; }
.avatars i:nth-child(2){ background:var(--saffron); }
.avatars i:nth-child(3){ background:var(--cream); }
.prefs{ display:flex; flex-wrap:wrap; gap:6px; margin-top:16px; }
.prefs span{ display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:8px; font-size:12px; color:rgba(244,239,221,.55); box-shadow:inset 0 0 0 1px rgba(244,239,221,.13); }
.prefs span.on{ color:var(--ink); background:var(--cream); box-shadow:none; }
.prefs svg{ width:13px; height:13px; }
.days{ display:flex; gap:18px; margin-top:16px; padding-bottom:10px; border-bottom:1px solid rgba(244,239,221,.08); font-size:12px; color:rgba(244,239,221,.42); }
.days .on{ position:relative; color:var(--cream); }
.days .on::after{ content:''; position:absolute; left:0; right:0; bottom:-11px; height:2px; border-radius:2px; background:var(--saffron); }
.tl{ display:grid; gap:8px; margin-top:14px; }
.tl li, .rank li{ display:grid; align-items:center; gap:12px; padding:11px 12px; border-radius:12px; background:rgba(244,239,221,.04); box-shadow:inset 0 0 0 1px rgba(244,239,221,.07); }
.tl li{ grid-template-columns:44px 1fr auto; }
.tl time{ font:500 11px/1 var(--mono); color:rgba(244,239,221,.5); }
.tl strong, .rank strong{ display:block; font-size:14px; font-weight:500; letter-spacing:-.01em; }
.tl em, .rank em{ display:block; margin-top:3px; font-size:12px; font-style:normal; color:rgba(244,239,221,.5); }
.tl li.hl, .rank li.hl{ background:rgba(242,169,59,.1); box-shadow:inset 0 0 0 1px rgba(242,169,59,.35); }
.tag{ padding:5px 7px; border-radius:6px; font:500 10px/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--ink); background:var(--saffron); }
.tag--soft{ color:rgba(244,239,221,.8); background:rgba(244,239,221,.1); }
.grip{ width:10px; height:14px; background:radial-gradient(rgba(244,239,221,.4) 1.2px, transparent 1.5px) 0 0 / 5px 5px; }

.bpass{ position:relative; margin-top:12px; padding:14px 18px; border-radius:14px; background:var(--cream); color:var(--ink); transition:opacity .38s ease; }
.bpass::before, .bpass::after{ content:''; position:absolute; top:50%; width:14px; height:14px; margin-top:-7px; border-radius:50%; background:#0E1B33; }
.bpass::before{ left:-7px; }
.bpass::after{ right:-7px; }
.bpass__seg{ display:flex; align-items:center; gap:14px; }
.bpass__seg b{ font-size:26px; font-weight:500; letter-spacing:-.02em; }
.bpass__line{ position:relative; flex:1; height:1px; display:grid; place-items:center; background:repeating-linear-gradient(90deg, rgba(10,26,47,.4) 0 4px, transparent 4px 8px); }
.bpass__line svg{ width:16px; height:16px; padding:0 5px; box-sizing:content-box; background:var(--cream); color:var(--cobalt); transform:rotate(45deg); }
.bpass__meta{ display:flex; justify-content:space-between; margin-top:8px; font:500 11px/1 var(--mono); letter-spacing:.08em; color:rgba(10,26,47,.6); }
.bpass__meta .price{ font-size:13px; color:var(--ink); }
.toast{ display:flex; align-items:center; gap:10px; margin-top:12px; padding:10px 14px; border-radius:12px; font-size:13px; background:rgba(91,160,208,.12); box-shadow:inset 0 0 0 1px rgba(91,160,208,.32); }
.toast svg{ width:20px; height:20px; padding:4px; border-radius:50%; color:var(--night); background:var(--sky); }
.toast b{ margin-left:auto; font:500 10px/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--sky); white-space:nowrap; }
.toast--muted{ background:rgba(244,239,221,.04); box-shadow:inset 0 0 0 1px rgba(244,239,221,.1); color:rgba(244,239,221,.7); }
.toast--muted svg{ color:var(--cream); background:rgba(244,239,221,.14); }
.toast--muted b{ color:rgba(244,239,221,.5); }
.scene.is-on .toast{ animation:rise .8s var(--ease) .45s both; }

.rank{ display:grid; gap:8px; margin-top:18px; }
.rank li{ grid-template-columns:30px 1fr auto; padding:12px; }
.rank__n{ width:30px; height:30px; border-radius:9px; display:grid; place-items:center; font:500 13px/1 var(--mono); background:rgba(244,239,221,.08); }

.scene--map{ padding:0; }
.map{ position:absolute; inset:0; width:100%; height:100%; }
.map__scrim{ position:absolute; inset:0; z-index:400; pointer-events:none; background:linear-gradient(180deg, rgba(10,20,38,.65), transparent 42%, transparent 72%, rgba(10,20,38,.45)); }
.push{ position:absolute; z-index:500; top:16px; left:16px; right:16px; display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:14px; color:var(--ink); background:rgba(250,246,234,.95); box-shadow:0 20px 40px -16px rgba(0,0,0,.6); }
.push__i{ flex:none; width:38px; height:38px; border-radius:9px; }
.push .k{ color:rgba(10,26,47,.55); }
.push strong{ display:block; margin-top:4px; font-size:14px; font-weight:500; }
.push em{ font-size:12px; font-style:normal; color:rgba(10,26,47,.6); }
.scene--map.is-on .push{ animation:drop .8s var(--ease) .35s both; }
@keyframes drop{ from{ opacity:0; transform:translateY(-22px); } }

/* ─── collect (pinned under the cream sheet) ───────────────────────────────── */
.layers{ position:relative; }
.collect{ position:sticky; top:0; z-index:1; overflow:hidden; padding:clamp(80px, 13vh, 150px) 0 clamp(70px, 11vh, 120px); background:var(--night); color:var(--cream); }
.collect__inner{ transform-origin:50% 30%; transform:scale(calc(1 - var(--cover, 0) * .07)); opacity:calc(1 - var(--cover, 0) * .7); will-change:transform, opacity; }
.collect__grid{ max-width:calc(1320px + 2 * var(--gut)); margin:0 auto; padding:0 var(--gut); display:grid; grid-template-columns:minmax(0, .38fr) minmax(0, 1fr); align-items:center; }
.collect__card{
  position:relative; z-index:2; margin-right:-90px; aspect-ratio:4/5; overflow:hidden; border-radius:22px;
  display:grid; place-items:center;
  background:radial-gradient(80% 60% at 50% 42%, #3B2D10 0%, #17120A 62%, #0E0B07 100%);
  box-shadow:inset 0 0 0 1px rgba(242,169,59,.28), 0 40px 80px -30px rgba(0,0,0,.85);
}
.collect__card::before{ content:''; position:absolute; inset:-40%; background:conic-gradient(from 0deg, transparent 0 20%, rgba(242,169,59,.14) 25%, transparent 30% 70%, rgba(242,169,59,.1) 75%, transparent 80%); animation:spin 22s linear infinite; }
.collect__card img{ position:relative; width:76%; filter:drop-shadow(0 30px 40px rgba(0,0,0,.6)); animation:bob 6s ease-in-out infinite; }
.collect__card figcaption{ position:absolute; left:18px; right:18px; bottom:16px; display:flex; justify-content:space-between; font:500 10.5px/1 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:rgba(242,169,59,.88); }
@keyframes spin{ to{ transform:rotate(360deg); } }
@keyframes bob{ 0%,100%{ transform:translateY(-6px) rotate(-1.5deg); } 50%{ transform:translateY(8px) rotate(1.5deg); } }
.collect__panel{
  min-height:560px; display:flex; flex-direction:column; border-radius:26px;
  padding:clamp(36px, 5vw, 72px) clamp(28px, 5vw, 72px) clamp(32px, 4vw, 56px) clamp(28px, calc(90px + 4vw), 170px);
  background:radial-gradient(120% 90% at 100% 0%, rgba(91,160,208,.26), transparent 52%), linear-gradient(150deg, #0F4C8C 0%, #0B3A6F 45%, #072649 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
}
.collect__title{ margin-top:26px; max-width:20ch; font-weight:400; font-size:clamp(30px, 3.5vw, 54px); line-height:1.06; letter-spacing:-.035em; }
.js .collect__title .w{ color:rgba(244,239,221,.3); }
.collect__p{ margin-top:22px; max-width:520px; font-size:17px; line-height:1.6; color:rgba(244,239,221,.72); }
.collect__p strong{ font-weight:500; color:var(--saffron); }
.collect__stats{ display:grid; grid-template-columns:repeat(4, 1fr); gap:20px; margin-top:auto; padding-top:44px; }
.collect__stats div{ padding-top:16px; border-top:1px solid rgba(244,239,221,.2); }
.collect__stats dt{ font-size:clamp(24px, 2.2vw, 34px); letter-spacing:-.035em; line-height:1; }
.collect__stats dd{ margin-top:8px; font-size:13px; color:rgba(244,239,221,.6); }

.reel{ margin-top:clamp(60px, 10vh, 110px); overflow:hidden; -webkit-mask-image:linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image:linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.reel__track{ display:flex; width:max-content; padding:24px 0; animation:marquee 70s linear infinite; }
.reel:hover .reel__track{ animation-play-state:paused; }
.reel figure{ flex:none; width:clamp(130px, 14vw, 200px); aspect-ratio:1; margin-right:clamp(18px, 2.4vw, 36px); transform:perspective(700px) rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg)) translateY(var(--ly, 0px)) scale(var(--ls, 1)); transition:transform .5s var(--ease); }
.reel figure img{ width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 18px 24px rgba(0,0,0,.5)); }
.reel figure.is-gold img{ filter:drop-shadow(0 0 22px rgba(242,169,59,.35)) drop-shadow(0 18px 24px rgba(0,0,0,.5)); }
@keyframes marquee{ to{ transform:translateX(-50%); } }
.reel__foot{ margin-top:16px; text-align:center; font:500 11.5px/1 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:rgba(244,239,221,.42); }

/* ─── the cream sheet ──────────────────────────────────────────────────────── */
.sheet{ position:relative; z-index:2; background:var(--cream); color:var(--ink); border-radius:32px 32px 0 0; box-shadow:0 -40px 90px -30px rgba(0,0,0,.6); }
.sheet .k{ color:rgba(10,26,47,.5); }

/* social scatter */
.scatter{ position:relative; height:220vh; }
.scatter__sticky{ position:sticky; top:0; height:100vh; height:100svh; overflow:hidden; display:grid; place-items:center; }
.scatter__posts{ position:absolute; inset:0; }
.scatter__copy{ position:relative; z-index:2; max-width:min(560px, 38vw); padding:0 8px; display:flex; flex-direction:column; align-items:center; text-align:center; }
.scatter__copy .h2{ margin-top:20px; }
.scatter__copy p{ margin-top:20px; font-size:17px; line-height:1.6; color:var(--muted-l); }
.scatter__copy .btn{ margin-top:30px; }
.post{
  --e:var(--sp, 1); --far:calc(1 + (1 - var(--e)) * .9);
  position:absolute; left:50%; top:50%; width:var(--w); margin:0; padding:8px; border-radius:16px; background:var(--paper);
  box-shadow:0 0 0 1px rgba(10,26,47,.05), 0 26px 50px -26px rgba(11,58,111,.5);
  transform:translate(-50%, -50%) translate(calc(var(--x) * var(--far)), calc(var(--y) * var(--far))) rotate(calc(var(--r) * (3 - 2 * var(--e)))) scale(calc(.86 + .14 * var(--e)));
  opacity:clamp(0, calc(var(--e) * 1.8 - .1), 1); will-change:transform, opacity;
}
.post__img{ aspect-ratio:4/5; overflow:hidden; border-radius:10px; background:var(--sand); }
.post__img img{ width:100%; height:100%; object-fit:cover; }
.post figcaption{ display:grid; gap:2px; padding:10px 6px 4px; }
.post b{ font-size:13.5px; font-weight:500; letter-spacing:-.01em; }
.post figcaption > span{ font-size:12px; color:var(--muted-l); }
.post--guide{ z-index:1; }
.post--guide .post__img{ aspect-ratio:4/3; }
.post--guide .k{ color:var(--cobalt); margin-bottom:4px; }
.guide__row{ display:flex; justify-content:space-between; gap:8px; margin-top:6px; font-size:11px; white-space:nowrap; color:var(--muted-l); }
.rec{ font-weight:500; color:#1F7A4C; }

/* everything else (carousel) */
.more{ padding:clamp(60px, 10vh, 120px) 0 clamp(50px, 8vh, 100px); }
.more__head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; }
.more__nav{ display:flex; gap:8px; }
.round-btn{ width:44px; height:44px; display:grid; place-items:center; border:0; border-radius:12px; cursor:pointer; color:var(--ink); background:rgba(10,26,47,.06); transition:background .25s, opacity .25s; }
.round-btn:hover{ background:rgba(10,26,47,.12); }
.round-btn:disabled{ opacity:.35; cursor:default; }
.round-btn svg{ width:18px; height:18px; }
.more__track{
  --edge:max(var(--gut), calc((100vw - 1320px) / 2));
  display:flex; gap:16px; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scroll-padding-inline:var(--edge);
  padding:40px var(--edge) 24px; scrollbar-width:none;
}
.more__track::-webkit-scrollbar{ display:none; }
.card{
  flex:0 0 clamp(280px, 25vw, 330px); scroll-snap-align:start;
  display:flex; flex-direction:column; padding:10px 10px 20px; border-radius:22px; background:var(--paper);
  box-shadow:0 0 0 1px rgba(10,26,47,.06), 0 1px 2px rgba(10,26,47,.04);
  transition:transform .45s var(--ease), box-shadow .45s var(--ease);
}
.card:hover{ transform:translateY(-6px); box-shadow:0 0 0 1px rgba(10,26,47,.06), 0 30px 60px -30px rgba(11,58,111,.42); }
.why__i{ width:40px; height:40px; display:grid; place-items:center; border-radius:11px; color:var(--cobalt); }
.why__i svg{ width:19px; height:19px; }
.card p{ margin:20px 0 18px; padding:0 12px; font-size:clamp(17px, 1.3vw, 19px); line-height:1.32; letter-spacing:-.015em; }
.card p span{ background:linear-gradient(90deg, var(--cobalt), #3E82BD); -webkit-background-clip:text; background-clip:text; color:transparent; }
.card__k{ margin:auto 12px 0; padding-top:16px; border-top:1px solid rgba(10,26,47,.08); font:500 11px/1 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--muted-l); }

/* Card scenes: small static illustrations of each feature (no animation, so
   they cost nothing while scrolling). Swap for real screenshots later. */
.card__art{ position:relative; flex:none; height:190px; overflow:hidden; border-radius:15px; color:var(--ink); }
.card__art > svg{ position:absolute; inset:0; width:100%; height:100%; }
.art-chip{ position:absolute; padding:8px 11px; border-radius:10px; background:#fff; font-size:12px; color:var(--muted-l); box-shadow:0 8px 20px -10px rgba(10,26,47,.4); }

.art-talk{ display:flex; flex-direction:column; gap:8px; padding:18px; background:#EFE7D2; }
.bub{ max-width:84%; padding:9px 12px 10px; border-radius:14px; font-size:13.5px; line-height:1.3; }
.bub--me{ align-self:flex-start; background:#fff; border-bottom-left-radius:4px; box-shadow:0 1px 2px rgba(10,26,47,.08); }
.bub--them{ align-self:flex-end; color:var(--cream); background:var(--cobalt); border-bottom-right-radius:4px; }
.bub__k{ display:block; margin-bottom:4px; font:500 9.5px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase; opacity:.6; }
.wave{ display:flex; align-items:center; gap:3px; height:24px; margin-top:auto; padding-left:2px; }
.wave i{ width:3px; height:var(--h); border-radius:2px; background:var(--cobalt); opacity:.45; }

.art-lens{ background:radial-gradient(120% 90% at 30% 20%, #1B3256, #0B1424); }
.lens__menu{ position:absolute; left:7%; top:14%; width:56%; display:grid; gap:7px; padding:12px 14px 14px; border-radius:6px; font-family:var(--serif); font-size:12.5px; color:#3A2E1E; background:#F7F0DE; transform:rotate(-4deg); box-shadow:0 14px 30px -10px rgba(0,0,0,.6); }
.lens__menu b{ font-size:14px; font-style:italic; font-weight:600; text-align:center; letter-spacing:.02em; }
.lens__tag{ position:absolute; padding:5px 9px; border-radius:8px; font-size:11.5px; font-weight:500; white-space:nowrap; color:var(--ink); background:var(--saffron); box-shadow:0 6px 14px -6px rgba(0,0,0,.5); }
.lens__tag--1{ left:52%; top:37%; }
.lens__tag--2{ left:46%; top:55%; }
.lens__c{ position:absolute; width:18px; height:18px; border:0 solid rgba(244,239,221,.85); }
.lens__c--tl{ left:10px; top:10px; border-top-width:2px; border-left-width:2px; border-top-left-radius:6px; }
.lens__c--tr{ right:10px; top:10px; border-top-width:2px; border-right-width:2px; border-top-right-radius:6px; }
.lens__c--bl{ left:10px; bottom:10px; border-bottom-width:2px; border-left-width:2px; border-bottom-left-radius:6px; }
.lens__c--br{ right:10px; bottom:10px; border-bottom-width:2px; border-right-width:2px; border-bottom-right-radius:6px; }

.art-kit{ display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:12px; background:#EFE7D2; }
.kit{ display:flex; flex-direction:column; gap:3px; padding:9px 11px; overflow:hidden; border-radius:11px; font-size:11.5px; background:#fff; box-shadow:0 1px 2px rgba(10,26,47,.07); }
.kit b{ margin-bottom:3px; font:500 9.5px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--muted-l); }
.kit em{ font-size:11px; font-style:normal; color:var(--muted-l); }
.kit__big{ font-size:16px; font-weight:500; letter-spacing:-.01em; }
.ck{ position:relative; padding-left:14px; line-height:1.35; color:var(--muted-l); }
.ck::before{ content:''; position:absolute; left:0; top:4px; width:8px; height:8px; border-radius:3px; box-shadow:inset 0 0 0 1.5px rgba(10,26,47,.3); }
.ck.on{ color:var(--ink); }
.ck.on::before{ background:var(--cobalt); box-shadow:none; }
.kit__avs{ display:flex; margin:2px 0; }
.kit__avs i{ width:20px; height:20px; margin-right:-6px; border-radius:50%; background:var(--sky); box-shadow:0 0 0 2px #fff; }
.kit__avs i:nth-child(2){ background:var(--saffron); }
.kit__avs i:nth-child(3){ background:#C9B48A; }

.art-share{ display:flex; flex-direction:column; justify-content:center; gap:12px; padding:18px; background:#DCE9F3; }
.share__avs{ display:flex; }
.share__avs i{ width:36px; height:36px; margin-right:-9px; display:grid; place-items:center; border-radius:50%; font:600 11px/1 var(--sans); font-style:normal; background:var(--sky); box-shadow:0 0 0 3px #DCE9F3; }
.share__avs i:nth-child(2){ background:var(--saffron); }
.share__avs i:nth-child(3){ background:var(--cream); }
.share__avs i:nth-child(4){ color:var(--cream); background:var(--cobalt); }
.share__trip b{ display:block; font-size:16px; font-weight:500; letter-spacing:-.01em; }
.share__trip span{ font-size:12px; color:var(--muted-l); }
.share__link{ display:flex; align-items:center; gap:8px; padding:7px 7px 7px 12px; border-radius:11px; font:500 11.5px/1 var(--mono); color:var(--cobalt); background:#fff; box-shadow:0 1px 2px rgba(10,26,47,.08); }
.share__link span{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.share__link b{ padding:6px 9px; border-radius:7px; font:500 11px/1 var(--sans); color:var(--cream); background:var(--ink); }

.art-near{ background:#E8EFE2; }
.pin{ position:absolute; width:14px; height:14px; border-radius:50% 50% 50% 0; background:var(--saffron); transform:rotate(-45deg); box-shadow:0 4px 8px -3px rgba(10,26,47,.4); }
.pin--1{ left:22%; top:20%; }
.pin--2{ left:64%; top:16%; background:var(--cobalt); }
.pin--3{ left:76%; top:44%; }
.me{ position:absolute; left:46%; top:40%; width:16px; height:16px; border-radius:50%; background:var(--sky); box-shadow:0 0 0 3px #fff, 0 0 0 10px rgba(91,160,208,.25); }
.near__chip, .guide__chip{ left:12px; right:12px; bottom:12px; }
.near__chip b, .guide__chip b{ display:block; margin-bottom:2px; font-size:13px; font-weight:500; color:var(--ink); }

.art-guide{ background-size:cover; background-position:center 40%; }
.art-guide::before{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(7,12,22,0) 40%, rgba(7,12,22,.55)); }
.guide__chip em{ font-style:normal; font-weight:500; color:#1F7A4C; }

.art-trail{ background:#F3EAD2; }
.trail__chip, .home__chip{ left:12px; }
.trail__chip{ top:12px; }
.home__chip{ top:12px; }
.trail__chip b, .home__chip b{ margin-right:6px; font-weight:500; color:var(--ink); }

.art-trade{ display:flex; align-items:center; justify-content:center; gap:10px; background:radial-gradient(90% 90% at 50% 40%, #13305A, #0A1426); }
.art-trade img{ width:38%; filter:drop-shadow(0 12px 16px rgba(0,0,0,.5)); }
.art-trade img:first-child{ transform:rotate(-6deg); }
.art-trade img:last-child{ transform:rotate(6deg); }
.trade__swap{ flex:none; width:34px; height:34px; display:grid; place-items:center; border-radius:50%; font-size:16px; color:var(--ink); background:var(--saffron); }

.art-dice{ display:flex; align-items:center; justify-content:center; gap:16px; background:#F8D9A0; }
.die{ position:relative; flex:none; width:64px; height:64px; border-radius:16px; background:#fff; transform:rotate(-10deg); box-shadow:0 12px 24px -10px rgba(10,26,47,.45), inset 0 -3px 0 rgba(10,26,47,.08); }
.die i{ position:absolute; width:11px; height:11px; border-radius:50%; background:var(--ink); }
.die i:nth-child(1){ left:12px; top:12px; }
.die i:nth-child(2){ right:12px; top:12px; }
.die i:nth-child(3){ left:26.5px; top:26.5px; }
.die i:nth-child(4){ left:12px; bottom:12px; }
.die i:nth-child(5){ right:12px; bottom:12px; }
.dice__pick{ padding:10px 13px; border-radius:12px; background:#fff; transform:rotate(2deg); box-shadow:0 8px 20px -10px rgba(10,26,47,.35); }
.dice__pick b{ display:block; font-size:14px; font-weight:500; }
.dice__pick span{ font-size:11.5px; color:var(--muted-l); }

.art-home{ background:#DCE9F3; }
.home__pin{ position:absolute; left:78%; top:6%; width:36px; height:36px; display:grid; place-items:center; border-radius:11px; color:var(--cream); background:var(--cobalt); box-shadow:0 8px 16px -6px rgba(11,58,111,.6); }
.home__pin svg{ width:18px; height:18px; }

.art-sos{ display:flex; flex-direction:column; justify-content:center; gap:10px; padding:16px; background:radial-gradient(100% 90% at 20% 10%, #3A1218, #160A0D); }
.sos__call{ display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:14px; color:#fff; background:#D9363E; box-shadow:0 12px 24px -12px rgba(217,54,62,.7); }
.sos__call b{ font-size:30px; font-weight:500; line-height:1; letter-spacing:-.03em; }
.sos__call span{ font-size:12px; opacity:.9; }
.sos__row{ display:grid; grid-template-columns:repeat(3, 1fr); gap:6px; }
.sos__row span{ padding:9px 6px; border-radius:10px; text-align:center; font-size:11px; line-height:1.25; color:rgba(244,239,221,.9); background:rgba(244,239,221,.08); box-shadow:inset 0 0 0 1px rgba(244,239,221,.12); }

/* world + billie */
.duo{ display:grid; grid-template-columns:1.15fr 1fr; gap:16px; padding-top:clamp(30px, 6vh, 60px); }
.duo__card{ position:relative; overflow:hidden; min-height:640px; display:flex; flex-direction:column; gap:20px; padding:clamp(24px, 3vw, 40px); border-radius:26px; }
.duo__copy .h3{ margin-top:16px; }
.duo__copy p{ margin-top:14px; max-width:460px; font-size:16px; line-height:1.6; color:var(--muted-l); }
.duo__card--world{ color:var(--cream); background:radial-gradient(80% 60% at 50% 30%, #13305A, #0A1426 72%); }
.duo__card--world .duo__copy p{ color:var(--muted-d); }
.world__geo{ position:relative; flex:1; min-height:260px; margin:16px -8px 0; }
.world__geo svg{ position:absolute; inset:0; width:100%; height:100%; }
.world__cap{ position:absolute; top:26px; right:28px; font:500 11px/1 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:rgba(244,239,221,.55); }
.world-svg{ opacity:.35; filter:saturate(0) brightness(.85); transition:opacity 1.8s ease, filter 1.8s ease; }
.is-lit .world-svg{ opacity:1; filter:none; }
.duo__card--billie{ background:linear-gradient(170deg, var(--paper), #F6EEDA); box-shadow:inset 0 0 0 1px rgba(10,26,47,.06); }
.billie__stage{ position:relative; flex:1; min-height:280px; display:grid; place-items:center; }
.billie__stage::before{ content:''; position:absolute; width:min(340px, 70%); aspect-ratio:1; border-radius:50%; background:radial-gradient(closest-side, rgba(91,160,208,.22), transparent); }
.billie__stage canvas{ position:relative; width:min(100%, 360px); height:auto; aspect-ratio:1; }
.tools{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:22px; }
.tools li{ display:flex; align-items:center; gap:10px; padding:11px 12px; border-radius:12px; font-size:14px; background:rgba(10,26,47,.04); box-shadow:inset 0 0 0 1px rgba(10,26,47,.06); }
.tools svg{ width:16px; height:16px; color:var(--cobalt); }

/* principles */
.why{ padding-block:clamp(90px, 15vh, 160px) clamp(40px, 6vh, 70px); }
.why > .h2{ max-width:780px; }
.why__grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:12px; margin-top:clamp(36px, 5vh, 56px); }
.why__card{ display:flex; flex-direction:column; align-items:flex-start; min-height:340px; padding:28px; border-radius:20px; background:rgba(10,26,47,.04); transition:background .3s; }
.why__card:hover{ background:rgba(10,26,47,.065); }
.why__i{ background-color:var(--paper); box-shadow:0 1px 2px rgba(10,26,47,.08); }
.why__card h3{ margin-top:auto; padding-top:60px; font-size:clamp(22px, 1.9vw, 27px); font-weight:400; line-height:1.15; letter-spacing:-.025em; }
.why__card p{ margin-top:12px; max-width:34ch; font-size:15px; line-height:1.6; color:var(--muted-l); }
.why__card .btn{ margin-top:22px; }

/* pricing */
.pricing{ padding-block:clamp(70px, 12vh, 130px) clamp(30px, 5vh, 60px); }
.pricing > .h2{ margin-top:18px; max-width:760px; }
.plans{ display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; margin-top:clamp(32px, 5vh, 52px); }
.plan{ position:relative; display:flex; flex-direction:column; padding:28px; border-radius:20px; background:var(--paper); box-shadow:0 0 0 1px rgba(10,26,47,.07); }
.plan__name{ font-size:15px; font-weight:500; letter-spacing:-.01em; color:var(--muted-l); }
.plan__price{ display:flex; align-items:baseline; gap:8px; margin-top:14px; }
.plan__price b{ font-size:clamp(40px, 4vw, 56px); font-weight:400; line-height:1; letter-spacing:-.045em; }
.plan__price span{ font-size:15px; color:var(--muted-l); }
.plan__alt{ margin-top:8px; font-size:15px; color:var(--muted-l); }
.plan__list{ display:grid; gap:12px; margin-top:24px; padding-top:20px; border-top:1px solid rgba(10,26,47,.08); }
.plan__list li{ position:relative; padding-left:24px; font-size:15px; line-height:1.45; }
.plan__list li::before{ content:''; position:absolute; left:2px; top:.38em; width:11px; height:6px; border-left:2px solid var(--cobalt); border-bottom:2px solid var(--cobalt); transform:rotate(-45deg); }
.plan--plus{ color:var(--cream); background:linear-gradient(150deg, #0F4C8C, #0B3A6F 50%, #072649); box-shadow:0 30px 60px -30px rgba(11,58,111,.55); }
.plan--plus .plan__name, .plan--plus .plan__price span, .plan--plus .plan__alt{ color:rgba(244,239,221,.7); }
.plan--plus .plan__list{ border-top-color:rgba(244,239,221,.16); }
.plan--plus .plan__list li::before{ border-color:var(--saffron); }
.plan__badge{ position:absolute; top:24px; right:24px; padding:6px 10px; border-radius:999px; font:500 10.5px/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--ink); background:var(--saffron); }
.pricing__fine{ margin-top:18px; max-width:760px; font-size:13px; line-height:1.55; color:var(--muted-l); }
.pricing__fine a{ text-decoration:underline; text-underline-offset:2px; }

/* FAQ */
.faq{ display:grid; grid-template-columns:minmax(0, .8fr) minmax(0, 1.2fr); gap:clamp(28px, 5vw, 80px); padding-block:clamp(70px, 12vh, 130px) clamp(40px, 6vh, 70px); }
.faq__head{ align-self:start; position:sticky; top:96px; }
.faq__head .h2{ margin-top:18px; }
.faq__more{ margin-top:18px; font-size:15px; color:var(--muted-l); }
.faq__more a, .qa p a{ text-decoration:underline; text-underline-offset:2px; }
.faq__more a{ color:var(--ink); }
.qa{ border-top:1px solid rgba(10,26,47,.1); }
.qa:last-child{ border-bottom:1px solid rgba(10,26,47,.1); }
.qa summary{ display:flex; align-items:center; justify-content:space-between; gap:20px; padding:22px 0; cursor:pointer; list-style:none; font-size:clamp(18px, 1.5vw, 21px); letter-spacing:-.015em; }
.qa summary::-webkit-details-marker{ display:none; }
.qa summary::after{ content:''; flex:none; width:10px; height:10px; border-right:2px solid var(--ink); border-bottom:2px solid var(--ink); transform:translateY(-3px) rotate(45deg); transition:transform .3s var(--ease); }
.qa[open] summary::after{ transform:translateY(3px) rotate(225deg); }
.qa p{ max-width:640px; padding:0 40px 24px 0; font-size:16px; line-height:1.65; color:var(--muted-l); }
.qa p a{ color:var(--cobalt); }

/* CTA */
.cta{ padding-block:clamp(20px, 4vh, 40px) var(--gut); }
.cta__card{
  position:relative; overflow:hidden; min-height:580px; border-radius:28px;
  --pad:clamp(36px, 5vw, 80px);
  display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:24px;
  padding:var(--pad); color:var(--ink);
  background:radial-gradient(90% 120% at 85% 15%, #FFD789 0%, rgba(255,215,137,0) 55%), linear-gradient(140deg, #F7B54D 0%, #F2A93B 45%, #E8922C 100%);
}
.cta__card::before{ content:''; position:absolute; inset:0; pointer-events:none; background:repeating-radial-gradient(circle at 78% 50%, rgba(10,26,47,.05) 0 1px, transparent 1px 16px); -webkit-mask-image:radial-gradient(60% 80% at 78% 50%, #000, transparent); mask-image:radial-gradient(60% 80% at 78% 50%, #000, transparent); }
.cta__copy{ position:relative; }
.cta__title{ margin-top:18px; font-weight:400; font-size:clamp(56px, 7.4vw, 116px); line-height:.94; letter-spacing:-.05em; }
.cta__p{ margin-top:22px; max-width:440px; font-size:17px; line-height:1.6; color:rgba(10,26,47,.78); }
.waitlist{ display:flex; gap:8px; max-width:480px; margin-top:30px; padding:6px; border-radius:16px; background:rgba(255,252,244,.62); box-shadow:inset 0 0 0 1px rgba(10,26,47,.1); transition:box-shadow .25s; }
.waitlist:focus-within{ box-shadow:inset 0 0 0 2px var(--cobalt); }
.waitlist input{ flex:1; min-width:0; height:48px; padding:0 14px; border:0; outline:none; background:transparent; font:400 16px var(--sans); color:var(--ink); }
.waitlist input::placeholder{ color:rgba(10,26,47,.45); }
.waitlist.is-sending{ opacity:.7; pointer-events:none; }
.waitlist__fine, .waitlist__error{ margin-top:12px; max-width:480px; font-size:13px; line-height:1.5; color:rgba(10,26,47,.66); }
.waitlist__error{ font-weight:500; color:var(--ink); }
.waitlist__fine a, .waitlist__error a{ text-decoration:underline; text-underline-offset:2px; }
.waitlist__done{ display:none; margin-top:30px; font-size:19px; font-weight:500; }
.waitlist__done.is-shown{ display:block; }
/* passport.riv is drawn with Billie's body cut flat at the artboard's bottom
   edge, so the canvas sits on the card's bottom edge (which clips) and Billie
   rises out of it. */
.cta__art{ position:relative; align-self:stretch; min-height:440px; margin-bottom:calc(-1 * var(--pad)); }
.cta__art canvas{ position:absolute; left:50%; bottom:-3px; width:min(100%, 520px); height:auto; aspect-ratio:1; transform:translateX(-50%); }
.cta__stamp{ position:absolute; width:clamp(80px, 9vw, 132px); filter:drop-shadow(0 18px 24px rgba(10,26,47,.35)); }
.cta__stamp--1{ top:2%; right:4%; animation:bob 6.4s ease-in-out infinite; }
.cta__stamp--2{ bottom:9%; left:0; animation:bob 7.2s ease-in-out -2s infinite; }

/* ─── footer ───────────────────────────────────────────────────────────────── */
.foot{ overflow:hidden; padding:clamp(70px, 10vh, 110px) 0 28px; background:var(--night); color:var(--cream); }
.foot__top{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:48px; }
.foot__brand p{ margin-top:10px; font-size:15px; color:rgba(244,239,221,.55); }
.foot__cols{ display:grid; grid-template-columns:repeat(3, minmax(130px, auto)); gap:clamp(28px, 5vw, 80px); }
.foot__cols h4{ margin-bottom:16px; font:500 11px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:rgba(244,239,221,.42); }
.foot__cols a{ display:block; padding:5px 0; font-size:14.5px; color:rgba(244,239,221,.85); transition:color .2s; }
.foot__cols a:hover{ color:var(--saffron); }
.foot__giant{ margin-top:clamp(80px, 14vh, 160px); font-weight:400; font-size:clamp(50px, 10.6vw, 190px); line-height:.92; letter-spacing:-.055em; }
.foot__legal{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px 28px; margin-top:clamp(40px, 7vh, 72px); padding-top:20px; background:linear-gradient(rgba(244,239,221,.1), rgba(244,239,221,.1)) top center / calc(100% - 2 * var(--gut)) 1px no-repeat; font:500 10.5px/1.5 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:rgba(244,239,221,.42); }

/* ─── reveal ───────────────────────────────────────────────────────────────── */
.js [data-reveal]{ opacity:0; transform:translateY(28px); transition:opacity .9s ease, transform 1.1s var(--ease); transition-delay:var(--d, 0s); }
.js [data-reveal].is-in{ opacity:1; transform:none; }

/* ─── responsive ───────────────────────────────────────────────────────────── */
@media (max-width:1180px){
  .hud__tip{ top:auto; bottom:82px; right:30px; max-width:240px; }
  .why__grid{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:960px){
  .hud__tip{ display:none; }
}
@media (max-width:1080px){
  .collect__grid{ grid-template-columns:1fr; }
  .collect__card{ width:min(300px, 70vw); margin:0 auto -70px; z-index:2; }
  .collect__panel{ padding-left:clamp(28px, 5vw, 72px); padding-top:110px; min-height:0; }
  .duo{ grid-template-columns:1fr; }
  .duo__card{ min-height:600px; }
}
@media (max-width:900px){
  .nav__links{ display:none; }
  .nav__cta{ margin-left:auto; }
  .plans{ grid-template-columns:1fr; }
  .faq{ grid-template-columns:1fr; }
  .faq__head{ position:static; }
  .story__sticky{ grid-template-columns:minmax(0, 1fr); grid-template-rows:auto minmax(0, 1fr); align-items:stretch; gap:6px; padding:72px 18px 18px; }
  .story__stage{ order:-1; height:38svh; min-height:230px; }
  .story__copy{ height:auto; min-height:0; }
  .js .chap{ top:0; transform:translateY(24px); }
  .js .chap.is-past{ transform:translateY(-24px); }
  .js .chap.is-on{ transform:none; }
  .chap .h2{ margin-top:14px; font-size:clamp(28px, 7.4vw, 40px); }
  .chap__p{ margin-top:12px; font-size:15px; line-height:1.5; }
  .chips{ display:none; }
  .chap__fine{ margin-top:10px; font-size:11px; }
  .rail{ gap:8px; padding-top:12px; }
  .rail a{ font-size:12px; padding-bottom:8px; }
  .rail a span{ display:none; }
  .why__grid{ grid-template-columns:1fr; }
  .why__card{ min-height:0; }
  .cta__card{ grid-template-columns:1fr; }
  .cta__art{ min-height:min(340px, 86vw); margin:8px calc(-1 * var(--pad)) calc(-1 * var(--pad)); }
  .cta__art canvas{ width:min(100%, 400px); }
  .cta__stamp{ width:72px; }
  .cta__stamp--1{ top:2%; right:7%; }
  .cta__stamp--2{ bottom:4%; left:5%; }
}
@media (max-width:760px){
  .announce__more{ display:none; }
  .hud__tip, .hud__count{ display:none; }
  .hud__coord{ left:52px; font-size:10.5px; }
  .hero__scroll{ display:none; }
  .stats{ grid-template-columns:1fr 1fr; }
  .stats > div{ padding:22px 16px 22px 0; border-left:0; border-bottom:1px solid rgba(244,239,221,.12); }
  .stats > div:nth-child(even){ padding-left:16px; border-left:1px solid rgba(244,239,221,.12); }
  .collect__stats{ grid-template-columns:1fr 1fr; }
  .scatter{ height:auto; padding:clamp(70px, 12vh, 110px) 0 20px; }
  .scatter__sticky{ position:relative; height:auto; display:flex; flex-direction:column; overflow:visible; }
  .scatter__copy{ max-width:none; padding:0 var(--gut); }
  .scatter__posts{ position:relative; inset:auto; order:2; width:100%; display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; padding:36px var(--gut) 10px; scrollbar-width:none; }
  .scatter__posts::-webkit-scrollbar{ display:none; }
  .post{ position:relative; left:auto; top:auto; flex:0 0 58vw; width:auto; transform:none; opacity:1; scroll-snap-align:center; }
  .more__nav{ display:none; }
  .card{ flex-basis:80vw; }
  .tools{ grid-template-columns:1fr; }
  .duo__card{ min-height:0; }
  .foot__cols{ grid-template-columns:1fr 1fr; }
}
@media (max-width:560px){
  .announce{ padding:0 40px 0 14px; justify-content:flex-start; }
  .announce__go, .pill-label__more{ display:none; }
  .brand{ font-size:20px; }
  .hero__ctas{ flex-direction:column; width:100%; max-width:320px; }
  .waitlist{ flex-direction:column; }
  .waitlist .btn{ width:100%; }
  .collect__panel{ border-radius:22px; }
}

@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; transition-delay:0s !important; }
  .hero{ height:auto; }
  .intro{ margin-top:0; padding-top:clamp(110px, 18vh, 200px); background:var(--night); }
  .scatter{ height:auto; }
  .scatter__sticky{ position:relative; }
  .reel{ overflow-x:auto; }
}