/* ============================================================
   Bconnect Meer rendement Hero — widget-styling
   ------------------------------------------------------------
   SolHero (visual-variant) + lichte logobalk, uit de Claude
   Design-bron (upgrade-solutions.jsx + ingekort-solutions.css,
   au-hero-schil uit ingekort-automotive.css). Zelfstandig
   bestand volgens het Hero-stramien; tokens uit tokens.css.
   ============================================================ */

/* ===== Container (hero-scope; width:100% i.v.m. flex-secties) ===== */
.mr-hero .container,
.mr-hero + .hh-logobar-section .container {
  width: 100%;
  max-width: var(--container, 1280px);
  margin: 0 auto;
  padding: 0 var(--gutter, 56px);
}

/* ===== Hero-entrance (hh-in, zichtbare eindstaat = basis) ===== */
.hh-in { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .hh-in { transform: translateY(16px); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: calc(var(--i, 0) * 80ms); }
  .hh-in.is-in { opacity: 1; transform: none; }
  .au-hero.is-settled .hh-in { transition: none; opacity: 1; transform: none; }
}

/* ===== ZONE 1 — hero-schil (au-hero) ===== */
.au-hero { padding: 64px 0; min-height: clamp(640px, 72vh, 700px); display: flex; flex-direction: column; justify-content: center; position: relative; }
.au-hero > .container { width: 100%; position: relative; z-index: 1; }
.au-hero .hero-bg { position: absolute; inset: 0; background: #FFFFFF; pointer-events: none; }
.au-hero .hero-bg::after { display: none; }
.au-hero-stack { display: grid; grid-template-columns: 40% 60%; gap: 48px; align-items: center; }
.au-hero-copy { width: 100%; text-align: left; }
.au-hero h1 { font-family: var(--font-head); font-weight: var(--fw-semibold); font-size: clamp(30px, 3.2vw, 42px); line-height: 1.1; letter-spacing: -0.025em; color: var(--c-navy); margin: 14px 0 16px; max-width: 13em; }
.au-hero .lead { font-family: var(--font-body); font-size: 16.5px; line-height: 1.6; color: var(--c-text-muted); max-width: 30em; margin: 0 0 26px; }
.au-hero-actions { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.au-textlink { font-family: var(--font-head); font-size: 15px; font-weight: var(--fw-bold); color: var(--c-navy); display: inline-flex; align-items: center; gap: 7px; text-decoration: none; transition: color .18s var(--ease), gap .18s var(--ease); }
.au-textlink:hover { color: var(--c-grad-magenta); gap: 11px; }
.au-hero.sol-hero { min-height: 704px; }
@media (max-width: 720px) {
  .au-hero.sol-hero { min-height: 0; }
}

/* ===== SolHero visual-variant: beeld rechts krijgt volle ruimte ===== */
.sol-hero--visual .hero-bg::before { display: none; }
/* LET OP: lg-hero.css laadt hierna en heeft een ongescoopte
   `.sol-hero--visual .au-hero-stack { grid-template-columns: 1fr 1.32fr }`.
   Die wint hier op laadvolgorde, dus deze 1.05fr is op desktop DOOD.
   Bewust niet gescoopt gelaten: prefixen zou de kolomverdeling op desktop
   veranderen (copy 547->619px, beeld 722->650px). De stapelregel onderaan
   is wel geprefixt, want daar was het effect een echte bug. */
.sol-hero--visual .au-hero-stack { grid-template-columns: 1fr 1.05fr; gap: clamp(28px, 3vw, 48px); }
/* ===== Visual + gradient-gloed ================================
   Geen doosje meer om het dashboard: de omlijning, het witte vlak
   en de kaartschaduw zijn eraf. In plaats daarvan twee losse,
   geroteerde gradient-vlekken achter het beeld (linksboven koel
   navy/blauw, rechtsonder magenta) met z-index:-1 en `isolation:
   isolate` op de figure, zodat ze niet door de rest van de sectie
   lekken. Omdat de drager weg is, krijgt het dashboard een eigen
   plateauschaduw in drie lagen — contact, navy ambient en een
   hele wijde magenta-getinte laag — anders zou het zweven.
   Zelfde recept staat op .lg-hero-visual (/leadgeneratie/).
   ============================================================ */
.mr-hero-figure { margin: 0; min-width: 0; position: relative; isolation: isolate; padding: 0; background: none; }
.mr-hero-figure::before,
.mr-hero-figure::after { content: ""; position: absolute; z-index: -1; pointer-events: none; }
.mr-hero-figure::before {
  inset: -16% 26% 26% -18%;
  background:
    radial-gradient(58% 62% at 38% 34%, rgba(20,20,100,0.26), transparent 68%),
    radial-gradient(52% 56% at 70% 12%, rgba(35,1,251,0.24), transparent 70%);
  filter: blur(40px);
  transform: rotate(-7deg);
}
.mr-hero-figure::after {
  inset: 26% -18% -18% 26%;
  background:
    radial-gradient(56% 60% at 60% 62%, rgba(168,2,144,0.21), transparent 68%),
    radial-gradient(48% 52% at 28% 84%, rgba(35,1,251,0.20), transparent 72%);
  filter: blur(46px);
  transform: rotate(6deg);
}
/* De rechtse vlek steekt buiten het beeld uit; deze sectie clipte niet
   (de Meer leads-hero doet dat via .lg-sec) waardoor de pagina 78px
   horizontaal ging scrollen. `clip` i.p.v. `hidden`: dat maakt geen
   scroll-container en laat de verticale uitloop staan. */
.mr-hero { overflow-x: clip; }
.mr-hero-img {
  position: relative; z-index: 1;
  display: block; width: 100%; height: auto;
  border: 0; background: none;
}
/* Specificiteit .elementor-widget-container nodig: Elementor-core zet
   `.elementor img { border:none; border-radius:0; box-shadow:none }`
   (0,1,1) en dat verslaat een kale `.mr-hero-img` (0,1,0) — de oude
   kaartschaduw op dit beeld is daardoor nooit zichtbaar geweest. */
.elementor-widget-container .mr-hero-img {
  border-radius: var(--radius-feature);
  box-shadow:
    0 1.5px 4px rgba(20,20,100,0.10),
    0 26px 52px -22px rgba(20,20,100,0.30),
    0 60px 96px -40px rgba(168,2,144,0.22);
}
@media (max-width: 1024px) {
  .mr-hero .au-hero-stack, .mr-hero.sol-hero--visual .au-hero-stack { grid-template-columns: 1fr; gap: 32px; }
  .mr-hero-figure { max-width: 560px; }
}

/* ===== Proof-cijfers (zelfde opmaak als de Meer leads-hero) ===== */
.lg-hero-proof { list-style: none; margin: 36px 0 0; padding: 26px 0 0; border-top: 1px solid var(--c-border); display: flex; flex-wrap: wrap; gap: 14px 40px; }
.lg-hero-proof li { display: flex; flex-direction: column; gap: 3px; }
.lg-hero-proof-num { font-family: var(--font-head); font-weight: var(--fw-semibold); font-size: clamp(22px, 2vw, 27px); line-height: 1; letter-spacing: -0.02em; background: var(--brand-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lg-hero-proof-label { font-family: var(--font-body); font-size: 13px; line-height: 1.35; color: var(--c-text-soft); max-width: 18ch; }

/* ===== Logobalk (licht) — GEFIXTE containment ===============
   De 100vw-marquee is full-bleed; de full-width sectie clipt
   (overflow:hidden op de sectie), de band kan nergens om of
   door het menu bloeden. Container width:100% tegen de
   flex/margin-auto-krimp. ============================== */
.hh-logobar-section { background: transparent; min-height: 200px; display: flex; flex-direction: column; justify-content: center; padding: 0; overflow: hidden; }
.hh-logobar-section > .container { width: 100%; }
.hh-logobar-section .hh-logobar { margin-top: 0; border-top: none; padding-top: 32px; }
.hh-logobar { margin-top: 40px; padding-top: 0; border-top: 0; }
.hh-logobar-intro { font-family: var(--font-head); font-size: 26px; font-weight: var(--fw-semibold); color: var(--c-navy); margin: 0 0 20px; letter-spacing: -0.01em; text-align: center; }
.hh-logobar-intro .accent { background: linear-gradient(135deg, #2301fb, #a80290); -webkit-background-clip: text; background-clip: text; color: transparent; }

.au-logobar-divider { height: 1px; border: 0; background: var(--c-border); width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
.au-logobar-divider-top { margin-top: 0; margin-bottom: 28px; }
.hh-logobar-section .au-logobar-divider { display: none; }

.logo-marquee { overflow: hidden; -webkit-mask-image: none; mask-image: none; }
.au-logobar-marquee { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding-top: 26px; padding-bottom: 26px; }
.logo-marquee-track { display: flex; align-items: center; width: max-content; gap: 0; animation: logo-marquee var(--mq-duration, 80s) linear infinite; will-change: transform; }
.logo-marquee:hover .logo-marquee-track { animation-play-state: paused; }
.logo-marquee-item { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; min-width: auto; padding: 0 40px; background: transparent; width: auto; height: auto; min-height: 62px; margin: 0; }
.logo-marquee-item img { height: 45px; max-height: 45px; width: auto; max-width: 101px; object-fit: contain; filter: grayscale(100%); opacity: .85; background: transparent; transition: opacity .25s var(--ease); }
.logo-marquee-item img:hover { filter: grayscale(100%); opacity: 1; }

/* Gradient-band onder de intro, identiek aan de Meer leads-logobalk. */
.hh-logobar-section .au-logobar-marquee {
  background:
    radial-gradient(70% 150% at 10% -20%, rgba(88,208,245,.15) 0%, transparent 55%),
    radial-gradient(60% 130% at 94% 120%, rgba(255,255,255,.09) 0%, transparent 58%),
    linear-gradient(135deg, #2301fb 0%, #a80290 100%);
}
.hh-logobar-section .au-logobar-marquee .logo-marquee-item img,
.hh-logobar-section .au-logobar-marquee .logo-marquee-item img:hover {
  filter: brightness(0) invert(1); opacity: .82;
}
.hh-logobar-section .au-logobar-marquee .logo-marquee-item img:hover { opacity: 1; }

@keyframes logo-marquee { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }

@media (max-width: 680px) {
  .logo-marquee-item { padding: 0 24px; }
}

/* ============================================================
   Elementor-context + HARDENING — gradient/kleur afdwingen
   tegen theme-resets, geankerd op de widgetwrapper.
   ============================================================ */
.elementor-widget-bconnect_mr_hero { margin: 0 !important; }

.elementor-widget-bconnect_mr_hero .accent,
.elementor-widget-bconnect_mr_hero .hh-logobar-intro .accent,
.elementor-widget-bconnect_mr_hero .lg-hero-proof-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;
}
.elementor-widget-bconnect_mr_hero .btn-primary {
	background: linear-gradient(90deg, #2301fb 0%, #a80290 100%) !important;
	color: #fff !important;
}
.elementor-widget-bconnect_mr_hero .btn-primary:hover {
	background: linear-gradient(90deg, #3a1eff 0%, #c213ad 100%) !important;
	color: #fff !important;
}

/* ===== Defensieve marquee-layout (zie hero.css PATCH v0.3.1) ===== */
.elementor-widget-bconnect_mr_hero .logo-marquee { overflow: hidden !important; display: block; }
.elementor-widget-bconnect_mr_hero .logo-marquee-track {
	display: flex !important;
	flex-wrap: nowrap !important;
	align-items: center;
	width: max-content !important;
	animation: logo-marquee var(--mq-duration, 80s) linear infinite;
	will-change: transform;
}
.elementor-widget-bconnect_mr_hero .logo-marquee-item { flex: 0 0 auto !important; }
@media (prefers-reduced-motion: reduce) {
	.elementor-widget-bconnect_mr_hero .logo-marquee-track { animation: none; }
}

/* Mobiel: kleinere blur, anders smeren de vlekken op een klein
   scherm uit tot vage grijze plekken. */
@media (max-width: 767px) {
  .mr-hero-figure::before { filter: blur(30px); }
  .mr-hero-figure::after { filter: blur(30px); }
}

/* ============================================================
   NIEUWE HERO 13-08-2026 — laag uit "Meer rendement (4).html"
   ------------------------------------------------------------
   Deze laag staat achteraan zodat hij de eerdere regels hierboven
   verslaat, precies zoals de bron het doet (de export zet deze
   regels ook als laatste blok neer).

   1) GEEN GRADIENT-GLOED MEER achter het beeld. Het nieuwe
      workflow-dashboard heeft zelf al een lichte achtergrond met
      afgeronde hoeken en een schaduw; de twee blur-vlekken maakten
      de randen daaromheen vuil. De regels hierboven blijven staan
      (ze horen bij het oude beeld en /leadgeneratie/ gebruikt
      hetzelfde recept), hier worden ze alleen uitgezet.
   2) BEELD GROTER: 1fr / 1.4fr in plaats van de 1.32fr die
      lg-hero.css oplegt. GEMETEN: lg-hero.css laadt op deze pagina
      NA mr-hero.css (positie 30 tegen 10 in de <link>-volgorde) en
      heeft met `.sol-hero--visual .au-hero-stack` dezelfde
      specificiteit 0,2,0. Zonder extra houvast wint die dus en
      blijft het beeld op 1.32fr staan — dat is precies de lekkende
      regel die in OPENSTAAND.md staat. Daarom `.mr-hero` erbij
      (0,3,0): dan beslist de specificiteit en niet de volgorde.
   3) LINKERKOLOM STRAKKER: alles links uitgelijnd met vaste
      tussenruimtes, zodat kop, intro, knoppen en proof-cijfers één
      linkerlijn houden bij een langere kop.
   ============================================================ */

.sol-hero--visual .mr-hero-figure::before,
.sol-hero--visual .mr-hero-figure::after { display: none; content: none; }

@media (min-width: 1025px) {
  .mr-hero.sol-hero--visual .au-hero-stack { grid-template-columns: 1fr 1.4fr; }
  .mr-hero.sol-hero--visual .mr-hero-figure { max-width: none; justify-self: stretch; align-self: center; }
}

.sol-hero--visual .au-hero-copy { display: flex; flex-direction: column; align-items: flex-start; }
.sol-hero--visual .au-hero-copy .lg-eyebrow { margin: 0 0 16px; }
.sol-hero--visual .au-hero-copy h1 { max-width: 15em; text-wrap: balance; margin: 0 0 18px; }
.sol-hero--visual .au-hero-copy .lead { max-width: 36em; text-wrap: pretty; margin: 0 0 28px; }
.sol-hero--visual .au-hero-actions { gap: 24px; }
.sol-hero--visual .lg-hero-proof { width: 100%; max-width: 36em; margin-top: 34px; padding-top: 24px; gap: 14px 64px; }
.sol-hero--visual .lg-hero-proof-label { max-width: 20ch; }

/* ============================================================
   HERO-ANIMATIE 19-08-2026 — vervangt het statische beeld
   ------------------------------------------------------------
   Markup: hero-anim.php. Aansturing: de tweede lus in mr-hero.js.

   HERZIEN 19-08-2026: GEEN BROWSERVENSTER MEER.
   De eerste versie zette de scene in een nagemaakt browservenster
   (chrome-balk met stoplichtjes en adresbalk, app-logo, voetpil,
   en daaromheen een omlijnd wit vlak met slagschaduw). Met kader
   en schaduw las het als een plaatje dat op de pagina geplakt was
   — een bewegende afbeelding — in plaats van als iets dat bij de
   pagina hoort. Alle vensterdecoratie is eruit; het schema staat
   nu direct op de witte hero-achtergrond, net zoals de
   integratie-hub in mr-int (`.ig-hub-stage`) dat doet.

   GEVOLG VOOR DE MAATVOERING. De chrome-balk (62px) en het logo
   namen samen ~170px bovenin in. Die ruimte is uit de HOOGTE
   gehaald in plaats van leeg blijven staan: het doek ging van
   1440x950 naar 1440x750, alle y-coordinaten zijn -170. Daarnaast
   zijn de tussenruimtes in de rijen strakker (~49px -> ~38px), en
   die gewonnen breedte is in de kaarten gaan zitten zodat de
   labels een maat groter konden:

     label 16 -> 18.5px | pil 14.5 -> 16.5px | uitkomst 17 -> 19.5px
     integratie 12.5 -> 14.5px | team 15 -> 17.5px | banner 52 -> 56px
     kaart-icoon 34 -> 38px

   LET OP bij verder vergroten: de rij is horizontaal vol. Van pil
   tot uitkomst loopt de keten van x=8 tot x=1420 op een doek van
   1440 breed. Tekst nog groter maken kan alleen door de keten
   compacter te maken (smallere uitkomst-chips, of de pil eruit),
   niet door alleen de font-size op te hogen — dan lopen de labels
   uit hun kaart.

   DRIE DINGEN DIE BEWUST IN CSS STAAN EN NIET IN JS:

   1) HOOGTE VIA aspect-ratio. De bron zette per resize
      `stage.style.height`. Dat is een layout-write NA de eerste
      paint, dus een gegarandeerde CLS-hit op de zwaarste positie
      van de pagina (hero, boven de vouw). Met aspect-ratio staat
      de hoogte al goed voordat er een regel JS draait.

   2) DE GLOED ONDER DE BANNER. De bron herschreef elk frame
      `banner.style.boxShadow` met een 60px blur. Een box-shadow is
      geen composited property: elk frame werd een vlak van 640x132
      plus 60px blurmarge opnieuw gerasterd, 60x per seconde, het
      hele bezoek lang. Nu staat de schaduw vast op twee
      pseudo-elementen en pulseert alleen de OPACITY van de magenta
      laag, via een CSS-keyframe. Opacity draait op de compositor:
      nul repaints, nul JS per frame. De puls hield in de bron
      0.18-0.42 alpha met periode D/6 = 2,267s; hier is dat een
      vaste alpha 0.42 met opacity 0.43-1 en `alternate` op de
      helft van die periode, wat op hetzelfde neerkomt.

   3) STROKE-DASHARRAY. De bron zette die elk frame opnieuw op elke
      lijn ('1 1'), terwijl alleen de dashoffset verandert. Staat
      nu één keer hier.
   ============================================================ */

.mr-hero-anim { position: relative; }
.bch-stage {
  position: relative; width: 100%; aspect-ratio: 1440 / 950;
  overflow: hidden; contain: layout paint;
  font-family: var(--font-body);
}
.bch-scaler {
  position: absolute; left: 0; top: 0; width: 1440px; height: 950px;
  transform-origin: 0 0; transform: scale(0.5);
  /* Pas tonen zodra JS de juiste schaal heeft gezet; anders staat de
     scene één frame op ware grootte (1440px) in een kolom van ~700px. */
  opacity: 0; transition: opacity .25s linear;
}
.bch-stage.is-fit .bch-scaler { opacity: 1; }
.bch-stage, .bch-stage *, .bch-stage *::before, .bch-stage *::after { box-sizing: border-box; }
.bch-stage svg { display: block; max-width: none; border: 0; background: none; box-shadow: none; }

/* Geen kader, geen vlak, geen schaduw — alleen nog de laag die deint.
   will-change omdat die translate elk frame verandert: zonder eigen
   compositorlaag is dat een repaint van de complete scene. */
.bch-win { position: absolute; inset: 0; color: var(--c-navy); will-change: transform; }

/* ----- kaarten ----- */
.bch-pill {
  position: absolute; height: 64px; border-radius: 999px;
  background: var(--c-navy); color: #fff; display: flex; align-items: center;
  justify-content: center; font-family: var(--font-head);
  font-weight: var(--fw-semibold, 600); font-size: 23px; white-space: nowrap; padding: 0 26px;
  box-shadow: 0 8px 20px rgba(20,20,100,.28);
}
.bch-card {
  position: absolute; height: 190px; border-radius: 16px;
  background: #fff; border: 2px solid #e0e3ef;
  box-shadow: 0 2px 5px rgba(20,20,100,.05), 0 10px 24px rgba(20,20,100,.06);
}
.bch-ring {
  position: absolute; inset: -2px; border-radius: 16px;
  border: 2px solid var(--c-grad-blue); opacity: 0; pointer-events: none;
}
.bch-ring--grad {
  border: none; padding: 2px;
  background: linear-gradient(90deg, var(--c-grad-blue), var(--c-grad-magenta));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
}
.bch-dim { position: absolute; inset: 0; opacity: .4; color: var(--c-navy); }
.bch-dim > svg { position: absolute; left: 22px; top: 20px; }
.bch-lbl {
  position: absolute; left: 22px; top: 88px; font-family: var(--font-head);
  font-weight: var(--fw-semibold, 600); font-size: 25px; color: var(--c-navy);
  letter-spacing: -.01em; white-space: nowrap;
}
.bch-lbl--sm { font-size: 23px; }
.bch-q { font-family: var(--font-head); }
.bch-bar {
  position: absolute; left: 22px; top: 146px; width: 96px; height: 9px;
  border-radius: 4px; background: #edeff6;
}
.bch-bar i { display: block; width: 0; height: 100%; border-radius: 4px; background: #c7ccdd; }
.bch-chk {
  position: absolute; right: 16px; bottom: 15px; width: 34px; height: 34px;
  border-radius: 999px; background: #2eb559; box-shadow: 0 2px 6px rgba(46,181,89,.45);
  display: flex; align-items: center; justify-content: center;
  transform: scale(0); opacity: 0;
}
.bch-dot {
  position: absolute; right: 16px; top: 15px; width: 13px; height: 13px;
  border-radius: 999px; background: var(--c-grad-magenta); opacity: 0;
}

/* ----- uitkomsten, integraties, team ----- */
.bch-result {
  position: absolute; height: 76px; border-radius: 16px; background: #fff;
  border: 2px solid #2eb559; box-shadow: 0 10px 24px rgba(46,181,89,.18);
  display: flex; align-items: center; justify-content: center; gap: 12px; opacity: 0;
}
.bch-result span {
  font-family: var(--font-head); font-weight: var(--fw-semibold, 600);
  font-size: 26px; color: #0f8f36; white-space: nowrap;
}
.bch-mini {
  position: absolute; top: 608px; height: 96px; border-radius: 14px; background: #fff;
  border: 1.5px solid #e3e6f0; box-shadow: 0 8px 18px rgba(20,20,100,.08);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 7px; opacity: 0; color: var(--c-navy);
}
.bch-mini span {
  font-family: var(--font-head); font-weight: var(--fw-semibold, 600);
  font-size: 20px; color: var(--c-navy);
}
.bch-team {
  position: absolute; left: 795px; top: 604px; width: 283px; height: 96px;
  border-radius: 12px; background: #fff; border: 1.5px solid #e3e6f0;
  box-shadow: 0 8px 18px rgba(20,20,100,.08); display: flex; align-items: center;
  gap: 16px; padding: 0 20px; opacity: 0; color: var(--c-navy);
}
.bch-team-t {
  font-family: var(--font-head); font-weight: var(--fw-semibold, 600);
  font-size: 24px; color: var(--c-navy); white-space: nowrap;
}
.bch-team-s { font-size: 20.5px; color: #7b8190; margin-top: 2px; white-space: nowrap; }

.bch-divider {
  position: absolute; left: 24px; top: 282px; width: 1007px; height: 6px;
  border-radius: 3px; background-size: 200% 100%;
  background-image: linear-gradient(90deg, var(--c-grad-blue), var(--c-grad-magenta), var(--c-grad-blue));
}

/* ----- lijnen ----- */
.bch-trunks, .bch-wires {
  position: absolute; left: 0; top: 0; width: 1440px; height: 950px;
  pointer-events: none; color: var(--c-navy);
}
.bch-wires path { fill: none; stroke: var(--c-navy); stroke-linecap: round; stroke-linejoin: round; }
.bch-trunk {
  fill: none; stroke: var(--c-navy); stroke-width: 2.6; stroke-linecap: round;
  stroke-dasharray: 1 1; stroke-dashoffset: 1; opacity: 0;
}
.bch-arr .sh { stroke-width: 2.4; stroke-dasharray: 1 1; stroke-dashoffset: 1; opacity: 0; }
.bch-arr .hd { stroke-width: 2.4; opacity: 0; }
.bch-brace { stroke-dasharray: 1 1; stroke-dashoffset: 1; opacity: 0; }
.bch-dash { stroke-width: 2.2; stroke-dasharray: 5 8; opacity: 0; }
.bch-finalarrow .sh, .bch-finalarrow .hd { stroke-width: 3.2; }
.bch-bcheck { stroke-dasharray: 1 1; stroke-dashoffset: 1; }

/* ----- slotbanner ----- */
.bch-banner {
  position: absolute; left: 488px; top: 776px; width: 757px; height: 152px;
  border-radius: 30px; display: flex; align-items: center; gap: 28px;
  padding-left: 56px; opacity: 0; isolation: isolate;
  background: linear-gradient(100deg, var(--c-grad-blue) 0%, #6a06c9 45%, var(--c-grad-magenta) 100%);
}
/* Vaste schaduwen op twee pseudo-elementen (zie punt 2 in de kop): de
   magenta laag pulseert op opacity, de blauwe staat stil. z-index:-1 zet
   ze achter het verloop; `background: none` zorgt dat er alleen schaduw
   getekend wordt en geen vlak. */
.bch-banner::before,
.bch-banner::after {
  content: ""; position: absolute; inset: 0; border-radius: 30px;
  z-index: -1; pointer-events: none; background: none;
}
.bch-banner::before {
  box-shadow: 0 26px 60px rgba(168,2,144,.42);
  opacity: .43;
  animation: bch-glow 1.133s ease-in-out infinite alternate;
}
.bch-banner::after { box-shadow: 0 10px 30px rgba(35,1,251,.22); }
@keyframes bch-glow { from { opacity: .43; } to { opacity: 1; } }
/* Buiten beeld staat de hele animatie stil; dan hoeft ook deze keyframe
   niet te draaien. JS zet .is-playing aan/uit vanuit de IntersectionObserver. */
.bch-stage:not(.is-playing) .bch-banner::before { animation-play-state: paused; }
.bch-banner-ic {
  width: 92px; height: 92px; border-radius: 999px; background: #fff;
  display: flex; align-items: center; justify-content: center; flex: none;
}
.bch-banner-t {
  font-family: var(--font-head); font-weight: 700; font-size: 66px; color: #fff;
  letter-spacing: -.02em; white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .bch-scaler { transition: none; }
  .bch-banner::before { animation: none; opacity: .8; }
}