.about-hero {
      background: var(--gradient-hero);
      padding: calc(var(--header-height) + var(--space-16)) 0 var(--space-16);
      text-align: center;
    }

    .about-hero h1 {
      color: var(--color-white);
      margin-bottom: var(--space-4);
    }

    .about-hero p {
      color: rgba(255, 255, 255, 0.9);
      font-size: var(--text-xl);
      max-width: 700px;
      margin: 0 auto;
    }

    .about-content {
      padding: var(--space-20) 0;
    }

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

    .about-image {
      background: var(--color-gray-100);
      border-radius: var(--radius-xl);
      height: 400px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--color-gray-400);
    }

    .values-section {
      background: var(--color-gray-50);
      padding: var(--space-20) 0;
    }

    .values-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: var(--space-8);
    }

    .value-card {
      text-align: center;
      padding: var(--space-8);
    }

    .value-icon {
      width: 64px;
      height: 64px;
      background: var(--color-primary-50);
      color: var(--color-primary);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto var(--space-4);
    }

    .team-section {
      padding: var(--space-20) 0;
    }

    @media (max-width: 768px) {
      .about-grid,
      .values-grid {
        grid-template-columns: 1fr;
      }
    }