*{margin:0;padding:0;box-sizing:border-box}
body{
font-family:Inter,Segoe UI,Arial,sans-serif;
background:#070b14;
color:#fff;
overflow-x:hidden;
}
.bg{
position:fixed;
inset:0;
background:
radial-gradient(circle at 20% 20%,rgba(89,118,255,.25),transparent 35%),
radial-gradient(circle at 80% 30%,rgba(0,229,255,.15),transparent 35%);
z-index:-1;
}
header{
display:flex;
justify-content:space-between;
align-items:center;
padding:28px 8%;
backdrop-filter:blur(12px);
}
.logo{
font-weight:700;
letter-spacing:3px;
}
nav a{
color:#d7def7;
text-decoration:none;
margin-left:24px;
}
.hero{
padding:120px 8% 80px;
max-width:1100px;
}
.badge{
display:inline-block;
padding:10px 16px;
border:1px solid rgba(255,255,255,.15);
border-radius:999px;
background:rgba(255,255,255,.05);
margin-bottom:24px;
}
.hero h1{
font-size:72px;
line-height:1.05;
max-width:950px;
margin-bottom:24px;
}
.hero p{
font-size:20px;
max-width:700px;
color:#b6c1dd;
}
.hero-buttons{
margin-top:32px;
display:flex;
gap:16px;
}
.primary,.secondary{
padding:14px 22px;
border-radius:10px;
text-decoration:none;
}
.primary{
background:white;
color:black;
}
.secondary{
border:1px solid rgba(255,255,255,.2);
color:white;
}
.metrics{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:20px;
padding:0 8% 60px;
}
.card,.panel,section{
background:rgba(255,255,255,.04);
border:1px solid rgba(255,255,255,.08);
border-radius:18px;
}
.card{
padding:30px;
}
.card h2{
margin-bottom:8px;
}
section{
margin:20px 8%;
padding:40px;
}
.grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:20px;
margin-top:20px;
}
.panel{
padding:24px;
}
.timeline div{
padding:18px 0;
border-bottom:1px solid rgba(255,255,255,.08);
}
footer{
padding:80px 8%;
text-align:center;
color:#b6c1dd;
}
@media(max-width:900px){
.hero h1{font-size:44px}
.metrics,.grid{grid-template-columns:1fr}
}