/* Klantsmid — nieuw ontwerp "zand & bosgroen". Overschrijft het donkere thema.
   Eén bestand, gekoppeld op elke pagina vóór </head>. Terugdraaien = de koppelregel weghalen. */
:root{
  --bg:#F4F1EA; --bg2:#EEEBE2; --card:#FFFFFF; --line:rgba(20,22,20,.11);
  --gold:#1C5D3A; --gold2:#17502F; --blue:#1C5D3A;
  --txt:#14241C; --mut:#5E6660;
}
html,body{background:var(--bg);color:var(--txt)}
body{-webkit-font-smoothing:antialiased}

/* ---- koppen: rustiger en groter, zoals Humaan ---- */
h1,h2,h3{letter-spacing:-.025em}
h1{font-size:clamp(34px,6.4vw,76px);line-height:1.04}
h2{font-size:clamp(28px,3.6vw,46px);line-height:1.08}
.sub{color:var(--mut)}
.lead{color:var(--mut)}
.eyebrow{color:var(--gold);letter-spacing:.17em}
.grad{color:var(--gold);-webkit-text-fill-color:var(--gold);background:none}

/* ---- navigatie als zwevend pilletje ---- */
nav{background:transparent;border-bottom:0;backdrop-filter:none}
nav .wrap{align-items:center}
.navlinks{background:rgba(20,22,20,.05);border:1px solid var(--line);border-radius:999px;padding:5px}
.navlinks a{color:var(--txt);opacity:.82;border-radius:999px;padding:8px 14px}
.navlinks a:hover{background:rgba(20,22,20,.07);opacity:1}
.logo{color:var(--txt)}
.mark{background:var(--gold)}
.mark svg{stroke:#F4F1EA}

/* ---- knoppen ---- */
.btn{border-radius:999px}
.btn-g{background:var(--gold);color:#fff;border:0}
.btn-g:hover{background:var(--gold2)}
.btn-ghost{background:transparent;color:var(--txt);border:1px solid rgba(20,22,20,.22)}
.btn-ghost:hover{background:rgba(20,22,20,.05)}

/* ---- kaarten en blokken ---- */
.mod,.panel,.qa,.step,.ctabox{background:var(--card);border:1px solid var(--line);border-radius:22px}
.mod h3,.panel h3,.qa h3,.step h3{color:var(--txt)}
.mod p,.panel p,.qa p,.step p{color:var(--mut)}
.mod a{color:var(--gold)!important}
.hero{background:transparent}
.hero-glow,.hero-glow2{background:radial-gradient(ellipse at center,rgba(28,93,58,.13),transparent 62%)}
canvas#spark{opacity:.18}
.blk:nth-of-type(even){background:var(--bg2)}
.prose{color:var(--mut)}
.prose h2,.prose h3,.prose strong,.prose b{color:var(--txt)}
.prose a{color:var(--gold)!important}
.checklist li{color:var(--mut)}
.checklist li:before{color:var(--gold)}
table th{border-bottom-color:rgba(20,22,20,.2)!important}
table td{border-bottom-color:var(--line)!important}

/* ---- formulier ---- */
.lead-form input,.lead-form textarea{background:#fff;border:1px solid var(--line);color:var(--txt);border-radius:14px}
.lead-form input::placeholder,.lead-form textarea::placeholder{color:#9aa09a}

/* ---- voettekst ---- */
footer{background:var(--bg2);border-top:1px solid var(--line);color:var(--mut)}
footer a{color:var(--mut)}
footer a:hover{color:var(--txt)}
.footbot{border-top-color:var(--line)}

/* ---- zwevende knoppen rechtsonder ---- */
.ks-fab-call{background:var(--gold)!important}

/* ---- mobiel: navigatie bleef zichtbaar, maar compacter ---- */
@media(max-width:900px){
  .navlinks{display:none}
  h1{font-size:clamp(30px,8vw,44px)}
}

/* ---- welkomstvenster: lichte versie ---- */
.wpop{background:rgba(20,22,20,.45)!important}
.wpop-inner{background:var(--card)!important;border:1px solid var(--line)!important;
  box-shadow:0 30px 80px rgba(20,22,20,.25)!important;color:var(--txt)}
.wpop-inner h3,.wpop-inner p,.wpop-inner div{color:inherit}
.wpop-x{color:var(--mut)}

/* ---- oranje gloed van het oude thema uitzetten ---- */
.btn-g{background:var(--gold)!important;color:#fff!important;box-shadow:0 8px 22px rgba(28,93,58,.22)!important}
.btn-g:hover{box-shadow:0 10px 26px rgba(28,93,58,.3)!important}
.mark{box-shadow:none!important}
.ks-fab a{box-shadow:0 8px 22px rgba(20,22,20,.18)!important}

/* ---- sierelementen uit het oude thema in de nieuwe kleuren ---- */
.orb{background:radial-gradient(circle at 38% 34%,rgba(28,93,58,.85),rgba(28,93,58,.35) 55%,rgba(244,241,234,0) 72%)!important;
  box-shadow:0 0 70px rgba(28,93,58,.22),0 0 110px rgba(28,93,58,.12)!important}
.orb svg,.orb path,.orb rect{stroke:#F4F1EA!important;fill:#F4F1EA!important}
.badge{background:var(--gold)!important;color:#fff!important}
.ring{border-color:rgba(28,93,58,.18)!important}
.orb-label{background:var(--card)!important;border:1px solid var(--line)!important;color:var(--txt)!important;box-shadow:0 6px 18px rgba(20,22,20,.10)!important}
.wave i{background:var(--gold)!important}

/* ================= MOBIEL ================= */
@media(max-width:900px){
  /* navigatie was helemaal verdwenen op telefoon — nu een scrollbaar pilletje onder het logo */
  nav .wrap{flex-wrap:wrap;padding:12px 16px}
  .navlinks{display:flex!important;order:3;width:100%;margin-top:10px;padding:4px;gap:2px;
    overflow-x:auto;white-space:nowrap;scrollbar-width:none;-ms-overflow-style:none}
  .navlinks::-webkit-scrollbar{display:none}
  .navlinks a{flex:0 0 auto;padding:9px 13px;font-size:14px}
  nav .btn-g{padding:11px 16px;font-size:14px}

  /* blokken met vaste kolommen in de pagina zelf */
  .band{grid-template-columns:1fr!important;gap:18px!important;text-align:left!important}
  .band>div{text-align:left!important}
  .mods[style*="repeat(4"]{grid-template-columns:1fr!important}
  .ctabox{padding:26px 20px!important}

  /* lucht en leesbaarheid */
  .blk{padding-left:0;padding-right:0}
  .wrap{padding-left:16px;padding-right:16px}
  h1{font-size:clamp(30px,8.4vw,40px)!important;line-height:1.08}
  h2{font-size:clamp(24px,6.4vw,30px)!important}
  .btn{width:auto}
  .orb-stage{height:230px!important}
  .orb{width:170px!important;height:170px!important}
}
@media(max-width:600px){
  .cta,.wpop-btns{flex-direction:column;align-items:stretch}
  .cta .btn{width:100%;justify-content:center}
}