:root{
  --bg:#0B0B0F;
  --bg2:#101019;
  --surface:#15151F;
  --surface2:#1B1B27;
  --line:#2A2A3C;
  --ink:#E9E9F4;
  --dim:#8C8CA6;
  --cyan:#2BE8FF;
  --green:#54FF8E;
  --violet:#B57BFF;
  --amber:#FFC857;
  --glow-cyan:0 0 4px rgba(43,232,255,.6), 0 0 18px rgba(43,232,255,.35);
  --glow-green:0 0 4px rgba(84,255,142,.55), 0 0 18px rgba(84,255,142,.3);
  --glow-violet:0 0 6px rgba(181,123,255,.7), 0 0 24px rgba(181,123,255,.4);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:'VT323',monospace;
  font-size:21px;
  line-height:1.35;
  overflow-x:hidden; /* defensivo — testado sem overflow real em 320–3840px; mantido como rede de segurança */
  position:relative;
  -webkit-font-smoothing:none;
  image-rendering:pixelated;
}
/* atmosfera: gradiente radial + grão */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(43,232,255,.10), transparent 55%),
    radial-gradient(90% 60% at 50% 115%, rgba(181,123,255,.10), transparent 60%);
}
/* scanlines + flicker CRT */
.crt{position:fixed;inset:0;z-index:9999;pointer-events:none;}
.crt::before{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0 2px, rgba(0,0,0,.22) 2px 4px);
  mix-blend-mode:multiply;
}
.crt::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(120% 120% at 50% 50%, transparent 60%, rgba(0,0,0,.55) 100%);
  animation:flicker 7s infinite steps(60);
}
@keyframes flicker{0%,100%{opacity:1}96%{opacity:1}97%{opacity:.86}98%{opacity:1}99%{opacity:.92}}

.wrap{position:relative;z-index:1;max-width:1040px;margin:0 auto;padding:0 24px}

h1,h2,h3{font-family:'Press Start 2P',monospace;line-height:1.55;letter-spacing:.5px}

/* ---------- HERO ---------- */
header{min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:80px 0 60px}
.boot{color:var(--green);font-size:22px;margin-bottom:28px;min-height:1.4em;text-shadow:var(--glow-green);white-space:pre-line}
.boot .cursor{display:inline-block;width:.55em;height:1.05em;background:var(--green);margin-left:2px;transform:translateY(3px);animation:blink 1s steps(1) infinite;box-shadow:var(--glow-green)}
@keyframes blink{50%{opacity:0}}

.sigil{width:64px;height:64px;margin-bottom:26px;filter:drop-shadow(0 0 8px rgba(43,232,255,.5))}
.wordmark{
  font-family:'Press Start 2P',monospace;
  font-size:clamp(48px,12vw,116px);
  line-height:1.35;
  color:var(--cyan);
  letter-spacing:6px;
  text-shadow:0 0 6px rgba(43,232,255,.55), 0 0 28px rgba(43,232,255,.35), 6px 6px 0 #06303a;
  margin-bottom:22px;
}
.tagline{font-size:clamp(26px,4vw,38px);color:var(--ink);max-width:22ch;margin-bottom:10px}
.tagline b{color:var(--green);text-shadow:var(--glow-green)}
.subtag{font-size:clamp(20px,2.6vw,26px);color:var(--dim);max-width:46ch;margin-bottom:40px}
.domain{font-family:'Press Start 2P',monospace;font-size:13px;color:var(--violet);text-shadow:var(--glow-violet)}

.cta-row{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.btn{
  font-family:'Press Start 2P',monospace;font-size:12px;text-decoration:none;
  padding:16px 22px;color:var(--bg);background:var(--cyan);
  border:none;position:relative;cursor:pointer;
  clip-path:polygon(0 8px,8px 8px,8px 0,calc(100% - 8px) 0,calc(100% - 8px) 8px,100% 8px,100% calc(100% - 8px),calc(100% - 8px) calc(100% - 8px),calc(100% - 8px) 100%,8px 100%,8px calc(100% - 8px),0 calc(100% - 8px));
  box-shadow:var(--glow-cyan);
  transition:transform .12s steps(2), filter .12s;
}
.btn.ghost{background:transparent;color:var(--cyan);box-shadow:inset 0 0 0 3px var(--cyan), var(--glow-cyan)}
.btn:hover{transform:translateY(-3px);filter:brightness(1.12)}
.btn-stream{margin-top:20px;display:inline-block}
a:focus-visible,button:focus-visible{outline:3px solid var(--cyan);outline-offset:3px}
a:visited{opacity:.85}

.scrollhint{margin-top:34px;color:var(--dim);font-size:20px}
.scrollhint span{color:var(--cyan);animation:bob 1.6s ease-in-out infinite;display:inline-block}
@keyframes bob{50%{transform:translateY(6px)}}

/* ---------- SECTIONS ---------- */
section{padding:70px 0;border-top:3px solid var(--line)}
.eyebrow{font-family:'Press Start 2P',monospace;font-size:11px;color:var(--green);text-shadow:var(--glow-green);margin-bottom:18px;display:flex;align-items:center;gap:12px}
.eyebrow::before{content:"";width:26px;height:3px;background:var(--green);box-shadow:var(--glow-green)}
.section-title{font-size:clamp(22px,4vw,30px);color:var(--ink);margin-bottom:14px}
.lead{font-size:24px;color:var(--dim);max-width:60ch;margin-bottom:42px}
.lead b{color:var(--ink)}

/* pilares */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{
  background:linear-gradient(160deg,var(--surface),var(--bg2));
  border:3px solid var(--line);padding:26px 22px;position:relative;
  transition:transform .14s steps(2), border-color .14s, box-shadow .14s;
}
.card:hover{transform:translateY(-6px);border-color:var(--accent);box-shadow:0 0 0 1px var(--accent), 0 0 22px -2px var(--accent)}
.card .ico{width:48px;height:48px;margin-bottom:18px}
.card h3{font-size:14px;color:var(--accent);margin-bottom:14px;text-shadow:0 0 8px var(--accent)}
.card p{font-size:21px;color:var(--ink);margin-bottom:18px}
.tools{list-style:none;display:flex;flex-wrap:wrap;gap:7px}
.tools li{font-size:17px;color:var(--dim);border:2px solid var(--line);padding:2px 9px;background:#0e0e16}
.c1{--accent:var(--cyan)} .c2{--accent:var(--green)} .c3{--accent:var(--violet)}

/* bananal */
.banner{
  display:grid;grid-template-columns:1.05fr 1fr;gap:34px;align-items:center;
  border:3px solid #B89544;background:linear-gradient(160deg,#16121f,#0c0a10);
  padding:36px;position:relative;
  clip-path:polygon(0 14px,14px 14px,14px 0,calc(100% - 14px) 0,calc(100% - 14px) 14px,100% 14px,100% calc(100% - 14px),calc(100% - 14px) calc(100% - 14px),calc(100% - 14px) 100%,14px 100%,14px calc(100% - 14px),0 calc(100% - 14px));
  box-shadow:0 0 30px -6px rgba(184,149,68,.4);
}
.badge{display:inline-block;font-family:'Press Start 2P',monospace;font-size:10px;color:var(--bg);background:#D9B45C;padding:7px 11px;margin-bottom:18px;box-shadow:0 0 12px rgba(217,180,92,.55)}
.banner h2{font-size:clamp(22px,5vw,34px);color:#E0BC64;text-shadow:0 0 6px rgba(217,180,92,.6),0 0 22px rgba(184,149,68,.35);margin-bottom:14px;letter-spacing:2px}
.banner .working{color:var(--dim);font-family:'Press Start 2P',monospace;font-size:9px;margin-left:10px}
.platline{font-family:'Press Start 2P',monospace;font-size:9px;color:#7e8a72;letter-spacing:.5px;margin-bottom:20px}
.banner p.logline{font-size:23px;color:var(--ink);margin-bottom:22px}
.meta{display:flex;flex-direction:column;gap:12px;margin-bottom:20px}
.meta div{font-size:20px;color:var(--dim);line-height:1.3}
.meta b{color:#E0BC64}
.party{font-size:19px;color:var(--dim);border-top:2px dashed #3a3322;padding-top:16px;margin-bottom:14px}
.party b{color:#9FBE8C}
.insp{font-size:18px;color:var(--dim)}
.insp span{color:#E0BC64}

/* a "tela" do jogo: 3 faces da Cidade Dobrada */
.screen{
  aspect-ratio:16/10;border:4px solid #20212a;position:relative;overflow:hidden;
  box-shadow:inset 0 0 30px rgba(0,0,0,.7), 0 0 22px -4px rgba(184,149,68,.35);
  background:#05050a;
}
.layer{position:absolute;left:0;right:0;display:flex;align-items:center;justify-content:center;font-family:'Press Start 2P',monospace;font-size:9px;letter-spacing:1px}
.l-concreto{top:0;height:34%;background:linear-gradient(180deg,#262730,#15161c);color:#cfc8b4}
.l-vao{top:34%;height:33%;background:linear-gradient(180deg,#2E1A3C,#3c0f16);color:#f0b0b0;text-shadow:0 0 8px rgba(139,26,26,.8)}
.l-abobada{top:67%;height:33%;background:linear-gradient(180deg,#3a3320,#1b2a22);color:#E0BC64;text-shadow:0 0 8px rgba(184,149,68,.5)}
.faces-legend{font-size:17px;color:var(--dim);margin-top:12px;text-align:center}
.faces-legend .f-concreto{color:#cfc8b4}.faces-legend .f-vao{color:#f0b0b0}.faces-legend .f-abobada{color:#E0BC64}
.screen::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(to bottom,transparent 0 2px,rgba(0,0,0,.25) 2px 3px);pointer-events:none}
.screen .lucidez{position:absolute;bottom:6px;left:8px;font-family:'VT323',monospace;font-size:16px;color:var(--green);text-shadow:var(--glow-green);z-index:2}
.screen .lucidez i{display:inline-block;width:7px;height:11px;background:var(--green);margin-right:2px;box-shadow:var(--glow-green)}
.screen .lucidez i.off{background:#1e3a26;box-shadow:none}

/* stream */
.stream{display:grid;grid-template-columns:auto 1fr;gap:26px;align-items:center;background:var(--surface);border:3px solid var(--line);padding:30px}
.live{font-family:'Press Start 2P',monospace;font-size:11px;color:var(--bg);background:#ff4d6d;padding:9px 13px;white-space:nowrap;box-shadow:0 0 14px rgba(255,77,109,.5);position:relative}
.live::before{content:"●";color:#fff;margin-right:6px;animation:blink 1.2s steps(1) infinite}
.stream p{font-size:23px}
.stream p b{color:var(--cyan)}
.stream small{display:block;font-size:19px;color:var(--dim);margin-top:6px}

/* links */
.links{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-top:8px}
.link{
  display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);
  border:3px solid var(--line);background:var(--surface);padding:16px;font-size:20px;
  transition:border-color .12s,transform .12s steps(2),color .12s;
}
.link:hover{border-color:var(--cyan);color:var(--cyan);transform:translateY(-3px)}
.link .dot{width:14px;height:14px;background:var(--accent,var(--cyan));box-shadow:0 0 10px var(--accent,var(--cyan))}
.link small{display:block;font-size:14px;color:var(--dim)}
.link-itch{--accent:#FA5C5C}
.link-band{--accent:#54FF8E}
.link-live{--accent:#B57BFF}
.link-code{--accent:#2BE8FF}

footer{border-top:3px solid var(--line);padding:40px 0 60px;text-align:center;color:var(--dim);font-size:19px}
footer .fm{font-family:'Press Start 2P',monospace;font-size:18px;color:var(--cyan);text-shadow:var(--glow-cyan);letter-spacing:4px;margin-bottom:14px;display:inline-block}
footer a{color:var(--violet);text-decoration:underline;display:inline-block;min-height:24px;padding-block:4px}
footer .foot-line{margin-top:14px}

/* reveal anim */
.reveal{opacity:0;transform:translateY(18px);animation:rise .6s ease forwards}
.pre-reveal{opacity:0;transform:translateY(18px)}
.pre-reveal.is-in{animation:rise .6s ease forwards}
@keyframes rise{to{opacity:1;transform:none}}

/* delays escalonados do hero, antes aplicados via style="animation-delay" inline */
.delay-1{animation-delay:.1s}
.delay-2{animation-delay:.2s}
.delay-3{animation-delay:.35s}
.delay-4{animation-delay:.5s}
.delay-5{animation-delay:.65s}
.delay-6{animation-delay:.8s}
.delay-7{animation-delay:1s}

@media(max-width:820px){
  .banner{grid-template-columns:1fr}
  .pillars{grid-template-columns:1fr}
  .stream{grid-template-columns:1fr;text-align:center;justify-items:center}
  body{font-size:19px}
}
@media(max-width:560px){
  .wrap{padding:0 16px}
  section{padding:52px 0}
  .banner{padding:22px 18px}
  .btn{font-size:10px;padding:14px 16px}
  .lead{font-size:21px;margin-bottom:32px}
  .stream{padding:22px 18px}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important}
  .reveal{opacity:1;transform:none}
  .pre-reveal{opacity:1;transform:none}
  .boot .cursor{animation:blink 1s steps(1) infinite}
  html{scroll-behavior:auto}
}