/* ===================================================================
   TOKENS
   =================================================================== */
:root{
  /* Ink palette */
  --ink-900:#0b1739;
  --ink-700:#10214f;
  --ink-600:#1f2f63;
  --ink-500:#314266;
  --ink-400:#6b7a94;
  --ink-300:#a8b1c6;

  /* Blue palette */
  --blue-900:#0a2371;
  --blue-800:#0f2a7e;
  --blue-700:#183a9b;
  --blue-500:#2f80ff;
  --blue-200:#d8e7ff;
  --blue-100:#ecf4ff;
  --blue-50:#f6faff;

  /* Surfaces */
  --surface:#ffffff;
  --glass:rgba(255,255,255,.75);
  --border:#e7ecf5;

  /* Radii, shadows */
  --radius:16px;
  --shadow:0 16px 40px rgba(10,35,113,.12);
  --shadow-soft:0 8px 24px rgba(10,35,113,.10);

  /* Layout tokens */
  --container-max: 1120px;     /* default container max */
  --features-max: 1380px;      /* "Wat kun je ermee?" */
  --demos-max:    1680px;      /* "Geavanceerde detectie" */

  /* Header + hero */
  --header-h: 72px;            /* fixed header height */
  --hero-shift: 48px;          /* move hero copy UP (increase) or DOWN (decrease/negative) */

  /* Compare slider height */
  --compare-h: 300px;
}

/* TYPOGRAPHY TOKENS */
:root{
  /* Use a high-quality system font stack to avoid external requests */
  --ui-font: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Liberation Sans', sans-serif;
  --head-weight: 700;
  --lead-weight: 600;
  --body-weight: 400;
}

/* Global heading and accent rules for consistent typographic hierarchy */
h1,h2,h3{
  font-family: var(--ui-font);
  font-weight: var(--head-weight);
  color: var(--ink-900);
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.accent{ color: var(--blue-700); font-weight:600; }

/* ===================================================================
   BASE
   =================================================================== */
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: var(--ui-font);
  font-size:16px;
  line-height:1.6;
  font-weight: var(--body-weight);
  color: var(--ink-700);
  background: linear-gradient(90deg, #f9fbff 0%, #ffffff 40%);
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

.container{
  width:min(var(--container-max), 92vw);
  margin-inline:auto;
}

/* ===================================================================
   HEADER / NAV (fixed)
   =================================================================== */
.site-header{
  position:fixed;
  top:0; left:0; right:0;
  z-index:2000;
  color:#fff;
  padding:12px 0;
  background:
    linear-gradient(90deg, var(--blue-900) 0%, var(--blue-800) 40%, rgba(255,255,255,0) 80%),
    linear-gradient(#0c1f60,#0c1f60);
  box-shadow:0 6px 24px rgba(10,35,113,.18);
}

.nav{ display:flex; align-items:center; gap:16px; }
.brand{ display:flex; align-items:center; gap:12px; }
.brand-text{ 
  font-size:20px;
 }

.brand-mark{
  width:32px; height:32px; border-radius:8px;
  background: linear-gradient(135deg,#56ccf2,#2f80ff);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.35);
}
.brand--footer .brand-mark{ width:28px; height:28px; }

/* Links */
.nav-links{ margin-left:auto; display:flex; align-items:center; gap:12px; }
.nav-links a{ color:#e9efff; }
.nav-links a:hover{ color:#fff; }
.nav-toggle{ display:none; }

/* Favicon as logo (header) */
.site-header .brand { color:#fff; }
.site-header .brand-text{
  font-weight:800;
  font-size: clamp(18px, 1.1vw + 12px, 24px);
  line-height:1;
  letter-spacing:.2px;
}
.brand-icon{
  width:44px; height:44px; border-radius:12px;
  background:transparent !important; border:0; outline:0; box-shadow:none !important;
}
@media (max-width:640px){
  .brand-icon{ width:40px; height:40px; }
}

/* ===================================================================
   BUTTONS
   =================================================================== */
.btn{
  --h:44px;
  display:inline-flex; align-items:center; justify-content:center;
  height:var(--h); padding:0 16px;
  border-radius:12px; border:1px solid transparent;
  font-weight:700; letter-spacing:.2px; cursor:pointer; transition:.15s;
  box-shadow:0 2px 0 rgba(0,0,0,.03);
}
.btn-lg{ --h:52px; padding:0 20px; }
.btn-sm{ --h:36px; padding:0 12px; font-size:14px; }

.btn-primary{ background:#2f80ff; color:#fff; }
.btn-primary:hover{ filter:brightness(1.05); }
.btn-ghost{ background:transparent; color:#fff; border-color:rgba(255,255,255,.35); }
.btn-ghost:hover{ background:rgba(255,255,255,.12); }
.btn-outline{ background:#fff; border-color:var(--blue-200); }
.btn-outline:hover{ background:var(--blue-50); }

/* ===================================================================
   HERO
   =================================================================== */
:root{
  /* keep normal nav height; if you still have a stray --header-h:350px; this will win */
  --header-h: 72px !important;
}
.hero{
  /* White fade over image */
  background:
    linear-gradient(180deg,
      rgba(255,255,255,0) 20%,
      rgba(255,255,255,.92) 62%,
      #ffffff 95%
    ),
    url("../img/site-hero2.jpeg") center/cover no-repeat;
  background-color:#0a1f63; /* fallback */
  color:#fff;

  position:relative;
  overflow:hidden;

  /* keep text clear of fixed header */
  padding-top: calc(var(--header-h) + 56px);
  padding-bottom: 120px;
  min-height: 68vh;
  display: grid;                        /* allow centering by grid */
  align-content: center;
}

.hero-grid{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:24px;
  align-items:center;
}

.hero-title{
  font-size: clamp(28px, 3.6vw, 48px);
  margin:0 0 10px;
  line-height:1.15;
  color: var(--blue-900);        /* dark title like header */
}
.hero-title .accent{ color: var(--blue-700); font-weight:600; }

.hero-lead{
  color:#0a2371;                /* darker blue for readability on fade */
  text-shadow:0 1px 0 rgba(255,255,255,.5);
  margin:0 0 18px;
  max-width:58ch;
}

.hero-ctas{ display:flex; gap:12px; margin:8px 0 18px; }
.hero-ctas{ justify-content: center; }
/* Subtle lift of the full copy block (tunable) */
.hero .hero-grid > :first-child{
  transform: translateY(calc(-1 * var(--hero-shift)));
}

.metrics{ display:flex; gap:18px; flex-wrap:wrap; margin-top:4px; }
.metric-k{ font-weight:800; font-size:20px; }
.metric-l{ font-size:12px; opacity:.85; }

.hero-art{ display:flex; justify-content:flex-end; }
.hero .hero-grid > :first-child,
.hero .hero-copy{
  position: static !important;
  transform: none !important;
  max-width: min(980px, 92vw);
  margin: 0 auto;
}
/* ===================================================================
   GENERIC SECTIONS / CARDS
   =================================================================== */
.section{ padding:44px 0; }

.h2{ font-size:28px; margin:0 0 6px; font-weight:var(--head-weight); letter-spacing:-0.01em; }
.lead{ color:var(--ink-500); margin:4px 0 18px; font-weight:var(--lead-weight); }
.muted{ color:var(--ink-400); }

.cards{
  display:grid;
  grid-template-columns: repeat(3,1fr);
  gap:14px;
}
.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:16px;
  box-shadow:var(--shadow-soft);
}
.card h3{ margin:0 0 6px; }

/* Two-column usecases block */
.usecases-grid{
  display:grid; gap:16px;
  grid-template-columns: 1.1fr .9fr;
  align-items:start;
}

.list{ margin:0; padding-left:1.2rem; }
.list.dots li{ margin:6px 0; }
.cta-row{ display:flex; gap:10px; margin-top:12px; }

/* CTA band */
.section.cta{
  background: linear-gradient(90deg, var(--blue-900), var(--blue-700));
  color:#fff;
}
.cta-inner{ display:flex; align-items:center; justify-content:space-between; gap:16px; }
.cta-copy .lead{ color:#dfe9ff; }

/* ===================================================================
   FAQ
   =================================================================== */
.faq details{
  background:#fff; border:1px solid var(--border);
  border-radius:12px; padding:10px 12px; margin:8px 0;
  box-shadow:var(--shadow-soft);
}
.faq summary{ cursor:pointer; font-weight:700; list-style:none; }
.faq summary::-webkit-details-marker{ display:none; }
.faq-a{ color:var(--ink-500); margin-top:8px; }

/* ===================================================================
   FOOTER
   =================================================================== */
.site-footer{ margin-top:32px; background:#f8fbff; border-top:1px solid var(--border); }
.footer-grid{
  display:grid; gap:16px; padding:20px 0;
  grid-template-columns: 1.2fr .8fr .8fr;
}
.foot-h{ margin:0 0 6px; }
.foot-list{ margin:0; padding:0; list-style:none; }
.foot-list li{ margin:6px 0; }
.foot-bottom{ border-top:1px solid var(--border); background:#fff; }
.foot-bottom-row{ display:flex; justify-content:space-between; padding:10px 0; }

/* ===================================================================
   FEATURES ("Wat kun je ermee?") – center titles
   =================================================================== */
#functies .container{ width:min(var(--features-max), 96vw); }
#functies .h2{ text-align:center; margin-inline:auto; }
#functies .lead{
  text-align:center; max-width:900px;
  margin:8px auto 24px;
}

/* ===================================================================
   DEMOS ("Geavanceerde detectie")
   =================================================================== */
.demos{ scroll-margin-top: var(--header-h); padding-left:4px; padding-right:4px; }
.demos .container{ width:min(var(--demos-max), 98vw); } /* wider than default */
.demos .h2{ text-align:center; margin-inline:auto; }
.demos .lead{
  text-align:center; max-width:900px;
  margin:8px auto 24px;
}

/* 3-up grid, tighter gap */
.demos-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:14px;
  justify-items:stretch;
  align-items:start;
}
.demos-card{
  background:#fff; border:1px solid var(--border);
  border-radius:var(--radius); padding:16px;
  box-shadow:var(--shadow-soft);
  width:100%; max-width:none; margin:0;
}
.demos-card h3{ margin:0 0 6px; }
.demos .caption{ margin-top:8px; color:var(--ink-500); font-size:14px; }

/* Before/after compare slider */
.compare{
  --w: 50%;
  position:relative;
  height: var(--compare-h);
  border-radius:12px; overflow:hidden;
  margin-top:10px; background:#f3f6ff;
}
.compare img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
}
.compare .after{
  position:absolute; inset:0; width:var(--w); overflow:hidden;
}
.compare .after img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.compare .slider{
  position:absolute; inset:0; width:100%; height:100%;
  opacity:0; cursor:ew-resize;
}
.compare .handle{
  position:absolute; top:0; bottom:0;
  left: calc(var(--w) - 12px);
  width:24px; pointer-events:none; border-radius:12px;
  border:2px solid #fff; box-shadow:0 0 0 1px rgba(0,0,0,.08);
  background:
    linear-gradient(to bottom, transparent 0 46%, rgba(255,255,255,.95) 46% 54%, transparent 54% 100%),
    linear-gradient(to right, rgba(0,0,0,.12), rgba(0,0,0,.12));
  background-repeat:no-repeat;
  background-size: 2px 100%, 2px 100%;
  background-position: center, center;
}

/* ===================================================================
   RESPONSIVE
   =================================================================== */
@media (max-width:1080px){
  .demos-grid{ grid-template-columns:1fr; }
  .compare{ height:260px; }
}
@media (max-width:980px){
  .hero-grid{ grid-template-columns:1fr; }
  .hero{ padding-top:40px; padding-bottom:90px; }
  .usecases-grid{ grid-template-columns:1fr; }
  .cards{ grid-template-columns: 1fr 1fr; }
}
@media (max-width:720px){
  .cards{ grid-template-columns:1fr; }
  .nav-toggle{ display:inline-flex; flex-direction:column; gap:4px; width:36px; height:32px; background:transparent; border:0; }
  .nav-toggle span{ display:block; height:2px; background:#fff; }
  .nav-links{
    display:none; flex-direction:column; position:absolute;
    right:16px; top:56px; background:#0d2a85; padding:10px; border-radius:12px;
  }
  .nav-links.show{ display:flex; }
}

/* ===== DEMOS: 3 columns on desktop, responsive below ===== */
.demos .demo-grid,
.demos .demos-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 16px;                     /* tighter look */
  align-items: start;
  justify-items: stretch;
}

/* Make the cards fill their column */
.demos .demo-card,
.demos-card{
  width: 100%;
  max-width: none;
  margin: 0;
}

/* Wider container for a more spacious feel */
.demos .container{ width: min(1680px, 98vw); margin-inline: auto; }

/* 2 columns on medium, 1 on mobile */
@media (max-width: 1200px){
  .demos .demo-grid,
  .demos .demos-grid{
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
}
@media (max-width: 720px){
  .demos .demo-grid,
  .demos .demos-grid{
    grid-template-columns: 1fr;
  }
}

/* ===== Geavanceerde detectie – kaartstijl zoals boven ===== */

/* Card look (white, rounded, shadow, padding) */
.demos .demo-card,
.demos-card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: 18px 20px;              /* inside spacing */
  width: 100%;
  max-width: none;
  margin: 0;
  transition: box-shadow .18s ease, transform .18s ease;
}

/* Small hover lift (optional) */
.demos .demo-card:hover,
.demos-card:hover{
  box-shadow: 0 14px 36px rgba(10,35,113,.12);
  transform: translateY(-2px);
}

/* Headings & copy inside the cards */
.demos .demo-card h3,
.demos-card h3{
  margin: 0 0 10px;
  font-weight: 800;
  color: var(--ink-900);
}

.demos .demo-card p,
.demos-card p{
  margin: 0 0 12px;
  color: var(--ink-600);
}

/* The before/after area inside the cards */
.demos .demo-card .compare,
.demos-card .compare{
  height: 340px;                   /* match your visual height */
  margin-top: 10px;
  border-radius: 12px;
  overflow: hidden;
  background: #f4f7ff;
  border: 1px solid rgba(10,35,113,.06);
}

/* Make inner images inherit the rounded corners */
.demos .demo-card .compare img,
.demos-card .compare img{
  border-radius: inherit;
}

/* Caption under the slider, like your other cards */
.demos .caption{
  margin-top: 12px;
  color: var(--ink-500);
  font-size: 14px;
}

/* Keep the grid tight and aligned (you added this earlier) */
.demos .demo-grid,
.demos .demos-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 16px;
  align-items: start;
  justify-items: stretch;
}

/* Responsive columns */
@media (max-width: 1200px){
  .demos .demo-grid,
  .demos .demos-grid{
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
}
@media (max-width: 720px){
  .demos .demo-grid,
  .demos .demos-grid{
    grid-template-columns: 1fr;
  }
}

/* Overall width of the demos section */
.demos .container{
  width: min(1300px, 98vw);   /* was often 1120–1400px; raise to taste */
}

/* =========================
   HERO – manual controls
   Put this at the very end of your CSS
   ========================= */
:root{
  /* HEIGHT & LAYOUT */
  --hero-min-h: 85vh;      /* <- hero hoogte. bv 60vh, 70vh, 85vh */
  --hero-gap: 80px;        /* ruimte onder de hero tot de volgende sectie */
  --hero-max-w: 1100px;    /* maximale breedte van het tekstblok */

  /* TEXT VERTICAL SHIFT (copy omhoog/omlaag) */
  --hero-shift: -50px;       /* positief = omhoog, negatief = omlaag (bv 24px of -16px) */

  /* IMAGE CROP (verticale positie van de achtergrondafbeelding) */
  --hero-bg-y: 40%;        /* 0% = top, 50% = center, 100% = bottom */

  /* FADE THICKNESS (boven → wit) */
  --hero-fade-a: 22%;      /* waar de fade start (transparant) */
  --hero-fade-b: .85;      /* opaciteit in het midden van de fade */
  --hero-fade-c: 96%;      /* waar het volledig wit is */
}

/* Hero container (overrides earlier hero background if present) */
.hero{
  min-height: var(--hero-min-h);
  padding-top: clamp(24px, 4vw, 56px);   /* kleine bovenmarge binnen de hero */
  padding-bottom: var(--hero-gap);

  /* Heroafbeelding + fade met “knoppen” hierboven */
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0) var(--hero-fade-a),
      rgba(255,255,255,var(--hero-fade-b)) 62%,
      #ffffff var(--hero-fade-c)
    ),
    url("../img/site-hero2.jpeg") center var(--hero-bg-y) / cover no-repeat !important;
}

/* Center het textblok en beperk de breedte voor mooie leesbaarheid */
.hero .hero-copy{
  max-width: var(--hero-max-w);
  margin-inline: auto;
  text-align: center;
  transform: translateY(calc(-1 * var(--hero-shift))); /* omhoog/omlaag */
}

/* Zorg dat klikken op “Bekijk functies” (#features) netjes onder de hero uitkomt */
#features{
  scroll-margin-top: clamp(80px, var(--hero-gap) + 24px, 140px);
}

/* =========================
   HERO – centeren + titel/lead afstand
   (plak helemaal onderaan je CSS)
   ========================= */
:root{
  /* Ruimte tussen titel en ondertitel (lead) */
  --hero-title-gap: 20px;     /* maak groter of kleiner naar smaak */
}

/* 1) Hero in één kolom en inhoud centreren */
.hero .hero-grid{
  display: grid !important;
  grid-template-columns: 1fr !important;   /* één kolom zodat de copy in het midden komt */
  justify-items: center !important;        /* horizontaal centreren */
  align-items: start;                      /* bovenaan starten (gebruik 'center' als je alles wilt centreren) */
}

/* 2) Kopieblok daadwerkelijk centreren en netjes begrenzen */
.hero .hero-copy{
  max-width: var(--hero-max-w, 1100px);
  margin-inline: auto !important;
  text-align: center !important;
  justify-self: center !important;
  /* behoudt je verticale fine-tune uit eerdere snippet */
  transform: translateY(calc(-1 * var(--hero-shift, 0px))) !important;
  display: flex;
  flex-direction: column;
  align-items: center;        /* centreert ook de knoppen netjes */
}

/* 3) Ruimte tussen titel en lead */
.hero .hero-title{
  margin: 0 0 var(--hero-title-gap) 0 !important;
}

/* 4) Lead beter leesbaar in de breedte en gecentreerd */
.hero .hero-lead{
  max-width: 62ch;            /* fijne leesbreedte */
  margin-inline: auto;
}

/* 5) CTA-knop(pen) onder de lead ook centreren */
.hero .hero-ctas{
  justify-content: center !important;
}

/* ========== HERO CTA – groter + gecentreerd ========== */
:root{
  /* Knop-instellingen die je eenvoudig kunt tweaken */
  --hero-cta-h:       62px;   /* hoogte van de knop */
  --hero-cta-font:    18px;   /* lettergrootte */
  --hero-cta-xpad:    40px;   /* horizontale padding */
  --hero-cta-radius:  18px;   /* afgeronde hoeken */
}

/* Zorg dat de CTA’s in de hero altijd centreren */
.hero .hero-ctas{
  display: flex;
  justify-content: center !important;
  align-items: center;
  gap: 12px;
}

/* Maak specifiek de 'Bekijk functies' knop groter en mooi */
#btnFeatures{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--hero-cta-h) !important;
  padding: 0 var(--hero-cta-xpad) !important;
  font-size: var(--hero-cta-font) !important;
  font-weight: 800;
  border-radius: var(--hero-cta-radius) !important;
  margin-inline: auto;                 /* fallback centreren */
  box-shadow: 0 14px 28px rgba(47,128,255,.35);
  transform: translateZ(0);
}

/* Hover/active voor nét wat meer leven */
#btnFeatures:hover{ 
  filter: brightness(1.07);
  transform: translateY(-1px);
}
#btnFeatures:active{
  transform: translateY(0);
  filter: brightness(0.98);
}

/* Iets compacter op mobiel */
@media (max-width: 640px){
  :root{
    --hero-cta-h:     56px;
    --hero-cta-font:  17px;
    --hero-cta-xpad:  24px;
  }
}

/* --- Centreer CTA, ongeacht de wrapper --- */
.hero-ctas,
.hero-cta,
.hero-cta .container{
  display: flex;
  justify-content: center;   /* horizontaal centreren */
  align-items: center;       /* verticaal centreren (evt. niet nodig) */
  width: 100%;
}

/* fallback: als er nog iets overschrijft, dwing de knop zelf naar het midden */
#btnFeatures{
  display: inline-flex;
  margin: 0 auto;            /* blok/inline-flex -> center in parent */
}

/* Eventuele layout die het blok links zet uitschakelen */
.hero-cta .container > * {
  margin-left: 0;
}

/* 1) Extra ruimte tussen de knop en de volgende sectie */
.hero-cta{
  padding-bottom: 160px;          /* ↑ vergroot/deze afstand (120–200px werkt mooi) */
}
@media (max-width: 900px){
  .hero-cta{ padding-bottom: 110px; }
}

/* 2) Eigen achtergrond + fijne ‘landing’ voor de sectie ‘Wat kun je ermee?’ */
#functies{
  /* zachte, merk-achtige achtergrond (heel licht blauw) */
  background: linear-gradient(180deg, var(--blue-50) 0%, #ffffff 70%);
  /* prettige lucht aan boven- en onderzijde van de sectie */
  padding: 56px 0 64px;
  /* als je er via de knop naartoe scrolt: nét onder de (sticky) header uitkomen */
  scroll-margin-top: 96px;
  position: relative;
}

/* optioneel: een subtiele ‘fade’ tussen hero en deze sectie */
#functies::before{
  content:"";
  position:absolute; left:0; right:0; top:-24px; height:24px;
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, var(--blue-50) 100%);
  pointer-events:none;
}

/* de titel en lead blijven gecentreerd */
#functies .h2{ text-align:center; margin: 0 auto 10px; }
#functies .lead{ text-align:center; margin: 8px auto 24px; max-width: 900px; }

/* Hero ondertitel: iets lager en wat groter */
.hero .hero-lead{
  /* meer ruimte t.o.v. de titel */
  margin-top: 50px;                 /* 24–36px werkt mooi, kies wat je fijn vindt */
  margin-bottom: -130px;

  /* iets groter, met fijne schaal op grote schermen */
  font-size: clamp(18px, 1.1vw + 12px, 22px);
  line-height: 1.6;
}

/* optioneel: op mobiel iets compacter */
@media (max-width: 720px){
  .hero .hero-lead{
    margin-top: 18px;
    font-size: 17px;
    line-height: 1.55;
  }
}

/* Grid: links tekst, rechts screenshot (desktop) */
#functies .feature-grid{
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 28px;
  align-items: center;
}

/* Container voor de screenshot */
#functies .feature-shot{
  max-width: 620px;                /* pas gerust aan */
  justify-self: center;            /* center in de kolom */
}

/* Kaart-achtige omlijsting met gradient rand en zachte schaduw */
#functies .feature-shot .shot-card{
  position: relative;
  border-radius: 18px;
  /* mooie, subtiele gradient-rand */
  background:
    linear-gradient(#ffffff, #ffffff) padding-box,
    linear-gradient(135deg, #d8e7ff, #2f80ff 60%, #0a2371) border-box;
  border: 1px solid transparent;
  box-shadow:
    0 10px 30px rgba(10,35,113,.12),      /* buitenste schaduw */
    0 2px 0 rgba(0,0,0,.02);               /* heel subtiele base */
  transition: transform .2s ease, box-shadow .2s ease;
  padding: 8px;                            /* ruimte tussen rand en afbeelding */
}

/* Hover-effect voor net wat leven */
#functies .feature-shot .shot-card:hover{
  transform: translateY(-3px);
  box-shadow:
    var(--shadow-soft);
}

/* Afbeelding zelf binnen de kaart */
#functies .feature-shot img{
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
  background:#fff;
}

/* Klein hoekaccent (optioneel) */
#functies .feature-shot .corner{
  position: absolute; top: 0; right: 0;
  width: 44px; height: 44px;
  border-top-right-radius: 18px;
  pointer-events: none;
  background:
    linear-gradient(135deg, rgba(47,128,255,.25), rgba(147,197,255,0) 70%);
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}

/* Onderschrift */
#functies .feature-shot figcaption{
  color: var(--ink-500);
  font-size: 14px;
  text-align: center;
  margin-top: 10px;
}

/* Responsief: onder 980px alles onder elkaar, screenshot boven */
@media (max-width: 980px){
  #functies .feature-grid{
    grid-template-columns: 1fr;
    gap: 18px;
  }
  #functies .feature-shot{ order: -1; }
  #functies .feature-shot{ max-width: 100%; }
}

/* Twee kolommen op desktop */
#functies .feature-grid{
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;   /* links iets breder dan rechts */
  gap: 32px;
  align-items: start;
}

/* voorkom overflow-issues */
#functies .feature-copy,
#functies .feature-shot{ min-width: 0; }

/* screenshot mooi rechts uitlijnen */
#functies .feature-shot{ justify-self: end; max-width: 720px; width: 100%; }

/* kaartje met gradient-rand & schaduw */
#functies .feature-shot .shot-card{
  position: relative;
  border-radius: 18px;
  background:
    linear-gradient(#fff,#fff) padding-box,
    linear-gradient(135deg,#d8e7ff,#2f80ff 60%,#0a2371) border-box;
  border: 1px solid transparent;
  box-shadow: var(--shadow-soft);
  padding: 8px;
  transition: transform .2s ease, box-shadow .2s ease;
}
#functies .feature-shot .shot-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 16px 38px rgba(10,35,113,.16), 0 2px 0 rgba(0,0,0,.03);
}
#functies .feature-shot img{
  display:block; width:100%; height:auto; border-radius:14px; background:#fff;
}
#functies .feature-shot .corner{
  position:absolute; top:0; right:0; width:44px; height:44px;
  border-top-right-radius:18px; pointer-events:none;
  background:linear-gradient(135deg, rgba(47,128,255,.25), rgba(147,197,255,0) 70%);
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}
#functies .feature-shot figcaption{
  color:var(--ink-500); font-size:14px; text-align:center; margin-top:10px;
}

/* Mobiel/tablet: onder elkaar, screenshot boven */
@media (max-width: 980px){
  #functies .feature-grid{ grid-template-columns: 1fr; gap: 18px; }
  #functies .feature-shot{ order:-1; justify-self: center; max-width: 100%; }
}

/* === Visuele band voor de sectie === */
.section-tools{
  padding-block: 56px 68px;
  background:
    radial-gradient(1200px 500px at 10% -10%, rgba(47,128,255,.06), transparent 60%),
    linear-gradient(180deg, #f6faff 0%, #ffffff 70%);
}
.section-tools .container{
  width: min(1260px, 94vw);
}

/* Kop gecentreerd met subtiele eyebrow */
.section-tools .section-head{
  text-align:center;
  margin-bottom: 22px;
}
.section-tools .section-head .eyebrow{
  display:inline-block;
  font-weight:700;
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color: var(--blue-700);
  background: #eaf2ff;
  border:1px solid #dfe9ff;
  padding:6px 10px;
  border-radius: 999px;
  margin-bottom: 10px;
}

/* Twee kolommen: links bullets, rechts screenshot */
.section-tools .feature-grid{
  display:grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 36px;
  align-items: center;            /* verticaal mooi in het midden */
}

/* Bulletlijst met check-iconen */
.section-tools .tick-list{
  margin:0;
  padding:0;
  list-style:none;
  display:grid;
  gap: 12px;
  font-size: 18px;
  line-height: 1.55;
}
.section-tools .tick-list li{
  position:relative;
  padding-left: 32px;
}
.section-tools .tick-list li::before{
  content:"";
  position:absolute; left:0; top:.25em;
  width:20px; height:20px;
  border-radius:50%;
  background: linear-gradient(135deg, #32C766, #14A24B);
  /* wit 'check' via mask */
  -webkit-mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9.55 17.54L4.8 12.8l1.4-1.41l3.35 3.35l7.25-7.25l1.41 1.41z'/%3E%3C/svg%3E")
    center / 14px 14px no-repeat;
  mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9.55 17.54L4.8 12.8l1.4-1.41l3.35 3.35l7.25-7.25l1.41 1.41z'/%3E%3C/svg%3E")
    center / 14px 14px no-repeat;
}

/* Screenshot-kaart met fraaie rand en hover */
.section-tools .feature-shot{ justify-self:end; max-width: 720px; width:100%; }
.section-tools .feature-shot .shot-card{
  position:relative;
  border-radius: 18px;
  background:
    linear-gradient(#fff,#fff) padding-box,
    linear-gradient(135deg,#d8e7ff,#2f80ff 60%,#0a2371) border-box;
  border: 1px solid transparent;
  box-shadow: 0 12px 34px rgba(10,35,113,.12), 0 2px 0 rgba(0,0,0,.02);
  padding: 10px;
  transition: transform .18s ease, box-shadow .18s ease;
}
.section-tools .feature-shot .shot-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 44px rgba(10,35,113,.18), 0 2px 0 rgba(0,0,0,.03);
}
.section-tools .feature-shot img{
  display:block; width:100%; height:auto; border-radius: 14px; background:#fff;
}
.section-tools .feature-shot .corner{
  position:absolute; top:0; right:0; width:46px; height:46px;
  border-top-right-radius: 18px; pointer-events:none;
  background: linear-gradient(135deg, rgba(47,128,255,.25), rgba(147,197,255,0) 70%);
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}
.section-tools .feature-shot figcaption{
  color: var(--ink-500); font-size: 14px; text-align:center; margin-top: 10px;
}

/* Responsive: onder elkaar met fijne ruimte */
@media (max-width: 980px){
  .section-tools .feature-grid{ grid-template-columns: 1fr; gap: 24px; }
  .section-tools .feature-shot{ justify-self:center; max-width: 100%; }
  .section-tools .tick-list{ font-size: 17px; }
}

/* Handmatige verticale offset voor de bulletlijst
   positief = lager, negatief = hoger */
.section-tools .feature-copy{
  margin-top: var(--tools-list-offset, 50px);
}

/* (optioneel) aparte offset voor de screenshot rechts */
.section-tools .feature-shot{
  margin-top: var(--tools-shot-offset, 10px);
}

/* ——— Sectie ‘Duurzame daken’ ——— */
.roofs { 
  background: linear-gradient(180deg, #f7fafc 0%, #ffffff 80%);
  border-top: 1px solid var(--border);
}
.roofs-grid{
  display:grid;
  grid-template-columns: 1.2fr .8fr;    /* tekst / visual */
  gap: 28px;
  align-items: start;
}
#dakopties .eyebrow{
   display:inline-block;
  font-weight:700;
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color: var(--blue-700);
  background: #eaf2ff;
  border:1px solid #dfe9ff;
  padding:6px 10px;
  border-radius: 999px;
  margin-bottom: 10px;
}

/* Kaartjes */
.roof-cards{
  margin-top: 12px;
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.roof-card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: 14px 14px 10px;
}
.roof-card h3{ margin:0 0 6px; color: var(--ink-700); }
.roof-bullets{ margin: 6px 0 10px 1.1rem; }
.roof-bullets li{ margin: 4px 0; color: var(--ink-600); }

/* Tags */
.tags{ display:flex; flex-wrap:wrap; gap:6px; }
.tag{
  font-size:12px; font-weight:700;
  padding:4px 8px; border-radius:999px;
  border:1px solid var(--border);
  background:#fff;
}
.tag-nature{ color:#2f7d32; background:#e7f4ea; border-color:#cfe9d6; }
.tag-water { color:#0f5cbd; background:#e6f1ff; border-color:#d8e7ff; }
.tag-cool  { color:#0a2371; background:#ecf4ff; border-color:#d8e7ff; }
.tag-energy{ color:#b45309; background:#fff2e1; border-color:#ffe3c4; }

/* Visual rechts */
.roofs-visual{ margin:0; align-self:center; }
.roofs-img{
  width: 100%;
  height: auto;
  border-radius: 28px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}

/* voetnoot */
.roofs .footnote{
  margin-top: 8px;
  color: var(--ink-500);
  font-size: 13px;
}

/* Responsief */
@media (max-width: 1080px){
  .roofs-grid{ grid-template-columns: 1fr; }
  .roofs-visual{ order:-1; }     /* visual boven tekst op mobiel? -> haal weg als je dat niet wilt */
}
@media (max-width: 720px){
  .roof-cards{ grid-template-columns: 1fr; }
}

/* kleine header met thumbnail + titel */
.roof-head{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:6px;
}
.roof-thumb{
  width:56px; height:56px;
  object-fit: cover;
  border-radius: 12px;
  border:1px solid var(--border);
  box-shadow: var(--shadow-soft);
}

/* optioneel: iets compacter op mobiel */
@media (max-width:720px){
  .roof-thumb{ width:52px; height:52px; }
}

/* 2 kolommen, gecentreerd */
.roof-grid.two-up{
  max-width: 1200px;          /* pas aan naar smaak (1100–1280) */
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  align-items: stretch;
}

/* Grote kaart: image links, tekst rechts */
.roof-card.big{
  background: var(--surface);
  border:1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow-soft);
  padding: 22px;
  display: grid;
  grid-template-columns: 320px 1fr;  /* ← afbeelding | tekst */
  gap: 22px;
  align-items: center;
}

.roof-figure{ margin:0; }
.roof-photo{
  width: 100%;
  height: 220px;              /* pas hoogte aan naar smaak */
  object-fit: cover;
  border-radius: 14px;
  border:1px solid var(--border);
  box-shadow: var(--shadow);
}

/* Tekstkant */
.roof-content h3{ margin:0 0 10px; }
.roof-bullets{ margin:0 0 12px 18px; }
.roof-bullets li{ margin:6px 0; }

/* Tags */
.tags{ display:flex; flex-wrap:wrap; gap:8px; }
.tag{
  display:inline-flex; align-items:center;
  padding:6px 10px; border-radius:999px;
  font-size:13px; font-weight:700;
  background:#f1f5ff; color:var(--blue-800);
}
.tag-nature{ background:#eaf7ec; color:#1f7a39; }
.tag-water { background:#eaf3ff; color:#134b9c; }
.tag-cool  { background:#eef7ff; color:#0a5fa1; }
.tag-energy{ background:#fff3d6; color:#9a6a00; }

/* Responsief: onder elkaar op small screens */
@media (max-width: 980px){
  .roof-grid.two-up{ grid-template-columns: 1fr; }
  .roof-card.big{ grid-template-columns: 1fr; }
  .roof-photo{ height: 200px; }
}

/* Plaats afbeelding rechts, tekst links */
.roof-card.big{
  display: grid;
  grid-template-columns: 1fr 320px; /* tekst | afbeelding */
  gap: 22px;
  align-items: center;
}

/* wissel de volgorde in de kaart */
.roof-content{ order: 1; }
.roof-figure { order: 2; }

/* (rest zoals eerder) */
.roof-photo{
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: 14px;
  border:1px solid var(--border);
  box-shadow: var(--shadow);
}

@media (max-width: 980px){
  .roof-card.big{
    grid-template-columns: 1fr;
  }
  .roof-content{ order: 2; }  /* op mobiel: eerst foto, dan tekst? Pas aan naar wens */
  .roof-figure { order: 1; }
}

/* ===== Roof options grid – 3 kolommen, beeld rechts, compact ===== */

/* Container met kolommen (3 op desktop) */
.roof-grid{
  /* default waarden; kun je per sectie in HTML overschrijven */
  --roof-cols: 3;
  --roof-img-w: 170px;            /* breedte van het beeld rechts */
  --roof-font-scale: 0.93;        /* 1 = normaal; <1 = compacter */

  display: grid;
  grid-template-columns: repeat(var(--roof-cols), minmax(0,1fr));
  gap: 14px;
  align-items: stretch;
}

/* Backwards-compat: als je nog class="two-up" gebruikt */
.roof-grid.two-up{ --roof-cols: 2; }

/* Individuele kaart */
.roof-card{
  display: grid;
  grid-template-columns: 1fr var(--roof-img-w); /* tekst | beeld */
  align-items: center;
  gap: 14px;

  background: var(--surface, #fff);
  border: 1px solid var(--border, #e7ecf5);
  border-radius: 14px;
  padding: 14px;
  box-shadow: var(--shadow-soft, 0 8px 24px rgba(10,35,113,.10));

  /* typografie iets compacter zonder transforms (blijft scherp) */
  font-size: calc(1rem * var(--roof-font-scale));
}

/* Tekst links */
.roof-content{ grid-column: 1; }

/* Beeld rechts */
.roof-figure{
  grid-column: 2;
  align-self: stretch;      /* laat beeld de kaart-hoogte vullen */
  border-radius: 12px;
  overflow: hidden;
}
.roof-photo{
  width: 100%;
  height: 100%;
  object-fit: cover;        /* consistente uitsnede */
  display: block;
}

/* Kop en bullets binnen de kaart */
.roof-title{
  margin: 0 0 6px;
  font-size: 1.05rem;       /* valt mee met --roof-font-scale */
  font-weight: 800;
}
.roof-bullets{
  margin: 6px 0 0;
  padding-left: 1.1rem;
  line-height: 1.45;
}

/* Responsief: 2 kolommen op medium, 1 kolom op mobiel */
@media (max-width: 1200px){
  .roof-grid{ --roof-cols: 2; }
}
@media (max-width: 720px){
  .roof-grid{ --roof-cols: 1; }
  .roof-card{ grid-template-columns: 1fr; } /* stapel inhoud */
  .roof-figure{ grid-column: 1; }           /* zet beeld onder/bover tekst */
}

/* =========================
   DUURZAME DAKEN – CARDS
   ========================= */

/* 3 across by default, tidy gap */
#dakopties .roof-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
}

/* Card container */
#dakopties .roof-card {
  display: flex;
  flex-direction: column;             /* stack image on top, text below */
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow-soft);
  overflow: hidden;                   /* clip image nicely to radius */
}

/* Make sure any previous "big" or horizontal styles are overridden */
#dakopties .roof-card.big { flex-direction: column; }

/* Image container: consistent size for ALL cards */
#dakopties .roof-card .roof-figure {
  width: 100%;
  aspect-ratio: 16 / 9;               /* choose 4/3 if you prefer: 4 / 3 */
  overflow: hidden;
  background: #f5f8ff;                /* subtle fallback */
}

/* Image fills the box neatly */
#dakopties .roof-card .roof-photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;                   /* crop to fill, consistent look */
}

/* Text area */
#dakopties .roof-card .roof-content {
  padding: 16px 18px 18px;
}

/* Smaller, tighter typography so it fits better */
#dakopties .roof-card .roof-content h3 {
  margin: 0 0 .4rem;
  font-size: 1.05rem;                  /* was larger */
  line-height: 1.25;
  color: var(--ink-900);
}

#dakopties .roof-bullets {
  /* reset and tighten */
  margin: 0;
  padding-left: 1.05rem;
  font-size: .92rem;                   /* slightly smaller */
  line-height: 1.45;
}

#dakopties .roof-bullets li { margin: .28rem 0; }

/* Tags smaller & tidy */
#dakopties .tags { display: flex; gap: 6px; margin-top: .6rem; flex-wrap: wrap; }
#dakopties .tag  { font-size: .72rem; padding: .28rem .52rem; }

/* Responsiveness */
@media (max-width: 1100px) {
  #dakopties .roof-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
  #dakopties .roof-grid { grid-template-columns: 1fr; }
  #dakopties .roof-card .roof-content h3 { font-size: 1rem; }
  #dakopties .roof-bullets { font-size: .9rem; }
}

/* ========= Dakopties: kaart en afbeelding onderaan ========== */
:root{
  /* 1 waarde regelen = meteen effect overal */
  --roof-img-h: 160px;            /* vaste hoogte van elke afbeelding */
}

/* =========================
   CONTACT FORM
   ========================= */
.contact-grid{
  display:grid;
  grid-template-columns: 1fr 320px;
  gap:20px;
  align-items:start;
  margin-top:12px;
}
.contact-card{ padding:18px; }
.contact-card .lead{ margin-bottom:12px; }
.field{ display:block; margin-bottom:12px; }
.field span{ display:block; font-weight:700; margin-bottom:6px; color:var(--ink-700); }
.field input[type="text"], .field input[type="email"], .field textarea{
  width:100%; padding:12px 14px; border-radius:10px; border:1px solid var(--border);
  background:var(--surface); color:var(--ink-700); font-size:15px;
}
.field textarea{ min-height:120px; resize:vertical; }
.form-row{ display:grid; grid-template-columns: 1fr 1fr; gap:12px; }
.form-foot{ display:flex; align-items:center; gap:12px; margin-top:6px; }
.muted{ color:var(--ink-400); }
.success{ color: #0f7a3a; font-weight:700; }
.error{ color: #9b2c2c; font-weight:700; }

@media (max-width:900px){
  .contact-grid{ grid-template-columns: 1fr; }
  .form-row{ grid-template-columns: 1fr; }
}

/* Grid: items even groot per rij, dus zelfde kaart-hoogte */
#dakopties .roof-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;            /* laat kaarten de hele rij-hoogte pakken */
}

/* Kaart = flexkolom zodat we de afbeelding naar onderen kunnen duwen */
#dakopties .roof-card{
  display: flex;
  flex-direction: column;
  height: 100%;                    /* vul de grid-rij volledig */
}

/* Tekst mag groeien/krimpen, afbeelding blijft onderaan */
#dakopties .roof-content{
  flex: 1 1 auto;                  /* neemt alle resterende ruimte in */
  padding: 14px 14px 10px;
}

/* ↓ Dit “plakt” de afbeelding altijd onderaan de kaart */
#dakopties .roof-figure{
  margin-top: auto;                /* push naar onderkant van de kaart */
  height: var(--roof-img-h);       /* overal exact dezelfde hoogte */
  overflow: hidden;
  border-top: 1px solid var(--border);
  background: #f5f8ff;             /* subtiele fallback */
}

#dakopties .roof-photo{
  width: 100%;
  height: 100%;
  object-fit: cover;               /* vult de box strak zonder uitrekken */
  display: block;
}

/* (Optioneel) kleiner op tablet/mobiel */
@media (max-width: 1100px){
  #dakopties .roof-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  :root{ --roof-img-h: 200px; }
}
@media (max-width: 680px){
  #dakopties .roof-grid{ grid-template-columns: 1fr; }
  :root{ --roof-img-h: 180px;}
}

/* Footer: logo mag NIET vierkant zijn */
.site-footer .brand,
.site-footer .brand--footer {
  display: flex;
  align-items: center;
  gap: 12px;                 /* ruimte tussen logo en tekst */
  min-width: 180px;          /* optioneel: voorkomt insnoeren */
}

/* Als je in de footer <img> gebruikt voor het logo */
.site-footer .brand img,
.site-footer .brand-icon {
  height: 40px;              /* kies je hoogte */
  width: auto !important;    /* laat de breedte meeschalen */
  object-fit: contain;       /* nooit croppen */
  border-radius: 0;          /* geen afgeronde hoeken op het logo */
  box-shadow: none;
}

/* Als je een 'mark' div met background gebruikt */
.site-footer .brand-mark {
  width: auto !important;
  height: 40px;
  background-size: contain !important;
  background-position: left center !important;
  background-repeat: no-repeat !important;
  box-shadow: none;
}

/* ===== Alleen witruimte voor content-secties ===== */
:root{
  /* Pas deze twee waarden aan naar smaak */
  --section-padding-y: 88px;  /* binnenruimte in elke sectie (boven/onder) */
  --section-gap:       48px;  /* extra ruimte tussen opeenvolgende secties */
}

.section{
  padding-block: var(--section-padding-y);
}

/* extra ruimte tussen secties (buiten de sectie zelf) */
.section + .section{
  margin-top: var(--section-gap);
}

/* Optioneel: op mobiel iets compacter */
@media (max-width: 720px){
  :root{
    --section-padding-y: 64px;
    --section-gap:       32px;
  }
}

/* ===== Header: logo verder links, knoppen verder rechts ===== */

/* Geef de headercontainer bijna de volle breedte en kleine zijkanten */
.site-header .container{
  width: min(1600px, 98vw);     /* maak breder dan je standaard container */
  max-width: none;              /* voorkom dat de algemene max-width grijpt */
  padding-inline: clamp(8px, 2vw, 18px); /* smalle maar responsieve gutters */
}

/* Zet de inhoud uit elkaar (logo links, links/rechts er tegenaan) */
.site-header .nav{
  display: flex;
  align-items: center;
  justify-content: space-between;  /* verdeel over volledige breedte */
  gap: 16px;
}

/* Logo echt tegen de linkerrand (geen extra marge) */
.site-header .brand{
  margin-left: 0 !important;
}

/* Navigatielinks volledig naar de rechterkant duwen */
.site-header .nav-links{
  margin-left: auto !important;
  padding-right: clamp(8px, 2vw, 18px);  /* subtiele ademruimte aan de rechterkant */
}

/* Zorg dat laatste knop geen extra marge heeft */
.site-header .nav-links > a:last-child{
  margin-right: 0 !important;
}

/* ===== Visie-sectie ===== */
.vision{
  background: linear-gradient(180deg, var(--blue-50, #f6faff) 0%, #ffffff 60%);
  padding-top: clamp(36px, 6vw, 72px);
  padding-bottom: clamp(28px, 5vw, 56px);
}

/* Zelfde kopstijl als productsectie, maar gecentreerd */
.section-head.center{
  text-align: center;
  margin-bottom: clamp(16px, 3vw, 24px);
}
.section-head.center .eyebrow{
  margin-inline: auto;    /* maakt de pill gecentreerd */
}

/* Layout */
.vision-grid{
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(16px, 3vw, 28px);
  align-items: center;
}

.vision-art.placeholder .ph-inner{
  /* Zorgt voor een nette verhouding en centreert tekst */
  aspect-ratio: 16/10;
  min-height: 220px;             /* fallback bij browsers zonder aspect-ratio */
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-400, #6b7a94);
  font-weight: 700;
  letter-spacing: .2px;
}

/* Responsief */
@media (max-width: 980px){
  .vision-grid{ grid-template-columns: 1fr; }
  .vision-art.placeholder{ order: -1; }  /* visual bovenaan op mobiel */
}

/* Zelfde pill-styling voor de 'Visie' eyebrow als de 'PRODUCT' eyebrow */
#visie .section-head .eyebrow{
    display:inline-block;
  font-weight:700;
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color: var(--blue-700);
  background: #eaf2ff;
  border:1px solid #dfe9ff;
  padding:6px 10px;
  border-radius: 999px;
  margin-bottom: 10px;
}


/* gecentreerd houden onder de titel */
#visie .section-head.center .eyebrow{
  margin-inline: auto;
}

/* pas de waarde aan aan jouw header-hoogte */
#visie { scroll-margin-top: 60px; }

/* Brand color used for subtle focus ring */
:root { --brand: #0a2371; }

/* Container */
.compare{
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  --pos: 50%;
  --handle-size: 22px;
  --divider: 2px;
}

/* Fill the box with both images */
.compare > img.before,
.compare .after,
.compare .after img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}

.compare > img.before,
.compare .after img{
  object-fit:cover;
  object-position:center;
  pointer-events:none;
}

/* AFTER sits below; BEFORE is clipped to the left side */
.compare .after{ z-index:1; }
.compare > img.before{
  z-index:2;
  clip-path: polygon(0 0, var(--pos) 0, var(--pos) 100%, 0 100%);
}

/* Range (accessible, invisible) */
.compare .slider{
  position:absolute; inset:0;
  width:100%; height:100%;
  appearance:none; background:transparent; outline:none;
  z-index:4; cursor: ew-resize;
}
.compare .slider::-webkit-slider-thumb{ appearance:none; width:0; height:0; }
.compare .slider::-moz-range-thumb{ width:0; height:0; border:0; }

/* Divider + knob (cleaner design) */
.compare .handle{
  position:absolute; top:0; bottom:0;
  left:var(--pos); transform:translateX(-50%);
  width:var(--divider);
  background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.15));
  box-shadow: 0 0 0 1px rgba(255,255,255,.6) inset;
  z-index:3;
}
.compare .handle::before{
  content:"";
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:var(--handle-size); height:var(--handle-size);
  border-radius:50%;
  background:#fff;
  box-shadow:
    0 1px 3px rgba(0,0,0,.28),
    0 0 0 1px rgba(0,0,0,.08) inset;
  transition: box-shadow .15s, transform .15s;
}

/* Hover/active */
.compare:hover .handle::before{ transform:translate(-50%,-50%) scale(1.03); }

/* Keyboard focus ring that matches the site */
.compare .slider:focus-visible + .handle::before{
  box-shadow:
    0 0 0 2px #fff,
    0 0 0 5px color-mix(in srgb, var(--brand) 30%, transparent),
    0 1px 3px rgba(0,0,0,.28);
}

/* Keep slider inside card width */
.demo-card{ min-width:0; overflow:hidden; }
.demo-card .compare{ width:100%; max-width:100%; box-sizing:border-box; }

/* Double-arrow icon inside the knob */
.compare .handle::after{
  content:"";
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:16px; height:16px;              /* arrow size */
  background-repeat:no-repeat;
  background-position:center;
  background-size:16px 16px;
  /* SVG icon (left-right arrow). Change %230a2371 to another hex to recolor */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12h12M10 8l-4 4 4 4M14 8l4 4-4 4' fill='none' stroke='%230a2371' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  opacity:.9;
  pointer-events:none;
}

.brand-text{
  font-family: var(--ui-font);
  font-size: 20px;
  font-weight: 600;          /* try 600 first; if still heavy, use 500 */
  letter-spacing: 0.25px;    /* tiny spacing makes it read lighter */
  text-transform: uppercase; /* if you need BREVOS in caps */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* layout of this section */
.usecases-grid{
  display: grid;
  gap: 40px;
  align-items: start;
}
@media (min-width: 992px){
  .usecases-grid{
    grid-template-columns: 1fr minmax(320px, 520px);
  }
}

/* the card */
.card.glass{
  background: #F3F7FF;                 /* light blue to match the image */
  border: 1px solid rgba(0, 66, 153, .08);
  border-radius: 20px;
  box-shadow: 0 12px 32px rgba(10, 31, 68, .08);
  padding: 24px;
}

/* title inside the card */
.card.glass h3{
  margin: 0 0 16px;
}

/* the image */
.card-image{
  display: block;
  width: 100%;
  max-width: clamp(260px, 48vw, 460px); /* ⬅️ limit size */
  height: auto;
  margin: 8px auto 0;
  border-radius: 16px;
}

/* Layout */
.usecases-grid{
  display: grid;
  gap: 48px;
  align-items: start;
}

/* ✅ Constrain the card column on large screens */
@media (min-width: 992px){
  .usecases-grid{
    grid-template-columns: minmax(0,1fr) minmax(300px, 440px);
    /* left copy | right card (max 440px) */
  }
}

/* Card */
.card.glass{
  background: #F3F7FF;
  border: 1px solid rgba(0,66,153,.08);
  border-radius: 20px;
  box-shadow: 0 12px 32px rgba(10,31,68,.08);
  padding: 24px;
}

/* Title spacing */
.card.glass h3{ margin: 0 0 16px; }

/* Image scales to the card width */
.card-image{
  display: block;
  width: 100%;
  height: auto;
  max-height: 520px;          /* optional: cap the height too */
  object-fit: contain;        /* keep full image visible */
  border-radius: 16px;
  margin: 4px 0 0;
}

/* Stack on small screens */
@media (max-width: 991px){
  .usecases-grid{ grid-template-columns: 1fr; }
}

/* Center headings in the Dakopties section */
#dakopties .eyebrow{
  display:block;           /* lets the pill center itself */
  margin: 0 auto 8px;             /* center + small gap */
  width: max-content;
}

#dakopties .h2{
  margin: 6px auto 10px;          /* center block + spacing */
  text-align:center;
}

#dakopties .lead{
  text-align:center;
  max-width: 68ch;                /* comfortable line length */
  margin: 8px auto 28px;          /* center + spacing below */
}