.about-hero {
  padding:
    var(--space-12)
    0
    var(--space-10);
}

.about-hero-inner {
  max-width: 860px;
}

.about-hero .heading-xl {
  margin-bottom: var(--space-5);
}

.about-grid {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(320px, 0.8fr);

  gap: var(--space-12);

  align-items: start;
}

.about-copy {
  display: flex;

  flex-direction: column;

  gap: var(--space-6);
}

.about-copy p {
  color: var(--text-muted);

  font-size: var(--font-md);

  line-height: var(--leading-relaxed);
}

.about-copy strong {
  color: var(--text-primary);

  font-weight: var(--weight-medium);
}

.about-side {
  display: flex;

  flex-direction: column;

  gap: var(--space-4);
}

.about-fact {
  padding: var(--space-5);

  border: 1px solid var(--border-default);

  border-radius: var(--radius-md);

  background: var(--surface-1);
}

.about-fact-label {
  display: block;

  margin-bottom: var(--space-3);

  color: var(--text-subtle);

  font-size: 10px;

  font-weight: var(--weight-semibold);

  text-transform: uppercase;

  letter-spacing: var(--tracking-wide);
}

.about-fact-value {
  color: var(--text-primary);

  font-size: var(--font-lg);

  font-weight: var(--weight-semibold);

  letter-spacing: var(--tracking-tight);
}

.about-fact-description {
  margin-top: var(--space-2);

  color: var(--text-muted);

  font-size: var(--font-xs);

  line-height: var(--leading-relaxed);
}

.principles-grid {
  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap: var(--space-3);
}

.principle-card {
  min-height: 250px;

  padding: var(--space-7);

  border: 1px solid var(--border-default);

  border-radius: var(--radius-lg);

  background: var(--surface-1);
}

.principle-number {
  margin-bottom: var(--space-10);

  color: var(--text-subtle);

  font-family: var(--font-mono);

  font-size: var(--font-xs);
}

.principle-card h3 {
  margin-bottom: var(--space-3);

  color: var(--text-primary);

  font-size: var(--font-lg);

  font-weight: var(--weight-semibold);
}

.principle-card p {
  color: var(--text-muted);

  font-size: var(--font-sm);

  line-height: var(--leading-relaxed);
}

.stack-grid {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: var(--space-3);

  margin-top: var(--space-8);
}

.stack-card {
  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: var(--space-5);

  padding: var(--space-5);

  border: 1px solid var(--border-default);

  border-radius: var(--radius-md);

  background: var(--surface-1);
}

.stack-card-main {
  min-width: 0;
}

.stack-card strong {
  display: block;

  margin-bottom: 4px;

  color: var(--text-primary);

  font-size: var(--font-sm);

  font-weight: var(--weight-medium);
}

.stack-card span {
  color: var(--text-muted);

  font-size: var(--font-xs);
}

.stack-tag {
  flex-shrink: 0;

  padding:
    5px
    8px;

  border: 1px solid var(--border-default);

  border-radius: var(--radius-full);

  background: var(--surface-2);

  color: var(--text-subtle);

  font-family: var(--font-mono);

  font-size: 10px;
}

.about-timeline {
  display: flex;

  flex-direction: column;

  margin-top: var(--space-8);

  border-top: 1px solid var(--border-default);
}

.timeline-item {
  display: grid;

  grid-template-columns:
    120px
    minmax(0, 1fr);

  gap: var(--space-6);

  padding:
    var(--space-6)
    0;

  border-bottom: 1px solid var(--border-default);
}

.timeline-date {
  color: var(--text-subtle);

  font-family: var(--font-mono);

  font-size: var(--font-xs);
}

.timeline-content h3 {
  margin-bottom: var(--space-2);

  color: var(--text-primary);

  font-size: var(--font-md);

  font-weight: var(--weight-medium);
}

.timeline-content p {
  color: var(--text-muted);

  font-size: var(--font-sm);

  line-height: var(--leading-relaxed);
}

.about-cta {
  padding: var(--space-10);

  border: 1px solid var(--border-default);

  border-radius: var(--radius-xl);

  background: var(--surface-1);

  text-align: center;
}

.about-cta h2 {
  margin-bottom: var(--space-4);
}

.about-cta p {
  max-width: 580px;

  margin:
    0
    auto
    var(--space-7);

  color: var(--text-muted);

  font-size: var(--font-md);

  line-height: var(--leading-relaxed);
}

.about-cta-actions {
  display: flex;

  align-items: center;

  justify-content: center;

  flex-wrap: wrap;

  gap: var(--space-3);
}

@media (max-width: 900px) {
  .about-grid {
    grid-template-columns: 1fr;

    gap: var(--space-8);
  }

  .principles-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .principles-grid,
  .stack-grid {
    grid-template-columns: 1fr;
  }

  .timeline-item {
    grid-template-columns: 1fr;

    gap: var(--space-2);
  }

  .about-cta {
    padding:
      var(--space-8)
      var(--space-5);
  }
}