/* =========================================================
   BATTLE CITIES // SOLANA TOKEN SITE — STYLESHEET
   ========================================================= */

:root{
  --bg:#06090b;
  --bg-panel:#0d1216;
  --bg-panel-2:#162027;
  --neon:#ffb30f;
  --neon-dim:#a96a05;
  --neon-glow:rgba(255,179,15,.45);
  --white:#f5f2e8;
  --gray:#a3adb0;
  --line:#3a4952;
  --danger:#f04432;
  --blue:#1677ff;
  --blue-glow:rgba(112,183,255,.38);
  --supply:#47de17;
  --shop-button:#105b0c;
  --shop-button-edge:#4aa82d;
  --ember:#ff6a1a;
  --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(240,68,50,.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(6,9,11,.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%;
}
.presence-hud{
  margin-left:auto;margin-right:16px;display:flex;align-items:center;gap:7px;
  min-height:32px;padding:0 10px;border:2px solid var(--shop-button-edge);
  background:var(--bg-panel);box-shadow:inset 0 0 0 1px #061006;
  color:var(--supply);font-family:'Share Tech Mono',monospace;font-size:11px;
  font-weight:700;letter-spacing:.65px;white-space:nowrap;
}
.presence-led{width:8px;height:8px;background:var(--supply);box-shadow:0 0 7px rgba(71,222,23,.7);}
.presence-round{color:var(--neon);}
.presence-divider{color:var(--shop-button-edge);}
.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 .coin-logo{display:block;width:100%;height:100%;object-fit:contain;}
.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 var(--shop-button-edge);background:var(--shop-button);color:var(--white);
  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:var(--bg);
  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 var(--blue-glow));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-dapp-store{margin-left:auto;margin-right:auto;}
  .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(255,179,15,.3);
}
.brand-name{white-space:nowrap;}
.brand-cities,.hero-cities,.footer-cities{color:var(--white);}

.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;}
.hero-dapp-store{
  width:min(100%,232px);display:block;margin-top:20px;
  border:1px solid transparent;transition:transform .15s ease,border-color .15s ease,filter .15s ease;
}
.hero-dapp-store img{display:block;width:100%;height:auto;}
.hero-dapp-store:hover{transform:translateY(-2px);border-color:var(--neon);filter:drop-shadow(0 0 10px var(--neon-glow));}
.hero-dapp-store:focus-visible{outline:2px solid var(--neon);outline-offset:4px;}
.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-play{background:var(--neon);border-color:var(--neon-dim);color:#04120a;box-shadow:5px 5px 0 #000;}
.btn-play:hover{transform:translate(3px,3px);box-shadow:2px 2px 0 #000;}
.btn-play:active{transform:translate(5px,5px);box-shadow:0 0 0 #000;}
.btn-primary{background:var(--shop-button);border-color:var(--shop-button-edge);color:var(--white);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(255,179,15,.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:var(--bg-panel-2);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(255,179,15,.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:var(--bg-panel-2);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.active .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:var(--bg-panel-2);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(255,179,15,.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(255,179,15,.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;}

/* Battlefield handoff copied from the BattleCities website: mechanical doors
   close, reveal the deployment readout, then reopen before navigation. */
.deployment-overlay{position:fixed;z-index:10000;inset:0;visibility:hidden;pointer-events:none;overflow:hidden;}
.deployment-overlay.is-active{visibility:visible;animation:1.08s steps(5,end) both deploymentFade;}
.deployment-door{z-index:1;width:52%;position:absolute;top:0;bottom:0;background:repeating-linear-gradient(90deg,#0a0c10 0 58px,#15171b 58px 62px,#08090d 62px 120px);border-color:#423a33;will-change:transform;}
.deployment-door::before{content:"";position:absolute;inset:74px 28px 42px;border:3px solid #302a25;background:linear-gradient(transparent 49.5%,#3c332c 49.5% 50.5%,transparent 50.5%),repeating-linear-gradient(0deg,transparent 0 92px,rgba(255,179,15,.16) 92px 95px);}
.deployment-door i{position:absolute;top:0;bottom:0;width:8px;background:repeating-linear-gradient(135deg,var(--neon) 0 12px,#07090b 12px 24px);}
.deployment-door-left{left:-52%;border-right:5px solid #4a4038;}
.deployment-door-left i{right:12px;}
.deployment-door-right{right:-52%;border-left:5px solid #4a4038;}
.deployment-door-right i{left:12px;}
.deployment-overlay.is-active .deployment-door-left{animation:1.08s steps(7,end) both deploymentDoorLeft;}
.deployment-overlay.is-active .deployment-door-right{animation:1.08s steps(7,end) both deploymentDoorRight;}
.deployment-readout{z-index:2;width:min(86vw,720px);position:absolute;top:50%;left:50%;display:flex;flex-direction:column;align-items:center;padding:34px;color:var(--white);text-align:center;background:#050609;border:4px solid #54463a;opacity:0;transform:translate(-50%,-50%);box-shadow:14px 14px #000,inset 0 0 0 5px #15110e;}
.deployment-overlay.is-active .deployment-readout{animation:1.08s steps(6,end) both deploymentReadoutFlash;}
.deployment-readout small{color:var(--neon);font-family:'Share Tech Mono',monospace;font-size:10px;font-weight:700;letter-spacing:3px;}
.deployment-readout b{margin-top:17px;font-family:'Press Start 2P',monospace;font-size:clamp(18px,3.2vw,32px);line-height:1.35;letter-spacing:-.04em;text-shadow:6px 6px #182006;}
.deployment-readout strong{margin-top:17px;color:var(--ember);font-family:'Press Start 2P',monospace;font-size:clamp(22px,4vw,46px);line-height:1;}
.deployment-readout>i{width:min(100%,470px);height:17px;margin:27px 0 16px;padding:3px;background:#12100e;border:2px solid #3e352e;}
.deployment-readout>i em{display:block;height:100%;background:repeating-linear-gradient(135deg,var(--supply) 0 9px,#2c8c18 9px 18px);}
.deployment-overlay.is-active .deployment-readout>i em{animation:.7s steps(8,end) both deploymentProgress;}
.deployment-readout span{color:#8d8175;font-family:'Share Tech Mono',monospace;font-size:10px;font-weight:700;letter-spacing:2px;}
@keyframes deploymentFade{0%,100%{background:transparent;}20%,80%{background:rgba(2,3,5,.78);}}
@keyframes deploymentDoorLeft{0%,100%{transform:translateX(0);}30%,72%{transform:translateX(100%);}}
@keyframes deploymentDoorRight{0%,100%{transform:translateX(0);}30%,72%{transform:translateX(-100%);}}
@keyframes deploymentReadoutFlash{0%,18%,90%,100%{opacity:0;}30%,78%{opacity:1;}}
@keyframes deploymentProgress{from{width:0;}to{width:100%;}}

@media(max-width:640px){
  .navlinks{display:none;}
  .presence-hud{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(6,9,11,.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;}
}
@media(prefers-reduced-motion: reduce){
  .deployment-overlay,.deployment-door,.deployment-readout,.deployment-readout>i em{animation:none !important;}
}
@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(255,179,15,.4); }
}

/* Cherry chat launcher. The embedded panel derives its palette from the same
   yellow and ground tokens; the host only supplies the accessible launcher. */
.cherry-chat-controls{
  position:fixed;
  right:20px;
  bottom:20px;
  z-index:2147483647;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:10px;
  pointer-events:none;
}
.cherry-chat-launcher,
.cherry-chat-close,
.cherry-chat-status{
  pointer-events:auto;
}
.cherry-chat-launcher[hidden],
.cherry-chat-close[hidden]{display:none;}
.cherry-chat-launcher{
  min-width:172px;
  min-height:52px;
  padding:0 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  border:2px solid var(--neon);
  background:var(--bg-panel);
  color:var(--white);
  box-shadow:5px 5px 0 #000,0 0 18px var(--neon-glow);
  font-family:'Press Start 2P',monospace;
  font-size:9px;
  line-height:1;
  letter-spacing:.04em;
  cursor:pointer;
  transition:transform .16s ease,box-shadow .16s ease,background-color .16s ease;
}
.cherry-chat-launcher svg{width:20px;height:20px;color:var(--neon);stroke-width:2.4;}
.cherry-chat-launcher:hover:not(:disabled){
  transform:translate(2px,2px);
  background:var(--bg-panel-2);
  box-shadow:3px 3px 0 #000,0 0 22px var(--neon-glow);
}
.cherry-chat-launcher:focus-visible,
.cherry-chat-close:focus-visible,
.cherry-chat-status button:focus-visible{
  outline:3px solid var(--white);
  outline-offset:3px;
}
.cherry-chat-launcher:disabled{cursor:wait;opacity:.72;}
.cherry-chat-led{
  width:8px;
  height:8px;
  flex:0 0 auto;
  background:var(--gray);
  box-shadow:0 0 0 2px #000;
}
.cherry-chat-launcher.is-ready .cherry-chat-led{
  background:var(--supply);
  box-shadow:0 0 0 2px #000,0 0 8px var(--supply);
}
.cherry-chat-launcher.is-authenticated .cherry-chat-led{background:var(--neon);box-shadow:0 0 0 2px #000,0 0 9px var(--neon);}
.cherry-chat-close{
  width:48px;
  height:48px;
  align-items:center;
  justify-content:center;
  border:2px solid var(--neon);
  border-radius:50%;
  background:var(--bg-panel);
  color:var(--white);
  box-shadow:4px 4px 0 #000,0 0 16px var(--neon-glow);
  cursor:pointer;
}
.cherry-chat-close:not([hidden]){display:flex;}
.cherry-chat-close svg{width:24px;height:24px;stroke-width:2.5;}
.cherry-chat-close span{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.cherry-chat-close:hover{background:var(--bg-panel-2);color:var(--neon);}
.cherry-chat-controls.is-open{
  bottom:min(548px,calc(100vh - 72px));
}
.cherry-chat-status{
  max-width:300px;
  padding:10px 12px;
  border:1px solid var(--line);
  background:rgba(13,18,22,.98);
  color:var(--white);
  box-shadow:4px 4px 0 #000;
  font-family:'Share Tech Mono',monospace;
  font-size:12px;
  line-height:1.45;
}
.cherry-chat-status.is-error{border-color:var(--danger);}
.cherry-chat-status button{
  min-height:40px;
  margin-left:10px;
  padding:0 10px;
  border:1px solid var(--neon);
  background:transparent;
  color:var(--neon);
  font:inherit;
  font-weight:700;
  cursor:pointer;
}

@media(max-width:640px){
  .cherry-chat-controls{
    right:12px;
    bottom:calc(var(--bottom-nav-h) + 16px + env(safe-area-inset-bottom));
  }
  .cherry-chat-launcher{min-width:52px;width:52px;padding:0;}
  .cherry-chat-launcher span{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
}

@media(prefers-reduced-motion: reduce){
  .cherry-chat-launcher,.cherry-chat-close{transition:none;}
}

/* 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;}
}