/* ==========================================================================
   寰领医药 HUANLING PHARMA — 官网 DEMO 样式
   视觉参照：汤臣倍健官网（白底 + 唯一强调红 + 大量留白 + 全屏图）
   纯手写，无框架、无外链字体、无 CDN 依赖

   目录
   1. 设计令牌（颜色 / 字体 / 字号阶梯 / 行高 / 字距）
   2. 复位
   3. 通用工具与排版原子类
   4. 顶部导航
   5. Hero
   6. 品牌宣言
   7. 数字带
   8. 四大板块
   9. 图文交错
   10. 产品中心
   11. 新闻
   12. CTA
   13. 页脚
   14. 内页页头
   15. 正文 / 价值观 / 时间轴 / 资质
   16. 新增模块：流程、能力指标、品牌矩阵、引用带、合作对象
   17. 响应式
   ========================================================================== */

/* ---------- 1. 设计令牌 ---------- */
:root{
  /* 颜色：全站只用一种彩色 */
  --red:        #E6002D;
  --red-deep:   #B80024;
  --ink:        #14161A;
  --ink-2:      #4A5058;
  --ink-3:      #8A9199;
  --line:       #E6E8EB;
  --paper:      #FFFFFF;
  --paper-2:    #F6F7F8;
  --paper-3:    #EFF1F3;
  --dark:       #0E1418;

  /* 字体：三支族，职责不重叠 */
  --font-cn:  "PingFang SC","Microsoft YaHei","Hiragino Sans GB","Source Han Sans SC",system-ui,-apple-system,sans-serif;
  --font-en:  "Helvetica Neue",Helvetica,Arial,"Segoe UI",system-ui,sans-serif;
  --font-num: "Helvetica Neue",Helvetica,Arial,sans-serif;   /* 数字专用：等宽数字 */

  /* 字号阶梯：8 级，全站只用这 8 个（clamp 用于标题，定值用于正文） */
  --fs-display: clamp(38px,6.2vw,84px);   /* 首屏主标 */
  --fs-h1:      clamp(30px,4.2vw,52px);   /* 内页大标题 */
  --fs-h2:      clamp(24px,3vw,38px);     /* 板块标题 */
  --fs-h3:      clamp(17px,1.55vw,21px);  /* 卡片标题 */
  --fs-title:   16px;                     /* 卡片标题 */
  --fs-lead:    clamp(16px,1.25vw,18px);  /* 引言 / 引导句 */
  --fs-cta:     19px;                     /* CTA 数值 / 品牌字标 */
  --fs-body:    15px;                     /* 正文 */
  --fs-sm:      13px;                     /* 辅助正文 */
  --fs-logo:    22px;                     /* 品牌字标 */
  --fs-xs:      12px;                     /* 标签 / 日期 */
  --fs-tag:     10px;                     /* 剂型标签 / 极小英文 */
  --fs-micro:   11px;                     /* 英文小标 / 极小注 */

  /* 行高：3 档 */
  --lh-display: 1.16;
  --lh-head:    1.5;
  --lh-body:    1.95;

  /* 字距：4 档 */
  --ls-cn:    .04em;    /* 中文标题 */
  --ls-mid:   .12em;    /* 中文标签 */
  --ls-en:    .2em;     /* 英文小标 */
  --ls-wide:  .3em;     /* 英文超大字距 */

  /* 字重：4 档 */
  --fw-light: 300;
  --fw-reg:   400;
  --fw-mid:   500;
  --fw-bold:  600;

  /* 尺寸与动效 */
  --w: 1200px;
  --pad: 24px;
  --sec-y: 120px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --t: .45s var(--ease);
}

/* ---------- 2. 复位 ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background:var(--paper); color:var(--ink-2);
  font-family:var(--font-cn); font-size:var(--fs-body); line-height:var(--lh-body);
  font-weight:var(--fw-reg);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  font-synthesis:none;                 /* 禁止伪粗/伪斜，保证字重统一 */
  font-kerning:normal;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; border:0; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4,h5,p,figure,ul,ol{ margin:0; padding:0; }
ul,ol{ list-style:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
::selection{ background:var(--red); color:#fff; }

/* ---------- 3. 通用工具与排版原子类 ---------- */
.wrap{ width:100%; max-width:var(--w); margin:0 auto; padding:0 var(--pad); }
.vh{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* 英文小标（全大写 + 大字距） */
.en{ font-family:var(--font-en); font-weight:var(--fw-reg); letter-spacing:var(--ls-en); text-transform:uppercase; }

/* 中文标题下的英文副标 —— 替代原先散落的内联样式 */
.en-label{
  display:block; margin-top:14px;
  font-family:var(--font-en); font-size:var(--fs-micro);
  letter-spacing:var(--ls-en); text-transform:uppercase;
  color:var(--ink-3); font-weight:var(--fw-reg);
}

/* 极小的注释行 */
.note{
  margin-top:22px; font-size:var(--fs-micro); line-height:1.9;
  color:var(--ink-3); letter-spacing:.06em; font-weight:var(--fw-reg);
}
.note--light{ color:rgba(255,255,255,.32); }

/* 数字：等宽，避免跳动 */
.num-fig{
  font-family:var(--font-num); font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}

/* 待客户补充的字段，用中性小标签占位，不用空白下划线 */
.todo{
  display:inline-block; padding:1px 7px; font-size:var(--fs-micro);
  letter-spacing:.08em; color:var(--ink-3);
  border:1px dashed var(--line); border-radius:2px;
  vertical-align:1px;
}
.todo--red{ color:var(--red); border-color:rgba(230,0,45,.45); }

/* 板块标题：中文主标 + 英文副标 + 红线 */
.sec-head{ margin-bottom:64px; }
.sec-head .cn{
  font-size:var(--fs-h2); font-weight:var(--fw-bold); color:var(--ink);
  line-height:var(--lh-head); letter-spacing:var(--ls-cn);
}
.sec-head .en{
  display:block; margin-top:14px; font-size:var(--fs-micro);
  color:var(--ink-3); letter-spacing:var(--ls-en);
}
.sec-head .rule{ width:44px; height:2px; background:var(--red); margin-top:22px; }
.sec-head.center{ text-align:center; }
.sec-head.center .rule{ margin-left:auto; margin-right:auto; }

/* 进场动画 */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.08s } .reveal.d2{ transition-delay:.16s }
.reveal.d3{ transition-delay:.24s } .reveal.d4{ transition-delay:.32s }

/* 按钮 */
.btn{
  display:inline-flex; align-items:center; gap:12px;
  padding:15px 34px; background:var(--red); color:#fff;
  font-size:var(--fs-sm); letter-spacing:var(--ls-mid);
  transition:background var(--t);
}
.btn:hover{ background:var(--red-deep); }
.btn--ghost{
  background:none; border:1px solid var(--line); color:var(--ink);
}
.btn--ghost:hover{ background:var(--ink); border-color:var(--ink); color:#fff; }

/* ---------- 4. 顶部导航 ---------- */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:100;
  height:88px; display:flex; align-items:center;
  transition:background var(--t), box-shadow var(--t), height var(--t);
}
.site-header .wrap{ display:flex; align-items:center; justify-content:space-between; gap:32px; }

.logo{ display:flex; align-items:baseline; gap:10px; color:#fff; transition:color var(--t); }
.logo b{ font-size:var(--fs-logo); font-weight:var(--fw-bold); letter-spacing:.16em; }
.logo span{ font-family:var(--font-en); font-size:var(--fs-micro); letter-spacing:var(--ls-wide); opacity:.72; font-weight:var(--fw-reg); }

.nav{ display:flex; align-items:center; gap:38px; }
.nav a{
  position:relative; color:#fff; font-size:var(--fs-body); letter-spacing:var(--ls-cn);
  padding:6px 0; transition:color var(--t);
}
.nav a::after{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:1px;
  background:var(--red); transform:scaleX(0); transform-origin:left;
  transition:transform .4s var(--ease);
}
.nav a:hover::after,.nav a.on::after{ transform:scaleX(1); }

.head-tools{ display:flex; align-items:center; gap:20px; color:#fff; }
.head-tools .lang{
  font-family:var(--font-en); font-size:var(--fs-xs);
  letter-spacing:var(--ls-mid); display:flex; gap:6px; align-items:center;
}
.head-tools .lang b{ color:#fff; font-weight:var(--fw-bold); }
.head-tools .tel{ font-family:var(--font-en); font-size:var(--fs-sm); letter-spacing:.08em; }

.site-header.solid{
  height:72px; background:rgba(255,255,255,.96);
  box-shadow:0 1px 0 var(--line);
  backdrop-filter:saturate(1.4) blur(10px);
}
.site-header.solid .logo,
.site-header.solid .nav a,
.site-header.solid .head-tools{ color:var(--ink); }
.site-header.solid .head-tools .lang b{ color:var(--ink); }
.site-header.solid .logo span{ opacity:.55; }

.burger{ display:none; width:26px; height:16px; position:relative; }
.burger i{ position:absolute; left:0; width:100%; height:1.5px; background:#fff; transition:var(--t); }
.burger i:nth-child(1){ top:0 } .burger i:nth-child(2){ top:7px } .burger i:nth-child(3){ top:14px }
.site-header.solid .burger i{ background:var(--ink); }
body.menu-open .burger i:nth-child(1){ transform:translateY(7px) rotate(45deg) }
body.menu-open .burger i:nth-child(2){ opacity:0 }
body.menu-open .burger i:nth-child(3){ transform:translateY(-7px) rotate(-45deg) }

/* ---------- 5. Hero ---------- */
.hero{
  position:relative; min-height:min(100svh, 940px); display:flex; align-items:flex-end;
  padding-bottom:clamp(60px,9vh,120px); overflow:hidden; background:var(--dark);
}
.hero__bg{ position:absolute; inset:0; }
.hero__bg img{
  width:100%; height:100%; object-fit:cover; object-position:center 42%;
  transform:scale(1.06); animation:heroZoom 14s var(--ease) forwards;
}
@keyframes heroZoom{ to{ transform:scale(1) } }
.hero__bg::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(8,14,18,.72) 0%, rgba(8,14,18,.30) 42%, rgba(8,14,18,.86) 100%),
    linear-gradient(90deg, rgba(8,14,18,.55) 0%, rgba(8,14,18,0) 62%);
}
.hero .wrap{ position:relative; z-index:2; width:100%; }

.hero__eyebrow{
  display:flex; align-items:center; gap:14px; margin-bottom:26px;
  font-family:var(--font-en); font-size:var(--fs-xs); letter-spacing:.32em;
  text-transform:uppercase; color:rgba(255,255,255,.7);
}
.hero__eyebrow::before{ content:""; width:52px; height:1px; background:var(--red); }

.hero h1{
  color:#fff; font-size:var(--fs-display); font-weight:var(--fw-bold);
  line-height:var(--lh-display); letter-spacing:.06em;
}
.hero h1 em{ font-style:normal; color:var(--red); margin-left:.34em; }

.hero__sub{
  margin-top:26px; max-width:620px;
  font-size:var(--fs-lead); color:rgba(255,255,255,.82); line-height:1.95;
}
.hero__meta{
  margin-top:48px; display:flex; flex-wrap:wrap; gap:14px 44px;
  font-family:var(--font-en); font-size:var(--fs-micro); letter-spacing:var(--ls-en);
  text-transform:uppercase; color:rgba(255,255,255,.5);
}
.hero__meta b{ color:#fff; font-weight:var(--fw-reg); }

.scroll-hint{
  position:absolute; right:calc((100vw - var(--w))/2 + var(--pad)); bottom:56px; z-index:3;
  display:flex; flex-direction:column; align-items:center; gap:12px;
  font-family:var(--font-en); font-size:var(--fs-tag); letter-spacing:var(--ls-wide);
  text-transform:uppercase; color:rgba(255,255,255,.55); writing-mode:vertical-rl;
}
.scroll-hint::after{
  content:""; width:1px; height:72px;
  background:linear-gradient(180deg, var(--red), rgba(230,0,45,0));
  animation:drop 2.2s var(--ease) infinite;
}
@keyframes drop{ 0%{ transform:scaleY(.2); transform-origin:top } 50%{ transform:scaleY(1); transform-origin:top } 51%{ transform-origin:bottom } 100%{ transform:scaleY(.2); transform-origin:bottom } }

/* ---------- 6. 品牌宣言 ---------- */
.declaration{ padding:var(--sec-y) 0; text-align:center; }
.declaration .big{
  font-size:clamp(24px,3.6vw,46px); line-height:var(--lh-head);
  color:var(--ink); font-weight:var(--fw-mid); letter-spacing:var(--ls-cn);
}
.declaration .big strong{ color:var(--red); font-weight:var(--fw-bold); }
.declaration .note{ margin-top:36px; font-size:var(--fs-body); color:var(--ink-3); line-height:1.95; }
.declaration .sign{
  margin-top:44px; display:inline-flex; align-items:center; gap:14px;
  font-family:var(--font-en); font-size:var(--fs-micro); letter-spacing:.26em;
  text-transform:uppercase; color:var(--ink-3);
}
.declaration .sign::before,.declaration .sign::after{ content:""; width:40px; height:1px; background:var(--line); }

/* ---------- 7. 数字带 ---------- */
.numbers{ background:var(--dark); color:#fff; padding:clamp(56px,7vw,84px) 0; }
.numbers .grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:rgba(255,255,255,.12); }
.numbers .cell{ background:var(--dark); padding:36px 28px; text-align:center; }
.numbers .num{
  font-family:var(--font-num); font-variant-numeric:tabular-nums;
  font-size:clamp(38px,4.6vw,58px); font-weight:var(--fw-light);
  line-height:1; letter-spacing:.02em; color:#fff;
}
.numbers .num small{ font-size:.42em; margin-left:4px; color:var(--red); letter-spacing:.06em; }
.numbers .label{
  margin-top:16px; font-size:var(--fs-sm); letter-spacing:var(--ls-mid);
  color:rgba(255,255,255,.55);
}

/* ---------- 8. 四大板块 ---------- */
.dna{ padding:var(--sec-y) 0; }
.dna .grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.dna .card{ background:var(--paper); padding:52px 32px 56px; position:relative; transition:background var(--t); }
.dna .card::before{
  content:""; position:absolute; left:0; top:0; width:0; height:2px;
  background:var(--red); transition:width .55s var(--ease);
}
.dna .card:hover{ background:var(--paper-2); }
.dna .card:hover::before{ width:100%; }
.dna .idx{ font-family:var(--font-en); font-size:var(--fs-micro); letter-spacing:var(--ls-en); color:var(--red); }
.dna .card h3{ margin-top:22px; font-size:var(--fs-h3); color:var(--ink); font-weight:var(--fw-bold); letter-spacing:var(--ls-cn); }
.dna .card .en{ display:block; margin-top:8px; font-size:var(--fs-tag); color:var(--ink-3); letter-spacing:.16em; }
.dna .card p{ margin-top:20px; font-size:var(--fs-sm); line-height:var(--lh-body); color:var(--ink-2); }

/* ---------- 9. 图文交错 ---------- */
.split{ padding:0 0 var(--sec-y); }
.split .row{
  display:grid; grid-template-columns:1fr 1fr; align-items:center;
  gap:clamp(40px,6vw,96px); margin-bottom:clamp(72px,8vw,120px);
}
.split .row:last-child{ margin-bottom:0; }
.split .row.flip .media{ order:2; }
.split .media{ position:relative; overflow:hidden; background:var(--paper-3); }
.split .media img{
  width:100%; height:auto; aspect-ratio:4/3; object-fit:cover;
  transition:transform 1.2s var(--ease);
}
.split .media:hover img{ transform:scale(1.04); }
.split .media .cap{
  position:absolute; left:0; bottom:0; padding:10px 18px;
  background:var(--red); color:#fff;
  font-family:var(--font-en); font-size:var(--fs-tag); letter-spacing:var(--ls-en); text-transform:uppercase;
}
.split .body h3{ font-size:var(--fs-h3); color:var(--ink); font-weight:var(--fw-bold); line-height:var(--lh-head); }
.split .body .k{
  display:inline-block; margin-bottom:18px;
  font-family:var(--font-en); font-size:var(--fs-micro); letter-spacing:.24em;
  text-transform:uppercase; color:var(--red);
}
.split .body p{ margin-top:22px; font-size:var(--fs-body); line-height:var(--lh-body); color:var(--ink-2); }
.split .body ul{ margin-top:28px; border-top:1px solid var(--line); }
.split .body li{
  display:flex; gap:16px; padding:14px 0; border-bottom:1px solid var(--line);
  font-size:var(--fs-sm); color:var(--ink-2);
}
.split .body li::before{ content:"—"; color:var(--red); flex:none; }
.split .body .tail{
  margin-top:26px; font-size:var(--fs-sm); color:var(--ink-3); line-height:var(--lh-body);
}

/* ---------- 10. 产品中心 ---------- */
.products{ padding:var(--sec-y) 0; background:var(--paper-2); }
.products .intro{
  max-width:760px; margin-bottom:44px;
  font-size:var(--fs-body); line-height:var(--lh-body); color:var(--ink-2);
}
.tabs{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:44px; }
.tabs button{
  padding:9px 22px; border:1px solid var(--line); background:#fff;
  font-size:var(--fs-sm); color:var(--ink-2); letter-spacing:.06em;
  transition:var(--t);
}
.tabs button:hover{ border-color:var(--ink-3); color:var(--ink); }
.tabs button.on{ background:var(--ink); border-color:var(--ink); color:#fff; }

.pgrid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.pcard{
  background:#fff; padding:28px 24px 30px; position:relative; overflow:hidden;
  display:flex; flex-direction:column;
  transition:transform var(--t), box-shadow var(--t);
}
.pcard:hover{ transform:translateY(-4px); box-shadow:0 18px 40px rgba(20,22,26,.08); }
/* 剂型图形：浅灰底纹，填补卡片空白 */
.pcard__glyph{
  position:absolute; right:-10px; top:14px; width:118px; height:118px;
  color:var(--ink); opacity:.055; pointer-events:none;
  transition:opacity var(--t), transform var(--t);
}
.pcard:hover .pcard__glyph{ opacity:.1; transform:scale(1.04); }
.pcard > *:not(.pcard__glyph){ position:relative; z-index:1; }
.pcard .tag{
  align-self:flex-start;
  font-family:var(--font-en); font-size:var(--fs-tag); letter-spacing:.12em;
  color:var(--red); border:1px solid rgba(230,0,45,.3); padding:2px 8px;
}
.pcard .tag.ext{ color:#0A7C6E; border-color:rgba(10,124,110,.3); }
.pcard h4{ margin-top:18px; font-size:var(--fs-title); color:var(--ink); font-weight:var(--fw-bold); line-height:1.55; }
.pcard .gen{
  margin-top:6px; min-height:34px; font-size:var(--fs-xs); color:var(--ink-3);
  font-family:var(--font-en); letter-spacing:.03em; line-height:1.5;
}
.pcard .spec{
  margin-top:auto; padding-top:16px; border-top:1px solid var(--line);
  font-size:var(--fs-xs); color:var(--ink-3); line-height:1.9;
}
.pcard .spec b{ color:var(--ink-2); font-weight:var(--fw-mid); }
.pcard .more{
  margin-top:16px; display:inline-flex; align-items:center; gap:8px;
  font-size:var(--fs-xs); color:var(--ink); letter-spacing:.06em;
}
.pcard .more::after{ content:"→"; color:var(--red); transition:transform var(--t); }
.pcard:hover .more::after{ transform:translateX(5px); }

.products .foot{
  margin-top:52px; display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:20px; padding-top:32px; border-top:1px solid var(--line);
  font-size:var(--fs-sm); color:var(--ink-3);
}

/* 用药提示 */
.notice{
  border:1px solid var(--line); padding:32px 36px; background:var(--paper-2);
}
.notice p{ margin:0; font-size:var(--fs-sm); line-height:1.95; }
.notice strong{ color:var(--ink); font-weight:var(--fw-bold); }

/* ---------- 11. 新闻 ---------- */
.news{ padding:var(--sec-y) 0; }
.news .grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:36px; }
.ncard{ display:block; }
.ncard .thumb{ overflow:hidden; background:var(--paper-3); }
.ncard .thumb img{ width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; transition:transform 1.1s var(--ease); }
.ncard:hover .thumb img{ transform:scale(1.05); }
.ncard .meta{
  margin-top:22px; display:flex; gap:14px; align-items:center;
  font-family:var(--font-en); font-size:var(--fs-micro); letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-3);
}
.ncard .meta .cat{ color:var(--red); }
.ncard h3{ margin-top:14px; font-size:var(--fs-title); line-height:1.6; color:var(--ink); font-weight:var(--fw-bold); transition:color var(--t); }
.ncard:hover h3{ color:var(--red); }
.ncard p{ margin-top:12px; font-size:var(--fs-sm); line-height:1.9; color:var(--ink-3); }

/* ---------- 12. CTA ---------- */
.cta{ position:relative; background:var(--dark); color:#fff; overflow:hidden; }
.cta__bg{ position:absolute; inset:0; opacity:.24; }
.cta__bg img{ width:100%; height:100%; object-fit:cover; }
.cta .wrap{ position:relative; z-index:2; padding-top:clamp(80px,9vw,130px); padding-bottom:clamp(80px,9vw,130px); }
.cta .cn{ font-size:var(--fs-h2); font-weight:var(--fw-bold); line-height:var(--lh-head); letter-spacing:var(--ls-cn); }
.cta .en{ display:block; margin-top:16px; font-size:var(--fs-micro); color:rgba(255,255,255,.5); letter-spacing:.24em; }
.cta .rows{ margin-top:52px; display:flex; flex-wrap:wrap; gap:20px 64px; }
.cta .rows .k{
  font-family:var(--font-en); font-size:var(--fs-tag); letter-spacing:var(--ls-en);
  text-transform:uppercase; color:rgba(255,255,255,.45);
}
.cta .rows .v{
  margin-top:8px; font-size:var(--fs-cta); color:#fff;
  font-family:var(--font-en); letter-spacing:.04em;
}
.cta .btn{ margin-top:56px; }

/* ---------- 13. 页脚 ---------- */
.site-footer{ background:#0A0E11; color:rgba(255,255,255,.55); padding:72px 0 34px; font-size:var(--fs-sm); }
.site-footer .top{
  display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:48px;
  padding-bottom:48px; border-bottom:1px solid rgba(255,255,255,.1);
}
.site-footer .logo{ color:#fff; }
.site-footer .top p{ margin-top:22px; line-height:var(--lh-body); max-width:340px; font-size:var(--fs-sm); }
.site-footer .col h5{ font-size:var(--fs-sm); color:#fff; letter-spacing:.1em; margin-bottom:20px; font-weight:var(--fw-mid); }
.site-footer .col li{ margin-bottom:12px; line-height:1.9; }
.site-footer .col a{ transition:color var(--t); }
.site-footer .col a:hover{ color:var(--red); }
.site-footer .bottom{
  margin-top:28px; display:flex; justify-content:space-between; gap:20px;
  flex-wrap:wrap; font-size:var(--fs-xs); color:rgba(255,255,255,.35); line-height:1.9;
}
.site-footer .bottom .disc{ max-width:640px; }

/* ---------- 14. 内页页头 ---------- */
.page-head{
  position:relative; background:var(--dark); color:#fff; overflow:hidden;
  padding:200px 0 90px;
}
.page-head__bg{ position:absolute; inset:0; opacity:.34; }
.page-head__bg img{ width:100%; height:100%; object-fit:cover; }
.page-head__bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,14,17,.72), rgba(10,14,17,.34) 50%, rgba(10,14,17,.92));
}
.page-head--dim .page-head__bg{ opacity:.18; }
.page-head .wrap{ position:relative; z-index:2; }
.crumb{
  font-family:var(--font-en); font-size:var(--fs-micro); letter-spacing:.14em;
  text-transform:uppercase; color:rgba(255,255,255,.45); margin-bottom:26px;
}
.crumb a:hover{ color:var(--red); }
.crumb i{ font-style:normal; margin:0 10px; opacity:.4; }
.page-head h1{ font-size:var(--fs-h1); font-weight:var(--fw-bold); letter-spacing:.06em; line-height:1.4; }
.page-head .en{ display:block; margin-top:16px; font-size:var(--fs-xs); color:rgba(255,255,255,.5); letter-spacing:.26em; }

/* ---------- 15. 正文 / 价值观 / 时间轴 / 资质 ---------- */
.prose{ padding:var(--sec-y) 0; }
.prose--flush{ padding-top:0; }
.prose .cols{ display:grid; grid-template-columns:1fr 1.35fr; gap:clamp(40px,6vw,90px); align-items:start; }
.prose h2{ font-size:var(--fs-h3); color:var(--ink); font-weight:var(--fw-bold); line-height:var(--lh-head); }
.prose p{ margin-bottom:22px; font-size:var(--fs-body); line-height:var(--lh-body); }
.prose p:last-child{ margin-bottom:0; }
.prose .lead{ font-size:var(--fs-lead); color:var(--ink); line-height:1.9; margin-bottom:24px; }
.prose .hl{ color:var(--red); font-size:var(--fs-lead); }
.prose .quote{
  border-left:2px solid var(--red); padding-left:22px;
  font-size:var(--fs-lead); color:var(--ink); line-height:1.95;
}
.prose ul.dot{ margin-top:6px; }
.prose ul.dot li{
  position:relative; padding-left:18px; margin-bottom:12px;
  font-size:var(--fs-body); line-height:1.95;
}
.prose ul.dot li::before{
  content:""; position:absolute; left:0; top:13px;
  width:5px; height:5px; background:var(--red); border-radius:50%;
}

.values{ padding:0 0 var(--sec-y); }
.values .grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); }
.values .item{ background:#fff; padding:48px 36px; }
.values .item h4{ font-size:var(--fs-h3); color:var(--ink); font-weight:var(--fw-bold); }
.values .item .bar{ width:32px; height:2px; background:var(--red); margin:20px 0 22px; }
.values .item p{ font-size:var(--fs-sm); line-height:var(--lh-body); color:var(--ink-2); }

.timeline{ padding:0 0 var(--sec-y); }
.tl{ position:relative; padding-left:36px; }
.tl::before{ content:""; position:absolute; left:5px; top:8px; bottom:8px; width:1px; background:var(--line); }
.tl li{ position:relative; padding:0 0 44px; }
.tl li:last-child{ padding-bottom:0; }
.tl li::before{
  content:""; position:absolute; left:-36px; top:10px; width:11px; height:11px;
  border-radius:50%; background:#fff; border:2px solid var(--red);
}
.tl .yr{
  font-family:var(--font-en); font-size:var(--fs-xs); letter-spacing:.2em;
  text-transform:uppercase; color:var(--red); font-weight:var(--fw-mid);
}
.tl h4{ margin-top:8px; font-size:var(--fs-title); color:var(--ink); font-weight:var(--fw-bold); }
.tl p{ margin-top:8px; font-size:var(--fs-sm); line-height:1.95; color:var(--ink-3); }

.certs{ padding:0 0 var(--sec-y); }
.certs .grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.cert{ border:1px solid var(--line); padding:34px 26px; background:#fff; position:relative; }
.cert::before{
  content:""; position:absolute; left:26px; top:0; width:28px; height:2px; background:var(--red);
}
.cert .k{ font-family:var(--font-en); font-size:var(--fs-tag); letter-spacing:.18em; text-transform:uppercase; color:var(--red); }
.cert h4{ margin-top:16px; font-size:var(--fs-body); color:var(--ink); font-weight:var(--fw-bold); line-height:1.7; }
.cert p{ margin-top:10px; font-size:var(--fs-xs); color:var(--ink-3); line-height:1.9; }

/* ---------- 16. 新增模块 ---------- */

/* 16.1 流程（编号 + 标题 + 说明，横向 5 格） */
.process{ padding:0 0 var(--sec-y); }
.process .steps{
  display:grid; grid-template-columns:repeat(5,1fr); gap:1px;
  background:var(--line); border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.process .step{ background:#fff; padding:40px 26px 44px; position:relative; }
.process .step .no{
  font-family:var(--font-num); font-variant-numeric:tabular-nums;
  font-size:var(--fs-xs); letter-spacing:var(--ls-en); color:var(--red);
}
.process .step h4{ margin-top:20px; font-size:var(--fs-body); color:var(--ink); font-weight:var(--fw-bold); letter-spacing:.02em; }
.process .step .en{ display:block; margin-top:6px; font-size:var(--fs-tag); color:var(--ink-3); letter-spacing:.14em; }
.process .step p{ margin-top:16px; font-size:var(--fs-xs); line-height:1.9; color:var(--ink-2); }

/* 16.2 能力指标（深底，大数字 + 列表） */
.spec-band{ background:var(--dark); color:#fff; padding:clamp(64px,7vw,96px) 0; }
.spec-band .cols{ display:grid; grid-template-columns:1fr 1.25fr; gap:clamp(40px,6vw,90px); }
.spec-band h2{
  font-size:var(--fs-h2); font-weight:var(--fw-bold); line-height:var(--lh-head); letter-spacing:var(--ls-cn);
}
.spec-band .en{ display:block; margin-top:14px; font-size:var(--fs-micro); color:rgba(255,255,255,.45); letter-spacing:var(--ls-en); }
.spec-band .rule{ width:44px; height:2px; background:var(--red); margin-top:22px; }
.spec-band .list li{
  padding:20px 0; border-bottom:1px solid rgba(255,255,255,.12);
  display:grid; grid-template-columns:auto 1fr; gap:22px; align-items:baseline;
}
.spec-band .list li:first-child{ padding-top:0; }
.spec-band .list .v{
  font-family:var(--font-num); font-variant-numeric:tabular-nums;
  font-size:var(--fs-logo); color:#fff; font-weight:var(--fw-reg); letter-spacing:.02em; min-width:118px;
}
.spec-band .list .k{ font-size:var(--fs-sm); color:rgba(255,255,255,.62); line-height:1.85; }
.spec-band .tail{ margin-top:32px; font-size:var(--fs-xs); color:rgba(255,255,255,.4); }

/* 16.3 品牌矩阵（字标排布，不伪造 logo） */
.brands{ padding:var(--sec-y) 0; background:var(--paper-2); }
.brands .lede{
  max-width:680px; margin-top:-32px; margin-bottom:48px;
  font-size:var(--fs-body); line-height:var(--lh-body); color:var(--ink-2);
}
.brands .grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:1px; background:var(--line); }
.brands .b{
  background:var(--paper-2); padding:38px 18px; text-align:center;
  transition:background var(--t); position:relative;
}
.brands .b:hover{ background:#fff; }
.brands .b .mark{
  font-size:var(--fs-cta); color:var(--ink); font-weight:var(--fw-bold);
  letter-spacing:.18em; transition:color var(--t);
}
.brands .b:hover .mark{ color:var(--red); }
.brands .b .sub{
  display:block; margin-top:10px; font-size:var(--fs-tag); color:var(--ink-3);
  letter-spacing:var(--ls-en); text-transform:uppercase;
}

/* 16.4 引用带（大字 + 淡显背景图） */
.quote-band{ position:relative; overflow:hidden; background:var(--dark); color:#fff; }
.quote-band__bg{ position:absolute; inset:0; opacity:.30; }
.quote-band__bg img{ width:100%; height:100%; object-fit:cover; }
.quote-band::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(10,14,17,.75), rgba(10,14,17,.35));
}
.quote-band .wrap{
  position:relative; z-index:2;
  padding-top:clamp(70px,8vw,110px); padding-bottom:clamp(70px,8vw,110px);
}
.quote-band blockquote{
  margin:0; max-width:900px;
  font-size:clamp(20px,2.6vw,32px); line-height:1.75;
  color:#fff; font-weight:var(--fw-mid); letter-spacing:var(--ls-cn);
}
.quote-band blockquote em{ font-style:normal; color:var(--red); }
.quote-band .by{
  margin-top:28px; display:flex; align-items:center; gap:14px;
  font-family:var(--font-en); font-size:var(--fs-micro);
  letter-spacing:.24em; text-transform:uppercase; color:rgba(255,255,255,.45);
}
.quote-band .by::before{ content:""; width:44px; height:1px; background:var(--red); }

/* 16.5 合作对象 / 服务网络 */
.partners{ padding:var(--sec-y) 0; }
.partners .grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.partners .p{
  border:1px solid var(--line); padding:40px 28px; background:#fff;
  transition:border-color var(--t), transform var(--t);
}
.partners .p:hover{ border-color:var(--ink); transform:translateY(-3px); }
.partners .p svg{ width:32px; height:32px; color:var(--red); }
.partners .p h4{ margin-top:22px; font-size:var(--fs-title); color:var(--ink); font-weight:var(--fw-bold); }
.partners .p .en{ display:block; margin-top:8px; font-size:var(--fs-tag); color:var(--ink-3); letter-spacing:.16em; }
.partners .p p{ margin-top:16px; font-size:var(--fs-xs); line-height:1.9; color:var(--ink-2); }

/* 16.6 联系方式键值行（替代内联样式） */
.kv{ margin-top:8px; }
.kv li{ padding:18px 0; border-bottom:1px solid var(--line); }
.kv li:first-child{ padding-top:0; }
.kv .k{
  font-size:var(--fs-micro); letter-spacing:.16em; color:var(--ink-3);
  text-transform:uppercase; font-family:var(--font-en);
}
.kv .v{ margin-top:8px; font-size:var(--fs-title); color:var(--ink); line-height:1.7; }
.kv .v.red{ color:var(--red); }

/* 16.7 表单 */
.form{ display:grid; gap:18px; margin-top:36px; }
.form .row2{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.field{ display:block; }
.field > span{
  display:block; font-size:var(--fs-xs); color:var(--ink-3); letter-spacing:.08em;
}
.field input,.field textarea{
  width:100%; margin-top:8px; padding:12px 14px;
  border:1px solid var(--line); background:#fff;
  font:inherit; font-size:var(--fs-sm); color:var(--ink);
  transition:border-color var(--t);
}
.field input:focus,.field textarea:focus{ outline:none; border-color:var(--ink); }
.field textarea{ resize:vertical; }
.form .ok{ display:none; color:var(--red); font-size:var(--fs-xs); }
.form.sent .ok{ display:block; }

/* 16.8 图片处理变体 */
.img--muted{ filter:saturate(.82) contrast(1.04); }

/* 图标精灵容器不占位 */
.sprite{ position:absolute; width:0; height:0; overflow:hidden; }


/* 16.9 收尾工具类（替代最后几处内联样式） */
.link-more{ color:var(--red); font-size:var(--fs-sm); letter-spacing:.06em; }
.news-lede{
  font-size:var(--fs-body); color:var(--ink-2);
  line-height:var(--lh-body); margin-bottom:44px;
}
.en-inline{ font-size:var(--fs-micro); color:var(--ink-3); }
.list-foot{
  margin-top:64px; padding-top:36px; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:16px;
  font-size:var(--fs-sm); color:var(--ink-3);
}
.band-note{
  margin-top:28px; font-size:var(--fs-sm); line-height:1.95;
  color:rgba(255,255,255,.6);
}
/* ---------- 17. 响应式 ---------- */
@media (max-width:1080px){
  :root{ --sec-y:84px; }
  .dna .grid{ grid-template-columns:repeat(2,1fr); }
  .pgrid{ grid-template-columns:repeat(3,1fr); }
  .numbers .grid{ grid-template-columns:repeat(2,1fr); }
  .certs .grid{ grid-template-columns:repeat(2,1fr); }
  .brands .grid{ grid-template-columns:repeat(3,1fr); }
  .partners .grid{ grid-template-columns:repeat(2,1fr); }
  .process .steps{ grid-template-columns:repeat(3,1fr); }
  .spec-band .cols{ grid-template-columns:1fr; gap:40px; }
  .site-footer .top{ grid-template-columns:1fr 1fr; }
  .scroll-hint{ display:none; }
}
@media (max-width:860px){
  .nav,.head-tools .tel{ display:none; }
  .burger{ display:block; }
  .split .row{ grid-template-columns:1fr; }
  .split .row.flip .media{ order:0; }
  .news .grid{ grid-template-columns:1fr 1fr; }
  .prose .cols{ grid-template-columns:1fr; }
  .values .grid{ grid-template-columns:1fr; }
  .page-head{ padding:150px 0 64px; }
  .process .steps{ grid-template-columns:1fr 1fr; }
  .nav{
    position:fixed; inset:0; background:rgba(10,14,17,.98); z-index:99;
    flex-direction:column; justify-content:center; gap:8px;
    display:none;
  }
  body.menu-open .nav{ display:flex; }
  body.menu-open .nav a{ color:#fff !important; font-size:var(--fs-cta); padding:14px 0; opacity:1; }
}
@media (max-width:640px){
  :root{ --sec-y:64px; --pad:20px; }
  body{ font-size:var(--fs-body); }
  .pgrid{ grid-template-columns:1fr 1fr; gap:14px; }
  .pcard{ padding:20px 16px 22px; }
  .pcard__glyph{ width:84px; height:84px; right:-14px; top:8px; }
  .dna .grid{ grid-template-columns:1fr; }
  .news .grid{ grid-template-columns:1fr; }
  .numbers .grid{ grid-template-columns:1fr 1fr; }
  .certs .grid{ grid-template-columns:1fr; }
  .brands .grid{ grid-template-columns:repeat(2,1fr); }
  .partners .grid{ grid-template-columns:1fr; }
  .process .steps{ grid-template-columns:1fr; }
  .form .row2{ grid-template-columns:1fr; }
  .site-footer .top{ grid-template-columns:1fr; gap:32px; }
  .hero{ min-height:86svh; }
  .hero__meta{ gap:10px 24px; }
  .sec-head{ margin-bottom:40px; }
  .tabs button{ padding:7px 14px; font-size:var(--fs-xs); }
  .quote-band blockquote{ font-size:var(--fs-cta); }
}
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
  .reveal{ opacity:1; transform:none; }
}