.mockup-page{color:#fff;min-height:100vh;font-family:var(--font-main,"Inter", sans-serif);background:#08090d}.mockup-main{max-width:1350px;margin:0 auto;padding:1.5rem 1rem 5rem}.mockup-header-banner{text-align:center;margin-bottom:1.5rem}.mockup-header-banner h1{background:linear-gradient(135deg,#fff 0%,#00f2fe 50%,#4facfe 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;margin-bottom:.4rem;font-size:2.3rem;font-weight:900}.mockup-header-banner p{color:#94a3b8;font-size:.95rem}.studio-grid{grid-template-columns:340px 1fr;align-items:start;gap:1.5rem;display:grid}@media (max-width:992px){.studio-grid{grid-template-columns:1fr}}.studio-sidebar{-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);background:#ffffff08;border:1px solid #ffffff14;border-radius:20px;flex-direction:column;gap:1.5rem;padding:1.5rem;display:flex}.control-group-title{text-transform:uppercase;letter-spacing:.8px;color:#00f2fe;align-items:center;gap:.5rem;margin-bottom:.75rem;font-size:.85rem;font-weight:800;display:flex}.device-picker-grid{grid-template-columns:repeat(2,1fr);gap:.6rem;display:grid}.btn-device-card{color:#aaa;cursor:pointer;background:#ffffff0a;border:1px solid #ffffff14;border-radius:12px;flex-direction:column;align-items:center;gap:.4rem;padding:.75rem;font-size:.8rem;font-weight:600;transition:all .2s;display:flex}.btn-device-card:hover{color:#fff;background:#ffffff14}.btn-device-card.active{color:#00f2fe;background:linear-gradient(135deg,#00f2fe26 0%,#4facfe26 100%);border-color:#00f2fe}.slider-row{flex-direction:column;gap:.3rem;margin-bottom:.75rem;display:flex}.slider-row label{color:#cbd5e1;justify-content:space-between;font-size:.8rem;display:flex}.slider-row input[type=range]{accent-color:#00f2fe;cursor:pointer}.bg-picker-row{flex-wrap:wrap;gap:.5rem;display:flex}.btn-bg-swatch{cursor:pointer;border:2px solid #0000;border-radius:8px;width:34px;height:34px;transition:transform .2s}.btn-bg-swatch:hover{transform:scale(1.1)}.btn-bg-swatch.active{border-color:#00f2fe;box-shadow:0 0 10px #00f2fe80}.studio-viewport-container{background:#ffffff05;border:1px solid #ffffff14;border-radius:20px;padding:1rem;position:relative}.stage-viewport{perspective:1200px;border-radius:16px;justify-content:center;align-items:center;width:100%;height:580px;transition:background .3s;display:flex;position:relative;overflow:hidden}.bg-mesh-neon{background:radial-gradient(circle at 20% 20%,#7928ca 0%,#0000 40%),radial-gradient(circle at 80% 80%,#00f2fe 0%,#0000 40%),#090a0f}.bg-mesh-cyberpunk{background:radial-gradient(circle at 50% 20%,#ff007a 0%,#0000 50%),radial-gradient(circle at 80% 80%,#7928ca 0%,#0000 50%),#0d0614}.bg-mesh-spotlight{background:radial-gradient(circle,#ffffff26 0%,#0000 65%),#0a0c10}.bg-mesh-slate{background:#0f172a}.bg-mesh-transparent{background:repeating-conic-gradient(#1e293b 0% 25%,#0f172a 0% 50%) 50%/20px 20px}.device-3d-wrapper{transform-style:preserve-3d;justify-content:center;align-items:center;transition:transform .15s ease-out;display:flex;position:relative}.frame-iphone{background:#1c1c1e;border:4px solid #3a3a3c;border-radius:46px;width:260px;height:520px;padding:12px;position:relative;box-shadow:0 30px 80px #000000b3,inset 0 0 4px #fff3}.iphone-notch{z-index:20;background:#000;border-radius:20px;width:85px;height:22px;position:absolute;top:18px;left:50%;transform:translate(-50%)}.screen-iphone{background:#000;border-radius:36px;width:100%;height:100%;position:relative;overflow:hidden}.frame-macbook{background:#1e1e24;border:3px solid #383842;border-radius:16px 16px 4px 4px;width:520px;height:320px;padding:12px 12px 18px;position:relative;box-shadow:0 35px 90px #000000b3}.macbook-notch{z-index:20;background:#000;border-radius:0 0 8px 8px;width:120px;height:14px;position:absolute;top:12px;left:50%;transform:translate(-50%)}.macbook-base{background:linear-gradient(#3a3a42 0%,#1e1e24 100%);border-radius:0 0 12px 12px;width:600px;height:14px;position:absolute;bottom:-14px;left:50%;transform:translate(-50%);box-shadow:0 15px 30px #00000080}.screen-macbook{background:#000;border-radius:8px;width:100%;height:100%;position:relative;overflow:hidden}.frame-glass-window{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:#12141dbf;border:1px solid #ffffff26;border-radius:14px;flex-direction:column;width:500px;height:330px;display:flex;overflow:hidden;box-shadow:0 30px 80px #0009}.window-header{background:#ffffff0d;border-bottom:1px solid #ffffff14;align-items:center;gap:8px;height:38px;padding:0 14px;display:flex}.dot{border-radius:50%;width:10px;height:10px}.dot-red{background:#ff5f56}.dot-yellow{background:#ffbd2e}.dot-green{background:#27c93f}.screen-glass-window{flex:1;width:100%;position:relative;overflow:hidden}.screen-img{object-fit:cover;width:100%;height:100%}.screen-placeholder{color:#64748b;text-align:center;cursor:pointer;background:#ffffff05;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;padding:1.5rem;display:flex}.screen-placeholder:hover{color:#00f2fe;background:#ffffff0d}