.cinematic-hero .glass-panel{background:rgba(15,23,42,.75)!important;border:1px solid rgba(59,130,246,.35)!important;backdrop-filter:blur(15px)!important;-webkit-backdrop-filter:blur(15px)!important;border-radius:24px!important;box-shadow:0 10px 40px 0 rgba(0,0,0,.5),0 0 20px 0 rgba(59,130,246,.3)!important;transition:all .4s ease!important;padding:3rem!important}.cinematic-hero .glass-panel:hover{background:rgba(15,23,42,.85)!important;border-color:rgba(96,165,250,.6)!important;box-shadow:0 20px 60px rgba(0,0,0,.7),0 0 30px rgba(96,165,250,.5),inset 0 1px 0 hsla(0,0%,100%,.5)!important;transform:translateY(-7px)!important}.professional-btn-primary{background:linear-gradient(135deg,#3b82f6,#8b5cf6);color:#fff;border:none;border-radius:12px;padding:16px 32px;font-weight:600;font-size:16px;letter-spacing:.5px;box-shadow:0 4px 20px rgba(59,130,246,.3);transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;min-width:180px}.professional-btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 30px rgba(59,130,246,.4);background:linear-gradient(135deg,#2563eb,#7c3aed)}.professional-btn-secondary{background:hsla(0,0%,100%,.1);color:#fff;border:1px solid hsla(0,0%,100%,.2);border-radius:12px;padding:16px 32px;font-weight:500;font-size:16px;letter-spacing:.5px;backdrop-filter:blur(10px);transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;min-width:180px}.professional-btn-secondary:hover{background:hsla(0,0%,100%,.15);border-color:hsla(0,0%,100%,.3);transform:translateY(-2px);box-shadow:0 8px 25px rgba(0,0,0,.2)}.neon-button{background:linear-gradient(45deg,#3b82f6,#8b5cf6);color:#fff;border:1px solid hsla(0,0%,100%,.1);border-radius:14px;padding:14px 28px;font-weight:700;letter-spacing:.5px;box-shadow:0 0 20px rgba(59,130,246,.6);transition:all .3s ease;position:relative;overflow:hidden;display:inline-block;text-align:center}.neon-button:hover{box-shadow:0 0 30px rgba(59,130,246,.8);transform:translateY(-3px) scale(1.03);background:linear-gradient(45deg,#2563eb,#7c3aed);border:1px solid hsla(0,0%,100%,.3)}.neon-button:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,hsla(0,0%,100%,0) 0,hsla(0,0%,100%,.3) 50%,hsla(0,0%,100%,0));transition:all .8s}.neon-button:hover:before{left:100%;animation:gradientShift 2s infinite}@keyframes gradientShift{0%,to{background-position:0 50%}50%{background-position:100% 50%}}.particle-field{overflow:hidden;z-index:1;background:radial-gradient(circle at center,rgba(15,23,42,.05) 0,rgba(15,23,42,.02) 70%)}.particle-field,.particle-field:before{position:absolute;top:0;left:0;width:100%;height:100%}.particle-field:before{content:"";background-image:radial-gradient(circle at 20% 30%,rgba(59,130,246,.05) 0,transparent 20%),radial-gradient(circle at 80% 70%,rgba(139,92,246,.05) 0,transparent 20%),radial-gradient(circle at 50% 50%,rgba(59,130,246,.02) 0,transparent 50%);animation:particleFloat 20s ease-in-out infinite alternate}@keyframes particleFloat{0%{transform:translateZ(0)}to{transform:translate3d(-200px,-100px,0)}}.product-card-3d{background:rgba(0,0,0,.8);backdrop-filter:blur(15px);border:1px solid rgba(96,165,250,.3);border-radius:16px;padding:2rem;transition:all .3s ease;transform-style:preserve-3d;perspective:1000px;box-shadow:0 10px 30px rgba(0,0,0,.3),0 0 20px rgba(59,130,246,.2)}.product-card-3d:hover{transform:rotateY(5deg) rotateX(5deg);box-shadow:0 15px 40px rgba(0,0,0,.4),0 0 30px rgba(59,130,246,.3);border-color:rgba(96,165,250,.6)}.hud-element{background:rgba(0,0,0,.7);border:1px solid rgba(96,165,250,.5);border-radius:8px;padding:1rem;position:relative;overflow:hidden}.hud-element:before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,#3b82f6,transparent);animation:scanLine 2s linear infinite}@keyframes scanLine{0%{transform:translateX(-100%)}to{transform:translateX(100%)}}.cinematic-modal{background:rgba(0,0,0,.9);backdrop-filter:blur(20px);border:1px solid rgba(96,165,250,.3);border-radius:20px;box-shadow:0 25px 50px rgba(0,0,0,.5),0 0 50px rgba(96,165,250,.2),inset 0 1px 0 hsla(0,0%,100%,.1);animation:modalAppear .5s cubic-bezier(.175,.885,.32,1.275)}@keyframes modalAppear{0%{opacity:0;transform:scale(.8) translateY(50px)}to{opacity:1;transform:scale(1) translateY(0)}}.glow-text{text-shadow:0 0 10px rgba(96,165,250,.7),0 0 20px rgba(96,165,250,.5),0 0 30px rgba(96,165,250,.3);animation:textGlow 2s ease-in-out infinite alternate}@keyframes textGlow{0%{text-shadow:0 0 10px rgba(96,165,250,.7),0 0 20px rgba(96,165,250,.5),0 0 30px rgba(96,165,250,.3)}to{text-shadow:0 0 15px #60a5fa,0 0 25px rgba(96,165,250,.7),0 0 35px rgba(96,165,250,.5)}}.success-vault{animation:vaultOpen 1s cubic-bezier(.175,.885,.32,1.275)}@keyframes vaultOpen{0%{transform:scale(0) rotate(-180deg);opacity:0}50%{transform:scale(1.1) rotate(-90deg);opacity:.8}to{transform:scale(1) rotate(0deg);opacity:1}}@media (max-width:768px){.cinematic-hero .glass-panel{margin:1rem;padding:1.5rem!important;max-width:90%!important}.neon-button{padding:.75rem 1.5rem;font-size:.9rem;min-width:200px!important}.product-card-3d:hover{transform:translateZ(10px)}.cinematic-hero h1{font-size:2.5rem!important;line-height:1.2!important}.cinematic-hero p{font-size:1rem!important;margin-bottom:2rem!important}}@media (max-width:480px){.cinematic-hero{height:100svh!important}.cinematic-hero .glass-panel{padding:1.25rem!important;margin:.5rem}.cinematic-hero h1{font-size:2rem!important;margin-bottom:.75rem!important}.cinematic-hero p{font-size:.9rem!important;margin-bottom:1.5rem!important}.neon-button{min-width:180px!important;font-size:.85rem}.cinematic-hero .flex.gap-4 span{font-size:.75rem!important;padding:.5rem .75rem!important}.cinematic-hero .flex.gap-4 span div{width:.5rem!important;height:.5rem!important;margin-right:.5rem!important}}@media (prefers-contrast:high){.glass-panel{background:rgba(0,0,0,.9);border:2px solid #fff}.neon-button{background:#3b82f6;border:2px solid #fff}}@media (prefers-reduced-motion:reduce){.glow-text,.neon-button,.particle-field{animation:none}.product-card-3d:hover{transform:none}}.advanced-web-builder{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;--primary-color:#3b82f6;--secondary-color:#6b7280;--accent-color:#10b981;--background-color:#fff;--text-color:#1f2937;--border-color:#e5e7eb;--hover-color:#f3f4f6}.component-library{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.component-item{transition:all .2s ease;cursor:grab}.component-item:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.15)}.component-item:active{cursor:grabbing;transform:scale(.95)}.visual-editor{background:#f9fafb}.drop-zone{min-height:100px;border:2px dashed #d1d5db;border-radius:8px;transition:all .3s ease;background:rgba(59,130,246,.05)}.drop-zone.active{border-color:var(--primary-color);background:rgba(59,130,246,.1);transform:scale(1.02)}.drop-zone.over{border-color:var(--accent-color);background:rgba(16,185,129,.1);box-shadow:0 0 20px rgba(16,185,129,.3)}.component-wrapper{position:relative;transition:all .2s ease;border:2px solid transparent;border-radius:4px}.component-wrapper:hover{border-color:rgba(59,130,246,.3);box-shadow:0 0 0 4px rgba(59,130,246,.1)}.component-wrapper.selected{border-color:var(--primary-color);box-shadow:0 0 0 4px rgba(59,130,246,.2)}.component-controls{position:absolute;top:-40px;right:0;display:flex;gap:4px;opacity:0;transition:opacity .2s ease;z-index:10}.component-wrapper.selected .component-controls,.component-wrapper:hover .component-controls{opacity:1}.control-button{background:#fff;border:1px solid #d1d5db;border-radius:4px;padding:4px;cursor:pointer;transition:all .2s ease;box-shadow:0 2px 4px rgba(0,0,0,.1)}.control-button:hover{background:#f3f4f6;transform:translateY(-1px);box-shadow:0 4px 8px rgba(0,0,0,.15)}.control-button.delete:hover{background:#fee2e2;color:#dc2626;border-color:#fecaca}.template-card{background:#fff;border-radius:12px;overflow:hidden;transition:all .3s ease;border:1px solid #e5e7eb}.template-card:hover{transform:translateY(-4px);box-shadow:0 20px 40px rgba(0,0,0,.1);border-color:var(--primary-color)}.template-preview{height:200px;background:linear-gradient(135deg,#667eea,#764ba2);position:relative;overflow:hidden}.template-preview:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><rect width="100" height="20" fill="%23ffffff" opacity="0.1"/><rect y="25" width="60" height="10" fill="%23ffffff" opacity="0.2"/><rect y="40" width="80" height="8" fill="%23ffffff" opacity="0.15"/><rect y="55" width="40" height="8" fill="%23ffffff" opacity="0.15"/></svg>') no-repeat 50%;background-size:80%}.code-editor{background:#1f2937;color:#f9fafb}.code-editor textarea{background:transparent;color:inherit;font-family:Monaco,Menlo,Ubuntu Mono,monospace;line-height:1.6;-moz-tab-size:2;-o-tab-size:2;tab-size:2}.code-editor textarea:focus{outline:none}.viewport-desktop{max-width:100%;margin:0 auto}.viewport-tablet{max-width:768px;margin:0 auto}.viewport-mobile{max-width:375px;margin:0 auto}.fade-in{animation:fadeIn .3s ease-in-out}.slide-in{animation:slideIn .3s ease-out}.bounce-in{animation:bounceIn .5s ease-out}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideIn{0%{transform:translateX(-20px);opacity:0}to{transform:translateX(0);opacity:1}}@keyframes bounceIn{0%{transform:scale(.3);opacity:0}50%{transform:scale(1.05)}70%{transform:scale(.9)}to{transform:scale(1);opacity:1}}.custom-scrollbar::-webkit-scrollbar{width:8px}.custom-scrollbar::-webkit-scrollbar-track{background:#f3f4f6;border-radius:4px}.custom-scrollbar::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:4px}.custom-scrollbar::-webkit-scrollbar-thumb:hover{background:#9ca3af}.loading-spinner{border:2px solid #f3f4f6;border-top:2px solid var(--primary-color);border-radius:50%;width:20px;height:20px;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.tooltip{position:relative}.tooltip:after{content:attr(data-tooltip);position:absolute;bottom:100%;left:50%;transform:translateX(-50%);background:#1f2937;color:#fff;padding:4px 8px;border-radius:4px;font-size:12px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s ease;z-index:1000}.tooltip:hover:after{opacity:1}.success-state{background:#ecfdf5;border:1px solid #a7f3d0;color:#065f46}.error-state{background:#fef2f2;border:1px solid #fecaca;color:#991b1b}.modern-button{background:linear-gradient(135deg,var(--primary-color) 0,#1d4ed8 100%);color:#fff;border:none;border-radius:8px;padding:12px 24px;font-weight:600;cursor:pointer;transition:all .3s ease;position:relative;overflow:hidden}.modern-button:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,hsla(0,0%,100%,.2),transparent);transition:left .5s ease}.modern-button:hover:before{left:100%}.modern-button:hover{transform:translateY(-2px);box-shadow:0 10px 25px rgba(59,130,246,.3)}.modern-button:active{transform:translateY(0)}.glass-effect{background:hsla(0,0%,100%,.25);backdrop-filter:blur(10px);border:1px solid hsla(0,0%,100%,.18);border-radius:12px}@media (prefers-color-scheme:dark){.advanced-web-builder{--background-color:#111827;--text-color:#f9fafb;--border-color:#374151;--hover-color:#1f2937}.template-card{background:#1f2937;border-color:#374151}.drop-zone{border-color:#4b5563;background:rgba(59,130,246,.1)}}@media print{.component-controls,.component-library,.control-button{display:none!important}.component-wrapper{border:none!important;box-shadow:none!important}}*{box-sizing:border-box}html{scroll-behavior:smooth}body{overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-20px)}}@keyframes pulse-glow{0%,to{opacity:.4;transform:scale(1)}50%{opacity:.8;transform:scale(1.05)}}@keyframes gradient-shift{0%{background-position:0 50%}50%{background-position:100% 50%}to{background-position:0 50%}}@keyframes text-reveal{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes magnetic-hover{0%{transform:scale(1) rotate(0deg)}25%{transform:scale(1.02) rotate(.5deg)}50%{transform:scale(1.05) rotate(0deg)}75%{transform:scale(1.02) rotate(-.5deg)}to{transform:scale(1) rotate(0deg)}}.enhanced-gradient-bg{background:linear-gradient(-45deg,rgba(59,130,246,.1),rgba(147,51,234,.1),rgba(236,72,153,.1),rgba(59,130,246,.1));background-size:400% 400%;animation:gradient-shift 15s ease infinite}.floating-element{animation:float 6s ease-in-out infinite}.pulse-glow{animation:pulse-glow 3s ease-in-out infinite}.text-reveal{animation:text-reveal .8s ease-out forwards}.magnetic-button{transition:all .3s cubic-bezier(.25,.46,.45,.94);cursor:pointer}.magnetic-button:hover{animation:magnetic-hover .6s ease-in-out;box-shadow:0 20px 40px rgba(59,130,246,.3)}.enhanced-card{transition:all .4s cubic-bezier(.25,.46,.45,.94);transform-style:preserve-3d;perspective:1000px}.enhanced-card:hover{transform:translateY(-10px) rotateX(5deg) rotateY(5deg);box-shadow:0 25px 50px rgba(0,0,0,.2),0 0 0 1px hsla(0,0%,100%,.1),inset 0 1px 0 hsla(0,0%,100%,.2)}.enhanced-card:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(135deg,hsla(0,0%,100%,.1),transparent 50%,hsla(0,0%,100%,.05));opacity:0;transition:opacity .3s ease;pointer-events:none;border-radius:inherit}.enhanced-card:hover:before{opacity:1}.parallax-element{will-change:transform;transform:translateZ(0)}.smooth-transition{transition:all .3s cubic-bezier(.25,.46,.45,.94)}.gpu-accelerated{transform:translateZ(0);backface-visibility:hidden;perspective:1000px}@media (max-width:768px){.enhanced-card:hover{transform:translateY(-5px)}.floating-element{animation-duration:8s}}@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.enhanced-gradient-bg,.floating-element,.pulse-glow{animation:none}}@media (min-width:1024px){.enhanced-effects-enabled{will-change:transform,opacity}.enhanced-card{transform-style:preserve-3d}}@media (prefers-color-scheme:dark){.enhanced-gradient-bg{background:linear-gradient(-45deg,rgba(59,130,246,.05),rgba(147,51,234,.05),rgba(236,72,153,.05),rgba(59,130,246,.05))}.enhanced-card:hover{box-shadow:0 25px 50px rgba(0,0,0,.4),0 0 0 1px hsla(0,0%,100%,.05),inset 0 1px 0 hsla(0,0%,100%,.1)}}