:root {       --bg: #040913;       --bg-2: #071126;       --bg-3: #09152b;       --panel: #172346;       --panel-dark: #0c1326;       --line: rgba(169, 181, 236, 0.16);       --text: #ffffff;       --muted: #a9b5ec;       --muted-2: #7d90c1;       --cyan: #00e1fa;       --blue: #557bff;       --violet: #a302f1;       --violet-2: #7324c4;       --success: #00e38c;       --warning: #ffb800;       --radius: 22px;       --shadow: 0 18px 50px rgba(0, 0, 0, 0.28);       --max: 1280px;     }      * { box-sizing: border-box; }     html { scroll-behavior: smooth; }     body {       margin: 0;       min-width: 320px;       font-family: Inter, Arial, sans-serif;       color: var(--text);       line-height: 1.55;       background:         radial-gradient(circle at top center, rgba(163, 2, 241, 0.14), transparent 30%),         radial-gradient(circle at 20% 0%, rgba(0, 225, 250, 0.10), transparent 24%),         linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 38%, var(--bg-3) 100%);     }      img { max-width: 100%; display: block; }     a { color: inherit; text-decoration: none; }     h1, h2, h3, p { margin: 5px; }      .container {       width: min(100% - 32px, var(--max));       margin: 0 auto;     }      .topbar {       position: sticky;       top: 0;       z-index: 20;       background: rgba(4, 9, 19, 0.88);       backdrop-filter: blur(10px);       border-bottom: 1px solid rgba(169, 181, 236, 0.10);     }      .topbar-inner {       display: grid;       grid-template-columns: auto 1fr auto;       gap: 20px;       align-items: center;       min-height: 84px;       padding: 10px 0;     }      .brand {       display: inline-flex;       align-items: center;       gap: 12px;       min-width: 0;       font-weight: 800;       letter-spacing: 0.03em;     }      .brand-badge {       width: 54px;       height: 54px;       border-radius: 16px;       background: linear-gradient(135deg, rgba(85,123,255,0.20), rgba(163,2,241,0.22));       border: 1px solid rgba(225, 125, 255, 0.28);       display: grid;       place-items: center;       box-shadow: 0 0 0 1px rgba(255,255,255,0.03) inset;       overflow: hidden;       flex: 0 0 54px;     }      .brand-name {       font-size: 18px;       text-transform: uppercase;       white-space: nowrap;     }      .nav-links {       display: flex;       justify-content: center;       align-items: center;       gap: 12px;       flex-wrap: wrap;       min-width: 0;     }      .nav-link,     .btn,     .chip {       display: inline-flex;       align-items: center;       justify-content: center;       min-height: 44px;       padding: 0 18px;       border-radius: 999px;       border: 1px solid rgba(169, 181, 236, 0.14);       background: rgba(23, 35, 70, 0.68);       color: var(--text);       font-weight: 700;       font-size: 14px;       text-align: center;     }      .nav-link {       color: var(--muted);       min-height: 40px;       padding: 0 16px;     }      .btn-primary {       border: 0;       background: linear-gradient(90deg, var(--blue), var(--violet));       box-shadow: 0 10px 24px rgba(85, 123, 255, 0.22);     }      .top-actions {       display: inline-flex;       align-items: center;       justify-content: flex-end;       gap: 12px;       flex-wrap: wrap;     }    /* ——— Mobile menu ——— */   .menu-toggle {     display: none;     align-items: center;     justify-content: center;     width: 44px;     height: 44px;     padding: 0;     border: 1px solid rgba(169, 181, 236, 0.14);     border-radius: 12px;     background: rgba(23, 35, 70, 0.68);     color: var(--text);     font-size: 22px;     line-height: 1;     cursor: pointer;   }    .mobile-menu {     display: none;     max-height: 0;     overflow: hidden;     transition: max-height 0.35s ease;     background: var(--bg-2);     border-top: 1px solid var(--line);   }   .mobile-menu.is-open {     max-height: 80vh;   }   .mobile-menu__panel {     padding: 16px 16px 24px;     display: flex;     flex-direction: column;     gap: 16px;   }   .mobile-menu__nav {     display: flex;     flex-direction: column;     gap: 4px;     flex: 1;   }   .mobile-menu__link {     display: block;     padding: 14px 16px;     border-radius: 12px;     color: var(--muted);     font-weight: 600;     font-size: 16px;     transition: background 0.2s, color 0.2s;   }   .mobile-menu__link:hover {     background: rgba(23, 35, 70, 0.68);     color: var(--text);   }   .mobile-menu__actions {     display: flex;     flex-direction: column;     gap: 12px;     margin-top: 24px;   }   .mobile-menu__actions .btn {     width: 100%;     justify-content: center;   }       .hero {       padding: 22px 0 18px;     }      .breadcrumbs {       display: flex;       flex-wrap: wrap;       gap: 4px;       margin-bottom: 18px;       color: var(--muted);       font-size: 14px;       list-style: none;     }      .panel {       background: linear-gradient(180deg, rgba(23, 35, 70, 0.94), rgba(12, 19, 38, 0.94));       border: 1px solid var(--line);       border-radius: 28px;       box-shadow: var(--shadow);     }      .hero-grid {       display: grid;       grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr);       gap: 20px;       align-items: stretch;     }      .hero-main {       position: relative;       overflow: hidden;       min-height: 430px;       background:         linear-gradient(120deg, rgba(4, 9, 19, 0.85), rgba(11, 20, 54, 0.38)),         url(/shared/3716/jackpots-casino-bg.jpg) center/cover; 		     }      .hero-main::after {       content: '';       position: absolute;       inset: 0;       background: radial-gradient(circle at 72% 34%, rgba(225,125,255,0.22), transparent 24%);       pointer-events: none;     }      .hero-content {       position: relative;       z-index: 1;       display: flex;       flex-direction: column;       justify-content: center;       min-height: 100%;       padding: 34px;       max-width: 620px;     }      .eyebrow {       display: inline-flex;       width: fit-content;       align-items: center;       gap: 8px;       padding: 8px 14px;       border-radius: 999px;       background: rgba(85,123,255,0.18);       border: 1px solid rgba(85,123,255,0.28);       color: #d9e0ff;       font-size: 13px;       font-weight: 700;       text-transform: uppercase;       letter-spacing: 0.08em;     }      h1 {       margin-top: 16px;       font-size: clamp(32px, 4vw, 54px);       line-height: 1.02;       letter-spacing: -0.03em;       max-width: 12ch;     }      .hero-text {       margin-top: 16px;       color: #d8def5;       font-size: 17px;       max-width: 52ch;     }      .hero-actions {       display: flex;       gap: 12px;       flex-wrap: wrap;       margin-top: 24px;     }      .hero-side {       display: grid;       gap: 20px;     }      .mini-card {       min-height: 205px;       padding: 24px;       position: relative;       overflow: hidden;     }      .mini-card.blue {       background:         linear-gradient(120deg, rgba(12,19,38,0.2), rgba(23,35,70,0.2)),         url(/uploads/3649/missions-casino.jpg) center/cover;     }      .mini-card.gold {       background:         linear-gradient(120deg, rgba(12,19,38,0.2), rgba(23,35,70,0.25)),         url(/uploads/3649/welcome-bonus-wizardo.jpg) center/cover;     }      .mini-card .title {       margin-top: 14px;       font-size: clamp(28px, 3vw, 34px);       line-height: 0.98;       max-width: 8ch;       font-weight: 800;     }      .mini-card p {       margin-top: 12px;       max-width: 28ch;       color: #d7ddf7;     }      .winner-strip {       margin-top: 18px;       padding: 18px;       display: grid;       grid-template-columns: repeat(6, minmax(0, 1fr));       gap: 12px;     }      .winner-item {       min-width: 0;       padding: 14px;       border-radius: 18px;       background: rgba(9, 17, 37, 0.72);       border: 1px solid rgba(169, 181, 236, 0.10);       text-align: center;     }      .winner-icon {       width: 42px;       height: 42px;       margin: 0 auto;       border-radius: 14px;       background: linear-gradient(135deg, rgba(85,123,255,0.26), rgba(163,2,241,0.34));       display: grid;       place-items: center;       font-size: 18px;     }      .winner-item strong {       display: block;       margin-top: 6px;       white-space: nowrap;       overflow: hidden;       text-overflow: ellipsis;       font-size: 14px;     }      .winner-item span {       display: block;       color: var(--success);       font-weight: 800;       margin-top: 3px;     }      .section {       padding: 18px 0;     }      .section-card {       padding: 22px;     }      .section-head {       display: flex;       align-items: center;       justify-content: space-between;       gap: 16px;       margin-bottom: 18px;       flex-wrap: wrap;     }      .section-head h2 {       font-size: clamp(24px, 2.4vw, 34px);       letter-spacing: -0.02em;     }      .tags {       display: flex;       flex-wrap: wrap;       gap: 10px;       margin-bottom: 18px;     }      .tag {       padding: 10px 16px;       border-radius: 999px;       background: rgba(23, 35, 70, 0.70);       border: 1px solid rgba(169, 181, 236, 0.14);       color: var(--muted);       font-size: 14px;       font-weight: 700;     }      .tag.active {       color: var(--text);       background: linear-gradient(90deg, rgba(85,123,255,0.20), rgba(163,2,241,0.20));       border-color: rgba(225, 125, 255, 0.25);     }      .games {       display: grid;       grid-template-columns: repeat(5, minmax(0, 1fr));       gap: 16px;     }      .game {       overflow: hidden;       border-radius: 22px;       background: rgba(9, 17, 37, 0.85);       border: 1px solid rgba(169,181,236,0.10);     }      .game-media {       aspect-ratio: 4 / 5;       overflow: hidden;       position: relative;     }      .game-media img {       width: 100%;       height: 100%;       object-fit: cover;     }      .badge-row {       position: absolute;       top: 10px;       left: 10px;       display: flex;       gap: 8px;       flex-wrap: wrap;     }      .badge {       padding: 6px 10px;       border-radius: 999px;       font-size: 12px;       font-weight: 800;       backdrop-filter: blur(8px);       background: rgba(4, 9, 19, 0.62);       border: 1px solid rgba(255,255,255,0.10);     }      .badge.purple { background: rgba(163, 2, 241, 0.40); }     .badge.blue { background: rgba(85, 123, 255, 0.40); }     .badge.gold { background: rgba(255, 184, 0, 0.36); }      .game-body {       padding: 14px;     }      .game-body strong {       display: block;       font-size: 16px;     }      .game-body span {       display: block;       margin-top: 4px;       color: var(--muted);       font-size: 14px;     }      .jackpot {       display: grid;       grid-template-columns: repeat(3, minmax(0, 1fr));       gap: 18px;       align-items: end;     }      .jackpot-card {       padding: 28px 24px;       text-align: center;       position: relative;       overflow: hidden;       min-height: 280px;     }      .jackpot-card::before {       content: '';       position: absolute;       inset: auto -20% -40% -20%;       height: 180px;       background: radial-gradient(circle, rgba(85,123,255,0.26), transparent 68%);       pointer-events: none;     }      .jackpot-card.featured {       min-height: 340px;       background:         linear-gradient(180deg, rgba(23, 35, 70, 0.98), rgba(10, 16, 32, 0.98)),         url('https://images.unsplash.com/photo-1513151233558-d860c5398176?auto=format&fit=crop&w=1200&q=80') center/cover;       border-color: rgba(225, 125, 255, 0.24);     }      .jackpot-label {       font-size: 14px;       text-transform: uppercase;       letter-spacing: 0.14em;       color: var(--muted);     }      .jackpot-card h3 {       margin-top: 10px;       font-size: 34px;     }      .jackpot-amount {       margin-top: 14px;       font-size: clamp(34px, 4vw, 56px);       line-height: 1;       font-weight: 900;       letter-spacing: -0.04em;       overflow-wrap: anywhere;     }      .jackpot-card p {       margin-top: 8px;       color: var(--muted);     }      .feature-grid {       display: grid;       grid-template-columns: repeat(4, minmax(0, 1fr));       gap: 16px;     }      .feature {       padding: 18px;       border-radius: 20px;       background: rgba(9, 17, 37, 0.72);       border: 1px solid rgba(169,181,236,0.10);     }      .feature-icon {       width: 52px;       height: 52px;       border-radius: 16px;       display: grid;       place-items: center;       font-size: 22px;       background: linear-gradient(135deg, rgba(85,123,255,0.24), rgba(163,2,241,0.30));     }      .feature strong {       display: block;       margin-top: 12px;       font-size: 18px;     }      .feature p {       margin-top: 8px;       color: var(--muted);       font-size: 15px;     }      .prose h2 {       font-size: clamp(28px, 3vw, 40px);       margin-bottom: 16px;     }      .prose p { color: #d7ddf7; }     .prose p + p { margin-top: 14px; }     .prose ul {       margin: 16px 0 0;       padding-left: 20px;       color: #d7ddf7;     }      .prose li + li { margin-top: 10px; }  .prose p a {   color: #0b6dd4; } .prose p a:hover {   color: #59a5f4; }      .side-visual {       overflow: hidden;       border-radius: 26px;       border: 1px solid rgba(169, 181, 236, 0.12);       background: rgba(9, 17, 37, 0.7);     }      .side-visual img {       width: 100%;       height: 100%;       min-height: 360px;       object-fit: cover;     }      .payments {       display: grid;       grid-template-columns: repeat(6, minmax(0, 1fr));       gap: 12px;     }      .pay {       min-height: 78px;       border-radius: 18px;       display: grid;       place-items: center;       padding: 12px;       font-size: 22px;       font-weight: 900;       color: #dce2ff;       background: rgba(9, 17, 37, 0.76);       border: 1px solid rgba(169,181,236,0.10);       text-align: center;     }      footer {       padding: 20px 0 40px;     }      .footer-card {       padding: 24px;     }      .footer-grid {       display: grid;       grid-template-columns: 1.2fr 1fr 1fr 1fr;       gap: 20px;     }      .footer-logo {       display: inline-flex;       align-items: center;       gap: 12px;       font-weight: 800;       text-transform: uppercase;       margin-bottom: 12px;     }      .footer-card p,     .footer-card li,     .footer-card a { color: var(--muted); }      .footer-card ul {       list-style: none;       padding: 0;       margin: 12px 0 0;     }      .footer-card li + li { margin-top: 8px; }      .trust-row {       display: flex;       align-items: center;       justify-content: space-between;       gap: 20px;       flex-wrap: wrap;       margin-top: 20px;       padding-top: 18px;       border-top: 1px solid rgba(169, 181, 236, 0.10);     }      .trust-badges {       display: flex;       align-items: center;       gap: 12px;       flex-wrap: wrap;     }      .trust-badge {       min-width: 62px;       min-height: 62px;       padding: 10px 14px;       border-radius: 18px;       display: inline-flex;       align-items: center;       justify-content: center;       background: rgba(9, 17, 37, 0.80);       border: 1px solid rgba(169,181,236,0.10);       color: #dce2ff;       font-weight: 900;       text-align: center;       line-height: 1.1;     }      .trust-badge small {       display: block;       font-size: 11px;       font-weight: 700;       color: var(--muted);       margin-top: 4px;     }      .copyright {       color: var(--muted-2);       font-size: 14px;     }      .author-schema {       display: none;     }      @media (max-width: 1180px) {       .brand,       .nav-links,       .top-actions { justify-content: center; }       .hero-grid,       .text-grid { grid-template-columns: 1fr; }       .games { grid-template-columns: repeat(4, minmax(0, 1fr)); }       .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }       .payments { grid-template-columns: repeat(3, minmax(0, 1fr)); }       .winner-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }       .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }     }      @media (max-width: 920px) {       .topbar-inner {grid-template-columns: 1fr auto;}       .menu-toggle { display: flex; }       .mobile-menu { display: block; }       .brand { justify-content: flex-start; }       .topbar .nav-links,       .topbar .top-actions { display: none !important; }       .hero-grid,       .jackpot,       .text-grid,       .footer-grid { grid-template-columns: 1fr; }       .games { grid-template-columns: repeat(2, minmax(0, 1fr)); }       .payments { grid-template-columns: repeat(2, minmax(0, 1fr)); }       .winner-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }       .trust-row { flex-direction: column; align-items: flex-start; }     }      @media (max-width: 640px) {       .container { width: min(100% - 20px, var(--max)); }       .hero-content,       .mini-card,       .section-card,       .footer-card { padding: 18px; }       .hero-main { min-height: 360px; }       .winner-strip,       .feature-grid,       .payments,       .games { grid-template-columns: 1fr; }       .hero-actions,       .top-actions,       .nav-links { flex-direction: column; align-items: stretch; }       .nav-link,       .btn,       .chip { width: 100%; }       .winner-item { text-align: left; }       .winner-icon { margin: 0 0 8px; }       .section-head { align-items: flex-start; }       .breadcrumbs { font-size: 13px; }       .brand-name { white-space: normal; }       .trust-badges { width: 100%; }       .trust-badge { flex: 1 1 calc(33.333% - 8px); min-width: 0; }     }