/* Genuine 390 × 844 viewport captures, paired with the desktop views. */
.device-showcase{position:relative;isolation:isolate;padding:24px 12% 64px 0;display:block}
.device-showcase .project-image{position:relative;box-shadow:0 20px 60px #21183412;border:1px solid #d4cedf;transform-origin:center}
.phone-preview{position:absolute;right:1%;bottom:0;width:24%;max-width:280px;padding:7px;background:#24212c;border:1px solid #514b5d;border-radius:28px;box-shadow:0 24px 48px #21183430;z-index:2;display:block;overflow:hidden;transform:rotate(3deg);transition:transform .5s ease}
.phone-preview img{display:block;width:100%;height:auto;border-radius:20px;background:white}
.device-showcase:hover .phone-preview{transform:rotate(0deg) translateY(-8px)}
@media(max-width:800px){
.device-showcase{padding:16px 13% 64px 0}.device-showcase .project-image{padding:8px;border-radius:12px}.device-showcase .browser-bar{gap:8px;font-size:12px;padding-bottom:8px;letter-spacing:0}
.phone-preview{right:0;width:30%;padding:4px;border-radius:14px;box-shadow:0 12px 24px #21183430}.phone-preview img{border-radius:10px}
}
@media(prefers-reduced-motion:reduce){.phone-preview{transition:none}.device-showcase:hover .phone-preview{transform:rotate(3deg)}}