*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Sora',system-ui,sans-serif;background:#070b1a;color:#e8ecff;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;overflow-x:hidden}
.fundo{position:fixed;inset:0;z-index:-1;overflow:hidden}
.fundo span{position:absolute;border-radius:50%;filter:blur(90px);opacity:.55;animation:flutua 18s ease-in-out infinite}
.fundo span:nth-child(1){width:520px;height:520px;background:#3b5bff;top:-140px;left:-120px}
.fundo span:nth-child(2){width:460px;height:460px;background:#00d4ff;bottom:-160px;right:-100px;animation-delay:-6s}
.fundo span:nth-child(3){width:360px;height:360px;background:#a23bff;top:40%;left:55%;animation-delay:-12s}
@keyframes flutua{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(60px,-40px) scale(1.1)}66%{transform:translate(-40px,50px) scale(.95)}}

.card{width:100%;max-width:560px;background:rgba(16,22,48,.72);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid rgba(120,150,255,.25);border-radius:24px;padding:36px 30px;box-shadow:0 30px 80px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.03) inset;animation:surge .7s cubic-bezier(.2,.8,.2,1)}
.card.centro{text-align:center}
@keyframes surge{from{opacity:0;transform:translateY(30px) scale(.97)}to{opacity:1;transform:none}}

.status{display:inline-flex;align-items:center;gap:10px;font-size:13px;font-weight:600;padding:7px 14px;border-radius:99px;margin-bottom:20px}
.status i{width:10px;height:10px;border-radius:50%}
.status.on{background:rgba(0,230,140,.12);color:#3dffa8}
.status.on i{background:#3dffa8;box-shadow:0 0 0 0 rgba(61,255,168,.7);animation:pulsa 1.8s infinite}
.status.off{background:rgba(255,180,0,.12);color:#ffc24d}
.status.off i{background:#ffc24d}
@keyframes pulsa{70%{box-shadow:0 0 0 12px rgba(61,255,168,0)}100%{box-shadow:0 0 0 0 rgba(61,255,168,0)}}

h1{font-size:clamp(26px,6vw,36px);line-height:1.15;font-weight:800;margin-bottom:14px}
.grad{display:block;background:linear-gradient(90deg,#5b7cff,#00d4ff,#b06bff,#5b7cff);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:brilho 6s linear infinite}
@keyframes brilho{to{background-position:300% 0}}
.sub{color:#aab4e0;line-height:1.6;margin-bottom:24px}
.sub strong{color:#fff}

.form{display:flex;flex-direction:column;gap:14px}
label{font-size:14px;font-weight:600;display:flex;flex-direction:column;gap:6px}
label small{color:#8a94c0;font-weight:400}
input,select,textarea{font:inherit;font-weight:400;color:#fff;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:13px 14px;outline:none;transition:.2s}
select option{color:#111}
input:focus,select:focus,textarea:focus{border-color:#5b7cff;box-shadow:0 0 0 4px rgba(91,124,255,.25)}
.hp{position:absolute;left:-9999px;opacity:0;height:0}

.btn{display:block;width:100%;text-align:center;text-decoration:none;border:0;cursor:pointer;font:inherit;font-weight:800;font-size:17px;color:#fff;padding:17px;border-radius:14px;margin-top:6px;background:linear-gradient(90deg,#3b5bff,#00b8ff,#8a3bff,#3b5bff);background-size:300% 100%;animation:brilho 5s linear infinite;box-shadow:0 12px 30px rgba(59,91,255,.45);transition:transform .15s}
.btn:hover{transform:translateY(-2px) scale(1.01)}
.btn:active{transform:scale(.98)}
.btn-wa{display:block;text-align:center;margin-top:14px;padding:13px;border-radius:14px;color:#3dffa8;text-decoration:none;font-weight:600;border:1px solid rgba(61,255,168,.35);transition:.2s}
.btn-wa:hover{background:rgba(61,255,168,.1)}
.nota{font-size:12.5px;color:#8a94c0;text-align:center;margin-top:8px}
.fora{background:rgba(255,194,77,.08);border:1px solid rgba(255,194,77,.25);padding:16px;border-radius:14px;line-height:1.6;color:#ffe2a8}
.alerta{background:rgba(255,90,90,.12);border:1px solid rgba(255,90,90,.35);color:#ffb3b3;padding:12px 14px;border-radius:12px;margin-bottom:16px;font-size:14px}

.passos{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:26px}
.passos li{font-size:12.5px;color:#aab4e0;text-align:center;background:rgba(255,255,255,.04);border-radius:12px;padding:12px 8px;line-height:1.4}
.passos b{display:flex;align-items:center;justify-content:center;width:28px;height:28px;margin:0 auto 6px;border-radius:50%;background:linear-gradient(135deg,#3b5bff,#00d4ff);color:#fff}

.radar{position:relative;width:110px;height:110px;margin:0 auto 22px}
.radar i{position:absolute;inset:0;border-radius:50%;border:2px solid #00d4ff;animation:onda 2.4s ease-out infinite;opacity:0}
.radar i:nth-child(2){animation-delay:.8s}.radar i:nth-child(3){animation-delay:1.6s}
.radar span{position:absolute;inset:25px;border-radius:50%;background:linear-gradient(135deg,#3b5bff,#00d4ff);display:flex;align-items:center;justify-content:center;font-size:28px;box-shadow:0 0 40px rgba(0,212,255,.6)}
@keyframes onda{0%{transform:scale(.5);opacity:1}100%{transform:scale(1.4);opacity:0}}

@media (max-width:480px){.card{padding:28px 20px}.passos{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){*{animation:none!important}}
.camera{display:flex;gap:12px;align-items:flex-start;text-align:left;margin:16px 0 4px;padding:14px 16px;border-radius:14px;background:rgba(0,212,255,.08);border:1px solid rgba(0,212,255,.3);color:#bfefff;font-size:14px;line-height:1.55}
.camera>i{font-style:normal;font-size:20px;line-height:1}
.camera b{color:#fff}
.centro .camera{margin:0 0 22px}