/* ============================================================
   ScaleHub v3 — gedeeld fundament (tokens, reset, componenten)
   Merk: teal  #008eb4 primair / #00747d secundair
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Schibsted+Grotesk:wght@400;500;600;700;800;900&family=Hanken+Grotesk:wght@400;500;600;700&family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700;12..96,800&family=Instrument+Serif:ital@0;1&display=swap');

:root{
  /* teal-schaal */
  --brand:        #008eb4;
  --brand-deep:   #00747d;
  --brand-bright: #1ba7c9;
  --teal-050:     #eef8fa;
  --teal-100:     #d6eef2;
  --teal-200:     #a9dde5;
  --ink-teal:     #04323a;   /* donkere teal voor dark-secties */
  --ink-teal-2:   #06262d;

  /* neutralen (licht koel, vers) */
  --paper:  #ffffff;
  --bg:     #f7fafa;
  --bg-2:   #eef3f3;
  --ink:    #0c1c1f;
  --body:   #38484a;
  --muted:  #647273;
  --line:   #e3eaea;
  --line-2: #d4dede;

  /* maat & ritme */
  --maxw: 1200px;
  --gut: clamp(20px, 5vw, 64px);
  --r-sm: 8px;
  --r:    14px;
  --r-lg: 22px;
  --r-xl: 30px;

  --shadow-sm: 0 1px 2px rgba(6,38,45,.06), 0 1px 3px rgba(6,38,45,.05);
  --shadow:    0 4px 12px rgba(6,38,45,.07), 0 12px 30px rgba(6,38,45,.06);
  --shadow-lg: 0 20px 50px rgba(6,38,45,.13), 0 4px 14px rgba(6,38,45,.07);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body{
  margin:0;
  font-family:'Hanken Grotesk', system-ui, sans-serif;
  color:var(--body);
  background:var(--paper);
  font-size:18px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; cursor:pointer; }
h1,h2,h3,h4{ color:var(--ink); margin:0; line-height:1.08; letter-spacing:-.02em; font-weight:700; text-wrap:balance; }
p{ margin:0; text-wrap:pretty; }
::selection{ background:var(--brand); color:#fff; }

/* ---- layout helpers ---- */
.wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut); }
.wrap-wide{ max-width:1360px; margin-inline:auto; padding-inline:var(--gut); }
section{ position:relative; }

.eyebrow{
  display:inline-flex; align-items:center; gap:.5em;
  font-size:13px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--brand-deep);
}
.eyebrow::before{ content:""; width:22px; height:1.5px; background:var(--brand); display:inline-block; }

/* ---- knoppen ---- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  padding:14px 22px; border-radius:999px; font-weight:600; font-size:16px;
  border:1px solid transparent; transition:transform .18s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
  white-space:nowrap;
}
.btn:active{ transform:translateY(1px); }
.btn-primary{ background:var(--brand); color:#fff; box-shadow:0 6px 16px rgba(0,142,180,.28); }
.btn-primary:hover{ background:var(--brand-deep); box-shadow:0 10px 24px rgba(0,142,180,.34); transform:translateY(-1px); }
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--line-2); }
.btn-ghost:hover{ border-color:var(--brand); color:var(--brand-deep); }
.btn-light{ background:#fff; color:var(--ink-teal); }
.btn-light:hover{ background:var(--teal-050); transform:translateY(-1px); }
.btn-on-dark-ghost{ background:transparent; color:#fff; border-color:rgba(255,255,255,.28); }
.btn-on-dark-ghost:hover{ border-color:#fff; background:rgba(255,255,255,.08); }
.btn .arr{ transition:transform .2s ease; }
.btn:hover .arr{ transform:translateX(3px); }

/* ---- badge ---- */
.badge{
  display:inline-flex; align-items:center; gap:.5em;
  padding:7px 14px; border-radius:999px; font-size:14px; font-weight:600;
  background:var(--teal-050); color:var(--brand-deep); border:1px solid var(--teal-100);
}
.badge .dot{ width:7px; height:7px; border-radius:50%; background:var(--brand); box-shadow:0 0 0 4px rgba(0,142,180,.15); }

/* ---- scroll reveal ---- */
[data-reveal]{ opacity:0; transform:translateY(22px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
[data-reveal].in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ [data-reveal]{ opacity:1 !important; transform:none !important; } }

/* ---- foto-slot styling ---- */
image-slot{ --is-bg:var(--bg-2); border-radius:var(--r-lg); overflow:hidden; }

/* ============================================================
   Demo-modal (gedeeld)
   ============================================================ */
.demo-overlay{
  position:fixed; inset:0; z-index:200; display:none;
  background:rgba(4,30,35,.5); backdrop-filter:blur(6px);
  align-items:center; justify-content:center; padding:24px;
}
.demo-overlay.open{ display:flex; animation:demoFade .25s ease; }
@keyframes demoFade{ from{opacity:0} to{opacity:1} }
.demo-card{
  background:var(--paper); width:min(560px,100%); border-radius:var(--r-xl);
  box-shadow:var(--shadow-lg); overflow:hidden; max-height:92vh; overflow-y:auto;
  animation:demoUp .35s cubic-bezier(.2,.8,.2,1);
}
@keyframes demoUp{ from{opacity:0; transform:translateY(24px) scale(.98)} to{opacity:1; transform:none} }
.demo-head{ padding:30px 34px 0; position:relative; }
.demo-close{
  position:absolute; top:22px; right:22px; width:38px; height:38px; border-radius:50%;
  border:1px solid var(--line); background:#fff; color:var(--muted); font-size:18px;
  display:flex; align-items:center; justify-content:center;
}
.demo-close:hover{ background:var(--bg); color:var(--ink); }
.demo-steps{ display:flex; gap:8px; margin:4px 0 18px; }
.demo-steps i{ height:4px; flex:1; border-radius:2px; background:var(--line-2); transition:background .3s; }
.demo-steps i.on{ background:var(--brand); }
.demo-card h3{ font-size:24px; margin-bottom:6px; }
.demo-card .sub{ font-size:15px; color:var(--muted); }
.demo-body{ padding:18px 34px 30px; }
.field{ margin-bottom:16px; }
.field label{ display:block; font-size:13px; font-weight:600; color:var(--ink); margin-bottom:6px; }
.field input,.field select,.field textarea{
  width:100%; padding:12px 14px; border:1px solid var(--line-2); border-radius:var(--r-sm);
  font:inherit; font-size:15px; color:var(--ink); background:#fff; transition:border-color .2s, box-shadow .2s;
}
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--brand); box-shadow:0 0 0 3px rgba(0,142,180,.15); }
.field textarea{ resize:vertical; min-height:84px; }
.sector-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.sector-opt{ padding:14px; border:1px solid var(--line-2); border-radius:var(--r); display:flex; gap:10px; align-items:center; font-weight:600; color:var(--ink); font-size:15px; transition:.18s; }
.sector-opt:hover{ border-color:var(--brand); background:var(--teal-050); }
.sector-opt.sel{ border-color:var(--brand); background:var(--teal-050); box-shadow:0 0 0 2px rgba(0,142,180,.18) inset; }
.sector-opt .ico{ width:34px; height:34px; border-radius:9px; background:var(--teal-100); display:grid; place-items:center; flex:none; }
.demo-foot{ display:flex; gap:12px; align-items:center; justify-content:space-between; margin-top:22px; }
.demo-note{ font-size:13px; color:var(--muted); }
.demo-success{ text-align:center; padding:20px 10px; }
.demo-success .check{ width:66px; height:66px; border-radius:50%; background:var(--teal-050); display:grid; place-items:center; margin:0 auto 16px; }
.demo-success .check svg{ width:30px; height:30px; }
.demo-success h3{ font-size:24px; }
.demo-success p{ color:var(--muted); margin:8px auto 0; max-width:38ch; }
.calendar-hint{ margin-top:20px; padding:14px; border:1px dashed var(--line-2); border-radius:var(--r); font-size:14px; color:var(--muted); }

/* utilitaire kleine tekst */
.tiny{ font-size:13px; color:var(--muted); }
.center{ text-align:center; }