/* Tema futurista — "painel de bordo holográfico".
   Carregado depois de style.css; troca cores, fontes e acabamentos sem mudar o funcionamento. */
:root {
  --bg: #07060C;
  --bg-2: #0B0A14;
  --panel: #0E0C18;
  --line: #231D3A;
  --silver: #C9C4E6;
  --text: #EEEBFF;
  --muted: #8E89AD;
  --red: #8B6CFF;
  --red-dark: #5B3FD6;
  --amber: #FFB347;
  --cyan: #46E6FF;
  --ink: #0B0716;
  --pixel: "JetBrains Mono", ui-monospace, monospace;
  --crt: "Unbounded", "Manrope", sans-serif;
  --sans: "Manrope", system-ui, sans-serif;
  --display: "Unbounded", "Manrope", sans-serif;
  --radius: 8px;
  color-scheme: dark;
}

body {
  background-color: var(--bg);
  background-image:
    linear-gradient(rgba(139,108,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(139,108,255,.05) 1px, transparent 1px);
  background-size: 64px 64px;
}
::selection { background: var(--red); color: var(--ink); }

/* Tipografia */
h1, h2, h3 { font-family: var(--display); font-weight: 700; letter-spacing: -.01em; }
h1 { font-weight: 800; text-transform: uppercase; line-height: .95; }
.accent { color: var(--red); text-shadow: 0 0 40px rgba(139,108,255,.55); }
.kicker { font: 500 12px/1.6 var(--pixel); color: var(--cyan); letter-spacing: .16em; }
.sub, .lead { color: #C9C4E6; }
mark { background: var(--red); color: var(--ink); }

/* Cabeçalho */
.topbar { background: rgba(7, 6, 12, .88); border-bottom-color: rgba(139,108,255,.18); }
.brand { font: 700 15px var(--display); letter-spacing: .22em; }
.logo { box-shadow: 0 0 0 1px rgba(139,108,255,.5), 0 0 22px rgba(139,108,255,.45); }
nav a { font: 500 12px var(--pixel); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
@media (max-width: 1180px) and (min-width: 901px) { nav a { padding-inline: 8px; letter-spacing: .06em; } }
.nav-glow { background: rgba(139,108,255,.1); border: 1px solid rgba(139,108,255,.25); }
.nav-glow::after { background: var(--cyan); height: 2px; bottom: -1px; box-shadow: 0 0 10px var(--cyan); }
nav .nav-cta, nav .nav-cta:hover, nav .nav-cta.active { color: var(--ink); font-weight: 700; box-shadow: 0 0 24px rgba(139,108,255,.45); }
.progress i { background: linear-gradient(90deg, var(--red), var(--cyan)); box-shadow: 0 0 10px var(--cyan); }
.menu-btn { font-family: var(--pixel); font-size: 11px; }
@media (max-width: 900px) {
  nav a { font: 800 22px var(--display); text-transform: none; letter-spacing: 0; }
  nav a small { font-family: var(--sans); }
  .nav-title, .nav-foot { font-family: var(--pixel); color: var(--cyan); letter-spacing: .16em; }
  nav .cur { color: var(--cyan); }
}

/* Botões */
.btn { font: 700 12px var(--pixel); letter-spacing: .14em; text-transform: uppercase; border-radius: 10px; }
.btn-primary { color: var(--ink); box-shadow: 0 0 32px rgba(139,108,255,.45); }
.btn-primary:active { box-shadow: 0 0 12px rgba(139,108,255,.45); }
.btn-ghost { border: 1px solid rgba(238,235,255,.35); }

/* Moldura de mira em volta das imagens principais */
.launch-shot, .split-img, .tv-screen { position: relative; }
.hud-frame { position: relative; }
.launch::after { content: none; }
.launch-shot { border-radius: 6px; border-color: rgba(139,108,255,.35); background: #0E0C18; box-shadow: 0 50px 120px -40px rgba(139,108,255,.6); overflow: visible; }
.launch-shot img { border-radius: 6px; }
.launch-shot::before {
  content: ""; position: absolute; inset: -12px; pointer-events: none; z-index: 3;
  --c: var(--cyan); --l: 24px; --t: 2px;
  background:
    linear-gradient(var(--c), var(--c)) top left / var(--l) var(--t),
    linear-gradient(var(--c), var(--c)) top left / var(--t) var(--l),
    linear-gradient(var(--c), var(--c)) top right / var(--l) var(--t),
    linear-gradient(var(--c), var(--c)) top right / var(--t) var(--l),
    linear-gradient(var(--c), var(--c)) bottom left / var(--l) var(--t),
    linear-gradient(var(--c), var(--c)) bottom left / var(--t) var(--l),
    linear-gradient(var(--c), var(--c)) bottom right / var(--l) var(--t),
    linear-gradient(var(--c), var(--c)) bottom right / var(--t) var(--l);
  background-repeat: no-repeat;
}
.launch-badge { color: var(--ink); font: 700 11px var(--pixel); letter-spacing: .16em; border-radius: 4px; box-shadow: none; }
.launch-shot figcaption { font: 500 11px var(--pixel); letter-spacing: .12em; text-transform: uppercase; background: rgba(7,6,12,.85); border: 1px solid rgba(139,108,255,.25); }
.pin b { background: transparent; border: 2px solid var(--cyan); box-shadow: 0 0 14px var(--cyan); }
.pin em { font: 500 11px var(--pixel); letter-spacing: .1em; text-transform: uppercase; background: rgba(7,6,12,.88); border: 1px solid rgba(70,230,255,.5); border-radius: 0; }
.live-dot { background: var(--cyan); box-shadow: 0 0 12px var(--cyan); animation: none; }
.launch h1 { font-size: clamp(44px, 8.4vw, 124px); }

/* Faixa */
.ticker { background: var(--red); color: var(--ink); border-block: 0; }
.ticker-track { font: 700 13px var(--pixel); letter-spacing: .18em; }

/* Origem (antiga capa) */
.hero-title { font-family: var(--display); text-transform: none; }
.stats { border-top-color: rgba(139,108,255,.18); }
.stats dt { font-family: var(--sans); }
.stats dd { font: 700 34px/1 var(--display); color: var(--text); }
.stats dd small { font-size: 16px; color: var(--muted); }
.tv { background: linear-gradient(160deg, #15112A, #0A0814); border-color: rgba(139,108,255,.35); box-shadow: 0 30px 80px -20px rgba(139,108,255,.4); }
.tv-base span { font-family: var(--pixel); color: var(--muted); }

/* História */
.dropcap::first-letter { font: 800 56px/1 var(--display); color: var(--red); }
.story-col p, .split-text p { color: #C9C4E6; }
.polaroid { background: #0E0C18; border: 1px solid rgba(139,108,255,.3); border-radius: 6px; transform: none; }
.polaroid figcaption { color: var(--muted); font: 500 11px var(--pixel); letter-spacing: .1em; text-transform: uppercase; }
.polaroid img { filter: grayscale(.3); }
.note { border: 1px solid rgba(70,230,255,.35); background: rgba(70,230,255,.04); border-radius: 8px; }
.note-tag { font: 700 11px var(--pixel); color: var(--cyan); letter-spacing: .14em; text-transform: uppercase; }
.feature { background: var(--panel); border-color: rgba(139,108,255,.2); }
.feature:hover { border-color: var(--cyan); box-shadow: 0 0 30px -10px rgba(70,230,255,.5); }
.f-icon { background: transparent; border: 1px solid rgba(70,230,255,.4); color: var(--cyan); font: 700 12px var(--pixel); }
.split-img { border-color: rgba(139,108,255,.3); border-radius: 6px; box-shadow: 0 30px 80px -30px rgba(139,108,255,.5); }
.split-img img { filter: saturate(.85); }

/* Linha do tempo */
.section-dark { background: var(--bg-2); border-color: rgba(139,108,255,.14); }
.timeline li { background: var(--panel); border-color: rgba(139,108,255,.2); }
.timeline li::before { background: var(--bg); border: 2px solid var(--red); box-shadow: 0 0 0 4px var(--bg-2); }
.timeline li::after { background: linear-gradient(90deg, rgba(139,108,255,.5), rgba(139,108,255,.15)); }
.timeline .year { font: 500 14px var(--pixel); color: var(--amber); letter-spacing: .08em; }
.timeline .now { border-color: var(--cyan); background: linear-gradient(160deg, rgba(70,230,255,.08), var(--panel)); box-shadow: 0 0 30px -10px rgba(70,230,255,.5); }
.timeline .now::before { background: var(--cyan); border-color: var(--cyan); box-shadow: 0 0 0 4px var(--bg-2), 0 0 18px var(--cyan); }
.timeline .now .year { color: var(--cyan); }
.tl-arrow { background: var(--panel); border-color: rgba(139,108,255,.3); }
.tl-arrow:hover { background: var(--red); color: var(--ink); }

/* Produtos */
.product { background: var(--panel); border-color: rgba(139,108,255,.2); }
.product:hover { border-color: var(--cyan); }
.product.featured { border-color: var(--red); box-shadow: 0 0 40px -10px rgba(139,108,255,.6); }
.p-img.light { background: #F3F1F7; }
.p-img.placeholder { background: repeating-linear-gradient(45deg, #0E0C18 0 12px, #141026 12px 24px); font-family: var(--display); color: var(--cyan); }
.chip { font: 500 10px var(--pixel); letter-spacing: .12em; text-transform: uppercase; background: transparent; border-color: rgba(139,108,255,.3); color: var(--muted); padding: 6px 8px; }
.chip-hot { background: var(--red); color: var(--ink); border-color: var(--red); font-weight: 700; }
.specs li::before { content: "› "; color: var(--cyan); }

/* Fliperama */
.section-arcade { background: radial-gradient(ellipse at 50% 0%, #1A1233, var(--bg) 70%); }
.cart { background: var(--panel); border: 1px solid rgba(139,108,255,.2); border-radius: 8px; }
.cart::before { display: none; }
.cart-label { font: 700 11px/1.5 var(--pixel); letter-spacing: .08em; border-radius: 4px; }
.cart[aria-selected="true"] { border-color: var(--cyan); box-shadow: 0 0 24px -6px rgba(70,230,255,.6); }
.cart-next .cart-label { font-family: var(--display); }
.cart-new { font-family: var(--pixel); font-weight: 700; }
.console { background: linear-gradient(180deg, #15112A, #0A0814); border-color: rgba(139,108,255,.35); border-radius: 16px; box-shadow: 0 40px 100px -30px rgba(139,108,255,.55); }
.crt { border-color: #05030B; border-radius: 10px; }
.console-panel { background: rgba(7,6,12,.7); border-color: rgba(139,108,255,.3); }
.hud span { font: 500 10px var(--pixel); letter-spacing: .14em; }
.hud b { font: 700 26px/1.1 var(--display); color: var(--text); }
.pbtn { background: transparent; color: var(--text); border: 1px solid rgba(238,235,255,.3); border-radius: 8px; box-shadow: none; font: 700 10px var(--pixel); letter-spacing: .12em; padding: 12px 14px; }
.pbtn:hover { border-color: var(--cyan); }
.pbtn:active { transform: translateY(1px); box-shadow: none; }
.pbtn.turbo[aria-pressed="true"] { background: var(--cyan); color: var(--ink); border-color: var(--cyan); }
.pad { background: var(--panel); border: 1px solid rgba(139,108,255,.25); }
.dpad button { background: #07060C; color: var(--text); }
.ab { color: var(--ink); box-shadow: 0 4px 0 var(--red-dark), 0 0 20px rgba(139,108,255,.4); font-family: var(--pixel); font-weight: 700; }
.ab.b { color: var(--text); background: #1A1530; }
.crt:focus-within { box-shadow: 0 0 0 2px var(--cyan), 0 0 24px rgba(70,230,255,.35); }

/* Quiz */
.quiz { background: var(--panel); border-color: rgba(139,108,255,.25); }
.quiz-progress { font: 500 11px var(--pixel); letter-spacing: .12em; }
.bar i { background: linear-gradient(90deg, var(--red), var(--cyan)); }
.q-opt { background: #07060C; border-color: rgba(139,108,255,.2); }
.q-opt:hover:not(:disabled) { border-color: var(--cyan); }
.q-opt.right { border-color: #6EE7A0; background: rgba(110,231,160,.08); }
.q-opt.wrong { border-color: #FF6B8B; background: rgba(255,107,139,.08); }
.quiz-result .big { font: 800 56px/1 var(--display); color: var(--cyan); }

/* Galeria */
.g-item { border-color: rgba(139,108,255,.2); border-radius: 8px; }
.g-item span { font-family: var(--pixel); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }

/* Contato */
.contact-card { background: var(--panel); border: 1px solid rgba(139,108,255,.35); border-radius: 12px; }
.contact-card::after { border-color: rgba(139,108,255,.12); }
.contact-card .kicker { color: var(--cyan); }
.contact-card p { color: #C9C4E6; }
.c-link { background: transparent; border: 1px solid rgba(238,235,255,.25); }
.c-link:first-child { background: var(--red); color: var(--ink); border-color: var(--red); }
.c-link:first-child svg { stroke: var(--ink); }
.c-link:first-child svg .fill { fill: var(--ink); }
.c-link:hover { background: rgba(139,108,255,.12); }
.c-link:first-child:hover { background: #9D82FF; }
.c-link small { font-family: var(--pixel); letter-spacing: .12em; text-transform: uppercase; font-size: 10px; }
.copy-btn { background: transparent; color: var(--text); border: 1px solid rgba(238,235,255,.3); font: 700 10px var(--pixel); letter-spacing: .12em; }
.copy-btn:hover { background: rgba(238,235,255,.08); }

/* Rodapé e janela de fotos */
.footer { border-top-color: rgba(139,108,255,.14); }
.lightbox { background: rgba(7,6,12,.94); }
.lb-close { background: var(--panel); border-color: rgba(139,108,255,.35); }

/* Capa: título em cima, texto e botões numa linha abaixo */
.launch-head { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 28px; }
.launch h1 { font-size: clamp(40px, 7.2vw, 108px); overflow-wrap: anywhere; }
.launch-intro { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 40px; padding-top: 24px; border-top: 1px solid rgba(139,108,255,.18); }
.launch-intro .lead { flex: 1 1 360px; max-width: 620px; }
.launch .launch-intro .hero-actions { margin: 0; flex: 0 0 auto; flex-wrap: nowrap; }
.launch .btn { white-space: nowrap; }
@media (max-width: 520px) {
  .launch .launch-intro .hero-actions { flex-wrap: wrap; width: 100%; }
  .launch .launch-intro .hero-actions .btn { flex: 1 1 auto; justify-content: center; }
}

/* Fundo: espaço em movimento (desenhado por js/espaco.js) */
body { background-image: none; }
#espaco { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 0; pointer-events: none; display: block; }
main, .footer { position: relative; z-index: 1; }
.section-dark { background: rgba(11, 10, 20, .55); backdrop-filter: blur(2px); }
.section-arcade { background: radial-gradient(ellipse at 50% 0%, rgba(40, 24, 90, .55), rgba(7, 6, 12, .35) 70%); }
.topbar { background: rgba(7, 6, 12, .72); }
.feature, .product, .timeline li, .quiz, .contact-card, .note { background-color: rgba(14, 12, 24, .82); }