*{
    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;

}



.k1{
    white-space: nowrap;
}



.container{

    min-height:100vh;

    display:flex;

}



.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{

    color:#f3fff3;

    font-size:30px;

}



.logo-box{

    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;

    font-size:18px;

    color:#b9cbbc;

    max-width:450px;

}



.chart{

    margin-top:50px;

    height:120px;

    display:flex;

    align-items:end;

    gap:20px;

}



.chart div{

    width:12px;

    background:#00ff9c;

    border-radius:20px;

}



.chart div:nth-child(1){
height:30px;
}


.chart div:nth-child(2){
height:60px;
}


.chart div:nth-child(3){
height:45px;
}


.chart div:nth-child(4){
height:90px;
}


.chart div:nth-child(5){
height:75px;
}


.chart div:nth-child(6){
height:120px;
box-shadow:0 0 20px #00ff9c;
}



.trust{

    color:#b9cbbc;

}



.auth{

    width:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#02110e;

}



.card{

    width:420px;

    padding:35px;

    border-radius:20px;


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


    backdrop-filter:blur(15px);


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

}



.tabs{

    display:flex;

    border-bottom:1px solid #3b4b3f;

    margin-bottom:30px;

}


.tabs button{

    width:50%;

    padding:15px;

    background:none;

    border:0;

    color:#b9cbbc;

    font-size:16px;

}



.tabs .active{

    color:#00ff9c;

    border-bottom:2px solid #00ff9c;

}



.google{

    width:100%;

    padding:15px;

    border-radius:10px;

    border:1px solid #3b4b3f;

    background:#12231f;

    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-box{

    margin-bottom:20px;

}



.input-box input{

    width:100%;

    padding:16px;

    border-radius:12px;

    border:1px solid #3b4b3f;

    background:#0e1e1b;

    color:white;

    font-size:16px;

}



.input-box input:focus{

    outline:none;

    border-color:#00ff9c;

    box-shadow:0 0 10px #00ff9c66;

}



.submit{

    width:100%;

    padding:16px;

    border:none;

    border-radius:12px;

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

    color:#00391f;

    font-weight:bold;

    font-size:17px;


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

}



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;
}



.security{

    text-align:center;

    margin-top:25px;

    color:#849587;

    font-size:13px;

}




@media(max-width:900px){


.brand{

display:none;

}


.auth{

width:100%;

padding:20px;

}


.card{

width:100%;

}


}