/* Vernast — Kelderplafond isoleren met PUR (aanvullend op kelder.css) */
/* btn-outline op rode achtergrond: witte tekst blijft leesbaar op hover */
.tech-section .btn-outline{background:transparent}
.tech-section .btn-outline:hover{background:rgba(255,255,255,.14);border-color:#fff;color:#fff}

/* mobiel: hero-CTAs stacked en compacter (kelderplafond-isoleren) */
@media (max-width:640px){
  .hero-cta{flex-direction:column;gap:10px;align-items:stretch}
  .hero-cta .btn{width:100%;padding:11px 18px;font-size:13.5px;gap:8px;justify-content:center;text-align:center;white-space:normal}
  .hero-cta .btn svg{width:14px;height:14px}
  /* andere knoppen elders op de pagina ook compacter */
  .btn{padding:12px 20px;font-size:14px;gap:8px}
  .btn svg{width:15px;height:15px}
}

/* symptomen-checklist */
.symp{display:grid;grid-template-columns:1fr;gap:9px;margin-top:20px}
.symp .s{display:flex;gap:11px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:11px;padding:12px 15px;font-size:14.5px;font-weight:600;color:var(--ink);box-shadow:var(--shadow-sm);transition:transform .25s,box-shadow .25s,border-color .25s}
.symp .s:hover{transform:translateX(4px);border-color:rgba(158,0,15,.25)}
.symp .s svg{width:16px;height:16px;flex:none;color:var(--red);margin-top:2px}
/* diagram zonder/met */
.di-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:48px;max-width:920px;margin-left:auto;margin-right:auto}
.di{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:26px 24px;box-shadow:0 18px 50px rgba(20,8,8,.18)}
.di .dl{display:flex;align-items:center;justify-content:center;gap:8px;font-size:11.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--text-dim);margin-bottom:18px}
.di .dl .dot{width:8px;height:8px;border-radius:50%;background:#8fb7ff}
.di .dl .dot.good{background:#10B981}
.di .stack{display:grid;gap:7px}
.di .band{border-radius:11px;padding:14px 17px;font-weight:700;font-size:14px;display:flex;justify-content:space-between;align-items:center;gap:10px;transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1)}
.di .band .t{font-size:11.5px;font-weight:600;opacity:.75;text-align:right}
.band.warm{background:var(--red-soft);color:var(--red-dark)}
.band.floor{background:#f0efee;color:var(--ink)}
.band.pur{background:repeating-linear-gradient(-45deg,rgba(255,255,255,.07) 0 8px,transparent 8px 16px),linear-gradient(90deg,var(--red-dark),var(--red));color:#fff;box-shadow:0 8px 24px rgba(158,0,15,.35);padding:17px}
.band.pur .t{opacity:.9}
.band.cold{background:#e6edf5;color:#5a6a7d}
.di .fl{display:flex;align-items:center;justify-content:center;gap:8px;padding:3px 0;font-size:12px;font-weight:700;color:var(--red);transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1)}
.di .fl svg{width:16px;height:16px}
.di .fl.ok{color:#10B981}
@keyframes heatfall{0%{transform:translateY(-7px);opacity:0}35%{opacity:1}100%{transform:translateY(9px);opacity:0}}
.di .fl.anim svg{animation:heatfall 2s ease-in-out infinite}
.di .fl.anim.late svg{animation-delay:1s}
/* staggered opbouw bij reveal */
.di.reveal.pending .stack>*{opacity:0;transform:translateY(14px)}
.di.reveal.pending.in .stack>*{opacity:1;transform:none}
.di.reveal.pending.in .stack>*:nth-child(2){transition-delay:.1s}
.di.reveal.pending.in .stack>*:nth-child(3){transition-delay:.2s}
.di.reveal.pending.in .stack>*:nth-child(4){transition-delay:.3s}
.di.reveal.pending.in .stack>*:nth-child(5){transition-delay:.4s}
@media (max-width:760px){.di-grid{grid-template-columns:1fr}}
/* dikte-balken */
.dikte{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:34px 36px;box-shadow:var(--shadow-sm);margin-top:48px;display:grid;gap:18px}
.drow{display:grid;grid-template-columns:92px 1fr 170px;gap:18px;align-items:center}
.drow .dlab{font-weight:800;font-size:15px;color:var(--ink);white-space:nowrap}
.drow .dnote{font-size:13px;color:var(--text-mid);line-height:1.4}
.drow .dnote b{color:var(--red);display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.dbar{height:36px;background:var(--bg-soft);border-radius:10px;overflow:hidden}
.dbar span{display:flex;align-items:center;justify-content:flex-end;padding:0 13px;height:100%;background:linear-gradient(90deg,var(--red-dark),var(--red));border-radius:10px;width:var(--w);min-width:92px;color:#fff;font-weight:800;font-size:13px;white-space:nowrap;transition:width 1.3s cubic-bezier(.16,1,.3,1)}
.reveal.pending:not(.in) .dbar span{width:0;min-width:0;padding:0}
@media (max-width:760px){.drow{grid-template-columns:70px 1fr}.drow .dnote{grid-column:1/-1;margin-top:-8px}}
/* ubar animatie (koudebrug) */
.ubar span{transition:width 1.2s cubic-bezier(.16,1,.3,1)}
.reveal.pending:not(.in) .ubar span{width:0!important}
/* foto's */
.hero-media img.hphoto{width:100%;height:440px;object-fit:cover;border-radius:var(--radius-lg);box-shadow:0 30px 70px rgba(0,0,0,.35);display:block}
.zs-media img.zphoto{width:100%;height:440px;object-fit:cover;border-radius:var(--radius-lg);box-shadow:var(--shadow);display:block}
.ph2{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:44px}
.ph2 figure{margin:0;position:relative;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow)}
.ph2 img{width:100%;height:320px;object-fit:cover;display:block;transition:transform .7s ease}
.ph2 figure:hover img{transform:scale(1.05)}
.ph2 figcaption{position:absolute;left:0;right:0;bottom:0;padding:36px 20px 15px;background:linear-gradient(transparent,rgba(0,0,0,.68));color:#fff;font-size:13.5px;font-weight:700}
.gal-grid img{width:100%;height:100%;object-fit:cover;border-radius:var(--radius);box-shadow:var(--shadow-sm);display:block}
@media (max-width:760px){.ph2{grid-template-columns:1fr}.ph2 img{height:240px}}
/* hover-lifts */
.watch,.layer,.spec{transition:transform .25s,box-shadow .25s,border-color .25s}
.watch:hover,.layer:hover,.spec:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:rgba(158,0,15,.2)}