:root{
  --oranje:#EF8A1F;
  --oranje-deep:#D8730E;
  --oranje-donker:#B95F08;
  --oranje-licht:#F7A94E;
  --oranje-glow:rgba(239,138,31,.5);
  --zwart:#1A1512;
  --zwart-2:#241E19;
  --zwart-3:#2F2822;
  --paper:#FBF8F4;
  --white:#FFFFFF;
  --line:rgba(26,21,18,.10);
  --line-light:rgba(255,255,255,.13);
  --shadow-lg:0 30px 70px rgba(26,21,18,.15);
  --radius:22px;
  --font-display:"Bricolage Grotesque",sans-serif;
  --font-body:"Schibsted Grotesk",sans-serif;
  --font-mono:"Spline Sans Mono",monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--font-body);color:var(--zwart);background:var(--paper);line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
::selection{background:var(--zwart);color:var(--oranje)}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.container{max-width:1180px;margin:0 auto;padding:0 24px}
.eyebrow{font-family:var(--font-mono);font-size:.76rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--oranje-deep);display:inline-flex;align-items:center;gap:12px}
.eyebrow::before{content:"";width:30px;height:2px;background:var(--oranje);border-radius:2px}
h1,h2,h3{font-family:var(--font-display);line-height:1.06;letter-spacing:-.015em}
h2{font-size:clamp(2rem,4.2vw,3.1rem);font-weight:800;margin:16px 0 18px}
.section{padding:110px 0}
.section-head{max-width:660px;margin-bottom:58px}
.section-head p{color:rgba(26,21,18,.62);font-size:1.08rem}

/* ---------- NAV ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;transition:background .35s,box-shadow .35s,padding .35s;padding:20px 0}
.nav.scrolled{background:rgba(26,21,18,.93);backdrop-filter:blur(16px);box-shadow:0 6px 34px rgba(0,0,0,.35);padding:13px 0}
.nav-inner{display:flex;align-items:center;justify-content:space-between}
.logo{font-family:var(--font-display);font-weight:800;font-size:1.4rem;color:var(--zwart);letter-spacing:.02em;display:flex;align-items:center;gap:10px;transition:color .35s}
.nav.scrolled .logo{color:var(--white)}
.logo-mark{width:34px;height:40px;border-radius:7px;border:3px solid currentColor;position:relative;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.logo-mark::before{content:"";position:absolute;top:4px;left:4px;width:11px;height:3px;border-radius:2px;background:currentColor}
.logo-mark::after{content:"";width:16px;height:16px;border-radius:50%;border:3px solid currentColor;margin-top:6px}
.logo small{font-family:var(--font-mono);font-size:.55rem;font-weight:600;letter-spacing:.34em;display:block;line-height:1;margin-top:2px}
.logo .wordmark{display:flex;flex-direction:column}
.nav-links{display:flex;gap:36px;align-items:center}
.nav-links a{color:rgba(26,21,18,.85);font-weight:600;font-size:.95rem;transition:color .35s;position:relative}
.nav.scrolled .nav-links a{color:rgba(255,255,255,.85)}
.nav-links a:not(.nav-cta)::after{content:"";position:absolute;left:0;bottom:-6px;width:0;height:2px;background:currentColor;border-radius:2px;transition:width .25s}
.nav-links a:not(.nav-cta):hover::after{width:100%}
.nav-cta{background:var(--zwart);color:var(--white)!important;font-weight:700;padding:12px 24px;border-radius:100px;transition:transform .2s,box-shadow .2s,background .35s}
.nav.scrolled .nav-cta{background:var(--oranje);color:var(--zwart)!important}
.nav-cta:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(26,21,18,.3)}
.nav-cta::after{display:none}
.nav-toggle{display:none;background:none;border:0;cursor:pointer;width:44px;height:44px;position:relative;z-index:110}
.nav-toggle span{display:block;width:24px;height:2px;background:var(--zwart);margin:5px auto;border-radius:2px;transition:.3s}
.nav.scrolled .nav-toggle span,.nav-toggle.open span{background:#fff}

/* ---------- HERO : gevel oranje met zonnestralen ---------- */
.hero{background:
  repeating-conic-gradient(from 0deg at 78% 24%,rgba(255,255,255,.09) 0deg 5deg,rgba(255,255,255,0) 5deg 11deg),
  radial-gradient(900px 600px at 78% 24%,var(--oranje-licht),transparent 65%),
  linear-gradient(160deg,var(--oranje) 0%,var(--oranje-deep) 78%,var(--oranje-donker) 100%);
  color:var(--zwart);padding:180px 0 120px;position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:120px;background:linear-gradient(to top,rgba(185,95,8,.35),transparent);pointer-events:none}
.hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:56px;align-items:center;position:relative;z-index:1}
.hero .eyebrow{color:var(--zwart)}
.hero .eyebrow::before{display:none}
.hero h1{font-size:clamp(2.7rem,6.2vw,4.5rem);font-weight:800;margin:20px 0 24px;color:var(--zwart)}
.hero h1 em{font-style:normal;white-space:nowrap;position:relative;color:var(--white);text-shadow:0 3px 22px rgba(185,95,8,.5)}
.hero p.lead{font-size:1.16rem;color:rgba(26,21,18,.78);max-width:480px;margin-bottom:36px;font-weight:500}
.hero-ctas{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:48px}
.btn{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:1rem;padding:17px 32px;border-radius:100px;transition:transform .22s,box-shadow .22s;cursor:pointer;border:0;font-family:var(--font-body);position:relative;overflow:hidden}
.btn-zwart{background:linear-gradient(140deg,var(--zwart),var(--zwart-3));color:var(--white)}
.btn-zwart::before{content:"";position:absolute;top:0;left:-80%;width:50%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.25),transparent);transform:skewX(-20deg);transition:left .55s}
.btn-zwart:hover::before{left:130%}
.btn-zwart:hover{transform:translateY(-3px);box-shadow:0 14px 36px rgba(26,21,18,.4)}
.btn-wit{background:rgba(255,255,255,.92);color:var(--zwart)}
.btn-wit:hover{transform:translateY(-3px);box-shadow:0 14px 32px rgba(185,95,8,.4);background:#fff}
.btn-oranje{background:linear-gradient(120deg,var(--oranje-deep),var(--oranje) 55%,var(--oranje-deep));color:var(--zwart)}
.btn-oranje::before{content:"";position:absolute;top:0;left:-80%;width:50%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-20deg);transition:left .55s}
.btn-oranje:hover::before{left:130%}
.btn-oranje:hover{transform:translateY(-3px);box-shadow:0 14px 36px var(--oranje-glow)}
.hero-stats{display:flex;border-top:1.5px solid rgba(26,21,18,.22);padding-top:28px;max-width:540px}
.hero-stat{flex:1;padding-right:26px}
.hero-stat+.hero-stat{border-left:1.5px solid rgba(26,21,18,.22);padding-left:26px}
.hero-stat b{display:block;font-family:var(--font-mono);font-size:1.55rem;font-weight:700;color:var(--zwart)}
.hero-stat small{color:rgba(26,21,18,.68);font-size:.84rem;line-height:1.45;display:block;margin-top:5px;font-weight:500}

/* ---------- WASMACHINE ---------- */
.wm-wrap{display:flex;justify-content:center;position:relative}
.wasmachine{width:min(400px,84vw);background:linear-gradient(165deg,#FFFFFF,#E8E4DE 85%,#D6D0C8);border-radius:24px 24px 18px 18px;box-shadow:0 55px 100px rgba(90,45,0,.45),inset 0 2px 0 rgba(255,255,255,.9),inset 0 -4px 10px rgba(0,0,0,.08);position:relative}
.wasmachine::after{content:"";position:absolute;left:26px;right:26px;bottom:-14px;height:14px;background:linear-gradient(#B8B2A9,#8F887E);border-radius:0 0 8px 8px;clip-path:polygon(0 0,7% 0,7% 100%,0 100%) }
.wm-voet-l,.wm-voet-r{position:absolute;bottom:-14px;width:34px;height:14px;background:linear-gradient(#A39C92,#6E675E);border-radius:0 0 6px 6px}
.wm-voet-l{left:30px}.wm-voet-r{right:30px}
.wm-panel{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:20px 24px 16px;border-bottom:2px solid rgba(26,21,18,.08)}
.wm-brand{font-family:var(--font-display);font-weight:800;font-size:1rem;letter-spacing:.06em;color:var(--zwart)}
.wm-brand span{color:var(--oranje-deep)}
.wm-display{background:linear-gradient(170deg,#181310,#0B0908);border-radius:9px;padding:8px 14px;font-family:var(--font-mono);font-weight:700;font-size:1.05rem;color:var(--oranje);text-shadow:0 0 14px var(--oranje-glow);box-shadow:inset 0 2px 6px rgba(0,0,0,.7),0 1px 0 rgba(255,255,255,.5);min-width:86px;text-align:center;letter-spacing:.06em}
.wm-knob{width:40px;height:40px;border-radius:50%;background:radial-gradient(circle at 34% 28%,#FFFFFF,#C9C2B8 70%,#A59D91);box-shadow:0 3px 7px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.9);position:relative;flex-shrink:0}
.wm-knob::after{content:"";position:absolute;top:5px;left:50%;width:3px;height:11px;background:var(--zwart);border-radius:2px;transform:translateX(-50%)}
.wm-sub{display:flex;align-items:center;gap:12px;padding:12px 24px;border-bottom:2px solid rgba(26,21,18,.08)}
.wm-drawer{width:76px;height:20px;border-radius:5px;background:linear-gradient(#F2EEE8,#D9D3CB);box-shadow:inset 0 -2px 4px rgba(0,0,0,.12),0 1px 0 rgba(255,255,255,.8);position:relative}
.wm-drawer::after{content:"";position:absolute;right:7px;top:50%;transform:translateY(-50%);width:22px;height:4px;border-radius:2px;background:rgba(26,21,18,.35)}
.wm-btn{width:13px;height:13px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#B9B2A7);box-shadow:0 1px 3px rgba(0,0,0,.25)}
.wm-btn.actief{background:radial-gradient(circle at 35% 30%,var(--oranje-licht),var(--oranje-deep));box-shadow:0 0 8px var(--oranje-glow)}
.wm-lampje{margin-left:auto;font-family:var(--font-mono);font-size:.62rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(26,21,18,.5);display:flex;align-items:center;gap:7px}
.wm-lampje i{width:8px;height:8px;border-radius:50%;background:#3BB273;box-shadow:0 0 8px rgba(59,178,115,.7);animation:knipper 2.4s ease-in-out infinite}
@keyframes knipper{0%,100%{opacity:1}50%{opacity:.35}}
.wm-front{padding:30px 34px 36px;display:flex;justify-content:center}
.porthole{width:100%;aspect-ratio:1;border-radius:50%;position:relative;background:linear-gradient(145deg,#F4F0EB,#B5AEA4);box-shadow:0 14px 34px rgba(0,0,0,.22),inset 0 2px 6px rgba(255,255,255,.85),inset 0 -3px 8px rgba(0,0,0,.15);padding:20px}
.bolt{position:absolute;width:9px;height:9px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#FCF9F5,#8C8479);box-shadow:inset 0 -1px 2px rgba(0,0,0,.4),0 1px 2px rgba(255,255,255,.6)}
.porthole-ring{width:100%;height:100%;border-radius:50%;background:linear-gradient(145deg,#A29A8F,#ECE6DE 60%,#ABA298);padding:12px;box-shadow:inset 0 4px 12px rgba(0,0,0,.28)}
.porthole-glass{width:100%;height:100%;border-radius:50%;background:radial-gradient(circle at 30% 26%,rgba(255,255,255,.34),transparent 42%),linear-gradient(200deg,#221E1A,#0E0C0A);position:relative;overflow:hidden;box-shadow:inset 0 0 42px rgba(0,0,0,.6)}
.porthole-glass::after{content:"";position:absolute;top:8%;left:12%;width:38%;height:22%;border-radius:50%;background:linear-gradient(160deg,rgba(255,255,255,.26),transparent 70%);transform:rotate(-18deg);pointer-events:none}
.drum{position:absolute;inset:-25%;background:conic-gradient(from 0deg,rgba(239,138,31,0) 0deg,rgba(239,138,31,.6) 60deg,rgba(247,169,78,.3) 120deg,rgba(255,222,180,.35) 200deg,rgba(239,138,31,0) 300deg);animation:spin 8s linear infinite;filter:blur(16px)}
.suds{position:absolute;bottom:-10%;left:0;right:0;height:55%;background:radial-gradient(ellipse at 50% 100%,rgba(255,190,120,.45),rgba(239,138,31,.14) 60%,transparent);animation:slosh 5.5s ease-in-out infinite alternate}
.bubble{position:absolute;bottom:-30px;border-radius:50%;background:radial-gradient(circle at 32% 30%,rgba(255,255,255,.85),rgba(255,255,255,.12) 60%,transparent);animation:rise linear infinite}
.wm-badge{position:absolute;bottom:6%;right:-6%;background:var(--zwart);color:var(--white);font-family:var(--font-mono);font-weight:700;font-size:.85rem;padding:13px 20px;border-radius:16px;box-shadow:0 18px 40px rgba(0,0,0,.4);transform:rotate(-3deg);z-index:2}
.wm-badge b{display:block;font-size:1.3rem;color:var(--oranje)}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes slosh{from{transform:translateX(-6%) scaleY(1)}to{transform:translateX(6%) scaleY(1.08)}}
@keyframes rise{from{transform:translateY(0);opacity:0}10%{opacity:1}to{transform:translateY(-380px) translateX(20px);opacity:0}}

/* ---------- MARQUEE ---------- */
.marquee{background:var(--zwart);overflow:hidden;padding:18px 0;position:relative}
.marquee-track{display:flex;width:max-content;animation:scroll 30s linear infinite}
.marquee-item{font-family:var(--font-mono);font-weight:700;font-size:.88rem;letter-spacing:.22em;text-transform:uppercase;color:var(--oranje);display:flex;align-items:center;gap:34px;padding-right:34px;white-space:nowrap}
.marquee-item i{width:7px;height:7px;border-radius:50%;background:var(--oranje);flex-shrink:0;opacity:.6}
@keyframes scroll{to{transform:translateX(-50%)}}

/* ---------- USP STRIP ---------- */
.usp-strip{background:var(--zwart-2)}
.usp-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.usp{padding:32px 28px;border-left:1px solid var(--line-light);color:rgba(255,255,255,.85);display:flex;gap:15px;align-items:flex-start}
.usp:first-child{border-left:0}
.usp svg{flex-shrink:0;margin-top:3px}
.usp b{display:block;color:#fff;font-weight:600;font-size:.99rem}
.usp small{font-size:.85rem;color:rgba(255,255,255,.52);line-height:1.5;display:block}

/* ---------- TARIEVEN ---------- */
.machine-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-bottom:24px}
.machine-card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:32px 30px 30px;position:relative;transition:transform .28s,box-shadow .28s,border-color .28s;overflow:hidden}
.machine-card:hover{transform:translateY(-7px);box-shadow:var(--shadow-lg);border-color:rgba(239,138,31,.5)}
.machine-card::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--oranje),var(--oranje-licht))}
.machine-card.featured::before{background:linear-gradient(90deg,var(--oranje-deep),var(--oranje))}
.machine-card.featured{background:var(--zwart);border-color:var(--zwart);color:var(--white);box-shadow:0 24px 56px rgba(26,21,18,.32)}
.machine-card.featured:hover{border-color:var(--oranje)}
.machine-card.featured .cap{color:rgba(255,255,255,.6)}
.machine-tag{position:absolute;top:20px;right:20px;background:linear-gradient(120deg,var(--oranje-deep),var(--oranje));color:var(--zwart);font-family:var(--font-mono);font-size:.67rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;padding:6px 12px;border-radius:100px;box-shadow:0 6px 16px var(--oranje-glow)}
.machine-kg{font-family:var(--font-mono);font-size:.79rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--oranje-deep);display:flex;align-items:center;gap:9px;margin-bottom:15px}
.machine-card.featured .machine-kg{color:var(--oranje-licht)}
.machine-kg .dot{width:8px;height:8px;border-radius:50%;background:var(--oranje);box-shadow:0 0 0 4px rgba(239,138,31,.15)}
.machine-card h3{font-size:1.45rem;font-weight:700;margin-bottom:7px}
.machine-card .cap{color:rgba(26,21,18,.56);font-size:.94rem;margin-bottom:24px}
.price-display{background:linear-gradient(160deg,var(--zwart-2),#0F0C0A);border-radius:15px;padding:19px 22px;display:flex;align-items:baseline;justify-content:space-between;box-shadow:inset 0 2px 10px rgba(0,0,0,.5),inset 0 -1px 0 rgba(255,255,255,.05)}
.machine-card.featured .price-display{background:linear-gradient(160deg,#000,#0C0A08);box-shadow:inset 0 2px 10px rgba(0,0,0,.7),0 0 0 1px rgba(239,138,31,.3)}
.price-display .amount{font-family:var(--font-mono);font-weight:700;font-size:2.05rem;color:var(--oranje);text-shadow:0 0 20px var(--oranje-glow)}
.price-display .per{font-family:var(--font-mono);font-size:.78rem;color:rgba(255,255,255,.5)}
.dryer-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-bottom:24px}
.extra-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.extra-card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:26px 30px;display:flex;align-items:center;justify-content:space-between;gap:18px;transition:transform .28s,box-shadow .28s,border-color .28s}
.extra-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:rgba(239,138,31,.5)}
.extra-card .info b{font-family:var(--font-display);font-size:1.14rem;font-weight:700;display:block}
.extra-card .info small{color:rgba(26,21,18,.56);font-size:.89rem}
.extra-price{font-family:var(--font-mono);font-weight:700;font-size:1.4rem;color:var(--oranje-deep);background:rgba(239,138,31,.09);border:1px solid rgba(239,138,31,.4);padding:11px 20px;border-radius:13px;white-space:nowrap}
.tarieven-note{margin-top:38px;background:rgba(239,138,31,.08);border:1px solid rgba(239,138,31,.45);border-radius:15px;padding:20px 26px;display:flex;gap:15px;align-items:center;font-size:.96rem;color:rgba(26,21,18,.8)}

/* ---------- STEPS ---------- */
.steps{background:
  repeating-conic-gradient(from 0deg at 10% 0%,rgba(239,138,31,.05) 0deg 5deg,transparent 5deg 11deg),
  linear-gradient(165deg,#100D0B,var(--zwart-2));color:#fff;position:relative}
.steps .eyebrow{color:var(--oranje-licht)}
.steps .section-head p{color:rgba(255,255,255,.6)}
.steps-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.step{background:rgba(255,255,255,.04);border:1px solid var(--line-light);border-radius:var(--radius);padding:32px 28px;position:relative;transition:background .28s,transform .28s,border-color .28s}
.step:hover{background:rgba(255,255,255,.08);transform:translateY(-6px);border-color:rgba(239,138,31,.45)}
.step-num{font-family:var(--font-mono);font-weight:700;font-size:.8rem;color:var(--oranje);letter-spacing:.12em;margin-bottom:18px;display:inline-block;background:rgba(239,138,31,.1);border:1px solid rgba(239,138,31,.4);padding:5px 12px;border-radius:100px}
.step h3{font-size:1.17rem;font-weight:700;margin-bottom:11px}
.step p{color:rgba(255,255,255,.58);font-size:.93rem;line-height:1.6}
.steps-cta{margin-top:52px;text-align:center}

/* ---------- FAQ ---------- */
.faq-list{max-width:760px}
.faq{background:var(--white);border:1px solid var(--line);border-radius:16px;margin-bottom:14px;overflow:hidden;transition:box-shadow .25s,border-color .25s}
.faq[open]{box-shadow:0 16px 40px rgba(26,21,18,.09);border-color:rgba(239,138,31,.5)}
.faq summary{list-style:none;cursor:pointer;padding:22px 26px;display:flex;justify-content:space-between;align-items:center;gap:16px;font-family:var(--font-display);font-weight:700;font-size:1.05rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary .chev{flex-shrink:0;width:30px;height:30px;border-radius:50%;background:rgba(239,138,31,.12);display:flex;align-items:center;justify-content:center;transition:transform .3s,background .3s}
.faq[open] summary .chev{transform:rotate(45deg);background:var(--oranje)}
.faq[open] summary .chev svg{stroke:var(--zwart)}
.faq .body{padding:0 26px 24px;color:rgba(26,21,18,.66);font-size:.97rem}

/* ---------- BEZOEK ---------- */
.bezoek-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:stretch}
.info-card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:40px;box-shadow:0 12px 34px rgba(26,21,18,.06)}
.info-card h3{font-size:1.38rem;font-weight:700;margin-bottom:24px;display:flex;align-items:center;gap:13px}
.hours{list-style:none}
.hours li{display:flex;justify-content:space-between;padding:11px 0;border-bottom:1px dashed var(--line);font-size:.98rem}
.hours li:last-child{border:0}
.hours .day{color:rgba(26,21,18,.66);font-weight:500}
.hours .time{font-family:var(--font-mono);font-weight:600;color:var(--oranje-deep)}
.open-badge{display:inline-flex;align-items:center;gap:9px;background:rgba(239,138,31,.09);border:1px solid rgba(239,138,31,.45);color:var(--zwart);font-family:var(--font-mono);font-size:.8rem;font-weight:600;padding:9px 18px;border-radius:100px;margin-top:22px}
.open-badge .pulse{width:8px;height:8px;border-radius:50%;background:#2BB673;box-shadow:0 0 0 0 rgba(43,182,115,.5);animation:pulse 2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 9px rgba(43,182,115,0)}100%{box-shadow:0 0 0 0 rgba(43,182,115,0)}}
.adres-block{margin-bottom:24px}
.adres-block b{font-family:var(--font-display);font-size:1.16rem;display:block;margin-bottom:5px}
.adres-block span{color:rgba(26,21,18,.6)}
.map-frame{border-radius:16px;overflow:hidden;border:1px solid var(--line);min-height:280px;margin-top:8px}
.map-frame iframe{width:100%;height:100%;min-height:280px;border:0;display:block}
.contact-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:26px}
.contact-row .btn{padding:15px 26px;font-size:.95rem}
.btn-outline{border:1.5px solid var(--line);color:var(--zwart);background:transparent}
.btn-outline:hover{border-color:var(--oranje);color:var(--oranje-deep);transform:translateY(-3px)}

/* ---------- CTA BANNER ---------- */
.cta-banner{background:
  repeating-conic-gradient(from 0deg at 85% 15%,rgba(255,255,255,.09) 0deg 5deg,transparent 5deg 11deg),
  linear-gradient(120deg,var(--oranje) 0%,var(--oranje-deep) 100%);
  border-radius:30px;padding:70px 60px;color:var(--zwart);position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap;box-shadow:0 30px 70px rgba(216,115,14,.35)}
.cta-banner h2{margin:0 0 12px;font-size:clamp(1.8rem,3.4vw,2.6rem);color:var(--zwart)}
.cta-banner p{color:rgba(26,21,18,.75);max-width:470px;font-weight:500}
.cta-banner .btn{position:relative;z-index:1;font-size:1.05rem}

/* ---------- FOOTER ---------- */
footer{background:var(--zwart);color:rgba(255,255,255,.56);padding:64px 0 34px;margin-top:110px;position:relative}
footer::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(239,138,31,.7),transparent)}
.footer-grid{display:flex;justify-content:space-between;gap:44px;flex-wrap:wrap;padding-bottom:40px;border-bottom:1px solid var(--line-light)}
footer .logo{color:#fff;margin-bottom:16px}
.footer-col small{display:block;max-width:290px;line-height:1.65}
.footer-col h4{color:#fff;font-family:var(--font-display);font-size:.96rem;margin-bottom:15px;letter-spacing:.04em}
.footer-col a{display:block;padding:4px 0;font-size:.92rem;transition:color .2s}
.footer-col a:hover{color:var(--oranje-licht)}
.footer-bottom{padding-top:28px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.85rem;color:rgba(255,255,255,.36)}

/* ---------- MOBILE CALL BAR ---------- */
.callbar{display:none;position:fixed;bottom:0;left:0;right:0;z-index:99;background:rgba(26,21,18,.96);backdrop-filter:blur(12px);padding:12px 16px calc(12px + env(safe-area-inset-bottom));box-shadow:0 -10px 34px rgba(0,0,0,.4)}
.callbar a{display:flex;align-items:center;justify-content:center;gap:10px;background:linear-gradient(120deg,var(--oranje-deep),var(--oranje));color:var(--zwart);font-weight:700;padding:15px;border-radius:100px}

/* ---------- REVEAL ---------- */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .75s cubic-bezier(.2,.7,.3,1),transform .75s cubic-bezier(.2,.7,.3,1)}
.reveal.visible{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
  html{scroll-behavior:auto}
}

/* ---------- RESPONSIVE ---------- */
@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr;gap:56px}
  .wm-wrap{order:-1}
  .machine-grid,.dryer-grid,.extra-grid{grid-template-columns:1fr;max-width:520px;margin-left:auto;margin-right:auto}
  .steps-grid{grid-template-columns:repeat(2,1fr)}
  .usp-grid{grid-template-columns:repeat(2,1fr)}
  .usp{border-left:0;border-top:1px solid var(--line-light)}
  .bezoek-grid{grid-template-columns:1fr}
}
@media (max-width:760px){
  .section{padding:72px 0}
  .nav-links{position:fixed;inset:0;background:rgba(26,21,18,.98);flex-direction:column;justify-content:center;gap:30px;transform:translateX(100%);transition:transform .38s cubic-bezier(.2,.7,.3,1)}
  .nav-links.open{transform:none}
  .nav-links a{font-size:1.35rem;color:rgba(255,255,255,.9)!important}
  .nav-toggle{display:block}
  .nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav-toggle.open span:nth-child(2){opacity:0}
  .nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .hero{padding:140px 0 90px}
  .hero-stats{flex-direction:column;gap:18px}
  .hero-stat+.hero-stat{border-left:0;padding-left:0;border-top:1.5px solid rgba(26,21,18,.22);padding-top:18px}
  .wm-badge{right:2%}
  .steps-grid{grid-template-columns:1fr}
  .usp-grid{grid-template-columns:1fr}
  .cta-banner{padding:46px 30px}
  .callbar{display:block}
  footer{padding-bottom:115px}
}