body{
margin:0;
font-family:'IM Fell English', serif;
color:white;
overflow-x:hidden;

background:
radial-gradient(circle at center, rgba(0,80,160,0.45) 0%, rgba(0,0,0,0.95) 70%),
linear-gradient(to bottom,#020b18,#000);
}


/* PARTICULAS */
#particles{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
z-index:-1;

background:
radial-gradient(circle at 50% 40%, rgba(0,170,255,0.18), transparent 60%),
radial-gradient(circle at center,rgba(0,0,0,0.5),rgba(0,0,0,0.95));
}


/* NAVBAR */

.navbar{

position:fixed;
top:0;
width:100%;
height:70px;

display:flex;
align-items:center;
justify-content:center;

background:rgba(0,0,0,0.75);
backdrop-filter:blur(10px);

z-index:10;

border-bottom:2px solid rgba(0,170,255,0.4);

}

.logo{
    position:absolute;
    left:20px;
    top:15px;
}

.logo img{
    width:180px;
    height:auto;
    filter:drop-shadow(0 0 10px #00aaff);
}


/* MENU */

.navbar nav{

display:flex;
gap:40px;

}


.navbar a{

position:relative;

color:white;
text-decoration:none;

font-weight:bold;

padding:5px 10px;

transition:.3s;

}


.navbar a::after{

content:"";

position:absolute;

left:0;
bottom:-5px;

width:0%;
height:2px;

background:#00aaff;

box-shadow:
0 0 10px #00aaff,
0 0 20px #00aaff;

transition:.3s;

}


.navbar a:hover{

color:#00aaff;

text-shadow:
0 0 10px #00aaff;

}


.navbar a:hover::after{

width:100%;

}


.hero{
    height:100vh;

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;

    text-align:center;

    background:
        linear-gradient(rgba(0,0,0,.25), rgba(0,0,0,.55)),
        url("images/hero-banner.png") center center/cover no-repeat;

    position:relative;
}

.hero h1{
    font-size:72px;
    margin:0;
    color:#fff;

    text-shadow:
        0 0 10px #000,
        0 0 25px #000,
        0 0 45px rgba(0,170,255,.6);
}

.hero span{
    color:#35b8ff;

    text-shadow:
        0 0 12px #35b8ff,
        0 0 30px #35b8ff;
}

.hero p{
    margin:20px 0 35px;
    font-size:24px;
    color:#e5e5e5;
    text-shadow:0 0 10px #000;
}

.hero button{
    padding:16px 42px;
    font-size:18px;
    border:none;
    border-radius:8px;

    background:linear-gradient(#29b6ff,#006fd3);
    color:#fff;

    cursor:pointer;

    box-shadow:0 0 20px rgba(0,170,255,.5);

    transition:.3s;
}

.hero button:hover{
    transform:scale(1.05);

    box-shadow:
        0 0 25px #00aaff,
        0 0 45px #00aaff;
}

/* BOTONES */

button{

padding:15px 30px;

background:#00aaff;

color:white;

border:none;

font-weight:bold;

cursor:pointer;

transition:.3s;

}


button:hover{

transform:scale(1.05);

box-shadow:
0 0 20px #00aaff;

}

.beta-banner{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:100%;
    text-align:center;
    z-index:20;
    pointer-events:none;
}

.beta-content h1{
    margin:0;
    font-size:72px;
    color:#4fc3ff;
    text-shadow:
        0 0 10px #00aaff,
        0 0 25px #008cff,
        0 0 40px #006eff;
    font-weight:bold;
}

.beta-content h2{
    margin:15px 0;
    font-size:64px;
    color:#ffd54a;
    text-shadow:
        0 0 10px #ffb300,
        0 0 25px #ff9800;
}

.beta-content p{
    font-size:28px;
    color:#fff;
    text-shadow:0 0 10px #000;
}

@media(max-width:768px){
    .beta-content h1{font-size:42px;}
    .beta-content h2{font-size:36px;}
    .beta-content p{font-size:18px;}
}

/* COUNTDOWN */

.countdown{

padding:80px;

text-align:center;

}


.timer{

display:flex;

justify-content:center;

gap:25px;

margin-top:20px;

flex-wrap:wrap;

}


.timer div{

background:#050b16;

padding:20px;

border-radius:12px;

width:100px;

box-shadow:
0 0 20px rgba(0,170,255,.25);

transition:.3s;

}


.timer div:hover{

transform:scale(1.05);

box-shadow:
0 0 30px rgba(0,170,255,.6);

}


.timer span{

font-size:32px;

color:#00aaff;

font-weight:bold;

display:block;

text-shadow:
0 0 10px #00aaff;

}


.timer label{

font-size:12px;

color:#aaa;

}



/* FORMULARIOS */

.form-box{

max-width:400px;

margin:auto;

background:#050b16;

padding:30px;

border-radius:15px;

box-shadow:
0 0 20px rgba(0,170,255,.35);

transition:.3s;

}


.form-box:hover{

box-shadow:
0 0 40px rgba(0,170,255,.7);

}


.form-box input{

width:100%;

padding:12px;

margin:10px 0;

border:none;

border-radius:5px;

background:#02050b;

color:white;

}



/* MODAL */

.modal{

position:fixed;

top:0;
left:0;

width:100%;
height:100%;

background:rgba(0,0,0,.85);

display:flex;

justify-content:center;

align-items:center;

z-index:999;

}


.modal-content{

background:#050b16;

padding:30px;

border-radius:15px;

text-align:center;

box-shadow:
0 0 30px #00aaff;

animation:zoomIn .3s ease;

}


.modal-content button{

margin-top:20px;

background:#00aaff;

}



/* ANIMACION */

@keyframes zoomIn{

from{

transform:scale(.7);

opacity:0;

}

to{

transform:scale(1);

opacity:1;

}

}



/* SECCIONES */

.features,
.download,
.donate,
.news,
.social,
.server-status{

padding:80px;

text-align:center;

}



/* GRID */

.grid{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:20px;

}


/* CARDS */

.card,
.news-card,
.download-card,
.status-card,
.feature-box{

background:#050b16;

padding:25px;

border-radius:12px;

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

transition:.3s;

}


.card:hover,
.news-card:hover,
.download-card:hover,
.status-card:hover,
.feature-box:hover{

transform:translateY(-8px);

box-shadow:
0 0 25px rgba(0,170,255,.4);

}



.feature-box h2,
.download-card h2,
.status-card h3{

color:#00aaff;

text-shadow:
0 0 10px #00aaff;

}


/* SOCIAL */

.social-box{

display:flex;

justify-content:center;

gap:30px;

}


.social-card{

padding:20px 40px;

border-radius:10px;

text-decoration:none;

color:white;

font-weight:bold;

transition:.3s;

}


.social-card.discord{

background:#5865F2;

}


.social-card.facebook{

background:#1877F2;

}

.whatsapp{
    background:#25D366;
}

.social-card:hover{

transform:scale(1.1);

}


.vote-sites{
    text-align:center;
    padding:60px 0;
}

.vote-links{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:20px;
    flex-wrap:wrap;
}

.vote-links a{
    display:flex;
    justify-content:center;
    align-items:center;
    width:220px;
    height:60px;
    background:#1b1f33;
    color:#fff;
    border:2px solid #4ea3ff;
    border-radius:8px;
    text-decoration:none;
    font-size:18px;
    font-weight:bold;
    transition:.3s;
}

.vote-links a:hover{
    background:#4ea3ff;
    color:#000;
    transform:scale(1.05);
}


/* STATUS */

.server-status{
    text-align:center;
    font-size:22px;
    margin:30px 0;
    font-weight:bold;
}

.online{
    color:#00ff55;
}

.offline{
    color:#ff2d2d;
}


/* MOBILE */

@media(max-width:900px){

.grid{

grid-template-columns:1fr;

}


.hero h1{

font-size:45px;

}


.navbar nav{

gap:15px;

}

}

.discord-popup{
    display:none;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,.75);
    justify-content:center;
    align-items:center;
    z-index:99999;
}

.discord-content{
    width:420px;
    max-width:90%;
    background:#1b1b2a;
    border:2px solid #5865F2;
    border-radius:12px;
    padding:30px;
    text-align:center;
    color:white;
    box-shadow:0 0 25px #5865F2;
    animation:popup .4s ease;
    position:relative;
}

@keyframes popup{
    from{
        transform:scale(.5);
        opacity:0;
    }
    to{
        transform:scale(1);
        opacity:1;
    }
}

.discord-btn{
    display:inline-block;
    margin-top:20px;
    padding:14px 30px;
    background:#5865F2;
    color:#fff;
    text-decoration:none;
    border-radius:8px;
    font-weight:bold;
    transition:.3s;
}

.discord-btn:hover{
    background:#7289da;
    transform:scale(1.05);
}

.close-discord{
    position:absolute;
    right:15px;
    top:10px;
    font-size:30px;
    cursor:pointer;
    color:#fff;
}

.download-page{padding:140px 20px;text-align:center;}
.download-box{display:flex;justify-content:center;gap:40px;flex-wrap:wrap}
.download-card{width:340px;background:linear-gradient(180deg,#081220,#03070d);border:1px solid #178fd6;box-shadow:0 0 20px rgba(0,170,255,.25)}
.download-icon{width:96px;height:96px;display:block;margin:0 auto 20px;filter:drop-shadow(0 0 18px #00aaff);transition:.3s}
.download-card:hover .download-icon{transform:scale(1.12) rotate(-4deg);filter:drop-shadow(0 0 28px #66d9ff)}
.download-card button{width:100%;border-radius:8px;background:linear-gradient(#29b6ff,#0078d4)}
footer{text-align:center;padding:30px;background:#02050b;border-top:1px solid rgba(0,170,255,.3)}