/* ============================================================
   dk-hero.css — hero van /digitale-klantenservice/ (zone 1).
   1-op-1 uit de Claude Design-export van 01-09-2026
   (upgrade-klantenservice.css, blok "HERO" + de hero-regels uit
   "RESPONSIVE"). De gedeelde dk-basis staat in
   widgets/shared/bconnect-dk.css (handle `bconnect-dk`).
   ============================================================ */

.dk-hero { display: block; width: 100%; box-sizing: border-box; padding: clamp(48px, 6vw, 92px) 0 clamp(40px, 5vw, 72px); }
.dk-hero-bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	background:
		radial-gradient(720px 400px at 86% 14%, rgba(35, 1, 251, .065), transparent 60%),
		radial-gradient(560px 320px at 0% 62%, rgba(168, 2, 144, .045), transparent 55%),
		#fff;
}
.dk-hero-bg::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: radial-gradient(rgba(20, 20, 100, .14) 1px, transparent 1.5px);
	background-size: 22px 22px;
	-webkit-mask-image: radial-gradient(60% 55% at 78% 40%, #000 0%, transparent 72%);
	mask-image: radial-gradient(60% 55% at 78% 40%, #000 0%, transparent 72%);
	opacity: .6;
}
.dk-hero > .container { position: relative; z-index: 1; }

.dk-hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(32px, 4vw, 64px); align-items: center; }
.dk-hero-copy { display: block; min-width: 0; }
.dk-hero-sub { font-size: var(--fs-lead); line-height: 1.62; color: var(--c-text-muted); margin: 20px 0 0; max-width: 34em; text-wrap: pretty; }
.dk-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; margin-top: 30px; }

.dk-hero-proof {
	list-style: none;
	margin: 34px 0 0;
	padding: 26px 0 0;
	border-top: 1px solid rgba(20, 20, 100, .1);
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
}
.dk-hero-proof li { display: flex; flex-direction: column; gap: 6px; }
.dk-proof-num {
	font-family: var(--font-head);
	font-weight: var(--fw-bold);
	font-size: clamp(20px, 2.1vw, 26px);
	line-height: 1;
	letter-spacing: -.02em;
	background: var(--brand-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}
.dk-proof-label { font-size: 13.5px; line-height: 1.4; color: var(--c-text-soft); }

.dk-hero-visual { position: relative; display: block; min-width: 0; }
/* Specificiteit .elementor-widget-... is hier nodig: Elementor-core zet
   `.elementor img { border-radius: 0 }` (0,1,1) en dat wint van een kale
   `.dk-hero-img` (0,1,0) — de hoeken bleven daardoor vierkant. De andere
   sectiebeelden ontkomen eraan omdat die `.dk-*-visual img` heten en dus
   zelf (0,1,1) zijn. De bron-export had dit probleem niet: daar zit geen
   .elementor-wrapper omheen. Zelfde constructie als lg-hero.
   18px komt overeen met .dk-mens-visual img en .dk-dash-visual img. */
.elementor-widget-bconnect_dk_hero .dk-hero-img { width: 100%; height: auto; display: block; border-radius: 18px; }
.dk-hero-float {
	position: absolute;
	left: -14px;
	bottom: 16px;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 16px;
	background: rgba(255, 255, 255, .82);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	border: 1px solid rgba(255, 255, 255, .9);
	border-radius: 14px;
	box-shadow: 0 10px 30px rgba(20, 20, 100, .12);
}
.dk-hf-ic { width: 34px; height: 34px; flex: none; border-radius: 999px; display: grid; place-items: center; background: var(--brand-gradient); color: #fff; }
.dk-hf-ic svg { width: 18px; height: 18px; }
.dk-hf-txt { display: flex; flex-direction: column; gap: 2px; }
.dk-hf-txt strong { font-family: var(--font-head); font-size: 14px; color: var(--c-navy); line-height: 1.1; }
.dk-hf-txt span { font-size: 12.5px; color: var(--c-text-soft); line-height: 1.2; }

/* ---- responsive --------------------------------------------- */
@media (max-width: 980px) {
	.dk-hero-grid { display: grid; grid-template-columns: 1fr; gap: 32px; }
	.dk-hero-float { left: auto; right: 12px; bottom: 12px; }
}
@media (max-width: 700px) {
	.dk-hero-proof { display: grid; grid-template-columns: 1fr; gap: 16px; }
}

/* ===== HARDENING — gradient/kleur tegen theme-resets ===== */
.elementor-widget-bconnect_dk_hero .accent {
	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_dk_hero .dk-proof-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;
}
.elementor-widget-bconnect_dk_hero .btn-primary {
	background: linear-gradient(90deg, #2301fb 0%, #a80290 100%) !important;
	color: #fff !important;
}
.elementor-widget-bconnect_dk_hero .btn-primary:hover {
	background: linear-gradient(90deg, #3a1eff 0%, #c213ad 100%) !important;
	color: #fff !important;
}

/* ============================================================
   LOGOBALK — eigen kopie, gescoped op deze widget
   ------------------------------------------------------------
   WAAROM DIT HIER STAAT
   In het bouwplan stond dat .hh-logobar in bconnect-shared.css
   zit en dus niet kan wegvallen. Dat klopte niet: shared heeft
   er één regel van (.hh-logobar-intro), de rest van de marquee
   staat in hero.css, lg-hero.css en mr-hero.css. Op
   /digitale-klantenservice/ staat geen van die drie widgets, dus
   de balk zou daar volledig zonder opmaak hebben gestaan.
   Gevonden met tools/audit-cross-widget-css.py.

   Dit is de EFFECTIEVE eindstaat van die cascade, niet de
   cascade zelf: in lg-hero.css liggen vijf lagen overrides op
   elkaar (.au-logobar, .hh-marquee, --dark-varianten) waarvan
   het grootste deel hier nooit matcht. Overgenomen zijn alleen
   de regels die een lichte .hh-logobar-section met een
   gradient-marquee daadwerkelijk opleveren.

   Alles is gescoped op .elementor-widget-bconnect_dk_hero: zo
   kan deze kopie de logobalk van hero, lg-hero of mr-hero niet
   raken als er ooit twee hero's op één pagina staan.

   De logobestanden zélf komen wél uit widgets/hero/assets/ —
   dat is één sitewide merkenset, geen widget-eigen asset.
   ============================================================ */

.elementor-widget-bconnect_dk_hero .hh-logobar-section {
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 100%;
	box-sizing: border-box;
	min-height: 200px;
	padding: 0;
	background: #fff;
	overflow: hidden;
}
.elementor-widget-bconnect_dk_hero .hh-logobar-section > .container { width: 100%; }
.elementor-widget-bconnect_dk_hero .hh-logobar { margin-top: 0; padding-top: 32px; border-top: 0; }

/* Geen .au-logobar-divider in de markup: die staat in lg-hero en mr-hero
   alleen voor de donkere logobalk-variant, en die heeft dk-hero niet. In
   een lichte sectie is hij daar display:none, dus hier gewoon weggelaten. */

.elementor-widget-bconnect_dk_hero .hh-logobar-intro {
	font-family: var(--font-head);
	font-size: 26px;
	font-weight: var(--fw-semibold);
	letter-spacing: -.01em;
	color: var(--c-navy);
	text-align: center;
	margin: 0 0 20px;
}
.elementor-widget-bconnect_dk_hero .hh-logobar-intro .accent {
	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;
}

/* Volle breedte binnen een container die dat niet is: 100vw plus een
   negatieve marge van de halve overhang aan beide kanten. */
.elementor-widget-bconnect_dk_hero .au-logobar-marquee {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding-top: 26px;
	padding-bottom: 26px;
	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%);
}
.elementor-widget-bconnect_dk_hero .logo-marquee {
	display: block;
	overflow: hidden !important;
	-webkit-mask-image: none !important;
	mask-image: none !important;
}
.elementor-widget-bconnect_dk_hero .logo-marquee-track {
	display: flex !important;
	flex-wrap: nowrap !important;
	align-items: center;
	width: max-content !important;
	gap: 0;
	animation: dkLogoMarquee var(--mq-duration, 80s) linear infinite;
	will-change: transform;
}
.elementor-widget-bconnect_dk_hero .logo-marquee:hover .logo-marquee-track { animation-play-state: paused; }
.elementor-widget-bconnect_dk_hero .logo-marquee-item {
	flex: 0 0 auto !important;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 62px;
	padding: 0 40px;
	margin: 0;
	background: transparent;
}
/* brightness(0) invert(1) maakt elk logo wit, ongeacht de bronkleur;
   dat is nodig omdat de merkenset op een gradient staat. */
.elementor-widget-bconnect_dk_hero .logo-marquee-item img {
	height: 45px;
	max-height: 45px;
	width: auto;
	max-width: 101px;
	object-fit: contain;
	filter: brightness(0) invert(1);
	opacity: .82;
	background: transparent;
	transition: opacity .25s var(--ease);
}
.elementor-widget-bconnect_dk_hero .logo-marquee-item img:hover { opacity: 1; }

/* Eigen keyframe-naam: `logo-marquee` bestaat al in hero.css en
   lg-hero.css, en een tweede definitie onder dezelfde naam wint of
   verliest afhankelijk van de laadvolgorde. */
@keyframes dkLogoMarquee {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-50%, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
	.elementor-widget-bconnect_dk_hero .logo-marquee-track { animation: none; }
}