/* 关于：品牌故事 / 汇聚逻辑 / 产品矩阵 / 技术信任 */
.brand-story { max-width: 760px; margin-inline: auto; text-align: center; }
.brand-story .h2 { margin: 18px 0 16px; }
.brand-story p { color: var(--text-secondary); font-size: 17px; }


/* ============================================================
 * 关于页 V2（评审 review/关于我们-1）
 * 补全信息架构：使命行动模型 / 产品方法 / 发展历程 / 工程基石 /
 *              开放生态 / 团队十字 / 隐私信任 / 加入我们
 * 组件原则：少卡片、多体系；正文灰度统一 ≥ --text-secondary
 * ============================================================ */

/* ---------- 02 使命：行动模型（水平步骤链，克制） ---------- */
.mission-flow {
  list-style: none;
  display: flex;
  justify-content: center;
  max-width: 1080px;
  margin: 10px auto 0;
}
.mf-step {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  padding: 0 6px;
  position: relative;
}
.mf-step:not(:last-child)::after {
  content: '→';
  position: absolute;
  right: -7px;
  top: 42px;
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--text-tertiary);
}
.mf-num {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 2px;
  color: var(--text-tertiary);
}
.mf-step b {
  font-size: 15.5px;
  font-weight: 600;
  padding: 10px 18px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-tag);
  background: rgba(13, 27, 42, 0.55);
  color: var(--text-primary);
  white-space: nowrap;
}

/* 步骤链 / 层流共用的收束句 */
.flow-note {
  display: block;
  text-align: center;
  margin: 44px auto 0;
  max-width: 560px;
  color: var(--text-secondary);
  font-size: 15.5px;
  padding-top: 24px;
  position: relative;
}
.flow-note::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 48px;
  height: 1px;
  background: var(--gradient-primary);
}

/* ---------- 04 产品方法：垂直编号步骤（节点 + 连线） ---------- */
.method-steps { list-style: none; max-width: 680px; }
.method-steps li {
  display: flex;
  gap: 22px;
  align-items: flex-start;
  position: relative;
  padding: 14px 0;
}
.ms-num {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid var(--border-active);
  background: rgba(32, 217, 255, 0.06);
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--brand-cyan);
  position: relative;
  z-index: 1;
}
.method-steps li:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 15.5px;
  top: 50px;
  bottom: -14px;
  width: 1px;
  background: var(--border-default);
}
.method-steps b { font-size: 17px; display: block; margin-bottom: 4px; }
.method-steps p { color: var(--text-secondary); font-size: 14.5px; }

/* ---------- 05 发展历程：状态驱动时间轴 ---------- */
.milestones {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px 28px;
}
.ml-item { position: relative; padding-top: 26px; }
.ml-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--border-default);
}
.ml-dot {
  position: absolute;
  top: -4.5px;
  left: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--brand-cyan);
  box-shadow: 0 0 0 4px rgba(32, 217, 255, 0.14);
}
.ml-item.doing .ml-dot {
  background: var(--brand-blue);
  box-shadow: 0 0 0 4px rgba(22, 119, 255, 0.18);
  animation: mlPulse 2.4s var(--ease) infinite;
}
.ml-item.next .ml-dot {
  background: transparent;
  border: 1.5px dashed var(--text-tertiary);
  box-shadow: none;
}
@keyframes mlPulse { 50% { box-shadow: 0 0 0 8px rgba(22, 119, 255, 0.05); } }
.ml-stage {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 2px;
  color: var(--text-tertiary);
  display: block;
  margin-bottom: 10px;
}
.ml-item.doing .ml-stage { color: var(--brand-cyan); }
.ml-item b { font-size: 17px; display: block; margin-bottom: 6px; }
.ml-item p { color: var(--text-secondary); font-size: 14px; line-height: 1.7; }

/* ---------- 06/09 图标清单（工程基石 / 隐私信任共用图标语言） ---------- */
.eng-list, .trust-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px 56px;
  max-width: 1080px;
}
.trust-grid { margin-bottom: 28px; }
.eng-list li, .trust-grid li {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 18px 2px;
  border-top: 1px solid var(--border-default);
}
.li-icon {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border-radius: 12px;
  border: 1px solid var(--border-default);
  background: rgba(32, 217, 255, 0.05);
  color: var(--brand-cyan);
  display: grid;
  place-items: center;
}
.eng-list b, .trust-grid b { font-size: 16.5px; display: block; margin-bottom: 5px; }
.eng-list span, .trust-grid p { color: var(--text-secondary); font-size: 14.5px; line-height: 1.7; }

/* ---------- 09 联系合作卡（语义化 <a>：整卡可 hover，CTA 是交互主体） ---------- */
.contact-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px 28px;
  flex-wrap: wrap;
  max-width: 1080px;
  padding: 24px 28px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-card);
  background: rgba(13, 27, 42, 0.60);
  transition: all var(--t-normal) var(--ease);
}
.contact-card:hover { border-color: var(--border-active); transform: translateY(-3px); }
.contact-card .cc-main h3 { font-size: 17px; margin-bottom: 5px; }
.contact-card .cc-main p { color: var(--text-secondary); font-size: 14px; }
.contact-card .cc-tags { display: flex; gap: 8px; flex-wrap: wrap; }
.contact-card .go {
  color: var(--brand-cyan);
  font-size: 14px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

/* ---------- 07 开放生态：层流 ---------- */
.eco-flow {
  list-style: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  max-width: 620px;
  margin-inline: auto;
}
.eco-layer {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 13px 30px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-tag);
  background: rgba(13, 27, 42, 0.45);
}
.eco-layer b { font-size: 15.5px; white-space: nowrap; }
.eco-layer span { color: var(--text-tertiary); font-size: 13px; white-space: nowrap; }
.eco-layer:last-child {
  border-color: var(--border-active);
  background: rgba(32, 217, 255, 0.06);
}
.eco-layer:last-child span { color: var(--text-secondary); }
.eco-flow li + li::before {
  content: '↓';
  position: absolute;
  top: -25px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--brand-cyan);
  opacity: 0.7;
}

/* ---------- 08 团队：中心节点十字 ---------- */
.team-cross {
  display: grid;
  grid-template-columns: repeat(3, minmax(150px, 216px));
  justify-content: center;
  gap: 20px 32px;
  max-width: 780px;
  margin-inline: auto;
}
.tc-node {
  border: 1px solid var(--border-default);
  border-radius: var(--radius-card);
  background: rgba(13, 27, 42, 0.55);
  padding: 18px 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.tc-node b { font-size: 16.5px; display: block; margin-bottom: 5px; }
.tc-node span { color: var(--text-secondary); font-size: 13.5px; line-height: 1.6; }
.tc-top { grid-column: 2; grid-row: 1; }
.tc-left { grid-column: 1; grid-row: 2; }
.tc-right { grid-column: 3; grid-row: 2; }
.tc-bottom { grid-column: 2; grid-row: 3; }
.tc-core {
  grid-column: 2;
  grid-row: 2;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid var(--border-active);
  background: radial-gradient(circle at 35% 30%, rgba(32, 217, 255, 0.16), rgba(22, 119, 255, 0.08) 62%, transparent);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.08em;
}

/* ---------- 10 加入我们：最终 CTA ---------- */
.about-join {
  background: linear-gradient(180deg, var(--bg-abyss), var(--bg-deep-ocean));
  border-top: 1px solid var(--border-default);
}
.join-box { max-width: 720px; margin-inline: auto; text-align: center; }
.join-box .eyebrow { justify-content: center; }
.join-box .h2 { margin: 16px 0 14px; }
.join-lead { color: var(--text-secondary); font-size: 16.5px; }
.join-actions { display: flex; gap: 14px; justify-content: center; margin-top: 34px; flex-wrap: wrap; }

/* ---------- 关于页响应式（6 卡片 → 3 → 1，避免 2+1 尴尬布局） ---------- */
@media (max-width: 1024px) {
  .milestones { grid-template-columns: repeat(2, 1fr); }
  .team-cross { grid-template-columns: repeat(3, minmax(128px, 180px)); gap: 16px 20px; }
}
@media (max-width: 768px) {
  .mission-flow { flex-direction: column; align-items: stretch; max-width: 420px; margin-inline: auto; gap: 10px; }
  .mf-step {
    flex-direction: row;
    align-items: center;
    gap: 14px;
    text-align: left;
    padding: 12px 16px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-btn);
    background: rgba(13, 27, 42, 0.5);
  }
  .mf-step:not(:last-child)::after { content: none; }
  .mf-step b { white-space: normal; }
  .eng-list, .trust-grid { grid-template-columns: 1fr; }
  .milestones { grid-template-columns: 1fr; }
  .eco-layer span { white-space: normal; }
  .team-cross { display: flex; flex-direction: column; gap: 14px; }
  .tc-core { order: -1; width: 128px; height: 128px; margin-inline: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .ml-item.doing .ml-dot { animation: none; }
}

/* ---------- 08. 密度修复：稀疏区块紧凑化 ---------- */
/* 产品方法五步：横向五列填满行宽（原纵向 680px 右侧大量空白） */
.method-steps {
  max-width: none;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 36px 28px;
}
.method-steps li {
  display: block;
  padding: 22px 0 0;
  position: relative;
  border-top: 1px solid var(--border-default);
}
.method-steps li::after { display: none; }
.method-steps .ms-num { margin-bottom: 14px; }
.method-steps b { font-size: 16.5px; margin-bottom: 6px; }
.method-steps p { font-size: 13.5px; line-height: 1.7; }
@media (max-width: 900px) {
  .method-steps { grid-template-columns: 1fr; gap: 0; }
  .method-steps li { padding: 16px 0; }
}

/* 开放生态层流：紧凑化（纵向高度减半，层流隐喻保留） */
.about-ecosystem .eco-flow,
.eco-flow { gap: 14px; max-width: 540px; }
.eco-layer { padding: 11px 26px; }
.eco-flow li + li::before { top: -22px; font-size: 12px; }

/* 关于页区块节奏收紧（本页专属，其他页不受影响） */
.page-about .block { padding-block: clamp(64px, 7vw, 120px); }

/* ---------- 09. 微调：层流秩序 + 十字辐射 ---------- */
/* 开放生态胶囊统一宽度 + 箭头提亮 */
.eco-layer { width: min(340px, 100%); justify-content: center; }
.eco-flow li + li::before { color: var(--brand-cyan); opacity: 0.75; top: -21px; }

/* 谁在构建：中心与四卡的辐射连接线（渐隐，穿行于空隙） */
.team-cross { position: relative; }
.team-cross::before,
.team-cross::after {
  content: '';
  position: absolute;
  z-index: 0;
  pointer-events: none;
}
.team-cross::before {
  left: 50%; top: 5%; bottom: 5%;
  width: 1px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, transparent, var(--border-active) 30%, var(--border-active) 70%, transparent);
}
.team-cross::after {
  top: 50%; left: 3%; right: 3%;
  height: 1px;
  transform: translateY(-50%);
  background: linear-gradient(90deg, transparent, var(--border-active) 30%, var(--border-active) 70%, transparent);
}
.tc-core, .tc-node { position: relative; z-index: 1; background: rgba(13, 27, 42, 0.72); }