/* =================================================
   LIGAPLAY88 ARENA
   PREMIUM GAMING UI
================================================= */


/* ================= ROOT ================= */


:root{

    --black:#050505;

    --dark:#0b0f18;

    --card:#111827;

    --cyan:#00d9ff;

    --gold:#ffd54a;

    --white:#ffffff;

    --gray:#a5a5a5;


}



/* ================= RESET ================= */


*{

    margin:0;

    padding:0;

    box-sizing:border-box;

    font-family:'Poppins',sans-serif;

}



html{

    scroll-behavior:smooth;

}



body{

    background:var(--black);

    color:white;

    overflow-x:hidden;

}




img{

    max-width:100%;

    display:block;

}




a{

    text-decoration:none;

    color:white;

}




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


.header{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    height:90px;


    display:flex;

    align-items:center;

    justify-content:space-between;


    padding:0 8%;


    z-index:1000;


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


    backdrop-filter:blur(15px);


    border-bottom:

    1px solid rgba(255,255,255,.08);


}




.logo{


    font-size:28px;


    font-weight:900;


    letter-spacing:3px;


}



.logo span{


    color:var(--cyan);


}




.navbar{


    display:flex;


    gap:35px;


}



.navbar a{


    font-weight:500;


    color:#ddd;


    transition:.3s;


}



.navbar a:hover{


    color:var(--cyan);


}





.header-btn{


    padding:12px 30px;


    border-radius:40px;


    background:var(--cyan);


    color:#000;


    font-weight:700;


    transition:.3s;


}




.header-btn:hover{


    box-shadow:

    0 0 25px var(--cyan);


    transform:translateY(-3px);


}





.menu-toggle{


    display:none;


    font-size:28px;


}







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



.hero{


    min-height:100vh;


    position:relative;


    display:flex;


    align-items:center;


    justify-content:center;


    text-align:center;


    background:


    linear-gradient(

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

        rgba(0,0,0,.85)

    ),

    url("https://ligaplay88-arena.org/img/ligaplay88-arena-game.webp");



    background-size:cover;


    background-position:center;


}




.hero::before{


    content:"";


    position:absolute;


    inset:0;



    background:


    radial-gradient(

    circle at top right,

    rgba(0,217,255,.25),

    transparent 40%

    ),


    radial-gradient(

    circle at bottom left,

    rgba(255,213,74,.15),

    transparent 45%

    );


}





.hero-content{


    position:relative;


    z-index:2;


    max-width:900px;


    padding:40px;


}




.hero-badge{


    display:inline-block;


    padding:10px 25px;


    border-radius:50px;


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


    color:var(--cyan);


    font-size:14px;


    margin-bottom:25px;



    background:

    rgba(0,217,255,.08);


}





.hero h1{


    font-size:80px;


    line-height:1;


    font-weight:900;


    letter-spacing:8px;


}



.hero h1 span{


    color:var(--cyan);


}





.hero h2{


    margin-top:25px;


    font-size:38px;


    color:var(--gold);


}




.hero p{


    margin:25px auto;


    max-width:700px;


    font-size:20px;


    color:#ddd;


}






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



.hero-buttons{


    margin-top:40px;


}




.btn{


    display:inline-block;


    padding:15px 45px;


    margin:10px;


    border-radius:50px;


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


    font-weight:700;


    position:relative;


    overflow:hidden;


    transition:.4s;


}





.btn:hover{


    transform:translateY(-5px);


    box-shadow:


    0 0 30px rgba(0,217,255,.5);


}





.btn.primary{


    background:var(--cyan);


    color:#000;


}





.btn::before{


    content:"";


    position:absolute;


    top:0;


    left:-120%;


    width:100%;


    height:100%;



    background:

    linear-gradient(

    120deg,

    transparent,

    rgba(255,255,255,.5),

    transparent

    );



    transition:.6s;


}




.btn:hover::before{


    left:120%;


}




.scroll-indicator{


    position:absolute;


    bottom:40px;


    width:25px;


    height:40px;


    border:2px solid white;


    border-radius:20px;


}




.scroll-indicator span{


    display:block;


    width:5px;


    height:8px;


    background:white;


    border-radius:10px;


    margin:8px auto;


    animation:scroll 1.5s infinite;


}



@keyframes scroll{


    from{

    transform:translateY(0);

    }


    to{

    transform:translateY(15px);

    }


}
/* =================================================
   PART B
   STATISTICS
   FEATURES
   GAMES
   CATEGORY
   PROMOTION
================================================= */



/* ================= STATISTICS ================= */


.statistics{


    display:grid;


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


    gap:25px;


    padding:70px 8%;


    background:

    linear-gradient(

    180deg,

    #050505,

    #0b0f18

    );


}





.stat-box{


    text-align:center;


    padding:35px 20px;


    border-radius:20px;


    background:

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


    border:

    1px solid rgba(255,255,255,.08);


    transition:.4s;


}





.stat-box:hover{


    transform:translateY(-10px);


    border-color:var(--cyan);


    box-shadow:

    0 0 30px rgba(0,217,255,.25);


}




.stat-box h3{


    font-size:50px;


    font-weight:900;


    color:var(--cyan);


}



.stat-box p{


    margin-top:10px;


    color:#bbb;


    font-size:18px;


}







/* ================= SECTION TITLE ================= */



.section-title{


    text-align:center;


    margin-bottom:60px;


}




.section-title span{


    color:var(--cyan);


    font-size:14px;


    letter-spacing:4px;


    font-weight:700;


}




.section-title h2{


    font-size:45px;


    margin-top:15px;


    font-weight:900;


}





.section-title p{


    color:#999;


    margin-top:10px;


}








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



.features{


    padding:100px 8%;


}




.feature-grid{


    display:grid;


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


    gap:25px;


}





.feature-card{


    position:relative;


    padding:35px;


    border-radius:25px;


    background:


    linear-gradient(

    145deg,

    #111827,

    #070707

    );


    border:

    1px solid rgba(0,217,255,.15);


    overflow:hidden;


    transition:.4s;


}





.feature-card::before{


    content:"";


    position:absolute;


    width:120px;


    height:120px;


    top:-50px;


    right:-50px;


    background:

    rgba(0,217,255,.12);


    border-radius:50%;


}




.feature-card:hover{


    transform:translateY(-12px);


    border-color:var(--cyan);


    box-shadow:


    0 20px 40px rgba(0,0,0,.5);


}





.feature-card h3{


    position:relative;


    color:white;


    font-size:20px;


    margin-bottom:15px;


}





.feature-card p{


    color:#aaa;


    position:relative;


}








/* ================= GAMES ================= */



.games-section{


    padding:100px 8%;


}




.games-grid{


    display:grid;


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


    gap:30px;


}






.game-card{


    position:relative;


    overflow:hidden;


    border-radius:25px;


    background:#111;


    border:

    1px solid rgba(255,255,255,.08);


    transition:.5s;


}





.game-card img{


    width:100%;


    height:280px;


    object-fit:cover;


    transition:.6s;


}




.game-card:hover img{


    transform:scale(1.1);


}







.game-card::after{


    content:"";


    position:absolute;


    inset:0;


    background:

    linear-gradient(

    transparent,

    rgba(0,0,0,.9)

    );


}







.game-info{


    position:absolute;


    bottom:0;


    left:0;


    width:100%;


    padding:30px;


    z-index:2;


}




.game-info h3{


    font-size:25px;


}





.game-info p{


    color:var(--gold);


    margin:10px 0;


}




.game-info a{


    display:inline-block;


    padding:10px 25px;


    border-radius:30px;


    border:

    1px solid var(--cyan);


    color:var(--cyan);


    font-size:14px;


    transition:.3s;


}





.game-info a:hover{


    background:var(--cyan);


    color:#000;


}




.game-card:hover{


    transform:translateY(-15px);


    box-shadow:


    0 20px 50px rgba(0,217,255,.2);


}










/* ================= CATEGORY ================= */



.category{


    padding:100px 8%;


    background:#070707;


}





.category-grid{


    display:grid;


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


    gap:20px;


}





.category-grid div{


    height:130px;


    display:flex;


    align-items:center;


    justify-content:center;


    flex-direction:column;


    gap:10px;


    border-radius:20px;


    background:


    linear-gradient(

    145deg,

    #111827,

    #050505

    );


    border:

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


    font-size:20px;


    font-weight:700;


    transition:.4s;


}





.category-grid div:first-letter{


    font-size:35px;


}




.category-grid div:hover{


    transform:translateY(-10px);


    border-color:var(--gold);


    box-shadow:


    0 0 25px rgba(255,213,74,.25);


}








/* ================= PROMOTION ================= */



.promotion{


    margin:80px 8%;


    padding:70px 40px;


    text-align:center;


    border-radius:35px;



    background:


    linear-gradient(

    135deg,

    rgba(0,217,255,.25),

    rgba(255,213,74,.15)

    );


    border:

    1px solid rgba(255,255,255,.15);


}





.promotion h2{


    font-size:45px;


    font-weight:900;


}




.promotion p{


    margin:20px 0 35px;


    color:#ddd;


    font-size:20px;


}
/* =================================================
   PART C
   ABOUT
   FAQ
   CTA
   FOOTER
   ANIMATION
   RESPONSIVE
================================================= */


/* ================= ABOUT ================= */


.about{


    padding:100px 8%;


    display:grid;


    grid-template-columns:1fr 1fr;


    gap:60px;


    align-items:center;


}





.about-image img{


    width:100%;


    border-radius:30px;


    border:

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


    box-shadow:


    0 20px 50px rgba(0,0,0,.5);


}





.about-content span{


    color:var(--cyan);


    letter-spacing:4px;


    font-size:14px;


    font-weight:700;


}





.about-content h2{


    margin:20px 0;


    font-size:45px;


    font-weight:900;


}





.about-content p{


    color:#aaa;


    font-size:18px;


    line-height:1.8;


}








/* ================= FAQ ================= */



.faq-section{


    padding:100px 8%;


}





.faq{


    max-width:900px;


    margin:auto;


}





.faq details{


    background:


    linear-gradient(

    145deg,

    #111827,

    #070707

    );


    margin-bottom:20px;


    padding:25px 30px;


    border-radius:20px;


    border:

    1px solid rgba(255,255,255,.08);


    transition:.3s;


}





.faq details:hover{


    border-color:var(--cyan);


}





.faq summary{


    cursor:pointer;


    font-size:20px;


    font-weight:700;


    list-style:none;


}





.faq summary::after{


    content:"+";


    float:right;


    color:var(--cyan);


    font-size:25px;


}





.faq details[open] summary::after{


    content:"−";


}





.faq p{


    margin-top:20px;


    color:#aaa;


    line-height:1.7;


}








/* ================= FINAL CTA ================= */



.final-cta{


    margin:100px 8%;


    padding:90px 40px;


    text-align:center;


    border-radius:40px;



    background:


    linear-gradient(

    135deg,

    var(--cyan),

    #0066ff

    );


    color:#000;


}





.final-cta h2{


    font-size:55px;


    font-weight:900;


}





.final-cta p{


    margin:20px 0 35px;


    font-size:22px;


}





.final-cta .btn{


    background:#000;


    color:white;


    border-color:#000;


}





.final-cta .btn:hover{


    background:white;


    color:#000;


}








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



footer{


    padding:60px 8%;


    text-align:center;


    background:#000;


    border-top:


    1px solid rgba(255,255,255,.08);


}





footer h3{


    font-size:30px;


    font-weight:900;


}





footer p{


    margin-top:15px;


    color:#888;


}








/* ================= SCROLL ANIMATION ================= */



.reveal{


    opacity:0;


    transform:translateY(50px);


    transition:1s;


}





.reveal.active{


    opacity:1;


    transform:none;


}








/* ================= RESPONSIVE TABLET ================= */



@media(max-width:1100px){



.statistics{


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


}



.feature-grid{


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


}




.games-grid{


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


}



.category-grid{


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


}



}





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



@media(max-width:768px){



.header{


    height:75px;


    padding:0 20px;


}



.logo{


    font-size:20px;


}




.navbar{


    position:absolute;


    top:75px;


    left:0;


    width:100%;


    display:none;


    flex-direction:column;


    text-align:center;


    background:#050505;


    padding:30px;


}



.navbar.active{


    display:flex;


}





.header-btn{


    display:none;


}





.menu-toggle{


    display:block;


}





.hero{


    min-height:90vh;


}



.hero h1{


    font-size:42px;


    letter-spacing:3px;


}



.hero h2{


    font-size:25px;


}



.hero p{


    font-size:16px;


}



.hero-content{


    padding:20px;


}





.statistics{


    grid-template-columns:1fr;


    padding:50px 20px;


}



.stat-box h3{


    font-size:40px;


}






.features,


.games-section,


.category,


.about,


.faq-section{


    padding:70px 20px;


}




.feature-grid,


.games-grid{


    grid-template-columns:1fr;


}




.category-grid{


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


}





.about{


    grid-template-columns:1fr;


    gap:30px;


}



.about-content h2{


    font-size:32px;


}





.section-title h2{


    font-size:32px;


}





.promotion{


    margin:50px 20px;


    padding:50px 20px;


}




.promotion h2{


    font-size:30px;


}





.final-cta{


    margin:50px 20px;


    padding:60px 20px;


}




.final-cta h2{


    font-size:35px;


}




.btn{


    padding:13px 30px;


}



}