:root{
  --bg:#ffffff;
  --fg:#19355e;
  --primary: hsl(215 84% 20%);
  --primary-strong: hsl(215 84% 35%);
  --accent: #1ba14c; /* CTA groen */
  --accent-strong: #16a34a;
  --accent-green: #C3FF92;
  --muted-fore: hsl(215 15% 46%);
  --shadow-soft: 0 2px 15px -3px hsl(215 84% 20% / .07), 0 10px 20px -2px hsl(215 84% 20% / .04);
  --shadow-medium: 0 4px 25px -4px hsl(215 84% 20% / .15), 0 20px 25px -5px hsl(215 84% 20% / .10);
  --shadow-large: 0 10px 40px -12px hsl(215 84% 20% / .25);
  --radius-outer: 1rem;
}

html, body{max-width:100%; overflow-x:hidden}
body{background:var(--bg);color:var(--fg)}

.rounded-2xl{border-radius:var(--radius-outer)!important}
.shadow-soft{box-shadow:var(--shadow-soft)}
.shadow-medium{box-shadow:var(--shadow-medium)}
.shadow-large{box-shadow:var(--shadow-large)}
.text-muted-custom{color:var(--muted-fore)!important}
.text-accent-green{color:#22c55e!important}
.section-pad{padding:5rem 0}

.feature-dot{
  width:.5rem;height:.5rem;border-radius:999px;
  background:var(--muted-fore);margin-top:.35rem;flex-shrink:0
}

/* Hover animatie voor service iconen */
.service-icon{transition:transform .18s ease, box-shadow .18s ease; cursor:pointer; will-change:transform}
.service-icon i{transition:transform .18s ease; will-change:transform}
.service-icon:hover{transform:scale(1.12) translateY(-2px); box-shadow:0 .5rem 1rem rgba(0,0,0,.15)}
.service-icon:hover i{transform:scale(1.2)}

@media (prefers-reduced-motion: reduce){
  .service-icon, .service-icon i{transition:none}
}

.card-soft{
  background:rgba(255,255,255,.9);
  border:0;
  backdrop-filter:blur(8px);
}

/* CTA knop */
.btn-cta{
  --bs-btn-color:#ffffff;
  --bs-btn-bg:var(--accent);
  --bs-btn-border-color:var(--accent);
  --bs-btn-hover-bg:var(--accent-strong);
  --bs-btn-hover-border-color:var(--accent-strong);
}

/* COOKIE-BANNER — ALTIJD HOGER DAN MOBILE CTA */
#cookie-banner{
  position:fixed;
  bottom: 100px !important;
  /* hoger dan eerst *
  left:0; right:0; bottom:0;
  z-index:999999; /* boven alles */
  display:none;
  background:#ffffff;
  border-top:1px solid rgba(0,0,0,.08);
  box-shadow:0 -8px 30px rgba(0,0,0,.08);
}

#cookie-banner .cb-wrap{
  max-width:1140px;
  margin:0 auto;
  padding:.9rem 1rem;
  padding-bottom:calc(.9rem + env(safe-area-inset-bottom,0px));
  display:flex;
  align-items:center;
  gap:1rem;
}

#cookie-banner a{ text-decoration:underline; }
#cookie-banner p{ margin:0; flex:1 1 auto; color:#333; }

#cookie-banner .actions{
  display:flex;
  gap:.5rem;
  flex-wrap:wrap;
}

#cookie-banner .actions button{
  border:1px solid #ced4da;
  background:#f8f9fa;
  border-radius:.5rem;
  padding:.5rem .75rem;
  cursor:pointer;
}

#cookie-banner .actions #btn-accept{
  background:#22c55e;
  border-color:#22c55e;
  color:#fff;
}

@media (max-width:991.98px){
  #cookie-banner .cb-wrap{ flex-direction:column; align-items:flex-start; }
}

/* Wanneer cookiebanner open is → CTA opschuiven */
body.cookie-banner-open .mobile-cta{
  bottom:72px; /* genoeg ruimte */
}

/* HERO BACKGROUND */
.bg-gradient-hero{
  background:
    radial-gradient(80rem 80rem at -10% -10%, hsl(215 84% 25% / .18), transparent 50%),
    linear-gradient(135deg, hsl(215 84% 15%), hsl(215 84% 25%));
  color:#fff;
}

/* NAVBAR */
.navbar.sticky-top{box-shadow:0 1px 0 hsl(215 20% 91% / .9)}
.navbar .navbar-brand .brand-logo{height:50px;width:50px;object-fit:contain}

/* --- NAVBAR VERGROTING & DUIDELIJKHEID --- */

.navbar {
    padding-top: 18px !important;
    padding-bottom: 18px !important;
}

/* Grotere menu-links */
.navbar .nav-link {
    font-size: 1.25rem !important;   /* grotere tekst */
    font-weight: 600 !important;      /* iets dikker voor leesbaarheid */
}

/* Ruimte tussen menu-items */
.navbar-nav .nav-item {
    margin: 0 8px;
    padding: 5px;
}

/* Logo groter */
.navbar .navbar-brand .brand-logo {
    height: 65px !important;
    width: 65px !important;
}

/* Actieve link underline */
.navbar-nav .nav-link.active {
    border-bottom: 3px solid var(--
    ) !important;
    color: var(--accent) !important;
}

.nav-rating i{
  font-size:1rem;
  padding-left: 8px;
}


/* HERO IMG */
.hero-img{width:100%;height:auto;display:block}
@media (min-width:992px){ .hero-img{max-width:560px} }

/* MOBILE CTA */
.mobile-cta{
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:9000; /* lager dan cookie banner */
  background:#fff;
  border-top:1px solid rgba(0,0,0,.08);
  box-shadow:0 -6px 20px rgba(0,0,0,.06);
  padding:.6rem .75rem;
}

@media (max-width:991.98px){
  body{ padding-bottom:100px; }
}

.hero-box {
  max-width: 1200px;
  background: linear-gradient(135deg, var(--bs-primary) 0%, #153867 100%);
  text-shadow: 0 .25rem .75rem rgba(0,0,0,.35);
}


.nav-link.active {
    border-bottom: 3px solid lime !important;
}

.bg-gradient-hero {
    width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    display: block;
}

#cookie-banner {
    bottom: 120px !important;
    /* hoger dan eerst */
}

.mobile-cta {
    bottom: 0 !important;
}