:root{  
    --bg:#09090b;  
    --bg2:#141420;  
    --card:rgba(255,255,255,.06);  
    --border:rgba(255,255,255,.08);  
  
    --pink:#ec4899;  
    --purple:#a855f7;  
    --violet:#7c3aed;  
  
    --text:#ffffff;  
    --muted:#b8b8c7;  
  
    --radius:18px;  
}  
  
*{  
    margin:0;  
    padding:0;  
    box-sizing:border-box;  
}  
  
html{  
    scroll-behavior:smooth;  
}  
  
body{  
  
    font-family:Poppins,sans-serif;  
    background:var(--bg);  
    color:var(--text);  
    overflow-x:hidden;  
}  
  
body::before{  
  
content:"";  
position:fixed;  
width:700px;  
height:700px;  
left:-200px;  
top:-250px;  
  
background:radial-gradient(circle,var(--purple),transparent 70%);  
opacity:.15;  
filter:blur(80px);  
pointer-events:none;  
  
}  
  
body::after{  
  
content:"";  
position:fixed;  
right:-250px;  
bottom:-250px;  
width:700px;  
height:700px;  
  
background:radial-gradient(circle,var(--pink),transparent 70%);  
opacity:.15;  
filter:blur(80px);  
pointer-events:none;  
  
}  
  
.background{  
  
position:fixed;  
inset:0;  
background:  
  
linear-gradient(  
135deg,  
rgba(168,85,247,.06),  
transparent 40%),  
  
linear-gradient(  
315deg,  
rgba(236,72,153,.06),  
transparent 45%);  
  
z-index:-1;  
  
}  
  
/* NAVBAR */  
  
.navbar{  
  
position:fixed;  
top:20px;  
left:50%;  
transform:translateX(-50%);  
  
width:min(1200px,92%);  
  
display:flex;  
justify-content:space-between;  
align-items:center;  
  
padding:18px 28px;  
  
background:rgba(10,10,15,.55);  
  
backdrop-filter:blur(20px);  
  
border:1px solid rgba(255,255,255,.06);  
  
border-radius:50px;  
  
z-index:999;  
  
}  
  
.logo{  
  
display:flex;  
align-items:center;  
gap:12px;  
  
font-weight:700;  
}  
  
.logo img{  
  
width:46px;  
  
}  
  
.navbar ul{  
  
display:flex;  
gap:32px;  
list-style:none;  
  
}  
  
.navbar a{  
  
color:white;  
text-decoration:none;  
  
transition:.3s;  
  
}  
  
.navbar ul a:hover{  
  
color:var(--pink);  
  
}  
  
.discordButton{  
  
padding:14px 24px;  
  
background:linear-gradient(  
90deg,  
var(--pink),  
var(--purple));  
  
border-radius:40px;  
  
font-weight:600;  
  
box-shadow:0 0 25px rgba(236,72,153,.45);  
  
}  
  
.discordButton:hover{  
  
transform:translateY(-2px);  
  
}  
  
/* HERO */  
  
.hero{  
  
min-height:100vh;  
  
display:grid;  
  
grid-template-columns:1fr 1fr;  
  
align-items:center;  
  
width:min(1200px,92%);  
  
margin:auto;  
  
padding-top:120px;  
  
gap:80px;  
  
}  
  
.hero h1{  
  
font-size:4.3rem;  
line-height:1.05;  
margin-bottom:25px;  
  
}  
  
.hero h1 span{  
  
background:linear-gradient(  
90deg,  
var(--pink),  
var(--purple));  
  
-webkit-background-clip:text;  
color:transparent;  
  
}  
  
.hero p{  
  
font-size:1.1rem;  
  
line-height:1.9;  
  
color:var(--muted);  
  
margin-bottom:35px;  
  
}  
  
.heroButtons{  
  
display:flex;  
gap:20px;  
  
margin-bottom:50px;  
  
}  
  
.primaryButton,  
.secondaryButton,  
.bigDiscord{  
  
text-decoration:none;  
  
padding:18px 34px;  
  
border-radius:50px;  
  
font-weight:600;  
  
transition:.35s;  
  
display:inline-flex;  
align-items:center;  
justify-content:center;  
  
}  
  
.primaryButton,  
.bigDiscord{  
  
background:linear-gradient(  
90deg,  
var(--pink),  
var(--purple));  
  
color:white;  
  
box-shadow:0 0 35px rgba(236,72,153,.4);  
  
}  
  
.secondaryButton{  
  
border:1px solid rgba(255,255,255,.12);  
  
background:rgba(255,255,255,.05);  
  
color:white;  
  
}  
  
.primaryButton:hover,  
.bigDiscord:hover{  
  
transform:translateY(-4px);  
  
box-shadow:0 0 45px rgba(236,72,153,.7);  
  
}  
  
.secondaryButton:hover{  
  
background:rgba(255,255,255,.1);  
  
}  
  
.heroRight{  
  
display:flex;  
justify-content:center;  
  
}  
  
.heroRight img{  
  
width:100%;  
max-width:500px;  
  
animation:float 5s ease-in-out infinite;  
  
filter:drop-shadow(0 0 50px rgba(236,72,153,.35));  
  
}  
  
.stats{  
  
display:flex;  
  
gap:25px;  
  
flex-wrap:wrap;  
  
}  
  
.stats div{  
  
background:var(--card);  
  
padding:22px;  
  
border-radius:var(--radius);  
  
backdrop-filter:blur(15px);  
  
border:1px solid var(--border);  
  
min-width:120px;  
  
text-align:center;  
  
}  
  
.stats h2{  
  
color:var(--pink);  
  
margin-bottom:8px;  
  
}  
  
/* GLASS */  
  
.glass{  
  
width:min(1100px,90%);  
margin:120px auto;  
  
padding:60px;  
  
background:var(--card);  
  
backdrop-filter:blur(20px);  
  
border:1px solid var(--border);  
  
border-radius:24px;  
  
}  
  
.glass h2{  
  
font-size:2.5rem;  
  
margin-bottom:25px;  
  
}  
  
.glass p{  
  
color:var(--muted);  
  
line-height:2;  
  
margin-bottom:20px;  
  
}  
  
/* FEATURES */  
  
#features{  
  
width:min(1200px,92%);  
margin:120px auto;  
  
}  
  
#features h2{  
  
font-size:2.5rem;  
  
text-align:center;  
  
margin-bottom:60px;  
  
}  
  
.featureGrid{  
  
display:grid;  
  
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));  
  
gap:30px;  
  
}  
  
.card{  
  
background:var(--card);  
  
border:1px solid var(--border);  
  
backdrop-filter:blur(15px);  
  
border-radius:20px;  
  
padding:35px;  
  
transition:.35s;  
  
}  
  
.card:hover{  
  
transform:translateY(-8px);  
  
border-color:var(--pink);  
  
box-shadow:0 0 35px rgba(236,72,153,.2);  
  
}  
  
.card h3{  
  
margin-bottom:18px;  
  
}  
  
.card p{  
  
color:var(--muted);  
  
line-height:1.8;  
  
}  
  
/* SENA */  
  
.senaSection{  
  
width:min(1200px,92%);  
margin:140px auto;  
  
display:grid;  
  
grid-template-columns:1fr 1fr;  
  
gap:80px;  
  
align-items:center;  
  
}  
  
.senaImage img{  
  
width:100%;  
max-width:450px;  
  
animation:float 6s ease-in-out infinite;  
  
}  
  
.senaText h2{  
  
font-size:3rem;  
  
margin-bottom:25px;  
  
}  
  
.senaText p{  
  
color:var(--muted);  
  
line-height:2;  
  
margin-bottom:35px;  
  
}  
  
/* CTA */  
  
.cta{  
  
width:min(1000px,92%);  
  
margin:150px auto;  
  
text-align:center;  
  
padding:80px 40px;  
  
border-radius:30px;  
  
background:linear-gradient(  
135deg,  
rgba(168,85,247,.15),  
rgba(236,72,153,.15));  
  
border:1px solid rgba(255,255,255,.08);  
  
}  
  
.cta h2{  
  
font-size:3rem;  
  
margin-bottom:20px;  
  
}  
  
.cta p{  
  
color:var(--muted);  
  
margin-bottom:40px;  
  
line-height:2;  
  
}  
  
/* FAQ */  
  
#faq{  
  
width:min(1000px,92%);  
  
margin:140px auto;  
  
}  
  
#faq h2{  
  
text-align:center;  
  
margin-bottom:50px;  
  
font-size:2.5rem;  
  
}  
  
.question{  
  
padding:30px;  
  
margin-bottom:20px;  
  
background:var(--card);  
  
border-radius:18px;  
  
border:1px solid var(--border);  
  
}  
  
.question h3{  
  
margin-bottom:15px;  
  
}  
  
.question p{  
  
color:var(--muted);  
  
line-height:1.8;  
  
}  
  
/* FOOTER */  
  
footer{  
  
margin-top:140px;  
  
padding:70px 20px;  
  
text-align:center;  
  
border-top:1px solid rgba(255,255,255,.06);  
  
}  
  
footer img{  
  
width:70px;  
  
margin-bottom:20px;  
  
}  
  
footer p{  
  
margin-top:10px;  
  
color:var(--muted);  
  
}  
  
/* ANIMATIONS */  
  
@keyframes float{  
  
0%{  
transform:translateY(0px);  
}  
  
50%{  
transform:translateY(-18px);  
}  
  
100%{  
transform:translateY(0px);  
}  
  
}  
  
/* MOBILE */  
  
@media(max-width:900px){  
  
.navbar ul{  
  
display:none;  
  
}  
  
.hero{  
  
grid-template-columns:1fr;  
text-align:center;  
  
}  
  
.heroRight{  
  
order:-1;  
  
}  
  
.heroButtons{  
  
justify-content:center;  
  
flex-wrap:wrap;  
  
}  
  
.stats{  
  
justify-content:center;  
  
}  
  
.senaSection{  
  
grid-template-columns:1fr;  
text-align:center;  
  
}  
  
.senaImage{  
  
order:-1;  
  
}  
  
.hero h1{  
  
font-size:3rem;  
  
}  
  
.glass{  
  
padding:40px 25px;  
  
}  
  
.cta h2{  
  
font-size:2.3rem;  
  
}  
  
}