/* ============================================================
   Fenna-huid: vaste achtergrond + zwevende secties
   Geldt voor alle pagina's met <body class="fx-huid">
   ============================================================ */
body.fx-huid{background:#E9EEF6}
body.fx-huid::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(900px 600px at 85% -5%,rgba(79,127,236,.20),transparent 60%),
    radial-gradient(800px 600px at -5% 105%,rgba(24,72,200,.14),transparent 60%),
    radial-gradient(520px 420px at 100% 100%,rgba(245,104,10,.08),transparent 70%),
    linear-gradient(180deg,#EEF2F9,#E3E9F3)}

/* Zwevende blokken */
body.fx-huid > header.page-header,
body.fx-huid > section{
  width:calc(100% - 48px);max-width:1240px;margin-left:auto;margin-right:auto;
  border-radius:28px;overflow:hidden;overflow:clip;position:relative;isolation:isolate}
body.fx-huid > section{margin-top:24px;margin-bottom:24px;
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 18px 50px -24px rgba(8,23,58,.22);
  border:1px solid rgba(8,23,58,.06)}
/* Lichte secties worden witte kaarten */
body.fx-huid > section:not(.hero):not(.legal-hero):not(.final-cta):not(.cta-banner-section):not(.inv-value):not(.sl-deal-section):not(.community-section):not(.ah-band){background:#fff !important}

/* Hero in Fenna-stijl: donkerblauw zwevend blok */
body.fx-huid > header.page-header,
body.fx-huid > section.legal-hero,
body.fx-huid > section.hero{
  margin-top:92px;
  background:radial-gradient(900px 600px at 85% 0%,rgba(79,127,236,.35),transparent 60%),
             radial-gradient(700px 500px at 0% 100%,rgba(24,72,200,.30),transparent 60%),
             radial-gradient(420px 320px at 100% 100%,rgba(245,104,10,.14),transparent 70%),
             linear-gradient(180deg,#0A1D47,#061433) !important;
  box-shadow:0 30px 70px -30px rgba(6,20,51,.55);border:1px solid rgba(255,255,255,.08)}

/* Donkere slotblokken krijgen dezelfde blauwe gloed */
body.fx-huid > section.final-cta,
body.fx-huid > section.cta-banner-section{
  background:radial-gradient(700px 500px at 90% 0%,rgba(79,127,236,.32),transparent 60%),
             radial-gradient(420px 320px at 0% 100%,rgba(245,104,10,.14),transparent 70%),
             linear-gradient(180deg,#0A1D47,#061433) !important}

/* Footerband loopt mee */
body.fx-huid > .footer-top-bar{margin-top:40px}

@media (max-width:760px){
  body.fx-huid > header.page-header,
  body.fx-huid > section{width:calc(100% - 20px);border-radius:22px}
  body.fx-huid > section{margin-top:14px;margin-bottom:14px}
  body.fx-huid > header.page-header,
  body.fx-huid > section.legal-hero,
  body.fx-huid > section.hero{margin-top:78px}
}

/* Pagina's zonder hero (aanvraag-quiz): blok begint onder het menu */
body.fx-huid > section.fn-page{margin-top:92px;min-height:0;padding-top:56px;padding-bottom:64px}
@media (max-width:760px){body.fx-huid > section.fn-page{margin-top:78px}}

/* Aanmeldroute: stap 1 en 2 in de hero */
.am-route{display:flex;gap:10px;list-style:none;padding:0;margin:26px 0 0;flex-wrap:wrap}
.am-route li{display:flex;align-items:center;gap:8px;padding:8px 15px;border-radius:100px;border:1px solid rgba(255,255,255,.2);color:rgba(255,255,255,.72);font-weight:600;font-size:.92rem}
.am-route b{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.14);font-size:.78rem;color:#fff}
.am-route li.nu{background:var(--orange);border-color:var(--orange);color:#fff}
.am-route li.nu b{background:rgba(255,255,255,.28)}
.am-route li.klaar a{color:inherit;text-decoration:none;display:flex;gap:8px;align-items:center}
.am-route li.klaar:hover{border-color:#fff;color:#fff}

/* Knop "I speak English" in de menubalk */
.lang-toggle.lt-en{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;background:#fff;border:1.5px solid rgba(24,72,200,.35);color:var(--blue);font-weight:700;border-radius:100px;padding:7px 14px;font-size:.8rem;text-decoration:none}
.lang-toggle.lt-en:hover{background:var(--blue);border-color:var(--blue);color:#fff;text-decoration:none}
@media (max-width:1300px){.lang-toggle.lt-en{display:inline-flex}}
@media (min-width:1101px) and (max-width:1500px){.lang-toggle.lt-en .lt-lang{display:none}}
@media (max-width:420px){.lang-toggle.lt-en .lt-lang{display:none}}
/* Knop rechtsboven: Word onze nieuwe collega (blauw, niet oranje) */
.btn-nav.btn-collega{background:linear-gradient(135deg,#2B5FE0,#1848C8)!important;color:#fff!important;box-shadow:0 8px 22px -8px rgba(24,72,200,.6)!important;white-space:nowrap}
.btn-nav.btn-collega:hover{background:linear-gradient(135deg,#1848C8,#123AA0)!important}
@media (min-width:1101px) and (max-width:1400px){.nav-actions .btn-nav.btn-collega{display:none}}
@media (min-width:1101px) and (max-width:1540px){.btn-collega .bc-lang{display:none}}