/* ============================================================
   Bconnect Hero — volledige widget-styling
   ------------------------------------------------------------
   De complete hero uit Claude Design: kaarten, chat-vensters,
   workflow-kaart, orbs, animaties en logobalk. Gebruikt de
   tokens uit tokens.css. Geladen via get_style_depends().
   ============================================================ */

/* ===== Container + primaire knop (hero-scope) ===== */
.home-hero-v2 .container,
.hh-logobar-section .container {
  /* width:100% is nodig: .hh-logobar-section is display:flex, en een
     flex-item met margin:0 auto krimpt anders naar contentbreedte. */
  width: 100%;
  max-width: var(--container, 1280px);
  margin: 0 auto;
  padding: 0 var(--gutter, 56px);
}

.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); }

.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);
}

.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; }

/* ===== Volledige hero-CSS (geëxtraheerd uit de bron) ===== */

.home-hero .hh-logobar { margin-top: 40px; }

.hv-pill, .hv-win {
    position: absolute; right: 0; bottom: 0;
    transform-origin: bottom right;
    transition: opacity .4s var(--ease), transform .4s var(--ease);
  }

.hv-win {
    width: 300px;
    background: #FFFFFF; border-radius: 16px; overflow: hidden;
    box-shadow: 0 28px 60px -20px rgba(20,20,100,0.28), 0 6px 18px rgba(20,20,100,0.08);
    display: flex; flex-direction: column;
  }

.hv-chat-wrap:not(.is-open) .hv-win { opacity: 0; transform: scale(.9); pointer-events: none; }

.hv-win-strip { height: 5px; flex: none; background: linear-gradient(90deg, #2301fb, #a80290); }

.hv-win-head { background: #141464; padding: 14px 16px; }

.hv-head-top { display: flex; align-items: center; justify-content: space-between; }

.hv-head-top svg { display: block; }


.hv-head-who { display: flex; align-items: center; gap: 12px; margin-top: 10px; }

.hv-avatar { width: 36px; height: 36px; flex: none; border-radius: 999px; object-fit: cover; }

.hv-who { display: flex; flex-direction: column; gap: 3px; min-width: 0; }

.hv-name { font-family: var(--font-head); font-weight: 700; font-size: 16px; color: #fff; line-height: 1.1; }

.hv-status { display: flex; align-items: center; gap: 7px; font-size: 13px; color: #fff; line-height: 1.1; }

.hv-status-dot { width: 8px; height: 8px; flex: none; border-radius: 999px; background: #1fae5a; }

.hv-win-body {
    padding: 16px; background: #FFFFFF; min-height: 200px; height: 200px;
    display: flex; flex-direction: column; gap: 4px;
    overflow-y: auto; scroll-behavior: smooth;
  }

.hv-msg { display: flex; flex-direction: column; max-width: 100%; }

.hv-msg.recv { align-items: flex-start; }

.hv-msg.sent { align-items: flex-end; }

.hv-recv-line { display: flex; align-items: flex-end; gap: 8px; max-width: 88%; }

.hv-cloud {
    width: 24px; height: 24px; flex: none; border-radius: 999px; background: #EEF1F8;
    display: grid; place-items: center; margin-bottom: 2px; color: #AEB3C7;
  }

.hv-bubble {
    padding: 9px 13px; border-radius: 14px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 14px; line-height: 1.5; word-wrap: break-word;
    animation: hvBubbleIn 0.3s var(--ease) both;
  }

.hv-msg.recv .hv-bubble { background: #EEF1F8; color: #141464; }

.hv-msg.sent .hv-bubble { max-width: 78%; background: linear-gradient(135deg, #2301fb, #a80290); color: #fff; }

.hv-msg.recv .hv-time { margin-left: 32px; }

@keyframes hvBubbleIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.hv-typing-bubble { background: #EEF1F8; border-radius: 14px; padding: 11px 13px; }

.hv-typing { display: inline-flex; gap: 4px; align-items: center; }

.hv-typing span { width: 6px; height: 6px; border-radius: 999px; background: #AEB3C7; }

@media (prefers-reduced-motion: no-preference) {
  .hv-typing span { animation: hvTyping 1.2s var(--ease) infinite; }
  .hv-typing span:nth-child(2) { animation-delay: .18s; }
  .hv-typing span:nth-child(3) { animation-delay: .36s; }
}

@keyframes hvTyping { 0%,60%,100% { opacity: .35; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

.hv-win-foot { padding: 10px 14px 8px; background: #fff; }

.hhv-cards .hhv-card-visual--chat {
    aspect-ratio: auto;
    align-items: stretch;
    flex: 1 1 auto;
  }

.hhv-card-visual--chat .hv-avatar {  /* niet uitrekken zoals de visual-PNG */
    width: 36px; height: 36px; object-fit: cover;
    border-radius: 999px; /* wint van .elementor img { border-radius: 0 } */
  }

.hhv-chat { width: 100%; display: flex; flex: 1 1 auto; align-items: stretch; }

.hhv-chat-win {
    width: 100%; display: flex; flex-direction: column;
    background: #fff; border-radius: 16px; overflow: hidden;
    border: 1px solid #ECEEF4;
    box-shadow: 0 2px 4px rgba(20,20,100,0.06), 0 16px 36px -14px rgba(20,20,100,0.24);
  }

.hhv-chat .hv-win-head { padding: 14px 18px; }

.hhv-chat .hv-win-body {
    height: auto; min-height: 128px; padding: 12px 14px;   /* venster vult de kaart; min-hoogte i.p.v. hard getal */
    flex: 1 1 auto;
    justify-content: flex-end; gap: 6px;
  }

.hhv-chat .hv-bubble { font-size: 15px; line-height: 1.4; padding: 9px 14px; }

/* Typing-indicator exact even hoog als een tekstballon van één regel, zodat de
   chatkaart niet verspringt bij het wisselen tussen "aan het typen" en het
   bericht. Flex + vaste min-hoogte i.p.v. een tekst-strut die per font varieert. */
.hhv-chat .hv-typing-bubble {
    box-sizing: border-box;
    display: flex; align-items: center;
    min-height: calc(15px * 1.4 + 18px);   /* = .hhv-chat .hv-bubble: 1 regel + 2×9px padding */
    padding: 9px 14px;                      /* horizontaal gelijk aan .hv-bubble */
  }

.hhv-chat .hv-msg.sent .hv-bubble {
    background: #141464; color: #fff;
  }

.hhv-rend .hhv-rend-head {
    display: flex; align-items: center; gap: 12px; margin-top: 10px;
  }

.hhv-rend-headic {
    width: 36px; height: 36px; flex: none; border-radius: 999px;
    display: grid; place-items: center; color: #fff;
    background: rgba(255,255,255,0.14);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.22);
  }

.hhv-rend-headic svg { width: 19px; height: 19px; display: block; }

.hhv-rend-headtitle {
    font-family: var(--font-head); font-weight: 700; font-size: 17px;
    color: #fff; line-height: 1.1; letter-spacing: -0.01em;
  }

.hhv-rend .hv-win-body {
    justify-content: center; gap: 7px; overflow: hidden;
  }

.hhv-rend-row {
    display: flex; align-items: center; gap: 14px;
    opacity: 0; transform: translateY(9px);
    transition: opacity .5s var(--ease), transform .5s var(--ease);
  }

.hhv-rend-row.is-in { opacity: 1; transform: none; }

.hhv-rend-ic {
    width: 36px; height: 36px; flex: none; border-radius: 11px;
    display: grid; place-items: center; color: #141464; background: #EEF1F8;
  }

.hhv-rend-ic svg { width: 19px; height: 19px; display: block; }

.hhv-rend-label {
    flex: 1 1 auto; min-width: 0;
    font-family: var(--font-head); font-weight: 600; font-size: 17px;
    color: #141464; letter-spacing: -0.005em;
  }

.hhv-rend-check {
    width: 27px; height: 27px; flex: none; border-radius: 999px;
    display: grid; place-items: center; color: #fff; background: #39B54A;
    box-shadow: 0 3px 8px -2px rgba(57,181,74,0.55);
    opacity: 0; transform: scale(0.4);
    transition: opacity .28s var(--ease), transform .4s cubic-bezier(.34,1.56,.64,1);
  }

.hhv-rend-check.is-on { opacity: 1; transform: scale(1); }

.hhv-rend-check svg { width: 15px; height: 15px; display: block; }

@media (prefers-reduced-motion: reduce) {
  .hhv-rend-row, .hhv-rend-check { transition: none; }
}

.hh-logobar-section {
    background: #fff;
    min-height: 200px; display: flex; flex-direction: column; justify-content: center;
    padding: 0; overflow: hidden;
  }

.hh-logobar-section .hh-logobar {
    margin-top: 0;
    border-top: none;
    padding-top: 32px;
  }

.hh-logobar { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--c-border); }

.hh-logobar-intro {
    font-family: var(--font-head); font-size: 16px; font-weight: var(--fw-semibold);
    color: var(--c-navy); margin-bottom: 20px; letter-spacing: -0.005em;
  }

.hh-logobar-intro .accent {
    background: linear-gradient(135deg, #2301fb, #a80290);
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }

.hh-logobar-row { display: flex; align-items: center; justify-content: flex-start; gap: 48px; flex-wrap: wrap; }

.hh-marquee .logo-marquee-track { animation-duration: 60s; }

.hh-marquee:hover .logo-marquee-track { animation-play-state: paused; }

.hh-marquee .logo-marquee-item {
    min-width: 0; padding: 0 12px; margin: 0 16px;
    width: 132px; height: 72px; display: grid; place-items: center;
  }

.hh-marquee .logo-marquee-item:hover img { filter: none; opacity: 1; }

.hh-marquee .logo-marquee-item img.is-mono,
  .hh-marquee .logo-marquee-item:hover img.is-mono { filter: grayscale(100%); opacity: .65; }

/* ------------------------------------------------------------------
   LET OP — hier stond `opacity: 0` en dat mag NIET terug (14-08-2026).

   `hh-in` is de entrance van de HERO, en de hero staat above the fold. Chrome
   negeert een element met opacity 0 voor Largest Contentful Paint, dus zolang
   de reveal niet gelopen had, bestond het grootste element voor de meting niet.
   Op /leadgeneratie/ is dat `p.lg-hero-sub` (oppervlak 81.468 op 375px, tegen
   63.640 voor de cookiebanner en 63.158 voor het herobeeld): gemeten LCP 17,9 /
   18,0 / 18,0 s, oftewel 0 van 25 punten, terwijl FCP 3,8 s was.

   De reveal wordt door JS aangezet (`is-in`), en die JS staat in de footer
   achter 101 render-blokkerende stylesheets. Onder Slow 4G met 4x CPU landt dat
   laat, en de `transition-delay: var(--i) * 80ms` komt er nog bovenop — de
   hero-visual heeft `--i:5`, dus 400 ms extra.

   De opacity is eruit, de translateY blijft: de tekst is meteen leesbaar (LCP
   valt samen met FCP) en de beweging blijft staan. Bewust NIET opgelost met een
   begin-opacity van 0,01: dan meet Chrome een LCP op een moment dat de tekst
   voor een bezoeker nog onleesbaar is, en dan verbeter je het cijfer zonder de
   pagina te verbeteren.

   Reveals BUITEN de hero (au-rise, is-inview, is-settled) zijn een
   ontwerpkeuze en blijven zoals ze zijn.
   ------------------------------------------------------------------ */
.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; }
}

@media (max-width: 980px) {
  .home-hero .hh-visual .hv-win { width: 300px; }
}

@media (max-width: 680px) {
  .hh-logobar-row { gap: 24px; }
}

.logo-marquee { overflow:hidden; -webkit-mask-image:none; mask-image:none; }

.logo-marquee-track {
    display:flex; align-items:center; width:max-content; gap:0;
    animation: logo-marquee var(--mq-duration, 80s) linear infinite;
    will-change:transform;
  }

.logo-marquee:hover .logo-marquee-track { animation-play-state:paused; }

.logo-marquee-item,
  .hh-marquee .logo-marquee-item,
  .au-logobar-marquee .logo-marquee-item,
  .hl-logobar-marquee .logo-marquee-item {
    flex:0 0 auto; display:flex; align-items:center; justify-content:center;
    min-width:auto; padding:0 44px; background:transparent;
    width:auto; height:auto; min-height:72px; margin:0;
  }

.logo-marquee-item img,
  .hh-marquee .logo-marquee-item img,
  .au-logobar-marquee .logo-marquee-item img,
  .hl-logobar-marquee .logo-marquee-item img {
    height:53px; max-height:53px; width:auto; max-width:119px; object-fit:contain;
    filter:grayscale(100%); opacity:.85; background:transparent; mix-blend-mode:normal;
    transition:opacity .25s var(--ease);
  }

.logo-marquee-item img:hover,
  .hh-marquee .logo-marquee-item img:hover,
  .hh-marquee .logo-marquee-item img.is-mono:hover,
  .au-logobar-marquee .logo-marquee-item img:hover,
  .hl-logobar-marquee .logo-marquee-item img:hover {
    filter:grayscale(100%); opacity:1;
  }

.hh-marquee .logo-marquee-track,
  .au-logobar-marquee .logo-marquee-track,
  .hl-logobar-marquee .logo-marquee-track { animation-duration: var(--mq-duration, 80s); }

.au-logobar-divider {
    height:1px; border:0;
    background:var(--c-border);
    width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
  }

.au-logobar-divider-top { margin-top:0; margin-bottom:28px; }

.au-logobar-divider-bottom { margin-top:28px; margin-bottom:0; }

.hh-logobar { margin-top:40px; padding-top:0; border-top:0; }

.au-logobar-marquee, .hl-logobar-marquee { width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); }

.au-logobar, .hl-logobar, .hh-logobar-section { overflow:hidden; }

@media (prefers-reduced-motion: reduce) {
  .logo-marquee-track { animation:none; }
}

.lg-hero .hh-logobar { margin-top: 40px; }

.lg-logobar-marquee .logo-marquee-item { min-width: auto; padding: 0 24px; }

.lg-logobar-marquee .logo-marquee-track { animation-duration: 76s; }

.au-logobar {
  padding: 0; background: #FFFFFF;
  min-height: 200px; display: flex; flex-direction: column; justify-content: center;
}

.au-logobar-intro {
  text-align: center; margin: 0 0 28px;
  font-family: var(--font-head); font-size: 13px; font-weight: var(--fw-semibold);
  letter-spacing: 0.08em; color: var(--c-navy);
}

.au-logobar-divider-top { margin: 0 0 30px; }

.au-logobar-divider-bottom { margin: 36px 0 0; }

.au-logobar-marquee .logo-marquee-item {
  min-width: 0; padding: 0 12px; margin: 0 16px;
  width: 132px; height: 72px; display: grid; place-items: center;
}

.au-logobar-marquee .logo-marquee-item img { height: 48px; max-height: 48px; width: auto; max-width: 108px; object-fit: contain; }

.au-logobar-marquee .logo-marquee-track { animation-duration: 75s; }

@media (max-width: 680px) {
  .au-logobar { padding: 0; }
}

.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; }
}

.hv-pill, .hv-win {
  position: absolute; right: 0; bottom: 0;
  transform-origin: bottom right;
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}

.hv-win {
  width: 300px;
  background: #FFFFFF; border-radius: 16px; overflow: hidden;
  box-shadow: 0 28px 60px -20px rgba(20,20,100,0.28), 0 6px 18px rgba(20,20,100,0.08);
  display: flex; flex-direction: column;
}

.hv-chat-wrap:not(.is-open) .hv-win { opacity: 0; transform: scale(.9); pointer-events: none; }

.hv-win-strip { height: 5px; flex: none; background: linear-gradient(90deg, #2301fb, #a80290); }

.hv-win-head { background: #141464; padding: 14px 16px; }

.hv-head-top { display: flex; align-items: center; justify-content: space-between; }

.hv-head-top svg { display: block; }


.hv-head-who { display: flex; align-items: center; gap: 12px; margin-top: 10px; }

.au-hero-shot .hv-avatar { width: 36px; height: 36px; flex: none; border-radius: 999px; object-fit: cover; box-shadow: none; }

.hv-who { display: flex; flex-direction: column; gap: 3px; min-width: 0; }

.hv-name { font-family: var(--font-head); font-weight: 700; font-size: 16px; color: #fff; line-height: 1.1; }

.hv-status { display: flex; align-items: center; gap: 7px; font-size: 13px; color: #fff; line-height: 1.1; }

.hv-status-dot { width: 8px; height: 8px; flex: none; border-radius: 999px; background: #1fae5a; }

.hv-win-body {
  padding: 16px; background: #FFFFFF; min-height: 200px; height: 200px;
  display: flex; flex-direction: column; gap: 4px;
  overflow-y: auto; scroll-behavior: smooth;
}

.hv-msg { display: flex; flex-direction: column; max-width: 100%; }

.hv-msg.recv { align-items: flex-start; }

.hv-msg.sent { align-items: flex-end; }

.hv-recv-line { display: flex; align-items: flex-end; gap: 8px; max-width: 88%; }

.hv-cloud {
  width: 24px; height: 24px; flex: none; border-radius: 999px; background: #EEF1F8;
  display: grid; place-items: center; margin-bottom: 2px; color: #AEB3C7;
}

.hv-bubble {
  padding: 9px 13px; border-radius: 14px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 14px; line-height: 1.5; word-wrap: break-word;
  animation: hvBubbleIn 0.3s var(--ease) both;
}

.hv-msg.recv .hv-bubble { background: #EEF1F8; color: #141464; }

.hv-msg.sent .hv-bubble { max-width: 78%; background: linear-gradient(135deg, #2301fb, #a80290); color: #fff; }

.hv-msg.recv .hv-time { margin-left: 32px; }

@keyframes hvBubbleIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.hv-typing-bubble { background: #EEF1F8; border-radius: 14px; padding: 11px 13px; }

.hv-typing { display: inline-flex; gap: 4px; align-items: center; }

.hv-typing span { width: 6px; height: 6px; border-radius: 999px; background: #AEB3C7; }

@media (prefers-reduced-motion: no-preference) {
  .hv-typing span { animation: hvTyping 1.2s var(--ease) infinite; }
  .hv-typing span:nth-child(2) { animation-delay: .18s; }
  .hv-typing span:nth-child(3) { animation-delay: .36s; }
}

@keyframes hvTyping { 0%,60%,100% { opacity: .35; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

.hv-win-foot { padding: 10px 14px 8px; background: #fff; }

@keyframes au-int-marquee { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }

.hl-logobar-marquee .logo-marquee-item { min-width: auto; padding: 0 30px; }

.hl-logobar-marquee .logo-marquee-item img { height: 34px; max-height: 34px; width: auto; max-width: 150px; object-fit: contain; }

.hl-logobar-marquee .logo-marquee-track { animation-duration: 80s; }

.hh-logobar-section .au-logobar-marquee,
  .au-logobar .au-logobar-marquee {
    background:
      radial-gradient(70% 150% at 10% -20%, rgba(88,208,245,.15) 0%, transparent 55%),
      radial-gradient(60% 130% at 94% 120%, rgba(255,255,255,.09) 0%, transparent 58%),
      linear-gradient(135deg, #2301fb 0%, #a80290 100%);
  }

.hh-logobar-section:not(.hh-logobar-section--dark) { background: #fff; }

.hh-logobar-section .au-logobar-marquee .logo-marquee-item img,
  .hh-logobar-section .au-logobar-marquee .logo-marquee-item img.is-mono,
  .au-logobar .au-logobar-marquee .logo-marquee-item img,
  .au-logobar .au-logobar-marquee .logo-marquee-item img.is-mono {
    filter: brightness(0) invert(1); opacity: .82; mix-blend-mode: normal;
  }

.hh-logobar-section .au-logobar-marquee .logo-marquee-item img:hover,
  .au-logobar .au-logobar-marquee .logo-marquee-item img:hover {
    filter: brightness(0) invert(1); opacity: 1;
  }

.hh-logobar-section:not(.hh-logobar-section--dark) .au-logobar-divider,
  .au-logobar .au-logobar-divider { display: none; }

.hh-logobar-section--dark .au-logobar-marquee,
  .hh-logobar-section:not(.hh-logobar-section--dark) .au-logobar-marquee,
  .au-logobar .au-logobar-marquee {
    padding-top: 26px; padding-bottom: 26px;
  }

.hh-logobar-section--dark .au-logobar-marquee .logo-marquee-item,
  .hh-logobar-section:not(.hh-logobar-section--dark) .au-logobar-marquee .logo-marquee-item,
  .au-logobar .au-logobar-marquee .logo-marquee-item {
    min-height: 62px; padding: 0 40px;
  }

.hh-logobar-section--dark .au-logobar-marquee .logo-marquee-item img,
  .hh-logobar-section:not(.hh-logobar-section--dark) .au-logobar-marquee .logo-marquee-item img,
  .au-logobar .au-logobar-marquee .logo-marquee-item img {
    height: 45px; max-height: 45px; max-width: 101px;
  }


.hh-logobar-section--dark .hh-logobar-intro,
  .hh-logobar-section:not(.hh-logobar-section--dark) .hh-logobar-intro {
    font-size: 26px; letter-spacing: -0.01em;
  }

.au-logobar .au-logobar-intro {
    font-size: 26px; letter-spacing: -0.01em; line-height: 1.6;
    margin: 0 0 20px;
  }

.au-logobar {
    min-height: 208px;
    justify-content: flex-start;
    padding-top: 32px;
  }

.logo-marquee { -webkit-mask-image: none !important; mask-image: none !important; }

.home-hero-v2 .hhv-glow { display: none; }

.home-hero-v2 .hhv-orbs { display: none; }

.hh-logobar-section--dark::before,
  .hh-logobar-section--dark::after { display: none; }

@keyframes prHeroGlow {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(-6%, 10%, 0) scale(1.12); }
}

.hh-logobar-section--dark .au-logobar-marquee {
  background:
    radial-gradient(70% 150% at 10% -20%, rgba(88,208,245,.15) 0%, transparent 55%),
    radial-gradient(60% 130% at 94% 120%, rgba(255,255,255,.09) 0%, transparent 58%),
    linear-gradient(135deg, #2301fb 0%, #a80290 100%);
}

.logo-marquee {
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 7%, #000 93%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 7%, #000 93%, transparent 100%);
}

.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; }
}

.home-hero-v2 {
    --hhv-grad: linear-gradient(90deg, #2301fb 0%, #a80290 100%);
    --hhv-navy: #141464;
    --hhv-text-col: 600px;
    --hhv-title-col: 1360px;
    --hhv-sub-col: 780px;
    --hhv-cards-col: 1360px;
    position: relative;
    /* Vul samen met de logobalk-sectie (±180px) exact één viewport, zodat de
       ONDERKANT van de logobalk precies op de fold landt en de daaronder
       liggende sub-nav niet meer doorschemert. Content verticaal gecentreerd. */
    min-height: calc(100vh - 178px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: #f5f4fb;                 /* wit met subtiele lavendel-wash */
    /* trek de hero omhoog ACHTER de sticky (transparante) header, zodat de
       lavendel-wash + gradient-bollen helemaal tot bovenin doorlopen.
       De 76px extra top-padding compenseert de header-hoogte zodat de
       kop-content niet onder de header valt (geen zichtbare verschuiving). */
    margin-top: -76px;
    padding: calc(76px + clamp(24px, 3vw, 40px)) 0 clamp(20px, 2.5vw, 32px);
    overflow: hidden;
  }

/* Desktop: hero 10% uitgezoomd, zodat de "Werkt voor elk merk"-balk al
   deels boven de vouw meekomt (visueel gelijk aan het origineel). Alleen
   de hero-sectie schaalt mee; de logobalk eronder blijft op ware grootte. */
@media (min-width: 1025px) {
  .home-hero-v2 {
    zoom: 0.8;
    /* Geheel iets omlaag: meer lucht tussen de sticky header en de eyebrow,
       en minder lege ruimte onder de kaarten zodat "Werkt voor elk merk"
       dichter op de hero komt. Boxhoogte blijft gelijk (geen clip-risico);
       we verschuiven alleen de content binnen de hero omlaag. */
    padding-top: calc(76px + clamp(56px, 6vw, 88px));
    padding-bottom: clamp(6px, 0.8vw, 12px);
  }
  /* Grotere titel duwt de kaarten omlaag; de "Werkt voor elk merk"-balk mag
     daarom dichter op de hero — minder loze ruimte boven de logobalk. */
  .elementor-widget-bconnect_hero .hh-logobar-section { min-height: 120px; }
}

.home-hero-v2::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: 0;
    height: 220px; pointer-events: none;
    background: linear-gradient(to bottom, rgba(245,244,251,0) 0%, #f5f4fb 82%);
  }

.home-hero-v2 .hhv-glow {
    position: absolute; top: -18%; left: -8%; z-index: 0; pointer-events: none;
    width: clamp(480px, 46vw, 820px); height: clamp(480px, 46vw, 820px);
    border-radius: 50%;
    background: radial-gradient(circle at 50% 50%,
      rgba(35,1,251,0.16) 0%, rgba(168,2,144,0.08) 42%, rgba(245,244,251,0) 70%);
    opacity: 0.30; filter: blur(8px);
  }

.home-hero-v2 .hhv-orbs { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }

.home-hero-v2 .hhv-orb {
    position: absolute; display: block; border-radius: 50%;
    filter: blur(16px); will-change: transform;
  }

.home-hero-v2 .hhv-orb-1 {   /* blauw — linkerrand, boven\u2192onder */
    top: -14%; left: -10vw;
    width: clamp(460px, 46vw, 900px); height: clamp(460px, 46vw, 900px);
    background: radial-gradient(circle at center, rgba(35, 1, 251, 0.17) 0%, rgba(35,1,251,0) 60%);
    animation: hhvSideA 34s ease-in-out infinite;
  }

.home-hero-v2 .hhv-orb-2 {   /* paars — linkerrand, onder\u2192midden */
    top: 34%; left: -7vw;
    width: clamp(380px, 36vw, 720px); height: clamp(380px, 36vw, 720px);
    background: radial-gradient(circle at center, rgba(120, 70, 220, 0.15) 0%, rgba(120,70,220,0) 60%);
    animation: hhvSideB 46s ease-in-out infinite;
  }

.home-hero-v2 .hhv-orb-3 {   /* magenta — rechterrand, vult de rechterkant */
    top: -8%; right: -10vw;
    width: clamp(500px, 50vw, 960px); height: clamp(500px, 50vw, 960px);
    background: radial-gradient(circle at center, rgba(168, 2, 144, 0.15) 0%, rgba(168,2,144,0) 60%);
    animation: hhvSideC 40s ease-in-out infinite;
  }

@keyframes hhvSideA {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    33%  { transform: translate3d(3vw, 30vh, 0) scale(1.08); }
    66%  { transform: translate3d(5vw, 60vh, 0) scale(0.96); }
    100% { transform: translate3d(0, 0, 0) scale(1); }
  }

@keyframes hhvSideB {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    33%  { transform: translate3d(4vw, -22vh, 0) scale(1.10); }
    66%  { transform: translate3d(2vw, 22vh, 0) scale(0.95); }
    100% { transform: translate3d(0, 0, 0) scale(1); }
  }

@keyframes hhvSideC {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    33%  { transform: translate3d(-4vw, 34vh, 0) scale(1.12); }
    66%  { transform: translate3d(-2vw, 66vh, 0) scale(0.97); }
    100% { transform: translate3d(0, 0, 0) scale(1); }
  }

@media (prefers-reduced-motion: reduce) {
  .home-hero-v2 .hhv-orb { animation: none !important; }
}

.hhv-inner {
    position: relative; z-index: 1;
    display: flex; flex-direction: column; align-items: center; text-align: center;
  }

.hhv-eyebrow {
    max-width: var(--hhv-text-col);
    font-family: var(--font-head);
    font-size: 13px; font-weight: 500;
    letter-spacing: 0.08em; text-transform: uppercase;
    color: rgba(20,20,100,0.62);
    margin: 0 0 10px;
  }

.hhv-title {
    max-width: var(--hhv-title-col);
    white-space: nowrap;                 /* desktop: elke zin op één regel (br splitst) */
    font-family: var(--font-head);
    font-weight: var(--fw-bold, 700);
    font-size: clamp(32px, 4.4vw, 54px); line-height: 1.1;
    letter-spacing: -0.02em; color: var(--hhv-navy);
    margin: 0 0 12px;
  }

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

.hhv-sub {
    max-width: var(--hhv-sub-col);
    font-family: var(--font-body);
    font-size: 16px; line-height: 1.55;
    color: rgba(20,20,100,0.8);
    margin: 0 0 18px;
  }

.hhv-cards {
    width: 100%; max-width: var(--hhv-cards-col);
    display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 14px;
    margin: 0 0 14px; text-align: left; align-items: stretch;
  }

.hhv-card {
    position: relative; display: flex; flex-direction: column; gap: 13px;
    background: #fff;
    border: 1px solid rgba(20,20,100,0.14);
    border-radius: 12px;
    padding: 20px 22px;
    box-shadow: 0 1px 2px rgba(20,20,100,0.05), 0 12px 30px -16px rgba(20,20,100,0.16);
    text-decoration: none;
    transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
  }

.hhv-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 2px 4px rgba(20,20,100,0.08), 0 18px 40px rgba(20,20,100,0.14);
    border-color: rgba(35,1,251,0.4);
  }

.hhv-card-head {
    display: flex; align-items: center; gap: 12px; margin-bottom: 0;
  }

.hhv-card-ic {
    flex: none; width: 34px; height: 34px; border-radius: 10px;
    display: grid; place-items: center;
    background: var(--hhv-grad); color: #fff;
    box-shadow: 0 6px 14px -4px rgba(20,20,100,0.35);
  }

.hhv-card-ic i, .hhv-card-ic svg { width: 18px; height: 18px; stroke-width: 2.25; }

.hhv-card-title {
    font-family: var(--font-head); font-weight: var(--fw-medium, 500);
    font-size: 19px; line-height: 1.25; letter-spacing: -0.01em; color: var(--hhv-navy);
    margin: 0; min-height: calc(19px * 1.25 * 2);
    display: flex; align-items: center;
  }

.hhv-card-text {
    display: block;
    font-family: var(--font-body); font-size: 15.5px; line-height: 1.55;
    color: rgba(20,20,100,0.62); margin: 0;
    min-height: calc(15.5px * 1.55 * 2);
  }

.hhv-card-preview { margin-top: 14px; }

.hhv-card-preview-lbl {
    display: block; font-family: var(--font-head); font-weight: var(--fw-semibold, 600);
    font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
    color: rgba(20,20,100,0.42); margin-bottom: 9px;
  }

.hhv-card-tags {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-wrap: wrap; gap: 7px;
  }

.hhv-card-tags li {
    font-family: var(--font-body); font-size: 12.5px; line-height: 1;
    padding: 7px 11px; border-radius: 999px;
    background: #f4f5fa; border: 1px solid rgba(20,20,100,0.10);
    color: rgba(20,20,100,0.72);
  }

.hhv-card-tag-more {
    background: transparent !important;
    border-color: rgba(35,1,251,0.35) !important;
    color: #2301fb !important; font-weight: var(--fw-semibold, 600);
  }

.hhv-card-stat {
    margin-top: 0;
    display: flex; align-items: baseline; gap: 12px; margin-bottom: 0;
  }

.hhv-card-num {
    font-family: var(--font-head); font-weight: var(--fw-semibold, 600);
    font-size: 30px; line-height: 1; letter-spacing: -0.02em;
    background: var(--hhv-grad);
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }

.hhv-card-cap {
    font-family: var(--font-body); font-size: 14px; font-weight: 400; line-height: 1.35;
    color: rgba(20,20,100,0.55);
    /* reserveer 2 regels zodat het cijferblok in beide kaarten even hoog is en
       de twee visuals exact even hoog + symmetrisch uitlijnen (1-regelige cap links) */
    min-height: calc(14px * 1.35 * 2);
  }

.hhv-card-btn {
    width: 100%; align-self: stretch; justify-content: center; gap: 9px;
    margin-top: 0; margin-bottom: 0;
    background: var(--hhv-grad); color: #fff; border: 0;
    font-family: var(--font-head); font-weight: var(--fw-semibold, 600); font-size: 15.5px;
    padding: 12px 20px; border-radius: 999px;
    display: inline-flex; align-items: center;
    box-shadow: 0 8px 22px rgba(85,30,200,0.38);
    transition: transform .18s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
  }

.hhv-card-btn:hover {
    background: linear-gradient(90deg, #3a1eff 0%, #c213ad 100%);
    transform: translateY(-1px); box-shadow: 0 12px 28px rgba(85,30,200,0.45);
  }

.hhv-card-btn i, .hhv-card-btn svg { width: 18px; height: 18px; flex: none; }

.hhv-card-visual {
    margin: 0 -12px 0; width: calc(100% + 24px); aspect-ratio: 1421 / 884;
    display: flex; align-items: flex-end; justify-content: center;
  }

.hhv-card-visual img {
    width: 100%; height: 100%; object-fit: contain; object-position: center bottom;
  }

.hhv-card-visual .ph-media { width: 100%; height: 100%; min-height: 0; }

@media (max-width: 720px) {
  .hhv-card-btn { margin-top: 0; }
}

.hhv-actions {
    display: flex; flex-wrap: wrap; gap: 13px; justify-content: center;
    margin: 0 0 16px;
  }

.hhv-btn-primary {
    background: var(--hhv-grad); color: #fff; border: 0;
    font-family: var(--font-head); font-weight: var(--fw-semibold, 600);
    font-size: 15.5px; padding: 15px 30px; border-radius: 999px;
    display: inline-flex; align-items: center; gap: 9px;
    box-shadow: 0 8px 24px rgba(85,30,200,0.4);
  }

.hhv-btn-primary span { transition: transform .2s var(--ease); }

.hhv-btn-primary:hover span { transform: translateX(3px); }

.hhv-btn-ghost {
    background: #fff; color: var(--hhv-navy);
    border: 1px solid rgba(20,20,100,0.35);
    font-family: var(--font-head); font-weight: var(--fw-semibold, 600);
    font-size: 15.5px; padding: 15px 30px; border-radius: 999px;
    display: inline-flex; align-items: center;
  }

.hhv-btn-ghost:hover { background: #f5f4fb; border-color: var(--hhv-navy); }

.hhv-micro {
    font-family: var(--font-body); font-size: 12.5px; line-height: 1.5;
    color: rgba(20,20,100,0.6); margin: 0;
  }

@media (max-width: 900px) {
  .hhv-title { white-space: normal; }
}

@media (max-width: 720px) {
  .hhv-cards { grid-template-columns: 1fr; max-width: var(--hhv-text-col); }
  /* MOBIEL: geanimeerde kaart-visuals (Alex-chat + rendement-animatie) weg;
     de kaart eindigt bij de CTA-knop. Desktop (>720px) ongewijzigd. */
  .hhv-card-visual { display: none; }
}

@media (max-width: 560px) {
  .hhv-actions { width: 100%; flex-direction: column; align-items: stretch; max-width: 360px; }
  .hhv-actions .btn { width: 100%; justify-content: center; }
}

.hh-logobar-section--dark {
    background: #f5f4fb;               /* zelfde lavendel-wash als de hero */
    position: relative; z-index: 1; overflow: hidden;
    min-height: 0;
  }
  /* "Werkt voor elk merk"-blok: geen witte balk maar de lavendel-achtergrond
     van de sectie (de basis-.au-logobar is wit; hier transparant zodat de
     sectiekleur doorkomt). De gradient-marquee eronder houdt zijn eigen band. */
  .hh-logobar-section--dark .au-logobar { background: transparent; }

.hh-logobar-section--dark::before,
  .hh-logobar-section--dark::after {
    content: ""; position: absolute; z-index: 0; pointer-events: none;
    border-radius: 50%; filter: blur(16px);
  }

.hh-logobar-section--dark::before {  /* blauw/paars \u2014 linkerrand */
    top: -55%; left: -8vw;
    width: clamp(400px, 40vw, 760px); height: clamp(400px, 40vw, 760px);
    background: radial-gradient(circle at center, rgba(35, 1, 251, 0.20) 0%, rgba(35,1,251,0) 60%);
    animation: hhvSideB 42s ease-in-out infinite;
  }

.hh-logobar-section--dark::after {   /* magenta \u2014 rechterrand */
    top: -62%; right: -8vw;
    width: clamp(440px, 44vw, 820px); height: clamp(440px, 44vw, 820px);
    background: radial-gradient(circle at center, rgba(168, 2, 144, 0.20) 0%, rgba(168,2,144,0) 60%);
    animation: hhvSideC 46s ease-in-out infinite;
  }

.hh-logobar-section--dark .container,
  .hh-logobar-section--dark .hh-logobar { position: relative; z-index: 1; }

.hh-logobar-section--dark .hh-logobar { margin-top: 4px; padding-top: 0; border-top: none; }

.hh-logobar-section--dark .au-logobar-divider { display: none; }

.hh-logobar-section--dark .hh-logobar-intro { color: var(--c-navy); font-size: 18.5px; }

.hh-logobar-section--dark .au-logobar-marquee {
    background:
      radial-gradient(90% 160% at 50% 0%, rgba(168, 2, 144, 0.42) 0%, rgba(35, 1, 251, 0.30) 40%, rgba(20, 20, 100, 0) 74%),
      #141464;
    padding-top: 30px; padding-bottom: 30px;
    margin-top: 4px;
  }

.hh-logobar-section--dark .au-logobar-marquee .logo-marquee-item img,
  .hh-logobar-section--dark .au-logobar-marquee .logo-marquee-item img.is-mono {
    filter: brightness(0) invert(1); opacity: .78; mix-blend-mode: normal;
  }

.hh-logobar-section--dark .au-logobar-marquee .logo-marquee-item img:hover,
  .hh-logobar-section--dark .au-logobar-marquee .logo-marquee-item img.is-mono:hover {
    filter: brightness(0) invert(1); opacity: 1;
  }

.hh-logobar-section--dark .au-logobar-marquee { background: linear-gradient(135deg, #2301fb 0%, #a80290 100%); }

.elementor-widget-bconnect_hero .accent,
.elementor-widget-bconnect_hero .hhv-card-num,
.elementor-widget-bconnect_problem .wg-grad,
.elementor-widget-bconnect_journey .accent,
.elementor-widget-bconnect_models .accent,
.elementor-widget-bconnect_trackrecord .tr-num,
.elementor-widget-bconnect_branches .bc-grad-text,
.elementor-widget-bconnect_branches .bt-num,
.elementor-widget-bconnect_cases .accent,
.elementor-widget-bconnect_cta .bc-grad-text {
  background: linear-gradient(90deg, #2301fb 0%, #a80290 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  display: inline-block;
}

.elementor-widget-bconnect_hero .hhv-card-ic {
  background: linear-gradient(135deg, #2301fb 0%, #a80290 100%) !important;
  color: #fff !important;
}

/* VERWIJDERD (29-07, port versie A): de klantreis-iconen (.jr-step-icon) en de
   fase-balken (.jr-phase) werden hier met !important gevuld met de merk-
   gradient. In de bron zijn dat juist LICHTE elementen: witte icooncirkel met
   een gekleurde rand en gekleurde lijnicoon, en een fase-balk met een 6%-tint
   achtergrond, navy label en een gradient-haarlijn bovenaan (zie
   journey.css .jr-phase-1/.jr-phase-2 en .jr-step-p1/.jr-step-p2). */

.elementor-widget-bconnect_hero .hhv-card-ic svg,
.elementor-widget-bconnect_hero .hhv-card-ic i {
  color: #fff !important; stroke: #fff !important;
}

.elementor-widget-bconnect_hero .btn-primary,
.elementor-widget-bconnect_hero a.hhv-card-btn,
.elementor-widget-bconnect_problem .wg-cta,
.elementor-widget-bconnect_journey .btn-primary,
.elementor-widget-bconnect_branches .btn-primary,
.elementor-widget-bconnect_branches .bt-btn,
.elementor-widget-bconnect_cases .btn-primary,
.elementor-widget-bconnect_cta .btn-primary {
  background: linear-gradient(90deg, #2301fb 0%, #a80290 100%) !important;
  color: #fff !important;
}

.elementor-widget-bconnect_hero .btn-primary:hover,
.elementor-widget-bconnect_hero a.hhv-card-btn:hover,
.elementor-widget-bconnect_journey .btn-primary:hover,
.elementor-widget-bconnect_branches .btn-primary:hover,
.elementor-widget-bconnect_cases .btn-primary:hover,
.elementor-widget-bconnect_cta .btn-primary:hover {
  background: linear-gradient(90deg, #3a1eff 0%, #c213ad 100%) !important;
  color: #fff !important;
}

.elementor-widget-bconnect_hero .hh-logobar-section--dark .au-logobar-marquee {
  /* Eindstaat uit de bron: twee radials over de merk-gradient. */
  background:
    radial-gradient(70% 150% at 10% -20%, rgba(88,208,245,.15) 0%, transparent 55%),
    radial-gradient(60% 130% at 94% 120%, rgba(255,255,255,.09) 0%, transparent 58%),
    linear-gradient(135deg, #2301fb 0%, #a80290 100%) !important;
}

.elementor-widget-bconnect_hero .hv-status-dot { background: #39B54A !important; }

.elementor-widget-bconnect_hero .home-hero-v2 {
  margin-top: 0 !important;
  min-height: 0 !important;
  padding: clamp(48px, 6vw, 96px) 0 clamp(32px, 4vw, 56px) !important;
}

/* ===== Hero-plaatsing in Elementor-context (geen sticky header) ===== */
.home-hero-v2 {
  margin-top: 0 !important;
  min-height: 0 !important;
  padding: clamp(48px, 6vw, 96px) 0 clamp(32px, 4vw, 56px) !important;
}

/* MOBIEL: op de homepage staat er GEEN header-spacer (is_front_page -> on_dark),
   de header is fixed en 108px hoog (nav 76px + 16px padding boven/onder). De regel
   hierboven geeft op mobiel maar ~48px top-padding, dus de eyebrow/kop viel áchter
   de header. Hier zetten we op mobiel de top-padding op headerhoogte + marge, zodat
   de kop ONDER de menubalk start. Staat NA de !important-regels hierboven en heeft
   dezelfde specificiteit, dus wint. Desktop (>720px) blijft ongewijzigd. */
@media (max-width: 720px) {
  .elementor-widget-bconnect_hero .home-hero-v2 {
    padding-top: calc(108px + 20px) !important;
  }
}

/* DESKTOP/TABLET (>720px): meer lucht tussen de vaste 108px-header en de hero.
   De homepage heeft GEEN header-spacer (front-page = header-on-dark), dus de hero
   moet de headerhoogte zelf compenseren. De bestaande padding-top (clamp 48-96px)
   was < 108px → de eyebrow viel in de headerzone. Header-bewust: 108px + ~32-40px
   lucht (proportioneel via 4vw). Op >=1025px staat zoom:0.9 op de hero, wat deze
   padding meeschaalt; de gerenderde ruimte blijft ruim boven de header. Alleen
   de bovenruimte; kop/eyebrow/subtekst/cards blijven ongemoeid. */
@media (min-width: 721px) {
  .elementor-widget-bconnect_hero .home-hero-v2 {
    padding-top: clamp(140px, calc(108px + 4vw), 164px) !important;
    /* minder lege ruimte onder de cards, zodat de "Werkt voor elk merk"-
       logobalk al een stukje boven de vouw meekomt. */
    padding-bottom: clamp(6px, 0.8vw, 14px) !important;
  }
}

/* ============================================================
   HARDENING — gradient/kleur afdwingen tegen theme-resets
   ------------------------------------------------------------
   Hello Elementor (en Elementor-resets) zetten soms background/
   color terug, waardoor gradient-tekst, cijfers, icon-tiles en
   knoppen hun verloop verliezen. We ankeren op de Elementor-
   widgetwrapper van deze widget en forceren het kritieke.
   ============================================================ */

.elementor-widget-bconnect_hero .accent,
.elementor-widget-bconnect_hero .hhv-card-num {
	background: linear-gradient(90deg, #2301fb 0%, #a80290 100%) !important;
	-webkit-background-clip: text !important;
	background-clip: text !important;
	-webkit-text-fill-color: transparent !important;
	color: transparent !important;
	display: inline-block;
}

.elementor-widget-bconnect_hero .hhv-card-ic {
	background: linear-gradient(135deg, #2301fb 0%, #a80290 100%) !important;
	color: #fff !important;
}
.elementor-widget-bconnect_hero .hhv-card-ic svg {
	color: #fff !important;
	stroke: #fff !important;
}

.elementor-widget-bconnect_hero .btn-primary,
.elementor-widget-bconnect_hero a.hhv-card-btn {
	background: linear-gradient(90deg, #2301fb 0%, #a80290 100%) !important;
	color: #fff !important;
}
.elementor-widget-bconnect_hero .btn-primary:hover,
.elementor-widget-bconnect_hero a.hhv-card-btn:hover {
	background: linear-gradient(90deg, #3a1eff 0%, #c213ad 100%) !important;
	color: #fff !important;
}
.elementor-widget-bconnect_hero .btn-primary svg,
.elementor-widget-bconnect_hero a.hhv-card-btn svg {
	color: #fff !important;
	stroke: #fff !important;
}

.elementor-widget-bconnect_hero .hh-logobar-section--dark .au-logobar-marquee {
	/* Eindstaat uit de bron: twee radials over de merk-gradient. */
	background:
		radial-gradient(70% 150% at 10% -20%, rgba(88,208,245,.15) 0%, transparent 55%),
		radial-gradient(60% 130% at 94% 120%, rgba(255,255,255,.09) 0%, transparent 58%),
		linear-gradient(135deg, #2301fb 0%, #a80290 100%) !important;
}
.elementor-widget-bconnect_hero .hv-status-dot {
	background: #39B54A !important;
}

/* Logo's wit op de gradient-band */
.elementor-widget-bconnect_hero .hh-logobar-section--dark .logo-marquee-item img {
	filter: brightness(0) invert(1);
	opacity: .82;
}

/* ============================================================
   PATCH v0.3.1 — logobalk-marquee
   1) @keyframes logo-marquee ontbrak in dit bestand, waardoor
      de band stilstond (het keyframe leefde alleen in de bron-
      cascade). Hier toegevoegd.
   2) Defensieve herbevestiging van de marquee-layout met widget-
      specificiteit, zodat de rij horizontaal blijft lopen ook
      als andere stylesheets flex-regels resetten.
   ============================================================ */
@keyframes logo-marquee {
	from { transform: translate3d(0, 0, 0); }
	to { transform: translate3d(-50%, 0, 0); }
}
.elementor-widget-bconnect_hero .logo-marquee {
	overflow: hidden !important;
	display: block;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}
/* Horizontaal mag de 100vw-marquee de container-brede wrapper verlaten
   (full-bleed; de full-width sectie clipt op viewportbreedte), maar
   verticaal blijft de band binnen zijn eigen bandhoogte geklemd. */
.elementor-widget-bconnect_hero .au-logobar {
	overflow-x: visible;
	overflow-y: clip;
}
.elementor-widget-bconnect_hero .logo-marquee-track {
	display: flex !important;
	flex-wrap: nowrap !important;
	align-items: center;
	width: max-content !important;
	animation: logo-marquee var(--mq-duration, 80s) linear infinite;
	will-change: transform;
}
.elementor-widget-bconnect_hero .logo-marquee-item {
	flex: 0 0 auto !important;
	display: grid;
	place-items: center;
}
.elementor-widget-bconnect_hero .au-logobar-intro,
.elementor-widget-bconnect_hero .au-logobar-label {
	text-align: center;
	font-family: var(--font-head);
	font-size: 26px;
	font-weight: var(--fw-semibold);
	letter-spacing: -0.01em;
	color: var(--c-navy);
	margin: 0 0 20px;
}
@media (prefers-reduced-motion: reduce) {
	.elementor-widget-bconnect_hero .logo-marquee-track { animation: none; }
}

/* MOBIEL: "Werkt voor elk merk"-logobalk (gradient-marquee) iets dunner. Minder
   verticale padding, lagere item-hoogte, iets kleinere logo's. Hoge specificiteit
   + achteraan zodat het wint van de padding:30px op regel ~947. Desktop >720px
   ongewijzigd. */
@media (max-width: 720px) {
	.elementor-widget-bconnect_hero .hh-logobar-section--dark .au-logobar-marquee {
		padding-top: 16px;
		padding-bottom: 16px;
	}
	.elementor-widget-bconnect_hero .hh-logobar-section--dark .au-logobar-marquee .logo-marquee-item {
		height: 44px;
		min-height: 0;
	}
	.elementor-widget-bconnect_hero .hh-logobar-section--dark .au-logobar-marquee .logo-marquee-item img {
		height: 38px;
		max-height: 38px;
	}
}