body{
margin:0;
font-family:Inter,sans-serif;
background:#07111F;
color:white;
}

nav{
display:flex;
justify-content:space-between;
padding:20px 8%;
background:rgba(7,17,31,.9);
}

.menu a{
color:white;
text-decoration:none;
margin-left:20px;
}

.hero{
text-align:center;
padding:120px 20px;
background:
radial-gradient(circle at top,#154d9c 0%,#07111F 70%);
}

.hero h1{
font-size:60px;
max-width:850px;
margin:auto;
}

.hero p{
font-size:20px;
color:#C8D2E4;
margin:30px auto;
max-width:650px;
}

.btn{
display:inline-block;
padding:15px 35px;
background:#18C5B8;
color:white;
text-decoration:none;
border-radius:999px;
font-weight:600;
}

section{
padding:80px 8%;
}

.cards{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:25px;
}

.card{
background:rgba(255,255,255,.05);
padding:30px;
border-radius:24px;
backdrop-filter:blur(12px);
border:1px solid rgba(255,255,255,.08);
}

footer{
text-align:center;
padding:40px;
opacity:.7;
}

@media(max-width:700px){

.hero h1{
font-size:42px;
}

.menu{
display:none;
}

}