/* Bconnect Automotive Hoe Bconnect helpt (HowHelps) — bron: ingekort-automotive.css */
.au-help > .container { width: 100%; max-width: var(--container, 1280px); margin: 0 auto; padding: 0 var(--gutter, 56px); }
.au-help { padding: var(--space-8) 0; background: #FFFFFF; }
.au-help-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.au-help-card {
  display: flex; flex-direction: column; gap: 14px;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(168, 2, 144, 0.30) 0%, rgba(35, 1, 251, 0.24) 40%, rgba(20, 20, 100, 0) 70%),
    #141464;
  border: 1px solid rgba(255, 255, 255, 0.10); border-radius: var(--radius-feature);
  box-shadow: var(--shadow-card); padding: var(--space-7);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}
.au-help-card:hover { transform: translateY(-4px); box-shadow: 0 18px 48px rgba(20, 20, 100, 0.34); }
.au-help-tile {
  width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; color: #fff;
  background: var(--gradient-brand); box-shadow: 0 8px 18px rgba(168,2,142,.26); margin-bottom: 4px;
}
.au-help-tile svg { width: 26px; height: 26px; }
.au-help-card h3 {
  font-family: var(--font-head); font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3);
  color: #fff; margin: 0;
}
.au-help-card p { font-family: var(--font-body); font-size: 15.5px; line-height: 1.65; color: rgba(255, 255, 255, 0.82); margin: 0; }
.au-help-link {
  margin-top: auto; padding-top: 8px;
  font-family: var(--font-head); font-size: 15px; font-weight: var(--fw-bold); color: #fff;
  display: inline-flex; align-items: center; gap: 8px; transition: color .2s var(--ease), gap .2s var(--ease);
}
.au-help-link span { transition: transform .18s var(--ease); }
.au-help-link:hover { background: var(--gradient-text); -webkit-background-clip: text; background-clip: text; color: transparent; gap: 11px; }
.au-help-link:hover span { transform: translateX(3px); }

@media (max-width: 820px) { .au-help-cards { grid-template-columns: 1fr; } }

/* ===================================================================== */
.au-lead { color: var(--c-text-muted); margin: 0 auto; max-width: 48em; font-size: var(--fs-lead); line-height: 1.6; }
@media (max-width: 900px) { .au-help-cards { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; } }
.elementor-widget-bconnect_au_help { margin: 0 !important; }
.elementor-widget-bconnect_au_help .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; }

/* =====================================================================
   GELIJKTREKKEN MET DE AUTOMOTIVE-EXPORT (29-07-2026)
   De export legt over deze sectie twee zachte kleurwashes (verfijning 6
   "pijlers & feature-kaarten"). Het wit blijft de basis; de washes zijn
   rgba .045/.04 en dus heel subtiel, maar ze halen het vlakke wit eraf.
   ===================================================================== */
.au-help {
	position: relative;
	background:
		radial-gradient(46% 52% at 92% 4%, rgba(35, 1, 251, .045) 0%, transparent 62%),
		radial-gradient(44% 50% at 4% 96%, rgba(168, 2, 144, .04) 0%, transparent 62%),
		#FFFFFF;
}
.au-help > .container { position: relative; z-index: 1; }

/* =====================================================================
   KAARTEN TERUG NAAR LICHT (30-07-2026) — bron: "Bconnect versie A"
   Deze feature-kaarten stonden navy (#141464 + radiale gloed). In de
   export is dat een FOUT die een latere verfijningslaag terugdraait:
   "De donkere card-behandeling (au-help / lg-step / hl-seg) zat per
   ongeluk in de gedeelde CSS; hier zetten we die kaarten weer licht."
   Regels hieronder zijn 1-op-1 uit die laag. De icoontegel blijft de
   merk-gradient; de hover-lift en -schaduw blijven ook ongewijzigd.
   ===================================================================== */
.au-help-card { background: var(--c-white); border-color: var(--c-border); box-shadow: var(--shadow-card); }
.au-help-card h3 { color: var(--c-navy); }
.au-help-card p { color: var(--c-text-muted); }
.au-help-link { color: var(--c-navy); }

/* ===== Kop NAAST het icoon (i.p.v. eronder) ====================
   Kaart is een raster: rij 1 = icoontegel + kop naast elkaar, de
   toelichting en de link staan eronder over de volle kaartbreedte.
   Middelste rij is 1fr zodat de link onderaan blijft plakken, zoals
   voorheen met margin-top:auto in de flex-kolom.
   ============================================================ */
.au-help-card {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto 1fr auto;
  column-gap: 18px;
  row-gap: 14px;
  align-items: center;
}
.au-help-tile { grid-column: 1; grid-row: 1; margin-bottom: 0; }
.au-help-card h3 { grid-column: 2; grid-row: 1; }
.au-help-card p { grid-column: 1 / -1; grid-row: 2; }
.au-help-link { grid-column: 1 / -1; grid-row: 3; }