/* ===== page-about.css — 关于我们页 ===== */

.about-intro { display: grid; grid-template-columns: 1.5fr 1fr; gap: var(--space-3xl); align-items: center; }
.about-intro__text p { color: var(--text-secondary); line-height: 1.9; margin-top: var(--space-lg); font-size: var(--text-base); }
.about-visual-box {
  background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-xl);
  padding: var(--space-3xl); text-align: center;
  position: relative; overflow: hidden;
}
.about-visual-box::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: var(--gradient-card-border); opacity: 0.4;
}
.about-visual-box > * { position: relative; z-index: 1; }
.about-visual-box__icon { font-size: 3rem; margin-bottom: var(--space-md); }
.about-visual-box__number { font-size: clamp(2.5rem, 4vw, 4rem); font-weight: 800; background: var(--gradient-primary); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; line-height: 1.1; }
.about-visual-box__label { color: var(--text-secondary); margin-top: var(--space-sm); font-size: var(--text-sm); letter-spacing: 0.02em; }

.values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-xl); margin-top: var(--space-3xl); }
.value-card {
  background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-xl);
  padding: var(--space-2xl); text-align: center; transition: all var(--transition-base);
  position: relative; overflow: hidden;
}
.value-card::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: var(--gradient-card-border); opacity: 0; transition: opacity var(--transition-base);
}
.value-card:hover { transform: translateY(-6px); border-color: var(--border-color-hover); box-shadow: var(--shadow-xl); }
.value-card:hover::before { opacity: 1; }
.value-card > * { position: relative; z-index: 1; }
.value-card__icon { font-size: 2.8rem; margin-bottom: var(--space-lg); }
.value-card__title { font-size: var(--text-lg); font-weight: 700; color: var(--text-primary); margin-bottom: var(--space-sm); }
.value-card__desc { font-size: var(--text-sm); color: var(--text-secondary); line-height: 1.8; }

.timeline-wrapper { max-width: 700px; margin: var(--space-3xl) auto 0; }
.timeline-item { position: relative; margin-bottom: var(--space-2xl); padding-left: 56px; padding-bottom: var(--space-lg); border-bottom: 1px solid rgba(255,255,255,0.04); }
.timeline-item:last-child { margin-bottom: 0; border-bottom: none; padding-bottom: 0; }
.timeline-item::before { content: ''; position: absolute; left: 0; top: 4px; width: 24px; height: 24px; border-radius: 50%; background: var(--gradient-primary); opacity: 0.15; }
.timeline-item::after { content: ''; position: absolute; left: 7px; top: 11px; width: 10px; height: 10px; border-radius: 50%; background: var(--color-primary); box-shadow: 0 0 16px rgba(108,92,231,0.4); }
.timeline-item__year { font-size: var(--text-2xl); font-weight: 800; background: var(--gradient-primary); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.timeline-item__title { font-size: var(--text-lg); font-weight: 700; color: var(--text-primary); margin: var(--space-xs) 0; }
.timeline-item__content { font-size: var(--text-base); color: var(--text-secondary); line-height: 1.8; }

.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-xl); margin-top: var(--space-3xl); }
.team-card {
  background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-xl);
  padding: var(--space-2xl); text-align: center; transition: all var(--transition-base);
  position: relative; overflow: hidden;
}
.team-card::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: var(--gradient-card-border); opacity: 0; transition: opacity var(--transition-base);
}
.team-card:hover { transform: translateY(-6px); border-color: var(--border-color-hover); box-shadow: var(--shadow-lg); }
.team-card:hover::before { opacity: 1; }
.team-card > * { position: relative; z-index: 1; }
.team-card__avatar { width: 88px; height: 88px; border-radius: 50%; margin: 0 auto var(--space-lg); display: flex; align-items: center; justify-content: center; font-size: 1.6rem; font-weight: 800; color: #fff; box-shadow: var(--shadow-md); }
.team-card__name { font-size: var(--text-lg); font-weight: 700; color: var(--text-primary); margin-bottom: var(--space-xs); }
.team-card__role { font-size: var(--text-sm); color: var(--color-primary-light); margin-bottom: var(--space-sm); font-weight: 500; }
.team-card__desc { font-size: var(--text-xs); color: var(--text-muted); line-height: 1.6; }

@media (max-width: 768px) {
  .about-intro { grid-template-columns: 1fr; gap: var(--space-2xl); }
  .about-visual-box { padding: var(--space-2xl); }
  .about-visual-box__number { font-size: 2.5rem; }
  .values-grid { grid-template-columns: 1fr; }
  .value-card { padding: var(--space-xl); }
  .timeline-item { padding-left: 44px; }
  .timeline-item::before { width: 18px; height: 18px; left: 2px; }
  .timeline-item::after { left: 7px; top: 8px; width: 8px; height: 8px; }
  .team-grid { grid-template-columns: 1fr 1fr; gap: var(--space-md); }
  .team-card { padding: var(--space-xl); }
  .team-card__avatar { width: 72px; height: 72px; font-size: 1.3rem; }
}
@media (max-width: 480px) {
  .team-grid { grid-template-columns: 1fr; }
}