/* playonsol/static/css/home.css */

/* ==========================================================
   MAENGAME LANDING PAGE
   ========================================================== */

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

.hero-section{

    position:relative;

    overflow:hidden;

    padding:20px 0;

    background:
        radial-gradient(
            circle at top right,
            rgba(153,69,255,.18),
            transparent 40%
        ),
        radial-gradient(
            circle at bottom left,
            rgba(20,241,149,.12),
            transparent 35%
        ),
        linear-gradient(
            180deg,
            #111827,
            #0f172a
        );

}

.hero-section::before{

    content:"";

    position:absolute;

    inset:0;

    background-image:

        linear-gradient(
            rgba(255,255,255,.02) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(255,255,255,.02) 1px,
            transparent 1px
        );

    background-size:60px 60px;

    opacity:.35;

}

.hero-section>.container{

    position:relative;

    z-index:2;

}

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

.hero-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:10px 18px;

    border-radius:999px;

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

    color:#c4b5fd;

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

    font-size:.85rem;

    font-weight:600;

    margin-bottom:28px;

}

.hero-title{

    font-size:4rem;

    line-height:1.1;

    font-weight:800;

    margin-bottom:24px;

    color:#fff;

}

.hero-description{

    max-width:560px;

    color:#9ca3af;

    font-size:1.08rem;

    line-height:1.9;

    margin-bottom:40px;

}

.hero-buttons{

    display:flex;

    flex-wrap:wrap;

    gap:18px;

}

/* ==========================================================
   HERO PREMIUM BACKGROUND
   ========================================================== */

.hero-visual{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

    min-height:720px;

    isolation:isolate;

    overflow:visible;

}


/* Aurora Layer */

.hero-visual::before{

    content:"";

    position:absolute;

    inset:-120px;

    z-index:0;

    background:

        radial-gradient(circle at 25% 35%,
            rgba(20,241,149,.20),
            transparent 28%),

        radial-gradient(circle at 75% 30%,
            rgba(153,69,255,.22),
            transparent 34%),

        radial-gradient(circle at 60% 80%,
            rgba(54,143,255,.15),
            transparent 30%),

        radial-gradient(circle at 40% 70%,
            rgba(255,255,255,.05),
            transparent 26%);

    filter:blur(90px);

    animation:auroraMove 16s ease-in-out infinite alternate;

}


/* Glow Layer */

.hero-visual::after{

    content:"";

    position:absolute;

    inset:0;

    z-index:1;

    background:

        radial-gradient(circle at center,

            rgba(255,255,255,.10),

            transparent 65%);

    mix-blend-mode:screen;

    opacity:.75;

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

}

/* ===============================
   Hero Motion Variables
================================ */

.hero-visual{

    --mx:0px;

    --my:0px;

}

.hero-visual::before{

    transform:

        translate(

            var(--mx),

            var(--my)

        );

}

.hero-visual::after{

    transform:

        translate(

            calc(var(--mx) * -.45),

            calc(var(--my) * -.45)

        );

}


/* Noise */

.hero-visual .hero-noise{

    position:absolute;

    inset:0;

    pointer-events:none;

    opacity:.035;

    z-index:2;

    background-image:

        radial-gradient(#ffffff 0.8px, transparent .8px);

    background-size:14px 14px;

}


/* Light Sweep */

.hero-visual .hero-light{

    position:absolute;

    width:900px;

    height:300px;

    left:-300px;

    top:150px;

    z-index:2;

    transform:rotate(-18deg);

    background:

        linear-gradient(

            90deg,

            transparent,

            rgba(255,255,255,.12),

            transparent

        );

    filter:blur(40px);

    animation:lightSweep 9s linear infinite;

}


/* ==========================================================
   GAME PREVIEW PREMIUM
   ========================================================== */

.game-preview{

    position:relative;

    width:min(100%,620px);

    overflow:hidden;

    border-radius:34px;

    isolation:isolate;

    background:
        linear-gradient(
            180deg,
            rgba(28,32,46,.96),
            rgba(15,23,42,.96)
        );

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

    backdrop-filter:blur(28px);

    transform:
        perspective(1600px)
        rotateY(-8deg)
        rotateX(3deg);

    transition:
        transform .45s ease,
        box-shadow .45s ease;

    box-shadow:

        0 40px 80px rgba(0,0,0,.45),

        0 0 0 1px rgba(255,255,255,.04);

    z-index:5;

}

.game-preview::before{

    content:"";

    position:absolute;

    inset:-2px;

    border-radius:36px;

    padding:2px;

    background:

        linear-gradient(
            135deg,
            #14F195,
            #9945FF,
            #14F195
        );

    -webkit-mask:

        linear-gradient(#fff 0 0) content-box,

        linear-gradient(#fff 0 0);

    -webkit-mask-composite:xor;

    mask-composite:exclude;

    opacity:.95;

    z-index:1;

}

.game-preview::after{

    content:"";

    position:absolute;

    left:-25%;

    top:-55%;

    width:55%;

    height:180%;

    background:

        linear-gradient(

            90deg,

            transparent,

            rgba(255,255,255,.12),

            transparent

        );

    transform:rotate(18deg);

    opacity:.35;

    pointer-events:none;

    animation:glassReflection 7s linear infinite;

    z-index:3;

}

.game-preview img{

    display:block;

    width:100%;

    height:auto;

    position:relative;

    z-index:2;

    filter:

        contrast(1.08)

        saturate(1.08);

}

.game-preview .preview-vignette{

    position:absolute;

    inset:0;

    background:

        linear-gradient(

            to bottom,

            rgba(0,0,0,.10),

            transparent 22%,

            transparent 75%,

            rgba(0,0,0,.55)

        );

    pointer-events:none;

    z-index:3;

}

.game-preview:hover{

    transform:

        perspective(1600px)

        rotateY(-4deg)

        rotateX(1deg)

        translateY(-10px);

    box-shadow:

        0 60px 100px rgba(0,0,0,.55),

        0 0 60px rgba(153,69,255,.16);

}

/* ===============================
   HUD
================================ */

.preview-header{

    position:absolute;

    top:20px;

    left:20px;

    right:20px;

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    z-index:6;

}

.preview-player{

    padding:12px 18px;

    border-radius:18px;

    background:rgba(10,15,25,.55);

    backdrop-filter:blur(20px);

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

    color:white;

}

.preview-player strong{

    display:block;

    font-size:1rem;

}

.preview-player small{

    color:#9CA3AF;

}

.preview-wallet{

    display:flex;

    gap:10px;

}

.preview-badge{

    display:flex;

    align-items:center;

    gap:8px;

    padding:10px 14px;

    border-radius:999px;

    background:rgba(15,23,42,.55);

    backdrop-filter:blur(20px);

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

    color:white;

    font-size:.82rem;

    font-weight:600;

}


/* ==========================================================
   PREMIUM FLOATING HUD CARD
   ========================================================== */

.floating-card{

    position:absolute;

    display:flex;

    align-items:center;

    gap:16px;

    width:240px;

    padding:18px;

    border-radius:24px;

    overflow:hidden;

    isolation:isolate;

    background:

        linear-gradient(
            180deg,
            rgba(25,30,44,.82),
            rgba(15,23,42,.82)
        );

    backdrop-filter:blur(28px);

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

    box-shadow:

        0 20px 45px rgba(0,0,0,.35),

        inset 0 1px 0 rgba(255,255,255,.06);

    transition:

        transform .35s ease,

        box-shadow .35s ease;

    animation:

        floating 7s ease-in-out infinite;

    z-index:10;

}

.floating-card::before{

    content:"";

    position:absolute;

    inset:0;

    border-radius:inherit;

    background:

        linear-gradient(

            180deg,

            rgba(255,255,255,.12),

            transparent 28%

        );

    opacity:.65;

    pointer-events:none;

}

.floating-card::after{

    content:"";

    position:absolute;

    inset:-1px;

    border-radius:24px;

    background:

        linear-gradient(

            135deg,

            rgba(20,241,149,.30),

            transparent,

            rgba(153,69,255,.30)

        );

    z-index:-1;

    filter:blur(14px);

    opacity:.55;

}

.floating-card i{

    width:56px;

    height:56px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:18px;

    flex-shrink:0;

    font-size:24px;

    color:#14F195;

    background:

        linear-gradient(

            135deg,

            rgba(20,241,149,.15),

            rgba(153,69,255,.18)

        );

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

}

.floating-card h6{

    margin:0;

    color:#fff;

    font-size:1rem;

    font-weight:700;

    line-height:1.2;

}

.floating-card small{

    display:block;

    margin-top:4px;

    color:#94A3B8;

    font-size:.82rem;

}

.floating-card:hover{

    transform:

        translateY(-8px)

        scale(1.03);

    box-shadow:

        0 30px 60px rgba(0,0,0,.45),

        0 0 35px rgba(153,69,255,.15);

}


/* Floating Animation */

.reward-card{

    top:30px;

    left:-70px;

    animation-duration:7s;

}

.leaderboard-card{

    top:90px;

    right:-80px;

    animation-duration:8s;

    animation-delay:1.2s;

}

.achievement-card{

    bottom:45px;

    left:-100px;

    animation-duration:9s;

    animation-delay:2s;

}

.earn-card{

    bottom:70px;

    right:-90px;

    animation-duration:8.5s;

    animation-delay:3s;

}


/* ===============================
   Orbit
================================ */

.hero-orbit{

    position:absolute;

    inset:0;

    z-index:1;

    pointer-events:none;

}

.hero-orbit svg{

    width:100%;

    height:100%;

}

.hero-orbit path{

    fill:none;

    stroke:rgba(255,255,255,.18);

    stroke-width:2;

    stroke-dasharray:8 10;

}


/* ===============================
   Animation
================================ */

@keyframes auroraMove{

    0%{

        transform:

            translate(0,0)

            scale(1);

    }

    50%{

        transform:

            translate(40px,-30px)

            scale(1.08);

    }

    100%{

        transform:

            translate(0,0)

            scale(1);

    }

}

@keyframes heroGlow{

    0%{

        opacity:.45;

        transform:scale(1);

    }

    50%{

        opacity:.85;

        transform:scale(1.08);

    }

    100%{

        opacity:.45;

        transform:scale(1);

    }

}


@keyframes lightSweep{

    from{

        transform:

            translateX(-250px)

            rotate(-18deg);

    }

    to{

        transform:

            translateX(1200px)

            rotate(-18deg);

    }

}

@keyframes glassReflection{

    from{

        transform:

            translateX(-500px)

            rotate(18deg);

    }

    to{

        transform:

            translateX(900px)

            rotate(18deg);

    }

}

@keyframes orbitRotate{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

@keyframes auroraPulse{

    0%,100%{

        opacity:.55;

    }

    50%{

        opacity:1;

    }

}

@keyframes neonPulse{

    0%,100%{

        opacity:.55;

        filter:blur(18px);

    }

    50%{

        opacity:1;

        filter:blur(24px);

    }

}

@keyframes floatOne{

    0%,100%{

        transform:
            translateY(0);

    }

    50%{

        transform:
            translateY(-18px);

    }

}

@keyframes floatTwo{

    0%,100%{

        transform:
            translateY(0);

    }

    50%{

        transform:
            translateY(16px);

    }

}

@keyframes floatThree{

    0%,100%{

        transform:
            translateY(0);

    }

    50%{

        transform:
            translateY(-12px);

    }

}

@keyframes floatFour{

    0%,100%{

        transform:
            translateY(0);

    }

    50%{

        transform:
            translateY(20px);

    }

}

/* ==========================================================
   HERO MOTION LAYER
   ========================================================== */

.hero-visual{

    perspective:1800px;

}

.game-preview{

    transition:

        transform .35s ease,

        box-shadow .35s ease;

    transform-style:preserve-3d;

    will-change:transform;

}

/* ======================================
   Orbit Rotation
====================================== */

.hero-orbit{

    animation:

        orbitRotate 40s linear infinite;

    transform-origin:center;

}

/* ======================================
   Floating Cards
====================================== */

.reward-card{

    animation:
        floatOne 7s ease-in-out infinite;

}

.leaderboard-card{

    animation:
        floatTwo 8s ease-in-out infinite;

}

.achievement-card{

    animation:
        floatThree 9s ease-in-out infinite;

}

.earn-card{

    animation:
        floatFour 8.5s ease-in-out infinite;

}

/* ======================================
   Aurora
====================================== */

.hero-visual::before{

    animation:

        auroraMove 12s ease-in-out infinite,

        auroraPulse 8s ease-in-out infinite;

}

/* ======================================
   Glow Pulse
====================================== */

.game-preview::before{

    animation:

        neonPulse 4s ease-in-out infinite;

}


/* ==========================================================
   PREMIUM STATS
   ========================================================== */

.home-stats{

    position:relative;

    margin-top:-90px;

    z-index:30;

}

.home-stats .dashboard-card{

    position:relative;

    overflow:hidden;

    text-align:center;

    padding:38px 26px;

    background:

        linear-gradient(
            180deg,
            rgba(24,28,40,.95),
            rgba(18,20,30,.92)
        );

    backdrop-filter:blur(22px);

    border:

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

    transition:

        transform .35s ease,

        border-color .35s ease,

        box-shadow .35s ease;

}

.home-stats .dashboard-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:

        radial-gradient(

            circle at top,

            rgba(153,69,255,.15),

            transparent 70%

        );

    opacity:0;

    transition:.35s;

}

.home-stats .dashboard-card:hover{

    transform:

        translateY(-12px);

    border-color:

        rgba(20,241,149,.35);

    box-shadow:

        0 25px 55px rgba(0,0,0,.40);

}

.home-stats .dashboard-card:hover::before{

    opacity:1;

}

.home-stats i{

    font-size:44px;

    margin-bottom:22px;

    color:#14F195;

}

.home-stats h3{

    font-size:2.5rem;

    font-weight:700;

    color:white;

    margin-bottom:10px;

}

.home-stats p{

    color:#94a3b8;

    letter-spacing:.5px;

    margin:0;

}

.counter{

    background:

        linear-gradient(

            135deg,

            #14F195,

            #A855F7

        );

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

}

.home-stats .dashboard-card::after{

    content:"";

    position:absolute;

    width:160px;

    height:160px;

    border-radius:50%;

    top:-80px;

    right:-80px;

    background:

        radial-gradient(

            rgba(20,241,149,.18),

            transparent 70%

        );

    opacity:.5;

}

.home-stats .dashboard-card:hover i{

    transform:scale(1.15);

}

.home-stats i{

    transition:.35s;

}

.home-stats{

    margin-top:40px;

}

.home-stats .dashboard-card{

    padding:28px;

}

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

#features{

    position:relative;

}

#features .dashboard-card{

    position:relative;

    overflow:hidden;

    padding:38px 32px;

    background:

        linear-gradient(
            180deg,
            rgba(22,26,38,.95),
            rgba(17,20,30,.92)
        );

    border:

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

    transition:

        .35s;

}

#features .dashboard-card::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:4px;

    height:0;

    background:

        linear-gradient(
            180deg,
            #14F195,
            #9945FF
        );

    transition:.4s;

}

#features .dashboard-card::after{

    content:"";

    position:absolute;

    inset:0;

    background:

        radial-gradient(

            circle at top right,

            rgba(153,69,255,.10),

            transparent 65%

        );

    opacity:0;

    transition:.35s;

}

#features .dashboard-card:hover{

    transform:

        translateY(-12px);

    border-color:

        rgba(20,241,149,.30);

    box-shadow:

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

}

#features .dashboard-card:hover::before{

    height:100%;

}

#features .dashboard-card:hover::after{

    opacity:1;

}

#features .dashboard-card i{

    width:72px;

    height:72px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:22px;

    font-size:30px;

    margin-bottom:26px;

    background:

        linear-gradient(
            135deg,
            rgba(153,69,255,.18),
            rgba(20,241,149,.14)
        );

    border:

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

    transition:.35s;

}

#features .dashboard-card:hover i{

    transform:

        rotate(-8deg)
        scale(1.12);

}

#features h5{

    font-size:1.25rem;

    font-weight:700;

    margin-bottom:14px;

}

#features p{

    color:#94a3b8;

    line-height:1.8;

}

#features .dashboard-card:hover{

    box-shadow:

        0 25px 60px rgba(0,0,0,.45),

        0 0 35px rgba(20,241,149,.08);

}


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

#games{

    position:relative;

}

#games .dashboard-card{

    position:relative;

    overflow:hidden;

    cursor:pointer;

    padding:34px;

    background:

        linear-gradient(
            180deg,
            rgba(20,24,36,.96),
            rgba(15,18,28,.94)
        );

    border:

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

    transition:

        .4s;

}

#games .dashboard-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:

        radial-gradient(

            circle at top right,

            rgba(20,241,149,.14),

            transparent 60%

        );

    opacity:0;

    transition:.4s;

}

#games .dashboard-card:hover::before{

    opacity:1;

}

#games .dashboard-card::after{

    content:"";

    position:absolute;

    left:0;

    right:0;

    bottom:0;

    height:4px;

    background:

        linear-gradient(
            90deg,
            #14F195,
            #9945FF
        );

    transform:scaleX(0);

    transform-origin:left;

    transition:.35s;

}

#games .dashboard-card:hover::after{

    transform:scaleX(1);

}

#games .dashboard-card:hover{

    transform:

        translateY(-14px);

    border-color:

        rgba(20,241,149,.35);

    box-shadow:

        0 30px 70px rgba(0,0,0,.50);

}

#games .dashboard-card i{

    width:76px;

    height:76px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:24px;

    font-size:34px;

    margin-bottom:26px;

    background:

        linear-gradient(

            135deg,

            rgba(20,241,149,.16),

            rgba(153,69,255,.18)

        );

    transition:.35s;

}

#games .dashboard-card:hover i{

    transform:

        scale(1.12)

        rotate(-8deg);

}

#games h5{

    font-size:1.35rem;

    font-weight:700;

    margin-bottom:14px;

}

#games p{

    color:#94a3b8;

    line-height:1.8;

}

#games .dashboard-disabled{

    opacity:.82;

    filter:saturate(.65);

}

#games .dashboard-disabled:hover{

    transform:

        translateY(-6px);

}

#games .coming-soon-badge{

    top:18px;

    right:18px;

    padding:8px 16px;

    border-radius:999px;

    background:

        linear-gradient(
            135deg,
            #F59E0B,
            #EF4444
        );

    font-size:.7rem;

    font-weight:700;

    letter-spacing:1px;

    box-shadow:

        0 10px 20px rgba(239,68,68,.22);

}

/* ==========================================================
   WHY MAENGAME PREMIUM
========================================================== */

#why{

    position:relative;

    overflow:hidden;

    padding:120px 0;

}

#why::before{

    content:"";

    position:absolute;

    inset:0;

    background:

        radial-gradient(
            circle at 15% 20%,
            rgba(20,241,149,.05),
            transparent 30%
        ),

        radial-gradient(
            circle at 90% 80%,
            rgba(153,69,255,.08),
            transparent 35%
        );

    pointer-events:none;

}

#why .container{

    position:relative;

    z-index:2;

}

/* ===========================
   Card
=========================== */

#why .dashboard-card{

    position:relative;

    overflow:hidden;

    text-align:center;

    padding:42px 30px;

    transition:

        transform .35s ease,

        border-color .35s ease,

        box-shadow .35s ease;

}

#why .dashboard-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:

        linear-gradient(

            180deg,

            rgba(255,255,255,.05),

            transparent 35%

        );

    opacity:0;

    transition:.35s;

}

#why .dashboard-card::after{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:4px;

    background:

        linear-gradient(

            90deg,

            #14F195,

            #9945FF

        );

    transform:scaleX(0);

    transform-origin:left;

    transition:.35s;

}

#why .dashboard-card:hover{

    transform:

        translateY(-12px);

    border-color:

        rgba(153,69,255,.35);

    box-shadow:

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

}

#why .dashboard-card:hover::before{

    opacity:1;

}

#why .dashboard-card:hover::after{

    transform:scaleX(1);

}

/* ===========================
   Icon Circle
=========================== */

#why .icon-circle{

    position:relative;

    width:88px;

    height:88px;

    margin:0 auto 28px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:

        linear-gradient(

            135deg,

            rgba(153,69,255,.22),

            rgba(20,241,149,.12)

        );

    border:

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

    overflow:hidden;

    transition:.35s;

}

#why .icon-circle::before{

    content:"";

    position:absolute;

    inset:0;

    background:

        radial-gradient(

            circle,

            rgba(255,255,255,.12),

            transparent 70%

        );

    opacity:.4;

}

#why .icon-circle i{

    position:relative;

    z-index:2;

    font-size:38px;

    color:#14F195;

    transition:.35s;

}

#why .dashboard-card:hover .icon-circle{

    transform:

        rotate(-6deg)

        scale(1.08);

    box-shadow:

        0 0 35px rgba(20,241,149,.18);

}

#why .dashboard-card:hover .icon-circle i{

    transform:

        scale(1.15);

    color:#fff;

}

/* ===========================
   Typography
=========================== */

#why h5{

    font-size:1.25rem;

    font-weight:700;

    margin-bottom:14px;

    color:#fff;

}

#why p{

    color:#94a3b8;

    line-height:1.8;

    margin:auto;

}

/* ===========================
   Hover Background Glow
=========================== */

#why .dashboard-card:hover{

    background:

        linear-gradient(

            180deg,

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

            rgba(255,255,255,.02)

        );

}

/* ===========================
   Floating Animation
=========================== */

#why .dashboard-card{

    animation:

        whyFloat 7s ease-in-out infinite;

}

#why .col-lg-3:nth-child(2) .dashboard-card{

    animation-delay:1s;

}

#why .col-lg-3:nth-child(3) .dashboard-card{

    animation-delay:2s;

}

#why .col-lg-3:nth-child(4) .dashboard-card{

    animation-delay:3s;

}

@keyframes whyFloat{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-6px);

    }

}

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

@media(max-width:991px){

    #why{

        padding:90px 0;

    }

    #why .dashboard-card{

        padding:34px 26px;

    }

}

/* ==========================================================
   ROADMAP PREMIUM
========================================================== */

#roadmap{

    position:relative;

    overflow:hidden;

}

#roadmap::before{

    content:"";

    position:absolute;

    inset:0;

    background:
        radial-gradient(
            circle at top left,
            rgba(153,69,255,.10),
            transparent 45%
        ),
        radial-gradient(
            circle at bottom right,
            rgba(20,241,149,.08),
            transparent 40%
        );

    pointer-events:none;

}

.roadmap{

    position:relative;

    max-width:1100px;

    margin:auto;

    padding:50px 0;

}

.roadmap::before{

    content:"";

    position:absolute;

    left:50%;

    top:0;

    bottom:0;

    width:2px;

    transform:translateX(-50%);

    background:
        linear-gradient(
            to bottom,
            transparent,
            rgba(20,241,149,.30),
            rgba(153,69,255,.35),
            transparent
        );

}

.roadmap-item{

    position:relative;

    width:50%;

    padding:24px 42px;

}

.roadmap-item:nth-child(odd){

    margin-right:auto;

    text-align:right;

}

.roadmap-item:nth-child(even){

    margin-left:auto;

    text-align:left;

}

.roadmap-item .dashboard-card{

    position:relative;

    overflow:visible;

    transition:.35s;

}


.roadmap-item .dashboard-card::before{

    content:"";

    position:absolute;

    inset:0;

    border-radius:inherit;

    background:

        linear-gradient(

            135deg,

            rgba(153,69,255,.10),

            transparent,

            rgba(20,241,149,.06)

        );

    opacity:0;

    transition:.35s;

}

.roadmap-item:hover .dashboard-card::before{

    opacity:1;

}

.roadmap-dot{

    position:absolute;

    top:52px;

    width:22px;

    height:22px;

    border-radius:50%;

    background:#14F195;

    border:4px solid #0f172a;

    box-shadow:

        0 0 18px rgba(20,241,149,.70),

        0 0 40px rgba(20,241,149,.25);

    z-index:5;

}

.roadmap-item:nth-child(odd) .roadmap-dot{

    right:-54px;

}

.roadmap-item:nth-child(even) .roadmap-dot{

    left:-54px;

}

.roadmap-item h5{

    font-size:1.25rem;

    font-weight:700;

    color:#fff;

    margin-bottom:14px;

}

.roadmap-item p{

    color:#94a3b8;

    line-height:1.8;

    margin:0;

}


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

#faq{

    position:relative;

    overflow:hidden;

    padding:120px 0;

}

#faq::before{

    content:"";

    position:absolute;

    inset:0;

    background:

        radial-gradient(
            circle at 15% 20%,
            rgba(20,241,149,.05),
            transparent 35%
        ),

        radial-gradient(
            circle at 85% 80%,
            rgba(153,69,255,.08),
            transparent 40%
        );

    pointer-events:none;

}

#faq .container{

    position:relative;

    z-index:2;

}

/* =====================================
   Accordion
===================================== */

#faqAccordion{

    max-width:920px;

    margin:auto;

}

#faq .accordion-item{

    position:relative;

    overflow:hidden;

    margin-bottom:22px;

    border:none;

    border-radius:22px;

    background:

        rgba(19,25,38,.78);

    backdrop-filter:blur(18px);

    border:

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

    transition:

        .35s;

}

#faq .accordion-item::before{

    content:"";

    position:absolute;

    inset:0;

    background:

        linear-gradient(

            135deg,

            rgba(153,69,255,.08),

            transparent 40%,

            rgba(20,241,149,.05)

        );

    opacity:0;

    transition:.35s;

}

#faq .accordion-item:hover{

    transform:translateY(-4px);

    border-color:

        rgba(153,69,255,.28);

    box-shadow:

        0 18px 45px rgba(0,0,0,.30);

}

#faq .accordion-item:hover::before{

    opacity:1;

}

/* =====================================
   Button
===================================== */

#faq .accordion-button{

    position:relative;

    padding:24px 70px 24px 28px;

    background:transparent;

    color:#fff;

    font-weight:600;

    font-size:1.06rem;

    box-shadow:none;

}

#faq .accordion-button:focus{

    box-shadow:none;

}

#faq .accordion-button:not(.collapsed){

    background:transparent;

    color:#14F195;

}

/* =====================================
   Animation
===================================== */

#faq .accordion-item{

    opacity:0;

    transform:translateY(30px);

    animation:faqFade .7s forwards;

}

#faq .accordion-item:nth-child(1){

    animation-delay:.05s;

}

#faq .accordion-item:nth-child(2){

    animation-delay:.15s;

}

#faq .accordion-item:nth-child(3){

    animation-delay:.25s;

}

#faq .accordion-item:nth-child(4){

    animation-delay:.35s;

}

#faq .accordion-item:nth-child(5){

    animation-delay:.45s;

}

#faq .accordion-item:nth-child(6){

    animation-delay:.55s;

}

@keyframes faqFade{

    to{

        opacity:1;

        transform:none;

    }

}

/* =====================================
   Custom Icon
===================================== */

#faq .accordion-button::after{

    width:42px;

    height:42px;

    border-radius:50%;

    background:none;

    content:"+";

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:24px;

    font-weight:700;

    color:#14F195;

    border:

        1px solid rgba(20,241,149,.25);

    transition:.35s;

    transform:none;

}

#faq .accordion-button:not(.collapsed)::after{

    content:"−";

    background:

        linear-gradient(
            135deg,
            #14F195,
            #9945FF
        );

    color:#fff;

    border-color:transparent;

    transform:rotate(180deg);

}

/* =====================================
   Body
===================================== */

#faq .accordion-body{

    padding:

        0 28px 28px;

    color:#94a3b8;

    line-height:1.9;

    font-size:.97rem;

}

/* =====================================
   Left Accent
===================================== */

#faq .accordion-item::after{

    content:"";

    position:absolute;

    left:0;

    top:0;

    bottom:0;

    width:4px;

    background:

        linear-gradient(

            to bottom,

            #14F195,

            #9945FF

        );

    opacity:0;

    transition:.35s;

}

#faq .accordion-item:hover::after,

#faq .accordion-button:not(.collapsed)+.accordion-collapse+.accordion-item{

    opacity:1;

}

#faq .accordion-item:has(.accordion-button:not(.collapsed))::after{

    opacity:1;

}


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

@media(max-width:991px){

    #faq{

        padding:90px 0;

    }

    #faq .accordion-button{

        padding:

            22px 60px 22px 22px;

        font-size:1rem;

    }

    #faq .accordion-body{

        padding:

            0 22px 22px;

    }

}

/* =====================================
   Custom Icon
===================================== */

#faq .accordion-button::after{

    width:42px;

    height:42px;

    border-radius:50%;

    background:none;

    content:"+";

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:24px;

    font-weight:700;

    color:#14F195;

    border:

        1px solid rgba(20,241,149,.25);

    transition:.35s;

    transform:none;

}

#faq .accordion-button:not(.collapsed)::after{

    content:"−";

    background:

        linear-gradient(
            135deg,
            #14F195,
            #9945FF
        );

    color:#fff;

    border-color:transparent;

    transform:rotate(180deg);

}

/* =====================================
   Body
===================================== */

#faq .accordion-body{

    padding:

        0 28px 28px;

    color:#94a3b8;

    line-height:1.9;

    font-size:.97rem;

}

/* =====================================
   Left Accent
===================================== */

#faq .accordion-item::after{

    content:"";

    position:absolute;

    left:0;

    top:0;

    bottom:0;

    width:4px;

    background:

        linear-gradient(

            to bottom,

            #14F195,

            #9945FF

        );

    opacity:0;

    transition:.35s;

}

#faq .accordion-item:hover::after,

#faq .accordion-button:not(.collapsed)+.accordion-collapse+.accordion-item{

    opacity:1;

}

#faq .accordion-item:has(.accordion-button:not(.collapsed))::after{

    opacity:1;

}

/* =====================================
   Animation
===================================== */

#faq .accordion-item{

    opacity:0;

    transform:translateY(30px);

    animation:faqFade .7s forwards;

}

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

@media(max-width:991px){

    #faq{

        padding:90px 0;

    }

    #faq .accordion-button{

        padding:

            22px 60px 22px 22px;

        font-size:1rem;

    }

    #faq .accordion-body{

        padding:

            0 22px 22px;

    }

}

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

.footer{

    position:relative;

    overflow:hidden;

    margin-top:120px;

    padding:90px 0 35px;

    background:
        linear-gradient(
            180deg,
            #0d1117,
            #090d14
        );

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

}

/* =====================================
   Background
===================================== */

.footer::before{

    content:"";

    position:absolute;

    inset:0;

    background:

        radial-gradient(
            circle at 15% 15%,
            rgba(20,241,149,.06),
            transparent 35%
        ),

        radial-gradient(
            circle at 85% 80%,
            rgba(153,69,255,.08),
            transparent 40%
        );

    pointer-events:none;

}

.footer .container{

    position:relative;

    z-index:2;

}

/* =====================================
   Logo
===================================== */

.footer h4{

    font-size:2rem;

    font-weight:800;

    color:#fff;

    margin-bottom:18px;

    letter-spacing:.4px;

}

.footer>div p,

.footer p{

    color:#94a3b8;

    line-height:1.9;

}

/* =====================================
   Heading
===================================== */

.footer h5{

    color:#fff;

    font-weight:700;

    margin-bottom:22px;

    position:relative;

    padding-bottom:12px;

}

.footer h5::after{

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:42px;

    height:3px;

    border-radius:999px;

    background:

        linear-gradient(

            90deg,

            #14F195,

            #9945FF

        );

}

/* =====================================
   Link
===================================== */

.footer a{

    position:relative;

    display:inline-block;

    margin-bottom:14px;

    color:#94a3b8;

    text-decoration:none;

    transition:.3s;

}

.footer a::before{

    content:"";

    position:absolute;

    left:0;

    bottom:-3px;

    width:0;

    height:2px;

    background:

        linear-gradient(

            90deg,

            #14F195,

            #9945FF

        );

    transition:.3s;

}

.footer a:hover{

    color:#fff;

    transform:translateX(6px);

}

.footer a:hover::before{

    width:100%;

}

/* =====================================
   Social
===================================== */

.footer .d-flex a{

    width:48px;

    height:48px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:

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

    border:

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

    transition:.35s;

}

.footer .d-flex a i{

    transition:.35s;

}

.footer .d-flex a:hover{

    background:

        linear-gradient(

            135deg,

            rgba(20,241,149,.18),

            rgba(153,69,255,.20)

        );

    border-color:

        rgba(20,241,149,.30);

    transform:

        translateY(-6px);

    box-shadow:

        0 12px 35px rgba(20,241,149,.18);

}

.footer .d-flex a:hover i{

    transform:scale(1.15);

}

/* =====================================
   Footer Bottom
===================================== */

.footer-bottom{

    margin-top:70px;

    padding-top:28px;

    border-top:

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

    text-align:center;

    color:#64748b;

    font-size:.92rem;

    letter-spacing:.4px;

}


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

@media(max-width:991px){

    .footer{

        padding:70px 0 30px;

        text-align:center;

    }

    .footer h5::after{

        left:50%;

        transform:translateX(-50%);

    }

    .footer .d-flex{

        justify-content:center;

    }

    .footer a:hover{

        transform:none;

    }

    .footer-bottom{

        margin-top:50px;

    }

}

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

@keyframes floating{

    0%{

        transform:
            translateY(0)
            rotate(0deg);

    }

    25%{

        transform:
            translateY(-8px)
            rotate(.3deg);

    }

    50%{

        transform:
            translateY(-18px)
            rotate(0deg);

    }

    75%{

        transform:
            translateY(-10px)
            rotate(-.3deg);

    }

    100%{

        transform:
            translateY(0)
            rotate(0deg);

    }

}

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

@media(max-width:991px){

    .hero-section{

        padding:90px 0;

        text-align:center;

    }

    .hero-title{

        font-size:3rem;

    }

    .hero-description{

        margin:auto auto 40px;

    }

    .hero-buttons{

        justify-content:center;

    }

    .hero-visual{

        min-height:auto;

        display:flex;

        flex-direction:column;

        align-items:center;

        gap:20px;

    }

    .game-preview{

        width:100%;

        max-width:620px;

        transform:none;

    }

    .reward-card,
    .leaderboard-card,
    .achievement-card,
    .earn-card{

        position:relative;

        inset:auto;

        left:auto;

        right:auto;

        top:auto;

        bottom:auto;

        width:100%;

        max-width:420px;

        animation:none;

    }

    .home-stats{

        margin-top:40px;

    }

    .roadmap::before{

        left:22px;

        transform:none;

    }

    .roadmap-item{

        width:100%;

        padding:

            0 0 28px 65px;

        text-align:left !important;

    }

    .roadmap-dot{

        left:12px !important;

        right:auto !important;

    }
    
    #features .dashboard-card{

    padding:28px;

    }
    
    #features .dashboard-card i{
    
        width:64px;
    
        height:64px;
    
        font-size:26px;
    
    }
    
    #games .dashboard-card{

        padding:28px;
    
    }
    
    #games .dashboard-card i{
    
        width:66px;
    
        height:66px;
    
        font-size:28px;
    
    }

}

@media(max-width:576px){

    .hero-title{

        font-size:2.3rem;

    }

    .hero-section{

        padding:70px 0;

    }

    .section-home{

        padding:70px 0;

    }

}

/* ==========================================================
   SCROLL REVEAL
========================================================== */

.reveal{

    opacity:0;

    transform:

        translateY(40px);

    transition:

        opacity .8s ease,

        transform .8s ease;

    will-change:

        transform,

        opacity;

}

.reveal.show{

    opacity:1;

    transform:

        translateY(0);

}

/* lanjutan 49: tautan legal 3 kolom (templates/partials/legal_links.html) */
.legal-links-grid{display:grid;grid-template-columns:repeat(3,max-content);column-gap:3rem;row-gap:.25rem}
.legal-links-grid ul{margin:0;padding:0}
.legal-links-grid li{margin:0 0 .45rem}
.legal-links-grid a{display:inline;white-space:nowrap}
@media (max-width:575px){.legal-links-grid{grid-template-columns:repeat(2,max-content);column-gap:2rem}}