/* ════════════════════════════════════════════════════════════
   ATOMINC — FINAL COMPREHENSIVE MOBILE OPTIMIZATION
   ════════════════════════════════════════════════════════════ */

/* ── SMALL DESKTOP / TABLET LANDSCAPE (max-width: 1024px) ── */
@media (max-width: 1024px) {
    .section-white, .section-light, .section-teal, .sec-white, .sec-light, .sec-navy, .sec-cream,
    .unified-ops, .s-control, .s-feature-showcase, .s-modules, .s-platform-demo, .s-brands, 
    .s-resources, .s-demo, .s-metrics, .s-integrations, .sec, .ad-section, .exec-inner {
        padding-top: 60px !important;
        padding-bottom: 60px !important;
    }

    .container, .sf-container, .exec-inner {
        padding-left: 32px !important;
        padding-right: 32px !important;
        max-width: 100% !important;
    }
}

/* ── TABLET PORTRAIT (max-width: 768px) ── */
@media (max-width: 768px) {
    .section-white, .section-light, .section-teal, .sec-white, .sec-light, .sec-navy, .sec-cream,
    .unified-ops, .s-control, .s-feature-showcase, .s-modules, .s-platform-demo, .s-brands, 
    .s-resources, .s-demo, .s-metrics, .s-integrations, .sec, .ad-section, .exec-inner {
        padding-top: 50px !important;
        padding-bottom: 50px !important;
    }

    .container, .sf-container, .exec-inner {
        padding-left: 24px !important;
        padding-right: 24px !important;
    }

    /* Fix large inline margins on mobile */
    div[style*="margin-bottom:48px"], 
    div[style*="margin-bottom:60px"],
    .reveal[style*="margin-bottom:48px"] {
        margin-bottom: 24px !important;
    }

    /* Typography adjustments */
    .giant-heading { font-size: 4rem !important; }
    .giant-heading-sub { font-size: 1.8rem !important; }
    .s-h2, h2.section-heading { font-size: 2rem !important; }
}

/* ── MOBILE (max-width: 480px) ── */
@media (max-width: 480px) {
    /* Aggressively reduce section padding for mobile */
    .section-white, .section-light, .section-teal, .sec-white, .sec-light, .sec-navy, .sec-cream,
    .unified-ops, .s-control, .s-feature-showcase, .s-modules, .s-platform-demo, .s-brands, 
    .s-resources, .s-demo, .s-metrics, .s-integrations, .sec, .ad-section, .exec-inner {
        padding-top: 32px !important;
        padding-bottom: 32px !important;
    }

    .container, .sf-container, .exec-inner {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    /* Reduce hero height and spacing */
    .hero-giant { padding-top: 60px !important; padding-bottom: 24px !important; min-height: auto !important; }
    .giant-heading { font-size: 2.8rem !important; margin-bottom: 8px !important; }
    .giant-heading-sub { font-size: 1.2rem !important; margin-bottom: 16px !important; }
    .hero-support { font-size: 0.85rem !important; margin-bottom: 16px !important; }
    .btn-neon-pink { padding: 14px 24px !important; font-size: 0.9rem !important; }

    /* Fix grids - force 1 column */
    .s-metrics-grid, .s-pd-grid, .s-modules-grid, .s-logo-grid, .s-logo-grid-7, 
    .s-resources-grid, .grid-two-col, .brand-features, .pillars-grid, .steps-grid, .exec-inner {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    /* Tighten up card padding */
    .s-module-card, .s-pd-card, .s-metric-block, .brand-feature, .pillar-card, .step, .exec-card {
        padding: 16px !important;
    }

    /* Specific element fixes */
    .s-met-num { font-size: 2.8rem !important; }
    .unified-tabs { gap: 4px !important; margin-bottom: 16px !important; }
    .utab { padding: 6px 10px !important; font-size: 0.75rem !important; border-radius: 6px !important; }

    /* Avoid horizontal scroll */
    body, html { overflow-x: hidden !important; width: 100% !important; position: relative !important; }
    .marquee-section { width: 100vw !important; margin-left: -16px !important; overflow: hidden !important; }
    
    .exec-cards-stage { height: 280px !important; }
    
    /* Footer optimization */
    .site-footer { padding-top: 40px !important; }
    .sf-top { gap: 32px !important; padding-bottom: 32px !important; }
    .sf-cols { grid-template-columns: 1fr 1fr !important; gap: 20px !important; }
}

/* ── SMALL MOBILE (max-width: 360px) ── */
@media (max-width: 360px) {
    .container, .sf-container, .exec-inner {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
    .giant-heading { font-size: 2.4rem !important; }
    .s-h2, h2.section-heading { font-size: 1.5rem !important; }
}