/* ========================================
   Flowix - Site 2026
   Volledig nieuwe opbouw; laadt zonder style.css of light-theme.css.
   Klassen beginnen met fx-. Een paar oude namen blijven staan omdat
   js/main.js ze aanstuurt: .navbar, .nav-link, .nav-dropdown,
   .dropdown-toggle, .dropdown-menu, .lang-*, .faq-*.
   ======================================== */

@font-face { font-family: 'Cabinet Grotesk'; src: url('../fonts/cabinet-grotesk-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Cabinet Grotesk'; src: url('../fonts/cabinet-grotesk-800.woff2') format('woff2'); font-weight: 800; font-display: swap; }
@font-face { font-family: 'Satoshi'; src: url('../fonts/satoshi-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Satoshi'; src: url('../fonts/satoshi-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Satoshi'; src: url('../fonts/satoshi-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }

:root {
  --fx-bg: #fffdfb;
  --fx-wit: #ffffff;
  --fx-ink: #1a1410;
  --fx-ink-2: #51483f;
  --fx-ink-3: #6e645a;
  --fx-oranje: #ff6a12;
  --fx-oranje-licht: #ff8f47;
  --fx-oranje-diep: #e9500a;
  --fx-oranje-tekst: #b83c06;
  --fx-perzik: #fff1e6;
  --fx-perzik-2: #ffe1cb;
  --fx-zand: #f7f3ee;
  --fx-lijn: rgba(26, 20, 16, 0.1);
  --fx-donker: #241a13;
  --fx-donker-2: #211913;
  --fx-op-donker: #fbf5ef;
  --fx-op-donker-2: #b8ab9e;
  --fx-groen: #0f6f50;
  --fx-groen-licht: #e3f5ec;
  --fx-verloop: linear-gradient(135deg, #ff8a3c 0%, #ff6a12 45%, #f4530a 100%);
  --fx-display: 'Cabinet Grotesk', 'Satoshi', system-ui, sans-serif;
  --fx-body: 'Satoshi', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fx-r-xl: 36px;
  --fx-r-l: 26px;
  --fx-r-m: 18px;
  --fx-r-s: 12px;
  --fx-schaduw-s: 0 1px 2px rgba(26, 20, 16, 0.05), 0 8px 20px -10px rgba(26, 20, 16, 0.16);
  --fx-schaduw-m: 0 2px 4px rgba(26, 20, 16, 0.05), 0 24px 48px -22px rgba(26, 20, 16, 0.3);
  --fx-schaduw-l: 0 4px 8px rgba(26, 20, 16, 0.06), 0 50px 80px -36px rgba(26, 20, 16, 0.5);
  --fx-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body.fx {
  margin: 0;
  background: var(--fx-bg);
  color: var(--fx-ink);
  font-family: var(--fx-body);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
:where(.fx) :where(h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote) { margin: 0; }
:where(.fx) :where(ul, ol) { padding: 0; list-style: none; }
:where(.fx) :where(a) { color: inherit; text-decoration: none; }
:where(.fx) :where(img) { max-width: 100%; height: auto; display: block; }
:where(.fx) :where(button) { font: inherit; color: inherit; cursor: pointer; }
.fx ::selection { background: var(--fx-oranje); color: var(--fx-ink); }
.fx :focus-visible { outline: 3px solid var(--fx-oranje-diep); outline-offset: 3px; border-radius: 8px; }
:where(.fx) :where(h1, h2, h3) { font-family: var(--fx-display); font-weight: 800; letter-spacing: -0.022em; line-height: 1.04; text-wrap: balance; }
.scroll-progress { display: none; }

.fx-wrap { width: min(1200px, 100% - 48px); margin-inline: auto; }
.fx-skip { position: absolute; left: 16px; top: -60px; z-index: 200; background: var(--fx-ink); color: #fff !important; padding: 10px 16px; border-radius: 10px; transition: top 0.2s; }
.fx-skip:focus { top: 12px; }

.fx-i { width: 1.15em; height: 1.15em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.fx-i--vol { fill: currentColor; stroke: none; }

/* ---------- Knoppen ---------- */
.fx-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-weight: 700; font-size: 1rem; line-height: 1;
  padding: 16px 24px; border-radius: 14px; border: 0;
  transition: transform 0.3s var(--fx-ease), box-shadow 0.3s var(--fx-ease), background-color 0.3s var(--fx-ease), color 0.3s var(--fx-ease);
  white-space: nowrap;
}
.fx-btn .fx-i { transition: transform 0.3s var(--fx-ease); }
.fx-btn:hover .fx-i { transform: translateX(4px); }
.fx-btn:hover { transform: translateY(-2px); }
.fx-btn:active { transform: translateY(0); }
.fx-btn--oranje { background: var(--fx-verloop); color: var(--fx-ink); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 14px 28px -12px rgba(255, 106, 18, 0.75); }
.fx-btn--oranje:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 20px 34px -12px rgba(255, 106, 18, 0.85); }
.fx-btn--donker { background: var(--fx-ink); color: #fff; box-shadow: 0 14px 28px -14px rgba(26, 20, 16, 0.7); }
.fx-btn--donker:hover { background: #000; }
.fx-btn--licht { background: var(--fx-wit); color: var(--fx-ink); box-shadow: inset 0 0 0 1.5px var(--fx-lijn), var(--fx-schaduw-s); }
.fx-btn--licht:hover { box-shadow: inset 0 0 0 1.5px var(--fx-ink), var(--fx-schaduw-s); }
.fx-btn--groot { padding: 19px 30px; font-size: 1.08rem; border-radius: 16px; }
.fx-btn--klein { padding: 12px 18px; font-size: 0.95rem; border-radius: 12px; }

/* ---------- Navigatie: zwevende balk ---------- */
.fx-nav { position: fixed; inset: 14px 0 auto 0; z-index: 100; pointer-events: none; }
.fx-nav-in {
  pointer-events: auto;
  width: min(1200px, 100% - 28px); margin-inline: auto;
  display: flex; align-items: center; gap: 20px;
  padding: 9px 10px 9px 20px;
  background: rgba(255, 255, 255, 0.82);
  -webkit-backdrop-filter: saturate(1.6) blur(18px); backdrop-filter: saturate(1.6) blur(18px);
  border: 1px solid rgba(26, 20, 16, 0.08);
  border-radius: 20px;
  box-shadow: 0 10px 30px -18px rgba(26, 20, 16, 0.35);
  transition: box-shadow 0.3s var(--fx-ease), background-color 0.3s var(--fx-ease);
}
.fx-nav.scrolled .fx-nav-in { background: rgba(255, 255, 255, 0.94); box-shadow: 0 18px 40px -20px rgba(26, 20, 16, 0.5); }
.fx-logo { display: inline-flex; align-items: center; gap: 11px; flex: none; }
.fx-logo-icoon { width: 40px; height: 40px; border-radius: 11px; box-shadow: 0 0 0 1px var(--fx-lijn), 0 6px 14px -6px rgba(255, 106, 18, 0.55); }
.fx-logo-woord { height: 15px; width: auto; }
.fx-menu { display: flex; align-items: center; gap: 2px; margin-left: 14px !important; }
.fx-menu .nav-link { display: inline-flex; align-items: center; gap: 4px; padding: 10px 13px; border-radius: 10px; font-weight: 500; font-size: 0.97rem; color: var(--fx-ink); transition: background-color 0.2s, color 0.2s; }
.fx-menu .nav-link:hover { background: var(--fx-zand); }
.fx-menu .nav-link.is-hier { color: var(--fx-oranje-tekst); font-weight: 700; }
.fx-menu .nav-link .fx-i { width: 0.9em; height: 0.9em; }
.nav-dropdown { position: relative; }
.dropdown-menu {
  position: absolute; top: calc(100% + 10px); left: 0; min-width: 230px;
  background: var(--fx-wit); border: 1px solid var(--fx-lijn); border-radius: var(--fx-r-m);
  box-shadow: var(--fx-schaduw-m); padding: 8px !important;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity 0.2s, transform 0.25s var(--fx-ease), visibility 0.2s;
}
.dropdown-menu::before { content: ''; position: absolute; inset: -12px 0 100% 0; }
.nav-dropdown:hover .dropdown-menu, .nav-dropdown:focus-within .dropdown-menu { opacity: 1; visibility: visible; transform: none; }
.dropdown-menu a { display: block; padding: 10px 12px; border-radius: 10px; font-weight: 500; font-size: 0.97rem; }
.dropdown-menu a:hover { background: var(--fx-perzik); color: var(--fx-oranje-tekst); }
.fx-nav-acties { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.fx-nav-icoon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; background: none; border: 0; color: var(--fx-ink); transition: background-color 0.2s; }
.fx-nav-icoon:hover { background: var(--fx-zand); }
.fx-taal { position: relative; }
.lang-menu { position: absolute; right: 0; top: calc(100% + 10px); background: var(--fx-wit); border: 1px solid var(--fx-lijn); border-radius: var(--fx-r-s); box-shadow: var(--fx-schaduw-m); padding: 6px; display: none; min-width: 84px; }
.lang-dropdown.open .lang-menu { display: block; }
.lang-option { display: block; padding: 8px 12px; border-radius: 8px; font-weight: 700; font-size: 0.92rem; }
.lang-option:hover, .lang-option.active { background: var(--fx-perzik); color: var(--fx-oranje-tekst); }
.fx-nav-cta { margin-left: 8px; }
.fx-burger { display: none; width: 44px; height: 44px; border: 0; background: var(--fx-zand); border-radius: 12px; position: relative; }
.fx-burger span { position: absolute; left: 12px; right: 12px; height: 2px; background: var(--fx-ink); border-radius: 2px; transition: transform 0.3s var(--fx-ease), opacity 0.2s; }
.fx-burger span:nth-child(1) { top: 15px; } .fx-burger span:nth-child(2) { top: 21px; } .fx-burger span:nth-child(3) { top: 27px; }
.fx-burger.active span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.fx-burger.active span:nth-child(2) { opacity: 0; }
.fx-burger.active span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ---------- Hero ---------- */
.fx-hero { position: relative; padding: 172px 0 0; text-align: center; overflow: hidden; }
.fx-hero-gloed {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(60% 46% at 50% 0%, rgba(255, 143, 71, 0.34), transparent 70%),
    radial-gradient(34% 30% at 12% 30%, rgba(255, 196, 150, 0.4), transparent 72%),
    radial-gradient(34% 30% at 88% 26%, rgba(255, 176, 120, 0.36), transparent 72%);
}
.fx-hero-gloed::after {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(26, 20, 16, 0.14) 1px, transparent 1.4px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(70% 60% at 50% 20%, #000, transparent 75%); mask-image: radial-gradient(70% 60% at 50% 20%, #000, transparent 75%);
}
.fx-pil { display: inline-flex; align-items: center; gap: 9px; padding: 8px 16px 8px 12px; border-radius: 999px; background: var(--fx-wit); box-shadow: inset 0 0 0 1px var(--fx-lijn), var(--fx-schaduw-s); font-weight: 700; font-size: 0.9rem; color: var(--fx-ink-2); }
.fx-pil-stip { width: 9px; height: 9px; border-radius: 50%; background: var(--fx-oranje); box-shadow: 0 0 0 4px rgba(255, 106, 18, 0.2); }
.fx-hero h1 { font-size: clamp(2.5rem, 6.2vw, 5.4rem); line-height: 0.98; letter-spacing: -0.03em; max-width: 17ch; margin: 26px auto 0; }
.fx-accent { color: var(--fx-oranje-diep); white-space: nowrap; }
.fx-hero-sub { font-size: clamp(1.08rem, 1.5vw, 1.3rem); color: var(--fx-ink-2); max-width: 56ch; margin: 26px auto 0; }
.fx-hero-knoppen { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; margin-top: 36px; }

.fx-podium { position: relative; margin: 76px auto 0; max-width: 1120px; height: 520px; }
.fx-podium-vloer {
  position: absolute; inset: 70px 0 0 0;
  border-radius: var(--fx-r-xl) var(--fx-r-xl) 0 0;
  background: var(--fx-verloop);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.4), 0 -30px 80px -30px rgba(255, 106, 18, 0.55);
  overflow: hidden;
}
.fx-podium-vloer::before {
  content: ''; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, 0.16) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.16) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: linear-gradient(#000, transparent 85%); mask-image: linear-gradient(#000, transparent 85%);
}
.fx-podium-vloer::after { content: ''; position: absolute; inset: -40% 20% auto 20%; height: 80%; background: radial-gradient(closest-side, rgba(255, 255, 255, 0.5), transparent); }

.fx-scherm {
  position: absolute; text-align: left;
  background: var(--fx-wit); border-radius: var(--fx-r-l); padding: 22px;
  box-shadow: var(--fx-schaduw-l);
  transition: transform 0.6s var(--fx-ease);
}
.fx-scherm header { display: flex; align-items: center; gap: 10px; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--fx-lijn); }
.fx-scherm header b { font-weight: 700; font-size: 0.98rem; }
.fx-scherm-icoon { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--fx-perzik); color: var(--fx-oranje-tekst); flex: none; }
.fx-live { margin-left: auto; font-style: normal; font-size: 0.78rem; font-weight: 700; color: var(--fx-groen); background: var(--fx-groen-licht); padding: 5px 10px 5px 22px; border-radius: 999px; position: relative; }
.fx-live::before { content: ''; position: absolute; left: 9px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: var(--fx-groen); animation: fx-puls 2s ease-in-out infinite; }
@keyframes fx-puls { 50% { opacity: 0.35; } }
.fx-tag { font-style: normal; font-size: 0.76rem; font-weight: 700; padding: 5px 10px; border-radius: 999px; background: var(--fx-zand); color: var(--fx-ink-2); }
.fx-tag--aan { background: var(--fx-groen-licht); color: var(--fx-groen); }
.fx-tag--oranje { background: var(--fx-perzik); color: var(--fx-oranje-tekst); }

.fx-scherm--dash { left: 50%; top: 0; width: 430px; margin-left: -215px; z-index: 2; }
.fx-scherm--chat { left: 0; top: 150px; width: 330px; transform: rotate(-3deg); z-index: 1; }
.fx-scherm--bel { right: 0; top: 130px; width: 350px; transform: rotate(3deg); z-index: 3; }
.fx-podium:hover .fx-scherm--chat { transform: rotate(-1.5deg) translateY(-6px); }
.fx-podium:hover .fx-scherm--bel { transform: rotate(1.5deg) translateY(-6px); }
.fx-venster { display: inline-flex; gap: 6px; }
.fx-venster i { width: 10px; height: 10px; border-radius: 50%; background: #e5ddd4; }
.fx-agenten li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--fx-r-s); background: var(--fx-zand); font-weight: 500; font-size: 0.97rem; }
.fx-agenten li + li { margin-top: 8px; }
.fx-agenten .fx-tag { margin-left: auto; }
.fx-kop-klein { font-size: 0.8rem; font-weight: 700; color: var(--fx-ink-3); margin-top: 18px !important; }
.fx-staven { display: flex; align-items: flex-end; gap: 8px; height: 76px; margin-top: 10px; }
.fx-staven i { flex: 1; height: var(--h); border-radius: 6px 6px 2px 2px; background: var(--fx-verloop); }
.fx-voorbeeld { font-size: 0.74rem; color: var(--fx-ink-3); margin-top: 12px !important; }
.fx-bel { max-width: 88%; padding: 11px 14px; border-radius: 16px; font-size: 0.93rem; line-height: 1.4; }
.fx-bel small { display: block; font-size: 0.72rem; font-weight: 700; opacity: 0.75; margin-bottom: 3px; }
.fx-bel--klant { background: var(--fx-zand); border-bottom-left-radius: 5px; }
.fx-bel--ai { background: var(--fx-ink); color: #fff; margin: 10px 0 0 auto !important; border-bottom-right-radius: 5px; }
.fx-scherm--chat footer { display: flex; gap: 10px; margin-top: 16px; }
.fx-scherm--chat footer span { flex: 1; background: var(--fx-perzik); border-radius: var(--fx-r-s); padding: 10px 12px; font-size: 0.8rem; color: var(--fx-ink-2); }
.fx-scherm--chat footer b { display: block; font-family: var(--fx-display); font-weight: 800; font-size: 1.35rem; color: var(--fx-ink); line-height: 1.1; }
.fx-scherm--bel footer { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }

.fx-beller { display: flex; align-items: center; gap: 12px; }
.fx-beller b { display: block; font-size: 0.97rem; }
.fx-beller small { color: var(--fx-ink-3); font-size: 0.8rem; }
.fx-beller time { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--fx-oranje-tekst); }
.fx-avatar { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--fx-perzik-2); color: var(--fx-oranje-tekst); font-weight: 700; font-size: 0.85rem; flex: none; }
.fx-speel { width: 100%; display: flex; align-items: center; gap: 12px; text-align: left; margin-top: 14px; padding: 12px; border: 0; border-radius: var(--fx-r-m); background: var(--fx-ink); color: #fff !important; transition: transform 0.3s var(--fx-ease), background-color 0.3s; }
.fx-speel { cursor: pointer; box-shadow: 0 10px 26px -12px rgba(255, 106, 18, 0.75), 0 0 0 1.5px rgba(255, 138, 60, 0.55); }
.fx-speel:hover { transform: translateY(-2px); background: #000; box-shadow: 0 16px 32px -12px rgba(255, 106, 18, 0.9), 0 0 0 2px var(--fx-oranje); }
.fx-speel:active { transform: translateY(0) scale(0.99); }
.fx-speel-knop { position: relative; width: 44px; height: 44px; border-radius: 50%; background: var(--fx-verloop); color: var(--fx-ink); display: grid; place-items: center; flex: none; transition: transform 0.3s var(--fx-ease); }
.fx-speel:hover .fx-speel-knop { transform: scale(1.08); }
/* Uitnodiging om te klikken: ringen die uit de afspeelknop lopen tot er wordt afgespeeld */
.fx-speel-knop::before, .fx-speel-knop::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--fx-oranje); opacity: 0; animation: fx-speel-ring 2.2s ease-out infinite; pointer-events: none; }
.fx-speel-knop::after { animation-delay: 1.1s; }
.fx-speel.is-spelend .fx-speel-knop::before, .fx-speel.is-spelend .fx-speel-knop::after { animation: none; }
@keyframes fx-speel-ring { 0% { transform: scale(1); opacity: 0.85; } 100% { transform: scale(1.75); opacity: 0; } }
.fx-speel-tekst small b { display: inline; font-size: inherit; color: var(--fx-oranje-licht); font-weight: 700; }
.fx-speel:not(.is-spelend) .fx-speel-bezig, .fx-speel.is-spelend .fx-speel-klik { display: none; }
@media (max-width: 480px) { .fx-speel-tekst small span.fx-speel-klik { display: none; } }
@media (prefers-reduced-motion: reduce) { .fx-speel-knop::before, .fx-speel-knop::after { animation: none; } }
.fx-speel-pauze { display: none; }
.fx-speel.is-spelend .fx-speel-play { display: none; }
.fx-speel.is-spelend .fx-speel-pauze { display: block; }
.fx-speel-tekst b { display: block; font-size: 0.95rem; }
.fx-speel-tekst small { color: #cfc4b9; font-size: 0.78rem; }
.fx-golf { margin-left: auto; display: flex; align-items: center; gap: 3px; height: 30px; }
.fx-golf i { width: 3px; height: 30%; border-radius: 2px; background: var(--fx-oranje-licht); }
.fx-golf i:nth-child(3n) { height: 70%; } .fx-golf i:nth-child(4n+1) { height: 45%; } .fx-golf i:nth-child(5n+2) { height: 100%; }
.fx-speel.is-spelend .fx-golf i { animation: fx-golf 0.9s ease-in-out infinite; }
.fx-speel.is-spelend .fx-golf i:nth-child(2n) { animation-delay: -0.3s; } .fx-speel.is-spelend .fx-golf i:nth-child(3n) { animation-delay: -0.6s; }
@keyframes fx-golf { 50% { transform: scaleY(0.35); } }

/* ---------- Statement ---------- */
.fx-statement { padding: 120px 0; background: var(--fx-bg); position: relative; z-index: 1; }
.fx-statement-tekst { font-family: var(--fx-display); font-weight: 700; font-size: clamp(1.9rem, 4.4vw, 4rem); line-height: 1.06; letter-spacing: -0.025em; color: var(--fx-ink); max-width: 20ch; margin-inline: auto !important; text-align: center; text-wrap: balance; }
.fx-statement-tekst span { color: var(--fx-oranje-diep); }

/* ---------- Sectiekoppen ---------- */
.fx-kop { text-align: center; max-width: 760px; margin: 0 auto 56px; }
.fx-kop h2 { font-size: clamp(2rem, 4.2vw, 3.5rem); }
.fx-kop p { margin-top: 18px; font-size: 1.15rem; color: var(--fx-ink-2); }
.fx-kop--links { text-align: left; margin-inline: 0; }

/* ---------- Modules met tabbladen ---------- */
.fx-werk { padding: 128px 0 120px; }
.fx-tabs-lijst { display: flex; gap: 6px; width: fit-content; max-width: 100%; margin: 0 auto 28px; padding: 6px; border-radius: 18px; background: var(--fx-zand); overflow-x: auto; scrollbar-width: none; }
.fx-tabs-lijst::-webkit-scrollbar { display: none; }
.fx-tab { border: 0; background: none; padding: 12px 20px; border-radius: 13px; font-weight: 700; font-size: 0.98rem; color: var(--fx-ink-2); white-space: nowrap; transition: background-color 0.25s var(--fx-ease), color 0.25s, box-shadow 0.25s; }
.fx-tab:hover { color: var(--fx-ink); }
.fx-tab[aria-selected="true"] { background: var(--fx-wit); color: var(--fx-ink); box-shadow: var(--fx-schaduw-s); }
.fx-paneel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); background: var(--fx-wit); border-radius: var(--fx-r-xl); box-shadow: inset 0 0 0 1px var(--fx-lijn), var(--fx-schaduw-m); overflow: hidden; }
.fx-paneel[hidden] { display: none; }
.fx-paneel:not([hidden]) .fx-paneel-tekst > *, .fx-paneel:not([hidden]) .fx-kaart-beeld { animation: fx-in 0.6s var(--fx-ease) both; }
.fx-paneel:not([hidden]) .fx-paneel-tekst > :nth-child(2) { animation-delay: 0.05s; } .fx-paneel:not([hidden]) .fx-paneel-tekst > :nth-child(3) { animation-delay: 0.1s; } .fx-paneel:not([hidden]) .fx-paneel-tekst > :nth-child(4) { animation-delay: 0.15s; }
@keyframes fx-in { from { opacity: 0; transform: translateY(14px); } }
.fx-paneel-tekst { padding: clamp(28px, 5vw, 64px); display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
.fx-paneel-tekst h3 { font-size: clamp(1.8rem, 3.2vw, 2.8rem); }
.fx-paneel-tekst > p { margin-top: 18px; color: var(--fx-ink-2); font-size: 1.08rem; max-width: 50ch; }
.fx-vinkjes { margin: 24px 0 32px !important; display: grid; gap: 12px; }
.fx-vinkjes li { position: relative; padding-left: 34px; font-weight: 500; }
.fx-vinkjes li::before { content: ''; position: absolute; left: 0; top: 2px; width: 22px; height: 22px; border-radius: 50%; background: var(--fx-perzik-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b83c06' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center / 13px no-repeat; }
.fx-paneel-beeld { position: relative; padding: clamp(24px, 4vw, 56px); display: grid; place-items: center; background: radial-gradient(90% 80% at 80% 10%, #ffd9bd, transparent 60%), linear-gradient(160deg, var(--fx-perzik), #ffd3b3); }
.fx-kaart-beeld { width: min(100%, 400px); background: var(--fx-wit); border-radius: var(--fx-r-l); padding: 26px; box-shadow: var(--fx-schaduw-l); }
.fx-groot-cijfer { display: flex; align-items: baseline; gap: 10px; }
.fx-groot-cijfer b { font-family: var(--fx-display); font-weight: 800; font-size: 3.6rem; line-height: 1; letter-spacing: -0.03em; }
.fx-groot-cijfer span { color: var(--fx-ink-2); font-weight: 500; }
.fx-beeld-uitleg { margin: 10px 0 18px !important; padding-bottom: 18px; border-bottom: 1px solid var(--fx-lijn); color: var(--fx-ink-2); font-size: 0.93rem; }
.fx-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px !important; }
.fx-balken { display: grid; gap: 14px; }
.fx-balken li { display: grid; grid-template-columns: 88px 1fr auto; align-items: center; gap: 12px; font-size: 0.93rem; font-weight: 500; }
.fx-balken i { height: 8px; border-radius: 99px; background: var(--fx-zand); position: relative; overflow: hidden; }
.fx-balken i::after { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: 99px; background: var(--fx-verloop); }
.fx-balken b { color: var(--fx-oranje-tekst); font-variant-numeric: tabular-nums; }
.fx-taken { display: grid; gap: 8px; }
.fx-taken li { display: grid; grid-template-columns: 1fr auto; gap: 0 12px; align-items: center; padding: 12px 14px; border-radius: var(--fx-r-s); background: var(--fx-zand); }
.fx-taken b { font-size: 0.95rem; } .fx-taken small { grid-column: 1; color: var(--fx-ink-3); font-size: 0.82rem; }
.fx-taken em { grid-row: 1 / span 2; grid-column: 2; width: 22px; height: 22px; border-radius: 50%; }
.fx-klaar { background: var(--fx-groen-licht) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f6f50' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center / 13px no-repeat; }
.fx-bezig { background: var(--fx-oranje); box-shadow: 0 0 0 5px rgba(255, 106, 18, 0.2); transform: scale(0.5); animation: fx-puls 1.6s ease-in-out infinite; }

.fx-modules { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin-top: 28px !important; }
.fx-modules a { display: flex; flex-direction: column; height: 100%; padding: 24px; border-radius: var(--fx-r-l); background: var(--fx-wit); box-shadow: inset 0 0 0 1px var(--fx-lijn); transition: transform 0.4s var(--fx-ease), box-shadow 0.4s var(--fx-ease), background-color 0.4s; }
.fx-modules a:hover { transform: translateY(-6px); box-shadow: inset 0 0 0 1.5px var(--fx-oranje), var(--fx-schaduw-m); }
.fx-module-icoon { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--fx-verloop); color: var(--fx-ink); font-size: 1.15rem; box-shadow: 0 10px 20px -10px rgba(255, 106, 18, 0.8); }
.fx-modules h3 { font-size: 1.4rem; margin-top: 20px; }
.fx-modules p { margin: 8px 0 20px; color: var(--fx-ink-2); font-size: 0.95rem; line-height: 1.45; }
.fx-module-cijfer { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--fx-lijn); font-size: 0.88rem; color: var(--fx-ink-2); }
.fx-module-cijfer b { font-family: var(--fx-display); font-weight: 800; font-size: 1.3rem; color: var(--fx-oranje-tekst); margin-right: 4px; }

/* ---------- Aanpak ---------- */
.fx-aanpak { padding: 0 0 120px; }
.fx-stappen { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; position: relative; counter-reset: none; }
.fx-stappen::before { content: ''; position: absolute; left: 8%; right: 8%; top: 58px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--fx-perzik-2), var(--fx-oranje), var(--fx-perzik-2)); }
.fx-stappen li { position: relative; padding: 32px; border-radius: var(--fx-r-xl); background: var(--fx-zand); }
.fx-stappen li.is-kern { background: var(--fx-wit); box-shadow: inset 0 0 0 1.5px var(--fx-oranje), 0 40px 70px -40px rgba(255, 106, 18, 0.7); transform: translateY(-14px); }
.fx-stap-nr { position: relative; width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; background: var(--fx-wit); box-shadow: inset 0 0 0 1px var(--fx-lijn), var(--fx-schaduw-s); font-family: var(--fx-display); font-weight: 800; font-size: 1.5rem; }
.is-kern .fx-stap-nr { background: var(--fx-verloop); color: var(--fx-ink); box-shadow: 0 14px 28px -12px rgba(255, 106, 18, 0.9); }
.fx-stappen h3 { font-size: 1.9rem; margin-top: 28px; }
.fx-stappen p { margin-top: 12px; color: var(--fx-ink-2); font-size: 1.04rem; }

/* ---------- Zonder / met ---------- */
.fx-verschil { padding: 112px 0; background: var(--fx-zand); }
.fx-verschil-raster { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 18px; max-width: 1000px; margin-inline: auto; align-items: stretch; }
.fx-zonder, .fx-met { border-radius: var(--fx-r-xl); padding: clamp(28px, 4vw, 48px); }
.fx-zonder { background: var(--fx-wit); box-shadow: inset 0 0 0 1px var(--fx-lijn); }
.fx-met { background: var(--fx-verloop); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.4), 0 40px 70px -36px rgba(255, 106, 18, 0.85); position: relative; overflow: hidden; }
.fx-met::after { content: ''; position: absolute; right: -80px; top: -80px; width: 280px; height: 280px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, 0.45), transparent); }
.fx-zonder h3, .fx-met h3 { font-size: 1.7rem; margin-bottom: 24px; }
.fx-zonder h3 { color: var(--fx-ink-3); }
.fx-zonder li, .fx-met li { position: relative; padding: 14px 0 14px 40px; font-size: 1.1rem; font-weight: 500; }
.fx-zonder li + li { border-top: 1px solid var(--fx-lijn); } .fx-met li + li { border-top: 1px solid rgba(26, 20, 16, 0.14); }
.fx-zonder li { color: var(--fx-ink-2); }
.fx-zonder li::before, .fx-met li::before { content: ''; position: absolute; left: 0; top: 14px; width: 26px; height: 26px; border-radius: 50%; }
.fx-zonder li::before { background: var(--fx-zand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236e645a' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='m7 7 10 10M17 7 7 17'/%3E%3C/svg%3E") center / 12px no-repeat; }
.fx-met li::before { background: var(--fx-ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff8f47' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center / 14px no-repeat; }

/* ---------- Case ---------- */
.fx-case { position: relative; padding: 128px 0; background: var(--fx-perzik); overflow: hidden; }
.fx-case-gloed { position: absolute; inset: 0; background: radial-gradient(46% 60% at 100% 0%, rgba(255, 143, 71, 0.4), transparent 70%), radial-gradient(40% 50% at 0% 100%, rgba(255, 196, 150, 0.5), transparent 70%); }
.fx-case .fx-wrap { position: relative; }
.fx-case-kop { max-width: 780px; }
.fx-case-kop h2 { font-size: clamp(2.2rem, 4.6vw, 3.9rem); }
.fx-case-kop p { margin-top: 20px; color: var(--fx-ink-2); font-size: 1.12rem; }
.fx-cijfers { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 14px; margin: 56px 0 0 !important; }
.fx-cijfer { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 14px; padding: 30px; border-radius: var(--fx-r-l); background: var(--fx-wit); box-shadow: var(--fx-schaduw-s); min-height: 210px; }
.fx-cijfer dd { font-family: var(--fx-display); font-weight: 800; font-size: clamp(2.6rem, 4.4vw, 3.8rem); line-height: 1; letter-spacing: -0.03em; color: var(--fx-ink); white-space: nowrap; }
.fx-cijfer dt { color: var(--fx-ink-2); font-size: 0.98rem; }
.fx-cijfer--groot { background: var(--fx-verloop); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.4), 0 30px 60px -30px rgba(255, 106, 18, 0.9); }
.fx-cijfer--groot dd { color: var(--fx-ink); font-size: clamp(3.4rem, 6.4vw, 5.6rem); }
.fx-cijfer--groot dt { color: var(--fx-ink); font-weight: 500; }
.fx-case-slot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 24px; margin-top: 40px; }
.fx-case-slot p { color: var(--fx-ink-2); max-width: 52ch; }

/* ---------- Voor wie ---------- */
.fx-wie { padding: 120px 0 72px; }
.fx-wie .fx-kop { margin-bottom: 40px; }
.fx-wie-raster { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.fx-wie-raster a { position: relative; display: block; height: 100%; padding: 28px 28px 32px; border-radius: var(--fx-r-l); background: var(--fx-zand); transition: background-color 0.4s var(--fx-ease), transform 0.4s var(--fx-ease), box-shadow 0.4s var(--fx-ease); }
.fx-wie-raster a:hover { background: var(--fx-wit); transform: translateY(-6px); box-shadow: inset 0 0 0 1.5px var(--fx-oranje), var(--fx-schaduw-m); }
.fx-wie-raster h3 { font-size: 1.5rem; padding-right: 40px; }
.fx-wie-raster p { margin-top: 12px; color: var(--fx-ink-2); font-size: 0.98rem; transition: color 0.4s; }
.fx-pijl { position: absolute; right: 24px; top: 28px; width: 28px; height: 28px; padding: 6px; border-radius: 50%; background: var(--fx-wit); color: var(--fx-ink); transition: background-color 0.4s, transform 0.4s var(--fx-ease); }
.fx-wie-raster a:hover .fx-pijl { background: var(--fx-oranje); transform: rotate(45deg); }

/* ---------- Koppelingen ---------- */
.fx-tools { padding: 72px 0 120px; }
.fx-tools .fx-kop { margin-bottom: 40px; }
.fx-band { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.fx-band-spoor { display: flex; gap: 18px; width: max-content; animation: fx-band 60s linear infinite; }
.fx-band:hover .fx-band-spoor { animation-play-state: paused; }
.fx-band-spoor img { width: 64px; height: 64px; padding: 17px; border-radius: 18px; background: var(--fx-wit); box-shadow: inset 0 0 0 1px var(--fx-lijn); filter: grayscale(1); opacity: 0.75; }
@keyframes fx-band { to { transform: translateX(calc(-50% - 9px)); } }

/* ---------- ROI ---------- */
.fx-roi { padding: 112px 0; background: radial-gradient(60% 80% at 0% 0%, #ffd9bd, transparent 60%), linear-gradient(180deg, var(--fx-perzik), #ffe6d3); }
.fx-roi-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.fx-roi-kop { font-size: clamp(1.7rem, 3vw, 2.6rem) !important; line-height: 1.1 !important; margin-bottom: 32px !important; }
.fx-reken { background: var(--fx-wit); border-radius: var(--fx-r-xl); padding: clamp(24px, 3.4vw, 40px); box-shadow: var(--fx-schaduw-l); }
.fx-reken-vraag { display: block; font-weight: 700; font-size: 1.12rem; line-height: 1.35; }
.fx-reken-schuif { display: flex; align-items: center; gap: 18px; margin-top: 20px; }
.fx-reken-uren { font-family: var(--fx-display); font-weight: 800; font-size: 1.5rem; white-space: nowrap; min-width: 4.6ch; text-align: right; font-variant-numeric: tabular-nums; }
.fx-reken input[type="range"] { -webkit-appearance: none; appearance: none; flex: 1; height: 44px; background: none; margin: 0; cursor: pointer; }
.fx-reken input[type="range"]::-webkit-slider-runnable-track { height: 8px; border-radius: 99px; background: var(--fx-perzik-2); }
.fx-reken input[type="range"]::-moz-range-track { height: 8px; border-radius: 99px; background: var(--fx-perzik-2); }
.fx-reken input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; margin-top: -10px; border-radius: 50%; background: var(--fx-verloop); border: 4px solid #fff; box-shadow: 0 6px 14px -4px rgba(255, 106, 18, 0.9), 0 0 0 1px var(--fx-lijn); }
.fx-reken input[type="range"]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--fx-oranje); border: 4px solid #fff; box-shadow: 0 6px 14px -4px rgba(255, 106, 18, 0.9), 0 0 0 1px var(--fx-lijn); }
.fx-reken-uit { display: grid; grid-template-columns: 0.8fr 1fr 1.2fr; gap: 10px; margin-top: 18px; }
.fx-reken-uit > div { padding: 16px; border-radius: var(--fx-r-m); background: var(--fx-zand); }
.fx-reken-uit b { display: block; font-family: var(--fx-display); font-weight: 800; font-size: clamp(1.4rem, 2.2vw, 1.9rem); line-height: 1.1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.fx-reken-uit span { display: block; margin-top: 4px; font-size: 0.84rem; color: var(--fx-ink-2); }
.fx-reken-uit .fx-reken-jaar { background: var(--fx-perzik-2); }
.fx-reken-uit .fx-reken-jaar b { color: var(--fx-oranje-tekst); }
.fx-rapport { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--fx-lijn); }
.fx-rapport > p { font-size: 0.95rem; color: var(--fx-ink-2); } .fx-rapport strong { color: var(--fx-ink); font-size: 1.02rem; }
.fx-rapport-rij { display: flex; gap: 10px; margin-top: 14px; }
.fx-rapport input[type="email"] { flex: 1; min-width: 0; font: inherit; color: var(--fx-ink); padding: 14px 16px; border-radius: 14px; border: 1.5px solid rgba(26, 20, 16, 0.2); background: var(--fx-wit); transition: border-color 0.2s, box-shadow 0.2s; }
.fx-rapport input[type="email"]::placeholder { color: var(--fx-ink-3); }
.fx-rapport input[type="email"]:focus { outline: none; border-color: var(--fx-oranje-diep); box-shadow: 0 0 0 4px rgba(255, 106, 18, 0.22); }
.fx-akkoord { display: flex; align-items: center; gap: 10px; margin-top: 14px; font-size: 0.9rem; color: var(--fx-ink-2); cursor: pointer; }
.fx-akkoord input { width: 20px; height: 20px; accent-color: var(--fx-oranje-diep); flex: none; }
.fx-akkoord a { color: var(--fx-oranje-tekst); text-decoration: underline; text-underline-offset: 3px; }
.fx .form-succes { padding: 16px; border-radius: var(--fx-r-m); background: var(--fx-groen-licht); color: var(--fx-groen); font-weight: 700; }
.fx .form-fout { margin-top: 12px; padding: 12px 14px; border-radius: var(--fx-r-s); background: #fde8e4; color: #a12a12; font-size: 0.92rem; }
.fx .form-fout a { text-decoration: underline; }

/* ---------- Klanten ---------- */
.fx-klanten { padding: 120px 0; }
.fx-quotes { display: grid; grid-template-columns: 1.15fr 1fr; grid-template-rows: auto auto; gap: 14px; }
.fx-quote { display: flex; flex-direction: column; padding: clamp(26px, 3vw, 38px); border-radius: var(--fx-r-xl); background: var(--fx-zand); }
.fx-quote--groot { grid-row: 1 / span 2; background: linear-gradient(160deg, var(--fx-perzik), var(--fx-perzik-2)); position: relative; overflow: hidden; justify-content: space-between; }
.fx-quote--groot::before { content: ''; position: absolute; inset: auto -20% -50% 20%; height: 90%; background: radial-gradient(closest-side, rgba(255, 143, 71, 0.45), transparent); }
.fx-quote > * { position: relative; }
.fx-quote-resultaat { font-family: var(--fx-display); font-weight: 800; font-size: 1.3rem; letter-spacing: -0.01em; color: var(--fx-oranje-tekst); }
.fx-quote--groot .fx-quote-resultaat { color: var(--fx-oranje-tekst); font-size: clamp(2rem, 3.6vw, 3rem); line-height: 1.02; max-width: 12ch; }
.fx-quote blockquote { margin: 14px 0 26px; font-size: 1.1rem; line-height: 1.5; font-weight: 500; }
.fx-quote--groot blockquote { font-size: clamp(1.2rem, 1.8vw, 1.5rem); line-height: 1.4; margin-top: 48px; }
.fx-quote figcaption { margin-top: auto; display: flex; align-items: center; gap: 12px; }
.fx-quote figcaption b { display: block; } .fx-quote figcaption small { color: var(--fx-ink-2); font-size: 0.9rem; }
.fx-quote--groot .fx-avatar { background: var(--fx-verloop); color: var(--fx-ink); }

/* ---------- Vragen ---------- */
.fx-vragen { padding: 112px 0; background: var(--fx-zand); }
.fx-vragen-raster { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.fx-vragen .fx-kop { margin: 0; position: sticky; top: 120px; }
.fx-vragen .fx-kop h2 { font-size: clamp(1.9rem, 3.4vw, 2.9rem); }
.fx-vragen-lijst { display: grid; gap: 10px; }
.fx-vraag { background: var(--fx-wit); border-radius: var(--fx-r-m); box-shadow: inset 0 0 0 1px var(--fx-lijn); transition: box-shadow 0.3s var(--fx-ease); }
.fx-vraag.active { box-shadow: inset 0 0 0 1.5px var(--fx-oranje), var(--fx-schaduw-s); }
.fx-vraag .faq-question { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; text-align: left; padding: 22px 24px; border: 0; background: none; font-family: var(--fx-display); font-weight: 700; font-size: 1.22rem; letter-spacing: -0.01em; }
.fx-vraag .faq-question .fx-i { width: 34px; height: 34px; padding: 8px; border-radius: 50%; background: var(--fx-zand); transition: transform 0.4s var(--fx-ease), background-color 0.3s; }
.fx-vraag.active .faq-question .fx-i { transform: rotate(45deg); background: var(--fx-oranje); }
.fx-vraag .faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.45s var(--fx-ease); }
.fx-antwoord { padding: 0 24px 24px; color: var(--fx-ink-2); max-width: 64ch; }

/* ---------- Slot ---------- */
.fx-slot { padding: 120px 0; }
.fx-slot-vlak { position: relative; overflow: hidden; text-align: center; padding: clamp(48px, 8vw, 104px) clamp(24px, 5vw, 72px); border-radius: var(--fx-r-xl); background: var(--fx-verloop); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.45), 0 60px 100px -50px rgba(255, 106, 18, 0.95); }
.fx-slot-vlak::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, 0.16) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.16) 1px, transparent 1px); background-size: 56px 56px; -webkit-mask-image: radial-gradient(60% 80% at 50% 0%, #000, transparent); mask-image: radial-gradient(60% 80% at 50% 0%, #000, transparent); }
.fx-slot-vlak::after { content: ''; position: absolute; inset: -50% 20% auto 20%; height: 100%; background: radial-gradient(closest-side, rgba(255, 255, 255, 0.5), transparent); }
.fx-slot-vlak > * { position: relative; z-index: 1; }
.fx-slot-vlak h2 { font-size: clamp(2.2rem, 5.2vw, 4.4rem); line-height: 0.99; letter-spacing: -0.03em; max-width: 17ch; margin-inline: auto; }
.fx-slot-vlak p { margin: 22px auto 34px; font-size: 1.2rem; font-weight: 500; max-width: 46ch; }

/* ---------- Footer ---------- */
.fx-footer { background: var(--fx-donker); color: var(--fx-op-donker); padding: 80px 0 40px; }
.fx-footer-raster { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; }
.fx-logo--footer img { height: 46px; width: auto; }
.fx-footer-merk p { margin-top: 18px; color: var(--fx-op-donker-2); max-width: 32ch; }
.fx-footer h4 { font-family: var(--fx-body); font-size: 0.92rem; font-weight: 700; color: var(--fx-op-donker-2); margin: 0 0 16px; }
.fx-footer li + li { margin-top: 10px; }
.fx-footer a { transition: color 0.2s; }
.fx-footer li a:hover, .fx-footer-powered a:hover { color: var(--fx-oranje-licht); }
.fx-footer-onder { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-top: 56px; padding-top: 28px; border-top: 1px solid rgba(255, 255, 255, 0.12); color: var(--fx-op-donker-2); font-size: 0.92rem; }
.fx-footer-onder span { margin-left: 12px; }
.fx-footer-socials { display: flex; gap: 8px; }
.fx-footer-socials a { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; background: rgba(255, 255, 255, 0.07); color: var(--fx-op-donker); }
.fx-footer-socials a:hover { background: var(--fx-oranje); color: var(--fx-ink); }
.fx-footer-powered { margin-top: 24px !important; text-align: center; color: var(--fx-op-donker-2); font-size: 0.85rem; }
.fx-footer-powered a { color: var(--fx-op-donker); font-weight: 700; }

.fx-omhoog { position: fixed; left: 20px; bottom: 20px; z-index: 60; width: 46px; height: 46px; border-radius: 14px; border: 0; background: var(--fx-ink); color: #fff !important; display: grid; place-items: center; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity 0.3s, transform 0.3s var(--fx-ease), visibility 0.3s; }
.fx-omhoog.visible, .fx-omhoog.show, .fx-omhoog.active { opacity: 1; visibility: visible; transform: none; }
.fx-balk { display: none; }

/* ---------- Verschijnen bij scrollen ---------- */
.fx-js [data-toon] { opacity: 0; transform: translateY(28px); transition: opacity 0.9s var(--fx-ease), transform 0.9s var(--fx-ease); }
.fx-js [data-toon].is-zichtbaar { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .fx *, .fx *::before, .fx *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .fx-js [data-toon] { opacity: 1; transform: none; }
}

/* ---------- Tablet ---------- */
@media (max-width: 1100px) {
  .fx-menu .nav-link { padding: 10px 9px; font-size: 0.93rem; }
  .fx-modules { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .fx-modules li { grid-column: span 2; } .fx-modules li:nth-child(n+4) { grid-column: span 3; }
  .fx-wie-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fx-cijfers { grid-template-columns: repeat(3, minmax(0, 1fr)); } .fx-cijfer--groot { grid-column: 1 / -1; min-height: 0; }
  .fx-podium { height: 480px; } .fx-scherm--chat { width: 290px; } .fx-scherm--bel { width: 310px; } .fx-scherm--dash { width: 380px; margin-left: -190px; }
}

/* ---------- Telefoon ---------- */
@media (max-width: 900px) {
  .fx-burger { display: block; }
  .fx-nav-cta, .fx-nav-acties > a.fx-nav-icoon { display: none; }
  .fx-menu {
    position: fixed; inset: 84px 14px auto 14px; margin: 0 !important;
    flex-direction: column; align-items: stretch; gap: 2px;
    background: var(--fx-wit); border: 1px solid var(--fx-lijn); border-radius: var(--fx-r-l); box-shadow: var(--fx-schaduw-l);
    padding: 12px !important; max-height: calc(100dvh - 180px); overflow-y: auto;
    opacity: 0; visibility: hidden; transform: translateY(-10px); transition: opacity 0.25s, transform 0.35s var(--fx-ease), visibility 0.25s;
  }
  .fx-menu.open { opacity: 1; visibility: visible; transform: none; }
  .fx-menu .nav-link { padding: 14px 14px; font-size: 1.08rem; justify-content: space-between; }
  .dropdown-menu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; padding: 0 0 0 12px !important; display: none; }
  .nav-dropdown.open .dropdown-menu { display: block; }
  .nav-dropdown:hover .dropdown-menu { transform: none; }
}
@media (max-width: 768px) {
  body.fx { font-size: 16px; padding-bottom: 58px; }
  .fx-wrap { width: min(1200px, 100% - 36px); }
  .fx-hero { padding-top: 124px; }
  .fx-hero-knoppen { flex-direction: column; align-items: stretch; }
  .fx-podium { height: auto; margin-top: 52px; padding: 24px 14px 0; display: grid; gap: 14px; }
  .fx-podium-vloer { inset: 0; border-radius: var(--fx-r-l) var(--fx-r-l) 0 0; }
  .fx-scherm { position: relative; inset: auto; width: auto !important; margin: 0 !important; transform: none !important; padding: 18px; }
  .fx-scherm--dash { order: 2; } .fx-scherm--bel { order: 1; } .fx-scherm--chat { display: none; }
  .fx-scherm--dash { border-radius: var(--fx-r-l) var(--fx-r-l) 0 0; }
  .fx-statement { padding: 80px 0; }
  .fx-werk, .fx-verschil, .fx-case, .fx-roi, .fx-klanten, .fx-vragen, .fx-slot { padding-top: 76px; padding-bottom: 76px; }
  .fx-wie { padding: 76px 0 40px; } .fx-tools { padding: 40px 0 76px; } .fx-aanpak { padding-bottom: 76px; }
  .fx-stappen { grid-template-columns: minmax(0, 1fr); } .fx-stappen::before { display: none; } .fx-stappen li { padding: 26px; } .fx-stappen li.is-kern { transform: none; } .fx-stappen h3 { margin-top: 20px; }
  .fx-kop { margin-bottom: 36px; }
  .fx-tabs-lijst { margin-inline: 0; width: auto; }
  .fx-paneel { grid-template-columns: minmax(0, 1fr); border-radius: var(--fx-r-l); }
  .fx-paneel-beeld { order: -1; }
  .fx-modules { grid-template-columns: minmax(0, 1fr); } .fx-modules li, .fx-modules li:nth-child(n+4) { grid-column: auto; }
  .fx-modules a { display: grid; grid-template-columns: auto 1fr; column-gap: 16px; align-items: start; padding: 20px; }
  .fx-modules h3 { margin-top: 2px; } .fx-modules p { grid-column: 2; margin-bottom: 12px; } .fx-module-icoon { grid-row: 1 / span 2; } .fx-module-cijfer { grid-column: 2; }
  .fx-verschil-raster, .fx-roi-raster, .fx-vragen-raster, .fx-quotes { grid-template-columns: minmax(0, 1fr); }
  .fx-quote--groot { grid-row: auto; } .fx-quote--groot blockquote { margin-top: 24px; }
  .fx-cijfers { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fx-cijfer { min-height: 0; padding: 22px; } .fx-cijfer:last-child { grid-column: 1 / -1; }
  .fx-wie-raster { grid-template-columns: minmax(0, 1fr); }
  .fx-vragen .fx-kop { position: static; }
  .fx-reken-uit { grid-template-columns: 1fr 1fr; } .fx-reken-uit .fx-reken-jaar { grid-column: 1 / -1; }
  .fx-rapport-rij { flex-direction: column; }
  .fx-footer-raster { grid-template-columns: 1fr 1fr; gap: 32px 24px; } .fx-footer-merk { grid-column: 1 / -1; }
  .fx-omhoog { display: none; }
  .fx-balk { display: grid; grid-template-columns: 1fr 1fr 1.2fr; position: fixed; inset: auto 0 0 0; z-index: 90; background: var(--fx-donker); padding-bottom: env(safe-area-inset-bottom); }
  .fx-balk a { display: grid; place-items: center; min-height: 58px; color: #fff; font-weight: 700; font-size: 0.98rem; }
  .fx-balk a.is-hoofd { background: var(--fx-verloop); color: var(--fx-ink); }
}

/* ========================================
   Verfijning per sectie (5 okt 2026)
   ======================================== */

/* ---------- Hero ---------- */
.fx-hero h1 { max-width: none; font-size: clamp(2.5rem, 5.5vw, 4.9rem); }
.fx-regel { display: block; }
.fx-accent { position: relative; color: var(--fx-oranje-diep); padding-bottom: 0.08em; }
.fx-accent::after { content: ''; position: absolute; left: 0; right: 0; bottom: -0.02em; height: 0.09em; border-radius: 99px; background: var(--fx-verloop); transform-origin: left; animation: fx-streep 1.1s 0.9s var(--fx-ease) both; }
@keyframes fx-streep { from { transform: scaleX(0); } }
.fx-zeker { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px 28px; margin-top: 28px; font-size: 0.95rem; font-weight: 500; color: var(--fx-ink-2); }
.fx-zeker li { position: relative; padding-left: 26px; }
.fx-zeker li::before { content: ''; position: absolute; left: 0; top: 50%; width: 18px; height: 18px; margin-top: -9px; border-radius: 50%; background: var(--fx-groen-licht) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f6f50' stroke-width='3.500' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center / 11px no-repeat; }
.fx-zeker span { font-weight: 700; color: var(--fx-ink); }

.fx-hero .fx-pil, .fx-hero h1, .fx-hero-sub, .fx-hero-knoppen, .fx-zeker { animation: fx-op 0.9s var(--fx-ease) both; }
.fx-hero h1 { animation-delay: 0.08s; } .fx-hero-sub { animation-delay: 0.16s; } .fx-hero-knoppen { animation-delay: 0.24s; } .fx-zeker { animation-delay: 0.32s; }
@keyframes fx-op { from { opacity: 0; transform: translateY(22px); } }

.fx-podium { margin-top: 64px; height: 540px; }
.fx-podium-vloer { inset: 90px 0 0 0; }
.fx-scherm--dash { animation: fx-zweven 7s ease-in-out infinite; }
.fx-scherm--chat { animation: fx-zweven-l 8s ease-in-out -2s infinite; }
.fx-scherm--bel { animation: fx-zweven-r 9s ease-in-out -4s infinite; }
@keyframes fx-zweven { 50% { transform: translateY(-10px); } }
@keyframes fx-zweven-l { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(-2deg) translateY(-12px); } }
@keyframes fx-zweven-r { 0%, 100% { transform: rotate(3deg); } 50% { transform: rotate(2deg) translateY(-12px); } }
.fx-podium:hover .fx-scherm--chat, .fx-podium:hover .fx-scherm--bel { transform: none; }
.fx-staven i { transform-origin: bottom; animation: fx-groei 1.1s var(--fx-ease) both; }
.fx-staven i:nth-child(2) { animation-delay: 0.06s; } .fx-staven i:nth-child(3) { animation-delay: 0.12s; } .fx-staven i:nth-child(4) { animation-delay: 0.18s; } .fx-staven i:nth-child(5) { animation-delay: 0.24s; } .fx-staven i:nth-child(6) { animation-delay: 0.3s; } .fx-staven i:nth-child(7) { animation-delay: 0.36s; }
.fx-js .fx-podium:not(.is-zichtbaar) .fx-staven i { animation-play-state: paused; }
@keyframes fx-groei { from { transform: scaleY(0.08); } }
.fx-zweef { position: absolute; z-index: 4; display: flex; align-items: center; gap: 10px; text-align: left; padding: 10px 16px 10px 10px; border-radius: 16px; background: rgba(255, 255, 255, 0.92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: var(--fx-schaduw-m); animation: fx-zweven 6s ease-in-out infinite; }
.fx-zweef b { display: block; font-size: 0.86rem; line-height: 1.2; } .fx-zweef small { display: block; font-size: 0.76rem; color: var(--fx-ink-2); }
.fx-zweef-icoon { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--fx-verloop); color: var(--fx-ink); flex: none; }
.fx-zweef--a { left: 6%; top: 44px; animation-delay: -1.5s; }
.fx-zweef--b { right: 5%; top: 30px; animation-delay: -3.5s; }

/* ---------- Statement: woorden lichten op tijdens scrollen ---------- */
.fx-statement { padding: 150px 0 130px; }
.fx-statement-tekst { font-size: clamp(2rem, 5vw, 4.6rem); max-width: 19ch; }
.fx-statement-tekst .fx-woord { color: rgba(26, 20, 16, 0.16); transition: color 0.5s var(--fx-ease); }
.fx-statement-tekst .fx-woord.is-aan { color: var(--fx-ink); }
.fx-statement-tekst .fx-woord--accent.is-aan { color: var(--fx-oranje-diep); }

/* ---------- Tabbladen ---------- */
.fx-tab { display: inline-flex; align-items: center; gap: 9px; padding: 13px 20px; }
.fx-tab .fx-i { color: var(--fx-ink-3); transition: color 0.25s; }
.fx-tab[aria-selected="true"] .fx-i { color: var(--fx-oranje-diep); }
.fx-paneel { min-height: 540px; box-shadow: inset 0 0 0 1px var(--fx-lijn), 0 40px 90px -50px rgba(26, 20, 16, 0.45); }
.fx-paneel-beeld { overflow: hidden; }
.fx-paneel-beeld::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(184, 60, 6, 0.22) 1px, transparent 1.4px); background-size: 22px 22px; -webkit-mask-image: radial-gradient(70% 70% at 30% 70%, #000, transparent); mask-image: radial-gradient(70% 70% at 30% 70%, #000, transparent); }
.fx-paneel-beeld::after { content: ''; position: absolute; width: 380px; height: 380px; right: -120px; top: -140px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, 0.75), transparent); }
.fx-kaart-beeld { position: relative; z-index: 1; transform: rotate(-1.5deg); transition: transform 0.6s var(--fx-ease); }
.fx-paneel:hover .fx-kaart-beeld { transform: rotate(0deg) translateY(-4px); }
.fx-paneel-chip { position: absolute; z-index: 2; right: clamp(16px, 4vw, 44px); bottom: clamp(16px, 4vw, 40px); display: flex; align-items: baseline; gap: 8px; padding: 12px 18px; border-radius: 16px; background: var(--fx-ink); color: #fff; font-size: 0.88rem; box-shadow: var(--fx-schaduw-m); animation: fx-zweven 6s ease-in-out infinite; }
.fx-paneel-chip b { font-family: var(--fx-display); font-weight: 800; font-size: 1.35rem; color: var(--fx-oranje-licht); }

.fx-modules a { position: relative; overflow: hidden; }
.fx-modules a::before, .fx-wie-raster a::before, .fx-cijfer:not(.fx-cijfer--groot)::before, .fx-quote::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%), rgba(255, 143, 71, 0.22), transparent 70%); opacity: 0; transition: opacity 0.4s; pointer-events: none; }
.fx-modules a:hover::before, .fx-wie-raster a:hover::before, .fx-cijfer:hover::before, .fx-quote:hover::after { opacity: 1; }
.fx-modules a > * { position: relative; }
.fx-module-pijl { position: absolute !important; right: 20px; top: 24px; width: 30px; height: 30px; padding: 7px; border-radius: 50%; background: var(--fx-zand); color: var(--fx-ink); opacity: 0; transform: translate(-6px, 6px); transition: opacity 0.35s, transform 0.45s var(--fx-ease), background-color 0.3s; }
.fx-modules a:hover .fx-module-pijl { opacity: 1; transform: none; background: var(--fx-oranje); }

/* ---------- Aanpak ---------- */
.fx-aanpak { padding-top: 24px; }
.fx-stappen li { padding: 34px; transition: transform 0.5s var(--fx-ease), box-shadow 0.5s var(--fx-ease); }
.fx-stappen li:not(.is-kern):hover { transform: translateY(-6px); }
.fx-stappen::before { top: 61px; background: repeating-linear-gradient(90deg, var(--fx-oranje) 0 8px, transparent 8px 16px); height: 2px; opacity: 0.55; }
.fx-stap-icoon { position: absolute; right: 30px; top: 34px; width: 54px; height: 54px; display: grid; place-items: center; font-size: 1.5rem; color: var(--fx-oranje-tekst); opacity: 0.9; }
.fx-stappen li { background: linear-gradient(180deg, var(--fx-zand), #fbf8f4); }
.fx-stappen li.is-kern { background: var(--fx-wit); }
.fx-stap-chip { display: inline-flex; align-items: center; gap: 6px; margin-top: 18px !important; padding: 8px 14px; border-radius: 999px; background: var(--fx-groen-licht); color: var(--fx-groen) !important; font-weight: 700; font-size: 0.9rem !important; }

/* ---------- Zonder / met ---------- */
.fx-verschil-raster { position: relative; }
.fx-versus { position: absolute; left: 45%; top: 50%; z-index: 2; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%; display: grid; place-items: center; background: var(--fx-ink); color: #fff; font-size: 1.2rem; box-shadow: 0 0 0 8px var(--fx-zand), var(--fx-schaduw-m); }
.fx-zonder li { text-decoration: line-through; text-decoration-color: rgba(26, 20, 16, 0.28); text-decoration-thickness: 1.5px; }
.fx-met { transform: rotate(0.6deg); transition: transform 0.6s var(--fx-ease); }
.fx-met:hover { transform: rotate(0deg) translateY(-4px); }
.fx-met h3 { font-size: 2rem; }
.fx-met li { font-weight: 700; }

/* ---------- Case ---------- */
.fx-cijfer { position: relative; overflow: hidden; transition: transform 0.5s var(--fx-ease), box-shadow 0.5s var(--fx-ease); }
.fx-cijfer:hover { transform: translateY(-6px); box-shadow: var(--fx-schaduw-m); }
.fx-cijfer > * { position: relative; }
.fx-cijfer--groot { flex-direction: column; justify-content: flex-start; }
.fx-cijfer--groot dd { order: -1; }
.fx-voorna { margin-top: auto; padding-top: 22px; display: grid; gap: 10px; font-size: 0.86rem; font-weight: 700; color: var(--fx-ink); }
.fx-voorna span { display: grid; grid-template-columns: 1fr; gap: 5px; }
.fx-voorna i { display: block; height: 12px; border-radius: 99px; background: rgba(26, 20, 16, 0.22); transform-origin: left; }
.fx-voorna-nu i { width: 25%; background: var(--fx-ink); }
.fx-js .fx-cijfers .fx-voorna i { transform: scaleX(0); transition: transform 1.2s 0.3s var(--fx-ease); }
.fx-js .fx-cijfers.is-zichtbaar .fx-voorna i { transform: none; }

/* ---------- Voor wie ---------- */
.fx-wie-raster a { overflow: hidden; padding-top: 30px; }
.fx-wie-raster a > * { position: relative; }
.fx-wie-icoon { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; margin-bottom: 44px; background: var(--fx-wit); color: var(--fx-oranje-tekst); font-size: 1.3rem; box-shadow: var(--fx-schaduw-s); transition: background 0.4s, color 0.4s, transform 0.5s var(--fx-ease); }
.fx-wie-raster a:hover .fx-wie-icoon { background: var(--fx-verloop); color: var(--fx-ink); transform: rotate(-6deg) scale(1.06); }
.fx-wie-raster .fx-pijl { position: absolute; }

/* ---------- Koppelingen ---------- */
.fx-band { display: grid; gap: 18px; }
.fx-band-spoor--terug { animation-direction: reverse; animation-duration: 70s; }
.fx-band-spoor img { transition: filter 0.3s, opacity 0.3s, transform 0.4s var(--fx-ease); }
.fx-band-spoor img:hover { filter: none; opacity: 1; transform: translateY(-4px); }

/* ---------- ROI ---------- */
.fx-reken input[type="range"]::-webkit-slider-runnable-track { background: linear-gradient(90deg, var(--fx-oranje) var(--vul, 16%), var(--fx-perzik-2) var(--vul, 16%)); }
.fx-reken input[type="range"]::-moz-range-progress { height: 8px; border-radius: 99px; background: var(--fx-oranje); }
.fx-reken { position: relative; }
.fx-reken::before { content: ''; position: absolute; inset: -18px 30px auto 30px; height: 60px; z-index: -1; border-radius: var(--fx-r-xl); background: rgba(255, 255, 255, 0.55); }
.fx-roi-raster { position: relative; z-index: 0; }

/* ---------- Klanten ---------- */
.fx-quote { position: relative; overflow: hidden; transition: transform 0.5s var(--fx-ease), box-shadow 0.5s var(--fx-ease); }
.fx-quote:hover { transform: translateY(-4px); box-shadow: var(--fx-schaduw-m); }
.fx-sterren { display: flex; gap: 3px; color: var(--fx-oranje); font-size: 1.05rem; margin-bottom: 16px !important; }
.fx-quote--groot blockquote { margin-top: 32px; }
.fx-quote--groot::after { z-index: 0; }

/* ---------- Vragen ---------- */
.fx-vraag { transition: box-shadow 0.3s var(--fx-ease), transform 0.4s var(--fx-ease); }
.fx-vraag:hover { transform: translateX(4px); }

/* ---------- Slot ---------- */
.fx-slot-vlak p.fx-slot-of { margin: 22px auto 0; font-size: 1rem; font-weight: 500; }
.fx-slot-of a { font-weight: 700; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
.fx-slot-of a:hover { text-decoration-color: #fff; }

/* ---------- Verschijnen: kinderen na elkaar ---------- */
.fx-js :is(.fx-modules, .fx-stappen, .fx-wie-raster, .fx-cijfers, .fx-quotes, .fx-vragen-lijst)[data-toon] { opacity: 1; transform: none; }
.fx-js :is(.fx-modules, .fx-stappen, .fx-wie-raster, .fx-cijfers, .fx-quotes, .fx-vragen-lijst)[data-toon]:not(.is-zichtbaar) > * { opacity: 0; }
.fx-js :is(.fx-modules, .fx-stappen, .fx-wie-raster, .fx-cijfers, .fx-quotes, .fx-vragen-lijst)[data-toon].is-zichtbaar > * { animation: fx-kind 0.8s var(--fx-ease) backwards; }
.fx-js [data-toon].is-zichtbaar > :nth-child(2) { animation-delay: 0.07s; } .fx-js [data-toon].is-zichtbaar > :nth-child(3) { animation-delay: 0.14s; } .fx-js [data-toon].is-zichtbaar > :nth-child(4) { animation-delay: 0.21s; } .fx-js [data-toon].is-zichtbaar > :nth-child(5) { animation-delay: 0.28s; }
@keyframes fx-kind { from { opacity: 0; translate: 0 28px; } }

@media (prefers-reduced-motion: reduce) {
  .fx-js [data-toon] > * { opacity: 1 !important; }
  .fx-statement-tekst .fx-woord { color: var(--fx-ink); } .fx-statement-tekst .fx-woord--accent { color: var(--fx-oranje-diep); }
  .fx-js .fx-cijfers .fx-voorna i { transform: none; }
}

@media (max-width: 1100px) {
  .fx-zweef--a { left: 1%; } .fx-zweef--b { right: 1%; }
  .fx-versus { left: 50%; }
}
@media (max-width: 768px) {
  .fx-regel { display: inline; }
  .fx-zeker { flex-direction: column; align-items: center; gap: 8px; }
  .fx-podium { height: auto; margin-top: 48px; }
  .fx-podium-vloer { inset: 0; }
  .fx-zweef { display: none; }
  .fx-scherm--dash, .fx-scherm--bel { animation: none; }
  .fx-statement { padding: 88px 0 72px; }
  .fx-paneel { min-height: 0; }
  .fx-kaart-beeld { transform: none; }
  .fx-paneel-chip { position: relative; right: auto; bottom: auto; margin-top: 14px !important; justify-self: end; animation: none; }
  .fx-paneel-beeld { place-items: stretch; }
  .fx-kaart-beeld { width: 100%; }
  .fx-versus { position: relative; left: auto; top: auto; margin: -10px auto; transform: rotate(90deg); box-shadow: 0 0 0 6px var(--fx-zand); }
  .fx-met { transform: none; }
  .fx-wie-icoon { margin-bottom: 22px; }
  .fx-module-pijl { display: none; }
  .fx-stap-icoon { right: 22px; top: 26px; }
  .fx-reken::before { display: none; }
}

/* ---------- Laatste correcties na controle op ware grootte ---------- */
.fx-hero { padding-bottom: 40px; }
.fx-podium { height: 500px; }
.fx-podium-vloer { inset: 90px 0 0 0; border-radius: var(--fx-r-xl); }
.fx-cijfer:not(.fx-cijfer--groot) { flex-direction: column; justify-content: space-between; }
.fx-reken::before { display: none; }
.fx-roi-kop { font-weight: 700 !important; }
@media (max-width: 768px) {
  .fx-hero { padding-bottom: 0; }
  .fx-podium { height: auto; }
  .fx-podium-vloer { inset: 0; border-radius: var(--fx-r-l) var(--fx-r-l) 0 0; }
}

/* ========================================
   Afwerkronde: werking en detail per sectie
   ======================================== */
[id] { scroll-margin-top: 110px; }

/* ---------- Navigatie: uitklapmenu met iconen ---------- */
.dropdown-menu { min-width: 320px; padding: 10px !important; }
.dropdown-menu a { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 12px; }
.dropdown-menu a b { display: block; font-weight: 700; font-size: 0.97rem; line-height: 1.25; }
.dropdown-menu a small { display: block; font-size: 0.83rem; color: var(--fx-ink-2); font-weight: 400; }
.fx-menu-icoon { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: var(--fx-perzik); color: var(--fx-oranje-tekst); flex: none; transition: background 0.25s, color 0.25s, transform 0.4s var(--fx-ease); }
.dropdown-menu a:hover { background: var(--fx-zand); color: inherit; }
.dropdown-menu a:hover .fx-menu-icoon { background: var(--fx-verloop); color: var(--fx-ink); transform: scale(1.06); }
.dropdown-menu li:first-child a { background: var(--fx-zand); margin-bottom: 4px; }
.fx-menu .dropdown-toggle .fx-i { transition: transform 0.3s var(--fx-ease); }
.nav-dropdown:hover .dropdown-toggle .fx-i, .nav-dropdown.open .dropdown-toggle .fx-i { transform: rotate(180deg); }
.fx-menu-cta { display: none; }
.fx-nav.scrolled .fx-nav-in { padding-block: 7px; }
.fx-nav-in { transition: box-shadow 0.3s var(--fx-ease), background-color 0.3s var(--fx-ease), padding 0.3s var(--fx-ease); }

/* ---------- Hero: levend podium ---------- */
.fx-podium:hover .fx-scherm, .fx-podium:hover .fx-zweef { animation-play-state: paused; }
.fx-scherm, .fx-zweef { translate: calc(var(--px, 0) * var(--diepte, 10px)) calc(var(--py, 0) * var(--diepte, 10px)); transition: translate 0.5s var(--fx-ease), transform 0.6s var(--fx-ease); }
.fx-scherm--dash { --diepte: 8px; } .fx-scherm--chat { --diepte: -16px; } .fx-scherm--bel { --diepte: 18px; } .fx-zweef--a { --diepte: -26px; } .fx-zweef--b { --diepte: 28px; }
.fx-typ { position: absolute; right: 22px; display: inline-flex; gap: 4px; margin-top: 12px; padding: 10px 12px; border-radius: 14px; background: var(--fx-ink); opacity: 0; }
.fx-typ i { width: 6px; height: 6px; border-radius: 50%; background: #fff; animation: fx-typ 1s ease-in-out infinite; }
.fx-typ i:nth-child(2) { animation-delay: 0.15s; } .fx-typ i:nth-child(3) { animation-delay: 0.3s; }
@keyframes fx-typ { 0%, 60%, 100% { opacity: 0.35; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }
.is-zichtbaar .fx-scherm--chat .fx-bel--klant, .fx-paneel:not([hidden]) .fx-bel--klant { animation: fx-bel 0.6s 0.5s var(--fx-ease) backwards; }
.is-zichtbaar .fx-scherm--chat .fx-typ, .fx-paneel:not([hidden]) .fx-typ { animation: fx-typ-zicht 1.5s 1.1s linear both; }
.is-zichtbaar .fx-scherm--chat .fx-bel--ai, .fx-paneel:not([hidden]) .fx-bel--ai { animation: fx-bel 0.6s 2.6s var(--fx-ease) backwards; }
.fx-js .fx-podium:not(.is-zichtbaar) .fx-scherm--chat .fx-bel { opacity: 0; }
@keyframes fx-bel { from { opacity: 0; transform: translateY(10px) scale(0.96); } }
@keyframes fx-typ-zicht { 0% { opacity: 0; } 12%, 88% { opacity: 1; } 100% { opacity: 0; } }
.fx-kaart-beeld { position: relative; }
[data-fx-klok] { font-variant-numeric: tabular-nums; }

/* ---------- Tabbladen: automatisch doorlopen ---------- */
.fx-tab { position: relative; overflow: hidden; }
.fx-tab::after { content: ''; position: absolute; left: 14px; right: 14px; bottom: 5px; height: 3px; border-radius: 3px; background: var(--fx-verloop); transform: scaleX(0); transform-origin: left; }
.fx-tabs.is-lopend .fx-tab[aria-selected="true"]::after { animation: fx-tabtijd var(--fx-tabduur, 7s) linear forwards; }
.fx-tabs.is-lopend.is-pauze .fx-tab[aria-selected="true"]::after { animation-play-state: paused; }
@keyframes fx-tabtijd { to { transform: scaleX(1); } }
.fx-paneel:not([hidden]) .fx-balken i::after { animation: fx-vul 1.2s 0.3s var(--fx-ease) backwards; }
.fx-paneel:not([hidden]) .fx-balken li:nth-child(2) i::after { animation-delay: 0.45s; } .fx-paneel:not([hidden]) .fx-balken li:nth-child(3) i::after { animation-delay: 0.6s; }
@keyframes fx-vul { from { width: 0; } }
.fx-paneel:not([hidden]) .fx-taken li { animation: fx-bel 0.6s var(--fx-ease) backwards; }
.fx-paneel:not([hidden]) .fx-taken li:nth-child(1) { animation-delay: 0.4s; } .fx-paneel:not([hidden]) .fx-taken li:nth-child(2) { animation-delay: 0.75s; } .fx-paneel:not([hidden]) .fx-taken li:nth-child(3) { animation-delay: 1.1s; }
.fx-paneel:not([hidden]) .fx-groot-cijfer b { animation: fx-bel 0.7s 0.15s var(--fx-ease) backwards; }

/* ---------- Aanpak: lijn tekent zich ---------- */
.fx-js .fx-stappen::before { transform: scaleX(0); transform-origin: left; transition: transform 1.4s 0.3s var(--fx-ease); }
.fx-js .fx-stappen.is-zichtbaar::before { transform: none; }

/* ---------- Zonder / met: vinkjes na elkaar ---------- */
.fx-js .fx-verschil-raster .fx-met li::before { transform: scale(0); transition: transform 0.6s var(--fx-ease); }
.fx-js .fx-verschil-raster.is-zichtbaar .fx-met li::before { transform: none; }
.fx-verschil-raster .fx-met li:nth-child(1)::before { transition-delay: 0.5s; } .fx-verschil-raster .fx-met li:nth-child(2)::before { transition-delay: 0.65s; } .fx-verschil-raster .fx-met li:nth-child(3)::before { transition-delay: 0.8s; } .fx-verschil-raster .fx-met li:nth-child(4)::before { transition-delay: 0.95s; }

/* ---------- Case: citaat naast de kop ---------- */
.fx-case-kop { max-width: none; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); column-gap: clamp(32px, 6vw, 96px); align-items: end; }
.fx-case-kop h2, .fx-case-kop > p { grid-column: 1; }
.fx-case-citaat { grid-column: 2; grid-row: 1 / span 2; align-self: center; padding: 28px 30px; border-radius: var(--fx-r-l); background: rgba(255, 255, 255, 0.7); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: var(--fx-schaduw-s); position: relative; }
.fx-case-citaat::before { content: '\201C'; position: absolute; left: 24px; top: -6px; font-family: var(--fx-display); font-weight: 800; font-size: 5rem; line-height: 1; color: var(--fx-oranje); }
.fx-case-citaat blockquote { margin: 26px 0 0; font-family: var(--fx-display); font-weight: 700; font-size: clamp(1.25rem, 1.9vw, 1.6rem); line-height: 1.2; letter-spacing: -0.015em; }
.fx-case-citaat figcaption { margin-top: 14px; font-size: 0.92rem; font-weight: 700; color: var(--fx-oranje-tekst); }
[data-fx-tel] { font-variant-numeric: tabular-nums; }

/* ---------- ROI ---------- */
.fx-reken-schaal { display: flex; justify-content: space-between; margin: -4px 5.6ch 0 0 !important; padding-right: 18px; font-size: 0.78rem; color: var(--fx-ink-3); }
.fx-reken-noot { margin-top: 12px !important; font-size: 0.84rem; color: var(--fx-ink-2); }
.fx-reken-uit b.is-nieuw { animation: fx-tik 0.35s var(--fx-ease); }
@keyframes fx-tik { 50% { transform: scale(1.06); } }
.fx-reken-uit b { transform-origin: left center; }
.fx-reken input[type="range"]:focus-visible { outline: none; }
.fx-reken input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 5px rgba(255, 106, 18, 0.35); }
.fx-rapport button[disabled] { opacity: 0.7; cursor: progress; }

/* ---------- Vragen ---------- */
.fx-vragen-hulp { margin-top: 32px; padding: 22px; border-radius: var(--fx-r-l); background: var(--fx-wit); box-shadow: inset 0 0 0 1px var(--fx-lijn); }
.fx-vragen-hulp p { font-weight: 700; font-size: 1.05rem; }
.fx-vragen-hulp div { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.fx-vraag .faq-question { cursor: pointer; }

@media (prefers-reduced-motion: reduce) {
  .fx-scherm, .fx-zweef { translate: none; }
  .fx-typ { display: none; }
  .fx-js .fx-podium:not(.is-zichtbaar) .fx-scherm--chat .fx-bel { opacity: 1; }
  .fx-js .fx-stappen::before, .fx-js .fx-verschil-raster .fx-met li::before { transform: none; }
}
@media (max-width: 900px) {
  .dropdown-menu { min-width: 0; }
  .dropdown-menu li:first-child a { margin-bottom: 0; }
  .fx-menu-cta { display: block; margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--fx-lijn); }
  .fx-menu-cta .fx-btn { width: 100%; }
}
@media (max-width: 768px) {
  .fx-scherm, .fx-zweef { translate: none; }
  .fx-case-kop { grid-template-columns: minmax(0, 1fr); }
  .fx-case-citaat { grid-column: 1; grid-row: auto; margin-bottom: 28px; }
  .fx-vragen-hulp { margin-top: 24px; }
}
@media (max-width: 768px) {
  .fx-case-citaat { order: 3; margin: 28px 0 0; }
  .fx-vragen-hulp { display: none; }
}

/* ---------- Aanpak: iconen in een eigen vlak ---------- */
.fx-stap-icoon { right: 30px; top: 30px; width: 62px; height: 62px; border-radius: 20px; font-size: 1.65rem; opacity: 1; color: var(--fx-oranje-tekst); background: linear-gradient(150deg, #fff, var(--fx-perzik)); box-shadow: inset 0 0 0 1px rgba(184, 60, 6, 0.14), 0 14px 26px -14px rgba(255, 106, 18, 0.7); transition: transform 0.5s var(--fx-ease), background 0.4s, color 0.4s, box-shadow 0.4s; }
.fx-stap-icoon .fx-i { stroke-width: 1.8; }
.fx-stappen li:hover .fx-stap-icoon { transform: rotate(-8deg) scale(1.08); }
.fx-stappen li.is-kern .fx-stap-icoon { background: var(--fx-verloop); color: var(--fx-ink); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 16px 30px -12px rgba(255, 106, 18, 0.9); }
.fx-stappen li.is-kern .fx-stap-nr { background: var(--fx-wit); color: var(--fx-ink); box-shadow: inset 0 0 0 1.5px var(--fx-oranje), var(--fx-schaduw-s); }
.fx-stappen::before { top: 61px; left: 12%; right: 12%; }
@media (max-width: 768px) {
  .fx-stap-icoon { right: 22px; top: 22px; width: 54px; height: 54px; border-radius: 17px; font-size: 1.45rem; }
}
.fx-stappen li.is-kern .fx-stap-icoon { font-size: 1.85rem; }
.fx-stappen li.is-kern .fx-stap-icoon .fx-i { stroke-width: 2; }

/* ========================================
   Koppelingen: eigen sectie met groepen (vervangt de lopende logoband)
   ======================================== */
.fx-wie { padding-bottom: 120px; }
.fx-tools { padding: 0 0 120px; }
.fx-tools-vlak { position: relative; overflow: hidden; padding: clamp(36px, 5vw, 72px) clamp(20px, 4vw, 56px) clamp(24px, 4vw, 56px); border-radius: var(--fx-r-xl); background: var(--fx-zand); }
.fx-tools-vlak::before { content: ''; position: absolute; inset: -30% 15% auto 15%; height: 70%; background: radial-gradient(closest-side, rgba(255, 143, 71, 0.26), transparent); pointer-events: none; }
.fx-tools-vlak > * { position: relative; }
.fx-tools .fx-kop { margin-bottom: 44px; }
.fx-tools-raster { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.fx-tools-groep { grid-column: span 2; padding: 24px; border-radius: var(--fx-r-l); background: var(--fx-wit); box-shadow: var(--fx-schaduw-s); transition: transform 0.5s var(--fx-ease), box-shadow 0.5s var(--fx-ease); }
.fx-tools-groep--breed { grid-column: span 3; }
.fx-tools-groep:hover { transform: translateY(-4px); box-shadow: var(--fx-schaduw-m); }
.fx-tools-groep h3 { font-size: 1.2rem; letter-spacing: -0.01em; display: flex; align-items: center; gap: 10px; }
.fx-tools-groep h3::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--fx-oranje); box-shadow: 0 0 0 4px rgba(255, 106, 18, 0.18); flex: none; }
.fx-tools-groep ul { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.fx-tools-groep li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 13px 8px 10px; border-radius: 999px; background: var(--fx-zand); font-size: 0.92rem; font-weight: 500; transition: background-color 0.3s, transform 0.4s var(--fx-ease); }
.fx-tools-groep li:hover { background: var(--fx-perzik); transform: translateY(-2px); }
.fx-tools-groep img { width: 20px; height: 20px; flex: none; }
.fx-js .fx-tools-raster[data-toon] { opacity: 1; transform: none; }
.fx-js .fx-tools-raster[data-toon]:not(.is-zichtbaar) > * { opacity: 0; }
.fx-js .fx-tools-raster[data-toon].is-zichtbaar > * { animation: fx-kind 0.8s var(--fx-ease) backwards; }
@media (max-width: 1100px) {
  .fx-tools-groep, .fx-tools-groep--breed { grid-column: span 3; }
  .fx-tools-groep:last-child { grid-column: 1 / -1; }
}
@media (max-width: 768px) {
  .fx-wie { padding-bottom: 76px; }
  .fx-tools { padding: 0 0 76px; }
  .fx-tools .fx-wrap { width: min(1200px, 100% - 20px); }
  .fx-tools-vlak { border-radius: var(--fx-r-l); }
  .fx-tools .fx-kop { margin-bottom: 28px; }
  .fx-tools-raster { grid-template-columns: minmax(0, 1fr); }
  .fx-tools-groep, .fx-tools-groep--breed, .fx-tools-groep:last-child { grid-column: auto; padding: 20px; }
}

/* ---------- Aanpak staat nu direct na de openingszin ---------- */
.fx-statement { padding-bottom: 90px; }
.fx-aanpak { padding: 40px 0 40px; }
.fx-aanpak .fx-kop { margin-bottom: 64px; }
@media (max-width: 768px) {
  .fx-statement { padding-bottom: 56px; }
  .fx-aanpak { padding: 20px 0 20px; }
  .fx-aanpak .fx-kop { margin-bottom: 36px; }
}
@media (max-width: 768px) { .fx-hero h1 { line-height: 1.1; } }

/* ========================================
   Maatwerk voorop: wisselende hero-kaart, websites-tab, maatwerk-oproep
   ======================================== */

/* ---------- Hero: dashboard of website op maat ---------- */
.fx-scherm--dash header { gap: 12px; }
.fx-wissel-knoppen { display: inline-flex; gap: 3px; padding: 3px; border-radius: 11px; background: var(--fx-zand); margin-left: auto; }
.fx-wissel-knoppen button { border: 0; background: none; padding: 7px 11px; border-radius: 8px; font-size: 0.8rem; font-weight: 700; color: var(--fx-ink-2); white-space: nowrap; transition: background-color 0.3s var(--fx-ease), color 0.3s, box-shadow 0.3s; }
.fx-wissel-knoppen button.is-actief { background: var(--fx-wit); color: var(--fx-ink); box-shadow: var(--fx-schaduw-s); }
.fx-wissel { display: grid; }
.fx-wissel-beeld { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(8px) scale(0.985); transition: opacity 0.5s var(--fx-ease), transform 0.6s var(--fx-ease), visibility 0.5s; }
.fx-wissel-beeld.is-actief { opacity: 1; visibility: visible; transform: none; }
.fx-wissel-beeld .fx-kop-klein { margin-top: 16px !important; }
.fx-site-adres { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 10px; background: var(--fx-zand); font-size: 0.84rem; font-weight: 500; color: var(--fx-ink-2); }
.fx-site-adres span { width: 9px; height: 9px; border-radius: 50%; background: var(--fx-groen); flex: none; }
.fx-site-proef { margin-top: 10px; border-radius: 14px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--fx-lijn); }
.fx-site-proef-kop { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--fx-lijn); }
.fx-site-proef-kop b { width: 44px; height: 9px; border-radius: 3px; background: var(--fx-ink); margin-right: auto; }
.fx-site-proef-kop i { width: 26px; height: 6px; border-radius: 3px; background: #ddd4ca; }
.fx-site-proef-held { padding: 20px 14px 18px; background: var(--fx-verloop); display: grid; gap: 7px; justify-items: start; }
.fx-site-proef-held span { height: 12px; border-radius: 4px; background: var(--fx-ink); width: 78%; }
.fx-site-proef-held span + span { width: 52%; }
.fx-site-proef-held em { margin-top: 6px; width: 84px; height: 22px; border-radius: 7px; background: var(--fx-wit); }
.fx-site-proef-rij { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 12px; }
.fx-site-proef-rij i { height: 38px; border-radius: 8px; background: var(--fx-zand); }

/* ---------- Tabbladen: vijf stuks ---------- */
.fx-tabs-lijst { max-width: 100%; }
.fx-tab { padding: 13px 16px; }

/* ---------- Websites-tab: drie echte sites ---------- */
.fx-sites { position: relative; z-index: 1; width: min(100%, 430px); aspect-ratio: 1 / 0.92; }
.fx-site { position: absolute; margin: 0; border-radius: 16px; overflow: hidden; background: var(--fx-wit); box-shadow: var(--fx-schaduw-l); transition: transform 0.6s var(--fx-ease); }
.fx-site figcaption { display: flex; align-items: center; gap: 5px; padding: 9px 12px; background: var(--fx-wit); border-bottom: 1px solid var(--fx-lijn); font-size: 0.74rem; font-weight: 500; color: var(--fx-ink-2); }
.fx-site figcaption i { width: 7px; height: 7px; border-radius: 50%; background: #e0d7cd; }
.fx-site figcaption span { margin-left: 6px; }
.fx-site img { width: 100%; height: calc(100% - 34px); object-fit: cover; }
.fx-site--a { left: 0; top: 0; width: 66%; height: 62%; transform: rotate(-3deg); }
.fx-site--b { right: 0; top: 14%; width: 44%; height: 66%; transform: rotate(4deg); z-index: 1; }
.fx-site--b img { object-fit: contain; background: #fff; }
.fx-site--c { left: 10%; bottom: 0; width: 72%; height: 40%; transform: rotate(1.5deg); z-index: 2; }
.fx-paneel:hover .fx-site--a { transform: rotate(-1.5deg) translateY(-6px); }
.fx-paneel:hover .fx-site--b { transform: rotate(2deg) translateY(-8px); }
.fx-paneel:hover .fx-site--c { transform: rotate(0deg) translateY(-4px); }
.fx-paneel:not([hidden]) .fx-site { animation: fx-bel 0.7s var(--fx-ease) backwards; }
.fx-paneel:not([hidden]) .fx-site--b { animation-delay: 0.15s; } .fx-paneel:not([hidden]) .fx-site--c { animation-delay: 0.3s; }

/* ---------- Maatwerk-oproep onder de tabbladen ---------- */
.fx-maatwerk { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(28px, 5vw, 72px); align-items: center; margin-top: 20px; padding: clamp(28px, 4.4vw, 56px); border-radius: var(--fx-r-xl); background: var(--fx-verloop); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.4), 0 44px 80px -44px rgba(255, 106, 18, 0.9); }
.fx-maatwerk::before { content: ''; position: absolute; right: -120px; top: -160px; width: 460px; height: 460px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, 0.45), transparent); pointer-events: none; }
.fx-maatwerk > * { position: relative; }
.fx-maatwerk h3 { font-size: clamp(1.9rem, 3.6vw, 3rem); line-height: 1; letter-spacing: -0.025em; }
.fx-maatwerk-tekst p { margin: 16px 0 28px; font-size: 1.15rem; font-weight: 500; max-width: 46ch; }
.fx-maatwerk-stenen { padding: 24px; border-radius: var(--fx-r-l); background: rgba(255, 255, 255, 0.9); box-shadow: var(--fx-schaduw-m); }
.fx-maatwerk-stenen p { font-size: 0.92rem; font-weight: 700; color: var(--fx-ink-2); }
.fx-maatwerk-stenen ul { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.fx-maatwerk-stenen a { display: inline-flex; align-items: center; padding: 10px 14px; border-radius: 999px; background: var(--fx-zand); font-size: 0.93rem; font-weight: 700; transition: background-color 0.3s, color 0.3s, transform 0.4s var(--fx-ease); }
.fx-maatwerk-stenen a:hover { background: var(--fx-ink); color: #fff; transform: translateY(-2px); }

@media (max-width: 1100px) {
  .fx-wissel-knoppen button { padding: 6px 8px; font-size: 0.74rem; }
}
@media (max-width: 768px) {
  .fx-maatwerk { grid-template-columns: minmax(0, 1fr); border-radius: var(--fx-r-l); }
  .fx-maatwerk .fx-btn { width: 100%; }
  .fx-sites { width: 100%; aspect-ratio: 1 / 0.86; }
  .fx-wissel-knoppen button { padding: 7px 9px; font-size: 0.76rem; }
  .fx-scherm--dash header { flex-wrap: wrap; }
  .fx-scherm--dash .fx-venster { display: none; }
  .fx-wissel-knoppen { margin-left: 0; width: 100%; }
  .fx-wissel-knoppen button { flex: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .fx-wissel-beeld { transform: none; }
}
.fx-tab { flex: none; }

/* ========================================
   Hero-kaart: dashboard en website in detail
   ======================================== */
.fx-scherm--dash { width: 450px; margin-left: -225px; padding: 20px; }
.fx-scherm--dash header { padding-bottom: 14px; margin-bottom: 14px; }
.fx-scherm--dash .fx-voorbeeld { margin-top: 12px !important; text-align: right; }

/* --- Dashboard --- */
.fx-dash-kpi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.fx-dash-kpi p { padding: 12px 13px; border-radius: 14px; background: var(--fx-zand); display: grid; gap: 1px; }
.fx-dash-kpi p:first-child { background: var(--fx-ink); color: #fff; }
.fx-dash-kpi small { font-size: 0.72rem; font-weight: 700; color: var(--fx-ink-2); }
.fx-dash-kpi p:first-child small { color: #cfc4b9; }
.fx-dash-kpi b { font-family: var(--fx-display); font-weight: 800; font-size: 1.6rem; line-height: 1.1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.fx-dash-kpi p:first-child b { color: var(--fx-oranje-licht); }
.fx-dash-kpi em { font-style: normal; font-size: 0.72rem; color: var(--fx-ink-3); }
.fx-dash-kpi p:first-child em { color: #cfc4b9; }
.fx-dash-grafiek { margin-top: 8px; padding: 14px 14px 10px; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--fx-lijn); }
.fx-dash-titel { display: flex; align-items: center; justify-content: space-between; font-size: 0.8rem; font-weight: 700; }
.fx-dash-titel span { position: relative; padding-left: 14px; font-size: 0.72rem; color: var(--fx-groen); }
.fx-dash-titel span::before { content: ''; position: absolute; left: 0; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: var(--fx-groen); animation: fx-puls 2s ease-in-out infinite; }
.fx-dash-grafiek .fx-staven { height: 92px; gap: 10px; margin-top: 12px; padding-bottom: 20px; background: repeating-linear-gradient(to top, transparent 0 23px, var(--fx-lijn) 23px 24px) 0 20px / 100% calc(100% - 20px) no-repeat; background-position: 0 0; }
.fx-dash-grafiek .fx-staven i { position: relative; border-radius: 7px 7px 3px 3px; background: var(--fx-perzik-2); }
.fx-dash-grafiek .fx-staven i.is-nu { background: var(--fx-verloop); box-shadow: 0 10px 18px -8px rgba(255, 106, 18, 0.9); }
.fx-dash-grafiek .fx-staven u { position: absolute; left: 0; right: 0; bottom: -18px; text-align: center; text-decoration: none; font-style: normal; font-size: 0.66rem; font-weight: 500; color: var(--fx-ink-3); }
.fx-dash-grafiek .fx-staven i.is-nu u { color: var(--fx-ink); font-weight: 700; }
.fx-dash-agents { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 8px; }
.fx-dash-agents li { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 2px 8px; padding: 9px 10px; border-radius: 14px; background: var(--fx-zand); font-size: 0.84rem; font-weight: 700; }
.fx-dash-agents .fx-scherm-icoon { grid-row: 1 / span 2; width: 30px; height: 30px; border-radius: 9px; background: var(--fx-wit); font-size: 0.85rem; }
.fx-dash-agents em { font-style: normal; font-size: 0.68rem; font-weight: 500; color: var(--fx-ink-3); position: relative; padding-left: 11px; }
.fx-dash-agents em::before { content: ''; position: absolute; left: 0; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: #c9bfb4; }
.fx-dash-agents em.is-aan { color: var(--fx-groen); }
.fx-dash-agents em.is-aan::before { background: var(--fx-groen); }

/* --- Website --- */
.fx-site-adres { gap: 8px; padding: 8px 12px; border-radius: 999px; font-size: 0.82rem; color: var(--fx-ink); }
.fx-site-adres .fx-i { width: 13px; height: 13px; color: var(--fx-groen); }
.fx-site-adres span { width: auto; height: auto; margin-left: auto; padding: 3px 9px; border-radius: 999px; background: var(--fx-wit); font-size: 0.68rem; font-weight: 700; color: var(--fx-oranje-tekst); }
.fx-site-proef { position: relative; margin-top: 8px; border-radius: 16px; box-shadow: inset 0 0 0 1px var(--fx-lijn), var(--fx-schaduw-s); background: var(--fx-wit); }
.fx-site-proef-kop { padding: 10px 14px; gap: 10px; }
.fx-site-proef-kop b { width: 22px; height: 22px; border-radius: 7px; background: var(--fx-verloop); }
.fx-site-proef-kop i { width: 30px; height: 6px; }
.fx-site-proef-kop em { font-style: normal; font-size: 0.66rem; font-weight: 700; padding: 5px 10px; border-radius: 999px; background: var(--fx-ink); color: #fff; }
.fx-site-proef-held { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 12px; align-items: center; justify-items: stretch; padding: 18px 14px; background: linear-gradient(160deg, var(--fx-perzik), #ffd6b8); }
.fx-site-proef-held strong { display: block; font-family: var(--fx-display); font-weight: 800; font-size: 1.28rem; line-height: 1.02; letter-spacing: -0.02em; }
.fx-site-proef-held span { display: block; height: 5px; border-radius: 3px; background: rgba(26, 20, 16, 0.2); width: 92%; margin-top: 9px; }
.fx-site-proef-held span + span { width: 64%; margin-top: 5px; }
.fx-site-proef-held p { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.fx-site-proef-held p em { margin: 0; width: auto; height: auto; font-style: normal; font-size: 0.66rem; font-weight: 700; padding: 6px 10px; border-radius: 8px; background: var(--fx-verloop); color: var(--fx-ink); }
.fx-site-proef-held p u { text-decoration: none; font-size: 0.66rem; font-weight: 700; }
.fx-site-proef-held figure { margin: 0; height: 92px; border-radius: 12px; background: var(--fx-wit); box-shadow: var(--fx-schaduw-s); padding: 10px; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 6px; }
.fx-site-proef-held figure i { border-radius: 7px; background: var(--fx-zand); }
.fx-site-proef-held figure i:first-child { grid-row: 1 / span 2; background: var(--fx-verloop); }
.fx-site-proef-rij { padding: 10px 14px 14px; gap: 8px; }
.fx-site-proef-rij i { height: 30px; border-radius: 9px; }
.fx-site-proef-chat { position: absolute; right: 10px; bottom: 10px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--fx-verloop); color: var(--fx-ink); font-size: 0.9rem; box-shadow: 0 10px 18px -8px rgba(255, 106, 18, 0.95); animation: fx-zweven 4s ease-in-out infinite; }
.fx-site-inbegrepen { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px !important; }
.fx-site-inbegrepen li { position: relative; padding: 6px 11px 6px 26px; border-radius: 999px; background: var(--fx-groen-licht); color: var(--fx-groen); font-size: 0.76rem; font-weight: 700; }
.fx-site-inbegrepen li::before { content: ''; position: absolute; left: 9px; top: 50%; width: 11px; height: 11px; margin-top: -5.5px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f6f50' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center / contain no-repeat; }

@media (max-width: 1100px) {
  .fx-scherm--dash { width: 400px; margin-left: -200px; }
  .fx-dash-kpi b { font-size: 1.35rem; }
}
@media (max-width: 768px) {
  .fx-scherm--dash { width: auto !important; margin: 0 !important; }
  .fx-dash-agents li { grid-template-columns: 1fr; justify-items: start; }
  .fx-dash-agents .fx-scherm-icoon { grid-row: auto; }
}
.fx-site-proef-held p em, .fx-site-proef-held p u { white-space: nowrap; }
@media (max-width: 768px) { .fx-site-proef-held p u { display: none; } }

/* ---------- Navigatie: iconen in één groep ---------- */
.fx-nav-groep { display: flex; align-items: center; gap: 2px; padding: 4px; border-radius: 14px; background: var(--fx-zand); }
.fx-nav-groep .fx-nav-icoon { width: 38px; height: 38px; border-radius: 10px; color: var(--fx-ink); transition: background-color 0.25s var(--fx-ease), color 0.25s, transform 0.4s var(--fx-ease), box-shadow 0.25s; }
.fx-nav-groep .fx-nav-icoon .fx-i { width: 18px; height: 18px; stroke-width: 1.9; }
.fx-nav-groep .fx-nav-icoon:hover { background: var(--fx-wit); box-shadow: var(--fx-schaduw-s); transform: translateY(-1px); }
.fx-nav-icoon--bel:hover { color: var(--fx-oranje-tekst); }
.fx-nav-icoon--wa .fx-i { width: 19px; height: 19px; }
.fx-nav-icoon--wa:hover { color: #128c4b; }
.fx-nav-groep .fx-nav-icoon--taal { width: auto; padding: 0 11px 0 9px; display: inline-flex; align-items: center; gap: 6px; font-size: 0.86rem; font-weight: 700; }
.fx-nav-icoon--taal:hover { color: var(--fx-oranje-tekst); }
@media (max-width: 900px) {
  .fx-nav-groep { background: none; padding: 0; }
  .fx-nav-groep > a.fx-nav-icoon { display: none; }
  .fx-nav-groep .fx-nav-icoon--taal { height: 44px; background: var(--fx-zand); border-radius: 12px; }
}


/* ========================================
   Resultaten uit de praktijk: tekst links, grafiek met zwevende cijfers rechts
   ======================================== */
.fx-case { padding: 120px 0 130px; }
.fx-case::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(184, 60, 6, 0.16) 1px, transparent 1.4px); background-size: 24px 24px; -webkit-mask-image: radial-gradient(55% 70% at 80% 30%, #000, transparent 75%); mask-image: radial-gradient(55% 70% at 80% 30%, #000, transparent 75%); pointer-events: none; }
.fx-res { display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); gap: clamp(36px, 6vw, 96px); align-items: center; }

.fx-res-klant { display: inline-flex; align-items: center; gap: 10px; padding: 6px 8px 6px 6px; border-radius: 999px; background: var(--fx-wit); box-shadow: var(--fx-schaduw-s); font-weight: 700; font-size: 0.95rem; white-space: nowrap; }
.fx-res-klant span, .fx-res-citaat figcaption span { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--fx-ink); color: #fff; font-size: 0.72rem; font-weight: 700; flex: none; }
.fx-res-klant em { font-style: normal; font-size: 0.8rem; padding: 5px 11px; border-radius: 999px; background: var(--fx-perzik); color: var(--fx-oranje-tekst); }
.fx-res-tekst h2 { margin-top: 22px; font-size: clamp(2.2rem, 4.2vw, 3.6rem); }
.fx-res-intro { margin-top: 18px; color: var(--fx-ink-2); font-size: 1.08rem; }
.fx-res-citaat { position: relative; margin: 30px 0 0; padding: 26px 26px 22px; border-radius: var(--fx-r-l); background: var(--fx-wit); box-shadow: 0 1px 2px rgba(26, 20, 16, 0.04), 0 26px 50px -30px rgba(184, 60, 6, 0.5); }
.fx-res-citaat::before { content: '\201C'; position: absolute; right: 20px; top: 4px; font-family: var(--fx-display); font-weight: 800; font-size: 6rem; line-height: 1; color: var(--fx-perzik-2); }
.fx-res-citaat blockquote { position: relative; font-family: var(--fx-display); font-weight: 700; font-size: clamp(1.25rem, 1.8vw, 1.55rem); line-height: 1.18; letter-spacing: -0.015em; max-width: 18ch; }
.fx-res-citaat figcaption { display: flex; align-items: center; gap: 10px; margin-top: 16px; font-size: 0.92rem; font-weight: 700; }
.fx-res-meer { margin: 24px 0 26px; color: var(--fx-ink-2); }

/* het beeld */
.fx-res-beeld { position: relative; padding: 46px 34px 70px 30px; }
.fx-res-paneel { position: relative; overflow: hidden; padding: clamp(24px, 3vw, 38px) clamp(24px, 3vw, 38px) 22px; border-radius: var(--fx-r-xl); background: var(--fx-verloop); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.45), 0 60px 90px -50px rgba(255, 106, 18, 0.95); transform: rotate(-1.2deg); transition: transform 0.7s var(--fx-ease); }
.fx-res-beeld:hover .fx-res-paneel { transform: rotate(0deg); }
.fx-res-paneel::before { content: ''; position: absolute; right: -110px; top: -130px; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, 0.5), transparent); pointer-events: none; }
.fx-res-paneel > * { position: relative; }
.fx-res-paneel-kop > p:first-child { font-weight: 700; font-size: 1rem; }
.fx-res-getal { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 16px; margin-top: 6px; font-family: var(--fx-display); font-weight: 800; font-size: clamp(3.4rem, 6vw, 5.6rem); line-height: 0.95; letter-spacing: -0.035em; }
.fx-res-getal span { font-family: var(--fx-body); font-size: 0.95rem; font-weight: 700; letter-spacing: 0; line-height: 1; padding: 8px 13px; border-radius: 999px; background: rgba(26, 20, 16, 0.14); text-decoration: line-through; text-decoration-thickness: 1.5px; }

.fx-res-grafiek { position: relative; height: 230px; margin-top: 26px; }
.fx-res-grafiek svg { width: 100%; height: 100%; overflow: visible; }
.fx-res-raster path { fill: none; stroke: rgba(255, 255, 255, 0.34); stroke-width: 1; stroke-dasharray: 3 6; vector-effect: non-scaling-stroke; }
.fx-res-lijn { fill: none; stroke: var(--fx-ink); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 0; }
.fx-res-as { position: absolute; left: 0; font-size: 0.76rem; font-weight: 700; padding: 3px 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.85); transform: translateY(-50%); }
.fx-res-as--12 { top: 19.2%; left: 3%; transform: translateY(-170%); }
.fx-res-as--3 { top: 77.5%; left: auto; right: 0; transform: translateY(40%); }
.fx-res-live { position: absolute; left: 38.2%; top: -6px; bottom: 0; width: 0; border-left: 2px dashed rgba(255, 255, 255, 0.9); }
.fx-res-live b { position: absolute; top: -8px; left: 0; transform: translateX(-50%); white-space: nowrap; padding: 6px 12px; border-radius: 999px; background: var(--fx-ink); color: #fff; font-size: 0.78rem; box-shadow: var(--fx-schaduw-m); }
.fx-res-punt { position: absolute; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: var(--fx-wit); box-shadow: 0 0 0 4px var(--fx-ink); }
.fx-res-punt--voor { left: 0.6%; top: 19.2%; }
.fx-res-punt--na { left: 99.4%; top: 76.7%; }
.fx-res-punt--na::after { content: ''; position: absolute; inset: -10px; border-radius: 50%; border: 2px solid rgba(26, 20, 16, 0.5); animation: fx-ring 2.2s ease-out infinite; }
@keyframes fx-ring { from { transform: scale(0.5); opacity: 1; } to { transform: scale(1.5); opacity: 0; } }
.fx-res-onder { display: flex; align-items: center; gap: 12px; margin-top: 12px; font-size: 0.86rem; font-weight: 700; }
.fx-res-onder span + span { margin-left: auto; }
.fx-res-onder em { font-style: normal; font-weight: 500; font-size: 0.72rem; opacity: 0.75; order: 3; margin-left: 12px; }

/* zwevende cijferkaarten */
.fx-res-zweef { position: absolute; z-index: 2; display: flex; align-items: center; gap: 14px; padding: 16px 20px 16px 16px; border-radius: 22px; background: rgba(255, 255, 255, 0.96); box-shadow: 0 2px 4px rgba(26, 20, 16, 0.06), 0 34px 60px -28px rgba(26, 20, 16, 0.55); animation: fx-zweven 7s ease-in-out infinite; }
.fx-res-beeld:hover .fx-res-zweef { animation-play-state: paused; }
.fx-res-zweef p { display: grid; gap: 2px; }
.fx-res-zweef b { font-family: var(--fx-display); font-weight: 800; font-size: 2.1rem; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.fx-res-zweef span { font-size: 0.84rem; color: var(--fx-ink-2); line-height: 1.3; }
.fx-res-zweef--a { right: 0; top: 0; animation-delay: -1s; }
.fx-res-zweef--b { left: 0; bottom: 10px; flex-direction: column; align-items: flex-start; gap: 12px; max-width: 250px; animation-delay: -3s; }
.fx-res-zweef--c { right: 8px; bottom: 0; flex-wrap: wrap; max-width: 250px; animation-delay: -5s; }
.fx-res-ring { width: 62px; height: 62px; transform: rotate(-90deg); flex: none; }
.fx-res-ring circle { fill: none; stroke: var(--fx-perzik-2); stroke-width: 9; }
.fx-res-ring .fx-res-ring-vul { stroke: var(--fx-oranje); stroke-linecap: round; stroke-dasharray: 80 100; }
.fx-res-tikken { display: grid; grid-template-columns: repeat(9, 1fr); gap: 4px; width: 100%; }
.fx-res-tikken i { height: 18px; border-radius: 5px; background: var(--fx-verloop); transform-origin: bottom; }
.fx-res-icoon { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--fx-perzik); color: var(--fx-oranje-tekst); font-size: 1.2rem; flex: none; }
.fx-res-zweef em { flex-basis: 100%; font-style: normal; text-align: center; font-size: 0.82rem; font-weight: 700; padding: 6px 12px; border-radius: 999px; background: var(--fx-groen-licht); color: var(--fx-groen); }

/* beweging bij in beeld komen */
.fx-js .fx-res-beeld .fx-res-lijn { stroke-dashoffset: 1; transition: stroke-dashoffset 1.8s 0.3s var(--fx-ease); }
.fx-js .fx-res-beeld.is-zichtbaar .fx-res-lijn { stroke-dashoffset: 0; }
.fx-js .fx-res-beeld .fx-res-vlak, .fx-js .fx-res-beeld .fx-res-live, .fx-js .fx-res-beeld .fx-res-punt, .fx-js .fx-res-beeld .fx-res-as { opacity: 0; transition: opacity 0.8s var(--fx-ease); }
.fx-js .fx-res-beeld.is-zichtbaar .fx-res-vlak { opacity: 1; transition-delay: 1s; }
.fx-js .fx-res-beeld.is-zichtbaar .fx-res-punt--voor, .fx-js .fx-res-beeld.is-zichtbaar .fx-res-as--12 { opacity: 1; transition-delay: 0.3s; }
.fx-js .fx-res-beeld.is-zichtbaar .fx-res-live { opacity: 1; transition-delay: 0.9s; }
.fx-js .fx-res-beeld.is-zichtbaar .fx-res-punt--na, .fx-js .fx-res-beeld.is-zichtbaar .fx-res-as--3 { opacity: 1; transition-delay: 1.9s; }
.fx-js .fx-res-beeld .fx-res-ring-vul { stroke-dasharray: 0 100; transition: stroke-dasharray 1.3s 0.7s var(--fx-ease); }
.fx-js .fx-res-beeld.is-zichtbaar .fx-res-ring-vul { stroke-dasharray: 80 100; }
.fx-js .fx-res-beeld .fx-res-tikken i { transform: scaleY(0.15); opacity: 0.3; transition: transform 0.5s var(--fx-ease), opacity 0.5s; }
.fx-js .fx-res-beeld.is-zichtbaar .fx-res-tikken i { transform: none; opacity: 1; }
.fx-res-tikken i:nth-child(1) { transition-delay: 0.8s; } .fx-res-tikken i:nth-child(2) { transition-delay: 0.86s; } .fx-res-tikken i:nth-child(3) { transition-delay: 0.92s; } .fx-res-tikken i:nth-child(4) { transition-delay: 0.98s; } .fx-res-tikken i:nth-child(5) { transition-delay: 1.04s; } .fx-res-tikken i:nth-child(6) { transition-delay: 1.1s; } .fx-res-tikken i:nth-child(7) { transition-delay: 1.16s; } .fx-res-tikken i:nth-child(8) { transition-delay: 1.22s; } .fx-res-tikken i:nth-child(9) { transition-delay: 1.28s; }

@media (prefers-reduced-motion: reduce) {
  .fx-js .fx-res-beeld .fx-res-lijn { stroke-dashoffset: 0; }
  .fx-js .fx-res-beeld .fx-res-vlak, .fx-js .fx-res-beeld .fx-res-live, .fx-js .fx-res-beeld .fx-res-punt, .fx-js .fx-res-beeld .fx-res-as { opacity: 1; }
  .fx-js .fx-res-beeld .fx-res-ring-vul { stroke-dasharray: 80 100; }
  .fx-js .fx-res-beeld .fx-res-tikken i { transform: none; opacity: 1; }
}
@media (max-width: 1100px) {
  .fx-res { grid-template-columns: minmax(0, 1fr); }
  .fx-res-beeld { max-width: 720px; }
}
@media (max-width: 768px) {
  .fx-case { padding: 76px 0; }
  .fx-res-klant em { display: none; }
  .fx-res-beeld { padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .fx-res-paneel { grid-column: 1 / -1; transform: none; border-radius: var(--fx-r-l); }
  .fx-res-grafiek { height: 170px; }
  .fx-res-zweef { position: static; animation: none; max-width: none; box-shadow: var(--fx-schaduw-s); border-radius: 20px; padding: 16px; }
  .fx-res-zweef--a { flex-direction: column; align-items: flex-start; }
  .fx-res-zweef--c { grid-column: 1 / -1; }
  .fx-res-zweef b { font-size: 1.8rem; }
  .fx-res-zweef em { flex-basis: auto; margin-left: auto; }
  .fx-res-onder em { display: none; }
  .fx-res-tekst .fx-btn { width: 100%; white-space: normal; }
}
@media (min-width: 769px) {
  .fx-res-beeld { padding-bottom: 116px; }
  .fx-res-zweef--b { bottom: 0; }
}

/* ========================================
   Koppelingen: intro met feiten, draaiende tools, aantallen en eigen-tool-balk
   ======================================== */
.fx-tools-top { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: clamp(28px, 5vw, 72px); align-items: center; margin-bottom: 44px; }
.fx-tools-intro h2 { font-size: clamp(2rem, 4vw, 3.4rem); }
.fx-tools-intro > p { margin-top: 18px; font-size: 1.12rem; color: var(--fx-ink-2); max-width: 52ch; }
.fx-tools-feiten { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.fx-tools-feiten li { display: grid; gap: 2px; padding: 14px 20px; border-radius: 18px; background: var(--fx-wit); box-shadow: var(--fx-schaduw-s); }
.fx-tools-feiten b { font-family: var(--fx-display); font-weight: 800; font-size: 1.7rem; line-height: 1; letter-spacing: -0.02em; color: var(--fx-oranje-tekst); }
.fx-tools-feiten span { font-size: 0.86rem; color: var(--fx-ink-2); }

.fx-orbit { position: relative; container-type: inline-size; width: min(100%, 340px); aspect-ratio: 1; margin-inline: auto; }
.fx-orbit-ring { position: absolute; border-radius: 50%; border: 1.5px dashed rgba(184, 60, 6, 0.28); }
.fx-orbit-ring--a { inset: 23%; } .fx-orbit-ring--b { inset: 5%; }
.fx-orbit-baan { position: absolute; inset: 0; animation: fx-draai 44s linear infinite; }
.fx-orbit-baan--b { animation-duration: 64s; animation-direction: reverse; }
.fx-orbit-baan span { position: absolute; left: 50%; top: 50%; width: 50px; height: 50px; margin: -25px; transform: rotate(var(--a)) translateY(calc(var(--r) * -1)) rotate(calc(var(--a) * -1)); }
.fx-orbit-baan img { width: 100%; height: 100%; padding: 12px; border-radius: 16px; background: var(--fx-wit); box-shadow: var(--fx-schaduw-s); animation: fx-draai 44s linear infinite reverse; }
.fx-orbit-baan--b img { animation-duration: 64s; animation-direction: normal; }
@keyframes fx-draai { to { transform: rotate(360deg); } }
.fx-orbit-kern { position: absolute; left: 50%; top: 50%; width: 84px; height: 84px; margin: -42px; border-radius: 24px; box-shadow: 0 0 0 10px rgba(255, 106, 18, 0.14), 0 0 0 22px rgba(255, 106, 18, 0.07), 0 24px 40px -16px rgba(255, 106, 18, 0.8); }
.fx-orbit-kern img { width: 100%; height: 100%; border-radius: 24px; }
.fx-tools-vlak:hover .fx-orbit-baan, .fx-tools-vlak:hover .fx-orbit-baan img { animation-play-state: paused; }

.fx-tools-groep h3 span { margin-left: auto; font-family: var(--fx-body); font-size: 0.78rem; font-weight: 700; letter-spacing: 0; padding: 4px 10px; border-radius: 999px; background: var(--fx-perzik); color: var(--fx-oranje-tekst); }
.fx-tools-eigen { grid-column: 1 / -1; position: relative; overflow: hidden; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 20px; padding: 24px 28px; border-radius: var(--fx-r-l); background: var(--fx-verloop); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.4), 0 34px 60px -36px rgba(255, 106, 18, 0.9); }
.fx-tools-eigen::before { content: ''; position: absolute; right: -80px; top: -140px; width: 360px; height: 360px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, 0.45), transparent); pointer-events: none; }
.fx-tools-eigen > * { position: relative; }
.fx-tools-plus { width: 54px; height: 54px; border-radius: 17px; display: grid; place-items: center; font-size: 1.4rem; background: rgba(255, 255, 255, 0.9); border: 2px dashed rgba(26, 20, 16, 0.4); }
.fx-tools-eigen h3 { font-size: 1.5rem; }
.fx-tools-eigen p { margin-top: 4px; font-weight: 500; max-width: 56ch; }

@media (max-width: 900px) {
  .fx-tools-top { grid-template-columns: minmax(0, 1fr); }
  .fx-orbit { width: min(100%, 270px); order: -1; }
  .fx-orbit-baan span { width: 42px; height: 42px; margin: -21px; } .fx-orbit-baan img { padding: 10px; border-radius: 13px; }
  .fx-orbit-kern { width: 68px; height: 68px; margin: -34px; }
  .fx-tools-eigen { grid-template-columns: minmax(0, 1fr); padding: 22px; }
  .fx-tools-eigen .fx-btn { width: 100%; }
  .fx-tools-feiten li { padding: 12px 16px; flex: 1; }
}

/* ========================================
   Secties lopen zacht in elkaar over
   ======================================== */
.fx-verschil, .fx-vragen, .fx-case, .fx-roi {
  --fx-vervaag: linear-gradient(180deg, var(--fx-bg) 0, rgba(255, 253, 251, 0) 170px, rgba(255, 253, 251, 0) calc(100% - 170px), var(--fx-bg) 100%);
}
.fx-verschil, .fx-vragen { background: var(--fx-vervaag), var(--fx-zand); }
.fx-case { background: var(--fx-vervaag), var(--fx-perzik); }
.fx-roi { background: var(--fx-vervaag), radial-gradient(60% 70% at 0% 40%, #ffd9bd, transparent 60%), linear-gradient(180deg, var(--fx-perzik), #ffe6d3); }
.fx-case-gloed { background: radial-gradient(46% 50% at 100% 35%, rgba(255, 143, 71, 0.4), transparent 70%), radial-gradient(40% 44% at 0% 70%, rgba(255, 196, 150, 0.5), transparent 70%); -webkit-mask-image: linear-gradient(180deg, transparent, #000 200px, #000 calc(100% - 200px), transparent); mask-image: linear-gradient(180deg, transparent, #000 200px, #000 calc(100% - 200px), transparent); }
.fx-verschil, .fx-vragen, .fx-roi { padding-top: 140px; padding-bottom: 140px; }
.fx-case { padding-top: 150px; padding-bottom: 160px; }
.fx-footer { border-radius: 44px 44px 0 0; }
@media (max-width: 768px) {
  .fx-verschil, .fx-vragen, .fx-case, .fx-roi { --fx-vervaag: linear-gradient(180deg, var(--fx-bg) 0, rgba(255, 253, 251, 0) 90px, rgba(255, 253, 251, 0) calc(100% - 90px), var(--fx-bg) 100%); padding-top: 96px; padding-bottom: 96px; }
  .fx-footer { border-radius: 28px 28px 0 0; }
}

/* ---------- Koppelingen: meer tools per groep ---------- */
.fx-tools-groep li.fx-tools-meer { padding: 8px 14px; background: none; box-shadow: inset 0 0 0 1.5px rgba(184, 60, 6, 0.35); color: var(--fx-oranje-tekst); font-weight: 700; border-style: none; }
.fx-tools-groep li.fx-tools-meer:hover { background: var(--fx-perzik); }
.fx-tools-groep ul { gap: 7px; }
.fx-tools-groep li { padding: 7px 12px 7px 9px; font-size: 0.9rem; }

/* ========================================
   Gedeelde bouwstenen voor alle pagina's (zie DESIGN.md)
   ======================================== */

/* ---------- Paginakop ---------- */
.fx-pkop { position: relative; padding: 168px 0 72px; text-align: center; overflow: hidden; }
.fx-pkop::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 70% at 50% 0%, rgba(255, 143, 71, 0.32), transparent 70%), radial-gradient(30% 50% at 10% 40%, rgba(255, 196, 150, 0.36), transparent 72%), radial-gradient(30% 50% at 90% 36%, rgba(255, 176, 120, 0.32), transparent 72%); -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent); mask-image: linear-gradient(180deg, #000 60%, transparent); }
.fx-pkop h1 { font-size: clamp(2.4rem, 5.2vw, 4.4rem); line-height: 1; letter-spacing: -0.03em; max-width: 18ch; margin: 24px auto 0; }
.fx-pkop h1 em { font-style: normal; color: var(--fx-oranje-diep); }
.fx-pkop-sub { font-size: clamp(1.05rem, 1.4vw, 1.25rem); color: var(--fx-ink-2); max-width: 58ch; margin: 22px auto 0; }
.fx-pkop-knoppen { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.fx-pkop--links { text-align: left; }
.fx-pkop--links h1, .fx-pkop--links .fx-pkop-sub { margin-left: 0; }
.fx-pkop--links .fx-pkop-knoppen { justify-content: flex-start; }
.fx-kruimel { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; font-size: 0.9rem; color: var(--fx-ink-2); }
.fx-kruimel a { text-decoration: underline; text-underline-offset: 3px; }
.fx-kruimel li + li::before { content: '/'; margin-right: 8px; color: var(--fx-ink-3); }

/* ---------- Secties ---------- */
.fx-sectie { position: relative; padding: 112px 0; }
.fx-sectie--krap { padding: 72px 0; }
.fx-sectie--zand, .fx-sectie--perzik { --fx-vervaag: linear-gradient(180deg, var(--fx-bg) 0, rgba(255, 253, 251, 0) 170px, rgba(255, 253, 251, 0) calc(100% - 170px), var(--fx-bg) 100%); padding: 140px 0; }
.fx-sectie--zand { background: var(--fx-vervaag), var(--fx-zand); }
.fx-sectie--perzik { background: var(--fx-vervaag), var(--fx-perzik); }

/* ---------- Rasters en kaarten ---------- */
.fx-raster { display: grid; gap: 14px; }
.fx-raster--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fx-raster--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fx-raster--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fx-duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.fx-kaart { position: relative; padding: clamp(24px, 3vw, 36px); border-radius: var(--fx-r-l); background: var(--fx-wit); box-shadow: inset 0 0 0 1px var(--fx-lijn), var(--fx-schaduw-s); transition: transform 0.5s var(--fx-ease), box-shadow 0.5s var(--fx-ease); }
a.fx-kaart:hover, .fx-kaart--zweef:hover { transform: translateY(-6px); box-shadow: inset 0 0 0 1.5px var(--fx-oranje), var(--fx-schaduw-m); }
.fx-kaart--zand { background: var(--fx-zand); box-shadow: none; }
.fx-kaart--oranje { background: var(--fx-verloop); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.4), 0 40px 70px -36px rgba(255, 106, 18, 0.9); }
.fx-kaart h3 { font-size: 1.45rem; }
.fx-kaart p { margin-top: 10px; color: var(--fx-ink-2); }
.fx-kaart--oranje p { color: var(--fx-ink); }
.fx-icoonvlak { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; margin-bottom: 22px; font-size: 1.3rem; background: var(--fx-perzik); color: var(--fx-oranje-tekst); }
.fx-icoonvlak--oranje { background: var(--fx-verloop); color: var(--fx-ink); box-shadow: 0 12px 22px -12px rgba(255, 106, 18, 0.85); }
.fx-getal { font-family: var(--fx-display); font-weight: 800; font-size: clamp(2.4rem, 4vw, 3.4rem); line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }

/* ---------- Lopende tekst (artikelen, juridisch) ---------- */
.fx-prose { max-width: 720px; margin-inline: auto; font-size: 1.1rem; line-height: 1.7; color: var(--fx-ink-2); }
.fx-prose > * + * { margin-top: 1.1em; }
.fx-prose h2 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); color: var(--fx-ink); margin-top: 2em; }
.fx-prose h3 { font-size: 1.35rem; color: var(--fx-ink); margin-top: 1.6em; }
.fx-prose strong { color: var(--fx-ink); }
.fx-prose a { color: var(--fx-oranje-tekst); text-decoration: underline; text-underline-offset: 3px; }
.fx-prose ul, .fx-prose ol { padding-left: 1.3em; display: grid; gap: 0.5em; }
.fx-prose ul { list-style: disc; } .fx-prose ol { list-style: decimal; }
.fx-prose li::marker { color: var(--fx-oranje-diep); font-weight: 700; }
.fx-prose blockquote { margin: 1.6em 0; padding: 26px 28px; border-radius: var(--fx-r-l); background: var(--fx-perzik); font-family: var(--fx-display); font-weight: 700; font-size: 1.4rem; line-height: 1.25; letter-spacing: -0.015em; color: var(--fx-ink); }
.fx-prose img { border-radius: var(--fx-r-m); }
.fx-prose table { width: 100%; border-collapse: collapse; font-size: 0.98rem; }
.fx-prose th, .fx-prose td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--fx-lijn); }
.fx-prose th { color: var(--fx-ink); font-weight: 700; }

/* ---------- Formulieren ---------- */
.fx-formulier { display: grid; gap: 18px; }
.fx-veld { display: grid; gap: 7px; }
.fx-veld > label, .fx-veld > span { font-weight: 700; font-size: 0.95rem; }
.fx-veld input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), .fx-veld select, .fx-veld textarea { width: 100%; font: inherit; color: var(--fx-ink); padding: 14px 16px; border-radius: 14px; border: 1.5px solid rgba(26, 20, 16, 0.2); background: var(--fx-wit); transition: border-color 0.2s, box-shadow 0.2s; }
.fx-veld textarea { min-height: 140px; resize: vertical; }
.fx-veld input::placeholder, .fx-veld textarea::placeholder { color: var(--fx-ink-3); }
.fx-veld input:focus, .fx-veld select:focus, .fx-veld textarea:focus { outline: none; border-color: var(--fx-oranje-diep); box-shadow: 0 0 0 4px rgba(255, 106, 18, 0.22); }
.fx-veld-rij { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }

@media (max-width: 1100px) {
  .fx-raster--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .fx-pkop { padding: 124px 0 48px; }
  .fx-pkop-knoppen { flex-direction: column; align-items: stretch; }
  .fx-sectie, .fx-sectie--krap { padding: 72px 0; }
  .fx-sectie--zand, .fx-sectie--perzik { --fx-vervaag: linear-gradient(180deg, var(--fx-bg) 0, rgba(255, 253, 251, 0) 90px, rgba(255, 253, 251, 0) calc(100% - 90px), var(--fx-bg) 100%); padding: 96px 0; }
  .fx-raster--2, .fx-raster--3, .fx-raster--4, .fx-duo, .fx-veld-rij { grid-template-columns: minmax(0, 1fr); }
  .fx-prose { font-size: 1.02rem; }
}

/* ========================================
   Telefoon: afwerking voor de hele site
   ======================================== */
@media (max-width: 768px) {
  /* ritme: minder lege ruimte tussen secties */
  .fx-verschil, .fx-vragen, .fx-case, .fx-roi, .fx-sectie--zand, .fx-sectie--perzik { padding-top: 64px; padding-bottom: 64px; }
  .fx-werk, .fx-klanten, .fx-slot, .fx-sectie { padding-top: 56px; padding-bottom: 56px; }
  .fx-sectie--krap { padding-top: 32px; padding-bottom: 32px; }
  .fx-wie { padding: 56px 0 28px; } .fx-tools { padding: 28px 0 56px; }
  .fx-aanpak { padding: 12px 0 12px; }
  .fx-statement { padding: 64px 0 40px; }
  .fx-kop { margin-bottom: 28px; }
  .fx-kop p { font-size: 1.05rem; }

  /* koppen: nooit te groot, nooit afgebroken midden in een lettergreep */
  .fx h1, .fx h2, .fx h3 { overflow-wrap: break-word; }
  .fx-kop h2, .fx-case-kop h2, .fx-res-tekst h2 { font-size: clamp(1.75rem, 7.6vw, 2.2rem); }
  .fx-roi-kop { font-size: 1.45rem !important; }
  .fx-slot-vlak h2 { font-size: clamp(1.9rem, 8.4vw, 2.4rem); }
  .fx-slot-vlak { padding: 40px 22px; border-radius: var(--fx-r-l); }
  .fx-slot-vlak .fx-btn { width: 100%; white-space: normal; }

  /* knoppen en tikdoelen: minimaal 44px hoog */
  .fx-btn { min-height: 48px; }
  .fx-btn--klein { min-height: 44px; }
  .fx-wissel-knoppen button { min-height: 44px; font-size: 0.82rem; }
  .fx-tab { min-height: 44px; }
  .fx-art-inhoud a { display: block; padding-block: 7px; min-height: 44px; }
  .fx-browser-adres { min-height: 44px; display: inline-flex; align-items: center; }
  .fx-vraag .faq-question { min-height: 56px; padding: 18px 18px; font-size: 1.1rem; }
  .fx-antwoord { padding: 0 18px 20px; }
  .fx-footer li a, .fx-footer li { display: block; }
  .fx-footer li + li { margin-top: 0; }
  .fx-footer li a { padding-block: 9px; }

  /* kleine lettertjes leesbaar houden */
  .fx-tag, .fx-live, .fx-voorbeeld, .fx-kop-klein, .fx-beller small, .fx-speel-tekst small, .fx-bel small { font-size: 0.8rem; }
  .fx-dash-kpi small, .fx-dash-kpi em, .fx-dash-agents em, .fx-dash-grafiek .fx-staven u, .fx-dash-titel span { font-size: 0.75rem; }
  .fx-prose { font-size: 1.04rem; line-height: 1.7; }

  /* tabbladen: horizontaal vegen met een zachte rand als hint */
  .fx-tabs-lijst { scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scroll-padding-inline: 12px; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 34px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 34px), transparent); padding-right: 30px; }
  .fx-tab { scroll-snap-align: start; }

  /* hero-kaarten */
  .fx-speel-tekst b { font-size: 0.92rem; }
  .fx-golf { gap: 2px; }
  .fx-zeker { align-items: flex-start; width: fit-content; margin-inline: auto; }

  /* koppelingen: per groep een veegbare rij in plaats van een lange lijst */
  .fx-tools-groep { padding: 18px 0 18px 18px; overflow: hidden; }
  .fx-tools-groep h3 { padding-right: 18px; }
  .fx-tools-groep ul { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding: 2px 18px 4px 0; margin-top: 14px; }
  .fx-tools-groep ul::-webkit-scrollbar { display: none; }
  .fx-tools-groep li { flex: none; min-height: 40px; }
  .fx-tools-vlak { padding: 28px 14px 14px; }
  .fx-tools-top { margin-bottom: 24px; }
  .fx-orbit { width: min(100%, 230px); }

  /* voor wie: compacter, twee kolommen */
  .fx-wie-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .fx-wie-raster a { padding: 18px 16px 20px; border-radius: 20px; }
  .fx-wie-raster h3 { font-size: 1.15rem; padding-right: 0; }
  .fx-wie-raster p { font-size: 0.88rem; line-height: 1.45; }
  .fx-wie-icoon { width: 44px; height: 44px; margin-bottom: 16px; }
  .fx-wie-raster .fx-pijl { right: 14px; top: 18px; }

  /* stappen: nummer en titel op een regel */
  .fx-stappen { gap: 10px; }
  .fx-stappen li { padding: 22px; border-radius: var(--fx-r-l); }
  .fx-stappen h3 { font-size: 1.5rem; margin-top: 16px; }
  .fx-stap-nr { width: 46px; height: 46px; font-size: 1.3rem; }

  /* quotes */
  .fx-quote { padding: 22px; border-radius: var(--fx-r-l); }
  .fx-quote blockquote { font-size: 1.02rem; }

  /* tabellen in artikelen schuiven binnen hun eigen kader */
  .fx-prose table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: normal; }
  .fx-prose th, .fx-prose td { min-width: 120px; padding: 10px 12px; }

  /* footer */
  .fx-footer { padding: 48px 0 28px; }
  .fx-footer-onder { margin-top: 32px; }
}
@media (max-width: 380px) {
  .fx-wrap { width: min(1200px, 100% - 28px); }
  .fx-wie-raster { grid-template-columns: minmax(0, 1fr); }
  .fx-hero h1 { font-size: 2.2rem; }
}
@media (max-width: 768px) {
  .fx-wie-raster { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .fx-wie-raster a { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; align-items: start; padding: 18px 48px 18px 16px; }
  .fx-wie-icoon { grid-row: 1 / span 2; margin: 0; }
  .fx-wie-raster h3 { font-size: 1.2rem; align-self: center; }
  .fx-wie-raster p { grid-column: 2; margin-top: 4px; }
}

/* ---------- Telefoon: menu, chatknop en laatste uitlijning ---------- */
@media (max-width: 900px) {
  /* open menu: pagina erachter dimmen, onderbalk en chatknop tijdelijk weg */
  body:has(.fx-nav.menu-open)::before { content: ''; position: fixed; inset: 0; z-index: 95; background: rgba(26, 20, 16, 0.45); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
  body:has(.fx-nav.menu-open) .fx-balk,
  body:has(.fx-nav.menu-open) #flowsupport-widget-container { display: none !important; }
  .fx-menu { max-height: calc(100dvh - 108px); overscroll-behavior: contain; }
  .fx-menu .nav-link { min-height: 52px; }
  .dropdown-menu a { min-height: 56px; }
}
@media (max-width: 768px) {
  .fx-pkop--links .fx-zeker { margin-inline: 0; }
  /* ruimte rechtsonder zodat de chatknop geen knoppen afdekt aan het eind van de pagina */
  .fx-footer { padding-bottom: 84px; }
}