/* Product walkthrough: real demo screenshots, restrained native motion. */
.app-showcase{display:grid;grid-template-columns:1fr 1.12fr;gap:55px;align-items:center;background:#f3f7fc;position:relative;overflow:hidden;padding-top:85px;padding-bottom:75px}
.app-showcase .showcase-copy{position:relative;z-index:2;max-width:470px}
.app-showcase h2{font-size:clamp(34px,3.4vw,48px);line-height:1.12;margin:17px 0 22px}
.app-showcase .showcase-copy>p{font-size:14px;line-height:1.8;color:var(--muted);max-width:395px}
.showcase-steps{display:flex;flex-direction:column;gap:8px;margin-top:28px;position:relative}
.showcase-steps:before{content:'';position:absolute;left:32px;top:35px;bottom:35px;width:1px;background:#cddcec}
.showcase-step{scroll-margin-top:125px;display:flex;align-items:center;gap:16px;text-align:left;width:100%;border:1px solid transparent;border-radius:13px;background:transparent;color:var(--ink);padding:19px 17px;position:relative;min-height:91px;transition:background .2s,border-color .2s,box-shadow .2s}
.showcase-step:hover{background:#e7eff9}
.showcase-step.active{background:white;border-color:#cddff5;box-shadow:0 9px 22px #122f4506}
.step-number{border:1px solid #d4e0ee;background:#f3f7fc;flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:var(--muted);font-family:var(--display);font-size:12px}
.showcase-step.active .step-number{background:var(--blue);color:white;border-color:var(--blue)}
.showcase-step>span:nth-child(2){flex:1;min-width:0}.showcase-step strong{display:block;font-family:var(--display);font-size:18px;font-weight:500;line-height:1.2;letter-spacing:-.2px}
.showcase-step small{display:block;margin-top:7px;font-size:11px;color:var(--muted);line-height:1.65;max-width:290px}
.step-arrow{font-size:19px;color:#8fa5ba}.showcase-step.active .step-arrow{color:var(--blue)}
.showcase-actions{display:flex;align-items:center;gap:20px;margin-top:24px}
.showcase-actions .button{margin:0;font-size:12px;padding:13px 20px}
#showcase-motion-control{font-size:10px;color:var(--muted);border:0;background:none;padding:12px 0;min-height:44px}
#showcase-motion-control:hover{color:var(--blue)}#showcase-motion-control:disabled{cursor:default}
.app-showcase .showcase-copy>.showcase-disclaimer{font-size:9px;margin:18px 0 0;max-width:390px;line-height:1.8}
.showcase-visual{scroll-margin-top:105px;position:relative;isolation:isolate;width:100%;height:700px;max-width:610px;margin:auto;outline-offset:5px}
.showcase-orbit{position:absolute;z-index:-1;width:500px;height:500px;left:50%;top:48%;transform:translate(-50%,-50%);border:1px solid #d5e4f5;border-radius:50%;background:radial-gradient(circle,#e8f1fc 20%,#e9f2fd88 60%,transparent 72%)}
.showcase-orbit:before{content:'';position:absolute;inset:46px;border:1px dashed #c4d9ee;border-radius:50%}.showcase-orbit:after{content:'';position:absolute;width:12px;height:12px;border-radius:50%;background:var(--sun);right:60px;top:48px;box-shadow:0 0 0 8px #fbd65725}
.showcase-stage-label{position:absolute;right:12px;top:0;font-size:8px;font-weight:600;letter-spacing:1.8px;display:flex;align-items:center;gap:8px;color:#6c85a0}
.stage-dot{width:5px;height:5px;border-radius:50%;background:var(--blue)}
.device{position:relative;display:block;background:#122333;border:1px solid #5a6a7a;border-radius:38px;box-shadow:0 26px 45px -19px #18354e55,inset 0 0 0 2px #ffffff20;padding:9px;overflow:hidden}
.device img{width:100%;height:auto;display:block;border-radius:29px;user-select:none;pointer-events:none}
.device:before{content:'';position:absolute;inset:4px;border:1px solid #ffffff20;border-radius:34px;pointer-events:none;z-index:3}
.device-camera{position:absolute;background:#122333;top:14px;left:50%;transform:translateX(-50%);height:9px;width:48px;border-radius:10px;z-index:3;box-shadow:0 0 0 3px #f3f7fb}
.device-home{position:absolute;bottom:17px;width:31%;height:3px;background:#122f4555;border-radius:5px;left:50%;transform:translateX(-50%);z-index:3}
.showcase-float-main{position:absolute;width:260px;top:38px;left:45%;z-index:3}.phone-main{transform:rotate(6deg);transition:box-shadow .2s}
.phone-main:hover{box-shadow:0 28px 60px -14px #075bda50}.phone-main:focus-visible{outline:3px solid var(--blue);outline-offset:6px}
.showcase-float-side{position:absolute;width:210px;top:112px;left:4%;z-index:1}.phone-side{transform:rotate(-11deg);opacity:.94}
.phone-side .device-camera{width:38px;height:6px;top:13px}.phone-side .device-home{bottom:15px}
.route-lottie{position:absolute;left:-15px;bottom:125px;width:275px;height:140px;z-index:0;opacity:.75}
.route-lottie svg{display:block;width:100%;height:100%}
.preview-badge{position:absolute;left:4%;bottom:133px;z-index:5;background:white;border:1px solid #e0eaf5;box-shadow:0 12px 28px #122f4510;border-radius:12px;display:flex;gap:9px;align-items:center;padding:12px 16px 12px 9px;max-width:265px;min-height:73px}
.preview-badge>div:first-child{width:43px;height:43px;flex:none}.preview-badge svg{width:100%;height:100%}.preview-badge strong{display:block;font-size:11px;font-weight:600;line-height:1.6}.preview-badge small{font-size:9px;line-height:1.6;display:block;color:var(--muted);margin-top:2px}
.screen-caption{position:absolute;bottom:0;left:8%;right:0;text-align:center}
.screen-caption>span{font-size:8px;letter-spacing:2px;font-weight:600;color:var(--blue)}.screen-caption h3{font-family:var(--display);font-size:23px;font-weight:500;letter-spacing:-.4px;margin:11px 0 8px}.screen-caption p{font-size:10px;color:var(--muted);line-height:1.8;margin:0}
.app-showcase[data-selected="1"] .phone-side{opacity:.8}.app-showcase[data-selected="2"] .preview-badge{border-color:#b9d3f5}
@media(max-width:1150px){.app-showcase{gap:25px;grid-template-columns:1fr 1fr}.showcase-float-main{width:235px;left:39%;top:55px}.showcase-float-side{width:190px;left:0;top:130px}.showcase-visual{height:655px}.showcase-orbit{width:420px;height:420px}.preview-badge{left:0;bottom:131px;max-width:245px}.showcase-step{gap:12px;padding:16px 12px}.showcase-step strong{font-size:17px}.showcase-step small{font-size:10px}.showcase-stage-label{right:0;letter-spacing:1px;font-size:7px}}
@media(max-width:900px){.app-showcase{grid-template-columns:1fr;gap:38px;padding-top:65px;padding-bottom:55px}.app-showcase .showcase-copy{max-width:640px;margin:auto;width:100%}.app-showcase .showcase-copy>p{max-width:500px}.showcase-steps{margin-top:24px}.showcase-visual{max-width:520px;height:690px}.showcase-float-main{width:260px;left:43%;top:40px}.showcase-float-side{width:210px;left:4%;top:112px}.showcase-orbit{width:490px;height:490px}.preview-badge{left:4%;bottom:130px}.showcase-stage-label{right:10px;font-size:8px}.screen-caption{left:0}.showcase-step small{font-size:12px}.showcase-step strong{font-size:19px}}
@media(max-width:540px){.app-showcase{padding:55px 6% 40px;gap:28px}.app-showcase h2{font-size:36px}.app-showcase .showcase-copy>p{font-size:13px}.showcase-step{padding:15px 11px;gap:11px;min-height:89px}.step-number{width:30px;height:30px;font-size:10px}.showcase-steps:before{left:26px}.showcase-step strong{font-size:16px}.showcase-step small{font-size:10px;line-height:1.7}.step-arrow{font-size:16px}.showcase-actions{gap:15px}.showcase-actions .button{font-size:11px;padding:12px 15px;gap:15px}.showcase-disclaimer{font-size:8px!important}.showcase-visual{height:620px;width:100%;max-width:375px}.showcase-float-main{width:226px;left:24%;top:38px}.showcase-float-side{width:176px;left:-3%;top:101px}.device{padding:7px;border-radius:31px}.device img{border-radius:24px}.device:before{border-radius:28px}.device-camera{top:11px;box-shadow:0 0 0 2px #f3f7fb;width:41px;height:7px}.phone-side .device-camera{top:10px;width:32px;height:5px}.showcase-orbit{width:370px;height:370px;top:43%}.showcase-stage-label{font-size:6px;right:4px;top:0}.preview-badge{left:0;bottom:109px;max-width:226px;min-height:65px;padding:9px 12px 9px 7px}.preview-badge>div:first-child{width:35px;height:35px}.preview-badge strong{font-size:10px}.preview-badge small{font-size:8px}.screen-caption{bottom:0}.screen-caption h3{font-size:22px}.screen-caption p{font-size:9px;max-width:270px;margin:auto}.route-lottie{bottom:160px;width:220px}.saving-layout>div{order:-1}}
@media(max-width:370px){.showcase-float-main{width:208px;left:25%}.showcase-float-side{width:163px}.showcase-visual{height:588px}.preview-badge{bottom:115px}.showcase-step strong{font-size:15px}}
@media(prefers-reduced-motion:reduce){.showcase-step,.phone-main{transition:none}.showcase-float-main,.showcase-float-side{will-change:auto}}