@import url('https://fonts.googleapis.com/css2?family=Bangers&family=Inter:wght@400;500;600;700;800;900&display=swap');

:root{
  --green:#39c83f;--lime:#b7f34a;--lime-2:#8fe233;
  --deep:#07150b;--ink:#0a130d;--cream:#f4ead1;--paper:#d7c69d;--muted:#aeb9a7;
  --line:rgba(255,255,255,.12);--shadow:#0b270f;
  --display:'Bangers',Impact,sans-serif;--body:Inter,Arial,sans-serif;
  --outline:-2px -2px 0 #06130a,2px -2px 0 #06130a,-2px 2px 0 #06130a,2px 2px 0 #06130a,0 -2px 0 #06130a,0 2px 0 #06130a,-2px 0 0 #06130a,2px 0 0 #06130a;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:hidden}
body{margin:0;background:var(--deep);color:#f8f8ef;font-family:var(--body);overflow-x:hidden;width:100%}
img{max-width:100%}

.grain{position:fixed;inset:0;pointer-events:none;z-index:60;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E")}

/* ---------- NAV ---------- */
.nav{position:fixed;z-index:50;top:0;left:0;right:0;height:84px;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(18px,5vw,64px);transition:height .3s,background .3s,box-shadow .3s;background:linear-gradient(180deg,rgba(4,12,7,.55),rgba(4,12,7,0))}
.nav.scrolled{height:66px;background:rgba(6,16,9,.82);backdrop-filter:blur(14px);box-shadow:0 1px 0 rgba(183,243,74,.14),0 10px 40px rgba(0,0,0,.45)}
.brand{display:flex;align-items:center;gap:12px;color:#fff;text-decoration:none}
.brand-logo{position:relative;width:44px;height:44px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;background:conic-gradient(from 0deg,var(--lime),var(--green),var(--lime));padding:2px;box-shadow:0 0 18px rgba(183,243,74,.45)}
.brand-logo img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}
.brand-name{display:flex;flex-direction:column;font-family:var(--display);font-size:22px;line-height:.9;letter-spacing:.04em}
.brand-name small{font-family:var(--body);font-size:8px;letter-spacing:.28em;color:var(--lime);font-weight:800;margin-top:3px}
.nav-links{display:flex;gap:6px}
.nav-links a{position:relative;color:#dce5d9;text-decoration:none;font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:9px 15px;border-radius:999px;transition:.2s}
.nav-links a:hover{color:#08100a;background:var(--lime)}
.nav-buy,.btn{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-size:12px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.nav-buy{background:var(--lime);color:#08100a;padding:12px 20px;border-radius:999px;border:2px solid #06130a;box-shadow:0 4px 0 #06130a,0 8px 20px rgba(183,243,74,.3);transition:.15s}
.nav-buy:hover{transform:translateY(2px);box-shadow:0 2px 0 #06130a,0 6px 16px rgba(183,243,74,.5)}
.arr{transition:transform .2s}
.btn:hover .arr,.nav-buy:hover .arr{transform:translate(2px,-2px)}

/* ---------- HERO ---------- */
.hero{position:relative;min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:120px 8vw 70px;overflow:hidden}
.hero-bg{position:absolute;inset:0;background-image:url('assets/bg-green.png');background-size:cover;background-position:center;transform:scale(1.06);filter:saturate(1.05)}
.hero-glow{position:absolute;top:-10%;right:-5%;width:70vw;height:70vw;max-width:900px;max-height:900px;background:radial-gradient(circle,rgba(140,226,51,.35) 0%,rgba(57,200,63,.12) 40%,transparent 68%);pointer-events:none;animation:pulse 7s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.75;transform:scale(1)}50%{opacity:1;transform:scale(1.08)}}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(3,11,6,.92) 0%,rgba(3,11,6,.6) 45%,rgba(3,11,6,.25) 100%),radial-gradient(circle at 70% 40%,transparent 0,rgba(0,0,0,.5) 100%)}
.hero-inner{position:relative;z-index:3;display:grid;grid-template-columns:1.05fr .95fr;gap:4vw;align-items:center;width:100%;margin:0 auto;max-width:1440px}
.hero-content{max-width:640px}
.eyebrow,.section-kicker{font-size:11px;letter-spacing:.22em;font-weight:900;color:var(--lime);display:flex;align-items:center;gap:10px}
.dot{width:8px;height:8px;background:var(--lime);border-radius:50%;box-shadow:0 0 16px var(--lime);animation:blink 2.4s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}
.line{height:1px;width:55px;background:var(--lime);opacity:.6}
.hero h1{font-family:var(--display);font-size:clamp(66px,8.6vw,152px);line-height:.9;letter-spacing:.02em;margin:22px 0 24px;color:#fbfdf5;text-shadow:var(--outline),7px 8px 0 rgba(0,0,0,.45)}
.hero h1 em{font-style:normal;color:var(--lime);text-shadow:var(--outline),7px 8px 0 rgba(0,0,0,.45)}
.hero-copy{max-width:540px;color:#d8e0d5;font-size:16px;line-height:1.75}

/* contract chip */
.hero-ca{display:flex;align-items:center;gap:12px;margin:26px 0 6px;max-width:560px;background:rgba(5,18,9,.7);border:1px solid rgba(183,243,74,.4);border-radius:12px;padding:10px 10px 10px 16px;backdrop-filter:blur(8px);box-shadow:0 10px 30px rgba(0,0,0,.35)}
.ca-label{font-size:9px;font-weight:900;letter-spacing:.18em;color:var(--lime);flex:0 0 auto}
.hero-ca code{flex:1;min-width:0;font-family:'Inter',monospace;font-size:13px;color:#e9f3df;letter-spacing:.02em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ca-copy{flex:0 0 auto;width:38px;height:38px;display:grid;place-items:center;border:0;border-radius:9px;background:var(--lime);color:#08100a;cursor:pointer;transition:.2s}
.ca-copy:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(183,243,74,.5)}
.ca-copy.copied{background:#2fae36;color:#fff}
.ca-copy svg{width:18px;height:18px;fill:currentColor}

.hero-actions{display:flex;gap:12px;margin:26px 0 22px;flex-wrap:wrap}
.btn{padding:16px 24px;border-radius:999px;transition:transform .2s,box-shadow .2s}
.primary{background:var(--lime);color:#08100a;border:2px solid #06130a;box-shadow:0 6px 0 #06130a,0 10px 26px rgba(183,243,74,.3)}
.primary:hover{transform:translateY(3px);box-shadow:0 3px 0 #06130a,0 8px 22px rgba(183,243,74,.5)}
.ghost{border:1px solid rgba(255,255,255,.4);color:#fff;background:rgba(0,0,0,.25)}
.ghost:hover{border-color:var(--lime);color:var(--lime);transform:translateY(-3px)}
.dark{background:#132219;color:#fff;border:1px solid var(--line)}
.dark:hover{background:#1a2e20;transform:translateY(-3px)}
.hero-meta{font-size:10px;letter-spacing:.18em;color:#c1cdbd;font-weight:800;display:flex;gap:12px;align-items:center}

/* hero visual / logo stage */
.hero-visual{display:flex;justify-content:center}
.logo-stage{position:relative;width:min(440px,80%);aspect-ratio:1;display:grid;place-items:center}
.hero-logo{position:relative;z-index:2;width:78%;aspect-ratio:1;border-radius:50%;object-fit:cover;border:4px solid rgba(11,25,13,.9);box-shadow:0 0 60px rgba(140,226,51,.45),0 30px 60px rgba(0,0,0,.5);animation:float 6s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
.ring{position:absolute;border-radius:50%;border:1px solid rgba(183,243,74,.35)}
.ring-1{inset:0;border-width:2px;border-style:dashed;animation:spin 26s linear infinite}
.ring-2{inset:9%;border-color:rgba(183,243,74,.18);animation:spin 40s linear infinite reverse}
@keyframes spin{to{transform:rotate(360deg)}}
.loyalty-badge{position:absolute;z-index:3;right:-6%;bottom:4%;width:150px;padding:16px;background:rgba(5,18,9,.8);border:1px solid rgba(183,243,74,.45);border-radius:14px;backdrop-filter:blur(12px);box-shadow:0 16px 40px rgba(0,0,0,.4);animation:float 6s ease-in-out .8s infinite}
.lb-label{font-size:8px;letter-spacing:.18em;color:#9cae9d;font-weight:800}
.lb-score{font-family:var(--display);font-size:64px;line-height:1;color:var(--lime)}
.lb-foot{font-size:8px;font-weight:800;letter-spacing:.08em;display:flex;justify-content:space-between;color:#d5ddd1}

.scroll-hint{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:4;font-size:9px;letter-spacing:.28em;font-weight:800;color:#c1cdbd;display:flex;flex-direction:column;align-items:center;gap:10px}
.scroll-hint span{width:1px;height:34px;background:linear-gradient(var(--lime),transparent);animation:drop 1.8s ease-in-out infinite}
@keyframes drop{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}50.1%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ---------- TICKER ---------- */
.ticker{overflow:hidden;background:var(--lime);color:#08100a;border-top:3px solid #08100a;border-bottom:3px solid #08100a;transform:rotate(-.6deg) scale(1.02);margin:0;position:relative;z-index:5}
.ticker-track{display:flex;width:max-content;animation:marquee 26s linear infinite;white-space:nowrap;padding:13px 0;font-family:var(--display);font-size:28px;letter-spacing:.08em}
.ticker i{font-style:normal;margin:0 28px}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ---------- SECTIONS ---------- */
.section{padding:120px 8vw;position:relative}
.about{background:linear-gradient(180deg,#0a1c0d,#0e2512)}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:8vw;margin-top:35px}
.section h2{font-family:var(--display);font-size:clamp(58px,7.2vw,112px);line-height:.94;margin:0;letter-spacing:.02em;text-shadow:var(--outline),5px 6px 0 rgba(0,0,0,.4)}
.section h2 span{color:var(--lime)}
.about-copy{font-size:17px;line-height:1.85;color:#c4d0c2;max-width:600px}
.about-copy p{margin-top:0;margin-bottom:22px}
.quote{font-family:var(--display);font-size:34px;line-height:1.05;color:var(--cream);border-left:4px solid var(--lime);padding-left:20px;margin-top:40px}

.story{background:#07120a url('assets/bg-green.png') center/cover}
.story:before{content:'';position:absolute;inset:0;background:rgba(3,12,6,.82)}
.story>*{position:relative}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:40px;margin-bottom:50px}
.section-head p{max-width:380px;color:#bac7b8;line-height:1.7}
/* cinematic timeline */
.timeline{position:relative;max-width:1180px;margin:0 auto;padding:10px 0}
.tl-spine{position:absolute;top:0;bottom:0;left:50%;width:2px;transform:translateX(-50%);background:linear-gradient(180deg,transparent,rgba(183,243,74,.55) 8%,rgba(183,243,74,.55) 92%,transparent)}
.tl-row{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:5vw;align-items:center;padding:26px 0}
.tl-row:before{content:'';position:absolute;top:50%;left:50%;width:16px;height:16px;transform:translate(-50%,-50%);border-radius:50%;background:var(--lime);border:4px solid #07120a;box-shadow:0 0 0 3px rgba(183,243,74,.35),0 0 20px rgba(183,243,74,.6);z-index:3}
.tl-row:nth-child(even) .tl-media{order:2}
.tl-row:nth-child(even) .tl-body{order:1;text-align:right}
.tl-row:nth-child(even) .tl-num{right:auto;left:18px}
.tl-media{position:relative;justify-self:center;width:fit-content;max-width:100%;border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,.14);box-shadow:0 26px 60px rgba(0,0,0,.5);transition:transform .45s,box-shadow .45s,border-color .45s}
.tl-row:nth-child(even) .tl-media{justify-self:center}
.tl-media:hover{transform:translateY(-6px);border-color:rgba(183,243,74,.55);box-shadow:0 34px 70px rgba(0,0,0,.6)}
.tl-media img{width:auto;height:auto;max-height:480px;max-width:100%;display:block;transition:transform .7s}
.tl-media:hover img{transform:scale(1.06)}
.tl-media:after{content:'';position:absolute;inset:0;background:linear-gradient(120deg,rgba(3,12,6,.5),transparent 55%)}
.tl-num{position:absolute;z-index:2;bottom:10px;right:18px;font-family:var(--display);font-size:clamp(48px,6vw,86px);line-height:.8;color:var(--lime);letter-spacing:.02em;text-shadow:var(--outline),0 6px 20px rgba(0,0,0,.7)}
.tl-body{padding:6px 0}
.tl-tag{font-size:10px;font-weight:900;letter-spacing:.2em;color:var(--lime)}
.tl-body h3{font-family:var(--display);font-size:clamp(38px,4.6vw,66px);line-height:.92;letter-spacing:-.01em;margin:12px 0 16px}
.tl-body p{margin:0;color:#c7d2c4;line-height:1.7;font-size:15px;max-width:440px}
.tl-row:nth-child(even) .tl-body p{margin-left:auto}

.transition{min-height:540px;position:relative;display:flex;align-items:center;padding:90px 8vw;overflow:hidden}
.transition-bg{position:absolute;inset:0;background:linear-gradient(90deg,rgba(3,12,6,.94),rgba(3,12,6,.25)),url('assets/bg-warm.png') center/cover}
.transition-content{position:relative;max-width:720px}
.transition h2{font-family:var(--display);font-size:clamp(75px,10vw,150px);line-height:.78;margin:22px 0 0}
.transition h3{font-family:var(--display);font-size:clamp(55px,7vw,100px);line-height:.9;margin:8px 0 28px;color:#f0e4c5}
.transition h3 span{color:var(--lime)}
.transition p{max-width:560px;line-height:1.7;color:#d1d8cf}

.token{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:70px;align-items:center;background:#f0e6ce;color:#101a12}
.token-art,.token-panel{min-width:0}
.token .section-kicker{color:#136017}
.token-art{display:flex;justify-content:center;align-items:end;min-height:520px;background:linear-gradient(135deg,#b3ec49,#55c942);border:4px solid #0b190d;border-radius:16px;box-shadow:14px 14px 0 #0b190d;overflow:hidden}
.token-art img{width:80%;max-width:520px;filter:drop-shadow(10px 15px 0 rgba(0,0,0,.18));transition:transform .5s}
.token-art:hover img{transform:scale(1.04) translateY(-6px)}
.token-panel h2{font-family:var(--display);font-size:clamp(34px,10vw,170px);line-height:.82;margin:25px 0 5px}
.tagline{font-weight:900;letter-spacing:.2em;color:#15631b}
.token-panel>p:not(.tagline){line-height:1.75;color:#33402f;max-width:540px}
.contract{display:flex;align-items:center;gap:14px;border:2px solid #172218;border-radius:10px;background:#fff5dc;padding:12px;margin:25px 0;max-width:560px}
.contract span{font-size:9px;font-weight:900;letter-spacing:.15em}
.contract code{flex:1;min-width:0;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.contract button{border:0;background:#172218;color:#fff;width:36px;height:36px;border-radius:7px;display:grid;place-items:center;cursor:pointer;transition:.2s}
.contract button:hover{background:#1d7b25}
.contract button.copied{background:#2fae36}
.contract button svg{width:17px;height:17px;fill:currentColor}
.token-actions{display:flex;gap:10px;flex-wrap:wrap}

.community{background:#07150b url('assets/bg-green.png') center/cover;min-height:480px;display:flex;align-items:center;padding-top:100px;padding-bottom:100px}
.community:before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(3,12,6,.92),rgba(3,12,6,.4))}
.community-inner{position:relative;max-width:700px}
.community h2{font-size:clamp(40px,12vw,180px);margin:22px 0}
.community p{color:#c4d0c3;line-height:1.75;max-width:560px}
.socials{display:flex;gap:12px;margin-top:30px}
.socials a{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font-size:11px;font-weight:900;letter-spacing:.12em;border:1px solid rgba(255,255,255,.3);border-radius:999px;padding:14px 22px;transition:.2s}
.socials a:hover{background:var(--lime);color:#08100a;border-color:var(--lime);transform:translateY(-3px)}
.socials svg{width:18px;height:18px;fill:currentColor}

footer{display:flex;justify-content:space-between;align-items:center;padding:28px 8vw;background:#040a06;color:#899789;font-size:9px;font-weight:800;letter-spacing:.12em}
.footer-brand{display:flex;align-items:center;gap:8px;color:#fff}
.footer-brand img{width:30px;height:30px;object-fit:cover;border-radius:50%;border:1px solid var(--lime)}

/* ---------- REVEAL ---------- */
.reveal{opacity:0;transform:translateY(34px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}*{animation:none!important}}

/* ---------- RESPONSIVE ---------- */
@media(max-width:1040px){
  .hero-inner{grid-template-columns:1fr;gap:40px}
  .hero-visual{order:-1}
  .logo-stage{width:min(320px,70%)}
  .hero-content{max-width:none}
}
@media(max-width:900px){
  .nav-links{display:none}
  .hero{min-height:auto;padding:120px 6vw 70px}
  .scroll-hint{display:none}
  .about-grid,.token{grid-template-columns:1fr}
  .tl-spine{left:20px}
  .tl-row{grid-template-columns:1fr;gap:22px;padding:30px 0 30px 52px}
  .tl-row:before{left:20px}
  .tl-row:nth-child(even) .tl-media{order:0}
  .tl-row:nth-child(even) .tl-body{order:0;text-align:left}
  .tl-row:nth-child(even) .tl-body p{margin-left:0}
  .tl-row:nth-child(even) .tl-num{left:auto;right:18px}
  .tl-media{width:auto;justify-self:stretch}
  .tl-media img{width:100%;max-height:none}
  .section{padding:90px 6vw}
  .section-head{display:block}
  .section-head p{margin-top:25px}
  .token-art{min-height:400px}
  .token-panel h2{font-size:110px}
  footer{flex-direction:column;gap:15px;align-items:flex-start}
  .hero h1{font-size:88px}
}
@media(max-width:560px){
  .nav{padding:0 16px}.nav-buy{padding:10px 14px;font-size:10px}
  .brand-name{font-size:18px}
  .hero{padding-left:5vw;padding-right:5vw}
  .hero h1{font-size:62px}
  .hero-copy{font-size:14px}
  .hero-ca{flex-wrap:wrap}
  .hero-ca code{font-size:11px;flex-basis:100%;order:3}
  .hero-actions,.token-actions,.socials{flex-direction:column;align-items:stretch}
  .btn,.socials a{justify-content:center}
  .ticker-track{font-size:22px}
  .section h2{font-size:64px}
  .token-panel h2{font-size:clamp(34px,10vw,90px)}
  .community h2{font-size:clamp(40px,12vw,100px)}
  .quote{font-size:28px}
  .token-art{min-height:350px}
  .loyalty-badge{width:120px;right:-2%}
  .lb-score{font-size:50px}
}

/* ============ LOADER ============ */
body:not(.ready){overflow:hidden}
.loader{position:fixed;inset:0;z-index:100;display:grid;place-items:center;background:radial-gradient(circle at 50% 38%,#0e2512,#040c06 72%);transition:opacity .7s ease,visibility .7s}
.loader.hide{opacity:0;visibility:hidden}
.loader-inner{position:relative;display:flex;flex-direction:column;align-items:center;gap:20px}
.loader-flame{position:absolute;top:6px;left:50%;transform:translateX(-50%);width:180px;height:200px;background:radial-gradient(circle at 50% 78%,rgba(183,243,74,.5),rgba(57,200,63,.14) 45%,transparent 70%);filter:blur(14px);animation:flame 1.7s ease-in-out infinite;pointer-events:none}
.loader-logo{position:relative;width:132px;height:132px;display:grid;place-items:center}
.loader-logo img{width:100%;height:100%;border-radius:50%;object-fit:cover;border:3px solid rgba(11,25,13,.9);box-shadow:0 0 55px rgba(140,226,51,.6);animation:ldpulse 1.6s ease-in-out infinite}
.loader-ring{position:absolute;inset:-15px;border-radius:50%;border:3px solid transparent;border-top-color:var(--lime);border-right-color:var(--lime);animation:spin 1s linear infinite}
.loader-name{font-family:var(--display);font-size:46px;letter-spacing:.06em;color:#fbfdf5;text-shadow:var(--outline),4px 5px 0 rgba(0,0,0,.4)}
.loader-bar{width:230px;height:6px;border-radius:999px;background:rgba(255,255,255,.12);overflow:hidden}
.loader-bar span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--green),var(--lime));box-shadow:0 0 14px var(--lime);transition:width .35s ease}
.loader-tip{font-size:10px;letter-spacing:.3em;font-weight:800;color:var(--lime)}
@keyframes ldpulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@keyframes flame{0%,100%{transform:translateX(-50%) scaleY(1);opacity:.7}50%{transform:translateX(-50%) scaleY(1.22);opacity:1}}
body.ready .nav,body.ready main,body.ready footer{animation:fadeup .8s both}
@keyframes fadeup{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* ============ GREEN EMBERS + LOGO FLAME ============ */
.embers{position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none}
.ember{position:absolute;bottom:-12px;border-radius:50%;background:radial-gradient(circle,#e0ff8f,#7bd42e);box-shadow:0 0 10px 2px rgba(160,240,80,.55);animation-name:rise;animation-timing-function:linear;animation-iteration-count:infinite}
@keyframes rise{0%{transform:translateY(0) translateX(0) scale(.7);opacity:0}12%{opacity:1}88%{opacity:.9}100%{transform:translateY(-96vh) translateX(26px) scale(1);opacity:0}}
.logo-flame{position:absolute;z-index:0;bottom:0;left:50%;transform:translateX(-50%);width:88%;height:88%;background:radial-gradient(circle at 50% 72%,rgba(183,243,74,.5),rgba(57,200,63,.16) 46%,transparent 70%);filter:blur(20px);animation:flame 3.2s ease-in-out infinite;pointer-events:none}

/* ============ ROADMAP ============ */
.roadmap{background:linear-gradient(180deg,#0e2512,#0a1c0d)}
.roadmap-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.phase{position:relative;background:rgba(6,18,9,.72);border:1px solid rgba(183,243,74,.22);border-radius:16px;padding:24px;box-shadow:0 18px 42px rgba(0,0,0,.35);transition:transform .3s,border-color .3s,box-shadow .3s}
.phase:hover{transform:translateY(-8px);border-color:rgba(183,243,74,.6);box-shadow:0 28px 58px rgba(0,0,0,.5)}
.phase-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.phase-num{font-family:var(--display);font-size:42px;line-height:1;color:var(--lime);letter-spacing:.02em;text-shadow:var(--outline)}
.phase-tag{font-size:9px;font-weight:900;letter-spacing:.16em;padding:6px 11px;border-radius:999px;border:1px solid rgba(183,243,74,.4);color:var(--lime)}
.phase-tag.live{background:var(--lime);color:#08130a;border-color:var(--lime);box-shadow:0 0 16px rgba(183,243,74,.5)}
.phase h3{font-family:var(--display);font-size:31px;letter-spacing:.02em;margin:0 0 15px}
.phase ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.phase li{position:relative;padding-left:20px;color:#c7d2c4;font-size:13px;line-height:1.5}
.phase li:before{content:'';position:absolute;left:0;top:6px;width:8px;height:8px;border-radius:50%;background:var(--lime);box-shadow:0 0 8px var(--lime)}
.phase a,.faq-item p a{color:var(--lime);font-weight:700;text-decoration:underline;text-underline-offset:2px}
.phase a:hover,.faq-item p a:hover{color:#d4ff7a}

/* ============ FAQ ============ */
.faq{background:#07130a}
.faq-list{max-width:900px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.faq-item{background:rgba(6,18,9,.72);border:1px solid rgba(255,255,255,.1);border-radius:12px;overflow:hidden;transition:border-color .3s,box-shadow .3s}
.faq-item[open]{border-color:rgba(183,243,74,.5);box-shadow:0 12px 30px rgba(0,0,0,.3)}
.faq-item summary{list-style:none;cursor:pointer;padding:20px 22px;font-weight:800;font-size:16px;color:#eef5e8;display:flex;align-items:center;justify-content:space-between;gap:14px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:hover{color:var(--lime)}
.faq-x{position:relative;flex:0 0 auto;width:18px;height:18px}
.faq-x:before,.faq-x:after{content:'';position:absolute;top:50%;left:50%;background:var(--lime);border-radius:2px;transition:.25s}
.faq-x:before{width:16px;height:2.5px;transform:translate(-50%,-50%)}
.faq-x:after{width:2.5px;height:16px;transform:translate(-50%,-50%)}
.faq-item[open] .faq-x:after{transform:translate(-50%,-50%) rotate(90deg);opacity:0}
.faq-item p{margin:0;padding:2px 22px 22px;color:#b9c6b7;line-height:1.7;font-size:14px;max-width:740px}

@media(max-width:900px){
  .roadmap-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
  .roadmap-grid{grid-template-columns:1fr}
  .loader-name{font-size:38px}
  .loader-logo{width:112px;height:112px}
  .faq-item summary{font-size:14px;padding:16px 18px}
}