*{margin:0;padding:0;box-sizing:border-box;font-family:'Inter',sans-serif}

body{
    min-height:100vh;
    background:
        radial-gradient(circle at 15% 15%, rgba(99,102,241,.38), transparent 32%),
        radial-gradient(circle at 85% 20%, rgba(6,182,212,.28), transparent 30%),
        radial-gradient(circle at 50% 100%, rgba(168,85,247,.22), transparent 35%),
        #020617;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:22px;
    overflow-x:hidden;
    color:var(--text);
}

.bg-grid{
    position:fixed;
    inset:0;
    background-image:
        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
    background-size:42px 42px;
    mask-image:linear-gradient(to bottom, black, transparent);
    pointer-events:none;
}

.float-shape{
    position:fixed;
    width:260px;
    height:260px;
    border-radius:999px;
    filter:blur(70px);
    opacity:.35;
    animation:floatMove 10s ease-in-out infinite alternate;
}
.shape-1{background:#6366f1;left:-80px;top:80px}
.shape-2{background:#06b6d4;right:-90px;bottom:70px;animation-delay:1.2s}
.shape-3{background:#a855f7;right:20%;top:-110px;animation-delay:2s}

@keyframes floatMove{
    from{transform:translate3d(0,0,0) scale(1)}
    to{transform:translate3d(35px,45px,0) scale(1.12)}
}

.signup-shell{
    width:100%;
    max-width:1120px;
    min-height:690px;
    display:grid;
    grid-template-columns:1fr 1.05fr;
    background:var(--card);
    border:1px solid var(--border);
    border-radius:34px;
    overflow:hidden;
    position:relative;
    z-index:2;
    box-shadow:0 40px 90px rgba(0,0,0,.55);
    backdrop-filter:blur(22px);
    animation:cardIn .75s cubic-bezier(.2,.9,.2,1);
}

@keyframes cardIn{
    from{opacity:0;transform:translateY(24px) scale(.97)}
    to{opacity:1;transform:translateY(0) scale(1)}
}

.brand-panel{
    padding:42px;
    position:relative;
    overflow:hidden;
    background:
        linear-gradient(135deg, rgba(99,102,241,.24), rgba(6,182,212,.08)),
        rgba(2,6,23,.45);
}

.logo{
    display:flex;
    align-items:center;
    gap:12px;
    font-size:22px;
    font-weight:800;
}
.logo-icon{
    width:46px;
    height:46px;
    display:grid;
    place-items:center;
    border-radius:16px;
    background:linear-gradient(135deg,var(--primary),var(--secondary));
    box-shadow:0 18px 35px rgba(99,102,241,.35);
}

.hero-title{
    margin-top:72px;
    font-size:46px;
    line-height:1.06;
    letter-spacing:-1.6px;
}
.hero-title span{
    background:linear-gradient(90deg,#a5b4fc,#67e8f9);
    -webkit-background-clip:text;
    color:transparent;
}
.hero-text{
    margin-top:20px;
    color:#cbd5e1;
    line-height:1.75;
    max-width:430px;
}

.feature-list{
    margin-top:34px;
    display:grid;
    gap:14px;
}
.feature-item{
    display:flex;
    align-items:center;
    gap:12px;
    color:#dbeafe;
    font-size:14px;
}
.feature-item i{
    width:34px;
    height:34px;
    display:grid;
    place-items:center;
    border-radius:12px;
    background:rgba(255,255,255,.1);
    color:#67e8f9;
}

.orbit{
    position:absolute;
    width:310px;
    height:310px;
    border:1px solid rgba(255,255,255,.12);
    border-radius:50%;
    right:-90px;
    bottom:-70px;
    animation:spin 18s linear infinite;
}
.orbit::before,.orbit::after{
    content:"";
    position:absolute;
    width:16px;
    height:16px;
    border-radius:50%;
    background:#67e8f9;
    box-shadow:0 0 25px #67e8f9;
}
.orbit::before{top:22px;left:72px}
.orbit::after{bottom:44px;right:38px;background:#a5b4fc;box-shadow:0 0 25px #a5b4fc}
@keyframes spin{to{transform:rotate(360deg)}}

.form-panel{
    padding:38px;
    display:flex;
    flex-direction:column;
    background:rgba(2,6,23,.28);
}

.top-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:16px;
}
.badge{
    padding:8px 13px;
    border-radius:999px;
    background:rgba(34,197,94,.12);
    color:#86efac;
    font-size:12px;
    font-weight:700;
    border:1px solid rgba(34,197,94,.2);
}

.steps{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:10px;
    margin:28px 0;
}
.step{
    height:7px;
    border-radius:999px;
    background:rgba(148,163,184,.22);
    overflow:hidden;
}
.step.active::before,.step.done::before{
    content:"";
    display:block;
    height:100%;
    background:linear-gradient(90deg,var(--primary),var(--secondary));
    animation:stepFill .45s ease forwards;
}
@keyframes stepFill{from{width:0}to{width:100%}}

.form-step{display:none;animation:slideIn .35s ease}
.form-step.active{display:block}
@keyframes slideIn{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:translateX(0)}}

.form-title{
    font-size:30px;
    letter-spacing:-.7px;
    margin-bottom:8px;
}
.form-subtitle{
    color:var(--muted);
    margin-bottom:26px;
    line-height:1.6;
}

.field{
    position:relative;
    margin-bottom:18px;
}
.field i{
    position:absolute;
    left:17px;
    top:50%;
    transform:translateY(-50%);
    color:#64748b;
}
.field input{
    width:100%;
    height:56px;
    border-radius:18px;
    border:1px solid rgba(255,255,255,.1);
    background:rgba(15,23,42,.78);
    color:var(--text);
    padding:0 48px;
    outline:none;
    font-size:15px;
    transition:.25s;
}
.field input:focus{
    border-color:rgba(99,102,241,.75);
    box-shadow:0 0 0 5px rgba(99,102,241,.15);
    background:rgba(15,23,42,.95);
}
.field input::placeholder{color:#64748b}

.toggle-pw{
    position:absolute;
    right:17px;
    top:50%;
    transform:translateY(-50%);
    cursor:pointer;
    color:#94a3b8;
}

.message{
    font-size:13px;
    margin:-7px 0 14px;
    color:var(--warning);
}
.success-msg{color:#5eead4}
.error-msg{color:#fb7185}

.strength-wrap{
    margin:8px 0 14px;
}
.strength-top{
    display:flex;
    justify-content:space-between;
    color:#cbd5e1;
    font-size:13px;
    margin-bottom:8px;
}
.strength-bar{
    height:8px;
    border-radius:999px;
    background:rgba(148,163,184,.18);
    overflow:hidden;
}
.strength-fill{
    height:100%;
    width:0;
    border-radius:999px;
    transition:.25s;
}

.match-box{
    padding:12px 14px;
    border-radius:15px;
    background:rgba(15,23,42,.7);
    border:1px solid rgba(255,255,255,.08);
    color:#94a3b8;
    font-size:14px;
    display:flex;
    gap:9px;
    align-items:center;
}

.actions{
    margin-top:auto;
    padding-top:24px;
    display:flex;
    justify-content:space-between;
    gap:14px;
}
.btn{
    border:0;
    height:52px;
    padding:0 24px;
    border-radius:999px;
    font-weight:800;
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    transition:.25s;
}
.btn-primary{
    background:linear-gradient(90deg,var(--primary),var(--secondary));
    color:white;
    box-shadow:0 15px 32px rgba(99,102,241,.34);
}
.btn-primary:hover{transform:translateY(-2px)}
.btn-primary:disabled{opacity:.45;cursor:not-allowed;transform:none}
.btn-secondary{
    background:rgba(148,163,184,.16);
    color:#e2e8f0;
}
.btn-secondary:hover{background:rgba(148,163,184,.24)}

.otp-card{
    padding:18px;
    border-radius:22px;
    background:rgba(99,102,241,.12);
    border:1px solid rgba(99,102,241,.22);
    margin-bottom:18px;
    color:#c7d2fe;
    font-size:14px;
}

.shake{animation:shake .32s ease}
@keyframes shake{
    0%,100%{transform:translateX(0)}
    25%{transform:translateX(-7px)}
    50%{transform:translateX(7px)}
    75%{transform:translateX(-4px)}
}

@media(max-width:900px){
    .signup-shell{grid-template-columns:1fr;max-width:620px}
    .brand-panel{padding:30px}
    .hero-title{margin-top:38px;font-size:36px}
    .orbit{display:none}
}
@media(max-width:520px){
    body{padding:12px;align-items:flex-start}
    .signup-shell{border-radius:24px;min-height:auto}
    .brand-panel{padding:24px}
    .form-panel{padding:24px}
    .hero-title{font-size:30px}
    .hero-text{font-size:14px}
    .form-title{font-size:24px}
    .actions{flex-direction:column-reverse}
    .btn{width:100%}
}