*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
    --groen:#3DB54A;--groen-d:#2a9e38;--zwart:#111111;--wit:#ffffff;
    --grijs-bg:#f0f4f8;--grijs-licht:#e8ecf0;--tekst:#1a1a1a;
    --subtekst:#5a6470;--rand:#d0d8e0;
}
/* HERO */
.hero {
    background: var(--zwart);
    position: relative;
    overflow: hidden;
    padding: 0 32px;

    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.hero::before{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px);background-size:60px 60px;pointer-events:none}
.hero-inner{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1fr 320px;gap:0;min-height:460px;align-items:stretch}
.hero-left{padding:64px 56px 64px 0;display:flex;flex-direction:column;justify-content:center;border-right:1px solid rgba(0,0,0,.07)}
.hero-kicker{font-size:12px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--groen);margin-bottom:18px}
.hero-left h1{font-family:'Raleway',sans-serif;font-size:clamp(52px,6vw,82px);font-weight:900;line-height:.95;text-transform:uppercase;color:#000;margin-bottom:22px;letter-spacing:-1px}
.hero-left h1 em{font-style:italic;color:var(--groen)}
.hero-left p{font-size:17px;color:rgba(0,0,0,1);line-height:1.65;max-width:460px;margin-bottom:32px}
.hero-btns{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.btn-groen{background:var(--groen);color:#fff;padding:14px 28px;border-radius:3px;font-size:15px;font-weight:700;text-decoration:none;letter-spacing:.3px;transition:background .15s,transform .1s;display:inline-block}
.btn-groen:hover{background:var(--groen-d);transform:translateY(-1px)}
.btn-ghost{color:rgba(0,0,0,1);font-size:14px;font-weight:600;text-decoration:none;display:inline-flex;align-items:center;gap:6px;transition:color .15s}
.btn-ghost:hover{color:#000}

/* Hero right — compact kosten panel */
.hero-right{display:flex;flex-direction:column;justify-content:center;padding:56px 0 56px 52px;gap:0}
.kosten-block{margin-bottom:28px}
.kosten-tag{font-size:11px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:rgba(255,255,255,.35);margin-bottom:10px}
.kosten-bedrag{font-family:'Raleway',sans-serif;font-size:56px;font-weight:900;color:var(--groen);line-height:1;letter-spacing:-1px}
.kosten-sub{font-size:13px;color:rgba(0,0,0,1);margin-top:6px;line-height:1.5}
.kosten-badge{display:inline-block;background:#E5E6E3;border:1px solid rgba(61,181,74,.3);border-radius:3px;padding:8px 12px;margin-top:14px;font-size:13px;color:rgba(0,0,0,1);line-height:1.45}
.kosten-badge strong{color:var(--groen);font-weight:700}
.price-sep{border:none;border-top:1px solid rgba(0,0,0.08);margin:22px 0}
.price-usps{list-style:none;display:flex;flex-direction:column;gap:9px}
.price-usps li{display:flex;align-items:center;gap:9px;font-size:13px;color:rgba(0,0,0,1);font-weight:600}
.price-usps li::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--groen);flex-shrink:0}

/* STATS STRIP */
.stats-strip{background:var(--groen);padding:18px 32px}
.stats-inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;gap:48px}
.stats-label{font-family:'Raleway',sans-serif;font-size:20px;font-weight:900;text-transform:uppercase;color:#fff;white-space:nowrap}
.stats-items{display:flex;flex:1}
.stat-item{display:flex;align-items:center;gap:10px;padding:0 24px;border-left:1px solid rgba(255,255,255,.3)}
.stat-item:first-child{padding-left:0;border-left:none}
.stat-num{font-family:'Raleway',sans-serif;font-size:26px;font-weight:900;color:#fff;line-height:1}
.stat-lbl{font-size:12px;color:rgba(255,255,255,.8);font-weight:600;line-height:1.3}

/* ═══ SLIDER SECTIE ═══ */
.slider-section{padding:80px 32px;background:var(--grijs-bg)}
.slider-section-inner{max-width:1200px;margin:0 auto}
.section-kicker{font-size:11px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--groen);margin-bottom:12px}
.section-title{font-family:'Raleway',sans-serif;font-size:clamp(34px,4.5vw,52px);font-weight:900;text-transform:uppercase;line-height:1;letter-spacing:-.5px;color:var(--zwart)}
.section-sub{font-size:16px;color:var(--subtekst);margin-top:10px;line-height:1.5}

.slider-wrap{position:relative;margin-top:48px;overflow:hidden}
.slider-track{display:flex;transition:transform .45s cubic-bezier(.4,0,.2,1)}
.slide{min-width:100%;display:grid;grid-template-columns:300px 1fr;gap:0;border-radius:6px;overflow:hidden;border:1px solid var(--rand);background:var(--wit)}

/* Schets kant */
.slide-schets{background:#f8f5f0;padding:28px;display:flex;flex-direction:column;justify-content:space-between;border-right:1px solid var(--rand);position:relative}
.slide-schets-label{font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#a09080;margin-bottom:16px;display:flex;align-items:center;gap:8px}
.slide-schets-label::before{content:'';width:20px;height:2px;background:#a09080}
.schets-placeholder{flex:1;display:flex;align-items:center;justify-content:center;min-height:540px}
.schets-img-wrap{width:100%;aspect-ratio:4/3;background:#ede8e0;border-radius:4px;border:2px dashed #c8bfb0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px;position:relative;overflow:hidden}
.schets-img-wrap img{width:100%;height:100%;object-fit:cover;border-radius:2px}
.schets-placeholder-icon{font-size:28px;opacity:.35}
.schets-placeholder-text{font-size:12px;color:#a09080;font-weight:600;text-align:center;padding:0 12px}
.slide-schets-desc{margin-top:16px}
.slide-schets-desc p{font-size:13px;color:#7a6e64;line-height:1.6;font-style:italic}

/* Pijl tussen */
.slide-arrow-mid{position:absolute;top:50%;right:-22px;transform:translateY(-50%);width:44px;height:44px;background:var(--zwart);border-radius:50%;display:flex;align-items:center;justify-content:center;z-index:10;box-shadow:0 2px 12px rgba(0,0,0,.2)}
.slide-arrow-mid svg{width:18px;height:18px;stroke:#fff;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* Product kant */
.slide-product{padding:32px;display:flex;flex-direction:column;justify-content:space-between;background:var(--wit)}
.slide-product-label{font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--groen);margin-bottom:16px;display:flex;align-items:center;gap:8px}
.slide-product-label::before{content:'';width:20px;height:2px;background:var(--groen)}

/* Foto subslider in product paneel */
.foto-slider{position:relative;overflow:hidden;border-radius:4px;border:1px solid var(--rand);flex:1;min-height:585px}
.foto-track{display:flex;height:100%;transition:transform .35s cubic-bezier(.4,0,.2,1)}
.foto-slide{width:100%;height:100%;background:var(--grijs-bg);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px;flex-shrink:0}
.foto-slide img{width:100%;height:100%;object-fit:cover;display:block}
.foto-placeholder-icon{font-size:44px;opacity:.2}
.foto-placeholder-text{font-size:13px;color:var(--subtekst);font-weight:600;text-align:center;padding:0 20px}
.foto-nav{position:absolute;top:50%;transform:translateY(-50%);width:32px;height:32px;background:rgba(255,255,255,.92);border:1px solid var(--rand);border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s,border-color .15s;z-index:5}
.foto-nav:hover{background:#fff;border-color:var(--groen)}
.foto-nav svg{width:12px;height:12px;stroke:var(--tekst);fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.foto-nav:hover svg{stroke:var(--groen)}
.foto-prev{left:10px}
.foto-next{right:10px}
.foto-dots{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);display:flex;gap:6px}
.foto-dot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.5);cursor:pointer;transition:background .2s}
.foto-dot.active{background:#fff}
.foto-count{position:absolute;top:10px;right:10px;background:rgba(0,0,0,.45);color:#fff;font-size:11px;font-weight:700;padding:3px 8px;border-radius:2px;letter-spacing:.5px}
.slide-info{margin-top:24px}
.slide-info h3{font-family:'Raleway',sans-serif;font-size:24px;font-weight:900;text-transform:uppercase;color:var(--zwart);margin-bottom:6px}
.slide-info p{font-size:14px;color:var(--subtekst);line-height:1.6}
.slide-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.slide-tag{background:var(--grijs-licht);color:var(--subtekst);font-size:12px;font-weight:700;padding:4px 10px;border-radius:2px;letter-spacing:.3px}

/* Slider controls */
.slider-controls{display:flex;align-items:center;justify-content:center;gap:20px;margin-top:28px}
.slider-btn{width:44px;height:44px;border-radius:50%;border:2px solid var(--rand);background:var(--wit);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:border-color .15s,background .15s}
.slider-btn:hover{border-color:var(--groen);background:var(--groen)}
.slider-btn:hover svg{stroke:#fff}
.slider-btn svg{width:16px;height:16px;stroke:var(--tekst);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:stroke .15s}
.slider-dots{display:flex;gap:8px;align-items:center}
.dot{width:8px;height:8px;border-radius:50%;background:var(--rand);cursor:pointer;transition:background .2s,transform .2s}
.dot.active{background:var(--groen);transform:scale(1.3)}

/* HOE WERKT HET */
.hoe-section{padding:80px 32px}
.hoe-inner{max-width:1200px;margin:0 auto}
.hoe-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--rand);border:1px solid var(--rand);border-radius:4px;overflow:hidden;margin-top:48px}
.hoe-stap{background:var(--wit);padding:30px 26px;position:relative;transition:background .2s}
.hoe-stap:hover{background:#f7faf7}
.hoe-stap-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.hoe-stap-num{font-family:'Raleway',sans-serif;font-size:68px;font-weight:900;color:var(--groen);line-height:1;transition:color .2s}
.hoe-stap:hover .hoe-stap-num{color:var(--groen-d)}
.hoe-stap-icon{width:64px;height:64px;flex-shrink:0;background:#e4e8ec;border-radius:6px;display:flex;align-items:center;justify-content:center;transition:transform .2s,background .2s}
.hoe-stap:hover .hoe-stap-icon{transform:scale(1.08);background:#d0d8e0}
.hoe-stap-icon svg{width:32px;height:32px;stroke:#7a8a99;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.hoe-stap h3{font-size:15px;font-weight:700;color:var(--zwart);margin-bottom:7px}
.hoe-stap p{font-size:13px;color:var(--subtekst);line-height:1.6}
.hoe-stap-arrow{position:absolute;top:50%;right:-13px;transform:translateY(-50%);width:26px;height:26px;background:var(--zwart);border-radius:50%;display:flex;align-items:center;justify-content:center;z-index:2}
.hoe-stap-arrow svg{width:11px;height:11px;stroke:#fff;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.hoe-stap:last-child .hoe-stap-arrow{display:none}

/* FAQ */
.faq-section{background:var(--zwart);padding:64px 32px}
.faq-inner{max-width:1200px;margin:0 auto}
.faq-section .section-kicker{color:var(--groen)}
.faq-section .section-title{color:#fff;margin-bottom:32px}
.faq-list{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.08);border-radius:6px;overflow:hidden}
.faq-item{background:var(--zwart);padding:20px 24px}
.faq-q{font-size:13px;font-weight:700;color:#fff;font-family:'Raleway',sans-serif;line-height:1.4;margin-bottom:6px;display:flex;align-items:flex-start;gap:10px}
.faq-q::before{content:'?';width:18px;height:18px;min-width:18px;background:var(--groen);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;color:#fff;margin-top:1px}
.faq-a{font-size:13px;color:rgba(255,255,255,.55);line-height:1.6;padding-left:28px}

/* CONTENT + SIDEBAR */
.content-section{padding:80px 32px}
.content-inner{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1fr 310px;gap:48px;align-items:start}
.type-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:36px}
.type-card{border:1px solid var(--rand);border-radius:4px;padding:22px;text-decoration:none;color:var(--tekst);display:block;transition:border-color .2s,box-shadow .2s,transform .2s}
.type-card:hover{border-color:var(--groen);box-shadow:0 4px 20px rgba(61,181,74,.1);transform:translateY(-2px)}
.type-icon{font-size:28px;margin-bottom:10px}
.type-card h4{font-size:14px;font-weight:700;margin-bottom:4px;color:var(--zwart)}
.type-card p{font-size:13px;color:var(--subtekst);line-height:1.5}

/* Sidebar */
.sidebar{display:flex;flex-direction:column;gap:16px}
.sidebar-offerte{background:var(--zwart);border-radius:4px;padding:26px}
.sidebar-offerte-label{font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--groen);margin-bottom:14px}
.sidebar-offerte h3{font-family:'Raleway',sans-serif;font-size:24px;font-weight:900;text-transform:uppercase;color:#fff;line-height:1.1;margin-bottom:14px}
.sidebar-usp{list-style:none;margin-bottom:18px;display:flex;flex-direction:column;gap:8px}
.sidebar-usp li{display:flex;align-items:flex-start;gap:7px;font-size:13px;color:rgba(255,255,255,.7);line-height:1.4}
.sidebar-usp li::before{content:'✔';color:var(--groen);font-size:11px;flex-shrink:0;margin-top:2px}
.btn-groen-full{display:block;text-align:center;background:var(--groen);color:#fff;padding:12px;border-radius:3px;font-size:14px;font-weight:700;text-decoration:none;letter-spacing:.3px;transition:background .15s;margin-bottom:8px}
.btn-groen-full:hover{background:var(--groen-d)}
.btn-outline-dark{display:block;text-align:center;border:1px solid rgba(255,255,255,.2);color:rgba(255,255,255,.65);padding:11px;border-radius:3px;font-size:13px;font-weight:600;text-decoration:none;transition:border-color .15s,color .15s}
.btn-outline-dark:hover{border-color:rgba(255,255,255,.5);color:#fff}
.sidebar-cats{background:var(--grijs-bg);border:1px solid var(--rand);border-radius:4px;overflow:hidden}
.sidebar-cats-head{background:#333;color:#fff;padding:11px 16px;font-size:13px;font-weight:700}
.cat-link{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;text-decoration:none;color:var(--tekst);font-size:13px;font-weight:600;border-bottom:1px solid var(--rand);transition:background .12s,color .12s}
.cat-link:last-child{border-bottom:none;color:var(--groen)}
.cat-link:hover{background:#fff;color:var(--groen)}

/* CTA */
.cta-section{background:var(--groen);padding:80px 32px;text-align:center}
.cta-inner{max-width:660px;margin:0 auto}
.cta-inner h2{font-family:'Raleway',sans-serif;font-size:clamp(42px,6vw,70px);font-weight:900;text-transform:uppercase;color:#fff;line-height:.95;letter-spacing:-1px;margin-bottom:18px}
.cta-inner p{font-size:17px;color:rgba(255,255,255,.82);line-height:1.6;margin-bottom:34px}
.btn-wit{background:#fff;color:var(--groen);padding:15px 36px;border-radius:3px;font-size:15px;font-weight:700;text-decoration:none;letter-spacing:.3px;display:inline-block;transition:transform .15s,box-shadow .15s}
.btn-wit:hover{transform:translateY(-2px);box-shadow:0 8px 30px rgba(0,0,0,.15)}
.cta-note{margin-top:14px;font-size:13px;color:rgba(255,255,255,.65)}

footer{background:var(--zwart);padding:14px 32px;text-align:center;font-size:12px;color:rgba(255,255,255,.3)}
footer a{color:rgba(255,255,255,.3)}

/* RESPONSIVE */
@media(max-width:1000px){
    .hero-inner{grid-template-columns:1fr}
    .hero-left{border-right:none;padding:48px 0}
    .hero-right{padding:0 0 48px}
    .hoe-grid{grid-template-columns:repeat(2,1fr)}
    .hoe-stap-arrow{display:none}
    .bezwaar-grid{grid-template-columns:1fr}
    .content-inner{grid-template-columns:1fr}
    .stats-inner{flex-direction:column;gap:16px}
    .stats-items{flex-wrap:wrap}
    .slide{grid-template-columns:1fr}
    .slide-arrow-mid{display:none}
    .slide-schets{border-right:none;border-bottom:1px solid var(--rand)}
}
@media(max-width:620px){
    .topbar,.hero,.hoe-section,.bezwaar-section,.content-section,.cta-section,.stats-strip,.slider-section{padding-left:16px;padding-right:16px}
    nav{padding:0 16px}
    .hoe-grid{grid-template-columns:1fr}
    .type-grid{grid-template-columns:1fr}
    .hero-left h1{font-size:48px}
}