/* Vormgeving voor de publieke pagina's (landing, blog, privacy) */
* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --accent: #0073ea;
  --accent-dark: #005bb8;
  --groen: #00c875;
  --oranje: #fdab3d;
  --rood: #e2445c;
  --donker: #292f4c;
  --text: #323338;
  --text-muted: #676879;
  --border: #d0d4e4;
  --bg: #ffffff;
  --bg-zacht: #f6f7fb;
}

html { scroll-behavior: smooth; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
}

a { color: var(--accent); }

.wrap { max-width: 1060px; margin: 0 auto; padding: 0 24px; }

/* ---------- Navigatie ---------- */
.site-nav {
  position: sticky;
  top: 0;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
  z-index: 20;
}

.site-nav .wrap {
  display: flex;
  align-items: center;
  gap: 24px;
  height: 62px;
}

.merk {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 1.15rem;
  color: var(--donker);
  text-decoration: none;
}

.merk img { width: 30px; height: 30px; }

.nav-links {
  display: flex;
  gap: 20px;
  margin-left: auto;
  align-items: center;
}

.nav-links a {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.93rem;
}

.nav-links a:hover { color: var(--text); }

.knop {
  display: inline-block;
  background: var(--accent);
  color: #fff !important;
  padding: 9px 20px;
  border-radius: 9px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.93rem;
}

.knop:hover { background: var(--accent-dark); }

.knop.groot { padding: 14px 30px; font-size: 1.05rem; }

.knop.omlijnd {
  background: none;
  color: var(--accent) !important;
  border: 1px solid var(--accent);
}

.knop.omlijnd:hover { background: #eaf3ff; }

/* ---------- Held ---------- */
.held { padding: 80px 0 60px; text-align: center; }

.held h1 {
  font-size: clamp(2rem, 5vw, 3.2rem);
  line-height: 1.15;
  color: var(--donker);
  max-width: 720px;
  margin: 0 auto 18px;
}

.held h1 em {
  font-style: normal;
  background: linear-gradient(90deg, var(--accent), var(--groen));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.held p {
  font-size: 1.15rem;
  color: var(--text-muted);
  max-width: 620px;
  margin: 0 auto 30px;
}

.held-knoppen { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

.held-noot { font-size: 0.85rem; color: var(--text-muted); margin-top: 14px; }

/* Mini-voorbeeld onder de held */
.demo-strook {
  margin: 50px auto 0;
  max-width: 860px;
  background: var(--donker);
  border-radius: 16px;
  padding: 22px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  box-shadow: 0 24px 60px rgba(41, 47, 76, 0.25);
}

.demo-kolom { background: rgba(255, 255, 255, 0.07); border-radius: 10px; padding: 12px; text-align: left; }

.demo-kolom h4 {
  color: #fff;
  font-size: 0.78rem;
  padding: 5px 10px;
  border-radius: 5px;
  margin-bottom: 10px;
}

.demo-kaart {
  background: #fff;
  border-radius: 7px;
  padding: 9px 11px;
  font-size: 0.8rem;
  margin-bottom: 8px;
  color: var(--text);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.demo-stip { width: 20px; height: 20px; border-radius: 50%; color: #fff; font-size: 0.55rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }

/* ---------- Secties ---------- */
section.blok { padding: 70px 0; }

section.blok.zacht { background: var(--bg-zacht); }

.blok h2 {
  font-size: 1.9rem;
  color: var(--donker);
  text-align: center;
  margin-bottom: 12px;
}

.blok .intro {
  text-align: center;
  color: var(--text-muted);
  max-width: 600px;
  margin: 0 auto 44px;
}

.kaarten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

.kaart-item {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 26px;
}

.kaart-item .icoon { font-size: 1.7rem; margin-bottom: 12px; display: block; }

.kaart-item h3 { font-size: 1.08rem; color: var(--donker); margin-bottom: 8px; }

.kaart-item p { font-size: 0.92rem; color: var(--text-muted); }

/* Stappen */
.stappen { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; counter-reset: stap; }

.stap { text-align: center; padding: 10px; }

.stap::before {
  counter-increment: stap;
  content: counter(stap);
  display: inline-flex;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-weight: 800;
  font-size: 1.2rem;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}

.stap h3 { font-size: 1.02rem; color: var(--donker); margin-bottom: 6px; }

.stap p { font-size: 0.9rem; color: var(--text-muted); }

/* Blogteasers */
.blog-teaser { text-decoration: none; display: block; }

.blog-teaser:hover { border-color: var(--accent); }

.blog-teaser .label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent);
}

.blog-teaser h3 { margin-top: 6px; }

/* FAQ */
.faq { max-width: 720px; margin: 0 auto; }

.faq details {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px 20px;
  margin-bottom: 10px;
}

.faq summary { cursor: pointer; font-weight: 600; color: var(--donker); }

.faq p { margin-top: 10px; color: var(--text-muted); font-size: 0.93rem; }

/* CTA-strook */
.cta-strook {
  background: linear-gradient(120deg, var(--accent), var(--groen));
  border-radius: 18px;
  padding: 50px 30px;
  text-align: center;
  color: #fff;
}

.cta-strook h2 { color: #fff; font-size: 1.7rem; margin-bottom: 10px; }

.cta-strook p { opacity: 0.9; margin-bottom: 24px; }

.cta-strook .knop { background: #fff; color: var(--accent) !important; }

/* ---------- Voettekst ---------- */
.site-voet {
  border-top: 1px solid var(--border);
  padding: 36px 0;
  margin-top: 70px;
  font-size: 0.88rem;
  color: var(--text-muted);
}

.site-voet .wrap {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  align-items: center;
}

.site-voet a { color: var(--text-muted); text-decoration: none; margin-right: 18px; }

.site-voet a:hover { color: var(--text); }

/* ---------- Artikelen (blog & privacy) ---------- */
.artikel { max-width: 720px; margin: 0 auto; padding: 60px 24px; }

.artikel h1 { font-size: 2.1rem; color: var(--donker); line-height: 1.2; margin-bottom: 10px; }

.artikel .artikel-meta { color: var(--text-muted); font-size: 0.85rem; margin-bottom: 30px; }

.artikel h2 { font-size: 1.35rem; color: var(--donker); margin: 34px 0 10px; }

.artikel p, .artikel li { margin-bottom: 14px; color: var(--text); }

.artikel ul, .artikel ol { padding-left: 24px; margin-bottom: 14px; }

.artikel .cta-inline {
  background: var(--bg-zacht);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px 22px;
  margin: 30px 0;
}

/* ---------- Mobiel ---------- */
@media (max-width: 720px) {
  .demo-strook { grid-template-columns: 1fr; }
  .nav-links a.verbergbaar { display: none; }
  .held { padding: 50px 0 40px; }
  section.blok { padding: 50px 0; }
}