/* Advanced Glassmorphism Effects */

/* Enhanced glassmorphism for main sections */
.intro, .comparison, .faq {
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(15px) saturate(1.5) !important;
    -webkit-backdrop-filter: blur(15px) saturate(1.5) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
}

/* Ultra-modern upload section */
.upload-section {
    background: rgba(255, 255, 255, 0.15) !important;
    backdrop-filter: blur(20px) saturate(1.8) !important;
    -webkit-backdrop-filter: blur(20px) saturate(1.8) !important;
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
    box-shadow: 
        0 25px 50px rgba(102, 126, 234, 0.15),
        0 0 0 1px rgba(255, 255, 255, 0.1),
        inset 0 2px 0 rgba(255, 255, 255, 0.3) !important;
    position: relative;
    overflow: hidden;
}

.upload-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 200%;
    height: 100%;
    background: linear-gradient(90deg, 
        transparent, 
        rgba(255, 255, 255, 0.1), 
        transparent);
    animation: shimmer 3s ease-in-out infinite;
}

@keyframes shimmer {
    0% { left: -100%; }
    100% { left: 100%; }
}

/* Enhanced comparison boxes */
.comparison-box {
    background: rgba(255, 255, 255, 0.12) !important;
    backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

.comparison-box:hover {
    background: rgba(255, 255, 255, 0.2) !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
    box-shadow: 
        0 20px 40px rgba(102, 126, 234, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}

/* Premium FAQ styling */
.faq-item {
    background: rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    margin-bottom: 1rem !important;
    transition: all 0.3s ease !important;
}

.faq-item:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
    transform: translateX(5px) !important;
}

/* Beautiful result section */
.result-section {
    background: rgba(255, 255, 255, 0.18) !important;
    backdrop-filter: blur(25px) saturate(2) !important;
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
    box-shadow: 
        0 30px 60px rgba(102, 126, 234, 0.2),
        inset 0 2px 0 rgba(255, 255, 255, 0.4) !important;
    position: relative;
}

.result-section::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: inherit;
    padding: 2px;
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.4), 
        rgba(255, 255, 255, 0.1), 
        rgba(255, 255, 255, 0.4));
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    -webkit-mask-composite: xor;
    pointer-events: none;
}

/* Advanced button glassmorphism */
.button-primary, .newsletter-submit {
    backdrop-filter: blur(10px) !important;
    box-shadow: 
        0 8px 25px rgba(102, 126, 234, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

/* Floating glass navbar effect (if added later) */
.glass-nav {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px) saturate(1.8);
    -webkit-backdrop-filter: blur(20px) saturate(1.8);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    transition: all 0.3s ease;
}

/* Mobile optimizations */
@media (max-width: 768px) {
    .intro, .comparison, .faq, .upload-section {
        backdrop-filter: blur(10px) saturate(1.2) !important;
        -webkit-backdrop-filter: blur(10px) saturate(1.2) !important;
    }
}