/* ============================================================
   SlimVerspreiden — gedeelde huisstijl (.svon)
   Eén bron voor homepage, Direct Mail-pagina én planner.
   Tokens staan op :root zodat ook de planner (.svp-dm-planner) ze erft.
   Site-breed ingeladen via de DM-plugin.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,600;12..96,700;12..96,800&family=Hanken+Grotesk:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  /* svon-tokens (homepage) */
  --paper:#F2F5F4; --paper-2:#FFFFFF;
  --ink:#16241D; --ink-2:#3E4E45; --muted:#6B7A70;
  --line:#D9DED8; --select:#E0356F; --select-deep:#B32656; --select-tint:#FCE7EF;
  --water:#1E7A8A; --water-tint:#E3F0F1; --land:#E7EBE4; --land-2:#DDE3D9;
  --r:14px; --maxw:1080px;
  /* aliassen zodat de planner dezelfde palette gebruikt */
  --magenta:var(--select); --magenta-600:var(--select-deep); --magenta-700:#9E2450;
  --magenta-050:var(--select-tint); --magenta-300:#EC5A8A;
  --mist:var(--paper); --white:var(--paper-2); --muted-2:var(--ink-2); --line-2:#C5CFC6;
}

/* Basis */
.svon{
  font-family:'Hanken Grotesk',sans-serif !important; color:var(--ink);
  background:linear-gradient(180deg,#FBFCFB 0%, #EAF0EE 100%);
  font-size:17px; line-height:1.55;
}
.svon *{box-sizing:border-box}
.svon .svon-wrap{max-width:var(--maxw); margin:0 auto; padding:0 28px}
.svon h1,.svon h2,.svon h3{font-family:'Bricolage Grotesque',sans-serif !important; font-weight:700; line-height:1.05; margin:0; letter-spacing:-.015em; color:var(--ink)}
.svon p{margin:0}
.svon a{text-decoration:none; color:inherit}
.svon .svon-eyebrow{font-family:'IBM Plex Mono',monospace !important; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--select-deep); font-weight:500}

/* Knoppen */
.svon .svon-btn{display:inline-flex; align-items:center; gap:.5em; font-weight:600; font-size:16px; padding:14px 22px; border-radius:999px; border:1.5px solid transparent; cursor:pointer; transition:.16s ease; line-height:1}
.svon .svon-btn-primary{background:var(--select); color:#fff!important; box-shadow:0 1px 0 var(--select-deep)}
.svon .svon-btn-primary:hover{background:var(--select-deep); transform:translateY(-1px)}
.svon .svon-btn-ghost{background:transparent; color:var(--ink)!important; border-color:var(--line)}
.svon .svon-btn-ghost:hover{border-color:var(--ink); background:#fff}
.svon .svon-btn .arw{transition:transform .16s}
.svon .svon-btn:hover .arw{transform:translateX(3px)}

/* Hero */
.svon .svon-hero{padding:64px 0 56px}
.svon .svon-hero-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:48px; align-items:center}
.svon .svon-hero h1{font-size:clamp(36px,5vw,56px); font-weight:800; margin:16px 0 18px}
.svon .svon-hero .lead{font-size:19px; color:var(--ink-2); max-width:36ch}
.svon .svon-hero .cta-row{display:flex; gap:14px; flex-wrap:wrap; margin-top:26px}

/* Banden + koppen */
.svon .svon-band{padding:72px 0}
.svon .svon-band.alt{background:var(--paper-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.svon .svon-head{max-width:60ch}
.svon .svon-head h2{font-size:clamp(28px,3.6vw,42px); margin-top:12px}
.svon .svon-head p{color:var(--ink-2); margin-top:14px; font-size:18px}

/* Edge-cards */
.svon .svon-edge{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:40px}
.svon .svon-ecard{background:var(--paper-2); border:1px solid var(--line); border-radius:var(--r); padding:26px; transition:.18s}
.svon .svon-ecard:hover{transform:translateY(-3px); box-shadow:0 18px 40px -28px rgba(22,36,29,.5)}
.svon .svon-ecard .num{font-family:'IBM Plex Mono',monospace !important; font-size:12px; color:var(--select-deep); letter-spacing:.1em}
.svon .svon-ecard h3{font-size:21px; margin:14px 0 8px}
.svon .svon-ecard p{font-size:15.5px; color:var(--ink-2)}

/* Methode-kaarten */
.svon .svon-methods{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:40px}
.svon .svon-method{background:var(--paper-2); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; display:flex; flex-direction:column; transition:.18s}
.svon .svon-method:hover{border-color:var(--ink); transform:translateY(-3px)}
.svon .svon-method .top{padding:24px 24px 18px; border-bottom:1px solid var(--line)}
.svon .svon-method .top .mono{font-family:'IBM Plex Mono',monospace !important; font-size:12px; color:var(--water); letter-spacing:.1em}
.svon .svon-method h3{font-size:23px; margin-top:10px}
.svon .svon-method .body{padding:22px 24px; display:flex; flex-direction:column; gap:14px; flex:1}
.svon .svon-method .price{font-family:'IBM Plex Mono',monospace !important; font-size:15px}
.svon .svon-method .price b{font-size:24px; color:var(--select-deep)}
.svon .svon-method ul{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:9px}
.svon .svon-method li{font-size:14.5px; color:var(--ink-2); padding-left:22px; position:relative}
.svon .svon-method li:before{content:""; position:absolute; left:0; top:7px; width:11px; height:11px; border-radius:3px; background:var(--select); opacity:.85}
.svon .svon-method .go{margin:0 24px 24px; justify-content:center}

/* Split (per adres / per buurt) */
.svon .svon-split{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:40px}
.svon .svon-col{background:var(--paper-2); border:1px solid var(--line); border-radius:var(--r); padding:26px}
.svon .svon-col .lbl{font-family:'IBM Plex Mono',monospace !important; font-size:11px; letter-spacing:.12em; text-transform:uppercase; font-weight:600; display:inline-block; margin-bottom:14px}
.svon .svon-col.exact .lbl{color:var(--select-deep)}
.svon .svon-col.gebied .lbl{color:var(--muted)}
.svon .svon-tags{display:flex; flex-wrap:wrap; gap:8px}
.svon .svon-tags span{font-size:14px; padding:6px 12px; border-radius:999px; background:var(--paper); border:1px solid var(--line); color:var(--ink)}
.svon .svon-col .note{font-size:13.5px; color:var(--muted); margin-top:14px}

/* Proof */
.svon .svon-proof{display:grid; grid-template-columns:1.1fr 1fr; gap:40px; align-items:center}
.svon .svon-stats{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden}
.svon .svon-stat{background:var(--paper-2); padding:26px}
.svon .svon-stat .big{font-family:'Bricolage Grotesque',sans-serif !important; font-weight:800; font-size:40px; letter-spacing:-.02em}
.svon .svon-stat .lbl{font-size:14px; color:var(--muted); margin-top:4px}
.svon .svon-quote{background:var(--ink); color:#EAF0EB; border-radius:var(--r); padding:32px}
.svon .svon-quote .stars{color:#F4C15B; font-family:'IBM Plex Mono',monospace !important; letter-spacing:2px}
.svon .svon-quote blockquote{margin:16px 0 18px; font-family:'Bricolage Grotesque',sans-serif !important; font-weight:600; font-size:22px; line-height:1.3}
.svon .svon-quote .who{font-size:14px; color:#A9B8AC}

/* FAQ */
.svon .svon-faq details{background:var(--paper-2); border:1px solid var(--line); border-radius:12px; margin-bottom:12px; padding:2px 22px}
.svon .svon-faq summary{list-style:none; cursor:pointer; padding:18px 0; font-family:'Bricolage Grotesque',sans-serif !important; font-weight:700; font-size:17px; display:flex; justify-content:space-between; align-items:center}
.svon .svon-faq summary::-webkit-details-marker{display:none}
.svon .svon-faq summary::after{content:"+"; font-family:'IBM Plex Mono',monospace !important; color:var(--select); font-size:22px}
.svon .svon-faq details[open] summary::after{content:"–"}
.svon .svon-faq details p{font-size:15.5px; color:var(--ink-2); padding:0 0 20px}

/* CTA-band */
.svon .svon-ctaband{background:var(--ink); color:#fff; border-radius:24px; padding:56px; margin:40px 28px 0; display:grid; grid-template-columns:1.4fr 1fr; gap:36px; align-items:center; background-image:radial-gradient(circle at 85% 20%,rgba(224,53,111,.25),transparent 45%)}
.svon .svon-ctaband h2{font-size:clamp(28px,4vw,44px); color:#fff}
.svon .svon-ctaband p{color:#B9C6BC; margin-top:14px; font-size:18px}
.svon .svon-ctaband .r{display:flex; flex-direction:column; gap:12px}
.svon .svon-ctaband .svon-btn-ghost{color:#fff!important; border-color:rgba(255,255,255,.3)}
.svon .svon-ctaband .svon-btn-ghost:hover{background:rgba(255,255,255,.1); border-color:#fff}
.svon .svon-bottom{padding:34px 0 8px}

/* Responsive */
@media (max-width:900px){
  .svon .svon-hero-grid,.svon .svon-proof,.svon .svon-ctaband{grid-template-columns:1fr}
  .svon .svon-edge,.svon .svon-methods,.svon .svon-split{grid-template-columns:1fr}
  .svon .svon-ctaband{padding:36px; margin:32px 0 0}
}