:root{
  --bg:#0a0f1c;
  --bg-soft:#0f1729;
  --blue:#2563eb;
  --cyan:#38bdf8;
  --card:rgba(255,255,255,.04);
  --border:rgba(255,255,255,.08);
  --text:#e6ebf5;
  --text-active:#8b97ad;
  --muted:#8b97ad;
  --danger:#f87171;
  --ok:#34d399;
  --font-display:'Syne',sans-serif;
  --font-body:'Inter',sans-serif;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}

html,body{
  background:var(--bg); color:var(--text); font-family:var(--font-body);
  min-height:100vh; overflow-x:hidden;
}

body{
  display:flex; align-items:center; justify-content:center;
  padding:120px 20px 60px 20px; position:relative;
}

/* textura de fundo (grid sutil) */
body::before{
  content:''; position:fixed; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px);
  background-size:40px 40px;
  pointer-events:none; z-index:0;
}

/* ---------- camadas decorativas: circuito de fundo ---------- */
.bg-circuit{ position:fixed; inset:0; width:100vw; height:100vh; z-index:1; pointer-events:none; overflow:hidden; }
.bg-circuit::before, .bg-circuit::after{
  content:''; position:absolute; border-radius:50%; filter:blur(35px); pointer-events:none;
  will-change:transform, opacity;
}
.bg-circuit::before{
  width:55vw; height:55vw; left:-8%; top:5%;
  background:radial-gradient(circle, rgba(37,99,235,.25), transparent 70%);
  animation:driftA 19s ease-in-out infinite alternate;
}
.bg-circuit::after{
  width:60vw; height:60vw; right:-10%; bottom:0%;
  background:radial-gradient(circle, rgba(56,189,248,.18), transparent 70%);
  animation:driftB 23s ease-in-out infinite alternate;
}
@keyframes driftA{0%{transform:translate(0,0) scale(1);opacity:.9;}100%{transform:translate(4vw,3vh) scale(1.12);opacity:1;}}
@keyframes driftB{0%{transform:translate(0,0) scale(1);opacity:.85;}100%{transform:translate(-4vw,-3vh) scale(1.15);opacity:1;}}

.bg-circuit svg{ position:absolute; top:0; left:0; width:100%; height:100%; display:block; opacity:.85; }
.bg-circuit .trace{
  fill:none; stroke:var(--cyan); stroke-width:1.2; opacity:.9;
  stroke-dasharray:6 10; animation:dashflow 14s linear infinite;
  filter:drop-shadow(0 0 4px rgba(56,189,248,.6));
}
.bg-circuit .trace.alt{ stroke:var(--blue); animation-duration:18s; animation-direction:reverse; filter:drop-shadow(0 0 4px rgba(37,99,235,.6)); }
.bg-circuit .node{ fill:var(--cyan); opacity:.75; animation:blip 3.6s ease-in-out infinite; }
@keyframes dashflow{to{stroke-dashoffset:-160;}}
@keyframes blip{0%,100%{opacity:.25;}50%{opacity:1;}}

/* ---------- partículas flutuantes ---------- */
.bg-particles{ position:fixed; inset:0; z-index:1; pointer-events:none; overflow:hidden; }
.bg-particles span{
  position:absolute; bottom:-10px; width:3px; height:3px; border-radius:50%;
  background:var(--cyan); opacity:0;
  animation-name:floatUp; animation-timing-function:ease-in-out; animation-iteration-count:infinite;
}
.bg-particles span:nth-child(even){ background:var(--blue); width:2px; height:2px; }
@keyframes floatUp{
  0%{transform:translateY(0) translateX(0);opacity:0;}
  10%{opacity:.7;}
  50%{transform:translateY(-50vh) translateX(8px);}
  90%{opacity:.3;}
  100%{transform:translateY(-100vh) translateX(-6px);opacity:0;}
}

/* ---------- hardware flutuante decorativo ---------- */
.floating-hardware{ position:fixed; inset:0; pointer-events:none; z-index:2; overflow:hidden; }
.hardware{ position:absolute; opacity:.06; color:var(--cyan); filter:drop-shadow(0 0 12px rgba(56,189,248,.35)); }
.hardware svg{ width:100%; height:100%; stroke:currentColor; fill:none; stroke-width:1.4; }
.cpu{ left:6%; bottom:10%; width:120px; height:120px; animation:cpuSpin 50s linear infinite; }
.gpu{ left:2%; top:14%; width:200px; height:110px; animation:gpuFloat 18s ease-in-out infinite; }
.ram{ left:4%; top:48%; width:160px; height:64px; animation:ramFloat 15s ease-in-out infinite; }
.ssd{ right:6%; top:16%; width:160px; height:50px; animation:ssdFloat 20s ease-in-out infinite; }
.cooler{ right:6%; top:42%; width:130px; height:130px; animation:coolerSpin 10s linear infinite; }
.mobo{ right:3%; bottom:8%; width:200px; height:200px; animation:moboFloat 18s ease-in-out infinite; }
@keyframes cpuSpin{from{transform:rotate(0);}to{transform:rotate(360deg);}}
@keyframes coolerSpin{from{transform:rotate(0);}to{transform:rotate(-360deg);}}
@keyframes gpuFloat{50%{transform:translateX(25px) rotate(3deg);}}
@keyframes ramFloat{50%{transform:translateY(-20px);}}
@keyframes ssdFloat{50%{transform:translate(-15px,-15px);}}
@keyframes moboFloat{50%{transform:translateY(18px);}}

/* ---------- navbar fixa no topo ---------- */
.navbar{
  position:fixed; top:0; left:0; width:100%; height:84px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(to bottom, rgba(10,15,28,.92), rgba(10,15,28,.78));
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border); z-index:90;
}
.brand-logo{ height:46px; width:auto; object-fit:contain; filter:drop-shadow(0 0 12px rgba(56,189,248,.35)); }

/* ---------- card do formulário ---------- */
.card{
  position:relative; z-index:10; width:100%; max-width:540px;
  background:var(--card); border:1px solid var(--border); border-radius:20px;
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  padding:40px; box-shadow:0 20px 60px rgba(0,0,0,.45);
  animation:rise .6s cubic-bezier(0.16,1,0.3,1) both;
}
@keyframes rise{from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:translateY(0);}}

.eyebrow{
  font-size:.75rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--cyan); margin-bottom:10px; display:block; text-align:center;
}

h1{
  font-family:var(--font-display); font-weight:800; font-size:28px; line-height:1.2; margin-bottom:10px;
  text-align:center;
  background:linear-gradient(90deg,#fff,var(--cyan));
  background-clip:text; -webkit-background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
}
p.sub{ color:var(--text-active); font-size:14.5px; line-height:1.6; margin-bottom:28px; text-align:center; }

/* ---------- form fields ---------- */
.field{ margin-bottom:18px; position:relative; }
label{
  display:block; font-family:var(--font-display); font-size:12.5px; font-weight:700; color:var(--text-active);
  margin-bottom:6px; letter-spacing:.02em;
}
input, textarea{
  width:100%; background:rgba(255,255,255,.02); border:1px solid var(--border);
  border-radius:10px; padding:13px 14px; color:var(--text);
  font-family:var(--font-body); font-size:14.5px; outline:none;
  transition:all .2s ease;
}
textarea{ resize:vertical; min-height:70px; }
input::placeholder, textarea::placeholder{ color:#4e5b73; }
input:focus, textarea:focus{
  border-color:var(--blue); background:rgba(37,99,235,.05);
  box-shadow:0 0 0 3px rgba(37,99,235,.15);
}
input.invalid, textarea.invalid{ border-color:var(--danger); background:rgba(248,113,113,.03); }
.err{ font-size:12px; color:var(--danger); margin-top:5px; display:none; }
.err.show{ display:block; }
.shake{ animation:shake .3s; }
@keyframes shake{25%{transform:translateX(-6px);}75%{transform:translateX(6px);}}

/* ---------- seletor Tipo de Cliente (PF/PJ) ---------- */
.options{
  display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:0;
}
.option{
  display:flex; align-items:center; justify-content:flex-start; gap:10px; padding:12px 14px;
  border:1px solid var(--border); border-radius:10px;
  background:rgba(255,255,255,.02);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  transition:all .25s cubic-bezier(0.4,0,0.2,1);
  font-family:var(--font-display); font-weight:700; line-height:1.3;
  font-size:.85rem; text-align:left; color:var(--text); cursor:pointer;
}
.option:hover{
  background:rgba(37,99,235,.08); border-color:rgba(56,189,248,.25);
  box-shadow:0 8px 20px rgba(0,0,0,.35); transform:translateY(-2px);
}
.option:active{ transform:translateY(0) scale(.99); }
.option .opt-label{ flex:1; min-width:0; color:var(--text-active); transition:color .2s; }
.option:hover .opt-label{ color:var(--text); }
.option .mark{
  width:22px; height:22px; border-radius:50%; border:2px solid #4b5b7a; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:.75rem; color:transparent;
  transition:all .15s ease; font-weight:bold;
}
.option.selected{
  border-color:var(--cyan); background:rgba(37,99,235,.18);
  box-shadow:0 0 16px rgba(37,99,235,.3); animation:optionPop .3s ease;
}
.option.selected .opt-label{ color:#fff; }
.option.selected .mark{
  background:var(--cyan); border-color:var(--cyan); color:#06222f;
  animation:markPop .35s cubic-bezier(.34,1.56,.64,1);
}
@keyframes optionPop{0%{transform:scale(1);}45%{transform:scale(1.02);}100%{transform:scale(1);}}
@keyframes markPop{0%{transform:scale(.55);}65%{transform:scale(1.18);}100%{transform:scale(1);}}

@media (max-width:480px){
  .options{ grid-template-columns:1fr; }
}

/* ---------- botão (glassmorphism) ---------- */
button.btn-primary{
  width:100%; margin-top:12px; padding:15px; border:none; border-radius:12px;
  font-family:var(--font-display); font-weight:700; font-size:15px; letter-spacing:.02em;
  color:#fff; background:linear-gradient(135deg, var(--blue), var(--cyan));
  cursor:pointer; transition:all .25s cubic-bezier(0.4,0,0.2,1);
  box-shadow:0 6px 20px rgba(37,99,235,.3);
}
button.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 10px 26px rgba(37,99,235,.45); }
button.btn-primary:active{ transform:translateY(0); }
button.btn-primary:disabled{ opacity:.5; cursor:not-allowed; transform:none; box-shadow:none; }

/* ---------- caixa LGPD ---------- */
.lgpd{
  margin-top:24px; text-align:center;
  background:rgba(56,189,248,.04); border:1px solid rgba(56,189,248,.12);
  border-radius:12px; padding:14px 16px; font-size:12.5px; line-height:1.6; color:var(--text-active);
}
.lgpd b{ color:var(--text); }

.status{ margin-top:16px; text-align:center; font-size:14px; font-weight:600; display:none; }
.status.show{ display:block; }
.status.error{ color:var(--danger); }

/* ---------- tela de sucesso ---------- */
.success-screen{ display:none; text-align:center; padding:30px 10px; }
.success-screen.show{ display:block; animation:rise .5s ease both; }

.icon-circle{
  width:64px; height:64px; border-radius:50%; margin:0 auto 20px auto;
  display:flex; align-items:center; justify-content:center; position:relative;
  animation:iconPop .5s cubic-bezier(.34,1.56,.64,1);
}
.icon-circle::before{ content:''; position:absolute; inset:-12px; border-radius:50%; animation:pulseGlow 2s ease-in-out infinite; }
.icon-circle.ok{ background:rgba(52,211,153,.12); color:var(--ok); }
.icon-circle.ok::before{ background:radial-gradient(closest-side, rgba(52,211,153,.22), transparent 75%); }
.icon-circle svg{ position:relative; z-index:1; }
.icon-circle .check-path{ stroke-dasharray:24; stroke-dashoffset:24; animation:drawCheck .4s ease-out .15s forwards; }
@keyframes drawCheck{to{stroke-dashoffset:0;}}
@keyframes iconPop{0%{transform:scale(.4);opacity:0;}60%{transform:scale(1.12);opacity:1;}100%{transform:scale(1);}}
@keyframes pulseGlow{0%,100%{opacity:.5;transform:scale(.9);}50%{opacity:1;transform:scale(1.08);}}

.success-screen h2{ font-family:var(--font-display); font-weight:800; font-size:24px; margin-bottom:10px; }
.success-screen p{ color:var(--text-active); font-size:15px; line-height:1.6; }

/* =========================================
   RESPONSIVIDADE
   ========================================= */
@media (max-width:1024px){
  .card{ max-width:500px; padding:36px; }
  h1{ font-size:26px; }
}

@media (max-width:768px){
  body{ padding:100px 16px 40px 16px; }
  .navbar{ height:64px; }
  .brand-logo{ height:36px; }
  .card{ max-width:100%; border-radius:18px; padding:32px 24px; }
  h1{ font-size:24px; }
  p.sub{ font-size:14px; margin-bottom:22px; }
}

@media (max-width:480px){
  body{ padding:96px 12px 32px 12px; }
  .card{ padding:26px 20px; border-radius:16px; }
  h1{ font-size:22px; }
  input, textarea, button{ font-size:14px; padding:12px; }
  .lgpd{ padding:12px; font-size:12px; }
}