/* Layout Grid System */

.container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 var(--spacing-3);
}

.grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--spacing-3);
}

/* Vertical Rhythm */
section {
    padding: var(--spacing-10) 0;
    position: relative;
    z-index: 1;
}

/* Avoid visual clutter, maintain strong hierarchy */
.section-header {
    text-align: center;
    margin-bottom: var(--spacing-8);
    grid-column: span 12;
}

.section-header h2 {
    margin-bottom: var(--spacing-2);
}

.section-header p {
    max-width: 600px;
    margin: 0 auto;
}

/* Split Layouts (Hero, About) */
.split-layout {
    display: flex;
    align-items: center;
    gap: var(--spacing-8);
    min-height: calc(100vh - 100px);
}

.split-content,
.split-visual {
    flex: 1;
}

/* Utilities */
.text-center { text-align: center; }
.mt-1 { margin-top: var(--spacing-1); }
.mt-2 { margin-top: var(--spacing-2); }
.mt-3 { margin-top: var(--spacing-3); }
.mt-4 { margin-top: var(--spacing-4); }
.mb-1 { margin-bottom: var(--spacing-1); }
.mb-2 { margin-bottom: var(--spacing-2); }
.mb-3 { margin-bottom: var(--spacing-3); }
.mb-4 { margin-bottom: var(--spacing-4); }