@font-face{font-family:Unbounded;src:url(assets/fonts/unbounded-900.woff2) format("woff2");font-weight:900;font-display:swap}
@font-face{font-family:Unbounded;src:url(assets/fonts/unbounded-700.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:Inter;src:url(assets/fonts/inter-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Inter;src:url(assets/fonts/inter-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:JBM;src:url(assets/fonts/jetbrains-mono-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:JBM;src:url(assets/fonts/jetbrains-mono-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}
:root{--c:#2ff3e0;--c2:#7dfff2;--tan:#e9a456;--bg:#03060c;--ink:#e8fbff;--dim:#7c96a3}
*{box-sizing:border-box}
html{background:var(--bg)}
html,body{overflow-x:clip}
body{margin:0;color:var(--ink);font-family:Inter,system-ui,sans-serif;background:radial-gradient(1200px 700px at 70% -10%,#06323a55,transparent),var(--bg)}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.mono{font-family:JBM,monospace;letter-spacing:.08em}
.wrap{width:min(1180px,92vw);margin-inline:auto}
.skip{position:absolute;left:-999px}.skip:focus{left:10px;top:10px;z-index:999;background:var(--c);color:#000;padding:8px}
#warp{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
main,footer,.nav{position:relative;z-index:2}
.grain{position:fixed;inset:-50%;z-index:90;pointer-events:none;opacity:.07;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 baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:grain 1s steps(4) infinite}
@keyframes grain{25%{transform:translate(3%,-2%)}50%{transform:translate(-2%,3%)}75%{transform:translate(2%,2%)}}
/* cursor */
.cursor{position:fixed;left:0;top:0;width:34px;height:34px;margin:-17px 0 0 -17px;border:1.5px solid var(--c);border-radius:50%;z-index:100;pointer-events:none;opacity:0;transition:width .2s,height .2s,margin .2s;box-shadow:0 0 14px var(--c)}
.cursor span{position:absolute;left:50%;top:50%;width:5px;height:5px;margin:-2.5px;background:var(--c);border-radius:50%}
.cursor.big{width:64px;height:64px;margin:-32px 0 0 -32px}
@media (hover:hover) and (pointer:fine){body.has-cursor .cursor{opacity:1}}
/* preloader */
#preloader{position:fixed;inset:0;z-index:200;background:#000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;transition:opacity .6s,visibility .6s}
body:not(.loading) #preloader{opacity:0;visibility:hidden}
.pl-ring{position:relative;width:200px;height:200px}
.pl-ring svg{position:absolute;inset:0;transform:rotate(-90deg);filter:drop-shadow(0 0 10px var(--c))}
.pl-track{fill:none;stroke:#0d3036;stroke-width:6}.pl-bar{fill:none;stroke:var(--c);stroke-width:6;stroke-linecap:round;stroke-dasharray:553;stroke-dashoffset:553}
.pl-dog{position:absolute;left:50%;top:50%;width:120px;transform:translate(-50%,-50%)}
.pl-num{text-align:center;font-family:Unbounded;font-weight:900;font-size:56px;color:var(--c);text-shadow:0 0 20px var(--c)}
.pl-num small{display:block;font:12px JBM,monospace;letter-spacing:.3em;color:var(--dim)}
/* nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:14px 4vw;background:linear-gradient(#03060ccc,#03060c00);backdrop-filter:blur(6px);transition:transform .35s}
.nav.hide{transform:translateY(-110%)}
.brand{display:flex;align-items:center;gap:10px;font-family:Unbounded;font-weight:900;font-style:italic;font-size:18px}
.brand b{color:var(--c)}
.nav-links{display:flex;gap:26px;font-size:14px;color:var(--dim)}.nav-links a:hover{color:var(--c)}
.nav-cta{display:flex;gap:10px;align-items:center}
.icon-btn{width:40px;height:40px;display:grid;place-items:center;border:1px solid #1f4b52;border-radius:12px}
.icon-btn svg{width:18px;height:18px}
[data-link].disabled{opacity:.45;cursor:not-allowed;pointer-events:auto}
@media(max-width:900px){.nav-links{display:none}}
/* buttons */
.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 26px;border-radius:999px;font-family:Unbounded;font-weight:700;font-size:15px;letter-spacing:.02em;cursor:pointer;transition:transform .2s,box-shadow .2s;white-space:nowrap}
.btn.sm{padding:10px 16px;font-size:13px}
.btn-buy{background:linear-gradient(100deg,var(--c),#a5fff6,var(--c));background-size:200%;color:#001215;box-shadow:0 0 0 1px #9ffff5 inset,0 8px 30px #2ff3e055;animation:shim 3s linear infinite}
.btn-buy img{border-radius:50%;background:#fff}
.btn-ghost{border:1.5px solid var(--c);color:var(--c);background:#061a1d88}
.btn:hover{transform:translateY(-2px) skewX(-6deg);box-shadow:0 0 30px #2ff3e099}
@keyframes shim{to{background-position:-200% 0}}
.soon-tag{font-size:10px;border:1px solid currentColor;border-radius:6px;padding:1px 5px;margin-left:4px}
/* hero */
.hero{position:relative;height:100vh;height:100svh;min-height:640px}
.hero-pin{position:relative;height:100%;overflow:hidden;display:flex;align-items:center}
.hero-word{position:absolute;left:50%;top:50%;transform:translate(-50%,-55%);font-family:Unbounded;font-weight:900;font-style:italic;font-size:min(27vw,420px);color:transparent;-webkit-text-stroke:2px #2ff3e055;white-space:nowrap;letter-spacing:-.04em;pointer-events:none}
.portal{position:absolute;right:8vw;top:50%;width:min(46vw,640px);aspect-ratio:1;transform:translateY(-50%)}
.portal i{position:absolute;inset:0;border-radius:50%;border:3px solid var(--c);box-shadow:0 0 40px var(--c),inset 0 0 40px var(--c);animation:spin 9s linear infinite}
.portal i:nth-child(2){inset:7%;border-style:dashed;opacity:.5;animation-duration:14s;animation-direction:reverse}
.portal i:nth-child(3){inset:-6%;border-width:1px;opacity:.3;animation:pulse 2.4s ease-out infinite}
@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse{from{transform:scale(.9);opacity:.6}to{transform:scale(1.15);opacity:0}}
.speedlines{position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 120px,#2ff3e012 120px 122px);mask:linear-gradient(90deg,transparent,#000 40%,transparent)}
.hero-banner{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.16;mix-blend-mode:screen}
.hero-dog{position:absolute;right:11vw;top:50%;width:min(40vw,560px);transform:translateY(-50%);filter:drop-shadow(0 0 30px #2ff3e077);animation:float 4s ease-in-out infinite}
@keyframes float{50%{translate:0 -18px}}
.hero-side{position:absolute;width:150px;filter:drop-shadow(0 0 16px #2ff3e055)}
.hero-side.l{left:44%;bottom:6%;width:130px}.hero-side.r{right:3vw;bottom:5%;width:160px}
.hero-copy{position:relative;z-index:3;padding-left:6vw;max-width:640px}
.kicker{color:var(--c);font-size:12px;margin:0 0 14px}
.title{font-family:Unbounded;font-weight:900;font-style:italic;font-size:clamp(54px,9vw,140px);line-height:.9;margin:0 0 18px;letter-spacing:-.03em;perspective:600px}
.title .split{display:inline-block;color:#fff;text-shadow:0 0 30px #2ff3e099}
.title .tan{color:var(--tan);text-shadow:0 0 30px #e9a45677}
.title .ch{display:inline-block;transform-origin:50% 100%}
.sub{color:#b5ced6;font-size:18px;line-height:1.55;max-width:500px}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin:26px 0}
.ca-box{display:flex;align-items:center;gap:12px;border:1px solid #1f4b52;background:#041215cc;border-radius:16px;padding:8px 8px 8px 16px;max-width:520px}
.ca-box.wide{max-width:none}
.ca-box .lbl{color:var(--c);font-size:12px}
.ca-text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:JBM,monospace;font-size:14px}
.shimmer{background:linear-gradient(90deg,var(--c),#fff,var(--tan),var(--c));background-size:300%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shim 4s linear infinite}
.copy-btn{display:inline-flex;align-items:center;gap:6px;border:0;border-radius:12px;padding:10px 14px;background:var(--c);color:#001215;font:700 13px JBM,monospace;cursor:pointer}
.copy-btn svg{width:15px;height:15px}.copy-btn.small{margin-top:12px}
@media(max-width:900px){
 .hero{min-height:0}
 .hero-pin{align-items:flex-start;padding-top:84px}
 .hero-copy{padding:0 5vw}
 .hero-dog{right:-4vw;top:auto;bottom:4%;width:62vw;transform:none}
 .portal{right:-8vw;top:auto;bottom:0;width:78vw;transform:none}
 .hero-side{display:none}
 .sub{font-size:15px}.cta-row{margin:16px 0}
 .hero-word{top:72%;font-size:34vw}
}
/* ribbon */
.ribbon{position:relative;z-index:3;background:var(--c);color:#001215;transform:rotate(-2deg);margin:40px -2vw;overflow:hidden;box-shadow:0 0 40px #2ff3e077}
.ribbon-track{display:flex;gap:40px;width:max-content;padding:14px 0;font-family:Unbounded;font-weight:900;font-style:italic;font-size:26px;animation:marq 22s linear infinite}
.ribbon-track b{color:transparent;-webkit-text-stroke:1.5px #001215}
@keyframes marq{to{transform:translateX(-50%)}}
/* drive */
.drive{position:relative;height:100vh;height:100svh}
.drive-pin{position:relative;height:100%;overflow:hidden;display:grid;place-items:center}
.drive-ring{position:absolute;width:min(70vw,620px);aspect-ratio:1}
.drive-ring i{position:absolute;inset:0;border-radius:50%;border:6px solid var(--c);box-shadow:0 0 60px var(--c),inset 0 0 60px var(--c)}
.drive-ring i:nth-child(2){inset:12%;border-width:2px;opacity:.5}
.drive-tunnel{position:absolute;inset:-20%;background:repeating-conic-gradient(from 0deg,#2ff3e018 0 2deg,transparent 2deg 9deg);mask:radial-gradient(circle,transparent 15%,#000 60%);opacity:0}
.dpose{position:absolute;width:min(42vw,420px);filter:drop-shadow(0 0 30px #2ff3e088);opacity:0}
.dpose.p1{opacity:1}
.meter{position:absolute;right:5vw;top:18%;width:220px;border:1px solid #1f4b52;background:#03101299;border-radius:18px;padding:16px;backdrop-filter:blur(6px)}
.meter p{margin:0;font-size:11px;color:var(--dim)}
.meter-val{font-family:Unbounded;font-weight:900;font-style:italic;font-size:44px;color:var(--c);text-shadow:0 0 18px var(--c)}
.meter-bar{height:8px;background:#0a2a2e;border-radius:9px;overflow:hidden;margin:8px 0}
.meter-bar span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--tan),var(--c))}
.drive-copy{position:absolute;left:5vw;bottom:10%;max-width:520px}
.drive-steps{display:flex;flex-direction:column;gap:6px;font-family:JBM,monospace;color:var(--dim)}
.drive-steps .on{color:var(--c)}
.h2{font-family:Unbounded;font-weight:900;font-style:italic;font-size:clamp(30px,5vw,64px);line-height:1.02;margin:0 0 20px;letter-spacing:-.02em}
.h2 em{color:var(--c);font-style:inherit;text-shadow:0 0 24px #2ff3e088}
@media(max-width:900px){.meter{top:12%;right:4vw;width:160px}.meter-val{font-size:30px}.dpose{width:70vw}.drive-copy{bottom:6%}}
/* about */
section.about,.howto,.tokenomics,.chart,.community{padding:110px 0}
.about .h2.words{font-size:clamp(24px,3.4vw,46px);line-height:1.2}
.words .w{display:inline-block;opacity:.15;transition:opacity .2s}
.about-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:50px}
.glass{border:1px solid #1f4b52;background:linear-gradient(160deg,#0a2a2f88,#03080c88);border-radius:24px;padding:26px}
.glass img{width:110px;height:110px;object-fit:contain}
.glass h3,.step h3{font-family:Unbounded;font-weight:700;margin:12px 0 6px}.glass p,.step p{color:#a9c3cb;line-height:1.5;margin:0}
@media(max-width:800px){.about-grid{grid-template-columns:1fr}}
/* gallery */
.gallery{position:relative}
.gal-pin{position:relative;height:100vh;height:100svh;overflow:hidden;display:flex;flex-direction:column;justify-content:center}
.gal-head{position:relative;z-index:2}.gal-hint{color:var(--dim);font-size:12px}
.gal-speed{position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,transparent 0 26px,#2ff3e010 26px 27px),linear-gradient(90deg,transparent,#2ff3e008);opacity:.8}
.gal-speed::before,.gal-speed::after{content:"";position:absolute;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--c),transparent);top:30%;animation:zip 1.1s linear infinite;opacity:.5}
.gal-speed::after{top:72%;animation-duration:.8s}
@keyframes zip{from{transform:translateX(100%)}to{transform:translateX(-100%)}}
.gal-viewport{position:relative;height:min(46vh,400px)}
.gal-track{position:absolute;left:0;top:0;height:100%;display:flex;gap:44px;padding-left:8vw;will-change:transform}
.card{position:relative;flex:0 0 auto;height:100%;aspect-ratio:1;border-radius:26px;overflow:visible;cursor:zoom-in;border:0;padding:0;background:none;will-change:transform}
.card .inner{position:absolute;inset:0;border-radius:26px;overflow:hidden;border:2px solid #2ff3e088;box-shadow:0 0 30px #2ff3e044}
.card img{width:100%;height:100%;object-fit:cover}
.card .tag{position:absolute;left:12px;bottom:12px;background:#000c;color:var(--c);font:700 11px JBM,monospace;padding:6px 10px;border-radius:8px;letter-spacing:.1em}
.card .blur{position:absolute;top:10%;bottom:10%;right:100%;width:120px;background:linear-gradient(90deg,transparent,#2ff3e033);filter:blur(6px);border-radius:40px;opacity:var(--blur,0)}
.card .shadow{position:absolute;left:15%;right:15%;bottom:-34px;height:14px;border-radius:50%;background:#2ff3e033;filter:blur(6px)}
.race{position:relative;height:130px;margin-top:40px}
.race-line{position:absolute;left:0;right:0;bottom:18px;height:3px;background:linear-gradient(90deg,#2ff3e000,var(--c),#2ff3e0);box-shadow:0 0 18px var(--c)}
.race-line::after{content:"";position:absolute;left:0;right:0;top:8px;height:1px;background:repeating-linear-gradient(90deg,#2ff3e066 0 30px,transparent 30px 60px)}
.race-dog{position:absolute;bottom:14px;left:0;width:150px;filter:drop-shadow(0 0 14px #2ff3e099);will-change:transform}
.race-flag{position:absolute;right:3vw;bottom:30px;font-size:11px;color:#001215;background:repeating-conic-gradient(#fff 0 25%,#000 0 50%) 0 0/12px 12px;padding:14px 8px}
.paws{position:absolute;inset:0}
.paw{position:absolute;bottom:26px;width:16px;height:16px;opacity:.8;color:var(--c);animation:pawfade 1.6s forwards}
@keyframes pawfade{to{opacity:0;transform:scale(.6)}}
@media(max-width:900px){
 .gal-pin{height:auto;padding:90px 0 40px}
 .gal-viewport{height:min(70vw,300px);overflow-x:auto;overflow-y:visible;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-top:20px;box-sizing:content-box}
 .gal-viewport::-webkit-scrollbar{display:none}
 .gal-track{position:relative;height:calc(100% - 20px);gap:22px;padding-left:5vw}
 .race{height:100px;margin-top:30px}.race-dog{width:110px}
}
/* how to */
.progress{position:relative;height:80px;margin:10px 0 30px}
.progress-line{position:absolute;left:0;right:0;bottom:10px;height:4px;background:#0c2b30;border-radius:4px;overflow:hidden}
.progress-line span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--tan),var(--c));box-shadow:0 0 16px var(--c)}
#progDog{position:absolute;bottom:8px;left:0;width:80px}
.steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.step{border:1px solid #1f4b52;border-radius:22px;padding:24px;background:#04101399;position:relative;overflow:hidden}
.step .num{font-size:40px;font-weight:700;color:transparent;-webkit-text-stroke:1px var(--c)}
.step .btn{margin-top:12px}
@media(max-width:900px){.steps{grid-template-columns:1fr 1fr}}@media(max-width:560px){.steps{grid-template-columns:1fr}}
/* tokenomics */
.tk-card{display:grid;grid-template-columns:300px 1fr;gap:50px;align-items:center;border:1px solid #1f4b52;border-radius:32px;padding:44px;background:linear-gradient(140deg,#072a2f,#020608);transform-style:preserve-3d;transition:transform .15s}
.tk-logo{width:280px;border-radius:50%;filter:drop-shadow(0 0 40px #2ff3e088);animation:spin 30s linear infinite}
.pills{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:22px}
.pill{border:1px solid #2ff3e055;border-radius:999px;padding:12px 20px;background:#00000055}
.pill small{display:block;color:var(--dim);font:11px JBM,monospace;letter-spacing:.1em;text-transform:uppercase}.pill b{font-family:Unbounded}
.scam{color:var(--tan);font-size:12px;margin-top:14px}
@media(max-width:900px){.tk-card{grid-template-columns:1fr;padding:24px;gap:20px}.tk-logo{width:160px;margin:auto}.pills{grid-template-columns:1fr 1fr}}
/* chart */
.chart-frame{position:relative;height:560px;border:1px solid #1f4b52;border-radius:24px;overflow:hidden;background:#020608}
.chart-frame iframe{width:100%;height:100%;border:0}
.chart-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:radial-gradient(circle,#06262b,#020608);color:var(--c)}
.chart-overlay.off{display:none}
/* community */
.community{display:grid;grid-template-columns:320px 1fr;gap:40px;align-items:center}
.comm-dog{width:300px;filter:drop-shadow(0 0 30px #2ff3e066)}
@media(max-width:800px){.community{grid-template-columns:1fr}.comm-dog{width:200px;margin:auto}}
.footer{text-align:center;padding:50px 0 130px;color:var(--dim);font-size:12px}.footer img{margin:auto;width:110px}
.dim{opacity:.6}
/* mobile bar */
.mbar{display:none}
@media(max-width:900px){.mbar{position:fixed;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));z-index:60;display:flex;gap:8px;padding:8px;border-radius:20px;background:#031012ee;border:1px solid #1f4b52;backdrop-filter:blur(8px)}.mbar>*{flex:1;justify-content:center}}
/* lightbox */
.lightbox{position:fixed;inset:0;z-index:150;background:#000e;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:14px}
.lightbox[hidden]{display:none}
.lightbox img{max-width:min(86vw,760px);max-height:78vh;border-radius:20px;border:2px solid var(--c);box-shadow:0 0 60px #2ff3e066}
.lb-close,.lb-nav{position:absolute;background:#031012;border:1px solid var(--c);color:var(--c);width:48px;height:48px;border-radius:50%;font-size:28px;cursor:pointer}
.lb-close{top:20px;right:20px}.lb-nav.prev{left:3vw}.lb-nav.next{right:3vw}
#lbCap{color:var(--c)}
.toast{position:fixed;left:50%;bottom:100px;transform:translate(-50%,30px);opacity:0;z-index:160;background:var(--c);color:#001215;font:700 13px JBM,monospace;padding:12px 18px;border-radius:12px;transition:.3s;pointer-events:none}
.toast.show{opacity:1;transform:translate(-50%,0)}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.words .w{opacity:1}}
/* static fallback (no GSAP or reduced motion) */
.static .gal-viewport{overflow-x:auto}
.static .gal-pin{height:auto;padding:100px 0 40px}
.static .gal-track{position:relative}
.static .drive{height:auto}.static .drive-pin{height:100vh}
.title{font-size:clamp(50px,7.4vw,124px)}
.title .split{white-space:nowrap}
.hero-copy{max-width:min(700px,52vw)}
@media(max-width:900px){.hero-copy{max-width:none}}
@media(max-width:560px){.nav-cta .icon-btn{display:none}.brand{font-size:16px}}