:root{
  --bg:#f4f8fb;            /* lichte zakelijke achtergrond */
  --text:#0f172a;          /* donker slate */
  --muted:#475569;         /* slate-600 */
  --primary:#0ea5a7;       /* teal-500 */
  --primary-600:#0d8f91;
  --header-grad-from:#0f172a;
  --header-grad-to:#1e293b;
  --card:#ffffff;
  --border:#e5e7eb;
  --radius:16px;
  --shadow:0 2px 6px rgba(0,0,0,.05);
}

/* Basis, mobile-first */
*{box-sizing:border-box}
html,body{height:100%}
body{ margin:0; font-family:Inter, Segoe UI, Arial, Helvetica, sans-serif; color:var(--text); background:#ffffff; line-height:1.65; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; }
img,svg,video{max-width:100%;height:auto;display:block}
.container{max-width:1100px;margin:0 auto;padding:0 16px}

/* Typografie schaal mee */
h1{font-size:clamp(1.6rem, 2.2vw + 1rem, 2.4rem);line-height:1.2;margin:.2rem 0 .5rem}
h2{font-size:clamp(1.2rem, 1.2vw + .9rem, 1.6rem);margin:0 0 .5rem}
h3{font-size:clamp(1rem, 1vw + .6rem, 1.25rem);margin:.2rem 0}
p,li{font-size:clamp(.95rem, .4vw + .8rem, 1.05rem)}

/* Navigatie: stapelt op mobiel, horizontaal op breed scherm */
nav{
  background:#fff;
  border-bottom:1px solid var(--border);
  position:sticky;top:0;z-index:50;
}
nav .nav-inner{
  display:flex;
  flex-wrap:wrap;             /* laat links doorlopen op tweede regel op mobiel */
  gap:8px 12px;
  align-items:center;
  justify-content:space-between;
  min-height:56px;
  padding:8px 0;
}
nav .brand{font-weight:700;letter-spacing:.2px}
nav a{
  color:var(--text);
  text-decoration:none;
  padding:8px 10px;
  border-radius:10px;
  display:inline-block;
}
nav a.active, nav a:hover{background:#f1f5f9}

/* Hero */
header.hero{
  background:linear-gradient(90deg,var(--header-grad-from),var(--header-grad-to));
  color:#fff;
  padding:48px 0;
  text-align:left;
}
header.hero p{margin:0;color:#e2e8f0}

/* Content */
main{padding:28px 0}
.section-title{margin:0 0 8px}
.lead{color:var(--muted);margin:0 0 20px}

/* Kaarten / contentblokken */
.prose, .card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:20px;
  box-shadow:var(--shadow);
}
.prose p{margin:0 0 14px}
.prose p:last-child{margin-bottom:0}
.prose a{font-weight:600}

/* Grid: 1 kolom mobiel, 2 kolommen op breed */
.grid{display:grid;gap:18px;grid-template-columns:1fr}
@media (min-width:900px){
  .grid{gap:20px;grid-template-columns:2fr 1fr}
}

/* Knoppen */
.btn{
  display:inline-block;
  padding:.75rem 1.1rem;
  background:var(--primary);
  color:#fff;
  border-radius:12px;
  text-decoration:none;
  transition:transform .06s ease, background .2s ease;
}
.btn:hover{background:var(--primary-600)}
.btn:active{transform:translateY(1px)}

/* Lijsten met groene vinkjes (universeel) */
ul.checklist{list-style:none;padding-left:0;margin:10px 0}
ul.checklist li{
  position:relative;
  padding-left:28px;
  margin-bottom:10px;
}
ul.checklist li::before{
  content:"✔";
  color:#16a34a;
  font-weight:700;
  position:absolute;left:0;top:0;
  line-height:1.2;
}

/* Tabel/overig veiligheidjes */
table{width:100%;border-collapse:collapse}
th,td{padding:10px;border-bottom:1px solid var(--border);text-align:left}
pre,code{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace}

/* Footer */
footer{
  background:#fff;
  border-top:1px solid var(--border);
  text-align:center;
  padding:16px;
  margin-top:36px;
  font-size:.95rem;
  color:var(--muted)
}

/* Extra tuning voor kleine schermen */
@media (max-width:520px){
  nav .nav-inner{gap:6px 8px}
  nav a{padding:7px 9px}
  .btn{width:100%;text-align:center}
  ul.checklist li{padding-left:24px;margin-bottom:8px}
}


/* == Forceer groene vinkjes in main == */
main ul, main ol{
  list-style: none !important;
  padding-left: 0 !important;
  margin: 10px 0;
}
main ul li, main ol li{
  position: relative;
  padding-left: 30px;
  margin-bottom: 10px;
}
main ul li::before, main ol li::before{
  /* ✔️ met tekst-rendering, overal zichtbaar */
  content: "\2714";
  color: #16a34a;
  font-weight: 800;
  position: absolute;
  left: 0;
  top: 0;
  line-height: 1.2;
}
@media (max-width:520px){
  main ul li, main ol li{ padding-left: 24px; margin-bottom: 8px }
}

/* Gouden euro-icoon voor prijzenpagina */
ul.eurolist {
  list-style: none;
  padding-left: 0;
  margin: 10px 0;
}
ul.eurolist li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 10px;
}
ul.eurolist li::before {
  content: "€";
  color: goldenrod;
  font-weight: 700;
  position: absolute;
  left: 0;
  top: 0;
  line-height: 1.2;
}
@media (max-width:520px){
  ul.eurolist li { padding-left: 24px; margin-bottom: 8px }
}

/* Contactformulier */
.contact-form .form-group{margin-bottom:14px}
.contact-form label{display:block;font-weight:600;margin-bottom:6px}
.contact-form input,.contact-form textarea{
  width:100%;padding:10px 12px;border:1px solid var(--border);
  border-radius:12px;background:#fff;outline:none
}
.contact-form input:focus,.contact-form textarea:focus{
  border-color: var(--primary); box-shadow: 0 0 0 3px rgba(14,165,167,.12);
}
.muted{color:var(--muted)}

/* === Vivid homepage add-ons === */
:root{
  --pink:#e11d48;   /* fuchsia/roze */
  --amber:#f59e0b;  /* goud/amber */
  --blue:#2563eb;   /* helder blauw */
  --teal:#0ea5a7;   /* bestaand teal (primary) */
}

/* Hero met kleurverloop + geometrisch SVG patroon */
.hero--vivid{
  position:relative;
  background: linear-gradient(120deg, #0f172a 0%, #1e293b 55%, #0ea5a7 110%);
  color:#fff;
  padding:72px 0 64px;
  overflow:hidden;
}
.hero--vivid .kicker{display:inline-block;background:rgba(255,255,255,.1);padding:6px 10px;border-radius:999px;font-weight:600;margin-bottom:10px}
.hero--vivid h1{margin:.2rem 0 .5rem;font-size:clamp(2rem, 3.6vw + .8rem, 3rem);line-height:1.15}
.hero--vivid p.lead{color:#e2e8f0;max-width:60ch;margin:0 0 18px}
.hero--vivid .cta{display:flex;gap:12px;flex-wrap:wrap}
.hero--vivid::after{
  content:"";
  position:absolute;inset:-20% -5% auto auto;height:120%;width:120%;
  background-image: url("data:image/svg+xml;utf8, \
  <svg xmlns='http://www.w3.org/2000/svg' width='900' height='700' viewBox='0 0 900 700'> \
    <g opacity='0.18'> \
      <rect x='520' y='40' width='180' height='180' fill='%23e11d48' rx='16'/> \
      <circle cx='620' cy='130' r='70' fill='%23f59e0b'/> \
      <polygon points='760,260 900,260 830,340' fill='%232563eb'/> \
      <polygon points='460,300 620,300 540,380' fill='%230ea5a7'/> \
      <rect x='620' y='360' width='180' height='180' fill='%23f59e0b' rx='16'/> \
      <circle cx='710' cy='450' r='70' fill='%23e11d48'/> \
    </g> \
  </svg>");
  background-repeat:no-repeat;
  background-size:contain;
  pointer-events:none;
}

/* Stats-balk onder hero */
.stats{
  background:#fff;border:1px solid var(--border);border-radius:16px;
  box-shadow:0 2px 6px rgba(0,0,0,.05);
  margin-top:-28px;padding:16px;
}
.stats .row{display:grid;gap:12px;grid-template-columns:1fr}
.stats .item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px}
.stats .dot{width:12px;height:12px;border-radius:50%}
.stats .pink .dot{background:var(--pink)}
.stats .amber .dot{background:var(--amber)}
.stats .blue .dot{background:var(--blue)}
.stats .label{font-weight:700}
@media(min-width:780px){
  .stats .row{grid-template-columns:repeat(3,1fr)}
}

/* Buttons varianten */
.btn.alt{background:var(--pink)}
.btn.alt:hover{background:#be123c}

/* Hero: blok-achtergrond rechts */
.hero--vivid{
  background: linear-gradient(120deg,#0f172a 0%,#1e293b 55%,#0ea5a7 110%), url("assets/hero-blocks.svg");
  background-repeat: no-repeat, no-repeat;
  background-position: left center, right center; /* gradient links, blokken rechts */
  background-size: cover, clamp(260px, 40vw, 560px);
}
.hero--vivid .container{
  /* ruimte aan rechterkant zodat tekst niet over blokken valt */
  padding-right: clamp(16px, 34vw, 420px);
}
@media (max-width: 900px){
  .hero--vivid{
    background-size: cover, 58vw;
    background-position: left center, right 20%;
  }
  .hero--vivid .container{ padding-right: 22vw; }
}
@media (max-width: 560px){
  .hero--vivid{
    background-size: cover, 66vw;
    background-position: left center, right 10%;
  }
  .hero--vivid .container{ padding-right: 12vw; }
}


/* Texture alleen achter content */
main{
  background: var(--bg) none;
  background-repeat: repeat;
}


/* === OVERRIDE: onderkant grijs weg === */
html, body { background:#fff !important; }
main       { background:none !important; }
footer     { background:#fff !important; border-top:1px solid var(--border) !important; }

/* Pastelblokken achtergrond voor Over ons */

.hero--pastel .container{
  padding-right: clamp(16px, 40vw, 500px);
}
@media (max-width: 768px){
  
  .hero--pastel .container{
    padding-right: 15vw;
  }
}
/* Pastelblokken achtergrond (Over ons) */
.hero--pastel{
  /* lichte achtergrond + grote pastelblokken aan de rechterkant */
  background:
    linear-gradient(120deg, #ffffff 0%, #f8fafc 100%) !important,
    url("assets/hero-blocks-light.svg") !important;
  background-repeat: no-repeat, no-repeat !important;
  background-position: left center, right center !important;
  background-size: cover, clamp(520px, 52vw, 920px) !important;
  min-height: 260px;
  padding: 56px 0;
}
.hero--pastel .container{
  /* ruimte rechts zodat tekst niet over de blokken valt */
  padding-right: clamp(24px, 42vw, 560px);
}
@media (max-width: 900px){
  .hero--pastel{
    background-size: cover, 72vw !important;
    background-position: left center, right 12% center !important;
  }
  .hero--pastel .container{ padding-right: 18vw; }
}
@media (max-width: 560px){
  .hero--pastel{
    background-size: cover, 88vw !important;
    background-position: left center, right 6% center !important;
  }
  .hero--pastel .container{ padding-right: 10vw; }
}

/* zorg dat kaarten boven de achtergrond liggen */
.about-bg .prose, .about-bg .card, .about-bg .container { position:relative; z-index:1; background:#fff }
/* Pastel blokken IN de Over-ons kaart (rechts) */


/* zorg dat de content boven het patroon ligt */
.prose--decor > *{ position: relative; z-index: 1; }

@media (max-width: 800px){
  
  
}
@media (max-width: 520px){
  
  
}
/* --- Decor in Over-ons kaart --- */


/* content boven het patroon */
.prose--decor > *{ position:relative; z-index:1 }
@media (max-width: 800px){
  
  
}
@media (max-width: 520px){
  
  
}
/* Pastel blokken IN kaart (Diensten) */
.prose--decor{
  position: relative;
  overflow: hidden;                 /* patroon blijft binnen afgeronde randen */
  background:#fff;
  padding-right: clamp(20px, 14vw, 360px);
}
.prose--decor::after{
  content:"";
  position:absolute; right:-8px; top:-8px; bottom:-8px;
  width: clamp(260px, 38vw, 520px);
  background: url("assets/hero-blocks-light.svg") no-repeat right center;
  background-size: contain;
  opacity: .14;                     /* zacht */
  pointer-events: none;
  z-index: 0;
}
/* content boven het patroon */
.prose--decor > *{ position: relative; z-index: 1; }

@media (max-width: 800px){
  .prose--decor{ padding-right: clamp(16px, 10vw, 200px) }
  .prose--decor::after{ width: clamp(220px, 46vw, 420px) }
}
@media (max-width: 520px){
  .prose--decor{ padding-right: 18px }
  .prose--decor::after{ opacity:.12; width: 66vw; right:-4px }
}

/* === Hero split: tekst links + beeld rechts === */
.hero-split{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: clamp(16px, 3vw, 28px);
  align-items:center;
}
.hero-text{ min-width:0 } /* veilige tekst wrapping */

.hero-media{
  display:flex; align-items:center; justify-content:center;
}
.hero-media img{
  width: 100%;
  max-width: 520px;          /* stel gerust bij */
  height: auto;
  mix-blend-mode: multiply;  /* mooi mengen met achtergrond/kleuren */
  opacity: .92;
  filter: saturate(.98) contrast(1.03);
  border-radius: 12px;       /* subtiele afronding; haal weg als je wil */
}

/* Mobiel: stapel onder elkaar, beeld onder de tekst */
@media (max-width: 860px){
  .hero-split{ grid-template-columns: 1fr }
  .hero-media{ order: 2 }
  .hero-text { order: 1 }
  .hero-media img{ max-width: 440px; opacity:.95 }
}

/* Heel smal: iets kleiner beeld */
@media (max-width: 520px){
  .hero-media img{ max-width: 360px; opacity:.98 }
}