.cta11-section { position: relative; padding: var(--space-8) 0 var(--space-9); background: #FFFFFF; overflow: hidden; }
.cta11-grid { display: grid; grid-template-columns: 1fr 1.08fr; gap: 72px; align-items: start; }
.cta11-text { display: flex; flex-direction: column; gap: 0; padding-top: 10px; }
.cta11-eyebrow { font-family: var(--font-head); font-size: 13px; font-weight: var(--fw-medium); letter-spacing: 0.01em; color: var(--c-text-muted); margin: 0 0 24px; line-height: 1.65; }
.cta11-h2 { font-family: var(--font-head); font-weight: var(--fw-semibold); font-size: clamp(30px, 3.4vw, 46px); line-height: 1.1; letter-spacing: -0.024em; color: var(--c-navy); margin: 0 0 22px; text-wrap: pretty; }
.cta11-lead { font-family: var(--font-body); font-size: 16px; line-height: 1.70; color: var(--c-text-muted); margin: 0 0 28px; }
.cta11-ghost-link { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-head); font-size: 14px; font-weight: var(--fw-semibold); color: var(--c-text-muted); text-decoration: none; transition: color .18s var(--ease), gap .18s var(--ease); }
.cta11-ghost-link::after { content: "\2192"; display: inline-block; transition: transform .18s var(--ease); }
.cta11-ghost-link:hover { color: var(--c-magenta); gap: 10px; }
.cta11-ghost-link:hover::after { transform: translateX(3px); }
.cta11-card { position: relative; overflow: hidden; background: var(--c-white); border-radius: 20px; padding: 40px 36px; border: 1px solid var(--c-border-soft); box-shadow: var(--shadow-feature); display: flex; flex-direction: column; gap: 18px; }
/* Gradient-rand bovenaan de formulierkaart (gelijk aan het origineel). De kaart
   heeft overflow:hidden, zodat de balk de ronde bovenhoeken van de kaart volgt. */
.cta11-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, #2301fb 0%, #a80290 100%); pointer-events: none; }
.cta11-field { display: grid; gap: 7px; }
.cta11-label { font-family: var(--font-head); font-size: 13px; font-weight: var(--fw-bold); color: var(--c-navy); letter-spacing: 0.02em; }
.cta11-input { font-family: var(--font-body); font-size: 15px; color: var(--c-text); border: 1.5px solid var(--c-border); border-radius: 12px; padding: 13px 15px; background: var(--c-white); width: 100%; box-sizing: border-box; -webkit-appearance: none; appearance: none; transition: border-color .15s var(--ease), box-shadow .15s var(--ease); }
.cta11-input::placeholder { color: var(--c-text-soft); }
.cta11-input:focus { border-color: var(--c-electric); box-shadow: 0 0 0 3px rgba(35,1,251,0.13); }
/* Zichtbare focusring (05-08-2026); het veld staat op de witte cta11-kaart. */
.cta11-input:focus-visible { outline: 2px solid var(--c-grad-blue); outline-offset: 2px; }
.cta11-check { display: grid; grid-template-columns: 18px 1fr; gap: 11px; align-items: start; }
.cta11-check input[type="checkbox"] { margin-top: 2px; width: 16px; height: 16px; cursor: pointer; accent-color: var(--c-navy); flex-shrink: 0; }
.cta11-check-label { font-family: var(--font-body); font-size: 13px; line-height: 1.55; color: var(--c-text-muted); cursor: pointer; }
.cta11-card .btn { width: 100%; justify-content: center; margin-top: 2px; }

@media (prefers-reduced-motion: no-preference) {
  .cta11-text { transition: opacity .65s var(--ease), transform .65s var(--ease); }
  .cta11-card { transition: opacity .65s var(--ease) .12s, transform .65s var(--ease) .12s; }
  .cta11-section:not(.is-inview) .cta11-text, .cta11-section:not(.is-inview) .cta11-card { opacity: 0; transform: translateY(20px); }
  .cta11-section.is-settled .cta11-text, .cta11-section.is-settled .cta11-card { transition: none; opacity: 1; transform: none; }
}

@media (max-width: 960px) {
  .cta11-section { padding: 72px 0 80px; }
  .cta11-grid { grid-template-columns: 1fr; gap: 44px; }
  .cta11-text { padding-top: 0; }
}

@media (max-width: 680px) {
  .cta11-section { padding: 56px 0 64px; }
  .cta11-card { padding: 28px 22px; gap: 16px; }
  .cta11-h2 { font-size: 28px; }
  .cta11-lead { font-size: 15px; }
}

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

/* Het CTA-systeem zelf (.bc-cta*) staat sinds theme 1.2.0 in
   widgets/shared/bconnect-site-cta.css: dat blok wordt nu ook door
   pagina-widgets gerenderd via bconnect_site_cta() en moet dus
   sitewide geladen zijn. Hier staat alleen nog de oude
   formulierkaart-variant (.cta11-*). */