.hero-content{top:140px;max-width:560px}
.hero h1{font-size:76px;line-height:1.05;max-width:540px}
.hero-app{right:calc(8% + 48px);top:43px;width:420px;height:565px;margin:0}
.mockup-scene{position:relative;width:420px;height:550px}
.mockup-card{position:absolute;width:208px;padding:8px 8px 12px;background:#fff;border-radius:7px;box-shadow:0 12px 28px #29292929}
.mockup-before{left:-22px;top:130px;transform:rotate(-9deg);z-index:1}
.mockup-after{left:17px;top:318px;transform:rotate(-4deg);z-index:3}
.mockup-card-photo{position:relative;width:192px;height:144px;overflow:hidden;border-radius:3px;background:#f6f5f3}
.mockup-card-photo img{display:block;width:100%;height:100%;object-fit:contain}
.mockup-card>span{position:absolute;top:14px;left:14px;padding:4px 7px;background:#fff;border-radius:3px;font-size:13px;font-weight:600;line-height:1.2;color:#292929}
.mockup-scene .phone-crop{position:absolute;left:145px;top:14px;transform:rotate(6deg) scale(1.04);transform-origin:center;filter:drop-shadow(0 24px 20px #0004);z-index:2;transition:transform .25s ease}
.hero-app figcaption{position:absolute;bottom:0;right:18px;display:block;text-align:right;padding:4px 8px;background:#fffffff0;border-radius:3px;color:#333;font-size:12px;line-height:1.6;margin:0;width:auto}
.hero-app figcaption span{display:block;font-size:10px;color:#555}
@media(hover:hover){.mockup-scene:hover .phone-crop{transform:translateY(-4px) rotate(3deg) scale(1.04)}}
@media(min-width:1600px){.hero-content{top:160px}.hero h1{font-size:82px}.hero-app{right:max(calc(10% + 48px),calc((100% - 1100px)/2 + 48px));top:64px}}
@media(min-width:761px) and (max-width:1100px){.hero-content{top:145px;max-width:365px}.hero h1{font-size:60px}.hero-app{right:38px;top:64px;width:350px;height:535px}.mockup-scene{transform:scale(.87);transform-origin:top left}.hero-app figcaption{right:10px;bottom:28px;font-size:11px}}
@media(max-width:760px){.hero{height:710px}.hero-content{top:28px;max-width:none}.hero h1{font-size:46px;line-height:1.05}.hero-copy{margin-top:18px;max-width:390px}.hero-actions{margin-top:20px}.hero-app{top:316px;right:calc(50% - 143px);width:286px;height:374px}.mockup-scene{transform:scale(.68);transform-origin:top left}.hero-app figcaption{display:none}.hero-caption{bottom:9px;font-size:8px}}
@media(max-width:370px){.hero{height:688px}.hero h1{font-size:42px}.hero-app{top:318px;right:calc(50% - 128px);width:256px;height:336px}.mockup-scene{transform:scale(.61)}}
@media(max-width:760px) and (max-height:740px){.hero{height:542px}.hero-content{top:20px}.hero h1{font-size:35px}.hero-copy{font-size:12px;margin-top:12px}.hero-actions{margin-top:14px}.hero-app{top:250px;right:calc(50% - 107px);width:214px;height:281px}.mockup-scene{transform:scale(.51)}}
@media(prefers-reduced-motion:reduce){.mockup-scene .phone-crop{transition:none}}
@media(max-width:760px){.mockup-scene .phone-crop{left:86px}}
@media(max-width:1100px){.mockup-card{display:none}}