@font-face { font-family:'VCR OSD Mono'; src:url('/VCR-OSD-Mono.ttf') format('truetype'); font-display:swap; }
:root {
  --bg:#06070a; --bg-soft:#0b0d12; --text:#f4f6fb; --muted:#9aa3b2; --line:rgba(255,255,255,.08);
  --red:#d10f23; --red-glow:rgba(209,15,35,.5); --blue:#56c6ff; --blue-glow:rgba(86,198,255,.45);
  --ease:cubic-bezier(.16,1,.3,1); --mono:'VCR OSD Mono', monospace;
}
* { box-sizing:border-box; margin:0; padding:0 }
html { color-scheme:dark }
body { background:var(--bg); color:var(--text); font-family:'Inter', system-ui, sans-serif; line-height:1.6; min-height:100vh; display:flex; flex-direction:column; -webkit-font-smoothing:antialiased; overflow-x:hidden }
a { color:inherit; text-decoration:none }
::selection { background:var(--red); color:#fff }
[hidden] { display:none !important }

header { position:sticky; top:0; z-index:100; background:rgba(6,7,10,.78); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom:1px solid var(--line) }
nav { max-width:1200px; margin:0 auto; padding:18px 24px; display:flex; align-items:center; justify-content:space-between; gap:12px }
.logo { font-family:var(--mono); font-size:1.5rem; letter-spacing:.02em; display:flex; align-items:center; gap:8px }
.dot { width:9px; height:9px; border-radius:50%; background:var(--red); box-shadow:0 0 14px 2px var(--red-glow); animation:pulse 2.6s infinite }
@keyframes pulse { 0%,100% { opacity:1; transform:scale(1) } 50% { opacity:.45; transform:scale(.8) } }
.nav-tag { font-family:var(--mono); text-transform:uppercase; font-size:.8rem; letter-spacing:.16em; color:var(--muted) }

main { position:relative; flex:1; padding:64px 24px 90px; overflow:hidden }
.glow { position:absolute; border-radius:50%; filter:blur(130px); z-index:0; pointer-events:none }
.glow.red { width:520px; height:520px; background:var(--red); opacity:.22; top:-200px; right:-120px }
.glow.blue { width:460px; height:460px; background:var(--blue); opacity:.16; top:320px; left:-220px }
.wrap { position:relative; z-index:2; max-width:760px; margin:0 auto }
.wrap.largo { max-width:1100px }

.eyebrow { display:inline-flex; align-items:center; gap:10px; font-size:.8rem; letter-spacing:.22em; text-transform:uppercase; margin-bottom:22px; font-weight:500; color:var(--muted) }
.eyebrow span { width:30px; height:1px; background:var(--red) }
h1 { font-family:var(--mono); font-size:clamp(2.2rem,6.4vw,4rem); font-weight:400; line-height:1.05; margin-bottom:18px; text-transform:uppercase; overflow-wrap:anywhere }
h2 { font-family:var(--mono); text-transform:uppercase; font-size:1.05rem; letter-spacing:.08em; font-weight:400; margin-bottom:14px }
.lead { font-size:1.12rem; color:#cdd3dd; max-width:560px; margin-bottom:34px; font-weight:300 }
.dica { color:var(--muted); font-size:.92rem; font-weight:300 }

.cartao { background:var(--bg-soft); border:1px solid var(--line); border-radius:18px; padding:30px 24px }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:9px; padding:14px 26px; border-radius:100px; font-size:.95rem; font-family:var(--mono); text-transform:uppercase; letter-spacing:.04em; border:none; background:var(--red); color:#fff; cursor:pointer; transition:transform .3s var(--ease), box-shadow .3s var(--ease), opacity .3s }
.btn:hover { transform:translateY(-2px); box-shadow:0 12px 36px -8px var(--red-glow) }
.btn:disabled { opacity:.35; pointer-events:none }
.btn-ghost { background:transparent; color:var(--text); border:1px solid rgba(255,255,255,.18) }
.btn-ghost:hover { border-color:var(--blue); box-shadow:none }
.btn-sm { padding:9px 16px; font-size:.78rem }
.botoes { display:flex; gap:12px; flex-wrap:wrap; align-items:center }
.link { background:none; border:0; color:var(--muted); font:inherit; font-size:.9rem; cursor:pointer; text-decoration:underline; padding:0 }
.link:hover { color:var(--text) }

.campo { display:flex; flex-direction:column; gap:8px; flex:1; min-width:220px }
.campo label { font-family:var(--mono); text-transform:uppercase; letter-spacing:.16em; font-size:.78rem; color:var(--blue) }
.campo input { width:100%; padding:12px 20px; border-radius:100px; border:1px solid rgba(255,255,255,.18); background:var(--bg); color:var(--text); font:inherit; font-size:1rem }
.campo input:focus { outline:none; border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-glow) }
.campos { display:flex; flex-wrap:wrap; gap:14px; margin-bottom:20px }

.aceite { display:flex; gap:12px; align-items:flex-start; margin:4px 0 24px; color:#cdd3dd; font-weight:300; font-size:.95rem; cursor:pointer }
.aceite input { width:20px; height:20px; margin-top:3px; accent-color:var(--red); flex:none }
.status { font-family:var(--mono); text-transform:uppercase; letter-spacing:.06em; font-size:.82rem; color:var(--blue); min-height:1.4em; margin-top:18px }
.status.erro { color:var(--red) }
.trilho { height:4px; background:rgba(255,255,255,.07); border-radius:2px; overflow:hidden; margin-top:12px }
.barra { height:100%; width:0; background:var(--blue); transition:width .3s var(--ease) }

.grade { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:8px; margin:14px 0 34px }
.grade button { position:relative; aspect-ratio:1; border:0; padding:0; border-radius:10px; overflow:hidden; background:var(--bg-soft); cursor:zoom-in }
.grade img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s var(--ease) }
.grade button:hover img { transform:scale(1.04) }
.secao { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin-top:10px }
.secao h2 { margin:0 }
.secao h2 b { color:var(--blue); font-weight:400 }

.visor { position:fixed; inset:0; z-index:200; background:rgba(3,4,6,.94); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; padding:20px }
.visor img { max-width:100%; max-height:calc(100vh - 120px); border-radius:8px; object-fit:contain }

footer { border-top:1px solid var(--line); padding:30px 24px; background:var(--bg-soft) }
.foot { max-width:1200px; margin:0 auto; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; color:var(--muted); font-size:.9rem; font-weight:300 }
.foot .logo { font-size:1.15rem }

@media (max-width:640px) {
  main { padding:40px 16px 70px }
  nav { padding:14px 16px }
  .nav-tag { display:none }
  .cartao { padding:24px 18px }
  .grade { grid-template-columns:repeat(3,1fr); gap:4px }
  .grade button { border-radius:6px }
  .foot { justify-content:center; text-align:center }
}