/* Dynamic Spacing - Mobile First */
:root {
    --section-spacing: 2rem;
    --content-padding: 1.5rem;
    --container-max-width: 1280px;
}

/* Container */
.container {
    max-width: var(--container-max-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--content-padding);
    padding-right: var(--content-padding);
}

/* Section Spacing */
.page-section {
    margin-bottom: var(--section-spacing);
}

.page-section:last-child {
    margin-bottom: 0;
}

/* Remove excessive spacing after hero */
.hero-section + .page-section {
    margin-top: var(--section-spacing);
}

/* Tablet */
@media (min-width: 768px) {
    :root {
        --section-spacing: 4rem;
    }
}

/* Desktop */
@media (min-width: 1024px) {
    :root {
        --section-spacing: 2rem;
        --content-padding: 3rem;
    }
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Montserrat', sans-serif;
}