/* ============================================================
   常州德创高新材料（DCHT）— 官网样式 v2
   设计语言：深蓝 + 青色 + 琥珀点缀，浅色主题，专业简洁
   注意：公司 Logo 为深蓝色，导航栏保持常亮浅色底
   ============================================================ */

:root {
  --primary: #173D86;
  --primary-2: #2E5DB8;          /* 品牌蓝亮阶（方案 B 定案）：与 PPT 产品规格卡头渐变同色 */
  --logo-red: #E50012;          /* logo 红点 · 点缀色：只做「点」与短条末段，不做底色 */
  --primary-d: #0A214D;
  --primary-50: #EDF2FB;
  --primary-100: #D9E3F5;
  --accent: #0FA3A3;
  --amber: #F2A93B;
  --ink: #1F2A37;
  --ink-soft: #41505F;
  --muted: #7A8794;
  --line: #DDE7F1;
  --line-soft: #E8EFF6;
  --bg: #FFFFFF;
  --bg-alt: #F7FAFD;
  --card: #FFFFFF;
  --radius: 14px;
  --radius-inner: 10px;
  --shadow: 0 1px 2px rgba(23, 61, 134, .04), 0 12px 32px -8px rgba(23, 61, 134, .10);
  --shadow-sm: 0 1px 2px rgba(23, 61, 134, .04), 0 6px 18px -6px rgba(23, 61, 134, .08);
  --shadow-hover: 0 2px 4px rgba(23, 61, 134, .05), 0 20px 44px -12px rgba(23, 61, 134, .16);
  --maxw: 1180px;
  --header-h: 74px;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ff: "HarmonyOS Sans SC", "Alibaba PuHuiTi 3.0", "Alibaba PuHuiTi", "PingFang SC", "Microsoft YaHei", "Noto Sans SC", "Hiragino Sans GB", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: var(--header-h); }
body {
  font-family: var(--ff);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  font-size: 16px;
  overflow-x: hidden;   /* 揭示动画左 / 右移变体的横向溢出兜底 */
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

/* ---------- 数字与型号：站点字体 + 等宽数字（精密工业感，但不另类） ----------
   2026-09-19 改：原先型号/代码牌用等宽字体（SF Mono / Menlo），字形与字距和站点主体
   字体反差过大，在页面里"跳"出来显得突兀；且等宽字更宽，型号在窄列里更易折行。
   现改为沿用站点字体，仅保留 tabular-nums 让数字逐位对齐、字重与颜色维持强调。 */
.cp-code, .cp-models, .acc-code, .pd-code .code, .am-code,
.sc-name, .sc-v, .sc-k,
.stat-num, .tl-year, .spec-table, .stat-label {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ---------- 线性图标（替代 emoji） ---------- */
.ico-svg { display: block; flex: none; }
.feature-ico svg { width: 26px; height: 26px; color: var(--primary); }
.honor-ico svg { width: 28px; height: 28px; color: var(--accent); }
.ci-ico svg { width: 24px; height: 24px; color: var(--primary); }
.addr .ico svg { width: 17px; height: 17px; color: var(--accent); }
.map-placeholder svg { width: 22px; height: 22px; color: var(--primary); }
/* ⚠️ 这里**不能**写 `color` —— 图标描边用的是 `stroke="currentColor"`，
   由 `.back-top` 的 color 继承下来。原来写死 `#fff`（配实心蓝底），
   底色改透明后必须让它继承，否则箭头永远白色、在白底上消失。 */
.back-top svg { width: 20px; height: 20px; }


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

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 13px 28px; border-radius: 999px; font-weight: 600;
  font-size: 15px; cursor: pointer; border: 1.5px solid transparent;
  transition: all .25s var(--ease); letter-spacing: .5px;
}
/* 2026-09-23 修正（峰哥指出方向错误）：
   hover 的「上浮」是本项目既定的统一惯例 —— .cat-card / .feature-card / .news-card（-4px）、
   .pd-nav a / .job-card（-3px）、.hero-chips a（-2px）全都上浮。
   全站唯一的例外是 .btn-outline（「了解德创」），它不上浮。
   所以真正的「孤例」在 .btn-outline 身上 —— 正确解法是让例外归队（补上浮），
   而不是把 .btn-primary 的去浮拉平（那样会把 1 个例外复制成 2 个，还连累 .btn-primary 的 9 处使用）。
   三条按钮规则现统一为「上浮 2px + 色彩反馈」，与卡片/chips 同一套语言。 */
.btn-primary { background: var(--primary); color: #fff; box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--primary-2); transform: translateY(-2px); }
.btn-ghost { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.55); }
.btn-ghost:hover { background: rgba(255,255,255,.22); transform: translateY(-2px); }
.btn-outline { background: transparent; color: var(--primary); border-color: var(--primary); }
.btn-outline:hover { background: var(--primary); color: #fff; transform: translateY(-2px); }
/* hero 两颗按钮（.btn-lead）· 2026-09-23 二次定案（峰哥口述）：
   原为「只给主入口铺底（--primary-100）」，峰哥改为**两颗都一样铺淡蓝底**，
   并要求「和下面几个按钮有点儿区隔就好，再淡一点」。
   → 底色从 --primary-100（#D9E3F5）退到 **--primary-50（#EDF2FB）**，浅一档。
   区隔对象是 hero 下方那排**白底 chips**（.hero-chips a 是 background:#fff + 浅灰描边）：
   眼睛主要靠「淡蓝底 vs 纯白底」分辨，而 hero 背景本身近白（渐变中段 #FFF），
   所以底色只要能透出一点点蓝就够 —— 加上按钮本身的深蓝描边，轮廓不依赖底色。
   ⚠️ 必须写在 .btn-outline 之后：两者特异性相同（0,1,0），靠后者生效；
      顺序颠倒的话 transparent 会盖掉淡蓝底。hover 由 .btn-outline:hover（0,2,0）接管，不受影响。
   ⚠️ 用 --primary-50 而不是新造一个 hex —— 保持 token 体系（同色相 tint 派生），
      不要为「再淡一点」引入体系外的颜色。 */
.btn-lead { background: var(--primary-50); }
.btn-sm { padding: 9px 18px; font-size: 14px; }
.btn-block { width: 100%; }

/* ---------- Header（常亮浅色，保证深色 Logo 清晰） ---------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; height: var(--header-h);
  z-index: 1000; display: flex; align-items: center;
  background: rgba(255,255,255,.96);
  backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow .3s ease;
}
.site-header.scrolled { box-shadow: var(--shadow-sm); }
.header-inner { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 18px; }
.brand { display: flex; align-items: center; flex: none; }
.brand-logo { height: 44px; width: auto; display: block; }

.main-nav { display: flex; gap: 4px; flex-wrap: nowrap; position: relative; }
.main-nav a {
  padding: 8px 13px; border-radius: var(--radius-inner); font-size: 15px; font-weight: 500;
  color: var(--ink-soft); transition: color .25s var(--ease); white-space: nowrap;
}
.main-nav a:hover { color: var(--primary); }
.main-nav a.active { color: var(--primary); font-weight: 600; }
.nav-indicator {
  position: absolute; left: 0; bottom: 0; height: 2.5px; width: 0;
  border-radius: 3px; background: linear-gradient(90deg, var(--accent), var(--primary));
  opacity: 0; pointer-events: none;
  transition: transform .35s var(--ease), width .35s var(--ease), opacity .25s var(--ease);
}
.nav-indicator.on { opacity: 1; }

.header-actions { display: flex; align-items: center; gap: 12px; flex: none; }
.header-cta { color: var(--primary); border-color: var(--primary); background: transparent; }
.header-cta:hover { background: var(--primary); color: #fff; }

.menu-toggle { display: none; width: 42px; height: 42px; background: transparent;
  border: none; cursor: pointer; flex-direction: column; justify-content: center; gap: 5px; padding: 9px; }
.menu-toggle span { display: block; height: 2.5px; width: 100%; background: var(--primary); border-radius: 3px; transition: .3s; }
.menu-toggle.open span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.menu-toggle.open span:nth-child(2) { opacity: 0; }
.menu-toggle.open span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* Mobile nav */
.mobile-nav {
  position: fixed; top: 0; right: -100%; width: 78%; max-width: 320px; height: 100vh;
  background: #fff; z-index: 1100; box-shadow: -10px 0 40px rgba(0,0,0,.15);
  display: flex; flex-direction: column; padding: 90px 24px 32px; gap: 6px;
  transition: right .32s ease;
}
.mobile-nav.open { right: 0; }
/* ⚠️ 抽屉遮罩（2026-09-26 新增）：点它即关闭抽屉。
   为什么用 `<button>` 而不是 `<div>` —— **iOS Safari 只对「可点击元素」派发 click**
   （`a` / `button` / `input`，或带 `cursor:pointer` 的元素）。用普通 div 当遮罩，
   在 iPhone 上点空白处事件根本到不了监听器 → 抽屉关不掉（这正是用户报的那个 bug）。
   z-index 取 1090：压住 `.site-header`(1000)，同时让 `.mobile-nav`(1100) 保持在最上层。 */
.nav-overlay {
  position: fixed; inset: 0; z-index: 1090;
  width: 100%; height: 100%;
  background: rgba(8, 20, 45, .44);
  border: 0; padding: 0; cursor: pointer;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .28s var(--ease), visibility .28s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.nav-overlay.open { opacity: 1; visibility: visible; pointer-events: auto; }
.mobile-nav a { padding: 14px 12px; font-size: 17px; font-weight: 500; border-radius: var(--radius-inner); color: var(--ink); }
.mobile-nav a.active { color: var(--primary); background: var(--bg-alt); font-weight: 700; }
.mobile-nav a:hover { background: var(--bg-alt); color: var(--primary); }

/* ---------- Hero（品牌 + 核心产品 · 浅色背景） ---------- */
.hero { position: relative; min-height: 92vh; display: flex; align-items: center;
  justify-content: center; text-align: center; overflow: hidden;
  padding-top: var(--header-h);
  background:
    radial-gradient(1100px 620px at 82% -12%, rgba(15,163,163,.16), transparent 60%),
    radial-gradient(820px 520px at 8% 112%, rgba(242,169,59,.09), transparent 55%),
    linear-gradient(135deg, #F7FAFD 0%, #FFFFFF 55%, #EDF2FB 100%); }
/* 细网格质感 + 光斑装饰，纯 CSS，不依赖照片 */
.hero::before { content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(23,61,134,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(23,61,134,.045) 1px, transparent 1px);
  background-size: 46px 46px; mask-image: radial-gradient(120% 90% at 50% 0%, #000 55%, transparent 100%);
  -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 55%, transparent 100%); }
.hero::after { content: ""; position: absolute; right: -90px; top: -90px; width: 360px; height: 360px;
  border-radius: 50%; background: radial-gradient(circle, rgba(15,163,163,.22), transparent 70%);
  filter: blur(4px); }
.hero-content { position: relative; z-index: 2; padding: 72px 24px 64px; max-width: 920px; }
/* 2026-09-22 改：去掉白底容器（原 background:#fff + 边框 + 投影）。
   hero 底色本身是浅色渐变（#F7FAFD -> #FFF -> #EDF2FB），深蓝 logo 直接裸露即可读，
   白底会形成一块突兀的"贴纸"。保留 14px 上下 padding 以维持与 h1 的原有间距节奏。 */
.hero-logo-chip {
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; padding: 14px 22px; margin-bottom: 26px;
}
.hero-logo-chip img { height: 52px; width: auto; }
.hero-eyebrow { letter-spacing: 4px; font-size: 14px; color: var(--accent); font-weight: 700; margin-bottom: 16px; }
.hero-title { font-size: clamp(32px, 5.2vw, 56px); font-weight: 800; line-height: 1.2; letter-spacing: .5px; color: var(--primary); }
.hero-slogan { font-size: clamp(19px, 2.8vw, 30px); font-weight: 700; margin: 16px 0 18px; letter-spacing: 3px; color: var(--ink); }
.hero-sub { font-size: clamp(15px, 1.6vw, 18px); color: var(--ink-soft); line-height: 1.9; }
/* ---------- 探索区：指针进来才展开产品 chips ---------- */
/* 2026-09-23 新增（峰哥口述「探索核心产品指针在上面的时候再展开下面的 FOG COG 这些按钮」）：
   默认收起那排 chips，指针落进「探索区」（产品探索 + 中间空隙 + chips 行）时才展开。
   ⚠️ 2026-10-16 起「了解德创」不再触发展开（峰哥：下拉不能和产品探索一样）—— 见下方 :has() 规则。
   `.hero-explore` 这一层容器就是为此存在的 —— 见 index.html 里的注释（hover 桥）。

   ⚠️ 收起时**仍然占位**（只用 visibility + opacity 藏），不能用 `display:none` / `max-height:0`：
      一改高度，hero 里这块垂直居中的内容就会整体上下跳 —— 展开的一瞬间按钮自己会挪位置。
   ⚠️ 必须带 `:focus-within`：这排 chips 是产品页入口，只认 `:hover` 的话**键盘用户永远打不开**。
      链路是通的：Tab 到按钮 → 容器进入 focus-within → chips 变可见 → 再 Tab 就能进 chips。
      注意 `visibility:hidden` 的元素**不可聚焦**，所以「靠 chips 自己聚焦来展开」是死锁，
      必须由同一容器里的按钮先拿到焦点。
   ⚠️ `visibility` 用 `0s` 过渡 + 延迟，让**淡出动画播完再设 hidden**（否则会瞬间消失、没有过渡）。
   ⚠️ 触摸屏 / 窄屏没有 hover → 必须降级为常驻显示，见下方 @media。 */
.hero-explore { width: fit-content; max-width: 100%; margin: 0 auto; }
.hero-btns { margin-top: 32px; display: flex; gap: 40px; justify-content: center; flex-wrap: wrap; }
/* 窄屏回到较近的间距：PC 拉开到 40px 后，移动端横向空间有限，两颗按钮靠拢。 */
@media (max-width: 768px) {
  .hero-btns { gap: 16px; }
}
.hero-chips {
  margin-top: 34px; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .28s var(--ease), transform .28s var(--ease), visibility 0s .28s;
}
.hero-explore:hover .hero-chips,
.hero-explore:focus-within .hero-chips {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity .28s var(--ease), transform .28s var(--ease), visibility 0s 0s;
}
/* ---------- 2026-10-16：chips 只跟「产品探索」走，「了解德创」悬停时收回去 ----------
   峰哥反馈：「鼠标指针放在了解德创这里下拉不能和产品探索一样」。
   chips 是产品入口（FOG/COG/FOP/COP/TP/FOB），属「产品探索」；「了解德创」指向关于我们，
   不该拉出同一串产品快捷入口。

   ⚠️ **只在有 hover 的桌面屏生效**：窄屏 / 触摸屏的 chips 本来就常驻显示（见下方 @media），
      这条规则若不限定条件，会把常驻的 chips 又藏起来（特异性比常驻规则高）。
   ⚠️ **用 :has() 而不是改结构**：hover 桥（按钮 → 34px 空隙 → chips）依赖「整块容器」的
      连续性 —— 一旦把 chips 挪出 .hero-explore，指针经过那 34px 空隙时 hover 就断了，
      chips 会收掉、根本够不着（这正是当初包这一层容器的原因）。
   ⚠️ 不支持 :has() 的浏览器会**整条丢弃**该规则 → 退化为「两颗都展开」（即改动前的行为），
      不会坏、也不会把 chips 永久藏死。
   ⚠️ :focus-within 同样处理：键盘 Tab 到「了解德创」时不展开产品 chips。 */
@media (hover: hover) and (min-width: 769px) {
  .hero-explore:hover:has(.btn-about:hover) .hero-chips,
  .hero-explore:focus-within:has(.btn-about:focus) .hero-chips {
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity .28s var(--ease), transform .28s var(--ease), visibility 0s .28s;
  }
}
.hero-chips a {
  padding: 7px 16px; border-radius: 999px; font-size: 13.5px; font-weight: 600; letter-spacing: 1px;
  background: #fff; border: 1px solid var(--line); color: var(--primary);
  transition: background .25s, transform .25s, color .25s;
}
.hero-chips a:hover { background: var(--primary); color: #fff; transform: translateY(-2px); }
/* 触摸屏与窄屏没有 hover：chips 一律常驻显示，别把产品入口藏起来。
   写在基础规则之后 → 同特异性靠后生效。 */
@media (hover: none), (max-width: 768px) {
  .hero-chips { opacity: 1; visibility: visible; transform: none; transition: none; }
}
/* 下滑指示 · 2026-09-23 改造（峰哥口述）：
   原为 hero 内 absolute 定位的「鼠标」图形 —— 挂在 hero 里、bottom:26px 跟着 hero 高度走，
   窗口一大一小位置就飘。现改为**固定在视口底部居中**的空心箭头，位置与窗口尺寸无关。
   ⚠️ 居中改用 left:50% + margin-left，不用 translateX —— 把 transform 腾给浮动动画，
      否则 @keyframes 的 transform 会盖掉 :hover 的位移（animation 优先级高于普通声明）。
   ⚠️ 透明度：.55 → .42 → **.30**。峰哥两次要求「更淡」，
      最终口径 = 「不要一直显示 + 透明度再高一点」（2026-09-23 二轮确认）。
      所以这里同时有两件事：① 滚到最底部（y >= max-80）加 .hide 淡出 —— 下面没内容了，
      继续提示会误导；② 静息更透（.30 ≈ 透明度 70%），只在鼠标移上去时才实起来。
      .30 在白底上合成约 #B9C5DB，与白的灰度差仍有 59（可辨阈值 12）→ 够轻但仍看得见。 */
.scroll-cue {
  position: fixed; left: 50%; margin-left: -20px; bottom: 20px;
  width: 40px; height: 40px; display: grid; place-items: center;
  color: rgba(23,61,134,.30); z-index: 800;
  transition: opacity .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
  animation: cuebob 2s ease-in-out infinite;
}
.scroll-cue svg { width: 26px; height: 26px; }
.scroll-cue:hover { color: var(--primary); animation: none; transform: translateY(4px); }
.scroll-cue.hide { opacity: 0; visibility: hidden; pointer-events: none; }
@keyframes cuebob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(5px); }
}

/* ---------- 内页顶部横幅 ---------- */
.page-hero {
  position: relative; padding: calc(var(--header-h) + 56px) 0 52px;
  background: linear-gradient(135deg, var(--primary-d), var(--primary) 55%, var(--primary-2));
  color: #fff; text-align: center; overflow: hidden;
}
.page-hero::after { content: ""; position: absolute; right: -120px; top: -120px; width: 380px; height: 380px;
  border-radius: 50%; background: radial-gradient(circle, rgba(15,163,163,.35), transparent 70%); }
.page-hero .crumb { font-size: 14px; color: rgba(255,255,255,.75); margin-bottom: 12px; }
.page-hero .crumb a { color: rgba(255,255,255,.85); }
.page-hero .crumb a:hover { color: var(--amber); }
.page-hero h1 { font-size: clamp(26px, 3.6vw, 40px); font-weight: 800; letter-spacing: 1px; }
.page-hero p { margin-top: 12px; color: rgba(255,255,255,.85); font-size: 16px; }

/* ---------- Sections ---------- */
.section { padding: 96px 0; }
.section-tight { padding: 72px 0; }
.section-alt { background: var(--bg-alt); }
.section-head { text-align: center; max-width: 760px; margin: 0 auto 56px; }
.section-tag { display: inline-block; font-size: 13px; letter-spacing: .18em; font-weight: 700; color: var(--accent); margin-bottom: 14px; }
/* 英文小标签前置 logo 红点 —— 与 PPT 25 页全篇的小标签同款（点缀色，只做点）*/
.section-tag::before { content: ""; display: inline-block; width: 7px; height: 7px;
  border-radius: 50%; background: var(--logo-red); margin-right: 6px; vertical-align: 1px; }
.section-title { font-size: clamp(26px, 3.2vw, 36px); font-weight: 800; color: var(--primary); position: relative; padding-bottom: 18px; letter-spacing: -.01em; }
.section-title::after { content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: 56px; height: 4px; border-radius: 3px;
  background: linear-gradient(90deg, var(--accent) 0%, var(--amber) 55%, var(--logo-red) 100%); }
.section-desc { margin-top: 16px; color: var(--ink-soft); font-size: 17px; }

.block-head { margin: 64px 0 28px; text-align: center; }
.block-head h3 { font-size: 24px; color: var(--primary); font-weight: 700; }
.muted { color: var(--muted); }
.center { text-align: center; }
.mt { margin-top: 22px; }

/* ---------- 首页：核心产品系列卡 ---------- */
.cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.cat-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 30px; box-shadow: var(--shadow-sm); position: relative; overflow: hidden;
  display: flex; flex-direction: column; transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.cat-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--primary), var(--accent)); }
.cat-card:hover { transform: translateY(-4px) !important; box-shadow: var(--shadow-hover); }
.cat-card h3 { color: var(--primary); font-size: 20px; margin-bottom: 4px; }
.cat-card .cat-en { font-size: 12.5px; letter-spacing: 2px; color: var(--accent); font-weight: 700; margin-bottom: 12px; }
.cat-card .cat-desc { color: var(--ink-soft); font-size: 14.5px; margin-bottom: 18px; }
.cat-products { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; flex: 1; }
.cat-product {
  display: flex; align-items: center; gap: 12px; padding: 11px 14px;
  background: var(--bg-alt); border: 1px solid var(--line); border-radius: var(--radius-inner);
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.cat-product:hover { border-color: var(--accent); background: #fff; }
.cat-product .cp-code { font-weight: 800; font-size: 13.5px; color: #fff; background: var(--primary);
  padding: 3px 10px; border-radius: 6px; letter-spacing: .5px; flex: none; }
.cat-product .cp-name { font-size: 14.5px; color: var(--ink); flex: 1; min-width: 0; }
.cat-product .cp-name small { display: block; color: var(--muted); font-size: 12.5px; }
.cat-product .cp-status { flex: none; font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 999px; }
.cp-status.done { background: #E4F6EE; color: #1E9E5A; }
.cp-status.dev { background: #FFF3E0; color: #D98324; }
.cat-product { flex-wrap: wrap; row-gap: 4px; }
.cat-product .cp-models { flex-basis: 100%; font-size: 12.5px; font-weight: 600; color: var(--primary); letter-spacing: .3px; }
/* ---------- 型号规格：一个品名一段（2026-09-19 由 11 列表格改为竖向卡片） ----------
   原因：11~12 列挤在 1132px 容器里已无余量，品名（HT14B-25AP）与长数值必然折行，
   而"值折行"在规格表里是硬伤。改为每个品名一张卡：品名作标题，其余参数每行
   「参数名 / 值」，参数名 max-content 不折行、值独占剩余宽度，折行问题从根上消失。
   卡片内参数两栏流式排列（flex-wrap），使行数减半、卡不至于过长。 */
.spec-cards { display: grid; gap: 16px; }
.spec-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 17px 22px 14px; box-shadow: var(--shadow-sm);
}
.sc-head { padding-bottom: 11px; margin-bottom: 9px; border-bottom: 1px solid var(--line-soft); }
.sc-name {
  font-size: 17px; font-weight: 800; color: var(--primary);
  letter-spacing: .4px; font-variant-numeric: tabular-nums;
}
/* 2026-09-19 加：工艺标签（仅用于「产品型号规格总表」——总表把 9 个型号混排在一起，
   不标就看不出谁属于 FOG / COG / FOB / FOP / TP。各详情页与分组块整屏只有一种工艺，无需标注。）
   2026-09-19 改：由「品名右侧同行」改为「品名上方独占一行」，落在卡片左上角。
   用 display:block + width:fit-content 让胶囊只占内容宽（不用 inline-block 是因为它无法独占一行，
   跟在后面的 .sc-name 会并到同一行）；这样不必改 .sc-head 的 display，对另外 18 张无标签的卡零影响。 */
.sc-tag {
  display: block; width: fit-content; margin: 0 0 7px;
  padding: 1px 9px; border-radius: 999px;
  font-size: 11px; line-height: 1.4; font-weight: 700; letter-spacing: .8px;
  color: var(--primary); background: var(--primary-50); border: 1px solid var(--primary-100);
}
.sc-list { display: flex; flex-wrap: wrap; gap: 0 30px; }
.sc-row {
  display: grid; grid-template-columns: max-content minmax(0, 1fr);
  gap: 14px; align-items: baseline;
  flex: 1 1 470px; padding: 8px 0;
}
/* min-width 让多数短参数名共用同一栏宽，值起点成列对齐；
   个别超长参数名（最小绝缘间距…）自然占宽，不牵连其它行 */
.sc-k { font-size: 12.5px; color: var(--muted); white-space: nowrap; min-width: 132px; }
/* 2026-09-19 加：键内的补充说明另起一行。原先「最小绝缘间距 (μm) FPC–FPC / FPC–LCD」写成一行，
   这个键实测 224px，远超其它键共用的 132px 列宽，把该行的值一路推到 x=906，
   与其它行的 238 / 796 完全对不齐。拆成两行后键宽约 108px，回落到 min-width 132，
   值列起点与全表一致。 */
.sc-k-sub { display: block; margin-top: 2px; font-size: 11px; color: var(--muted); opacity: .8; }
.sc-v { font-size: 13.5px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }

@media (max-width: 1080px) {
  .spec-card { padding: 15px 18px 12px; }
  .sc-row { flex-basis: 100%; }
}
.cat-card .cat-more { text-align: right; font-size: 14.5px; font-weight: 700; color: var(--primary); }
.cat-card .cat-more:hover { color: var(--accent); }

/* ---------- About ---------- */
.about-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: center; }
.about-grid.reverse { grid-template-columns: 1fr 1.1fr; }
.about-text .lead { font-size: 18px; color: var(--ink); margin-bottom: 16px; }
.about-text p { color: var(--ink-soft); margin-bottom: 14px; }
.about-text strong { color: var(--primary); }
.about-points { margin: 18px 0; }
.about-points li { display: flex; align-items: center; gap: 12px; padding: 7px 0; color: var(--ink-soft); }
.about-points .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); flex: none; }
.addr { margin-top: 10px; padding: 14px 18px; background: var(--bg-alt); border-left: 4px solid var(--accent);
  border-radius: 0 10px 10px 0; color: var(--ink); font-size: 15px; }
.addr .ico { display: inline-flex; vertical-align: -3px; margin-right: 8px; }
.about-text h3 { color: var(--primary); font-size: 19px; margin-bottom: 10px; }

/* ---------- 产品中心：ACF 应用场景图（矢量重绘，用站点字体） ---------- */
.app-map {
  background: var(--primary-50); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 22px 24px; box-shadow: var(--shadow-sm);
  margin-bottom: 46px;
}
.app-map .am-head { margin-bottom: 18px; }
.app-map .am-tag {
  display: inline-block; font-size: 12px; letter-spacing: .18em;
  font-weight: 700; color: var(--accent); margin-bottom: 6px;
}
.app-map .am-title { font-size: 19px; font-weight: 800; color: var(--primary); letter-spacing: -.01em; }
.app-map .am-sub { font-size: 13px; color: var(--ink-soft); margin-top: 5px; line-height: 1.7; }

.am-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: start; }
.am-col {
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-inner); padding: 16px 18px;
  transition: border-color .2s var(--ease);
}
.am-col:hover { border-color: var(--primary-100); }
.am-col-head {
  display: flex; align-items: center; gap: 12px;
  padding-bottom: 12px; margin-bottom: 13px; border-bottom: 1px dashed var(--line);
}
.am-code {
  font-weight: 700; font-size: 13px; letter-spacing: .6px;
  color: #fff; background: var(--primary); padding: 4px 11px; border-radius: 6px; flex: none;
}
.am-col-head strong { display: block; font-size: 14.5px; font-weight: 700; color: var(--primary); line-height: 1.35; }
.am-col-head small { display: block; font-size: 12px; color: var(--muted); line-height: 1.5; }

.am-devices { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.am-devices li {
  display: flex; align-items: center; gap: 8px;
  white-space: nowrap; max-width: 100%;
  background: var(--bg-alt); border: 1px solid var(--line-soft);
  border-radius: 999px; padding: 6px 11px 6px 8px;
  font-size: 13px; font-weight: 600; color: var(--ink);
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.am-devices li > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.am-devices li:hover { border-color: var(--accent); background: #fff; }
.am-devices svg { width: 17px; height: 17px; color: var(--accent); }
.am-devices small { font-weight: 500; color: var(--muted); font-size: 11px; margin-left: 4px; }

@media (max-width: 1180px) {
  .am-grid { grid-template-columns: 1fr 1fr; }
  /* 第三张卡横跨整行，避免右下角空出一格 */
  .am-col:nth-child(3) { grid-column: 1 / -1; }
  .am-col:nth-child(3) .am-devices { flex-direction: row; flex-wrap: wrap; }
}
@media (max-width: 768px) {
  .app-map { padding: 18px; }
  .am-grid { grid-template-columns: 1fr; }
  .am-col:nth-child(3) { grid-column: auto; }
  /* 窄屏英文标签隐藏后胶囊变短，改横排省高度 */
  .am-devices { flex-direction: row; flex-wrap: wrap; }
  .am-devices small { display: none; }
}


/* ---------- Stats ---------- */
.stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; margin-top: 56px;
  background: linear-gradient(135deg, var(--primary), var(--primary-d)); border-radius: var(--radius);
  padding: 34px 24px; box-shadow: var(--shadow); }
.stat { text-align: center; color: #fff; padding: 6px 8px; position: relative; }
.stat:not(:last-child)::after { content: ""; position: absolute; right: -9px; top: 14%; height: 72%;
  width: 1px; background: rgba(255,255,255,.18); }
.stat-num { font-size: clamp(26px, 3.4vw, 38px); font-weight: 800; color: #fff; }
.stat-num span { font-size: 16px; font-weight: 600; margin-left: 2px; color: var(--amber); }
.stat-label { font-size: 13px; color: rgba(255,255,255,.82); margin-top: 6px; letter-spacing: .5px; }

/* ---------- Card grids ---------- */
.card-grid { display: grid; gap: 22px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.feature-card { background: var(--card); border-radius: var(--radius); padding: 30px 28px; box-shadow: var(--shadow-sm);
  border: 1px solid var(--line); transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.feature-card:hover { transform: translateY(-4px) !important; box-shadow: var(--shadow-hover); }
.feature-ico { width: 54px; height: 54px; border-radius: var(--radius-inner); background: var(--primary-50); display: grid; place-items: center;
  margin-bottom: 16px; }
.feature-card h4 { color: var(--primary); font-size: 18px; margin-bottom: 8px; }
.feature-card p { color: var(--ink-soft); font-size: 15px; }

.mini-card { background: var(--bg-alt); border-radius: var(--radius-inner); padding: 18px; text-align: center; color: var(--ink-soft); font-size: 15px; border: 1px solid var(--line); }

/* ---------- Honors ---------- */
.honor-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.honor { display: flex; gap: 14px; align-items: flex-start; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow-sm); }
.honor-ico { flex: none; display: flex; }
.honor strong { color: var(--primary); font-size: 15px; }
.honor span { color: var(--muted); font-size: 13px; }

/* ---------- Timeline ----------
   2026-09-22 重做（峰哥：「线条字都挤在一起」）—— 按 PPT 第 07 页比例重排版。
   病因（改前实测 1440 视口）：年份右缘 376 → 竖轴左缘 380 只剩 4px；
   圆点边框盒 [383,405] 中心 394，而竖轴中心 381.5 → 圆点偏心 12.5px，
   且圆点右缘 405 已压进卡片左缘 404（重叠 1px）。
   参照基准（PPT 07）：年份右缘→脊线 27.6px、脊线→正文 38px、圆点精确压在脊线上。
   改后（含同年「换等宽数字字体」定稿）：竖轴 x[384.5,387.5] 中心 386；
        圆点边框盒 x[375,397] 中心 386（重合）；年份右缘→圆点左缘 26.9px；
        圆点右缘→卡片左缘 27px；卡片列 [424,1150] w=726。
   ⚠️ 年份列宽 58px 是「按墨迹宽度定的」：年份墨迹 58.14px，(58-58.14)/2 ≈ 0（墨迹正好填满轨道），
      再大就会让「年份→圆点」间隙大于「圆点→卡片」间隙（对称性靠 A/2 ≈ 墨迹半宽 保证）。 */
.timeline { position: relative; max-width: 860px; margin: 0 auto; }
.timeline::before { content: ""; position: absolute; left: 94.5px; top: 6px; bottom: 6px; width: 3px;
  background: linear-gradient(180deg, var(--accent), var(--primary)); border-radius: 3px; }
.tl-item { position: relative; display: grid; grid-template-columns: 58px 1fr; column-gap: 76px; padding: 0 0 34px; }
/* 年份数字改用「等宽数字」字体（峰哥 2026-09-22 定：换字体）——
   PingFang SC 的数字是比例宽度：1 比 0 窄 → 2020..2029 = 52.81px 而 2021 = 48.63px（差 4.18px），
   右对齐时肉眼会读成「2021 换了字体」。系统字体（macOS = SF Pro / Windows = Segoe UI）支持 tnum，
   实测四串全等 58.14px、极差 0.00px。⚠️ 只作用于年份列，正文数字仍走全站 --ff，不动。 */
.tl-year { position: relative; font-size: 22px; font-weight: 800; color: var(--primary);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  text-align: center; white-space: nowrap; padding-top: 2px; font-variant-numeric: tabular-nums; }
.tl-item::before { content: ""; position: absolute; left: 85px; top: 8px; width: 14px; height: 14px; border-radius: 50%;
  background: #fff; border: 4px solid var(--accent); z-index: 2; }
.tl-body { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 22px; box-shadow: var(--shadow-sm); }
.tl-body h4 { color: var(--primary); font-size: 17px; margin-bottom: 6px; }
.tl-body p { color: var(--ink-soft); font-size: 15px; }

/* ---------- 产品中心：大类分组 + 手风琴 ---------- */
.cat-section { margin-bottom: 46px; }
.cat-section-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 18px;
  padding-bottom: 12px; border-bottom: 2px solid var(--line); }
.cat-section-head h3 { font-size: 22px; color: var(--primary); }
.cat-section-head .cat-en { font-size: 12.5px; letter-spacing: 2px; color: var(--accent); font-weight: 700; }
.cat-section-head .cat-count { margin-left: auto; font-size: 13px; color: var(--muted); }
.cat-section-head .cat-desc { width: 100%; color: var(--ink-soft); font-size: 14.5px; margin-top: 2px; }

.acc { display: flex; flex-direction: column; gap: 12px; }
.acc-item { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow-sm); transition: border-color .2s var(--ease); }
.acc-item.open { border-color: var(--accent); }
.acc-head {
  width: 100%; display: grid; grid-template-columns: auto auto 1fr auto auto; align-items: center;
  gap: 14px; padding: 16px 18px; background: transparent; border: none; cursor: pointer;
  font-family: inherit; text-align: left;
}
.acc-head:hover { background: var(--bg-alt); }
.acc-code { font-weight: 800; font-size: 14px; color: #fff; background: var(--primary);
  padding: 5px 12px; border-radius: 6px; letter-spacing: .5px; }
.acc-name { font-weight: 700; color: var(--ink); font-size: 15.5px; white-space: nowrap; }
.acc-conn { color: var(--ink-soft); font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc-status { flex: none; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; }
.acc-chevron { flex: none; color: var(--accent); font-size: 14px; transition: transform .25s; line-height: 1; }
.acc-item.open .acc-chevron { transform: rotate(180deg); }

/* 展开方式由 max-height 魔法数字改为 grid-template-rows 0fr→1fr：
   规格改成品名卡后展开内容可达 1900px，固定 1400px 会把末尾两张卡裁掉。 */
.acc-body { display: grid; grid-template-rows: 0fr; overflow: hidden; opacity: 0;
  transition: grid-template-rows .4s var(--ease), opacity .32s var(--ease); }
.acc-item.open .acc-body { grid-template-rows: 1fr; opacity: 1; }
.acc-body-inner { min-height: 0; padding: 6px 18px 20px; border-top: 1px dashed var(--line); }
.acc-cols { display: grid; grid-template-columns: 1fr 1.35fr; gap: 22px; padding-top: 14px; }
.acc-col h5 { font-size: 14px; color: var(--primary); margin-bottom: 8px; letter-spacing: .5px; }
.acc-col p { font-size: 14.5px; color: var(--ink-soft); margin-bottom: 8px; }
.acc-col ul li { position: relative; padding-left: 18px; margin-bottom: 7px; color: var(--ink-soft); font-size: 14px; }
.acc-col ul li::before { content: "▹"; position: absolute; left: 0; color: var(--accent); font-weight: 700; }
.acc-detail-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px;
  font-size: 14.5px; font-weight: 700; color: var(--primary); padding: 9px 18px;
  border: 1.5px solid var(--primary); border-radius: 999px; transition: all .2s; }
.acc-detail-link:hover { background: var(--primary); color: #fff; }

/* ---------- Spec table ---------- */
.spec-table-wrap { overflow-x: auto; border-radius: var(--radius); box-shadow: var(--shadow-sm); border: 1px solid var(--line); }
.spec-table { width: 100%; border-collapse: collapse; background: #fff; min-width: 520px; }
.spec-table th, .spec-table td { padding: 15px 20px; text-align: left; border-bottom: 1px solid var(--line); font-size: 15px; }
.spec-table thead th { background: var(--primary); color: #fff; font-weight: 600; }
.spec-table tbody tr:nth-child(even) { background: var(--bg-alt); }
.spec-table tbody tr { transition: background .2s var(--ease); }
.spec-table tbody tr:hover { background: var(--primary-50); }
.spec-table td:first-child { font-weight: 600; color: var(--primary); }

/* ---------- 产品详情页 ---------- */
.pd-hero { display: grid; grid-template-columns: auto 1fr; gap: 28px; align-items: center;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 30px 32px; box-shadow: var(--shadow-sm); }
.pd-code { display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--primary), var(--primary-2)); color: #fff;
  border-radius: var(--radius); padding: 22px 26px; min-width: 170px; }
.pd-code .code { font-size: 38px; font-weight: 800; letter-spacing: 2px; line-height: 1.1; }
.pd-code .en { font-size: 12.5px; letter-spacing: 1.5px; color: rgba(255,255,255,.85); margin-top: 4px; }
.pd-info h2 { color: var(--primary); font-size: 22px; margin-bottom: 6px; }
.pd-info .pd-conn { font-size: 16.5px; color: var(--ink); margin-bottom: 8px; }
.pd-info .pd-dev { font-size: 14px; color: var(--muted); }
.pd-status { display: inline-block; font-size: 12.5px; font-weight: 700; padding: 4px 12px; border-radius: 999px; margin-left: 8px; vertical-align: 3px; }
.pd-status.done { background: #E4F6EE; color: #1E9E5A; }
.pd-status.dev { background: #FFF3E0; color: #D98324; }

.pd-section { margin-top: 44px; }
.pd-section > h3 { font-size: 21px; color: var(--primary); margin-bottom: 16px; padding-left: 14px; border-left: 4px solid var(--accent); }
/* 2026-09-19 加：详情页型号卡组上方的小节标题。原先写成 <p class="mt" style="font-weight:700;">，
   落在 .pd-section p 里渲染成灰色粗体 15.5px，跟紧挨着的蓝色 h3 小节标题完全不是一个调性；
   现在改用 h5 并套用与产品中心 .acc-col h5 相同的配方（14px / primary / 字距 .5px）。 */
.pd-section > h5 { font-size: 14px; color: var(--primary); letter-spacing: .5px; margin: 26px 0 10px; }
.pd-section p { color: var(--ink-soft); font-size: 15.5px; }
.pd-nav { display: flex; justify-content: space-between; gap: 14px; margin-top: 52px; flex-wrap: wrap; }
.pd-nav a { flex: 1; min-width: 220px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px 20px; box-shadow: var(--shadow-sm); transition: border-color .2s var(--ease), transform .2s var(--ease); }
.pd-nav a:hover { border-color: var(--accent); transform: translateY(-3px) !important; }
.pd-nav a small { display: block; font-size: 12.5px; color: var(--muted); margin-bottom: 4px; }
.pd-nav a strong { color: var(--primary); font-size: 15.5px; }
.pd-nav .next { text-align: right; }

/* ---------- Tech ---------- */
.tech-gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 40px; }
.tech-gallery img { width: 100%; height: 180px; object-fit: cover; border-radius: var(--radius-inner); box-shadow: var(--shadow-sm); border: 1px solid var(--line); }

/* ---------- Process flow ---------- */
.process-flow { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; }
.pf-step { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 26px; text-align: center;
  box-shadow: var(--shadow-sm); min-width: 120px; position: relative; }
.pf-step:hover { border-color: var(--accent); }
.pf-idx { display: block; font-size: 13px; font-weight: 700; color: var(--amber); margin-bottom: 6px; }
.pf-step h4 { color: var(--primary); font-size: 18px; }
.pf-arrow { font-size: 20px; color: var(--accent); font-weight: 700; }

/* ---------- Policy ---------- */
.policy-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow-sm); }
.policy-card h4 { color: var(--primary); font-size: 18px; margin-bottom: 14px; }
.policy-card ul li { position: relative; padding-left: 20px; margin-bottom: 10px; color: var(--ink-soft); }
.policy-card ul li::before { content: "✓"; position: absolute; left: 0; color: var(--accent); font-weight: 700; }

/* ---------- News ---------- */
.news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.news-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 30px; box-shadow: var(--shadow-sm); transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.news-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
.news-date { display: inline-block; background: var(--bg-alt); color: var(--primary); font-weight: 700; font-size: 14px;
  padding: 4px 12px; border-radius: 999px; margin-bottom: 14px; }
.news-card h4 { color: var(--ink); font-size: 17px; margin-bottom: 8px; line-height: 1.5; }
.news-card p { color: var(--ink-soft); font-size: 14px; }

/* ---------- Logo wall ---------- */
.logo-wall { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.logo-wall img { width: 100%; height: 76px; object-fit: contain; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-inner); padding: 10px; box-shadow: var(--shadow-sm); }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 40px; }
.contact-info { display: flex; flex-direction: column; gap: 18px; }
.ci-item { display: flex; gap: 16px; align-items: flex-start; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--shadow-sm); }
.ci-ico { flex: none; display: flex; }
.ci-item strong { color: var(--primary); font-size: 15px; display: block; margin-bottom: 4px; }
.ci-item p { color: var(--ink-soft); font-size: 15px; }
.ci-item a:hover { color: var(--accent); }

.contact-form { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 30px; box-shadow: var(--shadow-sm); }
.field { margin-bottom: 16px; }
.field label { display: block; font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 7px; }
.field input, .field textarea { width: 100%; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: var(--radius-inner); font-size: 15px;
  font-family: inherit; color: var(--ink); transition: border-color .2s, box-shadow .2s; background: #fff; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(46,93,184,.12); }
.field textarea { resize: vertical; }
.form-note { font-size: 12px; color: var(--muted); margin-top: 10px; }

/* 蜜罐字段（见 main.js 的表单提交）：视觉与读屏都不可见。
   ⚠️ 不用 display:none —— 部分机器人会跳过不渲染的字段；「移出视口 + 零尺寸」
      更难被识别，且不占布局。tabindex:-1 + aria-hidden 保证真人键盘/读屏碰不到。 */
.hp-field { position: absolute; left: -9999px; top: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* 提交结果提示（2026-09-23 接表单后台时新增）。
   颜色**只用色池 token**：ok 用品牌蓝、warn 用深蓝 ——
   ⚠️ 红 `#E50012` 是点缀色，纪律是「只做点与短条末段、不做文字色」，
      所以这里红只出现在 ::before 那个 7×7 圆点上。 */
.form-status { display: none; align-items: flex-start; gap: 8px; margin-top: 12px;
  font-size: 13.5px; font-weight: 600; line-height: 1.5; }
.form-status.ok, .form-status.warn, .form-status.busy { display: flex; }
.form-status.ok { color: var(--primary); }
.form-status.warn { color: var(--primary-d); }
.form-status.busy { color: var(--muted); font-weight: 500; }
.form-status::before { content: ''; flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; margin-top: 6px; }
.form-status.ok::before { background: var(--accent); }
.form-status.warn::before { background: var(--logo-red); }
.form-status.busy::before { background: var(--line); }

/* 提交中禁用按钮：光标换成 progress，别让访客以为卡死了 */
.contact-form button[type="submit"][disabled] { opacity: .62; cursor: progress; }

.map-placeholder { margin-top: 36px; background: var(--bg-alt); border: 2px dashed var(--line); border-radius: var(--radius); padding: 34px; text-align: center; color: var(--ink); }
.map-placeholder span { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 600; color: var(--primary); }
.map-placeholder p { margin-top: 8px; }

/* ---------- Footer ---------- */
.site-footer { background: var(--primary-d); color: rgba(255,255,255,.85); padding-top: 56px; }
.footer-inner { display: flex; justify-content: space-between; gap: 30px; flex-wrap: wrap; padding-bottom: 36px; }
.footer-brand { display: flex; gap: 16px; align-items: center; }
/* 2026-09-22 改：去白底容器。页脚底色是 --primary-d(#0A214D) 深蓝，
   故 logo 改用 assets/images/logo-white.svg 反白版，无需再靠白底衬托。 */
.footer-logo-chip { display: flex; align-items: center; flex: none; }
.footer-logo-chip img { height: 40px; width: auto; }
.footer-brand strong { display: block; color: #fff; font-size: 16px; }
.footer-brand p { font-size: 13px; color: rgba(255,255,255,.7); }
.footer-nav { display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center; }
.footer-nav a { color: rgba(255,255,255,.8); font-size: 15px; transition: color .2s; }
.footer-nav a:hover { color: var(--amber); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.12); padding: 18px 0; font-size: 13px; }
.footer-bottom .container { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; color: rgba(255,255,255,.6); }
/* ⚠️ 返回顶部按钮是 `position:fixed`，悬在视口右下角（`right:24px` + 46px 宽 → 占住右侧 70px）。
   当 `.container` 贴到视口边缘时（`max-width` 居中失效，即视口 ≲1292px），
   页脚底部内容会延伸进这块区域被按钮压住 —— 实测 768 与 390 档的重叠均为 **46×20px**（按钮整宽压住文字尾部）。
   故给内容让出右侧安全区：78px = 原 24px 内边距 + 46px 按钮 + 8px 间隙。
   ⚠️ 阈值 1300px 是从「`.container` 右边界 vs 按钮左边界」算出来的（临界约 1292px），别凭感觉改小。 */
@media (max-width: 1300px) {
  .footer-bottom .container { padding-right: 78px; }
}

/* 微信公众号入口（footer · 2026-09-23）
   静区从哪来？**由二维码图自身提供**（2026-09-23 调整：去掉白色圆角卡片）。
   图四周已留 4.5 模块白边，实测可扫，不再额外叠一层白卡。
   ⚠️ 铁律不变：**二维码必须坐在浅色静区上** —— ISO/IEC 18004 要求四周 ≥4 模块，
      且静区需与码的浅色模块同色。静区若与深蓝底同色，扫描器会把底色当成暗模块 → 定位失败。
   ⚠️ **日后换二维码图，新图必须自带 ≥4 模块白色静区**；若换成无静区的裸码，白卡必须加回来。 */
/* ⚠️ `margin-left: auto` 是有意的：三块（品牌/导航/二维码）横向放不下时会换行，
   靠右能让它与自己那行的右边缘对齐，读起来是「第二行的右侧元素」而不是「排歪了」。 */
.footer-qr { display: flex; align-items: center; gap: 12px; flex: none; margin-left: auto; }
.footer-qr-frame { display: flex; flex: none; line-height: 0; }
.footer-qr-frame img { width: 84px; height: 84px; display: block; }
.footer-qr-text strong { display: block; color: #fff; font-size: 15px; margin-bottom: 6px; }
.footer-qr-text p { font-size: 13px; color: rgba(255,255,255,.7); line-height: 1.6; }
/* ⚠️「微信扫一扫」只对鼠标设备成立；触屏设备该改成「长按识别」——
   与探索区同一套降级口径（`(hover: none)` 优先，再兜 768px）。 */
.footer-qr-text .qr-tip-m { display: none; }
@media (hover: none), (max-width: 768px) {
  .footer-qr-text .qr-tip-pc { display: none; }
  .footer-qr-text .qr-tip-m { display: block; }
}
/* ⚠️ 窄屏**必须**取消 `margin-left: auto`：它把块推到右边界，一旦块宽超出容器，
   右侧就直接溢出视口（实测 390px 下「微信公众号」被切掉一半、整页被撑出横向滚动）。
   窄屏改为自然左对齐、随 flex-wrap 堆叠。 */
@media (max-width: 768px) {
  .footer-qr { margin-left: 0; }
  /* ⚠️ 2026-09-23 记录（**未修，属既有问题**）：390px 下 `.footer-nav` 的 6 个链接
     wrap 后最宽一行约 403px，比视口宽约 13px，导致「加入我们」右边缘被切。
     成因是链接间距（`gap: 8px 22px`）+ 15px 字号的渲染宽度，与 footer 新增的公众号入口无关。
     试过给 `.footer-brand` 加 `flex-wrap: wrap` —— **实测零视觉变化**，说明品牌区不是元凶，已回退。 */
}

/* ---------- Back to top ---------- */
/* 2026-09-23 改造（峰哥口述「底色太深，把底色改成透明的」）：
   原为**实心品牌蓝圆底 + 白色箭头**，46px 的实心色块压在右下角太重，
   和它正在变轻的 hero 按钮（.btn-outline + .btn-lead）不是一套语言。
   现改为**透明底 + 品牌蓝描边 + 品牌蓝箭头** —— 与 .btn-outline 完全同构。
   ⚠️ 底色一透明，原来那支白箭头就看不见了 → **箭头颜色必须同时改成 --primary**，
      这两件事是一次改动，只改背景不改图标 = 按钮直接隐形。
   ⚠️ 原来的 `box-shadow: var(--shadow)` 也一起去掉 —— 透明底再带投影，
      会在浅色区块上糊出一圈灰边，比原来更脏。
   ⚠️ 压到深蓝底（.page-hero / .stats / .site-footer）上会与底同色 → 由 `.on-dark` 转白，
      见下方「深底反白」一节。 */
.back-top { position: fixed; right: 24px; bottom: 24px; width: 46px; height: 46px; border-radius: 50%;
  background: transparent; border: 1.5px solid var(--primary); color: var(--primary);
  display: grid; place-items: center; font-size: 20px; font-weight: 700;
  opacity: 0; visibility: hidden; transform: translateY(12px); transition: .3s; z-index: 900; }
.back-top.show { opacity: 1; visibility: visible; transform: translateY(0); }
.back-top:hover { background: var(--primary); color: #fff; }

/* ---------- 深底反白（两个浮动元素共用） ---------- */
/* 2026-09-23 新增（峰哥口述「向下的 V 在碰到深蓝底色的时候要反白，不然看不到了」）：
   .back-top 与 .scroll-cue 都是 position:fixed，会随滚动经过各种底色，
   而两者本体都是**品牌蓝** —— 滚到同为深蓝的区块上就糊成一片、等于消失。
   实测：箭头静息色 .30 品牌蓝压在 .site-footer 的 #0A214D 上，合成灰度 39.2 vs 底 33，
   **灰度差只有 6.2**（可辨阈值 12）→ 确实看不见，不是错觉。
   转白后：白 .60 压在 #0A214D 上合成灰度约 165，灰度差 **132** → 清楚但仍是「提示」的量级。

   判断逻辑在 main.js 的 DARK_ZONES：滚动时看「采样点落没落在深底区块的矩形内」，落了就加 .on-dark。
   ⚠️ **不用 elementFromPoint** —— 深底多为 `background-image` 渐变（.stats 就是），
      computed 的 `backgroundColor` 仍是 transparent，按元素取色判断不出来；
      而按区块矩形判断与渐变细节无关，稳定得多。
   ⚠️ **新增深底区块时，必须把选择器补进 main.js 的 DARK_ZONES**，否则那块上的箭头/按钮会重新消失。 */
.back-top.on-dark { color: #fff; border-color: rgba(255,255,255,.62); }
.back-top.on-dark:hover { background: #fff; color: var(--primary); border-color: #fff; }
.scroll-cue.on-dark { color: rgba(255,255,255,.60); }
.scroll-cue.on-dark:hover { color: #fff; }

/* ---------- Reveal / 滚动揭示动画（增强：多方向 + 级联延迟） ----------
   方向变体：reveal-up(默认,上移) / reveal-left(左移) / reveal-right(右移) /
            reveal-scale(缩放) / reveal-rise(大幅上移,用于 Hero / 大块)。
   级联：给容器加 .reveal-group，JS 会给内部同辈子元素按序设置 --rd 延迟，依次入场。
   无 JS 兜底：main.js 会给 <html> 加 .js；若脚本未加载，[class*="reveal"] 直接可见，绝不空白。 */
html:not(.js) [class*="reveal"] { opacity: 1 !important; transform: none !important; }

.reveal,
.reveal-up {
  opacity: 0; transform: translateY(42px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
  transition-delay: var(--rd, 0s);
}
.reveal-left {
  opacity: 0; transform: translateX(-64px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
  transition-delay: var(--rd, 0s);
}
.reveal-right {
  opacity: 0; transform: translateX(64px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
  transition-delay: var(--rd, 0s);
}
.reveal-scale {
  opacity: 0; transform: scale(.92);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
  transition-delay: var(--rd, 0s);
}
.reveal-rise {
  opacity: 0; transform: translateY(72px);
  transition: opacity 1s var(--ease), transform 1s var(--ease);
  transition-delay: var(--rd, 0s);
}
.reveal.in,
.reveal-up.in,
.reveal-left.in,
.reveal-right.in,
.reveal-scale.in,
.reveal-rise.in { opacity: 1; transform: none; }

/* 移动端：左 / 右移改为上移，避免横向溢出产生滚动条 */
@media (max-width: 768px) {
  .reveal-left, .reveal-right { transform: translateY(28px); }
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1080px) {
  .main-nav a { padding: 8px 9px; font-size: 14px; }
}

@media (max-width: 992px) {
  .main-nav { display: none; }
  .header-cta { display: none; }
  .menu-toggle { display: flex; }
  .about-grid, .about-grid.reverse { grid-template-columns: 1fr; gap: 30px; }
  .cat-grid { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .honor-list { grid-template-columns: repeat(2, 1fr); }
  .tech-gallery { grid-template-columns: repeat(2, 1fr); }
  .news-grid { grid-template-columns: repeat(2, 1fr); }
  .logo-wall { grid-template-columns: repeat(4, 1fr); }
  .stats { grid-template-columns: repeat(3, 1fr); }
  .stat:nth-child(3)::after { display: none; }
  .acc-cols { grid-template-columns: 1fr; }
  .acc-conn { display: none; }
  .acc-head { grid-template-columns: auto auto 1fr auto; }
}

@media (max-width: 768px) {
  :root { --header-h: 64px; }
  .section { padding: 72px 0; }
  .section-tight { padding: 56px 0; }
  .section-head { margin-bottom: 36px; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .news-grid { grid-template-columns: 1fr; }
  .honor-list { grid-template-columns: 1fr; }
  .tech-gallery { grid-template-columns: 1fr 1fr; }
  .logo-wall { grid-template-columns: repeat(3, 1fr); }
  .stats { grid-template-columns: repeat(2, 1fr); gap: 14px; padding: 24px 16px; }
  .stat::after { display: none !important; }
  .contact-grid { grid-template-columns: 1fr; gap: 26px; }
  .process-flow { gap: 10px; }
  .pf-step { min-width: 90px; padding: 14px 16px; }
  /* 时间轴 · 手机端（2026-09-22 修）
     ⚠️ 旧值 64 / 59 / 56·gap:18 是「桌面重排前」的遗留 —— 从没跟着更新，
        因此原样继承了桌面那个「圆点偏心」bug（实测 390px 视口：圆点中心 88.0 vs 竖轴中心 83.5，偏 4.5px；
        且圆点右缘 99 压进卡片左缘 92，重叠 7px）。
     手机年份字号 18px → system-ui 墨迹实测 47.50px，故列宽 A=48（判据同桌面：A ≈ 墨迹宽 才左右对称）。
     ⚠️ 三个值必须成组推导，别单独改其中任何一个：
        S(竖轴) = (1.5A + G + W/2 − 3) / 2    D(圆点) = S − 9.5
        A=48 / G=62 / W=47.5 → S = 77.25 / D = 67.75
     落点：圆点中心 96.75 = 竖轴中心 96.75；年份侧间距 20.0 / 卡片侧 20.25；
           卡片列 354 − 110 = 244px（390px 视口）。
     ⚠️ 必须写 column-gap，不能写 gap 简写 —— 旧写法 `gap:18px` 会连带把桌面的 column-gap:76px 一起覆盖掉。 */
  .timeline::before { left: 77.25px; }
  .tl-item { grid-template-columns: 48px 1fr; column-gap: 62px; }
  .tl-item::before { left: 67.75px; }
  .tl-year { font-size: 18px; }
  .hero-sub br { display: none; }
  .pd-hero { grid-template-columns: 1fr; text-align: center; }
  .pd-code { margin: 0 auto; }
  .acc-name { white-space: normal; }
}

@media (max-width: 480px) {
  .logo-wall { grid-template-columns: repeat(2, 1fr); }
  .tech-gallery { grid-template-columns: 1fr; }
  .container { padding: 0 18px; }
  .hero-content { padding: 56px 18px 56px; }
  .hero-logo-chip img { height: 42px; }
  .brand-logo { height: 38px; }
  .acc-code { font-size: 13px; padding: 4px 9px; }
}

/* ============================================================
   2026-09-20 新增：页脚浏览量计数（刻意低调，不抢眼）
   ------------------------------------------------------------
   - 默认 display:none —— 只有拿到真实数字后才由 main.js 加上 .on 显示。
     接口不可用时整块不出现，绝不在页脚留一个孤零零的「—」。
   - 颜色比同一行的备案号淡一档（.42 vs .6），字号 11px，靠右。
     意图是「存在但不打扰」；想看时鼠标移上去会提亮到 .74。
   ============================================================ */
.visit-counter {
  display: none;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  letter-spacing: .04em;
  color: rgba(255, 255, 255, .42);
  cursor: default;
  transition: color .25s var(--ease);
}
.visit-counter.on { display: inline-flex; }
.visit-counter:hover { color: rgba(255, 255, 255, .74); }
.visit-counter .vc-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: currentColor;
  opacity: .85;
  flex: none;
}
.visit-counter .vc-num {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  font-weight: 700;
}

/* ============================================================
   2026-09-20 新增：招聘页（careers.html）
   ============================================================ */
.job-list { display: grid; gap: 18px; }

.job-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 28px;
  box-shadow: var(--shadow-sm);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.job-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-hover);
  border-color: var(--primary-100);
}
.job-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.job-title { font-size: 18px; color: var(--primary); margin: 0 0 6px; }
.job-meta { font-size: 13px; color: var(--muted); margin: 0; }
.job-tag {
  flex: none;
  padding: 3px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--primary);
  background: var(--primary-50);
  border: 1px solid var(--primary-100);
}
.job-body {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 34px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px dashed var(--line);
}
.job-col > h5 { font-size: 13px; color: var(--primary); letter-spacing: .5px; margin: 0 0 8px; }
.job-col ul { margin: 0; padding: 0; list-style: none; }
.job-col ul li {
  position: relative;
  padding-left: 16px;
  font-size: 14px;
  line-height: 1.9;
  color: var(--ink-soft);
}
.job-col ul li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .82em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  opacity: .7;
}

/* 暂无岗位时的占位块 */
.job-empty {
  background: var(--bg-alt);
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  padding: 30px 28px;
  text-align: center;
  /* 与左侧 .contact-info 等高（grid 默认 stretch）。内容少时贴顶会显得空 ——
     careers 的「简历投递方式」删掉长说明后只剩一行，所以让内容垂直居中。
     （2026-09-23；对「暂无在招岗位」那块无影响，它本来就没有固定高度。） */
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.job-empty-title { font-size: 16px; font-weight: 700; color: var(--primary); margin: 0 0 10px; }
.job-empty .muted { font-size: 14px; line-height: 1.9; margin: 0 auto; max-width: 640px; }

/* 简历投递卡片（careers 右栏 · 2026-09-23）
   ⚠️ 原来这里直接复用 .job-empty —— 那是「暂无在招岗位」的**空状态**样式
      （虚线框 + --bg-alt 底 + 文字居中）。拿它装真实内容，读出来就是「占位符」：
      一虚一实、一居中一左对齐，与左栏四张实底 .ci-item 并排时落差极明显。
   改法：独立成 .apply-card，换成与 .ci-item 同一套卡片底盘（实底 + 实线 + 同圆角/阴影），
      文字轴与左栏对齐。
   ⚠️ **align-self:start 是有意的**：这张卡内容少，若被 grid 拉成与左栏等高，
      就会变成「一个高盒子中间浮着三行字」—— 那正是原来显得空的原因。
      内容少就让卡片收到内容高度，留白留在卡片**外面**（读作版面留白），
      而不是卡片**里面**（读作没做完）。 */
.apply-card {
  align-self: start;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.apply-head { display: flex; gap: 16px; align-items: flex-start; }
.apply-head strong { color: var(--primary); font-size: 15px; display: block; margin-bottom: 6px; }
.apply-head p { color: var(--ink-soft); font-size: 15px; line-height: 1.8; }

/* 投递邮箱 —— 整卡唯一的动作，故给足对比：品牌蓝淡底 + 描边 + 17px 粗体地址。
   hover 上浮 2px：与全站按钮/chips 同一套语言（见文件开头按钮一节），不新造例外。 */
.apply-mail {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 18px;
  background: var(--primary-50);
  border: 1.5px solid var(--primary-100);
  border-radius: var(--radius-inner);
  transition: transform .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease);
}
.apply-mail-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
/* ⚠️ 标签色不能用 --muted：#7A8794 压在 --primary-50 上实测只有 3.27:1，
   12px 文字达不到 WCAG AA 的 4.5:1。--ink-soft 是 7.37:1。 */
.apply-mail-label { font-size: 12px; color: var(--ink-soft); letter-spacing: .04em; }
.apply-mail-addr { font-size: 17px; font-weight: 700; color: var(--primary); }
.apply-mail-go { flex: none; display: flex; color: var(--primary); transition: transform .25s var(--ease); }
.apply-mail-go svg { width: 18px; height: 18px; }
.apply-mail:hover { transform: translateY(-2px); background: #fff; border-color: var(--primary); }
/* ⚠️ hover **不要**把地址改成 --accent：青 #0FA3A3 在白底上只有 3.09:1，
   17px 粗体仍属「非大号文字」，同样不达 AA。
   这一行的反馈走按钮那套（底色 + 描边 + 上浮 2px + 箭头右移 2px），不动文字色。 */
.apply-mail:hover .apply-mail-go { transform: translateX(2px); }
/* 全站没有统一的 focus-visible 规则，这里补一条（只作用这一个元素，不影响别处） */
.apply-mail:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }

/* 招聘流程序号 */
.flow-idx {
  font-family: var(--mono);
  font-size: 20px;
  font-weight: 800;
  color: var(--primary-100);
  letter-spacing: .06em;
  margin-bottom: 10px;
}

@media (max-width: 768px) {
  .job-body { grid-template-columns: 1fr; gap: 18px; }
  .job-card { padding: 22px 20px; }
  .job-empty { padding: 26px 20px; }
}

@media (max-width: 480px) {
  .visit-counter .vc-label { display: none; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  [class*="reveal"] { opacity: 1 !important; transform: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
  .scroll-cue { animation: none; }
  .acc-body { transition: none; }
  /* 探索区 chips 的展开/收起也是动效 → 一并去掉，直接切显隐。
     ⚠️ 必须把三个选择器都列全：展开态那条是 (0,3,0)，
        只写 `.hero-chips`（0,1,0）或 `.hero-explore .hero-chips`（0,2,0）都会被它压过去，
        等于「减动效」在展开方向上失效。这里靠**同特异性 + 更靠后**取胜。 */
  .hero-chips,
  .hero-explore .hero-chips,
  .hero-explore:hover .hero-chips,
  .hero-explore:focus-within .hero-chips { transition: none; }
}