/* ==========================================================================
   LOOONGJEAN — matrix / trading-terminal theme
   ========================================================================== */

:root{
  --black: #050806;
  --black-2: #0a100c;
  --green: #39ff6a;
  --green-2: #22e05c;
  --green-soft: #7dffb0;
  --green-deep: #0c2b12;
  --green-deeper: #071f0d;
  --cream: #efe4cf;
  --gold: #c9954f;
  --white: #f6f7f2;
  --text-dim: #9db8a6;

  --font-display: 'Archivo Black', 'Arial Black', sans-serif;
  --font-mono: 'Space Mono', 'Courier New', monospace;
  --font-body: 'Manrope', sans-serif;

  --container: 1180px;
  --radius: 14px;
  --ease: cubic-bezier(.16,.84,.44,1);
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: auto; }
html.has-smooth-scroll{ scroll-behavior: smooth; }

body{
  margin:0;
  background: var(--black);
  color: var(--white);
  font-family: var(--font-body);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }
button{ font-family: inherit; cursor:pointer; }
section{ position: relative; z-index: 2; }

::selection{ background: var(--green); color: var(--black); }

/* scrollbar */
::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background: var(--black); }
::-webkit-scrollbar-thumb{ background: var(--green-deep); border-radius: 10px; border: 2px solid var(--black); }

/* ---------- fixed backdrop layers ---------- */
#matrixRain{
  position: fixed; inset:0; width:100%; height:100%;
  z-index:0; opacity:.5; pointer-events:none;
}
.grid-overlay{
  position: fixed; inset:0; z-index:1; pointer-events:none;
  background-image:
    linear-gradient(rgba(57,255,106,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(57,255,106,.05) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 20%, black 40%, transparent 90%);
}
.scanline-overlay{
  position: fixed; inset:0; z-index:5; pointer-events:none;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.09) 0px, rgba(0,0,0,.09) 1px, transparent 2px, transparent 4px);
  opacity:.35;
  mix-blend-mode: multiply;
}
.vignette-overlay{
  position: fixed; inset:0; z-index:1; pointer-events:none;
  background: radial-gradient(ellipse 80% 65% at 50% 30%, transparent 40%, rgba(0,0,0,.55) 100%);
}

/* ==========================================================================
   PRELOADER
   ========================================================================== */
#preloader{
  position: fixed; inset:0; z-index: 9999;
  display:flex; flex-direction: column; align-items:center; justify-content:center;
  background: var(--black);
  transition: opacity .7s var(--ease), visibility .7s var(--ease);
  overflow:hidden;
}
#preloader.is-hidden{ opacity:0; visibility: hidden; pointer-events:none; }
.preloader__bg{
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 70% 60% at 50% 40%, rgba(57,255,106,.16), transparent 70%),
    var(--black);
}
.preloader__scan{
  position:absolute; left:0; right:0; height:140px;
  background: linear-gradient(180deg, transparent, rgba(57,255,106,.18), transparent);
  animation: scan-sweep 2.6s linear infinite;
}
@keyframes scan-sweep{ 0%{ top:-140px; } 100%{ top:100%; } }
.preloader__cat{
  position: relative; z-index:2;
  max-height: 52vh; width:auto;
  filter: drop-shadow(0 0 40px rgba(57,255,106,.35));
  animation: preloader-float 3s ease-in-out infinite;
}
@keyframes preloader-float{ 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-14px);} }
.preloader__wrap{ position:relative; z-index:2; margin-top:28px; width:min(320px,80vw); text-align:center; }
.preloader__ticker{ font-family: var(--font-display); color: var(--green); letter-spacing:.06em; font-size: clamp(20px,4vw,28px); margin-bottom:14px; text-shadow: 0 0 18px rgba(57,255,106,.5); }
.preloader__bar{ height:8px; border-radius:6px; background: var(--green-deeper); border:1px solid rgba(57,255,106,.35); overflow:hidden; }
.preloader__fill{ height:100%; width:0%; background: linear-gradient(90deg, var(--green-2), var(--green-soft)); box-shadow: 0 0 12px rgba(57,255,106,.7); transition: width .15s linear; }
.preloader__pct{ margin-top:10px; font-family: var(--font-mono); font-size:12px; color: var(--text-dim); letter-spacing:.08em; }

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding: 12px 22px; border-radius: 999px;
  font-family: var(--font-mono); font-weight:700; font-size:13px; letter-spacing:.03em;
  border: 1px solid var(--green); background: transparent; color: var(--green);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease), color .25s var(--ease);
  white-space: nowrap;
}
.btn__icon{ width:14px; height:14px; }
.btn--primary{
  background: linear-gradient(135deg, var(--green), var(--green-2));
  color: var(--black);
  box-shadow: 0 0 0 rgba(57,255,106,0), 0 6px 24px rgba(57,255,106,.25);
}
.btn--primary:hover{ transform: translateY(-3px); box-shadow: 0 10px 30px rgba(57,255,106,.45); }
.btn--ghost:hover{ background: rgba(57,255,106,.1); transform: translateY(-3px); box-shadow: 0 8px 22px rgba(57,255,106,.15); }
.btn--lg{ padding:16px 30px; font-size:14px; }
.btn--nav-cta{ padding:10px 18px; font-size:12px; }
.btn--footer{ flex:1 1 auto; justify-content:center; }

/* ==========================================================================
   HEADER
   ========================================================================== */
.site-header{
  position: fixed; top:0; left:0; right:0; z-index: 500;
  padding: 18px 0;
  transition: padding .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header.is-scrolled{
  padding: 10px 0;
  background: rgba(5,8,6,.82);
  border-bottom-color: rgba(57,255,106,.18);
}
.header__inner{
  max-width: var(--container); margin:0 auto; padding: 0 24px;
  width:100%;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
}
.brand{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
.brand__mark{ width:38px; height:38px; border-radius:50%; }
.brand__text{ font-family: var(--font-display); font-size:16px; letter-spacing:.02em; color: var(--white); }
.brand__accent{ color: var(--green); }

.nav{ display:flex; align-items:center; gap:26px; }
.nav__link{ font-family: var(--font-mono); font-size:13px; color: var(--text-dim); position:relative; padding: 4px 0; }
.nav__link:hover{ color: var(--green-soft); }
.nav__link::after{ content:''; position:absolute; left:0; bottom:-2px; width:0; height:1px; background: var(--green); transition: width .25s var(--ease); }
.nav__link:hover::after{ width:100%; }
.nav__socials{ display:flex; gap:8px; }
.icon-btn{
  width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(57,255,106,.4); color: var(--green-soft);
  transition: all .25s var(--ease);
}
.icon-btn svg{ width:15px; height:15px; }
.icon-btn:hover{ background: var(--green); color: var(--black); transform: translateY(-2px); box-shadow: 0 6px 18px rgba(57,255,106,.4); }

.nav-toggle{ display:none; flex-direction:column; gap:5px; background:none; border:none; padding:6px; z-index:600; }
.nav-toggle span{ width:24px; height:2px; background: var(--green); transition: all .3s var(--ease); }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  min-height: 100vh;
  display:flex; flex-direction:column; justify-content:center;
  padding: 140px 24px 80px;
  position:relative;
  overflow:hidden;
}
.hero__grid-glow{
  position:absolute; inset:0; z-index:-1;
  background: radial-gradient(ellipse 60% 55% at 72% 40%, rgba(57,255,106,.16), transparent 65%);
}
.hero__inner{
  max-width: var(--container); margin:0 auto; width:100%;
  display:grid; grid-template-columns: 1.05fr .95fr; gap:40px; align-items:center;
}
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family: var(--font-mono); font-size:12px; letter-spacing:.12em; color: var(--green-soft);
  border:1px solid rgba(57,255,106,.35); padding:6px 14px; border-radius:999px; margin-bottom: 22px;
}
.dot-live{ width:7px; height:7px; border-radius:50%; background: var(--green); box-shadow:0 0 8px var(--green); animation: pulse-dot 1.4s ease-in-out infinite; }
@keyframes pulse-dot{ 0%,100%{ opacity:1;} 50%{ opacity:.35;} }

.hero__title{
  font-family: var(--font-display);
  font-size: clamp(38px, 6vw, 74px);
  line-height: 1.02;
  margin:0 0 22px;
  color: var(--white);
}
.hero__title-stretch{ color: var(--green); display:inline-block; text-shadow: 0 0 30px rgba(57,255,106,.45); }
.o-extra{ display:inline-block; animation: stretch-o 2.6s ease-in-out infinite; }
.o-extra:nth-child(2){ animation-delay: .15s; }
@keyframes stretch-o{ 0%,100%{ transform: scaleY(1);} 50%{ transform: scaleY(1.35) translateY(-2px);} }
.hero__title-sub{ display:inline-block; margin-top:10px; font-size:.5em; color: var(--gold); letter-spacing:.04em; }

.hero__tagline{ font-size: 17px; color: var(--text-dim); max-width: 46ch; margin: 0 0 34px; line-height:1.6; }
.hero__ctas{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom: 26px; }

.ca-pill{
  display:inline-flex; align-items:center; gap:12px;
  background: rgba(12,43,18,.55); border:1px solid rgba(57,255,106,.3); border-radius: 999px;
  padding: 8px 8px 8px 18px; font-family: var(--font-mono); font-size:13px;
  backdrop-filter: blur(6px);
  max-width: 100%;
}
.ca-pill--center{ margin: 22px auto 0; }
.ca-pill__label{ color: var(--green-soft); font-weight:700; }
.ca-pill__addr{ color: var(--text-dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width: 220px; }
.ca-pill__copy{
  width:32px; height:32px; border-radius:50%; flex-shrink:0;
  background: var(--green); border:none; color: var(--black);
  display:flex; align-items:center; justify-content:center; position:relative;
  transition: transform .2s var(--ease);
}
.ca-pill__copy:hover{ transform: scale(1.08); }
.ca-pill__copy svg{ width:15px; height:15px; position:absolute; transition: opacity .2s, transform .2s; }
.icon-check{ opacity:0; transform: scale(.5); }
.ca-pill__copy.is-copied .icon-copy{ opacity:0; transform: scale(.5); }
.ca-pill__copy.is-copied .icon-check{ opacity:1; transform: scale(1); }

.hero__visual{ position:relative; display:flex; justify-content:center; perspective: 1200px; }
.hero__frame{ position:relative; width: min(420px, 90%); will-change: transform; transform-style: preserve-3d; }
.hero__cat{ position:relative; z-index:2; filter: drop-shadow(0 20px 50px rgba(0,0,0,.6)) drop-shadow(0 0 30px rgba(57,255,106,.25)); }
.hero__candles{ position:absolute; left:-30px; right:-30px; bottom:-10px; height:80%; z-index:1; pointer-events:none; display:flex; align-items:flex-end; gap:10px; justify-content:space-between; opacity:.55; }
.hero__candles span{ display:block; width:10px; background: linear-gradient(180deg, var(--green-soft), var(--green-2)); border-radius:2px; animation: candle-grow 2.4s var(--ease) infinite alternate; }
.hero__candles span:nth-child(odd){ animation-duration: 3.1s; }
.hero__candles span:nth-child(1){ height:30%; animation-delay:0s;}
.hero__candles span:nth-child(2){ height:55%; animation-delay:.1s;}
.hero__candles span:nth-child(3){ height:20%; animation-delay:.2s;}
.hero__candles span:nth-child(4){ height:70%; animation-delay:.3s;}
.hero__candles span:nth-child(5){ height:40%; animation-delay:.4s;}
.hero__candles span:nth-child(6){ height:85%; animation-delay:.5s;}
.hero__candles span:nth-child(7){ height:50%; animation-delay:.6s;}
.hero__candles span:nth-child(8){ height:95%; animation-delay:.7s;}
@keyframes candle-grow{ from{ transform: scaleY(.7); opacity:.5;} to{ transform: scaleY(1); opacity:1;} }

.scroll-cue{
  position:absolute; bottom: 26px; left:50%; transform: translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:8px;
  font-family: var(--font-mono); font-size:11px; letter-spacing:.2em; color: var(--text-dim);
}
.scroll-cue span{ width:1px; height:28px; background: linear-gradient(180deg, var(--green), transparent); animation: scroll-cue-move 1.8s ease-in-out infinite; }
@keyframes scroll-cue-move{ 0%{ opacity:0; transform: translateY(-6px);} 40%{ opacity:1;} 100%{ opacity:0; transform: translateY(14px);} }

/* ==========================================================================
   TICKER MARQUEE
   ========================================================================== */
.ticker{
  border-top: 1px solid rgba(57,255,106,.25); border-bottom: 1px solid rgba(57,255,106,.25);
  background: var(--green-deeper);
  overflow:hidden; white-space:nowrap; padding: 14px 0;
}
.ticker__track{ display:inline-flex; gap:40px; animation: ticker-scroll 26s linear infinite; }
.ticker__track span{ font-family: var(--font-mono); font-weight:700; font-size:14px; letter-spacing:.05em; color: var(--green-soft); }
.ticker__track span:nth-child(even){ color: var(--gold); }
@keyframes ticker-scroll{ from{ transform: translateX(0);} to{ transform: translateX(-50%);} }

/* ==========================================================================
   SECTION HEAD / SHARED
   ========================================================================== */
.section-head{ max-width: var(--container); margin: 0 auto 46px; padding: 0 24px; text-align:center; }
.section-tag{ font-family: var(--font-mono); font-size:12px; letter-spacing:.15em; color: var(--green-soft); }
.section-title{ font-family: var(--font-display); font-size: clamp(28px,4.2vw,46px); margin: 10px 0 0; color: var(--white); }

[data-reveal]{ opacity:0; transform: translateY(36px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
[data-reveal].is-visible{ opacity:1; transform: translateY(0); }

.lore, .how-to-buy, .chart-section, .tokenomics, .roadmap, .final-cta{ padding: 100px 24px; }

/* ==========================================================================
   TERMINAL (lore + chart window)
   ========================================================================== */
.terminal, .chart-window{
  max-width: var(--container); margin: 0 auto 50px;
  background: rgba(10,16,12,.75);
  border: 1px solid rgba(57,255,106,.25);
  border-radius: var(--radius);
  overflow:hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,.4);
  backdrop-filter: blur(6px);
}
.terminal__bar{
  display:flex; align-items:center; gap:8px;
  padding: 12px 16px; background: rgba(57,255,106,.06);
  border-bottom: 1px solid rgba(57,255,106,.18);
}
.dot{ width:10px; height:10px; border-radius:50%; }
.dot--r{ background:#ff5f57; } .dot--y{ background:#febc2e; } .dot--g{ background:#28c840; }
.terminal__title{ margin-left:10px; font-family: var(--font-mono); font-size:12px; color: var(--text-dim); }
.terminal__body{ padding: 28px 26px; font-family: var(--font-mono); font-size:14.5px; line-height:1.9; color: var(--green-soft); }
.terminal__body p{ margin:0 0 6px; }
.prompt{ color: var(--green); margin-right:8px; }
.blink-cursor{ animation: blink 1s step-end infinite; }
@keyframes blink{ 50%{ opacity:0; } }

.lore-cards{ max-width: var(--container); margin: 0 auto; display:grid; grid-template-columns: repeat(3,1fr); gap:22px; }
.lore-card{
  background: rgba(12,43,18,.35); border:1px solid rgba(57,255,106,.18); border-radius: var(--radius);
  padding: 28px 24px; transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.lore-card:hover{ transform: translateY(-6px); border-color: rgba(57,255,106,.5); box-shadow: 0 16px 34px rgba(0,0,0,.35); }
.lore-card__num{ font-family: var(--font-mono); color: var(--green); font-size:13px; letter-spacing:.1em; }
.lore-card h3{ font-family: var(--font-display); font-size:20px; margin: 10px 0; color: var(--white); }
.lore-card p{ color: var(--text-dim); font-size:14.5px; line-height:1.65; margin:0; }

/* ==========================================================================
   HOW TO BUY
   ========================================================================== */
.steps{ max-width: var(--container); margin:0 auto; display:grid; grid-template-columns: repeat(4,1fr); gap:22px; }
.step{
  background: rgba(12,43,18,.3); border:1px solid rgba(57,255,106,.18); border-radius: var(--radius);
  padding: 26px 22px; position:relative; transition: transform .3s var(--ease), border-color .3s var(--ease);
}
.step:hover{ transform: translateY(-6px); border-color: rgba(57,255,106,.5); }
.step__num{
  font-family: var(--font-display); font-size:34px; color: transparent;
  -webkit-text-stroke: 1.5px rgba(57,255,106,.5);
  margin-bottom:12px;
}
.step h3{ font-family: var(--font-display); font-size:17px; margin:0 0 8px; color:var(--white); }
.step p{ color: var(--text-dim); font-size:14px; line-height:1.6; margin:0; }
.how-to-buy__cta{ text-align:center; margin-top: 46px; display:flex; flex-direction:column; align-items:center; }

/* ==========================================================================
   CHART
   ========================================================================== */
.chart-window__body{ padding: 0; min-height: 480px; position:relative; }
.chart-window__body iframe{ width:100%; height:480px; border:0; display:block; }
.chart-placeholder{
  min-height: 480px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
  color: var(--text-dim); text-align:center; padding: 40px;
  background:
    repeating-linear-gradient(0deg, rgba(57,255,106,.04) 0px, rgba(57,255,106,.04) 1px, transparent 1px, transparent 40px),
    repeating-linear-gradient(90deg, rgba(57,255,106,.04) 0px, rgba(57,255,106,.04) 1px, transparent 1px, transparent 40px);
}
.chart-placeholder__icon{ width:46px; height:46px; color: rgba(57,255,106,.4); }
.chart-placeholder p{ margin:0; font-size:15px; max-width: 34ch; }
.mono-tag{ font-family: var(--font-mono); font-size:11px; color: var(--gold); border:1px dashed rgba(201,149,79,.5); padding:4px 10px; border-radius:6px; }
.chart-cta{ text-align:center; margin-top:8px; }

/* ==========================================================================
   TOKENOMICS
   ========================================================================== */
.tokenomics__grid{ max-width: var(--container); margin: 0 auto 50px; display:grid; grid-template-columns: repeat(4,1fr); gap:20px; }
.token-stat{
  text-align:center; padding: 30px 18px; border-radius: var(--radius);
  border: 1px solid rgba(57,255,106,.2); background: rgba(12,43,18,.28);
  transition: transform .3s var(--ease), border-color .3s var(--ease);
}
.token-stat:hover{ transform: translateY(-6px); border-color: rgba(57,255,106,.5); }
.token-stat__label{ display:block; font-family: var(--font-mono); font-size:12px; letter-spacing:.1em; color: var(--green-soft); margin-bottom:10px; }
.token-stat__value{ display:block; font-family: var(--font-display); font-size: clamp(20px,2.6vw,28px); color: var(--white); }
.token-stat__sub{ display:block; margin-top:6px; font-size:12px; color: var(--text-dim); }

.tokenomics__bars{ max-width: 720px; margin:0 auto; display:flex; flex-direction:column; gap:20px; }
.bar-row{ display:grid; grid-template-columns: 130px 1fr 50px; align-items:center; gap:16px; }
.bar-row__label{ font-family: var(--font-mono); font-size:13px; color: var(--text-dim); }
.bar-row__track{ height:10px; border-radius:6px; background: var(--green-deeper); border:1px solid rgba(57,255,106,.25); overflow:hidden; }
.bar-row__fill{ height:100%; width:0%; background: linear-gradient(90deg, var(--green-2), var(--green-soft)); box-shadow: 0 0 10px rgba(57,255,106,.6); transition: width 1.4s var(--ease); }
.bar-row__pct{ font-family: var(--font-mono); font-size:13px; color: var(--green-soft); text-align:right; }

/* ==========================================================================
   ROADMAP
   ========================================================================== */
.roadmap__track{ max-width: 900px; margin: 0 auto; position:relative; padding-left: 4px; }
.roadmap__line{ position:absolute; top:0; left:50%; transform: translateX(-50%); width:100%; height:100%; z-index:0; opacity:.6; }
.roadmap__line path{ fill:none; stroke: var(--green); stroke-width:1.4; vector-effect: non-scaling-stroke; stroke-dasharray: 1000; stroke-dashoffset: 1000; transition: stroke-dashoffset 1.8s var(--ease); }
.roadmap__line.is-drawn path{ stroke-dashoffset: 0; }
.roadmap__item{
  position:relative; z-index:1; max-width: 420px; margin: 0 0 46px;
  background: rgba(10,16,12,.75); border:1px solid rgba(57,255,106,.25); border-radius: var(--radius);
  padding: 24px 26px; box-shadow: 0 16px 40px rgba(0,0,0,.35);
}
.roadmap__item--right{ margin-left:auto; }
.roadmap__phase{ font-family: var(--font-mono); font-size:12px; letter-spacing:.1em; color: var(--gold); }
.roadmap__item h3{ font-family: var(--font-display); font-size:19px; margin:8px 0; color: var(--white); }
.roadmap__item p{ color: var(--text-dim); font-size:14px; line-height:1.6; margin:0; }

/* ==========================================================================
   FINAL CTA
   ========================================================================== */
.final-cta{
  display:grid; grid-template-columns: .8fr 1.2fr; align-items:center; gap: 40px;
  max-width: var(--container); margin: 0 auto;
}
.final-cta__cat-wrap{ display:flex; justify-content:center; perspective: 1000px; }
.final-cta__cat{ max-height: 420px; width:auto; filter: drop-shadow(0 20px 40px rgba(0,0,0,.5)) drop-shadow(0 0 24px rgba(57,255,106,.2)); }
.final-cta__copy h2{ font-family: var(--font-display); font-size: clamp(28px,4vw,42px); margin:0 0 14px; }
.final-cta__copy p{ color: var(--text-dim); font-size:16px; margin:0 0 26px; max-width: 46ch; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{
  position:relative; z-index:2;
  padding: 70px 24px 30px;
  border-top: 1px solid rgba(57,255,106,.2);
  background: linear-gradient(180deg, transparent, rgba(12,43,18,.5));
}
.footer__top{ max-width: var(--container); margin: 0 auto 40px; text-align:center; }
.brand--footer{ justify-content:center; margin-bottom:12px; display:inline-flex; }
.footer__tag{ color: var(--text-dim); font-family: var(--font-mono); font-size:13px; }

.footer__links{
  max-width: var(--container); margin: 0 auto 40px;
  display:flex; flex-wrap:wrap; justify-content:center; gap:14px;
}
.footer__link{
  font-family: var(--font-mono); font-size:13px; color: var(--text-dim);
  border: 1px solid rgba(57,255,106,.25); border-radius: 999px; padding: 10px 18px;
  display:flex; align-items:center; gap:8px;
  transition: all .25s var(--ease);
}
.footer__link span{ color: var(--green); font-weight:700; }
.footer__link:hover{ background: rgba(57,255,106,.1); border-color: var(--green); color: var(--white); transform: translateY(-3px); }

.footer__socials{ max-width: 720px; margin: 0 auto 46px; display:flex; flex-wrap:wrap; gap:14px; }

.footer__bottom{ max-width: var(--container); margin:0 auto; text-align:center; padding-top:26px; border-top: 1px solid rgba(57,255,106,.12); }
.footer__bottom span{ font-size:12px; color: rgba(157,184,166,.6); line-height:1.6; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 980px){
  .hero__inner{ grid-template-columns: 1fr; text-align:center; }
  .hero__ctas{ justify-content:center; }
  .ca-pill{ margin: 0 auto; }
  .hero__visual{ order:-1; margin-bottom: 10px; }
  .lore-cards{ grid-template-columns: 1fr; }
  .steps{ grid-template-columns: repeat(2,1fr); }
  .tokenomics__grid{ grid-template-columns: repeat(2,1fr); }
  .final-cta{ grid-template-columns: 1fr; text-align:center; }
  .final-cta__copy p{ margin-left:auto; margin-right:auto; }
  .final-cta__copy .hero__ctas{ justify-content:center; }
  .roadmap__item, .roadmap__item--right{ margin-left:auto; margin-right:auto; }
}

@media (max-width: 800px){
  .nav{
    position: fixed; top:0; right:0; height:100vh; width: min(320px,80vw);
    background: rgba(5,10,7,.98); border-left:1px solid rgba(57,255,106,.25);
    flex-direction:column; align-items:flex-start; justify-content:center; gap:26px;
    padding: 40px 32px; transform: translateX(100%); transition: transform .35s var(--ease);
    z-index:550;
  }
  .nav.is-open{ transform: translateX(0); }
  .nav__socials{ order:3; }
  .btn--nav-cta{ order:4; width:100%; }
  .nav-toggle{ display:flex; }
}

@media (max-width: 620px){
  .steps{ grid-template-columns: 1fr; }
  .tokenomics__grid{ grid-template-columns: 1fr; }
  .bar-row{ grid-template-columns: 90px 1fr 40px; gap:10px; }
  .ca-pill__addr{ max-width: 130px; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .001ms !important; animation-iteration-count:1 !important; transition-duration: .001ms !important; }
}