/* ============================================
   SCREEN-READER ONLY
   ============================================ */
.sr-only{
    position:absolute;width:1px;height:1px;
    padding:0;margin:-1px;overflow:hidden;
    clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* ============================================
   PRELOADER
   ============================================ */
.preloader{
    position:fixed;inset:0;z-index:99999;
    background:#1a4a90;
    display:flex;align-items:center;justify-content:center;
    transition:opacity .5s,visibility .5s;
}
.preloader.done{opacity:0;visibility:hidden;pointer-events:none}
.pre-inner{text-align:center}
.pre-img{
    width:80px;height:80px;object-fit:contain;
    margin:0 auto 16px;
    animation:preBounce 1s ease-in-out infinite;
}
@keyframes preBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.pre-text{
    font-family:'Modak',cursive;font-size:28px;
    color:#fff;-webkit-text-stroke:1.5px #000;text-shadow:0 4px 0 #000;
    margin-bottom:20px;
}
.pre-bar{
    width:200px;height:8px;
    background:rgba(255,255,255,.15);
    border-radius:4px;overflow:hidden;
    margin:0 auto;
}
.pre-fill{
    width:0;height:100%;
    background:#1bb554;
    border-radius:4px;
    transition:width .12s;
}

/* ============================================
   VERTICAL NAV
   ============================================ */
.vnav{
    position:fixed;right:16px;top:50%;transform:translateY(-50%);
    z-index:9990;
    display:flex;flex-direction:column;gap:14px;
    opacity:0;transition:opacity .4s;
    pointer-events:none;
}
.vnav.visible{opacity:1;pointer-events:auto}
.vnav-dot{
    position:relative;
    width:12px;height:12px;border-radius:50%;
    background:rgba(255,255,255,.3);
    border:2px solid rgba(255,255,255,.5);
    transition:all .3s;
}
.vnav-dot.active{
    background:#1bb554;border-color:#1bb554;
    box-shadow:0 0 8px rgba(27,181,84,.5);
    transform:scale(1.3);
}
.vnav-dot:hover{background:rgba(255,255,255,.6)}
.vnav-dot span{
    position:absolute;right:22px;top:50%;transform:translateY(-50%);
    font-family:'Anton',sans-serif;font-size:12px;letter-spacing:1px;
    color:#fff;white-space:nowrap;
    opacity:0;transition:opacity .2s;
    pointer-events:none;
    text-shadow:0 1px 3px rgba(0,0,0,.5);
}
.vnav-dot:hover span{opacity:1}

/* ============================================
   NIGHT MODE TOGGLE
   ============================================ */
.night-toggle{
    position:fixed;top:16px;right:16px;z-index:9990;
    width:44px;height:44px;border-radius:50%;
    background:rgba(0,0,0,.3);border:2px solid rgba(255,255,255,.2);
    display:flex;align-items:center;justify-content:center;
    color:#fff;transition:all .3s;
    backdrop-filter:blur(4px);
}
.night-toggle:hover{background:rgba(0,0,0,.5);border-color:rgba(255,255,255,.4)}
.nt-moon{display:none}
html.night .nt-sun{display:none}
html.night .nt-moon{display:block}

/* ============================================
   NIGHT MODE OVERRIDES
   ============================================ */
html.night .bg-sky{
    background:linear-gradient(180deg,
        #0a0e1a 0%,
        #0d1225 30%,
        #111833 50%,
        #0f1528 70%,
        #0a0e1a 100%
    );
}
html.night .cld{background:#1a1f35;border-color:#2a2f45}
html.night .cld::before,html.night .cld::after{background:#1a1f35;border-color:#2a2f45;border-bottom-color:#1a1f35}
html.night body{background:#0a0e1a}
html.night .ticker{background:#05080f}
html.night .ground-layer{background:linear-gradient(180deg,transparent 0%,#1a2810 30%,#0f1a08 100%)}
html.night .foot-inner{background:#1a0e08}

/* ============================================
   PARTICLES CANVAS
   ============================================ */
.particles{
    position:fixed;inset:0;z-index:4;
    pointer-events:none;
}

/* ============================================
   STARS CANVAS (night mode)
   ============================================ */
.stars{
    position:fixed;inset:0;z-index:1;
    pointer-events:none;
    opacity:0;transition:opacity .5s;
}
html.night .stars{opacity:1}

/* ============================================
   CURSOR SPARKLE CANVAS
   ============================================ */
.cursor-sparkle{
    position:fixed;inset:0;z-index:99998;
    pointer-events:none;
}

/* ============================================
   FAQ
   ============================================ */
.zone-faq{
    padding:60px 20px 80px;
    max-width:700px;margin:0 auto;width:100%;
}
.faq-list{
    display:flex;flex-direction:column;gap:12px;width:100%;
}
.faq-item{
    background:rgba(0,0,0,.35);
    border:3px solid #000;border-radius:16px;
    box-shadow:0 0 0 3px #000,0 5px 0 0 #000;
    overflow:hidden;
}
.faq-q{
    width:100%;text-align:left;
    padding:18px 24px;
    font-family:'Anton',sans-serif;font-size:clamp(14px,2vw,18px);
    letter-spacing:1px;color:#fff;
    display:flex;align-items:center;justify-content:space-between;
    transition:color .2s;
}
.faq-q::after{
    content:'+';font-size:22px;color:#1bb554;
    transition:transform .3s;flex-shrink:0;margin-left:12px;
}
.faq-item.open .faq-q::after{transform:rotate(45deg)}
.faq-item.open .faq-q{color:#ffdd00}
.faq-a{
    max-height:0;overflow:hidden;
    transition:max-height .4s ease,padding .4s ease;
    padding:0 24px;
}
.faq-item.open .faq-a{
    max-height:200px;
    padding:0 24px 18px;
}
.faq-a p{
    font-size:clamp(12px,1.5vw,14px);line-height:1.6;
    color:rgba(255,255,255,.7);
}

/* ============================================
   FILM GRAIN OVERLAY
   ============================================ */
.world::after{
    content:'';
    position:fixed;inset:0;
    z-index:9998;
    pointer-events:none;
    opacity:0.3;
    mix-blend-mode:multiply;
    background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size:128px 128px;
    animation:grainShift 0.4s steps(3) infinite;
}
@keyframes grainShift{
    0%{transform:translate(0,0)}
    33%{transform:translate(-2px,1px)}
    66%{transform:translate(1px,-1px)}
    100%{transform:translate(-1px,2px)}
}

/* ============================================
   RESET
   ============================================ */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}
.lenis.lenis-scrolling iframe{pointer-events:none}
html{overflow-x:hidden}
body{font-family:'Inter',sans-serif;color:#1a1a1a;overflow-x:hidden;background:#1a4a90}
html.custom-cursor,html.custom-cursor *{cursor:none!important}
img{display:block;max-width:100%}
a{text-decoration:none;color:inherit}
button{cursor:pointer;border:none;background:none;font-family:inherit}

/* CURSOR MASCOT */
.cursor-mascot{
    position:fixed;
    left:0;top:0;
    width:48px;height:48px;
    pointer-events:none;
    z-index:99999;
    filter:drop-shadow(2px 2px 0 #000);
    opacity:0;
}
.cursor-mascot img{width:100%;height:100%;object-fit:contain}

/* ============================================
   WORLD – one continuous scene
   ============================================ */
.world{
    position:relative;
    min-height:100vh;
}

/* ---- SKY (fixed background, parallax via JS) ---- */
.bg-sky{
    position:fixed;top:0;left:0;right:0;
    height:120vh;
    background:linear-gradient(180deg,
        #d0ecfa 0%,
        #8ec8f0 12%,
        #4a9ee0 30%,
        #2878cc 50%,
        #1e5eaa 70%,
        #1a4a90 100%
    );
    z-index:0;
    will-change:transform;
}

/* ---- CLOUD LAYERS (fixed, parallax) ---- */
.bg-clouds-far,.bg-clouds-mid,.bg-clouds-near{
    position:fixed;top:0;left:0;right:0;
    height:120vh;
    pointer-events:none;
    will-change:transform;
}
.bg-clouds-far{z-index:1}
.bg-clouds-mid{z-index:2}
.bg-clouds-near{z-index:3}

/* Cloud shapes */
.cld{
    position:absolute;
    background:#fff;
    border:3px solid #000;
    border-radius:100px;
}
.cld::before,.cld::after{
    content:'';position:absolute;
    background:#fff;border:3px solid #000;border-radius:50%;
    border-bottom-color:#fff;
}

/* Far clouds */
.cld-a{width:260px;height:55px;top:4%;left:2%;opacity:.6}
.cld-a::before{width:90px;height:78px;top:-48px;left:35px}
.cld-a::after{width:115px;height:85px;top:-52px;left:100px}
.cld-b{width:200px;height:45px;top:1%;right:8%;opacity:.5}
.cld-b::before{width:70px;height:62px;top:-38px;left:28px}
.cld-b::after{width:95px;height:70px;top:-42px;left:78px}
.cld-c{width:160px;height:40px;top:10%;left:40%;opacity:.4}
.cld-c::before{width:60px;height:52px;top:-32px;left:22px}
.cld-c::after{width:78px;height:58px;top:-36px;left:65px}

/* Mid clouds */
.cld-d{width:300px;height:65px;top:16%;left:-5%}
.cld-d::before{width:110px;height:92px;top:-56px;left:45px}
.cld-d::after{width:140px;height:100px;top:-62px;left:120px}
.cld-e{width:240px;height:55px;top:14%;right:-2%}
.cld-e::before{width:85px;height:72px;top:-44px;left:32px}
.cld-e::after{width:110px;height:82px;top:-50px;left:95px}

/* Near clouds */
.cld-f{width:320px;height:70px;top:28%;left:-8%}
.cld-f::before{width:115px;height:95px;top:-58px;left:50px}
.cld-f::after{width:150px;height:108px;top:-66px;left:130px}
.cld-g{width:280px;height:62px;top:25%;right:-6%}
.cld-g::before{width:98px;height:82px;top:-50px;left:40px}
.cld-g::after{width:130px;height:92px;top:-56px;left:110px}

/* ---- CONTENT (scrolls normally, above BG) ---- */
.content{
    position:relative;
    z-index:5;
}

/* ---- ZONES (no backgrounds – sky shows through) ---- */
.zone{
    position:relative;
    display:flex;flex-direction:column;
    align-items:center;justify-content:center;
    width:100%;
}

/* ============================================
   HERO ZONE
   ============================================ */
.zone-hero{
    min-height:100vh;min-height:100dvh;
    padding:0 20px;
    overflow:visible;
}

.hero-char{
    position:relative;
    width:clamp(300px,45vw,560px);
    filter:drop-shadow(8px 8px 0 #000);
    opacity:0;
    z-index:2;
    margin-top:8vh;
}

.hero-reel{
    position:absolute;
    top:10%;left:4%;
    width:clamp(120px,16vw,220px);
    background:#000;
    border:3px solid #000;border-radius:18px;
    box-shadow:0 0 0 3px #000,0 8px 0 0 #000;
    overflow:hidden;
    opacity:0;z-index:3;
    transform:rotate(-6deg) scale(.6) translateY(30px);
}
.hero-reel video{
    width:100%;display:block;border-radius:15px;
}

.hero-letters{
    position:relative;z-index:5;
    display:flex;gap:clamp(1px,.8vw,8px);
    margin-top:-20px;
}
.hl{
    font-family:'Modak',cursive;
    font-size:clamp(52px,12vw,140px);
    color:#fff;
    -webkit-text-stroke:clamp(2px,.4vw,4px) #000;
    text-shadow:0 8px 0 #000,0 0 40px rgba(0,0,0,.25);
    display:inline-block;
    opacity:0;transform:scale(0);
    line-height:1;
}

.hero-cta{
    position:relative;z-index:5;
    display:inline-block;
    margin-top:16px;
    font-family:'Modak',cursive;font-size:clamp(22px,4vw,36px);
    color:#fff;-webkit-text-stroke:1.5px #000;text-shadow:0 4px 0 #000;
    background:#1bb554;
    border:3px solid #000;border-radius:50px;
    padding:14px clamp(32px,6vw,64px);
    box-shadow:0 0 0 3px #000,0 9px 0 0 #000;
    transition:transform .15s,box-shadow .15s;
    opacity:0;transform:translateY(20px);
}
.hero-cta:hover{transform:translateY(-4px);box-shadow:0 0 0 3px #000,0 13px 0 0 #000}
.hero-cta:active{transform:translateY(4px);box-shadow:0 0 0 3px #000,0 4px 0 0 #000}

.deco{
    position:absolute;
    width:clamp(28px,4.5vw,50px);height:auto;
    opacity:0;transform:scale(0) rotate(30deg);
    z-index:3;pointer-events:none;
}
.d1{top:25%;left:16%}
.d2{top:18%;right:28%}
.d3{bottom:30%;left:8%}
.d4{bottom:25%;right:12%}

/* ============================================
   TICKER
   ============================================ */
.ticker{
    background:#001115;
    border-top:3px solid #000;border-bottom:3px solid #000;
    overflow:hidden;padding:12px 0;
    width:100%;
}
.ticker-track{
    display:flex;
    animation:tickerScroll 20s linear infinite;
    width:max-content;
}
.ticker-track span{
    font-family:'Anton',sans-serif;font-size:18px;letter-spacing:3px;
    color:#ffdd00;white-space:nowrap;padding:0 30px;
}
.ticker-track span::after{
    content:'';display:inline-block;width:10px;height:10px;
    background:#1bb554;border-radius:50%;margin-left:30px;vertical-align:middle;
}
@keyframes tickerScroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* ============================================
   STORY / NEWSPAPER
   ============================================ */
.zone-story{
    padding:80px 20px 60px;
}
.paper-wrap{
    position:relative;
    width:min(780px,92vw);
    display:flex;align-items:center;justify-content:center;
}
.paper-book{
    perspective:1800px;
    width:min(700px,85vw);
    aspect-ratio:1.5/1;
}
.paper-stage{position:relative;width:100%;height:100%;transform-style:preserve-3d}
.pg{
    position:absolute;inset:0;width:50%;left:50%;
    transform-origin:left center;transform-style:preserve-3d;
    transition:transform .8s cubic-bezier(.645,.045,.355,1);
    cursor:pointer;
}
.pg.flipped{transform:rotateY(-180deg)}
.pg-f,.pg-b{
    position:absolute;inset:0;backface-visibility:hidden;
    border:3px solid #000;border-radius:8px;
    padding:24px 20px;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    text-align:center;overflow:hidden;
}
.pg-f{background:linear-gradient(170deg,#fff9ee,#f5e6d3);box-shadow:inset 0 0 30px rgba(0,0,0,.04),4px 4px 0 #000;z-index:2}
.pg-b{background:linear-gradient(170deg,#f5e6d3,#eddcc6);box-shadow:inset 0 0 30px rgba(0,0,0,.06);transform:rotateY(180deg)}
.cv-h1{font-family:'Modak',cursive;font-size:clamp(28px,5vw,48px);color:#ffdd00;-webkit-text-stroke:2px #000;text-shadow:0 5px 0 #000}
.cv-h2{font-family:'Anton',sans-serif;font-size:clamp(16px,3vw,28px);letter-spacing:4px;margin-top:4px}
.cv-rule{width:60%;height:3px;background:#000;margin:12px auto;border-radius:2px}
.cv-body{font-size:clamp(11px,1.6vw,14px);line-height:1.5;max-width:90%;color:#444;margin-top:8px}
.cv-img{margin-top:16px}
.cv-img img{width:clamp(60px,12vw,100px);margin:0 auto;border:3px solid #000;border-radius:50%;box-shadow:0 0 0 3px #000,0 6px 0 0 #000}
.cv-cta{margin-top:8px;font-family:'Anton',sans-serif;font-size:11px;letter-spacing:2px;color:#888;animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
.pg-title{font-family:'Anton',sans-serif;font-size:clamp(16px,3vw,24px);letter-spacing:2px;margin-bottom:10px}
.pg-text{font-size:clamp(11px,1.5vw,14px);line-height:1.6;color:#444;max-width:90%}
.pg-big{font-family:'Modak',cursive;font-size:clamp(24px,5vw,42px);color:#ffdd00;-webkit-text-stroke:2px #000;text-shadow:0 5px 0 #000;line-height:1.3}
.pg-imgf{padding:0;display:flex;align-items:center;justify-content:center;background:#001115}
.pg-fimg{width:100%;height:100%;object-fit:cover}
.pn{
    position:absolute;top:50%;transform:translateY(-50%);
    width:48px;height:48px;border-radius:50%;
    background:#fff;border:3px solid #000;box-shadow:0 0 0 3px #000,0 6px 0 0 #000;
    display:flex;align-items:center;justify-content:center;
    z-index:20;transition:transform .15s,box-shadow .15s;
}
.pn:hover{transform:translateY(-50%) scale(1.1);box-shadow:0 0 0 3px #000,0 8px 0 0 #000}
.pn:active{transform:translateY(-46%) scale(.97);box-shadow:0 0 0 3px #000,0 3px 0 0 #000}
.pn-l{left:-28px}.pn-r{right:-28px}

/* ============================================
   BUY ZONE
   ============================================ */
.zone-buy{
    padding:60px 20px 80px;
    position:relative;
}
.buy-mega{
    display:inline-block;position:relative;z-index:2;
    font-family:'Modak',cursive;font-size:clamp(28px,6vw,56px);
    color:#fff;-webkit-text-stroke:2px #000;text-shadow:0 6px 0 #000;
    background:#1bb554;
    border:3px solid #000;border-radius:60px;
    padding:18px clamp(36px,8vw,80px);
    box-shadow:0 0 0 3px #000,0 9px 0 0 #000;
    transition:transform .15s,box-shadow .15s;
}
.buy-mega:hover{transform:translateY(-4px);box-shadow:0 0 0 3px #000,0 13px 0 0 #000}
.buy-mega:active{transform:translateY(4px);box-shadow:0 0 0 3px #000,0 4px 0 0 #000}
.buy-mascot{
    width:clamp(80px,12vw,140px);
    margin-top:-10px;
    filter:drop-shadow(4px 4px 0 #000);
    animation:float 3s ease-in-out infinite;
}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}

/* ============================================
   SHARED SECTION TITLE
   ============================================ */
.section-title{
    font-family:'Modak',cursive;font-size:clamp(28px,5vw,48px);
    color:#fff;-webkit-text-stroke:2px #000;text-shadow:0 6px 0 #000;
    margin-bottom:30px;text-align:center;
}

/* ============================================
   HOW TO BUY
   ============================================ */
.zone-howto{
    padding:60px 20px 80px;
    max-width:900px;margin:0 auto;width:100%;
}
.howto-steps{
    display:grid;grid-template-columns:repeat(4,1fr);gap:16px;width:100%;
}
.howto-step{
    background:rgba(0,0,0,.35);
    border:3px solid #000;border-radius:18px;
    padding:28px 20px;
    box-shadow:0 0 0 3px #000,0 7px 0 0 #000;
    text-align:center;
}
.howto-num{
    width:48px;height:48px;border-radius:50%;
    background:#1bb554;border:3px solid #000;
    box-shadow:0 0 0 3px #000,0 4px 0 0 #000;
    display:flex;align-items:center;justify-content:center;
    font-family:'Modak',cursive;font-size:22px;color:#fff;
    -webkit-text-stroke:1px #000;text-shadow:0 2px 0 #000;
    margin:0 auto 14px;
}
.howto-h{
    font-family:'Anton',sans-serif;font-size:clamp(14px,2vw,18px);
    letter-spacing:1px;color:#ffdd00;margin-bottom:8px;
}
.howto-p{
    font-size:clamp(12px,1.4vw,14px);line-height:1.5;color:rgba(255,255,255,.7);
}

/* ============================================
   TOKENOMICS
   ============================================ */
.zone-tokenomics{
    padding:60px 20px 80px;
    max-width:800px;margin:0 auto;width:100%;
}
.toke-wrap{
    display:flex;align-items:center;gap:40px;
    background:rgba(0,0,0,.35);
    border:3px solid #000;border-radius:24px;
    padding:40px;box-shadow:0 0 0 3px #000,0 7px 0 0 #000;
}
.toke-chart{
    position:relative;width:200px;height:200px;flex-shrink:0;
}
.donut{width:100%;height:100%}
.donut-seg{transition:stroke-dashoffset 1s ease}
.toke-center{
    position:absolute;inset:0;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
}
.toke-total{
    font-family:'Modak',cursive;font-size:32px;color:#fff;
    -webkit-text-stroke:1px #000;text-shadow:0 3px 0 #000;
}
.toke-label{
    font-family:'Anton',sans-serif;font-size:12px;letter-spacing:3px;
    color:rgba(255,255,255,.5);
}
.toke-legend{display:flex;flex-direction:column;gap:16px;flex:1}
.toke-item{display:flex;align-items:center;gap:12px}
.toke-dot{width:16px;height:16px;border-radius:4px;border:2px solid #000;flex-shrink:0}
.toke-pct{
    font-family:'Anton',sans-serif;font-size:22px;color:#fff;letter-spacing:1px;display:block;
}
.toke-desc{font-size:13px;color:rgba(255,255,255,.6)}
.toke-detail{
    margin-top:8px;display:grid;grid-template-columns:1fr 1fr;gap:8px;
}
.toke-fact{
    font-size:12px;color:rgba(255,255,255,.5);
    background:rgba(255,255,255,.05);border-radius:8px;padding:8px 12px;
}
.toke-fact span{color:#17f7ff;font-weight:600}

/* ============================================
   ROADMAP
   ============================================ */
.zone-roadmap{
    padding:60px 20px 80px;
    max-width:700px;margin:0 auto;width:100%;
}
.roadmap{
    position:relative;
    padding-left:32px;
}
.roadmap::before{
    content:'';position:absolute;left:11px;top:0;bottom:0;
    width:3px;background:rgba(255,255,255,.15);border-radius:2px;
}
.rm-phase{
    position:relative;
    padding:0 0 40px 28px;
}
.rm-phase:last-child{padding-bottom:0}
.rm-marker{
    position:absolute;left:-26px;top:4px;
    width:24px;height:24px;border-radius:50%;
    background:#2a2a2a;border:3px solid rgba(255,255,255,.2);
    transition:all .3s;
}
.rm-done .rm-marker{background:#1bb554;border-color:#1bb554;box-shadow:0 0 12px rgba(27,181,84,.4)}
.rm-active .rm-marker{
    background:#ffdd00;border-color:#ffdd00;
    box-shadow:0 0 12px rgba(255,221,0,.4);
    animation:rmPulse 2s ease-in-out infinite;
}
@keyframes rmPulse{0%,100%{box-shadow:0 0 12px rgba(255,221,0,.4)}50%{box-shadow:0 0 24px rgba(255,221,0,.7)}}
.rm-content{
    background:rgba(0,0,0,.35);
    border:3px solid #000;border-radius:16px;
    padding:24px;box-shadow:0 0 0 3px #000,0 5px 0 0 #000;
}
.rm-done .rm-content{border-color:rgba(27,181,84,.3)}
.rm-active .rm-content{border-color:rgba(255,221,0,.3)}
.rm-title{
    font-family:'Anton',sans-serif;font-size:clamp(16px,2.5vw,20px);
    letter-spacing:1px;color:#fff;margin-bottom:10px;
}
.rm-done .rm-title{color:#1bb554}
.rm-active .rm-title{color:#ffdd00}
.rm-list{
    list-style:none;display:flex;flex-direction:column;gap:6px;
}
.rm-list li{
    font-size:clamp(12px,1.5vw,14px);color:rgba(255,255,255,.6);
    padding-left:18px;position:relative;
}
.rm-list li::before{
    content:'';position:absolute;left:0;top:6px;
    width:8px;height:8px;border-radius:50%;
    background:rgba(255,255,255,.15);
}
.rm-done .rm-list li::before{background:#1bb554}
.rm-active .rm-list li::before{background:#ffdd00}

/* ============================================
   EXCHANGES ZONE
   ============================================ */
.zone-exchanges{
    padding:40px 20px 80px;
    max-width:750px;
    margin:0 auto;
    width:100%;
}
.ex-title{
    font-family:'Modak',cursive;font-size:clamp(28px,5vw,48px);
    color:#fff;-webkit-text-stroke:2px #000;text-shadow:0 6px 0 #000;
    margin-bottom:30px;text-align:center;
}
.ex-cards{display:flex;flex-direction:column;gap:14px;width:100%}
.ex-card{
    display:flex;align-items:center;gap:16px;
    border:3px solid #000;border-radius:18px;
    padding:20px 28px;box-shadow:0 0 0 3px #000,0 7px 0 0 #000;
    font-family:'Modak',cursive;font-size:clamp(20px,3.5vw,28px);letter-spacing:1px;color:#fff;
    transition:transform .15s,box-shadow .15s;
    -webkit-text-stroke:1px #000;text-shadow:0 3px 0 #000;
}
.ex-card:hover{transform:translateY(-4px);box-shadow:0 0 0 3px #000,0 11px 0 0 #000}
.ex-card:active{transform:translateY(3px);box-shadow:0 0 0 3px #000,0 3px 0 0 #000}
.ex-icon{
    width:44px;height:44px;border-radius:10px;
    background:#000;color:#fff;
    display:flex;align-items:center;justify-content:center;
    flex-shrink:0;
}
.ex-dexscreener{background:#c8c8c8;color:#000}
.ex-dexscreener .ex-name{color:#000;-webkit-text-stroke:0;text-shadow:0 2px 0 rgba(0,0,0,.15)}
.ex-solscan{background:#b44aff}
.ex-twitter{background:#2a2a2a}
.ex-telegram{background:#36a8e5}

/* ============================================
   FOOTER ZONE (ground)
   ============================================ */
.zone-footer{
    position:relative;
    padding:0;
}
.ground-layer{
    width:100%;height:80px;
    background:linear-gradient(180deg,transparent 0%,#3d7020 30%,#2d5518 100%);
}
.foot-inner{
    background:#543019;
    padding:50px 20px 40px;
    width:100%;text-align:center;color:#fff;
}
.ca{
    display:inline-flex;align-items:center;gap:8px;
    background:rgba(255,255,255,.06);border:3px solid rgba(255,255,255,.15);
    border-radius:50px;padding:14px 24px;cursor:pointer;
    transition:background .2s,border-color .2s;flex-wrap:wrap;justify-content:center;
}
.ca:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.3)}
.ca-l{font-family:'Anton',sans-serif;font-size:14px;letter-spacing:2px;color:rgba(255,255,255,.5)}
.ca-v{font-size:13px;word-break:break-all;color:#17f7ff;font-weight:600}
.copy-btn{
    display:inline-block;margin-top:16px;
    font-family:'Anton',sans-serif;font-size:14px;letter-spacing:1px;
    color:#000;background:#1bb554;border:3px solid #000;border-radius:50px;
    padding:12px 32px;box-shadow:0 0 0 3px #000,0 6px 0 0 #000;transition:transform .15s,box-shadow .15s;
}
.copy-btn:hover{transform:translateY(-2px);box-shadow:0 0 0 3px #000,0 8px 0 0 #000}
.copy-btn:active{transform:translateY(3px);box-shadow:0 0 0 3px #000,0 3px 0 0 #000}
.stats{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-top:32px}
.st{
    background:rgba(255,255,255,.05);border:3px solid rgba(255,255,255,.1);
    border-radius:16px;padding:14px 22px;display:flex;flex-direction:column;align-items:center;gap:4px;
    transition:border-color .2s,background .2s;
}
.st:hover{border-color:rgba(255,255,255,.25);background:rgba(255,255,255,.08)}
.st-l{font-size:11px;color:rgba(255,255,255,.4);letter-spacing:1px;text-transform:uppercase}
.st-v{font-family:'Anton',sans-serif;font-size:20px;letter-spacing:1px;color:#17f7ff}
.socials{display:flex;gap:14px;justify-content:center;margin-top:32px}
.soc{
    width:50px;height:50px;border-radius:50%;
    background:rgba(255,255,255,.06);border:3px solid rgba(255,255,255,.15);
    display:flex;align-items:center;justify-content:center;color:#fff;transition:all .2s;
}
.soc:hover{background:#1bb554;border-color:#1bb554;color:#fff;transform:scale(1.15) rotate(-5deg)}
.copy{margin-top:32px;font-size:12px;color:rgba(255,255,255,.25)}

/* ============================================
   FLOATING FIXED BUY BUTTON
   ============================================ */
.float-buy{
    position:fixed;bottom:20px;left:50%;transform:translateX(-50%);
    z-index:999;
    font-family:'Modak',cursive;font-size:18px;letter-spacing:1px;
    color:#fff;-webkit-text-stroke:1px #000;text-shadow:0 3px 0 #000;
    background:#1bb554;
    border:3px solid #000;border-radius:50px;
    padding:12px 32px;
    box-shadow:0 0 0 3px #000,0 8px 0 0 #000;
    transition:transform .15s,box-shadow .15s,opacity .3s;
    opacity:0;pointer-events:none;
}
.float-buy.visible{opacity:1;pointer-events:auto}
.float-buy:hover{transform:translateX(-50%) translateY(-3px);box-shadow:0 0 0 3px #000,0 11px 0 0 #000}
.float-buy:active{transform:translateX(-50%) translateY(3px);box-shadow:0 0 0 3px #000,0 4px 0 0 #000}

/* ============================================
   GLOW DECORATIONS (pnut-style background effects)
   ============================================ */
.zone-hero::before{
    content:'';position:absolute;
    width:clamp(300px,60vw,700px);height:clamp(300px,60vw,700px);
    background:radial-gradient(circle,rgba(27,181,84,.2) 0%,transparent 70%);
    border-radius:50%;
    top:10%;left:50%;transform:translateX(-50%);
    pointer-events:none;z-index:1;
}
.zone-buy::before{
    content:'';position:absolute;
    width:clamp(200px,50vw,500px);height:clamp(200px,50vw,500px);
    background:radial-gradient(circle,rgba(23,247,255,.15) 0%,transparent 70%);
    border-radius:50%;
    top:50%;left:50%;transform:translate(-50%,-50%);
    pointer-events:none;z-index:1;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media(max-width:768px){
    .zone-hero{min-height:100svh;min-height:100dvh;padding:0 12px}
    .hero-char{width:clamp(220px,50vw,340px);margin-top:4vh}
    .hero-reel{
        position:relative;top:auto;left:auto;
        width:clamp(160px,40vw,220px);
        margin-top:16px;transform:rotate(0) scale(.6) translateY(30px);
    }
    .hl{font-size:clamp(48px,13vw,90px);-webkit-text-stroke:2.5px #000;text-shadow:0 6px 0 #000}
    .hero-letters{margin-top:-12px}
    .hero-cta{font-size:clamp(20px,5vw,32px);padding:14px clamp(32px,8vw,56px);margin-top:16px}
    .deco{width:clamp(24px,5vw,36px)}

    /* Clouds */
    .cld-c{display:none}
    .cld-a{width:160px;height:35px}.cld-a::before{width:58px;height:50px;top:-30px;left:20px}.cld-a::after{width:75px;height:55px;top:-34px;left:62px}
    .cld-d{width:180px;height:42px}.cld-d::before{width:65px;height:56px;top:-34px;left:25px}.cld-d::after{width:88px;height:62px;top:-38px;left:72px}
    .cld-e{width:150px;height:38px}.cld-e::before{width:55px;height:48px;top:-30px;left:20px}.cld-e::after{width:72px;height:54px;top:-33px;left:60px}
    .cld-f{width:200px;height:48px}.cld-f::before{width:72px;height:60px;top:-37px;left:30px}.cld-f::after{width:95px;height:68px;top:-42px;left:82px}
    .cld-g{width:175px;height:42px}.cld-g::before{width:62px;height:52px;top:-32px;left:25px}.cld-g::after{width:82px;height:60px;top:-37px;left:70px}

    .paper-wrap{width:96vw}.paper-book{width:92vw;aspect-ratio:1.3/1}
    .pg-f,.pg-b{padding:22px 18px}
    .pg-title{font-size:clamp(18px,4vw,26px)}
    .pg-text{font-size:clamp(13px,2.5vw,16px);line-height:1.6}
    .cv-body{font-size:clamp(13px,2.5vw,15px)}
    .cv-h1{font-size:clamp(30px,7vw,44px)}
    .cv-h2{font-size:clamp(18px,4vw,26px)}
    .pg-big{font-size:clamp(28px,7vw,40px)}
    .pn{width:44px;height:44px}.pn-l{left:-16px}.pn-r{right:-16px}
    .buy-mega{font-size:clamp(28px,7vw,42px);padding:16px clamp(28px,8vw,56px)}
    .buy-mascot{width:clamp(100px,18vw,150px)}
    .howto-steps{grid-template-columns:repeat(2,1fr);gap:12px}
    .toke-wrap{flex-direction:column;padding:28px}
    .toke-chart{width:160px;height:160px}
    .toke-detail{grid-template-columns:1fr 1fr}
    .ex-cards{gap:12px}
    .ex-card{padding:18px 22px;font-size:clamp(18px,4vw,24px);border-radius:16px}
    .ex-title{font-size:clamp(28px,7vw,42px)}
    .ticker-track span{font-size:16px;padding:0 24px;letter-spacing:2px}
    .ca-l{font-size:15px}.ca-v{font-size:14px}
    .copy-btn{font-size:15px;padding:12px 30px}
    .st-l{font-size:12px}.st-v{font-size:20px}
    .soc{width:50px;height:50px}
    .copy{font-size:13px}
    .float-buy{font-size:16px;padding:10px 28px;bottom:16px}
    .vnav{right:10px;gap:12px}
    .vnav-dot{width:10px;height:10px}
    .night-toggle{width:40px;height:40px;top:12px;right:12px}
    .faq-q{padding:16px 20px;font-size:clamp(13px,2.5vw,16px)}
    .faq-item.open .faq-a{padding:0 20px 16px}
    .faq-a p{font-size:clamp(12px,2vw,14px)}
}

@media(max-width:480px){
    .zone-hero{padding:0 10px}
    .hero-char{width:clamp(200px,52vw,280px);margin-top:3vh}
    .hero-reel{width:clamp(140px,38vw,200px)}
    .hl{font-size:clamp(42px,12vw,64px);-webkit-text-stroke:2px #000;text-shadow:0 5px 0 #000}
    .hero-letters{gap:1px;margin-top:-8px}
    .hero-cta{font-size:clamp(18px,5.5vw,28px);padding:12px clamp(28px,8vw,48px);margin-top:12px}
    .deco{width:22px}
    .d1{top:22%;left:4%}.d2{top:14%;right:8%}.d3{display:none}.d4{display:none}

    .cld-b,.cld-c,.cld-e{display:none}
    .cld-a{width:120px;height:28px}.cld-a::before{width:44px;height:38px;top:-24px;left:15px}.cld-a::after{width:58px;height:42px;top:-26px;left:48px}
    .cld-d{width:140px;height:32px}.cld-d::before{width:50px;height:42px;top:-26px;left:18px}.cld-d::after{width:68px;height:48px;top:-30px;left:55px}
    .cld-f{width:150px;height:35px}.cld-f::before{width:54px;height:46px;top:-28px;left:22px}.cld-f::after{width:72px;height:52px;top:-32px;left:60px}
    .cld-g{width:130px;height:30px}.cld-g::before{width:46px;height:40px;top:-24px;left:18px}.cld-g::after{width:62px;height:46px;top:-28px;left:52px}

    .zone-story{padding:50px 8px 40px}
    .paper-book{aspect-ratio:1/1;width:96vw}
    .cv-h1{font-size:clamp(26px,7vw,36px);-webkit-text-stroke:1.5px #000}
    .cv-h2{font-size:clamp(16px,4.5vw,22px)}
    .cv-body{font-size:clamp(13px,3.5vw,15px)}
    .pg-f,.pg-b{padding:20px 16px;border-width:2px}
    .pg-title{font-size:clamp(18px,5vw,24px)}
    .pg-text{font-size:clamp(13px,3.5vw,15px);line-height:1.5}
    .pg-big{font-size:clamp(26px,7vw,36px)}
    .cv-cta{font-size:13px}
    .pn{width:42px;height:42px;border-width:2px;box-shadow:0 0 0 2px #000,0 5px 0 0 #000}.pn-l{left:-14px}.pn-r{right:-14px}
    .howto-steps{grid-template-columns:1fr 1fr;gap:10px}
    .howto-step{padding:20px 14px}
    .howto-num{width:40px;height:40px;font-size:18px}
    .toke-wrap{flex-direction:column;padding:24px;gap:24px}
    .toke-chart{width:140px;height:140px}
    .toke-total{font-size:26px}
    .roadmap{padding-left:28px}
    .rm-content{padding:18px}
    .zone-buy{padding:40px 16px 50px}
    .buy-mega{font-size:clamp(26px,7vw,38px);padding:16px clamp(28px,8vw,48px);border-width:3px}
    .buy-mascot{width:clamp(90px,20vw,130px)}
    .zone-exchanges{padding:30px 12px 50px}
    .ex-title{font-size:clamp(26px,7vw,38px);-webkit-text-stroke:1.5px #000;margin-bottom:18px}
    .ex-cards{gap:10px}
    .ex-card{padding:16px 18px;font-size:clamp(18px,4.5vw,22px);border-radius:14px}
    .ex-icon{width:38px;height:38px;border-radius:8px}
    .ground-layer{height:50px}
    .foot-inner{padding:36px 18px 36px}
    .ca{padding:14px 18px;border-radius:40px}.ca-l{font-size:15px}.ca-v{font-size:12px}
    .copy-btn{font-size:15px;padding:12px 28px}
    .stats{gap:10px;margin-top:26px}.st{padding:12px 16px}
    .st-l{font-size:12px}.st-v{font-size:18px}
    .socials{gap:14px;margin-top:24px}.soc{width:48px;height:48px}
    .ticker-track span{font-size:14px;padding:0 20px;letter-spacing:1px}
    .ticker{padding:10px 0}
    .copy{font-size:13px}
    .float-buy{font-size:15px;padding:10px 24px;bottom:14px}
    .zone-faq{padding:40px 12px 50px}
    .faq-q{padding:14px 18px;font-size:clamp(13px,3.5vw,15px)}
    .faq-item.open .faq-a{padding:0 18px 14px}
    .faq-a p{font-size:clamp(12px,3vw,14px)}
}

@media(max-width:360px){
    .hl{font-size:clamp(36px,11vw,50px)}
    .hero-char{width:clamp(180px,48vw,240px)}
    .hero-letters{margin-top:-6px}
    .hero-reel{width:clamp(120px,36vw,180px)}
    .hero-cta{font-size:clamp(16px,5vw,24px);padding:10px 24px}
    .paper-book{aspect-ratio:1/1.15}
    .howto-steps{grid-template-columns:1fr;gap:10px}
    .toke-detail{grid-template-columns:1fr}
    .buy-mega{font-size:clamp(24px,7vw,34px);padding:14px 24px}
    .ex-cards{gap:8px}
    .ex-card{padding:14px 16px;font-size:clamp(16px,5vw,20px);border-radius:12px}
    .ex-icon{width:34px;height:34px;border-radius:7px}
    .float-buy{font-size:14px;padding:9px 20px}
}