/* Move media queries here from style.css */
body{
    margin:0;
    background:#04060d;
    color:#fff;
    font-family:Arial,sans-serif;
    overflow-x:hidden;
}

body:before{
    content:'';
    position:fixed;
    inset:0;
    background:
        linear-gradient(
            rgba(0,0,0,.82),
            rgba(0,0,0,.92)
        );
    z-index:-3;
}

/* NAVBAR */

.navbar{
    position:fixed;
    top:0;
    width:100%;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:20px 60px;
    background:rgba(5,8,15,.55);
    backdrop-filter:blur(25px) saturate(180%);
    z-index:999;
}

.logo{
    font-size:42px;
    color:#7cecff;
    animation:logoGlow 4s infinite;
}

/* HERO */

.hero{
    min-height:100vh;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    padding:140px 20px 80px;
    position:relative;
}

/* CHARACTER */

.character-bg{
    position:absolute;
    inset:0;

    background:
        url('../images/ran4classes.png')
        center center/contain no-repeat;

    opacity:.55;

    filter:
        drop-shadow(0 0 30px rgba(0,183,255,.35))
        drop-shadow(0 0 80px rgba(0,183,255,.15));

    pointer-events:none;
}

/* CONTENT */

.hero-title,
.servers{
    position:relative;
    z-index:2;
}

.hero-title{
    text-align:center;
}

.hero-title h1{
    font-size:82px;

    text-shadow:
        0 0 10px rgba(124,236,255,.35),
        0 0 30px rgba(0,183,255,.20);
}

.hero-title span{
    color:#7cecff;
}

.servers{
    display:flex;
    justify-content:center;
    width:100%;
}

/* CLASSIC CARD */

.classic{
    width:100%;
    max-width:1100px;

    background:
        linear-gradient(
            rgba(0,183,255,.10),
            rgba(0,183,255,.03)
        );

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

    border-radius:24px;

    padding:30px;

    backdrop-filter:blur(15px);

    animation:floating 6s ease-in-out infinite;

    box-shadow:
        0 0 30px rgba(0,183,255,.25),
        0 0 80px rgba(0,183,255,.10);
}

/* FEATURES */

.features{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
}

.feature-box{
    background:rgba(255,255,255,.04);
    padding:16px;
    border-radius:12px;
    transition:.3s;
}

.feature-box:hover{
    transform:translateY(-4px);

    background:
        rgba(0,183,255,.08);

    box-shadow:
        0 0 20px rgba(0,183,255,.15);
}

/* STATS */

.stats{
    display:flex;
    justify-content:space-around;
    margin-top:20px;

    background:rgba(255,255,255,.04);
    padding:16px;
    border-radius:12px;
}

/* ANIMATIONS */

@keyframes floating{
    0%,100%{
        transform:translateY(0);
    }
    50%{
        transform:translateY(-8px);
    }
}

@keyframes logoGlow{
    0%,100%{
        filter:brightness(1);
    }
    50%{
        filter:brightness(1.25);
    }
}

/* MOBILE */

@media(max-width:768px){

    .navbar{
        padding:15px 20px;
    }

    .logo{
        font-size:28px;
    }

    .hero-title h1{
        font-size:52px;
    }

    .features{
        grid-template-columns:1fr;
    }

    .stats{
        flex-direction:column;
        gap:15px;
    }

    .character-bg{
        opacity:.35;
        background-size:cover;
    }
}