/* Device frames and motion shared by the static product pages (the scan pages carry the same rules in globals.css). */
@keyframes bob { 0%, 100% { transform:translateY(0); } 50% { transform:translateY(-10px); } }
@keyframes drift { from { transform:scale(1.04) translateX(-1%); } to { transform:scale(1.1) translateX(1%); } }
.dev-phone { background:var(--ink); border-radius:8px; padding:9px; box-shadow:var(--shadow-lg); position:relative; }
.dev-phone::before { content:""; position:absolute; top:14px; left:50%; width:28%; height:7px; transform:translateX(-50%); background:#16304B; border-radius:3px; z-index:2; }
.dev-phone img { width:100%; display:block; border-radius:8px; background:#fff; }
.dev-monitor { position:relative; background:var(--ink); border-radius:8px 8px 8px 8px; padding:10px 10px 16px; box-shadow:var(--shadow-lg); }
.dev-monitor img { width:100%; display:block; border-radius:6px; background:#fff; }
.dev-monitor::after { content:""; position:absolute; left:50%; bottom:-34px; width:22%; height:34px; transform:translateX(-50%); background:linear-gradient(#1F3A57, #0F2236); clip-path:polygon(14% 0, 86% 0, 100% 100%, 0 100%); }
.dev-monitor::before { content:""; position:absolute; left:50%; bottom:-40px; width:38%; height:7px; transform:translateX(-50%); background:#0F2236; border-radius:3px; }
.nav-links a { white-space:nowrap; } .nav-links { gap:20px; }