/* =========================================================
   NEKOPIXEL // BEP-20 LAUNCHPAD — STYLESHEET
   ========================================================= */

:root{
  --bg:#05070a;
  --bg-panel:#0a0f0d;
  --bg-panel-2:#0d1512;
  --neon:#39ff8a;
  --neon-dim:#1b8a4d;
  --neon-glow:rgba(57,255,138,.55);
  --white:#eef7f1;
  --gray:#5d7268;
  --line:#173323;
  --danger:#ff4d6d;
  --nav-h:70px;
  --hazard-h:38px;
  --bottom-nav-h:66px;
  --max-width:1360px;
}

/* Respect the user's OS-level reduced-motion preference: kill/limit all animations */
@media(prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important;}
  .hazard-track{animation-duration:42s !important;animation-iteration-count:infinite !important;}
}

@media(max-width:640px){
  :root{ --nav-h:58px; --hazard-h:30px; }
}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--white);
  font-family:'Chakra Petch',sans-serif;
  overflow-x:hidden;
  position:relative;
}
::selection{background:var(--neon);color:#000;}
svg[data-lucide], i[data-lucide], .lucide{ shape-rendering:crispEdges; }

/* Subtle CRT-style scanline overlay across the whole page */
body::before{
  content:"";
  position:fixed;inset:0;pointer-events:none;z-index:9999;
  background:repeating-linear-gradient(to bottom, rgba(255,255,255,0.015) 0px, rgba(255,255,255,0.015) 1px, transparent 1px, transparent 3px);
  mix-blend-mode:overlay;
}

/* Background grid pattern, faded out via a radial mask so it's strongest near the top */
.grid-bg{
  position:fixed;inset:0;z-index:0;
  background-image:linear-gradient(var(--line) 1px, transparent 1px),linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:42px 42px;
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 20%, #000 20%, transparent 75%);
          mask-image:radial-gradient(ellipse 80% 60% at 50% 20%, #000 20%, transparent 75%);
  opacity:.5;
}

a{color:inherit;text-decoration:none;}
.mono{font-family:'Share Tech Mono',monospace;}
.pixel{font-family:'Press Start 2P',monospace;}
.accent{color:var(--neon);}

.pixel-divider{
  height:8px;width:100%;
  background-image:repeating-linear-gradient(90deg,var(--neon) 0 8px, transparent 8px 16px);
  opacity:.5;
}

/* Reusable glitch text effect (used on hero title + mobile Buy tab) */
.glitch{position:relative;display:inline-block;color:var(--neon);}
.glitch::before,.glitch::after{
  content:attr(data-text);position:absolute;left:0;top:0;width:100%;overflow:hidden;
  color:var(--neon);background:var(--bg);clip-path:inset(0 0 0 0);
}
.glitch::before{left:2px;text-shadow:-2px 0 var(--danger);animation:glitchTop 4.5s infinite linear;}
.glitch::after{left:-2px;text-shadow:2px 0 #00fff0;animation:glitchBot 5.5s infinite linear;}
@keyframes glitchTop{0%,92%,100%{clip-path:inset(0 0 100% 0);opacity:0;}93%{clip-path:inset(10% 0 60% 0);opacity:1;}95%{clip-path:inset(60% 0 5% 0);opacity:1;}97%{clip-path:inset(0 0 100% 0);opacity:0;}}
@keyframes glitchBot{0%,90%,100%{clip-path:inset(0 0 100% 0);opacity:0;}91%{clip-path:inset(70% 0 5% 0);opacity:1;}94%{clip-path:inset(15% 0 70% 0);opacity:1;}96%{clip-path:inset(0 0 100% 0);opacity:0;}}

/* HUD-style corner-bracket frame */
.pixel-frame{
  --frame-accent: var(--neon);
  position:relative;
  background:var(--bg-panel);
  border:1px solid var(--line);
}
.pixel-frame-inner{ background:transparent; height:100%; position:relative; }
.pixel-frame::before,.pixel-frame::after,
.pixel-frame-inner::before,.pixel-frame-inner::after{
  content:"";position:absolute;width:12px;height:12px;pointer-events:none;
  border:2px solid var(--frame-accent);
  filter:drop-shadow(0 0 3px var(--neon-glow));
}
.pixel-frame::before{ top:-1px;left:-1px;border-right:none;border-bottom:none; }
.pixel-frame::after{ top:-1px;right:-1px;border-left:none;border-bottom:none; }
.pixel-frame-inner::before{ bottom:-1px;left:-1px;border-right:none;border-top:none; }
.pixel-frame-inner::after{ bottom:-1px;right:-1px;border-left:none;border-top:none; }
.pixel-frame.danger{ --frame-accent: var(--danger); border-color:var(--danger); }
.pixel-frame.danger::before,.pixel-frame.danger::after,
.pixel-frame.danger .pixel-frame-inner::before,.pixel-frame.danger .pixel-frame-inner::after{
  filter:drop-shadow(0 0 3px rgba(255,77,109,.55));
}
.pixel-frame{transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;}
.pixel-frame.hover-lift:hover{transform:translateY(-4px);border-color:var(--neon-dim);box-shadow:0 14px 34px rgba(0,0,0,.45);}

/* Keep focus states visible for keyboard users everywhere on the page */
a:focus-visible,button:focus-visible,input:focus-visible,.buy-tab:focus-visible,.quick-amt:focus-visible{
  outline:2px solid var(--neon);outline-offset:3px;
}

/* Scroll-reveal: elements fade/slide in once when they enter the viewport, then stay visible */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease;}
.reveal.in-view{opacity:1;transform:translateY(0);}

.icon{width:16px;height:16px;stroke-width:2.4;vertical-align:-3px;}
.icon-lg{width:22px;height:22px;stroke-width:2.2;}

/* ---------- NAVBAR (desktop/top) ---------- */
nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  height:var(--nav-h);box-sizing:border-box;
  background:rgba(5,7,10,.9);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.nav-inner{
  max-width:var(--max-width);margin:0 auto;height:100%;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 5%;
}
.logo{display:flex;align-items:center;gap:12px;}
.logo-box{width:38px;height:38px;}
.logo-box .pixel-frame-inner{display:flex;align-items:center;justify-content:center;}
.logo-box svg{color:var(--neon);}
.logo-text{font-family:'Press Start 2P',monospace;font-size:14px;letter-spacing:1px;}
.navlinks{display:flex;gap:34px;font-size:12px;letter-spacing:1.5px;text-transform:uppercase;align-items:center;}
.navlinks a{opacity:.7;transition:.2s;display:flex;align-items:center;gap:6px;}
.navlinks a:hover{opacity:1;color:var(--neon);}
.navcta{
  font-family:'Chakra Petch';font-weight:700;
  border:2px solid #000;background:var(--neon);color:#04120a;
  padding:10px 18px;font-size:12px;text-transform:uppercase;letter-spacing:1px;
  box-shadow:4px 4px 0 #000;transition:.15s;display:flex;align-items:center;gap:8px;
}
.navcta:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 #000;}

/* Hazard bar: sits at the seam between hero and tokenomics instead of
   between the fixed nav and hero (which used to push the hero content down
   on every load and compete with the hero for attention). Placed here it
   reads as a transition/warning gate into the token details + purchase flow,
   which is where the risk framing is actually relevant. */
.hazard-bar{
  box-sizing:border-box;
  width:100%;overflow:hidden;position:relative;z-index:2;
  background:repeating-linear-gradient(135deg,#000 0 18px, var(--neon) 18px 36px);
  border-top:2px solid #000;border-bottom:2px solid #000;
}
.hazard-track{
  display:flex;white-space:nowrap;align-items:center;
  height:calc(100% - 8px);margin:4px 0;
  width:max-content;
  animation:marquee 42s linear infinite;
  background:#05070a;
  padding: 0.5rem;
}
.hazard-track span{
  font-family:'Press Start 2P',monospace;font-size:11px;
  color:white;letter-spacing:1px;display:inline-flex;align-items:center;gap:10px;
  padding:0 26px;text-transform:uppercase;
}
.hazard-track span svg{color:var(--danger);}
@keyframes marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}

section{position:relative;z-index:1;padding:70px 5% 90px;scroll-margin-top:var(--nav-h);}

/* ---------- HERO ---------- */
.hero{
  min-height:100vh;display:flex;flex-direction:column;justify-content:center;
  padding-top:calc(var(--nav-h) + 40px);position:relative;
}

/* HERO LAYOUT — two columns on desktop/tablet (copy left, image right),
   collapses to a single centered column on mobile with the image first. */
.hero-inner{
  display:flex;align-items:center;gap:56px;
  max-width:var(--max-width);margin:0 auto;
}
.hero-copy{flex:1 1 0;min-width:0;}
.hero-media{flex:0 0 auto;width:min(42%,460px);}
.hero-media img{width:100%;height:auto;display:block;filter:drop-shadow(0 0 26px rgba(57,255,138,.25));animation:floatY 5.5s ease-in-out infinite;}
@keyframes floatY{0%,100%{transform:translateY(0);}50%{transform:translateY(-12px);}}
@media(max-width:960px){
  .hero-inner{gap:36px;}
  .hero-media{width:38%;}
}
@media(max-width:760px){
  .hero-inner{flex-direction:column;text-align:center;}
  .hero-media{order:-1;width:min(70%,320px);margin-bottom:8px;}
  .hero-copy{width:100%;}
  .hero-sub{margin-left:auto;margin-right:auto;}
  .hero-actions{justify-content:center;}
  .hero-stats{margin-left:auto;margin-right:auto;}
  .eyebrow{margin-left:auto;margin-right:auto;}
}

.eyebrow{
  font-family:'Press Start 2P',monospace;color:var(--neon);font-size:10px;letter-spacing:2px;
  text-transform:uppercase;display:inline-flex;align-items:center;gap:10px;margin-bottom:26px;
  background:var(--bg-panel);border:2px solid var(--neon-dim);padding:10px 14px;width:fit-content;
}
.eyebrow .pulse{width:7px;height:7px;background:var(--neon);box-shadow:0 0 10px var(--neon-glow);animation:blink 1.2s infinite;}
@keyframes blink{50%{opacity:.15;}}

.hero h1{
  font-family:'Press Start 2P',monospace;
  font-size:clamp(30px,6.4vw,74px);
  line-height:1.25;letter-spacing:1px;color:var(--white);
  text-shadow:0 0 6px var(--neon-glow), 0 0 22px rgba(57,255,138,.3);
}

.hero-sub{max-width:560px;margin-top:26px;color:var(--gray);font-size:16px;line-height:1.7;}
.hero-sub b{color:var(--white);font-weight:600;}
.hero-actions{display:flex;gap:16px;margin-top:38px;flex-wrap:wrap;}
.btn{
  font-family:'Chakra Petch',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;
  font-size:14px;padding:16px 30px;cursor:pointer;border:2px solid #000;transition:.15s;
  display:inline-flex;align-items:center;gap:10px;
}
.btn-primary{background:var(--neon);color:#04120a;box-shadow:5px 5px 0 #000;}
.btn-primary:hover{transform:translate(3px,3px);box-shadow:2px 2px 0 #000;}
.btn-primary:active{transform:translate(5px,5px);box-shadow:0 0 0 #000;}
.btn-ghost{background:transparent;border:2px solid var(--gray);color:var(--white);box-shadow:5px 5px 0 rgba(0,0,0,.4);}
.btn-ghost:hover{border-color:var(--neon);color:var(--neon);transform:translate(3px,3px);box-shadow:2px 2px 0 rgba(0,0,0,.4);}
.btn-ghost:active{transform:translate(5px,5px);box-shadow:0 0 0 rgba(0,0,0,.4);}

/* HERO STATS — grid with a matched-height accent rule per card so the
   top border, icon, number and label all line up on every breakpoint
   instead of relying on side borders that clipped unevenly on 3-4 col
   layouts at in-between viewport widths. */
.hero-stats{
  margin-top:44px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1px;background:var(--line);border-top:2px dashed var(--line);max-width:780px;
  padding-top:2px;
}
.hero-stats div{background:var(--bg);padding:20px 20px 4px 4px;position:relative;}

.hero-stats .num{
  font-family:'Press Start 2P',monospace;font-size:clamp(13px,1.6vw,18px);color:var(--neon);
  display:flex;align-items:center;gap:8px;white-space:nowrap;
}
.hero-stats .lbl{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--gray);margin-top:10px;}
@media(max-width:900px){
  .hero-stats{grid-template-columns:repeat(2,1fr);max-width:520px;}
}
@media(max-width:760px){
  .hero-stats div{text-align:left;}
}
@media(max-width:640px){
  .hero-stats{margin-top:34px;}
  .hero-stats div{padding:16px 14px 4px 4px;}
}

/* ---------- GENERIC SECTION HEADER ---------- */
.sec-head{margin:0 auto 56px;max-width:var(--max-width);width:100%;}
.sec-tag{font-family:'Press Start 2P',monospace;color:var(--neon);font-size:10px;letter-spacing:2px;text-transform:uppercase;display:flex;align-items:center;gap:10px;}
.sec-tag.center{justify-content:center;}
.sec-head h2{font-family:'Press Start 2P',monospace;font-size:clamp(22px,3.2vw,34px);font-weight:400;margin-top:16px;color:var(--white);line-height:1.5;max-width:640px;}
.sec-head p{color:var(--gray);margin-top:16px;line-height:1.7;font-size:15px;max-width:640px;}

/* ---------- TOKENOMICS ---------- */
.tokenomics{background:linear-gradient(180deg,transparent,rgba(57,255,138,.03),transparent);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.tok-grid{display:grid;grid-template-columns:1fr;gap:60px;max-width:var(--max-width);margin:0 auto;}
@media(min-width:960px){.tok-grid{grid-template-columns:1fr 1fr;}}

.terminal-head{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--line);font-size:12px;color:var(--gray);letter-spacing:1px;font-family:'Share Tech Mono';}
.terminal-body{padding:26px;}
@media(max-width:480px){
  .terminal-body{padding:18px;}
  .info-row{font-size:12.5px;flex-wrap:wrap;gap:4px;}
}
.info-row{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px dashed var(--line);font-size:14px;font-family:'Share Tech Mono';}
.info-row:last-child{border-bottom:none;}
.info-row .k{color:var(--gray);display:flex;align-items:center;gap:8px;}
.info-row .v{color:var(--white);}
.info-row .v.accent{color:var(--neon);}

/* ALLOCATION BARS — segmented track (visually consistent with the presale
   progress bar) whose fill width equals the item's actual share of 100%,
   so the bar is readable/accurate rather than purely decorative. */
.alloc-list{display:flex;flex-direction:column;gap:20px;}
.alloc-top{display:flex;justify-content:space-between;font-size:13px;margin-bottom:9px;}
.alloc-top .name{letter-spacing:1px;text-transform:uppercase;color:var(--white);font-weight:600;}
.alloc-top .pct{font-family:'Press Start 2P';color:var(--neon);font-size:11px;}
.alloc-track{height:12px;background:#0e1613;border:1px solid var(--line);overflow:hidden;padding:2px;display:flex;}
.alloc-fill{height:100%;background:linear-gradient(90deg,var(--neon-dim),var(--neon));box-shadow:0 0 8px var(--neon-glow);transition:width .6s ease;}

.danger-badge{
  display:inline-flex;align-items:center;gap:8px;
  font-family:'Press Start 2P';font-size:9px;letter-spacing:1px;
  color:#000;background:var(--neon);padding:10px;
  text-transform:uppercase;line-height:1.6;flex-wrap:wrap;max-width:100%;
}
.danger-badge.red{background:var(--danger);color:#0a0002;}
.danger-badge svg{flex-shrink:0;}
@media(max-width:640px){
  .danger-badge{font-size:8px;gap:6px;}
}

.risk-box{margin-top:30px;}
.risk-inner{padding:22px 24px;display:flex;gap:16px;align-items:flex-start;}
.risk-inner svg{color:var(--danger);flex-shrink:0;margin-top:2px;}
.risk-inner p{font-size:13px;color:var(--gray);line-height:1.7;}
.risk-inner p b{color:var(--white);}

/* ---------- TIMELINE ---------- */
/* Horizontal rail on desktop/tablet (order reads left-to-right the way a
   roadmap should), collapses to a vertical rail on mobile where horizontal
   space runs out. Same markup either way; only the axis of the connecting
   line + flex-direction flips. */
.timeline{border-bottom:1px solid var(--line);}
.timeline-list{display:flex;position:relative;padding-top:7px;max-width:var(--max-width);margin:0 auto;}
.timeline-list::before{content:"";position:absolute;top:14px;left:0;right:0;height:2px;background:var(--line);z-index:0;}
.tl-item{flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 14px;position:relative;}
.tl-dot{width:14px;height:14px;border:2px solid var(--neon-dim);background:var(--bg-panel);margin-bottom:16px;position:relative;z-index:1;flex-shrink:0;}
.tl-marker{font-family:'Press Start 2P';font-size:10px;color:var(--gray);margin-bottom:10px;}
.tl-body h3{font-size:14px;letter-spacing:.5px;text-transform:uppercase;color:var(--white);display:flex;align-items:center;justify-content:center;gap:8px;}
.tl-body h3 svg{color:var(--neon);}
.tl-body p{margin-top:8px;font-size:13px;color:var(--gray);line-height:1.6;}
.tl-item.done .tl-dot{background:var(--neon);border-color:var(--neon);box-shadow:0 0 8px var(--neon-glow);}
.tl-item.done .tl-marker{color:var(--neon);}
.tl-item.now .tl-dot{background:var(--white);border-color:var(--white);box-shadow:0 0 8px rgba(255,255,255,.5);}
.tl-item.now .tl-marker{color:var(--white);}
.tl-item.now .tl-body h3 svg{color:var(--danger);}
.tl-item.next .tl-marker,.tl-item.next .tl-body h3,.tl-item.next .tl-body h3 svg{color:var(--gray);}
@media(max-width:760px){
  .timeline-list{flex-direction:column;padding-top:0;}
  .timeline-list::before{top:7px;bottom:7px;left:6px;right:auto;width:2px;height:auto;}
  .tl-item{flex-direction:row;align-items:flex-start;text-align:left;padding:0 0 28px 0;gap:18px;}
  .tl-item:last-child{padding-bottom:0;}
  .tl-dot{margin-bottom:0;margin-top:5px;}
}

/* ---------- COUNTDOWN SECTION ---------- */
/* Its own centered block between the roadmap and the buy flow. Colors are
   deliberately NOT all-neon: white-bordered boxes for Days/Hours/Minutes
   keep the palette calm and readable, while only the Seconds box carries
   the neon glow — a single accent draws the eye to "time is actively
   moving" without painting the whole thing green. */
.countdown-section{
  display:flex;align-items:center;justify-content:center;text-align:center;
  min-height:60vh;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.025),transparent);
}
@media(max-width:640px){ .countdown-section{min-height:44vh;} }
.cds-inner{max-width:640px;margin:0 auto;display:flex;flex-direction:column;align-items:center;}
.cds-title{font-family:'Press Start 2P',monospace;font-size:clamp(18px,3vw,28px);color:var(--white);margin:18px 0 36px;line-height:1.5;}
.cds-clock{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center;}
.cds-clock .box{background:var(--bg-panel);border:2px solid var(--neon-dim);min-width:76px;padding:16px 14px;box-shadow:0 0 8px rgba(57,255,138,.18);transition:box-shadow .2s,border-color .2s;}
.cds-clock .box .n{font-family:'Press Start 2P';font-size:22px;color:var(--neon);text-shadow:0 0 8px var(--neon-glow);}
.cds-clock .box .u{font-size:9px;letter-spacing:1px;color:var(--gray);text-transform:uppercase;margin-top:6px;}
.cds-clock .box.highlight{border-color:var(--neon);box-shadow:0 0 14px var(--neon-glow);}
.cds-clock .box.highlight .n{color:var(--neon);}
.cds-colon{font-family:'Press Start 2P';color:var(--gray);font-size:20px;}
.cds-note{margin-top:28px;font-size:13px;color:var(--gray);display:flex;align-items:center;gap:8px;}
.cds-note svg{color:var(--danger);flex-shrink:0;}
@media(max-width:640px){
  .cds-clock{gap:6px;}
  .cds-clock .box{min-width:58px;padding:12px 8px;}
  .cds-clock .box .n{font-size:16px;}
  .cds-colon{font-size:14px;}
}

/* ---------- NOTIFY-ME SECTION ---------- */
/* Simple email capture, static demo only (no backend wired up — see
   subscribeEmail() in script.js). */
.notify-inner{max-width:720px;margin:0 auto;}
.notify-content{padding:44px 40px;text-align:center;}
@media(max-width:640px){ .notify-content{padding:32px 22px;} }
.notify-title{font-family:'Press Start 2P',monospace;font-size:clamp(17px,2.6vw,26px);color:var(--white);margin:16px 0 12px;line-height:1.5;}
.notify-sub{color:var(--gray);font-size:14px;line-height:1.7;max-width:460px;margin:0 auto 30px;}
.notify-form{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;align-items:stretch;}
.notify-input{flex:1;min-width:220px;max-width:340px;}
.notify-input input{font-family:'Share Tech Mono',monospace;font-size:14px;}
.notify-input svg{color:var(--neon);margin-right:8px;flex-shrink:0;}
.notify-status{margin-top:16px;font-size:12.5px;color:var(--neon);min-height:18px;}
@media(max-width:640px){
  .notify-form{flex-direction:column;align-items:stretch;}
  .notify-input{max-width:none;}
}

/* ---------- PURCHASE / BUY FLOW ---------- */
.purchase-wrap{display:grid;grid-template-columns:1fr;gap:50px;max-width:var(--max-width);margin:0 auto;}
@media(min-width:960px){.purchase-wrap{grid-template-columns:1.05fr .95fr;align-items:start;}}

.progress-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:16px;flex-wrap:wrap;gap:8px;}
.progress-top .raised{font-family:'Press Start 2P';font-size:20px;color:var(--neon);}
.progress-top .goal{font-family:'Share Tech Mono';font-size:13px;color:var(--gray);}
.progress-track{height:14px;background:#0e1613;border:2px solid var(--line);overflow:hidden;display:flex;gap:2px;padding:2px;}
.progress-track .seg{flex:1;background:var(--line);}
.progress-track .seg.on{background:var(--neon);box-shadow:0 0 6px var(--neon-glow);}
.progress-meta{display:flex;justify-content:space-between;margin-top:10px;font-size:11px;letter-spacing:1px;color:var(--gray);text-transform:uppercase;font-family:'Share Tech Mono';}
.progress-meta .accent{color:var(--neon);}

.stage-list{margin-top:26px;display:flex;flex-direction:column;gap:0;}
.stage{display:flex;justify-content:space-between;align-items:center;padding:14px 0;border-bottom:1px solid var(--line);font-size:13px;flex-wrap:wrap;gap:6px;}
.stage:last-child{border-bottom:none;}
@media(max-width:480px){
  .stage{position:relative;padding:12px 0;}
  .stage .tag{order:1;}
  .stage .status{order:2;margin-left:auto;}
  .stage .price{order:3;width:100%;margin-top:6px;}
}
.stage .tag{font-family:'Share Tech Mono';font-size:10px;letter-spacing:1px;padding:3px 8px;border:1px solid var(--neon-dim);color:var(--neon);text-transform:uppercase;display:flex;align-items:center;gap:5px;}
.stage.done .tag{background:var(--neon);color:#000;border-color:var(--neon);}
.stage .price{color:var(--white);font-family:'Press Start 2P';font-size:11px;}
.stage .status{color:var(--gray);font-size:11px;text-transform:uppercase;letter-spacing:1px;}

.buy-tabs{display:flex;border:2px solid var(--line);margin-bottom:24px;}
.buy-tab{flex:1;text-align:center;padding:13px;font-family:'Chakra Petch';font-weight:700;letter-spacing:1px;font-size:13px;text-transform:uppercase;color:var(--gray);cursor:pointer;transition:.2s;border-right:1px solid var(--line);display:flex;align-items:center;justify-content:center;gap:8px;}
.buy-tab:last-child{border-right:none;}
.buy-tab.active{background:var(--neon);color:#000;}
.buy-tab:not(.active):hover{color:var(--white);}

.field{margin-bottom:18px;}
.field label{display:block;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--gray);margin-bottom:8px;}
.input-box{display:flex;align-items:center;background:#081210;border:2px solid var(--line);padding:14px 16px;transition:border-color .2s;}
.input-box.pulse-in{border-color:var(--neon);}
.input-box input{flex:1;background:transparent;border:none;outline:none;color:var(--white);font-family:'Press Start 2P';font-size:15px;width:0;}
.input-box .unit{font-family:'Share Tech Mono';font-size:13px;color:var(--neon);letter-spacing:1px;padding-left:10px;border-left:1px solid var(--line);}
.quick-amounts{display:flex;gap:8px;margin-top:10px;}
.quick-amt{
  flex:1;text-align:center;padding:9px 6px;font-family:'Share Tech Mono',monospace;
  font-size:12px;letter-spacing:.5px;color:var(--neon);background:transparent;
  border:1px solid var(--neon-dim);cursor:pointer;transition:.15s;
}
.quick-amt:hover{background:rgba(57,255,138,.08);border-color:var(--neon);}
.quick-amt:active{transform:scale(.96);}
.buy-tab:active{transform:scale(.98);}
.quick-amt.active{background:var(--neon);color:#04120a;border-color:var(--neon);font-weight:700;}
.swap-icon{display:flex;justify-content:center;margin:-8px 0;position:relative;z-index:2;}
.swap-icon span{background:var(--bg-panel);border:2px solid var(--neon);color:var(--neon);width:32px;height:32px;display:flex;align-items:center;justify-content:center;}
.rate-line{font-family:'Share Tech Mono';font-size:12px;color:var(--gray);margin:16px 0;display:flex;justify-content:space-between;}
.rate-line span:last-child{color:var(--neon);}
.buy-btn{width:100%;margin-top:6px;justify-content:center;}
.buy-note{margin-top:16px;font-size:11.5px;color:var(--gray);line-height:1.6;display:flex;gap:8px;}
.buy-note svg{color:var(--neon);flex-shrink:0;}

/* ---------- FAQ ACCORDION ---------- */
/* Native <details>/<summary> so it works with zero JS. Left accent bar
   (rather than a full pixel-frame) keeps it visually in the same family as
   the danger badges without competing with the bracket-framed cards above. */
.faq-list{max-width:860px;margin:0 auto;display:flex;flex-direction:column;gap:14px;}
.faq-item{
  background:var(--bg-panel);border:1px solid var(--line);border-left:3px solid var(--neon-dim);
  transition:border-color .25s ease,background .25s ease;
}
.faq-item[open]{border-left-color:var(--neon);background:rgba(57,255,138,.035);}
.faq-item summary{
  list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:18px 20px;font-family:'Chakra Petch',sans-serif;font-weight:600;font-size:14.5px;color:var(--white);
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::marker{content:"";}
.faq-q{display:flex;align-items:center;gap:14px;}
.faq-q svg{color:var(--neon);flex-shrink:0;}
.faq-item .chev{color:var(--neon);flex-shrink:0;transition:transform .25s ease;}
.faq-item[open] .chev{transform:rotate(180deg);}
.faq-answer{padding:0 20px 20px 50px;color:var(--gray);font-size:13.5px;line-height:1.75;}
@media(max-width:640px){
  .faq-item summary{padding:15px 16px;font-size:13.5px;gap:10px;}
  .faq-q{gap:10px;}
  .faq-answer{padding:0 16px 16px 40px;font-size:13px;}
}

/* ---------- FOOTER ---------- */
footer{border-top:1px solid var(--line);padding:40px 5%;font-size:12px;color:var(--gray);position:relative;z-index:1;}
.footer-inner{max-width:var(--max-width);margin:0 auto;display:flex;flex-wrap:wrap;gap:20px;justify-content:space-between;align-items:center;}
footer .logo-text{font-size:12px;}
.foot-links{display:flex;gap:22px;text-transform:uppercase;letter-spacing:1px;flex-wrap:wrap;}
.foot-links a{display:flex;align-items:center;gap:6px;}
.foot-links a:hover{color:var(--neon);}

/* ---------- BOTTOM NAV (mobile app-style) ---------- */
/* Hidden by default; only shown at the <=640px breakpoint below */
.bottom-nav{
  display:none;
}

.text-white{color: white;}

@media(max-width:640px){
  .navlinks{display:none;}
  .navcta{display:none;}
  section{padding:56px 6% 60px;}
  .hero{padding-top:calc(var(--nav-h) + 20px);}
  body{padding-bottom:calc(var(--bottom-nav-h) + env(safe-area-inset-bottom));}

  .bottom-nav{
    display:flex;
    position:fixed;left:0;right:0;bottom:0;
    top:auto;
    z-index:200;
    background:rgba(5,9,7,.97);backdrop-filter:blur(10px);
    border-top:2px solid var(--neon-dim);
    box-shadow:0 -6px 24px rgba(0,0,0,.5);
    padding:8px 4px calc(8px + env(safe-area-inset-bottom));
  }
  .bn-item{
    flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
    font-family:'Chakra Petch',sans-serif;font-weight:600;font-size:9.5px;
    letter-spacing:.5px;text-transform:uppercase;color:var(--gray);
    padding:6px 2px;transition:.2s;
  }
  .bn-item svg{width:19px;height:19px;stroke-width:2.2;transition:.2s;}
  .bn-item.active{color:var(--neon);}
  .bn-item.active svg{filter:drop-shadow(0 0 6px var(--neon-glow));transform:translateY(-1px);}

  /* Buy CTA: always-on neon glow + reuses the shared .glitch effect so it
     visually matches the hero title's "tap me" energy on the tab bar. */
  .bn-item.bn-cta{color:var(--neon);position:relative;animation:bnCtaPulse 2.2s ease-in-out infinite;}
  .bn-item.bn-cta svg{filter:drop-shadow(0 0 5px var(--neon-glow));}
  .bn-item.bn-cta::before{
    content:"";position:absolute;top:-2px;left:14%;right:14%;height:2px;background:var(--neon);
    box-shadow:0 0 8px var(--neon-glow);opacity:0;transition:.2s;
  }
  .bn-item.bn-cta.active::before{opacity:1;}
  .bn-item.bn-cta .glitch{font-size:9.5px;}
}
@keyframes bnCtaPulse{
  0%,100%{ text-shadow:0 0 4px var(--neon-glow); }
  50%{ text-shadow:0 0 10px var(--neon-glow), 0 0 18px rgba(57,255,138,.4); }
}

/* Extra small phones */
@media(max-width:380px){
  .hero h1{font-size:24px;}
  .eyebrow{font-size:8.5px;padding:8px 10px;}
  .hazard-track span{font-size:8px;padding:0 12px;gap:5px;}
  .hazard-track span svg{width:11px;height:11px;}
  .btn{padding:14px 20px;font-size:12px;}
  .bn-item{font-size:8.5px;}
}