body{
margin:0;
font-family:Inter,Arial;
background:#020617;
color:#e2e8f0;
}

nav{
display:flex;
justify-content:space-between;
padding:20px 40px;
border-bottom:1px solid #1e293b;
}

.logo{font-weight:700}

.navlinks a{
margin-left:20px;
color:#94a3b8;
}

.hero{
text-align:center;
padding:150px 20px;
background:
radial-gradient(circle at top,#1e293b,#020617);
}

.hero h1{
font-size:60px;
margin:0;
}

button{
margin-top:20px;
padding:14px 26px;
background:#38bdf8;
border:none;
border-radius:10px;
font-weight:700;
}

.stats{
display:flex;
justify-content:center;
gap:60px;
padding:40px;
font-size:22px;
}

.cards{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:20px;
padding:40px;
}

.card{
background:rgba(30,41,59,0.6);
backdrop-filter:blur(8px);
border:1px solid #1e293b;
padding:20px;
border-radius:14px;
box-shadow:0 0 40px rgba(0,0,0,0.6);
transition:0.2s;
}

.card:hover{
transform:translateY(-6px) scale(1.02);
}

footer{
text-align:center;
padding:40px;
color:#64748b;
}

@media(max-width:900px){
.cards{grid-template-columns:repeat(2,1fr)}
.stats{flex-direction:column;gap:20px}
.hero h1{font-size:42px}
}

@media(max-width:600px){
.cards{grid-template-columns:1fr}
nav{flex-direction:column;gap:10px}
.hero{padding:80px 10px}
.hero h1{font-size:32px}
}