.cb-hero {
  border-radius: 40px 40px 0 0;
  background:
    linear-gradient(140deg, rgba(17, 39, 70, 0.55) 0%, rgba(10, 23, 41, 0.9) 60%),
    #0A1729;
  background-blend-mode: normal;
  overflow: hidden;
  padding: 88px 30px 64px 64px;
  display: grid;
  grid-template-columns: minmax(0, 600px) minmax(0, 660px);
  justify-content: space-between;
  align-items: center;
  gap: 40px;
}

.cb-hero .cb-superheader { margin-bottom: 24px; }

.cb-hero--sup-green .cb-superheader { color: var(--cb-green); }

.cb-hero h1 {
  color: #fff;
  margin: 0 0 24px;
  /* Fluid: 40px (mobiel, Figma) tot de theme-waarde (64px) op desktop */
  font-size: clamp(40px, 8vw, 64px);
  line-height: 1.1;
}

.cb-hero h1 .accent { color: var(--cb-green); }

.cb-hero p {
  color: rgba(248, 249, 250, 0.82);
  font-size: 18px;
  line-height: 28px;
  max-width: 600px;
  margin: 0 0 48px;
}

.cb-hero__buttons { display: flex; gap: 16px; }

.cb-btn__arrow {
  width: 1.1em;
  height: 0.8em;
  margin-left: 0.35em;
  vertical-align: -0.05em;
}

/* Datasets-variant: smallere tekstkolom, meer ruimte voor de illustratie.
   Exacte Figma-maten (Datasets_Desktop, via desktop-app afgelezen 2026-07-07):
   hero-padding 80/40, tekstkolom 416, illustratie 729.82x525.03, gap 134.
   De knoppenrij mag — net als in Figma — breder zijn dan de tekstkolom;
   hij loopt dan de kolom-gap in. */
.cb-hero--datasets {
  position: relative;
  padding: 80px 40px;
  grid-template-columns: minmax(0, 416px) minmax(0, 730px);
}
/* Subtiel raster over het hero-vlak, zoals de home-hero — lift het donkere
   navy op zodat het glas beter tot zijn recht komt. */
.cb-hero--datasets::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.028) 1px, transparent 1px);
  background-size: 56px 56px;
  pointer-events: none;
}
.cb-hero--datasets > * { position: relative; z-index: 1; }
.cb-hero--datasets .cb-hero__buttons {
  width: max-content;
  flex-wrap: wrap;
}
.cb-hero--datasets .cb-btn { white-space: nowrap; }

/* Center-variant (Integrations): geen visual, alles gecentreerd.
   Figma Integrations-Full_Desktop: hero 1360x565, padding 80/40,
   superheader groen, intro max ~700px. */
.cb-hero--center {
  position: relative;
  padding: 80px 40px;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  text-align: center;
}
/* Decoratieve achtergrondlaag: vult het hele hero-vlak, achter de tekst. */
.cb-hero--center > .cb-hero__fx {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}
.cb-hero--center > div { position: relative; z-index: 1; }
.cb-hero--center h1 { max-width: 900px; }
.cb-hero--center p { margin: 0 auto; max-width: 640px; }
.cb-hero--center p:not(:last-child) { margin-bottom: 48px; }
.cb-hero--center .cb-hero__buttons { justify-content: center; }

.cb-hero__diagram img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 24px;
}

/* ---------- Cash-flow-hero: linkse tekst, groene superheader, CSS-dashboard ---------- */
.cb-hero--cashflow { align-items: center; position: relative; }
.cb-hero--cashflow .cb-superheader { color: var(--cb-green, #8FFD76); }
/* Omgevingsgloed in de hero. Figma (frame 1440): twee volle capsules op 20%
   met layer-blur 400 — oranje 816x401 r-boven, groen 680x334 l-onder. Een
   radial-gradient dooft vanuit één punt te snel uit; een egale gekleurde blob
   met blur houdt het brede plateau vast, dus komt de gloed even sterk door als
   in Figma. Blobs lopen bewust buiten het hero-vlak (overflow:hidden klipt). */
.cb-hero--cashflow::before,
.cb-hero--cashflow::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 0;
  border-radius: 9999px;
  filter: blur(140px);
}
.cb-hero--cashflow::before {            /* oranje, rechtsboven */
  width: 57%;
  aspect-ratio: 816 / 401;
  top: -14%;
  right: -6%;
  background: rgba(255, 90, 54, 0.20);
}
.cb-hero--cashflow::after {             /* groen, linksonder */
  width: 47%;
  aspect-ratio: 680 / 334;
  bottom: -12%;
  left: -6%;
  background: rgba(52, 211, 153, 0.20);
}
.cb-hero--cashflow > * { position: relative; z-index: 1; }

/* ---- Cash-flow-dashboard: CSS-native, container-query-geschaald ----
   Ontwerpruimte 614x468 (Figma 1215:10359). 1em = 16px bij ~615px breed →
   font-size 2.6cqw; álle maten in em/%, dus de card schaalt als één geheel. */
.cb-cashcard {
  container-type: inline-size;
  position: relative;
  width: 100%;
  padding-right: 3%;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
/* Gekleurde diepte achter de card: groen→oranje gradient-blur + twee blobs
   (Figma: groen l-boven, oranje r-boven; gradient-rect a0.30, blur). */
.cb-cashcard__gradblur {
  position: absolute;
  left: 4%; top: 6%;
  width: 84%; height: 80%;
  border-radius: 9999px;
  background: linear-gradient(105deg, rgba(52, 211, 153, 0.30), rgba(255, 90, 54, 0.30));
  filter: blur(64px);
  z-index: 0;
}
.cb-cashcard__glow {
  position: absolute;
  width: 32%; aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(50px);
  z-index: 0;
  pointer-events: none;
}
.cb-cashcard__glow--orange { top: -8%; right: 6%; background: rgba(255, 90, 54, 0.40); }
.cb-cashcard__glow--green  { top: -6%; left: 6%; background: rgba(52, 211, 153, 0.40); }

.cb-cashcard__panel {
  position: relative;
  z-index: 1;
  width: 91.5%;
  font-size: 2.6cqw;
  border-radius: 2em;             /* 32px */
  padding: 2em;                   /* 32px */
  /* Liquid glass zoals cb-invwin: getinte radials op donker semi-transparant
     glas, zodat de gradblur/glows erachter erdoorheen schemeren */
  background:
    radial-gradient(150% 130% at 82% -16%, rgba(255, 150, 110, 0.20) 0%, rgba(255, 120, 80, 0.07) 30%, transparent 60%),
    radial-gradient(130% 130% at 2% 114%, rgba(52, 211, 153, 0.14) 0%, transparent 52%),
    linear-gradient(158deg, rgba(66, 58, 54, 0.42) 0%, rgba(36, 32, 34, 0.44) 50%, rgba(18, 16, 22, 0.52) 100%);
  backdrop-filter: blur(40px) saturate(1.15);
  -webkit-backdrop-filter: blur(40px) saturate(1.15);
  border: 1px solid rgba(255, 230, 220, 0.10);
  box-shadow:
    inset 0 1px 0 rgba(255, 240, 230, 0.22),
    inset 0 -1px 0 rgba(255, 200, 180, 0.07),
    0 0 6em rgba(255, 140, 100, 0.10),
    0 0.5em 2em rgba(0, 0, 0, 0.37);
  display: flex;
  flex-direction: column;
  gap: 2.4em;                     /* ~41.5px Figma-sectiegap */
}
/* Liquid-glass lichtrand: 1px gradient-ring, fel in de hoeken linksboven en
   rechtsonder (zelfde mask-techniek als .cb-invwin__window::after) */
.cb-cashcard__panel::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg,
    rgba(255, 246, 240, 0.75) 0%,
    rgba(255, 255, 255, 0.12) 26%,
    rgba(255, 255, 255, 0.03) 50%,
    rgba(255, 220, 200, 0.14) 74%,
    rgba(190, 245, 220, 0.45) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  z-index: 3;
}
/* Bovenrij: label+bedrag links, groene pijl-cirkel rechts, onderrand-lijn */
.cb-cashcard__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding-bottom: 1.5em;          /* 24px */
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}
.cb-cashcard__headings { display: flex; flex-direction: column; gap: 0.1875em; }
.cb-cashcard__label {
  font-size: 0.75em;              /* 12px */
  font-weight: 400;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}
.cb-cashcard__amount {
  font-size: 2em;                 /* 32px */
  font-weight: 700;
  line-height: 1.18;
  color: #fff;
}
.cb-cashcard__arrowcircle {
  flex: none;
  width: 3em; height: 3em;        /* 48px */
  border-radius: 50%;
  background: #34D399;
  display: flex; align-items: center; justify-content: center;
}
.cb-cashcard__arrowcircle svg { width: 1em; height: 1em; }
/* Processing-speed: gradient-balk 85% + labels */
.cb-cashcard__speed { display: flex; flex-direction: column; gap: 1em; }
.cb-cashcard__bar {
  display: block;
  height: 0.5em;                  /* 8px */
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.10);
  overflow: hidden;
}
.cb-cashcard__barfill {
  display: block;
  width: 85%;
  height: 100%;
  border-radius: 9999px;
  background: linear-gradient(90deg, #FF5A36 0%, #FFC107 50%, #34D399 100%);
  /* Vult langzaam van links naar rechts bij pageload; 'backwards' houdt de
     balk op 0 tijdens de start-delay */
  animation: cb-cashbar-fill 2.8s cubic-bezier(0.3, 0.6, 0.25, 1) 0.4s backwards;
}
@keyframes cb-cashbar-fill {
  from { width: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .cb-cashcard__barfill { animation: none; }
}
.cb-cashcard__speedrow { display: flex; justify-content: space-between; }
.cb-cashcard__sub { font-size: 0.75em; font-weight: 400; color: rgba(255, 255, 255, 0.55); }
.cb-cashcard__sub--green { color: #34D399; }
/* Stat-tegels: glass, sterk afgerond (Figma radius 32) */
.cb-cashcard__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1em;
}
.cb-cashcard__stat {
  padding: 1em;                   /* 16px */
  border-radius: 2em;             /* 32px */
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: flex; flex-direction: column; gap: 0.25em;
}
.cb-cashcard__statname { font-size: 0.75em; font-weight: 400; color: rgba(255, 255, 255, 0.55); }
.cb-cashcard__statval  { font-size: 1em; font-weight: 700; color: #fff; }
/* Zwevende, licht gekantelde "Day 1"-badge (glass) */
.cb-cashcard__badge {
  position: absolute;
  z-index: 2;
  top: 12%;
  right: 0;
  font-size: 2.6cqw;
  width: 7.375em;                 /* ~118px */
  aspect-ratio: 1;
  border-radius: 1em;             /* 16px */
  transform: rotate(7deg);
  background: linear-gradient(160deg, rgba(40, 56, 74, 0.92), rgba(16, 26, 40, 0.94));
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 1.125em 2.25em rgba(3, 10, 20, 0.5);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15em;
}
.cb-cashcard__badge svg { width: 2.375em; height: 2.375em; margin-bottom: 0.4em; }
.cb-cashcard__badge b { color: #fff; font-size: 1em; font-weight: 700; }
.cb-cashcard__badge span { color: rgba(255, 255, 255, 0.6); font-size: 0.75em; font-weight: 400; }

/* ---------- Datasets-dashboard: in CSS opgebouwde hero-illustratie ----------
   Ontwerpruimte 819x584 (Figma-node 1129:37481). Alles schaalt via cqw:
   1em = 16px bij 819px containerbreedte, dus de compositie gedraagt zich
   als een afbeelding op elke breedte. */

.cb-herodash { container-type: inline-size; width: 100%; }

.cb-herodash__canvas {
  position: relative;
  aspect-ratio: 819 / 584;
  font-size: 1.954cqw;
  line-height: 1.2;
}

/* Gloed-blobs */
.cb-herodash__glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
/* Gekleurde gloed-blobs áchter het glas — zoals de home-hero: geven de
   backdrop-blur kleur om te frosten, zodat het glas oplicht i.p.v. dof blijft. */
.cb-herodash__glow--green {
  left: 20%; top: 20%;
  width: 34em; height: 22em;
  border-radius: 16em;
  background: rgba(60, 203, 125, 0.22);
  filter: blur(3.2em);
}
.cb-herodash__glow--orange {
  left: 6%; top: 58%;
  width: 9em; height: 9em;
  background: rgba(255, 107, 71, 0.24);
  filter: blur(2.6em);
}
.cb-herodash__glow--blue {
  right: -2%; top: 4%;
  width: 20em; height: 15em;
  border-radius: 12em;
  background: rgba(56, 189, 248, 0.22);
  filter: blur(3.5em);
}
.cb-herodash__glow--purple {
  right: 8%; bottom: 2%;
  width: 18em; height: 13em;
  border-radius: 10em;
  background: rgba(168, 120, 250, 0.20);
  filter: blur(3.5em);
}

/* Gefanwaaierde factuurkaarten.
   Stapelvolgorde in het canvas: gloed (auto) < pijl (1) < kaartenstapel (2)
   < reporting-paneel (3). Die 3 is wat de kaart écht áchter het paneel laat
   verdwijnen: de stapel is door z-index een eigen stacking context, dus geen
   enkele kaart kan er bovenuit komen. */
.cb-herodash__stack {
  position: absolute;
  left: 4%; top: 24%;
  width: 32%;
  aspect-ratio: 3 / 4;
  z-index: 2;
}
.cb-herodash__ghost,
.cb-herodash__card {
  position: absolute;
  inset: 0;
  border-radius: 0.75em;
}
.cb-herodash__ghost {
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(255, 255, 255, 0.05);
}
.cb-herodash__ghost--1 { transform: translate(4%, -7%) rotate(-14deg); opacity: 0.55; }
.cb-herodash__ghost--2 { transform: translate(8%, -14%) rotate(-17deg); opacity: 0.42; background: rgba(51, 224, 122, 0.09); }
.cb-herodash__ghost--3 { transform: translate(12%, -21%) rotate(-20deg); opacity: 0.32; }
.cb-herodash__ghost--4 { transform: translate(16%, -28%) rotate(-23deg); opacity: 0.22; background: rgba(51, 224, 122, 0.07); }
.cb-herodash__ghost--5 { transform: translate(20%, -35%) rotate(-26deg); opacity: 0.14; }

.cb-herodash__card {
  transform: rotate(-11deg);
  /* Liquid glass, zoals de hero-cards op home/engine */
  background:
    radial-gradient(150% 130% at 82% -16%, rgba(120, 200, 255, 0.16) 0%, rgba(90, 160, 230, 0.05) 30%, transparent 60%),
    radial-gradient(130% 130% at 2% 114%, rgba(52, 211, 153, 0.10) 0%, transparent 52%),
    linear-gradient(165deg, #16233A 0%, #0E1828 70%);
  border: 1px solid rgba(200, 230, 255, 0.12);
  box-shadow:
    inset 0 1px 0 rgba(220, 240, 255, 0.16),
    0 1.2em 2.6em rgba(3, 10, 20, 0.55);
  padding: 0.9em 1.1em 1em;
  display: flex;
  flex-direction: column;
}
/* 1px gradient-lichtrand, fel in de hoeken (zelfde mask-techniek als de hero's) */
.cb-herodash__card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg,
    rgba(235, 246, 255, 0.55) 0%,
    rgba(255, 255, 255, 0.10) 26%,
    rgba(255, 255, 255, 0.03) 50%,
    rgba(180, 215, 255, 0.13) 74%,
    rgba(170, 245, 210, 0.36) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}
.cb-herodash__dots { display: flex; gap: 0.35em; margin-bottom: 0.7em; }
.cb-herodash__dots i {
  width: 0.4em; height: 0.4em;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
}
.cb-herodash__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.6em;
  padding: 0.55em 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}
.cb-herodash__row span {
  font-size: 0.68em;
  color: rgba(255, 255, 255, 0.55);
  white-space: nowrap;
}
.cb-herodash__row b {
  font-size: 0.72em;
  font-weight: 500;
  color: #EDF1F7;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cb-herodash__row--head { border-bottom-color: rgba(255, 255, 255, 0.16); }
.cb-herodash__row--head span {
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-size: 0.6em;
  color: rgba(255, 255, 255, 0.5);
}
.cb-herodash__row--last { border-bottom: 0; }

/* ---------- Kaartenlus ----------
   De voorste lineitem-kaart schuift naar rechts en verdwijnt achter het
   reporting-paneel; de kaart die erachter klaarstaat schuift naar voren en
   neemt zijn plek in. Onzichtbaar (achter het paneel) keert de kaart terug
   naar de bovenkant van de waaier en komt daar weer binnen. Drie kaarten,
   24s per ronde = een kaartwissel per 8s — hetzelfde rustige tempo als de
   logo-carousel (28s) en de drift van de CTA-gloed (26s).
   De groene ghost-kaarten blijven onaangeroerd staan, net als de pijl.

   Twee losse animaties op één element: cardflow raakt alleen transform en
   opacity (compositor-vriendelijk), cardz doet de stapelvolgorde. */
.cb-herodash__card {
  animation:
    cb-herodash-cardflow 24s linear infinite,
    cb-herodash-cardz 24s linear infinite;
}
/* Startposities in de lus: 1 = voorste, 2 = wachtend erachter, 3 = verborgen */
.cb-herodash__card--2 { animation-delay: -16s, -16s; }
.cb-herodash__card--3 { animation-delay:  -8s,  -8s; }

@keyframes cb-herodash-cardflow {
  /* Voorste kaart, in rust (identiek aan de statische positie) */
  0%, 20% {
    transform: translate(0, 0) rotate(-11deg) scale(1);
    opacity: 1;
    animation-timing-function: cubic-bezier(0.5, 0, 0.75, 0.55);
  }
  /* Volledig achter het paneel. 170% van de eigen breedte is ruim genoeg dat
     ook de slagschaduw van de kaart (blur 2.6em) niet meer links van de
     paneelrand uitkomt; pas dáárna begint het uitfaden. */
  30% {
    transform: translate(170%, -6%) rotate(-5deg) scale(0.94);
    opacity: 1;
    animation-timing-function: linear;
  }
  /* Uitfaden gebeurt onzichtbaar, midden achter het paneel */
  34% {
    transform: translate(178%, -8%) rotate(-4deg) scale(0.92);
    opacity: 0;
    animation-timing-function: linear;
  }
  /* Onzichtbaar terug naar de bovenkant van de waaier */
  57% {
    transform: translate(10%, -17%) rotate(-16.5deg) scale(0.92);
    opacity: 0;
    animation-timing-function: cubic-bezier(0.25, 0.8, 0.35, 1);
  }
  /* Klaarstaan achter de voorste kaart, met een randje in beeld */
  68%, 90% {
    transform: translate(3%, -5.5%) rotate(-13deg) scale(0.96);
    opacity: 1;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  }
  /* Naar voren, in de plek die de vertrekkende kaart net vrijmaakt */
  100% {
    transform: translate(0, 0) rotate(-11deg) scale(1);
    opacity: 1;
  }
}

/* 3 = voorste/vertrekkende kaart, 2 = schuift naar voren (blijft onder de
   vertrekkende), 1 = wachtstand, 0 = geparkeerd en onzichtbaar. De dubbele
   stops laten z-index springen i.p.v. interpoleren. */
@keyframes cb-herodash-cardz {
  0%, 33.9%  { z-index: 3; }
  34%, 57.9% { z-index: 0; }
  58%, 89.9% { z-index: 1; }
  90%, 100%  { z-index: 2; }
}

@media (prefers-reduced-motion: reduce) {
  .cb-herodash__card { animation: none; }
  /* Zonder beweging liggen de drie kaarten exact op elkaar; één volstaat. */
  .cb-herodash__card--2,
  .cb-herodash__card--3 { display: none; }
}

/* Verbindingspijl — blijft staan; de kaart schuift er overheen. */
.cb-herodash__arrow {
  position: absolute;
  left: 38%; top: 43%;
  width: 12.5%;
  z-index: 1;
}

/* Dashboard-paneel — ligt vóór de kaartenstapel (z-index 3), zodat de
   linkerkaart erachter verdwijnt in plaats van eroverheen te schuiven. */
.cb-herodash__panel {
  position: absolute;
  left: 52%; top: 1.5%;
  width: 44.5%; height: 92%;
  z-index: 3;
  border-radius: 1.6em;
  /* Liquid glass, zoals de reporting-/invoice-cards op home/engine */
  background:
    radial-gradient(150% 130% at 82% -16%, rgba(120, 200, 255, 0.20) 0%, rgba(90, 160, 230, 0.07) 30%, transparent 60%),
    radial-gradient(130% 130% at 2% 114%, rgba(52, 211, 153, 0.14) 0%, transparent 52%),
    linear-gradient(160deg, #1B2A40 0%, #0E1A2C 60%);
  /* Geen backdrop-filter: de onderste laag is dekkend, dus er valt niets te
     blurren. Weggehaald omdat de browser hem anders elke frame opnieuw zou
     berekenen terwijl de kaart erachter langs schuift. */
  border: 1px solid rgba(200, 230, 255, 0.12);
  box-shadow:
    inset 0 1px 0 rgba(220, 240, 255, 0.20),
    0 0 3.5em rgba(255, 255, 255, 0.10),
    0 1.4em 3em rgba(3, 10, 20, 0.45);
  padding: 1.7em 1.8em;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
/* 1px gradient-lichtrand, fel in de hoeken (zelfde mask-techniek als de hero's) */
.cb-herodash__panel::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg,
    rgba(235, 246, 255, 0.60) 0%,
    rgba(255, 255, 255, 0.10) 26%,
    rgba(255, 255, 255, 0.03) 50%,
    rgba(180, 215, 255, 0.14) 74%,
    rgba(170, 245, 210, 0.40) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  z-index: 2;
}
.cb-herodash__panelhead { display: flex; align-items: center; gap: 0.9em; }
.cb-herodash__appicon {
  width: 1.9em; height: 1.9em;
  border-radius: 0.5em;
  background: rgba(56, 189, 248, 0.14);
  display: grid;
  place-items: center;
}
.cb-herodash__appicon svg { width: 0.95em; height: 0.95em; }
.cb-herodash__apptitle {
  font-size: 0.72em;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.88);
}
.cb-herodash__live {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.45em 1em;
  border-radius: 999em;
  border: 1px solid rgba(74, 222, 128, 0.38);
  background: rgba(74, 222, 128, 0.07);
  font-size: 0.62em;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #4ADE80;
}
.cb-herodash__live i {
  width: 0.55em; height: 0.55em;
  border-radius: 50%;
  background: #4ADE80;
}

.cb-herodash__stats {
  margin-top: 1.2em;
  padding: 1em 0.6em;
  border-radius: 1em;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.05);
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}
.cb-herodash__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35em;
  text-align: center;
}
.cb-herodash__stat + .cb-herodash__stat { border-left: 1px solid rgba(255, 255, 255, 0.06); }
.cb-herodash__statval {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  font-size: 1.15em;
  font-weight: 500;
}
.cb-herodash__statval svg { width: 0.85em; height: 0.85em; }
.cb-herodash__statval--up { color: #38BDF8; }
.cb-herodash__statval--down { color: #818CF8; }
.cb-herodash__statname { font-size: 0.78em; font-weight: 600; color: rgba(255, 255, 255, 0.92); }

.cb-herodash__panellabel {
  font-size: 0.66em;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
/* De grafiek vult de resthoogte en krimpt als eerste, zodat de
   klantenkaart eronder altijd binnen het paneel blijft. */
.cb-herodash__chart {
  margin-top: 1.2em;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.cb-herodash__bars {
  display: flex;
  align-items: flex-end;
  gap: 0.45em;
  flex: 1 1 auto;
  min-height: 2.8em;
  max-height: 7.2em;
  margin-top: 0.9em;
}
.cb-herodash__bars i {
  flex: 1;
  height: calc(var(--h) * 100%);
  border-radius: 0.22em 0.22em 0 0;
  background: rgba(255, 255, 255, 0.08);
}
.cb-herodash__bars i.is-hl {
  background: linear-gradient(180deg, #7DD3FC 0%, #38BDF8 35%, #0369A1 100%);
  border-radius: 0.35em 0.35em 0 0;
}
/* Maanden die nog moeten komen: een lage, gedempte plaatshouder in plaats van
   een balk, zodat de grafiek geen omzet toont die nog niet bestaat. */
.cb-herodash__bars i.is-empty {
  background: rgba(255, 255, 255, 0.04);
}
.cb-herodash__axis {
  display: block;
  margin-top: 0.5em;
  font-size: 0.6em;
  color: rgba(255, 255, 255, 0.46);
}

.cb-herodash__customers {
  flex-shrink: 0;
  margin-top: 1.2em;
  padding: 1.1em 1.3em 1em;
  border-radius: 0.9em;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
}
.cb-herodash__custhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8em;
  margin-bottom: 1em;
}
.cb-herodash__custhead .cb-herodash__panellabel {
  font-size: 0.6em;
  letter-spacing: 0.05em;
  white-space: nowrap;
}
.cb-herodash__custhead svg { width: 0.9em; height: 0.9em; flex: none; }
.cb-herodash__custrow {
  display: grid;
  grid-template-columns: 6.8em 1fr;
  align-items: center;
  gap: 0.8em;
}
.cb-herodash__custrow + .cb-herodash__custrow { margin-top: 0.7em; }
.cb-herodash__custrow > span:first-child {
  font-size: 0.68em;
  color: rgba(255, 255, 255, 0.82);
  white-space: nowrap;
}
.cb-herodash__track {
  display: block;
  height: 1.45em;
  border-radius: 999em;
  background: rgba(255, 255, 255, 0.06);
}
.cb-herodash__fill {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: var(--w);
  height: 100%;
  padding-right: 0.7em;
  border-radius: inherit;
  background: linear-gradient(90deg, #2FBF66 0%, #4ADE80 100%);
  font-size: 0.64em;
  font-weight: 700;
  color: #064E3B;
  white-space: nowrap;
}
.cb-herodash__custaxis {
  display: flex;
  justify-content: space-between;
  margin-top: 0.15em;
}
.cb-herodash__custaxis span {
  font-size: 0.6em;
  color: rgba(255, 255, 255, 0.42);
}

/* ---------- Invoice-hero: smallere tekstkolom, grid-raster + teal gloed ----------
   Origineel (hero-window-ontwerp): subtiel raster over het hele hero-vlak en een
   brede teal/groene gloed rechtsboven die door het glass-venster heen schijnt. */
.cb-hero--invoices {
  position: relative;
  grid-template-columns: minmax(0, 540px) minmax(0, 700px);
}
.cb-hero--invoices::before {            /* raster */
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.028) 1px, transparent 1px);
  background-size: 56px 56px;
  pointer-events: none;
}
.cb-hero--invoices::after {             /* teal gloed, rechtsboven */
  content: "";
  position: absolute;
  top: -22%;
  right: -6%;
  width: 56%;
  aspect-ratio: 1.5;
  border-radius: 9999px;
  background: linear-gradient(120deg, rgba(52, 211, 153, 0.24), rgba(45, 212, 191, 0.30));
  filter: blur(110px);
  pointer-events: none;
}
.cb-hero--invoices > * { position: relative; z-index: 1; }

/* ---------- Invoice-dashboard: CSS-native browservenster ----------
   Nagebouwd van images/engine/hero-window.png (1552x1300; venster 1312x1070).
   Ontwerpruimte = het venster op halve schaal: 656x535, 1em = 16px →
   font-size 2.44cqw. Alle maten in em/%, dus schaalt als één geheel. */

.cb-invwin { container-type: inline-size; width: 100%; }

.cb-invwin__window {
  position: relative;
  font-size: 2.44cqw;
  border-radius: 1.25em;                /* 20px */
  /* Licht, neutraal glas: semi-transparante basis zodat de donkere hero
     (met raster + gloed) erdoorheen schemert; de teal is een subtiele tint,
     geen verzadigde petrol-vulling. Backdrop-blur frost de achtergrond. */
  background:
    radial-gradient(150% 130% at 82% -16%, rgba(150, 240, 224, 0.28) 0%, rgba(120, 210, 200, 0.10) 30%, transparent 60%),
    radial-gradient(130% 130% at 2% 114%, rgba(120, 230, 180, 0.12) 0%, transparent 52%),
    linear-gradient(158deg, rgba(56, 82, 92, 0.42) 0%, rgba(26, 44, 54, 0.44) 50%, rgba(14, 28, 36, 0.52) 100%);
  backdrop-filter: blur(18px) saturate(1.15);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
  border: 1px solid rgba(200, 240, 236, 0.10);
  box-shadow:
    inset 0 1px 0 rgba(220, 250, 245, 0.24),
    inset 0 -1px 0 rgba(160, 220, 215, 0.08),
    0 0 6em rgba(120, 210, 195, 0.14),
    0 2.2em 4.5em rgba(2, 12, 14, 0.5);
  overflow: hidden;
}
/* Liquid-glass lichtrand: een 1px gradient-ring die fel oplicht in de
   linkerbovenhoek en rechteronderhoek (lens die het licht vangt) en dof is
   op de andere randen. Mask-compositing toont alleen de 1px padding-ring. */
.cb-invwin__window::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg,
    rgba(240, 252, 250, 0.80) 0%,
    rgba(255, 255, 255, 0.12) 26%,
    rgba(255, 255, 255, 0.03) 50%,
    rgba(210, 240, 236, 0.16) 74%,
    rgba(200, 245, 236, 0.50) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  z-index: 3;
}

/* Browserbalk: traffic lights links, URL-pill gecentreerd.
   Transparant zodat de teal-gloed ook langs de bovenrand doorkomt. */
.cb-invwin__chrome {
  position: relative;
  display: flex;
  align-items: center;
  height: 3.4em;                        /* ~54px */
  padding: 0 1.5em;
  background: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.cb-invwin__dots { display: flex; gap: 0.5em; }
.cb-invwin__dots i {
  width: 0.75em; height: 0.75em;
  border-radius: 50%;
}
.cb-invwin__dots i:nth-child(1) { background: #F4645C; }
.cb-invwin__dots i:nth-child(2) { background: #FBBE3C; }
.cb-invwin__dots i:nth-child(3) { background: #3BC456; }
.cb-invwin__url {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.4em 1.6em;
  border-radius: 0.5em;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.07);
  font-size: 0.8em;
  color: rgba(255, 255, 255, 0.45);
  white-space: nowrap;
}

.cb-invwin__body { padding: 1.75em 1.6em 1.9em; }

/* Stat-tegels */
.cb-invwin__stats {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1.3em;
}
.cb-invwin__stat {
  position: relative;
  border-radius: 0.75em;
  border: 1px solid rgba(255, 255, 255, 0.06);
  /* Doorschijnend glas: de venster-gloed erachter bepaalt de tint, dus de
     rechter tegel wordt vanzelf teal en de linker blijft donker. */
  background:
    linear-gradient(150deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.02) 32%, rgba(255, 255, 255, 0) 60%),
    rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    inset 0 -1px 0 rgba(255, 255, 255, 0.03);
  padding: 1em 1.2em 1.1em;
  display: flex;
  flex-direction: column;
  gap: 0.45em;
}
/* Lichtrand rond de tegel (fel linksboven, dof daarna, oplichtend rechtsonder) */
.cb-invwin__stat::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(140deg,
    rgba(235, 255, 251, 0.90) 0%,
    rgba(255, 255, 255, 0.12) 26%,
    rgba(255, 255, 255, 0) 55%,
    rgba(170, 248, 230, 0.50) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}
.cb-invwin__stat span { font-size: 0.8em; color: rgba(255, 255, 255, 0.65); white-space: nowrap; }
.cb-invwin__stat b { font-size: 2em; font-weight: 700; line-height: 1.1; color: #fff; }
.cb-invwin__stat em { font-style: normal; font-size: 0.8em; font-weight: 600; color: #4ADE80; }

/* Factuurtabel */
.cb-invwin__table {
  position: relative;
  margin-top: 1.5em;
  border-radius: 0.75em;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.015) 26%, rgba(255, 255, 255, 0) 55%),
    rgba(255, 255, 255, 0.012);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    inset 0 -1px 0 rgba(255, 255, 255, 0.03);
  overflow: hidden;
}
.cb-invwin__table::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(140deg,
    rgba(230, 255, 250, 0.55) 0%,
    rgba(255, 255, 255, 0.06) 32%,
    rgba(255, 255, 255, 0) 60%,
    rgba(160, 245, 226, 0.28) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
}
.cb-invwin__row {
  display: grid;
  grid-template-columns: 2.3fr 1.6fr 1.5fr 1fr;
  align-items: center;
  gap: 0.8em;
  padding: 1.05em 1.3em;
  background: transparent;
}
.cb-invwin__row + .cb-invwin__row { border-top: 1px solid rgba(255, 255, 255, 0.07); }
.cb-invwin__row span,
.cb-invwin__row b {
  font-size: 0.92em;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.88);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cb-invwin__row--head { background: rgba(255, 255, 255, 0.045); }
.cb-invwin__row--head span { font-size: 0.8em; color: rgba(255, 255, 255, 0.55); }
.cb-invwin__pill {
  font-style: normal;
  display: inline-block;
  padding: 0.28em 1em;
  border-radius: 999em;
  border: 1px solid rgba(74, 222, 128, 0.45);
  background: rgba(74, 222, 128, 0.08);
  font-size: 0.86em;
  font-weight: 500;
  color: #4ADE80;
}
.cb-invwin__pill--review {
  border-color: rgba(245, 166, 35, 0.5);
  background: rgba(245, 166, 35, 0.08);
  color: #F5A623;
}

/* Review → Approved flip: de Approved-pill bepaalt de celbreedte (geen
   layout-shift), de Review-pill ligt er als overlay bovenop en kantelt
   weg op --flip; daaronder kantelt Approved in. */
.cb-invwin__flip {
  position: relative;
  display: inline-block;
  perspective: 300px;
}
.cb-invwin__flip .cb-invwin__pill {
  opacity: 0;
  transform: rotateX(-82deg);
  animation: cb-invwin-flip-in 0.4s ease-out forwards;
  animation-delay: var(--flip, 1s);
}
.cb-invwin__flip .cb-invwin__pill--review {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 1;
  transform: none;
  animation: cb-invwin-flip-out 0.4s ease-in forwards;
  animation-delay: var(--flip, 1s);
}
@keyframes cb-invwin-flip-in {
  from { opacity: 0; transform: rotateX(-82deg); }
  to   { opacity: 1; transform: rotateX(0deg); }
}
@keyframes cb-invwin-flip-out {
  from { opacity: 1; transform: rotateX(0deg); }
  to   { opacity: 0; transform: rotateX(82deg); }
}
@media (prefers-reduced-motion: reduce) {
  .cb-invwin__flip .cb-invwin__pill { animation: none; opacity: 1; transform: none; }
  .cb-invwin__flip .cb-invwin__pill--review { display: none; }
}

/* ---------- Billing-flow-diagram: CSS-native vervanging van hero-diagram.png ----------
   Bronnen → Billing Engine → Invoices/Data. Ontwerpruimte 700x655;
   1em = 16px bij 700px containerbreedte → font-size 2.2857cqw. Alle maten
   in em/%, dus de compositie schaalt als één afbeelding. */

/* Hero-vlak: zelfde vaag raster als de engine-hero (cb-hero--invoices). */
.cb-hero--flow { position: relative; }
.cb-hero--flow::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.028) 1px, transparent 1px);
  background-size: 56px 56px;
  pointer-events: none;
}
.cb-hero--flow > * { position: relative; z-index: 1; }

.cb-flowmap { container-type: inline-size; width: 100%; }

/* Bronnen-/resultaten-groepen zijn layout-transparant: de kaarten blijven
   absolute kinderen van het canvas (desktop) resp. gecentreerde blokken in de
   canvas-kolom (mobiel). */
.cb-flowmap__sources,
.cb-flowmap__outputs { display: contents; }

/* Mobiele flow-lijnen-overlay: standaard verborgen (desktop gebruikt de vaste
   SVG-paden); de mobiele query zet 'm op display:block. */
.cb-flowmap__mlines { display: none; }

.cb-flowmap__canvas {
  position: relative;
  aspect-ratio: 700 / 655;
  font-size: 2.2857cqw;
  line-height: 1.25;
  font-family: inherit;
}

/* Gloed-blurbs achter het glas: geven de backdrop-blur kleur om te frosten. */
.cb-flowmap__blur {
  position: absolute;
  border-radius: 9999px;
  pointer-events: none;
  z-index: 0;
}
.cb-flowmap__blur--blue   { left: -4%; top: -2%;  width: 38%; height: 26%; background: rgba(56, 189, 248, 0.22);  filter: blur(3.5em); }
.cb-flowmap__blur--purple { right: -5%; top: 2%;  width: 36%; height: 24%; background: rgba(168, 120, 250, 0.20); filter: blur(3.5em); }
.cb-flowmap__blur--green  { left: 30%; top: 38%;  width: 40%; height: 24%; background: rgba(60, 203, 125, 0.22);  filter: blur(3.2em); }
.cb-flowmap__blur--teal   { left: 8%;  top: 70%;  width: 44%; height: 22%; background: rgba(45, 212, 191, 0.14);  filter: blur(3.5em); }

.cb-flowmap__lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}
/* Sparks alleen tonen als de browser ze over het pad kan laten reizen;
   anders blijven de statische eindpunt-dots het beeld dragen. */
.cb-flowmap__spark { display: none; }
@supports (offset-path: path("M0 0 L1 1")) {
  .cb-flowmap__spark {
    display: block;
    filter: drop-shadow(0 0 0.25em rgba(255, 255, 255, 0.65));
    animation: cb-flowmap-spark var(--dur, 3.2s) linear var(--delay, 0s) infinite;
  }
}
@keyframes cb-flowmap-spark {
  0%   { offset-distance: 0%;   opacity: 0; }
  12%  { opacity: 1; }
  82%  { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .cb-flowmap__spark { display: none !important; }
}

/* Gedeelde liquid-glass-card (Figma-recept): neutraal melkig glas met een
   luminantie-gradiënt van boven (licht, frosted) naar onder (donker), lichtinval
   van boven — brede witte wash bovenin, felle 1px-highlight op de bovenrand die
   langs de zijkanten wegdooft — en een royale, bijna squircle-achtige radius. */
.cb-flowmap__card {
  position: absolute;
  z-index: 1;
  border-radius: 1.6em;
  background:
    radial-gradient(95% 55% at 50% -8%, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.05) 55%, transparent 100%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 40%, rgba(255, 255, 255, 0.02) 100%);
  backdrop-filter: blur(18px) saturate(1.1);
  -webkit-backdrop-filter: blur(18px) saturate(1.1);
  border: 1px solid rgba(255, 255, 255, 0.11);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -1px 0 rgba(255, 255, 255, 0.04),
    0 1.8em 3.4em rgba(2, 10, 18, 0.55);
}
.cb-flowmap__card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.55) 0%,
    rgba(255, 255, 255, 0.16) 30%,
    rgba(255, 255, 255, 0.05) 65%,
    rgba(255, 255, 255, 0.12) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  z-index: 2;
}

.cb-flowmap__label {
  display: block;
  text-align: center;
  font-size: 0.7em;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
}

/* Bronkaarten (bovenrij) */
.cb-flowmap__src {
  top: 2.3%;
  height: 30%;
  padding: 0.85em 0.7em 0.7em;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 0.4em;
}
/* Breedtes zo gekozen dat de kaartcentra op de lijn-ankers (115 / 350 / 585) blijven */
.cb-flowmap__src--cloud { left: 4.25%;  width: 24.5%; }
.cb-flowmap__src--dist  { left: 36.5%;  width: 27%; }
.cb-flowmap__src--own   { left: 71.25%; width: 24.5%; }

/* Logo-tegels (Public Cloud én Distributors): glas-op-glas mini-tegels */
.cb-flowmap__tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.45em;
  width: 100%;
}
.cb-flowmap__tile {
  border-radius: 1.05em;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0.04) 100%);
  border: 1px solid rgba(255, 255, 255, 0.13);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
  padding: 0.65em 0.3em 0.6em;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35em;
}
/* Brede tegel (Microsoft): volle rij, glyph en naam naast elkaar */
.cb-flowmap__tile--wide {
  grid-column: 1 / -1;
  flex-direction: row;
  gap: 0.4em;
  padding: 0.4em 0.3em;
}
.cb-flowmap__glyph { width: 1.25em; height: 1.25em; }
.cb-flowmap__tile > span {
  font-size: 0.8em;
  color: rgba(255, 255, 255, 0.85);
  white-space: nowrap;
}
.cb-flowmap__more {
  font-style: normal;
  font-size: 0.64em;
  color: rgba(255, 255, 255, 0.6);
  padding: 0.45em 1.5em;
  border-radius: 999em;
  background: transparent;
  border: 1px dashed rgba(255, 255, 255, 0.28);
  white-space: nowrap;
}
.cb-flowmap__more--bare {
  background: transparent;
  border: 0;
  padding: 0.1em 0;
  letter-spacing: 0.04em;
}

/* Own Services: gestapelde pills */
.cb-flowmap__list {
  display: flex;
  flex-direction: column;
  gap: 0.4em;
  width: 100%;
}
.cb-flowmap__item {
  font-style: normal;
  font-size: 0.8em;
  line-height: 1.35;
  text-align: center;
  color: rgba(255, 255, 255, 0.82);
  padding: 0.55em 0.8em;
  border-radius: 999em;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0.04) 100%);
  border: 1px solid rgba(255, 255, 255, 0.13);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

/* Billing Engine: zelfde glasrecept, groene tint + groene lichtrand */
.cb-flowmap__engine {
  left: 34%;
  top: 45.8%;
  width: 32%;
  height: 13.2%;
  border-radius: 1em;
  background:
    radial-gradient(95% 60% at 50% -8%, rgba(143, 253, 118, 0.20) 0%, rgba(143, 253, 118, 0.06) 55%, transparent 100%),
    linear-gradient(180deg, rgba(120, 230, 140, 0.12) 0%, rgba(60, 140, 100, 0.06) 45%, rgba(20, 60, 50, 0.10) 100%);
  border-color: rgba(143, 253, 118, 0.26);
  box-shadow:
    inset 0 1px 0 rgba(190, 255, 175, 0.28),
    0 0 3em rgba(60, 203, 125, 0.2),
    0 1.5em 3em rgba(3, 10, 20, 0.5);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
}
.cb-flowmap__engine::after {
  background: linear-gradient(180deg,
    rgba(220, 255, 210, 0.65) 0%,
    rgba(190, 255, 175, 0.18) 32%,
    rgba(150, 240, 160, 0.07) 65%,
    rgba(160, 250, 170, 0.22) 100%);
}
.cb-flowmap__label--engine { color: rgba(255, 255, 255, 0.88); }
.cb-flowmap__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  font-size: 1.2em;
  font-weight: 700;
  color: var(--cb-green, #8FFD76);
}
.cb-flowmap__brand svg { width: 1.35em; height: 1.35em; }

/* Resultaatkaarten (onderrij): drie gelijke kolommen binnen dezelfde rooilijnen
   als de bronrij (4.25% … 95.75%), met dezelfde 3.5%-gaps als voorheen. Icoon
   boven de tekst, want op 28% breed is naast-elkaar te krap voor de omschrijving. */
.cb-flowmap__out {
  top: 71%;
  height: 24%;
  padding: 1em 0.9em;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.6em;
}
/* Linkerrand lijnt uit met de Public Cloud-kaart erboven (4.25%) */
.cb-flowmap__out--invoices { left: 4.25%;  width: 28.17%; }
.cb-flowmap__out--data     { left: 35.92%; width: 28.17%; }
/* Rechterrand lijnt uit met de Own Services-kaart erboven (71.25% + 24.5% = 95.75%) */
.cb-flowmap__out--syncs    { left: 67.58%; width: 28.17%; }

.cb-flowmap__icontile {
  flex: none;
  width: 3em;
  height: 3em;
  border-radius: 0.8em;
  display: grid;
  place-items: center;
}
.cb-flowmap__icontile--green  { background: rgba(60, 203, 125, 0.12); border: 1px solid rgba(60, 203, 125, 0.3); }
.cb-flowmap__icontile--blue   { background: rgba(56, 189, 248, 0.12); border: 1px solid rgba(56, 189, 248, 0.3); }
.cb-flowmap__icontile--violet { background: rgba(167, 139, 250, 0.12); border: 1px solid rgba(167, 139, 250, 0.32); }
.cb-flowmap__icontile svg { width: 1.5em; height: 1.5em; }

.cb-flowmap__outtext { display: flex; flex-direction: column; gap: 0.25em; min-width: 0; }
.cb-flowmap__outtext b {
  font-size: 1.2em;
  font-weight: 700;
  color: #fff;
}
.cb-flowmap__outtext > span {
  font-size: 0.8em;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.65);
  /* Drie smalle kolommen: gelijkmatige regels i.p.v. een los woord op regel 3 */
  text-wrap: balance;
}

@media (max-width: 1100px) {
  .cb-hero { grid-template-columns: 1fr; padding: 56px 32px; }
}

@media (max-width: 767px) {
  /* Figma: hero-padding 64/16, knoppen gestapeld */
  .cb-hero { padding: 64px 16px; border-radius: 24px 24px 0 0; }
  .cb-hero p { margin-bottom: 32px; }
  .cb-hero__buttons { flex-direction: column; }
  .cb-hero--datasets .cb-hero__buttons { width: auto; }
  /* Smaller zijpadding: label + pijl passen anders niet in 343px (nowrap) */
  .cb-hero--datasets .cb-btn { padding-left: 18px; padding-right: 18px; }
  /* Center-variant mobiel (Figma 1193:18057): pad 120/20, intro 16/24 */
  .cb-hero--center { padding: 120px 20px; }
  .cb-hero--center p { font-size: 16px; line-height: 24px; }
}

/* ---------- Flowmap op mobiel: van geschaald canvas naar leesbare stack ----------
   Onder ~700px werd 1em = 2.2857cqw zo klein (~8px) dat de tekst onleesbaar werd.
   Hier laten we de absolute layout los: vaste 16px-basis, kaarten volle breedte
   onder elkaar, tegels met logo+tekst naast elkaar, en verticale chevron-
   connectors i.p.v. de SVG-paden (die op de desktop-coördinaten mikken). */
@media (max-width: 767px) {
  .cb-flowmap__canvas {
    aspect-ratio: auto;
    font-size: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.6em;
  }
  /* Absoluut-gepositioneerde decoratie/desktop-lijnen kloppen niet in de stack */
  .cb-flowmap__lines,
  .cb-flowmap__blur { display: none; }

  /* Mobiele flow-lijnen: overlay achter de kaarten; main.js vult de paden in. */
  .cb-flowmap__mlines {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: visible;
    pointer-events: none;
  }

  /* Kaarten: van absolute ankers naar gecentreerde blokken, iets smaller zodat
     er links/rechts marge overblijft waarin de flow-curven uitzwaaien. */
  .cb-flowmap__card {
    position: relative;
    z-index: 1;
    width: 84%;
  }
  .cb-flowmap__src--cloud,
  .cb-flowmap__src--dist,
  .cb-flowmap__src--own,
  .cb-flowmap__out--invoices,
  .cb-flowmap__out--data,
  .cb-flowmap__out--syncs { left: auto; width: 84%; }
  .cb-flowmap__src { top: auto; height: auto; padding: 1.1em 1.1em 1em; gap: 0.7em; }
  .cb-flowmap__engine {
    left: auto; top: auto; height: auto;
    width: 62%;
    padding: 1.1em;
  }
  /* Volle breedte: icoon weer naast de tekst i.p.v. de smalle desktop-kolom */
  .cb-flowmap__out {
    top: auto; height: auto; padding: 1.1em 1.2em;
    flex-direction: row;
    text-align: left;
    gap: 1.1em;
  }

  .cb-flowmap__label { font-size: 0.8em; }

  /* Providers 1/3 breed → 3 op één regel; distributors 1/2 breed → 2×2.
     Op die smalle cellen weer logo bóven de naam i.p.v. ernaast. */
  .cb-flowmap__src--cloud .cb-flowmap__tiles { grid-template-columns: repeat(3, 1fr); gap: 0.5em; }
  .cb-flowmap__src--dist  .cb-flowmap__tiles { grid-template-columns: 1fr 1fr; gap: 0.5em; }
  .cb-flowmap__tile {
    flex-direction: column;
    justify-content: center;
    gap: 0.4em;
    padding: 0.75em 0.4em;
  }
  .cb-flowmap__tile--wide { grid-column: auto; flex-direction: column; padding: 0.75em 0.4em; }
  .cb-flowmap__glyph { width: 1.6em; height: 1.6em; flex: none; }
  .cb-flowmap__tile > span { font-size: 0.85em; white-space: normal; text-align: center; }
  .cb-flowmap__more { font-size: 0.8em; align-self: center; }
  .cb-flowmap__more--bare { font-size: 0.85em; }

  /* Own Services: gestapelde pills mogen ook groter/leesbaar */
  .cb-flowmap__item { font-size: 0.95em; padding: 0.7em 0.9em; }

  .cb-flowmap__brand { font-size: 1.35em; }

  /* Resultaatkaarten onder elkaar, groter */
  .cb-flowmap__icontile { width: 3.4em; height: 3.4em; }
  .cb-flowmap__icontile svg { width: 1.7em; height: 1.7em; }
  .cb-flowmap__outtext b { font-size: 1.35em; }
  /* Volle kaartbreedte: gewoon uitvullen, balanceren maakt de regels onnodig kort */
  .cb-flowmap__outtext > span { font-size: 0.9em; text-wrap: normal; }
}

/* Mobiele flow-lijnen (door main.js getekend): dashed pad + bewegende dot */
.cb-flowmap__mline {
  stroke: rgba(60, 203, 125, 0.55);
  stroke-width: 2;
  stroke-dasharray: 1 7;
  stroke-linecap: round;
  fill: none;
}
.cb-flowmap__mdot { fill: #B9FFA8; }

/* Cash-flow-hero: exacte Figma-export (WebP) i.p.v. de CSS-card */
.cb-hero__diagram--cashimg { padding: 0; }
.cb-hero__diagram--cashimg img {
  width: 100%;
  height: auto;
  display: block;
}

/* ---------------------------------------------------------------------------
   Solution-hero (visual="solution") — gedeelde hero van de Solutions-pagina's.
   Zelfde opzet als de cash-flow-hero: linkse tekst, omgevingsgloed in de
   sectie, en rechts één glass-card. De inhoud van de card komt uit de
   moduleparams (card_title / items / card_foot), zodat elke solution zijn
   eigen regels heeft in dezelfde vorm.
   --------------------------------------------------------------------------- */

.cb-hero--solution { align-items: center; position: relative; }
.cb-hero--solution .cb-superheader { color: var(--cb-green, #8FFD76); }
/* De solution-koppen zijn hele zinnen en langer dan de home/engine-koppen;
   op 64px lopen ze naar vijf regels. 56px houdt ze op vier en in balans met
   de kaart ernaast. `balance` verdeelt de regels gelijkmatig. */
.cb-hero--solution h1 {
  font-size: clamp(36px, 5.2vw, 56px);
  text-wrap: balance;
}

/* Omgevingsgloed, identiek aan de cash-flow-hero (egale blob + blur houdt het
   plateau vast waar een radial-gradient te snel uitdooft) */
.cb-hero--solution::before,
.cb-hero--solution::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 0;
  border-radius: 9999px;
  filter: blur(140px);
}
.cb-hero--solution::before {            /* oranje, rechtsboven */
  width: 57%;
  aspect-ratio: 816 / 401;
  top: -14%;
  right: -6%;
  background: rgba(255, 90, 54, 0.20);
}
.cb-hero--solution::after {             /* groen, linksonder */
  width: 47%;
  aspect-ratio: 680 / 334;
  bottom: -12%;
  left: -6%;
  background: rgba(52, 211, 153, 0.20);
}
.cb-hero--solution > * { position: relative; z-index: 1; }

/* Ontwerpruimte 560 breed: 1em = 16px → font-size 2.857cqw. Alle maten in em. */
.cb-solcard {
  container-type: inline-size;
  position: relative;
  width: 100%;
  padding-right: 3%;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
.cb-solcard__gradblur {
  position: absolute;
  left: 4%; top: 6%;
  width: 84%; height: 80%;
  border-radius: 9999px;
  background: linear-gradient(105deg, rgba(52, 211, 153, 0.30), rgba(255, 90, 54, 0.30));
  filter: blur(64px);
  z-index: 0;
}
.cb-solcard__glow {
  position: absolute;
  width: 32%; aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(50px);
  z-index: 0;
  pointer-events: none;
}
.cb-solcard__glow--orange { top: -8%; right: 6%; background: rgba(255, 90, 54, 0.40); }
.cb-solcard__glow--green  { top: -6%; left: 6%;  background: rgba(52, 211, 153, 0.40); }

.cb-solcard__panel {
  position: relative;
  z-index: 1;
  width: 91.5%;
  font-size: 2.857cqw;            /* 1em = 16px @560 */
  border-radius: 2em;
  padding: 2em;
  background:
    radial-gradient(150% 130% at 82% -16%, rgba(255, 150, 110, 0.20) 0%, rgba(255, 120, 80, 0.07) 30%, transparent 60%),
    radial-gradient(130% 130% at 2% 114%, rgba(52, 211, 153, 0.14) 0%, transparent 52%),
    linear-gradient(158deg, rgba(66, 58, 54, 0.42) 0%, rgba(36, 32, 34, 0.44) 50%, rgba(18, 16, 22, 0.52) 100%);
  backdrop-filter: blur(40px) saturate(1.15);
  -webkit-backdrop-filter: blur(40px) saturate(1.15);
  border: 1px solid rgba(255, 230, 220, 0.10);
  box-shadow:
    inset 0 1px 0 rgba(255, 240, 230, 0.22),
    inset 0 -1px 0 rgba(255, 200, 180, 0.07),
    0 0 6em rgba(255, 140, 100, 0.10),
    0 0.5em 2em rgba(0, 0, 0, 0.37);
}
.cb-solcard__panel::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg,
    rgba(255, 246, 240, 0.75) 0%,
    rgba(255, 255, 255, 0.12) 26%,
    rgba(255, 255, 255, 0.03) 50%,
    rgba(255, 220, 200, 0.14) 74%,
    rgba(190, 245, 220, 0.45) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

.cb-solcard__head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  margin-bottom: 1.5em;
  padding-bottom: 1.25em;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.cb-solcard__title {
  color: #fff;
  font-size: 1.125em;             /* 18px */
  font-weight: 700;
  letter-spacing: -0.01em;
}
.cb-solcard__tag {
  flex: none;
  padding: 0.3125em 0.75em;
  border-radius: 0.5em;
  background: rgba(52, 211, 153, 0.16);
  border: 1px solid rgba(52, 211, 153, 0.40);
  color: #6EE7A0;
  font-size: 0.75em;
  font-weight: 600;
  white-space: nowrap;
}

.cb-solcard__rows {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0.75em;
}
.cb-solcard__row {
  display: flex;
  align-items: center;
  gap: 0.875em;
  padding: 0.875em 1em;
  border-radius: 0.75em;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.09);
}
.cb-solcard__mark {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75em;
  height: 1.75em;
  border-radius: 50%;
  background: rgba(52, 211, 153, 0.16);
  color: #34D399;
}
.cb-solcard__mark svg { width: 1.125em; height: 1.125em; }
.cb-solcard__row--blue   .cb-solcard__mark { background: rgba(43, 127, 255, 0.20);  color: #8EC5FF; }
.cb-solcard__row--teal   .cb-solcard__mark { background: rgba(52, 211, 153, 0.20);  color: #5EEAD4; }
.cb-solcard__row--amber  .cb-solcard__mark { background: rgba(255, 193, 7, 0.20);   color: #FFC107; }
.cb-solcard__row--purple .cb-solcard__mark { background: rgba(142, 81, 255, 0.24);  color: #C4B5FD; }
.cb-solcard__row--grey   .cb-solcard__mark { background: rgba(255, 255, 255, 0.10); color: rgba(255, 255, 255, 0.70); }

.cb-solcard__rowtext { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.25em; }
.cb-solcard__rowtext b {
  color: rgba(255, 255, 255, 0.96);
  font-size: 0.9375em;            /* 15px */
  font-weight: 600;
  line-height: 1.35;
}
.cb-solcard__rowtext em {
  color: rgba(255, 255, 255, 0.60);
  font-size: 0.8125em;            /* 13px */
  font-style: normal;
  line-height: 1.45;
}
.cb-solcard__value {
  flex: none;
  color: #fff;
  font-size: 0.9375em;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.cb-solcard__foot {
  position: relative;
  z-index: 1;
  margin-top: 1.5em;
  padding-top: 1.25em;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.74);
  font-size: 0.8125em;
  line-height: 1.5;
  font-weight: 600;
}

@media (max-width: 1100px) {
  .cb-solcard { padding-right: 0; }
  .cb-solcard__panel { width: 100%; font-size: 3.4cqw; }
}
@media (max-width: 767px) {
  .cb-solcard__panel { font-size: 4.6cqw; padding: 1.5em; }
}

/* ---------------------------------------------------------------------------
   Scan-animatie (visual="scan") — erft de kaart, gloed en glass van
   .cb-solcard; alleen de inhoud en de beweging zitten hier.

   Eén lus van 12s. Elk item krijgt `--i` mee en dus een eigen animation-delay
   van i × 1,05s: de lichtbalk loopt langs de linkerlijst, elk item licht op als
   de balk erlangs komt, en 0,35s later verschijnt de bijbehorende factuurregel
   rechts. De slotregel wacht op `--n` (aantal items).
   --------------------------------------------------------------------------- */

.cb-scancard__tag {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4375em;
  padding: 0.3125em 0.75em;
  border-radius: 0.5em;
  background: rgba(52, 211, 153, 0.16);
  border: 1px solid rgba(52, 211, 153, 0.40);
  color: #6EE7A0;
  font-size: 0.75em;
  font-weight: 600;
  white-space: nowrap;
}
.cb-scancard__tag i {
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: #34D399;
  animation: cb-scan-pulse 1.6s ease-in-out infinite;
}
@keyframes cb-scan-pulse {
  0%, 100% { opacity: 1;   box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.55); }
  50%      { opacity: .55; box-shadow: 0 0 0 0.4em rgba(52, 211, 153, 0); }
}

.cb-scancard__cols {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 0.92fr 1.22fr;
  gap: 1.125em;
  align-items: start;
}
/* Scheidingslijn tussen de twee kanten */
.cb-scancard__cols::before {
  content: "";
  position: absolute;
  top: 1.75em;
  bottom: 0;
  left: calc((100% - 1.125em) * 0.4299 + 0.5625em);
  width: 1px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.02));
}

.cb-scancard__collabel {
  display: block;
  margin-bottom: 0.875em;
  color: rgba(255, 255, 255, 0.52);
  font-size: 0.6875em;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ---- Links: de namen zoals ze in de systemen staan ---- */

.cb-scancard__list {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  overflow: hidden;
  border-radius: 0.625em;
}
.cb-scancard__beam {
  position: absolute;
  left: 0;
  right: 0;
  height: 3em;
  top: -3em;
  border-radius: 0.5em;
  background: linear-gradient(180deg,
    rgba(52, 211, 153, 0) 0%,
    rgba(52, 211, 153, 0.20) 45%,
    rgba(126, 249, 200, 0.55) 72%,
    rgba(126, 249, 200, 0.95) 82%,
    rgba(52, 211, 153, 0) 100%);
  box-shadow: 0 0 1.5em rgba(52, 211, 153, 0.45);
  pointer-events: none;
  z-index: 2;
  animation: cb-scan-beam 12s cubic-bezier(.42,0,.58,1) infinite;
}
@keyframes cb-scan-beam {
  0%        { top: -3em;  opacity: 0; }
  3%        { opacity: 0.9; }
  42%       { top: 100%;  opacity: 0.9; }
  48%       { top: 100%;  opacity: 0; }
  100%      { top: -3em;  opacity: 0; }
}

.cb-scancard__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.625em;
  padding: 0.5625em 0.75em;
  border-radius: 0.5em;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  opacity: 0.34;
  animation: cb-scan-item 12s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * 1.05s);
}
@keyframes cb-scan-item {
  0%, 1%    { opacity: .34; background: rgba(255, 255, 255, 0.03); border-color: rgba(255, 255, 255, 0.07); }
  4%        { opacity: 1;   background: rgba(52, 211, 153, 0.16);  border-color: rgba(52, 211, 153, 0.55); }
  9%, 76%   { opacity: 1;   background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.14); }
  84%, 100% { opacity: .34; background: rgba(255, 255, 255, 0.03); border-color: rgba(255, 255, 255, 0.07); }
}

.cb-scancard__dot {
  flex: none;
  width: 0.4375em;
  height: 0.4375em;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  animation: cb-scan-dot 12s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * 1.05s);
}
@keyframes cb-scan-dot {
  0%, 3%    { background: rgba(255, 255, 255, 0.35); }
  5%, 76%   { background: #34D399; }
  84%, 100% { background: rgba(255, 255, 255, 0.35); }
}

.cb-scancard__raw {
  min-width: 0;
  color: rgba(255, 255, 255, 0.78);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.6875em;
  line-height: 1.35;
  letter-spacing: -0.02em;
  word-break: break-word;
}

/* ---- Rechts: de factuur die zich vult ---- */

.cb-scancard__invoice {
  border-radius: 0.625em;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  overflow: hidden;
}
.cb-scancard__invrow {
  display: flex;
  align-items: baseline;
  gap: 0.625em;
  padding: 0.5625em 0.75em;
  opacity: 0;
  animation: cb-scan-row 12s ease-out infinite;
  animation-delay: calc(var(--i, 0) * 1.05s + 0.35s);
}
.cb-scancard__invrow + .cb-scancard__invrow { border-top: 1px solid rgba(255, 255, 255, 0.08); }
@keyframes cb-scan-row {
  0%, 4%    { opacity: 0; transform: translateY(0.4em); }
  10%, 76%  { opacity: 1; transform: none; }
  84%, 100% { opacity: 0; transform: translateY(-0.2em); }
}

.cb-scancard__invtext { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.125em; }
.cb-scancard__invtext b {
  color: rgba(255, 255, 255, 0.96);
  font-size: 0.75em;
  font-weight: 600;
  line-height: 1.3;
}
.cb-scancard__invtext em {
  color: rgba(255, 255, 255, 0.42);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.625em;
  font-style: normal;
  letter-spacing: -0.02em;
}
.cb-scancard__invval {
  flex: none;
  color: #fff;
  font-size: 0.75em;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.cb-scancard__foot {
  position: relative;
  z-index: 1;
  margin-top: 1.25em;
  padding-top: 1em;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.74);
  font-size: 0.75em;
  line-height: 1.5;
  font-weight: 600;
  opacity: 0;
  animation: cb-scan-row 12s ease-out infinite;
  animation-delay: calc(var(--n, 4) * 1.05s + 0.35s);
}

@media (max-width: 767px) {
  .cb-scancard__cols { grid-template-columns: 1fr; gap: 1.5em; }
  .cb-scancard__cols::before { display: none; }
}

/* Zonder beweging: alles meteen zichtbaar in de eindstand, geen lichtbalk. */
@media (prefers-reduced-motion: reduce) {
  .cb-scancard__beam { display: none; }
  .cb-scancard__tag i,
  .cb-scancard__item,
  .cb-scancard__dot,
  .cb-scancard__invrow,
  .cb-scancard__foot { animation: none; }
  .cb-scancard__item {
    opacity: 1;
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.14);
  }
  .cb-scancard__dot { background: #34D399; }
  .cb-scancard__invrow,
  .cb-scancard__foot { opacity: 1; }
}

/* ---------------------------------------------------------------------------
   Audit-trail (visual="audit") — erft de kaart, gloed en glass van .cb-solcard;
   alleen de inhoud en de beweging zitten hier.

   Eén lus van 10s. Het lichtpunt zakt tussen 6% en 42% over de traceerlijn naar
   beneden; elk bronrecord krijgt `--i` mee en dus een delay van i × 1,1s + 1s,
   zodat het oplicht op het moment dat het punt erlangs komt. Het stempel wacht
   op `--n` (aantal records).
   --------------------------------------------------------------------------- */

.cb-auditcard__tag {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4375em;
  padding: 0.3125em 0.75em;
  border-radius: 0.5em;
  background: rgba(52, 211, 153, 0.16);
  border: 1px solid rgba(52, 211, 153, 0.40);
  color: #6EE7A0;
  font-size: 0.75em;
  font-weight: 600;
  white-space: nowrap;
}
.cb-auditcard__tag i {
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: #34D399;
  animation: cb-audit-pulse 12s ease-in-out infinite;
}
@keyframes cb-audit-pulse {
  0%, 42%, 100% { opacity: 1;  box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.55); }
  21%           { opacity: .5; box-shadow: 0 0 0 0.4em rgba(52, 211, 153, 0); }
}

/* De factuurregel waar de auditor naar wijst: iets zwaarder dan een bronrecord,
   met de groene rand die de aandacht vasthoudt. */
.cb-auditcard__line {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 0.875em;
  padding: 0.875em 1em;
  border-radius: 0.75em;
  background: linear-gradient(120deg, rgba(52, 211, 153, 0.14), rgba(255, 255, 255, 0.05) 60%);
  border: 1px solid rgba(52, 211, 153, 0.34);
  box-shadow: 0 0 1.75em rgba(52, 211, 153, 0.14);
}
.cb-auditcard__linetext { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.1875em; }
.cb-auditcard__linetext b {
  color: #fff;
  font-size: 0.9375em;            /* 15px */
  font-weight: 700;
  line-height: 1.3;
}
.cb-auditcard__linetext em {
  color: rgba(255, 255, 255, 0.52);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.6875em;
  font-style: normal;
  letter-spacing: -0.02em;
}
.cb-auditcard__lineval {
  flex: none;
  color: #fff;
  font-size: 1em;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.cb-auditcard__collabel {
  position: relative;
  z-index: 1;
  display: block;
  margin: 1.125em 0 0.75em 2.375em;
  color: rgba(255, 255, 255, 0.52);
  font-size: 0.6875em;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ---- De traceerlijn met de bronrecords ---- */

.cb-auditcard__trail {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0.625em;
}
/* Stippellijn in dezelfde maatvoering als het flow-diagram; loopt door tot in de
   ruimte boven het label, zodat hij zichtbaar uit de factuurregel komt. */
.cb-auditcard__rail {
  position: absolute;
  left: 0.6875em;
  top: -2.5em;
  bottom: 1.5em;
  width: 2px;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.30) 0 0.1875em, transparent 0.1875em 0.5em);
  background-size: 100% 0.5em;
}
.cb-auditcard__spark {
  position: absolute;
  left: 0.4375em;
  top: -2.5em;
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: #A7F3D0;
  box-shadow: 0 0 0.75em 0.125em rgba(52, 211, 153, 0.75);
  z-index: 2;
  animation: cb-audit-spark 12s cubic-bezier(.42, 0, .58, 1) infinite;
}
@keyframes cb-audit-spark {
  0%        { top: -2.5em; opacity: 0; }
  5%        { top: -2.5em; opacity: 1; }
  42%       { top: calc(100% - 1.5em); opacity: 1; }
  47%, 100% { top: calc(100% - 1.5em); opacity: 0; }
}

.cb-auditcard__node {
  display: flex;
  align-items: center;
  gap: 0.875em;
}
.cb-auditcard__mark {
  position: relative;
  z-index: 1;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5em;
  height: 1.5em;
  border-radius: 50%;
  background: rgba(15, 20, 24, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: transparent;
  animation: cb-audit-mark 12s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * 1s + 1.6s);
}
.cb-auditcard__mark svg { width: 0.875em; height: 0.875em; }
@keyframes cb-audit-mark {
  0%, 3%    { color: transparent; background: rgba(15, 20, 24, 0.9);   border-color: rgba(255, 255, 255, 0.16); transform: scale(1); }
  5%        { color: #6EE7A0;     background: rgba(52, 211, 153, 0.30); border-color: rgba(52, 211, 153, 0.75); transform: scale(1.18); }
  9%, 80%   { color: #6EE7A0;     background: rgba(52, 211, 153, 0.20); border-color: rgba(52, 211, 153, 0.55); transform: scale(1); }
  88%, 100% { color: transparent; background: rgba(15, 20, 24, 0.9);   border-color: rgba(255, 255, 255, 0.16); transform: scale(1); }
}
.cb-auditcard__node--blue   .cb-auditcard__mark { animation-name: cb-audit-mark-blue; }
.cb-auditcard__node--teal   .cb-auditcard__mark { animation-name: cb-audit-mark-teal; }
@keyframes cb-audit-mark-blue {
  0%, 3%    { color: transparent; background: rgba(15, 20, 24, 0.9);   border-color: rgba(255, 255, 255, 0.16); transform: scale(1); }
  5%        { color: #8EC5FF;     background: rgba(43, 127, 255, 0.34); border-color: rgba(43, 127, 255, 0.80); transform: scale(1.18); }
  9%, 80%   { color: #8EC5FF;     background: rgba(43, 127, 255, 0.22); border-color: rgba(43, 127, 255, 0.60); transform: scale(1); }
  88%, 100% { color: transparent; background: rgba(15, 20, 24, 0.9);   border-color: rgba(255, 255, 255, 0.16); transform: scale(1); }
}
@keyframes cb-audit-mark-teal {
  0%, 3%    { color: transparent; background: rgba(15, 20, 24, 0.9);   border-color: rgba(255, 255, 255, 0.16); transform: scale(1); }
  5%        { color: #5EEAD4;     background: rgba(45, 212, 191, 0.32); border-color: rgba(45, 212, 191, 0.78); transform: scale(1.18); }
  9%, 80%   { color: #5EEAD4;     background: rgba(45, 212, 191, 0.20); border-color: rgba(45, 212, 191, 0.58); transform: scale(1); }
  88%, 100% { color: transparent; background: rgba(15, 20, 24, 0.9);   border-color: rgba(255, 255, 255, 0.16); transform: scale(1); }
}

.cb-auditcard__box {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.75em;
  padding: 0.625em 0.875em;
  border-radius: 0.625em;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  opacity: 0.4;
  animation: cb-audit-box 12s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * 1s + 1.6s);
}
@keyframes cb-audit-box {
  0%, 3%    { opacity: .4; background: rgba(255, 255, 255, 0.03); border-color: rgba(255, 255, 255, 0.07); }
  6%        { opacity: 1;  background: rgba(255, 255, 255, 0.10); border-color: rgba(255, 255, 255, 0.22); }
  9%, 80%   { opacity: 1;  background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.14); }
  88%, 100% { opacity: .4; background: rgba(255, 255, 255, 0.03); border-color: rgba(255, 255, 255, 0.07); }
}

.cb-auditcard__nodetext { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.125em; }
.cb-auditcard__nodetext b {
  color: rgba(255, 255, 255, 0.96);
  font-size: 0.8125em;            /* 13px */
  font-weight: 600;
  line-height: 1.3;
}
.cb-auditcard__nodetext em {
  color: rgba(255, 255, 255, 0.56);
  font-size: 0.6875em;
  font-style: normal;
  line-height: 1.4;
}
.cb-auditcard__nodeval {
  flex: none;
  color: rgba(255, 255, 255, 0.46);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.625em;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.cb-auditcard__foot {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 0.75em;
  margin-top: 1.5em;
  padding-top: 1.25em;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  opacity: 0;
  animation: cb-audit-foot 12s ease-out infinite;
  animation-delay: calc(var(--n, 3) * 1s + 1.6s);
}
@keyframes cb-audit-foot {
  0%, 4%    { opacity: 0; transform: translateY(0.4em); }
  10%, 68%  { opacity: 1; transform: none; }
  76%, 100% { opacity: 0; transform: translateY(-0.2em); }
}
.cb-auditcard__stamp {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.375em;
  padding: 0.3125em 0.6875em;
  border-radius: 0.5em;
  background: rgba(52, 211, 153, 0.16);
  border: 1px solid rgba(52, 211, 153, 0.45);
  color: #6EE7A0;
  font-size: 0.75em;
  font-weight: 700;
  white-space: nowrap;
}
.cb-auditcard__stamp svg { width: 0.875em; height: 0.875em; }
.cb-auditcard__foottext {
  color: rgba(255, 255, 255, 0.74);
  font-size: 0.75em;
  line-height: 1.45;
  font-weight: 600;
}

@media (max-width: 767px) {
  .cb-auditcard__foot { flex-wrap: wrap; gap: 0.625em; }
}

/* Zonder beweging: de trail staat meteen compleet, zonder lopend lichtpunt. */
@media (prefers-reduced-motion: reduce) {
  .cb-auditcard__spark { display: none; }
  .cb-auditcard__tag i,
  .cb-auditcard__mark,
  .cb-auditcard__box,
  .cb-auditcard__foot { animation: none; }
  .cb-auditcard__mark {
    color: #6EE7A0;
    background: rgba(52, 211, 153, 0.20);
    border-color: rgba(52, 211, 153, 0.55);
  }
  .cb-auditcard__node--blue .cb-auditcard__mark {
    color: #8EC5FF;
    background: rgba(43, 127, 255, 0.22);
    border-color: rgba(43, 127, 255, 0.60);
  }
  .cb-auditcard__node--teal .cb-auditcard__mark {
    color: #5EEAD4;
    background: rgba(45, 212, 191, 0.20);
    border-color: rgba(45, 212, 191, 0.58);
  }
  .cb-auditcard__box {
    opacity: 1;
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.14);
  }
  .cb-auditcard__foot { opacity: 1; }
}

/* ---------------------------------------------------------------------------
   Billing-cyclus (visual="cycle") — de hero van Managed Billing. Erft kaart,
   gloed en glas van .cb-solcard; alleen de inhoud en de beweging staan hier.

   Eén lus van 12s. Het lichtpunt zakt tussen 5% en 42% langs de stappen die ons
   team elke cyclus uitvoert; elke stap krijgt `--i` mee en vinkt dus af op het
   moment dat het punt erlangs komt. Daarna (delay `--n`) schuift de overdracht
   in beeld: de facturen staan klaar, de goedkeuring blijft bij de klant.
   --------------------------------------------------------------------------- */

.cb-cyclecard__tag {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4375em;
  padding: 0.3125em 0.75em;
  border-radius: 0.5em;
  background: rgba(52, 211, 153, 0.16);
  border: 1px solid rgba(52, 211, 153, 0.40);
  color: #6EE7A0;
  font-size: 0.75em;
  font-weight: 600;
  white-space: nowrap;
}
.cb-cyclecard__tag i {
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: #34D399;
  animation: cb-cycle-pulse 12s ease-in-out infinite;
}
@keyframes cb-cycle-pulse {
  0%, 42%, 100% { opacity: 1;  box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.55); }
  21%           { opacity: .5; box-shadow: 0 0 0 0.4em rgba(52, 211, 153, 0); }
}

.cb-cyclecard__collabel {
  position: relative;
  z-index: 1;
  display: block;
  margin: 1.5em 0 0.75em 2.375em;
  color: rgba(255, 255, 255, 0.52);
  font-size: 0.6875em;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ---- De stappen die elke cyclus gedraaid worden ---- */

.cb-cyclecard__trail {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0.625em;
}
/* Stippellijn in dezelfde maatvoering als de audit-trail en het flow-diagram;
   loopt door tot in de ruimte boven het label en tot in de overdracht eronder. */
.cb-cyclecard__rail {
  position: absolute;
  left: 0.6875em;
  top: -1.75em;
  bottom: -1.25em;
  width: 2px;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.30) 0 0.1875em, transparent 0.1875em 0.5em);
  background-size: 100% 0.5em;
}
.cb-cyclecard__spark {
  position: absolute;
  left: 0.4375em;
  top: -1.75em;
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: #A7F3D0;
  box-shadow: 0 0 0.75em 0.125em rgba(52, 211, 153, 0.75);
  z-index: 2;
  animation: cb-cycle-spark 12s cubic-bezier(.42, 0, .58, 1) infinite;
}
@keyframes cb-cycle-spark {
  0%        { top: -1.75em; opacity: 0; }
  5%        { top: -1.75em; opacity: 1; }
  42%       { top: calc(100% + 0.75em); opacity: 1; }
  47%, 100% { top: calc(100% + 0.75em); opacity: 0; }
}

.cb-cyclecard__node {
  display: flex;
  align-items: center;
  gap: 0.875em;
}
.cb-cyclecard__mark {
  position: relative;
  z-index: 1;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5em;
  height: 1.5em;
  border-radius: 50%;
  background: rgba(15, 20, 24, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: transparent;
  animation: cb-cycle-mark 12s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * 1s + 1.6s);
}
.cb-cyclecard__mark svg { width: 0.875em; height: 0.875em; }
@keyframes cb-cycle-mark {
  0%, 3%    { color: transparent; background: rgba(15, 20, 24, 0.9);   border-color: rgba(255, 255, 255, 0.16); transform: scale(1); }
  5%        { color: #6EE7A0;     background: rgba(52, 211, 153, 0.30); border-color: rgba(52, 211, 153, 0.75); transform: scale(1.18); }
  9%, 80%   { color: #6EE7A0;     background: rgba(52, 211, 153, 0.20); border-color: rgba(52, 211, 153, 0.55); transform: scale(1); }
  88%, 100% { color: transparent; background: rgba(15, 20, 24, 0.9);   border-color: rgba(255, 255, 255, 0.16); transform: scale(1); }
}

.cb-cyclecard__box {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.75em;
  padding: 0.625em 0.875em;
  border-radius: 0.625em;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  opacity: 0.4;
  animation: cb-cycle-box 12s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * 1s + 1.6s);
}
@keyframes cb-cycle-box {
  0%, 3%    { opacity: .4; background: rgba(255, 255, 255, 0.03); border-color: rgba(255, 255, 255, 0.07); }
  6%        { opacity: 1;  background: rgba(255, 255, 255, 0.10); border-color: rgba(255, 255, 255, 0.22); }
  9%, 80%   { opacity: 1;  background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.14); }
  88%, 100% { opacity: .4; background: rgba(255, 255, 255, 0.03); border-color: rgba(255, 255, 255, 0.07); }
}

.cb-cyclecard__nodetext { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.125em; }
.cb-cyclecard__nodetext b {
  color: rgba(255, 255, 255, 0.96);
  font-size: 0.8125em;            /* 13px */
  font-weight: 600;
  line-height: 1.3;
}
.cb-cyclecard__nodetext em {
  color: rgba(255, 255, 255, 0.56);
  font-size: 0.6875em;
  font-style: normal;
  line-height: 1.4;
}
.cb-cyclecard__nodeval {
  flex: none;
  color: rgba(255, 255, 255, 0.46);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.625em;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

/* ---- De overdracht: klaar voor goedkeuring, de laatste handeling blijft bij de klant ---- */

.cb-cyclecard__handoff {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 0.875em;
  margin-top: 1.75em;
  padding: 0.875em 1em;
  border-radius: 0.75em;
  background: linear-gradient(120deg, rgba(52, 211, 153, 0.14), rgba(255, 255, 255, 0.05) 60%);
  border: 1px solid rgba(52, 211, 153, 0.34);
  box-shadow: 0 0 1.75em rgba(52, 211, 153, 0.14);
  /* Blijft gedempt staan zolang de cyclus loopt: de plek is er al, hij licht op zodra
     het werk klaar is. Volledig wegfaden liet een gat vallen onder de stappen. */
  opacity: 0.3;
  animation: cb-cycle-handoff 12s ease-out infinite;
  animation-delay: calc(var(--n, 4) * 1s + 1.6s);
}
@keyframes cb-cycle-handoff {
  0%, 4%    { opacity: .3; transform: translateY(0.3em); }
  10%, 68%  { opacity: 1;  transform: none; }
  76%, 100% { opacity: .3; transform: translateY(0.3em); }
}
.cb-cyclecard__ready { flex: 1; min-width: 0; display: flex; align-items: center; gap: 0.75em; }
.cb-cyclecard__readytext { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.1875em; }
.cb-cyclecard__readytext b {
  color: #fff;
  font-size: 0.9375em;            /* 15px */
  font-weight: 700;
  line-height: 1.3;
}
.cb-cyclecard__readytext em {
  color: rgba(255, 255, 255, 0.56);
  font-size: 0.6875em;
  font-style: normal;
  line-height: 1.4;
}
.cb-cyclecard__readyval {
  flex: none;
  color: #fff;
  font-size: 1em;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
/* De knop die de klant zet: dezelfde chipvorm als het audit-stempel, maar met een
   ring die één keer uitdijt zodra het blok in beeld staat. */
.cb-cyclecard__approve {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.375em;
  padding: 0.4375em 0.8125em;
  border-radius: 0.5em;
  background: rgba(52, 211, 153, 0.22);
  border: 1px solid rgba(52, 211, 153, 0.55);
  color: #A7F3D0;
  font-size: 0.75em;
  font-weight: 700;
  white-space: nowrap;
  animation: cb-cycle-approve 12s ease-out infinite;
  animation-delay: calc(var(--n, 4) * 1s + 2.2s);
}
.cb-cyclecard__approve svg { width: 0.875em; height: 0.875em; }
@keyframes cb-cycle-approve {
  0%, 6%   { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.55); }
  16%      { box-shadow: 0 0 0 0.5em rgba(52, 211, 153, 0); }
  20%, 100%{ box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); }
}

.cb-cyclecard__foot {
  position: relative;
  z-index: 1;
  margin-top: 1.125em;
  color: rgba(255, 255, 255, 0.74);
  font-size: 0.75em;
  line-height: 1.45;
  font-weight: 600;
}

@media (max-width: 767px) {
  .cb-cyclecard__handoff { flex-wrap: wrap; gap: 0.75em; }
  .cb-cyclecard__ready { flex-basis: 100%; }
}

/* Zonder beweging: de cyclus staat meteen compleet, zonder lopend lichtpunt. */
@media (prefers-reduced-motion: reduce) {
  .cb-cyclecard__spark { display: none; }
  .cb-cyclecard__tag i,
  .cb-cyclecard__mark,
  .cb-cyclecard__box,
  .cb-cyclecard__handoff,
  .cb-cyclecard__approve { animation: none; }
  .cb-cyclecard__mark {
    color: #6EE7A0;
    background: rgba(52, 211, 153, 0.20);
    border-color: rgba(52, 211, 153, 0.55);
  }
  .cb-cyclecard__box {
    opacity: 1;
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.14);
  }
  .cb-cyclecard__handoff { opacity: 1; }
}

/* ---------------------------------------------------------------------------
   Reconciliatie (visual="reconcile") — de hero van Managed Reconciliation.
   Erft kaart, gloed en glas van .cb-solcard; alleen inhoud en beweging staan hier.

   Eén lus van 12s. Het lichtpunt zakt tussen 5% en 42% langs de gecontroleerde
   bronbestanden; per rij (delay `--i`) springt de status aan: groen bij een match,
   amber bij een verschil. Het stempel onderaan wacht op `--n`.
   --------------------------------------------------------------------------- */

.cb-reccard__tag {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4375em;
  padding: 0.3125em 0.75em;
  border-radius: 0.5em;
  background: rgba(52, 211, 153, 0.16);
  border: 1px solid rgba(52, 211, 153, 0.40);
  color: #6EE7A0;
  font-size: 0.75em;
  font-weight: 600;
  white-space: nowrap;
}
.cb-reccard__tag i {
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: #34D399;
  animation: cb-rec-pulse 12s ease-in-out infinite;
}
@keyframes cb-rec-pulse {
  0%, 42%, 100% { opacity: 1;  box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.55); }
  21%           { opacity: .5; box-shadow: 0 0 0 0.4em rgba(52, 211, 153, 0); }
}

/* Twee kolomlabels: links waar de data vandaan komt, rechts waar hij tegen ligt. */
.cb-reccard__cols {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75em;
  margin: 1.5em 0 0.75em 2.375em;
}
.cb-reccard__collabel {
  color: rgba(255, 255, 255, 0.52);
  font-size: 0.6875em;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.cb-reccard__collabel--b { color: rgba(255, 255, 255, 0.38); }

.cb-reccard__trail {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0.625em;
}
.cb-reccard__rail {
  position: absolute;
  left: 0.6875em;
  top: -1.75em;
  bottom: 1.25em;
  width: 2px;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.30) 0 0.1875em, transparent 0.1875em 0.5em);
  background-size: 100% 0.5em;
}
.cb-reccard__spark {
  position: absolute;
  left: 0.4375em;
  top: -1.75em;
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: #A7F3D0;
  box-shadow: 0 0 0.75em 0.125em rgba(52, 211, 153, 0.75);
  z-index: 2;
  animation: cb-rec-spark 12s cubic-bezier(.42, 0, .58, 1) infinite;
}
@keyframes cb-rec-spark {
  0%        { top: -1.75em; opacity: 0; }
  5%        { top: -1.75em; opacity: 1; }
  42%       { top: calc(100% - 1.25em); opacity: 1; }
  47%, 100% { top: calc(100% - 1.25em); opacity: 0; }
}

.cb-reccard__row {
  display: flex;
  align-items: center;
  gap: 0.875em;
}
.cb-reccard__mark {
  position: relative;
  z-index: 1;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5em;
  height: 1.5em;
  border-radius: 50%;
  background: rgba(15, 20, 24, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: transparent;
  animation: cb-rec-mark 12s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * 1s + 1.6s);
}
.cb-reccard__mark svg { width: 0.875em; height: 0.875em; }
@keyframes cb-rec-mark {
  0%, 3%    { color: transparent; background: rgba(15, 20, 24, 0.9);   border-color: rgba(255, 255, 255, 0.16); transform: scale(1); }
  5%        { color: #6EE7A0;     background: rgba(52, 211, 153, 0.30); border-color: rgba(52, 211, 153, 0.75); transform: scale(1.18); }
  9%, 80%   { color: #6EE7A0;     background: rgba(52, 211, 153, 0.20); border-color: rgba(52, 211, 153, 0.55); transform: scale(1); }
  88%, 100% { color: transparent; background: rgba(15, 20, 24, 0.9);   border-color: rgba(255, 255, 255, 0.16); transform: scale(1); }
}
/* De rij die eruit springt: amber, en hij blijft één tel langer opvallen. */
.cb-reccard__row--warn .cb-reccard__mark { animation-name: cb-rec-mark-warn; }
@keyframes cb-rec-mark-warn {
  0%, 3%    { color: transparent; background: rgba(15, 20, 24, 0.9);   border-color: rgba(255, 255, 255, 0.16); transform: scale(1); }
  5%        { color: #FCD34D;     background: rgba(245, 158, 11, 0.34); border-color: rgba(245, 158, 11, 0.85); transform: scale(1.3); }
  9%, 80%   { color: #FCD34D;     background: rgba(245, 158, 11, 0.22); border-color: rgba(245, 158, 11, 0.62); transform: scale(1.06); }
  88%, 100% { color: transparent; background: rgba(15, 20, 24, 0.9);   border-color: rgba(255, 255, 255, 0.16); transform: scale(1); }
}

.cb-reccard__box {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.75em;
  padding: 0.625em 0.875em;
  border-radius: 0.625em;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  opacity: 0.4;
  animation: cb-rec-box 12s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * 1s + 1.6s);
}
@keyframes cb-rec-box {
  0%, 3%    { opacity: .4; background: rgba(255, 255, 255, 0.03); border-color: rgba(255, 255, 255, 0.07); }
  6%        { opacity: 1;  background: rgba(255, 255, 255, 0.10); border-color: rgba(255, 255, 255, 0.22); }
  9%, 80%   { opacity: 1;  background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.14); }
  88%, 100% { opacity: .4; background: rgba(255, 255, 255, 0.03); border-color: rgba(255, 255, 255, 0.07); }
}
.cb-reccard__row--warn .cb-reccard__box { animation-name: cb-rec-box-warn; }
@keyframes cb-rec-box-warn {
  0%, 3%    { opacity: .4; background: rgba(255, 255, 255, 0.03);  border-color: rgba(255, 255, 255, 0.07); }
  6%        { opacity: 1;  background: rgba(245, 158, 11, 0.16);   border-color: rgba(245, 158, 11, 0.48); }
  9%, 80%   { opacity: 1;  background: rgba(245, 158, 11, 0.10);   border-color: rgba(245, 158, 11, 0.38); }
  88%, 100% { opacity: .4; background: rgba(255, 255, 255, 0.03);  border-color: rgba(255, 255, 255, 0.07); }
}

.cb-reccard__rowtext { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.125em; }
.cb-reccard__rowtext b {
  color: rgba(255, 255, 255, 0.96);
  font-size: 0.8125em;            /* 13px */
  font-weight: 600;
  line-height: 1.3;
}
.cb-reccard__rowtext em {
  color: rgba(255, 255, 255, 0.56);
  font-size: 0.6875em;
  font-style: normal;
  line-height: 1.4;
}
/* Statuschip rechts: de uitkomst van de vergelijking voor die rij. */
.cb-reccard__status {
  flex: none;
  padding: 0.1875em 0.5em;
  border-radius: 0.375em;
  background: rgba(52, 211, 153, 0.14);
  border: 1px solid rgba(52, 211, 153, 0.34);
  color: #6EE7A0;
  font-size: 0.625em;
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.cb-reccard__row--warn .cb-reccard__status {
  background: rgba(245, 158, 11, 0.16);
  border-color: rgba(245, 158, 11, 0.45);
  color: #FCD34D;
}

.cb-reccard__foot {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 0.75em;
  margin-top: 1.5em;
  padding-top: 1.25em;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  opacity: 0;
  animation: cb-rec-foot 12s ease-out infinite;
  animation-delay: calc(var(--n, 4) * 1s + 1.6s);
}
@keyframes cb-rec-foot {
  0%, 4%    { opacity: 0; transform: translateY(0.4em); }
  10%, 68%  { opacity: 1; transform: none; }
  76%, 100% { opacity: 0; transform: translateY(-0.2em); }
}
.cb-reccard__stamp {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.375em;
  padding: 0.3125em 0.6875em;
  border-radius: 0.5em;
  background: rgba(52, 211, 153, 0.16);
  border: 1px solid rgba(52, 211, 153, 0.45);
  color: #6EE7A0;
  font-size: 0.75em;
  font-weight: 700;
  white-space: nowrap;
}
.cb-reccard__stamp svg { width: 0.875em; height: 0.875em; }
.cb-reccard__foottext {
  color: rgba(255, 255, 255, 0.74);
  font-size: 0.75em;
  line-height: 1.45;
  font-weight: 600;
}

@media (max-width: 767px) {
  .cb-reccard__foot { flex-wrap: wrap; gap: 0.625em; }
  .cb-reccard__box { flex-wrap: wrap; gap: 0.375em 0.75em; }
}

/* Zonder beweging: alle rijen staan meteen op hun eindstand. */
@media (prefers-reduced-motion: reduce) {
  .cb-reccard__spark { display: none; }
  .cb-reccard__tag i,
  .cb-reccard__mark,
  .cb-reccard__box,
  .cb-reccard__foot { animation: none; }
  .cb-reccard__mark {
    color: #6EE7A0;
    background: rgba(52, 211, 153, 0.20);
    border-color: rgba(52, 211, 153, 0.55);
  }
  .cb-reccard__row--warn .cb-reccard__mark {
    color: #FCD34D;
    background: rgba(245, 158, 11, 0.22);
    border-color: rgba(245, 158, 11, 0.62);
  }
  .cb-reccard__box {
    opacity: 1;
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.14);
  }
  .cb-reccard__row--warn .cb-reccard__box {
    background: rgba(245, 158, 11, 0.10);
    border-color: rgba(245, 158, 11, 0.38);
  }
  .cb-reccard__foot { opacity: 1; }
}