.visualizer-hero{min-height:60vh;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;padding-top:100px}.visualizer-hero .hero-content{text-align:center;max-width:800px;padding:2rem}.visualizer-hero .hero-title{margin-bottom:var(--spacing-md)}.visualizer-hero .hero-subtitle{font-size:clamp(1.125rem,2vw,1.25rem);color:var(--white);line-height:1.8;text-shadow:0 2px 12px rgba(0,0,0,.6),0 4px 24px rgba(0,0,0,.4);font-weight:500}@keyframes fadeInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.fade-in-up{animation:fadeInUp .8s ease-out forwards;opacity:0}.fade-in-up.delay-1{animation-delay:.3s}.fade-in-up.delay-2{animation-delay:.6s}.fade-in-up.delay-3{animation-delay:.9s}.visualizer-section{padding:var(--spacing-xl) 0}.visualizer-wrapper{padding:var(--spacing-xl);margin-bottom:var(--spacing-xl)}.visualizer-header{text-align:center;margin-bottom:var(--spacing-lg)}.visualizer-header .section-title{margin-bottom:var(--spacing-sm)}.visualizer-header .section-subtitle{color:var(--slate-gray-light);font-size:1.125rem;max-width:600px;margin:0 auto}.demo-section{margin-bottom:var(--spacing-xl);padding-bottom:var(--spacing-xl);border-bottom:2px solid rgba(212,175,55,.2)}.demo-title{color:var(--white);font-size:1.75rem;margin-bottom:var(--spacing-sm);font-weight:700;text-align:center}.demo-subtitle{color:var(--slate-gray-light);font-size:1rem;text-align:center;margin-bottom:var(--spacing-lg);max-width:600px;margin-left:auto;margin-right:auto}.demo-slider{margin-bottom:var(--spacing-md)}.demo-cta{text-align:center;margin-top:var(--spacing-lg);padding:var(--spacing-md);background:rgba(212,175,55,.1);border-radius:var(--border-radius-md);border:1px solid rgba(212,175,55,.3)}.demo-cta p{color:var(--white);font-size:1.125rem;font-weight:600;margin-bottom:.5rem}.demo-cta svg{color:var(--brushed-gold);animation:bounce 2s infinite}@keyframes bounce{0%,20%,50%,80%,to{transform:translateY(0)}40%{transform:translateY(-10px)}60%{transform:translateY(-5px)}}.decor8-container{min-height:400px;position:relative}.visualizer-step{margin-bottom:var(--spacing-lg)}.step-title{color:var(--white);font-size:1.5rem;margin-bottom:var(--spacing-md);font-weight:700}.upload-zone{background:rgba(0,0,0,.3);border:2px dashed rgba(212,175,55,.4);border-radius:var(--border-radius-lg);padding:var(--spacing-xl);text-align:center;cursor:pointer;transition:all var(--transition-base)}.upload-zone:hover{border-color:rgba(212,175,55,.8);background:rgba(212,175,55,.05)}.upload-zone.drag-over{border-color:var(--brushed-gold);background:rgba(212,175,55,.1);transform:scale(1.02)}.upload-content svg{color:var(--brushed-gold);margin-bottom:1rem}.upload-content .upload-title,.upload-content h4{color:var(--white);font-size:1.25rem;margin-bottom:.5rem;font-weight:700}.upload-content p{color:var(--slate-gray-light);margin-bottom:1rem}.file-types{display:inline-block;font-size:.875rem;color:var(--slate-gray);background:hsla(0,0%,100%,.05);padding:.5rem 1rem;border-radius:var(--border-radius-sm)}.image-preview{position:relative;margin-top:var(--spacing-md);border-radius:var(--border-radius-lg);overflow:hidden}.image-preview img{width:100%;max-height:500px;object-fit:contain;display:block;background:rgba(0,0,0,.5)}.btn-remove{position:absolute;top:1rem;right:1rem;background:rgba(220,38,38,.9);color:#fff;border:none;padding:.75rem 1.25rem;border-radius:var(--border-radius-md);cursor:pointer;display:flex;align-items:center;gap:.5rem;font-weight:600;transition:all var(--transition-base)}.btn-remove:hover{background:#dc2626;transform:translateY(-2px)}.room-type-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));grid-gap:var(--spacing-md);gap:var(--spacing-md)}.room-type-btn{background:hsla(0,0%,100%,.05);border:2px solid hsla(0,0%,100%,.1);border-radius:var(--border-radius-md);padding:var(--spacing-md);color:var(--white);cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:.75rem;font-weight:600;transition:all var(--transition-base)}.room-type-btn svg{color:var(--brushed-gold)}.room-type-btn:hover{background:hsla(0,0%,100%,.08);border-color:rgba(212,175,55,.5);transform:translateY(-2px)}.room-type-btn.selected{background:rgba(212,175,55,.2);border-color:var(--brushed-gold)}.color-section{margin-bottom:var(--spacing-lg)}.color-category{color:var(--white);font-size:1.125rem;margin-bottom:var(--spacing-sm);font-weight:600}.color-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));grid-gap:var(--spacing-sm);gap:var(--spacing-sm)}.color-swatch{background:hsla(0,0%,100%,.05);border:2px solid hsla(0,0%,100%,.1);border-radius:var(--border-radius-md);padding:.75rem;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:.5rem;transition:all var(--transition-base)}.color-swatch:hover{background:hsla(0,0%,100%,.08);border-color:rgba(212,175,55,.5);transform:translateY(-2px)}.color-swatch.selected{background:rgba(212,175,55,.2);border-color:var(--brushed-gold)}.swatch-color{width:60px;height:60px;border-radius:50%;border:3px solid hsla(0,0%,100%,.2);display:block}.swatch-name{color:var(--white);font-size:.875rem;font-weight:500;text-align:center}.custom-color-section{margin-top:var(--spacing-lg);padding-top:var(--spacing-lg);border-top:1px solid hsla(0,0%,100%,.1)}.custom-color-input{display:flex;align-items:center;gap:var(--spacing-sm);flex-wrap:wrap}#custom-color-picker{width:60px;height:60px;border:2px solid rgba(212,175,55,.5);border-radius:var(--border-radius-sm);cursor:pointer;background:transparent}#custom-hex-input{flex:1 1;min-width:150px;padding:.75rem 1rem;background:hsla(0,0%,100%,.05);border:2px solid hsla(0,0%,100%,.1);border-radius:var(--border-radius-md);color:var(--white);font-family:monospace;font-size:1rem}#custom-hex-input:focus{outline:none;border-color:var(--brushed-gold)}.visualize-btn{width:100%;margin-top:var(--spacing-lg);display:flex;align-items:center;justify-content:center;gap:.75rem}.visualize-btn:disabled{opacity:.5;cursor:not-allowed}.visualizer-results{margin-top:var(--spacing-xl)}.comparison-slider{margin-bottom:var(--spacing-lg)}.comparison-container{position:relative;width:100%;max-width:900px;margin:0 auto;overflow:hidden;border-radius:var(--border-radius-lg);box-shadow:0 8px 32px rgba(0,0,0,.3);border:2px solid rgba(212,175,55,.3);-moz-user-select:none;user-select:none;-webkit-user-select:none}.comparison-after,.comparison-before{position:relative;width:100%;height:100%}.comparison-after{display:block}.comparison-before{position:absolute;top:0;left:0;width:50%;height:100%;overflow:hidden}.comparison-after img,.comparison-before img{width:100%;height:100%;display:block;object-fit:cover;pointer-events:none}.comparison-before img{position:absolute;top:0;left:0;width:auto;min-width:100%;height:100%}.comparison-handle{position:absolute;top:0;left:50%;width:4px;height:100%;background:var(--brushed-gold);cursor:ew-resize;transform:translateX(-50%);z-index:10;transition:opacity .2s ease}.comparison-handle:hover{opacity:.9}.handle-line{width:2px;height:100%;transform:translateX(-50%)}.handle-circle,.handle-line{position:absolute;left:50%;background:var(--brushed-gold)}.handle-circle{top:50%;transform:translate(-50%,-50%);width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;gap:4px;box-shadow:0 4px 16px rgba(0,0,0,.4);transition:transform .2s ease}.comparison-handle:hover .handle-circle{transform:translate(-50%,-50%) scale(1.1)}.handle-circle svg{color:var(--navy-blue-dark);width:20px;height:20px}.comparison-label{position:absolute;top:1rem;padding:.5rem 1rem;background:rgba(0,0,0,.7);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:var(--white);font-weight:700;font-size:.875rem;border-radius:var(--border-radius-sm);z-index:5;text-transform:uppercase;letter-spacing:.5px}.comparison-label-before{left:1rem}.comparison-label-after{right:1rem}.comparison-hint{text-align:center;color:var(--slate-gray-light);font-size:.9375rem;margin-top:var(--spacing-md);font-style:italic}.results-actions{gap:var(--spacing-md);flex-wrap:wrap}.loading-overlay,.results-actions{display:flex;justify-content:center}.loading-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(13,43,62,.95);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);align-items:center;z-index:100;border-radius:var(--border-radius-lg)}.loading-content{text-align:center}.spinner{width:64px;height:64px;border:4px solid rgba(212,175,55,.2);border-top:4px solid var(--brushed-gold);border-radius:50%;animation:spin 1s linear infinite;margin:0 auto 1.5rem}@keyframes spin{to{transform:rotate(1turn)}}.loading-content h3{color:var(--white);margin-bottom:.5rem}.loading-content p{color:var(--slate-gray-light)}.visualizer-instructions{margin-top:var(--spacing-lg)}.visualizer-instructions h3{color:var(--white);font-size:1.75rem;margin-bottom:var(--spacing-md);text-align:center}.instruction-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));grid-gap:var(--spacing-md);gap:var(--spacing-md);margin-top:var(--spacing-md)}.instruction-item{display:flex;gap:1rem;align-items:flex-start;padding:var(--spacing-md);background:hsla(0,0%,100%,.03);border-radius:var(--border-radius-md);border:1px solid hsla(0,0%,100%,.1);transition:all var(--transition-base)}.instruction-item:hover{background:hsla(0,0%,100%,.05);border-color:rgba(212,175,55,.3);transform:translateY(-2px)}.instruction-number{flex-shrink:0;width:48px;height:48px;border-radius:50%;background:var(--gradient-gold);color:var(--navy-blue-dark);display:flex;align-items:center;justify-content:center;font-size:1.5rem;font-weight:800;font-family:var(--font-display)}.instruction-content .instruction-step-title,.instruction-content h4{color:var(--white);font-size:1.125rem;margin-bottom:.5rem;font-weight:700}.instruction-content p{color:var(--slate-gray-light);font-size:.9375rem;line-height:1.6}.ai-detection-note{margin-top:var(--spacing-lg);padding:var(--spacing-md);background:rgba(212,175,55,.1);border-left:4px solid var(--brushed-gold);border-radius:var(--border-radius-md);display:flex;align-items:flex-start;gap:1rem}.ai-detection-note svg{flex-shrink:0;color:var(--brushed-gold);margin-top:.25rem}.ai-detection-note p{color:var(--slate-gray-light);font-size:.9375rem;line-height:1.6;margin:0}.ai-detection-note strong{color:var(--white);font-weight:600}.visualizer-cta{text-align:center;padding:var(--spacing-xl);background:hsla(0,0%,100%,.05);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-radius:var(--border-radius-lg);border:2px solid rgba(212,175,55,.3);box-shadow:0 8px 32px rgba(0,0,0,.2)}.visualizer-cta h3{color:var(--white);font-size:2rem;margin-bottom:var(--spacing-sm)}.visualizer-cta p{color:var(--slate-gray-light);font-size:1.125rem;margin-bottom:var(--spacing-lg);max-width:600px;margin-left:auto;margin-right:auto}.visualizer-cta .btn{display:inline-flex;align-items:center;gap:.75rem}@media (max-width:1024px){.visualizer-wrapper{padding:var(--spacing-lg)}.color-grid{grid-template-columns:repeat(auto-fill,minmax(100px,1fr))}.instruction-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}}@media (max-width:768px){.visualizer-hero{min-height:50vh;padding-top:80px}.visualizer-hero .hero-content{padding:1.5rem}.visualizer-wrapper{padding:var(--spacing-md)}.upload-zone{padding:var(--spacing-lg)}.color-grid,.room-type-grid{grid-template-columns:repeat(2,1fr)}.instruction-grid,.results-comparison{grid-template-columns:1fr}.instruction-grid{gap:var(--spacing-sm)}.visualizer-cta{padding:var(--spacing-lg)}.visualizer-cta h3{font-size:1.5rem}.visualizer-cta p{font-size:1rem}.results-actions{flex-direction:column}.results-actions .btn{width:100%}}@media (max-width:480px){.visualizer-hero .hero-title{font-size:2rem}.visualizer-wrapper{padding:var(--spacing-sm)}.upload-zone{padding:var(--spacing-md)}.room-type-grid{grid-template-columns:1fr}.step-title{font-size:1.25rem}.instruction-item{padding:var(--spacing-sm)}.instruction-number{width:40px;height:40px;font-size:1.25rem}.visualizer-cta{padding:var(--spacing-md)}.custom-color-input{flex-direction:column;align-items:stretch}#custom-hex-input{width:100%}}