.modal-overlay {
            backdrop-filter: blur(5px);
            animation: fadeIn 0.3s ease-out;
        }
        
        .modal-content {
            animation: slideIn 0.3s ease-out;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        
        @keyframes slideIn {
            from { transform: translateY(50px) scale(0.95); opacity: 0; }
            to { transform: translateY(0) scale(1); opacity: 1; }
        }
        
        .pool-shape-btn.active {
            background: linear-gradient(45deg, #3b82f6, #1d4ed8);
            color: white;
            transform: scale(1.05);
        }
        
        .step-indicator.active {
            background: linear-gradient(45deg, #10b981, #059669);
            color: white;
        }
        
        .progress-bar {
            background: linear-gradient(90deg, #10b981, #059669);
            height: 6px;
            border-radius: 3px;
            transition: width 0.3s ease;
        }
        
        .product-card {
            transition: all 0.3s ease;
        }
        
        .product-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }
        
        .pool-visual {
            background: linear-gradient(45deg, #3b82f6, #1e40af);
            border-radius: 20px;
            position: relative;
            overflow: hidden;
        }
        
        .pool-visual::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(45deg, rgba(59, 130, 246, 0.8), rgba(30, 64, 175, 0.8));
            animation: wave 3s ease-in-out infinite;
        }
        
        @keyframes wave {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.02); }
        }
        
        .calculator-trigger {
            position: fixed;
            bottom: 30px;
            right: 30px;
            z-index: 1000;
        }
        
        .calc-btn {
            background: linear-gradient(45deg, #10b981, #059669);
            box-shadow: 0 10px 20px rgba(16, 185, 129, 0.3);
            transition: all 0.3s ease;
        }
        
        .calc-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 15px 30px rgba(16, 185, 129, 0.4);
        }