/* OneRouter — About Page Styles */
/* Depends on global.css (reset, buttons, animations) + header.css + footer.css */

body { background: #fafaf9; }

/* Hero */
.about-hero { padding: 7rem 2rem 5rem; max-width: 72rem; margin: 0 auto; }
.about-hero__eyebrow { font-size: .7rem; font-weight: 500; letter-spacing: .15em; text-transform: uppercase; color: #8b8b8b; margin-bottom: 2rem; }
.about-hero h1 { font-size: clamp(2.5rem,5.5vw,4rem); font-weight: 600; line-height: 1.08; letter-spacing: -.03em; margin: 0; max-width: 800px; }
.about-hero h1 em { font-style: italic; font-weight: 300; }
.about-hero__text { font-size: 1.1rem; line-height: 1.75; color: #5c5c5c; max-width: 560px; margin: 2rem 0 0; }

/* Section */
.about-section { padding: 6rem 2rem; }
.about-section--warm { background: #f5f4f1; }
.about-section__inner { max-width: 72rem; margin: 0 auto; }
.about-section__label { font-size: .7rem; font-weight: 500; letter-spacing: .15em; text-transform: uppercase; color: #8b8b8b; margin-bottom: 1rem; }
.about-section__title { font-size: clamp(1.75rem,3.5vw,2.5rem); font-weight: 600; line-height: 1.2; letter-spacing: -.025em; margin: 0 0 1.5rem; }
.about-section__desc { font-size: 1rem; line-height: 1.75; color: #5c5c5c; max-width: 600px; margin: 0; }

/* Story */
.about-story { display: grid; grid-template-columns: 1fr; gap: 4rem; margin-top: 3rem; }
.about-story__block h3 { font-size: 1.1rem; font-weight: 500; margin: 0 0 .75rem; letter-spacing: -.01em; }
.about-story__block p { font-size: .9rem; line-height: 1.75; color: #5c5c5c; margin: 0; }
.about-story__tag { display: inline-block; font-size: .65rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: #8b8b8b; background: #f0f0ee; padding: .25rem .625rem; border-radius: .375rem; margin-bottom: 1rem; }

/* Cards */
.about-cards { display: grid; grid-template-columns: 1fr; gap: 1.5rem; margin-top: 3rem; }
.about-card { background: #fff; border: 1px solid #eaeae6; border-radius: 1rem; padding: 2rem 1.75rem; transition: box-shadow .3s,border-color .3s; }
.about-card:hover { border-color: #d5d5cf; box-shadow: 0 8px 30px rgba(0,0,0,.04); }
.about-card__num { font-size: .65rem; font-weight: 600; letter-spacing: .1em; color: #b0b0aa; margin-bottom: 1.25rem; }
.about-card__icon { width: 2.75rem; height: 2.75rem; border-radius: .75rem; display: flex; align-items: center; justify-content: center; margin-bottom: 1.25rem; }
.about-card__icon svg { width: 1.3rem; height: 1.3rem; stroke: currentColor; }
.about-card h3 { font-size: .95rem; font-weight: 500; margin: 0 0 .5rem; letter-spacing: -.01em; }
.about-card p { font-size: .85rem; line-height: 1.65; color: #6b6b6b; margin: 0; }

/* Stats */
.about-stats { display: grid; grid-template-columns: 1fr; gap: 3rem; text-align: center; margin-top: 2rem; }
.about-stat__value { font-size: clamp(2.5rem,5vw,3.5rem); font-weight: 600; letter-spacing: -.03em; line-height: 1; margin-bottom: .5rem; font-variant-numeric: tabular-nums; }
.about-stat__label { font-size: .85rem; color: #8b8b8b; max-width: 200px; margin: 0 auto; }

/* Team */
.about-team { display: grid; grid-template-columns: repeat(2,1fr); gap: 2.5rem 2rem; margin-top: 3rem; }
.about-team__card { text-align: center; }
.about-team__avatar { width: 88px; height: 88px; border-radius: 50%; background: #e8e6e0; margin: 0 auto 1.25rem; overflow: hidden; transition: transform .3s; }
.about-team__card:hover .about-team__avatar { transform: scale(1.06); }
.about-team__avatar img { width: 100%; height: 100%; object-fit: cover; }
.about-team__name { font-size: .95rem; font-weight: 500; margin-bottom: .25rem; }
.about-team__role { font-size: .8rem; color: #8b8b8b; }

/* CTA */
.about-cta { text-align: center; padding: 6rem 2rem; max-width: 600px; margin: 0 auto; }
.about-cta h2 { font-size: clamp(1.75rem,3.5vw,2.5rem); font-weight: 600; letter-spacing: -.025em; margin: 0 0 1rem; }
.about-cta p { font-size: 1rem; color: #5c5c5c; margin: 0 0 2rem; line-height: 1.7; }
.about-cta__btn { display: inline-flex; align-items: center; gap: .5rem; background: #1c1c1c; color: #fff; height: 3rem; padding: 0 1.75rem; border-radius: .75rem; font-size: .875rem; font-weight: 600; text-decoration: none; transition: opacity .15s; }
.about-cta__btn:hover { opacity: .85; }
.about-cta__btn svg { width: 1rem; height: 1rem; }

/* Dark mode */
.dark body { background: #1a1a1a; color: #e5e5e0; }
.dark .about-section--warm { background: #1e1e1e; }
.dark .about-section__label,.dark .about-section__desc,.dark .about-hero__eyebrow,.dark .about-stat__label,.dark .about-team__role,.dark .about-card__num,.dark .about-story__tag { color: #7a7a72; }
.dark .about-section__desc,.dark .about-hero__text,.dark .about-story__block p,.dark .about-card p,.dark .about-cta p { color: #9b9b94; }
.dark .about-story__tag { background: rgba(255,255,255,.06); }
.dark .about-card { background: #222; border-color: rgba(255,255,255,.06); }
.dark .about-card:hover { border-color: rgba(255,255,255,.1); box-shadow: 0 8px 30px rgba(0,0,0,.2); }
.dark .about-card__icon { opacity: .85; }
.dark .about-team__avatar { background: #333; }
.dark .about-cta__btn { background: #f5f5f0; color: #1a1a1a; }

/* Page-specific animations — override global.css paused state so they animate on about page */
.about-hero .anim-fade-up,.about-section .anim-fade-up,.about-cta .anim-fade-up,
.about-hero .anim-scale-in,.about-section .anim-scale-in,.about-cta .anim-scale-in { animation-play-state: paused; opacity: 0; }
.about-hero .anim-fade-up.visible,.about-section .anim-fade-up.visible,.about-cta .anim-fade-up.visible,
.about-hero .anim-scale-in.visible,.about-section .anim-scale-in.visible,.about-cta .anim-scale-in.visible { animation-play-state: running; }

@media (min-width: 640px) {
  .about-cards { grid-template-columns: repeat(2,1fr); }
  .about-stats { grid-template-columns: repeat(3,1fr); }
  .about-team { grid-template-columns: repeat(4,1fr); }
}
@media (min-width: 768px) {
  .about-hero { padding: 8rem 2rem 6rem; }
  .about-section { padding: 8rem 2rem; }
  .about-story { grid-template-columns: 1fr 1fr; gap: 6rem; }
  .about-cards { grid-template-columns: repeat(3,1fr); }
  .about-cta { padding: 8rem 2rem; }
}