*{
box-sizing:border-box;
font-family:
Inter,
Arial,
sans-serif;
}


body{

margin:0;

background:
#080d18;

color:white;

}



.container{

max-width:1100px;

margin:auto;

padding:30px;

}



.hero{

padding:60px 20px;

text-align:center;

}



.hero h1{

font-size:45px;

margin-bottom:10px;

}



.hero span{

color:#3b82f6;

}



.hero p{

color:#94a3b8;

font-size:18px;

}



.btn{


display:inline-block;

margin-top:30px;

padding:15px 30px;

background:#2563eb;

color:white;

border-radius:12px;

text-decoration:none;

font-weight:bold;

}



.btn:hover{

background:#1d4ed8;

}




.card{


background:

rgba(255,255,255,0.05);


border:

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


border-radius:20px;


padding:25px;


margin-top:25px;


backdrop-filter:blur(10px);


}




input,select{


width:100%;

padding:14px;

background:#111827;

border:none;

border-radius:10px;

color:white;

margin-top:8px;

}



label{

display:block;

margin-top:20px;

color:#cbd5e1;

}




.radio-group{


display:flex;

gap:15px;

margin-top:15px;


}



.radio{


background:#111827;

padding:15px;

border-radius:12px;

cursor:pointer;

flex:1;


}



.coin-grid{


display:grid;

grid-template-columns:

repeat(auto-fit,minmax(220px,1fr));

gap:15px;

}



.coin{


background:#111827;

padding:15px;

border-radius:15px;

}



.result-box{


background:#0f172a;

padding:20px;

border-radius:15px;

margin-top:20px;


}



.green{

color:#22c55e;

}


.red{

color:#ef4444;

}



@media(max-width:600px){


.hero h1{

font-size:32px;

}


.container{

padding:15px;

}



}