/* ============================================================
   About Page — Caast
   ============================================================ */

/* --- Hero --- */
.about-hero {
  padding: var(--space-20) 0 var(--space-16);
  background: linear-gradient(160deg, #F8F0FF 0%, #FFFFFF 60%);
  border-bottom: 1px solid var(--color-gray-100);
}
.about-hero__inner { max-width: 700px; }
.about-hero__badge {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: var(--fs-sm); font-weight: var(--fw-semibold);
  color: var(--color-secondary); letter-spacing: 0.04em;
  text-transform: uppercase; margin-bottom: var(--space-5);
}
.about-hero__badge .material-symbols-rounded { font-size: 18px; }
.about-hero__title {
  font-size: clamp(var(--fs-3xl), 5vw, var(--fs-5xl));
  font-weight: var(--fw-bold); color: var(--color-primary);
  letter-spacing: -0.03em; line-height: 1.1;
  margin-bottom: var(--space-6);
}
.about-hero__subtitle {
  font-size: var(--fs-lg); color: var(--color-gray-600);
  line-height: var(--lh-relaxed); max-width: 560px;
}

/* --- Sections --- */
.about-section { padding: var(--space-20) 0; }
.about-section--alt { background: var(--color-gray-50); }
.about-section__label {
  font-size: var(--fs-sm); font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--color-secondary); margin-bottom: var(--space-3);
}
.about-section__title {
  font-size: clamp(var(--fs-2xl), 3.5vw, var(--fs-3xl));
  font-weight: var(--fw-bold); color: var(--color-primary);
  letter-spacing: -0.02em; line-height: var(--lh-snug);
  margin-bottom: var(--space-6);
}
.about-section__body {
  font-size: var(--fs-base); color: var(--color-gray-600);
  line-height: var(--lh-relaxed); margin-bottom: var(--space-5);
}

/* --- Two-col layout --- */
.about-two-col {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-16);
  align-items: center;
}
.about-two-col__stats {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6);
}
.about-stat {
  background: var(--color-white); border: 1px solid var(--color-gray-100);
  border-radius: var(--radius-xl); padding: var(--space-6);
  text-align: center;
}
.about-stat__value {
  font-size: var(--fs-3xl); font-weight: var(--fw-bold);
  color: var(--color-secondary); letter-spacing: -0.03em;
  margin-bottom: var(--space-2);
}
.about-stat__label { font-size: var(--fs-sm); color: var(--color-gray-500); }

/* --- Values --- */
.about-values {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6);
}
.about-value-card {
  background: var(--color-white); border: 1px solid var(--color-gray-100);
  border-radius: var(--radius-xl); padding: var(--space-8);
}
.about-value-card__icon {
  font-size: 32px; color: var(--color-secondary);
  display: block; margin-bottom: var(--space-4);
}
.about-value-card__title {
  font-size: var(--fs-base); font-weight: var(--fw-bold);
  color: var(--color-primary); margin-bottom: var(--space-3);
}
.about-value-card__desc { font-size: var(--fs-sm); color: var(--color-gray-500); line-height: var(--lh-relaxed); }

/* --- Team --- */
.about-team { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); }
.about-team-card {
  display: flex; align-items: center; gap: var(--space-4);
  background: var(--color-white); border: 1px solid var(--color-gray-100);
  border-radius: var(--radius-xl); padding: var(--space-5);
}
.about-team-card__avatar {
  width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, #8B4DFF, #F000B9);
  display: flex; align-items: center; justify-content: center;
}
.about-team-card__avatar .material-symbols-rounded { font-size: 22px; color: white; }
.about-team-card__name { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--color-primary); }
.about-team-card__role { font-size: var(--fs-xs); color: var(--color-gray-500); margin-top: 2px; }

/* --- CTA --- */
.about-cta {
  padding: var(--space-24) 0;
  background: linear-gradient(135deg, var(--color-primary) 0%, #2D0060 100%);
}
.about-cta__inner { text-align: center; max-width: 600px; margin: 0 auto; }
.about-cta__title {
  font-size: clamp(var(--fs-2xl), 4vw, var(--fs-4xl));
  font-weight: var(--fw-bold); color: white;
  letter-spacing: -0.02em; margin-bottom: var(--space-4);
}
.about-cta__subtitle { font-size: var(--fs-base); color: rgba(255,255,255,0.7); line-height: var(--lh-relaxed); margin-bottom: var(--space-8); }
.about-cta__actions { display: flex; gap: var(--space-4); justify-content: center; flex-wrap: wrap; }

/* --- Responsive --- */
@media (max-width: 1024px) {
  .about-values { grid-template-columns: repeat(2, 1fr); }
  .about-team { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .about-two-col { grid-template-columns: 1fr; gap: var(--space-10); }
  .about-values { grid-template-columns: 1fr; }
  .about-team { grid-template-columns: 1fr; }
  .about-hero__title { font-size: var(--fs-3xl); }
}