/* =========================================================
   MERKATO PLAY · GAMER REFRESH V3
   Home + mejorar precios
   ========================================================= */

:root{
    --gx-bg:#05090d;
    --gx-bg2:#071119;
    --gx-panel:#09131c;
    --gx-panel2:#0c1822;
    --gx-panel3:#101f2b;

    --gx-text:#ffffff;
    --gx-muted:#8597a8;
    --gx-muted2:#5f7385;

    --gx-line:rgba(255,255,255,.075);
    --gx-line-strong:rgba(255,255,255,.13);

    --gx-lime:#c8ff2e;
    --gx-cyan:#35c7ff;
    --gx-purple:#9b7cff;
    --gx-lilac:#b8a4ff;
    --gx-yellow:#f3ba2f;
    --gx-teal:#34ddbb;

    --gx-shadow:
        0 28px 80px rgba(0,0,0,.34);

    --gx-font:
        Manrope,Inter,system-ui,-apple-system,
        BlinkMacSystemFont,"Segoe UI",sans-serif;

    --gx-display:
        Sora,Manrope,Inter,system-ui,sans-serif;
}

*{
    box-sizing:border-box;
}

/* =========================================================
   HOME
   ========================================================= */

body.gx-home{
    margin:0;
    min-height:100vh;
    overflow-x:hidden;

    color:var(--gx-text);

    background:
        radial-gradient(
            850px 520px at 85% 8%,
            rgba(53,199,255,.075),
            transparent 68%
        ),
        radial-gradient(
            720px 470px at 8% 40%,
            rgba(155,124,255,.055),
            transparent 70%
        ),
        linear-gradient(
            180deg,
            #05090d 0%,
            #071019 50%,
            #05090d 100%
        );

    font-family:var(--gx-font);
}

.gx-home a{
    color:inherit;
    text-decoration:none;
}

.gx-shell{
    width:min(1180px,calc(100% - 40px));
    margin-inline:auto;
}

/* fondo técnico */

.gx-world{
    position:fixed;
    z-index:-10;
    inset:0;
    overflow:hidden;
    pointer-events:none;
}

.gx-world::before{
    content:"";
    position:absolute;
    inset:-120px;

    opacity:.48;

    background-image:

        linear-gradient(
            rgba(53,199,255,.025) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(53,199,255,.025) 1px,
            transparent 1px
        );

    background-size:
        72px 72px;

    mask-image:
        linear-gradient(
            to bottom,
            #000,
            transparent 88%
        );

    animation:
        gxGridMove
        32s
        linear
        infinite;
}

.gx-world::after{
    content:"";
    position:absolute;
    inset:0;

    opacity:.48;

    background:

        radial-gradient(
            circle at 11% 21%,
            transparent 0 74px,
            rgba(53,199,255,.055) 75px 76px,
            transparent 77px
        ),

        radial-gradient(
            circle at 88% 29%,
            transparent 0 105px,
            rgba(155,124,255,.045) 106px 107px,
            transparent 108px
        ),

        radial-gradient(
            circle at 72% 82%,
            transparent 0 135px,
            rgba(200,255,46,.03) 136px 137px,
            transparent 138px
        );

    animation:
        gxHudDrift
        20s
        ease-in-out
        infinite
        alternate;
}

@keyframes gxGridMove{
    to{
        transform:
            translate3d(
                72px,
                72px,
                0
            );
    }
}

@keyframes gxHudDrift{
    to{
        transform:
            translate3d(
                18px,
                -12px,
                0
            )
            scale(1.015);
    }
}

/* circuitos */

.gx-circuit{
    position:absolute;
    pointer-events:none;
    opacity:.48;
}

.gx-circuit.one{
    width:460px;
    height:260px;

    top:18%;
    left:-110px;

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

    border-right:
        1px solid
        rgba(53,199,255,.12);

    border-radius:
        0 80px 0 0;
}

.gx-circuit.two{
    width:520px;
    height:300px;

    right:-170px;
    top:58%;

    border-left:
        1px solid
        rgba(155,124,255,.11);

    border-bottom:
        1px solid
        rgba(155,124,255,.11);

    border-radius:
        0 0 0 90px;
}

.gx-circuit::after{
    content:"";

    position:absolute;

    width:7px;
    height:7px;

    border-radius:50%;

    background:var(--gx-cyan);

    box-shadow:
        0 0 0 5px rgba(53,199,255,.07),
        0 0 18px rgba(53,199,255,.45);

    animation:
        gxNodePulse
        2.4s
        ease-in-out
        infinite;
}

.gx-circuit.one::after{
    right:-4px;
    top:-4px;
}

.gx-circuit.two::after{
    left:-4px;
    bottom:-4px;

    background:var(--gx-purple);

    box-shadow:
        0 0 0 5px rgba(155,124,255,.06),
        0 0 18px rgba(155,124,255,.45);
}

@keyframes gxNodePulse{
    50%{
        opacity:.35;
        transform:scale(.75);
    }
}

/* navegación */

.gx-nav{
    position:sticky;
    top:0;
    z-index:50;

    background:
        rgba(5,9,13,.82);

    backdrop-filter:
        blur(18px);

    border-bottom:
        1px solid
        rgba(255,255,255,.055);
}

.gx-nav-in{
    min-height:72px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:24px;
}

.gx-brand img{
    display:block;
    height:32px;
    width:auto;
}

.gx-nav-links{
    display:flex;
    align-items:center;
    gap:24px;

    color:#91a0ae;

    font-size:12px;
    font-weight:800;
}

.gx-nav-links > a:not(.gx-button):hover{
    color:#fff;
}

/* botones */

.gx-button{
    min-height:43px;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    gap:8px;

    padding:
        0 16px;

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

    border-radius:11px;

    color:#fff!important;

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

    font-size:11px;
    font-weight:900;

    cursor:pointer;

    transition:
        transform .18s ease,
        border-color .18s ease,
        background .18s ease;
}

.gx-button:hover{
    transform:
        translateY(-2px);

    border-color:
        rgba(53,199,255,.32);

    background:
        rgba(53,199,255,.055);
}

.gx-button.lime{
    color:#071007!important;

    background:
        var(--gx-lime);

    border-color:
        var(--gx-lime);

    box-shadow:
        0 12px 38px
        rgba(200,255,46,.11);
}

.gx-button.cyan{
    border-color:
        rgba(53,199,255,.25);

    background:
        rgba(53,199,255,.065);
}

/* hero */

.gx-hero{
    min-height:
        calc(100vh - 72px);

    padding:
        72px 0;

    display:grid;

    grid-template-columns:
        minmax(0,1.05fr)
        minmax(390px,.95fr);

    gap:70px;

    align-items:center;
}

.gx-kicker{
    display:flex;
    align-items:center;

    gap:9px;

    margin-bottom:17px;

    color:
        var(--gx-cyan);

    font-size:10px;
    font-weight:900;

    letter-spacing:.14em;

    text-transform:uppercase;
}

.gx-kicker::before{
    content:"";

    width:25px;
    height:1px;

    background:currentColor;

    box-shadow:
        0 0 12px currentColor;
}

.gx-hero h1{
    max-width:760px;

    margin:0;

    color:#fff;

    font-family:
        var(--gx-display);

    font-size:
        clamp(
            47px,
            5.5vw,
            77px
        );

    line-height:.96;

    font-weight:700;

    letter-spacing:
        -.06em;
}

.gx-hero h1 span{
    display:block;

    color:
        var(--gx-lime);

    text-shadow:
        0 0 42px
        rgba(200,255,46,.075);
}

.gx-hero-copy > p{
    max-width:610px;

    margin:
        24px 0 0;

    color:#97a7b5;

    font-size:15px;

    line-height:1.7;
}

.gx-hero-actions{
    display:flex;
    flex-wrap:wrap;

    gap:10px;

    margin-top:27px;
}

/* Binance */

.gx-binance{
    width:max-content;

    max-width:100%;

    margin-top:23px;

    display:flex;
    align-items:center;

    gap:10px;

    padding:
        9px 12px;

    border:
        1px solid
        rgba(243,186,47,.18);

    border-radius:11px;

    background:
        rgba(243,186,47,.035);

    color:#e7edf2;

    font-size:10px;
    font-weight:800;
}

.gx-binance svg{
    width:21px;
    height:21px;

    fill:
        var(--gx-yellow);

    filter:
        drop-shadow(
            0 0 10px
            rgba(243,186,47,.18)
        );
}

.gx-binance strong{
    color:
        var(--gx-yellow);
}

/* gamer art */

.gx-stage{
    position:relative;

    min-height:465px;

    display:grid;
    place-items:center;

    perspective:900px;
}

.gx-stage-glow{
    position:absolute;

    width:320px;
    height:320px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(53,199,255,.12),
            rgba(53,199,255,.025) 42%,
            transparent 68%
        );

    filter:blur(3px);

    animation:
        gxGlow
        4s
        ease-in-out
        infinite;
}

@keyframes gxGlow{
    50%{
        transform:
            scale(1.08);

        opacity:.68;
    }
}

.gx-orbit{
    position:absolute;

    width:360px;
    height:360px;

    border-radius:50%;

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

    box-shadow:
        inset 0 0 70px
        rgba(53,199,255,.018);

    transform:
        rotateX(64deg)
        rotateZ(-12deg);

    animation:
        gxOrbit
        14s
        linear
        infinite;
}

.gx-orbit::before,
.gx-orbit::after{
    content:"";

    position:absolute;

    border-radius:50%;

    border:
        1px dashed
        rgba(155,124,255,.14);
}

.gx-orbit::before{
    inset:38px;
}

.gx-orbit::after{
    inset:82px;

    border-color:
        rgba(200,255,46,.10);
}

@keyframes gxOrbit{
    to{
        transform:
            rotateX(64deg)
            rotateZ(348deg);
    }
}

/* controller */

.gx-controller{
    position:relative;

    z-index:3;

    width:292px;
    height:176px;

    transform:
        translate3d(
            var(--gx-mx,0),
            var(--gx-my,0),
            0
        )
        rotate(-6deg);

    transition:
        transform .18s ease-out;

    animation:
        gxControllerFloat
        5.2s
        ease-in-out
        infinite;
}

.gx-controller svg{
    width:100%;
    height:100%;

    overflow:visible;

    filter:
        drop-shadow(
            0 35px 35px
            rgba(0,0,0,.42)
        );
}

@keyframes gxControllerFloat{
    50%{
        transform:
            translate3d(
                var(--gx-mx,0),
                calc(
                    var(--gx-my,0) - 10px
                ),
                0
            )
            rotate(-3deg);
    }
}

.gx-float{
    position:absolute;

    z-index:4;

    padding:
        8px 10px;

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

    border-radius:10px;

    background:
        rgba(7,17,25,.88);

    backdrop-filter:
        blur(12px);

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

    font-size:9px;
    font-weight:900;

    letter-spacing:.08em;

    animation:
        gxFloat
        4.5s
        ease-in-out
        infinite;
}

.gx-float.topup{
    left:2%;
    top:21%;

    color:
        var(--gx-lime);

    border-color:
        rgba(200,255,46,.18);
}

.gx-float.api{
    right:2%;
    top:30%;

    color:
        var(--gx-cyan);

    border-color:
        rgba(53,199,255,.18);

    animation-delay:
        -1.3s;
}

.gx-float.wallet{
    right:15%;
    bottom:13%;

    color:
        var(--gx-lilac);

    border-color:
        rgba(155,124,255,.18);

    animation-delay:
        -2.1s;
}

.gx-float.live{
    left:15%;
    bottom:17%;

    color:
        var(--gx-yellow);

    border-color:
        rgba(243,186,47,.18);

    animation-delay:
        -.7s;
}

@keyframes gxFloat{
    50%{
        transform:
            translateY(-10px)
            rotate(1deg);
    }
}

/* crosshair */

.gx-crosshair{
    position:absolute;

    right:8%;
    bottom:31%;

    width:53px;
    height:53px;

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

    border-radius:50%;

    opacity:.58;

    animation:
        gxCrosshair
        9s
        linear
        infinite;
}

.gx-crosshair::before,
.gx-crosshair::after{
    content:"";

    position:absolute;

    background:
        rgba(53,199,255,.22);
}

.gx-crosshair::before{
    left:50%;
    top:-10px;

    width:1px;
    height:71px;
}

.gx-crosshair::after{
    top:50%;
    left:-10px;

    width:71px;
    height:1px;
}

@keyframes gxCrosshair{
    to{
        transform:
            rotate(360deg);
    }
}

/* strip */

.gx-strip{
    border-block:
        1px solid
        rgba(255,255,255,.055);

    background:
        rgba(255,255,255,.012);
}

.gx-strip-in{
    min-height:83px;

    display:grid;

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

.gx-strip-item{
    display:flex;
    align-items:center;
    justify-content:center;

    gap:9px;

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

    color:#8293a1;

    font-size:10px;
    font-weight:900;

    letter-spacing:.08em;
}

.gx-strip-item:last-child{
    border-right:0;
}

.gx-strip-item i{
    width:6px;
    height:6px;

    border-radius:50%;

    background:
        var(--gx-cyan);

    box-shadow:
        0 0 12px
        rgba(53,199,255,.45);
}

.gx-strip-item:nth-child(2) i{
    background:
        var(--gx-purple);
}

.gx-strip-item:nth-child(3) i{
    background:
        var(--gx-yellow);
}

.gx-strip-item:nth-child(4) i{
    background:
        var(--gx-lime);
}

/* sections */

.gx-section{
    padding:
        89px 0;
}

.gx-section-head{
    max-width:650px;

    margin-bottom:31px;
}

.gx-section-head h2{
    margin:0;

    color:#fff;

    font-family:
        var(--gx-display);

    font-size:
        clamp(
            30px,
            3.8vw,
            45px
        );

    line-height:1.04;

    letter-spacing:
        -.045em;
}

.gx-section-head p{
    max-width:570px;

    margin:
        11px 0 0;

    color:#788b9c;

    font-size:12px;
    line-height:1.6;
}

/* pasos */

.gx-flow{
    display:grid;

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

    gap:12px;
}

.gx-flow-card{
    position:relative;

    min-height:178px;

    padding:22px;

    overflow:hidden;

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

    border-radius:18px;

    background:
        linear-gradient(
            145deg,
            rgba(13,27,38,.96),
            rgba(7,16,24,.96)
        );

    box-shadow:
        0 20px 55px
        rgba(0,0,0,.12);

    transition:
        transform .22s ease,
        border-color .22s ease,
        box-shadow .22s ease;
}

.gx-flow-card:hover{
    transform:
        translateY(-5px);

    box-shadow:
        0 28px 70px
        rgba(0,0,0,.23);
}

.gx-flow-card:nth-child(1):hover{
    border-color:
        rgba(243,186,47,.28);
}

.gx-flow-card:nth-child(2):hover{
    border-color:
        rgba(53,199,255,.28);
}

.gx-flow-card:nth-child(3):hover{
    border-color:
        rgba(200,255,46,.25);
}

.gx-flow-icon{
    width:39px;
    height:39px;

    display:grid;
    place-items:center;

    border-radius:11px;

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

    color:
        var(--gx-cyan);

    font-size:9px;
    font-weight:900;
}

.gx-flow-card:nth-child(1)
.gx-flow-icon{
    color:
        var(--gx-yellow);

    background:
        rgba(243,186,47,.075);
}

.gx-flow-card:nth-child(3)
.gx-flow-icon{
    color:
        var(--gx-lime);

    background:
        rgba(200,255,46,.065);
}

.gx-flow-card h3{
    margin:
        29px 0 5px;

    color:#fff;

    font-size:16px;
}

.gx-flow-card p{
    margin:0;

    color:#748797;

    font-size:10px;
    line-height:1.55;
}

/* tiers */

.gx-tier-grid{
    display:grid;

    grid-template-columns:
        1fr 1fr;

    gap:13px;
}

.gx-tier{
    position:relative;

    padding:25px;

    overflow:hidden;

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

    border-radius:19px;

    background:
        #09141d;

    transition:
        transform .22s ease,
        border-color .22s ease;
}

.gx-tier:hover{
    transform:
        translateY(-4px);
}

.gx-tier.pro{
    border-top-color:
        rgba(53,199,255,.54);
}

.gx-tier.premium{
    border-top-color:
        rgba(200,255,46,.55);

    background:
        radial-gradient(
            390px 210px at 100% 0,
            rgba(200,255,46,.055),
            transparent 70%
        ),
        #09141d;
}

.gx-tier-tag{
    color:
        var(--gx-cyan);

    font-size:9px;
    font-weight:900;

    letter-spacing:.11em;
}

.gx-tier.premium
.gx-tier-tag{
    color:
        var(--gx-lime);
}

.gx-tier h3{
    margin:
        14px 0 0;

    font-family:
        var(--gx-display);

    font-size:27px;

    letter-spacing:
        -.035em;
}

.gx-tier-price{
    margin:
        20px 0 20px;

    color:#fff;

    font-family:
        var(--gx-display);

    font-size:33px;

    letter-spacing:
        -.05em;
}

.gx-tier-price small{
    display:block;

    margin-top:5px;

    color:#687c8d;

    font:
        800 9px
        var(--gx-font);

    letter-spacing:0;
}

.gx-tier-points{
    min-height:54px;

    margin-bottom:20px;

    display:flex;
    flex-wrap:wrap;

    gap:7px;
}

.gx-tier-points span{
    padding:
        6px 8px;

    border-radius:8px;

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

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

    color:#8a9baa;

    font-size:9px;
    font-weight:800;
}

/* price browser */

.gx-price-tabs{
    width:max-content;

    max-width:100%;

    display:flex;

    gap:4px;

    margin-bottom:17px;

    padding:4px;

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

    border-radius:12px;

    background:
        #071119;
}

.gx-price-tab{
    min-width:115px;
    min-height:38px;

    padding:
        0 13px;

    border:0;
    border-radius:9px;

    background:
        transparent;

    color:#718495;

    font:
        900 10px
        var(--gx-font);

    cursor:pointer;
}

.gx-price-tab.active{
    color:#fff;

    background:
        #102230;

    box-shadow:
        inset 0 0 0 1px
        rgba(53,199,255,.12);
}

.gx-price-tab[data-tier="premium"].active{
    color:#071007;

    background:
        var(--gx-lime);

    box-shadow:none;
}

.gx-games{
    display:grid;
    gap:8px;
}

.gx-game{
    overflow:hidden;

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

    border-radius:14px;

    background:
        rgba(9,20,29,.92);
}

.gx-game summary{
    min-height:60px;

    padding:
        12px 15px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:12px;

    list-style:none;
    cursor:pointer;
}

.gx-game summary::-webkit-details-marker{
    display:none;
}

.gx-game-title{
    display:flex;
    align-items:center;

    gap:10px;
}

.gx-game-icon{
    width:34px;
    height:34px;

    display:grid;
    place-items:center;

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

    border-radius:10px;

    background:
        rgba(155,124,255,.055);

    color:
        var(--gx-lilac);

    font-size:9px;
    font-weight:900;
}

.gx-game-title b{
    color:#fff;

    font-size:12px;
}

.gx-game summary > span{
    color:#617486;

    font-size:9px;
}

.gx-price-table-wrap{
    padding:
        0 11px 11px;
}

.gx-price-table{
    width:100%;

    table-layout:fixed;

    border-collapse:separate;
    border-spacing:0;

    overflow:hidden;

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

    border-radius:10px;
}

.gx-price-table th,
.gx-price-table td{
    padding:
        11px 12px;

    border-bottom:
        1px solid
        rgba(255,255,255,.045);
}

.gx-price-table tr:last-child td{
    border-bottom:0;
}

.gx-price-table th{
    color:#637789;

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

    font-size:8px;

    text-transform:uppercase;

    letter-spacing:.08em;

    text-align:left;
}

.gx-price-table td{
    color:#dce4eb;

    font-size:10px;
}

.gx-price-table th:last-child,
.gx-price-table td:last-child{
    text-align:right;
}

.gx-price{
    display:none;

    color:#fff;

    font-weight:900;
}

.gx-home[data-tier="pro"]
.gx-price[data-tier="pro"]{
    display:inline;
}

.gx-home[data-tier="premium"]
.gx-price[data-tier="premium"]{
    display:inline;
}

/* CTA */

.gx-cta{
    margin-bottom:80px;

    padding:
        42px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:28px;

    overflow:hidden;

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

    border-radius:22px;

    background:

        radial-gradient(
            430px 230px at 100% 0,
            rgba(53,199,255,.08),
            transparent 70%
        ),

        radial-gradient(
            360px 210px at 0 100%,
            rgba(155,124,255,.055),
            transparent 72%
        ),

        #09141d;
}

.gx-cta h2{
    margin:0;

    max-width:650px;

    color:#fff;

    font-family:
        var(--gx-display);

    font-size:
        clamp(
            28px,
            3.5vw,
            41px
        );

    line-height:1.04;

    letter-spacing:
        -.045em;
}

.gx-cta p{
    margin:
        8px 0 0;

    color:#718495;

    font-size:10px;
}

/* footer */

.gx-footer{
    border-top:
        1px solid
        rgba(255,255,255,.055);

    padding:
        26px 0;
}

.gx-footer-in{
    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:15px;

    color:#53687a;

    font-size:9px;
    font-weight:800;

    letter-spacing:.09em;
}

.gx-footer img{
    height:25px;
    width:auto;
}

/* scroll reveal */

.gx-reveal{
    opacity:0;

    transform:
        translateY(24px);

    transition:
        opacity .7s ease,
        transform .7s
        cubic-bezier(.22,1,.36,1);
}

.gx-reveal.in{
    opacity:1;

    transform:
        translateY(0);
}

/* =========================================================
   MEJORAR PRECIOS · ULTRA SIMPLE
   ========================================================= */

.gp-page{
    width:100%;

    display:grid;

    gap:12px;

    padding-bottom:36px;
}

.gp-level{
    padding:
        20px;

    display:grid;

    grid-template-columns:
        minmax(0,1fr)
        auto;

    align-items:center;

    gap:18px;

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

    border-radius:17px;

    background:
        radial-gradient(
            330px 170px at 100% 0,
            rgba(53,199,255,.055),
            transparent 72%
        ),
        #09151e;
}

.gp-label{
    display:block;

    margin-bottom:4px;

    color:
        var(--gx-cyan);

    font-size:8px;
    font-weight:900;

    letter-spacing:.12em;

    text-transform:uppercase;
}

.gp-level h1{
    margin:0;

    color:#fff!important;

    font-family:
        var(--gx-display);

    font-size:28px!important;

    line-height:1!important;

    letter-spacing:
        -.04em;
}

.gp-actions{
    display:flex;
    align-items:center;

    gap:8px;

    flex-wrap:wrap;
}

.gp-btn{
    min-height:40px;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:
        0 14px;

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

    border-radius:10px;

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

    color:#fff;

    font:
        900 10px
        var(--gx-font);

    text-decoration:none;

    cursor:pointer;
}

.gp-btn.cyan{
    border-color:
        rgba(53,199,255,.22);

    background:
        rgba(53,199,255,.065);
}

.gp-btn.lime{
    border-color:
        var(--gx-lime);

    background:
        var(--gx-lime);

    color:#071007;
}

/* upgrade */

.gp-upgrade{
    padding:
        18px 20px;

    display:grid;

    grid-template-columns:
        45px
        minmax(0,1fr)
        auto;

    align-items:center;

    gap:15px;

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

    border-radius:17px;

    background:
        radial-gradient(
            360px 180px at 100% 0,
            rgba(200,255,46,.055),
            transparent 72%
        ),
        #09151e;
}

.gp-upgrade-icon{
    width:43px;
    height:43px;

    display:grid;
    place-items:center;

    border-radius:12px;

    background:
        rgba(200,255,46,.075);

    color:
        var(--gx-lime);

    font-size:19px;
}

.gp-upgrade h2{
    margin:0!important;

    color:#fff!important;

    font-family:
        var(--gx-display);

    font-size:19px!important;

    line-height:1.05!important;

    letter-spacing:
        -.035em;
}

.gp-upgrade p{
    margin:
        5px 0 0;

    color:#687d8e;

    font-size:9px;
}

.gp-premium-actions{
    display:flex;
    align-items:center;

    gap:7px;

    flex-wrap:wrap;

    justify-content:flex-end;
}

/* pricing drawers */

.gp-price-box{
    overflow:hidden;

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

    border-radius:15px;

    background:
        #09151e;
}

.gp-price-box > summary{
    min-height:55px;

    padding:
        0 16px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:12px;

    color:#fff;

    list-style:none;

    cursor:pointer;

    font-size:11px;
    font-weight:900;
}

.gp-price-box > summary::-webkit-details-marker{
    display:none;
}

.gp-price-box > summary span:last-child{
    color:
        var(--gx-cyan);

    font-size:17px;

    transition:
        transform .18s ease;
}

.gp-price-box[open]
> summary span:last-child{
    transform:
        rotate(45deg);
}

.gp-price-box.premium
> summary span:last-child{
    color:
        var(--gx-lime);
}

.gp-games{
    padding:
        0 10px 10px;

    display:grid;

    gap:7px;
}

.gp-game{
    overflow:hidden;

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

    border-radius:11px;

    background:
        rgba(255,255,255,.012);
}

.gp-game summary{
    min-height:50px;

    padding:
        0 12px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:12px;

    list-style:none;

    cursor:pointer;
}

.gp-game summary::-webkit-details-marker{
    display:none;
}

.gp-game-name{
    display:flex;
    align-items:center;

    gap:9px;
}

.gp-game-icon{
    width:29px;
    height:29px;

    display:grid;
    place-items:center;

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

    border-radius:8px;

    background:
        rgba(155,124,255,.045);

    color:
        var(--gx-lilac);

    font-size:8px;
    font-weight:900;
}

.gp-game-name b{
    color:#fff;

    font-size:11px;
}

.gp-game summary > span{
    color:#5d7284;

    font-size:8px;
}

.gp-table-wrap{
    padding:
        0 9px 9px;
}

.gp-table{
    width:100%;

    table-layout:fixed;

    border-collapse:collapse;
}

.gp-table td{
    padding:
        10px;

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

    color:#cfd8e0;

    font-size:9px;
}

.gp-table td:last-child{
    width:28%;

    text-align:right;

    color:#fff;

    font-weight:900;
}

/* responsive */

@media(max-width:900px){

    .gx-shell{
        width:
            min(
                100% - 28px,
                1180px
            );
    }

    .gx-nav-links >
    a:not(.gx-button){
        display:none;
    }

    .gx-hero{
        min-height:auto;

        padding:
            56px 0 50px;

        grid-template-columns:
            1fr;

        gap:25px;
    }

    .gx-hero h1{
        font-size:
            clamp(
                42px,
                10vw,
                64px
            );
    }

    .gx-stage{
        min-height:385px;
    }

    .gx-controller{
        width:260px;
    }

    .gx-orbit{
        width:320px;
        height:320px;
    }

    .gx-flow{
        grid-template-columns:1fr;
    }

    .gx-tier-grid{
        grid-template-columns:1fr;
    }

}

@media(max-width:640px){

    .gx-brand img{
        height:28px;
    }

    .gx-nav-in{
        min-height:64px;
    }

    .gx-nav-links{
        gap:7px;
    }

    .gx-nav-links
    .gx-button:not(.lime){
        display:none;
    }

    .gx-nav-links
    .gx-button{
        min-height:38px;

        padding:
            0 11px;
    }

    .gx-hero{
        padding-top:42px;
    }

    .gx-hero h1{
        font-size:41px;
    }

    .gx-hero-copy > p{
        font-size:13px;
    }

    .gx-stage{
        min-height:330px;
    }

    .gx-controller{
        width:225px;
    }

    .gx-orbit{
        width:275px;
        height:275px;
    }

    .gx-float{
        font-size:7px;
    }

    .gx-strip-in{
        grid-template-columns:1fr 1fr;
    }

    .gx-strip-item{
        min-height:60px;
    }

    .gx-strip-item:nth-child(2){
        border-right:0;
    }

    .gx-strip-item:nth-child(-n+2){
        border-bottom:
            1px solid
            rgba(255,255,255,.055);
    }

    .gx-section{
        padding:
            65px 0;
    }

    .gx-section-head h2{
        font-size:30px;
    }

    .gx-price-tabs{
        width:100%;
    }

    .gx-price-tab{
        min-width:0;
        flex:1;
    }

    .gx-price-table th:first-child,
    .gx-price-table td:first-child{
        width:70%;
    }

    .gx-price-table th:last-child,
    .gx-price-table td:last-child{
        width:30%;
    }

    .gx-cta{
        margin-bottom:55px;

        padding:
            26px;

        flex-direction:column;

        align-items:flex-start;
    }

    .gx-footer-in{
        flex-direction:column;

        align-items:flex-start;
    }

    .gp-level{
        padding:17px;

        grid-template-columns:1fr;
    }

    .gp-level h1{
        font-size:25px!important;
    }

    .gp-actions{
        width:100%;
    }

    .gp-actions .gp-btn{
        width:100%;
    }

    .gp-upgrade{
        padding:16px;

        grid-template-columns:
            39px
            minmax(0,1fr);
    }

    .gp-upgrade-icon{
        width:39px;
        height:39px;
    }

    .gp-premium-actions{
        grid-column:
            1 / -1;

        width:100%;

        justify-content:stretch;
    }

    .gp-premium-actions
    .gp-btn,
    .gp-premium-actions
    form,
    .gp-premium-actions
    form .gp-btn{
        width:100%;
    }

}

/* modern scroll-driven enhancement */

@supports (
    animation-timeline:view()
){

    .gx-scroll-modern{
        animation:
            gxModernReveal
            linear
            both;

        animation-timeline:
            view();

        animation-range:
            entry 5%
            cover 30%;
    }

    @keyframes gxModernReveal{

        from{
            opacity:.15;

            transform:
                translateY(28px)
                scale(.985);
        }

        to{
            opacity:1;

            transform:
                translateY(0)
                scale(1);
        }

    }

}

/* accessibility */

@media (
    prefers-reduced-motion:
    reduce
){

    .gx-world::before,
    .gx-world::after,
    .gx-circuit::after,
    .gx-stage-glow,
    .gx-orbit,
    .gx-controller,
    .gx-float,
    .gx-crosshair{
        animation:none!important;
    }

    .gx-reveal{
        opacity:1!important;

        transform:none!important;

        transition:none!important;
    }

}