/* ============================================================
   bconnect-shared.css — gedeelde basisstyling voor alle
   Bconnect-widgets (container, knoppen, eyebrow, accent, lead,
   reveal-states au-sec/au-rise/hh-in, lg-sectiebasis, au-num).
   Geëxtraheerd uit de Cloud Design-cascade in laadvolgorde.
   Elke widget hangt via get_style_depends() aan deze handle.
   ============================================================ */

/* ===== Container binnen elke Bconnect-widget ===== */
.elementor-widget[class*="elementor-widget-bconnect_"] .container {
  max-width: var(--container, 1280px);
  margin: 0 auto;
  padding: 0 var(--gutter, 56px);
  box-sizing: border-box;
}
/* Breekpunten gelijk aan de bron: --gutter wordt 24px onder 1024px en de
   container valt onder 767px terug op 20px zijmarge. Stond hier eerder op
   900px/560px, waardoor tablet-breedtes (901-1024px) nog de volle 56px
   gutter hielden en secties als de klantcase-carousel daar 180px hoger
   uitvielen dan in het ontwerp. De desktop-gutter blijft bewust 56px
   (keuze gebruiker; de bron gebruikt 40px). */
@media (max-width: 1024px) {
  .elementor-widget[class*="elementor-widget-bconnect_"] .container { padding: 0 24px; }
}
@media (max-width: 767px) {
  .elementor-widget[class*="elementor-widget-bconnect_"] .container { padding: 0 20px; }
}

/* De bron zet `h1, h2, h3, h4 { margin: 0 }` op documentniveau; Hello
   Elementor houdt een marge bovenaan koppen (8px), waardoor elke sectie met
   een kop 8px hoger/lager uitkwam dan het ontwerp. Binnen de Bconnect-widgets
   halen we die bovenmarge weg; de ondermarges staan expliciet in de
   sectie-CSS (bv. .tr-h2 { margin-bottom: 16px }).
   Let op de :where() om de WRAPPER: daarmee is deze regel net zo specifiek
   als de bron (0,0,1 — alleen het element telt), zodat sectie-CSS met een
   eigen bovenmarge (bv. .lg-model-h { margin: 18px 0 8px }) blijft winnen. */
:where(.elementor-widget[class*="elementor-widget-bconnect_"]) h1,
:where(.elementor-widget[class*="elementor-widget-bconnect_"]) h2,
:where(.elementor-widget[class*="elementor-widget-bconnect_"]) h3,
:where(.elementor-widget[class*="elementor-widget-bconnect_"]) h4,
:where(.elementor-widget[class*="elementor-widget-bconnect_"]) h5,
:where(.elementor-widget[class*="elementor-widget-bconnect_"]) h6 {
  margin-top: 0;
  /* De bron zet ook `text-wrap: balance` op h1-h4 (page-shell), waardoor
     kaarttitels hun regels gelijkmatig verdelen. Zonder deze regel brak
     bv. de probleemkaart-titel op een andere plek dan in het ontwerp. */
  text-wrap: balance;
  font-family: var(--font-head);
  color: var(--c-navy);
}

/* Kop-schaal exact zoals de bron (page-shell.css): h1-h3 semibold, h4 bold.
   Zonder deze basis viel .bt-title op Hello's 500 uit (bron: 600) en erfden
   koppen zonder eigen regel de Hello-maten. Specificiteit 0,0,1 → elke
   widget-regel met een class wint hier nog van. */
:where(.elementor-widget[class*="elementor-widget-bconnect_"]) h1 {
  font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); font-weight: var(--fw-semibold);
}
:where(.elementor-widget[class*="elementor-widget-bconnect_"]) h2 {
  font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); font-weight: var(--fw-semibold);
}
:where(.elementor-widget[class*="elementor-widget-bconnect_"]) h3 {
  font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3); font-weight: var(--fw-semibold);
}
:where(.elementor-widget[class*="elementor-widget-bconnect_"]) h4 {
  font-size: var(--fs-h4); line-height: var(--lh-h4); font-weight: var(--fw-bold);
}

/* Linkkleur van de bron (`a { color: var(--c-electric) }`). Hello Elementor
   gebruikt #cc3366; dat lekte via `currentColor` naar iconen, randen en
   pseudo-elementen binnen kaarten die zelf een <a> zijn (o.a. .bt-card). */
:where(.elementor-widget[class*="elementor-widget-bconnect_"]) a {
  color: var(--c-electric);
  text-decoration: none;
}
/* De bron heeft ook `a:hover { color: var(--c-magenta) }`. Let op: in de bron
   pakt die regel ook de WITTE tekst van gradient-knoppen die een <a> zijn (de
   probleem-CTA wordt daar bij hover magenta op een magenta verloop — een
   cascadefout in de bron; de nieuwe hero-CSS van dezelfde export zet er
   expliciet `a.btn-primary:hover { color: #fff }` tegenover). We nemen het
   hover-gedrag over voor gewone links en houden knoppen wit/navy. */
:where(.elementor-widget[class*="elementor-widget-bconnect_"]) a:hover {
  color: var(--c-magenta);
}
/* LET OP — hier stond `.elementor a.btn:hover` in deze lijst (12-08-2026
   verwijderd). `.btn` is de basisklasse van álle knoppen, niet alleen van
   de gradient-knoppen, dus die regel maakte óók de tekst van lichte
   knoppen wit. Op de CTA-balk van /partner-programma/ was dat wit op wit:
   de knoptekst verdween bij hover.

   Waarom de eigen regel van die knop niet won: `:hover` telt als een
   class. `.elementor a.btn:hover` is dus 0,3,1 en `.pt-page
   .au-cta-btn:hover` 0,3,0 — gelijk op het class-deel, maar de
   element-selector `a` geeft de doorslag.

   Deze lijst hoort alleen knoppen te bevatten waarvan de tekst per
   definitie wit is, ongeacht de pagina: de gradient-knoppen. Een lichte
   knop zet zijn eigen hover-kleur en heeft hier niets te zoeken. */
.elementor a.btn-primary:hover,
.elementor a.wg-cta:hover { color: #fff; }
.elementor a.bt-band-btn:hover { color: var(--c-navy); }

/* De bron zet `section > .container { position: relative; z-index: 1 }` zodat
   sectie-achtergronden (stippenmaskers, gradient-washes met ::before) nooit
   over de inhoud vallen. */
.elementor-widget[class*="elementor-widget-bconnect_"] section > .container {
  position: relative;
  z-index: 1;
}

/* Idem voor alinea's: de bron zet `p { margin: 0 }`; Hello Elementor houdt
   0.9em ondermarge, waardoor o.a. de klantcase-kaart 14px hoger uitviel.
   Ook hier :where() om de wrapper, zodat sectie-CSS met eigen p-marges
   (bv. .cc-lead, .bt-desc) blijft winnen. */
:where(.elementor-widget[class*="elementor-widget-bconnect_"]) p {
  margin-top: 0;
  margin-bottom: 0;
  text-wrap: pretty;   /* zoals de bron: p { margin: 0; text-wrap: pretty } */
}

/* ===== Debug-modus: zichtbaar foutblok per widget ===== */
.bconnect-debug-block {
  margin: 16px auto;
  max-width: var(--container, 1280px);
  padding: 16px 20px;
  border: 2px dashed #c0392b;
  border-radius: 10px;
  background: #fdf0ee;
  color: #7b241c;
  font: 600 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.bconnect-debug-block code { font-weight: 700; }

.eyebrow.on-dark { color: var(--c-white); }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-head); font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-navy); }
.eyebrow::before { content: ""; width: 22px; height: 1px; background: linear-gradient(90deg, var(--c-navy), var(--c-magenta)); }
.eyebrow.on-dark { color: var(--c-white); }
.eyebrow.on-dark::before { background: linear-gradient(90deg, var(--c-sky), var(--c-magenta-soft)); }
.accent { background: var(--gradient-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.section-head.center .eyebrow { justify-content: center; }

/* ============================================================
   KNOPPEN EN FAQ-TRIGGERS — parent-reset neutraliseren (11-08-2026)

   GEMETEN, niet aangenomen. hello-elementor/assets/css/reset.css is
   geminificeerd (één regel); de posities hieronder zijn tekenoffsets.

     offset 3108  [type=button],[type=submit],button
                  color:#c36; background-color:transparent;
                  border:1px solid #c36
                  -> 0,1,0 via [type=button], 0,0,1 via button
     offset 3540  [type=button]:focus, [type=button]:hover,
                  [type=submit]:focus, [type=submit]:hover,
                  button:focus, button:hover
                  background-color:#c36; color:#fff
                  -> 0,2,0 via [type=button], 0,1,1 via button

   LET OP: dit is 0,1,0 / 0,2,0 — NIET 0,1,1. Elke <button> in dit
   thema krijgt type="button", dus het attribuutdeel van die
   selectorlijst matcht en bepaalt de specificiteit. Daarmee staat de
   reset gelijk aan een enkele class-selector: hij wint van alles wat
   ervoor laadt en van niets wat erna komt.

   Gemeten met getComputedStyle op 11-08-2026 (bconnecttestnew.local):
   Hello-roze #c36 = rgb(204,51,102) stond op .hdr-lang-btn en
   .hdr-lang-item (sitewide, in de header), .nav-toggle, .cc-dot,
   .au-video-start, .kn-search-clear; en als achtergrond bij hover en
   focus op .tm-btn, .km-cal-nav, .km-cal-day, .km-slot en op .au-faq-q
   binnen de tarieven-widget (de FAQ-widget zelf was al gepatcht met
   .elementor-widget-bconnect_faq-scoping, de tarieven-widget niet).

   AANPAK — geen !important. De specificiteit hieronder is per regel
   exact gelijk aan de reset-regel die hij neutraliseert, en dit blok
   staat VOOR .btn in dit bestand. Gevolg:
     - reset.css laadt eerder (gemeten positie 11 vs 16) -> wij winnen;
     - .btn/.btn-primary hieronder en alle widget-CSS (positie 27+)
       laden later -> die winnen weer van dit blok. Dat is de bedoeling:
       dit zet de bodem, niet de bovenlaag.
   De specificiteit hier verhogen zou juist fout zijn: dan verslaat dit
   blok de widget-CSS die de bedoelde kleuren zet.

   Werkt op <button class="btn"> en op <a class="btn">: voor de
   <a>-variant doet dit blok niets, en die heeft het ook niet nodig —
   de reset raakt daar alleen a:hover/a:active (color:#336, 0,1,1) en
   dat verliest van .btn-primary:hover / .btn-secondary:hover (0,2,0).
   ============================================================ */
[type="button"], [type="reset"], [type="submit"], button {
	color: inherit;
}
[type="button"]:hover, [type="reset"]:hover, [type="submit"]:hover, button:hover,
[type="button"]:focus, [type="reset"]:focus, [type="submit"]:focus, button:focus {
	color: inherit;
	background-color: transparent;
}
/* Zichtbare focus-indicator voor toetsenbordgebruik. Nodig omdat
   reset.css met `:focus:not(:focus-visible) { outline: none }` de ring
   wel weghaalt maar nooit terugzet, en omdat gid-elementor/app.css
   `:focus { outline: none }` (0,1,0) sitewide zet — die laag laadt op
   staging op positie 1 en lokaal helemaal niet, want de plugin staat
   daar niet. Deze regel is 0,2,0 via [type=button] en 0,1,1 via
   button/summary en verslaat app.css dus op specificiteit, niet op
   laadvolgorde. Widget-eigen focus-visible-regels (.au-faq-q,
   .bc-cta-block .btn) laden later en houden het laatste woord. */
[type="button"]:focus-visible, [type="reset"]:focus-visible,
[type="submit"]:focus-visible, button:focus-visible,
summary:focus-visible {
	outline: 2px solid var(--c-electric);
	outline-offset: 2px;
}

.btn { --btn-bg: var(--c-navy); display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-head); font-size: 15px; font-weight: 700; padding: 13px 22px; border-radius: var(--radius-pill); border: 0; cursor: pointer; transition: background-color .18s var(--ease), transform .12s var(--ease), box-shadow .2s var(--ease); text-decoration: none; white-space: nowrap; position: relative; letter-spacing: -0.005em; }
.btn:active { transform: translateY(1px) scale(0.99); }
/* bron: .btn { position: relative; overflow: hidden; isolation: isolate } — nodig
   om de hover-"sheen" (.btn-primary::before) binnen de pill te klemmen.
   LET OP: `overflow:hidden` zet voor een flex-item de automatische
   minimumhoogte op 0. Daardoor klapten knoppen met `flex: 1 1 0` in een
   kolom-flex in tot alleen hun padding (26px) — precies wat er in de bron
   gebeurt met de twee klantreis-knoppen op ≤768px. `min-height: fit-content`
   houdt ze op hun inhoudshoogte zonder de flex-verdeling op desktop te raken. */
.btn { overflow: hidden; isolation: isolate; min-height: fit-content; }
.btn-primary { background: linear-gradient(90deg, #2301fb 0%, #a80290 100%); color: white; box-shadow: var(--shadow-btn); }
.btn-primary:hover { background: linear-gradient(90deg, #3a1eff 0%, #c213ad 100%); color: white; box-shadow: var(--shadow-btn-hover); transform: translateY(-1px); }
/* Elementor-valkuil: frontend.min.css zet `.elementor a { box-shadow: none }`
   (0,1,1) en verslaat daarmee `.btn-primary` (0,1,0) — knoppen die een <a>
   zijn verloren hun knopschaduw. Zelfde patroon als `.elementor img
   { border-radius: 0 }`. Hier met een element-selector nét specifieker
   gemaakt; géén !important, zodat widget-CSS dit nog kan overschrijven. */
.elementor a.btn-primary { box-shadow: var(--shadow-btn); }
.elementor a.btn-primary:hover { box-shadow: var(--shadow-btn-hover); }
.btn-secondary { background: white; color: var(--c-navy); border: 1.5px solid var(--c-navy); padding: 11.5px 20.5px; }
.btn-secondary:hover { background: var(--c-navy); color: white; box-shadow: var(--shadow-btn); transform: translateY(-1px); }
.btn-ghost { background: transparent; color: var(--c-navy); padding: 12px 14px; }
.btn-ghost:hover { color: var(--c-electric); }
.btn-arrow::after { content: "\2192"; font-weight: 400; transition: transform .18s var(--ease); }
.btn-arrow:hover::after { transform: translateX(4px); }
.btn-on-dark.btn-secondary { background: rgba(255,255,255,0.06); color: white; border-color: rgba(255,255,255,0.35); backdrop-filter: blur(8px); }
.btn-on-dark.btn-secondary:hover { background: white; color: var(--c-navy); border-color: white; }

/* ============================================================
   ELEMENTOR THEME STYLE — knopstijl van de oude site (12-08-2026)

   GEMETEN op staging.bconnect.chat én bconnect.chat, inline in de
   <head> (Elementor Site Settings -> Thema-stijl -> Knoppen, kit 26980):

     .elementor-kit-26980 button,
     .elementor-kit-26980 input[type="button"],
     .elementor-kit-26980 input[type="submit"],
     .elementor-kit-26980 .elementor-button
       { font-size:16px; font-weight:700; color:#FFFFFF;
         background-color:#AA028C; border-style:solid;
         border-width:2px; border-radius:25px }        -> 0,1,1

     dezelfde lijst met :hover en :focus
       { background-color:#FFFFFF }                    -> 0,2,1

   #AA028C is de magenta van de oude gid-huisstijl. De selector bevat
   het kale element `button`, dus hij raakt ELKE <button> in dit thema,
   niet alleen Elementor-knoppen. Alles wat wij op 0,1,0 zetten
   (`.au-faq-q`, `.cc-arrow`, `.btn-secondary`, ...) verliest daarvan op
   specificiteit — ongeacht laadvolgorde. Zichtbaar gevolg op staging:
   de FAQ-vragen op /tarieven/ waren magenta pillen met 2px rand en
   25px radius in plaats van regels in een witte kaart.

   LOKAAL NIET REPRODUCEERBAAR. De lokale Elementor-kit is post 5 en
   heeft geen knop-thema-stijl ingesteld; die regel wordt daar dus niet
   uitgestuurd. De bug bestaat alleen waar kit 26980 draait: staging en
   productie. Een lokale check zegt hier niets — verifieer op staging.

   AANPAK — geen !important, en niet de kit-instelling leegmaken (die
   is nog in gebruik door de oude pagina's op productie). In plaats
   daarvan staat er bij elke geraakte knop een element-selector vóór de
   class: `.cc-arrow` (0,1,0) wordt `button.cc-arrow` (0,1,1), en
   `.cc-arrow:hover` (0,2,0) wordt `button.cc-arrow:hover` (0,2,1).
   Daarmee staan we exact gelijk aan de kit-regel en wint onze CSS op
   laadvolgorde: de kit staat inline op positie 33, onze widget-CSS op
   51 en later. Omdat elke geraakte regel evenveel omhoog gaat, blijven
   de onderlinge verhoudingen binnen ons eigen thema ongewijzigd.

   REGEL VOOR NIEUWE KNOPPEN: een <button> die zelf zijn achtergrond,
   rand, radius of tekstkleur zet, moet dat doen op minimaal 0,1,1 —
   dus met `button.` ervoor of vanuit een oudergeselecteerde regel.
   Zet je hem op 0,1,0, dan is hij op staging en productie magenta.

   Hieronder de .btn-familie. Die zit op zowel <a> als <button>, dus
   hier kan de element-prefix er niet zomaar voor: <a class="btn"> mag
   niet uit de selector vallen. Daarom een aanvullend blok dat alleen
   de vier eigenschappen terugzet die de kit kaapt. Volgorde telt:
   `button.btn` zet `border: 0`, `button.btn-secondary` staat erna en
   zet zijn eigen rand terug.
   ============================================================ */
button.btn { font-size: 15px; font-weight: 700; border: 0; border-radius: var(--radius-pill); }
button.btn-primary { background: linear-gradient(90deg, #2301fb 0%, #a80290 100%); color: white; }
button.btn-primary:hover { background: linear-gradient(90deg, #3a1eff 0%, #c213ad 100%); color: white; }
button.btn-secondary { background: white; color: var(--c-navy); border: 1.5px solid var(--c-navy); }
button.btn-secondary:hover { background: var(--c-navy); color: white; }
button.btn-ghost { background: transparent; color: var(--c-navy); }
button.btn-ghost:hover { background: transparent; color: var(--c-electric); }
/* ============================================================
   SECTIE-CTA (12-08-2026)
   Losse, gecentreerde knop die de primaire actie halverwege een lange
   pagina herhaalt. Gerenderd door bconnect_section_cta() in
   functions.php, zodat de knop overal dezelfde markup en marges heeft.
   Bewust geen volle band: die blijft het zwaartepunt onderaan de pagina,
   en drie banden op één pagina halen daar kracht weg.
   De marge staat op het blok en niet op de knop, zodat de knop zelf
   gewoon .btn-primary blijft en niets van de knopstijl afwijkt.
   ============================================================ */
.bc-sec-cta {
	display: flex;
	justify-content: center;
	margin-top: clamp(32px, 3.4vw, 48px);
}

.hero h1 .accent { background: var(--gradient-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero p.lead { font-size: 19px; line-height: 1.6; color: var(--c-text-muted); max-width: 560px; margin-bottom: 32px; }
.page-hero p.lead { font-size: 18px; line-height: 1.6; color: var(--c-text-muted); max-width: 640px; margin-bottom: 28px; }

@media (max-width: 1024px) {
  .nav-cta .btn-secondary { display: none; }
}

@media (max-width: 720px) {
  .hero p.lead, .page-hero p.lead { font-size: 16px; }
  .btn { width: 100%; }
}

.accent { background: var(--gradient-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-head); font-size: var(--fs-eyebrow); font-weight: var(--fw-bold); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--c-navy); }
.lead { font-size: var(--fs-lead); line-height: var(--lh-lead); color: var(--c-text-muted); }

@media (prefers-reduced-motion: no-preference) {
  .au-sec .au-rise { transition: opacity .6s var(--ease), transform .6s var(--ease); transition-delay: calc(var(--i, 0) * 70ms); }
  .au-sec:not(.is-inview) .au-rise { opacity: 0; transform: translateY(16px); }
  .au-sec.is-settled .au-rise { transition: none; opacity: 1; transform: none; }
}

.au-head { max-width: 780px; margin: 0 auto var(--space-8); text-align: center; }
.au-head .eyebrow { justify-content: center; margin-bottom: 16px; }
.au-h2 { color: var(--c-navy); margin: 0 0 16px; text-wrap: pretty; }
.au-num { font-family: var(--font-head); font-weight: var(--fw-semibold); line-height: 1; letter-spacing: -0.03em; white-space: nowrap; background: var(--gradient-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.au-num-unit { font-size: 0.46em; font-weight: var(--fw-bold); vertical-align: 0.86em; margin-left: 0.05em; letter-spacing: 0; }
.au-num-suffix { font-size: 0.30em; font-weight: var(--fw-bold); vertical-align: 0.96em; margin-left: 0.12em; }
.au-num-pre { font-size: 0.40em; font-weight: var(--fw-bold); vertical-align: 0.46em; margin-right: 0.14em; letter-spacing: 0; }
.au-num.is-dummy { border-bottom: 2px dashed rgba(168,2,142,.42); padding-bottom: 4px; }
.hh-in { opacity: 1; }

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

.au-hero .lead { font-size: 16.5px; line-height: 1.6; color: var(--c-text-muted); max-width: 30em; margin-bottom: 26px; }
.au-leak-intro .eyebrow { margin-bottom: 16px; }
.au-seg-intro .au-h2 { color: #fff; }
.au-seg-intro .accent { background: var(--gradient-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
.au-seg-stat .au-num { font-size: clamp(34px, 3.6vw, 46px); }
.au-seg-imgstat .au-num { font-size: clamp(40px, 4.4vw, 52px); }
.au-case-card .au-num { font-size: clamp(40px, 4.4vw, 54px); }
.au-ks-head .au-h2 { text-align: left; margin: 0 0 16px; max-width: 18em; }
.au-tr-stat .au-num { font-size: clamp(36px, 4vw, 48px); }
.au-num-on-dark { background: none; -webkit-text-fill-color: var(--c-white); color: var(--c-white); }
.au-faq .au-head { max-width: 760px; }
.au-reach-big .au-num-unit { -webkit-text-fill-color: var(--c-navy); color: var(--c-navy); }
.lg-sec { position: relative; padding: clamp(40px, 5vw, 64px) 0; overflow: hidden; }
.lg-bg-light { background: #ffffff; }
.lg-bg-lav { background: #EEF1F8; }
.lg-bg-navy { background: var(--c-navy); color: #fff; }
.lg-bg-deep { background: var(--c-navy-deep); color: #fff; }
.lg-bg-light::before, .lg-bg-lav::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(60% 70% at 100% 0%, rgba(35,1,251,0.05) 0%, transparent 60%), radial-gradient(60% 70% at 0% 100%, rgba(168,2,144,0.045) 0%, transparent 60%); }
.lg-bg-navy::before, .lg-bg-deep::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; background-image: radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px); background-size: 26px 26px; -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 0%, transparent 75%); mask-image: radial-gradient(120% 90% at 50% 0%, #000 0%, transparent 75%); }
.lg-sec > .container { position: relative; z-index: 1; }
.lg-eyebrow { display: inline-block; font-family: var(--font-head); font-weight: var(--fw-bold); font-size: var(--fs-eyebrow); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; background: var(--brand-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: 16px; }
.lg-h2 { font-family: var(--font-head); font-weight: var(--fw-semibold); font-size: clamp(30px, 3.6vw, 44px); line-height: 1.1; letter-spacing: -0.02em; color: var(--c-navy); text-wrap: balance; margin: 0; }
.lg-bg-navy .lg-h2, .lg-bg-deep .lg-h2 { color: #fff; }
.lg-intro { font-size: var(--fs-lead); line-height: 1.6; color: var(--c-text-muted); margin: 18px 0 0; max-width: 56ch; }
.lg-bg-navy .lg-intro, .lg-bg-deep .lg-intro { color: rgba(255,255,255,0.72); }
.lg-bg-navy .lg-track-body { color: rgba(255,255,255,0.82); }
.lg-bg-navy .lg-track-label { color: rgba(255,255,255,0.7); }
.lg-bg-navy .accent { background: var(--gradient-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lg-head { max-width: 720px; }
.lg-head.is-center { margin-left: auto; margin-right: auto; text-align: center; }
.lg-head.is-center .lg-intro { margin-left: auto; margin-right: auto; }
.lg-textlink { font-family: var(--font-head); font-size: 15px; font-weight: var(--fw-bold); color: var(--c-navy); display: inline-flex; align-items: center; gap: 7px; transition: color .18s var(--ease), gap .18s var(--ease); }
.lg-textlink:hover { color: var(--c-magenta); gap: 11px; }
.lg-textlink .arr { transition: transform .18s var(--ease); }
.lg-textlink:hover .arr { transform: translateX(3px); }
.lg-bg-navy .lg-textlink, .lg-bg-deep .lg-textlink { color: #fff; }
.lg-bg-navy .lg-textlink:hover, .lg-bg-deep .lg-textlink:hover { color: var(--c-magenta-soft); }
.lg-logobar-proof .au-num { font-size: clamp(40px, 5vw, 56px); }
.lg-truth-head .au-num { font-size: clamp(72px, 12vw, 132px); }
.lg-deliver-text .lg-intro { max-width: 48ch; }

@media (prefers-reduced-motion: no-preference) {
  .au-sec .lg-meter-fill { transition: transform .8s var(--ease); transition-delay: calc(var(--i,0) * .12s + .2s); }
  .au-sec:not(.is-inview) .lg-meter-fill { transform: scaleX(0); }
  .au-sec.is-settled .lg-meter-fill { transition: none; transform: none; }
}

.lg-track-stat .au-num { font-size: clamp(42px, 5vw, 60px); }
.lg-cta-block h2 .accent { -webkit-text-fill-color: #fff; color: #fff; background: none; }
.lg-demo-copy .lg-intro { max-width: 46ch; }
.lg-demo .lg-demo-copy .lg-intro { max-width: 62ch; margin-left: auto; margin-right: auto; }
.home-hero .eyebrow { margin-bottom: 12px; }
.home-hero .lead { font-size: 17px; max-width: 46em; margin-bottom: 18px; }
.hh-logobar-intro .accent { background: linear-gradient(135deg, #2301fb, #a80290); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hh-in { opacity: 1; }

@media (prefers-reduced-motion: no-preference) {
  .hh-in { transform: translateY(16px); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: calc(var(--i, 0) * 80ms); }
  .hh-in.is-in { opacity: 1; transform: none; }
}

.ld-text .eyebrow { margin-bottom: 16px; }
.ld-text .lead { max-width: 500px; margin-bottom: 30px; font-size: 18px; line-height: 1.6; }
.wl-head .eyebrow { margin-bottom: 16px; }
.jr-head .eyebrow { justify-content: center; margin-bottom: 16px; }
.sc-head .eyebrow { justify-content: center; margin-bottom: 16px; }
.tr-head .eyebrow { justify-content: center; margin-bottom: 16px; white-space: nowrap; }
.tr-head .eyebrow.on-dark { color: var(--c-white); }
.tr-h2 .accent { background: linear-gradient(135deg, #2301fb, #a80290); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tr-cta .btn { padding: 14px 26px; font-size: 15px; }
.cc-head .eyebrow { justify-content: center; margin-bottom: 16px; }
.bt-head .eyebrow { justify-content: center; margin-bottom: 16px; white-space: nowrap; }
.bt-band .accent { background: var(--gradient-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cta11-card .btn { width: 100%; justify-content: center; margin-top: 2px; }

@media (max-width: 767px) {
  .ld-section .ld-text .lead { margin-left: auto; margin-right: auto; }
  .site-header .nav-cta .btn { width: auto; }
  .home-hero .lead { max-width: 100%; }
  .home-hero .hero-actions .btn { width: 100%; }
}

.hhc-title .accent { background: linear-gradient(90deg, #2301fb 0%, #a80290 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hhc .hh-in { opacity: 1; }

@media (prefers-reduced-motion: no-preference) {
  .hhc .hh-in { transform: translateY(16px); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: calc(var(--i, 0) * 80ms); }
  .hhc .hh-in.is-in { opacity: 1; transform: none; }
}

@media (max-width: 560px) {
  .hhc-actions .btn { width: 100%; justify-content: center; }
}

.hhv-title .accent { background: var(--hhv-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

@media (max-width: 560px) {
  .hhv-actions .btn { width: 100%; justify-content: center; }
}

.tr-h2 .accent, .bt-band .accent { background: none !important; -webkit-background-clip: initial !important; background-clip: initial !important; -webkit-text-fill-color: #FFFFFF !important; color: #FFFFFF !important; }
.ct-hero-inner .lg-eyebrow { justify-content: center; margin-bottom: 16px; }
.ct-hero-inner .lead { margin: 0 auto; max-width: 40em; }
.ct-sent .btn { margin-top: 8px; }
.rvp-hero-inner .lg-eyebrow { justify-content: center; margin-bottom: 16px; }
.rvp-hero-inner .lead { margin: 0 auto; max-width: 38em; }
.tmp-hero .lead { max-width: 34em; }

/* ============================================================
   Kop-typografie voor au-h2/lg-h2-koppen in widget-context.
   Het designsysteem zet dit globaal op h1-h4 (colors_and_type.css);
   Hello Elementor levert dat niet, dus hier expliciet op de
   sectiekop-klassen zodat elke widget dezelfde Roc Grotesk-kop
   krijgt. Bewust op klasse (niet op kale h2) om Elementor- en
   theme-koppen buiten de widgets ongemoeid te laten.
   ============================================================ */
.au-h2 {
  font-family: var(--font-head);
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
  font-weight: var(--fw-semibold);
  color: var(--c-navy);
  text-wrap: balance;
}

/* ============================================================
   Ronde hoeken op content-visuals herstellen.
   Elementor-core zet `.elementor img { border-radius: 0 }` (specificiteit
   0,1,1) en dat verslaat onze eigen img-afrondingen (0,1,0). Met de
   `.elementor-widget-container`-prefix winnen we die weer terug. Bewust
   ALLEEN de grote content-visuals — logo's, avatars en iconen blijven zoals ze zijn.

   `:not(.hv-avatar)` is nodig omdat `.au-hero-shot img` óók de ronde
   chat-avatar in de hero-mock raakte: die kreeg 18px i.p.v. 999px en werd
   dus vierkant. Deze selector is 0,2,1 en verslaat `.au-hero-shot
   .hv-avatar` (0,2,0), dus uitsluiten is de enige nette fix — specificiteit
   erop stapelen zou de bedoeling van dit blok juist ondermijnen. Raakt alle
   hero's die `.au-hero-shot` gebruiken (automotive, leadgen, meer-rendement,
   home-en-living); de export heeft de avatar overal rond.
   ============================================================ */
.elementor-widget-container .lg-chan-img,
.elementor-widget-container .lg-deliver-img,
.elementor-widget-container .lg-prob-img img,
.elementor-widget-container .au-hero-shot img:not(.hv-avatar),
.elementor-widget-container .mr-hero-img {
  border-radius: var(--radius-feature);
}

/* "Sheen" over de primaire knop: onzichtbaar in rust, veegt bij hover één keer
   over de knop (bron: .btn-primary::before + @keyframes prSheen uit de
   premium-gedragslaag). .btn heeft al overflow:hidden, dus de veeg blijft
   binnen de pill. */
.btn-primary::before {
  content: "";
  position: absolute;
  top: -20%;
  bottom: -20%;
  left: -80%;
  width: 42%;
  background: linear-gradient(105deg, transparent 0%, rgba(255,255,255,.38) 50%, transparent 100%);
  transform: skewX(-18deg);
  pointer-events: none;
  z-index: 0;
  opacity: 0;
}
.btn-primary:hover::before { animation: prSheen .85s var(--ease); }
@keyframes prSheen {
  0%   { left: -80%; opacity: 0; }
  12%  { opacity: 1; }
  100% { left: 130%; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .btn-primary:hover::before { animation: none; }
}

/* ============================================================
   CHECKLIST — vinklijst met groene gradient-bolletjes
   ------------------------------------------------------------
   Component 5.12 uit het ontwerpsysteem van de Claude Design-bron.
   Stond nog niet in dit thema; toegevoegd 13-08-2026 bij de nieuwe
   /meer-rendement/ (secties "Onze aanpak" en "Integraties"). Staat
   hier en niet in een widget-stylesheet omdat het een generieke
   lijstvorm is die op meer pagina's terug gaat komen.
   Het vinkje zit als data-URI in de background zodat er geen extra
   verzoek of icoonset voor nodig is.
   ============================================================ */
.checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.checklist li {
  display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start;
  font-family: var(--font-body); font-size: 15px; line-height: 1.6; color: var(--c-text);
}
.checklist li::before {
  content: ""; width: 20px; height: 20px; border-radius: 999px; margin-top: 2px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M2 6.5l2.5 2.5L10 3.5'/></svg>"), linear-gradient(135deg, #44C257, #2E9D3E);
  background-position: center; background-repeat: no-repeat;
  box-shadow: 0 2px 6px rgba(57,181,74,0.30);
}
.checklist.on-dark li { color: rgba(255,255,255,0.92); }