body{font-family:'Inter',sans-serif;font-weight:300;overflow-x:hidden}
.shell{min-height:100vh;display:grid;grid-template-columns:minmax(0,3fr) minmax(440px,2fr)}
.visual{position:relative;overflow:hidden;isolation:isolate;color:#fff;background:linear-gradient(140deg,#0a3d91 0%,#1458c9 45%,#22a8c9 100%)}
.orb{position:absolute;border-radius:50%;z-index:-1;filter:blur(2px)}
.o1{width:520px;height:520px;right:-140px;top:-160px;border:1px solid rgba(255,255,255,.16);animation:drift 14s ease-in-out infinite}
.o2{width:360px;height:360px;left:-120px;bottom:-120px;background:radial-gradient(circle,rgba(108,198,211,.5),transparent 70%);animation:drift 11s ease-in-out infinite reverse}
.o3{width:220px;height:220px;right:18%;bottom:22%;border:1px solid rgba(255,255,255,.1);animation:drift 17s ease-in-out infinite}
@keyframes drift{50%{transform:translate(24px,30px)}}
.vbrand{position:absolute;top:clamp(30px,6vh,64px);left:clamp(34px,7vw,84px);display:flex;align-items:center;gap:12px;animation:fadeIn .8s var(--ease) both}
.vbrand b{display:block;font-family:'Plus Jakarta Sans';font-size:30px;font-weight:600;letter-spacing:-.04em}
.vbrand small{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#d7ecf6}
.vmsg{position:absolute;left:clamp(34px,7vw,84px);bottom:clamp(54px,12vh,128px);width:min(470px,calc(100% - 68px));animation:rise .9s var(--ease) .15s both}
.vmsg h1{font-family:'Plus Jakarta Sans';font-size:clamp(38px,4vw,58px);font-weight:400;line-height:1.04;letter-spacing:-.04em;text-wrap:balance}
.vmsg p{margin-top:24px;font-size:17px;line-height:1.55;color:rgba(255,255,255,.86)}
.vmsg::after{content:'';display:block;width:46px;height:4px;margin-top:28px;border-radius:4px;background:#6cc6d3;animation:wide 1s var(--ease) .6s both}
@keyframes wide{from{width:0}}
@keyframes rise{from{opacity:0;transform:translateY(24px)}}
@keyframes fadeIn{from{opacity:0}}
.panel{position:relative;min-height:100vh;display:grid;place-items:center;overflow:hidden;padding:40px;background:radial-gradient(circle at 30% 20%,#fff,#eaf2fd 55%,#dcebfb)}
.panel::before,.panel::after{content:'';position:absolute;width:430px;height:430px;border:1px solid rgba(34,168,201,.3);border-radius:50%;pointer-events:none}
.panel::before{top:-300px;right:-110px}.panel::after{bottom:-335px;left:-250px}
.card{position:relative;z-index:1;width:min(470px,100%);background:rgba(255,255,255,.94);border:1px solid rgba(42,103,234,.1);border-radius:22px;padding:34px 44px 30px;box-shadow:0 24px 70px rgba(10,61,145,.14);backdrop-filter:blur(12px);animation:cardIn .6s var(--ease) both}
@keyframes cardIn{from{opacity:0;transform:translateY(18px) scale(.98)}}
.back{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:#8896A8;margin-bottom:22px;transition:color .2s,transform .2s var(--ease)}
.back:hover{color:var(--blue);transform:translateX(-3px)}
.tela{display:none}
.tela.on{display:block;animation:telaIn .45s var(--ease) both}
.tela.sai{display:block;animation:telaOut .2s ease both}
@keyframes telaIn{from{opacity:0;transform:translateX(24px)}}
@keyframes telaOut{to{opacity:0;transform:translateX(-24px)}}
header{margin-bottom:26px}
header h2{font-family:'Plus Jakarta Sans';font-size:27px;font-weight:500;letter-spacing:-.025em}
header p{margin-top:8px;color:#73849b;font-size:13px;line-height:1.5}
.fg{display:block;margin-bottom:16px}
.fg>span{display:block;font-size:12px;color:#1a8fae;font-weight:600;font-weight:400;margin-bottom:8px}.fg small{color:#9aacbf}
.inp{position:relative}
.inp>i{position:absolute;top:50%;left:15px;transform:translateY(-50%);font-size:18px;color:#22a8c9;pointer-events:none}
.inp input{width:100%;min-height:52px;padding:12px 46px;background:#eaf1fd;border:1px solid rgba(42,103,234,.2);border-radius:999px;font:400 14px 'Inter';color:var(--ink);outline:none;transition:border-color .2s,box-shadow .2s,transform .2s var(--ease)}
.inp input::placeholder{color:#7B8DA5}
.inp input:focus{border-color:var(--blue);box-shadow:0 0 0 4px rgba(42,103,234,.16);background:#fff;transform:translateY(-1px)}
.eye{position:absolute;top:50%;right:8px;width:36px;height:36px;display:grid;place-items:center;border:0;border-radius:8px;background:transparent;color:#22a8c9;transform:translateY(-50%);transition:background .2s}
.eye:hover{background:#f1f6fc}
.lnk{color:#1f7fb0;font-size:12px;transition:color .2s}.lnk:hover{color:#0a3d91;text-decoration:underline}
.lnk.right{display:block;text-align:right;margin:-4px 0 14px}
.full{width:100%;margin-top:6px}
.alt{text-align:center;margin-top:18px;font-size:13px;color:#73849b}.alt .lnk{font-size:13px}
.err,.ok{display:none;margin:12px 0;padding:10px 12px;border-radius:7px;font-size:12px;text-align:center}
.err{background:rgba(220,38,38,.06);border:1px solid rgba(220,38,38,.18);color:#DC2626}
.ok{background:rgba(18,183,106,.08);border:1px solid rgba(18,183,106,.25);color:#0b7a46}
.err.on,.ok.on{display:block;animation:shake .4s ease}
.ok.on{animation:fade .4s ease}
@keyframes shake{20%,60%{transform:translateX(-5px)}40%,80%{transform:translateX(5px)}}
@keyframes fade{from{opacity:0}}
.foot{text-align:center;margin-top:24px;font-size:10px;color:#97a7ba;letter-spacing:.04em}
@media (max-width:900px){.shell{grid-template-columns:1fr}.visual{display:none}.card{padding:28px 24px}}

/* logo SURIA: azul-marinho some no fundo escuro, então a marca ganha um bloco branco; e uma versão grande e discreta ilustra o painel */
.vbrand img{filter:drop-shadow(0 4px 14px rgba(6,110,246,.45))}
.vbrand b{font-size:26px;letter-spacing:.1em;font-weight:700}
.visual .marca{position:absolute;right:-6%;bottom:-8%;width:min(62%,560px);opacity:.09;filter:brightness(0) invert(1);z-index:-1;pointer-events:none;animation:flutua 16s ease-in-out infinite}
@keyframes flutua{50%{transform:translateY(-18px) rotate(1.5deg)}}