*{

margin:0;
padding:0;
box-sizing:border-box;
font-family:Inter,sans-serif;

}



body{

min-height:100vh;

background:

radial-gradient(
circle at top left,
#087f5b,
transparent 35%
),

#061613;


color:#d4e7e1;

}




.container{

display:flex;

min-height:100vh;

}




.brand{

width:50%;

padding:70px;

display:flex;

flex-direction:column;

justify-content:space-between;

background:

linear-gradient(
135deg,
#011a12,
#061613
);

}




.logo{

display:flex;

align-items:center;

gap:15px;

}



.logo h1{

font-size:32px;

color:white;

}



.logo-icon{

width:45px;

height:45px;

border-radius:12px;

background:#00ff9c;

color:#00391f;

display:flex;

align-items:center;

justify-content:center;

font-size:25px;

}





.hero h2{

font-size:55px;

line-height:1.1;

color:white;

}



.hero h2 span{

color:#00ff9c;

}



.hero p{

margin-top:25px;

max-width:450px;

font-size:18px;

color:#b9cbbc;

line-height:1.6;

}




.stats{

display:flex;

gap:35px;

margin-top:50px;

}



.stats div{

display:flex;

flex-direction:column;

}



.stats strong{

font-size:32px;

color:#00ff9c;

}



.stats span{

color:#b9cbbc;

}





.security{

color:#b9cbbc;

line-height:2;

}





.auth{

width:50%;

display:flex;

justify-content:center;

align-items:center;

background:#02110e;

padding:30px;

}




.card{


width:430px;

padding:35px;

background:

rgba(14,30,27,.7);


backdrop-filter:blur(15px);


border:

1px solid rgba(255,255,255,.1);


border-radius:20px;


}





.tabs{
    display:grid;
    grid-template-columns:1fr 1fr;
    width:100%;
    margin-bottom: 30px;
}

.tabs button{
    width:100%;
    height:50px;

    background:none;
    border:0;

    color:#849587;
    font-size:16px;

    display:flex;
    justify-content:center;
    align-items:center;

    white-space:nowrap;
    border-bottom:2px solid #3b4b3f;
}



a{
    text-decoration: none;
}


.tabs .active{

color:#00ff9c;

border-bottom:2px solid #00ff9c;

}




.google{

width:100%;

padding:15px;

border-radius:12px;

background:#12231f;

border:1px solid #3b4b3f;

color:white;

font-size:16px;

}




.or{

display:flex;

align-items:center;

gap:15px;

margin:25px 0;

color:#849587;

}



.or span{

height:1px;

background:#3b4b3f;

flex:1;

}





.input{

margin-bottom:18px;

}



.input input{

width:100%;

padding:16px;

border-radius:12px;

border:1px solid #3b4b3f;

background:#0e1e1b;

color:white;

font-size:16px;

}



.input input:focus{

outline:none;

border-color:#00ff9c;

box-shadow:0 0 12px #00ff9c55;

}




.submit{

width:100%;

padding:16px;

border:0;

border-radius:12px;


background:

linear-gradient(
90deg,
#00ff9c,
#087f5b
);


color:#00391f;

font-weight:bold;

font-size:17px;


box-shadow:

0 0 20px #00ff9c55;

}



.login{

text-align:center;

margin-top:25px;

color:#b9cbbc;

}



.login a{

color:#00ff9c;

text-decoration:none;

}



.k1{
    white-space: nowrap;
}




input:hover{
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    border-color: #00FF9C;
    border-radius: 18px;
    transition: 0.3s ease;
}







input{
     width: 300px;
    background: rgba(0, 255, 156, 0.08);
    border: 2px solid #087F5B;
    color: #E8FFF5;
    border-radius: 12px;
    padding: 14px;
    outline: none;
    transition: 0.3s;
    margin: auto;
    display: flex;
}



input:focus{
    background: rgba(0, 255, 156, 0.14);
    border-color: #00FF9C;
    box-shadow: 0 0 15px #00FF9C55;
    transition: 0.3s ease;
}


@media(max-width:900px){


.brand{

display:none;

}



.auth{

width:100%;

}



.card{

width:100%;

}


}