.app-showcase{position:relative;padding:0}
.app-showcase .app-pin{position:relative;height:300vh}
.app-showcase .pin-stage{position:sticky;top:0;height:100vh;display:grid;grid-template-columns:minmax(0,1fr);place-items:center;overflow:hidden;padding:0 24px}
.app-showcase .opener{grid-area:1/1;z-index:2;width:min(1240px,94vw);display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:32px;align-items:center;pointer-events:none;opacity:var(--tile,1);transform:translateY(calc(var(--oy,0px) + (1 - var(--tile,1)) * -86px)) scale(calc(var(--ofit,1) * (1 - (1 - var(--tile,1)) * .05)));will-change:transform,opacity}
.app-showcase .tile{text-align:left;max-width:none}
.app-showcase .tile .lead{margin:18px 0 0;max-width:32ch}
.app-showcase .tile>*{transition:transform .9s cubic-bezier(.16,1,.3,1),opacity .7s ease}
.app-showcase .tile>*:nth-child(2){transition-delay:.1s}
.app-showcase .tile>*:nth-child(3){transition-delay:.2s}
.app-showcase .stage{position:relative;height:760px;perspective:1800px}
.app-showcase .stage:before{content:"";position:absolute;inset:8% 4%;background:radial-gradient(closest-side,#f4770845,transparent)}
.app-showcase .sclaws{position:absolute;right:2%;top:2%;width:62%;aspect-ratio:1;background:url(brand/claws-512.png) center/contain no-repeat;opacity:.13;transform:rotate(8deg)}
.app-showcase .stage .ph{transition:transform 1.2s cubic-bezier(.16,1,.3,1),opacity .8s ease}
.app-showcase .stage .ph2{transition-delay:.18s}
.app-showcase .sclaws{transition:opacity 1.4s ease .3s,transform 1.4s cubic-bezier(.16,1,.3,1) .3s}
.app-showcase .stage .ph1{left:4%;top:60px;transform:rotateY(18deg) rotateZ(-9deg);z-index:1}
.app-showcase .stage .ph2{right:3%;top:20px;transform:rotateY(-14deg) rotateZ(7deg);z-index:2}
.app-showcase .stage .shot{position:absolute;left:0;top:var(--sysTop);width:300px;height:calc(651px - var(--sysTop) - var(--sysBot));object-fit:cover;object-position:top center;display:block}
.js .app-showcase:not(.in) .stage .ph1{opacity:0;transform:translate(-120px,120px) rotateY(40deg) rotateZ(-20deg)}
.js .app-showcase:not(.in) .stage .ph2{opacity:0;transform:translate(120px,160px) rotateY(-40deg) rotateZ(18deg)}
.js .app-showcase:not(.in) .sclaws{opacity:0;transform:rotate(-10deg) scale(.8)}
.js .app-showcase:not(.in) .tile>*{opacity:0;transform:translateY(26px)}
@media (max-width:1100px){.app-showcase .opener{grid-template-columns:minmax(0,1fr);gap:20px}
.app-showcase .stage{order:-1}
.app-showcase .tile{text-align:center}
.app-showcase .tile .lead{margin-inline:auto}}
@media (max-width:700px){.app-showcase .stage{height:540px;overflow:hidden}
.app-showcase .stage .ph{transform-origin:top left}
.app-showcase .stage .ph1{left:50%;margin-left:-190px;top:40px;scale:.62}
.app-showcase .stage .ph2{right:auto;left:50%;margin-left:-10px;top:10px;scale:.62}}
.app-showcase .tile .lead{margin:18px auto 0;max-width:34ch}
.app-showcase .phone-block{grid-area:1/1;z-index:1;display:flex;flex-direction:column;align-items:center;transform:scale(var(--fit,1));transform-origin:top center;margin-bottom:calc(-1 * var(--shrink,0px))}
.app-showcase .claws{position:absolute;left:50%;top:50%;width:620px;height:620px;margin:-310px 0 0 -310px;pointer-events:none;background:url(brand/claws-512.png) center/contain no-repeat;opacity:calc(.13 * var(--e,1));transform:rotate(calc(8deg + (1 - var(--e,1)) * -26deg)) scale(calc(.7 + .3 * var(--e,1)))}
.app-showcase .phone-fade{opacity:var(--e,1)}
.app-showcase .phone3d{position:relative;width:320px;height:668px;margin:0 auto;transform-style:preserve-3d;will-change:transform;transform:perspective(1200px) translate3d(calc((1 - var(--e,1)) * 40px),calc((1 - var(--e,1)) * 150px),0) rotateY(calc(-7deg + (1 - var(--e,1)) * -34deg + var(--mx,0) * 7deg)) rotateX(calc(2deg + (1 - var(--e,1)) * 10deg + var(--my,0) * -6deg)) rotateZ(calc((1 - var(--e,1)) * 9deg)) scale(calc(.8 + .2 * var(--e,1)))}
.app-showcase .ph{box-sizing:border-box;position:absolute;width:320px;height:668px;margin:0;border-radius:56px;padding:9px 10px 8px;background:#050505;box-shadow:0 0 0 2.5px #c8652a,0 0 0 3.5px #7a3a14,0 0 0 4.5px #e98a4e55,0 60px 100px #000d,0 20px 40px #0008;-webkit-font-smoothing:antialiased}
.app-showcase .ph-solo{top:50%;left:50%;transform:translate(-50%,-50%) translateZ(10px)}
.app-showcase .ph:after{content:"";position:absolute;inset:9px 10px 8px;border-radius:47px;box-shadow:inset 0 0 0 1px #ffffff10;pointer-events:none;z-index:3}
.app-showcase .ph:before{content:"";position:absolute;left:-7px;top:118px;width:4px;height:30px;border-radius:3px 0 0 3px;background:linear-gradient(90deg,#8a4318,#d2733a);box-shadow:0 52px 0 #b85e2c,0 106px 0 #b85e2c}
.app-showcase .ph .btnR{position:absolute;right:-7px;top:170px;width:4px;height:76px;border-radius:0 3px 3px 0;background:linear-gradient(270deg,#8a4318,#d2733a)}
.app-showcase .ph .btnR:after{content:"";position:absolute;left:0;top:210px;width:4px;height:50px;border-radius:0 3px 3px 0;background:linear-gradient(270deg,#7a3a14,#c8652a)}
.app-showcase .pf{position:absolute;top:50%;left:50%;backface-visibility:hidden}
.app-showcase .pf-back{width:320px;height:668px;border-radius:56px;background:linear-gradient(155deg,#26140a,#0a0a0a 42%,#1a0f07);transform:translate(-50%,-50%) translateZ(-10px) rotateY(180deg);box-shadow:0 0 0 2px #7a3a14}
.app-showcase .pf-l,.app-showcase .pf-r{width:20px;height:556px;border-radius:3px;background:linear-gradient(180deg,#d2733a,#8a4318 30%,#6d3211 70%,#c8652a)}
.app-showcase .pf-t,.app-showcase .pf-b{width:208px;height:20px;border-radius:3px;background:linear-gradient(90deg,#c8652a,#7a3a14 35%,#6d3211 70%,#d2733a)}
.app-showcase .pf-r{transform:translate(-50%,-50%) rotateY(90deg) translateZ(160px)}
.app-showcase .pf-l{transform:translate(-50%,-50%) rotateY(-90deg) translateZ(160px)}
.app-showcase .pf-t{transform:translate(-50%,-50%) rotateX(90deg) translateZ(334px)}
.app-showcase .pf-b{transform:translate(-50%,-50%) rotateX(-90deg) translateZ(334px)}
.app-showcase .screen{position:absolute;left:10px;top:9px;width:300px;height:651px;border-radius:47px;overflow:hidden;background:#0b0b0d;--sysTop:24.4px;--sysBot:34.6px}
.app-showcase .track{position:absolute;left:0;top:var(--sysTop);width:300px;height:calc(651px - var(--sysTop) - var(--sysBot));display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;list-style:none;margin:0;padding:0;background:#0b0b0d;scrollbar-width:none;transform:translateZ(0);backface-visibility:hidden;contain:paint}
.app-showcase .track::-webkit-scrollbar{display:none}
.app-showcase .track:focus-visible{outline:2px solid #f47708;outline-offset:6px}
.app-showcase .track li{flex:0 0 300px;height:100%;scroll-snap-align:start;scroll-snap-stop:always;margin:0;padding:0}
.app-showcase .track img{display:block;width:300px;height:100%;object-fit:cover;object-position:top center;-webkit-user-drag:none;user-select:none;pointer-events:none}
.app-showcase .sysbar{position:absolute;left:0;width:300px;display:block;pointer-events:none;z-index:2}
.app-showcase .sysbar-top{top:0;height:var(--sysTop)}
.app-showcase .sysbar-bot{bottom:0;height:var(--sysBot)}
.app-showcase .swipe-ui{display:flex;align-items:center;justify-content:center;gap:18px;margin:22px 0 0;opacity:calc(max(0, var(--e,1) * 1.7 - .7))}
.app-showcase .dots{display:flex;align-items:center;gap:9px;list-style:none;margin:0;padding:0}
.app-showcase .dots button{width:8px;height:8px;padding:0;border:0;border-radius:50%;background:#ffffff33;cursor:pointer;transition:background .25s ease,transform .25s cubic-bezier(.16,1,.3,1)}
.app-showcase .dots button[aria-current="true"]{background:#f47708;transform:scale(1.4)}
.app-showcase .prev,.app-showcase .next{display:grid;place-items:center;width:44px;height:44px;padding:0;border-radius:50%;border:1px solid #ffffff22;background:#ffffff0a;color:#fff;cursor:pointer;transition:background .2s ease,border-color .2s ease,opacity .2s ease,transform .2s ease}
.app-showcase .prev:hover:not(:disabled),.app-showcase .next:hover:not(:disabled){background:#f4770833;border-color:#f4770899;transform:scale(1.06)}
.app-showcase .prev:active:not(:disabled),.app-showcase .next:active:not(:disabled){transform:scale(.94)}
.app-showcase .prev:focus-visible,.app-showcase .next:focus-visible{outline:2px solid #f47708;outline-offset:3px}
.app-showcase .prev:disabled,.app-showcase .next:disabled{opacity:.28;cursor:default}
.app-showcase .swipe-cap{text-align:center;margin:16px auto 0;max-width:36ch;opacity:calc(max(0, var(--e,1) * 1.7 - .7))}
.app-showcase .swipe-cap .count{display:block;font-style:normal;font-size:12px;letter-spacing:.14em;color:#f47708;margin:0 0 6px}
.app-showcase .swipe-cap b{display:block;font-size:16px;letter-spacing:.02em}
.app-showcase .swipe-cap span{display:block;font-size:13px;line-height:1.5;color:#8f8f88;margin-top:5px}
.app-showcase .swipe-hint{text-align:center;font-size:12px;color:#6f6f6a;margin:12px auto 0;max-width:40ch;opacity:calc(max(0, var(--e,1) * 1.7 - .7))}
.app-showcase .cta-on .fine{font-size:13px;color:#8f8f88;margin:14px auto 0;max-width:44ch}
@media (max-width:900px){.app-showcase .app-pin{height:260svh}
.app-showcase .pin-stage{padding:20px 12px 28px}
.app-showcase .opener{width:96vw;transform:translateY(calc(var(--oy,0px) + (1 - var(--tile,1)) * -60px)) scale(calc(var(--ofit,1) * (1 - (1 - var(--tile,1)) * .04)))}
.app-showcase .phone-block{transform:scale(var(--fit,1));transform-origin:top center}
.app-showcase .claws{display:none}
.app-showcase .prev,.app-showcase .next{display:none}
.app-showcase .swipe-hint{display:none}
.app-showcase .swipe-ui{margin:14px 0 0}
.app-showcase .swipe-cap{margin:10px auto 0;font-size:0;max-width:none;white-space:nowrap}
.app-showcase .swipe-cap .count{display:inline;font-size:12px;margin:0 8px 0 0}
.app-showcase .swipe-cap b{display:inline;font-size:14px}
.app-showcase .swipe-cap span{display:none}
.app-showcase .phone3d{transform:perspective(1100px) translate3d(0,calc((1 - var(--e,1)) * 90px),0) rotateY(calc((1 - var(--e,1)) * -22deg)) scale(calc(.86 + .14 * var(--e,1)))}}
@media (prefers-reduced-motion:reduce){.app-showcase .app-pin{height:auto}
.app-showcase .pin-stage{position:static;height:auto;display:block;padding:72px 24px}
.app-showcase .opener{opacity:1;transform:none;margin:0 auto 48px}
.app-showcase .phone-block{margin-bottom:0}
.app-showcase .tile{opacity:1;transform:none}
.app-showcase .phone-fade{opacity:1}
.app-showcase .phone3d{transform:none}
.app-showcase .claws{opacity:.13;transform:rotate(8deg)}
.app-showcase .swipe-ui,.app-showcase .swipe-cap,.app-showcase .swipe-hint{opacity:1}
.app-showcase .track{scroll-behavior:auto}}