:root{
  --bg-0: #cfd6dd;
  --bg-1: #d7dee5;
  --ink: #0c1117;
  --muted: rgba(12,17,23,.7);
  --glass: rgba(255,255,255,.40);
  --glass2: rgba(255,255,255,.22);
  --radius: 18px;
  --shadow: 0 24px 80px rgba(12,17,23,.18);
}
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  color:var(--ink);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: #e7ebef;
  overflow-x:hidden;
}
.container{
  width:min(1200px, calc(100% - 48px));
  margin-inline:auto;
}
/* HEADER */
.site-header{
  position:fixed;
  top:0; left:0; right:0;
  z-index:20;
  backdrop-filter: blur(14px);
  background: linear-gradient(to bottom, rgba(255,255,255,.55), rgba(255,255,255,.18));
  border-bottom: 1px solid rgba(255,255,255,.35);
}
.header-inner{
  height:76px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}
.brand{
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
  color:inherit;
}
.brand img{ width:34px; height:34px; object-fit:contain; }
.brand-text{ font-weight:600; letter-spacing:-0.02em; }
.nav{
  display:flex;
  gap:22px;
  align-items:center;
}
.nav a {
  text-decoration: none;
  color: rgba(12, 17, 23, 0.7);
  font-weight: 500;
  font-size: 14px;
  position: relative;
  padding: 4px 0;
  transition: color 0.3s ease;
}

/* De onzichtbare lijn */
.nav a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1.5px;
  background-color: var(--accent-blue, #2056ff);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.45s cubic-bezier(0.65, 0, 0.35, 1);
}

.nav a:hover {
  color: #0c1117;
}

.nav a:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}
.nav a {
  padding: 8px 16px;
  border-radius: 12px;
  transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.nav a:hover {
  background: rgba(255, 255, 255, 0.5);
  box-shadow: 
    0 4px 12px rgba(12, 17, 23, 0.03),
    inset 0 0 0 1px rgba(255, 255, 255, 0.4);
  color: #0c1117;
  transform: translateY(-1px);
}
.header-cta{
  text-decoration:none;
  padding:10px 14px;
  border-radius:999px;
  background: rgba(32,86,255,.92);
  color:white;
  font-weight:600;
  font-size:14px;
  box-shadow: 0 10px 30px rgba(32,86,255,.25);
}
.header-cta {
  position: relative;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.header-cta:hover {
  transform: translateY(-2px) scale(1.02);
  background: #2056ff; /* Iets verzadigder blauw */
  box-shadow: 0 15px 35px rgba(32, 86, 255, 0.35);
}

/* De 'Sweep' animatie bij hover */
.header-cta::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.2),
    transparent
  );
  transition: left 0.6s ease;
}

.header-cta:hover::before {
  left: 100%;
}
/* Standaard staat de header zoals hij nu is */
.site-header {
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* De 'scrolled' status voor op donkere achtergronden */
.site-header.scrolled {
  background: rgba(12, 17, 23, 0.85); /* Donkere achtergrond */
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Tekstkleuren in de header aanpassen bij scroll */
.site-header.scrolled .brand-text,
.site-header.scrolled .nav a {
  color: #ffffff;
}

.site-header.scrolled .nav a:hover {
  color: rgba(255, 255, 255, 0.7);
}

/* Optioneel: logo inverteren als dat nodig is */
.site-header.scrolled .brand img {
  filter: brightness(0) invert(1);
}
/* desktop default: hamburger uit */
.nav-toggle{ display:none; }