/* NoviFlex content-page CSS = nf-designsysteem + nf-content prose. Gehost als asset, gelinkt vanaf elke kennis-pagina. */
.nf-tag--mute{ color:#46556B !important; }
.nf-hero-trust-label{ color:#46556B !important; }
.nf-endcta-note{ color:rgba(255,255,255,.6) !important; }


/* ============================================================
   NoviFlex — Design System v2.2  (Growth Automation page)
   ============================================================ */
:root {
  --nf-brand:       #1E7FE0;
  --nf-brand-light: #5BB3F0;
  --nf-brand-deep:  #0B3D91;
  --nf-grad:        linear-gradient(135deg, #1E7FE0 0%, #5BB3F0 100%);
  --nf-grad-text:   linear-gradient(135deg, #1E7FE0 20%, #7DCEFF 100%);
  --nf-ink:         #08111F;
  --nf-ink-2:       #2D3E55;
  --nf-ink-3:       #5A6E87;
  --nf-line:        #E4EBF5;
  --nf-bg:          #FFFFFF;
  --nf-bg-2:        #F6F9FD;
  --nf-dark:        #070E1A;
  --nf-accent:      #00D4A0;
  --nf-gold:        #F59E0B;
  --nf-r-sm:  8px;
  --nf-r-md:  14px;
  --nf-r-lg:  20px;
  --nf-r-xl:  28px;
  --nf-sh-sm: 0 2px 8px rgba(8,17,31,.05);
  --nf-sh-md: 0 8px 32px rgba(8,17,31,.07);
  --nf-sh-lg: 0 20px 60px rgba(8,17,31,.10);
  --nf-sh-brand: 0 8px 32px rgba(30,127,224,.22);
  --nf-ease:     cubic-bezier(.4,0,.2,1);
  --nf-ease-out: cubic-bezier(.16,1,.3,1);
  --nf-f-display: 'Sora', sans-serif;
  --nf-f-body:    'DM Sans', sans-serif;
  --nf-w:         1240px;
}
.nf-site, .nf-site * { box-sizing: border-box; margin: 0; padding: 0; }
.nf-site {
  font-family: var(--nf-f-body);
  color: var(--nf-ink);
  background: var(--nf-bg);
  -webkit-font-smoothing: antialiased;
  font-size: 16px;
  line-height: 1.6;
}
.nf-site h1,.nf-site h2,.nf-site h3,.nf-site h4 {
  font-family: var(--nf-f-display);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.15;
}
.nf-site a { text-decoration: none; color: inherit; }
/* Chrome-links (nav/footer/TOC/buttons) never underline. The page body is not wrapped in .nf-site,
   so the .nf-site a reset above does not reach them and the browser-default underline would show.
   Wrapper-independent, so every future spoke/pillar inherits it. In-content underline stays the
   border-bottom scoped to .nf-article a (below). */
.nf-nav a, .nf-footer a, .nf-toc a, .nf-mobile a, .nf-btn { text-decoration: none; }
/* Huisstijl-fonts (v6): content-pagina's zitten NIET in .nf-site, dus de base-regels
   .nf-site{font-family:DM Sans} + .nf-site h1..h4{font-family:Sora} landen niet en elk
   tekst-element zonder eigen font-family viel terug op de globale Inter/Arial-fallback.
   Repliceer de basis op de content-containers (dit asset laadt ALLEEN op content-pagina's;
   marketing gebruikt het niet). DM Sans als body-basis, Sora op de display-koppen. */
.nf-nav, .nf-mobile, .nf-wrap, .nf-sec, .nf-footer { font-family: var(--nf-f-body); }
.nf-title, .nf-endcta-title, .nf-footer-col h4 { font-family: var(--nf-f-display); }
/* Footer lists (Pakketten/Bedrijf) never show bullets or default indent. Wrapper-independent:
   the page body is not in .nf-site, so the .nf-site ul{list-style:none} + .nf-site *{padding:0}
   resets do not reach the footer <ul>. This restores the intended left-aligned, bullet-free look
   on every wrapper-less spoke/pillar. Article/list styling stays scoped to .nf-article. */
.nf-footer ul { list-style: none; margin: 0; padding: 0; }
.nf-site button { font-family: inherit; cursor: pointer; border: none; background: none; }
.nf-site img { display: block; max-width: 100%; }
.nf-site ul { list-style: none; }
/* ---- Layout ---- */
.nf-wrap { max-width: var(--nf-w); margin: 0 auto; padding: 0 24px; }
@media(min-width:768px){ .nf-wrap { padding: 0 48px; } }
@media(min-width:1280px){ .nf-wrap { padding: 0 64px; } }
.nf-sec { padding: 96px 0; }
@media(max-width:767px){ .nf-sec { padding: 64px 0; } }
.nf-sec--dark { background: var(--nf-dark); position: relative; overflow: hidden; }
.nf-sec--dark::before {
  content:''; position:absolute; inset:0;
  background: radial-gradient(ellipse 80% 60% at 70% 40%, rgba(30,127,224,.14) 0%, transparent 60%);
  pointer-events:none;
}
.nf-sec--white { background: var(--nf-bg); border-top: 1px solid var(--nf-line); }
.nf-sec--gray { background: var(--nf-bg-2); border-top: 1px solid var(--nf-line); border-bottom: 1px solid var(--nf-line); }
/* ---- Typography ---- */
.nf-eyebrow {
  display: inline-block;
  font-family: var(--nf-f-body);
  font-size: 11px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--nf-brand); margin-bottom: 14px;
}
.nf-sec--dark .nf-eyebrow { color: var(--nf-brand-light); }
.nf-title { font-size: clamp(32px,4.5vw,52px); font-weight: 800; line-height: 1.1; color: var(--nf-ink); }
.nf-sec--dark .nf-title { color: #fff; }
.nf-lead { font-size: clamp(17px,1.5vw,20px); color: var(--nf-ink-2); line-height: 1.6; font-weight: 400; }
.nf-sec--dark .nf-lead { color: rgba(255,255,255,.68); }
.nf-grad-text {
  background: var(--nf-grad-text);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* ---- Buttons ---- */
.nf-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 26px; font-family: var(--nf-f-body);
  font-size: 15px; font-weight: 600;
  border-radius: var(--nf-r-md);
  transition: all 220ms var(--nf-ease);
  white-space: nowrap; line-height: 1; cursor: pointer;
}
.nf-btn--primary { background: var(--nf-grad); color: #fff; box-shadow: var(--nf-sh-brand); }
.nf-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 12px 40px rgba(30,127,224,.35); }
.nf-btn--outline { background: transparent; color: var(--nf-ink); border: 1.5px solid var(--nf-line); }
.nf-btn--outline:hover { border-color: var(--nf-ink); background: var(--nf-ink); color: #fff; }
.nf-sec--dark .nf-btn--outline { color: #fff; border-color: rgba(255,255,255,.25); }
.nf-sec--dark .nf-btn--outline:hover { background: #fff; color: var(--nf-ink); border-color: #fff; }
.nf-arrow { transition: transform 220ms var(--nf-ease); }
.nf-btn:hover .nf-arrow { transform: translateX(4px); }
/* ---- Navbar ---- */
.nf-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  background: rgba(255,255,255,.8);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid transparent;
  transition: border-color 250ms var(--nf-ease), background 250ms var(--nf-ease);
}
.nf-nav.scrolled { background: rgba(255,255,255,.95); border-bottom-color: var(--nf-line); }
.nf-nav-inner { max-width: var(--nf-w); margin: 0 auto; padding: 0 24px; height: 68px; display: flex; align-items: center; gap: 40px; }
@media(min-width:768px){ .nf-nav-inner { padding: 0 48px; } }
@media(min-width:1280px){ .nf-nav-inner { padding: 0 64px; } }
.nf-nav-logo img { height: 34px; width: auto; }
.nf-nav-logo { flex-shrink: 0; }
.nf-nav-links { display: none; align-items: center; gap: 4px; flex: 1; }
@media(min-width:1024px){ .nf-nav-links { display: flex; } }
.nf-nav-link { padding: 8px 14px; font-size: 14.5px; font-weight: 500; color: var(--nf-ink-2); border-radius: var(--nf-r-sm); transition: all 180ms var(--nf-ease); }
.nf-nav-link:hover { color: var(--nf-ink); background: var(--nf-bg-2); }
.nf-nav-link--active { color: var(--nf-brand); font-weight: 600; }
.nf-nav-drop { position: relative; }
.nf-nav-drop-btn { display: inline-flex; align-items: center; gap: 4px; padding: 8px 14px; font-size: 14.5px; font-weight: 500; color: var(--nf-ink-2); border-radius: var(--nf-r-sm); transition: all 180ms var(--nf-ease); cursor: pointer; }
.nf-nav-drop:hover .nf-nav-drop-btn { color: var(--nf-ink); background: var(--nf-bg-2); }
.nf-nav-drop-chevron { transition: transform 220ms var(--nf-ease); }
.nf-nav-drop:hover .nf-nav-drop-chevron { transform: rotate(180deg); }
.nf-nav-drop-panel { position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(-6px); min-width: 300px; padding: 18px 10px 10px; opacity: 0; pointer-events: none; transition: all 220ms var(--nf-ease-out); }
.nf-nav-drop-panel-inner { background: #fff; border: 1px solid var(--nf-line); border-radius: var(--nf-r-lg); box-shadow: var(--nf-sh-lg); padding: 10px; }
.nf-nav-drop:hover .nf-nav-drop-panel { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.nf-nav-drop-item { display: block; padding: 10px 14px; border-radius: 10px; transition: background 180ms var(--nf-ease); }
.nf-nav-drop-item:hover { background: var(--nf-bg-2); }
.nf-nav-drop-item strong { display: block; font-size: 14px; font-weight: 600; color: var(--nf-ink); margin-bottom: 2px; }
.nf-nav-drop-item span { font-size: 12.5px; color: var(--nf-ink-3); }
.nf-nav-cta { display: none; margin-left: auto; }
@media(min-width:1024px){ .nf-nav-cta { display: inline-flex; } }
.nf-burger { display: flex; flex-direction: column; gap: 5px; padding: 10px; margin-left: auto; cursor: pointer; }
@media(min-width:1024px){ .nf-burger { display: none; } }
.nf-burger span { display: block; width: 22px; height: 2px; background: var(--nf-ink); border-radius: 2px; transition: all 220ms var(--nf-ease); }
.nf-nav.open .nf-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nf-nav.open .nf-burger span:nth-child(2) { opacity: 0; }
.nf-nav.open .nf-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.nf-mobile { display: none; position: fixed; top: 68px; inset: 0 0 auto; background: #fff; padding: 24px; z-index: 199; border-bottom: 1px solid var(--nf-line); box-shadow: var(--nf-sh-lg); }
.nf-nav.open + .nf-mobile { display: block; }
.nf-mobile a { display: block; padding: 14px 0; font-size: 17px; font-weight: 500; border-bottom: 1px solid var(--nf-line); color: var(--nf-ink); }
.nf-mobile a:last-of-type { border: none; }
.nf-mobile .nf-btn { width: 100%; justify-content: center; margin-top: 16px; }
/* ---- Hero subpage ---- */
.nf-subhero {
  padding: 140px 0 80px;
  background: var(--nf-bg);
  position: relative;
  overflow: hidden;
}
.nf-subhero::before {
  content:''; position:absolute; top:-200px; right:-150px;
  width:800px; height:800px;
  background: radial-gradient(circle, rgba(91,179,240,.15) 0%, transparent 60%);
  pointer-events:none;
}
.nf-subhero-inner { max-width: 780px; position: relative; z-index: 1; }
.nf-subhero-title { font-size: clamp(38px,5vw,64px); font-weight: 800; letter-spacing: -.03em; margin-bottom: 22px; }
.nf-subhero-sub { font-size: clamp(17px,1.4vw,20px); color: var(--nf-ink-2); line-height: 1.65; max-width: 640px; margin-bottom: 38px; }
.nf-subhero-btns { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 44px; }
.nf-subhero-tags { display: flex; gap: 10px; flex-wrap: wrap; }
/* ---- Feature grid ---- */
.nf-feat-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media(min-width:640px){ .nf-feat-grid { grid-template-columns: repeat(2,1fr); } }
@media(min-width:1024px){ .nf-feat-grid { grid-template-columns: repeat(4,1fr); } }
.nf-feat {
  background: var(--nf-bg); border: 1px solid var(--nf-line);
  border-radius: var(--nf-r-lg); padding: 28px 24px;
  transition: all 220ms var(--nf-ease);
}
.nf-feat:hover { transform: translateY(-4px); box-shadow: var(--nf-sh-lg); border-color: var(--nf-brand); }
.nf-feat-icon { width: 42px; height: 42px; border-radius: var(--nf-r-sm); background: rgba(30,127,224,.08); display: flex; align-items: center; justify-content: center; color: var(--nf-brand); margin-bottom: 16px; }
.nf-feat-icon svg { width: 20px; height: 20px; }
.nf-feat-title { font-size: 16px; font-weight: 700; margin-bottom: 8px; }
.nf-feat-desc { font-size: 14px; color: var(--nf-ink-2); line-height: 1.6; }
/* ---- Service cards (3-col) ---- */
.nf-svc-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media(min-width:768px){ .nf-svc-grid { grid-template-columns: repeat(2,1fr); } }
@media(min-width:1024px){ .nf-svc-grid { grid-template-columns: repeat(3,1fr); } }
.nf-svc {
  background: var(--nf-bg); border: 1px solid var(--nf-line);
  border-radius: var(--nf-r-lg); padding: 32px;
  transition: all 220ms var(--nf-ease);
}
.nf-svc:hover { transform: translateY(-4px); box-shadow: var(--nf-sh-lg); border-color: var(--nf-brand); }
.nf-svc-label { font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--nf-brand); margin-bottom: 10px; }
.nf-svc-title { font-size: 19px; font-weight: 700; margin-bottom: 14px; }
.nf-svc-list { display: flex; flex-direction: column; gap: 8px; }
.nf-svc-item { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--nf-ink-2); line-height: 1.5; }
.nf-svc-dot { flex-shrink: 0; width: 6px; height: 6px; border-radius: 50%; background: var(--nf-brand); margin-top: 6px; }
/* ---- Process steps ---- */
.nf-steps { display: flex; flex-direction: column; gap: 16px; }
.nf-step-row {
  display: grid; grid-template-columns: 64px 1fr; gap: 24px;
  align-items: start;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07);
  border-radius: var(--nf-r-lg); padding: 28px;
  transition: all 220ms var(--nf-ease);
}
.nf-step-row:hover { background: rgba(255,255,255,.07); border-color: rgba(91,179,240,.2); }
.nf-step-num {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--nf-grad); display: flex; align-items: center; justify-content: center;
  font-family: var(--nf-f-display); font-size: 20px; font-weight: 800; color: #fff;
  flex-shrink: 0; box-shadow: 0 0 0 8px rgba(30,127,224,.12);
}
.nf-step-title { font-size: 18px; font-weight: 700; color: #fff; margin-bottom: 8px; }
.nf-step-desc { font-size: 14.5px; color: rgba(255,255,255,.62); line-height: 1.65; }
/* ---- Compare table ---- */
.nf-table-wrap { overflow-x: auto; border-radius: var(--nf-r-lg); border: 1px solid var(--nf-line); }
.nf-table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.nf-table th { background: var(--nf-bg-2); padding: 14px 18px; text-align: left; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--nf-ink-3); border-bottom: 1px solid var(--nf-line); }
.nf-table td { padding: 16px 18px; border-bottom: 1px solid var(--nf-line); color: var(--nf-ink-2); vertical-align: top; }
.nf-table tr:last-child td { border-bottom: none; }
.nf-table tr.nf-table--hl td { background: rgba(30,127,224,.04); }
.nf-table tr.nf-table--hl td:first-child { font-weight: 700; color: var(--nf-ink); border-left: 3px solid var(--nf-brand); }
.nf-table a { color: var(--nf-brand); font-weight: 600; }
/* ---- FAQ ---- */
.nf-faq-item { border-bottom: 1px solid var(--nf-line); }
.nf-faq-item:first-child { border-top: 1px solid var(--nf-line); }
.nf-faq-q { width: 100%; padding: 22px 0; display: flex; justify-content: space-between; align-items: center; gap: 16px; text-align: left; font-family: var(--nf-f-display); font-size: 17px; font-weight: 600; color: var(--nf-ink); background: transparent; border: none; cursor: pointer; transition: color 180ms var(--nf-ease); }
.nf-faq-q:hover { color: var(--nf-brand); }
.nf-faq-toggle { flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; background: var(--nf-bg-2); display: flex; align-items: center; justify-content: center; transition: all 220ms var(--nf-ease); }
.nf-faq-toggle svg { width: 14px; height: 14px; transition: transform 220ms var(--nf-ease); }
.nf-faq-item.is-open .nf-faq-toggle { background: var(--nf-grad); color: #fff; }
.nf-faq-item.is-open .nf-faq-toggle svg { transform: rotate(180deg); }
.nf-faq-a { max-height: 0; overflow: hidden; transition: max-height 350ms var(--nf-ease); }
.nf-faq-a-inner { padding: 0 0 22px; font-size: 15px; color: var(--nf-ink-2); line-height: 1.7; max-width: 680px; }
.nf-faq-item.is-open .nf-faq-a { max-height: 400px; }
/* ---- Tags / pills ---- */
.nf-tag { display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px; font-size: 12px; font-weight: 600; border-radius: 999px; background: rgba(30,127,224,.1); color: var(--nf-brand-deep); }
.nf-tag--green { background: rgba(0,212,160,.12); color: #047857; }
.nf-tag--mute { background: var(--nf-bg-2); color: var(--nf-ink-3); border: 1px solid var(--nf-line); }
/* ---- Section header shorthand ---- */
.nf-sh { max-width: 680px; margin: 0 auto 56px; text-align: center; }
.nf-sh .nf-title { margin-bottom: 16px; }
/* ---- CTA section ---- */
.nf-endcta-inner { text-align: center; max-width: 640px; margin: 0 auto; position: relative; z-index: 1; }
.nf-endcta-title { font-size: clamp(32px,4.5vw,52px); font-weight: 800; line-height: 1.1; color: #fff; letter-spacing: -.03em; margin-bottom: 18px; }
.nf-endcta-sub { font-size: 18px; color: rgba(255,255,255,.68); line-height: 1.6; margin-bottom: 36px; }
.nf-endcta-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-bottom: 16px; }
.nf-endcta-note { font-size: 13px; color: rgba(255,255,255,.4); }
/* ---- Footer ---- */
.nf-footer { background: var(--nf-bg-2); border-top: 1px solid var(--nf-line); padding: 80px 0 32px; }
.nf-footer-grid { display: grid; grid-template-columns: 1fr; gap: 48px; margin-bottom: 48px; }
@media(min-width:768px){ .nf-footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.nf-footer-brand p { font-size: 14px; color: var(--nf-ink-2); line-height: 1.65; margin: 14px 0 22px; max-width: 300px; }
.nf-footer-logo img { height: 32px; }
.nf-footer-col h4 { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--nf-ink); margin-bottom: 16px; }
.nf-footer-col li { padding: 5px 0; }
.nf-footer-col a { font-size: 14px; color: var(--nf-ink-2); transition: color 180ms var(--nf-ease); }
.nf-footer-col a:hover { color: var(--nf-brand); }
.nf-footer-meta { font-size: 13px; color: var(--nf-ink-2); line-height: 1.9; }
.nf-footer-meta a { color: var(--nf-ink-2); transition: color 180ms; }
.nf-footer-meta a:hover { color: var(--nf-brand); }
.nf-footer-bottom { padding-top: 28px; border-top: 1px solid var(--nf-line); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; font-size: 13px; color: var(--nf-ink-3); }
.nf-footer-bottom a { color: var(--nf-ink-3); transition: color 180ms; }
.nf-footer-bottom a:hover { color: var(--nf-ink); }
.nf-footer-links { display: flex; gap: 20px; }
/* ---- Reveal ---- */
.nf-js .nf-r { opacity: 0; transform: translateY(22px); transition: opacity 550ms var(--nf-ease-out), transform 550ms var(--nf-ease-out); }
.nf-js .nf-r.show { opacity: 1; transform: none; }
.nf-js .nf-r[data-d="1"] { transition-delay: 80ms; }
.nf-js .nf-r[data-d="2"] { transition-delay: 150ms; }
.nf-js .nf-r[data-d="3"] { transition-delay: 220ms; }
.nf-js .nf-r[data-d="4"] { transition-delay: 290ms; }
@media(prefers-reduced-motion:reduce){ .nf-js .nf-r { opacity:1; transform:none; transition:none; } }

/* ============================================================
   EVOLUTION GRID — SEO -> AEO -> GEO
   ============================================================ */
.nf-evo-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  align-items: stretch;
}
@media(min-width:900px){
  .nf-evo-grid {
    grid-template-columns: 1fr auto 1fr auto 1fr;
    gap: 14px;
  }
}
.nf-evo-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--nf-line);
  border-radius: var(--nf-r-lg);
  padding: 32px 28px 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: all 240ms var(--nf-ease);
  overflow: hidden;
}
.nf-evo-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--nf-grad);
}
.nf-evo-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--nf-sh-lg);
  border-color: var(--nf-brand);
}
.nf-evo-step {
  font-family: var(--nf-f-display);
  font-size: 13px;
  font-weight: 700;
  color: var(--nf-ink-3);
  letter-spacing: .12em;
}
.nf-evo-label {
  font-family: var(--nf-f-display);
  font-size: 28px;
  font-weight: 800;
  background: var(--nf-grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -.02em;
  line-height: 1;
}
.nf-evo-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--nf-ink);
}
.nf-evo-icon {
  width: 44px; height: 44px;
  border-radius: var(--nf-r-md);
  background: rgba(30,127,224,.08);
  display: flex; align-items: center; justify-content: center;
  color: var(--nf-brand);
}
.nf-evo-icon svg { width: 22px; height: 22px; }
.nf-evo-desc {
  font-size: 14.5px;
  color: var(--nf-ink-2);
  line-height: 1.6;
  flex: 1;
}
.nf-evo-example {
  margin-top: 8px;
  padding: 12px 14px;
  background: var(--nf-bg-2);
  border-radius: var(--nf-r-sm);
  font-size: 13px;
  font-style: italic;
  color: var(--nf-ink-2);
  border-left: 3px solid var(--nf-brand-light);
}
.nf-evo-example-label {
  display: block;
  font-style: normal;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--nf-ink-3);
  margin-bottom: 3px;
}
.nf-evo-arrow {
  display: none;
  align-items: center;
  justify-content: center;
  color: var(--nf-brand-light);
  opacity: .5;
}
@media(min-width:900px){
  .nf-evo-arrow {
    display: flex;
  }
  .nf-evo-arrow svg {
    width: 36px;
    height: 22px;
  }
}

/* ============================================================
   MINI CASE TEASER
   ============================================================ */
.nf-mini-case {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 22px 28px;
  background: #fff;
  border: 1px solid var(--nf-line);
  border-radius: var(--nf-r-lg);
  text-decoration: none;
  transition: all 220ms var(--nf-ease);
  cursor: pointer;
}
.nf-mini-case:hover {
  border-color: var(--nf-brand);
  box-shadow: var(--nf-sh-md);
  transform: translateY(-2px);
}
.nf-mini-case-icon {
  flex-shrink: 0;
  width: 52px; height: 52px;
  border-radius: var(--nf-r-md);
  background: var(--nf-grad);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.nf-mini-case-icon svg { width: 24px; height: 24px; }
.nf-mini-case-content { flex: 1; min-width: 0; }
.nf-mini-case-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--nf-brand);
  margin-bottom: 4px;
}
.nf-mini-case-title {
  font-family: var(--nf-f-display);
  font-size: 17px;
  font-weight: 700;
  color: var(--nf-ink);
  margin-bottom: 4px;
  line-height: 1.3;
}
.nf-mini-case-desc {
  font-size: 13.5px;
  color: var(--nf-ink-2);
  line-height: 1.5;
}
.nf-mini-case-arrow {
  flex-shrink: 0;
  color: var(--nf-brand);
  transition: transform 220ms var(--nf-ease);
}
.nf-mini-case:hover .nf-mini-case-arrow {
  transform: translateX(6px);
}
@media(max-width:640px){
  .nf-mini-case { flex-direction: column; text-align: center; gap: 14px; padding: 22px; }
  .nf-mini-case-arrow { display: none; }
}


#nf-consent{position:fixed;left:16px;right:16px;bottom:16px;z-index:9999;max-width:520px;margin:0 auto;background:#fff;border:1px solid #E4EBF5;border-radius:14px;box-shadow:0 20px 60px rgba(8,17,31,.15);padding:18px 20px;font-family:'DM Sans',sans-serif;color:#2D3E55;font-size:14px;line-height:1.55;display:none}
#nf-consent.show{display:block}
#nf-consent h4{font-family:'Sora',sans-serif;font-size:15px;font-weight:700;color:#08111F;margin:0 0 6px}
#nf-consent p{margin:0 0 14px}
#nf-consent a{color:#1E7FE0;text-decoration:underline}
#nf-consent .nf-consent-btns{display:flex;gap:10px;flex-wrap:wrap}
#nf-consent button{font-family:'DM Sans',sans-serif;font-size:14px;font-weight:600;border-radius:10px;padding:10px 18px;cursor:pointer;border:none}
#nf-consent .nf-c-accept{background:linear-gradient(135deg,#1E7FE0,#5BB3F0);color:#fff}
#nf-consent .nf-c-reject{background:#F6F9FD;color:#2D3E55;border:1px solid #E4EBF5}

/* ---- nf-content prose ---- */
/* nf-content prose — site-brede styling voor kennis-pagina's (blog/pillar/spoke).
   Bouwt op de bestaande nf-tokens (visual_profile). Alleen huisstijlkleuren/fonts.
   Scoped onder .nf-article zodat het de marketing-/dienstpagina's niet raakt.
   Alleen toegestane Webflow-breakpoints. Geen .nf-r (opacity:0). */

.nf-article{max-width:820px;margin:0 auto;padding:0 24px}
.nf-article>*{opacity:1}

/* Alinea-ritme */
.nf-article p{font-family:var(--nf-f-body);font-size:18px;line-height:1.75;color:var(--nf-ink-2);margin:0 0 1.15em}
.nf-article p:last-child{margin-bottom:0}

/* Koppen-hiërarchie */
.nf-article h2{font-family:var(--nf-f-display);font-weight:800;font-size:clamp(26px,3.4vw,36px);line-height:1.2;letter-spacing:-.02em;text-align:left;color:var(--nf-ink);margin:2.2em 0 .6em;scroll-margin-top:90px}
.nf-article h2:first-of-type{margin-top:.4em}
/* v7 (2026-09-10, BACKLOG A23): een RITME 3-pagina zit NIET in .nf-site en heeft geen
   .nf-article, dus deze regel bereikte er geen enkele <h3>. Gemeten op de live
   /lokale-seo: 16 koppen, 0 regels, browser-default. Zelfde oorzaak als de v5-fix van
   2026-07-12. Alleen de selector is uitgebreid; geen declaratie is aangeraakt, dus
   RITME 2 verandert niet. .nf-wrap staat wel in nav en footer, maar die hebben geen h3. */
.nf-article h3,.nf-wrap h3{font-family:var(--nf-f-display);font-weight:700;font-size:clamp(19px,2.2vw,23px);line-height:1.3;color:var(--nf-ink);margin:1.7em 0 .5em}

/* Lijsten */
.nf-article ul,.nf-article ol{margin:0 0 1.3em;padding-left:1.4em;color:var(--nf-ink-2);font-size:18px;line-height:1.7}
.nf-article li{margin:0 0 .5em}
.nf-article li::marker{color:var(--nf-brand)}

/* In-content links = merkblauw, semibold */
.nf-article a{color:var(--nf-brand);font-weight:600;text-decoration:none;border-bottom:1px solid rgba(30,127,224,.28)}
.nf-article a:hover{border-bottom-color:var(--nf-brand)}

/* TL;DR-capsule */
.nf-tldr{background:var(--nf-bg-2);border-left:4px solid var(--nf-brand);border-radius:var(--nf-r-md);padding:20px 24px;margin:1.4em 0 1.6em}
.nf-tldr p{margin:0;font-size:18px;color:var(--nf-ink)}
.nf-tldr .nf-tldr-label{display:block;font-family:var(--nf-f-body);font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--nf-brand);margin-bottom:8px}

/* Inhoudsopgave */
.nf-toc{background:var(--nf-bg-2);border:1px solid var(--nf-line);border-radius:var(--nf-r-lg);padding:22px 26px;margin:0 0 2em}
.nf-toc-title{font-family:var(--nf-f-body);font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--nf-ink-3);margin:0 0 10px}
.nf-toc ul{margin:0;padding:0;list-style:none;font-size:16px}
.nf-toc li{margin:0 0 6px}
.nf-toc a{border:none}

/* Beeld-zone */
.nf-article figure{margin:1.8em 0}
.nf-article img,.nf-figure img{display:block;width:100%;height:auto;border-radius:var(--nf-r-lg);border:1px solid var(--nf-line)}
.nf-article figcaption,.nf-figure figcaption{font-size:14px;color:var(--nf-ink-3);margin-top:12px;text-align:center}
/* Hero-figure (direct kind van .nf-wrap, buiten .nf-article): geef het hero-blok een
   deliberate verticaal ritme. De .nf-article-rhythmregels bereiken dit blok niet, dus
   zonder deze regel valt de hero terug op UA-defaults (40px inset + krappe marges).
   Scoped op .nf-wrap>.nf-figure zodat in-content diagrammen (.nf-article figure) ongemoeid blijven. */
.nf-wrap>.nf-figure{margin:0 0 2em}

/* Tabel */
.nf-table-wrap{overflow-x:auto;margin:0 0 1.8em;border:1px solid var(--nf-line);border-radius:var(--nf-r-lg)}
.nf-article table{border-collapse:collapse;width:100%;font-size:16px;min-width:520px}
.nf-article th,.nf-article td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--nf-line);vertical-align:top;color:var(--nf-ink-2)}
.nf-article thead th{background:var(--nf-bg-2);font-family:var(--nf-f-display);font-weight:700;color:var(--nf-ink);font-size:15px}
.nf-article tbody td:first-child{font-weight:600;color:var(--nf-ink)}
.nf-article tbody tr:last-child td{border-bottom:none}

/* Data/stat-strip (hergebruik nf-stat-card waar mogelijk; deze is de fallback in-flow) */
.nf-datastrip{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:0 0 1.8em}
.nf-datacard{background:var(--nf-bg-2);border:1px solid var(--nf-line);border-radius:var(--nf-r-lg);padding:20px}
.nf-datacard .v{font-family:var(--nf-f-display);font-weight:800;font-size:30px;color:var(--nf-brand);line-height:1}
.nf-datacard .l{font-size:14px;color:var(--nf-ink-3);margin-top:6px}

/* Auteur/meta-regel */
.nf-article-meta{font-size:14px;color:var(--nf-ink-3);margin:0 0 1.8em;padding-bottom:1.2em;border-bottom:1px solid var(--nf-line)}

@media screen and (max-width:767px){
  .nf-article p,.nf-article ul,.nf-article ol{font-size:17px}
  .nf-datastrip{grid-template-columns:1fr}
}

/* ============================================================
   v8 — RITME 3-SJABLOON (BACKLOG A23, ronde 31, 2026-09-11)
   ============================================================
   Opvolger van v7. De v7-selectorfix `.nf-article h3,.nf-wrap h3` blijft hierboven staan en
   is NIET aangeraakt. Deze laag komt er ACHTER, dus bij gelijke specificiteit wint hij —
   geen enkel `!important` nodig behalve waar v7 er zelf al een had.

   GRENZEN DIE ZIJN AANGEHOUDEN
   - Alleen BESTAANDE klassen. De HTML-uitvoer van write_page is niet gewijzigd.
   - Alleen lay-out, ritme en witruimte. Kleuren, fonts en radii komen uit de
     :root-variabelen van v7; er is geen nieuwe kleur bijgekomen.
   - Vormreferentie alleen voor ritme en kolomverdeling; niets overgenomen qua kleur,
     tekst of iconografie.

   WAT DEZE LAAG NIET KAN OPLOSSEN (bevindingen, zie SESSION_STATUS ronde 31)
   - De tweekoloms-hero met eyebrow-label, tweede knop en cluster-illustratie: die drie
     elementen bestaan niet in de HTML en de illustratiepaden staan niet in tenant.json.
   - Het icoon in een `nf-feat`-kaart: `.nf-feat-icon` bestaat in de CSS maar write_page
     geeft het element niet uit. De kaart houdt daarom zijn eigen ritme zonder icoonvak.
   - Het tldr-label heet in de HTML "Direct antwoord", niet "Kort antwoord". Dat is tekst,
     geen CSS.
   ============================================================ */

/* --- 1. VERTICAAL RITME: witruimte gehalveerd -------------------------------
   v7 zette `.nf-sec{padding:96px 0}` en op mobiel 64px. Op een dienstenpagina met zeven
   secties is dat 1.344px lucht voor 1.395 woorden tekst: de bezoeker scrollt langs leegte
   in plaats van langs argumenten. Gehalveerd, niet verder — onder 40px gaan de secties
   optisch aan elkaar plakken omdat `--nf-bg-2` maar net van wit verschilt. */
.nf-sec { padding: 48px 0; }
@media (max-width: 767px) { .nf-sec { padding: 32px 0; } }

/* --- 2. SECTIEKOPPEN GECENTREERD (v9, 2026-09-11) --------------------------
   v8 zette ze links uitgelijnd; founder-besluit van 2026-09-11 draait dat terug, want de
   rest van noviflex.nl centreert sectiekoppen en een dienstenpagina hoorde daar niet van
   af te wijken. Alleen de UITLIJNING gaat terug naar v7: de marge blijft 28px en niet de
   56px van v7, want het gehalveerde verticale ritme uit v8 is apart goedgekeurd en staat
   los van deze keuze. Kaarten, tabellen en hero zijn niet aangeraakt. */
.nf-sh { max-width: 760px; margin: 0 auto 28px; text-align: center; }
.nf-sh .nf-title { margin-bottom: 10px; }

/* --- 3. HERO: compacter, tweekoloms ZODRA er een tweede kolom is ------------
   De hero is nu één kolom omdat er maar één kind in `.nf-subhero-inner` zit. De
   grid-declaratie staat er niet speculatief in: wat hier staat is alleen het ritme van de
   bestaande drie elementen (H1, lead, knoppenrij), strakker gezet. */
.nf-subhero { padding: 72px 0 56px; }
@media (max-width: 767px) { .nf-subhero { padding: 48px 0 36px; } }
.nf-subhero-inner { max-width: 820px; }
.nf-subhero-title { margin-bottom: 16px; }
.nf-subhero-sub { margin-bottom: 26px; max-width: 680px; }
.nf-subhero-btns { margin-bottom: 0; gap: 12px; }

/* --- 4. TLDR: accentbalk links, label kleiner ------------------------------
   v7 had de balk en het label al. Alleen het ritme is aangepast zodat de callout bij de
   gehalveerde sectiepadding niet als losse kaart tussen twee secties hangt. */
.nf-tldr { margin: 0 0 24px; padding: 18px 22px; }
.nf-tldr .nf-tldr-label { margin-bottom: 6px; letter-spacing: .16em; }
.nf-tldr p { font-size: 17px; line-height: 1.6; }

/* --- 5. FEAT-KAARTEN: 3 op desktop, 1 op mobiel ----------------------------
   v7 ging 1 -> 2 -> 4. Vier kaarten op een rij maakt elke kaart 280px bij een wrap van
   1240px, en de titels van een dienstenpagina ("Aanvragen uit je eigen regio") breken dan
   over drie regels. Drie kolommen geeft ~390px per kaart. */
@media (min-width: 640px)  { .nf-feat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .nf-feat-grid { grid-template-columns: repeat(3, 1fr); } }
.nf-feat-grid { gap: 16px; }
.nf-feat { padding: 22px; }
.nf-feat-title { font-size: 17px; line-height: 1.3; margin-bottom: 6px; }
.nf-feat-desc { font-size: 15px; line-height: 1.6; }

/* --- 6. DATASTRIP: cijfer groot, label klein eronder -----------------------
   Het cijfer is de citeerbare eenheid; het label is de context. v7 zette 30px tegen 14px,
   te weinig verschil om als cijferstrook te lezen. Let op: de tweede regel is in de HTML
   een LABEL (`.l`), niet een bronvermelding — een bron per cijfer bestaat niet in de
   datastrip-syntax (`waarde | label`). */
.nf-datastrip { gap: 14px; margin: 0 0 24px; }
.nf-datacard { padding: 22px 20px; }
.nf-datacard .v { font-size: 38px; letter-spacing: -.02em; }
.nf-datacard .l { font-size: 13px; line-height: 1.45; margin-top: 8px; }

/* --- 7. FAQ: de wrapper krijgt eindelijk een regel -------------------------
   `.nf-faq-layout` was de ENIGE klasse op een RITME 3-pagina zonder CSS-regel (gemeten
   2026-09-10 en opnieuw 2026-09-11: 1 van 54). Het was een lege grid-wrapper: de
   `.nf-faq-item`-randen liepen daardoor over de volle wrapbreedte van 1240px, waardoor een
   vraag van vijf woorden een streep van 1240px kreeg. */
.nf-faq-layout { max-width: 820px; }
.nf-faq-q { padding: 18px 0; font-size: 17px; }
.nf-faq-a-inner { padding-bottom: 18px; font-size: 16px; line-height: 1.65; }

/* --- 8. TABEL EN LOPENDE TEKST: mee met het ritme -------------------------- */
.nf-table-wrap { margin: 0 0 20px; }
.nf-lead + .nf-table-wrap, .nf-lead + .nf-feat-grid { margin-top: 20px; }

/* --- 9. LINKS BUITEN .nf-article: DEZELFDE OORZAAK ALS A23 -----------------
   `.nf-article a` stylet elke link in een uitlegstuk, maar een RITME 3-pagina zit NIET in
   een `.nf-article`. Gevolg, zichtbaar in de render van 2026-09-11: de "Verder lezen"-lijst
   kreeg UA-default blauw met onderstreping, midden in een pagina waar geen enkele andere
   link er zo uitziet. Exact het patroon van A23, alleen dan voor `a` in plaats van `h3`:
   de regel bestond, hij reikte alleen niet tot dit ritme. Nav, footer en knoppen dragen
   hun eigen kleur en worden hier uitgezonderd. */
.nf-wrap .nf-lead a:not(.nf-btn) {
  color: var(--nf-brand); font-weight: 600; text-decoration: none;
  border-bottom: 1px solid rgba(30,127,224,.28);
}
.nf-wrap .nf-lead a:not(.nf-btn):hover { border-bottom-color: var(--nf-brand); }

/* --- 10. TWEEKOLOMS-HERO (A26) ---------------------------------------------
   In ronde 31 kon dit niet: de subhero had geen eyebrow, geen tweede knop en geen element
   voor een illustratie. Sinds A26 geeft write_page ze wel uit. De grid schakelt op
   `:has(.nf-subhero-figure)`, zodat een pagina ZONDER illustratie een enkele kolom houdt in
   plaats van een lege rechterhelft. */
.nf-subhero-inner { max-width: none; }
.nf-subhero-tekst { max-width: 640px; }
@media (min-width: 900px) {
  .nf-subhero-inner:has(.nf-subhero-figure) {
    display: grid; grid-template-columns: 1.05fr .95fr;
    gap: 48px; align-items: center;
  }
}
.nf-subhero-figure { margin-top: 28px; }
@media (min-width: 900px) { .nf-subhero-figure { margin-top: 0; } }
.nf-subhero-figure svg { width: 100%; height: auto; display: block; border-radius: var(--nf-r-lg); }
.nf-eyebrow {
  font-family: var(--nf-f-body); font-size: 12px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--nf-brand);
  margin-bottom: 12px;
}
.nf-btn--outline {
  background: transparent; color: var(--nf-ink); border: 1.5px solid var(--nf-line);
}
.nf-btn--outline:hover { border-color: var(--nf-brand); color: var(--nf-brand); }

/* --- 11. ICOON IN DE BENEFIT-KAART (A26) ----------------------------------
   `.nf-feat-icon` bestond al in v7 (42px vak, zachte merkachtergrond) maar kreeg nooit een
   element. Nu hij er is, alleen de kleur en de maat van het pad zetten. */
.nf-feat-icon { color: var(--nf-brand); margin-bottom: 12px; }
.nf-feat-icon svg { width: 20px; height: 20px; }

/* --- 12. PAKKETTENBLOK (A21) ----------------------------------------------
   Drie kolommen op desktop zoals het feat-grid, zodat een dienstenpagina een herkenbaar
   kaartritme houdt. De uitgelichte kaart is het pakket van het cluster: die krijgt de
   merkrand en het label, de rest blijft rustig. */
.nf-pkg-grid { display: grid; grid-template-columns: 1fr; gap: 16px; margin: 0 0 8px; }
@media (min-width: 640px)  { .nf-pkg-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .nf-pkg-grid { grid-template-columns: repeat(3, 1fr); } }
.nf-pkg {
  position: relative; background: var(--nf-bg); border: 1px solid var(--nf-line);
  border-radius: var(--nf-r-lg); padding: 22px; display: flex; flex-direction: column;
}
.nf-pkg--uit { border-color: var(--nf-brand); box-shadow: var(--nf-sh-brand); }
.nf-pkg-label {
  align-self: flex-start; font-size: 11px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: #fff; background: var(--nf-grad);
  border-radius: 999px; padding: 4px 10px; margin-bottom: 10px;
}
.nf-pkg-title { font-family: var(--nf-f-display); font-size: 18px; font-weight: 700; color: var(--nf-ink); }
.nf-pkg-voor { font-size: 14px; line-height: 1.55; color: var(--nf-ink-3); margin: 6px 0 12px; }
.nf-pkg-list { list-style: none; margin: 0 0 16px; padding: 0; }
.nf-pkg-item {
  position: relative; padding-left: 22px; font-size: 14.5px; line-height: 1.5;
  color: var(--nf-ink-2); margin-bottom: 7px;
}
.nf-pkg-item::before {
  content: ""; position: absolute; left: 0; top: 7px; width: 12px; height: 7px;
  border-left: 2px solid var(--nf-accent); border-bottom: 2px solid var(--nf-accent);
  transform: rotate(-45deg);
}
.nf-pkg-link {
  margin-top: auto; font-size: 14px; font-weight: 600; color: var(--nf-brand);
  text-decoration: none; border-bottom: 1px solid rgba(30,127,224,.28); align-self: flex-start;
}
.nf-pkg-link:hover { border-bottom-color: var(--nf-brand); }