/* ==========================================================================
   About Us
   ========================================================================== */

.about-page { padding-bottom: var(--space-16); }

.about-hero {
  padding: var(--space-16) 0 var(--space-12);
  background: radial-gradient(ellipse at 20% 0%, rgba(108, 92, 231, 0.1) 0%, transparent 50%),
              var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}

.about-hero-container { display: flex; flex-direction: column; gap: var(--space-4); }
.about-hero-title { max-width: 24rem; }
.about-hero-subtitle { max-width: 40rem; font-size: var(--font-size-lg); }
.about-hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.about-hero-meta { font-size: var(--font-size-xs); max-width: 40rem; }

.about-section { padding: var(--space-12) 0; }
.about-section-container { max-width: 56rem; margin: 0 auto; }
.about-section h2 { margin-bottom: var(--space-4); }

.about-two-column {
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.about-section-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
  align-items: center;
}

.about-list {
  margin: 0;
  padding-left: var(--space-4);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}
.about-list li { margin-bottom: var(--space-2); }

.about-media { background-color: var(--color-bg); }

.about-media-figure {
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}
.about-media-figure img { width: 100%; display: block; }
.about-media-figure figcaption {
  padding: var(--space-3) var(--space-4);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  background: var(--color-surface-alt);
}

.about-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-4);
}

.about-selection-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-6);
}
.about-selection-step h3 { font-size: var(--font-size-lg); margin-bottom: var(--space-2); }
.about-selection-step p { font-size: var(--font-size-sm); }
.about-selection-meta { margin-top: var(--space-6); font-size: var(--font-size-sm); }

.about-two-column-text {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
}

.about-cta {
  background: radial-gradient(ellipse at right, rgba(108, 92, 231, 0.08) 0%, transparent 50%),
              var(--color-surface);
  border-top: 1px solid var(--color-border);
}
.about-cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
}
.about-cta-text p { max-width: 32rem; }
.about-cta-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }

@media (max-width: 768px) {
  .about-hero { padding: var(--space-10) 0 var(--space-8); }
  .about-section { padding: var(--space-8) 0; }
  .about-section-grid, .about-two-column-text { grid-template-columns: 1fr; }
  .about-cta-inner { flex-direction: column; align-items: flex-start; }
}