/* boda8 — bento tile-mosaic dashboard shell. Deep-purple premium palette.
   A modular grid of varied-size tiles: no single large hero, one compact sticky bar. */

:root{
  --bg:#160a26;      /* deep purple page */
  --bg2:#1e0f32;     /* raised band */
  --tile:#271444;    /* tile surface */
  --tile2:#311a53;   /* tile surface, lighter */
  --line:#3d2560;    /* purple hairline */
  --line2:#4c2f75;
  --ink:#f4eeff;     /* primary text */
  --mut:#bcabd9;     /* muted lilac */
  --faint:#8f7cb2;
  --violet:#8b5cf6;
  --violet2:#a78bfa;
  --violet3:#c4b1ff;
  --gold:#f5c518;
  --ok:#28c76f;
  --rad:16px;
  --rad-sm:11px;
  --gutter:16px;
  --colw:1200px;
  --shadow:0 20px 46px -22px rgba(6,2,14,.75);
  --glow:0 0 0 1px rgba(139,92,246,.35), 0 14px 34px -18px rgba(139,92,246,.6);
  --font:"Noto Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"PingFang SC","Microsoft YaHei","Noto Sans SC",sans-serif;
}
:root:not([data-theme="dark"]){color-scheme:dark}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:
    radial-gradient(1200px 620px at 80% -8%, #38195a 0%, rgba(56,25,90,0) 60%),
    radial-gradient(900px 500px at 0% 4%, #2a1147 0%, rgba(42,17,71,0) 55%),
    var(--bg);
  color:var(--ink);
  font-family:var(--font);
  font-size:16px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
h1,h2,h3,h4{line-height:1.2;font-weight:800;letter-spacing:-.01em}
p{color:var(--mut)}
b{color:var(--ink)}

/* ---- shared width helper ---- */
.bn-in{width:100%;max-width:var(--colw);margin-inline:auto;padding-inline:var(--gutter)}

/* ================================================= COMPACT STICKY TOP BAR */
.bn-bar{position:sticky;top:0;z-index:60;background:rgba(19,9,33,.86);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.bn-bar-in{display:flex;align-items:center;gap:14px;height:62px}
.bn-brand{display:inline-flex;align-items:center;font-weight:900;font-size:22px;
  letter-spacing:-.02em;color:var(--ink)}
.bn-brand b{color:var(--violet2)}
.bn-brand .dot{width:9px;height:9px;border-radius:50%;background:var(--gold);
  margin-left:7px;box-shadow:0 0 12px var(--gold)}
.bn-menu{display:flex;align-items:center;gap:4px;margin-left:8px;flex:1;min-width:0;overflow:hidden}
.bn-menu a{padding:8px 11px;border-radius:9px;font-size:14px;font-weight:600;color:var(--mut);white-space:nowrap}
.bn-menu a:hover{color:var(--ink);background:rgba(139,92,246,.14)}
.bn-menu a.on{color:var(--ink);background:rgba(139,92,246,.2)}
.bn-tools{display:flex;align-items:center;gap:10px;margin-left:auto}
.bn-lang{display:inline-flex;align-items:center;gap:2px;padding:3px;border:1px solid var(--line2);
  border-radius:999px;background:rgba(0,0,0,.2)}
.bn-lang a{font-size:12px;font-weight:700;color:var(--faint);padding:7px 11px;border-radius:999px;line-height:1;min-height:34px;min-width:44px;display:inline-flex;align-items:center;justify-content:center}
.bn-lang a.sel{color:#1a0b2c;background:var(--violet2)}
.bn-cta{display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;
  background:linear-gradient(135deg,#ffd94a,var(--gold));color:#2a1a00;
  font-weight:800;font-size:15px;padding:12px 22px;border-radius:11px;border:0;cursor:pointer;
  box-shadow:0 10px 26px -10px rgba(245,197,24,.75);transition:transform .12s ease}
.bn-cta:hover{transform:translateY(-1px)}
.bn-cta.sm{padding:9px 16px;font-size:13.5px}
.bn-cta.ghost{background:transparent;color:var(--gold);border:1.5px solid var(--gold);box-shadow:none}
.bn-burger{display:none;background:transparent;border:1px solid var(--line2);color:var(--ink);
  width:44px;height:44px;border-radius:10px;font-size:20px;cursor:pointer}

/* ================================================= BENTO MOSAIC (home) */
.bn-stage{padding:26px 0 8px}
.bn-mosaic{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px;grid-auto-flow:dense}
.bn-tile{position:relative;background:linear-gradient(180deg,var(--tile2),var(--tile));
  border:1px solid var(--line);border-radius:var(--rad);padding:20px;overflow:hidden;
  display:flex;flex-direction:column;min-height:150px}
.bn-tile.link{transition:border-color .15s ease,transform .15s ease}
.bn-tile.link:hover{border-color:var(--line2);transform:translateY(-2px)}
.c2{grid-column:span 2}.c3{grid-column:span 3}.c4{grid-column:span 4}.c6{grid-column:span 6}
.r2{grid-row:span 2}
.bn-kicker{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:800;
  text-transform:uppercase;letter-spacing:.12em;color:var(--gold)}
.bn-tt{font-size:19px;margin-top:8px;color:var(--ink)}
.bn-tx{font-size:14px;color:var(--mut);margin-top:8px}

/* feature tile (headline + CTA) */
.bn-tile.feature{background:
    radial-gradient(520px 260px at 82% 0%, rgba(139,92,246,.4), transparent 62%),
    linear-gradient(160deg,#3a1c63,#241241);
  justify-content:center;min-height:260px}
.bn-tile.feature h1{font-size:clamp(26px,3.4vw,40px);margin-top:12px;max-width:16ch}
.bn-tile.feature .bn-tx{font-size:15.5px;max-width:52ch;margin-top:14px}
.bn-fbtns{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}
.bn-fmini{display:flex;gap:22px;margin-top:20px;flex-wrap:wrap}
.bn-fmini div{display:flex;flex-direction:column}
.bn-fmini b{font-size:20px;color:var(--violet3)}
.bn-fmini span{font-size:12px;color:var(--faint)}

/* stat tile */
.bn-tile.stat{align-items:flex-start;justify-content:center;min-height:150px;
  background:linear-gradient(160deg,#2a1550,#1d1036)}
.bn-statnum{font-size:clamp(28px,3.6vw,40px);font-weight:900;color:var(--violet3);
  line-height:1;letter-spacing:-.02em}
.bn-statnum .u{font-size:.5em;color:var(--gold);margin-left:2px}
.bn-statlbl{font-size:13px;color:var(--mut);margin-top:10px}
.bn-tile.stat.gold .bn-statnum{color:var(--gold)}

/* image tiles (game / category / promo / live / app) */
.bn-imgtile{position:relative;border:1px solid var(--line);border-radius:var(--rad);
  overflow:hidden;min-height:150px;display:block;transition:transform .15s ease,border-color .15s ease}
.bn-imgtile:hover{transform:translateY(-2px);border-color:var(--line2)}
.bn-imgtile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bn-imgtile .sh{position:absolute;inset:0;background:
    linear-gradient(0deg,rgba(12,5,22,.9) 4%,rgba(12,5,22,.15) 55%,transparent 78%)}
.bn-imgtile .cap{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;
  justify-content:flex-end;padding:16px}
.bn-imgtile .cap h3{font-size:17px;color:#fff}
.bn-imgtile .cap span{font-size:12px;color:var(--violet3);margin-top:4px}
.bn-chiptag{position:absolute;z-index:3;top:12px;left:12px;background:rgba(139,92,246,.92);
  color:#160826;font-size:11px;font-weight:800;padding:4px 9px;border-radius:999px}
.bn-play{position:absolute;z-index:3;top:50%;left:50%;transform:translate(-50%,-50%);
  background:rgba(139,92,246,.95);color:#160826;font-weight:800;font-size:12px;
  padding:8px 16px;border-radius:999px;opacity:0;transition:opacity .15s ease}
.bn-imgtile:hover .bn-play,.bn-sq:hover .bn-play,.bn-gcard:hover .bn-play{opacity:1}
.bn-tile.game{min-height:150px;background:linear-gradient(180deg,#241241,#180b2c)}
.bn-imgtile.game img{object-fit:contain;padding:10px}
.bn-imgtile.game .sh{background:linear-gradient(0deg,rgba(12,5,22,.85) 2%,transparent 40%)}
.bn-tile.promo .sh{position:absolute;inset:0;background:linear-gradient(160deg,rgba(12,5,22,.55) 30%,rgba(12,5,22,.85))}
.bn-tile.promo .cap{margin-top:30px}
.bn-tile.promo .cap h3{font-size:18px;color:#fff}
.bn-tile.promo .bn-mini{position:relative;z-index:2;margin-top:auto}
.bn-tile.promo .bn-mini .bn-cta{margin-top:12px}

/* ================================================= SECTIONS */
.bn-sec{padding:40px 0}
.bn-sec.band{background:linear-gradient(180deg,rgba(30,15,50,.7),rgba(22,10,38,.2));
  border-block:1px solid var(--line)}
.bn-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:800;
  text-transform:uppercase;letter-spacing:.14em;color:var(--gold)}
.bn-h2{font-size:clamp(22px,2.7vw,30px);margin-top:10px}
.bn-lead{color:var(--mut);margin-top:12px;max-width:70ch;font-size:15.5px}
.bn-prose{max-width:74ch;margin-top:16px}
.bn-prose h3{font-size:18px;margin-top:22px;color:var(--ink)}
.bn-prose p{margin-top:12px}
.bn-prose p a,.bn-lead a{color:var(--violet3);border-bottom:1px solid rgba(167,139,250,.4)}
.bn-prose p a:hover{color:#fff}

/* generic card grids */
.bn-grid{display:grid;gap:14px;margin-top:22px}
.bn-grid.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.bn-grid.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.bn-grid.g4{grid-template-columns:repeat(4,minmax(0,1fr))}

/* icon feature */
.bn-feat{background:var(--tile);border:1px solid var(--line);border-radius:var(--rad);
  padding:20px;display:flex;gap:14px}
.bn-feat .bn-ic{flex:0 0 auto;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;
  font-size:22px;background:rgba(139,92,246,.16);border:1px solid var(--line2)}
.bn-feat h3{font-size:16px}
.bn-feat p{font-size:13.5px;margin-top:6px}

/* game cards with caption */
.bn-gcard{position:relative;background:var(--tile);border:1px solid var(--line);
  border-radius:var(--rad-sm);overflow:hidden;display:block;transition:transform .15s ease}
.bn-gcard:hover{transform:translateY(-2px)}
.bn-gcard img{width:100%;height:auto;aspect-ratio:16/10;object-fit:contain;background:linear-gradient(180deg,#241241,#180b2c);padding:8px}
.bn-gcard .cap{padding:11px 13px}
.bn-gcard .cap h3{font-size:14px}

/* square game tiles */
.bn-tiles{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin-top:22px}
.bn-sq{position:relative;border:1px solid var(--line);border-radius:var(--rad-sm);
  overflow:hidden;display:block;transition:transform .15s ease}
.bn-sq:hover{transform:translateY(-2px)}
.bn-sq img{width:100%;aspect-ratio:1/1;object-fit:cover}

/* live dealers */
.bn-dealers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:22px}
.bn-dealer{position:relative;border:1px solid var(--line);border-radius:var(--rad-sm);overflow:hidden;display:block}
.bn-dealer img{width:100%;aspect-ratio:4/3;object-fit:cover}
.bn-dealer span{position:absolute;left:0;right:0;bottom:0;padding:14px 12px 10px;font-size:13px;
  font-weight:700;color:#fff;background:linear-gradient(0deg,rgba(10,4,20,.9),transparent)}

/* provider cards */
.bn-pfs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:22px}
.bn-pf{background:var(--tile);border:1px solid var(--line);border-radius:var(--rad);padding:18px}
.bn-pf-logo{height:46px;display:flex;align-items:center;margin-bottom:12px}
.bn-pf-logo img{max-height:40px;width:auto;object-fit:contain}
.bn-pf h3{font-size:16px}
.bn-pf p{font-size:13px;margin-top:8px}

/* logo strip */
.bn-logos{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.bn-logo{flex:1 1 130px;min-height:64px;background:#fff;border:1px solid var(--line);
  border-radius:var(--rad-sm);display:flex;align-items:center;justify-content:center;padding:14px 16px;
  font-weight:700;color:#160826;font-size:14px}
.bn-logo img{max-height:32px;max-width:100%;width:auto;object-fit:contain}

/* promo banners */
.bn-promos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:22px}
.bn-pbanner{background:var(--tile);border:1px solid var(--line);border-radius:var(--rad);overflow:hidden}
.bn-pbanner .art{position:relative;aspect-ratio:16/9}
.bn-pbanner .art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bn-pbanner .art .t{position:absolute;left:0;right:0;bottom:0;padding:14px;z-index:2;
  background:linear-gradient(0deg,rgba(10,4,20,.92),transparent)}
.bn-pbanner .art .t h3{font-size:16px;color:#fff}
.bn-pbanner .body{padding:14px}
.bn-pbanner .body p{font-size:13px}
.bn-pbanner .body .bn-cta{margin-top:12px}

/* FAQ */
.bn-faq{max-width:820px;margin-top:20px}
.bn-faq details{background:var(--tile);border:1px solid var(--line);border-radius:var(--rad-sm);
  padding:14px 16px;margin-top:10px}
.bn-faq summary{cursor:pointer;font-weight:700;font-size:15px;list-style:none;
  display:flex;justify-content:space-between;gap:12px}
.bn-faq summary::-webkit-details-marker{display:none}
.bn-faq summary::after{content:"+";color:var(--violet2);font-weight:800}
.bn-faq details[open] summary::after{content:"–"}
.bn-faq details p{margin-top:10px;font-size:14px}

/* cta row */
.bn-ctarow{display:flex;justify-content:center;padding:8px 0 4px}

/* app split */
.bn-app{display:grid;grid-template-columns:1fr 1.2fr;gap:26px;align-items:center;margin-top:22px}
.bn-phone{border:1px solid var(--line);border-radius:22px;overflow:hidden;aspect-ratio:9/16;max-height:440px}
.bn-phone img{width:100%;height:100%;object-fit:cover}
.bn-app .bn-cta{margin-top:18px}

/* contact method cards */
.bn-mcard{background:var(--tile);border:1px solid var(--line);border-radius:var(--rad);padding:18px}
.bn-mcard h3{font-size:16px}
.bn-mcard p{font-size:13.5px;margin-top:8px}
.bn-mcard .bn-cta{margin-top:14px}

/* ================================================= COMPACT PAGE HEADER (inner pages) */
.bn-phead{border-bottom:1px solid var(--line);
  background:radial-gradient(700px 240px at 88% 0%, rgba(139,92,246,.28), transparent 60%),
    linear-gradient(180deg,var(--bg2),var(--bg))}
.bn-phead-in{display:grid;grid-template-columns:1.6fr 1fr;gap:24px;align-items:center;padding:34px 0}
.bn-phead h1{font-size:clamp(24px,3vw,34px);margin-top:10px}
.bn-phead p{margin-top:12px;max-width:60ch;font-size:15px}
.bn-phead .bn-cta{margin-top:18px}
.bn-phead-media{border:1px solid var(--line);border-radius:var(--rad);overflow:hidden;aspect-ratio:16/10}
.bn-phead-media img{width:100%;height:100%;object-fit:cover}

/* ================================================= FOOTER */
.bn-foot{background:#100720;border-top:1px solid var(--line);margin-top:48px;padding:40px 0 26px}
.bn-foot-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:26px}
.bn-foot-about{color:var(--mut);font-size:13.5px;margin-top:12px;max-width:320px}
.bn-social{display:flex;gap:10px;margin-top:16px}
.bn-social a{width:44px;height:44px;border-radius:10px;border:1px solid var(--line2);
  display:grid;place-items:center;color:var(--mut)}
.bn-social a:hover{color:var(--ink);border-color:var(--violet2)}
.bn-social svg{width:18px;height:18px;fill:currentColor}
.bn-fcol h4{font-size:14px;margin-bottom:12px;color:var(--ink)}
.bn-fcol a{display:block;color:var(--mut);font-size:13.5px;padding:5px 0}
.bn-fcol a:hover{color:var(--ink)}
.bn-pay{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-top:30px;
  padding-top:24px;border-top:1px solid var(--line)}
.bn-pay-lbl{font-size:12px;font-weight:700;color:var(--faint);text-transform:uppercase;letter-spacing:.1em}
.bn-trust{display:flex;flex-wrap:wrap;gap:22px;margin-top:24px;padding-top:22px;border-top:1px solid var(--line)}
.bn-tgroup{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.bn-tlbl{font-size:11px;font-weight:700;color:var(--faint);text-transform:uppercase;letter-spacing:.08em}
.bn-chip{display:inline-flex;align-items:center;justify-content:center;height:34px;padding:0 10px;
  background:rgba(255,255,255,.06);border:1px solid var(--line2);border-radius:8px}
.bn-chip.emblem{height:44px}
.bn-chip img{max-height:22px;width:auto;object-fit:contain}
.bn-chip.emblem img{max-height:34px}
.bn-age{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;
  background:var(--violet);color:#fff;font-size:11px;font-weight:800}
.bn-legal{margin-top:26px;padding-top:20px;border-top:1px solid var(--line);
  color:var(--faint);font-size:12.5px;display:flex;flex-direction:column;gap:8px}
.bn-legal .rgline{display:flex;align-items:center;gap:8px}

/* ================================================= RESPONSIVE */
@media(max-width:980px){
  .bn-phead-in{grid-template-columns:1fr}
  .bn-phead-media{display:none}
  .bn-app{grid-template-columns:1fr}
  .bn-phone{max-height:360px;margin-inline:auto}
  .bn-foot-top{grid-template-columns:1fr 1fr}
  .bn-mosaic{grid-template-columns:repeat(4,minmax(0,1fr))}
  .c4,.c6{grid-column:span 4}.c3{grid-column:span 2}
  .bn-tiles{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(max-width:860px){
  .bn-menu{display:none}
  .bn-burger{display:inline-block}
  .bn-menu.open{display:flex;position:absolute;top:62px;left:0;right:0;flex-direction:column;
    align-items:stretch;gap:2px;padding:12px 16px;background:#160826;border-bottom:1px solid var(--line)}
  .bn-menu.open a{padding:12px}
  .bn-grid.g3,.bn-grid.g4,.bn-pfs,.bn-promos{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bn-dealers{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:600px){
  body{font-size:15.5px}
  .bn-bar-in{gap:8px}
  .bn-brand{font-size:19px}
  .bn-cta{padding:11px 16px;font-size:14px}
  .bn-tools .bn-cta{display:none}   /* header CTA hidden on mobile; the gold hero CTA drives it */
  .bn-lang a{padding:6px 9px}
  .bn-mosaic{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}
  .c2,.c3,.c4,.c6{grid-column:span 2}
  .r2{grid-row:span 1}
  .bn-tiles{grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
  .bn-grid.g2{grid-template-columns:1fr}
  .bn-tile.feature{min-height:220px}
}
@media(max-width:400px){
  .bn-grid.g3,.bn-grid.g4,.bn-pfs,.bn-promos,.bn-dealers{grid-template-columns:1fr}
}

/* wrap-guard: brand marks, lang chips, nav and CTAs never break to two lines */
.bn-brand,.bn-menu a,.bn-lang a,.bn-cta,.bn-kicker,.bn-statlbl{white-space:nowrap}