.phone-mockup{--phone-w:min(100%,300px);--phone-radius:2.85rem;--phone-bezel:0.55rem;--phone-metal:#2a2a2e;--phone-metal-hi:#3d3d42;--phone-metal-lo:#1a1a1c;width:var(--phone-w);margin-inline:auto;position:relative;filter:drop-shadow(0 28px 48px rgba(0,0,0,.38)) drop-shadow(0 8px 16px rgba(0,119,182,.12))}.phone-mockup__frame{position:relative;width:100%;border-radius:var(--phone-radius);padding:var(--phone-bezel);background:linear-gradient(145deg,var(--phone-metal-hi) 0,var(--phone-metal) 40%,var(--phone-metal-lo) 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -1px 0 rgba(0,0,0,.45),0 0 0 1px rgba(0,0,0,.35)}.phone-mockup__screen{position:relative;aspect-ratio:9/19.5;width:100%;overflow:hidden;border-radius:calc(var(--phone-radius) - var(--phone-bezel) * .85);background:#0a0a0b;isolation:isolate}.phone-mockup__media,.phone-mockup__screen mux-player,.phone-mockup__screen video{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;object-fit:cover!important;object-position:center!important;display:block;border:0;background:#0a0a0b;pointer-events:none}.phone-mockup__screen mux-player{--controls:none;--media-object-fit:cover;--media-object-position:center;--dialog:none;--loading-indicator:none;--play-button:none;--live-button:none;--seek-backward-button:none;--seek-forward-button:none;--mute-button:none;--captions-button:none;--airplay-button:none;--pip-button:none;--fullscreen-button:none;--cast-button:none;--playback-rate-button:none;--volume-range:none;--time-range:none;--time-display:none;--duration-display:none;--rendition-menu-button:none;--center-controls:none;--top-controls:none;--bottom-controls:none}.phone-mockup__screen mux-player::part(bottom),.phone-mockup__screen mux-player::part(center),.phone-mockup__screen mux-player::part(top){display:none!important}.phone-mockup__placeholder{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(160deg,#0f172a,#1e293b 50%,#0f172a);color:rgba(255,255,255,.55);font-size:.75rem;font-weight:600;letter-spacing:.02em;text-align:center;padding:1.5rem}.phone-mockup__dynamic-island{position:absolute;top:1.85%;left:50%;transform:translateX(-50%);width:28%;height:3.1%;min-height:18px;border-radius:999px;background:#0a0a0b;z-index:4;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);pointer-events:none}.phone-mockup__dynamic-island:after{content:"";position:absolute;right:18%;top:50%;transform:translateY(-50%);width:22%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 35%,#1e3a5f 0,#0a1628 55%,#050508 100%);box-shadow:inset 0 0 2px rgba(255,255,255,.15)}.phone-mockup__home-indicator{position:absolute;bottom:1.4%;left:50%;transform:translateX(-50%);width:36%;height:.35rem;border-radius:999px;background:rgba(255,255,255,.55);z-index:4;pointer-events:none}.phone-mockup__sound{position:absolute;right:6%;bottom:5.5%;z-index:5;display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;border-radius:999px;border:1px solid rgba(255,255,255,.28);background:rgba(15,23,42,.45);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:#fff;cursor:pointer;pointer-events:auto;transition:background .15s ease,transform .12s ease;box-shadow:0 4px 12px rgba(0,0,0,.25)}.phone-mockup__sound:hover{background:rgba(15,23,42,.65)}.phone-mockup__sound:active{transform:scale(.94)}.phone-mockup__sound:focus-visible{outline:2px solid #0077b6;outline-offset:2px}.phone-mockup__button{position:absolute;background:linear-gradient(90deg,var(--phone-metal-lo),var(--phone-metal-hi));border-radius:2px;pointer-events:none;z-index:2;box-shadow:inset 0 0 0 .5px rgba(255,255,255,.08)}.phone-mockup__button--silent{left:-2px;top:18%;width:3px;height:4.5%}.phone-mockup__button--vol-up{left:-2px;top:26%;width:3px;height:7%}.phone-mockup__button--vol-down{left:-2px;top:35%;width:3px;height:7%}.phone-mockup__button--power{right:-2px;top:28%;width:3px;height:10%}@media (min-width:640px){.phone-mockup{--phone-w:min(100%,310px)}}@media (prefers-reduced-motion:reduce){.phone-mockup__sound{transition:none}}