:root{
  --bg:#f6f8fc;              /* achtergrond */
  --card:#ffffff;            /* kaarten */
  --text:#0f172a;            /* hoofdtekst */
  --muted:#475569;           /* subtiele tekst */
  --line:rgba(15,23,42,.12); /* borders */
  --primary:#2563eb;         /* blauw */
  --primary2:#1d4ed8;        /* donkerder blauw */
  --shadow: 0 14px 40px rgba(15,23,42,.10);
  --shadow2: 0 10px 24px rgba(15,23,42,.08);
  --radius:18px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial;
  background:
    radial-gradient(1200px 800px at 20% 0%, rgba(37,99,235,.10), transparent 60%),
    radial-gradient(900px 600px at 85% 10%, rgba(14,165,233,.08), transparent 55%),
    var(--bg);
  color:var(--text);
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{width:min(1140px,92%);margin:0 auto}
.muted{color:var(--muted)}
.small{font-size:.9rem}

/* Header / Nav */
.site-header{
  position:sticky;top:0;z-index:50;
  backdrop-filter: blur(10px);
  background: rgba(255,255,255,.78);
  border-bottom:1px solid var(--line);
  overflow:visible;
}
.nav-wrap{
  display:flex;
  align-items:center;
  gap:18px;
  padding:14px 0;
  flex-wrap:wrap;
}
.brand{display:flex;align-items:center;gap:10px;font-weight:800}
.brand-mark{
  width:70px;height:70px;border-radius:10px;

}
.brand-text{letter-spacing:.2px}

.nav{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:14px;
  overflow:visible;
}
.nav a{
  padding:10px 10px;
  border-radius:12px;
  color:var(--muted);
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.nav a:hover{background:rgba(15,23,42,.04); color:var(--text)}
.nav a.is-active{color:var(--text);background:rgba(37,99,235,.10)}
.nav .nav-cta{margin-left:6px}
.caret{font-size:.85rem;opacity:.8}

/* Burger */
.burger{
  display:none;
  margin-left:auto;
  background:transparent;
  border:0;
  padding:10px;
  cursor:pointer;
}
.burger span{
  display:block;
  width:22px;height:2px;
  background:var(--text);
  margin:5px 0;
  opacity:.85;
}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:11px 14px;
  border-radius:14px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.90);
  color: var(--text);
  box-shadow: 0 8px 18px rgba(15,23,42,.06);
}
.btn:hover{transform: translateY(-1px)}
.btn:active{transform: translateY(0)}
.btn-primary{
  background:linear-gradient(180deg,var(--primary),var(--primary2));
  border-color: rgba(37,99,235,.35);
  box-shadow: 0 16px 34px rgba(37,99,235,.22);
  color:#fff;
}

/* Dropdown (desktop hover + bridge fix) */
.nav-dropdown{position:relative}
.nav-dropdown::after{
  content:"";
  position:absolute;
  left:0;
  top:100%;
  width:100%;
  height:12px;
}

/* ✅ dropdown nu light */
.nav-dropdown .dropdown{
  position:absolute;
  top:100%;
  left:0;
  margin-top:8px;
  min-width:220px;
  padding:10px;

  background: rgba(255,255,255,.96);
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow: var(--shadow);

  display:none;
  z-index:100;

  opacity:0;
  transform:translateY(-6px);
  transition:opacity .15s ease, transform .15s ease;
  pointer-events:none;
}
.nav-dropdown .dropdown a{
  display:block;
  padding:10px 12px;
  border-radius:12px;
  color: var(--muted);
  white-space:nowrap;
}
.nav-dropdown .dropdown a:hover{
  background: rgba(37,99,235,.10);
  color: var(--text);
}
.nav-dropdown:hover .dropdown,
.nav-dropdown:focus-within .dropdown{
  display:block;
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}

/* Hero */
.hero{padding:56px 0 30px}
.hero-wrap{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:22px;
  align-items:stretch;
}
.kicker{color:var(--muted);font-size:.95rem;letter-spacing:.35px}
.h1{font-size:clamp(2rem,4vw,3.1rem);line-height:1.05;margin:10px 0}
.p{color:var(--muted);font-size:1.05rem;line-height:1.6;margin:0}

/* Cards / Sections */
.card{
  background: var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow: var(--shadow);
  padding:18px;
}
.section{padding:28px 0}
.section-title{font-size:1.5rem;margin:0 0 14px}

.grid-3{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  margin:18px 0 0;
}
.feature{
  padding:16px;
  border-radius:var(--radius);
  border:1px solid var(--line);
  background: rgba(255,255,255,.70);
  box-shadow: var(--shadow2);
}
.feature-title{font-weight:800;margin:0 0 6px}
.split{display:grid;grid-template-columns:1fr 1fr;gap:16px}

/* Forms (✅ nu light) */
.form input,.form textarea{
  width:100%;
  padding:12px;
  border-radius:14px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.92);
  color: var(--text);
  outline:none;
}
.form input:focus,.form textarea:focus{
  border-color: rgba(37,99,235,.35);
  box-shadow: 0 0 0 4px rgba(37,99,235,.12);
}
.form textarea{min-height:120px;resize:vertical}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form .actions{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}

/* Footer (✅ nu light) */
.site-footer{
  border-top:1px solid var(--line);
  background: rgba(255,255,255,.75);
  padding:26px 0;
  margin-top:30px;
}
.footer-grid{
  display:grid;
  grid-template-columns:1.2fr .8fr 1fr;
  gap:16px;
}
.footer-title{font-weight:900;margin-bottom:10px}
.badges{display:flex;gap:10px;flex-wrap:wrap}
.badge{
  padding:8px 10px;
  border:1px dashed rgba(15,23,42,.18);
  border-radius:14px;
  color: var(--muted);
  background: rgba(255,255,255,.70);
}

/* Pricing (✅ light cards) */
.pricing-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.price-card{
  background: rgba(255,255,255,.85);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow: var(--shadow2);
  padding:18px;
}
.price{font-size:1.9rem;font-weight:900;margin:8px 0 4px}
.price-sub{color:var(--muted);font-size:.95rem}
.price-list{margin:12px 0 0;padding-left:18px;color:var(--muted);line-height:1.85}
.price-table{border:1px solid var(--line);border-radius:16px;overflow:hidden}
.price-row{
  display:grid;
  grid-template-columns:1fr auto;
  gap:12px;
  padding:12px 14px;
  border-top:1px solid var(--line);
  background: rgba(255,255,255,.75);
}
.price-row:first-child{border-top:0}
.price-right{white-space:nowrap;font-weight:900}

/* Vacatures */
.vac-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
.vac-card{
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  background: rgba(255,255,255,.85);
  box-shadow: var(--shadow2);
}
.vac-img{display:block;aspect-ratio:16/9;overflow:hidden}
.vac-img img{width:100%;height:100%;object-fit:cover}
.vac-body{padding:16px 18px 18px}
.vac-title{margin:0;font-size:1.35rem;line-height:1.25}
.vac-meta{margin-top:6px;color:var(--muted)}
.vac-actions{margin-top:14px;display:flex;gap:10px;flex-wrap:wrap}
.portal-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}

/* FAQ */
.faq{display:flex;flex-direction:column;gap:10px;margin-top:10px}
.faq-item{
  border:1px solid var(--line);
  border-radius:16px;
  background: rgba(255,255,255,.85);
  padding:12px 14px;
  box-shadow: var(--shadow2);
}
.faq-q{font-weight:900}
.faq-a{margin-top:6px;line-height:1.7}

/* Checklist / Note */
.checklist{
  list-style:none;
  padding:0;
  margin:0;
  color:var(--muted);
  line-height:1.9;
}
.checklist li{position:relative;padding-left:26px;margin:6px 0}
.checklist li::before{
  content:"✓";
  position:absolute;left:0;top:0;
  font-weight:900;color:#16a34a;
}
.note{
  border:1px solid var(--line);
  background: rgba(255,255,255,.85);
  border-radius:16px;
  padding:12px 14px;
  color: var(--muted);
  box-shadow: var(--shadow2);
}

/* Chips */
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.chip{
  padding:9px 12px;
  border-radius:999px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.85);
  color: var(--muted);
  font-weight:700;
  font-size:.95rem;
}

/* Page layouts */
.noab-hero{padding:56px 0 26px}
.noab-hero-wrap{display:grid;grid-template-columns:1.2fr .8fr;gap:22px;align-items:stretch}
.noab-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.noab-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.noab-item{padding:14px;border-radius:16px;border:1px solid var(--line);background: rgba(255,255,255,.85);box-shadow:var(--shadow2)}
.noab-title{font-weight:900;margin-bottom:6px}
.noab-cta{display:flex;align-items:center;justify-content:space-between;gap:16px}
.noab-cta-actions{display:flex;gap:10px;flex-wrap:wrap}

.adm-hero{padding:56px 0 26px}
.adm-hero-wrap{display:grid;grid-template-columns:1.2fr .8fr;gap:22px;align-items:stretch}
.adm-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.adm-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:14px}
.adm-card{padding:16px;border-radius:var(--radius);border:1px solid var(--line);background: rgba(255,255,255,.85);box-shadow:var(--shadow2)}
.adm-title{font-weight:900;margin-bottom:8px}

.tax-hero{padding:56px 0 26px}
.tax-hero-wrap{display:grid;grid-template-columns:1.2fr .8fr;gap:22px;align-items:stretch}
.tax-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.service-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:14px}
.service-card{padding:16px;border-radius:var(--radius);border:1px solid var(--line);background: rgba(255,255,255,.85);box-shadow:var(--shadow2)}
.service-title{font-weight:900;margin-bottom:8px}

.niwo-hero{padding:56px 0 26px}
.niwo-hero-wrap{display:grid;grid-template-columns:1.2fr .8fr;gap:22px;align-items:stretch}
.niwo-hero-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.niwo-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:16px}
.req-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
.req-item{padding:14px;border-radius:16px;border:1px solid var(--line);background: rgba(255,255,255,.85);box-shadow:var(--shadow2)}
.req-title{font-weight:900;margin-bottom:6px}
.niwo-cta{display:flex;align-items:center;justify-content:space-between;gap:16px}
.niwo-cta-actions{display:flex;gap:10px;flex-wrap:wrap}

/* Carousel */
.carousel{position:relative;margin-top:14px}
.carousel-track{
  display:flex;
  gap:18px;
  overflow:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  padding:6px 2px 10px;
  -webkit-overflow-scrolling:touch;
}
.carousel-track::-webkit-scrollbar{height:10px}
.carousel-track::-webkit-scrollbar-thumb{
  background: rgba(15,23,42,.14);
  border-radius:999px;
}

.carousel-card{
  flex:0 0 clamp(240px,24vw,320px);
  border-radius:18px;
  overflow:hidden;
  border:1px solid var(--line);
  background: rgba(255,255,255,.85);
  box-shadow: var(--shadow2);
  position:relative;
  scroll-snap-align:start;
  aspect-ratio:4/3;

  cursor:default;
  transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease;
}
.carousel-card img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transform:scale(1.02);
  transition:transform .6s cubic-bezier(.2,.8,.2,1);
}
/* ✅ overlay lichter */
.carousel-card::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(255,255,255,0) 45%, rgba(15,23,42,.30) 100%);
}
.carousel-label{
  position:absolute;
  left:16px;
  bottom:14px;
  font-weight:900;
  font-size:1.25rem;
  z-index:2;
  color:#fff;
  text-shadow:0 10px 30px rgba(0,0,0,.45);
  transition:transform .35s ease, letter-spacing .35s ease;
}
.carousel-card:hover{
  transform:translateY(-10px) scale(1.02);
  box-shadow: 0 24px 60px rgba(15,23,42,.18);
}
.carousel-card:hover img{transform:scale(1.12)}
.carousel-card:hover .carousel-label{
  transform:translateY(-4px);
  letter-spacing:.5px;
}

.carousel-btn{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:44px;height:44px;
  border-radius:999px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.85);
  color: var(--text);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:28px;
  z-index:5;
  box-shadow: var(--shadow2);
}
.carousel-btn.prev{left:-10px}
.carousel-btn.next{right:-10px}

.carousel-dots{display:flex;gap:8px;justify-content:center;margin-top:10px}
.carousel-dot{
  width:7px;height:7px;
  border-radius:999px;
  border:1px solid var(--line);
  background: rgba(15,23,42,.10);
  opacity:.9;
  cursor:pointer;
}
.carousel-dot.is-active{width:18px;background: rgba(37,99,235,.40)}





/* ================================
   HEADER CTA FIX – PLAN GESPREK
   ================================ */

/* Zorg dat de nav zelf NIET meedoet */
.site-header .nav a.nav-cta{
  background: #2563eb !important;
}

/* Plan gesprek – normaal (wit) */
.site-header .nav .btn-primary{
  background: #ffffff !important;
  color: white !important;
  border: 1px solid rgba(15,23,42,.15) !important;
  box-shadow: 0 10px 24px rgba(15,23,42,.12);
}

/* Plan gesprek – hover (zwart) */
.site-header .nav .btn-primary:hover{
  background: white !important;
  color:  #0f172a !important;
  border-color: #0f172a !important;
}

/* ================================
   NAV ITEMS (DONKERBLAUW → WIT)
   ================================ */

/* Normaal: donkerblauw */
.site-header .nav > a:not(.nav-cta),
.site-header .nav .nav-dropdown > .nav-link{
  background: rgba(37,99,235,.12);
  color: #0f172a;
}

/* Hover: wit */
.site-header .nav > a:not(.nav-cta):hover,
.site-header .nav .nav-dropdown > .nav-link:hover{
  background: #ffffff;
  color: #0f172a;
}

/* Active blijft netjes */
.site-header .nav a.is-active{
  background: rgba(37,99,235,.18) !important;
  color: #0f172a;
}














/* =========================================
   FOOTER – COMPLETE STYLING
   ========================================= */

.site-footer{
  margin-top:60px;
  background: rgba(255,255,255,.85);
  border-top:1px solid var(--line);
}

.footer-grid{
  display:grid;
  grid-template-columns:1.2fr 1fr 1fr;
  gap:24px;
  padding:40px 0;
}

.footer-title{
  font-weight:900;
  margin-bottom:12px;
}

.footer-col p{
  margin:0 0 10px;
}

.footer-links{
  list-style:none;
  padding:0;
  margin:0;
}
.footer-links li{
  margin-bottom:8px;
}
.footer-links a{
  color:var(--muted);
  transition:color .2s ease;
}
.footer-links a:hover{
  color:var(--text);
}

/* Logo badges */
.badges-logos{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  align-items:center;
}

.badge-logo{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:10px 14px;
  border-radius:14px;
  background: rgba(255,255,255,.9);
  border:1px solid var(--line);
  box-shadow: var(--shadow2);
  transition: transform .2s ease, box-shadow .2s ease;
}

/* .badge-logo img{
  max-height:42px;
  width:auto;
  filter: grayscale(100%);
  opacity:.85;
  transition: filter .2s ease, opacity .2s ease;
} */

.badge-logo:hover{
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(15,23,42,.18);
}

/* .badge-logo:hover img{
  filter: grayscale(0%);
  opacity:1;
} */
.badge-logo img{
  max-height:42px;
  width:auto;
  display:block;
  transition: transform .2s ease;
}

/* Subtiele hover (professioneel) */
.badge-logo:hover img{
  transform: scale(1.05);
}
/* Footer bottom */
.footer-bottom{
  border-top:1px solid var(--line);
  background: rgba(255,255,255,.65);
}
.footer-bottom-wrap{
  padding:14px 0;
  text-align:center;
}

.site-footer a {
  color: var(--muted);
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--primary);
  text-decoration: underline;
}





.whatsapp-float{
  position:fixed;
  left:22px;
  bottom:22px;
  width:56px;
  height:56px;
  border-radius:50%;
  background:#25D366;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:999;
  box-shadow:0 10px 24px rgba(0,0,0,.25);
  transition:transform .2s ease, box-shadow .2s ease;
}
.whatsapp-float:hover{
  transform:translateY(-3px);
  box-shadow:0 18px 40px rgba(0,0,0,.35);
}
.whatsapp-img{
  width:28px;
  height:28px;
  display:block;
}
@media (max-width:600px){
  .whatsapp-float{width:52px;height:52px;left:16px;bottom:16px}
  .whatsapp-img{width:26px;height:26px}
}


/* Responsive */
@media (max-width:900px){
  .footer-grid{
    grid-template-columns:1fr;
    gap:28px;
  }
  .footer-bottom-wrap{
    text-align:left;
  }
}





@media (hover:none){
  .carousel-card:hover{transform:none;box-shadow:var(--shadow2)}
  .carousel-card:hover img{transform:scale(1.02)}
  .carousel-card:hover .carousel-label{transform:none;letter-spacing:0}
}

/* Responsive */
@media (max-width:1100px){
  .pricing-grid{grid-template-columns:repeat(2,1fr)}
  .adm-grid{grid-template-columns:repeat(2,1fr)}
  .service-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .hero-wrap{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr}
  .split{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .vac-grid{grid-template-columns:1fr}

  .noab-hero-wrap{grid-template-columns:1fr}
  .noab-grid{grid-template-columns:1fr}
  .noab-cta{flex-direction:column;align-items:flex-start}

  .adm-hero-wrap{grid-template-columns:1fr}
  .tax-hero-wrap{grid-template-columns:1fr}
  .niwo-hero-wrap{grid-template-columns:1fr}
  .niwo-grid{grid-template-columns:1fr}
  .req-grid{grid-template-columns:1fr}
  .niwo-cta{flex-direction:column;align-items:flex-start}

  .burger{display:block}

  .nav{
    display:none;
    width:100%;
    flex-direction:column;
    align-items:stretch;
    margin-left:0;
    padding:10px 0 16px;
  }
  .nav.is-open{display:flex}
  .nav a{padding:12px 12px}

  /* Dropdown mobile */
  .nav-dropdown::after{display:none}
  .nav-dropdown .dropdown{
    position:static;
    min-width:auto;
    margin-top:8px;
    display:none;
    max-height:0;
    overflow:hidden;
    opacity:0;
    transform:none;
    pointer-events:auto;
    background: rgba(255,255,255,.96);
    transition:max-height .25s ease, opacity .25s ease;
  }
  .nav-dropdown.is-open .dropdown{
    display:block;
    max-height:500px;
    opacity:1;
  }

  .carousel-btn{display:none}
}
@media (max-width:600px){
  .pricing-grid{grid-template-columns:1fr}
  .adm-grid{grid-template-columns:1fr}
  .service-grid{grid-template-columns:1fr}
  .price-right{white-space:normal}
}