/* Mobile Optimizations - Production Ready */
@media (max-width: 768px) {
    /* Prevent horizontal overflow */
    html, body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
        width: 100% !important;
    }
    
    * {
        box-sizing: border-box !important;
    }
    
    /* Nav - fix hamburger position, add breathing room, safe area for notches */
    .nav-container {
        padding-left: 16px !important;
        padding-right: 16px !important;
        max-width: 100% !important;
        gap: 12px;
    }
    
    .hamburger {
        margin-left: auto !important;
        margin-right: 8px !important;
        flex-shrink: 0;
    }
    
    .logo {
        flex-shrink: 0;
        min-width: 0;
    }
    
    /* Container fixes */
    .hero-content,
    .section-container,
    .section-content,
    .cta-content,
    footer,
    .footer-content,
    .footer-bottom {
        padding-left: 20px !important;
        padding-right: 20px !important;
        max-width: 100% !important;
    }
    
    /* Typography scaling */
    .hero h1 {
        font-size: 32px !important;
        line-height: 1.2;
    }
    
    .hero-subtitle {
        font-size: 16px !important;
    }
    
    .section-title {
        font-size: 28px !important;
    }
    
    .section-subtitle {
        font-size: 16px !important;
    }
    
    .cta-title {
        font-size: 28px !important;
    }
    
    .cta-subtitle {
        font-size: 16px !important;
    }
    
    /* Hero section */
    .hero {
        padding: 60px 20px 40px !important;
    }
    
    .hero-stats {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;
        padding: 0 !important;
        justify-items: center !important;
        max-width: 100% !important;
    }
    
    .hero-stat {
        text-align: center !important;
        min-width: 0 !important;
    }
    
    /* Features grid - fix minmax overflow, single column */
    .features-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        min-width: 0 !important;
    }
    
    .feature-card {
        padding: 24px !important;
        min-width: 0 !important;
        text-align: left !important;
    }
    
    /* Feature icons - left align, prevent right drift */
    .feature-icon {
        margin-left: 0 !important;
        margin-right: auto !important;
        flex-shrink: 0;
    }
    
    /* Sections */
    section {
        padding: 40px 20px !important;
    }
    
    /* Buttons */
    .btn-primary,
    .btn-secondary,
    .btn-white {
        padding: 14px 24px !important;
        font-size: 16px !important;
        width: 100%;
        max-width: 100%;
        display: block;
        text-align: center;
        box-sizing: border-box;
    }
    
    /* Footer */
    footer {
        padding: 40px 20px 30px !important;
    }
    
    .footer-content {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }
    
    .footer-bottom {
        flex-direction: column !important;
        gap: 20px !important;
        text-align: center !important;
    }
    
    /* Navigation - Mobile Menu */
    .hamburger {
        display: flex !important;
    }
    
    .nav-links {
        position: fixed !important;
        top: 0;
        right: -100%;
        width: 280px;
        max-width: 85vw;
        height: 100vh;
        background: var(--bg-secondary) !important;
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border-left: 1px solid var(--border);
        flex-direction: column !important;
        padding: 80px 30px 30px !important;
        gap: 0 !important;
        transition: right 0.3s ease;
        z-index: 1000;
        overflow-y: auto;
        box-shadow: -4px 0 20px rgba(0, 0, 0, 0.3);
    }
    
    .nav-links.active {
        right: 0 !important;
        display: flex !important;
    }
    
    .nav-links .nav-link,
    .nav-links .nav-cta {
        width: 100% !important;
        padding: 16px 0 !important;
        border-bottom: 1px solid var(--border);
        text-align: left !important;
        font-size: 16px !important;
        display: block !important;
        margin: 0 !important;
        justify-content: flex-start !important;
    }
    
    .nav-links .nav-cta {
        margin-top: 20px !important;
        text-align: center !important;
        border-bottom: none;
        border-radius: 12px !important;
    }
    
    .nav-links .nav-link::after {
        display: none !important;
    }
    
    .nav-container {
        padding: 12px 16px !important;
        position: relative;
    }
    
    .logo span {
        font-size: 18px;
    }
    
    .logo-icon {
        width: 36px !important;
        height: 36px !important;
        flex-shrink: 0;
    }
    
    /* Hero Badge - Make sure it's visible */
    .hero-badge {
        display: inline-block !important;
        visibility: visible !important;
        opacity: 1 !important;
        font-size: 13px !important;
        padding: 6px 14px !important;
        margin-bottom: 20px !important;
        white-space: nowrap;
    }
    
    .hero-content {
        padding-top: 20px !important;
    }
    
    /* Demo container */
    .demo-container {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }
    
    /* Override inline styles for mobile - Fix horizontal scrolling */
    [style*="padding: 60px"],
    [style*="padding:60px"] {
        padding: 30px 20px !important;
    }
    
    [style*="padding: 40px"],
    [style*="padding:40px"] {
        padding: 24px 20px !important;
    }
    
    [style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }
    
    [style*="gap: 60px"],
    [style*="gap:60px"] {
        gap: 30px !important;
    }
    
    [style*="gap: 40px"],
    [style*="gap:40px"] {
        gap: 24px !important;
    }
    
    /* Fix "Getting Started" section - prevent overflow */
    #getting-started .section-container {
        padding-left: 20px !important;
        padding-right: 20px !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
    
    .quickstart-card {
        padding: 24px 20px !important;
        overflow-x: hidden !important;
    }
    
    .quickstart-grid {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }
    
    .quickstart-grid > * {
        min-width: 0 !important;
    }
    
    /* Recommended badge - flow in document on mobile */
    .quickstart-badge {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        display: inline-block !important;
        margin-bottom: 16px !important;
    }
    
    /* Code block - wrap long URLs */
    .quickstart-code {
        overflow-x: auto !important;
        max-width: 100% !important;
    }
    
    .quickstart-code > div,
    .quickstart-code span {
        word-break: break-all !important;
        overflow-wrap: break-word !important;
    }
    
    /* CTA button - prevent overflow */
    .quickstart-cta {
        max-width: 100% !important;
        white-space: normal !important;
    }
    
    /* Alternative options grid */
    #getting-started [style*="margin-top: 40px"][style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }
    
    /* Fix "How It Works" section */
    #how-it-works [style*="display: flex"] {
        flex-direction: column !important;
        gap: 16px !important;
    }
    
    #how-it-works [style*="width: 50px"] {
        width: 40px !important;
        height: 40px !important;
        font-size: 20px !important;
    }
    
    /* Code blocks */
    .demo-code {
        font-size: 12px !important;
        padding: 16px !important;
        overflow-x: auto;
    }
    
    /* AI Providers section */
    [style*="display: flex"][style*="gap: 20px"][style*="justify-content: center"] {
        flex-wrap: wrap !important;
        gap: 12px !important;
    }
    
    /* Hero CTA - stack buttons, full width */
    .hero-cta {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
        max-width: 100% !important;
    }
    
    .hero-cta .btn-primary,
    .hero-cta .btn-secondary {
        margin: 0 !important;
    }
    
    /* Section container - prevent overflow */
    .section-container {
        width: 100% !important;
        min-width: 0 !important;
    }
    
    /* Override inline grid that causes overflow */
    .features-grid[style*="minmax(350px)"] {
        grid-template-columns: 1fr !important;
    }
    
    /* Touch targets - ensure hamburger has padding */
    .hamburger {
        padding: 12px !important;
        min-width: 48px !important;
        min-height: 48px !important;
    }
    
    /* Floating coffee button - keep within viewport */
    .floating-coffee {
        right: 16px !important;
        bottom: 20px !important;
        left: auto !important;
    }
}

@media (max-width: 480px) {
    .hero h1 {
        font-size: 24px !important;
    }
    
    .section-title {
        font-size: 22px !important;
    }
    
    .hero-stats {
        grid-template-columns: 1fr !important;
    }
    
    .hero-stat-value {
        font-size: 28px !important;
    }
    
    .hero-stat-label {
        font-size: 11px !important;
    }
    
    /* Even smaller padding on very small screens */
    [style*="padding: 60px"],
    [style*="padding:60px"] {
        padding: 20px 16px !important;
    }
    
    [style*="padding: 40px"],
    [style*="padding:40px"] {
        padding: 20px 16px !important;
    }
}