:root{--bg:#07101d;--side:#030817;--panel:#101a2a;--panel2:#142135;--line:#2a3850;--text:#f7f8fc;--muted:#b8c1d1;--gold:#d39b55;--gold2:#f0c987;--bronze:#b8793b;--radius:18px;--sidebar:230px;--shadow:0 22px 60px rgba(0,0,0,.35)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(circle at top,#172338 0,#07101d 52%,#020713 100%);color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;line-height:1.65}a{color:inherit;text-decoration:none}img{display:block;max-width:100%}.anchor-section{scroll-margin-top:86px}.sidebar{position:fixed;inset:0 auto 0 0;width:var(--sidebar);background:var(--side);border-right:1px solid rgba(211,155,85,.25);padding:24px;z-index:30}.logo{display:flex;align-items:center;gap:8px;color:var(--gold2);font-size:26px;font-weight:950;letter-spacing:.04em}.logo span{font-size:32px}.sidebar nav{display:grid;gap:7px;margin-top:34px}.sidebar nav a{padding:11px 8px;border-radius:10px;color:#fff;font-weight:700}.sidebar nav a:hover{background:rgba(255,255,255,.06);color:var(--gold2)}.side-note{position:absolute;bottom:22px;color:var(--muted);font-size:13px}.page{margin-left:var(--sidebar);min-height:100vh}.topbar{position:sticky;top:0;z-index:20;height:66px;background:rgba(17,28,45,.93);backdrop-filter:blur(14px);border-bottom:1px solid rgba(255,255,255,.06);display:flex;align-items:center;justify-content:space-between;padding:0 32px}.topnav,.actions,.button-row{display:flex;align-items:center;gap:16px}.topnav a{font-weight:800}.topnav a:hover{color:var(--gold2)}.menu-toggle{display:none}.btn{display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(211,155,85,.75);border-radius:10px;padding:10px 18px;font-weight:900;transition:.2s}.btn:hover{transform:translateY(-1px);box-shadow:0 14px 34px rgba(211,155,85,.16)}.gold{background:linear-gradient(135deg,var(--gold2),#b77938);color:#fff}.bronze{background:var(--bronze);border:0;color:#fff}.ghost{background:transparent}.dark{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.13)}.big{padding:14px 24px}.section{max-width:1340px;margin:0 auto;padding:34px 32px;border-bottom:1px solid rgba(255,255,255,.06)}.hero{display:grid;grid-template-columns:1fr 1.1fr;gap:30px;align-items:center;min-height:500px;background:linear-gradient(90deg,rgba(7,16,29,.98),rgba(7,16,29,.76)),radial-gradient(circle at right,#5b3a18,transparent 45%)}.label{color:var(--gold2);font-weight:950;text-transform:uppercase;letter-spacing:.06em}.hero h1{font-size:clamp(42px,6vw,78px);line-height:.98;margin:8px 0}.hero h1 strong{color:var(--gold);display:block}.lead{font-size:20px;max-width:680px;color:#e8edf7}.checks{list-style:none;margin:18px 0;padding:0}.checks li{margin:8px 0}.checks li:before{content:'✓';color:var(--gold2);font-weight:950;margin-right:8px}.card{background:linear-gradient(180deg,rgba(20,33,53,.94),rgba(10,19,33,.94));border:1px solid var(--line);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow)}h2{font-size:clamp(26px,3vw,38px);line-height:1.12;margin:0 0 16px}h3{margin:0 0 8px}p{color:#dde4f1}.review-grid{display:grid;grid-template-columns:1.25fr .95fr .72fr;gap:20px}.score-list div,.info-card div{display:flex;justify-content:space-between;gap:20px;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.08)}.score-list b{color:var(--gold2)}.final-score{text-align:center}.final-score strong{display:block;font-size:62px;color:var(--gold2);line-height:1}.final-score small{font-size:24px;color:#fff}.split{display:grid;grid-template-columns:1.05fr .95fr;gap:30px;align-items:center}.content-block{max-width:850px}.section-title{display:flex;justify-content:space-between;gap:16px;align-items:center}.section-title a,.cards-3 a{color:var(--gold2);font-weight:900}.slider{position:relative;overflow:hidden}.track{display:flex;gap:14px;overflow-x:auto;scroll-behavior:smooth;scrollbar-width:none}.track::-webkit-scrollbar{display:none}.provider{min-width:185px;height:78px;background:#050b18;border:1px solid #1d2a42;border-radius:11px;display:flex;align-items:center;justify-content:center;text-align:center;padding:10px;font-weight:950}.slide-next{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:42px;height:42px;border-radius:999px;border:1px solid var(--gold);background:#172337;color:#fff;font-size:34px;cursor:pointer}.game{min-width:190px;background:#0b1422;border:1px solid var(--line);border-radius:14px;overflow:hidden}.game img{width:100%;aspect-ratio:3/4;object-fit:cover}.game h3,.game p{padding:0 13px}.game p{margin-top:0;color:var(--muted);font-size:14px}.bonus{display:grid;grid-template-columns:.8fr 1fr .68fr;gap:24px;align-items:center;background:linear-gradient(120deg,rgba(61,19,92,.5),rgba(7,16,29,.9));border:1px solid rgba(211,155,85,.25);border-radius:20px;margin-top:28px}.howto ol{margin:0;padding-left:22px}.payment-strip{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px;padding:22px;border:1px solid var(--line);border-radius:14px;background:#0d1726}.payment-strip span{background:#07101d;border:1px solid #263650;border-radius:10px;padding:10px 16px;font-weight:950}.usp-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}.usp-grid article{text-align:center;background:#0d1726;border:1px solid var(--line);border-radius:14px;padding:19px}.usp-grid span{font-size:32px}.cards-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.faq-grid{display:grid;grid-template-columns:1fr 330px;gap:22px}.faqs{display:grid;grid-template-columns:1fr 1fr;gap:12px}.faqs details{background:#0d1726;border:1px solid var(--line);border-radius:10px;padding:14px}.faqs summary{cursor:pointer;font-weight:900}.responsible{text-align:center}.responsible strong{font-size:46px;color:var(--gold2)}.final-cta{text-align:center;background:linear-gradient(90deg,rgba(36,18,58,.8),rgba(17,29,47,.95));border:1px solid rgba(211,155,85,.25);border-radius:20px;margin-bottom:24px}.footer{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:28px;padding:42px 32px;background:#060d18;border-top:1px solid rgba(255,255,255,.06)}.footer a{display:block;color:var(--muted);margin:7px 0}.footer h3{color:var(--gold2)}
@media(max-width:1100px){:root{--sidebar:0}.sidebar{transform:translateX(-100%);transition:.25s}.sidebar.open{transform:translateX(0);width:245px}.page{margin-left:0}.menu-toggle{display:block;background:transparent;border:1px solid var(--line);color:#fff;border-radius:8px;padding:8px 12px}.topnav{display:none}.hero,.split,.bonus,.review-grid,.faq-grid{grid-template-columns:1fr}.cards-3{grid-template-columns:1fr}.usp-grid{grid-template-columns:repeat(2,1fr)}.footer{grid-template-columns:1fr 1fr}.section{padding:28px 20px}.topbar{padding:0 18px}.actions .ghost{display:none}}
@media(max-width:640px){.hero-image{order:-1}.hero h1{font-size:42px}.lead{font-size:17px}.button-row{flex-direction:column;align-items:stretch}.button-row .btn{width:100%}.faqs{grid-template-columns:1fr}.usp-grid{grid-template-columns:1fr}.footer{grid-template-columns:1fr}.payment-strip span{flex:1 1 42%;text-align:center}.score-list div,.info-card div{display:block}.bonus{margin-left:10px;margin-right:10px}.logo{font-size:21px}.section-title{display:block}.actions .btn{padding:9px 12px}}

/* Afbeeldingen uit /new-images/
   Deze regels zijn toegevoegd zodat de nieuwe logo's, hero, gamecards,
   bonusafbeelding en betaalmethoden netjes blijven schalen. */
.logo img{
  height:42px;
  width:auto;
  max-width:170px;
  object-fit:contain;
}

.footer .logo img{
  height:38px;
}

.hero-image picture,
.hero-image img{
  width:100%;
  display:block;
}

.hero-image img{
  height:auto;
  border-radius:20px;
  object-fit:cover;
  box-shadow:var(--shadow);
}

.bonus > div:first-child img{
  width:100%;
  height:auto;
  border-radius:16px;
  object-fit:cover;
  box-shadow:0 18px 45px rgba(0,0,0,.28);
}

.game img{
  width:100%;
  aspect-ratio:3/4;
  object-fit:cover;
  border-bottom:1px solid rgba(255,255,255,.08);
}

.payment-strip{
  align-items:center;
}

.payment-strip img{
  height:42px;
  width:auto;
  max-width:130px;
  object-fit:contain;
  background:#07101d;
  border:1px solid #263650;
  border-radius:10px;
  padding:8px 12px;
}

@media(max-width:640px){
  .logo img{
    height:34px;
    max-width:145px;
  }

  .hero-image img{
    border-radius:16px;
  }

  .payment-strip img{
    flex:1 1 42%;
    max-width:none;
    height:44px;
  }
}

/* Aanpassing 18-06: hero groter/vullender + provider-logo's als afbeeldingen */
.hero{
  min-height:620px;
  grid-template-columns:.95fr 1.25fr;
  align-items:stretch;
  overflow:hidden;
}
.hero-copy{
  align-self:center;
  position:relative;
  z-index:2;
}
.hero-image{
  height:100%;
  min-height:560px;
  border-radius:0 0 0 34px;
  overflow:hidden;
  align-self:stretch;
  margin:-34px -32px -34px 0;
  position:relative;
}
.hero-image picture,
.hero-image img{
  width:100%;
  height:100%;
  display:block;
}
.hero-image img{
  object-fit:cover;
  object-position:center;
}
.hero-image::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(7,16,29,.45),rgba(7,16,29,0) 42%);
  pointer-events:none;
}
.provider{
  min-width:185px;
  height:78px;
  padding:14px 18px;
}
.provider img{
  width:100%;
  height:100%;
  object-fit:contain;
}
@media(max-width:1100px){
  .hero{
    min-height:auto;
    grid-template-columns:1fr;
    align-items:start;
  }
  .hero-image{
    min-height:420px;
    margin:0;
    border-radius:18px;
    order:-1;
  }
}
@media(max-width:640px){
  .hero-image{
    min-height:390px;
  }
}


/* Aanpassingen 18-06: finetuning volgens live versie */

/* 1. Hero afbeelding zachter laten uitfaden aan alle randen */
.hero-image::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  box-shadow:
    inset 75px 0 85px rgba(7,16,29,.92),
    inset -65px 0 80px rgba(7,16,29,.45),
    inset 0 70px 80px rgba(7,16,29,.70),
    inset 0 -75px 90px rgba(7,16,29,.78);
}
.hero-image::after{
  z-index:3;
  background:linear-gradient(90deg,rgba(7,16,29,.62),rgba(7,16,29,0) 46%);
}

/* 2. Scorekaart verticaal centreren */
.score-list{
  display:flex;
  flex-direction:column;
  justify-content:center;
}

/* 3. Eindscore verticaal centreren + sterren */
.final-score{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
}
.final-score .score-stars{
  margin-top:10px;
  color:var(--gold2);
  font-size:24px;
  letter-spacing:2px;
  line-height:1;
}
.final-score p{
  margin-bottom:0;
}

/* 4. Goudkleurige icons bij casino details */
.info-card div{
  align-items:center;
}
.info-card div span{
  display:flex;
  align-items:center;
  gap:10px;
}
.info-card div span::before{
  width:24px;
  height:24px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(240,201,135,.55);
  border-radius:8px;
  color:var(--gold2);
  background:rgba(211,155,85,.08);
  font-size:14px;
  line-height:1;
  flex:0 0 24px;
}
.info-card div:nth-child(1) span::before{content:"◷";}
.info-card div:nth-child(2) span::before{content:"◎";}
.info-card div:nth-child(3) span::before{content:"🎰";font-size:13px;}
.info-card div:nth-child(4) span::before{content:"🌍";font-size:13px;}
.info-card div:nth-child(5) span::before{content:"↯";}
.info-card div:nth-child(6) span::before{content:"✉";}

/* 5. Sliders krijgen ook een terug-knop */
.slide-prev,
.slide-next{
  z-index:5;
  display:flex;
  align-items:center;
  justify-content:center;
  line-height:1;
}
.slide-prev{
  position:absolute;
  left:8px;
  top:50%;
  transform:translateY(-50%);
  width:42px;
  height:42px;
  border-radius:999px;
  border:1px solid var(--gold);
  background:#172337;
  color:#fff;
  font-size:34px;
  cursor:pointer;
}
.slider::before,
.slider::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:58px;
  z-index:4;
  pointer-events:none;
}
.slider::before{left:0;background:linear-gradient(90deg,rgba(7,16,29,.9),rgba(7,16,29,0));}
.slider::after{right:0;background:linear-gradient(270deg,rgba(7,16,29,.9),rgba(7,16,29,0));}

/* 6 en 7. Bonussectie dichter bij het design */
.bonus{
  grid-template-columns:.78fr 1fr .68fr;
  background:
    radial-gradient(circle at 16% 52%,rgba(118,41,158,.35),transparent 30%),
    linear-gradient(120deg,rgba(38,18,70,.94),rgba(8,14,31,.96));
  border-color:rgba(211,155,85,.38);
  box-shadow:0 22px 70px rgba(0,0,0,.28);
}
.bonus > div:first-child img{
  border-radius:16px;
  box-shadow:0 24px 60px rgba(0,0,0,.45);
}
.bonus .howto{
  background:linear-gradient(180deg,rgba(20,33,53,.98),rgba(12,22,37,.98));
  border:1px solid rgba(88,119,165,.55);
  box-shadow:none;
  padding:34px 30px;
}
.bonus .howto h3{
  font-size:24px;
  margin-bottom:18px;
}
.bonus .howto ol{
  counter-reset:bonussteps;
  list-style:none;
  padding:0;
  margin:0;
}
.bonus .howto li{
  counter-increment:bonussteps;
  display:flex;
  gap:11px;
  align-items:flex-start;
  margin:10px 0;
  color:#fff;
  font-weight:750;
}
.bonus .howto li::before{
  content:counter(bonussteps);
  width:23px;
  height:23px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  border:1px solid var(--gold);
  color:var(--gold2);
  font-size:13px;
  flex:0 0 23px;
  margin-top:2px;
}

/* 8. Betaalmethoden horizontaal centreren */
.payment-strip{
  justify-content:center;
}

/* 9. Onderste CTA zoals het design: premium balk met visueel accent */
.final-cta{
  position:relative;
  overflow:hidden;
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  text-align:center;
  gap:24px;
  padding:28px 42px;
  background:
    radial-gradient(circle at 8% 50%,rgba(93,38,128,.72),transparent 24%),
    linear-gradient(90deg,rgba(35,17,58,.95),rgba(10,20,36,.98));
  border:1px solid rgba(211,155,85,.38);
  box-shadow:0 20px 60px rgba(0,0,0,.28);
}
.final-cta::before{
  content:"";
  position:absolute;
  left:20px;
  bottom:-18px;
  width:150px;
  height:120px;
  background:url('new-images/hero-mobile.png') center bottom/cover no-repeat;
  opacity:.42;
  border-radius:30px;
  filter:saturate(1.1) contrast(1.05);
  mask-image:linear-gradient(90deg,black,transparent 90%);
}
.final-cta h2,
.final-cta p{
  position:relative;
  z-index:1;
  margin-left:110px;
}
.final-cta h2{
  margin-bottom:0;
}
.final-cta p{
  margin-top:4px;
}
.final-cta .btn{
  position:relative;
  z-index:1;
  min-width:245px;
}

@media(max-width:1100px){
  .final-cta{
    grid-template-columns:1fr;
    text-align:center;
  }
  .final-cta h2,
  .final-cta p{
    margin-left:0;
  }
  .bonus{
    grid-template-columns:1fr;
  }
}
@media(max-width:640px){
  .slide-prev,.slide-next{
    width:36px;
    height:36px;
    font-size:28px;
  }
  .final-cta{
    padding:28px 20px;
  }
  .final-cta::before{
    opacity:.22;
  }
}


/* Laatste tweaks 18-06 */

/* 1. Hero-fade sterker aan alle kanten, vooral rechts */
.hero-image::before{
  box-shadow:
    inset 100px 0 110px rgba(7,16,29,.94),
    inset -135px 0 135px rgba(7,16,29,.90),
    inset 0 90px 95px rgba(7,16,29,.78),
    inset 0 -110px 120px rgba(7,16,29,.90);
}
.hero-image::after{
  background:
    linear-gradient(90deg,rgba(7,16,29,.78),rgba(7,16,29,0) 42%,rgba(7,16,29,.72) 100%),
    linear-gradient(180deg,rgba(7,16,29,.50),rgba(7,16,29,0) 34%,rgba(7,16,29,.62) 100%);
}

/* 2. Detail-icons: geen emoji's meer, maar dezelfde goudkleurige outline-stijl */
.info-card div:nth-child(3) span::before{
  content:"◫";
  font-size:15px;
}
.info-card div:nth-child(4) span::before{
  content:"⌖";
  font-size:15px;
}

/* 3. Bonusafbeelding met cadeau netjes tonen */
.bonus > div:first-child{
  align-self:center;
}
.bonus > div:first-child{
  display:flex;
  align-items:center;
  justify-content:center;
}
.bonus > div:first-child img{
  width:auto;
  height:auto;
  max-width:100%;
  max-height:520px;
  object-fit:contain;
  object-position:center;
  background:transparent;
  border-radius:16px;
  box-shadow:0 24px 60px rgba(0,0,0,.45);
}

/* 4. Hoe-werkt-het blok strakker zoals in design */
.bonus .howto{
  align-self:center;
  border-radius:20px;
  border:1px solid rgba(88,119,165,.62);
  background:linear-gradient(180deg,rgba(19,33,52,.98),rgba(11,21,36,.98));
}
.bonus .howto li{
  line-height:1.45;
}

/* 5. Onderste CTA compact horizontaal zoals het design */
.final-cta{
  min-height:86px;
  display:grid;
  grid-template-columns:190px 1fr auto;
  align-items:center;
  gap:24px;
  text-align:center;
  padding:18px 36px;
  margin-bottom:24px;
  background:
    linear-gradient(90deg,rgba(36,18,58,.92),rgba(10,20,36,.98));
}
.final-cta::before{
  display:none;
}
.final-cta-visual{
  position:relative;
  height:74px;
  overflow:hidden;
  border-radius:12px;
  opacity:.95;
  justify-self:start;
}
.final-cta-visual::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(12,20,36,0),rgba(12,20,36,.92));
}
.final-cta-visual img{
  width:190px;
  height:74px;
  object-fit:cover;
}
.final-cta-copy{
  position:relative;
  z-index:1;
}
.final-cta-copy h2,
.final-cta-copy p{
  margin-left:0;
}
.final-cta h2{
  margin:0;
  font-size:clamp(26px,3vw,38px);
}
.final-cta p{
  margin:4px 0 0;
}
.final-cta .btn{
  min-width:250px;
  justify-self:end;
}

/* 6. Betaalmethoden blijven centraal */
.payment-strip{
  justify-content:center;
}

/* Responsive correcties voor de nieuwe CTA en bonusvisual */
@media(max-width:1100px){
  .final-cta{
    grid-template-columns:1fr;
    padding:24px;
  }
  .final-cta-visual{
    display:none;
  }
  .final-cta .btn{
    justify-self:center;
  }
}
@media(max-width:640px){
  .bonus > div:first-child img{
    max-height:420px;
  }
  .final-cta .btn{
    width:100%;
    min-width:0;
  }
}


/* Mobiele header fix 18-06: hamburger links, logo gecentreerd, registratie rechts */
.mobile-logo{
  display:none;
}

@media(max-width:1100px){
  .topbar{
    display:grid;
    grid-template-columns:54px 1fr auto;
    align-items:center;
    gap:10px;
    height:66px;
    padding:0 14px;
  }

  .menu-toggle{
    display:flex;
    align-items:center;
    justify-content:center;
    width:44px;
    height:44px;
    padding:0;
    position:relative;
    z-index:1001;
  }

  .mobile-logo{
    display:flex;
    align-items:center;
    justify-content:center;
    min-width:0;
  }

  .mobile-logo img{
    height:34px;
    width:auto;
    max-width:160px;
    object-fit:contain;
  }

  .topnav{
    display:none !important;
  }

  .actions{
    justify-self:end;
    gap:0;
  }

  .actions .ghost{
    display:none !important;
  }

  .actions .gold{
    white-space:nowrap;
    padding:10px 14px;
    border-radius:12px;
  }

  .sidebar{
    top:66px !important;
    left:0 !important;
    bottom:0 !important;
    right:auto !important;
    width:245px !important;
    height:auto !important;
    transform:translateX(-110%) !important;
    transition:transform .25s ease !important;
    z-index:1000 !important;
    padding:22px 20px;
    overflow-y:auto;
  }

  .sidebar.open{
    transform:translateX(0) !important;
  }

  .sidebar .logo{
    display:none;
  }

  .sidebar nav{
    margin-top:0;
  }

  .page{
    margin-left:0 !important;
  }
}

@media(max-width:420px){
  .topbar{
    grid-template-columns:48px 1fr auto;
    gap:6px;
    padding:0 10px;
  }

  .mobile-logo img{
    height:30px;
    max-width:138px;
  }

  .actions .gold{
    padding:9px 12px;
    font-size:14px;
  }
}