/* Explain: GrowthSignal spacing, section backgrounds, and page layout utilities */
.site-wrap {
    margin-inline: auto;
    max-width: 1180px;
    padding-inline: 1rem;
}

.section-pad {
    padding-block: clamp(3.5rem, 6vw, 6.5rem);
}

.hero-section {
    min-height: 100vh;
    padding-top: clamp(6.5rem, 9vw, 8rem);
}

.proof-strip {
    background: linear-gradient(90deg, rgba(37, 99, 235, 0.18), rgba(34, 197, 94, 0.1));
    border-block: 1px solid var(--border-color);
    padding-block: 1rem;
}

.asymmetric-grid {
    display: grid;
    gap: 2rem;
    grid-template-columns: 1fr;
}

.data-section-dark {
    background:
        linear-gradient(180deg, rgba(7, 17, 31, 0.98), rgba(13, 26, 43, 0.98)),
        radial-gradient(circle at 80% 20%, rgba(37, 99, 235, 0.25), transparent 34rem);
}

.case-study-section {
    background:
        radial-gradient(circle at 10% 20%, rgba(34, 197, 94, 0.14), transparent 25rem),
        var(--midnight-color);
}

.insights-section {
    background: var(--graphite-color);
}

.contact-section {
    background:
        linear-gradient(135deg, rgba(248, 250, 252, 0.96), rgba(226, 232, 240, 0.94)),
        var(--warm-white);
}

@media (min-width: 900px) {
    .site-wrap {
        padding-inline: 2rem;
    }

    .asymmetric-grid {
        grid-template-columns: 0.8fr 1.2fr;
        align-items: start;
    }
}

@media (min-width: 1280px) {
    .site-wrap {
        padding-left: 5.75rem;
    }
}