.sc-section { position: relative; padding: var(--space-8) 0; background: #EEF1F8; }
.sc-head { max-width: 780px; margin: 0 auto var(--space-9); text-align: center; }
.sc-head .eyebrow { justify-content: center; margin-bottom: 16px; }
.sc-h2 { color: var(--c-navy); margin-bottom: 16px; }
.sc-lead { color: var(--c-text-muted); margin: 0 auto; max-width: 44em; }
.sc-flow { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-bottom: var(--space-6); }
.sc-flow::before { content: ""; position: absolute; top: 32px; left: 12.5%; right: 12.5%; height: 2px; border-radius: 2px; z-index: 0; transform-origin: left center; background: linear-gradient(90deg, var(--c-grad-blue), var(--c-grad-magenta)); }
.sc-hopper { position: absolute; top: 0; left: 0; z-index: 0; pointer-events: none; width: 16px; height: 16px; border-radius: 999px; opacity: 0; background: radial-gradient(circle at 50% 50%, #fff 0%, #fff 20%, var(--c-grad-blue) 58%, var(--c-grad-magenta) 100%); box-shadow: 0 0 10px 3px rgba(168,2,144,.45), 0 0 18px 7px rgba(35,1,251,.28); will-change: transform, opacity; }
.sc-step { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; }
.sc-marker-wrap { position: relative; flex: 0 0 auto; width: 64px; height: 64px; }
.sc-marker-pulse { position: absolute; inset: -10px; border-radius: 26px; z-index: 0; background: var(--gradient-brand); opacity: 0; filter: blur(10px); will-change: opacity, transform; transform: scale(.7); }
.sc-marker-wrap.is-pulsing .sc-marker-pulse { animation: scPulse 1.25s var(--ease) both; }
.sc-marker { position: absolute; inset: 0; z-index: 1; border-radius: 18px; overflow: hidden; background: #F5F2FD; border: 1px solid var(--c-border-soft); display: grid; place-items: center; box-shadow: 0 6px 16px rgba(20,20,100,.08), 0 1px 2px rgba(20,20,100,.10); transform-origin: center; }
/* .sc-marker is een grid met place-items:center; het icoon zit sinds 14-08-2026
   in een <picture> (AVIF + JPEG-vangnet). Zonder de picture-regel rekent de
   `height:100%` hieronder zich tegen een inline box af die naar zijn inhoud
   groeit, en verdwijnt het icoon. Zie widgets/shared/bconnect-image.php.

   21-08-2026 — DEZE REGEL IS HIER ACTIEF, anders dan bij two-solutions en
   hl-segments. De vier sec7-stap-iconen zijn 256x256 en dus enkelvoudige
   AVIF's, geen tegel-grids; bconnect_avif_is_grid() laat ze door en er staat
   hier nog een echte <picture>. Dit is de regressiecheck van die fix: gaat het
   icoon leeg, dan is de guard te breed. */
.sc-marker picture { display: block; width: 100%; height: 100%; }
.sc-marker img { width: 100%; height: 100%; object-fit: contain; display: block; }
.sc-marker-wrap.is-active .sc-marker { transform: scale(1.36); border-color: color-mix(in srgb, var(--c-grad-magenta) 32%, var(--c-border)); box-shadow: 0 16px 32px -10px rgba(35,1,251,.36), 0 6px 14px rgba(20,20,100,.20); }
.sc-step-text { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.sc-step-h { font-family: var(--font-head); font-size: 17px; font-weight: var(--fw-semibold); color: var(--c-navy); line-height: 1.3; margin: 0; max-width: 13em; }
.sc-step-p { font-family: var(--font-body); font-size: 14.5px; line-height: 1.6; color: var(--c-text-muted); margin: 0; max-width: 21em; text-wrap: pretty; }
.sc-bridge { display: grid; justify-items: center; gap: 16px; margin-bottom: var(--space-7); text-align: center; }
.sc-bridge-rail { width: 2px; height: 38px; border-radius: 2px; background: linear-gradient(180deg, color-mix(in srgb, var(--c-grad-magenta) 10%, transparent), var(--c-grad-magenta)); }
.sc-bridge-text { font-family: var(--font-head); font-size: 18px; font-weight: var(--fw-semibold); color: var(--c-navy); letter-spacing: -0.01em; }
.sc-stats { position: relative; overflow: hidden; display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; background: var(--c-white); border: 1px solid var(--c-border); border-radius: var(--radius-feature); box-shadow: var(--shadow-card); padding: var(--space-7) var(--space-8) calc(var(--space-7) - 4px); }
.sc-stats::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--gradient-brand); }
.sc-stat { position: relative; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; padding-left: 24px; }
.sc-stat::before { content: ""; position: absolute; left: 0; top: 3px; bottom: 3px; width: 3px; border-radius: 3px; background: var(--gradient-brand); }
.sc-num { font-family: var(--font-head); font-weight: var(--fw-semibold); font-size: 56px; line-height: 1; letter-spacing: -0.03em; white-space: nowrap; background: var(--gradient-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* Tel-animatie zonder verspringende cijferbreedtes: tabellarische
   cijfers lopen alle even breed. Prefix, procentteken, "sec" en de
   NL-komma staan buiten de tel-span en blijven dus staan waar ze staan.

   De breedte van de eindwaarde wordt niet in CSS gereserveerd maar door
   scenario.js gemeten (Bconnect.armCount), en alleen zolang er geteld
   wordt. Een vaste `min-width: <n>ch` maakt het .sc-num-vak breder
   (gemeten: "8,7" van 78 naar 101px, "20" van 115 naar 118px) en dat is
   op desktop wél zichtbaar — het vak draagt de gradient, en het
   procentteken en "sec" schuiven een paar pixels mee. Op mobiel staat
   die reservering wél, in bconnect-mobile.css. */
.sc-num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.sc-num-unit { font-size: 0.5em; font-weight: var(--fw-semibold); vertical-align: 0.72em; letter-spacing: 0; }
.sc-num-unit.is-word { margin-left: 0.12em; vertical-align: 0.5em; }
.sc-num.is-placeholder { font-size: 40px; border-bottom: 2px dashed rgba(168,2,144,.45); padding-bottom: 5px; }
.sc-stat-label { font-size: 15px; line-height: 1.5; color: var(--c-text-muted); max-width: 15em; }
.sc-stats-note { margin: 16px 0 0; font-family: var(--font-body); font-size: 12px; line-height: 1.5; color: var(--c-text-soft); font-style: italic; }

@media (prefers-reduced-motion: no-preference) {
  .sc-flow::before { transition: transform 1s var(--ease) .1s; }
  .sc-marker { transition: transform .72s var(--ease), box-shadow .72s var(--ease), border-color .72s var(--ease); }
  .sc-step { transition: opacity .6s var(--ease), transform .6s var(--ease); transition-delay: calc(var(--i) * .12s + .2s); }
  .sc-bridge { transition: opacity .6s var(--ease) .75s; }
  .sc-stats { transition: opacity .7s var(--ease) .9s, transform .7s var(--ease) .9s; }
  .sc-section:not(.is-inview) .sc-flow::before { transform: scaleX(0); }
  .sc-section:not(.is-inview) .sc-step { opacity: 0; transform: translateY(18px); }
  .sc-section:not(.is-inview) .sc-bridge { opacity: 0; }
  .sc-section:not(.is-inview) .sc-stats { opacity: 0; transform: translateY(20px); }
  .sc-section.is-settled .sc-flow::before, .sc-section.is-settled .sc-step, .sc-section.is-settled .sc-bridge, .sc-section.is-settled .sc-stats { transition: none; opacity: 1; transform: none; }
}

@media (max-width: 980px) {
  .sc-stats { grid-template-columns: 1fr; gap: 32px; padding: var(--space-6) var(--space-7); }
}

@media (max-width: 900px) {
  .sc-flow { grid-template-columns: 1fr; gap: var(--space-6); max-width: 460px; margin: 0 auto var(--space-6); }
  .sc-flow::before { top: 32px; bottom: 32px; left: 32px; right: auto; width: 2px; height: auto; background: linear-gradient(180deg, var(--c-grad-blue), var(--c-grad-magenta)); transform-origin: top center; }
  .sc-section:not(.is-inview) .sc-flow::before { transform: scaleY(0); }
  .sc-step { flex-direction: row; align-items: flex-start; text-align: left; gap: 20px; }
  .sc-step-text { align-items: flex-start; }
  .sc-step-h, .sc-step-p { max-width: none; }
  .sc-hopper { display: none; }
}

@media (max-width: 680px) {
  .sc-section { padding: var(--space-8) 0; }
  .sc-head { margin-bottom: var(--space-7); }
  .sc-h2 { font-size: 28px; }
  .sc-num { font-size: 46px; }
  .sc-num.is-placeholder { font-size: 36px; }
}

@media (max-width: 460px) {
  .sc-stats { gap: 28px 20px; }
}

@keyframes scPulse { 0% { opacity: 0; transform: scale(.7); } 30% { opacity: .7; } 100% { opacity: 0; transform: scale(1.45); } }

/* ===== HARDENING — gradient/kleur tegen theme-resets ===== */
.elementor-widget-bconnect_scenario .accent,
.elementor-widget-bconnect_scenario .sc-num {
	background: linear-gradient(90deg, #2301fb 0%, #a80290 100%) !important;
	-webkit-background-clip: text !important;
	background-clip: text !important;
	-webkit-text-fill-color: transparent !important;
	color: transparent !important;
	display: inline-block;
}