/* ============================================================
   HEROZ — About Page Styles
   ============================================================ */

/* Mission grid */
.about-mission-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 72px; align-items: start;
}
.about-mission-grid p {
  color: var(--gray-600); margin-bottom: 16px; font-size: 0.97rem; line-height: 1.75;
}

/* Values cards */
.about-values {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.value-card {
  background: var(--white); border-radius: var(--radius-lg);
  border: 1px solid var(--gray-200); padding: 24px;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition);
}
.value-card:hover { border-color: var(--orange); box-shadow: var(--shadow-md); transform: translateY(-4px); }
.value-icon { font-size: 2rem; display: block; margin-bottom: 12px; }
.value-card h3 {
  font-family: var(--font-display); font-size: 1.05rem;
  font-weight: 800; color: var(--blue); margin-bottom: 8px;
}
.value-card p { font-size: 0.85rem; color: var(--gray-600); line-height: 1.65; }

/* Why grid */
.why-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 24px; margin-top: 48px;
}
.why-item {
  background: var(--white); border-radius: var(--radius-lg);
  padding: 32px 28px; border: 1px solid var(--gray-200);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition);
}
.why-item:hover { border-color: var(--blue); box-shadow: var(--shadow-md); transform: translateY(-4px); }
.why-num {
  font-family: var(--font-display); font-size: 3rem;
  font-weight: 900; color: var(--orange-light);
  line-height: 1; margin-bottom: 12px;
  -webkit-text-stroke: 2px var(--orange);
}
.why-item h3 {
  font-family: var(--font-display); font-size: 1.1rem;
  font-weight: 800; color: var(--blue); margin-bottom: 10px;
}
.why-item p { font-size: 0.88rem; color: var(--gray-600); line-height: 1.7; }

/* Responsive */
@media (max-width: 900px) {
  .about-mission-grid { grid-template-columns: 1fr; gap: 40px; }
  .why-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .about-values { grid-template-columns: 1fr; }
  .why-grid { grid-template-columns: 1fr; }
}