/* ==========================================================================
   百川智科官网 · 首页
   只写首页专属区块，token 与通用组件全部来自 site.css。
   ========================================================================== */

/* 首页把强调色收成一支：全站是橙，首页是青。
   一屏之内同时出现橙（品牌）、青（首屏按钮）、蓝（链接）三种强调，
   视线会被拆成三条线；首页统一成青，其余页面保持原样。
   浅底上不能用 #19E3A0 —— 那个亮度在白底上的对比度只有 1.6，
   这里换成同色系压深的一支。 */
.page-home {
  --c-accent: #0C8F6A;
  --c-accent-ink: #0A7355;
  --c-accent-soft: #E4F6EF;
}

/* 首页有三处深色：首屏、看板区、页尾 CTA + 页脚。
   前两处已经是 #070C15，页尾原本是 #0B1A2B（偏蓝），
   两种深色同页出现会显得色温不统一，这里一并压到同一个底。 */
.page-home .cta-band,
.page-home .site-footer { background: var(--c-void); }

/* 深色底上的小字不能用 --c-accent(#0C8F6A)，
   它落在 #070C15 上对比度只有 3.4，正文级小字不达标。 */
.page-home .cta-band .eyebrow { color: var(--c-signal); }

/* ============================================================ 首屏 */

/* 首屏用 site.css 里的 --c-void / --c-signal 一组色。
   这里是全站唯一一块"照片出血"的区域，所以额外只需要控制出血与遮罩。 */
.hero {
  position: relative;
  overflow: hidden;
  padding-top: calc(var(--h-header) + var(--sp-6));
  background: var(--c-void);
  color: #fff;
}

/* 背景：栅格只铺在左侧文字一带，右半留给照片。
   两侧都铺会透到照片下面，图与底的交界就不干净了。 */
.hero__bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .034) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .034) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(ellipse 64% 92% at 6% 46%, #000 10%, transparent 74%);
  mask-image: radial-gradient(ellipse 64% 92% at 6% 46%, #000 10%, transparent 74%);
  pointer-events: none;
}
.hero__bg::after {
  content: "";
  position: absolute;
  left: -16%;
  top: -32%;
  width: 48%;
  height: 124%;
  background: radial-gradient(circle at 50% 50%, rgba(25, 227, 160, .09), transparent 64%);
}

/* 两栏：左文右图。左列给固定上限，标题不会拉成一行半长句；
   右列吃掉剩余宽度，再向右出血到视口边缘。 */
.hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 30rem) minmax(0, 1fr);
  gap: clamp(var(--sp-3), 4vw, var(--sp-6));
  align-items: center;
  padding-bottom: var(--sp-6);
}

.hero__copy { min-width: 0; }

.hero__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin: 0;
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: .1em;
  color: rgba(255, 255, 255, .62);
}
.hero__rule {
  width: 28px;
  height: 2px;
  flex: none;
  background: var(--c-signal);
}

.hero__title {
  margin: var(--sp-2) 0 var(--sp-3);
  /* 上限卡在 56px：左栏 30rem＝480px，中文按 .92 倍字宽估算，
     56px 刚好排下 9 个字。再大一点，"当线工单与实时产出"这类
     9 字标题就会被折成三行，四组轮播的标题高度就不一致了。 */
  font-size: clamp(34px, 4.3vw, 56px);
  line-height: 1.14;
  letter-spacing: -.025em;
  font-weight: 600;
  color: #fff;
}

.hero__sub {
  margin: 0;
  max-width: 27em;
  font-size: var(--fs-body);
  line-height: 1.85;
  color: rgba(255, 255, 255, .68);
  text-wrap: pretty;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-5);
}

/* ---------------------------------------------- 首屏文案轨（与图片同步切换）

   4 组文案叠在同一个 grid 格子里：高度自动取最高那组，
   切换时页面不会因为文案长短不同而上下跳。
   只做 opacity 过渡 —— 位移会让整屏文字一起晃，观感不好。
*/
.hero-copy__track { display: grid; }
.hero-copy__slide {
  grid-area: 1 / 1;
  opacity: 0;
  transition: opacity 520ms var(--e-out);
  /* 隐藏的组不该被点击、也不该被 Tab 焦点命中 */
  pointer-events: none;
}
.hero-copy__slide.is-on { opacity: 1; pointer-events: auto; }

/* 轮播标题是 h2（h1 视觉隐藏给 SEO 用），视觉尺寸沿用原来的 display 级 */
.hero-copy__slide .hero__title { margin-bottom: var(--sp-2); }

@media (prefers-reduced-motion: reduce) {
  .hero-copy__slide { transition: none; }
}

/* ---------------------------------------------- 右侧场景图轨

   图向右出血到视口边缘，左缘用渐变融进底色 —— 看上去是"画面从右侧延展过来"，
   而不是一张贴在图框里的图片。
   这个版式同时解决了比例问题：源图 1536x962（1.60:1），
   容器按 8/5 设比例，cover 之后只裁两侧几个像素，人像完整。
*/
.hero__media {
  position: relative;
  min-width: 0;
  aspect-ratio: 8 / 5;
  /* 右出血：抵消容器居中的留白 + 容器自身 padding。
     .hero 已 overflow: hidden，超出的部分被裁掉，不会出现横向滚动条。 */
  margin-right: calc(-1 * (max(0px, (100vw - var(--w-container)) / 2) + var(--sp-3)));
}

.hero__shot-track { position: absolute; inset: 0; }

/* 叠放切换。第一张默认可见（is-on），避免首屏出现空白 —— 首屏图是 LCP 元素，
   若初始 opacity 为 0，Chrome 会跳过它记时，指标会莫名变差。 */
.hero__shot {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transition: opacity 640ms var(--e-out);
}
.hero__shot.is-on { opacity: 1; }

.hero__shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 人像都落在画面右侧，按右侧对齐裁切才不会切到脸。
     源图 1.597:1、容器 8/5＝1.6:1，两者几乎相同，实际裁切量只有几个像素；
     这条规则真正起作用的是窄屏（16/9、4/3）那两档。 */
  object-position: 76% center;
}

/* 左、上、下三边各一道渐变，外加一层整体压暗。
   压暗这一层是必要的：生成图的中间调在 60–90，左侧底色只有 7–12，
   不压一档，图的亮度会盖过标题，视线先落在照片上而不是文字上。
   压 24% 之后人物脸部仍是最亮点，照片还立得住。 */
.hero__media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to right,
      var(--c-void) 0%,
      rgba(7, 12, 21, .8) 15%,
      rgba(7, 12, 21, 0) 52%),
    linear-gradient(to bottom, var(--c-void) 0%, rgba(7, 12, 21, 0) 26%),
    linear-gradient(to top, var(--c-void) 0%, rgba(7, 12, 21, 0) 24%),
    linear-gradient(rgba(5, 9, 15, .24), rgba(5, 9, 15, .24));
  pointer-events: none;
}

/* 控制条浮在图片左下角：与它控制的画面挨在一起，视线不用来回跳。
   静止时半透明，悬停或键盘聚焦时完全显形。 */
.hero-slider__ctrl {
  position: absolute;
  z-index: 2;
  left: var(--sp-3);
  bottom: var(--sp-3);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: rgba(4, 9, 16, .5);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--r-full);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  opacity: .6;
  transition: opacity var(--t-base);
}
.hero-slider:hover .hero-slider__ctrl,
.hero-slider:focus-within .hero-slider__ctrl { opacity: 1; }

/* 暂停态：图标换成播放三角，用强调色提示可以继续 */
.hero-slider__btn.is-paused { color: var(--c-signal); }

.hero-slider__btn {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  color: rgba(255, 255, 255, .85);
  background: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: color var(--t-fast), background var(--t-fast);
}
.hero-slider__btn:hover { color: #fff; background: rgba(255, 255, 255, .16); }
/* 上一张：右箭头转 180°，省一个图标 */
.hero-slider__btn[data-prev] .icon { transform: rotate(180deg); }
/* 播放/暂停按钮不旋转 */
.hero-slider__btn[data-toggle] .icon { transform: none; }

.hero-slider__dots { display: flex; gap: 6px; }

.hero-slider__dot {
  width: 16px;
  height: 3px;
  padding: 0;
  background: rgba(255, 255, 255, .3);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: background var(--t-fast), width var(--t-base) var(--e-out);
}
.hero-slider__dot:hover { background: rgba(255, 255, 255, .55); }
.hero-slider__dot.is-on { width: 28px; background: var(--c-signal); }

/* 键盘聚焦时给明确轮廓，不能用 hover 代替 */
.hero-slider__btn:focus-visible,
.hero-slider__dot:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* 减少动效偏好：不淡入，直接切 */
@media (prefers-reduced-motion: reduce) {
  .hero__shot { transition: none; }
}

.hero__stats {
  position: relative;
  border-top: 1px solid rgba(255, 255, 255, .1);
  background: rgba(0, 0, 0, .35);
}

/* 深色底的数据条：数字提亮、标签压暗，形成"读数"的层次 */
.stat-bar--dark { border-top-color: rgba(255, 255, 255, .1); }
.stat-bar--dark .stat-bar__item { border-right-color: rgba(255, 255, 255, .1); padding: var(--sp-3) var(--sp-3) var(--sp-3) 0; }
.stat-bar--dark .stat-bar__num { color: #fff; }
.stat-bar--dark .stat-bar__num em { color: var(--c-signal); font-style: normal; }
.stat-bar--dark .stat-bar__label { color: rgba(255, 255, 255, .52); }

/* ========================================================== 客户墙 */

.clients__head {
  text-align: center;
  margin-bottom: var(--sp-4);
}
.clients__head .eyebrow { justify-content: center; }
/* 居中时去掉左侧短线，避免整体偏右 */
.clients__head .eyebrow::before { display: none; }
.clients__head h2 {
  font-size: var(--fs-h3);
  margin-bottom: var(--sp-1);
}
.clients__sub {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--c-text-3);
}

/* 未授权阶段：行业覆盖条。横向单行，用细圆点分隔，
   比 12 个空白占位框更像"有内容"，也不占过多版面高度。 */
/* ------------------------------------------------ 客户名墙（已授权阶段）

   15 家客户以文字呈现：名称在上、细分领域在下。
   不用 logo 墙的原因：只有 4 家有标识文件，15 个位置摆 4 个反而显得单薄；
   文字墙能完整呈现名单，也不涉及客户商标的使用边界。
   列数按断点写死而不是 auto-fit：客户数是 15，能被 5 和 3 整除，
   固定 5 列（3 行整）和 3 列（5 行整）都不会出现最后一行缺角；
   auto-fit 在 1440 下算出来是 6 列，末尾只剩 3 个，看着像漏了。
*/
.client-wall {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px;                       /* 用 1px 间隙露出底色，形成细网格 */
  margin: 0;
  padding: 1px;
  list-style: none;
  background: var(--c-line);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  overflow: hidden;
}
.client-wall__item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  padding: 14px 16px;
  background: var(--c-bg);
  transition: background var(--t-fast);
}
.client-wall__item:hover { background: var(--c-bg-2); }
.client-wall__name {
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.4;
  color: var(--c-ink);
}
.client-wall__field {
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--c-text-3);
}

@media (max-width: 1200px) {
  .client-wall { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  /* 手机两列：三列会把「华冠科技（河源）」这类长名字挤断 */
  .client-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .client-wall__item { padding: 12px 12px; }
  /* 15 是奇数，两列时末行只剩一个，让它跨满整行收尾，不留半格空白 */
  .client-wall__item:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

.industry-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0;
  margin: 0;
  padding: var(--sp-3) 0;
  list-style: none;
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
}
.industry-bar li {
  display: inline-flex;
  align-items: center;
  font-size: var(--fs-sm);
  color: var(--c-text-2);
  letter-spacing: .02em;
  white-space: nowrap;
}
.industry-bar li + li::before {
  content: "";
  width: 3px;
  height: 3px;
  margin: 0 var(--sp-3);
  border-radius: 50%;
  background: var(--c-accent);
  opacity: .75;
}

/* 授权后的标识墙形态 */
.logo-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--sp-2);
}
.logo-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 72px;
  padding: var(--sp-2);
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
}
.logo-slot img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: grayscale(1);
  opacity: .72;
  transition: filter .3s var(--e-out), opacity .3s var(--e-out);
}
.logo-slot:hover img { filter: none; opacity: 1; }
.clients__note {
  margin: var(--sp-3) 0 0;
  text-align: center;
  font-size: var(--fs-xs);
  color: var(--c-text-3);
}

/* ========================================================== 制程带 */

.process__track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-3);
  margin: var(--sp-1) 0 0;
  padding: 0;
  list-style: none;
}
.process__track::before {
  content: "";
  position: absolute;
  top: 5px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--c-line-2);
}

.process__stage {
  position: relative;
  padding-top: var(--sp-4);
}
.process__stage::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--c-bg);
  border: 2px solid var(--c-primary);
  z-index: 1;
}

.process__idx {
  display: inline-block;
  margin-left: var(--sp-1);
  font-size: var(--fs-xs);
  font-weight: 400;
  color: var(--c-text-3);
  font-variant-numeric: tabular-nums;
  letter-spacing: .06em;
  vertical-align: 2px;
}

.process__stage h3 {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-h4);
}

.process__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
  margin: 0;
  padding: 0;
  list-style: none;
}
.process__tags li {
  padding: 3px 10px;
  border-radius: var(--r-xs);
  background: var(--c-primary-soft);
  color: var(--c-primary-dark);
  font-size: var(--fs-xs);
  line-height: 1.6;
}

/* 该段在系统里留痕的对象，把"全制程覆盖"落成可核对的具体记录 */
.process__record {
  margin: var(--sp-2) 0 0;
  padding-top: var(--sp-2);
  border-top: 1px dashed var(--c-line);
  font-size: var(--fs-xs);
  line-height: 1.7;
  color: var(--c-text-3);
}
.process__record span {
  margin-right: var(--sp-1);
  color: var(--c-accent-ink);
  letter-spacing: .06em;
}

/* ======================================================== 模块矩阵 */

.modules__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  background: var(--c-line);
}

.mod {
  position: relative;
  display: block;
  padding: var(--sp-3) var(--sp-2) var(--sp-3);
  background: var(--c-bg);
  color: var(--c-text);
  transition: background var(--t-base) var(--e-out);
}
.mod::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid transparent;
  border-radius: var(--r-xs);
  pointer-events: none;
  transition: border-color var(--t-base) var(--e-out);
}
.mod:hover { background: #FBFCFD; color: var(--c-text); }
.mod:hover::after { border-color: var(--c-primary); }

.mod__icon {
  display: block;
  margin-bottom: var(--sp-2);
  color: var(--c-text-3);
  transition: color var(--t-base) var(--e-out);
}
.mod:hover .mod__icon { color: var(--c-primary); }

.mod h3 {
  margin: 0 0 var(--sp-0);
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--c-ink);
}
.mod p {
  margin: 0;
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: var(--c-text-3);
}

/* ============================================================ 看板 */

/* 与首屏同一套深底：两处深色隔着一片白色内容区，不会连成一整块黑。
   底色统一之后，"深色 = 讲数据的地方"这件事在页面上才成立。 */
.boards {
  background: var(--c-void);
  color: rgba(255, 255, 255, .72);
}

/* 深色区块里换成更亮的青：#0C8F6A 落在 #070C15 上对比度只有 3.4，
   正文级小字不达标，这里必须用 --c-signal。 */
.boards .eyebrow,
.boards .link-arrow { color: var(--c-signal); }

.boards__grid {
  display: grid;
  grid-template-columns: .94fr 1.06fr;
  gap: clamp(var(--sp-5), 6vw, var(--sp-7));
  /* 顶部对齐：左边标题与右边第一条的序号落在同一水平线上，
     比垂直居中更像排版而不是居中摆放 */
  align-items: start;
}
.boards__copy h2 {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-h2);
  line-height: 1.32;
  color: #fff;
}
.boards__sub {
  margin: 0 0 var(--sp-4);
  font-size: var(--fs-body);
  line-height: 1.8;
  color: rgba(255, 255, 255, .66);
}

.boards__items {
  margin: 0;
  padding: 0;
  list-style: none;
}
.boards__items li {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  grid-template-areas:
    "no  title"
    "no  text";
  align-items: start;
  padding: var(--sp-4) 0;
  border-top: 1px solid rgba(255, 255, 255, .12);
}
.boards__items li:last-child { border-bottom: 1px solid rgba(255, 255, 255, .12); }

/* 序号用等宽字体 + 强调色：它是这一列的节奏标记，不是正文 */
.boards__no {
  grid-area: no;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: .08em;
  line-height: 1.9;
  color: var(--c-signal);
}
.boards__items h3 {
  grid-area: title;
  margin: 0 0 var(--sp-1);
  font-size: var(--fs-h4);
  font-weight: 500;
  color: #fff;
}
.boards__items p {
  grid-area: text;
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.75;
  color: rgba(255, 255, 255, .6);
}

/* ============================================================ 硬件 */

/* ------------------------------------------------ 硬件：产品卡片带

   原来是「左一张料架大图 + 右一段文字」，本质是单款产品介绍。
   改成卡片网格后是一个产品系列：后台加一条硬件记录，这里自动多一张卡。
   auto-fit + minmax 保证 3 个不空、6 个不挤、手机上一列。
*/
.hardware__head {
  max-width: 44em;
  margin-bottom: var(--sp-5);
}
.hardware__head h2 {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-h2);
  line-height: 1.34;
}

.hw-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--sp-3);
}

.hw-strip__card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: var(--sp-2);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  transition: border-color var(--t-base) var(--e-out),
              box-shadow var(--t-base) var(--e-out),
              transform var(--t-base) var(--e-out);
}
.hw-strip__card:hover {
  border-color: var(--c-primary);
  box-shadow: var(--sh-2);
  transform: translateY(-2px);
}
.hw-strip__card:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 3px;
}

.hw-strip__fig {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  padding: 5px;
  background: var(--c-bg-2);
  border-radius: var(--r-sm);
  overflow: hidden;
}
.hw-strip__fig img {
  width: 100%;
  height: 100%;
  /* 料架图是竖长的（160×180），方格里 cover 会把上下切掉，用 contain 保完整 */
  object-fit: contain;
  transition: transform var(--t-base) var(--e-out);
}
.hw-strip__card:hover .hw-strip__fig img { transform: scale(1.05); }
/* 无封面时用矢量兜底图，缩到格子里 */
.hw-strip__fig svg { width: 40px; height: auto; }

.hw-strip__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.hw-strip__name {
  font-size: var(--fs-h5);
  font-weight: 600;
  color: var(--c-ink);
  transition: color var(--t-fast);
}
.hw-strip__card:hover .hw-strip__name { color: var(--c-primary); }
.hw-strip__tag {
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: var(--c-text-3);
}

/* 箭头：默认浅，悬停移一点，暗示可点 */
.hw-strip__go {
  flex: 0 0 auto;
  margin-left: auto;
  color: var(--c-text-3);
  transition: color var(--t-fast), transform var(--t-fast) var(--e-out);
}
.hw-strip__card:hover .hw-strip__go {
  color: var(--c-primary);
  transform: translateX(3px);
}

/* 三条联动能力：横排，窄屏堆叠 */
.hw-strip__notes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-2) var(--sp-4);
  margin: var(--sp-5) 0 0;
  padding: var(--sp-3) 0 0;
  list-style: none;
  border-top: 1px solid var(--c-line);
}
.hw-strip__notes li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--c-text-2);
}
.hw-strip__notes .icon { flex: 0 0 auto; margin-top: 3px; color: var(--c-primary); }
.hw-strip__notes b { color: var(--c-ink); font-weight: 600; }

.hw-strip__more { margin: var(--sp-4) 0 0; }

@media (max-width: 900px) {
  .hw-strip__notes { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .hw-strip { grid-template-columns: 1fr; }
  .hw-strip__fig { width: 72px; height: 72px; }
}

.hardware__copy h2 {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-h2);
  line-height: 1.34;
}
.hardware__sub {
  margin: 0;
  font-size: var(--fs-body);
  line-height: var(--lh-loose);
  color: var(--c-text-2);
}

.feature-list {
  margin: var(--sp-3) 0 var(--sp-4);
  padding: 0;
  list-style: none;
}
.feature-list li {
  padding: var(--sp-2) 0;
  border-top: 1px solid var(--c-line);
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--c-text-2);
}
.feature-list li:last-child { border-bottom: 1px solid var(--c-line); }
.feature-list__k {
  display: block;
  margin-bottom: 2px;
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--c-ink);
}

/* ============================================================ 案例 */

.cases__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-3);
}

.case {
  display: flex;
  flex-direction: column;
  padding: var(--sp-3);
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  transition: transform var(--t-base) var(--e-out),
              box-shadow var(--t-base) var(--e-out),
              border-color var(--t-base) var(--e-out);
}
.case:hover {
  transform: translateY(-2px);
  border-color: var(--c-line-2);
  box-shadow: var(--sh-2);
}
.case .tag { align-self: flex-start; }
.case h3 {
  margin: var(--sp-2) 0 var(--sp-0);
  font-size: var(--fs-h4);
}
.case__identity {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--c-text-3);
}
.case__scope {
  margin: 0 0 var(--sp-2);
  padding-top: var(--sp-2);
  border-top: 1px solid var(--c-line);
  font-size: var(--fs-xs);
  line-height: 1.7;
  color: var(--c-text-2);
}
.case__desc {
  flex: 1;
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-sm);
  line-height: 1.75;
  color: var(--c-text-2);
}

/* ======================================================== 知识中心 */

.knowledge__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}
.knowledge__head .section-head { margin-bottom: 0; }

.knowledge__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
  align-items: stretch;
}

.post {
  display: flex;
  flex-direction: column;
  padding-top: var(--sp-3);
  border-top: 2px solid var(--c-ink);
}
.post__cat {
  font-size: var(--fs-xs);
  letter-spacing: .08em;
  color: var(--c-accent-ink);
}
.post h3 {
  margin: var(--sp-1) 0 var(--sp-1);
  min-height: 3em;
  font-size: var(--fs-h4);
  line-height: 1.5;
}
.post h3 a { color: var(--c-ink); }
.post h3 a:hover { color: var(--c-primary); }
.post__desc {
  flex: 1;
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-sm);
  line-height: 1.75;
  color: var(--c-text-2);
}
.post__meta {
  margin: auto 0 0;
  font-size: var(--fs-xs);
  color: var(--c-text-3);
}

/* ========================================================== 响应式 */


@media (max-width: 1080px) {
  .hero__inner,
  .boards__grid,
  .hardware__grid {
    grid-template-columns: 1fr;
    gap: var(--sp-5);
  }
  .hero { padding-top: calc(var(--h-header) + var(--sp-5)); }
  /* 单列时图落到文案下方，改成横向通栏。
     左右都要出血 —— 只出血右边的话，图会被容器的 24px 内边距框住，
     看起来像贴了一张卡片，而不是画面自己延伸出去。
     左缘也不再需要渐隐：那时图的左边就是屏幕左边，渐隐反而缺一块。 */
  .hero__media {
    aspect-ratio: 16 / 9;
    margin-inline: calc(-1 * var(--sp-3));
  }
  .hero__media::before {
    background:
      linear-gradient(to bottom, var(--c-void) 0%, rgba(7, 12, 21, 0) 20%),
      linear-gradient(to top, var(--c-void) 0%, rgba(7, 12, 21, 0) 16%);
  }
  .hero__shot img { object-position: 70% 32%; }
  .hero-slider__ctrl { left: var(--sp-2); bottom: var(--sp-2); opacity: 1; }
  .modules__grid { grid-template-columns: repeat(3, 1fr); }
  .cases__grid { grid-template-columns: 1fr; }
  .knowledge__grid { grid-template-columns: 1fr; gap: var(--sp-4); }
  .hardware__figure { max-width: 400px; }
}

@media (max-width: 768px) {
  .hero__actions { flex-direction: column; gap: var(--sp-1); }
  .hero__actions .btn { width: 100%; }
  .hero__media { aspect-ratio: 4 / 3; }
  .hero__shot img { object-position: 68% 28%; }

  .stat-bar--dark { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-bar--dark .stat-bar__item { padding: var(--sp-2) var(--sp-2) var(--sp-2) 0; }
  .stat-bar--dark .stat-bar__item:nth-child(2n) { border-right: 0; }
  .stat-bar--dark .stat-bar__item:nth-child(-n+2) { border-bottom: 1px solid var(--c-dark-line); }

  .process__track { grid-template-columns: 1fr; gap: 0; }
  .process__track::before { display: none; }
  .process__stage {
    padding: var(--sp-2) 0 var(--sp-2) var(--sp-3);
    border-left: 2px solid var(--c-line-2);
  }
  .process__stage::before {
    top: var(--sp-3);
    left: -6.5px;
    background: var(--c-bg);
  }

  .modules__grid { grid-template-columns: repeat(2, 1fr); }
  .mod { padding: var(--sp-2); }
  .mod__icon { margin-bottom: var(--sp-1); }

  .knowledge__head { flex-direction: column; align-items: flex-start; gap: var(--sp-2); }
  .post h3 { min-height: 0; }

  /* 窄屏下分隔点会出现在行首，改为两列网格并去掉点 */
  .industry-bar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-2) var(--sp-3);
    text-align: left;
  }
  .industry-bar li + li::before { display: none; }
  .logo-grid { grid-template-columns: repeat(3, 1fr); }
}

/* 模块矩阵下方的"看完整体系"出口 */
.modules__more {
  margin-top: var(--sp-4);
  display: flex;
  justify-content: center;
}

/* =========================================================== 规模与资质 */
/* 采购方判断 MES 供应商的三个硬指标：有没有可参观的样板工厂、
   出事多久能到现场、资质齐不齐（投标要用）。这一区只摆数字与清单，
   不放形容词，也不做成卡片墙 —— 数字本身是视觉重心。 */
.cred__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-5);
  margin-bottom: var(--sp-5);
}
.cred__copy { max-width: 620px; }
.cred__title {
  margin: var(--sp-1) 0 0;
  font-size: var(--fs-h2);
  line-height: 1.25;
  color: var(--c-ink);
}
.cred__lead {
  max-width: 400px;
  margin: 0;
  color: var(--c-text-2);
  font-size: var(--fs-sm);
  line-height: 1.8;
}

/* 四个数字用竖线分隔，像报表而不是卡片 */
.cred__stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
}
.cred__stat {
  min-width: 0;
  padding: var(--sp-3) var(--sp-3);
  border-left: 1px solid var(--c-line);
}
.cred__stat:first-child { padding-left: 0; border-left: 0; }
.cred__stat dt {
  display: flex;
  align-items: baseline;
  gap: 3px;
  color: var(--c-ink);
}
.cred__num {
  font-size: 42px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.cred__stat dt em {
  font-style: normal;
  font-size: 20px;
  font-weight: 500;
  color: var(--c-text-2);
  transform: translateY(-2px);
}
.cred__stat dd {
  margin: var(--sp-1) 0 0;
  font-size: var(--fs-sm);
  color: var(--c-text-2);
}

.cred__certs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-2);
  margin: var(--sp-4) 0 0;
  padding: 0;
  list-style: none;
}
.cred__cert {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-1);
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  background: var(--c-bg);
}
.cred__cert-ico {
  display: flex;
  flex: none;
  margin-top: 1px;
  color: var(--c-primary);
}
.cred__cert-body { min-width: 0; }
.cred__cert-body b {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.5;
  color: var(--c-ink);
}
.cred__cert-body em {
  display: block;
  margin-top: 2px;
  font-style: normal;
  font-size: var(--fs-xs);
  line-height: 1.55;
  color: var(--c-text-3);
}

@media (max-width: 1024px) {
  .cred__head { flex-direction: column; align-items: flex-start; gap: var(--sp-2); }
  .cred__lead { max-width: 100%; }
  .cred__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); border: 0; }
  .cred__stat {
    padding: var(--sp-2) 0;
    border-left: 0;
    border-top: 1px solid var(--c-line);
  }
  .cred__stat:nth-child(even) { padding-left: var(--sp-3); border-left: 1px solid var(--c-line); }
  .cred__certs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cred__num { font-size: 34px; }
}

@media (max-width: 560px) {
  .cred__num { font-size: 30px; }
  .cred__certs { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------- 概览与 FAQ */
/* 概览区：要点两列排布，结论句单独强调。表格用 site.css 的 .table 体系。 */
.overview__points {
  list-style: none;
  margin: var(--sp-4) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3);
}
.overview__point {
  padding: var(--sp-3);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md, 10px);
  background: var(--c-bg-2, #fff);
}
.overview__point b { display: block; margin-bottom: 4px; }
.overview__point span { color: var(--c-text-2); font-size: var(--fs-sm); line-height: 1.7; }
.overview .table-wrap { margin-top: var(--sp-4); }
.overview .table caption {
  text-align: left;
  font-weight: 600;
  padding-bottom: var(--sp-2);
  color: var(--c-text-2);
}
.overview__conclusion {
  margin-top: var(--sp-4);
  padding: var(--sp-3);
  border-left: 3px solid var(--c-accent, #0b5);
  background: var(--c-bg-2, #f7f8fa);
  border-radius: 0 var(--r-md, 10px) var(--r-md, 10px) 0;
  font-weight: 600;
  line-height: 1.8;
}
.home-faq__list { margin-top: var(--sp-3); }
.home-faq__item {
  border: 1px solid var(--c-line);
  border-radius: var(--r-md, 10px);
  background: var(--c-bg-2, #fff);
  padding: 0 var(--sp-3);
}
.home-faq__item + .home-faq__item { margin-top: var(--sp-2); }
.home-faq__item summary {
  cursor: pointer;
  font-weight: 600;
  padding: var(--sp-3) 0;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-2);
}
.home-faq__item summary::-webkit-details-marker { display: none; }
.home-faq__item summary::after { content: "＋"; color: var(--c-text-3); font-weight: 400; }
.home-faq__item[open] summary::after { content: "－"; }
.home-faq__item p {
  margin: 0;
  padding: 0 0 var(--sp-3);
  color: var(--c-text-2);
  line-height: 1.8;
}

@media (max-width: 720px) {
  .overview__points { grid-template-columns: 1fr; }
}