:root{
--bg:#0b1020;
--panel:#131b34;
--text:#e8edf7;
--accent:#5ea0ff;
}
*{box-sizing:border-box}
body{
margin:0;
font-family:system-ui,sans-serif;
background:linear-gradient(180deg,#08101d,#10172d);
color:var(--text);
max-width:1200px;
padding:20px;
margin:auto;
}
header{
display:flex;
justify-content:space-between;
align-items:center;
padding:20px 0;
}
.logo{font-weight:700;font-size:1.4rem}
nav a{color:var(--text);margin-left:16px}
.hero{padding:90px 0}
.hero h1{font-size:3rem;max-width:800px}
.hero p{max-width:700px;color:#b7c3dd}
.buttons{margin-top:30px}
.btn{
background:var(--accent);
color:white;
padding:14px 22px;
border-radius:10px;
display:inline-block;
margin-right:10px;
}
.ghost{background:transparent;border:1px solid var(--accent)}
.cards{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:20px;
}
.card{
background:var(--panel);
padding:24px;
border-radius:16px;
border:1px solid rgba(255,255,255,.05);
}
footer{
margin-top:80px;
padding:20px 0;
color:#9fb0d1;
}
a{text-decoration:none}
@media(max-width:700px){
.hero h1{font-size:2rem}
header{flex-direction:column;gap:10px}
}