/* ============================================================
   cf-trackrecord.css — blok 12 van /chatfunctie-op-je-website/.
   Bouwt op widgets/shared/bconnect-cf.css (handle `bconnect-cf`).
   Bron: upgrade-chatfunctie.css, "12 — TRACK RECORD".

   Het enige donkere blok van de pagina. De sectie draagt `.cf-track` en
   niet `.cf-sec`: eigen ritme, eigen achtergrond, en de twee
   achtergrondwassen van .cf-bg-* zouden hier tegen het navy in werken.
   De reveal voor `.cf-track` staat daarom apart in bconnect-cf.css.

   Let op: blok 6 (cf-stappen) heeft óók een cijferblok, maar dan licht.
   Twee track-stramienen op één pagina is bewust; niet samenvoegen.
   ============================================================ */

.cf-track { position: relative; display: block; width: 100%; box-sizing: border-box; padding: clamp(48px, 5vw, 76px) 0; background: #141464; overflow: hidden; }
.cf-track::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(680px 380px at 12% 0%, rgba(35, 1, 251, .55), transparent 62%), radial-gradient(560px 320px at 92% 100%, rgba(168, 2, 144, .42), transparent 60%); }
.cf-track::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(rgba(255, 255, 255, .16) 1px, transparent 1.5px); background-size: 24px 24px; -webkit-mask-image: radial-gradient(70% 70% at 50% 40%, #000, transparent 78%); mask-image: radial-gradient(70% 70% at 50% 40%, #000, transparent 78%); opacity: .5; }
.cf-track > .container { position: relative; z-index: 1; }

/* De koppen uit de gedeelde stylesheet zijn navy op licht. Op dit blok
   moeten ze omgekeerd: de gradient eraf, wit erop. */
.cf-track .cf-eyebrow { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: rgba(255, 255, 255, .72); -webkit-text-fill-color: rgba(255, 255, 255, .72); }
.cf-track .cf-h2 { color: rgba(255, 255, 255, .62); }
.cf-track .cf-h2 .accent { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: #fff; -webkit-text-fill-color: #fff; }
.cf-track .cf-intro { color: rgba(255, 255, 255, .76); }

.cf-track-nums { display: grid; width: 100%; box-sizing: border-box; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: clamp(32px, 4vw, 46px); }
.cf-track-num { display: flex; box-sizing: border-box; flex-direction: column; gap: 8px; padding: 24px 22px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14); border-radius: 16px; }

/* DE TWEE SELECTOREN HIERONDER STAAN OP `>` EN NIET OP AFSTAND.
   Het getal wordt door bconnect-shared.js in een <span data-bc-count> gezet
   voor de tel-animatie, en die span staat IN de <b>. Met een losse
   `.cf-track-num span` ving de labelregel dat kind mee: gemeten stond het
   getal daardoor op 14px en het label ook op 14px, terwijl het plusteken —
   toen nog kale tekst in de <b> — wél de 36px hield. Het getal was dus
   kleiner dan zijn eigen label en het plusteken groter dan het getal. */
.cf-track-num > b { font-family: var(--font-head); font-weight: var(--fw-bold); font-size: clamp(26px, 3vw, 36px); line-height: 1; letter-spacing: -.02em; color: #fff; font-variant-numeric: tabular-nums; }
.cf-track-num > span { font-size: 14px; line-height: 1.4; color: rgba(255, 255, 255, .72); }

/* Het plusteken: kleiner dan het getal, op dezelfde basislijn. De maat is
   .46em, dezelfde verhouding als `.tr-plus` op de homepagina (23,92px op
   een getal van 52px). Dat widget zet er ook nog een vertical-align van
   13,87px op, waardoor het plusteken daar iets omhoog staat; hier blijft
   het op de basislijn. em en geen px, zodat het meeschaalt met de clamp. */
.cf-track-plus { font-size: .46em; font-weight: inherit; vertical-align: baseline; margin-left: .08em; letter-spacing: 0; }

@media (max-width: 1024px) {
	.cf-track-nums { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}