/* ═══════════════════════════════════════════
   ABOUT PAGE STYLES
═══════════════════════════════════════════ */

.about-page {
  min-height:100vh;
  background:var(--bg);
}

.about-hero {
  text-align:center;
  padding:80px 64px 60px;
}

.about-hero h1 {
  font-size:clamp(2.4rem,5vw,4rem);
  font-weight:900; 
  margin-bottom:16px; 
  letter-spacing:-1px;
}

.about-hero p {
  font-size:18px; 
  color:#aaa; 
  max-width:640px; 
  margin:0 auto;
}

.about-story {
  padding:60px 64px;
  display:grid; 
  grid-template-columns:1.2fr 1fr;
  gap:80px;
  max-width:1200px; 
  margin:0 auto;
  align-items:center;
}

.story-content h2 {
  font-size:32px; 
  font-weight:900; 
  margin-bottom:24px;
}

.story-content p {
  color:#aaa; 
  line-height:1.8; 
  margin-bottom:16px; 
  font-size:16px;
}

.story-stats {
  display:grid; 
  grid-template-columns:1fr 1fr; 
  gap:24px;
}

.story-stats .stat {
  background:rgba(41,171,226,0.08);
  padding:24px; 
  border-radius:var(--r-lg);
  border:1px solid rgba(41,171,226,0.2);
  text-align:center;
}

.story-stats .stat h3 {
  font-size:36px; 
  font-weight:900; 
  color:var(--blue);
  margin-bottom:8px;
}

.story-stats .stat p {
  color:#888; 
  font-size:14px;
}

.about-values {
  display:grid; 
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:32px;
  padding:60px 64px;
  max-width:1200px; 
  margin:0 auto;
}

.value-card {
  background:var(--card-bg);
  padding:32px;
  border-radius:var(--r-lg);
  border:1px solid rgba(255,255,255,0.08);
  text-align:center;
  transition:all var(--t);
}

.value-card:hover {
  border-color:var(--blue);
  box-shadow:0 8px 32px rgba(41,171,226,0.1);
  transform:translateY(-4px);
}

.value-card .icon-lg {
  color:var(--blue);
  margin-bottom:16px;
}

.value-card h3 {
  font-size:18px; 
  font-weight:700; 
  margin-bottom:12px;
}

.value-card p {
  color:#888; 
  font-size:14px; 
  line-height:1.6;
}

.why-us-section {
  padding:60px 64px;
  background:rgba(41,171,226,0.03);
  max-width:1200px; 
  margin:0 auto;
}

.why-us-section h2 {
  font-size:32px; 
  font-weight:900; 
  margin-bottom:48px; 
  text-align:center;
}

.why-grid {
  display:grid; 
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:32px;
}

.why-item {
  background:var(--card-bg);
  padding:28px;
  border-radius:var(--r-lg);
  border:1px solid rgba(255,255,255,0.08);
  text-align:center;
  transition:all var(--t);
}

.why-item:hover {
  border-color:var(--blue);
  box-shadow:0 8px 32px rgba(41,171,226,0.15);
  transform:translateY(-4px);
}

.why-icon {
  display:flex; 
  justify-content:center; 
  margin-bottom:16px;
  color:var(--blue);
}

.why-item h4 {
  font-size:16px; 
  font-weight:700; 
  margin-bottom:12px;
}

.why-item p {
  color:#888; 
  font-size:14px; 
  line-height:1.6;
}

.team-section {
  padding:60px 64px;
  max-width:1200px; 
  margin:0 auto;
}

.team-section h2 {
  font-size:32px; 
  font-weight:900; 
  margin-bottom:48px; 
  text-align:center;
}

.team-grid {
  display:grid; 
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:40px;
}

.team-member {
  background:var(--card-bg);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:var(--r-lg);
  padding:24px;
  text-align:center;
  transition:all var(--t);
}

.team-member:hover {
  border-color:#1e3a8a;
  box-shadow:0 8px 32px rgba(30,58,138,0.2);
  transform:translateY(-4px);
}

.member-image {
  width:100%; 
  aspect-ratio:1;
  border-radius:50%;
  margin-bottom:20px;
  overflow:hidden;
  border:3px solid rgba(255,161,21,0.3);
}

.member-image img {
  width:100%; 
  height:100%; 
  object-fit:cover;
}

.team-member h3 {
  font-size:18px; 
  font-weight:700; 
  margin-bottom:4px;
}

.team-member .role {
  color:#498cd8; 
  font-size:13px; 
  font-weight:600;
  text-transform:uppercase; 
  font-style: oblique;
  letter-spacing:0.5px;
  margin-bottom:12px;
}

.team-member .bio {
  color:#888; 
  font-size:14px; 
  line-height:1.6; 
  margin-bottom:16px;
}

.social {
  display:flex; 
  gap:12px; 
  justify-content:center;
}

.social a {
  display:flex; 
  align-items:center; 
  justify-content:center;
  width:40px; 
  height:40px;
  background:rgba(255,161,21,0.1);
  border-radius:50%;
  color:var(--orange);
  text-decoration:none;
  transition:all var(--t);
}

.social a:hover {
  background:var(--orange);
  color:#fff;
  transform:scale(1.1);
}

/* ═══════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════ */
@media (max-width:768px) {
  .about-story {
    grid-template-columns:1fr;
    gap:40px;
    padding:40px 24px;
  }

  .story-stats { 
    grid-template-columns:1fr; 
  }

  .about-values { 
    padding:60px 24px; 
  }

  .why-us-section { 
    padding:60px 24px; 
  }

  .team-section { 
    padding:60px 24px; 
  }
}