/* Fixed front-facing product mockups. Only the automatic sequence moves them. */
.device-3d-stage { height:540px; cursor:default; touch-action:pan-y; }
.device-3d-stage:active { cursor:default; }
.device-elevation { position:absolute; top:50%; left:50%; width:720px; height:570px; transform-origin:center; pointer-events:none; }
.device-body { position:absolute; padding:8px; box-sizing:border-box; background:linear-gradient(112deg,#969ba0 0%,#f1f2f3 13%,#babfc3 28%,#e4e7e9 48%,#8e949b 69%,#f8f9fa 84%,#9299a1 100%); box-shadow:inset 0 0 0 1px #8a9096,inset 0 0 0 2px #d9dcdf,inset 0 0 0 3.3px #f5f6f7,0 1px 2px #0003,0 13px 35px -17px #19233055; }
.device-body::before { content:""; position:absolute; inset:3.3px; border:4.7px solid #111214; border-radius:inherit; pointer-events:none; }
.device-glass { position:relative; width:100%; height:100%; overflow:hidden; background:#f5f6f8; box-shadow:0 0 0 1px #090a0c; isolation:isolate; }
.device-ui { position:absolute; top:50%; left:50%; overflow:hidden; will-change:opacity; }
.device-ui svg { display:block; width:100%; height:100%; }
.device-ui-phone { width:230px; height:499.35px; }
.device-ui-mac { width:618px; height:400px; opacity:0; }
.device-camera { position:absolute; left:50%; transform:translateX(-50%); background:linear-gradient(100deg,#050607,#131416 72%,#08090b); z-index:5; box-shadow:0 .5px .6px #ffffff22; }
.device-camera i { position:absolute; width:5px; height:5px; border-radius:50%; background:radial-gradient(circle at 65% 30%,#343d59,#0e172d 33%,#04060a 65%,#22252a 80%); right:7px; top:50%; transform:translateY(-50%); box-shadow:0 0 0 1px #16171a; }
.device-statusbar { position:absolute; left:27px; right:24px; top:25px; display:flex; justify-content:space-between; color:#13151a; font:600 9px/12px -apple-system,BlinkMacSystemFont,"Helvetica Neue",sans-serif; z-index:4; }
.device-status-icons { width:37px; height:10px; }
.device-status-icons svg { display:block; width:100%; height:100%; }
.device-earpiece { position:absolute; left:50%; top:5px; transform:translateX(-50%); width:31px; height:1.5px; background:#363a3e; border-radius:2px; }
.device-home-indicator { position:absolute; left:50%; bottom:14px; width:82px; height:3px; border-radius:4px; transform:translateX(-50%); background:#17191c; }
.device-button { position:absolute; width:3px; border-radius:2px 0 0 2px; background:linear-gradient(90deg,#848b93,#dfe3e5 60%,#787f86); box-shadow:inset 0 1px 1px #fff9; left:-2px; }
.device-action { top:77px; height:17px; }
.device-volume-up { top:115px; height:35px; }
.device-volume-down { top:160px; height:35px; }
.device-power { left:auto; right:-2px; top:139px; height:54px; border-radius:0 2px 2px 0; }
.device-laptop-base { position:absolute; width:720px; height:29px; left:50%; opacity:0; transform-origin:center; z-index:7; }
.device-laptop-base svg { display:block; width:100%; height:100%; }
.device-contact-shadow { position:absolute; left:50%; height:13px; transform:translateX(-50%); background:radial-gradient(ellipse,#131b26 0%,#3a414a88 34%,transparent 72%); filter:blur(6px); }
@media(max-width:991px) { .device-3d-stage { height:500px; } }
@media(max-width:640px) { .device-3d-stage { height:420px; } }