/* About Page Styles */

.page-header { 
  background: linear-gradient(135deg, #111827 0%, #1F2937 100%); 
  color: var(--white); 
  padding: 60px 0; 
}

.page-header h1 { 
  font-size: clamp(28px, 3vw, 42px); 
  margin-bottom: 16px; 
}

.page-header p { 
  font-size: 18px; 
  color: #D1D5DB; 
}

.about-section { 
  margin-bottom: 60px; 
}

.about-section h2 { 
  font-size: 28px; 
  font-weight: 700; 
  color: var(--ink); 
  margin-bottom: 16px; 
}

.about-section p { 
  font-size: 15px; 
  line-height: 1.8; 
  color: var(--ink-light); 
  margin-bottom: 12px; 
}

.content-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 40px;
  margin-bottom: 40px;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 24px;
}

.feature-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
  text-align: center;
  transition: all 0.3s ease;
}

.feature-card:hover {
  box-shadow: 0 8px 24px rgba(0, 128, 128, 0.1);
  transform: translateY(-4px);
}

.feature-icon {
  font-size: 48px;
  margin-bottom: 16px;
  color: var(--im-teal);
}

.feature-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 8px;
}

.feature-description {
  font-size: 14px;
  color: var(--ink-light);
  line-height: 1.6;
}

@media (max-width: 920px) {
  .features-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .features-grid {
    grid-template-columns: 1fr;
  }
  .content-card {
    padding: 24px;
  }
}