:root{--scene-header:100px}
.scroll-scene{height:260svh;position:relative;--scene-progress:0;background:#bfc4d5}
.scene-stage{height:calc(100svh - var(--scene-header));min-height:520px;position:sticky;top:var(--scene-header);overflow:hidden;isolation:isolate;background:linear-gradient(110deg,#f1f3f9,#c3c9d9)}
.scene-media{position:absolute;left:24%;right:-10%;top:0;bottom:0;z-index:-3;mask-image:linear-gradient(90deg,transparent,#000 18%,#000 88%,transparent)}
.scene-media img,.scene-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;mask-image:linear-gradient(0deg,transparent,#000 12%,#000 85%,transparent)}
.scrub-canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;pointer-events:none;mask-image:linear-gradient(0deg,transparent,#000 12%,#000 85%,transparent)}.has-frame .scrub-canvas{opacity:1}.has-frame .scene-poster{opacity:0}
.scene-shade{position:absolute;inset:0;z-index:-2;background:linear-gradient(90deg,#f1f3f9 0%,#f1f3f9db 23%,#f1f3f936 43%,transparent 63%)}
.scene-content{height:100%;display:flex;align-items:center;position:relative;padding-top:5px;padding-bottom:90px}
.scene-copy{width:43%;max-width:545px;transform:translateY(calc(var(--scene-progress) * -12px))}
.scene-copy h1,.scene-copy h2{font:500 clamp(46px,5.3vw,78px)/1.06 Manrope,sans-serif;letter-spacing:-.065em;margin:25px 0 26px}
.scene-copy h1 span,.scene-copy h2 span{color:#5157d8}
.scene-copy>p{font-size:13px;line-height:1.9;color:#535e75;max-width:320px}
.scene-brands{display:flex;flex-wrap:wrap;gap:20px;align-items:center;margin:27px 0 29px;color:#515b72;font:600 13px Manrope,sans-serif;letter-spacing:-.4px}
.scene-copy .btn{font-size:11px;padding:14px 20px;gap:30px}
.scene-bottom{position:absolute;bottom:27px;left:0;right:0;display:flex;justify-content:space-between;align-items:center;gap:20px;color:#606c86;font-size:8px;letter-spacing:1.2px}
.scene-caption{font-size:9px;letter-spacing:0;text-align:right}.scene-hint b{display:inline-block;margin-left:12px;font-size:15px;font-weight:400}
.scene-track{height:2px;position:absolute;top:-17px;left:0;right:0;background:#8792b230}
.scene-track span{display:block;height:100%;width:100%;background:#575cdf;transform:scaleX(var(--scene-progress));transform-origin:left}
.scene-phone .scene-stage{background:linear-gradient(110deg,#e4e8f2,#b5bdd0)}
.scene-phone .scene-shade{background:linear-gradient(90deg,#e4e8f2 0%,#e4e8f2e0 24%,#e4e8f225 46%,transparent 65%)}
.scene-phone .scene-copy{max-width:530px}.scene-phone .scene-copy h2{font-size:clamp(44px,5vw,73px)}
.quote-explanation{font-size:12px;line-height:1.8;padding:18px;background:#f3f4fb;border-radius:7px;color:#606b83}
@media(max-width:1100px){.scene-copy{width:45%}.scene-copy h1,.scene-copy h2{font-size:58px}.scene-copy>p{font-size:12px}.scene-media{left:23%;right:-15%}}
@media(max-width:900px){:root{--scene-header:83px}.scene-copy h1,.scene-phone .scene-copy h2{font-size:48px}.scene-copy{width:45%}.scene-media{left:23%;right:-22%}.scene-brands{gap:13px;font-size:11px}.scene-caption{display:none}}
@media(max-width:700px){.scroll-scene{height:230svh}.scene-stage{min-height:630px}.scene-content{align-items:flex-start;padding-top:36px;padding-bottom:0}.scene-copy{width:100%;max-width:100%;transform:none}.scene-copy h1,.scene-phone .scene-copy h2{font-size:44px;letter-spacing:-.065em;margin:16px 0 13px;max-width:390px}.scene-copy>p{font-size:11px;max-width:330px;line-height:1.6}.scene-copy>p br{display:none}.scene-brands{font-size:11px;margin:15px 0 16px;gap:18px}.scene-copy .btn{padding:10px 15px;font-size:10px;gap:20px}.scene-media{left:-8%;right:-8%;top:40%;bottom:5%;mask-image:none}.scene-media video,.scene-media img{mask-image:linear-gradient(0deg,transparent,#000 12%,#000 80%,transparent);object-fit:contain}.scene-shade{background:linear-gradient(180deg,#f1f3f9 0%,#f1f3f9ed 30%,#f1f3f900 57%)}.scene-phone .scene-shade{background:linear-gradient(180deg,#e4e8f2 0%,#e4e8f2ed 30%,#e4e8f200 57%)}.scene-bottom{bottom:25px;font-size:7px;gap:10px}.scene-hint{font-size:7px;letter-spacing:.6px}.scene-hint b{margin-left:5px}.scene-content{pointer-events:none}.scene-copy .btn{pointer-events:auto}}
@media(max-width:430px){:root{--scene-header:77px}.scene-stage{min-height:610px}.scene-copy h1,.scene-phone .scene-copy h2{font-size:39px;margin:15px 0 12px}.scene-content{padding-top:27px}.scene-copy .eyebrow{font-size:8px}.scene-copy>p{font-size:11px;max-width:310px}.scene-media{top:40%;bottom:5%}.scene-bottom{font-size:6px}.scene-hint{font-size:6px}}
.scene-media{top:50%;bottom:auto;aspect-ratio:16/9;transform:translateY(-50%)}
@media(min-width:701px) and (max-width:900px){.scene-media{left:39%;right:-32%}.scene-shade{background:linear-gradient(90deg,#f1f3f9 0%,#f1f3f9f5 31%,#f1f3f92b 55%,transparent 70%)}.scene-phone .scene-shade{background:linear-gradient(90deg,#e4e8f2 0%,#e4e8f2f5 31%,#e4e8f22b 55%,transparent 70%)}}
@media(max-width:700px){.scene-media{top:70%;bottom:auto;left:-8%;right:-8%;transform:translateY(-50%)}}
@media(prefers-reduced-motion:reduce){.scroll-scene{height:auto}.scene-stage{position:relative;top:0;min-height:660px}.scene-copy{transform:none}.scene-hint{display:none}.scrub-canvas{display:none}.scene-poster{opacity:1!important}.scene-track{display:none}}

/* Lightweight scroll scenes: progress is driven by the same scroll controller. */
.scene-tablet .scene-stage{background:radial-gradient(circle at 76% 52%,#7c82ff3b,transparent 31%),linear-gradient(120deg,#f0eff8,#cfd3e4)}
.scene-robot .scene-stage{background:radial-gradient(circle at 78% 52%,#6174ff30,transparent 34%),linear-gradient(120deg,#edf2f4,#c9d2d8)}
.scene-tablet .scene-media,.scene-robot .scene-media{left:35%;right:2%;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 96%,transparent)}
.motion-visual{position:absolute;z-index:-1;left:48%;right:2%;top:50%;height:72%;transform:translateY(-50%);display:grid;place-items:center}
.motion-visual img{position:relative;z-index:2;display:block;max-width:100%;max-height:100%;object-fit:contain;filter:drop-shadow(0 35px 35px #29345d3b)}
.tablet-motion img{transform:translateY(calc((.5 - var(--scene-progress)) * 28px)) scale(calc(.92 + var(--scene-progress) * .06))}
.tablet-glow{position:absolute;width:70%;aspect-ratio:1;border-radius:50%;background:#646cff;filter:blur(70px);opacity:calc(var(--scene-progress) * .34)}
.charge-ui{position:absolute;z-index:3;left:50%;top:48%;transform:translate(-50%,-50%);display:grid;justify-items:center;color:#fff;text-shadow:0 2px 12px #000;opacity:calc(.18 + var(--scene-progress) * .82)}
.battery{width:58px;height:30px;border:3px solid #fff;border-radius:8px;padding:3px;position:relative}.battery:after{content:"";position:absolute;right:-8px;top:8px;width:5px;height:10px;background:#fff;border-radius:0 3px 3px 0}.battery span{display:block;height:100%;width:calc(var(--scene-progress) * 100%);border-radius:3px;background:linear-gradient(90deg,#6871ff,#9fa5ff)}
.charge-ui strong{font:500 44px/1 Manrope,sans-serif;margin-top:14px}.charge-ui strong b{font:inherit}.charge-ui small{font:700 8px/1 Manrope,sans-serif;letter-spacing:2px;margin-top:8px}
.robot-motion img{width:88%;transform:rotate(calc(var(--scene-progress) * 360deg)) scale(calc(.88 + var(--scene-progress) * .08));transform-origin:50% 52%}
.robot-orbit{position:absolute;width:78%;aspect-ratio:1;border:1px dashed #6570c880;border-radius:50%;transform:rotate(calc(var(--scene-progress) * -180deg))}.robot-route{position:absolute;width:66%;height:15%;bottom:7%;border-radius:50%;background:#5060a529;filter:blur(18px)}

/* Softer gallery rhythm. */
.service-gallery{gap:28px!important}.service-card{border-radius:30px!important;overflow:hidden;transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s ease!important}.service-card:hover{transform:translateY(-10px) rotate(.35deg);box-shadow:0 28px 70px #26325d1c}.service-card:nth-child(2),.service-card:nth-child(4){transform:translateY(48px)}.service-card:nth-child(2):hover,.service-card:nth-child(4):hover{transform:translateY(38px) rotate(-.35deg)}.service-visual{overflow:hidden;border-radius:22px;margin:0 14px}.service-visual img{transition:transform .7s cubic-bezier(.2,.8,.2,1)}.service-card:hover .service-visual img{transform:scale(1.035)}
@media(max-width:700px){.motion-visual{left:2%;right:2%;top:69%;height:48%}.scene-tablet .scene-media,.scene-robot .scene-media{left:-2%;right:-2%}.tablet-motion img{max-height:115%}.robot-motion img{width:92%}.service-card:nth-child(2),.service-card:nth-child(4){transform:none}.service-card{border-radius:22px!important}.service-visual{margin:0 10px;border-radius:16px}}
@media(prefers-reduced-motion:reduce){.tablet-motion img,.robot-motion img{transform:none}.battery span{width:70%}.charge-number{display:none}}
