/* ================================================================
   LoopReset — About Page Styles
   ================================================================ */

.hero { padding:5rem 1.5rem 4rem; text-align:center; background:radial-gradient(ellipse 70% 50% at 50% 0%,rgba(155,139,244,.12) 0%,transparent 65%); border-bottom:1px solid var(--bd); }
.hero-inner { max-width:700px; margin:0 auto; }
.hero h1 { font-size:clamp(2rem,5vw,3.2rem); font-weight:900; color:#fff; line-height:1.1; margin-bottom:1.25rem; }
.hero-sub { font-size:1.05rem; color:var(--mt); line-height:1.8; }

.stats { background:var(--sf); border-bottom:1px solid var(--bd); padding:2.5rem 1.5rem; }
.stats-grid { max-width:var(--mx); margin:0 auto; display:grid; grid-template-columns:repeat(4,1fr); gap:2rem; text-align:center; }
.stat-num { font-size:2.2rem; font-weight:900; margin-bottom:.35rem; }
.stat-label { font-size:.82rem; color:var(--mt); line-height:1.4; }

.story { padding:5rem 1.5rem; }
.story-inner { max-width:760px; margin:0 auto; }
.story h2 { font-size:1.9rem; font-weight:900; color:#fff; line-height:1.2; margin-bottom:1.5rem; }
.story p { font-size:1rem; color:var(--mt); line-height:1.9; margin-bottom:1.25rem; }
.story p strong { color:var(--tx); }
.story blockquote { border-left:3px solid var(--pr); padding:1rem 1.5rem; margin:2rem 0; background:var(--sf); border-radius:0 8px 8px 0; }
.story blockquote p { font-size:1.05rem; font-style:italic; color:var(--tx); margin:0; }

.timeline { background:var(--sf); padding:5rem 1.5rem; }
.timeline-inner { max-width:var(--mx); margin:0 auto; }
.timeline-inner h2 { font-size:1.9rem; font-weight:900; color:#fff; margin-bottom:3rem; text-align:center; }
.tl { position:relative; padding-left:3rem; }
.tl::before { content:''; position:absolute; left:10px; top:0; bottom:0; width:2px; background:var(--grad); }
.tl-item { position:relative; margin-bottom:2.5rem; }
.tl-item:last-child { margin-bottom:0; }
.tl-dot { position:absolute; left:-2.6rem; top:.3rem; width:22px; height:22px; border-radius:50%; background:var(--grad); display:flex; align-items:center; justify-content:center; font-size:.7rem; font-weight:800; color:#fff; box-shadow:0 0 12px rgba(155,139,244,.4); }
.tl-year { font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--pr); margin-bottom:.4rem; }
.tl-title { font-size:1.05rem; font-weight:800; color:#fff; margin-bottom:.4rem; }
.tl-desc { font-size:.9rem; color:var(--mt); line-height:1.7; }

.values { padding:5rem 1.5rem; }
.values-inner { max-width:var(--mx); margin:0 auto; }
.values-inner h2 { font-size:1.9rem; font-weight:900; color:#fff; margin-bottom:.75rem; }
.values-inner .sub { font-size:1rem; color:var(--mt); margin-bottom:3rem; }
.values-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; }
.val-card { background:var(--sf); border:1px solid var(--bd); border-radius:var(--rd); padding:1.75rem; transition:border-color .2s; }
.val-card:hover { border-color:var(--pr); }
.val-icon { font-size:1.75rem; margin-bottom:1rem; }
.val-title { font-size:1rem; font-weight:800; color:#fff; margin-bottom:.5rem; }
.val-desc { font-size:.875rem; color:var(--mt); line-height:1.7; }

.roadmap { background:var(--sf); padding:5rem 1.5rem; }
.roadmap-inner { max-width:var(--mx); margin:0 auto; }
.roadmap-inner h2 { font-size:1.9rem; font-weight:900; color:#fff; margin-bottom:.75rem; }
.roadmap-inner .sub { font-size:1rem; color:var(--mt); margin-bottom:3rem; }
.roadmap-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1.25rem; }
.rm-card { background:var(--sf2); border:1px solid var(--bd); border-radius:var(--rd); padding:1.5rem; }
.rm-card.live { border-color:rgba(155,139,244,.3); background:rgba(155,139,244,.05); }
.rm-status { display:inline-block; font-size:.65rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; border-radius:50px; padding:.25rem .75rem; margin-bottom:1rem; }
.rm-status.live  { background:var(--prl);              color:var(--pr); }
.rm-status.soon  { background:rgba(244,114,182,.12);   color:var(--ac); }
.rm-status.dev   { background:rgba(245,158,11,.1);     color:#F59E0B; }
.rm-status.plan  { background:rgba(148,163,184,.1);    color:var(--mt); }
.rm-title { font-size:1rem; font-weight:800; color:#fff; margin-bottom:.4rem; }
.rm-desc { font-size:.82rem; color:var(--mt); line-height:1.6; }

.cta-section { padding:5rem 1.5rem; text-align:center; background:radial-gradient(ellipse 60% 50% at 50% 50%,rgba(155,139,244,.08) 0%,transparent 70%); }
.cta-section h2 { font-size:2.2rem; font-weight:900; color:#fff; margin-bottom:1rem; }
.cta-section p { font-size:1rem; color:var(--mt); margin-bottom:2rem; }

@media (max-width:960px) {
  .stats-grid { grid-template-columns:1fr 1fr; }
  .values-grid { grid-template-columns:1fr 1fr; }
  .roadmap-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:640px) {
  .stats-grid { grid-template-columns:1fr 1fr; gap:1.25rem; }
  .values-grid { grid-template-columns:1fr; }
  .roadmap-grid { grid-template-columns:1fr; }
}