/* ===========================
   KOKOBET EDITORIAL THEME (NL)
   =========================== */

.kb{
  --kb-bg:#07080c;
  --kb-bg2:#0b0d14;
  --kb-paper: rgba(255,255,255,.04);
  --kb-line: rgba(255,255,255,.10);
  --kb-text: rgba(255,255,255,.90);
  --kb-muted: rgba(255,255,255,.70);
  --kb-dim: rgba(255,255,255,.58);

  --kb-accent: #f4c76a;
  --kb-accent2:#7aa7ff;
  --kb-ok:#59e3a5;

  background: radial-gradient(900px 520px at 10% 10%, rgba(122,167,255,.14), transparent 55%),
              radial-gradient(900px 520px at 85% 15%, rgba(244,199,106,.12), transparent 50%),
              var(--kb-bg);
  color: var(--kb-text);
}

.kb-container{
  width:min(1120px, calc(100% - 32px));
  margin:0 auto;
}

/* header */
.kb-header{
  position:sticky; top:0; z-index:50;
  background: rgba(7,8,12,.72);
  backdrop-filter: blur(12px);
  border-bottom:1px solid var(--kb-line);
}
.kb-header__inner{
  display:flex; align-items:center; gap:14px;
  padding: 12px 0;
}
.kb-brand{ display:inline-flex; align-items:center; }

.kb-nav{ margin-left:auto; display:flex; gap:10px; align-items:center; }
.kb-nav__a{
  padding:10px 12px; border-radius:999px;
  border:1px solid transparent;
  color: var(--kb-muted);
  text-decoration:none;
  font-weight:800; font-size:14px;
}
.kb-nav__a:hover{ border-color: var(--kb-line); color: var(--kb-text); background: rgba(255,255,255,.03); }

.kb-actions{ display:flex; gap:10px; align-items:center; }

/* mobile nav button */
.kb-navbtn{
  display:none;
  margin-left:auto;
  gap:10px;
  align-items:center;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid var(--kb-line);
  background: rgba(255,255,255,.03);
  color: var(--kb-text);
  font-weight:900;
}
.kb-navbtn__bars{
  width:18px; height:12px; position:relative; display:inline-block;
}
.kb-navbtn__bars::before,
.kb-navbtn__bars::after{
  content:""; position:absolute; left:0; right:0; height:2px;
  background: rgba(255,255,255,.80);
  border-radius:99px;
}
.kb-navbtn__bars::before{ top:0; }
.kb-navbtn__bars::after{ bottom:0; }
.kb-navbtn__txt{ font-size:13px; opacity:.9; }

@media (max-width: 980px){
  .kb-navbtn{ display:inline-flex; }
  .kb-nav{
    display:none;
    position:absolute;
    left:16px; right:16px; top:62px;
    flex-direction:column;
    padding:10px;
    border-radius:18px;
    background: rgba(10,14,24,.92);
    border:1px solid rgba(255,255,255,.12);
    box-shadow: 0 24px 60px rgba(0,0,0,.65);
  }
  .kb-nav.is-open{ display:flex; }
  .kb-actions{ margin-left:0; }
}

/* buttons (new, independent of site.css) */
.kb-btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px;
  padding: 10px 14px;
  border-radius: 999px;
  font-weight: 900;
  text-decoration:none;
  border:1px solid var(--kb-line);
  background: rgba(255,255,255,.03);
  color: var(--kb-text);
}
.kb-btn--solid{
  background: linear-gradient(135deg, rgba(244,199,106,.20), rgba(122,167,255,.16));
  border-color: rgba(244,199,106,.28);
}
.kb-btn--ghost{ background: rgba(255,255,255,.02); }
.kb-btn--outline{ background: transparent; }

/* hero */
.kb-hero{ padding: 34px 0 18px; }
.kb-hero__grid{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 18px;
  align-items:start;
}
@media (max-width: 980px){ .kb-hero__grid{ grid-template-columns:1fr; } }

.kb-kicker{
  margin:0 0 10px;
  font-weight:900;
  color: rgba(255,255,255,.70);
  letter-spacing:.12em;
  text-transform:uppercase;
  font-size: 12px;
}
.kb-h1{
  margin:0 0 10px;
  font-size: clamp(34px, 2.8vw + 18px, 60px);
  line-height:1.03;
  letter-spacing:-.02em;
}
.kb-sub{
  margin:0 0 14px;
  color: var(--kb-muted);
  max-width: 72ch;
  font-size: 16px;
  line-height:1.6;
}
.kb-hero__ctas{ display:flex; flex-wrap:wrap; gap:10px; margin: 12px 0 12px; }

.kb-tags{ display:flex; flex-wrap:wrap; gap:10px; margin-top: 10px; }
.kb-tag{
  padding: 10px 12px;
  border-radius: 999px;
  border:1px solid var(--kb-line);
  background: rgba(255,255,255,.02);
  color: rgba(255,255,255,.78);
  font-weight:800;
  font-size:13px;
}
.kb-updated{ margin-top:12px; color: var(--kb-dim); font-size: 13px; }

/* image style: duotone + grain-ish */
.kb-shot{
  border-radius: 22px;
  overflow:hidden;
  border:1px solid var(--kb-line);
  background: rgba(255,255,255,.02);
  box-shadow: 0 22px 70px rgba(0,0,0,.55);
  position:relative;
}
.kb-shot img{
  width:100%; height: 280px; object-fit: cover; display:block;
  filter: saturate(.95) contrast(1.05) brightness(.95);
}
.kb-shot::after{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(700px 260px at 15% 15%, rgba(244,199,106,.18), transparent 55%),
    linear-gradient(180deg, rgba(0,0,0,.00), rgba(0,0,0,.45));
  pointer-events:none;
}
.kb-shot__cap{
  position:absolute; left:14px; bottom:14px;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(10,14,24,.72);
  border:1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(10px);
  max-width: 92%;
}
.kb-shot__cap small{ display:block; color: rgba(255,255,255,.72); }
.kb-shot__cap b{ display:block; margin-top:2px; }

.kb-mini{
  display:grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 12px;
}
.kb-mini__card{
  padding: 14px;
  border-radius: 18px;
  border:1px solid var(--kb-line);
  background: rgba(255,255,255,.03);
}
.kb-mini__card b{ display:block; margin-bottom:6px; font-size:14px; }
.kb-mini__card span{ display:block; color: var(--kb-muted); font-size:13px; line-height:1.5; }
.kb-mini__link{ display:inline-block; margin-top:10px; color: rgba(244,199,106,.92); text-decoration:none; font-weight:900; }

/* sections */
.kb-section{ padding: 34px 0; }
.kb-section--alt{
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.00));
  border-top: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.kb-h2{ margin:0 0 12px; font-size: 22px; letter-spacing:-.01em; }
.kb-text{ margin:0 0 16px; color: var(--kb-muted); max-width: 80ch; line-height:1.65; }

/* bento */
.kb-bento{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 12px;
  margin-top: 14px;
}
.kb-tile{
  grid-column: span 4;
  padding: 16px;
  border-radius: 20px;
  border:1px solid var(--kb-line);
  background: rgba(255,255,255,.03);
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
}
.kb-tile--wide{ grid-column: span 8; }
.kb-tile--tall{ grid-column: span 4; grid-row: span 2; }
.kb-tile h3{ margin:0 0 8px; font-size: 16px; }
.kb-tile p{ margin:0; color: var(--kb-muted); line-height:1.6; }

.kb-tile__row{ margin-top:12px; display:flex; flex-wrap:wrap; gap:10px; }

.kb-steps{ margin: 10px 0 0; padding-left: 18px; color: var(--kb-muted); }
.kb-steps li{ margin: 8px 0; line-height:1.5; }

@media (max-width: 980px){
  .kb-bento{ grid-template-columns: 1fr; }
  .kb-tile, .kb-tile--wide, .kb-tile--tall{ grid-column: auto; grid-row:auto; }
}

/* split + timeline */
.kb-split{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 18px;
  align-items:start;
}
@media (max-width: 980px){ .kb-split{ grid-template-columns:1fr; } }

.kb-timeline{
  border-radius: 22px;
  border:1px solid var(--kb-line);
  background: rgba(255,255,255,.03);
  overflow:hidden;
}
.kb-point{
  padding: 14px 16px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.kb-point:last-child{ border-bottom:none; }
.kb-point b{ display:block; margin-bottom:4px; }
.kb-point span{ display:block; color: var(--kb-muted); line-height:1.5; }

/* payment cards */
.kb-cards3{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 14px;
}
.kb-card{
  padding: 16px;
  border-radius: 20px;
  border:1px solid var(--kb-line);
  background: rgba(255,255,255,.03);
}
.kb-card h3{ margin:0 0 8px; font-size:16px; }
.kb-card p{ margin:0; color: var(--kb-muted); line-height:1.6; }
@media (max-width: 980px){ .kb-cards3{ grid-template-columns:1fr; } }

.kb-row{ display:flex; flex-wrap:wrap; gap:10px; margin-top: 14px; }

/* faq */
.kb-faq{ margin-top: 12px; }
.kb-faq__item{
  margin: 10px 0;
  padding: 14px 16px;
  border-radius: 18px;
  border:1px solid var(--kb-line);
  background: rgba(255,255,255,.03);
}
.kb-faq__item summary{
  cursor:pointer;
  font-weight: 950;
  color: rgba(255,255,255,.92);
}
.kb-faq__item p{
  margin: 10px 0 0;
  color: var(--kb-muted);
  line-height:1.65;
}

/* footer */
.kb-footer{
  padding: 28px 0;
  border-top:1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.22);
}
.kb-footer__inner{
  display:grid;
  grid-template-columns: 1.2fr .8fr .4fr;
  gap: 14px;
  align-items:start;
}
.kb-footer__left p{ margin:10px 0 0; color: var(--kb-muted); line-height:1.55; }
.kb-footer__links{ display:flex; flex-direction:column; gap:8px; }
.kb-footer__links a{ color: rgba(255,255,255,.78); text-decoration:none; }
.kb-footer__copy{ color: rgba(255,255,255,.62); font-weight:800; }
@media (max-width: 980px){ .kb-footer__inner{ grid-template-columns:1fr; } }
/* =========================
   KOKOBET EDITORIAL POLISH
   ========================= */

/* Global safety */
img{max-width:100%;height:auto;}

/* Smooth animated background (neutral, not brown) */
body.kb{
  background:
    radial-gradient(900px 520px at 18% 10%, rgba(255,255,255,.06), rgba(0,0,0,0) 60%),
    radial-gradient(760px 520px at 82% 18%, rgba(255,255,255,.05), rgba(0,0,0,0) 62%),
    radial-gradient(880px 620px at 52% 92%, rgba(255,255,255,.04), rgba(0,0,0,0) 55%),
    linear-gradient(180deg, #0b0c10 0%, #07080b 100%);
  background-size: 120% 120%;
  animation: kb-bgflow 18s ease-in-out infinite;
}

@keyframes kb-bgflow{
  0%   { background-position: 0% 0%, 100% 0%, 50% 100%, 0% 0%; }
  50%  { background-position: 30% 10%, 70% 15%, 55% 80%, 0% 0%; }
  100% { background-position: 0% 0%, 100% 0%, 50% 100%, 0% 0%; }
}
@media (prefers-reduced-motion: reduce){
  body.kb{ animation: none; }
}

/* Skip link */
.skip-link{
  position:absolute;
  left:-999px;
  top:auto;
  width:1px;height:1px;
  overflow:hidden;
}
.skip-link:focus{
  left:16px;
  top:12px;
  width:auto;height:auto;
  padding:10px 12px;
  border-radius:12px;
  background:rgba(20,14,10,.92);
  color:#fff;
  z-index:100;
  border:1px solid rgba(255,255,255,.16);
  outline:none;
}

/* Breadcrumbs */
.kb-breadcrumbs{ padding: 12px 0 0; }
.kb-breadcrumbs__list{
  margin: 0;
  padding: 0 16px;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  max-width: 1180px;
  margin-left: auto;
  margin-right: auto;
}
.kb-breadcrumbs__item{
  font-size: 13px;
  color: rgba(255,255,255,.70);
}
.kb-breadcrumbs__item + .kb-breadcrumbs__item::before{
  content: "›";
  display: inline-block;
  margin-right: 8px;
  color: rgba(255,255,255,.45);
}
.kb-breadcrumbs__a{
  color: rgba(255,255,255,.82);
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.18);
}
.kb-breadcrumbs__a:hover{
  border-bottom-color: rgba(255,255,255,.38);
}

/* Startbar (CTA under H1) */
.kb-startbar{
  margin-top:14px;
  padding:14px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
  display:grid;
  grid-template-columns: 1fr auto;
  gap:14px;
  align-items:center;
}
.kb-startbar__left{
  display:flex;
  gap:12px;
  align-items:center;
  min-width: 0;
}
.kb-startbar__media{
  width:56px;height:56px;
  border-radius:14px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.20);
  flex:0 0 auto;
}
.kb-startbar__media img{width:100%;height:100%;object-fit:cover;display:block;}
.kb-startbar__txt{min-width:0;}
.kb-startbar__txt b{
  display:block;
  font-size:14px;
  letter-spacing:.2px;
  margin-bottom:2px;
}
.kb-startbar__txt span{
  display:block;
  font-size:13px;
  color:rgba(255,255,255,.72);
  line-height:1.25;
}
.kb-startbar__actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

/* Feature chips */
.kb-features{
  margin-top:14px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:10px;
}
.kb-feat{
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.02);
  font-size:13px;
  color:rgba(255,255,255,.75);
  line-height:1.25;
}
.kb-feat b{color:rgba(255,255,255,.92); font-weight:700;}

/* Media / figures */
.kb-media{
  margin-top:12px;
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.02);
}
.kb-media img{width:100%;height:auto;display:block;}
.kb-media--mt{ margin-top:16px; }

.kb-fig{
  margin:14px 0 0;
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.02);
}
.kb-fig figcaption{
  padding:10px 12px;
  font-size:13px;
  color:rgba(255,255,255,.72);
  border-top:1px solid rgba(255,255,255,.08);
  line-height:1.25;
}

/* Back-to-top */
.kb-top{
  position: fixed;
  right: 16px;
  bottom: 16px;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(20,14,10,.65);
  color: rgba(255,255,255,.92);
  display: grid;
  place-items: center;
  cursor: pointer;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease, background .18s ease;
  box-shadow: 0 18px 45px rgba(0,0,0,.45);
  z-index: 50;
}
.kb-top:hover{ background: rgba(30,20,14,.78); }
.kb-top.is-show{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

@media (max-width: 980px){
  .kb-startbar{grid-template-columns:1fr;}
  .kb-startbar__actions{justify-content:flex-start;}
  .kb-features{grid-template-columns:1fr;}
}
/* ===========================
   KOKOBET BONUS — UI CARDS
   (append to end of kokobet-bonus.css)
   =========================== */

.kb-bonus-hero2{
  position: relative;
  overflow: hidden;
}
.kb-bonus-hero2::before{
  content:"";
  position:absolute;
  inset:-120px;
  background:
    radial-gradient(900px 520px at 14% 18%, rgba(120,190,255,.14), rgba(0,0,0,0) 60%),
    radial-gradient(760px 520px at 82% 16%, rgba(170,120,255,.10), rgba(0,0,0,0) 62%),
    radial-gradient(880px 620px at 52% 92%, rgba(90,230,200,.10), rgba(0,0,0,0) 55%);
  pointer-events:none;
  filter: blur(0px);
  opacity: .9;
}

.kb-bonus-hero2__grid{
  position: relative;
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 18px;
  align-items: start;
}

.kb-bonus-hero2__text{
  margin-top: 12px;
  max-width: 64ch;
}

.kb-bonusbar2{
  margin-top: 14px;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.035);
  display:grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items:center;
  backdrop-filter: blur(10px);
}
.kb-bonusbar2__left{
  display:flex;
  gap: 12px;
  align-items:center;
  min-width:0;
}
.kb-bonusbar2__media{
  width: 56px;
  height: 56px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.20);
  flex: 0 0 auto;
}
.kb-bonusbar2__media img{width:100%;height:100%;object-fit:cover;display:block;}
.kb-bonusbar2__txt{min-width:0;}
.kb-bonusbar2__txt b{display:block;font-size:14px;margin-bottom:2px;letter-spacing:.2px;}
.kb-bonusbar2__txt span{display:block;font-size:13px;color:rgba(255,255,255,.72);line-height:1.25;}
.kb-bonusbar2__actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end;}

.kb-visualRow{
  margin-top: 12px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.kb-visualRow__item{
  margin: 0;
  border-radius: 16px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
}
.kb-visualRow__item img{
  width:100%;
  height: 150px;
  object-fit: cover;
  display:block;
}
.kb-visualRow__item figcaption{
  padding: 8px 10px;
  font-size: 12.5px;
  color: rgba(255,255,255,.70);
  border-top: 1px solid rgba(255,255,255,.08);
}

.kb-cardMedia{
  border-radius: 18px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
}
.kb-cardMedia img{width:100%;height:auto;display:block;}
.kb-cardMedia__cap{
  padding: 12px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.kb-cardMedia__cap b{display:block;color:rgba(255,255,255,.92);margin-bottom:4px;}
.kb-cardMedia__cap span{display:block;color:rgba(255,255,255,.72);font-size:13px;line-height:1.25;}

.kb-miniCards{
  margin-top: 10px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.kb-miniCard{
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  padding: 12px;
}
.kb-miniCard b{display:block;margin-bottom:4px;color:rgba(255,255,255,.92);}
.kb-miniCard span{display:block;color:rgba(255,255,255,.72);font-size:13px;line-height:1.25;}
.kb-miniCard__a{
  display:inline-block;
  margin-top: 10px;
  text-decoration:none;
  color: rgba(255,255,255,.86);
  border-bottom: 1px solid rgba(255,255,255,.18);
}
.kb-miniCard__a:hover{border-bottom-color: rgba(255,255,255,.40);}

.kb-bonusCards{
  margin-top: 14px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.kb-bonusCard{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
  padding: 14px;
}
.kb-bonusCard__top{
  display:flex;
  align-items:center;
  gap: 10px;
  margin-bottom: 8px;
}
.kb-bonusCard__top > b{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display:grid;
  place-items:center;
  background: rgba(120,190,255,.14);
  border: 1px solid rgba(120,190,255,.22);
  color: rgba(255,255,255,.92);
  font-weight: 800;
}
.kb-bonusCard h3{margin:0;font-size:15px;}
.kb-bonusCard p{margin:0;color:rgba(255,255,255,.72);font-size:13px;line-height:1.35;}

.kb-noteGrid{
  margin-top: 12px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.kb-note{
  border-radius: 18px;
  padding: 12px 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
}
.kb-note b{display:block;margin-bottom:4px;color:rgba(255,255,255,.92);}
.kb-note span{display:block;color:rgba(255,255,255,.72);font-size:13px;line-height:1.25;}

.kb-note--good{
  border-color: rgba(90,230,200,.18);
  background: rgba(90,230,200,.06);
}
.kb-note--warn{
  border-color: rgba(255,180,90,.18);
  background: rgba(255,180,90,.06);
}
.kb-note--info{
  border-color: rgba(170,120,255,.18);
  background: rgba(170,120,255,.06);
}

.kb-checkCards{
  margin-top: 12px;
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}
.kb-checkCard{
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
  padding: 12px;
}
.kb-checkCard b{display:block;color:rgba(255,255,255,.92);margin-bottom:4px;}
.kb-checkCard span{display:block;color:rgba(255,255,255,.72);font-size:13px;line-height:1.25;}

.kb-callout--clean{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  padding: 12px 14px;
}

.kb-mediaCard2{
  margin-top: 12px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
}
.kb-mediaCard2 img{
  width:100%;
  height: 300px;
  object-fit: cover;
  display:block;
}
.kb-mediaCard2__cap{
  padding: 12px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.kb-mediaCard2__cap b{
  display:block;
  margin-bottom: 4px;
  color: rgba(255,255,255,.92);
}
.kb-mediaCard2__cap span{
  display:block;
  color: rgba(255,255,255,.72);
  font-size: 13px;
  line-height: 1.25;
}

@media (max-width: 980px){
  .kb-bonus-hero2__grid{grid-template-columns: 1fr;}
  .kb-bonusbar2{grid-template-columns:1fr;}
  .kb-bonusbar2__actions{justify-content:flex-start;}
  .kb-miniCards{grid-template-columns: 1fr;}
  .kb-bonusCards{grid-template-columns: 1fr;}
  .kb-noteGrid{grid-template-columns: 1fr;}
  .kb-checkCards{grid-template-columns: 1fr;}
  .kb-visualRow{grid-template-columns: 1fr;}
  .kb-visualRow__item img{height: 170px;}
  .kb-mediaCard2 img{height: 240px;}
}
/* ===========================
   KOKOBET PROMO PAGE (NL)
   HERO grid fix (no duplicates)
   =========================== */

/* HERO background */
.kb-promo-hero{ position: relative; overflow:hidden; }
.kb-promo-hero::before{
  content:"";
  position:absolute;
  inset:-140px;
  background:
    radial-gradient(900px 520px at 16% 18%, rgba(120,190,255,.14), rgba(0,0,0,0) 60%),
    radial-gradient(760px 520px at 84% 20%, rgba(170,120,255,.10), rgba(0,0,0,0) 62%),
    radial-gradient(880px 620px at 52% 92%, rgba(90,230,200,.10), rgba(0,0,0,0) 55%);
  pointer-events:none;
  opacity:.95;
}

/* ✅ ONE grid definition */
.kb-promo-hero__grid{
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  gap: 28px;
  align-items: start;
}

/* text width */
.kb-promo-hero__text{ margin-top:12px; max-width: 66ch; }

/* ✅ sticky right column to remove "empty right side" feeling */
.kb-promo-hero__aside{
  position: sticky;
  top: 96px;              /* adjust if header higher */
  align-self: start;
}

/* promo bar */
.kb-promoBar{
  margin-top:14px;
  padding:14px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.035);
  backdrop-filter: blur(10px);
  display:grid;
  grid-template-columns: 1fr auto;
  gap:14px;
  align-items:center;
}
.kb-promoBar__left{
  display:flex;
  gap:12px;
  align-items:center;
  min-width:0;
}
.kb-promoBar__media{
  width:56px;height:56px;
  border-radius:14px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.20);
  flex:0 0 auto;
}
.kb-promoBar__media img{width:100%;height:100%;object-fit:cover;display:block;}
.kb-promoBar__txt b{display:block;font-size:14px;margin-bottom:2px;letter-spacing:.2px;}
.kb-promoBar__txt span{display:block;font-size:13px;color:rgba(255,255,255,.72);line-height:1.25;}
.kb-promoBar__actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end;}

.kb-promo-pills{ margin-top:12px; display:flex; flex-wrap:wrap; gap:8px; }
.kb-bonus-row--mt { margin-top: 14px; }

.kb-promoSteps{
  margin-top: 14px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.kb-stepCard{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
  padding: 14px;
}
.kb-stepCard__n{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display:grid;
  place-items:center;
  background: rgba(120,190,255,.14);
  border: 1px solid rgba(120,190,255,.22);
  color: rgba(255,255,255,.92);
  font-weight: 800;
}
.kb-stepCard h3{ margin: 10px 0 6px; font-size: 15px; }
.kb-stepCard p{ margin: 0; color: rgba(255,255,255,.72); font-size: 13px; line-height: 1.35; }

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

/* mobile */
@media (max-width: 980px){
  .kb-promo-hero__grid{ grid-template-columns: 1fr; gap: 18px; }
  .kb-promo-hero__aside{ position: static; }
  .kb-promoBar{ grid-template-columns: 1fr; }
  .kb-promoBar__actions{ justify-content:flex-start; }
  .kb-promoSteps{ grid-template-columns: 1fr; }
  .kb-bonusCards--promo{ grid-template-columns: 1fr; }
}
/* checklist layout */
.kb-checkCardBlock{ margin-top: 18px; }
.kb-checkTitle{ margin-bottom: 10px; }
.kb-checkList{ margin: 0; }
.kb-checkNote{ margin: 0; color: rgba(255,255,255,.78); }

.kb-checkRow{
  display:grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 240px);
  gap: 16px;
  align-items:start;
  margin: 0 0 14px 0;
}

.kb-checkImg{
  border-radius: 16px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
}
.kb-checkImg img{ width:100%; height:auto; display:block; }
.kb-checkImg__cap{
  padding: 10px 12px;
  border-top: 1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.75);
  font-size: 13px;
  line-height: 1.25;
}
.kb-checkImg__cap b{ display:block; color: rgba(255,255,255,.92); margin-bottom: 2px; }

.kb-checkCta{ margin-bottom: 10px; }

.kb-mediaCard2--mt{ margin-top: 16px; }

@media (max-width: 980px){
  .kb-checkRow{ grid-template-columns: 1fr; }
}
/* =========================
   KOKOBET HOTFIX GRID PACK — BLUE EDITION
   (stabilize layout + mobile, no brown)
   ========================= */

/* 0) Hard safety */
* { box-sizing: border-box; }
html, body { width: 100%; overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
.kb-container { width: min(1120px, calc(100% - 32px)); margin: 0 auto; }

/* =========================
   0.5) Theme tokens (BLUE)
   ========================= */
body.kb{
  --kb-bg: #070a14;
  --kb-bg2:#0a1022;
  --kb-panel: rgba(255,255,255,.035);
  --kb-panel2: rgba(255,255,255,.05);
  --kb-line: rgba(255,255,255,.10);
  --kb-line2: rgba(122,167,255,.20);

  --kb-text: rgba(246,249,255,.92);
  --kb-muted: rgba(246,249,255,.74);
  --kb-dim: rgba(246,249,255,.60);

  --kb-accent: #7aa7ff;     /* main blue */
  --kb-accent2:#59e3ff;     /* cyan */
  --kb-ok:#59e3a5;

  background:
    radial-gradient(900px 520px at 12% 12%, rgba(122,167,255,.18), transparent 55%),
    radial-gradient(900px 520px at 85% 18%, rgba(89,227,255,.10), transparent 52%),
    radial-gradient(900px 520px at 70% 85%, rgba(122,167,255,.10), transparent 55%),
    var(--kb-bg);
  color: var(--kb-text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height: 1.55;
}

.kb a { color: inherit; text-decoration: none; }
.kb a:hover { text-decoration: underline; }

/* 2) Header */
.kb-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(7, 10, 20, 0.78);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(122,167,255,0.14);
}
.kb-header__inner {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 0;
}
.kb-brand img { display: block; }

.kb-nav { display: flex; gap: 10px; align-items: center; margin-left: 10px; }
.kb-nav__a {
  padding: 10px 10px;
  border-radius: 12px;
  color: var(--kb-muted);
}
.kb-nav__a[aria-current="page"] {
  background: rgba(122, 167, 255, 0.12);
  border: 1px solid rgba(122, 167, 255, 0.26);
  color: rgba(246,249,255,.95);
}

.kb-actions { margin-left: auto; display: flex; gap: 10px; }

/* Buttons */
.kb-btn {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 14px;
  padding: 10px 14px;
  font-weight: 650;
  border: 1px solid transparent;
  white-space: nowrap;
}

/* Primary: blue solid */
.kb-btn--solid {
  background: linear-gradient(180deg, rgba(122,167,255,1), rgba(89,227,255,.92));
  color: #061022;
  border-color: rgba(122,167,255,0.22);
  box-shadow: 0 14px 40px rgba(14, 60, 145, .35);
}
.kb-btn--solid:hover { filter: brightness(1.05); text-decoration: none; }

/* Ghost: subtle blue outline */
.kb-btn--ghost {
  background: rgba(255,255,255,0.02);
  border-color: rgba(122,167,255,0.18);
  color: rgba(246,249,255,.92);
}
.kb-btn--ghost:hover {
  border-color: rgba(122,167,255,0.30);
  background: rgba(122,167,255,0.06);
  text-decoration: none;
}

/* Outline: stronger accent outline */
.kb-btn--outline {
  background: rgba(122, 167, 255, 0.08);
  border-color: rgba(122, 167, 255, 0.30);
  color: rgba(246,249,255,.95);
}
.kb-btn--outline:hover {
  border-color: rgba(89,227,255,0.36);
  background: rgba(122,167,255,0.11);
  text-decoration: none;
}

/* Mobile menu button */
.kb-navbtn { display: none; }

/* 3) Breadcrumbs */
.kb-breadcrumbs { padding: 12px 0; }
.kb-breadcrumbs__list {
  display: flex; gap: 10px; flex-wrap: wrap;
  list-style: none; margin: 0; padding: 0;
  color: var(--kb-dim);
}
.kb-breadcrumbs__a { color: rgba(246,249,255,.82); }

/* 4) Sections spacing */
.kb-section { padding: 44px 0; }
.kb-section--alt {
  background: linear-gradient(180deg, rgba(122,167,255,0.06), rgba(255,255,255,0.02));
  border-top: 1px solid rgba(122,167,255,0.12);
  border-bottom: 1px solid rgba(122,167,255,0.12);
}
.kb-h1 { font-size: clamp(2.1rem, 1.6rem + 2vw, 3rem); line-height: 1.05; margin: 0 0 10px; }
.kb-h2 { font-size: clamp(1.4rem, 1.2rem + 1vw, 1.9rem); line-height: 1.2; margin: 0 0 12px; }
.kb-text, .kb-sub { color: var(--kb-muted); margin: 0 0 14px; }
.kb-kicker { color: var(--kb-dim); margin: 0 0 10px; }

/* 5) HERO new grid */
.kb-hero { padding: 22px 0 10px; }
.kb-hero__grid--new {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: 18px;
  align-items: start;
}
.kb-hero__lead--new {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(122,167,255,0.16);
  border-radius: 22px;
  padding: 18px;
  box-shadow: 0 18px 55px rgba(0,0,0,.42);
}
.kb-rail {
  display: grid;
  gap: 14px;
}
.kb-rail__shot, .kb-rail__miniitem {
  margin: 0;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(122,167,255,0.14);
  border-radius: 22px;
  overflow: hidden;
}
.kb-rail__shot img, .kb-rail__miniitem img { width: 100%; height: auto; }
.kb-rail__shot figcaption, .kb-rail__miniitem figcaption {
  padding: 10px 12px;
  color: rgba(246,249,255,.72);
  font-size: 0.95rem;
}
.kb-rail__mini { display: grid; gap: 14px; }

/* H1 CTA row */
.kb-h1-cta {
  display: flex; gap: 12px; align-items: center;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid rgba(122,167,255,0.14);
  background: rgba(122,167,255,0.05);
  margin: 12px 0 14px;
}
.kb-h1-cta__img {
  width: 84px; height: 84px;
  border-radius: 16px;
  border: 1px solid rgba(122,167,255,0.18);
  object-fit: cover;
}
.kb-h1-cta__actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* Startbar */
.kb-startbar {
  display: flex; gap: 12px; align-items: center; justify-content: space-between;
  padding: 14px;
  border-radius: 18px;
  background: rgba(122, 167, 255, 0.10);
  border: 1px solid rgba(122, 167, 255, 0.22);
  margin: 10px 0 0;
}
.kb-startbar__txt b { display: block; margin-bottom: 4px; }
.kb-startbar__txt span { color: rgba(246,249,255,.78); }

/* Check row */
.kb-checkrow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 14px 0 10px;
}
.kb-check {
  padding: 12px;
  border-radius: 18px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(122,167,255,0.12);
}
.kb-check b { display: block; margin-bottom: 6px; }
.kb-check span { color: rgba(246,249,255,.76); }

/* 6) Duo panels */
.kb-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.kb-panel {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(122,167,255,0.12);
  border-radius: 22px;
  padding: 18px;
}
.kb-panel--soft {
  background: rgba(122,167,255,0.06);
  border-color: rgba(89,227,255,0.16);
}
.kb-list { margin: 10px 0 14px; padding-left: 18px; color: rgba(246,249,255,.84); }
.kb-list li { margin: 6px 0; }

/* Metrics */
.kb-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 12px;
  margin: 12px 0 14px;
}
.kb-metric {
  padding: 12px;
  border-radius: 18px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(122,167,255,0.12);
}
.kb-metric b { display: block; margin-bottom: 6px; }

/* 7) Grid cards */
.kb-grid4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 12px;
  margin-top: 14px;
}
.kb-card--new {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(122,167,255,0.12);
  border-radius: 22px;
  padding: 14px;
}
.kb-card--new h3 { margin: 0 0 8px; font-size: 1.05rem; }
.kb-card--new p { margin: 0; color: rgba(246,249,255,.80); }

/* Media split */
.kb-media--split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 14px;
}
.kb-media--split img {
  border-radius: 22px;
  border: 1px solid rgba(122,167,255,0.12);
  background: rgba(122,167,255,0.03);
}

/* FAQ */
.kb-faq { display: grid; gap: 10px; margin-top: 12px; }
.kb-faq__item {
  border-radius: 18px;
  border: 1px solid rgba(122,167,255,0.12);
  background: rgba(255,255,255,0.02);
  padding: 10px 12px;
}
.kb-faq__item summary { cursor: pointer; font-weight: 650; }
.kb-faq__item p { margin: 8px 0 0; color: rgba(246,249,255,.78); }

/* Footer */
.kb-footer {
  border-top: 1px solid rgba(122,167,255,0.14);
  padding: 26px 0;
  background: rgba(0,0,0,0.28);
}
.kb-footer__inner {
  display: grid;
  grid-template-columns: 1.2fr 1fr auto;
  gap: 14px;
  align-items: start;
}
.kb-footer__links { display: grid; gap: 8px; }
.kb-footer__links a { color: rgba(246,249,255,.80); }
.kb-footer__copy { color: rgba(246,249,255,.56); }

/* Back-to-top */
.kb-top {
  position: fixed; right: 14px; bottom: 14px;
  width: 44px; height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(122,167,255,0.14);
  background: rgba(7,10,20,0.86);
  color: rgba(246,249,255,.95);
  display: none;
}
.kb-top.is-show { display: inline-flex; align-items: center; justify-content: center; }

/* =========================
   RESPONSIVE (TZ must-have)
   ========================= */
@media (max-width: 992px) {
  .kb-hero__grid--new { grid-template-columns: 1fr; }
  .kb-duo { grid-template-columns: 1fr; }
  .kb-grid4 { grid-template-columns: 1fr 1fr; }
  .kb-metrics { grid-template-columns: 1fr; }
  .kb-media--split { grid-template-columns: 1fr; }
  .kb-footer__inner { grid-template-columns: 1fr; }
}

@media (max-width: 980px) {
  .kb-navbtn { display: inline-flex; align-items: center; gap: 10px; margin-left: auto; }
  .kb-actions { display: none; }

  .kb-nav {
    position: absolute;
    left: 0; right: 0; top: 62px;
    display: none;
    flex-direction: column;
    gap: 6px;
    padding: 12px 16px;
    background: rgba(7,10,20,0.96);
    border-bottom: 1px solid rgba(122,167,255,0.16);
  }
  .kb-nav.is-open { display: flex; }
}

@media (max-width: 560px) {
  .kb-h1-cta { flex-direction: column; align-items: flex-start; }
  .kb-checkrow { grid-template-columns: 1fr; }
  .kb-grid4 { grid-template-columns: 1fr; }
}
/* ==========================================
   KOKOBET BONUS — PREMIUM EDITORIAL DESIGN
   (wrap images with text + responsive)
   ========================================== */

/* ---------- Base tokens (cool + elegant) ---------- */
body.kb{
  --kb-bg: #070A12;
  --kb-bg2:#0A1024;
  --kb-surface: rgba(255,255,255,.04);
  --kb-surface2: rgba(255,255,255,.06);
  --kb-line: rgba(255,255,255,.10);

  --kb-text: rgba(255,255,255,.92);
  --kb-muted: rgba(255,255,255,.72);
  --kb-dim: rgba(255,255,255,.60);

  --kb-accent: #7AA7FF;   /* blue */
  --kb-accent2:#59E3A5;   /* mint */
  --kb-warn:#F4C76A;      /* warm highlight (tiny, not brown) */

  --kb-r-lg: 22px;
  --kb-r-md: 16px;
  --kb-r-sm: 12px;

  --kb-shadow: 0 22px 70px rgba(0,0,0,.55);
  --kb-shadow2: 0 14px 40px rgba(0,0,0,.45);

  background:
    radial-gradient(900px 520px at 10% 10%, rgba(122,167,255,.18), transparent 60%),
    radial-gradient(820px 520px at 90% 15%, rgba(89,227,165,.10), transparent 55%),
    radial-gradient(900px 520px at 50% 100%, rgba(122,167,255,.12), transparent 55%),
    linear-gradient(180deg, var(--kb-bg), var(--kb-bg2));
  color: var(--kb-text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height: 1.6;
}

/* ---------- Safety ---------- */
*{ box-sizing:border-box; }
html,body{ width:100%; overflow-x:hidden; }
img{ max-width:100%; height:auto; display:block; }
.kb-container{ width:min(1120px, calc(100% - 32px)); margin:0 auto; }

/* ---------- Links ---------- */
.kb a{ color:inherit; text-decoration:none; }
.kb a:hover{ text-decoration:none; }

/* ---------- Header polishing ---------- */
.kb-header{
  position: sticky; top: 0; z-index: 50;
  background: rgba(7,10,18,.72);
  border-bottom: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(12px);
}
.kb-header__inner{ display:flex; align-items:center; gap:14px; padding:12px 0; }
.kb-nav{ display:flex; gap:8px; align-items:center; margin-left:10px; }
.kb-nav__a{
  padding: 10px 12px;
  border-radius: 14px;
  color: rgba(255,255,255,.80);
  border: 1px solid transparent;
  background: transparent;
}
.kb-nav__a:hover{
  background: rgba(122,167,255,.08);
  border-color: rgba(122,167,255,.18);
}
.kb-nav__a[aria-current="page"]{
  background: rgba(122,167,255,.10);
  border: 1px solid rgba(122,167,255,.24);
}
.kb-actions{ margin-left:auto; display:flex; gap:10px; }

/* Buttons (premium) */
.kb-btn{
  display:inline-flex; align-items:center; justify-content:center;
  border-radius: 14px;
  padding: 10px 14px;
  font-weight: 700;
  border: 1px solid transparent;
  white-space: nowrap;
  transition: transform .12s ease, filter .12s ease, border-color .12s ease, background .12s ease;
}
.kb-btn:active{ transform: translateY(1px); }
.kb-btn--solid{
  background: linear-gradient(135deg, rgba(122,167,255,1), rgba(89,227,165,1));
  color: rgba(8,10,18,.92);
}
.kb-btn--solid:hover{ filter: brightness(1.03); }
.kb-btn--ghost{
  background: rgba(255,255,255,.03);
  border-color: rgba(255,255,255,.14);
  color: rgba(255,255,255,.88);
}
.kb-btn--ghost:hover{
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.22);
}
.kb-btn--outline{
  background: rgba(122,167,255,.08);
  border-color: rgba(122,167,255,.26);
  color: rgba(255,255,255,.92);
}
.kb-btn--outline:hover{
  background: rgba(122,167,255,.12);
  border-color: rgba(122,167,255,.36);
}

/* Mobile nav button (if you use it in other CSS) */
.kb-navbtn{ display:none; }

/* ---------- Breadcrumbs ---------- */
.kb-breadcrumbs{ padding: 12px 0; }
.kb-breadcrumbs__list{
  display:flex; gap:10px; flex-wrap:wrap;
  list-style:none; margin:0; padding:0;
  color: rgba(255,255,255,.66);
}
.kb-breadcrumbs__a{ color: rgba(255,255,255,.82); }
.kb-breadcrumbs__a:hover{ text-decoration: underline; }

/* ---------- Typo ---------- */
.kb-section{ padding: 52px 0; }
.kb-kicker{ color: rgba(255,255,255,.68); margin:0 0 10px; }
.kb-h1{ font-size: clamp(2.2rem, 1.6rem + 2.3vw, 3.25rem); line-height:1.05; margin:0 0 12px; letter-spacing: -0.02em; }
.kb-h2{ font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2.0rem); line-height:1.18; margin:0 0 12px; letter-spacing: -0.01em; }
.kb-sub, .kb-text{ color: rgba(255,255,255,.84); margin:0 0 14px; }
.kb-list{ margin: 10px 0 14px; padding-left: 18px; color: rgba(255,255,255,.84); }
.kb-list li{ margin: 6px 0; }

/* ---------- Alternating section ---------- */
.kb-section--alt{
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02));
  border-top: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.06);
}

/* ==========================================
   HERO — premium grid + image panels
   ========================================== */
.kb-bonusHeroX{ padding-top: 28px; }
.kb-bonusHeroX__grid{
  display:grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 18px;
  align-items: start;
}

/* Lead card */
.kb-bonusHeroX__lead{
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--kb-r-lg);
  padding: 18px;
  box-shadow: var(--kb-shadow2);
  position: relative;
  overflow: hidden;
}
.kb-bonusHeroX__lead::before{
  content:"";
  position:absolute; inset:-1px;
  background: radial-gradient(700px 260px at 10% 0%, rgba(122,167,255,.18), transparent 60%),
              radial-gradient(700px 260px at 90% 20%, rgba(89,227,165,.12), transparent 60%);
  pointer-events:none;
}

/* CTA strip after H1 */
.kb-h1-cta{
  display:flex; gap:12px; align-items:center;
  padding: 12px;
  border-radius: 18px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.10);
  margin: 14px 0 14px;
}
.kb-h1-cta__img{
  width: 84px; height: 84px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.02);
  object-fit: cover;
}
.kb-h1-cta__actions{ display:flex; gap:10px; flex-wrap:wrap; }

/* Steps */
.kb-bonusHeroX__steps{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 12px;
  margin-top: 12px;
}
.kb-step{
  padding: 12px;
  border-radius: 18px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(122,167,255,.12);
}
.kb-step b{ display:block; margin-bottom: 6px; color: rgba(255,255,255,.92); }
.kb-step span{ color: rgba(255,255,255,.78); }

/* Links row */
.kb-bonusHeroX__row{ display:flex; flex-wrap:wrap; gap:10px; margin-top: 12px; }

/* Aside images */
.kb-bonusHeroX__aside{ display:grid; gap: 14px; }

.kb-heroShotX, .kb-heroMiniX__item{
  margin:0;
  border-radius: var(--kb-r-lg);
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  box-shadow: var(--kb-shadow2);
  position: relative;
}
.kb-heroShotX img, .kb-heroMiniX__item img{
  width:100%;
  height: clamp(220px, 26vw, 360px);
  object-fit: cover;
}
.kb-heroShotX figcaption, .kb-heroMiniX__item figcaption{
  position:absolute; left:12px; right:12px; bottom:12px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(7,10,18,.70);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.86);
  backdrop-filter: blur(10px);
}

.kb-heroMiniX{ display:grid; gap: 14px; }
.kb-heroMiniX__item img{ height: 200px; }

/* ==========================================
   WRAP BLOCK — images surrounded by text
   ========================================== */
.kb-wrap{
  margin: 18px 0 22px;
  padding: 14px;
  border-radius: var(--kb-r-lg);
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: var(--kb-shadow2);
}
.kb-wrap__media{
  margin: 0;
  width: min(440px, 46%);
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
}
.kb-wrap__media img{
  width:100%;
  height: 260px;
  object-fit: cover;
}
.kb-wrap__media figcaption{
  padding: 10px 12px;
  color: rgba(255,255,255,.74);
  font-size: .95rem;
}

/* Float right/left (classic editorial) */
.kb-wrap--right .kb-wrap__media{ float:right; margin: 2px 0 10px 14px; }
.kb-wrap--left  .kb-wrap__media{ float:left;  margin: 2px 14px 10px 0; }

.kb-wrap__text p{ margin: 0 0 10px; color: rgba(255,255,255,.84); }
.kb-wrap::after{ content:""; display:block; clear:both; }

/* ==========================================
   RULES GRID — elegant cards
   ========================================== */
.kb-ruleGridX{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 14px;
  margin-top: 14px;
}
.kb-ruleCardX{
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(122,167,255,.12);
  border-radius: var(--kb-r-lg);
  padding: 16px;
  box-shadow: var(--kb-shadow2);
}
.kb-ruleCardX h3{
  margin: 0 0 8px;
  font-size: 1.08rem;
  letter-spacing: -0.01em;
}
.kb-ruleCardX p{ margin: 0 0 10px; color: rgba(255,255,255,.82); }

/* Callouts row */
.kb-calloutRowX{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 12px;
  margin-top: 14px;
}
.kb-calloutX{
  padding: 12px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
}
.kb-calloutX b{ display:block; margin-bottom: 6px; }
.kb-calloutX span{ color: rgba(255,255,255,.78); }
.kb-calloutX--good{ border-color: rgba(89,227,165,.22); }
.kb-calloutX--warn{ border-color: rgba(244,199,106,.22); }
.kb-calloutX--info{ border-color: rgba(122,167,255,.22); }
.kb-calloutX--clean{ border-color: rgba(255,255,255,.12); }

/* ==========================================
   SPLIT PANELS — No deposit / Promocode
   ========================================== */
.kb-splitX{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.kb-splitX__panel{
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--kb-r-lg);
  padding: 16px;
  box-shadow: var(--kb-shadow2);
}
.kb-panelHeadX{ margin-bottom: 10px; }

.kb-bulletsX{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 10px;
  margin: 12px 0 14px;
}
.kb-bulletX{
  padding: 12px;
  border-radius: 18px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(89,227,165,.14);
}
.kb-bulletX b{ display:block; margin-bottom: 6px; }
.kb-bulletX span{ color: rgba(255,255,255,.78); }

/* Steps cards (promo) */
.kb-stepsX{ display:grid; gap: 10px; margin: 12px 0 12px; }
.kb-stepCardX{
  padding: 12px;
  border-radius: 18px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(122,167,255,.14);
}
.kb-stepCardX b{ display:block; margin-bottom: 6px; }
.kb-stepCardX p{ margin:0; color: rgba(255,255,255,.80); }

/* Figure inside split (your kb-figX) */
.kb-figX{
  margin: 12px 0 12px;
  border-radius: var(--kb-r-lg);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  box-shadow: var(--kb-shadow2);
}
.kb-figX img{
  width:100%;
  height: clamp(220px, 22vw, 320px);
  object-fit: cover;
}
.kb-figX figcaption{
  padding: 10px 12px;
  color: rgba(255,255,255,.74);
  font-size: .95rem;
}

/* ==========================================
   Trio cards
   ========================================== */
.kb-trioX{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 12px;
  margin-top: 14px;
}
.kb-trioX__card{
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(122,167,255,.12);
  border-radius: var(--kb-r-lg);
  padding: 16px;
  box-shadow: var(--kb-shadow2);
}
.kb-trioX__card h3{ margin: 0 0 8px; font-size: 1.06rem; }
.kb-trioX__card p{ margin: 0; color: rgba(255,255,255,.80); }

/* ==========================================
   FAQ
   ========================================== */
.kb-faq{ display:grid; gap: 10px; margin-top: 12px; }
.kb-faq__item{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  padding: 10px 12px;
}
.kb-faq__item summary{
  cursor: pointer;
  font-weight: 750;
  color: rgba(255,255,255,.92);
}
.kb-faq__item p{ margin: 8px 0 0; color: rgba(255,255,255,.80); }

/* ==========================================
   Footer + back-to-top
   ========================================== */
.kb-footer{
  border-top: 1px solid rgba(255,255,255,.08);
  padding: 28px 0;
  background: rgba(0,0,0,.22);
}
.kb-footer__inner{
  display:grid;
  grid-template-columns: 1.2fr 1fr auto;
  gap: 14px;
  align-items: start;
}
.kb-footer__links{ display:grid; gap: 8px; }
.kb-footer__links a{ color: rgba(255,255,255,.78); }
.kb-footer__links a:hover{ text-decoration: underline; }
.kb-footer__copy{ color: rgba(255,255,255,.60); }

.kb-top{
  position: fixed; right: 14px; bottom: 14px;
  width: 44px; height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(7,10,18,.70);
  color: rgba(255,255,255,.92);
  display: none;
}
.kb-top.is-show{ display:inline-flex; align-items:center; justify-content:center; }

/* ==========================================
   Responsive
   ========================================== */
@media (max-width: 1020px){
  .kb-bonusHeroX__grid{ grid-template-columns: 1fr; }
  .kb-heroMiniX{ grid-template-columns: 1fr 1fr; }
  .kb-heroMiniX__item img{ height: 180px; }
}
@media (max-width: 992px){
  .kb-bonusHeroX__steps{ grid-template-columns: 1fr; }
  .kb-ruleGridX{ grid-template-columns: 1fr; }
  .kb-calloutRowX{ grid-template-columns: 1fr; }
  .kb-splitX{ grid-template-columns: 1fr; }
  .kb-bulletsX{ grid-template-columns: 1fr; }
  .kb-trioX{ grid-template-columns: 1fr; }
  .kb-footer__inner{ grid-template-columns: 1fr; }
}
@media (max-width: 760px){
  .kb-wrap__media{
    float:none !important;
    width:100%;
    margin: 0 0 10px 0 !important;
  }
  .kb-wrap__media img{ height: 220px; }
  .kb-heroMiniX{ grid-template-columns: 1fr; }
}
@media (max-width: 560px){
  .kb-h1-cta{ flex-direction: column; align-items: flex-start; }
  .kb-h1-cta__img{ width:72px; height:72px; }
}
/* =========================
   MOBILE NAV: burger works
   ========================= */

/* desktop default */
.kb-nav { display: flex; gap: 10px; align-items: center; }
.kb-navbtn { display: none; }

/* mobile */
@media (max-width: 980px){
  .kb-navbtn{ display: inline-flex; }

  /* nav closed by default */
  .kb-nav{
    display: none;              /* IMPORTANT: hide on mobile */
    position: absolute;
    left: 12px;
    right: 12px;
    top: calc(100% + 10px);
    flex-direction: column;
    gap: 8px;
    padding: 10px;
    border-radius: 16px;
    background: rgba(10,12,18,.96);
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: 0 20px 50px rgba(0,0,0,.55);
    z-index: 50;
  }

  /* open state */
  .kb-nav.is-open{ display: flex; }

  /* make sure header can hold absolute nav */
  .kb-header__inner{ position: relative; }

  /* optional: wider tap targets */
  .kb-nav__a{
    display: block;
    padding: 12px 12px;
    border-radius: 12px;
  }
}