/*=============================================
                  Global Start
=============================================*/

:root {
    --page-background: #020817;
    --surface-main: #061327;
    --surface-light: #0a1d38;

    --text-main: #f7fbff;
    --text-secondary: #c5d5e8;

    --blue-main: #13cfff;
    --blue-light: #6ce9ff;
    --blue-dark: #087cff;

    --gold-main: #ffc83d;
    --gold-light: #ffe07c;
    --gold-dark: #d99712;

    --container-width: 1420px;
    --header-height: 74px;

    --transition-fast: 0.2s ease;
    --transition-main: 0.35s ease;
}


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


html {
    scroll-behavior: smooth;
}


body {
    margin: 0;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    color:
        var(--text-main);

    background:
        var(--page-background);

    line-height: 1.6;
}


body.nav-open {
    overflow: hidden;
}


a {
    color: inherit;
    text-decoration: none;
}


button {
    font: inherit;
}


img,
svg {
    display: block;
    max-width: 100%;
}


main {
    overflow: hidden;
}


section {
    scroll-margin-top:
        calc(var(--header-height) + 20px);
}


.visually-hidden {
    position: absolute;

    width: 1px;
    height: 1px;

    padding: 0;
    margin: -1px;

    overflow: hidden;

    clip: rect(0, 0, 0, 0);

    white-space: nowrap;

    border: 0;
}

/*=============================================
                   Global End
=============================================*/


/*=============================================
                  Header Start
=============================================*/

.site-header {
    position: fixed;

    top: 0;
    left: 0;

    width: 100%;

    z-index: 1000;

    background:
        rgba(2, 8, 23, 0.88);

    border-bottom:
        1px solid
        rgba(19, 207, 255, 0.16);

    backdrop-filter:
        blur(18px);

    -webkit-backdrop-filter:
        blur(18px);

    transition:
        background var(--transition-main),
        border-color var(--transition-main),
        box-shadow var(--transition-main);
}


.site-header.is-scrolled {
    background:
        rgba(2, 8, 23, 0.98);

    border-color:
        rgba(255, 200, 61, 0.25);

    box-shadow:
        0 14px 40px
        rgba(0, 0, 0, 0.34);
}


.site-header-inner {
    width:
        min(
            calc(100% - 40px),
            var(--container-width)
        );

    height:
        var(--header-height);

    margin:
        0 auto;

    display:
        flex;

    align-items:
        center;

    gap:
        20px;
}


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

.site-logo {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        12px;

    flex-shrink:
        0;
}


.site-logo-mark {
    width:
        46px;

    height:
        46px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        2px solid
        rgba(19, 207, 255, 0.88);

    border-radius:
        50%;

    background:
        linear-gradient(
            145deg,
            #0c1730 0%,
            #064f92 48%,
            #0dd9ff 100%
        );

    color:
        #ffffff;

    font-size:
        24px;

    font-weight:
        900;

    font-style:
        italic;

    line-height:
        1;

    box-shadow:
        0 0 22px
        rgba(19, 207, 255, 0.28);
}


.site-logo-text {
    display:
        flex;

    flex-direction:
        column;

    line-height:
        1;
}


.site-logo-text strong {
    color:
        #ffffff;

    font-size:
        18px;

    font-weight:
        900;

    letter-spacing:
        0.075em;
}


.site-logo-text small {
    margin-top:
        6px;

    color:
        var(--gold-main);

    font-size:
        10px;

    font-weight:
        900;

    letter-spacing:
        0.34em;
}

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


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

.main-navigation {
    margin-left:
        auto;

    display:
        flex;

    align-items:
        center;

    gap:
        2px;
}


.main-navigation a {
    position:
        relative;

    padding:
        10px 10px;

    border-radius:
        9px;

    color:
        #dce8f7;

    font-size:
        13px;

    font-weight:
        700;

    white-space:
        nowrap;

    transition:
        color var(--transition-fast),
        background var(--transition-fast),
        text-shadow var(--transition-fast);
}


.main-navigation a:hover,
.main-navigation a:focus-visible {
    color:
        var(--blue-light);

    background:
        rgba(19, 207, 255, 0.08);

    text-shadow:
        0 0 14px
        rgba(19, 207, 255, 0.42);
}


.main-navigation a.is-active {
    color:
        #ffffff;
}


.main-navigation a.is-active::after {
    content: "";

    position:
        absolute;

    left:
        10px;

    right:
        10px;

    bottom:
        2px;

    height:
        2px;

    border-radius:
        999px;

    background:
        linear-gradient(
            90deg,
            var(--blue-main),
            var(--gold-main)
        );

    box-shadow:
        0 0 12px
        rgba(19, 207, 255, 0.6);
}

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


/*=============================================
               Header Button Start
=============================================*/

.header-play {
    min-height:
        44px;

    padding:
        0 22px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    flex-shrink:
        0;

    border:
        1px solid
        rgba(255, 224, 124, 0.9);

    border-radius:
        10px;

    background:
        linear-gradient(
            135deg,
            #ffe473 0%,
            #ffc52f 50%,
            #e9a812 100%
        );

    color:
        #071020;

    font-size:
        13px;

    font-weight:
        900;

    box-shadow:
        0 0 22px
        rgba(255, 200, 61, 0.3);

    transition:
        transform var(--transition-fast),
        box-shadow var(--transition-fast),
        filter var(--transition-fast);
}


.header-play:hover,
.header-play:focus-visible {
    transform:
        translateY(-2px);

    box-shadow:
        0 0 34px
        rgba(255, 200, 61, 0.5);

    filter:
        brightness(1.08);
}

/*=============================================
                Header Button End
=============================================*/


/*=============================================
               Mobile Menu Start
=============================================*/

.nav-toggle {
    display:
        none;

    width:
        44px;

    height:
        44px;

    margin-left:
        auto;

    padding:
        10px;

    border:
        1px solid
        rgba(19, 207, 255, 0.32);

    border-radius:
        10px;

    background:
        rgba(19, 207, 255, 0.08);

    cursor:
        pointer;
}


.nav-toggle span {
    display:
        block;

    width:
        100%;

    height:
        2px;

    margin:
        5px 0;

    border-radius:
        10px;

    background:
        #ffffff;

    transition:
        transform var(--transition-main),
        opacity var(--transition-main);
}


.nav-toggle.is-active span:nth-child(1) {
    transform:
        translateY(7px)
        rotate(45deg);
}


.nav-toggle.is-active span:nth-child(2) {
    opacity:
        0;
}


.nav-toggle.is-active span:nth-child(3) {
    transform:
        translateY(-7px)
        rotate(-45deg);
}

/*=============================================
                Mobile Menu End
=============================================*/


/*=============================================
                Header Tablet Start
=============================================*/

@media (max-width: 1160px) {

    .site-header-inner {
        gap:
            10px;
    }


    .main-navigation a {
        padding:
            9px 6px;

        font-size:
            12px;
    }


    .header-play {
        padding:
            0 16px;
    }

}

/*=============================================
                 Header Tablet End
=============================================*/


/*=============================================
                Header Mobile Start
=============================================*/

@media (max-width: 980px) {

    :root {
        --header-height:
            66px;
    }


    .site-header-inner {
        width:
            min(
                calc(100% - 24px),
                var(--container-width)
            );
    }


    .nav-toggle {
        display:
            block;
    }


    .main-navigation {
        position:
            absolute;

        top:
            100%;

        left:
            12px;

        right:
            12px;

        margin:
            0;

        display:
            flex;

        flex-direction:
            column;

        align-items:
            stretch;

        gap:
            3px;

        max-height:
            0;

        padding:
            0 10px;

        overflow:
            hidden;

        opacity:
            0;

        pointer-events:
            none;

        background:
            rgba(2, 8, 23, 0.985);

        border:
            1px solid
            transparent;

        border-radius:
            0 0 16px 16px;

        box-shadow:
            0 20px 45px
            rgba(0, 0, 0, 0.42);

        transition:
            max-height var(--transition-main),
            padding var(--transition-main),
            opacity var(--transition-main);
    }


    .main-navigation.is-open {
        max-height:
            560px;

        padding:
            12px;

        opacity:
            1;

        pointer-events:
            auto;

        border-color:
            rgba(19, 207, 255, 0.16);
    }


    .main-navigation a {
        padding:
            12px 14px;

        font-size:
            14px;
    }


    .main-navigation a.is-active::after {
        display:
            none;
    }

}


@media (max-width: 540px) {

    .site-logo-text strong {
        font-size:
            15px;
    }


    .site-logo-text small {
        font-size:
            8px;
    }


    .site-logo-mark {
        width:
            40px;

        height:
            40px;

        font-size:
            21px;
    }


    .header-play {
        min-height:
            38px;

        padding:
            0 13px;

        font-size:
            12px;
    }

}


@media (max-width: 410px) {

    .site-logo-text {
        display:
            none;
    }

}

/*=============================================
                 Header Mobile End
=============================================*/


/*=============================================
                   Header End
=============================================*/


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

.casino-hero {
    position:
        relative;

    margin-top:
        var(--header-height);

    min-height:
        calc(100vh - var(--header-height));

    min-height:
        calc(100svh - var(--header-height));

    overflow:
        hidden;

    isolation:
        isolate;

    background:
        #020817;
}


/*=============================================
              Hero Background Start
=============================================*/

.hero-background {
    position:
        absolute;

    inset:
        0;

    z-index:
        -3;

    background-image:
        url("../images/hero.webp");

    background-repeat:
        no-repeat;

    background-position:
        center center;

    background-size:
        cover;
}


.hero-overlay {
    position:
        absolute;

    inset:
        0;

    z-index:
        -2;

    background:
        linear-gradient(
            90deg,
            rgba(1, 7, 20, 0.97) 0%,
            rgba(2, 10, 28, 0.88) 29%,
            rgba(2, 10, 28, 0.42) 54%,
            rgba(2, 8, 22, 0.10) 77%,
            rgba(2, 8, 22, 0.20) 100%
        );
}

/*=============================================
               Hero Background End
=============================================*/


/*=============================================
               Hero Container Start
=============================================*/

.hero-container {
    width:
        min(
            calc(100% - 40px),
            var(--container-width)
        );

    min-height:
        calc(100vh - var(--header-height));

    min-height:
        calc(100svh - var(--header-height));

    margin:
        0 auto;

    padding:
        48px 0 30px;

    display:
        flex;

    flex-direction:
        column;
}

/*=============================================
                Hero Container End
=============================================*/


/*=============================================
                  Hero Copy Start
=============================================*/

.hero-copy {
    width:
        min(
            650px,
            100%
        );
}


.hero-kicker {
    display:
        inline-block;

    margin-bottom:
        8px;

    color:
        var(--blue-light);

    font-size:
        13px;

    font-weight:
        900;

    letter-spacing:
        0.28em;

    text-transform:
        uppercase;

    text-shadow:
        0 0 20px
        rgba(19, 207, 255, 0.42);
}


.hero-copy h1 {
    margin:
        0;

    color:
        #ffffff;

    font-size:
        clamp(
            50px,
            5.5vw,
            80px
        );

    font-weight:
        900;

    line-height:
        0.98;

    letter-spacing:
        -0.045em;

    text-shadow:
        0 8px 30px
        rgba(0, 0, 0, 0.5);
}


.hero-copy h1::after {
    content:
        "";

    display:
        inline-block;

    width:
        0.22em;

    height:
        0.22em;

    margin-left:
        0.06em;

    border-radius:
        50%;

    vertical-align:
        0.12em;

    background:
        var(--gold-main);

    box-shadow:
        0 0 20px
        rgba(255, 200, 61, 0.6);
}


.hero-tagline {
    margin:
        16px 0 0;

    color:
        #ffffff;

    font-size:
        clamp(
            20px,
            1.8vw,
            27px
        );

    font-weight:
        800;

    line-height:
        1.35;
}


.hero-description {
    max-width:
        610px;

    margin:
        12px 0 0;

    color:
        var(--text-secondary);

    font-size:
        16px;

    font-weight:
        500;

    line-height:
        1.6;
}


.hero-play {
    min-width:
        205px;

    min-height:
        52px;

    margin-top:
        21px;

    padding:
        0 32px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid
        rgba(255, 224, 124, 0.92);

    border-radius:
        12px;

    background:
        linear-gradient(
            135deg,
            #ffe477 0%,
            #ffc42f 48%,
            #e9a70d 100%
        );

    color:
        #071020;

    font-size:
        16px;

    font-weight:
        900;

    box-shadow:
        0 0 30px
        rgba(255, 200, 61, 0.34);

    transition:
        transform var(--transition-fast),
        box-shadow var(--transition-fast),
        filter var(--transition-fast);
}


.hero-play:hover,
.hero-play:focus-visible {
    transform:
        translateY(-3px);

    box-shadow:
        0 0 42px
        rgba(255, 200, 61, 0.52);

    filter:
        brightness(1.08);
}

/*=============================================
                   Hero Copy End
=============================================*/


/*=============================================
              Hero Categories Start
=============================================*/

.hero-categories {
    width:
        min(
            1080px,
            100%
        );

    margin:
        auto 0 0;

    padding-top:
        44px;

    display:
        grid;

    grid-template-columns:
        repeat(5, 190px);

    gap:
        16px;

    justify-content:
        start;

    align-items:
        end;
}


.hero-category-card {
    position:
        relative;

    display:
        block;

    width:
        190px;

    height:
        280px;

    overflow:
        hidden;

    border:
        1px solid
        rgba(19, 207, 255, 0.48);

    border-radius:
        17px;

    background:
        #061327;

    box-shadow:
        0 12px 30px
        rgba(0, 0, 0, 0.38),
        0 0 17px
        rgba(19, 207, 255, 0.12);

    cursor:
        pointer;

    transition:
        transform var(--transition-main),
        border-color var(--transition-main),
        box-shadow var(--transition-main),
        filter var(--transition-main);
}


.hero-category-card:nth-child(2),
.hero-category-card:nth-child(4) {
    border-color:
        rgba(255, 200, 61, 0.56);

    box-shadow:
        0 12px 30px
        rgba(0, 0, 0, 0.38),
        0 0 17px
        rgba(255, 200, 61, 0.12);
}


.hero-category-card img {
    display:
        block;

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    object-position:
        center center;

    transition:
        transform 0.45s ease,
        filter 0.45s ease;
}


.hero-category-card::after {
    content:
        "";

    position:
        absolute;

    inset:
        0;

    pointer-events:
        none;

    background:
        linear-gradient(
            180deg,
            transparent 68%,
            rgba(0, 0, 0, 0.10) 100%
        );
}


.hero-category-card:hover,
.hero-category-card:focus-visible,
.hero-category-card.is-active {
    transform:
        translateY(-6px);

    border-color:
        var(--blue-light);

    box-shadow:
        0 16px 38px
        rgba(0, 0, 0, 0.46),
        0 0 27px
        rgba(19, 207, 255, 0.38);

    outline:
        none;
}


.hero-category-card:nth-child(2):hover,
.hero-category-card:nth-child(2):focus-visible,
.hero-category-card:nth-child(2).is-active,
.hero-category-card:nth-child(4):hover,
.hero-category-card:nth-child(4):focus-visible,
.hero-category-card:nth-child(4).is-active {
    border-color:
        var(--gold-light);

    box-shadow:
        0 16px 38px
        rgba(0, 0, 0, 0.46),
        0 0 27px
        rgba(255, 200, 61, 0.38);
}


.hero-category-card:hover img,
.hero-category-card:focus-visible img,
.hero-category-card.is-active img {
    transform:
        scale(1.025);

    filter:
        brightness(1.08)
        saturate(1.08);
}

/*=============================================
               Hero Categories End
=============================================*/


/*=============================================
                 Hero Tablet Start
=============================================*/

@media (max-width: 1180px) {

    .hero-container {
        min-height:
            auto;

        padding:
            42px 0 34px;
    }


    .hero-categories {
        width:
            min(
                760px,
                100%
            );

        margin:
            46px auto 0;

        padding-top:
            0;

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

        gap:
            14px;
    }


    .hero-category-card {
        max-width:
            220px;
    }


    .hero-category-card:nth-child(4) {
        grid-column:
            auto;
    }

}

/*=============================================
                  Hero Tablet End
=============================================*/


/*=============================================
                 Hero Mobile Start
=============================================*/

@media (max-width: 820px) {

    .hero-background {
        background-position:
            64% center;
    }


    .hero-overlay {
        background:
            linear-gradient(
                180deg,
                rgba(2, 8, 23, 0.74) 0%,
                rgba(2, 8, 23, 0.84) 48%,
                rgba(2, 8, 23, 0.97) 100%
            );
    }


    .hero-container {
        width:
            calc(100% - 28px);

        min-height:
            auto;

        padding:
            34px 0 30px;
    }


    .hero-copy {
        width:
            min(
                620px,
                100%
            );
    }


    .hero-copy h1 {
        font-size:
            clamp(
                44px,
                12vw,
                64px
            );
    }


    .hero-description {
        font-size:
            15px;
    }


    .hero-categories {
        width:
            min(
                500px,
                100%
            );

        margin:
            40px auto 0;

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

        gap:
            12px;
    }


    .hero-category-card {
        max-width:
            220px;
    }


    .hero-category-card:last-child {
        grid-column:
            1 / -1;

        justify-self:
            center;
    }

}


@media (max-width: 520px) {

    .hero-container {
        padding:
            28px 0 26px;
    }


    .hero-kicker {
        font-size:
            11px;

        letter-spacing:
            0.2em;
    }


    .hero-copy h1 {
        font-size:
            42px;
    }


    .hero-tagline {
        font-size:
            18px;
    }


    .hero-description {
        font-size:
            14px;

        line-height:
            1.55;
    }


    .hero-play {
        width:
            100%;

        max-width:
            290px;

        min-height:
            50px;
    }


    .hero-categories {
        width:
            100%;

        margin-top:
            34px;

        gap:
            9px;
    }


    .hero-category-card {
        max-width:
            190px;

        border-radius:
            13px;
    }

}


@media (max-width: 390px) {

    .hero-categories {
        width:
            min(
                250px,
                100%
            );

        grid-template-columns:
            1fr;
    }


    .hero-category-card {
        max-width:
            220px;
    }


    .hero-category-card:last-child {
        grid-column:
            auto;
    }

}

/*=============================================
                  Hero Mobile End
=============================================*/


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

/*=============================================
                  Bonuses Start
=============================================*/

.bonus-section {
    position: relative;
    padding: 56px 20px 78px;
    overflow: visible;
    color: var(--text-main);

    background:
        radial-gradient(
            circle at 8% 10%,
            rgba(19, 207, 255, 0.12),
            transparent 30%
        ),
        radial-gradient(
            circle at 93% 16%,
            rgba(255, 200, 61, 0.08),
            transparent 28%
        ),
        linear-gradient(
            180deg,
            #020817 0%,
            #041226 48%,
            #020817 100%
        );
}


.bonus-section[hidden] {
    display: none !important;
}


.bonus-container {
    position: relative;
    width: min(calc(100% - 8px), 1320px);
    margin: 0 auto;
}


.bonus-shell {
    position: relative;
    width: 100%;
}


.bonus-main {
    width: 100%;
    min-width: 0;
}


/*=============================================
              Section Switcher Start
=============================================*/

.bonus-navigation {
    position: absolute;

    top: 0;
    left: -168px;

    width: 142px;

    z-index: 60;

    pointer-events: none;
}


.bonus-navigation .section-switcher {
    width: 142px;

    padding: 7px;

    display: flex;

    flex-direction: column;

    gap: 7px;

    border:
        1px solid
        rgba(19, 207, 255, 0.42);

    border-radius:
        17px;

    background:
        linear-gradient(
            160deg,
            rgba(4, 20, 43, 0.98),
            rgba(2, 11, 28, 0.98)
        );

    box-shadow:
        0 16px 38px
        rgba(0, 0, 0, 0.36),
        0 0 24px
        rgba(19, 207, 255, 0.10);

    pointer-events: auto;
}


.bonus-navigation.is-floating {
    position: fixed;

    top: 50%;

    left:
        max(
            18px,
            calc(
                50% -
                660px -
                168px
            )
        );

    transform:
        translateY(-50%);

    width:
        142px;
}


.bonus-navigation.is-at-bottom {
    position: absolute;

    top: auto;
    bottom: 0;

    left: -168px;

    transform: none;
}


.bonus-navigation .section-switcher button {
    width: 100%;

    min-height: 46px;

    padding:
        0 8px;

    border:
        1px solid
        rgba(19, 207, 255, 0.76);

    border-radius:
        11px;

    background:
        linear-gradient(
            135deg,
            #07517d 0%,
            #087eaf 48%,
            #0ca8ce 100%
        );

    color:
        #ffffff;

    font-size:
        13px;

    font-weight:
        900;

    line-height:
        1.2;

    text-align:
        center;

    cursor:
        pointer;

    text-shadow:
        0 2px 7px
        rgba(0, 0, 0, 0.42);

    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, 0.08),
        0 0 15px
        rgba(19, 207, 255, 0.17);

    transition:
        transform var(--transition-fast),
        background var(--transition-fast),
        border-color var(--transition-fast),
        box-shadow var(--transition-fast),
        filter var(--transition-fast);
}


.bonus-navigation .section-switcher button:hover,
.bonus-navigation .section-switcher button:focus-visible {
    transform:
        translateX(3px);

    border-color:
        #91f2ff;

    background:
        linear-gradient(
            135deg,
            #086b99,
            #0aa4d0,
            #16d0ee
        );

    box-shadow:
        0 0 24px
        rgba(19, 207, 255, 0.40);

    filter:
        brightness(1.08);

    outline:
        none;
}


.bonus-navigation .section-switcher button.is-active {
    border-color:
        #ffe88a;

    background:
        linear-gradient(
            135deg,
            #ffe983 0%,
            #ffca3d 50%,
            #eea912 100%
        );

    color:
        #071020;

    text-shadow:
        none;

    box-shadow:
        0 0 25px
        rgba(255, 200, 61, 0.44),
        inset 0 1px 0
        rgba(255, 255, 255, 0.38);
}


@media (max-width: 1220px) {

    .bonus-navigation,
    .bonus-navigation.is-floating,
    .bonus-navigation.is-at-bottom {
        position: static;

        width: 100%;

        margin-bottom: 28px;

        transform: none;

        pointer-events: auto;
    }


    .bonus-navigation .section-switcher {
        width: 100%;

        padding: 7px;

        flex-direction: row;

        overflow-x: auto;
    }


    .bonus-navigation .section-switcher button {
        min-width: 125px;

        flex:
            0 0 auto;
    }

}

/*=============================================
               Section Switcher End
=============================================*/


/*=============================================
                Introduction Start
=============================================*/

.bonus-intro {
    display: grid;

    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(300px, 0.55fr);

    gap: 42px;
    align-items: center;

    margin-bottom: 36px;
}


.bonus-eyebrow,
.bonus-panel-kicker {
    display: block;
    margin-bottom: 9px;

    color: var(--blue-light);

    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}


.bonus-intro h2 {
    margin: 0;

    color: #ffffff;

    font-size:
        clamp(
            42px,
            4.7vw,
            68px
        );

    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.045em;
}


.bonus-intro-copy p {
    max-width: 830px;
    margin: 13px 0 0;

    color: var(--text-secondary);

    font-size: 16px;
    line-height: 1.72;
}


.bonus-intro-copy .bonus-intro-lead {
    color: #ffffff;

    font-size: 19px;
    font-weight: 800;
    line-height: 1.55;
}


.bonus-intro-media {
    overflow: hidden;

    border:
        1px solid
        rgba(255, 200, 61, 0.52);

    border-radius: 21px;
    background: #061327;

    box-shadow:
        0 18px 45px rgba(0, 0, 0, 0.38),
        0 0 25px rgba(255, 200, 61, 0.10);
}


.bonus-intro-media img {
    width: 100%;
    height: 300px;

    object-fit: cover;
    object-position: center;
}

/*=============================================
                 Introduction End
=============================================*/


/*=============================================
                  Bonus Tabs Start
=============================================*/

.bonus-tabs {
    display: grid;

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

    gap: 11px;
    margin-bottom: 16px;
}


.bonus-tab {
    min-height: 92px;
    padding: 15px 16px;

    border:
        1px solid
        rgba(19, 207, 255, 0.32);

    border-radius: 15px;

    background:
        linear-gradient(
            145deg,
            #081b38,
            #0a2b4e
        );

    color: #ffffff;

    text-align: left;
    cursor: pointer;

    box-shadow:
        0 12px 28px
        rgba(0, 0, 0, 0.25);

    transition:
        transform var(--transition-fast),
        border-color var(--transition-fast),
        box-shadow var(--transition-fast),
        background var(--transition-fast);
}


.bonus-tab span {
    display: block;

    color: #aac0d9;

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


.bonus-tab strong {
    display: block;
    margin-top: 6px;

    color: var(--blue-light);

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


.bonus-tab:hover,
.bonus-tab:focus-visible {
    transform: translateY(-3px);
    border-color: var(--blue-light);
    outline: none;
}


.bonus-tab.is-active {
    border-color: var(--gold-main);

    background:
        linear-gradient(
            145deg,
            #173650,
            #214c63
        );

    box-shadow:
        0 15px 35px rgba(0, 0, 0, 0.32),
        0 0 23px rgba(255, 200, 61, 0.19);
}


.bonus-tab.is-active span {
    color: #ffffff;
}


.bonus-tab.is-active strong {
    color: var(--gold-light);
}

/*=============================================
                   Bonus Tabs End
=============================================*/


/*=============================================
                  Bonus Panel Start
=============================================*/

.bonus-panel {
    padding: 30px;

    border:
        1px solid
        rgba(19, 207, 255, 0.20);

    border-radius: 22px;

    background:
        radial-gradient(
            circle at 94% 3%,
            rgba(19, 207, 255, 0.08),
            transparent 28%
        ),
        linear-gradient(
            145deg,
            #05152f,
            #082747
        );

    box-shadow:
        0 23px 56px
        rgba(0, 0, 0, 0.29);
}


.bonus-panel[hidden] {
    display: none !important;
}


.bonus-panel-header {
    display: grid;

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

    gap: 30px;
    align-items: start;

    padding-bottom: 23px;

    border-bottom:
        1px solid
        rgba(19, 207, 255, 0.13);
}


.bonus-panel-header-single {
    grid-template-columns: 1fr;
}


.bonus-panel h3,
.bonus-comparison h3 {
    margin: 0;

    color: #ffffff;

    font-size:
        clamp(
            31px,
            3vw,
            46px
        );

    font-weight: 900;
    line-height: 1.08;
    letter-spacing: -0.035em;
}


.bonus-panel-header p {
    max-width: 900px;
    margin: 12px 0 0;

    color: var(--text-secondary);

    font-size: 16px;
    line-height: 1.68;
}


.bonus-total {
    padding: 19px 16px;

    border:
        1px solid
        rgba(255, 200, 61, 0.44);

    border-radius: 16px;

    background:
        linear-gradient(
            145deg,
            rgba(255, 200, 61, 0.16),
            rgba(19, 207, 255, 0.07)
        );

    text-align: center;
}


.bonus-total strong {
    display: block;

    color: var(--gold-light);

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


.bonus-total span,
.bonus-total b {
    display: block;
    margin-top: 7px;
}

/*=============================================
                   Bonus Panel End
=============================================*/


/*=============================================
                  Offer Cards Start
=============================================*/

.bonus-offer-grid,
.weekly-offer-grid {
    display: grid;

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

    gap: 14px;
    margin-top: 24px;

    align-items: start;
}


.weekly-offer-grid {
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
}


.bonus-offer-card {
    min-width: 0;
    align-self: start;

    padding: 20px;

    border:
        1px solid
        rgba(19, 207, 255, 0.20);

    border-radius: 17px;

    background:
        linear-gradient(
            145deg,
            #081c39,
            #0a2c4d
        );

    box-shadow:
        0 14px 32px
        rgba(0, 0, 0, 0.24);
}


.bonus-offer-card:nth-child(even) {
    border-color:
        rgba(255, 200, 61, 0.25);
}


.bonus-offer-top {
    display: flex;

    align-items: flex-start;
    justify-content: space-between;

    gap: 10px;
    margin-bottom: 14px;
}


.bonus-number {
    color: var(--blue-light);

    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}


.bonus-code {
    padding: 5px 8px;
    flex-shrink: 0;

    border:
        1px solid
        rgba(255, 200, 61, 0.28);

    border-radius: 8px;

    background:
        rgba(255, 200, 61, 0.08);

    color: var(--gold-light);

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


.bonus-offer-card h4 {
    margin: 0;

    color: #ffffff;

    font-size: 25px;
    font-weight: 900;
    line-height: 1.18;
}


.bonus-fs {
    display: block;
    margin-top: 7px;

    color: var(--gold-light);

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


.bonus-game {
    min-height: 45px;
    margin: 7px 0 0;

    color: #b4c6dc;

    font-size: 13px;
    line-height: 1.5;
}

/*=============================================
                   Offer Cards End
=============================================*/


/*=============================================
                   Bonus Facts Start
=============================================*/

.bonus-facts {
    display: grid;

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

    gap: 8px;
    margin-top: 17px;
}


.bonus-facts div {
    padding: 10px;

    border:
        1px solid
        rgba(19, 207, 255, 0.10);

    border-radius: 10px;

    background:
        rgba(1, 10, 25, 0.43);
}


.bonus-facts span {
    display: block;

    color: #96aac2;

    font-size: 10px;
}


.bonus-facts strong {
    display: block;
    margin-top: 4px;

    color: #ffffff;

    font-size: 14px;
}

/*=============================================
                    Bonus Facts End
=============================================*/


/*=============================================
                   Toggle Start
=============================================*/

.bonus-details-toggle,
.bonus-rules-toggle {
    width: 100%;
    min-height: 54px;

    margin-top: 18px;
    padding: 0 13px 0 16px;

    display: flex;

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

    gap: 12px;

    border:
        1px solid
        rgba(19, 207, 255, 0.48);

    border-radius: 12px;

    background:
        linear-gradient(
            135deg,
            #0b3f68,
            #075a82
        );

    color: #ffffff;

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

    text-align: left;

    cursor: pointer;
}


.bonus-details-toggle i,
.bonus-rules-toggle i {
    width: 31px;
    height: 31px;

    display: grid;
    place-items: center;

    flex: 0 0 auto;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #ffe477,
            #ffc32d
        );

    color: #071020;

    font-size: 21px;
    font-style: normal;
    font-weight: 900;

    transition:
        transform var(--transition-fast);
}


.bonus-details-toggle.is-open i,
.bonus-rules-toggle.is-open i {
    transform: rotate(45deg);
}

/*=============================================
                    Toggle End
=============================================*/


/*=============================================
               Expanded Content Start
=============================================*/

.bonus-details-content,
.bonus-rules-content {
    margin-top: 9px;
    padding: 19px;

    border:
        1px solid
        rgba(19, 207, 255, 0.16);

    border-radius: 13px;

    background: #04142d;
}


.bonus-details-content[hidden],
.bonus-rules-content[hidden] {
    display: none !important;
}


.bonus-details-content h5 {
    margin: 0 0 12px;

    color: var(--gold-light);

    font-size: 17px;
}


.bonus-details-content p {
    color: #c3d1e2;

    font-size: 13px;
    line-height: 1.7;
}


.bonus-steps {
    margin: 13px 0 0;
    padding-left: 20px;

    color: #d8e3ef;

    font-size: 13px;
    line-height: 1.68;
}


.bonus-steps li + li {
    margin-top: 6px;
}

/*=============================================
                Expanded Content End
=============================================*/


/*=============================================
                 Free Spins Start
=============================================*/

.free-spin-levels {
    display: grid;

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

    gap: 8px;
    margin-top: 18px;
}


.free-spin-levels div {
    padding: 15px 10px;

    border:
        1px solid
        rgba(19, 207, 255, 0.14);

    border-radius: 11px;

    background:
        rgba(1, 10, 24, 0.46);

    text-align: center;
}


.free-spin-levels strong {
    display: block;

    color: var(--gold-light);

    font-size: 22px;
}


.free-spin-levels span,
.free-spin-levels small {
    display: block;
    margin-top: 4px;
}

/*=============================================
                  Free Spins End
=============================================*/


/*=============================================
                 Summary Grid Start
=============================================*/

.summary-grid {
    display: grid;

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

    gap: 10px;
    margin-top: 23px;
}


.summary-grid article {
    padding: 17px;

    border:
        1px solid
        rgba(19, 207, 255, 0.16);

    border-radius: 13px;

    background:
        linear-gradient(
            145deg,
            #081d39,
            #0a2948
        );
}


.summary-grid span {
    display: block;

    color: #9dafc4;

    font-size: 10px;
}


.summary-grid strong {
    display: block;
    margin-top: 5px;

    color: var(--gold-light);

    font-size: 20px;
}

/*=============================================
                  Summary Grid End
=============================================*/


/*=============================================
                  Comparison Start
=============================================*/

.bonus-comparison {
    margin-top: 31px;
    padding: 29px;

    border:
        1px solid
        rgba(19, 207, 255, 0.18);

    border-radius: 21px;

    background:
        linear-gradient(
            145deg,
            #05152f,
            #072642
        );
}


.bonus-comparison-lead {
    color: var(--text-secondary);

    font-size: 15px;
    line-height: 1.65;
}


.bonus-comparison-table-wrap {
    width: 100%;
    margin-top: 23px;

    overflow-x: auto;
}


.bonus-comparison-table {
    width: 100%;
    min-width: 900px;

    border-collapse: collapse;

    color: #d6e2ef;

    font-size: 13px;
}


.bonus-comparison-table th,
.bonus-comparison-table td {
    padding: 13px;

    text-align: left;

    border-bottom:
        1px solid
        rgba(120, 150, 185, 0.12);
}


.bonus-comparison-table th {
    color: var(--blue-light);
}

/*=============================================
                   Comparison End
=============================================*/


/*=============================================
                  Bonus Rules Start
=============================================*/

.bonus-rules {
    margin-top: 18px;
}


.bonus-rules-toggle {
    margin-top: 0;
}


.bonus-rules-toggle > span {
    display: block;
}


.bonus-rules-toggle strong {
    display: block;

    font-size: 15px;
}


.bonus-rules-toggle small {
    display: block;
    margin-top: 4px;

    color: #d6e8f7;

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


.bonus-rules-content {
    padding: 26px;
}


.bonus-rules-intro {
    max-width: 1050px;
}


.bonus-rules-intro h4 {
    margin: 0;

    color: #ffffff;

    font-size:
        clamp(
            27px,
            2.5vw,
            39px
        );

    font-weight: 900;
    line-height: 1.15;
}


.bonus-rules-intro p {
    margin: 13px 0 0;

    color: #c6d4e5;

    font-size: 15px;
    line-height: 1.75;
}


.bonus-rules-highlight-grid {
    display: grid;

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

    gap: 12px;

    margin-top: 26px;
}


.bonus-rules-highlight-grid article {
    padding: 20px;

    border:
        1px solid
        rgba(19, 207, 255, 0.18);

    border-radius: 14px;

    background:
        linear-gradient(
            145deg,
            #071c38,
            #092947
        );
}


.bonus-rules-highlight-grid span {
    display: block;

    color: var(--blue-light);

    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}


.bonus-rules-highlight-grid strong {
    display: block;
    margin-top: 7px;

    color: var(--gold-light);

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


.bonus-rules-highlight-grid p {
    margin: 10px 0 0;

    color: #b9c9da;

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


.bonus-rules-article {
    display: grid;

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

    gap: 13px;

    margin-top: 25px;
}


.bonus-rules-article section {
    padding: 21px;

    border:
        1px solid
        rgba(19, 207, 255, 0.13);

    border-radius: 14px;

    background:
        rgba(6, 26, 52, 0.76);
}


.bonus-rules-article h5 {
    margin: 0;

    color: var(--gold-light);

    font-size: 18px;
    font-weight: 900;
    line-height: 1.35;
}


.bonus-rules-article p {
    margin: 10px 0 0;

    color: #c0cfdf;

    font-size: 13px;
    line-height: 1.75;
}

/*=============================================
                   Bonus Rules End
=============================================*/


/*=============================================
                    Tablet Start
=============================================*/

@media (max-width: 1600px) {

    .bonus-navigation {
        left: -145px;
        width: 124px;
    }


    .bonus-navigation .section-switcher {
        width: 124px;
        padding: 6px;
    }


    .bonus-navigation .section-switcher button {
        min-height: 43px;

        padding: 0 6px;

        font-size: 12px;
    }

}


@media (max-width: 1220px) {

    .bonus-navigation {
        position: static;

        width: 100%;

        margin-bottom: 28px;

        pointer-events: auto;
    }


    .bonus-navigation .section-switcher {
        position: sticky;

        top:
            calc(
                var(--header-height) + 7px
            );

        width: 100%;
        padding: 7px;

        flex-direction: row;

        overflow-x: auto;

        z-index: 40;
    }


    .bonus-navigation .section-switcher button {
        min-width: 125px;
        min-height: 46px;

        flex: 0 0 auto;

        font-size: 13px;
    }


    .bonus-intro {
        grid-template-columns: 1fr;
    }


    .bonus-intro-media {
        width:
            min(
                430px,
                100%
            );
    }


    .bonus-offer-grid,
    .weekly-offer-grid {
        grid-template-columns: 1fr;
    }


    .bonus-panel-header {
        grid-template-columns: 1fr;
    }


    .bonus-rules-article {
        grid-template-columns: 1fr;
    }

}

/*=============================================
                     Tablet End
=============================================*/


/*=============================================
                     Mobile Start
=============================================*/

@media (max-width: 760px) {

    .bonus-section {
        padding:
            28px 12px 58px;
    }


    .bonus-container {
        width: 100%;
    }


    .bonus-intro h2 {
        font-size: 40px;
    }


    .bonus-intro-media {
        width: 100%;
    }


    .bonus-intro-media img {
        height: 230px;
    }


    .bonus-tabs {
        display: flex;

        overflow-x: auto;

        gap: 8px;
    }


    .bonus-tab {
        min-width: 175px;
    }


    .bonus-panel {
        padding:
            21px 15px;
    }


    .bonus-facts,
    .free-spin-levels,
    .summary-grid,
    .bonus-rules-highlight-grid {
        grid-template-columns: 1fr;
    }


    .bonus-comparison {
        padding:
            22px 15px;
    }


    .bonus-rules-content {
        padding:
            19px 15px;
    }

}

/*=============================================
                      Mobile End
=============================================*/


/*=============================================
                   Bonuses End
=============================================*/
/*=============================================
            Rewards & Loyalty Start
=============================================*/

.rewards-section {
    position: relative;

    padding:
        54px 20px 72px;

    overflow:
        visible;

    color:
        var(--text-main);

    background:
        radial-gradient(
            circle at 8% 10%,
            rgba(19, 207, 255, 0.11),
            transparent 29%
        ),
        radial-gradient(
            circle at 94% 15%,
            rgba(255, 200, 61, 0.09),
            transparent 27%
        ),
        linear-gradient(
            180deg,
            #020817 0%,
            #041226 48%,
            #020817 100%
        );
}


.rewards-section[hidden] {
    display:
        none !important;
}


.rewards-container {
    position:
        relative;

    width:
        min(
            calc(100% - 8px),
            1320px
        );

    margin:
        0 auto;
}


.rewards-shell {
    position:
        relative;
}


.rewards-main {
    width:
        100%;

    min-width:
        0;
}


/*=============================================
          Rewards Site Switcher Start
=============================================*/

.rewards-site-navigation {
    position:
        absolute;

    top:
        0;

    left:
        -168px;

    width:
        142px;

    z-index:
        60;

    pointer-events:
        none;
}


.rewards-site-switcher {
    width:
        142px;

    padding:
        7px;

    display:
        flex;

    flex-direction:
        column;

    gap:
        7px;

    border:
        1px solid
        rgba(19, 207, 255, 0.42);

    border-radius:
        17px;

    background:
        linear-gradient(
            160deg,
            rgba(4, 20, 43, 0.98),
            rgba(2, 11, 28, 0.98)
        );

    box-shadow:
        0 16px 38px
        rgba(0, 0, 0, 0.36),
        0 0 24px
        rgba(19, 207, 255, 0.10);

    pointer-events:
        auto;
}


.rewards-site-navigation.is-floating {
    position:
        fixed;

    top:
        50%;

    left:
        max(
            18px,
            calc(
                50% -
                660px -
                168px
            )
        );

    transform:
        translateY(-50%);
}


.rewards-site-navigation.is-at-bottom {
    position:
        absolute;

    top:
        auto;

    bottom:
        0;

    left:
        -168px;

    transform:
        none;
}


.rewards-site-switcher button {
    width:
        100%;

    min-height:
        46px;

    padding:
        0 8px;

    border:
        1px solid
        rgba(19, 207, 255, 0.76);

    border-radius:
        11px;

    background:
        linear-gradient(
            135deg,
            #07517d 0%,
            #087eaf 48%,
            #0ca8ce 100%
        );

    color:
        #ffffff;

    font-size:
        13px;

    font-weight:
        900;

    line-height:
        1.2;

    text-align:
        center;

    cursor:
        pointer;

    text-shadow:
        0 2px 7px
        rgba(0, 0, 0, 0.42);

    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, 0.08),
        0 0 15px
        rgba(19, 207, 255, 0.17);

    transition:
        transform var(--transition-fast),
        background var(--transition-fast),
        border-color var(--transition-fast),
        box-shadow var(--transition-fast),
        filter var(--transition-fast);
}


.rewards-site-switcher button:hover,
.rewards-site-switcher button:focus-visible {
    transform:
        translateX(3px);

    border-color:
        #91f2ff;

    background:
        linear-gradient(
            135deg,
            #086b99,
            #0aa4d0,
            #16d0ee
        );

    box-shadow:
        0 0 24px
        rgba(19, 207, 255, 0.40);

    filter:
        brightness(1.08);

    outline:
        none;
}


.rewards-site-switcher button.is-active {
    border-color:
        #ffe88a;

    background:
        linear-gradient(
            135deg,
            #ffe983 0%,
            #ffca3d 50%,
            #eea912 100%
        );

    color:
        #071020;

    text-shadow:
        none;

    box-shadow:
        0 0 25px
        rgba(255, 200, 61, 0.44),
        inset 0 1px 0
        rgba(255, 255, 255, 0.38);
}

/*=============================================
           Rewards Site Switcher End
=============================================*/


/*=============================================
             Rewards Intro Start
=============================================*/

.rewards-intro {
    display:
        grid;

    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(300px, 0.55fr);

    gap:
        42px;

    align-items:
        center;

    margin-bottom:
        27px;
}


.rewards-eyebrow,
.rewards-panel-kicker {
    display:
        block;

    margin-bottom:
        9px;

    color:
        var(--blue-light);

    font-size:
        12px;

    font-weight:
        900;

    letter-spacing:
        0.16em;

    text-transform:
        uppercase;
}


.rewards-intro h2 {
    margin:
        0;

    color:
        #ffffff;

    font-size:
        clamp(
            42px,
            4.7vw,
            67px
        );

    font-weight:
        900;

    line-height:
        1;

    letter-spacing:
        -0.045em;
}


.rewards-intro-copy p {
    max-width:
        840px;

    margin:
        12px 0 0;

    color:
        var(--text-secondary);

    font-size:
        15px;

    line-height:
        1.68;
}


.rewards-intro-copy .rewards-lead {
    color:
        #ffffff;

    font-size:
        18px;

    font-weight:
        800;

    line-height:
        1.53;
}


.rewards-intro-media {
    overflow:
        hidden;

    border:
        1px solid
        rgba(255, 200, 61, 0.52);

    border-radius:
        21px;

    background:
        #061327;

    box-shadow:
        0 18px 45px
        rgba(0, 0, 0, 0.38),
        0 0 25px
        rgba(255, 200, 61, 0.10);
}


.rewards-intro-media img {
    width:
        100%;

    height:
        285px;

    object-fit:
        cover;

    object-position:
        center;
}

/*=============================================
              Rewards Intro End
=============================================*/


/*=============================================
            Rewards Overview Start
=============================================*/

.rewards-overview {
    display:
        grid;

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

    gap:
        10px;

    margin-bottom:
        13px;
}


.rewards-overview article {
    padding:
        15px;

    border:
        1px solid
        rgba(19, 207, 255, 0.18);

    border-radius:
        13px;

    background:
        linear-gradient(
            145deg,
            #081d39,
            #0a2948
        );
}


.rewards-overview span {
    display:
        block;

    color:
        #a7b9ce;

    font-size:
        10px;

    font-weight:
        800;
}


.rewards-overview strong {
    display:
        block;

    margin-top:
        5px;

    color:
        var(--gold-light);

    font-size:
        22px;

    font-weight:
        900;
}

/*=============================================
             Rewards Overview End
=============================================*/


/*=============================================
              Rewards Tabs Start
=============================================*/

.rewards-tabs {
    display:
        grid;

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

    gap:
        10px;

    margin-bottom:
        14px;
}


.rewards-tab {
    min-height:
        76px;

    padding:
        13px 15px;

    border:
        1px solid
        rgba(19, 207, 255, 0.34);

    border-radius:
        14px;

    background:
        linear-gradient(
            145deg,
            #081b38,
            #0a2c4e
        );

    color:
        #ffffff;

    text-align:
        left;

    cursor:
        pointer;

    transition:
        transform var(--transition-fast),
        border-color var(--transition-fast),
        box-shadow var(--transition-fast),
        background var(--transition-fast);
}


.rewards-tab span {
    display:
        block;

    color:
        #afc0d4;

    font-size:
        11px;

    font-weight:
        800;
}


.rewards-tab strong {
    display:
        block;

    margin-top:
        5px;

    color:
        var(--blue-light);

    font-size:
        17px;

    font-weight:
        900;
}


.rewards-tab:hover,
.rewards-tab:focus-visible {
    transform:
        translateY(-3px);

    border-color:
        var(--blue-light);

    outline:
        none;
}


.rewards-tab.is-active {
    border-color:
        var(--gold-main);

    background:
        linear-gradient(
            145deg,
            #183750,
            #214c63
        );

    box-shadow:
        0 14px 34px
        rgba(0, 0, 0, 0.30),
        0 0 21px
        rgba(255, 200, 61, 0.18);
}


.rewards-tab.is-active strong {
    color:
        var(--gold-light);
}

/*=============================================
               Rewards Tabs End
=============================================*/


/*=============================================
             Rewards Panel Start
=============================================*/

.rewards-panel {
    padding:
        27px;

    border:
        1px solid
        rgba(19, 207, 255, 0.20);

    border-radius:
        21px;

    background:
        radial-gradient(
            circle at 94% 4%,
            rgba(19, 207, 255, 0.08),
            transparent 29%
        ),
        linear-gradient(
            145deg,
            #05152f,
            #082747
        );

    box-shadow:
        0 22px 54px
        rgba(0, 0, 0, 0.28);
}


.rewards-panel[hidden] {
    display:
        none !important;
}


.rewards-panel-header {
    display:
        grid;

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

    gap:
        28px;

    align-items:
        start;

    padding-bottom:
        21px;

    border-bottom:
        1px solid
        rgba(19, 207, 255, 0.13);
}


.rewards-panel h3 {
    margin:
        0;

    color:
        #ffffff;

    font-size:
        clamp(
            30px,
            2.8vw,
            44px
        );

    font-weight:
        900;

    line-height:
        1.08;

    letter-spacing:
        -0.035em;
}


.rewards-panel-header p {
    max-width:
        900px;

    margin:
        11px 0 0;

    color:
        var(--text-secondary);

    font-size:
        15px;

    line-height:
        1.65;
}


.rewards-highlight {
    padding:
        18px 15px;

    border:
        1px solid
        rgba(255, 200, 61, 0.43);

    border-radius:
        15px;

    background:
        linear-gradient(
            145deg,
            rgba(255, 200, 61, 0.16),
            rgba(19, 207, 255, 0.07)
        );

    text-align:
        center;
}


.rewards-highlight strong {
    display:
        block;

    color:
        var(--gold-light);

    font-size:
        27px;

    font-weight:
        900;
}


.rewards-highlight span {
    display:
        block;

    margin-top:
        6px;

    color:
        #c4d2e2;

    font-size:
        11px;

    font-weight:
        700;
}

/*=============================================
              Rewards Panel End
=============================================*/


/*=============================================
          Loyalty Highlights Start
=============================================*/

.loyalty-highlight-grid {
    display:
        grid;

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

    gap:
        9px;

    margin-top:
        22px;
}


.loyalty-highlight-grid article {
    padding:
        15px;

    border:
        1px solid
        rgba(19, 207, 255, 0.16);

    border-radius:
        12px;

    background:
        linear-gradient(
            145deg,
            #081d39,
            #0a2948
        );
}


.loyalty-highlight-grid span {
    color:
        var(--blue-light);

    font-size:
        10px;

    font-weight:
        900;

    text-transform:
        uppercase;
}


.loyalty-highlight-grid strong {
    display:
        block;

    margin-top:
        5px;

    color:
        #ffffff;

    font-size:
        20px;

    font-weight:
        900;
}


.loyalty-highlight-grid b {
    display:
        block;

    margin-top:
        4px;

    color:
        var(--gold-light);

    font-size:
        16px;
}


.loyalty-highlight-grid p {
    margin:
        7px 0 0;

    color:
        #aebfd2;

    font-size:
        11px;

    line-height:
        1.45;
}

/*=============================================
           Loyalty Highlights End
=============================================*/


/*=============================================
             Combo Rewards Start
=============================================*/

.combo-grid {
    display:
        grid;

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

    gap:
        9px;

    margin-top:
        22px;
}


.combo-grid article,
.combo-detail-grid article {
    padding:
        16px;

    border:
        1px solid
        rgba(19, 207, 255, 0.16);

    border-radius:
        12px;

    background:
        linear-gradient(
            145deg,
            #081d39,
            #0a2948
        );
}


.combo-grid span,
.combo-detail-grid span {
    display:
        block;

    color:
        var(--blue-light);

    font-size:
        10px;

    font-weight:
        900;
}


.combo-grid strong,
.combo-detail-grid strong {
    display:
        block;

    margin-top:
        6px;

    color:
        var(--gold-light);

    font-size:
        22px;

    font-weight:
        900;
}


.combo-grid p {
    margin:
        7px 0 0;

    color:
        #adbed1;

    font-size:
        11px;

    line-height:
        1.48;
}


.combo-detail-grid {
    display:
        grid;

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

    gap:
        9px;

    margin-top:
        20px;
}

/*=============================================
              Combo Rewards End
=============================================*/


/*=============================================
              Scratch Cards Start
=============================================*/

.scratch-grid {
    display:
        grid;

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

    gap:
        12px;

    margin-top:
        22px;
}


.scratch-grid > article {
    padding:
        19px;

    border:
        1px solid
        rgba(19, 207, 255, 0.18);

    border-radius:
        15px;

    background:
        linear-gradient(
            145deg,
            #081c39,
            #0a2c4e
        );
}


.scratch-tier {
    color:
        var(--blue-light);

    font-size:
        11px;

    font-weight:
        900;

    text-transform:
        uppercase;
}


.scratch-grid > article > strong {
    display:
        block;

    margin-top:
        7px;

    color:
        var(--gold-light);

    font-size:
        28px;

    font-weight:
        900;
}


.scratch-grid > article > span {
    display:
        block;

    color:
        #acbdd0;

    font-size:
        11px;
}


.scratch-grid dl {
    margin:
        16px 0 0;
}


.scratch-grid dl div {
    padding:
        8px 0;

    display:
        flex;

    justify-content:
        space-between;

    gap:
        14px;

    border-top:
        1px solid
        rgba(19, 207, 255, 0.10);
}


.scratch-grid dt {
    color:
        #9fb1c6;

    font-size:
        11px;
}


.scratch-grid dd {
    margin:
        0;

    color:
        #ffffff;

    font-size:
        12px;

    font-weight:
        900;
}


.scratch-progress-grid {
    display:
        grid;

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

    gap:
        10px;

    margin-top:
        20px;
}


.scratch-progress-grid article {
    padding:
        17px;

    border:
        1px solid
        rgba(19, 207, 255, 0.14);

    border-radius:
        12px;

    background:
        #071c38;
}


.scratch-progress-grid h5 {
    margin:
        0;

    color:
        var(--gold-light);

    font-size:
        16px;
}


.scratch-progress-grid p {
    margin:
        7px 0 0;

    color:
        #bccbdd;

    font-size:
        12px;

    line-height:
        1.55;
}

/*=============================================
               Scratch Cards End
=============================================*/


/*=============================================
               Rules Summary Start
=============================================*/

.rules-summary-grid {
    display:
        grid;

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

    gap:
        10px;

    margin-top:
        22px;
}


.rules-summary-grid article {
    padding:
        16px;

    border:
        1px solid
        rgba(19, 207, 255, 0.16);

    border-radius:
        12px;

    background:
        #081d39;
}


.rules-summary-grid span {
    display:
        block;

    color:
        #a6b8cd;

    font-size:
        10px;
}


.rules-summary-grid strong {
    display:
        block;

    margin-top:
        5px;

    color:
        var(--gold-light);

    font-size:
        20px;
}

/*=============================================
                Rules Summary End
=============================================*/


/*=============================================
              Detail Toggle Start
=============================================*/

.rewards-details-toggle {
    width:
        100%;

    min-height:
        54px;

    margin-top:
        18px;

    padding:
        0 13px 0 16px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        13px;

    border:
        1px solid
        rgba(19, 207, 255, 0.48);

    border-radius:
        12px;

    background:
        linear-gradient(
            135deg,
            #0b3f68,
            #075a82
        );

    color:
        #ffffff;

    text-align:
        left;

    cursor:
        pointer;
}


.rewards-details-toggle strong {
    display:
        block;

    font-size:
        13px;

    font-weight:
        900;
}


.rewards-details-toggle small {
    display:
        block;

    margin-top:
        3px;

    color:
        #c5d6e7;

    font-size:
        10px;
}


.rewards-details-toggle i {
    width:
        31px;

    height:
        31px;

    display:
        grid;

    place-items:
        center;

    flex:
        0 0 auto;

    border-radius:
        50%;

    background:
        linear-gradient(
            135deg,
            #ffe477,
            #ffc32d
        );

    color:
        #071020;

    font-size:
        21px;

    font-style:
        normal;

    font-weight:
        900;

    transition:
        transform var(--transition-fast);
}


.rewards-details-toggle.is-open i {
    transform:
        rotate(45deg);
}

/*=============================================
               Detail Toggle End
=============================================*/


/*=============================================
            Expanded Content Start
=============================================*/

.rewards-details-content {
    margin-top:
        9px;

    padding:
        23px;

    border:
        1px solid
        rgba(19, 207, 255, 0.16);

    border-radius:
        13px;

    background:
        #04142d;
}


.rewards-details-content[hidden] {
    display:
        none !important;
}


.rewards-description h4 {
    margin:
        0;

    color:
        #ffffff;

    font-size:
        clamp(
            25px,
            2.3vw,
            36px
        );

    font-weight:
        900;
}


.rewards-description p {
    max-width:
        1050px;

    margin:
        11px 0 0;

    color:
        #c2d0df;

    font-size:
        14px;

    line-height:
        1.73;
}


.loyalty-table-wrap {
    width:
        100%;

    margin-top:
        21px;

    overflow-x:
        auto;
}


.loyalty-table {
    width:
        100%;

    min-width:
        720px;

    border-collapse:
        collapse;

    color:
        #d7e3ef;

    font-size:
        12px;
}


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

    text-align:
        left;

    border-bottom:
        1px solid
        rgba(116, 149, 184, 0.12);
}


.loyalty-table th {
    color:
        var(--blue-light);

    font-size:
        10px;

    text-transform:
        uppercase;
}


.rewards-info-grid,
.reward-rules-grid {
    display:
        grid;

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

    gap:
        11px;

    margin-top:
        21px;
}


.rewards-info-grid article,
.reward-rules-grid section {
    padding:
        18px;

    border:
        1px solid
        rgba(19, 207, 255, 0.13);

    border-radius:
        12px;

    background:
        rgba(6, 27, 53, 0.74);
}


.rewards-info-grid h5,
.reward-rules-grid h5 {
    margin:
        0;

    color:
        var(--gold-light);

    font-size:
        16px;
}


.rewards-info-grid p,
.reward-rules-grid p {
    margin:
        8px 0 0;

    color:
        #bacadb;

    font-size:
        12px;

    line-height:
        1.65;
}

/*=============================================
             Expanded Content End
=============================================*/


/*=============================================
                  Tablet Start
=============================================*/

@media (max-width: 1220px) {

    .rewards-site-navigation,
    .rewards-site-navigation.is-floating,
    .rewards-site-navigation.is-at-bottom {
        position:
            static;

        width:
            100%;

        margin-bottom:
            27px;

        transform:
            none;

        pointer-events:
            auto;
    }


    .rewards-site-switcher {
        width:
            100%;

        flex-direction:
            row;

        overflow-x:
            auto;
    }


    .rewards-site-switcher button {
        min-width:
            125px;

        flex:
            0 0 auto;
    }


    .rewards-intro {
        grid-template-columns:
            1fr;
    }


    .rewards-intro-media {
        width:
            min(
                430px,
                100%
            );
    }


    .loyalty-highlight-grid,
    .combo-grid,
    .combo-detail-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }


    .rewards-panel-header {
        grid-template-columns:
            1fr;
    }


    .rewards-highlight {
        width:
            min(
                260px,
                100%
            );
    }

}

/*=============================================
                   Tablet End
=============================================*/


/*=============================================
                  Mobile Start
=============================================*/

@media (max-width: 760px) {

    .rewards-section {
        padding:
            28px 12px 58px;
    }


    .rewards-container {
        width:
            100%;
    }


    .rewards-intro h2 {
        font-size:
            40px;
    }


    .rewards-intro-media {
        width:
            100%;
    }


    .rewards-intro-media img {
        height:
            230px;
    }


    .rewards-overview {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .rewards-tabs {
        display:
            flex;

        overflow-x:
            auto;

        gap:
            8px;
    }


    .rewards-tab {
        min-width:
            175px;
    }


    .rewards-panel {
        padding:
            20px 15px;
    }


    .loyalty-highlight-grid,
    .combo-grid,
    .combo-detail-grid,
    .scratch-grid,
    .scratch-progress-grid,
    .rules-summary-grid,
    .rewards-info-grid,
    .reward-rules-grid {
        grid-template-columns:
            1fr;
    }


    .rewards-details-content {
        padding:
            18px 14px;
    }

}

/*=============================================
                   Mobile End
=============================================*/


/*=============================================
             Rewards & Loyalty End
=============================================*/
/*=============================================
                Tournaments Start
=============================================*/

.tournaments-section {
    position:
        relative;

    padding:
        54px 20px 72px;

    overflow:
        visible;

    color:
        var(--text-main);

    background:
        radial-gradient(
            circle at 7% 9%,
            rgba(19, 207, 255, 0.12),
            transparent 29%
        ),
        radial-gradient(
            circle at 93% 14%,
            rgba(255, 200, 61, 0.09),
            transparent 27%
        ),
        linear-gradient(
            180deg,
            #020817 0%,
            #041226 48%,
            #020817 100%
        );
}


.tournaments-section[hidden] {
    display:
        none !important;
}


.tournaments-container {
    position:
        relative;

    width:
        min(
            calc(100% - 8px),
            1320px
        );

    margin:
        0 auto;
}


.tournaments-shell {
    position:
        relative;
}


.tournaments-main {
    width:
        100%;

    min-width:
        0;
}


.tournaments-site-navigation {
    position:
        absolute;

    top:
        0;

    left:
        -168px;

    width:
        142px;

    z-index:
        60;

    pointer-events:
        none;
}


.tournaments-site-switcher {
    width:
        142px;

    padding:
        7px;

    display:
        flex;

    flex-direction:
        column;

    gap:
        7px;

    border:
        1px solid
        rgba(19, 207, 255, 0.42);

    border-radius:
        17px;

    background:
        linear-gradient(
            160deg,
            rgba(4, 20, 43, 0.98),
            rgba(2, 11, 28, 0.98)
        );

    box-shadow:
        0 16px 38px
        rgba(0, 0, 0, 0.36),
        0 0 24px
        rgba(19, 207, 255, 0.10);

    pointer-events:
        auto;
}


.tournaments-site-navigation.is-floating {
    position:
        fixed;

    top:
        50%;

    left:
        max(
            18px,
            calc(
                50% -
                660px -
                168px
            )
        );

    transform:
        translateY(-50%);
}


.tournaments-site-navigation.is-at-bottom {
    position:
        absolute;

    top:
        auto;

    bottom:
        0;

    left:
        -168px;

    transform:
        none;
}


.tournaments-site-switcher button {
    width:
        100%;

    min-height:
        46px;

    padding:
        0 8px;

    border:
        1px solid
        rgba(19, 207, 255, 0.76);

    border-radius:
        11px;

    background:
        linear-gradient(
            135deg,
            #07517d 0%,
            #087eaf 48%,
            #0ca8ce 100%
        );

    color:
        #ffffff;

    font-size:
        13px;

    font-weight:
        900;

    text-align:
        center;

    cursor:
        pointer;

    text-shadow:
        0 2px 7px
        rgba(0, 0, 0, 0.42);

    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, 0.08),
        0 0 15px
        rgba(19, 207, 255, 0.17);

    transition:
        transform var(--transition-fast),
        background var(--transition-fast),
        border-color var(--transition-fast),
        box-shadow var(--transition-fast),
        filter var(--transition-fast);
}


.tournaments-site-switcher button:hover,
.tournaments-site-switcher button:focus-visible {
    transform:
        translateX(3px);

    border-color:
        #91f2ff;

    background:
        linear-gradient(
            135deg,
            #086b99,
            #0aa4d0,
            #16d0ee
        );

    box-shadow:
        0 0 24px
        rgba(19, 207, 255, 0.40);

    filter:
        brightness(1.08);

    outline:
        none;
}


.tournaments-site-switcher button.is-active {
    border-color:
        #ffe88a;

    background:
        linear-gradient(
            135deg,
            #ffe983 0%,
            #ffca3d 50%,
            #eea912 100%
        );

    color:
        #071020;

    text-shadow:
        none;

    box-shadow:
        0 0 25px
        rgba(255, 200, 61, 0.44),
        inset 0 1px 0
        rgba(255, 255, 255, 0.38);
}


.tournaments-intro {
    display:
        grid;

    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(300px, 0.55fr);

    gap:
        42px;

    align-items:
        center;

    margin-bottom:
        26px;
}


.tournaments-eyebrow {
    display:
        block;

    margin-bottom:
        9px;

    color:
        var(--blue-light);

    font-size:
        12px;

    font-weight:
        900;

    letter-spacing:
        0.16em;

    text-transform:
        uppercase;
}


.tournaments-intro h2 {
    margin:
        0;

    color:
        #ffffff;

    font-size:
        clamp(
            42px,
            4.7vw,
            67px
        );

    font-weight:
        900;

    line-height:
        1;

    letter-spacing:
        -0.045em;
}


.tournaments-intro-copy p {
    max-width:
        840px;

    margin:
        12px 0 0;

    color:
        var(--text-secondary);

    font-size:
        15px;

    line-height:
        1.68;
}


.tournaments-intro-copy .tournaments-lead {
    color:
        #ffffff;

    font-size:
        18px;

    font-weight:
        800;
}


.tournaments-intro-media {
    overflow:
        hidden;

    border:
        1px solid
        rgba(255, 200, 61, 0.52);

    border-radius:
        21px;

    background:
        #061327;

    box-shadow:
        0 18px 45px
        rgba(0, 0, 0, 0.38),
        0 0 25px
        rgba(255, 200, 61, 0.10);
}


.tournaments-intro-media img {
    width:
        100%;

    height:
        285px;

    object-fit:
        cover;
}


.tournaments-overview {
    display:
        grid;

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

    gap:
        10px;

    margin-bottom:
        16px;
}


.tournaments-overview article {
    padding:
        15px;

    border:
        1px solid
        rgba(19, 207, 255, 0.18);

    border-radius:
        13px;

    background:
        linear-gradient(
            145deg,
            #081d39,
            #0a2948
        );
}


.tournaments-overview span {
    display:
        block;

    color:
        #a7b9ce;

    font-size:
        10px;
}


.tournaments-overview strong {
    display:
        block;

    margin-top:
        5px;

    color:
        var(--gold-light);

    font-size:
        22px;

    font-weight:
        900;
}


.tournament-grid {
    display:
        grid;

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

    gap:
        14px;

    align-items:
        start;
}


.tournament-card {
    overflow:
        hidden;

    border:
        1px solid
        rgba(19, 207, 255, 0.22);

    border-radius:
        18px;

    background:
        linear-gradient(
            145deg,
            #07172f,
            #092747
        );

    box-shadow:
        0 15px 34px
        rgba(0, 0, 0, 0.28);
}


.tournament-card-featured {
    border-color:
        rgba(255, 200, 61, 0.48);

    box-shadow:
        0 15px 34px
        rgba(0, 0, 0, 0.28),
        0 0 24px
        rgba(255, 200, 61, 0.12);
}


.tournament-art {
    position:
        relative;

    min-height:
        165px;

    display:
        flex;

    align-items:
        flex-end;

    padding:
        18px;

    overflow:
        hidden;

    background:
        radial-gradient(
            circle at 50% 30%,
            rgba(19, 207, 255, 0.28),
            transparent 37%
        ),
        linear-gradient(
            145deg,
            #0b1d3a,
            #132c54
        );
}


.tournament-art::before {
    content:
        "";

    position:
        absolute;

    inset:
        0;

    background:
        radial-gradient(
            circle at 75% 15%,
            rgba(255, 200, 61, 0.18),
            transparent 25%
        );
}


.tournament-art-haunted {
    background:
        radial-gradient(
            circle at 34% 25%,
            rgba(129, 75, 255, 0.38),
            transparent 33%
        ),
        linear-gradient(
            145deg,
            #07152e,
            #112f55
        );
}


.tournament-art-olympus {
    background:
        radial-gradient(
            circle at 60% 25%,
            rgba(87, 180, 255, 0.42),
            transparent 35%
        ),
        linear-gradient(
            145deg,
            #07152c,
            #143f63
        );
}


.tournament-art-spin {
    background:
        radial-gradient(
            circle at 68% 20%,
            rgba(92, 143, 255, 0.34),
            transparent 32%
        ),
        linear-gradient(
            145deg,
            #08172f,
            #263052
        );
}


.tournament-art-hell {
    background:
        radial-gradient(
            circle at 40% 26%,
            rgba(255, 120, 65, 0.27),
            transparent 32%
        ),
        linear-gradient(
            145deg,
            #101729,
            #253449
        );
}


.tournament-art-crown {
    background:
        radial-gradient(
            circle at 50% 26%,
            rgba(19, 207, 255, 0.30),
            transparent 34%
        ),
        linear-gradient(
            145deg,
            #091a31,
            #103a59
        );
}


.tournament-art-boom {
    background:
        radial-gradient(
            circle at 54% 26%,
            rgba(27, 201, 255, 0.36),
            transparent 34%
        ),
        linear-gradient(
            145deg,
            #07162f,
            #123959
        );
}


.tournament-status {
    position:
        absolute;

    top:
        14px;

    left:
        14px;

    padding:
        6px 9px;

    border:
        1px solid
        rgba(255, 200, 61, 0.35);

    border-radius:
        999px;

    background:
        rgba(3, 12, 27, 0.72);

    color:
        var(--gold-light);

    font-size:
        9px;

    font-weight:
        900;

    text-transform:
        uppercase;
}


.tournament-art-title {
    position:
        relative;

    z-index:
        2;

    color:
        #ffffff;

    font-size:
        25px;

    font-weight:
        900;

    line-height:
        1.05;

    text-shadow:
        0 5px 18px
        rgba(0, 0, 0, 0.48);
}


.tournament-card-body {
    padding:
        18px;
}


.tournament-label {
    color:
        var(--blue-light);

    font-size:
        10px;

    font-weight:
        900;

    text-transform:
        uppercase;
}


.tournament-pool {
    display:
        block;

    margin-top:
        5px;

    color:
        var(--gold-light);

    font-size:
        27px;

    font-weight:
        900;
}


.tournament-card-body > p {
    min-height:
        62px;

    margin:
        8px 0 0;

    color:
        #b8c8da;

    font-size:
        12px;

    line-height:
        1.55;
}


.tournament-details-toggle,
.tournament-guide-toggle {
    width:
        100%;

    min-height:
        51px;

    margin-top:
        16px;

    padding:
        0 12px 0 15px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        12px;

    border:
        1px solid
        rgba(19, 207, 255, 0.48);

    border-radius:
        11px;

    background:
        linear-gradient(
            135deg,
            #0b3f68,
            #075a82
        );

    color:
        #ffffff;

    font-size:
        12px;

    font-weight:
        900;

    text-align:
        left;

    cursor:
        pointer;
}


.tournament-details-toggle i,
.tournament-guide-toggle i {
    width:
        29px;

    height:
        29px;

    display:
        grid;

    place-items:
        center;

    flex:
        0 0 auto;

    border-radius:
        50%;

    background:
        linear-gradient(
            135deg,
            #ffe477,
            #ffc32d
        );

    color:
        #071020;

    font-size:
        20px;

    font-style:
        normal;

    font-weight:
        900;

    transition:
        transform var(--transition-fast);
}


.tournament-details-toggle.is-open i,
.tournament-guide-toggle.is-open i {
    transform:
        rotate(45deg);
}


.tournament-details-content,
.tournament-guide-content {
    margin-top:
        9px;

    padding:
        17px;

    border:
        1px solid
        rgba(19, 207, 255, 0.15);

    border-radius:
        12px;

    background:
        #04142d;
}


.tournament-details-content[hidden],
.tournament-guide-content[hidden] {
    display:
        none !important;
}


.tournament-details-content h4 {
    margin:
        0;

    color:
        var(--gold-light);

    font-size:
        17px;
}


.tournament-details-content p {
    margin:
        9px 0 0;

    color:
        #c2d0df;

    font-size:
        12px;

    line-height:
        1.65;
}


.tournament-detail-grid {
    display:
        grid;

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

    gap:
        8px;

    margin-top:
        14px;
}


.tournament-detail-grid article {
    padding:
        11px;

    border:
        1px solid
        rgba(19, 207, 255, 0.12);

    border-radius:
        9px;

    background:
        #071d39;
}


.tournament-detail-grid span {
    display:
        block;

    color:
        #9eb1c7;

    font-size:
        9px;
}


.tournament-detail-grid strong {
    display:
        block;

    margin-top:
        4px;

    color:
        #ffffff;

    font-size:
        12px;
}


.tournament-guide {
    margin-top:
        18px;
}


.tournament-guide-toggle {
    min-height:
        58px;
}


.tournament-guide-toggle strong,
.tournament-guide-toggle small {
    display:
        block;
}


.tournament-guide-toggle strong {
    font-size:
        14px;
}


.tournament-guide-toggle small {
    margin-top:
        3px;

    color:
        #c7d7e7;

    font-size:
        10px;
}


.tournament-guide-content {
    padding:
        24px;
}


.tournament-guide-intro h3 {
    margin:
        0;

    color:
        #ffffff;

    font-size:
        clamp(
            28px,
            2.6vw,
            40px
        );

    font-weight:
        900;
}


.tournament-guide-intro p {
    max-width:
        1060px;

    margin:
        11px 0 0;

    color:
        #c0cfdf;

    font-size:
        14px;

    line-height:
        1.72;
}


.tournament-guide-grid {
    display:
        grid;

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

    gap:
        11px;

    margin-top:
        22px;
}


.tournament-guide-grid section {
    padding:
        18px;

    border:
        1px solid
        rgba(19, 207, 255, 0.13);

    border-radius:
        12px;

    background:
        rgba(6, 27, 53, 0.74);
}


.tournament-guide-grid h4 {
    margin:
        0;

    color:
        var(--gold-light);

    font-size:
        16px;
}


.tournament-guide-grid p {
    margin:
        8px 0 0;

    color:
        #bacadb;

    font-size:
        12px;

    line-height:
        1.65;
}


@media (max-width: 1220px) {

    .tournaments-site-navigation,
    .tournaments-site-navigation.is-floating,
    .tournaments-site-navigation.is-at-bottom {
        position:
            static;

        width:
            100%;

        margin-bottom:
            27px;

        transform:
            none;

        pointer-events:
            auto;
    }


    .tournaments-site-switcher {
        width:
            100%;

        flex-direction:
            row;

        overflow-x:
            auto;
    }


    .tournaments-site-switcher button {
        min-width:
            125px;

        flex:
            0 0 auto;
    }


    .tournaments-intro {
        grid-template-columns:
            1fr;
    }


    .tournaments-intro-media {
        width:
            min(
                430px,
                100%
            );
    }


    .tournament-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


@media (max-width: 760px) {

    .tournaments-section {
        padding:
            28px 12px 58px;
    }


    .tournaments-container {
        width:
            100%;
    }


    .tournaments-intro h2 {
        font-size:
            40px;
    }


    .tournaments-intro-media {
        width:
            100%;
    }


    .tournaments-intro-media img {
        height:
            230px;
    }


    .tournaments-overview,
    .tournament-grid,
    .tournament-detail-grid,
    .tournament-guide-grid {
        grid-template-columns:
            1fr;
    }


    .tournament-card-body > p {
        min-height:
            0;
    }


    .tournament-guide-content {
        padding:
            18px 14px;
    }

}

/*=============================================
                 Tournaments End
=============================================*/
/*=============================================
                  Games Start
=============================================*/

.games-section {
    position: relative;
    padding: 54px 20px 76px;
    overflow: visible;
    color: var(--text-main);
    background:
        radial-gradient(
            circle at 7% 8%,
            rgba(19, 207, 255, 0.12),
            transparent 28%
        ),
        radial-gradient(
            circle at 93% 15%,
            rgba(255, 200, 61, 0.09),
            transparent 27%
        ),
        linear-gradient(
            180deg,
            #020817 0%,
            #041226 48%,
            #020817 100%
        );
}

.games-section[hidden] {
    display: none !important;
}

.games-container {
    position: relative;
    width: min(calc(100% - 8px), 1320px);
    margin: 0 auto;
}

.games-site-navigation {
    position: absolute;
    top: 0;
    left: -168px;
    width: 142px;
    z-index: 60;
    pointer-events: none;
}

.games-site-switcher {
    width: 142px;
    padding: 7px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    border: 1px solid rgba(19, 207, 255, 0.42);
    border-radius: 17px;
    background:
        linear-gradient(
            160deg,
            rgba(4, 20, 43, 0.98),
            rgba(2, 11, 28, 0.98)
        );
    box-shadow:
        0 16px 38px rgba(0, 0, 0, 0.36),
        0 0 24px rgba(19, 207, 255, 0.10);
    pointer-events: auto;
}

.games-site-navigation.is-floating {
    position: fixed;
    top: 50%;
    left:
        max(
            18px,
            calc(
                50% -
                660px -
                168px
            )
        );
    transform: translateY(-50%);
}

.games-site-navigation.is-at-bottom {
    position: absolute;
    top: auto;
    bottom: 0;
    left: -168px;
    transform: none;
}

.games-site-switcher button {
    width: 100%;
    min-height: 46px;
    padding: 0 8px;
    border: 1px solid rgba(19, 207, 255, 0.76);
    border-radius: 11px;
    background:
        linear-gradient(
            135deg,
            #07517d 0%,
            #087eaf 48%,
            #0ca8ce 100%
        );
    color: #ffffff;
    font-size: 13px;
    font-weight: 900;
    line-height: 1.2;
    text-align: center;
    cursor: pointer;
    text-shadow: 0 2px 7px rgba(0, 0, 0, 0.42);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 0 15px rgba(19, 207, 255, 0.17);
    transition:
        transform var(--transition-fast),
        background var(--transition-fast),
        border-color var(--transition-fast),
        box-shadow var(--transition-fast),
        filter var(--transition-fast);
}

.games-site-switcher button:hover,
.games-site-switcher button:focus-visible {
    transform: translateX(3px);
    border-color: #91f2ff;
    background:
        linear-gradient(
            135deg,
            #086b99,
            #0aa4d0,
            #16d0ee
        );
    box-shadow: 0 0 24px rgba(19, 207, 255, 0.40);
    filter: brightness(1.08);
    outline: none;
}

.games-site-switcher button.is-active {
    border-color: #ffe88a;
    background:
        linear-gradient(
            135deg,
            #ffe983 0%,
            #ffca3d 50%,
            #eea912 100%
        );
    color: #071020;
    text-shadow: none;
    box-shadow:
        0 0 25px rgba(255, 200, 61, 0.44),
        inset 0 1px 0 rgba(255, 255, 255, 0.38);
}

.games-intro {
    display: grid;
    grid-template-columns:
        minmax(0, 0.95fr)
        minmax(0, 1.05fr);
    gap: 40px;
    align-items: end;
    margin-bottom: 28px;
}

.games-kicker,
.games-panel-kicker {
    margin: 0 0 8px;
    color: var(--blue-light);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.games-intro h2 {
    max-width: 720px;
    margin: 0;
    color: #ffffff;
    font-size: clamp(42px, 4.4vw, 66px);
    font-weight: 900;
    line-height: 1.01;
    letter-spacing: -0.045em;
}

.games-intro-copy p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 15px;
    line-height: 1.7;
}

.games-intro-copy p + p {
    margin-top: 11px;
}

.games-intro-copy .games-intro-lead {
    color: #ffffff;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.58;
}

.games-navigation {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}

.games-navigation-button {
    min-height: 84px;
    padding: 14px;
    display: flex;
    align-items: center;
    gap: 11px;
    border: 1px solid rgba(19, 207, 255, 0.34);
    border-radius: 15px;
    background:
        linear-gradient(
            145deg,
            #071b37,
            #0b3155
        );
    color: #ffffff;
    text-align: left;
    cursor: pointer;
    box-shadow:
        0 11px 27px rgba(0, 0, 0, 0.25),
        0 0 16px rgba(19, 207, 255, 0.08);
    transition:
        transform var(--transition-fast),
        box-shadow var(--transition-fast),
        border-color var(--transition-fast),
        background var(--transition-fast),
        filter var(--transition-fast);
}

.games-navigation-button:hover,
.games-navigation-button:focus-visible {
    transform: translateY(-3px);
    border-color: #5fe8ff;
    background:
        linear-gradient(
            145deg,
            #0a345c,
            #087fae
        );
    box-shadow:
        0 14px 30px rgba(0, 0, 0, 0.31),
        0 0 22px rgba(19, 207, 255, 0.24);
    filter: brightness(1.06);
    outline: none;
}

.games-navigation-button.is-active {
    border-color: #ffe47a;
    background:
        linear-gradient(
            135deg,
            #ffe36d,
            #ffc632 54%,
            #e8a60e
        );
    color: #06101f;
    box-shadow:
        0 0 24px rgba(255, 200, 61, 0.38),
        0 13px 29px rgba(0, 0, 0, 0.30);
}

.games-navigation-button[data-games-target="icons"] {
    border-color: rgba(255, 200, 61, 0.42);
    background:
        linear-gradient(
            145deg,
            #16264a,
            #653a7c
        );
}

.games-navigation-button[data-games-target="icons"]:hover,
.games-navigation-button[data-games-target="icons"]:focus-visible {
    background:
        linear-gradient(
            145deg,
            #253d73,
            #9258aa
        );
    border-color: #f3cf79;
}

.games-navigation-button[data-games-target="icons"].is-active {
    background:
        linear-gradient(
            135deg,
            #ffe578,
            #ffbd26,
            #d98a09
        );
    color: #09101c;
}

.games-nav-icon {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    border-radius: 11px;
    background: rgba(19, 207, 255, 0.12);
    color: #64e7ff;
    font-size: 16px;
    font-weight: 900;
}

.games-navigation-button.is-active .games-nav-icon {
    background: rgba(7, 16, 32, 0.10);
    color: #071020;
}

.games-navigation-button strong {
    display: block;
    font-size: 14px;
    font-weight: 900;
    line-height: 1.18;
}

.games-navigation-button small {
    display: block;
    margin-top: 4px;
    color: inherit;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.32;
    opacity: 0.82;
}

.games-stage {
    --games-accent: #13cfff;
    --games-accent-dark: #087da9;
    --games-accent-soft: #0b2c4f;

    padding: 29px;
    border: 1px solid rgba(19, 207, 255, 0.20);
    border-radius: 22px;
    background:
        radial-gradient(
            circle at 94% 5%,
            color-mix(
                in srgb,
                var(--games-accent) 15%,
                transparent
            ),
            transparent 28%
        ),
        linear-gradient(
            145deg,
            #05152f,
            #082747
        );
    box-shadow: 0 23px 55px rgba(0, 0, 0, 0.28);
}

.games-stage[data-games-theme="slots"] {
    --games-accent: #13cfff;
    --games-accent-dark: #0b97bc;
    --games-accent-soft: #0a3150;
}

.games-stage[data-games-theme="live"] {
    --games-accent: #a66dff;
    --games-accent-dark: #8051cc;
    --games-accent-soft: #251f4d;
}

.games-stage[data-games-theme="tables"] {
    --games-accent: #45b2ff;
    --games-accent-dark: #267ab5;
    --games-accent-soft: #0e2d4d;
}

.games-stage[data-games-theme="instant"] {
    --games-accent: #8a8dff;
    --games-accent-dark: #676ad5;
    --games-accent-soft: #20274c;
}

.games-stage[data-games-theme="bingo"] {
    --games-accent: #ff77ba;
    --games-accent-dark: #c9508a;
    --games-accent-soft: #44223b;
}

.games-stage[data-games-theme="macau"] {
    --games-accent: #ff9e43;
    --games-accent-dark: #d97824;
    --games-accent-soft: #402a1b;
}

.games-stage[data-games-theme="virtual-sports"] {
    --games-accent: #55e7d0;
    --games-accent-dark: #27aa98;
    --games-accent-soft: #153b40;
}

.games-stage[data-games-theme="icons"] {
    --games-accent: #ffc83d;
    --games-accent-dark: #d99513;
    --games-accent-soft: #3a2b19;
}

.games-panel[hidden],
.games-subpanel[hidden],
.game-detail[hidden],
.games-guide[hidden] {
    display: none !important;
}

.games-panel-heading {
    display: grid;
    grid-template-columns:
        minmax(0, 0.82fr)
        minmax(0, 1.18fr);
    gap: 40px;
    align-items: start;
}

.games-panel-kicker {
    color: var(--games-accent);
}

.games-panel-heading h3 {
    max-width: 650px;
    margin: 0;
    color: #ffffff;
    font-size: clamp(31px, 3vw, 45px);
    font-weight: 900;
    line-height: 1.07;
    letter-spacing: -0.035em;
}

.games-panel-copy p {
    margin: 0;
    color: #b9c8d9;
    font-size: 14px;
    line-height: 1.7;
}

.games-panel-copy p + p {
    margin-top: 10px;
}

.games-panel-copy .games-panel-lead {
    color: #ffffff;
    font-size: 16px;
    font-weight: 750;
    line-height: 1.6;
}

.games-category-layout {
    display: grid;
    grid-template-columns:
        190px
        minmax(0, 1fr);
    gap: 17px;
    align-items: start;
    margin-top: 24px;
}

.games-subnav {
    display: grid;
    gap: 7px;
    padding: 8px;
    border: 1px solid rgba(19, 207, 255, 0.16);
    border-radius: 16px;
    background:
        linear-gradient(
            160deg,
            #031327,
            #071e38
        );
    box-shadow: 0 15px 34px rgba(0, 0, 0, 0.28);
}

.games-subnav-button {
    position: relative;
    min-height: 52px;
    padding: 10px 11px 10px 15px;
    border: 1px solid rgba(19, 207, 255, 0.20);
    border-radius: 10px;
    background:
        linear-gradient(
            135deg,
            #0a2948,
            #0c395c
        );
    color: #e8f4ff;
    font-size: 12px;
    font-weight: 900;
    line-height: 1.25;
    text-align: left;
    cursor: pointer;
    box-shadow: 0 5px 14px rgba(0, 0, 0, 0.18);
    transition:
        transform var(--transition-fast),
        background var(--transition-fast),
        border-color var(--transition-fast),
        box-shadow var(--transition-fast);
}

.games-subnav-button::before {
    content: "";
    position: absolute;
    left: 0;
    top: 9px;
    bottom: 9px;
    width: 4px;
    border-radius: 0 4px 4px 0;
    background: transparent;
}

.games-subnav-button:hover,
.games-subnav-button:focus-visible {
    transform: translateX(3px);
    border-color:
        color-mix(
            in srgb,
            var(--games-accent) 75%,
            transparent
        );
    background:
        color-mix(
            in srgb,
            var(--games-accent) 19%,
            #0b3153
        );
    outline: none;
}

.games-subnav-button.is-active {
    background:
        linear-gradient(
            135deg,
            color-mix(
                in srgb,
                var(--games-accent) 72%,
                #05304c
            ),
            var(--games-accent-dark)
        );
    border-color:
        color-mix(
            in srgb,
            var(--games-accent) 78%,
            #ffffff
        );
    color: #ffffff;
    box-shadow:
        0 0 19px
        color-mix(
            in srgb,
            var(--games-accent) 29%,
            transparent
        );
}

.games-subnav-button.is-active::before {
    background: #ffe071;
}

.games-subpanels {
    min-width: 0;
}

.games-subpanel-head {
    min-height: 70px;
    padding: 3px 2px 13px;
    display: grid;
    grid-template-columns:
        minmax(300px, 0.8fr)
        minmax(0, 1.2fr);
    gap: 27px;
    align-items: end;
    border-bottom:
        1px solid
        color-mix(
            in srgb,
            var(--games-accent) 24%,
            transparent
        );
}

.games-subpanel-head > div > strong {
    display: block;
    color: var(--games-accent);
    font-size: 21px;
    font-weight: 900;
}

.games-subpanel-head > div > p {
    margin: 5px 0 0;
    color: #c1cfde;
    font-size: 13px;
    line-height: 1.52;
}

.games-subpanel-head > span {
    display: block;
    color: #9fb0c4;
    font-size: 12px;
    line-height: 1.55;
    text-align: right;
}

.games-grid {
    display: grid;
    grid-template-columns:
        repeat(6, minmax(0, 1fr));
    gap: 9px;
    margin-top: 12px;
    align-items: start;
}

.game-card {
    min-width: 0;
    padding: 0;
    overflow: hidden;
    align-self: start;
    border:
        1px solid
        color-mix(
            in srgb,
            var(--games-accent) 28%,
            transparent
        );
    border-radius: 13px;
    background: #071a35;
    color: #ffffff;
    text-align: left;
    cursor: pointer;
    box-shadow:
        0 8px 21px
        rgba(0, 0, 0, 0.25);
    transition:
        transform var(--transition-fast),
        border-color var(--transition-fast),
        box-shadow var(--transition-fast),
        filter var(--transition-fast);
}

.game-card:hover,
.game-card:focus-visible {
    transform: translateY(-4px);
    border-color:
        color-mix(
            in srgb,
            var(--games-accent) 74%,
            #ffffff
        );
    box-shadow:
        0 14px 29px
        rgba(0, 0, 0, 0.34),
        0 0 18px
        color-mix(
            in srgb,
            var(--games-accent) 20%,
            transparent
        );
    filter: brightness(1.06);
    outline: none;
}

.game-card.is-active {
    transform: translateY(-4px);
    border-color: var(--games-accent);
    box-shadow:
        0 0 0 2px
        color-mix(
            in srgb,
            var(--games-accent) 32%,
            transparent
        ),
        0 14px 29px
        rgba(0, 0, 0, 0.32),
        0 0 22px
        color-mix(
            in srgb,
            var(--games-accent) 24%,
            transparent
        );
}

.game-card img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    background: var(--games-accent-soft);
}

.game-card-copy {
    min-height: 68px;
    padding: 10px 10px 11px;
    display: block;
    border-top: 3px solid var(--games-accent);
    background:
        linear-gradient(
            180deg,
            #091b36,
            #07152b
        );
}

.game-card-copy strong {
    display: block;
    color: #ffffff;
    font-size: 12px;
    font-weight: 900;
    line-height: 1.3;
}

.game-card-copy small {
    display: block;
    margin-top: 4px;
    color: var(--games-accent);
    font-size: 9px;
    font-weight: 800;
    line-height: 1.3;
}

.game-details {
    width: 100%;
}

.game-detail {
    margin-top: 13px;
    padding: 21px 23px;
    display: grid;
    grid-template-columns:
        minmax(200px, 0.34fr)
        minmax(0, 1.66fr);
    gap: 28px;
    border:
        1px solid
        color-mix(
            in srgb,
            var(--games-accent) 30%,
            transparent
        );
    border-radius: 15px;
    background:
        linear-gradient(
            135deg,
            color-mix(
                in srgb,
                var(--games-accent) 10%,
                #07182f
            ),
            #06162d
        );
    box-shadow:
        0 11px 26px
        rgba(0, 0, 0, 0.24);
}

.game-detail-title span {
    display: block;
    margin-bottom: 6px;
    color: var(--games-accent);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.game-detail-title h4 {
    margin: 0;
    color: #ffffff;
    font-size: 24px;
    font-weight: 900;
    line-height: 1.08;
}

.game-detail-copy p {
    margin: 0;
    color: #c2d0df;
    font-size: 14px;
    line-height: 1.7;
}

.game-detail-copy p + p {
    margin-top: 10px;
}

.games-guide-toggle {
    width: 100%;
    min-height: 55px;
    margin-top: 19px;
    padding: 0 15px 0 17px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    border:
        1px solid
        color-mix(
            in srgb,
            var(--games-accent) 48%,
            transparent
        );
    border-radius: 12px;
    background:
        linear-gradient(
            135deg,
            #0a3154,
            #084c71
        );
    color: #ffffff;
    font-size: 13px;
    font-weight: 900;
    text-align: left;
    cursor: pointer;
}

.games-guide-toggle:hover,
.games-guide-toggle:focus-visible {
    border-color: var(--games-accent);
    background:
        linear-gradient(
            135deg,
            color-mix(
                in srgb,
                var(--games-accent) 26%,
                #0a3154
            ),
            #086289
        );
    outline: none;
}

.games-guide-toggle span {
    width: 31px;
    height: 31px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    border-radius: 50%;
    background:
        linear-gradient(
            135deg,
            #ffe477,
            #ffc32d
        );
    color: #071020;
    font-size: 19px;
    font-weight: 900;
    transition: transform var(--transition-fast);
}

.games-guide-toggle.is-open span {
    transform: rotate(45deg);
}

.games-guide {
    margin-top: 9px;
    padding: 21px 23px;
    border:
        1px solid
        color-mix(
            in srgb,
            var(--games-accent) 20%,
            transparent
        );
    border-radius: 14px;
    background: #04142d;
}

.games-guide h4 {
    margin: 0;
    color: var(--games-accent);
    font-size: 22px;
    font-weight: 900;
}

.games-guide p {
    max-width: 1160px;
    margin: 9px 0 0;
    color: #c1cfdf;
    font-size: 14px;
    line-height: 1.7;
}

.games-closing {
    display: grid;
    grid-template-columns:
        minmax(0, 0.8fr)
        minmax(0, 1.2fr);
    gap: 48px;
    margin-top: 33px;
    padding: 28px 30px;
    border: 1px solid rgba(19, 207, 255, 0.18);
    border-radius: 18px;
    background:
        linear-gradient(
            135deg,
            #07172e 0%,
            #0a304c 100%
        );
    box-shadow:
        0 17px 38px
        rgba(0, 0, 0, 0.24);
}

.games-closing .games-kicker {
    color: var(--gold-light);
}

.games-closing h3 {
    max-width: 560px;
    margin: 0;
    color: #ffffff;
    font-size: clamp(29px, 3vw, 43px);
    font-weight: 900;
    line-height: 1.07;
}

.games-closing > div:last-child p {
    margin: 0;
    color: #c3d0df;
    font-size: 13px;
    line-height: 1.7;
}

.games-closing > div:last-child p + p {
    margin-top: 10px;
}

@media (max-width: 1220px) {

    .games-site-navigation,
    .games-site-navigation.is-floating,
    .games-site-navigation.is-at-bottom {
        position: static;
        width: 100%;
        margin-bottom: 27px;
        transform: none;
        pointer-events: auto;
    }

    .games-site-switcher {
        width: 100%;
        flex-direction: row;
        overflow-x: auto;
    }

    .games-site-switcher button {
        min-width: 125px;
        flex: 0 0 auto;
    }

    .games-intro,
    .games-panel-heading,
    .games-subpanel-head {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .games-subpanel-head > span {
        text-align: left;
    }

    .games-navigation {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

    .games-category-layout {
        grid-template-columns:
            180px
            minmax(0, 1fr);
    }

    .games-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

    .games-closing {
        grid-template-columns: 1fr;
        gap: 17px;
    }

}

@media (max-width: 760px) {

    .games-section {
        padding: 28px 12px 60px;
    }

    .games-container {
        width: 100%;
    }

    .games-intro h2 {
        font-size:
            clamp(
                38px,
                10vw,
                50px
            );
    }

    .games-navigation {
        display: flex;
        overflow-x: auto;
        gap: 8px;
    }

    .games-navigation-button {
        min-width: 190px;
        min-height: 80px;
        flex: 0 0 auto;
    }

    .games-stage {
        padding: 20px 14px;
        border-radius: 18px;
    }

    .games-category-layout {
        grid-template-columns: 1fr;
    }

    .games-subnav {
        display: flex;
        overflow-x: auto;
        gap: 7px;
    }

    .games-subnav-button {
        min-width: 150px;
        flex: 0 0 auto;
    }

    .games-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .game-detail {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 18px 16px;
    }

    .games-guide {
        padding: 19px 16px;
    }

    .games-closing {
        padding: 23px 18px;
    }

}

@media (max-width: 460px) {

    .games-navigation-button {
        min-width: 165px;
    }

    .games-grid {
        grid-template-columns: 1fr 1fr;
    }

}

/*=============================================
                   Games End
=============================================*/

/*=============================================
                  Payments Start
=============================================*/

.payments-section {
    position: relative;
    padding: 54px 20px 76px;
    overflow: visible;
    color: var(--text-main);
    background:
        radial-gradient(circle at 8% 8%, rgba(19, 207, 255, 0.12), transparent 29%),
        radial-gradient(circle at 93% 15%, rgba(255, 200, 61, 0.09), transparent 27%),
        linear-gradient(180deg, #020817 0%, #041226 48%, #020817 100%);
}

.payments-section[hidden] {
    display: none !important;
}

.payments-container {
    position: relative;
    width: min(calc(100% - 8px), 1320px);
    margin: 0 auto;
}

.payments-site-navigation {
    position: absolute;
    top: 0;
    left: -168px;
    width: 142px;
    z-index: 60;
    pointer-events: none;
}

.payments-site-switcher {
    width: 142px;
    padding: 7px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    border: 1px solid rgba(19, 207, 255, 0.42);
    border-radius: 17px;
    background: linear-gradient(160deg, rgba(4, 20, 43, 0.98), rgba(2, 11, 28, 0.98));
    box-shadow: 0 16px 38px rgba(0, 0, 0, 0.36), 0 0 24px rgba(19, 207, 255, 0.10);
    pointer-events: auto;
}

.payments-site-navigation.is-floating {
    position: fixed;
    top: 50%;
    left: max(18px, calc(50% - 660px - 168px));
    transform: translateY(-50%);
}

.payments-site-navigation.is-at-bottom {
    position: absolute;
    top: auto;
    bottom: 0;
    left: -168px;
    transform: none;
}

.payments-site-switcher button {
    width: 100%;
    min-height: 46px;
    padding: 0 8px;
    border: 1px solid rgba(19, 207, 255, 0.76);
    border-radius: 11px;
    background: linear-gradient(135deg, #07517d, #087eaf 48%, #0ca8ce);
    color: #ffffff;
    font-size: 13px;
    font-weight: 900;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 0 15px rgba(19, 207, 255, 0.17);
    transition: transform var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
}

.payments-site-switcher button:hover,
.payments-site-switcher button:focus-visible {
    transform: translateX(3px);
    background: linear-gradient(135deg, #086b99, #0aa4d0, #16d0ee);
    box-shadow: 0 0 24px rgba(19, 207, 255, 0.40);
    outline: none;
}

.payments-site-switcher button.is-active {
    border-color: #ffe88a;
    background: linear-gradient(135deg, #ffe983, #ffca3d 50%, #eea912);
    color: #071020;
    box-shadow: 0 0 25px rgba(255, 200, 61, 0.44);
}

.payments-intro {
    display: grid;
    grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
    gap: 46px;
    align-items: start;
}

.payments-kicker,
.payments-panel-kicker {
    margin: 0 0 9px;
    color: var(--blue-light);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.payments-intro h2 {
    max-width: 720px;
    margin: 0;
    color: #ffffff;
    font-size: clamp(42px, 4.35vw, 65px);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.045em;
}

.payments-intro-copy p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 15px;
    line-height: 1.7;
}

.payments-intro-copy p + p {
    margin-top: 10px;
}

.payments-intro-copy .payments-lead {
    color: #ffffff;
    font-size: 18px;
    font-weight: 800;
}

.payments-highlights {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-top: 27px;
}

.payments-highlights article {
    min-height: 96px;
    padding: 15px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 13px;
    align-items: center;
    border: 1px solid rgba(19, 207, 255, 0.18);
    border-radius: 14px;
    background: linear-gradient(145deg, #081d39, #0a2948);
}

.payments-highlight-value {
    min-width: 68px;
    height: 48px;
    padding: 0 9px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: linear-gradient(135deg, #0a9dc6, #075580);
    color: #ffffff;
    font-size: 17px;
    font-weight: 900;
}

.payments-highlights strong {
    display: block;
    color: #ffffff;
    font-size: 14px;
    font-weight: 900;
}

.payments-highlights p {
    margin: 4px 0 0;
    color: #9fb2c8;
    font-size: 10px;
    line-height: 1.4;
}

.payments-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
    margin-top: 22px;
    padding: 7px;
    border: 1px solid rgba(19, 207, 255, 0.20);
    border-radius: 17px;
    background: #031329;
}

.payments-tab {
    min-height: 72px;
    padding: 12px 15px;
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid rgba(19, 207, 255, 0.22);
    border-radius: 12px;
    background: linear-gradient(145deg, #071e3b, #0a3152);
    color: #ffffff;
    text-align: left;
    cursor: pointer;
    transition: transform var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast);
}

.payments-tab:hover,
.payments-tab:focus-visible {
    transform: translateY(-2px);
    border-color: #68e9ff;
    outline: none;
}

.payments-tab.is-active {
    border-color: #ffe47a;
    background: linear-gradient(135deg, #ffe36d, #ffc632 54%, #e8a60e);
    color: #071020;
}

.payments-tab-icon {
    width: 39px;
    height: 39px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    border-radius: 11px;
    background: rgba(19, 207, 255, 0.13);
    color: #62e9ff;
    font-size: 19px;
    font-weight: 900;
}

.payments-tab.is-active .payments-tab-icon {
    background: rgba(7, 16, 32, 0.10);
    color: #071020;
}

.payments-tab strong {
    display: block;
    font-size: 14px;
    font-weight: 900;
}

.payments-tab small {
    display: block;
    margin-top: 3px;
    font-size: 10px;
    line-height: 1.35;
    opacity: 0.75;
}

.payments-panel {
    margin-top: 13px;
    padding: 29px;
    border: 1px solid rgba(19, 207, 255, 0.20);
    border-radius: 21px;
    background:
        radial-gradient(circle at 95% 3%, rgba(19, 207, 255, 0.08), transparent 28%),
        linear-gradient(145deg, #05152f, #082747);
    box-shadow: 0 21px 50px rgba(0, 0, 0, 0.28);
}

.payments-panel[hidden] {
    display: none !important;
}

.payments-panel-heading {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(320px, 1.1fr);
    gap: 42px;
    align-items: start;
    margin-bottom: 19px;
}

.payments-panel-heading h3 {
    max-width: 680px;
    margin: 0;
    color: #ffffff;
    font-size: clamp(31px, 3vw, 44px);
    font-weight: 900;
    line-height: 1.06;
    letter-spacing: -0.035em;
}

.payments-panel-heading > div:last-child p {
    margin: 0;
    color: #b9c9da;
    font-size: 14px;
    line-height: 1.67;
}

.payments-panel-heading > div:last-child p + p {
    margin-top: 9px;
}

.payment-methods-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 11px;
    align-items: start;
}

.payment-method-card {
    width: 100%;
    padding: 18px;
    align-self: start;
    border: 1px solid rgba(19, 207, 255, 0.18);
    border-radius: 15px;
    background: linear-gradient(145deg, #081c39, #0a2c4d);
    box-shadow: 0 10px 27px rgba(0, 0, 0, 0.23);
    transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.payment-method-card:hover {
    transform: translateY(-3px);
    border-color: rgba(19, 207, 255, 0.50);
    box-shadow: 0 15px 31px rgba(0, 0, 0, 0.32);
}

.payment-method-card.is-open {
    border-color: var(--gold-main);
    box-shadow: 0 0 0 2px rgba(255, 200, 61, 0.10), 0 17px 34px rgba(0, 0, 0, 0.30);
}

.payment-method-brand {
    display: flex;
    align-items: center;
    gap: 13px;
}

.payment-method-logo {
    width: 82px;
    height: 52px;
    padding: 7px 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: 10px;
    background: #ffffff;
}

.payment-method-logo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.payment-method-brand h4 {
    margin: 0;
    color: #ffffff;
    font-size: 19px;
    font-weight: 900;
}

.payment-method-brand > div:last-child > span {
    display: block;
    margin-top: 3px;
    color: var(--blue-light);
    font-size: 10px;
    font-weight: 800;
}

.payment-method-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    margin-top: 15px;
}

.payment-method-meta > span {
    min-width: 0;
    padding: 9px;
    border-radius: 9px;
    background: #041630;
}

.payment-method-meta small {
    display: block;
    color: #849ab3;
    font-size: 8px;
    font-weight: 900;
    text-transform: uppercase;
}

.payment-method-meta strong {
    display: block;
    margin-top: 4px;
    color: #ffffff;
    font-size: 11px;
    line-height: 1.3;
}

.payment-method-card > p {
    margin: 14px 0 0;
    color: #bac9d9;
    font-size: 12px;
    line-height: 1.62;
}

.payment-method-toggle {
    width: 100%;
    min-height: 46px;
    margin-top: 15px;
    padding: 0 0 0 13px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 13px;
    border: 1px solid rgba(19, 207, 255, 0.34);
    border-radius: 10px;
    background: #07365a;
    color: #ffffff;
    font-size: 11px;
    font-weight: 900;
    text-align: left;
    cursor: pointer;
}

.payment-method-toggle span {
    width: 30px;
    height: 30px;
    margin-right: 8px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, #ffe477, #ffc32d);
    color: #071020;
    font-size: 18px;
    transition: transform var(--transition-fast);
}

.payment-method-toggle.is-open span {
    transform: rotate(45deg);
}

.payment-method-details {
    padding-top: 12px;
}

.payment-method-details[hidden] {
    display: none !important;
}

.payment-method-details h5 {
    margin: 0;
    color: var(--gold-light);
    font-size: 15px;
}

.payment-method-details p {
    margin: 8px 0 0;
    color: #b9c9da;
    font-size: 12px;
    line-height: 1.65;
}

.withdrawal-process {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.withdrawal-process article {
    padding: 17px;
    border: 1px solid rgba(19, 207, 255, 0.16);
    border-radius: 13px;
    background: linear-gradient(145deg, #081d39, #0a2948);
}

.withdrawal-process article > span {
    display: block;
    color: var(--gold-light);
    font-size: 23px;
    font-weight: 900;
}

.withdrawal-process strong {
    display: block;
    margin-top: 7px;
    color: #ffffff;
    font-size: 15px;
}

.withdrawal-process p {
    margin: 7px 0 0;
    color: #aebfd2;
    font-size: 11px;
    line-height: 1.55;
}

.payment-security-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.payment-security-grid article {
    min-height: 185px;
    padding: 18px;
    border: 1px solid rgba(19, 207, 255, 0.16);
    border-radius: 13px;
    background: linear-gradient(145deg, #081d39, #0a2948);
}

.payment-security-number {
    display: block;
    color: var(--gold-light);
    font-size: 21px;
    font-weight: 900;
}

.payment-security-grid h4 {
    margin: 10px 0 0;
    color: #ffffff;
    font-size: 15px;
    line-height: 1.3;
}

.payment-security-grid p {
    margin: 7px 0 0;
    color: #afc0d3;
    font-size: 11px;
    line-height: 1.58;
}

.payments-guide-toggle {
    width: 100%;
    min-height: 57px;
    margin-top: 18px;
    padding: 0 13px 0 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    border: 1px solid rgba(19, 207, 255, 0.47);
    border-radius: 12px;
    background: linear-gradient(135deg, #0b3f68, #075a82);
    color: #ffffff;
    text-align: left;
    cursor: pointer;
}

.payments-guide-toggle strong,
.payments-guide-toggle small {
    display: block;
}

.payments-guide-toggle strong {
    font-size: 13px;
}

.payments-guide-toggle small {
    margin-top: 3px;
    color: #c6d8e8;
    font-size: 10px;
}

.payments-guide-toggle i {
    width: 31px;
    height: 31px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, #ffe477, #ffc32d);
    color: #071020;
    font-size: 20px;
    font-style: normal;
    font-weight: 900;
    transition: transform var(--transition-fast);
}

.payments-guide-toggle.is-open i {
    transform: rotate(45deg);
}

.payments-guide-content {
    margin-top: 9px;
    padding: 22px;
    border: 1px solid rgba(19, 207, 255, 0.15);
    border-radius: 14px;
    background: #04142d;
}

.payments-guide-content[hidden] {
    display: none !important;
}

.payments-guide-content h4 {
    margin: 0;
    color: var(--gold-light);
    font-size: 21px;
}

.payments-guide-content p {
    max-width: 1100px;
    margin: 9px 0 0;
    color: #c1cfdf;
    font-size: 13px;
    line-height: 1.7;
}

@media (max-width: 1220px) {
    .payments-site-navigation,
    .payments-site-navigation.is-floating,
    .payments-site-navigation.is-at-bottom {
        position: static;
        width: 100%;
        margin-bottom: 27px;
        transform: none;
        pointer-events: auto;
    }

    .payments-site-switcher {
        width: 100%;
        flex-direction: row;
        overflow-x: auto;
    }

    .payments-site-switcher button {
        min-width: 125px;
        flex: 0 0 auto;
    }

    .payments-intro,
    .payments-panel-heading {
        grid-template-columns: 1fr;
        gap: 17px;
    }

    .payment-methods-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .withdrawal-process,
    .payment-security-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .payments-section {
        padding: 28px 12px 60px;
    }

    .payments-container {
        width: 100%;
    }

    .payments-intro h2 {
        font-size: clamp(38px, 10vw, 50px);
    }

    .payments-highlights {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .payments-tabs {
        display: flex;
        overflow-x: auto;
    }

    .payments-tab {
        min-width: 190px;
        flex: 0 0 auto;
    }

    .payments-panel {
        padding: 20px 15px;
    }

    .payment-methods-grid,
    .withdrawal-process,
    .payment-security-grid {
        grid-template-columns: 1fr;
    }

    .payment-method-meta {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/*=============================================
                   Payments End
=============================================*/
/*=============================================
                  FAQ Start
=============================================*/

.faq-section {
    position: relative;
    padding: 70px 20px 80px;
    overflow: hidden;
    color: var(--text-main);
    background:
        radial-gradient(
            circle at 90% 8%,
            rgba(255, 200, 61, 0.08),
            transparent 28%
        ),
        radial-gradient(
            circle at 7% 92%,
            rgba(19, 207, 255, 0.10),
            transparent 30%
        ),
        linear-gradient(
            180deg,
            #020817 0%,
            #041226 52%,
            #020817 100%
        );
}

.faq-container {
    width: min(100%, 1240px);
    margin: 0 auto;
}

.faq-intro {
    display: grid;
    grid-template-columns:
        minmax(0, 0.88fr)
        minmax(0, 1.12fr);
    gap: 58px;
    align-items: start;
    margin-bottom: 32px;
}

.faq-kicker {
    display: block;
    margin: 0 0 9px;
    color: var(--blue-light);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.faq-intro h2 {
    max-width: 610px;
    margin: 0;
    color: #ffffff;
    font-size: clamp(40px, 4.5vw, 62px);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.04em;
}

.faq-intro-copy p {
    margin: 0;
    color: #b8c8da;
    font-size: 13px;
    line-height: 1.72;
}

.faq-intro-copy p + p {
    margin-top: 10px;
}

.faq-intro-copy .faq-lead {
    color: #ffffff;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.65;
}

.faq-grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 14px;
    align-items: start;
}

.faq-column {
    display: flex;
    flex-direction: column;
    gap: 11px;
    min-width: 0;
}

.faq-item {
    width: 100%;
    align-self: flex-start;
    overflow: hidden;
    border: 1px solid rgba(19, 207, 255, 0.17);
    border-radius: 14px;
    background:
        linear-gradient(
            145deg,
            #071a34,
            #092846
        );
    box-shadow:
        0 9px 24px
        rgba(0, 0, 0, 0.22);
    transition:
        border-color var(--transition-fast),
        box-shadow var(--transition-fast),
        background var(--transition-fast);
}

.faq-item:hover {
    border-color:
        rgba(19, 207, 255, 0.38);
}

.faq-item.is-open {
    border-color:
        rgba(255, 200, 61, 0.62);
    background:
        linear-gradient(
            145deg,
            #09203c,
            #0c3150
        );
    box-shadow:
        0 0 24px
        rgba(255, 200, 61, 0.09),
        0 14px 31px
        rgba(0, 0, 0, 0.28);
}

.faq-toggle {
    width: 100%;
    min-height: 94px;
    padding: 17px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 19px;
    border: 0;
    background: transparent;
    color: #ffffff;
    text-align: left;
    cursor: pointer;
}

.faq-toggle > span {
    display: block;
    min-width: 0;
}

.faq-toggle small {
    display: block;
    margin-bottom: 6px;
    color: var(--blue-light);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.faq-item.is-open .faq-toggle small {
    color: var(--gold-light);
}

.faq-toggle strong {
    display: block;
    color: #ffffff;
    font-size: 16px;
    font-weight: 900;
    line-height: 1.3;
}

.faq-toggle i {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    border-radius: 50%;
    background:
        linear-gradient(
            135deg,
            #0c94c1,
            #07577e
        );
    color: #ffffff;
    font-size: 19px;
    font-style: normal;
    font-weight: 900;
    box-shadow:
        0 0 15px
        rgba(19, 207, 255, 0.20);
    transition:
        transform var(--transition-fast),
        background var(--transition-fast),
        box-shadow var(--transition-fast);
}

.faq-toggle[aria-expanded="true"] i {
    transform: rotate(45deg);
    background:
        linear-gradient(
            135deg,
            #ffe477,
            #ffc32d
        );
    color: #071020;
    box-shadow:
        0 0 18px
        rgba(255, 200, 61, 0.34);
}

.faq-panel {
    width: 100%;
}

.faq-panel[hidden] {
    display: none !important;
}

.faq-answer {
    padding: 0 18px 19px;
}

.faq-answer::before {
    content: "";
    display: block;
    height: 1px;
    margin-bottom: 14px;
    background:
        linear-gradient(
            90deg,
            rgba(19, 207, 255, 0.30),
            rgba(255, 200, 61, 0.18),
            transparent
        );
}

.faq-answer p {
    margin: 0;
    color: #bdccdc;
    font-size: 12px;
    line-height: 1.75;
}

.faq-answer p + p {
    margin-top: 10px;
}

.faq-closing {
    display: grid;
    grid-template-columns:
        minmax(0, 0.78fr)
        minmax(0, 1.22fr);
    gap: 55px;
    margin-top: 38px;
    padding: 27px 29px;
    border: 1px solid rgba(19, 207, 255, 0.16);
    border-radius: 17px;
    background:
        linear-gradient(
            135deg,
            #07172e,
            #0a304c
        );
    box-shadow:
        0 16px 37px
        rgba(0, 0, 0, 0.23);
}

.faq-closing h3 {
    max-width: 520px;
    margin: 0;
    color: #ffffff;
    font-size: clamp(29px, 3vw, 42px);
    font-weight: 900;
    line-height: 1.05;
}

.faq-closing > p {
    margin: 0;
    color: #bccbda;
    font-size: 12px;
    line-height: 1.76;
}

@media (max-width: 950px) {

    .faq-intro {
        grid-template-columns: 1fr;
        gap: 19px;
    }

    .faq-grid {
        grid-template-columns: 1fr;
    }

    .faq-closing {
        grid-template-columns: 1fr;
        gap: 18px;
    }

}

@media (max-width: 700px) {

    .faq-section {
        padding: 54px 14px 64px;
    }

    .faq-intro h2 {
        font-size:
            clamp(
                37px,
                10vw,
                49px
            );
    }

    .faq-toggle {
        min-height: 88px;
        padding: 15px;
    }

    .faq-toggle strong {
        font-size: 15px;
    }

    .faq-answer {
        padding: 0 15px 17px;
    }

    .faq-closing {
        padding: 22px 17px;
    }

}

/*=============================================
                   FAQ End
=============================================*/
/*=============================================
                  Footer Start
=============================================*/

.site-footer {
    position: relative;
    padding: 58px 20px 25px;
    overflow: hidden;
    color: #dbe9f7;
    background:
        radial-gradient(
            circle at 8% 0%,
            rgba(19, 207, 255, 0.10),
            transparent 28%
        ),
        radial-gradient(
            circle at 92% 100%,
            rgba(255, 200, 61, 0.08),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            #041226 0%,
            #031020 52%,
            #020817 100%
        );
    border-top:
        1px solid
        rgba(255, 200, 61, 0.18);
}

.site-footer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: min(100%, 1320px);
    height: 1px;
    transform: translateX(-50%);
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(19, 207, 255, 0.48),
            rgba(255, 200, 61, 0.46),
            transparent
        );
    pointer-events: none;
}

.footer-container {
    position: relative;
    z-index: 1;
    width: min(100%, 1320px);
    margin: 0 auto;
}

.footer-main {
    display: grid;
    grid-template-columns:
        minmax(320px, 1.35fr)
        minmax(145px, 0.50fr)
        minmax(175px, 0.62fr)
        minmax(175px, 0.58fr);
    gap: 45px;
    align-items: start;
}

.footer-brand {
    max-width: 450px;
}

.footer-logo {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.footer-logo-mark {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 2px solid rgba(19, 207, 255, 0.88);
    border-radius: 50%;
    background:
        linear-gradient(
            145deg,
            #0c1730 0%,
            #064f92 48%,
            #0dd9ff 100%
        );
    color: #ffffff;
    font-size: 24px;
    font-weight: 900;
    font-style: italic;
    line-height: 1;
    box-shadow:
        0 0 24px
        rgba(19, 207, 255, 0.28);
}

.footer-logo-text {
    display: flex;
    flex-direction: column;
    line-height: 1;
}

.footer-logo-text strong {
    color: #ffffff;
    font-size: 18px;
    font-weight: 900;
    letter-spacing: 0.075em;
}

.footer-logo-text small {
    margin-top: 6px;
    color: var(--gold-main);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.34em;
}

.footer-brand p {
    max-width: 440px;
    margin: 13px 0 0;
    color: rgba(197, 213, 232, 0.73);
    font-size: 13px;
    line-height: 1.72;
}

.footer-brand .footer-brand-lead {
    margin-top: 18px;
    color: rgba(244, 249, 255, 0.92);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.68;
}

.footer-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 18px;
}

.footer-badges span {
    padding: 7px 11px;
    border:
        1px solid
        rgba(19, 207, 255, 0.20);
    border-radius: 999px;
    background:
        rgba(19, 207, 255, 0.055);
    color: var(--blue-light);
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
}

.footer-badges span:first-child {
    border-color:
        rgba(255, 200, 61, 0.32);
    background:
        rgba(255, 200, 61, 0.07);
    color: var(--gold-light);
}

.footer-links h3 {
    margin: 3px 0 17px;
    color: #ffffff;
    font-size: 18px;
    font-weight: 900;
    line-height: 1.1;
}

.footer-links ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.footer-links li {
    margin: 0;
}

.footer-links li + li {
    margin-top: 9px;
}

.footer-links a {
    position: relative;
    display: inline-block;
    color: rgba(205, 221, 237, 0.72);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.45;
    transition:
        color var(--transition-fast),
        transform var(--transition-fast),
        text-shadow var(--transition-fast);
}

.footer-links a::before {
    content: "";
    position: absolute;
    left: -11px;
    top: 50%;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--blue-main);
    opacity: 0;
    transform:
        translateY(-50%)
        scale(0.5);
    box-shadow:
        0 0 8px
        rgba(19, 207, 255, 0.75);
    transition:
        opacity var(--transition-fast),
        transform var(--transition-fast);
}

.footer-links a:hover,
.footer-links a:focus-visible {
    color: var(--blue-light);
    transform: translateX(4px);
    text-shadow:
        0 0 12px
        rgba(19, 207, 255, 0.24);
    outline: none;
}

.footer-links a:hover::before,
.footer-links a:focus-visible::before {
    opacity: 1;
    transform:
        translateY(-50%)
        scale(1);
}

.footer-legal a:hover,
.footer-legal a:focus-visible {
    color: var(--gold-light);
    text-shadow:
        0 0 12px
        rgba(255, 200, 61, 0.20);
}

.footer-legal a::before {
    background: var(--gold-main);
    box-shadow:
        0 0 8px
        rgba(255, 200, 61, 0.72);
}

.footer-responsible {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 18px;
    align-items: center;
    margin-top: 39px;
    padding: 20px 0;
    border-top:
        1px solid
        rgba(19, 207, 255, 0.10);
    border-bottom:
        1px solid
        rgba(255, 200, 61, 0.10);
}

.footer-age {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border: 2px solid var(--gold-main);
    border-radius: 50%;
    background:
        rgba(255, 200, 61, 0.05);
    color: var(--gold-light);
    font-size: 15px;
    font-weight: 900;
    line-height: 1;
    box-shadow:
        0 0 18px
        rgba(255, 200, 61, 0.12);
}

.footer-responsible-content strong {
    display: block;
    color: #ffffff;
    font-size: 14px;
    font-weight: 900;
}

.footer-responsible-content p {
    max-width: 1050px;
    margin: 5px 0 0;
    color: rgba(197, 213, 232, 0.68);
    font-size: 12px;
    line-height: 1.65;
}

.footer-responsible-content a {
    color: var(--gold-light);
    font-weight: 800;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: color var(--transition-fast);
}

.footer-responsible-content a:hover,
.footer-responsible-content a:focus-visible {
    color: #fff0ad;
}

.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    padding-top: 19px;
}

.footer-bottom p {
    margin: 0;
    color: rgba(190, 207, 225, 0.52);
    font-size: 11px;
    line-height: 1.5;
}

.footer-bottom-note {
    text-align: right;
}

@media (max-width: 1050px) {

    .footer-main {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
        gap: 34px 42px;
    }

    .footer-brand {
        max-width: none;
    }

    .footer-brand p {
        max-width: 580px;
    }

}

@media (max-width: 620px) {

    .site-footer {
        padding: 43px 14px 22px;
    }

    .footer-main {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .footer-brand p {
        max-width: none;
        font-size: 13px;
    }

    .footer-links h3 {
        margin-bottom: 12px;
        font-size: 17px;
    }

    .footer-links li + li {
        margin-top: 8px;
    }

    .footer-links a {
        font-size: 13px;
    }

    .footer-responsible {
        align-items: start;
    }

    .footer-responsible-content p {
        font-size: 11px;
    }

    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .footer-bottom-note {
        text-align: left;
    }

}

/*=============================================
                   Footer End
=============================================*/








/*=============================================
                Legal Pages Start
=============================================*/

.legal-page {
    position: relative;

    min-height:
        calc(
            100vh -
            var(--header-height)
        );

    margin-top:
        var(--header-height);

    padding:
        74px 20px 88px;

    overflow:
        hidden;

    color:
        #354147;

    background:
        radial-gradient(
            circle at 88% 5%,
            rgba(178, 144, 82, 0.12),
            transparent 27%
        ),
        radial-gradient(
            circle at 8% 92%,
            rgba(87, 123, 138, 0.10),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            #e8e4dc 0%,
            #dce1df 50%,
            #ebe6dd 100%
        );
}


.legal-page::before {
    content:
        "";

    position:
        absolute;

    top:
        0;

    left:
        0;

    width:
        100%;

    height:
        1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(170, 128, 61, 0.38),
            transparent
        );

    pointer-events:
        none;
}


.legal-page-container {
    position:
        relative;

    z-index:
        1;

    width:
        min(
            100%,
            1040px
        );

    margin:
        0 auto;
}


/* Legal Header */

.legal-page-head {
    max-width:
        900px;

    margin:
        0 auto 42px;

    padding-bottom:
        34px;

    border-bottom:
        1px solid
        rgba(60, 78, 85, 0.13);
}


.legal-page-kicker {
    display:
        block;

    margin:
        0 0 10px;

    color:
        #936c2f;

    font-size:
        10px;

    font-weight:
        900;

    letter-spacing:
        0.18em;

    text-transform:
        uppercase;
}


.legal-page-head h1 {
    max-width:
        800px;

    margin:
        0;

    color:
        #28383f;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(
            43px,
            5.2vw,
            70px
        );

    line-height:
        0.98;

    letter-spacing:
        -0.045em;
}


.legal-page-intro {
    max-width:
        850px;

    margin:
        22px 0 0;

    color:
        #506168;

    font-size:
        15px;

    font-weight:
        600;

    line-height:
        1.75;
}


.legal-last-updated {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        5px;

    margin:
        19px 0 0;

    padding:
        7px 11px;

    border:
        1px solid
        rgba(137, 101, 47, 0.16);

    border-radius:
        999px;

    background:
        rgba(235, 225, 207, 0.54);

    color:
        #75654d;

    font-size:
        9px;

    font-weight:
        800;
}


.legal-last-updated span {
    color:
        #8e672d;
}


/* Legal Content */

.legal-content {
    width:
        min(
            100%,
            900px
        );

    margin:
        0 auto;
}


.legal-section {
    position:
        relative;

    padding:
        27px 29px;

    border:
        1px solid
        rgba(60, 78, 85, 0.11);

    border-radius:
        16px;

    background:
        rgba(245, 244, 239, 0.64);

    box-shadow:
        0 9px 25px
        rgba(49, 65, 70, 0.045);
}


.legal-section + .legal-section {
    margin-top:
        12px;
}


.legal-section::before {
    content:
        "";

    position:
        absolute;

    top:
        0;

    left:
        28px;

    width:
        46px;

    height:
        2px;

    border-radius:
        999px;

    background:
        linear-gradient(
            90deg,
            #9b7132,
            #c49a51
        );
}


.legal-section h2 {
    max-width:
        760px;

    margin:
        0;

    color:
        #2e3e44;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(
            23px,
            2.2vw,
            30px
        );

    line-height:
        1.12;

    letter-spacing:
        -0.015em;
}


.legal-section p {
    margin:
        13px 0 0;

    color:
        #596a70;

    font-size:
        12px;

    line-height:
        1.78;
}


.legal-section p + p {
    margin-top:
        10px;
}


/* Legal Internal Links */

.legal-section a {
    color:
        #8e6427;

    font-weight:
        800;

    text-decoration:
        underline;

    text-decoration-thickness:
        1px;

    text-underline-offset:
        3px;

    transition:
        color 0.2s ease;
}


.legal-section a:hover,
.legal-section a:focus-visible {
    color:
        #bf1731;
}


/* Current Legal Page in Footer */

.footer-links a[aria-current="page"],
.footer-bottom-links a[aria-current="page"] {
    color:
        #e3c381;

    font-weight:
        800;
}


/* Legal Tablet */

@media (max-width: 900px) {

    .legal-page {
        padding:
            64px 18px 76px;
    }


    .legal-page-container {
        width:
            min(
                100%,
                920px
            );
    }


    .legal-page-head,
    .legal-content {
        max-width:
            100%;
    }

}


/* Legal Mobile */

@media (max-width: 620px) {

    .legal-page {
        padding:
            50px 14px 64px;
    }


    .legal-page-head {
        margin-bottom:
            28px;

        padding-bottom:
            27px;
    }


    .legal-page-head h1 {
        font-size:
            clamp(
                38px,
                11vw,
                50px
            );
    }


    .legal-page-intro {
        margin-top:
            18px;

        font-size:
            14px;

        line-height:
            1.68;
    }


    .legal-section {
        padding:
            24px 18px 22px;

        border-radius:
            14px;
    }


    .legal-section::before {
        left:
            18px;
    }


    .legal-section h2 {
        font-size:
            23px;
    }


    .legal-section p {
        font-size:
            12px;

        line-height:
            1.72;
    }

}

/*=============================================
                 Legal Pages End
=============================================*/