/* ============================================
   About Page Styles
   ============================================ */

/* Reuse page-hero from features.css */
.page-hero {
  position: relative;
  min-height: 50vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gradient-hero);
  overflow: hidden;
}

.page-hero__overlay {
  position: absolute;
  inset: 0;
  background: url('../images/Links/Home-Welcome-1 - Edited.jpg') center center / cover no-repeat;
  opacity: 0.15;
}

.page-hero__content {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 700px;
  padding-top: var(--nav-height);
}

.page-hero__content h1 {
  font-size: var(--fs-h1);
  color: var(--color-white);
  margin: var(--space-md) 0;
}

.page-hero__content p {
  font-size: var(--fs-body-lg);
  color: rgba(255, 255, 255, 0.7);
  line-height: var(--line-height-relaxed);
}

/* ---- Mission Quote ---- */
.mission-quote {
  margin-bottom: var(--space-3xl);
}

.mission-quote__icon {
  width: 96px;
  height: 96px;
  margin: 0 auto var(--space-lg);
}

.mission-quote__text {
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  color: var(--color-dark);
  line-height: var(--line-height-normal);
  font-style: italic;
}

/* ---- Mission Body ---- */
.mission-body p {
  font-size: var(--fs-body-lg);
  color: var(--color-gray-600);
  line-height: var(--line-height-relaxed);
  margin-bottom: var(--space-md);
}

/* ---- Values ---- */
.value-icon {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-md);
  background: rgba(27, 153, 134, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-md);
}

/* ---- Technology Badges ---- */
.tech-badges {
  display: grid;
  grid-template-columns: repeat(2, auto);
  justify-content: center;
  gap: var(--space-md);
  margin-bottom: var(--space-3xl);
}

.tech-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-lg);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-full);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  color: rgba(255, 255, 255, 0.85);
}

/* ---- Technology Tiles ---- */
.tech-tiles {
  gap: var(--space-lg);
}

.tech-tile {
  background: rgba(255, 255, 255, 0.95);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  color: var(--color-dark);
}

.tech-tile__icon {
  display: block;
  margin-bottom: var(--space-md);
}

.tech-tile .tech-tile__title {
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  margin-bottom: var(--space-xs);
  color: var(--color-primary);
}

.tech-tile__desc {
  font-size: var(--fs-small);
  color: var(--color-gray-500);
  margin-bottom: var(--space-md);
}

.tech-tile__list {
  list-style: disc;
  padding-left: var(--space-lg);
  font-size: var(--fs-small);
  color: var(--color-gray-600);
  line-height: 1.7;
}

.tech-tile__list li {
  margin-bottom: var(--space-xs);
}

/* ---- Team Cards ---- */
.team-card {
  text-align: center;
}

.team-card__avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: rgba(27, 153, 134, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-md);
}

.team-card__name {
  font-size: var(--fs-h4);
  margin-bottom: var(--space-xs);
}

.team-card__role {
  font-size: var(--fs-small);
  color: var(--color-primary);
  font-weight: var(--fw-medium);
  margin-bottom: var(--space-sm);
}

.team-card__bio {
  font-size: var(--fs-small);
  color: var(--color-gray-500);
  line-height: var(--line-height-relaxed);
}

.team-note {
  margin-top: var(--space-xl);
  font-size: var(--fs-small);
  color: var(--color-gray-400);
  font-style: italic;
}