.footer{
    position:relative;
    padding:0 80px 35px;
    background:#050814;
    overflow:hidden;
}

.footer-divider,
.footer-bottom-divider{
    width:100vw;
    height:1px;
    position:relative;
    left:50%;
    transform:translateX(-50%);
    background:linear-gradient(90deg,#52ffe0,#64dcff,#9b7bff);
}

.footer-divider{
    margin-bottom:70px;
}

.footer-content{
    max-width:1500px;
    margin:0 auto;
    display:grid;
    grid-template-columns:1.2fr .8fr 1fr;
    gap:80px;
    align-items:flex-start;
}

.footer-brand{
    max-width:500px;
}

.footer-logo-box{
    display:flex;
    align-items:center;
    gap:20px;
}

.footer-logo-box img{
    width:75px;
    height:75px;
    object-fit:contain;
    filter:drop-shadow(0 0 15px rgba(100,220,255,.6));
}

.footer-logo-box h2{
    font-family:"Orbitron",sans-serif;
    font-size:38px;
    font-weight:1000;
    letter-spacing:-1px;
    background:linear-gradient(90deg,#fff,#64dcff,#9b7bff);
    -webkit-background-clip:text;
    color:transparent;
}

.footer-brand p{
    margin-top:25px;
    font-size:17px;
    line-height:1.7;
    font-weight:500;
    color:#c0c9e5;
    max-width:450px;
}

.footer-socials{
    display:flex;
    gap:15px;
    margin-top:30px;
}

.footer-nav{
    display:flex;
    flex-direction:column;
}

.footer-nav h3{
    margin:0 0 25px;
    font-family:"Orbitron",sans-serif;
    font-size:28px;
    font-weight:800;
    color:#64dcff;
}

.footer-nav a{
    color:#fff;
    text-decoration:none;
    font-size:17px;
    font-weight:500;
    margin-bottom:16px;
    transition:.3s;
}

.footer-nav a:hover{
    color:#64dcff;
    transform:translateX(6px);
}

.footer-extra{
    min-height:220px;
}

.social-button{
    width:55px;
    height:55px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:18px;
    background:linear-gradient(145deg,rgba(255,255,255,.13),rgba(255,255,255,.05));
    border:1px solid rgba(255,255,255,.16);
    box-shadow:inset 0 5px 15px rgba(255,255,255,.12),inset 0 -15px 30px rgba(0,0,0,.35),0 15px 35px rgba(0,0,0,.35);
    backdrop-filter:blur(10px);
    transition:.3s;
}

.social-button svg{
    width:25px;
    height:25px;
    color:#fff;
    transition:.3s;
}

.social-button:hover{
    transform:translateY(-5px);
    background:linear-gradient(145deg,rgba(255,255,255,.18),rgba(255,255,255,.08));
    border-color:rgba(255,255,255,.3);
}

.footer-store-button svg{
    width:30px;
    height:30px;
}

.footer-store-button path{
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
}

.footer-store-button:hover svg{
    color:#ffd54a;
}

.footer-youtube-button path{
    fill:none;
    stroke:currentColor;
    stroke-width:2;
}

.footer-youtube-button:hover svg{
    color:#ff0000;
}

.footer-x-button:hover svg{
    color:#1DA1F2;
}

.footer-tiktok-button:hover svg{
    color:#00F2EA;
    filter:drop-shadow(-1px -1px #FF0050) drop-shadow(1px 1px #00F2EA);
}

.footer-bottom-divider{
    margin-top:80px;
    opacity:.8;
}

.footer-copyright{
    text-align:center;
    margin-top:25px;
    font-size:14px;
    color:#8793b5;
    font-weight:500;
}

.footer-x-button svg{
    width:20px;
    height:20px;
}

@media(max-width:700px){
    .footer{
        padding:0 25px 30px;
    }

    .footer-content{
        display:flex;
        flex-direction:column;
        gap:50px;
        text-align:center;
    }

    .footer-brand{
        max-width:100%;
    }

    .footer-logo-box{
        flex-direction:column;
    }

    .footer-logo-box h2{
        font-size:30px;
    }

    .footer-brand p{
        margin-left:auto;
        margin-right:auto;
    }

    .footer-socials{
        justify-content:center;
        flex-wrap:wrap;
    }

    .footer-nav{
        align-items:center;
        text-align:center;
        width:100%;
    }

    .footer-nav h3{
        width:100%;
        text-align:center;
        font-size:26px;
        margin-bottom:20px;
    }

    .footer-nav a{
        text-align:center;
        font-size:16px;
    }

    .footer-extra{
        display:block;
        width:100%;
    }

    .footer-server-title{
        text-align:center;
        font-size:26px;
        margin-bottom:20px;
    }

    .server-card{
        width:100%;
        padding:22px;
        box-sizing:border-box;
    }

    .server-ip-box{
        height:52px;
        padding:0 15px;
        margin-bottom:18px;
    }

    .server-ip-box span{
        font-size:16px;
    }

    .server-ip-box svg{
        width:20px;
        height:20px;
    }

    .server-row{
        padding:12px 0;
    }

    .server-row > span{
        font-size:15px;
    }

    .server-row strong{
        font-size:15px;
    }

    .server-status{
        gap:7px;
    }

    .server-status span{
        width:9px;
        height:9px;
    }

    .server-status strong{
        font-size:14px;
    }

    .server-progress{
        height:9px;
        margin-top:16px;
    }

    .footer-bottom-divider{
        margin-top:60px;
    }

    .footer-copyright{
        font-size:13px;
        padding:0 10px;
    }
}

.footer-server-title{
    margin:0 0 25px;
    font-family:"Orbitron",sans-serif;
    font-size:28px;
    font-weight:800;
    color:#64dcff;
}

.server-card{
    padding:25px;
    border-radius:24px;
    background:linear-gradient(145deg,rgba(255,255,255,.08),rgba(255,255,255,.03));
    border:1px solid rgba(255,255,255,.12);
    backdrop-filter:blur(15px);
    box-shadow:inset 0 1px rgba(255,255,255,.08),0 20px 40px rgba(0,0,0,.35);
}

.server-ip-box{
    height:55px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 18px;
    margin-bottom:22px;
    border-radius:16px;
    cursor:pointer;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.12);
    color:#fff;
    transition:.3s;
}

.server-ip-box span{
    font-family:"Orbitron",sans-serif;
    font-size:18px;
    font-weight:800;
    letter-spacing:.5px;
}

.server-ip-box svg{
    width:22px;
    height:22px;
    color:#64dcff;
    transition:.3s;
}

.server-ip-box:hover{
    border-color:#64dcff;
    background:rgba(100,220,255,.08);
}

.server-ip-box:hover svg{
    transform:scale(1.15);
}

.server-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:14px 0;
    border-bottom:1px solid rgba(255,255,255,.08);
}

.server-row:last-of-type{
    border-bottom:none;
}

.server-row > span{
    color:#92a3d4;
    font-size:16px;
    font-weight:500;
}

.server-row strong{
    color:#fff;
    font-size:16px;
    font-weight:700;
}

.server-status{
    display:flex;
    align-items:center;
    gap:8px;
}

.server-status span{
    width:10px;
    height:10px;
    border-radius:50%;
    background:#41ff77;
    box-shadow:0 0 12px #41ff77;
    animation:serverPulse 2s infinite;
}

.server-status.offline span{
    background:#ff4d4d;
    box-shadow:0 0 12px #ff4d4d;
    animation:none;
}

.server-status strong{
    font-size:15px;
}

.server-progress{
    width:100%;
    height:10px;
    margin-top:20px;
    overflow:hidden;
    border-radius:999px;
    background:rgba(255,255,255,.08);
}

.server-progress-bar{
    width:0%;
    height:100%;
    border-radius:999px;
    background:linear-gradient(90deg,#52ffe0,#64dcff,#9b7bff);
    box-shadow:0 0 15px rgba(100,220,255,.5);
    transition:.5s ease;
}

@keyframes serverPulse{

    0%{
        box-shadow:0 0 5px #41ff77;
    }

    50%{
        box-shadow:0 0 18px #41ff77;
    }

    100%{
        box-shadow:0 0 5px #41ff77;
    }

}