/* Comfort Home v38 – meer beweging: hero-slideshow, USP-ticker, oplossingen-slider en besparingscheck. */
:root{--v38-deep:#0b3a2e;--v38-deep2:#0f5140;--v38-green:#12a15a;--v38-green2:#12804f;--v38-lime:#b9f27c;--v38-ink:#13281f;--v38-mu:#5d6d66;--v38-soft:#f2f7f4;--v38-line:#e1ebe5;--v38-gold:#c9a55a}

/* scrollvoortgang */
.v38-prog{position:fixed;left:0;top:0;height:3px;width:100%;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,#3fd17f,#b9f27c);z-index:9999;pointer-events:none}

/* hero: wisselende achtergrond (Ken Burns) */
.x-hero.v38-has::before{opacity:0}
.v38-hbg{position:absolute;inset:0;overflow:hidden}
.v38-hbg i{position:absolute;inset:-2%;background:center/cover no-repeat;opacity:0;transform:scale(1.04);transition:opacity 1.6s ease}
.v38-hbg i.on{opacity:.55;animation:v38kb 9s ease-out forwards}
@keyframes v38kb{from{transform:scale(1.04)}to{transform:scale(1.13) translate(-1.2%,-1%)}}
.x-hero .x-eyebrow .v38-ew{transition:color .5s,text-shadow .5s}
.x-hero .x-eyebrow .v38-ew.on{color:#fff;text-shadow:0 0 18px rgba(185,242,124,.65)}

/* ticker */
.v38-tick{background:var(--v38-deep);color:#e6f3ec;overflow:hidden;border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.06)}
.v38-tick-t{display:flex;width:max-content;animation:v38tick 38s linear infinite}
.v38-tick:hover .v38-tick-t{animation-play-state:paused}
.v38-tick ul{display:flex;margin:0;padding:0;list-style:none}
.v38-tick li{display:flex;align-items:center;gap:10px;padding:15px 26px;font-weight:700;font-size:14.5px;white-space:nowrap}
.v38-tick li::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--v38-lime);margin-left:26px;opacity:.75}
.v38-tick b{color:var(--v38-lime)}
@keyframes v38tick{to{transform:translateX(-50%)}}

/* oplossingen-slider */
.v38-show{padding:clamp(56px,7vw,96px) 0;background:linear-gradient(180deg,#fff,var(--v38-soft))}
.v38-show .v38-head{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:26px}
.v38-show .v38-head p{margin:8px 0 0;color:var(--v38-mu);max-width:560px;font-size:17px;line-height:1.6}
.v38-k{display:inline-block;font-weight:800;font-size:13px;color:var(--v38-green2);letter-spacing:.02em}
.v38-h2{font-size:clamp(30px,3.6vw,46px);line-height:1.08;letter-spacing:-.02em;margin:8px 0 0;color:var(--v38-ink)}
.v38-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:0 0 18px}
.v38-tab{appearance:none;border:0;background:#fff;border-radius:14px;padding:14px 16px 16px;text-align:left;cursor:pointer;box-shadow:0 0 0 1px var(--v38-line);font:inherit;color:var(--v38-ink);position:relative;overflow:hidden;transition:box-shadow .25s,transform .25s}
.v38-tab:hover{transform:translateY(-2px)}
.v38-tab b{display:block;font-size:15.5px}
.v38-tab small{display:block;color:var(--v38-mu);font-size:12.5px;margin-top:2px}
.v38-tab .bar{position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--v38-line)}
.v38-tab .bar i{display:block;height:100%;width:0;background:var(--v38-green)}
.v38-tab.on{box-shadow:0 0 0 2px var(--v38-green),0 14px 30px rgba(11,58,46,.1)}
.v38-tab.on .bar i{animation:v38bar var(--dur,7s) linear forwards}
.v38-show.paused .v38-tab.on .bar i{animation-play-state:paused}
.v38-tab.done .bar i{width:100%}
@keyframes v38bar{to{width:100%}}
.v38-track{display:grid;grid-auto-flow:column;grid-auto-columns:100%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;border-radius:28px;box-shadow:0 30px 70px -30px rgba(11,58,46,.35)}
.v38-track::-webkit-scrollbar{display:none}
.v38-slide{scroll-snap-align:start;display:grid;grid-template-columns:1.1fr .9fr;min-height:520px;background:var(--v38-deep);color:#fff}
.v38-ph{position:relative;overflow:hidden;min-height:300px}
.v38-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.02);transition:transform 7s ease-out}
.v38-slide.on .v38-ph img{transform:scale(1.1)}
.v38-ph::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 55%,rgba(11,58,46,.9)),linear-gradient(0deg,rgba(4,30,23,.55),transparent 45%)}
.v38-badge{position:absolute;left:22px;bottom:22px;z-index:1;background:rgba(255,255,255,.96);color:var(--v38-ink);border-radius:18px;padding:14px 18px;box-shadow:0 18px 40px rgba(0,0,0,.25);transform:translateY(16px);opacity:0;transition:transform .6s cubic-bezier(.2,.8,.2,1) .25s,opacity .6s .25s}
.v38-slide.on .v38-badge{transform:none;opacity:1}
.v38-badge small{display:block;font-size:12px;font-weight:700;color:var(--v38-mu)}
.v38-badge b{display:block;font-size:26px;line-height:1.15;color:var(--v38-green2);margin-top:2px}
.v38-badge em{font-style:normal;font-size:12px;color:var(--v38-mu)}
.v38-tx{padding:clamp(28px,4vw,52px);display:flex;flex-direction:column;justify-content:center;background:radial-gradient(600px 300px at 100% 0,rgba(63,209,127,.2),transparent 60%),var(--v38-deep)}
.v38-tx>*{transform:translateY(14px);opacity:0;transition:transform .6s cubic-bezier(.2,.8,.2,1),opacity .6s}
.v38-slide.on .v38-tx>*{transform:none;opacity:1}
.v38-slide.on .v38-tx>*:nth-child(2){transition-delay:.06s}.v38-slide.on .v38-tx>*:nth-child(3){transition-delay:.12s}.v38-slide.on .v38-tx>*:nth-child(4){transition-delay:.18s}.v38-slide.on .v38-tx>*:nth-child(5){transition-delay:.24s}.v38-slide.on .v38-tx>*:nth-child(6){transition-delay:.3s}
.v38-tx .v38-k{color:var(--v38-lime)}
.v38-tx h3{font-size:clamp(26px,2.8vw,38px);line-height:1.1;letter-spacing:-.015em;margin:10px 0 12px;color:#fff}
.v38-tx p{margin:0 0 18px;color:#cfe0d8;font-size:16px;line-height:1.6}
.v38-chips{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 18px}
.v38-chips div{background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);border-radius:14px;padding:12px 14px}
.v38-chips small{display:block;font-size:12px;font-weight:700;color:#a9d8bf}
.v38-chips b{display:block;font-size:17px;margin-top:3px;color:#fff}
.v38-ul{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:7px}
.v38-ul li{display:flex;gap:10px;align-items:flex-start;font-size:15px;color:#e6f3ec}
.v38-ul li::before{content:"✓";flex:none;width:20px;height:20px;border-radius:50%;background:var(--v38-green);color:#fff;font-size:12px;font-weight:800;display:grid;place-items:center;margin-top:1px}
.v38-acts{display:flex;flex-wrap:wrap;gap:10px}
.v38-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;cursor:pointer;font:inherit;font-weight:800;font-size:15px;padding:15px 22px;border-radius:12px;text-decoration:none;transition:transform .2s,box-shadow .2s,background .2s;position:relative;overflow:hidden}
.v38-btn:hover{transform:translateY(-2px)}
.v38-btn.lime{background:var(--v38-lime);color:var(--v38-deep);box-shadow:0 10px 24px -8px rgba(185,242,124,.6)}
.v38-btn.green{background:var(--v38-green);color:#fff;box-shadow:0 10px 24px -8px rgba(18,161,90,.6)}
.v38-btn.ghost{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.4)}
.v38-btn.line{background:#fff;color:var(--v38-deep);box-shadow:inset 0 0 0 1.5px var(--v38-line)}
.v38-btn.lime::after,.v38-btn.green::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-18deg);animation:v38shine 4.5s ease-in-out infinite}
@keyframes v38shine{0%,70%{left:-60%}100%{left:130%}}
.v38-fine{margin:14px 2px 0;font-size:12.5px;color:var(--v38-mu)}
.v38-nav{display:flex;gap:8px}
.v38-nav button{width:46px;height:46px;border-radius:50%;border:0;background:#fff;box-shadow:0 0 0 1px var(--v38-line);cursor:pointer;font-size:20px;color:var(--v38-deep);transition:transform .2s,background .2s}
.v38-nav button:hover{transform:scale(1.06);background:var(--v38-soft)}

/* besparingscheck */
.v38-calcs{padding:clamp(56px,7vw,92px) 0}
.v38-calc-box{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(24px,4vw,56px);align-items:center;background:radial-gradient(700px 360px at 0 0,rgba(63,209,127,.22),transparent 60%),linear-gradient(135deg,var(--v38-deep),var(--v38-deep2));border-radius:30px;padding:clamp(26px,4.5vw,56px);color:#fff;box-shadow:0 30px 70px -30px rgba(11,58,46,.45);position:relative;overflow:hidden}
.v38-calc-box .v38-k{color:var(--v38-lime)}
.v38-calc-box h2{font-size:clamp(28px,3.4vw,44px);line-height:1.08;margin:8px 0 12px;letter-spacing:-.02em;color:#fff}
.v38-calc-box>div>p{color:#cfe0d8;font-size:16.5px;line-height:1.6;margin:0 0 20px}
.v38-form{display:grid;grid-template-columns:1.2fr .8fr auto;gap:10px}
.v38-form input{font:inherit;font-size:16px;padding:15px 16px;border-radius:12px;border:0;background:#fff;color:var(--v38-ink);min-width:0;box-shadow:inset 0 0 0 1.5px transparent;transition:box-shadow .2s}
.v38-form input:focus{outline:0;box-shadow:inset 0 0 0 2px var(--v38-green),0 0 0 4px rgba(185,242,124,.35)}
.v38-form .v38-btn{white-space:nowrap}
.v38-msg{min-height:20px;margin:10px 2px 0;font-size:13.5px;color:#cfe0d8}
.v38-msg.err{color:#ffd7a8}
.v38-pts{display:flex;flex-wrap:wrap;gap:8px 18px;margin:14px 0 0;padding:0;list-style:none;font-size:13.5px;color:#cfe0d8}
.v38-pts li::before{content:"✓ ";color:var(--v38-lime);font-weight:800}
.v38-res{background:#fff;color:var(--v38-ink);border-radius:22px;padding:22px;box-shadow:0 24px 60px rgba(0,0,0,.25);min-height:330px;display:flex;flex-direction:column}
.v38-res-h{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:12px}
.v38-res-h small{display:block;font-size:12.5px;font-weight:700;color:var(--v38-mu)}
.v38-res-h b{display:block;font-size:30px;line-height:1.1;color:var(--v38-green2);margin-top:4px}
.v38-res-h em{font-style:normal;display:block;font-size:12.5px;color:var(--v38-mu);margin-top:3px}
.v38-res-h .tag{flex:none;font-size:12px;font-weight:800;background:#e9f7ef;color:var(--v38-green2);border-radius:999px;padding:6px 10px}
.v38-rows{display:grid;gap:9px;flex:1}
.v38-row{display:grid;grid-template-columns:1fr auto;gap:4px 12px;align-items:center;background:var(--v38-soft);border-radius:14px;padding:12px 14px;border:0;font:inherit;color:inherit;text-align:left;cursor:pointer;transition:transform .2s,box-shadow .2s}
.v38-row:hover{transform:translateY(-1px);box-shadow:0 0 0 2px var(--v38-green)}
.v38-row.focus{box-shadow:0 0 0 2px var(--v38-green);background:#e9f7ef}
.v38-row b{font-size:15px}
.v38-row strong{font-size:15.5px;color:var(--v38-green2);white-space:nowrap}
.v38-row .bar{grid-column:1/-1;height:8px;border-radius:5px;background:#dfe9e3;overflow:hidden}
.v38-row .bar i{display:block;height:100%;width:0;border-radius:5px;background:linear-gradient(90deg,#3fd17f,#12a15a);transition:width 1.1s cubic-bezier(.2,.8,.2,1) var(--d,0ms)}
.v38-res.in .v38-row .bar i{width:var(--w)}
.v38-row small{grid-column:1/-1;font-size:12.5px;color:var(--v38-mu)}
.v38-res-f{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.v38-res-f .v38-btn{padding:13px 18px;font-size:14.5px}
.v38-res .note{font-size:11.5px;color:var(--v38-mu);margin:10px 0 0}
.v38-skel .v38-row{cursor:default}
.v38-skel .v38-row b,.v38-skel .v38-row strong{color:transparent;background:linear-gradient(90deg,#e6eee9,#f4f8f6,#e6eee9);background-size:200% 100%;border-radius:6px;animation:v38sk 1.2s linear infinite}
@keyframes v38sk{to{background-position:-200% 0}}
.v38-demo{font-size:12px;font-weight:800;color:var(--v38-gold);letter-spacing:.02em}

@media(max-width:980px){
 .v38-slide{grid-template-columns:1fr}
 .v38-ph{min-height:260px}.v38-ph::after{background:linear-gradient(0deg,rgba(11,58,46,.9),transparent 55%)}
 .v38-calc-box{grid-template-columns:1fr}
}
@media(max-width:700px){
 .v38-tabs{grid-template-columns:repeat(4,minmax(140px,1fr));overflow-x:auto;scrollbar-width:none;margin:0 -16px 14px;padding:2px 16px 4px}
 .v38-tabs::-webkit-scrollbar{display:none}
 .v38-show .v38-head{flex-direction:column;align-items:flex-start}
 .v38-nav{display:none}
 .v38-chips{grid-template-columns:1fr}
 .v38-form{grid-template-columns:1fr 1fr}.v38-form .v38-btn{grid-column:1/-1}
 .v38-track{border-radius:22px}
 .v38-tick li{padding:13px 18px;font-size:13.5px}
}
@media(prefers-reduced-motion:reduce){
 .v38-hbg i.on{animation:none}.v38-tick-t{animation:none}.v38-btn::after{animation:none!important}
 .v38-ph img,.v38-tx>*,.v38-badge{transition:none!important}
 .v38-tab.on .bar i{animation:none;width:100%}
 .v38-row .bar i{transition:none}
}
.v38-wrap{width:min(1200px,100% - 32px);margin:0 auto}
@media(min-width:701px){.v38-wrap{width:min(1200px,100% - 64px)}}
@media(max-width:700px){
 .x-hero .x-eyebrow{white-space:normal;line-height:1.7;font-size:12.5px}
 .v38-tabs{grid-template-columns:repeat(4,minmax(150px,1fr))}
 .v38-tab b{font-size:14.5px;white-space:nowrap}
 .v38-row{padding:12px}
 .v38-row b{font-size:14px;white-space:nowrap}
 .v38-row strong{font-size:14px}
 .v38-res{padding:18px}
 .v38-res-h b{font-size:26px}
 .v38-res-h b span{display:inline-block}
 .v38-slide .v38-acts .v38-btn{flex:1 1 100%}
}