/* ==========================================================================
   Mobile-Only Responsive Design - Desktop Unchanged
   ========================================================================== */

/* Desktop - Hide mobile navigation elements and mobile-only cards */
@media (min-width: 769px) {
    .mobile-nav {
        display: none !important;
        visibility: hidden !important;
    }
    
    .mobile-menu-btn {
        display: none !important;
        visibility: hidden !important;
    }
    
    .mobile-ai-card-container {
        display: none !important;
        visibility: hidden !important;
    }
    
    .mobile-ai-dashboard-container {
        display: none !important;
        visibility: hidden !important;
    }
    
    .mobile-scroll-indicator {
        display: none !important;
        visibility: hidden !important;
    }
    
    .mobile-header {
        display: none !important;
        visibility: hidden !important;
    }
    
    .simple-mobile-header {
        display: none !important;
        visibility: hidden !important;
    }
    
    .simple-mobile-menu {
        display: none !important;
        visibility: hidden !important;
    }
    
    .simple-menu-overlay {
        display: none !important;
        visibility: hidden !important;
    }
    
    .header {
        display: block !important;
        visibility: visible !important;
    }
    
    /* Ensure proper alignment on desktop/tablet */
    .header-content {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
    }
    
    .logo {
        display: flex !important;
        align-items: center !important;
    }
    
    .nav {
        display: flex !important;
        align-items: center !important;
    }
    
    .nav-list {
        display: flex !important;
        align-items: center !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    .user-actions {
        display: flex !important;
        align-items: center !important;
    }
    
    /* Ensure comparison table displays properly on desktop */
    .comparison-table {
        display: block !important;
        width: 100% !important;
        overflow: visible !important;
        border-radius: 24px !important;
        background: transparent !important;
    }
    
    .comparison-header {
        display: grid !important;
        grid-template-columns: 2fr 1fr 1fr 1fr !important;
        padding: 30px !important;
        gap: 0 !important;
    }
    
    .comparison-header > div {
        text-align: center !important;
    }
    
    .comparison-header > div:first-child {
        text-align: left !important;
    }
    
    .capability-section,
    .usage-section,
    .included-section {
        display: block !important;
    }
    
    .capability-section .section-title,
    .usage-section .section-title,
    .included-section .section-title {
        display: grid !important;
        grid-template-columns: 2fr 1fr 1fr 1fr !important;
        padding: 25px 30px !important;
        gap: 0 !important;
    }
    
    .capability-section .section-title > div,
    .usage-section .section-title > div,
    .included-section .section-title > div {
        font-size: 12px !important;
        font-weight: 600 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.8px !important;
        color: rgba(138, 43, 226, 0.9) !important;
    }
    
    .feature-row {
        display: grid !important;
        grid-template-columns: 2fr 1fr 1fr 1fr !important;
        padding: 20px 30px !important;
        gap: 0 !important;
    }
    
    .feature-row > div {
        text-align: center !important;
    }
    
    .feature-row > div:first-child {
        text-align: left !important;
    }
}

/* Only apply styles to mobile and tablet - DO NOT touch desktop */

/* Tablet styles */
@media (max-width: 1024px) and (min-width: 769px) {
    .plans-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        max-width: 800px;
        margin: 0 auto;
        gap: 24px;
    }
}

/* Hide mobile FAQ container on desktop */
.mobile-faq-container {
    display: none;
}

/* Mobile and small tablet - Center everything */
@media (max-width: 768px) {
    /* ENABLE ANIMATIONS ON MOBILE - REMOVED BLOCKER */
    
    /* Mobile performance optimizations */
    html {
        overflow-x: hidden !important;
        overflow-y: visible !important;
        max-width: 100vw !important;
        -webkit-text-size-adjust: 100% !important;
        -webkit-font-smoothing: antialiased !important;
        -moz-osx-font-smoothing: grayscale !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    body {
        overflow-x: hidden !important;
        overflow-y: visible !important;
        max-width: 100vw !important;
        width: 100% !important;
        /* REMOVED TRANSFORM TO ALLOW STICKY POSITIONING */
        /* -webkit-transform: translate3d(0, 0, 0) !important; */
        /* transform: translate3d(0, 0, 0) !important; */
        will-change: auto !important;
    }
    
    * {
        max-width: 100vw !important;
        box-sizing: border-box !important;
        -webkit-tap-highlight-color: transparent !important;
        -webkit-touch-callout: none !important;
        -webkit-backface-visibility: hidden !important;
        backface-visibility: hidden !important;
    }
    
    /* Optimize common performance-heavy elements on mobile */
    .apple-glass-card,
    .emerging-frontiers-card,
    .premium-dashboard {
        -webkit-transform: translateZ(0) !important;
        transform: translateZ(0) !important;
        will-change: auto !important;
    }
    
    /* Keep backgrounds - animations already disabled above */
    
    /* Force all content to center */
    .container {
        max-width: 100% !important;
        width: 100% !important;
        padding: 0 16px !important;
        margin: 0 auto;
        overflow: visible !important;
    }
    
    /* Hide desktop header on mobile/tablet */
    .header {
        display: none !important;
        visibility: hidden !important;
    }
    
    /* SHOW MOBILE HEADER - OVERRIDE GLOBAL display:none RULE */
    .simple-mobile-header {
        display: flex !important;
        visibility: visible !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        height: 55px !important;
        background: rgba(0, 0, 0, 0.95) !important;
        backdrop-filter: blur(20px) !important;
        -webkit-backdrop-filter: blur(20px) !important;
        border-bottom: 1px solid rgba(138, 43, 226, 0.3) !important;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5) !important;
        z-index: 2147483647 !important;
        display: flex !important;
        align-items: center !important;
        transform: translateZ(0) !important;
        will-change: transform !important;
    }
    
    /* ALLOW TRANSITIONS FOR MOBILE HEADER - REMOVE BLOCKERS */
    .simple-mobile-header,
    .simple-mobile-header *,
    .simple-header-content,
    .simple-header-content * {
        transform: translateZ(0) !important;
        animation: auto !important;  /* ALLOW ANIMATIONS */
        transition: auto !important; /* ALLOW TRANSITIONS */
        position: relative !important;
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* REMOVED DUPLICATE POSITION RULE TO PREVENT CONFLICTS */
    
    .simple-header-content {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100% !important;
        padding: 0 20px !important;
    }
    
    .simple-logo {
        color: #ffffff !important;
        font-size: 22px !important;
        font-weight: 700 !important;
        text-decoration: none !important;
        font-family: -apple-system, BlinkMacSystemFont, system-ui, sans-serif !important;
    }
    
    .simple-menu-btn {
        background: rgba(138, 43, 226, 0.2) !important;
        border: 1px solid rgba(138, 43, 226, 0.4) !important;
        border-radius: 8px !important;
        color: #ffffff !important;
        font-size: 18px !important;
        width: 40px !important;
        height: 40px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
    }
    
    .simple-menu-btn:active {
        background: rgba(138, 43, 226, 0.4) !important;
    }
    
    /* SIMPLE MOBILE MENU */
    .simple-mobile-menu {
        position: fixed !important;
        top: 0 !important;
        right: -100% !important;
        width: 300px !important;
        height: 100vh !important;
        background: rgba(0, 0, 0, 0.98) !important;
        backdrop-filter: blur(20px) !important;
        -webkit-backdrop-filter: blur(20px) !important;
        z-index: 99998 !important;
        display: flex !important;
        flex-direction: column !important;
        transition: right 0.3s ease !important;
        border-left: 1px solid rgba(138, 43, 226, 0.3) !important;
    }
    
    .simple-mobile-menu.open {
        right: 0 !important;
    }
    
    .simple-menu-header {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 20px !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    }
    
    .simple-menu-logo {
        color: #ffffff !important;
        font-size: 18px !important;
        font-weight: 700 !important;
        font-family: -apple-system, BlinkMacSystemFont, system-ui, sans-serif !important;
    }
    
    .simple-close-btn {
        background: rgba(138, 43, 226, 0.2) !important;
        border: 1px solid rgba(138, 43, 226, 0.4) !important;
        border-radius: 50% !important;
        color: #ffffff !important;
        font-size: 20px !important;
        width: 35px !important;
        height: 35px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        line-height: 1 !important;
    }
    
    .simple-close-btn:active {
        background: rgba(138, 43, 226, 0.4) !important;
    }
    
    .simple-menu-nav {
        flex: 1 !important;
        padding: 20px 0 !important;
        display: flex !important;
        flex-direction: column !important;
    }
    
    .simple-menu-link {
        color: rgba(255, 255, 255, 0.9) !important;
        text-decoration: none !important;
        padding: 15px 20px !important;
        font-size: 16px !important;
        font-weight: 500 !important;
        font-family: -apple-system, BlinkMacSystemFont, system-ui, sans-serif !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    }
    
    .simple-menu-link:active {
        background: rgba(138, 43, 226, 0.1) !important;
        color: #ffffff !important;
    }
    
    .simple-menu-footer {
        padding: 20px !important;
        border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    }
    
    .simple-menu-cta {
        display: block !important;
        width: 100% !important;
        padding: 15px !important;
        background: linear-gradient(135deg, #8a2be2 0%, #6a1fb8 100%) !important;
        border: none !important;
        border-radius: 10px !important;
        color: #ffffff !important;
        font-size: 16px !important;
        font-weight: 600 !important;
        text-align: center !important;
        text-decoration: none !important;
        font-family: -apple-system, BlinkMacSystemFont, system-ui, sans-serif !important;
    }
    
    .simple-menu-cta:active {
        background: linear-gradient(135deg, #7a25d2 0%, #5a1ba8 100%) !important;
    }
    
    /* MENU OVERLAY */
    .simple-menu-overlay {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        background: rgba(0, 0, 0, 0.7) !important;
        backdrop-filter: blur(5px) !important;
        -webkit-backdrop-filter: blur(5px) !important;
        z-index: 99997 !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transition: opacity 0.3s ease !important;
    }
    
    .simple-menu-overlay.show {
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    .header .container {
        max-width: 100% !important;
        padding: 0 16px !important;
    }
    
    .header-content {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 16px 0 !important;
        width: 100% !important;
        height: auto !important;
        min-height: 60px !important;
        box-sizing: border-box !important;
    }
    
    .logo {
        flex-shrink: 0 !important;
        z-index: 1001 !important;
        display: flex !important;
        align-items: center !important;
    }
    
    /* Ensure logo image is vertically centered */
    .logo img {
        display: block !important;
        vertical-align: middle !important;
    }
    
    .logo-text {
        font-size: 22px !important;
        color: #ffffff !important;
        font-weight: 700 !important;
        text-decoration: none !important;
    }
    
    .nav {
        display: none !important;
    }
    
    .user-actions {
        display: none !important;
    }
    
    .mobile-menu-btn {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 4px !important;
        width: 40px !important;
        height: 40px !important;
        background: none !important;
        border: none !important;
        cursor: pointer !important;
        z-index: 1001 !important;
        padding: 8px !important;
        -webkit-tap-highlight-color: transparent !important;
        touch-action: manipulation !important;
    }
    
    .menu-line {
        width: 20px !important;
        height: 2px !important;
        background: #ffffff !important;
        border-radius: 1px !important;
        transition: all 0.3s ease !important;
    }
    
    /* Slide-in Mobile Navigation Menu - Nice background, no animations */
    .mobile-nav {
        position: fixed !important;
        top: 0 !important;
        right: -280px !important;
        bottom: 0 !important;
        width: 280px !important;
        max-width: 85vw !important;
        height: 100vh !important;
        background: rgba(0, 0, 0, 0.9) !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
        z-index: 9999 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        box-shadow: -2px 0 10px rgba(0, 0, 0, 0.3) !important;
        border-left: 1px solid rgba(255, 255, 255, 0.1) !important;
        transition: none !important;
    }
    
    .mobile-nav.active {
        right: 0 !important;
    }
    
    /* Dark overlay when menu is open */
    .mobile-nav-overlay {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        background: rgba(0, 0, 0, 0.5) !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transition: none !important;
        z-index: 9998 !important;
    }
    
    .mobile-nav-overlay.active {
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    /* Remove heavy effects for performance */
    .mobile-nav::before {
        display: none !important;
    }
    
    .mobile-nav::after {
        display: none !important;
    }
    
    /* Mobile Nav Content Container */
    .mobile-nav-content {
        position: relative !important;
        z-index: 3 !important;
        height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        align-items: flex-start !important;
        padding: 80px 30px 40px 30px !important;
    }
    
    /* Close Button - Nice background, no transitions */
    .mobile-nav-close {
        position: absolute !important;
        top: 20px !important;
        right: 20px !important;
        width: 36px !important;
        height: 36px !important;
        background: rgba(255, 255, 255, 0.1) !important;
        backdrop-filter: blur(5px) !important;
        -webkit-backdrop-filter: blur(5px) !important;
        border: 1px solid rgba(255, 255, 255, 0.2) !important;
        cursor: pointer !important;
        z-index: 4 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 50% !important;
        transition: none !important;
    }
    
    .mobile-nav-close:active {
        background: rgba(255, 255, 255, 0.2) !important;
    }
    
    .mobile-nav-close::before,
    .mobile-nav-close::after {
        content: "" !important;
        position: absolute !important;
        width: 18px !important;
        height: 2px !important;
        background: rgba(255, 255, 255, 0.8) !important;
        border-radius: 1px !important;
    }
    
    .mobile-nav-close::before {
        transform: rotate(45deg) !important;
    }
    
    .mobile-nav-close::after {
        transform: rotate(-45deg) !important;
    }
    
    /* Navigation List */
    .mobile-nav-list {
        list-style: none !important;
        padding: 0 !important;
        margin: 0 0 40px 0 !important;
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
    }
    
    .mobile-nav-item {
        width: 100% !important;
    }
    
    .mobile-nav-link {
        display: block !important;
        padding: 16px 20px !important;
        color: rgba(255, 255, 255, 0.9) !important;
        text-decoration: none !important;
        font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', system-ui, sans-serif !important;
        font-size: 18px !important;
        font-weight: 400 !important;
        text-align: left !important;
        background: none !important;
        border: none !important;
        transition: none !important;
        width: 100% !important;
    }
    
    .mobile-nav-link:active {
        color: #8a2be2 !important;
    }
    
    /* Contact Button - Nice gradient, no transitions */
    .mobile-nav-contact {
        display: block !important;
        margin-top: 20px !important;
        padding: 14px 28px !important;
        background: linear-gradient(135deg, #8a2be2 0%, #6a1fb8 100%) !important;
        border: none !important;
        border-radius: 25px !important;
        text-align: center !important;
        color: #ffffff !important;
        text-decoration: none !important;
        font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', system-ui, sans-serif !important;
        font-weight: 500 !important;
        font-size: 16px !important;
        transition: none !important;
        width: 100% !important;
        box-shadow: 0 2px 8px rgba(138, 43, 226, 0.2) !important;
    }
    
    .mobile-nav-contact:active {
        background: #7a1fd0 !important;
    }
    
    /* Hero section - center everything */
    .hero {
        padding-top: 100px !important;
        padding-bottom: 60px !important;
    }
    
    /* Mobile Scroll Indicator */
    .mobile-scroll-indicator {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        margin-top: 40px !important;
        opacity: 0.7 !important;
    }
    
    .mobile-scroll-indicator .scroll-arrow {
        color: rgba(255, 255, 255, 0.6) !important;
        animation: bounceDown 2s infinite ease-in-out !important;
        margin-bottom: 8px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .mobile-scroll-indicator .scroll-text {
        font-size: 12px !important;
        color: rgba(255, 255, 255, 0.5) !important;
        font-weight: 400 !important;
        letter-spacing: 0.5px !important;
        text-transform: uppercase !important;
        font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif !important;
        margin: 0 !important;
    }
    
    /* Bounce down animation for scroll indicator */
    @keyframes bounceDown {
        0%, 20%, 50%, 80%, 100% {
            transform: translateY(0) !important;
        }
        40% {
            transform: translateY(6px) !important;
        }
        60% {
            transform: translateY(3px) !important;
        }
    }
    
    /* CRITICAL: Hide simplified mobile dashboard completely */
    .mobile-ai-dashboard-container {
        display: none !important;
        visibility: hidden !important;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
        position: absolute !important;
        left: -9999px !important;
    }
    
    /* Mobile purple circle background for dashboard */
    .mobile-dashboard-circle {
        position: absolute !important;
        top: -100px !important;
        right: -150px !important;
        width: 500px !important;
        height: 500px !important;
        background: radial-gradient(circle, rgba(138, 43, 226, 0.6) 0%, rgba(138, 43, 226, 0.25) 50%, transparent 100%) !important;
        border-radius: 50% !important;
        filter: blur(80px) !important;
        z-index: 1 !important;
        pointer-events: none !important;
    }
    
    /* Mobile AI Dashboard glass card - match AI Voice Intelligence size */
    .mobile-ai-dashboard-card {
        position: relative !important;
        z-index: 2 !important;
        width: calc(100vw - 40px) !important;
        max-width: calc(100vw - 40px) !important;
        margin: 0 !important;
        background: rgba(255, 255, 255, 0.05) !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        border-radius: 20px !important;
        padding: 20px !important;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1) !important;
        box-sizing: border-box !important;
    }
    
    /* Apply proper font family to all mobile dashboard elements */
    .mobile-ai-dashboard-container * {
        font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', system-ui, sans-serif !important;
    }
    
    /* Style mobile dashboard metric items with transparent background */
    .mobile-ai-dashboard-card .metric-item {
        background: transparent !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        backdrop-filter: blur(5px) !important;
        -webkit-backdrop-filter: blur(5px) !important;
    }
    
    /* Make purple circles smaller and lower in hero section */
    .hero::before {
        width: 500px !important;
        height: 450px !important;
        top: 30% !important;
        left: -20% !important;
    }
    
    .hero::after {
        width: 500px !important;
        height: 450px !important;
        top: 30% !important;
        right: -15% !important;
    }
    
    .hero-content {
        display: block !important;
        text-align: center !important;
        max-width: 100%;
    }
    
    .hero-text {
        max-width: 100% !important;
        margin: 0 auto 40px auto;
    }
    
    /* Hero title styling */
    .hero-title {
        font-size: 32px !important;
        line-height: 1.2 !important;
        margin-bottom: 20px !important;
        word-spacing: normal !important;
    }
    
    /* Fix word spacing in title spans */
    .hero-title .word,
    .hero-title .accent-text {
        margin-right: 0.25em !important;
    }
    
    .hero-title .word:last-child,
    .hero-title .accent-text:last-child {
        margin-right: 0 !important;
    }
    
    /* Hero description styling */
    .hero-description {
        font-size: 16px !important;
        line-height: 1.4 !important;
        margin-bottom: 16px !important;
        max-width: 320px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    
    /* Hero fact styling */
    .hero-fact {
        font-size: 14px !important;
        line-height: 1.3 !important;
        margin-bottom: 32px !important;
        max-width: 280px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    
    .hero-visual {
        max-width: 100% !important;
        margin: 0 auto;
        transform: none !important; /* No scaling - show full size */
    }
    
    .hero-buttons {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
        max-width: 300px !important;
        margin: 0 auto !important;
    }
    
    .cta-button {
        width: 100% !important;
        padding: 16px 24px !important;
        text-align: center !important;
    }
    
    /* Plans section - center all cards */
    .plans-grid {
        display: block !important;
        max-width: 400px !important;
        margin: 0 auto !important;
    }
    
    .apple-glass-card {
        display: block !important;
        width: 100% !important;
        max-width: 350px !important;
        margin: 0 auto 24px auto !important;
        padding: 20px !important;
        text-align: center !important;
        box-sizing: border-box !important;
        background: rgba(255, 255, 255, 0.05) !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        border-radius: 20px !important;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1) !important;
    }
    
    /* All sections - force center layout with proper mobile ordering */
    .exploration-content {
        display: flex !important;
        flex-direction: column !important;
        text-align: center !important;
        max-width: 100%;
        padding: 0 20px !important;
    }
    
    /* Exploration section - Better mobile spacing */
    .exploration-section {
        padding: 0px 0 60px 0 !important;
        overflow: visible !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .exploration-text {
        order: -1 !important;
        margin-bottom: 20px !important;
        padding: 0 20px !important;
        text-align: center !important;
    }
    
    .exploration-visual {
        order: 1 !important;
        margin-top: 10px !important;
        padding: 0 20px !important;
    }
    
    /* Exploration section styling - Clean mobile layout */
    .exploration-title {
        font-size: 28px !important;
        line-height: 1.2 !important;
        text-align: center !important;
        margin-bottom: 20px !important;
        max-width: 100% !important;
        padding: 0 !important;
    }
    
    .exploration-description {
        display: none !important;
    }
    
    .exploration-description-mobile {
        display: block !important;
        font-size: 16px !important;
        line-height: 1.5 !important;
        text-align: center !important;
        margin-bottom: 32px !important;
        max-width: 100% !important;
        padding: 0 !important;
        color: rgba(255, 255, 255, 0.8) !important;
    }
    
    .section-label {
        margin-bottom: 16px !important;
        font-size: 14px !important;
        text-align: center !important;
        color: #8a2be2 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
    }
    
    /* Emerging frontiers card styling - Mobile optimized */
    .emerging-frontiers-card {
        max-width: 100% !important;
        margin: 0 auto !important;
        padding: 24px 20px !important;
        background: rgba(255, 255, 255, 0.05) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        border-radius: 16px !important;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1) !important;
    }
    
    .frontiers-header {
        margin-bottom: 20px !important;
        text-align: center !important;
    }
    
    .frontiers-title {
        font-size: 20px !important;
        line-height: 1.3 !important;
        margin-bottom: 0 !important;
        text-align: center !important;
        color: #ffffff !important;
    }
    
    .frontiers-badge {
        margin-bottom: 12px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        font-size: 12px !important;
        color: rgba(255, 255, 255, 0.7) !important;
        background: transparent !important;
        border: 1px solid rgba(255, 255, 255, 0.2) !important;
        padding: 6px 12px !important;
        border-radius: 12px !important;
    }
    
    .frontier-item {
        margin-bottom: 12px !important;
        padding: 16px !important;
        background: rgba(255, 255, 255, 0.03) !important;
        border-radius: 12px !important;
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
    }
    
    .frontier-icon {
        background: rgba(138, 43, 226, 0.1) !important;
        border: 1px solid rgba(138, 43, 226, 0.2) !important;
        color: rgba(138, 43, 226, 0.9) !important;
    }
    
    /* Remove hover animations and orange effects from Emerging Frontiers card only */
    .emerging-frontiers-card .frontier-item:hover {
        background: rgba(255, 255, 255, 0.03) !important;
        border-color: rgba(255, 255, 255, 0.08) !important;
        transform: none !important;
        box-shadow: none !important;
        cursor: default !important;
    }
    
    .frontier-title {
        font-size: 16px !important;
        font-weight: 500 !important;
        color: #ffffff !important;
        margin-bottom: 4px !important;
    }
    
    .frontier-description {
        font-size: 14px !important;
        color: rgba(255, 255, 255, 0.7) !important;
        margin: 0 !important;
    }
    
    .progress-container {
        margin-top: 20px !important;
        padding-top: 16px !important;
        border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
        text-align: center !important;
    }
    
    .progress-text {
        font-size: 14px !important;
        color: rgba(255, 255, 255, 0.8) !important;
        margin-top: 8px !important;
    }
    
    .brilliance-content,
    .power-content,
    .victory-content,
    .enhanced-content,
    .discovery-content,
    .trusted-content,
    .capabilities-content,
    .faq-content,
    .footer-content {
        display: block !important;
        text-align: center !important;
        max-width: 100%;
    }
    
    /* All grids - make them single column centered */
    .plans-grid,
    .personality-grid,
    .core-technologies,
    .capabilities-grid,
    .dashboard-grid,
    .company-logos {
        display: block !important;
        max-width: 400px !important;
        margin: 0 auto !important;
    }
    
    .personality-grid > *,
    .core-technologies > *,
    .capabilities-grid > *,
    .dashboard-grid > *,
    .company-logos > * {
        display: block !important;
        margin: 0 auto 16px auto !important;
        max-width: 300px !important;
    }
    
    /* All cards - center them with nice backgrounds */
    .main-voice-card,
    .voice-card,
    .upload-card,
    .files-card,
    .plan-card,
    .solution-card,
    .technology-card,
    .capability-card,
    .faq-item {
        display: block !important;
        width: 100% !important;
        max-width: 350px !important;
        margin: 0 auto 16px auto !important;
        padding: 20px !important;
        text-align: center !important;
        box-sizing: border-box !important;
        background: rgba(255, 255, 255, 0.03) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        border-radius: 16px !important;
    }
    
    /* AI Voice Intelligence card - Fix mobile display issues */
    .apple-glass-card {
        position: relative !important;
        overflow: hidden !important;
        max-width: 320px !important;
        margin: 0 auto 20px auto !important;
        z-index: 2 !important;
    }
    
    /* Ensure parent container allows gradient to show behind card */
    .brilliance-visual,
    .power-visual {
        position: relative !important;
        overflow: visible !important;
    }
    
    /* AI Voice Intelligence section - keep text visible but hide original card on mobile */
    section.ai-brilliance {
        display: block !important;
        visibility: visible !important;
        padding: 60px 0 !important;
        overflow: visible !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Hide original AI Voice Intelligence card and orange circle on mobile/tablet */
    section.ai-brilliance .brilliance-visual {
        display: none !important;
    }

    /* Show mobile-specific AI Voice Intelligence card on mobile/tablet only */
    .mobile-ai-card-container {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        position: relative !important;
        width: 100% !important;
        padding: 0 !important;
        margin-top: -20px !important;
    }

    /* Mobile orange circle background - much bigger */
    .mobile-orange-circle {
        position: absolute !important;
        top: -150px !important;
        right: -200px !important;
        width: 600px !important;
        height: 600px !important;
        background: radial-gradient(circle, rgba(255, 127, 80, 0.6) 0%, rgba(255, 127, 80, 0.25) 50%, transparent 100%) !important;
        border-radius: 50% !important;
        filter: blur(80px) !important;
        z-index: 1 !important;
        pointer-events: none !important;
    }

    /* Mobile AI Voice Intelligence glass card - match Analytics Dashboard size */
    .mobile-ai-glass-card {
        position: relative !important;
        z-index: 2 !important;
        width: calc(100vw - 40px) !important;
        max-width: calc(100vw - 40px) !important;
        margin: 0 !important;
        background: rgba(255, 255, 255, 0.05) !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        border-radius: 20px !important;
        padding: 20px !important;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1) !important;
        box-sizing: border-box !important;
    }

    /* Apply proper font family to all mobile AI card elements */
    .mobile-ai-card-container * {
        font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', system-ui, sans-serif !important;
    }
    
    /* Override responsive CSS to match Analytics Dashboard font sizes */
    .mobile-ai-card-container .glass-title {
        font-size: 18px !important;
        font-weight: 600 !important;
        margin-bottom: 0 !important;
    }
    
    .mobile-ai-card-container .item-title {
        font-size: 15px !important;
        font-weight: 600 !important;
        margin-bottom: 4px !important;
    }
    
    .mobile-ai-card-container .item-subtitle {
        font-size: 13px !important;
        color: rgba(255, 255, 255, 0.6) !important;
    }
    
    .mobile-ai-card-container .showcase-badge {
        font-size: 11px !important;
        padding: 3px 8px !important;
        font-weight: 600 !important;
        flex-shrink: 0 !important;
    }
    
    .mobile-ai-card-container .showcase-item {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
    }
    
    .mobile-ai-card-container .item-icon {
        width: 40px !important;
        height: 40px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: rgba(138, 43, 226, 0.1) !important;
        border-radius: 10px !important;
        flex-shrink: 0 !important;
    }
    
    .mobile-ai-card-container .metric-value {
        font-size: 20px !important;
        font-weight: 700 !important;
    }
    
    .mobile-ai-card-container .metric-label {
        font-size: 12px !important;
        font-weight: 400 !important;
    }
    
    .mobile-ai-card-container .metric-item {
        background: transparent !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
    }
    
    /* Fix Analytics Dashboard card layout to match AI Voice Intelligence */
    .premium-dashboard .showcase-item {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 12px !important;
        background: rgba(255, 255, 255, 0.03) !important;
        border-radius: 8px !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        gap: 12px !important;
    }
    
    .premium-dashboard .showcase-icon {
        width: 40px !important;
        height: 40px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: rgba(138, 43, 226, 0.1) !important;
        border-radius: 10px !important;
        flex-shrink: 0 !important;
    }
    
    .premium-dashboard .showcase-info {
        text-align: left !important;
        flex: 1 !important;
    }
    
    .premium-dashboard .showcase-title {
        font-size: 15px !important;
        font-weight: 600 !important;
        margin-bottom: 4px !important;
        color: #ffffff !important;
    }
    
    .premium-dashboard .showcase-subtitle {
        font-size: 13px !important;
        color: rgba(255, 255, 255, 0.6) !important;
    }
    
    .premium-dashboard .showcase-badge {
        flex-shrink: 0 !important;
    }
    
    /* Make red circle under Analytics Dashboard brighter on mobile */
    .dashboard-power .power-visual > div:first-child {
        background: radial-gradient(circle, rgba(177, 44, 0, 0.8) 0%, rgba(177, 44, 0, 0.4) 50%, transparent 100%) !important;
        left: -100px !important;
    }
    
    /* Reorder Analytics Dashboard section - text above card on mobile */
    .dashboard-power .power-content {
        display: flex !important;
        flex-direction: column !important;
        text-align: center !important;
    }
    
    .dashboard-power .power-text {
        order: -1 !important;
        margin-bottom: 40px !important;
        padding: 0 20px !important;
        text-align: center !important;
    }
    
    .dashboard-power .power-visual {
        order: 1 !important;
        margin-top: -40px !important;
        padding: 0 20px !important;
    }
    
    /* Make Analytics Dashboard card wider on mobile - override all other rules */
    .dashboard-power .apple-glass-card.premium-dashboard {
        max-width: calc(100vw - 40px) !important;
        width: calc(100vw - 40px) !important;
        margin: 0 auto !important;
    }
    
    /* Style the dashboard power section text - match exploration-title */
    .power-title {
        font-size: 28px !important;
        line-height: 1.2 !important;
        text-align: center !important;
        margin-bottom: 20px !important;
        max-width: 100% !important;
        padding: 0 !important;
    }
    
    .power-description {
        display: none !important;
    }
    
    .power-description-mobile {
        display: block !important;
        font-size: 16px !important;
        line-height: 1.5 !important;
        text-align: center !important;
        margin-bottom: 32px !important;
        max-width: 100% !important;
        padding: 0 !important;
        color: rgba(255, 255, 255, 0.8) !important;
    }
    
    .power-fact {
        display: none !important;
    }
    
    /* Simplify glass card content for mobile */
    .glass-header {
        padding: 12px !important;
        margin-bottom: 12px !important;
    }
    
    .glass-title {
        /* font-size: 16px !important; */ /* Removed to allow proper font sizes */
        line-height: 1.3 !important;
        margin-bottom: 8px !important;
    }
    
    .glass-status {
        font-size: 12px !important;
        gap: 6px !important;
    }
    
    .glass-content {
        padding: 0 12px 12px 12px !important;
    }
    
    .feature-showcase {
        gap: 8px !important;
        margin-bottom: 12px !important;
    }
    
    .showcase-item {
        padding: 12px !important;
        flex-direction: row !important;
        align-items: flex-start !important;
        gap: 12px !important;
        background: rgba(255, 255, 255, 0.03) !important;
        border-radius: 8px !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
    }
    
    .item-info {
        text-align: left !important;
        margin: 0 !important;
        flex: 1 !important;
    }
    
    .item-title {
        /* font-size: 13px !important; */ /* Removed to allow proper font sizes */
        margin-bottom: 2px !important;
    }
    
    .item-subtitle {
        /* font-size: 11px !important; */ /* Removed to allow proper font sizes */
    }
    
    .item-value {
        /* font-size: 10px !important; */ /* Removed to allow proper font sizes */
        padding: 2px 6px !important;
    }
    
    .glass-metrics {
        padding: 8px 0 !important;
        gap: 4px !important;
    }
    
    .metric-item {
        padding: 8px 4px !important;
        border-radius: 6px !important;
    }
    
    .metric-value {
        /* font-size: 14px !important; */ /* Removed to allow proper font sizes */
        margin-bottom: 2px !important;
    }
    
    .metric-label {
        /* font-size: 9px !important; */ /* Removed to allow proper font sizes */
    }
    
    /* Voice carousel - center everything */
    .voice-carousel {
        display: block !important;
        text-align: center !important;
    }
    
    .voice-line {
        display: block !important;
        animation: none !important;
    }
    
    .voice-line .main-voice-card {
        margin: 0 auto 16px auto !important;
    }
    
    /* FAQ section - center items */
    .faq-grid {
        display: block !important;
        max-width: 400px !important;
        margin: 0 auto !important;
    }
    
    /* Footer - mobile responsive design */
    .footer,
    footer {
        padding: 60px 0 40px !important;
        text-align: center !important;
        background: #000000 !important;
    }
    
    /* Hide decorative elements on mobile */
    footer > div:first-child,
    footer > div:nth-child(2) {
        display: none !important;
    }
    
    /* Main footer container */
    footer .container {
        padding: 0 20px !important;
    }
    
    /* Footer grid - single column on mobile */
    footer .container > div:first-child,
    .footer-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 40px !important;
        margin-bottom: 40px !important;
    }
    
    /* Each footer section */
    .footer-grid > div,
    footer .container > div:first-child > div {
        margin: 0 !important;
        text-align: center !important;
        max-width: 100% !important;
        padding: 0 !important;
    }
    
    /* Hide Platform navigation section on mobile */
    footer .container > div:first-child > div:nth-child(2) {
        display: none !important;
    }
    
    /* Footer headings */
    footer h3,
    footer h4 {
        font-size: 20px !important;
        margin-bottom: 16px !important;
        color: #ffffff !important;
        font-weight: 600 !important;
    }
    
    /* Footer links */
    footer a {
        display: block !important;
        padding: 8px 0 !important;
        color: rgba(255, 255, 255, 0.8) !important;
        text-decoration: none !important;
        font-size: 16px !important;
        transition: color 0.3s ease !important;
    }
    
    footer a:active {
        color: #8a2be2 !important;
    }
    
    /* Footer text */
    footer p {
        color: rgba(255, 255, 255, 0.7) !important;
        font-size: 15px !important;
        line-height: 1.6 !important;
        margin-bottom: 16px !important;
    }
    
    /* Footer bottom section */
    .footer-bottom,
    footer > div:last-child,
    footer .container > div:last-child {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 16px !important;
        padding-top: 30px !important;
        border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
        text-align: center !important;
        margin-top: 30px !important;
    }
    
    .footer-bottom > div,
    footer .container > div:last-child > div {
        margin: 0 !important;
        text-align: center !important;
    }
    
    /* Copyright text */
    footer .container > div:last-child > div:first-child {
        order: 2 !important;
        font-size: 14px !important;
        color: rgba(255, 255, 255, 0.6) !important;
    }
    
    /* Legal links */
    footer .container > div:last-child > div:last-child {
        order: 1 !important;
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 20px !important;
    }
    
    footer .container > div:last-child > div:last-child a {
        display: inline !important;
        font-size: 14px !important;
        padding: 0 !important;
        color: rgba(255, 255, 255, 0.7) !important;
    }
    
    /* Hide problematic elements */
    .floating-elements,
    .floating-card {
        display: none !important;
    }
    
    /* Fix "The Future of Communication Intelligence" section - Allow gradient overflow */
    .brilliance-section {
        padding: 40px 0 !important;
        overflow: visible !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .brilliance-content {
        display: flex !important;
        flex-direction: column !important;
        text-align: center !important;
        max-width: 100% !important;
        width: 100% !important;
        overflow: visible !important;
    }
    
    .brilliance-text {
        max-width: 100% !important;
        width: 100% !important;
        margin: 0 auto 30px auto !important;
        text-align: center !important;
        order: -1 !important;
    }
    
    .brilliance-title {
        font-size: 28px !important;
        line-height: 1.2 !important;
        text-align: center !important;
        margin-bottom: 20px !important;
        max-width: 100% !important;
        padding: 0 !important;
    }
    
    .brilliance-description {
        display: none !important;
    }
    
    .brilliance-description-mobile {
        display: block !important;
        font-size: 16px !important;
        line-height: 1.5 !important;
        text-align: center !important;
        margin-bottom: 32px !important;
        max-width: 100% !important;
        padding: 0 !important;
        color: rgba(255, 255, 255, 0.8) !important;
    }
    
    .brilliance-fact {
        display: none !important;
    }
    
    .brilliance-visual {
        order: 1 !important;
        max-width: 100% !important;
        width: 100% !important;
        margin: 20px auto 0 auto !important;
        overflow: visible !important;
    }
    
    /* Hide only floating elements - KEEP DASHBOARD VISIBLE */
    .floating-card,
    .floating-elements {
        display: none !important;
        visibility: hidden !important;
        width: 0 !important;
        height: 0 !important;
    }
    
    /* CRITICAL FIX: Ensure dashboard components are VISIBLE on mobile */
    .ai-interface,
    .dashboard-grid,
    .dashboard-stats,
    .files-card,
    .upload-card,
    .stat-item {
        /* Remove any hiding - let other rules control display */
        display: initial !important;
        visibility: visible !important;
        width: auto !important;
        height: auto !important;
        opacity: 1 !important;
    }
    
    /* Create simple contained mobile card */
    .brilliance-visual {
        position: relative !important;
        display: block !important;
        max-width: 280px !important;
        width: 100% !important;
        margin: 20px auto !important;
        padding: 0 !important;
        overflow: hidden !important;
    }
    
    .brilliance-visual::before {
        content: "" !important;
        display: block !important;
        width: 100% !important;
        max-width: 280px !important;
        height: 180px !important;
        margin: 0 auto !important;
        background: rgba(138, 43, 226, 0.1) !important;
        border: 1px solid rgba(138, 43, 226, 0.2) !important;
        border-radius: 12px !important;
        position: relative !important;
    }
    
    .brilliance-visual::after {
        content: "AI Analytics Dashboard" !important;
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        font-size: 14px !important;
        color: rgba(138, 43, 226, 0.8) !important;
        font-weight: 500 !important;
        text-align: center !important;
        white-space: nowrap !important;
    }
    
    /* All text sections - center */
    .section-header {
        text-align: center !important;
        max-width: 100% !important;
        margin: 0 auto 20px auto !important;
    }
    
    .section-title {
        text-align: center !important;
        font-size: 28px !important;
    }
    
    .plans-title {
        font-size: 44px !important;
        line-height: 1.1 !important;
        font-weight: 700 !important;
        letter-spacing: -1.5px !important;
        text-align: center !important;
        margin-bottom: 20px !important;
        max-width: 100% !important;
        padding: 0 !important;
    }
    
    /* Ensure plans section matches other section styling */
    .plans-section .section-header {
        text-align: center !important;
        max-width: 100% !important;
        margin: 0 auto 40px auto !important;
    }
    
    .section-description {
        text-align: center !important;
        max-width: 100% !important;
        margin: 0 auto !important;
    }
    
    .plans-description {
        display: none !important;
    }
    
    .plans-description-mobile {
        display: block !important;
        font-size: 16px !important;
        line-height: 1.5 !important;
        text-align: center !important;
        margin-bottom: 32px !important;
        max-width: 100% !important;
        padding: 0 !important;
        color: rgba(255, 255, 255, 0.8) !important;
    }
    
    /* Remove problematic floating elements and cards - but keep emerging-frontiers-card */
    .floating-elements,
    .floating-card,
    .apple-metrics,
    .metric-card {
        display: none !important;
        visibility: hidden !important;
    }
    
    /* Allow only essential static transforms for layout */
    .hero-visual {
        transform: none !important; /* No scaling - show full desktop design */
        animation: none !important;
        transition: none !important;
    }
    
    .brilliance-visual {
        transform: scale(0.8) !important;
        animation: none !important;
        transition: none !important;
    }
    
    /* FINAL OVERRIDE: Make Analytics Dashboard card much wider and centered on mobile */
    section.dashboard-power .power-visual {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        padding: 0 !important;
    }
    
    section.dashboard-power .apple-glass-card.premium-dashboard {
        max-width: calc(100vw - 40px) !important;
        width: calc(100vw - 40px) !important;
        margin: 0 !important;
        position: relative !important;
        left: auto !important;
        transform: none !important;
    }
    
    /* Make Emerging Frontiers card as wide as Analytics Dashboard */
    .exploration-visual {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        padding: 0 !important;
    }
    
    .emerging-frontiers-card {
        max-width: calc(100vw - 40px) !important;
        width: calc(100vw - 40px) !important;
        margin: 0 !important;
        position: relative !important;
    }
    
    /* Make purple circle bigger under Emerging Frontiers card on mobile */
    .exploration-visual > div:first-child {
        width: 800px !important;
        height: 800px !important;
        top: -200px !important;
        left: -200px !important;
        background: radial-gradient(circle, rgba(138, 43, 226, 0.6) 0%, rgba(138, 43, 226, 0.25) 50%, transparent 100%) !important;
        filter: blur(60px) !important;
    }
    
    /* Move purple circle lower in Voice Technology section on mobile */
    .voice-technology-premium::before {
        top: 50% !important;
        left: 30% !important;
        filter: blur(40px) !important;
    }
    
    /* Voice Technology section - mobile subtitle */
    .voice-tech-description {
        display: none !important;
    }
    
    .voice-tech-description-mobile {
        display: block !important;
        font-size: 16px !important;
        line-height: 1.5 !important;
        text-align: center !important;
        margin-bottom: 32px !important;
        max-width: 100% !important;
        padding: 0 !important;
        color: rgba(255, 255, 255, 0.8) !important;
    }
    
    /* Hide only the individual voice cards (Sarah, Marcus, etc) on mobile */
    .voice-showcase-content {
        display: none !important;
    }
    
    /* Hide specific call handling cards on mobile - the last 4 cards */
    .apple-call-flow .apple-call-card:nth-child(5),
    .apple-call-flow .apple-call-card:nth-child(6),
    .apple-call-flow .apple-call-card:nth-child(7),
    .apple-call-flow .apple-call-card:nth-child(8) {
        display: none !important;
    }
    
    /* Call Handling section - match subtitle size to Voice Technology */
    .call-handling-description {
        font-size: 16px !important;
        line-height: 1.5 !important;
        text-align: center !important;
        margin-bottom: 32px !important;
        max-width: 100% !important;
        padding: 0 !important;
        color: rgba(255, 255, 255, 0.8) !important;
    }
    
    /* Move orange circle lower and to the right in call handling section on mobile */
    .call-handling::before {
        top: 45% !important;
        left: -30% !important;
        width: 800px !important;
        height: 800px !important;
        filter: blur(80px) !important;
    }
    
    /* Move 1st circle to right side and lower in Custom Intelligence Solutions section on mobile */
    .new-section::before {
        top: 35% !important;
        left: 70% !important;
        width: 600px !important;
        height: 600px !important;
    }
    
    /* Add second purple circle in Custom Intelligence Solutions section - lower left */
    .new-section::after {
        content: '' !important;
        position: absolute !important;
        top: 60% !important;
        left: -50% !important;
        width: 600px !important;
        height: 600px !important;
        background: radial-gradient(circle, rgba(138, 43, 226, 0.4) 0%, rgba(138, 43, 226, 0.2) 50%, transparent 70%) !important;
        border-radius: 50% !important;
        filter: blur(40px) !important;
        z-index: 1 !important;
        pointer-events: none !important;
    }
    
    /* Move circle lower in Discovery & Planning section on mobile */
    .discovery-planning::before {
        top: 55% !important;
        left: 40% !important;
    }
    
    /* Hide existing FAQ cards on mobile */
    .faq-glass-grid {
        display: none !important;
    }
    
    /* Create new line-separated FAQ list for mobile */
    .mobile-faq-container {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        padding: 0 20px !important;
    }
    
    .mobile-faq-item {
        padding: 18px 0 !important;
        border-bottom: 0.5px solid rgba(255, 255, 255, 0.08) !important;
        cursor: pointer !important;
        transition: all 0.3s ease !important;
        display: block !important;
        position: relative !important;
    }
    
    .mobile-faq-item:last-child {
        border-bottom: none !important;
    }
    
    .mobile-faq-item:hover {
        background: rgba(255, 255, 255, 0.02) !important;
    }
    
    .mobile-faq-header {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
    }
    
    .mobile-faq-question {
        color: #ffffff !important;
        font-size: 16px !important;
        font-weight: 500 !important;
        line-height: 1.4 !important;
        margin: 0 !important;
        flex: 1 !important;
        text-align: left !important;
        font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif !important;
    }
    
    .mobile-faq-answer {
        max-height: 0 !important;
        overflow: hidden !important;
        transition: max-height 0.3s ease !important;
        padding-top: 0 !important;
        margin-top: 0 !important;
    }
    
    .mobile-faq-answer.active {
        max-height: 200px !important;
        padding-top: 12px !important;
        margin-top: 8px !important;
    }
    
    .mobile-faq-answer p {
        color: rgba(255, 255, 255, 0.8) !important;
        font-size: 14px !important;
        font-weight: 400 !important;
        line-height: 1.5 !important;
        margin: 0 !important;
        text-align: left !important;
        font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif !important;
    }
    
    .mobile-faq-icon {
        width: 20px !important;
        height: 20px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        color: rgba(138, 43, 226, 0.8) !important;
        font-size: 18px !important;
        font-weight: 400 !important;
        flex-shrink: 0 !important;
        margin-left: 12px !important;
        transition: transform 0.3s ease !important;
    }
    
    .mobile-faq-item.active .mobile-faq-icon {
        transform: rotate(45deg) !important;
    }
    
    .faq-glass-item {
        padding: 0 !important;
        margin-bottom: 0 !important;
        cursor: pointer !important;
        overflow: hidden !important;
        transition: none !important;
    }
    
    .faq-question {
        font-size: 14px !important;
        line-height: 1.2 !important;
        margin: 0 !important;
        padding: 8px 16px !important;
        font-weight: 400 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        text-align: left !important;
        width: 100% !important;
    }
    
    .faq-answer {
        font-size: 13px !important;
        line-height: 1.4 !important;
        margin: 0 !important;
        padding: 0 16px 8px 16px !important;
        color: rgba(255, 255, 255, 0.7) !important;
        display: none !important;
    }
    
    .faq-glass-item.active .faq-answer {
        display: block !important;
    }
    
    .faq-glass-icon {
        width: 20px !important;
        height: 20px !important;
        flex-shrink: 0 !important;
        margin-left: 10px !important;
    }
    
    /* Make FAQ section purple circle smaller and much lower on mobile */
    .faq-section::before {
        width: 600px !important;
        height: 600px !important;
        top: 85% !important;
    }
}

/* Phone-specific adjustments */
@media (max-width: 480px) {
    .container {
        padding: 0 16px !important;
    }
    
    .hero-title {
        font-size: 28px !important;
        line-height: 1.1 !important;
        word-spacing: normal !important;
    }
    
    /* Consistent word spacing for smaller screens */
    .hero-title .word,
    .hero-title .accent-text {
        margin-right: 0.2em !important;
    }
    
    .hero-description {
        font-size: 15px !important;
        line-height: 1.4 !important;
        max-width: 300px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        margin-bottom: 14px !important;
    }
    
    .hero-fact {
        font-size: 13px !important;
        line-height: 1.3 !important;
        max-width: 260px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        margin-bottom: 28px !important;
    }
    
    .section-title {
        font-size: 26px !important;
    }
    
    .plans-title {
        font-size: 44px !important;
        line-height: 1.1 !important;
        font-weight: 700 !important;
        letter-spacing: -1.5px !important;
    }
    
    .section-description {
        font-size: 15px !important;
    }
    
    .plans-description-mobile {
        font-size: 15px !important;
    }
    
    /* Only target FAQ cards specifically, not other cards */
    .faq-section .apple-glass-card {
        max-width: 100% !important;
        padding: 4px 12px !important;
        min-height: 40px !important;
        height: 40px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    /* Restore normal styling for other cards */
    .dashboard-power .apple-glass-card,
    .plans-section .apple-glass-card,
    .premium-dashboard,
    .plan-card {
        padding: 24px !important;
        min-height: auto !important;
        height: auto !important;
        display: block !important;
    }
    
    .main-voice-card,
    .voice-card,
    .upload-card,
    .files-card,
    .plan-card,
    .solution-card,
    .technology-card,
    .capability-card,
    .faq-item {
        max-width: 100% !important;
        padding: 16px !important;
    }
    
    .hero-buttons {
        max-width: 100% !important;
    }
    
    .cta-button {
        padding: 14px 20px !important;
        font-size: 15px !important;
    }
    
    .contact-btn {
        padding: 8px 16px !important;
        font-size: 14px !important;
        margin: 0 !important;
    }
    
    .header-content {
        height: auto !important;
        min-height: 60px !important;
    }
    
    /* Footer adjustments for smaller phones */
    footer {
        padding: 50px 0 30px !important;
    }
    
    footer h3,
    footer h4 {
        font-size: 18px !important;
    }
    
    footer a {
        font-size: 15px !important;
    }
    
    footer p {
        font-size: 14px !important;
    }
    
    footer .container > div:last-child > div:last-child {
        gap: 16px !important;
    }
}

/* Very small phones */
@media (max-width: 360px) {
    .container {
        padding: 0 12px !important;
    }
    
    .hero-title {
        font-size: 24px !important;
        line-height: 1.1 !important;
        word-spacing: normal !important;
    }
    
    /* Consistent word spacing for very small screens */
    .hero-title .word,
    .hero-title .accent-text {
        margin-right: 0.15em !important;
    }
    
    .hero-description {
        font-size: 14px !important;
        line-height: 1.4 !important;
        max-width: 280px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        margin-bottom: 12px !important;
    }
    
    .hero-fact {
        font-size: 12px !important;
        line-height: 1.3 !important;
        max-width: 240px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        margin-bottom: 24px !important;
    }
    
    .section-title {
        font-size: 22px !important;
    }
    
    .plans-title {
        font-size: 44px !important;
        line-height: 1.1 !important;
        font-weight: 700 !important;
        letter-spacing: -1.5px !important;
    }
    
    .apple-glass-card {
        padding: 12px !important;
    }
}

/* Landscape phone adjustments */
@media (max-height: 500px) and (orientation: landscape) and (max-width: 926px) {
    .hero {
        padding: 40px 0 30px !important;
    }
    
    .hero-title {
        font-size: 24px !important;
    }
    
    .hero-buttons {
        flex-direction: row !important;
        max-width: 400px !important;
        gap: 12px !important;
    }
    
    .cta-button {
        width: auto !important;
        min-width: 140px !important;
    }
}

/* CRITICAL: Smooth Sticky Mobile Header - Enhanced with backdrop blur */
@media (max-width: 768px) {
    /* MOBILE HEADER - GLASSY EFFECT */
    html body .simple-mobile-header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        height: 55px !important;
        display: flex !important;
        visibility: visible !important;
        align-items: center !important;
        /* GLASSY EFFECT - NO SOLID COLOR */
        background: rgba(255, 255, 255, 0.08) !important;
        backdrop-filter: blur(40px) !important;
        -webkit-backdrop-filter: blur(40px) !important;
        border: none !important;
        z-index: 2147483647 !important;
        padding: 0 20px !important;
        /* SUBTLE SHADOW FOR DEPTH */
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12) !important;
        /* SMOOTH TRANSITIONS */
        transition: all 0.3s ease !important;
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
        will-change: auto !important;
        pointer-events: auto !important;
    }
    
    /* Enhanced glassy effect when scrolled */
    html body .simple-mobile-header.scrolled {
        background: rgba(255, 255, 255, 0.12) !important;
        backdrop-filter: blur(50px) !important;
        -webkit-backdrop-filter: blur(50px) !important;
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15) !important;
    }
    
    html body .simple-mobile-header .simple-header-content {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        position: relative !important;
        transform: none !important;
        animation: none !important;
        transition: all 0.3s ease !important;
    }
    
    html body .simple-mobile-header .simple-logo {
        display: none !important;
    }
    
    html body .simple-mobile-header .simple-logo:hover {
        color: rgba(138, 43, 226, 0.9) !important;
    }
    
    html body .simple-mobile-header .simple-menu-btn {
        background: none !important;
        border: none !important;
        color: #fff !important;
        font-size: 24px !important;
        cursor: pointer !important;
        padding: 8px !important;
        transform: none !important;
        transition: all 0.3s ease !important;
        border-radius: 6px !important;
        position: absolute !important;
        right: 20px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
    }
    
    html body .simple-mobile-header .simple-menu-btn:hover {
        background: rgba(255, 255, 255, 0.1) !important;
        color: rgba(138, 43, 226, 0.9) !important;
    }
    
    /* Remove body padding since sticky doesn't need it */
    body {
        padding-top: 0 !important;
    }
    
    /* Ensure smooth scrolling behavior */
    html {
        scroll-behavior: smooth !important;
    }
}

@media (max-width: 768px) {
    .plans-grid {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }

    .plans-comparison-section .container {
        padding: 0 !important;
    }

    /* Mobile comparison table - spacious and no horizontal scrolling */
    .comparison-table {
        overflow: visible !important;
        display: block !important;
        border-radius: 20px !important;
        margin: 0 20px !important;
        background: rgba(255, 255, 255, 0.02) !important;
        backdrop-filter: blur(20px) !important;
        -webkit-backdrop-filter: blur(20px) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
    }

    .comparison-header,
    .capability-section .section-title,
    .capability-section .feature-row,
    .usage-section .section-title,
    .usage-section .feature-row,
    .included-section .section-title,
    .included-section .feature-row {
        display: grid !important;
        grid-template-columns: 1.8fr 1fr 1fr !important;
        gap: 15px !important;
        padding: 20px 24px !important;
        margin: 0 !important;
        min-width: auto !important;
        width: 100% !important;
    }
    
    /* Hide Enterprise Plan column on mobile */
    .comparison-header > div:last-child,
    .capability-section .section-title > div:last-child,
    .capability-section .feature-row > div:last-child,
    .usage-section .section-title > div:last-child,
    .usage-section .feature-row > div:last-child,
    .included-section .section-title > div:last-child,
    .included-section .feature-row > div:last-child {
        display: none !important;
    }

    .comparison-header {
        background: rgba(138, 43, 226, 0.08) !important;
        border-bottom: 2px solid rgba(138, 43, 226, 0.2) !important;
        border-radius: 20px 20px 0 0 !important;
        padding: 24px !important;
    }
    
    .comparison-header > div {
        color: #ffffff !important;
        font-weight: 700 !important;
        font-size: 16px !important;
        text-align: center !important;
        padding: 12px 8px !important;
        line-height: 1.3 !important;
    }
    
    .comparison-header > div:first-child {
        text-align: left !important;
        font-size: 14px !important;
        color: rgba(255, 255, 255, 0.7) !important;
        font-weight: 500 !important;
        padding-left: 0 !important;
    }

    .capability-section .section-title,
    .usage-section .section-title,
    .included-section .section-title {
        background: rgba(138, 43, 226, 0.04) !important;
        border-bottom: 1px solid rgba(138, 43, 226, 0.15) !important;
        padding: 22px 24px !important;
        margin-top: 8px !important;
    }
    
    .capability-section .section-title > div:first-child,
    .usage-section .section-title > div:first-child,
    .included-section .section-title > div:first-child {
        font-size: 14px !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 1px !important;
        color: rgba(138, 43, 226, 0.95) !important;
        text-align: left !important;
        padding-left: 0 !important;
    }

    .feature-row {
        padding: 22px 24px !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
        min-height: 60px !important;
        align-items: center !important;
    }
    
    .feature-row > div {
        color: rgba(255, 255, 255, 0.9) !important;
        text-align: center !important;
        padding: 12px 8px !important;
        font-size: 15px !important;
        line-height: 1.4 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 40px !important;
    }
    
    .feature-row > div:first-child {
        text-align: left !important;
        color: rgba(255, 255, 255, 0.85) !important;
        font-weight: 500 !important;
        padding-left: 0 !important;
        justify-content: flex-start !important;
        font-size: 14px !important;
    }
    
    /* Enhanced checkmarks */
    .feature-row div:contains('✓') {
        color: #4ade80 !important;
        font-weight: 700 !important;
        font-size: 18px !important;
    }
    
    /* Better spacing for last section */
    .included-section .feature-row:last-child {
        border-bottom: none !important;
        border-radius: 0 0 20px 20px !important;
    }


    .plans-comparison-section h2 {
        font-size: 32px !important;
    }

    .plans-comparison-section p {
        font-size: 16px !important;
    }
}

/* Enhanced Mobile Hero Section Visual Hierarchy and Spacing */
@media (max-width: 768px) {
    /* Hero Section Improved Spacing and Visual Flow */
    .hero {
        padding: 120px 0 80px !important;
        min-height: 100vh !important;
        display: flex !important;
        align-items: center !important;
    }
    
    .hero-content {
        padding: 0 24px !important;
        text-align: center !important;
        width: 100% !important;
    }
    
    .hero-text {
        max-width: 100% !important;
        margin: 0 auto !important;
    }
    
    /* Badge with Better Visual Prominence */
    .hero-badge {
        margin-bottom: 36px !important;
        padding: 10px 24px !important;
        font-size: 13px !important;
        letter-spacing: 0.5px !important;
        font-weight: 500 !important;
        background: rgba(138, 43, 226, 0.15) !important;
        backdrop-filter: blur(20px) !important;
        border: 1px solid rgba(138, 43, 226, 0.3) !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 8px !important;
        border-radius: 24px !important;
        animation: fadeInUp 0.8s ease-out !important;
    }
    
    /* Main Headline - More Prominent and Readable */
    .hero-title {
        font-size: 44px !important;
        line-height: 1.1 !important;
        margin-bottom: 32px !important;
        font-weight: 700 !important;
        letter-spacing: -1.5px !important;
        padding: 0 !important;
        animation: fadeInUp 0.8s ease-out 0.1s both !important;
    }
    
    .hero-title .word,
    .hero-title .accent-text {
        display: inline-block !important;
        margin-right: 0.2em !important;
        white-space: nowrap !important;
    }
    
    .hero-title .word:last-child,
    .hero-title .accent-text:last-child {
        margin-right: 0 !important;
    }
    
    .hero-title .accent-text {
        color: #ffffff !important;
        text-shadow: 0 0 40px rgba(138, 43, 226, 0.6) !important;
    }
    
    /* Subheading with Better Readability and Spacing */
    .hero-description {
        font-size: 19px !important;
        line-height: 1.5 !important;
        margin-bottom: 24px !important;
        max-width: 400px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        color: rgba(255, 255, 255, 0.9) !important;
        font-weight: 400 !important;
        padding: 0 !important;
        animation: fadeInUp 0.8s ease-out 0.2s both !important;
    }
    
    .hero-description .description-line {
        display: block !important;
        margin-bottom: 8px !important;
    }
    
    .hero-description .description-line:last-child {
        margin-bottom: 0 !important;
    }
    
    /* Social Proof - Standalone Highlight */
    .hero-description .highlight-line {
        margin-top: 24px !important;
        margin-bottom: 0 !important;
        font-size: 16px !important;
        color: rgba(138, 43, 226, 0.95) !important;
        font-weight: 500 !important;
        background: rgba(138, 43, 226, 0.1) !important;
        padding: 10px 20px !important;
        border-radius: 24px !important;
        display: inline-block !important;
        border: 1px solid rgba(138, 43, 226, 0.2) !important;
        backdrop-filter: blur(10px) !important;
    }
    
    /* CTA Buttons - Optimized for Touch */
    .hero-buttons {
        margin-top: -10px !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
        padding: 0 !important;
        max-width: 360px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        animation: fadeInUp 0.8s ease-out 0.3s both !important;
    }
    
    .hero-buttons .btn-primary,
    .hero-buttons .btn-secondary {
        width: 100% !important;
        padding: 20px 36px !important;
        font-size: 17px !important;
        font-weight: 600 !important;
        border-radius: 14px !important;
        min-height: 60px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        transition: all 0.3s ease !important;
        letter-spacing: -0.2px !important;
    }
    
    .hero-buttons .btn-primary {
        background: linear-gradient(135deg, #8a2be2 0%, #6a1bb2 100%) !important;
        border: none !important;
        box-shadow: 0 12px 32px rgba(138, 43, 226, 0.35) !important;
        color: #ffffff !important;
    }
    
    .hero-buttons .btn-primary:active {
        transform: scale(0.97) !important;
        box-shadow: 0 6px 20px rgba(138, 43, 226, 0.3) !important;
    }
    
    .hero-buttons .btn-secondary {
        background: rgba(255, 255, 255, 0.08) !important;
        border: 2px solid rgba(255, 255, 255, 0.2) !important;
        backdrop-filter: blur(10px) !important;
        color: #ffffff !important;
    }
    
    .hero-buttons .btn-secondary:active {
        transform: scale(0.97) !important;
        background: rgba(255, 255, 255, 0.12) !important;
        border-color: rgba(255, 255, 255, 0.3) !important;
    }
    
    /* Hero Stats - Clean and Spacious */
    .hero-stats {
        margin-top: 56px !important;
        padding-top: 40px !important;
        border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 24px !important;
        max-width: 400px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        animation: fadeInUp 0.8s ease-out 0.4s both !important;
    }
    
    .stat-item {
        text-align: center !important;
    }
    
    .stat-number {
        font-size: 32px !important;
        font-weight: 700 !important;
        color: #ffffff !important;
        margin-bottom: 6px !important;
        letter-spacing: -0.5px !important;
    }
    
    .stat-label {
        font-size: 14px !important;
        color: rgba(255, 255, 255, 0.65) !important;
        font-weight: 400 !important;
        letter-spacing: 0.2px !important;
    }
}

/* Refined spacing for smaller phones */
@media (max-width: 480px) {
    .hero-title {
        font-size: 38px !important;
        margin-bottom: 28px !important;
    }
    
    .plans-title {
        font-size: 38px !important;
        line-height: 1.1 !important;
        font-weight: 700 !important;
        letter-spacing: -1.5px !important;
    }
    
    .hero-description {
        font-size: 17px !important;
        max-width: 340px !important;
    }
    
    .hero-buttons {
        max-width: 320px !important;
    }
    
    .hero-buttons .btn-primary,
    .hero-buttons .btn-secondary {
        padding: 18px 32px !important;
        min-height: 56px !important;
        font-size: 16px !important;
    }
}

/* Very small phones */
@media (max-width: 360px) {
    .hero-title {
        font-size: 32px !important;
        margin-bottom: 24px !important;
    }
    
    .plans-title {
        font-size: 32px !important;
        line-height: 1.1 !important;
        font-weight: 700 !important;
        letter-spacing: -1.5px !important;
    }
    
    .hero-description {
        font-size: 16px !important;
        max-width: 300px !important;
    }
    
    .hero-badge {
        font-size: 12px !important;
        padding: 8px 20px !important;
    }
    
    .stat-number {
        font-size: 28px !important;
    }
}

/* Mobile Scroll Animations - Visible Effects - FORCE OVERRIDE */
@media (max-width: 768px) {
    /* FORCE ANIMATIONS TO WORK - Override any blockers */
    .hero, .hero-content, .hero-buttons, .hero-visual, .ai-interface, 
    .plans-section, .apple-glass-card, .cta-button, .upload-card, .files-card {
        animation-duration: initial !important;
        animation-delay: initial !important;
        animation-fill-mode: initial !important;
        animation-iteration-count: initial !important;
        transition-duration: initial !important;
        transition-delay: initial !important;
    }
    
    /* Keyframe Animations */
    @keyframes fadeInUp {
        from { opacity: 0 !important; transform: translateY(40px) !important; }
        to { opacity: 1 !important; transform: translateY(0) !important; }
    }
    
    @keyframes slideInFromBottom {
        from { opacity: 0; transform: translateY(60px); }
        to { opacity: 1; transform: translateY(0); }
    }
    
    @keyframes slideInFromLeft {
        from { opacity: 0; transform: translateX(-50px); }
        to { opacity: 1; transform: translateX(0); }
    }
    
    @keyframes slideInFromRight {
        from { opacity: 0; transform: translateX(50px); }
        to { opacity: 1; transform: translateX(0); }
    }
    
    @keyframes scaleIn {
        from { opacity: 0; transform: scale(0.8); }
        to { opacity: 1; transform: scale(1); }
    }
    
    /* Hero Section Animations - Safe, no layout breaking */
    .hero {
        animation: fadeInUp 1.2s ease-out !important;
        /* Ensure no positioning issues */
        position: relative !important;
    }
    
    .hero-content {
        animation: slideInFromBottom 1s ease-out 0.3s both !important;
        /* Keep original positioning */
        position: relative !important;
    }
    
    .hero-buttons {
        animation: fadeInUp 0.8s ease-out 0.6s both !important;
        /* Preserve layout */
        position: relative !important;
    }
    
    /* Dashboard Animations - Minimal impact */
    .hero-visual {
        animation: slideInFromBottom 1.2s ease-out 0.4s both !important;
        /* Keep dashboard centered and positioned correctly */
        position: relative !important;
    }
    
    .ai-interface {
        animation: scaleIn 1s ease-out 0.8s both !important;
        /* Maintain dashboard layout */
        position: relative !important;
    }
    
    /* Plans Section Animations */
    .plans-section {
        animation: fadeInUp 1s ease-out both !important;
    }
    
    .apple-glass-card:nth-child(1) {
        animation: slideInFromLeft 0.8s ease-out 0.2s both !important;
    }
    
    .apple-glass-card:nth-child(2) {
        animation: fadeInUp 0.8s ease-out 0.4s both !important;
    }
    
    .apple-glass-card:nth-child(3) {
        animation: slideInFromRight 0.8s ease-out 0.6s both !important;
    }
    
    /* Button Animations */
    .cta-button {
        animation: fadeInUp 0.6s ease-out both !important;
        transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    }
    
    .cta-button:hover {
        transform: translateY(-2px) !important;
    }
    
    /* Cards and Interactive Elements */
    .upload-card, .files-card {
        animation: slideInFromBottom 0.8s ease-out both !important;
    }
    
    /* Staggered Animation for Multiple Elements */
    .plan-feature:nth-child(1) { animation-delay: 0.1s !important; }
    .plan-feature:nth-child(2) { animation-delay: 0.2s !important; }
    .plan-feature:nth-child(3) { animation-delay: 0.3s !important; }
    .plan-feature:nth-child(4) { animation-delay: 0.4s !important; }
    
    .plan-feature {
        animation: fadeInUp 0.5s ease-out both !important;
    }
    
    /* Fix delayed section subtexts - remove long animation delays on mobile */
    .section-subtitle,
    .section-description,
    .voice-showcase-content .section-subtitle,
    .discovery-description,
    .faq-description,
    .new-section-description,
    .description-line,
    .plan-description,
    .solutions-description,
    .call-handling-description,
    .enhanced-description,
    .capabilities-description,
    .trusted-description,
    .voice-tech-description,
    .plans-description,
    .voice-tech-description-mobile,
    .plans-description-mobile {
        animation-delay: 0.1s !important;
        animation-duration: 0.5s !important;
    }
    
    /* Force immediate visibility for subtitle elements on mobile */
    .voice-tech-description,
    .call-handling-description,
    .plans-description,
    .new-section-description,
    .faq-description {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
        transition: none !important;
        visibility: visible !important;
    }
    
    /* Completely disable ALL animations for these problematic descriptions */
    .voice-tech-description *,
    .plans-description *,
    .voice-tech-description,
    .plans-description {
        animation-delay: 0s !important;
        animation-duration: 0s !important;
        animation: none !important;
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
        visibility: visible !important;
    }
    
    /* Remove ALL scroll animation classes from these specific elements */
    .voice-tech-description.scroll-animate,
    .voice-tech-description.scroll-animate-fade,
    .voice-tech-description.scroll-animate-scale,
    .voice-tech-description.scroll-animate-left,
    .voice-tech-description.scroll-animate-right,
    .plans-description.scroll-animate,
    .plans-description.scroll-animate-fade,
    .plans-description.scroll-animate-scale,
    .plans-description.scroll-animate-left,
    .plans-description.scroll-animate-right {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    
    /* Override animate-in states for these elements */
    .voice-tech-description:not(.animate-in),
    .plans-description:not(.animate-in) {
        opacity: 1 !important;
        transform: none !important;
    }
    
    /* Force immediate visibility for parent sections on mobile */
    .voice-technology-premium,
    .pricing-section,
    .plans-section {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
        transition: none !important;
        visibility: visible !important;
    }
    
    /* Move ROI-Centered Investments section lower on mobile */
    .plans-section {
        padding-top: 120px !important;
    }
    
    /* Ensure mobile description versions are always visible */
    .voice-tech-description-mobile,
    .plans-description-mobile {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
        transition: none !important;
        visibility: visible !important;
    }
    
    /* Match Choose Your Plan title size to Scale Your Sales hero title */
    .plans-title {
        font-size: 44px !important;
        line-height: 1.1 !important;
        font-weight: 700 !important;
        letter-spacing: -1.5px !important;
    }
    
    /* Remove excessive delays from scroll animations */
    .scroll-animate,
    .scroll-animate-fade,
    .scroll-animate-scale,
    .scroll-animate-left,
    .scroll-animate-right {
        animation-delay: 0.1s !important;
        animation-duration: 0.6s !important;
    }
    
    /* Child element stagger delays - keep minimal */
    .scroll-animate.delay-1 { animation-delay: 0.1s !important; }
    .scroll-animate.delay-2 { animation-delay: 0.2s !important; }
    .scroll-animate.delay-3 { animation-delay: 0.3s !important; }
    .scroll-animate.delay-4 { animation-delay: 0.4s !important; }
    .scroll-animate.delay-5 { animation-delay: 0.5s !important; }
    
    /* Fix specific long animation delays found in styles.css */
    .desc-line:nth-child(1) { animation-delay: 0.1s !important; }
    .desc-line:nth-child(2) { animation-delay: 0.2s !important; }
    .desc-line:nth-child(3) { animation-delay: 0.3s !important; }
    
    .solution-card.primary { animation-delay: 0.2s !important; }
    .solution-card.secondary { animation-delay: 0.3s !important; }
    
    /* Fix any remaining long delays */
    [style*="animation-delay: 1"],
    [style*="animation-delay: 2"],
    [style*="animation-delay: 3"],
    [style*="animation-delay: 4"],
    [style*="animation-delay: 5"],
    [style*="animation-delay: 6"],
    [style*="animation-delay: 7"],
    [style*="animation-delay: 8"],
    [style*="animation-delay: 9"],
    [style*="animation-delay: 10"],
    [style*="animation-delay: 11"],
    [style*="animation-delay: 12"],
    [style*="animation-delay: 13"],
    [style*="animation-delay: 14"] {
        animation-delay: 0.1s !important;
    }
}

/* Mobile Performance Optimizations - Fixed to Not Break Layout */
@media (max-width: 768px) {
    /* REMOVE GLOBAL TRANSFORMS - They broke layout */
    /* Only apply performance optimizations selectively */
    
    /* Body optimization for momentum scrolling only */
    body {
        -webkit-overflow-scrolling: touch !important;
        overflow-scrolling: touch !important;
    }
    
    /* Background circles - RESTORE original positioning */
    .hero::before, .hero::after {
        /* Remove problematic transforms that displaced circles */
        transform: none !important;
        -webkit-transform: none !important;
        will-change: auto !important;
        contain: none !important;
    }
    
    /* Cards and text - REMOVE blur/transform effects */
    .apple-glass-card, .upload-card, .files-card {
        /* Remove transforms that caused blur/displacement */
        transform: none !important;
        -webkit-transform: none !important;
        will-change: auto !important;
        contain: none !important;
        /* Keep original positioning */
        position: relative !important;
    }
    
    /* Dashboard elements - minimal optimization */
    .hero-visual, .ai-interface {
        /* Keep positioning stable */
        transform: none !important;
        -webkit-transform: none !important;
        position: relative !important;
    }
    
    /* Only apply safe optimizations */
    .cta-button {
        -webkit-tap-highlight-color: transparent !important;
        -webkit-font-smoothing: antialiased !important;
    }
}

/* Mobile Dashboard Preview - Desktop Design Responsive Adaptation */
@media (max-width: 768px) {
    /* CRITICAL: Show ONLY the desktop dashboard on mobile - more compact */
    .hero-visual {
        display: flex !important;
        justify-content: center !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100% !important;
        margin-top: 16px !important;
        margin-bottom: 16px !important;
        padding: 0 !important;
        position: relative !important;
        z-index: 10 !important;
        transform: none !important; /* Remove any scaling */
    }
    
    /* Hide ANY simplified mobile versions */
    .mobile-ai-dashboard-container,
    .mobile-ai-dashboard-card,
    .mobile-dashboard-circle {
        display: none !important;
        visibility: hidden !important;
        position: absolute !important;
        left: -9999px !important;
    }
    
    /* Ensure the interface is visible */
    .ai-interface {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Ensure all dashboard components are visible */
    .interface-content,
    .ai-dashboard {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    .interface-header,
    .dashboard-header,
    .dashboard-stats {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    .dashboard-grid {
        display: grid !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* AI Interface Browser Window - Mobile Responsive */
    .ai-interface {
        width: 95vw !important;
        max-width: 95vw !important;
        margin: 0 auto !important;
        position: relative !important;
        background: rgba(255, 255, 255, 0.08) !important;
        backdrop-filter: blur(20px) !important;
        -webkit-backdrop-filter: blur(20px) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        border-radius: 16px !important;
        overflow: hidden !important;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3) !important;
    }
    
    /* Browser Header Bar - Compact for Mobile */
    .interface-header {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 8px 12px !important;
        background: rgba(30, 30, 30, 0.95) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    }
    
    /* Browser Control Dots - Smaller for Mobile */
    .interface-controls {
        display: flex !important;
        gap: 4px !important;
    }
    
    .control-dot {
        width: 8px !important;
        height: 8px !important;
        border-radius: 50% !important;
        display: block !important;
    }
    
    .control-dot.red {
        background: #ff5f57 !important;
    }
    
    .control-dot.yellow {
        background: #ffbd2e !important;
    }
    
    .control-dot.green {
        background: #28ca42 !important;
    }
    
    /* Browser Title */
    .interface-title {
        font-size: 13px !important;
        color: rgba(255, 255, 255, 0.9) !important;
        font-weight: 500 !important;
        letter-spacing: -0.2px !important;
    }
    
    /* Live Status Indicator */
    .interface-status {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
    }
    
    .interface-status .status-dot {
        width: 6px !important;
        height: 6px !important;
        background: #28ca42 !important;
        border-radius: 50% !important;
        animation: pulse 2s infinite !important;
    }
    
    .interface-status .status-text {
        font-size: 11px !important;
        color: rgba(255, 255, 255, 0.6) !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
    }
    
    /* Dashboard Content Area - More Compact */
    .interface-content {
        padding: 12px !important;
        background: transparent !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* AI Dashboard Container - Compact with wider utilization */
    .ai-dashboard {
        background: transparent !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        border-radius: 10px !important;
        padding: 12px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Dashboard Header with Green Dot - Tighter */
    .dashboard-header {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        margin-bottom: 8px !important;
    }
    
    .dashboard-title {
        font-size: 12px !important;
        color: rgba(255, 255, 255, 0.9) !important;
        font-weight: 600 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
    }
    
    .dashboard-status .status-indicator {
        width: 8px !important;
        height: 8px !important;
        background: #28ca42 !important;
        border-radius: 50% !important;
        display: block !important;
        animation: pulse 2s infinite !important;
    }
    
    /* Two Column Grid - Tighter spacing, better width utilization */
    .dashboard-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
        margin-bottom: 8px !important;
    }
    
    /* Upload Card - Wider and Consistent Size */
    .upload-card {
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.03) 100%) !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        border-radius: 12px !important;
        padding: 14px !important;
        width: 100% !important;
        min-height: 90px !important;
        box-sizing: border-box !important;
    }
    
    .card-header {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        margin-bottom: 8px !important;
    }
    
    .card-icon {
        color: rgba(138, 43, 226, 0.8) !important;
        width: 16px !important;
        height: 16px !important;
    }
    
    .card-icon svg {
        width: 100% !important;
        height: 100% !important;
    }
    
    .card-title {
        font-size: 14px !important;
        color: #ffffff !important;
        font-weight: 600 !important;
    }
    
    /* Upload Zone - Wider and More Compact */
    .upload-zone-compact {
        background: rgba(255, 255, 255, 0.03) !important;
        border: 1px dashed rgba(255, 255, 255, 0.15) !important;
        border-radius: 8px !important;
        padding: 16px !important;
        text-align: center !important;
        cursor: pointer !important;
        transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 6px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .upload-icon {
        color: rgba(255, 255, 255, 0.5) !important;
        margin-bottom: 2px !important;
    }
    
    .upload-icon svg {
        width: 100% !important;
        height: 100% !important;
    }
    
    .upload-text {
        font-size: 12px !important;
        color: rgba(255, 255, 255, 0.6) !important;
        font-weight: 400 !important;
    }
    
    /* Files Card - Match Desktop Exactly with Same Size as Upload Card */
    .files-card {
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.03) 100%) !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        border-radius: 12px !important;
        padding: 14px !important;
        width: 100% !important;
        min-height: 90px !important;
        box-sizing: border-box !important;
    }
    
    /* File List - Match Desktop Exactly */
    .file-list {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
    }
    
    .file-row {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 8px 0 !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    }
    
    .file-row:last-child {
        border-bottom: none !important;
    }
    
    .file-name {
        font-size: 12px !important;
        color: #ffffff !important;
        font-weight: 500 !important;
    }
    
    .file-status {
        font-size: 10px !important;
        padding: 3px 8px !important;
        border-radius: 12px !important;
        font-weight: 500 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.3px !important;
    }
    
    .file-status.ready {
        background: rgba(40, 202, 66, 0.15) !important;
        color: #28ca42 !important;
        border: 1px solid rgba(40, 202, 66, 0.3) !important;
    }
    
    .file-status.processing {
        background: rgba(255, 189, 46, 0.15) !important;
        color: #ffbd2e !important;
        border: 1px solid rgba(255, 189, 46, 0.3) !important;
    }
    
    /* Dashboard Stats Bar - Compact */
    .dashboard-stats {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 12px !important;
        padding-top: 10px !important;
        border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
    }
    
    .dashboard-stats .stat-item {
        text-align: center !important;
    }
    
    .dashboard-stats .stat-value {
        font-size: 14px !important;
        font-weight: 700 !important;
        color: rgba(255, 255, 255, 0.9) !important;
        margin-bottom: 2px !important;
    }
    
    .dashboard-stats .stat-label {
        font-size: 9px !important;
        color: rgba(255, 255, 255, 0.5) !important;
        text-transform: uppercase !important;
        letter-spacing: 0.4px !important;
    }
    
    /* Pulse Animation */
    @keyframes pulse {
        0% {
            opacity: 1;
            transform: scale(1);
        }
        50% {
            opacity: 0.8;
            transform: scale(1.1);
        }
        100% {
            opacity: 1;
            transform: scale(1);
        }
    }
}

/* Smaller Mobile Adjustments - Even More Compact */
@media (max-width: 480px) {
    .interface-header {
        padding: 6px 10px !important;
    }
    
    .interface-title {
        font-size: 11px !important;
    }
    
    .interface-content {
        padding: 10px !important;
    }
    
    .ai-dashboard {
        padding: 10px !important;
    }
    
    .dashboard-title {
        font-size: 11px !important;
    }
    
    .upload-zone-compact {
        padding: 28px 20px !important;
        min-height: 85px !important;
    }
    
    .upload-card,
    .files-card {
        padding: 12px !important;
    }
    
    .upload-zone-compact {
        padding: 12px !important;
    }
    
    .dashboard-stats .stat-value {
        font-size: 12px !important;
    }
    
    .dashboard-stats .stat-label {
        font-size: 8px !important;
    }
    
    .upload-icon {
        width: 20px !important;
        height: 20px !important;
    }
    
    /* Move comparison section purple circle lower on mobile */
    .comparison-background-circle {
        top: 60% !important;
    }
}