.tr-section { position: relative; padding: var(--space-8) 0; background: radial-gradient(110% 100% at 50% 0%, rgba(168, 2, 144, 0.42) 0%, rgba(35, 1, 251, 0.32) 42%, rgba(20, 20, 100, 0) 72%), #141464; }
.tr-head { max-width: 760px; margin: 0 auto var(--space-7); text-align: center; }
.tr-head .eyebrow { justify-content: center; margin-bottom: 16px; white-space: nowrap; }
.tr-head .eyebrow.on-dark { color: var(--c-white); }
.tr-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-white); text-wrap: balance; margin-bottom: 16px; }
.tr-h2 .accent { background: linear-gradient(135deg, #2301fb, #a80290); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tr-lead { color: rgba(255,255,255,.82); margin: 0 auto; max-width: 46em; }
.tr-stats { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); max-width: 1080px; margin: 0 auto; padding: var(--space-2) var(--space-4); background: transparent; border: 0; border-radius: 0; box-shadow: none; overflow: visible; }
.tr-stats::before { display: none; }
.tr-stat { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; padding: 6px 18px; }
.tr-stat + .tr-stat::before { content: ""; position: absolute; left: 0; top: 6%; bottom: 6%; width: 1px; background: linear-gradient(180deg, transparent, rgba(255,255,255,.2) 22%, rgba(255,255,255,.2) 78%, transparent); }
.tr-num { display: inline-block; font-family: var(--font-head); font-weight: var(--fw-semibold); font-size: clamp(40px, 4.2vw, 52px); line-height: 1.08; letter-spacing: -0.035em; white-space: nowrap; padding: 0.04em 0.12em 0.06em 0.02em; background: none; -webkit-background-clip: initial; background-clip: initial; -webkit-text-fill-color: var(--c-white); color: var(--c-white); }
.tr-suffix { font-size: 0.30em; font-weight: var(--fw-bold); letter-spacing: 0; vertical-align: 0.98em; margin-left: 0.12em; }
.tr-plus { font-size: 0.46em; font-weight: var(--fw-semibold); vertical-align: 0.58em; margin-left: 0.04em; padding-right: 0.06em; }
.tr-label { font-family: var(--font-body); font-size: 16px; line-height: 1.5; color: rgba(255,255,255,.72); max-width: 12em; text-wrap: pretty; }
.tr-cta { margin-top: var(--space-9); display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; }
.tr-cta-line { font-family: var(--font-head); font-size: 19px; font-weight: var(--fw-medium); letter-spacing: -0.01em; color: var(--c-navy); max-width: 30em; }
.tr-cta .btn { padding: 14px 26px; font-size: 15px; }

@media (prefers-reduced-motion: no-preference) {
  .tr-head { transition: opacity .6s var(--ease), transform .6s var(--ease); }
  .tr-stat { transition: opacity .6s var(--ease), transform .6s var(--ease); transition-delay: calc(var(--i) * .1s + .12s); }
  .tr-cta { transition: opacity .6s var(--ease) .5s, transform .6s var(--ease) .5s; }
  .tr-section:not(.is-inview) .tr-head { opacity: 0; transform: translateY(16px); }
  .tr-section:not(.is-inview) .tr-stat { opacity: 0; transform: translateY(18px); }
  .tr-section:not(.is-inview) .tr-cta { opacity: 0; transform: translateY(14px); }
  .tr-section.is-settled .tr-head, .tr-section.is-settled .tr-stat, .tr-section.is-settled .tr-cta { transition: none; opacity: 1; transform: none; }
}

@media (max-width: 900px) {
  .tr-stats { grid-template-columns: repeat(2, 1fr); gap: var(--space-7) var(--space-2); max-width: 600px; padding: var(--space-7) var(--space-4); }
  .tr-stat { padding: 4px 14px; }
  .tr-stat + .tr-stat::before { display: none; }
}

@media (max-width: 680px) {
  .tr-section { padding: var(--space-8) 0; }
  .tr-h2 { font-size: 28px; }
  .tr-num { font-size: clamp(34px, 9.5vw, 50px); }
  .tr-cta-line { font-size: 17px; }
}

@media (max-width: 767px) {
  .tr-stats { grid-template-columns: repeat(2, 1fr); gap: 34px 14px; max-width: 420px; margin: 0 auto; padding: 4px 0; }
  .tr-stat { padding: 0 8px; }
  .tr-stat + .tr-stat::before { display: none; }
  .tr-num { font-size: clamp(26px, 7.4vw, 42px); white-space: nowrap; }
  .tr-label { font-size: 14px; }
}

@media (max-width: 360px) {
  .tr-stats { grid-template-columns: 1fr; gap: 28px; max-width: 260px; }
  .tr-num { white-space: normal; }
}

/* Eindstaat uit de bron: twee subtiele radials over de merk-gradient. */
.tr-section {
  background:
    radial-gradient(80% 130% at 6% -14%, rgba(88,208,245,.15) 0%, transparent 52%),
    radial-gradient(70% 120% at 98% 118%, rgba(255,255,255,.10) 0%, transparent 58%),
    linear-gradient(135deg, #2301fb 0%, #a80290 100%);
}
.tr-h2 .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 (zelfde aanpak als hero.css).
   V3-homepage: de track-record-balk is een gradient-band
   (blauw naar magenta) met witte cijfers en witte koppen.
   Let op: hero.css bevat een ouder, alvast geschreven blok dat
   .tr-num gradient-tekst geeft; de definitieve cascade zet de
   cijfers wit op de gradient-band. Deze selectors zijn bewust
   specifieker (.tr-section ertussen) zodat wit altijd wint,
   ongeacht de volgorde waarin widget-stylesheets laden.
   ============================================================ */
.elementor-widget-bconnect_trackrecord .tr-section {
	/* Eindstaat uit de bron: twee radials over de merk-gradient (stond hier
	   op de platte gradient, waardoor de lichtaccenten linksboven/rechtsonder
	   ontbraken). */
	background:
		radial-gradient(80% 130% at 6% -14%, rgba(88,208,245,.15) 0%, transparent 52%),
		radial-gradient(70% 120% at 98% 118%, rgba(255,255,255,.10) 0%, transparent 58%),
		linear-gradient(135deg, #2301fb 0%, #a80290 100%) !important;
}
.elementor-widget-bconnect_trackrecord .tr-section .tr-num {
	background: none !important;
	-webkit-background-clip: initial !important;
	background-clip: initial !important;
	-webkit-text-fill-color: #FFFFFF !important;
	color: #FFFFFF !important;
}
.elementor-widget-bconnect_trackrecord .tr-section .tr-h2 { color: #FFFFFF !important; }
/* Bron: .tr-lead = rgba(255,255,255,.82), .tr-label = rgba(255,255,255,.72).
   Stond hier op hard wit, waardoor de labels op de gradientband te fel waren. */
.elementor-widget-bconnect_trackrecord .tr-section .tr-lead { color: rgba(255,255,255,.82) !important; }
.elementor-widget-bconnect_trackrecord .tr-section .tr-label { color: rgba(255,255,255,.72) !important; }
.elementor-widget-bconnect_trackrecord .tr-section .tr-h2 .accent {
	background: none !important;
	-webkit-background-clip: initial !important;
	background-clip: initial !important;
	-webkit-text-fill-color: #FFFFFF !important;
	color: #FFFFFF !important;
}

/* Stippenlaag over de gradientband, met radiale masker rechtsboven — komt uit
   de bron (.tr-section::before). Ontbrak volledig in het thema. */
.tr-section::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image: radial-gradient(rgba(255,255,255,.09) 1px, transparent 1.4px);
	background-size: 22px 22px;
	-webkit-mask-image: radial-gradient(120% 130% at 82% 0%, #000 0%, transparent 70%);
	        mask-image: radial-gradient(120% 130% at 82% 0%, #000 0%, transparent 70%);
}