/* =============================================================
   Spreash® — CENTRALE HUISSTIJL
   -------------------------------------------------------------
   ============================================================= */

:root{
  /* --- Kleurenpalet --- */
  --c50:#F5F8F7;          /* lichtste achtergrond / kaarten */
  --c100:#DDEAE9;
  --c75:#E9F1F0;          /* zacht lichtpunt voor hero/logoband (tussen c100 en c50) */
  --c200:#BBD4D3;         /* randen */
  --c400:#699798;         /* subtiele labels */
  --c500:#548284;         /* logo & koppen */
  --c600:#3E6063;         /* algemene teksten */
  --lighter:#A3C8C6;      /* paginabasis */
  --orange:#EB6823;       /* accent / CTA */

  /* --- Afgeleide tokens (verwijzen naar palet) --- */
  --text:var(--c600);
  --text-soft:var(--c400);
  --heading:var(--c500);
  --border:var(--c200);
  --surface:var(--c50);
  --accent:var(--orange);

  /* --- Radii --- */
  --r-card:12px; --r-nav:10px; --r-btn:8px; --r-pill:999px;

  /* --- Verticale ritmiek (spacing-schaal) ---
     Gebruik deze overal i.p.v. losse pixelwaarden,
     zo blijft de afstand tussen objecten consistent en rustig. */
  --sp-xs:8px; 
  --sp-sm:16px; 
  --sp-md:24px;
  --sp-lg:40px; 
  --sp-xl:64px; 
  --sp-section:96px;

  /* --- Typografie --- */
  --font:'PT Sans',sans-serif;
  --fs-base:18px; 
  --fs-sm:1rem; 
  --fs-md:1.2rem; 
  --fs-lg:1.2rem;
  --fs-xl:1.4rem; 
  --fs-h3:1.3rem;
  --fs-h2:clamp(2rem,4vw,2.8rem);
  --fs-h1:clamp(1.8rem,3.5vw,2.6rem);
  --fs-nav:1.2rem; 
  --fs-btn:1.1rem; 
  --fs-btn-lg:1.2rem;
  --fs-label:14px; 
  --fs-badge:13px; 
  --fs-tiny:.85rem;
  --lh-base:1.9; 
  --lh-heading:1.2; 
  --lh-relaxed:1.85;

  /* --- Schaduwen --- */
  --shadow-card:0 2px 12px rgba(62,96,99,.08),0 1px 3px rgba(62,96,99,.06);
  --shadow-card-hover:0 8px 28px rgba(62,96,99,.14),0 2px 8px rgba(62,96,99,.08);
  --shadow-panel:0 4px 24px rgba(62,96,99,.1);
}

/* ================= BASIS ================= */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{overflow-x:hidden;width:100%;scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{font-family:var(--font);background:var(--lighter);color:var(--text);
  line-height:var(--lh-base);font-size:var(--fs-base);width:100%}
a{color:inherit;text-decoration:none;cursor:pointer}
.page{display:none;width:100%}
.page.active{display:block}

/* [+ TOEGEVOEGD] Vangnet voor het hidden-attribuut.
   layout.js zet 'hidden' op het mobiele menu. De browser verbergt dat
   zelf, maar een reset of een latere display-regel kan dat overrulen —
   het verschil tussen een dicht menu en de losse links onder de balk.
   Deze regel maakt dat onmogelijk en geldt meteen voor elk ander
   element dat je in de toekomst met 'hidden' verbergt. */
[hidden]{display:none!important}

/* ============ ACHTERGROND-GRADIENTS ============
   Secties wisselen a/b af zodat elke overgang naadloos is:
   grad-a eindigt op c100, dus de volgende sectie moet met
   grad-b beginnen (start c100) — en andersom.
   Ketting op de homepage:
   hero (eindigt c100) → solution (b) → features (a) →
   ecosystem (b) → trust (a) → roadmap (b) → blog (a) →
   cta-band (start c100) → footer (start lighter)          */
.bg-grad-a{background:linear-gradient(to bottom,var(--lighter) 0%,var(--c100) 100%)}
.bg-grad-b{background:linear-gradient(to bottom,var(--c100) 0%,var(--lighter) 100%)}
.is-hidden{display:none!important}
/* Hero blijft binnen lighter<->c100, net als de rest van de keten (geen c75-lichtpunt meer) */
.bg-hero{background:linear-gradient(to bottom,var(--lighter) 0%,var(--c100) 55%,var(--c100) 100%)}
.bg-band{background:linear-gradient(to bottom,var(--c100) 0%,var(--c75) 50%,var(--c100) 100%)}

/* ================= NAV ================= */
nav{position:sticky;top:0;z-index:200;background:var(--lighter);
  /* relative-context voor het mobiele uitklapmenu */
  border-bottom:none;padding:0 32px;height:90px}
.nav-inner{max-width:1100px;margin:auto;display:flex;align-items:center;
  justify-content:space-between;height:100%;gap:16px}
.logo{background-image:url("../branding/logo.svg");background-repeat:no-repeat;
  background-position:left center;background-size:contain;
  width:220px;height:60px;flex-shrink:0}   /* niet laten krimpen in de flexbalk */
.nav-links{display:flex;gap:0;font-size:var(--fs-nav);height:100%}
.nav-links a{color:var(--text);font-weight:600;padding:0 14px;display:flex;
  align-items:center;height:100%;border-bottom:2px solid transparent;
  transition:color .12s,border-color .12s;opacity:.85;
  white-space:nowrap}   /* menu-items nooit over twee regels afbreken */
.nav-links a:hover{opacity:1}
.nav-links a.active{opacity:1;font-weight:700;border-bottom:2px solid var(--accent)}
.nav-right{display:flex;align-items:center;gap:12px;flex-shrink:0}
.lang-btn{font-size:var(--fs-sm);font-weight:700;padding:6px 14px;
  border:1.5px solid var(--heading);border-radius:var(--r-btn);cursor:pointer;
  background:transparent;color:var(--text);font-family:var(--font)}
.lang-btn:hover{background:var(--c200)}

/* --- Hamburger + mobiel menu -------------------------------------
   Het menu is ÉÉN definitie (assets/js/layout.js); hieronder alleen
   de weergave. Breekpunt: onder 900px verschijnt de hamburger. --- */
.nav-toggle{display:none;width:44px;height:44px;border:none;background:transparent;
  cursor:pointer;padding:10px;flex-direction:column;justify-content:space-between;flex-shrink:0}
.nav-toggle span{display:block;height:2px;width:100%;background:var(--heading);
  border-radius:2px;transition:transform .2s,opacity .2s}
.menu-open .nav-toggle span:nth-child(1){transform:translateY(11px) rotate(45deg)}
.menu-open .nav-toggle span:nth-child(2){opacity:0}
.menu-open .nav-toggle span:nth-child(3){transform:translateY(-11px) rotate(-45deg)}
@media(prefers-reduced-motion:reduce){.nav-toggle span{transition:none}}

.nav-mobile{display:none;position:absolute;left:0;right:0;top:100%;
  background:var(--c50);border-top:.5px solid var(--border);
  box-shadow:var(--shadow-panel);padding:var(--sp-sm) 24px var(--sp-md);
  max-height:calc(100vh - 90px);overflow-y:auto}
.menu-open .nav-mobile{display:block}
.nav-mobile-links{display:flex;flex-direction:column;margin-bottom:var(--sp-sm)}
.nav-mobile-links a{display:block;padding:14px 4px;font-size:var(--fs-lg);
  font-weight:700;color:var(--text);border-bottom:.5px solid var(--border)}
.nav-mobile-links a:last-child{border-bottom:none}
.nav-mobile .btn{margin-bottom:10px}

/* [+ TOEGEVOEGD] Boven de breakpoint hoort het mobiele menu niet te
   bestaan. Zonder deze regel wint '.menu-open .nav-mobile{display:block}'
   ook op desktop: open je het menu op een smal scherm en trek je het
   venster daarna breed, dan blijft het uitklapmenu staan naast de
   desktoplinks — en dat is precies het dubbele menu. */
@media(min-width:901px){
  .nav-mobile{display:none!important}
}

/* Smalle laptops: menu compacter i.p.v. laten afbreken */
@media(max-width:1150px){
  nav{padding:0 20px}
  .nav-links{font-size:1.05rem}
  .nav-links a{padding:0 10px}
  .logo{width:190px}
}

@media(max-width:900px){
  nav{padding:0 20px}
  /* 'nav ...' i.p.v. losse klassen: anders wint de latere .btn-regel
     (zelfde specificiteit, maar verderop in het bestand). */
  nav .nav-links{display:none}
  nav .nav-toggle{display:flex}
  nav .nav-cta{display:none}      /* CTA staat in het uitklapmenu */
  nav .logo{width:170px;height:48px}
}
@media(max-width:400px){nav .logo{width:150px;height:44px}}

/* [+ TOEGEVOEGD] Zichtbare toetsenbordfocus.
   De globale reset haalt de standaard outline nergens weg, maar op
   deze knoppen valt hij tegen de lichte achtergrond weg. focus-visible
   toont hem alleen bij toetsenbordgebruik, niet na een muisklik. */
.nav-toggle:focus-visible,
.lang-btn:focus-visible,
.nav-links a:focus-visible,
.nav-mobile-links a:focus-visible,
.footer-col ul li a:focus-visible{
  outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}

/* ================= KNOPPEN ================= */
.btn{display:inline-block;border-radius:var(--r-btn);font-family:var(--font);
  font-weight:700;font-size:var(--fs-btn);cursor:pointer;transition:all .15s;
  padding:14px 28px;border:none;line-height:1}
.btn-cta{background:var(--accent);color:var(--c50)}
.btn-cta:hover{opacity:.88}
.btn-secondary{background:transparent;color:var(--heading);
  border:1.5px solid var(--heading);font-weight:600}
.btn-secondary:hover{background:var(--c200)}
.btn-primary{background:var(--heading);color:#fff}
.btn-primary:hover{opacity:.9}
.btn-lg{padding:18px 36px;font-size:var(--fs-btn-lg)}
.btn-block{display:block;width:100%}

/* ================= PILL / BADGE ================= */
.pill{display:inline-block;background:var(--surface);color:var(--text);
  border:1px solid var(--border);font-size:var(--fs-badge);font-weight:700;
  padding:6px 14px;border-radius:var(--r-pill)}
.pill-group{display:flex;gap:8px;flex-wrap:wrap}

/* ================= SECTIES ================= */
/* Vast ritme: label 16px → titel 24px → subtekst 64px → content */
section{padding:var(--sp-section) 32px}
/* De nav is 90px hoog en blijft staan; met scroll-margin belandt een
   sectiekop na een ankerlink netjes ONDER de balk in plaats van erachter. */
section[id],div[id].page{scroll-margin-top:110px}
.section-inner{max-width:1100px;margin:auto}
.section-label{font-size:var(--fs-label);font-weight:700;color:var(--text-soft);
  text-transform:uppercase;letter-spacing:.14em;margin-bottom:var(--sp-sm);text-align:center}
.section-title{font-size:var(--fs-h2);font-weight:700;color:var(--heading);
  letter-spacing:-.02em;margin-bottom:var(--sp-md);line-height:var(--lh-heading);text-align:center}
.section-sub{color:var(--text);font-size:var(--fs-lg);max-width:580px;
  margin:0 auto var(--sp-xl);line-height:var(--lh-relaxed);text-align:center}
.align-left{text-align:left;margin-left:0}

/* ================= KAARTEN ================= */
.card{background:var(--surface);border:.5px solid var(--border);border-radius:var(--r-card)}
.card-elevated{box-shadow:var(--shadow-card)}
.card-elevated:hover{box-shadow:var(--shadow-card-hover);transform:translateY(-2px);transition:all .2s}

/* ================= FORMULIER-ELEMENTEN (gedeeld) ================= */
.field label{display:block;font-size:var(--fs-sm);font-weight:700;
  color:var(--text);margin-bottom:6px}
.field input,.field select,.field textarea{width:100%;padding:10px 12px;
  border:.5px solid var(--border);border-radius:var(--r-nav);
  font-family:var(--font);font-size:var(--fs-sm);color:var(--text);
  background:var(--surface);outline:none;transition:border-color .15s}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--lighter)}

/* ================= HERO ================= */
.hero{padding:var(--sp-xl) 32px var(--sp-section)}
.hero-grid{max-width:1100px;margin:auto;display:grid;
  grid-template-columns:8fr 12fr; /* calculator iets breder voor balans */
  gap:var(--sp-xl);align-items:center}
@media(max-width:920px){.hero-grid{grid-template-columns:1fr}}
.hero-title{font-size:var(--fs-h1);font-weight:900;line-height:1.2;
  margin-bottom:var(--sp-md);color:var(--heading)}
.hero-sub{font-size:var(--fs-md);color:var(--text);margin-bottom:var(--sp-lg);
  line-height:var(--lh-relaxed)}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:var(--sp-lg)}

/* ================= CALCULATOR ================= */
.calc-card{background:var(--surface);border:.5px solid var(--border);
  border-radius:var(--r-card);padding:32px;box-shadow:var(--shadow-panel)}
.calc-title{font-size:var(--fs-h3);font-weight:700;color:var(--text);margin-bottom:8px}
.calc-intro{font-size:var(--fs-sm);color:var(--text);margin-bottom:16px;line-height:1.75}
.calc-cols{display:grid;grid-template-columns:28px 1fr 22px 1fr;gap:10px;
  align-items:center;padding:0 2px 8px;margin-bottom:8px}
.calc-col-label{font-size:var(--fs-label);font-weight:700;text-transform:uppercase;letter-spacing:.1em}
.calc-col-label.pain{color:var(--text-soft)}
.calc-col-label.ambition{color:var(--accent)}
.pain-rows{display:flex;flex-direction:column;gap:10px;margin-bottom:20px}
.pain-row{display:grid;grid-template-columns:28px 1fr 22px 1fr;gap:10px;
  align-items:center;cursor:pointer;background:var(--surface);
  border:.5px solid var(--border);border-radius:var(--r-nav);
  padding:12px 14px;transition:all .15s}
.pain-row:hover{border-color:var(--c400);background:var(--surface)}
.pain-row:has(input:checked){border-color:var(--heading);box-shadow:0 1px 4px rgba(62,96,99,.08)}
.pain-row input{accent-color:var(--heading);width:18px;height:18px;flex-shrink:0;margin:0}
.pain-text{font-size:.86rem;color:var(--heading);line-height:1.35}
.pain-arrow{font-size:1.1rem;font-weight:700;color:var(--accent);text-align:center}
.ambition-text{font-size:.9rem;font-weight:700;color:var(--text);line-height:1.35}
@media(max-width:340px){
  .pain-row{grid-template-columns:28px 1fr;row-gap:8px}
  .pain-row .pain-arrow{display:none}
  .pain-row .pain-text{grid-column:2}
  .pain-row .ambition-text{grid-column:2;padding-top:6px;border-top:.5px solid var(--border)}
}
.calc-fields{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:20px}
@media(max-width:480px){.calc-fields{grid-template-columns:1fr}}
.calc-result{background:var(--surface);border:.5px solid var(--border);
  border-radius:var(--r-nav);padding:20px}
.calc-result-row{display:flex;justify-content:space-between;align-items:center;
  padding-bottom:14px;border-bottom:.5px solid var(--border);margin-bottom:14px}
.calc-result-label{font-size:var(--fs-sm);font-weight:700;color:var(--text)}
.calc-result-big{font-size:1.8rem;font-weight:700;color:var(--heading)}
.calc-result-big .unit{font-size:1.1rem}
.calc-result-mid{font-size:1.3rem;color:var(--text)}
.calc-note{font-size:var(--fs-tiny);color:var(--text-soft);margin-top:10px;line-height:1.6}

/* ================= SOLUTION ================= */
.solution-wrap{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
@media(max-width:700px){.solution-wrap{grid-template-columns:1fr}}
.solution-visual{background:var(--surface);border:.5px solid var(--border);
  border-radius:var(--r-card);padding:28px}
.vis-label{font-size:var(--fs-label);font-weight:700;color:var(--text-soft);
  text-transform:uppercase;letter-spacing:.1em;margin-bottom:16px}
.node{background:var(--surface);border:.5px solid var(--border);
  border-radius:var(--r-nav);padding:12px 16px;margin:8px 0;display:flex;
  align-items:center;gap:10px;font-weight:700;font-size:var(--fs-sm);color:var(--text)}
.node .dot{width:8px;height:8px;border-radius:50%;background:var(--heading);flex-shrink:0}
.node .tag{margin-left:auto;font-size:.8rem;color:var(--text);background:var(--c100);
  border-radius:var(--r-pill);padding:3px 10px;font-weight:700;white-space:nowrap}
.arrow{text-align:center;color:var(--border);font-size:1.1rem;margin:2px 0}
.vis-note{margin-top:16px;font-size:var(--fs-sm);color:var(--text);line-height:1.75}
.check-list{list-style:none;display:flex;flex-direction:column;gap:12px;margin-top:16px}
.check-list li{display:flex;gap:10px;font-size:var(--fs-md);color:var(--text);line-height:var(--lh-base)}
.check-list li::before{content:"✓";color:var(--heading);font-weight:700;flex-shrink:0}

/* ================= FEATURES ================= */
.feat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px}
.feat{background:var(--surface);border-radius:var(--r-card);padding:26px;
  border:.5px solid var(--border)}
.feat h3{font-weight:700;font-size:var(--fs-lg);color:var(--heading);
  margin-bottom:12px;line-height:var(--lh-heading)}
.feat p{font-size:var(--fs-md);color:var(--text);line-height:var(--lh-base);margin-bottom:var(--sp-sm)}

/* ================= ECOSYSTEM ================= */
.eco-wrap{display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px;margin-top:8px}
@media(max-width:700px){.eco-wrap{grid-template-columns:1fr}}
.eco-card{background:var(--surface);border:.5px solid var(--border);
  border-radius:var(--r-card);padding:28px}
.eco-card h3{font-size:var(--fs-lg);font-weight:700;color:var(--text);margin-bottom:10px}
.eco-card p{font-size:var(--fs-md);color:var(--text);line-height:var(--lh-base)}
.eco-intro{max-width:700px;margin:0 auto 44px;text-align:center}
.eco-intro p{color:var(--text);font-size:var(--fs-lg);line-height:var(--lh-relaxed)}

/* ================= TRUST ================= */
.trust-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px}
.trust-item{background:var(--surface);border:.5px solid var(--border);
  border-radius:var(--r-card);padding:24px;display:flex;gap:16px;align-items:flex-start}
.trust-icon{width:44px;height:44px;border-radius:10px;background:var(--c100);
  display:flex;align-items:center;justify-content:center;flex-shrink:0}
.trust-icon svg{stroke:var(--heading)}
.trust-item h4{font-weight:700;font-size:var(--fs-lg);color:var(--text);margin-bottom:6px}
.trust-item p{font-size:var(--fs-md);color:var(--text);line-height:var(--lh-base)}

/* ================= ROADMAP ================= */
.road-list{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.road-tag{background:var(--surface);border:.5px solid var(--border);
  border-radius:var(--r-nav);padding:10px 20px;font-size:var(--fs-md);
  font-weight:700;color:var(--text)}

/* ================= BLOG ================= */
.blog-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px}
.blog-card{background:var(--surface);border:.5px solid var(--border);
  border-radius:var(--r-card);overflow:hidden;cursor:pointer;transition:all .2s;display:block}
.blog-card:hover{box-shadow:var(--shadow-card-hover);transform:translateY(-2px)}
.blog-thumb{height:180px;background:var(--c100);display:flex;align-items:center;
  justify-content:center;font-size:2.5rem;border-bottom:.5px solid var(--border);
  overflow:hidden;position:relative}
.blog-thumb img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.blog-thumb .blog-emoji{position:relative;z-index:1}
.blog-body{padding:24px}
.blog-cat{font-size:var(--fs-badge);font-weight:700;color:var(--heading);
  text-transform:uppercase;letter-spacing:.1em;margin-bottom:10px}
.blog-tags {display: flex;flex-wrap: wrap;gap: 6px;margin-top: 10px;}
.blog-card h3{font-size:var(--fs-lg);font-weight:700;color:var(--heading);
  margin-bottom:10px;line-height:var(--lh-heading)}
.blog-card p{font-size:var(--fs-md);color:var(--text);margin-bottom:14px;line-height:var(--lh-base)}
.blog-meta{font-size:var(--fs-sm);color:var(--text-soft)}
.blog-image{width: 100%;height: auto;border-radius: 12px;object-fit: cover;}


/* ================= KENNISBANK ================= */
.kb-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:20px}
.kb-card{background:var(--surface);border:.5px solid var(--border);
  border-radius:var(--r-card);padding:24px;cursor:pointer;transition:all .2s;display:block}
.kb-card:hover{box-shadow:var(--shadow-card-hover);transform:translateY(-2px)}
.kb-cat{font-size:var(--fs-badge);font-weight:700;color:var(--text-soft);
  text-transform:uppercase;letter-spacing:.1em;margin-bottom:10px}
.kb-card h3{font-size:var(--fs-lg);font-weight:700;color:var(--text);margin-bottom:8px}
.kb-card p{font-size:var(--fs-md);color:var(--text);line-height:var(--lh-base)}
.kb-arrow{color:var(--heading);margin-top:14px;font-size:var(--fs-md);font-weight:700}

/* ================= CTA-BAND ================= */
/* In lijn met huisstijl: lichte gradient, accentknop als blikvanger */
.cta-band{background:linear-gradient(to bottom,var(--c100) 0%,var(--lighter) 100%);
  text-align:center;padding:var(--sp-section) 32px}
.cta-band h2{font-size:var(--fs-h2);font-weight:700;color:var(--heading);
  margin-bottom:var(--sp-md);line-height:var(--lh-heading)}
.cta-band p{font-size:var(--fs-lg);color:var(--text);max-width:520px;
  margin:0 auto var(--sp-lg);line-height:var(--lh-relaxed)}
.cta-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.cta-note{font-size:var(--fs-sm);color:var(--text-soft);margin-top:16px}

/* ================= FOOTER ================= */
/* Huisstijl-conform: zelfde lichte tinten en tekstkleuren als de rest */
footer{background:linear-gradient(to bottom,var(--lighter) 0%,var(--c100) 100%);
  border-top:.5px solid var(--border);padding:var(--sp-xl) 32px 28px}
.footer-inner{max-width:1100px;margin:0 auto var(--sp-lg);display:flex;gap:var(--sp-xl);
  flex-wrap:wrap;justify-content:space-between}
.footer-col h4{font-weight:700;color:var(--heading);margin-bottom:14px;font-size:var(--fs-lg)}
.footer-col p{font-size:var(--fs-sm);color:var(--text);line-height:var(--lh-base);max-width:240px}
.footer-col ul{list-style:none;display:flex;flex-direction:column;gap:8px}
.footer-col ul li a{font-size:var(--fs-sm);color:var(--text)}
.footer-col ul li a:hover{color:var(--heading);text-decoration:underline}
.footer-bottom{max-width:1100px;margin:0 auto;padding-top:20px;
  border-top:1px solid var(--border);display:flex;justify-content:space-between;
  flex-wrap:wrap;gap:8px;font-size:var(--fs-tiny);color:var(--text-soft)}

/* ================= MODAL ================= */
/* Let op de opbouw: .modal-overlay is de schil die dicht/open gaat,
   .modal is het paneel erbinnen. Zet nooit display:none op .modal zelf —
   dan blijft de inhoud onzichtbaar terwijl de overlay wél opent. */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(30,48,50,.45);
  z-index:500;align-items:center;justify-content:center;padding:20px}
.modal-overlay.open{display:flex}
/* Het aanvraagformulier ligt altijd bóven de calculator-popup */
.modal-form{z-index:600}
.modal{background:var(--c100);border-radius:var(--r-card);padding:40px;
  max-width:540px;width:100%;position:relative;max-height:90vh;overflow-y:auto}
.modal-close{position:absolute;top:16px;right:20px;font-size:1.4rem;cursor:pointer;
  color:var(--text-soft);background:none;border:none;font-family:var(--font)}
.modal-close:hover{color:var(--text)}
.modal h2{font-size:var(--fs-h3);font-weight:700;color:var(--heading);margin-bottom:8px}
.modal .modal-sub{font-size:var(--fs-md);color:var(--text);margin-bottom:28px;line-height:var(--lh-base)}
.form-group{margin-bottom:20px}
.form-group label{display:block;font-size:var(--fs-md);font-weight:700;
  color:var(--text);margin-bottom:7px}
.form-group input,.form-group select,.form-group textarea{width:100%;
  padding:13px 16px;border:.5px solid var(--border);border-radius:var(--r-nav);
  font-size:var(--fs-md);font-family:var(--font);outline:none;
  transition:border-color .15s;background:var(--surface);color:var(--text)}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:var(--lighter)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:480px){.form-row{grid-template-columns:1fr}}
.form-note{font-size:var(--fs-tiny);color:var(--text-soft);margin-top:12px;line-height:var(--lh-base)}
.consent-row{display:flex;gap:10px;align-items:flex-start;margin-bottom:20px;cursor:pointer}
.consent-row input{accent-color:var(--heading);width:18px;height:18px;flex-shrink:0;margin-top:4px}
.consent-row span{font-size:var(--fs-sm);color:var(--text);line-height:1.6}
.consent-row a{color:var(--heading);font-weight:700;text-decoration:underline}
.consent-error{display:none;font-size:var(--fs-tiny);color:var(--accent);
  font-weight:700;margin:-12px 0 16px}
.consent-error.visible{display:block}
.form-success{text-align:center;padding:24px 0}
.form-success .icon{font-size:2.5rem;margin-bottom:12px}
.form-success h3{color:var(--text);font-weight:700;margin-bottom:8px;font-size:var(--fs-h3)}
.form-success p{font-size:var(--fs-md);color:var(--text)}

/* ================= ARTIKELPAGINA'S ================= */
.article-wrap{background:linear-gradient(to bottom,var(--lighter) 0%,var(--c100) 25%,var(--c100) 75%,var(--lighter) 100%);min-height:100vh;padding:64px 32px}
.article-page{max-width:1100px;margin:auto}
.article-list{max-width:1100px;margin:auto}
.article-back{display:inline-flex;align-items:center;gap:8px;color:var(--heading);
  font-size:var(--fs-md);font-weight:700;cursor:pointer;margin-bottom:36px;
  background:none;border:none;font-family:var(--font)}
.article-back:hover{color:var(--text)}
.article-label{font-size:var(--fs-badge);font-weight:700;color:var(--heading);
  text-transform:uppercase;letter-spacing:.14em;margin-bottom:12px}
.article-page h1{font-size:var(--fs-h1);font-weight:700;color:var(--text);
  margin-bottom:18px;line-height:var(--lh-heading)}
.article-meta{font-size:var(--fs-sm);color:var(--text-soft);margin-bottom:36px;
  padding-bottom:24px;border-bottom:.5px solid var(--border)}
.article-body p{margin-bottom:22px;color:var(--text);line-height:var(--lh-base);font-size:var(--fs-md)}
.article-body h2{font-size:var(--fs-xl);font-weight:700;color:var(--heading);margin:40px 0 16px}
.article-body ul{margin:0 0 22px 24px;color:var(--text);line-height:var(--lh-base);font-size:var(--fs-md)}
.article-body ul li{margin-bottom:8px}

/* ================= LOGO-LOOP ================= */
.logo-band{padding:40px 0;overflow:hidden}
.logo-band h2{text-align:center;font-size:var(--fs-h3);font-weight:700;
  color:var(--heading);margin-bottom:28px;padding:0 32px}
.logo-track-wrap{position:relative;overflow:hidden}
.logo-track{display:flex;gap:56px;align-items:center;width:max-content;
  animation:scroll-loop 24s linear infinite}
@media(prefers-reduced-motion:reduce){.logo-track{animation:none;flex-wrap:wrap;width:100%;justify-content:center}}
.logo-slot{flex-shrink:0;width:140px;height:56px;display:flex;
  align-items:center;justify-content:center}
.logo-slot img{max-width:120px;max-height:44px;object-fit:contain;
  filter:grayscale(100%) brightness(0) invert(40%) sepia(30%) saturate(400%) hue-rotate(140deg);
  opacity:.7;transition:opacity .2s}
.logo-slot img:hover{opacity:1}
@keyframes scroll-loop{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* ================= BLOGARTIKEL-COMPONENTEN =================
   Gebruikt op de losse blogpagina's in /blog/<slug>/.
   Verwijst uitsluitend naar de centrale variabelen bovenin. */

/* CTA-blok: zachte variant (midden in artikel) en sterke variant (onderaan) */
.cta-box{background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-card);padding:var(--sp-md) var(--sp-md);
  margin:var(--sp-lg) 0;box-shadow:var(--shadow-card)}
.cta-box h3{font-size:var(--fs-h3);color:var(--heading);margin-bottom:var(--sp-xs)}
.cta-box p{margin-bottom:var(--sp-sm)!important}
.cta-box .btn{margin-right:var(--sp-xs)}
.cta-box--strong{border-left:4px solid var(--accent)}

/* Taalblokken: blog.js toont er precies één */
html[data-active-lang="nl"] .lang-en{display:none}
html[data-active-lang="en"] .lang-nl{display:none}

/* Gerelateerde artikelen onderaan een blog */
.related{margin-top:var(--sp-xl);padding-top:var(--sp-md);border-top:1px solid var(--border)}
.related h3{font-size:var(--fs-h3);color:var(--heading);margin-bottom:var(--sp-sm)}
.related a{display:block;color:var(--heading);font-weight:700;margin-bottom:var(--sp-xs)}
.related a:hover{color:var(--accent)}


/* ================= LOSSTAANDE TAG =================
   Zelfde look als .node .tag, maar overal bruikbaar
   (toegevoegd n.a.v. pill -> tag aanpassing). */
.tag-standalone{display:inline-block;font-size:.8rem;color:var(--text);
  background:var(--c100);border-radius:var(--r-pill);padding:3px 10px;
  font-weight:700;white-space:nowrap}

/* Categorielabel in de automatische 'Verder lezen'-lijst */
.related-cat{display:inline-block;font-size:var(--fs-badge);color:var(--text-soft);
  font-weight:700;margin-right:8px;text-transform:uppercase;letter-spacing:.03em}

/* Afbeelding bovenin een blogartikel */
.post-img{width:100%;border-radius:var(--r-card);border:1px solid var(--border);
  margin:var(--sp-sm) 0 var(--sp-md);display:block}


/* ================= DOELGROEP & FAQ (analyse-ronde) ================= */
/* Sociaal bewijs onder de hero-knoppen */
.hero-proof{display:inline-block;margin-top:14px;font-size:var(--fs-sm);
  color:var(--text-soft);font-weight:700;text-decoration:none}
.hero-proof:hover{color:var(--accent)}

/* Tussengradienten die de a/b-keten intact laten:
   -mid  past tussen ...eindigt op c100 | begint op c100...
   -dip  past tussen ...eindigt op lighter | begint op lighter... */
.bg-grad-mid{background:linear-gradient(to bottom,var(--c100) 0%,var(--lighter) 50%,var(--c100) 100%)}
.bg-grad-dip{background:linear-gradient(to bottom,var(--lighter) 0%,var(--c100) 50%,var(--lighter) 100%)}

/* Route-kaarten (mkb / grootbedrijf) */
.seg-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:24px;max-width:900px;margin:var(--sp-md) auto 0}
.seg-card{background:var(--surface);border:.5px solid var(--border);
  border-radius:var(--r-card);padding:32px;box-shadow:var(--shadow-card)}
.seg-card h3{font-weight:700;font-size:var(--fs-h3);color:var(--heading);margin-bottom:var(--sp-xs)}
.seg-card>p{font-size:var(--fs-md);color:var(--text);line-height:var(--lh-base)}
.seg-card .btn{margin-top:var(--sp-sm)}

/* FAQ (native details/summary — werkt zonder JavaScript) */
.faq-list{max-width:760px;margin:var(--sp-md) auto 0;display:flex;flex-direction:column;gap:12px}
.faq-item{background:var(--surface);border:.5px solid var(--border);
  border-radius:var(--r-card);padding:18px 22px}
.faq-item summary{cursor:pointer;font-weight:700;color:var(--heading);
  font-size:var(--fs-lg);list-style:none;display:flex;justify-content:space-between;gap:12px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";color:var(--accent);font-weight:700;flex-shrink:0}
.faq-item[open] summary::after{content:"–"}
.faq-item p{margin-top:12px;color:var(--text);font-size:var(--fs-md);line-height:var(--lh-base)}


/* Calculator als popup (blogpagina's) — zelfde .modal-basis, iets breder */
.modal-calc{max-width:720px;width:100%;max-height:92vh;overflow-y:auto}


/* =============================================================
   RONDE 8 — nieuwe componenten
   -------------------------------------------------------------
   Alles hieronder gebruikt uitsluitend de tokens uit :root.
   ============================================================= */

/* --- Accentpunt in de footer (was een inline style) --- */
.dot-accent{color:var(--accent)}

/* ================= PROBLEEMSECTIE (homepage) =================
   Staat tussen de hero en 'De oplossing'. Twee kolommen:
   links de herkenning, rechts de losse signalen als kaartjes. */
.problem-wrap{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-xl);align-items:start}
@media(max-width:820px){.problem-wrap{grid-template-columns:1fr;gap:var(--sp-lg)}}
.problem-text p{font-size:var(--fs-md);color:var(--text);
  line-height:var(--lh-relaxed);margin-bottom:var(--sp-md)}
.problem-text p:last-child{margin-bottom:0}
.problem-signals{display:flex;flex-direction:column;gap:12px}
.signal{background:var(--surface);border:.5px solid var(--border);
  border-left:3px solid var(--c200);border-radius:var(--r-nav);
  padding:14px 18px;font-size:var(--fs-sm);color:var(--text);line-height:1.6}
.signal strong{color:var(--heading);display:block;margin-bottom:2px}
.solution-outcome{margin-top:var(--sp-md);padding-top:var(--sp-md);
  border-top:.5px solid var(--border);font-size:var(--fs-md);color:var(--text);
  line-height:var(--lh-relaxed)}
.problem-close{max-width:760px;margin:var(--sp-xl) auto 0;text-align:center;
  font-size:var(--fs-lg);font-weight:700;color:var(--heading);line-height:var(--lh-relaxed)}

/* ================= TAGS OP ARTIKELPAGINA'S =================
   Gevuld vanuit content.js (blog.js) — dus nooit handmatig in de
   blog-HTML zetten; tags staan op één plek per artikel. */
.article-tags{display:flex;flex-wrap:wrap;gap:8px;margin:-18px 0 34px}
.article-tags .tag-standalone{background:var(--c100)}

/* ================= FRAMEWORK-PAGINA ================= */
.fw-hero{padding:var(--sp-xl) 32px var(--sp-lg)}
.fw-hero-inner{max-width:900px;margin:auto;text-align:center}
.fw-lead{font-size:var(--fs-md);color:var(--text);line-height:var(--lh-relaxed);
  max-width:720px;margin:0 auto var(--sp-lg)}

/* De vijf lagen van het framework */
.fw-layers{display:flex;flex-direction:column;gap:14px;max-width:820px;margin:0 auto}
.fw-layer{background:var(--surface);border:.5px solid var(--border);
  border-left:4px solid var(--accent);border-radius:var(--r-card);
  padding:22px 26px;box-shadow:var(--shadow-card);display:grid;
  grid-template-columns:44px 1fr;gap:18px;align-items:start}
.fw-layer .fw-num{width:44px;height:44px;border-radius:10px;background:var(--c100);
  color:var(--heading);font-weight:700;display:flex;align-items:center;
  justify-content:center;font-size:var(--fs-lg)}
.fw-layer h3{font-size:var(--fs-h3);color:var(--heading);margin-bottom:6px}
.fw-layer p{font-size:var(--fs-sm);color:var(--text);line-height:1.7}

/* De vier stappen */
.fw-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px}
.fw-step{background:var(--surface);border:.5px solid var(--border);
  border-radius:var(--r-card);padding:26px;box-shadow:var(--shadow-card)}
.fw-step .fw-step-label{font-size:var(--fs-label);font-weight:700;
  color:var(--text-soft);text-transform:uppercase;letter-spacing:.12em;margin-bottom:10px}
.fw-step h3{font-size:var(--fs-lg);color:var(--heading);margin-bottom:8px}
.fw-step p{font-size:var(--fs-sm);color:var(--text);line-height:1.7}

/* ================= EVENTS / CAMPAGNEPAGINA ================= */
.ev-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-xl);align-items:start;
  max-width:1100px;margin:auto}
@media(max-width:900px){.ev-grid{grid-template-columns:1fr;gap:var(--sp-lg)}}
.ev-badge{display:inline-block;background:var(--accent);color:var(--c50);
  font-size:var(--fs-badge);font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:6px 14px;border-radius:var(--r-pill);margin-bottom:var(--sp-sm)}
.ev-panel{background:var(--surface);border:.5px solid var(--border);
  border-radius:var(--r-card);padding:32px;box-shadow:var(--shadow-panel)}
.ev-panel h2{font-size:var(--fs-h3);color:var(--heading);margin-bottom:8px}
.ev-panel .modal-sub{font-size:var(--fs-sm);color:var(--text);margin-bottom:var(--sp-md);
  line-height:var(--lh-base)}
/* Het formulier in de pagina gebruikt exact dezelfde velden als de modal */
.ev-panel .form-group label{font-size:var(--fs-sm)}
.ev-panel .form-group input,.ev-panel .form-group select,.ev-panel .form-group textarea{
  font-size:var(--fs-sm);padding:11px 14px}