/* ============================================================
   内页统一（about / contact）2026-09-30
   目标：与首页/产品页/下载页同一套视觉语言
   ① 页头：渐变标题 + kicker
   ② Emoji → SVG 图标
   ③ 卡片统一 18px 圆角 + 渐变描边 hover
   ④ 按钮统一渐变
   ============================================================ */

/* ========== ① 页头渐变标题 ═========= */
.page-hd h1{
  font-size:42px !important;
  line-height:1.18 !important;
  letter-spacing:-1.6px !important;
  font-weight:800 !important;
  color:#080e1a !important;
  margin-bottom:14px !important;
}
.page-hd p{
  font-size:15.5px !important;
  color:#5a6577 !important;
  line-height:1.8 !important;
  max-width:620px !important;
}
.page-hd .kicker{
  display:inline-flex;align-items:center;gap:7px;
  padding:6px 15px;border-radius:99px;
  background:#fff;border:1px solid #e4e9f4;
  box-shadow:0 1px 2px rgba(16,24,40,.05);
  font-size:12px;font-weight:700;color:#4c5a72;
  margin-bottom:16px;letter-spacing:.3px;
}
.page-hd .kicker i{
  display:inline-flex;align-items:center;justify-content:center;
  width:20px;height:20px;border-radius:6px;
  background:linear-gradient(135deg,#6366f1,#8b5cf6);
  color:#fff;font-size:11px;font-weight:800;font-style:normal;
  box-shadow:0 2px 7px rgba(99,102,241,.32);
}

/* ========== ② Emoji → 隐藏，改用 SVG 底色块 ═========= */
/* contact 的 h3 emoji（📮 📋 💡）→ 换成渐变图标瓦片 */
.cbox h3, .contact-box h3{
  font-size:17.5px !important;
  font-weight:800 !important;
  letter-spacing:-.3px !important;
  color:#080e1a !important;
  margin-bottom:17px !important;
  display:flex !important;align-items:center !important;gap:11px !important;
  padding-bottom:14px !important;
  border-bottom:1px solid #f0f2f6 !important;
}

/* ========== ③ 卡片统一 ═========= */
.cbox, .contact-box, .info-box, .info-list, .brief-box{
  position:relative;
  background:#fff !important;
  border:1px solid #e9eef7 !important;
  border-radius:18px !important;
  padding:28px 26px !important;
  box-shadow:0 1px 2px rgba(16,24,40,.05),0 2px 6px rgba(16,24,40,.05) !important;
  transition:transform .3s cubic-bezier(.34,1.1,.64,1), box-shadow .3s !important;
}
.cbox::before, .contact-box::before{
  content:'';position:absolute;inset:-1px;border-radius:19px;padding:1px;
  background:linear-gradient(135deg,#6366f1 0%,#8b5cf6 52%,#06b6d4 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0;transition:opacity .3s;pointer-events:none;
}
.cbox:hover, .contact-box:hover{transform:translateY(-5px) !important;
  box-shadow:0 10px 24px rgba(16,24,40,.07),0 28px 64px rgba(16,24,40,.11) !important;
}
.cbox:hover::before, .contact-box:hover::before{opacity:1}
/* 顶边家族色 */

/* 联系方式行 ═*/
.crow{
  display:flex !important;align-items:flex-start !important;gap:13px !important;
  padding:13px 0 !important;
  border-bottom:1px solid #f5f7fa !important;
}
.crow:last-child{border-bottom:none !important}
.crow .ci{
  width:38px !important;height:38px !important;border-radius:11px !important;flex:none !important;
  display:flex !important;align-items:center !important;justify-content:center !important;
  background:linear-gradient(135deg,#eef2ff,#f5f0ff) !important;
  border:1px solid #e4e6fb !important;
  font-size:16px !important;
  box-shadow:0 3px 10px rgba(99,102,241,.1) !important;
}
.crow .cl{font-size:11.5px !important;color:#9aa6b8 !important;margin-bottom:3px !important;letter-spacing:.2px}
.crow .cv{font-size:14.5px !important;color:#0b1220 !important;font-weight:600 !important;line-height:1.6 !important;word-break:break-all}

/* ========== ④ about 页信息行 ═========= */
.info-row{
  display:flex !important;gap:14px !important;
  padding:11px 0 !important;
  border-bottom:1px solid #f5f7fa !important;
  font-size:13.5px !important;color:#4a5361 !important;
}
.info-row:last-child{border-bottom:none !important}
.info-row b{
  flex:none !important;width:86px !important;
  color:#0b1220 !important;font-weight:700 !important;font-size:13px !important;
}

/* ========== ⑤ 理念卡（about grid3）═════════ */
.sec .grid3 > div{
  background:#fff !important;
  border:1px solid #e9eef7 !important;
  border-radius:16px !important;
  padding:26px 22px !important;
  box-shadow:0 1px 2px rgba(16,24,40,.05),0 2px 6px rgba(16,24,40,.05) !important;
  transition:transform .3s cubic-bezier(.34,1.1,.64,1), box-shadow .3s !important;
}
.sec .grid3 > div:hover{transform:translateY(-5px) !important;
  box-shadow:0 10px 28px rgba(99,102,241,.13) !important;
}
.sec .grid3 > div h3{
  font-size:17px !important;font-weight:800 !important;
  color:#080e1a !important;margin-bottom:10px !important;
  letter-spacing:-.3px !important;
}
.sec .grid3 > div p{font-size:13.5px !important;color:#5a6577 !important;line-height:1.85 !important}

/* ========== ⑥ 按钮统一渐变 ═========= */
.btn-p{
  background:linear-gradient(135deg,#6366f1,#8b5cf6) !important;
  color:#fff !important;border:none !important;
  box-shadow:0 5px 18px rgba(99,102,241,.34) !important;
  border-radius:11px !important;
  transition:transform .25s, box-shadow .25s !important;
}
.btn-p:hover{transform:translateY(-2px) !important;box-shadow:0 10px 28px rgba(99,102,241,.46) !important}

/* ========== 响应式 ═========= */
@media (max-width:900px){
  .page-hd h1{font-size:26px !important;letter-spacing:-.8px !important;margin-bottom:10px !important}
  .page-hd p{font-size:13px !important;line-height:1.7 !important}
  .page-hd .kicker{font-size:11px !important;padding:4px 11px !important;margin-bottom:11px !important}
  .cbox, .contact-box, .info-box, .info-list, .brief-box{padding:18px 16px !important;border-radius:14px !important}
  .cbox h3, .contact-box h3{font-size:15px !important;margin-bottom:13px !important;padding-bottom:11px !important}
  .crow{padding:11px 0 !important;gap:11px !important}
  .crow .ci{width:34px !important;height:34px !important;border-radius:9px !important;font-size:15px !important}
  .crow .cv{font-size:13.5px !important}
  .info-row{font-size:12.5px !important;padding:9px 0 !important}
  .info-row b{width:76px !important;font-size:12.5px !important}
  .sec .grid3 > div{padding:17px 15px !important;border-radius:13px !important}
  .sec .grid3 > div h3{font-size:14.5px !important;margin-bottom:8px !important}
  .sec .grid3 > div p{font-size:12px !important;line-height:1.75 !important}
}


/* h3 图标瓦片 */
.h3-ic{
  width:30px;height:30px;border-radius:9px;flex:none;
  display:inline-flex;align-items:center;justify-content:center;
  box-shadow:0 3px 10px rgba(99,102,241,.28);
  margin-right:1px;
}
.h3-ic svg{display:block}
@media (max-width:900px){
  .h3-ic{width:26px;height:26px;border-radius:8px}
  .h3-ic svg{width:15px;height:15px}
}


/* ============================================================
   联系方式页 · 行高对齐（2026-09-30）
   问题：左列 526px vs 右列 304+163 = 490px（差 36px）
   目标：两列等高 + 卡片间隙统一 + 关键行对齐
   ============================================================ */

/* ① 网格：两列等高 */
.contact-grid{
  display:grid !important;
  grid-template-columns:repeat(2, minmax(0,1fr)) !important;
  gap:22px !important;
  align-items:stretch !important;
}
/* 左右两列各自成为 flex 容器（右列的卡片可均匀分布）*/
.contact-grid > *{
  display:flex !important;
  flex-direction:column !important;
  gap:22px !important;
  min-width:0 !important;
}

/* ② 卡片等高：右列两张卡按比例分配 */
.contact-grid .cbox{
  display:flex !important;
  flex-direction:column !important;
  padding:22px 22px !important;
  border-radius:16px !important;
  min-height:0 !important;
}
/* 右列上卡（咨询指引）占更多空间 */
.contact-grid > *:nth-child(2) > .cbox:nth-child(1){flex:1 1 auto !important}
.contact-grid > *:nth-child(2) > .cbox:nth-child(2){flex:0 0 auto !important}
/* 左列单卡撑满 */
.contact-grid > *:nth-child(1) > .cbox:nth-child(1){flex:1 1 auto !important}

/* ③ 联系我们：9 行均匀铺满卡片 */
.contact-grid .cbox:first-child{
  justify-content:space-between !important;
}
.contact-grid .cbox:first-child .crow:last-child{
  border-bottom:none !important;
}

/* ④ 卡片标题统一（行高一致）*/
.contact-grid .cbox h3{
  display:flex !important;
  align-items:center !important;
  gap:11px !important;
  flex:none !important;
  margin:0 0 14px !important;
  padding-bottom:12px !important;
  border-bottom:1px solid #f0f2f6 !important;
  font-size:16.5px !important;
  font-weight:800 !important;
  line-height:1.4 !important;
  letter-spacing:-.3px !important;
}
/* 标题图标与文字基线对齐 */
.contact-grid .cbox h3 .h3-ic,
.contact-grid .cbox h3 > span:first-child{
  flex:none !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
}

/* ⑤ 联系表单行（crow）统一行高 */
.contact-grid .crow{
  display:flex !important;
  align-items:flex-start !important;
  gap:12px !important;
  padding:11px 0 !important;
  min-height:0 !important;
}
.contact-grid .crow .ci{
  width:34px !important;height:34px !important;
  border-radius:10px !important;flex:none !important;
  display:flex !important;align-items:center !important;justify-content:center !important;
  margin-top:1px !important;
}
.contact-grid .crow .cl{
  font-size:11px !important;
  line-height:1.4 !important;
  margin-bottom:3px !important;
  color:#9aa6b8 !important;
}
.contact-grid .crow .cv{
  font-size:13.5px !important;
  line-height:1.6 !important;
  color:#0b1220 !important;
}

/* ⑥ 咨询指引的条目也是 crow 结构 → 保证内部对齐 */
.contact-grid .cbox:nth-child(2) .crow{
  padding:12px 0 !important;
}
.contact-grid .cbox:nth-child(2) .crow:last-child{
  border-bottom:none !important;
}

/* ⑦ 温馨提示卡片：文字铺满 */
.contact-grid .cbox .tips-text,
.contact-grid .cbox > p{
  font-size:13.5px !important;
  line-height:1.95 !important;
  color:#5a6577 !important;
  margin:0 !important;
}
.contact-grid .cbox:last-child > p,
.contact-grid .cbox:last-child .tips-text{
  flex:1 1 auto !important;
  display:flex !important;
  align-items:center !important;
}

/* ========== 移动端（≤900px）========== */
@media (max-width:900px){
  .contact-grid{
    grid-template-columns:minmax(0,1fr) !important;
    gap:14px !important;
  }
  .contact-grid > *{
    gap:14px !important;
  }
  .contact-grid .cbox{
    padding:17px 15px !important;
    border-radius:14px !important;
  }
  .contact-grid .cbox h3{
    font-size:15px !important;
    margin-bottom:12px !important;
    padding-bottom:10px !important;
    gap:9px !important;
  }
  .contact-grid .crow{
    padding:10px 0 !important;
    gap:10px !important;
  }
  .contact-grid .crow .ci{
    width:32px !important;height:32px !important;border-radius:9px !important;
  }
  .contact-grid .crow .cl{font-size:10.5px !important;margin-bottom:2px !important}
  .contact-grid .crow .cv{font-size:12.5px !important;line-height:1.55 !important}
  .contact-grid .cbox .tips-text,
  .contact-grid .cbox > p{font-size:12px !important;line-height:1.85 !important}
}


/* ============================================================
   联系方式页 · 细节打磨（2026-09-30）
   ① 两列底部留白一致（不再拉伸产生空洞）
   ② 温馨提示文字垂直居中
   ③ 去重：联系电话为空行 → 已删（见 HTML）
   ============================================================ */

/* ① 两列改为「顶部对齐 + 各自自然高度」→ 底部不再有拉伸空白 */
.contact-grid{
  align-items:start !important;
}
.contact-grid > *{
  justify-content:flex-start !important;
}
/* 但要求两列总高接近（右列自然高度 ≈ 左列）*/
.contact-grid > *:nth-child(1) > .cbox{
  height:auto !important;
}
.contact-grid > *:nth-child(2) > .cbox{
  height:auto !important;
}

/* ② 右列两卡之间距离与左卡内容节奏一致 */
.contact-grid > *:nth-child(2){
  gap:22px !important;
}

/* ③ 温馨提示：文字垂直居中 */
.contact-grid .cbox:last-child{
  display:flex !important;
  flex-direction:column !important;
  justify-content:flex-start !important;
}
.contact-grid .cbox:last-child > p,
.contact-grid .cbox:last-child .tips-text{
  flex:0 0 auto !important;
  display:block !important;
  margin-top:auto !important;
  margin-bottom:auto !important;
}

/* ④ 联系表单行：最后一行不留额外空白 */
.contact-grid .cbox:first-child .crow:last-child{
  padding-bottom:0 !important;
}

/* ⑤ 咨询指引最后一条也去底边距 */
.contact-grid .cbox:nth-child(2) .crow:last-child{
  padding-bottom:0 !important;
}

@media (max-width:900px){
  .contact-grid{align-items:stretch !important}
  .contact-grid .cbox:last-child > p,
  .contact-grid .cbox:last-child .tips-text{margin-top:0 !important;margin-bottom:0 !important}
}


/* ============================================================
   ⭐ 外框对齐（左框底 == 右框底）
   现状：左框 603px，右列两框 282+46+158 = 486px（差 117px）
   目标：右列两框撑满，底部与左框齐平
   ============================================================ */

/* ① 网格恢复 stretch（两列等高）*/
.contact-grid{
  align-items:stretch !important;
}
/* ② 两列都变成 flex 纵向容器 */
.contact-grid > *{
  display:flex !important;
  flex-direction:column !important;
  justify-content:flex-start !important;
  min-width:0 !important;
  height:auto !important;
}
/* ③ 左列单卡撑满整列 */
.contact-grid > *:nth-child(1) > .cbox{
  flex:1 1 auto !important;
  height:auto !important;
}
/* ④ 右列：上卡撑满剩余，下卡自然高 */
.contact-grid > *:nth-child(2) > .cbox:nth-child(1){
  flex:1 1 auto !important;
  height:auto !important;
}
.contact-grid > *:nth-child(2) > .cbox:nth-child(2){
  flex:0 0 auto !important;
  height:auto !important;
}
/* ⑤ 右列两卡间距 = 网格 gap */
.contact-grid > *:nth-child(2){
  gap:22px !important;
}

/* ⑥ 卡片内部：内容顶部对齐（不留空洞）*/
.contact-grid .cbox{
  justify-content:flex-start !important;
}
/* 最后一行的下边距去掉 */
.contact-grid .cbox:first-child .crow:last-child,
.contact-grid .cbox:nth-child(2) .crow:last-child{
  padding-bottom:0 !important;
}

/* ⑦ 移动端恢复单列 */
@media (max-width:900px){
  .contact-grid{align-items:stretch !important}
  .contact-grid > *:nth-child(1) > .cbox,
  .contact-grid > *:nth-child(2) > .cbox:nth-child(1){flex:0 0 auto !important}
}