*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Arial,sans-serif;
}

body{
background:#050505;
color:white;
overflow-x:hidden;
}

#particles{
position:fixed;
width:100%;
height:100%;
z-index:-1;
background:
radial-gradient(circle at 20% 20%, rgba(121,85,255,.15), transparent 30%),
radial-gradient(circle at 80% 30%, rgba(255,255,255,.08), transparent 30%),
radial-gradient(circle at 50% 80%, rgba(121,85,255,.1), transparent 30%);
}

nav{
display:flex;
justify-content:space-between;
align-items:center;
padding:25px 50px;
border-bottom:1px solid rgba(255,255,255,.06);
}

.logo{
font-size:40px;
font-weight:bold;
}

.infinity{
display:inline-block;
animation: spin 8s linear infinite;
color:#c9bfff;
text-shadow:0 0 20px #fff;
}

@keyframes spin{
from{transform:rotate(0deg);}
to{transform:rotate(360deg);}
}

nav ul{
display:flex;
gap:35px;
list-style:none;
color:#aaa;
}

.nav-buttons{
display:flex;
gap:15px;
}

.nav-btn{
padding:14px 25px;
border-radius:14px;
text-decoration:none;
font-weight:bold;
}

.dark{
background:#111;
color:white;
border:1px solid rgba(255,255,255,.1);
}

.light{
background:white;
color:black;
}

.hero{
display:flex;
justify-content:space-between;
align-items:center;
padding:80px 60px;
min-height:85vh;
}

.left{
max-width:550px;
}

.badge{
display:inline-block;
padding:12px 20px;
border:1px solid rgba(121,85,255,.4);
border-radius:15px;
margin-bottom:30px;
color:#d9d2ff;
}

.left h1{
font-size:78px;
line-height:1;
margin-bottom:25px;
}

.left p{
font-size:20px;
color:#999;
line-height:1.8;
}

.hero-buttons{
margin-top:35px;
display:flex;
gap:20px;
}

.main-btn,.watch-btn{
padding:16px 28px;
border-radius:15px;
text-decoration:none;
font-weight:bold;
}

.main-btn{
background:#d8cfff;
color:black;
box-shadow:0 0 30px rgba(121,85,255,.4);
}

.watch-btn{
border:1px solid rgba(255,255,255,.2);
color:white;
}

.right{
display:flex;
justify-content:center;
align-items:center;
flex:1;
}

.big-logo{
font-size:180px;
font-weight:bold;
color:#ddd;
position:relative;
}

.big-logo span{
color:#d8cfff;
animation: spin 8s linear infinite;
display:inline-block;
text-shadow:
0 0 20px #fff,
0 0 40px #a78bfa,
0 0 80px #7c3aed;
}

.cards{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
gap:25px;
padding:40px 60px;
}

.card{
background:rgba(255,255,255,.03);
border:1px solid rgba(121,85,255,.15);
padding:35px;
border-radius:20px;
backdrop-filter:blur(10px);
transition:.4s;
}

.card:hover{
transform:translateY(-8px);
box-shadow:0 0 30px rgba(121,85,255,.15);
}

.card h3{
font-size:26px;
margin-bottom:15px;
}

.card p{
color:#aaa;
line-height:1.8;
}

.bottom{
padding:90px 20px;
text-align:center;
}

.bottom h2{
font-size:52px;
margin-bottom:20px;
}

.bottom p{
color:#999;
font-size:18px;
margin-top:10px;
}

@media(max-width:900px){

nav ul{
display:none;
}

.hero{
flex-direction:column;
text-align:center;
}

.left h1{
font-size:52px;
}

.big-logo{
font-size:100px;
margin-top:50px;
}
}