:root{--bg:#04060f;--surface:#080d1e;--border:rgba(100,150,255,0.12);--bf:rgba(61,127,255,0.5);--accent:#3d7fff;--accent2:#00e5c4;--accent3:#a855f7;--text:#e8eeff;--dim:#7a8aaa;--muted:#3a4560;--green:#00e5a0;--red:#ff4d6d;}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{background:var(--bg);color:var(--text);font-family:'DM Sans',sans-serif;font-weight:300;min-height:100vh;display:flex;flex-direction:column;overflow-x:hidden;}

/* BG */
.bg-grid{position:fixed;inset:0;z-index:0;pointer-events:none;background-image:linear-gradient(rgba(61,127,255,0.04) 1px,transparent 1px),linear-gradient(90deg,rgba(61,127,255,0.04) 1px,transparent 1px);background-size:52px 52px;mask-image:radial-gradient(ellipse 90% 80% at 50% 20%,black 0%,transparent 100%);}
.orb{position:fixed;border-radius:50%;filter:blur(90px);pointer-events:none;z-index:0;}
.o1{width:550px;height:550px;background:radial-gradient(circle,rgba(61,127,255,0.13) 0%,transparent 70%);top:-150px;left:-150px;animation:oF 9s ease-in-out infinite;}
.o2{width:400px;height:400px;background:radial-gradient(circle,rgba(0,229,196,0.09) 0%,transparent 70%);bottom:-100px;right:-100px;animation:oF 11s ease-in-out infinite reverse;}
.o3{width:250px;height:250px;background:radial-gradient(circle,rgba(168,85,247,0.08) 0%,transparent 70%);top:50%;left:70%;animation:oF 7s ease-in-out infinite 1s;}
@keyframes oF{0%,100%{transform:translate(0,0);}33%{transform:translate(18px,-25px);}66%{transform:translate(-18px,18px);}}

/* LAYOUT */
.wrap{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;min-height:100vh;padding:36px 24px 52px;}

/* HEADER */
header{width:100%;max-width:480px;display:flex;justify-content:center;margin-bottom:32px;}
.logo{font-family:'Syne',sans-serif;font-weight:800;font-size:24px;letter-spacing:-0.5px;text-decoration:none;color:var(--text);}
.logo span{color:var(--accent);}

/* CARD */
.card{width:100%;max-width:480px;background:var(--surface);border:1px solid var(--border);border-radius:24px;padding:42px 40px 38px;position:relative;overflow:hidden;animation:fU .7s ease both;}
.card::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--accent),var(--accent2),transparent);}
.card::after{content:'';position:absolute;top:-60px;right:-60px;width:200px;height:200px;background:radial-gradient(circle,rgba(61,127,255,0.06) 0%,transparent 70%);pointer-events:none;}
@keyframes fU{from{opacity:0;transform:translateY(26px);}to{opacity:1;transform:translateY(0);}}

/* WELCOME */
.welcome{text-align:center;margin-bottom:28px;}
.wbadge{display:inline-flex;align-items:center;gap:7px;background:rgba(61,127,255,0.09);border:1px solid rgba(61,127,255,0.2);padding:5px 14px;border-radius:100px;font-size:11px;font-weight:500;color:var(--accent);letter-spacing:1.5px;text-transform:uppercase;margin-bottom:16px;}
.wdot{width:6px;height:6px;background:var(--accent2);border-radius:50%;animation:pulse 2s ease-in-out infinite;}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.4;transform:scale(.65);}}
.welcome h1{font-family:'Syne',sans-serif;font-weight:700;font-size:24px;letter-spacing:-0.5px;line-height:1.3;margin-bottom:8px;}
.welcome h1 em{font-style:normal;color:var(--accent);}
.welcome p{color:var(--dim);font-size:13.5px;line-height:1.6;}

/* DIVIDER */
.div{height:1px;background:var(--border);margin:0 0 26px;}

/* FORM */
.form{display:flex;flex-direction:column;gap:16px;}
.field{display:flex;flex-direction:column;gap:6px;}
label{font-size:12px;font-weight:500;color:var(--dim);letter-spacing:.3px;display:flex;align-items:center;gap:6px;}
.opt{font-size:10px;color:var(--muted);background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.07);padding:2px 7px;border-radius:100px;}
.iw{position:relative;}
.ii{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:14px;pointer-events:none;transition:color .25s;}

input, select{width:100%;background:rgba(255,255,255,0.03);border:1px solid var(--border);color:var(--text);padding:12px 14px 12px 40px;border-radius:12px;font-family:'DM Sans',sans-serif;font-size:14px;font-weight:300;outline:none;transition:border-color .25s,background .25s,box-shadow .25s;-webkit-appearance:none;appearance:none;}
input::placeholder{color:var(--muted);}
input:focus,select:focus{border-color:var(--bf);background:rgba(61,127,255,0.04);box-shadow:0 0 0 3px rgba(61,127,255,0.08);}
.iw:focus-within .ii{color:var(--accent);}

/* Select */
.sw{position:relative;}
.sw::after{content:'▾';position:absolute;right:14px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:12px;pointer-events:none;}
select option{background:#0d1428;color:var(--text);}

/* PW toggle */
.pw-w{position:relative;}
.pwt{position:absolute;right:13px;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--muted);cursor:pointer;font-size:14px;padding:0;transition:color .2s;}
.pwt:hover{color:var(--accent);}

/* Strength */
.pws{display:flex;gap:4px;margin-top:6px;}
.pwb{height:3px;flex:1;border-radius:100px;background:var(--border);transition:background .3s;}
.pwb.weak{background:var(--red);}.pwb.fair{background:#f5c842;}.pwb.good{background:var(--accent);}.pwb.strong{background:var(--green);}
.pwh{font-size:11px;color:var(--muted);margin-top:4px;}

/* Errors */
.ferr{font-size:11px;color:var(--red);display:none;align-items:center;gap:4px;margin-top:2px;}
.ferr.show{display:flex;}

/* BUTTON */
.btn{width:100%;background:var(--accent);border:none;color:#fff;padding:15px 32px;border-radius:14px;font-family:'DM Sans',sans-serif;font-size:15px;font-weight:500;cursor:pointer;margin-top:4px;position:relative;overflow:hidden;transition:transform .25s,box-shadow .25s,background .25s;box-shadow:0 0 22px rgba(61,127,255,.38),0 4px 18px rgba(61,127,255,.25);}
.btn::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 80% 60% at 50% 50%,rgba(255,255,255,.18) 0%,transparent 70%);opacity:0;animation:bP 2.8s ease-in-out infinite;}
.btn::after{content:'';position:absolute;top:0;left:-100%;width:60%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent);animation:sh 3s ease-in-out infinite 1s;}
@keyframes bP{0%,100%{opacity:0;transform:scale(.9);}50%{opacity:1;transform:scale(1.05);}}
@keyframes sh{0%{left:-100%;}50%{left:130%;}100%{left:130%;}}
.btn:hover{background:#5590ff;transform:translateY(-2px);box-shadow:0 0 38px rgba(61,127,255,.58),0 8px 30px rgba(61,127,255,.35);}
.btn:active{transform:translateY(0);}
.btn-txt{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:8px;}
.bdot{width:8px;height:8px;border-radius:50%;background:rgba(0,229,196,.9);animation:pulse 1.8s ease-in-out infinite;flex-shrink:0;}

/* Form footer */
.fftr{text-align:center;margin-top:18px;font-size:13px;color:var(--dim);}
.fftr a{color:var(--accent);text-decoration:none;}
.fftr a:hover{text-decoration:underline;}

/* Perks */
.perks{display:flex;justify-content:center;gap:18px;margin-top:22px;flex-wrap:wrap;}
.perk{display:flex;align-items:center;gap:5px;font-size:11.5px;color:var(--muted);}
.pi{color:var(--accent2);}

/* SUCCESS */
.sov{display:none;position:absolute;inset:0;background:var(--surface);border-radius:24px;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px;z-index:10;}
.sov.show{display:flex;}
.sico{width:72px;height:72px;border-radius:50%;background:rgba(0,229,160,.1);border:1px solid rgba(0,229,160,.25);display:flex;align-items:center;justify-content:center;font-size:32px;margin-bottom:22px;animation:sP .5s cubic-bezier(.34,1.56,.64,1) both;}
@keyframes sP{from{transform:scale(0);opacity:0;}to{transform:scale(1);opacity:1;}}
.stit{font-family:'Syne',sans-serif;font-size:22px;font-weight:700;margin-bottom:10px;color:var(--green);}
.ssub{color:var(--dim);font-size:14px;line-height:1.65;}

/* PAGE FOOTER */
footer{margin-top:auto;padding:24px 24px 0;text-align:center;font-size:12px;color:var(--muted);position:relative;z-index:1;}
footer a{color:var(--dim);text-decoration:none;margin:0 10px;transition:color .2s;}
footer a:hover{color:var(--accent);}

@media(max-width:520px){
  .card{padding:32px 22px 28px;}
}