.bt-section { position: relative; padding: var(--space-8) 0; background: #FFFFFF; }
.bt-head { max-width: 760px; margin: 0 auto var(--space-8); text-align: center; }
.bt-head .eyebrow { justify-content: center; margin-bottom: 16px; white-space: nowrap; }
.bt-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; }
.bt-sub { font-family: var(--font-body); font-size: 15px; line-height: 1.5; color: var(--c-text-muted); margin: 6px 0 0; }
/* Bron versie A noemt deze regel .bt-subtitle en zet de marge op -8px
   (dichter onder de tegeltitel). Markup gebruikt nu .bt-subtitle; .bt-sub
   blijft staan voor eventueel hergebruik elders. */
.bt-subtitle { font-family: var(--font-body); font-size: 15px; line-height: 1.5; color: var(--c-text-muted); margin: -8px 0 0; }
.bt-lead { color: var(--c-text-muted); margin: 0 auto; max-width: 46em; }
.bt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: stretch; }
.bt-card { display: flex; flex-direction: column; background: var(--c-white); border-radius: var(--radius-feature); box-shadow: var(--shadow-card); border: 1px solid var(--c-border-soft); text-decoration: none; cursor: pointer; overflow: hidden; transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease); }
.bt-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); border-color: var(--c-border); }

@media (prefers-reduced-motion: reduce) {
  .bt-card { transition: box-shadow .22s var(--ease), border-color .22s var(--ease); }
  .bt-card:hover { transform: none; }
}

.bt-img-wrap { aspect-ratio: 3 / 2; min-height: 0; overflow: hidden; background: var(--c-lavender); display: flex; align-items: center; justify-content: center; padding: 16px; flex-shrink: 0; }
.bt-img { width: 100%; height: 100%; object-fit: contain; object-position: center; display: block; }
.bt-card-body { display: flex; flex-direction: column; gap: 14px; padding: 28px 32px 32px; flex: 1; }
.bt-title { font-family: var(--font-head); font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3); color: var(--c-navy); margin: 0; }
/* Cijfer en omschrijving naast elkaar (niet meer onder elkaar): de
   omschrijving staat achter het percentage en wrapt daar in twee regels.
   flex-wrap houdt het veilig op smalle kaarten — dan zakt de tekst weer
   onder het cijfer i.p.v. te knellen. */
.bt-outcome { display: flex; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 6px 14px; }
.bt-num { font-family: var(--font-head); font-weight: var(--fw-semibold); font-size: clamp(34px, 3.4vw, 44px); line-height: 1.04; letter-spacing: -0.03em; white-space: nowrap; padding: 0.02em 0.08em 0.08em 0; background: var(--gradient-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.bt-num-pre { font-size: 0.40em; font-weight: var(--fw-bold); letter-spacing: 0; vertical-align: 0.46em; margin-right: 0.12em; }
.bt-unit { font-size: 0.42em; font-weight: var(--fw-bold); vertical-align: 0.92em; margin-left: 0.05em; letter-spacing: 0; }
.bt-plus { font-size: 0.5em; font-weight: var(--fw-semibold); vertical-align: 0.58em; margin-left: 0.02em; }
.bt-outcome-cap { font-family: var(--font-body); font-size: 15px; line-height: 1.5; color: var(--c-text-muted); max-width: 26em; flex: 1 1 9em; }
.bt-desc { font-family: var(--font-body); font-size: 15px; line-height: 1.6; color: var(--c-text-muted); margin: 0; }
.bt-link { margin-top: auto; padding-top: 6px; font-family: var(--font-head); font-size: 15px; font-weight: var(--fw-bold); color: var(--c-navy); display: inline-flex; align-items: center; gap: 8px; transition: color .2s var(--ease), gap .2s var(--ease); }
.bt-link span { transition: transform .18s var(--ease); }
.bt-card:hover .bt-link { background: var(--gradient-text); -webkit-background-clip: text; background-clip: text; color: transparent; gap: 11px; }
.bt-card:hover .bt-link span { transform: translateX(3px); }
.bt-btn { margin-top: auto; width: 100%; white-space: normal; text-align: center; line-height: 1.3; }

@media (prefers-reduced-motion: no-preference) {
  .bt-grid { transition: opacity .6s var(--ease), transform .6s var(--ease); }
  .bt-section:not(.is-inview) .bt-grid { opacity: 0; transform: translateY(22px); }
  .bt-section.is-settled .bt-grid { transition: none; opacity: 1; transform: none; }
}

@media (max-width: 820px) {
  .bt-grid { gap: 20px; }
  .bt-card-body { padding: 22px 24px 28px; }
}

@media (max-width: 680px) {
  .bt-section { padding: var(--space-8) 0; }
  .bt-h2 { font-size: 28px; }
  .bt-grid { grid-template-columns: 1fr; gap: 20px; }
  .bt-img-wrap { padding: 12px; }
}

.bt-band { margin-top: var(--space-7); position: relative; overflow: hidden; display: grid; grid-template-columns: 1.2fr 1fr; gap: 44px; align-items: center; background: radial-gradient(90% 120% at 85% 15%, rgba(168, 2, 144, 0.28) 0%, rgba(35, 1, 251, 0.20) 45%, rgba(20, 20, 100, 0) 72%), #141464; border-radius: var(--radius-card); padding: clamp(28px, 3.4vw, 44px) clamp(28px, 3.6vw, 52px); box-shadow: 0 14px 34px -18px rgba(20,20,100,.30); }
.bt-band::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(rgba(255,255,255,.10) 1px, transparent 1.4px); background-size: 22px 22px; -webkit-mask-image: radial-gradient(120% 130% at 100% 0%, #000 0%, transparent 70%); mask-image: radial-gradient(120% 130% at 100% 0%, #000 0%, transparent 70%); }
.bt-band > * { position: relative; z-index: 1; }
.bt-band-h { font-family: var(--font-head); font-weight: var(--fw-semibold); font-size: clamp(24px, 2.6vw, 32px); line-height: 1.12; letter-spacing: -0.02em; color: #fff; margin: 0 0 14px; text-wrap: pretty; }
.bt-band .accent { background: var(--gradient-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.bt-band-p { font-family: var(--font-body); font-size: 15px; line-height: 1.6; color: rgba(255,255,255,.74); margin: 0 0 20px; max-width: 44em; }
.bt-band-link { font-family: var(--font-head); font-size: 15px; font-weight: var(--fw-bold); color: #fff; display: inline-flex; align-items: center; gap: 8px; transition: gap .2s var(--ease), color .2s var(--ease); }
.bt-band-link span { transition: transform .18s var(--ease); }
.bt-band-link:hover { gap: 11px; color: var(--c-sky); }
.bt-band-link:hover span { transform: translateX(3px); }
.bt-band-btn { align-self: flex-start; background: #fff; color: var(--c-navy); box-shadow: 0 10px 24px -12px rgba(0,0,0,.45); }
.bt-band-btn:hover { background: #fff; color: var(--c-navy); transform: translateY(-1px); box-shadow: 0 14px 30px -12px rgba(0,0,0,.55); }
.bt-band-pills { display: flex; flex-wrap: wrap; gap: 10px; align-content: center; }
.bt-pill { font-family: var(--font-head); font-size: 13.5px; font-weight: var(--fw-medium); color: rgba(255,255,255,.88); letter-spacing: -0.005em; white-space: nowrap; padding: 9px 16px; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16); }

@media (prefers-reduced-motion: no-preference) {
  .bt-band { transition: opacity .6s var(--ease) .12s, transform .6s var(--ease) .12s; }
  .bt-section:not(.is-inview) .bt-band { opacity: 0; transform: translateY(22px); }
  .bt-section.is-settled .bt-band { transition: none; opacity: 1; transform: none; }
}

@media (max-width: 820px) {
  .bt-band { grid-template-columns: 1fr; gap: 24px; padding: 30px 28px; }
  /* MOBIEL: de branche-pills (Boten en watersport, Zwembaden en spa,
     Buitenleven en tuin, Cosmetische klinieken, Opticiens en hoorzorg) weg
     op mobiel; tekst + CTA van de band blijven. Desktop (>820px)
     ongewijzigd. Het zijn er nog steeds vijf, dus de layout is niet
     veranderd (12-08-2026 andere sectoren). */
  .bt-band-pills { display: none; }
}

.bc-grad-text { background: var(--gradient-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.bt-band { background: linear-gradient(135deg, #2301fb 0%, #a80290 100%); }
.bt-band .accent { background: none !important; -webkit-background-clip: initial !important; background-clip: initial !important; -webkit-text-fill-color: #FFFFFF !important; color: #FFFFFF !important; }

/* ============================================================
   HARDENING — tegen theme-resets. V3-homepage: de "Ook in jouw
   branche"-band is een gradient-band met witte tekst; het
   accentcijfer (bt-num) en bc-grad-text blijven gradient-tekst.
   ============================================================ */
.elementor-widget-bconnect_branches .bc-grad-text,
.elementor-widget-bconnect_branches .bt-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_branches .btn-primary,
.elementor-widget-bconnect_branches .bt-btn {
	background: linear-gradient(90deg, #2301fb 0%, #a80290 100%) !important;
	color: #fff !important;
}
.elementor-widget-bconnect_branches .bt-band {
	background: linear-gradient(135deg, #2301fb 0%, #a80290 100%) !important;
}
.elementor-widget-bconnect_branches .bt-band .bt-band-h { color: #fff !important; }
/* Bron: rgba(255,255,255,.74) — niet hard wit. */
.elementor-widget-bconnect_branches .bt-band .bt-band-p { color: rgba(255,255,255,.74) !important; }

/* `.elementor a { box-shadow: none }` (0,1,1) verslaat `.bt-card` en
   `.bt-band-btn` (0,1,0) — beide zijn een <a>. Met een element-selector
   erbij zijn we net specifieker, zonder !important. */
a.bt-card { box-shadow: var(--shadow-card); }
a.bt-card:hover { box-shadow: var(--shadow-card-hover); }
a.bt-band-btn { box-shadow: 0 10px 24px -12px rgba(0,0,0,.45); }
a.bt-band-btn:hover { box-shadow: 0 14px 30px -12px rgba(0,0,0,.55); }

/* Zachte cyaan gloed linksonder in de band (bron: .bt-band::after). */
.bt-band::after {
	content: "";
	position: absolute;
	width: 380px;
	height: 380px;
	border-radius: 50%;
	left: -120px;
	bottom: -200px;
	pointer-events: none;
	background: radial-gradient(circle, rgba(88,208,245,.16) 0%, transparent 62%);
	filter: blur(18px);
}

/* Branchekaart: de KNOP is de link, de kaart is een gewone container
   (05-08-2026). Daarvoor was de hele kaart één <a> om stat, alinea en
   knop, waardoor de toegankelijke naam van die link een hele alinea lang was en
   een schermlezer die twee keer voorlas.

   GEEN klikbaar kaartvlak via een pseudo-element, en dat is bewust: op deze
   knop is `::after` al de pijl (.btn-arrow::after) en `::before` de
   sheen-animatie (.btn-primary::before), en `.btn` heeft `overflow: hidden`,
   waardoor een overlay-pseudo tóch tot de knop geclipt zou worden. Wil je het
   hele vlak alsnog klikbaar maken, hang de overlay dan aan een ander kind van de
   kaart (bijvoorbeeld de titel) of doe het met een klik-handler in JS. */
.bt-card { position: relative; }