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

body{

margin:0;
min-height:100vh;

background:
radial-gradient(circle at top,#18245c,#050510 70%);

color:white;

}


.hero{

text-align:center;
padding:50px 20px;

}


.brand{

font-size:45px;
font-weight:900;
letter-spacing:4px;

background:linear-gradient(90deg,#00d9ff,#9b4dff);

-webkit-background-clip:text;
color:transparent;

}


.hero h1{

font-size:32px;

}


.hero p{

color:#aaa;

}



.langs button{

background:#111827;
border:1px solid #333;

padding:10px;

border-radius:12px;

font-size:20px;

margin:5px;

}



.grid{

max-width:1200px;

margin:auto;

padding:25px;

display:grid;

grid-template-columns:repeat(auto-fit,minmax(260px,1fr));

gap:25px;

}



.card{

background:
linear-gradient(145deg,#12182b,#080812);

border-radius:25px;

padding:35px 25px;

text-align:center;

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

box-shadow:
0 0 30px rgba(0,120,255,.15);

}



.icon{

font-size:55px;

}



.card a{

display:block;

margin-top:25px;

padding:15px;

border-radius:15px;

background:
linear-gradient(90deg,#006eff,#9b4dff);

color:white;

text-decoration:none;

font-weight:bold;

}



footer{

text-align:center;

padding:30px;

opacity:.5;

}



@media(max-width:600px){

.brand{

font-size:34px;

}

.hero h1{

font-size:25px;

}

.grid{

grid-template-columns:1fr;

padding:15px;

}

.card{

padding:25px;

}

}

.codigo{

font-size:42px;
font-weight:900;
letter-spacing:5px;
padding:20px;
margin:20px 0;
background:#050510;
border-radius:20px;
border:1px solid rgba(0,200,255,.3);

}

.card button{

margin-top:15px;
width:100%;
padding:14px;
border-radius:15px;
background:#111827;
color:white;
border:1px solid #334;
font-weight:bold;

}