*{
margin:0;
padding:0;
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
}

body{

font-family:"Inter",sans-serif;

background:#050b14;

color:white;

overflow-x:hidden;

}


/* Background */

body::before{

content:"";

position:fixed;

inset:0;

background:

radial-gradient(circle at 20% 20%,rgba(0,190,255,.18),transparent 35%),

radial-gradient(circle at 80% 70%,rgba(0,255,170,.12),transparent 35%);

z-index:-2;

}


body::after{

content:"";

position:fixed;

inset:0;

background-image:

linear-gradient(
rgba(255,255,255,.025) 1px,
transparent 1px
),

linear-gradient(
90deg,
rgba(255,255,255,.025) 1px,
transparent 1px
);


background-size:60px 60px;


animation:gridMove 25s linear infinite;


z-index:-1;

}



@keyframes gridMove{

from{
transform:translateY(0);
}

to{
transform:translateY(60px);
}

}




/* Navigation */


nav{

position:fixed;

top:0;

left:0;

width:100%;

padding:18px 8%;


display:flex;

justify-content:space-between;

align-items:center;


background:rgba(5,11,20,.75);

backdrop-filter:blur(15px);


border-bottom:1px solid rgba(255,255,255,.08);


z-index:100;

}



.nav-logo{

font-size:23px;

font-weight:800;

color:#67ddff;

}



.nav-links{

display:flex;

gap:25px;

}



.nav-links a{

text-decoration:none;

color:white;

opacity:.75;

transition:.3s;

}



.nav-links a:hover{

opacity:1;

color:#65ddff;

}





/* Hero */


.hero{

min-height:85vh;

display:flex;

justify-content:center;

align-items:center;

text-align:center;

padding:100px 20px 40px;

}



.hero-content{

max-width:900px;

animation:fade .8s ease;

}



@keyframes fade{

from{

opacity:0;

transform:translateY(25px);

}

to{

opacity:1;

transform:translateY(0);

}

}




.hero h1{

font-size:75px;

font-weight:900;

letter-spacing:-3px;


background:linear-gradient(
90deg,
#48d8ff,
#7dffcf
);


-webkit-background-clip:text;

color:transparent;

}



.hero h1 span{

color:#65ffcc;

}



.subtitle{

font-size:20px;

line-height:1.7;

margin-top:20px;

color:#dbeafe;

}





/* Buttons */


.buttons,
.join-buttons{

display:flex;

justify-content:center;

gap:18px;

flex-wrap:wrap;

margin-top:30px;

}



button{

border:none;

cursor:pointer;

padding:14px 32px;

border-radius:50px;

font-weight:700;

font-size:15px;

transition:.3s;

}



button:hover{

transform:translateY(-4px);

box-shadow:0 12px 30px rgba(0,0,0,.35);

}



.primary{

background:#12bfff;

color:white;

}



.discord{

background:#5865f2;

color:white;

}






/* Server box */


.server-box{

margin:30px auto 15px;

max-width:420px;

padding:22px;


background:rgba(255,255,255,.06);


border:1px solid rgba(255,255,255,.1);


border-radius:18px;


backdrop-filter:blur(10px);

}



.server-box p{

opacity:.6;

}



.server-box h3{

margin-top:8px;

color:#65ddff;

font-size:23px;

}







/* Status */


.status-container{

max-width:420px;

margin:auto;

}



.status{

display:flex;

align-items:center;

justify-content:center;

gap:8px;


cursor:pointer;


padding:15px;


background:rgba(255,255,255,.05);


border-radius:15px;


border:1px solid rgba(255,255,255,.08);


transition:.3s;

}



.status:hover{

border-color:#50d8ff;

}



#status-dot{

height:12px;

width:12px;

border-radius:50%;

background:#888;

}





.arrow{

font-size:12px;

margin-left:5px;

}





/* Player dropdown */


.player-list{

max-height:0;

overflow:hidden;


background:rgba(255,255,255,.05);


border-radius:15px;


margin-top:10px;


transition:.4s ease;


}



.player-list.open{

max-height:500px;

padding:10px;

}




.player{

display:flex;

align-items:center;

gap:15px;


padding:10px;


border-bottom:1px solid rgba(255,255,255,.08);


}



.player:last-child{

border:none;

}




.player img{

width:42px;

height:42px;


image-rendering:pixelated;


border-radius:8px;

}



.player-name{

font-weight:700;

}






/* Sections */


section{

padding:60px 8%;

}



section h2{

text-align:center;

font-size:38px;

margin-bottom:35px;

}






/* Cards */


.cards{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(260px,1fr));


gap:25px;

}



.card{

padding:25px;


background:

linear-gradient(
145deg,
rgba(255,255,255,.08),
rgba(255,255,255,.03)
);


border:1px solid rgba(255,255,255,.1);


border-radius:22px;


transition:.35s;

}



.card:hover{

transform:translateY(-8px);

border-color:#4edcff;

}



.icon{

font-size:35px;

margin-bottom:15px;

}



.card h3{

color:#68ddff;

margin-bottom:12px;

font-size:20px;

}



.card p{

color:#cbd5e1;

line-height:1.6;

}






/* About */


.about{

text-align:center;

max-width:900px;

margin:auto;

}



.about p{

font-size:19px;

line-height:1.8;

color:#cbd5e1;

}






/* Rules */


.rules{

max-width:800px;

margin:auto;


background:rgba(255,255,255,.05);


padding:30px;


border-radius:20px;


border:1px solid rgba(255,255,255,.08);

}



.rules li{

list-style:none;

margin:15px 0;

font-size:17px;

}







/* FAQ */


.faq{

max-width:800px;

margin:auto;

}



details{

background:rgba(255,255,255,.05);


padding:18px;


border-radius:14px;


margin-bottom:12px;


border:1px solid rgba(255,255,255,.08);

}



summary{

cursor:pointer;

font-weight:700;

}



details p{

margin-top:12px;

color:#cbd5e1;

line-height:1.6;

}







/* Footer */


footer{

text-align:center;

padding:40px;

background:#020617;

color:#94a3b8;

line-height:2;

}






/* Mobile */


@media(max-width:700px){


.hero h1{

font-size:50px;

}



.nav-links{

display:none;

}



section h2{

font-size:32px;

}


}