/* De bron zet op deze sectie een inline font-family: "Roc Grotesk"
   (PropositionJourney in blocks.jsx), waardoor ook de lead-alinea in de
   kop-font staat. Zonder dit stond .jr-lead in de body-font en viel de
   sectie ~27px lager uit dan het ontwerp. */
.jr-section { position: relative; isolation: isolate; overflow: hidden; padding: var(--space-8) 0; background: #EEF1F8; font-family: var(--font-head); }
.jr-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: #EEF1F8; }
.jr-bg::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(20,20,100,.05) 1px, transparent 1px); background-size: 24px 24px; -webkit-mask-image: radial-gradient(circle at 50% 40%, black 0%, transparent 72%); mask-image: radial-gradient(circle at 50% 40%, black 0%, transparent 72%); }
.jr-head { max-width: 760px; margin: 0 auto var(--space-9); text-align: center; }
.jr-head .eyebrow { justify-content: center; margin-bottom: 16px; }
.jr-h2 { font-family: var(--font-head); font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); font-weight: var(--fw-semibold); color: var(--c-navy); text-wrap: balance; margin-bottom: 16px; }
.jr-lead { color: var(--c-text-muted); margin: 0 auto; max-width: 44em; }
.jr-timeline { position: relative; --jr-node: 66px; --jr-edge: 10%; max-width: 1120px; margin: 0 auto; }
.jr-steps { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; margin: 0; padding: 0; list-style: none; }
.jr-steps::before { content: ""; position: absolute; z-index: -1; top: calc(var(--jr-node) / 2 - 1.5px); left: var(--jr-edge); right: var(--jr-edge); height: 3px; border-radius: 3px; background: var(--gradient-brand); }
.jr-steps::after { content: ""; position: absolute; z-index: 0; top: calc(var(--jr-node) / 2 - 4.5px); left: var(--jr-edge); width: 9px; height: 9px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px rgba(168,2,144,.4), 0 0 12px 4px rgba(168,2,144,.55), 0 0 8px 3px rgba(35,1,251,.5); opacity: 0; }
.jr-step { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; }
.jr-step-body { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.jr-step-node { position: relative; z-index: 1; width: var(--jr-node); height: var(--jr-node); border-radius: 999px; display: grid; place-items: center; background: var(--c-white); box-shadow: 0 0 0 6px #EEF1F8, var(--shadow-soft); transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.jr-step-icon { width: 44px; height: 44px; border-radius: 999px; display: grid; place-items: center; background: var(--c-surface); border: 1px solid var(--c-border); }
.jr-step-icon i, .jr-step-icon svg { width: 22px; height: 22px; stroke-width: 1.9; color: var(--c-navy); }
.jr-step-p1 .jr-step-icon { border-color: color-mix(in srgb, var(--c-grad-blue) 35%, var(--c-border)); }
.jr-step-p1 .jr-step-icon i, .jr-step-p1 .jr-step-icon svg { color: var(--c-grad-blue); }
.jr-step-p2 .jr-step-icon { border-color: color-mix(in srgb, var(--c-grad-magenta) 35%, var(--c-border)); }
.jr-step-p2 .jr-step-icon i, .jr-step-p2 .jr-step-icon svg { color: var(--c-grad-magenta); }
.jr-step-node:hover { transform: translateY(-3px); }
.jr-step-title { color: var(--c-navy); font-family: var(--font-head); font-weight: var(--fw-semibold); font-size: 18px; line-height: 1.2; letter-spacing: -0.01em; margin: 4px 0 0; }
.jr-step-text { font-family: var(--font-body); font-size: 14px; line-height: 1.5; color: var(--c-text-soft); margin: 0; max-width: 20em; }
.jr-phase-inline { display: none; }
.jr-phases { display: grid; grid-template-columns: 3fr 2fr; gap: 20px; margin-top: 28px; }
.jr-phase { position: relative; border-radius: var(--radius-card); padding: 12px 18px; text-align: center; border: 1px solid var(--c-border); display: flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; cursor: pointer; }
.jr-phase-arrow { font-family: var(--font-head); font-weight: var(--fw-bold); font-size: 14px; line-height: 1; color: var(--c-navy); opacity: .55; transition: transform .18s var(--ease), opacity .18s var(--ease); }
.jr-phase:hover .jr-phase-arrow { opacity: 1; transform: translateX(3px); }
.jr-phase::before { content: ""; position: absolute; top: -1px; left: 14px; right: 14px; height: 3px; border-radius: 3px; }
.jr-phase-1 { background: color-mix(in srgb, var(--c-grad-blue) 6%, var(--c-white)); border-color: color-mix(in srgb, var(--c-grad-blue) 20%, var(--c-border)); }
.jr-phase-1::before { background: linear-gradient(90deg, var(--c-grad-blue), color-mix(in srgb, var(--c-grad-blue) 55%, var(--c-grad-magenta))); }
.jr-phase-2 { background: color-mix(in srgb, var(--c-grad-magenta) 6%, var(--c-white)); border-color: color-mix(in srgb, var(--c-grad-magenta) 20%, var(--c-border)); }
.jr-phase-2::before { background: linear-gradient(90deg, color-mix(in srgb, var(--c-grad-magenta) 55%, var(--c-grad-blue)), var(--c-grad-magenta)); }
.jr-phase-label { font-family: var(--font-head); font-weight: var(--fw-bold); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-navy); }
.jr-actions { display: flex; justify-content: center; gap: 16px; margin-top: var(--space-7); }
.jr-btn { flex: 1 1 0; max-width: 340px; justify-content: center; }
.jr-btn span { display: inline-block; transition: transform .18s var(--ease); }
.jr-btn:hover span { transform: translateX(4px); }

@media (prefers-reduced-motion: no-preference) {
  .jr-steps::after { animation: jrSparkX 3.4s var(--ease) infinite; }
  .jr-step { transition: opacity .6s var(--ease), transform .6s var(--ease); }
  .jr-section:not(.is-inview) .jr-step { opacity: 0; transform: translateY(18px); }
  .jr-section.is-inview .jr-step { transition-delay: calc(0.06s * var(--i)); }
}

@media (max-width: 860px) {
  .jr-timeline { max-width: 520px; }
  .jr-steps { grid-template-columns: 1fr; gap: 0; --jr-node: 56px; }
  .jr-steps::before, .jr-steps::after { display: none; }
  .jr-step { position: relative; flex-direction: row; align-items: flex-start; text-align: left; flex-wrap: nowrap; gap: 18px; padding-bottom: 30px; }
  .jr-step:not(:last-child)::before { content: ""; position: absolute; z-index: 0; top: calc(var(--jr-node) / 2); left: calc(var(--jr-node) / 2 - 1.5px); width: 3px; height: 100%; background: linear-gradient(180deg, var(--c-grad-blue), var(--c-grad-magenta)); }
  .jr-step > .jr-step-node { flex: none; }
  .jr-step-body { align-items: flex-start; }
  .jr-step-title { margin-top: 6px; }
  .jr-step-text { max-width: none; }
  .jr-step.is-phase-start { flex-wrap: nowrap; }
  .jr-step.is-phase-start .jr-step-body { padding-top: 26px; }
  .jr-phase-inline { display: block; order: 0; width: auto; position: absolute; top: 2px; left: calc(var(--jr-node) + 18px); margin: 0; font-family: var(--font-head); font-weight: var(--fw-bold); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-navy); }
  .jr-phases { display: none; }
  .jr-actions { flex-direction: column; align-items: stretch; }
  .jr-btn { max-width: none; }
}

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

@keyframes jrSparkX { 0% { left: var(--jr-edge); opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { left: calc(100% - var(--jr-edge)); opacity: 0; } }

/* ===== HARDENING — gradient/kleur tegen theme-resets ===== */
.elementor-widget-bconnect_journey .accent {
	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;
}
.elementor-widget-bconnect_journey .btn-primary {
	background: linear-gradient(90deg, #2301fb 0%, #a80290 100%) !important;
	color: #fff !important;
}
.elementor-widget-bconnect_journey .btn-primary:hover {
	background: linear-gradient(90deg, #3a1eff 0%, #c213ad 100%) !important;
	color: #fff !important;
}
.elementor-widget-bconnect_journey .jr-step-icon svg { stroke: currentColor; }