*{
margin:0;
padding:0;
box-sizing:border-box;
}

html,
body{


width:100%;
height:100%;

overflow-x:hidden;

font-family:'Poppins',sans-serif;


}

body{


background:
linear-gradient(
135deg,
#0f172a,
#1d4ed8,
#2563eb);


}

.main-container{


min-height:100vh;

display:flex;

justify-content:center;

align-items:center;

padding:15px;

position:relative;

overflow:hidden;


}

.bg-circle{


position:absolute;

border-radius:50%;

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


}

.circle1{


width:250px;
height:250px;

top:-60px;
left:-60px;


}

.circle2{


width:300px;
height:300px;

right:-100px;
bottom:-100px;


}

.main-card{


width:100%;

max-width:500px;

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

backdrop-filter:blur(20px);

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

border-radius:30px;

padding:30px;

text-align:center;

position:relative;

z-index:10;


}

.logo{


width:100px;
height:100px;

margin:auto;

border-radius:50%;

background:#fff;

display:flex;

justify-content:center;

align-items:center;

font-size:50px;

box-shadow:
0 10px 30px
rgba(0,0,0,.20);


}

.logo-box h1{


color:#fff;

margin-top:20px;

font-size:38px;

font-weight:800;


}

.logo-box p{


color:
rgba(255,255,255,.90);

margin-top:8px;


}

.action-card{


margin-top:30px;

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

border-radius:20px;

padding:25px;


}

.icon{


font-size:55px;

margin-bottom:10px;


}

.action-card h2{


color:#fff;

margin-bottom:10px;


}

.action-card p{


color:
rgba(255,255,255,.90);

line-height:26px;


}

.btn-group{


display:flex;

gap:10px;

margin-top:20px;


}

.btn-register,
.btn-login{


flex:1;

text-decoration:none;

padding:14px;

border-radius:12px;

font-weight:600;

transition:.3s;


}

.btn-register{


background:#22c55e;

color:#fff;


}

.btn-login{


background:#fff;

color:#2563eb;


}

.btn-register:hover,
.btn-login:hover{


transform:
translateY(-2px);


}

.stats{


display:flex;

justify-content:space-between;

gap:10px;

margin-top:25px;


}

.stat{


flex:1;

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

padding:15px;

border-radius:15px;


}

.stat h3{


color:#fff;

font-size:22px;


}

.stat span{


color:
rgba(255,255,255,.85);

font-size:13px;


}

@media(max-width:768px){


.main-card{

    padding:20px;
}

.logo{

    width:80px;
    height:80px;

    font-size:40px;
}

.logo-box h1{

    font-size:28px;
}

.action-card{

    padding:18px;
}

.btn-group{

    flex-direction:row;
}

.btn-register,
.btn-login{

    font-size:13px;

    padding:12px;
}

.stats{

    gap:6px;
}

.stat{

    padding:10px;
}

.stat h3{

    font-size:18px;
}


}