/* ==========================================================================
   Batterij Thuis — nieuw ontwerp
   Kleuren/typografie/componenten overgenomen uit de door de klant
   aangeleverde mockup ("Gratis thuisbatterijadvies aan huis"),
   uitgebreid met een volledige sitenavigatie, footer, productgrid en
   formulierstyling zodat dezelfde stijl over de hele site werkt.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;450;500;550;600;650;700&display=swap');

:root{
  --ink:#163d32;
  --green:#154b38;
  --green-dark:#0b2a23;
  --lime:#d3ef83;
  --muted:#626c64;
  --line:#dde4dd;
  --light:#f4f7f3;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:120px}
body{
  margin:0;
  color:var(--ink);
  background:#fff;
  font-family:'DM Sans',Arial,sans-serif;
  font-size:16px;
  line-height:1.65;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
a:hover{text-decoration:underline}
button,a,summary{-webkit-tap-highlight-color:transparent}
a:focus-visible,summary:focus-visible,button:focus-visible{outline:3px solid #82ad3e; outline-offset:3px}

.wrap{width:min(1240px, calc(100% - 48px)); margin:auto}

.skip{position:fixed; top:-100px; left:20px; padding:10px; background:#fff; z-index:100}
.skip:focus{top:10px}

/* ---------- topline ---------- */
.topline{background:var(--green); color:#fff; font-size:13px; padding:9px 0}
.topline .wrap{display:flex; justify-content:center; gap:50px; flex-wrap:wrap}
@media (max-width:680px){
  .topline .wrap{gap:0; flex-wrap:nowrap; text-align:center}
  .topline .wrap span{display:none}
  .topline .wrap span.is-active{display:block; width:100%}
}

/* ---------- header / site nav ---------- */
header.site-header{
  position:sticky; top:0; z-index:20;
  background:#fffffff5; backdrop-filter:blur(12px);
  border-bottom:1px solid #edf0eb;
}
.nav-row{display:flex; align-items:center; justify-content:space-between; min-height:92px; gap:28px}
.logo{object-fit:contain; width:190px; height:auto}
.site-nav{display:flex; align-items:center; gap:26px; font-size:14px; font-weight:550}
.site-nav > li{position:relative; list-style:none}
.site-nav{display:flex; padding:0; margin:0}
.site-nav > li > a{display:flex; align-items:center; gap:5px; padding:8px 0}
.site-nav .caret{font-size:10px; opacity:.6}
.dropdown{
  position:absolute; top:100%; left:0; min-width:250px;
  background:#fff; border:1px solid var(--line); border-radius:10px;
  box-shadow:0 18px 40px #0b2a2314; padding:10px;
  display:none; flex-direction:column;
}
.site-nav > li:hover .dropdown, .site-nav > li:focus-within .dropdown{display:flex}
.dropdown a{padding:9px 12px; border-radius:7px; font-weight:500; font-size:14px}
.dropdown a:hover{background:var(--light); text-decoration:none}
.nav-actions{display:flex; align-items:center; gap:18px}
.nav-phone{font-size:13px; font-weight:600}
.nav-phone strong{display:block; font-size:14px}

.nav-toggle{display:none; width:40px; height:40px; background:none; border:0; padding:0; cursor:pointer; flex-direction:column; align-items:center; justify-content:center; gap:5px}
.nav-toggle span{display:block; width:22px; height:2px; background:var(--ink); border-radius:2px; transition:transform .2s ease, opacity .2s ease}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.nav-backdrop{
  position:fixed; inset:0; background:#0b2a2359; z-index:45;
  opacity:0; visibility:hidden; transition:opacity .3s ease, visibility .3s ease;
}
body.nav-open{overflow:hidden}
body.nav-open .nav-backdrop{opacity:1; visibility:visible}

.mobile-nav{
  position:fixed; top:0; left:0; bottom:0; width:87%; max-width:360px;
  background:#fff; z-index:50; display:flex; flex-direction:column;
  transform:translateX(-100%); transition:transform .32s cubic-bezier(.4,0,.2,1);
  box-shadow:30px 0 60px #0b2a2333;
}
body.nav-open .mobile-nav{transform:translateX(0)}

.mobile-nav-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 20px; border-bottom:1px solid var(--line); flex:none;
}
.mobile-nav-close{
  width:36px; height:36px; border-radius:50%; border:0; background:var(--light);
  color:var(--ink); font-size:22px; line-height:1; cursor:pointer;
}
.mobile-nav-close:hover{background:var(--line)}

.mobile-nav nav{display:flex; flex-direction:column; padding:8px 12px; overflow-y:auto; flex:1 1 auto}
.mobile-nav > nav > a, .mobile-nav summary{
  display:block; padding:14px 8px; font-weight:550; font-size:15.5px; color:var(--ink);
  border-radius:9px; cursor:pointer; list-style:none;
}
.mobile-nav > nav > a:hover, .mobile-nav summary:hover{background:var(--light)}
.mobile-nav summary{position:relative; padding-right:30px; list-style:none}
.mobile-nav summary::-webkit-details-marker{display:none}
.mobile-nav summary::marker{content:''}
.mn-caret{position:absolute; right:10px; top:16px; font-size:11px; opacity:.55; transition:transform .2s ease}
.mobile-nav details[open] .mn-caret{transform:rotate(180deg)}
.mobile-nav details a{
  display:block; padding:11px 8px 11px 22px; font-size:14px; color:var(--muted); border-radius:8px;
  position:relative;
}
.mobile-nav details a:before{content:''; position:absolute; left:8px; top:50%; width:5px; height:5px; border-radius:50%; background:var(--line); transform:translateY(-50%)}
.mobile-nav details a:hover{background:var(--light); color:var(--ink)}
.mobile-nav details{margin-bottom:2px}

.mobile-nav-foot{display:flex; flex-direction:column; gap:10px; padding:16px 20px 22px; border-top:1px solid var(--line); flex:none}
.mobile-nav-foot .button{width:100%; justify-content:center}

/* ---------- buttons ---------- */
.button{
  display:inline-flex; align-items:center; justify-content:space-between; gap:20px;
  background:var(--green); color:#fff; padding:16px 24px; border-radius:7px;
  font-weight:600; font-size:15px; transition:background .2s,transform .2s; border:0; cursor:pointer;
}
.button:hover{background:#246246; text-decoration:none; transform:translateY(-2px)}
.button span{font-size:20px; line-height:1}
.button.small{padding:12px 18px; font-size:14px}
.button.outline{background:transparent; color:var(--ink); border:1px solid var(--line)}
.button.outline:hover{background:var(--light); transform:none}
.button.lime{background:var(--lime); color:var(--ink)}
.button.lime:hover{background:#c3df71}

.text-link{font-weight:600; font-size:15px}
.text-link span{margin-left:8px}

/* ---------- hero (landing / homepage) ---------- */
.eyebrow{font-size:12px; letter-spacing:1.6px; font-weight:700; margin:0 0 20px; color:#5d8049; text-transform:uppercase}

.landing-hero{padding-top:46px; padding-bottom:10px}
.landing-hero-grid{display:grid; grid-template-columns:1.04fr 1fr; gap:55px; align-items:center}
.landing-hero h1{font-size:clamp(40px,4.5vw,64px); line-height:1.08; letter-spacing:-2.6px; font-weight:550; margin:0 0 22px}
.landing-hero h1 span{color:#5d8049}
.landing-intro{max-width:470px; color:var(--muted); font-size:18px; line-height:1.7; margin:0 0 28px}
.landing-button{margin-bottom:14px}
.landing-micro{font-size:12px; color:var(--muted); margin:10px 0 26px}
.mini-review{display:flex; gap:12px; align-items:center}
.mini-review span[aria-label]{color:#f1cc40; letter-spacing:2px; font-size:15px}
.mini-review small{display:block; color:var(--muted); font-size:12px; margin-top:2px}

.landing-picture{position:relative}
.landing-picture img{border-radius:13px 90px 13px 13px; width:100%; height:560px; object-fit:cover}
.visit-note{
  position:absolute; bottom:28px; left:24px; right:24px; color:#fff;
  background:linear-gradient(transparent,#0e251cd9); padding:70px 12px 20px; border-radius:0 0 13px 13px;
}
.visit-note span{font-size:10px; letter-spacing:1.5px; display:block; margin-bottom:6px}
.visit-note strong{font-size:21px; font-weight:500}
.free-tag{
  position:absolute; top:28px; left:-18px; display:flex; align-items:center; gap:10px;
  background:#fff; border-radius:9px; padding:13px 18px; box-shadow:0 8px 30px #142b2220;
}
.free-tag strong{font-size:24px; display:block; line-height:1; color:var(--green)}
.free-tag span{font-size:12px; color:var(--muted)}

.landing-trust{display:grid; grid-template-columns:repeat(3,1fr); gap:25px; padding-block:30px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin-top:36px; font-size:14px; color:var(--muted)}
.landing-trust strong{display:block; color:var(--ink); font-size:15px}
@media (max-width:680px){
  .landing-trust{grid-template-columns:1fr; gap:15px; font-size:13px; padding-block:23px}
  .landing-trust strong{display:inline; margin-right:5px}
}

/* ---------- generic page header (interior pages) ---------- */
.page-header{background:var(--light); padding:44px 0 50px; border-bottom:1px solid var(--line)}
.breadcrumb{font-size:12px; color:var(--muted); margin:0 0 18px}
.breadcrumb a{text-decoration:underline}
.page-header h1{font-size:clamp(34px,4vw,52px); line-height:1.1; letter-spacing:-2px; font-weight:550; margin:0 0 16px; max-width:820px}
.page-header .lead{font-size:18px; color:var(--muted); max-width:640px; margin:0}

/* ---------- sections ---------- */
.section{padding-top:80px; padding-bottom:80px}
.section.tight{padding-top:50px; padding-bottom:50px}
.section-alt{background:var(--light)}
h2{font-size:clamp(30px,3vw,40px); line-height:1.16; font-weight:550; letter-spacing:-1.4px; margin:0 0 20px}
h3{font-weight:600; line-height:1.25; letter-spacing:-.3px}
.section-head{display:flex; justify-content:space-between; align-items:end; margin-bottom:32px; gap:40px; flex-wrap:wrap}
.section-head h2{margin:0}
.section-head>p{max-width:360px; color:var(--muted); margin:8px 0 0}

.two-col{display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center}
.two-col p{color:var(--muted)}
.two-col ul{padding-left:20px; color:var(--muted); margin:16px 0}
.two-col li{margin-bottom:8px}
.two-col img{border-radius:10px; width:100%; height:420px; object-fit:cover}

/* ---------- cards ---------- */
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.card{background:var(--light); border:1px solid var(--line); padding:30px; border-radius:10px; display:flex; flex-direction:column; min-height:280px}
.card-number{font-size:12px; letter-spacing:1px; color:var(--muted)}
.card h3{font-size:24px; margin:24px 0 14px; font-weight:500}
.card p{color:var(--muted); font-size:15px; margin:0 0 24px}
.card a.text-link{display:flex; justify-content:space-between; margin-top:auto; gap:14px}
.card.featured{background:var(--green); color:#fff}
.card.featured p{color:#d4e3d8}
.card.featured .card-number{color:var(--lime)}

/* ---------- product grid (Modellen) ---------- */
.filters{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:30px; font-size:13px}
.filters select{padding:10px 14px; border-radius:7px; border:1px solid var(--line); background:#fff; font-family:inherit; font-size:13px}
.product-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.product-card{border:1px solid var(--line); border-radius:10px; padding:24px; background:#fff; display:flex; flex-direction:column}
.product-card h3{font-size:17px; font-weight:600; margin:0 0 10px; letter-spacing:0}
.product-card .price{font-size:20px; font-weight:650; color:var(--green); margin:0 0 12px}
.product-card ul{list-style:none; padding:0; margin:0 0 20px; font-size:13px; color:var(--muted)}
.product-card li{padding:4px 0}
.product-card .button{margin-top:auto}

/* ---------- spec table ---------- */
.spec-table{width:100%; border-collapse:collapse; margin:24px 0 8px; font-size:14px}
.spec-table th,.spec-table td{text-align:left; padding:14px 16px; border-bottom:1px solid var(--line)}
.spec-table th{background:var(--light); font-weight:600; font-size:12px; letter-spacing:.5px; text-transform:uppercase; color:var(--muted)}
.spec-table tr:last-child td{border-bottom:0}

/* ---------- steps ---------- */
.steps,.visit-steps{display:grid; grid-template-columns:repeat(4,1fr); gap:30px; padding-top:16px}
.steps article,.visit-steps article{border-top:1px solid #c8d4c4; padding-top:20px}
.steps article>span,.visit-steps article>span{font-size:14px; color:#6a8654}
.steps h3,.visit-steps h3{font-size:19px; margin:20px 0 10px}
.steps p,.visit-steps p{color:var(--muted); font-size:15px}

/* ---------- reviews ---------- */
.reviews{background:var(--light); padding:70px 0}
.review-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.review-grid article{padding:28px; background:#fff; border:1px solid var(--line); border-radius:9px}
.stars{color:#608144; letter-spacing:3px; font-size:18px}
blockquote{margin:16px 0 22px; font-size:17px; line-height:1.5}
.review-author{display:flex; gap:12px; align-items:center}
.review-author>span{width:38px; height:38px; background:var(--light); border-radius:50%; display:grid; place-items:center; font-size:12px; font-weight:600}
.review-author strong{display:block; font-size:14px}
.review-author small{display:block; font-size:12px; color:var(--muted)}

/* ---------- faq ---------- */
.faq{display:grid; grid-template-columns:1fr 1.3fr; gap:70px}
.faq>div>p{color:var(--muted); font-size:15px}
details{border-bottom:1px solid var(--line); padding:20px 0}
details:first-child{border-top:1px solid var(--line)}
summary{font-size:16px; font-weight:550; cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:25px}
summary::-webkit-details-marker{display:none}
summary:after{content:'+'; font-size:20px; line-height:1}
details[open] summary:after{content:'\2212'}
details p{color:var(--muted); font-size:15px; max-width:560px; margin-top:14px}

/* ---------- advice / CTA box ---------- */
.advice{background:var(--green); color:#fff; border-radius:15px; padding:54px; display:grid; grid-template-columns:1.1fr 1fr; gap:55px; align-items:center}
.advice .eyebrow{color:var(--lime)}
.advice h2{font-size:38px}
.advice>div>p:not(.eyebrow){color:#d4e3d8; max-width:400px}
.advice-checks{list-style:none; padding:0; font-size:13px; color:#e3eece; margin-top:22px}
.advice-checks li{padding:4px 0}
.contact-card{background:#fff; border-radius:9px; padding:30px; color:var(--ink); text-align:center}
.contact-card h3{font-size:21px; margin:0 0 10px}
.contact-card p{color:var(--muted); font-size:14px}
.contact-card .button{background:var(--lime); color:var(--ink); width:100%; margin-top:8px; text-align:left}
.contact-card .button:hover{background:#c3df71}
.or{font-size:12px; color:var(--muted); margin:20px 0 6px}
.phone{display:block; font-size:22px; font-weight:600}
.email{font-size:14px}

/* ---------- partners / brand strip ---------- */
.brand-strip{padding:50px 0; text-align:center}
.brand-strip>span{font-size:12px; color:var(--muted); letter-spacing:1px}
.brand-strip .logos{display:flex; justify-content:center; align-items:center; gap:44px; flex-wrap:wrap; margin-top:22px; opacity:.85}
.brand-strip .logos img{height:28px; width:auto; object-fit:contain}

/* ---------- contact / form ---------- */
.contact-grid{display:grid; grid-template-columns:1fr 1.15fr; gap:60px; align-items:start}
.address-card{border:1px solid var(--line); border-radius:10px; padding:26px; margin-bottom:18px}
.address-card strong{display:block; margin-bottom:6px}
.address-card p{margin:0; color:var(--muted); font-size:14px}
.form-card{background:var(--light); border:1px solid var(--line); border-radius:12px; padding:36px}
.field{margin-bottom:18px}
.field label{display:block; font-size:13px; font-weight:600; margin-bottom:7px}
.field input,.field select,.field textarea{
  width:100%; padding:13px 15px; border:1px solid var(--line); border-radius:7px;
  font-family:inherit; font-size:14px; background:#fff; color:var(--ink);
}
.field textarea{min-height:120px; resize:vertical}
.field input[type="radio"],.field input[type="checkbox"]{width:auto; padding:0; border:0; flex:none}
.radio-group{display:flex; flex-direction:column; gap:10px; font-size:14px}
.radio-group label{display:flex; align-items:center; gap:9px; font-weight:400; cursor:pointer}
.radio-group input[type="radio"]{width:17px; height:17px; accent-color:var(--green); margin:0; flex:none}

/* ---------- footer ---------- */
footer.site-footer{background:var(--light); padding-top:60px; border-top:1px solid var(--line)}
.footer-grid{display:grid; grid-template-columns:1.3fr .9fr .9fr .9fr 1.1fr; gap:30px}
.footer-grid strong{font-size:14px; display:block; margin-bottom:16px}
.footer-grid a{display:block; font-size:13px; margin-bottom:9px; color:var(--muted)}
.footer-grid a:hover{color:var(--ink)}
.footer-grid p{font-size:13px; color:var(--muted)}
.footer-about img{width:150px; margin-bottom:16px}
.social-row{display:flex; gap:12px; margin-top:14px}
.social-row a{width:34px; height:34px; border:1px solid var(--line); border-radius:50%; display:grid; place-items:center}
.footer-bottom{border-top:1px solid var(--line); margin-top:40px; padding:18px 0; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:12px; color:var(--muted)}

/* ---------- start de check ---------- */
.check-wrap{position:relative; border-radius:18px; overflow:hidden; margin-top:10px}
.check-photo{width:100%; height:460px; object-fit:cover; display:block; border-radius:18px}
.check-card{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  background:#fff; border-radius:14px; box-shadow:0 24px 60px #0b2a2330;
  width:min(560px,90%); padding:32px 34px 28px;
}
.check-card-head{text-align:center; border-bottom:1px solid var(--line); padding-bottom:20px; margin-bottom:22px}
.check-card-head h2{font-size:24px; margin:0 0 10px; letter-spacing:-1px}
.check-card-head p{font-size:14px; color:var(--muted); margin:0}
.check-step-label{font-weight:600; font-size:16px; margin:0 0 14px}
.check-question{margin-bottom:28px}
.check-q{display:block; font-weight:600; font-size:14px; margin-bottom:12px}
.req{color:#c0453a}
.check-option{display:flex; align-items:center; gap:10px; font-size:14px; margin-bottom:10px; cursor:pointer}
.check-option input{width:18px; height:18px; accent-color:var(--green)}
.check-form-foot{display:flex; align-items:center; justify-content:space-between; gap:16px}
.check-progress{font-size:13px; color:var(--muted)}
.check-note{max-width:640px; margin:20px auto 0; text-align:center; font-size:13px; color:var(--muted)}
@media (max-width:680px){
  .check-wrap{overflow:visible}
  .check-photo{height:190px}
  .check-card{
    position:static; transform:none; width:100%; margin:-20px 0 0; padding:28px 20px 22px;
    border-radius:14px 14px 0 0;
  }
  .check-form-foot{flex-direction:column; align-items:stretch; gap:14px}
  .check-form-foot .button{justify-content:center}
  .check-progress{text-align:center}
}

/* ---------- misc ---------- */
.honesty{max-width:800px; font-size:13px; color:var(--muted); text-align:center; margin:24px auto 0}
.check-list{list-style:none; padding:0; margin:22px 0 26px}
.check-list li{padding:0 0 16px 28px; position:relative}
.check-list li:before{content:'\2713'; position:absolute; left:0; color:#668346}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .nav-row{display:grid; grid-template-columns:1fr auto 1fr; align-items:center; min-height:76px}
  .nav-toggle{display:flex; justify-self:start}
  .logo-link{justify-self:center}
  .site-nav{display:none}
  .nav-actions{justify-self:end}
  .nav-actions .nav-phone{display:none}
  .logo{width:150px}
  .nav-actions{gap:0}
  .nav-actions .button{padding:10px 14px; font-size:13px; gap:8px; white-space:nowrap}
  .cards,.product-grid{grid-template-columns:1fr 1fr}
  .steps,.visit-steps{grid-template-columns:1fr 1fr}
  .review-grid{grid-template-columns:1fr}
  .advice{grid-template-columns:1fr; padding:36px}
  .two-col,.contact-grid,.landing-hero-grid{grid-template-columns:1fr; gap:32px}
  .footer-grid{grid-template-columns:1fr 1fr; gap:26px}
}
@media (max-width:680px){
  .cards,.product-grid,.steps,.visit-steps{grid-template-columns:1fr}
  .faq{grid-template-columns:1fr; gap:30px}
  .footer-grid{grid-template-columns:1fr}
  .landing-hero h1{font-size:38px}
  .logo{width:130px}
  .nav-actions .button{padding:9px 12px; font-size:12.5px}
}