/**
 * 布局系统
 */
.container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--space-6); }
.section { padding-block: var(--space-24); }
.section--alt { background-color: var(--color-bg-alt); }
.section--dark { background-color: var(--color-bg-dark); color: #fff; }
.section__header { text-align: center; max-width: 640px; margin-inline: auto; margin-bottom: var(--space-12); }
.section__label { display: inline-block; font-size: var(--text-sm); font-weight: 600; color: var(--color-primary); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: var(--space-3); }
.section--dark .section__label { color: var(--color-accent); }
.section__title { font-size: var(--text-3xl); margin-bottom: var(--space-4); }
.section__desc { font-size: var(--text-lg); color: var(--color-text-secondary); }
.section__desc--left { text-align: left; margin: 0; }
.section--dark .section__desc { color: var(--color-text-muted); }
.grid { display: grid; gap: var(--space-6); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.page-hero { padding-top: calc(var(--header-height) + var(--space-16)); padding-bottom: var(--space-16); background: var(--color-bg-alt); }
.page-hero__title { font-size: var(--text-4xl); margin-bottom: var(--space-4); }
.page-hero__desc { font-size: var(--text-lg); color: var(--color-text-secondary); max-width: 720px; }
.page-content { padding-block: var(--space-16); }
.page-content h2 { font-size: var(--text-2xl); margin: var(--space-8) 0 var(--space-4); }
.page-content p, .page-content li { color: var(--color-text-secondary); margin-bottom: var(--space-4); }
.page-content ul { list-style: disc; padding-left: var(--space-6); margin-bottom: var(--space-6); }
@media (max-width: 1024px) { .grid--4, .grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px) {
  .section { padding-block: var(--space-16); }
  .section__title { font-size: var(--text-2xl); }
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .page-hero__title { font-size: var(--text-3xl); }
}