/* =========================================================
   About Page (ab-)
   File: /css/pages/about.css
   Clean / Stable / Investment-bank style (square avatars)
   Depends on /css/style.css vars:
   --bg --text --muted --brand --border --shadow
   ========================================================= */

/* --- safety vars (if base style.css doesn't define) --- */
:root{
  --bg: var(--bg, #f6f8fb);
  --text: var(--text, #0f172a);
  --muted: var(--muted, #64748b);
  --brand: var(--brand, #0b63f6);
  --border: var(--border, #e6eaf2);
  --shadow: var(--shadow, 0 18px 60px rgba(15,23,42,.08));
}

/* =========================
   HERO
========================= */
.ab-hero{
  padding:70px 0 34px;
  background: linear-gradient(180deg, #fff 0%, var(--bg) 100%);
  border-bottom:1px solid var(--border);
}

.ab-bc{
  color:var(--muted);
  font-weight:900;
  display:flex;
  gap:8px;
  align-items:center;
  font-size:14px;
}
.ab-bc a{ color:inherit; text-decoration:none; }
.ab-bc a:hover{ text-decoration:underline; }
.ab-bc span{ opacity:.6; }

.ab-h1{
  margin:12px 0 10px;
  font-size:44px;
  font-weight:950;
  letter-spacing:-.6px;
  line-height:1.08;
  color:var(--text);
}
@media(max-width:560px){ .ab-h1{ font-size:34px; } }

.ab-sub{
  color:var(--muted);
  max-width:860px;
  line-height:1.75;
  font-size:1.05rem;
}

/* =========================
   SECTIONS + GRID
========================= */
.ab-section{ padding:70px 0; }

.ab-grid{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:18px;
  align-items:start;
}
@media(max-width:980px){ .ab-grid{ grid-template-columns:1fr; } }

.ab-h2{
  margin:0;
  font-size:28px;
  font-weight:950;
  letter-spacing:-.3px;
  color:var(--text);
}
.ab-p{
  color:var(--muted);
  line-height:1.75;
  margin-top:10px;
}

/* Mission / Promise */
.ab-mv{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
  margin-top:14px;
}
.ab-mv__item{
  background:#fff;
  border:1px solid var(--border);
  border-radius:16px;
  padding:14px;
  box-shadow:0 1px 0 rgba(15,23,42,.04);
}
.ab-mv__h{ font-weight:950; color:var(--text); }
.ab-mv__p{ color:var(--muted); margin-top:6px; line-height:1.7; }

/* Right media */
.ab-media{ display:grid; gap:12px; }

/* About hero photo card */
.ab-photo{
  background:#fff;
  border:1px solid var(--border);
  border-radius:18px;
  overflow:hidden;
  box-shadow:var(--shadow);
}
.ab-photo img{
  width:100%;
  height:420px;
  object-fit:cover;
  display:block;
}

/* Stats */
.ab-stats{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:12px;
}
@media(max-width:560px){ .ab-stats{ grid-template-columns:1fr; } }

.ab-stat{
  background:#fff;
  border:1px solid var(--border);
  border-radius:16px;
  padding:14px;
  box-shadow:0 1px 0 rgba(15,23,42,.04);
}
.ab-stat__n{
  font-size:1.4rem;
  font-weight:950;
  color:var(--text);
}
.ab-stat__t{
  color:var(--muted);
  margin-top:6px;
  font-weight:800;
}

/* =========================
   TEAM
========================= */
.ab-head{ margin-bottom:18px; }
.ab-sub2{
  color:var(--muted);
  margin-top:8px;
  line-height:1.75;
  max-width:760px;
}

.ab-team{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:14px;
}
@media(max-width:980px){ .ab-team{ grid-template-columns:1fr; } }

/* Card */
.ab-card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:18px;
  padding:18px;
  box-shadow:0 10px 35px rgba(15,23,42,.06);
  position:relative;
  overflow:hidden;
}
.ab-card > *{ position:relative; z-index:2; }

/* Square avatar - investment bank style */
.ab-avatar{
  width:120px;
  height:120px;
  border-radius:14px;
  overflow:hidden;
  border:1px solid var(--border);
  background:#f8fafc;
  box-shadow:0 10px 30px rgba(15,23,42,.10);
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  z-index:2;
}

.ab-avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  opacity:1 !important;
  visibility:visible !important;
}

/* Text */
.ab-name{
  margin-top:14px;
  font-weight:950;
  color:var(--text);
}
.ab-role{
  color:var(--muted);
  font-weight:900;
  margin-top:6px;
}
.ab-bio{
  color:var(--muted);
  line-height:1.7;
  margin-top:10px;
}

.ab-ln{
  display:inline-flex;
  margin-top:12px;
  font-weight:950;
  color:var(--brand);
  text-decoration:none;
}
.ab-ln:hover{ text-decoration:underline; }

.ab-empty{
  color:var(--muted);
  font-weight:900;
}

/* =========================
   CTA
========================= */
.ab-cta{ padding:70px 0; }

.ab-ctaCard{
  background:#fff;
  border:1px solid var(--border);
  border-radius:22px;
  box-shadow:var(--shadow);
  padding:22px;
  display:flex;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
  align-items:center;
}

.ab-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 16px;
  border-radius:12px;
  font-weight:950;
  background:var(--brand);
  color:#fff;
  text-decoration:none;
  border:1px solid rgba(0,0,0,0);
}
.ab-btn:hover{ filter:brightness(.98); }

/* =========================
   MOBILE POLISH
========================= */
@media(max-width:560px){
  .ab-section{ padding:56px 0; }
  .ab-cta{ padding:56px 0; }

  .ab-photo img{ height:280px; }

  .ab-card{ padding:16px; }
  .ab-avatar{ width:104px; height:104px; border-radius:14px; }
}

/* ===== Force About CTA Button (Restore Previous Design) ===== */

.ab-cta .ab-btn{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;

  padding:14px 22px !important;
  border-radius:12px !important;

  font-weight:900 !important;
  font-size:15px !important;

  background-color:#0b63f6 !important; /* 蓝色 */
  color:#ffffff !important;

  text-decoration:none !important;
  border:none !important;

  box-shadow:0 8px 20px rgba(11,99,246,.25) !important;

  transition:all .2s ease !important;
}

.ab-cta .ab-btn:hover{
  background-color:#0952cc !important;
  transform:translateY(-2px);
}