.solutions-showcase{background:#f5f8fd;--showcase-header:80px}
.showcase-intro{padding-bottom:85px}
.showcase-start{margin-top:32px;color:#2369df}
.elevator-scene{position:relative;min-height:calc(100svh - var(--showcase-header));padding:36px 0;background:#edf4fe;border-top:1px solid #b6cce84a;display:flex;align-items:center;scroll-margin-top:80px;overflow:clip}
.elevator-scene:nth-child(even){background:#f6f9ff}
.scene-shell{width:calc(100% - 112px);max-width:1380px;margin:0 auto}
.scene-topline,.scene-bottomline{display:flex;justify-content:space-between;align-items:center;gap:24px}
.scene-topline{border-bottom:1px solid #b8cde550;padding-bottom:19px;margin-bottom:30px}
.scene-topline p{font-size:8px;letter-spacing:.14em;color:#4e719b;line-height:1.7}
.scene-topline p>span{margin:0 12px;color:#82a9d4}
.scene-topline>span{font-size:12px;color:#2868b5;font-variant-numeric:tabular-nums;white-space:nowrap;letter-spacing:.13em}
.scene-topline i{font-style:normal;color:#94abc4;margin:0 9px}
.elevator-scene-grid{display:grid;grid-template-columns:.78fr 1.35fr;gap:65px;align-items:center}
.scene-copy{position:relative;max-width:440px;padding:15px 0}
.scene-index{display:block;font-size:70px;line-height:1;font-weight:400;letter-spacing:-.07em;color:#bed2ec;margin-bottom:20px;transition:color .7s}
.is-active .scene-index{color:#8bb4e7}
.scene-copy h3{font-size:clamp(34px,3.3vw,56px);line-height:1.09;letter-spacing:-.055em;color:#123660;font-weight:500}
.scene-copy h4{font-size:15px;line-height:1.55;letter-spacing:-.025em;font-weight:500;color:#2d70c6;margin-top:24px}
.scene-copy>p{font-size:12px;line-height:1.85;color:#59718e;margin-top:15px;max-width:370px}
.scene-copy .button{margin-top:27px;min-height:54px;padding:16px 22px;font-size:11px;gap:42px}
.scene-visual{display:grid;grid-template-columns:.95fr 1.05fr;min-width:0;height:clamp(390px,54svh,550px);border:1px solid #b4cee850;box-shadow:0 25px 60px #123f7520;isolation:isolate;transition:transform 1s cubic-bezier(.16,1,.3,1),box-shadow 1s}
.scene-photo{position:relative;overflow:hidden;height:100%;min-width:0;background:#d6e4f5}
.scene-photo img{width:100%;height:100%;object-fit:cover;object-position:center;transition:transform 1.4s cubic-bezier(.16,1,.3,1)}
.scene-photo figcaption{position:absolute;bottom:14px;left:14px;color:#fff;font-size:6px;letter-spacing:.14em;z-index:2;padding:6px 8px;background:#0724448c;backdrop-filter:blur(8px)}
.scene-photo:after{position:absolute;inset:0;content:'';background:linear-gradient(0deg,#061e3b38,transparent 40%);pointer-events:none}
.scene-demo{position:relative;min-width:0;background:radial-gradient(ellipse at 50% 40%,#153d67,#071f3d 75%);overflow:hidden;color:#abd7ff;display:flex;align-items:center;justify-content:center}
.demo-svg{height:100%;width:100%;display:block;padding:16px 3px 20px;overflow:visible}
.demo-status{position:absolute;left:15px;right:15px;top:15px;display:flex;align-items:center;gap:8px;font-size:6px;letter-spacing:.13em;color:#99c4ed;z-index:2;line-height:1.4}
.demo-status-light{width:4px;height:4px;border-radius:50%;background:#70b7ff;box-shadow:0 0 10px #70b7ff88;flex-shrink:0}
.demo-controls{position:absolute;bottom:12px;left:13px;right:13px;display:flex;align-items:center;justify-content:space-between;gap:8px;z-index:2;border-top:1px solid #6fa7db33;padding-top:9px}
.demo-controls>span{font-size:7px;line-height:1.4;max-width:125px;color:#8db8de}
.demo-toggle{display:inline-flex;align-items:center;gap:6px;min-height:30px;border:1px solid #89b9e444;color:#d2eaff;font-size:7px;padding:5px 7px;white-space:nowrap;background:#14375c66}
.demo-toggle>span:first-child{font-size:10px;min-width:9px}
.demo-toggle:hover{background:#275685}
.scene-bottomline{padding-top:23px;margin-top:26px;border-top:1px solid #a7c2e044}
.scene-bottomline>small{font-size:6px;letter-spacing:.12em;color:#7894b3}
.scene-stepper{display:flex;gap:8px}
.scene-stepper a{width:25px;height:22px;display:flex;align-items:center;justify-content:center}
.scene-stepper span{height:2px;width:22px;background:#afc4df;transition:background .3s,height .3s}
.scene-stepper a:hover span,.scene-stepper a[aria-current=step] span{height:3px;background:#2e78da}
.scene-arrows{display:flex;gap:8px}
.scene-arrows a{height:32px;width:32px;border:1px solid #acc4df;display:flex;align-items:center;justify-content:center;font-size:16px;color:#3b6da6;transition:background .2s,color .2s}
.scene-arrows a:hover{background:#2369df;color:#fff;border-color:#2369df}
.demo-svg .demo-car{animation-duration:10s;animation-timing-function:cubic-bezier(.65,0,.35,1);animation-iteration-count:infinite;animation-play-state:paused}
.demo-svg .car-tall{animation-name:car-tall}
.demo-svg .car-home{animation-name:car-home}
.demo-svg .car-platform{animation-name:car-platform;animation-duration:12s}
.demo-svg .car-cargo{animation-name:car-cargo;animation-duration:12s}
.demo-svg .car-vacuum{animation-name:car-vacuum}
.demo-svg .demo-door{animation-duration:10s;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-play-state:paused}
.demo-svg .door-left{animation-name:door-left}.demo-svg .door-right{animation-name:door-right}
.demo-svg .demo-signal{animation:signal-flow 2.2s linear infinite paused}
.demo-svg .demo-rail-flow{animation:signal-flow 1.7s linear infinite paused}
.demo-svg .demo-treads{animation:tread-flow .75s linear infinite paused}
.demo-svg .demo-up-arrow{animation:arrow-flow 2.5s ease-in-out infinite paused}
.demo-svg .demo-air{animation:air-flow 6.6s linear infinite paused;animation-delay:var(--air-delay)}
.elevator-scene.is-active:not(.demo-paused) .demo-svg *{animation-play-state:running}
html.page-hidden .demo-svg *{animation-play-state:paused!important}
.elevator-scene.demo-paused .demo-status-light{background:#9daebd;box-shadow:none}
.js .elevator-scene .scene-copy{opacity:.3;transform:translateY(25px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform 1s cubic-bezier(.16,1,.3,1)}
.js .elevator-scene.is-active .scene-copy{opacity:1;transform:none}
.js .elevator-scene:not(.is-active) .scene-photo img{transform:scale(1.06)}
@keyframes car-tall{0%,16%,90%,100%{transform:translateY(0)}44%,64%{transform:translateY(-270px)}}
@keyframes car-home{0%,16%,90%,100%{transform:translateY(0)}44%,64%{transform:translateY(-210px)}}
@keyframes car-platform{0%,16%,90%,100%{transform:translateY(0)}44%,64%{transform:translateY(-140px)}}
@keyframes car-cargo{0%,16%,90%,100%{transform:translateY(0)}44%,64%{transform:translateY(-240px)}}
@keyframes car-vacuum{0%,16%,90%,100%{transform:translateY(0)}44%,64%{transform:translateY(-220px)}}
@keyframes door-left{0%,7%,49%,59%,95%,100%{transform:translateX(-44px)}12%,44%,64%,90%{transform:translateX(0)}}
@keyframes door-right{0%,7%,49%,59%,95%,100%{transform:translateX(44px)}12%,44%,64%,90%{transform:translateX(0)}}
@keyframes signal-flow{to{stroke-dashoffset:-46}}
@keyframes tread-flow{to{transform:translate(10px,-13px)}}
@keyframes arrow-flow{0%,100%{opacity:.25;transform:translate(0,0)}50%{opacity:1;transform:translate(7px,-9px)}}
@keyframes air-flow{0%{transform:translateY(0);opacity:0}12%,75%{opacity:.65}100%{transform:translateY(-340px);opacity:0}}
@media(min-width:1700px){.scene-copy h3{font-size:58px}.scene-copy>p{font-size:14px}.scene-copy h4{font-size:17px}.scene-visual{height:570px}.scene-topline p{font-size:9px}.demo-status{font-size:7px}.demo-controls>span{font-size:8px}.demo-toggle{font-size:8px}}
@media(max-width:1100px){.scene-shell{width:calc(100% - 72px)}.elevator-scene-grid{gap:35px;grid-template-columns:.82fr 1.2fr}.scene-copy h3{font-size:38px}.scene-copy h4{font-size:14px;margin-top:20px}.scene-copy>p{font-size:11px}.scene-index{font-size:58px;margin-bottom:17px}.scene-visual{height:450px}.demo-controls>span{font-size:6px}.demo-controls{left:9px;right:9px}.demo-toggle-label{display:none}.scene-topline{margin-bottom:22px}.scene-bottomline{margin-top:22px}}
@media(max-width:800px){.scene-shell{width:calc(100% - 44px)}.showcase-intro{padding-bottom:55px}.elevator-scene{padding:28px 0}.elevator-scene-grid{grid-template-columns:1fr;gap:27px}.scene-copy{max-width:620px;padding:0}.scene-index{position:absolute;right:0;top:0;font-size:80px;color:#bcd4ef66!important;z-index:0;pointer-events:none}.scene-copy h3{font-size:38px;max-width:480px;position:relative;z-index:1;padding-right:45px}.scene-copy h4{margin-top:15px;font-size:14px}.scene-copy>p{max-width:590px;font-size:12px;margin-top:10px}.scene-copy .button{margin-top:18px;padding:13px 19px;min-height:47px;font-size:10px}.scene-visual{height:350px;grid-template-columns:1fr 1fr}.scene-photo img{object-position:center 52%}.demo-controls>span{font-size:8px;max-width:none}.demo-toggle-label{display:inline}.demo-toggle{font-size:8px}.demo-status{font-size:7px}.scene-topline{margin-bottom:23px;padding-bottom:15px}.scene-bottomline{margin-top:22px;padding-top:17px}.scene-bottomline>small{font-size:6px}.scene-copy{transform:none!important}}
@media(max-width:520px){.elevator-scene{padding:23px 0;min-height:calc(100svh - 80px)}.showcase-intro h2{font-size:35px}.showcase-start{font-size:10px;gap:25px}.scene-topline{gap:12px;margin-bottom:20px;padding-bottom:12px}.scene-topline p{font-size:6px;letter-spacing:.09em}.scene-topline p>span{margin:0 5px}.scene-topline>span{font-size:9px}.scene-topline i{margin:0 4px}.scene-copy h3{font-size:32px;line-height:1.12;padding-right:20px;max-width:350px}.scene-copy h4{font-size:12px;margin-top:13px;max-width:300px}.scene-copy>p{font-size:11px;line-height:1.8;margin-top:10px}.scene-copy .button{min-height:43px;padding:11px 17px;font-size:10px;margin-top:17px;gap:30px}.scene-index{font-size:62px;right:-3px;top:3px;opacity:.7}.elevator-scene-grid{gap:23px}.scene-visual{height:280px;grid-template-columns:.9fr 1.1fr}.demo-svg{padding:12px 0 21px}.demo-status{left:9px;right:9px;top:11px;font-size:5px;gap:5px}.demo-status-light{height:3px;width:3px}.demo-controls{left:8px;right:8px;bottom:8px;gap:5px;padding-top:7px}.demo-controls>span{font-size:6px;max-width:83px}.demo-toggle{padding:3px 5px;font-size:6px;min-height:26px;gap:4px}.demo-toggle>span:first-child{font-size:9px}.scene-photo figcaption{font-size:5px;left:7px;bottom:8px;padding:4px 5px}.scene-bottomline{gap:10px;margin-top:19px;padding-top:15px}.scene-bottomline>small{display:none}.scene-stepper{gap:5px}.scene-stepper a{width:24px}.scene-stepper span{width:21px}.scene-arrows a{width:30px;height:30px}.scene-arrows{gap:6px}.js .elevator-scene .scene-copy{opacity:1}}
@media(max-height:740px) and (min-width:801px){.elevator-scene{padding:22px 0}.scene-topline{margin-bottom:18px;padding-bottom:12px}.scene-bottomline{margin-top:18px;padding-top:13px}.scene-visual{height:390px}.scene-index{font-size:42px;margin-bottom:12px}.scene-copy h3{font-size:36px}.scene-copy h4{font-size:13px;margin-top:16px}.scene-copy>p{font-size:11px;line-height:1.75}.scene-copy .button{margin-top:18px;min-height:46px;padding:13px 18px}}
@media(prefers-reduced-motion:reduce){.demo-svg *{animation:none!important}.js .elevator-scene .scene-copy{opacity:1;transform:none!important}.scene-photo img{transform:none!important;transition:none}.elevator-scene{scroll-snap-align:none}}
@media print{.elevator-scene{min-height:0;break-inside:avoid}.scene-copy{opacity:1!important;transform:none!important}.demo-svg *{animation:none!important}.scene-arrows,.scene-stepper,.demo-toggle{display:none}}
