/* ==========================================================================
   Dark Energy Consultancy (DEC) huisstijl
   Nachtinkt en veel wit, DEC-blauw als merkkleur, amber als enkel signaal.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --dec-inkt: #0B1220;
  --dec-blauw: #2F5BEA;
  --dec-blauw-diep: #2448C8;
  --dec-blauw-licht: #8FB0FF;
  --dec-amber: #F2B705;
  --dec-amber-tekst: #8A5A00;
  --dec-staal: #5B6573;
  --dec-staal-licht: #AEB7C6;
  --dec-lijn: #DDE1E8;
  --dec-mist: #EEF1F6;
  --dec-blauw-tint: #E6ECFD;
  --dec-amber-tint: #FEF4D6;
  --dec-wit: #FFFFFF;

  --radius: 6px;
  --schaduw: 0 1px 3px rgba(11, 18, 32, .08);
  --font: "Onest", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  --wrap: 1120px;
}

html { scroll-behavior: smooth; scroll-padding-top: 88px; }

body {
  font-family: var(--font);
  color: var(--dec-inkt);
  background: var(--dec-wit);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

h1 { font-size: 34px; line-height: 1.2; font-weight: 700; letter-spacing: -.01em; }
h2 { font-size: 21px; line-height: 1.3; font-weight: 600; color: var(--dec-blauw); }
h3 { font-size: 17px; line-height: 1.35; font-weight: 600; }
p { max-width: 70ch; }

a { color: var(--dec-blauw); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--dec-blauw-diep); }
:focus-visible { outline: 2px solid var(--dec-blauw); outline-offset: 2px; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }

.label {
  display: block;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--dec-staal);
  font-weight: 600;
  margin-bottom: 8px;
}

.skip {
  position: absolute; left: 16px; top: -48px;
  background: var(--dec-inkt); color: #fff; padding: 8px 12px; border-radius: var(--radius);
  z-index: 100;
}
.skip:focus { top: 12px; color: #fff; }

/* Knoppen ---------------------------------------------------------------- */

.knop, .knop-secundair {
  display: inline-flex; align-items: center; gap: 8px;
  font: 600 16px/1.2 var(--font);
  text-decoration: none;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.knop { background: var(--dec-blauw); color: #fff; padding: 12px 20px; border: 0; }
.knop:hover { background: var(--dec-blauw-diep); color: #fff; }
.knop-secundair { background: transparent; color: var(--dec-inkt); border: 1.5px solid var(--dec-inkt); padding: 10.5px 18.5px; }
.knop-secundair:hover { background: var(--dec-inkt); color: #fff; }
.knop svg, .knop-secundair svg { width: 18px; height: 18px; flex: none; }
.knoppen { display: flex; flex-wrap: wrap; gap: 12px; }

.signaal {
  display: inline-block;
  background: var(--dec-amber); color: var(--dec-inkt);
  font-weight: 600; font-size: 14px;
  padding: 2px 8px; border-radius: 4px;
}

/* Header ----------------------------------------------------------------- */

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--dec-wit);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.site-header.is-scrolled { border-bottom-color: var(--dec-lijn); box-shadow: var(--schaduw); }
.site-header .bar { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 76px; }
.site-header .logo { display: block; flex: none; }
.site-header .logo img { height: 40px; width: auto; }

.main-nav { display: flex; align-items: center; gap: 28px; }
.main-nav a { color: var(--dec-inkt); text-decoration: none; font-weight: 500; font-size: 15px; }
.main-nav a:hover { color: var(--dec-blauw); }
.main-nav .knop { color: #fff; padding: 10px 16px; font-size: 15px; }

.nav-toggle {
  display: none;
  background: none; border: 1.5px solid var(--dec-lijn); border-radius: var(--radius);
  width: 44px; height: 44px; color: var(--dec-inkt); cursor: pointer;
  align-items: center; justify-content: center;
}
.nav-toggle svg { width: 22px; height: 22px; }

@media (max-width: 880px) {
  .nav-toggle { display: inline-flex; }
  .main-nav {
    display: none;
    position: absolute; left: 0; right: 0; top: 76px;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--dec-wit); border-bottom: 1px solid var(--dec-lijn);
    padding: 8px 24px 20px;
  }
  .main-nav.is-open { display: flex; }
  .main-nav a { padding: 12px 0; border-bottom: 1px solid var(--dec-mist); }
  .main-nav .knop { margin-top: 12px; justify-content: center; border: 0; }
  .site-header .logo img { height: 34px; }
}

/* Secties ---------------------------------------------------------------- */

.sectie { padding: 88px 0; }
.sectie--mist { background: var(--dec-mist); }
.sectie-kop { max-width: 70ch; margin-bottom: 40px; }
.sectie-kop h2 { font-size: 28px; font-weight: 700; color: var(--dec-inkt); margin-bottom: 12px; }
.sectie-kop p { color: var(--dec-staal); font-size: 17px; }

/* In de secties is H1 de paginatitel; sectiekoppen zijn H2 in nachtinkt met
   een korte blauwe lijn, zodat blauw structuur geeft zonder te schreeuwen. */
.sectie-kop h2::after {
  content: ""; display: block;
  width: 48px; height: 3px; background: var(--dec-blauw);
  margin-top: 14px;
}

/* Hero ------------------------------------------------------------------- */

.hero { padding: 72px 0 88px; border-bottom: 1px solid var(--dec-lijn); }
.hero-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 64px; align-items: center; }
.hero h1 { font-size: clamp(30px, 4.6vw, 44px); margin-bottom: 20px; }
.hero h1 .punt { color: var(--dec-blauw); }
.hero .intro { font-size: 18px; color: var(--dec-inkt); margin-bottom: 32px; }
.hero .noot { margin-top: 20px; font-size: 14px; color: var(--dec-staal); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Schema: van vraag naar rendement */
.schema {
  background: var(--dec-wit);
  border: 1px solid var(--dec-lijn);
  border-radius: var(--radius);
  box-shadow: var(--schaduw);
  padding: 28px;
}
.schema-titel { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 20px; gap: 12px; }
.schema-titel h2 { font-size: 17px; color: var(--dec-inkt); }
.schema-titel span { font-family: var(--font-mono); font-size: 13px; color: var(--dec-staal); }
.schema ol { list-style: none; display: grid; gap: 0; }
.schema li { display: grid; grid-template-columns: 36px 1fr; gap: 14px; position: relative; padding-bottom: 20px; }
.schema li:last-child { padding-bottom: 0; }
.schema li::before {
  content: ""; position: absolute; left: 17px; top: 36px; bottom: 0;
  width: 2px; background: var(--dec-lijn);
}
.schema li:last-child::before { display: none; }
.schema .stap {
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center;
  border: 2px solid var(--dec-blauw); color: var(--dec-blauw);
  font: 600 14px/1 var(--font-mono);
  background: var(--dec-wit);
}
.schema li:last-child .stap { background: var(--dec-blauw); color: #fff; }
.schema strong { display: block; font-weight: 600; }
.schema li div span { font-size: 14px; color: var(--dec-staal); }

/* Rode draad ------------------------------------------------------------- */

.info {
  background: var(--dec-blauw-tint);
  border-left: 4px solid var(--dec-blauw);
  padding: 16px 20px;
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 17px;
}
.belofte { padding: 40px 0 0; }

/* Aanbod ----------------------------------------------------------------- */

.aanbod { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.kaart {
  background: var(--dec-wit);
  border: 1px solid var(--dec-lijn);
  border-radius: var(--radius);
  padding: 24px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.kaart:hover { border-color: var(--dec-blauw); box-shadow: var(--schaduw); }
.kaart .icoon { width: 28px; height: 28px; color: var(--dec-blauw); margin-bottom: 16px; }
.kaart h3 { margin-bottom: 8px; }
.kaart p { color: var(--dec-staal); font-size: 15px; }
.kaart--vraag { background: var(--dec-mist); border-color: var(--dec-mist); display: flex; flex-direction: column; justify-content: space-between; gap: 16px; }
.kaart--vraag:hover { border-color: var(--dec-mist); box-shadow: none; }
.kaart--vraag p { color: var(--dec-inkt); }

/* Werkwijze -------------------------------------------------------------- */

.stappen { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; counter-reset: stap; }
.stappen li { border-top: 3px solid var(--dec-inkt); padding-top: 16px; }
.stappen li:first-child { border-top-color: var(--dec-blauw); }
.stappen .nr { font: 600 13px/1 var(--font-mono); color: var(--dec-staal); display: block; margin-bottom: 10px; }
.stappen h3 { margin-bottom: 6px; }
.stappen p { font-size: 15px; color: var(--dec-staal); }

/* Voor wie --------------------------------------------------------------- */

.twee-kol { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.twee-kol .sectie-kop { margin-bottom: 0; }
.tags { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; }
.tags li {
  background: var(--dec-wit); border: 1px solid var(--dec-lijn);
  border-radius: var(--radius); padding: 8px 14px; font-size: 15px; font-weight: 500;
}
.tags-groep + .tags-groep { margin-top: 28px; }

/* Waarom ----------------------------------------------------------------- */

.usp { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px; }
.usp li { display: grid; grid-template-columns: 24px 1fr; gap: 14px; padding: 20px 0; border-top: 1px solid var(--dec-lijn); }
.usp svg { width: 22px; height: 22px; color: var(--dec-blauw); margin-top: 2px; }
.usp strong { display: block; font-weight: 600; margin-bottom: 2px; }
.usp span { color: var(--dec-staal); font-size: 15px; }

.cijfer { display: flex; gap: 48px; flex-wrap: wrap; margin-bottom: 40px; }
.cijfer div { border-left: 3px solid var(--dec-blauw); padding-left: 16px; }
.cijfer b { display: block; font: 600 32px/1.1 var(--font-mono); font-variant-numeric: tabular-nums; }
.cijfer span { font-size: 14px; color: var(--dec-staal); }

/* Contact ---------------------------------------------------------------- */

.donker { background: var(--dec-inkt); color: #fff; }
.donker a { color: var(--dec-blauw-licht); }
.contact-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 64px; align-items: center; }
.contact h2 { font-size: 28px; font-weight: 700; color: #fff; margin-bottom: 14px; }
.contact p { color: var(--dec-staal-licht); font-size: 17px; margin-bottom: 28px; }
.contact .knop { background: var(--dec-blauw); color: #fff; }
.contact .knop:hover { background: var(--dec-blauw-diep); color: #fff; }
.contact dl { display: grid; gap: 16px; border-left: 1px solid #243049; padding-left: 32px; }
.contact dt { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--dec-staal-licht); font-weight: 600; }
.contact dd { font-size: 17px; }

/* Footer ----------------------------------------------------------------- */

.site-footer { background: var(--dec-inkt); color: #fff; border-top: 1px solid #243049; padding: 48px 0 32px; font-size: 14px; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 40px; }
.site-footer img { height: 36px; width: auto; margin-bottom: 14px; }
.site-footer p { color: var(--dec-staal-licht); }
.site-footer h4 { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--dec-staal-licht); font-weight: 600; margin-bottom: 10px; }
.site-footer ul { list-style: none; display: grid; gap: 6px; }
.site-footer a { color: var(--dec-blauw-licht); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.footer-onder { margin-top: 40px; padding-top: 20px; border-top: 1px solid #243049; color: var(--dec-staal-licht); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

/* Onthullen bij scrollen (alleen met JavaScript) ------------------------- */

.js .reveal { opacity: 0; transform: translateY(8px); transition: opacity .4s ease, transform .4s ease; }
.js .reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
}

/* Responsief ------------------------------------------------------------- */

@media (max-width: 960px) {
  .hero-grid, .twee-kol, .contact-grid { grid-template-columns: 1fr; gap: 40px; }
  .aanbod { grid-template-columns: 1fr 1fr; }
  .stappen { grid-template-columns: 1fr 1fr; row-gap: 32px; }
  .contact dl { border-left: 0; padding-left: 0; border-top: 1px solid #243049; padding-top: 24px; }
}
@media (max-width: 640px) {
  .wrap { padding: 0 16px; }
  .sectie { padding: 64px 0; }
  .hero { padding: 48px 0 64px; }
  .aanbod, .stappen, .usp, .footer-grid { grid-template-columns: 1fr; }
  .schema { padding: 20px; }
  .cijfer { gap: 28px; }
}