/* PACKHUNT: deep navy, orange, cream. */
:root{
  --navy:#0b1424;--navy2:#101d33;--navy3:#172741;--ink:#f4eee4;--ink2:#b9c3d4;--ink3:#7d8aa0;
  --orange:#ff6a2b;--orange2:#ff8a55;--orange3:#c8491a;--gold:#e5b454;--green:#58d38b;--red:#ff5c5c;
  --line:#ffffff14;--line2:#ffffff22;
  --sans:"Outfit",system-ui,-apple-system,"Segoe UI",sans-serif;--mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
  --r:18px;--r2:12px;
}
*{box-sizing:border-box}
html{scrollbar-color:#2b3a55 var(--navy);scrollbar-width:thin}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-track{background:var(--navy)}
*::-webkit-scrollbar-thumb{background:#2b3a55;border-radius:99px;border:2px solid var(--navy)}
*::-webkit-scrollbar-thumb:hover{background:var(--orange3)}
html,body{margin:0;padding:0;background:var(--navy);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased}
body{min-height:100vh;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
img{display:block;max-width:100%}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.01em}

/* nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:14px 20px;pointer-events:none}
.nav>*{pointer-events:auto}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.04em;font-size:15px}
.brand img{width:30px;height:30px;object-fit:contain}
.nav-links{display:flex;gap:6px;align-items:center;background:#0b142499;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--line);border-radius:999px;padding:5px}
.nav-links a,.nav-links button{padding:8px 14px;border-radius:999px;font-size:14px;color:var(--ink2);transition:background .2s,color .2s}
.nav-links a:hover,.nav-links button:hover{background:#ffffff10;color:var(--ink)}
.nav-links a.on{background:#ffffff14;color:var(--ink)}
.nav-links .cta{background:var(--orange);color:#1a0d05;font-weight:700}
.nav-links .cta:hover{background:var(--orange2);color:#1a0d05}
.wallet-pill{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;font-family:var(--mono);font-size:12.5px;color:var(--ink)}
.wallet-pill .dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 10px var(--green)}
@media(max-width:720px){.nav{padding:10px 12px}.nav-links a:not(.cta):not(.keep){display:none}.brand span{display:none}}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 22px;border-radius:999px;font-weight:700;font-size:15px;transition:transform .15s,background .2s,box-shadow .2s;white-space:nowrap}
.btn:active{transform:scale(.97)}
.btn-orange{background:var(--orange);color:#1a0d05;box-shadow:0 10px 30px -10px #ff6a2b99}
.btn-orange:hover{background:var(--orange2)}
.btn-ghost{background:#ffffff10;border:1px solid var(--line2);color:var(--ink)}
.btn-ghost:hover{background:#ffffff18}
.btn[disabled]{opacity:.45;cursor:not-allowed;box-shadow:none}
.btn.sm{padding:9px 14px;font-size:13.5px}

/* layout */
.wrap{width:min(1120px,calc(100% - 40px));margin:0 auto}
.section{padding:96px 0}
.section h2{font-size:clamp(28px,4vw,44px);font-weight:800;letter-spacing:-.02em;margin:0 0 10px;text-align:center}
.section .lead{color:var(--ink2);font-size:17px;text-align:center;max-width:620px;margin:0 auto 42px;line-height:1.5}
.card{background:linear-gradient(180deg,#15233b,#101c30);border:1px solid var(--line);border-radius:var(--r);padding:22px}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--orange)}
.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);background:#1a2a44;border:1px solid var(--line2);color:var(--ink);padding:12px 18px;border-radius:999px;font-size:14px;opacity:0;transition:opacity .25s,transform .25s;z-index:200;pointer-events:none;box-shadow:0 20px 50px -20px #000}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* tier colours */
.t-A{--tc:#8a96a8}.t-B{--tc:#58d38b}.t-C{--tc:#4fa9ff}.t-D{--tc:#b47cff}.t-E{--tc:#ff6a2b}.t-F{--tc:#e5b454}.t-G{--tc:#ffffff}
.tier-chip{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:999px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;background:color-mix(in srgb,var(--tc) 18%,transparent);color:var(--tc);border:1px solid color-mix(in srgb,var(--tc) 40%,transparent)}

/* a real card: image with holo sheen on the big ones */
.pcard{position:relative;aspect-ratio:591/1000;border-radius:4.5%/3.3%;overflow:hidden;background:#0a0f1a;box-shadow:0 20px 50px -20px #000,0 0 0 1px #ffffff12}
.pcard img{width:100%;height:100%;object-fit:cover}
.pcard.holo::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,#ffffff2e 45%,#ff6a2b22 50%,#4fa9ff22 55%,transparent 70%);background-size:250% 250%;animation:holo 3.2s linear infinite;mix-blend-mode:screen;pointer-events:none}
@keyframes holo{0%{background-position:0% 50%}100%{background-position:100% 50%}}

/* pull rows */
.pull{display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line)}
.pull:last-child{border-bottom:0}
.pull .fan{display:flex}
.pull .fan .pcard{width:44px;margin-right:-14px;transform:rotate(-6deg)}
.pull .fan .pcard:nth-child(2){transform:rotate(0);z-index:1}
.pull .fan .pcard:nth-child(3){transform:rotate(6deg);margin-right:0}
.pull .who{font-size:15px}
.pull .who small{display:block;color:var(--ink3);font-size:13px;margin-top:2px}
.pull .usd{font-family:var(--mono);font-size:16px;color:var(--ink)}
.empty{color:var(--ink3);text-align:center;padding:36px 0;font-size:15px}

footer{padding:40px 0 60px;color:var(--ink3);font-size:13.5px;border-top:1px solid var(--line);margin-top:40px}
footer .wrap{display:flex;flex-wrap:wrap;gap:18px 28px;align-items:center;justify-content:space-between}
footer a{color:var(--ink2)}footer a:hover{color:var(--ink)}

/* 3D tilt on hover: the card follows the pointer, a glare slides across it, its shadow moves the other way */
.tilt{transform-style:preserve-3d;transform:perspective(1200px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateZ(0);transition:box-shadow .3s;will-change:transform;box-shadow:calc(var(--shx,0) * 1px) calc(var(--shy,20) * 1px) 50px -20px #000,0 0 0 1px #ffffff12}
.tilt::before{content:"";position:absolute;inset:0;z-index:3;border-radius:inherit;pointer-events:none;background:linear-gradient(var(--ga,115deg),transparent 35%,#ffffff 50%,transparent 65%);opacity:calc(var(--glare,0) * .35);mix-blend-mode:screen;transition:opacity .25s}
.tilt.on{box-shadow:calc(var(--shx,0) * 1px) calc(var(--shy,20) * 1px) 60px -18px #000,0 0 0 1px #ffffff2a,0 0 40px -10px color-mix(in srgb,var(--tc,#4fa9ff) 45%,transparent)}
/* leaving for the map: content falls away, the globe is lifted above it and animated in app.js */
body.warping main{pointer-events:none}
body.warping .hero>.badge,body.warping .hero>.wordmark,body.warping .hero>.hero-line,body.warping .hero>.hero-cta,body.warping .hero>.hero-stage,body.warping .nav,body.warping #how{animation:fallAway .5s cubic-bezier(.4,0,.8,1) forwards}
@keyframes fallAway{to{opacity:0;transform:scale(.97) translateY(14px)}}
body.warping .hero-astro{animation:none}
body.warping .earth-wrap.lift{z-index:600;overflow:visible}
#mapFrame{position:fixed;inset:0;width:100%;height:100%;border:0;z-index:550;opacity:0;pointer-events:none;transition:opacity .5s;background:#060b16;overflow:hidden}
body.map-open{overflow:hidden!important}   /* no page scrollbar under the map; the page keeps its scroll position so the globe does not jump */
body.warping #space{animation:spaceDim 2.5s ease forwards}
@keyframes spaceDim{to{opacity:.55}}
/* arriving on the map: it is already in place, it only needs to come up */
body.arrive .hud{animation:hudIn .8s ease-out 1.6s both}
@keyframes hudIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}