@font-face{font-family:"Yellowtail";src:url(/fonts/yellowtail-400.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Bungee";src:url(/fonts/bungee-400.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Monoton";src:url(/fonts/monoton-400.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Rajdhani";src:url(/fonts/rajdhani-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Rajdhani";src:url(/fonts/rajdhani-700.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"STM";src:url(/fonts/share-tech-mono-400.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Bebas";src:url(/fonts/bebas-400.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Anton";src:url(/fonts/anton-400.woff2) format("woff2");font-display:swap}

:root{
  --bg:#0a0614;--bg2:#140a22;--panel:#160d2a;--ink:#fff4ea;--mut:#c9b4d4;
  --pink:#ff3d9a;--hot:#ff6b9d;--coral:#ff7a59;--sun:#ffb347;--gold:#ffd36b;
  --teal:#1fd6c8;--cyan:#3ce0ff;--purple:#8b3dff;--lime:#b6ff3b;
  --chrome1:#f5e6c8;--chrome2:#9a7b4f;--chrome3:#2a1a0a;
  --glow:0 0 8px rgba(255,61,154,.55),0 0 28px rgba(255,122,89,.35);
  --tglow:0 0 8px rgba(31,214,200,.55),0 0 22px rgba(60,224,255,.35);
  --display:"Bebas",Impact,"Arial Narrow",sans-serif;
  --script:"Yellowtail",cursive;
  --ui:"Anton",Impact,sans-serif;
  --body:Rajdhani,system-ui,sans-serif;
  --mono:STM,ui-monospace,monospace;
  --hair:rgba(255,244,234,.14);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:auto;-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-weight:500;font-size:18px;line-height:1.5;overflow-x:hidden;cursor:crosshair}
img{max-width:100%;height:auto;display:block;object-fit:cover}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--pink);color:#fff}
.mono{font-family:var(--mono)}
.wrap{width:min(1180px,92vw);margin:0 auto}

/* Film grain + vignette (GTA VI cinematic, not CRT cyberpunk) */
.crt{pointer-events:none;position:fixed;inset:0;z-index:90;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  opacity:.09;mix-blend-mode:overlay}
.crt::after{content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse at center,transparent 42%,rgba(8,4,16,.72) 100%);
  opacity:1;mix-blend-mode:multiply;animation:none}
body.no-crt .crt{display:none}

/* loader — Rockstar-ish boot */
#loader{position:fixed;inset:0;z-index:200;
  background:linear-gradient(180deg,#1a0a28 0%,#3a1248 40%,#ff6b5a 85%,#ffb347 120%);
  display:grid;place-items:center;text-align:center;transition:opacity .6s,visibility .6s}
#loader.done{opacity:0;visibility:hidden}
#loader .ld-logo{width:120px;height:120px;border-radius:50%;object-fit:cover;
  box-shadow:0 0 0 3px var(--gold),0 0 40px rgba(255,179,71,.55);animation:spin 2.4s linear infinite}
@keyframes spin{to{transform:rotateY(360deg)}}
#loader h2{font-family:var(--script);font-size:clamp(48px,9vw,96px);color:#fff;text-shadow:0 4px 0 #2a0b3f,var(--glow);margin:.2em 0 0;font-weight:400}
#loader .bar{width:min(380px,70vw);height:10px;border:2px solid var(--teal);margin:18px auto 8px;box-shadow:var(--tglow);background:rgba(0,0,0,.35)}
#loader .bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--pink),var(--sun));transition:width .2s}
#loader .tip{font-family:var(--mono);color:rgba(255,244,234,.75);font-size:14px;max-width:420px;margin:0 auto;padding:0 20px}

#trail{position:fixed;inset:0;pointer-events:none;z-index:95}

/* HUD — Rockstar chrome */
.hud{position:fixed;top:0;left:0;right:0;z-index:80;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 3vw;
  background:linear-gradient(180deg,rgba(10,6,20,.94),rgba(10,6,20,0));transition:background .3s,border-color .3s;border-bottom:1px solid transparent}
.hud.scrolled{background:rgba(10,6,20,.88);backdrop-filter:blur(10px);border-bottom-color:rgba(255,61,154,.35)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand img{width:42px;height:42px;border-radius:50%;object-fit:cover;
  box-shadow:0 0 0 2px var(--gold),0 0 16px rgba(255,211,107,.45)}
.brand b{font-family:var(--display);font-size:34px;color:#fff;letter-spacing:.04em;font-weight:400;line-height:1;
  text-shadow:0 2px 0 #2a0b3f,0 0 18px rgba(255,61,154,.5)}
.nav{display:flex;gap:2px;font-family:var(--ui);font-size:15px;letter-spacing:.1em;text-transform:uppercase}
.nav a{text-decoration:none;padding:8px 12px;border:1px solid transparent;transition:.2s;color:var(--mut)}
.nav a:hover,.nav a.on{color:#fff;border-color:rgba(255,211,107,.55);background:rgba(255,211,107,.08);text-shadow:0 0 10px rgba(255,211,107,.5)}
.hud-r{display:flex;align-items:center;gap:14px}
.wanted{display:flex;gap:2px;font-size:18px;color:rgba(255,255,255,.18)}
.wanted i{font-style:normal;transition:.3s}
.wanted i.lit{color:var(--gold);text-shadow:0 0 10px var(--gold);animation:blink 1s infinite}
@keyframes blink{50%{opacity:.45}}
.cash{font-family:var(--display);color:var(--lime);text-shadow:0 0 10px rgba(182,255,59,.55);font-size:22px;min-width:96px;text-align:right;letter-spacing:.04em}
.burger{display:none;width:42px;height:42px;border:2px solid var(--gold);background:rgba(0,0,0,.35)}
.burger span{display:block;width:20px;height:2px;background:#fff;margin:4px auto}

/* Buttons — chrome bevel */
.btn{--c:var(--pink);position:relative;display:inline-flex;align-items:center;gap:10px;
  font-family:var(--ui);font-size:16px;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;
  padding:14px 22px;color:#fff;
  background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(0,0,0,.25)),linear-gradient(135deg,rgba(255,61,154,.35),rgba(255,122,89,.2));
  border:2px solid var(--c);
  box-shadow:0 0 0 1px rgba(255,255,255,.12) inset,0 0 18px color-mix(in srgb,var(--c) 55%,transparent);
  clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);
  transition:transform .15s,box-shadow .2s,background .2s;will-change:transform}
.btn:hover{background:var(--c);color:#14001f;box-shadow:0 0 28px var(--c);transform:translateY(-1px)}
.btn.cy{--c:var(--teal)}
.btn.gold{--c:var(--gold);color:#1a1000}
.btn.gold:hover{color:#1a1000}
.btn svg{width:18px;height:18px;flex:none}
.btn .k{font-family:var(--mono);font-size:11px;opacity:.75;border:1px solid currentColor;padding:0 5px}

/* ===== HERO — GTA VI Leonida sunset ===== */
.hero{position:relative;min-height:100svh;overflow:hidden;display:flex;align-items:center;padding:110px 0 70px;isolation:isolate}
.sky{position:absolute;inset:0;z-index:-5;
  background:
    radial-gradient(ellipse 80% 50% at 50% 78%,rgba(255,179,71,.55),transparent 70%),
    linear-gradient(180deg,#1a0a3a 0%,#4a1568 28%,#c43a7a 52%,#ff7a59 72%,#ffc56b 88%,#ffe3a0 100%)}
.sun{position:absolute;z-index:-4;left:50%;bottom:20%;width:min(52vw,560px);aspect-ratio:1;transform:translateX(-50%);border-radius:50%;
  background:linear-gradient(180deg,#ffe9a0,#ffb347 35%,#ff7a59 65%,#ff3d9a 95%);
  box-shadow:0 0 100px rgba(255,122,89,.7),0 0 200px rgba(255,61,154,.35);
  -webkit-mask:repeating-linear-gradient(180deg,#000 0 58%,transparent 58% 61%,#000 61% 68%,transparent 68% 72%,#000 72% 78%,transparent 78% 83%,#000 83% 88%,transparent 88% 93%,#000 93%);
  mask:repeating-linear-gradient(180deg,#000 0 58%,transparent 58% 61%,#000 61% 68%,transparent 68% 72%,#000 72% 78%,transparent 78% 83%,#000 83% 88%,transparent 88% 93%,#000 93%)}
.skyline{position:absolute;left:-5%;right:-5%;bottom:20%;height:32%;z-index:-3;opacity:0}
.city{position:absolute;left:0;right:0;bottom:16%;z-index:-3;height:36%}
.city svg{width:100%;height:100%;object-fit:cover}
.grid{position:absolute;left:-40%;right:-40%;bottom:-2%;height:20%;z-index:-2;
  background:
    linear-gradient(180deg,transparent,rgba(10,6,20,.85)),
    repeating-linear-gradient(90deg,rgba(255,61,154,.55) 0 1.5px,transparent 1.5px 70px),
    repeating-linear-gradient(0deg,rgba(31,214,200,.4) 0 1.5px,transparent 1.5px 36px);
  transform:perspective(420px) rotateX(58deg);transform-origin:top;opacity:.55;animation:gridmove 2s linear infinite}
@keyframes gridmove{to{background-position:0 0,0 0,0 36px}}
.palm{position:absolute;bottom:14%;z-index:-1;width:min(26vw,300px);fill:#0a0614;filter:drop-shadow(0 0 14px rgba(255,61,154,.4))}
.palm.l{left:-2vw}.palm.r{right:-2vw;transform:scaleX(-1)}

.hero-in{display:grid;grid-template-columns:1.05fr .95fr;gap:3.5vw;align-items:center;position:relative;z-index:2}
.kick{font-family:var(--mono);color:var(--teal);text-shadow:var(--tglow);letter-spacing:.22em;font-size:12px;margin-bottom:10px;text-transform:uppercase}
.kick::before{content:"▶ "}
.title{font-family:var(--display);font-weight:400;line-height:.82;font-size:clamp(72px,14vw,168px);color:#fff;
  text-shadow:0 4px 0 #2a0b3f,0 0 20px rgba(255,61,154,.55),0 0 60px rgba(255,122,89,.35);
  letter-spacing:.02em;margin:6px 0 14px;text-transform:uppercase}
.title small{display:block;font-family:var(--ui);font-size:.22em;letter-spacing:.18em;color:var(--gold);
  text-shadow:0 0 12px rgba(255,211,107,.55);margin-top:.15em}
.tagline{font-family:var(--ui);font-size:clamp(18px,2.2vw,26px);color:var(--sun);text-shadow:0 0 14px rgba(255,179,71,.5);margin-bottom:12px;letter-spacing:.04em}
.lead{font-size:19px;max-width:540px;color:#ffe8f4;text-shadow:0 1px 8px rgba(0,0,0,.45)}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin:24px 0 16px}

/* License-plate CA motif */
.ca{display:flex;align-items:stretch;max-width:620px;
  border:3px solid var(--chrome1);
  background:linear-gradient(180deg,#1a1030,#0e0818);
  box-shadow:0 0 0 2px var(--chrome2),0 0 24px rgba(255,211,107,.25),inset 0 0 30px rgba(255,211,107,.06);
  position:relative}
.ca::before{content:"LEONIDA · ETH";position:absolute;top:-11px;left:14px;font-family:var(--mono);font-size:10px;letter-spacing:.2em;
  background:var(--bg);padding:0 8px;color:var(--gold)}
.ca .lbl{font-family:var(--ui);font-size:14px;letter-spacing:.08em;background:linear-gradient(180deg,var(--gold),#c9a04a);color:#1a1000;padding:12px 12px;display:flex;align-items:center}
.ca code{flex:1;font-family:var(--mono);font-size:clamp(11px,1.35vw,14px);padding:12px;overflow-wrap:anywhere;align-self:center;color:var(--ink)}
.ca button{font-family:var(--ui);font-size:13px;letter-spacing:.06em;padding:0 16px;border-left:2px solid var(--chrome2);transition:.2s;white-space:nowrap;color:var(--gold)}
.ca button:hover{background:var(--gold);color:#1a1000}

/* Hero art frame — preserve banner 3:1, never stretch */
.hero-card{position:relative;perspective:900px}
.tilt{position:relative;transform-style:preserve-3d;transition:transform .12s ease-out;
  aspect-ratio:3/1;width:100%;overflow:hidden;
  border:3px solid var(--chrome1);
  box-shadow:0 0 0 2px var(--chrome2),0 20px 50px rgba(0,0,0,.55),var(--glow);
  background:#000}
.tilt picture,.tilt > img:not(.logo-badge){position:absolute;inset:0;width:100%;height:100%}
.tilt picture img,.tilt > img:not(.logo-badge){width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.tilt .logo-badge{position:absolute;width:28%;height:auto;aspect-ratio:1;right:-6%;bottom:-18%;border-radius:50%;
  object-fit:cover;transform:translateZ(60px);
  box-shadow:0 0 0 3px var(--gold),0 0 28px rgba(255,211,107,.55);animation:bob 3s ease-in-out infinite;z-index:3}
@keyframes bob{50%{translate:0 -10px}}
.tilt .tag{position:absolute;left:-8px;top:-14px;z-index:4;font-family:var(--ui);font-size:13px;letter-spacing:.08em;
  background:linear-gradient(180deg,var(--gold),#c9a04a);color:#1a1000;padding:5px 12px;transform:translateZ(40px) rotate(-3deg);
  box-shadow:0 4px 12px rgba(0,0,0,.4)}
.scrollcue{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);font-family:var(--mono);font-size:12px;color:var(--mut);letter-spacing:.28em;animation:blink 1.6s infinite}

/* marquee — highway billboard */
.marq{position:relative;overflow:hidden;background:linear-gradient(90deg,var(--pink),var(--coral));color:#1a0410;
  font-family:var(--display);font-size:28px;letter-spacing:.06em;padding:10px 0;
  transform:rotate(-1.5deg) scale(1.03);border-block:3px solid var(--chrome1);
  box-shadow:0 0 40px rgba(255,61,154,.45);z-index:2}
.marq.alt{background:linear-gradient(90deg,var(--teal),var(--cyan));transform:rotate(1.2deg) scale(1.03);margin-top:-18px;color:#042018}
.marq .track{display:flex;width:max-content;animation:mq 28s linear infinite}
.marq.alt .track{animation-direction:reverse}
.marq span{padding:0 22px;white-space:nowrap}
@keyframes mq{to{transform:translateX(-50%)}}

/* sections */
section{position:relative;padding:110px 0}
.sec-h{display:flex;align-items:flex-end;gap:16px;margin-bottom:40px;flex-wrap:wrap}
.sec-h .num{font-family:Monoton;font-size:clamp(54px,8vw,96px);line-height:.9;color:transparent;-webkit-text-stroke:1px var(--pink);text-shadow:0 0 20px rgba(255,61,154,.45)}
.sec-h h2{font-family:var(--display);font-size:clamp(36px,5.5vw,72px);line-height:.9;text-transform:uppercase;letter-spacing:.02em;font-weight:400}
.sec-h h2 em{font-family:var(--script);font-style:normal;text-transform:none;color:var(--pink);text-shadow:var(--glow);font-size:1.05em;font-weight:400;letter-spacing:0}
.sec-h p{flex-basis:100%;font-family:var(--mono);color:var(--teal);font-size:13px;letter-spacing:.18em}
.js [data-reveal]{opacity:0;transform:translateY(40px)}
.js [data-reveal].in{opacity:1;transform:none;transition:opacity .8s,transform .8s cubic-bezier(.2,.8,.2,1)}

/* about — character dossier chrome */
#about{background:radial-gradient(ellipse at 80% 10%,rgba(255,122,89,.18),transparent 55%),radial-gradient(ellipse at 10% 80%,rgba(31,214,200,.1),transparent 50%),var(--bg)}
.about{display:grid;grid-template-columns:1fr 1fr;gap:5vw;align-items:center}
.dossier{position:relative;border:2px solid rgba(255,211,107,.45);
  background:linear-gradient(160deg,rgba(255,211,107,.08),rgba(10,6,20,.92));
  padding:30px;box-shadow:0 0 0 1px rgba(255,255,255,.06) inset,0 20px 50px rgba(0,0,0,.4)}
.dossier::before{content:"CHARACTER FILE // LEONIDA PD";position:absolute;top:-12px;left:20px;background:var(--bg);padding:0 8px;font-family:var(--mono);font-size:11px;color:var(--gold);letter-spacing:.2em}
.dossier p{margin-bottom:14px;font-size:18px}
.dossier p:first-of-type::first-letter{font-family:var(--script);font-size:3.2em;float:left;line-height:.8;margin:6px 8px 0 0;color:var(--pink);text-shadow:var(--glow)}
.stats{display:grid;gap:12px;margin-top:20px}
.stat{display:grid;grid-template-columns:130px 1fr 44px;align-items:center;gap:10px;font-family:var(--mono);font-size:12px;letter-spacing:.12em}
.stat .b{height:10px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);overflow:hidden}
.stat .b i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--pink),var(--sun));box-shadow:0 0 10px var(--pink);transition:width 1.6s cubic-bezier(.2,.8,.2,1)}

.polaroids{position:relative;height:540px}
.pol{position:absolute;width:56%;background:linear-gradient(180deg,#fff8ee,#f0e0c8);padding:10px 10px 42px;
  box-shadow:0 20px 50px rgba(0,0,0,.55);transition:transform .35s,z-index 0s;cursor:grab;border:1px solid rgba(154,123,79,.4)}
.pol img{aspect-ratio:1;object-fit:cover;width:100%;height:auto;display:block}
.pol span{position:absolute;bottom:10px;left:0;right:0;text-align:center;font-family:var(--script);color:#b01060;font-size:22px}
.pol:nth-child(1){left:0;top:0;transform:rotate(-8deg)}
.pol:nth-child(2){right:0;top:40px;transform:rotate(7deg)}
.pol:nth-child(3){left:20%;bottom:0;transform:rotate(-2deg)}
.pol:hover{transform:rotate(0) scale(1.06);z-index:5}

/* missions — map select cards */
#missions{background:linear-gradient(180deg,var(--bg),#1a0a2e 50%,var(--bg))}
.missions{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.mission{position:relative;display:flex;flex-direction:column;min-height:380px;text-decoration:none;
  border:2px solid rgba(255,211,107,.35);background:#10081c;overflow:hidden;transform-style:preserve-3d;
  transition:border-color .2s,box-shadow .2s}
.mission .bgimg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.4;filter:saturate(1.25) contrast(1.05);transition:transform .6s,opacity .3s}
.mission::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#10081c 22%,transparent 75%)}
.mission:hover{border-color:var(--c,var(--pink));box-shadow:0 0 30px var(--c,var(--pink))}
.mission:hover .bgimg{transform:scale(1.08);opacity:.58}
.mission .in{position:relative;z-index:2;margin-top:auto;padding:24px}
.mission .mtag{position:absolute;z-index:2;top:16px;left:16px;font-family:var(--mono);font-size:11px;letter-spacing:.2em;padding:4px 8px;border:1px solid var(--c,var(--pink));color:var(--c,var(--pink));background:rgba(0,0,0,.45)}
.mission h3{font-family:var(--display);font-size:34px;line-height:.95;margin-bottom:8px;letter-spacing:.03em;font-weight:400}
.mission p{color:var(--mut);font-size:16px;margin-bottom:16px}
.mission .go{font-family:var(--ui);font-size:15px;letter-spacing:.08em;color:var(--c,var(--pink));display:flex;gap:8px;align-items:center;text-transform:uppercase}
.mission .go::after{content:"→";transition:transform .2s}
.mission:hover .go::after{transform:translateX(8px)}
.m-buy{--c:var(--pink)}.m-chart{--c:var(--teal)}.m-x{--c:var(--gold)}
.live{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:28px}
.live div{border:1px solid rgba(31,214,200,.35);padding:14px;background:rgba(31,214,200,.05);position:relative}
.live div::before{content:"";position:absolute;top:0;left:0;width:8px;height:2px;background:var(--teal)}
.live small{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--teal)}
.live b{font-family:var(--display);font-size:26px;font-weight:400;letter-spacing:.03em}
.live .up{color:var(--lime)}.live .dn{color:#ff5a6e}

/* how to buy */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;counter-reset:s}
.step{position:relative;padding:26px 22px;border:2px solid rgba(255,211,107,.35);
  background:linear-gradient(180deg,rgba(255,211,107,.08),rgba(10,6,20,.7));
  clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,0 100%)}
.step::before{counter-increment:s;content:"0" counter(s);font-family:var(--display);font-size:54px;line-height:1;color:var(--pink);text-shadow:var(--glow);display:block;margin-bottom:8px;letter-spacing:.02em}
.step h3{font-family:var(--ui);font-size:18px;margin-bottom:8px;letter-spacing:.06em;text-transform:uppercase}
.step p{font-size:16px;color:var(--mut)}
.step code{font-family:var(--mono);font-size:12px;color:var(--teal);overflow-wrap:anywhere}
.step .ck{position:absolute;top:14px;right:30px;font-family:var(--mono);font-size:11px;color:var(--lime);opacity:0;transition:.3s}
.step.done{border-color:var(--lime)}
.step.done .ck{opacity:1}
.cheat{margin-top:26px;font-family:var(--mono);font-size:13px;color:var(--mut);text-align:center}
.cheat kbd{border:1px solid var(--pink);padding:1px 6px;color:var(--pink)}

/* gallery — fixed crop boxes, never squash */
#vault{background:radial-gradient(ellipse at 20% 20%,rgba(255,61,154,.14),transparent 55%),var(--bg)}
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.gi{position:relative;border:2px solid rgba(255,211,107,.22);background:#10081c;overflow:hidden;
  transition:border-color .2s,box-shadow .2s;width:100%;text-align:left;display:flex;flex-direction:column;padding:0}
.gi img{width:100%;aspect-ratio:1;height:auto;object-fit:cover;object-position:center;transition:transform .5s,filter .3s;display:block}
.gi:hover{border-color:var(--pink);box-shadow:var(--glow)}
.gi:hover img{transform:scale(1.05);filter:saturate(1.25)}
.gi figcaption{padding:10px 12px;font-family:var(--mono);font-size:13px;color:var(--mut)}
.gi .n{position:absolute;top:8px;left:8px;font-family:var(--ui);font-size:13px;letter-spacing:.06em;
  background:linear-gradient(180deg,var(--pink),#c01860);color:#fff;padding:3px 9px;z-index:2;box-shadow:0 2px 8px rgba(0,0,0,.4)}
.slots{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-top:30px}
.slot{aspect-ratio:1;display:grid;place-items:center;text-align:center;border:2px dashed rgba(31,214,200,.4);font-family:var(--mono);font-size:11px;letter-spacing:.15em;color:var(--teal);background:repeating-linear-gradient(45deg,rgba(31,214,200,.05) 0 10px,transparent 10px 20px);position:relative}
.slot b{display:block;font-family:var(--display);font-size:28px;color:#fff;font-weight:400}
.slot::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(31,214,200,.18),transparent);transform:translateX(-100%);animation:scan 3s infinite}
@keyframes scan{to{transform:translateX(100%)}}
.vault-note{font-family:var(--mono);color:var(--mut);font-size:13px;margin-top:14px}
.center{text-align:center;margin-top:34px}

/* lightbox */
#lb{position:fixed;inset:0;z-index:150;background:rgba(8,4,16,.94);display:grid;place-items:center;padding:4vw}
#lb[hidden]{display:none}
#lb figure{max-width:min(1000px,92vw);text-align:center}
#lb img{max-width:100%;max-height:78vh;width:auto;height:auto;margin:0 auto;object-fit:contain;
  border:3px solid var(--chrome1);box-shadow:0 0 0 2px var(--chrome2),var(--glow)}
#lb figcaption{font-family:var(--mono);margin-top:12px;color:var(--ink)}
#lb .lbb{position:absolute;font-family:var(--ui);font-size:22px;width:52px;height:52px;border:2px solid var(--teal);color:var(--teal);background:rgba(10,6,20,.75)}
#lb .lb-x{top:20px;right:20px}#lb .lb-p{left:2vw;top:50%}#lb .lb-n{right:2vw;top:50%}

/* faq */
.faq{display:grid;gap:12px;max-width:900px}
.faq details{border:2px solid rgba(255,211,107,.3);background:rgba(255,211,107,.04);transition:border-color .2s}
.faq details[open]{border-color:var(--pink);box-shadow:0 0 20px rgba(255,61,154,.28)}
.faq summary{list-style:none;cursor:pointer;padding:18px 22px;font-family:var(--ui);font-size:18px;letter-spacing:.05em;text-transform:uppercase;display:flex;justify-content:space-between;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--pink);font-size:22px;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 22px 20px;color:var(--mut)}
.faq code{font-family:var(--mono);color:var(--teal);overflow-wrap:anywhere;font-size:14px}

/* final CTA — highway billboard */
.final{text-align:center;padding:140px 0;background:url(/img/banner.webp) center/cover no-repeat;position:relative;isolation:isolate}
.final::before{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,var(--bg),rgba(10,6,20,.55) 35%,rgba(10,6,20,.55) 65%,var(--bg));z-index:-1}
.final h2{font-family:var(--script);font-weight:400;font-size:clamp(60px,10vw,140px);line-height:.9;
  text-shadow:0 4px 0 #2a0b3f,var(--glow);transform:rotate(-3deg)}
.final p{font-family:var(--ui);color:var(--sun);margin:18px 0 28px;font-size:clamp(18px,2.2vw,26px);letter-spacing:.08em;text-transform:uppercase}
.final .cta{justify-content:center}

/* footer */
footer{padding:50px 0 40px;border-top:2px solid var(--gold);background:#060310;box-shadow:0 -10px 40px rgba(255,211,107,.12)}
.foot{display:flex;flex-wrap:wrap;gap:24px;justify-content:space-between;align-items:flex-start}
.foot .brand b{font-size:40px}
.foot nav{display:flex;flex-wrap:wrap;gap:16px;font-family:var(--ui);font-size:14px;letter-spacing:.06em;text-transform:uppercase}
.foot nav a{text-decoration:none;color:var(--mut)}.foot nav a:hover{color:var(--gold)}
.disc{margin-top:28px;padding:18px;border:1px dashed rgba(255,211,107,.3);font-size:14px;color:var(--mut);line-height:1.6}
.disc strong{color:var(--ink)}
.copy{margin-top:18px;font-family:var(--mono);font-size:12px;color:#8e6aa8}

/* toast */
#toast{position:fixed;left:50%;top:40%;transform:translate(-50%,-50%) scale(.8);z-index:160;text-align:center;pointer-events:none;opacity:0;transition:.3s}
#toast.show{opacity:1;transform:translate(-50%,-50%) scale(1)}
#toast b{display:block;font-family:var(--display);font-size:clamp(40px,7vw,80px);color:var(--gold);text-shadow:0 0 6px #000,0 0 30px var(--gold);letter-spacing:.04em;font-weight:400}
#toast span{font-family:var(--body);font-weight:700;font-size:22px;color:#fff;text-shadow:0 0 6px #000}

/* radio + minimap radar */
.radio{position:fixed;left:3vw;bottom:20px;z-index:85;display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:12px;
  background:rgba(10,6,20,.88);border:1px solid var(--gold);padding:8px 12px;box-shadow:0 0 14px rgba(255,211,107,.3)}
.radio button{font-family:var(--ui);font-size:12px;letter-spacing:.06em;padding:4px 8px;border:1px solid var(--teal);color:var(--teal)}
.radio .eq{display:flex;gap:2px;align-items:flex-end;height:14px}
.radio .eq i{width:3px;background:var(--pink);height:30%}
.radio.on .eq i{animation:eq .6s infinite alternate}
.radio .eq i:nth-child(2){animation-delay:.15s}.radio .eq i:nth-child(3){animation-delay:.3s}.radio .eq i:nth-child(4){animation-delay:.45s}
@keyframes eq{to{height:100%}}
.minimap{position:fixed;right:3vw;bottom:20px;z-index:85;width:96px;height:96px;border-radius:50%;
  border:3px solid #1a1000;outline:2px solid var(--gold);
  background:radial-gradient(circle,#1a3a2e,#0a0614);overflow:hidden;box-shadow:0 0 18px rgba(255,211,107,.4)}
.minimap .sweep{position:absolute;inset:0;background:conic-gradient(from 0deg,rgba(31,214,200,.5),transparent 28%);animation:sweep 3s linear infinite}
@keyframes sweep{to{transform:rotate(360deg)}}
.minimap .dot{position:absolute;width:8px;height:8px;border-radius:50%;background:var(--pink);box-shadow:0 0 8px var(--pink)}
.minimap .me{left:50%;top:50%;width:0;height:0;border:6px solid transparent;border-bottom:12px solid #fff;transform:translate(-50%,-70%);position:absolute}
.minimap .prog{position:absolute;inset:-3px;border-radius:50%}
.gator-rain{position:fixed;top:-80px;z-index:120;pointer-events:none;width:60px;height:60px;border-radius:50%;object-fit:cover}

/* memes page */
.page-top{padding:150px 0 40px;text-align:center;
  background:linear-gradient(180deg,#4a1568 0%,#c43a7a 40%,var(--bg) 100%)}
.page-top h1{font-family:var(--display);font-weight:400;font-size:clamp(64px,12vw,140px);letter-spacing:.03em;
  text-shadow:0 4px 0 #2a0b3f,var(--glow);line-height:.9;text-transform:uppercase}
.page-top p{font-family:var(--mono);color:var(--teal);letter-spacing:.18em;margin-top:10px}

/* ---------- X community drop: hero snaps ---------- */
.snaps{display:flex;gap:14px;margin-top:34px;padding-right:26%;position:relative;z-index:2}
.snap{flex:1;min-width:0;background:linear-gradient(180deg,#fff8ee,#f0e0c8);padding:6px 6px 26px;position:relative;
  box-shadow:0 14px 30px rgba(0,0,0,.5);transition:transform .3s}
.snap img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;object-position:center;display:block}
.snap span{position:absolute;bottom:3px;left:0;right:0;text-align:center;font-family:var(--script);color:#b01060;font-size:17px;line-height:1.2}
.snap.s1{transform:rotate(-6deg)}.snap.s2{transform:rotate(3deg) translateY(10px)}.snap.s3{transform:rotate(-2deg)}
.snap:hover{transform:rotate(0) scale(1.08);z-index:3}

/* ---------- photo reel strip ---------- */
.reel{position:relative;overflow:hidden;padding:34px 0 26px;background:linear-gradient(180deg,var(--bg),#1a0a2e 50%,var(--bg));display:grid;gap:14px}
.reel::before,.reel::after{content:"";position:absolute;top:0;bottom:0;width:8vw;z-index:2;pointer-events:none}
.reel::before{left:0;background:linear-gradient(90deg,var(--bg),transparent)}
.reel::after{right:0;background:linear-gradient(-90deg,var(--bg),transparent)}
.reel-row{overflow:hidden}
.reel-track{display:flex;gap:14px;width:max-content;animation:mq 70s linear infinite}
.reel-row:nth-child(2) .reel-track{animation-direction:reverse;animation-duration:80s}
.reel:hover .reel-track{animation-play-state:paused}
.rf{flex:none;width:clamp(170px,19vw,250px);aspect-ratio:4/3;overflow:hidden;border:2px solid rgba(255,211,107,.3);background:#160d2a;
  box-shadow:0 0 0 1px rgba(0,0,0,.6),0 10px 24px rgba(0,0,0,.45)}
.rf:nth-child(3n+2){border-color:rgba(255,61,154,.45)}.rf:nth-child(3n){border-color:rgba(31,214,200,.4)}
.rf img{width:100%;height:100%;object-fit:cover;object-position:center;filter:saturate(1.15);opacity:0;transition:opacity .6s}
.rf img.ld{opacity:1}

/* ---------- vibe panels ---------- */
#vibes{background:radial-gradient(ellipse at 20% 0%,rgba(139,61,255,.18),transparent 55%),radial-gradient(ellipse at 90% 90%,rgba(255,61,154,.14),transparent 50%),var(--bg)}
.vibes{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:clamp(150px,15vw,200px);gap:16px}
.vibe{position:relative;overflow:hidden;border:2px solid rgba(255,211,107,.3);background:#10081c;box-shadow:0 18px 40px rgba(0,0,0,.45)}
.vibe video,.vibe img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;display:block;transition:transform .8s}
.vibe:hover video,.vibe:hover img{transform:scale(1.04)}
.vibe::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(0deg,rgba(10,6,20,.85),transparent 45%),repeating-linear-gradient(0deg,rgba(0,0,0,.12) 0 2px,transparent 2px 4px)}
.vibe figcaption{position:absolute;left:14px;right:14px;bottom:12px;z-index:2;font-family:var(--display);font-size:clamp(20px,2.2vw,30px);letter-spacing:.04em;line-height:1;color:#fff;text-shadow:0 2px 0 #2a0b3f}
.vtag{position:absolute;top:12px;left:12px;z-index:2;font-family:var(--mono);font-size:11px;letter-spacing:.18em;padding:4px 8px;background:rgba(0,0,0,.55);border:1px solid var(--pink);color:#fff;display:flex;align-items:center;gap:6px}
.vtag i{width:8px;height:8px;border-radius:50%;background:#ff2d55;box-shadow:0 0 8px #ff2d55;animation:blink 1s infinite}
.vibe.still .vtag{border-color:var(--gold);color:var(--gold)}
.v-a{grid-column:span 2;grid-row:span 2;border-color:var(--pink);box-shadow:0 0 30px rgba(255,61,154,.35),0 18px 40px rgba(0,0,0,.45)}
.v-b{grid-column:span 2}
.v-c,.v-d{grid-column:span 1}
.v-e{grid-column:span 1;grid-row:span 2}
.v-f{grid-column:span 3;grid-row:span 2;border-color:var(--teal)}

/* ---------- community wall ---------- */
#crew{background:linear-gradient(180deg,var(--bg),#170b29 50%,var(--bg))}
.xwall{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;grid-auto-flow:dense}
.xi{position:relative;border:2px solid rgba(255,211,107,.22);background:#10081c;overflow:hidden;text-align:left;padding:0;display:block}
.xi img{width:100%;aspect-ratio:4/3;height:auto;object-fit:cover;object-position:center;transition:transform .5s,filter .3s;display:block}
.xi.wide{grid-column:span 2;grid-row:span 2}
.xi.wide img{height:100%;aspect-ratio:auto;position:absolute;inset:0}
.xi:hover{border-color:var(--pink);box-shadow:var(--glow)}
.xi:hover img{transform:scale(1.06);filter:saturate(1.25)}
.xi figcaption{position:absolute;left:0;right:0;bottom:0;padding:22px 10px 8px;font-family:var(--mono);font-size:12px;color:#fff;
  background:linear-gradient(0deg,rgba(10,6,20,.9),transparent);opacity:0;transform:translateY(6px);transition:.3s}
.xi:hover figcaption,.xi:focus-visible figcaption{opacity:1;transform:none}
.xi .n{position:absolute;top:8px;left:8px;z-index:2;font-family:var(--ui);font-size:12px;letter-spacing:.06em;padding:2px 7px;background:var(--gold);color:#1a1000}

@media (max-width:980px){
  .vibes{grid-template-columns:repeat(2,1fr);grid-auto-rows:200px}
  .v-a{grid-column:span 2;grid-row:span 2}.v-b,.v-f{grid-column:span 2;grid-row:span 1}.v-e{grid-row:span 1}
  .xwall{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:560px){
  .snaps{padding-right:0;gap:8px;margin-top:40px}
  .snap span{font-size:14px}
  .vibes{grid-template-columns:1fr;grid-auto-rows:210px}
  .vibes .vibe{grid-column:span 1;grid-row:span 1}
  .xwall{grid-template-columns:repeat(2,1fr);gap:10px}
  .xi figcaption{opacity:1;transform:none;font-size:11px}
  .xi.wide{grid-row:span 1;aspect-ratio:16/10}
}
@media (prefers-reduced-motion:reduce){ .rf img{opacity:1} }

/* responsive */
@media (max-width:980px){
  .hero-in,.about{grid-template-columns:1fr}
  .hero-card{max-width:720px;margin:0 auto}
  .missions{grid-template-columns:1fr}
  .mission{min-height:280px}
  .steps{grid-template-columns:1fr 1fr}
  .live{grid-template-columns:1fr 1fr}
  .gal{grid-template-columns:repeat(2,1fr)}
  .slots{grid-template-columns:repeat(4,1fr)}
  .polaroids{height:440px}
  .tilt{aspect-ratio:3/1}
}
@media (max-width:820px){
  .nav{position:fixed;top:66px;left:0;right:0;flex-direction:column;background:rgba(10,6,20,.97);border-bottom:2px solid var(--gold);padding:10px 4vw 20px;transform:translateY(-140%);transition:transform .3s;font-size:18px}
  .nav.open{transform:none}
  .burger{display:block}
  .wanted{display:none}
}
@media (max-width:560px){
  body{font-size:17px}
  section{padding:80px 0}
  .steps{grid-template-columns:1fr}
  .gal{grid-template-columns:1fr}
  .slots{grid-template-columns:repeat(3,1fr)}
  .ca{flex-wrap:wrap}
  .ca .lbl{width:100%;justify-content:center;padding:6px}
  .ca button{border-left:0;border-top:2px solid var(--chrome2);width:100%;padding:12px}
  .btn{flex:1 1 100%;justify-content:center}
  .minimap{width:70px;height:70px}
  .radio .lbl2{display:none}
  .polaroids{height:360px}
  .stat{grid-template-columns:100px 1fr 40px}
  .title{font-size:clamp(64px,20vw,110px)}
  .palm{width:38vw}
  .tilt{aspect-ratio:3/1}
  .tilt .logo-badge{width:32%;bottom:-22%}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  [data-reveal]{opacity:1;transform:none}
}