/* ── Qnext — gedeelde stijlen voor de subpagina's ─────────────────────────
   Basis (kleuren, reset, typografie), topbar/navigatie, footer en de
   artikelopmaak van de insights-/blogpagina's. Pagina-specifieke stijlen
   blijven in de pagina zelf staan en mogen deze regels overschrijven
   (het <style>-blok van de pagina komt ná deze stylesheet). */

:root { --navy:#0f1f42; --blue:#2f4acd; --lightblue:#69a3f7; --orange:#ffab24; --gray:#f4f6fb; --border:#e8ecf4; }
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Inter',sans-serif; color:var(--navy); background:#fff; line-height:1.65; }
a { color:var(--blue); }

/* ── Topbar / navigatie ── */
.topbar { display:flex; align-items:center; justify-content:space-between; padding:1rem 2rem; border-bottom:1px solid var(--border); position:sticky; top:0; background:rgba(255,255,255,.96); backdrop-filter:blur(6px); z-index:10; flex-wrap:wrap; gap:.5rem; }
.topbar img { height:50px; width:auto; }
.topbar nav { display:flex; align-items:center; gap:1.25rem; flex-wrap:wrap; }
.topbar nav a { text-decoration:none; color:var(--navy); font-weight:600; font-size:.9rem; }
.topbar nav a.cta { background:var(--blue); color:#fff; padding:.5rem 1.1rem; border-radius:50px; }
.topbar nav a.portal { border:1.5px solid var(--blue); color:var(--blue); padding:.45rem 1.05rem; border-radius:50px; }
.lang { display:flex; gap:.3rem; font-size:.85rem; }
.lang button { background:none; border:none; cursor:pointer; color:#aab; font-weight:600; font-family:'Inter',sans-serif; }
.lang button.active { color:var(--blue); }
.nav-toggle { display:none; background:none; border:none; cursor:pointer; padding:.4rem; flex-direction:column; gap:5px; }
.nav-toggle span { display:block; width:24px; height:2.5px; background:var(--navy); border-radius:2px; }
@media (max-width:768px){
  .nav-toggle { display:flex; }
  .topbar nav { display:none; width:100%; flex-direction:column; align-items:flex-start; gap:.4rem; padding:.5rem 0 .25rem; }
  .topbar nav.open { display:flex; }
  .topbar nav a { width:100%; }
}

/* ── Footer ── */
footer { border-top:1px solid var(--border); padding:2rem; text-align:center; color:#889; font-size:.85rem; }
footer a { color:var(--blue); text-decoration:none; }

/* ── Artikelpagina's (insights + blog) ── */
.crumbs { max-width:720px; margin:0 auto; padding:1.5rem 1.5rem 0; font-size:.82rem; color:#889; }
.crumbs a { text-decoration:none; }
.article { max-width:720px; margin:0 auto; padding:1rem 1.5rem 3.5rem; }
.article h1 { font-family:'Nunito',sans-serif; font-weight:900; font-size:clamp(1.8rem,4vw,2.6rem); line-height:1.15; margin:1rem 0 .5rem; }
.article .meta { color:#889; font-size:.85rem; margin-bottom:2rem; }
.article .lead { font-size:1.15rem; color:var(--navy); margin-bottom:1.4rem; }
.article-body h2 { font-family:'Nunito',sans-serif; font-weight:800; font-size:1.35rem; margin:2rem 0 .6rem; color:var(--navy); }
.article-body h3 { font-family:'Nunito',sans-serif; font-weight:800; font-size:1.12rem; margin:1.5rem 0 .5rem; color:var(--navy); }
.article-body p { margin-bottom:1.1rem; color:#334; font-size:1.05rem; }
.article-body blockquote { margin:1.5rem 0; padding:1rem 1.25rem; background:var(--gray); border-left:4px solid var(--orange); border-radius:0 10px 10px 0; color:var(--navy); font-style:italic; }
.article-body blockquote p { margin:0; }
.article-body ul, .article-body ol { margin:0 0 1.1rem 1.3rem; color:#334; font-size:1.05rem; }
.article-body li { margin-bottom:.4rem; }
.article-cta { margin-top:2.5rem; padding:1.6rem; background:var(--navy); color:#fff; border-radius:16px; text-align:center; }
.article-cta p { margin-bottom:.4rem; }
.article-cta .btn { display:inline-block; background:var(--orange); color:var(--navy); padding:.8rem 1.8rem; border-radius:50px; text-decoration:none; font-weight:800; font-family:'Nunito',sans-serif; margin-top:.6rem; }
.related { max-width:720px; margin:0 auto 3rem; padding:0 1.5rem; font-size:.95rem; }
.related a { font-weight:600; text-decoration:none; }
@media (max-width:600px){ .topbar nav{gap:.85rem;} }