/* =====================================================
   P77 App — About page
   ===================================================== */
.about-quote {
  text-align: center; padding-block: var(--sp-3xl);
}
.about-quote blockquote {
  font-family: var(--font-display); font-weight: var(--fw-bold);
  font-size: clamp(1.8rem, 4.5vw, 3rem); line-height: 1.2;
  color: var(--clr-accent-gold); max-width: 20ch; margin-inline: auto;
  text-shadow: var(--shadow-glow);
}
.about-quote cite { display: block; margin-top: var(--sp-md); color: var(--clr-text-muted); font-style: normal; font-size: var(--fs-sm); font-family: var(--font-mono); }

.prose { max-width: 68ch; margin-inline: auto; }
.prose h2 { margin-bottom: var(--sp-md); }
.prose p { color: var(--clr-text-secondary); }

/* stats strip */
.stats-strip {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-lg);
  text-align: center;
}
.stat { padding: var(--sp-lg); border: 1px solid var(--clr-border); border-radius: var(--radius-md); background: var(--clr-bg-card); }
.stat__num {
  font-family: var(--font-display); font-weight: var(--fw-bold);
  font-size: var(--fs-3xl); color: var(--clr-accent-gold); line-height: 1;
}
.stat__label { font-size: var(--fs-sm); color: var(--clr-text-secondary); margin-top: var(--sp-xs); }

/* values grid */
.values-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-lg); }
.value-card { padding: var(--sp-xl); text-align: center; }
.value-card .ico { font-size: 2.4rem; display: block; margin-bottom: var(--sp-md); }
.value-card h3 { margin-bottom: var(--sp-sm); }
.value-card p { font-size: var(--fs-sm); color: var(--clr-text-secondary); }

.center-cta { text-align: center; margin-top: var(--sp-2xl); }

@media (min-width: 768px) {
  .stats-strip { grid-template-columns: repeat(4, 1fr); }
  .values-grid { grid-template-columns: repeat(3, 1fr); }
}