.phone-mockup-section{perspective:1200px;padding:2rem 0}.phone-mockup-glow{pointer-events:none;background:radial-gradient(50% 50% at 50% 40%,#8b5cf614 0%,#0000 70%);margin:0 auto;position:absolute;inset:0}.phone-mockup-frame{background:#1a1a1a;border-radius:2.5rem;width:320px;margin:0 auto;padding:12px;transition:transform .4s;position:relative;box-shadow:0 0 0 1px #ffffff1a,0 25px 50px -12px #00000080,0 0 80px #8b5cf614}.phone-mockup-frame:hover{transform:translateY(-4px)}.phone-mockup-notch{z-index:10;background:#1a1a1a;border-radius:0 0 1rem 1rem;width:120px;height:28px;position:absolute;top:12px;left:50%;transform:translate(-50%)}.phone-mockup-screen{aspect-ratio:9/19.5;background:#000;border-radius:2rem;width:100%;position:relative;overflow:hidden}.phone-mockup-border{-webkit-mask-composite:xor;opacity:.5;background:linear-gradient(135deg,#8b5cf666 0%,#3b82f64d 25%,#10b9814d 50%,#3b82f64d 75%,#8b5cf666 100%) 0 0/300% 300%;border-radius:2.75rem;padding:2px;transition:opacity .3s;animation:8s infinite phone-gradient-shift;position:absolute;inset:-2px;-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0)}.phone-mockup-frame:hover .phone-mockup-border{opacity:1}@keyframes phone-gradient-shift{0%{background-position:0%}50%{background-position:100%}to{background-position:0%}}@media (prefers-reduced-motion:reduce){.phone-mockup-border{animation:none}.phone-mockup-frame{transition:none}.phone-mockup-frame:hover{transform:none}}