:root {
        --bgColor: #0c111c;
        --text: #fff;
        --bgModal: #121a29;
        --borderModal: #465063;
        --topLine: #212f44;
        --lines: #475774;
        --btnDark: #192232;
        --blue: #2b90fe;
        --blueDark: #2b91fe56;
        --lightBtn: #232c43;
        --secondary: #192232;
        --textSecondary: #677a9d;
        --textDark: #677a9d;
        --line: #273140;
        --iconColor: #475774;
        --slotHover: #10131fbf;
        --accent: #1a2534;
        --blueSecond: #1e6cfd;
    }

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

    body {
        background-color: var(--bgColor);
        color: var(--text);
        font-family: 'Inter', sans-serif;
        overflow-x: hidden;
        line-height: 1.6;
    }

    a { color: #fff; text-decoration: none; }
    img { vertical-align: middle; max-width: 100%; height: auto; }

    ::-webkit-scrollbar { width: 2px; }
    ::-webkit-scrollbar-thumb { background: #3f4e69; border-radius: 2px; }
    ::-webkit-scrollbar-track { background: #0c111c; }

    .container {
        margin: auto;
        min-height: 100vh;
        overflow-x: clip;
        padding-top: 15px;
        position: relative;
    }

    @media (max-width: 700px) {
        .container { padding-top: 0; }
    }

    .content {
        margin: auto;
        max-width: 100%;
        padding: 0 20px 50px;
        width: 1440px;
    }

    @media (max-width: 1440px) {
        .content { max-width: 100vw !important; }
    }

    @media (max-width: 600px) {
        .content { padding: 0 10px; }
    }

    .header {
        align-items: center;
        backdrop-filter: blur(0);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 0 20px;
        position: relative;
        top: 0;
        transition: transform .1s ease;
        z-index: 29;
    }

    @media (max-width: 600px) {
        .header { padding: 0 10px; }
    }

    .header .wrapper {
        display: grid;
        grid-template-columns: auto 1fr;
        padding: 13px 0;
        align-items: center;
        max-width: 1400px;
        width: 100%;
    }

    .header .logo { cursor: pointer; }
    .header .logo img { width: 150px; height: 40px; }

    .header .flexWrap {
        display: flex;
        justify-content: flex-end;
        position: relative;
        gap: 10px;
        align-items: center;
    }

    .header .search {
        align-items: center;
        color: var(--blue);
        display: flex;
        height: 50px;
        justify-content: center;
        width: 50px;
        background: rgba(25, 33, 54, 0.765);
        border-radius: 15px;
        cursor: pointer;
        transition: background-color .15s ease;
    }

    .header .search:hover { background-color: #192136; }
    .header .search svg { width: 20px; transition: transform .3s ease; }
    .header .search:hover svg { transform: scale(1.2); }

    .header .anAuth {
        display: flex;
        justify-content: flex-end;
        gap: 10px;
    }

    .header .anAuth .unAuthBtn {
        padding: 0 50px;
    }

    .newMainStyle {
        align-items: center;
        background-color: rgba(25, 33, 54, 0.765);
        border-radius: 15px;
        color: #fff;
        cursor: pointer;
        display: flex;
        justify-content: center;
        position: relative;
        transition: background-color .15s ease, transform .15s ease;
        height: 50px;
        font-weight: 900;
        text-shadow: 0 3px 5px #0a0d114d;
        padding: 0 30px;
    }

    .newMainStyle.blue {
        background: linear-gradient(149deg, #41c6ff 8.4%, #1a64fc 80.38%);
        box-shadow: 0 0 25px 0 #3a7cffab;
    }

    .newMainStyle:hover { background-color: #192136; transform: translateY(-1px); }

    @media (max-width: 767px) {
        .header .anAuth .unAuthBtn { padding: 0 20px !important; }
        .header .anAuth .newMainStyle { font-size: 14px; height: 44px; }
    }
    @media (max-width: 575px) {
        .header .anAuth .unAuthBtn { padding: 0 16px !important; }
        .header .anAuth .newMainStyle { font-size: 13px; height: 44px; }
        .header .flexWrap { gap: 8px !important; }
        .header .logo img { width: 120px; height: 32px; }
    }
    @media (max-width: 450px) {
        .header .anAuth .unAuthBtn { padding: 0 14px !important; }
        .header .anAuth .newMainStyle { font-size: 12px; height: 44px; }
    }
    @media (max-width: 360px) {
        .header .anAuth .newMainStyle:not(.blue) { display: none; }
    }

    .update-date {
        text-align: center;
        font-size: 13px;
        color: #475774;
        margin: 20px 0;
    }
    .update-date span {
        color: #41c6ff;
        font-weight: 700;
    }

    .navRibbon {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        justify-content: center;
        margin: 20px 0 0;
    }
    .navRibbon a {
        background: var(--btnDark);
        border: 1px solid var(--line);
        border-radius: 10px;
        color: var(--textSecondary);
        font-size: 13px;
        font-weight: 600;
        padding: 8px 16px;
        transition: .15s ease;
    }
    .navRibbon a:hover { color: #fff; border-color: #41c6ff; }
    @media (max-width: 600px) {
        .navRibbon { gap: 8px; }
        .navRibbon a { padding: 12px 16px; min-height: 44px; display: flex; align-items: center; box-sizing: border-box; }
    }

    .promoStrip {
        background: var(--bgModal);
        border: 1px solid var(--line);
        border-radius: 20px;
        margin-top: 25px;
        padding: 25px 30px;
    }
    .promoStrip .stripHead { align-items: center; display: flex; justify-content: space-between; margin-bottom: 15px; }
    .promoStrip .stripHead h2 { font-size: 20px; margin: 0; }
    .promoStrip .stripHead a { color: #41c6ff; font-size: 13px; font-weight: 700; white-space: nowrap; }
    .promoTable { width: 100%; border-collapse: collapse; font-size: 14px; }
    .promoTable th, .promoTable td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--line); }
    .promoTable th { color: #677a9d; font-weight: 600; font-size: 12px; text-transform: uppercase; }
    .promoTable code { background: rgba(65,198,255,.12); color: #41c6ff; padding: 3px 8px; border-radius: 6px; font-weight: 700; }
    .badgeOk { background: rgba(76,232,146,.12); color: #4ce892; border-radius: 6px; padding: 3px 8px; font-size: 12px; font-weight: 700; }
    @media (max-width: 767px) {
        .promoStrip { padding: 18px; }
        .promoTable { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
        .promoTable th, .promoTable td { white-space: nowrap; }
    }

    .banerBody { padding-top: 40px; position: relative; }
    @media (max-width: 1400px) { .banerBody { padding-top: 0; } }

    .banner {
        background-position: 50%;
        background-repeat: no-repeat;
        background-size: cover;
        position: relative;
        width: 100%;
        border-radius: 25px;
    }
    .banner:after { content: " "; display: block; padding-top: 430px; width: 100%; }
    @media (max-width: 900px) { .banner:after { padding-top: 260px; } }
    @media (max-width: 600px) { .banner:after { padding-top: 210px; } }

    .banner.bonusBanner { background: #0000; border-radius: 25px; }
    .banner.bonusBanner .inside {
        bottom: 10%; display: flex; flex-direction: column; justify-content: space-between;
        left: 7%; position: absolute; right: 7%; top: 10%;
    }
    .banner.bonusBanner .inside .tagLine {
        color: #41c6ff; font-size: 15px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; margin-bottom: 8px;
    }
    .banner.bonusBanner .inside .bannerH1.green {
        color: #4ce892; font-size: 96px; font-weight: 900; letter-spacing: -1.15px;
        line-height: 95%; padding: 0; text-shadow: 0 2.5px 49px #4ce89296; text-transform: uppercase;
    }
    .banner.bonusBanner .inside h2 {
        font-size: 40px; font-style: normal; font-weight: 900; letter-spacing: -.492px;
        line-height: 115%; text-transform: uppercase;
    }
    .banner.bonusBanner .inside h2 b { display: block; font-size: 54px; }
    .banner.bonusBanner .inside .info { display: flex; gap: 15px; }
    .banner.bonusBanner .inside .info .iblock { border-radius: 15px; }
    .banner.bonusBanner .inside .info .iblock h3 {
        color: #4ce892; font-size: 34px; font-style: normal; font-weight: 900;
        letter-spacing: -.418px; text-shadow: 0 2.596px 49.315px #4ce89296; text-transform: uppercase;
    }
    .banner.bonusBanner .inside .info .iblock.col .underCol {
        font-size: 16px; font-weight: 900; letter-spacing: -.175px;
        line-height: 97.8%; max-width: 150px; text-transform: uppercase;
    }
    .banner.bonusBanner .mainImg {
        bottom: 0;
        height: 470px;
        position: absolute;
        right: 25%;
        object-fit: contain;
    }

    .banner.bonusBanner .back {
        background: #192232; border-radius: 25px; height: 100%; left: 0;
        overflow: hidden; position: absolute; top: 0; width: 100%; z-index: -1;
    }
    .banner.bonusBanner .backImg {
        height: 100%;
        object-fit: cover;
        transform: scale(1.01);
        width: 100%;
    }

    @media (max-width: 1100px) { .banner.bonusBanner .mainImg { right: 10% !important; } }
    @media (max-width: 900px) {
        .banner.bonusBanner .mainImg {
            bottom: 0 !important;
            height: 300px !important;
            top: auto !important;
            transform: none !important;
        }
        .banner.bonusBanner .inside .bannerH1.green { font-size: 54px !important; }
        .banner.bonusBanner .inside h2 { font-size: 26px !important; }
        .banner.bonusBanner .inside h2 b { font-size: 32px !important; }
        .banner.bonusBanner .inside .info .iblock h3 { font-size: 1.3rem !important; }
        .banner.bonusBanner .inside .info .iblock .underCol { font-size: 12px !important; max-width: 95px !important; }
    }
    @media (max-width: 700px) { .banner.bonusBanner .mainImg { height: 270px !important; } }
    @media (max-width: 600px) {
        .banner.bonusBanner .mainImg { height: 230px !important; right: 0 !important; }
        .banner.bonusBanner .inside { left: 3% !important; right: 3% !important; }
        .banner.bonusBanner .inside .bannerH1.green { font-size: 46px !important; }
        .banner.bonusBanner .inside h2 { font-size: 19px !important; }
        .banner.bonusBanner .inside h2 b { font-size: 22px !important; }
        .banner.bonusBanner .inside .info { gap: 10px; }
        .banner.bonusBanner .inside .info .iblock h3 { font-size: 1rem !important; }
    }

    .jackpotBlock { display: grid; position: relative; width: 100%; }
    .jackpotBlock.start {
        align-items: center; background: url(images/jackpot-bg-desktop.webp);
        background-repeat: no-repeat; background-size: cover; border-radius: 25px;
        box-shadow: 14px 0 12px 0 #0a0e1b40; display: grid; grid-template-columns: 200px 1fr auto;
        height: 180px; margin: 40px auto; max-width: 1300px; padding: 0 35px;
        transition: transform .3s ease; cursor: pointer;
    }
    .jackpotBlock.start:before {
        border: 7px solid #3b54d080; border-radius: 25px; content: " ";
        height: calc(100% - 8px); left: 0; position: absolute; top: 0; width: calc(100% - 8px); z-index: 1;
    }
    @media (max-width: 1100px) {
        .jackpotBlock.start:before { border: 4px solid #3b54d080; border-radius: 20px; }
        .jackpotBlock.start {
            background: url(images/jackpot-bg-mobile.webp); background-repeat: no-repeat;
            background-size: cover; grid-template-columns: 1fr; height: auto !important; padding-bottom: 15px;
        }
    }
    @media (max-width: 600px) { .jackpotBlock.start { margin-top: 20px; } }

    .jackpotBlock.start .centerImage { height: 100%; margin: auto; position: relative; width: 100%; z-index: 2; }
    .jackpotBlock.start .centerImage .jacpotCompilation {
        bottom: -30px; left: -30px; object-fit: contain; position: absolute; width: 200px;
    }
    @media (max-width: 1100px) {
        .jackpotBlock.start .centerImage .jacpotCompilation {
            bottom: auto !important; left: 50% !important; max-width: none; top: -20px !important;
            transform: translateX(-50%) !important; width: 250px !important;
        }
        .jackpotBlock.start .centerImage .jacpotCompilation.firstly { display: none; }
        .jackpotBlock.start .centerImage .jacpotCompilation.secondary { display: initial; }
    }
    .jackpotBlock.start .jackpotBtnNy {
        filter: none; height: 115px; width: 200px; align-items: center; cursor: pointer;
        display: flex; justify-content: center; position: relative; transition: transform .1s ease, filter .15s ease;
        z-index: 1; background: linear-gradient(180deg, #41c6ff, #1a64fc); border-radius: 20px;
        font-weight: 900; font-size: 24px; color: #fff;
    }
    .jackpotBlock.start .jackpotBtnNy:hover {
        filter: drop-shadow(0 0 10px rgba(121, 158, 216, .7)); transform: rotate(3deg) scale(1.02);
    }
    @media (max-width: 1100px) {
        .jackpotBlock.start .jackpotBtnNy { height: 75px; margin: 0 auto; width: 150px; }
    }
    .jackpotBlock.start .title { position: relative; transition: transform .3s ease; width: 100%; z-index: 3; }
    @media (max-width: 1100px) {
        .jackpotBlock.start .title { align-items: center; display: flex; flex-direction: column; padding-top: 155px; }
    }
    .jackpotBlock.start .title .jackpotH1 { font-size: 34px; font-weight: 900; text-transform: uppercase; }
    @media (max-width: 1100px) { .jackpotBlock.start .title .jackpotH1 { font-size: 20px !important; } }
    .jackpotBlock.start .title p { color: #5b69a5; font-size: 16px; font-weight: 500; padding-top: 5px; text-transform: uppercase; }
    @media (max-width: 1100px) { .jackpotBlock.start .title p { display: none; } }
    .jackpotBlock.start .title span { color: #28ff69; font-size: 56px; font-weight: 900; text-align: center; }
    @media (max-width: 1100px) { .jackpotBlock.start .title span { font-size: 28px !important; } }
    .jackpotBlock.start .title span b { color: #fff; }
    .jackpotBlock.start .title .subimg {
        position: absolute;
        right: 40px;
        top: -23px;
        width: 150px;
        object-fit: contain;
    }
    @media (max-width: 1250px) { .jackpotBlock.start .title .subimg { display: none; } }

    .textSeo { background: var(--bgModal); border-radius: 25px; padding: 40px; margin-top: 50px; }
    .textSeo p { line-height: 1.7; margin-bottom: 15px; color: #cbd5e1; font-size: 15px; }
    .textSeo h1, .textSeo h2, .textSeo h3 { margin-bottom: 20px; margin-top: 30px; font-weight: 700; color: #fff; }
    .textSeo h1 { font-size: 32px; }
    .textSeo h2 { font-size: 26px; }
    .textSeo h3 { font-size: 20px; }
    .textSeo h1:first-child, .textSeo h2:first-child, .textSeo h3:first-child { margin-top: 0; }
    .textSeo ul, .textSeo ol { margin: 15px 0 15px 25px; color: #cbd5e1; }
    .textSeo li { margin-bottom: 10px; padding-left: 5px; }
    .textSeo strong { color: #fff; font-weight: 600; }
    .textSeo .highlight {
        background: rgba(65, 198, 255, 0.1);
        border-left: 3px solid #41c6ff;
        padding: 15px 20px;
        margin: 20px 0;
        border-radius: 0 10px 10px 0;
    }
    .textSeo table {
        width: 100%;
        border-collapse: collapse;
        margin: 20px 0;
        font-size: 14px;
    }
    .textSeo table th, .textSeo table td {
        padding: 12px 15px;
        text-align: left;
        border-bottom: 1px solid var(--line);
    }
    .textSeo table th {
        background: rgba(65, 198, 255, 0.1);
        color: #41c6ff;
        font-weight: 600;
    }
    .textSeo table tr:hover {
        background: rgba(255, 255, 255, 0.02);
    }
    .textSeo .faq-item {
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid var(--line);
        border-radius: 12px;
        margin-bottom: 12px;
        overflow: hidden;
    }
    .textSeo .faq-question {
        padding: 18px 25px;
        cursor: pointer;
        font-weight: 600;
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #fff;
        transition: background 0.2s ease;
    }
    .textSeo .faq-question:hover {
        background: rgba(65, 198, 255, 0.05);
    }
    .textSeo .faq-question::after {
        content: '+';
        font-size: 24px;
        color: #41c6ff;
        transition: transform 0.3s ease;
    }
    .textSeo .faq-item.active .faq-question::after {
        content: '−';
    }
    .textSeo .faq-answer {
        padding: 0 25px;
        max-height: 0;
        overflow: hidden;
        transition: all 0.3s ease;
        color: #cbd5e1;
    }
    .textSeo .faq-item.active .faq-answer {
        padding: 0 25px 20px;
        max-height: 500px;
    }
    @media (max-width: 767px) {
        .textSeo { margin-top: 50px; padding: 20px; }
        .textSeo h1 { font-size: 26px; margin-bottom: 15px; margin-top: 15px; }
        .textSeo h2 { font-size: 22px; }
        .textSeo h3 { font-size: 18px; }
        .textSeo table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
        .textSeo table th, .textSeo table td { white-space: nowrap; }
    }

    .footer { background-color: var(--bgModal); max-width: 100vw; overflow: hidden; padding: 50px 20px; }
    @media (max-width: 800px) { .footer .wrap .row { gap: 20px; } }
    @media (max-height: 450px), (max-width: 700px) {
        .footer { padding: 50px 10px 100px; }
        .footer .wrap .row { gap: 30px; grid-template-columns: 1fr; }
        .footer .wrap .row .col { padding-left: 7%; }
    }
    .footer .wrap { margin: 0 auto; max-width: 1280px; }
    .footer .row { gap: 30px; display: grid; grid-template-columns: 2fr 1fr 1fr 2fr; padding-bottom: 30px; position: relative; width: 100%; }
    .footer .row:after {
        background-color: var(--line); bottom: 0; content: ""; height: 1px; left: 50%;
        position: absolute; transform: translateX(-50%); width: calc(100% - 30px);
    }
    .footer .row .col { display: flex; flex-direction: column; }
    .footer .row .col .logo { margin-bottom: 20px; width: 180px; height: 48px; }
    .footer .row .col a, .footer .row .col p { color: var(--textSecondary); font-weight: 300; line-height: 18px; transition: .15s ease; }
    .footer .row .col h2 { color: var(--text); font-size: 16px; font-weight: 400; margin-bottom: 8px; }
    .footer .row .col.list a, .footer .row .col.list p { font-size: 14px; padding: 4px 0; }
    .footer .row .col.list .subLink { cursor: pointer; text-decoration: underline; }
    .footer .row .col.list .subLink, .footer .row .col.list a { display: inline-block; }
    .footer .row .col.list .subLink:hover, .footer .row .col.list a:hover { color: var(--text); }
    .footer .row.simple {
        column-gap: 20px; row-gap: 32px; display: grid;
        grid-template-columns: repeat(auto-fit, minmax(108px, 1fr)); padding: 30px 0; text-align: center; width: 100%;
    }
    @media (max-width: 700px) {
        .footer .row.simple { gap: 15px; grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); }
        .footer .row.simple a img { width: 100%; }
    }
    .footer .row.simple img { max-height: 45px; width: 108px; }
    .footer .row a { align-items: center; display: flex; justify-content: center; transition: opacity .3s ease; }
    .footer .row a:hover { opacity: .7; }

    .backgroundBack { overflow: hidden; position: fixed; z-index: -4; }
    .backgroundBack, .backgroundBack img { height: 100vh; left: 0; top: 0; width: 100vw; }
    .backgroundBack img { object-fit: cover; object-position: center; position: absolute; }