/* 鸿企官网 · 共享样式 v2（视觉升级）
   品牌色：青绿主色 #C9A96E / 暖橙强调 #A8874E
   设计：移动端优先、干净专业、B端工厂调性、有层次 */

:root {
  --green: #C9A96E;
  --green-dark: #A8874E;
  --green-deep: #0B3A62;
  --green-soft: #F7F3EA;
  --green-tint: #FAF8F4;
  --red: #A8874E;
  --red-soft: #F7F0E2;
  --ink: #16242b;
  --ink-2: #33424b;
  --muted: #6b7780;
  --bg: #ffffff;
  --bg-soft: #FAF9F7;
  --line: #e6ebe8;
  --radius: 16px;
  --radius-sm: 12px;
  --maxw: 1500px;
  --shadow-sm: 0 1px 3px rgba(26,26,46,.06);
  --shadow: 0 6px 22px rgba(26,26,46,.08);
  --shadow-lg: 0 14px 40px rgba(26,26,46,.12);
  --font: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.75;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--green); text-decoration: none; }
a:hover { color: var(--green-dark); }

img { max-width: 100%; display: block; }

.container { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }

/* ===== 顶部导航 ===== */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--green), var(--accent));
}
.nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 82px;
}
/* ===== 视觉隐藏：屏幕上看不见，但保留给搜索引擎与读屏软件 =====
   用于「要去掉视觉文字、又不想丢 SEO / 无障碍信息」的场景。
   注意别用 display:none —— 那会把文字从搜索引擎和读屏里一并删掉。 */
.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;
}
.brand { display: flex; align-items: center; gap: 16px; font-weight: 800; font-size: 19px; color: var(--ink); position: relative; }
.brand-logo { height: 54px; width: auto; display: block; }
.brand-text { font-size: 23px; font-weight: 800; color: var(--brand-blue); letter-spacing: 1.4px; white-space: nowrap; line-height: 1.15; }
.brand-box { display: flex; flex-direction: column; line-height: 1.2; padding-left: 15px; border-left: 3px solid var(--green); border-radius: 2px 0 0 2px; margin-left: 4px; }
.brand-sub { font-size: 12.5px; font-weight: 500; color: var(--muted); letter-spacing: .6px; margin-top: 3px; white-space: nowrap; }
.nav-links { display: flex; gap: 18px; font-size: 15px; }
.nav-links a { color: var(--ink-2); font-weight: 500; position: relative; padding: 4px 0; white-space:nowrap; }
.nav-links a:hover, .nav-links a.active { color: var(--green); }
.brand-accent { color: var(--green); font-weight: 800; }
.nav-links a.active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px;
  height: 2px; border-radius: 2px; background: var(--green);
}
.nav-toggle { display: none; }

/* ===== 顶部站内搜索（v93） ===== */
.nav-search { position: relative; margin-left: 4px; align-self: center; }
.nav-search-input {
  width: 176px; padding: 7px 15px; border: 1px solid var(--line); border-radius: 999px;
  font-size: 13.5px; color: var(--ink); outline: none; background: #fff;
  transition: width .2s ease, border-color .2s ease, background .2s ease;
  -webkit-appearance: none; appearance: none;
}
.nav-search-input::placeholder { color: var(--ink-2); }
.nav-search-input:focus { width: 236px; border-color: var(--green); background: #fff; }
.nav-search-results {
  position: absolute; top: calc(100% + 10px); right: 0; width: 360px; max-height: 620px;
  overflow: auto; background: #fff; border: 1px solid var(--line); border-radius: 12px;
  box-shadow: var(--shadow, 0 8px 24px rgba(0,0,0,.08)); z-index: 1300;
}
.nav-search-results[hidden] { display: none; }
.nav-links a.nav-search-item { display: block; padding: 15px 24px; border-bottom: 1px solid var(--line); color: var(--ink); }
.nav-search-item:last-child { border-bottom: none; }
.nav-search-item:hover, .nav-search-item.sel { background: var(--green-soft, #f2f8f2); }
.nav-search-item .rt {
  display: flex; align-items: center; gap: 8px;
  font-weight: 700; font-size: 14.5px; color: var(--ink);
}
.nav-search-item .rt .tt { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.nav-search-item .rb {
  flex-shrink: 0; font-size: 11px; font-weight: 600; line-height: 1;
  color: var(--green); background: var(--green-soft, #f2f8f2);
  border: 1px solid currentColor; border-radius: 999px; padding: 4px 8px;
}
.nav-search-item .rx {
  font-size: 13px; color: var(--ink-2); line-height: 1.6; margin-top: 5px;
  word-break: break-word;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.nav-search-item mark { background: none; color: var(--green); font-weight: 700; padding: 0; }
.nav-search-empty { padding: 16px; font-size: 13px; color: var(--ink-2); text-align: center; }
@media (max-width: 900px) {
  .nav-search { margin: 6px 0 10px; }
  .nav-search-input, .nav-search-input:focus { width: 100%; }
  .nav-search-results {
    position: static; width: 100%; box-shadow: none; border: none;
    border-top: 1px dashed var(--line); border-radius: 0; max-height: 300px;
  }
}

/* ===== 通用排版 ===== */
.eyebrow {
  display: inline-block; font-size: 15px; font-weight: 800; letter-spacing: 2px;
  color: var(--green); text-transform: uppercase; margin-bottom: 12px;
  padding: 5px 14px; border-radius: 999px; background: var(--green-soft);
}
/* 单独放大某个 eyebrow：只作用于加了 .eyebrow-lg 的那一个，不影响其它标签 */
.eyebrow.eyebrow-lg {
  font-size: 21px; letter-spacing: 3px; padding: 8px 20px; margin-bottom: 16px;
}
.section-head { text-align: center; max-width: 680px; margin: 0 auto 34px; }
.section-head h2 { font-size: 29px; margin-bottom: 10px; color: var(--ink); }
.section-head p { color: var(--muted); font-size: 16px; }
section { padding: 72px 0; }
.bg-soft { background: var(--bg-soft); }

/* ===== 按钮 ===== */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 12px 24px; border-radius: 10px; font-weight: 700; font-size: 15px;
  transition: .2s; border: 1px solid transparent; cursor: pointer;
}
.btn-primary { background: var(--green); color: #fff; border-color: var(--green); }
.btn-primary:hover { background: var(--green-dark); color: #fff; }
.btn-ghost { background: transparent; color: var(--green); border-color: var(--green); }
.btn-ghost:hover { background: var(--green-soft); }
.btn-lg { padding: 14px 30px; font-size: 16px; }

/* ===== 首页 Hero ===== */
.hero {
  background: linear-gradient(135deg, var(--bg) 0%, var(--green-tint) 100%);
  padding: 64px 0 54px;
  border-bottom: 1px solid var(--line);
}
.hero-grid {
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center;
}
.hero h1 { font-size: 40px; line-height: 1.18; margin-bottom: 16px; }
.hero h1 .hl { color: var(--green); }
.hero .sub { font-size: 17px; color: var(--ink-2); margin-bottom: 22px; max-width: 520px; }
.hero .tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.hero .tag {
  font-size: 13px; font-weight: 700; color: var(--green-dark);
  background: #fff; border: 1px solid var(--line); padding: 5px 12px; border-radius: 999px;
}
.hero .tag.accent { background: var(--green-soft); border-color: var(--green-soft); }
.cta-row { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-visual { position: relative; }
.hero-visual img {
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
  transform: rotate(1.5deg); border: 1px solid var(--line);
}
.hero-badge {
  position: absolute; right: -10px; bottom: 24px;
  background: var(--ink); color: #fff; padding: 12px 18px; border-radius: 12px;
  font-weight: 700; font-size: 14px; box-shadow: var(--shadow);
}
.hero-badge span { display: block; font-size: 12px; color: var(--muted); font-weight: 500; }

/* ===== 首页：顶部整幅大图 Hero ===== */
.hero-banner {
  position: relative; min-height: 84vh;
  display: flex; align-items: center;
  background-color: #0B3A62; background-size: cover; background-position: center;
}
.hero-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(105deg, rgba(11,58,98,.88) 0%, rgba(11,58,98,.62) 46%, rgba(11,58,98,.18) 100%);
}
.hero-banner-inner { position: relative; z-index: 2; max-width: 760px; padding: 44px 0; }
.hero-banner .eyebrow.light {
  color: #D2BC96; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.20);
}
.hero-banner h1, .hero-banner h2 {
  color: #fff; font-size: 48px; line-height: 1.14; margin-bottom: 18px;
  text-shadow: 0 2px 20px rgba(0,0,0,.4);
}
.hero-banner h1 .hl, .hero-banner h2 .hl { color: #E3CB9C; }
.hero-banner .sub.light {
  color: rgba(255,255,255,.92); max-width: 560px; margin-bottom: 24px;
  text-shadow: 0 1px 12px rgba(0,0,0,.35);
}
.hero-banner .tag.light {
  color: #FBF6EC; background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.24);
}
.hero-banner .tag.accent { background: var(--green); color: #141424; border-color: var(--green); }
.hero-banner .btn-ghost.light { color: #fff; border-color: rgba(255,255,255,.55); }
.hero-banner .btn-ghost.light:hover { background: rgba(255,255,255,.14); }

/* ===== 卡片系统 ===== */
.grid { display: grid; gap: 22px; }
.grid-1 { grid-template-columns: 1fr; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
/* 卡片数为奇数时末卡横跨两列，避免右下缺角 */
.grid-2 .card-wide { grid-column: 1 / -1; }
.grid-2 > .card:last-child:nth-child(odd) { grid-column: 1 / -1; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 24px; box-shadow: var(--shadow-sm);
}
.card.alt { background: var(--bg-soft); border-color: transparent; }
.card h3 { font-size: 18px; margin-bottom: 8px; }
.card p { color: var(--ink-2); font-size: 15px; }
.card .icon { font-size: 30px; margin-bottom: 10px; }

/* ===== 首页：工厂信任区 ===== */
.factory-trust {
  display: grid; grid-template-columns: 1fr 1.25fr; gap: 0;
  background: var(--bg); border-radius: var(--radius); box-shadow: var(--shadow);
  overflow: hidden;
}
.factory-trust-img {
  min-height: 420px;
  /* 竖版原图（674×1200）居中完整显示：留白交给底色，不裁画面 */
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-soft); padding: 14px;
}
.factory-trust-img img {
  /* cover 填满列高，消除上下空白；模具车间为横构图，裁掉两侧不影响识别 */
  width: 100%; height: 100%; min-height: 100%;
  object-fit: cover; border-radius: 10px;
}
.factory-trust-body { padding: 44px 48px; display: flex; flex-direction: column; justify-content: center; }
.factory-trust-body h2 { font-size: 29px; margin-bottom: 14px; }
.factory-trust-body > p { color: var(--ink-2); margin-bottom: 26px; }
.factory-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px;
  margin-bottom: 30px;
}
.factory-stats > div {
  background: var(--bg-soft); border-radius: var(--radius-sm); padding: 18px;
}
.factory-stats strong {
  display: block; font-size: 26px; color: var(--green); line-height: 1.1; margin-bottom: 6px;
}
.factory-stats strong span { font-size: 15px; color: var(--ink-2); margin-left: 2px; }
.factory-stats > div > span:last-child { font-size: 14px; color: var(--muted); }

/* ===== 工艺卡片 ===== */
.craft-card {
  background: #fff; border-radius: var(--radius-sm); padding: 26px;
  border-left: 5px solid var(--green); box-shadow: var(--shadow-sm);
}
.craft-card.c2 { border-left-color: #3b82f6; }
.craft-card.c3 { border-left-color: #f59e0b; }
.craft-card.c4 { border-left-color: #8b5cf6; }
a.craft-card { text-decoration: none; color: inherit; }
a.craft-card:hover { color: inherit; }
.craft-card .k { font-size: 12px; color: var(--muted); font-weight: 700; letter-spacing: 1px; }
.craft-card h4 { font-size: 20px; margin: 6px 0 10px; }
.craft-card p { color: var(--ink-2); font-size: 15px; }
.craft h4 { font-size: 18px; margin-bottom: 6px; }
.craft p { font-size: 14px; color: var(--ink-2); margin-bottom: 14px; }
.craft:last-child p { margin-bottom: 0; }

/* ===== 产品墙 & 图库 ===== */
.gallery {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
}
.gallery-item {
  background: #fff; border-radius: var(--radius-sm); overflow: hidden;
  border: 1px solid var(--line); box-shadow: var(--shadow-sm);
}
.gallery-item img { width: 100%; height: 240px; object-fit: cover; }
.gallery-item figcaption {
  padding: 12px 14px; font-size: 14px; font-weight: 600; color: var(--ink-2);
  text-align: center; border-top: 1px solid var(--line);
}
.product-wall {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
}
.pw {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm);
  overflow: hidden; box-shadow: var(--shadow-sm); text-align: center;
}
.pw img { width: 100%; height: 170px; object-fit: cover; }
.pw span { display: block; padding: 10px; font-size: 14px; font-weight: 600; color: var(--ink-2); }

/* ===== 合作客户墙 ===== */
.client-wall {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
}
.client-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 28px 22px; text-align: center; box-shadow: var(--shadow-sm);
}
.client-ico {
  width: 56px; height: 56px; margin: 0 auto 14px; border-radius: 50%;
  background: var(--green-soft); display: grid; place-items: center; font-size: 28px;
}
.client-card h4 { font-size: 17px; margin-bottom: 8px; color: var(--ink); }
.client-card p { font-size: 14px; color: var(--ink-2); }
a.client-card { text-decoration: none; color: inherit; display: block; transition: .2s; }
a.client-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--green); }

/* ===== 客户案例卡（典型场景示例） ===== */
.case-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 6px; }
@media (max-width: 560px) { .case-grid { grid-template-columns: 1fr; } }
.case-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 22px 20px; box-shadow: var(--shadow-sm); transition: .2s;
  display: flex; flex-direction: column;
}
.case-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--green); }
.case-tag {
  align-self: flex-start; font-size: 12px; font-weight: 600; color: var(--green);
  background: var(--green-soft); padding: 3px 11px; border-radius: 20px; margin-bottom: 12px;
}
.case-card h4 { font-size: 17px; margin-bottom: 12px; color: var(--ink); }
.case-meta { list-style: none; padding: 0; margin: 0 0 12px; font-size: 13px; color: var(--ink-2); }
.case-meta li { margin-bottom: 5px; }
.case-meta b { color: var(--ink); font-weight: 600; margin-right: 4px; }
.case-need { font-size: 14px; color: var(--ink-2); margin: 0 0 10px; line-height: 1.6; }
.case-benefit {
  font-size: 13px; color: var(--muted); line-height: 1.6; margin: 0; padding-top: 10px;
  border-top: 1px dashed var(--line); margin-top: auto;
}

/* 客户案例：故事体（定制→下单→生产→送货 叙事） */
.case-story { background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm); padding:24px 24px; margin:16px 0; box-shadow:var(--shadow-sm); }
.case-story .case-tag { margin-bottom:12px; }
.case-story h4 { font-size:18px; margin:0 0 12px; color:var(--ink); line-height:1.4; }
.case-story p { font-size:14.5px; line-height:2.0; color:var(--ink-2); margin:0 0 12px; }
.case-story p:last-of-type { margin-bottom:0; }
.case-adv { font-size:13.5px; color:var(--muted); line-height:1.8; margin:14px 0 0; padding-top:12px; border-top:1px dashed var(--line); }
.case-adv b { color:var(--green-dark); font-weight:700; }

/* ===== 合作品牌 logo 墙 ===== */
.brand-wall { background: var(--bg-soft); padding: 56px 0; }
.brand-wall .section-title { text-align: center; font-size: 24px; color: var(--ink); margin: 0; }
.brand-wall .section-sub { text-align: center; color: var(--muted); font-size: 14px; margin: 8px auto 0; max-width: 520px; line-height: 1.6; }
.brand-grid {
  display: grid; grid-template-columns: repeat(6, 1fr);
  gap: 22px; margin-top: 26px; justify-items: center;
}
.brand-item {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm);
  width: 100%; max-width: 210px; height: 98px;
  display: flex; align-items: center; justify-content: center;
  padding: 16px 24px; transition: .2s; box-shadow: var(--shadow-sm); box-sizing: border-box;
}
.brand-item:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--green); }
.brand-item img { max-width: 100%; max-height: 64px; width: auto; height: auto; object-fit: contain; }
@media (max-width: 768px) { .brand-grid { grid-template-columns: repeat(3, 1fr); } .brand-item { max-width: none; } }
@media (max-width: 420px) { .brand-grid { grid-template-columns: repeat(2, 1fr); } }

/* ===== CTA 条 ===== */
.cta-band {
  background: linear-gradient(90deg, var(--green-deep), var(--green-dark));
  color: #fff; padding: 58px 0;
}
.cta-band .inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.cta-band h2 { font-size: 28px; margin-bottom: 8px; }
.cta-band p { color: rgba(255,255,255,.8); }
.cta-band .btn-ghost { color: #fff; border-color: rgba(255,255,255,.55); }
.cta-band .btn-ghost:hover { background: rgba(255,255,255,.1); }

/* ===== 流程步骤 ===== */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.step {
  display: flex; gap: 14px; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 22px; box-shadow: var(--shadow-sm);
}
.step .num {
  flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%;
  background: var(--green); color: #fff; display: grid; place-items: center;
  font-weight: 800; font-size: 15px;
}
.step h4 { font-size: 17px; margin-bottom: 6px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.step-day {
  font-size: 12px; font-weight: 700; color: var(--green);
  background: var(--green-soft); border-radius: 999px; padding: 2px 10px;
}
.step p { font-size: 14px; color: var(--ink-2); }

/* ===== 数据展示 ===== */
.stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-bottom: 10px;
}
.stat-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 22px; text-align: center; box-shadow: var(--shadow-sm);
}
.stat-card .num { font-size: 34px; font-weight: 800; color: var(--green); }
.stat-card .num .unit { font-size: 16px; color: var(--ink-2); margin-left: 2px; }
.stat-card .label { font-size: 14px; color: var(--muted); margin-top: 4px; }
.process-chain {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 18px;
  padding: 14px; background: var(--bg-soft); border-radius: var(--radius-sm);
}
.process-chain .node {
  background: #fff; border: 1px solid var(--line); padding: 8px 14px; border-radius: 8px;
  font-weight: 700; font-size: 14px;
}
.process-chain .arrow { color: var(--muted); font-weight: 700; }
.ul-check { list-style: none; }
.ul-check li {
  position: relative; padding-left: 22px; margin-bottom: 10px; color: var(--ink-2);
}
.ul-check li::before {
  content: "✓"; position: absolute; left: 0; color: var(--green); font-weight: 800;
}

/* ===== 页脚：俐顺式多栏 + 右侧热线二维码 ===== */
.footer {
  background: var(--ink); color: rgba(255,255,255,.72); padding: 60px 0 24px;
}
.footer a { color: rgba(255,255,255,.72); text-decoration: none; }
.footer a:hover { color: var(--brand-blue); }
.footer-main {
  display: grid;
  grid-template-columns: 1.6fr .9fr;
  gap: 48px;
  margin-bottom: 40px;
}
.footer-links {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 28px;
}
.footer-col h4 {
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 16px;
  padding-left: 10px;
  border-left: 3px solid var(--brand-blue);
}
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: 10px; font-size: 14px; }
.footer-col li a { color: rgba(255,255,255,.65); }
.footer-col li a:hover { color: var(--brand-blue); }

.footer-aside {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 26px;
}
.footer-hotline {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.footer-hotline .label {
  font-size: 13px;
  color: rgba(255,255,255,.55);
  letter-spacing: 1px;
}
.footer-hotline .contact-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.footer-hotline .contact-row .name {
  font-size: 14px;
  color: rgba(255,255,255,.75);
  min-width: 36px;
}
.footer-hotline .contact-row .tel {
  font-size: 22px;
  font-weight: 800;
  color: var(--brand-blue);
  letter-spacing: .5px;
}
.footer-hotline .contact-row .tel:hover { color: #fff; }
.btn-online {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  padding: 9px 22px;
  border-radius: 22px;
  background: var(--brand-blue);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}
.btn-online:hover { background: #fff; color: var(--brand-blue); }

.footer-aside .qr-band h4 {
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 12px;
  padding-left: 10px;
  border-left: 3px solid var(--brand-blue);
}
.qr-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.qr-card {
  display: flex; flex-direction: column; align-items: center;
  color: rgba(255,255,255,.72); line-height: 1.35;
}
.qr-card img {
  width: 100%; max-width: 132px; aspect-ratio: 1 / 1; height: auto;
  object-fit: contain;
  border-radius: 6px; background: #fff; padding: 4px;
  box-shadow: 0 3px 10px rgba(0,0,0,.25);
}
.qr-card .qr-label {
  display: block; margin-top: 6px;
  color: rgba(255,255,255,.72); font-weight: 600; font-size: 12px; letter-spacing: .3px;
}
.qr-card:hover img { box-shadow: 0 0 0 1.5px var(--brand-blue), 0 4px 12px rgba(0,0,0,.30); }

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.10);
  padding-top: 20px;
  font-size: 13px;
  color: rgba(255,255,255,.50);
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
}
.footer-bottom p { margin: 0; }
.footer .icp-num { margin-left: 12px; color: rgba(255,255,255,.65); text-decoration: none; }
.footer .icp-num:hover { color: #fff; text-decoration: underline; }

@media (max-width: 980px) {
  .footer-main { grid-template-columns: 1fr; gap: 38px; }
  .footer-links { grid-template-columns: repeat(2, 1fr); }
  .footer-aside { flex-direction: row; align-items: flex-start; justify-content: space-between; }
}
@media (max-width: 640px) {
  .footer-links { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .footer-aside { flex-direction: column; align-items: flex-start; }
  .qr-grid { grid-template-columns: repeat(2, 1fr); }
  .qr-card img { max-width: 120px; }
  .footer-hotline .tel { font-size: 22px; }
}
@media (max-width: 420px) {
  .footer-links { grid-template-columns: 1fr 1fr; }
  .qr-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}

/* ===== FAQ ===== */
.faq-item {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 22px 24px; margin-bottom: 14px; box-shadow: var(--shadow-sm);
}
.faq-item h3 { font-size: 17px; margin-bottom: 8px; color: var(--ink); }
.faq-item p { color: var(--ink-2); font-size: 15px; }

/* ===== 联系页 ===== */
.contact-grid {
  display: grid; grid-template-columns: 1.2fr .8fr; gap: 28px; align-items: start;
}
.contact-card h4 { font-size: 18px; margin-bottom: 4px; }
.contact-card .role { color: var(--green); font-size: 18px; font-weight: 700; margin-bottom: 12px; }
.contact-card p { margin-bottom: 10px; font-size: 14px; color: var(--ink-2); }
.contact-card a { font-weight: 700; }
.contact-card .qr {
  width: 140px; height: 140px; object-fit: cover; border-radius: 10px;
  border: 1px solid var(--line); margin-top: 8px;
}
.field { margin-bottom: 16px; }
.field label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; color: var(--ink-2); }
.field input,
.field select,
.field textarea {
  width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px;
  font-family: var(--font); font-size: 15px; color: var(--ink); background: #fff;
}
.field input:focus,
.field select:focus,
.field textarea:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px var(--green-soft); }
.field textarea { min-height: 110px; resize: vertical; }
.field .req { color: #c0392b; margin-left: 2px; }
.field-file small { display: block; font-size: 12.5px; color: var(--muted); margin-top: 6px; line-height: 1.5; }
.field-file input[type="file"] {
  width: 100%; padding: 10px 12px; border: 1px dashed var(--line); border-radius: 10px;
  font-size: 14px; color: var(--ink); background: var(--bg-soft); cursor: pointer;
}
.field-file input[type="file"]:hover { border-color: var(--accent); background: var(--accent-soft); }
.file-list { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; }
.file-list span {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px; border-radius: 999px; font-size: 12.5px;
  background: var(--green-soft); color: var(--ink-2);
}
.inq-privacy { font-size: 12.5px; color: var(--muted); margin-top: 6px; line-height: 1.6; }
#btn-submit {
  background: linear-gradient(135deg,#0B3A62,#195385); border-color: #0B3A62; color: #fff;
  box-shadow: 0 6px 16px rgba(26,26,46,.22); width: 100%;
}
#btn-submit:hover { background: linear-gradient(135deg,#C9A96E,#A8874E); border-color: #A8874E; }
#btn-submit:disabled { background: #c9cfc9; border-color: #c9cfc9; cursor: not-allowed; }
.inq-fallback {
  margin-top: 14px; padding-top: 12px;
  border-top: 1px dashed rgba(0, 0, 0, .14);
}
.inq-fallback[hidden] { display: none; }
.inq-fallback p { font-size: 13.5px; color: var(--ink-2); margin-bottom: 6px; }
.inq-fallback .qr {
  width: 132px; height: 132px; object-fit: cover; border-radius: 10px;
  border: 1px solid var(--line); margin-top: 6px;
}
.btn[disabled] { opacity: .62; cursor: not-allowed; }
.btn[disabled]:hover { background: var(--green); color: #fff; }

/* ===== 需求表单：清单结果区 ===== */
.inq-result {
  margin-top: 18px; padding: 16px;
  border: 1px solid var(--green); border-radius: var(--radius-sm);
  background: var(--green-soft);
}
.inq-result[hidden] { display: none; }
.inq-result-head {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 10px;
}
.inq-result-head strong { font-size: 15px; color: var(--ink); }
.inq-hint { font-size: 13px; color: var(--muted); }
.inq-text {
  width: 100%; min-height: 190px; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: 10px;
  font-family: var(--font); font-size: 14px; line-height: 1.75;
  color: var(--ink); background: #fff; resize: vertical;
}
.inq-text:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px var(--green-soft); }
.inq-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.inq-note { font-size: 12.5px; color: var(--muted); margin-top: 10px; line-height: 1.65; }
@media (max-width: 560px) {
  .inq-actions .btn { flex: 1 1 100%; text-align: center; justify-content: center; }
}

/* ===== 响应式 ===== */
@media (max-width: 900px) {
  .nav-links {
    display: none; position: absolute; top: 84px; left: 0; right: 0;
    background: #fff; flex-direction: column; padding: 12px 20px;
    border-bottom: 1px solid var(--line); box-shadow: var(--shadow);
  }
  .nav-links.open { display: flex; }
  .nav-toggle { display: inline-flex; background: none; border: none; font-size: 22px; color: var(--ink); cursor: pointer; }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-visual img { transform: none; }
  .hero-badge { right: 10px; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .product-wall { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .client-wall { grid-template-columns: repeat(2, 1fr); }
  .cta-band .inner { flex-direction: column; text-align: center; }
  .factory-trust { grid-template-columns: 1fr; }
  .factory-trust-img { min-height: 260px; padding: 10px; }
  .factory-trust-img img { max-height: 460px; }
  .factory-trust-body { padding: 28px; }
  .contact-grid { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .hero { padding: 48px 0 44px; }
  .hero h1 { font-size: 27px; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .client-wall { grid-template-columns: 1fr; }
  .stat-card .num { font-size: 28px; }
  .gallery { grid-template-columns: 1fr; }
  .gallery-item img { height: 220px; }
  .process-chain .arrow { display: none; }
  .process-chain { flex-direction: column; align-items: stretch; }
  .section-head h2 { font-size: 23px; }
  section { padding: 50px 0; }
}

/* ===== 工艺 Hero 图文块（products.html） ===== */
.craft-hero {
  display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: stretch;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow-sm); margin-top: 24px;
  min-height: 300px;
}
.craft-hero.reverse .craft-hero-visual { order: 2; }
.craft-hero.reverse .craft-hero-body { order: 1; }
/* 图片绝对定位填满容器：卡片高度由左栏内容与 min-height 决定，
   不再被图片原始比例撑开（竖图 3:4 曾把卡片撑到 700px+，左栏留白过大） */
.craft-hero-visual { position: relative; min-height: 300px; }
.craft-hero-visual img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center; display: block;
}
.craft-hero-body {
  padding: 26px 30px; display: flex; flex-direction: column; justify-content: center;
}
.craft-hero-body h3 { font-size: 24px; margin-bottom: 12px; color: var(--ink); }
.craft-hero-body p { color: var(--ink-2); margin-bottom: 18px; font-size: 15px; }
.craft-hero-body .ul-check li { font-size: 15px; margin-bottom: 8px; }

/* ===== v302 · 系列「底色分区」（仅 products.html） =====
   改动前：四系列仅「纯白 / .bg-soft 米白」两色交替，且 .bg-soft 自带内缩 22px、30px 圆角
   与金色径向渐变，与其他区块观感割裂，滚动时分区不明显。
   改动后：按 data-craft 给每个系列一块极浅底色（全幅），靠浅底 + 标题文字区分。
   ⚠️ 作用域限定 products.html：all-products.html 复用同一批 data-craft，但另有独立编辑式
      章节版式（body.pg-all），故用 body:not(.pg-all) 排除，不越界改它。
   ⚠️ 刻意不加「按材质换色」的色条 —— 与 v259（西子 09-15 拍板「统一细线 2px 香槟金、
      不按材质换色」）保持一致；.section-head 顶部那条统一细线沿用既有规则，不在此覆盖。 */
body:not(.pg-all) .series-block[data-craft="silicone"] { background: #FBF8F1; }
body:not(.pg-all) .series-block[data-craft="pvc"]      { background: #FDF5EF; }
body:not(.pg-all) .series-block[data-craft="vinyl"]    { background: #F5F8F5; }
body:not(.pg-all) .series-block[data-craft="abs"]      { background: #F4F6FA; }
body:not(.pg-all) .series-block[data-craft="giftset"]  { background: #FAF6F1; }

/* ===== v165 · 系列页统一「工艺判断」块 =====
   原先「适合 / 不适合」散在 83 个详情页（66 种说法），现上移到系列页各一块。 */
.craft-judge { margin-top: 30px; }
.craft-judge .cj-h {
  font-size: 19px; color: var(--ink); margin-bottom: 16px;
  padding-left: 14px; border-left: 3px solid var(--green);
}
.craft-judge .cj-cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.craft-judge .card h3 { font-size: 17px; }
@media (max-width: 720px) {
  .craft-judge .cj-cols { grid-template-columns: 1fr; }
}

/* ===== v167 · 系列页新增「材质定制能力」块 =====
   承接从详情页「可以定制什么」上移的材料级口径：LOGO 工艺 / 配色 / 表面效果。
   这三项对同一材质的所有产品完全一致（原先在 26 / 10 / 7 / 5 / 4 页里逐字重复），
   属材料级事实，放系列层；详情页只留单品专属项（LOGO 做在哪个部位、配件、容量、造型…）。
   视觉上与「工艺判断」区分：工艺判断金色左标，本块蓝色左标。 */
.craft-custom { margin-top: 34px; }
.craft-custom .cc-h {
  font-size: 19px; color: var(--ink); margin-bottom: 16px;
  padding-left: 14px; border-left: 3px solid var(--brand-blue, #106BAD);
}
.craft-custom .cc-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.craft-custom .card h3 { font-size: 17px; }
@media (max-width: 960px) {
  .craft-custom .cc-cols { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .craft-custom .cc-cols { grid-template-columns: 1fr; }
}

/* 详情页：工艺判断上移后，这里只留一行指向系列页的内链。
   保留 <section> 骨架（不删 section），否则 section:nth-of-type 奇偶翻转，
   会带动后续「同系列」标题由左对齐变居中 + 底色节奏错位。 */
.pd-judge-sec { padding: 30px 0 !important; }
.pd-judge-link {
  margin: 0; font-size: 15px; color: var(--ink-2);
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px;
}
.pd-judge-link a { color: var(--green-dark); font-weight: 600; }
.pd-judge-link a:hover { text-decoration: underline; }

/* ===== 工厂图文交错布局（about.html） ===== */
.wide-banner {
  position: relative; border-radius: var(--radius); overflow: hidden;
  margin-bottom: 42px; box-shadow: var(--shadow);
}
.wide-banner img { width: 100%; max-height: 420px; object-fit: cover; object-position: top center; display: block; }

.media-block {
  display: grid; grid-template-columns: 1fr 1fr; gap: 42px; align-items: center;
  margin-bottom: 54px;
}
.media-block.reverse .media-visual { order: 2; }
.media-block.reverse .media-body { order: 1; }
.media-visual { position: relative; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); }
.media-visual img { width: 100%; min-height: 320px; max-height: 400px; object-fit: cover; display: block; }
.media-body h3 { font-size: 26px; margin-bottom: 12px; color: var(--ink); }
.media-body p { color: var(--ink-2); margin-bottom: 18px; font-size: 15px; }
.media-body .ul-check li { font-size: 15px; margin-bottom: 8px; }

.mini-gallery {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px;
}
.mini-gallery-item {
  position: relative; border-radius: var(--radius-sm); overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.mini-gallery-item img { width: 100%; height: 260px; object-fit: cover; display: block; }

/* ===== 图片标签与小标签 ===== */
.img-label {
  position: absolute; left: 14px; bottom: 14px;
  background: rgba(22,36,43,.78); color: #fff;
  padding: 6px 12px; border-radius: 8px; font-size: 12px; font-weight: 700;
  backdrop-filter: blur(4px);
}
.kicker {
  display: inline-block; font-size: 15px; font-weight: 800; letter-spacing: 1.5px;
  color: var(--green); text-transform: uppercase; margin-bottom: 10px;
  padding: 5px 14px; border-radius: 999px; background: var(--green-soft);
}

/* ===== 合作伙伴 IP 案例说明 ===== */
.ip-intro {
  max-width: 760px; margin: 0 auto 28px; text-align: center;
  color: var(--ink-2); font-size: 16px; line-height: 1.8;
}

/* ===== 响应式补充 ===== */
@media (max-width: 900px) {
  .craft-hero,
  .craft-hero.reverse,
  .media-block,
  .media-block.reverse { grid-template-columns: 1fr; }
  .craft-hero .craft-hero-visual,
  .craft-hero.reverse .craft-hero-visual { order: -1; min-height: 0; aspect-ratio: 16 / 10; }
  .media-block .media-visual,
  .media-block.reverse .media-visual { order: -1; min-height: 240px; }
  .craft-hero-body,
  .media-body { padding: 26px; }
  .mini-gallery { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .wide-banner { margin-bottom: 30px; }
  .wide-banner img { max-height: 260px; }
  .media-block { margin-bottom: 38px; gap: 22px; }
  .media-visual img { min-height: 220px; max-height: 300px; }
  .mini-gallery-item img { height: 220px; }
}

/* ===== 资质与品控条 ===== */
.cert-bar {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
.cert-item {
  display: flex; align-items: center; gap: 14px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 20px; box-shadow: var(--shadow-sm);
}
.cert-ico {
  width: 48px; height: 48px; flex: none; border-radius: 12px;
  background: var(--green-soft); display: grid; place-items: center; font-size: 24px;
}
.cert-item strong { display: block; font-size: 16px; color: var(--ink); margin-bottom: 2px; }
.cert-item small { font-size: 13px; color: var(--muted); }

/* ===== 响应式：资质条 ===== */
@media (max-width: 900px) {
  .cert-bar { grid-template-columns: repeat(2, 1fr); }
  .hero-banner { min-height: 70vh; }
  .hero-banner h1 { font-size: 32px; }
  .hero-banner-inner { padding: 28px 0; }
}
@media (max-width: 560px) {
  .cert-bar { grid-template-columns: 1fr; }
  .hero-banner { min-height: 64vh; }
  .hero-banner h1 { font-size: 26px; }
}

/* ===== 首页：价值图文卡（图片卡） ===== */
.value-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.value-card {
  position: relative; border-radius: var(--radius); overflow: hidden;
  min-height: 250px; display: flex; align-items: flex-end;
  background-size: cover; background-position: center;
  box-shadow: var(--shadow-sm); border: 1px solid var(--line);
  transition: transform .25s, box-shadow .25s;
}
.value-card:hover, .craft-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.value-mask {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11,58,98,.04) 0%, rgba(11,58,98,.82) 100%);
}
.value-body { position: relative; padding: 20px; color: #fff; }
.value-tag {
  display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: 1px;
  background: var(--green); color: #fff; padding: 3px 10px; border-radius: 999px; margin-bottom: 8px;
}
.value-body h3 { font-size: 18px; margin-bottom: 4px; color: #fff; }
.value-body p { font-size: 13px; color: rgba(255,255,255,.86); }

/* ===== 首页：全幅工厂图带 ===== */
.factory-band {
  position: relative; background-size: cover; background-position: center;
  padding: 92px 0; text-align: center; color: #fff;
}
.factory-band-mask {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(11,58,98,.84), rgba(168,135,78,.72));
}
.factory-band-inner { position: relative; }
.factory-band h2 { font-size: 30px; margin-bottom: 12px; }
.factory-band p { color: rgba(255,255,255,.86); font-size: 16px; max-width: 640px; margin: 0 auto; }

/* ===== 首页：资质徽章卡 ===== */
.cert-item .cert-seal {
  width: 54px; height: 54px; flex: none; border-radius: 14px;
  background: linear-gradient(135deg, var(--green), var(--green-dark));
  color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 15px;
  box-shadow: 0 4px 14px rgba(201,169,110,.3);
}

/* ===== 首页：四大产品系列图卡 ===== */
.craft-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.craft-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm);
  overflow: hidden; box-shadow: var(--shadow-sm); display: flex; flex-direction: column;
  padding: 0;
}
.craft-img {
  height: 210px; background-size: cover; background-position: center;
  border-bottom: 4px solid var(--green);
}
.craft-card.c2 .craft-img { border-bottom-color: #3b82f6; }
.craft-card.c3 .craft-img { border-bottom-color: #f59e0b; }
.craft-card.c4 .craft-img { border-bottom-color: #8b5cf6; }
.craft-body { padding: 22px 24px; }
.craft-body .k { font-size: 12px; color: var(--muted); font-weight: 700; letter-spacing: 1px; }
.craft-body h4 { font-size: 20px; margin: 6px 0 8px; }
.craft-body p { color: var(--ink-2); font-size: 15px; }

/* ===== 响应式：新增模块 ===== */
@media (max-width: 900px) {
  .value-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .value-grid { grid-template-columns: 1fr; }
  .value-card { min-height: 190px; }
  .factory-band { padding: 64px 0; }
  .factory-band h2 { font-size: 23px; }
  .craft-grid { grid-template-columns: 1fr; }
  .craft-img { height: 200px; }
}

/* ============================================================
   装饰层 v3 · 破方块感 / 增强层次与光感
   原则：只加几何、光、圆角、节奏，不加卡通元素，保 B 端工厂调性。
   实现：纯 CSS 追加，不改动任何 HTML 结构与文案。
   回滚：整段删除即可（位于文件末尾，不影响前序规则）。
   ============================================================ */

/* --- 0. 基础：让区块可承载绝对定位装饰 --- */
section { position: relative; }

/* --- 1. 区块破形：浅灰区由「满幅直线」改为「内缩圆角色块」--- */
@media (min-width: 901px) {
  section.bg-soft { margin: 0 22px 10px; border-radius: 30px; }
}
section.bg-soft::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background:
    radial-gradient(720px 360px at 6% -8%, rgba(201,169,110,.09), transparent 62%),
    radial-gradient(600px 320px at 97% 110%, rgba(168,135,78,.05), transparent 64%);
}
section.bg-soft > .container { position: relative; z-index: 1; }

/* 白区：加极淡点阵，避免大片纯白发闷 */
section:not(.bg-soft):not(.hero-banner):not(.cta-band):not(.factory-band)::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: radial-gradient(rgba(26,26,46,.045) 1px, transparent 1px);
  background-size: 34px 34px;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
          mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
  opacity: .55;
}
section:not(.bg-soft):not(.hero-banner):not(.cta-band):not(.factory-band) > .container { position: relative; z-index: 1; }

/* --- 2. 标题装饰：渐变短横线，打破纯文字堆叠 --- */
.section-head h2 { position: relative; padding-bottom: 16px; }
.section-head h2::after {
  content: ""; position: absolute; left: 50%; transform: translateX(-50%); bottom: 0;
  width: 62px; height: 4px; border-radius: 4px;
  background: linear-gradient(90deg, var(--green), rgba(201,169,110,.18));
}
.section-head h2::before {
  content: ""; position: absolute; left: 50%; transform: translate(-50%, 1px); bottom: 0;
  width: 118px; height: 4px; border-radius: 4px;
  background: linear-gradient(90deg, transparent, rgba(201,169,110,.14) 30%, rgba(201,169,110,.14) 70%, transparent);
}
/* 非居中标题（工厂信任区）单独配一条左对齐短线 */
.factory-trust-body h2 { position: relative; padding-bottom: 14px; }
.factory-trust-body h2::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 54px; height: 4px; border-radius: 4px;
  background: linear-gradient(90deg, var(--green), rgba(201,169,110,.18));
}

/* --- 3. 标签：渐变胶囊 + 左侧竖条（hero 内 light 版保持原样）--- */
.eyebrow:not(.light), .kicker {
  position: relative;
  padding: 7px 18px 7px 30px;
  background: linear-gradient(135deg, rgba(201,169,110,.15), rgba(201,169,110,.04));
  border: 1px solid rgba(201,169,110,.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
}
.eyebrow:not(.light)::before, .kicker::before {
  content: ""; position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  width: 4px; height: 16px; border-radius: 2px;
  background: linear-gradient(180deg, var(--green), var(--green-dark));
}
.eyebrow.eyebrow-lg:not(.light) { padding-left: 34px; }
.eyebrow.eyebrow-lg:not(.light)::before { left: 15px; height: 18px; width: 5px; }

/* --- 4. 卡片破方：统一圆角、柔化边框、hover 上浮 + 顶部渐变细条 --- */
.card, .step, .cert-item, .faq-item, .stat-card, .client-card {
  position: relative; overflow: hidden;
  border-radius: 18px;
  border-color: rgba(26,26,46,.07);
  box-shadow: 0 2px 10px rgba(26,26,46,.05);
  transition: transform .25s ease, box-shadow .25s ease;
}
.card::before, .step::before, .cert-item::before, .faq-item::before,
.stat-card::before, .client-card::before {
  content: ""; position: absolute; left: 0; top: 0; right: 0; height: 3px; z-index: 2;
  background: linear-gradient(90deg, var(--green), rgba(201,169,110,.05));
  opacity: 0; transition: opacity .25s ease;
}
.card:hover, .step:hover, .cert-item:hover, .faq-item:hover,
.stat-card:hover, .client-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(26,26,46,.11);
}
.card:hover::before, .step:hover::before, .cert-item:hover::before,
.faq-item:hover::before, .stat-card:hover::before, .client-card:hover::before { opacity: 1; }

/* 图片卡：圆角加大 + 内描边 + 图片微缩放（有 overflow:hidden 兜底） */
.gallery-item, .pw, .value-card, .craft-card, .mini-gallery-item {
  border-radius: 18px;
  border-color: rgba(11,58,98,.07);
}
.gallery-item img, .pw img, .mini-gallery-item img { transition: transform .55s ease; }
.gallery-item:hover img, .pw:hover img, .mini-gallery-item:hover img { transform: scale(1.06); }
.value-card { box-shadow: 0 2px 10px rgba(26,26,46,.07), inset 0 0 0 1px rgba(255,255,255,.10); }

/* --- 5. 数字与图标：加光环，弱化「小方块贴纸」感 --- */
.step .num {
  background: linear-gradient(135deg, var(--green), var(--green-dark));
  box-shadow: 0 0 0 6px rgba(201,169,110,.10), 0 4px 12px rgba(201,169,110,.24);
}
.client-ico, .cert-ico {
  background: linear-gradient(135deg, rgba(201,169,110,.17), rgba(201,169,110,.04));
  box-shadow: 0 0 0 8px rgba(201,169,110,.045), inset 0 1px 0 rgba(255,255,255,.7);
}
.cert-seal {
  box-shadow: 0 4px 14px rgba(201,169,110,.30), inset 0 1px 0 rgba(255,255,255,.32);
  border-radius: 16px;
}
.stat-card::after {
  content: ""; position: absolute; right: -30px; bottom: -30px;
  width: 104px; height: 104px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(201,169,110,.11), transparent 70%);
}

/* --- 6. 大图区：消除硬边，加斜纹肌理 --- */
.hero-banner::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 130px;
  pointer-events: none; z-index: 1;
  background: linear-gradient(180deg, rgba(255,255,255,0), #fff);
}
.factory-band::after, .cta-band::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(135deg, rgba(255,255,255,.055) 0 2px, transparent 2px 15px);
}
.cta-band { position: relative; overflow: hidden; }
.cta-band::before {
  content: ""; position: absolute; right: -80px; top: -110px;
  width: 340px; height: 340px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255,255,255,.10), transparent 68%);
}
.cta-band .container { position: relative; z-index: 1; }
.factory-band-inner { position: relative; z-index: 2; }

/* --- 7. 页脚：顶部渐变细线 + 极淡光斑 --- */
.footer { position: relative; overflow: hidden; }
.footer::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, var(--green), rgba(168,135,78,.75), var(--green));
}
.footer::after {
  content: ""; position: absolute; left: -60px; bottom: -120px;
  width: 380px; height: 380px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(201,169,110,.16), transparent 70%);
}

/* --- 8. 按钮：主按钮加渐变与投影 --- */
.btn-primary {
  background: linear-gradient(135deg, var(--green), var(--green-dark));
  box-shadow: 0 6px 16px rgba(201,169,110,.26), inset 0 1px 0 rgba(255,255,255,.18);
}
.btn-primary:hover { background: linear-gradient(135deg, var(--green-dark), var(--green-deep)); }

/* --- 9. 勾选列表：符号改圆形绿底，弱化纯字符感 --- */
.ul-check li { padding-left: 26px; }
.ul-check li::before {
  content: "✓";
  width: 16px; height: 16px; border-radius: 50%; top: 7px; left: 0;
  display: inline-grid; place-items: center;
  font-size: 10px; line-height: 1; color: #fff; background: var(--green);
}

/* --- 10. 移动端：关掉内缩与点阵，避免空间被吃掉 --- */
@media (max-width: 900px) {
  section.bg-soft { margin: 0; border-radius: 0; }
  section:not(.bg-soft):not(.hero-banner):not(.cta-band):not(.factory-band)::before { display: none; }
  .section-head h2::before { display: none; }
}

/* ============================================================
   装饰层 v4 · 层次 / 线条 / 配色
   对 v3 的补强：v3 只做了形状柔化，v4 解决 z 轴层次、线的组织、色彩体系。
   同样纯 CSS 追加，不动 HTML 与文案；回滚删除本段即可。
   ============================================================ */

/* --- 0. 调色板与三级阴影 --- */
:root {
  --gold: #A8874E;
  --blue: #2f6fed;
  --amber: #e0912f;
  --violet: #7c56d6;
  --sh-1: 0 1px 2px rgba(26,26,46,.05), 0 2px 8px rgba(26,26,46,.045);
  --sh-2: 0 4px 12px rgba(26,26,46,.07), 0 14px 30px rgba(26,26,46,.07);
  --sh-3: 0 10px 24px rgba(26,26,46,.10), 0 30px 64px rgba(26,26,46,.12);
}

/* --- 1. 层次：卡片由「纯白平铺」改为「微渐变底 + 三级阴影」--- */
.card, .step, .cert-item, .faq-item, .stat-card, .client-card, .craft-card {
  background: linear-gradient(180deg, #ffffff 0%, #fbfdfc 100%);
  box-shadow: var(--sh-1);
}
.card:hover, .step:hover, .cert-item:hover, .faq-item:hover,
.stat-card:hover, .client-card:hover, .craft-card:hover {
  box-shadow: var(--sh-3);
  transform: translateY(-5px);
}
/* 价值图文卡：浮起更明显 */
.value-card:hover { transform: translateY(-6px); box-shadow: var(--sh-3); }

/* --- 2. 色彩：卡片顶部细条常显，四色循环（面积仅 4px，不吵）--- */
.card::before, .step::before, .cert-item::before, .faq-item::before,
.stat-card::before, .client-card::before { height: 4px; opacity: .55; }
.client-wall .client-card:nth-child(4n+2)::before,
.cert-bar .cert-item:nth-child(4n+2)::before,
.steps .step:nth-child(4n+2)::before,
.gallery .gallery-item:nth-child(4n+2)::before {
  background: linear-gradient(90deg, var(--blue), rgba(47,111,237,.12));
}
.client-wall .client-card:nth-child(4n+3)::before,
.cert-bar .cert-item:nth-child(4n+3)::before,
.steps .step:nth-child(4n+3)::before,
.gallery .gallery-item:nth-child(4n+3)::before {
  background: linear-gradient(90deg, var(--amber), rgba(224,145,47,.12));
}
.client-wall .client-card:nth-child(4n+4)::before,
.cert-bar .cert-item:nth-child(4n+4)::before,
.steps .step:nth-child(4n+4)::before,
.gallery .gallery-item:nth-child(4n+4)::before {
  background: linear-gradient(90deg, var(--violet), rgba(124,86,214,.12));
}
/* 价值卡标签四色，让首屏色相不再单一 */
.value-grid .value-card:nth-child(2) .value-tag { background: var(--blue); }
.value-grid .value-card:nth-child(3) .value-tag { background: var(--amber); }
.value-grid .value-card:nth-child(4) .value-tag { background: var(--violet); }
/* 工艺卡顶部色条加粗，四工艺色更明确 */
.craft-img { border-bottom-width: 5px; }

/* --- 3. 线条：标题下的短线 / 列表分隔 / 步骤连接线 --- */
.card h3, .step h4, .client-card h4, .cert-item strong { position: relative; }
.card h3, .step h4, .client-card h4 { padding-bottom: 10px; }
.card h3::after, .step h4::after, .client-card h4::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 32px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, rgba(201,169,110,.55), rgba(201,169,110,.06));
}
.ul-check li + li { padding-top: 10px; border-top: 1px dashed rgba(11,58,98,.10); }
@media (min-width: 901px) {
  .steps { position: relative; }
  .steps::before {
    content: ""; position: absolute; left: 8%; right: 8%; top: 41px; height: 1px; z-index: 0;
    background: repeating-linear-gradient(90deg, rgba(201,169,110,.30) 0 7px, transparent 7px 14px);
  }
  .steps .step { position: relative; z-index: 1; }
}

/* --- 4. 线条：图片加「错位第二层框」，制造双层景深 --- */
.media-visual { overflow: visible; }
.media-visual img { position: relative; z-index: 1; border-radius: 16px; }
.media-visual::after {
  content: ""; position: absolute; inset: -14px -14px 14px 14px; z-index: 0;
  border: 1px solid rgba(201,169,110,.20); border-radius: 18px; pointer-events: none;
}
/* 首屏加竖向细线网格：技术感 + 线条节奏 */
.hero-scrim {
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.045) 0 1px, transparent 1px 86px),
    linear-gradient(105deg, rgba(11,58,98,.88) 0%, rgba(11,58,98,.62) 46%, rgba(11,58,98,.18) 100%);
}

/* --- 5. 区块角落几何装饰：v275 已移除（同心细圆环）---
   原实现给每个 section 右上角叠一个 132px 三环装饰（border .10 + box-shadow 三层）。
   问题：v275 金条收敛后，它是同一套装饰体系里最大的残留——132px 圆弧压在正文右上，
   在浅底上直接显形为大弧线（西子 09-17 截图）。已整体删除；区块层次改由
   「单金斜切饰条 + 留白 + 细线分隔」承担。删掉本段注释不恢复任何样式。--- */
section:not(.hero-banner):not(.cta-band):not(.factory-band)::after { content: none; }

/* --- 6. 色彩：深色区加入暖金，打破「深绿到底」--- */
.cta-band {
  background: linear-gradient(100deg, #0B3A62 0%, #A8874E 52%, #C9A96E 100%);
}
.cta-band::after {
  background-image:
    linear-gradient(90deg, rgba(201,169,110,.95), rgba(168,135,78,.9), rgba(168,135,78,.85)),
    repeating-linear-gradient(135deg, rgba(255,255,255,.055) 0 2px, transparent 2px 15px);
  background-size: 100% 3px, auto;
  background-repeat: no-repeat, repeat;
  background-position: top left, 0 0;
}
.footer-col h4, .footer-aside .qr-band h4 { position: relative; padding-left: 10px; }
.footer-col h4::before, .footer-aside .qr-band h4::before {
  content: ""; position: absolute; left: 0; top: 5px; bottom: 5px;
  width: 3px; border-radius: 2px;
  background: var(--brand-blue);
}
/* --- 7. 层次：数字与徽章加描边内高光 --- */
.stat-card .num { text-shadow: 0 2px 0 rgba(201,169,110,.08); }
.cert-seal { letter-spacing: .5px; }
.step .num { letter-spacing: 0; }
.qr-card img { box-shadow: 0 0 0 1px rgba(255,255,255,.10), 0 6px 18px rgba(0,0,0,.28); }

/* --- 8. 补：图库卡顶部彩条基础定义（上面第 2 节的四色循环要生效，必须先有这一层）--- */
.gallery-item { position: relative; }
.gallery-item::before {
  content: ""; position: absolute; left: 0; top: 0; right: 0; height: 4px; z-index: 3;
  background: linear-gradient(90deg, var(--green), rgba(201,169,110,.12));
  opacity: .55; transition: opacity .25s ease;
}
.gallery-item:hover::before { opacity: 1; }

/* ============================================================
   装饰层 v5 · 加大幅度 · 把克制变有质感
   仍纯 CSS 追加，零 HTML 改动；回滚删本段。
   ============================================================ */

/* --- A. 章节号水印（仅 .section-head 计数，跳号消除）--- */
body { counter-reset: hqsec; }
.section-head { counter-increment: hqsec; position: relative; }
.section-head::before {
  content: counter(hqsec, decimal-leading-zero);
  position: absolute; right: -6px; top: -58px;
  font-family: Georgia, "Times New Roman", "Songti SC", serif;
  font-size: 84px; font-weight: 700; line-height: 1;
  color: rgba(201,169,110,.07);
  pointer-events: none; z-index: 0;
}
@media (max-width: 720px) {
  .section-head::before { font-size: 44px; top: -26px; right: 0; }
}

/* --- B. 区块顶部斜切饰条（破方块；覆盖 v4 的点阵）---
   v275：原为「金→蓝→琥珀→紫」四色渐变（彩虹色条），与香槟金单强调体系冲突，
   改为单金渐变；两端渐隐保留斜切破方块的版式作用，去多彩。--- */
section:not(.hero-banner):not(.cta-band):not(.factory-band):not(.bg-soft)::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; z-index: 2;
  background:
    linear-gradient(95deg,
      transparent 0%, transparent 10%,
      var(--green-dark) 12%, var(--green) 48%, rgba(201,169,110,.28) 88%,
      transparent 90%);
  transform: skewY(-0.8deg);
  transform-origin: left top;
  opacity: .55; pointer-events: none;
}
@media (max-width: 720px) {
  section:not(.hero-banner):not(.cta-band):not(.factory-band):not(.bg-soft)::before {
    height: 3px; opacity: .28; transform: skewY(-0.4deg);
  }
}

/* --- C. 卡片左侧彩色便签条 --- */
.card, .step, .client-card, .cert-item, .stat-card, .faq-item {
  border-left: 4px solid rgba(201,169,110,.22);
  padding-left: 22px;
}
.client-wall .client-card:nth-child(4n+2) { border-left-color: var(--blue); }
.client-wall .client-card:nth-child(4n+3) { border-left-color: var(--amber); }
.client-wall .client-card:nth-child(4n+4) { border-left-color: var(--violet); }
.cert-bar .cert-item:nth-child(4n+2) { border-left-color: var(--blue); }
.cert-bar .cert-item:nth-child(4n+3) { border-left-color: var(--amber); }
.cert-bar .cert-item:nth-child(4n+4) { border-left-color: var(--violet); }
.steps .step:nth-child(4n+2) { border-left-color: var(--blue); }
.steps .step:nth-child(4n+3) { border-left-color: var(--amber); }
.steps .step:nth-child(4n+4) { border-left-color: var(--violet); }
@media (max-width: 900px) {
  .card, .step, .client-card, .cert-item, .stat-card, .faq-item {
    border-left-width: 3px; padding-left: 18px;
  }
}

/* --- D. 浮起阴影升级（彩色描边）--- */
.card:hover, .step:hover, .cert-item:hover, .faq-item:hover,
.stat-card:hover, .client-card:hover, .craft-card:hover {
  box-shadow: var(--sh-3), 0 0 0 1px rgba(201,169,110,.12);
}
.value-card:hover { box-shadow: var(--sh-3), 0 0 0 1px rgba(201,169,110,.16); }

/* --- E. stat-card 装饰圆升级 --- */
.stat-card::after {
  width: 150px; height: 150px;
  background: radial-gradient(circle, rgba(201,169,110,.14), transparent 70%);
}

/* --- F. 步骤 day 标签彩色循环 --- */
.step .step-day {
  background: linear-gradient(135deg, rgba(201,169,110,.15), rgba(201,169,110,.05));
  border: 1px solid rgba(201,169,110,.15);
}
.steps .step:nth-child(2) .step-day {
  color: var(--blue); border-color: rgba(47,111,237,.25);
  background: linear-gradient(135deg, rgba(47,111,237,.15), rgba(47,111,237,.05));
}
.steps .step:nth-child(3) .step-day {
  color: var(--amber); border-color: rgba(224,145,47,.25);
  background: linear-gradient(135deg, rgba(224,145,47,.15), rgba(224,145,47,.05));
}
.steps .step:nth-child(4) .step-day {
  color: var(--violet); border-color: rgba(124,86,214,.25);
  background: linear-gradient(135deg, rgba(124,86,214,.15), rgba(124,86,214,.05));
}

/* --- G. eyebrow 右侧延伸线（标题装饰线）--- */
.section-head .eyebrow:not(.light) { position: relative; }
.section-head .eyebrow:not(.light)::after {
  content: ""; position: absolute; right: -68px; top: 50%; transform: translateY(-50%);
  width: 60px; height: 1px;
  background: linear-gradient(90deg, rgba(201,169,110,.45), transparent);
}

/* --- H. 首屏加金色光斑 + 底部金色线 --- */
.hero-banner::before {
  content: ""; position: absolute; right: -60px; top: 90px; width: 240px; height: 240px;
  border-radius: 50%; pointer-events: none; z-index: 1;
  background: radial-gradient(circle, rgba(168,135,78,.22), transparent 65%);
}
.hero-scrim { z-index: 1; }
.hero-banner-inner { position: relative; z-index: 3; }
.hero-banner::after {
  background:
    linear-gradient(180deg, transparent 0%, transparent 70%, rgba(168,135,78,.55) 88%, transparent 100%),
    linear-gradient(180deg, rgba(255,255,255,0), #fff);
  height: 130px;
}

/* --- I. CTA 主按钮加金色描边外环 --- */
.cta-band .btn-primary {
  box-shadow: 0 8px 22px rgba(0,0,0,.32), 0 0 0 2px rgba(168,135,78,.55), inset 0 1px 0 rgba(255,255,255,.22);
}
.cta-band .btn-primary:hover {
  box-shadow: 0 10px 28px rgba(0,0,0,.40), 0 0 0 2px var(--gold), inset 0 1px 0 rgba(255,255,255,.22);
}


/* ============================================================
   装饰层 v6 · 动效与微交互（Motion & Polish）
   前几版做足了静态装饰，本版转向「动」：入场、滚动反馈、微交互。
   配套 assets/js/ui-motion.js（渐进增强）：
   - 隐藏态只挂在 html.js-ready 之下；脚本不执行 → 内容全可见
   - prefers-reduced-motion → 一律静止
   回滚：删除本段 + 移除各页底部 ui-motion.js 引用。
   ============================================================ */

/* --- 0. 动效基建：入场淡入上移（仅 js-ready 下生效） --- */
.js-ready .rv,
.js-ready .stg > * {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .55s cubic-bezier(.22,.61,.36,1), transform .55s cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}
.js-ready .rv.in,
.js-ready .stg.in > * { opacity: 1; transform: none; }
/* 小屏位移减半，避免拖沓 */
@media (max-width: 720px) {
  .js-ready .rv,
  .js-ready .stg > * { transform: translateY(10px); }
}

/* --- 1. 导航：滚动后实底 + 阴影（目录版 sticky 导航） --- */
.nav { transition: background .25s ease, box-shadow .25s ease; }
.nav.scrolled { background: rgba(255,255,255,.98); box-shadow: 0 6px 18px rgba(26,26,46,.08); }

/* --- 2. 导航项 hover 下划线从左生长（active 常显） --- */
.nav-links a { overflow: hidden; }
.nav-links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px;
  height: 2px; border-radius: 2px; background: var(--green);
  transform: scaleX(0); transform-origin: left center;
  transition: transform .28s cubic-bezier(.22,.61,.36,1);
}
.nav-links a:hover::after,
.nav-links a.active::after { transform: scaleX(1); }
.nav-links a.active::after { transform-origin: left center; }

/* --- 3. 按钮：按压反馈 + 键盘焦点环（无障碍） --- */
.btn {
  transition: transform .15s ease, box-shadow .22s ease, background .22s ease,
              border-color .22s ease, color .22s ease;
}
.btn:active { transform: scale(.97); }
a:focus-visible, button:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--green); outline-offset: 2px; border-radius: 4px;
}

/* --- 4. 细节质感：选区 / 滚动条 / 移动端点按 --- */
::selection { background: rgba(201,169,110,.24); color: var(--ink); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
  background: rgba(201,169,110,.34); border-radius: 8px; border: 2px solid #fff;
}
::-webkit-scrollbar-thumb:hover { background: rgba(201,169,110,.52); }
::-webkit-scrollbar-track { background: transparent; }
html { -webkit-tap-highlight-color: transparent; }

/* --- 5. 首屏 hero 内容缓入（JS 加 .played） --- */
/* 隐藏态必须限定在 .hero-banner 之下：本规则原写作 `.js-ready .hero-banner-inner > *`，
   没带祖先限定，于是把 culture.html / news.html 里 .page-hero 内的 .container.hero-banner-inner
   也一起打成 opacity:0；而那两页没有 .hero-banner，恢复动画的 .hero-banner.played 永不匹配，
   首屏 eyebrow 与大标题就永久不可见了（.page-hero .sub 因自身写了 opacity:1 才幸存）。
   加一个 .hero-banner 祖先限定，首页轮播动画不受影响，另两页恢复正常。 */
.js-ready .hero-banner .hero-banner-inner > * { opacity: 0; }
.js-ready .hero-banner.played .hero-banner-inner > * {
  animation: hqUp .7s cubic-bezier(.22,.61,.36,1) forwards;
}
.js-ready .hero-banner.played .hero-banner-inner > :nth-child(1) { animation-delay: .05s; }
.js-ready .hero-banner.played .hero-banner-inner > :nth-child(2) { animation-delay: .16s; }
.js-ready .hero-banner.played .hero-banner-inner > :nth-child(3) { animation-delay: .27s; }
.js-ready .hero-banner.played .hero-banner-inner > :nth-child(4) { animation-delay: .38s; }
.js-ready .hero-banner.played .hero-banner-inner > :nth-child(5) { animation-delay: .49s; }
.js-ready .hero-banner.played .hero-banner-inner > :nth-child(6) { animation-delay: .60s; }
@keyframes hqUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

/* --- 6. 无障碍：系统要求减动效时全部静止 --- */
@media (prefers-reduced-motion: reduce) {
  .js-ready .rv, .js-ready .stg > *,
  .js-ready .hero-banner-inner > * {
    opacity: 1 !important; transform: none !important;
    animation: none !important; transition: none !important;
  }
  html { scroll-behavior: auto; }
}


/* ============================================================
   装饰层 v7 · 破版式
   目标：解决「6 个 section 一个模子、字号全挤在正常区间」的单调感。
   手段：1 尺度对比  2 节奏交替  3 卡片错落  4 深色区差异化
   纯 CSS 追加，不动 HTML 与文案；回滚删除本段即可（位于文件末尾）。
   ============================================================ */

/* --- 1. 尺度对比：造一个超大锚点 --- */
.hero-banner { min-height: 88vh; }
.hero-banner h1 { font-size: 62px; line-height: 1.06; letter-spacing: -.5px; margin-bottom: 22px; }
.hero-banner .eyebrow.light { font-size: 16px; letter-spacing: 2.5px; }
.hero-banner .sub.light { font-size: 19px; line-height: 1.72; max-width: 620px; margin-bottom: 28px; }
.hero-banner .tags { margin-bottom: 32px; }

.section-head h2 { font-size: 34px; letter-spacing: .3px; }
.section-head p { font-size: 17px; line-height: 1.7; }
.factory-trust-body h2 { font-size: 34px; }
.craft-body h4 { font-size: 22px; }
.card h3 { font-size: 19px; }

/* 数字 34 -> 56：渐变文字做视觉锚点（不支持时自动回退纯色） */
.stat-card .num { font-size: 56px; line-height: 1.04; letter-spacing: -1px; }
.stat-card .num .unit { font-size: 20px; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .stat-card .num {
    background: linear-gradient(135deg, #C9A96E 0%, #A8874E 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .stat-card .num .unit { -webkit-text-fill-color: var(--ink-2); }
}
.factory-stats strong { font-size: 34px; letter-spacing: -.5px; }

/* --- 2. 节奏：区块留白交错，不再一水儿 72px --- */
section:not(.hero-banner):not(.cta-band):not(.factory-band):nth-of-type(odd)  { padding: 76px 0; }
section:not(.hero-banner):not(.cta-band):not(.factory-band):nth-of-type(even) { padding: 90px 0; }

/* --- 3. 交替对齐：奇数区块标题左对齐，打破全居中 --- */
@media (min-width: 901px) {
  section:nth-of-type(odd) .section-head { text-align: left; margin-left: 0; margin-right: auto; }
  section:nth-of-type(odd) .section-head h2::after  { left: 0; transform: none; width: 72px; }
  section:nth-of-type(odd) .section-head h2::before { left: 0; transform: translateY(1px); }
}

/* --- 4. 卡片错落 --- */
/* 4.1 价值卡：6 列网格 = 1 张大卡(3x2) + 1 张横卡(3) + 1 张窄卡(2) + 1 张宽卡(4)，无空洞 */
@media (min-width: 901px) {
  .value-grid { grid-template-columns: repeat(6, 1fr); grid-auto-rows: 196px; }
  .value-grid .value-card:nth-child(1) { grid-column: span 3; grid-row: span 2; min-height: 0; }
  .value-grid .value-card:nth-child(2) { grid-column: span 3; min-height: 0; }
  .value-grid .value-card:nth-child(3) { grid-column: span 2; min-height: 0; }
  .value-grid .value-card:nth-child(4) { grid-column: span 4; min-height: 0; }
  .value-grid .value-card:nth-child(1) .value-body { padding: 28px 30px; }
  .value-grid .value-card:nth-child(1) .value-body h3 { font-size: 25px; }
  .value-grid .value-card:nth-child(1) .value-body p  { font-size: 16px; }
}
/* 4.2 工艺卡：右列整体下移，形成错落呼吸 */
@media (min-width: 901px) {
  .craft-grid { align-items: start; }
  .craft-grid .craft-card:nth-child(even) { margin-top: 32px; }
}
/* 4.3 图库 / 产品墙：图片高度交错，卡片高度不再齐平 */
.gallery { align-items: start; }
.gallery .gallery-item:nth-child(3n+2) img { height: 300px; }
.gallery .gallery-item:nth-child(3n+3) img { height: 266px; }
.product-wall { align-items: start; }
.product-wall .pw:nth-child(even) img { height: 200px; }

/* --- 5. 深色区差异化：三处不再都是「居中白字 + 同一张蒙版」--- */
/* 5.1 首屏：左对齐大标题（已是），加高到 88vh，靠超大字号立锚点 */
/* 5.2 工厂带：居中 + 斜向渐变（2026-09-12 西子要求居中，去掉左侧暖橙竖条） */
.factory-band { text-align: center; }
.factory-band-mask {
  background: linear-gradient(135deg, rgba(11,58,98,.86) 0%, rgba(168,135,78,.62) 52%, rgba(201,169,110,.34) 100%);
}
.factory-band-inner { max-width: 900px; margin: 0 auto; position: relative; z-index: 2; }
.factory-band h2 { font-size: 40px; letter-spacing: -.3px; line-height: 1.16; }
.factory-band p { margin: 0 auto; max-width: 640px; font-size: 17px; }
/* 5.3 CTA 条：横向两端布局 + 底部暖橙细线，与首屏金线呼应 */
.cta-band h2 { font-size: 36px; letter-spacing: -.2px; }
.cta-band .btn { padding: 15px 30px; font-size: 16px; }
.cta-band { border-bottom: 5px solid rgba(168,135,78,.5); }

/* --- 6. 响应式回落：小屏一律回到居中 + 单/双列，避免破版式在小屏失控 --- */
@media (max-width: 900px) {
  .hero-banner h1 { font-size: 40px; }
  .section-head h2 { font-size: 28px; }
  .stat-card .num { font-size: 42px; }
  .factory-stats strong { font-size: 28px; }
  .factory-band h2 { font-size: 30px; }
  .factory-band { text-align: center; }
  .factory-band-inner { max-width: none; margin: 0 auto; padding-left: 0; }
  .factory-band p { margin: 0 auto; }
  .cta-band h2 { font-size: 28px; }
  .value-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: auto; }
  .value-grid .value-card:nth-child(n) { grid-column: auto; grid-row: auto; min-height: 210px; }
  .craft-grid .craft-card:nth-child(even) { margin-top: 0; }
  section:nth-of-type(odd) .section-head { text-align: center; margin-left: auto; margin-right: auto; }
  section:nth-of-type(odd) .section-head h2::after  { left: 50%; transform: translateX(-50%); }
  section:nth-of-type(odd) .section-head h2::before { left: 50%; transform: translate(-50%, 1px); }
}
@media (max-width: 720px) {
  .hero-banner h1 { font-size: 34px; }
  .hero-banner .sub.light { font-size: 17px; }
  .gallery .gallery-item:nth-child(3n+2) img,
  .gallery .gallery-item:nth-child(3n+3) img { height: 230px; }
  .product-wall .pw:nth-child(even) img { height: 170px; }
}
@media (max-width: 560px) {
  .hero-banner h1 { font-size: 29px; }
  .stat-card .num { font-size: 36px; }
}


/* ============================================================
   装饰层 v8 · 图标 SVG 化（替换 emoji）
   原 emoji 缺陷：
   - 国旗 emoji（美国/欧盟）在 Windows Segoe UI Emoji 下渲染成字母 "US"/"EU"
   - 彩色 emoji（礼物/楼宇/喇叭/碗/叶）与 B 端工厂专业调性冲突
   改为内联 SVG 线性图标（currentColor 取色，单色、可随主题走）。
   备份：index.html.bak_before_icons_0907；回滚删本段 + 还原备份。
   ============================================================ */
.cert-seal svg, .client-ico svg { display: block; }
/* 资质徽标：绿底白标，SVG 取白 */
.cert-seal svg { color: #fff; }
/* 客户类型图标：浅绿底，SVG 取深青绿 */
.client-ico svg { color: var(--green-dark); }
.client-card:hover .client-ico svg { color: var(--green); }
.client-ico svg, .cert-seal svg { transition: color .25s ease; }


/* ============================================================
   装饰层 v9 · 缩面积（根治"一大片色"）
   依据：竞品实测（万洋礼品 #c9a96e 低饱和暖金 + #1a1a2e 墨蓝黑；
   恒屹/环球 高彩度占比 0%，纯白底）。结论是「低饱和 + 小面积点缀」，
   不是换色相。v9 把 4 处大面积铺色收成中性，彩度只留在点缀位。
   备份：style.css.bak_before_gold_0907；回滚删本段。
   ============================================================ */

/* --- 1. CTA 条：半条金 → 整条墨蓝黑（金只留底部 5px 细线）--- */
.cta-band {
  background: linear-gradient(100deg, #0B3A62 0%, #114673 58%, #195385 100%);
}
.cta-band h2, .cta-band p { color: #fff; }
.cta-band .btn-primary {
  background: #C9A96E; border-color: #C9A96E; color: #0B3A62;
  box-shadow: 0 6px 18px rgba(0,0,0,.24);
}
.cta-band .btn-primary:hover {
  background: #E3CB9C; border-color: #E3CB9C; color: #0B3A62;
}

/* --- v244 · CTA 条反转为暖调浅底（与深蓝页脚拉开层次）
   问题：CTA 通栏深蓝 + 页脚通栏深蓝，同一页上下紧挨、色彩/CTA 雷同。
   解法：CTA 用暖灰奶油底+深字+品牌绿按钮，页脚保持深蓝锚点不变。
   视觉效果：浅色"行动岛" → 深色"信息基座"，层次分明。 --- */
.cta-band {
  background: linear-gradient(100deg, #FAF8F4 0%, #F5F0E8 50%, #EDE6D6 100%);
}
.cta-band h2 { color: #1a1a2e; }
.cta-band p { color: rgba(26,26,46,.72); }
/* 深底装饰元素在浅底上不适用：隐去白色光斑和斜纹 */
.cta-band::before { display: none; }
.cta-band::after {
  background-image:
    linear-gradient(90deg, rgba(201,169,110,.12), rgba(168,135,78,.10)),
    repeating-linear-gradient(135deg, rgba(26,26,46,.03) 0 2px, transparent 2px 15px);
  background-size: 100% 3px, auto;
  background-repeat: no-repeat, repeat;
  background-position: top left, 0 0;
}
.cta-band .btn-primary {
  background: linear-gradient(135deg, var(--green), var(--green-dark));
  border-color: var(--green); color: #fff;
  box-shadow: 0 6px 18px rgba(0,0,0,.14);
}
.cta-band .btn-primary:hover {
  background: linear-gradient(135deg, var(--green-dark), var(--green-deep));
  color: #fff;
}
.cta-band .btn-ghost {
  color: rgba(26,26,46,.75); border-color: rgba(26,26,46,.22);
}
.cta-band .btn-ghost:hover {
  background: rgba(26,26,46,.05); color: #1a1a2e;
}

/* --- 2. 资质徽标 ×8：金方块 → 白底金边金字（去掉 8 块大面积金）--- */
.cert-item .cert-seal {
  background: #fff;
  border: 1.5px solid rgba(201,169,110,.6);
  color: #A8874E;
  box-shadow: 0 2px 8px rgba(26,26,46,.05);
}
.cert-seal svg { color: #A8874E; }

/* --- 3. 主按钮：金渐变 → 墨蓝黑（hover 才变金，降低常态金色面积）--- */
.btn-primary {
  background: linear-gradient(135deg, #0B3A62, #195385);
  border-color: #0B3A62;
  box-shadow: 0 6px 16px rgba(26,26,46,.22), inset 0 1px 0 rgba(255,255,255,.14);
}
.btn-primary:hover {
  background: linear-gradient(135deg, #C9A96E, #A8874E);
  border-color: #A8874E; color: #fff;
}
.btn-ghost { border-color: rgba(168,135,78,.55); }
.btn-ghost:hover { background: rgba(201,169,110,.10); }

/* --- 4. 工厂带蒙版：金绿渐变 → 墨蓝黑主导（金只保留左侧竖条）--- */
.factory-band-mask {
  background: linear-gradient(135deg, rgba(11,58,98,.90) 0%, rgba(26,26,46,.76) 55%, rgba(46,46,74,.52) 100%);
}

/* --- 5. 超大数字：金渐变在白底对比度不足，改「深金→墨蓝黑」--- */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .stat-card .num {
    background: linear-gradient(135deg, #A8874E 0%, #0B3A62 92%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

/* --- 6. 卡片左侧 4px 竖条：金 → 低透明墨蓝黑，减弱色块感 --- */
.card, .step, .client-card, .cert-item, .stat-card, .faq-item {
  border-left-color: rgba(26,26,46,.16);
}
.client-wall .client-card:nth-child(4n+2),
.cert-bar .cert-item:nth-child(4n+2),
.steps .step:nth-child(4n+2) { border-left-color: rgba(47,111,237,.42); }
.client-wall .client-card:nth-child(4n+3),
.cert-bar .cert-item:nth-child(4n+3),
.steps .step:nth-child(4n+3) { border-left-color: rgba(224,145,47,.45); }
.client-wall .client-card:nth-child(4n+4),
.cert-bar .cert-item:nth-child(4n+4),
.steps .step:nth-child(4n+4) { border-left-color: rgba(124,86,214,.38); }

/* --- 7. 客户类型图标：浅金底 + 深金线（小面积，作为暖调记忆点）--- */
.client-ico svg { color: #A8874E; }
.client-card:hover .client-ico svg { color: #8A6D3B; }


/* ============================================================
   装饰层 v10 · 产品卡片升级（参考竞品「卡片 + 角标 + CTA」模式）
   品牌色 #106BAD：从 assets/img/logo.png 实测吸色得出
     （中蓝 rgb(16,107,173)，饱和度 91%，占 logo 彩色像素 52226 为绝对主色）
   辅助深色 #00417C：logo 次级深蓝
   作用范围：仅 products.html 的 4 个产品系列（25 张，结构内含 .pcard-cta）
     总览区（工艺卡）/ 案例区 无 .pcard-cta → 不加角标、不加按钮
   注意：.gallery-item::before 已被 v4 装饰层占用（顶部 4px 彩条），
     故角标改用 figure::before，避免覆盖既有彩条。
   备份：style.css.bak_before_v10_0907 / products.html.bak_before_v10_0907
   回滚：删除本段 + 还原 products.html 备份
   ============================================================ */

:root {
  --brand-blue: #106BAD;
  --brand-blue-dark: #00417C;
}

/* --- 1. 角标定位容器（figure 需相对定位）--- */
.gallery-item figure { position: relative; }


/* --- 3. CTA 按钮「获取报价」→ contact.html --- */
.pcard-cta {
  display: block;
  margin: 10px 12px 14px;
  padding: 9px 14px;
  border-radius: 8px;
  background: linear-gradient(135deg, #106BAD, #0d5a91);
  border: 2px solid #00417C;
  color: #fff;
  font-size: 14px; font-weight: 700; text-align: center;
  text-decoration: none;
  text-shadow: 0 1px 1px rgba(0,0,0,.15);
  transition: background .22s ease, transform .15s ease, box-shadow .22s ease;
  box-shadow: 0 4px 12px rgba(0,0,0,.18);
}
.pcard-cta:hover {
  background: linear-gradient(135deg, #00417C, #00335f);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0,0,0,.24);
}
.pcard-cta:active { transform: scale(.98); }

/* --- 4. 产品卡 hover 微提（兼容 v6 动效层 / v7 错落尺寸）--- */
.gallery-item:has(.pcard-cta) {
  transition: transform .25s ease, box-shadow .25s ease;
}
.gallery-item:has(.pcard-cta):hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 26px rgba(26,26,46,.13);
}

/* --- 5. 移动端收敛 --- */
@media (max-width: 720px) {
  .pcard-cta { margin: 8px 10px 12px; padding: 8px 12px; font-size: 13px; }
}

/* --- 6. 无障碍：系统要求减动效时静止 --- */
@media (prefers-reduced-motion: reduce) {
  .gallery-item:has(.pcard-cta),
  .pcard-cta { transition: none !important; }
  .gallery-item:has(.pcard-cta):hover { transform: none; }
  .pcard-cta:hover { transform: none; }
}

/* ==========================================================
   v11 · 单品详情页（product/*.html）+ 首页热销产品卡
   配色沿用 v9 香槟金 #C9A96E / 墨蓝黑 #1A1A2E，CTA 用 logo 蓝 #106BAD
   如需回滚：删除本段（从「v11 · 单品详情页」到文件末尾）即可
   ========================================================== */

/* --- 面包屑 --- */
.crumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-size: 14px; color: var(--ink-2); margin-bottom: 22px;
}
.crumb a { color: var(--ink-2); text-decoration: none; }
.crumb a:hover { color: var(--brand-blue); }
.crumb span { opacity: .45; }
.crumb .cur { color: var(--ink); font-weight: 600; opacity: 1; }

/* --- 详情页主区：左图右信息 --- */
.pd-hero { padding: 34px 0 44px; }
.pd-top {
  display: grid; grid-template-columns: 1.02fr .98fr;
  gap: 38px; align-items: start;
}
.pd-media {
  position: relative; border-radius: 14px; overflow: hidden;
  background: #fff; border: 1px solid rgba(26,26,46,.07);
  box-shadow: 0 10px 30px rgba(26,26,46,.09);
}
.pd-media .pd-photo { display: block; width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.pd-badge {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  width: auto; height: 80px;
  max-width: 110px;
  object-fit: contain;
}
.pd-info h1 { font-size: 34px; line-height: 1.25; margin: 6px 0 12px; color: var(--ink); }
.pd-lead { font-size: 16px; color: var(--ink-2); margin-bottom: 20px; }
.pd-sub { font-size: 15px; color: var(--ink); margin: 0 0 10px; }
.pd-info .ul-check li { font-size: 15px; margin-bottom: 8px; }
.pd-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 22px 0 12px; }
.pd-note { font-size: 13px; color: var(--ink-2); opacity: .82; margin: 0; }

/* --- 规格表 --- */
/* --- 规格参数：双栏卡片（横向铺满，纵向篇幅减半）--- */
.spec-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;
}
.spec-item {
  display: grid; grid-template-columns: 120px minmax(0, 1fr);
  background: #fff; border: 1px solid rgba(26,26,46,.09); border-radius: 10px;
  overflow: hidden; box-shadow: 0 3px 12px rgba(26,26,46,.05);
}
.spec-k {
  display: flex; align-items: center;
  padding: 12px 14px; background: rgba(201,169,110,.10);
  font-size: 13px; font-weight: 700; color: var(--ink); line-height: 1.45;
}
.spec-v {
  display: flex; align-items: center;
  padding: 12px 16px; font-size: 14.5px; color: var(--ink-2); line-height: 1.6;
}
@media (max-width: 900px) {
  .spec-grid { grid-template-columns: 1fr; gap: 10px; }
}

/* --- 不适合 / 需注意 列表：暖金警示色 --- */
.ul-caution { list-style: none; }
.ul-caution li {
  position: relative; padding-left: 26px; margin-bottom: 10px;
  font-size: 15px; color: var(--ink-2);
}
.ul-caution li::before {
  content: "!"; position: absolute; left: 6px; top: 0;
  color: #A8874E; font-weight: 800;
}
.ul-caution li + li { padding-top: 10px; border-top: 1px dashed rgba(11,58,98,.10); }

/* --- 同系列推荐卡 --- */
.pd-rel-card { display: block; color: inherit; text-decoration: none; }
.pd-rel .gallery-item { transition: transform .25s ease, box-shadow .25s ease; }
.pd-rel .gallery-item:hover {
  transform: translateY(-3px); box-shadow: 0 10px 26px rgba(26,26,46,.13);
}

/* --- 首页热销产品区 --- */
.hot-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.hot-card {
  display: flex; flex-direction: column; background: #fff;
  border: 1px solid rgba(26,26,46,.08); border-radius: 14px; overflow: hidden;
  box-shadow: 0 6px 22px rgba(26,26,46,.06);
  transition: transform .25s ease, box-shadow .25s ease;
}
.hot-card:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(26,26,46,.14); }
.hot-media { position: relative; }
.hot-media .hot-photo { display: block; width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.hot-tag {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  width: auto; height: 72px;
  max-width: 100px;
  object-fit: contain;
}
.hot-body { padding: 16px 18px 18px; display: flex; flex-direction: column; flex: 1; }
.hot-kicker {
  display: inline-block; font-size: 12px; font-weight: 700; color: #A8874E;
  letter-spacing: 1px; margin-bottom: 6px;
}
.hot-body h3 { font-size: 18px; margin-bottom: 8px; color: var(--ink); }
.hot-body p { font-size: 14px; color: var(--ink-2); margin-bottom: 14px; }
.hot-cta { display: flex; gap: 10px; margin-top: auto; }
.hot-cta .btn { flex: 1; text-align: center; padding: 9px 10px; font-size: 14px; }

/* --- 响应式 --- */
@media (max-width: 980px) {
  .pd-top { grid-template-columns: 1fr; gap: 26px; }
  .hot-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .pd-hero { padding: 22px 0 30px; }
  .pd-info h1 { font-size: 27px; }
  .spec-item { grid-template-columns: 100px minmax(0, 1fr); }
  .spec-k { padding: 11px 12px; font-size: 12.5px; }
  .spec-v { padding: 11px 14px; font-size: 14px; }
  .hot-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .hot-card, .pd-rel .gallery-item { transition: none !important; }
  .hot-card:hover, .pd-rel .gallery-item:hover { transform: none; }
}

/* --- v11b · 产品卡双按钮（查看详情 + 获取报价）--- */
.pcard-link { display: block; color: inherit; text-decoration: none; }
.pcard-tag {
  position: absolute; left: 10px; bottom: 46px;
  background: rgba(38,42,47,.78); color: #fff;
  font-size: 12px; font-weight: 600; padding: 4px 10px;
  border-radius: 999px; backdrop-filter: blur(4px);
}
.pcard-cta-row { display: flex; gap: 8px; margin: 10px 12px 14px; }
.pcard-cta-row .pcard-cta { flex: 1; margin: 0; padding: 9px 6px; font-size: 13px; text-align: center; }
.pcard-cta.ghost {
  background: #fff; color: var(--brand-blue-dark);
  border: 2px solid var(--brand-blue-dark); box-shadow: none;
}
.pcard-cta.ghost:hover {
  background: #eaf4fb; color: var(--brand-blue-dark);
  transform: translateY(-1px); box-shadow: 0 4px 12px rgba(16,107,173,.16);
}
@media (max-width: 720px) {
  .pcard-cta-row { margin: 8px 10px 12px; }
  .pcard-cta-row .pcard-cta { padding: 8px 4px; font-size: 12px; }
}

/* --- v107 · 官方账号二维码放大（2×2，可扫）---
   原 78px 一行 4 个太小扫不出，改 2×2、每张 132px */
.footer .qr-card img {
  max-width: 132px;
  padding: 5px;
  border-radius: 8px;
  box-shadow: 0 3px 10px rgba(0,0,0,.25);
}
.footer .qr-card .qr-label {
  margin-top: 8px;
  font-size: 13px;
  letter-spacing: .3px;
  color: rgba(255,255,255,.72);
}
.footer .qr-grid { gap: 14px; }
.footer .qr-card:hover img {
  box-shadow: 0 0 0 1.5px var(--brand-blue), 0 4px 12px rgba(0,0,0,.30);
}
@media (max-width: 720px) {
  .footer .qr-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .footer .qr-card img { max-width: 120px; padding: 4px; }
  .footer .qr-card .qr-label { font-size: 12px; }
}

/* ==========================================================
   v11d · 产品页品类筛选条（A）+ 材质能力 tag（C）
   v261 改版：整块加底色分区（原先悬在白底空洞里，观感简陋）+ 行距收紧 + chip 加轻量卡感。
   ⚠️ JS 依赖的选择器一个未动：#pCount / .chips[data-group] .chip / #pReset（craft-filter.js）
   ========================================================== */
.filter-wrap { background: linear-gradient(180deg, #FBF8F1 0%, #FFFFFF 78%); }
.filter-bar {
  position: sticky; top: 64px; z-index: 40;
  background: rgba(255,255,255,.96);
  backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--line);
  padding: 10px 0;
  box-shadow: 0 4px 16px rgba(26,26,46,.05);
}
.filter-row { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; flex-wrap: wrap; }
/* 结果 + 重置行：虚线分隔，视觉上与三组筛选分开，不再是孤零零一行 */
.filter-row-foot {
  margin-top: 10px; margin-bottom: 0; padding-top: 9px;
  border-top: 1px dashed var(--line);
}
.filter-key {
  font-size: 13px; font-weight: 700; color: var(--ink-2);
  letter-spacing: 1px; min-width: 54px;
}
.chips { display: flex; gap: 7px; flex-wrap: wrap; }
.chip {
  border: 1.5px solid rgba(11,58,98,.14); background: #fff; color: var(--ink-2);
  border-radius: 999px; padding: 7px 15px; font-size: 14px; font-weight: 600;
  cursor: pointer; line-height: 1.4; box-shadow: 0 1px 2px rgba(26,26,46,.04);
  transition: border-color .2s ease, color .2s ease, background .2s ease, transform .15s ease, box-shadow .2s ease;
}
.chip:hover {
  border-color: var(--brand-blue); color: var(--brand-blue);
  transform: translateY(-1px); box-shadow: 0 3px 8px rgba(26,26,46,.08);
}
.chip.active {
  background: var(--brand-blue); border-color: var(--brand-blue); color: #fff;
  box-shadow: 0 4px 12px rgba(16,107,173,.28);
}
.chip.reset { border-style: dashed; padding: 4px 13px; font-size: 13px; box-shadow: none; }
.filter-result { font-size: 13px; color: var(--ink-2); margin-top: 2px; }
.filter-result strong { color: var(--brand-blue); font-size: 15px; }
.filter-note { margin-top: 9px; font-size: 13px; color: var(--muted); }
.filter-empty {
  margin-top: 10px; padding: 10px 14px; border-radius: 8px;
  background: rgba(168,135,78,.10); color: #8A6C33; font-size: 14px;
}

/* --- C：系列下的材质能力 tag --- */
.tag-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 2px; justify-content: center; }
.ctag {
  background: rgba(201,169,110,.14); color: #8A6C33;
  border: 1px solid rgba(168,135,78,.35); border-radius: 6px;
  padding: 4px 11px; font-size: 13px; font-weight: 600; letter-spacing: .3px;
}

@media (max-width: 720px) {
  .filter-bar { position: static; }
  .filter-key { min-width: auto; font-size: 12px; }
  /* v243：窄屏原本是 nowrap + overflow-x:auto 横滑，但 14 个品类远超一屏、又没有滑动提示，
     客户只看到前 6 个就以为品类就这么几款（连续两轮反馈「贴边了 / 显示不全」）。
     改成与桌面一致的折行 —— 宁可多占 2-3 行，也不隐藏任何品类。 */
  .chips { flex-wrap: wrap; padding-bottom: 2px; }
  .chip { white-space: nowrap; font-size: 13px; padding: 5px 12px; }
}

/* ==========================================================
   v11e · 首页大轮播（6 帧产品工艺）
   配色：香槟金 #C9A96E + 墨蓝黑 #1A1A2E + 品牌蓝 #106BAD
   回滚：删本段至文件末尾
   ========================================================== */
.rotator-band { padding: 40px 0 56px; }

.rotator {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background: #0B3A62;
  box-shadow: 0 18px 44px rgba(26,26,46,.18);
}

.rot-track { position: relative; height: 420px; }

.rot-slide {
  position: absolute; inset: 0;
  display: grid; grid-template-columns: 0.9fr 1.1fr;
  opacity: 0; pointer-events: none;
  transition: opacity .55s ease;
}
.rot-slide.is-active { opacity: 1; pointer-events: auto; }

.rot-art { position: relative; overflow: hidden; background: #0F0F1C; }
.rot-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rot-art::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(15,15,28,.30) 0%, rgba(15,15,28,0) 35%);
  pointer-events: none;
}

.rot-text {
  display: flex; flex-direction: column; justify-content: center;
  padding: 44px 56px; color: #fff;
}
.rot-tag {
  display: inline-block; align-self: flex-start;
  font-size: 12px; font-weight: 700; letter-spacing: 1.5px;
  color: #C9A96E; border: 1px solid rgba(201,169,110,.5);
  padding: 5px 12px; border-radius: 999px; margin-bottom: 18px;
}
.rot-text h3 {
  font-size: 36px; line-height: 1.2; color: #fff;
  margin: 0 0 14px;
}
.rot-text p {
  font-size: 16px; line-height: 1.7; color: rgba(255,255,255,.78);
  margin-bottom: 22px;
}
.rot-cta {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--brand-blue); color: #fff;
  font-size: 15px; font-weight: 700; letter-spacing: .5px;
  padding: 12px 24px; border-radius: 8px; text-decoration: none;
  box-shadow: 0 6px 18px rgba(16,107,173,.35);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.rot-cta:hover {
  transform: translateY(-2px); box-shadow: 0 10px 24px rgba(16,107,173,.45);
  background: #0a5a96;
}

.rot-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,.10); color: #fff;
  border: 1px solid rgba(255,255,255,.25);
  font-size: 24px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(6px);
  transition: background .2s ease, transform .2s ease;
  z-index: 3;
}
.rot-arrow:hover { background: var(--brand-blue); border-color: var(--brand-blue); transform: translateY(-50%) scale(1.05); }
.rot-prev { left: 18px; }
.rot-next { right: 18px; }

.rot-dots {
  position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 8px; list-style: none;
  padding: 6px 12px; border-radius: 999px;
  background: rgba(0,0,0,.35); backdrop-filter: blur(6px);
  z-index: 3;
}
.rot-dots li {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255,255,255,.55);
  cursor: pointer; transition: background .2s ease, transform .2s ease, width .25s ease;
}
.rot-dots li.is-active {
  background: var(--brand-blue);
  width: 22px; border-radius: 999px;
}

/* --- 响应式 --- */
@media (max-width: 980px) {
  .rot-track { height: 480px; }
  .rot-slide { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; }
  .rot-text { padding: 28px 32px; }
  .rot-text h3 { font-size: 28px; }
}
@media (max-width: 720px) {
  .rotator-band { padding: 28px 0 36px; }
  .rot-track { height: 560px; }
  .rot-slide { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; }
  .rot-text { padding: 22px 22px 28px; }
  .rot-text h3 { font-size: 22px; margin-bottom: 10px; }
  .rot-text p { font-size: 14px; margin-bottom: 16px; line-height: 1.6; }
  .rot-cta { padding: 10px 18px; font-size: 14px; }
  .rot-arrow { width: 36px; height: 36px; font-size: 20px; }
  .rot-prev { left: 10px; } .rot-next { right: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .rot-slide { transition: none; }
  .rot-cta { transition: none; }
}
/* =========================================================
   v14 · 色调活泼化 + 产品中心页左侧目录
   增量升级段；删掉本段即整体回滚到 v13 视觉
   ⚠️ 2026-09-12 修复：本段之前残留了一行误写入的 shell 垃圾文本
   （`CSSEOF\necho "v11e 样式已追加"`），CSS 解析器把它与下面的 `:root`
   拼成一个非法选择器，导致【整段 :root 变量从未生效】——
   即 `--accent / --accent-soft` 一直是未定义状态，凡是用到它们的
   规则（.sqn-cta / .sqn-all / .btn-ghost / .nav::before / .pd-actions …）
   全部失效：`.sqn-cta` 的首屏按钮因此变成「白字 + 透明底」＝看不见。
   垃圾行已删除。`--accent` 一组按原设计恢复生效（橙色行动色）。
   注：--green / --green-dark / --green-deep / --green-soft / --green-tint
   与 --radius 显式钉在当前正在生效的取值上，避免这次修复顺带把全站金色
   换成 v14 的暖金（西子未要求改色）。要启用暖金，把下面 5 行 green 换成
   #DBA53C / #BD8826 / #16223E / #FFF5E4 / #FFFBF3 即可。
   ========================================================= */
:root{
  --green:#C9A96E; --green-dark:#A8874E; --green-deep:#0B3A62;
  --green-soft:#F7F3EA; --green-tint:#FAF8F4;
  --accent:#A8874E; --accent-soft:#F7F0E2;
  --mint:#C9A96E; --sun:#C9A96E; --link:#A8874E;
  --radius:16px; --radius-sm:12px;
}
.eyebrow{ background:linear-gradient(135deg,var(--accent-soft),var(--green-soft)); color:var(--green-dark); }
.btn-primary{ background:linear-gradient(135deg,#0B3A62,#195385); border-color:#0B3A62; color:#fff; box-shadow:0 6px 16px rgba(26,26,46,.22), inset 0 1px 0 rgba(255,255,255,.14); }
.btn-primary:hover{ background:linear-gradient(135deg,#C9A96E,#A8874E); border-color:#A8874E; color:#fff; transform:translateY(-2px); box-shadow:0 10px 24px rgba(168,135,78,.30); }
.btn-ghost{ color:var(--accent); border-color:var(--accent); }
.btn-ghost:hover{ background:var(--accent-soft); }
.card,.gallery-item{ transition:transform .2s, box-shadow .2s; }
.card:hover,.gallery-item:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.hero{ background:linear-gradient(135deg,#FFF7EC 0%, #EAF7F4 100%); }
.series-quick-nav{ position:sticky; top:64px; z-index:40; background:var(--green-tint); border-bottom:1px solid var(--line); box-shadow:0 2px 10px rgba(26,26,46,.05); }
.series-quick-nav .container{ display:flex; gap:8px; overflow-x:auto; padding:10px 40px; scrollbar-width:none; align-items:stretch; }
.series-quick-nav .container::-webkit-scrollbar{ display:none; }
/* 2026-09-18 重排：原 `.series-quick-nav a` 里混入 writing-mode:vertical-rl +
   text-orientation:upright + letter-spacing:3px 三条竖排指令，把每个导航项渲染成
   一根竖条（products / about 两页同时中招），并把 sticky 条撑到 130px+。
   现改为「分段导航」：名称 + 款数徽标横排；带 .sqn-wide（products）时各项均分
   卡宽、选中项金底，与下方 .category-quick-nav 的胶囊筛选条形成两级层次。 */
.series-quick-nav .sqn-key{ flex:0 0 auto; display:flex; align-items:center; font-size:13px; font-weight:700; color:var(--muted); letter-spacing:1px; padding-right:16px; margin-right:4px; border-right:1px solid var(--line); }
.series-quick-nav a{ flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px 18px; border-radius:10px; border:1px solid transparent; background:var(--green-soft); color:var(--ink-2); font-size:15px; font-weight:600; white-space:nowrap; transition:.15s; }
.series-quick-nav.sqn-wide a.sqn-item{ flex:1 1 0; }
.series-quick-nav a:hover{ background:#fff; border-color:var(--green); color:var(--green-dark); }
.series-quick-nav a.active{ background:var(--accent); border-color:var(--accent); color:#fff; box-shadow:0 4px 12px rgba(168,135,78,.24); }
.series-quick-nav a span{ display:inline-flex; align-items:center; justify-content:center; min-width:24px; height:20px; padding:0 7px; border-radius:999px; background:#fff; color:var(--green-dark); font-size:12px; font-weight:700; line-height:1; transition:.15s; box-shadow:inset 0 0 0 1px rgba(201,169,110,.28); }
.series-quick-nav a:hover span{ background:var(--green-soft); box-shadow:inset 0 0 0 1px rgba(201,169,110,.45); }
.series-quick-nav a.active span{ background:rgba(255,255,255,.26); color:#fff; }
.series-quick-nav .sqn-all{ border-style:dashed; border-color:var(--accent); color:var(--accent); background:#fff; }
.series-quick-nav .sqn-all:hover{ background:var(--accent-soft); color:var(--accent); }
.series-quick-nav .sqn-cta{ margin-left:auto; background:var(--accent); border-color:var(--accent); color:#fff; box-shadow:0 4px 12px rgba(168,135,78,.28); }
.series-quick-nav .sqn-cta:hover{ background:#8f7040; border-color:#8f7040; color:#fff; }
@media (max-width:768px){ .series-quick-nav{ top:56px; } .series-quick-nav .container{ gap:6px; padding:10px 40px; } .series-quick-nav.sqn-wide a.sqn-item{ flex:0 0 auto; } .series-quick-nav a{ padding:10px 14px; font-size:14px; gap:6px; } .series-quick-nav a span{ min-width:20px; height:18px; padding:0 6px; font-size:11px; } .series-quick-nav .sqn-key{ display:none; } .series-quick-nav .sqn-cta{ margin-left:0; } }
main.catalog-main{ max-width:var(--maxw); margin:0 auto; padding:0 20px; }
.catalog-layout{ display:grid; grid-template-columns:248px 1fr; gap:32px; align-items:start; max-width:var(--maxw); margin:28px auto 0; padding:0 20px; }
.catalog-main section{ padding:40px 0; }
.catalog-main section:first-child{ padding-top:8px; }
section[data-craft], section.use-case, section#use-cases{ scroll-margin-top:150px; }
.catalog-nav{ position:sticky; top:80px; background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:18px 14px; box-shadow:var(--shadow-sm); max-height:calc(100vh - 100px); overflow-y:auto; }
.catalog-nav::-webkit-scrollbar{ width:5px; }
.catalog-nav::-webkit-scrollbar-thumb{ background:var(--line); border-radius:3px; }
.catalog-nav::-webkit-scrollbar-track{ background:transparent; }
.catalog-nav .cn-title{ font-size:15px; font-weight:800; color:var(--ink); margin:2px 8px 12px; display:flex; align-items:center; gap:8px; }
.catalog-nav .cn-title::before{ content:""; width:6px; height:18px; border-radius:3px; background:linear-gradient(var(--accent),var(--mint)); }
.catalog-nav a{ display:flex; align-items:center; justify-content:space-between; padding:10px 12px; border-radius:12px; color:var(--ink-2); font-weight:600; font-size:15px; border-left:3px solid transparent; transition:.18s; }
.catalog-nav a:hover{ background:var(--green-soft); color:var(--accent); }
.catalog-nav a.active{ background:var(--accent-soft); color:var(--accent); border-left-color:var(--accent); }
.catalog-nav a .cn-count{ font-size:12px; font-weight:700; color:#fff; background:var(--mint); border-radius:999px; padding:1px 8px; }
.catalog-nav .cn-divider{ height:1px; background:var(--line); margin:12px 4px; }
.catalog-nav .cn-sub{ display:flex; flex-direction:column; gap:2px; padding-left:12px; border-left:2px solid var(--line); margin:4px 0 10px 12px; }
.catalog-nav .cn-sub a{ font-size:13.5px; padding:7px 10px; border-radius:10px; font-weight:600; color:var(--ink-2); }
.catalog-nav .cn-sub a:hover{ background:var(--green-soft); color:var(--accent); }
.catalog-nav .cn-cta{ margin-top:14px; }
.catalog-nav .cn-cta .btn{ width:100%; }
@media (max-width:880px){
  .catalog-layout{ grid-template-columns:1fr; gap:18px; }
  .catalog-nav{ position:static; top:auto; display:flex; gap:8px; overflow-x:auto; padding:10px; }
  .catalog-nav .cn-title,.catalog-nav .cn-divider,.catalog-nav .cn-cta,.catalog-nav .cn-sub{ display:none; }
  .catalog-nav a{ white-space:nowrap; border-left:none; }
  .catalog-nav a.active{ border-left:none; }
}

/* =========================================================
   v15 · 顶部导航三栏下拉（产品中心 / 材质工艺 / 应用场景）
   增量段；删掉本段即整体回滚到 v14
   ========================================================= */
.nav-item{ position:relative; display:inline-flex; align-items:center; }
.nav-has-menu{ display:inline-flex; align-items:center; gap:4px; cursor:pointer; }
.nav-has-menu .caret{ font-size:9px; line-height:1; opacity:.65; transition:transform .18s; margin-left:1px; }
.nav-item:hover .caret{ transform:rotate(180deg); }
.nav-sub{
  position:absolute; top:100%; left:50%;
  transform:translateX(-50%) translateY(0);
  margin-top:6px;
  min-width:200px; background:#fff; border:1px solid var(--line);
  border-radius:14px; box-shadow:var(--shadow-lg); padding:8px;
  display:flex; flex-direction:column; gap:2px; z-index:60;
  opacity:0; visibility:hidden; pointer-events:none;
  transition: opacity .15s ease, visibility 0s linear .2s;
}
.nav-sub::before{ content:""; position:absolute; top:-6px; left:0; right:0; height:6px; }
.nav-item:hover .nav-sub,
.nav-item:focus-within .nav-sub{ opacity:1; visibility:visible; pointer-events:auto; transition-delay:0s; }
.nav-sub a{
  color:var(--ink-2); font-weight:600; font-size:14px; padding:8px 12px;
  border-radius:10px; white-space:nowrap; position:static; overflow:visible;
}
.nav-sub a::after{ display:none; }
.nav-sub a:hover{ background:var(--accent-soft); color:var(--accent); }
.nav-sub .sub-label{
  font-size:12px; font-weight:700; color:var(--muted); text-transform:uppercase;
  letter-spacing:1.5px; padding:10px 12px 4px; margin-top:4px;
  border-top:1px dashed var(--line); pointer-events:none;
}
.nav-sub .sub-label:first-child{ border-top:none; margin-top:0; padding-top:4px; }
.nav-sub a.active{ background:var(--accent-soft); color:var(--accent); }

/* ===== 产品中心 / 礼品方案 下拉：图片卡片单排横向滚动（v52） ===== */
.nav-sub-products,
.nav-sub-solutions{
  position:fixed; top:84px;
  left:50%; right:auto;
  transform:translateX(-50%);
  width:fit-content;
  max-width: calc(100vw - 40px);
  padding:14px;
  margin-top:0;
  opacity:0; visibility:hidden; pointer-events:none;
  transition: opacity .15s ease, visibility 0s linear .25s;
}
/* 礼品方案面板右缘对齐导航栏最右侧（v92） */
.nav-sub-solutions{
  left:auto;
  right: max(20px, calc((100vw - var(--maxw)) / 2 + 20px));
  transform:none;
}
/* 透明桥接区：覆盖面板与导航项之间的头部空隙，鼠标可顺利滑入 */
.nav-sub-products::before,
.nav-sub-solutions::before{
  content:""; position:absolute; top:-44px; left:0; right:0; height:44px;
}
.nav-item:hover .nav-sub-products,
.nav-item:hover .nav-sub-solutions,
.nav-item:focus-within .nav-sub-products,
.nav-item:focus-within .nav-sub-solutions{
  opacity:1; visibility:visible; pointer-events:auto; transition-delay:0s;
}
.product-mini-grid{
  display:flex; flex-wrap:nowrap; justify-content:center; gap:10px;
  overflow-x:auto; overflow-y:hidden;
  padding-bottom:6px;
  scrollbar-width:thin;
}
.product-mini-grid::-webkit-scrollbar{ height:6px; }
.product-mini-grid::-webkit-scrollbar-track{ background:transparent; }
.product-mini-grid::-webkit-scrollbar-thumb{ background:var(--line); border-radius:3px; }
.product-mini-card{
  flex:0 0 auto;
  width:116px;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  padding:10px 8px; border-radius:12px; text-align:center;
}
.product-mini-card:hover{ background:var(--bg-soft); }
.product-mini-card figure{
  width:100%; aspect-ratio:1; border-radius:10px; overflow:hidden;
  background:var(--bg-soft); border:1px solid var(--line);
}
.product-mini-card img{
  width:100%; height:100%; object-fit:cover; transition:transform .2s;
}
.product-mini-card:hover img{ transform:scale(1.04); }
.product-mini-card span{
  font-size:13px; font-weight:600; color:var(--ink-2); line-height:1.3;
}
.product-mini-card:hover span{ color:var(--green); }
.product-mini-card.all{
  justify-content:center;
  width:130px;
  min-width:130px;
  background:var(--bg-soft); border:1px dashed var(--line);
}
.product-mini-card.all span{ color:var(--green); font-weight:700; }
.product-mini-card.all:hover{ background:var(--green-soft); }
.product-mini-all{
  display:none;
}
@media (max-width:980px){
  .nav-sub-products,
  .nav-sub-solutions{ position:fixed; top:84px; left:50%; right:auto; transform:translateX(-50%); width:fit-content; max-width: calc(100vw - 32px); }
  .product-mini-card{ width:104px; }
  .product-mini-card.all{ width:120px; min-width:120px; }
  .product-mini-card span{ font-size:12px; }
}
@media (max-width:900px){
  .nav-sub-products,
  .nav-sub-solutions{ min-width:0; max-width:none; padding:8px 0; }
  .product-mini-grid{ gap:8px; }
  .product-mini-card{ width:96px; padding:6px; }
  .product-mini-card figure{ border-radius:8px; }
  .product-mini-card span{ font-size:12px; }
}
@media (max-width:900px){
  .nav-item{ display:block; }
  /* 移动端：顶部导航下拉面板（图片卡片 / 文字子项）一律收起、不参与布局。
     原写法只把 position 改成 static 进入文档流，却仍保留桌面端的
     visibility:hidden / opacity:0 —— 面板「隐形但占位」，把每个带下拉的
     菜单项后面撑出一大块空白，菜单项之间因此相距过远（西子 0917 反馈）。
     收起后子项仍可在各栏目页内访问。 */
  .nav-sub{
    position:static; transform:none; display:none; min-width:0;
    box-shadow:none; border:none; background:transparent;
    padding:2px 0 6px 6px; gap:0;
  }
  .nav-has-menu .caret{ display:none; }
  .nav-links > .nav-has-menu{ font-weight:800; color:var(--ink); }
  .nav-sub a{ font-size:15px; padding:7px 10px; }
  .nav-sub .sub-label{ padding:10px 10px 2px; font-size:11px; }
}

/* =========================================================
   v17 · CTA 区块加底色，提升可见度（西子截图反馈）
   增量段；删掉本段即整体回滚到 v16
   ========================================================= */

/* 1. 首页流程区下方按钮 */
/* 客户类型页跳转条胶囊样式 */
/* v206 · 礼品方案页「按客户类型找方案」导航栏 */
.client-type-bar{ margin:6px 0 4px; padding:16px 18px; background:#fff; border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm); }
.client-type-bar .ctb-label{ display:block; font-size:13px; font-weight:800; letter-spacing:1px; color:var(--accent); margin-bottom:12px; }
.client-type-bar .ctb-links{ display:flex; flex-wrap:wrap; gap:10px; }
.client-type-bar .ctb-link{ flex:1 1 180px; display:flex; flex-direction:column; gap:3px; padding:12px 16px; border:1px solid var(--line); border-radius:12px; background:var(--green-soft); text-decoration:none; color:var(--ink); transition:.18s; box-shadow:0 1px 2px rgba(26,26,46,.04); }
.client-type-bar .ctb-link:hover{ background:#fff; border-color:var(--green); transform:translateY(-2px); box-shadow:var(--shadow); }
.client-type-bar .ctb-link b{ font-size:15px; color:var(--ink); }
.client-type-bar .ctb-link span{ font-size:12px; color:var(--ink-2); }
@media (max-width:560px){ .client-type-bar .ctb-link{ flex:1 1 100%; } }
.client-types-nav .tag { display: inline-block; padding: 9px 18px; border-radius: 999px; background: var(--green-soft); color: var(--green); font-weight: 600; text-decoration: none; transition: .2s; }
.client-types-nav .tag:hover { background: var(--green); color: #141424; }

.process-cta {
  margin-top: 26px;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 18px 26px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
}
.process-cta .btn-primary {
  background: linear-gradient(135deg,#0B3A62,#195385); border-color: #0B3A62; color: #fff;
  box-shadow: 0 6px 16px rgba(26,26,46,.22);
}
.process-cta .btn-primary:hover { background: linear-gradient(135deg,#C9A96E,#A8874E); border-color: #A8874E; }

/* 2. 详情页右侧操作区 */
.pd-actions {
  display: flex; flex-wrap: wrap; gap: 12px;
  margin: 22px 0 14px;
  padding: 18px;
  background: linear-gradient(135deg, var(--accent-soft), var(--green-soft));
  border: 1px solid rgba(168,135,78,.16);
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(26,26,46,.05);
}
.pd-actions .btn-ghost {
  background: #fff;
  border-width: 2px;
  font-weight: 700;
}
.pd-actions .btn-ghost:hover { background: #fff7f4; }
.pd-note { font-size: 13px; color: var(--ink-2); opacity: .9; margin: 0; }

/* 3. 产品列表页左侧目录底部 CTA */
.catalog-nav .cn-cta {
  margin-top: 14px;
  padding: 14px;
  background: linear-gradient(135deg, var(--accent-soft), var(--green-soft));
  border-radius: 12px;
  border: 1px solid rgba(168,135,78,.16);
}
.catalog-nav .cn-cta .btn {
  width: 100%;
  box-shadow: 0 6px 18px rgba(168,135,78,.24);
}
@media (max-width: 880px){
  .catalog-nav .cn-cta { display: none; }
}

/* ============================================================
   v18 · 首页顶部轮播图
   依据：西子要求「参考其它官网，顶部加轮播图」；首页 hero
   由单张大图改为 3 张自动淡入淡出轮播，底部带指示点。
   ============================================================ */
.hero-carousel { position: relative; min-height: 84vh; overflow: hidden; }
.hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity .85s ease; z-index: 0; pointer-events: none; }
.hero-slide.active { opacity: 1; z-index: 1; pointer-events: auto; }
.hero-slide .hero-banner { position: absolute; inset: 0; min-height: 100%; }
.hero-dots { position: absolute; bottom: 34px; left: 50%; transform: translateX(-50%); z-index: 10; display: flex; gap: 12px; }
.hero-dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.38); border: none; cursor: pointer; transition: background .2s; }
.hero-dot.active { background: #fff; }
.hero-dot:hover { background: rgba(255,255,255,.7); }
@media (max-width: 900px) { .hero-carousel { min-height: 70vh; } }
@media (max-width: 560px) { .hero-carousel { min-height: 64vh; } .hero-dots { bottom: 22px; } }

/* --- 新闻资讯页 --- */
.page-hero { position: relative; min-height: 300px; display: flex; align-items: center; background-size: cover; background-position: center; }
.page-hero .hero-scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11,58,98,.88), rgba(11,58,98,.62)); }
.page-hero .hero-banner-inner { position: relative; z-index: 1; padding: 90px 0 70px; }
.page-hero .eyebrow { display: inline-block; font-size: 12px; font-weight: 700; color: #fff; letter-spacing: 2px; padding: 5px 12px; border: 1px solid rgba(255,255,255,.45); border-radius: 20px; margin-bottom: 14px; text-shadow: none; }
.page-hero h1 { color: #fff; font-size: 46px; font-weight: 800; margin-bottom: 12px; letter-spacing: 1px; text-shadow: 0 2px 12px rgba(0,0,0,.35); }
.page-hero .sub { font-size: 18px; opacity: 1; font-weight: 500; color: rgba(255,255,255,.92); text-shadow: 0 1px 8px rgba(0,0,0,.35); }

/* all-products.html 紧凑 hero：去掉 300px 占位、白底深色字 */
.page-hero-compact { min-height: auto; padding: 36px 0 28px; background: #fff; border-bottom: 1px solid var(--line); }
.page-hero-compact .eyebrow { color: var(--green); border-color: var(--green); margin-bottom: 10px; }
/* hero 内隐去左侧竖条。根因：.eyebrow:not(.light)::before（L998）是 position:absolute; left:13px，
   它是为 padding-left:30px（L993）配的；而 .page-hero .eyebrow（L2371）把 padding 收成 5px 12px，
   竖条就正压在文字左缘上 —— 客户反馈的「字显示不全重叠了」。
   hero 靠背景大图 + 大标题立主视觉，不需要这枚竖条。命中页：all-products / culture / news。 */
.page-hero .eyebrow::before,
.page-hero .eyebrow.eyebrow-lg::before,
.page-hero-compact .eyebrow::before { display: none; }
.page-hero-compact h1 { color: var(--ink); font-size: 40px; font-weight: 800; margin-bottom: 10px; text-shadow: none; }
.page-hero-compact p { color: var(--ink-2); font-size: 16px; margin: 0; }

.news-list { max-width: 920px; margin: 0 auto; padding: 56px 0 80px; }

/* 最新动态条 */
.news-ticker { background: #fff; border-bottom: 1px solid var(--line); padding: 14px 0; }
.news-ticker .container { display: flex; align-items: center; gap: 16px; overflow: hidden; }
.news-ticker .ticker-label { flex-shrink: 0; font-size: 12px; font-weight: 700; color: #fff; background: var(--brand-blue); padding: 5px 11px; border-radius: 20px; letter-spacing: .5px; }
.news-ticker .ticker-track { display: flex; gap: 22px; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
.news-ticker .ticker-track::-webkit-scrollbar { display: none; }
.news-ticker .ticker-track a { flex-shrink: 0; font-size: 14px; color: var(--ink-2); white-space: nowrap; text-decoration: none; }
.news-ticker .ticker-track a:hover { color: var(--brand-blue); }
@media (max-width: 700px) { .news-ticker .container { gap: 10px; } .news-ticker .ticker-track { gap: 16px; } .news-ticker .ticker-track a { font-size: 13px; } .page-hero h1 { font-size: 34px; } .page-hero .sub { font-size: 16px; } }
.news-card { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 26px 30px; margin-bottom: 20px; transition: box-shadow .2s, transform .2s; }
.news-card:hover { box-shadow: 0 8px 24px rgba(26,26,46,.08); transform: translateY(-2px); }
.news-meta { display: inline-block; font-size: 12px; font-weight: 600; color: var(--brand-blue); background: #eaf4fb; padding: 4px 10px; border-radius: 20px; margin-bottom: 8px; }
.news-title { font-size: 20px; font-weight: 700; color: var(--ink); margin-bottom: 10px; }
.news-title a { color: inherit; text-decoration: none; }
.news-title a:hover { color: var(--green); }
.news-excerpt { font-size: 15px; line-height: 1.75; color: var(--ink-2); margin-bottom: 14px; }
.news-more { font-size: 14px; font-weight: 600; color: var(--green); text-decoration: none; }
.news-more:hover { color: var(--accent); }
@media (max-width: 700px) { .news-card { padding: 20px 22px; } .news-title { font-size: 18px; } .page-hero h1 { font-size: 30px; } }

/* =========================================================
   v18 · 文章详情页样式
   ========================================================= */
.article-page { max-width: 860px; }
.article-body { font-size: 16.5px; line-height: 1.85; color: var(--ink-2); }
.article-body h2 {
  font-size: 22px; font-weight: 700; color: var(--ink);
  margin: 34px 0 14px; padding-bottom: 10px;
  border-bottom: 2px solid var(--line);
}
.article-body p { margin-bottom: 18px; }
.article-body ul { margin: 0 0 20px 22px; }
.article-body li { margin-bottom: 10px; }
.article-body strong { color: var(--ink); font-weight: 700; }
@media (max-width: 700px) {
  .article-body { font-size: 15.5px; }
  .article-body h2 { font-size: 20px; }
}

/* =========================================================
   应用场景分区
   ========================================================= */
.use-case { padding: 38px 0 46px; border-bottom: 1px dashed var(--line); }
.use-case:last-child { border-bottom: none; }
.use-case-head { margin-bottom: 22px; }
.use-case-head h3 {
  font-size: 20px; font-weight: 700; color: var(--ink);
  display: inline-flex; align-items: center; gap: 10px;
  margin-bottom: 8px;
}
.use-case-head h3::before {
  content: ""; width: 6px; height: 22px; border-radius: 3px;
  background: var(--green);
}
.use-case-head p { font-size: 15px; color: var(--ink-2); line-height: 1.7; margin: 0; }
.use-case-head p.uc-clients {
  margin-top: 8px; font-size: 13.5px; color: var(--brand-blue);
  background: #F2F7FC; border-left: 3px solid var(--brand-blue);
  padding: 7px 12px; border-radius: 0 6px 6px 0; display: inline-block;
}
.use-case .gallery { margin-top: 0; }
@media (max-width: 700px) {
  .use-case { padding: 28px 0 34px; }
  .use-case-head h3 { font-size: 18px; }
}

/* 应用场景横幅 */
.use-case-hero {
  margin: 0 0 24px;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  background: var(--bg-soft);
}
.use-case-hero img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform .4s ease;
}
.use-case-hero:hover img {
  transform: scale(1.02);
}
@media (max-width: 700px) {
  .use-case-hero { margin: 0 0 18px; border-radius: 12px; }
}

/* ============================================================
   v12 · 紧凑小图卡片陈列（1688 / 淘宝式一排展示）
   作用范围：products.html 工艺系列画廊 + use-cases.html 场景画廊
   用法：把外层 .gallery 改为 .gallery.gallery-compact
   特点：小图、无 CTA、图下文字、6 列一排、移动端自动收敛
   ============================================================ */

.gallery-compact {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  align-items: start;
}

.gallery-compact .gallery-item {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  transition: transform .2s ease, box-shadow .2s ease;
}

.gallery-compact .gallery-item:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}

.gallery-compact .gallery-item figure {
  position: relative;
  margin: 0;
  width: 100%;
  background: var(--bg-soft);
  display: block;          /* 9-10 v85：原本 flex 让 img+figcaption 横排挤压，改回 block */
  /* aspect-ratio 不能放 figure 上！否则会锁定 figure 高度，figcaption 被 overflow:hidden 裁掉。移到 img 上。 */
}

.gallery-compact .gallery-item img {
  width: 100%;
  aspect-ratio: 4 / 3;     /* 9-10 v87：从 figure 移到 img，保持图 4:3 比例，figcaption 不再被裁 */
  object-fit: contain;
  display: block;
  padding: 12px;
  box-sizing: border-box;
  background: var(--bg-soft);
}

.gallery-compact .gallery-item figcaption {
  padding: 12px 12px 6px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-2);
  text-align: center;
  line-height: 1.35;
  min-height: 2.7em;       /* 9-10 v86：兜底占位 */
  display: block;
  word-break: break-word;
  overflow: visible;
  flex-shrink: 0;           /* 9-10 v86：关键修复！父级 flex 列默认 flex-shrink:1 会把 figcaption 压到 0 高度 */
}

/* 紧凑卡片显示 CTA 行 */
.gallery-compact .pcard-cta-row {
  display: flex;
  gap: 10px;
  padding: 0 12px 12px;
  margin-top: auto;
}
.gallery-compact .pcard-cta-row .pcard-cta {
  flex: 1;
  padding: 9px 6px;
  font-size: 13px;
  text-align: center;
  border-radius: 8px;
}

/* ============================================================
   角色 / 款式竖版图鉴：3 列，竖图完整展示不裁切（IP 公仔多角色用）
   ============================================================ */
.gallery-char {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 780px;
  margin: 0 auto;
}
.gallery-char figure {
  margin: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.gallery-char img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: contain;
  display: block;
  padding: 10px;
  box-sizing: border-box;
  background: var(--bg-soft);
}
.gallery-char figcaption {
  padding: 10px 12px 14px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-2);
  text-align: center;
  line-height: 1.35;
}
/* 详情页图鉴区块：用 div 而非 section，避免打乱 section:nth-of-type 的奇偶留白/对齐节奏 */
.pd-gallery { padding: 76px 0; }
@media (max-width: 900px) { .pd-gallery { padding: 50px 0; } }
@media (max-width: 640px) {
  .gallery-char { grid-template-columns: 1fr 1fr; gap: 12px; }
  .gallery-char img { padding: 6px; }
}

/* ============================================================
   IP 公仔页专用：横版合影 / 多角度分组图鉴 / 官方账号引导
   （与前一条同理，用 div 而非 section，不打乱 section 奇偶节奏）
   ============================================================ */
.pd-widefig figure {
  margin: 0 auto;
  max-width: 1040px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.pd-widefig img { display: block; width: 100%; height: auto; }
.pd-widefig figcaption {
  padding: 14px 20px 16px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-2);
  text-align: center;
  line-height: 1.5;
}
.pd-widefig .pd-widefig-note {
  max-width: 1040px;
  margin: 20px auto 0;
  text-align: center;
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.75;
}
.pd-widefig .pd-widefig-note b { color: var(--ink); }

/* 多角度分组图鉴（啵豚等带正/侧/背/特写的 IP） */
.gal-group + .gal-group { margin-top: 40px; }
.gal-group-t {
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 14px;
  padding-left: 10px;
  border-left: 3px solid var(--brand-blue);
  line-height: 1.3;
}
.gallery-multi {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.gallery-multi figure {
  margin: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.gallery-multi img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: contain;
  display: block;
  padding: 8px;
  box-sizing: border-box;
  background: var(--bg-soft);
}
.gallery-multi figcaption {
  padding: 8px 10px 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-2);
  text-align: center;
  line-height: 1.35;
}
@media (max-width: 900px) {
  .gallery-multi { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}

/* 官方账号引导（浅色底下的二维码卡，覆盖 footer 深色版样式） */
.pd-accounts .qr-grid {
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  max-width: 680px;
  margin: 0 auto;
}
.pd-accounts .qr-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px 12px 10px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .2s ease;
}
.pd-accounts .qr-card img {
  max-width: none;
  width: 100%;
  padding: 0;
  box-shadow: none;
  background: transparent;
}
.pd-accounts .qr-card .qr-label {
  color: var(--ink-2);
  font-size: 14px;
  margin-top: 9px;
}
.pd-accounts .qr-card:hover { box-shadow: 0 8px 22px rgba(0,0,0,.10); }
.pd-accounts .qr-card:hover img { box-shadow: none; }
@media (max-width: 640px) {
  .pd-accounts .qr-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
}

/* ============================================================
   礼品方案页专用：卡片 4:3 图 + 标题 + 按钮，一行 3 个，信息不被遮挡
   ============================================================ */
.gallery-usecase {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.gallery-usecase .gallery-item {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  transition: transform .2s ease, box-shadow .2s ease;
}
.gallery-usecase .gallery-item:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}
.gallery-usecase .gallery-item figure {
  position: relative;
  margin: 0;
  width: 100%;
  background: var(--bg-soft);
  display: block;
  overflow: hidden;
}
.gallery-usecase .gallery-item img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  padding: 12px;
  box-sizing: border-box;
  display: block;
}
.gallery-usecase .gallery-item figcaption {
  padding: 12px 12px 6px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-2);
  text-align: center;
  line-height: 1.35;
  min-height: 2.7em;       /* 保留 2 行高度占位，避免被父级 flex 压扁 */
  display: block;
  word-break: break-word;
  overflow: visible;
  flex-shrink: 0;           /* 9-10 v86：与 gallery-compact 同步加，防父级 flex 列压缩 */
}
.gallery-usecase .pcard-cta-row {
  display: flex;
  gap: 10px;
  padding: 0 12px 12px;
  margin-top: auto;
}
.gallery-usecase .pcard-cta-row .pcard-cta {
  flex: 1;
  padding: 9px 6px;
  font-size: 13px;
  text-align: center;
  border-radius: 8px;
}

@media (max-width: 900px) {
  .gallery-usecase { grid-template-columns: repeat(2, 1fr); gap: 18px; }
}

@media (max-width: 480px) {
  .gallery-usecase { grid-template-columns: repeat(1, 1fr); gap: 16px; }
}
.gallery-compact .pcard-cta.ghost {
  background: #fff;
  color: var(--green, #2e8b57);
  border: 1.5px solid var(--green, #2e8b57);
}
.gallery-compact .pcard-cta.solid {
  background: var(--green, #2e8b57);
  color: #fff;
  border: 1.5px solid var(--green, #2e8b57);
}
.gallery-compact .pcard-cta-row .pcard-cta:only-child {
  flex: 1;
}

/* 场景页的小标签保留，放在图左上角 */
.gallery-compact .pcard-tag {
  position: absolute;
  left: 6px;
  top: 6px;
  bottom: auto;
  font-size: 11px;
  padding: 3px 8px;
  background: rgba(38,42,47,.78);
  color: #fff;
  border-radius: 999px;
  font-weight: 600;
  backdrop-filter: blur(4px);
  z-index: 2;
  white-space: nowrap;
  max-width: calc(100% - 12px);
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 响应式收敛 */
@media (max-width: 1100px) {
  .gallery-compact { grid-template-columns: repeat(3, 1fr); gap: 18px; }
}

@media (max-width: 900px) {
  .gallery-compact { grid-template-columns: repeat(3, 1fr); gap: 16px; }
}

@media (max-width: 720px) {
  .gallery-compact { grid-template-columns: repeat(2, 1fr); gap: 14px; }
}

@media (max-width: 480px) {
  .gallery-compact { grid-template-columns: repeat(1, 1fr); gap: 14px; }
}

/* ===== 新闻资讯 v97：头条大卡 + 分类筛选 + 图文卡片 ===== */
.news-wrap { max-width: 1180px; margin: 0 auto; padding: 0 20px 80px; }

.news-filter { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 38px 0 28px; }
.news-chip {
  border: 1px solid var(--line); background: #fff; color: var(--ink-2);
  border-radius: 999px; padding: 9px 20px; font-size: 14px; font-weight: 600;
  cursor: pointer; font-family: var(--font); transition: all .18s ease;
}
.news-chip:hover { border-color: var(--green); color: var(--green-dark); background: var(--green-soft); }
.news-chip.on { background: var(--green-deep); border-color: var(--green-deep); color: #fff; }
.news-chip.on:hover { background: var(--green-deep); color: #fff; }

/* 头条 */
.news-lead {
  display: grid; grid-template-columns: 1.05fr 1fr; border-radius: 20px; overflow: hidden;
  background: var(--green-deep); color: #fff; box-shadow: var(--shadow-lg); margin-bottom: 30px;
}
.news-lead-body { padding: 46px 48px; display: flex; flex-direction: column; justify-content: center; }
.news-lead .kicker {
  display: inline-flex; align-items: center; gap: 9px; align-self: flex-start;
  font-size: 12px; letter-spacing: 2px; font-weight: 700; color: var(--green);
  text-transform: uppercase; margin-bottom: 16px;
}
.news-lead .kicker::before { content: ""; width: 26px; height: 2px; background: var(--green); }
.news-lead h2 { font-size: 30px; line-height: 1.4; font-weight: 800; margin-bottom: 16px; }
.news-lead h2 a { color: #fff; }
.news-lead h2 a:hover { color: var(--green); }
.news-lead p { color: rgba(255,255,255,.76); font-size: 15.5px; line-height: 1.85; margin-bottom: 26px; }
.news-lead .btn-gold {
  align-self: flex-start; background: var(--green); color: var(--green-deep);
  font-weight: 700; font-size: 14.5px; border-radius: 999px; padding: 12px 28px;
}
.news-lead .btn-gold:hover { background: #fff; color: var(--green-deep); }
.news-lead-figure { position: relative; min-height: 330px; }
.news-lead-figure img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.news-lead-tag {
  position: absolute; left: 22px; top: 22px; z-index: 2;
  background: rgba(11,58,98,.72); color: var(--green); border: 1px solid var(--green);
  border-radius: 999px; padding: 6px 15px; font-size: 12px; font-weight: 700;
  backdrop-filter: blur(4px);
}

/* 卡片网格 */
.news-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; }
.nw-card {
  background: #fff; border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
  display: flex; flex-direction: column; transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.nw-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: #ddd5c6; }
.nw-thumb { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--green-tint); }
.nw-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s ease; }
.nw-card:hover .nw-thumb img { transform: scale(1.06); }
.nw-tag {
  position: absolute; left: 14px; top: 14px; z-index: 2;
  border-radius: 999px; padding: 6px 14px; font-size: 12px; font-weight: 700;
  line-height: 1.4; backdrop-filter: blur(4px);
}
.t-gold { background: #F7F3EA; color: #A8874E; border: 1px solid #E4D6B4; }
.t-ink { background: var(--green-deep); color: #F7F3EA; }
.t-bronze { background: #F7F0E2; color: #8A6C34; border: 1px solid #E6D5B4; }
.t-slate { background: #EEF1F3; color: #4B5962; border: 1px solid #DCE2E6; }
.t-taupe { background: #F1EDE6; color: #6E6152; border: 1px solid #E2DBCE; }
.nw-body { padding: 22px 24px 24px; display: flex; flex-direction: column; flex: 1; }
.nw-title { font-size: 18px; font-weight: 700; line-height: 1.55; margin-bottom: 10px; }
.nw-title a { color: var(--ink); }
.nw-title a:hover { color: var(--green-dark); }
.nw-excerpt { font-size: 14.5px; color: var(--ink-2); line-height: 1.85; flex: 1; margin-bottom: 18px; }
.nw-more {
  font-size: 14px; font-weight: 700; color: var(--green-dark);
  display: inline-flex; align-items: center; gap: 7px;
}
.nw-more .arw { transition: transform .2s ease; }
.nw-card:hover .nw-more .arw { transform: translateX(5px); }

/* 底部 CTA（padding 用 !important 压过全局 section:nth-of-type(odd) 规则） */
.news-cta {
  margin-top: 46px; border-radius: 18px; padding: 36px 44px !important; color: #fff;
  background: linear-gradient(120deg, #0B3A62 0%, #195385 100%);
  display: flex; flex-wrap: wrap; gap: 22px; align-items: center; justify-content: space-between;
}
.news-cta h3 { font-size: 21px; font-weight: 800; margin-bottom: 8px; }
.news-cta p { font-size: 14.5px; color: rgba(255,255,255,.74); line-height: 1.8; }
.nc-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.nc-btn {
  border-radius: 999px; padding: 12px 26px; font-size: 14.5px; font-weight: 700;
  border: 1px solid rgba(255,255,255,.28); color: #fff;
}
.nc-btn:hover { border-color: var(--green); color: var(--green); }
.nc-btn.primary { background: var(--green); border-color: var(--green); color: var(--green-deep); }
.nc-btn.primary:hover { background: #fff; border-color: #fff; color: var(--green-deep); }

@media (max-width: 900px) {
  .news-lead { grid-template-columns: 1fr; }
  .news-lead-body { padding: 32px 26px; order: 2; }
  .news-lead-figure { min-height: 220px; order: 1; }
  .news-lead-figure img { position: static; height: 220px; }
  .news-lead h2 { font-size: 24px; }
  .news-grid { grid-template-columns: 1fr; gap: 20px; }
  .news-cta { padding: 28px 24px !important; }
}

/* ===== 新闻详情 v98：图文正文组件 ===== */
.art-hero { position: relative; border-radius: 18px; overflow: hidden; margin-bottom: 32px; background: var(--green-tint); }
.art-hero img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.art-hero .scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(11,58,98,.12) 0%, rgba(11,58,98,.66) 100%); }
.art-hero-inner { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 26px 30px; color: #fff; }
.art-hero-inner h1 { font-size: 27px; font-weight: 800; line-height: 1.4; text-shadow: 0 2px 10px rgba(0,0,0,.35); }
.art-hero { aspect-ratio: 21 / 8; }

.art-body { max-width: 860px; margin: 0 auto; }
.art-body > p { font-size: 16.5px; line-height: 2.05; color: var(--ink-2); margin: 0 0 24px; letter-spacing: .2px; }
.art-body h2 { font-size: 24px; font-weight: 800; color: var(--ink); margin: 52px 0 24px; padding-left: 18px; position: relative; letter-spacing: .3px; }
.art-body h2::before { content: ""; position: absolute; left: 0; top: 7px; bottom: 7px; width: 5px; border-radius: 3px; background: var(--green); }

.cust-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin: 10px 0 16px; }
.cust-card { background: var(--green-tint); border: 1px solid var(--line); border-radius: 14px; padding: 24px 26px; }
.cust-card h3 { font-size: 17px; font-weight: 700; color: var(--green-dark); margin-bottom: 10px; line-height: 1.5; }
.cust-card p { font-size: 14.5px; color: var(--ink-2); line-height: 1.95; margin: 0; }

.num-list { display: flex; flex-direction: column; gap: 18px; margin: 10px 0 16px; }
.num-item { display: grid; grid-template-columns: 64px 1fr; gap: 22px; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 26px 28px; align-items: start; }
.num-item .no { font-size: 32px; font-weight: 800; color: var(--green); line-height: 1.1; }
.num-item h3 { font-size: 17px; font-weight: 700; margin-bottom: 8px; color: var(--ink); }
.num-item p { font-size: 14.5px; color: var(--ink-2); line-height: 1.95; margin: 0; }

.note-box { background: var(--green-soft); border: 1px solid #E7DCC2; border-left: 5px solid var(--green); border-radius: 12px; padding: 24px 28px; margin: 12px 0 20px; }
.note-box h3 { font-size: 17px; font-weight: 700; color: var(--green-dark); margin-bottom: 10px; }
.note-box p, .note-box li { font-size: 15px; color: var(--ink-2); line-height: 2.0; margin: 0 0 8px; }
.note-box p:not(:last-child) { border-bottom: 1px dashed #E2D6BC; padding-bottom: 8px; }
.note-box p:last-child { margin-bottom: 0; }

.check-list { list-style: none; margin: 10px 0 18px; display: flex; flex-direction: column; gap: 14px; padding: 0; }
.check-list li { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 14px 18px 14px 48px; position: relative; font-size: 15px; color: var(--ink-2); line-height: 1.95; }
.check-list li::before { content: "✓"; position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 21px; height: 21px; border-radius: 50%; background: var(--green); color: #fff; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; }

.img-band { border-radius: 14px; overflow: hidden; margin: 16px 0 26px; }
.img-band img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; }
.img-band figcaption { font-size: 13px; color: var(--muted); padding: 10px 4px 2px; text-align: center; }

.step-list { display: flex; flex-direction: column; margin: 6px 0 12px; }
.step-item { position: relative; padding: 0 0 28px 58px; }
.step-item::before { content: ""; position: absolute; left: 18px; top: 38px; bottom: 0; width: 2px; background: var(--line); }
.step-item:last-child { padding-bottom: 6px; }
.step-item:last-child::before { display: none; }
.step-item .dot { position: absolute; left: 0; top: 0; width: 38px; height: 38px; border-radius: 50%; background: var(--green-deep); color: var(--green); font-weight: 700; font-size: 14px; display: flex; align-items: center; justify-content: center; }
.step-item h3 { font-size: 16.5px; font-weight: 700; margin-bottom: 6px; color: var(--ink); }
.step-item p { font-size: 14.5px; color: var(--ink-2); line-height: 1.85; margin: 0; }

.craft-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin: 6px 0 12px; }
.craft-card { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: #fff; transition: transform .2s ease, box-shadow .2s ease; }
.craft-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.craft-card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.craft-card .cc-body { padding: 16px 18px 18px; }
.craft-card h3 { font-size: 16px; font-weight: 700; margin-bottom: 6px; color: var(--ink); }
.craft-card p { font-size: 14px; color: var(--ink-2); line-height: 1.8; margin: 0; }

.art-foot { max-width: 880px; margin: 34px auto 0; }
@media (max-width: 700px) {
  .art-hero { aspect-ratio: auto; }
  .art-hero img { position: static; height: 190px; }
  .art-hero-inner h1 { font-size: 21px; }
  .cust-grid, .craft-grid { grid-template-columns: 1fr; }
  .num-item { grid-template-columns: 44px 1fr; gap: 12px; padding: 18px 16px; }
  .num-item .no { font-size: 24px; }
  .step-item { padding-left: 50px; }
}

/* v99 修复：首页轮播标签缺 padding（.hero .tag 规则覆盖不到轮播结构） */
.hero-carousel .tag { padding: 5px 12px; border-radius: 999px; }

/* --- v110 · 注塑栏按材质分组小标题 ---
   注塑是成型方式，栏内按 ABS / PP / TPU 三种材质分组展示 */
.mat-group-title {
  margin: 36px 0 14px;
  padding-left: 12px;
  border-left: 4px solid var(--green-dark);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .3px;
  color: var(--ink);
}
.mat-group-title span {
  display: block;
  margin-top: 4px;
  font-size: 14px;
  font-weight: 400;
  color: var(--muted);
}
@media (max-width: 720px) {
  .mat-group-title { margin: 28px 0 12px; font-size: 17px; }
}

/* ===== 同款多材质卡片：带图 =====
   独立网格类：不受 .grid-2 > .card:last-child:nth-child(odd) 的"末卡横跨两列"影响，
   避免单卡时被撑成全宽、1:1 图放大到 1200px。 */
.grid-material {
  display: grid;
  gap: 22px;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  align-items: start;
}
.card-material { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.card-material-link { display: block; }
.card-material-img {
  margin: 0;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--bg-soft);
}
.card-material-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .25s ease;
}
.card-material-link:hover .card-material-img img,
.card-material-link:focus .card-material-img img { transform: scale(1.04); }
.card-material-body { padding: 24px; flex: 1; display: flex; flex-direction: column; }
.card-material-body .btn { margin-top: auto; align-self: flex-start; }

/* 单成员品类（如手机保护套 / 收纳容器）：横幅式卡片，图左文右铺满，避免右侧留大片空白 */
.grid-material.single { display: block; max-width: 1080px; }
.grid-material.single .card-material { flex-direction: row; }
.grid-material.single .card-material-link { flex: 0 0 300px; }
.grid-material.single .card-material-img { aspect-ratio: 1 / 1; }
@media (max-width: 720px) {
  .grid-material.single .card-material { flex-direction: column; }
  .grid-material.single .card-material-link { flex: none; }
}
@media (max-width: 720px) {
  .card-material-body { padding: 18px; }
  .card-material-img { aspect-ratio: 4 / 3; }
}

/* =========================================================
   v140 · 页脚重排 + 互补色统一 + 装饰可见度
   增量升级段；删掉本段即整体回滚到 v139 视觉
   ========================================================= */

/* --- 1. 页脚：深蓝底（金 ↔ 深蓝互补）+ 金强调，收掉原先与正文脱节的孤立蓝 --- */
.footer { background: var(--green-deep); padding: 0 0 24px; }
.footer-topbar { border-bottom: 1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.035); margin-bottom: 46px; }
.ftb-in { display: flex; align-items: center; gap: 22px; padding: 17px 0; flex-wrap: wrap; }
.ftb-label { font-size: 13px; letter-spacing: 2px; color: rgba(255,255,255,.50); }
.ftb-tel { display: flex; align-items: baseline; gap: 9px; }
.ftb-tel .ftb-role { font-size: 13px; color: rgba(255,255,255,.62); }
.ftb-tel b { font-size: 21px; font-weight: 800; color: var(--green); letter-spacing: .5px; }
.ftb-tel:hover b { color: #fff; }
.ftb-sep { width: 1px; height: 20px; background: rgba(255,255,255,.14); }
.ftb-btn { margin-left: auto; padding: 10px 26px; border-radius: 999px; background: linear-gradient(135deg,#0B3A62,#195385); color: #fff; font-size: 14px; font-weight: 700; box-shadow: 0 6px 16px rgba(26,26,46,.22); transition: .2s; }
.ftb-btn:hover { background: linear-gradient(135deg,#C9A96E,#A8874E); color: #fff; transform: translateY(-1px); }
.footer-main { display: grid; grid-template-columns: 288px 1fr 296px; gap: 46px; margin-bottom: 44px; }
.footer-qr h4 { color: #fff; font-size: 15px; font-weight: 700; margin: 0 0 14px; padding-left: 10px; border-left: 3px solid var(--green); }
.footer-qr .qr-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.footer-links { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.footer-col h4 { border-left-color: var(--green); }
.footer-col li a:hover { color: var(--green); }
.footer-hotline .contact-row .tel { color: var(--green); }
.btn-online { background: linear-gradient(135deg,#0B3A62,#195385); }
.btn-online:hover { background: linear-gradient(135deg,#C9A96E,#A8874E); color: #fff; }
@media (max-width: 1180px) {
  .footer-main { grid-template-columns: 1fr 296px; gap: 34px; }
}
@media (max-width: 900px) {
  .footer-main { grid-template-columns: 1fr; gap: 34px; }
  .footer-links { grid-template-columns: repeat(2, 1fr); }
  .footer-qr .qr-grid { grid-template-columns: repeat(2, 1fr); max-width: 320px; }
}
@media (max-width: 560px) {
  .ftb-btn { margin-left: 0; }
  .ftb-tel b { font-size: 18px; }
}

/* --- 2. 装饰可见度：章节号水印原 7% 近乎隐形；且装饰色此前硬编码旧香槟金，未跟 v14 新主色 --- */
.section-head::before { color: rgba(219,165,60,.13); }
.section-head h2::after { background: linear-gradient(90deg, var(--green), rgba(219,165,60,.16)); }
.section-head h2::before { background: linear-gradient(90deg, transparent, rgba(219,165,60,.16) 30%, rgba(219,165,60,.16) 70%, transparent); }

/* --- 3. 原创 IP 系列互引卡（两个自研 IP 互相展示引用）--- */
.pd-sibling { padding-top: 76px; }
.pd-sibling-card {
  display: grid; grid-template-columns: 380px 1fr;
  max-width: 1040px; margin: 0 auto;
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-sm); overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform .22s ease, box-shadow .22s ease;
}
.pd-sibling-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.pd-sibling-card > img { width: 100%; height: 100%; min-height: 250px; object-fit: cover; display: block; }
.pd-sibling-body { padding: 30px 36px; display: flex; flex-direction: column; justify-content: center; gap: 10px; }
.pd-sibling-tag { font-size: 12px; font-weight: 700; letter-spacing: 1px; color: var(--accent); }
.pd-sibling-body h3 { font-size: 21px; margin: 0; color: var(--ink); }
.pd-sibling-body p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.8; }
.pd-sibling-body .btn { align-self: flex-start; margin-top: 8px; }
@media (max-width: 780px) {
  .pd-sibling-card { grid-template-columns: 1fr; }
  .pd-sibling-card > img { min-height: 0; aspect-ratio: 16 / 10; }
  .pd-sibling-body { padding: 22px 20px; }
}

/* ============================================================
   v142 · 原创 IP 系列（独立分组：不齐喵团 / 啵豚）
   用 <div class="ip-band"> 而不是 <section>：
   站点全局有 section:not(...):nth-of-type(odd/even) 的交替留白 + 标题左/居中对齐规则，
   插入一个 <section> 会让其后所有区块的奇偶翻转，既有区块留白与对齐集体错位。
   用 div 对新分组对 nth-of-type 隐形，既有区块一个都不动。
   ============================================================ */
.ip-band { padding: 76px 0; scroll-margin-top: 150px; }
/* 两套 IP 各一张大卡：4 列网格在 2 张卡时右半边空掉，这里改成 2 列 */
.ip-band .gallery-compact { grid-template-columns: repeat(2, 1fr); gap: 20px; }
/* 两张源图比例不同（不齐喵团 1:1、啵豚 4:3），contain 会让左图缩成一小块、两卡图幅不齐。
   改 cover 统一填满 4:3 卡槽：啵豚（4:3）零裁切；不齐喵团（1:1）只裁上下各 12.5%，
   该范围是影棚背景，角色（约 y 25%~83%）完整保留。
   ⚠️ 必须同时写 height:auto —— ①基础规则 .gallery-item img 写死了 height:240px；
   ②.grid 上带 .gallery 类又命中 .gallery .gallery-item:nth-child(3n+2) img{height:300px}。
   两条都把 aspect-ratio 顶掉，导致两张卡一个 240 一个 300、第二张被裁。
   本选择器与后者同为 (0,3,1)，靠「文件更靠后」取胜，所以这段必须留在 style.css 末尾。 */
.ip-band .gallery-compact .gallery-item img { height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.ip-band .section-head { text-align: center; margin-left: auto; margin-right: auto; }
@media (max-width: 720px) {
  .ip-band { padding: 50px 0; }
  .ip-band .gallery-compact { grid-template-columns: 1fr; gap: 16px; }
}

/* ============================================================
   v145 · 版式修复（西子 2026-09-12 截图反馈）
   ============================================================ */

/* --- 1. 首页「工厂实力」：数字格在 1200/1280 宽度下文字溢出格子 ---
   根因：.factory-stats 是 repeat(auto-fit, minmax(160px,1fr))，在 3 列区间
   每格仅 166~181px，而 `.factory-stats strong` 被 (行1419) 放大到 34px，
   「10+10+30」8 个字符（数字+加号）在 34px 下约 170px，`+` 不是换行点
   所以不折行，直接溢出格子（实测 1200/1280px 命中 scrollWidth>clientWidth）。
   修法：只把第 4 格数字降到 23px（1440 格宽 211、1280 格宽 181、1200 格宽 167，
   「10+10+30」在 23px 下约 115px，小于最窄格可用宽 130px）。
   实测 414/640/768/820/900/992/1024/1084/1200/1280/1440 全部无溢出，
   且列数节奏与卡片高度保持原样（不动网格，避免卡片被撑高）。*/
.factory-stats > div:nth-child(4) strong { font-size: 23px; letter-spacing: 0; }

/* --- 2. 「车间实拍」标签被拉成整栏宽 ---
   .factory-trust-body 是 flex 纵向容器，.eyebrow 默认 inline-block 会被
   flex 拉伸成 stretch；改为 inline-flex + fit-content，让它贴着文字。*/
.factory-trust-body .eyebrow { display: inline-flex; align-items: center; width: fit-content; }

/* --- 3. 页脚热线行与 CTA 横条「撞脸」---
   CTA 横条（.cta-band）与页脚顶部热线行都是「深蓝通栏 + 左文 + 右胶囊按钮」，
   在页尾相距约 600px 处连出两次，观感重复。
   这里把页脚热线行降级为「页脚内的信息行」：去掉通栏底色（只留一条细分隔线）、
   按钮由实心红改描边金 —— 不再像第二条 CTA 横条，号码仍是第一落点。*/
.footer-topbar { background: none; margin-bottom: 40px; }
.ftb-btn {
  background: transparent; border: 1px solid var(--green); color: var(--green);
  box-shadow: none;
}
.ftb-btn:hover { background: var(--green); border-color: var(--green); color: var(--green-deep); box-shadow: 0 6px 18px rgba(201,169,110,.24); }

/* --- 7. 页脚热线行右侧按钮与 .cta-band 重复（2026-09-16 西子截图 · 全站）---
   现象：每页页脚热线行右侧挂一个金边「在线咨询」，与上方统一 CTA 横条的
   「发图询价」目标完全相同（都跳 contact.html），在 100+ 个页面重复出现。
   修法：隐藏该按钮（功能已被上方 CTA 覆盖，无信息损失）；热线改整行居中，
   两端各加一小段金线收边，把它彻底降为「页脚信息行」而非第二条 CTA。
   删掉本段即整体回滚。*/
.ftb-btn { display: none; }
.ftb-in { justify-content: center; gap: 26px; padding: 20px 0; }
.ftb-in::before, .ftb-in::after { content: ""; width: 32px; height: 1px; background: rgba(201,169,110,.45); }
.ftb-label { font-size: 13px; letter-spacing: 3px; color: rgba(255,255,255,.56); }
.ftb-tel b { font-size: 22px; }
.ftb-sep { height: 22px; background: rgba(255,255,255,.16); }
@media (max-width: 560px) {
  .ftb-in { gap: 16px; }
  .ftb-in::before, .ftb-in::after { display: none; }
}

/* --- 4. 页尾「第二条 CTA」重复（2026-09-12 西子截图 · S 级）---
   现象：页尾先出现「深蓝 CTA 卡 + 金色实心『在线咨询』」，紧接 60px 又是
   「深蓝页脚 + 金边『在线咨询』」。两块同为深色、同左文右按钮、按钮同名，
   在页尾连出现两次 —— 上轮只降级了页脚底色，没断开两块，所以仍有重复感。
   修法：把 .news-cta 降为「浅色提示卡」（与 .note-box 同一套语言：米底 +
   左侧金色粗边 + 深字），页尾就只剩页脚一处深色行动区；同时把与页脚的
   间距由 60px 拉到 76px，视觉上彻底断开。CTA 功能与按钮全部保留。*/
.news-cta {
  background: var(--green-soft);
  border: 1px solid #E7DCC2;
  border-left: 5px solid var(--green);
  color: var(--ink);
  margin-bottom: 76px;
}
/* .news-cta 是 <section>，会命中全站的区块装饰：
   ::before = 顶部斜切彩条（金/蓝/琥珀/紫）、::after = 角落同心圆环。
   深色底时被吃掉看不见，换成浅色卡后两者都显形（截图上那条彩线就是 ::before）。
   这里屏蔽，避免浅卡上出现游离装饰。 */
.news-cta::before, .news-cta::after { display: none !important; }
.news-cta h3 { color: var(--ink); }
.news-cta p { color: var(--ink-2); }
.nc-btn { border-color: var(--green); color: var(--green-dark); }
.nc-btn:hover { border-color: var(--green-dark); color: var(--green-deep); }
.nc-btn.primary { background: var(--green); border-color: var(--green); color: var(--green-deep); }
.nc-btn.primary:hover { background: var(--green-dark); border-color: var(--green-dark); color: #fff; }

/* --- 5. 页脚热线行按钮的 color 被 .footer a（特异性 0,1,1）压掉 ---
   结果描边按钮是「金边 + 白字」，与设计意图（金边金字）不符。
   提高特异性到 (0,2,0) 修回。*/
.footer .ftb-btn { color: var(--green); }
.footer .ftb-btn:hover { color: var(--green-deep); }

/* --- 6. 详情页 CTA 与页脚的间距比列表页窄 62px ---
   列表页父容器 .news-wrap 有 padding-bottom:80px，详情页的 main.article-page 是 0，
   所以同样的 .news-cta 在详情页里贴着页脚（实测 76px vs 列表页 138px）。
   补 62px 让两者对齐。注意必须用 padding 而非 margin，否则会被 margin
   collapse 提到 main 外面、间距不生效。*/
.article-page { padding-bottom: 62px; }

/* =========================================================
   v150 · 2026-09-12  新闻线：正文容器启用 + 日期显示
   ---------------------------------------------------------
   1) .art-body —— v98 就写好的「详情页正文容器」，此前从未被任何页面
      引用过，导致详情页的 <h2>/<p> 全走浏览器默认（margin:0），
      段落与标题黏成一坨。本次 7 篇详情页统一套用。
   2) .art-meta —— 详情页标题下的「日期 · 分类」行。
   3) .nw-date —— 列表页卡片日期。
   ========================================================= */
.art-body > p.art-meta {
  font-size: 13.5px; line-height: 1.6; letter-spacing: .4px;
  color: var(--muted); margin: 0 0 22px;
}
.nw-date {
  display: block; font-size: 12.5px; letter-spacing: .4px;
  color: var(--muted); margin-bottom: 8px;
}

/* =========================================================
   v153 · 产品探索矩阵（首页 · 替代原 craft-grid + gallery + hot-grid 三区）
   设计：4 系列大卡（2×2），每系列卡内挂 3 个代表产品缩略图（可点详情）。
   解决「已落地样图」与「客户问得最多的六款」内容完全重叠的问题。
   ========================================================= */
.product-matrix { padding: 76px 0; }
.pm-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.pm-card {
  position: relative; display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--line); border-radius: 18px;
  overflow: hidden; box-shadow: var(--shadow-sm);
  border-left: 6px solid var(--green);
  transition: transform .25s ease, box-shadow .25s ease;
}
.pm-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.pm-pvc { border-left-color: #3b82f6; }
.pm-vinyl { border-left-color: #f59e0b; }
.pm-abs { border-left-color: #8b5cf6; }
.pm-head { padding: 22px 26px 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.pm-k { display: none; }
.pm-head h3 { font-size: 25px; margin: 0; color: var(--ink); flex: 1 1 auto; }
.pm-material {
  display: inline-block; font-size: 13px; font-weight: 600;
  padding: 5px 13px; border-radius: 999px; margin: 0;
  background: var(--green-soft); color: var(--green-dark);
}
.pm-pvc .pm-material { background: #eaf1fb; color: #2563eb; }
.pm-vinyl .pm-material { background: #fef3e2; color: #b45309; }
.pm-abs .pm-material { background: #f3edfb; color: #6d28d9; }
.pm-head p { flex-basis: 100%; font-size: 14.5px; color: var(--ink-2); line-height: 1.7; margin: 0 0 12px; }
.pm-more { flex-basis: 100%; font-size: 14px; font-weight: 700; color: var(--green); }
.pm-more:hover { color: var(--green-dark); }
.pm-products { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); }
.pm-prod { position: relative; display: block; overflow: hidden; }
.pm-prod img { width: 100%; height: 152px; object-fit: cover; display: block; transition: transform .5s ease; }
.pm-prod:hover img { transform: scale(1.06); }
.pm-prod span {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 8px 10px; font-size: 13px; color: #fff; font-weight: 600;
  background: linear-gradient(0deg, rgba(11,58,98,.64), rgba(11,58,98,0));
}
@media (max-width: 980px) { .pm-grid { grid-template-columns: 1fr; } }
@media (max-width: 720px) {
  .product-matrix { padding: 50px 0; }
  .pm-head { padding: 22px 20px 16px; }
  .pm-head h3 { font-size: 20px; }
  .pm-prod img { height: 120px; }
}

/* --- 速查卡去图标、改左侧色标 + 材质标注（v153）--- */
.cust-card { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 24px 26px; border-left: 5px solid var(--green); }
.card-silicone { border-left-color: var(--green); }
.card-pvc { border-left-color: #3b82f6; }
.card-vinyl { border-left-color: #f59e0b; }
.card-abs { border-left-color: #8b5cf6; }
.cust-card h3 { font-size: 21px; font-weight: 800; color: var(--ink); margin-bottom: 8px; line-height: 1.4; }
.cust-card .cc-material {
  display: inline-block; font-size: 12.5px; font-weight: 600;
  padding: 3px 11px; border-radius: 999px; margin-bottom: 12px;
  background: var(--green-soft); color: var(--green-dark);
}
.card-pvc .cc-material { background: #eaf1fb; color: #2563eb; }
.card-vinyl .cc-material { background: #fef3e2; color: #b45309; }
.card-abs .cc-material { background: #f3edfb; color: #6d28d9; }
.cust-card p { font-size: 14.5px; color: var(--ink-2); line-height: 1.95; margin: 0; }

/* --- 首页卡片视觉升级（v156）：资质徽章化 + 客户解决方案卡化 --- */

/* ===== 资质与品控：从「横条文字」升级为「徽章卡片」 ===== */
.cert-bar { gap: 18px; }
.cert-bar .cert-item {
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  padding: 28px 18px 24px;
  border-radius: 20px;
  background: linear-gradient(180deg, #ffffff 0%, #fbf9f5 100%);
  border: 1px solid rgba(26,26,46,.08);
  box-shadow: 0 4px 14px rgba(26,26,46,.06);
  transition: transform .28s ease, box-shadow .28s ease;
}
.cert-bar .cert-item:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 34px rgba(26,26,46,.11);
}
.cert-bar .cert-item .cert-seal {
  width: 70px; height: 70px;
  border-radius: 50%;
  font-size: 15px;
  letter-spacing: .6px;
  background: linear-gradient(145deg, #ffffff, #f7f3ea);
  border: 2px solid rgba(201,169,110,.55);
  color: #A8874E;
  box-shadow: 0 6px 18px rgba(201,169,110,.18), inset 0 1px 0 rgba(255,255,255,.8);
  transition: transform .28s ease, box-shadow .28s ease;
}
.cert-bar .cert-item:hover .cert-seal { transform: scale(1.08); }
.cert-bar .cert-item .cert-seal svg { width: 30px; height: 30px; color: #A8874E; }
.cert-bar .cert-item strong {
  font-size: 17.5px;
  font-weight: 800;
  color: var(--ink);
  margin-bottom: 5px;
}
.cert-bar .cert-item small {
  display: block;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.55;
  max-width: 92%;
}
/* 8 张卡片按 4 列 2 行，每行 4 色循环 */
.cert-bar .cert-item:nth-child(4n+1) .cert-seal { border-color: rgba(201,169,110,.60); color: #A8874E; background: linear-gradient(145deg, #fff, #f7f3ea); }
.cert-bar .cert-item:nth-child(4n+2) .cert-seal { border-color: rgba(47,111,237,.45); color: #2f6fed; background: linear-gradient(145deg, #fff, #f2f6ff); }
.cert-bar .cert-item:nth-child(4n+3) .cert-seal { border-color: rgba(224,145,47,.50); color: #c77a1f; background: linear-gradient(145deg, #fff, #fff7ed); }
.cert-bar .cert-item:nth-child(4n+4) .cert-seal { border-color: rgba(124,86,214,.48); color: #7c56d6; background: linear-gradient(145deg, #fff, #f6f3fd); }
.cert-bar .cert-item:nth-child(4n+2) .cert-seal svg { color: #2f6fed; }
.cert-bar .cert-item:nth-child(4n+3) .cert-seal svg { color: #c77a1f; }
.cert-bar .cert-item:nth-child(4n+4) .cert-seal svg { color: #7c56d6; }

/* ===== 四类 B 端客户：从「居中图标卡」升级为「带编号解决方案卡」 ===== */
.client-wall {
  counter-reset: client;
  gap: 20px;
}
.client-wall .client-card {
  counter-increment: client;
  display: grid;
  grid-template-columns: 74px 1fr;
  gap: 18px;
  align-items: center;
  text-align: left;
  padding: 26px 22px;
  border-radius: 20px;
  background: linear-gradient(180deg, #ffffff 0%, #fbf9f5 100%);
  border: 1px solid rgba(26,26,46,.08);
  box-shadow: 0 4px 14px rgba(26,26,46,.06);
}
.client-wall .client-card::after {
  content: counter(client, decimal-leading-zero);
  position: absolute;
  top: 12px; right: 16px;
  font-size: 42px;
  font-weight: 800;
  line-height: 1;
  color: rgba(201,169,110,.12);
  pointer-events: none;
}
.client-wall .client-card .client-ico {
  grid-row: 1 / 3;
  width: 64px; height: 64px;
  margin: 0;
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(201,169,110,.16), rgba(201,169,110,.05));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 4px 12px rgba(201,169,110,.12);
}
.client-wall .client-card h4,
.client-wall .client-card p { grid-column: 2; }
.client-wall .client-card h4 {
  font-size: 18px;
  font-weight: 800;
  color: var(--ink);
  margin-bottom: 6px;
  padding-bottom: 8px;
}
.client-wall .client-card h4::after {
  left: 0;
  bottom: 0;
  width: 28px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(201,169,110,.75), rgba(201,169,110,.08));
}
.client-wall .client-card p {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.7;
  margin: 0;
}
.client-wall .client-card:nth-child(4n+2) .client-ico { background: linear-gradient(145deg, rgba(47,111,237,.14), rgba(47,111,237,.04)); }
.client-wall .client-card:nth-child(4n+3) .client-ico { background: linear-gradient(145deg, rgba(224,145,47,.15), rgba(224,145,47,.04)); }
.client-wall .client-card:nth-child(4n+4) .client-ico { background: linear-gradient(145deg, rgba(124,86,214,.14), rgba(124,86,214,.04)); }
.client-wall .client-card:nth-child(4n+2)::after { color: rgba(47,111,237,.11); }
.client-wall .client-card:nth-child(4n+3)::after { color: rgba(224,145,47,.12); }
.client-wall .client-card:nth-child(4n+4)::after { color: rgba(124,86,214,.11); }

/* 响应式：客户卡在小屏恢复垂直居中 */
@media (max-width: 900px) {
  .client-wall .client-card {
    grid-template-columns: 64px 1fr;
    gap: 14px;
    padding: 22px 18px;
  }
  .client-wall .client-card .client-ico { width: 56px; height: 56px; }
  .client-wall .client-card::after { font-size: 34px; top: 10px; right: 12px; }
}
@media (max-width: 720px) {
  .client-wall .client-card {
    grid-template-columns: 1fr;
    text-align: center;
    padding: 26px 20px;
  }
  .client-wall .client-card .client-ico { grid-row: auto; margin: 0 auto 10px; }
  .client-wall .client-card h4,
  .client-wall .client-card p { grid-column: 1; }
  .client-wall .client-card h4::after { left: 50%; transform: translateX(-50%); }
  .client-wall .client-card::after { top: 10px; right: 14px; }
}
@media (max-width: 560px) {
  .cert-bar .cert-item { padding: 24px 14px 20px; }
  .cert-bar .cert-item .cert-seal { width: 62px; height: 62px; font-size: 14px; }
  .cert-bar .cert-item strong { font-size: 16px; }
}

/* 🚫 已撤回 v162 的 .footer-wide「页脚贯通整页」改动（2026-09-12）
   原因：该改动把页脚容器侧距清零、内容只剩 20px 硬边距，全站仅 use-cases.html 使用；
   后果：宽屏下页脚比同页正文外扩 190px（正文居中 1500，页脚贴到 20px），构成「文字贴边」违反版式硬规则。
   现统一回到 .container 居中约束（max-width: var(--maxw) + padding 0 20px），
   通栏底色由 .footer / .footer-topbar 提供，不受影响。请勿再加回「全宽页脚」。*/

/* ==================================================================
   详情页可读性优化（v168 试点：silicone-slowfeeder）
   目的：把「连续三段一模一样的白卡网格」拉开形态差异
   ① 编号要点卡 ② 结构图鉴卡 ③ 勾选清单 ④ 关键参数条
   ================================================================== */

/* ① 产品特点：编号要点卡 */
.pd-points .card { position: relative; overflow: hidden; }
.pd-idx {
  position: absolute; top: 12px; right: 18px;
  font-size: 36px; font-weight: 800; line-height: 1;
  color: rgba(201,169,110,.20); letter-spacing: -.03em;
  pointer-events: none; user-select: none;
}
.card p strong { color: var(--ink); font-weight: 700; }

/* ② 结构与款式：结构图鉴卡
   v170 修订：原为「大图 + 下方文字」（图 616×616，比详情页主图 693×519 还大），
   改为「左小图 + 右文字」的横向卡（图 128px），并做成产品图卡的质感。
   用 grid 定位、不改 HTML 结构：图跨两行，标题与说明落在第二列。 */
.pd-struct {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr);
  gap: 3px 20px; align-content: center;
  padding: 18px 20px;
  border-color: rgba(201,169,110,.28);
  background: linear-gradient(180deg, #ffffff 0%, #FDFBF6 100%);
}
.pd-struct-fig { grid-column: 1; grid-row: 1 / 3; margin: 0; align-self: center; }
.pd-struct-fig img {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block;
  border-radius: 12px; background: #f4f2ec;
  border: 1px solid rgba(201,169,110,.22);
  box-shadow: 0 5px 16px rgba(26,26,46,.10);
  transition: transform .25s ease, box-shadow .25s ease;
}
.pd-struct:hover .pd-struct-fig img {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 10px 24px rgba(26,26,46,.17);
}
.pd-struct h3 { grid-column: 2; grid-row: 1; margin: 0; font-size: 17.5px; }
.pd-struct p { grid-column: 2; grid-row: 2; margin: 0; font-size: 14.5px; line-height: 1.68; color: var(--ink-2); }

/* 桌面端排成 4 列「款式图鉴」：
   2 列时卡片宽 667、高 170，比例 3.9:1 过扁（图小、卡扁、上下空）；
   4 列后卡宽 333、高约 136，比例接近移动端，一排 4 款更像产品图鉴。 */
.pd-struct-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* 断点 1360：低于此宽度 4 列的文字区不足 11 字/行、会挤成 5 行窄柱。 */
@media (min-width: 1360px) {
  .pd-struct { grid-template-columns: 128px minmax(0, 1fr); gap: 3px 16px; }
  .pd-struct h3 { font-size: 16.5px; }
  .pd-struct p { font-size: 14px; }
}
@media (max-width: 1359px) {
  .pd-struct-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 660px) {
  .pd-struct-grid { grid-template-columns: 1fr; }
  .pd-struct { grid-template-columns: 128px minmax(0, 1fr); gap: 3px 16px; padding: 16px; }
  .pd-struct h3 { font-size: 16.5px; }
  .pd-struct p { font-size: 14px; }
}

/* ③ 定制项：勾选清单形态 */
.pd-opts .card h3 { padding-left: 32px; }
.pd-opts .card h3::before {
  content: "\2713";
  position: absolute; left: 0; top: 1px;
  width: 20px; height: 20px; line-height: 20px; text-align: center;
  border-radius: 50%; background: rgba(201,169,110,.18);
  color: #9c7f45; font-size: 12px; font-weight: 700;
}

/* ④ 规格参数：关键参数条（B 端客户扫页最先找的三项） */
.spec-hero {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px; margin-bottom: 14px;
}
.sh-item {
  background: linear-gradient(180deg, #ffffff 0%, #fbfaf6 100%);
  border: 1px solid rgba(201,169,110,.32); border-radius: 12px;
  padding: 18px 20px; box-shadow: 0 3px 12px rgba(26,26,46,.05);
}
.sh-k {
  display: block; font-size: 12.5px; color: var(--ink-2);
  letter-spacing: .06em; margin-bottom: 10px;
}
.sh-v {
  display: block; font-size: 25px; font-weight: 800;
  color: var(--ink); line-height: 1.15;
}
.sh-sub {
  display: block; font-size: 13px; color: var(--ink-2);
  margin-top: 9px; line-height: 1.55;
}
@media (max-width: 900px) {
  .spec-hero { grid-template-columns: 1fr; }
  .sh-v { font-size: 22px; }
}

/* ===== v180 · about.html 优化：工艺选型地图 + IP 授权两栏对照 =====
   解决「四大产品系列能力」纯文字段落 + 「IP 与授权」单段卡的单调问题。
   工艺选型地图：4 节点横向流程 + 箭头串联 + 产品 SVG 剪影 + 选型 cue 药丸 + 彩色标签。
   两栏对照：绿=支持 / 红=红线，对比结构比单段叙述更易扫读。 */
.craft-map { display: flex; align-items: stretch; gap: 0; }
.cm-node {
  flex: 1 1 0; min-width: 0;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px; box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; gap: 14px;
  transition: transform .22s ease, box-shadow .22s ease;
  position: relative; overflow: hidden;
}
.cm-node::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: #c13030;
}
.cm-node.c-silicone::before { background: #2F8F6B; }
.cm-node.c-pvc::before { background: #106BAD; }
.cm-node.c-vinyl::before { background: #8A6DBE; }
.cm-node.c-abs::before { background: #C0792F; }
.cm-node:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.cm-arrow {
  display: flex; align-items: center; justify-content: center;
  width: 34px; color: var(--muted); font-size: 22px; font-weight: 700;
  flex: 0 0 auto; align-self: stretch;
}
.cap-text { display: flex; flex-direction: column; gap: 10px; }
.cap-name { font-size: 21px; font-weight: 800; color: var(--ink); margin: 0; line-height: 1.25; }
.cap-en { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }
.cm-cue {
  font-size: 12.5px; font-weight: 600;
  border-radius: 999px; padding: 3px 10px; width: fit-content;
}
.cm-node.c-silicone .cm-cue { color: #216B50; background: #E8F5F0; }
.cm-node.c-pvc .cm-cue { color: #0D568A; background: #E8F2FA; }
.cm-node.c-vinyl .cm-cue { color: #6B4E9B; background: #F2EDFA; }
.cm-node.c-abs .cm-cue { color: #9A5F22; background: #F9EFE3; }
.cap-lead { font-size: 14.5px; color: var(--ink-2); line-height: 1.65; margin: 0; }
.cm-gallery { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.cm-gallery-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }
.cm-thumbs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cm-thumbs img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); }
.cm-bars { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; }
.cm-bar { display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: var(--ink-2); }
.cm-bar span { font-weight: 500; }
.dots { display: inline-flex; gap: 3px; }
.dots b { width: 7px; height: 7px; border-radius: 50%; background: var(--line); }
.dots b.on { background: var(--muted); }
.cm-node.c-silicone .dots b.on { background: #2F8F6B; }
.cm-node.c-pvc .dots b.on { background: #106BAD; }
.cm-node.c-vinyl .dots b.on { background: #8A6DBE; }
.cm-node.c-abs .dots b.on { background: #C0792F; }
.cm-node .cap-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: auto; }
.cm-node .cap-tags span {
  font-size: 12px; border-radius: 999px; padding: 3px 9px; font-weight: 500;
}
.cm-node.c-silicone .cap-tags span { color: #216B50; background: #E8F5F0; }
.cm-node.c-pvc .cap-tags span { color: #0D568A; background: #E8F2FA; }
.cm-node.c-vinyl .cap-tags span { color: #6B4E9B; background: #F2EDFA; }
.cm-node.c-abs .cap-tags span { color: #9A5F22; background: #F9EFE3; }
@media (max-width: 1100px) {
  .craft-map { flex-direction: column; }
  .cm-arrow { width: auto; height: 30px; transform: rotate(90deg); }
}
@media (max-width: 560px) { .cm-node { padding: 18px; gap: 12px; } }

/* products.html 总览页用的 craft-map 变体：整节点可点、底部带 CTA */
.craft-map-products .cm-node { text-decoration: none; }
.craft-map-products .cm-node:hover .cm-cta { text-decoration: underline; }
.cm-cta {
  margin-top: auto; font-size: 13px; font-weight: 700;
  display: inline-flex; align-items: center; gap: 4px;
}
.cm-node.c-silicone .cm-cta { color: #216B50; }
.cm-node.c-pvc .cm-cta { color: #0D568A; }
.cm-node.c-vinyl .cm-cta { color: #6B4E9B; }
.cm-node.c-abs .cm-cta { color: #9A5F22; }

/* ===== about.html「我们是谁」四卡网格（纯排版，无图标） ===== */
.intro-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.intro-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px; box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; gap: 10px;
  transition: transform .22s ease, box-shadow .22s ease;
}
.intro-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.intro-card h3 { font-size: 19px; font-weight: 800; color: var(--ink); margin: 0; }
.intro-card p { font-size: 14.5px; color: var(--ink-2); line-height: 1.7; margin: 0; }
@media (max-width: 720px) { .intro-grid { grid-template-columns: 1fr; } }

/* ===== about.html「工厂实力」设备产线卡 + 流程链可视化 ===== */
.equip-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.equip-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 24px 16px 22px; text-align: center; position: relative; overflow: hidden;
  box-shadow: var(--shadow-sm); transition: transform .22s ease, box-shadow .22s ease;
}
.equip-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; }
.equip-card.ec-silicone::before { background: #2F8F6B; }
.equip-card.ec-abs::before { background: #C0792F; }
.equip-card.ec-mold::before { background: #5B6472; }
.equip-card.ec-line::before { background: #106BAD; }
.equip-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.equip-qty { font-size: 34px; font-weight: 800; line-height: 1; letter-spacing: -.5px; color: var(--ink); }
.equip-qty span { font-size: 14px; font-weight: 600; color: var(--muted); margin-left: 3px; letter-spacing: 0; }
.ec-silicone .equip-qty { color: #2F8F6B; }
.ec-abs .equip-qty { color: #C0792F; }
.ec-mold .equip-qty { color: #5B6472; }
.ec-line .equip-qty { color: #106BAD; }
.equip-name { font-size: 16px; font-weight: 700; color: var(--ink); margin-top: 8px; }
.equip-desc { font-size: 13px; color: var(--muted); margin-top: 5px; line-height: 1.5; }

.flow-chain { display: flex; align-items: stretch; gap: 0; margin-top: 22px; }
.flow-step { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; }
.flow-card { width: 100%; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 18px 10px 20px; text-align: center;
  box-shadow: var(--shadow-sm); }
.flow-no { display: block; font-size: 12px; font-weight: 700; color: var(--muted);
  letter-spacing: 2px; margin-bottom: 4px; }
.flow-title { font-size: 17px; font-weight: 800; color: var(--ink); }
.flow-cap { font-size: 12.5px; color: var(--muted); margin-top: 4px; }
.flow-arrow { display: flex; align-items: center; justify-content: center;
  width: 30px; color: var(--muted); font-size: 20px; font-weight: 700; flex: 0 0 auto; }
@media (max-width: 1100px) {
  .equip-grid { grid-template-columns: repeat(2, 1fr); }
  .flow-chain { flex-direction: column; align-items: stretch; }
  .flow-arrow { width: auto; height: 26px; transform: rotate(90deg); }
}

.compare-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.cmp-col {
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 22px; background: #fff; box-shadow: var(--shadow-sm);
}
.cmp-col.cmp-ok { border-top: 3px solid #1f9d55; }
.cmp-col.cmp-no { border-top: 3px solid #c13030; }
.cmp-col h3 { font-size: 16px; margin: 0 0 14px; display: flex; align-items: center; gap: 8px; }
.cmp-col.cmp-ok h3 { color: #1f9d55; }
.cmp-col.cmp-no h3 { color: #c13030; }
.cmp-col ul { list-style: none; margin: 0; padding: 0; }
.cmp-col li { position: relative; padding-left: 26px; margin-bottom: 10px;
  font-size: 14px; color: var(--ink-2); line-height: 1.55; }
.cmp-col.cmp-ok li::before { content: "✓"; position: absolute; left: 0; top: 0;
  color: #1f9d55; font-weight: 800; }
.cmp-col.cmp-no li::before { content: "✕"; position: absolute; left: 0; top: 0;
  color: #c13030; font-weight: 800; }
.cmp-note { margin-top: 16px; font-size: 13px; color: var(--muted); margin-bottom: 0; }
@media (max-width: 720px) { .compare-2 { grid-template-columns: 1fr; } }

/* ===== 回到顶部（避开右下角微信悬浮组件） ===== */
.hq-btt {
  position: fixed; right: 16px; bottom: 96px; z-index: 9998;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--line); background: #fff; color: var(--ink);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  box-shadow: var(--shadow); opacity: 0; pointer-events: none;
  transform: translateY(8px);
  transition: opacity .22s ease, transform .22s ease, background .2s ease, color .2s ease;
}
.hq-btt.hq-btt-show { opacity: 1; pointer-events: auto; transform: translateY(0); }
.hq-btt:hover { background: #0B3A62; color: #C9A96E; border-color: #0B3A62; }
@media (max-width: 420px) {
  .hq-btt { right: 10px; bottom: 88px; width: 40px; height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .hq-btt { transition: none; }
}

/* ===== 起订量四档提示条（客户决策关键信息，前置到客户类型区块） ===== */
.moq-tip {
  margin-top: 26px; padding: 18px 22px; background: #fff;
  border: 1px solid var(--line); border-left: 4px solid var(--accent, #c13030);
  border-radius: var(--radius-sm, 8px); box-shadow: var(--shadow-sm);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px;
}
.moq-tip-k {
  flex: 0 0 auto; font-size: 14px; font-weight: 700; color: var(--ink);
  letter-spacing: .5px;
}
.moq-tip-v { flex: 1 1 320px; font-size: 14px; color: var(--ink-2); line-height: 1.65; }
.moq-tip-v b { color: #c13030; font-weight: 700; }
@media (max-width: 640px) {
  .moq-tip { padding: 15px 16px; }
  .moq-tip-k { flex: 1 1 100%; }
  .moq-tip-v { flex: 1 1 100%; font-size: 13.5px; }
}

/* =========================================================
   v187 · 场景卡压图 / 产品墙 / 长文排版（三处统一去平淡）
   原则：不加装饰图标，空间全部还给真实图片与文字。
   ========================================================= */

/* ---------- A. use-cases.html 场景大卡（标题压图） ---------- */
.uc-hero {
  position: relative; margin: 0 0 26px; border-radius: 16px;
  overflow: hidden; background: #0b1220;
  box-shadow: 0 10px 30px rgba(15, 23, 42, .16);
}
.uc-hero > img {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  display: block; transition: transform .55s ease;
}
.uc-hero:hover > img { transform: scale(1.035); }
.uc-hero-scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg,
    rgba(9, 15, 28, 0) 30%,
    rgba(9, 15, 28, .58) 68%,
    rgba(9, 15, 28, .90) 100%);
}
.uc-hero-inner { position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 34px 26px; }
.uc-hero-inner h3 {
  font-size: 28px; font-weight: 800; color: #fff; margin: 0 0 9px;
  line-height: 1.25; letter-spacing: .3px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .5);
}
.uc-hero-inner h3::before { display: none; }
.uc-hero-inner > p {
  font-size: 15.8px; line-height: 1.78; color: rgba(255, 255, 255, .95);
  margin: 0; max-width: 780px; text-shadow: 0 1px 7px rgba(0, 0, 0, .45);
}
.uc-hero-inner .uc-clients {
  margin-top: 13px; font-size: 13.5px; line-height: 1.5; color: #fff;
  background: rgba(255, 255, 255, .18); border: 1px solid rgba(255, 255, 255, .38);
  padding: 7px 15px; border-radius: 999px; display: inline-block;
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
@media (max-width: 860px) {
  .uc-hero { border-radius: 12px; margin-bottom: 20px; }
  .uc-hero-inner { padding: 18px 20px 16px; }
  .uc-hero-inner h3 { font-size: 21px; margin-bottom: 6px; }
  .uc-hero-inner > p { font-size: 14px; line-height: 1.65; }
  .uc-hero-inner .uc-clients { margin-top: 9px; font-size: 12.5px; padding: 6px 12px; }
}

/* ---------- B. 产品墙：图幅统一 4:3、图片更大、文字更清晰 ---------- */
/* 注意：排除 .gallery-usecase——它的产品图是白底实拍，专门用 object-fit:contain + 留白 +
   figcaption 两行占位，若套用本段 cover/满幅规则会把产品裁切掉。 */
.gallery.gallery-compact:not(.gallery-usecase) { gap: 20px; }
.gallery.gallery-compact:not(.gallery-usecase) .gallery-item {
  border-radius: 12px; border: 1px solid var(--line);
  transition: transform .22s ease, box-shadow .22s ease;
}
.gallery.gallery-compact:not(.gallery-usecase) .gallery-item:hover {
  transform: translateY(-5px); box-shadow: 0 14px 30px rgba(15, 23, 42, .13);
}
/* 顶掉基础规则里 240 / 300 / 266 三种写死高度，统一为 4:3 */
.gallery.gallery-compact:not(.gallery-usecase) .gallery-item img,
.gallery.gallery-compact:not(.gallery-usecase) .gallery-item:nth-child(3n+2) img,
.gallery.gallery-compact:not(.gallery-usecase) .gallery-item:nth-child(3n+3) img {
  height: auto; aspect-ratio: 4 / 3; object-fit: cover; display: block;
}
.gallery.gallery-compact:not(.gallery-usecase) .gallery-item figcaption {
  font-size: 15px; font-weight: 700; color: var(--ink);
  padding: 14px 12px; line-height: 1.5; border-top: 1px solid var(--line);
}
.gallery.gallery-compact .pcard-cta-row { margin: 10px 12px 14px; }
.gallery.gallery-compact .pcard-cta.ghost {
  font-size: 13.5px; font-weight: 700; padding: 10px 6px; border-radius: 8px;
}
.gallery.gallery-compact .gallery-item:hover .pcard-cta.ghost {
  background: var(--green); color: #fff; border-color: var(--green);
}
@media (max-width: 900px) { .gallery.gallery-compact { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .gallery.gallery-compact { grid-template-columns: 1fr; gap: 16px; } }

/* ---------- C. news 长文排版 ---------- */
.art-body { max-width: 860px; margin: 0 auto; }
.art-body > p { font-size: 16.5px; line-height: 2.05; color: var(--ink-2); margin: 0 0 26px; }
/* 导语：紧跟元信息行（或位于正文开头）的首个正文段，放大 + 左侧品牌竖条。
   注意：多篇长文 art-body 第一个 <p> 是 p.art-meta（日期/分类行），必须排除，
   否则日期行会被当成导语放大。 */
.art-body > p.art-meta + p,
.art-body > p:first-of-type:not(.art-meta) {
  font-size: 18.5px; line-height: 1.95; color: var(--ink); font-weight: 500;
  padding: 2px 0 2px 18px; border-left: 4px solid var(--green); margin-bottom: 32px;
}
.art-body h2 {
  font-size: 25px; font-weight: 800; color: var(--ink); letter-spacing: .3px;
  margin: 52px 0 24px; padding: 13px 18px; border-radius: 10px;
  background: var(--bg-soft); border-left: 5px solid var(--green);
}
.art-body h2::before { display: none; }
.art-body h3 {
  font-size: 19.5px; font-weight: 800; color: var(--ink);
  margin: 34px 0 14px; letter-spacing: .2px;
}
.art-body ul, .art-body ol { margin: 0 0 24px; padding-left: 24px; }
.art-body li { font-size: 16.2px; line-height: 2.0; color: var(--ink-2); margin-bottom: 8px; }
.art-body li::marker { color: var(--green); font-weight: 800; }
.art-body strong { color: var(--green-dark); font-weight: 800; }
.art-body img { border-radius: 12px; box-shadow: 0 6px 20px rgba(15, 23, 42, .10); }
.art-body figure { margin: 6px 0 26px; }
.article-page { padding-bottom: 62px; }
@media (max-width: 720px) {
  .art-body > p { font-size: 16px; line-height: 1.95; }
  .art-body > p.art-meta + p,
  .art-body > p:first-of-type:not(.art-meta) { font-size: 17px; }
  .art-body h2 { font-size: 21px; padding: 11px 14px; margin: 38px 0 18px; }
  .art-body h3 { font-size: 18px; }
}

/* ===== v208 · products.html「四大产品系列总览」再调 =====
   西子反馈：v207「空间还挺大。图片和文字大小调一下」。
   改法：图宽 160→200px；标题/款数/lead/cta 字号整体再提一档；
   文字区 padding/gap 适度收紧，让卡片内容更饱满。 */
.craft-map-products {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 20px; align-items: stretch;
}
.craft-map-products .cm-arrow { display: none; }
.craft-map-products .cm-node {
  display: flex; flex-direction: row; align-items: stretch;
  padding: 0; overflow: hidden;
  flex: none;
}
.craft-map-products .cm-node::before { height: 5px; z-index: 2; }

/* 左侧产品图：固定 200px 宽，按内容撑高 */
.craft-map-products .cm-fig {
  flex: 0 0 200px; display: block;
}
.craft-map-products .cm-fig img {
  width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block;
}

/* 右侧文字区 */
.craft-map-products .cap-text {
  flex: 1; display: flex; flex-direction: column;
  padding: 14px 20px 16px; gap: 7px;
}
.craft-map-products .cap-head {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; margin-bottom: 1px;
}
.craft-map-products .cap-name {
  font-size: 22px; font-weight: 800; letter-spacing: -.2px; line-height: 1.2;
}

/* 款数：浅色底 + 材料色字，降低视觉噪音 */
.craft-map-products .cm-count {
  display: inline-flex; align-items: baseline; gap: 3px;
  flex: 0 0 auto;
  padding: 7px 12px; border-radius: 999px;
  font-size: 20px; font-weight: 800; line-height: 1; letter-spacing: -.3px;
  color: #216B50; background: #E8F5F0;
}
.craft-map-products .cm-count em { font-style: normal; font-size: 12px; font-weight: 700; }
.craft-map-products .c-pvc .cm-count { color: #0D568A; background: #E8F2FA; }
.craft-map-products .c-vinyl .cm-count { color: #6B4E9B; background: #F2EDFA; }
.craft-map-products .c-abs .cm-count { color: #9A5F22; background: #F9EFE3; }

.craft-map-products .cm-cue { font-size: 14px; font-weight: 700; padding: 4px 12px; align-self: flex-start; }
.craft-map-products .cap-lead { font-size: 16px; line-height: 1.65; color: var(--ink-2); }
.craft-map-products .cm-cta { font-size: 15px; font-weight: 700; margin-top: auto; padding-top: 4px; }

@media (max-width: 980px) {
  .craft-map-products { grid-template-columns: 1fr; gap: 20px; }
  .craft-map-products .cm-fig { flex: 0 0 220px; }
  .craft-map-products .cap-name { font-size: 25px; }
  .craft-map-products .cm-count { font-size: 22px; }
}
@media (max-width: 560px) {
  .craft-map-products .cm-node { flex-direction: column; }
  .craft-map-products .cm-fig { flex: 0 0 auto; width: 100%; }
  .craft-map-products .cap-text { padding: 16px 18px 18px; }
  .craft-map-products .cap-name { font-size: 20px; }
  .craft-map-products .cm-count { font-size: 22px; padding: 8px 12px 9px; }
}

/* ===== v197 · about.html「四大产品系列能力」横向大卡重构 =====
   2×2 改竖向堆叠横向大卡：每行一种工艺，左图右文、整卡通宽，
   消除 2×2 等高压出的右半空白；删「典型产品」双图（"典型产品"标签×4 也是一种文字重复）；
   能力评分条保留但在卡片内单行排列；cue/lead 重写避免关键词复读。 */
.craft-map-about { display: flex; flex-direction: column; gap: 18px; }
.craft-map-about .cm-arrow { display: none; }
.craft-map-about .cm-node {
  display: grid; grid-template-columns: 320px 1fr;
  align-items: stretch; padding: 0; overflow: hidden;
  flex: none;   /* 覆盖 base .cm-node 的 flex:1 1 0，避免在 column flex 容器内被压塌 */
}
.craft-map-about .cm-node::before { height: 5px; z-index: 2; }
.craft-map-about .cm-fig { position: relative; overflow: hidden; min-height: 220px; }
.craft-map-about .cm-fig img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.craft-map-about .cap-text { flex: 1; padding: 26px 30px; gap: 12px; }

.craft-map-about .cap-name { font-size: 28px; letter-spacing: -.3px; }
.craft-map-about .cap-en { font-size: 13px; }
.craft-map-about .cm-cue { font-size: 15px; font-weight: 700; padding: 5px 14px; }
.craft-map-about .cap-lead { font-size: 15.5px; line-height: 1.7; }

/* 能力评分条：卡片内单行排列，不再挤成 2×2 */
.craft-map-about .cm-bars { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 2px; }
.craft-map-about .cm-bar { font-size: 14px; }
.craft-map-about .dots { gap: 4px; }
.craft-map-about .dots b { width: 10px; height: 10px; }

.craft-map-about .cap-tags { gap: 8px; margin-top: 4px; }
.craft-map-about .cap-tags span { font-size: 13.5px; padding: 4px 12px; }

@media (max-width: 760px) {
  .craft-map-about .cm-node { grid-template-columns: 1fr; }
  .craft-map-about .cm-fig { min-height: 200px; }
  .craft-map-about .cap-text { padding: 22px 22px 24px; }
  .craft-map-about .cap-name { font-size: 24px; }
}

/* ===== v214 · 「按采购场景」入口条（升级路线 阶段一·第2项）=====
   背景：use-cases.html 早就有 8 个完整采购场景板块，但入口只藏在导航下拉里。
   本组件把它提到「按工艺」页面组的显眼位置，与工艺维度并列。
   🔴 刻意用 <div class="use-entry-band"> 而非 <section>：div 对 section:nth-of-type(odd)
      隐形，插入后不会翻转后续 section 的奇偶（见 .workbuddy/memory/CSS陷阱清单.md 第 2 条）。
   ⚠️ 故意不写「N 款」：product_data_batch*.py 只覆盖 55/83 款，use-cases.html 只列代表产品，
      站上没有权威的「场景 × 款数」映射 → 宁可空着不编。 */
.use-entry-band {
  padding: 48px 0;
  background: #fff;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.use-entry-band .ueb-in {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 14px; flex-wrap: wrap; margin-bottom: 18px;
}
.use-entry-band .ueb-head h3 {
  font-size: 20px; font-weight: 800; letter-spacing: -.2px; margin-bottom: 6px; color: var(--ink);
}
.use-entry-band .ueb-head p {
  font-size: 14px; line-height: 1.65; color: var(--muted); margin: 0; max-width: 720px;
}
.use-entry-band .ueb-more {
  font-size: 14px; font-weight: 700; color: var(--green-dark);
  white-space: nowrap; padding-bottom: 2px;
}
.use-entry-band .ueb-more:hover { color: var(--green-deep); }
.use-entry-band .ueb-list { display: flex; flex-wrap: wrap; gap: 10px; }
.use-entry-band .ueb-list a {
  display: inline-block; padding: 10px 17px;
  border: 1px solid var(--line); border-radius: 999px;
  font-size: 14px; font-weight: 600; color: var(--ink);
  background: var(--bg-soft); transition: all .18s ease;
}
.use-entry-band .ueb-list a:hover {
  border-color: var(--green); color: var(--green-dark);
  background: var(--green-tint); box-shadow: var(--shadow-sm);
}
/* products.html 的入口条落在 main.catalog-main 内（该容器 padding:0 20px），
   若不处理会比另两页窄 40px → 8 个 chip 被挤到第二行、边框左右各缺 20px。
   负 margin 抵消容器 padding，保证三页视觉一致（实测：band 内内容区 1170 → 1210）。 */
.catalog-main > .use-entry-band { margin-left: -20px; margin-right: -20px; }
@media (max-width: 640px) {
  .use-entry-band { padding: 38px 0; }
  .use-entry-band .ueb-head h3 { font-size: 18px; }
  .use-entry-band .ueb-list { gap: 8px; }
  .use-entry-band .ueb-list a { padding: 8px 14px; font-size: 13.5px; }
}


/* ===== v216 · 「看你手上有什么」来图四入口（升级路线 阶段一·第1项）=====
   作用：客户联系前的第一层引导 —— 按「客户手上有什么」分四类，砍掉第一层来回沟通。
   业态依据：与鸿企同为「接单开模厂」的 Mitour 米兔用同一分法；过三闸（业态相同 /
   不涉及价格·交期·承诺 / 数据现成）。刻意不加图标，与站上「禁装饰性 SVG 撑版面」一致。
   交互：点击卡片 → 跳 #inq 表单 + 自动预填需求说明（见页面脚本），客户不用自己想怎么描述。 */
.start-entry-band {
  padding: 46px 0 48px;
  background: var(--green-tint);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.start-entry-band .seb-head { margin-bottom: 20px; }
.start-entry-band .seb-head h2 {
  font-size: 21px; font-weight: 800; letter-spacing: -.2px; margin-bottom: 6px; color: var(--ink);
}
.start-entry-band .seb-head p {
  font-size: 14px; line-height: 1.65; color: var(--muted); margin: 0; max-width: 780px;
}
.start-entry-band .seb-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.start-entry-band .seb-card {
  display: block; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 18px 18px 19px; transition: border-color .18s ease, box-shadow .18s ease;
}
.start-entry-band .seb-card:hover { border-color: var(--green); box-shadow: var(--shadow-sm); }
.start-entry-band .seb-card h3 { font-size: 16px; font-weight: 800; margin-bottom: 7px; color: var(--ink); }
.start-entry-band .seb-card p { font-size: 13.5px; line-height: 1.62; color: var(--ink-2); margin: 0; }
.start-entry-band .seb-card .seb-go {
  display: inline-block; margin-top: 11px; font-size: 13px; font-weight: 700; color: var(--green-dark);
}
/* 点击四入口卡片 → 跳 #inq：吸顶导航 85px + 表单卡标题区 66px 会遮住「提交需求」，
   故给锚点留滚动余量（85 + 66 + 21 余量 = 172）。实测 1440/1250/390 三档均不再遮挡。 */
#inq { scroll-margin-top: 190px; }

@media (max-width: 1100px) {
  .start-entry-band .seb-list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .start-entry-band { padding: 36px 0; }
  .start-entry-band .seb-list { grid-template-columns: 1fr; gap: 10px; }
  .start-entry-band .seb-head h2 { font-size: 19px; }
}

/* ===== 首页首屏次 CTA（文字链，替代第二个按钮）v222 ===== */
.hero-ghost-link{color:#fff;font-size:15px;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.45);padding:2px 0 2px 8px;transition:border-color .2s}
.hero-ghost-link:hover{border-color:#fff}


/* 色相 208°（logo 蓝 205°）；金字对比 5.23 ✅ / 白字 11.69 ✅（直接换 #106BAD 会降到 2.52 不合格） */
/* 仅覆盖首页首屏与页脚；内页 .page-hero 与其他 --green-deep 用途未动，保持可回滚 */
.footer { background: #0B3A62; }
.hero-banner { background-color: #0B3A62; }
.hero-scrim {
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.045) 0 1px, transparent 1px 86px),
    linear-gradient(105deg, rgba(11,58,98,.90) 0%, rgba(11,58,98,.66) 46%, rgba(11,58,98,.20) 100%);
}

/* ===== 可读性 v234：图幅放大 + 底色节奏 + 车间图蓝调统一（对标竞品「图大字短」）===== */
/* 1) 四大系列缩略图 152 → 196px：亮丽产品图是「明亮感」唯一来源，占比翻倍 */
.pm-prod img { height: 196px; }
@media (max-width: 720px) { .pm-prod img { height: 140px; } }

/* 2) 交替底色 #FAF9F7(明度249,与白差6不可见) → 浅蓝灰 #F2F6FB(243,差12可见)，全站 19 处引用 */
:root { --bg-soft: #F2F6FB; }

/* 3) 车间实拍图加品牌蓝轻蒙版：灰工业调 → 与全站蓝统一色温（multiply 不脏图）*/
.factory-trust-img { position: relative; }
.factory-trust-img img { filter: saturate(1.08) brightness(1.02); }
.factory-trust-img::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(165deg, rgba(11,58,98,.14) 0%, rgba(11,58,98,.05) 55%, rgba(11,58,98,.12) 100%);
  mix-blend-mode: multiply;
}

/* ===== 去模板感 v235（2026-09-15）：细线图标退场，字让位放大 ===== */
/* 依据 v186 拍板：禁止装饰性 SVG 图标撑版面；视觉重点＝实拍图（放大）+ 大数字 + 大字排版。
   首页 8 张卡（4 检测报告 + 4 客户类型）原为「细线图标 + 标题 + 两行小字」同构重复，
   是全站模板感 / 枯燥感最集中处。此处纯 CSS 覆盖，删除本段即回滚。 */

/* 1) 图标退出：细线 SVG 与彩色圆环 / 方块占位全部让位 */
.cert-bar .cert-item .cert-seal,
.client-wall .client-card .client-ico { display: none !important; }

/* 2) 检测报告卡：居中三行 → 左对齐大字卡（标题 17.5 → 22px） */
.cert-bar .cert-item {
  flex-direction: row; align-items: flex-start; text-align: left;
  gap: 0; padding: 30px 26px 28px;
  background: #fff; border: 1px solid var(--line); border-left-width: 3px;
}
.cert-bar .cert-item strong {
  font-size: 22px; font-weight: 800; letter-spacing: -.015em;
  margin-bottom: 9px; line-height: 1.3;
}
.cert-bar .cert-item small {
  max-width: 100%; font-size: 13.5px; line-height: 1.72;
}

/* 3) 客户类型卡：同样去图标，标题放大、正文行高放宽 */
.client-wall .client-card { padding: 30px 26px 28px; }
.client-wall .client-card h4 {
  font-size: 22px; font-weight: 800; letter-spacing: -.015em; margin-bottom: 9px;
}
.client-wall .client-card p { font-size: 14px; line-height: 1.75; }

/* 5) 客户类型卡去图标后的收尾：原为 grid「74px 图标列 + 1fr 文字列」，
      图标隐藏后左侧留下 74px 空列 → 改单列；右上角序号水印（::after counter）
      原本靠右不打架，单列后标题会延伸过去 → 给标题留出右侧避让位 */
.client-wall .client-card { grid-template-columns: 1fr; gap: 0; }
.client-wall .client-card h4,
.client-wall .client-card p { grid-column: 1; }
.client-wall .client-card h4 { padding-right: 54px; }
.client-wall .client-card::after { top: 14px; right: 16px; font-size: 38px; }

/* 6) 移动端（卡片改居中单列）取消避让，标题回到居中 */
@media (max-width: 720px) {
  .client-wall .client-card h4 { padding-right: 0; }
  .client-wall .client-card::after { top: 10px; right: 12px; font-size: 30px; }
}

/* ===== 产品中心 · 按品类找 索引条（紧接 .series-quick-nav 下方，非 sticky） =====
   v241：13 个胶囊在 1400px 宽以下会被裁掉右端（客户反馈「显示不全」）。
   改为 flex-wrap:wrap 自动折行 —— 宁可多一行，也不隐藏任何品类。
   该条非 sticky，多一行只增加页面高度，不会挡正文；吸顶的是上面的 .series-quick-nav。 */
.category-quick-nav{ background:#fff; border-bottom:1px solid var(--line); }
.category-quick-nav .container{ display:flex; flex-wrap:wrap; gap:9px; padding:12px 40px; align-items:center; }
.category-quick-nav .cqn-key{ flex:0 0 auto; font-size:13px; font-weight:700; color:var(--ink-2); letter-spacing:1px; margin-right:2px; white-space:nowrap; }
.category-quick-nav .cqn-item{ flex:0 0 auto; padding:8px 14px; border-radius:999px; border:1px solid var(--line); background:var(--bg-soft); color:var(--ink-2); font-size:13px; font-weight:600; white-space:nowrap; transition:.15s; }
.category-quick-nav .cqn-item:hover{ background:var(--green-soft); border-color:var(--green); color:var(--green-dark); transform:translateY(-1px); }
.category-quick-nav .cqn-item span{ margin-left:6px; opacity:.7; font-size:12px; font-weight:700; }
.category-quick-nav .cqn-all{ border-style:dashed; border-color:var(--accent); color:var(--accent); background:#fff; }
.category-quick-nav .cqn-all:hover{ background:var(--accent-soft); border-color:var(--accent); color:var(--accent); }
@media (max-width:768px){
  .category-quick-nav .container{ gap:8px; padding:10px 40px; }
  .category-quick-nav .cqn-item{ padding:7px 12px; font-size:12px; }
}
/* ===== v240 正文行宽收口 ==========================================
   目标：中文 38~42 字/行（超 45 字回行易串行）。实测改前：
   .faq-item p 49 字 / .uc-hero-inner>p 49 字 / .card p 74 字 / .cap-lead 53 字 / .art-body 44~51 字。
   全部为 align:start 左对齐，无居中卡片受影响。仅加 max-width，未改任何文案。
   ================================================================= */
.faq-item p { max-width: 620px; }
.uc-hero-inner > p { max-width: 640px; }
.card p { max-width: 620px; }
.cap-lead { max-width: 640px; }
.art-body { max-width: 660px; }
/* ===== v241 客户类型页配图（client-types.html）====================
   四类客户各一张 AI 生成场景图（锚定站内 use-cases 图的白展台+马卡龙+柔光风格），
   放在 section-head 与 4 张文字卡之间。纯图无叠加文案，避免图文不符。
   ================================================================= */
.client-photo {
  margin: 0 0 26px; border-radius: 18px; overflow: hidden;
  border: 1px solid rgba(11,58,98,.06); box-shadow: 0 8px 26px rgba(11,58,98,.10);
}
.client-photo img { display: block; width: 100%; aspect-ratio: 1200 / 520; object-fit: cover; object-position: center 55%; }
@media (max-width: 720px) { .client-photo img { aspect-ratio: 16 / 10; object-position: center 50%; } }
/* ===== v247 process 页图文工段块（process.html）==================
   流程页中段补一张品控实拍，让「打样之后怎么验收」有画面落地。
   复用站上既有的 .media-block 组件，外层包 .proc-band（div，非 section，
   不参与 section:nth-of-type 计数，故不影响后续区块奇偶）。
   回滚：删除本段 + process.html 里的 .proc-band 块与交付图带即可。
   ================================================================ */
.proc-band { padding: 66px 0 8px; background: var(--bg); }
.proc-band .media-block { margin-bottom: 0; }
.proc-band .media-body p { max-width: 560px; }
@media (max-width: 860px) {
  .proc-band { padding: 46px 0 0; }
  .proc-band .media-block { margin-bottom: 0; }
}

/* ===== v248 FAQ 页视觉增强（faq.html）=================================
   问题：11 张同规格白卡一路排到底 —— 无分组、无锚点、无呼吸位，页面偏"干"。
   做法：① 按主题分 3 组，组头＝金色竖线 + 两位编号 + 大字号标题 + 一句副题
             （纯排版层次，不用装饰插画，守 v186「视觉重点只给实拍图 / 大数字 / 大字排版」）
         ② 每张卡左侧一枚金色两位序号（CSS counter 自动编号，纯排版元素）
         ③ 组间插一条同宽图带（四大工艺成品实拍）打断长列表
   兼容：.faq-item 的基础卡面（白底微渐变 / 18px 圆角 / 顶部 4px 彩条 / hover 上浮）
         由既有共享规则提供，本段**只做加法**，不覆盖既有视觉。
   ⚠️ .faq-item::before 已被"顶部彩条"占用，所以序号走 ::after。 */
.faq-group { margin-bottom: 52px; }
/* 只在第一个分组 reset：计数随后续兄弟分组连续累加 → 条目全页连续编号 */
.faq-group:first-of-type { counter-reset: faq; }

/* 组头 */
.faq-group .fgh {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 20px;
}
/* 组头右侧延伸的细线：把三个分组做成"章节分隔"的版式语言 */
.faq-group .fgh::after {
  content: ""; flex: 1 1 60px; height: 1px; align-self: center;
  background: linear-gradient(90deg, var(--line), rgba(230, 235, 232, 0));
}
.faq-group .fgh::before {
  content: ""; width: 4px; height: 22px; border-radius: 2px; flex: none;
  background: linear-gradient(180deg, var(--green), var(--green-dark));
}
.faq-group .fgh h2 {
  font-size: 24px; font-weight: 800; margin: 0;
  letter-spacing: -.01em; color: var(--ink);
}
.faq-group .fgh p { margin: 0; font-size: 13.5px; color: var(--muted); }

/* 卡片：左侧让出号码位 */
.faq-group .faq-item { counter-increment: faq; padding: 22px 28px 22px 76px; }
.faq-group .faq-item h3 { font-size: 18px; }
.faq-group .faq-item::after {
  content: counter(faq, decimal-leading-zero);
  position: absolute; left: 28px; top: 21px; z-index: 3;
  font-size: 22px; font-weight: 800; line-height: 1;
  color: rgba(168, 135, 78, .45); letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}

/* 组间图带：与卡片同宽，整页只做一次呼吸 */
.faq-photo { margin: 0 0 52px; }
.faq-photo img {
  display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: 18px; box-shadow: var(--sh-1);
}
.faq-photo figcaption {
  margin-top: 12px; font-size: 13.5px; color: var(--muted); text-align: center;
}

/* 末组 margin-bottom 52px 与 CTA 的 margin-top 折叠，实际间距即 52px */
.faq-more { margin-top: 0; }

@media (max-width: 640px) {
  .faq-group { margin-bottom: 38px; }
  .faq-group .fgh { gap: 9px; }
  .faq-group .fgh h2 { font-size: 20px; }
  .faq-group .fgh p { flex-basis: 100%; }
  /* 窄屏下副题独占一行，右延细线会变成一条空线 → 直接隐藏 */
  .faq-group .fgh::after { display: none; }
  /* 窄屏保持"左侧序号列"的版式，只把号码与缩进一起收小
     ⚠️ 不能用 position:static —— ::after 是元素末尾，会掉到卡片底部 */
  .faq-group .faq-item { padding: 18px 18px 18px 46px; }
  .faq-group .faq-item h3 { font-size: 16.5px; }
  .faq-group .faq-item::after {
    left: 16px; top: 16px; font-size: 15px; color: rgba(168, 135, 78, .55);
  }
  .faq-photo { margin-bottom: 38px; }
  .faq-photo img { aspect-ratio: 4 / 3; }
}

/* ===== v250 FAQ 页版式重构（faq.html）=================================
   问题（西子 2026-09-15）：v248 只"给卡片加了编号"，骨架没动 —— 820px 单栏窄容器、
   右侧一整片留白、11 张同规格白卡一路排到底，读起来像清单不像页面。
   做法：① hero 换成站内成熟的 .page-hero（深蓝大图），首屏立起来
         ② 主体改双栏：左栏复用 .catalog-nav（sticky + catalog-nav.js 滚动高亮），
            右栏问答列 —— 页面宽度利用率 820px → 1060px
         ③ 每张卡内部做答案分层：一句话结论（深色大字）+「多说一点」浅底块（补充）
         ④ 页尾 CTA 从一枚按钮升级成深蓝面板
   兼容：<section> 数量与顺序未动（hero + 主体仍是 2 个），零奇偶漂移；
         .faq-item 卡面仍由既有共享规则（顶部彩条 / hover 上浮 / 左侧金线）提供，
         本段只做加法 + 必要的局部收窄。
   回滚：删本段 + faq.html 恢复单栏容器即可（原 v248 段样式不受影响）。
   ===================================================================== */

/* --- ① hero ---
   规则已抽到文件末尾的 v251 段「内页深色 hero 统一套」（`.hq-inner-hero`），
   faq.html 的 hero 现在同时挂 `faq-hero hq-inner-hero` 两个类，便于单页微调。 */

/* --- ② 双栏骨架（左栏 248 + 间隙 40 + 问答列 772）--- */
.faq-layout {
  display: grid; grid-template-columns: 248px 1fr; gap: 40px;
  align-items: start; max-width: 1060px; margin: 0 auto;
}
.faq-main { min-width: 0; }            /* 防 grid 子项被长内容撑破 */
.faq-layout [id] { scroll-margin-top: 96px; }   /* 锚点落位不被 sticky 导航挡住 */

/* 目录里 scroll-spy 命中"问题级"子项时的状态（站内 .cn-sub a 原本只有 hover，无 active） */
.catalog-nav .cn-sub a.active {
  background: var(--green-soft); color: var(--green-dark); font-weight: 700;
  box-shadow: inset 3px 0 0 var(--green);   /* 左侧金竖线标记当前位置 */
}
/* 计数徽标：站内默认 --mint 薄荷绿，FAQ 用材料金与页面金蓝体系统一
   ⚠️ 站内原规则是 `.catalog-nav a .cn-count`(0,2,1)，比 `.catalog-nav .cn-count`(0,2,0) 高，
      必须把 `a` 带上才能生效 */
.catalog-nav a .cn-count { background: var(--green-dark); }

/* --- ③ 卡片：答案分层 --- */
.faq-group .faq-item { padding: 26px 40px 26px 88px; margin-bottom: 16px; }
.faq-group .faq-item::after { left: 32px; top: 24px; font-size: 26px; color: rgba(168, 135, 78, .55); }
.faq-group .faq-item h3 { font-size: 18px; line-height: 1.55; margin-bottom: 12px; }
/* 一句话结论：大字 + 深色，与下面的补充块拉开层次。
   ⚠️ 覆盖 v240 的全局 `.faq-item p{max-width:620px}`：新列宽下卡片内容区 644px，
      留 640 让文案铺满又保持 40 字/行（16px 字号，仍在中文 38~42 字/行口径内）。 */
.faq-group .faq-item > p { font-size: 16px; line-height: 1.82; color: var(--ink); max-width: 640px; }
/* 补充块：宽度与首段文字对齐（都 640px），左缘金色细线 + 浅材料色底 */
.faq-x {
  max-width: 640px; margin-top: 14px; padding: 16px 18px;
  background: var(--green-tint); border-left: 3px solid var(--green);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.faq-x-tag {
  display: block; font-size: 12px; font-weight: 800; letter-spacing: .06em;
  color: var(--green-dark); margin-bottom: 7px;
}
.faq-x p { font-size: 15px; line-height: 1.85; color: var(--ink-2); margin: 0; }

/* 组头字号略提，与新列宽匹配 */
.faq-group .fgh h2 { font-size: 26px; }

/* --- ④ 页尾 CTA 面板（深蓝底，替代单枚按钮）--- */
.faq-cta {
  display: flex; align-items: center; justify-content: space-between;
  gap: 34px; flex-wrap: wrap;
  padding: 32px 36px; border-radius: 18px;
  background: linear-gradient(120deg, #0B3A62 0%, #14507F 100%);
  box-shadow: 0 14px 34px rgba(11, 58, 98, .22);
}
.faq-cta-txt { flex: 1 1 380px; min-width: 0; }
.faq-cta h3 { color: #fff; font-size: 21px; font-weight: 800; margin-bottom: 9px; }
.faq-cta p { color: rgba(255,255,255,.80); font-size: 14.5px; line-height: 1.8; margin: 0; max-width: 560px; }
/* 动作区：只有一枚按钮，垂直居中即与左侧文案对齐（2026-09-15 删去电话行后收敛） */
.faq-cta-act { display: flex; align-items: center; }
/* 按钮沿用全站 .btn-primary（材质红）不另做配色，避免"同站主按钮两个颜色"；
   深蓝底上给一枚金色描边外环，与 .cta-band 的处理方式一致 */
.faq-cta .btn-primary { box-shadow: 0 8px 22px rgba(0,0,0,.30), 0 0 0 2px rgba(227,203,156,.42), inset 0 1px 0 rgba(255,255,255,.22); }
.faq-cta .btn-primary:hover { box-shadow: 0 10px 28px rgba(0,0,0,.38), 0 0 0 2px #E3CB9C, inset 0 1px 0 rgba(255,255,255,.22); }
/* 末组 52px 与 CTA 的 margin 折叠，实际间距即 52px */
.faq-main .faq-cta { margin-top: 0; }

@media (max-width: 1080px) {
  .faq-layout { gap: 28px; max-width: none; }
  .faq-group .faq-item { padding: 24px 26px 24px 78px; }
  .faq-group .faq-item::after { left: 26px; top: 22px; font-size: 23px; }
}

/* 断点与站内 .catalog-layout 一致（880px 起目录变横向 chips，本站段不动那条规则）
   🔴 必须显式写回 grid-template-columns:1fr —— 站内 2185 行那条单列规则只作用于
      `.catalog-layout`，`.faq-layout` 是自建类名不在其列。漏掉会让 414~768px 下
      仍按 `248px 1fr` 分栏，问答卡片被压到 86px 宽、正文整块溢出（2026-09-15 实测 +22px）。 */
@media (max-width: 880px) {
  .faq-layout { grid-template-columns: 1fr; gap: 20px; }
  .faq-group .faq-item { padding: 20px 20px 20px 58px; }
  .faq-group .faq-item::after { left: 20px; top: 18px; font-size: 17px; color: rgba(168, 135, 78, .62); }
  .faq-group .faq-item h3 { font-size: 16.5px; }
  .faq-group .faq-item > p { font-size: 15.5px; }
  .faq-group .fgh h2 { font-size: 21px; }
  .faq-cta { padding: 26px 22px; gap: 22px; }
  .faq-cta h3 { font-size: 19px; }
}

/* ===== v251 内页深色 hero 统一套（faq / process / about / client-types）=========
   背景：v250 只给 FAQ 写了 hero 规则，紧接着 process / about / client-types 三页
         首屏还是扁平的 `.hero`（浅色渐变 + 一行标题），全站内页首屏出现两套语言。
         这里抽成一套 `.hq-inner-hero` 统一承担，四页 hero 都挂这个类。
         （原 `.faq-hero` 的 hero 规则已删除；单页要微调仍可用自己的类覆盖）
   ============================================================================== */
section.hq-inner-hero { padding: 0 !important; min-height: 340px; }
/* .page-hero::before（顶部 6px 斜切彩条）/ ::after（角落 132px 同心圆环）在深底上会显形 */
.hq-inner-hero::before, .hq-inner-hero::after { display: none !important; }
/* 🔴 .page-hero 是 display:flex，.hero-banner-inner 是 flex item：只给 max-width 时它按
   max-content 定宽，长副标题会超出视口被裁（414px 实测左右各溢 43px）→ 写死 width:100% 先服从父宽。
   ⚠️ 水平 padding 必须保留 20px（= .container 的默认值）—— 简写 padding 会把它清成 0，窄屏文字贴屏。 */
.hq-inner-hero .hero-banner-inner { width: 100%; padding: 92px 20px 80px; max-width: 760px; text-align: center; }
.hq-inner-hero .eyebrow { margin-bottom: 16px; }
.hq-inner-hero h1 { font-size: 44px; }
.hq-inner-hero .sub.light { max-width: 640px; font-size: 17px; line-height: 1.85; margin: 0 auto; }
/* 车间 / 展厅实拍密度高，左侧压得更暗一些（站内 hero-scrim 默认 .88→.62） */
.hq-inner-hero .hero-scrim { background: linear-gradient(100deg, rgba(11,58,98,.94) 0%, rgba(11,58,98,.80) 42%, rgba(11,58,98,.34) 100%); }

/* ===== v302 「公司简介 / 企业文化」两页互跳（hero 内页面级段控）======================
   背景：about.html（公司简介）与 culture.html（企业文化）同属「关于鸿企」，但两页之间
         原本只能靠顶部导航下拉互跳，页面内没有任何入口——读到一半想换页得回顶部。
   做法：hero 文案下方一组双项段控（segmented）：当前页金色实心标识（不可点，非链接），
         另一页幽灵态描边（可点跳转）。深底上对比清楚，且不占正文流。
   层级：页面级切换（hero 内，不吸顶）＞ 页内段内导航（about 的 .series-quick-nav，吸顶）。
   兼容：纯加法，未改任何既有选择器；回滚 = 删本段 + 两页 hero 里删掉 <nav class="hero-switch">。
   ================================================================================ */
.hero-switch{ display:inline-flex; align-items:center; gap:6px; margin-top:26px; padding:6px;
  border-radius:999px; background:rgba(255,255,255,.13); border:1px solid rgba(255,255,255,.30);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.hero-switch .hs-item{ display:inline-flex; align-items:center; gap:8px; padding:10px 24px; border-radius:999px;
  font-size:15px; font-weight:700; letter-spacing:.5px; white-space:nowrap; text-decoration:none;
  color:rgba(255,255,255,.90); transition:.18s; }
.hero-switch a.hs-item:hover{ background:rgba(255,255,255,.18); color:#fff; }
/* 当前页：香槟金实心。金底配白字对比度不足（约 2.1:1）→ 用深棕字，实测清晰 */
.hero-switch .hs-item.is-on{ background:var(--green); color:#3A2C10; box-shadow:0 4px 14px rgba(0,0,0,.24); }
.hero-switch .hs-item.is-on::before{ content:""; width:6px; height:6px; border-radius:50%; background:#3A2C10; }
.hero-switch a.hs-item:not(.is-on)::after{ content:"→"; font-size:13px; opacity:.75; }

/* ===== v251 process 页「五步定制流程」改竖向时间线 ==============================
   问题：五步流程沿用 index 的 `.steps`（`repeat(4,1fr)`），5 个条目排成 4+1 ——
         第 5 步孤悬一行左侧；且每卡仅约 285px 宽，正文 200 字被压成小字密排。
   做法：「编号列 / 标题列 / 正文列」三栏时间线，整体 1060px 居中（与 FAQ 同宽），
         正文列约 676px ≈ 43 字/行；编号左侧金圆点 + 竖线连成时间轴。
   兼容：`.steps / .step` 原样保留（index.html 的 4 步仍用它，4 列正好排满）。
   回滚：删本段 + process.html 恢复 `.steps` 结构。
   ============================================================================== */
.flow { max-width: 1060px; margin: 0 auto; }
.flow-item {
  display: grid; grid-template-columns: 92px 236px 1fr; gap: 0 28px;
  position: relative; padding-bottom: 34px;
}
.flow-item:last-child { padding-bottom: 0; }
/* 时间轴连线：从当前圆点下方连到下一条 */
.flow-item::before {
  content: ""; position: absolute; left: 5px; top: 44px; bottom: 4px; width: 2px;
  background: linear-gradient(180deg, rgba(201,169,110,.55), rgba(201,169,110,.10));
}
.flow-item:last-child::before { display: none; }
.flow-no {
  position: relative; padding: 4px 0 0 26px;
  font-size: 32px; font-weight: 800; line-height: 1; letter-spacing: -.02em;
  color: var(--green-dark); font-variant-numeric: tabular-nums;
}
/* 编号左侧的节点圆点（纯 CSS 圆形，不是装饰插画） */
.flow-no::before {
  content: ""; position: absolute; left: 0; top: 12px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--green); box-shadow: 0 0 0 5px rgba(201,169,110,.16);
}
.flow-h { margin: 0; padding-top: 8px; font-size: 20px; font-weight: 800; line-height: 1.4; color: var(--ink); }
.flow-p { margin: 0; padding-top: 10px; font-size: 15.5px; line-height: 1.9; color: var(--ink-2); }

/* about 页 sticky 段内导航的锚点落位（sticky 导航吸顶 64px + 站点导航 72px） */
section[id^="about-"] { scroll-margin-top: 124px; }

@media (max-width: 1080px) {
  .flow { max-width: none; }
  .flow-item { grid-template-columns: 84px 210px 1fr; gap: 0 22px; }
}
@media (max-width: 880px) {
  section.hq-inner-hero { min-height: 260px; }
  .hq-inner-hero .hero-banner-inner { padding: 60px 20px 52px; }
  .hq-inner-hero h1 { font-size: 32px; }
  .hq-inner-hero .sub.light { font-size: 15.5px; }
  /* v302 两页互跳段控：窄屏收窄内边距，两项仍并排不换行（4+4 字 ≈ 190px < 350px 可用宽） */
  .hero-switch { margin-top:22px; padding:5px; gap:4px; }
  .hero-switch .hs-item { padding:9px 18px; font-size:14px; }
  /* 时间线改纵向堆叠：整体左缩进，圆点与连线移到缩进里 */
  .flow-item { grid-template-columns: 1fr; gap: 0; padding-bottom: 26px; padding-left: 46px; }
  .flow-no { padding: 0 0 4px; font-size: 22px; }
  .flow-no::before { left: -34px; top: 1px; width: 10px; height: 10px; box-shadow: 0 0 0 4px rgba(201,169,110,.16); }
  .flow-item::before { left: -30px; top: 14px; bottom: 6px; }
  .flow-h { padding-top: 0; font-size: 17.5px; margin-bottom: 6px; }
  .flow-p { padding-top: 0; font-size: 15px; }
}


/* ============================================================
   v253 · client-types（四类客户）四段差异化 — 2026-09-15
   病：四段骨架完全相同 ——「段头 + 通栏大图 + 2×2 卡 + 按钮行」，
       段高 1231 / 1250 / 1231 / 1250，连高度都几乎一致，只有底色与标题
       对齐在交替 → 滚一遍就腻。
   法：语义顺序保留（段头 → 图 → 信息块 → 按钮），让每段的**视觉主角**不同：
       01 大数字（起订量）｜02 要素条（采购关注点）｜03 大图（还原度）
       ｜04 红线警示条（授权合规）。
   ⚠️ 不新增 / 删除 <section>，4 个锚点 id 不动（首页 4 卡与 CTA 都指过来）。
   ⚠️ 素材是 1200×675（16:9）→ 图幅只能比 16:9 更宽或等宽；做窄竖版会裁掉主体。
   ⚠️ 段底色仍由 .bg-soft 交替控制，不在此段改。
   整段删除即可回滚。
   ============================================================ */

/* ---- 公用件 ---- */
.ct-head { max-width: 660px; margin: 0 0 24px; text-align: left; }
.ct-head .eyebrow { display: inline-block; margin-bottom: 12px; }
.ct-head h2 { font-size: 30px; line-height: 1.32; color: var(--ink); text-align: left; }
.ct-head p { margin-top: 12px; font-size: 16px; line-height: 1.85; color: var(--muted); text-align: left; }

.ct-fig { margin: 0; border-radius: 18px; overflow: hidden; background: var(--bg-soft); box-shadow: 0 16px 38px rgba(26,26,46,.12); }
.ct-fig img { display: block; width: 100%; object-fit: cover; object-position: center 55%; }

.ct-points { list-style: none; margin: 0; padding: 0; max-width: 680px; text-align: left; }
.ct-points li { position: relative; padding-left: 20px; font-size: 15.5px; line-height: 1.9; color: var(--ink-2); }
.ct-points li + li { margin-top: 12px; }
.ct-points li::before { content: ""; position: absolute; left: 0; top: 11px; width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
.ct-points b { color: var(--ink); }

.ct-btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

/* ---- 01 礼品渠道商：文左图右 + 双大数字 ---- */
.ct-split { display: grid; grid-template-columns: minmax(0, 1fr) 470px; gap: 44px; align-items: center; }
.ct-split .ct-fig img { aspect-ratio: 16 / 9; }
.ct-nums { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 34px; }
.ct-num { padding: 24px 26px; border-radius: 16px; background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--green); text-align: left; }
.ct-num b { display: block; font-size: 40px; line-height: 1; font-weight: 800; color: var(--green-dark); letter-spacing: -.5px; }
.ct-num b i { font-size: 15px; font-style: normal; font-weight: 700; margin-left: 5px; letter-spacing: 0; }
.ct-num span { display: block; margin-top: 12px; font-size: 14.5px; font-weight: 700; color: var(--ink); }
.ct-num em { display: block; margin-top: 5px; font-size: 13.5px; font-style: normal; color: var(--muted); }
.ct-qa { margin-top: 26px; padding: 18px 22px; border-radius: 14px; background: var(--green-soft); font-size: 14.5px; line-height: 1.9; color: var(--ink-2); text-align: left; }
.ct-qa b { color: var(--ink); }

/* ---- 02 企业采购：通栏图 + 四要素条 ---- */
.ct-fig-wide img { aspect-ratio: 16 / 9; }
.ct-factors { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: 28px; }
.ct-factor { padding: 20px 22px; border-radius: 14px; background: var(--green-soft); border-top: 3px solid var(--green); text-align: left; }
.ct-factor h4 { font-size: 16px; color: var(--ink); margin-bottom: 9px; }
.ct-factor p { font-size: 13.5px; line-height: 1.8; color: var(--muted); }

/* ---- 03 品牌市场部：大图在左 + 深色保密块 ---- */
.ct-split-rev { grid-template-columns: 500px minmax(0, 1fr); }
.ct-split-rev .ct-fig img { aspect-ratio: 16 / 9; }
.ct-quote { margin-top: 30px; padding: 26px 30px; border-radius: 16px; background: var(--green-deep); text-align: left; }
.ct-quote p { color: #fff; font-size: 17px; line-height: 1.85; font-weight: 600; }
.ct-quote span { display: block; margin-top: 10px; font-size: 13.5px; color: rgba(255,255,255,.72); }

/* ---- 04 IP 版权方：红线警示条 + 三列 ---- */
.ct-alert { display: flex; align-items: flex-start; gap: 18px; padding: 22px 26px; border-radius: 16px; background: var(--accent-soft); border-left: 5px solid var(--accent); margin-bottom: 28px; text-align: left; }
.ct-alert-tag { flex: 0 0 auto; padding: 5px 13px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 13px; font-weight: 800; letter-spacing: .5px; }
.ct-alert p { font-size: 15.5px; line-height: 1.85; color: var(--ink); }
.ct-alert b { color: var(--accent); }

/* ---- 响应式 ---- */
@media (max-width: 1080px) {
  .ct-split, .ct-split-rev { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .ct-split .ct-fig, .ct-split-rev .ct-fig { order: -1; }
  .ct-factors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .ct-head h2 { font-size: 24px; }
  .ct-nums, .ct-factors { grid-template-columns: minmax(0, 1fr); }
  .ct-num b { font-size: 34px; }
  .ct-alert { flex-direction: column; gap: 12px; }
  .ct-fig-wide img { aspect-ratio: 16 / 9; }
}

/* ---- 03 保密块改两栏：左「承诺」大字 / 右「补充」小字，避免右侧一片空 ---- */
.ct-quote { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 36px; align-items: center; }
.ct-quote span { margin-top: 0; }

/* ---- 04 授权判定：两栏对照（可以接 / 要先补授权）----
   原先这里用的是与 02 同款的要素条（米色卡 + 顶金边），两段形态撞车；
   换成「能接 / 不接」对照，既是本段最该被看到的信息，也彻底区别开。 */
.ct-verdict { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 26px; }
.ct-vd { padding: 24px 26px; border-radius: 16px; background: #fff; border: 1px solid var(--line); border-top: 4px solid var(--green); text-align: left; }
.ct-vd.no { border-top-color: var(--accent); }
.ct-vd h4 { font-size: 17px; color: var(--ink); margin-bottom: 14px; }
.ct-vd ul { list-style: none; margin: 0; padding: 0; }
.ct-vd li { position: relative; padding-left: 18px; font-size: 14.5px; line-height: 1.85; color: var(--ink-2); }
.ct-vd li + li { margin-top: 9px; }
.ct-vd li::before { content: ""; position: absolute; left: 0; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
.ct-vd.no li::before { background: var(--accent); }

@media (max-width: 880px) {
  .ct-quote { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .ct-verdict { grid-template-columns: minmax(0, 1fr); }
}


/* ===== v259 · 收敛：撤销 v255~v258 彩虹色条，回到金调克制（西子 09-15 拍板） ===== */
/* 高级感＝留白 / 真实大图 / 大数字 / 字阶 / 版式节奏，不是分类配色 */
/* 仅 products·all-products 系列段保留一处统一细线（2px 香槟金，不按材质换色）；材质靠标题文字区分 */
.series-block .section-head{border-top:2px solid var(--green);padding-top:16px;margin-top:6px;}

/* ===== v260 · all-products 编辑式章节扉页（B 级版式重做，无彩条） ===== */
/* 用 CSS 计数器生成金色大序号 01–06 + 写实材质句 + 款数/起订量，靠内容分层破同构 */
.pg-all{ counter-reset:series; }
/* 关掉全局 hqsec 水印，避免与编辑式序号重复出现 */
.pg-all .section-head::before{ display:none; }
/* 选择器带 body+.series-block 提权重，压过移动端 odd 区块居中规则 section:nth-of-type(odd) .section-head */
body.pg-all .series-block .section-head{
  display:flex; align-items:flex-start; gap:22px;
  text-align:left; max-width:none; margin:0 0 30px;
}
.pg-all .series-no{
  flex:none; counter-increment:series;
  font-family:Georgia,"Times New Roman",serif;
  font-size:52px; font-weight:700; line-height:.9;
  color:rgba(168,135,78,.42);
  font-variant-numeric:tabular-nums; letter-spacing:-.02em; padding-top:2px;
}
.pg-all .series-no::after{ content:counter(series,decimal-leading-zero); }
.pg-all .series-head-main{ flex:1; min-width:0; }
.pg-all .series-head-main h2{
  font-size:30px; font-weight:800; margin:0 0 8px;
  color:var(--ink); letter-spacing:.2px; padding-bottom:14px;
}
/* 标题短横线从居中改左对齐，配编辑式左排版；隐藏更宽的淡线（带 body 提权重，压过移动端 odd 区块再居中规则） */
body.pg-all .series-head-main h2::after{ left:0; transform:none; }
body.pg-all .series-head-main h2::before{ display:none; }
.pg-all .series-head-main .eyebrow{ margin-bottom:6px; }
.pg-all .series-desc{
  font-size:14.5px; color:var(--muted); line-height:1.6;
  margin:0 0 6px; max-width:680px;
}
.pg-all .series-meta{
  font-size:13px; font-weight:700; color:var(--green-deep);
  margin:0; letter-spacing:.02em;
}
/* IP 系列无 series-desc/meta，保留原 p 作说明 */
.pg-all .series-head-main > p:not(.series-desc):not(.series-meta){
  font-size:14.5px; color:var(--muted); line-height:1.6; margin:6px 0 0; max-width:680px;
}
@media (max-width:720px){
  body.pg-all .series-block .section-head{ gap:14px; margin-bottom:22px; }
  .pg-all .series-no{ font-size:38px; }
  .pg-all .series-head-main h2{ font-size:24px; }
}

/* ===== v259 · B方案：实力区「大数字 + 细线数据条」===== */
/* 去卡片化（无底色/无圆角），靠字号阶梯 + 上下细线造层级，不靠配色 */
.factory-stats{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:22px;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:22px 0; margin-bottom:28px;
}
.factory-stats > div{ background:transparent; border-radius:0; padding:0; }
.factory-stats strong{ font-size:38px; letter-spacing:-1px; line-height:1.05; margin-bottom:8px; }
.factory-stats > div:nth-child(4) strong{ font-size:24px; letter-spacing:0; }
.factory-stats > div > span:last-child{ font-size:13px; letter-spacing:.02em; }
@media (max-width:900px){
  .factory-stats{ padding:18px 0; gap:16px; }
  .factory-stats strong{ font-size:30px; }
  .factory-stats > div:nth-child(4) strong{ font-size:20px; }
}

/* ===== 系列区工艺判断 / 定制能力折叠条（products.html 方案 A）===== */
.craft-fold{
  margin-top:22px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#fff;
  overflow:hidden;
}
.craft-fold > summary.craft-fold-summary{
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:15px 20px;
  font-size:17px;
  font-weight:600;
  color:var(--ink);
  user-select:none;
}
.craft-fold > summary.craft-fold-summary::-webkit-details-marker{ display:none; }
.craft-fold > summary.craft-fold-summary::marker{ content:""; }
.craft-fold > summary.craft-fold-summary::after{
  content:"展开 \25BE";
  flex:none;
  font-size:13px;
  font-weight:600;
  color:var(--green);
  border:1px solid var(--line);
  border-radius:999px;
  padding:4px 14px;
  white-space:nowrap;
}
.craft-fold[open] > summary.craft-fold-summary::after{ content:"收起 \25B8"; }
.craft-fold > .craft-fold-body{ padding:4px 20px 22px; }
.craft-fold .craft-judge{ margin-top:10px; }
@media (max-width:720px){
  .craft-fold > summary.craft-fold-summary{ font-size:15.5px; padding:14px 16px; }
  .craft-fold > summary.craft-fold-summary::after{ padding:3px 11px; }
  .craft-fold > .craft-fold-body{ padding:4px 16px 18px; }
}
/* ===== 详情页 hero 款式缩略图条（silicone-phonesleeve 等） ===== */
.pd-variants{ display:flex; gap:10px; margin-top:14px; padding:0 16px; }
.pd-variant{ flex:1 1 0; margin:0; min-width:0; }
.pd-variant img{ width:100%; height:74px; object-fit:cover; border-radius:10px; border:1px solid var(--line); display:block; }
.pd-variant figcaption{ margin-top:6px; font-size:12px; color:var(--muted); text-align:center; line-height:1.3; }
@media (max-width:720px){ .pd-variant img{ height:62px; } .pd-variant figcaption{ font-size:11px; } }
/* ===== 详情页 hero 款式缩略图交互 + 大图查看层 ===== */
.pd-variant{ cursor:pointer; }
.pd-variant:hover img{ border-color:var(--green); }
.pd-variant.on img{ border:2px solid var(--green); }
.pd-variant.on figcaption{ color:var(--ink); font-weight:600; }
/* v281：款式区（.pd-variants 缩略图条 + .pd-variant-desc 说明文字）左右贴边修复。
   成因：.pd-media 白卡片 padding 为 0（只有 border-radius:14px + overflow:hidden），
   而 .pd-variants 和 .pd-variant-desc 都没有左右内边距 →
   ① 四张缩略图的最左/最右紧贴卡片边框，视觉上没有呼吸感；
   ② 说明文字内联样式为 margin:10px 0 0（左右为 0），左端顶死卡片边框、右端长句顶死，
      末行又紧贴卡片底边被圆角压住（实测底边距仅 1px）。
   修法：此处统一补左右 padding + 底部留白，不改 80 个页面的内联样式即可全站生效。
   注：内联 margin 只设了左右为 0，padding 与其不冲突，可正常生效。
   .pd-variants 的左右 padding 直接合并在上方原声明里，此处只留说明文字一条。 */
.pd-variant-desc{ padding:0 16px 16px; }
#pdMainPhoto{ cursor:zoom-in; }
.pd-lightbox{ position:fixed; inset:0; z-index:999; background:rgba(22,36,43,.82); display:flex; align-items:center; justify-content:center; padding:24px; cursor:zoom-out; }
.pd-lightbox[hidden]{ display:none; }
.pd-lightbox img{ max-width:94vw; max-height:90vh; border-radius:12px; box-shadow:0 18px 60px rgba(0,0,0,.35); }
/* ===== v267 · A. 免费显示字体：思源宋体 Noto Serif SC Bold（OFL 免费商用）· 站点全量字集子集 301KB ===== */
@font-face{
  font-family:'HQ Serif';
  src:url('../fonts/hq-serif-bold.woff2') format('woff2');
  font-weight:700; font-style:normal; font-display:swap;
}
:root{
  --font-display:'HQ Serif',"Noto Serif SC","Source Han Serif SC","Songti SC",STSong,SimSun,Georgia,serif;
}
/* 大标题与关键数字启用显示字体（小标题 h3+ 仍用黑体，拉开字阶） */
h1, h2, .hero-banner h1, .hero-banner h2, .page-hero h1,
.factory-stats strong, .hero-facts strong{
  font-family:var(--font-display);
  font-weight:700;
  letter-spacing:.005em;
}

/* ===== v267 · B. 首页编辑式首屏（Elkem/Spectrum 手法：左三短句大字+细线入口，右真实摄影拼图） ===== */
.hero-edit .hero-banner{
  min-height:0; background-color:#fff; background-image:none!important;
  padding:40px 0 44px;
}
.hero-edit .hero-banner::before{ display:none; }
.hero-edit .hero-banner::after{ display:none; }
.hero-edit .hero-scrim{ display:none!important; }
.hero-edit .hero-banner-inner{
  max-width:var(--maxw); margin:0 auto; padding:0 20px;
  display:grid; grid-template-columns:1.06fr .94fr; gap:56px; align-items:center;
}
.hero-edit .hero-banner .eyebrow.light{
  color:var(--green-dark); background:var(--green-soft); border-color:rgba(168,135,78,.28);
}
.hero-edit h1, .hero-edit .hero-banner h1{
  color:var(--ink); font-size:clamp(30px,3.3vw,50px); line-height:1.2;
  margin:16px 0 18px; text-shadow:none; letter-spacing:.01em;
}
.hero-edit h1 .hl, .hero-edit .hero-banner h1 .hl{ color:var(--green-dark); }
.hero-edit .sub.light{
  color:var(--ink-2); text-shadow:none; font-size:16px; max-width:520px; margin-bottom:22px;
}
.hero-edit .cta-row{ margin-bottom:0; }
.hero-edit .hero-ghost-link{ color:var(--ink-2); }
.hero-edit .hero-ghost-link:hover{ color:var(--green-dark); }
/* 细线下划线入口（替按钮，降视觉重量） */
.hero-edit-links{
  display:flex; flex-wrap:wrap; gap:12px 26px; margin-top:26px;
  list-style:none; padding:0;
}
.hero-edit-links a{
  display:inline-block; color:var(--ink-2); font-weight:600; font-size:14.5px;
  padding-bottom:4px; border-bottom:1px solid rgba(168,135,78,.45);
}
.hero-edit-links a:hover{ color:var(--green-dark); border-bottom-color:var(--green-dark); }
/* 量化钩子：细线数据行（起订量四档 + 打样周期） */
.hero-facts{
  display:flex; flex-wrap:wrap; gap:0; margin-top:24px;
  padding-top:16px; border-top:1px solid var(--line); list-style:none;
}
.hero-facts li{ flex:1 1 auto; min-width:104px; padding-right:16px; }
.hero-facts strong{
  display:block; font-size:23px; line-height:1.15; color:var(--ink); margin-bottom:2px;
}
.hero-facts strong i{ font-style:normal; font-size:13px; color:var(--ink-2); margin-left:2px; }
.hero-facts span{ display:block; font-size:12.5px; color:var(--muted); line-height:1.4; }
/* 右侧摄影拼图：真实厂区/成品实拍，无装饰插画 */
.hero-pics{ display:grid; grid-template-columns:1fr 1fr; grid-template-rows:repeat(2,205px); gap:14px; }
.hero-pics figure{
  margin:0; overflow:hidden; border-radius:10px; background:var(--green-soft);
}
.hero-pics img{ width:100%; height:100%; object-fit:cover; display:block; }
.hero-pics .hp-main{ grid-row:span 2; }
.hero-pics-cap{
  margin-top:12px; font-size:12px; color:var(--muted); letter-spacing:.02em;
}
@media (max-width:900px){
  .hero-edit .hero-banner{ padding:40px 0 40px; }
  .hero-edit .hero-banner-inner{ grid-template-columns:1fr; gap:30px; }
  .hero-pics{ grid-template-rows:repeat(2,150px); }
  .hero-facts li{ min-width:92px; }
}
@media (max-width:560px){
  .hero-edit h1, .hero-edit .hero-banner h1{ font-size:27px; }
  .hero-pics{ grid-template-columns:1fr 1fr; grid-template-rows:repeat(2,96px); }
}

/* ===== v267 · C. 大数字数据行提级（去卡片化，放大字阶差） ===== */
.factory-stats{ gap:0; margin-bottom:26px; }
.factory-stats > div{
  background:transparent; border-radius:0; padding:0 16px 0 0;
  border-left:1px solid var(--line); padding-left:16px;
}
.factory-stats > div:first-child{ border-left:0; padding-left:0; }
.factory-stats strong{
  font-size:44px; color:var(--ink); line-height:1.05; margin-bottom:8px; letter-spacing:-.01em;
}
.factory-stats strong span{ font-size:16px; color:var(--green-dark); }
.factory-stats > div > span:last-child{ font-size:12.5px; color:var(--muted); letter-spacing:.02em; }
@media (max-width:900px){
  .factory-stats strong{ font-size:34px; }
  .factory-stats > div{ border-left:0; padding-left:0; padding-top:12px; border-top:1px solid var(--line); }
  .factory-stats > div:first-child{ border-top:0; padding-top:0; }
}

/* ===== v267 · D. 能力清单：描边卡片 → 1px 细线行式列表（Spectrum 手法） ===== */
.cert-bar{
  display:block; gap:0; border-top:1px solid var(--line);
}
.cert-item{
  display:grid; grid-template-columns:44px 1fr auto; align-items:center; gap:18px;
  background:transparent; border:0; border-bottom:1px solid var(--line);
  border-radius:0; padding:20px 4px; box-shadow:none;
}
.cert-item:hover{ background:var(--green-tint); }
.cert-item .cert-seal{
  width:44px; height:44px; border-radius:50%;
  background:var(--green-soft); color:var(--green-dark);
}
.cert-item strong{ font-size:17px; margin-bottom:3px; }
.cert-item small{ font-size:13.5px; }
.cert-note{ margin-top:16px; font-size:12.5px; color:var(--muted); }
@media (max-width:760px){
  .cert-item{ grid-template-columns:40px 1fr; gap:14px; padding:16px 2px; }
}
/* ===== v267 · F. 资质条：描边大字卡 → 1px 细线行式（Spectrum 手法；seal 已于 v238 隐藏，不设图标列） ===== */
.cert-bar{ display:block; gap:0; border-top:1px solid var(--line); }
.cert-bar .cert-item{
  display:grid; grid-template-columns:250px 1fr; align-items:baseline;
  flex-direction:row; text-align:left;
  gap:0 28px; padding:20px 8px; border-radius:0;
  background:transparent; border:0; border-bottom:1px solid var(--line);
  box-shadow:none; transition:background .2s ease;
}
.cert-bar .cert-item:hover{ transform:none; background:var(--green-tint); box-shadow:none; }
.cert-bar .cert-item::before{ display:none; }
.cert-bar .cert-item .cert-seal{ display:none !important; }
.cert-bar .cert-item > div{ display:contents; }
.cert-bar .cert-item strong{
  font-size:18px; font-weight:800; letter-spacing:0;
  margin-bottom:0; line-height:1.4; color:var(--ink);
}
.cert-bar .cert-item small{
  max-width:none; font-size:13.5px; line-height:1.7; color:var(--muted);
}
@media (max-width:760px){
  .cert-bar .cert-item{ grid-template-columns:1fr; gap:4px 0; padding:15px 4px; }
}

/* ===== v267 · G. 编辑式首屏高度释放（.hero-carousel 外层固定 84vh 对编辑式不适用） ===== */
.hero-edit.hero-carousel{ min-height:0; overflow:visible; padding:0 !important; }
.hero-edit .hero-slide{ position:relative; inset:auto; }
.hero-edit .hero-slide .hero-banner{ position:relative; inset:auto; min-height:0; }

/* v270 · 导航中段防挤压（900~1280 区间单项折行问题） */
@media (max-width:1280px){
  .nav-links{ gap:13px; font-size:14px; }
  .brand-sub{ display:none; }
}
@media (max-width:1024px){
  .nav-links{ gap:10px; font-size:13px; }
}

/* ===== v271 · ① 首屏上边距：全局奇偶 section 规则给 .hero-carousel 注入了 76px 上内边距，
   叠加 hero 自身 44px = 120px，首屏被压到二屏才见字。已在上面就地清零（padding:0 !important）。 ===== */

/* ===== v271 · ② 首栏精修：logo 68→54 释放上下留白，导航字距与搜索框降噪 ===== */
@media (min-width: 1600px){ .nav-links { gap: 22px; } }
.nav-search-input::placeholder { color: var(--muted); }
.nav-search-input:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(201,169,110,.16); }

/* ===== v271 · ③ 页脚热线行提级：号码放大 + 启用显示字体（金 + 宋体数字＝高级感），角色标签提亮 =====
   v277：左端加动作图标（首版 18px 裸线 + 单图标，压不住 27px 号码）。
   v279（西子：两个号码都是电话和微信）：每个号码前**并排两个图标**（电话 / 微信）。
   v281（西子「图标太小看不清」）：26px/14px 内容区实际渲染出来太小，
   → 圆 **26 → 34px**、内嵌图标 **14 → 20px**、描边与底色同步加深；图标描边线宽 1.9 保清晰。
   ⚠️ 尺寸走 padding 反推（34 − 7×2 = 20px 内容区），不用固定内层宽高，描边才不被裁。 ===== */
.ftb-in { justify-content: center; gap: 34px; padding: 24px 0; }
.ftb-in::before, .ftb-in::after { display: none; }
.ftb-tel { display: flex; align-items: center; gap: 15px; }
.ftb-tel .ftb-role { font-size: 14px; color: rgba(255,255,255,.70); }
/* 两个图标并排成组，组内间距小、组与号码间距大，形成「联系方式组」的视觉单元 */
.ftb-icos { display: flex; align-items: center; gap: 8px; flex: none; }
.ftb-ico {
  flex: none; box-sizing: border-box;
  width: 34px; height: 34px; padding: 7px;
  display: block; color: var(--green);
  background: rgba(201,169,110,.10);
  border: 1.5px solid rgba(201,169,110,.42);
  border-radius: 50%;
  transition: background .2s, border-color .2s;
}
/* 微信双气泡满幅图形比电话听筒（描边）视觉重量大，缩 1px 做光学等大 */
.ftb-ico-wx { padding: 8px; }
.ftb-tel:hover .ftb-ico { background: rgba(201,169,110,.20); border-color: rgba(201,169,110,.65); }
/* 号码与角色名做成两行块，与图标组等高对齐，避免图标被"吊"在中间。
   line-height 收紧到 1.1 让 27px 号码的行盒不再虚高，图标视觉中心才落回文本块中线。 */
.ftb-tel .ftb-txt { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.1; }
.ftb-tel b {
  font-family: var(--font-display); font-size: 27px; font-weight: 700;
  color: var(--green); letter-spacing: .02em;
}
.ftb-sep { height: 24px; background: rgba(255,255,255,.14); }
@media (max-width: 900px){
  .ftb-in { flex-direction: column; gap: 14px; padding: 22px 0; }
  .ftb-tel { gap: 13px; }
  .ftb-icos { gap: 7px; }
  .ftb-ico { width: 30px; height: 30px; padding: 6px; border-width: 1.4px; }
  .ftb-ico-wx { padding: 7px; }
  .ftb-in::before, .ftb-in::after { display: none; }
  .ftb-sep { display: none; }
  .ftb-tel b { font-size: 22px; }
}

/* ===== v271 · ④ 合作品牌墙：描边卡片 → 1px 细线网格（去 tile soup），
   并按各 logo 实际墨迹比例做「光学等大」——透明留白多的放大，满幅图缩小，视觉重量拉平。
   数值来源：PIL 逐图测 ink bbox 比例（h_ratio/w_ratio）反推 max-height。 ===== */
.brand-grid {
  grid-template-columns: repeat(6, 1fr); gap: 4px;
  border: 0; justify-items: stretch; margin-top: 34px;
}
.brand-item {
  background: transparent; border: 0; border-radius: 10px; box-shadow: none;
  max-width: none; height: 84px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s;
}
.brand-item:hover { transform: none; box-shadow: none; background: rgba(201,169,110,.07); }
.brand-item img { max-width: 80%; max-height: 36px; height: auto; }
/* A 透明徽章型（圆/方徽章，墨迹占画布 65~82%）→ 反推放大到墨迹视觉高 ≈34~36px */
.brand-item img[src*="chapanda"]{ max-height: 54px; }
.brand-item img[src*="nantong-rt"]{ max-height: 45px; }
.brand-item img[src*="xiamen-university"]{ max-height: 45px; }
.brand-item img[src*="marrybrown"]{ max-height: 42px; }
/* B 透明细线 / 文字型（线条细、视觉轻）→ 墨迹视觉高 ≈31~36px */
.brand-item img[src*="chery"]{ max-height: 50px; }
.brand-item img[src*="pepsi"]{ max-height: 38px; }
.brand-item img[src*="loreal"]{ max-height: 31px; max-width: 142px; }
.brand-item img[src*="wahaha"]{ max-height: 32px; }
/* C 实底方块型（画布即墨迹，fill .81~1.0，视觉重量是透明标的 2~3 倍）
   → 统一 36px 方形 + 圆角，成组后读作"徽章"而不是"色块" */
.brand-item img[src*="honorofkings"]{ max-height: 36px; max-width: 36px; border-radius: 8px; }
.brand-item img[src*="kuaishou"]{ max-height: 36px; max-width: 36px; border-radius: 8px; }
.brand-item img[src*="mhxy"]{ max-height: 36px; max-width: 36px; border-radius: 8px; }
/* 黑底横幅：用 clip-path 裁掉画布黑边，只留标志本体
   （原图 800x450，红标实测位于 x 20%~80% / y 28.4%~71.6%；不改原图） */
.brand-item img[src*="marvel"]{ max-height: 72px; clip-path: inset(28.4% 20%); }
@media (max-width: 768px){
  .brand-item { height: 76px; }
  .brand-item img { max-height: 30px; }
  .brand-item img[src*="honorofkings"],
  .brand-item img[src*="kuaishou"],
  .brand-item img[src*="mhxy"]{ max-height: 30px; max-width: 30px; }
  .brand-item img[src*="marvel"]{ max-height: 58px; }
  .brand-item img[src*="loreal"]{ max-width: 96px; }
}

/* ===== v283 · 五处打磨（西子 2026-09-17 截图反馈）===== */

/* -- 1 页脚微信图标：细线描边在 18px 内容区糊成一坨 → HTML 已换实底双气泡
      （viewBox 贴满美术），CSS 尺寸沿用 34px 圆 / 8px padding 不动。 -- */

/* -- 2 合作品牌墙：v271 光学等大比例不变，整组等比放大约 1.5 倍 -- */
.brand-item { height: 112px; }
.brand-item img { max-height: 54px; }
.brand-item img[src*="chapanda"]{ max-height: 78px; }
.brand-item img[src*="nantong-rt"]{ max-height: 66px; }
.brand-item img[src*="xiamen-university"]{ max-height: 66px; }
.brand-item img[src*="marrybrown"]{ max-height: 62px; }
.brand-item img[src*="chery"]{ max-height: 74px; }
.brand-item img[src*="pepsi"]{ max-height: 56px; }
.brand-item img[src*="loreal"]{ max-height: 46px; max-width: 210px; }
.brand-item img[src*="wahaha"]{ max-height: 48px; }
.brand-item img[src*="honorofkings"],
.brand-item img[src*="kuaishou"],
.brand-item img[src*="mhxy"]{ max-height: 54px; max-width: 54px; border-radius: 12px; }
.brand-item img[src*="marvel"]{ max-height: 104px; clip-path: inset(28.4% 20%); }
.brand-grid { gap: 6px; }
@media (max-width: 768px){
  .brand-item { height: 96px; }
  .brand-item img { max-height: 44px; }
  .brand-item img[src*="honorofkings"],
  .brand-item img[src*="kuaishou"],
  .brand-item img[src*="mhxy"]{ max-height: 44px; max-width: 44px; }
  .brand-item img[src*="marvel"]{ max-height: 84px; }
  .brand-item img[src*="loreal"]{ max-width: 150px; }
}

/* -- 3 products.html 系列快捷导航：取消全宽色带（贴边观感）→ 收成居中圆角浮卡。
      2026-09-18 重排：外层由「全透明」改为「半透白 + 毛玻璃」，避免吸顶时正文从
      浮卡两侧穿过去；内层胶囊改用暖调浅底，与白卡拉开层次。 -- */
.series-quick-nav{ top:70px; background:rgba(255,255,255,.88); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border-bottom:0; box-shadow:none; padding:0 24px; }
.series-quick-nav .container{ max-width:1200px; background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:0 6px 18px rgba(26,26,46,.07); padding:12px 18px; }
@media (max-width:768px){
  .series-quick-nav{ top:62px; padding:0 12px; }
  .series-quick-nav .container{ gap:8px; padding:10px 14px; }
}

/* -- 4 all-products：筛选区收紧 + 目录吸顶系列索引（圆角浮卡不贴边；
      索引为 div 不翻 section 奇偶；sticky 作用域到 body，由页脚 z-index 盖住收尾） -- */
.filter-wrap{ padding:26px 0 34px !important; }
.filter-bar{ padding:8px 0; }
.use-entry-band{ padding:34px 0; }
#series-ip{ scroll-margin-top:150px; }
body.pg-all .footer{ position:relative; z-index:60; }

/* -- 5 详情页：不折叠（正文可见性优先），压区块留白与卡片内边距 -- */
.pd-hero ~ section:not(.pd-judge-sec):not(.cta-band){ padding:44px 0 !important; }
.pd-hero ~ section .section-head{ margin-bottom:22px; }
.pd-hero ~ section .grid.grid-2{ gap:14px; }
.pd-hero ~ section .card{ padding:16px 18px; }
.pd-hero ~ section .spec-grid{ gap:10px; }
.pd-hero ~ section .spec-k{ padding:9px 12px; }
.pd-hero ~ section .spec-v{ padding:9px 14px; }
@media (max-width:768px){
  .pd-hero ~ section:not(.pd-judge-sec):not(.cta-band){ padding:32px 0 !important; }
}
/* ===== end v283 ===== */
/* ===== v284 · 页脚热线行重排 + 微信图标官方化（2026-09-17 西子截图 · 全站）=====
   ① 热线行「空」根因：09-16 为避免与 .cta-band 撞脸隐藏了「在线咨询」按钮并整行居中，
      两翼大片留白。本轮不恢复按钮（撞脸结论仍成立），改为「定制热线 | 号码组 | 轻说明」
      三段 space-between 撑满整行；说明只复用站内既有口径（两号均同支持电话与微信）。
   ② 微信图标：v283 自绘双气泡形状不准（浮窗触发条那份旧路径更是糊成一坨），
      全站统一换 Font Awesome weixin 官方路径（CC BY 4.0）：页脚 210 处 + wechat-float.js。 */
.ftb-in { justify-content: space-between; gap: 18px; padding: 22px 0; }
.ftb-in::before, .ftb-in::after { content: none; }
.ftb-cap { flex: none; font-size: 13px; font-weight: 700; letter-spacing: 4px; color: var(--green); }
.ftb-note { flex: none; font-size: 13px; letter-spacing: 1px; color: rgba(255,255,255,.52); }
@media (max-width: 900px){
  .ftb-in { flex-direction: column; gap: 14px; padding: 22px 0; }
  .ftb-cap { letter-spacing: 3px; }
  .ftb-note { text-align: center; }
}


.footer-main { grid-template-columns: 1fr 296px; gap: 26px 46px; }
.footer-links { grid-template-columns: repeat(4, 1fr); gap: 28px; }
.footer-bottom { justify-content: space-between; gap: 12px; }
.footer-bottom p { flex: none; }
@media (max-width: 1180px) {
  .footer-main { gap: 24px 34px; }
}
@media (max-width: 900px) {
  .footer-main { grid-template-columns: 1fr; gap: 30px; }
  .footer-links { grid-template-columns: repeat(2, 1fr); }
  .footer-bottom { justify-content: flex-start; }
}

/* --- v291 all-products 系列索引改侧栏（2026-09-17 西子「我意思只要把这一行放侧栏就行」）---
   结构：hero~giftset 的 7 个 section 全部包进 .ap-page（唯一父）+ 相对顺序不变
   → nth-of-type 编号从 1 重数与 body 时代完全一致，奇偶零漂移。
   布局：4 列轨道 [弹性边距 | 侧栏 200px | 内容 minmax(0,1200px) | 弹性边距]，
   大屏整组居中、小屏内容自动收缩；hero 跨 1/-1 全宽。
   aside 外壳跨 row2 起 20 行（row-gap:0，空行高 0 无副作用）stretch 撑满，
   内壳 .ap-side-in sticky 吸附。≤980px 回单列、侧栏变横向胶囊条。删本段即回滚。*/
.ap-page{
  display:grid;
  grid-template-columns: minmax(12px,1fr) 200px minmax(0,1200px) minmax(12px,1fr);
  column-gap:24px; row-gap:0;
}
.ap-page > .page-hero{ grid-column:1 / -1; }
.ap-page > :not(.page-hero):not(.ap-side){ grid-column:3; min-width:0; }
.ap-side{ grid-column:2; grid-row:auto / span 20; min-width:0; }
.ap-side-in{
  position:sticky; top:108px;
  background:#fff; border:1px solid var(--line); border-radius:14px;
  padding:16px 14px; box-shadow:0 6px 18px rgba(26,26,46,.07);
}
.ap-side-t{ margin:0 0 10px; padding-left:10px; border-left:3px solid var(--green); font-size:15px; font-weight:700; color:var(--ink); }
.ap-side-in a{
  display:flex; justify-content:space-between; align-items:center; gap:8px;
  padding:9px 12px; border-radius:10px; margin-bottom:2px;
  color:var(--ink-2); font-size:14px; font-weight:600; text-decoration:none; transition:.15s;
}
.ap-side-in a:hover{ background:var(--green-soft); color:var(--green-dark); }
.ap-side-in a span{ flex:none; font-size:12px; font-weight:700; color:var(--muted); }
@media (max-width:980px){
  .ap-page{ display:block; }
  .ap-side{ margin:0 0 6px; padding:0 12px; }
  .ap-side-in{
    position:static; display:flex; gap:8px; overflow-x:auto; scrollbar-width:none;
    border-radius:12px; padding:10px 12px;
  }
  .ap-side-in::-webkit-scrollbar{ display:none; }
  .ap-side-t{ display:none; }
  .ap-side-in a{ flex:0 0 auto; display:inline-flex; border:1px solid var(--line); white-space:nowrap; }
}

/* --- v292 ① all-products 侧栏简化（2026-09-17 西子「简单设计，不要占这么大篇幅」）---
   去白卡（底/边/影全去）→ 一列细字；标题降为 12px 灰；列宽 200→168。删本段即回 v291 卡片版。*/
.ap-page{ grid-template-columns: minmax(12px,1fr) 168px minmax(0,1200px) minmax(12px,1fr); }
.ap-side-in{
  background:transparent; border:0; border-radius:0;
  padding:2px 0; box-shadow:none;
}
.ap-side-t{
  margin:0 0 4px; padding-left:8px; border-left:2px solid var(--green);
  font-size:12px; font-weight:700; color:var(--muted); letter-spacing:1px;
}
.ap-side-in a{
  padding:4px 8px; border-radius:8px; margin-bottom:0;
  color:var(--ink-2); font-size:13px;
}

/* --- v292 ② about 快捷导航 悬浮→固定（西子「改成固定」）---
   5100 行 v283 块是 products/about 共用的悬浮浮卡+sticky；本块只对 about 生效
   （该 aria-label 全站仅 about.html 使用）。固定后锚点落位偏移 124→24 联动修正。*/
nav[aria-label="本页快捷导航"]{ position:relative; top:auto; background:var(--bg); }
/* v296：static 会让 z-index:40 失效 → 后继 section::before 金斜切饰条（skewY 上翘约 17px）
   直接画穿导航条；且 v283 误伤的透明底让饰条透出来。relative 恢复层叠 + 页面同色底挡线。 */
section[id^="about-"]{ scroll-margin-top:24px; }

/* --- v295 all-products 侧栏再简化（2026-09-17 西子「设计的简单点，不要占那么大空间」）---
   标题「产品系列」与页 hero eyebrow/系列区块重复 → DOM 已删；
   数量数字与各系列区块「共 N 款」重复 → DOM 已删；
   列宽 168→104，内容列回到接近全宽。删本段即回 v292。*/
.ap-page{ grid-template-columns: minmax(12px,1fr) 104px minmax(0,1200px) minmax(12px,1fr); }
.ap-side-in{ padding:0; }
.ap-side-in a{ padding:3px 6px; font-size:12.5px; color:var(--muted); }
.ap-side-in a:hover{ color:var(--green-dark); background:transparent; }

/* ===== v298 · P2 移动端热区 + all-products 折叠筛选（2026-09-18）=====
   ① 移动端 .nav-links a / .footer-col li a 热区仅 17/19px → 提到 40-44px，避免误触。
   ② all-products 移动端筛选条展开 462px 把首卡推到 ~1298px → 收成「筛选条件」折叠按钮。*/
.filter-toggle{ display:none; align-items:center; justify-content:space-between; gap:8px; width:100%; margin:0 0 10px; padding:13px 16px; border:1px solid var(--line); border-radius:10px; background:#fff; font-size:15px; font-weight:700; color:var(--ink); cursor:pointer; }
.filter-toggle .ar{ transition:transform .2s; }
.filter-wrap.open .filter-toggle .ar{ transform:rotate(180deg); }
@media (max-width:768px){
  .nav-links a{ padding:13px 2px; min-height:44px; display:flex; align-items:center; }
  .footer-col li a{ display:block; padding:11px 0; min-height:40px; }
  .filter-toggle{ display:flex; }
  .filter-body{ display:none; }
  .filter-wrap.open .filter-body{ display:block; }
}