body{

margin:0;

font-family:Inter,Arial,sans-serif;

background:#050816;

color:white;

}



.hero{


min-height:100vh;

display:flex;

align-items:center;


background:

radial-gradient(circle at top left,#2563eb,transparent 35%),

radial-gradient(circle at bottom right,#9333ea,transparent 30%),

#050816;


}




.logo{

width:150px;

margin-bottom:30px;

}



.hero h1{


font-size:60px;

font-weight:800;

line-height:1.1;


}


.hero p{


color:#cbd5e1;

font-size:20px;


}



.features div{


background:rgba(255,255,255,.08);

padding:15px;

border-radius:15px;

margin-top:15px;

width:max-content;


}



.register-card{


background:rgba(255,255,255,.12);

backdrop-filter:blur(15px);


padding:40px;


border-radius:30px;


border:1px solid rgba(255,255,255,.2);


box-shadow:0 30px 80px rgba(0,0,0,.4);


}



.register-card h2{

font-size:32px;

}



.form-control{


background:white;

border:none;

padding:15px;

margin-bottom:15px;

border-radius:12px;


}




.btn-primary{


background:#2563eb;

border:none;

padding:16px;


font-weight:600;

font-size:16px;


}



@media(max-width:768px){


.hero{

padding:50px 20px;

}



.hero h1{

font-size:38px;

}



.register-card{

margin-top:40px;

padding:25px;

}



.features div{

width:100%;

}



}

#successPopup{


display:none;

position:fixed;

top:0;

left:0;

width:100%;

height:100%;

background:rgba(0,0,0,.6);

align-items:center;

justify-content:center;

z-index:9999;


}



.popup-box{


background:white;

color:#111;

padding:40px;

border-radius:25px;

text-align:center;

width:90%;

max-width:400px;


animation:popup .3s ease;


}



@keyframes popup{


from{

transform:scale(.7);

opacity:0;

}


to{

transform:scale(1);

opacity:1;

}


}