/* =========================================
   LOS SANTOS RP
   MAIN STYLE
========================================= */


/* GOOGLE FONT FALLBACK */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


:root {

    --bg-dark: #070707;

    --bg-light: #111111;

    --card-bg: rgba(255,255,255,0.06);

    --border:
    rgba(255,255,255,0.12);

    --text:
    #ffffff;

    --text-muted:
    rgba(255,255,255,0.65);

    --accent:
    #ff9d00;

    --accent-dark:
    #d87800;

    --green:
    #21e065;


    --shadow:
    0 20px 60px rgba(0,0,0,.5);


    --radius:
    24px;

}





html {

    scroll-behavior:
    smooth;

}



body {


    font-family:
    'Inter',
    Arial,
    sans-serif;


    background:
    var(--bg-dark);


    color:
    var(--text);


    overflow-x:
    hidden;


}




a {

    text-decoration:
    none;


    color:
    inherit;

}



img {

    width:
    100%;


    display:
    block;

}



.container {


    width:
    min(1200px, 90%);


    margin:
    0 auto;


}






/* =========================================
   BACKGROUND EFFECTS
========================================= */



.noise {


    position:
    fixed;


    inset:
    0;


    pointer-events:
    none;


    z-index:
    10;


    opacity:
    .035;


    background-image:
    url("../images/noise.png");

}




.gradient {


    position:
    fixed;


    width:
    700px;


    height:
    700px;


    top:
    -300px;


    right:
    -300px;


    background:
    radial-gradient(
        circle,
        rgba(255,157,0,.18),
        transparent 70%
    );


    filter:
    blur(50px);


    z-index:
    -1;

}








/* =========================================
   LOADER
========================================= */


.loader {


    position:
    fixed;


    inset:
    0;


    background:
    #000;


    display:
    flex;


    justify-content:
    center;


    align-items:
    center;


    z-index:
    9999;


}



.loader-logo {


    font-size:
    60px;


    font-weight:
    900;


    letter-spacing:
    8px;


    color:
    var(--accent);


}





/* =========================================
   HEADER
========================================= */



header {


    position:
    fixed;


    top:
    0;


    left:
    0;


    width:
    100%;


    z-index:
    100;



    padding:
    30px 0;



}



header .container {


    display:
    flex;


    align-items:
    center;


    justify-content:
    space-between;



    padding:
    18px 30px;


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



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



    backdrop-filter:
    blur(20px);


    border-radius:
    20px;


}







.logo {


    font-size:
    26px;


    font-weight:
    900;


    letter-spacing:
    2px;


}



.logo span {


    color:
    var(--accent);

}





nav {


    display:
    flex;


    gap:
    35px;


}



nav a {


    font-size:
    14px;


    color:
    var(--text-muted);


    transition:
    .3s;


}



nav a:hover {


    color:
    var(--accent);


}





.server-online {


    display:
    flex;


    align-items:
    center;


    gap:
    10px;


    font-size:
    13px;


    font-weight:
    700;


}



.dot {


    width:
    10px;


    height:
    10px;


    border-radius:
    50%;


    background:
    var(--green);


    box-shadow:
    0 0 20px var(--green);


}






/* =========================================
   HERO
========================================= */


.hero {


    height:
    100vh;


    min-height:
    800px;


    position:
    relative;


    display:
    flex;


    align-items:
    center;


}



.hero video {


    position:
    absolute;


    inset:
    0;


    width:
    100%;


    height:
    100%;


    object-fit:
    cover;


    z-index:
    -3;


}





.overlay {


    position:
    absolute;


    inset:
    0;


    background:


    linear-gradient(

        90deg,

        rgba(0,0,0,.9),

        rgba(0,0,0,.45),

        rgba(0,0,0,.85)

    );


    z-index:
    -2;


}






.hero-content {


    max-width:
    850px;


}



.subtitle {


    color:
    var(--accent);


    letter-spacing:
    5px;


    font-size:
    14px;


    font-weight:
    700;


    margin-bottom:
    25px;


}





.hero h1 {


    font-size:
    clamp(60px,8vw,110px);


    line-height:
    .95;


    font-weight:
    900;


    letter-spacing:
    -4px;



}



.hero h1 span {


    display:
    block;


    color:
    var(--accent);


}





.description {


    margin-top:
    35px;


    max-width:
    650px;


    color:
    var(--text-muted);


    font-size:
    18px;


    line-height:
    1.7;


}

/* =========================================
   HERO BUTTONS
========================================= */


.hero-buttons {

    display:
    flex;

    gap:
    20px;

    margin-top:
    45px;

}



.play-btn,
.discord-btn {


    padding:
    18px 40px;


    border-radius:
    50px;


    font-size:
    15px;


    font-weight:
    700;


    transition:
    .35s;


    position:
    relative;


    overflow:
    hidden;


}




.play-btn {


    background:
    var(--accent);


    color:
    #000;


    box-shadow:
    0 10px 40px rgba(255,157,0,.35);


}



.play-btn:hover {


    transform:
    translateY(-5px);


    box-shadow:
    0 20px 60px rgba(255,157,0,.55);


}






.discord-btn {


    border:
    1px solid rgba(255,255,255,.25);


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


    backdrop-filter:
    blur(20px);


}



.discord-btn:hover {


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


    transform:
    translateY(-5px);


}









/* =========================================
   HERO STATS
========================================= */



.hero-stats {


    display:
    flex;


    gap:
    20px;


    margin-top:
    70px;


}





.stat-card {


    min-width:
    230px;


    padding:
    20px;


    display:
    flex;


    align-items:
    center;


    gap:
    18px;



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


    border:
    1px solid rgba(255,255,255,.12);


    backdrop-filter:
    blur(25px);


    border-radius:
    20px;



}




.stat-icon {


    font-size:
    35px;


}





.stat-info {


    display:
    flex;


    flex-direction:
    column;


}



.stat-title {


    font-size:
    12px;


    color:
    var(--text-muted);


    text-transform:
    uppercase;


}



.stat-info strong {


    font-size:
    28px;


}









/* =========================================
   SECTION DEFAULT
========================================= */



section {


    padding:
    120px 0;


}



.section-header {


    margin-bottom:
    60px;


}



.section-header p {


    color:
    var(--accent);


    letter-spacing:
    5px;


    font-size:
    13px;


    font-weight:
    700;


    margin-bottom:
    15px;


}




.section-header h2 {


    font-size:
    52px;


    font-weight:
    900;


    letter-spacing:
    -2px;


}








/* =========================================
   SERVER SECTION
========================================= */



.server-section {


    background:
    linear-gradient(
        180deg,
        #070707,
        #0c0c0c
    );


}






.server-panel {


    display:
    grid;


    grid-template-columns:
    1fr 1fr auto;


    gap:
    40px;


    align-items:
    center;


    padding:
    45px;


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


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


    border-radius:
    30px;


    backdrop-filter:
    blur(30px);


    box-shadow:
    var(--shadow);


}





.status {


    display:
    flex;


    align-items:
    center;


    gap:
    12px;


    color:
    var(--green);


    font-weight:
    700;


    font-size:
    14px;


}



.status-circle {


    width:
    12px;


    height:
    12px;


    border-radius:
    50%;


    background:
    var(--green);


    box-shadow:
    0 0 25px var(--green);


}




.server-main h3 {


    margin-top:
    20px;


    font-size:
    35px;


}




.server-main p {


    margin-top:
    10px;


    color:
    var(--text-muted);


}





/* SERVER LOAD */



.progress-info {


    display:
    flex;


    justify-content:
    space-between;


    margin-bottom:
    15px;


}



.progress-info span {


    color:
    var(--text-muted);


}





.progress {


    width:
    350px;


    height:
    10px;


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


    border-radius:
    20px;


    overflow:
    hidden;


}



.progress-value {


    width:
    84%;


    height:
    100%;


    background:
    linear-gradient(
        90deg,
        var(--accent),
        #ffd36a
    );


    border-radius:
    inherit;


}





.players {


    margin-top:
    15px;


    color:
    var(--text-muted);


}







/* BUTTONS */


.server-buttons {


    display:
    flex;


    flex-direction:
    column;


    gap:
    15px;


}





.primary-btn,
.secondary-btn {


    padding:
    15px 30px;


    border-radius:
    50px;


    text-align:
    center;


    font-weight:
    700;


    transition:
    .3s;


}





.primary-btn {


    background:
    var(--accent);


    color:
    black;


}





.secondary-btn {


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


}





.primary-btn:hover,
.secondary-btn:hover {


    transform:
    translateY(-4px);


}

/* =========================================
   FEATURES
========================================= */


.features {


    background:
    #090909;


}



.features-grid {


    display:
    grid;


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


    gap:
    25px;


}





.feature-card {


    position:
    relative;


    padding:
    35px;


    min-height:
    320px;


    overflow:
    hidden;



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


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


    border-radius:
    28px;


    backdrop-filter:
    blur(20px);


    transition:
    .4s;


}




.feature-card:hover {


    transform:
    translateY(-15px);


    border-color:
    rgba(255,157,0,.5);


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


}




.feature-number {


    position:
    absolute;


    right:
    25px;


    top:
    20px;


    font-size:
    70px;


    font-weight:
    900;


    color:
    rgba(255,255,255,.05);


}





.feature-icon {


    font-size:
    45px;


    margin-bottom:
    35px;


}




.feature-card h3 {


    font-size:
    25px;


    margin-bottom:
    15px;


}





.feature-card p {


    color:
    var(--text-muted);


    line-height:
    1.6;


}










/* =========================================
   GALLERY
========================================= */



.gallery-grid {


    display:
    grid;


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


    grid-auto-rows:
    250px;


    gap:
    25px;


}





.gallery-item {


    position:
    relative;


    overflow:
    hidden;


    border-radius:
    25px;


}



.gallery-item.large {


    grid-row:
    span 2;


}




.gallery-item img {


    width:
    100%;


    height:
    100%;


    object-fit:
    cover;


    transition:
    .7s;


}




.gallery-item:hover img {


    transform:
    scale(1.1);


}




.gallery-overlay {


    position:
    absolute;


    inset:
    0;


    display:
    flex;


    align-items:
    flex-end;


    padding:
    25px;


    background:
    linear-gradient(
        transparent,
        rgba(0,0,0,.8)
    );


}





.gallery-overlay span {


    font-size:
    22px;


    font-weight:
    700;


}









/* =========================================
   NEWS
========================================= */



.news {


    background:
    #080808;


}





.news-grid {


    display:
    grid;


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


    gap:
    30px;


}




.news-card {


    overflow:
    hidden;


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


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


    border-radius:
    25px;


    transition:
    .35s;


}





.news-card:hover {


    transform:
    translateY(-10px);


}





.news-image {


    height:
    230px;


    overflow:
    hidden;


}



.news-image img {


    height:
    100%;


    object-fit:
    cover;


}





.news-content {


    padding:
    30px;


}



.news-content span {


    color:
    var(--accent);


    font-size:
    13px;


}



.news-content h3 {


    margin:
    15px 0;


    font-size:
    27px;


}




.news-content p {


    color:
    var(--text-muted);


    line-height:
    1.6;


}



.news-content a {


    display:
    inline-block;


    margin-top:
    20px;


    color:
    var(--accent);


    font-weight:
    700;


}









/* =========================================
   DOWNLOAD
========================================= */



.download-box {


    display:
    flex;


    justify-content:
    space-between;


    align-items:
    center;


    padding:
    60px;


    background:


    linear-gradient(
        135deg,
        rgba(255,157,0,.15),
        rgba(255,255,255,.05)
    );


    border:
    1px solid rgba(255,157,0,.3);


    border-radius:
    35px;


}





.download-box p {


    color:
    var(--accent);


    letter-spacing:
    4px;


}





.download-box h2 {


    font-size:
    55px;


    margin:
    15px 0;


}




.download-box span {


    color:
    var(--text-muted);


}





.download-btn {


    padding:
    22px 45px;


    background:
    var(--accent);


    color:
    #000;


    border-radius:
    50px;


    font-weight:
    800;


    transition:
    .3s;


}



.download-btn:hover {


    transform:
    scale(1.05);


}









/* =========================================
   FOOTER
========================================= */



footer {


    padding:
    60px 0;


    border-top:
    1px solid rgba(255,255,255,.1);


}




.footer-logo {


    font-size:
    30px;


    font-weight:
    900;


    text-align:
    center;


}




.footer-links {


    margin:
    30px 0;


    display:
    flex;


    justify-content:
    center;


    gap:
    40px;


}



.footer-links a {


    color:
    var(--text-muted);


    transition:
    .3s;


}




.footer-links a:hover {


    color:
    var(--accent);


}





.copyright {


    text-align:
    center;


    color:
    rgba(255,255,255,.4);


    font-size:
    14px;


}

/* =========================================
   CUSTOM SCROLLBAR
========================================= */


::-webkit-scrollbar {

    width:
    10px;

}


::-webkit-scrollbar-track {

    background:
    #050505;

}



::-webkit-scrollbar-thumb {

    background:
    linear-gradient(
        var(--accent),
        var(--accent-dark)
    );


    border-radius:
    20px;

}





/* =========================================
   TEXT SELECTION
========================================= */


::selection {


    background:
    var(--accent);


    color:
    #000;


}





/* =========================================
   GLOW EFFECTS
========================================= */



.hero::after {


    content:
    "";


    position:
    absolute;


    bottom:
    0;


    left:
    0;


    width:
    100%;


    height:
    200px;


    background:
    linear-gradient(
        transparent,
        #070707
    );


}





.feature-card::before {


    content:
    "";


    position:
    absolute;


    width:
    150px;


    height:
    150px;


    top:
    -70px;


    right:
    -70px;


    background:
    var(--accent);


    opacity:
    .12;


    filter:
    blur(50px);


}







/* =========================================
   ANIMATION CLASSES
========================================= */


.fade-up {


    opacity:
    0;


    transform:
    translateY(40px);


    transition:
    .8s ease;


}



.fade-up.show {


    opacity:
    1;


    transform:
    translateY(0);


}







/* =========================================
   FLOATING EFFECTS
========================================= */


.floating {


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


}



@keyframes floating {


    0% {


        transform:
        translateY(0);

    }


    50% {


        transform:
        translateY(-15px);

    }


    100% {


        transform:
        translateY(0);

    }

}





/* =========================================
   BUTTON SHINE
========================================= */



.play-btn::before,
.download-btn::before {


    content:
    "";


    position:
    absolute;


    top:
    0;


    left:
    -100%;


    width:
    50%;


    height:
    100%;


    background:
    linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,.5),
        transparent
    );


    transition:
    .6s;


}





.play-btn:hover::before,
.download-btn:hover::before {


    left:
    120%;


}





/* =========================================
   MOBILE SAFE
========================================= */



@media(max-width:1200px){


    .features-grid {


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


    }


    .server-panel {


        grid-template-columns:
        1fr;


    }



    .progress {


        width:
        100%;


    }


}




@media(max-width:768px){


    .section-header h2 {


        font-size:
        38px;


    }



    .hero h1 {


        letter-spacing:
        -2px;


    }



    .hero-buttons {


        flex-direction:
        column;


    }




    .hero-stats {


        flex-direction:
        column;


    }



    .stat-card {


        width:
        100%;


    }



    nav {


        display:
        none;


    }



    header .container {


        padding:
        15px;


    }



    .features-grid {


        grid-template-columns:
        1fr;


    }




    .gallery-grid {


        display:
        flex;


        flex-direction:
        column;


    }



    .gallery-item {


        height:
        260px;


    }




    .news-grid {


        grid-template-columns:
        1fr;


    }



    .download-box {


        flex-direction:
        column;


        gap:
        40px;


        text-align:
        center;


        padding:
        40px 25px;


    }




    .download-box h2 {


        font-size:
        38px;


    }



}






/* =========================================
   IMAGE PLACEHOLDER EFFECT
========================================= */



img {


    background:
    #111;


}




/* =========================================
   SMOOTH DEFAULTS
========================================= */



button,
a {


    -webkit-tap-highlight-color:
    transparent;


}



/* FOOTER */

.site-footer {

    padding: 80px 0 30px;

    background:
    linear-gradient(
        180deg,
        #090909,
        #020202
    );

    border-top:
    1px solid rgba(255,255,255,.1);

}



.footer-grid {


    display:grid;


    grid-template-columns:
    2fr 1fr 1fr 1fr;


    gap:
    40px;


}



.footer-logo {


    font-size:
    32px;


    font-weight:
    900;


}



.footer-logo span {


    display:block;


    color:
    var(--accent);


}



.footer-about p {


    margin-top:
    20px;


    max-width:
    350px;


    color:
    var(--text-muted);


    line-height:
    1.7;


}



.footer-links {


    display:flex;


    flex-direction:column;


    gap:14px;


}



.footer-links h3 {


    margin-bottom:
    10px;


    font-size:
    18px;


}



.footer-links a {


    color:
    rgba(255,255,255,.55);


    transition:
    .3s;


}



.footer-links a:hover {


    color:
    var(--accent);


    transform:
    translateX(5px);


}



.payment-icons {


    display:flex;


    flex-wrap:wrap;


    gap:
    10px;


}



.payment-icons span {


    padding:
    10px 15px;


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


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


    border-radius:
    10px;


    font-size:
    12px;


    font-weight:
    700;


}



.footer-bottom {


    margin-top:
    50px;


    padding-top:
    25px;


    border-top:
    1px solid rgba(255,255,255,.1);


    display:flex;


    justify-content:
    space-between;


    color:
    rgba(255,255,255,.4);


    font-size:
    13px;


}



@media(max-width:900px){


.footer-grid {


    grid-template-columns:
    1fr 1fr;


}


}



@media(max-width:600px){


.footer-grid {


    grid-template-columns:
    1fr;


}



.footer-bottom {


    flex-direction:
    column;


}


}