/* ===========================
   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; }
}