/* ════════════════════════════════════════
   ABOUT.CSS — About Us Section
════════════════════════════════════════ */

#about { background: var(--bg); }

.about-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 4rem; align-items: center; margin-top: 3rem;
}

/* Left — Text */
.about-body { }
.about-body .sec-sub { max-width: 100%; margin-bottom: 1.5rem; }
.about-highlights { display: flex; flex-direction: column; gap: .85rem; margin-bottom: 2rem; }
.about-highlight-item {
  display: flex; gap: 1rem; align-items: flex-start;
}
.ahi-icon {
  width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.ahi-icon svg { width: 20px; height: 20px; }
.ahi1 { background: rgba(0,229,255,.1); }  .ahi1 svg { color: var(--cyan); }
.ahi2 { background: rgba(168,85,247,.1); } .ahi2 svg { color: var(--violet); }
.ahi3 { background: rgba(244,63,142,.1); } .ahi3 svg { color: var(--pink); }
.ahi4 { background: rgba(16,185,129,.1); } .ahi4 svg { color: var(--green); }
.ahi-text strong { display: block; font-size: .9rem; font-weight: 700; margin-bottom: .15rem; }
.ahi-text p { font-size: .82rem; color: var(--text2); line-height: 1.6; }

/* Right — Visual Card */
.about-visual {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 28px; padding: 2rem;
  position: relative; overflow: hidden;
}
.about-visual::before {
  content: ''; position: absolute; top: -60px; right: -60px;
  width: 200px; height: 200px; border-radius: 50%;
  background: radial-gradient(circle,rgba(0,229,255,.12),transparent 70%);
  pointer-events: none;
}

/* Mission Card */
.about-mission {
  background: linear-gradient(135deg,rgba(0,229,255,.06),rgba(168,85,247,.06));
  border: 1px solid rgba(0,229,255,.15); border-radius: 18px;
  padding: 1.5rem; margin-bottom: 1.25rem;
  position: relative; z-index: 1;
}
.about-mission-label {
  font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--cyan); margin-bottom: .5rem;
}
.about-mission-text {
  font-size: .95rem; font-weight: 600; color: var(--text); line-height: 1.6;
}

/* Timeline */
.about-timeline { display: flex; flex-direction: column; gap: 0; position: relative; z-index: 1; }
.about-tl-item {
  display: flex; gap: 1rem; position: relative; padding-bottom: 1.25rem;
}
.about-tl-item:last-child { padding-bottom: 0; }
.atl-left { display: flex; flex-direction: column; align-items: center; }
.atl-dot {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: .7rem; font-weight: 800;
}
.atld1 { background: rgba(0,229,255,.15); color: var(--cyan); border: 1px solid rgba(0,229,255,.3); }
.atld2 { background: rgba(168,85,247,.12); color: var(--violet); border: 1px solid rgba(168,85,247,.25); }
.atld3 { background: rgba(244,63,142,.1); color: var(--pink); border: 1px solid rgba(244,63,142,.2); }
.atld4 { background: rgba(16,185,129,.1); color: var(--green); border: 1px solid rgba(16,185,129,.2); }
.atl-line { flex: 1; width: 1px; background: var(--border); margin: 4px auto; }
.atl-body { padding-top: .2rem; }
.atl-year { font-size: .68rem; font-weight: 700; color: var(--text3); letter-spacing: .06em; margin-bottom: .15rem; }
.atl-desc { font-size: .82rem; color: var(--text2); line-height: 1.5; }

/* Team Note */
.about-team-note {
  margin-top: 1.25rem; padding: 1rem 1.2rem;
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 12px; display: flex; align-items: center; gap: .75rem;
  position: relative; z-index: 1;
}
.atn-faces {
  display: flex;
}
.atn-face {
  width: 30px; height: 30px; border-radius: 50%;
  border: 2px solid var(--bg2);
  display: flex; align-items: center; justify-content: center;
  margin-left: -8px; font-size: .7rem;
}
.atn-face:first-child { margin-left: 0; }
.atnf1 { background: rgba(0,229,255,.2); color: var(--cyan); }
.atnf2 { background: rgba(168,85,247,.2); color: var(--violet); }
.atnf3 { background: rgba(244,63,142,.15); color: var(--pink); }
.atnf4 { background: rgba(16,185,129,.15); color: var(--green); }
.atn-text { font-size: .78rem; color: var(--text2); line-height: 1.4; }
.atn-text strong { color: var(--text); }

/* Responsive */
@media (max-width: 900px) {
  .about-grid { grid-template-columns: 1fr; gap: 2rem; }
}