:root {
  --fundo: #07080a;
  --painel: rgba(13, 15, 19, .88);
  --painel-2: #12151b;
  --linha: rgba(255, 255, 255, .08);
  --linha-forte: rgba(255, 255, 255, .16);
  --texto: #e8eaef;
  --fraco: #8b909c;
  --vermelho: #e10600;
  --vermelho-2: #ff2a1f;
  --brilho: rgba(225, 6, 0, .35);
  --ok: #2fd17f;
  --info: #3ea6ff;
  --titulo: "Chakra Petch", "Bahnschrift", sans-serif;
  --mono: "JetBrains Mono", Consolas, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--fundo);
  color: var(--texto);
  font: 16px/1.55 "Bahnschrift", "Segoe UI", system-ui, sans-serif;
  min-height: 100vh; display: flex; flex-direction: column;
  -webkit-font-smoothing: antialiased;
}
/* foto escurecida + grade técnica + vinheta */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -2;
  background: url('fundo.jpg') center / cover no-repeat;
  filter: grayscale(.5) brightness(.35);
}
body::after {
  content: ""; position: fixed; inset: 0; z-index: -1;
  background:
    radial-gradient(ellipse 60% 50% at 75% 20%, rgba(225, 6, 0, .14), transparent 70%),
    linear-gradient(var(--linha) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(90deg, var(--linha) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(180deg, rgba(7, 8, 10, .55), rgba(7, 8, 10, .96) 85%);
  -webkit-mask: none;
}
a { color: inherit; }
svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
main { flex: 1; width: 100%; max-width: 1140px; margin: 0 auto; padding: 0 24px 72px; }

.rotulo { font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--vermelho-2); }

/* ---------- topo ---------- */
.topo { position: sticky; top: 0; z-index: 10; background: rgba(7, 8, 10, .78); backdrop-filter: blur(10px); border-bottom: 1px solid var(--linha); }
.topo-in { max-width: 1140px; margin: 0 auto; padding: 12px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.marca { display: flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--titulo); font-weight: 700; font-size: 21px; letter-spacing: .06em; text-transform: uppercase; }
.marca img { width: 38px; height: 38px; object-fit: contain; }
.marca.pequena { font-size: 16px; } .marca.pequena img { width: 28px; height: 28px; }
.topo nav { display: flex; align-items: center; gap: 18px; }
.nav-link { text-decoration: none; color: var(--fraco); font-size: 14px; text-transform: uppercase; letter-spacing: .08em; }
.nav-link:hover { color: var(--texto); }
.quem { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.quem img { width: 30px; height: 30px; border-radius: 4px; border: 1px solid var(--linha-forte); }

.btn-steam {
  display: inline-flex; align-items: center; gap: 9px; text-decoration: none; font-weight: 600; font-size: 14px;
  color: #dbe6f0; background: linear-gradient(180deg, #1f2733, #151b24); border: 1px solid #2f4a63;
  padding: 9px 16px; border-radius: 4px; transition: border-color .15s, box-shadow .15s;
}
.btn-steam svg { width: 18px; height: 18px; stroke: none; }
.btn-steam:hover { border-color: #66c0f4; box-shadow: 0 0 0 3px rgba(102, 192, 244, .12); }
.btn-steam.grande { padding: 14px 22px; font-size: 16px; width: 100%; justify-content: center; }

/* ---------- hero ---------- */
.hero { display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: center; padding: 72px 0 64px; }
.hero h1 { font-family: var(--titulo); font-weight: 700; font-size: clamp(38px, 5.4vw, 64px); line-height: 1.02; margin: 14px 0 18px; text-transform: uppercase; letter-spacing: .01em; }
.hero h1 em { font-style: normal; color: var(--vermelho-2); text-shadow: 0 0 32px var(--brilho); }
.lead { color: #b9bdc7; font-size: 18px; max-width: 520px; margin: 0 0 28px; }

.ip { display: inline-flex; align-items: stretch; border: 1px solid var(--linha-forte); border-radius: 4px; overflow: hidden; background: rgba(0, 0, 0, .45); font-family: var(--mono); font-size: 14px; }
.ip-rot { padding: 10px 12px; background: var(--vermelho); color: #fff; font-weight: 600; letter-spacing: .1em; }
.ip code { padding: 10px 14px; letter-spacing: .03em; }
.ip button { border: 0; border-left: 1px solid var(--linha-forte); background: transparent; color: var(--fraco); font: inherit; padding: 0 14px; cursor: pointer; text-transform: uppercase; font-size: 12px; letter-spacing: .08em; }
.ip button:hover { color: var(--texto); background: rgba(255, 255, 255, .05); }

.selos { list-style: none; padding: 0; margin: 28px 0 0; display: flex; flex-wrap: wrap; gap: 10px 22px; color: var(--fraco); font-size: 14px; }
.selos li { display: flex; align-items: center; gap: 8px; }
.selos svg { width: 18px; height: 18px; color: var(--vermelho-2); }

/* ---------- painel de compra ---------- */
.painel { position: relative; background: var(--painel); border: 1px solid var(--linha-forte); border-radius: 6px; backdrop-filter: blur(6px);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .55), 0 0 0 1px rgba(0, 0, 0, .4); }
/* cantos em colchete */
.painel::before, .painel::after { content: ""; position: absolute; width: 18px; height: 18px; border: 2px solid var(--vermelho); pointer-events: none; }
.painel::before { top: -6px; left: -6px; border-right: 0; border-bottom: 0; }
.painel::after { bottom: -6px; right: -6px; border-left: 0; border-top: 0; }
.painel-topo { display: flex; align-items: center; gap: 6px; padding: 11px 16px; border-bottom: 1px solid var(--linha); font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: .14em; color: var(--fraco); }
.painel-topo span { flex: 1; }
.painel-topo span::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 9px; background: var(--vermelho-2); border-radius: 50%; box-shadow: 0 0 10px var(--vermelho-2); vertical-align: 1px; }
.painel-topo i { width: 6px; height: 6px; border: 1px solid var(--linha-forte); }
.painel-corpo { padding: 26px; }

.bloqueado { text-align: center; }
.bloqueado img { width: 84px; height: 84px; object-fit: contain; filter: drop-shadow(0 0 22px var(--brilho)); }
.bloqueado h2 { font-family: var(--titulo); font-size: 22px; margin: 12px 0 8px; text-transform: uppercase; letter-spacing: .03em; }
.bloqueado p { color: var(--fraco); font-size: 14px; margin: 0 0 22px; }

.saldo { display: flex; align-items: center; gap: 14px; padding: 14px 16px; margin-bottom: 22px; border: 1px solid var(--linha); border-radius: 4px; background: rgba(255, 255, 255, .025); }
.saldo img { width: 44px; height: 44px; object-fit: contain; }
.saldo small { display: block; font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .14em; color: var(--fraco); }
.saldo strong { font-family: var(--titulo); font-size: 26px; line-height: 1.1; }
.saldo strong span { font-size: 14px; color: var(--fraco); font-weight: 500; }

.compra .rotulo { display: block; color: var(--fraco); margin-bottom: 10px; }
.atalhos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.atalhos button { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 0; cursor: pointer;
  background: var(--painel-2); color: var(--texto); border: 1px solid var(--linha); border-radius: 4px; font: inherit; transition: border-color .15s, background .15s; }
.atalhos button b { font-family: var(--titulo); font-size: 20px; }
.atalhos button small { font-family: var(--mono); font-size: 11px; color: var(--fraco); }
.atalhos button:hover { border-color: var(--linha-forte); }
.atalhos button.ativo { border-color: var(--vermelho); background: rgba(225, 6, 0, .1); box-shadow: inset 0 0 0 1px var(--vermelho); }

.qtd { display: grid; grid-template-columns: 52px 1fr 52px; margin: 12px 0 18px; border: 1px solid var(--linha-forte); border-radius: 4px; overflow: hidden; }
.qtd input { width: 100%; min-width: 0; border: 0; background: #0a0c10; color: var(--texto); font-family: var(--titulo); font-size: 30px; font-weight: 700; text-align: center; padding: 8px; -moz-appearance: textfield; }
.qtd input::-webkit-outer-spin-button, .qtd input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qtd input:focus { outline: none; background: #0d1015; }
.qtd .passo { border: 0; background: var(--painel-2); color: var(--texto); font-size: 22px; cursor: pointer; }
.qtd .passo:hover { background: #1a1e26; }

.resumo { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 0; margin-bottom: 16px; border-top: 1px dashed var(--linha-forte); border-bottom: 1px dashed var(--linha-forte); }
.resumo span { font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: .14em; color: var(--fraco); }
.resumo strong { font-family: var(--titulo); font-size: 28px; }

.btn-comprar { display: block; width: 100%; padding: 15px; border: 0; border-radius: 4px; cursor: pointer; text-align: center; text-decoration: none;
  font-family: var(--titulo); font-size: 17px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: #fff;
  background: linear-gradient(180deg, var(--vermelho-2), var(--vermelho)); box-shadow: 0 10px 30px -10px var(--brilho), inset 0 1px 0 rgba(255, 255, 255, .2);
  transition: transform .1s, box-shadow .15s; }
.btn-comprar:hover { box-shadow: 0 14px 36px -8px var(--brilho), inset 0 1px 0 rgba(255, 255, 255, .25); }
.btn-comprar:active { transform: translateY(1px); }
.nota { margin: 12px 0 0; text-align: center; font-family: var(--mono); font-size: 11px; color: var(--fraco); letter-spacing: .02em; }

/* ---------- como funciona ---------- */
.como { padding-top: 24px; }
.secao-titulo { text-align: center; margin-bottom: 36px; }
.secao-titulo h2 { font-family: var(--titulo); font-size: clamp(26px, 3.4vw, 36px); text-transform: uppercase; margin: 8px 0 0; letter-spacing: .02em; }
.passos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; position: relative; }
/* linha que liga os passos */
.passos::before { content: ""; position: absolute; top: 32px; left: 16.6%; right: 16.6%; height: 1px;
  background: repeating-linear-gradient(90deg, var(--vermelho) 0 8px, transparent 8px 14px); opacity: .6; }
.passos li { position: relative; text-align: center; padding: 0 12px; }
.passo-icone { position: relative; z-index: 1; width: 64px; height: 64px; margin: 0 auto 18px; display: grid; place-items: center;
  background: var(--fundo); border: 1px solid var(--linha-forte); border-radius: 6px; transform: rotate(45deg); transition: border-color .2s, box-shadow .2s; }
.passo-icone svg { width: 26px; height: 26px; transform: rotate(-45deg); color: var(--vermelho-2); }
.passos li:hover .passo-icone { border-color: var(--vermelho); box-shadow: 0 0 24px var(--brilho); }
.passo-n { display: block; font-family: var(--mono); font-size: 12px; letter-spacing: .2em; color: var(--vermelho-2); margin-bottom: 4px; }
.passos h3 { font-family: var(--titulo); font-size: 20px; text-transform: uppercase; margin: 0 0 6px; letter-spacing: .03em; }
.passos p { margin: 0 auto; color: var(--fraco); font-size: 15px; max-width: 260px; }

/* ---------- avisos, páginas internas e admin ---------- */
.aviso { padding: 12px 14px; border-radius: 4px; margin-bottom: 18px; border: 1px solid var(--linha); border-left: 3px solid; background: rgba(255, 255, 255, .03); font-size: 15px; }
.aviso.ok { border-left-color: var(--ok); } .aviso.erro { border-left-color: var(--vermelho-2); } .aviso.info { border-left-color: var(--info); }
.cartao { background: var(--painel); border: 1px solid var(--linha-forte); border-radius: 6px; padding: 28px; max-width: 560px; margin: 64px auto 0; backdrop-filter: blur(6px); }
.cartao.largo { max-width: none; }
.cartao h2 { font-family: var(--titulo); text-transform: uppercase; margin: 0 0 12px; }
.cartao h3 { font-family: var(--titulo); text-transform: uppercase; letter-spacing: .04em; margin: 28px 0 8px; font-size: 17px; color: #c9ccd4; }
.sub { color: var(--fraco); font-size: 14px; }
.numeros { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 12px 0 8px; }
.numeros div { border: 1px solid var(--linha); border-radius: 4px; padding: 14px; background: rgba(255, 255, 255, .02); }
.numeros small { display: block; font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--fraco); }
.numeros strong { font-family: var(--titulo); font-size: 26px; }
.linha { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0; }
.linha input, .linha select { flex: 1; min-width: 150px; font: inherit; font-size: 15px; padding: 10px 12px; background: #0a0c10; color: var(--texto); border: 1px solid var(--linha-forte); border-radius: 4px; }
.linha button { padding: 10px 18px; background: var(--painel-2); color: var(--texto); border: 1px solid var(--linha-forte); border-radius: 4px; font: inherit; font-weight: 600; cursor: pointer; }
.linha button:hover { border-color: var(--vermelho); }
.tabela { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; margin: 8px 0 12px; }
th, td { padding: 9px 10px; border-bottom: 1px solid var(--linha); text-align: left; vertical-align: top; }
th { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--fraco); font-weight: 600; }
td small { color: var(--fraco); font-family: var(--mono); font-size: 11px; }
tr.st-pago td:nth-child(5) { color: var(--ok); } tr.st-recusado td:nth-child(5), tr.st-estornado td:nth-child(5) { color: var(--vermelho-2); }

/* ---------- rodapé ---------- */
.rodape { border-top: 1px solid var(--linha); background: rgba(5, 6, 8, .85); }
.rodape-in { max-width: 1140px; margin: 0 auto; padding: 28px 24px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; }
.rodape .links { display: flex; gap: 22px; }
.rodape .links a { text-decoration: none; color: var(--fraco); font-size: 14px; text-transform: uppercase; letter-spacing: .08em; }
.rodape .links a:hover { color: var(--texto); }
.rodape p { flex-basis: 100%; margin: 0; color: #5f6470; font-size: 12px; }

/* ---------- celular ---------- */
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; gap: 36px; padding: 40px 0; }
}
@media (max-width: 640px) {
  main { padding: 0 16px 56px; }
  .topo-in { padding: 10px 16px; }
  .marca span, .quem span { display: none; }
  .btn-steam { padding: 8px 12px; }
  .painel-corpo { padding: 20px 16px; }
  .lead { font-size: 16px; }
  .ip { display: flex; } .ip code { flex: 1; }
  .passos { grid-template-columns: 1fr; gap: 28px; }
  .passos::before { top: 32px; bottom: 32px; left: 50%; right: auto; width: 1px; height: auto;
    background: repeating-linear-gradient(180deg, var(--vermelho) 0 8px, transparent 8px 14px); opacity: .35; }
  .passos li { background: var(--fundo); padding: 8px 0; }
  .numeros { grid-template-columns: 1fr; }
  .rodape-in { flex-direction: column; text-align: center; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }