*{box-sizing:border-box}
body{
margin:0;
background:#050505;
color:white;
font-family:Inter,Arial,sans-serif;
overflow-x:hidden;
}
.background{
position:fixed;
inset:0;
background:
radial-gradient(circle at 50% 0%,rgba(255,255,255,.08),transparent 35%),
linear-gradient(#050505,#080808);
z-index:-1;
}
header{
height:90px;
display:flex;
align-items:center;
justify-content:space-between;
padding:0 8%;
border-bottom:1px solid #202020;
backdrop-filter:blur(20px);
}
.logo{height:52px}
nav{display:flex;gap:40px;color:#aaa}
nav a:hover{color:white}
button{
padding:15px 32px;
border-radius:12px;
border:0;
font-weight:700;
cursor:pointer;
}
.primary{background:white;color:black}
.secondary{
background:#151515;
color:white;
border:1px solid #333;
}
.hero{
min-height:800px;
display:flex;
align-items:center;
justify-content:space-between;
padding:80px 8%;
}
.badge{
font-size:12px;
color:#aaa;
letter-spacing:3px;
}
h1{
font-size:90px;
margin:20px 0 0;
}
h2{
font-size:55px;
margin:0;
}
.hero h2 span{color:#aaa}
.hero p{
font-size:20px;
color:#999;
max-width:550px;
line-height:1.6;
}
.launcher-card{
width:600px;
height:380px;
background:#0d0d0d;
border:1px solid #262626;
border-radius:30px;
display:flex;
align-items:center;
justify-content:center;
box-shadow:0 0 80px rgba(255,255,255,.08);
}
.placeholder{
color:#777;
font-size:30px;
}
.feature-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:25px;
padding:80px 8%;
}
.feature-grid div,.cards div{
background:#0b0b0b;
border:1px solid #202020;
border-radius:25px;
padding:35px;
}
.feature-grid p{color:#888}
.showcase,.modules,.download{
padding:120px 8%;
text-align:center;
}
.cards{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:20px;
margin-top:60px;
}
.cards div{
height:220px;
display:flex;
align-items:end;
font-size:28px;
}
.modules-row{
display:flex;
justify-content:center;
gap:20px;
margin-top:50px;
flex-wrap:wrap;
}
.modules-row span{
background:#111;
border:1px solid #333;
padding:20px 35px;
border-radius:15px;
}
footer{
padding:50px;
text-align:center;
color:#777;
}
footer img{height:50px}
@media(max-width:900px){
.hero{flex-direction:column}
.feature-grid,.cards{grid-template-columns:1fr}
.launcher-card{width:100%}
h1{font-size:55px}
}