:root{
  --bg:#07060f; --bg2:#0e0c1f; --card:#141130; --line:#2a2560;
  --txt:#ecebff; --mut:#a3a0c9; --neon:#ff2bd6; --cyan:#22e4ff; --lime:#b6ff3b; --gold:#ffc83d;
  --r:18px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--txt);font:16px/1.6 Inter,system-ui,sans-serif;overflow-x:hidden}
a{color:inherit;text-decoration:none}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}
.pix{font-family:"Press Start 2P",monospace;letter-spacing:.5px}
.mono{font-family:"JetBrains Mono",monospace}

/* fundo: grade synthwave + scanlines */
.bgfx{position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
   radial-gradient(1200px 600px at 80% -10%,#3b0b5e88,transparent 60%),
   radial-gradient(900px 500px at -10% 30%,#0b3b5e66,transparent 60%),
   var(--bg)}
.bgfx:after{content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(0deg,#ffffff06 0 1px,transparent 1px 3px)}

/* nav */
nav{position:sticky;top:0;z-index:20;backdrop-filter:blur(10px);background:#07060fcc;border-bottom:1px solid var(--line)}
nav .wrap{display:flex;align-items:center;justify-content:space-between;height:64px;gap:12px}
.logo{display:flex;align-items:center;gap:10px;font-size:13px}
.logo b{color:var(--neon);text-shadow:0 0 12px var(--neon)}
.logo small{display:block;font-family:Inter;font-size:11px;color:var(--mut);letter-spacing:0}
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 20px;border-radius:12px;font-weight:800;cursor:pointer;border:0;transition:.2s transform,.2s box-shadow}
.btn:hover{transform:translateY(-2px)}
.btn-neon{background:linear-gradient(135deg,var(--neon),#8a2bff);color:#fff;box-shadow:0 0 24px #ff2bd655}
.btn-neon:hover{box-shadow:0 0 36px #ff2bd699}
.btn-ghost{border:1px solid var(--line);color:var(--txt);background:#ffffff08}

/* hero */
.hero{padding:72px 0 40px}
.hero .wrap{display:grid;grid-template-columns:1.05fr 1fr;gap:48px;align-items:center}
.tag{display:inline-block;padding:6px 12px;border:1px solid var(--line);border-radius:99px;font-size:13px;color:var(--cyan);background:#22e4ff10;margin-bottom:18px}
h1{font-size:clamp(34px,5.4vw,58px);line-height:1.05;font-weight:800;letter-spacing:-1.5px}
h1 .g{background:linear-gradient(90deg,var(--neon),var(--cyan));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p.lead{color:var(--mut);font-size:19px;margin:18px 0 28px;max-width:540px}
.cta{display:flex;gap:12px;flex-wrap:wrap}

/* monitor animado: EmulationStation <-> Desktop */
.monitor{position:relative;border-radius:20px;padding:14px;background:linear-gradient(160deg,#25204f,#0f0d24);border:1px solid var(--line);box-shadow:0 30px 80px #000a,0 0 60px #ff2bd622}
.screen{position:relative;aspect-ratio:16/10;border-radius:10px;overflow:hidden;background:#000}
.scene{position:absolute;inset:0;transition:opacity .5s}
.es{background:radial-gradient(circle at 50% 30%,#2a1060,#0a0618);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;animation:esA 8s infinite}
.es .t{font-size:11px;color:var(--gold)}
.es .row{display:flex;gap:10px}
.es .tile{width:62px;height:44px;border-radius:8px;background:#ffffff14;border:1px solid #ffffff22}
.es .tile.on{background:linear-gradient(135deg,var(--neon),#7a2bff);box-shadow:0 0 18px var(--neon);animation:pulse 1.2s infinite alternate}
.desk{background:linear-gradient(135deg,#123a5c,#1b1046);animation:dkA 8s infinite}
.desk .bar{position:absolute;left:0;right:0;bottom:0;height:22px;background:#0b0a1cdd;display:flex;align-items:center;gap:6px;padding:0 8px}
.desk .bar i{width:14px;height:14px;border-radius:3px;background:#ffffff33}
.desk .bar i:first-child{background:var(--cyan)}
.win{position:absolute;border-radius:6px;background:#f2f2f7;box-shadow:0 8px 20px #0008;overflow:hidden}
.win:before{content:"";display:block;height:12px;background:#d9d9e3}
.w1{left:8%;top:10%;width:46%;height:52%}
.w2{left:42%;top:30%;width:50%;height:48%;background:#1e1e2e}
.w2:before{background:#2d2d44}
.w1 .ln,.w2 .ln{height:6px;margin:6px 8px;border-radius:3px;background:#c9c9d6}
.w2 .ln{background:#ff2bd6aa}.w2 .ln:nth-child(2n){background:#22e4ffaa}
.key{position:absolute;right:-14px;top:-14px;padding:10px 12px;border-radius:10px;background:#fff;color:#111;font:700 14px "JetBrains Mono";box-shadow:0 6px 0 #9993,0 0 30px #fff6;animation:press 4s infinite}
.cap{text-align:center;color:var(--mut);font-size:13px;margin-top:12px}
@keyframes esA{0%,45%{opacity:1}50%,95%{opacity:0}100%{opacity:1}}
@keyframes dkA{0%,45%{opacity:0}50%,95%{opacity:1}100%{opacity:0}}
@keyframes press{0%,88%{transform:translateY(0)}92%{transform:translateY(5px);box-shadow:0 1px 0 #9993}100%{transform:translateY(0)}}
@keyframes pulse{to{transform:scale(1.08)}}

/* faixa de selos */
.badges{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;padding:26px 0 8px}
.badge{display:flex;align-items:center;gap:8px;padding:10px 16px;border-radius:99px;background:var(--card);border:1px solid var(--line);font-size:14px;color:var(--mut)}
.badge b{color:var(--lime)}

section{padding:72px 0}
.h2{font-size:clamp(26px,3.6vw,38px);font-weight:800;letter-spacing:-.8px;text-align:center}
.sub{color:var(--mut);text-align:center;max-width:640px;margin:12px auto 44px}

/* features */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{position:relative;padding:26px;border-radius:var(--r);background:linear-gradient(180deg,var(--card),#0f0d26);border:1px solid var(--line);transition:.25s transform,.25s border-color}
.card:hover{transform:translateY(-4px);border-color:#ff2bd688}
.card .ic{width:48px;height:48px;border-radius:12px;display:grid;place-items:center;margin-bottom:16px;background:#ff2bd618;color:var(--neon)}
.card:nth-child(3n+2) .ic{background:#22e4ff18;color:var(--cyan)}
.card:nth-child(3n) .ic{background:#b6ff3b18;color:var(--lime)}
.card h3{font-size:19px;margin-bottom:8px}
.card p{color:var(--mut);font-size:15px}
.card .star{position:absolute;top:16px;right:16px;font-size:10px;color:var(--gold)}

/* terminal */
.how{display:grid;grid-template-columns:1fr 1.1fr;gap:40px;align-items:center}
.steps{display:flex;flex-direction:column;gap:18px}
.step{display:flex;gap:16px;align-items:flex-start}
.step .n{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-size:12px;background:var(--neon);color:#fff;box-shadow:0 0 18px #ff2bd677}
.step h4{font-size:18px}
.step p{color:var(--mut);font-size:15px}
.term{border-radius:14px;background:#05040c;border:1px solid var(--line);box-shadow:0 20px 60px #0009;overflow:hidden}
.term .top{display:flex;gap:6px;padding:10px 12px;background:#121027}
.term .top i{width:11px;height:11px;border-radius:50%;background:#ff5f57}.term .top i:nth-child(2){background:#febc2e}.term .top i:nth-child(3){background:#28c840}
.term pre{padding:18px;font:13px/1.7 "JetBrains Mono",monospace;color:#cfd2ff;overflow-x:auto}
.c1{color:var(--neon)}.c2{color:var(--cyan)}.c3{color:var(--lime)}.c4{color:var(--gold)}.cm{color:#6f6c99}
.cursor{display:inline-block;width:8px;height:15px;background:var(--lime);vertical-align:-2px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

/* público */
.two{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.aud{padding:30px;border-radius:var(--r);border:1px solid var(--line);background:var(--card)}
.aud h3{font-size:22px;margin-bottom:12px}
.aud ul{list-style:none;display:flex;flex-direction:column;gap:8px;color:var(--mut)}
.aud li:before{content:"▸ ";color:var(--cyan)}

/* preços */
.prices{display:grid;grid-template-columns:1fr 1fr;gap:22px;max-width:860px;margin:0 auto}
.price{padding:32px;border-radius:22px;background:var(--card);border:1px solid var(--line);display:flex;flex-direction:column}
.price.hot{border:2px solid var(--neon);box-shadow:0 0 50px #ff2bd633;position:relative}
.price.hot:before{content:"MAIS ESCOLHIDO";position:absolute;top:-13px;left:50%;transform:translateX(-50%);padding:5px 12px;border-radius:99px;background:var(--neon);font:10px "Press Start 2P"}
.price h3{font-size:20px}
.price .v{font-size:48px;font-weight:800;margin:10px 0 2px}
.price .v small{font-size:18px;color:var(--mut);font-weight:600}
.price .pf{color:var(--mut);font-size:14px;margin-bottom:18px}
.price ul{list-style:none;display:flex;flex-direction:column;gap:9px;margin-bottom:26px;flex:1}
.price li:before{content:"✓ ";color:var(--lime);font-weight:800}
.price li.off{color:#5f5c86}.price li.off:before{content:"✕ ";color:#5f5c86}
.price .btn{justify-content:center}
.safe{text-align:center;color:var(--mut);font-size:14px;margin-top:22px}

/* faq */
.faq{max-width:780px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
details{border:1px solid var(--line);border-radius:14px;background:var(--card);padding:18px 22px}
summary{cursor:pointer;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:12px}
summary:after{content:"+";color:var(--neon);font-weight:800}
details[open] summary:after{content:"–"}
details p{color:var(--mut);margin-top:10px;font-size:15px}

/* cta final */
.final{text-align:center;padding:64px 24px;border-radius:26px;background:linear-gradient(135deg,#2a0b4a,#0b2a4a);border:1px solid var(--line);position:relative;overflow:hidden}
.final h2{font-size:clamp(26px,4vw,42px);font-weight:800;margin-bottom:12px}
.final p{color:#c9c6ef;margin-bottom:26px}
footer{padding:40px 0 60px;color:#6f6c99;font-size:13px;text-align:center}
footer p{max-width:760px;margin:6px auto}

@media (max-width:900px){
  .hero .wrap,.how,.two,.prices{grid-template-columns:1fr}
  .grid{grid-template-columns:1fr 1fr}
  .hero{padding-top:40px}
  .monitor{margin:0 10px}
}
@media (max-width:600px){
  .grid{grid-template-columns:1fr}
  nav .logo small{display:none}
  nav .btn{padding:10px 14px;font-size:14px}
  section{padding:56px 0}
}