*{box-sizing:border-box}.mockup-hero{padding:80px 0 40px;background:linear-gradient(180deg,var(--theme-bg) 0%,var(--theme-bg-secondary) 100%)}.mockup-input-section{background:var(--theme-bg-secondary);border:2px solid rgba(248,91,0,.3);border-radius:20px;padding:40px;margin-bottom:40px;box-shadow:0 10px 40px #0000004d}.url-input-wrapper{position:relative;max-width:700px;margin:0 auto}.url-input{width:100%;padding:18px 140px 18px 24px;border:2px solid rgba(248,91,0,.4);border-radius:50px;background:#06051fcc;color:#fff;font-size:16px;transition:all .3s ease}.url-input:focus{outline:none;border-color:#f85b00;box-shadow:0 0 20px #f85b004d;background:var(--theme-bg)}.url-input::placeholder{color:#ffffff80}.preview-btn{position:absolute;right:5px;top:50%;transform:translateY(-50%);background:linear-gradient(135deg,#f85b00,#ff8c42);color:#fff;border:none;padding:12px 32px;border-radius:50px;font-weight:600;cursor:pointer;transition:all .3s ease}.preview-btn:hover{transform:translateY(-50%) scale(1.05);box-shadow:0 5px 20px #f85b0080}.customization-section{border-top:2px solid rgba(248,91,0,.2);padding-top:20px}.customization-toggle{width:100%;background:linear-gradient(135deg,#342ead,#5845d9);color:#fff;border:none;padding:14px 24px;border-radius:12px;font-weight:600;cursor:pointer;transition:all .3s ease;font-size:16px;display:flex;align-items:center;justify-content:center}.customization-toggle:hover{transform:translateY(-2px);box-shadow:0 8px 20px #342aad66}.customization-options{background:#06051f80;padding:20px;border-radius:12px;border:1px solid rgba(248,91,0,.2)}.color-label{color:#fff;font-size:14px;font-weight:600;display:block;margin-bottom:8px}.color-picker{width:100%;height:50px;border:2px solid rgba(248,91,0,.4);border-radius:8px;background:transparent;cursor:pointer;transition:all .3s ease}.color-picker:hover{border-color:#f85b00;box-shadow:0 0 10px #f85b004d}.reset-btn{width:100%;height:50px;background:linear-gradient(135deg,#f85b00,#ff8c42);color:#fff;border:none;border-radius:8px;font-weight:600;cursor:pointer;transition:all .3s ease;font-size:14px;display:flex;align-items:center;justify-content:center}.reset-btn:hover{transform:translateY(-2px);box-shadow:0 5px 15px #f85b0066}.mockup-display-wrapper{background:linear-gradient(180deg,var(--theme-bg) 0%,var(--theme-bg-secondary) 100%);padding:100px 0;position:relative;overflow:hidden}.mockup-display-wrapper:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(circle at 50% 50%,rgba(248,91,0,.05) 0%,transparent 70%);pointer-events:none}.mockup-display{max-width:1400px;margin:0 auto;position:relative;padding:60px 20px 40px;height:700px;display:flex;align-items:center;justify-content:center}.device-frame{position:absolute;animation:fadeInUp .6s ease forwards;opacity:0;filter:drop-shadow(0 20px 40px rgba(0,0,0,.4));transition:all .4s ease}.device-frame:nth-child(2){animation-delay:.1s}.device-frame:nth-child(3){animation-delay:.2s}.device-frame:nth-child(4){animation-delay:.3s}.device-frame:nth-child(5){animation-delay:.4s}.device-frame:nth-child(6){animation-delay:.5s}.device-frame:hover{transform:translateY(-15px) scale(1.02);filter:drop-shadow(0 30px 60px rgba(248,91,0,.3))}@keyframes fadeInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.desktop-large{top:-20px;left:21%;width:620px;z-index:1}.desktop-body{background:linear-gradient(145deg,#2a2a3a,#1a1a2a);padding:8px;border-radius:12px 12px 0 0;position:relative}.desktop-body:before{content:"";position:absolute;top:6px;left:50%;transform:translate(-50%);width:8px;height:8px;background:#ffffff26;border-radius:50%}.desktop-screen-inner{position:relative;width:100%;height:0;padding-bottom:62.5%;border-radius:8px;overflow:hidden;background:#000}.desktop-screen-inner .iframe-container{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden}.desktop-screen-inner iframe{position:absolute;top:0;left:0;width:1936px;height:1210px;border:none;transform-origin:0 0;transform:scale(.3125)}.desktop-base{width:100%;height:14px;background:linear-gradient(145deg,#2a2a3a,#1a1a2a);border-radius:0 0 8px 8px;box-shadow:0 8px 20px #0006;position:relative}.desktop-base:after{content:"";position:absolute;bottom:0;left:50%;transform:translate(-50%);width:50px;height:3px;background:#ffffff14;border-radius:2px 2px 0 0}.desktop-stand{position:relative;display:flex;flex-direction:column;align-items:center;margin-top:0}.desktop-stand-neck{width:35px;height:45px;background:linear-gradient(145deg,#2a2a3a,#1a1a2a);border-radius:0 0 4px 4px;box-shadow:0 0 0 1px #ffffff0d,0 5px 15px #0006;position:relative}.desktop-stand-neck:before{content:"";position:absolute;top:0;left:50%;transform:translate(-50%);width:45px;height:8px;background:linear-gradient(145deg,#2a2a3a,#1a1a2a);border-radius:4px 4px 0 0}.desktop-stand-base{width:140px;height:8px;background:linear-gradient(145deg,#2a2a3a,#1a1a2a);border-radius:50px;box-shadow:0 0 0 1px #ffffff0d,0 8px 20px #00000080;position:relative}.desktop-stand-base:before{content:"";position:absolute;top:-3px;left:50%;transform:translate(-50%);width:50px;height:5px;background:#ffffff08;border-radius:50%}.laptop-screen{bottom:14%;right:2.3%;width:460px;z-index:2}.laptop-body{background:linear-gradient(145deg,#2a2a3a,#1a1a2a);padding:8px;border-radius:10px 10px 0 0;box-shadow:0 0 0 1px #ffffff1a,0 15px 40px #00000080;position:relative}.laptop-body:before{content:"";position:absolute;top:5px;left:50%;transform:translate(-50%);width:6px;height:6px;background:#ffffff1f;border-radius:50%}.laptop-screen-inner{position:relative;width:100%;height:0;padding-bottom:62.5%;border-radius:6px;overflow:hidden;background:#000}.laptop-screen-inner .iframe-container{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden}.laptop-screen-inner iframe{position:absolute;top:0;left:0;width:1600px;height:1000px;border:none;transform-origin:0 0;transform:scale(.278)}.laptop-base{width:115%;height:12px;background:linear-gradient(145deg,#2a2a3a,#1a1a2a);margin:0 -7.5%;border-radius:0 0 6px 6px;box-shadow:0 6px 15px #0000004d;position:relative}.laptop-base:after{content:"";position:absolute;bottom:0;left:50%;transform:translate(-50%);width:40px;height:2px;background:#ffffff14;border-radius:2px 2px 0 0}.tablet-screen{bottom:60px;left:0;width:250px;z-index:3}.tablet-body{background:linear-gradient(145deg,#2a2a3a,#1a1a2a);padding:35px 15px;border-radius:20px;box-shadow:0 0 0 1px #ffffff1a,0 15px 40px #00000080;position:relative}.tablet-body:before{content:"";position:absolute;top:15px;left:50%;transform:translate(-50%);width:6px;height:6px;background:#ffffff1a;border-radius:50%}.tablet-body:after{content:"";position:absolute;bottom:8px;left:50%;transform:translate(-50%);width:24px;height:24px;border:2px solid rgba(255,255,255,.08);border-radius:50%}.tablet-screen-inner{position:relative;width:100%;height:0;padding-bottom:133.33%;border-radius:10px;overflow:hidden;background:#000}.tablet-screen-inner .iframe-container{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden}.tablet-screen-inner iframe{position:absolute;top:0;left:0;width:890px;height:1200px;border:none;transform-origin:0 0;transform:scale(.247)}.mobile-screen{bottom:80px;left:-7%;width:190px;z-index:3}.mobile-body{background:linear-gradient(145deg,#2a2a3a,#1a1a2a);padding:8px;border-radius:28px;box-shadow:0 0 0 1px #ffffff1a,0 15px 40px #00000080;position:relative}.mobile-notch{position:absolute;top:0;left:50%;transform:translate(-50%);width:80px;height:20px;background:#1a1a2a;border-radius:0 0 16px 16px;z-index:10;box-shadow:0 2px 5px #0000004d}.mobile-notch:before{content:"";position:absolute;top:6px;left:50%;transform:translate(-50%);width:38px;height:4px;background:#ffffff1a;border-radius:2px}.mobile-notch:after{content:"";position:absolute;top:6px;right:12px;width:6px;height:6px;background:#ffffff1f;border-radius:50%}.mobile-screen-inner{position:relative;width:100%;height:0;padding-bottom:216.67%;border-radius:22px;overflow:hidden;background:#000}.mobile-screen-inner .iframe-container{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden}.mobile-screen-inner iframe{position:absolute;top:0;left:0;width:375px;height:812px;border:none;transform-origin:0 0;transform:scale(.4)}.mobile-buttons{position:absolute;right:-2px;top:75px;z-index:5}.mobile-button{width:3px;height:35px;background:#1a1a2a;margin-bottom:10px;border-radius:2px 0 0 2px;box-shadow:inset 1px 0 2px #00000080}.mobile-small{bottom:60px;left:18%;width:160px;z-index:4}.mobile-small .mobile-body{padding:7px;border-radius:24px}.mobile-small .mobile-notch{width:65px;height:18px;border-radius:0 0 13px 13px}.mobile-small .mobile-notch:before{width:32px;height:3px;top:5px}.mobile-small .mobile-notch:after{width:5px;height:5px;right:10px;top:5px}.mobile-small .mobile-screen-inner{border-radius:18px}.mobile-small .mobile-screen-inner iframe{width:372px;height:804px;transform:scale(.394)}.mobile-small .mobile-buttons{top:60px}.mobile-small .mobile-button{height:28px;margin-bottom:8px}.loading-state{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;z-index:100;background:#06051ff2;padding:40px 60px;border-radius:20px;border:2px solid rgba(248,91,0,.3);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.loader{width:60px;height:60px;border:4px solid rgba(248,91,0,.2);border-top-color:#f85b00;border-radius:50%;animation:spin 1s linear infinite;margin:0 auto 20px}@keyframes spin{to{transform:rotate(360deg)}}.screenshot-controls{text-align:center;margin-top:40px;display:flex;gap:15px;justify-content:center;flex-wrap:wrap;transition:all .3s ease}.screenshot-btn{background:linear-gradient(135deg,#f85b00,#ff8c42);color:#fff;border:none;padding:14px 32px;border-radius:50px;font-weight:600;cursor:pointer;transition:all .3s ease;font-size:16px;display:inline-flex;align-items:center;gap:10px}.screenshot-btn:hover{transform:scale(1.05);box-shadow:0 10px 30px #f85b0066}.download-btn{background:linear-gradient(135deg,#342ead,#5845d9)}.device-label{position:absolute;bottom:-35px;left:50%;transform:translate(-50%);background:#f85b00e6;color:#fff;padding:6px 16px;border-radius:20px;font-size:12px;font-weight:600;white-space:nowrap;opacity:0;transition:all .3s ease;pointer-events:none}.device-frame:hover .device-label{opacity:1;bottom:-40px}.info-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px;margin-top:40px}.info-card{background:var(--theme-bg-secondary);border:2px solid rgba(248,91,0,.3);border-radius:16px;padding:30px;transition:all .3s ease}.info-card:hover{border-color:#f85b00;transform:translateY(-5px);box-shadow:0 10px 30px #f85b0033}.info-card-icon{width:60px;height:60px;background:linear-gradient(135deg,#f85b00,#ff8c42);border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:28px;color:#fff;margin-bottom:20px}.info-card h4{color:#fff;font-size:20px;font-weight:700;margin-bottom:12px}.info-card p{color:#ffffffb3;font-size:15px;line-height:1.6;margin:0}.feature-highlight{background:linear-gradient(135deg,#f85b001a,#342aad1a);border:2px solid #f85b00;border-radius:20px;padding:50px 40px;text-align:center;margin-top:60px}.feature-highlight h3{font-size:32px;font-weight:700;color:#fff;margin-bottom:20px}.feature-highlight p{color:#ffffffb3;font-size:18px;max-width:800px;margin:0 auto}@media (max-width: 1200px){.mockup-display{height:600px}.desktop-large{width:500px;top:-10px}.laptop-screen{width:450px}.tablet-screen{width:210px;left:40px;bottom:70px}.mobile-screen{width:160px;right:40px;bottom:70px}.mobile-small{width:140px;left:5px;bottom:50px}}@media (max-width: 768px){.mockup-input-section{padding:25px 20px}.url-input{padding:15px 15px 15px 20px;font-size:14px}.preview-btn{position:static;transform:none;width:100%;margin-top:15px}.mockup-display{display:flex;flex-direction:column;align-items:center;gap:40px;padding:20px;height:auto}.desktop-large,.laptop-screen,.tablet-screen,.mobile-screen,.mobile-small{position:relative;width:90%;max-width:350px;left:auto;right:auto;top:auto;bottom:auto;transform:none}}