﻿/* Three phone previews: a single chrome-lit stage, no additional layout rows. */
.device-showcase{isolation:isolate;overflow:hidden;perspective:1000px}
.device-showcase::before{content:'';position:absolute;z-index:0;pointer-events:none;inset:12% 0 0;background:radial-gradient(ellipse at 50% 96%,#d2dfe935 0, #98b1c420 19%,transparent 58%),conic-gradient(from 343deg at 50% 100%,transparent 0deg,#eff7ff09 10deg,transparent 23deg 37deg,#c4d7e90a 48deg,transparent 59deg);filter:blur(3px)}
.device-showcase::after{content:'';position:absolute;z-index:0;pointer-events:none;left:9%;right:9%;bottom:1%;height:5%;border-radius:50%;border-top:1px solid #dcecf840;background:radial-gradient(ellipse,#d5e8f538,transparent 68%);box-shadow:0 -8px 30px #c6dfee12;transform:scaleY(.58)}
.device-showcase .device{--phone-x:0%;--phone-tilt:0deg;bottom:1.5%;transform:translateX(var(--phone-x)) rotate(var(--phone-tilt));transform-origin:50% 100%;animation:phone-stage-enter .68s cubic-bezier(.22,.68,.25,1) both}
.device-showcase .device-left{--phone-tilt:-4deg;left:5%;width:32%;height:77%;bottom:2.5%;z-index:1;animation-delay:.03s}
.device-showcase .device-center{--phone-x:-50%;left:50%;width:45%;height:98%;z-index:3;animation-delay:.11s}
.device-showcase .device-right{--phone-tilt:4deg;right:5%;width:32%;height:77%;bottom:2.5%;z-index:2;animation-delay:.19s}
.device-showcase .device img{object-fit:contain;object-position:center bottom;filter:drop-shadow(0 10px 12px #000b) drop-shadow(0 0 4px #bfd4e560)}
.device-showcase .device-center img{filter:drop-shadow(0 12px 15px #000c) drop-shadow(0 0 8px #e8f2fc60)}
.device-showcase .device::after{left:12%;right:12%;height:3%;bottom:.25%;background:#cce1ef3d;filter:blur(9px)}
@keyframes phone-stage-enter{from{opacity:0;transform:translateX(var(--phone-x)) translateY(12px) rotate(var(--phone-tilt)) scale(.97)}to{opacity:1;transform:translateX(var(--phone-x)) translateY(0) rotate(var(--phone-tilt)) scale(1)}}
@media(max-width:900px){.device-showcase .device-left,.device-showcase .device-right{height:76%;width:31%;bottom:3%}.device-showcase .device-left{left:5.5%;--phone-tilt:-4deg}.device-showcase .device-right{right:5.5%;--phone-tilt:4deg}.device-showcase .device-center{height:98%;width:46%;bottom:1.5%}.device-showcase::before{inset:4% -4% 0}.device-showcase::after{left:6%;right:6%;bottom:1.5%}.device-showcase .device img{filter:drop-shadow(0 6px 8px #000b) drop-shadow(0 0 3px #c8dfef66)}.device-showcase .device-center img{filter:drop-shadow(0 8px 10px #000c) drop-shadow(0 0 6px #e3f1fb66)}}
@media(max-width:900px) and (orientation:landscape){.device-showcase .device-left{--phone-tilt:-3deg;left:8%}.device-showcase .device-right{--phone-tilt:3deg;right:8%}.device-showcase .device-left,.device-showcase .device-right{height:77%;width:28%}.device-showcase .device-center{height:97%;width:42%}}
@media(prefers-reduced-motion:reduce){.device-showcase .device{animation:none;opacity:1}}


