/* ============================================================
   SEOSOUCMS · default「云澜蓝」2.0 —— 现代营销型
   蓝色渐变首屏 / 居中区块 / 卡片悬浮 / 深蓝页脚
   兼容策略：所有新语法（clamp/渐变变量）均有旧内核 px 兜底；
   flex 间距用 margin 而非 gap（百度APP 旧 WebView 也能正确布局）。
   ============================================================ */
:root {
  --pri: #d42633;
  --pri-d: #b01c28;
  --ink: #16181d;
  --text: #3d4147;
  --muted: #6b7076;
  --line: #e5e7ea;
  --soft: #f2f3f5;
  --foot-bg: #f5f6f8;
  --price: #e11d48;
  --radius: 14px;
  --shadow: 0 10px 30px rgba(22, 24, 29, .08);
  --shadow-lg: 0 18px 44px rgba(212, 38, 51, .16);
}

* { box-sizing: border-box; }
html { height: 100%; }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif;
  color: var(--text); line-height: 1.75; background: #fff;
  -webkit-font-smoothing: antialiased;
}
main { flex: 1 0 auto; width: 100%; }
header.site-header, footer.site-footer { flex: 0 0 auto; }

.wrap { --pad: 20px; max-width: 1680px; margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); }
@media (min-width: 900px) { .wrap { --pad: 36px; } }
a { color: var(--pri); text-decoration: none; }
img { max-width: 100%; }
.empty { color: var(--muted); background: var(--soft); border: 1px dashed var(--line); border-radius: var(--radius); padding: 28px; text-align: center; }

/* ---------- 头部 ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: #ffffff; /* 旧内核兜底 */
  background: rgba(255, 255, 255, .94);
  border-bottom: 1px solid var(--line);
}
.site-header .nav { display: flex; align-items: center; justify-content: space-between; min-height: 66px; padding: 8px var(--pad, 20px); }
.logo { display: inline-block; font-weight: 800; font-size: 19px; color: var(--ink); text-decoration: none; letter-spacing: .3px; }
.logo-dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: #d42633; margin-right: 9px; vertical-align: 1px; }
.site-nav { display: flex; align-items: center; flex-wrap: wrap; }
.site-nav > a { margin-left: 4px; padding: 8px 12px; border-radius: 8px; color: var(--text); text-decoration: none; font-size: 15px; transition: color .18s, background .18s; }
.site-nav > a:hover { color: var(--pri); background: #fdf1f2; }
.site-nav > a.active { color: var(--pri); background: #fdf1f2; font-weight: 600; }
.nav-search, .nav-search.active { color: #fff !important; background: var(--pri); margin-left: 8px; }
.nav-search:hover { background: var(--pri-d) !important; color: #fff !important; }

/* 二级栏目下拉 */
.site-nav .nav-item { position: relative; }
.site-nav .nav-item > a { display: inline-block; margin-left: 4px; padding: 8px 12px; border-radius: 8px; color: var(--text); text-decoration: none; font-size: 15px; }
.site-nav .nav-item > a:hover, .site-nav .nav-item > a.active { color: var(--pri); background: #fdf1f2; }
.site-nav .caret { display: inline-block; margin-left: 7px; vertical-align: middle; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; opacity: .5; }
.nav-drop {
  position: absolute; left: 0; top: 100%; min-width: 176px;
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  box-shadow: var(--shadow-lg); padding: 7px; display: none; z-index: 40;
}
.site-nav .nav-item:hover > .nav-drop, .site-nav .nav-item:focus-within > .nav-drop { display: block; }
.nav-drop a { display: block; padding: 8px 12px; border-radius: 8px; color: var(--text); text-decoration: none; white-space: nowrap; font-size: 14.5px; }
.nav-drop a:hover { background: #fdf1f2; color: var(--pri); }
.nav-drop a.active { color: var(--pri); font-weight: 600; background: #fdf1f2; }

/* ---------- 首屏 ---------- */
.hero {
  position: relative; overflow: hidden;
  margin: 0 0 8px; padding: 80px 24px 72px; text-align: center; border-radius: 0 0 28px 28px;
  background:
    radial-gradient(60% 130% at 50% -12%, rgba(212, 38, 51, .10), transparent 60%),
    linear-gradient(180deg, #f5f6f8 0%, #eef0f2 100%);
  color: var(--ink);
}
.hero-eyebrow {
  display: inline-block; margin: 0 0 14px; padding: 5px 16px; border-radius: 999px;
  background: rgba(212, 38, 51, .10);
  border: 1px solid rgba(212, 38, 51, .35);
  font-size: 13px; letter-spacing: 2px;
}
.hero h1 { margin: 0 0 14px; font-size: 36px; font-size: clamp(27px, 4vw, 46px); line-height: 1.3; letter-spacing: 1px; color: var(--ink); }
.hero-sub { margin: 0 auto; max-width: 640px; font-size: 16px; font-size: clamp(14.5px, 1.5vw, 17px); color: var(--text); }
.hero-chips { margin-top: 30px; font-size: 0; }
.hero-chips span {
  display: inline-block; padding: 7px 18px; border-radius: 999px; font-size: 13.5px;
  margin: 5px 6px 0;
  background: #fff; border: 1px solid #d9dcdf; color: var(--pri);
}

/* ---------- 区块 ---------- */
.block { padding: 52px 0 12px; }
.block-alt { background: var(--soft); margin: 44px 0 0; padding: 52px 0 56px; border-radius: 24px; }
.block-head { text-align: center; margin-bottom: 34px; }
.block-head h2 { display: inline-block; margin: 0; font-size: 25px; font-size: clamp(22px, 2.4vw, 28px); color: var(--ink); letter-spacing: 1px; }
.block-head h2::after { content: ""; display: block; width: 44px; height: 4px; border-radius: 2px; background: linear-gradient(90deg, #e03642, #b01c28); margin: 10px auto 0; }
.block-head p { margin: 10px 0 0; color: var(--muted); font-size: 14.5px; }

/* ---------- 卡片网格 ---------- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(252px, 1fr)); gap: 22px; list-style: none; padding: 0; margin: 0; }
@media (min-width: 1400px) { .grid { grid-template-columns: repeat(auto-fill, minmax(352px, 1fr)); gap: 26px; } }
.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; transition: box-shadow .22s ease, transform .22s ease, border-color .22s ease;
}
.card:hover { border-color: transparent; box-shadow: var(--shadow-lg); }
.card > a { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; }
.card-media { display: block; height: 168px; background: linear-gradient(135deg, #f0f1f3, #f7f8fa); overflow: hidden; }
.card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card-body { display: flex; flex-direction: column; flex: 1; padding: 15px 17px 16px; }
.card h3 { margin: 0 0 6px; font-size: 16.5px; color: var(--ink); line-height: 1.5; }
.card p { margin: 0 0 10px; color: var(--muted); font-size: 13.8px; line-height: 1.7; }
.card .price { color: var(--price); font-weight: 800; font-size: 15.5px; margin: 0 0 8px; }
.card-more { margin-top: auto; font-size: 13px; color: var(--pri); font-weight: 600; }

/* ---------- 客户案例（独立模板） ---------- */
.grid-cases { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 26px; }
@media (min-width: 1400px) { .grid-cases { grid-template-columns: repeat(auto-fill, minmax(430px, 1fr)); gap: 30px; } }
.card-case .card-media { height: 210px; position: relative; }
.card-case .card-media img { transition: transform .7s cubic-bezier(.22, .61, .36, 1); }
.card-case:hover .card-media img { transform: scale(1.03); }
.card-case .card-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(22, 24, 29, .42)); pointer-events: none; }
.case-tag { position: absolute; left: 12px; bottom: 10px; z-index: 2; background: rgba(255, 255, 255, .92); color: var(--pri); font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; }
.case-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0 0 8px; }
.case-meta span { color: var(--muted); font-size: 12.5px; }
.case-meta b { color: var(--pri); font-size: 13.5px; }
/* 列表页头条案例的效果数据带 */
.case-stats { display: flex; flex-wrap: wrap; gap: 10px 26px; margin: 12px 0 10px; padding: 0; list-style: none; }
.case-stats li { display: flex; flex-direction: column; }
.case-stats b { color: var(--pri); font-size: 19px; line-height: 1.2; }
.case-stats span { color: var(--muted); font-size: 12px; }
/* 详情页：头图 / 标题区 / 效果数据带 / 信息网格 */
.c-hero-img { margin: 0 0 18px; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-lg); }
.c-hero-img img { width: 100%; height: auto; display: block; }
.c-head { margin: 0 0 18px; }
.c-head .p-title { margin: 0 0 8px; }
.c-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; color: var(--muted); font-size: 13px; margin: 0 0 10px; }
.c-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin: 0 0 20px; background: linear-gradient(135deg, #fdf1f2, #eef2ff); border: 1px solid #fbe5e7; border-radius: var(--radius); padding: 20px 22px; }
.c-stat { display: flex; flex-direction: column; align-items: center; text-align: center; }
.c-stat b { color: var(--pri); font-size: 24px; line-height: 1.25; }
.c-stat span { color: var(--muted); font-size: 13px; margin-top: 2px; }
.c-fields { margin: 0 0 20px; }
@media (max-width: 720px) { .grid-cases { grid-template-columns: 1fr 1fr; gap: 14px; } .card-case .card-media { height: 140px; } .c-stats { grid-template-columns: 1fr 1fr; padding: 14px 16px; } .c-stat b { font-size: 19px; } }
@media (max-width: 460px) { .grid-cases { grid-template-columns: 1fr; } .c-stats { grid-template-columns: 1fr 1fr; } }

/* ---------- 新闻列表 ---------- */
.news { list-style: none; padding: 0; margin: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.news li { display: flex; align-items: center; justify-content: space-between; padding: 15px 20px; border-bottom: 1px solid var(--line); }
.news li:last-child { border-bottom: 0; }
.news li:hover { background: #f8faff; }
.news a { color: var(--ink); text-decoration: none; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.news a:hover { color: var(--pri); }
.news time { color: var(--muted); font-size: 13px; white-space: nowrap; margin-left: 16px; }

/* ---------- 面包屑 ---------- */
.breadcrumb { font-size: 13px; color: var(--muted); padding: 16px 0 0; }
.breadcrumb a { color: var(--muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--pri); }
.breadcrumb .sep { margin: 0 7px; color: #cbd5e1; }
.breadcrumb [aria-current] { color: var(--ink); font-weight: 500; }

/* ---------- 列表页头 ---------- */
.page-head { padding: 26px 0 8px; border-bottom: 1px solid var(--line); margin-bottom: 28px; }
.page-head h1 { margin: 0 0 8px; font-size: 26px; font-size: clamp(22px, 2.6vw, 28px); color: var(--ink); letter-spacing: .5px; }

/* ---------- 详情页 ---------- */
.detail { max-width: none; margin: 30px auto 44px; }
.detail h1 { font-size: 27px; font-size: clamp(22px, 2.8vw, 29px); color: var(--ink); line-height: 1.45; margin: 6px 0 10px; }
.meta { color: var(--muted); font-size: 13px; padding-bottom: 16px; border-bottom: 1px solid var(--line); margin-bottom: 20px; }
.lead { color: var(--text); background: #f5f6f8; border-left: 4px solid var(--pri); padding: 13px 16px; border-radius: 0 10px 10px 0; margin: 0 0 22px; }
.content { font-size: 15.5px; color: #374151; overflow-wrap: break-word; }
.content img { max-width: 100%; height: auto; border-radius: 10px; }
.content table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; }
.content h2 { color: var(--ink); margin: 30px 0 12px; font-size: 20px; }
.content blockquote { margin: 18px 0; padding: 12px 18px; background: var(--soft); border-left: 4px solid #f0999f; border-radius: 0 10px 10px 0; color: var(--muted); }
.content a { color: var(--pri); text-decoration: none; }
.detail .h2 { margin: 30px 0 12px; font-size: 20px; color: var(--ink); }

/* 价格 */
.price-lg { margin: 2px 0 16px; font-size: 26px; font-weight: 800; color: var(--price); }

/* 参数表 */
table.spec { width: 100%; border-collapse: collapse; font-size: 14.5px; border: 1px solid var(--line); }
table.spec th, table.spec td { border: 0; border-bottom: 1px solid var(--line); padding: 11px 14px; text-align: left; }
table.spec tr:last-child th, table.spec tr:last-child td { border-bottom: 0; }
table.spec th { width: 34%; background: var(--soft); font-weight: 600; color: var(--ink); }

/* 翻页/上下篇 */
.pager { margin-top: 30px; display: flex; flex-wrap: wrap; }
.pager a { text-decoration: none; font-size: 14px; }
.pager-btn {
  display: inline-block; padding: 10px 16px; border-radius: 10px;
  border: 1px solid var(--line); color: var(--text); background: #fff; transition: .18s;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 48%;
}
.pager-btn:hover { border-color: var(--pri); color: var(--pri); background: #fdf1f2; }
.pager-btn.next { margin-left: auto; }

/* ---------- 页脚 ---------- */
.site-footer { margin-top: 56px; background: #f5f6f8; color: var(--muted); }
.foot-grid { display: flex; flex-wrap: wrap; gap: 26px 30px; padding: 38px var(--pad) 10px; }
.foot-brand { flex: 0 0 250px; margin: 0 48px 0 0; } /* 2026-09-19：公司名列与右侧「关于我们」栏目列之间留出间距（移动端第275行 margin:0 覆盖，手机端不受影响） */
.foot-name { margin: 0 0 6px; color: var(--ink); font-size: 18px; font-weight: 700; letter-spacing: .5px; }
.foot-desc { margin: 0; font-size: 13.5px; color: var(--muted); }
.foot-nav { display: flex; flex-direction: column; align-items: flex-start; flex: 1 1 0; min-width: 116px; max-width: 210px; margin: 0; }
.foot-nav a { color: var(--muted); text-decoration: none; font-size: 14px; margin: 0 0 7px; }
.foot-nav a:hover { color: var(--pri); }
.foot-bar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; padding: 16px var(--pad, 36px) 22px; border-top: 1px solid #e2e9f5; margin-top: 22px; }
.foot-bar p { margin: 0; font-size: 13px; color: var(--muted); }
.foot-bar a { color: var(--pri); text-decoration: none; }

/* ---------- Logo 图片（后台设置 Logo 后替代文字站名） ---------- */
.logo-img { max-height: 42px; width: auto; vertical-align: middle; }

/* ---------- 关于我们横带 ---------- */
.about-band { background: linear-gradient(135deg, var(--blue-50), var(--blue-100)); border: 1px solid #f8e2e4; border-radius: var(--radius); padding: 34px 38px; }
.about-text h2 { margin: 0 0 10px; font-size: 22px; color: var(--ink); letter-spacing: 1px; }
.about-text p { margin: 0 0 18px; color: var(--text); max-width: 960px; }
.btn-line { display: inline-block; padding: 9px 22px; border: 1px solid var(--pri); border-radius: 999px; color: var(--pri); text-decoration: none; font-size: 14px; transition: .18s; }
.btn-line:hover { background: var(--pri); color: #fff; }

/* ---------- 联系 CTA 横带 ---------- */
.cta-band { margin: 52px 0 0; padding: 46px 0; background: linear-gradient(135deg, #f1f2f4, #e4e6ea); color: var(--ink); border-radius: 24px; }
.cta-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.cta-text h2 { margin: 0 0 6px; font-size: 24px; letter-spacing: 1px; }
.cta-text p { margin: 0; opacity: .85; font-size: 14.5px; }
.cta-btns { margin: 0; }
.btn-pri { display: inline-block; padding: 11px 28px; background: var(--pri); color: #fff; border-radius: 999px; font-weight: 700; text-decoration: none; margin-right: 12px; }
.btn-ghost { display: inline-block; padding: 11px 28px; border: 1px solid var(--pri); color: var(--pri); border-radius: 999px; text-decoration: none; }
.btn-ghost:hover { background: rgba(212, 38, 51, .08); }

/* ---------- 404 ---------- */
.e404 { text-align: center; padding: 70px 16px 40px; }
.e404 .code { margin: 0; font-size: 108px; font-weight: 800; line-height: 1; color: var(--pri-d); letter-spacing: 8px; }
.e404 .code i { font-style: normal; color: var(--pri); }
.e404 h1 { margin: 18px 0 8px; font-size: 24px; color: var(--ink); }
.e404 .tip { color: var(--muted); margin: 0 0 26px; }
.e404 .btns { margin: 0; }
.e404 .btns .btn-pri { background: var(--pri); color: #fff; }
.e404 .btns .btn-ghost { border-color: var(--line); color: var(--text); }
.e404 .btns .btn-ghost:hover { border-color: var(--pri); color: var(--pri); background: transparent; }
@media (max-width: 720px) {
  .cta-inner { flex-direction: column; text-align: center; }
  .cta-btns { margin-top: 16px; }
  .cta-band { border-radius: 20px 20px 0 0; }
  .cta-band.cta-rounded { border-radius: 20px; }
  .e404 { padding: 48px 14px 30px; }
  .e404 .code { font-size: 72px; }
  .about-band { padding: 26px 22px; }
}

/* ---------- 响应式：平板 / 手机 / 小屏全覆盖 ---------- */
@media (min-width: 1600px) {
  .hero { padding: 96px 0 88px; }
}
@media (max-width: 1024px) {
  .grid { grid-template-columns: repeat(auto-fill, minmax(226px, 1fr)); }
}
@media (max-width: 860px) {
  .site-nav > a, .site-nav .nav-item > a { padding: 7px 8px; font-size: 14px; }
}
@media (max-width: 720px) {
  .hero { padding: 50px 0 46px; border-radius: 0 0 20px 20px; }
  .grid { grid-template-columns: 1fr 1fr; gap: 14px; }
  .card-media { height: 120px; }
  .block { padding: 40px 0 8px; }
  .block-alt { margin: 36px 0 0; padding: 40px 0 44px; border-radius: 18px; }
  .foot-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 18px; }
  .foot-brand { grid-column: 1 / -1; flex: none; margin: 0; }
  .foot-nav { min-width: 0; }
  .pager-btn { max-width: 100%; }
  .pager-btn.next { margin-left: 0; }
}
@media (max-width: 460px) {
  .grid { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-chips span { padding: 6px 12px; font-size: 12px; }
}


/* ============================================================
   3.0 全站优化层（2026-09-15）—— 首屏/列表页头/卡片/详情/单页全覆盖
   ============================================================ */
::selection { background: rgba(212, 38, 51, .16); }
:focus-visible { outline: 2px solid var(--pri); outline-offset: 2px; border-radius: 4px; }

/* ---------- 首屏：光斑层次 ---------- */
.hero {
  background:
    radial-gradient(46% 90% at 18% 0%, rgba(96, 165, 250, .16), transparent 60%),
    radial-gradient(40% 80% at 86% 18%, rgba(212, 38, 51, .14), transparent 65%),
    linear-gradient(180deg, #f5f6f8 0%, #eef0f2 100%);
}
.hero-eyebrow { backdrop-filter: blur(2px); }
.hero-sub { color: var(--text); }

/* ---------- 列表页头 / 单页页头：横幅化 ---------- */
.page-head {
  position: relative; overflow: hidden;
  margin: 18px 0 28px; padding: 30px 34px 28px;
  border: 1px solid #e0e2e6; border-bottom: 1px solid #e0e2e6;
  border-radius: var(--radius);
  background: linear-gradient(135deg, #f1f2f4, #f9fbff);
}
.page-head::after {
  content: ""; position: absolute; right: -46px; top: -46px;
  width: 190px; height: 190px; border-radius: 50%;
  background: radial-gradient(circle, rgba(224, 54, 66, .14), transparent 70%);
}
.page-head h1 { position: relative; font-size: clamp(24px, 3vw, 32px); }
.page-head h1::before {
  content: ""; display: block; width: 46px; height: 5px; border-radius: 3px;
  background: linear-gradient(90deg, #e03642, #b01c28); margin: 0 0 12px;
}
.page-head .lead { margin: 10px 0 0; background: transparent; border-left: 0; padding: 0; color: var(--muted); border-radius: 0; }

/* ---------- 卡片：顶部流光 + 图片缩放 ---------- */
.card { position: relative; }
/* 2026-09-19：去掉卡片 hover 时展开的顶部蓝色条（原 .card::before / .card:hover::before） */
/* 封面图 hover 放大统一放在文件末尾「19. 封面图交互设计」，此处不再重复定义（原 1.05 与后文冲突） */
.card h3 { transition: color .18s; }
.card:hover h3 { color: var(--pri); }
.card-more { transition: color .18s; }
.card:hover .card-more { color: var(--pri-d); }

/* ---------- 新闻列表：日期胶囊 ---------- */
.news li { transition: background .18s; }
.news time { background: var(--soft); border-radius: 999px; padding: 3px 12px; }

/* ---------- 面包屑：胶囊化 ---------- */
.breadcrumb {
  display: inline-block; margin-top: 14px; padding: 7px 16px;
  background: var(--soft); border-radius: 999px;
}

/* ---------- 详情页排版 ---------- */
.detail h1 { letter-spacing: .5px; }
.meta { padding-bottom: 14px; }
.lead { line-height: 1.8; }
.content { font-size: 16px; line-height: 1.95; }
.content p { margin: 0 0 14px; }
.content h2, .content h3 { margin-top: 34px; margin-bottom: 14px; }
.content blockquote { background: #f7f8fa; }
table.spec tr { transition: background .15s; }
table.spec tbody tr:hover td { background: #f7f8fa; }

/* ---------- 翻页/上下篇 ---------- */
.pager-btn { transition: transform .18s, box-shadow .18s, border-color .18s, background .18s; }
.pager-btn:hover { box-shadow: 0 8px 18px rgba(212, 38, 51, .12); }

/* ---------- 页脚：顶部流光 hairline ---------- */
.site-footer { position: relative; }
.site-footer::before {
  content: ""; display: block; height: 3px;
  background: linear-gradient(90deg, transparent 4%, #e03642 30%, #f0999f 50%, #e03642 70%, transparent 96%);
}
.foot-nav a { transition: color .15s; }

/* ---------- CTA 横带：光斑 ---------- */
.cta-band {
  background:
    radial-gradient(52% 120% at 80% 0%, rgba(212, 38, 51, .12), transparent 62%),
    linear-gradient(135deg, #f1f2f4, #e4e6ea);
}
.btn-pri { transition: transform .18s, box-shadow .18s; }
.btn-pri:hover { box-shadow: 0 10px 24px rgba(212, 38, 51, .25); }

/* ---------- 404 ---------- */
.e404 .code { color: var(--pri-d); background: linear-gradient(180deg, #e03642, #b01c28); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* ---------- 首页服务范围导航条 ---------- */
.svc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; list-style: none; padding: 0; margin: 0; }
.svc-grid a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 15px 18px; background: #fff; border: 1px solid var(--line); border-radius: 12px;
  color: var(--ink); text-decoration: none; font-size: 15px; font-weight: 600;
  transition: border-color .18s, box-shadow .18s, transform .18s, color .18s;
}
.svc-grid a span { color: var(--pri); font-weight: 400; transition: transform .18s; }
.svc-grid a:hover { border-color: #d6d9dd; box-shadow: var(--shadow-lg); color: var(--pri); }
.svc-grid a:hover span { transform: translateX(4px); }
@media (max-width: 720px) { .svc-grid { grid-template-columns: 1fr 1fr; gap: 10px; } .svc-grid a { padding: 12px 14px; font-size: 14px; } }
@media (max-width: 460px) { .svc-grid { grid-template-columns: 1fr; } }

/* ---------- 响应式补充 ---------- */
@media (max-width: 720px) {
  .page-head { margin: 12px 0 22px; padding: 22px 20px 20px; }
  .content { font-size: 15.5px; }
}


/* ============================================================
   3.1 宽屏排版层（2026-09-15）—— 详情页两栏 + 右侧文章目录 + 排版精修
   ============================================================ */
/* 锚点跳转不被吸顶头遮挡 */
.content [id] { scroll-margin-top: 92px; }

@media (min-width: 1100px) {
  /* 详情页容器宽屏：宽度全权交给内部 .wrap */
  .detail { max-width: none; }
  /* 旧结构标题/摘要跟随正文列宽；企业版 hero/body/面包屑豁免（面包屑与三类版式容器
     由第 20 节各自按内容列居中/限宽，这里必须一并豁免，否则被压成 100%-376px） */
  .detail > :not(.content):not(.e-hero):not(.e-body):not(.breadcrumb):not(.nw-wrap):not(.pd-wrap):not(.cs-wrap):not(.pd-hero):not(.p-related):not(.cs-final):not(.dl-d-main) { max-width: calc(100% - 376px); }
  .detail.page > .page-head { max-width: none; }   /* 单页横幅保持全宽 */

  /* 正文 Grid 两栏：左侧正文，右侧目录栏
     判定必须用「直接子元素」> .toc-box：目录被插件插进某个卡片内部时（后代选择器仍会命中），
     会凭空启用右侧 320px 空栏、把正文压窄。 */
  .content:has(> .toc-box) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    column-gap: 56px;
    align-items: start;
  }
  .content:not(:has(> .toc-box)) { display: block; }
  .content > * { grid-column: 1; }
  .content > .toc-box {
    grid-column: 2;
    grid-row: 1 / span 200;
    width: 320px; justify-self: end;
    position: sticky; top: 92px;
    margin: 0; padding: 18px 20px;
    background: #f7f8fa; border: 1px solid #e0e2e6; border-left: 3px solid var(--pri);
    border-radius: 12px;
    max-height: calc(100vh - 130px); overflow-y: auto;
  }
  .content > .toc-box .toc-t { color: var(--ink); font-size: 15px; letter-spacing: 1px; }
  .content > .toc-box .toc-l { padding-left: 16px; }
  .content > .toc-box .toc-l a { color: var(--pri); text-decoration: none; }
  .content > .toc-box .toc-l a:hover { color: var(--pri-d); }
}

/* ---------- 排版精修 ---------- */
.detail .meta { letter-spacing: .3px; }
.content h2 { border-left: 4px solid var(--pri); padding-left: 14px; border-radius: 2px 0 0 2px; }
.content h3 { color: var(--ink); }
.content strong { color: var(--ink); }
.content img { border-radius: 12px; box-shadow: 0 10px 30px rgba(22, 24, 29, .12); }
.content hr { border: 0; height: 1px; margin: 30px 0; background: linear-gradient(90deg, transparent, var(--line), transparent); }
.content ul, .content ol { margin: 0 0 16px; padding-left: 24px; }
.content li { margin: 5px 0; }
.content blockquote { box-shadow: 0 4px 14px rgba(22, 24, 29, .04); }
table.spec { border-radius: 12px; overflow: hidden; box-shadow: 0 4px 16px rgba(22, 24, 29, .05); }

/* ============================================================
   3.2 流式字体层（2026-09-15）—— 字号随视口自动缩放
   手机收小不挤、大屏放大更舒展；clamp(下限, 随视口, 上限)
   ============================================================ */
html { font-size: clamp(15px, 0.3vw + 14.2px, 16.5px); }
body { font-size: clamp(14.5px, 0.18vw + 14px, 16px); line-height: 1.72; }
.logo { font-size: clamp(17px, 0.4vw + 15.4px, 20px); }
.site-nav > a, .site-nav .nav-item > a { font-size: clamp(14px, 0.16vw + 13.5px, 15.5px); }
.nav-drop a { font-size: clamp(13.8px, 0.14vw + 13.4px, 15px); }
.hero h1 { font-size: clamp(28px, 3.2vw + 8px, 54px); }
.hero-sub { font-size: clamp(15px, 0.3vw + 14px, 17.5px); }
.hero-chips span { font-size: clamp(12.8px, 0.12vw + 12.5px, 14px); }
.block-head h2 { font-size: clamp(21px, 1vw + 16px, 31px); }
.block-head p { font-size: clamp(13.8px, 0.15vw + 13.4px, 15.2px); }
.card h3 { font-size: clamp(15.5px, 0.3vw + 14.5px, 18px); }
.card p { font-size: clamp(13.2px, 0.16vw + 12.7px, 14.8px); }
.card .price { font-size: clamp(14.8px, 0.2vw + 14px, 16.5px); }
.card-more { font-size: clamp(12.8px, 0.1vw + 12.6px, 14px); }
.news a { font-size: clamp(14px, 0.2vw + 13.5px, 15.8px); }
.news time { font-size: clamp(12.5px, 0.1vw + 12.3px, 13.6px); }
.breadcrumb { font-size: clamp(12.5px, 0.1vw + 12.3px, 13.8px); }
.page-head h1 { font-size: clamp(22px, 1vw + 16.5px, 31px); }
.detail h1 { font-size: clamp(22px, 1vw + 16.5px, 32px); }
.meta { font-size: clamp(12.5px, 0.1vw + 12.3px, 13.8px); }
.content { font-size: clamp(15px, 0.22vw + 14.3px, 17px); }
.content h2, .detail .h2 { font-size: clamp(18px, 0.55vw + 16px, 23px); }
.content h3 { font-size: clamp(16.5px, 0.35vw + 15.5px, 19.5px); }
table.spec { font-size: clamp(13.8px, 0.16vw + 13.4px, 15.4px); }
.pager a { font-size: clamp(13.8px, 0.12vw + 13.5px, 15px); }
.btn-line { font-size: clamp(13.8px, 0.15vw + 13.4px, 15.2px); }
.foot-name { font-size: clamp(16px, 0.35vw + 15px, 18.8px); }
.foot-desc, .foot-nav a, .foot-bar p { font-size: clamp(12.8px, 0.12vw + 12.5px, 14.2px); }
.cta-text h2 { font-size: clamp(20px, 0.8vw + 16.5px, 27px); }
.cta-text p { font-size: clamp(14px, 0.15vw + 13.6px, 15.2px); }
.svc-grid a { font-size: clamp(14px, 0.18vw + 13.5px, 15.6px); }
.about-text h2 { font-size: clamp(19px, 0.5vw + 17px, 23.5px); }
.e404 h1 { font-size: clamp(21px, 0.6vw + 17.5px, 26px); }

/* ---------- 单页全宽化：跟随 .wrap，与列表页同宽 ---------- */
@media (min-width: 1100px) {
  .detail.page { max-width: none; }
  .detail.page > .content { display: block; }
}

/* ---------- 移动端精修（随视口收窄自动调整） ---------- */
@media (max-width: 720px) {
  .wrap { --pad: 16px; }
  table.spec { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .content img { max-width: 100%; height: auto; }
  .lead { padding: 11px 13px; }
  .content a { overflow-wrap: anywhere; }
}
@media (max-width: 460px) {
  body { font-size: 14.5px; }
  .content { font-size: 15px; }
  .cls-hero, .biz-hero { padding-left: 16px; padding-right: 16px; }
}


/* ============================================================
   3.4 层（2026-09-15）—— 移动端汉堡菜单 + 美工精修
   ============================================================ */

/* ---------- 3.4 移动端汉堡菜单（checkbox hack，零 JS） ---------- */
.nav-toggle { position: absolute; opacity: 0; pointer-events: none; }
.nav-burger { display: none; }
@media (max-width: 1100px) {
  .site-header { position: relative; z-index: 90; }
  .nav-burger {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
    margin-left: auto; width: 44px; height: 44px; padding: 10px;
    border: 1px solid var(--line); border-radius: 10px; background: #fff; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .nav-burger i { display: block; height: 2px; border-radius: 2px; background: var(--ink); transition: transform .25s ease, opacity .2s ease; }
  .nav-toggle:checked ~ .nav-burger i:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle:checked ~ .nav-burger i:nth-child(2) { opacity: 0; }
  .nav-toggle:checked ~ .nav-burger i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .site-nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 95;
    flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 2px;
    margin: 0; padding: 12px 16px 16px;
    /* 41.30 铺满视口剩余高度（2026-09-20）：原 max-height 不够时面板下方会露出
       页面自身的浅色区块，看起来像「菜单背景与首页不一致」；改为一律撑到底，
       纯白面板全覆盖，任何页面 / 任何滚动位置都不再露底。 */
    height: calc(100vh - 66px); max-height: none; overflow-y: auto;
    background: #fff; border-bottom: 1px solid var(--line); box-shadow: 0 18px 40px rgba(22, 24, 29, .14);
    animation: navDrop .22s ease;
  }
  .nav-toggle:checked ~ .site-nav { display: flex; }
  @keyframes navDrop { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
  .site-nav > a, .site-nav .nav-item > a { display: flex; align-items: center; justify-content: space-between; margin: 0; padding: 12px 10px; border-radius: 10px; font-size: 15.5px; }
  .site-nav .nav-item { display: block; }
  /* 二级菜单在移动端静态展开，不再悬浮 */
  .site-nav .nav-drop {
    position: static; display: block; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: 0; background: transparent; padding: 2px 0 6px 14px; min-width: 0;
  }
  .site-nav .nav-drop a { padding: 10px 10px; border-radius: 8px; }
  .site-nav .caret { transition: transform .2s; }
  .nav-search, .cls-search, .biz-search { margin-top: 6px; text-align: center; }
}
@media (min-width: 1101px) {
  .nav-burger { display: none !important; }
}


/* ---------- 3.4 美工精修 ---------- */
html { scroll-behavior: smooth; }
img { max-width: 100%; }
.page-head h1, .detail h1, .hero h1, .cls-page-head h1, .cls-detail h1, .biz-page-head h1, .biz-detail h1 { text-wrap: balance; }
.card, .cls-card, .biz-card { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.news a:hover { color: var(--pri); }
.breadcrumb a:hover { color: var(--pri); }
.foot-nav a:hover { color: var(--pri); }
.breadcrumb a { transition: color .15s; }

/* ============================================================
   3.5 图片间距收紧层（2026-09-15）—— 正文图片块级化 + 含图段落边距收窄
   ============================================================ */
.content img { display: block; max-width: 100%; height: auto; margin: 10px auto; }
.content p:has(> img), .content p:has(> span > img) { margin-bottom: 6px; }
.content p:has(> img) + p, .content p:has(> span > img) + p { margin-top: 0; }

/* ============================================================
   3.6 视觉升级层（2026-09-15）—— 按专业网页设计师标准统一设计体系
   圆角/阴影节奏、按钮体系、焦点态、滚动条、微交互全面归一
   ============================================================ */

/* ---------- 全局微基础 ---------- */
::selection { background: rgba(212, 38, 51, .16); color: var(--ink); }
* { scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; border: 2px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: #9aa0a6; border: 2px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-track { background: transparent; }

/* ---------- 按钮体系：主按钮渐变 + 按压反馈，线性按钮填充式 hover ---------- */
.btn-pri {
  background: linear-gradient(180deg, #e03642, #d42633);
  box-shadow: 0 4px 14px rgba(212, 38, 51, .30), inset 0 1px 0 rgba(255, 255, 255, .18);
  border-radius: 10px;
}
.btn-pri:hover { background: linear-gradient(180deg, #e03642, #b01c28); }
.btn-pri:active { transform: translateY(0) scale(.98); box-shadow: 0 2px 8px rgba(212, 38, 51, .30); }
.btn-line {
  border: 1px solid #f4c6ca; border-radius: 10px; color: var(--pri);
  background: rgba(255, 255, 255, .75);
  transition: color .18s, background .18s, border-color .18s, transform .18s, box-shadow .18s;
}
.btn-line:hover { background: #fff; border-color: var(--pri); box-shadow: 0 6px 16px rgba(212, 38, 51, .12); }

/* ---------- 卡片：默认浅投影，hover 统一升起节奏 ---------- */
.card { border-radius: var(--radius); box-shadow: 0 2px 10px rgba(22, 24, 29, .05); border: 1px solid #e8edf4; }
.card:hover { box-shadow: var(--shadow); border-color: #dfe1e5; }

/* ---------- 新闻/翻页 hover 统一 ---------- */
.news li:hover { background: #f8fafd; }
.pager a { transition: color .15s, border-color .15s, background .15s; }
.pager a:hover { border-color: var(--pri); }

/* ---------- 表单控件统一（搜索框、留言表单等） ---------- */
input[type="text"], input[type="search"], input[type="email"], input[type="tel"], textarea, select {
  border-radius: 10px; border-color: #dbe2ec;
  transition: border-color .15s, box-shadow .15s;
}
input[type="text"]:hover, input[type="search"]:hover, input[type="email"]:hover, input[type="tel"]:hover, textarea:hover, select:hover { border-color: #c9ccd1; }
input[type="text"]:focus, input[type="search"]:focus, input[type="email"]:focus, input[type="tel"]:focus, textarea:focus, select:focus {
  outline: 0; border-color: var(--pri); box-shadow: 0 0 0 3px rgba(212, 38, 51, .14);
}

/* ---------- 列表页头横幅与详情微调 ---------- */
.page-head { box-shadow: 0 8px 26px rgba(212, 38, 51, .07); }
.lead { border-radius: 10px; }

/* ================= 3.7 栏目侧栏层（侧栏 + 卡片网格） ================= */
.cat-layout { display: grid; grid-template-columns: 248px minmax(0, 1fr); gap: 30px; align-items: start; margin-top: 4px; }
.cat-side { position: sticky; top: 24px; }
.cat-side-box { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 2px 10px rgba(22, 24, 29, .05); overflow: hidden; }
.cat-side-title { padding: 14px 18px 13px; font-size: 15.5px; font-weight: 700; color: var(--ink); background: linear-gradient(180deg, #f7f8fa, #fff); border-bottom: 1px solid var(--line); }
.cat-side ul { list-style: none; margin: 0; padding: 10px; }
.cat-side li + li { margin-top: 2px; }
.cat-side a { display: flex; align-items: center; gap: 9px; padding: 9px 12px; border-radius: 8px; color: var(--text); text-decoration: none; font-size: 14.5px; line-height: 1.5; transition: background .15s, color .15s; }
.cat-side a::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--line); flex: none; transition: background .15s; }
.cat-side a:hover { background: var(--soft); color: var(--pri); }
.cat-side a:hover::before { background: var(--pri); }
.cat-side a.on { background: var(--pri); color: #fff; font-weight: 600; }
.cat-side a.on::before { background: rgba(255, 255, 255, .85); }
@media (max-width: 960px) {
  .cat-layout { grid-template-columns: 1fr; gap: 18px; }
  .cat-side { position: static; }
  .cat-side-title { display: none; }
  .cat-side ul { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px; }
  .cat-side li + li { margin-top: 0; }
  .cat-side a { padding: 6px 14px; border-radius: 999px; border: 1px solid var(--line); font-size: 13.5px; }
  .cat-side a::before { display: none; }
  .cat-side a.on { border-color: var(--pri); background: var(--soft); color: var(--pri); }
}

/* ================= 3.8 首页营销层（hero双CTA / 优势 / 流程 / 新闻卡） ================= */
.hero-btns { margin: 24px 0 0; }
.hero-btns a { margin-right: 20px; }
.adv-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; list-style: none; margin: 0; padding: 0; }
.adv-grid li { background: #ffffff; border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 24px; transition: transform .22s ease, box-shadow .22s ease; }
.adv-grid li:hover { box-shadow: var(--shadow); }
.adv-no { display: inline-block; font-size: 26px; font-weight: 800; line-height: 1; color: var(--pri); opacity: .9; letter-spacing: 1px; }
.adv-grid h3 { margin: 12px 0 8px; font-size: 17px; color: var(--ink); }
.adv-grid p { margin: 0; font-size: 14px; line-height: 1.75; color: var(--muted); }
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; list-style: none; margin: 0; padding: 0; counter-reset: step; }
.steps li { position: relative; background: #ffffff; border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 22px; }
.step-no { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--pri); color: #fff; font-weight: 800; font-size: 16px; }
.steps h3 { margin: 14px 0 6px; font-size: 16.5px; color: var(--ink); }
.steps p { margin: 0; font-size: 13.8px; line-height: 1.7; color: var(--muted); }
.news-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; list-style: none; margin: 0; padding: 0; }
.news-cards li { background: #ffffff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: transform .22s ease, box-shadow .22s ease; }
.news-cards li:hover { box-shadow: var(--shadow); }
.news-cards a { display: flex; flex-direction: column; gap: 8px; height: 100%; padding: 22px 22px 20px; color: inherit; text-decoration: none; }
.news-cards time { font-size: 13px; font-weight: 700; color: var(--pri); letter-spacing: .5px; }
.news-cards h3 { margin: 0; font-size: 16.5px; line-height: 1.55; color: var(--ink); }
.news-cards p { margin: 0; font-size: 13.8px; line-height: 1.7; color: var(--muted); }
.news-cards .news-more { margin-top: auto; padding-top: 6px; font-size: 13px; font-weight: 600; color: var(--pri); }
.news-cards .news-media { margin: -22px -22px 12px; height: 150px; background: linear-gradient(135deg, #f1f2f4, #e4e6ea); }
.news-cards .news-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.news-cards .news-media .news-ph { display: flex; align-items: center; justify-content: center; height: 100%; color: #c9ccd1; }
.news-cards .news-media .news-ph svg { width: 34px; height: 34px; }
@media (max-width: 1100px) {
  .adv-grid { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .adv-grid { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .news-cards { grid-template-columns: 1fr; }
  .hero-btns a { width: 100%; margin: 0 0 10px; text-align: center; }
  .hero-btns { display: block; }
}

/* ================= 3.9 详情转化层（详情页底部咨询CTA） ================= */
.detail-cta { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 18px; margin: 34px 0 8px; padding: 28px 30px; background: linear-gradient(135deg, var(--blue-50) 0%, var(--blue-100) 100%); border: 1px solid var(--blue-200); box-shadow: 0 8px 24px rgba(212, 38, 51, .08); border-radius: var(--radius); }
.detail-cta-text h2, .detail-cta-text .detail-cta-t { margin: 0 0 6px; font-size: 20px; color: var(--ink); }
.detail-cta-text p { margin: 0; font-size: 14.5px; color: var(--muted); }
.detail-cta-btns { margin: 0; }
.detail-cta .btn-pri { display: inline-block; padding: 11px 26px; background: var(--pri); color: #fff; border-radius: 999px; font-weight: 700; text-decoration: none; margin-right: 10px; transition: transform .18s, box-shadow .18s; }
.detail-cta .btn-pri:hover { box-shadow: 0 10px 24px rgba(212, 38, 51, .22); }
.detail-cta .btn-ghost { display: inline-block; padding: 11px 26px; background: #fff; border: 1px solid var(--blue-300); color: var(--pri); border-radius: 999px; text-decoration: none; transition: transform .18s; }
.detail-cta .btn-ghost:hover { box-shadow: 0 6px 16px rgba(212, 38, 51, .12); }
@media (max-width: 720px) {
  .detail-cta { padding: 22px 20px; }
  .detail-cta .btn-pri, .detail-cta .btn-ghost { display: block; text-align: center; margin: 0 0 10px; }
}

/* ===== 3.10 导航层：吸顶 + 行动按钮 + 精修 ===== */
@media (min-width: 861px) {
  .site-header {
    position: sticky; top: 0; z-index: 100;
    box-shadow: 0 8px 30px rgba(22, 24, 29, .07);
    backdrop-filter: blur(8px) saturate(1.15);
    -webkit-backdrop-filter: blur(8px) saturate(1.15);
  }
  .site-nav .caret { transition: transform .2s ease; }
  .site-nav .nav-item:hover .caret { transform: rotate(180deg); }
}
.site-nav .nav-cta {
  display: inline-block; margin-left: 14px; padding: 9px 20px;
  border-radius: 999px; background: var(--pri); color: #fff;
  font-weight: 600; font-size: 14.5px; text-decoration: none; white-space: nowrap;
  box-shadow: 0 6px 16px rgba(212, 38, 51, .28);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.site-nav .nav-cta:hover { background: var(--pri-d); box-shadow: 0 10px 24px rgba(212, 38, 51, .34); color: #fff; }
.site-nav .nav-cta:active { transform: translateY(0); }
@media (max-width: 1100px) {
  .site-nav .nav-cta { display: block; text-align: center; margin: 10px 4px 2px; padding: 11px 18px; }
}

/* ===== 3.11 关于图文层 ===== */
.about-band { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 40px; align-items: center; }
.about-img { border-radius: var(--radius); overflow: hidden; box-shadow: 0 12px 32px rgba(212, 38, 51, .14); }
.about-img img { display: block; width: 100%; height: 100%; min-height: 240px; object-fit: cover; }
@media (max-width: 860px) {
  .about-band { grid-template-columns: 1fr; gap: 22px; }
  .about-img img { min-height: 0; aspect-ratio: 16/9; }
}

/* ===== 3.12 宽屏栏目层：横向筛选胶囊 ===== */
.cat-pills { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 28px; }
.cat-pills a {
  display: inline-block; padding: 8px 20px; border-radius: 999px;
  background: #fff; border: 1px solid var(--line); color: var(--text);
  font-size: 14.5px; text-decoration: none;
  transition: color .18s, border-color .18s, background .18s, transform .18s;
}
.cat-pills a:hover { color: var(--pri); border-color: var(--pri); box-shadow: 0 6px 16px rgba(22, 24, 29, .08); }
.cat-pills a.on { background: var(--pri); border-color: var(--pri); color: #fff; font-weight: 600; }
.cat-main { margin-top: 2px; }
@media (max-width: 720px) { .cat-pills { gap: 8px; } .cat-pills a { padding: 7px 15px; font-size: 13.5px; } }

/* ===== 3.13 导航精修层：下划线菜单 + 搜索图标 + 下拉卡片 ===== */
@media (min-width: 861px) {
  .site-nav > a, .site-nav .nav-item > a { position: relative; background: transparent; padding: 10px 14px; font-weight: 500; }
  .site-nav > a:hover, .site-nav > a.active,
  .site-nav .nav-item > a:hover, .site-nav .nav-item > a.active { background: transparent; color: var(--pri); }
  /* 功能钮（热线/搜索/CTA）排除下划线，只给栏目导航链接用 */
  .site-nav > a:not(.nav-hotline):not(.nav-search):not(.nav-cta)::after, .site-nav .nav-item > a::after {
    content: ''; position: absolute; left: 14px; right: 14px; bottom: 3px; height: 2px;
    border-radius: 2px; background: var(--pri); transform: scaleX(0); transform-origin: center;
    transition: transform .2s ease;
  }
  .site-nav > a:not(.nav-hotline):not(.nav-search):not(.nav-cta):hover::after,
  .site-nav > a:not(.nav-hotline):not(.nav-search):not(.nav-cta).active::after,
  .site-nav .nav-item:hover > a::after, .site-nav .nav-item > a.active::after { transform: scaleX(1); }
  .site-nav .nav-search {
    background: transparent !important; color: var(--text) !important;
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; padding: 0; margin-left: 6px; border-radius: 50%;
  }
  .site-nav .nav-search:hover, .site-nav .nav-search.active { background: #fdf1f2 !important; color: var(--pri) !important; }
  .nav-drop {
    border: 1px solid var(--line); border-radius: 12px; padding: 8px;
    box-shadow: 0 18px 44px rgba(22, 24, 29, .13);
    transform: translateY(6px); opacity: 0; visibility: hidden;
    transition: transform .18s ease, opacity .18s ease, visibility .18s;
  }
  .site-nav .nav-item:hover > .nav-drop, .site-nav .nav-item:focus-within > .nav-drop {
    display: block; transform: translateY(0); opacity: 1; visibility: visible;
  }
}

/* ---------- 站内搜索页 ---------- */
.search-box { display: flex; gap: 12px; max-width: 660px; margin: 4px 0 24px; }
.search-box input { flex: 1; min-width: 0; height: 46px; padding: 0 16px; border: 1.5px solid var(--line); border-radius: 12px; font-size: 15px; font-family: inherit; color: var(--ink); background: #fff; }
.search-box input:focus { outline: none; border-color: var(--pri); }
.search-box .btn-pri { height: 46px; padding: 0 26px; border-radius: 12px; }
.search-meta { color: var(--muted); font-size: 14px; margin: -8px 0 24px; }

/* ---------- 页脚备案行 ---------- */
.foot-legal { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; margin: 0; font-size: 13px; color: var(--muted); }
.foot-legal a { color: var(--muted); text-decoration: none; transition: color .15s; }
.foot-legal a:hover { color: var(--pri); }
.foot-police { display: inline-flex; align-items: center; gap: 5px; }
.foot-police img { flex: none; }

/* ============================================================
   企业版式层（E-Series）：栏目列表 / 详情 / 单页 / 404
   ============================================================ */
/* ---- 1. 页面头带 ---- */
.e-hero { position: relative; z-index: 1; overflow: hidden; padding: 42px 0; background: linear-gradient(180deg, #f1f2f4 0%, #fafbfc 100%); border-bottom: 1px solid var(--line); }
.e-hero::before, .e-hero::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; }
.e-hero::before { right: -140px; top: -160px; width: 380px; height: 380px; background: radial-gradient(circle, rgba(212, 38, 51, .16), transparent 65%); }
.e-hero::after { left: -110px; bottom: -180px; width: 340px; height: 340px; background: radial-gradient(circle, rgba(212, 38, 51, .08), transparent 60%); }
/* 企业版模板内层不再包 .wrap（外层 main 已是 wrap 容器），hero 上下留白由自身承担 */
.e-crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 18px; font-size: 12.5px; color: var(--muted); }
.e-crumb a { color: var(--muted); }
.e-crumb a:hover { color: var(--pri); }
.e-crumb .sep { color: #cbd5e1; }
.e-eyebrow { display: inline-flex; align-items: center; gap: 9px; margin: 0 0 10px; font-size: 12.5px; font-weight: 800; letter-spacing: 3px; color: var(--pri); }
.e-eyebrow::before { content: ""; width: 24px; height: 2px; border-radius: 2px; background: var(--pri); }
.e-hero h1 { margin: 0 0 12px; font-size: clamp(26px, 3.2vw, 38px); line-height: 1.25; letter-spacing: .5px; color: var(--ink); }
.e-desc { margin: 0; max-width: 780px; color: var(--muted); font-size: 15px; line-height: 1.85; }
.e-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 24px; margin: 18px 0 0; font-size: 13.5px; color: var(--muted); }
.e-meta b { color: var(--text); font-weight: 600; }
.e-num { font-size: 22px; font-weight: 800; color: var(--pri); }
/* ---- 2. 列表页 ---- */
.e-body { padding: 30px 0 10px; }
.e-narrow { max-width: 100%; margin-left: auto; margin-right: auto; }
.e-feature { display: grid; grid-template-columns: 1.12fr 1fr; background: #fff; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; margin: 0 0 24px; transition: box-shadow .22s ease, transform .22s ease; }
.e-feature:hover { box-shadow: var(--shadow-lg); }
.e-feature-media { position: relative; min-height: 300px; background: linear-gradient(135deg, #f0f1f3, #f7f8fa); }
.e-feature-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.e-feature-body { display: flex; flex-direction: column; justify-content: center; gap: 14px; padding: 36px 38px; }
.e-feature-body h2 { margin: 0; font-size: clamp(19px, 1.9vw, 24px); line-height: 1.5; color: var(--ink); }
.e-feature-body h2 a { color: inherit; }
.e-feature-body p { margin: 0; color: var(--muted); font-size: 14.5px; line-height: 1.9; }
.e-flag { position: absolute; left: 16px; top: 16px; z-index: 2; padding: 4px 13px; border-radius: 999px; background: rgba(212, 38, 51, .94); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: 2px; box-shadow: 0 4px 12px rgba(212, 38, 51, .35); }
.list-page .card-media { position: relative; }
.e-date { position: absolute; left: 14px; top: 14px; z-index: 2; padding: 4px 11px; border-radius: 9px; background: rgba(255, 255, 255, .95); color: var(--pri); font-size: 12px; font-weight: 700; letter-spacing: .5px; box-shadow: 0 2px 10px rgba(22, 24, 29, .12); }
.e-meta2 { display: flex; gap: 14px; margin-top: auto; padding-top: 12px; border-top: 1px dashed var(--line); color: var(--muted); font-size: 12.5px; }
@media (min-width: 1100px) { .list-page .grid { grid-template-columns: repeat(3, 1fr); } .list-page .card-media { height: 190px; } }
.list-page .pager { justify-content: center; }
/* ---- 3. 详情页 ---- */
.e-meta-bar { display: flex; flex-wrap: wrap; gap: 8px 26px; padding: 14px 20px; margin: 20px 0 26px; background: var(--soft); border-radius: 12px; font-size: 13.5px; color: var(--muted); }
.e-meta-bar b { color: var(--text); font-weight: 600; }
.e-content-card { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 34px 38px 30px; }
.e-content-card .content { font-size: 15.5px; line-height: 2.05; }
.e-content-card .content img { border-radius: 12px; }
.e-content-card .content ul, .e-content-card .content ol { padding-left: 24px; margin: 0 0 16px; }
.e-content-card .content li { margin: 0 0 6px; }
.e-postnav { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 30px 0 0; }
.e-postnav a { display: flex; flex-direction: column; gap: 7px; padding: 18px 22px; background: #fff; border: 1px solid var(--line); border-radius: 14px; min-width: 0; transition: border-color .18s, box-shadow .18s, transform .18s; }
.e-postnav a:hover { border-color: var(--pri); box-shadow: var(--shadow); }
.e-postnav .dir { font-size: 12.5px; color: var(--muted); letter-spacing: 1px; }
.e-postnav .t { font-size: 14.5px; font-weight: 600; color: var(--ink); line-height: 1.6; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.e-postnav .next { text-align: right; }
.e-rel { margin: 46px 0 0; }
.e-rel-h { display: flex; align-items: center; gap: 11px; margin: 0 0 18px; font-size: 20px; color: var(--ink); letter-spacing: .5px; }
.e-rel-h::before { content: ""; width: 4px; height: 22px; border-radius: 2px; background: var(--pri); }
.e-rel-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.e-rel-card { display: flex; flex-direction: column; gap: 8px; padding: 20px 22px; background: #fff; border: 1px solid var(--line); border-radius: 14px; transition: border-color .18s, box-shadow .18s, transform .18s; }
.e-rel-card:hover { border-color: var(--pri); box-shadow: var(--shadow); }
.e-rel-card .t { font-size: 14.5px; font-weight: 600; color: var(--ink); line-height: 1.65; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.e-rel-card time { font-size: 12.5px; color: var(--muted); }
@media (max-width: 860px) { .e-rel-grid { grid-template-columns: 1fr; } .e-postnav { grid-template-columns: 1fr; } .e-postnav .next { text-align: left; } }
/* ---- 4. 单页 ---- */
.e-page-card { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 36px 40px; margin: 30px 0 0; }
/* ---- 5. 404 ---- */
.e-404 { text-align: center; padding: 76px 0 84px; }
.e-404-num { font-size: clamp(72px, 10vw, 120px); font-weight: 800; line-height: 1; letter-spacing: 4px; background: linear-gradient(135deg, #d42633, #8f141d); -webkit-background-clip: text; background-clip: text; color: transparent; }
.e-404-t { margin: 18px 0 8px; font-size: 22px; color: var(--ink); }
.e-404 p { margin: 0; color: var(--muted); }
.e-404-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 30px; }
/* ---- 6. 响应式收口 ---- */
@media (max-width: 860px) { .e-feature { grid-template-columns: 1fr; } .e-feature-media { min-height: 210px; } .e-feature-body { padding: 24px 22px; } }
@media (max-width: 720px) { .e-page-card { padding: 26px 20px; } .e-hero { padding-top: 32px; padding-bottom: 32px; } .e-hero h1 { font-size: 24px; } }

/* ===== 宽屏自适应：1920px 以上放宽容器，保持满屏观感 ===== */
@media (min-width: 1920px) {
  .wrap { max-width: 1840px; --pad: 48px; }
}

/* ===== 首页/搜索页区块英文眉标 ===== */
.bk-eyebrow { margin: 0 0 8px; font-size: 12.5px; font-weight: 800; letter-spacing: 3px; color: var(--pri); }

/* ===== 插件模板接入：blocks 运营块位 + tags 标签云 ===== */
.home-block { margin: 26px 0 0; }
.home-block .seo-block-text { font-size: 14.5px; line-height: 1.9; color: var(--text); }
.home-block .seo-block-html { font-size: 14.5px; line-height: 1.9; color: var(--text); }
.cat-side-tags .seo-tag-cloud { padding: 14px 18px 16px; display: flex; flex-wrap: wrap; gap: 8px 10px; line-height: 1.8; }
.cat-side-tags .seo-tag-cloud a { color: var(--muted); text-decoration: none; border: 1px solid var(--line); border-radius: 999px; padding: 2px 11px; background: #fff; transition: color .15s, border-color .15s; }
.cat-side-tags .seo-tag-cloud a:hover { color: var(--pri); border-color: var(--pri); }

/* ============================================================
   4.0 转化与体验升级层（2026-09-16）—— 首屏信任条 / 卡片图标兜底 / 页脚联系列 / 搜索高亮
   ============================================================ */

/* ---------- 首屏信任条：无数字、中性文案，任何客户站可用 ---------- */
.hero-facts {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
  list-style: none; margin: 26px 0 0; padding: 0;
}
.hero-facts li {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 20px; background: #fff; border: 1px solid #d9dcdf;
  border-radius: 12px; box-shadow: 0 4px 14px rgba(212, 38, 51, .07);
}
.hero-facts b { font-size: 14.5px; color: var(--pri); letter-spacing: .5px; }
.hero-facts span { font-size: 13px; color: var(--text); }
@media (max-width: 720px) {
  .hero-facts { gap: 8px; margin-top: 20px; }
  .hero-facts li { padding: 8px 14px; }
  .hero-facts b { font-size: 16px; font-weight: 800; white-space: nowrap; line-height: 1.2; }
  .hero-facts span { font-size: 12px; }
}
@media (max-width: 460px) {
  .hero-facts li { flex: 1 1 calc(50% - 8px); justify-content: center; flex-direction: column; gap: 2px; text-align: center; }
}

/* ---------- 卡片图标兜底：无缩略图时不空白 ---------- */
.card-ph {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; color: #c9ccd1;
  background: linear-gradient(135deg, #f1f2f4, #e4e6ea);
}
.card-ph svg { width: 40px; height: 40px; }
@media (max-width: 720px) { .card-ph svg { width: 34px; height: 34px; } }

/* ---------- 页脚：联系列 + 导航标题 ---------- */
.foot-nav .foot-title { margin: 0 0 10px; font-size: 15px; font-weight: 700; color: var(--ink); letter-spacing: .5px; text-decoration: none; transition: color .15s; }
.foot-nav .foot-title:hover { color: var(--pri); }
.foot-nav { flex-direction: column; align-items: flex-start; }
.foot-nav a { margin: 0 0 7px; }
.foot-contact { list-style: none; margin: 14px 0 0; padding: 0; }
.foot-contact li { display: flex; align-items: baseline; gap: 8px; margin: 7px 0; font-size: 13.5px; line-height: 1.6; }
.foot-contact .fc-label {
  flex: none; min-width: 34px; padding: 1px 8px; border-radius: 6px;
  background: rgba(212, 38, 51, .10); color: var(--pri); font-size: 12px; font-weight: 600;
  text-align: center;
}
.foot-contact a { color: var(--text); text-decoration: none; transition: color .15s; }
.foot-contact a:hover { color: var(--pri); }
@media (max-width: 860px) { .foot-contact { margin-top: 10px; } }

/* ---------- 搜索关键词高亮 ---------- */
mark {
  background: rgba(212, 38, 51, .14); color: var(--ink);
  border-radius: 3px; padding: 0 2px;
}

/* ============================================================
   5.0 营销转化层（2026-09-16）—— 漏斗结构 / 痛点 / 成果带 / 联系卡 / FAQ / CTA 强化
   ============================================================ */

/* ---------- 营销顶部信息条（高端浅色，克制不压） ---------- */
.topbar { background: #f6f7f9; border-bottom: 1px solid #eceef1; color: #6b7076; font-size: 12.5px; }
.topbar-in { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 34px; }
.topbar-contacts { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; }
.topbar-contacts a, .topbar-contacts span { display: inline-flex; align-items: center; gap: 6px; color: #6b7076; text-decoration: none; line-height: 1.4; transition: color .15s; }
.topbar-contacts a:hover { color: #b01c28; }
.topbar-contacts svg { opacity: .6; flex: none; }
.topbar-addr { color: #9aa0a6; }
.topbar-slogan { margin: 0; color: #9aa0a6; letter-spacing: 1px; }
@media (max-width: 860px) {
  .topbar-slogan { display: none; }
  .topbar-in { justify-content: center; }
  .topbar-addr { display: none; }
}

/* ---------- 首屏强化：网格底纹 + 光斑 ---------- */
.hero {
  background:
    radial-gradient(60% 130% at 50% -12%, rgba(212, 38, 51, .12), transparent 60%),
    radial-gradient(38% 60% at 88% 12%, rgba(212, 38, 51, .07), transparent 65%),
    radial-gradient(30% 50% at 8% 82%, rgba(224, 54, 66, .08), transparent 60%),
    linear-gradient(rgba(212, 38, 51, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(212, 38, 51, .035) 1px, transparent 1px),
    linear-gradient(180deg, #f5f6f8 0%, #eef0f2 100%);
  background-size: auto, auto, auto, 46px 46px, 46px 46px, auto;
}
.hero-facts li { box-shadow: 0 6px 18px rgba(212, 38, 51, .10); }
.hero-facts b { font-size: 15px; }
.hero-btns .btn-pri, .hero-btns .btn-ghost { display: inline-block; padding: 13px 34px; border-radius: 999px; font-size: 15.5px; }
.hero-btns .btn-ghost { background: rgba(255, 255, 255, .7); }

/* ---------- 痛点共鸣区 ---------- */
.pain-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; list-style: none; margin: 0; padding: 0; }
.pain-grid li { position: relative; background: #fff; border: 1px solid var(--line); border-top: 3px solid #ebaab0; border-radius: var(--radius); padding: 26px 22px 22px; transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
.pain-grid li:hover { box-shadow: var(--shadow); border-top-color: var(--pri); }
.pain-no { display: block; font-size: 26px; font-weight: 800; line-height: 1; color: #f4c6ca; letter-spacing: 1px; }
.pain-grid h3 { margin: 12px 0 8px; font-size: 16.5px; line-height: 1.5; color: var(--ink); }
.pain-grid p { margin: 0 0 12px; font-size: 13.8px; line-height: 1.8; color: var(--muted); }
.pain-grid a { font-size: 13.5px; font-weight: 600; color: var(--pri); }
.pain-grid a:hover { color: var(--pri-d); }

/* ---------- 数据成果带（blocks code=home_stats，数字条约定：<b>/<strong> 为大数字）· 统一浅色 ---------- */
.stats-band { margin: 34px 0 0; background: linear-gradient(135deg, #f5f6f8, #ecedf0); border: 1px solid #f6dcdf; border-radius: 20px; overflow: hidden; }
.stats-in { display: flex; flex-wrap: wrap; justify-content: space-around; gap: 22px 30px; padding: 34px 24px; }
.stats-in > * { text-align: center; }
.stats-in b, .stats-in strong { display: block; font-size: clamp(26px, 3vw, 36px); font-weight: 800; line-height: 1.25; color: #b01c28; letter-spacing: .5px; }
.stats-in b, .stats-in strong { font-family: "Segoe UI", "Microsoft YaHei", sans-serif; }
.stats-in p, .stats-in span, .stats-in div > span:last-child { color: #4d5259; font-size: 14px; line-height: 1.6; }

/* ---------- 服务信息卡（custom_fields 插件字段网格） ---------- */
.svc-info { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin: 6px 0 26px; padding: 0; }
.svc-info-item { background: #f7f8fa; border: 1px solid #f8e2e4; border-radius: 12px; padding: 14px 16px; }
.svc-info dt { font-size: 12.5px; color: var(--muted); margin-bottom: 4px; }
.svc-info dd { margin: 0; font-size: 15px; font-weight: 600; color: var(--ink); line-height: 1.6; }
@media (max-width: 720px) { .svc-info { grid-template-columns: 1fr 1fr; } }

/* ---------- 列表/单页头带 CTA ---------- */
.e-hero-cta { margin: 20px 0 0; }
.e-hero-cta .btn-pri, .e-hero-cta .btn-ghost { display: inline-block; padding: 10px 24px; border-radius: 999px; margin-right: 10px; font-size: 14px; }
@media (max-width: 720px) {
  .e-hero-cta .btn-pri, .e-hero-cta .btn-ghost { display: block; text-align: center; margin: 0 0 10px; }
}

/* ---------- 页头带左右留白：避免文字贴边 ---------- */
.e-hero { padding-left: 26px; padding-right: 26px; }
@media (max-width: 720px) { .e-hero { padding-left: 16px; padding-right: 16px; } }

/* ---------- 全站统一面包屑（hero 下方）· 高端浅色 ---------- */
.breadcrumb {
  display: flex; flex-wrap: wrap; align-items: center;
  margin: 0 0 28px;
  padding: 11px 26px;
  font-size: 12.5px;
  letter-spacing: .2px;
  color: #6b7076;
  background: #f6f7f9;
  border: 1px solid #eceef1;
  border-radius: 10px;
  box-sizing: border-box;
}
.breadcrumb a { color: #6b7076; text-decoration: none; transition: color .15s; }
.breadcrumb a:hover { color: #b01c28; }
.breadcrumb .sep { margin: 0 10px; color: #cbd5e1; font-size: 11px; }
.breadcrumb [aria-current] { color: #16181d; font-weight: 600; }
@media (max-width: 720px) {
  .breadcrumb { margin: 0 0 20px; padding: 10px 16px; font-size: 12px; }
}

/* ---------- 详情转化 CTA 强化 ---------- */
.detail-cta-wx { margin: 12px 0 0; font-size: 13.5px; color: var(--muted); }
.detail-cta-wx b { color: var(--ink); font-weight: 600; }

/* ---------- 栏目侧栏联系卡 ---------- */
.cat-side-contact .side-contact-list { padding: 14px; }
.side-contact-list li { display: flex; align-items: baseline; gap: 8px; padding: 6px 4px; font-size: 13.5px; line-height: 1.6; }
.side-contact-list .sc-label { flex: none; min-width: 34px; text-align: center; padding: 1px 8px; border-radius: 6px; background: rgba(212, 38, 51, .10); color: var(--pri); font-size: 12px; font-weight: 600; }
.side-contact-list a { color: var(--text); }
.side-contact-list a:hover { color: var(--pri); }
.side-contact-btns { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 14px 16px; }
.btn-sm { padding: 7px 16px; font-size: 13px; border-radius: 999px; }
@media (max-width: 960px) {
  .cat-side-contact { margin-top: 12px; }
}

/* ---------- 联系页大卡（仅限 page/index.html 的 .contact-cards 区块）
   注意：必须带 .contact-cards 前缀。原先裸写 .contact-card 的 display:flex
   会外溢到「联系我们」页（.contact-layout 里的白卡），把卡内 h3 与列表挤成并排两栏，
   症状是卡片里的文字竖着排一行一个字。 ---------- */
.contact-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin: 6px 0 20px; }
.contact-cards .contact-card { display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; box-shadow: 0 2px 10px rgba(22, 24, 29, .05); }
.contact-cards .cc-icon { flex: none; width: 46px; height: 46px; border-radius: 12px; background: rgba(212, 38, 51, .10); color: var(--pri); display: flex; align-items: center; justify-content: center; }
.contact-cards .contact-card b { display: block; font-size: 15px; color: var(--ink); margin-bottom: 3px; }
.contact-cards .contact-card p { margin: 0; font-size: 14px; color: var(--muted); }
.contact-cards .contact-card a { color: var(--pri); font-weight: 600; }
.contact-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 30px; }
.contact-actions .btn-pri, .contact-actions .btn-ghost { display: inline-block; padding: 11px 26px; border-radius: 999px; font-size: 14.5px; }

/* ---------- FAQ（details/summary 展开，零 JS；也兼容 blocks 写入的 .faq-panel 内容） ---------- */
.faq-panel { max-width: none; margin: 0; } /* 2026-09-19：常见问题面板左右与其它区块对齐，不再 860px 居中收窄 */
.faq-panel details { background: #fff; border: 1px solid var(--line); border-radius: 14px; margin: 0 0 12px; overflow: hidden; transition: box-shadow .18s ease, border-color .18s ease; }
.faq-panel details[open] { box-shadow: var(--shadow); border-color: #d6d9dd; }
.faq-panel summary { cursor: pointer; list-style: none; padding: 18px 48px 18px 22px; font-size: 15.5px; font-weight: 600; color: var(--ink); position: relative; line-height: 1.6; }
.faq-panel summary::-webkit-details-marker { display: none; }
.faq-panel summary::after { content: '+'; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); font-size: 20px; font-weight: 400; color: var(--pri); transition: transform .18s ease; }
.faq-panel details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq-panel details p { margin: 0; padding: 0 22px 18px; font-size: 14.5px; color: var(--muted); line-height: 1.85; }

/* ---------- 区块底部「更多」 ---------- */
.block-more { text-align: center; margin: 26px 0 0; }
.block-more .btn-pri, .block-more .btn-line { display: inline-block; padding: 11px 30px; border-radius: 999px; font-size: 14.5px; }

/* ---------- 转化 CTA 横幅（统一浅色系：浅蓝底 + 深蓝主按钮） ---------- */
.cta-band { background: linear-gradient(135deg, #f1f2f4 0%, #e4e6ea 100%); color: var(--ink); position: relative; overflow: hidden; border: 1px solid #f8e2e4; box-shadow: 0 10px 28px rgba(212, 38, 51, .10); }
.cta-band::before { content: ""; position: absolute; right: -120px; top: -140px; width: 340px; height: 340px; border-radius: 50%; background: radial-gradient(circle, rgba(212, 38, 51, .08), transparent 65%); pointer-events: none; }
.cta-band::after { content: ""; position: absolute; left: -80px; bottom: -160px; width: 300px; height: 300px; border-radius: 50%; background: radial-gradient(circle, rgba(147, 197, 253, .22), transparent 60%); pointer-events: none; }
.cta-inner { position: relative; z-index: 1; }
.cta-text h2 { color: #16181d; }
.cta-text p { color: #4d5259; }
.cta-btns .btn-pri { background: #d42633; color: #fff; box-shadow: 0 8px 20px rgba(212, 38, 51, .28); }
.cta-btns .btn-pri:hover { background: #b01c28; box-shadow: 0 12px 26px rgba(212, 38, 51, .32); }
.cta-btns .btn-ghost { border-color: #ebaab0; color: #b01c28; }
.cta-btns .btn-ghost:hover { background: rgba(212, 38, 51, .06); border-color: #d42633; color: #b01c28; }
.btn-line-inv { display: inline-block; padding: 11px 26px; border: 1px solid #ebaab0; color: #b01c28; border-radius: 999px; text-decoration: none; font-size: 14.5px; transition: background .18s, transform .18s; }
.btn-line-inv:hover { background: rgba(212, 38, 51, .06); color: #b01c28; }

/* ---------- 搜索空结果转化入口 ---------- */
.search-fallback { margin: 6px 0 26px; padding: 24px 22px; background: #f7f8fa; border: 1px dashed #d6d9dd; border-radius: 14px; text-align: center; }
.search-fallback-t { margin: 0 0 14px; font-size: 14.5px; color: var(--muted); }
.search-fallback-links { margin: 0; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }

/* ---------- 404 搜索框 ---------- */
.e404-search { margin: 18px auto 8px; }
.e404-search input { text-align: center; }

/* ---------- 5.0 响应式 ---------- */
@media (max-width: 1100px) { .pain-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) {
  .pain-grid { grid-template-columns: 1fr; gap: 14px; }
  .stats-in { padding: 26px 18px; }
  .stats-in > * { flex: 1 1 calc(50% - 30px); }
  .contact-card { padding: 16px 18px; }
}

/* ---------- 尊重减弱动效偏好（系统辅助功能） ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .card:hover, .card-media img, .btn-pri, .btn-line { transform: none !important; }
}

/* ============================================================
   5.1 宽屏营销层（2026-09-16）—— 全站宽屏化 + 营销视觉统一
   ============================================================ */

/* ---------- 宽屏：列宽放宽，区块更大气 ---------- */
@media (min-width: 1100px) {
  .hero-sub { max-width: 800px; }
  .e-desc { max-width: 940px; }
  .search-box { max-width: 880px; }
  .e-content-card { padding: 44px 52px 40px; }
  .e-page-card { padding: 44px 52px; }
  .e-404 { padding: 90px 0 100px; }
}

/* ---------- 宽屏：列表网格 4 列 ---------- */
@media (min-width: 1500px) {
  .list-page .grid { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- 宽屏：FAQ 两列（含 blocks 版） ---------- */
@media (min-width: 960px) {
  .faq-panel { max-width: none; display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; align-items: start; }
  .faq-panel .seo-block { display: contents; }
}
@media (max-width: 959px) {
  .faq-panel { max-width: none; margin: 0; } /* 2026-09-19：常见问题面板左右与其它区块对齐，不再 860px 居中收窄 */
}
.faq-panel details { margin-bottom: 12px; }

/* ---------- 详情页：上下篇/相关阅读宽屏间距 ---------- */
@media (min-width: 1400px) {
  .e-postnav { gap: 22px; }
  .e-rel-grid { gap: 22px; }
}

/* ============================================================
   5.2 全站营销细节层（2026-09-16）—— 卡片整齐 + 正文阅读宽度 + 宽屏呼吸
   ============================================================ */

/* ---------- 1. 卡片标题/摘要两行截断，列表整齐等高 ---------- */
.card h3, .news-cards h3 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card p, .news-cards p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.e-rel-card .t { -webkit-line-clamp: 2; }

/* ---------- 2. 详情/单页正文宽屏阅读宽度（排版专业留白） ---------- */
@media (min-width: 1280px) {
  .e-content-card .content:not(:has(> .toc-box)), .e-page-card .content:not(:has(> .toc-box)) { max-width: 980px; margin-left: auto; margin-right: auto; }
  .e-content-card .content:has(> .toc-box), .e-page-card .content:has(> .toc-box) { max-width: 1320px; margin-left: auto; margin-right: auto; }
  .e-content-card .content img, .e-page-card .content img { border-radius: 14px; }
}

/* ---------- 3. 宽屏区块间距放大（呼吸感） ---------- */
@media (min-width: 1100px) {
  .block { padding: 78px 0 20px; }
  .block-head { margin-bottom: 46px; }
  .cta-band { margin: 66px 0 0; padding: 56px 0; }
  .detail-cta { padding: 32px 36px; }
  .hero-facts { gap: 18px; }
}

/* ---------- 4. 首页新闻宽屏 4 列 ---------- */
@media (min-width: 1500px) {
  .news-cards { grid-template-columns: repeat(4, 1fr); gap: 24px; }
}

/* ============================================================
   5.3 首屏全宽 + 单页营销化（2026-09-16）
   ============================================================ */

/* ---------- 1. 首屏全宽：突破 wrap 铺满视口，内容仍对齐容器 ----------
   三处修正（2026-09-19）：
   ① 去掉 @media (min-width: 861px) 门槛。移动端原先完全不出血，实测 480/375 下
      .e-hero 都是 left=16 w=448（左右各留 16px 白边），观感与大屏不一致。
   ② 把 .pd-hero 并入选择器。三类详情页 hero 里只有它不是全宽（桌面端固定 1368px，
      左右各留 36px）。它此前靠「自身 max-width 居中」假装与 .e-hero 对齐，其实没铺满。
   ③ 移除公式里多加的 var(--pad)。这是本次的关键修正，说明如下。

   为什么出血量恰好等于 50vw - 50%：
   .wrap 是「max-width + margin:0 auto + padding:0 var(--pad)」的居中容器。
   设视口宽 vw、.wrap 内容盒宽 W，则内容盒左缘到视口左缘的距离 = (vw - W) / 2，
   而 50vw - 50% 展开正是 vw/2 - W/2，两者恒等（任意断点、任意 max-width 都成立）。
   所以：负 margin 取 -(50vw - 50%) 时，hero 左缘正好落在视口 x=0，宽度正好等于 vw；
   水平 padding 取同一个值，内文正好被推回 .wrap 的内容边缘。负 margin 与水平 padding
   必须是这对等值量，内容才既铺满视口、又与主体左右对齐。

   历史 bug：公式原先写成 50vw - 50% + var(--pad)，比正确值多出整整一个 --pad，
   于是 hero 在两侧各多出血 --pad（1440 视口下 hero 宽 1512、左右各被裁掉 36px）。
   两个可见后果：
   - 首页 .hero 带 border-radius: 0 0 28px 28px，圆角被推到视口外、整条下边缘看起来是直角；
   - 必须靠 html/body 的 overflow 兜底才不出现整页横向滚动条（见下方兜底规则）。
   注意：任何后写的 .pd-hero / .e-hero 规则都不得用 `padding: Xpx 0` 这类简写重置水平 padding，
   否则负 margin 失去抵消，内容会被推出视口左缘（.pd-hero 那处已改为只写 padding-top）。 */
.hero, .e-hero, .pd-hero {
  margin-left: calc(-1 * (50vw - 50%));
  margin-right: calc(-1 * (50vw - 50%));
  padding-left: calc(50vw - 50%);
  padding-right: calc(50vw - 50%);
}

/* 2026-09-19 宽度自适应修正：桌面经典滚动条下 100vw 含滚动条宽度、而 50% 不含，
   上面的 vw 公式会让全出血 hero 两侧各多出「半个滚动条」宽度（实测 1440 下右溢 5px，
   全站每个带 hero 的页面都出现横向溢出）。改用容器查询单位 cqi：把 body 声明为
   inline-size 容器后，1cqi = body 内容盒宽度的 1%，恒等于「不含滚动条的可视宽度」，
   任意断点都精确铺满视口且零横向溢出。vw 公式保留为旧内核兜底（cqi 需要
   Chrome105+/Safari16+/FF110+，站点已用 :has()，目标内核一致）。
   inline-size containment 不建立定位包含块，fixed 常驻询价条 / sticky 导航与侧栏不受影响。 */
@supports (container-type: inline-size) {
  body { container-type: inline-size; }
  .hero, .e-hero, .pd-hero {
    margin-left: calc(-1 * (50cqi - 50%));
    margin-right: calc(-1 * (50cqi - 50%));
    padding-left: calc(50cqi - 50%);
    padding-right: calc(50cqi - 50%);
  }
}

/* 兜底规则已移除（2026-09-19）。
   它们原本是为「公式多算一个 --pad、hero 比视口宽出 2×--pad」而加的：
   - html { overflow-x: hidden }（传播到视口，禁横向滚动，但 scrollWidth 仍计入溢出）
   - body { overflow-x: clip }（真正把溢出裁掉，让体检指标全绿）
   出血量修正后不再有任何元素越过视口，这两条就失去了理由，且留着有害：
   overflow 会把真正超宽的内容（宽表格、长英文串、超宽图片）直接裁掉且无法滚动查看，
   同时让「横向溢出」这项体检永久失真（永远测不出问题）。
   现已删除，横向溢出重新由 41 URL × 4 宽度的几何回归真实把关。 */

/* ---------- 2. 单页/列表/详情 e-hero 背景统一为营销网格光斑（与首页同族） ---------- */
.e-hero {
  background:
    radial-gradient(46% 120% at 10% -20%, rgba(212, 38, 51, .08), transparent 60%),
    radial-gradient(28% 90% at 97% 0%, rgba(212, 38, 51, .05), transparent 60%),
    linear-gradient(rgba(212, 38, 51, .03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(212, 38, 51, .03) 1px, transparent 1px),
    linear-gradient(180deg, #f1f2f4 0%, #fafbfc 100%);
  background-size: auto, auto, 44px 44px, 44px 44px, auto;
}

/* ---------- 3. 单页 hero 信任条（e-hero-facts：数字/标签徽章） ---------- */
.e-hero-facts { display: flex; flex-wrap: wrap; gap: 10px 16px; list-style: none; margin: 24px 0 0; padding: 0; }
.e-hero-facts li { display: flex; align-items: baseline; gap: 8px; background: rgba(255, 255, 255, .92); border: 1px solid #f8e2e4; padding: 9px 18px; border-radius: 999px; box-shadow: 0 4px 14px rgba(212, 38, 51, .07); }
.e-hero-facts b { font-size: 15px; font-weight: 700; color: var(--pri); }
.e-hero-facts span { font-size: 13.5px; color: var(--text); }
@media (max-width: 720px) {
  /* 移动端改「数字上 · 说明下」居中统计卡（2026-09-20）：
     原横排胶囊在 50% 宽卡里数字与说明互挤换行（b 被压成多行），非常难看。 */
  .e-hero-facts { gap: 10px; margin-top: 18px; }
  .e-hero-facts li {
    flex: 1 1 calc(50% - 5px);
    flex-direction: column; align-items: center; justify-content: center;
    gap: 5px; padding: 15px 10px 13px;
    border-radius: 14px; text-align: center;
  }
  .e-hero-facts b {
    font-size: 21px; font-weight: 800; line-height: 1.2;
    letter-spacing: .3px; white-space: nowrap;
    font-variant-numeric: tabular-nums;
  }
  .e-hero-facts span { font-size: 12px; line-height: 1.5; }
}

/* ---------- 4. 单页正文营销排版（标题/引用/表格/列表精致化） ---------- */
.e-page-card .content h2 {
  margin: 38px 0 14px; padding-left: 14px; border-left: 4px solid var(--pri);
  font-size: clamp(19px, 1.2vw, 23px); color: var(--ink); letter-spacing: .5px;
}
.e-page-card .content h3 { margin: 28px 0 10px; font-size: clamp(16.5px, 0.9vw, 19px); color: var(--ink); }
.e-page-card .content p { margin: 0 0 16px; color: #3d4147; }
.e-page-card .content ul, .e-page-card .content ol { padding-left: 22px; margin: 0 0 18px; color: #3d4147; }
.e-page-card .content li { margin: 0 0 8px; line-height: 1.9; }
.e-page-card .content blockquote {
  margin: 22px 0; padding: 16px 20px; background: #f7f8fa;
  border-left: 4px solid #ebaab0; border-radius: 0 12px 12px 0; color: #4d5259;
}
.e-page-card .content table { width: 100%; border-collapse: collapse; margin: 18px 0; font-size: 14.5px; }
.e-page-card .content th { background: #f5f6f8; color: var(--ink); font-weight: 600; }
.e-page-card .content th, .e-page-card .content td { border: 1px solid var(--line); padding: 10px 14px; text-align: left; }
.e-page-card .content tr:nth-child(even) td { background: #fafbfd; }
.e-page-card .content img { border-radius: 14px; }

/* ---------- 5. 服务信息卡升级（svc-info） ---------- */
.svc-info { gap: 16px; margin: 8px 0 30px; }
.svc-info-item {
  background: linear-gradient(135deg, var(--blue-50), var(--blue-100)); border: 1px solid #f6dcdf;
  border-radius: 14px; padding: 18px 20px; position: relative; overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.svc-info-item:hover { box-shadow: 0 8px 20px rgba(212, 38, 51, .08); border-color: #d6d9dd; }
.svc-info-item::before { content: ""; position: absolute; right: -24px; top: -24px; width: 66px; height: 66px; border-radius: 50%; background: rgba(212, 38, 51, .05); }
.svc-info dt { font-size: 12.5px; color: #6b7076; margin-bottom: 6px; letter-spacing: 1px; }
.svc-info dd { margin: 0; font-size: 16px; font-weight: 600; color: var(--ink); line-height: 1.6; }

/* ---------- 6. 单页底部信任条（trust-band：为什么选择我们） ---------- */
.trust-band { margin: 34px 0 8px; padding: 28px 30px; background: #fff; border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 4px 16px rgba(22, 24, 29, .04); }
.trust-t { margin: 0 0 18px; font-size: 16px; font-weight: 700; color: var(--ink); letter-spacing: .5px; }
.trust-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; list-style: none; margin: 0; padding: 0; }
.trust-grid li { position: relative; padding: 14px 16px 14px 44px; background: #f6f7f9; border: 1px solid #eceef1; border-radius: 12px; }
.trust-grid li::before { content: ""; position: absolute; left: 16px; top: 18px; width: 10px; height: 10px; border-radius: 50%; background: linear-gradient(135deg, #e03642, #b01c28); }
.trust-grid b { display: block; font-size: 14.5px; color: var(--ink); margin-bottom: 3px; }
.trust-grid span { font-size: 13px; color: var(--muted); line-height: 1.6; }
@media (max-width: 720px) { .trust-band { padding: 22px 20px; } .trust-grid { grid-template-columns: 1fr 1fr; gap: 10px; } }
@media (max-width: 460px) { .trust-grid { grid-template-columns: 1fr; } }

/* ---------- 7. 发展历程时间轴（about 页，custom_fields milestones） ---------- */
.timeline-card { margin: 34px 0 8px; padding: 30px 32px; background: #fff; border: 1px solid var(--line); border-radius: 18px; }
.timeline-card .h2 { margin: 0 0 24px; }
.timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.timeline::before { content: ""; position: absolute; left: 19px; top: 10px; bottom: 10px; width: 2px; background: linear-gradient(180deg, #e03642, #f8e2e4); }
.timeline li { position: relative; padding: 0 0 24px 56px; }
.timeline li:last-child { padding-bottom: 0; }
.timeline li::before { content: ""; position: absolute; left: 11px; top: 5px; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 3px solid #d42633; box-shadow: 0 0 0 4px rgba(212, 38, 51, .12); }
.tl-year { display: inline-block; font-size: 15px; font-weight: 800; color: var(--pri); letter-spacing: 1px; margin-bottom: 4px; }
.timeline p { margin: 0; font-size: 14.5px; color: #4d5259; line-height: 1.8; }
@media (max-width: 720px) { .timeline-card { padding: 24px 20px; } .timeline li { padding-left: 46px; } }
/* ============================================================
   5.4 单页营销化升级层（2026-09-17）—— 贴导航零间距 hero / 精致面包屑 / 宽屏内容 / 服务横向导航
   ============================================================ */

/* ---------- 1. 单页 hero 紧贴吸顶导航：去掉 .detail 顶部留白 ---------- */
.detail.page { margin-top: 0; }

/* ---------- 2. 单页 hero 增强：加高呼吸、标题更大气 ---------- */
.e-hero-page { padding-top: 60px; padding-bottom: 56px; }
.e-hero-page .e-eyebrow { margin-bottom: 12px; }
/* 列表页/详情页 hero 标题与单页面同字号（统一营销视觉） */
.e-hero-page h1, .e-hero h1 { font-size: clamp(30px, 3.6vw, 46px); letter-spacing: 1px; }
.e-hero-page h1 { margin-bottom: 14px; }
.e-hero-page .e-desc { font-size: clamp(15px, 0.4vw + 14.2px, 17px); }
@media (min-width: 1600px) {
  .e-hero-page { padding-top: 74px; padding-bottom: 68px; }
  .e-hero-page h1, .e-hero h1 { font-size: clamp(34px, 3vw, 48px); }
}
@media (max-width: 720px) {
  .e-hero-page { padding-top: 40px; padding-bottom: 38px; }
  .e-hero-page h1, .e-hero h1 { font-size: 25px; }
}

/* ---------- 3. 面包屑升级：去灰条，改精致内联胶囊（首页图标 + 细分隔 + 悬停反馈） ---------- */
.breadcrumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px;
  margin: 26px 0 30px; padding: 0;
  font-size: 13px; letter-spacing: .2px; color: var(--muted);
  background: transparent; border: 0; border-radius: 0; box-sizing: border-box;
}
.breadcrumb::before {
  content: ""; flex: none; width: 15px; height: 15px; margin: 0 7px 0 2px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 10 9-7 9 7v10a2 2 0 0 1-2 2h-4v-7h-6v7H5a2 2 0 0 1-2-2z'/%3E%3C/svg%3E") center/contain no-repeat;
  opacity: .55;
}
.breadcrumb a {
  color: var(--muted); text-decoration: none;
  padding: 3px 10px; border-radius: 999px;
  transition: color .15s, background .15s;
}
.breadcrumb a:hover { color: var(--pri); background: #fdf1f2; }
.breadcrumb .sep {
  position: relative; width: 13px; flex: none;
  font-size: 0; color: transparent;
}
.breadcrumb .sep::after {
  content: "›"; position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -54%); font-size: 14px; line-height: 1; color: #cbd5e1;
}
.breadcrumb [aria-current] { color: var(--ink); font-weight: 600; padding: 3px 10px; }
@media (max-width: 720px) {
  .breadcrumb { margin: 18px 0 22px; gap: 2px; }
  .breadcrumb::before { margin-left: 0; }
  .breadcrumb a, .breadcrumb [aria-current] { padding: 3px 8px; }
}

/* ---------- 4. 单页主体宽屏：内容卡跟随 .wrap 全宽（覆盖 5.2 的 980px 阅读宽度限制） ---------- */
.e-page-body { padding: 30px 0 10px; }
@media (min-width: 1280px) {
  .e-page-card .content:not(:has(.toc-box)),
  .e-page-card .content:has(.toc-box) { max-width: none; margin-left: 0; margin-right: 0; }
}
@media (min-width: 1600px) {
  .e-page-body .e-page-card { padding: 52px 60px; }
}

/* ---------- 5. 内容卡定位基准（卡内装饰元素依赖；原顶部蓝色渐变细线已按需求移除） ---------- */
.e-page-body .e-page-card { position: relative; }

/* ---------- 6. 单页小节标题：左侧蓝色竖条（服务信息/发展历程等） ---------- */
.e-page-body .h2 {
  display: flex; align-items: center; gap: 10px;
  margin: 42px 0 18px;
  font-size: clamp(19px, 1vw, 23px); color: var(--ink); letter-spacing: .5px;
}
.e-page-body .h2::before {
  content: ""; flex: none; width: 5px; height: 22px; border-radius: 3px;
  background: linear-gradient(180deg, #e03642, #b01c28);
}


/* ---------- 8. 页面级运营块（blocks：page_<dirname>） ---------- */
.page-block { margin: 34px 0 0; }
.page-block .seo-block-text,
.page-block .seo-block-html {
  background: #fff; border: 1px solid var(--line); border-radius: 18px;
  padding: 32px 36px; font-size: 15px; line-height: 1.9; color: var(--text);
}
@media (max-width: 720px) {
  .page-block .seo-block-text,
  .page-block .seo-block-html { padding: 24px 20px; }
}

/* ---------- 9. 信任带与 CTA 微升级：圆角节奏统一 ---------- */
.e-page-body .trust-band { border-top: 3px solid #f6dcdf; }
.e-page-body .detail-cta { border-radius: 18px; }


/* ---------- 10. 文章正文标题区：H1 与元信息移至正文顶部（营销型 + 语义化） ---------- */
.e-hero .e-desc { margin: 0 0 22px; }
.e-content-card .a-head { padding-bottom: 22px; margin-bottom: 24px; border-bottom: 1px solid var(--line); }
.e-content-card .a-title { margin: 0 0 14px; font-size: clamp(24px, 2.4vw, 34px); line-height: 1.35; letter-spacing: .5px; color: var(--ink); }
.e-content-card .a-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px; font-size: 13.5px; color: var(--muted); }
.e-content-card .a-meta b { color: var(--text); font-weight: 600; }
.e-content-card .a-meta time { color: var(--text); font-weight: 600; }
@media (max-width: 720px) {
  .e-content-card .a-title { font-size: 22px; }
  .e-content-card .a-meta { gap: 6px 14px; font-size: 13px; }
}

/* ---------- 11. 首页默认数据成果带（参考图样式：浅蓝圆角面板 + 四组数字） ---------- */
.stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px; margin: 0; }
.stats-grid > div { text-align: center; position: relative; }
.stats-grid > div + div::before { content: ""; position: absolute; left: -13px; top: 14%; bottom: 14%; width: 1px; background: #f8e2e4; }
.stats-grid dt { font-size: clamp(30px, 3.4vw, 44px); font-weight: 800; line-height: 1.2; color: #b01c28; letter-spacing: .5px; font-family: "Segoe UI", "Microsoft YaHei", sans-serif; }
.stats-grid dd { margin: 10px 0 0; color: #4d5259; font-size: 14.5px; line-height: 1.6; }
@media (max-width: 860px) {
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 16px; }
  .stats-grid > div + div::before { display: none; }
}

/* ---------- 12. 产品详情（营销型 v6：主图双栏 + 规格 + 相关产品） ---------- */
.p-info { display: grid; grid-template-columns: minmax(0, 46%) 1fr; gap: 34px; align-items: start; margin: 0 0 34px; }
.p-media { margin: 0; border-radius: 16px; overflow: hidden; border: 1px solid var(--line); background: linear-gradient(160deg, #f6faff, #eef4fe); aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; }
.p-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.p-media .card-ph { width: 46%; height: auto; color: #c9ccd1; }
.p-side { display: flex; flex-direction: column; gap: 0; min-width: 0; }
.p-title { margin: 0 0 10px; font-size: clamp(24px, 2.6vw, 32px); font-weight: 800; line-height: 1.35; color: var(--ink); }
.p-side .price-lg { font-size: clamp(28px, 3vw, 36px); color: #d42633; }
.p-side .lead { margin: 0 0 18px; }
.p-kv { margin: 0 0 20px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 18px; }
.p-kv > div { background: #f7f8fa; border: 1px solid #e4edfc; border-radius: 10px; padding: 9px 13px; display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.p-kv dt { flex: none; color: #6b7076; font-size: 13px; }
.p-kv dd { margin: 0; color: var(--ink); font-weight: 600; font-size: 13.5px; }
.p-cta { display: flex; flex-wrap: wrap; gap: 10px; margin: 2px 0 0; }
.p-wx { margin: 22px 0 0; padding: 16px 20px; border: 1px dashed #d6d9dd; background: #f3f8ff; border-radius: 12px; }
.p-wx-t { margin: 0 0 4px; font-weight: 700; color: #8f141d; }
.p-wx-d { margin: 0; color: #4d5259; font-size: 14px; }
.p-wx b { color: #b01c28; }
/* 2026-09-22（用户反馈「相关案例左右两侧与主体对齐」）：这里**不能**再叠一层左右 padding。
   ★ 两条页面上的 DOM 层级不同，别想当然：
     · 案例详情（article/case.html）：.p-related 是 .cs-wrap 的**兄弟**（同挂在 article.detail 下）
     · 产品详情（article/product.html）：.p-related 在 .pd-wrap **内部**
   原来这里写死 padding-left/right: var(--pad)，等于在 .wrap(main) 已有的 gutter 上又缩一道
   → 实测 1440 档相关案例落在 72~1368，而同一页的主体两侧（.cs-card 卡片、.cs-final 面板、
   列表页 .cw-wall、顶部导航）全是 36~1404，于是「相关案例」比主体各内缩 36px，看着没对齐。
   去掉后 .p-related 外框与主体容器重合（≥961 档 / ≤720 档 均由父级提供 gutter），
   仅 721~960 档案例页需补 16px，见第 55 章。自检脚本 .workbuddy/tmp/_verify_related_align.cjs */
.p-related { margin: 34px auto 0; max-width: var(--detail-col); }
.p-related-head { display: flex; align-items: baseline; justify-content: space-between; margin: 0 0 16px; }
.p-related-head h2 { margin: 0; font-size: 21px; font-weight: 800; }
.p-related-head a { color: #d42633; font-size: 14px; text-decoration: none; }
.p-related-head a:hover { text-decoration: underline; }
@media (max-width: 900px) {
  .p-info { grid-template-columns: 1fr; gap: 20px; }
  .p-kv { grid-template-columns: 1fr; }
}

/* ============ 13. 样式统一层（参考图驱动：CTA 按钮组 / 服务卡 / 新闻卡 / 数据带 / 侧边栏） ============ */
/* 13.1 按钮体系统一：圆角 12px；亮底描边按钮 = 白底浅蓝描边（参考图 CTA 按钮组） */
.btn-pri, .btn-ghost, .btn-line, .btn-line-inv, .btn-sm,
.block-more .btn-pri, .block-more .btn-line,
.e-hero-cta .btn-pri, .e-hero-cta .btn-ghost,
.detail-cta-btns .btn-pri, .detail-cta-btns .btn-ghost,
.contact-actions .btn-pri, .contact-actions .btn-ghost { border-radius: 12px; }
.btn-ghost { background: #ffffff; border-color: #d6d9dd; transition: color .18s, background .18s, border-color .18s, transform .18s, box-shadow .18s; }
.btn-ghost:hover { background: var(--pri); border-color: var(--pri); color: #ffffff; box-shadow: 0 8px 18px rgba(212, 38, 51, .20); }
.btn-line-inv { background: rgba(255, 255, 255, .08); } /* 暗底透明描边（hero/深色区），视觉统一圆角 */

/* 13.2 服务项目卡（参考图 CORE SERVICES：顶部色块图标，首卡红色其余浅蓝，底部「了解服务 →」） */
.svc-card { display: flex; padding: 0; }
.svc-card a { display: flex; flex-direction: column; height: 100%; width: 100%; padding: 22px 22px 20px; }
.svc-card .card-body { padding: 0; }
.svc-ico { width: 60px; height: 60px; margin: 0 0 16px; border-radius: 14px; background: #e7effe; color: var(--pri); display: flex; align-items: center; justify-content: center; }
.svc-ico svg { width: 29px; height: 29px; }
.svc-card:first-child .svc-ico { background: #ef4444; color: #ffffff; }
.svc-card h3 { margin: 0 0 8px; font-size: 17.5px; color: var(--ink); line-height: 1.5; }
.svc-card p { margin: 0 0 18px; font-size: 13.8px; line-height: 1.75; color: var(--muted); flex: 1; }
.svc-more { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 700; color: var(--pri); transition: color .18s; }
.svc-card:hover { box-shadow: var(--shadow); }
.svc-card:hover .svc-more { color: var(--pri-d); }
.svc-card:hover h3 { color: var(--pri); }

/* 13.3 新闻资讯卡（参考图 NEWS CENTER：两列左图右文，日期/标题/摘要/查看详情） */
.news-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); --nc-media-w: 42%; }
.news-cards li { overflow: hidden; }
.news-cards a { display: block; position: relative; height: 100%; padding: 0; }
/* ★封面图铺满左栏（2026-09-21 修「图下有空白」）
   旧写法 width:42% + aspect-ratio:4/3 与全局 height:150px 冲突，height 胜出把图区钉死 150px，
   而卡片被右侧文字撑到 213px，flex-start 顶对齐 → 图下露出 63px 空白。
   改用绝对定位：图区 top:0/bottom:0 撑满卡片高度，且完全脱离文档流 ——
   卡片高度只由右侧文字决定，竖图（1000×1126）不再把整行撑到 319px，行高恢复整齐。
   ⚠️ 选择器必须带 `li`（(0,2,1)）：第 20.6 层有同名的 `.news-cards .news-media{position:relative}`
   且位置更靠后，同特异性会把它顶回 relative → <span> 退回 inline、width/absolute 双双失效。
   ⚠️ display:block 是给 span 兜底的 blockify（absolute 会自动 blockify，但别依赖单一途径）。 */
.news-cards li .news-media { display: block; position: absolute; left: 0; top: 0; bottom: 0; width: var(--nc-media-w); height: auto; margin: 0; min-height: 0; aspect-ratio: auto; background: linear-gradient(135deg, #f1f2f4, #e4e6ea); }
.news-cards .news-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.news-cards .news-media .news-ph { display: flex; align-items: center; justify-content: center; height: 100%; color: #c9ccd1; }
.news-cards .news-media .news-ph svg { width: 36px; height: 36px; }
.news-cards li .news-body { display: flex; flex-direction: column; gap: 8px; padding: 20px 20px 18px; min-width: 0; margin-left: var(--nc-media-w); }
.news-cards .news-more { margin-top: auto; padding-top: 8px; }

/* 13.4 数据成果带说明文字加深（参考图：大号蓝字 + 深色说明） */
.stats-grid dd { color: #3d4147; }
.stats-in p, .stats-in span, .stats-in div > span:last-child { color: #3d4147; }

/* 13.5 产品中心侧边栏细节统一（参考图：标签圆角胶囊、咨询按钮一致） */
.cat-side-tags .seo-tag-cloud a { border-radius: 999px; }

/* 13.6 移动端：新闻卡单列，左图右文保持（图 40%） */
@media (max-width: 720px) {
  .news-cards { grid-template-columns: 1fr; --nc-media-w: 40%; }
}

/* ============ 14. 全站图片化 + 国际大牌视觉（深色 hero 大图 / 区块配图 / 克制蓝调） ============ */
/* 14.1 首页 hero：深色大图 + 遮罩 + 白字（营销基础不变：H1/CTA/信任条结构保留） */
.hero {
  background: linear-gradient(180deg, rgba(12, 13, 16, .80) 0%, rgba(12, 13, 16, .60) 55%, rgba(12, 13, 16, .88) 100%); /* 2026-09-21：老站 hero-home.webp 已下线，首页 hero 底色由 40.2 层统一定义 */
}
.hero-eyebrow { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .35); color: #fbe5e7; backdrop-filter: blur(8px); }
.hero h1 { color: #ffffff; text-shadow: 0 2px 22px rgba(12, 13, 16, .50); }
.hero-sub { color: rgba(255, 255, 255, .86); }
.hero-chips span { background: rgba(255, 255, 255, .10); border: 1px solid rgba(255, 255, 255, .22); color: #e5e7ea; backdrop-filter: blur(6px); }
.hero-facts li { background: rgba(255, 255, 255, .09); border: 1px solid rgba(255, 255, 255, .16); backdrop-filter: blur(10px); box-shadow: 0 8px 24px rgba(12, 13, 16, .35); }
.hero-facts b { color: #ffffff; }
.hero-facts span { color: rgba(255, 255, 255, .82); }
.hero-btns .btn-pri { background: linear-gradient(180deg, #e03642, #d42633); box-shadow: 0 10px 28px rgba(212, 38, 51, .45); }

/* 14.2 列表页/详情页 hero（e-hero）与单页 hero（e-hero-page）：深色大图 + 白字 */
.e-hero, .e-hero-page {
  background:
    linear-gradient(180deg, rgba(12, 13, 16, .84) 0%, rgba(12, 13, 16, .66) 60%, rgba(12, 13, 16, .90) 100%),
    url('/uploads/site/hero-list-2026.webp') center / cover no-repeat;
  background-size: cover;
}
.e-hero-page {
  background:
    linear-gradient(180deg, rgba(12, 13, 16, .84) 0%, rgba(12, 13, 16, .66) 60%, rgba(12, 13, 16, .90) 100%),
    url('/uploads/site/hero-page.webp') center / cover no-repeat;
  background-size: cover;
}
.e-hero h1, .e-hero-page h1 { color: #ffffff; text-shadow: 0 2px 20px rgba(12, 13, 16, .45); }
.e-eyebrow { color: #f0999f; }
.e-eyebrow::before { background: #f0999f; }
.e-desc { color: rgba(255, 255, 255, .84); }
.e-meta { color: rgba(255, 255, 255, .78); }
.e-meta b { color: #ffffff; }
.e-num { color: #ee8b93; }
.e-crumb { color: rgba(255, 255, 255, .72); }
.e-crumb a { color: rgba(255, 255, 255, .80); }
.e-crumb a:hover { color: #ffffff; }
.e-crumb .sep { color: rgba(255, 255, 255, .45); }
.e-hero-facts li { background: rgba(255, 255, 255, .10); border-color: rgba(255, 255, 255, .18); backdrop-filter: blur(10px); }
.e-hero-facts b { color: #f0999f; }
.e-hero-facts span { color: rgba(255, 255, 255, .85); }
.e-hero-cta .btn-ghost, .e-hero-cta .btn-line { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .45); color: #ffffff; }
.e-hero-cta .btn-ghost:hover { background: #ffffff; border-color: #ffffff; color: #b01c28; }

/* 14.3 痛点区：浅色纹理背景（保留原卡片结构） */
.pain-band { background: transparent; } /* 2026-09-21：老站 pain-bg.webp 已下线（16.10 层本就把它覆盖为透明） */

/* 14.4 转化 CTA 区：深色光效背景 + 白字（按钮组与 img4 参考图保持一致） */
.cta-band {
  /* 2026-09-21：老站 cta-bg.webp 已下线；本层深色底实际被 16.6 层浅色渐变覆盖 */
  background: linear-gradient(180deg, rgba(12, 13, 16, .90), rgba(12, 13, 16, .94));
  color: #ffffff; border-color: rgba(255, 255, 255, .08);
  box-shadow: 0 14px 40px rgba(12, 13, 16, .30);
}
.cta-text h2 { color: #ffffff; }
.cta-text p { color: rgba(255, 255, 255, .82); }
.cta-band .btn-ghost { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .45); color: #ffffff; }
.cta-band .btn-ghost:hover { background: #ffffff; border-color: #ffffff; color: #b01c28; }
.cta-band::before, .cta-band::after { opacity: .35; }

/* 14.5 文章/单页正文顶部主图（国际大牌：16:9 圆角大图 + 细腻阴影） */
.a-cover { display: block; margin: 0 0 26px; border-radius: 18px; overflow: hidden; box-shadow: 0 16px 40px rgba(22, 24, 29, .12); line-height: 0; }
.a-cover img { width: 100%; height: auto; display: block; }

/* ============ 15. 细节统一修复层（左右留白 / 板块间距 / 圆点 / 按钮高度 / 数据带竖版） ============ */
/* 15.1 内容宽度：宽屏布局（1560px，流行宽屏，左右适度留白） */
.wrap { max-width: 1560px; }

/* 15.2 侧边栏：板块之间留间距；去掉咨询联系方式与按钮前面的圆点（保留分类导航圆点） */
.cat-side-box + .cat-side-box { margin-top: 16px; }
.cat-side .side-contact-list a::before, .cat-side .side-contact-btns a::before { content: none; }

/* 15.3 CTA / 详情 / 联系区按钮高度统一：在线询价等线框按钮与主按钮同高（参考图 CTA 按钮组） */
.cta-btns .btn-pri, .cta-btns .btn-ghost, .cta-btns .btn-line,
.detail-cta-btns .btn-pri, .detail-cta-btns .btn-ghost, .detail-cta-btns .btn-line,
.contact-actions .btn-pri, .contact-actions .btn-ghost, .contact-actions .btn-line {
  padding: 12px 30px; font-size: 14.5px; display: inline-block;
}

/* 15.4 卡片网格视觉分层：静态阴影增强，区块浅底（卡片不再和背景挤在一起）
   ★2026-09-21：硬编码的淡蓝 → 灰改走变量，与全站浅色块保持同一组色 */
.block-alt { background: linear-gradient(180deg, var(--blue-50) 0%, var(--blue-100) 100%); }
.block .card, .block-alt .card, .adv-grid li, .steps li, .news-cards li {
  box-shadow: 0 8px 26px rgba(22, 24, 29, .07);
}
.svc-card { box-shadow: 0 10px 30px rgba(22, 24, 29, .08); }

/* 15.5 数据成果带：按参考图重排为竖版（大号蓝字 + 深色说明 + 行间分隔线，面板居中） */
.stats-band { max-width: 860px; margin-left: auto; margin-right: auto; }
.stats-in { justify-content: center; }
.stats-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; max-width: 1120px; margin: 0 auto; }
.stats-grid > div { padding: 22px 12px; }
.stats-grid > div + div { border-top: 1px solid #f8e2e4; }
.stats-grid > div + div::before { display: none; }
.stats-grid dt { font-size: clamp(28px, 3vw, 40px); }
.stats-grid dd { margin: 6px 0 0; }
/* 15.2b 分类导航圆点也去掉（贴合参考图：纯文字 + 高亮块） */
.cat-side a::before { content: none; }

/* ============ 16. 全站轻量化 + 色彩统一（克制、轻盈、少重量） ============ */
/* 16.1 统一色板：主蓝唯一 + 派生浅蓝，收敛全部硬编码蓝 */
:root {
  /* ★2026-09-21 用户指定：浅色渐变改用这两个色 —— 灰 #e3e3e3 → 浅粉 #fdf2f3。
     原值是淡蓝 #f2f7ff（浅色块一直带蓝调，与「浅灰 + 品牌红」的站点色板不符）。
     变量名沿用 blue-* 不改，避免牵动全站 9 处引用；语义已变为「浅色渐变起/止色」。 */
  --blue-50: #e3e3e3;
  --blue-100: #fdf2f3;
  --blue-200: #f6dcdf;
  --blue-300: #ebaab0;
  --shadow: 0 4px 16px rgba(22, 24, 29, .06);
  --shadow-lg: 0 12px 32px rgba(212, 38, 51, .14);
}

/* 16.2 hero 减淡：遮罩降透明度、图片更通透（深色大图保留，白字保留） */
.hero {
  background: linear-gradient(180deg, rgba(12, 13, 16, .62) 0%, rgba(12, 13, 16, .46) 55%, rgba(12, 13, 16, .72) 100%); /* 2026-09-21：老站 hero-home.webp 已下线 */
}
.e-hero, .e-hero-page {
  background:
    linear-gradient(180deg, rgba(12, 13, 16, .66) 0%, rgba(12, 13, 16, .48) 60%, rgba(12, 13, 16, .74) 100%),
    url('/uploads/site/hero-list-2026.webp') center / cover no-repeat;
  background-size: cover;
}
.e-hero-page {
  background:
    linear-gradient(180deg, rgba(12, 13, 16, .66) 0%, rgba(12, 13, 16, .48) 60%, rgba(12, 13, 16, .74) 100%),
    url('/uploads/site/hero-page.webp') center / cover no-repeat;
  background-size: cover;
}
.hero h1 { text-shadow: 0 1px 14px rgba(12, 13, 16, .35); }
.hero-facts li { background: rgba(255, 255, 255, .10); border-color: rgba(255, 255, 255, .20); box-shadow: 0 4px 18px rgba(12, 13, 16, .22); }
.hero-btns .btn-pri { background: linear-gradient(180deg, #e03642, #d42633); box-shadow: 0 8px 22px rgba(212, 38, 51, .35); }

/* 16.3 按钮渐变与描边统一（主蓝渐变唯一 + 浅蓝描边唯一） */
.btn-pri { background: linear-gradient(180deg, #e03642, #d42633); box-shadow: 0 4px 14px rgba(212, 38, 51, .25), inset 0 1px 0 rgba(255, 255, 255, .18); }
.btn-pri:hover { background: linear-gradient(180deg, #c2222d, #b01c28); }
.btn-ghost { border-color: var(--blue-300); }
.btn-line { border-color: var(--blue-200); }
.btn-line-inv { border-color: var(--blue-300); }

/* 16.4 阴影统一减轻：静态轻、hover 适度 */
.card, .svc-card, .adv-grid li, .steps li, .news-cards li, .cat-side-box, .e-rel-card {
  box-shadow: 0 3px 12px rgba(22, 24, 29, .05);
}
.card:hover, .svc-card:hover, .adv-grid li:hover, .steps li:hover, .news-cards li:hover {
  box-shadow: 0 10px 26px rgba(22, 24, 29, .10);
}

/* 16.5 浅色区块背景统一为同族浅蓝 */
.block-alt { background: linear-gradient(180deg, var(--blue-50) 0%, var(--blue-100) 100%); }
.stats-band { background: linear-gradient(135deg, var(--blue-50), var(--blue-100)); border-color: var(--blue-200); }
.svc-ico { background: var(--blue-100); }

/* 16.6 转化 CTA 区：改回浅蓝渐变（参考图 img4：浅蓝底 + 深蓝主按钮 + 白描边按钮），去掉深色重量 */
.cta-band {
  background: linear-gradient(135deg, var(--blue-50) 0%, var(--blue-100) 100%);
  color: var(--ink); border-color: var(--blue-200);
  box-shadow: 0 8px 24px rgba(212, 38, 51, .08);
}
.cta-text h2 { color: var(--ink); }
.cta-text p { color: var(--muted); }
.cta-band .btn-ghost { background: #ffffff; border-color: var(--blue-300); color: var(--pri); }
.cta-band .btn-ghost:hover { background: var(--pri); border-color: var(--pri); color: #ffffff; }
.cta-band::before, .cta-band::after { opacity: .25; }

/* 16.7 深色 hero 内文字蓝统一为浅蓝派生色 */
.e-eyebrow, .e-hero-facts b, .e-num { color: var(--blue-300); }
.e-eyebrow::before { background: var(--blue-300); }

/* 16.8 区块标题横线统一为主蓝渐变 */
.block-head h2::after { background: linear-gradient(90deg, var(--pri), var(--pri-d)); }

/* 16.9 玻璃胶囊轻量化：更透更薄 */
.hero-eyebrow { background: rgba(255, 255, 255, .10); border-color: rgba(255, 255, 255, .28); backdrop-filter: blur(6px); }
.hero-chips span { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .18); }

/* 16.10 痛点区：浅蓝面板 + 卡片间距加大 + 阴影分层（参考图 img18） */
.pain-band { background: transparent; border-radius: 0; padding: 52px 0 12px; margin-top: 0; } /* 2026-09-19：痛点区去掉浅蓝背景，与其它区块统一 */
.pain-grid { gap: 26px; }
.pain-grid li { border-color: var(--blue-200); border-top: 3px solid var(--blue-300); box-shadow: 0 6px 18px rgba(22, 24, 29, .06); padding: 30px 26px 24px; }
.pain-grid li:hover { box-shadow: 0 12px 28px rgba(22, 24, 29, .10); }
.pain-no { color: var(--blue-200); }

/* 16.11 数据成果带：4 组排成一行（用户要求横排，保留大号蓝字+说明样式） */
.stats-band { max-width: none; }
.stats-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; max-width: 1120px; margin: 0 auto; }
.stats-grid > div { padding: 18px 26px; }
.stats-grid > div + div { border-top: none; border-left: 1px solid #f8e2e4; }
@media (max-width: 640px) { .stats-grid { grid-template-columns: 1fr 1fr; } .stats-grid > div + div { border-left: none; } .stats-grid > div:nth-child(3) { border-left: none; } }

/* 16.12 首页区块左右对齐（2026-09-19）：内容已在 main.wrap(20px padding) 内，
   区块自身不再额外加左右 padding / 限宽居中，使核心产品/关于我们/客户案例/常见问题等
   卡片网格的左右边缘与头部导航完全对齐。色块(.block-alt)铺满 main 内容盒。 */
.block { padding: 52px 0 12px; }
.block-alt { padding: 52px 0 56px; }
.block > .block-head,
.block > .grid,
.block > ol.steps,
.block > ul.adv-grid,
.block > ul.news-cards,
.block > .pain-grid,
.block > .about-grid {
  max-width: none; margin-left: 0; margin-right: 0;
}
@media (max-width: 640px) {
  .block { padding: 44px 0 12px; }
  .block-alt { padding: 44px 0 48px; }
}

/* ============ 17. 全站按钮统一（hover 任何状态文字清晰，参考图 CTA 按钮组） ============ */
.btn-pri, .btn-ghost, .btn-line, .btn-line-inv, .btn-sm {
  font-weight: 600;
}
/* 主按钮：蓝渐变底白字；hover 深蓝渐变，文字始终白色 */
.btn-pri { color: #ffffff; }
.btn-pri:hover { color: #ffffff; }
.btn-pri:active { color: #ffffff; }
/* 描边按钮：白底蓝字；hover 蓝底白字（强反馈） */
.btn-ghost { color: var(--pri); }
.btn-ghost:hover { color: #ffffff; }
/* 线框按钮：白底蓝字；hover 蓝底白字（修复查看更多 hover 文字不可见/弱反馈） */
.btn-line { color: var(--pri); background: #ffffff; }
.btn-line:hover { color: #ffffff; background: var(--pri); border-color: var(--pri); box-shadow: 0 6px 16px rgba(212, 38, 51, .18); }
/* 暗底透明描边：半透明白底白字；hover 白底蓝字 */
.btn-line-inv { color: #ffffff; border-color: rgba(255, 255, 255, .55); background: rgba(255, 255, 255, .12); }
.btn-line-inv:hover { color: var(--pri); background: #ffffff; border-color: #ffffff; }
/* 小按钮（侧边栏在线预约/在线询价）：蓝字；hover 蓝底白字 */
.btn-sm { color: var(--pri); border: 1px solid var(--blue-300); background: #ffffff; }
.btn-sm:hover { color: #ffffff; background: var(--pri); border-color: var(--pri); }
/* 卡片内文字链接（查看详情/了解服务等）统一主蓝，hover 深蓝 */
.card-more, .svc-more { color: var(--pri); font-weight: 700; }
.card-more:hover, .svc-more:hover { color: var(--pri-d); }

/* 18.1 头部 LOGO：图标 + 公司名组合（国际大牌式） */
.logo { display: inline-flex; align-items: center; gap: 11px; }
.logo-mark { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; box-shadow: 0 2px 8px rgba(143, 20, 29, .18); }
.logo-text { font-size: clamp(17px, 0.4vw + 15.4px, 20px); font-weight: 800; color: var(--ink); letter-spacing: .4px; line-height: 1.2; }

/* 18.2 联系我们页：双栏布局（左：联系信息；右：询价表单直接融入页面主体） */
.contact-layout { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 30px; align-items: start; }
.contact-info { display: flex; flex-direction: column; gap: 16px; }
.contact-card { background: #fff; border: 1px solid #e8edf4; border-radius: 14px; padding: 22px 24px; box-shadow: 0 2px 10px rgba(22, 24, 29, .04); }
.contact-card h3 { margin: 0 0 12px; font-size: 17px; font-weight: 800; color: var(--ink); }
.contact-card p { margin: 0 0 8px; font-size: 14.5px; line-height: 1.8; color: var(--muted); }
.contact-card p:last-child { margin-bottom: 0; }
.contact-list { list-style: none; margin: 0; padding: 0; }
.contact-list li { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 13px; font-size: 14.5px; line-height: 1.65; color: #3d4147; }
.contact-list li:last-child { margin-bottom: 0; }
.contact-list svg { flex: none; margin-top: 2px; color: var(--pri); }
.contact-list b { color: var(--ink); }
.contact-list a { color: var(--pri); text-decoration: none; }
.contact-list a:hover { text-decoration: underline; }
.contact-info-img { width: 100%; border-radius: 14px; object-fit: cover; box-shadow: 0 2px 10px rgba(22, 24, 29, .06); }
.contact-form { background: #fff; border: 1px solid #e8edf4; border-radius: 16px; padding: 26px 28px 30px; box-shadow: 0 4px 18px rgba(22, 24, 29, .06); }
.contact-form h3 { margin: 0 0 6px; font-size: 20px; font-weight: 800; color: var(--ink); }
.contact-form > p { margin: 0 0 18px; font-size: 14px; color: var(--muted); }
.contact-form .iq-embed { padding: 0; background: transparent; }
@media (max-width: 960px) {
  .contact-layout { grid-template-columns: 1fr; }
}

/* 18.3 首页数据带横排（stats-in 内 blocks 容器四组一行：大蓝字 + 说明 + 组间分隔线） */
.stats-in .seo-block-html { display: flex; flex-wrap: wrap; justify-content: center; gap: 0; width: 100%; }
.stats-in .seo-block-html > div { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 0 34px; text-align: center; }
.stats-in .seo-block-html > div + div { border-left: 1px solid #f8e2e4; }
.stats-in .seo-block-html b, .stats-in .seo-block-html strong { display: block; font-size: clamp(26px, 3vw, 36px); font-weight: 800; line-height: 1.25; color: #b01c28; font-family: "Segoe UI", "Microsoft YaHei", sans-serif; }
.stats-in .seo-block-html p, .stats-in .seo-block-html span { margin: 0; color: #4d5259; font-size: 14px; line-height: 1.6; }
@media (max-width: 760px) {
  .stats-in .seo-block-html { gap: 18px 0; }
  .stats-in .seo-block-html > div { flex: 1 1 40%; padding: 0 12px; }
  .stats-in .seo-block-html > div:nth-child(3) { border-left: none; }
}

/* 18.4 申请友情链接页（全站统一营销型双栏） */
.apply-layout { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 30px; align-items: start; }
.apply-side { display: flex; flex-direction: column; gap: 16px; }
.apply-card { background: #fff; border: 1px solid #e8edf4; border-radius: 14px; padding: 22px 24px; box-shadow: 0 2px 10px rgba(22, 24, 29, .04); }
.apply-card h3 { margin: 0 0 12px; font-size: 17px; font-weight: 800; color: var(--ink); }
.apply-note { margin: 0 0 14px; font-size: 13.5px; line-height: 1.7; color: var(--muted); }
.apply-link-box { background: linear-gradient(135deg, #f5f6f8, #ecedf0); border: 1px dashed #d6d9dd; border-radius: 12px; padding: 16px 18px; }
.apply-link-name { margin: 0 0 6px; font-size: 15.5px; font-weight: 800; color: var(--ink); }
.apply-link-url { margin: 0 0 12px; font-size: 13.5px; color: var(--pri); word-break: break-all; }
.apply-copy { padding: 7px 18px; font-size: 13px; }
.apply-rules { list-style: none; margin: 0; padding: 0; }
.apply-rules li { position: relative; padding: 0 0 9px 18px; font-size: 14px; line-height: 1.6; color: #4d5259; }
.apply-rules li::before { content: ""; position: absolute; left: 0; top: 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--pri); }
.apply-rules li:last-child { padding-bottom: 0; }
.apply-contact { list-style: none; margin: 0; padding: 0; }
.apply-contact li { font-size: 14px; line-height: 1.8; color: #4d5259; }
.apply-contact b { color: var(--ink); }
.apply-main .contact-form { padding: 26px 28px 30px; }
.apply-main .contact-form label { display: block; margin: 14px 0 4px; font-size: 14px; font-weight: 700; color: var(--ink); }
.apply-main .contact-form input[type="text"] { width: 100%; box-sizing: border-box; margin-top: 6px; padding: 11px 14px; border: 1px solid #d6e0ef; border-radius: 10px; font-size: 14.5px; font-family: inherit; transition: border-color .15s, box-shadow .15s; }
.apply-main .contact-form input[type="text"]:focus { outline: none; border-color: var(--pri); box-shadow: 0 0 0 3px rgba(212, 38, 51, .12); }
.apply-main .contact-form button[type="submit"] { width: 100%; margin-top: 20px; padding: 13px 30px; border: 0; cursor: pointer; font-size: 15px; }
.fa-hp { position: absolute; left: -9999px; }
.fa-hint { color: #9aa0a6; font-size: 12px; margin: 4px 0 0; font-weight: 400; }
.fa-err { background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; border-radius: 10px; padding: 10px 14px; font-size: 13.5px; margin: 0 0 12px; }
.fa-err p { margin: 2px 0; }
.apply-result { max-width: 640px; margin: 0 auto; background: #fff; border: 1px solid #e8edf4; border-radius: 16px; padding: 42px 36px; text-align: center; box-shadow: 0 4px 18px rgba(22, 24, 29, .06); }
.apply-result-text { font-size: 15px; line-height: 1.8; color: #4d5259; margin: 0 0 22px; }
.apply-result-back { margin: 0; }
@media (max-width: 960px) {
  .apply-layout { grid-template-columns: 1fr; }
}

/* ============ 19. 封面图交互设计 ============
   两条硬约定：
   ① 列表卡封面（可点进详情的缩略图）保留极轻 hover：只做 3% 缓慢放大 + 很淡的底部压暗；
   ② 正文大图 / 详情页首图 / 单页大图一律「不做交互动作」——不放大、不加遮罩、不加位移。
   第 ② 组用 !important 显式锁死，防止以后加样式时又给大图带出动效。 */
.card-media, .news-media, .p-media, .a-cover { position: relative; overflow: hidden; }
/* ① 列表卡封面：放大 6% → 3%，时长 .55s → .7s，缓出更柔，不再"猛地跳一下" */
.card-media img, .news-media img {
  transition: transform .7s cubic-bezier(.22, .61, .36, 1);
  backface-visibility: hidden;
}
.card:hover .card-media img,
.news-cards li:hover .news-media img { transform: scale(1.03); }
/* 列表卡 hover 压暗遮罩：浓度 .40 → .16，过渡 .35s → .5s（原来一悬停就"啪"地黑一块） */
.card-media::after, .news-media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(22, 24, 29, 0) 52%, rgba(22, 24, 29, .16));
  opacity: 0; transition: opacity .5s ease;
}
.card:hover .card-media::after,
.news-cards li:hover .news-media::after { opacity: 1; }
/* ② 正文 / 详情 / 单页大图：锁死无交互（含富文本正文图 .content img、联系页 .contact-info-img） */
.a-cover img, .p-media img, .c-hero-img img, .content img, .contact-info-img {
  transform: none !important;
  transition: none !important;
}
.a-cover::after, .p-media::after { content: none !important; }
/* 卡片整体提升：上浮 5px → 2px、阴影减半，hover 不再"顿"一下 */
.grid .card, .news-cards li { transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
.grid .card:hover, .news-cards li:hover { box-shadow: 0 12px 28px rgba(22, 24, 29, .09); border-color: #dfe8f6; }
/* 卡内文字链接动感：查看详情/了解服务 hover 主蓝（不再微移，原因同 28.3） */
.news-more, .card-more, .svc-more { transition: color .2s ease; }

/* ============================================================
20. 三种详情页独立版式（2026-09-19 信息架构级重做）
   三类详情页的访客意图不同，所以「模块顺序」与「专属模块」各自独立，不再共用同一套文末块：
   ① 文章 = 阅读型（nw-*）：栏目条 → 标题署名 → 导读摘要 → 正文（右侧目录吸附高亮）
                            → 上下篇 / 继续阅读 → 弱转化细条
   ② 产品 = 决策型（pd-*）：决策首屏（名/价/转化/规格亮点）→ 简介·参数·承诺·包含·场景·答疑
                            ＋右侧吸附报价卡 → 相关产品比价 → 强转化 → 窄屏底部常驻询价条
   ③ 案例 = 说服型（cs-*）：实景图带（标题＋客户画像＋效果数据）→ 挑战/做法/成果 叙事链
                            → 客户证言 → 补充正文 → 相关案例 → 同款方案转化
   版心宽度三类统一走宽屏档 1280px（2026-09-19 调整，原为 1180/1280/1120 三档）；
   差异全部落在「模块顺序 + 专属模块 + 配色」上，不再靠版心宽度区分。
   样式统一放文件末尾：同权重时后写的生效，不去动前面的历史规则（回滚只需删掉本节）。
============================================================ */
:root { --stick-top: 78px; }   /* 吸顶导航（.site-header）高度 + 留白，sticky 元素统一用它 */

/* ---------- 20.1 文章（资讯）· 阅读型（nw-*） ---------- */
/* 版心宽屏档 1280px（三类统一）。正文列 1040px：宽屏下仍是可读行长，同时不再是「窄栏」。 */
.detail-news { --detail-col: 1640px; --nw-read: 1040px; } /* 2026-09-19：版心对齐 .wrap 内容盒(1680-2*20)，与头部导航左右对齐 */

/* 栏目条：浅底细条，不铺深色大图、不挂信任条，把注意力让给正文 */
/* 注意：绝不覆盖 .e-hero 的水平 padding —— 主题的「全出血」规则（≥861px）用
   负 margin 把 hero 拉满视口、再用同值 padding 把内容推回容器，两者必须成对；
   一旦把水平 padding 改成固定值，负 margin 就没人抵消，内容会被拖出视口左边缘。
   这里只调垂直间距。 */
.detail-news .e-hero-mini {
  background: linear-gradient(180deg, var(--blue-50, #e3e3e3), var(--blue-100, #fdf2f3));
  border-bottom: 1px solid var(--line);
  padding-top: 22px;
  padding-bottom: 20px;
}
.detail-news .e-hero-mini::before, .detail-news .e-hero-mini::after { content: none; }
.detail-news .e-hero-mini .e-eyebrow { color: var(--pri); margin: 0 0 8px; }
.detail-news .e-hero-mini .e-eyebrow::before { background: var(--pri); }
.detail-news .e-hero-mini .e-desc { color: var(--muted); margin: 0; font-size: 14.5px; }

/* 主体 */
.nw-wrap { max-width: var(--detail-col); margin: 0 auto; padding: 34px 0 64px; }
.nw-card { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 42px 48px 36px; }

/* 标题 + 署名（阅读型的作者/时间/篇幅信息带，也是 E-E-A-T 的落点） */
.nw-head { margin: 0 0 22px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
/* 注意：选择器必须带上 .detail-news 前缀。基础层有 `.detail h1 { font-size; color: var(--ink); margin }`
   这种 (0,1,1) 的元素级规则，纯类选择器 (0,1,0) 会被它压掉（字号、颜色、外边距全部失效）。 */
.detail-news .nw-title { margin: 0 0 14px; font-size: clamp(24px, 1.6vw + 16px, 34px); line-height: 1.42; letter-spacing: .2px; color: var(--ink); }
.nw-meta { display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 13.5px; color: var(--muted); }
.nw-meta b { color: var(--ink); font-weight: 600; }
.nw-by { color: var(--pri); }

/* 导读摘要：让人 5 秒判断这篇要不要读下去 */
.nw-lead { margin: 0 0 26px; padding: 15px 20px 16px; background: #f7f8fa; border-left: 3px solid var(--pri); border-radius: 0 10px 10px 0; color: #3d4147; font-size: 15px; line-height: 1.95; }
.nw-lead::before { content: "导读"; display: block; margin: 0 0 5px; font-size: 11.5px; font-weight: 700; letter-spacing: 2px; color: var(--pri); }

/* 封面图（不做交互由第 19 节统一锁死） */
.detail-news .a-cover { margin: 0 0 28px; border-radius: 14px; }

/* 正文：行高 2.1 / 字号 16.5 —— 三类版式里最松的阅读密度 */
.detail-news .content { font-size: 16.5px; line-height: 2.1; color: #263449; }
.detail-news .content > p { margin: 0 0 20px; }
.detail-news .content > h2 { margin: 34px 0 16px; padding-left: 14px; border-left: 4px solid var(--pri); font-size: 21px; line-height: 1.5; color: var(--ink); }
.detail-news .content > h3 { margin: 26px 0 12px; font-size: 18px; color: var(--ink); }
/* 无目录时给阅读宽度上限并左对齐（有目录时走插件的目录双栏，不套这条） */
.detail-news .content:not(:has(> .toc-box)) { max-width: var(--nw-read); margin-left: 0; margin-right: auto; }
/* 目录当前章节高亮（由 front_enhance() 的滚动联动加 .cur） */
.content > .toc-box .toc-l a.cur { color: var(--ink); font-weight: 700; }
.content > .toc-box .toc-l a.cur::before { content: "▍"; color: var(--pri); margin-right: 1px; }

/* 文末：上下篇（卡片式）→ 继续阅读（文字流）→ 弱转化细条 */
.nw-foot { margin: 26px 0 0; }
.nw-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 0 0 24px; }
.nw-nav-a { display: block; padding: 16px 20px; background: #fff; border: 1px solid var(--line); border-radius: 14px; text-decoration: none; transition: border-color .2s, box-shadow .2s; }
.nw-nav-a:hover { border-color: #ebaab0; box-shadow: 0 10px 24px rgba(22, 24, 29, .06); }
.nw-nav-a.next { text-align: right; }
.nw-nav-a .dir { display: block; margin: 0 0 6px; font-size: 12.5px; color: var(--pri); }
.nw-nav-a .t { display: block; font-size: 14.5px; line-height: 1.6; color: var(--ink); }
.nw-rel { margin: 0 0 24px; }
.nw-rel-h { margin: 0 0 12px; font-size: 15px; font-weight: 600; color: var(--muted); }
.nw-rel-list { list-style: none; margin: 0; padding: 0; }
.nw-rel-list li + li { border-top: 1px solid var(--line); }
.nw-rel-list a { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; padding: 13px 2px; text-decoration: none; }
.nw-rel-list .t { font-size: 15px; color: var(--ink); transition: color .18s; }
.nw-rel-list a:hover .t { color: var(--pri); }
.nw-rel-list time { flex: none; font-size: 12.5px; color: var(--muted); }
/* 弱转化细条 .nw-soft 已停用（2026-09-21）。
   文章详情页文末改由全站统一的 .cta-band 承载（用户要求「CAT 要与列表页统一」），
   类名与模板中的 <p class="nw-soft"> 一并移除，不留死规则。
   历史形态备查：扁平浅带 / 12px 圆角 / 14px 20px 内边距 / #f8fafd 底 / 无描边，
   与列表页 cta-band 的「圆角卡片 + 描边 + 光斑 + 193px 高」形态不一致，故弃用。
   ★ 若日后又要恢复细条，直接在 article/index.html 内重建即可，这里不再保留规则，
     避免「样式存在但无人引用」的误导。 */

/* ---------- 20.2 产品 · 决策型（pd-*） ---------- */
.detail-product { --detail-col: 1640px; } /* 2026-09-19：版心对齐 .wrap 内容盒，与头部导航左右对齐 */

/* 决策首屏：深蓝渐变底，左「名 / 定位 / 价格 / 转化」、右产品实拍图，下方一条规格亮点带。
   产品名、价格、询价入口同屏出现 —— 这是三类版式里唯一把「转化按钮」放进首屏的。 */
/* 只写垂直 padding —— 水平 padding 由主题的「全出血补偿」统一提供（见 5.3 节开头）。
   若这里写成 `padding: 46px 0 0` 简写，会把水平 padding 归零、负 margin 失去抵消，
   .pd-hero-in 会被整体推到视口左缘之外。 */
.pd-hero { background: linear-gradient(135deg, #0c1a32 0%, #22262c 56%, #22262c 100%); padding-top: 46px; }
.pd-hero-in { max-width: var(--detail-col); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 44px; align-items: center; }
/* 首屏文案统一加 .detail-product 前缀：基础层 `.detail h1` (0,1,1) 会压掉纯类选择器，
   产品名会因此被染成深色（在深蓝底上直接看不见）。 */
.detail-product .pd-eyebrow { margin: 0 0 12px; font-size: 12.5px; font-weight: 600; letter-spacing: 2px; color: #d42633; }
.detail-product .pd-title { margin: 0 0 14px; font-size: clamp(26px, 2.2vw + 16px, 38px); line-height: 1.34; letter-spacing: .3px; color: #fff; }
.detail-product .pd-sub { margin: 0 0 20px; max-width: 620px; font-size: 15.5px; line-height: 1.9; color: rgba(255, 255, 255, .78); }
.detail-product .pd-price { display: flex; align-items: baseline; gap: 10px; margin: 0 0 22px; }
.detail-product .pd-price b { font-size: 34px; font-weight: 700; letter-spacing: .5px; color: #ffd166; }
.detail-product .pd-price span { font-size: 13px; color: rgba(255, 255, 255, .58); }
.detail-product .pd-cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }
.pd-hero-media { position: relative; overflow: hidden; margin: 0; aspect-ratio: 4 / 3; border-radius: 16px; border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .06); }
.pd-hero-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pd-hero-points { max-width: var(--detail-col); margin: 30px auto 0; display: flex; flex-wrap: wrap; gap: 14px 40px; list-style: none; padding: 18px 0 22px; border-top: 1px solid rgba(255, 255, 255, .14); }
.pd-hero-points li { display: flex; align-items: baseline; gap: 9px; font-size: 14px; }
.pd-hero-points li span { color: rgba(255, 255, 255, .56); }
.pd-hero-points li b { color: #fff; font-weight: 600; }

/* 主体：左模块化正文 / 右吸附报价卡 */
.pd-wrap { max-width: var(--detail-col); margin: 0 auto; padding: 34px 0 64px; }
.pd-cols { display: grid; grid-template-columns: minmax(0, 1fr) 328px; gap: 40px; align-items: start; }
/* 无主内容时的降级版式（2026-09-20）：老站的产品页只有图、没有正文说明，
   主列六块全空。此时不给空的主列留位，改成单列并把询价卡收窄居中，
   否则会出现「左边一大片空白 + 右边一张小卡片」的失衡版式。 */
.pd-cols.pd-cols-solo { grid-template-columns: minmax(0, 1fr); justify-items: center; }
.pd-cols.pd-cols-solo .pd-rail { width: 100%; max-width: 560px; }
.pd-main { min-width: 0; }
.pd-sec { margin: 0 0 18px; padding: 24px 28px 22px; background: #fff; border: 1px solid var(--line); border-radius: 16px; }
.pd-h2 { margin: 0 0 16px; padding-left: 12px; border-left: 4px solid var(--pri); font-size: 19px; line-height: 1.5; color: var(--ink); }
.pd-sec .content { font-size: 15.5px; line-height: 2; }
.pd-sec .content > p { margin: 0 0 16px; }

/* 清单：勾（承诺 / 包含）与圆点（场景）两种记号 */
.pd-list { list-style: none; margin: 0; padding: 0; }
.pd-list li { position: relative; padding: 7px 0 7px 26px; font-size: 15px; line-height: 1.85; color: #3d4147; }
.pd-list-tick li::before { content: ""; position: absolute; left: 3px; top: 14px; width: 8px; height: 5px; border-left: 2px solid var(--pri); border-bottom: 2px solid var(--pri); transform: rotate(-45deg); }
.pd-list-dot li::before { content: ""; position: absolute; left: 6px; top: 16px; width: 5px; height: 5px; border-radius: 50%; background: var(--pri); }

/* 常见问题：原生 details 手风琴，零 JS */
.pd-faq-item { margin: 0 0 10px; background: #fcfdff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.pd-faq-item summary { position: relative; padding: 14px 46px 14px 18px; font-size: 15px; font-weight: 600; color: var(--ink); cursor: pointer; list-style: none; }
.pd-faq-item summary::-webkit-details-marker { display: none; }
.pd-faq-item summary::after { content: "+"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); font-size: 18px; color: var(--pri); }
.pd-faq-item[open] summary { border-bottom: 1px solid var(--line); }
.pd-faq-item[open] summary::after { content: "−"; }
.pd-faq-item p { margin: 0; padding: 14px 18px 16px; font-size: 14.5px; line-height: 1.95; color: var(--muted); }

/* 参数表：斑马纹 + 整行悬停高亮（决策型特有的"查表"手感） */
.detail-product .spec tbody tr:nth-child(even) { background: #fafbfc; }
.detail-product .spec tbody tr:hover { background: #fdf1f2; }

/* 吸附报价卡 */
.pd-rail { position: sticky; top: var(--stick-top); }
/* 2026-09-21：卡面原是淡蓝 #f7faff（全站最后一处蓝调块，产品详情右栏），换成色板浅粉 --blue-100，
   与它本就有的浅粉描边 #f8e2e4 同调；卡内 --muted 灰字在 #fdf2f3 上 4.56:1，仍过 AA。 */
.pd-rail-card { background: linear-gradient(180deg, var(--blue-100, #fdf2f3), #fff); border: 1px solid #f8e2e4; border-radius: 16px; padding: 22px; box-shadow: 0 10px 28px rgba(212, 38, 51, .07); }
.pd-rail-t { margin: 0 0 6px; font-size: 16px; font-weight: 700; color: var(--ink); }
.pd-rail-price { display: flex; align-items: baseline; gap: 6px; margin: 0 0 10px; }
.pd-rail-price b { font-size: 24px; color: var(--pri); }
.pd-rail-price span { font-size: 12.5px; color: var(--muted); }
.pd-rail-d { margin: 0 0 16px; font-size: 13px; line-height: 1.7; color: var(--muted); }
.pd-rail-btns { margin: 0 0 14px; display: flex; flex-direction: column; gap: 10px; }
.pd-rail-btns .btn-pri, .pd-rail-btns .btn-ghost, .pd-rail-btns .btn-line { display: block; margin: 0; text-align: center; padding: 11px 16px; border-radius: 10px; text-decoration: none; font-weight: 600; }
.pd-rail-wx { margin: 0 0 14px; font-size: 13px; color: var(--muted); }
.pd-rail-wx b { color: var(--ink); }
.pd-rail-kv { list-style: none; margin: 0; padding: 14px 0 0; border-top: 1px dashed #f8e2e4; }
.pd-rail-kv li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 6px 0; font-size: 13px; }
.pd-rail-kv li span { flex: none; color: var(--muted); }
.pd-rail-kv li b { color: var(--ink); font-weight: 600; text-align: right; }

/* 窄屏常驻询价条（默认隐藏，宽屏由右侧报价卡承担这个角色；显示规则见 20.6） */
.pd-stickybar { display: none; }

/* ---------- 20.3 案例 · 说服型（cs-*） ---------- */
.detail-case { --detail-col: 1640px; } /* 2026-09-19：版心对齐 .wrap 内容盒，与头部导航左右对齐 */

/* 实景图带：用案例自己的图铺底，标题 / 客户画像 / 效果数据全部压在图上 —— 案例页的「证据第一屏」 */
/* 竖向 padding 交给内层 .e-hero-case-in；水平 padding 仍由 .e-hero 的
   「全出血补偿」提供，不要在这里清零（否则内容溢出视口左边缘） */
.e-hero-case { padding-top: 0; padding-bottom: 0; background: #0b1730; }
.e-hero-case::before { content: none; }
.e-hero-case::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(12, 13, 16, .58) 0%, rgba(12, 13, 16, .52) 46%, rgba(12, 13, 16, .88) 100%);
}
.e-hero-case-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.e-hero-case-in { position: relative; z-index: 2; padding: 92px 0 64px; }
.e-hero-case .e-eyebrow { margin: 0 0 10px; }
/* 案例标题同样要带 .detail-case 前缀：基础层 `.e-hero h1` (0,1,1) 会压掉纯类选择器。
   （它恰好把标题设成白色，所以看起来"没坏"，但字号会变成 46px 而不是这里的 44px。） */
.detail-case .e-hero-h1 { margin: 0 0 14px; font-size: clamp(28px, 3.4vw, 44px); line-height: 1.28; letter-spacing: .5px; color: #fff; text-shadow: 0 2px 20px rgba(12, 13, 16, .45); }

/* 客户画像：脱敏客户名 + 行业 / 规模 / 周期（缺项不渲染，不编造客户信息） */
.cs-profile { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin: 18px 0 0; }
.cs-profile-name { padding: 5px 15px; border-radius: 999px; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .28); color: #fff; font-size: 13.5px; font-weight: 600; }
.cs-profile-i { font-size: 13.5px; color: rgba(255, 255, 255, .80); }
.cs-profile-i i { font-style: normal; margin-right: 6px; color: rgba(255, 255, 255, .52); }

.c-hero-stats { display: flex; flex-wrap: wrap; gap: 14px 18px; list-style: none; margin: 26px 0 0; padding: 0; }
.c-hero-stats li { min-width: 150px; padding: 14px 22px; border-radius: 14px; background: rgba(255, 255, 255, .10); border: 1px solid rgba(255, 255, 255, .20); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.c-hero-stats b { display: block; font-size: 26px; line-height: 1.2; color: #fff; }
.c-hero-stats span { display: block; margin-top: 4px; font-size: 12.5px; color: rgba(255, 255, 255, .80); }

/* 主体 */
.cs-wrap { max-width: var(--detail-col); margin: 0 auto; padding: 34px 0 64px; }
.cs-card { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 38px 44px 34px; }

/* 服务内容：胶囊标签带（案例涉及的服务项，先给个范围感） */
.cs-services { margin: 0 0 30px; padding: 16px 20px; background: #f7faff; border-radius: 14px; }
.cs-services-t { margin: 0 0 10px; font-size: 12.5px; font-weight: 700; letter-spacing: 2px; color: var(--muted); }
.cs-services-list { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.cs-services-list li { padding: 6px 14px; border-radius: 999px; background: #fff; border: 1px solid #f8e2e4; color: #22262c; font-size: 13.5px; }

/* 叙事链：编号圆点 + 竖线串成时间轴 —— 案例页的核心结构，
   既不像文章页的线性阅读，也不像产品页的模块并列。 */
.cs-chain { margin: 0; }
.cs-step { position: relative; padding: 0 0 30px 60px; }
.cs-step::before { content: ""; position: absolute; left: 17px; top: 38px; bottom: 6px; width: 2px; background: linear-gradient(180deg, #e0e2e6, #eef4fd); }
.cs-step:last-child { padding-bottom: 6px; }
.cs-step:last-child::before { content: none; }
.cs-step-n { position: absolute; left: 0; top: 0; width: 36px; height: 36px; border-radius: 50%; background: var(--pri); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; letter-spacing: .5px; box-shadow: 0 6px 16px rgba(212, 38, 51, .24); }
.cs-step-t { margin: 0 0 12px; padding-top: 4px; font-size: 20px; line-height: 1.5; color: var(--ink); }
.cs-step-p { margin: 0; font-size: 15.5px; line-height: 2; color: #3d4147; }
.cs-step .pd-list li { font-size: 15.5px; }

/* 客户证言（案例页最有说服力的一块，没填就不出现） */
.cs-quote { margin: 26px 0 4px; padding: 24px 28px; background: linear-gradient(135deg, var(--blue-50), var(--blue-100)); border-left: 4px solid var(--pri); border-radius: 0 14px 14px 0; }
.cs-quote-t { margin: 0 0 12px; font-size: 17px; line-height: 1.95; color: #1e2f4d; }
.cs-quote-c { font-style: normal; font-size: 13.5px; color: var(--muted); }

/* 补充正文：与叙事链用虚线分隔，明确「这是补充说明，不是主线」 */
.cs-note { margin: 28px 0 0; padding-top: 26px; border-top: 1px dashed var(--line); }
.cs-note .content { font-size: 15.5px; line-height: 2; color: #3d4147; }
.cs-note .content > p { margin: 0 0 16px; }

/* ---------- 20.4 三种版式共用：hero 内文 / 面包屑 / 主体对齐到同一条「内容列」 ----------
   背景：主题的「全出血」规则（见 5.3 节第 1 条）用负 margin 把 .e-hero 拉满视口，再用
   **等值** padding 把内文推回 .wrap 的内容边缘 —— 负 margin 与水平 padding 是一对，缺一不可。
   这里在等值 padding（50vw - 50%）之上再叠加「内容列居中的偏移量」，让 hero 内文与主体
   左右对齐，整页只剩一条竖线。绝不能用固定 px 覆盖水平 padding（会抵消失配对的负 margin，
   内容被推出视口左缘，h1 被截断）。
   注意：下方两条 padding 必须与 5.3 节基础规则的 bleed 量严格一致；若基础规则改了出血量，
   这里要同步改，否则文章/案例详情页 hero 的内文会偏出内容列一条 --pad 的距离。
   注：产品页首屏是 .pd-hero，它已并入 5.3 节的全出血选择器（自身 max-width 居中定位内文）。 */
@media (min-width: 861px) {
  .detail-news .e-hero, .detail-case .e-hero {
    padding-left: calc(50vw - 50% + max(0px, (100% - var(--detail-col)) / 2));
    padding-right: calc(50vw - 50% + max(0px, (100% - var(--detail-col)) / 2));
  }
}
/* cqi 根治版（与 5.3 节基础出血规则配对，说明见该处） */
@supports (container-type: inline-size) {
  @media (min-width: 861px) {
    .detail-news .e-hero, .detail-case .e-hero {
      padding-left: calc(50cqi - 50% + max(0px, (100% - var(--detail-col)) / 2));
      padding-right: calc(50cqi - 50% + max(0px, (100% - var(--detail-col)) / 2));
    }
  }
}
/* 面包屑同上一条竖线（宽屏旧规则已把面包屑豁免，这里按内容列居中） */
.detail-news > nav.breadcrumb,
.detail-product > nav.breadcrumb,
.detail-case > nav.breadcrumb {
  max-width: var(--detail-col); margin-left: auto; margin-right: auto;
}

/* ---------- 20.5 文末转化块（产品 / 案例各一套，文章页刻意没有这一块） ---------- */
.pd-final, .cs-final { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; margin: 26px auto 0; padding: 26px 30px; border-radius: 16px; max-width: var(--detail-col); }
/* 背景与首页转化 CTA 区（16.6）统一：浅蓝渐变 + 细边 + 轻阴影，文字改深色 */
.pd-final, .cs-final { background: linear-gradient(135deg, var(--blue-50) 0%, var(--blue-100) 100%); border: 1px solid var(--blue-200); box-shadow: 0 8px 24px rgba(212, 38, 51, .08); }
.pd-final-text, .cs-final-text { min-width: 260px; }
.pd-final-t, .cs-final-t { margin: 0 0 6px; font-size: 18px; font-weight: 700; color: var(--ink); }
.pd-final-text p:last-child, .cs-final-text p:last-child { margin: 0; font-size: 14px; line-height: 1.7; color: var(--muted); }
.pd-final-btns, .cs-final-btns { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
.pd-final-btns a, .cs-final-btns a { margin: 0; padding: 11px 22px; border-radius: 10px; font-size: 14px; font-weight: 600; text-decoration: none; }
.pd-final-wx, .cs-final-wx { flex: 1 1 100%; margin: 0; font-size: 13px; color: var(--muted); }
.pd-final-wx b, .cs-final-wx b { color: var(--pri); }

/* ---------- 20.6 移动端：一律单列，吸附元素退回文档流 ---------- */
@media (max-width: 1080px) {
  .pd-hero-in { grid-template-columns: minmax(0, 1fr) 300px; gap: 30px; }
  .pd-cols { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .pd-rail { position: static; }
}
@media (max-width: 960px) {
  .nw-wrap, .pd-wrap, .cs-wrap { max-width: none; padding-left: 16px; padding-right: 16px; }
  .nw-card { padding: 28px 22px 26px; }
  .cs-card { padding: 26px 22px 24px; }
  .pd-hero-in { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .pd-hero-media { order: -1; aspect-ratio: 16 / 10; }
  .nw-title { font-size: 24px; }
}
@media (max-width: 720px) {
  .e-hero-case-in { padding: 56px 0 40px; }
  .c-hero-stats li { flex: 1 1 calc(50% - 9px); min-width: 0; }
  .detail-news .e-hero-mini { padding-top: 18px; padding-bottom: 16px; }
  /* 手机端目录：限高 + 内部滚动。窄屏下目录不是侧栏而是正文顶部的普通块，
     一条 9 级目录能把首屏内容整段顶下去（用户要滚一屏才见到正文）。 */
  .content > .toc-box { max-height: 200px; overflow-y: auto; }
  /* 详情页移动端留白收拢（2026-09-20）：外层 .wrap 已有 16px 边距，
     nw/pd/cs 中间容器与 .p-related 不再叠加左右 padding（此前学院/案例
     详情 16+16+22=55px/边，430px 屏正文只剩 320px）；卡片自身内边距也收窄。 */
  .nw-wrap, .pd-wrap, .cs-wrap, .p-related { padding-left: 0; padding-right: 0; }
  .nw-card, .cs-card { padding-left: 14px; padding-right: 14px; }
  /* 上下篇 / 继续阅读 / 叙事链在窄屏收成单列 */
  .nw-nav { grid-template-columns: 1fr; }
  .nw-nav-a.next { text-align: left; }
  .nw-rel-list a { flex-direction: column; gap: 4px; }
  .cs-step { padding-left: 46px; }
  .cs-step-n { width: 30px; height: 30px; font-size: 12px; }
  .cs-step::before { left: 14px; top: 32px; }
  .pd-hero-points { gap: 10px 22px; }
  .pd-final, .cs-final { flex-direction: column; align-items: stretch; padding: 22px 20px; }
  .pd-final-text, .cs-final-text { min-width: 0; }
  .pd-final-btns a, .cs-final-btns a { flex: 1 1 100%; text-align: center; }
}
/* 窄屏底部常驻询价条：滚到哪儿都能一键联系（宽屏不显示，由右侧报价卡承担） */
@media (max-width: 860px) {
  .pd-stickybar { display: flex; align-items: center; justify-content: space-between; gap: 14px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, .97); border-top: 1px solid var(--line);
    box-shadow: 0 -6px 20px rgba(22, 24, 29, .08);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
  .pd-sb-price { display: flex; align-items: baseline; gap: 4px; margin: 0; }
  .pd-sb-price b { font-size: 19px; color: var(--pri); }
  .pd-sb-price span { font-size: 12px; color: var(--muted); }
  .pd-sb-btns { display: flex; gap: 10px; margin: 0; }
  .pd-sb-btns a { margin: 0; padding: 10px 18px; border-radius: 999px; font-size: 13.5px; font-weight: 600; text-decoration: none; }
  .detail-product .pd-wrap { padding-bottom: 96px; }
}

/* ============================================================
21. 三种栏目列表页独立版式（2026-09-19 信息架构级重做）
   原先三套列表模板共用同一副骨架（.list-page > .e-hero + .e-feature + .grid），
   换的只是类名和文案，所以「案例列表和文章列表长得一模一样」。
   现在按访客意图拆开，骨架互不复用 —— 三条轴同时不同：

     ① 文章 = 资讯流（nl-*）  深色转化头带？否 → 浅色细条 ＋ 站内搜索
                              结构：无侧栏 · 日期块主导的行式条目 · 密度优先
                              收尾：弱转化细条（读的人不该被大 CTA 拦住）
     ② 产品 = 货架（ps- 与 shelf- 前缀）深色转化头带 ＋ 左侧筛选栏
                              结构：左栏 ＋ 参数/价格网格 · 让人不点进详情就能筛掉一半
                              收尾：强转化（四路出口）
     ③ 案例 = 作品墙（cw-*）  实景图头带（底图取本页第一个案例的真实项目图）
                              结构：无侧栏 · 大图墙 · 行业标签叠图上 · 效果数据排卡面
                              收尾：同款方案（与案例详情页文末同族）

   列数 / 方向 / 主导元素三者都不同：无栏-左栏-无栏；行-格-墙；日期-参数-图片。
   样式统一放文件末尾：同权重时后写的生效，不去动前面的历史规则（回滚只需删掉本节）。
============================================================ */

/* ---------- 21.1 文章 = 资讯流（nl-*） ---------- */

/* 头带浅色化：覆盖 14.2 / 16.2 两处深色大图规则（本节在文件末尾，同权重后写者胜） */
.nl-hero {
  background: linear-gradient(180deg, var(--blue-50) 0%, var(--blue-100) 100%);
  border-bottom: 1px solid var(--line);
  padding-top: 32px; padding-bottom: 30px;
}
.nl-hero::before, .nl-hero::after { content: none; }
.nl-hero h1 { color: var(--ink); text-shadow: none; font-size: clamp(26px, 3vw, 40px); }
.nl-hero .e-eyebrow { color: var(--pri); }
.nl-hero .e-eyebrow::before { background: var(--pri); }
.nl-hero .e-desc { color: var(--muted); font-size: 15px; }
.nl-count { margin: 18px 0 0; font-size: 13.5px; color: var(--muted); }
.nl-count b { font-size: 17px; font-weight: 800; color: var(--pri); }

/* 站内搜索：资讯站的核心动作是「找」，把它放到头带里，访客不必去翻分页 */
.nl-search { display: flex; gap: 10px; max-width: 520px; margin: 20px 0 0; }
.nl-search input {
  flex: 1 1 auto; min-width: 0; height: 44px; padding: 0 16px;
  border: 1px solid var(--line); border-radius: 10px; background: #fff;
  font-size: 14.5px; color: var(--ink); font-family: inherit;
}
.nl-search input::placeholder { color: #9aa0a6; }
.nl-search input:focus { outline: none; border-color: var(--pri); box-shadow: 0 0 0 3px rgba(212, 38, 51, .12); }
.nl-search button {
  flex: 0 0 auto; height: 44px; padding: 0 24px; border: 0; border-radius: 10px;
  background: linear-gradient(180deg, #e03642, #d42633); color: #fff;
  font-size: 14.5px; font-weight: 600; font-family: inherit; cursor: pointer;
  transition: background .18s ease;
}
.nl-search button:hover { background: linear-gradient(180deg, #c2222d, #b01c28); }

.nl-body { padding: 26px 0 10px; }

/* 行式条目：日期块 → 文字 → 缩略图。密度是这套版式的第一目标。 */
.nl-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.nl-item { border-bottom: 1px solid var(--line); }
.nl-link {
  display: grid; grid-template-columns: 74px minmax(0, 1fr) 168px;
  gap: 26px; align-items: center; padding: 22px 6px;
  text-decoration: none; color: inherit; transition: background .18s ease;
}
/* 2026-09-21：行 hover 底色由旧蓝调 #f7faff 换成色板浅粉 #fdf2f3（全站浅色已改灰→粉，见 16.1 / 43 层）。
   底色的规则本体已挪到文件末 44 层，与左缘竖条、缩略图放大一起用 @media (hover: hover) 包住 —— 
   触屏点一下会「粘住」hover 态，资讯流一行高 162px，粘住整行变粉很难看。 */

.nl-date { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 0; }
.nl-date b { font-size: 25px; font-weight: 800; line-height: 1; letter-spacing: .5px; color: var(--pri); font-variant-numeric: tabular-nums; }
.nl-date span { font-size: 11.5px; letter-spacing: .4px; color: var(--muted); font-variant-numeric: tabular-nums; }

.nl-body-in { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.nl-flags { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 12.5px; color: var(--muted); }
.nl-time { display: none; }
/* desktop 保持「标签 → 标题 → 摘要」的视觉顺序；移动端再翻转为「标题 → 标签/日期 → 摘要」 */
.nl-flags { order: -1; }
.nl-title { order: 0; }
.nl-badge {
  font-style: normal; padding: 2px 10px; border-radius: 999px;
  background: rgba(212, 38, 51, .10); color: var(--pri);
  font-size: 11.5px; font-weight: 700; letter-spacing: .5px;
}
.nl-title {
  font-size: 18px; font-weight: 700; line-height: 1.55; color: var(--ink);
  transition: color .18s ease;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.nl-link:hover .nl-title { color: var(--pri); }
.nl-desc {
  font-size: 14px; line-height: 1.85; color: var(--muted);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.nl-thumb {
  display: block; aspect-ratio: 16 / 10; border-radius: 12px; overflow: hidden;
  background: linear-gradient(135deg, #f0f1f3, #f7f8fa);
}
.nl-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.nl-ph { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: #c9ccd1; }
.nl-ph svg { width: 30px; height: 30px; }

/* 头条行：图更大、标题更大，给资讯流一个视觉入口 */
.nl-item-top .nl-link { grid-template-columns: 74px minmax(0, 1fr) 300px; padding: 28px 6px; }
.nl-item-top .nl-title { font-size: 22px; }
.nl-item-top .nl-desc { -webkit-line-clamp: 3; font-size: 14.5px; }

/* 弱转化细条：与文章详情页的「弱转化」人格保持一致 */
/* 22.4 资讯线收尾（nl-cta 于 2026-09-21 停用）
   ------------------------------------------------------------
   这一组原是门窗学院列表页（category/index.html）的「扁平细带」收尾，现已改用全站统一的
   .cta-band（圆角卡片），因为同站并存两种收尾形态会让访客困惑。
   规则保留仅为兼容历史模板，当前无模板引用 .nl-cta / .nl-cta-t / .nl-cta-p / .nl-cta-btns。
   ★ 但 .nl-cta-in 不可单独删除：它在 3130 / 3137 / 4489 行与 .cw-final / .cs-final 同组共用，
     删掉会连带影响招商加盟与客户案例页的收尾块。 */
.nl-cta { margin: 36px 0 0; }
.nl-cta-in {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 14px 28px; padding: 20px 26px;
  background: #f7faff; border: 1px solid #e2ecfb; border-radius: 14px;
}
.nl-cta-in > div { min-width: 240px; }
.nl-cta-t { margin: 0 0 5px; font-size: 16.5px; font-weight: 700; color: var(--ink); }
.nl-cta-p { margin: 0; font-size: 13.8px; line-height: 1.7; color: var(--muted); }
.nl-cta-btns { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
.nl-cta-btns a { margin: 0; padding: 10px 22px; border-radius: 999px; font-size: 13.8px; font-weight: 600; text-decoration: none; }

/* ---------- 21.2 产品 = 货架（ps-* / shelf-*） ---------- */
.ps-page .cat-layout { margin-top: 26px; }
.cat-layout-plain { grid-template-columns: minmax(0, 1fr); }

.ps-bar {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 6px 20px; margin: 0 0 16px; padding: 0 2px 12px; border-bottom: 1px solid var(--line);
}
.ps-bar-n { font-size: 14px; color: var(--muted); }
.ps-bar-n b { font-size: 19px; font-weight: 800; color: var(--ink); }
.ps-bar-hint { font-size: 12.8px; color: #979ba1; }

.shelf-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(272px, 1fr));
  gap: 22px; list-style: none; margin: 0; padding: 0;
}
.shelf-card {
  display: flex; min-width: 0; overflow: hidden;
  background: #fff; border: 1px solid #e8edf4; border-radius: 16px;
  box-shadow: 0 2px 10px rgba(22, 24, 29, .05);
  transition: transform .26s ease, box-shadow .26s ease, border-color .26s ease;
}
.shelf-card:hover { box-shadow: 0 14px 32px rgba(22, 24, 29, .10); border-color: #dfe1e5; }
.shelf-card > a { display: flex; flex-direction: column; width: 100%; color: inherit; text-decoration: none; }

.shelf-media { display: block; position: relative; height: 176px; overflow: hidden; background: linear-gradient(135deg, #f0f1f3, #f7f8fa); }
.shelf-media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.22, .61, .36, 1); }
.shelf-card:hover .shelf-media img { transform: scale(1.035); }

.shelf-body { display: flex; flex-direction: column; flex: 1; gap: 10px; padding: 16px 18px 18px; }
.shelf-title {
  font-size: 16.5px; font-weight: 700; line-height: 1.5; color: var(--ink);
  transition: color .18s ease;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.shelf-card:hover .shelf-title { color: var(--pri); }
.shelf-price { font-size: 18px; font-weight: 800; letter-spacing: .3px; color: var(--price); }
.shelf-price-todo { font-size: 15px; font-weight: 600; color: var(--muted); }

/* 参数行：货架的signature —— 把 spec 摊开在卡面上，这是「比规格」而非「看故事」 */
.shelf-specs {
  list-style: none; margin: 0; padding: 12px 0 0;
  border-top: 1px dashed var(--line); display: grid; gap: 7px;
}
.shelf-specs li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 12.8px; line-height: 1.6; }
.shelf-specs li b { flex: 0 0 auto; font-weight: 500; color: #8f939a; }
.shelf-specs li span { min-width: 0; text-align: right; font-weight: 600; color: #3d4147; }
.shelf-desc {
  font-size: 13px; line-height: 1.75; color: var(--muted);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* ---------- 21.3 案例 = 作品墙（cw-*） ---------- */
/* 实景图头带：底图是本页第一个案例的真实项目图（不是通用素材图） */
.cw-hero { background: #0b1730; padding-top: 0; padding-bottom: 0; }
.cw-hero::before { content: none; }
.cw-hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  /* 必须显式把宽高改回 auto —— 基础层 .e-hero::after 写死了 width/height:340px，
     只给 inset:0 无法撤销它（left+right+width 三者都非 auto 时 right 被忽略），
     结果会画出 340×340 的小方块而不是整幅遮罩。 */
  width: auto; height: auto;
  background: linear-gradient(180deg, rgba(12, 13, 16, .62) 0%, rgba(12, 13, 16, .55) 48%, rgba(12, 13, 16, .90) 100%);
}
.cw-hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.cw-hero-in { position: relative; z-index: 2; padding: 74px 0 58px; }
.cw-hero .e-eyebrow { margin: 0 0 10px; }
/* 标题带 .cw-hero 前缀：基础层 `.e-hero h1` (0,1,1) 会压掉纯类选择器 */
.cw-hero .cw-hero-h1 { margin: 0 0 14px; font-size: clamp(28px, 3.4vw, 44px); line-height: 1.28; letter-spacing: .5px; color: #fff; text-shadow: 0 2px 20px rgba(12, 13, 16, .45); }

.cw-body { padding: 26px 0 10px; }
.cw-wall { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; }
.cw-card {
  display: flex; flex-direction: column; min-width: 0; overflow: hidden;
  background: #fff; border: 1px solid #e8edf4; border-radius: 18px;
  text-decoration: none; color: inherit; box-shadow: 0 2px 10px rgba(22, 24, 29, .05);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.cw-card:hover { box-shadow: 0 18px 40px rgba(22, 24, 29, .12); border-color: #dfe1e5; }
.cw-card-lead { grid-column: 1 / -1; }

.cw-media { display: block; position: relative; height: 240px; overflow: hidden; background: linear-gradient(135deg, #f0f1f3, #f7f8fa); }
.cw-card-lead .cw-media { height: 310px; }
.cw-media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.22, .61, .36, 1); }
.cw-card:hover .cw-media img { transform: scale(1.03); }
.cw-ph { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: #c9ccd1; }
.cw-ph svg { width: 44px; height: 44px; }
.cw-tag {
  position: absolute; left: 14px; top: 14px; z-index: 2;
  font-style: normal; padding: 5px 13px; border-radius: 999px;
  background: rgba(255, 255, 255, .94); color: var(--pri);
  font-size: 12px; font-weight: 700; letter-spacing: .5px;
  box-shadow: 0 4px 14px rgba(22, 24, 29, .14);
}
.cw-pin {
  position: absolute; right: 14px; top: 14px; z-index: 2;
  font-style: normal; padding: 5px 13px; border-radius: 999px;
  background: rgba(212, 38, 51, .94); color: #fff;
  font-size: 12px; font-weight: 700; letter-spacing: 1.4px;
  box-shadow: 0 4px 12px rgba(212, 38, 51, .35);
}

.cw-cap { display: flex; flex-direction: column; flex: 1; gap: 10px; padding: 20px 22px 22px; }
.cw-client { font-size: 12.8px; letter-spacing: .4px; color: var(--muted); }
.cw-title {
  font-size: 17.5px; font-weight: 700; line-height: 1.55; color: var(--ink);
  transition: color .18s ease;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cw-card-lead .cw-title { font-size: 20px; }
.cw-card:hover .cw-title { color: var(--pri); }

/* 效果数据：案例卡面上最有说服力的一块（取自 spec 的「指标: 结果」） */
.cw-stats { display: flex; flex-wrap: wrap; gap: 10px; }
.cw-stat {
  display: flex; flex-direction: column; gap: 3px; min-width: 104px;
  padding: 10px 14px; border-radius: 11px;
  background: #f5f6f8; border: 1px solid #e2ecfb;
}
.cw-stat b { font-size: 16px; font-weight: 800; line-height: 1.25; color: var(--pri); }
.cw-stat i { font-style: normal; font-size: 11.8px; color: #85898f; }
.cw-desc {
  font-size: 13.5px; line-height: 1.8; color: var(--muted);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cw-more { margin-top: auto; font-size: 13.2px; font-weight: 700; color: var(--pri); }

.cw-final { margin: 34px 0 0; }
.cw-final-in {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 18px; padding: 26px 30px; border-radius: 16px;
  background: linear-gradient(135deg, #0b1730, #22262c);
}
.cw-final-text { min-width: 260px; }
.cw-final-t { margin: 0 0 6px; font-size: 18px; font-weight: 700; color: #fff; }
.cw-final-text p:last-child { margin: 0; font-size: 14px; line-height: 1.7; color: rgba(255, 255, 255, .72); }
.cw-final-btns { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
.cw-final-btns a { margin: 0; padding: 11px 22px; border-radius: 10px; font-size: 14px; font-weight: 600; text-decoration: none; }

/* ---------- 21.4 三套列表版式的响应式收口 ---------- */
@media (max-width: 1080px) {
  .nl-link, .nl-item-top .nl-link { grid-template-columns: 70px minmax(0, 1fr) 220px; gap: 20px; }
}
@media (max-width: 860px) {
  .nl-link, .nl-item-top .nl-link { grid-template-columns: minmax(0, 1fr) 92px; gap: 14px; padding: 18px 2px; }
  .nl-thumb { aspect-ratio: 1 / 1; border-radius: 10px; }
  .nl-title, .nl-item-top .nl-title { font-size: 16.5px; order: -1; }
  .nl-flags { order: 0; }
  .nl-time { display: inline; color: var(--muted); font-size: 12px; }
  .nl-desc, .nl-item-top .nl-desc { -webkit-line-clamp: 2; font-size: 13.4px; }
  .nl-date { display: none; }
  .nl-search { max-width: none; }
  .nl-cta-in { padding: 18px 20px; }
  .nl-cta-in > div { min-width: 0; }

  .shelf-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
  .shelf-media { height: 150px; }

  .cw-wall { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .cw-media { height: 210px; }
  .cw-card-lead .cw-media { height: 230px; }
  .cw-hero-in { padding: 52px 0 44px; }
  .cw-final-in { padding: 22px 20px; }
  .cw-final-text, .cw-final-btns a { min-width: 0; }
}
@media (max-width: 560px) {
  .nl-desc, .nl-item-top .nl-desc { display: none; }
  /* ★2026-09-22：缩略图列 80 → 88px（与 ≤860 档的 92px 更连续，方图更饱满）。
     393 实测正文列 251→243px，标题仍是 2 行、行数不变；320 小屏 178→170px 也仍容得下。 */
  .nl-link, .nl-item-top .nl-link { grid-template-columns: minmax(0, 1fr) 88px; gap: 12px; }
  .nl-title, .nl-item-top .nl-title { order: -1; }
  .nl-flags { order: 0; }
  .nl-time { display: inline; color: var(--muted); font-size: 12px; }
  .nl-date { display: none; }
  .nl-thumb { border-radius: 8px; }
  .nl-cta-btns a { flex: 1 1 100%; text-align: center; }
  .cw-stat { min-width: 88px; padding: 8px 11px; }
  .cw-final-btns a { flex: 1 1 100%; text-align: center; }
  .shelf-body { padding: 14px 14px 16px; }
}



/* ============ 20. 栏目 hero 浅色化 + 高度统一 + 封面图交互自然化（2026-09-19） ============ */

/* 20.1 非首页 hero 统一高度：内容垂直居中（文章详情 mini 头部除外） */
.e-hero, .pd-hero {
  min-height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.detail-news .e-hero-mini { min-height: 0; display: block; }
@media (max-width: 720px) {
  .e-hero, .pd-hero { min-height: 220px; }
  .detail-news .e-hero-mini { min-height: 0; }
}

/* 20.2 列表/单页 hero：深色大图 → 浅色遮罩提亮（首页深色 hero 保留不动） */
.e-hero, .e-hero-page {
  background:
    linear-gradient(180deg, rgba(238, 244, 255, .90) 0%, rgba(246, 250, 255, .84) 55%, rgba(232, 240, 253, .94) 100%),
    url('/uploads/site/hero-list-2026.webp') center / cover no-repeat;
  background-size: cover;
}
.e-hero-page {
  background:
    linear-gradient(180deg, rgba(238, 244, 255, .90) 0%, rgba(246, 250, 255, .84) 55%, rgba(232, 240, 253, .94) 100%),
    url('/uploads/site/hero-page.webp') center / cover no-repeat;
  background-size: cover;
}

/* 20.3 hero 内文字恢复浅色系配色（白字 → 深字，可读性在浅底上成立） */
.e-hero h1, .e-hero-page h1, .detail-case .e-hero-h1, .cw-hero .cw-hero-h1 { color: var(--ink); text-shadow: none; }
.e-hero .e-eyebrow, .e-hero-page .e-eyebrow, .cw-hero .e-eyebrow { color: var(--pri); }
.e-hero .e-eyebrow::before, .e-hero-page .e-eyebrow::before, .cw-hero .e-eyebrow::before { background: var(--pri); }
.e-hero .e-desc, .e-hero-page .e-desc, .cw-hero .e-desc { color: var(--text); }
.e-hero .e-meta, .e-hero-page .e-meta { color: var(--muted); }
.e-hero .e-meta b, .e-hero-page .e-meta b { color: var(--ink); }
.e-hero .e-num, .e-hero-page .e-num { color: var(--pri); }
.e-hero .e-crumb, .e-hero-page .e-crumb { color: var(--muted); }
.e-hero .e-crumb a, .e-hero-page .e-crumb a { color: var(--text); }
.e-hero .e-crumb a:hover, .e-hero-page .e-crumb a:hover { color: var(--pri); }
.e-hero .e-crumb .sep, .e-hero-page .e-crumb .sep { color: #cbd5e1; }
.e-hero .e-hero-facts li { background: rgba(255, 255, 255, .92); border-color: #f8e2e4; backdrop-filter: none; box-shadow: 0 4px 14px rgba(212, 38, 51, .07); }
.e-hero .e-hero-facts b { color: var(--pri); }
.e-hero .e-hero-facts span { color: var(--text); }

/* 20.4 案例列表/详情 hero：深蓝底 + 深遮罩 → 浅色提亮 + 浅遮罩 */
.cw-hero { background: #f1f2f4; }
.cw-hero::after {
  width: auto; height: auto;
  background: linear-gradient(180deg, rgba(238, 244, 255, .90) 0%, rgba(244, 249, 255, .84) 48%, rgba(229, 240, 253, .95) 100%);
}
.cw-hero-bg { filter: brightness(1.25) saturate(.88); opacity: .92; }
.e-hero-case { background: #f1f2f4; }
.e-hero-case::after {
  background: linear-gradient(180deg, rgba(238, 244, 255, .90) 0%, rgba(244, 249, 255, .84) 48%, rgba(229, 240, 253, .95) 100%);
}
.e-hero-case-bg { filter: brightness(1.25) saturate(.88); opacity: .92; }

/* 20.5 产品详情 hero：深蓝渐变 → 浅色营销网格（与单页/列表同族） */
.pd-hero {
  background:
    radial-gradient(46% 120% at 10% -20%, rgba(212, 38, 51, .08), transparent 60%),
    radial-gradient(28% 90% at 97% 0%, rgba(212, 38, 51, .05), transparent 60%),
    linear-gradient(rgba(212, 38, 51, .03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(212, 38, 51, .03) 1px, transparent 1px),
    linear-gradient(180deg, #f1f2f4 0%, #fafbfc 100%);
  background-size: auto, auto, 44px 44px, 44px 44px, auto;
}
.detail-product .pd-eyebrow { color: var(--pri); }
.detail-product .pd-title { color: var(--ink); text-shadow: none; }
.detail-product .pd-sub { color: var(--text); }
.detail-product .pd-price b { color: var(--price); }
.detail-product .pd-price span { color: var(--muted); }
.pd-hero-media { border: 1px solid #f8e2e4; background: #f1f2f4; box-shadow: 0 18px 40px rgba(212, 38, 51, .12); }
.pd-hero-points { border-top: 1px solid var(--line); }
.pd-hero-points li span { color: var(--muted); }
.pd-hero-points li b { color: var(--ink); }

/* 20.6 首页封面图（产品/案例/新闻）交互自然化：柔和缩放 + 底部浅渐变 + 缓动曲线 */
.card, .news-cards li {
  transition: box-shadow .4s cubic-bezier(.22, .61, .36, 1), transform .4s cubic-bezier(.22, .61, .36, 1), border-color .4s ease;
}
/* 2026-09-19 封面图交互柔化（用户要求"自然、不硬"）：
   放大幅度 1.06 → 1.025（几乎察觉不到的缓推），时长 0.9s → 1.4s 更慢更柔；
   去掉 hover 压暗遮罩（不再"啪"地暗一块），改为极淡的柔光过渡，hover 只让图片亮度轻微提升。 */
.card-media, .news-cards .news-media { position: relative; }
.card-media img, .news-cards .news-media img {
  transition: transform 1.4s cubic-bezier(.16, .72, .28, 1), filter .6s ease, opacity .6s ease;
  will-change: transform;
}
.card:hover .card-media img, .news-cards li:hover .news-media img { transform: scale(1.025); filter: brightness(1.04); }
.card-media::after, .news-cards .news-media::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, transparent 70%, rgba(212, 38, 51, .04));
  opacity: 0; transition: opacity .6s ease;
}
.card:hover .card-media::after, .news-cards li:hover .news-media::after { opacity: 1; }



/* ============ 21. 详情页宽屏化 + 页脚版权栏左右留距（2026-09-19） ============ */

/* 21.1 产品/案例/新闻详情：--detail-col 对齐 .wrap 内容盒宽度（1680 - 2*20 = 1640px），
   使详情正文区左右边缘与头部导航完全对齐（此前 1440px 居中导致内容比导航窄、左右留白不均）。 */
.detail-product, .detail-case, .detail-news { --detail-col: 1640px; }
/* 新闻正文阅读列同步加宽（保持可读性，不过度超行宽） */
.detail-news { --nw-read: 1160px; }

/* 21.2 原「负 margin 出血」规则已移除（2026-09-19）：负 margin 让详情容器相对 .wrap 的 20px padding
   左右各外扩 20px，会比导航内容更宽、反而不对齐。现在详情容器 max-width 已等于 .wrap 内容盒，
   铺满即可，无需出血。 */

/* 21.3 页脚版权栏：左侧（版权/备案）与右侧（友链/统计）之间保证最小间距，
   space-between 之外再给 gap，右侧内容再多也不会贴住左侧 */
.foot-bar { gap: 16px 48px; }
@media (max-width: 720px) {
  .foot-bar { gap: 14px 16px; }
}
/* 平板/小笔记本（≤1024）：右侧友链整行换到版权下方并左对齐，与左侧版权栏
   保持明确垂直间距，避免两块在临界宽度悬空相挤。.foot-bar .flinks 特异性高于
   友链插件内联样式表中的 .flinks，确保模板侧可控 */
@media (max-width: 1024px) {
  .foot-bar .flinks { width: 100%; justify-content: flex-start; margin: 14px 0 0; }
}


/* ============ 22. 国际营销型高标准 · 现代质感升级（2026-09-19） ============ */
/* 原则：所有新特性均带降级（旧内核忽略新声明即回退旧表现）；JS 动画渐进增强，
   无 IntersectionObserver 或用户开启减动效时元素始终可见；纯静态直出与语义结构不变。 */

/* 22.1 字体与排版：现代系统字体栈（Inter 在则优先，中文回退苹方/鸿蒙/雅黑）+ 渲染优化 */
body {
  font-family: "Inter", -apple-system, "SF Pro Text", "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", "Segoe UI", system-ui, sans-serif;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "kern" 1, "liga" 1;
}
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* 22.2 排版细节：标题平衡换行 / 正文段落断行优化（不支持的内核自动忽略） */
.hero h1, .block-head h2, .e-hero h1, .e-hero-page h1, .nw-title, .pd-title, .cw-hero-h1, .e-hero-h1,
.detail h1, .cls-page-head h1, .biz-page-head h1 { text-wrap: balance; }
p, li { text-wrap: pretty; }

/* 22.3 品牌选中色 */
::selection { background: #d42633; color: #fff; }

/* 22.4 无障碍焦点环：键盘导航可见、鼠标点击不闪（国际站标准细节） */
a:focus-visible, button:focus-visible, .nav-toggle:focus-visible + .nav-burger,
summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid #d42633; outline-offset: 2px; border-radius: 6px;
}

/* 22.5 现代细滚动条（WebKit 内核；Firefox 用 scrollbar-width 精简） */
html { scrollbar-width: thin; scrollbar-color: #d6d9dd #f2f3f5; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #f2f3f5; }
::-webkit-scrollbar-thumb { background: #d6d9dd; border-radius: 8px; border: 2px solid #f2f3f5; }
::-webkit-scrollbar-thumb:hover { background: #c9ccd1; }

/* 22.6 首页 hero 标题层级向国际大品牌看齐：更大更醒目（旧内核回退原字号） */
.hero h1 { font-size: clamp(30px, 4.4vw, 54px); letter-spacing: .5px; }

/* 22.7 滚动渐入动画（CSS 侧：仅当 .reveal-ready 存在时隐藏，JS 渐进增强保证无 JS 可见） */
.reveal-ready [data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s cubic-bezier(.22, .61, .36, 1), transform .7s cubic-bezier(.22, .61, .36, 1);
}
.reveal-ready [data-reveal].in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal-ready [data-reveal] { opacity: 1; transform: none; transition: none; }
}


/* ============ 23. 描边按钮统一：浅色边框 + 同行按钮等高（2026-09-19） ============ */
/* .btn-line（查看全部/了解更多等次要按钮）边框由深蓝 var(--pri) 改为浅蓝 #d6d9dd，
   与 .btn-ghost 同一浅色体系；hover 填充主蓝时边框随同变深，视觉不突兀。 */
.btn-line { border-color: #d6d9dd; }
.btn-line:hover { border-color: var(--pri); background: var(--pri); color: #fff; }

/* ============================================================
   24. 全站按钮样式统一（2026-09-19）
   按用户要求：全站所有按钮统一为「白底 + 1px 蓝边 + 蓝字 + 小圆角」，
   hover 时填充主蓝、文字变白。覆盖此前散落的实心蓝/渐变/胶囊圆角等变体。
   ============================================================ */
.btn-pri, .btn-ghost, .btn-line, .btn-line-inv, .btn-sm,
.site-nav .nav-cta,
.hero-btns .btn-pri, .hero-btns .btn-ghost,
.e-hero-cta .btn-pri, .e-hero-cta .btn-ghost, .e-hero-cta .btn-line,
.detail-cta .btn-pri, .detail-cta .btn-ghost,
.detail-cta-btns .btn-pri, .detail-cta-btns .btn-ghost, .detail-cta-btns .btn-line,
.cta-btns .btn-pri, .cta-btns .btn-ghost, .cta-btns .btn-line,
.contact-actions .btn-pri, .contact-actions .btn-ghost, .contact-actions .btn-line,
.block-more .btn-pri, .block-more .btn-line,
.cta-band .btn-pri, .cta-band .btn-ghost,
.pd-rail-btns .btn-pri, .pd-rail-btns .btn-ghost, .pd-rail-btns .btn-line,
.search-box .btn-pri,
.e404 .btns .btn-pri, .e404 .btns .btn-ghost {
  display: inline-block;
  padding: 10px 24px;
  background: #ffffff;
  border: 1px solid var(--pri);
  border-radius: 8px;
  color: var(--pri);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  box-shadow: none;
  margin-right: 0;
  transition: background .18s, color .18s, border-color .18s, box-shadow .18s, transform .18s;
}
.btn-pri:hover, .btn-ghost:hover, .btn-line:hover, .btn-line-inv:hover, .btn-sm:hover,
.site-nav .nav-cta:hover,
.hero-btns .btn-pri:hover, .hero-btns .btn-ghost:hover,
.e-hero-cta .btn-pri:hover, .e-hero-cta .btn-ghost:hover, .e-hero-cta .btn-line:hover,
.detail-cta .btn-pri:hover, .detail-cta .btn-ghost:hover,
.detail-cta-btns .btn-pri:hover, .detail-cta-btns .btn-ghost:hover, .detail-cta-btns .btn-line:hover,
.cta-btns .btn-pri:hover, .cta-btns .btn-ghost:hover, .cta-btns .btn-line:hover,
.contact-actions .btn-pri:hover, .contact-actions .btn-ghost:hover, .contact-actions .btn-line:hover,
.block-more .btn-pri:hover, .block-more .btn-line:hover,
.cta-band .btn-pri:hover, .cta-band .btn-ghost:hover,
.pd-rail-btns .btn-pri:hover, .pd-rail-btns .btn-ghost:hover, .pd-rail-btns .btn-line:hover,
.search-box .btn-pri:hover,
.e404 .btns .btn-pri:hover, .e404 .btns .btn-ghost:hover {
  background: var(--pri);
  border-color: var(--pri);
  color: #ffffff;
  box-shadow: 0 6px 16px rgba(212, 38, 51, .18);
}
.btn-pri:active, .btn-ghost:active, .btn-line:active, .btn-line-inv:active, .btn-sm:active,
.site-nav .nav-cta:active { transform: translateY(0); box-shadow: none; }
/* 小按钮（侧边栏在线预约/在线询价）保持更小尺寸 */
.btn-sm { padding: 7px 16px; font-size: 13px; }
/* 导航栏 CTA 保持合适尺寸 */
.site-nav .nav-cta { padding: 9px 20px; }
/* 搜索框按钮高度对齐输入框 */
.search-box .btn-pri { height: 46px; padding: 0 26px; }
/* 移动端：hero/cta 区按钮占满整行 */
@media (max-width: 720px) {
  .hero-btns .btn-pri, .hero-btns .btn-ghost,
  .e-hero-cta .btn-pri, .e-hero-cta .btn-ghost,
  .detail-cta .btn-pri, .detail-cta .btn-ghost,
  .cta-btns .btn-pri, .cta-btns .btn-ghost,
  .contact-actions .btn-pri, .contact-actions .btn-ghost,
  .site-nav .nav-cta {
    display: block; width: 100%; margin: 0 0 10px;
  }
}

/* 24.1 主按钮（强调/转化）：蓝底白字，与次按钮（白底蓝字描边）形成层级（2026-09-19 用户要求加强） */
.btn-pri,
.site-nav .nav-cta,
.hero-btns .btn-pri,
.e-hero-cta .btn-pri,
.detail-cta .btn-pri,
.detail-cta-btns .btn-pri,
.cta-btns .btn-pri,
.contact-actions .btn-pri,
.block-more .btn-pri,
.cta-band .btn-pri,
.pd-rail-btns .btn-pri,
.search-box .btn-pri,
.e404 .btns .btn-pri {
  background: var(--pri);
  border-color: var(--pri);
  color: #ffffff;
  font-weight: 600;
  box-shadow: 0 4px 14px rgba(212, 38, 51, .22);
}
.btn-pri:hover,
.site-nav .nav-cta:hover,
.hero-btns .btn-pri:hover,
.e-hero-cta .btn-pri:hover,
.detail-cta .btn-pri:hover,
.detail-cta-btns .btn-pri:hover,
.cta-btns .btn-pri:hover,
.contact-actions .btn-pri:hover,
.block-more .btn-pri:hover,
.cta-band .btn-pri:hover,
.pd-rail-btns .btn-pri:hover,
.search-box .btn-pri:hover,
.e404 .btns .btn-pri:hover {
  background: var(--pri-d);
  border-color: var(--pri-d);
  color: #ffffff;
  box-shadow: 0 8px 20px rgba(212, 38, 51, .30);
}
/* 深色 hero 背景上的主按钮：蓝底加一点透明亮感，避免与深蓝背景融在一起 */
.hero-btns .btn-pri, .e-hero-cta .btn-pri {
  box-shadow: 0 6px 18px rgba(212, 38, 51, .45);
}

/* 25. hero 左文右图布局 + 右侧图交互动画（2026-09-19） */
.hero { text-align: left; padding: 72px 0 28px; }
.hero-in {
  max-width: 1560px; margin-left: auto; margin-right: auto;
  padding-left: var(--pad); padding-right: var(--pad);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 50%);
  gap: 48px; align-items: stretch;
}
.hero-facts {
  max-width: 1560px; margin: 34px auto 0;
  padding-left: var(--pad); padding-right: var(--pad);
}
/* 宽屏不另设 1840：15.1 节 .wrap{max-width:1560px}（后写）实际已让全站容器统一为
   1560，旧的 ≥1920=1840 规则被其覆盖失效；hero 容器严格跟随 .wrap，保证与导航对齐 */
.hero-text .hero-sub { margin-left: 0; max-width: 560px; }
.hero-text .hero-chips { text-align: left; }
/* 右侧展示图：圆角卡片 + 柔和上下浮动 + hover 上浮放大 */
.hero-visual { position: relative; }
.hero-visual img {
  width: 100%; height: auto; display: block;
  border-radius: 20px;
  box-shadow: 0 24px 60px rgba(12, 13, 16, .45);
  animation: heroFloat 6s ease-in-out infinite;
  transition: transform .5s ease, box-shadow .5s ease;
}
.hero-visual:hover img {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 32px 72px rgba(12, 13, 16, .55);
}
@keyframes heroFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
.hero-facts { margin-top: 34px; }
/* 平板/手机：上下堆叠，右图收窄居中 */
@media (max-width: 960px) {
  .hero { padding: 50px 0 28px; }
  .hero-in { grid-template-columns: 1fr; gap: 28px; align-items: stretch; }
  .hero-visual { max-width: 460px; margin: 0 auto; align-self: auto; }
  .hero-side-video { height: auto; aspect-ratio: 16 / 9; }
}
/* 减动效：关闭浮动 */
@media (prefers-reduced-motion: reduce) {
  .hero-visual img { animation: none; }
}


/* ============================================================
   26. 国际大品牌风 · 栏目 hero 深色沉浸式重设计（2026-09-19）
   设计语言：Stripe / Linear / Vercel —— 近黑深靛蓝底 + 柔和光晕图 +
   极淡工程网格 + 白字大标题 + 玻璃拟态徽章/按钮。左对齐、克制、大留白。
   作用域：栏目列表页(.e-hero)、单页(.e-hero-page)、案例墙(.cw-hero)。
   首页 .hero 已是深色左文右图，保持不动以全站统一。
   本层为最终覆盖层（后写即生效）；旧图已备份 *.lightbak.webp / *.bak.webp。
   ============================================================ */

/* ---- 26.1 底色：新光晕图 + 左深右透可读遮罩 + 极淡网格 ---- */
.e-hero, .e-hero-page {
  background:
    linear-gradient(90deg, rgba(6,10,20,.94) 0%, rgba(6,10,20,.78) 42%, rgba(6,10,20,.36) 100%),
    linear-gradient(180deg, rgba(6,10,20,.60) 0%, rgba(6,10,20,.28) 48%, rgba(6,10,20,.62) 100%),
    linear-gradient(rgba(148,178,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148,178,255,.05) 1px, transparent 1px),
    url('/uploads/site/hero-list-2026.webp') center / cover no-repeat,
    #0a0f1e;
  background-size: auto, auto, 44px 44px, 44px 44px, cover, auto;
  border-bottom: 1px solid rgba(148,178,255,.10);
}
/* 单页用更柔的蓝紫光晕变体 */
.e-hero-page {
  background-image:
    linear-gradient(90deg, rgba(6,10,20,.94) 0%, rgba(6,10,20,.78) 42%, rgba(6,10,20,.36) 100%),
    linear-gradient(180deg, rgba(6,10,20,.60) 0%, rgba(6,10,20,.28) 48%, rgba(6,10,20,.62) 100%),
    linear-gradient(rgba(148,178,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148,178,255,.05) 1px, transparent 1px),
    url('/uploads/site/hero-page.webp') center / cover;
}
/* 旧营销光斑圆 ::before/::after 关闭，避免与新光晕打架 */
.e-hero::before, .e-hero::after { content: none; }

/* ---- 26.2 排版：超大左对齐标题 + 精致 eyebrow ---- */
.e-hero, .e-hero-page { text-align: left; }
.e-hero h1, .e-hero-page h1, .detail-case .e-hero-h1, .cw-hero .cw-hero-h1 {
  color: #f6f7f9;
  text-shadow: 0 2px 28px rgba(12, 13, 16,.55);
  font-size: clamp(32px, 4.4vw, 58px);
  line-height: 1.08;
  letter-spacing: -.01em;
  font-weight: 700;
  margin: 0 0 16px;
}
.e-hero .e-eyebrow, .e-hero-page .e-eyebrow, .cw-hero .e-eyebrow {
  color: #e89097;
  font-size: 12px;
  letter-spacing: 4px;
  font-weight: 700;
  text-transform: uppercase;
  margin: 0 0 16px;
}
.e-hero .e-eyebrow::before, .e-hero-page .e-eyebrow::before, .cw-hero .e-eyebrow::before {
  background: #d42633;
  width: 28px;
  height: 2px;
}
.e-hero .e-desc, .e-hero-page .e-desc, .cw-hero .e-desc {
  color: rgba(226,232,240,.80);
  font-size: clamp(15px, .35vw + 14px, 17px);
  line-height: 1.8;
  max-width: 640px;
}
.e-hero .e-meta, .e-hero-page .e-meta { color: rgba(203,213,225,.72); }
.e-hero .e-meta b, .e-hero-page .e-meta b { color: #f2f3f5; }
.e-hero .e-num, .e-hero-page .e-num { color: #e89097; }

/* ---- 26.3 信任徽章：玻璃拟态 ---- */
.e-hero .e-hero-facts li, .e-hero-page .e-hero-facts li {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: none;
}
.e-hero .e-hero-facts b, .e-hero-page .e-hero-facts b { color: #e89097; }
.e-hero .e-hero-facts span, .e-hero-page .e-hero-facts span { color: rgba(226,232,240,.85); }

/* ---- 26.4 CTA：主按钮白底蓝字，次按钮玻璃拟态 ---- */
.e-hero-cta .btn-pri {
  background: #ffffff !important;
  border-color: #ffffff !important;
  color: #0f1e3d !important;
  font-weight: 600;
  box-shadow: 0 8px 24px rgba(12, 13, 16,.35);
}
.e-hero-cta .btn-pri:hover {
  background: #eaf2ff !important; border-color: #eaf2ff !important; color: #b01c28 !important;
  box-shadow: 0 10px 28px rgba(12, 13, 16,.4);
}
.e-hero-cta .btn-ghost {
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(255,255,255,.35) !important;
  color: #ffffff !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: none !important;
}
.e-hero-cta .btn-ghost:hover {
  background: rgba(255,255,255,.16) !important; border-color: rgba(255,255,255,.6) !important; color: #ffffff !important;
}

/* ---- 26.5 资讯列表 hero：搜索框与计数深色适配 ---- */
.nl-hero .nl-count { color: rgba(203,213,225,.72); }
.nl-hero .nl-count b { color: #e89097; }
.nl-hero .nl-search input {
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.18);
  color: #f2f3f5;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.nl-hero .nl-search input::placeholder { color: rgba(203,213,225,.55); }
.nl-hero .nl-search input:focus {
  border-color: #e89097;
  box-shadow: 0 0 0 3px rgba(125,211,252,.18);
  background: rgba(255,255,255,.10);
}
.nl-hero .nl-search button {
  background: #ffffff;
  color: #0f1e3d;
  font-weight: 600;
}
.nl-hero .nl-search button:hover { background: #eaf2ff; }

/* ---- 26.6 案例墙 hero：深底 + 案例图加深遮罩（保留真实项目图证据感） ---- */
.cw-hero { background: #0a0f1e; }
.cw-hero::before { content: none; }
.cw-hero::after {
  width: auto; height: auto;
  background: linear-gradient(90deg, rgba(6,10,20,.94) 0%, rgba(6,10,20,.78) 42%, rgba(6,10,20,.36) 100%),
              linear-gradient(180deg, rgba(6,10,20,.60) 0%, rgba(6,10,20,.28) 48%, rgba(6,10,20,.62) 100%);
}
.cw-hero-bg { filter: none; opacity: 1; }

/* ---- 26.7 移动端收束 ---- */
@media (max-width: 720px) {
  .e-hero h1, .e-hero-page h1, .detail-case .e-hero-h1, .cw-hero .cw-hero-h1 {
    font-size: 27px;
  }
  .e-hero .e-eyebrow, .e-hero-page .e-eyebrow, .cw-hero .e-eyebrow { letter-spacing: 3px; }
}

/* ---- 26.8 hero CTA 双按钮间距（2026-09-20 二次反馈：仍偏挤，12px → 20px） ---- */
.e-hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }
/* 首页 hero 按钮组同口径：26.6 统一按钮层把 margin 清零过，这里用 flex gap 补回 */
.hero-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }
@media (max-width: 720px) {
  .hero-btns { display: block; }
  .hero-btns a { margin: 0 0 10px; }
}
.e-hero-cta .btn-pri, .e-hero-cta .btn-ghost, .e-hero-cta .btn-line { margin-right: 0; }
@media (max-width: 720px) {
  .e-hero-cta { gap: 0; }
  .e-hero-cta .btn-pri, .e-hero-cta .btn-ghost, .e-hero-cta .btn-line { width: 100%; margin: 0 0 10px; }
}
/* ============================================================
   27. 浅色国际风 · 全站 hero 与深色块统一（2026-09-19）
   设计语言：Apple / Notion / Stripe 浅色模式 —— 纯白/极浅底 +
   极淡蓝紫雾光晕 + 深色大标题 + 浅灰卡片 + 蓝底主按钮。
   覆盖第 26 层深色规则与首页/案例旧深色规则，全站统一浅色。
   ============================================================ */

/* ---- 27.1 栏目 hero（列表/单页）：浅色底 + 新浅色光晕图 ---- */
.e-hero, .e-hero-page {
  background:
    linear-gradient(90deg, rgba(255,255,255,.80) 0%, rgba(255,255,255,.50) 45%, rgba(255,255,255,.14) 100%),
    linear-gradient(180deg, rgba(255,255,255,.58) 0%, rgba(248,250,252,.28) 50%, rgba(241,245,249,.60) 100%),
    url('/uploads/site/hero-list-2026.webp') center / cover no-repeat,
    #ffffff;
  background-size: auto, auto, cover, auto;
  border-bottom: 1px solid #eceef1;
}
.e-hero-page {
  background-image:
    linear-gradient(90deg, rgba(255,255,255,.80) 0%, rgba(255,255,255,.50) 45%, rgba(255,255,255,.14) 100%),
    linear-gradient(180deg, rgba(255,255,255,.58) 0%, rgba(248,250,252,.28) 50%, rgba(241,245,249,.60) 100%),
    url('/uploads/site/hero-page.webp') center / cover;
}

/* ---- 27.2 文字配色：深色标题 + 中灰描述 + 品牌蓝 eyebrow ---- */
.e-hero h1, .e-hero-page h1, .detail-case .e-hero-h1, .cw-hero .cw-hero-h1 {
  color: #16181d;
  text-shadow: none;
}
.e-hero .e-eyebrow, .e-hero-page .e-eyebrow, .cw-hero .e-eyebrow {
  color: #d42633;
}
.e-hero .e-eyebrow::before, .e-hero-page .e-eyebrow::before, .cw-hero .e-eyebrow::before {
  background: #d42633;
}
.e-hero .e-desc, .e-hero-page .e-desc, .cw-hero .e-desc { color: #6b7076; }
.e-hero .e-meta, .e-hero-page .e-meta { color: #9aa0a6; }
.e-hero .e-meta b, .e-hero-page .e-meta b { color: #16181d; }
.e-hero .e-num, .e-hero-page .e-num { color: #d42633; }

/* ---- 27.3 信任徽章：浅灰卡片 ---- */
.e-hero .e-hero-facts li, .e-hero-page .e-hero-facts li {
  background: #f6f7f9;
  border: 1px solid #e5e7ea;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: 0 2px 8px rgba(22, 24, 29,.04);
}
.e-hero .e-hero-facts b, .e-hero-page .e-hero-facts b { color: #d42633; }
.e-hero .e-hero-facts span, .e-hero-page .e-hero-facts span { color: #4d5259; }

/* ---- 27.4 hero CTA：主按钮蓝底白字，次按钮白底灰边 ---- */
.e-hero-cta .btn-pri {
  background: #d42633 !important;
  border-color: #d42633 !important;
  color: #ffffff !important;
  box-shadow: 0 6px 18px rgba(212, 38, 51,.22);
}
.e-hero-cta .btn-pri:hover { background: #b01c28 !important; border-color: #b01c28 !important; color: #fff !important; }
.e-hero-cta .btn-ghost {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #16181d !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: 0 2px 8px rgba(22, 24, 29,.04);
}
.e-hero-cta .btn-ghost:hover { background: #f6f7f9 !important; border-color: #9aa0a6 !important; color: #16181d !important; }

/* ---- 27.5 资讯列表搜索框与计数浅色 ---- */
.nl-hero .nl-count { color: #6b7076; }   /* 2026-09-21：原 #9aa0a6 在浅底头带上只有 2.41:1，
                                                 改 #6b7076 → 4.56:1（对比度体检 FAIL 归零） */
.nl-hero .nl-count b { color: #d42633; }
.nl-hero .nl-search input {
  background: #ffffff;
  border-color: #e5e7ea;
  color: #16181d;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.nl-hero .nl-search input::placeholder { color: #9aa0a6; }
.nl-hero .nl-search input:focus { border-color: #d42633; box-shadow: 0 0 0 3px rgba(212, 38, 51,.12); background: #fff; }
.nl-hero .nl-search button { background: #d42633; color: #ffffff; }
.nl-hero .nl-search button:hover { background: #b01c28; }

/* ---- 27.6 案例墙 hero：浅色遮罩 + 深色文字（保留真实项目图） ---- */
.cw-hero { background: #f6f7f9; }
.cw-hero::after {
  background:
    linear-gradient(90deg, rgba(255,255,255,.94) 0%, rgba(255,255,255,.74) 45%, rgba(255,255,255,.40) 100%),
    linear-gradient(180deg, rgba(255,255,255,.70) 0%, rgba(255,255,255,.45) 100%);
}
.cw-hero-bg { filter: none; opacity: .95; }

/* ---- 27.7 首页 hero（2026-09-22）----
   原「右侧独立卡片图」已下线（index 模板内保留注释，可随时回退）。
   ★ 首页 hero 的**背景规则不在这里** —— 本文件靠后的「40.2」章节带 !important，
     会覆盖本节；改首页 hero 背景请直接改 40.2，否则就是"改了不生效"。
     这个坑 2026-09-22 踩过一次（改本节后截图仍是旧白底）。 */
.hero-visual { display: none !important; }
.hero-eyebrow {
  background: #fdf1f2; border-color: #f8e2e4; color: #d42633; backdrop-filter: none;
}
.hero h1 { color: #16181d; text-shadow: none; }
.hero-sub { color: #4d5259; }
.hero-chips span {
  background: #f2f3f5; border: 1px solid #e5e7ea; color: #4d5259; backdrop-filter: none;
}
.hero-facts li {
  background: #f6f7f9; border: 1px solid #e5e7ea; backdrop-filter: none;
  box-shadow: 0 2px 8px rgba(22, 24, 29,.04);
}
.hero-facts b { color: #d42633; }
.hero-facts span { color: #6b7076; }
.hero-btns .btn-pri {
  background: #d42633; border-color: #d42633; color: #fff;
  box-shadow: 0 6px 18px rgba(212, 38, 51,.22);
}
.hero-btns .btn-ghost { background: #fff; border-color: #cbd5e1; color: #16181d; }

/* ---- 27.8 案例详情 hero（e-hero-case）浅色 ---- */
.e-hero-case { background: #f6f7f9; }
.e-hero-case::after {
  background:
    linear-gradient(90deg, rgba(255,255,255,.94) 0%, rgba(255,255,255,.74) 45%, rgba(255,255,255,.40) 100%),
    linear-gradient(180deg, rgba(255,255,255,.70) 0%, rgba(255,255,255,.45) 100%);
}
.e-hero-case-bg { filter: none; opacity: .95; }
.detail-case .e-hero-h1 { color: #16181d; text-shadow: none; }

/* ---- 27.9 案例/资讯底部 CTA 带统一为首页同款浅蓝渐变 ---- */
.cw-final, .cs-final, .nl-cta-in {
  background: linear-gradient(135deg, var(--blue-50) 0%, var(--blue-100) 100%);
}
.cw-final-t, .cs-final-text h2, .cs-final-text .h2, .nl-cta-t { color: #16181d; }
.cw-final-text p, .cs-final-text p, .nl-cta-p { color: #6b7076; }

/* ---- 27.10 修正：案例/资讯底部 CTA 带的深蓝背景在 -in 容器上 ---- */
.cw-final-in, .cs-final-in, .nl-cta-in {
  background: linear-gradient(135deg, var(--blue-50) 0%, var(--blue-100) 100%) !important;
  border: 1px solid var(--blue-200);
}
.cw-final-t, .cs-final-text h2, .cs-final-text .h2, .nl-cta-t { color: #16181d !important; }
.cw-final-text p, .cs-final-text p, .nl-cta-p { color: #6b7076 !important; }
.cw-final-btns .btn-pri, .cs-final-btns .btn-pri { background: #d42633; border-color: #d42633; color: #fff; }
.cw-final-btns .btn-ghost, .cs-final-btns .btn-ghost { background: #fff; border-color: var(--blue-300); color: var(--pri); }

/* ---- 27.11 案例列表 hero：去掉真实项目图背景，改用与其他栏目统一的浅色光晕底，保证文字清晰 ---- */
.cw-hero-bg { display: none !important; }
.cw-hero {
  background:
    linear-gradient(90deg, rgba(255,255,255,.80) 0%, rgba(255,255,255,.50) 45%, rgba(255,255,255,.14) 100%),
    linear-gradient(180deg, rgba(255,255,255,.58) 0%, rgba(248,250,252,.28) 50%, rgba(241,245,249,.60) 100%),
    url('/uploads/site/hero-list-2026.webp') center / cover no-repeat,
    #ffffff;
  background-size: auto, auto, cover, auto;
}
/* ---- 27.12 案例详情 hero ＝ 证据第一屏：案例大图 + 深色渐变遮罩 + 白字 ----
   营销型案例页标准：列表页浅色负责导航，详情页深色大图负责证据冲击。
   覆盖 27.8 的错误浅色化，明确为深色遮罩证据屏。 ---- */
.e-hero-case { background: #0b1730 !important; }
.e-hero-case::after {
  background: linear-gradient(90deg, rgba(8,15,35,.90) 0%, rgba(10,20,45,.62) 45%, rgba(10,20,45,.18) 100%) !important;
}
.e-hero-case-bg { filter: none !important; opacity: 1 !important; }
.detail-case .e-hero-h1 { color: #ffffff !important; text-shadow: 0 2px 20px rgba(0,0,0,.35) !important; }
.detail-case .e-eyebrow { color: #f0999f !important; }
.cs-profile-name { background: rgba(255,255,255,.16) !important; color: #ffffff !important; }
.cs-profile-i { color: rgba(255,255,255,.85) !important; }
.c-hero-stats li { background: rgba(255,255,255,.10) !important; border: 1px solid rgba(255,255,255,.22) !important; }
.c-hero-stats b { color: #ffffff !important; }
.c-hero-stats span { color: rgba(255,255,255,.82) !important; }
/* ---- 27.13 首页右侧视觉：去掉白色卡片感，透明玻璃元素直接漂浮 ---- */
.hero-visual img {
  border-radius: 0 !important;
  box-shadow: none !important;
}
.hero-visual:hover img {
  box-shadow: none !important;
}
/* ============================================================
   28. 精致度提升 · 微交互与视觉层次（2026-09-19）
   Stripe / Linear 级：卡片 hover 上浮、箭头位移、按钮质感。
   ============================================================ */

/* 28.1 全站卡片：默认细腻阴影，hover 上浮 + 阴影加深 + 边框提亮 */
.card, .pain-grid li, .svc-card, .news-cards li, .why-grid li, .why-list li, .proc-step, .step-card {
  transition: transform .28s cubic-bezier(.4,0,.2,1), box-shadow .28s cubic-bezier(.4,0,.2,1), border-color .28s ease;
}
.card:hover, .pain-grid li:hover, .svc-card:hover, .news-cards li:hover,
.why-grid li:hover, .why-list li:hover, .proc-step:hover, .step-card:hover {
  box-shadow: 0 14px 34px rgba(22, 24, 29,.09), 0 3px 10px rgba(22, 24, 29,.05);
  border-color: #dbe4f0;
}

/* 28.2 服务图标统一蓝色系（去掉突兀红色） */
.svc-ico {
  background: #fdf1f2 !important;
  color: #d42633 !important;
}

/* 28.3 链接 hover 变色（箭头不再整行右移）
   原因：transform: translateX(3px) 会移动「被 hover 元素自身」的热区，
   指针贴在链接左缘时会被推出盒模型 → mouseleave → 落回 → mouseenter 死循环闪烁。
   整站卡片/按钮已一律改由 box-shadow 表达浮起，此处同样只保留变色反馈。 */
.card-more, .svc-more, .news-more, .pain-grid a {
  transition: color .2s ease;
}
.card-more:hover, .svc-more:hover, .news-more:hover, .pain-grid a:hover {
  color: #b01c28 !important;
}

/* 28.4 主按钮质感：微渐变 + 悬浮上浮 + 阴影加深 */
.btn-pri {
  background: linear-gradient(180deg, #e03642, #d42633) !important;
  box-shadow: 0 6px 16px rgba(212, 38, 51,.26);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.btn-pri:hover {
  box-shadow: 0 10px 26px rgba(212, 38, 51,.34);
  background: linear-gradient(180deg, #e03642, #b01c28) !important;
}

/* 28.5 次按钮 hover 轻微上浮 */
.btn-ghost, .btn-line {
  transition: transform .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.btn-ghost:hover, .btn-line:hover {
  /* 浮起改由各自 :hover 的 box-shadow 表达，避免 translateY 推走指针导致热区循环闪烁 */
}

/* 28.6 卡片占位图：浅蓝渐变代替纯灰块 */
.card-ph, .news-ph {
  background: linear-gradient(135deg, #f2f3f5 0%, #e8eef7 100%) !important;
}

/* 28.7 数据成果大数字：字重更饱满、颜色更稳 */
.stats-grid b, .stats-grid dt {
  letter-spacing: -.01em;
}
/* ---- 28.14 右侧玻璃元素：mix-blend-mode 让纯白底自然融合浅色 hero ---- */
.hero-visual img {
  mix-blend-mode: multiply;
}
/* ============================================================
   29. 联系我们页重新设计（2026-09-19）
   现代两栏 + 精致卡片 + 表单突出
   ============================================================ */

/* 29.1 联系卡片精致化 */
.contact-cards .contact-card {
  transition: transform .28s cubic-bezier(.4,0,.2,1), box-shadow .28s cubic-bezier(.4,0,.2,1);
  border-radius: 16px;
  padding: 24px;
}
.contact-cards .contact-card:hover {
  box-shadow: 0 12px 32px rgba(22, 24, 29,.08);
}
.contact-cards .cc-icon {
  width: 52px; height: 52px;
  border-radius: 14px;
}
.contact-cards .contact-card b { font-size: 16px; }
.contact-cards .contact-card p { font-size: 15px; }

/* 29.2 联系操作按钮更大更突出 */
.contact-actions .btn-pri, .contact-actions .btn-ghost {
  padding: 13px 32px;
  font-size: 15px;
  border-radius: 12px;
}

/* 29.3 inquiry 表单卡片精致化 */
.iq-embed {
  border-radius: 16px !important;
  padding: 28px !important;
  box-shadow: 0 4px 20px rgba(22, 24, 29,.05);
}
.iq-embed .iq-t { font-size: 18px; }
.iq-embed .iq-d { font-size: 14px; margin: 8px 0 16px; }

/* 29.4 底部信任带精致化 */
.trust-band {
  border-radius: 16px;
  padding: 32px;
}
.trust-grid li {
  border-radius: 12px;
  transition: transform .25s, box-shadow .25s;
}
.trust-grid li:hover {
  box-shadow: 0 8px 24px rgba(22, 24, 29,.06);
}

/* 29.5 底部 CTA 带精致化 */
.detail-cta {
  border-radius: 16px;
  padding: 32px;
}
/* ============================================================
   30. 栏目 hero 右侧统一加玻璃元素小图标（2026-09-19）
   ============================================================ */
.e-hero::before, .e-hero-page::before {
  content: '';
  position: absolute;
  right: 4%;
  top: 50%;
  transform: translateY(-50%);
  width: 380px;
  height: 280px;
  background: url('/themes/default/img/hero-visual.webp') center/contain no-repeat;
  opacity: 0.85;
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 1;
}
/* 文字层级在图标之上 */
.e-hero .e-hero-in, .e-hero-page .e-hero-in,
.e-hero .e-eyebrow, .e-hero h1, .e-hero .e-desc,
.e-hero .e-hero-cta, .e-hero .e-hero-facts,
.e-hero .nl-search, .e-hero .nl-count {
  position: relative;
  z-index: 2;
}
/* 案例详情 hero 不加（它是证据屏） */
.e-hero-case::before { display: none !important; }
/* 移动端隐藏右侧图标 */
@media (max-width: 768px) {
  .e-hero::before, .e-hero-page::before { display: none; }
}

/* ============================================================
   31. 玻璃卡片质感：右侧玻璃元素加淡淡大圆角磨砂背景（2026-09-19）
   ============================================================ */
.hero-visual::before {
  content: '';
  position: absolute;
  inset: -20px;
  background: rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(20px);
  border-radius: 28px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 8px 32px rgba(212, 38, 51, 0.08);
  z-index: -1;
}
.e-hero::before {
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 8px 32px rgba(212, 38, 51, 0.08);
}
/* ============================================================
   30. 栏目 hero 右侧统一加玻璃元素小图标（2026-09-19）
   ============================================================ */
/* ::before 做玻璃边框背景 */
.e-hero::before, .e-hero-page::before {
  content: '';
  position: absolute;
  right: 4%;
  top: 50%;
  transform: translateY(-50%);
  width: 380px;
  height: 280px;
  background: rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(20px);
  border-radius: 28px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 8px 32px rgba(212, 38, 51, 0.08);
  pointer-events: none;
  z-index: 1;
}
/* ::after 做玻璃元素图 */
.e-hero::after, .e-hero-page::after {
  content: '';
  position: absolute;
  right: 4%;
  top: 50%;
  transform: translateY(-50%);
  width: 380px;
  height: 280px;
  background: url('/themes/default/img/hero-visual.webp') center/contain no-repeat;
  opacity: 0.85;
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 2;
}
/* 文字层级在图标之上 */
.e-hero .e-hero-in, .e-hero-page .e-hero-in,
.e-hero .e-eyebrow, .e-hero h1, .e-hero .e-desc,
.e-hero .e-hero-cta, .e-hero .e-hero-facts,
.e-hero .nl-search, .e-hero .nl-count {
  position: relative;
  z-index: 3;
}
/* 案例详情 hero 不加（它是证据屏） */
.e-hero-case::before, .e-hero-case::after { display: none !important; }
/* 移动端隐藏右侧图标 */
@media (max-width: 768px) {
  .e-hero::before, .e-hero-page::before,
  .e-hero::after, .e-hero-page::after { display: none; }
}
/* ============================================================
   32. 去掉背后大白框，保留玻璃元素本身质感（2026-09-19）
   ============================================================ */
.hero-visual::before {
  display: none !important;
}
.e-hero::before, .e-hero-page::before {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
.e-hero::after, .e-hero-page::after {
  opacity: 0.9;
}
/* ============================================================
   32. 去掉背后大白框，保留玻璃元素本身质感（2026-09-19）
   ============================================================ */
.hero-visual::before {
  display: none !important;
}
.e-hero::before, .e-hero-page::before {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
.e-hero::after, .e-hero-page::after {
  opacity: 0.9;
}
/* ============================================================
   33. 修正栏目 hero 玻璃元素位置到右侧（2026-09-19）
   ============================================================ */
.e-hero::after, .e-hero-page::after {
  content: '';
  position: absolute;
  right: 6%;
  top: 50%;
  transform: translateY(-50%);
  width: 300px;
  height: 220px;
  background: url('/themes/default/img/hero-visual.webp') center/contain no-repeat;
  opacity: 0.9;
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 2;
}
/* ============================================================
   34. 强制修正栏目 hero 玻璃元素位置到右侧（2026-09-19）
   ============================================================ */
.e-hero::after, .e-hero-page::after {
  left: auto !important;
  right: 5% !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 280px !important;
  height: 200px !important;
  position: absolute !important;
}
/* ============================================================
   35. 各栏目 hero 右侧用对应主题图标（2026-09-19）
   ============================================================ */
.ps-hero::after {
  background: url('/themes/default/img/hero-product.webp') center/contain no-repeat !important;
}
.cw-hero::after {
  background: url('/themes/default/img/hero-case.webp') center/contain no-repeat !important;
}
.nl-hero::after {
  background: url('/themes/default/img/hero-news.webp') center/contain no-repeat !important;
}
/* 关于我们单页 */
.e-hero-page::after {
  background: url('/themes/default/img/hero-about.webp') center/contain no-repeat !important;
}
/* ============================================================
   36. 首页 hero 右侧视频（2026-09-19）
   原全屏背景视频移入右侧图片区（取代静态插画）；hero 背景图
   /uploads/site/hero-list-2026.webp + 白色渐变（见 27.7）原样保留。
   ============================================================ */
.hero { position: relative; overflow: hidden; }
.hero-in, .hero-facts {
  position: relative;
  z-index: 1;
}
/* 右侧视频：跟随右列宽度，4:3 卡片，圆角与柔和阴影，真实影像不用 multiply 融合 */
/* 右侧视频：严格 16:9 等比（宽度变则高度自动，不拉伸/不变形）；
   顶部贴 hero 上边（-72px 上 padding）、右贴 hero 右缘（-var(--pad)）；无边框/阴影，与背景图融为一体。 */
.hero-visual {
  align-self: start; min-height: 0;
  margin-top: -36px;
  margin-right: calc(-1 * var(--pad));
}
.hero-side-video {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  height: auto;
  object-fit: cover;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, #000 12%, #000 88%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 10%, #000 78%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent 0, #000 12%, #000 88%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 10%, #000 78%, transparent 100%);
  mask-composite: intersect;
}
@media (prefers-reduced-motion: reduce) {
  .hero-side-video { animation: none; }
}

/* 移动端/平板单列：取消桌面融边负 margin，视频恢复 16:9 居中圆角卡片 */
@media (max-width: 960px) {
  .hero-visual { align-self: auto; min-height: 0; margin: 0 auto; }
  .hero-side-video {
    height: auto; aspect-ratio: 1 / 1;
    border-radius: 16px; box-shadow: 0 10px 24px rgba(22, 24, 29, .12);
  }
}

/* ============================================================
   37. 全站 hero 浅色统一 + 非首页高度统一 + 首页视频 16:9（2026-09-19）
   37.1 非首页「栏目级 hero」统一高度：同一 min-height + 垂直居中 + 同一竖向留白；
        内容超出时自然增高（不裁切）。阅读型文章的 e-hero-mini 是紧凑栏目条，保持紧凑。
   37.2 案例详情 hero 改浅色（覆盖 27.12 的深色 !important 证据屏）。
   37.3 首页右侧视频 1:1 → 16:9，垂直居中，降低首屏高度。
   ============================================================ */

/* ---- 37.1 高度统一：只写竖向 padding，水平 padding 仍由全出血负 margin 规则提供 ---- */
.e-hero {
  min-height: 360px;
  padding-top: 0;
  padding-bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.pd-hero {
  min-height: 360px;
  padding-top: 40px;
  padding-bottom: 32px;
}
/* cw/case 的 hero 内容在 -in 内层，竖向留白统一到同一值 */
.e-hero .e-hero-in,
.cw-hero-in,
.e-hero-case-in { padding-top: 52px; padding-bottom: 52px; }
/* 阅读型文章 mini 头带：标题在正文卡片里，这里只做紧凑分类条 */
.detail-news .e-hero-mini { min-height: 0; display: block; padding-top: 22px; padding-bottom: 20px; }
@media (max-width: 720px) {
  .e-hero, .pd-hero { min-height: 240px; }
  .e-hero .e-hero-in,
  .cw-hero-in,
  .e-hero-case-in { padding-top: 34px; padding-bottom: 34px; }
  .pd-hero { padding-top: 28px; padding-bottom: 24px; }
  .detail-news .e-hero-mini { min-height: 0; padding-top: 16px; padding-bottom: 14px; }
}

/* ---- 37.2 案例详情 hero：深色证据屏 → 与全站一致的浅色光晕底 + 深色文字 ---- */
.e-hero-case {
  background:
    linear-gradient(90deg, rgba(255,255,255,.80) 0%, rgba(255,255,255,.50) 45%, rgba(255,255,255,.14) 100%),
    linear-gradient(180deg, rgba(255,255,255,.58) 0%, rgba(248,250,252,.28) 50%, rgba(241,245,249,.60) 100%),
    url('/uploads/site/hero-list-2026.webp') center / cover no-repeat,
    #ffffff !important;
  background-size: auto, auto, cover, auto !important;
  border-bottom: 1px solid #eceef1;
}
.e-hero-case::before,
.e-hero-case::after { content: none !important; display: none !important; }
.e-hero-case-bg { display: none !important; }
.detail-case .e-hero-h1 { color: #16181d !important; text-shadow: none !important; }
.detail-case .e-eyebrow { color: #d42633 !important; }
.detail-case .e-eyebrow::before { background: #d42633 !important; }
.detail-case .e-desc { color: #6b7076 !important; }
.cs-profile-name {
  background: #fdf1f2 !important;
  border: 1px solid #f8e2e4 !important;
  color: #b01c28 !important;
}
.cs-profile-i { color: #4d5259 !important; }
.cs-profile-i i { color: #9aa0a6 !important; }
.c-hero-stats li {
  background: #f6f7f9 !important;
  border: 1px solid #e5e7ea !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow: 0 2px 8px rgba(22, 24, 29,.04) !important;
}
.c-hero-stats b { color: #d42633 !important; }
.c-hero-stats span { color: #4d5259 !important; }

/* ---- 37.3 首页右侧视频：1:1 方形 → 16:9，垂直居中（右融边与 mask 保留） ---- */
.hero-visual { align-self: center; margin-top: 0; }
.hero-side-video { aspect-ratio: 16 / 9; }
@media (max-width: 960px) {
  .hero-side-video { aspect-ratio: 16 / 9; }
}

/* ---- 37.4 首页 hero 两行副标题：上行服务关键词（加重），下行技术背书 ---- */
.hero-sub-lead {
  margin-bottom: 12px;
  font-size: clamp(15px, 1.2vw + 13px, 18px);
  font-weight: 600;
  color: #16181d;
}

/* ---- 37.5 媒体元素自适应兜底（img 已在基础层覆盖；不恢复 html/body 横向裁剪） ---- */
video, canvas, iframe, embed, object, svg { max-width: 100%; }
/* ============================================================
   40. 佛山维恪智能门窗 · 首页主视觉（2026-09-20 重建站）
   ------------------------------------------------------------
   .hero-visual 原为「玻璃装饰元素」设计：mix-blend multiply +
   直角 + 取消阴影 + 右侧负 margin 出血。改放真实产品/场景照片后
   需要还原为标准图片卡片；选择器加一级（.hero-visual .hero-photo）
   以覆盖 27.13 / 28.14 两处 !important 规则。
   ============================================================ */
.hero-visual { margin-right: 0 !important; margin-top: 0 !important; align-self: center !important; }
.hero-visual .hero-photo {
  width: 100%; height: auto; display: block;
  border-radius: 20px !important;
  box-shadow: 0 20px 50px rgba(22, 24, 29, .16) !important;
  mix-blend-mode: normal !important;
  animation: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}
.hero-visual:hover .hero-photo { transform: none !important; }
@media (max-width: 960px) {
  .hero-visual { max-width: 100% !important; }
}

/* 40.2 首页 hero 背景（2026-09-22 改）：右列卡片图已下线，改为整幅建筑实景大图做背景。
   本节是 .hero 的最终生效层（靠后 + !important），改首页 hero 背景只改这里。
   ★ 图片文件名带年份 hero-home-2026.webp —— CSS 里的 url() 带不了 media() 版本号，
     换图必须换文件名（或手工加 ?v=<md5>），否则访客会一直看到缓存里的旧图。
   遮罩左重右轻：左侧 x≤47%（.hero-in 文字列 636px / 1440）保持 ≥86% 白，
   保证深色大标题与正文清晰可读；右侧放开到 16%，保留实景质感。 */
.hero {
  background:
    linear-gradient(90deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.86) 34%, rgba(255,255,255,.52) 64%, rgba(255,255,255,.16) 100%),
    url('/uploads/site/hero-home-2026.webp') center / cover no-repeat,
    #ffffff !important;
}
/* 窄屏：hero 文字占满整幅宽度，横向渐变护不住右侧文字 → 改纵向遮罩：
   上部（标题/正文/chips 区）保持 ≥86% 白保证可读，底部放开到 62% 让实景透出来。 */
@media (max-width: 960px) {
  .hero {
    background:
      linear-gradient(180deg, rgba(255,255,255,.93) 0%, rgba(255,255,255,.86) 58%, rgba(255,255,255,.62) 100%),
      url('/uploads/site/hero-home-2026.webp') center / cover no-repeat,
      #ffffff !important;
  }
}

/* 40.3 品牌 Logo：本站 Logo 是「VIDEO|维恪门窗」横版字标（240×80），
   原 .logo-mark 写死 44×44 + object-fit:cover 会把它裁成只剩左边一小截。
   改为「限高不限宽」，横版字标整幅显示；同时去掉给方形图标用的圆角/阴影。
   2026-09-20 用户反馈「Logo 偏小」：桌面 40px → 52px，移动端 32px → 38px。 */
.logo-mark {
  width: auto !important;
  height: 40px !important;
  max-width: 380px;
  object-fit: contain !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
@media (max-width: 720px) {
  .logo-mark { height: 30px !important; max-width: 240px; }
}

/* ============================================================
   41. 浅灰主题补充层（2026-09-20 · 整站由深色切回浅灰浅色调）
   主色 = 品牌红 #d42633（Logo 取色），底色 = 中性浅灰 #f5f6f8 系
   把深色阶段新增的组件样式以浅色口径补回。
   ============================================================ */
::selection { background: rgba(212, 38, 51, .18); color: #16181d; }

/* 顶部导航 · 品牌 400 热线 */
.nav-hotline {
  display: inline-flex; align-items: center; margin-left: 6px; padding: 7px 13px;
  border: 1px solid rgba(212, 38, 51, .40); border-radius: 999px;
  color: var(--pri); font-size: 14.5px; letter-spacing: .4px; white-space: nowrap;
  transition: background .18s, border-color .18s;
}
.nav-hotline b { font-weight: 700; font-variant-numeric: tabular-nums; }
.nav-hotline:hover { background: rgba(212, 38, 51, .08); border-color: var(--pri); color: var(--pri); }
@media (max-width: 1020px) { .nav-hotline { display: none; } }

/* 首页 Hero · 品牌口号与热线 */
.hero-eyebrow {
  margin: 0 0 14px; color: var(--pri); font-size: 14px; font-weight: 600; letter-spacing: 2.5px;
  background: rgba(212, 38, 51, .07); border-color: rgba(212, 38, 51, .30);
}
.hero-hotline { color: var(--pri); font-weight: 700; font-variant-numeric: tabular-nums; }
.hero-hotline:hover { text-decoration: underline; }

/* 页脚 · 口号 */
.foot-slogan { margin: 6px 0 2px; color: var(--muted); font-size: 15px; letter-spacing: 1.5px; }

/* 产品页 · 型材色卡（画册统一 6 色）——浅色阴影口径 */
.pd-swatches {
  list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 18px 26px;
}
.pd-swatches li { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 64px; }
.pd-swatches i {
  display: block; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgba(22, 24, 29, .10);
  box-shadow: inset 0 1px 3px rgba(255, 255, 255, .35), 0 4px 12px rgba(22, 24, 29, .14);
}
.pd-swatches span { color: var(--text); font-size: 13px; }
.pd-colors-note { margin: 14px 0 0; color: var(--muted); font-size: 13.5px; }

/* 浅色下图片占位与混合模式兜底 */
.card-media img, .p-media img { mix-blend-mode: normal; }
.card-ph { color: var(--muted); }

/* 41.9 移除旧「栏目 hero 右侧玻璃图标」装饰（2026-09-20）
   30-35 章节六轮叠写出来的 ::before/::after 装饰用的是通用蓝紫图标包
   （购物袋/奖杯/Apple logo），与门窗品牌无关；浅灰摄影 hero 已足够。
   一刀切禁用全部伪元素装饰，位置/背景的历次覆盖全部失效。 */
.e-hero::before, .e-hero-page::before,
.e-hero::after, .e-hero-page::after,
.ps-hero::before, .ps-hero::after,
.cw-hero::before, .cw-hero::after,
.nl-hero::before, .nl-hero::after {
  content: none !important;
  display: none !important;
}

/* 41.10 页脚公司全称一行显示（2026-09-20）
   「佛山市维恪智能门窗有限公司」13 个字，窄屏下品牌栏被挤到折行；
   移动端缩字号并禁换行，保证版权主体全称始终一行。 */
.foot-name { white-space: nowrap; }
@media (max-width: 720px) {
  .foot-name { font-size: 15.5px; letter-spacing: .3px; }
}

/* 41.11 首页「产品体系」三卡自然一行（2026-09-20）
   通用 .grid 是 auto-fill，宽屏会算出 4 列留 1 个空位；
   这里只有 3 张卡，宽度够就精确 3 列铺满一行，窄屏单列，不出孤儿卡。 */
.grid-3 { grid-template-columns: 1fr; }
@media (min-width: 820px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
}

/* 41.12 品牌数字带：拉开间距自然铺排（2026-09-20）
   历次叠加后 gap:0 + 限宽 1120 + 每格 18px 26px，四项挤在中间；
   改为铺满容器宽、每格加大内边距，分隔线随格子自然拉开。 */
.stats-grid { max-width: none; }
.stats-grid > div { padding: 28px 48px; }
@media (max-width: 860px) {
  .stats-grid > div { padding: 20px 24px; }
}

/* 41.13 头部三钮重设计（2026-09-20）
   原状：热线红描边胶囊 + 秃搜索图标 + 实心红 CTA，三个都带按钮感、层级混乱。
   新层级：CTA（唯一动作钮，实心红）> 搜索（细边圆钮，工具组）> 热线（去描边，
   退为「红色圆底话筒 + 深色号码」的安静信息型组合，hover 才点亮红色）。 */
.site-nav .nav-hotline {
  margin-left: 12px; padding: 0; border: 0; background: transparent !important;
  gap: 9px; letter-spacing: .2px;
}
.nav-hotline svg {
  width: 30px; height: 30px; padding: 7.5px; box-sizing: border-box;
  border-radius: 50%; background: rgba(212, 38, 51, .10); color: var(--pri);
  transition: background .18s, color .18s;
}
.nav-hotline b { color: var(--ink); font-size: 15px; transition: color .18s; }
.nav-hotline:hover { border: 0; }
.nav-hotline:hover svg { background: var(--pri); color: #fff; }
.nav-hotline:hover b { color: var(--pri); }

/* 搜索：细边圆钮，与热线组成工具组 */
.site-nav .nav-search {
  width: 36px; height: 36px; margin-left: 14px; padding: 0;
  border: 1px solid var(--line);
  background: #fff !important; color: var(--text) !important;
  transition: border-color .18s, color .18s, background .18s;
}
.site-nav .nav-search:hover, .site-nav .nav-search.active {
  border-color: rgba(212, 38, 51, .55);
  background: #fdf1f2 !important; color: var(--pri) !important;
}

/* CTA：保持唯一实色主按钮，阴影收敛一点更挺括 */
.site-nav .nav-cta {
  margin-left: 16px; padding: 9px 22px;
  box-shadow: 0 4px 12px rgba(212, 38, 51, .22), inset 0 -2px 0 rgba(0, 0, 0, .08);
}
.site-nav .nav-cta:hover {
  box-shadow: 0 8px 20px rgba(212, 38, 51, .30), inset 0 -2px 0 rgba(0, 0, 0, .08);
}

/* 41.14 案例正文「案例实拍」图块（2026-09-20）
   老站案例只有实拍图 + 项目地点一句话，此前正文整块为空；
   正文首块渲染 figure（工程实拍大图 + 图注），有叙事字段时排在叙事链之前。 */
.cs-gallery { margin: 0 0 28px; }
.cs-gallery img {
  display: block; width: 100%;
  border-radius: var(--radius); border: 1px solid var(--line);
  box-shadow: 0 10px 28px rgba(22, 24, 29, .10);
}
.cs-gallery-cap {
  margin-top: 13px; text-align: center;
  color: var(--muted); font-size: 14px; letter-spacing: .3px;
  display: flex; align-items: center; justify-content: center; gap: 12px;
}
.cs-gallery-cap::before, .cs-gallery-cap::after {
  content: ''; height: 1px; width: 34px; background: var(--line); flex: none;
}

/* 41.15 分页重设计（2026-09-20）
   原状：裸数字小白块散落在灰底上，当前页无高亮。新版式：
   居中胶囊组 = 「‹ 上一页 / 数字页码 / 下一页 ›」，当前页实心红，
   首末页对应按钮禁用态占位；移动端只留箭头。 */
.pager { margin-top: 34px; justify-content: center; align-items: center; gap: 8px; }
.pager-btn {
  min-width: 40px; padding: 8px 13px; text-align: center;
  border-radius: 999px; border: 1px solid var(--line);
  background: #fff; color: var(--text); font-size: 14px; line-height: 1.5;
}
.pager-btn:hover {
  border-color: var(--pri); color: var(--pri); background: #fdf1f2;
  box-shadow: 0 6px 14px rgba(212, 38, 51, .12);
}
.pager-btn.on { background: var(--pri); border-color: var(--pri); color: #fff; font-weight: 600; }
.pager-btn.on:hover { color: #fff; transform: none; box-shadow: none; cursor: default; }
.pager-nav { display: inline-flex; align-items: center; gap: 2px; }
.pager-nav.is-dis { opacity: .4; pointer-events: none; }
@media (max-width: 720px) {
  .pager-nav > span { display: none; }
  .pager-btn { min-width: 38px; padding: 8px 12px; }
  .pager { gap: 6px; }
}

/* 41.16 产品列表宽屏大图版式（2026-09-20）
   分类筛选从左侧栏移到顶部横向胶囊（复用 .cat-pills），货架占满整行；
   卡片放大：minmax 340px 起步、图高 176→260px，宽屏三列大图。 */
.ps-page .cat-layout { display: block; margin-top: 10px; }
.ps-pills { margin: 4px 0 26px; }
.shelf-grid { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 26px; }
.shelf-media { height: 260px; }
.shelf-body { padding: 18px 22px 22px; gap: 11px; }
.shelf-title { font-size: 17.5px; }
.shelf-specs li { font-size: 13.5px; }
@media (max-width: 960px) {
  .shelf-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; }
  .shelf-media { height: 220px; }
}
@media (max-width: 640px) {
  .shelf-grid { grid-template-columns: 1fr; }
  .shelf-media { height: 230px; }
}

/* 41.17 带背景板块内容与背景左右留间距（2026-09-20）
   block-alt（首页标准配置/招商加盟渐变底）原左右 padding 仅 28px 且 section 全宽，
   内容几乎贴屏幕边。现内部包 .wrap（桌面 36px / 移动 20px，与全站容器对齐），
   背景-内容间距与 hero、cta-band 等其他带背景板块一致。 */

/* 41.19 分页圆钮抗锯齿（2026-09-20）
   原状：min-width+padding 算出的非整数高度 + 999px 大圆角 + 1px 边框，
   在 DPR 1 屏上圆缘光栅化出毛边。修法：
   ① 固定整数高度 40px（inline-flex 居中）；
   ② 数字钮固定 40×40 正圆（border-radius 50%，正圆比大圆角胶囊边缘干净）；
   ③ 同色 1px box-shadow 外扩做抗锯齿过渡带（红钮同色外扩、白钮浅灰外扩）。 */
.pager-btn {
  height: 40px; padding: 0 17px;
  display: inline-flex; align-items: center; justify-content: center;
  box-sizing: border-box; border-radius: 999px;
  box-shadow: 0 0 0 1px rgba(22, 24, 29, .035);
}
.pager-btn:not(.pager-nav) {
  width: 40px; padding: 0; border-radius: 50%;
}
.pager-btn.on {
  box-shadow: 0 0 0 1px var(--pri), 0 4px 10px rgba(212, 38, 51, .25);
}

/* 41.20 产品卡规格区排版松绑（2026-09-20）
   原状：键左对齐 + 值右对齐 + space-between 两端撑开，值一长就换行
   且换行行右对齐参差，键值挤在一起。改为「键列固定宽 + 值列左对齐悬挂」：
   长值换行后从值列起始处对齐，行距 7→9px，阅读节奏松下来。 */
.shelf-specs { gap: 9px; }
.shelf-specs li {
  display: grid; grid-template-columns: 4.8em minmax(0, 1fr);
  column-gap: 10px; align-items: baseline; line-height: 1.55;
}
.shelf-specs li b { font-weight: 400; }
.shelf-specs li span { text-align: left; }

/* 41.21 产品列表横条大图式重设计（2026-09-20）
   三列小卡 → 一行一款横条：左侧 42% 统一裁切大图，右侧型号 + 价格 +
   规格两列键值 + 「查看详情」按钮。悬停整卡上浮、图轻微放大。
   ≤820px 图文上下堆叠。模板结构不变，纯布局覆盖。 */
.shelf-grid { display: flex; flex-direction: column; gap: 24px; }
.shelf-card > a {
  display: grid; grid-template-columns: minmax(300px, 42%) 1fr;
  align-items: stretch;
}
.shelf-media {
  height: 100%; min-height: 316px; overflow: hidden;
  border-radius: 16px 0 0 16px;
}
.shelf-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.22, .61, .36, 1); }
.shelf-card:hover .shelf-media img { transform: scale(1.04); }
.shelf-body { padding: 28px 34px 26px; gap: 12px; }
.shelf-title { font-size: 21px; -webkit-line-clamp: 1; }
.shelf-price { font-size: 17.5px; }
.shelf-specs {
  padding: 16px 0 0; gap: 10px;
  grid-template-columns: 1fr 1fr; column-gap: 34px;
}
.shelf-card .card-more {
  margin-top: auto; align-self: flex-start;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 20px; border: 1px solid rgba(212, 38, 51, .45);
  border-radius: 999px; font-size: 13.5px;
  transition: background .18s, color .18s, border-color .18s;
}
.shelf-card .card-more:hover {
  background: var(--pri); color: #fff; border-color: var(--pri);
}
@media (max-width: 820px) {
  .shelf-card > a { grid-template-columns: 1fr; }
  .shelf-media { min-height: 0; height: 230px; border-radius: 16px 16px 0 0; }
  .shelf-body { padding: 20px 20px 22px; }
  .shelf-title { font-size: 18px; }
  .shelf-specs { grid-template-columns: 1fr; column-gap: 0; }
}

/* 41.21b 横条卡图片完整展示（2026-09-20）
   产品图多为竖长剖面图，cover 裁切会拉高卡片且标注被裁；
   改浅灰渐变底 + contain 完整展示，media 显式 block 让 100% 高生效。 */
.shelf-card .shelf-media { display: block; background: linear-gradient(180deg, #f7f8fa, #eef0f3); }
.shelf-card .shelf-media img { object-fit: contain; padding: 16px; }

/* 41.21c 修正：图不参与卡片高度计算（2026-09-20）
   img 的 height:100% 在「内容定高」的 grid 里会退化成原始比例，
   竖长剖面图把卡片撑到 600px+。改绝对定位铺满 media，卡片高度
   完全由右侧信息区决定，图 contain 完整展示、居中不裁。 */
.shelf-card .shelf-media { position: relative; height: auto; min-height: 320px; }
.shelf-card .shelf-media img,
.shelf-card .shelf-media .card-ph {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; padding: 16px;
}

/* 41.23 hero 主要产品胶囊：原为静态装饰 span，现为产品栏目真链接（2026-09-20）
   a 复用 span 胶囊外观，hover 反白为品牌红，提示可点。 */
.hero-chips a {
  display: inline-block; padding: 7px 18px; border-radius: 999px; font-size: 13.5px;
  margin: 5px 6px 0;
  background: #fff; border: 1px solid #d9dcdf; color: var(--pri);
  text-decoration: none;
  transition: background .18s, color .18s, border-color .18s, transform .18s;
}
.hero-chips a:hover {
  background: var(--pri); border-color: var(--pri); color: #fff;
  box-shadow: 0 6px 14px rgba(212, 38, 51, .16);
}
@media (max-width: 720px) {
  .hero-chips a { padding: 6px 12px; font-size: 12px; }
}

/* 41.24 头部宽度收容（2026-09-20 · 配合 VIDEOO 新字标）
   新字标横排内容更宽，导航一行放不下会折行；微收链接 padding 与三钮间距。 */
.site-nav .nav-item > a, .site-nav > a { padding-left: 9px; padding-right: 9px; }
.site-nav .nav-hotline { margin-left: 8px; }
.site-nav .nav-search { margin-left: 10px; }
.site-nav .nav-cta { margin-left: 12px; }

/* 41.25 报价卡文字排版优化（2026-09-20）
   原状：参数值右对齐，长值换行后参差难读；标题与参数区无层次。
   新设计：标题加品牌红竖条；参数区加「核心参数」小标；
   行改「固定标签列 + 左对齐值」网格，虚线分隔，数字用等宽数字。 */
.pd-rail-t { display: flex; align-items: center; gap: 9px; font-size: 16.5px; letter-spacing: .5px; }
.pd-rail-t::before {
  content: ''; flex: none; width: 4px; height: 17px; border-radius: 2px;
  background: linear-gradient(180deg, #e03642, #b01c28);
}
.pd-rail-kv-t {
  margin: 0 0 2px; font-size: 12.5px; font-weight: 600; color: var(--muted);
  letter-spacing: 2px;
}
.pd-rail-kv { padding-top: 2px; }
.pd-rail-kv li {
  /* 标签列用 max-content 自适应：原固定 4.6em（=66.7px）装不下「可视宽/高-上滑」
     这类 7 字标签（实需 ~91px），被挤成两行、行高从 33px 翻到 62px，整片参数
     参差又占地方。max-content 取同一 grid 内最宽标签（所有行仍共用一列、值照旧
     左对齐对齐），值列 minmax(0,1fr) 防止长值把轨道顶破容器。 */
  display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 10px;
  align-items: baseline; padding: 9px 0;
  border-bottom: 1px dashed var(--line);
}
.pd-rail-kv li:last-child { border-bottom: 0; padding-bottom: 2px; }
.pd-rail-kv li span { color: var(--muted); font-size: 12.5px; letter-spacing: .5px; white-space: nowrap; }
.pd-rail-kv li b {
  color: var(--ink); font-weight: 600; text-align: left;
  line-height: 1.68; font-variant-numeric: tabular-nums;
}

/* 41.26 招商加盟专属单页版式（2026-09-20 · page/join.html）
   区块化：数据带 / 六大优势卡 / 八大支持图卡 / 细则两列 / 合作流程。浅灰主题，品牌红点缀。 */
/* 前景数据带 */
.jn-band {
  background: linear-gradient(135deg, #fdf4f4, #f7f8fa);
  border: 1px solid var(--line); border-radius: 20px;
  padding: 30px 34px; margin: 0 0 46px;
}
.jn-band-t h2 { margin: 0 0 8px; }
.jn-band-t p { margin: 0 0 22px; color: var(--muted); font-size: 14.5px; }
.jn-stats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.jn-stats li {
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  padding: 18px 20px; box-shadow: 0 4px 14px rgba(22, 24, 29, .04);
}
.jn-stats li b { display: block; font-size: 30px; font-weight: 800; color: var(--pri); line-height: 1.2; letter-spacing: .5px; }
.jn-stats li span { display: block; margin-top: 7px; font-size: 12.8px; color: var(--muted); line-height: 1.55; }

/* 通用节 */
.jn-sec { margin: 0 0 52px; }
.jn-sec .block-head { margin-bottom: 28px; }
/* 41.31 浅灰底板块与主体同宽（2026-09-20）：去掉 -40px 两侧出血，
   底色块左右边缘与内容列对齐（内部卡片再用 28px 内边距留白） */
.jn-sec-alt { background: var(--soft); border-radius: 24px; padding: 44px 28px 36px; margin: 0 0 52px; }
@media (max-width: 900px) { .jn-sec-alt { padding: 34px 20px 30px; } }

/* 六大优势：3×2 卡 */
.jn-six, .jn-join, .jn-detail, .jn-steps { list-style: none; margin: 0; padding: 0; }
.jn-six { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.jn-six-card {
  position: relative; background: #fff; border: 1px solid var(--line);
  border-radius: 16px; padding: 24px 22px 20px;
  box-shadow: 0 4px 14px rgba(22, 24, 29, .04);
  transition: transform .18s, box-shadow .18s;
}
.jn-six-card:hover { box-shadow: 0 10px 24px rgba(212, 38, 51, .10); }
.jn-six-no {
  position: absolute; top: 18px; right: 20px;
  font-size: 26px; font-weight: 800; color: rgba(212, 38, 51, .14);
  font-variant-numeric: tabular-nums; line-height: 1;
}
.jn-six-card h3 { margin: 0 0 8px; font-size: 16.5px; color: var(--ink); letter-spacing: .5px; }
.jn-six-card h3::before {
  content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 2px;
  background: var(--pri); margin-right: 9px; vertical-align: 2px;
}
.jn-six-card p { margin: 0; font-size: 13.5px; line-height: 1.75; color: var(--muted); }

/* 八大支持：4×2 图卡 */
.jn-join { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.jn-join-card {
  position: relative; background: #fff; border: 1px solid var(--line);
  border-radius: 16px; overflow: hidden;
  box-shadow: 0 4px 14px rgba(22, 24, 29, .05);
  transition: transform .18s, box-shadow .18s;
  display: flex; flex-direction: column;
}
.jn-join-card:hover { box-shadow: 0 12px 26px rgba(212, 38, 51, .12); }
.jn-join-media { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #f2f3f5; }
.jn-join-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s; }
.jn-join-card:hover .jn-join-media img { transform: scale(1.04); }
.jn-join-body, .jn-join-card h3, .jn-join-card p { position: relative; }
.jn-join-no {
  position: absolute; top: 10px; left: 12px; z-index: 1;
  background: rgba(212, 38, 51, .92); color: #fff;
  font-size: 12px; font-weight: 700; line-height: 1;
  padding: 5px 8px; border-radius: 999px; font-variant-numeric: tabular-nums;
}
.jn-join-card h3 { margin: 14px 16px 6px; font-size: 15.5px; color: var(--ink); }
.jn-join-card p { margin: 0 16px 16px; font-size: 12.8px; line-height: 1.7; color: var(--muted); }

/* 细则：两列卡 */
.jn-detail { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.jn-detail-item {
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  padding: 20px 22px; border-left: 3px solid rgba(212, 38, 51, .55);
}
.jn-detail-item h3 { margin: 0 0 7px; font-size: 15px; color: var(--ink); }
.jn-detail-item p { margin: 0; font-size: 13.5px; line-height: 1.75; color: var(--muted); }

/* 合作流程：四步横排 */
.jn-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; counter-reset: jn; }
.jn-step { position: relative; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 22px 20px; text-align: center; }
.jn-step-no {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(212, 38, 51, .10); color: var(--pri);
  font-size: 16px; font-weight: 800; margin-bottom: 10px;
}
.jn-step h3 { margin: 0 0 6px; font-size: 15.5px; color: var(--ink); }
.jn-step p { margin: 0; font-size: 12.8px; line-height: 1.7; color: var(--muted); }
.jn-step:not(:last-child)::after {
  content: ''; position: absolute; top: 43px; right: -13px; width: 12px; height: 2px;
  background: rgba(212, 38, 51, .35);
}

/* 响应式 */
@media (max-width: 1020px) {
  .jn-join { grid-template-columns: repeat(2, 1fr); }
  .jn-steps { grid-template-columns: repeat(2, 1fr); }
  .jn-step:not(:last-child)::after { display: none; }
}
@media (max-width: 820px) {
  .jn-stats { grid-template-columns: repeat(2, 1fr); }
  .jn-six { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .jn-band { padding: 22px 18px; }
  .jn-join { grid-template-columns: 1fr; }
  .jn-detail { grid-template-columns: 1fr; }
  .jn-steps { grid-template-columns: 1fr; }
}

/* 41.27 首页门窗学院卡：栏目小标签 + 日期同行（2026-09-20 · 6条改版） */
.news-meta { display: flex; align-items: center; gap: 10px; }
.news-cat {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  background: rgba(212, 38, 51, .08); color: var(--pri);
  font-size: 12px; line-height: 1.6; letter-spacing: .5px;
}

/* 41.28 品牌实力系 4 个二级栏目专属单页（2026-09-20 · page/story|factory|honor|team）
   与招商加盟 join.html 同一设计语言：数据带 / 区块卡 / 红点缀。组件前缀 .bp-*。 */
/* 区块骨架（同 jn-sec 口径） */
.bp-sec { margin: 0 0 52px; }
.bp-sec .block-head { margin-bottom: 28px; }
.bp-sec-alt { background: var(--soft); border-radius: 24px; padding: 44px 28px 36px; margin: 0 0 52px; }
@media (max-width: 900px) { .bp-sec-alt { padding: 34px 20px 30px; } }

/* 金句带（品牌故事） */
.bp-quote {
  position: relative; text-align: center;
  background: linear-gradient(135deg, #fdf4f4, #f7f8fa);
  border: 1px solid var(--line); border-radius: 20px;
  padding: 40px 34px 34px; margin: 0 0 46px;
}
.bp-quote-mark {
  position: absolute; top: 2px; left: 22px;
  font-size: 84px; line-height: 1; font-weight: 800;
  color: rgba(212, 38, 51, .16); font-family: Georgia, serif;
}
.bp-quote-text { margin: 0; font-size: 27px; font-weight: 800; color: var(--ink); letter-spacing: 3px; }
.bp-quote-sub { margin: 12px auto 0; max-width: 560px; font-size: 14px; line-height: 1.8; color: var(--muted); }

/* 数据带 */
.bp-band {
  background: linear-gradient(135deg, #fdf4f4, #f7f8fa);
  border: 1px solid var(--line); border-radius: 20px;
  padding: 30px 34px; margin: 0 0 46px;
}
.bp-band-t h2 { margin: 0 0 8px; }
.bp-band-t p { margin: 0 0 22px; color: var(--muted); font-size: 14.5px; }
.bp-stats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.bp-stats li {
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  padding: 18px 20px; box-shadow: 0 4px 14px rgba(22, 24, 29, .04);
}
.bp-stats li b { display: block; font-size: 28px; font-weight: 800; color: var(--pri); line-height: 1.2; white-space: nowrap; font-variant-numeric: tabular-nums; }
.bp-stats li span { display: block; margin-top: 7px; font-size: 12.8px; color: var(--muted); line-height: 1.55; }

/* 导语段落 */
.bp-lede { margin: 0 0 14px; font-size: 15px; line-height: 1.95; color: var(--ink-soft, #3c4048); }
.bp-lede:last-child { margin-bottom: 0; }

/* 文字 + 图两栏 */
.bp-split { display: grid; grid-template-columns: 1.1fr .9fr; gap: 30px; align-items: center; }
.bp-split-media { margin: 0; }
.bp-split-media img { width: 100%; border-radius: 16px; border: 1px solid var(--line); box-shadow: 0 8px 24px rgba(22, 24, 29, .08); }
@media (max-width: 820px) { .bp-split { grid-template-columns: 1fr; gap: 18px; } }

/* 品牌故事「破/立」大卡 */
.bp-story { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.bp-story-card {
  position: relative; background: #fff; border: 1px solid var(--line);
  border-radius: 18px; padding: 30px 28px 26px;
  box-shadow: 0 4px 14px rgba(22, 24, 29, .04);
}
.bp-story-ch {
  position: absolute; top: 24px; right: 26px;
  width: 52px; height: 52px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(212, 38, 51, .08); color: var(--pri);
  font-size: 24px; font-weight: 800;
}
.bp-story-card h3 { margin: 0 0 12px; font-size: 18px; color: var(--ink); padding-right: 64px; }
.bp-story-card p { margin: 0; font-size: 14px; line-height: 1.95; color: var(--muted); }

/* 两列文字卡（荣誉·质量控制） */
.bp-duo { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.bp-duo-card {
  background: #fff; border: 1px solid var(--line); border-radius: 16px;
  padding: 26px 26px 22px; border-top: 3px solid rgba(212, 38, 51, .55);
  box-shadow: 0 4px 14px rgba(22, 24, 29, .04);
}
.bp-duo-card h3 { margin: 0 0 10px; font-size: 16.5px; color: var(--ink); }
.bp-duo-card p { margin: 0; font-size: 13.8px; line-height: 1.9; color: var(--muted); }

/* 六道质检步骤（3×2）与通用卡 */
.bp-steps, .bp-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.bp-step, .bp-card {
  position: relative; background: #fff; border: 1px solid var(--line);
  border-radius: 16px; padding: 24px 22px 20px;
  box-shadow: 0 4px 14px rgba(22, 24, 29, .04);
  transition: transform .18s, box-shadow .18s;
}
.bp-step:hover, .bp-card:hover { box-shadow: 0 10px 24px rgba(212, 38, 51, .10); }
.bp-step-no, .bp-card-no {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; height: 40px; padding: 0 10px; border-radius: 12px;
  background: rgba(212, 38, 51, .10); color: var(--pri);
  font-size: 15px; font-weight: 800; margin-bottom: 12px;
  font-variant-numeric: tabular-nums;
}
.bp-card-no { position: absolute; top: 18px; right: 18px; margin: 0; background: none; color: rgba(212, 38, 51, .22); font-size: 24px; min-width: 0; height: auto; padding: 0; }
.bp-step h3, .bp-card h3 { margin: 0 0 7px; font-size: 16px; color: var(--ink); letter-spacing: .5px; }
.bp-step p, .bp-card p { margin: 0; font-size: 13.2px; line-height: 1.75; color: var(--muted); }

/* 团队信条三卡 */
.bp-creed { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.bp-creed-card {
  background: #fff; border: 1px solid var(--line); border-radius: 16px;
  padding: 26px 24px 22px; border-left: 3px solid rgba(212, 38, 51, .55);
  box-shadow: 0 4px 14px rgba(22, 24, 29, .04);
}
.bp-creed-card h3 { margin: 0 0 9px; font-size: 16px; color: var(--pri); letter-spacing: 1px; }
.bp-creed-card p { margin: 0; font-size: 14.5px; line-height: 1.85; color: var(--ink); font-weight: 600; }

/* 图集（智造工厂） */
.bp-gallery { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.bp-gallery li { min-width: 0; }
.bp-gallery figure { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 14px; border: 1px solid var(--line); background: #f2f3f5; }
.bp-gallery img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s; }
.bp-gallery li:hover img { transform: scale(1.04); }
.bp-gallery p { margin: 9px 2px 0; font-size: 12.8px; color: var(--muted); text-align: center; }

/* 荣誉证书引导卡 */
.bp-note {
  display: flex; align-items: center; justify-content: space-between; gap: 26px;
  background: #fff; border: 1px dashed rgba(212, 38, 51, .45); border-radius: 18px;
  padding: 28px 30px;
}
.bp-note-text h3 { margin: 0 0 8px; font-size: 17px; color: var(--ink); }
.bp-note-text p { margin: 0; font-size: 13.8px; line-height: 1.85; color: var(--muted); }
.bp-note-actions { margin: 0; flex: none; display: flex; flex-direction: column; gap: 10px; }
@media (max-width: 820px) { .bp-note { flex-direction: column; align-items: stretch; } .bp-note-actions { flex-direction: row; flex-wrap: wrap; } }

/* 响应式 */
@media (max-width: 1020px) {
  .bp-steps, .bp-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 820px) {
  .bp-stats { grid-template-columns: repeat(2, 1fr); }
  .bp-story, .bp-duo { grid-template-columns: 1fr; }
  .bp-creed { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .bp-band { padding: 22px 18px; }
  .bp-quote { padding: 30px 20px 26px; }
  .bp-quote-text { font-size: 21px; letter-spacing: 2px; }
  .bp-quote-mark { font-size: 60px; left: 14px; }
  .bp-steps, .bp-cards, .bp-gallery { grid-template-columns: 1fr; }
}

/* 41.29 联系页 + 品牌实力页专属单页（2026-09-20 · page/contact / page/about） */
/* 联系页 */
.ct-cards { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .ct-cards { grid-template-columns: 1fr; } }
.ct-cards .contact-card { padding: 24px 24px; }
.ct-cards .contact-card b { font-size: 15.5px; }
.ct-cards .contact-card p { font-size: 14.5px; line-height: 1.7; }
.ct-hint { display: block; font-size: 12.5px; color: var(--muted); margin-top: 3px; }
.ct-hours {
  display: flex; align-items: center; gap: 14px;
  background: rgba(212, 38, 51, .06); border: 1px solid rgba(212, 38, 51, .18);
  border-radius: 14px; padding: 15px 22px; margin-top: 16px;
}
.ct-hours b { color: var(--pri); font-size: 15px; flex: none; letter-spacing: 1px; }
.ct-hours span { font-size: 14px; color: var(--muted); }
@media (max-width: 560px) { .ct-hours { flex-direction: column; align-items: flex-start; gap: 4px; padding: 14px 18px; } }

/* 品牌实力页：二级栏目入口卡 */
.bp-links { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.bp-link {
  display: block; background: #fff; border: 1px solid var(--line); border-radius: 16px;
  padding: 22px 20px 18px; text-decoration: none;
  box-shadow: 0 4px 14px rgba(22, 24, 29, .04);
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.bp-link:hover { box-shadow: 0 10px 24px rgba(212, 38, 51, .12); border-color: rgba(212, 38, 51, .35); }
.bp-link-no { font-size: 13px; font-weight: 800; color: var(--pri); letter-spacing: 2px; }
.bp-link h3 { margin: 8px 0 6px; font-size: 16.5px; color: var(--ink); letter-spacing: .5px; }
.bp-link p { margin: 0; font-size: 12.8px; line-height: 1.7; color: var(--muted); }
.bp-link-go { display: inline-block; margin-top: 12px; font-size: 13px; font-weight: 700; color: var(--pri); }
@media (max-width: 1020px) { .bp-links { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .bp-links { grid-template-columns: 1fr; } }
.bp-lede-more { margin-top: 16px; }
.bp-idea-head { margin-top: 44px; }

/* ---- 41.33 品牌文化 5 卡 / 沟通准备 4 卡排成一行（2026-09-20 · 用户反馈） ---- */
.bp-cards-5 { grid-template-columns: repeat(5, 1fr); }
.bp-steps-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) { .bp-cards-5, .bp-steps-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .bp-cards-5, .bp-steps-4 { grid-template-columns: 1fr; } }

/* ---- 41.34 hero 上下留白（2026-09-20 移动端统计卡贴底 → 2026-09-21 扩到全档位） ----
   37.1 把 .e-hero 上下 padding 归零做竖直居中，留白交给内层 .e-hero-in；
   但 ps-hero / nl-hero / 裸 .e-hero / e-hero-page 这些版式模板里都没有 .e-hero-in
   （全站模板从未用过该类），内容一超过 min-height 就直接顶到 hero 边界：
   实测 /product/ 在 390 / 560 / 720 / 768 / 860 / 1024 / 1280 / 1440 全档
   firstTop=0、lastBot=1 —— 眉标贴死上沿、统计卡贴死背景图下沿（用户截图那处）。
   cw-hero / e-hero-case 自带 .cw-hero-in / .e-hero-case-in 内边距、e-hero-mini 自带 22/20，
   一律排除，避免叠出双层留白。
   注意：本规则只碰上下 padding，不动 5.3 节那对「全出血负 margin + 等值水平 padding」。 */
.e-hero:not(.cw-hero):not(.e-hero-case):not(.e-hero-mini) {
  padding-top: 34px;
  padding-bottom: 38px;
}
@media (max-width: 720px) {
  .e-hero:not(.cw-hero):not(.e-hero-case):not(.e-hero-mini) {
    padding-top: 28px;
    padding-bottom: 32px;
  }
}

/* ---- 41.35 移动端数据带溢出修复（2026-09-20 · 用户反馈横向溢出） ----
   .bp-stats 折两列后，b 的 28px nowrap（如「近 20000 ㎡」）把 1fr 轨道最小宽度顶破容器。
   改 minmax(0,1fr) 收死轨道 + 移动端数字降号缩内边距。 */
@media (max-width: 820px) {
  .bp-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bp-stats li { padding: 14px 12px; min-width: 0; }
  .bp-stats li b { font-size: 19px; }
  .bp-stats li span { font-size: 12px; }
}

/* ---- 41.36 移动端底部转化带按钮 100% 全宽（2026-09-20 · 用户反馈） ----
   .detail-cta 是 flex 容器，.detail-cta-btns 作为 flex 项收缩到内容宽（~215px），
   子按钮的 width:100%（27.节规则）只能等于这个收缩宽；让按钮组 flex 占满整行。 */
@media (max-width: 720px) {
  .detail-cta { flex-direction: column; align-items: stretch; }
  .detail-cta-btns { flex: 1 1 100%; width: 100%; }
}

/* ---- 41.37 移动端抽屉底部动作区重塑（2026-09-21 · 用户反馈「移动端美化」） ----
   【问题】.nav-hotline / .nav-search / .nav-cta 都是 .site-nav 的直接子项，被 3.4
   移动端块的 `.site-nav > a{display:flex;justify-content:space-between;padding:12px 10px}`
   一并接管，于是：
     ① 热线变成「图标贴最左、号码贴最右」的超宽空行，中间一整片留白；
     ② 搜索按 36px 定高却被 flex-shrink 压到 20px，只剩一个秃图标吊在 CTA 上面；
     ③ 三件套各自为政，圆角/高度/间距都不统一，看着像没收尾。
   【方案】抽屉容器改 CSS Grid 两列：栏目链接整行铺满，底部动作区重排成
     「热线卡（图标 + 服务热线/号码两行，占满左侧）+ 搜索方钮（54×54，右侧）」一行，
     CTA 单独整行；统一 var(--radius)=14px 圆角与 54/50px 高度，成为一块整齐面板。
   桌面端零影响：所有规则只在 ≤1100px 生效。 */
@media (max-width: 1100px) {
  .nav-toggle:checked ~ .site-nav {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 10px;
    row-gap: 2px;
    padding: 12px 16px 20px;
  }
  /* 直接子项默认整行铺满（一级栏目 a / 二级栏目容器） */
  .site-nav > * { grid-column: 1 / -1; }
  /* 热线卡 + 搜索方钮：同处一行，各占一列 */
  .site-nav .nav-hotline { grid-column: 1 / 2; }
  .site-nav .nav-search { grid-column: 2 / 3; }

  /* --- 热线卡：图标 + 「服务热线 / 号码」两行文字，整块可点 --- */
  .site-nav .nav-hotline {
    margin: 12px 0 0; padding: 0 16px; height: 54px; min-width: 0;
    justify-content: flex-start; align-items: center; gap: 11px;
    border: 1px solid var(--line); border-radius: var(--radius);
    background: var(--soft) !important;
  }
  .site-nav .nav-hotline svg { width: 32px; height: 32px; padding: 8px; flex: none; }
  .site-nav .nav-hotline b {
    display: flex; flex-direction: column; justify-content: center;
    min-width: 0; line-height: 1.2; white-space: nowrap;
  }
  .site-nav .nav-hotline b::before {
    content: '服务热线';
    font-size: 11.5px; font-weight: 500; letter-spacing: 2px; color: var(--muted);
  }
  /* 卡片右侧补「拨打」提示：既给出可点暗示，也把号码后的大片留白收住 */
  .site-nav .nav-hotline::after {
    content: '拨打'; margin-left: auto; flex: none;
    font-size: 12px; font-weight: 600; letter-spacing: 1px; color: var(--pri);
    border: 1px solid rgba(212, 38, 51, .38); border-radius: 999px; padding: 4px 12px;
    transition: background .18s, color .18s, border-color .18s;
  }
  .site-nav .nav-hotline:hover::after { background: var(--pri); border-color: var(--pri); color: #fff; }

  /* --- 搜索方钮：与热线卡同高，纯图标 --- */
  .site-nav .nav-search {
    margin: 12px 0 0; padding: 0; width: 54px; height: 54px;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--line); border-radius: var(--radius);
    background: #fff !important; color: var(--text) !important;
  }
  .site-nav .nav-search svg { width: 20px; height: 20px; }
  .site-nav .nav-search:hover, .site-nav .nav-search.active {
    border-color: rgba(212, 38, 51, .55);
    background: #fdf1f2 !important; color: var(--pri) !important;
  }

  /* --- CTA：整行铺满，统一圆角与高度 --- */
  .site-nav .nav-cta {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 50px; margin: 10px 0 0; padding: 0 18px;
    border-radius: var(--radius);
    font-size: 16px; font-weight: 700; letter-spacing: 1px;
    box-shadow: 0 8px 20px rgba(212, 38, 51, .26);
  }

  /* --- 抽屉打开时隐藏右下角悬浮件（留资按钮 / 客服浮窗），避免压住 CTA --- */
  body:has(#navToggle:checked) .ld-br .ld-btn,
  body:has(#navToggle:checked) .fs-float { display: none !important; }
}

/* ---- 41.38 移动端抽屉「倒三角」升级为折叠钮（2026-09-21 · 用户反馈） ----
   【问题】移动端 caret 只是 <a> 内部一个 8×5 的装饰三角，没有任何独立点击区，
   点它等同于点一级栏目链接 → 直接跳到栏目页、整个抽屉连同菜单一起关闭，
   用户感知就是「我点三角，菜单被点没了」。
   同时二级菜单在 ≤1100px 是静态常展开（3.3 移动端块），既没有折叠手段，
   6 个栏目铺开又把抽屉拉得很长。
   【方案】≤1100px 把 caret 提为独立折叠钮：
     ① 44×44 触控热区（三角改用 ::before 重画，本体只做热区不做变形，
        显式 transform:none 压掉 3.10 的 hover 整体旋转，避免与定位打架）；
     ② 点击只切换本栏子菜单，由 .nav-item.open 驱动展开态（三角翻转 180° + 变品牌红）；
     ③ 子菜单默认收起，当前所在栏目由模板输出 open 类进站即展开。
   桌面端零影响：规则全在 ≤1100px 内，JS 在 ≥1101px 直接放行原链接行为。 */
@media (max-width: 1100px) {
  /* 一级栏目行右侧腾出折叠钮的位置 */
  .site-nav .nav-item > a { position: relative; padding-right: 58px; }

  /* --- caret：从装饰图标升级为 44×44 折叠钮 --- */
  .site-nav .nav-item > a .caret {
    position: absolute; right: 6px; top: 50%; margin: -22px 0 0;
    width: 44px; height: 44px;
    border: 0; border-radius: 10px; opacity: 1;
    display: flex; align-items: center; justify-content: center;
    transform: none; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .site-nav .nav-item > a .caret::before {
    content: ''; width: 0; height: 0;
    border-left: 4.5px solid transparent; border-right: 4.5px solid transparent;
    border-top: 5.5px solid var(--muted);
    transition: transform .22s ease, border-top-color .22s ease;
  }
  .site-nav .nav-item > a .caret:active { background: #f5f6f8; }

  /* --- 二级菜单：默认收起，.open 展开（覆盖 3.3 的静态常展开） ---
     ★必须连 :hover / :focus-within 一起写死：全局第 66 行
     `.site-nav .nav-item:hover > .nav-drop,:focus-within>.nav-drop{display:block}` 权重 (0,4,0)
     高于单写 `.nav-item > .nav-drop` 的 (0,3,0)，触屏上手指点完还停在行上（并让 <a> 获得焦点），
     会把已收起的子菜单又顶回来 —— 表现为「点三角能开、再点关不掉」。 */
  .site-nav .nav-item > .nav-drop,
  .site-nav .nav-item:hover > .nav-drop,
  .site-nav .nav-item:focus-within > .nav-drop { display: none; }
  .site-nav .nav-item.open > .nav-drop,
  .site-nav .nav-item.open:hover > .nav-drop,
  .site-nav .nav-item.open:focus-within > .nav-drop { display: block; }
  .site-nav .nav-item.open > a .caret::before {
    transform: rotate(180deg); border-top-color: var(--pri);
  }
  .site-nav .nav-item.open > a { color: var(--pri); }

  /* 折叠态下键盘 Tab 焦点可见 */
  .site-nav .nav-item > a .caret:focus-visible {
    outline: 2px solid rgba(212, 38, 51, .5); outline-offset: 1px;
  }
}

/* ============================================================
   41.39 全站 CTA 按钮：移动/平板端 100% 全宽（2026-09-21 · 用户反馈）
   ------------------------------------------------------------
   【问题】各容器原本的「满宽」规则断点散落且不齐，导致移动端出现
   "按钮按内容宽缩在中间、一条长一条短"的状态：
     · .e-hero-cta / .detail-cta / .cta-band / .pd-final-btns / .cs-final-btns → 720px
     · .nl-cta-btns / .cw-final-btns                                        → 560px
     · .bp-note-actions / .e-404-links / .pd-cta / .block-more → 无
   于是 561~720、768~1024（平板 / 手机"桌面版视图"980）整段区间全部裸奔。
   【口径】≤1024px 统一为「容器竖直堆叠 + 按钮整行等宽 + 文案居中」；
   >1024px 维持原样（横排 inline-block），桌面零回归。
   ============================================================ */
@media (max-width: 1024px) {
  /* --- 1. 外层容器：由横排改竖排 ---
     注意：这些外层原本只在 ≤720 才竖排（.pd-final/.cs-final 在 2194 行、.cta-inner 在 247 行），
     或压根没竖排（.nl-cta-in/.cw-final-in），必须一并覆盖到 1024，
     否则按钮组作为 flex 项会被收缩成内容宽（实测 768/1024 下 .pd-final-btns 只剩 211px）。 */
  .detail-cta,
  .cta-inner,
  .pd-final, .cs-final,
  .nl-cta-in,
  .cw-final-in,
  .bp-note { flex-direction: column; align-items: stretch; }

  /* --- 2. 按钮组：竖排 + 统一 10px 行距 --- */
  .e-hero-cta,
  .hero-btns,
  .detail-cta-btns,
  .cta-btns,
  .pd-cta,
  .pd-final-btns,
  .cs-final-btns,
  .cw-final-btns,
  .nl-cta-btns,
  .bp-note-actions,
  .e-404-links {
    display: flex; flex-direction: column; flex-wrap: nowrap;
    align-items: stretch; gap: 10px;
  }

  /* --- 3. 按钮本体：整行等宽、居中、去掉横向外边距 --- */
  .e-hero-cta .btn-pri, .e-hero-cta .btn-ghost,
  .hero-btns a,
  .detail-cta-btns .btn-pri, .detail-cta-btns .btn-ghost, .detail-cta-btns .btn-line,
  .cta-btns .btn-pri, .cta-btns .btn-ghost, .cta-btns .btn-line,
  .pd-cta .btn-pri, .pd-cta .btn-ghost, .pd-cta .btn-line,
  .pd-final-btns a, .cs-final-btns a, .cw-final-btns a, .nl-cta-btns a,
  .bp-note-actions .btn-pri, .bp-note-actions .btn-ghost, .bp-note-actions .btn-line,
  .e-404-links .btn-pri, .e-404-links .btn-ghost {
    display: block; width: 100%; flex: 1 1 auto;
    margin: 0; text-align: center;
  }

  /* --- 4. 次级转化钮见下方 720 断点（平板上保持横排，避免一根巨长按钮） --- */
}
@media (max-width: 720px) {
  /* 区块底部「查看全部产品」等单按钮 */
  .block-more .btn-pri, .block-more .btn-line { display: block; width: 100%; margin: 0; }
}

/* 561~720 区间 .nl-cta-btns / .cw-final-btns 原本要到 560 才满宽，
   上面 1024 层已覆盖；此处仅保留原有 560 断点内的其它声明不受影响。 */

/* ============================================================
   41.40 移动端右下角转化区统一（2026-09-21 · 用户反馈）
   ------------------------------------------------------------
   【问题】产品详情页移动端底部同时挂了多套联系入口，互相打架：
     ① .pd-stickybar（≤860px 常驻）里的「电话咨询」—— 与右下角客服浮窗常驻的
        电话图标完全重复（用户原话「电话咨询多余了，右侧有电话」）；
     ② 浮窗本体：电话 / 微信 / 返回顶部；
     ③ lead_form 插件的「免费获取方案」胶囊（fixed right:18px bottom:22px）——
        正好压在第①条常驻条上：实测 ld-btn 787~828、stickybar 782~844，
        同一条横带上并排两个转化件，既遮挡又不成体系。
   【方案】
     A. 模板层（product.html）：常驻条去掉「电话咨询」，只在存在询价/预约入口时
        才渲染整条（本站在线询价未开启 → 移动端不再出现常驻条）。
     B. 样式层：「免费获取方案」收成一枚与浮窗 .fs-btn 完全同规格、同配色的圆钮
        （46px / 白底 / 品牌红图标 / 间距 10px），并由 lead_form 的脚本把它插进浮窗、
        落在「电话」按钮正上方；并入后整条列贴底（.fs-float.fs-lead-in）。
        ★ 该样式现已由 lead_form 插件统一输出、且对所有宽度生效（不再局限于移动端），
          此处不再重复定义，避免两处规则打架。
     C. 浮窗内把条件项「返回顶部」用 order 提到顶端：浮窗 bottom 定位、向上生长，
        底位若留给初始隐藏的返回顶部，会在图标列中间空出约 66px 的空洞；
        移到顶端后底位恒为电话/微信，整条列的间距才稳定。
   2026-09-21 起桌面也并入同一条列（用户要求「排到电话上面、配色与电话统一」），
   原「>1024px 保留大胶囊 CTA」的做法作废。
   ============================================================ */
@media (max-width: 1024px) {
  /* --- C. 浮窗条件项归位到顶端，底位恒为电话/微信 --- */
  body .fs-float .fs-top { order: -1; }

  /* --- 悬浮件 hover 一律不位移：与全站按钮约定一致（位移会把按钮推出光标热区，
         触发 hover↔unhover 热区循环 → 表现为「鼠标放上去偶尔闪一下」） --- */
  body .fs-btn:hover,
  body .fs-float.fs-on .fs-top:hover {
    transform: none;
  }
}

/* ============================================================
   41.41 文章详情页（.detail-news）：栏目药丸与列表页统一 + 文末美化
         2026-09-21 · 用户反馈「文章详情页要与文章列表页 CAT 统一，同时做美化」

   【问题】列表页有 .cat-pills（全部 / 选购指南 / 安装与保养 / …），详情页一个都没有 ——
   访客读完一篇想横向看看同栏目的其它分类，只能退回上一页再点，动线断在这里。
   两边头部与文末收尾也是各写各的：列表页是 e-hero 大条 + nl-cta，
   详情页只有一行 e-eyebrow 小标签 + nw-soft 细条。
   （↑ 这段描述的是本层改造**之前**的情形。其中的 nl-cta 与 nw-soft 两条收尾带
     均已废弃，列表页与详情页现在统一使用全站基准 .cta-band —— 见 1966 行停用说明。）

   【方案】
     A. 栏目药丸：详情页复用列表页**同一个 .cat-pills 组件、同一套取数**
        （Front::article() 里的 side_nav / side_parent，取法与 category() 逐字一致），
        放进已经太空的 .e-hero-mini；同时把原来那行「只有栏目名」的 .e-eyebrow 去掉 ——
        药丸的高亮项说的就是同一件事，写两遍只是噪音。
        hero 内容左边界实测与 .nw-wrap / .nw-card 完全对齐（1440→36px，390→16px），
        所以药丸天然落在正文同一列，不需要额外限宽或搬位置。
     B. 上下篇：原先只有「上一篇 + 标题」两行字，现补缩略图 / 日期 / 方向图标。
        只有一侧邻居时（首篇 / 末篇）保持半宽、留在原列，由模板补一个空占位 span 顶住第一列。
     C. 弱转化细条：三种联系方式各配一枚线条图标 —— 并排三组纯文字很难一眼分辨
        「哪个能直接拨、哪个是微信」，图标补的就是这个辨识度，不加转化强度。

   【必须注意】20.6 节（≈2187 行）在 @media(max-width:720px) 里有
   `.nw-nav{grid-template-columns:1fr}` 与 `.nw-nav-a.next{text-align:left}`，位于本节之前。
   本节规则带 .detail-news 前缀（特异性 0,2,0）会把那两条窄屏形态顶掉，
   所以本节末尾必须自己再声明一次窄屏形态，否则手机端会被打回双列 + 右对齐。
   ============================================================ */

/* --- A. 栏目药丸：只收外边距；尺寸 / 配色 / 高亮一律沿用列表页那份，保证两页长得一模一样 --- */
.detail-news .nw-pills { margin: 0; }
.detail-news .nw-pills + .e-desc { margin-top: 10px; }

/* --- B. 上下篇 --- */
/* 卡片：横排「缩略图 + 文字块」；下一篇镜像（图在右、字靠右）。
   只有一侧邻居时不去动网格：缺上一篇由模板补一个空占位 span 顶住第一列，
   让「下一篇」仍落在右半 —— 保持半宽比拉成整行更像一张卡（理由见模板注释）。 */
.detail-news .nw-nav-a {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 16px;
  transition: border-color .2s, box-shadow .2s;
}
.detail-news .nw-nav-a.next { flex-direction: row-reverse; text-align: right; }

/* --- B3. 缩略图：固定 4:3 小图。暗色结构图缩到这个尺寸仍能当色块辨认；
       有无图都占同一格，两张卡的高度才会齐 --- */
.detail-news .nw-th {
  flex: none; width: 108px; aspect-ratio: 4 / 3; overflow: hidden;
  border: 1px solid var(--line); border-radius: 10px; background: #f1f3f6;
}
.detail-news .nw-th img { display: block; width: 100%; height: 100%; object-fit: cover; }
.detail-news .nw-th-ph { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: #c3c8d0; }
.detail-news .nw-th-ph svg { width: 26px; height: 26px; }

/* --- B4. 文字块 --- */
.detail-news .nw-nav-b { display: block; min-width: 0; }
.detail-news .nw-nav-a .dir { display: inline-flex; align-items: center; gap: 5px; margin: 0 0 7px; font-weight: 600; }
.detail-news .nw-nav-i { flex: none; width: 14px; height: 14px; transition: transform .2s ease; }
/* 悬停只动箭头与文字色，绝不动卡片本身 —— 卡片位移会把光标甩出热区，
   反过来触发 unhover，表现为「鼠标放上去偶尔闪一下」（同一坑见 41.39 / 41.40 两节） */
.detail-news .nw-nav-a.prev:hover .nw-nav-i { transform: translateX(-3px); }
.detail-news .nw-nav-a.next:hover .nw-nav-i { transform: translateX(3px); }
.detail-news .nw-nav-a .t {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  font-size: 15px; line-height: 1.6; transition: color .18s;
}
.detail-news .nw-nav-a:hover .t { color: var(--pri); }
.detail-news .nw-nav-m { display: block; margin: 6px 0 0; font-size: 12.5px; color: var(--muted); }

/* --- C. （原）弱转化细条的图标对齐 —— 随 .nw-soft 停用一并移除（见 1966 行说明），
   收尾块已改用全站统一的 .cta-band，这里不再需要任何补偿规则。 --- */

@media (max-width: 720px) {
  /* 窄屏形态必须在这里重声明一次：原因见本节开头「必须注意」 */
  .detail-news .nw-nav { grid-template-columns: 1fr; gap: 10px; }
  .detail-news .nw-nav-a.next { flex-direction: row; text-align: left; }
  .detail-news .nw-th { width: 92px; }
}

/* ============================================================
   41.42 产品详情 hero：宽屏铺满版心 + 图文间距（2026-09-21）
   ------------------------------------------------------------
   用户反馈：宽屏下 hero「文字和图片中间间距」太窄，不像宽屏版式。

   ★ 根因（反直觉，改动前务必读完）：
     .pd-hero 是 flex-direction: column 容器（20.1 节为了垂直居中而设），
     而 .pd-hero-in / .pd-hero-points 都带 `margin: 0 auto`。
     在 flex 列容器里，水平方向的 auto margin 会把 item 的 `width: auto`
     解释成 fit-content（收缩到内容宽度），而不是像普通块级那样撑满父容器。
     实测 1920 视口：版心内容盒 1464px，但 .pd-hero-in 只有 1024px、
     .pd-hero-points 只有 811px —— 两者各自居中，谁也不挨着正文。

   由此产生两个可见后果（就是用户看到的问题）：
     ① 文↔图间距被死死压在 gap 的 44px 上 —— 因为左列恰好被文字撑满，
        加宽视口不会让间距变大，宽屏下反而显得挤；
     ② hero 内容左缘比正文（.pd-wrap，左缘 228px）内缩 220px，
        首屏和正文左右不齐，整块像"浮"在中间。

   做法：显式给 width: 100% 让它们恢复撑满版心，间距改由 gap 承担；
        左列文字限宽，避免描述被拉成超长行。

   ★ 别把 width:100% 收进媒体查询：960~1080px 一档同样是两列布局，
     同样会收缩（实测 1080 视口 hero-in 950 / points 759，正文 1008），
     收进 min-width:1081 就会在断点前后出现「1086 对齐、1080 不对齐」的跳变。
     ≤960 是单列，撑满本就是它的自然形态，这条对它是无害的空操作。
   ============================================================ */
.pd-hero-in, .pd-hero-points { width: 100%; }

@media (min-width: 1081px) {
  /* 间距由 gap 承担（原来 44px，但那时左列被文字撑满、间距恒等于 gap，
     加宽视口也不会变大，宽屏下反而最挤）。现在：1920 视口文↔图 224px、
     1440 视口 128px，随视口变宽而递增 —— 这才是宽屏版式该有的样子。 */
  .pd-hero-in { gap: 72px; }
  /* 左列 1fr 会用满整列宽度把文字顶到图片跟前，限宽后间距才真正"看得见" */
  .pd-hero-l { max-width: 880px; }
}

/* ============================================================
   41.43 产品货架卡「查看详情」hover 反色修复（2026-09-21）
   ------------------------------------------------------------
   用户反馈：鼠标移到产品列表的「查看详情」按钮上，字看不见了。

   ★ 根因（!important 压过选择器特异性，很隐蔽）：
     3913 行 .shelf-card .card-more:hover 设了
       background: var(--pri); color: #fff; border-color: var(--pri);
     意图是让胶囊反色成「红底白字」。但 28.3 节那条全局规则带 !important：
       .card-more:hover, .svc-more:hover, .news-more:hover, .pain-grid a:hover
         { color: #b01c28 !important; transform: translateX(3px); }
     !important 的优先级高于特异性，所以 color 被强制留在 #b01c28，
     只有 background 真的变成了 #d42633。
     实测 hover 计算值：color rgb(176,28,40) on background rgb(212,38,51)
     —— 红底 + 深红字，对比度约 1.3:1，肉眼基本看不见字。

   ★ 修法：只在这一条上把 color 也补成 !important（与对方对等），
     不去动 28.3 节那条历史规则 —— 它还管着 svc-more / news-more /
     pain-grid，去掉它的 !important 会牵动其他页面的静默行为。
   ============================================================ */
.shelf-card .card-more:hover { color: #fff !important; }

/* ============================================================
   41.44 文末「上一篇 / 下一篇」→ 收尾 CTA 的间距收口（2026-09-21）
   ------------------------------------------------------------
   用户反馈（截图）：文章详情页「上一篇」卡片底边到 cta-band 顶边空了一大块。

   ★ 这 154px（1440 实测；1086 实测 140px）是三处留白叠出来的：
       24px  .nw-nav margin-bottom    —— 原是给「继续阅读 / 弱转化细条」留的，
                                        nw-soft 已在 41 层前删除，这 24px 成了纯空档；
     + 64px  .nw-wrap padding-bottom  —— 正文容器底部内衬；
     + 66px  .cta-band margin-top（≥1100px 档）—— 页面级收尾带的统一上边距。

   ★ 修法：把这三处叠加全部归零，让收尾带的间距回到「它在全站其它页面上的统一值」。
     只收「文章详情页 + 正文末尾紧跟收尾带」这一种情形，其余页面不动：
     · article.detail-news 是文章详情页专属（全站唯一用 .nw-wrap 的模板）；
     · :has(+ .cta-band) 保证只有收尾带真的紧跟其后时才生效，
       将来文末再插别的模块，这两条自动失效，不会误伤；
     · .nw-foot > .nw-nav:last-child 只命中「nav 是文末最后一个子元素」，
       有「继续阅读」时 nav 不是 last-child，那 24px 保留。
   净结果：154px → 52px（<1100px）/ 66px（≥1100px 宽屏放大档），与列表页一致。
   ============================================================ */
article.detail-news:has(+ .cta-band) { margin-bottom: 0; }
article.detail-news:has(+ .cta-band) .nw-wrap { padding-bottom: 0; }
.nw-foot > .nw-nav:last-child { margin-bottom: 0; }

/* ============================================================
   41.45 三类详情页顶部留白归零：分类（栏目药丸 / hero）紧贴导航（2026-09-21）
   ------------------------------------------------------------
   用户反馈（截图）：产品、案例、文章详情页的「分类与导航之间」空着一块。

   ★ 根因：第 171 行基础层 `.detail { margin: 30px auto 44px; }` 的 margin-top 30px
     只对「单页」被归零了（1326 行 `.detail.page { margin-top: 0; }`），
     三类详情页用的是 .detail-product / .detail-case / .detail-news，从未纳入 →
     导航底(67px)与首个内容块之间固定多出 30px。
     实测（1440 视口，scrollY=0，header bottom=67）：
       全部列表页 / 单页：article top=67 → 首块 top=67   ← 全站规范
       产品详情：article top=97（+30）→ 首块顶 = 导航 + 30 + pd-hero 自身 40
       案例详情：article top=97（+30）→ 首块顶 = 导航 + 30 + 0
       文章详情：article top=97（+30）→ 首块顶 = 导航 + 30 + e-hero-mini 22
     也就是说这 30px 是「漏改」，不是设计值。

   ★ 修法：与 .detail.page 同一口径归零。首块自身的 padding-top 保留不动，
     所以归零后各自的起始留白仍是各自的设计语言：
       产品详情 → pd-hero padding-top 40px（浅色渐变块顶到导航下方）
       案例详情 → e-hero-case padding 0 + 内层 .e-hero-case-in 92/64（整幅 hero 无缝接导航）
       文章详情 → e-hero-mini padding-top 22px（紧凑栏目条）
     选择器带 .detail 前缀提高特异性(0,2,0)，压过基础层 (0,1,0)，
     只覆盖这三类，不碰 .detail.page 与其它页面。
   ============================================================ */
article.detail.detail-product,
article.detail.detail-case,
article.detail.detail-news,
article.detail.detail-dealer { margin-top: 0; } /* 2026-10-12 增补：分销商详情页（show-dealer）同口径归零，避免导航下 30px 空带 */

/* ============================================================
   42. 首页营销动线重构（2026-09-21）
   ------------------------------------------------------------
   背景：首页原有 12 块内容全部讲「我们有什么」，顺序是
     Hero → 产品体系 → 标准配置 → 数字带 → 产品列表 → 案例 → 品牌实力
          → 定制流程 → 招商加盟(整块 8 卡) → FAQ → 学院 → CTA
   问题（营销视角）：
     ① 招商加盟整块插在 FAQ 前 —— C 端业主主线被 B 端内容打断；
     ② 品牌数字在第 4 块、品牌实力在第 7 块，信任来得太晚；
     ③ 7936px 长页只有 2 个转化点，中间四五屏没有下手机会；
     ④ 「标准配置」讲了六条结构，却没有一张能比较的表替客户做决定；
     ⑤ 独立「品牌数字带」与 Hero 的 4 条速览完全重复。
   本轮动线：给谁 → 解决什么 → 凭什么信 → 想要哪个 → 犹豫什么 → 现在做什么
     新增 3 块（需求分流 / 配置对比 / 售后保障）、招商加盟压缩为横幅、
     删重复数字带、产品列表与工程案例后各补一个转化触点。

   本节只写「新增模块」的样式；能复用既有组件的（.block / .block-head /
   .card / .stats-* / .cta-band）一律复用，不另起炉灶。
   ============================================================ */

/* 通用无障碍隐藏（对比表 caption 用） */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---- 42.1 需求分流（.need-grid）：首屏之后第一块，把三类访客送对路 ---- */
.need-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; list-style: none; margin: 0; padding: 0; }
.need-grid li {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  transition: box-shadow .22s ease, transform .22s ease, border-color .22s ease;
}
.need-grid li:hover { border-color: transparent; box-shadow: var(--shadow-lg); }
.need-grid a { display: flex; flex-direction: column; height: 100%; padding: 28px 26px 24px; color: inherit; text-decoration: none; }
.need-ico {
  display: inline-flex; width: 46px; height: 46px; align-items: center; justify-content: center;
  border-radius: 14px; background: rgba(212, 38, 51, .08); color: var(--pri); margin-bottom: 16px;
}
.need-ico svg { width: 24px; height: 24px; }
.need-grid h3 { margin: 0 0 8px; font-size: 17.5px; color: var(--ink); line-height: 1.5; }
.need-grid p { margin: 0 0 16px; color: var(--muted); font-size: 14px; line-height: 1.75; }
.need-link { margin-top: auto; font-size: 13.5px; font-weight: 600; color: var(--pri); }
.need-grid a:hover .need-link { text-decoration: underline; }

/* ---- 42.2 配置对比表（.cmp-table）：本页最有力的一块，把「配置说清」变成可比较的表 ---- */
.cmp-wrap { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 8px 8px 20px; }
.cmp-table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.cmp-table th, .cmp-table td { text-align: left; padding: 14px 18px; border-bottom: 1px solid var(--line); vertical-align: top; }
.cmp-table thead th { font-size: 12.5px; letter-spacing: 1.2px; color: var(--muted); font-weight: 800; background: #f7f8fa; }
.cmp-table tbody th { width: 104px; color: var(--ink); font-weight: 700; white-space: nowrap; }
.cmp-table tbody td { color: var(--muted); line-height: 1.7; }
.cmp-table .cmp-us { color: var(--ink); font-weight: 600; background: rgba(212, 38, 51, .05); }
.cmp-table thead .cmp-us { color: var(--pri); background: rgba(212, 38, 51, .10); }
.cmp-table tbody tr:last-child th, .cmp-table tbody tr:last-child td { border-bottom: 0; }
.cmp-note {
  margin: 16px 12px 0; padding: 14px 18px; border-radius: 14px;
  background: #f7f8fa; color: var(--text); font-size: 14px; line-height: 1.75;
}
.cmp-wrap .block-more { margin-top: 20px; }

/* ---- 42.3 售后保障（.assure-grid）：补「买完之后谁管」，正对下单前最后一层顾虑 ---- */
.assure-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; list-style: none; margin: 0; padding: 0; }
.assure-grid li { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 22px; }
.assure-ico {
  display: inline-flex; width: 42px; height: 42px; align-items: center; justify-content: center;
  border-radius: 12px; background: rgba(212, 38, 51, .08); color: var(--pri); margin-bottom: 14px;
}
.assure-ico svg { width: 22px; height: 22px; }
.assure-grid h3 { margin: 0 0 8px; font-size: 16.5px; color: var(--ink); }
.assure-grid p { margin: 0; color: var(--muted); font-size: 13.8px; line-height: 1.75; }

/* ---- 42.4 招商加盟横幅（.join-band）：已停用（2026-09-21） ----
   原因：它与紧随其后的 .cta-band 是页面末尾连续两块，视觉上像两个并列的收尾带，
   用户要求「融为一个 CTA」。现加盟内容降为 .cta-band 块内的二级文字入口（.cta-sub，见 42.7 层），
   .join-band 全站已无引用，规则整段删除，仅留此说明避免误判「样式丢失」。 */

/* ---- 42.5 轻转化触点（.mid-cta）+ 双按钮 block-more 间距 ---- */
.mid-cta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px;
  margin: 28px 0 0; padding: 22px 26px;
  background: linear-gradient(135deg, var(--blue-50), var(--blue-100));
  border: 1px solid #f6dcdf; border-radius: 18px;
}
.mid-cta p { margin: 0; color: var(--text); font-size: 14.5px; line-height: 1.75; }
.mid-cta p b { display: block; margin: 0 0 4px; color: var(--ink); font-size: 16px; }
.mid-cta .btn-pri { flex: none; }
/* 同一块里并排两个出口按钮时，才启用 flex 间距；单按钮的 block-more（全站其它页面）完全不受影响。
   ★选择器必须写成「相邻两个按钮」的通用形态（> a + a），**不能绑定先后顺序**：
     原写法 :has(.btn-line + .btn-pri) 只认「线按钮在前」，而首页售后保障块是主按钮在前
     （.btn-pri + .btn-line）→ 静默失配，两个按钮在手机上直接贴死（41.39 层给 .block-more
     的按钮设了 margin:0，间距全靠 flex gap 提供）。2026-09-21 用户反馈「两个按钮中间留间距」即此。 */
.block-more:has(> a + a) { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }

/* ---- 42.7 收尾 CTA 内的二级文字入口（.cta-sub）：加盟路径，不抢主转化视线 ----
   用 (0,2,0) 压过 .cta-text p（0,1,1），所以 margin 必须显式写回，
   否则会继承 .cta-text p 的 margin:0 之外还有 16.6 层的 color 覆盖。 */
.cta-band .cta-sub {
  margin: 14px 0 0; padding-top: 13px;
  border-top: 1px dashed rgba(212, 38, 51, .22);
  font-size: 13.6px; line-height: 1.7; opacity: 1; color: var(--muted);
}
.cta-band .cta-sub a { color: var(--pri); font-weight: 600; white-space: nowrap; }
.cta-band .cta-sub a:hover { text-decoration: underline; }
/* 注：本带当前为浅蓝底（16.6 层覆盖了 14.4 层的深色底）。若将来切回深色底，
   需补一条 .cta-band .cta-sub { color: rgba(255,255,255,.78) } + a 用 #fff，
   否则 muted 灰在深底上对比度不足。 */

/* ---- 42.6 新增模块的响应式 ---- */
@media (max-width: 1024px) {
  /* 需求分流：三条竖排（三列在平板宽度下每列不足 240px，标题会折得很碎） */
  .need-grid { grid-template-columns: 1fr; gap: 16px; }
  .need-grid a { padding: 22px 20px 20px; }
  /* 售后保障：四列收成两列 */
  .assure-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  /* 轻转化条：竖排 + 按钮满宽（与全站 41.39 层移动端 CTA 口径一致） */
  .mid-cta { flex-direction: column; align-items: stretch; gap: 14px; padding: 20px 18px; }
  .mid-cta .btn-pri { display: block; width: 100%; text-align: center; margin: 0; }
  .block-more:has(> a + a) { flex-direction: column; gap: 10px; }
  .block-more:has(> a + a) > a { display: block; width: 100%; text-align: center; }
  /* 收尾 CTA 的加盟二级入口：窄屏居中排（cta-inner 此时已是 column + text-align:center） */
  .cta-band .cta-sub { margin-top: 12px; padding-top: 12px; }
}

@media (max-width: 720px) {
  .assure-grid { grid-template-columns: 1fr; }
  /* 对比表：三列在手机上会被挤成竖条，改为「一行一块」的卡片式堆叠，
     用 td 上的 data-k 标注这一格说的是哪一边，不损失对比关系 */
  .cmp-table thead { display: none; }
  .cmp-table, .cmp-table tbody, .cmp-table tr, .cmp-table th, .cmp-table td { display: block; width: auto; }
  .cmp-table tbody tr { padding: 16px 0; border-bottom: 0; }
  .cmp-table tbody tr + tr { border-top: 1px solid var(--line); }
  .cmp-table tbody th { padding: 0 0 10px; font-size: 15.5px; white-space: normal; border-bottom: 0; }
  .cmp-table tbody td { margin: 0 0 8px; padding: 10px 12px; border: 0; border-radius: 12px; background: #f7f8fa; }
  .cmp-table tbody td::before {
    content: attr(data-k) "："; display: block; margin-bottom: 3px;
    font-size: 12.5px; font-weight: 700; color: var(--muted);
  }
  .cmp-table tbody td.cmp-us { background: rgba(212, 38, 51, .06); }
  .cmp-table tbody td.cmp-us::before { color: var(--pri); }
  .cmp-note { margin: 14px 6px 0; }
}

/* ============================================================
   43. 灰色渐变浅底块的文字对比度（2026-09-21 换色配套）
   ------------------------------------------------------------
   背景：浅色渐变的起点由淡蓝 #f2f7ff 换成灰 #e3e3e3 之后，块内文字对比度整体下降。
   Chrome 1440 实渲实测（取渐变最深的 #e3e3e3 端，最保守口径）：
     · 灰字 --muted #6b7076  → 3.89:1   （AA 正文要 4.5）—— 6 处失败
     · 红字 --pri   #d42633  → 3.97:1   （同上）—— 8 处失败
   注意：这两个色在白色卡面上分别是 4.90:1 / 5.09:1，是及格的；
         只有在新的灰底上才不到线。所以修法不是改全站色板，而是「只在灰底块内部加深」。

   修法：
     · 灰字：在这几类块里把 --muted 重定义为 #3d4147（= --text），实测 8.00:1
     · 红字：只改 color（不动 border / background），#d42633 → #b01c28，实测 5.38:1
   ★ 不要在这些块里整体重定义 --pri：.btn-pri 的 background 也用 var(--pri)，
     那样会把块内主按钮的底色一起改深 → 同一颗按钮在不同板块颜色不一致。
   ------------------------------------------------------------
   命中块 = 以灰起色的浅色块：.block-alt / .about-band / .cta-band / .mid-cta
            / .pd-final / .cs-final / .svc-info-item / .cs-quote
   ============================================================ */
.block-alt, .about-band, .cta-band, .mid-cta,
.pd-final, .cs-final, .svc-info-item, .cs-quote { --muted: #3d4147; }

/* 红字：逐条加深（只写 color） */
.block-alt .need-link,
.block-alt .btn-line,
.about-band .btn-line,
.cta-band .btn-line,
.cta-band .btn-ghost,
.cta-band .cta-sub a,
.pd-final .btn-ghost,
.pd-final-wx b,
.cs-final .btn-ghost,
.cs-quote .btn-line { color: #b01c28; } /* = --pri-d，在 #e3e3e3 上 5.38:1 */

/* ============================================================
   44. 文章 / 资讯列表行 hover（2026-09-21 · 随全站浅色板收口）
   ------------------------------------------------------------
   背景：全站浅色渐变已由淡蓝 #f2f7ff 改成灰 #e3e3e3 → 浅粉 #fdf2f3（见 16.1 / 43 层），
         资讯流（category/index.html 的 .nl-*）行 hover 却还停在旧蓝调 #f7faff，
         是站内最后一处「蓝调残留」：整页白 + 一行淡蓝，怎么调都像外来的。
   改法：底色直接吃色板变量 --blue-100（= #fdf2f3，与 .site-nav > a:hover / .pager a:hover
         / .breadcrumb a:hover 的浅粉同源），并补三层「这一行被选中」的视觉：
           · 左缘 3px 品牌红竖条（与 .cat-side a:hover::before 同一语言）
           · 缩略图轻微放大 + 浮起阴影（.nl-thumb 已 overflow:hidden，图片顶不出去）
           · 标题由 --pri 加深到 --pri-d（粉底上 6.30:1，比 --pri 的 4.65:1 更实）
   注意：
     ① 底色必须是**纯色**不能是渐变 —— 渐变走 background-image，不可 transition，
        会丢掉 2278 行动画里那个 .18s 的柔和淡入；
     ② 竖条用 scaleY 从中间长出，不用 width/left（避免逐帧重排）；
     ③ 增强全部包在 @media (hover: hover) 里：触屏 tap 会「粘住」hover 态，
        资讯流行高 162px，粘住整行变粉很难看；键盘 :focus-visible 放在媒体查询外，
        Tab 走到这一行时同样给出竖条与底色。
   ============================================================ */
@media (hover: hover) {
  .nl-link:hover { background: var(--blue-100, #fdf2f3); }
  .nl-link:hover .nl-title { color: var(--pri-d, #b01c28); }
  /* 阴影用中性色而不是红调 rgba(212,38,51,.13)：粉色底上红影几乎看不见（实测与底色差 <3 级灰度），
     换成与 --shadow 同族的中性深色才读得出「图浮起来了」 */
  .nl-link:hover .nl-thumb { box-shadow: 0 12px 26px rgba(22, 24, 29, .18); }
  .nl-link:hover .nl-thumb img { transform: scale(1.05); }
}

/* 左缘竖条：常驻 3px 轨道，未选中时 scaleY(0) 收起；行左右各 6px 内衬，竖条压不到文字 */
.nl-link { position: relative; }
.nl-link::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--pri); transform: scaleY(0); transition: transform .22s ease;
}
@media (hover: hover) { .nl-link:hover::before { transform: scaleY(1); } }

/* 键盘可达性：与 hover 同形（底色 + 竖条 + 描边），Tab 切行时不会「看不出停在哪」 */
.nl-link:focus-visible {
  background: var(--blue-100, #fdf2f3);
  outline: 2px solid var(--pri); outline-offset: -2px;
}
.nl-link:focus-visible::before { transform: scaleY(1); }
.nl-link:focus-visible .nl-title { color: var(--pri-d, #b01c28); }

/* 过渡：外框阴影给容器，图片放大给 img 自己（transform 在 overflow:hidden 内做，无布局抖动） */
.nl-thumb { transition: box-shadow .24s ease; }
.nl-thumb img { transition: transform .34s cubic-bezier(.22, .61, .36, 1); }

/* 缩略图缺图时的占位底也换成中性暖灰（原来偏冷的 #f0f1f3→#f7f8fa） */
.nl-ph { background: linear-gradient(135deg, #f1efef, #f8f7f7); }

/* 小屏补竖条净空：≤860 行内衬只有 2px，3px 竖条会压到日期年份的首字
   （实测 480 下「2022.12」左缘距行左仅 0.7px，竖条盖住前 2 px）。
   给行补出净空：左 10px（= 竖条 3 + 净空 7）、右 8px，让文字到竖条与到行右缘的视觉留白接近。 */
@media (max-width: 860px) {
  .nl-link, .nl-item-top .nl-link { padding: 18px 8px 18px 10px; }
}

/* ============================================================
   45. 首页「门窗定制流程」手机端压缩：卡片列表 → 时间轴（2026-09-21 · 用户反馈）
   ------------------------------------------------------------
   背景：.steps 在 ≤640px 降为单列卡片（见 3.8 / 3.8a），每步独占一行卡片。
         480 实渲：4 条各 162px、连 gap 共 714px，整块 990px —— 而这段四步文案
         加起来不到 90 字。手机上前一屏刚看完「配置对比」，紧接着又是一整屏
         纵向卡片，滚动节奏被拖慢，用户反馈「每个占一行，太占空间」。

   改法：≤640px 把卡片语言换成**时间轴**（与案例详情 .cs-step 同一套语言）：
     · 去卡片底 / 去描边 / 去阴影，编号圆钉收窄到 34px 独占左列
     · 标题与描述退到右列：标题 15.8px 与圆钉垂直居中，描述紧随其下一行
     · 圆钉之间用 2px 竖线相连（渐隐收尾），最后一步不出线，收口干净

   收益（480 实渲）：块高 990px → 约 576px，卡片区 714px → 约 298px（省 58%），
   四步仍在一屏内看得完，且「一路往下走」的时间轴比四张并列卡片更贴合流程语义。

   注意：
     ① 只在 ≤640 生效；641–1100 的 2 列卡片、≥1101 的 4 列卡片不动（那两档卡片有宽度，不浪费）。
     ② 必须显式指定 grid 行列：li 内是 3 个子元素（.step-no / h3 / p），
        自动排布会把 p 塞进第 2 行第 1 列（圆钉下面），要手写 grid-area 把它按到右列。
     ③ 竖线挂 ::after 并绝对定位：绝对定位的 grid 子项不参与轨道分配，
        用 ::before 则会占掉第 1 格，把 .step-no 挤到第二行。
     ④ 16.4 层给所有卡片卡了 hover 的 translateY(-3px) + 阴影，移动端已无卡片面，
        浮起会很怪，且触屏 tap 会「粘住」hover 态，这里一并清掉。
     ⑤ 圆钉与竖线共用中线 x=17px（圆钉 34/2），竖线 top 从圆钉底下方 10px 起，
        视觉上是「钉 → 短线 → 下一颗钉」，不会顶到圆钉边缘。
   ============================================================ */
@media (max-width: 640px) {
  .steps { grid-template-columns: 1fr; gap: 0; }

  .steps li {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    grid-template-rows: 34px auto;
    column-gap: 14px; row-gap: 5px;
    align-items: start;
    background: transparent; border: 0; border-radius: 0; box-shadow: none;
    padding: 0 0 18px; margin: 0;
    position: relative;
  }
  .steps li:last-child { padding-bottom: 0; }
  /* 无卡片面 → 取消浮起与阴影（含触屏残留 hover 态） */
  .steps li:hover { transform: none; box-shadow: none; }

  .steps li > .step-no {
    grid-area: 1 / 1 / 2 / 2;
    justify-self: start; align-self: start;
    width: 34px; height: 34px; font-size: 14.5px; letter-spacing: 0;
  }
  .steps li > h3 {
    grid-area: 1 / 2 / 2 / 3;
    align-self: center;
    margin: 0; font-size: 15.8px; line-height: 1.4;
  }
  .steps li > p {
    grid-area: 2 / 2 / 3 / 3;
    margin: 0; font-size: 13.8px; line-height: 1.65;
  }

  /* 连接线：从本步圆钉下方 6px 拉过整行、直到下一颗圆钉边缘（bottom:-2 会被
     下一颗圆钉盖住，视觉上正好「钉—线—钉」连成一串）；最后一步不出线 */
  .steps li::after {
    content: "";
    position: absolute; left: 16px; top: 40px; bottom: -2px; width: 2px;
    background: linear-gradient(180deg, #d9dce2 0%, #e9ebef 100%);
    border-radius: 2px;
  }
  .steps li:last-child::after { content: none; }
}

/* ============================================================
   47. 首页「工程案例」六卡固定网格（2026-09-21 · 用户要求取一级栏目全部内容）
   ------------------------------------------------------------
   背景：首页工程案例由「两个子栏目各保底 1 条 → 3 条」改为「客户案例一级栏目
         + 全部子栏目，按最新取 6 条」。条数变成 6，就必须管列数了：
         原来的 .grid 是 auto-fill（1440 下 minmax(352px,1fr) = 3 列，
         ≤1024 下 minmax(226px,1fr)），在 1086~1100 这一段会变成 **4 列** ——
         6 条排成 4+2，第二行右边空两格，是最难看的残缺行。

   ★类名必须另起（.grid-6），**不能复用已有的 .grid-3**：
     41.11 层的 .grid-3 是「3 张卡」专用的（默认 1 列、≥820 三列），
     已在首页「产品体系」「产品列表」两处使用。第一版改错了类名，
     结果把这两个块在 461~1024 从 1 列顶成 2 列 —— 复用别人的语义类是最隐蔽的越界。

   做法：给该块单独的 .grid-6，显式三档列数，保证任何宽度下都是整行：
           ≥1025 → 3 列（两行）  ·  461~1024 → 2 列（三行）  ·  ≤460 → 1 列
   放在文件末尾是为了同特异性下压过 104 / 105 / 257 / 267 / 278 行那几条 `.grid` 规则
   （同为 (0,1,0)，靠书写顺序取胜；用 (0,2,0) 的 `.block .grid-6` 也行，但没必要）。
   ============================================================ */
.grid-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1024px) { .grid-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px) { .grid-6 { grid-template-columns: 1fr; } }

/* ============================================================
   48. 案例列表收尾 CTA 四角「直角 + 悬空弧线」修正
   ------------------------------------------------------------
   症状（2026-09-21 用户截图 · 移动端案例页）：.cw-final-in 明明写着
     border-radius: 16px + 1px 粉边，画面上四个角却是直角，只在角内侧
     留着一圈孤零零的圆弧描边，像「圆角没生效」。
   成因（★不是漏写圆角，是父级把缺口填回来了）：
     27.9 层给**外层** .cw-final 也刷了同一道渐变，而外层 radius=0，
     且与内层 .cw-final-in 尺寸逐像素重合（480 下同为 448×222，1440 下同为
     1368×115 —— 外层无 padding / border / 子元素 margin，父子盒子完全等大）。
     内层用圆角切掉的四块「缺口」，立刻被外层的方角背景填平 ——
     于是只剩 1px 描边还能看见弧线，填充看着是直角。
     27.10 层其实早已把渐变挪到 -in 上并加了 !important，27.9 那半截是历史遗留。
   做法：外层在「自己包着圆角卡片」时不再上色。用 :has() 兜底而非直接删
     27.9 里的 .cw-final —— 万一以后有模板只用 .cw-final 而不带内层，
     渐变还在，不会退化成一块白底。
     特异性 (0,2,0) > 27.9 的 (0,1,0)，不依赖书写顺序。
   同类扫描：radius_leak_scan.cjs（父级有背景无圆角 + 子级圆角且盒子重合 → 命中）
     本次全站 23 页抽样只命中 .cw-final 这一处，其余收尾块（.cs-final / .pd-final /
     .cta-band）都是「自己就是卡片」，元素自带圆角，不存在此问题。
   ============================================================ */
.cw-final:has(.cw-final-in) { background: none; }

/* ============================================================
   49. 移动端资讯列表行精修（2026-09-21 · 用户「移动端文章列表再美化」→ 选「微创精修」）
   ------------------------------------------------------------
   375 / 480 实测的五个观感问题：
     · 左侧红日期「27」是 21px/800 —— 全行最重的元素，视线先被日期带走，标题反成次要；
     · 年月 11.5px 用 --muted(#6b7076)，且文本实测 51px > 列宽 48px（已各溢 1.5px 啃 gap）；
     · 缩略图 76px 方图、无描边无底色，黑底爆炸图在白页上就是一块「黑砖」；
     · 分类「门窗学院」是裸灰字，与首条的「推荐」红胶囊不属同一套语言；
     · 分割线用 --line(#e5e7ea)，在纯白页面上偏深，行看着老派。
   改法（**结构与信息一律不动**，≥861px 桌面端一行不改）：
     · 日期 21→18px（保留品牌红，仍是记忆点），年月 11.5→11px 且加深到 #565c64（4.9:1 → 6.6:1），
       gap 3→2px、letter-spacing .4→.2px（让「2022.12」实测宽 47.4px 收进 48px 列内，不再啃 gap）；
     · ★列宽 48 + gap10 + 1fr + gap10 + 80：与原来的 48/12/1fr/12/76 **标题可用宽度逐像素相同**
       （480 下同为 282px、375 下同为 175px），缩略图净增 4px，一个字都不牺牲；
     · 缩略图加 1px 描边 + 极浅灰底 + 1px 投影、圆角 8→10 —— 黑底图有明确边界、白底图有衬托；
     · 分类改浅灰胶囊（11.5px/600），与「推荐」红胶囊成套（红=推荐，灰=普通）；
     · 分割线与列表上边线调浅到 #eef0f2（白页上仍是清晰的分行，但不抢眼）；
     · 触屏补 :active 底色 —— 没有 hover 的设备按下去必须有反馈，否则「点不动」。
   ============================================================ */
@media (max-width: 860px) {
  .nl-thumb {
    border: 1px solid #e7e9ec; background: #f7f8fa; border-radius: 12px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
  }
  .nl-cat {
    padding: 2px 9px; border-radius: 999px;
    background: #f1f3f5; color: #545a63;
    font-size: 11.5px; font-weight: 600;
  }
  .nl-item { border-bottom-color: #eef0f2; }
  .nl-list { border-top-color: #eef0f2; }
}
@media (max-width: 560px) {
  /* ⚠️⚠️ 2026-09-22 修复栅格错位（用户截图报「移动端文章列表」）：
     这一档原来写死三列「48px minmax(0,1fr) 80px」，是按「日期列仍在第一列」的前提算的
     （原注释还写着"标题可用宽度与原口径逐像素相同"）—— 但 .nl-date 在 ≤860 层就已 display:none，
     ★**display:none 的元素不参与栅格自动放置**，于是后面两项整体左移一格：正文被塞进 48px 的日期列
     （393 实测每行只能放 3 个字，标题被压成「什么样的…」）、缩略图顶替主列变成 195px 大方图、
     第三列 80px 整列空着。**这是栅格错位，不是审美问题。**
     修法：本档不再自定义列（交给 ≤860 层的「minmax(0,1fr) 92px」两列），只保留移动端专属精修。
     ⚠️ 将来若要恢复日期列，必须**同时**把 .nl-date 的 display 改回来，否则再次整体左移。
     （原来这档的 .nl-date b/span 字号调优已随之删除 —— 元素都不显示了，调它没有意义。） */
  /* 行内距 18→16px：★行高其实由 88px 缩略图决定（113px），与标题 1 行还是 2 行无关
     → 10 条列表的行高天然完全整齐（实测前 6 条全是 113px），不会出现「长短行交替」的乱节奏。 */
  .nl-link, .nl-item-top .nl-link { padding: 16px 8px 16px 10px; }
  /* 标题行高 1.55→1.45：字号保持 16.5px 不缩水，390 档下两行标题的块感更紧凑、更像资讯流 */
  .nl-title, .nl-item-top .nl-title { line-height: 1.45; }
  /* 列表与上方筛选药丸的间距 26→20px，首屏能多露出小半条 */
  .nl-body .ps-pills { margin-bottom: 20px; }
  /* 缩略图圆角由 ≤860 层的 12px 统一接管（原来这档写 8px，与站内卡片 12~14px 的语言不一致） */
}
@media (hover: none) {
  .nl-link:active { background: #fafbfc; }
}

/* ============================================================
   50. 出厂六道质检 · 配图版卡片（2026-09-21 · page/honor.html）
   ------------------------------------------------------------
   背景：用户「@截图 配上图片」——这一块原是 6 张纯文字卡
     （编号胶囊 + 标题 + 一行说明），在浅灰底上像 6 张白纸，
     读完记不住任何一道工序，也撑不起「品控」这件事的可信度。
   做法（**只影响本块**；page/contact.html 的 .bp-steps-4 纯文字四步卡不受影响，
     故新增修饰类 .bp-steps-media 承载，不去改基础层的 .bp-step）：
     · 媒体卡结构 = figure（图）+ .bp-step-body（文）；
     · 图 3:2 铺满卡宽；编号胶囊从标题上方「搬」到图片左上角压图
       （白底 + 品牌红字 + 轻投影，压在暗车间图上依然清楚），
       标题与说明退到下方正文区；
     · 卡内衬从 24px 22px 20px 归零，改由 figure 与 .bp-step-body 各承担 ——
       否则四周会留出一圈白边，图贴不到圆角；
     · hover：卡片上浮（沿用基础层）+ 图 1.05 缓放（.4s），
       给「正在看哪一道」以反馈；≤560 单列时图收到 16:9，别让一张图占满一屏。
   图片：/uploads/site/check/check-01~06.webp（1200×800，工位实景生成图**纯裁切**得到，
     无合成、无抠图、不换底；右下角 AI 水印整块裁除）。
   ============================================================ */
.bp-steps-media .bp-step { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.bp-steps-media .bp-step-media {
  position: relative; margin: 0; aspect-ratio: 3 / 2; overflow: hidden;
  background: #eef0f3;
}
.bp-steps-media .bp-step-media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .4s ease;
}
.bp-steps-media .bp-step:hover .bp-step-media img { transform: scale(1.05); }
.bp-steps-media .bp-step-no {
  position: absolute; left: 14px; top: 14px; margin: 0;
  min-width: 38px; height: 38px; border-radius: 11px;
  background: rgba(255, 255, 255, .94); color: var(--pri);
  /* 描边 + 投影：6 张图里有 3 张上半部是亮车间/亮顶棚，
     纯白胶囊压上去会「糊」进背景，靠这两笔把边界钉住 */
  border: 1px solid rgba(16, 24, 40, .10);
  box-shadow: 0 2px 10px rgba(16, 24, 40, .18);
}
.bp-steps-media .bp-step-body { padding: 17px 20px 19px; flex: 1 1 auto; }
@media (max-width: 560px) {
  .bp-steps-media .bp-step-media { aspect-ratio: 16 / 9; }
}

/* ============================================================
   51. 六大专业中心 · 配图版卡片（2026-09-21 · page/team.html）
   ------------------------------------------------------------
   背景：用户「@截图 配图」——这一块原是 6 张 427×104 的纯文字白卡
     （左标题 + 右上大号浅红编号 + 一行说明），在渐变底上像 6 张便签，
     看不出「六个专业中心」是干什么的。
   做法（**只影响本块**；page/about.html 的「品牌文化」用 .bp-cards-5 + .bp-card
     共用基础层，直接改基础层会连坐，故新增修饰类 .bp-cards-media 承载）：
     · 版式 = **左图右文**：图钉 172px、1:1，右侧文字区纵向居中；
       卡片高度由 min-height 撑到 170px（原来 104px），整块只长高约 130px，
       保住「带照片的组织架构」的紧凑感，不像上图下字那样一涨 560px。
     · 图用绝对定位铺满左格 —— 行高变化时图自动跟着长，不会露白边；
       图自带圆角由卡片 overflow:hidden 统一裁出。
     · 编号仍是那枚右上角大号浅红数字（**保留本块原有语言，不改样式**），
       故 h3 留 padding-right 42px 兜住，避免长标题压到数字上。
     · hover：沿基础层卡片上浮 + 图 1.06 缓放（.45s），给「正在看哪一个」以反馈。
   图片：/uploads/site/center/center-01~06.webp（900×900，1:1）
     —— 工位/空间实景生成图**纯裁切**得到（不抠图、不换底、不调色、不合成）；
     源图 1024×1024 的右下角 AI 水印裁 (37,0,987,950) 整块剔除
     （水印实测 x[894,1014] y[954,1004]，裁带下沿 950 < 954）。
     营销/生产/质研 三张为「人 + 岗位」实景，行政/信息/财务 三张为空间空镜（无人）。
   ============================================================ */
.bp-cards-media .bp-card {
  padding: 0; overflow: hidden;
  display: grid; grid-template-columns: 172px minmax(0, 1fr);
  align-items: stretch; min-height: 170px;
}
.bp-cards-media .bp-card-media {
  position: relative; margin: 0; overflow: hidden; background: #eef0f3;
}
.bp-cards-media .bp-card-media img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block; transition: transform .45s ease;
}
.bp-cards-media .bp-card:hover .bp-card-media img { transform: scale(1.06); }
.bp-cards-media .bp-card-body {
  padding: 20px 22px; display: flex; flex-direction: column; justify-content: center;
}
.bp-cards-media .bp-card-body h3 { padding-right: 42px; }
/* 断点跟 .bp-cards 自身走：>1020 三列 / 561~1020 两列 / ≤560 单列。
   两列段卡片宽度会从 438px 一路缩到 244px，故列宽用 clamp 跟着容器缩，
   再在 ≤700 单独收一档 —— 否则 561~700 这段图会挤掉正文。 */
@media (max-width: 1020px) {
  .bp-cards-media .bp-card { grid-template-columns: clamp(140px, 44%, 172px) minmax(0, 1fr); min-height: 150px; }
  .bp-cards-media .bp-card-body { padding: 17px 19px; }
}
@media (max-width: 700px) {
  .bp-cards-media .bp-card { grid-template-columns: 116px minmax(0, 1fr); min-height: 116px; }
  .bp-cards-media .bp-card-body { padding: 14px 16px; }
  .bp-cards-media .bp-card-body h3 { padding-right: 30px; }
}
@media (max-width: 560px) {
  .bp-cards-media .bp-card { grid-template-columns: 150px minmax(0, 1fr); min-height: 150px; }
  .bp-cards-media .bp-card-body { padding: 16px 18px; }
}

/* ============================================================
   52. 下线栏目 hero 右上角的 3D 玻璃装饰图标（2026-09-22 · 用户要求「全站图片都要有真实感」）
   这些玻璃拟态图标（themes/default/img/hero-about|case|news|product|visual.webp）是纯 CG 装饰图，
   与"真实感"调性冲突；用户选择直接去掉，版面更干净。
   ⚠️ 图标是写在 `.e-hero::before / ::after` 与 `.ps-hero/.cw-hero/.nl-hero::after` 上的，
      32~35 章反复调过它的位置/去背框 → 这里用 content/display/background 三写全关，并放在文件最末确保最后生效。
   如需恢复：删掉本段即可（图标文件仍在 themes/default/img/）。 */
.e-hero::before, .e-hero-page::before,
.e-hero::after, .e-hero-page::after,
.ps-hero::after, .cw-hero::after, .nl-hero::after,
.hero-visual::before, .hero-visual::after {
  content: none !important;
  display: none !important;
  background: none !important;
}

/* ============================================================
   53. 各栏目差异化 hero 背景（2026-09-22 · 用户要求「根据当前栏目内容设计 hero 背景图，要真实」）
   10 个栏目各配一张 AI 实拍风背景图（1536×614 = 2.5:1）：
     about 企业总部园区 / story 门窗细节微距 / factory 铝型材加工车间 / team 上门量尺现场
     honor 成品门窗检测区 / join 门窗品牌展厅 / contact 企业接待区 / product 产品样窗陈列
     case 住宅外立面门窗安装 / news 门窗工艺样品静物台
   ★ 为什么放文件最末 + 用 .e-hero.X 复合选择器：
     `.e-hero` / `.e-hero-page` 在 style.css 里有 9+ 组背景规则，27.1（约 3054 行）是当前生效的那条
     （带 hero-list-2026.webp）。这里用 (0,2,0)/(0,3,0) 的复合选择器，稳赢 (0,1,0) 的基础层与
     `.ps-hero` / `.cw-hero` / `.nl-hero`，不依赖书写顺序，也不需要 !important。
   ⚠️ 历史坑（已查明，勿再踩）：第 2912 / 3063 两处 `.e-hero-page { background-image: ... url('hero-page.webp') center / cover; }`
     把定位/尺寸写进了 `background-image`，**整条声明被 CSS 解析器丢弃** → hero-page.webp 从来没被请求过（0 请求死图）。
     这也是当年「单页 hero 换图没反应」的真因。以后写 `background-image` 只能放纯 <image> 值，
     定位/尺寸要么走 `center / cover` 放进 `background` 简写，要么单独写 background-position / background-size。
   ★ 图片用 CSS 变量承载：`url()` 带不了 media() 的 ?v= 版本号，所以文件名一律带年份
     （hero-<section>-2026.webp）；日后换图 = 换文件名 + 改下面那一行 --hero-img。
   ★ 遮罩分两档（见 53.2）：左区实测亮度 <130 的 4 张（factory/honor/join/product）用强档，
     其余用标准档，保证左侧深色标题（#16181d）始终可读，同时右侧仍透出实景。
   ============================================================ */

/* ---- 53.1 标准档遮罩 + 统一承载（10 个栏目全部登记在此，避免 --hero-img 缺失导致整条 background 失效）---- */
.e-hero.e-hero-page.e-hero-about,
.e-hero.e-hero-page.e-hero-story,
.e-hero.e-hero-page.e-hero-factory,
.e-hero.e-hero-page.e-hero-team,
.e-hero.e-hero-page.e-hero-honor,
.e-hero.e-hero-page.e-hero-join,
.e-hero.e-hero-page.e-hero-contact,
.e-hero.e-hero-product,
.e-hero.e-hero-caselist,
.e-hero.e-hero-news {
  --hero-m1: linear-gradient(90deg, rgba(255,255,255,.88) 0%, rgba(255,255,255,.72) 42%, rgba(255,255,255,.30) 72%, rgba(255,255,255,.10) 100%);
  --hero-m2: linear-gradient(180deg, rgba(255,255,255,.72) 0%, rgba(255,255,255,.42) 52%, rgba(255,255,255,.74) 100%);
  background:
    var(--hero-m1),
    var(--hero-m2),
    var(--hero-img) center / cover no-repeat,
    #ffffff;
  background-size: auto, auto, cover, auto;
}

/* ---- 53.2 为什么只有一个遮罩档（2026-09-22 实测修正）----
   起初按「源图左区亮度」给 factory/honor/join/product 4 张偏暗图加了更强的遮罩档，
   结果**图几乎被压成纯白**（白底实测 250/255），栏目差异化全丢了。
   原因是两层遮罩的 alpha 是叠乘的：a = 1-(1-a1)(1-a2)，我最初只按单层估算。
   实测合成后（源图左区亮度 65 的最暗一张）：标准档 a1=.86 / a2=.42 → 合成亮度 240，
   与深色标题 #16181d 的对比度仍有 15.5:1，**远高于 AA 的 4.5:1**。
   → 结论：全站 10 个栏目共用 53.1 这一档即可，不要为某张图单独加强遮罩。
     真觉得某张图太暗，正确做法是重出图（调亮素材），而不是继续压白遮罩。 */

/* ---- 53.3 各栏目背景图（换图只改这一行）---- */
.e-hero.e-hero-page.e-hero-about   { --hero-img: url('/uploads/site/hero-about-2026.webp'); }   /* 品牌实力：企业总部园区航拍 */
.e-hero.e-hero-page.e-hero-story   { --hero-img: url('/uploads/site/hero-story-2026.webp'); }   /* 品牌故事：断桥铝门窗细节微距 */
.e-hero.e-hero-page.e-hero-factory { --hero-img: url('/uploads/site/hero-factory-2026.webp'); } /* 智造工厂：铝型材加工车间 */
.e-hero.e-hero-page.e-hero-team    { --hero-img: url('/uploads/site/hero-team-2026.webp'); }    /* 服务团队：上门量尺现场 */
.e-hero.e-hero-page.e-hero-honor   { --hero-img: url('/uploads/site/hero-honor-2026.webp'); }   /* 荣誉资质：成品门窗检测区 */
.e-hero.e-hero-page.e-hero-join    { --hero-img: url('/uploads/site/hero-join-2026.webp'); }    /* 招商加盟：门窗品牌展厅 */
.e-hero.e-hero-page.e-hero-contact { --hero-img: url('/uploads/site/hero-contact-2026.webp'); } /* 联系维恪：企业接待区 */
.e-hero.e-hero-product             { --hero-img: url('/uploads/site/hero-product-2026.webp'); } /* 产品中心：样窗纵深陈列 */
.e-hero.e-hero-caselist            { --hero-img: url('/uploads/site/hero-case-2026.webp'); }    /* 客户案例：住宅外立面门窗安装 */
.e-hero.e-hero-news                { --hero-img: url('/uploads/site/hero-news-2026.webp'); }    /* 门窗学院：工艺样品静物台 */

/* ---- 53.4 窄屏：文字横跨整行，遮罩必须转成「上下压白」为主，否则左右两侧字会压在图上看不清 ---- */
@media (max-width: 860px) {
  .e-hero.e-hero-page.e-hero-about,
  .e-hero.e-hero-page.e-hero-story,
  .e-hero.e-hero-page.e-hero-factory,
  .e-hero.e-hero-page.e-hero-team,
  .e-hero.e-hero-page.e-hero-honor,
  .e-hero.e-hero-page.e-hero-join,
  .e-hero.e-hero-page.e-hero-contact,
  .e-hero.e-hero-product,
  .e-hero.e-hero-caselist,
  .e-hero.e-hero-news {
    --hero-m1: linear-gradient(90deg, rgba(255,255,255,.72) 0%, rgba(255,255,255,.40) 60%, rgba(255,255,255,.16) 100%);
    --hero-m2: linear-gradient(180deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.86) 46%, rgba(255,255,255,.80) 100%);
  }
}

/* ============================================================
   54. 案例列表 + 详情页「相关案例 / 相关产品」：排列收口，不留孤卡与空白（2026-09-22）
   ------------------------------------------------------------
   用户反馈：案例封面页 /cases/、两个列表页 /bieshuan/ · /zhuzhai/、
   以及案例详情页的「相关案例」，末行常常只剩 1 张卡，右侧空出整整一格。

   实测根因（1440 / 1086 档逐页量测）：
   ① .cw-wall（案例墙）= 首卡 .cw-card-lead 独占整行 + 其余 2 列，
      而列表每页固定 10 条（src/Controller/Front.php 分页 size=10）
      → 去掉首卡剩 9 条（奇数）→ 每行实测 [1,2,2,2,2,1]，末行 1 张 + 半格空白。
   ② 详情页文末的 `.p-related`（「相关案例」.grid-cases / 「相关产品」.grid）本该 4 张铺满，
      但两者的列数都靠 `repeat(auto-fill, minmax(...))` 自己算：容器一宽就算出 **3 列**
      → 4 张成 [3,1]、末行 1 张。实测 1920 档右侧空 **932px**、820 档空 459px；
      落 3 列的宽度有 2560/2200/1920/1800/1680/1600/1500/1440/1366/1280/1200/1152/1024/960
      （只有 1440 的案例块、1366/1280 的产品块碰巧是 2/4 列）。

   解法（纯 CSS + 一个模板类，不依赖 JS）：
   ① 案例墙按「本页条数」自适应 —— 条数为奇数时首卡保留宽幅（宽幅卡给最新的那条，
      语义正确），为偶数时首卡退回普通卡片，整墙 2 列整除。两种情况下每行都是满的。
   ② 相关块不再让列数"自己算"，改为按档固定（≥1200 一行 4 张 / 461~1199 两列 / ≤460 单列），
      每一档都配齐「张数不足时的补位规则」，任意张数都排满。
   ★ 改这里前先读 memory/ref/03-css-and-shots.md：本站 .cw-wall/.grid 有多层同名规则，
     改完必须跑 _measure_case_grid.cjs + _scan_related_widths.cjs 量行数，别只看截图。
   ============================================================ */

/* ---- 54.1 案例墙：本条页条数为偶数时，首卡不再独占整行 → 整墙 2 列行行铺满 ---- */
.cw-wall.cw-wall-even > .cw-card-lead { grid-column: auto; }
/* 首卡退回普通卡片后，图高与标题字号也要跟其余卡一致，否则第一行会高出其它行 */
.cw-wall.cw-wall-even > .cw-card-lead .cw-media { height: 240px; }
.cw-wall.cw-wall-even > .cw-card-lead .cw-title { font-size: 17.5px; }
@media (max-width: 860px) {
  /* 窄屏案例墙是单列（见 21.4 收口），这里的图高要跟同档普通卡一致 */
  .cw-wall.cw-wall-even > .cw-card-lead .cw-media { height: 210px; }
}

/* ---- 54.2 相关案例 / 相关产品（详情页文末 .p-related）：按档固定列数，每档都排满 ----
   `.p-related > ul` = (0,1,1)，稳压 `.grid` / `.grid-cases` 的 (0,1,0)，
   所以这两块的列数从这里统一接管，不再受 auto-fill 影响。 */
.p-related > ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* 2 列：末位独占一行（只有 1 / 3 张）时铺满整行，不留半格空白 */
.p-related > ul > li:last-child:nth-child(odd) { grid-column: 1 / -1; }

@media (min-width: 1200px) {
  /* 宽屏一行 4 张（容器 1056~1416 → 每张 242~332px） */
  .p-related > ul { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  /* 4 列下「序号为奇数」不等于落单，撤掉上面那条 2 列的规则，改按张数补位 */
  .p-related > ul > li:last-child:nth-child(odd) { grid-column: auto; }
  .p-related > ul > li:only-child { grid-column: 1 / -1; }                               /* 1 张 → 铺满 */
  .p-related > ul > li:first-child:nth-last-child(2),
  .p-related > ul > li:nth-child(2):last-child { grid-column: span 2; }                  /* 2 张 → 各占 2 列 */
  .p-related > ul > li:first-child:nth-last-child(3) { grid-column: span 2; }            /* 3 张 → 2+1+1 */
  .p-related > ul > li:nth-child(4n+1):last-child { grid-column: 1 / -1; }               /* 5 / 9 张 → 末位铺满 */
}

@media (max-width: 460px) {
  /* 单列（原 ≤460 规则是 .grid-cases 的 (0,1,0)，会被上面的 (0,1,1) 压掉，必须在这里补回）*/
  .p-related > ul { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================
   55. 相关案例 / 相关产品：左右两侧与「主体」严格对齐（2026-09-22）
   ------------------------------------------------------------
   用户反馈原话：「相关案例左右两侧与主体对齐」。

   ① 主体两侧到底是哪条线？实测（1440 档）同一页所有主块的左右边界：
        .cs-card 卡片 36~1404 / .cs-final 面板 36~1404 / 列表页 .cw-wall 36~1404
        / .pd-hero-in、.pd-final 36~1404 / 顶部导航与 .wrap 内容盒 36~1404
      → 主体两侧 = 36 / 1404（= .wrap 的内容盒，即 --detail-col 那套版心）。
      而当时 .p-related 落在 72~1368（比主体各内缩 36px），根因见第 1503 行注释
      （在 .wrap 的 gutter 上又叠了一层 padding）。

   ② 修法：删掉 .p-related 自带的那层左右 padding（第 1503 行那条规则），
      让它的外框直接与主体容器重合 —— ≥961 档与 ≤720 档都是父级提供 gutter，自动对齐。

   ③ 唯一例外：721~960 档。这条区间的 .cs-wrap / .pd-wrap 会各自再加 16px 内缩
      （见本文件「@media (max-width:960px) { .nw-wrap,.pd-wrap,.cs-wrap {...} }」那条）。
      产品页的 .p-related 在 .pd-wrap **内部**，自动继承这 16px；
      案例页的 .p-related 是 .cs-wrap 的**兄弟**（同挂 article.detail 下），会漏掉 → 需要手工补齐。
      .cs-final（案例页文末 CTA 面板）是同一个层级、同样漏掉，一并补齐，
      否则 721~960 档会出现「相关案例对齐了、但下面那块 CTA 面板又比它宽 16px」的新错位。

   ★ 自检脚本：.workbuddy/tmp/_verify_related_align.cjs
     22 档宽度 × 4 个页面，同时判「左右差 |≤1px|」与「每行铺满」，期望 88/88 全绿。
   ============================================================ */
@media (min-width: 721px) and (max-width: 960px) {
  .detail-case > .p-related,
  .detail-case > .cs-final { padding-left: 16px; padding-right: 16px; }
}

/* ============================================================
   56. 产品详情页收尾 CTA 与页脚之间的间距收口（2026-09-22）
   ------------------------------------------------------------
   用户反馈（截图）：产品详情页 .pd-final（「拿不准选哪个型号？」）与页脚之间空了一大块，
   比案例详情页明显更高。

   ★ 根因 = 结构差异 ——
     · 案例详情（article/case.html）：.cs-final 是 .cs-wrap 的**兄弟**（article 的直接子元素），
       直接贴 article 底边 → 到页脚间距 = 44px(article margin-bottom) + 56px(footer margin-top) = 100px；
     · 产品详情（article/product.html）：.pd-final 在 .pd-wrap **内部**，在同样 44+56 之上
       又多叠了一层 .pd-wrap 的 padding-bottom（>860px 为 64px；≤860px 因窄屏常驻询价条补到 96px）
       → 实测到页脚间距 = 64/96 + 44 + 56 = 164 / 196px。

   ★ 修法：只把产品详情页 .pd-wrap 的**底部**内衬归零，使其与案例详情页对齐（100px）。
     · 只命中 .detail-product，不影响案例页 .cs-wrap / 文章页 .nw-wrap；
     · 只写长手写 padding-bottom，左右内边距（含 ≤720px 的 0、≤960px 的 16px）原样保留，
       故 721~960 档的 36/1404 版心对齐不受影响；
     · 本规则在源序上晚于 @media (max-width:860px) 的 96px 规则、且同特异度 → 全宽度档生效。
   ============================================================ */
.detail-product .pd-wrap { padding-bottom: 0; }

/* ============================================================
   57. 产品列表页 · 方图货架重设计（2026-09-22）
   ------------------------------------------------------------
   用户：「重新设计产品列表页，我已把图片做成 800×800 的了」。
   产品 thumb 已换为方图（1:1），原 41.21 的「横条大图」版式
   （图占左 42%、竖长剖面图 contain 展示）不再匹配素材形状。

   新版式 = 方图货架网格：
   ① 每张卡 1:1 方图 + 下方信息区（型号 / 价格 / 3 条核心参数 / 查看详情）；
   ② 桌面端固定每行 4 个（2026-09-22 用户定版，模板固定输出 c4）；
   ③ 图片铺满 1:1 媒体区、四周不留空（2026-09-22 用户要求）：
      img padding 清零 + object-fit:cover（覆盖 41.21c 的 contain+16px padding），
      800×800 方图在 1:1 容器无裁切变形；无图占位符 .card-ph 仍留内边距；
   ④ ≤1080 平板两列居中；≤560 两列紧凑；≤400 单列。

   ★ 覆盖关系：本层在源序上晚于 21.x / 41.16 / 41.20 / 41.21 各层；
     对 (0,2,0) 的 41.21c 规则（.shelf-card .shelf-media）同特异度后写覆盖，
     对各媒体查询内的 (0,1,0) 规则以更高特异度压住 —— 勿把本层挪到文件中部。
   ============================================================ */
.shelf-grid {
  display: grid;
  grid-template-columns: repeat(var(--shlc, 4), minmax(0, 1fr));
  gap: 26px;
}
.shelf-grid.c1 { --shlc: 1; max-width: 560px; margin-left: auto; margin-right: auto; }
.shelf-grid.c2 { --shlc: 2; }
.shelf-grid.c3 { --shlc: 3; }
.shelf-grid.c4 { --shlc: 4; }
.shelf-grid.c5 { --shlc: 5; }
@media (max-width: 1320px) {
  /* 5 列在 ≤1320 每卡已不足 200px，退 4 列（10 条 → 4+4+2，无独卡） */
  .shelf-grid.c5 { --shlc: 4; }
}

.shelf-card { flex-direction: column; border-radius: 18px; }
.shelf-card > a { display: flex; flex-direction: column; }

/* 方图：1:1 容器定高，图片铺满四周不留空（cover；无图占位符仍留内边距） */
.shelf-card .shelf-media { height: auto; min-height: 0; aspect-ratio: 1 / 1; border-radius: 0; }
.shelf-card .shelf-media img { padding: 0; object-fit: cover; }
.shelf-card .shelf-media .card-ph { padding: 18px; }

.shelf-body { padding: 20px 22px 22px; gap: 12px; }
.shelf-title { font-size: 18px; -webkit-line-clamp: 1; }
.shelf-price { font-size: 19px; }
.shelf-specs { padding: 14px 0 0; gap: 8px; grid-template-columns: 1fr; column-gap: 0; }
.shelf-specs li { grid-template-columns: 4.6em minmax(0, 1fr); font-size: 13px; }
.shelf-card .card-more { margin-top: auto; align-self: stretch; justify-content: center; }

/* 平板 / 窄屏：两列居中（偶数条满行；奇数条末行居中） */
@media (max-width: 1080px) {
  /* ★ 必须显式改回 row：41.21 的 .shelf-grid{flex-direction:column} 是 (0,1,0)，
     只写 display:flex 不重置方向会让卡片竖着堆成单列（首轮截图实测踩过） */
  .shelf-grid { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 18px; }
  .shelf-grid.c1 { max-width: none; }
  .shelf-card { width: calc(50% - 9px); }
}
@media (max-width: 560px) {
  .shelf-grid { gap: 12px; }
  .shelf-card { width: calc(50% - 6px); border-radius: 14px; }
  .shelf-card .shelf-media img { padding: 0; }
  .shelf-card .shelf-media .card-ph { padding: 10px; }
  .shelf-body { padding: 12px 12px 14px; gap: 8px; }
  .shelf-title { font-size: 14.5px; }
  .shelf-price { font-size: 15px; }
  .shelf-specs { padding: 8px 0 0; gap: 5px; }
  .shelf-specs li { font-size: 11.5px; grid-template-columns: 4.2em minmax(0, 1fr); column-gap: 6px; }
  .shelf-card .card-more { padding: 7px 12px; font-size: 12.5px; }
}
/* 极小屏单列（方图大图 + 完整参数） */
@media (max-width: 400px) {
  .shelf-grid { display: grid; grid-template-columns: minmax(0, 1fr); }
  .shelf-card { width: auto; }
}


/* ============================================================
   58. 栏目分类 + 站内搜索并排（2026-09-22）
   搜索框从导航/hero 下放到「栏目分类」右侧：药丸在左、搜索框靠右；
   cat-pills 原有 margin 移交 toolbar 统一管；窄屏纵向堆叠。
   ============================================================ */
.cat-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin: 4px 0 26px; }
.cat-toolbar .cat-pills { margin: 0; flex: 1 1 auto; }
.cat-toolbar .cat-search-inline { flex: 0 1 auto; width: 320px; max-width: 40%; margin: 0; }
.cat-toolbar .cat-search-inline input { height: 40px; }
.cat-toolbar .cat-search-inline button { height: 40px; padding: 0 18px; }
@media (max-width: 768px) {
  .cat-toolbar { flex-direction: column; align-items: stretch; gap: 12px; }
  .cat-toolbar .cat-search-inline { width: auto; max-width: none; }
}


/* ============================================================
   59. 移动端字号统一下调层（2026-09-23）
   ------------------------------------------------------------
   问题（实测 402px 视口 / 桌面 1440 对照）：
     · 分类药丸 14.5 → 13.5px、标签日期行 12.5 → 12.5px、搜索框
       14.5 → 14.5px、CTA 按钮 14 → 14px、页脚 14.2 → 13px：
       这些元素在手机上和 1440 桌面**是同一个 px 值**，根本没为手机收。
     · 加上 3.2 流式字体层(§453)在窄屏一律落到 clamp 下限，等于
       「桌面字号原样带到手机」，结果处处都大一号，一屏看不到几条内容。
   做法：
     本节写在文件最末，只在 ≤560px（全部手机）生效，按「手机专用档」
     统一收一档 —— 正文/标签 −0.5~1.5px、标题 −2~5px、按钮 −0.5px。
     ★ 唯一放大的是搜索输入框（14.5 → 16px）：iOS Safari 对
       font-size < 16px 的输入框会在聚焦时自动缩放整页，这是硬规则，
       不遵守就会被访客当成「页面跳了一下」。
   范围：≥561px（含全部平板/桌面）与打印样式**完全不受影响**。
        改完必须对比验证：跑
          NODE_PATH=... node .workbuddy/tmp/_font_snapshot.cjs after
        然后 diff _fontinv_before.json / _fontinv_after.json ——
        1440 / 1024 / 768 三档必须**零变化**，560/430/402/375/320 按预期下调。
   ============================================================ */
@media (max-width: 560px) {

  /* ---------- 59.1 根与正文 ---------- */
  body { font-size: 14px; line-height: 1.68; }

  /* ---------- 59.2 页头 / 移动端导航面板 ---------- */
  .logo { font-size: 16px; }
  .site-nav > a, .site-nav .nav-item > a { font-size: 14.5px; padding: 11px 10px; }
  .site-nav .nav-drop a { font-size: 13.5px; }

  /* ---------- 59.3 首页 hero ---------- */
  .hero h1 { font-size: 25px; letter-spacing: .3px; }
  .hero-sub { font-size: 14px; line-height: 1.7; }
  .hero-sub-lead { font-size: 15px; }
  .hero-hotline, .nav-hotline b { font-size: 14px; }
  .hero-eyebrow, .bk-eyebrow { font-size: 12.5px; }
  .hero-chips span, .hero-chips a { font-size: 11.5px; }
  .hero-btns a { font-size: 13.5px; }

  /* ---------- 59.4 栏目 hero（10 个栏目一栏一图 + 列表页 / 单页） ---------- */
  .hero h1,
  .e-hero h1, .e-hero-page h1, .e-hero-h1,
  .detail-case .e-hero-h1, .cw-hero .cw-hero-h1 { font-size: 22px; letter-spacing: 0; line-height: 1.25; }
  .e-desc, .hero-sub.hero-sub-lead,
  .e-hero .e-desc, .e-hero-page .e-desc, .cw-hero .e-desc { font-size: 14px; line-height: 1.7; }
  .e-eyebrow { font-size: 11.5px; }
  .e-meta span { font-size: 12.5px; }
  .nl-count { font-size: 12.5px; }
  .nl-count b { font-size: 15px; }
  .ps-bar-n { font-size: 13px; }
  .ps-bar-n b { font-size: 16.5px; }
  .ps-bar-hint { font-size: 12px; }
  .e-num { font-size: 18px; }
  .e-hero-facts b { font-size: 17px; }
  .e-hero-cta a { font-size: 13.5px; }
  .e-rel-h { font-size: 17px; }
  .stats-grid dt, .c-hero-stats b { font-size: 22px; }
  .stats-in .seo-block-html b, .stats-in .seo-block-html strong { font-size: 22px; }

  /* ---------- 59.5 区块标题（首页各版块 / 单页） ---------- */
  .block-head h2 { font-size: 17px; }
  .block-head p { font-size: 12.8px; }
  .about-text h2 { font-size: 16.5px; }
  .about-text p { font-size: 13.8px; }
  .p-related-head h2 { font-size: 17px; }
  .pd-h2 { font-size: 17px; }
  .content h2, .detail .h2, .detail-news .content > h2 { font-size: 17px; }
  .content h3, .detail-news .content > h3 { font-size: 15.5px; }
  .cs-step-t { font-size: 17px; }
  .contact-form h3, .apply-card h3 { font-size: 17px; }
  .trust-band .trust-t { font-size: 15px; }
  .need-grid h3 { font-size: 15px; }
  .assure-grid h3 { font-size: 15px; }
  .pd-rail-t { font-size: 15px; }
  .cw-wall.cw-wall-even > .cw-card-lead .cw-title { font-size: 15px; }

  /* ---------- 59.6 列表 / 卡片标题（三条列表线统一到同一档） ---------- */
  .nl-title, .nl-item-top .nl-title { font-size: 15px; line-height: 1.5; }
  .shelf-title { font-size: 13.8px; }
  .cw-title { font-size: 15px; }
  .card h3, .card-body h3 { font-size: 14.8px; }
  .news-body h3, .news-cards h3, .steps h3, .pain-grid h3, .svc-card h3 { font-size: 15px; }
  .bp-duo-card h3 { font-size: 15px; }
  .bp-step h3, .apply-link-name { font-size: 14.8px; }
  .steps li > h3 { font-size: 15px; }

  /* ---------- 59.7 正文 / 描述 ---------- */
  .content { font-size: 14.5px; line-height: 1.85; }
  .detail-news .content { font-size: 15px; line-height: 1.95; }
  .card p, .card-body p { font-size: 12.8px; }
  .shelf-desc { font-size: 12.5px; }
  .shelf-specs li { font-size: 11px; }
  .shelf-price { font-size: 14.5px; }
  .bp-duo-card p { font-size: 13px; }
  .bp-step p, .apply-note, .apply-rules li, .apply-contact li { font-size: 13px; }
  .news-body p, li > p { font-size: 13px; }
  .detail-product .pd-sub { font-size: 14px; }
  .ct-cards .contact-card b { font-size: 14px; }

  /* ---------- 59.8 元信息 / 标签 / 面包屑 / 页脚 ---------- */
  .nl-flags { font-size: 11.5px; gap: 8px; }
  .nl-time { font-size: 11.5px; }
  .nl-cat { font-size: 11px; }
  .news-meta time { font-size: 12px; }
  .news-meta .news-cat, .fc-label { font-size: 11.5px; }
  .breadcrumb { font-size: 12.2px; }
  .foot-name { font-size: 14px; }
  .foot-slogan, .foot-title { font-size: 13.8px; }
  .foot-desc, .foot-nav a, .foot-bar p, .foot-legal, .foot-police { font-size: 12.2px; }
  .foot-nav .foot-title { font-size: 13.8px; }

  /* ---------- 59.9 按钮 / 药丸 / 分页 ---------- */
  .btn-pri, .btn-ghost, .btn-line { font-size: 13.5px; }
  .card-more { font-size: 12px; }
  .pager-btn, .pager a { font-size: 12.8px; }
  .cat-pills { gap: 7px; }
  .cat-pills a { font-size: 12.5px; padding: 6px 13px; }
  .cat-toolbar { margin-bottom: 20px; }

  /* ---------- 59.10 站内搜索（★ 唯一放大：防 iOS 聚焦自动缩放整页） ---------- */
  .nl-search input, .cat-search-inline input,
  .search-box input, .e404-search input,
  .nav-search input, .cls-search input, .biz-search input { font-size: 16px; }
  .nl-search button { font-size: 14px; }
  .apply-main .contact-form input[type="text"],
  .apply-main .contact-form textarea { font-size: 16px; }

  /* ---------- 59.11 收尾 CTA 带 ---------- */
  .cta-text h2, .detail-cta-t, .detail-cta-text h2 { font-size: 17px; line-height: 1.4; }
  .cta-text p, .detail-cta-text p { font-size: 13.2px; }
  .cta-btns a, .detail-cta-btns a { font-size: 13.5px; }
  .detail-cta-text .detail-cta-t { font-size: 17px; }
  .cw-final-t, .pd-final-t, .cs-final-t { font-size: 16px; }
  .cw-final-text p { font-size: 13px; }
  .mid-cta p { font-size: 13.5px; }
  .mid-cta a.btn-pri { font-size: 13.5px; }

  /* ---------- 59.12 表格 / 折叠 / 其它 ---------- */
  table.spec { font-size: 13.5px; }
  .cmp-table th { font-size: 13.8px; }
  .cmp-table td, .cmp-table td.cmp-us { font-size: 13.2px; }
  details summary { font-size: 14.5px; }
  details p { font-size: 13.2px; }
  .step-no { font-size: 13px; }
  .ct-hours b { font-size: 13.8px; }
  .cmp-table tbody th { font-size: 13.8px; }
  .faq-panel summary { font-size: 14.5px; }
  .ct-hours span, .ct-hint { font-size: 12.5px; }
  .price-lg { font-size: 22px; }

  /* ---------- 59.13 详情页大标题（clamp 下限在窄屏仍偏大，强制收窄到手机档） ---------- */
  .detail-product .pd-title { font-size: 22px; line-height: 1.2; }
  .detail-news .nw-title { font-size: 22px; line-height: 1.2; }
}

/* 极小屏（≤360px）再收半档：这类机器要么是老机型要么开了显示放大，
   402 档的下调不够，标题与列表标题再各收 0.5px 即可，正文不再动（可读性优先）。 */
@media (max-width: 360px) {
  .hero h1, .e-hero h1, .e-hero-page h1, .detail-case .e-hero-h1, .cw-hero .cw-hero-h1 { font-size: 20.5px; }
  .block-head h2, .about-text h2, .cs-step-t, .cta-text h2, .detail-cta-t { font-size: 16.5px; }
  .nl-title, .nl-item-top .nl-title, .cw-title, .news-body h3, .news-cards h3 { font-size: 14.5px; }
  .shelf-title { font-size: 13.2px; }
}

}

/* 网站地图页 */
.sitemap-groups{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:24px}
.sitemap-group h3{font-size:15px;font-weight:700;margin:0 0 10px;padding-bottom:8px;border-bottom:2px solid var(--pri);color:var(--ink)}
.sitemap-group ul{list-style:none;margin:0;padding:0}
.sitemap-group li{margin:0}
.sitemap-group a{display:block;padding:5px 0;color:var(--text);text-decoration:none;font-size:13.5px;line-height:1.4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sitemap-group a:hover{color:var(--pri)}
@media(max-width:760px){.sitemap-groups{grid-template-columns:1fr;gap:16px}}

/* 网站地图页 SEO 优化版 */
.sitemap-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:24px}
.sitemap-col h3.sitemap-title{font-size:15px;font-weight:700;margin:0 0 12px;padding-bottom:8px;border-bottom:2px solid var(--pri)}
.sitemap-col h3.sitemap-title a{color:var(--ink);text-decoration:none}
.sitemap-col h3.sitemap-title a:hover{color:var(--pri)}
.sitemap-list{list-style:none;margin:0;padding:0}
.sitemap-list li{margin:0}
.sitemap-list a{display:block;padding:4px 0;color:var(--text);text-decoration:none;font-size:13.5px;line-height:1.5;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sitemap-list a:hover{color:var(--pri);padding-left:4px}
.e-crumb{font-size:13.5px;color:var(--muted);margin-bottom:24px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.e-crumb a{color:var(--text);text-decoration:none}
.e-crumb a:hover{color:var(--pri)}
.e-crumb span{margin:0 6px;color:var(--line)}
@media(max-width:760px){.sitemap-grid{grid-template-columns:1fr;gap:16px}}

/* 合作分销商列表页（招商加盟下的列表栏目） */
.dl-hero{background:linear-gradient(135deg,#fff 0%,#fdf1f2 55%,#fbe7e9 100%);border-bottom:1px solid #f0d6d9}
.dl-body{padding:40px 0 8px}
.dl-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
@media(max-width:1080px){.dl-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.dl-grid{grid-template-columns:1fr}}
.dl-card-wrap{margin:0}
.dl-card{display:flex;flex-direction:column;height:100%;background:#fff;border:1px solid #eceef1;border-radius:14px;overflow:hidden;text-decoration:none;color:inherit;transition:box-shadow .2s ease,border-color .2s ease}
.dl-card:hover{box-shadow:0 14px 32px rgba(20,20,40,.12);border-color:#f0d6d9}
.dl-media{position:relative;aspect-ratio:4/3;background:#eef0f3;overflow:hidden}
.dl-media img{width:100%;height:100%;object-fit:cover;display:block}
.dl-ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#b9bec6}
.dl-ph svg{width:42px;height:42px}
.dl-info{padding:15px 17px 17px;display:flex;flex-direction:column;gap:7px;flex:1}
.dl-name{font-size:16.5px;font-weight:700;color:#1f2329;line-height:1.35;min-height:2.7em;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.dl-row{display:flex;gap:8px;font-size:13.5px;line-height:1.6}
.dl-label{flex:0 0 56px;color:var(--pri);font-weight:700}
.dl-val{color:#4a5056;flex:1;min-height:3.2em;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
@media(max-width:560px){.dl-grid{grid-template-columns:1fr}.dl-body{padding:28px 0 4px}}

/* ════════════════════════════════════════════════════════════════
   合作分销商 · 门店详情页（show-dealer.html / .detail-dealer）
   四要素：门头图片（左图）· 店名（hero H1）· 详细地址（信息卡）· 服务能力（整段）
   与阅读型 show-article 不共用：去掉作者/时间/字数/上下篇，聚焦门店名片。
   ════════════════════════════════════════════════════════════════ */
.detail-dealer{--detail-col:1640px}
.detail-dealer .dl-d-hero{background:linear-gradient(180deg,#fdf1f2 0%,#fbe7e9 100%);border-bottom:1px solid #f0d6d9}
/* hero 紧凑化：.e-hero 被 37.1 拉成 min-height:360px 垂直居中大块，详情 mini 条必须重置
   （与 .detail-news .e-hero-mini 同口径），否则导航与面包屑之间是一大片近白空带 */
.detail-dealer .dl-d-hero{min-height:0;display:block;padding-top:22px;padding-bottom:20px}
@media(max-width:720px){.detail-dealer .dl-d-hero{min-height:0;padding-top:16px;padding-bottom:14px}}
.detail-dealer .dl-d-hero .e-eyebrow{color:var(--pri);margin:0 0 8px}
.detail-dealer .dl-d-hero .e-eyebrow::before{background:var(--pri)}
.detail-dealer .dl-d-name{margin:0;font-size:clamp(24px,1.6vw + 16px,34px);line-height:1.4;letter-spacing:.3px;color:var(--ink)}

.detail-dealer .dl-d-main{max-width:var(--detail-col);margin:0 auto;padding:40px 26px 64px}

/* 门店名片双栏：左门头图 / 右信息卡 */
.detail-dealer .dl-d-layout{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:36px;align-items:start}

/* 门头图片 */
.detail-dealer .dl-d-figure{position:relative;margin:0;border-radius:16px;overflow:hidden;background:#eef0f3;aspect-ratio:5/3;box-shadow:0 10px 30px rgba(20,20,40,.08)}
.detail-dealer .dl-d-figure img{width:100%;height:100%;object-fit:cover;display:block}
.detail-dealer .dl-d-ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#b9bec6}
.detail-dealer .dl-d-ph svg{width:54px;height:54px}
.detail-dealer .dl-d-cap{position:absolute;left:14px;bottom:12px;background:rgba(22,24,29,.62);color:#fff;font-size:12.5px;padding:4px 11px;border-radius:20px}

/* 门店信息卡 */
.detail-dealer .dl-d-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:26px 26px 24px;box-shadow:0 8px 24px rgba(20,20,40,.05)}
.detail-dealer .dl-d-card-h{margin:0 0 18px;font-size:19px;color:var(--ink);letter-spacing:.5px;padding-left:13px;border-left:4px solid var(--pri)}
.detail-dealer .dl-d-row{display:flex;gap:14px;align-items:flex-start;padding:4px 0 18px;margin-bottom:18px;border-bottom:1px dashed var(--line)}
.detail-dealer .dl-d-ic{flex:0 0 36px;height:36px;border-radius:10px;background:#fdf1f2;color:var(--pri);display:flex;align-items:center;justify-content:center}
.detail-dealer .dl-d-ic svg{width:19px;height:19px}
.detail-dealer .dl-d-t{display:flex;flex-direction:column;gap:4px}
.detail-dealer .dl-d-k{font-size:12.5px;font-weight:700;letter-spacing:1px;color:var(--pri)}
.detail-dealer .dl-d-v{font-size:15.5px;line-height:1.7;color:#2b3138}
.detail-dealer .dl-d-actions{display:flex;flex-wrap:wrap;gap:12px}
.detail-dealer .dl-d-actions .btn-pri,.detail-dealer .dl-d-actions .btn-ghost{flex:1 1 auto;text-align:center}
.detail-dealer .dl-d-tip{margin:18px 0 0;font-size:13.5px;line-height:1.7;color:var(--muted);background:#f7f8fa;border-radius:10px;padding:12px 14px}

/* 服务能力 */
.detail-dealer .dl-d-service{margin-top:52px}
.detail-dealer .dl-d-service-body{max-width:980px;margin:0 auto;font-size:16.5px;line-height:2.05;color:#263449}
.detail-dealer .dl-d-service-body>p{margin:0 0 18px}
.detail-dealer .dl-d-service-body>h2,.detail-dealer .dl-d-service-body>h3{margin:30px 0 14px;color:var(--ink)}
.detail-dealer .dl-d-service-body>h2{padding-left:14px;border-left:4px solid var(--pri);font-size:21px}
.detail-dealer .dl-d-empty{text-align:center;color:var(--muted);padding:30px;background:var(--soft);border-radius:12px}

@media(max-width:900px){.detail-dealer .dl-d-layout{grid-template-columns:1fr;gap:24px}.detail-dealer .dl-d-figure{aspect-ratio:16/9}}
@media(max-width:560px){.detail-dealer .dl-d-main{padding:28px 0 48px}.detail-dealer .dl-d-service{margin-top:38px}}

/* ============================================================
   63. 合作分销商列表页 hero 背景图（2026-10-12 用户提供门店街景实景）
   ------------------------------------------------------------
   源图 public/uploads/site/hero-dealer.png（1568×672）转 hero-dealer-2026.webp（168KB）挂入，
   原图保留不动。口径与 53.1 标准档完全一致（双层白遮罩 + 深色标题）；
   不进 53.1 选择器组（那组不在文件末尾），按「静止层改动一律写文件最末」单独成段。
   `.e-hero.dl-hero` (0,2,0) 稳压 5783 行 `.dl-hero` 浅粉渐变 (0,1,0)，不依赖书写顺序。
   换图 = 换文件名 + 改下面这一行 --hero-img。
   ============================================================ */
.e-hero.dl-hero {
  --hero-img: url('/uploads/site/hero-dealer-2026.webp');
  --hero-m1: linear-gradient(90deg, rgba(255,255,255,.88) 0%, rgba(255,255,255,.72) 42%, rgba(255,255,255,.30) 72%, rgba(255,255,255,.10) 100%);
  --hero-m2: linear-gradient(180deg, rgba(255,255,255,.72) 0%, rgba(255,255,255,.42) 52%, rgba(255,255,255,.74) 100%);
  background:
    var(--hero-m1),
    var(--hero-m2),
    var(--hero-img) center / cover no-repeat,
    #ffffff;
  background-size: auto, auto, cover, auto;
}
/* 窄屏遮罩转「上下压白」为主（同 53.4 口径），文字横跨整行仍可读 */
@media (max-width: 860px) {
  .e-hero.dl-hero {
    --hero-m1: linear-gradient(90deg, rgba(255,255,255,.72) 0%, rgba(255,255,255,.40) 60%, rgba(255,255,255,.16) 100%);
    --hero-m2: linear-gradient(180deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.86) 46%, rgba(255,255,255,.80) 100%);
  }
}

/* 63.1 合作分销商详情页 mini hero 同样挂门店街景（与 63 列表页同图，薄带裁切）
   选择器 `.detail-dealer .dl-d-hero` (0,2,0) 与 5808 行同优先级，因写在文件更末而胜出；
   薄带高度有限，遮罩比 53.1 略加重（左 90% / 上 78%）保证面包屑+店名始终可读。
   紧凑尺寸（min-height:0 / padding 22·20）由 5811 行保留，仅换背景。 */
.detail-dealer .dl-d-hero {
  --hero-img: url('/uploads/site/hero-dealer-2026.webp');
  --hero-m1: linear-gradient(90deg, rgba(255,255,255,.90) 0%, rgba(255,255,255,.74) 44%, rgba(255,255,255,.34) 72%, rgba(255,255,255,.12) 100%);
  --hero-m2: linear-gradient(180deg, rgba(255,255,255,.78) 0%, rgba(255,255,255,.50) 52%, rgba(255,255,255,.82) 100%);
  background:
    var(--hero-m1),
    var(--hero-m2),
    var(--hero-img) center / cover no-repeat,
    #ffffff;
  background-size: auto, auto, cover, auto;
}
@media (max-width: 860px) {
  .detail-dealer .dl-d-hero {
    --hero-m1: linear-gradient(90deg, rgba(255,255,255,.74) 0%, rgba(255,255,255,.42) 60%, rgba(255,255,255,.18) 100%);
    --hero-m2: linear-gradient(180deg, rgba(255,255,255,.94) 0%, rgba(255,255,255,.88) 46%, rgba(255,255,255,.82) 100%);
  }
}

/* 63.2 详情页 mini hero 文字上下留空（2026-10-12 用户要求「hero 文字与背景上下要留空」）
   5811 行的 22/20 紧凑 padding 是给浅粉渐变底设计的；挂上实景图后文字贴边显得挤。
   放宽到 40/36（≤720 档 30/28），同优先级 (0,2,0) 靠文件位置胜出。
   大 hero（.dl-hero）不用动：min-height 360 垂直居中 + 41.34 兜底 34/38，留白已足。 */
.detail-dealer .dl-d-hero { padding-top: 40px; padding-bottom: 36px; }
@media (max-width: 720px) {
  .detail-dealer .dl-d-hero { padding-top: 30px; padding-bottom: 28px; }
}

/* 63.3 详情 mini hero 内嵌信任数据（e-hero-facts）：紧凑条内上边距 24→14，免得薄带被撑松 */
.detail-dealer .dl-d-hero .e-hero-facts { margin-top: 14px; }

/* 63.4 分页器去三角（2026-10-13）：pager_nav 组件的上一页/下一页已纯文字化，
   小屏原「只留三角、隐藏文字」规则（3854 行）随之作废，恢复显示文字 */
.pager-nav > span { display: inline; }