@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Space+Mono:wght@400;700&display=swap');

:root{
  --bg:#010301;
  --bg2:#041004;
  --panel:#061106;
  --green:#39ff14;
  --green2:#00d94b;
  --darkgreen:#0c5f17;
  --ink:#f3fff0;
  --muted:#8aab88;
  --line:#1b431c;
  --shadow:0 0 10px rgba(57,255,20,.45),0 0 42px rgba(57,255,20,.13);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--ink);
  background:var(--bg);
  font-family:"Space Mono","Courier New",monospace;
  overflow-x:hidden;
  image-rendering:pixelated;
  cursor:crosshair;
}
body::selection{background:var(--green);color:#001300}
a{color:inherit;text-decoration:none}
button,a{font-family:inherit}
.hidden{display:none!important}
.shell{width:min(1200px,calc(100% - 34px));margin:auto;position:relative;z-index:2}
#pixelWorld{
  position:fixed;inset:0;width:100%;height:100%;z-index:-3;
  image-rendering:pixelated;background:#010301;
}
.scanlines{
  pointer-events:none;position:fixed;inset:0;z-index:100;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.023) 0 1px,transparent 1px 4px);
  mix-blend-mode:screen;opacity:.55;
}
.vignette{
  pointer-events:none;position:fixed;inset:0;z-index:99;
  box-shadow:inset 0 0 180px #000,inset 0 0 70px rgba(0,0,0,.9);
}
span{color:var(--green)}
.pixel-btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  border:3px solid var(--green);background:var(--green);color:#001500;font-weight:900;
  padding:13px 17px;letter-spacing:.04em;text-transform:uppercase;
  box-shadow:7px 7px 0 #0c5615;
  clip-path:polygon(0 0,calc(100% - 8px) 0,calc(100% - 8px) 4px,100% 4px,100% 100%,8px 100%,8px calc(100% - 4px),0 calc(100% - 4px));
  transition:.12s steps(2);
}
.pixel-btn:hover{transform:translate(4px,4px);box-shadow:3px 3px 0 #0c5615;filter:brightness(1.15)}
.pixel-btn.outline{background:#020802;color:var(--green)}
.pixel-btn.mega{padding:17px 22px;font-size:16px}
.pixel-btn.small{font-size:11px;padding:10px 13px}
.logo{
  font-family:"Press Start 2P",monospace;font-size:18px;letter-spacing:-.08em;
  display:flex;align-items:center;gap:8px;text-shadow:3px 3px #0a4d12;
}
.logo i{width:10px;height:10px;background:var(--green);box-shadow:0 0 14px var(--green)}

.gate{
  min-height:100svh;position:relative;overflow:hidden;display:grid;place-items:center;text-align:center;
  background:
    radial-gradient(circle at 50% 50%,rgba(57,255,20,.22),transparent 26%),
    linear-gradient(180deg,rgba(0,0,0,.1),rgba(0,0,0,.72));
}
.gate-noise{
  position:absolute;inset:0;opacity:.16;
  background-image:
   linear-gradient(90deg,transparent 49%,rgba(57,255,20,.3) 50%,transparent 51%),
   linear-gradient(0deg,transparent 49%,rgba(57,255,20,.22) 50%,transparent 51%);
  background-size:8px 8px;
  animation:noiseShift .3s steps(2) infinite;
}
@keyframes noiseShift{50%{transform:translate(2px,-2px)}}
.gate-grid{
  position:absolute;left:-20%;right:-20%;bottom:-42%;height:72%;
  transform:perspective(430px) rotateX(61deg);
  background-image:linear-gradient(rgba(57,255,20,.32) 1px,transparent 1px),linear-gradient(90deg,rgba(57,255,20,.32) 1px,transparent 1px);
  background-size:34px 34px;
  animation:gridDrive 2.6s linear infinite;
  mask-image:linear-gradient(to bottom,#000,transparent 92%);
}
@keyframes gridDrive{to{background-position:0 34px,0 34px}}
.gate-bull{
  position:absolute;width:min(720px,92vw);opacity:.38;
  filter:drop-shadow(0 0 18px #39ff14) drop-shadow(0 0 60px rgba(57,255,20,.35));
  animation:gateBull 3.2s steps(8) infinite;
}
@keyframes gateBull{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-10px) scale(1.025)}}
.gate-copy{position:relative;z-index:3;max-width:1000px;padding:40px 20px}
.badge,.eyebrow{
  display:inline-block;color:var(--green);font-size:10px;letter-spacing:.16em;
  border:1px solid var(--line);background:#031003;padding:9px 11px;
}
.gate h1{
  margin:34px 0 25px;font-family:"Press Start 2P",monospace;
  font-size:clamp(60px,10vw,140px);line-height:.82;letter-spacing:-.11em;
  text-shadow:7px 7px 0 #0e4d15,13px 13px 0 rgba(0,0,0,.9);
}
.glitch-sub{
  display:inline-block;position:relative;margin-bottom:32px;
  color:#d9f6d8;font-family:"Press Start 2P",monospace;font-size:clamp(9px,1.2vw,14px);line-height:1.8;
}
.glitch-sub::before,.glitch-sub::after{
  content:attr(data-text);position:absolute;left:0;top:0;width:100%;overflow:hidden;opacity:.6
}
.glitch-sub::before{transform:translate(2px,0);color:#39ff14;clip-path:inset(0 0 57% 0);animation:glitchA 1.3s steps(2) infinite}
.glitch-sub::after{transform:translate(-2px,0);color:#a5ff9b;clip-path:inset(62% 0 0 0);animation:glitchB 1.1s steps(2) infinite}
@keyframes glitchA{50%{transform:translate(-3px,1px)}}@keyframes glitchB{50%{transform:translate(3px,-1px)}}
.press{margin-top:22px;color:#739873;font-size:10px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:.28}}
.boot{
  position:absolute;top:24px;z-index:3;color:#628d62;font-size:9px;line-height:1.8;text-align:left;
  display:flex;flex-direction:column
}
.boot-left{left:24px}.boot-right{right:24px;text-align:right}
.gate-footer{
  position:absolute;left:22px;right:22px;bottom:17px;z-index:3;
  display:flex;justify-content:space-between;color:#4d704d;font-size:8px
}

.top-tape{
  position:relative;z-index:8;border-bottom:2px solid var(--green);background:var(--green);color:#001500;
  overflow:hidden;white-space:nowrap;font-weight:900;font-size:11px;padding:7px 0
}
.top-tape div{display:inline-block;min-width:200%;animation:tape 14s linear infinite}
@keyframes tape{to{transform:translateX(-50%)}}
.nav{
  height:82px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:20;background:rgba(1,3,1,.86);backdrop-filter:blur(10px)
}
.nav-links{display:flex;gap:24px;font-size:10px;font-weight:700}
.nav-links a:hover{color:var(--green);text-shadow:0 0 12px var(--green)}

.hero{
  min-height:790px;display:grid;grid-template-columns:.96fr 1.04fr;gap:34px;align-items:center;padding:70px 0 90px
}
.console-line{font-size:12px;color:#769276}.console-line span{font-weight:bold}
.hero h2,.section-head h3,.herd h3,.final-boss h3{
  font-family:"Press Start 2P",monospace;letter-spacing:-.09em;line-height:.95;
  text-shadow:5px 5px 0 #0b4511
}
.hero h2{font-size:clamp(48px,6.6vw,92px);margin:28px 0}
.lead{font-size:17px;line-height:1.75;max-width:650px;color:#a7bca6}
.hero-actions{display:flex;gap:13px;flex-wrap:wrap;margin:31px 0}
.ca-box{border:2px solid var(--line);background:#031003;max-width:690px}
.ca-title{font-size:9px;color:#739473;padding:8px 10px;border-bottom:1px solid var(--line)}
.ca-row{display:flex}.ca-row code{padding:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;color:#d8efd7}
.ca-row button{background:#0c240e;color:var(--green);border:0;border-left:1px solid var(--line);font-family:inherit;font-weight:bold;cursor:pointer;padding:0 18px}
.stats{display:flex;gap:8px;margin-top:18px}
.stats div{border:1px solid var(--line);background:#030a03;padding:13px 16px;min-width:105px}
.stats b,.stats span{display:block}.stats b{font-family:"Press Start 2P";font-size:16px;color:var(--green)}.stats span{font-size:8px;color:#668566;margin-top:8px}

.hero-stage{position:relative;min-height:590px;display:grid;place-items:center;overflow:hidden}
.stage-grid{
  position:absolute;inset:8% 2%;border:1px solid rgba(57,255,20,.12);
  background-image:linear-gradient(rgba(57,255,20,.11) 1px,transparent 1px),linear-gradient(90deg,rgba(57,255,20,.11) 1px,transparent 1px);
  background-size:26px 26px;
  transform:perspective(520px) rotateX(8deg) rotateZ(-3deg)
}
.hero-bull{width:114%;position:relative;z-index:4;filter:drop-shadow(0 0 18px rgba(57,255,20,.6));animation:charge 2.1s steps(8) infinite}
@keyframes charge{50%{transform:translate(8px,-8px)}}
.pixel-orbit{position:absolute;border:1px dashed rgba(57,255,20,.45);border-radius:50%;animation:spin 10s linear infinite}
.orbit-a{width:440px;height:440px}.orbit-b{width:520px;height:520px;animation-direction:reverse;animation-duration:14s}
@keyframes spin{to{transform:rotate(360deg)}}
.candle-stack{position:absolute;right:5%;bottom:10%;display:flex;gap:9px;align-items:end;z-index:2}
.candle-stack i{display:block;width:22px;height:var(--h);background:rgba(57,255,20,.09);border:2px solid var(--green);box-shadow:0 0 12px rgba(57,255,20,.45);position:relative}
.candle-stack i:before,.candle-stack i:after{content:"";position:absolute;width:2px;background:var(--green);left:50%;transform:translateX(-50%)}
.candle-stack i:before{height:28px;top:-28px}.candle-stack i:after{height:23px;bottom:-23px}
.sprite-label{position:absolute;left:3%;bottom:5%;z-index:5;background:#020702;border:1px solid var(--green);padding:10px 12px;font-size:9px;color:#9eb59e}
.sprite-label span{display:block;margin-top:5px}

.game-strip{border-block:1px solid var(--line);background:#030a03;overflow:hidden;padding:15px 0}
.game-strip-inner{display:flex;gap:46px;width:max-content;color:var(--green);font-family:"Press Start 2P";font-size:8px;animation:sideScroll 22s linear infinite}
@keyframes sideScroll{to{transform:translateX(-35%)}}

.story,.roadmap,.chart-section,.herd{padding:120px 0}
.section-head{display:flex;align-items:flex-start;gap:22px;margin-bottom:52px}
.section-head .num{
  font-family:"Press Start 2P";font-size:12px;background:var(--green);color:#001300;padding:10px;
  box-shadow:5px 5px #0b4a10
}
.section-head h3{font-size:clamp(42px,5.5vw,78px);margin:15px 0 0}
.story-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:18px}
.pixel-panel{border:2px solid var(--green);background:rgba(2,9,2,.93);box-shadow:var(--shadow);position:relative}
.pixel-panel:after{
  content:"";position:absolute;inset:6px;border:1px solid rgba(57,255,20,.15);pointer-events:none
}
.panel-bar{
  min-height:40px;border-bottom:2px solid var(--green);display:flex;align-items:center;justify-content:space-between;
  padding:0 13px;background:#092009;color:var(--green);font-size:9px;font-weight:bold
}
.art-window{min-height:500px;display:grid;place-items:center;position:relative;overflow:hidden;
background-image:linear-gradient(rgba(57,255,20,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(57,255,20,.07) 1px,transparent 1px);
background-size:18px 18px}
.art-window img{width:96%;filter:drop-shadow(0 0 24px rgba(57,255,20,.35));animation:headPulse 2.4s steps(6) infinite}
@keyframes headPulse{50%{transform:scale(1.025);filter:drop-shadow(0 0 36px rgba(57,255,20,.65))}}
.target{position:absolute;width:44px;height:44px;border:1px solid var(--green)}
.target:before,.target:after{content:"";position:absolute;background:var(--green)}
.target:before{width:1px;height:58px;left:50%;top:-7px}.target:after{height:1px;width:58px;top:50%;left:-7px}
.t1{left:13%;top:20%}.t2{right:17%;top:35%}.t3{left:46%;bottom:17%}
.terminal-body{padding:28px 30px;font-size:15px;line-height:1.8;color:#b5c9b4}
.terminal-body em{font-style:normal;color:var(--green)}.terminal-body hr{border:0;border-top:1px dashed var(--line);margin:24px 0}
.loadbar{border:1px solid var(--line);height:36px;margin-top:28px;position:relative;overflow:hidden}
.loadbar i{display:block;height:100%;width:99%;background:repeating-linear-gradient(90deg,var(--green) 0 16px,transparent 16px 20px);opacity:.45}
.loadbar span{position:absolute;inset:0;display:grid;place-items:center;color:white;font-size:9px;font-weight:bold}

.roadmap{border-top:1px solid var(--line)}
.levels{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.level-card{
  min-height:340px;padding:19px;border:2px solid var(--line);background:linear-gradient(180deg,rgba(8,25,8,.96),rgba(2,7,2,.96));
  transition:.14s steps(2);position:relative;overflow:hidden
}
.level-card:before{
  content:"";position:absolute;inset:0;opacity:.22;background:linear-gradient(135deg,transparent 0 70%,rgba(57,255,20,.3) 70% 72%,transparent 72%)
}
.level-card:hover{border-color:var(--green);transform:translateY(-7px);box-shadow:var(--shadow)}
.level-top{display:flex;justify-content:space-between;color:#789678;font-size:9px}
.level-top b{color:var(--green)}.level-icon{font-family:"Press Start 2P";font-size:44px;color:var(--green);margin:38px 0;text-shadow:5px 5px #0b4610}
.level-card h4{font-family:"Press Start 2P";font-size:20px;margin:0 0 18px}
.level-card p{font-size:13px;line-height:1.7;color:#91a891}
.xp{position:absolute;left:19px;bottom:18px;color:#5d7d5d;font-size:9px}
.roadmap-note{font-size:10px;color:#527052;margin-top:18px}

.chart-section{border-top:1px solid var(--line)}
.chart-shell{overflow:hidden}.chart-bar{font-size:9px}.live-dot{display:inline-block;width:8px;height:8px;background:var(--green);box-shadow:0 0 13px var(--green);margin-right:7px}
.chart-frame{height:690px;position:relative;background:#010401}
.chart-frame iframe{width:100%;height:100%;border:0;display:none}
.chart-placeholder{position:absolute;inset:0}
.fake-chart{position:absolute;inset:0;overflow:hidden}
.fake-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(57,255,20,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(57,255,20,.08) 1px,transparent 1px);background-size:48px 48px}
.fake-chart img{position:absolute;right:8%;top:9%;width:53%;opacity:.32;filter:drop-shadow(0 0 22px #39ff14)}
.fake-candles i{position:absolute;left:var(--x);top:var(--y);width:24px;height:var(--h);border:2px solid var(--green);background:rgba(57,255,20,.12);box-shadow:0 0 16px rgba(57,255,20,.24)}
.fake-candles i:before,.fake-candles i:after{content:"";position:absolute;width:2px;height:26px;background:var(--green);left:50%;transform:translateX(-50%)}
.fake-candles i:before{top:-26px}.fake-candles i:after{bottom:-26px}
.connect-note{position:absolute;left:50%;bottom:8%;transform:translateX(-50%);border:1px solid var(--green);background:#020802;padding:14px 18px;text-align:center;box-shadow:var(--shadow)}
.connect-note b,.connect-note span{display:block}.connect-note b{font-size:11px}.connect-note span{font-size:8px;color:#6b8b6b;margin-top:8px}

.herd{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center;border-top:1px solid var(--line)}
.herd-art{position:relative;min-height:540px;display:grid;place-items:center}
.herd-art img{width:100%;position:relative;z-index:2;filter:drop-shadow(0 0 26px rgba(57,255,20,.45));animation:herdHead 2s steps(5) infinite}
@keyframes herdHead{50%{transform:translateY(-8px)}}
.ring{position:absolute;border:2px dashed rgba(57,255,20,.25);border-radius:50%;animation:spin 13s linear infinite}
.r1{width:280px;height:280px}.r2{width:390px;height:390px;animation-direction:reverse}.r3{width:500px;height:500px}
.herd h3{font-size:clamp(50px,6vw,88px);margin:20px 0}.herd-copy>p{color:#9fb69e;line-height:1.7}
.social-stack{margin-top:32px;border-top:1px solid var(--line)}
.social-stack a{display:grid;grid-template-columns:48px 1fr auto;align-items:center;padding:18px 5px;border-bottom:1px solid var(--line);transition:.13s steps(2)}
.social-stack a:hover{background:#061406;padding-left:15px;color:var(--green)}
.social-stack b{font-size:9px;color:#5e7a5e}.social-stack span{font-family:"Press Start 2P";font-size:12px}.social-stack i{font-style:normal;font-size:20px}

.final-boss{
  border-block:2px solid var(--green);position:relative;overflow:hidden;text-align:center;
  background:linear-gradient(rgba(2,8,2,.78),rgba(2,8,2,.92));
}
.final-boss:before{
  content:"";position:absolute;inset:-40px;background:
  repeating-linear-gradient(90deg,transparent 0 44px,rgba(57,255,20,.05) 44px 45px),
  repeating-linear-gradient(0deg,transparent 0 44px,rgba(57,255,20,.05) 44px 45px);
  animation:noiseShift .5s steps(2) infinite
}
.final-inner{padding:100px 0}.final-mini{color:var(--green);font-size:9px;letter-spacing:.2em}
.final-boss h3{font-size:clamp(56px,9vw,120px);margin:28px 0 38px}
.footer{display:grid;grid-template-columns:auto 1fr 1fr;gap:28px;align-items:center;padding:42px 0 60px;color:#587558;font-size:9px}
.risk{text-align:right}

@media(max-width:920px){
  .nav-links{display:none}
  .hero,.story-grid,.herd{grid-template-columns:1fr}
  .hero{padding-top:80px}
  .hero-stage{min-height:490px}
  .levels{grid-template-columns:1fr 1fr}
  .footer{grid-template-columns:1fr}.risk{text-align:left}
}
@media(max-width:590px){
  .shell{width:min(100% - 22px,1200px)}
  .boot{display:none}.gate-footer{font-size:6px}
  .gate h1{font-size:58px}.glitch-sub{font-size:8px;max-width:320px}
  .nav{height:70px}.logo{font-size:14px}
  .hero h2{font-size:48px}.hero-stage{min-height:390px}.hero-bull{width:135%}
  .stats{overflow-x:auto}.stats div{min-width:92px}
  .section-head h3{font-size:38px}.levels{grid-template-columns:1fr}
  .chart-frame{height:570px}.fake-chart img{width:80%;right:-10%;top:18%}
  .herd h3{font-size:49px}.herd-art{min-height:380px}.r3{width:360px;height:360px}.r2{width:300px;height:300px}.r1{width:220px;height:220px}
  .social-stack span{font-size:9px}
}
@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}
}