/* =========================================================
   Emerald Steel RP - Dark Emerald Theme
   ========================================================= */

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

:root {

    color-scheme: dark;

    --bg: #050907;
    --bg2: #0b130d;

    --surface: rgba(8,16,10,.92);
    --panel: rgba(14,25,17,.96);
    --panel-border: rgba(61,220,132,.12);

    --text: #F5F8F6;
    --muted: #8FA59A;

    --accent: #3DDC84;
    --accent-dim: #169C54;
    --accent-dark: #0C4A28;

    --success: #3DDC84;
    --danger: #ff5d5d;

    --shadow: 0 25px 50px rgba(0,0,0,.45);

    --radius: 18px;

    --font: "Inter";
    --font2: "Fira Code";
    --font3: "Impact";

}

*,
*::before,
*::after{
    box-sizing:border-box;
}

html,
body{
    margin:0;
    min-height:100%;
}

body{

    font-family:var(--font);

    color:var(--text);

    background:
        linear-gradient(
            180deg,
            #08110b 0%,
            #050907 100%
        );

}

body::before{

    content:"";

    position:fixed;
    inset:0;

    pointer-events:none;

    background:
        radial-gradient(circle at top right,
        rgba(61,220,132,.14),
        transparent 20%),

        radial-gradient(circle at bottom left,
        rgba(22,156,84,.10),
        transparent 18%);

}

/* =========================================================
   Navigation
   ========================================================= */

nav{

    position:sticky;
    top:0;
    z-index:100;

    display:flex;
    align-items:center;
    gap:1.5rem;

    padding:0 2rem;

    background:var(--surface);

    border-bottom:1px solid var(--panel-border);

    backdrop-filter:blur(18px);

    box-shadow:var(--shadow);

}

.navheader{

    display:flex;
    align-items:center;
    gap:15px;

}

.navheader img{

    width:100px;
    padding:6px;

}

.navlinks ul{

    display:flex;
    gap:30px;

    list-style:none;

    margin:0;
    padding:0;

}

.navlinks a{

    text-decoration:none;

    color:var(--muted);

    transition:.25s;

}

.navlinks a:hover{

    color:var(--accent);

}

/* =========================================================
   Hero
   ========================================================= */

.hero-section{

    max-width:1200px;

    margin:70px auto;

    padding:0 25px;

    display:grid;

    grid-template-columns:1fr 540px;

    gap:80px;

    align-items:center;

}

.hero-left h1{

    margin:0;

    font-size:5rem;

    line-height:.95;

    font-weight:800;

}

.hero-left h1 span{

    color:var(--accent);

}

.hero-left p{

    margin:30px 0;

    max-width:520px;

    color:var(--muted);

    line-height:1.8;

    font-size:18px;

}

.hero-buttons{

    display:flex;

    gap:15px;

    margin-top:35px;

}

/* =========================================================
   Buttons
   ========================================================= */

.button{

    display:inline-flex;

    align-items:center;

    gap:10px;

    text-decoration:none;

    color:#A9B8AF;

    background:#111813;

    border:1px solid rgba(61,220,132,.12);

    border-radius:12px;

    padding:12px 20px;

    transition:.25s;

}

.button:hover{

    color:#fff;

    border-color:var(--accent);

    transform:translateY(-2px);

}

.button.active{

    color:#061109;

    border:none;

    font-weight:700;

    background:linear-gradient(
        160deg,
        var(--accent),
        var(--accent-dim)
    );

    box-shadow:
        0 0 25px rgba(61,220,132,.30);

}

/* =========================================================
   Slider
   ========================================================= */

.hero-right{

    display:flex;

    justify-content:flex-end;

}

.hero-slider{

    position:relative;

    width:100%;

    height:420px;

    overflow:hidden;

    border-radius:22px;

    background:#111813;

    border:1px solid rgba(61,220,132,.12);

    box-shadow:
        0 0 0 1px rgba(61,220,132,.04),
        0 20px 60px rgba(0,0,0,.50);

}

.hero-slider img{

    width:100%;
    height:100%;

    object-fit:cover;

}

.slider-arrow{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    width:46px;
    height:46px;

    border:none;

    border-radius:50%;

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

    color:#fff;

    cursor:pointer;

    transition:.25s;

}

.slider-arrow:hover{

    background:var(--accent);

    color:#061109;

}

.slider-arrow.left{

    left:18px;

}

.slider-arrow.right{

    right:18px;

}

.slider-dots{

    position:absolute;

    left:50%;
    bottom:18px;

    transform:translateX(-50%);

    display:flex;

    gap:8px;

}

.slider-dots span{

    width:8px;
    height:8px;

    border-radius:50%;

    background:#56665b;

}

.slider-dots span.active{

    width:26px;

    border-radius:50px;

    background:var(--accent);

}

/* =========================================================
   Status Bar
   ========================================================= */

.hero-status{

    grid-column:1/-1;

    margin-top:25px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:20px 24px;

    border-radius:18px;

    background:#111813;

    border:1px solid rgba(61,220,132,.12);

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

}

.status-left{

    display:flex;

    align-items:center;

    gap:18px;

}

.status-dot{

    width:10px;
    height:10px;

    border-radius:50%;

}

.status-dot.online{

    background:var(--success);

    animation:statusPulse 1.5s infinite;

}


@keyframes statusPulse{

    0%{

        opacity:1;

        box-shadow:
            0 0 12px rgba(61,220,132,.8);

        transform:scale(1);

    }


    50%{

        opacity:.45;

        box-shadow:
            0 0 25px rgba(61,220,132,1);

        transform:scale(1.25);

    }


    100%{

        opacity:1;

        box-shadow:
            0 0 12px rgba(61,220,132,.8);

        transform:scale(1);

    }

}
.status-dot.offline{

    background:var(--danger);

    box-shadow:
        0 0 10px rgba(255,93,93,.45);

}

.divider{

    width:1px;
    height:18px;

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

}

.status-left small{

    color:var(--muted);

    font-size:12px;

    letter-spacing:.12em;

}

.connect-btn{

    text-decoration:none;

    color:#fff;

    padding:14px 24px;

    border-radius:14px;

    border:1px solid rgba(61,220,132,.12);

    background:#1A241D;

    transition:.25s;

}

.connect-btn:hover{

    background:var(--accent);

    color:#061109;

}

/* =========================================================
   Responsive
   ========================================================= */

@media(max-width:1000px){

    .hero-section{

        grid-template-columns:1fr;

        gap:40px;

    }

    .hero-left{

        text-align:center;

    }

    .hero-left p{

        margin:30px auto;

    }

    .hero-buttons{

        justify-content:center;

    }

    .hero-right{

        justify-content:center;

    }

    .hero-status{

        flex-direction:column;

        gap:20px;

    }

}

@media(max-width:860px){

    .navlinks ul{

        justify-content:center;

        flex-wrap:wrap;

        width:100%;

    }

}

@media(max-width:560px){

    nav{

        padding:15px;

    }

    .navheader{

        width:100%;

        justify-content:center;

    }

    .navlinks ul{

        flex-direction:column;

        align-items:center;

        gap:15px;

    }

    .hero-left h1{

        font-size:3.5rem;

    }

}

.server-features{

    max-width:1200px;
    margin:80px auto;
    padding:0 25px;

}

.server-features h2{

    font-size:2rem;
    margin-bottom:25px;

}

.resource-list{

    display:flex;
    flex-wrap:wrap;
    gap:12px;

}

.resource-tag{

    padding:10px 18px;

    border-radius:12px;

    background:#111813;

    border:1px solid rgba(61,220,132,.15);

    color:var(--text);

    font-size:14px;

    transition:.25s;

}

.resource-tag:hover{

    border-color:var(--accent);

    background:rgba(61,220,132,.12);

}


.discord {    
    border:1px solid rgba(88,101,242,.4); 
    font-size:15px;
}
/* =========================================================
   Emerald Steel RP - Premium About Section
   ========================================================= */


.about-section{

    max-width:1200px;
    margin:110px auto;
    padding:0 25px;

}


/* Header */

.about-header{

    max-width:850px;
    margin:auto;
    text-align:center;

}


.about-label{

    display:inline-block;

    padding:8px 16px;

    border-radius:50px;

    background:rgba(61,220,132,.08);

    border:1px solid rgba(61,220,132,.18);

    color:var(--accent);

    font-family:var(--font2);

    font-size:12px;

    letter-spacing:.25em;

    margin-bottom:25px;

}


.about-header h1{

    font-size:5rem;

    line-height:1;

    margin:0;

    font-weight:800;

}


.about-header h1 span{

    color:var(--accent);

    text-shadow:

        0 0 35px rgba(61,220,132,.35);

}



.about-header p{

    margin:30px auto 0;

    max-width:700px;

    color:var(--muted);

    font-size:18px;

    line-height:1.9;

}



/* Cards */


.about-grid{

    margin-top:80px;

    display:grid;

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

    gap:25px;

}



.about-card{

    position:relative;

    overflow:hidden;


    padding:35px;


    min-height:260px;


    background:

        linear-gradient(

            160deg,

            rgba(14,25,17,.95),

            rgba(8,16,10,.95)

        );


    border:

        1px solid

        rgba(61,220,132,.12);


    border-radius:22px;


    box-shadow:

        0 25px 60px rgba(0,0,0,.35);


    transition:.35s;

}



.about-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:2px;


    background:

        linear-gradient(

            90deg,

            transparent,

            var(--accent),

            transparent

        );


    opacity:.4;

}



.about-card:hover{

    transform:translateY(-10px);

    border-color:rgba(61,220,132,.45);

    box-shadow:

        0 35px 80px rgba(0,0,0,.55),

        0 0 35px rgba(61,220,132,.08);

}



.about-card h2{

    margin:0 0 18px;

    font-size:1.5rem;

}



.about-card p{

    color:var(--muted);

    line-height:1.9;

    font-size:15px;

}



/* Main Feature Panel */


.about-feature{

    position:relative;

    margin-top:80px;


    display:grid;

    grid-template-columns:1.4fr .8fr;

    gap:60px;

    align-items:center;


    padding:55px;


    overflow:hidden;


    border-radius:28px;


    background:

        radial-gradient(

            circle at top right,

            rgba(61,220,132,.18),

            transparent 35%

        ),

        linear-gradient(

            145deg,

            #101d14,

            #08100b

        );


    border:

        1px solid

        rgba(61,220,132,.18);


    box-shadow:var(--shadow);

}



.about-feature::after{

    content:"";

    position:absolute;

    inset:0;


    background:

        linear-gradient(

            120deg,

            transparent,

            rgba(61,220,132,.05),

            transparent

        );


    pointer-events:none;

}



.feature-content{

    position:relative;

    z-index:2;

}



.feature-content h2{

    font-size:3rem;

    line-height:1.1;

    margin:0 0 25px;

}



.feature-content h2 span{

    color:var(--accent);

}



.feature-content p{

    color:var(--muted);

    line-height:1.9;

    font-size:17px;

    max-width:650px;

}



/* Stats */


.feature-stats{

    position:relative;

    z-index:2;


    display:grid;

    gap:18px;

}



.stat{

    padding:25px;


    display:flex;

    flex-direction:column;

    gap:8px;


    background:

        rgba(5,9,7,.55);


    border:

        1px solid

        rgba(61,220,132,.15);


    border-radius:18px;


    backdrop-filter:blur(15px);


    transition:.25s;

}



.stat:hover{

    border-color:var(--accent);

    transform:translateX(-5px);

}



.stat strong{

    font-size:1.8rem;

    color:var(--accent);

}



.stat span{

    color:var(--muted);

    font-size:14px;

}



/* Responsive */


@media(max-width:1000px){


    .about-header h1{

        font-size:4rem;

    }


    .about-grid{

        grid-template-columns:1fr;

    }


    .about-feature{

        grid-template-columns:1fr;

        text-align:center;

    }


}



@media(max-width:560px){


    .about-header h1{

        font-size:3rem;

    }


    .about-feature{

        padding:35px 25px;

    }


    .feature-content h2{

        font-size:2.2rem;

    }


}