/* Ghosted landing page. The site CSP forbids inline styles, so everything lives here. */
:root{
  color-scheme:dark;
  --ink:#07060b;--surface:#110f18;--surface-hi:#191623;--line:rgba(255,255,255,.08);--line-hi:rgba(255,255,255,.14);
  --text:#f7f4ff;--dim:#bdb5cc;--mute:#8a8299;
  --pink:#ff3b6b;--mint:#3df5a7;--gold:#ffc94d;--violet:#b48cff;--later:#9b8cff;--ice:#8cd9ff;
  --display:ui-rounded,"SF Pro Rounded",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --body:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",system-ui,sans-serif;
  --ease:cubic-bezier(.2,.8,.2,1);
  --spring:cubic-bezier(.34,1.56,.64,1);
}
*{box-sizing:border-box}
html{overflow-x:hidden;overflow-x:clip;scroll-behavior:smooth;scroll-padding-top:80px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ink);color:var(--text);font-family:var(--body);font-size:17px;line-height:1.55;overflow-x:hidden;overflow-x:clip;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
:where(a,button,[tabindex],summary):focus-visible{outline:2px solid var(--violet);outline-offset:3px;border-radius:10px}
svg{display:block}
h1,h2,h3{font-family:var(--display);margin:0;letter-spacing:-.035em}
p{margin:0}
.sprite{position:absolute;width:0;height:0;overflow:hidden}

/* Ghost skins: the drawn ghost's body inherits its fill from the <use>. */
.g-classic{fill:url(#gk-classic)}.g-pink{fill:url(#gk-pink)}.g-mint{fill:url(#gk-mint)}.g-gold{fill:url(#gk-gold)}
.g-ice{fill:url(#gk-ice)}.g-holo{fill:url(#gk-holo)}.g-midnight{fill:url(#gk-midnight)}

/* ---------- Atmosphere ---------- */
.aurora{position:fixed;inset:0;z-index:-2;overflow:hidden;pointer-events:none}
.aurora span{position:absolute;border-radius:50%;filter:blur(90px);opacity:.55;will-change:transform}
.aurora .a1{width:60vw;height:60vw;left:-15vw;top:-25vw;background:radial-gradient(circle,#ff3b6b 0,transparent 65%);animation:drift1 22s ease-in-out infinite}
.aurora .a2{width:55vw;height:55vw;right:-20vw;top:-10vw;background:radial-gradient(circle,#7d5cff 0,transparent 65%);animation:drift2 26s ease-in-out infinite}
.aurora .a3{width:50vw;height:50vw;left:25vw;top:20vh;background:radial-gradient(circle,#2fb7ff 0,transparent 65%);opacity:.25;animation:drift3 30s ease-in-out infinite}
@keyframes drift1{50%{transform:translate(12vw,8vh) scale(1.1)}}
@keyframes drift2{50%{transform:translate(-10vw,14vh) scale(.92)}}
@keyframes drift3{50%{transform:translate(-14vw,-6vh) scale(1.15)}}
.grain{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.07;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- Nav ---------- */
.nav{position:fixed;top:12px;left:50%;transform:translateX(-50%);z-index:50;display:flex;align-items:center;gap:28px;
  width:min(1120px,calc(100% - 24px));padding:10px 10px 10px 18px;border-radius:999px;
  background:rgba(14,12,20,.55);border:1px solid var(--line);backdrop-filter:blur(22px) saturate(1.6);-webkit-backdrop-filter:blur(22px) saturate(1.6);
  transition:background .3s,border-color .3s,box-shadow .3s}
.nav.scrolled{background:rgba(14,12,20,.8);border-color:var(--line-hi);box-shadow:0 10px 40px rgba(0,0,0,.4)}
.brand{display:flex;align-items:center;gap:8px;font-family:var(--display);font-weight:850;font-size:22px;letter-spacing:-.03em}
.brand .dot{color:var(--pink);margin-left:-8px}
.brand-ghost{width:26px;height:30px;filter:drop-shadow(0 2px 8px rgba(180,140,255,.5))}
.nav nav{display:flex;gap:4px;margin-left:auto}
.nav nav a{padding:8px 14px;border-radius:999px;font-size:15px;font-weight:600;color:var(--dim);transition:color .2s,background .2s}
.nav nav a:hover,.nav nav a.active{color:#fff;background:rgba(255,255,255,.07)}
.nav-cta{padding:10px 18px;border-radius:999px;background:#fff;color:#0b0910;font-weight:750;font-size:15px;transition:transform .2s var(--spring)}
.nav-cta:hover{transform:scale(1.04)}

/* ---------- Shared ---------- */
main{display:block}
.section{position:relative;width:min(1120px,calc(100% - 32px));margin:0 auto;padding:130px 0 40px}
.section-head{max-width:720px;margin-bottom:56px}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center}
.eyebrow{font-size:13px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;margin-bottom:18px}
.pink{color:var(--pink)}.mint{color:var(--mint)}.gold{color:var(--gold)}.violet{color:var(--violet)}.ice{color:var(--ice)}
h2{font-size:clamp(40px,6.4vw,76px);line-height:1;font-weight:850}
h3{font-size:22px;font-weight:800;letter-spacing:-.02em;line-height:1.15}
.sub{margin-top:22px;font-size:clamp(17px,1.6vw,20px);line-height:1.55;color:var(--dim)}
.section-head.center .sub{margin-left:auto;margin-right:auto;max-width:600px}
.tile{position:relative;background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015));border:1px solid var(--line);border-radius:28px;padding:28px;overflow:hidden}
.tile::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(500px circle at var(--mx,50%) var(--my,-20%),rgba(255,255,255,.07),transparent 40%);opacity:0;transition:opacity .4s}
.tile:hover::before{opacity:1}
.tile p{color:var(--dim);font-size:16px;margin-top:8px}
.scene{width:100%;height:100%}

.btn{display:inline-flex;align-items:center;gap:10px;padding:16px 26px;border-radius:999px;font-weight:750;font-size:17px;transition:transform .25s var(--spring),box-shadow .25s,background .25s}
.btn svg{width:20px;height:20px}
.btn.primary{background:linear-gradient(135deg,#ff3b6b,#ff6a95);color:#fff;box-shadow:0 14px 40px rgba(255,59,107,.38),inset 0 1px 0 rgba(255,255,255,.3)}
.btn.primary:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 20px 50px rgba(255,59,107,.5),inset 0 1px 0 rgba(255,255,255,.3)}
.btn.quiet{background:rgba(255,255,255,.06);border:1px solid var(--line-hi)}
.btn.quiet:hover{background:rgba(255,255,255,.1)}

.js .reveal{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js .reveal.in{opacity:1;transform:none}

/* ---------- Hero ---------- */
.hero{width:min(1180px,calc(100% - 32px));margin:0 auto;min-height:100vh;min-height:100svh;padding:130px 0 60px;display:grid;grid-template-columns:1.08fr .92fr;gap:40px;align-items:center}
.pill{display:inline-flex;align-items:center;gap:10px;padding:8px 16px 8px 12px;border-radius:999px;border:1px solid var(--line-hi);background:rgba(255,255,255,.04);font-size:14px;font-weight:650;color:var(--dim)}
.pill{transition:border-color .2s,color .2s}
.pill:hover{color:#fff;border-color:rgba(61,245,167,.5)}
.pulse{width:8px;height:8px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 0 rgba(61,245,167,.6);animation:pulse 2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 10px rgba(61,245,167,0)}100%{box-shadow:0 0 0 0 rgba(61,245,167,0)}}
.hero h1{margin-top:26px;font-size:clamp(56px,9.2vw,128px);line-height:.92;font-weight:900;letter-spacing:-.055em}
.grad{background:linear-gradient(100deg,#ff3b6b 0%,#ff7aa2 25%,#b48cff 55%,#8cd9ff 85%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:sheen 8s ease-in-out infinite;padding-right:.05em}
@keyframes sheen{50%{background-position:100% 0}}
.hero-lead{margin-top:28px;max-width:540px;font-size:clamp(18px,1.7vw,21px);line-height:1.55;color:var(--dim)}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px}
.hero-trust{display:flex;flex-wrap:wrap;gap:10px 22px;list-style:none;padding:0;margin:36px 0 0;font-size:14.5px;color:var(--mute);font-weight:600}
.hero-trust li{display:flex;align-items:center;gap:8px}
.hero-trust svg{width:18px;height:18px;color:var(--mint)}
.hero-copy .reveal:nth-child(2){transition-delay:.08s}.hero-copy .reveal:nth-child(3){transition-delay:.16s}.hero-copy .reveal:nth-child(4){transition-delay:.24s}.hero-copy .reveal:nth-child(5){transition-delay:.32s}
.hero-stage{position:relative;display:flex;flex-direction:column;align-items:center;transition-delay:.2s}

.orbit{position:absolute;inset:-40px;pointer-events:none}
.orbit-ghost{position:absolute;width:64px;height:75px;filter:drop-shadow(0 10px 24px rgba(0,0,0,.5))}
.og1{left:-6%;top:16%;animation:bob 5s ease-in-out infinite}
.og2{right:-4%;top:46%;width:52px;height:61px;animation:bob 6s ease-in-out infinite -2s}
.og3{left:4%;bottom:14%;width:44px;height:52px;animation:bob 4.6s ease-in-out infinite -1s}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-16px) rotate(6deg)}}

.phone{position:relative;height:min(700px,max(580px,calc(100svh - 170px)));aspect-ratio:340/700;border-radius:58px;padding:12px;
  background:linear-gradient(145deg,#2c2838,#0f0d15 40%,#221e2c);
  box-shadow:0 0 0 1.5px rgba(255,255,255,.12),0 0 0 7px #0c0a11,0 0 0 8px rgba(255,255,255,.08),0 60px 120px -20px rgba(255,59,107,.35),0 40px 80px rgba(0,0,0,.6)}
.phone::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(120deg,rgba(255,255,255,.1),transparent 30%)}
.phone-screen{position:relative;height:100%;border-radius:46px;overflow:hidden;display:flex;flex-direction:column;
  background:radial-gradient(120% 60% at 50% -10%,rgba(180,140,255,.28),transparent 60%),radial-gradient(90% 50% at 100% 100%,rgba(255,59,107,.2),transparent 60%),#0a0910}
.status{display:flex;justify-content:space-between;align-items:center;padding:16px 28px 0;font-size:15px;font-weight:700;height:46px}
.island{width:108px;height:32px;border-radius:20px;background:#000;position:absolute;left:50%;top:10px;transform:translateX(-50%)}
.bars{display:flex;gap:2px;align-items:flex-end}
.bars i{display:block;width:4px;border-radius:1px;background:#fff}
.bars i:nth-child(1){height:6px}.bars i:nth-child(2){height:9px}.bars i:nth-child(3){height:12px}
.app-head{display:flex;justify-content:space-between;align-items:center;padding:16px 22px 6px}
.app-kicker{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--pink)}
.app-title{font-family:var(--display);font-size:24px;font-weight:850;letter-spacing:-.03em}
.app-ghost{width:40px;height:47px;animation:bob 4s ease-in-out infinite}
.meter{margin:6px 22px 0;padding:10px 12px;border-radius:16px;background:rgba(255,255,255,.05);border:1px solid var(--line)}
.meter-row{display:flex;justify-content:space-between;font-size:13px;color:var(--dim);font-weight:600}
.meter-row b{color:#fff;font-variant-numeric:tabular-nums}
.combo{color:var(--gold);font-weight:800;transition:transform .2s var(--spring)}
.combo.bump{transform:scale(1.25)}
.meter-track{margin-top:8px;height:6px;border-radius:6px;background:rgba(255,255,255,.08);overflow:hidden}
.meter-fill{height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,var(--pink),var(--violet),var(--ice));transition:width .6s var(--ease)}

.stack{position:relative;flex:1;margin:14px 18px 0;outline:none;touch-action:none}
.card{position:absolute;inset:0;border-radius:26px;overflow:hidden;background:#1a1722;box-shadow:0 20px 40px rgba(0,0,0,.45);
  transform-origin:50% 90%;cursor:grab;user-select:none;-webkit-user-select:none;will-change:transform;transition:transform .45s var(--spring),opacity .3s}
.card.dragging{transition:none;cursor:grabbing}
.card.fly{transition:transform .5s cubic-bezier(.3,.6,.4,1),opacity .5s}
.card[data-depth="1"]{transform:translateY(14px) scale(.95);filter:brightness(.7)}
.card[data-depth="2"]{transform:translateY(28px) scale(.9);filter:brightness(.5)}
.card .scene{position:absolute;inset:0;pointer-events:none}
.card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.35),transparent 22%,transparent 60%,rgba(0,0,0,.72));pointer-events:none}
.card-chips{position:absolute;top:12px;left:12px;right:12px;display:flex;justify-content:space-between;z-index:2;pointer-events:none}
.chip{padding:5px 10px;border-radius:999px;font-size:12px;font-weight:750;background:rgba(10,8,16,.55);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.14)}
.chip.warn{color:var(--gold)}
.card-cap{position:absolute;left:16px;right:16px;bottom:14px;z-index:2;pointer-events:none}
.card-cap b{display:block;font-family:var(--display);font-size:21px;font-weight:850;letter-spacing:-.02em;line-height:1.15}
.card-cap span{font-size:13px;color:rgba(255,255,255,.75);font-weight:600}
.stamp{position:absolute;z-index:3;padding:6px 14px;border:4px solid;border-radius:12px;font-family:var(--display);font-weight:900;font-size:30px;letter-spacing:.04em;opacity:0;pointer-events:none;text-transform:uppercase}
.stamp.s-left{top:58px;right:18px;color:var(--pink);transform:rotate(14deg);background:rgba(255,59,107,.12)}
.stamp.s-right{top:58px;left:18px;color:var(--mint);transform:rotate(-14deg);background:rgba(61,245,167,.12)}
.stamp.s-up{bottom:90px;left:50%;color:var(--gold);transform:translateX(-50%) rotate(-4deg);background:rgba(255,201,77,.12)}
.stamp.s-down{top:44%;left:50%;color:var(--later);transform:translateX(-50%) rotate(4deg);font-size:22px;background:rgba(155,140,255,.14)}
.popup{position:absolute;left:50%;top:40%;z-index:10;font-family:var(--display);font-weight:900;font-size:22px;pointer-events:none;transform:translateX(-50%);animation:popup 1s var(--ease) forwards;text-shadow:0 4px 20px rgba(0,0,0,.6)}
@keyframes popup{0%{opacity:0;transform:translate(-50%,10px) scale(.7)}20%{opacity:1;transform:translate(-50%,0) scale(1.1)}100%{opacity:0;transform:translate(-50%,-60px) scale(1)}}

.actions{display:flex;justify-content:center;align-items:center;gap:14px;padding:18px 0 26px}
.act{display:grid;place-items:center;width:62px;height:62px;border-radius:50%;border:1px solid var(--line-hi);background:rgba(255,255,255,.06);cursor:pointer;transition:transform .2s var(--spring),background .2s,box-shadow .2s;-webkit-tap-highlight-color:transparent}
.act svg{width:26px;height:26px}
.act.small{width:46px;height:46px}.act.small svg{width:20px;height:20px}
.act:hover{transform:scale(1.08)}.act:active{transform:scale(.92)}
.act-ghost{color:var(--pink)}.act-ghost:hover{background:rgba(255,59,107,.16);box-shadow:0 0 30px rgba(255,59,107,.35)}
.act-keep{color:var(--mint)}.act-keep:hover{background:rgba(61,245,167,.14);box-shadow:0 0 30px rgba(61,245,167,.3)}
.act-fav{color:var(--gold)}.act-later{color:var(--later)}
.stage-hint{margin-top:30px;font-size:14px;color:var(--mute);font-weight:600}
kbd{display:inline-block;min-width:24px;padding:1px 6px;margin:0 2px 0 6px;border-radius:6px;border:1px solid var(--line-hi);background:rgba(255,255,255,.05);font-family:inherit;font-size:13px;text-align:center}

/* ---------- Marquee ---------- */
.marquee{overflow:hidden;padding:26px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:rgba(255,255,255,.015);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marquee-track{display:flex;align-items:center;gap:34px;width:max-content;animation:marquee 46s linear infinite}
.marquee span{font-family:var(--display);font-size:clamp(26px,3.2vw,40px);font-weight:850;letter-spacing:-.03em;white-space:nowrap;color:rgba(255,255,255,.88)}
.marquee span:nth-of-type(3n+2){color:transparent;-webkit-text-stroke:1.2px rgba(255,255,255,.5)}
.marquee i{width:12px;height:12px;border-radius:50%;background:var(--pink);flex:none;box-shadow:0 0 16px var(--pink)}
.marquee i:nth-of-type(3n+2){background:var(--violet);box-shadow:0 0 16px var(--violet)}
.marquee i:nth-of-type(3n){background:var(--mint);box-shadow:0 0 16px var(--mint)}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ---------- Bento ---------- */
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.t-dirs{grid-column:span 3;grid-row:span 2;display:flex;flex-direction:column}
.t-safe{grid-column:span 3}
.t-space{grid-column:span 2}
.t-decks{grid-column:span 2}
.t-best{grid-column:span 3}
.t-private{grid-column:span 3;display:flex;flex-direction:column;justify-content:flex-end;
  background:radial-gradient(120% 120% at 100% 0%,rgba(61,245,167,.12),transparent 55%),linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015))}
.t-space,.t-decks{grid-row:auto}
.bento .tile:nth-child(odd){transition-delay:.06s}
.bento{grid-template-areas:none}
@media(min-width:1000px){
  .t-dirs{grid-column:1/4;grid-row:1/3}
  .t-safe{grid-column:4/7;grid-row:1}
  .t-space{grid-column:4/7;grid-row:2;display:grid;grid-template-columns:auto 1fr;column-gap:30px;align-items:end}
  .t-space .tiny-label,.t-space .big-num,.t-space .big-cap{grid-column:1}
  .t-space .split-bar,.t-space .legend{grid-column:2}
  .t-space .split-bar{grid-row:2}
  .t-space .legend{grid-row:3}
  .t-decks{grid-column:1/3;grid-row:3}
  .t-best{grid-column:3/5;grid-row:3}
  .t-private{grid-column:5/7;grid-row:3}
}
.dirs{position:relative;flex:1;min-height:380px;display:grid;grid-template-columns:1fr auto 1fr;grid-template-rows:auto 1fr auto;place-items:center;gap:10px;margin-bottom:22px}
.dir-card{grid-column:2;grid-row:2;width:170px;height:226px;border-radius:22px;overflow:hidden;box-shadow:0 30px 60px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.1);animation:wiggle 6s var(--ease) infinite}
@keyframes wiggle{0%,100%{transform:none}12%{transform:translateX(-22px) rotate(-6deg)}24%{transform:none}37%{transform:translateX(22px) rotate(6deg)}49%{transform:none}62%{transform:translateY(-18px)}74%{transform:none}86%{transform:translateY(16px)}}
.dir{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}
.dir svg{width:44px;height:44px;padding:10px;border-radius:14px}
.dir b{font-family:var(--display);font-size:17px;font-weight:850}
.dir span{font-size:12.5px;color:var(--mute);font-weight:650}
.d-up{grid-column:2;grid-row:1}.d-down{grid-column:2;grid-row:3}.d-left{grid-column:1;grid-row:2}.d-right{grid-column:3;grid-row:2}
.d-left svg{color:var(--pink);background:rgba(255,59,107,.14)}.d-right svg{color:var(--mint);background:rgba(61,245,167,.12)}
.d-up svg{color:var(--gold);background:rgba(255,201,77,.12)}.d-down svg{color:var(--later);background:rgba(155,140,255,.14)}

.steps{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:10px}
.steps li{display:flex;align-items:center;gap:14px;padding:12px 14px;border-radius:16px;background:rgba(255,255,255,.035);border:1px solid var(--line)}
.steps .n{display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:10px;font-weight:850;font-family:var(--display);background:rgba(255,59,107,.14);color:var(--pink)}
.steps li:nth-child(2) .n{background:rgba(180,140,255,.14);color:var(--violet)}
.steps li:nth-child(3) .n{background:rgba(61,245,167,.12);color:var(--mint)}
.steps b{display:block;font-size:16px}.steps small{font-size:13.5px;color:var(--mute)}

.tiny-label{font-size:12px!important;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)!important;margin:0!important}
.big-num{font-family:var(--display);font-size:72px;font-weight:900;letter-spacing:-.05em;line-height:1;margin-top:18px!important;color:#fff!important;font-variant-numeric:tabular-nums}
.big-num small{font-size:28px;margin-left:6px;color:var(--dim)}
.big-cap{margin-top:4px!important}
.split-bar{display:flex;gap:4px;height:10px;margin-top:22px;border-radius:10px;overflow:hidden}
.split-bar i{display:block;border-radius:3px}
.sb1{flex:46;background:var(--pink)}.sb2{flex:26;background:var(--violet)}.sb3{flex:17;background:var(--ice)}.sb4{flex:11;background:var(--gold)}
.legend{list-style:none;padding:0;margin:14px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:6px 10px;font-size:13px;color:var(--mute);font-weight:600}
.legend li{display:flex;align-items:center;gap:7px}
.legend i{width:9px;height:9px;border-radius:3px;display:block}

.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.chips span{padding:8px 13px;border-radius:999px;font-size:14px;font-weight:650;background:rgba(255,255,255,.05);border:1px solid var(--line);transition:background .2s,border-color .2s,transform .2s var(--spring)}
.chips span:hover{background:rgba(255,59,107,.12);border-color:rgba(255,59,107,.4);transform:translateY(-2px)}

.takes{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:24px}
.take{position:relative;aspect-ratio:3/4;border-radius:16px;overflow:hidden;opacity:.5;filter:saturate(.6);transition:all .4s}
.take:nth-child(1) .scene{transform:scale(1.15) translate(-6px,8px)}
.take:nth-child(3) .scene{transform:scale(1.2) rotate(4deg);filter:blur(1.6px)}
.take.win{opacity:1;filter:none;box-shadow:0 0 0 2.5px var(--gold),0 16px 40px rgba(255,201,77,.25);transform:translateY(-6px)}
.take>span{position:absolute;left:8px;bottom:8px;font-size:12px;font-weight:800;padding:3px 8px;border-radius:999px;background:rgba(0,0,0,.55)}
.take .crown{left:auto;right:8px;top:8px;bottom:auto;padding:5px;background:var(--gold);color:#3a2600}
.take .crown svg{width:16px;height:16px}
.tile-icon{width:52px;height:52px;padding:12px;border-radius:16px;background:rgba(61,245,167,.12);margin-bottom:auto}
.t-private h3{margin-top:60px}

.tools{margin-top:40px;padding:26px 28px;border-radius:28px;border:1px solid var(--line);background:rgba(255,255,255,.02)}
.tools-h{font-size:12.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin-bottom:18px}
.tool-row{display:grid;grid-template-columns:repeat(5,1fr);gap:18px}
.tool svg{width:40px;height:40px;padding:9px;border-radius:12px;background:rgba(255,255,255,.05);margin-bottom:12px}
.tool b{display:block;font-size:16px}
.tool span{display:block;font-size:14px;color:var(--mute);line-height:1.45;margin-top:2px}

/* ---------- The Plot ---------- */
.plot::before{content:"";position:absolute;inset:60px 0 0;z-index:-1;background:radial-gradient(50% 50% at 70% 50%,rgba(125,92,255,.18),transparent 70%)}
.plot-grid,.trips-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
.styles{display:flex;flex-wrap:wrap;gap:8px;margin-top:34px}
.style{padding:9px 15px;border-radius:999px;border:1px solid var(--line-hi);background:rgba(255,255,255,.04);font-size:14px;font-weight:700;color:var(--dim);cursor:pointer;transition:all .25s var(--ease)}
.style:hover{color:#fff;border-color:rgba(255,255,255,.3)}
.style.on{color:#0b0910;background:var(--tint,#b6a3ff);border-color:transparent;box-shadow:0 8px 26px -6px var(--tint,#b6a3ff)}
.style[data-style="0"]{--tint:#b6a3ff}.style[data-style="1"]{--tint:#e9ba9a}.style[data-style="2"]{--tint:#a3cfdb}.style[data-style="3"]{--tint:#baf36a}
.style[data-style="4"]{--tint:#fe7095}.style[data-style="5"]{--tint:#e7ddb8}.style[data-style="6"]{--tint:#ffc762}
.style-sub{margin-top:14px;font-size:15.5px;color:var(--mute);font-style:italic;min-height:24px;transition:opacity .25s}
.feat{list-style:none;padding:0;margin:34px 0 0;display:grid;gap:18px}
.feat li{display:flex;gap:16px;align-items:flex-start}
.feat svg{flex:none;width:44px;height:44px;padding:11px;border-radius:14px;background:rgba(255,255,255,.05);border:1px solid var(--line);color:var(--violet)}
.trips .feat svg{color:var(--ice)}
.feat b{display:block;font-size:17px}
.feat span{display:block;color:var(--mute);font-size:15px;line-height:1.5;margin-top:2px}

.film-wrap{display:flex;flex-direction:column;align-items:center;gap:20px}
.film{--tint:#b6a3ff;position:relative;width:min(380px,100%);aspect-ratio:9/16;border-radius:30px;overflow:hidden;background:#000;
  box-shadow:0 0 0 1px rgba(255,255,255,.1),0 50px 100px -20px color-mix(in srgb,var(--tint) 45%,transparent),0 30px 60px rgba(0,0,0,.6);transition:box-shadow .6s}
.film[data-style="0"]{--tint:#b6a3ff}.film[data-style="1"]{--tint:#e9ba9a}.film[data-style="2"]{--tint:#a3cfdb}.film[data-style="3"]{--tint:#baf36a}
.film[data-style="4"]{--tint:#fe7095}.film[data-style="5"]{--tint:#e7ddb8}.film[data-style="6"]{--tint:#ffc762}
.film-frames{position:absolute;inset:0}
.frame{position:absolute;inset:0;width:100%;height:100%;opacity:0;transform:scale(1.18);transition:opacity 1.1s ease}
.frame.on{opacity:1;animation:kenburns 4.2s linear forwards}
.frame:nth-child(even).on{animation-name:kenburns2}
@keyframes kenburns{from{transform:scale(1.05) translate(0,0)}to{transform:scale(1.22) translate(-3%,-2%)}}
@keyframes kenburns2{from{transform:scale(1.22) translate(3%,2%)}to{transform:scale(1.06) translate(0,0)}}
.film-tint{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.45),transparent 25%,transparent 50%,rgba(0,0,0,.85)),linear-gradient(0deg,color-mix(in srgb,var(--tint) 22%,transparent),transparent);mix-blend-mode:normal;transition:background .6s}
.film[data-style="4"] .film-tint{background:linear-gradient(180deg,rgba(0,0,0,.45),transparent 25%,transparent 50%,rgba(0,0,0,.85)),linear-gradient(0deg,rgba(254,112,149,.35),rgba(60,0,90,.25))}
.film[data-style="2"] .frame,.film[data-style="5"] .frame{filter:saturate(.75) contrast(1.05)}
.film[data-style="6"] .frame{filter:sepia(.25) saturate(1.1)}
.film-bars{position:absolute;top:14px;left:14px;right:14px;display:flex;gap:4px;z-index:2}
.film-bars i{flex:1;height:3px;border-radius:3px;background:rgba(255,255,255,.3);overflow:hidden;position:relative}
.film-bars i::after{content:"";position:absolute;inset:0;background:#fff;transform:scaleX(0);transform-origin:left}
.film-bars i.done::after{transform:scaleX(1)}
.film-bars i.now::after{animation:bar 4.2s linear forwards}
@keyframes bar{to{transform:scaleX(1)}}
.film-top{position:absolute;top:30px;left:16px;right:16px;display:flex;justify-content:space-between;z-index:2}
.film-kind,.film-hd{padding:5px 11px;border-radius:999px;font-size:12px;font-weight:800;background:rgba(0,0,0,.4);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.15)}
.film-hd{color:var(--tint)}
.film-title{position:absolute;left:24px;right:24px;bottom:72px;z-index:2}
.ft-kicker{font-size:13px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--tint);transition:color .6s}
.ft-main{margin-top:8px;font-family:var(--display);font-size:32px;font-weight:900;letter-spacing:-.035em;line-height:1.02;text-wrap:balance}
.film-title.swap .ft-main,.film-title.swap .ft-kicker{animation:titlein .8s var(--ease)}
@keyframes titlein{from{opacity:0;transform:translateY(14px);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
.film[data-style="2"] .ft-main,.film[data-style="5"] .ft-main{font-family:"New York",ui-serif,Georgia,serif;font-weight:700;letter-spacing:-.02em}
.film[data-style="4"] .ft-main{text-transform:uppercase;font-style:italic;letter-spacing:-.02em}
.film[data-style="6"] .ft-main{font-family:"Marker Felt","Chalkboard SE",ui-rounded,sans-serif;font-weight:700;letter-spacing:0}
.film-mark{position:absolute;right:16px;bottom:22px;z-index:2;display:flex;align-items:center;gap:5px;font-family:var(--display);font-weight:850;font-size:13px;opacity:.85}
.film-mark svg{width:16px;height:19px}
.eq{position:absolute;left:24px;bottom:26px;z-index:2;display:flex;gap:3px;align-items:flex-end;height:18px}
.eq i{width:3px;border-radius:2px;background:var(--tint);animation:eq 1s ease-in-out infinite;transition:background .6s}
.eq i:nth-child(1){animation-delay:-.2s}.eq i:nth-child(2){animation-delay:-.5s}.eq i:nth-child(3){animation-delay:-.1s}.eq i:nth-child(4){animation-delay:-.7s}.eq i:nth-child(5){animation-delay:-.35s}
@keyframes eq{0%,100%{height:4px}50%{height:18px}}
.film-shelf{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:min(460px,100%)}
.film-shelf div{padding:12px;border-radius:16px;background:rgba(255,255,255,.04);border:1px solid var(--line);text-align:center}
.film-shelf b{display:block;font-size:14px}.film-shelf span{font-size:12.5px;color:var(--mute)}

/* ---------- Trips ---------- */
.trips::before{content:"";position:absolute;inset:60px 0 0;z-index:-1;background:radial-gradient(50% 50% at 30% 50%,rgba(47,183,255,.14),transparent 70%)}
.roll-wrap{position:relative;padding:60px 30px}
.crew{position:absolute;inset:0;pointer-events:none}
.mate{position:absolute;display:flex;flex-direction:column;align-items:center;gap:2px;z-index:3}
.mate svg{width:58px;height:68px;filter:drop-shadow(0 8px 20px rgba(0,0,0,.5))}
.mate span{font-size:12px;font-weight:800;padding:2px 9px;border-radius:999px;background:rgba(0,0,0,.6);border:1px solid var(--line-hi)}
.m1{left:0;top:6%;animation:bob 5s ease-in-out infinite}.m2{right:0;top:0;animation:bob 6s ease-in-out infinite -1.5s}
.m3{left:-2%;bottom:6%;animation:bob 5.5s ease-in-out infinite -3s}.m4{right:2%;bottom:0;animation:bob 4.8s ease-in-out infinite -.8s}
.roll{position:relative;max-width:420px;margin:0 auto;padding:18px;border-radius:30px;background:rgba(17,15,24,.85);border:1px solid var(--line-hi);box-shadow:0 40px 100px -20px rgba(47,183,255,.3),0 30px 60px rgba(0,0,0,.5);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.roll-head{display:flex;justify-content:space-between;align-items:flex-start;padding:4px 4px 14px}
.roll-title{font-family:var(--display);font-size:26px;font-weight:900;letter-spacing:-.03em}
.roll-meta{font-size:13.5px;color:var(--mute);font-weight:600;font-variant-numeric:tabular-nums}
.e2e{display:flex;align-items:center;gap:5px;padding:5px 10px;border-radius:999px;font-size:12px;font-weight:800;color:var(--mint);background:rgba(61,245,167,.1);border:1px solid rgba(61,245,167,.25)}
.e2e svg{width:13px;height:13px}
.roll-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.cell{width:100%;aspect-ratio:1;border-radius:12px;overflow:hidden}
.js .cell{opacity:0;transform:scale(.6) translateY(20px)}
.cell.in{animation:cellin .7s var(--spring) forwards}
@keyframes cellin{to{opacity:1;transform:none}}
.roll-foot{display:flex;gap:8px;margin-top:14px}
.reveal-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;padding:12px;border-radius:16px;font-weight:800;font-size:14.5px;background:linear-gradient(135deg,#2fb7ff,#7d5cff);color:#fff}
.reveal-btn.alt{background:rgba(255,255,255,.07);border:1px solid var(--line-hi)}
.reveal-btn svg{width:17px;height:17px}
.trip-note{margin-top:30px;padding:14px 18px;border-radius:16px;border:1px dashed rgba(140,217,255,.35);color:var(--ice);font-weight:650;font-size:15px;background:rgba(140,217,255,.05)}

/* ---------- Ghost ---------- */
.parade{display:flex;justify-content:center;align-items:flex-end;gap:clamp(6px,2vw,26px);margin:0 auto 56px;padding-top:30px}
.pg{width:clamp(48px,8vw,96px);height:auto;aspect-ratio:120/140;filter:drop-shadow(0 14px 30px rgba(0,0,0,.5));animation:bob 5s ease-in-out infinite;transition:transform .3s var(--spring)}
.pg:hover{transform:scale(1.15) translateY(-10px)}
.pg:nth-child(2){animation-delay:-.7s}.pg:nth-child(3){animation-delay:-1.4s}.pg:nth-child(5){animation-delay:-2.1s}.pg:nth-child(6){animation-delay:-2.8s}.pg:nth-child(7){animation-delay:-3.5s}
.pg.hero-g{width:clamp(90px,15vw,180px);filter:drop-shadow(0 0 40px rgba(201,184,255,.55)) drop-shadow(0 20px 40px rgba(0,0,0,.5))}
.pg:nth-child(1),.pg:nth-child(7){opacity:.55;transform:scale(.8)}
.pg:nth-child(2),.pg:nth-child(6){opacity:.8;transform:scale(.9)}

.ghost-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:16px}
.receipts{background:#f6f1e7;color:#1a1520;border:0;font-family:ui-monospace,"SF Mono",Menlo,monospace;transform:rotate(-1.2deg);box-shadow:0 30px 60px rgba(0,0,0,.45)}
.receipts::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:14px;background:radial-gradient(circle at 10px 14px,var(--ink) 8px,transparent 8.5px) 0 0/20px 14px repeat-x}
.receipts::before{display:none}
.rc-kicker{font-weight:900;font-size:22px;letter-spacing:.2em;text-transform:uppercase;text-align:center;color:#1a1520!important;margin:0!important}
.rc-sub{text-align:center;font-size:13px!important;color:#6b6272!important;border-bottom:2px dashed #cfc5b5;padding-bottom:14px}
.rc-list{list-style:none;padding:0;margin:14px 0 0}
.rc-list li{display:flex;align-items:center;gap:12px;padding:9px 0;border-bottom:1px dashed #ddd3c2;font-size:15px}
.rc-list svg{width:22px;height:22px}
.rc-list .pink{color:#e0234f}.rc-list .gold{color:#c98a00}.rc-list .ice{color:#1f8fd0}.rc-list .violet{color:#7a52e0}.rc-list .mint{color:#0d9e63}
.rc-list span{flex:1}
.rc-list b{font-weight:900}
.rc-foot{margin-top:14px!important;text-align:center;font-size:11px!important;letter-spacing:.2em;text-transform:uppercase;color:#9a90a0!important;padding-bottom:10px}
.ladder{list-style:none;padding:0;margin:26px 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;counter-reset:l}
.ladder li{position:relative;padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.035);border:1px solid var(--line);transition:all .3s}
.ladder li:hover{border-color:rgba(255,201,77,.4);background:rgba(255,201,77,.06)}
.ladder b{display:block;font-size:15px}
.ladder span{font-size:12.5px;color:var(--mute);font-weight:650}
.ladder li.last{background:linear-gradient(135deg,rgba(180,140,255,.22),rgba(255,59,107,.16));border-color:rgba(180,140,255,.4)}
.streak{background:radial-gradient(120% 100% at 100% 0%,rgba(255,201,77,.1),transparent 50%),linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015))}

.arcade{margin-top:16px;padding:30px;border-radius:28px;border:1px solid var(--line);background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.01))}
.arcade-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:22px}
.arcade-head h3{display:flex;align-items:center;gap:10px;font-size:26px}
.arcade-head h3 svg{width:30px;height:30px;color:var(--violet)}
.arcade-head p{color:var(--mute);font-size:15.5px}
.games{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.game{position:relative;padding:18px;border-radius:20px;background:var(--surface);border:1px solid var(--line);transition:transform .3s var(--spring),border-color .3s}
.game:hover{transform:translateY(-6px)}
.game svg{width:48px;height:48px;padding:11px;border-radius:15px;margin-bottom:16px}
.game b{display:block;font-family:var(--display);font-size:18px;font-weight:850}
.game span{display:block;font-size:13.5px;color:var(--mute);line-height:1.45;margin-top:4px}
.game em{position:absolute;top:16px;right:14px;font-style:normal;font-size:11px;font-weight:850;letter-spacing:.08em;text-transform:uppercase;color:var(--mint)}
.game em.plus{color:var(--gold)}
.gm-pink svg{color:var(--pink);background:rgba(255,59,107,.14)}.gm-pink:hover{border-color:rgba(255,59,107,.4)}
.gm-ice svg{color:var(--ice);background:rgba(140,217,255,.12)}.gm-ice:hover{border-color:rgba(140,217,255,.4)}
.gm-mint svg{color:var(--mint);background:rgba(61,245,167,.12)}.gm-mint:hover{border-color:rgba(61,245,167,.4)}
.gm-gold svg{color:var(--gold);background:rgba(255,201,77,.12)}.gm-gold:hover{border-color:rgba(255,201,77,.4)}
.gm-violet svg{color:var(--violet);background:rgba(180,140,255,.14)}.gm-violet:hover{border-color:rgba(180,140,255,.4)}

/* ---------- Pricing ---------- */
.billing{display:flex;width:max-content;margin:-20px auto 36px;padding:4px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid var(--line)}
.bill{padding:10px 20px;border:0;border-radius:999px;background:transparent;font-weight:750;font-size:15px;color:var(--dim);cursor:pointer;transition:all .25s}
.bill span{font-size:12px;color:var(--mint);margin-left:4px}
.bill.on{background:#fff;color:#0b0910}
.bill.on span{color:#0d9e63}
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:stretch}
.plan{position:relative;padding:30px;border-radius:28px;background:var(--surface);border:1px solid var(--line)}
.plan.featured{background:linear-gradient(var(--surface),var(--surface)) padding-box,linear-gradient(135deg,var(--pink),var(--violet),var(--ice)) border-box;border:1.5px solid transparent;box-shadow:0 40px 100px -30px rgba(255,59,107,.45);transform:translateY(-10px)}
.js .plan.featured.reveal:not(.in){transform:translateY(28px)}
.badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);padding:5px 14px;border-radius:999px;font-size:12px;font-weight:850;letter-spacing:.06em;text-transform:uppercase;background:linear-gradient(135deg,var(--pink),var(--violet));white-space:nowrap}
.plan-name{font-family:var(--display);font-size:22px;font-weight:850}
.price{margin-top:14px;display:flex;align-items:baseline;gap:6px}
.price b{font-family:var(--display);font-size:52px;font-weight:900;letter-spacing:-.04em;line-height:1}
.price span{color:var(--mute);font-weight:650}
.plan-tag{margin-top:8px;color:var(--mute);font-size:14.5px;min-height:22px}
.plan ul{list-style:none;padding:0;margin:24px 0 0;display:grid;gap:12px;border-top:1px solid var(--line);padding-top:22px}
.plan li{display:flex;gap:10px;font-size:15.5px;color:var(--dim);line-height:1.4}
.plan li svg{flex:none;width:18px;height:18px;margin-top:1px;color:var(--mint)}
.featured li svg{color:var(--pink)}
.pass{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:28px;color:var(--dim);font-size:16px;text-align:center;flex-wrap:wrap}
.pass svg{width:20px;height:20px;color:var(--ice)}
.pass b{color:#fff}

/* ---------- FAQ ---------- */
.qa{max-width:780px;margin:0 auto;display:grid;gap:10px}
.qa details{border-radius:20px;background:var(--surface);border:1px solid var(--line);transition:border-color .3s,background .3s}
.qa details[open]{border-color:var(--line-hi);background:var(--surface-hi)}
.qa summary{list-style:none;cursor:pointer;padding:20px 60px 20px 24px;font-weight:750;font-size:17.5px;position:relative}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"";position:absolute;right:24px;top:50%;width:12px;height:12px;margin-top:-8px;border-right:2.5px solid var(--mute);border-bottom:2.5px solid var(--mute);transform:rotate(45deg);transition:transform .3s var(--ease)}
.qa details[open] summary::after{transform:rotate(225deg);margin-top:-2px}
.qa details p{padding:0 24px 22px;color:var(--dim);font-size:16px;line-height:1.6}

/* ---------- Final ---------- */
.final{position:relative;text-align:center;padding:160px 16px 140px;overflow-x:clip}
.final-glow{position:absolute;left:50%;top:50%;width:900px;height:900px;transform:translate(-50%,-45%);border-radius:50%;z-index:-1;background:conic-gradient(from 0deg,rgba(255,59,107,.35),rgba(180,140,255,.35),rgba(140,217,255,.3),rgba(61,245,167,.2),rgba(255,59,107,.35));filter:blur(110px);animation:spin 24s linear infinite;opacity:.7}
@keyframes spin{to{transform:translate(-50%,-45%) rotate(360deg)}}
.final-ghost{width:130px;height:152px;margin:0 auto 30px;filter:drop-shadow(0 0 50px rgba(201,184,255,.6));animation:bob 5s ease-in-out infinite}
.final h2{font-size:clamp(54px,10vw,140px);font-weight:900;letter-spacing:-.06em;line-height:.95}
.final>p{margin:22px auto 0;max-width:520px;font-size:19px;color:var(--dim)}
.store{margin-top:40px;display:flex;justify-content:center}
.store-badge{transition:transform .25s var(--spring);display:inline-flex;align-items:center;gap:12px;padding:14px 26px 14px 20px;border-radius:18px;background:#fff;color:#0b0910;box-shadow:0 20px 60px rgba(255,255,255,.12)}
.store-badge:hover{transform:translateY(-2px) scale(1.03)}
.store-badge svg{width:30px;height:30px}
.store-badge>span{display:flex;flex-direction:column;align-items:flex-start;font-family:var(--display);font-weight:850;font-size:22px;line-height:1.05;letter-spacing:-.02em}
.store-badge small{font-family:var(--body);font-size:12px;font-weight:650;letter-spacing:0;color:#5a5464}
.hashtag{margin-top:30px!important;font-family:var(--display);font-weight:850;color:var(--mute)!important;font-size:16px!important;letter-spacing:.02em}

/* ---------- Footer ---------- */
.foot{width:min(1120px,calc(100% - 32px));margin:0 auto;padding:34px 0 50px;border-top:1px solid var(--line);display:flex;align-items:center;gap:26px;flex-wrap:wrap;color:var(--mute);font-size:14.5px}
.foot nav{display:flex;gap:20px;flex-wrap:wrap}
.foot nav a:hover{color:#fff}
.foot p{margin-left:auto}

/* ---------- Responsive ---------- */
@media(max-width:999px){
  .bento{grid-template-columns:1fr 1fr}
  .t-dirs{grid-column:1/-1;grid-row:auto}
  .t-safe,.t-best,.t-private{grid-column:1/-1}
  .t-space,.t-decks{grid-column:span 1}
  .tool-row{grid-template-columns:repeat(3,1fr)}
  .games{grid-template-columns:repeat(3,1fr)}
  .plot-grid,.trips-grid{grid-template-columns:1fr;gap:50px}
  .trips-grid .roll-wrap{order:2}
  .ghost-grid{grid-template-columns:1fr}
  .receipts{max-width:440px;margin:0 auto 20px;width:100%}
  .plans{grid-template-columns:1fr;max-width:480px;margin:0 auto}
  .plan.featured{transform:none}
}
@media(max-width:900px){
  .nav nav{display:none}
  .nav-cta{margin-left:auto}
  .hero{grid-template-columns:1fr;text-align:center;padding-top:120px;gap:60px}
  .hero-lead{margin-left:auto;margin-right:auto}
  .hero-actions,.hero-trust{justify-content:center}
}
@media(max-width:600px){
  body{font-size:16px}
  .section{padding-top:96px}
  .section-head{margin-bottom:40px}
  .hero h1{font-size:clamp(52px,15vw,80px)}
  .phone{height:620px;border-radius:52px}
  .phone-screen{border-radius:41px}
  .bento{grid-template-columns:1fr}
  .t-space,.t-decks{grid-column:1/-1}
  .tile{padding:22px;border-radius:24px}
  .dirs{min-height:320px}
  .dir-card{width:130px;height:174px}
  .dir svg{width:38px;height:38px;padding:8px}
  .tool-row{grid-template-columns:1fr 1fr}
  .games{grid-template-columns:1fr 1fr}
  .ladder{grid-template-columns:1fr 1fr}
  .roll-wrap{padding:50px 0}
  .mate svg{width:44px;height:52px}
  .film-shelf b{font-size:13px}
  .foot p{margin-left:0;width:100%}
  .orbit{display:none}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  html{scroll-behavior:auto}
  .js .reveal{opacity:1;transform:none}
  .js .cell{opacity:1;transform:none}
}