:root{
  --brand:#2667B7;
  --accent:#BB9441;
  --bg:#F5F7FA;
  --text:#0F172A;
  --muted:#5B6574;
  --card:#FFFFFF;
  --line:#E6E9EF;
  --shadow:0 12px 30px rgba(18,33,61,.08);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text); background:var(--bg);
}

/* progress */
.progress{position:fixed;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,var(--brand),var(--accent));z-index:3000}

/* layout */
.container{width:min(1100px,92vw);margin:0 auto}
.section{padding:72px 0}
.section--alt{background:#fff}

/* header */
.site-header{position:sticky;top:0;background:rgba(255,255,255,0.85);backdrop-filter:saturate(1.2) blur(8px);z-index:2000;border-bottom:1px solid var(--line);transition:box-shadow .2s ease}
.site-header.scrolled{box-shadow:0 10px 20px rgba(0,0,0,.06)}
.site-header .nav{display:flex;align-items:center;justify-content:space-between;padding:12px 0}
.logo{height:60px;display:block}
nav ul{display:flex;gap:20px;align-items:center;margin:0;padding:0;list-style:none}
nav a{color:var(--text);text-decoration:none;font-weight:600}
nav a:hover{color:var(--brand)}
.hamburger{display:none;border:0;background:transparent;font-size:22px}

/* hero */
.hero{position:relative;min-height:70vh;display:grid;place-items:center;background:radial-gradient(1200px 600px at 70% -10%, rgba(38,103,183,.18), transparent), #0b1f3a; color:#fff;overflow:hidden}
.hero__overlay{position:absolute;inset:0;background:radial-gradient(900px 400px at 0% 100%, rgba(187,148,65,.25), transparent);pointer-events:none;z-index:0}
.hero__grid, .hero__content, .hero__image{position:relative;z-index:1}

.hero__grid{display:grid;grid-template-columns:1.2fr .8fr;gap:32px;align-items:center}
.hero__image img{width:100%;max-height:520px;object-fit:contain;filter:drop-shadow(0 30px 60px rgba(0,0,0,.35))}
.eyebrow{opacity:.85;margin:0 0 8px}
.hero h1{font-size:clamp(28px,4.2vw,48px);line-height:1.15;margin:.1em 0 .35em}
.grad{background:linear-gradient(135deg,var(--brand),var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{font-size:clamp(16px,2.1vw,18px);opacity:.9;max-width:60ch}
.cta{margin-top:18px;display:flex;gap:12px;flex-wrap:wrap}
.usp-inline{display:flex;gap:16px;flex-wrap:wrap;margin:18px 0 0;padding:0;list-style:none;opacity:.9}
.usp-inline i{color:#fff}

/* buttons */
.btn{background:var(--brand);border:1px solid var(--brand);color:#fff;text-decoration:none;padding:12px 18px;border-radius:12px;font-weight:700;display:inline-flex;gap:8px;align-items:center;box-shadow:var(--shadow)}
.btn:hover{filter:brightness(1.06)}
.btn--ghost{background:transparent;color:#fff;border-color:#ffffff55}
.btn--ghost:hover{background:#ffffff14}
.btn--full{width:100%}

/* sections */
.section-title{font-size:clamp(22px,3.2vw,32px);margin:0 0 18px}

.grid-2{display:grid;grid-template-columns:1.05fr .95fr;gap:28px;align-items:center}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}

.card{background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow)}
.card--glass{background:linear-gradient(180deg, rgba(255,255,255,.7), rgba(255,255,255,.4));backdrop-filter:blur(6px)}
.hoverlift{transition:transform .25s ease, box-shadow .25s ease}
.hoverlift:hover{transform:translateY(-6px);box-shadow:0 22px 50px rgba(0,0,0,.12)}

.about__img{width:100%;display:block;border-radius:14px}
.about__content p{margin:0 0 12px}
.stats{display:flex;gap:16px;flex-wrap:wrap;margin:14px 0}
.stat{background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px 14px;min-width:120px;text-align:center;box-shadow:var(--shadow)}
.stat strong{font-size:18px;display:block}
.badges{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}
.chip{background:#eef4fb;color:#1f5ca4;border-radius:999px;padding:6px 10px;font-size:12px;border:1px solid #cfe0f7}

/* Werkwijze accordion */
.process-acc{display:grid;gap:14px;margin-top:12px}
.acc{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:0}
.acc__summary{display:flex;justify-content:space-between;align-items:center;gap:12px;cursor:pointer;padding:16px 18px;list-style:none}
.acc__summary::-webkit-details-marker{display:none}
.acc h3{margin:0;font-size:20px;color:#003E74}
.acc .chev{transition:transform .25s ease}
.acc[open]{border-color:var(--brand);box-shadow:0 10px 24px rgba(38,103,183,.12)}
.acc[open] .chev{transform:rotate(180deg)}
.acc__body{padding:0 18px 18px 18px;color:#374151}
.acc__body p{margin:6px 0}

.extras{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:24px}
.extra{background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px;box-shadow:var(--shadow)}
.extra h3{margin:0 0 8px;color:#2667B7}
.extra ul{margin:0;padding-left:18px}
.center{text-align:center;margin-top:18px}

/* projects */
.work{cursor:pointer}
.work__img img{width:100%;height:190px;object-fit:cover;border-top-left-radius:16px;border-top-right-radius:16px;display:block}
.work__body{padding:14px 14px 16px}
.work .link{background:transparent;border:0;color:var(--brand);font-weight:700;cursor:pointer}

/* trust */
.section--trust{background:#0b1f3a;color:#fff;padding:48px 0}
.trustgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.trustbox{background:#0f2547;border:1px solid #284063;border-radius:14px;padding:18px;text-align:center}
.trustbox i{font-size:28px;color:#fff}
.trustbox h3{margin:10px 0 6px}

/* contact */
.contact__info .contact__lines p{margin:6px 0}
.contact__lines i{color:var(--brand);margin-right:8px}
.contact__form{padding:18px}
.form label{display:grid;gap:6px;margin-bottom:12px}
.form input,.form textarea{width:100%;padding:12px 14px;border-radius:10px;border:1px solid var(--line);background:#fff;font:inherit}
.form input:focus,.form textarea:focus{outline:2px solid #cfe0f7}
.form__status{display:inline-block;margin-left:10px;color:#0f5132}

/* footer */
.footer{border-top:1px solid var(--line);padding:18px 0;background:#fff}
.foot{display:flex;align-items:center;justify-content:space-between;gap:10px}
.socials a{color:#1f2937;margin-left:12px}
.socials a:hover{color:var(--brand)}

/* sticky WhatsApp */
.sticky-cta{position:fixed;right:16px;bottom:16px;z-index:2200;background:#25D366;color:#fff;text-decoration:none;border-radius:999px;padding:12px 16px;box-shadow:0 14px 30px rgba(0,0,0,.25);display:inline-flex;align-items:center;gap:8px;font-weight:800}

/* popup */
.popup{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(4,10,20,.55);z-index:2400;padding:16px}
.popup.open{display:flex}
.popup__content{background:#fff;border-radius:16px;padding:18px;border:1px solid var(--line);width:min(520px,92vw);position:relative;box-shadow:var(--shadow)}
.popup__close{position:absolute;right:12px;top:12px;border:0;background:transparent;font-size:20px;cursor:pointer}

/* modals */
.modal{position:fixed;inset:0;background:rgba(4,10,20,.55);display:none;align-items:center;justify-content:center;padding:16px;z-index:2300}
.modal[aria-hidden="false"]{display:flex}
.modal__content{width:min(960px,96vw);padding:0;position:relative}
.modal__close{position:absolute;right:12px;top:12px;border:0;background:transparent;font-size:22px;cursor:pointer}
.modal__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:0}
.modal__media img{width:100%;height:100%;object-fit:cover;border-top-left-radius:16px;border-bottom-left-radius:16px}
.modal__body{padding:18px}
.modal__body h4{margin:14px 0 6px}
.modal__body ul{margin:8px 0 0; padding-left:18px}
.modal__body p{margin:8px 0}
.modal__body--scroll{max-height:70vh;overflow:auto;padding-right:8px}
body.lock{overflow:hidden}

/* project-case typografie (overzichtelijk) */
.case{margin-top:6px}
.case h4{color:#0b1f3a}
.case strong{font-weight:800}
.case ul li{margin:6px 0}

/* animations */
@media (prefers-reduced-motion:no-preference){
  .fade-in{opacity:0;transform:scale(.98);transition:all .6s ease}
  .fade-in.in{opacity:1;transform:none}
  .fade-in-up{opacity:0;transform:translateY(18px);transition:all .6s ease}
  .fade-in-up.in{opacity:1;transform:none}
  .rise{opacity:0;transform:translateY(24px);transition:all .7s cubic-bezier(.2,.7,.2,1)}
  .rise.in{opacity:1;transform:none}
  .rise-delayed{opacity:0;transform:translateY(24px);transition:all .9s cubic-bezier(.2,.7,.2,1)}
  .rise-delayed.in{opacity:1;transform:none}
}

/* utils */
.muted{color:var(--muted)}
.link{color:var(--brand);text-decoration:none;border:0;background:transparent;cursor:pointer;font-weight:700}
.center{text-align:center}

/* responsive */
@media (max-width:1080px){
  .extras{grid-template-columns:1fr 1fr}
}
@media (max-width:980px){
  .grid-2{grid-template-columns:1fr}
  .hero__grid{grid-template-columns:1fr}
  .modal__grid{grid-template-columns:1fr}
  .modal__media img{border-radius:16px 16px 0 0}
}
@media (max-width:860px){
  nav ul{position:fixed;inset:0 0 0 35%;background:#fff;flex-direction:column;justify-content:center;gap:24px;transform:translateX(100%);transition:transform .35s ease}
  nav ul.open{transform:none}
  .hamburger{display:block;color:var(--text)}
  .trustgrid{grid-template-columns:1fr}
  .extras{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr}
}
/* ===================== SERVICES ===================== */

.services-intro{
  max-width:70ch;
  margin-bottom:28px;
}

.services-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
  align-items:stretch;
}

.service{
  padding:22px;
  display:flex;
  flex-direction:column;
}

.service h3{
  margin:0 0 10px;
  font-size:20px;
  color:#0b1f3a;
}

.service-lead{
  margin-bottom:16px;
  color:#475569;
  line-height:1.6;
}

.service h4{
  margin:18px 0 8px;
  font-size:13px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--brand);
}

.service ul{
  margin:0 0 8px 18px;
  padding:0;
}

.service li{
  margin:6px 0;
  line-height:1.5;
  color:#334155;
}

.small-note{
  font-size:13px;
  margin:10px 0 16px;
}

.btn--sm{
  margin-top:auto;
  align-self:flex-start;
  padding:10px 16px;
  font-size:14px;
}

/* responsive */
@media (max-width:980px){
  .services-grid{
    grid-template-columns:1fr;
  }
}
/* ===================== WERKWIJZE (nieuwe layout) ===================== */

.section-head{margin-bottom:18px}
.process-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:18px;
  margin-top:14px;
}

.process-card{
  padding:18px;
}

.process-top{
  display:flex;
  gap:14px;
  align-items:flex-start;
  margin-bottom:12px;
}

.process-step{
  width:42px;height:42px;
  border-radius:12px;
  display:grid;place-items:center;
  font-weight:900;
  color:#fff;
  background:linear-gradient(135deg, var(--brand), var(--accent));
  box-shadow:0 12px 26px rgba(0,0,0,.14);
  flex:0 0 auto;
}

.process-title h3{
  margin:0;
  font-size:18px;
  color:#0b1f3a;
}
.process-title p{margin:6px 0 0}

.process-list{
  list-style:none;
  padding:0;
  margin:12px 0 14px;
  display:grid;
  gap:8px;
}
.process-list li{
  display:flex;
  gap:10px;
  align-items:flex-start;
  color:#374151;
}
.process-list i{
  margin-top:3px;
  color:var(--brand);
}

.process-outcome{
  border-top:1px solid var(--line);
  padding-top:12px;
  display:grid;
  gap:6px;
}

.tag{
  display:inline-flex;
  width:max-content;
  font-size:12px;
  font-weight:800;
  color:#1f5ca4;
  background:#eef4fb;
  border:1px solid #cfe0f7;
  border-radius:999px;
  padding:6px 10px;
}

.process-note{
  margin-top:18px;
  padding:16px;
  display:flex;
  gap:14px;
  align-items:flex-start;
  border-left:4px solid var(--brand);
}
.process-note__icon{
  width:40px;height:40px;
  border-radius:12px;
  display:grid;place-items:center;
  background:#eef4fb;
  border:1px solid #cfe0f7;
  color:var(--brand);
  flex:0 0 auto;
}
.process-note h3{margin:0}

/* responsive */
@media (max-width:980px){
  .process-grid{grid-template-columns:1fr}
}
/* ===================== Werkwijze (strak / minimalistisch) ===================== */

.method-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:18px;
  margin-top:16px;
}

.method-card{
  padding:18px;
}

.method-head{
  display:flex;
  gap:12px;
  align-items:flex-start;
}

.step-badge{
  width:36px;
  height:36px;
  border-radius:12px;
  display:grid;
  place-items:center;
  font-weight:800;
  color:#fff;
  background:linear-gradient(135deg, var(--brand), var(--accent));
  box-shadow:0 12px 24px rgba(0,0,0,.12);
  flex:0 0 auto;
}

.method-card h3{
  margin:0;
  font-size:18px;
  line-height:1.2;
}

.method-head p{
  margin:6px 0 0;
}

.method-list{
  margin:14px 0 0;
  padding:0;
  list-style:none;
  display:grid;
  gap:10px;
}

.method-list li{
  position:relative;
  padding-left:28px;
  color:#1f2937;
}

.method-list li::before{
  content:"✓";
  position:absolute;
  left:0;
  top:0;
  color:var(--brand);
  font-weight:900;
}

.method-result{
  margin-top:14px;
  padding:12px 12px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#f7f9fc;
}

.result-label{
  display:inline-block;
  font-size:12px;
  font-weight:800;
  color:#1f5ca4;
  background:#eaf2ff;
  border:1px solid #cfe0f7;
  padding:4px 8px;
  border-radius:999px;
  margin-bottom:8px;
}

.method-result p{
  margin:0;
}

.method-callout{
  margin-top:18px;
  padding:16px 18px;
  display:flex;
  gap:12px;
  align-items:flex-start;
  border-left:4px solid var(--brand);
}

.callout-icon{
  width:34px;
  height:34px;
  border-radius:12px;
  display:grid;
  place-items:center;
  color:var(--brand);
  background:#eef4fb;
  border:1px solid #cfe0f7;
  flex:0 0 auto;
}

.method-callout h3{
  margin:0;
  font-size:16px;
}

/* responsive */
@media (max-width:980px){
  .method-grid{ grid-template-columns:1fr; }
}
/* ===== Werkwijze polish ===== */
#werkwijze .method-card{
  border:1px solid rgba(230,233,239,.9);
  background:linear-gradient(180deg,#ffffff 0%, #fbfdff 100%);
}

#werkwijze .method-card:hover{
  border-color: rgba(38,103,183,.35);
}

#werkwijze .method-head{
  align-items:center;
}

#werkwijze .step-badge{
  border-radius:999px;          /* ronder = meer “badge” */
  width:38px;height:38px;
}

/* ===================== OVER MIJ (onderaan) ===================== */

.about-bottom{
  display:grid;
  grid-template-columns: .9fr 1.1fr;
  gap:40px;
  align-items:center;
}

.about-bottom__image img{
  width:100%;
  border-radius:18px;
  box-shadow:var(--shadow);
  display:block;
}

.about-bottom__content p{
  margin:0 0 14px;
  line-height:1.6;
}

.about-cta{
  margin-top:10px;
  font-weight:600;
}

.certifications{
  margin-top:20px;
}

.cert-badge{
  display:inline-flex;
  align-items:center;
  gap:12px;
  padding:10px 14px;
  border-radius:14px;
  border:1px solid var(--line);
  background:#fff;
  text-decoration:none;
  color:var(--text);
  box-shadow:var(--shadow);
  transition:.2s ease;
}

.cert-badge:hover{
  transform:translateY(-3px);
  box-shadow:0 18px 40px rgba(0,0,0,.12);
}

.cert-badge img{
  height:40px;
  width:auto;
}

.cert-badge span{
  font-size:14px;
  font-weight:600;
}

/* responsive */
@media (max-width:980px){
  .about-bottom{
    grid-template-columns:1fr;
  }

  .about-bottom__image{
    order:-1;
  }
}
/* Credly badge styling */

.certifications{
  margin-top:20px;
}

.credly-wrapper{
  display:inline-block;
  transform:scale(0.9);
  transform-origin:left top;
}
.credly-wrapper{
  display:block;           /* ipv inline-block */
  max-width:180px;
}

.credly-wrapper > div{
  min-height:270px;        /* reserveer ruimte */
}
.credly-grid{
  margin-top:20px;
  display:flex;
  gap:14px;
  flex-wrap:wrap;
}

.credly-badge{
  border-radius:14px;
  padding:10px;
  background:#fff;
  border:1px solid var(--line);
  box-shadow:var(--shadow);
}
/* ===== Credly: netjes & consistent ===== */
.cert-section{
  margin-top:18px;
  display:grid;
  gap:10px;
  max-width:260px;
}

.cert-title{
  font-weight:800;
  font-size:13px;
  letter-spacing:.02em;
  color:#475569;
}

.credly-badge{
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:var(--shadow);
  padding:10px;
  width:max-content; /* voorkomt uitrekken */
}
/* ===================== HERO CLEAN (donkere variant zoals je oude hero) ===================== */

.hero--clean{
  /* zelfde vibe als je oude hero */
  position:relative;
  min-height:70vh;
  display:grid;
  place-items:center;

  background:
    radial-gradient(1200px 600px at 70% -10%, rgba(38,103,183,.18), transparent),
    #0b1f3a;

  color:#fff;
  overflow:hidden;
  padding:96px 0 80px;
}

/* zelfde overlay als oude hero */
.hero--clean::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(900px 400px at 0% 100%, rgba(187,148,65,.25), transparent);
  pointer-events:none;
  z-index:0;
}

.hero-clean{
  max-width:900px;
  position:relative;
  z-index:1;
  text-align:center;
}

.hero-clean__eyebrow{
  font-weight:600;
  color:rgba(255,255,255,.85);
  margin:0 0 12px;
  letter-spacing:.02em;
}

.hero-clean h1{
  color:#fff;
  font-size:clamp(32px,4.5vw,52px);
  line-height:1.1;
  margin:0 0 18px;
}

.hero-clean__lead{
  font-size:18px;
  color:rgba(255,255,255,.88);
  max-width:60ch;
  margin:0 auto 26px;
  line-height:1.6;
}

/* CTA */
.hero-clean__actions{
  display:flex;
  justify-content:center;
  gap:14px;
  flex-wrap:wrap;
  margin:0 0 26px;
}

/* Ghost button moet wit zijn op donkere achtergrond */
.btn--ghost-dark{
  background:transparent;
  border:1px solid rgba(255,255,255,.55);
  color:#fff;
  box-shadow:none;
}

.btn--ghost-dark:hover{
  background:rgba(255,255,255,.12);
  border-color:rgba(255,255,255,.75);
  color:#fff;
}

/* Service chips (donker/glass) */
.hero-clean__chips{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:12px;
  margin:0 0 18px;
}

.service-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 16px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.08);
  text-decoration:none;
  color:#fff;
  font-weight:700;
  font-size:14px;
  transition:.2s ease;
}

.service-chip:hover{
  background:rgba(255,255,255,.14);
  border-color:rgba(255,255,255,.24);
}

/* Trust line (wit/grijs op donker) */
.hero-clean__trust{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:20px;
  color:rgba(255,255,255,.86);
  font-size:14px;
}

.hero-clean__trust li{
  display:flex;
  align-items:center;
  gap:8px;
}

/* Responsive */
@media (max-width:768px){
  .hero--clean{
    padding:78px 0 60px;
    min-height:auto;
  }

  .hero-clean__chips{
    flex-direction:column;
    align-items:stretch;
  }

  .service-chip{
    width:100%;
    justify-content:center;
  }

  .hero-clean__trust{
    flex-direction:column;
    gap:10px;
  }
}
.services-promise{
  max-width:70ch;
  margin: -10px 0 22px;
  font-weight:800;
  color:var(--text);
}
.service-kicker{
  margin:0 0 12px;
  color:#374558;
  font-weight:700;
  line-height:1.5;
}

.service-points{
  list-style:none;
  padding:0;
  margin:0 0 14px;
  display:grid;
  gap:8px;
}
.service-points li{
  padding-left:26px;
  position:relative;
  color:#334155;
}
.service-points li::before{
  content:"✓";
  position:absolute;
  left:0;
  top:0;
  color:var(--brand);
  font-weight:900;
}
.service{
  padding:24px;
}

.service ul{
  margin:0 0 10px 18px;
}

.service h4{
  margin:16px 0 8px;
}
.method-proof{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  margin:0 0 16px;
}
.method-proof span{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.75);
  border:1px solid var(--line);
  box-shadow:0 8px 18px rgba(18,33,61,.06);
  color:#334155;
  font-size:13px;
}
.method-proof i{ color:var(--brand); }
/* ===== Projecten: premium cards ===== */
#projects .work{
  overflow:hidden;
  border:1px solid rgba(230,233,239,.95);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

#projects .work:hover{
  transform:translateY(-6px);
  border-color: rgba(38,103,183,.35);
  box-shadow:0 22px 50px rgba(0,0,0,.12);
}

#projects .work__img{
  position:relative;
  background:#f3f6fb;
}

#projects .work__img img{
  height:180px;              /* net iets lager = rust */
  object-fit:cover;
  filter:saturate(1.02) contrast(1.02);
}

#projects .work__body{
  display:grid;
  gap:8px;
  padding:14px 14px 16px;
}

#projects .work__body h3{
  margin:0;
  font-size:16px;
}

#projects .work__body .muted{
  margin:0;
  font-size:13px;
}

#projects .work .link{
  justify-self:start;
  padding:8px 12px;
  border-radius:10px;
  border:1px solid rgba(38,103,183,.25);
  background:rgba(38,103,183,.06);
  color:var(--brand);
}

#projects .work:hover .link{
  background:var(--brand);
  color:#fff;
  border-color:var(--brand);
}
.work:focus-within{
  outline:3px solid rgba(38,103,183,.22);
  outline-offset:4px;
  border-radius:16px;
}
/* ===== Over mij: onderscheidend blok ===== */
.about-subtitle{
  margin:18px 0 10px;
  font-size:16px;
}

.about-points{
  list-style:none;
  padding:0;
  margin:0 0 14px;
  display:grid;
  gap:10px;
}

.about-points li{
  display:flex;
  gap:10px;
  align-items:flex-start;
  color:#1f2937;
}

.about-points i{
  margin-top:3px;
  color:var(--brand);
}
/* ===================== MINI FAQ (mooi) ===================== */
.faq-mini{
  padding:22px;
  border-radius:18px;
  background:linear-gradient(180deg,#fff, #fbfcff);
}

.faq-mini h3{
  margin:0 0 6px;
  font-size:20px;
  color:#0b1f3a;
}

.faq-mini .muted{
  margin:0 0 14px;
}

.faq-list{
  display:grid;
  gap:10px;
  margin-top:12px;
}

.faq{
  border:1px solid var(--line);
  border-radius:14px;
  background:#fff;
  overflow:hidden;
  transition:box-shadow .2s ease, border-color .2s ease, transform .2s ease;
}

.faq:hover{
  border-color:rgba(38,103,183,.35);
  box-shadow:0 14px 30px rgba(18,33,61,.08);
  transform:translateY(-1px);
}

.faq > summary{
  list-style:none;
  cursor:pointer;
  padding:14px 16px;
  display:flex;
  align-items:flex-start;
  gap:12px;
  font-weight:700;
  color:#0f172a;
}

.faq > summary::-webkit-details-marker{ display:none; }

.faq .qicon{
  width:26px;height:26px;
  border-radius:10px;
  display:grid;place-items:center;
  flex:0 0 auto;
  color:var(--brand);
  background:rgba(38,103,183,.10);
  border:1px solid rgba(38,103,183,.18);
  margin-top:1px;
}

.faq .qtext{
  line-height:1.35;
  font-size:15px;            /* minder “schreeuwerig” */
}

.faq .chev{
  margin-left:auto;
  width:28px;height:28px;
  border-radius:10px;
  display:grid;place-items:center;
  color:#475569;
  background:#f3f6fb;
  border:1px solid #e7ecf4;
  transition:transform .2s ease, background .2s ease, color .2s ease;
}

.faq[open]{
  border-color:rgba(38,103,183,.45);
  box-shadow:0 18px 40px rgba(38,103,183,.10);
}

.faq[open] .chev{
  transform:rotate(180deg);
  color:var(--brand);
  background:rgba(38,103,183,.10);
  border-color:rgba(38,103,183,.18);
}

.faq__body{
  padding:0 16px 14px 54px; /* uitlijnen onder tekst */
  color:#475569;
  line-height:1.6;
  font-size:14px;
}

.faq__body p{ margin:0; }

/* Mobile: iets compacter */
@media (max-width:768px){
  .faq-mini{ padding:16px; }
  .faq > summary{ padding:12px 12px; }
  .faq__body{ padding:0 12px 12px 50px; }
}

/* Extra ruimte onder FAQ */
.faq-mini{
  margin-bottom: 60px;
}