/* Progressive CSS 3D: no canvas, external dependencies or hidden content. */
.home-compact .home-hero{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);align-items:center;gap:28px;padding-top:42px;padding-bottom:54px}
.home-compact .hero-brand{grid-column:1;grid-row:1;text-align:left;min-width:0}
.home-compact .hero-brand h1{font-size:clamp(2.4rem,4.3vw,4rem);padding:0}
.home-compact .hero-brand>p{margin-left:0}.home-compact .hero-actions{justify-content:flex-start}
.lux-scene{grid-column:2;grid-row:1;height:370px;perspective:1000px;pointer-events:none;min-width:0}
.lux-stage{height:100%;position:relative;transform-style:preserve-3d;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .2s ease-out}
.lux-float{position:absolute;inset:5% 0 auto;transform-style:preserve-3d;animation:lux-float 6s ease-in-out infinite;animation-play-state:paused}
.lux-scene-logo{display:block;width:100%;height:auto;filter:drop-shadow(0 18px 28px #0009);position:relative;z-index:2}
.lux-reflection{position:absolute;top:78%;left:0;width:100%;height:auto;transform:scaleY(-1) scale(.9);opacity:.14;mask-image:linear-gradient(transparent 42%,#000);pointer-events:none}
.lux-orbit{position:absolute;left:4%;right:4%;bottom:8%;height:25%;border-radius:50%;border:2px solid #42b8ff;box-shadow:0 0 18px #0879d999,inset 0 0 18px #0879d955;transform:rotateX(45deg) rotateZ(-8deg)}
.lux-orbit-gold{left:12%;right:12%;bottom:6%;height:21%;border:1px solid #e9b948;box-shadow:0 0 14px #e9b94833;transform:rotateX(45deg) rotateZ(12deg)}
.lux-floor{position:absolute;bottom:0;left:5%;width:90%;height:25%;background:radial-gradient(ellipse,#309ddd25,transparent 65%);z-index:-1}
.lux-drop{position:absolute;width:12px;height:17px;border-radius:65% 40% 60% 45%;border:1px solid #91d8ff88;background:radial-gradient(circle at 30% 25%,#e7f8ffdd, #199df438 35%,#06345555 70%);animation:lux-float 5s ease-in-out infinite;animation-play-state:paused}
.drop-one{top:20%;left:8%}.drop-two{right:9%;top:12%;animation-delay:-2s;width:8px;height:12px}.drop-three{right:3%;bottom:28%;animation-delay:-3s}
.lux-motion-active .lux-float,.lux-motion-active .lux-drop{animation-play-state:running}
@keyframes lux-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
/* Tilt only the surface; text and links remain still. */
.home-compact .service-card{isolation:isolate;background:transparent;box-shadow:none;border:0;overflow:visible}
.home-compact .service-card::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:18px;background:linear-gradient(145deg,#142a3c,#090f16 80%);border:1px solid #338fcc66;border-top:2px solid #279def;box-shadow:0 12px 28px #0004;transform:perspective(700px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .2s ease-out}
.lux-reveal{animation:lux-enter .65s ease-out both}@keyframes lux-enter{from{opacity:.7;transform:translateY(14px)}to{opacity:1;transform:none}}
.primary-button,.lw-cta{position:relative;overflow:hidden}.primary-button::after,.lw-cta::after{content:"";position:absolute;inset:0;transform:translateX(-130%) skewX(-20deg);background:linear-gradient(90deg,transparent,#fff7,transparent);pointer-events:none}
@media(hover:hover) and (pointer:fine){.primary-button:hover::after,.lw-cta:hover::after{transform:translateX(130%) skewX(-20deg);transition:transform .6s}}
.primary-button:active,.secondary-button:active,.winter-button:active{filter:brightness(.88)}
.lux-compare-block{max-width:620px;margin:0 auto 36px}.lux-compare-block h3{font-size:1.5rem}.lux-compare-block p{color:#bdc8d2;font-size:.9375rem;line-height:1.6}
.lux-comparison{--split:50%;position:relative;aspect-ratio:4/5;overflow:hidden;border:1px solid #55baff70;border-radius:18px;background:#101923}
.lux-photo{position:absolute;inset:0;background-image:url('/proof/interieurreiniging-voor-na.webp');background-repeat:no-repeat;background-size:245% 166%;}
.lux-after{background-position:97% 55%}.lux-before{background-position:0% 55%}
.lux-before-mask{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--split)) 0 0)}
.lux-label{position:absolute;top:14px;padding:6px 13px;background:#070b13df;border:1px solid #e4b740;color:#ffe09a;border-radius:20px;font-weight:700}.lux-label-before{left:14px}.lux-label-after{right:14px}
.lux-divider{position:absolute;left:var(--split);top:0;bottom:0;width:3px;background:#ffdc79;color:#071019;display:flex;align-items:center;justify-content:center;pointer-events:none}.lux-divider::after{content:'↔';position:absolute;background:#ffdc79;border-radius:50%;padding:9px;font-weight:800;font-size:24px}
.lux-compare-block label{display:block;margin-top:14px;color:#edf2f7;font-weight:700}.lux-compare-block input{display:block;width:100%;min-height:48px;accent-color:#f0bf4d;cursor:ew-resize;touch-action:pan-y}
@media(max-width:850px){.home-compact .home-hero{display:flex;flex-direction:column;gap:8px;padding-top:14px}.lux-scene{width:min(100%,390px);height:245px;order:0}.lux-float{inset:-5% 5% auto}.home-compact .hero-brand{order:1;text-align:center}.home-compact .hero-brand h1{font-size:clamp(2.1rem,8vw,3.5rem)}.home-compact .hero-brand>p{margin-left:auto}.home-compact .hero-actions{justify-content:center}.lux-compare-block{max-width:450px}}
@media(prefers-reduced-motion:reduce){.lux-float,.lux-drop,.lux-reveal{animation:none!important}.lux-stage,.home-compact .service-card::before{transform:none!important;transition:none}.primary-button::after,.lw-cta::after{display:none}}

.lux-page-paused .lux-reveal{animation-play-state:paused}

/* Deeper orbital showroom: transform-only movement, paused by visibility. */
.lux-scene{perspective:850px;height:405px}
.lux-float{animation-name:lux-logo-flight;animation-duration:8s;transform-origin:50% 60%}
@keyframes lux-logo-flight{0%,100%{transform:translate3d(0,0,28px) rotateY(-9deg) rotateZ(-2deg)}50%{transform:translate3d(0,-20px,55px) rotateY(9deg) rotateZ(2deg)}}
.lux-orbit{animation:lux-orbit-spin 14s linear infinite;animation-play-state:paused;border-style:solid dashed;transform-style:preserve-3d}
.lux-orbit::after{content:"";position:absolute;top:48%;left:-5px;width:10px;height:10px;border-radius:50%;background:#d5f3ff;box-shadow:0 0 15px 4px #21a7ff}
.lux-orbit-gold{animation-duration:20s;animation-direction:reverse;border-color:#e9b94899}.lux-orbit-gold::after{background:#fff0bd;box-shadow:0 0 12px 3px #e9b948}
.lux-orbit-outer{left:-3%;right:-3%;height:33%;bottom:6%;border-width:1px;border-color:#168aff66;animation-duration:24s;animation-direction:reverse}
@keyframes lux-orbit-spin{from{transform:rotateX(64deg) rotateZ(0deg)}to{transform:rotateX(64deg) rotateZ(360deg)}}
.lux-halo{position:absolute;inset:8% 0 15%;z-index:-2;border-radius:50%;background:radial-gradient(ellipse,#067ffa24,transparent 65%);animation:lux-halo-drift 9s ease-in-out infinite;animation-play-state:paused}
@keyframes lux-halo-drift{0%,100%{transform:translateX(-12%) scale(.95)}50%{transform:translateX(12%) scale(1.15)}}
.lux-satellite{position:absolute;width:17px;height:23px;border-radius:65% 40% 60% 45%;border:1px solid #b5e6ff99;background:radial-gradient(circle at 30% 25%,#fff,#76cfff44 30%,#005c9a66 65%);box-shadow:0 0 18px #098fea2a;animation:lux-droplet-orbit 10s ease-in-out infinite;animation-play-state:paused}
.satellite-a{top:18%;left:12%;--travel:35px}.satellite-b{top:48%;right:2%;--travel:-28px;animation-delay:-4s;width:11px;height:16px}.satellite-c{top:3%;right:23%;--travel:22px;animation-delay:-7s;width:9px;height:13px}
@keyframes lux-droplet-orbit{0%,100%{transform:translate3d(0,0,30px) rotate(-12deg)}50%{transform:translate3d(var(--travel),-28px,80px) rotate(24deg)}}
.lux-floor{height:34%;bottom:-5%;background:radial-gradient(ellipse,#158be52b,transparent 65%);transform:rotateX(30deg)}
.lux-motion-active .lux-orbit,.lux-motion-active .lux-halo,.lux-motion-active .lux-satellite{animation-play-state:running}
.lux-motion-toggle{display:inline-flex;min-height:44px;align-items:center;margin-top:12px;padding:8px 14px;border:1px solid #55baff55;border-radius:30px;background:#0b1725;color:#bcd7e9;font:inherit;font-size:.8rem;cursor:pointer}
.home-compact .service-card::before{box-shadow:0 12px 0 -8px #07131f,0 18px 0 -12px #168bda66,0 24px 35px #0005}
@media(hover:hover) and (pointer:fine){.home-compact .service-card:hover::before{border-color:#76ccff;box-shadow:0 12px 0 -8px #07131f,0 18px 0 -12px #168bda99,0 24px 35px #0005,0 0 22px #0879d91a}}
@media(max-width:850px){.lux-scene{height:265px;width:min(100%,390px)}.lux-float{inset:0 7% auto}.lux-orbit-outer{left:2%;right:2%}.lux-motion-toggle{margin:8px auto 0}}
@media(prefers-reduced-motion:reduce){.lux-orbit,.lux-halo,.lux-satellite{animation:none!important}.lux-float{transform:none}.lux-motion-toggle{display:none}}
.lux-page-paused .lux-scene *{animation-play-state:paused!important}
