@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800;900&display=swap');


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


html{
    scroll-behavior:smooth;
}


body{

    background:#05070d;
    color:white;
    overflow-x:hidden;

}



/* частицы */

#particles{

    position:fixed;
    inset:0;

    width:100%;
    height:100%;

    z-index:-1;

}



/* загрузка */


.loader{

    position:fixed;

    inset:0;

    background:#05070d;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    z-index:9999;

    animation:loading 2.5s forwards;

}


.loader img{

    width:120px;

    height:120px;

    border-radius:25px;

    box-shadow:

    0 0 60px #00bfff;

}



.loader h2{

    margin-top:25px;

    font-size:45px;

}



.loader p{

    color:#aaa;

}



@keyframes loading{


0%,80%{

opacity:1;

}


100%{

opacity:0;

visibility:hidden;

}


}






/* HERO */


.hero{


height:100vh;


background:


linear-gradient(

rgba(0,0,0,.55),

#05070d

),


url("images/6.jpg");



background-size:cover;

background-position:center;


animation:zoom 20s infinite alternate;


}





@keyframes zoom{


from{

background-size:100%;

}


to{

background-size:115%;

}


}





/* NAV */


nav{


height:90px;


padding:0 8%;


display:flex;

justify-content:space-between;

align-items:center;


background:

rgba(0,0,0,.25);


backdrop-filter:blur(20px);


}



.logo{


display:flex;

align-items:center;


font-size:26px;

font-weight:900;


}



.logo img{


width:50px;

height:50px;


border-radius:12px;


margin-right:15px;


}




.nav-links a{


color:white;

text-decoration:none;


margin-left:35px;


opacity:.8;


transition:.3s;


}



.nav-links a:hover{

color:#00c8ff;

opacity:1;

}





/* HERO CONTENT */


.hero-center{


height:80%;


display:flex;

flex-direction:column;


justify-content:center;

align-items:center;


text-align:center;


animation:show 1.2s;


}




.big-logo{


width:160px;

height:160px;


border-radius:35px;


box-shadow:


0 0 80px #00bfff;


}



.hero-center h1{


font-size:100px;

font-weight:900;

letter-spacing:8px;


background:

linear-gradient(

90deg,

white,

#00c8ff

);


-webkit-background-clip:text;

color:transparent;


}





.tagline{


font-size:30px;

color:#b5b5b5;

margin-bottom:40px;


}






/* SERVER CARD */


.online-card{


width:450px;


padding:35px;


border-radius:35px;


background:

rgba(255,255,255,.1);



border:

1px solid rgba(255,255,255,.2);



backdrop-filter:blur(25px);



box-shadow:


0 0 60px rgba(0,170,255,.25);



}




.status{


font-size:22px;

color:#00ff88;


}



.players{


font-size:20px;

margin:15px;


}



.ip{


font-size:32px;

font-weight:900;


background:

linear-gradient(

90deg,

white,

#00bfff

);


-webkit-background-clip:text;

color:transparent;


}




button,
.main-btn,
.discord-btn{


display:inline-block;


margin-top:25px;


padding:16px 35px;


border-radius:18px;


border:none;


background:

linear-gradient(

135deg,

#00bfff,

#0066ff

);



color:white;

font-weight:800;


text-decoration:none;


cursor:pointer;


transition:.3s;


}



button:hover,
.main-btn:hover,
.discord-btn:hover{


transform:translateY(-5px);


box-shadow:

0 0 35px #00bfff;


}




.buttons{

display:flex;

gap:20px;

}





.discord-btn{


background:

linear-gradient(

135deg,

#5865f2,

#7289da

);


}





/* SECTIONS */


section{


padding:100px 10%;


text-align:center;


}



section h2{


font-size:50px;

margin-bottom:50px;


}




.info-grid{


display:grid;


grid-template-columns:

repeat(4,1fr);


gap:25px;


}





.info,
.features div,
.achievement{


padding:35px;


background:

rgba(255,255,255,.08);



border-radius:30px;



border:

1px solid rgba(255,255,255,.15);



backdrop-filter:blur(20px);



transition:.4s;


}



.info:hover,
.features div:hover{


transform:translateY(-12px);


box-shadow:

0 0 40px rgba(0,170,255,.35);


}






.features{


display:grid;


grid-template-columns:

repeat(4,1fr);


gap:25px;


}





.banner{


width:85%;


border-radius:35px;


box-shadow:

0 0 50px rgba(0,170,255,.4);


}





.photos{


margin-top:40px;


display:grid;


grid-template-columns:

repeat(4,1fr);


gap:25px;


}



.photos img{


width:100%;

height:220px;


object-fit:cover;


border-radius:25px;


transition:.4s;


}



.photos img:hover{


transform:scale(1.05);


box-shadow:

0 0 35px #00bfff;


}





.achievement{


font-size:30px;

color:#aaa;


}




footer{


padding:40px;


text-align:center;


background:#020307;


color:#777;


}






@keyframes show{


from{

opacity:0;

transform:translateY(50px);

}


to{

opacity:1;

transform:none;

}


}






@media(max-width:900px){


.hero-center h1{

font-size:55px;

}


.online-card{

width:90%;

}


.info-grid,
.features,
.photos{

grid-template-columns:1fr;

}



.nav-links{

display:none;

}


.buttons{

flex-direction:column;

}


}