/* ============================================================
   page-tuandui.css — 团队介绍
   签名布局：角色工位卡（分组 + CSS 头像 + 技能标签）
   作用域：body.page-tuandui
   ============================================================ */

.td-hero .hero-hotline{margin-top:18px;font-size:14px;color:var(--c-muted)}

/* ---------- 角色分组 ---------- */
.role-block{margin-bottom:40px}
.role-label{display:inline-block;font-size:14px;font-weight:800;letter-spacing:.1em;color:#fff;background:var(--grad-main);padding:6px 18px;border-radius:999px;margin-bottom:18px}
.people-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}

/* ---------- 人物工位卡 ---------- */
.person-card{background:#fff;border:1px solid var(--c-line);border-radius:var(--radius-lg);padding:26px;box-shadow:var(--shadow-card);transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.person-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-soft)}
.avatar{width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:26px;font-weight:800;color:#fff;margin-bottom:16px}
.avatar-a{background:linear-gradient(135deg,#F2A6CC,#E88BB8)}
.avatar-b{background:linear-gradient(135deg,#C5AEEF,#A98AE6)}
.avatar-c{background:linear-gradient(135deg,#F1C4D8,#ED9FC2)}
.avatar-d{background:linear-gradient(135deg,#DCD0F7,#B79BEF)}
.avatar-e{background:linear-gradient(135deg,#ED9FC2,#C5AEEF)}
.avatar-f{background:linear-gradient(135deg,#F7DCE6,#ED9FC2)}
.avatar-g{background:linear-gradient(135deg,#B79BEF,#9D7BE4)}
.avatar-h{background:linear-gradient(135deg,#F2A6CC,#C5AEEF)}
.person-card h3{font-size:19px}
.person-role{font-size:13px;font-weight:600;color:var(--c-purple-400);margin:4px 0 10px}
.person-bio{font-size:13.5px;color:var(--c-text);margin-bottom:14px}
.skill-tags{display:flex;flex-wrap:wrap;gap:8px}

/* ---------- 工作场景横卷 ---------- */
.wp-card{flex:0 0 320px;background:#fff;border:1px solid var(--c-line);border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-card)}
.wp-card img{height:200px;width:100%;object-fit:cover}
.wp-card h3{font-size:17px;padding:16px 18px 4px}
.wp-card p{font-size:13px;color:var(--c-text);padding:0 18px 18px}

/* ---------- 协作流程 ---------- */
.synergy{display:flex;align-items:stretch;gap:14px;flex-wrap:wrap;justify-content:center}
.syn-step{flex:1;min-width:160px;background:#fff;border:1px solid var(--c-line);border-radius:var(--radius-md);padding:22px 18px;box-shadow:var(--shadow-card);text-align:center}
.syn-step strong{display:block;color:var(--c-ink);font-size:16px;margin-bottom:8px}
.syn-step p{font-size:13px;color:var(--c-text)}
.syn-arrow{align-self:center;color:var(--c-purple-300);font-size:22px;font-weight:700}

/* ---------- 团队文化 ---------- */
.cul-wrap{display:grid;grid-template-columns:1.2fr 1fr;gap:48px;align-items:center}
.cul-text p{margin-bottom:14px;color:var(--c-text)}
.cul-text strong{color:var(--c-ink)}
.cul-text a{color:var(--c-purple-400);font-weight:600}
.cul-points{display:flex;flex-direction:column;gap:16px}
.cul-point{background:linear-gradient(135deg,var(--c-bg-pink),var(--c-bg-purple));border-radius:var(--radius-md);padding:22px 26px}
.cul-point strong{display:block;font-size:30px;font-weight:800;color:var(--c-purple-400)}
.cul-point span{font-size:13.5px;color:var(--c-text)}

/* ---------- 加入我们 ---------- */
.join-box{display:flex;align-items:center;justify-content:space-between;gap:30px;background:#fff;border:1.5px dashed var(--c-purple-300);border-radius:var(--radius-lg);padding:40px;box-shadow:var(--shadow-card)}
.join-text p{margin-bottom:12px;color:var(--c-text)}
.join-box .btn{flex:none}

/* ---------- CTA ---------- */
.cta-sec{background:var(--grad-soft)}
.cta-box{text-align:center;max-width:760px;margin:0 auto;padding:56px 30px;border-radius:var(--radius-lg);background:#fff;box-shadow:var(--shadow-soft)}
.cta-box h2{margin-bottom:14px}
.cta-note{margin-top:18px;font-size:13.5px;color:var(--c-muted)}

/* ---------- 响应式 ---------- */
@media (max-width:1100px){
  .people-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:768px){
  .people-grid{grid-template-columns:1fr}
  .cul-wrap{grid-template-columns:1fr;gap:28px}
  .synergy{flex-direction:column}
  .syn-arrow{transform:rotate(90deg)}
  .join-box{flex-direction:column;text-align:center}
}
@media (max-width:360px){
  .person-card{padding:20px 18px}
  .join-box{padding:28px 20px}
}