*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --pink:#E57689;--pink-light:#fdf0f2;--pink-mid:#fad8dd;
  --teal:#88CDCA;--teal-light:#eef8f8;--teal-mid:#c5e9e8;--teal-dark:#2a7a78;
  --black:#141414;--gray:#6b6b6b;--gray-light:#f5f5f3;--border:#e4e4e0;--white:#fff;
}
html{scroll-behavior:smooth}
body{font-family:'Plus Jakarta Sans',sans-serif;background:var(--white);color:var(--black)}
a{text-decoration:none}img{max-width:100%;display:block}

nav{position:sticky;top:0;z-index:200;background:rgba(255,255,255,0.96);backdrop-filter:blur(20px);border-bottom:1px solid var(--border);height:72px;padding:0 64px;display:flex;align-items:center;justify-content:space-between}
.nav-links{display:flex;gap:32px;list-style:none}
.nav-links a{font-size:14px;font-weight:500;color:var(--gray);transition:color .2s}
.nav-links a:hover{color:var(--black)}
.btn-cta{background:var(--pink);color:white;border:none;padding:10px 22px;border-radius:100px;font-family:inherit;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s}
.btn-cta:hover{background:#cf6070;transform:translateY(-1px)}

.page-hero{background:var(--black);padding:56px 64px 52px}
.hero-tag{display:inline-flex;align-items:center;gap:8px;background:rgba(136,205,202,.15);border:1px solid rgba(136,205,202,.3);border-radius:100px;padding:6px 16px;font-size:12px;font-weight:600;color:var(--teal);margin-bottom:16px}
.page-hero h1{font-size:clamp(28px,4vw,46px);font-weight:800;color:white;letter-spacing:-1px;margin-bottom:10px}
.page-hero p{font-size:15px;font-weight:300;color:rgba(255,255,255,0.5);max-width:560px}

.filter-bar{background:var(--white);border-bottom:1px solid var(--border);padding:0 64px;display:flex;overflow-x:auto;position:sticky;top:72px;z-index:100}
.filter-tab{padding:16px 24px;font-size:13px;font-weight:600;color:var(--gray);white-space:nowrap;cursor:pointer;border-bottom:3px solid transparent;transition:all .2s;background:none;border-top:none;border-left:none;border-right:none;font-family:inherit}
.filter-tab:hover{color:var(--black)}
.filter-tab.active{color:var(--pink);border-bottom-color:var(--pink)}

.section{padding:72px 64px;border-bottom:1px solid var(--border)}
.section.alt{background:var(--gray-light)}
.section-head{margin-bottom:40px}
.brand-badge{display:inline-flex;align-items:center;gap:8px;padding:7px 16px;border-radius:100px;font-size:12px;font-weight:700;margin-bottom:12px}
.brand-badge.toshiba{background:var(--pink);color:white}
.brand-badge.mitsubishi{background:#c00;color:white}
.brand-badge.daikin{background:#005bab;color:white}
.cat-label{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--pink);margin-bottom:8px}
.section-h2{font-size:clamp(22px,3vw,34px);font-weight:800;color:var(--black);letter-spacing:-.8px;margin-bottom:8px}
.section-sub{font-size:14px;font-weight:300;color:var(--gray);line-height:1.65;max-width:600px}

.sub-brand{display:flex;align-items:center;gap:16px;margin:48px 0 24px;padding-bottom:14px;border-bottom:2px solid var(--border)}
.sub-brand span{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gray)}

.products-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}

.prod-card{background:var(--white);border:1px solid var(--border);border-radius:16px;overflow:hidden;transition:all .3s}
.prod-card[onclick]{cursor:pointer}
.prod-card:hover{transform:translateY(-5px);box-shadow:0 20px 48px rgba(0,0,0,0.1);border-color:transparent}
.prod-img{height:240px;background:linear-gradient(145deg,#f8f8f8,#f0f0f0);display:flex;align-items:center;justify-content:center;padding:12px 20px;position:relative;border-bottom:1px solid var(--border)}
.prod-img img{width:100%;height:200px;max-height:200px;object-fit:contain;object-position:center;margin:0 auto;display:block;mix-blend-mode:multiply}
.energy-badge{position:absolute;top:12px;right:12px;background:#27ae60;color:white;font-size:10px;font-weight:800;padding:3px 8px;border-radius:4px;letter-spacing:.05em}
.aplus{background:#1a7a3e}
.brand-chip{position:absolute;top:12px;left:12px;font-size:9px;font-weight:700;padding:3px 8px;border-radius:4px;letter-spacing:.08em;text-transform:uppercase;color:white}
.chip-t{background:var(--pink)}
.chip-m{background:#c00}
.chip-d{background:#005bab}
.prod-body{padding:22px}
.prod-brand{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gray);margin-bottom:5px}
.prod-name{font-size:17px;font-weight:800;color:var(--black);margin-bottom:16px;letter-spacing:-.3px;line-height:1.2}
.prod-features{list-style:none;border-top:1px solid var(--border)}
.prod-features li{padding:9px 0;border-bottom:1px solid var(--border);font-size:12px;color:var(--gray);display:flex;align-items:center;justify-content:space-between}
.prod-features li:last-child{border-bottom:none}
.prod-features li strong{color:var(--black);font-weight:600;text-align:right}
.prod-cta-row{display:flex;align-items:center;justify-content:space-between;margin-top:16px;padding-top:14px;border-top:1px solid var(--border)}
.prod-link{font-size:12px;font-weight:700;color:var(--pink);display:inline-flex;align-items:center;gap:5px;transition:gap .2s}
.prod-link:hover{gap:9px}
.prod-colors{display:flex;gap:5px}
.cdot{width:13px;height:13px;border-radius:50%;border:1.5px solid var(--border)}

.cta-band{background:var(--pink);padding:56px 64px;display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap}
.cta-band h2{font-size:clamp(22px,3vw,34px);font-weight:800;color:white;letter-spacing:-.8px;margin-bottom:8px}
.cta-band p{font-size:14px;color:rgba(255,255,255,.7);max-width:420px}
.btn-white{background:white;color:var(--pink);border:none;padding:14px 28px;border-radius:100px;font-family:inherit;font-size:14px;font-weight:700;cursor:pointer;transition:all .2s;display:inline-flex;align-items:center;gap:8px}
.btn-white:hover{transform:translateY(-1px);opacity:.93}
.btn-wa{background:rgba(255,255,255,.15);color:white;border:1.5px solid rgba(255,255,255,.35);padding:14px 28px;border-radius:100px;font-size:14px;font-weight:600;display:inline-flex;align-items:center;gap:8px}
footer{background:var(--black);padding:40px 64px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px}
footer p{font-size:13px;color:rgba(255,255,255,.3)}
.ft-links{display:flex;gap:24px}
.ft-links a{font-size:13px;color:rgba(255,255,255,.35);transition:color .2s}
.ft-links a:hover{color:white}

@media(max-width:900px){.products-grid{grid-template-columns:1fr 1fr}}
@media(max-width:768px){
  nav{padding:0 20px;height:64px}.nav-links{display:none}
  .page-hero{padding:48px 24px 40px}.filter-bar{padding:0 16px}
  .section{padding:48px 24px}.cta-band{padding:40px 24px;flex-direction:column}
  footer{padding:32px 24px}
}
@media(max-width:520px){.products-grid{grid-template-columns:1fr}}

.pdm-overlay{position:fixed;inset:0;z-index:900;background:rgba(0,0,0,0.78);backdrop-filter:blur(8px);opacity:0;pointer-events:none;transition:opacity .3s;display:flex;align-items:center;justify-content:center;padding:20px}
.pdm-overlay.open{opacity:1;pointer-events:all}
.pdm-box{background:white;border-radius:24px;width:100%;max-width:820px;max-height:92vh;overflow:hidden;display:grid;grid-template-columns:1fr 1fr;transform:translateY(20px);transition:transform .3s;box-shadow:0 40px 80px rgba(0,0,0,0.3);position:relative}
.pdm-overlay.open .pdm-box{transform:translateY(0)}
.pdm-left{display:flex;align-items:center;justify-content:center;padding:40px 32px;border-right:1px solid var(--border);min-height:420px}
.pdm-left img{width:100%;height:300px;object-fit:contain;object-position:center;display:block}
.pdm-right{padding:32px;overflow-y:auto;max-height:92vh}
.pdm-close{position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:50%;background:var(--gray-light);border:none;cursor:pointer;font-size:15px;display:flex;align-items:center;justify-content:center;z-index:10;transition:background .2s}
.pdm-close:hover{background:var(--border)}
.pdm-brand-lbl{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gray);margin-bottom:5px}
.pdm-title{font-size:24px;font-weight:800;color:var(--black);letter-spacing:-.5px;margin-bottom:8px;line-height:1.15}
.pdm-sub{font-size:13px;color:var(--gray);font-weight:300;margin-bottom:16px;line-height:1.6}
.pdm-lbl{display:inline-block;background:#27ae60;color:white;font-size:10px;font-weight:800;padding:3px 10px;border-radius:4px;margin-bottom:14px;letter-spacing:.06em}
.pdm-lbl.app{background:#1a7a3e}
.pdm-specs{border-top:1px solid var(--border);margin-bottom:18px}
.pdm-row{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--border);font-size:12px}
.pdm-row span{color:var(--gray)}
.pdm-row strong{color:var(--black);font-weight:600}
.pdm-feats{display:flex;flex-direction:column;gap:7px;margin-bottom:20px}
.pdm-feat{display:flex;gap:8px;font-size:12px;color:var(--dark);line-height:1.4}
.pdm-feat-dot{width:18px;height:18px;border-radius:50%;background:var(--teal-light);display:flex;align-items:center;justify-content:center;font-size:9px;color:var(--teal-dark);flex-shrink:0;margin-top:1px}
.pdm-clrs{display:flex;gap:7px;margin-bottom:16px;align-items:center}
.pdm-clr{width:20px;height:20px;border-radius:50%;border:2px solid var(--border)}
.pdm-btns{display:flex;gap:8px;flex-wrap:wrap}
.pdm-btn{display:inline-flex;align-items:center;gap:6px;padding:11px 18px;border-radius:100px;font-size:12px;font-weight:700;text-decoration:none;transition:opacity .2s;color:white}
.pdm-btn:hover{opacity:.88}
.pdm-btn.wa{background:#25D366}
.pdm-btn.off{background:var(--pink)}
.pdm-btn.em{background:var(--teal-dark,#2a7a78)}
@media(max-width:680px){
  .pdm-box{grid-template-columns:1fr;max-height:95vh}
  .pdm-left{min-height:200px;border-right:none;border-bottom:1px solid var(--border);padding:24px}
  .pdm-left img{max-height:180px}
  .pdm-right{padding:20px 20px 28px}
  .pdm-title{font-size:19px}
}


/* Clickable product cards */
.prod-card[onclick]{cursor:pointer}
.prod-card[onclick]:hover::after{
  content:"Klik voor meer info →";
  position:absolute;bottom:0;left:0;right:0;
  background:rgba(229,118,137,0.9);
  color:white;font-size:11px;font-weight:700;
  text-align:center;padding:8px;
  pointer-events:none;
}
.prod-card{position:relative}