.wg-scope { --navy: #141464; --brand-gradient: linear-gradient(135deg, #2301fb 0%, #a80290 100%); --body-grey: #5b5b7a; --surface-white: #ffffff; --page-bg: #ffffff; --card-radius: 14px; --tile-radius: 18px; --shadow-navy: 0 8px 30px rgba(20, 20, 100, 0.06); --shadow-navy-hover: 0 16px 44px rgba(20, 20, 100, 0.12); --tile-lila: #f1eefc; --rail-x: 27px; --node: 15px; --ease-out: cubic-bezier(0.22, 1, 0.36, 1); position: relative; background: var(--page-bg); padding: 128px 56px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: var(--body-grey); -webkit-font-smoothing: antialiased; overflow: hidden; }
.wg-scope::before { content: ""; position: absolute; top: -10%; right: -6%; width: 620px; height: 620px; background: none; pointer-events: none; z-index: 0; }
.wg-scope * { box-sizing: border-box; }
.wg-inner { position: relative; z-index: 1; max-width: 1280px; margin: 0 auto; }
.wg-head { max-width: 780px; margin: 0 auto 64px; text-align: center; }
.wg-eyebrow { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 20px; font-family: "Roc Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--navy); }
.wg-eyebrow::before { content: ""; width: 26px; height: 2px; border-radius: 2px; background: var(--brand-gradient); }
.wg-h1 { font-family: "Roc Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-weight: 700; color: var(--navy); font-size: clamp(34px, 4.8vw, 54px); line-height: 1.1; letter-spacing: -0.02em; margin: 0 0 20px; text-wrap: balance; }
.wg-grad { background: var(--brand-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
.wg-sub { font-size: 18px; line-height: 1.65; color: var(--body-grey); margin: 0 auto; max-width: 680px; }
.wg-columns { position: relative; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto auto auto; column-gap: 32px; row-gap: 20px; align-items: stretch; }
.wg-col { display: grid; grid-row: 1 / span 4; grid-template-rows: subgrid; row-gap: 20px; min-width: 0; padding: 40px 36px; background: #f6f6fc; border: 1px solid rgba(20, 20, 100, 0.06); border-radius: 24px; }
.wg-col-head { text-align: left; margin: 0 0 8px; }
.wg-col-eyebrow { display: block; margin-bottom: 14px; font-family: "Roc Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--body-grey); }
.wg-col-label { margin: 0 0 8px; font-family: "Roc Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: clamp(28px, 3vw, 36px); font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; color: var(--navy); }
.wg-col-sub { margin: 0; font-size: 16px; line-height: 1.5; color: var(--body-grey); }
/* Kaartindeling (30-07-2026): illustratie en kop staan náást elkaar op de
   eerste rij (kop verticaal gecentreerd tegen de tegel), de toelichting
   staat daaronder over de VOLLE kaartbreedte — dus ook onder de tegel.
   Voorheen zat kop+tekst samen in één kolom rechts van de tegel. */
.wg-card { position: relative; display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 28px; row-gap: 18px; padding: 38px; background: var(--surface-white); border: 1px solid rgba(20, 20, 100, 0.08); border-radius: 18px; box-shadow: var(--shadow-navy); transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out); }
.wg-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-navy-hover); }
.wg-ill { grid-column: 1; grid-row: 1; flex: 0 0 auto; width: 112px; height: 112px; border-radius: 18px; overflow: hidden; background: var(--tile-lila); }
.wg-ill img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wg-card-h { grid-column: 2; grid-row: 1; min-width: 0; font-family: "Roc Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 26px; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; color: var(--navy); margin: 0; text-wrap: balance; }
.wg-card-p { grid-column: 1 / -1; grid-row: 2; min-width: 0; font-size: 16.5px; line-height: 1.62; color: var(--body-grey); margin: 0; text-wrap: pretty; }
.wg-cta { align-self: stretch; display: inline-flex; align-items: center; justify-content: center; gap: 12px; margin-top: 8px; padding: 17px 30px; border-radius: 999px; background: var(--brand-gradient); color: #fff; text-decoration: none; font-family: "Roc Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 17px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; box-shadow: 0 8px 22px rgba(35, 1, 251, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.25); transition: transform .18s var(--ease-out), box-shadow .18s var(--ease-out), filter .18s var(--ease-out); }
.wg-cta-arrow { display: inline-flex; align-items: center; justify-content: center; font-size: 18px; line-height: 1; transition: transform .18s var(--ease-out); }
.wg-cta:hover { transform: translateY(-2px); filter: brightness(1.06); box-shadow: 0 14px 30px rgba(35, 1, 251, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.25); }
.wg-cta:hover .wg-cta-arrow { transform: translateX(3px); }
.wg-cta:active { transform: translateY(0) scale(0.99); }
.wg-card { opacity: 1; transform: none; }

@media (prefers-reduced-motion: no-preference) {
  .wg-card { transition: opacity .7s var(--ease-out), transform .7s var(--ease-out), box-shadow .2s var(--ease-out); transition-delay: calc(var(--i, 0) * 70ms), calc(var(--i, 0) * 70ms), 0ms; }
  .wg-card:not(.is-in):not(.is-settled) { opacity: 0; transform: translateY(24px) scale(0.985); }
  .wg-card.is-settled { transition: none; opacity: 1; transform: none; }
}

@media (max-width: 1120px) {
  .wg-columns { grid-template-columns: 1fr; grid-template-rows: none; row-gap: 24px; }
  .wg-col { display: flex; flex-direction: column; grid-row: auto; gap: 20px; }
  .wg-col-head { margin-bottom: 0; }
}

@media (max-width: 760px) {
  .wg-scope { padding: 72px 16px; }
  .wg-head { margin-bottom: 40px; }
  .wg-col { padding: 28px 20px; gap: 16px; }
  .wg-card { column-gap: 18px; row-gap: 14px; padding: 24px; }
  .wg-ill { width: 76px; height: 76px; border-radius: 14px; }
  .wg-card-h { font-size: 20px; }
}

@media (max-width: 440px) {
  .wg-card { grid-template-columns: 1fr; }
  .wg-ill { margin-bottom: 2px; }
}

@media (prefers-reduced-motion: reduce) {
  .wg-card { opacity: 1; transform: none; transition: box-shadow .2s ease; }
}

@media (max-width: 767px) {
  .wg-scope { padding: 64px 20px; }
  .wg-grid { grid-template-columns: 1fr; gap: 16px; }
  .wg-card { grid-template-columns: 1fr; gap: 14px; padding: 24px; }
  /* MOBIEL: illustraties in de probleemkaarten weg (op verzoek). Desktop
     (>767px) ongewijzigd. */
  .wg-ill { display: none; }
  /* Zonder tegel is er geen tweede kolom meer: kop en tekst gewoon onder
     elkaar in kolom 1 (anders maakt grid-column:2 een lege kolom aan). */
  .wg-card-h, .wg-card-p { grid-column: 1; grid-row: auto; text-align: left; }
}

/* ============================================================
   COMPACTER (30-07-2026) — hele sectie 15% kleiner op verzoek,
   zodat er meer van in één beeld past. `zoom` schaalt ALLES in
   één keer mee (typografie, tegels, gaps én de 128px sectie-
   padding) en houdt de verhoudingen dus exact intact; de
   achtergrond blijft full-width omdat width:auto niet krimpt.
   Zelfde techniek als de zoom op de homepage-logobalk.
   Alleen desktop: op smallere schermen scrol je toch en zou
   15% kleinere body-tekst (14px) onnodig krap worden.
   ============================================================ */
@media (min-width: 1025px) {
  .wg-scope { zoom: 0.85; }
}

/* ============================================================
   HARDENING — gradient/kleur afdwingen tegen theme-resets
   (zelfde aanpak als hero.css, geankerd op de widgetwrapper)
   ============================================================ */
.elementor-widget-bconnect_problem .wg-grad {
	background: linear-gradient(135deg, #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_problem a.wg-cta {
	background: linear-gradient(135deg, #2301fb 0%, #a80290 100%) !important;
	color: #fff !important;
}
.elementor-widget-bconnect_problem a.wg-cta:hover { color: #fff !important; }

/* Zelfde Elementor-valkuil: `.elementor a { box-shadow: none }` verslaat
   `.wg-cta` (een <a>). Element-selector erbij = net specifieker. */
a.wg-cta { box-shadow: 0 8px 22px rgba(35, 1, 251, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.25); }
a.wg-cta:hover { box-shadow: 0 14px 30px rgba(35, 1, 251, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.25); }