.container { width: 100%; max-width: var(--container-max); margin: 0 auto; padding: 0 var(--space-lg); }
.container--wide { max-width: var(--container-wide); }
.section { padding: var(--space-3xl) 0; }
.section--dark { background: #050505; }
.section--deep { background: #000; }
.section--gradient { background: linear-gradient(180deg, #000 0%, #0a0a0a 100%); }
.section--light { background: #f8f8f8; color: #111; }
.section--light h1, .section--light h2, .section--light h3, .section--light h4 { color: #000; }
.section--light p, .section--light .section__subtitle { color: #555; }
.section--light .section__label { color: var(--color-accent-gold); }
.section--light .card { background: #fff; border-color: rgba(0,0,0,0.08); }
.section--light .card:hover { border-color: var(--color-accent-gold); box-shadow: 0 20px 60px rgba(0,0,0,0.08); }
.section--light .card__title { color: #000; }
.section--light .card__text { color: #555; }
.section--light .card__icon { background: rgba(180,145,103,0.08); color: var(--color-accent-gold); }

.grid { display: grid; gap: var(--space-lg); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.flex { display: flex; }
.flex--center { align-items: center; justify-content: center; }
.flex--between { align-items: center; justify-content: space-between; }
.flex--column { flex-direction: column; }
.flex--gap-sm { gap: var(--space-sm); }
.flex--gap-md { gap: var(--space-md); }
.flex--gap-lg { gap: var(--space-lg); }
.text-center { text-align: center; }

.page-header {
  padding: calc(var(--nav-height) + var(--space-3xl)) 0 var(--space-3xl);
  text-align: center; position: relative; overflow: hidden;
  background-size: cover; background-position: center; background-repeat: no-repeat;
}
.page-header::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.9) 100%); z-index: 0; }
.page-header > * { position: relative; z-index: 1; }
.page-header p { max-width: 60ch; margin: 0 auto; font-size: var(--text-lg); }

@media (max-width: 1024px) { .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px) {
  .container { padding: 0 var(--space-md); }
  .section { padding: var(--space-2xl) 0; }
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .page-header { padding: calc(var(--nav-height) + var(--space-2xl)) 0 var(--space-xl); }
}