.hero-bg { background: linear-gradient(to bottom, #d6fad2, #ffffff); padding: 40px 0; }
.hero-section { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 50px; }
.key-points-section { padding: 80px 0; }
.key-points-container { display: flex; justify-content: space-around; align-items: center; flex-wrap: wrap; gap: 40px; }
/* --- AFTER --- */
.promo-section {
    /* Make this the positioning context for the background */
    position: relative;
    /* Add vertical spacing between sections */
    padding: 80px 0;
    /* Prevent horizontal overflow */
    overflow: hidden;
}

.promo-background {
    /* Position the background behind the content */
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    /* Set a fixed, smaller height */
    height: 400px;
    /* Center it vertically */
    transform: translateY(-50%);
    /* Send it behind the content */
    z-index: -1;
    border-radius: 20px;
}

.promo-background.bg-orange { background-color: #FFE6CB; }
.promo-background.bg-green { background-color: #BEEAB2; }

.promo-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 40px;
    /* Ensure content stays above the background */
    position: relative;
}
.differentiators-section { padding: 80px 0; text-align: center; }
.features-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 40px; text-align: left; }
.footer { background-color: #defae8; padding: 60px 20px; }
.footer-container {
    display: grid;
    /* Give each column equal space */
    grid-template-columns: repeat(3, 1fr);
    /* Increase the gap for better breathing room */
    gap: 60px;
}
.footer-bottom { border-top: 1px solid #ccc; margin-top: 40px; padding-top: 20px; text-align: center; }
@media (max-width: 1024px) { .hero-section, .promo-container, .features-container, .footer-container { grid-template-columns: 1fr; text-align: center; } .promo-container .promo-graphic { grid-row: 1; } .footer-container { gap: 30px; } }
/* =================================================== */
/* COMPREHENSIVE MOBILE RESPONSIVENESS (FINAL VERSION) */
/* =================================================== */
@media (max-width: 768px) {
    
    /* --- GENERAL TYPOGRAPHY --- */
    h1 { font-size: 2.25rem; }
    h2 { font-size: 1.75rem; }

    /* --- HERO SECTION --- */
    .hero-section {
        text-align: center;
        gap: 30px;
    }
    .hero-section .logo {
        margin-left: auto;
        margin-right: auto;
    }
    .hero-section .social-icons {
        justify-content: center;
    }
    
    /* --- APP BADGES - BALANCED & SIDE-BY-SIDE --- */
    .app-badges {
        justify-content: center;
        flex-wrap: nowrap;
        gap: 16px; /* Return to original gap for a bit more space */
    }
    .app-badges img {
        height: 50px; /* NEW BALANCED SIZE: Larger than 40px, but fits well */
    }

    /* --- PROMO SECTIONS --- */
    .promo-container {
        gap: 30px;
    }

    /* --- FOOTER SECTION --- */
    .footer-container {
        text-align: center;
    }
    .footer-container .logo {
        margin-left: auto;
        margin-right: auto;
    }
    .footer-container > div:not(:last-child) {
        margin-bottom: 40px;
    }
    .footer-container .social-icons {
        justify-content: center;
    }
    .footer-legal nav ul {
        padding-left: 0;
        list-style: none;
    }
    .footer-contact .contact-form {
        max-width: 400px;
        margin: 0 auto;
    }
}