:root{
  --preto:#060606;
  --preto-alt:#0d0d0d;
  --painel:#101010;
  --linha:#1e1e1e;
  --linha-forte:#333;
  --branco:#f4f4f1;
  --branco-puro:#ffffff;
  --cinza:#9b9b95;
  --cinza-escuro:#68685f;

  --vermelho:#e0002a;
  --verde:#12c95e;

  --mono:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --titulo:'Space Grotesk', system-ui, sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--preto);color:var(--branco);
  font:16px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
  position:relative;overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
h1,h2,h3{line-height:1.05;margin:0;font-family:var(--titulo);letter-spacing:-.02em}
p{margin:0}
::selection{background:var(--verde);color:#031008}

.wrap{width:min(1120px,100% - 44px);margin-inline:auto}

/* ---------- fundo: rede de nos em canvas ---------- */
#rede{position:fixed;inset:0;z-index:0;pointer-events:none}
.ruido{
  position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.045;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.topo, main, .rodape{position:relative;z-index:2}

/* ---------- banner de aviso/promocao (webhook da soyxa) ---------- */
.aviso-banner{position:relative;z-index:2;background:var(--verde);color:#031008}
.aviso-banner-inner{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;
  padding:10px 0;font-size:.86rem;line-height:1.4;
}
.aviso-banner-inner strong{font-family:var(--titulo);font-weight:700}

/* ---------- topo ---------- */
.topo{
  position:sticky;top:0;z-index:50;
  background:rgba(6,6,6,.78);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--linha);
}
.topo-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;height:60px}
.marca{display:flex;align-items:center;gap:9px}
.marca-led{
  width:8px;height:8px;border-radius:50%;background:var(--verde);flex:none;
  box-shadow:0 0 0 0 rgba(18,201,94,.5);animation:pulso 1.8s ease-out infinite;
}
@keyframes pulso{0%{box-shadow:0 0 0 0 rgba(18,201,94,.5)}70%{box-shadow:0 0 0 8px rgba(18,201,94,0)}100%{box-shadow:0 0 0 0 rgba(18,201,94,0)}}
.marca-nome{font-family:var(--titulo);font-weight:600;font-size:1.02rem;letter-spacing:-.01em}
.topo-direita{display:flex;align-items:center;gap:16px}
.topo-status{font-family:var(--mono);font-size:.72rem;color:var(--cinza-escuro)}
.auth-indisponivel{font-family:var(--mono);font-size:.72rem;color:var(--cinza-escuro)}
.btn{
  display:inline-block;padding:13px 24px;border:1.5px solid var(--verde);border-radius:9px;
  background:var(--verde);color:#031008;font:inherit;font-weight:700;font-size:.92rem;
  cursor:pointer;text-align:center;letter-spacing:-.005em;
  transition:transform .14s ease,box-shadow .14s ease,background .14s ease;
}
.btn:hover{background:#1ee56e;transform:translateY(-2px);box-shadow:0 10px 24px rgba(18,201,94,.28)}
.btn:active{transform:translateY(0);box-shadow:none}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}
.btn-ghost{background:transparent;color:var(--branco-puro);border:1.5px solid var(--linha-forte)}
.btn-ghost:hover{background:transparent;border-color:var(--verde);box-shadow:none;color:var(--verde)}
.btn-entrar{
  font-family:var(--mono);font-size:.78rem;font-weight:600;padding:8px 16px;
  border:1px solid var(--linha-forte);border-radius:99px;color:var(--branco-puro);
  transition:border-color .18s ease,background .18s ease;
}
.btn-entrar:hover{border-color:var(--verde);background:rgba(18,201,94,.08)}
.auth-logado{display:flex;align-items:center;gap:8px;font-size:.86rem;font-weight:600}
.auth-avatar{width:26px;height:26px;border-radius:50%;border:1px solid var(--linha-forte)}

/* ---------- hero ---------- */
.hero{position:relative;padding:80px 0 96px}
.hero-grade{display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:start}
.hero-texto h1{font-size:clamp(2.5rem,5.6vw,3.9rem)}
.hero-texto .sub{margin-top:26px;max-width:46ch;font-size:1.02rem;color:var(--cinza)}
.marcador{
  color:var(--branco-puro);font-weight:600;padding:0 .05em;
  background:linear-gradient(transparent 68%, rgba(18,201,94,.35) 68%);
}

/* ---------- terminal interativo ---------- */
.terminal{
  border:1px solid var(--linha-forte);border-radius:10px;background:var(--painel);
  overflow:hidden;box-shadow:0 30px 70px rgba(0,0,0,.5);
  transition:box-shadow .25s ease,border-color .25s ease;
}
.terminal:focus-within{border-color:var(--verde);box-shadow:0 0 0 1px rgba(18,201,94,.4), 0 30px 70px rgba(0,0,0,.55)}
.terminal-barra{
  display:flex;align-items:center;gap:10px;padding:11px 14px;
  background:#161616;border-bottom:1px solid var(--linha-forte);
}
.terminal-pontos{display:flex;gap:6px}
.terminal-dot{width:9px;height:9px;border-radius:50%}
.terminal-dot-r{background:var(--vermelho)}
.terminal-dot-w{background:var(--cinza-escuro)}
.terminal-dot-g{background:var(--verde)}
.terminal-titulo{margin-left:4px;font-family:var(--mono);font-size:.74rem;color:var(--cinza-escuro)}
.terminal-corpo{
  height:230px;overflow-y:auto;padding:16px 16px 4px;
  font-family:var(--mono);font-size:.82rem;line-height:1.7;
}
.terminal-corpo::-webkit-scrollbar{width:8px}
.terminal-corpo::-webkit-scrollbar-track{background:transparent}
.terminal-corpo::-webkit-scrollbar-thumb{background:var(--linha-forte);border-radius:99px}
.t-linha{color:var(--cinza);white-space:pre-wrap;word-break:break-word;margin-bottom:10px}
.t-cmd{color:var(--verde);font-weight:600}
.t-erro{color:var(--vermelho)}
.t-prompt-eco{color:var(--branco-puro)}
.t-prompt-eco::before{content:"$ ";color:var(--verde)}
.terminal-form{
  display:flex;align-items:center;gap:9px;padding:12px 16px;
  border-top:1px solid var(--linha-forte);font-family:var(--mono);
}
.terminal-prompt{color:var(--verde);font-size:.85rem}
.terminal-input{
  flex:1;background:none;border:0;outline:0;color:var(--branco-puro);
  font:inherit;font-size:.85rem;caret-color:var(--verde);
}
.terminal-input::placeholder{color:var(--cinza-escuro)}

/* ---------- box de lancamento ---------- */
.secao-box{border-top:1px solid var(--linha)}
.box-prazo{
  margin-left:10px;padding:3px 9px;border-radius:5px;vertical-align:middle;
  font-family:var(--mono);font-size:.62rem;font-weight:600;letter-spacing:.03em;
  color:var(--vermelho);border:1px solid var(--vermelho);
}
.box-sub{margin:-32px 0 40px;color:var(--cinza);font-size:.96rem}
.box-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
.box-card{
  padding:28px 22px;border:1px solid var(--linha);border-radius:var(--raio);
  background:var(--painel);text-align:center;transition:border-color .18s ease,transform .18s ease;
}
.box-card:hover{border-color:var(--linha-forte);transform:translateY(-2px)}
.box-icone{width:38px;height:38px;margin:0 auto 16px;color:var(--cinza-escuro)}
.box-icone svg{width:100%;height:100%}
.box-card h3{font-size:1.05rem;color:var(--branco-puro)}
.box-faixa{margin:8px 0 0;font-family:var(--mono);font-size:.78rem;color:var(--cinza)}
.box-aviso{margin-top:22px;font-family:var(--mono);font-size:.74rem;color:var(--cinza-escuro);text-align:center}

/* ---------- secoes ---------- */
.secao{padding:88px 0;position:relative;z-index:2}
.secao-cabeca{display:flex;align-items:baseline;gap:14px;margin-bottom:52px}
.secao-numero{font-family:var(--mono);font-size:.85rem;color:var(--verde)}
.secao h2{font-size:clamp(1.7rem,3.6vw,2.15rem)}

/* ---------- principios (lista editorial, nao cards) ---------- */
.principios{list-style:none;margin:0;padding:0}
.principios li{
  display:grid;grid-template-columns:80px 1fr;gap:28px;
  padding:34px 0;border-top:1px solid var(--linha);
  opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease;
}
.principios li.visivel{opacity:1;transform:none}
.principios li:last-child{border-bottom:1px solid var(--linha)}
.principio-n{font-family:var(--mono);font-size:1rem;color:var(--cinza-escuro);padding-top:4px}
.principios h3{font-size:1.28rem;margin-bottom:10px}
.principios p{color:var(--cinza);max-width:62ch;font-size:.96rem}
.principios li:nth-child(1) .principio-n{color:var(--vermelho)}
.principios li:nth-child(2) .principio-n{color:var(--verde)}

/* ---------- secao final ---------- */
.secao-fim{background:var(--preto-alt);border-top:1px solid var(--linha)}
.fim-texto{max-width:70ch;color:var(--cinza);font-size:1rem}
.fim-texto strong{color:var(--branco-puro)}

.servicos-ativos{list-style:none;margin:32px 0 0;padding:0;max-width:70ch}
.servicos-ativos li{border-top:1px solid var(--linha)}
.servicos-ativos li:last-child{border-bottom:1px solid var(--linha)}
.servicos-ativos a{
  display:block;padding:18px 4px;transition:padding-left .18s ease;
}
.servicos-ativos a:hover{padding-left:10px}
.servico-ativo-topo{display:flex;align-items:center;gap:8px}
.servico-ativo-nome{font-weight:600;color:var(--branco-puro)}
.servico-ativo-seta{color:var(--verde);font-family:var(--mono);transition:transform .18s ease}
.servicos-ativos a:hover .servico-ativo-seta{transform:translate(2px,-2px)}
.servico-ativo-desc{display:block;margin-top:4px;font-size:.88rem;color:var(--cinza)}

/* ---------- rodape ---------- */
.rodape{padding:44px 0;border-top:1px solid var(--linha)}
.rodape-inner{display:grid;gap:20px}
.rodape-marca{display:flex;align-items:center;gap:9px}
.aviso{
  margin:0;padding:16px 18px;border:1px solid var(--linha-forte);border-radius:8px;
  font-size:.79rem;line-height:1.6;color:var(--cinza-escuro);
}
.aviso strong{color:var(--cinza)}
.rodape-links{display:flex;gap:18px;font-family:var(--mono);font-size:.78rem}
.rodape-links a{color:var(--cinza-escuro);text-decoration:underline;text-underline-offset:2px}
.rodape-links a:hover{color:var(--verde)}

/* ---------- modal (compra da box) ---------- */
.modal{
  position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:20px;
  background:rgba(0,0,0,.78);backdrop-filter:blur(5px);
}
.modal[hidden]{display:none!important}
.modal-caixa{
  position:relative;width:min(420px,100%);max-height:92vh;overflow-y:auto;padding:26px;
  border:1px solid var(--linha-forte);border-radius:14px;background:var(--painel);
  box-shadow:0 30px 70px rgba(0,0,0,.55);text-align:center;
  scrollbar-width:thin;scrollbar-color:var(--linha-forte) transparent;
}
.modal-caixa::-webkit-scrollbar{width:6px}
.modal-caixa::-webkit-scrollbar-track{background:transparent}
.modal-caixa::-webkit-scrollbar-thumb{background:var(--linha-forte);border-radius:99px}
.modal-caixa::-webkit-scrollbar-thumb:hover{background:var(--verde)}
.modal-fechar{
  position:absolute;top:14px;right:16px;border:0;background:none;cursor:pointer;
  color:var(--cinza-escuro);font-size:1.7rem;line-height:1;
}
.modal-fechar:hover{color:var(--branco-puro)}
.modal-caixa h3{font-size:1.2rem;color:var(--branco-puro)}
.modal-servico{margin:12px 0 0;font-size:.9rem;color:var(--cinza)}
.modal-caixa label{display:block;margin:18px 0 8px;font-size:.82rem;font-weight:600;color:var(--branco-puro);text-align:left}
.modal-caixa textarea{
  width:100%;padding:12px 14px;border:1px solid var(--linha-forte);border-radius:8px;
  background:var(--preto);color:var(--branco-puro);font-family:var(--mono);font-size:.76rem;
  line-height:1.5;resize:none;word-break:break-all;
  scrollbar-width:thin;scrollbar-color:var(--linha-forte) transparent;
}
.modal-caixa textarea::-webkit-scrollbar{width:5px}
.modal-caixa textarea::-webkit-scrollbar-track{background:transparent}
.modal-caixa textarea::-webkit-scrollbar-thumb{background:var(--linha-forte);border-radius:99px}
.btn-full{width:100%;margin-top:16px}
.qr{display:block;width:190px;margin:18px auto 0;border:1px solid var(--linha-forte);border-radius:10px;background:#fff;padding:10px}
.aguardando{margin:16px 0 0;font-size:.84rem;color:var(--cinza-escuro);font-family:var(--mono)}
.aguardando::before{
  content:"";display:inline-block;width:10px;height:10px;margin-right:8px;vertical-align:-1px;
  border:2px solid var(--verde);border-top-color:transparent;border-radius:50%;
  animation:girar .8s linear infinite;
}
@keyframes girar{to{transform:rotate(360deg)}}
.erro{margin:16px 0 0;padding:12px 14px;border:1px solid var(--vermelho);border-radius:8px;font-size:.86rem;background:rgba(224,0,42,.08);color:#ff8a95}
.ok-icone{
  display:grid;place-items:center;width:54px;height:54px;margin:0 auto 16px;border-radius:50%;
  background:var(--verde);color:var(--preto);font-size:1.5rem;
}
.box-premio-valor{margin:14px 0 0;font-family:var(--titulo);font-size:2.4rem;font-weight:700;color:var(--verde)}

/* ---------- QR em moldura de scanner ---------- */
.qr-frame{position:relative;width:210px;margin:20px auto 0;padding:14px;background:#fff;border-radius:12px}
.qr-frame .qr{display:block;width:100%;margin:0;border:0;border-radius:0;padding:0;box-shadow:none}
.qr-corner{position:absolute;width:22px;height:22px;border-color:var(--verde);border-style:solid;border-width:0}
.qr-corner-tl{top:-7px;left:-7px;border-top-width:3px;border-left-width:3px;border-radius:9px 0 0 0}
.qr-corner-tr{top:-7px;right:-7px;border-top-width:3px;border-right-width:3px;border-radius:0 9px 0 0}
.qr-corner-bl{bottom:-7px;left:-7px;border-bottom-width:3px;border-left-width:3px;border-radius:0 0 0 9px}
.qr-corner-br{bottom:-7px;right:-7px;border-bottom-width:3px;border-right-width:3px;border-radius:0 0 9px 0}
.qr-scan{
  position:absolute;left:14px;right:14px;top:14px;height:2px;z-index:1;
  background:linear-gradient(90deg, transparent, var(--verde), transparent);
  box-shadow:0 0 9px 1px rgba(18,201,94,.65);
  animation:qr-varrer 2.4s ease-in-out infinite;
}
@keyframes qr-varrer{0%{top:14px}50%{top:calc(100% - 16px)}100%{top:14px}}
.qr-expira{margin-top:12px;font-family:var(--mono);font-size:.78rem;color:var(--cinza-escuro);text-align:center}
.qr-expira strong{color:var(--verde);font-weight:700}
.qr-expira.acabando strong{color:var(--vermelho)}
#box-copiar-texto{display:inline-flex;align-items:center;gap:7px}
#box-copiar-texto::before{content:"⧉"}
.btn-ghost.copiado{border-color:var(--verde);color:var(--verde)}
.btn-ghost.copiado #box-copiar-texto::before{content:"✓"}

/* ---------- roleta ---------- */
.roleta-wrap{position:relative;width:220px;height:220px;margin:26px auto 0}
.roleta-leds{position:absolute;inset:-14px;pointer-events:none}
.roleta-led{
  position:absolute;top:50%;left:50%;width:6px;height:6px;border-radius:50%;
  background:var(--linha-forte);
  transform:rotate(calc(var(--i) * 1deg)) translateY(-124px);
}
.roleta-wrap.girando .roleta-led{
  background:var(--verde);box-shadow:0 0 6px 1px rgba(18,201,94,.8);
  animation:led-corrida 1s linear infinite;
  animation-delay:calc(var(--i) * -5.5ms);
}
@keyframes led-corrida{0%,100%{opacity:.18}8%{opacity:1}}
.roleta-ponteiro{
  position:absolute;top:-2px;left:50%;transform:translateX(-50%);z-index:2;
  width:0;height:0;border-left:9px solid transparent;border-right:9px solid transparent;
  border-top:15px solid var(--branco-puro);
  filter:drop-shadow(0 0 6px rgba(255,255,255,.5));
}
#box-roleta-slot{
  position:relative;width:100%;height:100%;border-radius:50%;overflow:hidden;
  box-shadow:0 0 0 3px var(--linha-forte);transition:box-shadow .3s ease;
}
.roleta-wrap.girando #box-roleta-slot{box-shadow:0 0 0 3px var(--linha-forte),0 0 26px 4px rgba(18,201,94,.35)}
.roleta-wrap.parou #box-roleta-slot{box-shadow:0 0 0 3px var(--verde),0 0 34px 8px rgba(18,201,94,.55)}
.roleta-svg{
  display:block;width:100%;height:100%;
  transition:transform 4.2s cubic-bezier(.15,.7,.15,1);
  transform:rotate(0deg);
}
.roleta-svg text{font-family:var(--mono);font-weight:700;fill:var(--branco-puro)}
.roleta-svg .rot-dentro{font-size:13px}
.roleta-svg .rot-fora{font-size:10px;fill:var(--cinza)}
.roleta-legenda{
  margin-top:14px;font-family:var(--mono);font-size:.68rem;color:var(--cinza-escuro);
  line-height:1.6;max-width:260px;margin-inline:auto;
}
.roleta-faiscas{position:absolute;inset:0;pointer-events:none}
.faisca{
  position:absolute;top:50%;left:50%;width:5px;height:5px;border-radius:50%;
  background:var(--verde);opacity:0;
}
.roleta-faiscas.estourar .faisca{animation:faisca-voar .7s ease-out forwards}
@keyframes faisca-voar{
  0%{opacity:1;transform:translate(-50%,-50%) rotate(var(--ang)) translateX(0) scale(1)}
  100%{opacity:0;transform:translate(-50%,-50%) rotate(var(--ang)) translateX(105px) scale(.3)}
}

@media (max-width:860px){
  .hero-grade{grid-template-columns:1fr;gap:36px}
  .terminal-corpo{height:200px}
}
@media (max-width:560px){
  .principios li{grid-template-columns:1fr;gap:8px}
  .secao{padding:64px 0}
  .hero{padding:56px 0 64px}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
  .principios li{opacity:1;transform:none}
}