/* Nasci Split Sectie (zon) */
.zon{
  position:relative;overflow:hidden;
  padding:var(--zon-pad,clamp(64px,8vh,104px)) 24px;
  background:
    radial-gradient(44% 42% at 96% 8%,color-mix(in srgb,var(--zon-accent,#90E509) 12%,transparent),transparent 62%),
    linear-gradient(180deg,var(--zon-bg1,#F7FAF4) 0%,var(--zon-bg2,#F1F6EC) 100%);
  color:#0C2721;
  font-family:'Satoshi',ui-sans-serif,system-ui,sans-serif;
}
.zon *{margin:0;padding:0;box-sizing:border-box;}
.zon a{text-decoration:none;color:inherit;}
.zon-in{
  max-width:var(--zon-max,1350px);margin:0 auto;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(32px,4.5vw,76px);align-items:center;
}
/* foto rechts: kolommen omdraaien */
.zon--rechts .zon-in{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);}
.zon--rechts .zon-visual{order:2;}
.zon--rechts .zon-body{order:1;}
@media (max-width:960px){
  .zon-in,.zon--rechts .zon-in{grid-template-columns:minmax(0,1fr);}
  /* op mobiel staat de foto altijd bovenaan */
  .zon--rechts .zon-visual{order:0;}
  .zon--rechts .zon-body{order:1;}
}

/* -- Foto -- */
.zon-visual{
  position:relative;min-width:0;
  opacity:0;transform:translateX(-24px);
  transition:opacity .8s ease,transform .9s cubic-bezier(.22,.61,.36,1);
}
.zon--rechts .zon-visual{transform:translateX(24px);}
.zon.is-in .zon-visual{opacity:1;transform:none;}
.zon-media{
  position:relative;border-radius:26px;overflow:hidden;
  aspect-ratio:var(--zon-ratio,.98);
  box-shadow:0 34px 80px rgba(12,39,33,.18);
}
@media (max-width:960px){.zon-media{aspect-ratio:1.33;}}
.zon-media i{
  position:absolute;inset:0;
  background-size:cover;background-position:center;background-repeat:no-repeat;
  transform:scale(1.02);
  transition:transform 1.2s cubic-bezier(.22,.61,.36,1);
}
.zon-media:hover i{transform:scale(1.07);}
.zon-media::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:
    radial-gradient(56% 44% at 100% 0%,color-mix(in srgb,var(--zon-accent,#90E509) 24%,transparent),transparent 62%),
    radial-gradient(50% 40% at 0% 100%,color-mix(in srgb,var(--zon-accent,#90E509) 16%,transparent),transparent 62%),
    linear-gradient(200deg,rgba(12,39,33,.02) 46%,rgba(8,31,26,.42) 100%);
}
.zon-media::after{
  content:"";position:absolute;inset:0;z-index:3;border-radius:26px;padding:1px;
  background:linear-gradient(200deg,rgba(255,255,255,.55),rgba(255,255,255,.06) 44%,color-mix(in srgb,var(--zon-accent,#90E509) 50%,transparent));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;
}
/* glassy cijferstrip */
.zon-strip{
  position:absolute;left:14px;right:14px;bottom:14px;z-index:2;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:15px 18px;border-radius:18px;
  background:var(--zon-strip-bg,rgba(8,31,26,.5));border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);color:#fff;
}
.zon-strip div{min-width:0;}
.zon-strip b{display:block;font-size:19px;font-weight:900;color:var(--zon-strip-cijfer,#B9F35A);font-variant-numeric:tabular-nums;}
.zon-strip span{display:block;margin-top:2px;font-size:11px;color:var(--zon-strip-label,rgba(255,255,255,.65));}
.zon-strip em{width:1px;align-self:stretch;background:rgba(255,255,255,.16);flex:none;}
@media (max-width:480px){
  .zon-strip{padding:12px 13px;gap:7px;}
  .zon-strip b{font-size:15.5px;}
  .zon-strip span{font-size:9.5px;}
}

/* -- Tekst -- */
.zon-body{min-width:0;}
.zon-body > *{
  opacity:0;transform:translateY(18px);
  transition:opacity .6s ease,transform .7s cubic-bezier(.22,.61,.36,1);
}
.zon.is-in .zon-body > *{opacity:1;transform:none;}
.zon.is-in .zon-body > *:nth-child(2){transition-delay:.08s;}
.zon.is-in .zon-body > *:nth-child(3){transition-delay:.16s;}
.zon.is-in .zon-body > *:nth-child(4){transition-delay:.24s;}
.zon.is-in .zon-body > *:nth-child(5){transition-delay:.32s;}

.zon-body h2{
  font-family:'Aloevera','Satoshi',ui-sans-serif,system-ui,sans-serif;
  font-weight:800;font-size:clamp(32px,4.1vw,54px);line-height:1.06;letter-spacing:-.015em;
  color:#0C2721;
}
.zon-body h2 em{
  font-style:normal;color:var(--zon-accent-dark,#3E7A0B);
  text-shadow:0 0 26px color-mix(in srgb,var(--zon-accent,#90E509) 35%,transparent);
  font-variant-numeric:tabular-nums;
}
.zon-lead{
  margin-top:16px;max-width:56ch;
  font-size:15.5px;line-height:1.75;color:var(--zon-lead,rgba(12,39,33,.66));
}
.zon-lead strong{color:var(--zon-lead-vet,#0C2721);font-weight:700;}

.zon-usps{margin-top:20px;display:flex;flex-wrap:wrap;gap:8px;}
.zon-usp{
  display:inline-flex;align-items:center;gap:9px;
  padding:9px 14px;border-radius:999px;white-space:nowrap;
  background:var(--zon-usp-bg,#0C2721);color:var(--zon-usp-tekst,#fff);font-size:clamp(11px,.95vw,12.5px);font-weight:700;
  box-shadow:0 10px 26px rgba(12,39,33,.18);
  transition:transform .3s cubic-bezier(.22,.61,.36,1),box-shadow .3s ease;
}
.zon-usp:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(12,39,33,.26);}
.zon-usp i{
  width:6px;height:6px;border-radius:50%;flex:none;font-style:normal;
  background:var(--zon-usp-stip,var(--zon-accent,#90E509));
  box-shadow:0 0 8px color-mix(in srgb,var(--zon-accent,#90E509) 80%,transparent);
}

.zon-actions{margin-top:26px;display:flex;flex-wrap:wrap;gap:12px;align-items:center;}
/* primaire knop */
.zon-cta,.zon-cta:hover,.zon-cta:focus,.zon-cta:visited{
  display:inline-flex;align-items:center;justify-content:center;gap:13px;
  padding:8px 8px 8px 28px;border-radius:999px;border:0;
  font-size:15.5px;font-weight:700;line-height:1;color:var(--zon-cta-tekst,#fff)!important;
  background:linear-gradient(135deg,var(--zon-cta1,#82DB05) 0%,var(--zon-accent,#90E509) 55%,var(--zon-cta2,#A4EF23) 100%);
  box-shadow:0 10px 30px rgba(144,229,9,.3),inset 0 1px 0 rgba(255,255,255,.35);
  position:relative;isolation:isolate;overflow:hidden;
  transition:transform .35s cubic-bezier(.22,.61,.36,1),box-shadow .35s ease;
}
.zon-cta > span:first-child{position:relative;z-index:2;}
.zon-cta::before{
  content:"";position:absolute;left:50%;top:50%;
  width:44px;height:44px;border-radius:50%;background:var(--zon-cta-vul,#0C2721);
  transform:translate(-50%,-50%) scale(0);
  transition:transform .55s cubic-bezier(.22,.61,.36,1);z-index:1;
}
.zon-cta:hover::before{transform:translate(-50%,-50%) scale(16);}
.zon-cta:hover{transform:translateY(-3px);box-shadow:0 18px 44px rgba(12,39,33,.4),0 0 0 1px rgba(144,229,9,.35);}
.zon-cta .circ{
  width:44px;height:44px;border-radius:50%;flex:none;
  display:grid;place-items:center;
  background:var(--zon-cta-circ,rgba(255,255,255,.95));color:var(--zon-cta-pijl,#0C2721);
  position:relative;z-index:2;
  transition:transform .45s cubic-bezier(.34,1.56,.64,1),background-color .35s ease;
}
.zon-cta .circ svg{width:16px;height:16px;}
.zon-cta:hover .circ{transform:rotate(45deg);background:var(--zon-cta-circ-hover,var(--zon-accent,#90E509));}
/* telefoonknop */
.zon-tel,.zon-tel:visited,.zon-tel:focus,.zon-tel:active{
  display:inline-flex;align-items:center;gap:13px;
  padding:8px 26px 8px 8px;border-radius:999px;
  background:var(--zon-tel-bg,#0C2721);color:var(--zon-tel-tekst,#fff)!important;font-size:15.5px;font-weight:800;line-height:1;
  position:relative;isolation:isolate;overflow:hidden;
  box-shadow:0 10px 28px rgba(12,39,33,.24);
  transition:transform .35s cubic-bezier(.22,.61,.36,1),box-shadow .35s ease,color .35s ease;
}
.zon-tel::before{
  content:"";position:absolute;left:26px;top:50%;
  width:44px;height:44px;border-radius:50%;
  background:linear-gradient(135deg,var(--zon-cta1,#82DB05),var(--zon-accent,#90E509) 55%,var(--zon-cta2,#A4EF23));
  transform:translate(-50%,-50%) scale(0);
  transition:transform .55s cubic-bezier(.22,.61,.36,1);z-index:-1;
}
.zon-tel:hover::before{transform:translate(-50%,-50%) scale(16);}
.zon-tel:hover{transform:translateY(-3px);color:var(--zon-tel-hover,#0C2721)!important;box-shadow:0 18px 40px rgba(144,229,9,.35);}
.zon-tel .circ{
  width:44px;height:44px;border-radius:50%;flex:none;
  display:grid;place-items:center;
  background:var(--zon-tel-circ,rgba(255,255,255,.95));color:var(--zon-tel-pijl,#0C2721);
  transition:transform .45s cubic-bezier(.34,1.56,.64,1);
}
.zon-tel .circ svg{width:18px;height:18px;}
.zon-tel:hover .circ{transform:scale(1.06);}

/* vertrouwensregel */
.zon-trust{
  margin-top:24px;padding-top:18px;
  border-top:1px solid rgba(12,39,33,.11);
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;
  font-size:12.5px;font-weight:600;color:var(--zon-trust,rgba(12,39,33,.6));
}
.zon-trust span{display:inline-flex;align-items:center;gap:8px;}
.zon-trust svg{width:15px;height:15px;color:var(--zon-trust-icoon,var(--zon-accent-dark,#3E7A0B));flex:none;}

@media (max-width:560px){
  .zon-actions{gap:10px;}
  .zon-cta{width:100%;justify-content:center;padding:8px;}
  .zon-tel{width:100%;justify-content:center;padding:8px;}
}

@media (prefers-reduced-motion:reduce){
  .zon-visual,.zon-body > *,.zon-media i,.zon-usp{transition:none;}
  .zon-visual,.zon-body > *{opacity:1;transform:none;}
}

/* telefoonknop: tekst altijd wit, ook als het thema linkkleuren oplegt */
.zon .zon-tel > span:not(.circ){color:var(--zon-tel-tekst,#fff)!important;}
.zon .zon-tel:hover > span:not(.circ){color:var(--zon-tel-hover,#0C2721)!important;}
.zon .zon-tel .circ{color:var(--zon-tel-pijl,#0C2721)!important;}

/* USP-pillen: alle drie op één regel, ook op smalle telefoons */
@media (max-width:700px){
  .zon-usps{gap:5px;flex-wrap:nowrap;}
  .zon-usp{
    padding:7px 10px;gap:6px;
    font-size:clamp(9px,2.45vw,11.5px);
    min-width:0;flex:0 1 auto;
  }
  .zon-usp i{width:5px;height:5px;box-shadow:none;}
}
@media (max-width:360px){
  .zon-usp{padding:6px 8px;gap:5px;font-size:8.8px;}
}