/* Onedion Consultancy — gedeelde stijl (huisstijl: oranje #E8601C / teal #1AADA3 / dark #1A1A2E / Calibri)
   Site-SSOT: Z:\Vault\03_projecten\onedion\site_SSOT_2026-06-11.md */
:root{
  --orange:#E8601C;
  --orange-dark:#c44f12;
  --teal:#1AADA3;
  --teal-dark:#13877f;
  --dark:#1A1A2E;
  --ink:#2a2a3a;
  --muted:#5f5f6e;
  --line:#ece8e2;
  --bg:#ffffff;
  --warm:#faf6f1;
  --cream:#f5e8d0;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:Calibri,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);background:var(--bg);line-height:1.65;font-size:17px;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:1020px;margin:0 auto;padding:0 24px;}
.wrap-narrow{max-width:760px;margin:0 auto;padding:0 24px;}

/* Header + navigatie */
header.site{border-bottom:1px solid var(--line);background:var(--bg);}
.bar{display:flex;align-items:center;justify-content:space-between;padding:16px 0;gap:18px;flex-wrap:wrap;}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;}
.brand img{width:34px;height:34px;}
.brand .naam{font-weight:700;font-size:1.12rem;color:var(--dark);letter-spacing:.2px;}
.brand .naam span{color:var(--orange);}
nav.hoofd{display:flex;align-items:center;gap:22px;flex-wrap:wrap;}
nav.hoofd a{color:var(--dark);text-decoration:none;font-weight:600;font-size:.97rem;}
nav.hoofd a:hover{color:var(--teal-dark);}
nav.hoofd a.actief{color:var(--orange);}
nav.hoofd a.knop{background:var(--orange);color:#fff;padding:9px 16px;border-radius:8px;}
nav.hoofd a.knop:hover{background:var(--orange-dark);color:#fff;}

/* Hero */
.hero{padding:64px 0 56px;background:var(--warm);}
.hero-grid{display:grid;grid-template-columns:3fr 2fr;gap:40px;align-items:center;}
.hero-visual{display:flex;justify-content:center;}
.hero-visual img{width:min(260px,80%);height:auto;opacity:.92;}
.kicker{display:inline-block;font-size:.8rem;font-weight:700;letter-spacing:1.6px;
  text-transform:uppercase;color:var(--orange);margin-bottom:14px;}
.hero h1{font-size:2.3rem;line-height:1.22;color:var(--dark);max-width:21ch;font-weight:700;}
.hero p.lead{margin-top:18px;font-size:1.16rem;color:var(--muted);max-width:62ch;}
.cta-row{margin-top:28px;display:flex;gap:14px;flex-wrap:wrap;}

/* Feiten-rij */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;padding:34px 0;}
.stat{text-align:center;padding:18px 12px;border-top:3px solid var(--orange);background:#fff;}
.stat .groot{font-size:1.45rem;font-weight:700;color:var(--dark);}
.stat .klein{color:var(--muted);font-size:.95rem;margin-top:4px;}

/* Stappen (hoe het werkt) */
.stappen{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:26px;}
.stap{position:relative;padding:24px 22px 22px;border:1px solid var(--line);border-radius:12px;background:#fff;}
.stap .nr{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;
  border-radius:50%;background:var(--teal);color:#fff;font-weight:700;margin-bottom:12px;}
.stap h3{color:var(--dark);font-size:1.08rem;margin-bottom:8px;}
.stap p{color:var(--muted);font-size:.98rem;margin:0;}

/* Donkere sectie (crème tekst, conform brand) */
section.blok.donker{background:var(--dark);border-top:none;}
section.blok.donker h2{color:var(--cream);}
section.blok.donker p{color:var(--cream);opacity:.92;max-width:66ch;}
section.blok.donker a{color:var(--teal);}

/* Onderwerpen-grid (informatief, geen knoppen) */
.onderwerpen{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.onderwerp{border:1px solid var(--line);border-radius:12px;padding:22px;background:#fff;}
.onderwerp h3{color:var(--dark);font-size:1.06rem;margin-bottom:8px;}
.onderwerp p{color:var(--muted);font-size:.97rem;margin-bottom:10px;}
.onderwerp a{color:var(--teal-dark);font-weight:600;font-size:.95rem;}
.btn{display:inline-block;padding:13px 22px;border-radius:8px;text-decoration:none;
  font-weight:600;font-size:1rem;transition:background .15s ease;}
.btn-primary{background:var(--orange);color:#fff;}
.btn-primary:hover{background:var(--orange-dark);}
.btn-ghost{background:#fff;color:var(--dark);border:1.5px solid var(--teal);}
.btn-ghost:hover{background:var(--warm);}

/* Secties + kaarten */
section.blok{padding:52px 0;}
section.blok + section.blok{border-top:1px solid var(--line);}
section.blok h2{font-size:1.5rem;color:var(--dark);margin-bottom:10px;}
section.blok .sub{color:var(--muted);margin-bottom:26px;max-width:62ch;}
.cards{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.card{border:1px solid var(--line);border-radius:12px;padding:26px;background:var(--warm);
  display:flex;flex-direction:column;}
.card h3{color:var(--dark);font-size:1.18rem;margin-bottom:10px;}
.card p{color:var(--muted);flex:1;margin-bottom:18px;}
.card a.btn{align-self:flex-start;}
.free{display:inline-block;font-size:.76rem;font-weight:700;color:var(--orange);
  text-transform:uppercase;letter-spacing:.6px;margin-bottom:8px;}

/* Tekstpagina's / artikelen */
article.pagina{padding:52px 0 28px;}
article.pagina h1{font-size:2rem;line-height:1.25;color:var(--dark);font-weight:700;margin-bottom:16px;}
article.pagina h2{font-size:1.32rem;color:var(--dark);margin:34px 0 12px;}
article.pagina h3{font-size:1.06rem;color:var(--dark);margin:20px 0 8px;}
article.pagina p{margin-bottom:15px;}
article.pagina p.lead{font-size:1.14rem;color:var(--muted);}
article.pagina ul{margin:0 0 15px 22px;}
article.pagina li{margin-bottom:8px;}
article.pagina a{color:var(--teal-dark);}

/* CTA-box in artikelen */
.cta-box{border:1px solid var(--line);border-left:4px solid var(--orange);border-radius:12px;
  background:var(--warm);padding:24px 26px;margin:32px 0;}
.cta-box h2,.cta-box h3{margin:0 0 8px;font-size:1.16rem;color:var(--dark);}
.cta-box p{color:var(--muted);margin-bottom:16px;}

/* Prijs-tabel (aanbod) */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:26px 0;}
.tier{border:1px solid var(--line);border-radius:12px;padding:24px;background:#fff;text-align:center;}
.tier.mid{border-color:var(--orange);}
.tier .prijs{font-size:1.7rem;font-weight:700;color:var(--dark);margin:6px 0 2px;}
.tier .label{font-size:.85rem;color:var(--muted);}

/* FAQ */
.faq{padding:8px 0 52px;}
.faq h2{font-size:1.32rem;color:var(--dark);margin-bottom:14px;}
.faq h3{font-size:1.04rem;color:var(--dark);margin:16px 0 6px;}
.faq p{margin-bottom:12px;color:var(--ink);}

/* Footer (dark, crème tekst — conform brand) */
footer.site{background:var(--dark);color:var(--cream);padding:34px 0;margin-top:40px;}
footer.site .frow{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;align-items:center;}
footer.site a{color:var(--cream);}
footer.site nav{display:flex;gap:18px;flex-wrap:wrap;}
footer.site nav a{text-decoration:none;font-size:.93rem;opacity:.9;}
footer.site nav a:hover{opacity:1;text-decoration:underline;}
footer.site .klein{font-size:.88rem;opacity:.75;margin-top:14px;}

@media(max-width:860px){
  .hero-grid{grid-template-columns:1fr;}
  .hero-visual{display:none;}
  .stats,.stappen,.onderwerpen{grid-template-columns:1fr;}
}
@media(max-width:720px){
  .hero{padding:44px 0 38px;}
  .hero h1{font-size:1.8rem;}
  .cards,.tiers{grid-template-columns:1fr;}
  article.pagina h1{font-size:1.65rem;}
  nav.hoofd{gap:14px;}
  nav.hoofd a{font-size:.92rem;}
}