:root{
  --amarelo:#ffcb05; --laranja:#f7931e; --preto:#0a0b0d; --preto-2:#121418; --branco:#ffffff;
  --cinza:#9aa0a8;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:"Segoe UI",system-ui,-apple-system,Roboto,sans-serif;
  background:radial-gradient(ellipse at 50% 120%,#1a1408 0%,var(--preto) 60%);
  color:var(--branco); overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}

/* rede de partículas */
#rede{position:fixed;inset:0;z-index:0}

/* grade em perspectiva se movendo */
.grade{
  position:fixed;left:-50%;right:-50%;bottom:-10%;height:60%;z-index:0;
  background-image:
    linear-gradient(rgba(255,203,5,.18) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,203,5,.18) 1px,transparent 1px);
  background-size:60px 60px;
  transform:perspective(500px) rotateX(65deg);
  transform-origin:top center;
  mask-image:linear-gradient(to top,#000 0%,transparent 85%);
  -webkit-mask-image:linear-gradient(to top,#000 0%,transparent 85%);
  animation:anda 3s linear infinite;
}
@keyframes anda{to{background-position:0 60px}}

/* linha de varredura */
.varredura{
  position:fixed;left:0;right:0;height:2px;top:-2px;z-index:0;
  background:linear-gradient(90deg,transparent,var(--amarelo),var(--laranja),transparent);
  box-shadow:0 0 18px var(--amarelo);opacity:.55;
  animation:varre 6s ease-in-out infinite;
}
@keyframes varre{0%{top:-2px;opacity:0}10%{opacity:.6}90%{opacity:.6}100%{top:100%;opacity:0}}

/* brilhos */
.brilho{position:fixed;border-radius:50%;filter:blur(90px);z-index:0;opacity:.35;pointer-events:none}
.brilho-a{width:420px;height:420px;background:var(--amarelo);top:-140px;left:-120px;animation:flutua 14s ease-in-out infinite}
.brilho-b{width:380px;height:380px;background:var(--laranja);bottom:-160px;right:-100px;animation:flutua 18s ease-in-out infinite reverse}
@keyframes flutua{50%{transform:translate(60px,40px) scale(1.1)}}

/* cartão */
.cartao{
  position:relative;z-index:2;width:min(92vw,420px);
  padding:44px 38px 36px;border-radius:18px;
  background:linear-gradient(160deg,rgba(24,26,31,.82),rgba(10,11,13,.88));
  border:1px solid rgba(255,203,5,.25);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 0 0 1px rgba(255,255,255,.03) inset,0 25px 60px rgba(0,0,0,.6),0 0 40px rgba(255,203,5,.08);
  animation:surge .7s cubic-bezier(.2,.8,.2,1) both;
}
.cartao::before{ /* borda luminosa girando */
  content:"";position:absolute;inset:-1px;border-radius:19px;padding:1px;z-index:-1;
  background:conic-gradient(from var(--ang,0deg),transparent 0 70%,var(--amarelo) 80%,var(--laranja) 90%,transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  animation:gira 5s linear infinite;
}
@property --ang{syntax:"<angle>";initial-value:0deg;inherits:false}
@keyframes gira{to{--ang:360deg}}
@keyframes surge{from{opacity:0;transform:translateY(24px) scale(.98)}}

.logo{display:block;width:78%;margin:0 auto 34px}

.campo{display:block;margin-bottom:18px}
.campo span{display:block;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--cinza);margin-bottom:8px}
.campo input{
  width:100%;padding:13px 14px;border-radius:10px;font-size:1rem;color:var(--branco);
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);outline:none;
  transition:border-color .2s,box-shadow .2s,background .2s;
}
.campo input:focus{border-color:var(--amarelo);background:rgba(255,203,5,.05);box-shadow:0 0 0 3px rgba(255,203,5,.18)}

.erro{min-height:1.3em;font-size:.9rem;color:#ff7a59;margin:-4px 0 12px}

button{
  position:relative;width:100%;padding:14px;border:0;border-radius:10px;cursor:pointer;
  font-size:1rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--preto);
  background:linear-gradient(90deg,var(--amarelo),var(--laranja));
  box-shadow:0 8px 24px rgba(247,147,30,.35);
  transition:transform .15s,box-shadow .2s,filter .2s;overflow:hidden;
}
button:hover{transform:translateY(-1px);box-shadow:0 12px 30px rgba(247,147,30,.5);filter:brightness(1.05)}
button:active{transform:translateY(0)}
button::after{ /* reflexo */
  content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-20deg);animation:reflexo 3.5s ease-in-out infinite;
}
@keyframes reflexo{60%,100%{left:130%}}
button:disabled{cursor:wait;filter:saturate(.6)}
.giro{display:none;width:18px;height:18px;border:2px solid rgba(0,0,0,.25);border-top-color:var(--preto);border-radius:50%;
  animation:roda .7s linear infinite;margin:0 auto}
button.carregando .txt{display:none}
button.carregando .giro{display:block}
@keyframes roda{to{transform:rotate(360deg)}}

.cartao.treme{animation:treme .4s}
@keyframes treme{20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}

.rodape{position:fixed;bottom:16px;left:0;right:0;text-align:center;font-size:.8rem;color:#5d636b;z-index:2}

@media (prefers-reduced-motion:reduce){.varredura,.cartao.treme{animation:none}.grade{animation-duration:9s}}