/* =========================================================
   Lokaal gehoste lettertypes (open-source, SIL OFL)
   Variabele fonts -- geladen vanaf deze site, geen externe verzoeken.
   ========================================================= */
@font-face{
  font-family:'Space Grotesk'; font-style:normal; font-weight:400 700; font-display:swap;
  src:url(../fonts/spacegrotesk-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Space Grotesk'; font-style:normal; font-weight:400 700; font-display:swap;
  src:url(../fonts/spacegrotesk-latinext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Inter'; font-style:normal; font-weight:400 600; font-display:swap;
  src:url(../fonts/inter-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Inter'; font-style:normal; font-weight:400 600; font-display:swap;
  src:url(../fonts/inter-latinext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'JetBrains Mono'; font-style:normal; font-weight:400 500; font-display:swap;
  src:url(../fonts/jetbrainsmono-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'JetBrains Mono'; font-style:normal; font-weight:400 500; font-display:swap;
  src:url(../fonts/jetbrainsmono-latinext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* =========================================================
   Bouwsteen -- design tokens
   ========================================================= */
:root{
  --paper:      #EEF2F6;
  --surface:    #E1E8F1;
  --white:      #FFFFFF;
  --ink:        #1C2B4A;
  --ink-soft:   #3E5372;
  --ink-faint:  #7C8DA6;
  --grid-line:  #C9D6E3;
  --accent:     #FF6B35;
  --accent-soft:#FFE1D1;
  --success:    #2E9E6B;
  --danger:     #C0392B;

  --font-display: "Space Grotesk", "Segoe UI", sans-serif;
  --font-body:    "Inter", "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", monospace;

  --radius: 10px;
  --radius-sm: 6px;
  --shadow-card: 0 4px 24px rgba(28,43,74,0.08);
  --shadow-card-hover: 0 10px 32px rgba(28,43,74,0.14);
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
/* Houdt de bovenkant van een sectie vrij van de sticky header bij het scrollen. */
section[id], #top{ scroll-margin-top: 80px; }
body{
  margin:0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4{
  font-family: var(--font-display);
  color: var(--ink);
  margin: 0 0 0.5em;
  line-height: 1.15;
  overflow-wrap: break-word;   /* voorkomt horizontaal overlopen op smalle schermen */
}
p{ margin: 0 0 1em; color: var(--ink-soft); }
a{ color: inherit; text-decoration: none; }
ul{ list-style: none; margin:0; padding:0; }
img{ max-width:100%; display:block; }

:focus-visible{
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

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

.eyebrow{
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  color: var(--accent);
  margin-bottom: 0.75em;
}

.accent-text{ color: var(--accent); }

/* =========================================================
   Scroll reveal (toggled by IntersectionObserver in main.js)
   ========================================================= */
.reveal-item{
  transition: opacity .6s ease, transform .6s ease;
}
.js .reveal-item{
  opacity: 0;
  transform: translateY(24px);
}
.js [data-reveal].is-visible .reveal-item{
  opacity: 1;
  transform: translateY(0);
}
[data-reveal] .reveal-item:nth-child(1){ transition-delay: 0s; }
[data-reveal] .reveal-item:nth-child(2){ transition-delay: .08s; }
[data-reveal] .reveal-item:nth-child(3){ transition-delay: .16s; }
[data-reveal] .reveal-item:nth-child(4){ transition-delay: .24s; }
[data-reveal] .reveal-item:nth-child(5){ transition-delay: .32s; }
[data-reveal] .reveal-item:nth-child(6){ transition-delay: .4s; }
/* Zodra de inkom-animatie klaar is, de stagger-vertraging wissen, zodat
   hover-effecten (glow-rand, verschuiven) meteen reageren i.p.v. vertraagd. */
[data-reveal].reveal-settled .reveal-item{ transition-delay: 0s; }

/* =========================================================
   Icons -- losse SVG-bestanden in assets/icons/, geladen via CSS mask-image.
   Een mask gebruikt enkel de vorm (alfakanaal) van het SVG-bestand; de
   kleur komt van background-color: currentColor. Zo blijven de iconen
   volledig herbruikbare, losse bestanden én reageren ze nog steeds op
   context- en hover-kleuren (bv. wit bij hover, groen bij vinkjes), net
   zoals voorheen met de inline sprite.
   ========================================================= */
.icon{
  display: inline-block;
  width: 22px; height: 22px;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.icon-sm{ width: 15px; height: 15px; }
.icon-xs{ width: 12px; height: 12px; }

.icon-layout  { -webkit-mask-image: url('../icons/layout.svg');  mask-image: url('../icons/layout.svg'); }
.icon-gallery { -webkit-mask-image: url('../icons/gallery.svg'); mask-image: url('../icons/gallery.svg'); }
.icon-form    { -webkit-mask-image: url('../icons/form.svg');    mask-image: url('../icons/form.svg'); }
.icon-cart    { -webkit-mask-image: url('../icons/cart.svg');    mask-image: url('../icons/cart.svg'); }
.icon-edit    { -webkit-mask-image: url('../icons/edit.svg');    mask-image: url('../icons/edit.svg'); }
.icon-server  { -webkit-mask-image: url('../icons/server.svg');  mask-image: url('../icons/server.svg'); }
.icon-globe   { -webkit-mask-image: url('../icons/globe.svg');   mask-image: url('../icons/globe.svg'); }
.icon-check   { -webkit-mask-image: url('../icons/check.svg');   mask-image: url('../icons/check.svg'); }
.icon-mail    { -webkit-mask-image: url('../icons/mail.svg');    mask-image: url('../icons/mail.svg'); }
.icon-info    { -webkit-mask-image: url('../icons/info.svg');    mask-image: url('../icons/info.svg'); }

/* =========================================================
   Buttons
   ========================================================= */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding: 12px 22px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 0.95rem;
  border: 2px solid transparent;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  cursor: pointer;
}
.btn-solid{
  background: var(--accent);
  color: var(--white);
}
.btn-solid:hover{ transform: translateY(-2px); box-shadow: 0 8px 20px rgba(255,107,53,0.35); }
.btn-outline{
  background: transparent;
  border-color: var(--ink);
  color: var(--ink);
}
.btn-outline:hover{ background: var(--ink); color: var(--white); }
.btn-lg{ padding: 16px 28px; font-size: 1.05rem; }
.btn-full{ width: 100%; }

/* =========================================================
   Header
   ========================================================= */
.site-header{
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(238,242,246,0.85);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--grid-line);
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content: space-between;
  padding-top: 16px;
  padding-bottom: 16px;
}
.logo{
  display:flex;
  align-items:center;
  gap:10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
}
.logo-img{ width: 30px; height: 30px; display:block; border-radius: 8px; }
.main-nav{ display:flex; gap: 28px; }
.main-nav a{ color: var(--ink-soft); font-weight: 500; font-size: 0.95rem; }
.main-nav a:hover{ color: var(--ink); }
.header-cta{ display:flex; align-items:center; gap: 6px; }
.nav-toggle{ display:none; }
.nav-toggle span{ transition: transform .2s ease, opacity .2s ease; }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }

/* =========================================================
   Hero
   ========================================================= */
.hero{
  position: relative;
  overflow: hidden;
  padding: 96px 0 64px;
  background: var(--surface);
}
.hero-grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, black 40%, transparent 90%);
  opacity: 0.6;
}
.hero-inner{
  position: relative;
  display:grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items:center;
}
.hero h1{
  font-size: clamp(2.1rem, 4vw, 3.2rem);
  letter-spacing: -0.01em;
}
.lede{ font-size: 1.1rem; max-width: 46ch; }
.hero-actions{ display:flex; gap: 14px; flex-wrap: wrap; margin: 28px 0 18px; }
.hero-note{
  display:flex; flex-wrap: wrap; gap: 8px 20px;
  font-size: 0.85rem; color: var(--ink-faint);
}
.hero-note li{ display:flex; align-items:center; gap: 6px; }
.hero-note .icon{ color: var(--success); }

.hero-visual{ display:flex; flex-direction:column; gap: 12px; }
.hero-visual-caption{
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--ink-faint);
  text-align:center;
  margin: 0;
}

/* Blueprint hero visual */
.blueprint-card{
  background: var(--white);
  border-radius: var(--radius);
  border: 1px solid var(--grid-line);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.blueprint-topbar{
  display:flex; align-items:center; gap:6px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--grid-line);
}
/* Directe-kind-selector (>): treft enkel de 3 decoratieve "verkeerslicht"-
   bolletjes, niet de icon-span die dieper genest zit in .blueprint-url. */
.blueprint-topbar > span{
  width:9px; height:9px; border-radius:50%;
  background: var(--grid-line);
}
.blueprint-url{
  margin-left: 10px;
  display:flex; align-items:center; gap: 6px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--ink-faint);
  background: var(--paper);
  padding: 3px 10px;
  border-radius: 4px;
}
.blueprint-body{ padding: 18px; display:flex; flex-direction:column; gap:12px; position:relative; }
.b-block{
  border: 1.5px dashed var(--grid-line);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  position: relative;
  background: var(--paper);
  /* Intro bij het laden: elk blok schuift en fadet gespreid in en blijft
     daarna staan (forwards). De hamer-animatie loopt hier los van. */
  opacity: 0;
  transform: translateY(14px);
  animation: blockIn 0.5s ease forwards;
}
.b-block:nth-child(1){ animation-delay: 0.2s; }
.b-block:nth-child(2){ animation-delay: 0.38s; }
.b-block:nth-child(3){ animation-delay: 0.56s; }
.b-block:nth-child(4){ animation-delay: 0.74s; }
@keyframes blockIn{
  to{ opacity: 1; transform: translateY(0); }
}
.b-tag{
  position:absolute; top:-10px; left: 10px;
  background: var(--ink);
  color: var(--white);
  font-family: var(--font-mono);
  font-size: 0.65rem;
  padding: 2px 8px;
  border-radius: 4px;
}
.b-header{ height: 34px; }
.b-hero{ padding-top: 20px; }
.b-line{ height: 8px; border-radius: 4px; background: var(--grid-line); margin-top: 8px; }
.w-70{ width: 70%; }
.w-40{ width: 40%; }
.b-gallery{ display:flex; gap:8px; padding-top: 20px; }
.b-thumb{ flex:1; height: 44px; border-radius: 4px; background: var(--accent-soft); border: 1px solid var(--accent); }
.b-footer{ height: 28px; }
/* -----------------------------------------------------------------
   Kloppende hamer in de hero-illustratie.
   Een accentkleurige hamer die ritmisch een tik uitdeelt boven de
   wireframe, als speelse metafoor voor een website die wordt gebouwd.
   Volledig decoratief en automatisch uitgeschakeld bij
   'prefers-reduced-motion' (zie onderaan dit bestand).
   ----------------------------------------------------------------- */
.build-hammer{
  position: absolute;
  top: 4px;
  right: 26px;
  width: 42px;
  height: 42px;
  /* Verticale stopposities, één per blok. JavaScript (positionHammer in
     main.js) meet de wireframe en zet deze exact op het midden van
     header/hero/galerij/footer. Onderstaande waarden zijn enkel fallback. */
  --y1: 0px;
  --y2: 55px;
  --y3: 110px;
  --y4: 165px;
  /* De wrapper glijdt vloeiend van blok naar blok. */
  animation: hammer-move 5s ease-in-out infinite;
}
.build-hammer__head{
  display: block;
  width: 100%;
  height: 100%;
  transform-origin: 50% 88%;   /* draaipunt onderaan de steel (de 'hand') */
  filter: drop-shadow(0 3px 6px rgba(255, 107, 53, 0.3));
  /* De kop slaat 2 keer per blok. Dezelfde 5s-duur als hammer-move, zodat
     de slagen exact tijdens de halt bij elk blok vallen. */
  animation: hammer-tap 5s ease-in-out infinite;
}

/* 2 slagen per blok, daartussen opgeheven tijdens het verplaatsen.
   De pauzes (blok-holds) vallen samen met die van @keyframes hammer-move. */
@keyframes hammer-tap{
  /* blok 1 -- 2 slagen (halt 0–20%), daarna opgeheven parkeren */
  0%   { transform: rotate(-30deg); }
  5%   { transform: rotate(10deg); }
  9%   { transform: rotate(-30deg); }
  13%  { transform: rotate(10deg); }
  17%  { transform: rotate(-30deg); }  /* slagen klaar, kop omhoog */
  25%  { transform: rotate(-30deg); }  /* opgeheven tijdens verschuiven */
  /* blok 2 -- 2 slagen (halt 25–45%) */
  30%  { transform: rotate(10deg); }
  34%  { transform: rotate(-30deg); }
  38%  { transform: rotate(10deg); }
  42%  { transform: rotate(-30deg); }
  50%  { transform: rotate(-30deg); }
  /* blok 3 -- 2 slagen (halt 50–70%) */
  55%  { transform: rotate(10deg); }
  59%  { transform: rotate(-30deg); }
  63%  { transform: rotate(10deg); }
  67%  { transform: rotate(-30deg); }
  75%  { transform: rotate(-30deg); }
  /* blok 4 -- 2 slagen (halt 75–95%) */
  80%  { transform: rotate(10deg); }
  84%  { transform: rotate(-30deg); }
  88%  { transform: rotate(10deg); }
  92%  { transform: rotate(-30deg); }
  100% { transform: rotate(-30deg); }  /* opgeheven, terug naar boven */
}

/* De hamer zakt traag langs de vier blokken, pauzeert kort bij elk (waar hij
   dus blijft tikken) en keert daarna terug naar boven voor de volgende ronde.
   Pas deze translateY-waarden aan om exact op elk blok te landen. */
@keyframes hammer-move{
  0%,  20% { transform: translateY(var(--y1)); }  /* header -- halt (2 slagen) */
  25%, 45% { transform: translateY(var(--y2)); }  /* hero -- halt (2 slagen) */
  50%, 70% { transform: translateY(var(--y3)); }  /* galerij -- halt (2 slagen) */
  75%, 95% { transform: translateY(var(--y4)); }  /* footer -- halt (2 slagen) */
  100%     { transform: translateY(var(--y1)); }   /* snel terug naar boven */
}

/* =========================================================
   Steps
   ========================================================= */
.steps{ padding: 96px 0; background: var(--surface); }
.steps h2{ font-size: clamp(1.6rem, 3vw, 2.2rem); max-width: 20ch; }
.steps-list{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 40px;
  list-style: none;
  padding: 0;
}
.steps-list li{
  background: var(--white);
  border: 1px solid var(--grid-line);
  border-radius: var(--radius);
  padding: 28px 24px;
  position: relative;
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.steps-list li:hover{
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-3px);
  border-color: var(--accent);
}
.step-top{
  display:flex;
  align-items:center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.step-icon{ width: 28px; height: 28px; opacity: 0.85; }
.step-num{
  display:inline-flex; align-items:center; justify-content:center;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--accent-soft);
  border: 1.5px solid var(--accent);
  color: var(--accent);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.2rem;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.steps-list li:hover .step-num{ background: var(--accent); color: var(--white); transform: scale(1.06); }

/* =========================================================
   Blocks grid
   ========================================================= */
.blocks-section{ padding: 96px 0; background: var(--white); border-top: 1px solid var(--grid-line); border-bottom: 1px solid var(--grid-line); }
.blocks-section h2{ font-size: clamp(1.6rem, 3vw, 2.2rem); max-width: 24ch; }
.blocks-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 40px;
}
.block-card{
  padding: 24px;
  border: 1px solid var(--grid-line);
  border-radius: var(--radius);
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.block-card:hover{ box-shadow: var(--shadow-card-hover); transform: translateY(-3px); border-color: var(--accent); }
.block-icon{
  width: 48px; height: 48px;
  display:flex; align-items:center; justify-content:center;
  border-radius: 10px;
  margin-bottom: 18px;
  background: var(--accent-soft);
  border: 1.5px solid var(--accent);
  transition: background .2s ease, transform .2s ease;
}
.block-icon .icon{ color: var(--accent); width: 24px; height: 24px; transition: color .2s ease; }
.block-card:hover .block-icon{ background: var(--accent); transform: scale(1.06); }
.block-card:hover .block-icon .icon{ color: var(--white); }

/* =========================================================
   Pricing
   ========================================================= */
.pricing{ padding: 96px 0; background: var(--white); border-top: 1px solid var(--grid-line); border-bottom: 1px solid var(--grid-line); }
.pricing h2{ font-size: clamp(1.6rem, 3vw, 2.2rem); }
.pricing-subtitle{
  color: var(--ink-faint);
  font-size: 0.9rem;
  margin-top: -0.25em;
  margin-bottom: 0;
}
.pricing-maintenance{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 28px;
  background: var(--paper);
  border: 1px solid var(--grid-line);
  border-radius: var(--radius-sm);
  padding: 14px 18px;
  max-width: 680px;
}
.pricing-maintenance .icon{ color: var(--accent); flex-shrink: 0; margin-top: 2px; }
.pricing-maintenance p{ margin: 0; font-size: 0.88rem; color: var(--ink-soft); }
.pricing-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 40px;
  align-items: stretch;
}
.price-card{
  background: var(--white);
  border: 1px solid var(--grid-line);
  border-radius: var(--radius);
  padding: 32px 26px;
  display:flex; flex-direction:column;
  position: relative;
  transition: box-shadow .2s ease, transform .2s ease;
}
.price-card:hover{ box-shadow: var(--shadow-card-hover); transform: translateY(-3px); }
.price-card-featured{
  border-color: var(--accent);
  box-shadow: var(--shadow-card);
}
.badge{
  position:absolute; top:-13px; left: 26px;
  background: var(--accent);
  color: var(--white);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 999px;
  margin: 0;
}
.price-tag{ font-family: var(--font-display); font-size: 2.1rem; font-weight:700; color: var(--ink); }
.price-tag span{ font-size: 0.9rem; font-weight:500; color: var(--ink-faint); }
.price-tag .price-star{ color: var(--accent); font-size: 1rem; vertical-align: super; }
.price-desc{ color: var(--ink-faint); font-size: 0.9rem; }
.price-card ul{ margin: 12px 0 24px; flex-grow:1; }
.price-card li{
  display:flex;
  align-items:flex-start;
  gap: 8px;
  padding: 6px 0;
  font-size: 0.92rem;
  color: var(--ink-soft);
}
.price-card li .icon{ color: var(--success); margin-top: 3px; }

/* =========================================================
   FAQ
   ========================================================= */
.faq{ padding: 96px 0; background: var(--surface); border-top: 1px solid var(--grid-line); }
.faq h2{ font-size: clamp(1.6rem, 3vw, 2.2rem); }
.faq-list{ margin-top: 32px; display:flex; flex-direction:column; gap: 12px; max-width: 760px; }
details{
  border: 1px solid var(--grid-line);
  border-radius: var(--radius-sm);
  padding: 16px 20px;
  background: var(--white);
}
summary{
  cursor:pointer;
  font-weight: 600;
  font-family: var(--font-display);
  list-style: none;
}
summary::-webkit-details-marker{ display:none; }
summary::after{ content:"+"; float:right; color: var(--accent); font-size:1.2rem; }
details[open] summary::after{ content:"–"; }
details[open] summary{ border-bottom: 1px solid var(--grid-line); padding-bottom: 14px; }
details p{ margin-top: 14px; }

/* =========================================================
   Final CTA
   ========================================================= */
.contact-section{ padding: 96px 0; background: var(--white); border-top: 1px solid var(--grid-line); }
.contact-inner{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
}
.contact-intro h2{ font-size: clamp(1.6rem, 3vw, 2.2rem); max-width: 18ch; }
.contact-details{ margin-top: 28px; display:flex; flex-direction:column; gap: 14px; }
.contact-details li{ display:flex; flex-direction:column; gap: 2px; }
.contact-label{
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  color: var(--ink-faint);
  text-transform: uppercase;
}
.contact-details a{
  display:inline-flex; align-items:center; gap: 6px;
  font-weight: 600; color: var(--ink);
  transition: color .15s ease;
}
.contact-details a:hover{ color: var(--accent); }

.contact-form{
  background: var(--paper);
  border: 1px solid var(--grid-line);
  border-radius: var(--radius);
  padding: 28px;
  display:flex;
  flex-direction:column;
  gap: 16px;
}
.form-row{ display:flex; flex-direction:column; gap: 6px; }
.form-row label{ font-size: 0.85rem; font-weight: 600; color: var(--ink-soft); }
.form-row input,
.form-row select,
.form-row textarea{
  font-family: var(--font-body);
  font-size: 0.95rem;
  padding: 10px 12px;
  border: 1px solid var(--grid-line);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--ink);
  resize: vertical;
}
.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus{
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.hp-field{ position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-note{ font-size: 0.78rem; color: var(--ink-faint); margin: 0; }
/* Statuskleuren voor de formulierterugkoppeling (main.js zet deze classes
   i.p.v. inline stijlen), zodat de kleuren via de design-tokens verlopen. */
.form-note--pending{ color: var(--ink-faint); }
.form-note--success{ color: var(--success); }
.form-note--error{ color: var(--danger); }
.form-optional{ font-weight: 400; color: var(--ink-faint); }

/* =========================================================
   Footer
   ========================================================= */
.site-footer{ background: var(--ink); color: #C9D6E3; padding-top: 56px; }
.footer-inner{
  display:flex; justify-content:space-between; gap: 40px; flex-wrap:wrap;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.footer-brand{ display:flex; align-items:center; gap:14px; max-width: 340px; }
.footer-brand p{ margin: 0; }
.footer-logo{ width: 48px; height: 48px; border-radius: 11px; flex-shrink: 0; }
.footer-cols{ display:flex; gap: 56px; flex-wrap: wrap; }
.footer-cols h4{ color: var(--white); font-size: 0.9rem; margin-bottom: 12px; }
.footer-cols a{ display:block; color: #A9BAD1; font-size: 0.9rem; padding: 4px 0; }
.footer-cols a:hover{ color: var(--white); }
.footer-detail{ display: block; color: #A9BAD1; padding: 4px 0; font-family: var(--font-mono); font-size: 0.8rem; }
.footer-bottom{ padding-top: 20px; padding-bottom: 28px; font-size: 0.82rem; color: #8598B4; }

/* =========================================================
   Juridische pagina's & bedankpagina
   Gedeelde opmaak voor privacy.html, voorwaarden.html, cookiebeleid.html
   en bedankt.html -- voorheen per pagina gedupliceerd als inline <style>,
   nu centraal op één plek.
   ========================================================= */
.legal-main{ max-width: 760px; margin: 0 auto; padding: 72px 24px 96px; }
.legal-main h1{ font-size: clamp(1.8rem, 3vw, 2.4rem); }
.legal-main h2{ font-size: 1.15rem; margin-top: 2em; }
.legal-main p, .legal-main li{ color: var(--ink-soft); }
.legal-main ul{ list-style: disc; padding-left: 1.4em; margin-bottom: 1em; }
.legal-updated{ font-family: var(--font-mono); font-size: 0.8rem; color: var(--ink-faint); }

.bedankt{ max-width: 620px; margin: 0 auto; padding: 96px 24px; text-align: center; }
.bedankt h1{ font-size: clamp(1.8rem, 3vw, 2.4rem); }
.bedankt p{ color: var(--ink-soft); margin-bottom: 1.6em; }

/* =========================================================
   Uitgevulde tekstblokken
   Grote lopende tekst wordt aan beide kanten recht uitgelijnd (justify),
   met volle regels en zonder woordafbreking (hyphens: none) -- deze blokken
   zijn breed genoeg om er zonder afbreking netjes uit te zien.
   ========================================================= */
.lede,
.pricing-subtitle,
.contact-intro p,
.faq details p,
.legal-main p,
.legal-main li{
  text-align: justify;
  -webkit-hyphens: none;
  hyphens: none;
}

/* De diensten- en werkwijze-kaarten zijn te smal om netjes uit te vullen:
   zonder afbreking geeft dat enorme spaties op regels met weinig woorden, mét
   afbreking oogt het al snel gehakt. De echte tussenweg is gewoon links
   uitlijnen zonder geforceerde regelbalans: de tekst loopt vrij door tot waar
   ze past, zonder kunstmatige gaten of afbrekingen. */
.block-card p,
.steps-list li p{
  text-align: left;
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 900px){
  .hero-inner{ grid-template-columns: 1fr; }
  .steps-list, .blocks-grid, .pricing-grid{ grid-template-columns: 1fr; }
  .contact-inner{ grid-template-columns: 1fr; }

  .header-inner{ position: relative; flex-wrap: wrap; }
  .main-nav{
    display:none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 4px;
    background: var(--white);
    border: 1px solid var(--grid-line);
    border-top: none;
    border-radius: 0 0 10px 10px;
    padding: 12px 20px 18px;
    box-shadow: var(--shadow-card);
  }
  .main-nav.is-open{ display:flex; }
  .main-nav a{ padding: 8px 0; border-bottom: 1px solid var(--grid-line); }
  .main-nav a:last-child{ border-bottom: none; }

  .nav-toggle{
    display:flex; flex-direction:column; gap:4px;
    background:none; border:none; cursor:pointer; padding: 6px;
  }
  .nav-toggle span{ width: 20px; height: 2px; background: var(--ink); display:block; }

  /* Minder loze ruimte op kleinere schermen. */
  .hero{ padding-top: 64px; }
  .steps, .blocks-section, .pricing, .faq, .contact-section{ padding-top: 64px; padding-bottom: 64px; }
  .footer-inner{ gap: 28px; }
  .footer-cols{ gap: 32px; }
}

/* Tablet: de zes dienstenkaarten in twee kolommen i.p.v. één lange lijst. */
@media (min-width: 600px) and (max-width: 900px){
  .blocks-grid{ grid-template-columns: 1fr 1fr; }
}

/* Kleine telefoons: de offerte-knop in de header weglaten om drukte te
   vermijden (het menu en de hero-knop bieden dezelfde actie). */
@media (max-width: 560px){
  .header-cta{ display: none; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}