/* ============================================================================
 * shared.css — gedeelde laag voor alle subpagina's (perf-sprint fase 2, 17-08-2026)
 *
 * Eén plek voor tokens, reset, nav, page-hero, footer en gedeelde componenten.
 * Was: per pagina gedupliceerde inline-blokken (de contrast-fix van 03-08
 * raakte daardoor 43 bestanden). Regels:
 * - Dit bestand laadt VÓÓR de inline pagina-CSS; een pagina-specifieke
 *   afwijking blijft dus gewoon inline staan en wint via de cascade.
 * - De link wordt door build-i18n.js geïnjecteerd (data-shared-css):
 *   blocking op subpagina's, deferred op de homepage (die heeft alles inline).
 * - Footer-styling verhuisde hierheen uit FOOTER_CSS (build-i18n.js);
 *   cookie-banner-CSS blijft build-geïnjecteerd (overlay moet instant stylen).
 * ==========================================================================*/

.skip-link {
  position:absolute;
  top:-100%;
  left:16px;
  background:var(--accent-btn);
  color:#fff;
  padding:10px 20px;
  border-radius:0 0 8px 8px;
  font-size:0.85rem;
  font-weight:600;
  text-decoration:none;
  z-index:10001;
  transition:top 0.2s;
}
.skip-link:focus {
  top:0;
}
:root {
  --bg:#040e2e;
   --bg-section:#060f30;
   --accent:#3898EC;
   --accent-rgb:56,152,236;
   --accent-btn:#2477C0;
   --accent-btn-hover:#1E6CB5;
   --accent-light:#6db8f5;
   --text:#f0f4ff;
   --text-muted:rgba(240,244,255,0.65);
   --border:rgba(56,152,236,0.12);
   --font-head:'Montserrat',sans-serif;
   --font-body:'Open Sans',sans-serif;
}
*,*::before,*::after {
  box-sizing:border-box;
  margin:0;
  padding:0;
}
body {
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.7;
  overflow-x:hidden;
}
::selection {
  background:var(--accent);
  color:#fff;
}
::-webkit-scrollbar {
  width:6px;
}
::-webkit-scrollbar-track {
  background:var(--bg);
}
::-webkit-scrollbar-thumb {
  background:linear-gradient(var(--accent),var(--accent-light));
  border-radius:3px;
}
#navbar {
  position:fixed;
  top:12px;
  left:0;
  right:0;
  z-index:1000;
  display:flex;
  justify-content:center;
}
.nav-inner {
  width:100%;
  padding:14px 40px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  transition:all 0.4s cubic-bezier(0.16,1,0.3,1);
}
#navbar.nav-scrolled .nav-inner {
  max-width:1040px;
  background:rgba(4,14,46,0.88);
  border:1px solid var(--border);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border-radius:100px;
  padding:10px 24px;
}
.nav-logo {
  display:flex;
  align-items:center;
  text-decoration:none;
}
.nav-logo img {
  height:28px;
  width:auto;
  filter:brightness(0) invert(1);
}
.nav-links {
  display:flex;
  align-items:center;
  gap:22px;
}
.nav-links a {
  color:var(--text-muted);
  text-decoration:none;
  font-size:0.88rem;
  font-weight:500;
  transition:color 0.2s;
}
.nav-cta {
  background:var(--accent-btn)!important;
  color:#fff!important;
  padding:8px 20px;
  border-radius:100px;
  font-weight:700!important;
  box-shadow:0 0 16px rgba(var(--accent-rgb),0.3);
}
.nav-cta:hover {
  box-shadow:0 0 28px rgba(var(--accent-rgb),0.5)!important;
  transform:translateY(-1px);
}
.lang-toggle {
  display:flex;
  align-items:center;
  background:rgba(255,255,255,0.05);
  border:1px solid var(--border);
  border-radius:100px;
  padding:3px;
  margin-left:12px;
}
.lang-btn {
  padding:4px 13px;
  border-radius:100px;
  font-size:0.75rem;
  font-weight:700;
  cursor:pointer;
  border:none;
  background:transparent;
  color:var(--text-muted);
  transition:all 0.2s;
  font-family:var(--font-head);
}
.lang-btn.active {
  background:var(--accent-btn);
  color:#fff;
}
.lang-btn:hover:not(.active) {
  color:var(--text);
}
.nav-hamburger {
  display:none;
  background:none;
  border:none;
  cursor:pointer;
  padding:8px;
  flex-direction:column;
  gap:5px;
}
.nav-hamburger span {
  display:block;
  width:22px;
  height:2px;
  background:var(--text);
  border-radius:1px;
  transition:all 0.3s;
}
.nav-hamburger.open span:nth-child(1) {
  transform:rotate(45deg) translate(3px,5px);
}
.nav-hamburger.open span:nth-child(2) {
  opacity:0;
}
.nav-hamburger.open span:nth-child(3) {
  transform:rotate(-45deg) translate(3px,-5px);
}
.nav-mobile-menu {
  display:none;
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:var(--bg);
  z-index:998;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:24px;
  text-align:center;
  opacity:0;
  transition:opacity 0.3s;
}
.nav-mobile-menu.open {
  display:flex;
  opacity:1;
}
.nav-mobile-menu a {
  color:var(--text-muted);
  text-decoration:none;
  font-size:1.2rem;
  font-weight:500;
  padding:8px 0;
  transition:color 0.2s;
}
.nav-mobile-menu a:hover {
  color:var(--text);
}
.nav-mobile-menu .nav-cta {
  display:inline-block;
  margin-top:8px;
  background:var(--accent-btn);
  color:#fff;
  padding:12px 32px;
  border-radius:100px;
  font-weight:700;
  font-size:1rem;
}
.page-hero {
  padding:160px 32px 80px;
  text-align:center;
  border-bottom:1px solid var(--border);
  position:relative;
  overflow:hidden;
}
.page-hero-orb {
  position:absolute;
  width:500px;
  height:500px;
  border-radius:50%;
  background:var(--accent);
  filter:blur(120px);
  opacity:0.07;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  pointer-events:none;
}
.page-hero h1 {
  font-family:var(--font-head);
  font-size:clamp(2rem,5vw,3.2rem);
  font-weight:800;
  line-height:1.1;
  letter-spacing:-0.02em;
  margin-bottom:16px;
}
.page-hero p {
  font-size:1.05rem;
  color:var(--text-muted);
  max-width:580px;
  margin:0 auto;
}
.nav-links a:hover {
  color:var(--text);
}
.page-hero .section-label {
  display:inline-flex;
  align-items:center;
  font-family:var(--font-head);
  font-size:0.72rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:2.5px;
  color:var(--accent);
  margin-bottom:18px;
  padding:6px 14px;
  background:rgba(56,152,236,0.10);
  border:1px solid rgba(56,152,236,0.30);
  border-radius:100px;
}

/* ── Footer (verhuisd uit FOOTER_CSS in build-i18n.js) ── */

    footer{position:relative;z-index:1;border-top:1px solid var(--border);padding:60px 32px 40px;text-align:center;background:var(--bg);}
    .footer-logo img{height:32px;width:auto;filter:brightness(0) invert(1);margin-bottom:12px;}
    .footer-tagline{font-size:0.9rem;color:var(--text-muted);margin-bottom:32px;}
    .footer-badges{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;margin-bottom:32px;}
    .footer-badge{display:inline-flex;align-items:center;gap:6px;background:rgba(56,152,236,0.06);border:1px solid var(--border);border-radius:8px;padding:6px 14px;font-size:0.78rem;color:var(--text-muted);}
    .footer-badge-dot{width:6px;height:6px;background:#4ade80;border-radius:50%;box-shadow:0 0 8px rgba(74,222,128,0.7),0 0 16px rgba(74,222,128,0.4);animation:footer-led-pulse 2.2s ease-in-out infinite;will-change:transform,opacity;}
    @keyframes footer-led-pulse{0%,100%{opacity:0.65;transform:scale(0.92);}50%{opacity:1;transform:scale(1.15);}}
    @media(prefers-reduced-motion:reduce){.footer-badge-dot{animation:none;}}
    .footer-grid{display:grid;grid-template-columns:1.4fr 0.8fr 0.5fr 0.8fr;column-gap:48px;row-gap:32px;max-width:1060px;margin:0 auto 40px;text-align:left;align-items:start;}
    .footer-newsletter{display:flex;flex-direction:column;gap:0;padding-top:4px;}
    .footer-newsletter-label{font-size:0.8rem;font-weight:700;color:var(--text);text-transform:uppercase;letter-spacing:0.06em;margin-bottom:10px;font-family:var(--font-head);}
    .footer-newsletter-sub{font-size:0.78rem;color:var(--text-muted);margin-bottom:14px;}
    .footer-newsletter-form{display:flex;flex-direction:column;gap:10px;}
    .footer-newsletter-input{width:100%;padding:10px 14px;background:rgba(56,152,236,0.04);border:1px solid rgba(56,152,236,0.2);border-radius:8px;outline:none;color:var(--text);font-size:0.85rem;font-family:var(--font-body);box-sizing:border-box;}
    .footer-newsletter-input::placeholder{color:rgba(240,244,255,0.6);}
    .footer-newsletter-btn{width:100%;padding:10px 22px;background:var(--accent-btn);color:#fff;border:none;border-radius:8px;font-size:0.82rem;font-weight:600;font-family:var(--font-body);cursor:pointer;transition:all 0.2s;letter-spacing:0.02em;}
    .footer-newsletter-btn:hover{background:var(--accent-btn-hover);box-shadow:0 0 12px rgba(56,152,236,0.25);}
    .footer-made{display:flex;flex-direction:column;gap:10px;padding-top:4px;}
    .footer-made-flag{width:48px;height:auto;display:block;margin:0 auto;}
    .footer-made-text{font-size:0.8rem;font-weight:700;color:var(--text);font-family:var(--font-head);text-transform:uppercase;letter-spacing:0.06em;}
    .footer-made-sub{font-size:0.78rem;color:var(--text-muted);line-height:1.5;}
    .footer-link-col{display:flex;flex-direction:column;gap:10px;padding-top:4px;}
    .footer-link-heading{font-size:0.8rem;font-weight:700;color:var(--text);text-transform:uppercase;letter-spacing:0.06em;margin-bottom:4px;font-family:var(--font-head);}
    .footer-link-col a{color:var(--text-muted);text-decoration:none;font-size:0.85rem;transition:color 0.2s;}
    .footer-link-col a:hover{color:var(--accent);}
    .footer-copy{color:rgba(240,244,255,0.6);font-size:0.8rem;}
    @media(max-width:768px){.footer-grid{grid-template-columns:1fr;gap:32px;text-align:center;}.footer-link-col{align-items:center;}.footer-made{align-items:center;}footer{padding:48px 20px 32px;}}