/* Premium UI Enhancements */

/* Enhanced Glass Effect Cards */
.glass-card {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.35);
    transition: all 0.3s ease;
}

.glass-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4);
    border-color: rgba(255, 255, 255, 0.12);
}

/* Universal Card Depth for All Cards */
.bg-white\/10, .bg-white\/6, .glass-card {
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.35);
    transition: all 0.3s ease;
}

.bg-white\/10:hover, .bg-white\/6:hover, .glass-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4);
}

/* Card Class for Download Page */
.card {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.35);
    transition: all 0.3s ease;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4);
    border-color: rgba(255, 255, 255, 0.12);
}

/* Download Box Specific */
.download-box {
    box-shadow: 0 20px 60px rgba(108, 99, 255, 0.3);
    transition: all 0.3s ease;
}

.download-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 30px 70px rgba(108, 99, 255, 0.4);
}

/* Enhanced Stats Cards */
.stat-card {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    padding: 12px;
    text-align: center;
    transition: all 0.3s ease;
}

.stat-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.35);
    border-color: rgba(255, 255, 255, 0.12);
}

/* Enhanced Button Hierarchy */
.btn-primary {
    background: linear-gradient(135deg, #F5C542, #FACC15);
    color: #1a1a1a;
    border: none;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 6px 20px rgba(245, 197, 66, 0.4);
}

.btn-primary:hover {
    background: linear-gradient(135deg, #FACC15, #F59E0B);
    box-shadow: 0 6px 20px rgba(245, 197, 66, 0.4);
    transform: translateY(-2px);
}

.btn-secondary {
    background: linear-gradient(135deg, #6C63FF, #8B85FF);
    color: white;
    border: none;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(108, 99, 255, 0.3);
}

.btn-secondary:hover {
    background: linear-gradient(135deg, #8B85FF, #9B95FF);
    box-shadow: 0 6px 20px rgba(108, 99, 255, 0.4);
    transform: translateY(-2px);
}

.btn-outline {
    background: transparent;
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.3);
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-outline:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.5);
    transform: translateY(-2px);
}

/* Section Background Variations */
.section-hero {
    background: linear-gradient(135deg, #0F0C29, #302B63, #6C63FF);
}

.section-dark-solid {
    background: #15123A;
}

.section-light-dark {
    background: #1A1733;
}

.section-gradient {
    background: linear-gradient(135deg, #0F0C29, #1A1733);
}

/* Pricing Card Alignment */
.pricing-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Button Hierarchy */
.btn-primary {
    background: linear-gradient(135deg, #F5C542, #FACC15);
    color: #1a1a1a;
    border: none;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 6px 20px rgba(245, 197, 66, 0.4);
    transform: translateY(-2px);
}

.btn-primary:hover {
    background: linear-gradient(135deg, #FACC15, #F59E0B);
    box-shadow: 0 6px 20px rgba(245, 197, 66, 0.4);
    transform: translateY(-2px);
}

.btn-secondary {
    background: linear-gradient(135deg, #6C63FF, #8B85FF);
    color: white;
    border: none;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(108, 99, 255, 0.3);
}

.btn-secondary:hover {
    background: linear-gradient(135deg, #8B85FF, #9B95FF);
    box-shadow: 0 6px 20px rgba(108, 99, 255, 0.4);
    transform: translateY(-2px);
}

.btn-tertiary {
    background: transparent;
    color: rgba(255, 255, 255, 0.8);
    border: none;
    text-decoration: underline;
    transition: all 0.3s ease;
}

.btn-tertiary:hover {
    color: white;
}

.btn-outline {
    background: transparent;
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.3);
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-outline:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.5);
    transform: translateY(-2px);
}

/* Hero Section Improvements */
.hero-phone {
    padding-right: 0;
}

@media (min-width: 640px) {
    .hero-phone {
        padding-right: 2rem;
    }
}

/* Mobile Phone Mockup Improvements */
.phone-mockup {
    margin: 0 auto;
}

@media (max-width: 639px) {
    .phone-mockup {
        max-width: 10rem !important;
        transform: scale(0.85);
    }
}

@media (min-width: 640px) and (max-width: 1023px) {
    .phone-mockup {
        max-width: 14rem !important;
    }
}

@media (min-width: 1024px) {
    .phone-mockup {
        max-width: 18rem !important;
    }
}

/* Logo Text Styling */
.logo-text {
    display: flex;
    align-items: baseline;
    transition: all 0.3s ease;
}

.logo-text:hover .logo-tutor {
    color: #F5C542;
}

.logo-text:hover .logo-pilot {
    color: #ffffff;
}

.logo-tutor {
    transition: color 0.3s ease;
}

.logo-pilot {
    transition: color 0.3s ease;
}

/* Mobile Logo Text Adjustments */
@media (max-width: 639px) {
    .logo-text span {
        font-size: 1.25rem !important;
    }
}

@media (min-width: 640px) and (max-width: 1023px) {
    .logo-text span {
        font-size: 1.5rem !important;
    }
}

@media (min-width: 1024px) {
    .logo-text span {
        font-size: 1.5rem !important;
    }
}

/* Mobile Hero Section Spacing */
@media (max-width: 639px) {
    .section-hero {
        padding-top: 6rem;
        padding-bottom: 4rem;
    }
    
    .section-hero .grid {
        gap: 2rem;
    }
    
    .section-hero .space-y-8 {
        gap: 1.5rem;
    }
    
    /* Mobile Phone Badge Positioning */
    .phone-mockup .absolute {
        position: relative !important;
        top: auto !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        margin: 0.5rem 0;
    }
    
    .phone-mockup .grid {
        margin-top: 1rem;
    }
}

.hero-glow {
    filter: blur(30px);
    opacity: 0.5;
}

/* Sticky Navbar with Blur */
.navbar-blur {
    backdrop-filter: blur(20px);
    background: rgba(15, 12, 41, 0.8);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Navbar scrolled state - light background */
.navbar-blur.scrolled {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.navbar-blur.scrolled .text-gray-300 {
    color: #374151 !important;
}

.navbar-blur.scrolled .text-gray-900 {
    color: #111827 !important;
}

.navbar-blur.scrolled .hover\:text-purple-400:hover {
    color: #7c3aed !important;
}

.navbar-blur.scrolled .fa-bars {
    color: #374151 !important;
}

/* Logo text styling when navbar is scrolled */
.navbar-blur.scrolled .logo-tutor {
    color: #111827 !important;
    text-shadow: 0 0 1px rgba(0, 0, 0, 0.5);
}

.navbar-blur.scrolled .logo-pilot {
    color: #F59E0B !important;
    text-shadow: 0 0 1px rgba(0, 0, 0, 0.5);
}

/* FAQ Answer Visibility Fix */
.faq-answer {
    color: #B0B3C7 !important; /* Light gray for better visibility */
    line-height: 1.6;
    font-size: 0.95rem;
}

/* When FAQ is opened, ensure answer is visible */
.bg-purple-50 .faq-answer {
    color: #1F2937 !important; /* Dark text for purple background */
}

/* Alternative: Better contrast for opened FAQ */
[onclick*="toggleFAQ"].bg-purple-50 .faq-answer {
    color: #1F2937 !important;
    font-weight: 400;
}

/* FAQ Question Visibility Fix */
[onclick*="toggleFAQ"] h3 {
    color: #FFFFFF !important; /* White text for questions */
    font-weight: 600;
    font-size: 1.125rem;
    line-height: 1.4;
}

/* FAQ Question when opened */
[onclick*="toggleFAQ"].bg-purple-50 h3 {
    color: #1F2937 !important; /* Dark text for opened state */
}

/* FAQ Chevron Icon Fix */
[onclick*="toggleFAQ"] .fa-chevron-down {
    color: #FACC15 !important; /* Yellow chevron */
}

/* FAQ Chevron when opened */
[onclick*="toggleFAQ"].bg-purple-50 .fa-chevron-down {
    color: #7C3AED !important; /* Purple chevron when opened */
}

/* Scroll Indicator */
.scroll-indicator {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    background: linear-gradient(90deg, #F5C542, #F59E0B);
    z-index: 100;
    transition: width 0.3s ease;
}

/* WhatsApp Pulse Animation */
.whatsapp-pulse {
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.05); opacity: 0.9; }
}

/* Mobile Hero Section Enhanced Animations */
@media (max-width: 639px) {
    /* Mobile Hero Content Animations */
    .section-hero .space-y-6 > div:first-child {
        animation: slideInLeft 0.8s ease-out;
    }
    
    .section-hero h1 {
        animation: slideInUp 0.8s ease-out 0.2s both;
    }
    
    .section-hero .premium-text {
        animation: slideInUp 0.8s ease-out 0.4s both;
    }
    
    .section-hero .flex-col {
        animation: slideInUp 0.8s ease-out 0.6s both;
    }
    
    .section-hero .flex-wrap {
        animation: slideInUp 0.8s ease-out 0.8s both;
    }
    
    .section-hero .grid {
        animation: slideInUp 0.8s ease-out 1s both;
    }
    
    /* Mobile Phone Enhanced Animation */
    .hero-phone {
        animation: mobileFloat 4s ease-in-out infinite;
    }
    
    @keyframes mobileFloat {
        0%, 100% { transform: translateY(0px) rotate(-2deg); }
        25% { transform: translateY(-8px) rotate(1deg); }
        50% { transform: translateY(-12px) rotate(0deg); }
        75% { transform: translateY(-8px) rotate(-1deg); }
    }
    
    /* Mobile Badge Animations */
    .phone-mockup .absolute:nth-child(1) {
        animation: bounceIn 1s ease-out 1.5s both;
    }
    
    .phone-mockup .absolute:nth-child(2) {
        animation: bounceIn 1s ease-out 1.8s both;
    }
    
    @keyframes bounceIn {
        0% { opacity: 0; transform: scale(0.3) translateY(-20px); }
        50% { opacity: 1; transform: scale(1.05) translateY(5px); }
        70% { transform: scale(0.95) translateY(-2px); }
        100% { opacity: 1; transform: scale(1) translateY(0); }
    }
    
    /* Mobile Stats Counter Animation */
    .stat-card {
        animation: mobileCountUp 0.6s ease-out both;
    }
    
    .stat-card:nth-child(1) { animation-delay: 1.2s; }
    .stat-card:nth-child(2) { animation-delay: 1.4s; }
    .stat-card:nth-child(3) { animation-delay: 1.6s; }
    .stat-card:nth-child(4) { animation-delay: 1.8s; }
    
    @keyframes mobileCountUp {
        0% { opacity: 0; transform: translateY(30px) scale(0.8); }
        50% { opacity: 1; transform: translateY(-5px) scale(1.05); }
        100% { opacity: 1; transform: translateY(0) scale(1); }
    }
    
    /* Mobile Button Animation */
    .section-hero .btn-primary,
    .section-hero .btn-secondary {
        animation: mobileButtonBounce 0.8s ease-out 0.6s both;
    }
    
    @keyframes mobileButtonBounce {
        0% { opacity: 0; transform: translateY(20px) scale(0.9); }
        60% { opacity: 1; transform: translateY(-3px) scale(1.02); }
        100% { opacity: 1; transform: translateY(0) scale(1); }
    }
    
    /* Mobile Feature List Animation */
    .section-hero .inline-flex {
        animation: mobileFeaturePulse 0.6s ease-out both;
    }
    
    @keyframes mobileFeaturePulse {
        0% { opacity: 0; transform: scale(0.8); }
        50% { opacity: 1; transform: scale(1.05); }
        100% { opacity: 1; transform: scale(1); }
    }
    
    /* Mobile Background Blob Enhanced */
    .section-hero .animate-blob {
        animation-duration: 8s;
        animation-timing-function: ease-in-out;
    }
    
    /* Mobile Hero Glow Effect */
    .hero-glow {
        animation: mobileGlow 3s ease-in-out infinite;
    }
    
    @keyframes mobileGlow {
        0%, 100% { 
            opacity: 0.4; 
            filter: blur(25px) brightness(1);
            transform: scale(1);
        }
        50% { 
            opacity: 0.8; 
            filter: blur(35px) brightness(1.2);
            transform: scale(1.1);
        }
    }
}

/* Mobile Touch Interaction Feedback */
@media (max-width: 639px) and (hover: none) {
    .section-hero .btn-primary:active,
    .section-hero .btn-secondary:active {
        transform: scale(0.95);
        transition: transform 0.1s ease;
    }
    
    .stat-card:active {
        transform: scale(0.95);
        transition: transform 0.1s ease;
    }
}

/* Pricing Card Glow */
.pricing-pro {
    transition: all 0.3s ease;
}

.pricing-pro:hover {
    transform: scale(1.05);
    box-shadow: 0 0 30px rgba(108, 99, 255, 0.4);
    border-color: rgba(108, 99, 255, 0.6);
}

/* Premium Typography */
.premium-heading {
    line-height: 1.3;
    letter-spacing: -0.3px;
}

.premium-text {
    line-height: 1.3;
    letter-spacing: -0.3px;
}

/* Enhanced Micro-interactions */
.fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Button Glow Effects */
.btn-glow:hover {
    box-shadow: 0 0 20px rgba(245, 197, 66, 0.5);
}

/* Enhanced Stats Display */
.stat-card {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 1.5rem;
    text-align: center;
    transition: all 0.3s ease;
}

.stat-card:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.12);
}

/* Micro-interactions */
.interactive-card {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.interactive-card:hover {
    transform: translateY(-5px);
}

.interactive-card:active {
    transform: translateY(-2px);
}

/* Enhanced Focus States */
.focus-enhanced:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(245, 197, 66, 0.3);
}

/* Loading States */
.shimmer {
    background: linear-gradient(90deg, 
        rgba(255, 255, 255, 0.05) 25%, 
        rgba(255, 255, 255, 0.1) 50%, 
        rgba(255, 255, 255, 0.05) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}