* { box-sizing:border-box; margin:0; padding:0 }
:root {
  --bg:#080B16; --bg2:#11162A; --card:#141a30; --card-h:#1b2340;
  --accent:#5B72DB; --accent-l:#8ED9F7; --accent-m:#6FA0E8;
  --txt:#F3F6FC; --txt2:#A9B1CC; --txt3:#6B7396;
  --brd:rgba(111,160,232,0.22); --ok:#2ecc71; --bad:#ff6b7a;
  --gold:#f0c75e;
}
html,body { background:var(--bg); color:var(--txt); font-family:'Inter',Arial,sans-serif; scroll-behavior:smooth }
body { line-height:1.65; font-size:16px }
a { color:var(--accent-l); text-decoration:none }
img { max-width:100%; display:block }
h1,h2,h3 { font-family:'Poppins','Inter',Arial,sans-serif; line-height:1.25; color:var(--txt) }
h1 { font-size:2.35rem; font-weight:800 }
h2 { font-size:1.7rem; font-weight:700; margin:0 0 16px }
h3 { font-size:1.2rem; font-weight:600; margin:0 0 8px }
p { color:var(--txt2) }
.container { max-width:980px; margin:0 auto; padding:0 20px }

/* ---------- Header ---------- */
.hdr { position:sticky; top:0; z-index:1000; background:rgba(8,11,22,.86); backdrop-filter:blur(10px); border-bottom:1px solid var(--brd) }
.hdr-inner { max-width:980px; margin:0 auto; padding:14px 20px; display:flex; align-items:center; gap:16px }
.logo { display:flex; align-items:center; gap:8px; flex-shrink:0 }
.logo img { height:34px; width:auto }
nav.desk-nav { display:flex; align-items:center; gap:22px; margin-left:auto }
nav.desk-nav a.nav-link { color:var(--txt2); font-size:.92rem; font-weight:500; white-space:nowrap }
nav.desk-nav a.nav-link:hover { color:var(--accent-l) }
.btn-cta { display:inline-block; padding:10px 22px; background:linear-gradient(135deg,var(--accent),var(--accent-m)); color:#fff !important; font-weight:700; border-radius:8px; font-size:.9rem; white-space:nowrap; box-shadow:0 4px 14px rgba(91,114,219,.35) }
.btn-cta:hover { filter:brightness(1.08) }
.hamburger { display:none; margin-left:auto; background:none; border:none; cursor:pointer; padding:8px; z-index:1001 }
.hamburger span { display:block; width:24px; height:2px; background:var(--txt); margin:5px 0; border-radius:2px }

/* lang switcher (mandatory on every page, incl. subpages -- see CASINO-SITE-PROMPT Rule 15) */
.lang-switch{position:relative;border:none;background:none;cursor:pointer}
.lang-switch summary{list-style:none;padding:8px 14px;background:var(--card);border:1px solid var(--brd);border-radius:8px;color:var(--txt2);font-size:.85rem;cursor:pointer;white-space:nowrap}
.lang-switch summary::-webkit-details-marker{display:none}
.lang-switch[open] summary{border-color:var(--accent)}
.lang-menu{position:absolute;top:calc(100% + 6px);right:0;background:var(--card);border:1px solid var(--brd);border-radius:10px;padding:8px 0;min-width:220px;max-height:340px;overflow-y:auto;z-index:9999;display:grid;grid-template-columns:1fr 1fr;gap:0}
.lang-menu a{display:block;padding:7px 14px;color:var(--txt2);font-size:.82rem;text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lang-menu a:hover{background:rgba(111,160,232,.12);color:var(--accent-l)}
.lang-menu a.active{color:var(--accent-l);font-weight:600}

/* mobile nav */
.mobile-menu { display:none; position:fixed; inset:0; background:var(--bg); z-index:9999; height:100vh; overflow-y:auto; padding:80px 28px 40px }
.mobile-menu.open { display:block }
.mobile-menu .close-btn { position:absolute; top:16px; right:16px; font-size:36px; z-index:10000; padding:12px; background:none; border:none; color:var(--txt); cursor:pointer; -webkit-tap-highlight-color:transparent; line-height:1 }
.mobile-menu a.nav-link { display:block; padding:16px 0; font-size:1.15rem; color:var(--txt); border-bottom:1px solid var(--brd) }
.mobile-menu .btn-cta { display:block; text-align:center; margin-top:24px }
.mobile-menu .lang-switch { margin-top:24px; width:100%; }
.mobile-menu .lang-switch summary { width:100%; text-align:left }
.mobile-menu .lang-menu { position:static; margin-top:10px; grid-template-columns:1fr 1fr; max-height:none; width:100%; }

@media (max-width:860px) {
  nav.desk-nav { display:none }
  .hamburger { display:block }
}

/* ---------- Hero ---------- */
.hero { position:relative; background-size:cover; background-position:center; padding:90px 0 70px }
.hero::before { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(8,11,22,.55),rgba(8,11,22,.92)); }
.hero-inner { position:relative; max-width:980px; margin:0 auto; padding:0 20px; text-align:center }
.badge { display:inline-block; padding:6px 16px; background:rgba(111,160,232,.15); border:1px solid var(--brd); border-radius:30px; color:var(--accent-l); font-size:.8rem; font-weight:600; letter-spacing:.03em; margin-bottom:18px }
.hero h1 { font-size:2.6rem; margin-bottom:14px }
.hero-sub { font-size:1.15rem; color:var(--txt2); max-width:640px; margin:0 auto 28px }
.stats { display:flex; flex-wrap:wrap; justify-content:center; gap:14px; margin-top:38px }
.stats span { background:rgba(20,26,48,.7); border:1px solid var(--brd); padding:9px 18px; border-radius:8px; font-size:.85rem; color:var(--txt2); font-weight:600 }

/* ---------- Subpage hero (review/bonus/app/login) ---------- */
.page-hero { max-width:980px; margin:0 auto; padding:64px 20px 12px; text-align:left }
.page-hero h1 { margin-bottom:16px }
.page-hero p { font-size:1.08rem; max-width:760px }

/* ---------- TOC = flex tabs, never a list (Rule 1) ---------- */
.toc { display:flex; flex-wrap:wrap; gap:10px 12px; padding:24px 0; border-bottom:1px solid var(--brd); margin-bottom:32px }
.toc a { display:inline-block; padding:9px 18px; background:var(--card); border:1px solid var(--brd); border-radius:8px; color:var(--txt2); font-size:13px; font-weight:500; transition:all .2s; white-space:nowrap }
.toc a:hover { border-color:var(--accent); color:var(--accent-l); background:rgba(91,114,219,.1); text-decoration:none }

/* ---------- Sections & cards ---------- */
.section { padding:36px 0 }
.cards-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; margin:22px 0 }
.card { background:var(--card); border:1px solid var(--brd); border-radius:12px; padding:22px }
.card h3 { color:var(--accent-l) }
.provider-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin:22px 0 }
.provider-card { background:var(--card); border:1px solid var(--brd); border-radius:10px; padding:16px; text-align:center }
.provider-card h3 { font-size:.95rem; margin-bottom:6px }
.provider-card p { font-size:.82rem; color:var(--txt3) }
.game-list { list-style:none; margin:18px 0; display:grid; gap:10px }
.game-list li { background:var(--card); border:1px solid var(--brd); border-radius:8px; padding:12px 16px; font-size:.92rem; color:var(--txt2) }
.section h3.sub { margin-top:26px }

/* ---------- Tables (final-pass wrapped, Rule per skill v3 2.7) ---------- */
.table-wrap { width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; margin:22px 0; border:1px solid var(--brd); border-radius:10px; background:var(--card) }
.table-wrap .data-table { margin:0; border:none; border-radius:0 }
.data-table { width:100%; border-collapse:collapse; font-size:.9rem }
.data-table th, .data-table td { padding:12px 16px; text-align:left; border-bottom:1px solid var(--brd); color:var(--txt2) }
.data-table th { color:var(--accent-l); font-weight:700; background:rgba(111,160,232,.06) }
.data-table tr:last-child td { border-bottom:none }
@media (max-width:720px) { .table-wrap .data-table { min-width:560px } .table-wrap .data-table th, .table-wrap .data-table td { white-space:nowrap } }

/* ---------- Slots grid ---------- */
.slots-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin:26px 0 }
.slot-card { position:relative; border-radius:12px; overflow:hidden; border:1px solid var(--brd); background:var(--card) }
.slot-card img { width:100%; aspect-ratio:4/3; object-fit:cover }
.slot-card .slot-name { padding:10px 12px; font-size:.85rem; font-weight:600; color:var(--txt) }
.slot-card .slot-overlay { position:absolute; inset:0; background:rgba(91,114,219,.55); display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .2s; color:#fff; font-weight:700; font-size:.9rem }
.slot-card:hover .slot-overlay { opacity:1 }
@media (max-width:860px) { .slots-grid { grid-template-columns:repeat(2,1fr) } }

/* ---------- CTA banner ---------- */
.cta-banner { background:linear-gradient(135deg,rgba(91,114,219,.18),rgba(142,217,247,.10)); border:1px solid var(--brd); border-radius:16px; padding:34px; text-align:center; margin:30px 0 }
.cta-banner h2 { margin-bottom:10px }
.cta-banner p { margin-bottom:20px }

/* ---------- Pros / Cons ---------- */
.pros-cons { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin:26px 0 }
.pros-col, .cons-col { background:var(--card); border:1px solid var(--brd); border-radius:12px; padding:22px }
.pros-col h3 { color:var(--ok) }
.cons-col h3 { color:var(--bad) }
.pros-col ul, .cons-col ul { list-style:none; display:grid; gap:10px }
.pros-col li, .cons-col li { padding-left:26px; position:relative; font-size:.92rem; color:var(--txt2) }
.pros-col li::before { content:"✓"; position:absolute; left:0; color:var(--ok); font-weight:700 }
.cons-col li::before { content:"✗"; position:absolute; left:0; color:var(--bad); font-weight:700 }

/* ---------- FAQ ---------- */
.faq-item { border-bottom:1px solid var(--brd); padding:16px 0 }
.faq-item h3 { color:var(--txt); font-size:1rem }

/* ---------- Login form ---------- */
.login-box { max-width:420px; margin:0 auto; background:var(--card); border:1px solid var(--brd); border-radius:14px; padding:30px }
.form-group { margin-bottom:18px }
.form-group label { display:block; font-size:.85rem; color:var(--txt2); margin-bottom:6px; font-weight:600 }
.form-group input { width:100%; padding:12px 14px; background:var(--bg2); border:1px solid var(--brd); border-radius:8px; color:var(--txt); font-size:.95rem }
.form-group input::placeholder { color:var(--txt3) }
.btn-submit { display:block; width:100%; padding:13px; background:linear-gradient(135deg,var(--accent),var(--accent-m)); color:#fff !important; font-weight:700; text-align:center; text-decoration:none; border:none; border-radius:8px; font-size:1rem; cursor:pointer; margin-top:6px }
.forgot-link { display:block; text-align:center; margin-top:14px; font-size:.85rem }
.benefit-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:22px 0 }

/* ---------- App compare ---------- */
.compat-note { font-size:.85rem; color:var(--txt3) }

/* ---------- Footer ---------- */
.footer { border-top:1px solid var(--brd); padding:36px 0; margin-top:40px }
.footer .container { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:14px }
.footer-links { display:flex; gap:20px; flex-wrap:wrap }
.footer-links a { color:var(--txt3); font-size:.85rem }
.footer p.disclaimer { font-size:.78rem; color:var(--txt3); width:100%; margin-top:18px }
.footer p.copyright { font-size:.8rem; color:var(--txt3) }

@media (max-width:720px) {
  .cards-grid, .provider-grid, .pros-cons, .benefit-cards { grid-template-columns:1fr }
  .hero h1 { font-size:2rem }
  h2 { font-size:1.4rem }
}