/* ---------------------------------------------------------
   GLOBAL IMAGE SAFETY
   --------------------------------------------------------- */
img {
    max-width: 100%;
    height: auto;
}


/* ---------------------------------------------------------
   HERO — reduce vertical pressure on mobile
   --------------------------------------------------------- */
@media (max-width: 768px) {
    .hero {
        padding: 110px 0 50px;
    }

    .hero h1 {
        font-size: 2.2rem;
        line-height: 1.25;
    }

    .hero .subtitle {
        font-size: 1.05rem;
    }
}

@media (max-width: 576px) {
    .hero {
        padding: 100px 0 40px;
    }
}


/* ---------------------------------------------------------
   EXECUTIVE SUMMARY OVERLAP
   --------------------------------------------------------- */
@media (max-width: 768px) {
    .overlap-section {
        margin-top: -30px;
        padding-bottom: 30px;
    }

    .summary-box {
        padding: 30px;
    }
}


/* ---------------------------------------------------------
   GRID STACKING — TABLET + MOBILE
   --------------------------------------------------------- */
@media (max-width: 992px) {
    .phase-grid,
    .comparison-grid,
    .impact-section,
    .testimonial-grid,
    .systems-grid,
    .solutions-grid,
    .po-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
}


/* ---------------------------------------------------------
   PRODUCT / IMAGE FIXES
   --------------------------------------------------------- */
@media (max-width: 768px) {
    .acg-img-box img {
        height: auto;
    }
}


/* ---------------------------------------------------------
   CLIENT FLOATING LOGO FIX
   --------------------------------------------------------- */
@media (max-width: 768px) {
    .client-left-logo {
        position: static;
        margin-bottom: 15px;
    }
}


/* ---------------------------------------------------------
   PARTNER LOGOS — prevent horizontal overflow
   --------------------------------------------------------- */
.partner-logos {
    flex-wrap: wrap;
}


/* ---------------------------------------------------------
   METRICS & RESULTS — tighter mobile spacing
   --------------------------------------------------------- */
@media (max-width: 768px) {
    .metric-card,
    .result-card {
        padding: 25px 20px;
    }

    .metric-card h2,
    .result-card h2 {
        font-size: 2.4rem;
    }
}


/* ---------------------------------------------------------
   TABLE — allow horizontal scroll instead of breaking
   --------------------------------------------------------- */
@media (max-width: 768px) {
    .styled-table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
}


/* ---------------------------------------------------------
   QUOTE BOX — optimize mobile typography
   --------------------------------------------------------- */
@media (max-width: 576px) {
    .quote-box {
        padding: 40px 25px;
    }

    .quote-icon {
        font-size: 3rem;
        top: 20px;
        left: 20px;
    }

    .quote-text {
        font-size: 1.1rem;
    }

    .meta-info {
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
    }
}


/* ---------------------------------------------------------
   TEXT ALIGNMENT IMPROVEMENT ON MOBILE
   --------------------------------------------------------- */
@media (max-width: 768px) {
    .section-desc,
    .feedback-desc {
        text-align: center;
    }

    .section-title,
    .summary-section-title {
        font-size: 2rem;
    }

    section {
        padding: 60px 0 !important;
    }

    .stat-val {
        font-size: 2rem;
    }
}


/* ---------------------------------------------------------
   REMOVE FORCED HORIZONTAL SCROLL MASKING
   (only use if truly needed)
   --------------------------------------------------------- */
/* 
html,
body {
    overflow-x: hidden;
}
*/