/* ==========================================================================
   臻牛生物 ZHENEW BIO — 官网样式表
   --------------------------------------------------------------------------
   纯静态、无框架、无外部 CDN。全站视觉由本文件顶部的设计变量驱动：
   改色 / 改圆角 / 改阴影，只动 :root，不必逐页翻。

   设计约束（刻意保持克制）：
     · 只有 1 个主色（品牌红，取自企业 logo 的牛角），其余全部是中性灰阶
     · 1 套圆角、1 套阴影、1 套间距，不即兴发挥
     · 正文行长锁定在 68ch（中文约 34 字/行），见 --measure
   ========================================================================== */

:root {
  /* ---- 主色：品牌正红（取自 logo 牛角），全站唯一强调色 ---- */
  --brand:          #D0202C;
  --brand-press:    #AE1A24;   /* 按下 / hover 加深 */
  --brand-tint:     #FDF2F3;   /* 极浅底，用于图标底板 */
  --brand-ring:     rgba(208, 32, 44, .14);
  --brand-on-dark:  #FF5661;   /* 深底上的红，提亮保证对比度 ≥ 4.5:1 */

  /* ---- 中性灰阶（略带冷调，比纯灰更接近医药 / 生物科技观感）---- */
  --n-0:    #FFFFFF;
  --n-25:   #FBFBFC;
  --n-50:   #F5F6F8;
  --n-100:  #ECEEF1;
  --n-200:  #DFE2E7;
  --n-300:  #C8CDD5;   /* 描边 */
  --n-400:  #98A0AB;   /* 占位符 / 极弱信息 */
  --n-500:  #69717D;   /* 次级文字 */
  --n-600:  #4A525E;   /* 正文 */
  --n-700:  #333A44;
  --n-800:  #1B2027;
  --n-900:  #0D1116;   /* 标题 */
  --n-950:  #070A0E;   /* 深色区块底 */

  /* 语义别名 */
  --bg:           var(--n-0);
  --bg-soft:      var(--n-50);
  --bg-dark:      var(--n-950);
  --bg-dark-card: #10151B;
  --text:         var(--n-600);
  --text-strong:  var(--n-900);
  --text-muted:   var(--n-500);
  --text-faint:   var(--n-400);
  --line:         var(--n-200);
  --line-strong:  var(--n-300);
  --line-dark:    rgba(255, 255, 255, .10);
  --text-on-dark:      rgba(255, 255, 255, .68);
  /* 深色底上的次要文字。
     【2026-10-09 提高】原来是 .48 —— 在首屏近黑底（#0D1116）上实测对比度只有 **4.98:1**，
     刚过 WCAG AA 的 4.5 线，但视觉上"发闷、看不清"（老板反馈"这个看不清楚"）。
     提到 .60 后对比度 **7.22:1**，读起来才舒服。
     这个变量同时用于：首屏说明、深色区统计标签、面包屑、页脚链接 —— 一起变清楚，且仍是"次要文字"的层级。
     （别用"能过 AA 就行"当理由压低它：4.5:1 是及格线，不是舒适线。） */
  --text-on-dark-mut:  rgba(255, 255, 255, .60);

  /* ---- 圆角：一套 5 档，全站只用这几个 ---- */
  --r-xs:   6px;
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   16px;
  --r-xl:   24px;
  --r-pill: 999px;

  /* ---- 阴影：靠描边分层，阴影只做极轻的托举 ---- */
  --sh-1: 0 1px 2px rgba(13, 17, 22, .05);
  --sh-2: 0 1px 3px rgba(13, 17, 22, .05), 0 10px 26px -14px rgba(13, 17, 22, .18);
  --sh-3: 0 2px 6px rgba(13, 17, 22, .06), 0 28px 64px -34px rgba(13, 17, 22, .38);
  --sh-brand: 0 10px 26px -14px rgba(208, 32, 44, .85);

  /* ---- 布局 ---- */
  --w-page:  1200px;
  --w-text:  760px;
  --measure: 68ch;        /* 正文行长：中文 ≈ 34 字/行，西文 68 字符/行 */
  --nav-h:   68px;
  --sec-y:   clamp(64px, 7.5vw, 116px);
  --gutter:  32px;

  /* ---- 字体 ---- */
  --font: -apple-system, "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB",
          "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Mono",
          Menlo, Consolas, "Courier New", monospace;

  /* ---- 动效 ---- */
  --ease: cubic-bezier(.4, 0, .2, 1);
}

/* ==========================================================================
   1. 基础重置
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 16px);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.75;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;          /* 兜底：任何一处溢出都不产生横向滚动条 */
}

h1, h2, h3, h4 {
  margin: 0;
  color: var(--text-strong);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.02em;
  text-wrap: balance;          /* 支持时避免标题尾行只剩一两个字 */
}
h1 { font-size: clamp(2.05rem, 1.32rem + 3.1vw, 3.6rem); font-weight: 800; line-height: 1.12; letter-spacing: -.035em; }
h2 { font-size: clamp(1.6rem, 1.18rem + 1.8vw, 2.5rem); line-height: 1.2; letter-spacing: -.028em; }
h3 { font-size: clamp(1.05rem, 1rem + .3vw, 1.22rem); line-height: 1.4; letter-spacing: -.015em; }
h4 { font-size: 1rem; line-height: 1.5; letter-spacing: -.01em; }

p { margin: 0; }
a { color: var(--brand); text-decoration: none; transition: color .18s var(--ease); }
a:hover { color: var(--brand-press); }
img, svg { max-width: 100%; }
img { display: block; height: auto; }
ul, ol { margin: 0; padding: 0; list-style: none; }
strong, b { color: var(--text-strong); font-weight: 600; }
button { font: inherit; }

:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: var(--r-xs); }
::selection { background: var(--brand); color: #fff; }

/* 仅屏幕阅读器 */
.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;
}

/* 键盘用户跳过导航 */
.skip-link {
  position: absolute; left: 16px; top: -100px; z-index: 200;
  padding: 12px 20px; border-radius: var(--r-sm);
  background: var(--n-900); color: #fff; font-size: 14px; font-weight: 600;
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 12px; color: #fff; }

/* ==========================================================================
   2. 布局骨架
   ========================================================================== */
.container {
  width: 100%;
  max-width: var(--w-page);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--text { max-width: calc(var(--w-text) + var(--gutter) * 2); }
.container--narrow { max-width: 880px; }

main { display: block; }

.section { padding: var(--sec-y) 0; }
.section--soft { background: var(--bg-soft); }
.section--tight { padding-block: clamp(48px, 5vw, 72px); }
.section--flush-top { padding-top: 0; }

.section--dark {
  background: var(--bg-dark);
  color: var(--text-on-dark);
}
.section--dark h1, .section--dark h2,
.section--dark h3, .section--dark h4, .section--dark b { color: #fff; }
.section--dark a { color: var(--brand-on-dark); }
.section--dark a:hover { color: #fff; }

/* 章节标题组 */
.section-head { max-width: var(--measure); margin-bottom: clamp(36px, 4vw, 56px); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head > p { margin-top: 18px; }

/* 章节标签：等宽 + 大写 + 大字距 */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brand);
  line-height: 1;
}
.eyebrow::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
.section--dark .eyebrow { color: var(--brand-on-dark); }

.lead {
  max-width: var(--measure);
  font-size: clamp(1rem, .95rem + .22vw, 1.09rem);
  line-height: 1.8;
  color: var(--text);
}
.section--dark .lead { color: var(--text-on-dark); }
.section-head--center > .lead { margin-inline: auto; }

/* ==========================================================================
   3. 按钮
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 26px;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  transition: background .18s var(--ease), color .18s var(--ease),
              border-color .18s var(--ease), box-shadow .18s var(--ease),
              transform .18s var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary { background: var(--brand); color: #fff; box-shadow: var(--sh-brand); }
.btn--primary:hover { background: var(--brand-press); color: #fff; }

.btn--outline { background: transparent; border-color: var(--line-strong); color: var(--text-strong); }
.btn--outline:hover { border-color: var(--n-900); background: var(--n-50); color: var(--text-strong); }

.btn--dark { background: var(--n-900); color: #fff; }
.btn--dark:hover { background: #000; color: #fff; }

.btn--on-dark { background: #fff; color: var(--n-900); }
.btn--on-dark:hover { background: #E7E9ED; color: var(--n-900); }

/* 深色底上的"幽灵"按钮（最弱一级）。
   【2026-10-09 提高】边框原为 24% 白 → 在近黑底上对比度只有 2.05:1，
   比修好之后的次级描边按钮（62%）糊得多，三个按钮并排时它看起来像"没框"。
   提到 34%（~3.4:1）：满足非文本对比度 3:1 的下限，同时仍是三档里最弱的一档
   （不加背景填充，与次级按钮的"淡底 + 亮边"区分开，层级不乱）。 */
.btn--ghost-dark { background: transparent; border-color: rgba(255, 255, 255, .34); color: #fff; }
.btn--ghost-dark:hover { background: rgba(255, 255, 255, .09); border-color: rgba(255, 255, 255, .52); color: #fff; }

/* 深色底上的浅色描边按钮。
   为什么需要：`.btn--outline` 用的是 `--line-strong`(#n-300) 边框 + `--text-strong`(#n-900) 文字，
   那是**浅色背景**的配色；放在深色首屏（.hero / .page-hero）上等于看不见。
   首屏加"首次合作·提交采购需求"这个次级按钮时踩到过，所以单独给深色区一个变体。

   【2026-10-09 提高可读性】边框原来只有 42% 白 → 在近黑底上对比度 4.10:1，低于正文标准，
   按钮轮廓几乎看不出来（老板反馈"这个看不清楚"）。现在：
     · 边框提到 62% 白（对比度 ~7.7:1）
     · 背景加一层极淡的白（4%），让按钮先"有形"，再靠边框和文字建立层级 ——
       深色底上纯透明 + 细边框的次级按钮最容易糊在背景里。
   与主按钮（实心品牌红）的层级差别仍然清楚，不会抢主按钮的注意力。 */
.btn--outline-on-dark { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .62); color: #fff; }
.btn--outline-on-dark:hover { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .82); color: #fff; }

.btn--sm { padding: 11px 20px; font-size: 14px; }
.btn--block { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(28px, 3vw, 40px); }

/* 带箭头的文字链接 */
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--brand);
}
.text-link::after { content: "→"; transition: transform .18s var(--ease); }
.text-link:hover::after { transform: translateX(3px); }

/* ==========================================================================
   4. 顶部导航
   ========================================================================== */
/* 导航固定白底：logo 是黑字 + 透明底的横版组合，压在深色上无法辨认。
   与其在深色导航里垫白牌子，不如导航直接白底——更干净，也少一堆滚动切换的边缘情况。 */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #fff;
  border-bottom: 1px solid transparent;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.site-header.is-scrolled {
  border-bottom-color: var(--line);
  box-shadow: 0 1px 16px -10px rgba(13, 17, 22, .5);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: var(--nav-h);
}

.brand { display: inline-flex; align-items: center; flex: none; border-radius: var(--r-sm); }
/* logo 是透明底 PNG，黑字压在白色导航上正好；
   ⚠️ 内边距只能给外面的容器，绝不能给 <img>：
   img 上同时设 padding + height 会把渲染盒挤扁，牛角尖端会被平切。 */
.brand-plate { display: inline-flex; align-items: center; padding: 3px 0; }
.brand-lockup { height: 30px; width: auto; }

.nav-links { display: flex; align-items: center; gap: 4px; }
.nav-links a {
  display: block;
  padding: 9px 14px;
  border-radius: var(--r-sm);
  color: var(--text);
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
  transition: color .18s var(--ease), background .18s var(--ease);
}
.nav-links a:hover { color: var(--text-strong); background: var(--n-50); }
.nav-links a.is-active { color: var(--brand); font-weight: 600; }
.nav-links .btn { display: none; }         /* 桌面端 CTA 放在 .nav-cta，避免重复 */

.nav-cta { display: flex; align-items: center; gap: 10px; flex: none; }

.nav-toggle {
  display: none;
  width: 40px; height: 40px;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: #fff;
  cursor: pointer;
  flex: none;
}
.nav-toggle span {
  display: block;
  width: 16px; height: 1.5px;
  margin: 4px auto;
  background: var(--n-900);
  border-radius: 2px;
  transition: transform .2s var(--ease), opacity .2s var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

/* 移动端抽屉的遮罩：桌面端恒不显示 */
.nav-scrim {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(7, 10, 14, .38);
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s var(--ease), visibility .2s;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.nav-scrim.is-open { opacity: 1; visibility: visible; }

/* ==========================================================================
   5. 首屏
   ========================================================================== */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(56px, 7vw, 104px) 0 clamp(64px, 7vw, 112px);
  background: var(--bg-dark);
  color: var(--text-on-dark);
}
.hero h1 { color: #fff; }
.hero .lead { color: var(--text-on-dark); }
.hero h1 em { font-style: normal; color: var(--brand-on-dark); }

/* 红色光晕 + 网格，克制地铺氛围 */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(720px 420px at 78% 2%, rgba(208, 32, 44, .30), transparent 62%),
    radial-gradient(560px 400px at 8% 100%, rgba(208, 32, 44, .13), transparent 66%);
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
  background-size: 68px 68px;
  -webkit-mask-image: radial-gradient(700px 500px at 68% 22%, #000, transparent 76%);
  mask-image: radial-gradient(700px 500px at 68% 22%, #000, transparent 76%);
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(40px, 5vw, 72px);
  align-items: center;
}
.hero h1 { margin-bottom: 22px; }
.hero .lead { margin-top: 0; }

.hero-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 30px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-on-dark-mut);
}
.hero-note svg { flex: none; margin-top: 2px; color: var(--brand-on-dark); }

/* 深色区里的粗体跟着父级颜色走。
   为什么需要：全局 `strong, b { color: var(--text-strong) }` 是浅色页面的配色（近黑），
   在 `.hero` / `.page-hero` 这类深色底上等于**看不见** ——
   首屏说明里"已合作机构""首次合作"两个强调词就因此消失过（截图发现）。
   这里用 `inherit` 让它们跟随所在段落的颜色，浅色区不受影响。 */
.hero b, .hero strong, .page-hero b, .page-hero strong, .section--dark b, .section--dark strong {
  color: inherit;
}

/* 首屏右侧：业务概览面板 */
.hero-panel {
  padding: 8px;
  border: 1px solid var(--line-dark);
  border-radius: var(--r-lg);
  background: linear-gradient(158deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .015));
  box-shadow: 0 40px 80px -44px rgba(0, 0, 0, .95);
}
.hero-panel-inner {
  padding: 22px 22px 8px;
  border-radius: calc(var(--r-lg) - 4px);
  background: rgba(7, 10, 14, .55);
}
.hero-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line-dark);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--text-on-dark-mut);
}
.hero-panel-head .live { display: inline-flex; align-items: center; gap: 7px; color: var(--brand-on-dark); flex: none; }
.hero-panel-head .live::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 4px rgba(255, 86, 97, .16);
}

.hero-panel dl { margin: 0; }
.hero-panel .row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line-dark);
}
.hero-panel .row:last-child { border-bottom: 0; }
.hero-panel dt { font-size: 14px; color: var(--text-on-dark-mut); }
.hero-panel dd {
  margin: 0;
  font-size: 21px;
  font-weight: 700;
  color: #fff;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
.hero-panel dd i { font-style: normal; font-size: 13px; font-weight: 500; color: var(--text-on-dark-mut); margin-left: 3px; }

/* ==========================================================================
   6. 信任条（首屏下沿的一条资质说明）
   ========================================================================== */
.trust-bar { border-bottom: 1px solid var(--line); background: var(--bg); }
.trust-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.trust-item {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 26px 24px;
  border-left: 1px solid var(--line);
}
.trust-item:first-child { border-left: 0; padding-left: 0; }
.trust-item:last-child { padding-right: 0; }
.trust-item svg { flex: none; color: var(--brand); }
.trust-item b { display: block; font-size: 14.5px; line-height: 1.4; }
.trust-item span { display: block; margin-top: 3px; font-size: 13px; line-height: 1.5; color: var(--text-muted); }

/* ==========================================================================
   7. 卡片网格
   ========================================================================== */
/* 网格用 1px 间隙 + 底色画分隔线，比逐个描边更干净 */
.grid {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.card {
  padding: clamp(26px, 2.6vw, 36px);
  background: var(--bg);
  transition: background .2s var(--ease);
}
.card:hover { background: var(--n-25); }
.card h3 { margin-bottom: 10px; }
.card > p { font-size: 14.5px; line-height: 1.75; }
.card .text-link { margin-top: 18px; }

.card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  margin-bottom: 20px;
  border-radius: var(--r-md);
  background: var(--brand-tint);
  color: var(--brand);
  transition: background .2s var(--ease), color .2s var(--ease);
}
.card-icon svg { width: 20px; height: 20px; }
.card:hover .card-icon { background: var(--brand); color: #fff; }

.card-index {
  display: block;
  margin-bottom: 16px;
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* 深色区块里的网格 */
.section--dark .grid { background: var(--line-dark); border-color: var(--line-dark); }
.section--dark .card { background: var(--bg-dark-card); }
.section--dark .card:hover { background: #151B22; }
.section--dark .card > p { color: var(--text-on-dark); }

/* 强调卡片（深色底、放在浅色网格中） */
.card--accent { background: var(--n-900); }
.card--accent:hover { background: var(--n-800); }
.card--accent h3, .card--accent b { color: #fff; }
.card--accent p { color: rgba(255, 255, 255, .62); }
.card--accent .btn { margin-top: 22px; }

/* ==========================================================================
   8. 数据条
   ========================================================================== */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--bg); }
.stat {
  padding: clamp(26px, 3vw, 38px) clamp(20px, 2.4vw, 30px);
  border-left: 1px solid var(--line);
}
.stat:first-child { border-left: 0; }
.stat b {
  display: block;
  font-size: clamp(1.9rem, 1.3rem + 2.2vw, 2.75rem);
  font-weight: 800;
  line-height: 1;
  color: var(--text-strong);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.045em;
}
.stat b i { font-style: normal; font-size: .5em; font-weight: 600; margin-left: 4px; letter-spacing: 0; }
.stat span { display: block; margin-top: 12px; font-size: 13.5px; line-height: 1.55; color: var(--text-muted); }

/* ⚠️ 深色区块里的数据条必须整体反色。
   上一版漏了这条：数字是 --ink（近黑）压在近黑底上，整排数字在线上是【看不见】的。 */
.section--dark .stats { background: transparent; border-color: var(--line-dark); }
.section--dark .stat { border-left-color: var(--line-dark); }
.section--dark .stat b { color: #fff; }
.section--dark .stat span { color: var(--text-on-dark-mut); }

/* ==========================================================================
   9. 流程步骤
   ========================================================================== */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.step { position: relative; padding-right: clamp(18px, 2.4vw, 34px); }
.step::before {
  content: "";
  position: absolute;
  top: 16px; left: 40px; right: 6px;
  height: 1px;
  background: var(--line);
}
.step:last-child { padding-right: 0; }
.step:last-child::before { display: none; }
.step-num {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 33px; height: 33px;
  margin-bottom: 20px;
  border-radius: 50%;
  background: var(--bg);
  border: 1.5px solid var(--brand);
  color: var(--brand);
  font-family: var(--mono);
  font-size: 12.5px;
  font-weight: 700;
}
.step h4 { margin-bottom: 8px; font-size: 16.5px; }
.step p { font-size: 14.5px; line-height: 1.72; }

/* ==========================================================================
   10. 图文分栏
   ========================================================================== */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 4.5vw, 64px); align-items: center; }
.split--aside { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); }
.split--top { align-items: start; }

/* 团队海报（941×1671 竖构图，自带深色底、上下边缘有 logo 与公司全称）。
   ⚠️ 绝不能用 cover —— 会裁掉边缘的 logo 和公司全称。
   做法：容器不设宽高比、不用 flex 居中、无内边距，高度完全由图片自身比例决定。
   ⚠️ 换图时三处要一起改：本行尺寸、index.html 里 <img> 的 width/height、图片文件本身；
      width/height 与实际文件不一致会造成布局跳动（CLS）。
   max-width 520px 是刻意留的：本页左右分栏右侧约 510px，海报在当前版式下已接近满宽。 */
.poster {
  display: block;
  max-width: 520px;
  width: 100%;
  margin-inline: auto;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-3);
}
.poster img { display: block; width: 100%; height: auto; }

/* ==========================================================================
   11. 公司信息卡（关于我们页 / 替代原「公司实拍图」占位框）
   ========================================================================== */
.profile-card {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg);
  box-shadow: var(--sh-2);
  overflow: hidden;
}
.profile-card__head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 26px 28px;
  background: var(--n-900);
  color: #fff;
}
.profile-card__head .mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  flex: none;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, .08);
  color: var(--brand-on-dark);
}
.profile-card__head .mark svg { width: 22px; height: 22px; }
.profile-card__head b { display: block; color: #fff; font-size: 16px; line-height: 1.35; }
.profile-card__head span {
  display: block; margin-top: 2px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: rgba(255, 255, 255, .48);
}
.profile-card dl { margin: 0; padding: 6px 28px 20px; }
.profile-card .row {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 16px;
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
}
.profile-card .row:last-child { border-bottom: 0; }
.profile-card dt { font-size: 13.5px; color: var(--text-muted); }
.profile-card dd { margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--text-strong); }
.profile-card dd small { display: block; margin-top: 4px; font-size: 13px; color: var(--text-muted); }

/* ==========================================================================
   12. 正文排版
   ========================================================================== */
.prose { max-width: var(--measure); }
.prose h2 { margin-bottom: 18px; }
.prose h3 { margin: 34px 0 12px; }
.prose > p + p { margin-top: 16px; }
.prose > p { line-height: 1.8; }
.prose ul { margin-top: 16px; }
.prose ul li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 11px;
  font-size: 15px;
  line-height: 1.72;
}
.prose ul li::before {
  content: "";
  position: absolute;
  top: 10px; left: 4px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--brand);
}

/* 产品事实卡片：注册证号、生产企业这类需要强调可信度的硬信息 */
.fact-box {
  max-width: var(--measure);
  margin-top: 26px;
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--brand);
  border-radius: var(--r-md);
  background: var(--n-25);
}
.fact-box > p { margin-bottom: 10px; font-size: 14px; color: var(--text-strong); font-weight: 600; }
.fact-box ul li {
  position: relative;
  padding-left: 15px;
  margin-bottom: 6px;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--text);
}
.fact-box ul li::before {
  content: "";
  position: absolute;
  top: 8px; left: 2px;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--brand);
}

/* ==========================================================================
   13. 品牌名牌（代理品牌页 / 替代原「产品实拍图」占位框）
   ========================================================================== */
/* 没有品牌方授权的 logo 素材，就不去伪造一个。改为把品牌名做成一块
   「名牌」：大字排版 + 该品牌的真实事实（品类、品项数、注册证），
   既诚实，也比空框好看。 */
.nameplate {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: linear-gradient(158deg, var(--n-50), var(--n-0) 72%);
  padding: clamp(26px, 3vw, 34px);
  box-shadow: var(--sh-1);
}
.nameplate__brand {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}
.nameplate__brand b {
  font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.1rem);
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--text-strong);
  line-height: 1.1;
}
.nameplate__brand em {
  font-style: normal;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .12em;
  color: var(--brand);
  text-transform: uppercase;
}
.nameplate ul { margin-top: 20px; }
.nameplate li {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 14px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
  line-height: 1.6;
}
.nameplate li:last-child { border-bottom: 0; padding-bottom: 0; }
.nameplate li span { color: var(--text-muted); }
.nameplate li b { color: var(--text-strong); font-weight: 600; }
.nameplate li small { display: block; margin-top: 3px; font-size: 12.5px; font-weight: 400; color: var(--text-faint); }
.nameplate__note {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--text-faint);
}

/* 品牌墙：三块名牌，桌面三列 */
.brand-wall { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.brand-chip {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 24px 26px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
}
.brand-chip:hover { border-color: var(--line-strong); box-shadow: var(--sh-2); transform: translateY(-2px); }
.brand-chip__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  flex: none;
  border-radius: var(--r-md);
  background: var(--brand-tint);
  color: var(--brand);
  font-size: 19px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.02em;
}
.brand-chip b { display: block; font-size: 17px; letter-spacing: -.015em; }
/* ⚠️ 选择器必须是 .brand-chip__sub 而不是 .brand-chip span ——
   后者（0,1,1）会盖掉 .brand-chip__mark（0,1,0）的 inline-flex 居中，
   导致汉字缩到 13px 并贴在方框左上角。 */
.brand-chip__sub { display: block; margin-top: 3px; font-size: 13px; color: var(--text-muted); }
.brand-chip a { position: absolute; inset: 0; }
.brand-chip { position: relative; }
.brand-chip a:focus-visible { border-radius: var(--r-lg); }

/* ==========================================================================
   14. 产品品类行（产品中心）
   ========================================================================== */
.product-row {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
  padding: clamp(36px, 4vw, 56px) 0;
  border-top: 1px solid var(--line);
}
.product-row:first-of-type { border-top: 0; padding-top: 0; }
.product-row:last-of-type { padding-bottom: 0; }
.product-aside h3 { font-size: 1.4rem; margin-bottom: 12px; }
.product-aside p { font-size: 14.5px; line-height: 1.75; max-width: 46ch; }

.tag {
  display: inline-block;
  margin-bottom: 14px;
  padding: 5px 11px;
  border-radius: var(--r-pill);
  background: var(--brand-tint);
  color: var(--brand-press);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.product-items {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.product-item { padding: 22px 24px; background: var(--bg); transition: background .2s var(--ease); }
.product-item:hover { background: var(--n-25); }
/* 品项数为奇数时，最后一项横跨两列。
   否则 2 列网格会剩一个空格子，露出网格底色（浅灰），看着像没做完。 */
.product-items > .product-item:last-child:nth-child(odd) { grid-column: 1 / -1; }
.product-item b { display: block; margin-bottom: 6px; font-size: 15px; line-height: 1.45; }
.product-item span { font-size: 13.5px; line-height: 1.68; color: var(--text-muted); }

/* ==========================================================================
   15. 资质徽章
   ========================================================================== */
.badge-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.badge { padding: 26px 22px; background: var(--bg); }
.badge svg { color: var(--brand); margin-bottom: 14px; }
.badge b { display: block; font-size: 14.5px; margin-bottom: 6px; }
.badge span { font-size: 13px; line-height: 1.6; color: var(--text-muted); }

/* ==========================================================================
   16. 联系方式 / 表单
   ========================================================================== */
.contact-list {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.contact-item { display: flex; gap: 15px; padding: 24px; background: var(--bg); }
.contact-item .card-icon { margin-bottom: 0; flex: none; width: 40px; height: 40px; }
.contact-item b { display: block; margin-bottom: 5px; font-size: 14.5px; }
.contact-item p { font-size: 14.5px; line-height: 1.7; }
.contact-item a { font-weight: 600; word-break: break-all; }

/* 到访 / 对接准备清单（联系页 / 替代原「地图嵌入代码」占位框） */
.prep-card {
  margin-top: 22px;
  padding: 26px 26px 22px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg-soft);
}
.prep-card h3 { font-size: 16.5px; margin-bottom: 6px; }
.prep-card > p { font-size: 14px; line-height: 1.7; color: var(--text-muted); }
.prep-card ol { margin-top: 18px; counter-reset: prep; }
.prep-card li {
  position: relative;
  counter-increment: prep;
  padding: 11px 0 11px 34px;
  border-top: 1px solid var(--line);
  font-size: 14.5px;
  line-height: 1.65;
}
.prep-card li::before {
  content: counter(prep, decimal-leading-zero);
  position: absolute;
  left: 0; top: 12px;
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--brand);
}
.prep-card li b { display: block; font-size: 14.5px; }
.prep-card li span { display: block; margin-top: 2px; font-size: 13.5px; color: var(--text-muted); }

.form { display: grid; gap: 18px; }
.form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }

.field { display: grid; gap: 7px; min-width: 0; }
.field label { font-size: 13.5px; font-weight: 600; color: var(--text-strong); }
.field label i { font-style: normal; color: var(--brand); }

.field input, .field select, .field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: #fff;
  font-family: inherit;
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-strong);
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.field textarea { resize: vertical; min-height: 124px; line-height: 1.7; }
.field select { appearance: none; background-image: none; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-ring);
}
/* 【2026-10-10 修复】placeholder 原用 --text-faint（#98A0AB），在白底上实测对比度仅 2.64:1，
   不达 WCAG AA 1.4.3（正文需 ≥4.5:1）—— 低视力或强光下读不到示例格式与「选填」提示。
   改用 --text-muted（#69717D，白底 4.93:1）。 */
.field input::placeholder, .field textarea::placeholder { color: var(--text-muted); }
.field .err { font-size: 12.5px; line-height: 1.5; color: var(--brand); }
.field.is-invalid input, .field.is-invalid select, .field.is-invalid textarea { border-color: var(--brand); }

.form-note { font-size: 12.5px; line-height: 1.6; color: var(--text-muted); }

/* 蜜罐字段：移出视口而非 display:none —— 部分爬虫会跳过 display:none 的字段，
   那样蜜罐就失效了。绝对定位挪走，同时保持它在 DOM 里可被填写。 */
.field--hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-status { display: none; padding: 14px 16px; border-radius: var(--r-md); font-size: 14px; line-height: 1.6; }
.form-status.is-ok  { display: block; background: #EFF8F3; border: 1px solid #BFE3D0; color: #1C6B45; }
.form-status.is-err { display: block; background: var(--brand-tint); border: 1px solid #F2C4C8; color: var(--brand-press); }

/* 提交方式二选一（投诉与建议页）。
   老板 2026-10-09 指出原先把"不用登录"和要求填个人信息混在一页里是**自相矛盾**的，
   于是拆成两种明确的方式：匿名提交（只写建议、不留信息）／直接提交（留称呼电话、我们回复）。

   为什么用 radio + label 而不是普通按钮：
     · 键盘可 Tab、方向键可切换，读屏软件会读成"单选"，无障碍天然正确；
     · 表单提交时 JS 直接读得到值，不需要额外维护一份"当前选中的是哪个"的状态；
     · 视觉上把整个 label 做成卡片，点击区域大，手机上不会点不中。 */
.mode-switch {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  border: 0;
}
.mode-switch__legend {
  padding: 0;
  margin-bottom: 2px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-strong);
}
.mode-opt {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: #fff;
  cursor: pointer;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.mode-opt:hover { border-color: var(--n-400, #9aa0a6); }
.mode-opt input {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: var(--brand);
}
.mode-opt__body { display: grid; gap: 3px; min-width: 0; }
.mode-opt__body b { font-size: 14.5px; }
.mode-opt__hint { font-size: 12.5px; line-height: 1.55; color: var(--text-muted); }
/* 选中态：整卡高亮，不只靠那个小圆点 —— 手机上一眼就能看出选的是哪个 */
.mode-opt:has(input:checked) {
  border-color: var(--brand);
  background: var(--brand-tint, #FDF2F3);
  box-shadow: inset 0 0 0 1px var(--brand);
}
.mode-opt:has(input:focus-visible) { outline: 2px solid var(--n-900); outline-offset: 2px; }

/* 匿名模式下整块隐藏联系方式。
   ⚠️ 用 [hidden] 时必须补一句 display:none（如 .mode-opt 是 flex 之类会盖掉它）——
   这里是 .contact-fields 默认 block，所以 [hidden] 够用；但为防止以后给它加 display，
   显式写一条更稳。 */
.contact-fields[hidden] { display: none; }

/* 「留了电话的」这类限定条件小标签（投诉与建议页的处理机制）。
   为什么要它：处理承诺只对留了联系方式的提交成立，匿名提交无从回复 ——
   不标出来就又是"上下矛盾"。 */
.step-cond {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text-muted);
  vertical-align: middle;
  white-space: nowrap;
}

/* 机构检索（采购需求单）：输入机构名时匹配我们库里的机构，选中后带 id 提交。
   只显示机构名 + 城市 —— 接口本身也只返回这两个字段，不暴露联系方式等内部信息。 */
.org-results {
  margin-top: 8px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: #fff;
  max-height: 260px;
  overflow-y: auto;
}
.org-tip, .org-none {
  padding: 10px 12px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--text-muted);
}
.org-none { border: 0; }
.org-item {
  display: block;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-top: 1px solid var(--line);
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background .15s var(--ease);
}
.org-item:first-of-type { border-top: 0; }
.org-item:hover, .org-item:focus-visible { background: var(--n-25); }
.org-item b { display: block; font-size: 14px; font-weight: 600; color: var(--text-strong); }
.org-item span { display: block; margin-top: 2px; font-size: 12.5px; color: var(--text-muted); }

.org-picked {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 8px;
  padding: 9px 12px;
  border: 1px solid #BFE3D0;
  border-radius: var(--r-md);
  background: #EFF8F3;
  font-size: 13px;
  color: #1C6B45;
}
/* ⚠️ 必须显式处理 [hidden]：类选择器 `.org-picked { display: flex }` 的优先级
   高于 HTML 的 `[hidden] { display: none }`（UA 样式表），所以只写 hidden 属性**藏不住它** ——
   采购页一打开就会出现一个空的绿色"已选中机构"框（实测踩过，客户会以为已经选了机构）。
   凡是"用 hidden 属性控制显隐 + 自己有 display 声明"的组件都要补这一行。 */
.org-picked[hidden] { display: none; }
.org-picked b { font-weight: 600; }
.org-picked button {
  flex: none;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 12.5px;
  color: var(--brand-press);
  text-decoration: underline;
  cursor: pointer;
}

/* ==========================================================================
   17. 常见问题
   ========================================================================== */
.faq { border-top: 1px solid var(--line); max-width: 880px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-strong);
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  flex: none;
  width: 22px;
  font-size: 21px;
  font-weight: 300;
  line-height: 1;
  text-align: center;
  color: var(--brand);
  transition: transform .2s var(--ease);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .faq-body {
  padding: 0 0 24px;
  max-width: var(--measure);
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--text);
}

/* ==========================================================================
   18. CTA 区块
   ========================================================================== */
.cta-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(56px, 6vw, 88px) 0;
  background: var(--bg-dark);
  color: var(--text-on-dark);
}
.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(680px 360px at 84% 50%, rgba(208, 32, 44, .28), transparent 66%);
}
.cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(28px, 4vw, 56px);
  flex-wrap: wrap;
}
.cta-inner h2 { color: #fff; max-width: 20ch; }
.cta-inner p { margin-top: 14px; max-width: 52ch; font-size: 15.5px; line-height: 1.7; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ==========================================================================
   19. 页头（内页）
   ========================================================================== */
.page-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(44px, 5vw, 76px) 0 clamp(40px, 4.5vw, 64px);
  background: var(--bg-dark);
  color: var(--text-on-dark);
}
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(620px 320px at 88% -10%, rgba(208, 32, 44, .24), transparent 68%);
}
.page-hero h1 { color: #fff; max-width: 18ch; }
.page-hero .lead { color: var(--text-on-dark); margin-top: 18px; }
.page-hero .btn-row { margin-top: 28px; }
.page-hero .btn-row .btn { padding: 9px 16px; font-size: 13.5px; }

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 20px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .06em;
  color: var(--text-on-dark-mut);
}
.breadcrumb a { color: var(--text-on-dark-mut); }
.breadcrumb a:hover { color: #fff; }
.breadcrumb span { color: rgba(255, 255, 255, .25); }

/* ==========================================================================
   20. 页脚
   ========================================================================== */
.site-footer {
  padding: clamp(52px, 5vw, 76px) 0 0;
  background: var(--bg-dark);
  color: var(--text-on-dark-mut);
  font-size: 14px;
  line-height: 1.7;
}
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) repeat(2, minmax(0, .85fr)) minmax(0, 1.3fr);
  gap: clamp(28px, 3.5vw, 48px);
  padding-bottom: clamp(36px, 4vw, 52px);
}
/* logo 是黑字透明底，深色页脚上必须垫白底才看得见。
   这里只是一块内边距极小的白贴片，不是图片自带的边框。 */
.site-footer .brand-plate {
  padding: 7px 12px;
  border-radius: var(--r-md);
  background: #fff;
}
.site-footer .brand-lockup { height: 26px; }
.site-footer .footer-about { margin-top: 20px; max-width: 34ch; }

.site-footer h4 { margin-bottom: 16px; color: #fff; font-size: 13.5px; letter-spacing: 0; }
.site-footer li { margin-bottom: 10px; }
.site-footer a { color: var(--text-on-dark-mut); }
.site-footer a:hover { color: #fff; }
.site-footer address { font-style: normal; }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 22px 0;
  border-top: 1px solid var(--line-dark);
  font-size: 12.5px;
  color: rgba(255, 255, 255, .60);
}
.footer-bottom p { margin: 0; }

/* ==========================================================================
   21. 滚动淡入
   --------------------------------------------------------------------------
   ⚠️ 初始隐藏状态挂在 .js 上，由 <head> 里的内联脚本给 <html> 加类。
   这样 JS 被禁用 / 加载失败时元素保持可见，不会出现整页空白。
   ========================================================================== */
.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity .55s var(--ease), transform .55s var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .btn:hover, .brand-chip:hover { transform: none; }
}

/* ==========================================================================
   22. 响应式
   ========================================================================== */

/* ---- 平板横向 / 小笔记本 ---- */
@media (max-width: 1040px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .hero-panel { max-width: 560px; }
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trust-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trust-item { padding: 22px 20px; border-top: 1px solid var(--line); }
  .trust-item:nth-child(-n+2) { border-top: 0; }
  .trust-item:nth-child(odd) { border-left: 0; padding-left: 0; }
  .trust-item:nth-child(even) { padding-right: 0; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 0; }
  .step:nth-child(2n)::before { display: none; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat:nth-child(odd) { border-left: 0; }
  .stat:nth-child(n+3) { border-top: 1px solid var(--line); }
  .section--dark .stat:nth-child(n+3) { border-top-color: var(--line-dark); }
  .split, .split--aside { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .split--top { align-items: stretch; }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px; }
  .product-row { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .product-aside p { max-width: var(--measure); }
  .brand-wall { grid-template-columns: minmax(0, 1fr); }
}

/* ---- 手机 ---- */
@media (max-width: 760px) {
  :root { --nav-h: 60px; --gutter: 20px; }

  /* --- 移动端导航抽屉 --- */
  .nav-toggle { display: block; }
  .nav-links {
    position: fixed;
    top: var(--nav-h);
    left: 0;
    right: 0;
    z-index: 95;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    max-height: calc(100dvh - var(--nav-h));
    overflow-y: auto;
    padding: 14px var(--gutter) 22px;
    background: #fff;
    border-bottom: 1px solid var(--line);
    box-shadow: 0 24px 44px -26px rgba(7, 10, 14, .55);
    transform: translateY(-10px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
  }
  .nav-links.is-open { transform: none; opacity: 1; visibility: visible; }
  .nav-links a { padding: 14px 12px; font-size: 16.5px; color: var(--text-strong); }
  .nav-links a.is-active { color: var(--brand); background: var(--brand-tint); }
  .nav-links .btn { display: inline-flex; margin-top: 12px; }
  .nav-cta .btn { display: none; }
  .brand-lockup { height: 26px; }

  /* --- 首屏 --- */
  .hero { padding: 40px 0 56px; }
  .hero-panel-inner { padding: 18px 18px 6px; }
  .hero-panel dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; }
  .hero-panel .row { display: block; padding: 14px 0; border-bottom: 1px solid var(--line-dark); }
  .hero-panel .row:nth-child(odd) { padding-right: 12px; }
  .hero-panel .row:nth-child(even) { padding-left: 12px; border-left: 1px solid var(--line-dark); }
  .hero-panel .row:nth-last-child(-n+2) { border-bottom: 0; }
  .hero-panel dd { margin-top: 5px; font-size: 19px; }
  .hero-note { margin-top: 24px; }

  /* --- 网格全部收成单列 --- */
  .grid--2, .grid--3, .grid--4 { grid-template-columns: minmax(0, 1fr); }
  .badge-grid { grid-template-columns: minmax(0, 1fr); }
  .trust-grid { grid-template-columns: minmax(0, 1fr); }
  .trust-item { border-left: 0; padding: 18px 0; border-top: 1px solid var(--line); }
  .trust-item:first-child { border-top: 0; }
  .trust-item:nth-child(2) { border-top: 1px solid var(--line); }

  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat { padding: 22px 16px; }
  .stat:nth-child(odd) { padding-left: 0; }
  .stat:nth-child(even) { padding-right: 0; }
  .stat:nth-child(n+3) { border-top: 1px solid var(--line); }
  .section--dark .stat:nth-child(n+3) { border-top-color: var(--line-dark); }

  .steps { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .step { padding: 0 0 30px 0; }
  .step::before { top: 38px; left: 16px; right: auto; width: 1px; height: calc(100% - 38px); }
  .step:last-child { padding-bottom: 0; }

  .product-items { grid-template-columns: minmax(0, 1fr); }
  .form-row { grid-template-columns: minmax(0, 1fr); }
  .footer-grid { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .nameplate li { grid-template-columns: 66px minmax(0, 1fr); gap: 12px; }
  .profile-card .row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .profile-card__head, .profile-card dl { padding-inline: 20px; }

  /* --- 按钮：竖排撑满。
     ⚠️ 不要用 flex:1 —— 按钮内的文字是 nowrap，
     配合 flex:1 的 min-width:auto 会顶破容器，在 375px 上直接产生横向滚动。 --- */
  .btn-row { flex-direction: column; align-items: stretch; gap: 10px; }
  .btn-row .btn { width: 100%; }
  .hero .btn-row { margin-top: 26px; }

  .cta-inner { flex-direction: column; align-items: stretch; gap: 26px; }
  .cta-actions { flex-direction: column; align-items: stretch; }
  .cta-actions .btn { width: 100%; }
  .cta-inner h2 { max-width: none; }

  .section-head { margin-bottom: 30px; }
  .page-hero { padding: 32px 0 36px; }
  .page-hero h1 { max-width: none; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 6px; }
}

/* ---- 超窄机（iPhone SE 等 320–360px）---- */
@media (max-width: 380px) {
  :root { --gutter: 16px; }
  .stats { grid-template-columns: minmax(0, 1fr); }
  .stat { padding-inline: 0; border-left: 0; }
  .stat:nth-child(n+2) { border-top: 1px solid var(--line); }
  .section--dark .stat:nth-child(n+2) { border-top-color: var(--line-dark); }
  .hero-panel dl { grid-template-columns: minmax(0, 1fr); }
  .hero-panel .row:nth-child(even) { padding-left: 0; border-left: 0; }
  .hero-panel .row:nth-last-child(-n+2) { border-bottom: 1px solid var(--line-dark); }
  .hero-panel .row:last-child { border-bottom: 0; }
  .btn { padding-inline: 18px; }
}

/* ==========================================================================
   23. 打印
   ========================================================================== */
@media print {
  .site-header, .cta-band, .nav-toggle, .nav-scrim, .skip-link,
  .hero::before, .hero::after, .page-hero::before { display: none !important; }
  body { color: #000; background: #fff; }
  .hero, .page-hero, .section--dark, .cta-band, .site-footer, .card--accent {
    background: #fff !important; color: #000 !important;
  }
  .hero h1, .page-hero h1, .cta-inner h2, .section--dark h2, .section--dark h3,
  .hero-panel dd, .stat b { color: #000 !important; }
  .hero-panel, .hero-panel-inner { border-color: #ccc; background: #fff; box-shadow: none; }
  .grid, .stats, .badge-grid, .contact-list, .product-items { border-color: #ccc; background: #ccc; }
  .card, .stat, .badge, .contact-item, .product-item { background: #fff; }
  .js .reveal { opacity: 1 !important; transform: none !important; }
  a { color: #000; }
}


/* 2026-10-14: professional navigation, also usable on tablets. */
.nav-service { position: relative; }
.nav-service > summary { padding: 9px 14px; font-size: 15px; font-weight: 500; cursor: pointer; list-style: none; color: var(--text); }
.nav-service > summary::-webkit-details-marker { display: none; }
.nav-service > summary::after { content: "⌄"; margin-left: 7px; }
.nav-service[open] > summary, .nav-service:has(a.is-active) > summary { color: var(--brand); }
.service-menu { position: absolute; top: calc(100% + 16px); right: 0; width: 238px; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: white; box-shadow: var(--sh-3); }
.service-menu a { white-space: normal; }
.service-menu small { display: block; margin-top: 3px; font-size: 12px; color: var(--text-muted); font-weight: 400; }
@media (min-width: 761px) and (max-width: 1080px) {
  .nav-toggle { display: block; }
  .nav-cta .btn { display: none; }
  .nav-links { position: fixed; top: var(--nav-h); left: 0; right: 0; z-index: 95; flex-direction: column; align-items: stretch; gap: 2px; max-height: calc(100dvh - var(--nav-h)); overflow-y: auto; padding: 16px var(--gutter) 24px; background: #fff; border-bottom: 1px solid var(--line); box-shadow: var(--sh-3); opacity: 0; visibility: hidden; transform: translateY(-10px); }
  .nav-links.is-open { opacity: 1; visibility: visible; transform: none; }
  .nav-links a { padding: 14px 12px; font-size: 16px; }
  .nav-links .btn { display: inline-flex; margin-top: 12px; }
}
@media (max-width: 1080px) {
  .nav-service > summary { padding: 14px 12px; font-size: 16px; }
  .service-menu { position: static; width: auto; margin: 0 12px 8px; box-shadow: none; background: var(--bg-soft); }
}

/* 2026-10-14: unified visual system, preserving product and business claims. */
:root { --w-page: 1240px; --nav-h: 78px; --n-25: #FAF9F7; --n-50: #F5F4F1; --line: #E5E2DD; --brand: #BA2637; --brand-press: #982032; --brand-tint: #FBF1F2; }
.site-header { background: rgba(255,255,255,.97); backdrop-filter: blur(14px); border-bottom-color: #eeeae5; }
.brand-lockup { height: 34px; }
.nav-links a, .nav-service > summary { font-size: 14px; }
.hero { padding: clamp(64px,8vw,120px) 0; background: #111317; }
.hero h1 { font-size: clamp(44px,5.3vw,78px); letter-spacing: -.055em; line-height: 1.14; margin-bottom: 30px; }
.hero .lead { max-width: 36em; font-size: 16px; line-height: 1.95; }
.hero::before { background: radial-gradient(750px 600px at 91% 13%,rgba(164,46,59,.23),transparent 70%), radial-gradient(660px 440px at 0% 110%,rgba(164,46,59,.09),transparent 70%); }
.hero::after { opacity: .38; }
.hero-panel { padding: 0; border-radius: 20px; background: linear-gradient(135deg,#232329,#17191e); border-color: rgba(255,255,255,.14); }
.hero-panel-inner { padding: 30px; background: transparent; }
.hero-panel-head { padding-bottom: 22px; }
.hero-portfolio { display: grid; gap: 0; margin-top: 12px; }
.hero-portfolio a { display: flex; align-items: center; gap: 18px; padding: 19px 0; border-bottom: 1px solid rgba(255,255,255,.1); color: white; }
.hero-portfolio .index { font: 11px var(--mono); color: #d48c95; }
.hero-portfolio strong { display: block; font-size: 21px; font-weight: 600; letter-spacing: .04em; }
.hero-portfolio small { display: block; margin-top: 5px; color: rgba(255,255,255,.65); font-size: 12px; }
.hero-portfolio .arrow { margin-left: auto; color: #dfb0b7; font-size: 22px; transition: transform .2s; }
.hero-portfolio a:hover .arrow { transform: translateX(5px); }
.hero-panel dl { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); padding-top: 20px; }
.hero-panel .row { display: flex; flex-direction: column-reverse; align-items: start; gap: 6px; padding: 0 0 0 15px; border: 0; border-left: 1px solid rgba(255,255,255,.12); }
.hero-panel .row:first-child { padding-left: 0; border-left: 0; }
.hero-panel dt { font-size: 11px; }
.hero-panel dd { font-size: 28px; }
.hero-panel dd i { font-size: 11px; margin-left: 5px; }
.hero-note { max-width: 43em; font-size: 12px; line-height: 1.8; }
.btn { border-radius: 8px; padding: 15px 24px; box-shadow: none; }
.btn--primary { box-shadow: 0 8px 22px -12px rgba(186,38,55,.65); }
.btn--sm { padding: 11px 18px; }
.section-head h2 { font-size: clamp(29px,3.2vw,44px); letter-spacing: -.035em; }
.section-head > p { max-width: 42em; }
.card, .product-item { transition: border-color .2s, box-shadow .2s; }
.card:hover, .product-item:hover { border-color: #d3cbc5; box-shadow: 0 12px 30px -24px rgba(28,23,20,.25); }
.eyebrow { font-size: 11px; letter-spacing: .15em; }
.site-footer { background: #111317; }
@media (max-width: 1080px) { .hero-grid { grid-template-columns: minmax(0,1fr); } .hero-panel { max-width: 640px; } }
@media (max-width: 760px) {
 :root { --nav-h: 66px; }
 .brand-lockup { height: 28px; }
 .hero { padding: 48px 0; }
 .hero h1 { font-size: 46px; }
 .hero-panel-inner { padding: 22px; }
 .hero-portfolio a { padding: 16px 0; }
 .hero-portfolio strong { font-size: 19px; }
 .hero-panel dl { grid-template-columns: repeat(4,minmax(0,1fr)); }
 .hero-panel .row, .hero-panel .row:nth-child(even), .hero-panel .row:nth-child(odd) { padding: 0 0 0 10px; border-bottom: 0; border-left: 1px solid rgba(255,255,255,.12); }
 .hero-panel .row:first-child { padding-left: 0; border-left: 0; }
 .hero-panel dd { font-size: 25px; }
 .hero .lead { font-size: 15px; }
}