/* ============================================================
   锐码汇科 · B2B 防伪标签官网 — 全局样式
   设计风格：简约商务科技风
   主色：深蓝 #0F3460  辅助浅灰 #F5F7FA  强调亮蓝 #2E6FB7
   说明：本文件为全站共享样式，修改配色/间距只需改下方变量即可。
   ============================================================ */

/* ---------- 1. 设计变量（集中管理，便于统一调整） ---------- */
:root {
  /* 主品牌色（深海科技蓝，核心） */
  --c-primary: #1960A8;      /* 主色：高亮卡片背景、主按钮、重点标题 */
  --c-primary-2: #124880;    /* 主色加深：hover、点击交互 */
  --c-accent: #4088C8;       /* 主色浅变体：图标、次要强调 */
  --c-accent-soft: #E9F1F9;  /* 浅蓝底，用于模块底色 / 图标圆底 */
  /* 中性色系（页面基底 / 文字 / 背景） */
  --c-bg: #F5F7FA;           /* 模块浅灰底色 */
  --c-white: #FFFFFF;        /* 页面/卡片底色白 */
  --c-text: #333333;         /* 大标题文字（深灰近黑） */
  --c-text-muted: #666666;   /* 正文描述文字（中灰） */
  --c-text-light: #888888;   /* 辅助小字（浅灰） */
  --c-border: #E5E7EB;       /* 分割线 / 边框色 */
  --c-title: #5D5D5D;        /* 各模块大标题色 */
  /* 辅助点缀色（小面积：图标、标签，勿大面积用） */
  --c-teal: #28A9A1;         /* 浅青科技绿 */
  --c-orange: #E68A46;       /* 低饱和暖橙 */

  --radius: 12px;            /* 统一圆角 */
  --shadow: 0 8px 24px rgba(25, 96, 168, 0.08);
  --shadow-hover: 0 14px 34px rgba(25, 96, 168, 0.16);

  --maxw: 1200px;            /* 内容最大宽度 */
  --nav-h: 68px;             /* 顶部导航高度 */

  /* 行业解决方案卡片色系（案例展示页 .ind-grid 专用，按卡片顺序 1~12） */
  --ind-1: #4F6791;          /* 1 平台 · 蓝灰 */
  --ind-2: #D66144;          /* 2 电子电器 · 砖红橙 */
  --ind-3: #FFD338;          /* 3 美妆 · 明黄 */
  --ind-4: #363795;          /* 4 食品饮料 · 深靛蓝 */
  --ind-5: #5796DD;          /* 5 IP 授权 · 天蓝 */
  --ind-6: #84615A;          /* 6 服装珠宝 · 棕 */
  --ind-7: #F9E7D4;          /* 7 日用品 · 米白 */
  --ind-8: #3B4A5B;          /* 8 酒类茶叶 · 深灰蓝 */
  --ind-9: #E58F2D;          /* 9 医药保健 · 橙 */
  --ind-10: #407C96;         /* 10 宠物用品 · 青蓝 */
  --ind-11: #585272;         /* 11 家装 · 紫灰 */
  --ind-12: #445570;         /* 12 汽配 · 深蓝灰 */
  --page-bg: #F8FAFC;        /* 板块页面底色 */
  --card-text: #FFFFFF;      /* 卡片文字（浅底卡另有深字变量） */
  --card-text-dark: #2B2B2B; /* 浅底色卡片文字（明黄 / 米白） */

  --font: "Microsoft YaHei", "PingFang SC", "Helvetica Neue", Arial, sans-serif;
}

/* ---------- 2. 基础重置 ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font);
  color: var(--c-text);
  background: var(--c-white);
  line-height: 1.7;
  font-size: 15px;
}
img { max-width: 100%; display: block; }
a { color: var(--c-accent); text-decoration: none; transition: color .2s; }
a:hover { color: var(--c-primary); }
ul { list-style: none; }
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }

/* 通用区块标题（小标签 + 大标题 + 副标题） */
.section { padding: 72px 0; }
.section--gray { background: var(--c-bg); }
.section--blue { background: var(--c-primary); color: var(--c-white); }
.section-head { text-align: center; max-width: 760px; margin: 0 auto 44px; }
.section-head .eyebrow {
  display: inline-block; font-size: 13px; letter-spacing: 2px;
  color: var(--c-accent); font-weight: 700; margin-bottom: 12px;
  text-transform: uppercase;
}
/* 模块标题统一参考样式：标题下方深色横线 + 中间叠橙色小块 */
.section-head h2 {
  position: relative; display: inline-block; padding-bottom: 20px;
  font-size: 30px; color: var(--c-title); margin-bottom: 12px;
}
/* 核心产品模块主标题调细 */
.section--core .section-head h2 { font-weight: 400; }
.section-head h2::after {
  content: ""; position: absolute; left: 50%; transform: translateX(-50%); bottom: 0;
  width: 230px; height: 2px; background: #3A3A3A;
}
.section-head h2::before {
  content: ""; position: absolute; left: 50%; transform: translateX(-50%); bottom: -2px;
  width: 30px; height: 6px; background: #EC993E; z-index: 1;
}
.section--blue .section-head h2,
.section--blue .section-head .eyebrow { color: var(--c-white); }
.section-head p { color: var(--c-text-muted); font-size: 15px; }
.section--blue .section-head p { color: rgba(255,255,255,.8); }

/* ---------- 3. 按钮 ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 28px; border-radius: 8px; font-size: 15px; font-weight: 600;
  cursor: pointer; border: 1px solid transparent; transition: all .2s; white-space: nowrap;
}
.btn--primary { background: var(--c-primary); color: #fff; }
.btn--primary:hover { background: var(--c-primary-2); color: #fff; }
/* 首页 banner 按钮渐变 */
.hero-text .btn--primary {
  background: linear-gradient(90deg, #3497f0 0%, #4480fe 100%);
}
.hero-text .btn--primary:hover {
  background: linear-gradient(90deg, #2d86e0 0%, #3a72f0 100%);
}
.btn--ghost { background: transparent; color: var(--c-primary); border-color: var(--c-primary); }
.btn--ghost:hover { background: var(--c-primary); color: #fff; }
.btn--light { background: #fff; color: var(--c-primary); }
.btn--light:hover { background: var(--c-accent-soft); }
.btn--block { width: 100%; }

/* ---------- 4. 顶部导航 ---------- */
.header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--c-border);
}
.nav { display: flex; align-items: center; justify-content: space-between; height: var(--nav-h); }
.logo { display: flex; align-items: center; gap: 10px; font-weight: 800; }
.logo .logo-img { height: 48px; width: auto; display: block; }
.logo .logo-mark {
  width: 36px; height: 36px; border-radius: 8px; background: var(--c-primary);
  color: #fff; display: flex; align-items: center; justify-content: center; font-size: 18px;
}
.logo .logo-text { font-size: 19px; color: var(--c-primary); letter-spacing: 1px; }
.logo .logo-text small { display: block; font-size: 11px; color: var(--c-text-muted); font-weight: 500; letter-spacing: 2px; }

.nav-menu { display: flex; align-items: center; gap: 4px; }
.nav-menu > li > a {
  display: block; padding: 10px 14px; color: #000; font-size: 15px; border-radius: 6px;
}
.nav-menu > li > a:hover { color: #1a8fed; background: transparent; }
.nav-menu > li > a.active { color: #1a8fed; background: transparent; }
.nav-phone {
  display: flex; align-items: center; gap: 8px;
  color: #fff; font-weight: 700; font-size: 15px;
  background: linear-gradient(90deg, #3497f0, #4480fe); border-radius: 8px;
  padding: 10px 18px; margin-left: 8px; white-space: nowrap;
  transition: filter .2s ease;
}
.nav-phone:hover { filter: brightness(.94); color: #fff; }
.nav-phone svg { width: 18px; height: 18px; }
.nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 8px; }
.nav-toggle span { display: block; width: 24px; height: 2px; background: var(--c-primary); margin: 5px 0; }

/* ---------- 5. 首屏 Banner（全幅背景图模式，参考 fanchi315 首页 banner：图片占据整块，文字叠加） ---------- */
.hero {
  position: relative; overflow: hidden; color: var(--c-text); height: 656px;
  background: #EDF3FB url("../images/banner-home-001.png") center / cover no-repeat;
}
/* 浅色背景图：文字为深色，无需暗色蒙版 */
.hero::after { content: none; }
.hero .container {
  position: relative; z-index: 2; max-width: var(--maxw); margin: 0 auto; text-align: left;
  padding: 118px 20px; min-height: 100%; display: flex; flex-direction: column;
  align-items: flex-start; justify-content: center;
}
.hero-text { max-width: 800px; }
.hero-text .tag {
  display: inline-block; background: rgba(25,96,168,.10); color: var(--c-primary);
  padding: 6px 14px; border-radius: 20px; font-size: 13px; margin-bottom: 18px;
}
.hero-text h1 { font-size: 42px; line-height: 1.25; margin-bottom: 18px; color: #151515; }
.hero-text h1 .hl { color: #151515; }
.hero-text p { font-size: 17px; color: var(--c-text-muted); margin: 0 0 28px; max-width: 640px; line-height: 1.8; }
.hero-text .hero-btns { display: flex; gap: 14px; flex-wrap: wrap; justify-content: flex-start; }
.hero-text .hero-note { margin-top: 22px; font-size: 14px; color: #999; }
.hero-media { display: none; }

/* ---------- 6. 卡片网格 ---------- */
.grid { display: grid; gap: 24px; }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }

/* 业务卡片 */
.biz-card {
  background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius);
  padding: 30px 24px; transition: all .25s; height: 100%;
}
.biz-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-hover); border-color: var(--c-accent); }
.biz-card .ic {
  width: 54px; height: 54px; border-radius: 12px; background: var(--c-accent-soft);
  display: flex; align-items: center; justify-content: center; margin-bottom: 18px; color: var(--c-primary);
}
.biz-card .ic svg { width: 28px; height: 28px; }
.biz-card h3 { font-size: 19px; margin-bottom: 10px; color: var(--c-primary); }
.biz-card .tagline { display: block; font-size: 13px; font-weight: 600; letter-spacing: .5px; color: var(--c-accent); margin-bottom: 8px; }
.biz-card p { color: var(--c-text-muted); font-size: 14px; }
.biz-card .more { display: inline-block; margin-top: 16px; font-size: 14px; font-weight: 600; color: var(--c-accent); }

/* ---------- 核心产品：4 栏固定 276×432，无间距拼接成一条卡片带 ---------- */
.prod-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.prod-grid { display: flex; gap: 0; width: max-content; margin: 0 auto; }

/* ---------- 图片式产品卡（核心产品模块，参考 fanchi315 核心产品：深色背景图 + 白字 + 白色描边按钮） ---------- */
.prod-card {
  position: relative; border-radius: 0; overflow: hidden;
  width: 276px; height: 432px; flex: 0 0 276px;
  display: flex; flex-direction: column; justify-content: flex-start;
  border: none; transition: all .25s;
  text-decoration: none; color: inherit; cursor: pointer;
}
.prod-card:hover > img { transform: scale(1.05); }
/* 背景图铺满整卡 */
.prod-card > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; transition: transform .3s ease; }
/* 已按需求移除蓝色遮层，白字可读性由文字阴影保证 */
.prod-card .body { position: relative; z-index: 2; padding: 54px 26px 30px; color: #fff;
  text-shadow: 0 1px 7px rgba(0,0,0,.55);
  display: flex; flex-direction: column; align-items: center; text-align: center; }
/* 线性图标（无框），置于标题上方，放大 3 倍 */
.prod-card .ic { width: 138px; height: 138px; border-radius: 0; background: none;
  display: flex; align-items: center; justify-content: center; color: #fff; margin-bottom: 24px; }
.prod-card .ic svg { width: 72px; height: 72px; stroke-width: 2; }
/* 锁定线宽为真实 2px，不被图标放大缩放 */
.prod-card .ic svg * { vector-effect: non-scaling-stroke; }
/* 仅「产品质量溯源」图标缩小到 0.8 倍（占位不变，不影响文字间距） */
.prod-card .ic--sm { transform: scale(0.8); transform-origin: center; }
.prod-card h3 { color: #fff; font-size: 20px; font-weight: 400; margin-top: -58px; margin-bottom: 38px; }
.prod-card p { color: rgba(255,255,255,.88); font-size: 14px; line-height: 1.7; margin-bottom: 42px; }
/* 白色描边空心按钮：固定 142×38 */
.prod-card .more { color: #fff; border: 1px solid rgba(255,255,255,.7); border-radius: 999px;
  width: 142px; height: 38px; padding: 0; display: inline-flex; align-self: center;
  align-items: center; justify-content: center; text-shadow: none;
  font-size: 14px; font-weight: 600; transition: all .2s; }
.prod-card .more:hover { background: #fff; color: var(--c-primary); }

/* 优势列表（左右图文） */
.adv-item { display: flex; gap: 18px; align-items: flex-start; padding: 18px 0; border-bottom: 1px dashed var(--c-border); }
.adv-item:last-child { border-bottom: none; }
.adv-item .num {
  flex: 0 0 44px; width: 44px; height: 44px; border-radius: 10px; background: var(--c-primary);
  color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 18px;
}
.adv-item h4 { font-size: 17px; color: var(--c-primary); margin-bottom: 4px; }
.adv-item p { color: var(--c-text-muted); font-size: 14px; }

/* 行业卡片（about.html、fangwei-cailiao.html 的「为什么选择我们/配套服务」仍在使用） */
.ind-card {
  background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius);
  padding: 26px 22px; text-align: center; transition: all .25s;
}
.ind-card:hover { box-shadow: var(--shadow); transform: translateY(-4px); }
.ind-card .dot { width: 46px; height: 46px; border-radius: 50%; background: var(--c-accent-soft); margin: 0 auto 14px; display: flex; align-items: center; justify-content: center; color: var(--c-primary); }
.ind-card .dot svg { width: 24px; height: 24px; }
.ind-card h3 { font-size: 17px; color: var(--c-primary); margin-bottom: 6px; }
.ind-card p { font-size: 13px; color: var(--c-text-muted); }

/* ---------- 4b. 一站式全案定制化解决方案（2 行 2 列细边框拼接，无配图，第 2 卡深蓝高亮） ---------- */
.solution-grid {
  grid-template-columns: repeat(2, 1fr);
  gap: 0; border-top: 1px solid var(--c-border); border-left: 1px solid var(--c-border);
}
/* 2×2 布局下卡片更宽，适当提高内边距与最小高度 */
.solution-grid .sol-card { padding: 34px 32px 30px; min-height: 250px; }
.sol-card {
  background: #fff; border-right: 1px solid var(--c-border); border-bottom: 1px solid var(--c-border);
  border-radius: 0; padding: 30px 28px 26px; min-height: 230px;
  display: flex; flex-direction: column; transition: all .25s;
  text-decoration: none; color: inherit;
}
/* 悬停：白卡整体变蓝（主色底 + 白字） */
.sol-card:hover { background: var(--c-primary); border-color: var(--c-primary); box-shadow: var(--shadow-hover); position: relative; z-index: 1; }
.sol-card:hover h3 { color: #fff; }
.sol-card:hover p { color: rgba(255,255,255,.88); }
.sol-card:hover .sol-more { color: #fff; }
.sol-card:hover .sol-more:hover { background: #fff; color: var(--c-primary); }
.sol-card h3 { font-size: 18px; color: var(--c-accent); margin-bottom: 14px; font-weight: 700; }
.sol-card p { font-size: 14px; color: var(--c-text-muted); line-height: 1.8; margin: 0 0 18px; }
.sol-card .sol-more {
  margin-top: auto; width: 34px; height: 34px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: #8A8A8A; transition: all .25s;   /* 未点击/未悬停：中性灰 */
}
.sol-card .sol-more svg { width: 22px; height: 22px; }
.sol-card .sol-more:hover { background: var(--c-accent); color: #fff; }
/* 高亮主推卡片 / 点击选中态（深蓝底白字） */
.sol-card--hl,
.sol-card.is-active { background: var(--c-primary); border-color: var(--c-primary); }
.sol-card--hl h3,
.sol-card.is-active h3 { color: #fff; }
.sol-card--hl p,
.sol-card.is-active p { color: rgba(255,255,255,.88); }
.sol-card--hl .sol-more,
.sol-card.is-active .sol-more { color: #fff; }
.sol-card--hl .sol-more:hover,
.sol-card.is-active .sol-more:hover { background: #fff; color: var(--c-primary); }
/* 卡片可点击选中：鼠标手势 */
.sol-card { cursor: pointer; }
/* 悬停某一卡时，未悬停的主推卡（is-active）回归白底，确保“只有当前指向的变蓝” */
.solution-grid:has(.sol-card:hover) .sol-card.is-active:not(:hover) {
  background: #fff; border-color: var(--c-border); box-shadow: none;
}
.solution-grid:has(.sol-card:hover) .sol-card.is-active:not(:hover) h3 { color: var(--c-accent); }
.solution-grid:has(.sol-card:hover) .sol-card.is-active:not(:hover) p { color: var(--c-text-muted); }
.solution-grid:has(.sol-card:hover) .sol-card.is-active:not(:hover) .sol-more { color: var(--c-accent); }
.solution-foot { text-align: center; margin-top: 40px; }
/* 了解更多按钮：固定 152×42，白底蓝描边 #004D9B */
.solution-foot .sol-foot-btn {
  background: #fff; color: #004D9B; border: 1px solid #004D9B;
  width: 152px; height: 42px; padding: 0; border-radius: 0;
}
.solution-foot .sol-foot-btn:hover { background: #004D9B; color: #fff; border-color: #004D9B; }

/* ---------- 7. 客户案例 ---------- */
.case-card {
  background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius);
  overflow: hidden; transition: all .25s; display: flex; flex-direction: column;
}
.case-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-6px); }
.case-card img { width: 100%; height: 200px; object-fit: cover; }
.case-card .body { padding: 22px; }
.case-card .badge { display: inline-block; font-size: 12px; padding: 3px 10px; border-radius: 20px; background: var(--c-accent-soft); color: var(--c-primary); margin-bottom: 10px; font-weight: 600; }
.case-card .badge--cross { background: #FDEFE0; color: #C2710C; }
.case-card h3 { font-size: 18px; color: var(--c-primary); margin-bottom: 8px; }
.case-card p { font-size: 14px; color: var(--c-text-muted); }
.case-card .link { margin-top: 14px; font-weight: 600; color: var(--c-accent); font-size: 14px; }

/* ---------- 8. 工厂简介（图文） ---------- */
.about-split { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.about-split img { border-radius: var(--radius); box-shadow: var(--shadow); }
.about-split h2 {
  position: relative; display: inline-block; padding-bottom: 8px;
  font-size: 28px; color: var(--c-title); margin-bottom: 16px;
}
.about-split p { color: var(--c-text-muted); margin-bottom: 14px; }
.about-site { margin-top: 6px; font-weight: 600; color: var(--c-text); }
.about-site a { color: var(--c-primary); text-decoration: none; }
.about-site a:hover { text-decoration: underline; }
.stat-row { display: flex; gap: 28px; margin-top: 22px; flex-wrap: wrap; }
.stat-row .stat strong { display: block; font-size: 30px; color: var(--c-accent); }
.stat-row .stat span { font-size: 13px; color: var(--c-text-muted); }

/* ---------- 9. 新闻列表（左列表 + 分页） ---------- */
.news-layout { display: grid; grid-template-columns: 1fr 300px; gap: 40px; }
.news-item { display: grid; grid-template-columns: 160px 1fr; gap: 20px; padding: 22px 0; border-bottom: 1px solid var(--c-border); }
.news-item img { width: 160px; height: 110px; object-fit: cover; border-radius: 10px; }
.news-item .meta { font-size: 13px; color: var(--c-text-muted); margin-bottom: 6px; }
.news-item .meta .cat { color: var(--c-accent); font-weight: 600; margin-right: 12px; }
.news-item h3 { font-size: 18px; color: var(--c-primary); margin-bottom: 8px; }
.news-item h3 a { color: inherit; }
.news-item p { font-size: 14px; color: var(--c-text-muted); }
.news-side .side-box { background: var(--c-bg); border-radius: var(--radius); padding: 22px; margin-bottom: 22px; }
.news-side .side-box h4 { font-size: 16px; color: var(--c-primary); margin-bottom: 14px; }
.news-side .side-box li { padding: 8px 0; border-bottom: 1px dashed var(--c-border); font-size: 14px; }
.news-side .side-box li:last-child { border-bottom: none; }
.news-side .side-box li a { color: var(--c-text); }
.news-side .side-box li a:hover { color: var(--c-accent); }

/* 分页 */
.pager { display: flex; gap: 8px; justify-content: center; margin-top: 30px; }
.pager a { min-width: 38px; height: 38px; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--c-border); border-radius: 8px; color: var(--c-text); font-size: 14px; }
.pager a.active, .pager a:hover { background: var(--c-primary); color: #fff; border-color: var(--c-primary); }

/* ---------- 10. 联系板块 / 表单 ---------- */
.contact-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: start; }
.contact-info .ci { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 22px; }
.contact-info .ci .ic { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 10px; background: var(--c-accent-soft); display: flex; align-items: center; justify-content: center; color: var(--c-title); }
.contact-info .ci .ic svg { width: 22px; height: 22px; }
.contact-info .ci strong { display: block; color: var(--c-title); font-size: 16px; }
.contact-info .ci span { color: var(--c-text-muted); font-size: 14px; }

.form-card { background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius); padding: 30px; box-shadow: var(--shadow); }
.form-row { margin-bottom: 18px; }
.form-row label { display: block; font-size: 14px; color: var(--c-title); margin-bottom: 8px; font-weight: 600; }
.form-row label .req { color: #E04848; }
.form-control {
  width: 100%; padding: 12px 14px; border: 1px solid var(--c-border); border-radius: 8px;
  font-size: 15px; font-family: var(--font); color: var(--c-text); background: #fff; transition: border-color .2s;
}
.form-control:focus { outline: none; border-color: var(--c-accent); box-shadow: 0 0 0 3px var(--c-accent-soft); }
textarea.form-control { resize: vertical; min-height: 110px; }
.form-note { font-size: 13px; color: var(--c-text-muted); margin-top: 10px; text-align: center; }
.form-success { display: none; background: #E7F6EC; color: #1E7A46; border: 1px solid #B7E3C4; padding: 12px 14px; border-radius: 8px; margin-bottom: 16px; font-size: 14px; }

/* ---------- 11. 页脚（参考 panpass：深灰底 + 品牌联系 + 多栏链接 + 官方微信） ---------- */
.footer { background: #333333; color: rgba(255,255,255,.72); padding: 56px 0 0; }
.footer-grid {
  display: grid; grid-template-columns: 1.7fr 1fr 1.35fr 1fr auto;
  gap: 44px; align-items: start;
}
.footer h4 { color: #fff; font-size: 16px; margin-bottom: 18px; }
/* 品牌栏 */
.f-brand .f-logo { margin-bottom: 22px; }
.f-brand .f-logo .logo-text { color: #fff; }
.f-brand .f-logo .logo-text small { color: rgba(255,255,255,.55); }
.f-contacts li { display: flex; gap: 10px; padding: 7px 0; font-size: 14px; line-height: 1.7; }
.f-contacts svg { flex: 0 0 16px; width: 16px; height: 16px; margin-top: 4px; color: rgba(255,255,255,.72); }
.f-contacts a { color: rgba(255,255,255,.72); }
.f-contacts a:hover { color: #fff; }
/* 链接栏 */
.footer .f-links li { padding: 7px 0; }
.footer .f-links a { color: rgba(255,255,255,.72); font-size: 14px; }
.footer .f-links a:hover { color: #fff; }
.footer .f-links--2col { display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px; }
.footer .f-links .f-more a { color: #fff; }
.footer .f-links .f-more a:hover { color: #fff; }
.footer-bottom {
  margin-top: 44px; border-top: 1px solid rgba(255,255,255,.12); padding: 20px 0;
  text-align: center; font-size: 13px; color: rgba(255,255,255,.6);
}
.footer-bottom a { color: rgba(255,255,255,.8); }
.footer-bottom .icp { color: rgba(255,255,255,.7); }

/* ---------- 12. 文章详情页 ---------- */
.article { max-width: 820px; margin: 0 auto; }
.article .a-meta { color: var(--c-text-muted); font-size: 14px; margin: 14px 0 24px; }
.article .a-meta .cat { color: var(--c-accent); font-weight: 600; margin-right: 14px; }
.article p { margin-bottom: 18px; color: var(--c-text); }
.article h3 { font-size: 22px; color: var(--c-primary); margin: 30px 0 14px; }
.article ul.list { margin: 0 0 18px 20px; list-style: disc; }
.article ul.list li { margin-bottom: 8px; }

/* 面包屑 */
.crumb { background: var(--c-bg); padding: 14px 0; font-size: 14px; color: var(--c-text-muted); }
.crumb a { color: var(--c-text-muted); }
.crumb span { margin: 0 8px; }

/* 页面标题区（子页面通用） */
.page-hero { background: var(--c-primary); color: #fff; padding: 56px 0; }
.page-hero h1 { font-size: 32px; margin-bottom: 10px; }
.page-hero p { color: rgba(255,255,255,.82); font-size: 16px; max-width: 680px; }

/* 内页 banner（参考 panpass brandsecurity-2：深蓝底 + 右侧仓库图，左文案 + 双按钮） */
.sub-banner {
  position: relative; height: 360px; display: flex; align-items: center;
  background: #0B2E52 url("../images/label-baaner-01.png") center/cover no-repeat;
}
.sub-banner h1 { font-size: 36px; font-weight: 700; color: #fff; letter-spacing: 1px; }
.sub-banner h1 em { font-style: normal; color: #EC993E; }
.sub-banner .container { text-align: left; max-width: none; margin: 0; padding: 0 40px 0 368px; }
.sub-banner .sub-title { margin-top: 16px; font-size: 24px; color: #fff; }
.sub-banner .sub-desc { margin-top: 12px; font-size: 14px; color: rgba(255,255,255,.75); max-width: 640px; }
.sub-banner-btns { margin-top: 28px; display: flex; gap: 16px; }
.sub-banner .btn-solid,
.sub-banner .btn-ghost {
  display: inline-flex; align-items: center; justify-content: center;
  height: 42px; padding: 0 30px; font-size: 15px; border-radius: 3px;
  transition: all .25s;
}
.sub-banner .btn-solid { background: var(--c-primary); color: #fff; }
.sub-banner .btn-solid:hover { background: var(--c-primary-2); }
.sub-banner .btn-ghost { border: 1px solid rgba(255,255,255,.85); color: #fff; }
.sub-banner .btn-ghost:hover { background: rgba(255,255,255,.12); }
.sub-banner .online-tag {
  position: absolute; right: 0; bottom: 32px; z-index: 2;
  writing-mode: vertical-rl; letter-spacing: 4px;
  padding: 14px 8px; font-size: 13px; color: #fff;
  background: rgba(255,255,255,.18); border-radius: 3px 0 0 3px;
  transition: background .25s;
}
.sub-banner .online-tag:hover { background: var(--c-primary); }
/* 溯源系统页 banner：仅替换背景图（可上传替换 images/System-banner-01.png） */
.sub-banner--suyuan { background-image: url("../images/System-banner-01.png"); }
/* 一物一码溯源系统页专用新 banner 图（其余平台页仍用 System-banner-01） */
body[data-page="suyuan"] .sub-banner--suyuan { background-image: url("../images/System-banner-02.png"); }
.sub-banner--suyuan h1,
.sub-banner--suyuan .sub-title { color: #151515; }
.sub-banner--suyuan h1 em { color: #151515; }
.sub-banner--suyuan .sub-desc { color: #555; }
.sub-banner--suyuan .online-tag { color: #151515; background: rgba(0,0,0,.10); }
.sub-banner--suyuan .online-tag:hover { background: var(--c-primary); color: #fff; }
/* 溯源页 banner「立即咨询」按钮与首页 banner「立即获取方案」一致（蓝渐变） */
.sub-banner--suyuan .btn-solid {
  background: linear-gradient(90deg, #3497f0 0%, #4480fe 100%);
  border-color: transparent;
}
.sub-banner--suyuan .btn-solid:hover {
  background: linear-gradient(90deg, #2d86e0 0%, #3a72f0 100%);
}
/* 防伪材料页 banner「立即咨询」按钮与首页 banner「立即获取方案」一致（蓝渐变） */
body[data-page="cailiao"] .sub-banner .btn-solid {
  background: linear-gradient(90deg, #3497f0 0%, #4480fe 100%);
  border-color: transparent;
}
body[data-page="cailiao"] .sub-banner .btn-solid:hover {
  background: linear-gradient(90deg, #2d86e0 0%, #3a72f0 100%);
}

/* 参数表 */
.spec-table { width: 100%; border-collapse: collapse; margin-top: 8px; }
.spec-table th, .spec-table td { border: 1px solid var(--c-border); padding: 14px 16px; text-align: left; font-size: 14px; }
.spec-table th { background: var(--c-accent-soft); color: var(--c-primary); width: 200px; font-weight: 600; }
.spec-table td { color: var(--c-text); }

/* 流程步骤 */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; counter-reset: step; }
.step { background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius); padding: 26px 22px; position: relative; }
.step .step-no { width: 40px; height: 40px; border-radius: 50%; background: var(--c-primary); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; margin-bottom: 14px; }
.step h4 { color: var(--c-primary); font-size: 17px; margin-bottom: 8px; }
.step p { color: var(--c-text-muted); font-size: 14px; }

/* CTA 条 */
.cta-bar { background: var(--c-primary); color: #fff; border-radius: var(--radius); padding: 36px; text-align: center; margin-top: 10px; }
.cta-bar h3 { font-size: 24px; margin-bottom: 10px; }
/* 引导条标题同样式下划线（深色底：白线 + 橙块） */
.cta-bar h2, .cta-bar h3 {
  position: relative; display: inline-block; padding-bottom: 16px; margin-bottom: 10px;
}
.cta-bar h2::after, .cta-bar h3::after {
  content: ""; position: absolute; left: 50%; transform: translateX(-50%); bottom: 0;
  width: 180px; height: 2px; background: rgba(255,255,255,.9);
}
.cta-bar h2::before, .cta-bar h3::before {
  content: ""; position: absolute; left: 50%; transform: translateX(-50%); bottom: -2px;
  width: 30px; height: 6px; background: #EC993E; z-index: 1;
}
.cta-bar p { color: rgba(255,255,255,.9); margin-bottom: 20px; }

/* ---------- 12.5 防伪标签产品目录（左分类导航 + 卡片网格） ---------- */
/* 借鉴 shangyuan365 防伪标签页框架：左侧分类锚点导航 + 右侧产品卡片网格 */
.prod-catalog { display: grid; grid-template-columns: 220px 1fr; gap: 36px; align-items: start; }
.cat-nav {
  position: sticky; top: calc(var(--nav-h) + 16px);
  background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius); padding: 14px;
}
.cat-nav .cat-title { font-size: 13px; color: var(--c-text-muted); letter-spacing: 1px; padding: 4px 12px 12px; }
.cat-nav a { display: block; padding: 11px 14px; border-radius: 8px; color: var(--c-text); font-size: 15px; }
.cat-nav a:hover, .cat-nav a.active { background: var(--c-accent-soft); color: var(--c-primary); font-weight: 600; }
.cat-group { margin-bottom: 42px; scroll-margin-top: calc(var(--nav-h) + 20px); }
.cat-group:last-child { margin-bottom: 0; }
.cat-group h3 { font-size: 20px; color: var(--c-primary); margin-bottom: 18px; padding-left: 12px; border-left: 4px solid var(--c-accent); }

/* ---------- 12.5 防伪真有那么重要（价值测算：3 张编号卡片 + 底部算式） ---------- */
.why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 46px; }
.why-card {
  position: relative; background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius);
  padding: 42px 24px 34px; text-align: center; transition: all .25s;
}
.why-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-4px); }
.why-num {
  position: absolute; top: -16px; left: 50%; transform: translateX(-50%);
  width: 32px; height: 32px; border-radius: 50%; background: var(--c-primary); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 700;
}
.why-card p { font-size: 16px; color: var(--c-text-muted); line-height: 1.9; }
.why-card b { color: #5d5d5d; font-weight: 700; font-size: 16px; }
.why-formula {
  margin-top: 34px; text-align: center; font-size: 15px; color: var(--c-text);
  background: var(--c-accent-soft); border-radius: var(--radius); padding: 15px 20px; line-height: 1.8;
}
.why-formula .why-mark { color: #5d5d5d; font-weight: 700; margin-right: 6px; font-size: 19px; }
.why-formula i { font-style: normal; font-size: 13px; color: var(--c-text-light); }
.why-formula b { color: #ec8a1f; font-size: 22px; }

/* ---------- 12.7 服务流程（参考 fanchi315：居中标题 + 橙块分割线 + 3 步卡片） ---------- */
.fc-head { text-align: center; margin-bottom: 44px; }
.fc-head h2 {
  position: relative; display: inline-block; padding-bottom: 20px;
  font-size: 26px; color: var(--c-title);
}
.fc-head h2::after {
  content: ""; position: absolute; left: 50%; transform: translateX(-50%); bottom: 0;
  width: 230px; height: 2px; background: #3A3A3A;
}
.fc-head h2::before {
  content: ""; position: absolute; left: 50%; transform: translateX(-50%); bottom: -2px;
  width: 30px; height: 6px; background: #EC993E; z-index: 1;
}
.fc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.fc-card {
  background: #fff; border: 1px solid var(--c-border); border-radius: 4px;
  padding: 28px 26px; transition: all .25s;
}
.fc-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-4px); }
.fc-card h3 { font-size: 16px; color: var(--c-text); margin-bottom: 12px; }
.fc-card p { font-size: 13px; color: var(--c-text-light); line-height: 1.9; }

/* ---------- 12.8 一物一码溯源系统页模块（参考 fanchi315 防窜货系统） ---------- */
.fc-grid--4 { grid-template-columns: repeat(4, 1fr); }
.fc-grid--4 .fc-card { text-align: center; padding: 36px 24px; }
.fc-grid--4 .fc-card .ic { display: flex; justify-content: center; color: #EC993E; margin-bottom: 18px; }
.fc-grid--4 .fc-card .ic svg { width: 46px; height: 46px; }
.fc-grid--4 .fc-card h3 { font-size: 18px; color: var(--c-text); margin-bottom: 14px; }
.fc-grid--4 .fc-card p { font-size: 14px; line-height: 2; }

.sy-feature { display: grid; grid-template-columns: 5fr 7fr; gap: 56px; align-items: center; }
.sy-intro { max-width: 100%; }
.sy-intro p {
  font-size: 15px; color: var(--c-text-muted); line-height: 2.1;
  margin-bottom: 14px; text-align: justify;
}
.sy-feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 20px; }
.sy-feat-item { text-align: center; }
.sy-feat-item .ic { display: flex; justify-content: center; color: var(--c-primary); }
.sy-feat-item .ic svg { width: 52px; height: 52px; }
/* 线面结合：描边保留，图形主体叠加半透明填充 */
.fc-grid--4 .fc-card .ic svg *,
.sy-feat-item .ic svg * { fill: currentColor; fill-opacity: .16; }
.sy-feat-item h3 { font-size: 15px; color: var(--c-text); margin: 12px 0 6px; }
.sy-feat-item p { font-size: 12px; color: var(--c-text-light); }

/* ---------- 12.10 防窜货你需要做些什么（参考 fanchi315：深色照片背景 + 白色双栏面板） ---------- */
.todo-sec {
  position: relative; padding: 76px 0 84px;
  background: #2B3038 url("../images/todo-bg.svg") center/cover no-repeat;
}
.todo-sec::before { content: ""; position: absolute; inset: 0; background: rgba(18,23,30,.5); }
.todo-sec .container { position: relative; z-index: 1; }

/* ---------- 12.11 防窜货系统特点：深色背景图（参考 todo-sec 生成 sy-feat-bg.svg） ---------- */
.sy-feat-sec {
  position: relative; padding: 76px 0 84px;
  background: #1A2230 url("../images/sy-feat-bg.svg") center/cover no-repeat;
}
.sy-feat-sec::before { content: ""; position: absolute; inset: 0; background: rgba(18,23,30,.55); }
.sy-feat-sec .container { position: relative; z-index: 1; }
.sy-feat-sec .fc-head { margin-bottom: 44px; }
.sy-feat-sec .fc-head h2 { color: #fff; }
.sy-feat-sec .fc-head h2::after { background: rgba(255,255,255,.55); }
.sy-feat-sec .sy-intro p { color: rgba(255,255,255,.82); }
.sy-feat-sec .sy-feat-item .ic { color: #fff; }
/* 图标参考「我们的优势」模块：纯线性，去除线面填充叠加 */
.sy-feat-sec .sy-feat-item .ic svg * { fill: none; fill-opacity: 1; }
.sy-feat-sec .sy-feat-item h3 { color: #fff; }
.sy-feat-sec .sy-feat-item p { color: rgba(255,255,255,.7); }
.todo-head { text-align: center; margin-bottom: 38px; }
.todo-head h2 {
  position: relative; display: inline-block; padding-bottom: 20px;
  color: #fff; font-size: 28px; letter-spacing: 1px;
}
.todo-head h2::after {
  content: ""; position: absolute; left: 50%; transform: translateX(-50%); bottom: 0;
  width: 230px; height: 2px; background: rgba(255,255,255,.9);
}
.todo-head h2::before {
  content: ""; position: absolute; left: 50%; transform: translateX(-50%); bottom: -2px;
  width: 30px; height: 6px; background: #EC993E; z-index: 1;
}

.todo-panel {
  display: grid; grid-template-columns: 1fr 1fr;
  max-width: 1040px; margin: 0 auto;
  background: #fff; box-shadow: 0 20px 46px rgba(0,0,0,.3);
}
/* 两栏均为纵向 flex：标题固定，内容区撑满剩余高度并垂直居中，保证左右两栏内容高度对齐 */
.todo-left { background: #F3F4F6; padding: 36px 30px 40px; display: flex; flex-direction: column; }
.todo-right { background: #fff; padding: 36px 30px 40px; display: flex; flex-direction: column; }
.todo-left h3, .todo-right h3 {
  flex: 0 0 auto; text-align: center; font-size: 18px; color: var(--c-title); margin-bottom: 34px;
}

/* 两栏网格等行等列，行高均分保证上下均匀分布 */
.todo-grid {
  flex: 1 1 auto; align-content: center;
  display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr);
  gap: 46px 20px;
}
.todo-card {
  position: relative; background: #fff; border: 1px solid #E8EAED;
  padding: 48px 18px 20px; text-align: center;
  display: flex; align-items: center; justify-content: center;
}
.todo-card .tic {
  position: absolute; top: -35px; left: 50%; transform: translateX(-50%);
  width: 70px; height: 70px; border-radius: 50%; background: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
}
.todo-card .tic svg { width: 45px; height: 45px; }
.todo-card p { font-size: 15px; color: var(--c-text-muted); line-height: 1.9; }

/* 线面结合：描边保留，图形主体叠加半透明填充 */
.todo-sec .tic svg * { fill: currentColor; fill-opacity: .16; }

/* 右栏 4 项：等行等列 + 每项内部垂直居中，文字区固定一行高，保证四项图标文字严格对齐 */
.todo-grid--see { gap: 46px 20px; }
.see-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; }
.see-item .tic { display: flex; align-items: center; justify-content: center; width: 75px; height: 75px; }
.see-item .tic svg { width: 69px; height: 69px; }
.see-item p {
  font-size: 15px; color: var(--c-text); text-align: center; line-height: 1.9;
  min-height: 30px; display: flex; align-items: center; justify-content: center;
}

/* ---------- 12.11 防伪材料展示（参考 dxunt.com/products：顶部 Tab + 左图右文 + 特性标签） ---------- */
.section--matshow { background: linear-gradient(180deg, #EAF3FB 0%, #F7FAFD 62%, #FFFFFF 100%); }
.ms-tabs {
  display: flex; flex-wrap: wrap; justify-content: center;
  margin: 0 auto 44px; max-width: 1040px;
  border-bottom: 1px solid #D8E4F0;
}
.ms-tab {
  appearance: none; background: none; border: 0; cursor: pointer;
  position: relative; padding: 12px 18px;
  font-size: 15px; color: var(--c-text-muted); transition: color .2s;
}
.ms-tab:hover { color: var(--c-primary); }
.ms-tab.on { color: var(--c-primary); font-weight: 700; }
.ms-tab.on::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: -1px;
  height: 2px; background: var(--c-primary);
}
.ms-panel {
  display: grid; grid-template-columns: 440px 1fr; gap: 56px;
  align-items: center; max-width: 1040px; margin: 0 auto;
}
.ms-photo {
  background: none; border: none; border-radius: 0;
  padding: 0; box-shadow: none;
}
.ms-photo img { width: 100%; height: auto; display: block; }
.ms-info h3 { text-align: center; font-size: 24px; color: var(--c-title); margin-bottom: 20px; }
.ms-info p { font-size: 15px; color: var(--c-text-muted); line-height: 2.05; text-align: justify; }
.ms-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px 18px; margin-top: 30px; }
.ms-tag {
  min-width: 96px; padding: 8px 20px; border-radius: 999px;
  color: #fff; font-size: 14px; text-align: center; letter-spacing: .5px;
}
/* 多彩标签：色板取自「为什么选择我们」模块图标（青绿 / 红 / 蓝 / 橙黄），按顺序循环 */
.ms-tag--c1 { background: #2BB3A3; }
.ms-tag--c2 { background: #E8553F; }
.ms-tag--c3 { background: #3E7BC0; }
.ms-tag--c4 { background: #F0A63C; }

.dev-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.dev-card {
  background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius);
  overflow: hidden; text-align: center; transition: all .25s;
}
.dev-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-4px); }
.dev-card img { width: 100%; height: 180px; object-fit: cover; display: block; background: var(--c-bg); }
.dev-card h3 { font-size: 16px; color: var(--c-text); padding: 18px 16px 8px; }
.dev-card p { font-size: 13px; color: var(--c-text-light); line-height: 1.8; padding: 0 16px 22px; }

.cta-bar .btn-solid {
  display: inline-flex; align-items: center; justify-content: center;
  height: 44px; padding: 0 36px; font-size: 15px; border-radius: 3px;
  background: #fff; color: var(--c-primary); transition: all .25s;
}
.cta-bar .btn-solid:hover { background: var(--c-accent-soft); }

/* ---------- 12.9 防窜货系统实施流程（三泳道时间轴，参考 fanchi315） ---------- */
.flow-lane { display: flex; gap: 20px; margin-bottom: 52px; }
.flow-lane:last-child { margin-bottom: 0; }
.flow-side { flex: 0 0 92px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding-top: 6px; }
.flow-side .fz { font-size: 13px; color: var(--c-text-muted); }
.flow-side .fic { color: #16324F; margin: 2px 0; }
.flow-side .fic svg { width: 48px; height: 48px; }
.flow-side .fa { font-size: 15px; font-weight: 700; color: #16324F; }

.flow-track { position: relative; flex: 1; min-width: 0; display: flex; align-items: flex-end; }
.flow-track::after {
  content: ""; position: absolute; left: 6px; right: 6px; bottom: 24px;
  height: 4px; background: #16324F; border-radius: 2px;
}
.flow-step {
  position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center;
  flex: 1 1 0; min-width: 0; padding: 0 6px;
}
.flow-up { display: flex; flex-direction: column; align-items: center; margin-bottom: 12px; width: 100%; }
.flow-up svg { max-width: 100%; height: auto; }
.flow-up .fu-t { font-size: 13px; color: var(--c-text); margin-top: 8px; }
.flow-up .fic2 { color: #7A8CA3; }
.flow-lane--market .flow-up .fic2 { color: #F0A63C; }
.flow-up .fic2 svg { width: 66px; height: 66px; }
.flow-dot {
  width: 14px; height: 14px; border-radius: 50%; box-sizing: content-box;
  border: 3px solid #fff; box-shadow: 0 0 0 2px #16324F; margin-bottom: 16px;
}
.flow-arrow {
  position: relative; z-index: 1; align-self: flex-end; flex-shrink: 0;
  color: #A7B4C2; font-size: 24px; font-weight: 700; line-height: 1;
  margin: 0 6px 44px;
}
.flow-end {
  position: relative; z-index: 1; flex-shrink: 0;
  width: 11px; height: 11px; background: #16324F; margin: 0 2px 20px;
}

/* 流程四步说明卡（2×2，六边形彩色图标） */
.flow-notes { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 48px; }
.flow-note {
  display: flex; gap: 18px; align-items: flex-start;
  background: #fff; border: 1px solid var(--c-border); border-radius: 4px; padding: 28px 30px;
}
.flow-note .fn-ic { flex: 0 0 78px; }
.flow-note .fn-ic svg { width: 78px; height: 78px; }
.flow-note .fn-ic img { width: 78px; height: 78px; display: block; object-fit: contain; }
.flow-note h4 { font-size: 17px; color: var(--c-text); margin-bottom: 10px; }
.flow-note p { font-size: 14px; color: var(--c-text-muted); line-height: 1.95; text-align: justify; }

/* ---------- 12.12 案例展示页·行业解决方案（参考 dxunt.com/solutions） ---------- */
.sec-industry { background: var(--page-bg); }
.sec-industry .section-head p { line-height: 2; }
/* 内容区加宽至 1240px，使 3×368 + 2×48 列间距 = 1200px 完整容纳 */
.sec-industry .container { max-width: 1240px; }
.ind-grid {
  display: grid; grid-template-columns: repeat(3, 368px);
  justify-content: center; gap: 52px 48px;
}

/* 限定 .ind-grid 作用域：通用 .ind-card 仍是 about/fangwei 页「优势卡片」的样式 */
.ind-grid .ind-card {
  position: relative; overflow: hidden; display: block;
  width: 368px; height: 244px; padding: 46px 34px; border-radius: 14px;
  color: var(--card-text); border: none; text-align: left;
  transition: transform .28s ease, box-shadow .28s ease;
}
.ind-grid .ind-card:hover { transform: translateY(-5px); box-shadow: 0 18px 38px rgba(0,0,0,.18); }
.ind-grid .ind-card h3 {
  font-size: 32px; font-weight: 700; letter-spacing: 1px; color: inherit;
  margin-bottom: 20px; max-width: 58%; line-height: 1.2;
}
.ind-grid .ind-card .ind-line1 { font-size: 15px; font-weight: 600; margin-bottom: 8px; max-width: 60%; opacity: .96; color: inherit; }
.ind-grid .ind-card .ind-line2 { font-size: 15px; max-width: 60%; opacity: .78; line-height: 1.6; color: inherit; }

.ind-photo {
  position: absolute; right: 24px; bottom: 22px;
  width: 110px; height: 110px; border-radius: 50%; overflow: hidden;
  cursor: pointer; z-index: 2;
  box-shadow: 0 10px 22px rgba(0,0,0,.2);
  transition: width .38s ease, height .38s ease, right .38s ease,
              bottom .38s ease, border-radius .38s ease, box-shadow .28s ease;
}
.ind-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* 鼠标指向（hover）圆形配图时：图片扩展铺满整个方框（圆角与卡片一致） */
.ind-grid .ind-card:hover .ind-photo {
  width: 100%; height: 100%; right: 0; bottom: 0;
  border-radius: 14px; box-shadow: none;
}

/* 卡片色系：统一引用 :root 变量；明黄 #FFD338 与米白 #F9E7D4 两张底浅，改用深字保证可读 */
.ind-card--1 { background: var(--ind-1); }
.ind-card--2 { background: var(--ind-2); }
.ind-card--3 { background: var(--ind-3); color: var(--card-text-dark); }
.ind-card--4 { background: var(--ind-4); }
.ind-card--5 { background: var(--ind-5); }
.ind-card--6 { background: var(--ind-6); }
.ind-card--7 { background: var(--ind-7); color: var(--card-text-dark); }
.ind-card--8 { background: var(--ind-8); }
.ind-card--9 { background: var(--ind-9); }
.ind-card--10 { background: var(--ind-10); }
.ind-card--11 { background: var(--ind-11); }
.ind-card--12 { background: var(--ind-12); }

/* ---------- 12.13 行业解决方案详情页（参考 dxunt.com/solutions/xxx） ---------- */
.sol-page {
  padding: 54px 0 64px;
  background:
    radial-gradient(820px 420px at 22% 0%, rgba(64,136,200,.12), rgba(64,136,200,0) 70%),
    radial-gradient(760px 380px at 82% 6%, rgba(64,136,200,.10), rgba(64,136,200,0) 70%),
    #FBFCFE;
}
.sol-head { text-align: center; margin-bottom: 54px; }
.sol-head h1 { font-size: 44px; font-weight: 700; color: var(--c-text); letter-spacing: 2px; margin-bottom: 12px; }
.sol-head p { font-size: 17px; color: var(--c-text-light); letter-spacing: 1px; }

.sol-body {
  display: grid; grid-template-columns: 1fr 580px;
  gap: 48px; align-items: center;
}
.sol-h2 {
  position: relative; font-size: 22px; font-weight: 700; color: var(--c-text);
  margin-bottom: 18px; padding-left: 0;
}
.sol-h2--blue { color: var(--c-primary); margin-top: 40px; }
.sol-p {
  font-size: 15px; color: var(--c-text-muted); line-height: 2.05;
  text-align: justify; margin-bottom: 4px;
}
.sol-list { list-style: none; }
.sol-list li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 15px; color: var(--c-text-muted); line-height: 1.95;
  margin-bottom: 12px; text-align: justify;
}
.sol-li-text b { color: var(--c-text); font-weight: 700; }
.sol-ic { flex: 0 0 22px; color: #000; margin-top: 3px; }
.sol-ic--alt { color: #000; }
.sol-ic svg { width: 22px; height: 22px; display: block; }

/* 右侧配图方框：580 × 580，圆角 16px（图片可替换） */
.sol-figure {
  width: 580px; height: 580px; border-radius: 16px; overflow: hidden;
  background: var(--c-bg); box-shadow: 0 12px 30px rgba(25,96,168,.10);
}
.sol-figure img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}

/* 下一步：跳转下一个行业解决方案（参考 dxunt solutions 详情页流转） */
.sol-next { padding: 0 0 14px; }
.sol-next .container { display: flex; justify-content: flex-end; }
.sol-next-btn {
  display: inline-flex; align-items: center; gap: 12px;
  height: 48px; padding: 0 32px; border-radius: 999px;
  background: #fff; border: 1px solid var(--c-border); color: var(--c-text);
  font-size: 15px; transition: all .25s;
}
.sol-next-btn:hover { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }
.sol-next-btn .arr { font-size: 20px; line-height: 1; transform: translateY(-1px); }

/* 成功案例模块已移除，其 .sol-cases / .sol-case 样式同步清理 */

/* ---------- 12.14 联系我们（参考 fanchi315 tid=6：浅灰卡片 + 居中红色线性图标） ---------- */
.ct-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 36px;
  max-width: 1200px; margin: 0 auto;
}
.ct-card { background: #F5F6F8; padding: 46px 40px; text-align: center; }
.ct-ic { display: inline-flex; width: 40px; height: 40px; color: #E8553F; }
.ct-ic svg { width: 100%; height: 100%; display: block; stroke-width: 1.4; }
.ct-card h3 { font-size: 17px; color: #3A3A3A; margin: 16px 0 12px; font-weight: 600; }
.ct-card p { font-size: 14px; color: #666; line-height: 1.9; margin: 0 0 4px; }
.ct-card p a { color: #666; }
.ct-card p a:hover { color: var(--c-primary); }

/* ---------- 12.15 新闻资讯页（参考 himarking.com/news：左图右文列表，与容器同宽） ---------- */
.news-sec { padding-top: 26px; }
.hn-list { max-width: 1200px; border-top: 1px solid var(--c-border); }
.hn-item {
  display: grid; grid-template-columns: 440px 1fr; gap: 66px; align-items: center;
  padding: 26px 0; margin-bottom: 0;
  border-bottom: 1px solid var(--c-border);
  transition: opacity .2s ease;
}
.hn-item:hover { opacity: .82; }
.hn-thumb { width: 440px; height: 186px; border-radius: 10px; overflow: hidden; background: var(--c-bg); }
.hn-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hn-body h3 { font-size: 19px; color: var(--c-title); line-height: 1.5; margin-bottom: 10px; }
.hn-item:hover .hn-body h3 { color: var(--c-primary); }
.hn-body p {
  font-size: 14px; color: var(--c-text-muted); line-height: 1.85;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  margin-bottom: 14px;
}
.hn-body .hn-date { font-size: 13px; color: #9AA6B2; }

/* ---------- 12.16 在线咨询浮窗（全站固定右下角） ---------- */
.online-consult {
  position: fixed; right: 24px; bottom: 0; z-index: 900;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 20px; border-radius: 8px;
  background: linear-gradient(180deg, #F04A34 0%, #E23724 100%);
  color: #fff; font-size: 16px; font-weight: 600; letter-spacing: 1px;
  box-shadow: 0 6px 18px rgba(226,55,36,.38);
  cursor: pointer; user-select: none;
  transition: transform .2s ease, box-shadow .2s ease;
}
.online-consult svg { width: 20px; height: 20px; flex: 0 0 20px; }
.online-consult:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(226,55,36,.46);
  color: #fff;
}

/* ---------- 12.17 在线咨询弹窗（自建 · 锐码汇科专属聊天界面 810×628，参考爱番番布局） ---------- */
.oc-mask {
  position: fixed; inset: 0; z-index: 950;
  background: rgba(15,34,58,.48);
  display: none;
}
.oc-mask.is-open { display: block; }
.oc-modal {
  position: fixed; z-index: 960; left: 50%; top: 50%;
  width: min(648px, calc(100vw - 32px)); height: min(628px, calc(100vh - 40px));
  transform: translate(-50%, -50%);
  background: #fff; border-radius: 10px; overflow: hidden;
  box-shadow: 0 24px 60px rgba(15,34,58,.35);
  display: none; flex-direction: column;
}
.oc-modal.is-open { display: flex; }

/* 顶栏 */
.oc-topbar {
  flex: 0 0 auto;
  background: linear-gradient(90deg, #3399FF 0%, #007EFF 100%);
  color: #fff; padding: 14px 20px;
  display: flex; align-items: center; gap: 12px;
}
.oc-avatar {
  flex: 0 0 46px; width: 46px; height: 46px; border-radius: 50%;
  background: rgba(255,255,255,.92); color: var(--c-primary);
  font-size: 22px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.oc-topbar h3 { font-size: 15px; margin: 0 0 3px; font-weight: 600; }
.oc-topbar p { font-size: 13px; margin: 0; color: rgba(255,255,255,.9); }
.oc-close {
  margin-left: auto;
  width: 30px; height: 30px; border-radius: 50%;
  border: 0; background: rgba(255,255,255,.2); color: #fff;
  font-size: 20px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.oc-close:hover { background: rgba(255,255,255,.4); }

/* 主体两列 */
.oc-main { flex: 1 1 auto; display: flex; min-height: 0; }

/* 左：聊天区 */
.oc-chat { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; background: #fff; }
.oc-msgs { flex: 1 1 auto; overflow-y: auto; padding: 18px 24px 10px; }
.oc-time-wrap { text-align: center; margin-bottom: 14px; }
.oc-time {
  display: inline-block; font-size: 12px; color: #8A97A6;
  background: #E8EDF3; padding: 4px 12px; border-radius: 4px;
}
.oc-bubble {
  max-width: 82%; padding: 10px 14px; border-radius: 8px;
  font-size: 14px; line-height: 1.75; margin-bottom: 14px;
  word-break: break-word;
}
.oc-bubble.msg-kefu { background: #fff; color: var(--c-text); border: 1px solid #EDF0F4; }
.oc-bubble.msg-user { background: var(--c-primary); color: #fff; margin-left: auto; }
.oc-bubble .oc-em, .oc-bubble .oc-tel { color: #E8553F; font-weight: 600; }
.oc-bubble.msg-user .oc-em, .oc-bubble.msg-user .oc-tel { color: #FFD9A0; }
.oc-msg { max-width: 84%; margin: 0 auto 14px; }
.oc-msg--user { text-align: right; }
.oc-msg-label { font-size: 12px; color: #8A97A6; margin-bottom: 6px; }

/* 留言卡片（蓝色渐变头 + 白色正文，参考爱番番布局） */
.oc-card {
  max-width: 84%; border-radius: 8px; overflow: hidden; margin: 0 auto 14px;
  box-shadow: 0 2px 10px rgba(46,134,245,.18);
}
.oc-card-head {
  position: relative; overflow: hidden;
  background: linear-gradient(90deg, #3399FF 0%, #007EFF 100%);
  color: #fff; font-size: 14px; font-weight: 600; letter-spacing: 1px;
  text-align: center; padding: 9px 12px;
}
.oc-card-head::before {
  content: ''; position: absolute; right: -18px; top: -24px;
  width: 66px; height: 66px; border-radius: 50%; background: rgba(255,255,255,.14);
}
.oc-card-head::after {
  content: ''; position: absolute; left: -16px; bottom: -32px;
  width: 72px; height: 72px; border-radius: 50%; background: rgba(255,255,255,.10);
}
.oc-card-body { background: #fff; border: 1px solid #EDF0F4; border-top: 0; padding: 12px 14px 14px; }
.oc-card-body p { margin: 0 0 10px; font-size: 13px; color: var(--c-text); line-height: 1.7; }
.oc-card-inputrow { display: flex; align-items: center; gap: 8px; }
.oc-card-input {
  flex: 1 1 auto; min-width: 0; height: 34px; border: 1px solid var(--c-border); border-radius: 4px;
  padding: 0 10px; font-size: 13px; color: var(--c-text); outline: none;
}
.oc-card-input:focus { border-color: var(--c-accent); }
.oc-card-send {
  flex: 0 0 auto; width: 34px; height: 34px; border: 0; border-radius: 4px;
  background: #007EFF; color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.oc-card-send:hover { background: #0056B3; }
.oc-card-send svg { width: 16px; height: 16px; }

/* 底部结束行：沟通已结束 + 继续对话/在线留言 */
.oc-end { flex: 0 0 auto; background: #fff; border-top: 1px solid #EDF0F4; padding: 12px 24px 14px; text-align: center; }
.oc-end-title { display: flex; align-items: center; gap: 12px; color: #8A97A6; font-size: 12px; margin-bottom: 12px; }
.oc-end-title::before, .oc-end-title::after { content: ''; flex: 1 1 auto; height: 1px; background: #EDF0F4; }
.oc-end-btns { display: flex; justify-content: center; gap: 64px; }
.oc-end-btn { border: 0; background: none; cursor: pointer; padding: 0; }
.oc-circle {
  width: 46px; height: 46px; border-radius: 50%; margin: 0 auto 6px;
  display: flex; align-items: center; justify-content: center; color: #fff;
  transition: transform .2s ease;
}
.oc-end-btn:hover .oc-circle { transform: translateY(-2px); }
.oc-circle--blue { background: #007EFF; }
.oc-circle--green { background: #3BC47C; }
.oc-circle svg { width: 22px; height: 22px; }
.oc-end-btn em { font-style: normal; font-size: 12px; color: var(--c-text); }

/* 右：品牌栏 */
.oc-side {
  flex: 0 0 236px; width: 236px; border-left: 1px solid var(--c-border);
  padding: 16px; overflow-y: auto; background: #fff;
}
.oc-poster {
  background: linear-gradient(160deg, #007EFF 0%, #0056B3 100%);
  border-radius: 8px; height: 216px; padding: 18px 16px;
  color: #fff; display: flex; flex-direction: column; justify-content: center;
  margin-bottom: 14px;
}
.oc-poster .oc-poster-logo {
  font-size: 12px; letter-spacing: 2px; color: rgba(255,255,255,.85); margin-bottom: 10px;
}
.oc-poster strong { font-size: 26px; line-height: 1.4; letter-spacing: 2px; }
.oc-side h4 { font-size: 15px; color: var(--c-title); line-height: 1.6; margin: 0 0 10px; }
.oc-side p { font-size: 13px; color: var(--c-text-muted); line-height: 1.8; margin: 0 0 10px; }

/* 底部支持行 */
.oc-foot {
  flex: 0 0 auto; text-align: center; font-size: 11px; color: #B4BEC9;
  background: #F7F9FB; padding: 6px 0; border-top: 1px solid #EDF0F4;
}

@media (max-width: 980px) {
  .oc-end-btns { gap: 40px; }
}

/* ---------- 12.18 在线咨询预约页（严格按截图 3.jpg 还原：左渐变码卡 + 右窄列表单，无卡片阴影） ---------- */
.consult-sec { padding: 48px 0 72px; background: #F2F3F5; }
.cs-grid {
  display: grid; grid-template-columns: 640px 400px; gap: 56px;
  max-width: 1160px; margin: 0 auto; align-items: center; justify-content: center;
}
/* 左：渐变背景图（images/wechat-bg-01.png，可替换），标题居中偏上，二维码约 232px */
.cs-left {
  height: 580px; padding: 118px 36px 40px; text-align: center;
  display: flex; flex-direction: column; align-items: center;
  background: #DCE8F2 url("../images/wechat-bg-01.png") center / cover no-repeat;
}
.cs-left h2 { font-size: 22px; color: #333; font-weight: 700; margin: 0 0 48px; letter-spacing: 3px; flex: 0 0 auto; }
.cs-qr-card {
  width: 232px; height: 232px; background: #fff; border-radius: 4px;
  padding: 12px; box-shadow: 0 2px 10px rgba(17,43,74,.10);
}
.cs-qr-card img { width: 100%; height: 100%; object-fit: contain; display: block; }
.cs-qr-tip { margin: 38px 0 0; font-size: 15px; color: #333; letter-spacing: 1px; }

/* 右：无卡片容器，标题 + 窄列表单直接落在浅灰底上 */
.cs-right { display: flex; flex-direction: column; justify-content: center; }
.cs-head {
  background: none; color: #333; text-align: center;
  font-size: 20px; font-weight: 700; letter-spacing: 2px; padding: 0 0 26px;
}
.cs-form { display: flex; flex-direction: column; gap: 20px; }
.cs-field { position: relative; }
.cs-field input, .cs-field textarea {
  width: 100%; height: 44px; border: 1px solid #DCDFE6; border-radius: 4px;
  padding: 0 14px; font-size: 14px; color: var(--c-text);
  outline: none; background: #fff; font-family: inherit;
}
.cs-field textarea { height: auto; padding: 10px 14px; resize: vertical; min-height: 96px; }
.cs-field input:focus, .cs-field textarea:focus { border-color: #1960A8; }
/* 验证码：输入框与蓝色按钮贴合无缝 */
.cs-code { display: flex; align-items: stretch; gap: 0; }
.cs-code input { flex: 1 1 auto; min-width: 0; border-radius: 4px 0 0 4px; }
.cs-getcode {
  flex: 0 0 auto; height: 44px; border: 0; border-radius: 0 4px 4px 0;
  background: #1960A8; color: #fff; font-size: 14px; letter-spacing: 1px;
  cursor: pointer; padding: 0 20px; white-space: nowrap;
}
.cs-getcode:hover { filter: brightness(1.08); }
.cs-getcode:disabled { background: #9AA6B2; cursor: not-allowed; }
.cs-tip { margin: -8px 0 0; min-height: 18px; font-size: 13px; color: #3BC47C; }
.cs-submit {
  width: 100%; height: 46px; border: 0; border-radius: 4px; margin-top: 10px;
  background: #1960A8;
  color: #fff; font-size: 16px; letter-spacing: 8px; cursor: pointer;
}
.cs-submit:hover { filter: brightness(.94); }
.cs-success {
  display: none; margin: 0; padding: 10px 14px; border-radius: 4px;
  background: #EAF9F1; color: #2F9E63; font-size: 13px; text-align: center;
}

@media (max-width: 1320px) {
  .cs-grid { grid-template-columns: 1fr; gap: 40px; max-width: 100%; justify-content: center; }
  .cs-left { width: 100%; max-width: 640px; height: auto; margin: 0 auto; padding: 72px 28px 48px; }
  .cs-right { width: 100%; max-width: 400px; margin: 0 auto; }
}
@media (max-width: 640px) {
  .consult-sec { padding: 24px 0 48px; }
  .cs-left { padding: 48px 20px 40px; }
  .cs-left h2 { font-size: 19px; margin-bottom: 32px; }
  .cs-qr-card { width: 200px; height: 200px; padding: 10px; }
  .cs-head { font-size: 18px; padding-bottom: 18px; }
}

/* ---------- 12.19 左下角留言浮窗（参考截图 53.jpg，尺寸与截图一致） ---------- */
.msgw {
  position: fixed; left: 24px; bottom: 0; z-index: 880;
  width: 262px; height: 290px; background: #fff; border-radius: 6px 6px 0 0;
  box-shadow: 0 6px 24px rgba(17,43,74,.22); overflow: hidden;
  display: flex; flex-direction: column;
}
.msgw.is-min { height: auto; border-radius: 6px 6px 0 0; box-shadow: 0 4px 14px rgba(17,43,74,.18); }
.msgw.is-min .msgw-body { display: none; }
.msgw-head {
  flex: 0 0 auto;
  background: #4285F4; color: #fff; display: flex; align-items: center;
  justify-content: space-between; padding: 11px 14px; cursor: pointer; user-select: none;
}
.msgw-head span { font-size: 16px; letter-spacing: 1px; }
.msgw-min { background: none; border: 0; color: #fff; font-size: 20px; line-height: 1; cursor: pointer; padding: 0 2px; }
.msgw-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding: 12px 14px 14px; }
.msgw-intro { margin: 0 0 10px; font-size: 13px; color: #555; line-height: 1.7; flex: 0 0 auto; }
.msgw-text {
  display: block; flex: 1 1 auto; min-height: 0; width: 100%; box-sizing: border-box;
  border: 1px solid #DCDCDC; border-radius: 4px; padding: 9px 10px;
  font-size: 13px; color: #333; line-height: 1.6; resize: none;
  outline: none; font-family: inherit; background: #fff;
}
.msgw-text::placeholder, .msgw-phone input::placeholder { color: #AAA; }
.msgw-text:focus { border-color: #4285F4; }
.msgw-phone {
  margin-top: 10px; display: flex; align-items: center; gap: 8px;
  border: 1px solid #DCDCDC; border-radius: 4px; height: 42px; padding: 0 10px;
  background: #fff; transition: border-color .15s;
}
.msgw-phone svg { width: 16px; height: 16px; color: #999; flex: 0 0 auto; }
.msgw-phone input { border: 0; outline: none; flex: 1 1 auto; min-width: 0; height: 100%; font-size: 13px; color: #333; background: none; font-family: inherit; }
.msgw-phone:focus-within { border-color: #4285F4; }
.msgw-tip { margin: 6px 0 0; font-size: 12px; line-height: 1.6; }
.msgw-tip:empty { display: none; }
.msgw-foot { display: flex; justify-content: flex-end; margin-top: auto; padding-top: 8px; }
.msgw-submit {
  border: 0; border-radius: 4px; padding: 8px 24px; background: #4285F4;
  color: #fff; font-size: 14px; cursor: pointer;
}
.msgw-submit:hover { background: #3372E0; }
@media (max-width: 640px) {
  .msgw { left: 12px; width: min(262px, calc(100vw - 24px)); }
}

/* ---------- 13. 响应式（手机端） ---------- */
@media (max-width: 980px) {
  .hero { height: auto; min-height: 420px; }
  .hero .container { padding: 84px 20px; min-height: 420px; }
  .hero-media { display: none; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: 1fr 1fr; }
  .about-split, .contact-wrap { grid-template-columns: 1fr; gap: 28px; }
  .ct-grid { grid-template-columns: 1fr; gap: 24px; }
  .hn-item { grid-template-columns: 1fr; gap: 18px; padding: 16px; }
  .hn-thumb { width: 100%; height: auto; aspect-ratio: 440 / 186; }
  .news-layout { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr 1fr; }
  .prod-catalog { grid-template-columns: 1fr; gap: 24px; }
  .cat-nav { position: static; display: flex; flex-wrap: wrap; gap: 8px; }
  .cat-nav .cat-title { width: 100%; padding: 0 4px 4px; }
  .cat-nav a { padding: 9px 14px; }
  .sub-banner { height: 300px; }
  .sub-banner h1 { font-size: 28px; }
  .sub-banner .sub-title { font-size: 20px; }
  .sub-banner .online-tag { display: none; }
  .sub-banner .container { padding-left: 40px; padding-right: 40px; }
  .fc-grid { grid-template-columns: 1fr; }
  .fc-grid--4 { grid-template-columns: 1fr 1fr; }
  .sy-feature { grid-template-columns: 1fr; gap: 40px; }
  .sy-feat-grid { gap: 32px 16px; }
  .todo-panel { grid-template-columns: 1fr; max-width: 620px; }
  .ms-panel { grid-template-columns: 1fr; gap: 32px; max-width: 560px; }
  .ms-tabs { max-width: 100%; }
  .todo-left { padding-bottom: 46px; }
  .todo-grid { grid-template-rows: auto; }
  .flow-lane { flex-direction: column; gap: 14px; margin-bottom: 40px; }
  .flow-side { flex-direction: row; gap: 10px; padding-top: 0; }
  .flow-track { overflow-x: auto; padding-bottom: 6px; }
  .flow-step { flex: 0 0 auto; }
  .flow-notes { grid-template-columns: 1fr; }
  .dev-grid { grid-template-columns: 1fr 1fr; }
  .why-grid { grid-template-columns: 1fr; gap: 30px; margin-top: 40px; }
  .sec-industry .container { max-width: 100%; }
  .ind-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; }
  .ind-grid .ind-card { width: auto; height: 216px; padding: 34px 26px; border-radius: 12px; }
  .ind-grid .ind-card h3 { font-size: 26px; margin-bottom: 16px; }
  .ind-photo { width: 96px; height: 96px; right: 18px; bottom: 16px; }
  .sol-page { padding: 40px 0 48px; }
  .sol-head { margin-bottom: 36px; }
  .sol-head h1 { font-size: 34px; }
  .sol-body { grid-template-columns: 1fr; gap: 34px; }
  .sol-figure { width: 100%; max-width: 560px; height: auto; aspect-ratio: 1 / 1; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .section { padding: 52px 0; }
  .section-head h2 { font-size: 24px; }
  .hero-text h1 { font-size: 28px; }
  .online-consult { right: 14px; bottom: 0; padding: 9px 15px; font-size: 14px; }
  .online-consult svg { width: 17px; height: 17px; flex: 0 0 17px; }

  .nav-menu {
    position: absolute; top: var(--nav-h); left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: #fff; border-bottom: 1px solid var(--c-border);
    max-height: 0; overflow: hidden; transition: max-height .3s ease;
  }
  .nav-menu.open { max-height: 460px; }
  .nav-menu > li > a { padding: 14px 20px; border-radius: 0; border-bottom: 1px solid var(--c-border); }
  .nav-phone { display: none; }
  .nav-toggle { display: block; }
  .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .sub-banner { height: 260px; }
  .sub-banner h1 { font-size: 24px; }
  .sub-banner .sub-title { font-size: 18px; }
  .sub-banner .sub-desc { font-size: 13px; }
  .sub-banner-btns { flex-wrap: wrap; }
  .sub-banner .container { padding-left: 20px; padding-right: 20px; }
  .why-formula { font-size: 13px; padding: 12px 14px; }
  .why-formula b { font-size: 15px; }
  .steps { grid-template-columns: 1fr; }
  .fc-grid--4 { grid-template-columns: 1fr; }
  .sy-feat-grid { grid-template-columns: 1fr 1fr; }
  .todo-sec { padding: 56px 0 64px; }
  .ms-tabs { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; }
  .ms-panel { max-width: 100%; }
  .ms-tag { min-width: 84px; padding: 7px 14px; font-size: 13px; }
  .todo-grid { grid-template-columns: 1fr; grid-template-rows: auto; gap: 56px; }
  .todo-card { max-width: 340px; margin: 0 auto; width: 100%; }
  .dev-grid { grid-template-columns: 1fr; }
  .ind-grid { grid-template-columns: 1fr; gap: 24px; }
  .ind-grid .ind-card { width: auto; height: 200px; padding: 28px 22px; border-radius: 12px; }
  .ind-grid .ind-card h3 { font-size: 24px; margin-bottom: 14px; max-width: 62%; }
  .ind-grid .ind-card .ind-line1, .ind-grid .ind-card .ind-line2 { max-width: 64%; font-size: 13.5px; }
  .ind-photo { width: 88px; height: 88px; right: 16px; bottom: 14px; }
  .ind-grid .ind-card:hover .ind-photo { border-radius: 12px; }
  .sol-head h1 { font-size: 30px; }
  .sol-head p { font-size: 15px; }
  .sol-h2 { font-size: 20px; }
  .sol-h2--blue { margin-top: 30px; }
  .sol-figure { max-width: 100%; aspect-ratio: 1 / 1; }
  .sol-next .container { justify-content: center; }
  .sol-next-btn { height: 44px; padding: 0 26px; font-size: 14px; }
  .footer-grid { grid-template-columns: 1fr; }
  .news-item { grid-template-columns: 1fr; }
  .news-item img { width: 100%; height: 180px; }
}

/* ============ 12.22 会员积分页 ============ */
.sub-banner--points {
  background: linear-gradient(120deg, #124880 0%, #1960A8 55%, #1a8fed 100%);
}
/* banner 整图置入（文案含于图内） */
.sub-banner--pic {
  height: auto;
  display: block;
}
.sub-banner--pic .sub-banner-pic {
  display: block;
  width: 100%;
  height: auto;
}
.mp-flow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.mp-step {
  position: relative; text-align: center;
  background: #fff; border: 1px solid var(--c-border); border-radius: 12px;
  padding: 34px 24px;
}
.mp-step .num {
  width: 48px; height: 48px; line-height: 48px; border-radius: 50%;
  background: var(--c-primary); color: #fff; font-size: 20px; font-weight: 700;
  margin: 0 auto 16px;
}
.mp-step h3 { font-size: 18px; color: var(--c-text); margin-bottom: 12px; }
.mp-step p { font-size: 14px; color: var(--c-text-light); line-height: 2; }

.mp-value { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 40px; max-width: 920px; margin: 0 auto; }
.mp-value li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; color: var(--c-text); line-height: 1.8; }
.mp-value .ck { flex: 0 0 24px; width: 24px; height: 24px; border-radius: 50%; background: var(--c-accent-soft); color: var(--c-primary); display: flex; align-items: center; justify-content: center; }
.mp-value .ck svg { width: 15px; height: 15px; }

.mp-rel { text-decoration: none; transition: box-shadow .2s ease, transform .2s ease; }
.mp-rel:hover { box-shadow: var(--shadow-hover); transform: translateY(-4px); }
.mp-rel .mp-more { display: inline-block; margin-top: 14px; color: var(--c-primary); font-size: 14px; font-weight: 600; }

/* 12.24 会员积分页-一切从数字化开始（参考 fanchi315 tid=4 + 52.jpg） */
.mp-digital-intro { max-width: 760px; margin: -6px auto 52px; text-align: center; font-size: 15px; color: var(--c-text-muted); line-height: 2.1; }
.mp-digital-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; max-width: 1020px; margin: 0 auto; }
.mp-di { text-align: center; }
.mp-di .ic { display: flex; justify-content: center; margin-bottom: 16px; }
.mp-di .ic svg { width: 80px; height: 80px; }
.mp-di .ic img { width: 80px; height: 80px; object-fit: contain; }
.mp-di h3 { font-size: 16px; font-weight: 400; color: var(--c-text); }
@media (max-width: 980px) {
  .mp-digital-grid { grid-template-columns: 1fr 1fr; gap: 36px 16px; }
}
@media (max-width: 640px) {
  .mp-digital-grid { grid-template-columns: 1fr 1fr; }
  .mp-digital-intro { font-size: 14px; }
}

/* 12.25 会员积分页-轻松三部曲（三部曲大图 + 4 条说明文字，参考 fanchi315 tid=4） */
.mp-trio { max-width: 900px; margin: 0 auto; }
.mp-trio-img { display: block; width: 100%; height: auto; border-radius: 8px; }
.mp-trio-list { list-style: none; margin: 26px 0 0; padding: 0; text-align: center; }
.mp-trio-list li { font-size: 15px; color: var(--c-text); line-height: 2; }
.mp-trio-list li strong { font-weight: 600; color: var(--c-title); }
@media (max-width: 640px) {
  .mp-trio-list li { font-size: 14px; }
}

/* 12.23 会员积分页-我们的优势（1900px 通栏背景图 + 白色文字叠加，参考 50.jpg） */
.mp-benefits {
  position: relative;
  background: #241a10 url(../images/member-points-benefits-01.png) center/cover no-repeat;
  padding: 78px 0 88px;
}
.mp-benefits::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .42); }
.mp-benefits .container { position: relative; z-index: 1; }
.mp-benefits-head { text-align: center; margin-bottom: 56px; }
.mp-benefits-head h2 {
  position: relative; display: inline-block; padding-bottom: 20px;
  font-size: 28px; font-weight: 400; letter-spacing: 4px; color: #fff;
}
.mp-benefits-head h2::after {
  content: ""; position: absolute; left: 50%; transform: translateX(-50%); bottom: 0;
  width: 230px; height: 2px; background: #fff;
}
.mp-benefits-head h2::before {
  content: ""; position: absolute; left: 50%; transform: translateX(-50%); bottom: -2px;
  width: 30px; height: 6px; background: #EC993E; z-index: 1;
}
.mp-benefits-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.mp-bi { text-align: center; padding: 6px 26px; border-left: 1px solid rgba(255, 255, 255, .35); }
.mp-bi:first-child { border-left: 0; }
.mp-bi .ic { display: flex; justify-content: center; color: #fff; margin-bottom: 20px; }
.mp-bi .ic svg { width: 58px; height: 58px; }
.mp-bi .ic img { width: 58px; height: 58px; object-fit: contain; }
.mp-bi .ic--grow svg { width: 70px; height: 70px; }
.mp-bi .ic svg [stroke] { fill: none; }
.mp-bi .ic svg text { fill: currentColor; stroke: none; }
.mp-bi h3 { font-size: 18px; font-weight: 400; color: #fff; margin-bottom: 14px; }
.mp-bi p { font-size: 14px; color: rgba(255, 255, 255, .88); line-height: 2; }
@media (max-width: 980px) {
  .mp-benefits-grid { grid-template-columns: 1fr 1fr; gap: 34px 0; }
  .mp-bi:nth-child(3) { border-left: 0; }
}
@media (max-width: 640px) {
  .mp-benefits-grid { grid-template-columns: 1fr; }
  .mp-bi { border-left: 0; padding: 6px 16px; }
}

/* 会员积分页 响应式 */
@media (max-width: 980px) {
  .mp-flow { grid-template-columns: 1fr; }
  .mp-value { grid-template-columns: 1fr; }
}

/* ---------- 12.20 关于我们图片轮播（3 图：办公室/生产车间/产品检测，参考 fanchi315 tid=6） ---------- */
.ab-carousel { width: 100%; }
.ab-viewport { position: relative; overflow: hidden; border-radius: var(--radius); box-shadow: var(--shadow); }
.ab-track { display: flex; transition: transform .5s ease; }
.ab-slide { flex: 0 0 100%; margin: 0; position: relative; }
.ab-slide img { width: 100%; aspect-ratio: 11 / 8; object-fit: cover; display: block; border-radius: 0; box-shadow: none; }
/* 文字说明：覆盖在图片底部的半透明黑色遮罩（参考 41.jpg），白字居中 */
.ab-slide figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  text-align: center; font-size: 15px; color: #fff;
  padding: 10px 0; background: rgba(0,0,0,.45); letter-spacing: 2px;
}
/* 左右箭头：半透明圆钮，悬停加深 */
.ab-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; border-radius: 50%; border: none;
  background: rgba(0,0,0,.28); color: #fff; font-size: 24px; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background .2s; z-index: 2;
}
.ab-arrow:hover { background: rgba(0,0,0,.5); }
.ab-prev { left: 12px; }
.ab-next { right: 12px; }
/* 圆点指示器：图片说明下方居中 */
.ab-dots { display: flex; justify-content: center; gap: 10px; padding: 14px 0 2px; }
.ab-dots button {
  width: 10px; height: 10px; border-radius: 50%; border: none; padding: 0;
  background: #C7D6E6; cursor: pointer; transition: all .2s;
}
.ab-dots button.on { background: var(--c-primary); width: 26px; border-radius: 999px; }

@media (max-width: 980px) {
  .ab-slide img { aspect-ratio: 4 / 3; }
  .ab-slide figcaption { font-size: 14px; padding: 8px 0; }
  .ab-arrow { width: 34px; height: 34px; font-size: 20px; }
}
@media (max-width: 640px) {
  .ab-slide img { aspect-ratio: 4 / 3; }
  .ab-arrow { width: 30px; height: 30px; font-size: 18px; }
  .ab-prev { left: 8px; }
  .ab-next { right: 8px; }
}

/* ---------- 12.21 新闻动态页（参考 lmbzcl.com/xinwendongtai：居中标题 + 白卡横条列表，左侧大日期、右侧标题摘要） ---------- */
.news-page-title { text-align: center; font-size: 32px; color: var(--c-title); margin-bottom: 36px; }
.nl-list { display: flex; flex-direction: column; gap: 22px; }
.nl-item {
  display: grid; grid-template-columns: 110px 1fr; gap: 40px; align-items: center;
  background: #fff; border-radius: 6px; padding: 34px 46px;
  transition: box-shadow .25s ease, transform .25s ease;
}
.nl-item:hover { box-shadow: 0 12px 30px rgba(25,96,168,.10); transform: translateY(-2px); }
.nl-date { text-align: center; color: var(--c-title); }
.nl-date strong { display: block; font-size: 46px; font-weight: 600; line-height: 1; }
.nl-date span { display: block; margin-top: 10px; font-size: 14px; color: var(--c-text-muted); }
.nl-body h3 { font-size: 19px; color: var(--c-title); line-height: 1.5; margin-bottom: 12px; }
.nl-item:hover .nl-body h3 { color: var(--c-primary); }
.nl-body p {
  font-size: 14px; color: var(--c-text-muted); line-height: 1.9;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
@media (max-width: 980px) {
  .nl-item { grid-template-columns: 90px 1fr; gap: 26px; padding: 26px 28px; }
  .nl-date strong { font-size: 38px; }
  .news-page-title { font-size: 28px; }
}
@media (max-width: 640px) {
  .nl-item { grid-template-columns: 1fr; gap: 14px; padding: 22px 20px; }
  .nl-date { text-align: left; display: flex; align-items: baseline; gap: 10px; }
  .nl-date strong { font-size: 30px; }
  .nl-date span { margin-top: 0; }
  .nl-body h3 { font-size: 17px; }
}


/* ---------- 溯源页·为什么选择我们（参考 panpass 功能描述：2×2 横排卡片 + 彩色圆形图标） ---------- */
.fc-grid--desc { display: grid; grid-template-columns: 1fr 1fr; gap: 31px; }
.fcd-card {
  display: flex; align-items: center; gap: 31px;
  background: #fff; border: 1px solid var(--c-border);
  padding: 39px 36px;
  transition: box-shadow .25s ease, border-top .25s ease;
}
.fcd-card:hover { box-shadow: var(--shadow-hover); border-top: 3px solid var(--c-primary); }
.fcd-ic {
  flex: 0 0 83px; width: 83px; height: 83px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.fcd-ic svg { width: 47px; height: 47px; }
.fcd-card p { font-size: 18px; color: var(--c-text-muted); line-height: 1.9; }
.fcd-card p strong { color: var(--c-text); font-size: 19px; }
@media (max-width: 980px) {
  .fc-grid--desc { gap: 21px; }
  .fcd-card { padding: 31px 26px; gap: 21px; }
  .fcd-ic { flex: 0 0 70px; width: 70px; height: 70px; }
  .fcd-ic svg { width: 42px; height: 42px; }
}
@media (max-width: 640px) {
  .fc-grid--desc { grid-template-columns: 1fr; }
}

/* ---------- 12.26 品质溯源页（参考 panpass pzsy.html：价值4卡 + 左右图文 + 全链路流程 + 客户信赖） ---------- */
/* 价值主张 4 卡 */
.value-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.value-card { background: #fff; border: 1px solid var(--c-border); border-radius: 10px; padding: 34px 26px; text-align: center; transition: box-shadow .25s, transform .25s; }
.value-card:hover { box-shadow: 0 14px 40px rgba(0,0,0,.12); transform: translateY(-4px); }
.value-card .ic { width: 56px; height: 56px; margin: 0 auto 18px; display: flex; align-items: center; justify-content: center; }
.value-card .ic svg { width: 100%; height: 100%; }
.value-card h3 { font-size: 18px; color: var(--c-text); margin-bottom: 12px; }
.value-card p { font-size: 14px; color: var(--c-text-muted); line-height: 1.8; }
/* 左右图文交替 */
.feat-alternate { display: flex; align-items: center; gap: 56px; margin-bottom: 48px; }
.feat-alternate:last-child { margin-bottom: 0; }
.feat-alternate.reverse { flex-direction: row-reverse; }
.fa-media { flex: 0 0 46%; }
.fa-media img { width: 100%; height: auto; display: block; border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.08); }
.fa-text { flex: 1; }
.fa-no { display: inline-block; font-size: 14px; font-weight: 700; color: #fff; background: var(--c-primary); border-radius: 999px; padding: 4px 14px; margin-bottom: 14px; }
.fa-text h3 { font-size: 24px; color: var(--c-text); margin-bottom: 16px; }
.fa-text > p { font-size: 15px; color: var(--c-text-muted); line-height: 1.9; margin-bottom: 16px; }
.fa-list { list-style: none; padding: 0; margin: 0; }
.fa-list li { position: relative; padding-left: 22px; font-size: 14px; color: var(--c-text-muted); line-height: 2; }
.fa-list li::before { content: ""; position: absolute; left: 0; top: 12px; width: 7px; height: 7px; border-radius: 50%; background: var(--c-accent); }
/* 全链路流程 */
.chain-desc { text-align: center; color: var(--c-text-muted); font-size: 15px; margin: -6px 0 36px; }
.chain-flow { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px 14px; }
.chain-node { display: flex; flex-direction: column; align-items: center; gap: 12px; flex: 0 0 auto; }
.chain-dot { width: 54px; height: 54px; border-radius: 50%; background: var(--c-primary); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 18px; box-shadow: 0 6px 16px rgba(25,96,168,.28); }
.chain-node p { margin: 0; font-size: 15px; color: var(--c-text); }
/* 客户信赖 */
.trust-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.trust-card { background: #fff; border: 1px solid var(--c-border); border-radius: 10px; padding: 30px 26px; display: flex; flex-direction: column; }
.trust-quote { font-size: 14px; color: var(--c-text-muted); line-height: 1.9; flex: 1; }
.trust-from { margin-top: 18px; font-size: 13px; color: var(--c-text-light); }
/* CTA */
.cta-band { background: var(--c-primary); text-align: center; color: #fff; }
.cta-band h2 { color: #fff; font-size: 26px; margin-bottom: 12px; }
.cta-band p { color: rgba(255,255,255,.85); font-size: 15px; margin-bottom: 24px; }
.cta-band .btn-solid {
  display: inline-flex; align-items: center; justify-content: center;
  height: 44px; padding: 0 36px; font-size: 15px; border-radius: 3px;
  border: 1px solid transparent;
  background: #fff; color: var(--c-primary); transition: all .25s;
}
.cta-band .btn-solid:hover { background: var(--c-accent-soft); }
/* 响应式 */
@media (max-width: 980px) {
  .value-grid { grid-template-columns: repeat(2, 1fr); }
  .feat-alternate, .feat-alternate.reverse { flex-direction: column; gap: 24px; align-items: stretch; }
  .fa-media { flex: none; }
  .trust-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .value-grid { grid-template-columns: 1fr; }
  .fa-text h3 { font-size: 20px; }
}