/* ==========================================================================
   UI 美化层  ui.css
   ========================================================================== */

/* ---------- 4. 通用段落标题（内页 / 详情页） ---------- */

.l-s-title01 div {
  position: relative;
  display: inline-block;
  font-size: clamp(30px, 2.6vw, 42px);
  font-weight: 900;
  color: var(--ink);
  letter-spacing: 4px;
}

.l-s-title01 p {
  margin: 0 auto;
  max-width: 760px;
  font-size: 15px;
  letter-spacing: 1px;
  color: var(--muted);
  line-height: 1.9;
}

/* 列表页底色柔和化（覆盖 style.css 的 #f4f4f4） */
.listNews { padding:60px 0; }

.mb_class { text-align: center; padding-bottom: 0; margin-bottom: 26px; }
.mb_class ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.mb_class ul li { display: inline-block; margin: 0; }
.mb_class ul li a {
  display: inline-block;
  padding: 8px 22px;
  border: 1px solid #e4e8ef;
  border-radius: 22px;
  background: #fff;
  color: #5b6472;
  font-size: 14px;
  letter-spacing: 1px;
  transition: all .3s ease;
}
.mb_class ul li.active a,
.mb_class ul li a:hover {
  color: #fff;
  border-color: transparent;
  background: var(--grad);
  box-shadow: var(--shadow-brand);
}

/* ---------- 16. 分页 ---------- */
.pagination {
    list-style: none;
    padding: 0;
    margin: 30px 0;
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap; /* ✅ 屏幕变窄自动换行，防止溢出 */
}
.pagination li {
    list-style: none;
}
.pagination li a {
    display: inline-block;
    padding: 8px 14px;
    border: 1px solid #ddd;
    color: #333;
    text-decoration: none;
    border-radius: 4px;
    transition: all 0.2s;
}
.pagination li a:hover {
    background-color: #F60;
    color: #fff;
    border-color: #F60;
}
.pagination li.active a {
    background-color: #F60;
    color: #fff;
    border-color: #F60;
    cursor: default;
}
.pagination li.active a:hover {
    color: #fff;
}
.pagination li:first-child a {
    border: none;
    padding-left:0;
    background: transparent;
    color:#666;
}
.pagination li:first-child a:hover {
    background: transparent;
    color:#666;
}

@media (max-width:768px){
    .pagination li a {
        padding: 6px 10px;
        font-size:14px;
    }
    .pagination {
        gap:5px;
    }
}


/* ---------- 17. 新闻列表 / 搜索结果条目 ---------- */
.txts {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
  padding: 24px 28px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: transform .3s ease, box-shadow .3s ease;
}
.txts:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }

.txts .title { flex: 1; }
.txts .title .h2 { font-size: 19px; margin: 0 0 8px; line-height: 1.5; }
.txts .title .h2 a { color: var(--ink); font-weight: 600; transition: color .25s ease; }
.txts .title .h2 a:hover { color: var(--brand); }
.txts .title .p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.9; }

.txts .nfok { flex: 0 0 auto; }
.txts .nfok span {
  display: inline-block;
  padding: 5px 14px;
  border-radius: 14px;
  background: #f5f7fb;
  color: #8b94a5;
  font-size: 12px;
}
.txts .nfok .rq { margin-right: 8px; }

/* ---------- 17b. 资讯列表大卡片（article-list 重构） ---------- */
.nl-wrap { display: flex; gap: 26px; align-items: flex-start; }
.nl-maincol { flex: 1; min-width: 0; }
.nl-aside { flex: 0 0 340px; position: sticky; top: 20px; }

/* 分类工具条：白卡包装 + 内嵌分类切换 */
.nl-catbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  padding: 14px 18px;
  margin-bottom: 22px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.nl-catbar-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 1px;
}
.nl-catbar-title i { color: var(--brand); font-size: 16px; }
.nl-catbar .mb_class { margin: 0; text-align: left; }
.nl-catbar .mb_class ul { gap: 4px; justify-content: flex-start; }
.nl-catbar .mb_class ul li a {
  padding: 7px 16px;
  background: transparent;
  border: 0;
  color: #5b6472;
  border-radius: 20px;
  font-size: 14px;
}
.nl-catbar .mb_class ul li.active a,
.nl-catbar .mb_class ul li a:hover {
  color: #fff;
  background: var(--grad);
  box-shadow: var(--shadow-brand);
}

/* 热门新闻排名徽章 */
.nl-hot { display: flex; align-items: flex-start; gap: 10px; }
.nl-hot-n {
  flex: 0 0 auto;
  min-width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  margin-top: 1px;
  border-radius: 6px;
  background: #eef1f6;
  color: #97a0b2;
  font-size: 12px;
  font-weight: 600;
}
.nl-hot-n.top { background: var(--grad); color: #fff; box-shadow: var(--shadow-brand); }
.nl-hot h4 { margin: 0; font-size: 14px; line-height: 1.7; font-weight: 600; }

/* 热门标签云 */
.nl-tag-cloud { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.nl-aside .nl-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px 4px 12px;
  background: var(--bg-soft);
  color: #5b6472;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.6;
  transition: all .25s ease;
}
.nl-tag span { max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nl-tag em {
  font-style: normal;
  font-size: 11px;
  line-height: 1.5;
  padding: 0 6px;
  border-radius: 7px;
  background: #e8edf4;
  color: #97a0b2;
}
.nl-tag:hover {
  background: var(--grad);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: var(--shadow-brand);
}
.nl-tag:hover em { background: rgba(255, 255, 255, .28); color: #fff; }

/* 17c-2 侧栏卡片增强：仅作用于新加的 .nl-side，不影响旧 .d-a-news02 */
.nl-side { padding: 20px 22px 22px; border-radius: 16px; }
.nl-side .d-a-n-top { padding-bottom: 14px; margin-bottom: 8px; border-bottom: 0; }
.nl-side .d-a-n-top::after { bottom: 0; width: 100%; opacity: .16; }
.nl-side ul li { padding: 10px; margin: 0 -10px; border-bottom: 0; border-radius: 10px; transition: background .25s ease; }
.nl-side ul li + li { margin-top: 2px; }
.nl-side ul li:hover { background: var(--bg-soft); }
.nl-side .nl-hot { gap: 12px; }
.nl-side .nl-hot-n { min-width: 22px; height: 22px; line-height: 22px; border-radius: 7px; }
.nl-side .nl-hot h4 { font-size: 13.5px; line-height: 1.65; }

@media (max-width: 991px) {
  .nl-wrap { display: block; }
  .nl-aside { position: static; margin-top: 26px; display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
}
@media (max-width: 767px) {
  .nl-aside { grid-template-columns: 1fr; }
}

.nl-card {
  margin-bottom: 18px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.nl-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: transparent;
}

.nl-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 20px 26px;
  min-width: 0;
}
.nl-link::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--grad);
  transform: scaleY(0);
  transform-origin: center;
  transition: transform .3s ease;
}
.nl-card:hover .nl-link::before { transform: scaleY(1); }

.nl-thumb {
  flex: 0 0 176px;
  width: 176px;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 12px;
  background: linear-gradient(135deg, #f2f4f9, #e5e9f0);
}
.nl-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .55s ease;
}
.nl-card:hover .nl-thumb img { transform: scale(1.07); }
/* ---------- 17c. nl 列表页增强 ---------- */
/* 无缩略图时模板不渲染 .nl-thumb，文字直接占满整行，故占位图标与日期角标样式一并移除 */

/* 栏目 chip */
.nl-meta .nl-cat { display: inline-flex; align-items: center; gap: 5px; }
.nl-meta .nl-cat i { margin-right: 0; }

.nl-main { flex: 1; min-width: 0; }
.nl-title {
  margin: 0 0 7px;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color .25s ease;
}
.nl-card:hover .nl-title { color: var(--brand); }
.nl-desc {
  margin: 0 0 10px;
  font-size: 14px;
  line-height: 1.9;
  color: var(--muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.nl-meta { display: flex; flex-wrap: wrap; gap: 18px; font-size: 13px; color: #97a0b2; }
.nl-meta span i { margin-right: 6px; color: var(--brand); }

.nl-more {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  color: var(--brand);
  background: #fff4ea;
  transition: all .3s ease;
}
.nl-card:hover .nl-more {
  color: #fff;
  background: var(--grad);
  box-shadow: var(--shadow-brand);
}
.nl-more em { font-style: normal; letter-spacing: .5px; }
.nl-card:hover .nl-more i { transform: translateX(3px); }
.nl-more i { transition: transform .3s ease; }
@media (max-width: 991px) {
  .nl-more { width: 40px; padding: 0; justify-content: center; }
  .nl-more em { display: none; }
}

@media (max-width: 767px) {
  .nl-link { gap: 14px; padding: 18px 16px; flex-wrap: wrap; }
  /* 移动端：有图时图片占满整行置顶，文字独占下段 */
  .nl-thumb { flex: 0 0 100%; width: 100%; aspect-ratio: 16 / 9; }
  .nl-thumb + .nl-main { flex: 0 0 100%; }
  .nl-more { display: none; }
  .nl-title {
    font-size: 17px;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
  .nl-meta { gap: 12px; }
  .nl-meta .nl-time { display: none; }
}

/* ---------- 19. 文章详情 ---------- */
.d-a-news01 { background: #fff; }
.d-a-news01 .title h1 {
  margin: 0 0 6px;
  font-size: 30px;
  font-weight: 800;
  line-height: 1.5;
  letter-spacing: 1px;
}
.d-a-news01 .sub-info {
  padding: 10px 18px;
  margin-bottom: 26px;
  background: var(--bg-soft);
  border-radius: 10px;
  color: var(--muted);
  font-size: 13px;
}
.d-a-news01 .content { color: var(--text); font-size: 15px; line-height: 2.1; }
.d-a-news01 .content p { margin: 0 0 1.4em; text-align: justify; }
.d-a-news01 .content img { max-width: 100%; border-radius: 10px; box-shadow: var(--shadow-sm); }
.d-a-news01 .content h2, .d-a-news01 .content h3, .d-a-news01 .content h4 { margin: 1.4em 0 .6em; }

.lable {
  padding: 18px 0;
  margin: 28px 0;
  border-top: 1px dashed #e2e6ed;
  border-bottom: 1px dashed #e2e6ed;
}
.lable a {
  display: inline-block;
  margin: 2px 6px 2px 0;
  padding: 3px 14px;
  border-radius: 13px;
  background: #fff3e8;
  color: var(--brand);
  font-size: 12px;
  transition: all .3s ease;
}
.lable a:hover { background: var(--grad); color: #fff; }

.pre_next { margin-top: 8px; }
.pre_next p { margin: 0 0 10px; font-size: 14px; color: var(--muted); }
.pre_next a { color: var(--brand); }

/* ---------- 20. 侧栏卡片 ---------- */
.d-a-news02 {
  margin-bottom: 22px;
  padding: 22px 20px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
}
.d-a-news02 .d-a-n-top,
.tag-tit01 {
  position: relative;
  padding-bottom: 12px;
  margin-bottom: 14px;
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 1px;
}
.d-a-news02 .d-a-n-top { border-bottom: 2px solid #f1f4f8; }
.d-a-news02 .d-a-n-top::after,
.tag-tit01::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 44px;
  height: 2px;
  border-radius: 2px;
  background: var(--grad);
}
.tag-tit01 i { color: var(--brand); margin-right: 6px; }
.tag-tit01::after { bottom: 0; border: 0; }

.d-a-news02 ul { list-style: none; padding: 0; margin: 0; }
.d-a-news02 ul li { padding: 12px 0; border-bottom: 1px dashed #eef1f6; }
.d-a-news02 ul li:last-child { border-bottom: 0; padding-bottom: 0; }
.d-a-news02 ul li h4 { margin: 0; font-size: 14px; line-height: 1.7; font-weight: 600; }
.d-a-news02 ul li h4 a { color: #3c4454; transition: color .25s ease; }
.d-a-news02 ul li h4 a:hover { color: var(--brand); }
.d-a-news02 ul li p { margin: 6px 0 0; font-size: 12px; color: var(--muted); }

.tag-news01 {
  padding: 10px 0;
  border-bottom: 1px dashed #eef1f6;
  font-size: 14px;
  line-height: 1.7;
}
.tag-news01 i { color: var(--brand); margin-right: 6px; font-size: 12px; }
.tag-news01 a { color: #5b6472; transition: color .25s ease; }
.tag-news01:hover a { color: var(--brand); }

/* ---------- 21. 搜索提示条 ---------- */
.weizhi {
  margin-bottom: 22px;
  padding: 14px 20px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--muted);
  font-size: 14px;
}
.weizhi span { color: var(--brand); }

/* ---------- 22. 产品详情 ---------- */
.d-a-case01 { padding: 48px 0 60px; background: #fff; }
.d-a-case02 .t1, .d-a-case03 .t1 {
  position: relative;
  padding-left: 18px;
  font-size: 22px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 12px;
}
.d-a-case02 .t1::before, .d-a-case03 .t1::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 5px;
  height: 20px;
  border-radius: 3px;
  background: var(--grad);
}
.d-a-case02 .t2, .d-a-case03 .t2 {
  width: 46px;
  height: 3px;
  border-radius: 3px;
  background: var(--grad);
  margin-bottom: 20px;
}
.d-a-case02 .t3, .d-a-case03 .t3 { color: var(--text); font-size: 15px; line-height: 2; }
.d-a-case03 .t3 ul { list-style: none; padding: 0; margin: 0; }
.d-a-case03 .t3 ul li { margin-bottom: 10px; font-size: 15px; }

.d-a-case02 .table { border-color: #e7ebf1; border-radius: 12px; overflow: hidden; }
.d-a-case02 .table-bordered { border: 1px solid #e7ebf1; }
.d-a-case02 .table-bordered > thead > tr > th,
.d-a-case02 .table-bordered > tbody > tr > th { background: #f7f9fc; color: var(--ink); border-color: #e7ebf1; }
.d-a-case02 .table-bordered > tbody > tr > td { border-color: #eef1f6; color: var(--text); }

.d-a-case04 { margin-top: 40px; border-top: 1px solid var(--line); padding-top: 30px; }
.d-a-case05 { color: var(--text); font-size: 15px; line-height: 2.1; }
.d-a-case05 p { margin-bottom: 1.4em; text-align: justify; }
.d-a-case05 img { max-width: 100%; border-radius: 10px; box-shadow: var(--shadow-sm); }

/* ---------- 23b. nl 详情页（文章 / 产品通用） ---------- */
.nl-detail {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.nl-detail-head { padding: 28px 40px 20px; border-bottom: 1px solid var(--line); }
.nl-detail-title { margin: 0 0 12px; font-size: 26px; font-weight: 800; line-height: 1.45; color: var(--ink); }
.nl-detail-meta { display: flex; flex-wrap: wrap; gap: 20px; font-size: 13px; color: var(--muted); }
.nl-detail-meta i { margin-right: 6px; color: var(--brand); }
.nl-detail .pd-info { padding: 22px 40px 0; }
.nl-detail .pd-info-tt {
  position: relative;
  padding-left: 16px;
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 14px;
}
.nl-detail .pd-info-body table { width: 100%; border-collapse: collapse; font-size: 14px; }
.nl-detail .pd-info-body th,
.nl-detail .pd-info-body td { padding: 10px 14px; border: 1px solid var(--line); text-align: left; }
.nl-detail .pd-info-body th { background: #f7f9fc; color: var(--ink); width: 140px; white-space: nowrap; }
.nl-detail .content { padding: 24px 40px; color: var(--text); }

.nl-detail .content img { max-width: 100%; border-radius: 10px; box-shadow: var(--shadow-sm); }

/* 产品详情：内容白卡 + 右侧「项目服务」橙卡，两栏无缝拼接，橙卡顶部对齐且高度按内容 */
.nl-detail.pd-detail {
  display: flex;
  align-items: flex-start;   /* 顶部对齐：右栏可经负 margin 上移冒头 */
  gap: 0;                    /* 两卡无缝拼接 */
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  overflow: visible;
}
.nl-detail.pd-detail .nl-detail-main {
  flex: 1;
  min-width: 0;

  border: 1px solid var(--line);
  border-right: 0;

}
.nl-detail.pd-detail .nl-detail-main .pd-info,
.nl-detail.pd-detail .nl-detail-main .content,
.nl-detail.pd-detail .nl-detail-main .pre_next { padding-left: 40px; padding-right: 40px; }
.nl-detail.pd-detail .nl-detail-main .pre_next { padding-bottom: 30px; }
.nl-detail.pd-detail .nl-detail-side {
  flex: 0 0 320px;
  margin: -52px 0 0;          /* 顶部上移冒头，底部按内容自然收尾 */

  color: #fff;

}
/* 橙卡内部 */
.nl-detail .nl-side-t { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; font-size: 18px; font-weight: 700; letter-spacing: 1px; }
.nl-detail .nl-side-t i { font-size: 20px; }
.nl-detail .nl-side-list { margin: 0 0 24px; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px 20px; }
.nl-detail .nl-side-list li { flex: 0 0 auto; font-size: 14px; opacity: .96; }
.nl-detail .nl-side-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  border-radius: 24px;
  margin-bottom: 12px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1px;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .6);
  transition: all .3s ease;
}
.nl-detail .nl-side-btn:hover { color: #fff; background: rgba(255, 255, 255, .12); }
.nl-detail .nl-side-btn-primary { color: #ff5500; background: #fff; border-color: transparent; box-shadow: 0 10px 22px rgba(120, 40, 0, .22); }
.nl-detail .nl-side-btn-primary:hover { color: #ff3d00; background: #fff; transform: translateY(-2px); }
.nl-detail .nl-side-divider { height: 1px; background: rgba(255, 255, 255, .22); margin: 22px 0 16px; }
.nl-detail .nl-side-back { display: inline-block; margin-top: 20px; font-size: 12px; letter-spacing: 2px; color: #fff; text-decoration: none; opacity: .92; }
.nl-detail .nl-side-back em { font-style: normal; font-weight: 700; }
.nl-detail .nl-side-back:hover { opacity: 1; }

/* ---------- 23c. 文章正文排版规范（修正“文字多、字号大小错位”） ---------- */
/* 1) 正文：统一字号阶梯。编辑器富文本里的 h1~h6 原本沿用 Bootstrap 默认巨号字（h3 约 28px），
      与 16px 正文差距过大，造成“大小错位”，此处收敛为稳定的标题阶梯 */
.nl-detail .content { font-size: 16px; line-height: 1.9; overflow-wrap: break-word; word-break: break-word; }
.nl-detail .content > :first-child { margin-top: 0; }
.nl-detail .content > :last-child { margin-bottom: 0; }
.nl-detail .content p { margin: 0 0 1.2em; text-align: justify; }
.nl-detail .content h1,
.nl-detail .content h2,
.nl-detail .content h3,
.nl-detail .content h4,
.nl-detail .content h5,
.nl-detail .content h6 {
  margin: 1.6em 0 .7em;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .5px;
  color: var(--ink);
}
.nl-detail .content h1 { font-size: 22px; }
.nl-detail .content h2 { font-size: 20px; }
.nl-detail .content h3 { font-size: 18px; }
.nl-detail .content h4,
.nl-detail .content h5,
.nl-detail .content h6 { font-size: 16px; }
.nl-detail .content strong,
.nl-detail .content b { font-weight: 600; color: var(--ink); }
.nl-detail .content a {
  color: var(--brand);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 106, 0, .35);
  transition: border-color .25s ease;
}
.nl-detail .content a:hover { border-bottom-color: transparent; }
.nl-detail .content ul,
.nl-detail .content ol { margin: 0 0 1.2em; padding-left: 1.5em; }
.nl-detail .content ul { list-style: disc; }
.nl-detail .content ol { list-style: decimal; }
.nl-detail .content li { margin-bottom: .5em; line-height: 1.95; }
.nl-detail .content li::marker { color: var(--brand); }
.nl-detail .content blockquote {
  margin: 1.5em 0;
  padding: 14px 20px;
  background: var(--bg-soft);
  border-left: 4px solid var(--brand);
  border-radius: 0 10px 10px 0;
  color: #5b6472;
  font-size: 14.5px;
}
.nl-detail .content blockquote p:last-child { margin-bottom: 0; }
.nl-detail .content table { width: 100%; margin: 1.5em 0; border-collapse: collapse; font-size: 14px; }
.nl-detail .content table th,
.nl-detail .content table td { padding: 10px 14px; border: 1px solid var(--line); text-align: left; }
.nl-detail .content table th { background: #f7f9fc; color: var(--ink); font-weight: 600; }
.nl-detail .content hr { margin: 2em 0; border: 0; border-top: 1px dashed #e2e6ed; }
.nl-detail .content pre {
  margin: 1.4em 0;
  padding: 16px 18px;
  background: #f6f8fb;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.8;
  overflow: auto;
}
.nl-detail .content iframe,
.nl-detail .content video { max-width: 100%; border-radius: 10px; }

/* 2) 标签区：原 .lable 只有上下内边距且带 #eee 灰底，文字比正文左移 40px 造成错位 */
.nl-detail .lable {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 18px 40px;
  background: var(--bg-soft);
  border-top: 1px solid var(--line);
  border-bottom: 0;
  font-size: 13px;
}
.nl-detail .lable-label { display: inline-flex; align-items: center; flex: 0 0 auto; color: var(--ink); font-weight: 600; letter-spacing: .5px; }
.nl-detail .lable-label i { margin-right: 5px; color: var(--brand); font-size: 13px; }
.nl-detail .lable a {
  display: inline-block;
  margin: 0;
  padding: 4px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  color: #5b6472;
  font-size: 12.5px;
  line-height: 1.7;
}
.nl-detail .lable a:hover { color: #fff; background: var(--grad); border-color: transparent; box-shadow: var(--shadow-brand); }

/* 3) 上下篇：清掉旧版 border-top / p 底部实线与 15px 内边距，改为对齐的行式条目 */
.nl-detail .pre_next { margin: 0; padding: 8px 40px 30px; border-top: 0; }
.nl-detail .pre_next .pn {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
  padding: 10px 0;
  border-bottom: 0;
  font-size: 14px;
  line-height: 1.75;
  color: var(--muted);
}
.nl-detail .pre_next .pn + .pn { border-top: 1px dashed #e9edf3; }
.nl-detail .pre_next .pn-flag {
  flex: 0 0 auto;
  padding: 2px 10px;
  border-radius: 6px;
  background: var(--bg-soft);
  color: #8a93a6;
  font-size: 12px;
  line-height: 1.75;
}
.nl-detail .pre_next a {
  flex: 1;
  min-width: 0;
  color: #3c4454;
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nl-detail .pre_next a:hover { color: var(--brand); }
.nl-detail .pre_next .pn-none { flex: 1; color: #c3c9d4; }

@media (max-width: 991px) {
  .nl-detail.pd-detail { flex-direction: column; align-items: stretch; }
  .nl-detail.pd-detail .nl-detail-main { border-right: 1px solid var(--line); border-bottom: 0; }
  .nl-detail.pd-detail .nl-detail-side { flex: 1 1 auto; margin: -1px 0 0; }
}
@media (max-width: 767px) {
  .nl-detail-head, .nl-detail.pd-detail .nl-detail-main .nl-detail-head { padding: 24px 20px 16px; }
  .nl-detail-title, .nl-detail.pd-detail .nl-detail-main .nl-detail-title { font-size: 21px; }
  .nl-detail .pd-info, .nl-detail.pd-detail .nl-detail-main .pd-info,
  .nl-detail .content, .nl-detail.pd-detail .nl-detail-main .content,
  .nl-detail .lable,
  .nl-detail .pre_next, .nl-detail.pd-detail .nl-detail-main .pre_next { padding-left: 20px; padding-right: 20px; }
  /* 小屏：正文标题阶梯同步收窄，避免出现比文章主标题还大的正文小标题 */
  .nl-detail .content { line-height: 1.85; }
  .nl-detail .content h1 { font-size: 19px; }
  .nl-detail .content h2 { font-size: 18px; }
  .nl-detail .content h3 { font-size: 17px; }
  .nl-detail .content table { font-size: 13px; }
  .nl-detail .content table th,
  .nl-detail .content table td { padding: 8px 10px; }
}

/* ---------- 23. 通用微调 ---------- */

@media (max-width: 1199px) {
  .brand_text .h3 { font-size: 42px; }
}

/* 平板 */

/* 手机 */
@media (max-width: 767px) {

  .com-biaoti .dn1 { font-size: 28px; }
  .team-bot .blo-box { height: 300px; }
  .com-navigation { width: 100%; border-radius: 12px; padding-left: 24px; }

  .idx-news01 { padding: 56px 0 44px; }
  .idx-news01 .title span { font-size: 26px; }
  .abinewcate ul li a { padding: 0 12px; font-size: 13px; letter-spacing: 1px; }
  .abinewclc_img { height: 210px; }
  .news01-al { width: 66px; height: 66px; flex-basis: 66px; }
  .news01-al .yue { font-size: 20px; }
  .news01-al .time { font-size: 11px; }

  .sx-jianju { padding: 30px 0 44px; }
  .mb_class { margin-bottom: 24px; }
  .txts { flex-direction: column; align-items: flex-start; padding: 20px; }
  .txts .title .h2 { font-size: 17px; }
  .d-a-news01 .title h1 { font-size: 22px; }
  .l-s-title01 div { font-size: 24px; }

}

/* ======================================================================
   「关于我们」页 page/about.html
   ====================================================================== */

/* ---------- 顶部公司简介 ---------- */
.page-about .l-a-about01 {
  background: url("../images/nimg842Bg.png") no-repeat left center / auto, #fff;
  padding: 76px 0 88px;
}
/* 新板式：顶部左右两栏，底部整幅引言 */
.page-about .l-a-about01-row {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: 64px;
  align-items: start;
}
.page-about .l-a-about02 { position: relative; margin-bottom: 0; }
.page-about .l-a-about02 img {
  display: block;
  width: 100%;
  border-radius: 20px;
  box-shadow: 0 0 0 8px #fff, 0 0 0 9px rgba(255, 106, 0, .20), 0 24px 50px rgba(17, 24, 39, .16);
}
.page-about .l-a-about01-l { position: relative; padding-top: 6px; }
.l-a-eyebrow {
  position: relative;
  margin: 0 0 26px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 6px;
  color: #f04438;
}
.l-a-h2 {
  margin: 0 0 20px;
  font-size: 52px;
  font-weight: 800;
  line-height: 1.22;
  letter-spacing: 1px;
  color: #1f2329;
}
.l-a-sub {
  position: relative;
  margin: 0;
  padding-bottom: 28px;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 2px;
  color: #6b7280;
}
.l-a-wave {
  width: 100%;
  max-width: 430px;
  aspect-ratio: 430 / 300;
}
.page-about .l-a-about01-r {
  position: relative;
  padding: 4px 0 4px 44px;
}
.page-about .l-a-about01-r p {
  margin: 0 0 22px;
  font-size: 17px;
  line-height: 2.1;
  color: #3f4658;
}
.page-about .l-a-about01-r p:last-child {
  margin-bottom: 0;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--brand);
}
/* ---------- 底部引言：卡片 + 大引号 + 柔光 ---------- */
.page-about .l-a-quote {
  position: relative;
  margin-top: 76px;
  padding: 38px 72px;
  border-radius: 22px;
  background: linear-gradient(180deg, #fff 0%, #fdf9f4 100%);
  border: 1px solid rgba(255, 106, 0, .12);
  box-shadow: 0 30px 70px -34px rgba(17, 24, 39, .30), 0 10px 28px -20px rgba(255, 106, 0, .30);
  overflow: hidden;
  transition: transform .55s cubic-bezier(.22, .61, .36, 1), box-shadow .55s ease;
}
.l-a-qglow {
  position: absolute;
  right: -90px;
  top: -90px;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 138, 0, .18) 0%, rgba(255, 138, 0, 0) 70%);
  pointer-events: none;
  animation: lAPulse 7s ease-in-out infinite;
}
@keyframes lAPulse {
  0%, 100% { transform: scale(1); opacity: .75; }
  50% { transform: scale(1.18); opacity: 1; }
}
.l-a-qmark {
  font-family: bootstrap-icons !important;
  font-style: normal;
  font-weight: normal !important;
  font-size: 72px;
  line-height: 1;
  color: #ff8a00;
  transition: color .35s ease;
  flex: none;
}
.l-a-qmark-open {
  align-self: flex-start;
}
.l-a-qmark-close {
  align-self: flex-end;
  transform: scaleX(-1);
}
.page-about .l-a-quote:hover .l-a-qmark { color: #ff6a00; }
.l-a-qrow {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 28px;
}
.l-a-qbody {
  flex: 1 1 auto;
  min-width: 0;
}
.l-a-qtext {
  margin: 0 0 14px;
  font-size: 18px;
  font-weight: 700;
  line-height: 2;
  color: #2b2f36;
  letter-spacing: 1px;
}
.l-a-qtext.l-a-qsign {
  margin: 0;
  text-align: right;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 3px;
  color: #ff6a00;
}
/* ---------- 滚动进场动效（H5） ---------- */
.js .page-about .l-a-about01-l {
  transform: translateY(30px);
  transition: opacity .85s cubic-bezier(.22, .61, .36, 1), transform .85s cubic-bezier(.22, .61, .36, 1);
}
.js .page-about .l-a-about01-l.is-visible { opacity: 1; transform: none; }
.js .page-about .l-a-about01-l:not(.is-visible) .l-a-eyebrow::before { transform: translateY(-50%) scaleX(0); }
.js .page-about .l-a-about01-l:not(.is-visible) .l-a-sub::after { transform: scaleX(0); }

.js .page-about .l-a-about01-r p {
  transform: translateY(20px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.22, .61, .36, 1);
}
.js .page-about .l-a-about01-r.is-visible p { opacity: 1; transform: none; }
.js .page-about .l-a-about01-r.is-visible p:nth-child(1) { transition-delay: .05s; }
.js .page-about .l-a-about01-r.is-visible p:nth-child(2) { transition-delay: .13s; }
.js .page-about .l-a-about01-r.is-visible p:nth-child(3) { transition-delay: .21s; }
.js .page-about .l-a-about01-r.is-visible p:nth-child(4) { transition-delay: .29s; }
.js .page-about .l-a-about01-r.is-visible p:nth-child(5) { transition-delay: .37s; }

.js .page-about .l-a-quote.is-visible {
  opacity: 1;
  animation: lAReveal .95s cubic-bezier(.22, .61, .36, 1) backwards;
}
@keyframes lAReveal {
  from { opacity: 0; transform: translateY(36px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .js .page-about .l-a-about01-l,
  .js .page-about .l-a-about01-r p,
  .js .page-about .l-a-quote { opacity: 1 !important; transform: none !important; animation: none !important; }
  .l-a-qmark, .l-a-qglow { animation: none !important; }
}
.page-about .l-a-about03 .t1 {
  color: var(--ink);
  font-size: 32px;
  font-weight: 800;
  letter-spacing: 2px;
  line-height: 1.4;
  margin: 0;
}
.page-about .l-a-about03 .t4 {
  width: 64px;
  height: 5px;
  margin: 22px 0 24px;
  border-radius: 6px;
  background: var(--grad);
}
.page-about .l-a-about03 .t2 {
  margin: 0 0 14px;
  color: #3f4658;
  font-size: 15px;
  line-height: 2;
  text-align: left;
}
.page-about .l-a-about03 .t3 {
  display: inline-block;
  margin-top: 14px;
  padding: 8px 20px 9px;
  border: 1px solid rgba(255, 106, 0, .5);
  border-radius: 999px;
  color: var(--brand);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 2px;
  background: rgba(255, 106, 0, .06);
  box-shadow: 0 6px 18px rgba(255, 106, 0, .12);
}

/* 公司简介：左侧图片与右侧文案拉开间距 */
@media (min-width: 992px) {
  .page-about .l-a-about01 .l-a-about03 { padding-left: 45px; }
}

/* ---------- 价值观：长期主义，匠心（位于 about01 容器内、引言下方） ---------- */
.page-about .l-a-values {
  background: transparent;
  padding: 84px 0 0;
  position: relative;
}
/* 卡片区背后的暖色柔光，让白卡从白底上"浮"起来 */
.page-about .l-a-values::before {
  content: "";
  position: absolute;
  left: -6%;
  right: -6%;
  top: 60px;
  height: 72%;
  background: radial-gradient(58% 62% at 50% 0%, rgba(255, 138, 0, .07) 0%, rgba(255, 138, 0, 0) 72%);
  pointer-events: none;
  z-index: 0;
}
.page-about .l-a-values .l-a-about01-l {
  position: relative;
  padding-top: 0;
  margin-bottom: 34px;
  z-index: 1;
}
.page-about .l-a-values-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px;
}
.page-about .l-a-value-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 38px 34px 34px;
  border-radius: 20px;
  border: 1px solid #eaeef5;
  background: linear-gradient(180deg, #ffffff 0%, #fdfefe 100%);
  box-shadow: 0 1px 2px rgba(17, 24, 39, .04), 0 24px 46px -34px rgba(17, 24, 39, .34);
  overflow: hidden;
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
/* 顶部品牌渐变条：hover 时自左向右展开 */
.page-about .l-a-value-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 3px;
  background: var(--grad);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .45s ease;
}
/* 右上角柔光：hover 时浮现 */
.page-about .l-a-value-card::after {
  content: "";
  position: absolute;
  right: -70px;
  top: -70px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 138, 0, .16) 0%, rgba(255, 138, 0, 0) 70%);
  opacity: 0;
  transition: opacity .45s ease;
  pointer-events: none;
}
.page-about .l-a-value-card:hover {
  transform: translateY(-6px);
  border-color: rgba(255, 106, 0, .30);
  box-shadow: 0 2px 4px rgba(17, 24, 39, .05), 0 34px 60px -34px rgba(255, 106, 0, .38);
}
.page-about .l-a-value-card:hover::before { transform: scaleX(1); }
.page-about .l-a-value-card:hover::after { opacity: 1; }
.page-about .l-a-vc-head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
}
.page-about .l-a-vc-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 16px;
  font-size: 25px;
  line-height: 1;
  color: var(--brand);
  background: linear-gradient(150deg, rgba(255, 138, 0, .16) 0%, rgba(255, 61, 0, .05) 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 106, 0, .14);
  transition: transform .35s ease, box-shadow .35s ease;
}
.page-about .l-a-value-card:hover .l-a-vc-icon {
  transform: translateY(-3px) scale(1.06);
  box-shadow: inset 0 0 0 1px rgba(255, 106, 0, .26), 0 14px 24px -16px rgba(255, 106, 0, .6);
}
.page-about .l-a-vc-no {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 2px;
  line-height: 1;
  color: #ccd2de;
  transition: color .35s ease;
}
.page-about .l-a-value-card:hover .l-a-vc-no { color: var(--brand); }
.page-about .l-a-vc-no em {
  font-style: normal;
  margin-right: 3px;
  opacity: .6;
}
.page-about .l-a-vc-title {
  margin: 0 0 8px;
  font-size: 27px;
  font-weight: 800;
  letter-spacing: 2px;
  color: var(--ink);
}
.page-about .l-a-vc-lead {
  margin: 0 0 20px;
  font-size: 14px;
  letter-spacing: .5px;
  color: #7b8296;
}
.page-about .l-a-vc-lead:last-child { margin-bottom: 0; }
.page-about .l-a-vc-sep {
  margin: 0 0 20px;
  border: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 106, 0, .4) 0%, #e9ecf3 38%, #e9ecf3 100%);
}
.page-about .l-a-vc-b {
  position: relative;
  margin: 0 0 7px;
  padding-left: 14px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .5px;
  color: var(--ink);
}
.page-about .l-a-vc-b::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-radius: 50%;
  background: var(--grad);
}
.page-about .l-a-vc-t {
  margin: 0 0 18px;
  padding-left: 14px;
  font-size: 13.5px;
  line-height: 1.9;
  color: #606a7d;
}
.page-about .l-a-vc-t:last-child { margin-bottom: 0; }

/* ---------- 响应式 ---------- */
@media (max-width: 1199px) {
  .page-about .l-a-about01 .t1 { font-size: 28px; }
  .l-a-h2 { font-size: 42px; }
}
@media (max-width: 991px) {
  .page-about .l-a-about01 { padding: 64px 0 68px; }
  .page-about .l-a-about01-row { grid-template-columns: 1fr; gap: 32px; }
  .page-about .l-a-about01-r { padding: 0; border-left: 0; }
  .page-about .l-a-quote { margin-top: 48px; padding: 32px 40px; }
  .l-a-qrow { gap: 18px; }
  .l-a-qtext { margin-bottom: 14px; }
  .l-a-qmark { font-size: 56px; }
  .page-about .l-a-about02 { margin-bottom: 36px; }
  .page-about .l-a-values { padding: 56px 0 0; }
  .page-about .l-a-values .l-a-about01-l { margin-bottom: 36px; }
  .page-about .l-a-values-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
  .page-about .l-a-vc-title { font-size: 22px; }
}
@media (max-width: 767px) {
  .page-about .l-a-about01 { padding: 48px 0 56px; }
  .page-about .l-a-about01 .t1 { font-size: 24px; }
  .l-a-eyebrow { font-size: 14px; letter-spacing: 4px; margin-bottom: 18px; padding-left: 38px; }
  .l-a-eyebrow::before { width: 26px; }
  .l-a-h2 { font-size: 32px; letter-spacing: 0; }
  .l-a-sub { font-size: 17px; padding-bottom: 22px; }
  .page-about .l-a-about01-r p { font-size: 15px; margin-bottom: 16px; }
  .l-a-qmark { font-size: 42px; }
  .l-a-qrow { gap: 12px; }
  .l-a-qtext { font-size: 15px; margin: 0 0 14px; }
  .page-about .l-a-quote { margin-top: 32px; padding: 24px 22px; border-radius: 16px; }
  .l-a-qtext.l-a-qsign { font-size: 14px; letter-spacing: 2px; }
  .page-about .l-a-about01 .t2 { font-size: 14px; }
  .page-about .l-a-about01 .t3 { padding: 8px 18px; font-size: 15px; }
  .page-about .l-a-about02 img { box-shadow: 0 0 0 4px #fff, 0 0 0 5px rgba(255, 106, 0, .18), 0 16px 34px rgba(17, 24, 39, .14); }
  .page-about .l-a-about02::after { width: 42px; height: 42px; top: -10px; right: 14px; }
  .page-about .l-a-values { padding: 40px 0 0; }
  .page-about .l-a-values .l-a-about01-l { margin-bottom: 28px; }
  .page-about .l-a-values-grid { grid-template-columns: 1fr; gap: 18px; }
  .page-about .l-a-value-card { padding: 26px 22px 24px; border-radius: 16px; }
  .page-about .l-a-vc-icon { width: 46px; height: 46px; border-radius: 13px; font-size: 21px; }
  .page-about .l-a-vc-title { font-size: 21px; letter-spacing: 1px; }
  .page-about .l-a-vc-t { font-size: 13px; }
}

/* ---------- 版心宽度：≥992 起 1340，大屏继续随分辨率放大 ----------
@media (min-width: 992px) {
  .container { width: 100%; max-width: var(--page-max); }
}*/

/* 24.1 区块通用标题 .sec-ttl —— 全站公用（服务 / 案例 / 客户 / 团队 / 新闻共用一套） */
.sec-ttl { position: relative; margin: 0 0 40px; }
.sec-ttl h2 {
  position: relative;
  display: inline-block;
  margin: 0;
  padding-bottom: clamp(10px, 1.1vw, 16px);
  /* 区块主标题：随视口平滑缩放；≥1125px 恒为 45px，桌面观感不变 */
  font-size: clamp(26px, 4vw, 45px);
  font-weight: 800;
  letter-spacing: clamp(1px, .25vw, 3px);
  line-height: 1.35;
  color: var(--ink);
}

.sec-ttl .sub {
  max-width: 680px;
  /* 区块副标题：桌面 20px → 移动端 15px 平滑过渡 */
  font-size: clamp(15px, 1.2vw + 5px, 20px);
  font-weight: normal;
  line-height: 1.95;
  color: var(--muted);
}
/* 更多按钮（View）：品牌描边胶囊，hover 渐变填充 + 箭头右移 */
.sec-ttl .more { margin: 26px 0 0; }
.sec-ttl .more a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 46px;
  padding: 0 34px;
  border: 2px solid var(--brand);
  border-radius: 23px;
  background: #fff;
  color: var(--brand);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 2px;
  text-decoration: none;
  transition: all .3s ease;
}
.sec-ttl .more a::after {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-left: 2px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform .3s ease;
}
.sec-ttl .more a:hover {
  background: var(--grad);
  border-color: transparent;
  color: #fff;
  box-shadow: var(--shadow-brand);
  transform: translateY(-2px);
}
.sec-ttl .more a:hover::after { transform: translateX(3px) rotate(45deg); }
/* 居中版 */
.sec-ttl.is-center { text-align: center; }
.sec-ttl.is-center h2::after { left: 50%; transform: translateX(-50%); }
.sec-ttl.is-center .sub { margin-left: auto; margin-right: auto; }
/* 深色底版（新闻资讯等深色区块） */
.sec-ttl.is-light h2 { color: #fff; }
.sec-ttl.is-light .sub { color: rgba(255, 255, 255, .62); }
/* 大号版（首页服务区首屏） */
.sec-ttl.is-lg .sub { margin-top: clamp(12px, 1.2vw, 18px); max-width: 780px; font-size: clamp(14px, 1.2vw + 4px, 18px); line-height: 1.9; }

/* ======================================================================
   「联系我们」  page/contact.html
   ====================================================================== */

/* ---------- ① 顶部：悬浮快速联系条 ---------- */
.page-contact .ct-barwrap { position: relative; z-index: 4; }

.page-contact .ct-bar {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
                   /* 上浮压住 Banner 下沿 */
  overflow: hidden;
  background: linear-gradient(112deg, #171c28 0%, #101521 58%, #241405 100%);
  border-radius: 20px;
  box-shadow: 0 22px 48px rgba(9, 14, 26, .28);
}

.page-contact .ct-bar-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 26px;
  color: #fff;
  text-decoration: none;
  transition: background .35s ease;
}
.page-contact .ct-bar-item:hover { color: #fff; background: rgba(255, 255, 255, .05); }
/* 项间竖向渐隐分割线 */
.page-contact .ct-bar-item + .ct-bar-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 22px;
  bottom: 22px;
  width: 1px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .16) 50%, rgba(255, 255, 255, 0));
}

.page-contact .ct-bar-ico {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  font-size: 22px;
  color: var(--brand);
  background: rgba(255, 106, 0, .14);
  border: 1px solid rgba(255, 106, 0, .28);
  border-radius: 50%;
  transition: color .35s ease, background .35s ease, border-color .35s ease, transform .35s ease;
}
.page-contact .ct-bar-item:hover .ct-bar-ico {
  color: #fff;
  background: var(--grad);
  border-color: transparent;
  transform: translateY(-3px);
}

.page-contact .ct-bar-txt { display: block; min-width: 0; }
.page-contact .ct-bar-txt em {
  display: block;
  margin-bottom: 4px;
  font-style: normal;
  font-size: 12px;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, .55);
}
.page-contact .ct-bar-txt b {
  display: block;
  font-size: 20px;
  font-weight: normal;
  letter-spacing: .5px;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.page-contact .ct-bar-item--static { cursor: default; }

/* ---------- ② 在线留言 ---------- */
.page-contact .ct-sec { padding: 74px 0 86px; }

/* 区块标题已抽成公用组件 .pl-head（见 34.1.2 节），此处不再单独定义 */

/* 主体：左窄栏（二维码 / 承诺） + 右宽栏（表单） */
.page-contact .ct-body {
  display: grid;
  grid-template-columns: minmax(0, 330px) minmax(0, 1fr);
  gap: 34px;
  margin-top: 0;                       /* 与标题的间距由 .pl-head 自带下边距提供 */
}
.page-contact .ct-aside {
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-width: 0;
  height: 100%;
}

/* 微信二维码卡 */
.page-contact .ct-qr-card {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 32px 26px 30px;
  text-align: center;
  background: linear-gradient(180deg, #fff8f3 0%, #ffffff 58%);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--shadow-sm);
}
.page-contact .ct-qr-box {
  display: inline-flex;
  padding: 10px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
}
.page-contact .ct-qr-box img {
  display: block;
  width: 148px;
  height: 148px;
  object-fit: cover;
  border-radius: 8px;
}
.page-contact .ct-qr-tt {
  margin: 18px 0 0;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--ink);
}
.page-contact .ct-qr-p {
  margin: 8px 0 0;
  font-size: 13.5px;
  line-height: 1.85;
  color: var(--muted);
}

/* 服务承诺列表 */
.page-contact .ct-promise {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 10px 24px;
  list-style: none;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--shadow-sm);
}
.page-contact .ct-promise li {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--muted);
  border-bottom: 1px dashed var(--line);
}
.page-contact .ct-promise li:last-child { border-bottom: 0; }
.page-contact .ct-promise li i {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  font-size: 17px;
  color: var(--brand);
  background: rgba(255, 106, 0, .10);
  border-radius: 12px;
}
.page-contact .ct-promise li b {
  display: block;
  margin-bottom: 2px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}

/* 留言表单：下划线输入框 */
.page-contact .ct-panel {
  padding: 42px 44px 44px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--shadow-md);
}
.page-contact .ct-form { margin: 0; }

.page-contact .ct-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px 34px;
  margin-bottom: 30px;
}
.page-contact .ct-field { display: block; min-width: 0; }
.page-contact .ct-field-tt {
  display: block;
  margin-bottom: 10px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .5px;
  color: var(--muted);
}
.page-contact .ct-field-tt em { font-style: normal; color: var(--brand-deep); }

.page-contact .ct-field input,
.page-contact .ct-field textarea {
  display: block;
  width: 100%;
  padding: 6px 2px 12px;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1.5px solid var(--line);
  border-radius: 0;
  outline: none;
  box-shadow: none;
  transition: border-color .3s ease, box-shadow .3s ease;
}
.page-contact .ct-field textarea {
  min-height: 152px;
  padding: 6px 2px 12px;
  line-height: 1.85;
  resize: vertical;
}
.page-contact .ct-field input::placeholder,
.page-contact .ct-field textarea::placeholder { color: #b3bac9; }
.page-contact .ct-field input:focus,
.page-contact .ct-field textarea:focus {
  border-bottom-color: var(--brand);
  box-shadow: 0 1px 0 0 var(--brand);   /* 聚焦时下划线加粗为 2px */
}
.page-contact .ct-field--area { margin-bottom: 6px; }

.page-contact .ct-form-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 22px;
  margin-top: 24px;
}
.page-contact .ct-submit {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 52px;
  padding: 0 40px;
  font-family: var(--font);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #fff;
  background: var(--grad);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: var(--shadow-brand);
  transition: transform .3s ease, box-shadow .3s ease, filter .3s ease;
}
.page-contact .ct-submit i { font-size: 18px; }
.page-contact .ct-submit:hover {
  color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 16px 30px rgba(255, 90, 0, .38);
  filter: brightness(1.05);
}
.page-contact .ct-submit:active { transform: translateY(-1px); }
.page-contact .ct-tip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: var(--muted);
}
.page-contact .ct-tip i { font-size: 14px; color: #2ea44f; }

/* ---------- ③ 响应式 ---------- */
@media (max-width: 1199px) {
  .page-contact .ct-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-contact .ct-bar-item:nth-child(2n)::before { display: none; }
  .page-contact .ct-bar-item:last-child { grid-column: 1 / -1; }
  .page-contact .ct-bar-item:nth-child(n+3) { border-top: 1px solid rgba(255, 255, 255, .08); }
  .page-contact .ct-body { grid-template-columns: minmax(0, 290px) minmax(0, 1fr); gap: 26px; }
  .page-contact .ct-qr-box img { width: 128px; height: 128px; }
}
@media (max-width: 991px) {
  .page-contact .ct-body { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .page-contact .ct-aside { flex-direction: row; align-items: stretch; }
  .page-contact .ct-qr-card,
  .page-contact .ct-promise { flex: 1; }
  .page-contact .ct-panel { padding: 34px 30px 36px; }
}
@media (max-width: 767px) {
  .page-contact .ct-bar {
    grid-template-columns: minmax(0, 1fr);

    border-radius: 16px;
}
  .page-contact .ct-bar-item { padding: 18px 20px; }
  .page-contact .ct-bar-item::before { display: none; }
  .page-contact .ct-bar-item + .ct-bar-item { border-top: 1px solid rgba(255, 255, 255, .08); }
  .page-contact .ct-bar-ico { width: 44px; height: 44px; font-size: 19px; }
  .page-contact .ct-bar-txt b { font-size: 15px; }

  .page-contact .ct-sec { padding: 54px 0 62px; }
  .page-contact .ct-body { margin-top: 36px; gap: 24px; }
  .page-contact .ct-aside { flex-direction: column; }
  .page-contact .ct-row { grid-template-columns: minmax(0, 1fr); gap: 22px; margin-bottom: 22px; }
  .page-contact .ct-panel { padding: 26px 20px 30px; border-radius: 16px; }
  .page-contact .ct-submit { width: 100%; justify-content: center; }
}

/* ==========================================================================
   25. 产品 / 案例列表页（product/list.html）
   ========================================================================== */

.listCase-bg {
  position: relative;
  isolation: isolate; /* 建立层叠上下文，供装饰圆置于内容之下 */
  overflow: hidden;   /* 裁掉溢出边界的装饰圆 */
  background-color: #fff;
  background-image: url("../images/case-bg1.jpg");
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% auto; /* 始终铺满宽度，高度按原图比例自适应 */
}

.lc-hero {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 32px 56px;
  padding: 106px 0;
  color: #fff;
}

/* 文案块：左侧渐隐竖条 + 整体投影，保证白字在底图上清晰 */
.lc-hero-txt {
  position: relative;
  z-index: 1;
  min-width: 0;
  padding-left: 30px;
  text-shadow: 0 2px 14px rgba(23, 45, 77, .30);
}
.lc-hero-txt::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 4px;
  border-radius: 4px;
  background: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, .12) 100%);
}

.lc-hero-title {
  font-size: 60px;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: 3px;
  color: #fff;
}
.lc-hero-sub {
  margin-top: 16px;
  font-size: 17px;
  letter-spacing: 2px;
  color: rgba(255, 255, 255, .85);
}
.lc-hero-en {
  margin-top: 12px;
  font-family: "Bebas Neue", var(--font);
  font-size: 34px;
  line-height: 1;
  letter-spacing: 8px;
  color: rgba(255, 255, 255, .32);
}

/* 数据卡：磨砂白卡 + 顶部渐变条 + 右下柔光，悬停上浮 */
.lc-hero-stats {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 24px;
}
.lc-hero-stats .stat {
  position: relative;
  min-width: 168px;
  padding: 24px 26px 22px;
  overflow: hidden;
  text-align: center;
  background: rgba(255, 255, 255, .92);
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: 18px;
  box-shadow: 0 14px 34px rgba(28, 54, 90, .18);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: transform .35s ease, box-shadow .35s ease;
}
.lc-hero-stats .stat::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 4px;
  background: linear-gradient(90deg, #2f5f9c 0%, #8fb6e0 100%);
}
.lc-hero-stats .stat::after {
  content: "";
  position: absolute;
  right: -38px;
  bottom: -42px;
  width: 112px;
  height: 112px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(90, 140, 200, .18) 0%, rgba(90, 140, 200, 0) 70%);
  pointer-events: none;
}
.lc-hero-stats .stat-label {
  position: relative;
  display: block;
  font-size: 14px;
  letter-spacing: 1px;
  color: #6d8099;
}
.lc-hero-stats .stat-num {
  position: relative;
  display: block;
  margin-top: 10px;
  font-family: "Bebas Neue", var(--font);
  font-size: 52px;
  line-height: 1;
  letter-spacing: 2px;
  color: #2f5f9c;
}
.lc-hero-stats .stat-num em {
  font-style: normal;
  font-size: 24px;
  margin-left: 2px;
  color: #7ea3cc;
}
@media (hover: hover) {
  .lc-hero-stats .stat:hover {
    transform: translateY(-5px);
    box-shadow: 0 22px 44px rgba(28, 54, 90, .24);
}
}

/* ---------- 25.2 产品网格（.pl-gallery） ---------- */
/* item 外观对齐首页「精品案例」（.indexCase）：悬停上浮 + 文案条上滑淡入 + 右下圆形箭头 */
.pl-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pl-gallery > li {
  position: relative;
  min-width: 0;
  background: #fff;
  border: 0;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(17, 24, 39, .07);
  transition: translate .5s cubic-bezier(.22, .61, .36, 1), box-shadow .5s ease;
}
.pl-gallery > li:hover {
  translate: 0 -8px;

}

/* 图片区 */
.pl-gallery .pic {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 11;
}
.pl-gallery .pic img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  transition: transform 1s cubic-bezier(.22, .61, .36, 1);
}

/* 底部文案条：默认隐藏（只留纯净图片），hover 上滑淡入标题 + 类型 + 右下圆形按钮 */
.pl-gallery .pic .cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: block;
  padding: 52px 78px 20px 22px;
  background: linear-gradient(180deg, rgba(6, 10, 18, 0) 0%, rgba(6, 10, 18, .5) 45%, rgba(6, 10, 18, .92) 100%);
  color: #fff;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .45s ease, transform .5s cubic-bezier(.22, .61, .36, 1);
}
.pl-gallery .pic .cap .t {
  display: block;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: .5px;
  line-height: 1.45;
  color: #fff;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  transition: transform .45s cubic-bezier(.22, .61, .36, 1);
}

/* hover 细节 */
.pl-gallery > li:hover .pic img { transform: scale(1.08); }
.pl-gallery > li:hover .pic .cap,
.pl-gallery > li:focus-within .pic .cap { opacity: 1; transform: translateY(0); }
.pl-gallery > li:hover .pic .cap .t { transform: translateY(-2px); }
.pl-gallery > li:hover .pic .cap .d { color: rgba(255, 255, 255, .95); }
.pl-gallery > li:hover .pic .cap::after {
  background-color: var(--brand);
  border-color: var(--brand);
  box-shadow: 0 10px 22px rgba(255, 90, 0, .45);
  transform: translateX(3px);
}
/* 触屏设备没有 hover：文案条常显，避免手机 / 平板看不到标题与按钮 */
@media (hover: none) {
  .pl-gallery .pic .cap { opacity: 1; transform: none; }
}

/* ---------- 25.3 空状态（.pl-empty） ---------- */
.pl-empty {

  color: var(--muted);

}
.pl-empty i {
  font-size: 48px;
  line-height: 1;
  color: #c9d0dc;
}
.pl-empty p { margin: 16px 0 0; font-size: 15px; }

/* ---------- 25.4 响应式 ---------- */
@media (max-width: 1199px) {
  .pl-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
}
@media (max-width: 991px) {
  .lc-hero { padding: 78px 0; gap: 26px 40px; }
  .lc-hero-title { font-size: 44px; }
  .lc-hero-sub { font-size: 16px; }
  .lc-hero-en { font-size: 28px; letter-spacing: 6px; }
  .lc-hero-stats .stat { min-width: 142px; padding: 18px 20px; }
  .lc-hero-stats .stat-num { font-size: 42px; }
}
@media (max-width: 767px) {
  .lc-hero { padding: 56px 0; gap: 24px; }
  .lc-hero-txt { padding-left: 20px; }
  .lc-hero-title { font-size: 30px; letter-spacing: 2px; }
  .lc-hero-sub { margin-top: 12px; font-size: 15px; letter-spacing: 1px; }
  .lc-hero-en { font-size: 22px; letter-spacing: 5px; }
  .lc-hero-stats { width: 100%; gap: 12px; }
  .lc-hero-stats .stat { flex: 1; min-width: 0; padding: 16px 10px; }
  .lc-hero-stats .stat-num { font-size: 36px; }
  /* 案例卡片：小屏收紧圆角、图片比例、文案与按钮尺寸 */
  .pl-gallery { grid-template-columns: minmax(0, 1fr); gap: 18px; }

  .pl-gallery .pic { aspect-ratio: 4 / 3; }
  .pl-gallery .pic .cap { padding: 46px 66px 16px 16px; }
  .pl-gallery .pic .cap .t { font-size: 16px; }
  .pl-gallery .pic .cap .d { margin-top: 6px; padding-left: 18px; font-size: 11px; }
  .pl-gallery .pic .cap .d::before { width: 11px; }
  .pl-gallery .pic .cap::after { right: 16px; bottom: 15px; width: 34px; height: 34px; background-size: 13px 13px; }
}

/* ==========================================================================
   33. 文章详情页底部「我们的案例」：复用首页 .sec-ttl + .indexCase 卡片
   --------------------------------------------------------------------------
   1) 标题区直接使用首页公用组件 .sec-ttl（居中版），与首页「精品案例」同款观感；
   2) 卡片直接使用首页 .indexCase 的 item 结构（.row > ul > li > a.pic），
      上浮 + 文案条上滑淡入 + 右下圆形箭头全部沿用 24.4 节既有样式，不重复实现；
   3) 本区只做两处适配：底色改白（承接上方浅灰文章区，形成区块节奏），
      以及左右对齐（首页把 ul 内边距清零，.row 的负外边距会让卡片外扩 12px）。
   ========================================================================== */

/* 区块：白底 + 顶部细分隔线 */
.indexCase.nl-detail-case {
  padding: 56px 0 64px;
  background: #fff;
  border-top: 1px solid var(--line);
}

/* 标题区：首页 .sec-ttl 是首页尺度（45px 大标题），详情页收一档，避免压过文章主标题 */
.indexCase.nl-detail-case .sec-ttl { margin: 0 0 34px; }
.indexCase.nl-detail-case .sec-ttl h2 { font-size: 38px; }
.indexCase.nl-detail-case .sec-ttl .sub { font-size: 17px; line-height: 1.95; }
.indexCase.nl-detail-case .sec-ttl .more { margin-top: 22px; }

/* 卡片网格：补回容器内边距，与上方文章卡片左右对齐 */
.indexCase.nl-detail-case .row > ul { padding: 0 12px; }

@media (max-width: 991px) {
  .indexCase.nl-detail-case { padding: 48px 0 52px; }
  .indexCase.nl-detail-case .sec-ttl { margin-bottom: 28px; }
  .indexCase.nl-detail-case .sec-ttl h2 { font-size: 30px; letter-spacing: 2px; }
  .indexCase.nl-detail-case .sec-ttl .sub { font-size: 15px; }
}

@media (max-width: 767px) {
  .indexCase.nl-detail-case { padding: 40px 0 44px; }
  .indexCase.nl-detail-case .sec-ttl { margin-bottom: 22px; }
  .indexCase.nl-detail-case .sec-ttl h2 { padding-bottom: 12px; font-size: 26px; letter-spacing: 1px; }
  .indexCase.nl-detail-case .sec-ttl .sub { font-size: 14px; }
  .indexCase.nl-detail-case .sec-ttl .more { margin-top: 18px; }
  .indexCase.nl-detail-case .sec-ttl .more a { height: 40px; padding: 0 26px; font-size: 14px; }
  /* 小屏：外层 .container 已带 12px 内边距，无需再补 */
  .indexCase.nl-detail-case .row > ul { padding: 0; }
}

/* ==========================================================================
   34. 产品列表页视觉升级（product/list.html）
   --------------------------------------------------------------------------
   1) 用新的 .pl-page 容器把整个页面拆成「暗色英雄区 + 浅色内容区」两段；
   2) 仅在本容器下覆盖 .listCase-bg、.pglist 等共享类，避免影响其它页面；
   3) 所有样式以 `--brand` / `--grad` 为品牌色，对齐首页主题。
   ========================================================================== */

/* 页面根：铺满整屏，纯色为英雄区让位（背景图取消，避免与暗色英雄区打架） */
.pl-page.listCase-bg {
  background-color: #060a16;
  background-image: none;
}

/* ---------- 34.1 英雄区（暗色 + 极光 + 玻璃态数据卡） ---------- */
.pl-hero {
  position: relative;
  isolation: isolate;          /* 装饰层与内容分层 */
  overflow: hidden;
  padding: clamp(120px, 14vw, 168px) 0 clamp(120px, 14vw, 160px);
  color: #fff;
}

/* 装饰层容器（绝对定位，覆盖整个 hero） */
.pl-hero-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(1200px 600px at 12% -10%, rgba(255, 138, 0, .22), transparent 60%),
    radial-gradient(900px 520px at 110% 10%, rgba(80, 90, 220, .28), transparent 60%),
    radial-gradient(700px 480px at 50% 110%, rgba(255, 90, 0, .14), transparent 60%),
    linear-gradient(180deg, #0a1226 0%, #060a16 60%, #04070f 100%);
}

/* 极光球 */
.pl-hero-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: .55;
  pointer-events: none;
  animation: plOrb 14s ease-in-out infinite alternate;
}
.pl-hero-orb-1 { top: -120px; left: -80px;  width: 360px; height: 360px; background: #ff6a00; }
.pl-hero-orb-2 { top: 30%;    right: -120px; width: 420px; height: 420px; background: #5b6cff; animation-delay: -4s; }
.pl-hero-orb-3 { bottom: -160px; left: 40%; width: 460px; height: 460px; background: #ff3d6e; opacity: .35; animation-delay: -8s; }
@keyframes plOrb {
  0%   { transform: translate3d(0,0,0)     scale(1); }
  50%  { transform: translate3d(40px,30px,0) scale(1.08); }
  100% { transform: translate3d(-30px,40px,0) scale(.95); }
}

/* 网格底纹 */
.pl-hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, .045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 35%, transparent 75%);
          mask-image: radial-gradient(ellipse at center, #000 35%, transparent 75%);
}

/* 噪点（细微质感，可被低性能设备忽略） */
.pl-hero-noise {
  position: absolute;
  inset: 0;
  opacity: .04;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .7 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* 文案块 */
.pl-hero-in {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(28px, 4vw, 64px);
}
.pl-hero-txt {
  position: relative;
  flex: 1 1 560px;
  min-width: 0;
}

/* 面包屑 */
.pl-crumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 22px;
  font-size: 13px;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, .55);
}
.pl-crumb a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: rgba(255, 255, 255, .72);
  transition: color .25s ease;
}
.pl-crumb a:hover { color: #fff; text-decoration: none; }
.pl-crumb i { font-size: 12px; opacity: .55; }
.pl-crumb span { color: rgba(255, 255, 255, .92); }

/* 标题 */
.pl-hero-title {
  position: relative;
  display: inline-block;
  margin: 0;
  font-size: clamp(38px, 5.6vw, 54px);
  font-weight: 900;
  line-height: 1.18;
  letter-spacing: clamp(2px, .35vw, 5px);
  color: #fff;
  text-shadow: 0 4px 24px rgba(8, 12, 28, .35);
}
.pl-hero-title em {
  font-style: normal;
  background: linear-gradient(180deg, #ffffff 0%, #c8d4ea 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
}

.pl-hero-sub {
  margin: 20px 0 0;
  font-size: clamp(15px, 1.2vw, 18px);
  letter-spacing: 2px;
  color: rgba(255, 255, 255, .82);
}
.pl-hero-en {
  margin-top: 14px;
  font-family: "Bebas Neue", var(--font);
  font-size: clamp(20px, 2vw, 32px);
  letter-spacing: clamp(5px, .8vw, 10px);
  color: rgba(255, 255, 255, .28);
}

/* 标签胶囊 */
.pl-hero-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}
.pl-hero-chips li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12);
  font-size: 13px;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, .82);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
}
.pl-hero-chips li i { color: var(--brand); font-size: 14px; }

/* 右侧数据卡：玻璃态 */
.pl-hero-side {
  flex: 0 1 420px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-content: start;
}
.pl-stat {
  position: relative;
  overflow: hidden;
  padding: 22px 22px 20px;
  border-radius: 18px;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .14);
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .28);
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.pl-stat::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 3px;
  background: linear-gradient(90deg, #ff8a00 0%, #ff3d00 100%);
}
.pl-stat::after {
  content: "";
  position: absolute;
  right: -40px; bottom: -44px;
  width: 120px; height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 138, 0, .28) 0%, rgba(255, 138, 0, 0) 70%);
  pointer-events: none;
}
.pl-stat-l {
  display: block;
  font-size: 13px;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, .65);
}
.pl-stat-n {
  display: block;
  margin-top: 8px;
  font-family: "Bebas Neue", var(--font);
  font-size: clamp(38px, 4vw, 54px);
  line-height: 1;
  letter-spacing: 2px;
  color: #fff;
}
.pl-stat-n em {
  font-style: normal;
  font-size: 22px;
  margin-left: 2px;
  color: #ffb677;
}

@keyframes plBar {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
@media (hover: hover) {
  .pl-stat:hover {
    transform: translateY(-4px);
    border-color: rgba(255, 138, 0, .55);
    box-shadow: 0 22px 44px rgba(0, 0, 0, .35), 0 0 0 1px rgba(255, 138, 0, .25);
}
}

/* CTA 按钮（跨两列）：药丸形 + 渐变 + 扫光，与首页 .idx-cta-btn 同一视觉语言 */
.pl-hero-cta {
  position: relative;
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 56px;
  padding: 14px 28px;
  border: 0;
  border-radius: 999px;
  overflow: hidden;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 2px;
  line-height: 1.2;
  text-align: center;
  color: #fff;
  text-decoration: none;            /* 覆盖 bootstrap 对 a 的下划线 */
  -webkit-tap-highlight-color: transparent;
  background: var(--grad);
  box-shadow: 0 14px 28px rgba(255, 90, 0, .35);
  transition: transform .3s ease, box-shadow .3s ease, filter .3s ease, color .3s ease;
}
/* 悬停时掠过的高光 */
.pl-hero-cta::after {
  content: "";
  position: absolute;
  top: 0;
  left: -70%;
  width: 45%;
  height: 100%;
  pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .3), transparent);
  transform: skewX(-18deg);
  transition: left .6s ease;
}
.pl-hero-cta i {
  position: relative;
  font-size: 16px;
  transition: transform .3s ease;
}
/* 链接各状态统一白色：style.css 的 a:visited(#333) / a:active(#f30) 优先级更高，
   不覆盖会导致按钮被点过一次后文字变暗、按下时泛红 */
.pl-hero-cta:link,
.pl-hero-cta:visited,
.pl-hero-cta:active {
  color: #fff;
  text-decoration: none;
}
.pl-hero-cta:hover,
.pl-hero-cta:focus {
  color: #fff;
  text-decoration: none;
  transform: translateY(-2px);
  filter: brightness(1.04);
  box-shadow: 0 18px 38px rgba(255, 90, 0, .45);
}
.pl-hero-cta:hover::after,
.pl-hero-cta:focus::after { left: 125%; }
.pl-hero-cta:hover i,
.pl-hero-cta:focus i { transform: translateX(5px); }
.pl-hero-cta:active { transform: translateY(0); }
.pl-hero-cta:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* 向下滚动指示器 */
.pl-scroll {
  position: absolute;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 32px;
  color: rgba(255, 255, 255, .65);
  text-decoration: none;
}
.pl-scroll span {
  position: relative;
  width: 22px;
  height: 36px;
  border: 1.5px solid rgba(255, 255, 255, .45);
  border-radius: 14px;
}
.pl-scroll span::before {
  content: "";
  position: absolute;
  left: 50%; top: 6px;
  width: 3px; height: 7px;
  margin-left: -1.5px;
  border-radius: 3px;
  background: #fff;
  animation: plScrollDot 1.8s ease-in-out infinite;
}
@keyframes plScrollDot {
  0%   { transform: translateY(0);    opacity: 1; }
  60%  { transform: translateY(14px); opacity: 0; }
  100% { transform: translateY(0);    opacity: 0; }
}
.pl-scroll em {
  font-family: "Bebas Neue", var(--font);
  font-style: normal;
  font-size: 11px;
  letter-spacing: 3px;
  color: rgba(255, 255, 255, .55);
}

/* ---------- 34.1.2 内页区块标题（公用组件 .pl-head，独立于首页 .sec-ttl） ----------
   ------------------------------------------------------------------------------ */
.pl-head {
  position: relative;
  margin: 0 0 44px;
}
.pl-head-en {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: var(--brand);
}
.pl-head-tt {
  margin: 12px 0 0;
  font-size: clamp(26px, 2.3vw, 36px);
  font-weight: 900;
  line-height: 1.28;
  letter-spacing: 3px;
  color: var(--ink);
}
.pl-head-p {
  margin: 5px 0 0;
  max-width: 720px;
  font-size: 15px;
  line-height: 1.9;
  color: var(--muted);
}
/* 居中版：英文小标 / 标题 / 短线 / 描述整体居中 */
.pl-head.is-center { text-align: center; }
.pl-head.is-center .pl-head-p { margin-left: auto; margin-right: auto; }
/* 深色底版（暗色区块内使用） */
.pl-head.is-light .pl-head-tt { color: #fff; }
.pl-head.is-light .pl-head-p { color: rgba(255, 255, 255, .62); }
/* 小号版（窄容器 / 卡片组标题） */
.pl-head.is-sm { margin-bottom: 28px; }
.pl-head.is-sm .pl-head-tt { font-size: clamp(22px, 1.9vw, 28px); letter-spacing: 2px; }
.pl-head.is-sm .pl-head-tt::after { margin-top: 12px; }
.pl-head.is-sm .pl-head-p { margin-top: 12px; font-size: 14px; }

@media (max-width: 991px) {
  .pl-head { margin-bottom: 36px; }
}
@media (max-width: 767px) {
  .pl-head { margin-bottom: 28px; }
  .pl-head-en { font-size: 12px; letter-spacing: 4px; }
  .pl-head-tt { font-size: 24px; letter-spacing: 1px; }
  .pl-head-tt::after { margin-top: 13px; }
  .pl-head-p { font-size: 14px; line-height: 1.8; }
}

/* ---------- 34.1.3 营销难题卡片（.sg-trouble） ---------- */
.sg-trouble-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.sg-trouble {
  position: relative;
  overflow: hidden;
  padding: 44px 34px 40px;
  background: #fff;
  border: 1px solid rgba(16, 42, 76, .08);
  border-radius: 20px;
  box-shadow: 0 18px 44px -30px rgba(16, 42, 76, .45);
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.sg-trouble:hover {
  transform: translateY(-8px);
  border-color: rgba(0, 108, 255, .28);
  box-shadow: 0 30px 60px -30px rgba(0, 108, 255, .45);
}
.sg-trouble-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  font-size: 28px;
  color: var(--brand);
  background: rgba(0, 108, 255, .08);
  border-radius: 18px;
  transition: color .35s ease, background .35s ease;
}
.sg-trouble:hover .sg-trouble-ico { color: #fff; background: var(--brand); }
.sg-trouble-mark {
  position: absolute;
  top: 20px;
  right: 24px;
  font-size: 68px;
  font-weight: 900;
  line-height: 1;
  color: rgba(16, 42, 76, .05);
  pointer-events: none;
  user-select: none;
}
.sg-trouble-tt {
  margin: 22px 0 0;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: 1px;
  color: var(--ink);
}
.sg-trouble-p {
  margin: 12px 0 0;
  font-size: 15px;
  line-height: 1.9;
  color: var(--muted);
}
@media (max-width: 991px) {
  .sg-trouble-list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  .sg-trouble-list { grid-template-columns: 1fr; gap: 18px; }
  .sg-trouble { padding: 34px 24px 32px; }
  .sg-trouble-mark { font-size: 56px; }
}

/* ---------- 34.1.4 优势卡片（.sg-why） ---------- */
.sg-why-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.sg-why-item {
  position: relative;
  overflow: hidden;
  padding: 34px 34px 32px;
  background: #fff;
  border: 1px solid rgba(17, 24, 39, .07);
  border-radius: 20px;
  box-shadow: 0 18px 44px -32px rgba(17, 24, 39, .5);
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.sg-why-item::before {                            /* 悬停时左侧品牌色竖条展开 */
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--grad);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .35s ease;
}
.sg-why-item:hover {
  transform: translateY(-6px);
  border-color: rgba(255, 106, 0, .24);
  box-shadow: 0 26px 56px -30px rgba(255, 106, 0, .45);
}
.sg-why-item:hover::before { transform: scaleY(1); }
.sg-why-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  font-size: 26px;
  color: var(--brand);
  background: rgba(255, 106, 0, .1);
  border-radius: 16px;
  transition: color .35s ease, background .35s ease;
}
.sg-why-item:hover .sg-why-ico { color: #fff; background: var(--grad); }
.sg-why-num {
  position: absolute;
  top: 26px;
  right: 30px;
  font-family: Arial, sans-serif;
  font-size: 46px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -2px;
  color: rgba(17, 24, 39, .06);
  pointer-events: none;
  user-select: none;
}
.sg-why-tt {
  margin: 20px 0 0;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: 1px;
  color: var(--ink);
}
.sg-why-p {
  margin: 10px 0 0;
  font-size: 15px;
  line-height: 1.9;
  color: var(--muted);
}
@media (max-width: 767px) {
  .sg-why-list { grid-template-columns: 1fr; gap: 16px; }
  .sg-why-item { padding: 28px 24px 26px; }
  .sg-why-num { top: 22px; right: 22px; font-size: 38px; }
}

/* ---------- 34.1.5 服务项目交替图文（.sg-provide） ---------- */
.page-svc .sg-block.sg-why {
  background:
    radial-gradient(680px 360px at 6% 6%, rgba(255, 122, 26, .06), transparent 72%),
    linear-gradient(180deg, #ffffff 0%, #fdfcfa 100%);
}
.page-svc .sg-block.sg-why::before,
.page-svc .sg-block.sg-provide::before {         /* 顶部 1px 渐隐分隔线 */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(17, 24, 39, .07) 22%, rgba(17, 24, 39, .07) 78%, transparent);
}
.page-svc .sg-block.sg-provide {
  background:
    radial-gradient(700px 380px at 88% 4%, rgba(255, 122, 26, .07), transparent 72%),
    radial-gradient(560px 340px at 4% 96%, rgba(255, 122, 26, .05), transparent 74%),
    linear-gradient(180deg, #f8f9fc 0%, #eef1f7 100%);
}
.page-svc .sg-block.sg-provide::after {           /* 极淡网格底纹，四周淡出 */
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(rgba(17, 24, 39, .032) 1px, transparent 1px),
    linear-gradient(90deg, rgba(17, 24, 39, .032) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(circle at 50% 50%, #000 24%, transparent 76%);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 24%, transparent 76%);
}
/* 三列网格，卡片内“上图下文”纵向排布 + 序号徽标压图 */
.sg-provide-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 1.6vw, 26px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.sg-provide-item {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #ffffff 0%, #fffdfb 100%);
  border: 1px solid rgba(17, 24, 39, .07);
  border-radius: 20px;
  box-shadow: 0 18px 44px -38px rgba(17, 24, 39, .5);
  transition: transform .4s ease, box-shadow .4s ease, border-color .4s ease;
}
.sg-provide-item::before {                        /* 顶部品牌渐变色条，悬停展开 */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  z-index: 2;
  background: var(--grad);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s ease;
}
.sg-provide-item:hover {
  transform: translateY(-10px);
  border-color: rgba(255, 106, 0, .24);
  box-shadow: 0 32px 64px -34px rgba(255, 106, 0, .42);
}
.sg-provide-item:hover::before { transform: scaleX(1); }
.sg-provide-pic {
  position: relative;
  z-index: 1;
  overflow: hidden;
  flex: 0 0 auto;
  height: clamp(140px, 12vw, 280px);
  background: #eef1f7;
}
.sg-provide-pic::after {                          /* 底部渐隐，与文字区自然衔接 */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 34%;
  background: linear-gradient(180deg, rgba(17, 24, 39, 0), rgba(17, 24, 39, .22));
  pointer-events: none;
}
.sg-provide-pic img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s ease;
}
.sg-provide-item:hover .sg-provide-pic img { transform: scale(1.06); }
.sg-provide-bd {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  padding: clamp(40px, 3.2vw, 48px) clamp(22px, 1.9vw, 28px) clamp(24px, 2vw, 28px);
}
.sg-provide-num {                                 /* 序号徽标：压图片下沿 */
  position: absolute;
  top: -26px;
  left: clamp(22px, 1.9vw, 28px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 52px;
  height: 52px;
  padding: 0 12px;
  font-family: Arial, sans-serif;
  font-size: 18px;
  font-weight: 900;
  color: var(--brand);
  background: #fff;
  border: 1px solid rgba(255, 106, 0, .2);
  border-radius: 15px;
  box-shadow: 0 0 0 5px #fff, 0 12px 24px -16px rgba(17, 24, 39, .55);
  transition: color .35s ease, background .35s ease, border-color .35s ease, transform .35s ease;
}
.sg-provide-item:hover .sg-provide-num {
  color: #fff;
  background: var(--grad);
  border-color: transparent;
  transform: translateY(-4px);
}
.sg-provide-tt {
  margin: 0;
  font-size: clamp(19px, 1.15vw, 22px);
  font-weight: 800;
  letter-spacing: .5px;
  color: var(--ink);
}
.sg-provide-tt::after {                           /* 标题下品牌短线，悬停拉长 */
  content: "";
  display: block;
  width: 40px;
  height: 3px;
  margin-top: 12px;
  border-radius: 3px;
  background: var(--grad);
  transition: width .4s ease;
}
.sg-provide-item:hover .sg-provide-tt::after { width: 68px; }
.sg-provide-p {
  margin: 14px 0 0;
  font-size: 15px;
  line-height: 1.9;
  color: var(--muted);
}
.sg-provide-tags {                                 /* 核心关键词标签 */
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}
.sg-provide-tags li {
  padding: 5px 12px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .5px;
  color: var(--brand);
  background: rgba(255, 106, 0, .08);
  border: 1px solid rgba(255, 106, 0, .16);
  border-radius: 999px;
  transition: color .3s ease, background .3s ease, border-color .3s ease, transform .3s ease;
}
.sg-provide-item:hover .sg-provide-tags li {
  color: #fff;
  background: var(--grad);
  border-color: transparent;
  transform: translateY(-2px);
}
@media (max-width: 1199px) {
  .sg-provide-tags li { padding: 4px 10px; font-size: 12px; }
}
@media (max-width: 991px) {
  .sg-provide-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sg-provide-pic { height: 168px; }
  .sg-provide-bd { padding: 42px 22px 26px; }
  .sg-provide-num { top: -24px; left: 22px; min-width: 48px; height: 48px; font-size: 17px; border-radius: 14px; }
}
@media (max-width: 767px) {
  .sg-provide-list { grid-template-columns: 1fr; gap: 18px; }
  .sg-provide-pic { height: 180px; }
  .sg-provide-bd { padding: 42px 20px 26px; }
  .sg-provide-num { top: -24px; left: 20px; }
  .sg-provide-tt { font-size: 19px; }
}
@media (max-width: 575px) {
  .sg-provide-item { border-radius: 18px; }
  .sg-provide-pic { height: 150px; }
  .sg-provide-bd { padding: 38px 18px 22px; }
  .sg-provide-num { top: -22px; left: 18px; min-width: 44px; height: 44px; font-size: 16px; border-radius: 12px; }
  .sg-provide-tags li { font-size: 12px; }
}

/* ---------- 34.2 主体内容区（浅色） ---------- */
.pl-main {
  position: relative;
  padding: clamp(56px, 7vw, 92px) 0 clamp(64px, 8vw, 104px);
  background:  #ffffff ;
}

/* ---------- 34.3 产品网格 ---------- */
/* 卡片本体继承 24.2 节（section 25）既有的 3 列网格 / 悬停下浮 / 右下圆形箭头；
   此处只做 4 处增强：悬浮光晕、底部光泽、品牌色高亮、点击波纹 */
.pl-gallery > li {
  border-radius: 18px;
}
.pl-gallery .pic {
  border-radius: 18px;
}
/* 图片光泽流光（hover 时扫过） */
.pl-gallery .pic-shine {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .35) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform .9s cubic-bezier(.22, .61, .36, 1);
}
.pl-gallery > li:hover .pic-shine { transform: translateX(120%); }
/* 强化 cap 顶部细条：品牌色发光短线 */
.pl-gallery .pic .cap { padding-top: 56px; }

/* 元信息小帽（类型）独立样式：浅色玻璃条 */
.pl-gallery .pic .cap-meta {
  display: inline-block;
  margin-bottom: 10px;
  padding: 4px 10px;
  font-size: 11px;
  letter-spacing: 1px;
  color: #fff;
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px;
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
}
.pl-gallery .pic .cap .d i { font-size: 13px; vertical-align: -1px; }

/* 悬浮阴影：加入品牌色外发光 */
.pl-gallery > li:hover {
  box-shadow:
    0 24px 50px rgba(17, 24, 39, .16),
    0 0 0 1px rgba(255, 106, 0, .18),
    0 0 40px rgba(255, 90, 0, .12);
}

/* ---------- 34.4 空状态 ---------- */
.pl-empty {
  position: relative;
  padding: 92px 24px 88px;
  text-align: center;
  background: #fff;
  border: 1px dashed #dfe4ec;
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(17, 24, 39, .04);
}
.pl-empty-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 138, 0, .14) 0%, rgba(255, 138, 0, 0) 70%);
  margin-bottom: 20px;
}
.pl-empty-ico i {
  font-size: 44px;
  line-height: 1;
  color: var(--brand);
}
.pl-empty-t {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
}
.pl-empty-s {
  margin: 8px 0 22px;
  font-size: 14px;
  color: var(--muted);
}
.pl-empty-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 20px;
  border-radius: 999px;
  background: var(--grad);
  color: #fff;
  font-size: 13px;
  letter-spacing: 1px;
  box-shadow: 0 10px 22px rgba(255, 90, 0, .30);
  transition: transform .25s ease, box-shadow .25s ease;
}
.pl-empty-back:hover { transform: translateY(-2px); box-shadow: 0 14px 28px rgba(255, 90, 0, .38); }

/* ---------- 34.5 分页（容器局部升级，不影响其它页） ---------- */
.pl-page .pglist { padding: 44px 0 0; }
.pl-page .pglist a {
  border-radius: 12px;
  font-weight: 600;
  box-shadow: 0 2px 6px rgba(17, 24, 39, .04);
}

/* ---------- 34.6 响应式 ---------- */
@media (max-width: 1199px) {
  .pl-hero { padding: 120px 0 130px; }
}
@media (max-width: 991px) {
  .pl-hero { padding: 104px 0 112px; }
  .pl-hero-side { flex: 1 1 100%; max-width: 660px; grid-template-columns: 1fr 1fr; }
  .pl-hero-title { font-size: clamp(34px, 6vw, 52px); }
  .pl-scroll { display: none; }
}
@media (max-width: 767px) {
  .pl-hero { padding: 30px 0 42px; }
  .pl-hero-txt { padding-left: 0; }
  .pl-hero-title { font-size: 34px; letter-spacing: 2px; }
  .pl-hero-title em { display: inline; }
  .pl-hero-mark { right: -6px; bottom: 8px; width: 10px; height: 10px; }
  .pl-hero-sub { font-size: 14px; letter-spacing: 1px; }
  .pl-hero-en { font-size: 18px; letter-spacing: 5px; }
  .pl-hero-chips { gap: 8px 10px; }
  .pl-hero-chips li { font-size: 12px; padding: 6px 12px; }

  .pl-hero-side { grid-template-columns: 1fr; }
  .pl-stat { padding: 18px 18px 16px; }
  .pl-stat-n { font-size: 38px; }
  .pl-hero-cta { min-height: 50px; padding: 12px 18px; font-size: 14px; letter-spacing: 1px; }

  .pl-empty { padding: 60px 18px; }
  .pl-empty-ico { width: 72px; height: 72px; margin-bottom: 14px; }
  .pl-empty-ico i { font-size: 34px; }
}

/* ==========================================================================
   35. 产品详情页视觉升级（product/details.html）
   --------------------------------------------------------------------------
   1) 全部选择器以 .pd-detail 打头，该类仅产品详情页使用，文章详情页不受影响；
   2) 在 23b / 23c 既有排版之上做「卡片化 + 品牌色」增强：
      英文眉标标题区、参数表规格卡、双卡式上下篇、橙卡服务清单编号化；
   3) 因本段位于文件末尾，会覆盖前文旧断点，故在 35.7 补回移动端间距。
   ========================================================================== */

/* ---------- 35.1 正文白卡 / 右侧橙卡：圆角与投影升级 ---------- */

/* ---------- 35.2 标题区：英文眉标 + 品牌渐变现线 ---------- */

.pd-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 13px;
  padding: 5px 14px 5px 12px;
  border-radius: 999px;
  color: var(--brand);
  background: rgba(255, 106, 0, .08);
  border: 1px solid rgba(255, 106, 0, .16);
}
.pd-eyebrow i { font-size: 14px; }
.pd-eyebrow em {
  font-family: "Bebas Neue", var(--font);
  font-style: normal;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 2px;
}
.pd-detail .nl-detail-title {
  margin: 0;
  font-size: clamp(26px, 2.1vw, 34px);
  line-height: 1.42;
  letter-spacing: .5px;
}

/* ---------- 35.3 产品参数：规格表卡片化 ---------- */
.pd-detail .nl-detail-main .pd-info { padding-top: 30px; }
.pd-detail .pd-info-tt {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-left: 0;
  margin-bottom: 18px;
  font-size: 20px;
  letter-spacing: 1px;
}
.pd-detail .pd-info-tt i { margin-right: 0; font-size: 19px; }
.pd-detail .pd-info-body {
  border: 1px solid #e9edf4;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;

}
.pd-detail .pd-info-body table {
  border-collapse: separate;
  border-spacing: 0;
  font-size: 15.5px;
}
.pd-detail .pd-info:has(tbody:not(:has(tr))) { display: none; }
.pd-detail .pd-info-body th,
.pd-detail .pd-info-body td {

  border: 0;
  border-top: 1px solid #f1f4f9;
}
.pd-detail .pd-info-body tbody tr:first-child th,
.pd-detail .pd-info-body tbody tr:first-child td { border-top: 0; }
.pd-detail .pd-info-body th {

  border-right: 1px solid #f1f4f9;

  font-weight: 600;
  letter-spacing: .5px;
}
.pd-detail .pd-info-body td { color: var(--ink); }
.pd-detail .pd-info-body tbody tr { transition: background .25s ease; }

/* ---------- 35.3b 项目介绍 + 产品参数：左右并排（≥1200px 生效，窄屏自动堆叠） ---------- */
.nl-detail.pd-detail .nl-detail-main .pd-intro { padding: 30px 40px 36px; }
.nl-detail.pd-detail .nl-detail-main .pd-intro > .pd-intro-desc,
.nl-detail.pd-detail .nl-detail-main .pd-intro > .pd-info { padding: 0; }
.nl-detail.pd-detail .nl-detail-main .pd-intro > .pd-info { margin-top: 30px; }

@media (min-width: 1200px) {
  .nl-detail.pd-detail .nl-detail-main .pd-intro {
    display: flex;
    align-items: flex-start;
    gap: 36px;
}
  .nl-detail.pd-detail .nl-detail-main .pd-intro > .pd-intro-main { flex: 1 1 0; min-width: 0; }
  .nl-detail.pd-detail .nl-detail-main .pd-intro > .pd-info { flex: 0 0 330px; margin-top: 0; }
}

.nl-detail.pd-detail .pd-intro-desc {
  margin: 0;
  color: var(--text);
  font-size: 15.5px;
  line-height: 2;
  text-align: justify;
}

@media (max-width: 767px) {
  .pd-detail .nl-detail-main .pd-intro { padding-left: 20px; padding-right: 20px; }
}

/* ---------- 35.4 正文：字号整体上调 + 小标题渐变短线 + 图片质感 ---------- */
.pd-detail .nl-detail-main .content {

  font-size: 17px;
  line-height: 1.95;
}
.pd-detail .content h1 { font-size: 26px; }
.pd-detail .content h2 { font-size: 23px; }
.pd-detail .content h3 { font-size: 20px; }
.pd-detail .content h4,
.pd-detail .content h5,
.pd-detail .content h6 { font-size: 18px; }
.pd-detail .content li { line-height: 2; }
.pd-detail .content table { font-size: 15px; }
.pd-detail .content h2,
.pd-detail .content h3 { position: relative; }
.pd-detail .content h2::after,
.pd-detail .content h3::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;

  height: 3px;
  border-radius: 3px;
  background: var(--grad);
}
.pd-detail .content img {
  display: block;
  margin: 1.4em auto;

  transition: transform .5s cubic-bezier(.22, .61, .36, 1), box-shadow .5s ease;
}
.pd-detail .content img:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 48px rgba(17, 24, 39, .16);
}

/* ---------- 35.5 上一篇 / 下一篇：双卡式导航 ---------- */
.pd-detail .nl-detail-main .pre_next {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  padding: 0 40px 36px;
}
.pd-detail .pre_next .pn {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 18px 18px 18px 22px;
  border: 1px solid #eaeef5;
  border-radius: 16px;
  background: linear-gradient(180deg, #fbfcfe 0%, #f4f7fb 100%);
  overflow: hidden;
  transition: background .35s ease, border-color .35s ease, box-shadow .35s ease, transform .35s ease;
}
/* 左侧品牌色短竖线：hover 由短拉长 */
.pd-detail .pre_next .pn::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 3px;
  height: 24px;
  border-radius: 0 3px 3px 0;
  background: var(--grad);
  transform: translateY(-50%) scaleY(.5);
  transition: transform .35s cubic-bezier(.22, .61, .36, 1);
}
.pd-detail .pre_next .pn + .pn { border-top: 1px solid #eaeef5; }
/* 右侧圆形箭头按钮 */
.pd-detail .pre_next .pn::after {
  content: "\2192";
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid #e7ebf2;
  background: #fff;
  color: #98a1b2;
  font-size: 16px;
  line-height: 1;
  box-shadow: 0 3px 10px rgba(17, 24, 39, .05);
  transition: color .35s ease, background .35s ease, border-color .35s ease, box-shadow .35s ease, transform .35s ease;
}
.pd-detail .pre_next .pn:hover {
  border-color: rgba(255, 106, 0, .32);
  background: #fff;
  box-shadow: 0 16px 34px rgba(255, 90, 0, .13);
  transform: translateY(-4px);
}
.pd-detail .pre_next .pn:hover::before { transform: translateY(-50%) scaleY(1); }
.pd-detail .pre_next .pn:hover::after {
  border-color: transparent;
  background: var(--grad);
  color: #fff;
  box-shadow: 0 10px 20px rgba(255, 90, 0, .32);
  transform: translateX(3px);
}
.pd-detail .pre_next .pn-flag {
  flex: 0 0 auto;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(255, 106, 0, .1);
  color: var(--brand);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .5px;
}
.pd-detail .pre_next a,
.pd-detail .pre_next .pn-none {
  flex: 1;
  min-width: 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.6;
  color: #333c4d;
}
/* 标题最多两行，超出省略（旧规则为强制单行） */
.pd-detail .pre_next a {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: normal;
}
.pd-detail .pre_next a:hover { color: var(--brand); }
.pd-detail .pre_next .pn-none { font-weight: 400; color: #b9c0cd; }

/* ---------- 35.6 橙卡：服务清单编号化 + 玻璃质感 ---------- */
.nl-detail.pd-detail .nl-detail-side {
  position: relative;
  overflow: hidden;
  /* 在原橙底上叠加右下角高光，形成斜向发光层次 */

}
.pd-detail .nl-side-t {

  padding-bottom: 14px;

}
.pd-detail .nl-side-t i {
  display: inline-flex;
  align-items: center;
  justify-content: center;

}
.pd-detail .nl-side-list {

  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;

}

.pd-detail .nl-side-divider {
  margin: 24px 0 18px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .5), transparent);
}
.pd-detail .nl-side-back {

  margin-top: 20px;

  letter-spacing: 2px;
  transition: background .3s ease, border-color .3s ease, transform .3s ease;
}
.pd-detail .nl-side-back::before { content: "\2190"; font-size: 15px; letter-spacing: 0; }

/* ---------- 35.7 响应式（覆盖前文旧断点） ---------- */

@media (max-width: 767px) {

  .pd-detail .nl-detail-main .nl-detail-head::after { left: 20px; right: 20px; }
  .pd-detail .nl-detail-main .pd-info { padding-top: 24px; }
  .pd-detail .pd-info-tt { font-size: 18px; }
  .pd-detail .pd-info-tt i { font-size: 17px; }

  .pd-detail .pd-info-body table { font-size: 14.5px; }

  .pd-detail .nl-detail-main .content {

    font-size: 16px;
    line-height: 1.9;
}
  .pd-detail .content h1 { font-size: 21px; }
  .pd-detail .content h2 { font-size: 19.5px; }
  .pd-detail .content h3 { font-size: 18px; }
  .pd-detail .content h4,
  .pd-detail .content h5,
  .pd-detail .content h6 { font-size: 16.5px; }
  .pd-detail .content table { font-size: 14px; }
  .pd-detail .nl-detail-main .pre_next {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    padding: 0 20px 28px;
}
  .pd-detail .pre_next .pn { padding: 16px 16px 16px 20px; }
  .pd-detail .pre_next a,
  .pd-detail .pre_next .pn-none { font-size: 15px; }

  .pd-detail .nl-side-list {  gap: 8px; }

}

/* ---------- 35.8 相关案例：字号与详情页对齐 ---------- */
/* 详情页底部 .pl-main.pl-rel 上下空旷：单独收紧 section 内边距与标题下方间距 */
.pl-main.pl-rel {
  padding: 0 0 clamp(44px, 5.5vw, 72px);
}
.pl-rel .pl-head { margin-bottom: 32px; }
.pl-rel .pl-head-en { font-size: 12px; letter-spacing: 4px; }
/* —— 以下保持 35.8 节原内容 —— */
.pl-rel .l-s-title01 p { font-size: 16px; }
.pl-rel .pl-gallery .pic .cap-meta { font-size: 12px; }
.pl-rel .pl-gallery .pic .cap .t { font-size: 22px; }
@media (max-width: 767px) {
  .pl-rel .pl-gallery .pic .cap .t { font-size: 17px; }
}

/* ==========================================================================
   36. 产品详情页右侧栏重设计（重写 35.6 的橙卡内部视觉）
   --------------------------------------------------------------------------
   1) 选择器一律以 .nl-detail.pd-detail / .pd-detail 打头，只作用于产品详情页；
   2) 结构不变（标题 → 服务清单 → 按钮 → 上下篇 → 返回），仅重构视觉：
      标题改「玻璃图标 + 中英双行」，服务清单由「双列编号色块」改为「单列对勾列表」，
      按钮区独立成组并统一 14px 圆角，上下篇收进浅色面板，返回降级为文字链；
   3) 本段位于文件末尾，同权重下自动覆盖 35.1 / 35.6 的旧声明。
   ========================================================================== */

/* ---------- 36.1 橙卡本体：渐变收亮、内边距收紧 ---------- */

/* ---------- 36.2 标题：玻璃方标 + 英文副标 ---------- */
.pd-detail .nl-side-t {
  gap: 12px;
  padding: 0 0 16px;
  margin-bottom: 6px;
  font-size: 19px;
  line-height: 1.3;
  letter-spacing: 1px;
  border-bottom: 1px solid rgba(255, 255, 255, .2);
}
.pd-detail .nl-side-t i {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  font-size: 17px;
  background: rgba(255, 255, 255, .18);
  border: 1px solid rgba(255, 255, 255, .3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 8px 18px rgba(140, 45, 0, .18);
}
.pd-detail .nl-side-t em {
  display: block;
  margin-top: 3px;
  font-family: "Bebas Neue", var(--font);
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 3px;
  opacity: .68;
}

/* ---------- 36.3 服务清单：单列对勾列表（去掉双列编号玻璃块） ---------- */
.pd-detail .nl-side-list {
  display: block;
  margin: 0 0 20px;
  padding: 0;
  counter-reset: none;
}
.pd-detail .nl-side-list li {
  display: flex;
  align-items: center;
  gap: 11px;

  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .14);

  background: transparent;

  font-size: 14.5px;
  line-height: 1.5;
  letter-spacing: .3px;
  transform: none;
  counter-increment: none;

}
.pd-detail .nl-side-list li::before {
  content: "\2713";
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;

  color: #fff;
  font-family: var(--font);
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0;

}
.pd-detail .nl-side-list li:last-child { border-bottom: 0; }
.pd-detail .nl-side-list li:hover {

  border-color: rgba(255, 255, 255, .32);

}

/* ---------- 36.4 按钮区：两枚一组，圆角统一 ---------- */
.pd-detail .nl-side-cta {
  display: flex;
  flex-direction: column;

}
.pd-detail .nl-side-cta .nl-side-btn { margin-bottom: 0; }
.pd-detail .nl-side-btn {

  border-radius: 14px;

}
/* 次要按钮 hover（写在主按钮之前，便于主按钮覆盖同权重声明） */
.pd-detail .nl-side-btn:hover {
  color: #fff;

}
.pd-detail .nl-side-btn-primary {
  position: relative;
  color: #ff5a00;
  background: #fff;
  border-color: transparent;
  font-weight: 700;

}
.pd-detail .nl-side-btn-primary::after {
  content: "\2192";
  position: absolute;
  right: 18px;
  font-size: 16px;
  line-height: 1;
  transition: transform .3s ease;
}

.pd-detail .nl-side-btn-primary:hover::after { transform: translateX(4px); }

/* ---------- 36.5 返回：由按钮降级为文字链 ---------- */
.pd-detail .nl-side-back {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: auto;
  margin: 0;
  padding: 11px 0 3px;
  border: 0;
  border-top: 1px dashed rgba(255, 255, 255, .22);
  border-radius: 0;
  background: transparent;
  color: rgba(255, 255, 255, .8);
  font-size: 12.5px;
}
.pd-detail .nl-side-back:hover {
  border-color: rgba(255, 255, 255, .38);
  background: transparent;
  color: #fff;
  transform: none;
}

/* ---------- 36.6 响应式：横排时清单转多列、按钮转横排 ---------- */
@media (max-width: 991px) {

  .pd-detail .nl-side-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 24px;
}
  .pd-detail .nl-side-cta { flex-direction: row; }
  .pd-detail .nl-side-cta .nl-side-btn { flex: 1; }
}
@media (max-width: 767px) {
  .pd-detail .nl-side-t { font-size: 18px; }
  .pd-detail .nl-side-t i { width: 36px; height: 36px; font-size: 15px; }
  .pd-detail .nl-side-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
  .pd-detail .nl-side-list li {  font-size: 13.5px; }
  .pd-detail .nl-side-cta { flex-direction: column; }

}

/* ==========================================================================
   37. 产品详情页整体美化（结构与内容不变，仅视觉增强）
   --------------------------------------------------------------------------
   1) 选择器均以 .nl-detail.pd-detail / .pd-detail 打头，作用域限于产品详情页；
   2) 分四块：主卡质感、标题区、项目介绍 + 参数表、正文与上下篇；
   3) 位于文件末尾，同权重下覆盖前文旧声明。
   ========================================================================== */

/* ---------- 37.1 主卡：圆角加大 + 多层投影 + 顶部品牌渐变描边 ---------- */
.nl-detail.pd-detail .nl-detail-main {
  position: relative;

}

/* ---------- 37.2 标题区：留白放宽 + 眉标投影 ---------- */

.pd-detail .nl-detail-title { font-weight: 800; }

/* ---------- 37.3 项目介绍：引言式浅色块 + 左侧品牌竖线 ---------- */
.nl-detail.pd-detail .nl-detail-main .pd-intro .pd-intro-desc {

  color: var(--text);
  font-size: 15.5px;
  line-height: 1.95;
}
.nl-detail.pd-detail .nl-detail-main .pd-intro > .pd-intro-desc::before {
  content: "";
  position: absolute;
  left: 0;

  background: var(--grad);
}

/* ---------- 37.4 参数表：悬浮质感 + 表头渐层 + 行悬停 ---------- */
.nl-detail.pd-detail .nl-detail-main .pd-intro > .pd-info .pd-info-body {
  border-color: #e8edf5;
  box-shadow: 0 10px 26px rgba(17, 24, 39, .06);
}

/* ---------- 37.5 正文：留白放宽 + 标题间距 + 图片质感 ---------- */

.pd-detail .content h2,
.pd-detail .content h3 {  margin-bottom: .7em; }
.pd-detail .content p { line-height: 2; }

/* ---------- 37.6 上下篇：悬停提亮 ---------- */
.pd-detail .nl-detail-main .pre_next .pn {
  transition: border-color .3s ease, background .3s ease;
}
.pd-detail .nl-detail-main .pre_next .pn:hover {
  border-color: rgba(255, 106, 0, .35);
  background: #fff;
}

/* ---------- 37.7 响应式微调 ---------- */

/* ==========================================================================
   38. 产品详情页深化美化（左主卡 + 右橙卡 同步升级）
   ========================================================================== */

/* ---------- 38.1 左主卡：多层柔光底 + 加厚顶部渐变描边 ---------- */
.nl-detail.pd-detail .nl-detail-main {
  border-radius: 22px 0 0 22px;
  border-color: #e7edf6;
  background:
    radial-gradient(760px 260px at 100% 0, rgba(255, 106, 0, .05), transparent 62%),
    radial-gradient(520px 300px at 0 100%, rgba(17, 24, 39, .022), transparent 70%),
    #fff;
  box-shadow:
    0 1px 2px rgba(17, 24, 39, .04),
    0 12px 28px rgba(17, 24, 39, .05),
    0 36px 76px rgba(17, 24, 39, .08);
}

/* ---------- 38.2 标题区：眉标实色渐变 + 标题左侧品牌竖条 ---------- */
.pd-detail .nl-detail-main .nl-detail-head {
  padding: 46px 40px 30px;
  /* 去掉 37.2 的白色底，让 38.1 的卡片柔光透上来 */
  background: radial-gradient(620px 220px at 0 0, rgba(255, 106, 0, .09), transparent 74%);
  border-radius: 22px 0 0 0;
}
.pd-detail .nl-detail-main .nl-detail-head::after {
  background: linear-gradient(90deg, var(--brand) 0, rgba(255, 106, 0, .3) 16%, rgba(255, 106, 0, .07) 46%, transparent 100%);
}
.pd-detail .pd-eyebrow {
  position: relative;
  overflow: hidden;
  padding: 6px 16px 6px 13px;
  color: #fff;
  background: linear-gradient(135deg, #ff9a1f 0%, #ff6a00 52%, var(--brand-deep) 100%);
  border-color: transparent;
  box-shadow: 0 10px 24px rgba(255, 90, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .35);
}
.pd-detail .pd-eyebrow em,
.pd-detail .pd-eyebrow i { color: #fff; }
.pd-detail .pd-eyebrow::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -70%;
  width: 55%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent);
  transform: skewX(-18deg);
  animation: pdShineIcon 4.6s ease-in-out infinite;
}
@keyframes pdShineIcon {
  0% { left: -70%; }
  42% { left: 135%; }
  100% { left: 135%; }
}

/* ---------- 38.3 项目介绍 / 产品参数：标题图标块统一 + 介绍块细化 ---------- */
.pd-detail .nl-detail-main .pd-intro > .pd-intro-main > .pd-info-tt,
.pd-detail .nl-detail-main .pd-intro > .pd-info > .pd-info-tt {
  padding-bottom: 12px;
  margin-bottom: 18px;
  border-bottom: 1px solid #eef2f8;
}
.pd-detail .nl-detail-main .pd-intro > .pd-intro-main > .pd-info-tt i,
.pd-detail .nl-detail-main .pd-intro > .pd-info > .pd-info-tt i {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  color: #fff;
  font-size: 16px;
  background: var(--grad);
  box-shadow: 0 8px 18px rgba(255, 90, 0, .26), inset 0 1px 0 rgba(255, 255, 255, .3);
}
.nl-detail.pd-detail .nl-detail-main .pd-intro .pd-intro-desc {
  position: relative;
  padding: 18px 46px 18px 22px;
  border-radius: 14px;
  background: linear-gradient(100deg, rgba(255, 106, 0, .085), rgba(255, 106, 0, .022) 58%, rgba(255, 106, 0, .006));
  box-shadow: inset 0 0 0 1px rgba(255, 106, 0, .08);
}
.nl-detail.pd-detail .nl-detail-main .pd-intro > .pd-intro-desc::before {
  top: 13px;
  bottom: 13px;
  width: 4px;
  border-radius: 4px;
}
.nl-detail.pd-detail .nl-detail-main .pd-intro > .pd-intro-desc::after {
  content: "\201C";
  position: absolute;
  right: 14px;
  bottom: 2px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 56px;
  line-height: 1;
  color: rgba(255, 106, 0, .13);
  pointer-events: none;
}

/* ---------- 38.4 参数表：斑马纹 + 表头圆点 + 行悬浮品牌条 ---------- */
.pd-detail .pd-info-body {
  border-color: #e7edf6;
  box-shadow: 0 14px 34px rgba(17, 24, 39, .06);
}
.pd-detail .pd-info-body th,
.pd-detail .pd-info-body td { padding: 14px 18px; }
.pd-detail .pd-info-body th {
  width: 168px;
  background: linear-gradient(90deg, #f8fafd 0%, #f2f6fc 100%);
  border-right-color: #eef2f8;
  color: #66708a;
}
.pd-detail .pd-info-body tbody tr:nth-child(even) { background: #fbfcfe; }
.pd-detail .pd-info-body tbody tr:hover { background: #fff7f0; }
.pd-detail .pd-info-body tbody tr:hover th { box-shadow: inset 4px 0 0 var(--brand); }

/* ---------- 38.5 正文：标题前置色条 + 列表 / 引用 / 表格质感 ---------- */
.pd-detail .nl-detail-main .content { padding-top: 38px; padding-bottom: 46px; }
.pd-detail .content h2,
.pd-detail .content h3 { padding-bottom: 12px; margin-top: 1.8em; }
.pd-detail .content h2::before,
.pd-detail .content h3::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: .82em;
  margin-right: 11px;
  vertical-align: -.04em;
  border-radius: 3px;
  background: var(--grad);
}
.pd-detail .content h2::after,
.pd-detail .content h3::after { width: 52px; }
.pd-detail .content ul { list-style: none; padding-left: 4px; }
.pd-detail .content ul > li { position: relative; padding-left: 26px; margin-bottom: .6em; }
.pd-detail .content ul > li::before {
  content: "";
  position: absolute;
  left: 6px;
  top: .78em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--grad);
  box-shadow: 0 0 0 4px rgba(255, 106, 0, .1);
}
.pd-detail .content ol > li::marker { color: var(--brand); font-weight: 700; }
.pd-detail .content blockquote {
  position: relative;
  margin: 1.7em 0;
  padding: 18px 24px 18px 26px;
  border-left: 0;
  border-radius: 14px;
  background: linear-gradient(100deg, rgba(255, 106, 0, .08), rgba(255, 106, 0, .015) 60%, transparent);
  color: #4a5265;
  font-size: 15.5px;
  box-shadow: inset 0 0 0 1px rgba(255, 106, 0, .07);
}
.pd-detail .content blockquote::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 4px;
  border-radius: 4px;
  background: var(--grad);
}
.pd-detail .content table {
  margin: 1.6em 0;
  border: 1px solid #e9eef6;
  border-radius: 14px;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
}
.pd-detail .content table th,
.pd-detail .content table td { padding: 12px 16px; border: 0; border-top: 1px solid #f0f3f9; }
.pd-detail .content table tr:first-child > th,
.pd-detail .content table tr:first-child > td { border-top: 0; }
.pd-detail .content table th { background: linear-gradient(90deg, #f8fafd 0%, #f2f6fc 100%); }
.pd-detail .content table tbody tr:nth-child(even) { background: #fbfcfe; }
.pd-detail .content table tbody tr:hover { background: #fff7f0; }
.pd-detail .content img {
  border-radius: 16px;
  box-shadow: 0 18px 42px rgba(17, 24, 39, .13);
}
.pd-detail .content hr { margin: 2.2em 0; }

/* ---------- 38.6 右橙卡：斜向光泽扫过 + 内描边高光 ---------- */
.nl-detail.pd-detail .nl-detail-side {
  padding: 40px 26px 30px;
  border-radius: 0 22px 22px 0;
  background:
    radial-gradient(300px 260px at 110% -10%, rgba(255, 255, 255, .22), transparent 68%),
    radial-gradient(220px 200px at -10% 108%, rgba(255, 255, 255, .14), transparent 70%),
    linear-gradient(158deg, #ff911f 0%, #ff5f00 58%, #ef4700 100%);
  box-shadow:
    0 2px 4px rgba(150, 62, 0, .12),
    0 30px 64px rgba(150, 62, 0, .26),
    inset 0 1px 0 rgba(255, 255, 255, .3);
}

/* ---------- 38.7 服务清单：hover 玻璃块 + 左侧白色滑块 ---------- */
.pd-detail .nl-side-list { margin-bottom: 22px; }
.pd-detail .nl-side-list li {
  position: relative;
  margin: 0 -12px;
  padding: 12px;
  border-bottom-color: rgba(255, 255, 255, .12);
  border-radius: 12px;
  color: rgba(255, 255, 255, .9);
  transition: background .35s ease, color .35s ease, border-color .35s ease, transform .35s cubic-bezier(.22, .61, .36, 1);
}
.pd-detail .nl-side-list li::before {
  width: 20px;
  height: 20px;
  background: rgba(255, 255, 255, .26);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4);
  transition: background .3s ease, color .3s ease, transform .3s ease, box-shadow .3s ease;
}
.pd-detail .nl-side-list li::after {
  content: "";
  position: absolute;
  left: -12px;
  top: 50%;
  width: 3px;
  height: 18px;
  border-radius: 0 3px 3px 0;
  background: #fff;
  opacity: 0;
  transform: translateY(-50%) scaleY(.4);
  transition: opacity .3s ease, transform .3s cubic-bezier(.22, .61, .36, 1);
}
.pd-detail .nl-side-list li:hover {
  color: #fff;
  border-bottom-color: transparent;
  background: linear-gradient(90deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, .05) 72%, transparent);
  transform: translateX(2px);
}
.pd-detail .nl-side-list li:hover::before {
  color: var(--brand);
  background: #fff;
  box-shadow: 0 6px 14px rgba(120, 30, 0, .28);
  transform: scale(1.06);
}
.pd-detail .nl-side-list li:hover::after { opacity: 1; transform: translateY(-50%) scaleY(1); }

/* ---------- 38.8 按钮：主按钮光泽扫过（次要按钮 hover 必须写在主按钮之前） ---------- */
.pd-detail .nl-side-cta { gap: 12px; margin-bottom: 24px; }
.pd-detail .nl-side-btn {
  height: 52px;
  font-size: 15px;
  letter-spacing: 1px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18);
}
.pd-detail .nl-side-btn:hover {
  border-color: rgba(255, 255, 255, .62);
  background: rgba(255, 255, 255, .18);
  box-shadow: 0 12px 26px rgba(120, 30, 0, .18), inset 0 1px 0 rgba(255, 255, 255, .28);
  transform: translateY(-2px);
}
.pd-detail .nl-side-btn-primary {
  overflow: hidden;
  box-shadow: 0 16px 34px rgba(110, 34, 0, .3);
}
.pd-detail .nl-side-btn-primary::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255, 106, 0, .28), transparent);
  transform: skewX(-18deg);
  transition: left .55s ease;
}
.pd-detail .nl-side-btn-primary:hover::before { left: 128%; }
/* 主按钮 hover 的白底声明放在最后，否则会被上面的次要按钮 hover 覆盖 */
.pd-detail .nl-side-btn-primary:hover {
  color: var(--brand-deep);
  background: #fff;
  border-color: transparent;
  box-shadow: 0 20px 40px rgba(110, 34, 0, .34);
  transform: translateY(-2px);
}
.pd-detail .nl-side-back::before { transition: transform .3s ease; }
.pd-detail .nl-side-back:hover::before { transform: translateX(-3px); }

/* ---------- 38.9 响应式收口（对齐 991px 堆叠断点） ---------- */
@media (max-width: 991px) {
  .nl-detail.pd-detail .nl-detail-main { border-radius: 22px 22px 0 0; }
  .nl-detail.pd-detail .nl-detail-main::before { border-radius: 22px 22px 0 0; }
  .nl-detail.pd-detail .nl-detail-side { border-radius: 0 0 22px 22px; padding: 34px 24px 28px; }
}
@media (max-width: 767px) {
  .pd-detail .nl-detail-main .nl-detail-head { padding: 28px 20px 22px; }
  .pd-detail .nl-detail-title { padding-left: 14px; }
  .pd-detail .nl-detail-title::before { width: 4px; }
  .pd-detail .nl-detail-main .pd-intro > .pd-intro-main > .pd-info-tt i,
  .pd-detail .nl-detail-main .pd-intro > .pd-info > .pd-info-tt i { width: 30px; height: 30px; border-radius: 9px; font-size: 15px; }
  .nl-detail.pd-detail .nl-detail-main .pd-intro .pd-intro-desc { padding: 15px 18px; }
  .nl-detail.pd-detail .nl-detail-main .pd-intro > .pd-intro-desc::after { display: none; }
  .pd-detail .pd-info-body tbody tr:hover th { box-shadow: none; }
  .pd-detail .nl-detail-main .content { padding-top: 28px; padding-bottom: 34px; }
  .pd-detail .content h2::before,
  .pd-detail .content h3::before { margin-right: 8px; }
  .pd-detail .content blockquote { padding: 16px 18px 16px 20px; }
  .pd-detail .nl-side-list li { margin: 0; padding: 10px 0; }
  .pd-detail .nl-side-list li::after { left: -8px; }
  .pd-detail .nl-side-btn { height: 48px; }
}
@media (prefers-reduced-motion: reduce) {
  .pd-detail .pd-eyebrow::after,
  .nl-detail.pd-detail .nl-detail-side::after { animation: none; }
}

/* ==========================================================================
   39. 内页英雄区统一（page/* · article/* · product/* · tags-details）
   --------------------------------------------------------------------------
   1) 全站内页复用 24.1 的 .pl-hero 结构，文案按各页内容分别定制；首页
      index.html 使用自己的 banner，不引用本节（按要求首页不改动）；
   2) 处理旧 .ibanner 被替换后的衔接问题：
      - 联系我们：原 .ct-bar 以 -58px 压住 banner 下沿，hero 为暗色会糊在一起，
        改为落到浅色区独立成卡；
      - hero 底部加一条品牌渐隐分割线，与下方浅色内容区过渡更干净；
   3) 旧 .ibanner 规则保留（legacy 模板仍可能引用），不影响已改造页面。
   ========================================================================== */

/* ---------- 39.1 英雄区底部与浅色内容区的过渡分割线 ---------- */
.pl-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 106, 0, .5) 50%, transparent);
}

/* ---------- 39.2 联系我们：悬浮联系条不再压在暗色 hero 上 ---------- */
.page-contact .ct-barwrap { padding-top: 44px; }
.page-contact .ct-bar { margin-top: 0; }

@media (max-width: 767px) {
  .page-contact .ct-barwrap { padding-top: 26px; }
}

/* ==========================================================================
   40. 服务项目页（page/service.html）
   --------------------------------------------------------------------------
   1) 作用域：.page-service，仅影响 service.html；
   2) 结构：hero（39 节公用）→「六大核心服务」标题区（公用组件 .pl-head 34.1.2）
      → 图文交错服务卡（.sv-item：奇数图左 / 偶数图右）；
   3) 沿用站内视觉语言：品牌渐变、大圆角卡片、柔和投影、hover 上浮。
   ========================================================================== */

/* ---------- 40.1 主体区与标题区留白 ---------- */
.page-service .sv-main { padding: clamp(44px, 5.4vw, 74px) 0 clamp(56px, 6.6vw, 92px); }
.page-service .sv-main .pl-head { margin-bottom: clamp(30px, 3.2vw, 48px); }

/* ---------- 40.2 服务卡列表：图文交错 ---------- */
.page-service .sv-list {
  display: grid;
  gap: clamp(20px, 2.2vw, 30px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.page-service .sv-item {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr);
  align-items: center;
  gap: clamp(24px, 3.2vw, 52px);
  padding: clamp(18px, 1.8vw, 26px);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: var(--shadow-sm);
  transition: transform .5s cubic-bezier(.22, .61, .36, 1), box-shadow .5s ease, border-color .5s ease;
}
/* 顶部品牌短线：hover 时由左向右展开 */
.page-service .sv-item::before {
  content: "";
  position: absolute;
  left: 26px;
  right: 26px;
  top: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--grad);
  opacity: 0;
  transform: scaleX(.4);
  transform-origin: left center;
  transition: opacity .45s ease, transform .55s cubic-bezier(.22, .61, .36, 1);
}
.page-service .sv-item:hover {
  transform: translateY(-6px);
  border-color: rgba(255, 106, 0, .2);
  box-shadow: var(--shadow-md), 0 0 0 1px rgba(255, 106, 0, .08);
}
.page-service .sv-item:hover::before { opacity: 1; transform: scaleX(1); }
/* 偶数项图片右置，形成交错节奏 */
.page-service .sv-item:nth-child(even) .sv-media { order: 2; }

/* 图片区 */
.page-service .sv-media {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 16px;
  aspect-ratio: 16 / 11;
  background: var(--bg-soft);
}
.page-service .sv-media img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  transition: transform 1.1s cubic-bezier(.22, .61, .36, 1);
}
.page-service .sv-item:hover .sv-media img { transform: scale(1.06); }
/* 图片左上角序号胶囊 */
.page-service .sv-no {
  position: absolute;
  left: 14px;
  top: 14px;
  z-index: 2;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: #fff;
  background: rgba(10, 14, 22, .4);
  border: 1px solid rgba(255, 255, 255, .26);
  border-radius: 999px;
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
}

/* 文案区 */
.page-service .sv-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--brand);
}
.page-service .sv-eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: var(--grad);
}
.page-service .sv-tt {
  margin: 12px 0 0;
  font-size: clamp(21px, 1.9vw, 29px);
  font-weight: 900;
  line-height: 1.3;
  letter-spacing: 2px;
  color: var(--ink);
}
.page-service .sv-p {
  margin: 14px 0 0;
  font-size: 15px;
  line-height: 1.95;
  color: var(--muted);
}

/* 能力标签 */
.page-service .sv-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 9px 10px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}
.page-service .sv-tags li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  font-size: 13px;
  line-height: 1.2;
  color: var(--text);
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 999px;
  transition: background .3s ease, border-color .3s ease;
}
.page-service .sv-tags li::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--grad);
  box-shadow: 0 0 0 3px rgba(255, 106, 0, .12);
}
.page-service .sv-item:hover .sv-tags li {
  background: #fff;
  border-color: rgba(255, 106, 0, .22);
}

/* 查看更多按钮：品牌描边胶囊 → hover 渐变填充 */
.page-service .sv-foot { margin-top: 24px; }
.page-service .sv-more {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 44px;
  padding: 0 26px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1px;
  color: var(--brand);
  text-decoration: none;
  background: #fff;
  border: 1px solid rgba(255, 106, 0, .34);
  border-radius: 999px;
  transition: color .3s ease, background .3s ease, border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}
.page-service .sv-more i { font-size: 15px; transition: transform .3s ease; }
.page-service .sv-more:hover {
  color: #fff;
  background: var(--grad);
  border-color: transparent;
  box-shadow: var(--shadow-brand);
  transform: translateY(-2px);
}
.page-service .sv-more:hover i { transform: translateX(3px); }

/* ---------- 40.3 响应式 ---------- */
@media (max-width: 991px) {
  .page-service .sv-item {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
}
  .page-service .sv-item:nth-child(even) .sv-media { order: 0; }  /* 平板及以下统一图片在上 */
  .page-service .sv-media { aspect-ratio: 16 / 10; }
  .page-service .sv-item::before { left: 20px; right: 20px; }
}
@media (max-width: 767px) {
  .page-service .sv-main { padding: 34px 0 52px; }
  .page-service .sv-item { padding: 16px 16px 20px; border-radius: 18px; }
  .page-service .sv-media { aspect-ratio: 3 / 2; border-radius: 14px; }
  .page-service .sv-tt { font-size: 21px; letter-spacing: 1px; }
  .page-service .sv-p { font-size: 14px; line-height: 1.85; }
  .page-service .sv-tags { gap: 8px; margin-top: 16px; }
  .page-service .sv-tags li { padding: 6px 12px; font-size: 12.5px; }
  .page-service .sv-foot { margin-top: 20px; }
  .page-service .sv-more { width: 100%; justify-content: center; }
}

/* ==========================================================================
   41. 服务子页（page/service1.html）
   --------------------------------------------------------------------------
   1) 作用域：.page-svc，仅作用于服务子页，不影响其它页面；
   2) hero 沿用 39 节公用样式；区块标题统一用 .pl-head（34.1.2），区块节奏由
      .sg-block 控制；
   3) 各区块形态刻意区分：A 左文右图 + 流程步骤卡 / B 左右分栏 + 玻璃条目 /
      C 两列横向图文卡 / D 编号栏目 / E 深色胶囊标签 / F 案例网格（.pl-gallery）。
   ========================================================================== */

/* ---------- 41.1 区块通用节奏 ---------- */
.page-svc .sg-block {
  position: relative;
  padding: clamp(52px, 6vw, 88px) 0;
                                  /* 旧浏览器回退：隐藏溢出 */
  overflow: clip;                                  /* 不产生滚动容器，区块 A/C 的 sticky 主视觉才生效 */
}
.page-svc .sg-block > .container { position: relative; z-index: 1; }
.page-svc .sg-block.is-light { background: linear-gradient(180deg, #f7f8fc 0%, #edf1f7 100%); }
.page-svc .sg-block.is-white {                  /* 白底不空：两处极淡品牌光晕托底 */
  background:
    radial-gradient(720px 420px at 84% 6%, rgba(255, 122, 26, .055), transparent 70%),
    radial-gradient(560px 360px at 4% 94%, rgba(255, 122, 26, .04), transparent 72%),
    #fff;
}
.page-svc .sg-block.is-white::before {          /* 顶部 1px 渐隐分隔线 */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(17, 24, 39, .07) 22%, rgba(17, 24, 39, .07) 78%, transparent);
}
@media (max-width: 767px) { .page-svc .sg-block { padding: 38px 0; }}

/* ---------- 41.2 服务子页 hero 内容微调（与 39 节公用结构配合） ---------- */
.page-svc .pl-crumb { margin-bottom: 14px; }

/* ---------- 41.3 区块 A：左文右图（我们的服务） ---------- */
.page-svc .sg-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
  align-items: center;
  gap: clamp(30px, 4vw, 64px);
}
.page-svc .sg-intro .pl-head { margin-bottom: 20px; }
.page-svc .sg-intro-p {
  margin: 0;
  max-width: 560px;
  font-size: 15.5px;
  line-height: 1.95;
  color: var(--muted);
}

/* 服务标签：胶囊 + 勾选，hover 切品牌渐变 */
.page-svc .sg-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}
.page-svc .sg-tags li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  font-size: 14px;
  color: var(--ink);
  background: rgba(255, 255, 255, .92);
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(17, 24, 39, .04);
  transition: background .35s ease, border-color .35s ease, color .35s ease, box-shadow .35s ease, transform .35s ease;
}
.page-svc .sg-tags li i { font-size: 14px; color: var(--brand); transition: color .35s ease; }
.page-svc .sg-tags li span { color: var(--brand); font-weight: 700; transition: color .35s ease; }
.page-svc .sg-tags li:hover {
  color: #fff;
  background: var(--grad);
  border-color: transparent;
  box-shadow: 0 12px 26px rgba(255, 90, 0, .3);
  transform: translateY(-3px);
}
.page-svc .sg-tags li:hover i,
.page-svc .sg-tags li:hover span { color: #fff; }

/* 右侧主视觉：渐变光斑 + 缓转虚线环 */
.page-svc .sg-intro-media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  isolation: isolate;
}
.page-svc .sg-media-glow {
  position: absolute;
  z-index: -1;
  width: 78%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, rgba(255, 122, 26, .26), rgba(255, 122, 26, 0) 68%);
  filter: blur(6px);
}
.page-svc .sg-media-ring {
  position: absolute;
  z-index: -1;
  width: 92%;
  aspect-ratio: 1 / 1;
  border: 1px dashed rgba(255, 106, 0, .26);
  border-radius: 50%;
  animation: sgSpin 26s linear infinite;
}
@keyframes sgSpin { to { transform: rotate(360deg); }}
.page-svc .sg-intro-media img {
  display: block;
  width: 100%;
  max-width: 460px;
  filter: drop-shadow(0 24px 44px rgba(17, 24, 39, .16));
  transition: transform 1s cubic-bezier(.22, .61, .36, 1);
}
.page-svc .sg-intro-media:hover img { transform: translateY(-8px) rotate(-1deg); }

/* 流程轴（网站策划 / 设计 / 开发 / 维护）：一条虚线主线上挂 4 个节点 */
.page-svc .sg-flow {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 28px);
  margin: clamp(46px, 5.2vw, 76px) 0 0;
  padding: 0;
  list-style: none;
}
.page-svc .sg-flow::before {                         /* 贯穿 4 个节点的虚线主线 */
  content: "";
  position: absolute;
  left: 12.5%;
  right: 12.5%;
  top: 84px;
  height: 0;
  border-top: 2px dashed rgba(255, 106, 0, .22);
  pointer-events: none;
}
.page-svc .sg-flow-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 4px;
}
.page-svc .sg-flow-item::after {                     /* hover 时的节点光环 */
  content: "";
  position: absolute;
  top: 42px;
  left: 50%;
  width: 84px;
  height: 84px;
  margin-left: -42px;
  border-radius: 50%;
  opacity: 0;
  box-shadow: 0 0 0 0 rgba(255, 106, 0, .22);
  transition: opacity .5s ease, box-shadow .5s ease;
  pointer-events: none;
}
.page-svc .sg-flow-item:hover::after { opacity: 1; box-shadow: 0 0 0 13px rgba(255, 106, 0, .1); }
.page-svc .sg-flow-no {                              /* 步骤胶囊：01 ~ 04 */
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 13px;
  margin: 0 0 18px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 2px;
  color: var(--brand);
  background: rgba(255, 106, 0, .08);
  border: 1px solid rgba(255, 106, 0, .16);
  border-radius: 999px;
  transition: background .45s ease, color .45s ease, border-color .45s ease, box-shadow .45s ease;
}
.page-svc .sg-flow-ico {                             /* 轨道节点圆 */
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 84px;
  height: 84px;
  margin: 0 0 22px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid rgba(255, 106, 0, .16);
  box-shadow: 0 14px 32px rgba(17, 24, 39, .08);
  transition: transform .5s cubic-bezier(.22, .61, .36, 1), background .5s ease, border-color .5s ease, box-shadow .5s ease;
}
.page-svc .sg-flow-ico i { font-size: 34px; line-height: 1; color: var(--brand); transition: color .45s ease; }
.page-svc .sg-flow-tt { margin: 0; font-size: 18px; font-weight: 800; letter-spacing: 2px; color: var(--ink); transition: color .45s ease; }
.page-svc .sg-flow-p { margin: 10px 0 0; font-size: 13px; line-height: 1.85; color: var(--muted); }
.page-svc .sg-flow-item:hover .sg-flow-no {
  color: #fff;
  background: var(--grad);
  border-color: transparent;
  box-shadow: 0 10px 22px rgba(255, 90, 0, .3);
}
.page-svc .sg-flow-item:hover .sg-flow-ico {
  transform: translateY(-6px) rotate(-8deg);
  background: var(--grad);
  border-color: transparent;
  box-shadow: 0 18px 38px rgba(255, 90, 0, .3);
}
.page-svc .sg-flow-item:hover .sg-flow-ico i { color: #fff; }
.page-svc .sg-flow-item:hover .sg-flow-tt { color: var(--brand); }

/* ---------- 41.4 区块 B：你的网站为什么不挣钱（浅暖底 · 网站体检报告单） ---------- */
.page-svc .sg-problem {
  background:
    radial-gradient(720px 400px at 86% 2%, rgba(255, 122, 26, .07), transparent 72%),
    radial-gradient(560px 360px at 2% 98%, rgba(255, 122, 26, .05), transparent 74%),
    linear-gradient(180deg, #fffdfb 0%, #fff8f3 100%);
}
.page-svc .sg-problem::before {                  /* 顶部 1px 渐隐分隔线，与白底区块保持一致 */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(17, 24, 39, .07) 22%, rgba(17, 24, 39, .07) 78%, transparent);
}
.page-svc .sg-problem::after {                   /* 极淡网格：浅底上换成深色细线，四周淡出 */
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(rgba(17, 24, 39, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(17, 24, 39, .035) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(circle at 50% 50%, #000 26%, transparent 76%);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 26%, transparent 76%);
}
.page-svc .sg-problem .pl-head { margin-bottom: clamp(38px, 4.4vw, 60px); }

/* 报告单：深色报告头 + 表头 + 4 行检测数据，像一张真实出具的报告 */
.page-svc .sg-report {
  max-width: 1000px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 24px;
  box-shadow: 0 26px 64px rgba(17, 24, 39, .1);
  overflow: hidden;
}
.page-svc .sg-report-head {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px clamp(20px, 2.6vw, 32px);
  background: linear-gradient(120deg, #1b2537 0%, #0e1626 100%);
  color: #fff;
}
.page-svc .sg-report-head-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 46px;
  width: 46px;
  height: 46px;
  background: var(--grad);
  border-radius: 14px;
  box-shadow: 0 10px 22px rgba(255, 90, 0, .34);
}
.page-svc .sg-report-head-ico i { font-size: 22px; line-height: 1; color: #fff; }
.page-svc .sg-report-head-tt { min-width: 0; margin: 0; }
.page-svc .sg-report-head-zh { display: block; font-size: 17px; font-weight: 800; letter-spacing: 2px; }
.page-svc .sg-report-head-en { display: block; margin-top: 4px; font-size: 11px; letter-spacing: 3px; color: rgba(255, 255, 255, .45); }
.page-svc .sg-report-head-sum {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  margin-left: auto;
  padding: 8px 16px;
  font-size: 12.5px;
  letter-spacing: 1px;
  white-space: nowrap;
  color: rgba(255, 255, 255, .72);
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 999px;
}
.page-svc .sg-report-head-sum b { font-size: 18px; font-weight: 800; color: #ffb27a; }
.page-svc .sg-report-list { margin: 0; padding: 0; list-style: none; }
.page-svc .sg-report-row {                       /* 表头与数据行共用同一栅格，保证三列对齐 */
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 96px;
  align-items: center;
  gap: 18px;
  padding: 22px clamp(20px, 2.6vw, 32px);
  transition: background .4s ease;
}
.page-svc .sg-report-row + .sg-report-row { border-top: 1px solid var(--line); }
.page-svc .sg-report-row.is-head {
  padding-top: 14px;
  padding-bottom: 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  color: #9aa4b2;
  background: #fafbfc;
}
.page-svc .sg-report-row.is-head span:last-child { text-align: center; }
.page-svc .sg-report-row:not(.is-head):hover { background: #fffaf6; }
.page-svc .sg-report-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  background: linear-gradient(160deg, #fff6ee, #ffe9d8);
  border-radius: 16px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .8), 0 8px 18px rgba(255, 106, 0, .12);
  transition: transform .5s cubic-bezier(.22, .61, .36, 1), background .5s ease, box-shadow .5s ease;
}
.page-svc .sg-report-ico i { font-size: 23px; line-height: 1; color: var(--brand); transition: color .45s ease; }
.page-svc .sg-report-row:not(.is-head):hover .sg-report-ico {
  transform: rotate(-8deg) scale(1.06);
  background: var(--grad);
  box-shadow: 0 14px 28px rgba(255, 90, 0, .3);
}
.page-svc .sg-report-row:not(.is-head):hover .sg-report-ico i { color: #fff; }
.page-svc .sg-report-body { min-width: 0; }
.page-svc .sg-report-tt { margin: 0; font-size: 16.5px; font-weight: 800; letter-spacing: 1px; color: var(--ink); }
.page-svc .sg-report-p { margin: 7px 0 0; font-size: 13px; line-height: 1.7; color: var(--muted); }
.page-svc .sg-report-res {                       /* 结论列：不合格标记 */
  justify-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  padding: 0 14px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 1px;
  white-space: nowrap;
  color: #d9480f;
  background: rgba(255, 106, 0, .09);
  border: 1px solid rgba(255, 106, 0, .2);
  border-radius: 999px;
  transition: background .45s ease, color .45s ease, border-color .45s ease;
}
.page-svc .sg-report-row:not(.is-head):hover .sg-report-res { color: #fff; background: var(--grad); border-color: transparent; }
.page-svc .sg-report-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 15px clamp(20px, 2.6vw, 32px);
  font-size: 13px;
  color: #7b8794;
  background: #fffaf6;
  border-top: 1px dashed rgba(255, 106, 0, .28);
}
.page-svc .sg-report-foot i { font-size: 15px; line-height: 1; color: var(--brand); }
@media (max-width: 991px) {
  .page-svc .sg-report-row { grid-template-columns: 48px minmax(0, 1fr) 88px; gap: 14px; }
}
@media (max-width: 767px) {
  .page-svc .sg-report { border-radius: 20px; }
  .page-svc .sg-report-head { gap: 12px; padding: 16px; }
  .page-svc .sg-report-head-ico { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 12px; }
  .page-svc .sg-report-head-ico i { font-size: 19px; }
  .page-svc .sg-report-head-zh { font-size: 15px; letter-spacing: 1px; }
  .page-svc .sg-report-head-en { display: none; }
  .page-svc .sg-report-head-sum { padding: 6px 12px; font-size: 11px; }
  .page-svc .sg-report-head-sum b { font-size: 15px; }
  .page-svc .sg-report-row.is-head { display: none; }   /* 窄屏去掉表头，列宽随之放开 */
  .page-svc .sg-report-row {
    grid-template-columns: 44px minmax(0, 1fr) auto;
    gap: 12px;
    padding: 17px 16px;
}
  .page-svc .sg-report-list > .sg-report-row:first-child { border-top: 0; }
  .page-svc .sg-report-ico { width: 44px; height: 44px; border-radius: 13px; }
  .page-svc .sg-report-ico i { font-size: 20px; }
  .page-svc .sg-report-tt { font-size: 15.5px; }
  .page-svc .sg-report-p { font-size: 12.5px; }
  .page-svc .sg-report-res { height: 26px; padding: 0 11px; font-size: 12px; }
  .page-svc .sg-report-foot { padding: 14px 16px; font-size: 12.5px; }
}

/* ---------- 41.5 通用图文卡片底座（区块 C / D 共用） ---------- */
.page-svc .sg-card-grid {
  display: grid;
  gap: clamp(18px, 2vw, 28px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.page-svc .sg-col-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.page-svc .sg-col-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.page-svc .sg-card {
  position: relative;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 30px 22px 28px;
  text-align: center;
  box-shadow: 0 2px 10px rgba(17, 24, 39, .04);
  transition: transform .5s cubic-bezier(.22, .61, .36, 1), box-shadow .5s ease, border-color .5s ease;
}
.page-svc .sg-card::before {
  content: "";
  position: absolute;
  left: 20px;
  right: 20px;
  top: 0;
  height: 3px;
  border-radius: 3px;
  background: var(--grad);
  opacity: 0;
  transform: scaleX(.4);
  transform-origin: left;
  transition: opacity .45s, transform .55s cubic-bezier(.22, .61, .36, 1);
}
.page-svc .sg-card:hover {
  transform: translateY(-8px);
  border-color: rgba(255, 106, 0, .22);
  box-shadow: 0 24px 48px rgba(17, 24, 39, .13);
}
.page-svc .sg-card:hover::before { opacity: 1; transform: scaleX(1); }
.page-svc .sg-card-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 132px;
  height: 132px;
  margin-bottom: 18px;
  border-radius: 50%;
  background: linear-gradient(160deg, #fff7f0, #ffe6d2);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .65), 0 10px 24px rgba(255, 106, 0, .12);
  transition: transform .5s cubic-bezier(.22, .61, .36, 1), box-shadow .5s ease;
}
.page-svc .sg-card-ico i { font-size: 48px; line-height: 1; color: var(--brand); }
.page-svc .sg-card:hover .sg-card-ico { transform: rotate(-6deg) scale(1.05); box-shadow: 0 16px 36px rgba(255, 106, 0, .2); }
.page-svc .sg-card-tt { margin: 0; font-size: clamp(18px, 1.5vw, 22px); font-weight: 800; letter-spacing: 2px; color: var(--ink); }
.page-svc .sg-card-p { margin: 12px 0 0; font-size: 13.5px; line-height: 1.85; color: var(--muted); }

/* 41.5.1 区块 C 变体：暖底 + 一体式 2×2 诉求板（大图标 / 描边编号 / 格间细线） */
.page-svc .sg-block.is-light.sg-want {           /* 冷灰改暖，承接区块 B 的暖白底 */
  background:
    radial-gradient(680px 380px at 88% 0%, rgba(255, 122, 26, .07), transparent 72%),
    linear-gradient(180deg, #fffdfb 0%, #f9efe4 100%);
}
.page-svc .sg-card-grid.is-row {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin-top: clamp(36px, 4vw, 56px);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 26px;
  box-shadow: 0 26px 64px rgba(17, 24, 39, .08);
  overflow: hidden;
}
.page-svc .sg-card.is-row {
  display: block;
  padding: clamp(32px, 3.2vw, 44px) clamp(24px, 2.6vw, 40px) clamp(34px, 3.4vw, 46px);
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  transition: background .5s ease;
}
.page-svc .sg-card.is-row:nth-child(even) { border-left: 1px solid var(--line); }
.page-svc .sg-card.is-row:nth-child(n + 3) { border-top: 1px solid var(--line); }
.page-svc .sg-card.is-row:hover {                 /* 格内起暖，整板不外扩、不位移 */
  transform: none;
  border-color: var(--line);
  background: linear-gradient(180deg, #fffaf5 0%, #fff 68%);
  box-shadow: none;
}
.page-svc .sg-card.is-row::before {               /* 顶部渐变线自左扫入 */
  left: 0;
  right: auto;
  top: 0;
  bottom: auto;
  width: 0;
  height: 3px;
  border-radius: 0;
  opacity: 1;
  transform: none;
  transition: width .6s cubic-bezier(.22, .61, .36, 1);
}
.page-svc .sg-card.is-row:hover::before { opacity: 1; transform: none; width: 100%; }
.page-svc .sg-card.is-row::after {                /* 右上角描边大号编号 */
  content: attr(data-no);
  position: absolute;
  right: clamp(24px, 2.6vw, 40px);
  left: auto;
  top: clamp(30px, 3vw, 40px);
  bottom: auto;
  font-size: clamp(30px, 3vw, 40px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -1px;
  color: rgba(255, 106, 0, .07);
  -webkit-text-stroke: 1.5px rgba(255, 106, 0, .22);
  transition: color .5s ease, -webkit-text-stroke-color .5s ease;
}
.page-svc .sg-card.is-row:hover::after {
  color: rgba(255, 106, 0, .12);
  -webkit-text-stroke-color: rgba(255, 106, 0, .48);
  transform: none;
}
.page-svc .sg-card.is-row .sg-card-ico {
  width: 92px;
  height: 92px;
  margin-bottom: 26px;
  border-radius: 28px;
  background: linear-gradient(160deg, #fff2e0 0%, #ffc387 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6), 0 14px 30px rgba(255, 90, 0, .2);
  transition: transform .5s cubic-bezier(.22, .61, .36, 1), box-shadow .5s ease, background .5s ease;
}
.page-svc .sg-card.is-row .sg-card-ico i { font-size: 40px; transition: color .45s ease; }
.page-svc .sg-card.is-row:hover .sg-card-ico {
  transform: rotate(-8deg) scale(1.06);
  background: var(--grad);
  box-shadow: 0 18px 36px rgba(255, 90, 0, .32);
}
.page-svc .sg-card.is-row:hover .sg-card-ico i { color: #fff; }
.page-svc .sg-card-body { min-width: 0; }
.page-svc .sg-card.is-row .sg-card-tt { font-size: 22px; letter-spacing: 1px; }
.page-svc .sg-card.is-row .sg-card-tt::after {     /* 标题下一道品牌短线，hover 拉长 */
  content: "";
  display: block;
  width: 26px;
  height: 3px;
  margin-top: 12px;
  border-radius: 3px;
  background: var(--grad);
  transition: width .5s cubic-bezier(.22, .61, .36, 1);
}
.page-svc .sg-card.is-row:hover .sg-card-tt::after { width: 44px; }
.page-svc .sg-card.is-row .sg-card-p { margin-top: 14px; font-size: 14px; line-height: 1.9; }

/* 41.5.2 区块 D 变体：一体式四格（一张大卡内 4 等分，格间细线分隔） */
.page-svc .sg-tool-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin: clamp(34px, 4vw, 54px) 0 0;
  padding: 0;
  list-style: none;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 24px;
  box-shadow: 0 20px 54px rgba(17, 24, 39, .07);
  overflow: hidden;
}
.page-svc .sg-tool-item {
  position: relative;
  padding: clamp(30px, 3vw, 42px) clamp(20px, 2vw, 30px);
  transition: background .5s ease;
}
.page-svc .sg-tool-item + .sg-tool-item { border-left: 1px solid var(--line); }
.page-svc .sg-tool-item::before {               /* 顶部色线随 hover 扫入 */
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 3px;
  background: var(--grad);
  transition: width .6s cubic-bezier(.22, .61, .36, 1);
}
.page-svc .sg-tool-item:hover { background: linear-gradient(180deg, #fffaf6 0%, #fff 62%); }
.page-svc .sg-tool-item:hover::before { width: 100%; }
.page-svc .sg-tool-no {                         /* 描边大号序号 */
  display: block;
  font-size: 46px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -1px;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 106, 0, .3);
  transition: color .5s ease, -webkit-text-stroke-color .5s ease;
}
.page-svc .sg-tool-item:hover .sg-tool-no {
  color: rgba(255, 106, 0, .1);
  -webkit-text-stroke-color: rgba(255, 106, 0, .6);
}
.page-svc .sg-tool-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin: 18px 0 20px;
  border-radius: 16px;
  background: var(--grad);
  color: #fff;
  box-shadow: 0 12px 24px rgba(255, 90, 0, .22);
  transition: transform .5s cubic-bezier(.22, .61, .36, 1), box-shadow .5s ease;
}
.page-svc .sg-tool-ico i { font-size: 24px; line-height: 1; }
.page-svc .sg-tool-item:hover .sg-tool-ico { transform: translateY(-4px) rotate(-6deg); box-shadow: 0 16px 34px rgba(255, 90, 0, .32); }
.page-svc .sg-tool-tt { margin: 0; font-size: 18px; font-weight: 800; letter-spacing: 1px; color: var(--ink); }
.page-svc .sg-tool-p { margin: 10px 0 0; font-size: 13px; line-height: 1.85; color: var(--muted); }

/* ---------- 41.6 区块 E：行业解决方案（深色底 · 环形轨道，12 行业环绕圆心） ---------- */
.page-svc .sg-industry {
  background-color: #0c1120;
  background-image:
    radial-gradient(640px 320px at 12% 0, rgba(255, 106, 0, .22), transparent 72%),
    radial-gradient(720px 360px at 90% 100%, rgba(255, 106, 0, .14), transparent 74%),
    url(../images/009.jpg);
  background-size: cover, cover, cover;
  background-position: 0 0, 100% 100%, center;
  background-blend-mode: normal, normal, multiply;
  color: #fff;
}
.page-svc .sg-industry::after {                          /* 暗化遮罩，让前景文字清晰 */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(12, 17, 32, .62) 0%, rgba(12, 17, 32, .78) 100%);
  pointer-events: none;
  z-index: 0;
}
.page-svc .sg-industry .pl-head-en { color: rgba(255, 255, 255, .86); }
.page-svc .sg-industry .pl-head-en::before { background: rgba(255, 255, 255, .6); }
.page-svc .sg-industry .pl-head-tt::after { background: #fff; box-shadow: 0 4px 14px rgba(255, 255, 255, .26); }
.page-svc .sg-industry .pl-head-p { color: rgba(255, 255, 255, .82); }
/* 环形轨道：--r 轨道半径，--n 节点直径 */
.page-svc .sg-orbit {
  --r: 252px;
  --n: 76px;
  position: relative;
  width: calc(var(--r) * 2 + var(--n) + 52px);
  height: calc(var(--r) * 2 + var(--n) + 52px);
  margin: 0 auto;
}
.page-svc .sg-orbit-track {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--r) * 2);
  height: calc(var(--r) * 2);
  margin: calc(var(--r) * -1) 0 0 calc(var(--r) * -1);
  border: 1px dashed rgba(255, 255, 255, .18);
  border-radius: 50%;
}
.page-svc .sg-orbit-track::before {             /* 内圈柔光 */
  content: "";
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 42%, rgba(255, 122, 26, .18), rgba(255, 122, 26, 0) 70%);
}
.page-svc .sg-orbit-track::after {              /* 外圈细实线 */
  content: "";
  position: absolute;
  inset: -6%;
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: 50%;
}
.page-svc .sg-orbit-list {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.page-svc .sg-orbit-item {                      /* 绝对定位于圆心，再按角度推到圆周上 */
  position: absolute;
  left: 50%;
  top: 50%;
  width: 104px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  transform: translate(-50%, -50%) rotate(var(--a, 0deg)) translateY(calc(var(--r) * -1)) rotate(calc(var(--a, 0deg) * -1));
}
.page-svc .sg-orbit-item:nth-child(1) { --a: 0deg; }
.page-svc .sg-orbit-item:nth-child(2) { --a: 30deg; }
.page-svc .sg-orbit-item:nth-child(3) { --a: 60deg; }
.page-svc .sg-orbit-item:nth-child(4) { --a: 90deg; }
.page-svc .sg-orbit-item:nth-child(5) { --a: 120deg; }
.page-svc .sg-orbit-item:nth-child(6) { --a: 150deg; }
.page-svc .sg-orbit-item:nth-child(7) { --a: 180deg; }
.page-svc .sg-orbit-item:nth-child(8) { --a: 210deg; }
.page-svc .sg-orbit-item:nth-child(9) { --a: 240deg; }
.page-svc .sg-orbit-item:nth-child(10) { --a: 270deg; }
.page-svc .sg-orbit-item:nth-child(11) { --a: 300deg; }
.page-svc .sg-orbit-item:nth-child(12) { --a: 330deg; }
.page-svc .sg-orbit-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--n);
  height: var(--n);
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 50%;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 12px 26px rgba(0, 0, 0, .3);
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
  transition: transform .5s cubic-bezier(.22, .61, .36, 1), background .5s ease, border-color .5s ease, box-shadow .5s ease;
}
.page-svc .sg-orbit-ico i { font-size: 26px; line-height: 1; color: #fff; }
.page-svc .sg-orbit-name {
  font-size: 13px;
  letter-spacing: 1px;
  white-space: nowrap;
  color: rgba(255, 255, 255, .78);
  transition: color .45s ease;
}
.page-svc .sg-orbit-item:hover .sg-orbit-ico {
  transform: scale(1.12);
  background: var(--grad);
  border-color: transparent;
  box-shadow: 0 16px 34px rgba(255, 90, 0, .42);
}
.page-svc .sg-orbit-item:hover .sg-orbit-name { color: #fff; }

/* 圆心：行业数量 + 定制引导 */
.page-svc .sg-orbit-core {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: calc(var(--r) * 1.34);
  text-align: center;
}
.page-svc .sg-orbit-core-en {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 5px;
  color: rgba(255, 255, 255, .46);
}
.page-svc .sg-orbit-core-n {
  display: block;
  margin-top: 10px;
  font-size: clamp(46px, 5vw, 66px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -1px;
  background: linear-gradient(180deg, #fff 0%, #ffcb9f 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
.page-svc .sg-orbit-core-n em { font-style: normal; font-size: .5em; vertical-align: super; }
.page-svc .sg-orbit-core-t {
  display: block;
  margin-top: 8px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 3px;
  color: rgba(255, 255, 255, .9);
}
.page-svc .sg-orbit-core-p { margin: 18px 0 0; font-size: 13px; color: rgba(255, 255, 255, .6); }
.page-svc .sg-orbit-core-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 11px 24px;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  background: var(--grad);
  border-radius: 999px;
  box-shadow: 0 14px 30px rgba(255, 90, 0, .34);
  transition: transform .45s cubic-bezier(.22, .61, .36, 1), box-shadow .45s ease, filter .45s ease;
}
.page-svc .sg-orbit-core-cta i { font-size: 14px; transition: transform .45s ease; }
.page-svc .sg-orbit-core-cta:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 42px rgba(255, 90, 0, .46);
  filter: brightness(1.06);
}
.page-svc .sg-orbit-core-cta:hover i { transform: translateX(4px); }

/* ---------- 41.8 响应式收口 ---------- */
@media (max-width: 1199px) {
  .page-svc .sg-orbit { --r: 210px; --n: 70px; }
  .page-svc .sg-orbit-item { width: 96px; }
  .page-svc .sg-orbit-ico i { font-size: 24px; }
}
@media (max-width: 991px) {
  .page-svc .sg-intro { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .page-svc .sg-intro-media { max-width: 480px; margin: 0 auto; }
  .page-svc .sg-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 20px; }
  .page-svc .sg-flow::before { display: none; }   /* 折行后主线不再对齐，隐藏 */
  .page-svc .sg-tool-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-svc .sg-tool-item:nth-child(odd) { border-left: 0; }
  .page-svc .sg-tool-item:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .page-svc .sg-col-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-svc .sg-orbit { --r: 178px; --n: 62px; }
  .page-svc .sg-orbit-item { width: 84px; gap: 10px; }
  .page-svc .sg-orbit-ico i { font-size: 21px; }
  .page-svc .sg-orbit-name { font-size: 12px; }
}
@media (max-width: 767px) {
  .page-svc .sg-flow { grid-template-columns: 1fr; gap: 26px; }
  .page-svc .sg-col-4 { grid-template-columns: 1fr; }
  .page-svc .sg-card { padding: 24px 18px 22px; }
  .page-svc .sg-card-ico { width: 112px; height: 112px; }
  .page-svc .sg-card-grid.is-row { grid-template-columns: minmax(0, 1fr); margin-top: 30px; border-radius: 20px; }
  .page-svc .sg-card.is-row { padding: 26px 20px 28px; }
  .page-svc .sg-card.is-row:nth-child(even) { border-left: 0; }
  .page-svc .sg-card.is-row:nth-child(n + 2) { border-top: 1px solid var(--line); }
  .page-svc .sg-card.is-row::after { top: 26px; right: 20px; font-size: 30px; }
  .page-svc .sg-card.is-row .sg-card-ico { width: 76px; height: 76px; margin-bottom: 20px; border-radius: 24px; }
  .page-svc .sg-card.is-row .sg-card-ico i { font-size: 33px; }
  .page-svc .sg-card.is-row .sg-card-tt { font-size: 19px; }
  .page-svc .sg-card.is-row .sg-card-p { font-size: 13.5px; }
  .page-svc .sg-tool-grid { grid-template-columns: 1fr; }
  .page-svc .sg-tool-item { padding: 26px 22px; }
  .page-svc .sg-tool-item + .sg-tool-item { border-left: 0; }
  .page-svc .sg-tool-item:nth-child(n + 2) { border-top: 1px solid var(--line); }
  .page-svc .sg-tool-no { font-size: 40px; }
  .page-svc .sg-media-ring { display: none; }
  /* 环形轨道降级为三列网格 */
  .page-svc .sg-orbit { width: auto; height: auto; }
  .page-svc .sg-orbit-track { display: none; }
  .page-svc .sg-orbit-list {
    position: static;
    width: auto;
    height: auto;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}
  .page-svc .sg-orbit-item {
    position: static;
    width: auto;
    gap: 8px;
    padding: 16px 6px;
    transform: none;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 16px;
}
  .page-svc .sg-orbit-core {
    position: static;
    transform: none;
    width: auto;
    max-width: 420px;
    margin: 30px auto 0;
    padding-top: 26px;
    border-top: 1px dashed rgba(255, 255, 255, .18);
}
}

/* ==========================================================================
   42. 服务子页（page/service3.html · 移动应用定制）
   --------------------------------------------------------------------------
   1) 作用域：.page-svc.page-mobile，不影响其它服务子页；
   2) hero 沿用 39 节，区块标题统一 .pl-head（34.1.2），区块节奏由 .sg-block 控制；
   3) 形态刻意区分：A 左文右图 + 深色数据带 + 诊断面板（.sg-msplit/.sg-mstat/.sg-pain）/
      B 三列功能卡（.sg-func）/ C 左三 + 中置主视觉 + 右三 对称三栏（.sg-adv）/
      D 图标网格（.sg-ind）/ E 案例网格（.pl-gallery 25 节）；
   4) 区块 A 信息不重复：A1 只讲品牌认知（标题/追问/结论），数字只在 A2 出现，
      问题只在 A3 出现，交付说明只在 A4 出现；
   5) 区块 A 明暗节奏：A2 深色玻璃带（沿用 hero 暗色）→ A3 浅灰诊断面板 + 白色问题卡
      → A4 居中虚线承诺条，三层递进，互不同形；
   6) 区块 C 视觉要点：列外侧一条渐隐导轨串起 6 个渐变编号（导轨 z-index: 1，编号 z-index: 2
      压线形成断点），两侧列 align-content: space-between 与中置主视觉同高分布，编号一律朝外
      （右列 flex-direction: row-reverse 镜像）、悬停朝中间靠拢；中置主视觉用「右下渐变实块 +
      左上点阵纹理」双向错位 + 白色相框描边托底；.sg-block 用 overflow: clip 而非 hidden，
      避免区块内出现 sticky 元素时被 hidden 的滚动容器语义破坏。
    ========================================================================== */

   /* ---------- 42.1 区块 A：左文右图 + 数据条 + 四栏问题卡 ---------- */
   .page-svc .sg-msplit {
   display: grid;
   grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr);
   align-items: center;
   gap: clamp(28px, 3.8vw, 62px);
}
   .page-svc .sg-msplit .pl-head { margin-bottom: 18px; }
   .page-svc .sg-msplit-lead {                       /* 品牌色引题 */
   margin: 0 0 6px;
   font-size: clamp(18px, 1.6vw, 23px);
   font-weight: 800;
   letter-spacing: 1px;
   color: var(--brand);
}
.page-svc .sg-msplit-media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  isolation: isolate;
}
.page-svc .sg-msplit-media img {
  display: block;
  width: 100%;
  max-width: 520px;
  filter: drop-shadow(0 24px 44px rgba(17, 24, 39, .16));
  transition: transform 1s cubic-bezier(.22, .61, .36, 1);
}
.page-svc .sg-msplit-media:hover img { transform: translateY(-8px); }

/* 行动按钮：品牌渐变胶囊 */
.page-svc .sg-msplit-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: clamp(24px, 2.4vw, 32px);
  padding: 14px 30px;
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: .5px;
  color: #fff;
  background: var(--grad);
  border-radius: 999px;
  box-shadow: 0 18px 36px -20px rgba(255, 90, 0, .75);
  transition: transform .4s cubic-bezier(.22, .61, .36, 1), box-shadow .4s ease, filter .4s ease;
}
.page-svc .sg-msplit-cta i { font-size: 14px; transition: transform .4s ease; }
.page-svc .sg-msplit-cta:hover {
  transform: translateY(-3px);
  box-shadow: 0 24px 44px -20px rgba(255, 90, 0, .85);
  filter: brightness(1.05);
}
.page-svc .sg-msplit-cta:hover i { transform: translateX(4px); }

/* 数据带：深色玻璃面板（沿用 hero 暗色系）+ 品牌柔光，数字用品牌渐变 */
.page-svc .sg-mstat {
  position: relative;
  isolation: isolate;                               /* 柔光层压到面板底色之上、内容之下 */
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: clamp(44px, 4.8vw, 70px) 0 0;
  padding: clamp(6px, .6vw, 10px);
  list-style: none;
  background: linear-gradient(180deg, #0a1226 0%, #060a16 60%, #04070f 100%);
  border-radius: 26px;
  box-shadow: 0 36px 78px -46px rgba(6, 10, 22, .85);
  overflow: hidden;
}
.page-svc .sg-mstat::before {                       /* 左上品牌柔光 */
  content: "";
  position: absolute;
  z-index: -1;
  left: -8%;
  top: -120%;
  width: 48%;
  height: 300%;
  background: radial-gradient(closest-side, rgba(255, 106, 0, .34), rgba(255, 106, 0, 0));
  pointer-events: none;
}
.page-svc .sg-mstat::after {                        /* 顶部玻璃高光 */
  content: "";
  position: absolute;
  left: 6%;
  right: 6%;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .3), rgba(255, 255, 255, 0));
}
.page-svc .sg-mstat li {
  position: relative;
  padding: clamp(24px, 2.2vw, 34px) clamp(14px, 1.4vw, 24px);
  text-align: center;
  border-radius: 20px;
  transition: background .4s ease;
}
.page-svc .sg-mstat li + li::before {               /* 竖向玻璃分隔线 */
  content: "";
  position: absolute;
  left: 0;
  top: 26%;
  bottom: 26%;
  width: 1px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .22), rgba(255, 255, 255, 0));
}
.page-svc .sg-mstat li:hover { background: rgba(255, 255, 255, .05); }
.page-svc .sg-mstat-n {                            /* 大数字容器：只管字号字重与悬停位移 */
  display: block;
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(30px, 2.5vw, 42px);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -1.5px;
  filter: drop-shadow(0 12px 22px rgba(255, 90, 0, .3));
  transition: transform .45s cubic-bezier(.22, .61, .36, 1);
}
.page-svc .sg-mstat li:hover .sg-mstat-n { transform: translateY(-4px); }
.page-svc .sg-mstat-v {                            /* 数字本体：等宽数字 + 橙红渐变（同 .pStat 手法） */
  font-variant-numeric: tabular-nums;              /* 滚动过程中宽度不抖动 */
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.page-svc .sg-mstat-n em {                         /* 单位：单独上色，不被渐变文字吞掉 */
  margin-left: 2px;
  font-size: .44em;
  font-style: normal;
  font-weight: 800;
  letter-spacing: 0;
  color: var(--brand);
  -webkit-text-fill-color: currentColor;
}
.page-svc .sg-mstat-l {
  display: block;
  margin-top: 10px;
  font-size: 13.5px;
  letter-spacing: .6px;
  color: rgba(255, 255, 255, .62);
}

/* 诊断面板：浅灰面板包裹「面板头 + 四张编号问题卡」，与 A2 深色带形成明暗对照 */
.page-svc .sg-pain {
  margin-top: clamp(30px, 3.2vw, 46px);
  padding: clamp(22px, 2.3vw, 34px);
  background:
    radial-gradient(120% 150% at 100% 0%, rgba(255, 106, 0, .07), rgba(255, 106, 0, 0) 58%),
    var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 26px;
}
.page-svc .sg-pain-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-bottom: clamp(18px, 1.8vw, 26px);
}
.page-svc .sg-pain-head-ico {                      /* 品牌渐变方块图标 */
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  font-size: 20px;
  color: #fff;
  background: var(--grad);
  border-radius: 15px;
  box-shadow: 0 16px 30px -18px rgba(255, 90, 0, .85);
}
.page-svc .sg-pain-head-tt {
  margin: 0;
  font-size: clamp(17px, 1.3vw, 20px);
  font-weight: 800;
  letter-spacing: .5px;
  color: var(--ink);
}
.page-svc .sg-pain-head-badge {                    /* 问题数徽标：面板头右侧 */
  margin-left: auto;
  padding: 5px 13px;
  font-size: 12.5px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: .5px;
  color: var(--brand);
  background: #fff;
  border: 1px solid rgba(255, 106, 0, .22);
  border-radius: 999px;
  box-shadow: 0 8px 18px -14px rgba(255, 90, 0, .9);
}
.page-svc .sg-mpain {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.2vw, 18px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.page-svc .sg-mpain-item {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: clamp(20px, 1.9vw, 26px) clamp(18px, 1.6vw, 24px) clamp(22px, 2vw, 28px);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 18px 40px -34px rgba(17, 24, 39, .55);
  transition: transform .4s cubic-bezier(.22, .61, .36, 1), border-color .4s ease, box-shadow .4s ease;
}
.page-svc .sg-mpain-item::before {                 /* 顶部警示线，悬停展开 */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  background: linear-gradient(90deg, #ffb066 0%, #f2683f 100%);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s ease;
}
.page-svc .sg-mpain-no {                           /* 右上角序号水印 */
  position: absolute;
  right: 14px;
  top: 10px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 38px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -2px;
  color: rgba(17, 24, 39, .05);
  transition: color .4s ease;
}
.page-svc .sg-mpain-item:hover {
  transform: translateY(-6px);
  border-color: rgba(242, 104, 63, .3);
  box-shadow: 0 26px 50px -36px rgba(242, 104, 63, .55);
}
.page-svc .sg-mpain-item:hover::before { transform: scaleX(1); }
.page-svc .sg-mpain-item:hover .sg-mpain-no { color: rgba(242, 104, 63, .16); }
.page-svc .sg-mpain-ico {
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-bottom: 16px;
  font-size: 21px;
  color: #f2683f;
  background: rgba(242, 104, 63, .09);
  border-radius: 14px;
  transition: color .35s ease, background .35s ease, transform .35s ease;
}
.page-svc .sg-mpain-item:hover .sg-mpain-ico {
  color: #fff;
  background: linear-gradient(135deg, #ff8a4d 0%, #f2683f 100%);
  transform: rotate(-6deg);
}
.page-svc .sg-mpain-bd { position: relative; min-width: 0; }
.page-svc .sg-mpain-tt {
  margin: 0;
  font-size: 16.5px;
  font-weight: 800;
  letter-spacing: .5px;
  color: var(--ink);
}
.page-svc .sg-mpain-p {
  margin: 8px 0 0;
  font-size: 13.5px;
  line-height: 1.8;
  color: var(--muted);
}

/* 承诺条：居中虚线 + 品牌圆标，作为区块 A 的收束 */
.page-svc .sg-mnote {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: clamp(26px, 2.6vw, 38px) 0 0;
  padding: 16px clamp(20px, 2.2vw, 30px);
  font-size: 14.5px;
  line-height: 1.85;
  text-align: center;
  color: var(--ink);
  background: linear-gradient(90deg, rgba(255, 247, 240, 0) 0%, #fff7f0 16%, #fff7f0 84%, rgba(255, 247, 240, 0) 100%);
  border: 1px dashed rgba(255, 106, 0, .3);
  border-radius: 18px;
}
.page-svc .sg-mnote i {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  font-size: 16px;
  color: #fff;
  background: var(--grad);
  border-radius: 50%;
  box-shadow: 0 12px 24px -14px rgba(255, 90, 0, .85);
}

/* ---------- 42.2 区块 B：三列功能卡 ---------- */
.page-svc .sg-func-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 1.8vw, 26px);
  margin: clamp(34px, 4vw, 54px) 0 0;
  padding: 0;
  list-style: none;
}
.page-svc .sg-func-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: clamp(26px, 2.4vw, 34px) clamp(22px, 2vw, 30px) clamp(28px, 2.6vw, 36px);
  background: linear-gradient(180deg, #ffffff 0%, #fffdfb 100%);
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: 0 18px 44px -34px rgba(17, 24, 39, .5);
  transition: transform .4s ease, box-shadow .4s ease, border-color .4s ease;
}
.page-svc .sg-func-card::before {                 /* 顶部品牌渐变色条，悬停展开 */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  background: var(--grad);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s ease;
}
.page-svc .sg-func-card:hover {
  transform: translateY(-8px);
  border-color: rgba(255, 106, 0, .22);
  box-shadow: 0 30px 62px -34px rgba(255, 90, 0, .42);
}
.page-svc .sg-func-card:hover::before { transform: scaleX(1); }
.page-svc .sg-func-head { display: flex; align-items: center; gap: 14px; }
.page-svc .sg-func-ico {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  font-size: 25px;
  color: var(--brand);
  background: rgba(255, 106, 0, .09);
  border-radius: 16px;
  transition: color .35s ease, background .35s ease, transform .35s ease;
}
.page-svc .sg-func-card:hover .sg-func-ico {
  color: #fff;
  background: var(--grad);
  transform: rotate(-6deg);
}
.page-svc .sg-func-tt {
  margin: 0;
  font-size: clamp(17px, 1.3vw, 20px);
  font-weight: 800;
  letter-spacing: 1px;
  color: var(--ink);
}
.page-svc .sg-func-p {
  margin: 18px 0 0;
  font-size: 14.5px;
  line-height: 1.85;
  color: var(--muted);
}
.page-svc .sg-func-list {
  display: grid;
  gap: 10px;
  margin: 16px 0 0;
  padding: 16px 0 0;
  list-style: none;
  border-top: 1px dashed var(--line);
}
.page-svc .sg-func-list li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--ink);
}
.page-svc .sg-func-list li i { margin-top: 2px; font-size: 14px; color: var(--brand); }

/* ---------- 42.3 区块 C：六大优势（左三 · 中图 · 右三 对称三栏） ---------- */
.page-svc .sg-block.sg-adv-block {                 /* 中央暖色聚光托住主视觉，两侧极淡光收边 */
  background:
    radial-gradient(740px 460px at 50% 26%, rgba(255, 122, 26, .075), transparent 68%),
    radial-gradient(560px 360px at 4% 96%, rgba(255, 122, 26, .045), transparent 72%),
    radial-gradient(520px 340px at 96% 8%, rgba(255, 122, 26, .045), transparent 72%),
    #fff;
}

.page-svc .sg-adv {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(280px, 24vw, 380px) minmax(0, 1fr);
  align-items: stretch;                            /* 左右列撑满行高：与中置主视觉同高分布 */
  gap: clamp(20px, 2.8vw, 48px);
  margin-top: clamp(34px, 4vw, 54px);
}

/* 左右两列：各 3 条；列外侧一条渐隐导轨串起编号节点，形成对称的“围绕” */
.page-svc .sg-adv-col {
  --adv-no: 46px;                                  /* 编号节点直径（列级：导轨定位需用到） */
  --adv-pad: 12px;                                 /* 条目水平内边距（编号圆心随之贴外缘） */
  position: relative;
  display: grid;
  align-content: space-between;
  gap: clamp(12px, 1.5vw, 22px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.page-svc .sg-adv-col::before {                    /* 竖向渐隐导轨：两端淡出，中段穿过编号圆心 */
  content: "";
  position: absolute;
  z-index: 1;
  top: 12px;
  bottom: 12px;
  width: 1px;
  background: linear-gradient(180deg, rgba(255, 106, 0, 0) 0%, rgba(255, 106, 0, .26) 22%, rgba(255, 106, 0, .26) 78%, rgba(255, 106, 0, 0) 100%);
}
.page-svc .sg-adv-col.is-left::before { left: calc(var(--adv-pad) + var(--adv-no) / 2); }
.page-svc .sg-adv-col.is-right::before { right: calc(var(--adv-pad) + var(--adv-no) / 2); }

.page-svc .sg-adv-item {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  padding: 10px var(--adv-pad);
  border-radius: 16px;
  transition: background .45s ease, transform .5s cubic-bezier(.22, .61, .36, 1);
}
.page-svc .sg-adv-col.is-right .sg-adv-item { flex-direction: row-reverse; } /* 镜像：两侧编号一律朝外 */
.page-svc .sg-adv-col.is-left .sg-adv-item:hover { /* 悬停朝中置主视觉靠拢，暖色渐隐高亮 */
  transform: translateX(6px);
  background: linear-gradient(90deg, rgba(255, 247, 240, 0) 0%, rgba(255, 241, 231, .96) 100%);
}
.page-svc .sg-adv-col.is-right .sg-adv-item:hover {
  transform: translateX(-6px);
  background: linear-gradient(270deg, rgba(255, 247, 240, 0) 0%, rgba(255, 241, 231, .96) 100%);
}
/* 悬停中置主视觉时六条一并朝中心微移，强化“围绕”（:has 不支持的浏览器自动忽略） */
.page-svc .sg-adv:has(.sg-adv-media:hover) .sg-adv-col.is-left .sg-adv-item { transform: translateX(4px); }
.page-svc .sg-adv:has(.sg-adv-media:hover) .sg-adv-col.is-right .sg-adv-item { transform: translateX(-4px); }

/* 中置主视觉：双向错位装饰（渐变实块 + 点阵纹理）+ 白色相框描边 + 底部悬浮标 */
.page-svc .sg-adv-media {
  position: relative;
  align-self: center;                              /* 主视觉在左右两列之间垂直居中 */
  isolation: isolate;
}
.page-svc .sg-adv-media::before {                  /* 右下错位的渐变实块，给图框压出投影层 */
  content: "";
  position: absolute;
  z-index: -2;
  left: 20px;
  right: -18px;
  top: 26px;
  bottom: -24px;
  background: var(--grad);
  border-radius: 30px;
  opacity: .13;
}
.page-svc .sg-adv-media::after {                   /* 左上错位的点阵纹理，向四周渐隐 */
  content: "";
  position: absolute;
  z-index: -1;
  left: -20px;
  right: 28px;
  top: -22px;
  bottom: 34px;
  background-image: radial-gradient(rgba(255, 106, 0, .34) 1.2px, transparent 1.2px);
  background-size: 13px 13px;
  border-radius: 24px;
  opacity: .55;
  -webkit-mask-image: radial-gradient(84% 84% at 18% 18%, #000 0%, rgba(0, 0, 0, .12) 62%, transparent 100%);
  mask-image: radial-gradient(84% 84% at 18% 18%, #000 0%, rgba(0, 0, 0, .12) 62%, transparent 100%);
}
.page-svc .sg-adv-shot {
  position: relative;
  margin: 0;
  background: #fff;
  border-radius: 26px;
  overflow: hidden;
  box-shadow: 0 44px 82px -50px rgba(6, 10, 22, .72), 0 0 0 9px rgba(255, 255, 255, .92), 0 0 0 10px rgba(255, 106, 0, .12);
  transition: transform .7s cubic-bezier(.22, .61, .36, 1), box-shadow .7s ease;
}
.page-svc .sg-adv-media:hover .sg-adv-shot {
  transform: translateY(-8px);
  box-shadow: 0 56px 100px -50px rgba(6, 10, 22, .8), 0 0 0 9px #fff, 0 0 0 10px rgba(255, 106, 0, .3);
}
.page-svc .sg-adv-shot img {
  display: block;
  width: 100%;
  transition: transform 1.2s cubic-bezier(.22, .61, .36, 1);
}
.page-svc .sg-adv-media:hover .sg-adv-shot img { transform: scale(1.04); }
.page-svc .sg-adv-mark {                           /* 图框底部居中悬浮标（纯装饰） */
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: -24px;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 22px 44px -26px rgba(6, 10, 22, .72), 0 0 0 1px rgba(255, 106, 0, .14);
  transition: transform .7s cubic-bezier(.22, .61, .36, 1);
}
.page-svc .sg-adv-media:hover .sg-adv-mark { transform: translate(-50%, -8px); } /* 与图框同步上浮 */
.page-svc .sg-adv-mark b {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 27px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -1px;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.page-svc .sg-adv-mark em {                        /* 与数字之间加 1px 竖分隔，避免读成一串 */
  padding-left: 11px;
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 1.6px;
  color: var(--muted);
  border-left: 1px solid var(--line);
}

/* 编号节点：品牌渐变实心 + 白色外环（干净地打断导轨）+ 柔光；悬停放大并弹出扩散环 */
.page-svc .sg-adv-no {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--adv-no);
  height: var(--adv-no);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: -.5px;
  color: #fff;
  background: var(--grad);
  border-radius: 50%;
  box-shadow: 0 0 0 5px #fff, 0 14px 26px -14px rgba(255, 90, 0, .85);
  transition: transform .45s cubic-bezier(.22, .61, .36, 1), box-shadow .45s ease;
}
.page-svc .sg-adv-no::after {                      /* 悬停时向外扩散的细环 */
  content: "";
  position: absolute;
  inset: -7px;
  border: 1px solid rgba(255, 106, 0, .38);
  border-radius: 50%;
  opacity: 0;
  transform: scale(.82);
  transition: opacity .4s ease, transform .55s cubic-bezier(.22, .61, .36, 1);
}
.page-svc .sg-adv-item:hover .sg-adv-no {
  transform: scale(1.06);
  box-shadow: 0 0 0 5px #fff, 0 18px 32px -14px rgba(255, 90, 0, .95);
}
.page-svc .sg-adv-item:hover .sg-adv-no::after { opacity: 1; transform: scale(1); }

/* 文本：标题转主色，描述随之上浮一级灰阶 */
.page-svc .sg-adv-bd { flex: 1; min-width: 0; padding-top: 2px; }
.page-svc .sg-adv-tt {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: .5px;
  color: var(--ink);
  transition: color .35s ease;
}
.page-svc .sg-adv-item:hover .sg-adv-tt { color: var(--brand); }
.page-svc .sg-adv-p {
  margin: 6px 0 0;
  font-size: 13.5px;
  line-height: 1.8;
  color: var(--muted);
  transition: color .35s ease;
}
.page-svc .sg-adv-item:hover .sg-adv-p { color: var(--text); }

/* ---------- 42.4 区块 D：行业解决方案图标网格 ---------- */
.page-svc .sg-ind-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(12px, 1.4vw, 20px);
  margin: clamp(34px, 4vw, 54px) 0 0;
  padding: 0;
  list-style: none;
}
.page-svc .sg-ind-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 24px 10px 20px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 14px 34px -30px rgba(17, 24, 39, .5);
  transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.page-svc .sg-ind-item:hover {
  transform: translateY(-6px);
  border-color: rgba(255, 106, 0, .24);
  box-shadow: 0 24px 46px -28px rgba(255, 90, 0, .45);
}
.page-svc .sg-ind-item img {
  width: 46px;
  height: 46px;
  object-fit: contain;
  transition: transform .4s cubic-bezier(.22, .61, .36, 1);
}
.page-svc .sg-ind-item:hover img { transform: scale(1.1) rotate(-5deg); }
.page-svc .sg-ind-item span {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .5px;
  color: var(--ink);
  transition: color .35s ease;
}
.page-svc .sg-ind-item:hover span { color: var(--brand); }

/* ---------- 42.5 响应式收口 ---------- */
@media (max-width: 1199px) {
  .page-svc .sg-ind-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .page-svc .sg-adv { grid-template-columns: minmax(0, 1fr) clamp(250px, 22vw, 320px) minmax(0, 1fr); gap: clamp(16px, 2.4vw, 32px); }
  .page-svc .sg-adv-col { --adv-no: 42px; --adv-pad: 10px; }
  .page-svc .sg-adv-item { gap: 13px; }
  .page-svc .sg-adv-tt { font-size: 15.5px; }
}
@media (max-width: 991px) {
  .page-svc .sg-msplit { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .page-svc .sg-msplit-media { max-width: 520px; margin: 0 auto; }
  /* C：主视觉置顶居中，左右两列并排（编号统一朝左），底部留出悬浮标位置 */
  .page-svc .sg-adv { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 26px; }
  .page-svc .sg-adv-media { grid-column: 1 / -1; order: -1; max-width: 440px; margin: 0 auto 42px; }
  .page-svc .sg-adv-col { align-content: start; gap: 6px; }
  .page-svc .sg-adv-col::before { display: none; } /* 两列并排已无“围绕”意象，收起列导轨 */
  .page-svc .sg-adv-col.is-right .sg-adv-item { flex-direction: row; }
  .page-svc .sg-adv-col.is-right .sg-adv-item:hover {
    transform: translateX(6px);
    background: linear-gradient(90deg, rgba(255, 247, 240, 0) 0%, rgba(255, 240, 230, .95) 100%);
}
  .page-svc .sg-func-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-svc .sg-mstat { border-radius: 22px; }
  .page-svc .sg-pain { padding: 22px; }
  .page-svc .sg-mpain { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-svc .sg-mpain-item { padding: 22px 20px; }
}
@media (max-width: 767px) {
  .page-svc .sg-msplit-media img { max-width: 420px; }
  .page-svc .sg-func-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .page-svc .sg-func-card { padding: 24px 20px 26px; }
  .page-svc .sg-ind-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .page-svc .sg-ind-item { padding: 18px 8px 16px; border-radius: 16px; }
  .page-svc .sg-ind-item img { width: 38px; height: 38px; }
  .page-svc .sg-ind-item span { font-size: 13px; }
  .page-svc .sg-mstat { margin-top: 34px; padding: 4px; border-radius: 20px; }
  .page-svc .sg-mstat li { padding: 18px 8px; border-radius: 16px; }
  .page-svc .sg-mstat-n { font-size: 24px; }
  .page-svc .sg-mstat-l { margin-top: 6px; font-size: 12px; }
  .page-svc .sg-pain { padding: 18px 16px; border-radius: 22px; }
  .page-svc .sg-pain-head { gap: 10px; margin-bottom: 16px; }
  .page-svc .sg-pain-head-ico { width: 42px; height: 42px; font-size: 19px; border-radius: 13px; }
  .page-svc .sg-mpain { gap: 12px; }
  .page-svc .sg-mpain-item { padding: 18px 16px; border-radius: 16px; }
  .page-svc .sg-mpain-no { right: 12px; top: 8px; font-size: 30px; }
  .page-svc .sg-mpain-ico { width: 40px; height: 40px; margin-bottom: 12px; font-size: 18px; border-radius: 12px; }
  .page-svc .sg-mpain-tt { font-size: 15.5px; }
  .page-svc .sg-mnote { padding: 14px 18px; font-size: 13.5px; }
  .page-svc .sg-adv { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .page-svc .sg-adv-media { max-width: 360px; margin-bottom: 38px; }
  .page-svc .sg-adv-col.is-right { margin-top: 8px; }
  .page-svc .sg-adv-col { --adv-no: 42px; --adv-pad: 10px; }
  .page-svc .sg-adv-item { gap: 13px; padding: 9px var(--adv-pad); }
  .page-svc .sg-adv-no { font-size: 14px; }
  .page-svc .sg-adv-tt { font-size: 15.5px; }
  .page-svc .sg-adv-mark { padding: 8px 13px; }
  .page-svc .sg-adv-mark b { font-size: 22px; }
}
@media (max-width: 575px) {
  .page-svc .sg-msplit-cta { display: flex; justify-content: center; padding: 13px 20px; }
  .page-svc .sg-pain { padding: 16px 14px; }
  .page-svc .sg-pain-head-badge { margin-left: 0; }
  .page-svc .sg-mpain { grid-template-columns: minmax(0, 1fr); }
  .page-svc .sg-mpain-item { flex-direction: row; align-items: flex-start; gap: 14px; padding: 18px 16px; }
  .page-svc .sg-mpain-ico { margin-bottom: 0; }
  .page-svc .sg-mpain-bd { flex: 1; }
  .page-svc .sg-mpain-p { margin-top: 5px; }
  .page-svc .sg-mstat { padding: 2px; }
  .page-svc .sg-mstat li { padding: 16px 4px; }
  .page-svc .sg-mstat-n { font-size: 21px; letter-spacing: -1px; }
  .page-svc .sg-mstat-l { font-size: 11.5px; }
  .page-svc .sg-adv-media { max-width: 320px; margin-bottom: 34px; }
  .page-svc .sg-adv-col { --adv-no: 40px; --adv-pad: 8px; }
  .page-svc .sg-adv-item { gap: 12px; padding: 8px var(--adv-pad); }
  .page-svc .sg-adv-no { font-size: 13.5px; }
  .page-svc .sg-adv-tt { font-size: 15px; }
  .page-svc .sg-adv-p { margin-top: 4px; font-size: 13px; }
}

/* ==========================================================================
   43. 服务子页（page/service4.html · 微信小程序）
   --------------------------------------------------------------------------
   1) 作用域：.page-svc.page-wx，不干扰 41 / 42 节的服务子页；
   2) hero 沿用 39 节，区块标题统一 .pl-head（34.1.2），区块节奏由 .sg-block 控制；
   3) 形态刻意区分：
      A 2×2 横向红利卡（.sg-wxmkt，右上衬线描边大编号 + 渐变描边卡）/
      B 4×2 应用卡片（.sg-wxapp，84px 圆角图标托在上 / 标题描述在下 + 底部渐变条从左展开）/
      C 4×2 场景网格（.sg-wxscene，桌面端图标间横向虚线连接 + 悬停外圈虚线环旋转）/
      D 案例网格（.pl-gallery 25 节）；
   4) 关键修正：原配图（wx-l-006~027）是紫色调扁平图标（部分自带紫底），
      图标容器从「淡橙胶囊」改为「白底 + 紫色淡渐变描边环」——默认呼应原图色调，
      hover 时切到品牌橙渐变描边环——默认态协调、交互态统一品牌；
   5) 43.5 为排版精修层：统一「区块标题 → 卡片标题 → 卡片描述」三段字号 / 行高 /
      字距 / 段距，标题-描述间距由 5px 放宽到 16px，描述字号 13 → 13.5~14px。
   ========================================================================== */

/* ---------- 43.1 图标容器（三块共用底座） ---------- */
.page-svc.page-wx .sg-wx-ico {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  transition: transform .45s cubic-bezier(.22, .61, .36, 1), background .45s ease, box-shadow .45s ease;
}
.page-svc.page-wx .sg-wx-ico img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ---------- 43.2 区块 A：小程序 · 大市场（2×2 横向红利卡 + 衬线描边大编号） ---------- */
.page-svc.page-wx .sg-wxmkt {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 1.8vw, 26px);
  margin: clamp(34px, 4vw, 54px) 0 0;
  padding: 0;
  list-style: none;
}
.page-svc.page-wx .sg-wxmkt-card {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 30px 26px 26px;
  background:
    linear-gradient(180deg, #ffffff 0%, #fafbfd 100%) padding-box,
    linear-gradient(135deg, rgba(155,140,255,.28) 0%, rgba(155,140,255,.06) 100%) border-box;
  border: 1.5px solid transparent;
  border-radius: 22px;
  transition: transform .4s ease, background .4s ease, box-shadow .4s ease;
}
.page-svc.page-wx .sg-wxmkt-card:hover {
  transform: translateY(-6px);
  background:
    linear-gradient(180deg, #ffffff 0%, #fafbfd 100%) padding-box,
    var(--grad) border-box;
  box-shadow: 0 28px 52px -32px rgba(255, 90, 0, .42);
}
.page-svc.page-wx .sg-wxmkt-no {
  position: absolute;
  top: 14px;
  right: 22px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 54px;
  font-weight: 900;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(155,140,255,.42);
  letter-spacing: -2px;
  pointer-events: none;
  transition: -webkit-text-stroke-color .4s ease, transform .4s ease;
}
.page-svc.page-wx .sg-wxmkt-card:hover .sg-wxmkt-no {
  -webkit-text-stroke-color: rgba(255, 106, 0, .6);
  transform: translateY(-2px);
}
.page-svc.page-wx .sg-wxmkt-ico { width: 58px; height: 58px; }
.page-svc.page-wx .sg-wxmkt-bd { flex: 1; min-width: 0; padding-top: 4px; padding-right: 64px; }   /* 给右上编号让位 */
.page-svc.page-wx .sg-wxmkt-tt {
  margin: 0;

  font-weight: 800;

  color: var(--ink);
  transition: color .35s ease;
}
.page-svc.page-wx .sg-wxmkt-card:hover .sg-wxmkt-tt { color: var(--brand); }
.page-svc.page-wx .sg-wxmkt-p { margin: 8px 0 0;   color: var(--muted); }

/* ---------- 43.3 区块 B：应用中心（4×2 应用卡片 · 上图标 / 下文案） ---------- */
.page-svc.page-wx .sg-wxapp {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));    /* 8 个 item 正好 4×2，避免末行残缺 */
  gap: clamp(14px, 1.5vw, 22px);
  margin: clamp(34px, 4vw, 54px) 0 0;
  padding: 0;
  list-style: none;
}
.page-svc.page-wx .sg-wxapp-item {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 30px 20px 28px;
  text-align: center;
  background:
    linear-gradient(180deg, #ffffff 0%, #fafbfd 100%) padding-box,
    linear-gradient(135deg, rgba(155,140,255,.22) 0%, rgba(155,140,255,.04) 100%) border-box;
  border: 1.5px solid transparent;
  border-radius: 20px;
  transition: transform .4s ease, background .4s ease, box-shadow .4s ease;
}
.page-svc.page-wx .sg-wxapp-item::after {        /* 底部渐变条 hover 从左展开 */
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 0;
  height: 3px;
  background: var(--grad);
  border-radius: 3px 3px 0 0;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .5s cubic-bezier(.22, .61, .36, 1);
}
.page-svc.page-wx .sg-wxapp-item:hover {
  transform: translateY(-6px);
  background:
    linear-gradient(180deg, #ffffff 0%, #fafbfd 100%) padding-box,
    var(--grad) border-box;
  box-shadow: 0 24px 46px -28px rgba(255, 90, 0, .45);
}
.page-svc.page-wx .sg-wxapp-item:hover::after { transform: scaleX(1); }

/* 「上图」：84px 圆角方托盘（squircle），内缩 18px 让图标净高约 45px，成为卡片视觉主角 */
.page-svc.page-wx .sg-wxapp-ico {
  width: 100%;
}

/* 「下文案」：标题紧贴图标托，描述托底（字号/行高统一由 43.5 排版层接管） */
.page-svc.page-wx .sg-wxapp-tt {
  margin: 20px 0 0;

  font-weight: 800;

  color: var(--ink);
  transition: color .35s ease;
}
.page-svc.page-wx .sg-wxapp-item:hover .sg-wxapp-tt { color: var(--brand); }
.page-svc.page-wx .sg-wxapp-p { margin: 12px 0 0;   color: var(--muted); }

/* ---------- 43.4 区块 C：小程序核心场景（4×2 网格 + 横向虚线连接 + 悬停外圈虚线环旋转） ---------- */
.page-svc.page-wx .sg-wxscene {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(28px, 3vw, 44px) clamp(16px, 1.8vw, 28px);
  margin: clamp(38px, 4.4vw, 58px) 0 0;
  padding: 0;
  list-style: none;
}
.page-svc.page-wx .sg-wxscene-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.page-svc.page-wx .sg-wxscene-item::before {       /* 桌面端：相邻场景的横向虚线连接 */
  content: "";
  position: absolute;
  top: 32px;                                        /* 图标圆心垂直位置（64/2） */
  left: calc(50% + 42px);
  right: calc(-50% + 42px);
  height: 0;
  border-top: 2px dashed rgba(155,140,255,.32);
  pointer-events: none;
}
.page-svc.page-wx .sg-wxscene-item:nth-child(4n)::before { display: none; }    /* 每行末尾不画连线 */
.page-svc.page-wx .sg-wxscene-ico {
  position: relative;
  isolation: isolate;
  width: 64px;
  height: 64px;
  padding: 14px;
  border-radius: 50%;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(155,140,255,.22), 0 12px 28px -22px rgba(17, 24, 39, .5);
}
.page-svc.page-wx .sg-wxscene-ico::before {        /* 悬停时自图标后方漫出的暖色光斑 */
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 50%;
  width: 104px;
  height: 104px;
  transform: translate(-50%, -50%) scale(.6);
  background: radial-gradient(circle, rgba(255, 106, 0, .18), transparent 68%);
  border-radius: 50%;
  opacity: 0;
  transition: opacity .45s ease, transform .55s cubic-bezier(.22, .61, .36, 1);
}
.page-svc.page-wx .sg-wxscene-ico::after {         /* 悬停时绕图标外圈旋转的虚线环 */
  content: "";
  position: absolute;
  inset: -9px;
  border: 1.5px dashed rgba(155,140,255,.55);
  border-radius: 50%;
  opacity: 0;
  animation: sg-wxscene-spin 9s linear infinite;
  animation-play-state: paused;
  transition: opacity .4s ease;
}
.page-svc.page-wx .sg-wxscene-item:hover .sg-wxscene-ico {
  background: linear-gradient(150deg, #fff7f1 0%, #ffe9d8 100%);
  box-shadow: 0 18px 34px -22px rgba(255, 90, 0, .75), inset 0 0 0 1px rgba(255, 106, 0, .28);
}
.page-svc.page-wx .sg-wxscene-item:hover .sg-wxscene-ico::before { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.page-svc.page-wx .sg-wxscene-item:hover .sg-wxscene-ico::after { opacity: 1; animation-play-state: running; }
@keyframes sg-wxscene-spin { to { transform: rotate(360deg); }}
.page-svc.page-wx .sg-wxscene-tt {
  margin: 16px 0 0;

  font-weight: 800;

  color: var(--ink);
  transition: color .35s ease;
}
.page-svc.page-wx .sg-wxscene-item:hover .sg-wxscene-tt { color: var(--brand); }
.page-svc.page-wx .sg-wxscene-p { margin: 8px 0 0;   color: var(--muted); }

/* ---------- 43.5 排版细节精修（字号 / 行高 / 字距 / 段距，仅本页作用域） ---------- */

/* 区块标题区：原「主标题 → 描述」仅隔 5px（该处预留的分隔符并未生效）过挤，
   现按「英文小标 → 主标题 → 描述」拉开三级节奏，并收窄行宽提升居中大段的可读性 */
.page-svc.page-wx .pl-head { margin-bottom: clamp(44px, 4.6vw, 62px); }
.page-svc.page-wx .pl-head-en { font-size: 12.5px; letter-spacing: 6px; }
.page-svc.page-wx .pl-head-tt {
  margin-top: 14px;
  font-size: clamp(27px, 2.5vw, 37px);
  line-height: 1.24;
  letter-spacing: 4px;
  text-wrap: balance;
}
.page-svc.page-wx .pl-head-p {
  margin-top: 16px;
  max-width: 640px;                                /* 居中段每行约 38~40 字，长于 46 字易串行 */
  font-size: 15.5px;
  line-height: 2.05;
  letter-spacing: .3px;
}
/* 居中标题字距补偿：letter-spacing 会在末字后追加一个字距，令整行视觉左偏半个字距，用等量左内边距抵消 */
.page-svc.page-wx .pl-head.is-center .pl-head-tt { padding-left: 4px; }

/* 区块 A：2 列宽卡，文字可放到段落基准 14px */
.page-svc.page-wx .sg-wxmkt-tt { font-size: 17.5px; line-height: 1.45; letter-spacing: 1px; }
.page-svc.page-wx .sg-wxmkt-p { margin-top: 10px; font-size: 14px; line-height: 1.95; letter-spacing: .2px; text-wrap: pretty; }

/* 区块 B：3 列磁贴，标题 17px，与 A 形成一档递降 */
.page-svc.page-wx .sg-wxapp-tt { font-size: 17px; line-height: 1.45; letter-spacing: 1px; }
.page-svc.page-wx .sg-wxapp-p { margin-top: 12px; font-size: 13.5px; line-height: 1.95; letter-spacing: .2px; text-wrap: pretty; }

/* 区块 C：4 列窄格，标题 16.5px / 描述 13.5px，与 B 保持同一视觉档位 */
.page-svc.page-wx .sg-wxscene-tt { margin-top: 15px; font-size: 16.5px; line-height: 1.45; letter-spacing: 1px; }
.page-svc.page-wx .sg-wxscene-p { margin-top: 10px; font-size: 13.5px; line-height: 1.95; letter-spacing: .2px; text-wrap: pretty; }

/* ---------- 43.6 响应式收口 ---------- */
@media (max-width: 1199px) {
  .page-svc.page-wx .sg-wxmkt-card { gap: 16px; padding: 28px 22px 22px; }
  .page-svc.page-wx .sg-wxmkt-no { font-size: 48px; top: 12px; right: 18px; }
}
@media (max-width: 991px) {
  .page-svc.page-wx .pl-head { margin-bottom: 38px; }
  .page-svc.page-wx .sg-wxapp { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-svc.page-wx .sg-wxscene { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 22px; }
  .page-svc.page-wx .sg-wxscene-item::before { display: none; }    /* 列数变化后连线视觉混乱，整体隐藏 */
}
@media (max-width: 767px) {
  .page-svc.page-wx .pl-head { margin-bottom: 30px; }
  .page-svc.page-wx .pl-head-en { font-size: 11.5px; letter-spacing: 4px; }
  .page-svc.page-wx .pl-head-tt { margin-top: 12px; font-size: 25px; line-height: 1.3; letter-spacing: 2px; }
  .page-svc.page-wx .pl-head.is-center .pl-head-tt { padding-left: 2px; }
  .page-svc.page-wx .pl-head-p { margin-top: 13px; font-size: 14px; line-height: 1.95; }
  .page-svc.page-wx .sg-wxmkt { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .page-svc.page-wx .sg-wxmkt-ico { width: 52px; height: 52px; border-radius: 17px; }
  .page-svc.page-wx .sg-wxmkt-tt { font-size: 16.5px; }
  .page-svc.page-wx .sg-wxmkt-no { font-size: 42px; }
  .page-svc.page-wx .sg-wxapp { gap: 12px; }
  .page-svc.page-wx .sg-wxapp-item { padding: 26px 16px 24px; }
  .page-svc.page-wx .sg-wxapp-tt { font-size: 16px; }
  .page-svc.page-wx .sg-wxscene { gap: 28px 14px; }
  .page-svc.page-wx .sg-wxscene-ico { width: 58px; height: 58px; }
  .page-svc.page-wx .sg-wxscene-tt { font-size: 15.5px; }
}
@media (max-width: 575px) {
  /* 应用磁贴转为「图标左 + 文字右」紧凑横排，避免窄屏下描述被压成过多行 */
  .page-svc.page-wx .sg-wxapp-item { flex-direction: row; align-items: flex-start; gap: 14px; padding: 16px 14px; text-align: left; }
  .page-svc.page-wx .sg-wxapp-item:hover .sg-wxapp-ico { transform: translateY(-2px) scale(1.05); }
  .page-svc.page-wx .sg-wxapp-bd { flex: 1; min-width: 0; }
  .page-svc.page-wx .sg-wxapp-tt { margin: 0; }
  .page-svc.page-wx .sg-wxapp-p { margin: 6px 0 0; font-size: 13.5px; }
  .page-svc.page-wx .sg-wxmkt-bd { padding-right: 50px; }
  .page-svc.page-wx .sg-wxmkt-no { font-size: 38px; }
  .page-svc.page-wx .sg-wxscene-p { font-size: 13px; line-height: 1.9; }
}

/* ==========================================================================
   44. 服务子页（page/service5.html · 品牌视觉设计）
   --------------------------------------------------------------------------
   1) 作用域：.page-svc.page-vis，不影响 41 / 42 / 43 节的服务子页；
   2) hero 沿用 39 节，区块标题统一 .pl-head（34.1.2），区块节奏由 .sg-block 控制；
   3) 形态刻意区分：
      A 三列图标托卡（.sg-vis-card，右上衬线描边大编号 + 88px 图标托 + 悬停顶部渐变条）/
      B 三列上图下文卡（直接复用 34.1.5 .sg-provide，照片封面 + 压图序号徽标）/
      C 左浏览器预览 + 右规范导轨清单（.sg-vis-split：.sg-vis-demo 浏览器窗口 mockup +
        .sg-vis-specs 竖向导轨，编号方标兼作品牌色板，行悬停铺浅橙底）/
      D 案例网格（.pl-gallery 25 节）；
   4) 配图适配：pp-l-005~007 为 160×160 透明底扁平图标 → 走「图标托」object-fit: contain；
      pp-l-001~003 为 600×350 横图 → 走「上图下文」封面（.sg-provide-pic 内 cover 裁切）；
      pp-l-004 为 590×280 横图 → 装进浏览器 mockup 视口（等比缩放、不裁切）。
   ========================================================================== */

/* ---------- 44.1 区块 A：塑造品牌化网站视觉设计（三列图标托卡） ---------- */
.page-svc.page-vis .sg-vis-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 1.8vw, 26px);
  margin: clamp(34px, 4vw, 54px) 0 0;
  padding: 0;
  list-style: none;
}
.page-svc.page-vis .sg-vis-card {
  position: relative;
  overflow: hidden;
  padding: 38px 30px 34px;
  text-align: center;
  background: linear-gradient(180deg, #ffffff 0%, #fdfcfa 100%);
  border: 1px solid rgba(17, 24, 39, .07);
  border-radius: 22px;
  box-shadow: 0 20px 46px -38px rgba(17, 24, 39, .5);
  transition: transform .4s ease, box-shadow .4s ease, border-color .4s ease;
}
.page-svc.page-vis .sg-vis-card::before {           /* 顶部品牌渐变条，悬停从左展开 */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  z-index: 2;
  background: var(--grad);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s ease;
}
.page-svc.page-vis .sg-vis-card:hover {
  transform: translateY(-8px);
  border-color: rgba(255, 106, 0, .24);
  box-shadow: 0 32px 62px -34px rgba(255, 106, 0, .42);
}
.page-svc.page-vis .sg-vis-card:hover::before { transform: scaleX(1); }
.page-svc.page-vis .sg-vis-no {                     /* 右上衬线描边大编号（呼应 43.2 的编号母题） */
  position: absolute;
  top: 16px;
  right: 24px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 52px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -2px;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255, 106, 0, .3);
  pointer-events: none;
  transition: -webkit-text-stroke-color .4s ease, transform .4s ease;
}
.page-svc.page-vis .sg-vis-card:hover .sg-vis-no {
  -webkit-text-stroke-color: rgba(255, 106, 0, .62);
  transform: translateY(-3px);
}
.page-svc.page-vis .sg-vis-ico {                    /* 88px 圆角方图标托：白底 + 品牌淡橙描边环 */
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 88px;
  transition: transform .45s cubic-bezier(.22, .61, .36, 1), background .45s ease, box-shadow .45s ease;
}
.page-svc.page-vis .sg-vis-ico img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.page-svc.page-vis .sg-vis-card:hover .sg-vis-ico { /* 悬停：描边环切品牌渐变 + 上移放大 */
  transform: translateY(-4px) scale(1.04);
}
.page-svc.page-vis .sg-vis-tt {
  margin: 24px 0 0;
  font-size: clamp(19px, 1.2vw, 21px);
  font-weight: 800;
  letter-spacing: 1px;
  color: var(--ink);
  transition: color .35s ease;
}
.page-svc.page-vis .sg-vis-card:hover .sg-vis-tt { color: var(--brand); }
.page-svc.page-vis .sg-vis-p {
  margin: 14px 0 0;
  font-size: 14.5px;
  line-height: 1.95;
  color: var(--muted);
  text-wrap: pretty;
}

/* ---------- 44.2 区块 C：我们能做到哪些（左浏览器预览 + 右规范导轨清单） ---------- */
.page-svc.page-vis .sg-vis-split {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr);
  align-items: center;
  gap: clamp(32px, 4vw, 68px);
  margin: clamp(34px, 4vw, 54px) 0 0;
}

/* 左：浏览器窗口预览卡（把 590×280 主视觉还原成「网站截图」语境） */
.page-svc.page-vis .sg-vis-demo {
  position: relative;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(17, 24, 39, .08);
  border-radius: 20px;
  box-shadow: 0 30px 62px -44px rgba(17, 24, 39, .58);
  transition: transform .7s cubic-bezier(.22, .61, .36, 1), box-shadow .6s ease;
}
.page-svc.page-vis .sg-vis-demo:hover {
  transform: translateY(-6px);
  box-shadow: 0 40px 76px -44px rgba(17, 24, 39, .62);
}
.page-svc.page-vis .sg-vis-demo-bar {                /* 浏览器标题栏 */
  display: flex;
  align-items: center;
  gap: 12px;
  height: 40px;
  padding: 0 16px;
  background: linear-gradient(180deg, #f8f9fc 0%, #eef1f8 100%);
  border-bottom: 1px solid rgba(17, 24, 39, .07);
}
.page-svc.page-vis .sg-vis-demo-dots {
  display: inline-flex;
  flex: 0 0 auto;
  gap: 6px;
}
.page-svc.page-vis .sg-vis-demo-dots i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(17, 24, 39, .15);
}
.page-svc.page-vis .sg-vis-demo-dots i:first-child { background: var(--brand); }
.page-svc.page-vis .sg-vis-demo-url {                /* 地址栏 pill */
  flex: 1;
  min-width: 0;
  overflow: hidden;
  padding: 4px 12px;
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: .6px;
  color: var(--muted);
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: #fff;
  border: 1px solid rgba(17, 24, 39, .07);
  border-radius: 999px;
}
.page-svc.page-vis .sg-vis-demo-view {
  position: relative;
  overflow: hidden;
  background: #eef1f7;
}
.page-svc.page-vis .sg-vis-demo-view img {
  display: block;
  width: 100%;
}

/* 右：规范导轨清单（编号方标兼作品牌色板，竖向导轨把三段串成一条链路） */
.page-svc.page-vis .sg-vis-specs {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}
.page-svc.page-vis .sg-vis-specs::before {
  content: "";
  position: absolute;
  left: 0;
  top: 30px;
  bottom: 30px;
  width: 56px;
  background: linear-gradient(180deg, rgba(255, 106, 0, .45) 0%, rgba(255, 106, 0, .04) 100%) no-repeat center / 1px 100%;
  pointer-events: none;
}
.page-svc.page-vis .sg-vis-specs > li {
  position: relative;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  align-items: start;
  gap: 4px 20px;
}
.page-svc.page-vis .sg-vis-specs > li + li { margin-top: clamp(26px, 2.6vw, 36px); }
.page-svc.page-vis .sg-vis-specs > li::before {      /* 行悬停时铺一层浅橙底 */
  content: "";
  position: absolute;
  inset: -11px -18px -11px -8px;
  background: linear-gradient(90deg, rgba(255, 106, 0, .07) 0%, rgba(255, 106, 0, 0) 100%);
  border-radius: 18px;
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
}
.page-svc.page-vis .sg-vis-specs > li:hover::before { opacity: 1; }
.page-svc.page-vis .sg-vis-spec-no {
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  font-family: Arial, sans-serif;
  font-size: 17px;
  font-weight: 900;
  letter-spacing: .5px;
  color: #fff;
  border-radius: 18px;
  box-shadow: 0 16px 30px -18px rgba(255, 90, 0, .7);
  transition: transform .4s cubic-bezier(.22, .61, .36, 1), box-shadow .4s ease;
}
.page-svc.page-vis .sg-vis-specs > li:nth-child(1) .sg-vis-spec-no { background: linear-gradient(135deg, #ff9d3d 0%, #ff6a00 100%); }
.page-svc.page-vis .sg-vis-specs > li:nth-child(2) .sg-vis-spec-no { background: linear-gradient(135deg, #ff6a00 0%, #de3f00 100%); }
.page-svc.page-vis .sg-vis-specs > li:nth-child(3) .sg-vis-spec-no {
  background: linear-gradient(135deg, #2b3b60 0%, #0d1730 100%);
  box-shadow: 0 16px 30px -18px rgba(13, 23, 48, .72);
}
.page-svc.page-vis .sg-vis-specs > li:hover .sg-vis-spec-no {
  transform: translateY(-4px) scale(1.04);
  box-shadow: 0 20px 34px -16px rgba(255, 90, 0, .8);
}
.page-svc.page-vis .sg-vis-specs > li:nth-child(3):hover .sg-vis-spec-no { box-shadow: 0 20px 34px -16px rgba(13, 23, 48, .78); }
.page-svc.page-vis .sg-vis-spec-bd {
  position: relative;
  z-index: 1;
}
.page-svc.page-vis .sg-vis-spec-tt {
  margin: 15px 0 0;
  font-size: 17.5px;
  font-weight: 800;
  letter-spacing: 1px;
  color: var(--ink);
  transition: color .35s ease;
}
.page-svc.page-vis .sg-vis-specs > li:hover .sg-vis-spec-tt { color: var(--brand); }
.page-svc.page-vis .sg-vis-spec-p {
  margin: 10px 0 0;
  font-size: 14.5px;
  line-height: 1.9;
  color: var(--muted);
  text-wrap: pretty;
}

/* ---------- 44.3 响应式收口 ---------- */
@media (max-width: 1199px) {
  .page-svc.page-vis .sg-vis-card { padding: 34px 26px 30px; }
  .page-svc.page-vis .sg-vis-no { font-size: 46px; }
  .page-svc.page-vis .sg-vis-specs::before { width: 52px; }
  .page-svc.page-vis .sg-vis-specs > li { grid-template-columns: 52px minmax(0, 1fr); gap: 4px 18px; }
  .page-svc.page-vis .sg-vis-spec-no { width: 52px; height: 52px; border-radius: 16px; }
}
@media (max-width: 991px) {
  .page-svc.page-vis .sg-vis-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-svc.page-vis .sg-vis-split { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .page-svc.page-vis .sg-vis-demo { max-width: 620px; margin: 0 auto; }
}
@media (max-width: 767px) {
  .page-svc.page-vis .sg-vis-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .page-svc.page-vis .sg-vis-card { padding: 30px 24px 28px; }
  .page-svc.page-vis .sg-vis-no { top: 14px; right: 20px; font-size: 42px; }
  .page-svc.page-vis .sg-vis-ico { width: 76px; height: 76px; padding: 15px; border-radius: 24px; }
  .page-svc.page-vis .sg-vis-tt { margin-top: 20px; font-size: 18px; }
  .page-svc.page-vis .sg-vis-p { margin-top: 12px; font-size: 14px; }
  .page-svc.page-vis .sg-vis-demo { border-radius: 16px; }
  .page-svc.page-vis .sg-vis-demo-bar { height: 34px; gap: 10px; padding: 0 13px; }
  .page-svc.page-vis .sg-vis-demo-dots { gap: 5px; }
  .page-svc.page-vis .sg-vis-demo-dots i { width: 8px; height: 8px; }
  .page-svc.page-vis .sg-vis-demo-url { padding: 3px 10px; font-size: 10px; }
}
@media (max-width: 575px) {
  .page-svc.page-vis .sg-vis-split { gap: 30px; }
  .page-svc.page-vis .sg-vis-specs::before { top: 24px; bottom: 24px; width: 46px; }
  .page-svc.page-vis .sg-vis-specs > li { grid-template-columns: 46px minmax(0, 1fr); gap: 4px 14px; }
  .page-svc.page-vis .sg-vis-specs > li + li { margin-top: 24px; }
  .page-svc.page-vis .sg-vis-specs > li::before { inset: -9px -12px -9px -6px; border-radius: 14px; }
  .page-svc.page-vis .sg-vis-spec-no { width: 46px; height: 46px; font-size: 16px; border-radius: 14px; }
  .page-svc.page-vis .sg-vis-spec-tt { margin-top: 11px; font-size: 16px; }
  .page-svc.page-vis .sg-vis-spec-p { font-size: 14px; }
}

/* ==========================================================================
   45. 服务子页（page/service6.html · 商标注册）
   ========================================================================== */

/* ---------- 45.1 区块 A：商标注册流程（流程图 + 四步概览） ---------- */
.page-svc.page-tm .sg-tm-flow {                        /* 流程图卡：白底圆角描边托底 */
  position: relative;
  margin: clamp(34px, 4vw, 54px) 0 0;
  padding: clamp(18px, 1.8vw, 28px);
}
.page-svc.page-tm .sg-tm-flow img {
  display: block;
  width: 100%;
  max-width: 1040px;
  margin: 0 auto;
}

.page-svc.page-tm .sg-tm-steps {                       /* 四步概览：把流程图拆成四个标题 */
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 22px);
  margin: clamp(26px, 3vw, 40px) 0 0;
  padding: 0;
  list-style: none;
}
.page-svc.page-tm .sg-tm-step {
  position: relative;
  padding: 22px 22px 22px 64px;
  background: linear-gradient(180deg, #fff 0%, #fafbfd 100%);
  border: 1px solid rgba(17, 24, 39, .06);
  border-radius: 16px;
  box-shadow: 0 14px 30px -24px rgba(17, 24, 39, .3);
  transition: transform .4s ease, border-color .4s ease, box-shadow .4s ease;
}
.page-svc.page-tm .sg-tm-step:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 106, 0, .22);
  box-shadow: 0 22px 42px -22px rgba(255, 90, 0, .28);
}
.page-svc.page-tm .sg-tm-step-no {
  position: absolute;
  left: 16px;
  top: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 17px;
  font-weight: 900;
  color: var(--brand);
  background: rgba(255, 106, 0, .1);
  border-radius: 10px;
}
.page-svc.page-tm .sg-tm-step-tt {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 1px;
  color: var(--ink);
}
.page-svc.page-tm .sg-tm-step-p {
  margin: 6px 0 0;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--muted);
  text-wrap: pretty;
}

/* ---------- 45.2 区块 B：商标延伸服务（左栏说明 + 右栏编号清单） ---------- */
.page-svc.page-tm .sg-tm-ext {                         /* 白色浮卡：左说明 + 右清单 */
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 310px) minmax(0, 1fr);
  gap: clamp(20px, 2.4vw, 36px);
  align-items: stretch;
  padding: clamp(22px, 2.4vw, 34px);
  background:
    radial-gradient(560px 320px at 100% 0%, rgba(255, 122, 26, .07), transparent 68%),
    radial-gradient(420px 280px at 0% 100%, rgba(255, 122, 26, .045), transparent 70%),
    #fff;
  border: 1px solid rgba(17, 24, 39, .06);
  border-radius: 30px;
  box-shadow:
    0 30px 68px -38px rgba(17, 24, 39, .3),
    0 8px 24px -20px rgba(17, 24, 39, .14);
}
.page-svc.page-tm .sg-tm-ext::before {                 /* 卡顶品牌小饰条 */
  content: "";
  position: absolute;
  left: clamp(22px, 2.4vw, 34px);
  top: -1px;
  width: 88px;
  height: 3px;
  border-radius: 0 0 4px 4px;
  background: var(--grad);
  box-shadow: 0 6px 16px rgba(255, 106, 0, .38);
}

/* —— 左栏：暖色内嵌面板 —— */
.page-svc.page-tm .sg-tm-ext-aside {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 2.4vw, 34px);
  background:
    radial-gradient(300px 230px at 100% 104%, rgba(255, 122, 26, .13), transparent 72%),
    linear-gradient(165deg, #fffaf4 0%, #fdf0e4 100%);
  border: 1px solid rgba(255, 106, 0, .13);
  border-radius: 22px;
  box-shadow:
    0 16px 34px -28px rgba(255, 90, 0, .55),
    inset 0 1px 0 rgba(255, 255, 255, .9);
}
.page-svc.page-tm .sg-tm-ext-aside::after {            /* ® 底纹水印 */
  content: "®";
  position: absolute;
  right: -8px;
  bottom: -38px;
  z-index: -1;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 152px;
  line-height: 1;
  color: rgba(255, 106, 0, .075);
  pointer-events: none;
}
.page-svc.page-tm .sg-tm-ext-en {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 4.5px;
  text-transform: uppercase;
  color: var(--brand);
}
.page-svc.page-tm .sg-tm-ext-en::before {              /* 引题前短横 */
  content: "";
  width: 26px;
  height: 2px;
  border-radius: 2px;
  background: var(--grad);
}
.page-svc.page-tm .sg-tm-ext-title {
  margin: 14px 0 0;
  font-size: clamp(25px, 2.3vw, 32px);
  font-weight: 900;
  line-height: 1.3;
  letter-spacing: 3px;
  color: var(--ink);
}
.page-svc.page-tm .sg-tm-ext-title::after {            /* 标题下品牌短杠 */
  content: "";
  display: block;
  width: 52px;
  height: 4px;
  margin-top: 18px;
  border-radius: 4px;
  background: var(--grad);
  box-shadow: 0 5px 14px rgba(255, 106, 0, .35);
}
.page-svc.page-tm .sg-tm-ext-sub {
  margin: 18px 0 0;
  font-size: 14px;
  line-height: 1.95;
  color: var(--text);
  text-wrap: pretty;
}
.page-svc.page-tm .sg-tm-ext-tips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 22px 0 26px;
  padding: 0;
  list-style: none;
}
.page-svc.page-tm .sg-tm-ext-tips li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px 8px 12px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
  background: rgba(255, 255, 255, .78);
  border: 1px solid rgba(255, 106, 0, .16);
  border-radius: 999px;
  box-shadow: 0 8px 16px -14px rgba(255, 90, 0, .6);
  transition: background .35s ease, border-color .35s ease, transform .35s ease;
}
.page-svc.page-tm .sg-tm-ext-tips li i {
  font-size: 14px;
  line-height: 1;
  color: var(--brand);
}
.page-svc.page-tm .sg-tm-ext-tips li:hover {
  background: #fff;
  border-color: rgba(255, 106, 0, .32);
  transform: translateY(-2px);
}
.page-svc.page-tm .sg-tm-ext-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;                                    /* 面板贴底，形成稳定基线 */
  padding: 14px 28px;
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: .5px;
  color: #fff;
  background: var(--grad);
  border-radius: 999px;
  box-shadow:
    0 18px 34px -16px rgba(255, 90, 0, .58),
    inset 0 1px 0 rgba(255, 255, 255, .3);
  transition: transform .35s ease, box-shadow .35s ease;
}
.page-svc.page-tm .sg-tm-ext-cta::before {             /* 悬停光泽扫过 */
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent);
  transform: skewX(-18deg);
  transition: left .65s cubic-bezier(.22, .61, .36, 1);
}
.page-svc.page-tm .sg-tm-ext-cta i { transition: transform .35s ease; }
.page-svc.page-tm .sg-tm-ext-cta:hover {
  color: #fff;
  transform: translateY(-3px);
  box-shadow:
    0 24px 44px -16px rgba(255, 90, 0, .62),
    inset 0 1px 0 rgba(255, 255, 255, .3);
}
.page-svc.page-tm .sg-tm-ext-cta:hover::before { left: 118%; }
.page-svc.page-tm .sg-tm-ext-cta:hover i { transform: translateX(4px); }

/* —— 右栏：两列编号清单 —— */
.page-svc.page-tm .sg-tm-ext-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(28px, 3.2vw, 52px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.page-svc.page-tm .sg-tm-ext-item {
  position: relative;
  display: grid;
  grid-template-columns: 32px 46px minmax(0, 1fr) 26px;
  align-items: center;
  gap: 14px;
  padding: 22px 0;
}
.page-svc.page-tm .sg-tm-ext-item::after {             /* 渐变发丝分隔线 */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(17, 24, 39, .11), rgba(17, 24, 39, .035) 62%, transparent);
}
.page-svc.page-tm .sg-tm-ext-item:nth-child(-n+2)::after { display: none; }   /* 首行不描边 */
.page-svc.page-tm .sg-tm-ext-item::before {            /* 左侧品牌指示条，悬停亮起 */
  content: "";
  position: absolute;
  left: -13px;
  top: 14px;
  bottom: 14px;
  width: 3px;
  border-radius: 3px;
  background: var(--grad);
  box-shadow: 0 0 14px rgba(255, 106, 0, .5);
  opacity: 0;
  transform: scaleY(.3);
  transition: opacity .4s ease, transform .5s cubic-bezier(.22, .61, .36, 1);
}
.page-svc.page-tm .sg-tm-ext-item:hover::before { opacity: 1; transform: scaleY(1); }
.page-svc.page-tm .sg-tm-ext-no {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: .5px;
  color: rgba(17, 24, 39, .26);
  transition: color .4s ease, transform .4s ease;
}
.page-svc.page-tm .sg-tm-ext-item:hover .sg-tm-ext-no {
  color: var(--brand);
  transform: translateY(-1px);
}
.page-svc.page-tm .sg-tm-ext-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  font-size: 20px;
  line-height: 1;
  color: var(--brand);
  background: linear-gradient(150deg, rgba(255, 138, 0, .16) 0%, rgba(255, 61, 0, .07) 100%);
  border-radius: 14px;
  box-shadow: inset 0 0 0 1px rgba(255, 106, 0, .12);
  transition: color .4s ease, background .4s ease, box-shadow .4s ease, transform .45s cubic-bezier(.22, .61, .36, 1);
}
.page-svc.page-tm .sg-tm-ext-item:hover .sg-tm-ext-ico {
  color: #fff;
  background: var(--grad);
  box-shadow:
    0 14px 24px -12px rgba(255, 90, 0, .62),
    inset 0 0 0 1px rgba(255, 255, 255, .18);
  transform: translateY(-2px) rotate(-6deg);
}
.page-svc.page-tm .sg-tm-ext-tt {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: .5px;
  color: var(--ink);
}
.page-svc.page-tm .sg-tm-ext-p {
  margin: 6px 0 0;
  font-size: 12.5px;
  line-height: 1.8;
  color: var(--muted);
  text-wrap: pretty;
}
.page-svc.page-tm .sg-tm-ext-arrow {                   /* 悬停浮现的圆角箭头 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  font-size: 13px;
  color: var(--brand);
  background: rgba(255, 106, 0, .1);
  border-radius: 50%;
  opacity: 0;
  transform: translateX(-8px) scale(.72);
  transition: opacity .4s ease, transform .45s cubic-bezier(.22, .61, .36, 1);
}
.page-svc.page-tm .sg-tm-ext-item:hover .sg-tm-ext-arrow { opacity: 1; transform: translateX(0) scale(1); }

/* ---------- 45.3 区块 C：行业解决方案（6×2 网格） ---------- */
.page-svc.page-tm .sg-tm-ind {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(12px, 1.4vw, 18px);
  margin: clamp(34px, 4vw, 54px) 0 0;
  padding: 0;
  list-style: none;
}
.page-svc.page-tm .sg-tm-ind-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: clamp(24px, 2vw, 32px) 12px;
  background: #fff;
  border: 1px solid rgba(17, 24, 39, .06);
  border-radius: 16px;
  box-shadow: 0 14px 30px -28px rgba(17, 24, 39, .3);
  transition: transform .4s ease, color .4s ease, background .4s ease, border-color .4s ease, box-shadow .4s ease;
}
.page-svc.page-tm .sg-tm-ind-ico {
  font-size: 30px;
  line-height: 1;
  color: var(--brand);
  transition: transform .45s cubic-bezier(.22, .61, .36, 1), color .4s ease;
}
.page-svc.page-tm .sg-tm-ind-tt {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--ink);
  transition: color .4s ease;
}
.page-svc.page-tm .sg-tm-ind-item:hover {
  transform: translateY(-6px);
  color: #fff;
  background: var(--grad);
  border-color: transparent;
  box-shadow: 0 20px 38px -22px rgba(255, 90, 0, .55);
}
.page-svc.page-tm .sg-tm-ind-item:hover .sg-tm-ind-ico {
  color: #fff;
  transform: translateY(-4px) scale(1.08);
}
.page-svc.page-tm .sg-tm-ind-item:hover .sg-tm-ind-tt { color: #fff; }

/* ---------- 45.4 响应式收口 ---------- */
@media (max-width: 1199px) {
  .page-svc.page-tm .sg-tm-ext { grid-template-columns: minmax(0, 268px) minmax(0, 1fr); gap: clamp(18px, 2.2vw, 30px); padding: clamp(20px, 2.2vw, 28px); }
  .page-svc.page-tm .sg-tm-ext::before { left: clamp(20px, 2.2vw, 28px); }
  .page-svc.page-tm .sg-tm-ext-aside { padding: clamp(22px, 2.2vw, 30px); }
  .page-svc.page-tm .sg-tm-ind { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 991px) {
  .page-svc.page-tm .sg-tm-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-svc.page-tm .sg-tm-ext { grid-template-columns: minmax(0, 1fr); gap: 22px; border-radius: 26px; }
  .page-svc.page-tm .sg-tm-ext::before { left: 26px; }
  .page-svc.page-tm .sg-tm-ext-list { grid-template-columns: minmax(0, 1fr); }
  .page-svc.page-tm .sg-tm-ext-item:nth-child(-n+2)::after { display: block; }
  .page-svc.page-tm .sg-tm-ext-item:first-child::after { display: none; }
  .page-svc.page-tm .sg-tm-ind { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .page-svc.page-tm .sg-tm-flow { padding: 14px; border-radius: 18px; }
  .page-svc.page-tm .sg-tm-step { padding: 18px 18px 18px 56px; }
  .page-svc.page-tm .sg-tm-step-no { width: 32px; height: 32px; font-size: 16px; left: 14px; top: 18px; }
  .page-svc.page-tm .sg-tm-ext-title { font-size: 25px; letter-spacing: 2px; }
  .page-svc.page-tm .sg-tm-ext-item { grid-template-columns: 30px 44px minmax(0, 1fr) 24px; gap: 12px; padding: 18px 0; }
  .page-svc.page-tm .sg-tm-ext-ico { width: 44px; height: 44px; font-size: 19px; border-radius: 13px; }
  .page-svc.page-tm .sg-tm-ext-arrow { width: 24px; height: 24px; font-size: 12px; }
  .page-svc.page-tm .sg-tm-ind { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 575px) {
  .page-svc .container { --bs-gutter-x: 1rem; }   /* 容器内边距 12 → 8 px */
  .page-svc.page-tm .sg-tm-steps { grid-template-columns: minmax(0, 1fr); }
  .page-svc.page-tm .sg-tm-step-tt { font-size: 15px; }
  .page-svc.page-tm .sg-tm-ext { gap: 16px; padding: 14px; border-radius: 22px; }
  .page-svc.page-tm .sg-tm-ext::before { left: 24px; width: 68px; }
  .page-svc.page-tm .sg-tm-ext-aside { padding: 16px; border-radius: 18px; }
  .page-svc.page-tm .sg-tm-ext-aside::after { right: -6px; bottom: -26px; font-size: 112px; }
  .page-svc.page-tm .sg-tm-ext-tips { margin: 18px 0 22px; }
  .page-svc.page-tm .sg-tm-ext-item { grid-template-columns: 28px 42px minmax(0, 1fr); gap: 11px; padding: 16px 0; }
  .page-svc.page-tm .sg-tm-ext-arrow { display: none; }
  .page-svc.page-tm .sg-tm-ext-item::before { left: -7px; }
  .page-svc.page-tm .sg-tm-ext-cta { align-self: stretch; justify-content: center; }
  .page-svc.page-tm .sg-tm-ind { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .page-svc.page-tm .sg-tm-ind-item { padding: 22px 10px; }
  .page-svc.page-tm .sg-tm-ind-ico { font-size: 26px; }
  .page-svc.page-tm .sg-tm-ind-tt { font-size: 14px; }
}

/* ==========================================================================
   46. 服务子页（page/service2.html · GEO 优化）
   ========================================================================== */

/* ---------- 46.1 区块：GEO 四步交付（平台覆盖胶囊 + 流程轴，复用 41.3 的 .sg-tags / .sg-flow） ---------- */
.page-svc.page-geo .sg-geo-flow .sg-tags {
  justify-content: center;                      /* 区块标题居中，平台胶囊与标题同轴 */
  margin-top: 24px;
}
.page-svc.page-geo .sg-geo-flow .sg-tags li {
  padding: 7px 16px;                            /* 平台名较短，胶囊比 41.3 的默认规格收紧 */
}
.page-svc.page-geo .sg-geo-flow .sg-flow {
  margin-top: clamp(34px, 3.8vw, 54px);         /* 上方没有左文右图，间距比 41.3 默认值收紧 */
}

/* ---------- 46.2 区块：SEO × GEO 双通道（左右两轨 · 中缝互联 · 底部共用内容底座） ---------- */
.page-svc.page-geo .sg-geo-duo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 118px minmax(0, 1fr);
  margin-top: clamp(34px, 3.8vw, 54px);
}

/* 单条轨道：左轨冷灰打底、右轨暖橙抢先，顶部一道轨道色条区分 */
.page-svc.page-geo .sg-geo-track {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(26px, 2.6vw, 34px) clamp(24px, 2.4vw, 32px) clamp(24px, 2.4vw, 30px);
  border: 1px solid #e7ecf4;
  background: linear-gradient(180deg, #f6f8fc 0%, #fff 64%);
  box-shadow: 0 16px 40px rgba(17, 24, 39, .05);
  transition: transform .5s cubic-bezier(.22, .61, .36, 1), box-shadow .5s ease, border-color .5s ease;
}
.page-svc.page-geo .sg-geo-track::before {           /* 顶部 4px 轨道色条 */
  content: "";
  position: absolute;
  left: -1px;
  right: -1px;
  top: -1px;
  height: 4px;
  border-radius: 22px 22px 0 0;
  background: #c8d3e2;
}
.page-svc.page-geo .sg-geo-track.is-geo {
  border-color: rgba(255, 106, 0, .18);
  background: linear-gradient(180deg, #fff8f3 0%, #fff 64%);
}
.page-svc.page-geo .sg-geo-track.is-geo::before { background: var(--grad); }
.page-svc.page-geo .sg-geo-track:hover {
  transform: translateY(-6px);
  border-color: rgba(255, 106, 0, .24);
  box-shadow: 0 28px 60px rgba(17, 24, 39, .11);
}

.page-svc.page-geo .sg-geo-track-en {
  display: block;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 2.2px;
  color: #93a1b5;
}
.page-svc.page-geo .sg-geo-track.is-geo .sg-geo-track-en { color: var(--brand); }
.page-svc.page-geo .sg-geo-track-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin: 15px 0 15px;
  border-radius: 17px;
  background: #fff;
  color: #64748b;
  font-size: 25px;
  box-shadow: inset 0 0 0 1px #e6ebf3, 0 10px 22px rgba(17, 24, 39, .06);
  transition: transform .5s cubic-bezier(.22, .61, .36, 1), box-shadow .5s ease;
}
.page-svc.page-geo .sg-geo-track.is-geo .sg-geo-track-ico {
  background: linear-gradient(160deg, #fff2e7, #ffe2cd);
  color: var(--brand);
  box-shadow: 0 12px 26px rgba(255, 106, 0, .18);
}
.page-svc.page-geo .sg-geo-track:hover .sg-geo-track-ico { transform: rotate(-6deg) scale(1.05); }
.page-svc.page-geo .sg-geo-track-tt {
  margin: 0;
  font-size: 21px;
  font-weight: 800;
  letter-spacing: 1px;
  color: var(--ink);
}
.page-svc.page-geo .sg-geo-track-p { margin: 10px 0 0; font-size: 13px; line-height: 1.8; color: var(--muted); }
.page-svc.page-geo .sg-geo-track-list {
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}
.page-svc.page-geo .sg-geo-track-list li {
  position: relative;
  padding: 10px 0 10px 24px;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--text);
  border-top: 1px dashed #e7ecf4;
}
.page-svc.page-geo .sg-geo-track-list li:first-child { padding-top: 4px; border-top: 0; }
.page-svc.page-geo .sg-geo-track-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 18px;
  width: 8px;
  height: 8px;
  border-radius: 3px;
  background: #c8d3e2;
}
.page-svc.page-geo .sg-geo-track-list li:first-child::before { top: 12px; }
.page-svc.page-geo .sg-geo-track.is-geo .sg-geo-track-list li::before { background: var(--grad); }

.page-svc.page-geo .sg-geo-track-foot { margin-top: auto; padding-top: 22px; }
.page-svc.page-geo .sg-geo-track-kpi {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 15px;
  border-radius: 999px;
  background: #fff;
  color: #64748b;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .6px;
  box-shadow: inset 0 0 0 1px #e6ebf3;
}
.page-svc.page-geo .sg-geo-track.is-geo .sg-geo-track-kpi {
  background: linear-gradient(135deg, #fff3ea, #ffe6d5);
  color: #d94f00;
  box-shadow: none;
}
.page-svc.page-geo .sg-geo-track-kpi i { font-size: 14px; }

/* 中缝：竖虚线 + 圆形互联节点，两轨在此互相咬合 */
.page-svc.page-geo .sg-geo-link {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
.page-svc.page-geo .sg-geo-link::before {              /* 虚线向下越过轨底，与底座汇合 */
  content: "";
  position: absolute;
  left: 50%;
  top: 14px;
  bottom: -30px;
  border-left: 1.5px dashed #dde4ee;
  transform: translateX(-50%);
}
.page-svc.page-geo .sg-geo-link-dot {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #fff;
  color: var(--brand);
  font-size: 19px;
  box-shadow: inset 0 0 0 1.5px #ffe0cc, 0 12px 26px rgba(17, 24, 39, .08);
  transition: box-shadow .5s ease;
}
.page-svc.page-geo .sg-geo-duo:hover .sg-geo-link-dot {
  box-shadow: inset 0 0 0 1.5px rgba(255, 106, 0, .5), 0 16px 32px rgba(255, 106, 0, .16);
}
.page-svc.page-geo .sg-geo-link-txt {
  position: relative;
  z-index: 1;
  padding: 8px 10px;
  border-radius: 10px;
  background: #fff;
  text-align: center;
  font-size: 11.5px;
  line-height: 1.65;
  font-weight: 700;
  letter-spacing: .4px;
  color: #93a1b5;
}

/* 底部共用底座：横跨两轨，中缝虚线向下汇入 */
.page-svc.page-geo .sg-geo-base {
  grid-column: 1 / -1;
  position: relative;
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(16px, 1.8vw, 24px);
  margin-top: 30px;
  padding: clamp(22px, 2.2vw, 28px) clamp(24px, 2.4vw, 34px);
  border: 1px solid rgba(255, 106, 0, .16);
  border-radius: 22px;
  background: linear-gradient(135deg, #fff8f2 0%, #fff 62%);
  box-shadow: 0 18px 44px rgba(255, 106, 0, .07);
}
.page-svc.page-geo .sg-geo-base::before {              /* ≤991 单列时由底座自身引出连接虚线 */
  content: "";
  display: none;
  position: absolute;
  left: 50%;
  top: -30px;
  height: 30px;
  border-left: 1.5px dashed #ffd9bf;
  transform: translateX(-50%);
}
.page-svc.page-geo .sg-geo-base-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  border-radius: 19px;
  background: var(--grad);
  color: #fff;
  font-size: 26px;
  box-shadow: 0 14px 30px rgba(255, 90, 0, .28);
}
.page-svc.page-geo .sg-geo-base-tt { margin: 0; font-size: 18px; font-weight: 800; letter-spacing: 1px; color: var(--ink); }
.page-svc.page-geo .sg-geo-base-p { margin: 8px 0 0; font-size: 13px; line-height: 1.8; color: var(--muted); }
.page-svc.page-geo .sg-geo-base-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.page-svc.page-geo .sg-geo-base-tags li {
  padding: 8px 15px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(255, 106, 0, .22);
  color: #d94f00;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .4px;
}

/* ---------- 46.3 区块：GEO 适用场景（AI 提问实录卡：客户怎么问 · AI 怎么答 · 你缺什么） ---------- */
.page-svc.page-geo .sg-geo-asks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 1.8vw, 26px);
  margin: clamp(34px, 3.8vw, 54px) 0 0;
  padding: 0;
  list-style: none;
}
.page-svc.page-geo .sg-geo-ask {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(22px, 2.2vw, 28px) clamp(22px, 2.2vw, 30px);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: 0 16px 40px rgba(17, 24, 39, .06);
  transition: transform .5s cubic-bezier(.22, .61, .36, 1), box-shadow .5s ease, border-color .5s ease;
}
.page-svc.page-geo .sg-geo-ask:hover {
  transform: translateY(-6px);
  border-color: rgba(255, 106, 0, .22);
  box-shadow: 0 26px 56px rgba(17, 24, 39, .12);
}
.page-svc.page-geo .sg-geo-ask-hd {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 16px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.page-svc.page-geo .sg-geo-ask-no {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  background: linear-gradient(160deg, #fff3ea, #ffe4d1);
  color: var(--brand);
  font-size: 12.5px;
  font-weight: 900;
  letter-spacing: .4px;
}
.page-svc.page-geo .sg-geo-ask-tt { margin: 0; font-size: 17px; font-weight: 800; letter-spacing: 1px; color: var(--ink); }
.page-svc.page-geo .sg-geo-msg {
  position: relative;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: start;
  gap: 11px;
  padding: 13px 16px;
  border-radius: 16px;
  font-size: 13px;
  line-height: 1.75;
}
.page-svc.page-geo .sg-geo-msg p { margin: 0; }
.page-svc.page-geo .sg-geo-msg-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 14px;
}
.page-svc.page-geo .sg-geo-msg.is-ask {                /* 客户提问：冷灰气泡 + 左上小尾巴 */
  background: #f5f7fb;
  color: var(--text);
}
.page-svc.page-geo .sg-geo-msg.is-ask::before {
  content: "";
  position: absolute;
  left: 22px;
  top: -6px;
  width: 12px;
  height: 12px;
  border-radius: 2px;
  background: #f5f7fb;
  transform: rotate(45deg);
}
.page-svc.page-geo .sg-geo-msg.is-ask .sg-geo-msg-ico { background: #fff; color: #64748b; box-shadow: inset 0 0 0 1px #e6ebf3; }
.page-svc.page-geo .sg-geo-msg.is-ask strong { color: var(--ink); font-weight: 800; }
.page-svc.page-geo .sg-geo-msg.is-reply {              /* AI 回答：虚线暖框，缺口用品牌色点出 */
  margin-top: 12px;
  background: #fffaf6;
  border: 1px dashed rgba(255, 106, 0, .32);
  color: var(--text);
  transition: border-color .5s ease, background .5s ease;
}
.page-svc.page-geo .sg-geo-ask:hover .sg-geo-msg.is-reply { border-color: rgba(255, 106, 0, .6); background: #fff6ef; }
.page-svc.page-geo .sg-geo-msg.is-reply .sg-geo-msg-ico { background: linear-gradient(160deg, #fff1e6, #ffe1cb); color: var(--brand); }
.page-svc.page-geo .sg-geo-msg.is-reply strong { color: var(--brand-deep); font-weight: 800; }
.page-svc.page-geo .sg-geo-ask-do {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: auto 0 0;
  padding-top: 20px;
  font-size: 12.5px;
  line-height: 1.75;
  color: var(--muted);
}
.page-svc.page-geo .sg-geo-ask-do i { color: var(--brand); font-size: 14px; line-height: 1.6; }

/* ---- GEO 子页：双通道 / 提问实录卡 收口 ---- */
@media (max-width: 1199px) {
  .page-svc.page-geo .sg-geo-duo { grid-template-columns: minmax(0, 1fr) 86px minmax(0, 1fr); }
  .page-svc.page-geo .sg-geo-base { grid-template-columns: 56px minmax(0, 1fr); row-gap: 16px; }
  .page-svc.page-geo .sg-geo-base-tags { grid-column: 1 / -1; }
}
@media (max-width: 991px) {
  .page-svc.page-geo .sg-geo-duo { grid-template-columns: minmax(0, 1fr); }
  .page-svc.page-geo .sg-geo-link { flex-direction: row; gap: 14px; padding: 22px 0 4px; }
  .page-svc.page-geo .sg-geo-link::before {
    left: 14px;
    right: 14px;
    top: 50%;
    bottom: auto;
    height: 0;
    border-left: 0;
    border-top: 1.5px dashed #dde4ee;
    transform: translateY(-50%);
  }
  .page-svc.page-geo .sg-geo-base { grid-template-columns: 52px minmax(0, 1fr); margin-top: 20px; }
  .page-svc.page-geo .sg-geo-base::before { display: block; left: 44px; top: -20px; height: 20px; transform: none; }
  .page-svc.page-geo .sg-geo-base-ico { width: 52px; height: 52px; border-radius: 16px; font-size: 23px; }
}
@media (max-width: 767px) {
  .page-svc.page-geo .sg-geo-asks { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 575px) {
  .page-svc.page-geo .sg-geo-track { padding: 22px 18px; border-radius: 18px; }
  .page-svc.page-geo .sg-geo-track-tt { font-size: 18px; }
  .page-svc.page-geo .sg-geo-link-txt { font-size: 11px; letter-spacing: 0; }
  .page-svc.page-geo .sg-geo-base { padding: 20px 18px; border-radius: 18px; }
  .page-svc.page-geo .sg-geo-base-tt { font-size: 16px; }
  .page-svc.page-geo .sg-geo-ask { padding: 20px 16px; border-radius: 18px; }
  .page-svc.page-geo .sg-geo-ask-tt { font-size: 15.5px; }
  .page-svc.page-geo .sg-geo-msg { grid-template-columns: 28px minmax(0, 1fr); gap: 9px; padding: 12px 13px; font-size: 12.5px; }
  .page-svc.page-geo .sg-geo-msg-ico { width: 28px; height: 28px; font-size: 13px; }
}