/* marketingnederland.com: merkkleur-override voor de Foxbranding tools-motor.
   Accent = cyaan-deep (#0096d6, dezelfde kleur als .accent in style.css), witte letterkleur.
   html:root heeft een hogere specificiteit dan het :root-blok van de motor hieronder, dus deze waarden winnen. Geen em-dash. */
html:root{--fb-accent:#0096d6;--fb-accent-ink:#ffffff;--fb-radius:18px;--fb-shadow:0 18px 40px -22px rgba(14,27,46,0.30)}

/* Foxbranding site-upgrade: tools + micro-interacties. Werkt bovenop elke huisstijl.
   Zet per site bovenaan: :root{--fb-accent:#...; --fb-accent-ink:#fff}  (agent vult de merkkleur in) */
:where(:root) {
  --fb-accent: #1B47E0;
  --fb-accent-ink: #ffffff;
  --fb-good: #16a34a;
  --fb-warn: #d97706;
  --fb-bad: #dc2626;
  --fb-radius: 14px;
  --fb-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

/* ===== Tools basis ===== */
.fb-tool { display: grid; gap: 20px; margin: 24px 0; }
@media (min-width: 900px) { .fb-tool:not(.fb-quiz):not(.fb-gen):not(.fb-checklist) { grid-template-columns: 1fr 1fr; align-items: start; } }
.fb-form { display: grid; gap: 14px; }
.fb-field label { display: flex; justify-content: space-between; gap: 12px; font-weight: 600; margin-bottom: 6px; }
.fb-field .fb-out { color: var(--fb-accent); font-variant-numeric: tabular-nums; }
.fb-field input[type="number"], .fb-field select {
  width: 100%; padding: 10px 12px; border: 1px solid rgba(0, 0, 0, 0.18); border-radius: 10px; font: inherit; background: #fff; color: inherit;
}
.fb-field input[type="range"] { width: 100%; accent-color: var(--fb-accent); }
.fb-help { display: block; opacity: 0.7; margin-top: 4px; font-size: 0.9em; }
.fb-check, .fb-radio { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-weight: 500; padding: 8px 10px; border-radius: 10px; }
.fb-check:hover, .fb-radio:hover { background: rgba(0, 0, 0, 0.04); }
.fb-check input, .fb-radio input { accent-color: var(--fb-accent); margin-top: 3px; }
.fb-radios { display: grid; gap: 6px; }

.fb-result-card {
  background: #fff; border: 1px solid rgba(0, 0, 0, 0.08); border-radius: var(--fb-radius); padding: 22px; box-shadow: var(--fb-shadow);
  position: sticky; top: 90px;
}
.fb-headline { font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 800; line-height: 1.1; color: var(--fb-accent); }
.fb-sub { opacity: 0.8; margin-top: 4px; }
.fb-lines { display: grid; gap: 8px; margin: 16px 0 0; padding: 0; }
.fb-lines div { display: flex; justify-content: space-between; gap: 12px; border-top: 1px dashed rgba(0, 0, 0, 0.12); padding-top: 8px; }
.fb-lines dt { opacity: 0.75; }
.fb-lines dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.fb-note { font-size: 0.92em; opacity: 0.75; margin-top: 12px; }
.fb-cta { margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(0, 0, 0, 0.08); }
.fb-cta p { margin: 0 0 10px; }

.fb-btn {
  display: inline-block; background: var(--fb-accent); color: var(--fb-accent-ink); padding: 12px 20px; border-radius: 999px; font-weight: 700;
  text-decoration: none; border: 2px solid var(--fb-accent); cursor: pointer; font: inherit; transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.fb-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); text-decoration: none; }
.fb-btn-ghost { background: transparent; color: var(--fb-accent); }
.fb-link { background: none; border: none; color: var(--fb-accent); text-decoration: underline; cursor: pointer; font: inherit; padding: 6px 0; }

/* ===== Meter ===== */
.fb-meter { margin: 6px 0 14px; }
.fb-meter-track { height: 14px; background: rgba(0, 0, 0, 0.08); border-radius: 999px; overflow: hidden; }
.fb-meter-fill { height: 100%; width: 0; border-radius: 999px; transition: width 0.9s cubic-bezier(0.2, 0.8, 0.2, 1); }
.fb-meter-value { margin-top: 8px; font-size: 1.1em; }
.fb-meter-value strong { font-size: 1.8em; }
.fb-meter-value em { font-style: normal; opacity: 0.7; }

/* ===== Quiz ===== */
.fb-progress { height: 8px; background: rgba(0, 0, 0, 0.08); border-radius: 999px; overflow: hidden; margin-bottom: 14px; }
.fb-progress > div { height: 100%; background: var(--fb-accent); transition: width 0.4s ease; }
.fb-qcount { font-size: 0.85em; opacity: 0.7; }
.fb-q { margin: 6px 0 14px; }
.fb-options { display: grid; gap: 10px; }
.fb-opt {
  text-align: left; padding: 14px 16px; border-radius: 12px; border: 2px solid rgba(0, 0, 0, 0.12); background: #fff; font: inherit; cursor: pointer;
  transition: border-color 0.15s, transform 0.15s;
}
.fb-opt:hover { border-color: var(--fb-accent); transform: translateX(4px); }
.fb-kicker { text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.78em; opacity: 0.7; }
.fb-quiz-result h3 { font-size: 1.6em; margin: 6px 0 10px; color: var(--fb-accent); }

/* ===== Scan ===== */
.fb-scan-list { display: grid; gap: 4px; }
.fb-scan-tips h4 { margin: 14px 0 6px; }
.fb-scan-tips ul { margin: 0; padding-left: 18px; }

/* ===== Generator ===== */
.fb-gen-list { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 8px; }
.fb-gen-list li { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 12px 14px; background: #fff; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 12px; }
.fb-gen-list li span { font-weight: 600; }

/* ===== Checklist ===== */
.fb-cl-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.fb-cl-head .fb-progress { flex: 1; min-width: 160px; margin: 0; }
.fb-cl-group { display: grid; gap: 2px; margin-bottom: 8px; }
@media print {
  .fb-cl-head, .fb-sticky-cta, .fb-dark-toggle, .fb-readbar, nav, header, footer, .fb-cta { display: none !important; }
  .fb-check { break-inside: avoid; }
}

/* ===== Tools-hub kaarten ===== */
.fb-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin: 20px 0; }
.fb-card {
  display: block; padding: 20px; border-radius: var(--fb-radius); background: #fff; border: 1px solid rgba(0, 0, 0, 0.08); box-shadow: var(--fb-shadow);
  color: inherit; text-decoration: none; transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.fb-card:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(0, 0, 0, 0.12); text-decoration: none; }
.fb-card .fb-card-icon { font-size: 1.8em; margin-bottom: 8px; }
.fb-card h3 { margin: 0 0 6px; font-size: 1.1em; }
.fb-card p { margin: 0; opacity: 0.8; font-size: 0.95em; }

/* ===== Begrippenlijst ===== */
.fb-az { display: flex; flex-wrap: wrap; gap: 6px; margin: 16px 0; }
.fb-az a { padding: 6px 10px; border-radius: 8px; background: rgba(0, 0, 0, 0.05); text-decoration: none; font-weight: 600; }
.fb-term { padding: 14px 0; border-bottom: 1px solid rgba(0, 0, 0, 0.08); }
.fb-term dt { font-weight: 800; color: var(--fb-accent); }
.fb-term dd { margin: 4px 0 0; }

/* ===== Site-wide micro-interacties ===== */
@media (prefers-reduced-motion: no-preference) {
  .fb-reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.6s ease, transform 0.6s ease; }
  .fb-reveal.fb-in { opacity: 1; transform: none; }
}
.fb-readbar { position: fixed; top: 0; left: 0; height: 4px; width: 0; background: var(--fb-accent); z-index: 9998; transition: width 0.1s linear; }
.fb-sticky-cta {
  position: fixed; left: 50%; bottom: 16px; transform: translate(-50%, 140%); z-index: 9990; display: flex; align-items: center; gap: 12px;
  background: #111; color: #fff; padding: 10px 12px 10px 18px; border-radius: 999px; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); max-width: calc(100vw - 32px);
}
.fb-sticky-cta.fb-show { transform: translate(-50%, 0); }
.fb-sticky-cta span { font-weight: 600; font-size: 0.95em; }
.fb-sticky-cta .fb-btn { padding: 8px 14px; }
.fb-sticky-cta button.fb-x { background: none; border: none; color: #fff; opacity: 0.7; cursor: pointer; font-size: 1.2em; padding: 0 4px; }
.fb-dark-toggle {
  position: fixed; left: 16px; bottom: 16px; z-index: 9991; width: 44px; height: 44px; border-radius: 50%; border: none; cursor: pointer;
  background: #111; color: #fff; font-size: 1.2em; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}
html.fb-dark { filter: invert(1) hue-rotate(180deg); background: #111; }
html.fb-dark img, html.fb-dark video, html.fb-dark iframe, html.fb-dark picture, html.fb-dark [data-noinvert], html.fb-dark .fb-noinvert, html.fb-dark .fb-confetti { filter: invert(1) hue-rotate(180deg); }
.fb-toast {
  position: fixed; top: 20px; left: 50%; transform: translateX(-50%); background: #111; color: #fff; padding: 12px 18px; border-radius: 12px; z-index: 9999;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3); font-weight: 600;
}
[data-fb-count] { font-variant-numeric: tabular-nums; }


/* ===== marketingnederland.com: merk-fit (na de motor-css, zodat deze regels winnen) ===== */
.fb-headline,.fb-quiz-result h3,.fb-scan-verdict h3,.fb-tool h3,.fb-card h3{font-family:var(--font-display,inherit);letter-spacing:-0.02em}
.fb-btn{background:var(--cyan,#00c2ff);border-color:var(--cyan,#00c2ff);color:var(--navy,#0e1b2e);font-family:var(--font-body,inherit)}
.fb-btn:hover{background:var(--cyan-bright,#18d3ff);border-color:var(--cyan-bright,#18d3ff);color:var(--navy,#0e1b2e)}
.fb-btn-ghost,.fb-btn-ghost:hover{background:transparent;border-color:var(--cyan-deep,#0096d6);color:var(--cyan-ink,#0a7aa8)}
.fb-sticky-cta,.fb-dark-toggle,.fb-toast{background:var(--navy-deep,#091322)}
.fb-field input[type="number"],.fb-field select{border-color:var(--line-strong,#cdd8e6);border-radius:var(--radius-xs,7px);font-family:var(--font-body,inherit)}
.fb-field input[type="number"]:focus,.fb-field select:focus{outline:none;border-color:var(--cyan-deep,#0096d6);box-shadow:0 0 0 3px var(--cyan-soft,#d9f4fe)}
.fb-card .fb-card-icon{color:var(--cyan-deep,#0096d6);font-family:var(--font-display,inherit);font-weight:700}
.fb-term dt{font-family:var(--font-display,inherit);font-size:1.08rem}
.fb-az a{color:var(--ink,#0e1b2e)}
.fb-az a:hover{background:var(--cyan-soft,#d9f4fe);color:var(--cyan-ink,#0a7aa8)}
.fb-table-wrap{overflow-x:auto;margin:1.5rem 0}
.fb-table{width:100%;border-collapse:collapse;font-size:0.95rem;background:var(--surface,#fff);border:1px solid var(--line,#e2e9f1);border-radius:var(--radius-sm,12px)}
.fb-table th,.fb-table td{padding:0.85rem 1rem;border-bottom:1px solid var(--line,#e2e9f1);text-align:left;vertical-align:top}
.fb-table th{font-size:0.74rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--cyan-ink,#0a7aa8);background:var(--bg-soft,#f4f7fb)}
.fb-table tr:last-child td{border-bottom:0}
.fb-table td strong{white-space:nowrap}
.fb-steps{display:grid;gap:0;border-top:1px solid var(--line,#e2e9f1)}
.fb-step{display:grid;grid-template-columns:auto 1fr;gap:1.6rem;padding:1.9rem 0.5rem;border-bottom:1px solid var(--line,#e2e9f1)}
.fb-step-no{font-family:var(--font-display,inherit);font-weight:700;font-size:1.5rem;color:var(--cyan-deep,#0096d6);min-width:2.6rem}
.fb-step h3{margin-bottom:0.4rem}
.fb-step p{color:var(--ink-soft,#4a5a72);margin:0 0 0.5rem;max-width:68ch}
.fb-step small{display:block;color:var(--ink-faint,#7c8aa1);font-size:0.82rem}