*{box-sizing:border-box}
body{
margin:0;
background:#777966;
color:#f5f7ef;
font-family:Inter,Arial;
overflow-x:hidden;
}
.aurora{
position:fixed;inset:0;
background:
radial-gradient(circle at 20% 20%,#ffffff55,transparent 25%),
radial-gradient(circle at 80% 10%,#d9ffe455,transparent 30%);
z-index:-1;
}
.glass{
background:rgba(240,250,245,.12);
border:1px solid rgba(255,255,255,.35);
box-shadow:inset 0 0 50px #fff2,0 30px 90px #0004;
backdrop-filter:blur(25px);
border-radius:40px;
}
.nav{
margin:25px;
padding:15px 30px;
display:flex;
justify-content:space-between;
align-items:center;
}
.nav img{width:220px}
.nav a{
padding:12px 25px;
margin:5px;
border-radius:30px;
background:#ffffff22;
color:white;
text-decoration:none;
}
.hero{
max-width:1400px;
margin:30px auto;
display:grid;
grid-template-columns:1fr 1fr;
gap:30px;
}
.intro{padding:60px}
.pill{
background:#ffffff22;
padding:10px 20px;
border-radius:50px;
}
h1{font-size:90px;line-height:.8;margin:30px 0}
h2{font-size:40px}
.intro button{
border:0;
padding:18px 35px;
border-radius:50px;
background:white;
}
.hero-character{
display:flex;
align-items:center;
justify-content:center;
}
.hero-character img{height:600px}
.universe,.final{
max-width:1400px;
margin:40px auto;
padding:50px;
}
.cards,.roadmap{
max-width:1400px;
margin:40px auto;
display:grid;
grid-template-columns:repeat(3,1fr);
gap:25px;
}
.cards div,.step{
padding:30px;
background:#ffffff15;
border-radius:30px;
}
.roadmap{
grid-template-columns:1fr 1fr;
}
.card,.chart{padding:40px}
iframe{
width:100%;
height:500px;
border:0;
border-radius:30px;
}
.final{text-align:center}
.final img{width:500px}
@media(max-width:900px){
.hero,.roadmap,.cards{display:block}
h1{font-size:60px}
.hero-character img{height:400px}
}