:root{
  --bg0:#F6F8FC;
  --bg1:#EEF3FB;

  --card:#FFFFFF;
  --card2:#F8FAFF;
  --border: rgba(15,23,42,.10);

  --text:#0F172A;
  --muted:#5B6B85;

  --primary:#2563EB;      /* blauw (CTA) */
  --primary2:#0EA5E9;     /* optioneel accent */
  --shadow: 0 18px 50px rgba(15,23,42,.10);

  --radius: 18px;
  --max: 1180px;
  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Helvetica Neue", sans-serif;

  --ring: 0 0 0 1px rgba(37,99,235,.18), 0 10px 34px rgba(37,99,235,.12);
  --ring-strong: 0 0 0 1px rgba(37,99,235,.28), 0 14px 44px rgba(37,99,235,.16);
}

*{ box-sizing:border-box; }

body{
  margin:0;
  color:var(--text);
  font-family:var(--font);
  background:
    radial-gradient(1200px 900px at 15% 10%, rgba(37,99,235,.10), transparent 60%),
    radial-gradient(900px 700px at 85% 15%, rgba(14,165,233,.08), transparent 55%),
    linear-gradient(180deg, var(--bg0), var(--bg1) 40%, var(--bg0));
  overflow-x:hidden;
}

a{ color:inherit; text-decoration:none; }

.container{ width:min(var(--max), calc(100% - 48px)); margin:0 auto; }

/* =========================================================
   AMBIENT SECTIONS (LICHT, GEEN AFBEELDINGEN, GEEN DONKER)
   ========================================================= */
/* TOP hero achtergrond */
.top-ambient{
  background: #F6F8FC url("../img/top.png") right center / cover no-repeat !important;
}

/* Middle/bottom blijven gewoon licht zonder image */
.mid-ambient,
.bottom-ambient{
  background: transparent !important;
}
/* Overlay volledig uitzetten */
.overlay{ display:none !important; }

/* Overgang gradients uitzetten (die maakten het donker) */
.top-ambient::after,
.mid-ambient::before,
.mid-ambient::after,
.bottom-ambient::before{
  display:none !important;
}

/* =========================================================
   HEADER / NAV
   ========================================================= */
.header{
  position:sticky; top:0; z-index:40;
  background: rgba(255,255,255,.78);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(15,23,42,.08);
}

.nav{ display:flex; align-items:center; justify-content:space-between; padding:16px 0; gap:18px; }

.brand{ display:flex; align-items:center; gap:12px; letter-spacing:.10em; font-weight:900; }
.brand img{ height:30px; width:auto; }
.brand span{ font-size:16px; }

.menu{ display:flex; align-items:center; gap:16px; color: rgba(15,23,42,.62); font-size:14px; }
.menu a{
  padding:8px 10px;
  border-radius:999px;
  border:1px solid transparent;
  transition:all .18s ease;
}
.menu a:hover{
  color: var(--text);
  border-color: rgba(37,99,235,.22);
  box-shadow: var(--ring);
}
.menu a.active{
  color: var(--text);
  border-color: rgba(37,99,235,.28);
  box-shadow: var(--ring-strong);
}

.nav-cta{ display:flex; align-items:center; gap:10px; }

/* =========================================================
   BUTTONS
   ========================================================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:11px 16px;
  border-radius: 12px;
  border:1px solid rgba(15,23,42,.12);
  background: rgba(255,255,255,.80);
  color: rgba(15,23,42,.92);
  box-shadow: 0 10px 28px rgba(15,23,42,.10);
  transition: all .18s ease;
  font-size:14px;
}
.btn:hover{
  transform: translateY(-1px);
  border-color: rgba(37,99,235,.22);
  box-shadow: var(--ring);
}
.btn.primary{
  border-color: rgba(37,99,235,.30);
  background: linear-gradient(180deg, rgba(37,99,235,.98), rgba(37,99,235,.86));
  color:#fff;
  box-shadow: 0 14px 34px rgba(37,99,235,.22);
}
.btn.primary:hover{
  box-shadow: var(--ring-strong);
}
.btn.ghost{
  background: rgba(255,255,255,.55);
  border-color: rgba(15,23,42,.14);
}

/* =========================================================
   HERO
   ========================================================= */
.hero{ padding:40px 0 40px; }
.hero-grid{ display:grid; grid-template-columns: 1.2fr .8fr; gap:34px; align-items:start; }
.hero-card--top{
  margin-top:0;
}
.kicker{
  font-weight:700;
  color: rgba(37,99,235,.92);
  letter-spacing:.18em;
  text-transform:uppercase;
  font-size:12px;
}

.h1{
  margin:14px 0 12px;
  font-size: clamp(34px, 4.1vw, 56px);
  line-height:1.02;
  font-weight:900;
  color: rgba(15,23,42,.94);
}

.lead{
  color: rgba(15,23,42,.68);
  font-size: 16px;
  line-height:1.65;
  max-width: 58ch;
}

.hero-actions{ margin-top:22px; display:flex; gap:12px; flex-wrap:wrap; }

/* Hero card rechts */
.hero-card{
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,250,255,.92));
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.hero-card > img{
  width:100%;
  display:block;
  opacity: 1;
}
.hero-card .cap{
  padding:14px 16px;
  font-size:13px;
  color: rgba(15,23,42,.60);
  border-top: 1px solid rgba(15,23,42,.08);
}
.hero-card--top{ margin-top:-12px; }

/* =========================================================
   SECTIONS / CARDS
   ========================================================= */
.section{ padding:58px 0; }
.section-title{ font-size: 24px; letter-spacing:.02em; margin:0 0 10px; color: rgba(15,23,42,.92); }
.section-sub{ margin:0 0 26px; color: rgba(15,23,42,.62); max-width: 72ch; line-height:1.65; }

.cards{ display:grid; grid-template-columns: repeat(3, 1fr); gap:18px; }

.card{
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,250,255,.92));
  border: 1px solid rgba(15,23,42,.10);
  overflow:hidden;
  box-shadow: var(--shadow);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
  min-height: 250px;
}
.card:hover{
  transform: translateY(-2px);
  border-color: rgba(37,99,235,.22);
  box-shadow: var(--ring-strong);
}

/* SaaS-illustraties: groter vlak + geen crop */
.card .img{
  height: 220px !important;
  overflow: hidden;
  background: rgba(15,23,42,.04);
  display:flex;
  align-items:center;
  justify-content:center;
}

.card .img img{
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;    /* <-- geen crop, alles blijft zichtbaar */
  object-position: center center !important;
  display:block;
}
.card .body{ padding:16px 16px 18px; }
.card h3{ margin:0 0 8px; font-size:18px; letter-spacing:.01em; color: rgba(15,23,42,.92); }
.card p{ margin:0 0 14px; color: rgba(15,23,42,.62); line-height:1.55; font-size:14px; }

.card .link{ display:inline-flex; align-items:center; gap:10px; color: rgba(37,99,235,.92); font-size:14px; }
.card .link span{
  display:inline-block;
  width:22px; height:22px;
  border-radius:999px;
  border:1px solid rgba(37,99,235,.30);
  box-shadow: var(--ring);
}

/* =========================================================
   PANELS / STATS (indien gebruikt)
   ========================================================= */
.split{ display:grid; grid-template-columns: 1fr 1fr; gap:22px; align-items:start; }
.panel{
  border-radius: var(--radius);
  border:1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.92);
  box-shadow: var(--shadow);
  padding:20px;
}
.stats{ display:grid; grid-template-columns: repeat(4, 1fr); gap:14px; margin-top:22px; }
.stat{
  padding:16px;
  border-radius: 16px;
  border:1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.92);
  box-shadow: 0 12px 34px rgba(15,23,42,.08);
}
.stat .big{ font-size:22px; font-weight:900; }
.stat .small{ color: rgba(15,23,42,.60); font-size:12px; margin-top:6px; line-height:1.3; }

/* =========================================================
   FOOTER (lichte variant)
   ========================================================= */
.site-footer{
  margin-top: 26px;
  padding: 34px 28px 18px;
  border-radius: calc(var(--radius) + 6px);
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.92);
  box-shadow: var(--shadow);
}

.footer-top{
  display: grid;
  grid-template-columns: 1.15fr 2fr;
  gap: 34px;
  align-items: start;
}

.footer-logo{
  font-weight: 900;
  letter-spacing: .18em;
  color: rgba(15,23,42,.92);
  font-size: 13.5px;
  text-transform: uppercase;
}

.footer-tagline{
  margin: 10px 0 0;
  color: rgba(15,23,42,.62);
  line-height: 1.65;
  font-size: 13.5px;
  max-width: 58ch;
}

.footer-badges{
  margin-top: 14px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.footer-badges .badge,
.badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(37,99,235,.14);
  background: rgba(37,99,235,.06);
  color: rgba(15,23,42,.78);
  font-size: 12px;
  line-height: 1;
}

.footer-cols{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
  min-width: 0;
}

.footer-cols .col-title{
  font-weight: 800;
  margin-bottom: 10px;
  color: rgba(15,23,42,.86);
  font-size: 12.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.footer-cols a{
  display: inline-block;
  padding: 6px 0;
  font-size: 13.5px;
  line-height: 1.4;
  color: rgba(15,23,42,.62);
  border-bottom: 1px solid transparent;
  transition: color .16s ease, border-color .16s ease;
}

.footer-cols a:hover{
  color: rgba(15,23,42,.92);
  border-bottom-color: rgba(37,99,235,.30);
}

.footer-bottom{
  margin-top: 22px;
  padding-top: 14px;
  border-top: 1px solid rgba(15,23,42,.08);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.footer-copy{ color: rgba(15,23,42,.58); font-size: 13px; }

.footer-bottom-links{
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.footer-bottom-links a{
  color: rgba(15,23,42,.62);
  font-size: 13px;
  border-bottom: 1px solid transparent;
  transition: color .16s ease, border-color .16s ease;
}
.footer-bottom-links a:hover{
  color: rgba(15,23,42,.92);
  border-bottom-color: rgba(37,99,235,.30);
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 980px){
  .hero-grid{ grid-template-columns: 1fr; }
  .cards{ grid-template-columns: 1fr; }
  .split{ grid-template-columns: 1fr; }
  .stats{ grid-template-columns: 1fr 1fr; }
  .menu{ display:none; }
  .hero{ padding:56px 0 34px; }
}

@media (max-width: 520px){
  .footer-cols{ grid-template-columns: 1fr; }
}

/* =========================================================
   OPTIONAL: briefing image (als je het gebruikt)
   ========================================================= */
.briefing-visual{
  margin: 22px auto 26px;
  max-width: 520px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: 0 14px 40px rgba(15,23,42,.10);
}
.briefing-visual img{
  width: 100%;
  display: block;
  object-fit: cover;
  opacity: 1;
}
/* Zorg dat "Waarom dit werkt" cards even hoog zijn */
.cards .card{
  display:flex;
  flex-direction:column;
}

.cards .card .body{
  display:flex;
  flex-direction:column;
  height:100%;
}

.cards .card .body p{
  flex:1; /* tekst vult de ruimte */
}

.cards .card .link{
  margin-top:auto; /* link altijd onderaan */
}

/* =========================
   FAQ Accordion (full width)
   ========================= */

.faq{
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.92);
  box-shadow: var(--shadow);
  border-radius: calc(var(--radius) + 6px);
  overflow:hidden;
}

.faq-item{
  border-top: 1px solid rgba(15,23,42,.08);
}

.faq-item:first-child{
  border-top: 0;
}

.faq-q{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:18px 18px;
  background: transparent;
  border:0;
  text-align:left;
  cursor:pointer;
}

.faq-q strong{
  font-size:16px;
  color: rgba(15,23,42,.92);
}

.faq-q .hint{
  color: rgba(15,23,42,.55);
  font-size:13px;
}

.faq-icon{
  flex:0 0 auto;
  width:34px; height:34px;
  border-radius: 999px;
  border:1px solid rgba(37,99,235,.18);
  background: rgba(37,99,235,.06);
  display:grid;
  place-items:center;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.faq-icon svg{
  width:16px; height:16px;
  transition: transform .18s ease;
}

.faq-a{
  display:none;
  padding: 0 18px 18px 18px;
  color: rgba(15,23,42,.62);
  line-height:1.75;
  font-size:14px;
}

.faq-item.open .faq-a{
  display:block;
}

.faq-item.open .faq-icon{
  border-color: rgba(37,99,235,.28);
  box-shadow: var(--ring);
}

.faq-item.open .faq-icon svg{
  transform: rotate(180deg);
}

@media (max-width: 520px){
  .faq-q{ padding:16px 14px; }
  .faq-a{ padding: 0 14px 16px 14px; }
}
/* SaaS style FAQ breedte */
#faq .container{
  width: min(860px, calc(100% - 40px));
  margin: 0 auto;
}
/* =========================
   FAQ: niet full-width, maar netjes gecentreerd
   ========================= */

/* laat de kop/sub gewoon in de normale container staan */
#faq .section-title,
#faq .section-sub{
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
}

/* dit is de belangrijke: de accordion zelf */
#faq .faq{
  max-width: 860px;
  margin: 0 auto;           /* centreren */
}

/* optioneel: iets meer lucht rondom */
#faq .faq{
  margin-top: 18px;
}
/* =========================
   FAQ: container smaller (geen full-width)
   ========================= */
#faq{
  --max: 860px;          /* pas aan: 760 / 860 / 920 */
}

/* optioneel: iets meer “kaartgevoel” rond FAQ */
#faq .faq{
  margin-top: 18px;
}

/* Premium FAQ container */
.section#faq .faq{
  max-width: 980px;
  margin: 0 auto;
}

/* Card look */
.section#faq .faq-item{
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(10px);
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.18);
  margin-bottom: 14px;
}

/* Question row */
.section#faq .faq-q{
  width: 100%;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 18px;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.section#faq .faq-q strong{
  font-size: 16px;
  letter-spacing: 0.2px;
}

.section#faq .faq-q .hint{
  opacity: 0.70;
  font-size: 12px;
}

/* Answer */
.section#faq .faq-a{
  padding: 0 18px 18px;
  color: var(--muted);
  line-height: 1.8;
}

/* Make answer typography feel premium */
.section#faq .faq-a br{
  display: block;
  content: "";
  margin-top: 10px;
}

/* Icon button */
.section#faq .faq-icon{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(140,170,255,0.35);
  background: rgba(140,170,255,0.10);
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}

/* Hover/active states */
.section#faq .faq-item:hover{
  border-color: rgba(140,170,255,0.35);
  box-shadow: 0 26px 80px rgba(0,0,0,0.22);
}

.section#faq .faq-q:active{
  transform: translateY(1px);
}