/* ============================================================
   生产组门户 首页二期（2026-09-13）
   首屏：左标题介绍 + 登录按钮，右五大类卡片错落叠放；
   滚动驱动（CSS animation-timeline: view()）双向展开/收回；
   只动 transform / opacity，走合成层；不支持或 reduced-motion
   时坍缩为静态流式版式（html.hp2-static）。
   品牌 VI 沿用一期：墨绿 #076646 / 象牙白 / 琥珀点缀。
   圆角体系（成文规则）：卡片 20px / 按钮与操作件 12-14px / 胶囊标签 pill。
   ============================================================ */

:root {
  --hp2-ink: #1A1617;
  --hp2-ink-2: #55504C;
  --hp2-ink-3: #6E6965;   /* 正文级灰字，对 ivory 底 ≥4.5:1（WCAG AA） */
  --hp2-line: rgba(26, 22, 23, 0.10);
  --hp2-green: #076646;
  --hp2-green-deep: #06503A;
  --hp2-green-mid: #0A7A54;
  --hp2-green-bright: #23A877;
  --hp2-mint: #BFE8D6;
  --hp2-tint: #E8F5EF;
  --hp2-amber: #C9973B;
  --hp2-bg: #F6F5F0;
  --hp2-card: #FFFDF9;
  --hp2-radius: 20px;
  --hp2-macro: "Archivo", "Helvetica Neue", "Microsoft YaHei", sans-serif;
  --hp2-mono: "JetBrains Mono", "IBM Plex Mono", "Space Mono", monospace;
  --hp2-body: "Inter", "Microsoft YaHei", -apple-system, sans-serif;
  --hp2-nav-h: 56px;
  --hp2-shadow: 0 18px 44px rgba(6, 80, 58, 0.14), 0 2px 6px rgba(26, 22, 23, 0.06);
  --hp2-shadow-lift: 0 26px 60px rgba(6, 80, 58, 0.20), 0 4px 10px rgba(26, 22, 23, 0.08);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body.hp2-body {
  background: var(--hp2-bg);
  color: var(--hp2-ink);
  font-family: var(--hp2-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--hp2-green); outline-offset: 2px; border-radius: 4px; }

/* ---------- 薄导航 ---------- */
.hp2-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  height: var(--hp2-nav-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 clamp(16px, 4vw, 44px);
  background: rgba(246, 245, 240, 0.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--hp2-line);
}
.hp2-brand { display: flex; align-items: center; gap: 10px; }
.hp2-brand img { height: 28px; width: auto; }
.hp2-brand b { font-family: var(--hp2-macro); font-weight: 800; font-size: 15px; color: var(--hp2-green); letter-spacing: -0.01em; }
.hp2-brand span { font-family: var(--hp2-mono); font-size: 9px; letter-spacing: 0.14em; color: var(--hp2-ink-3); display: block; }
.hp2-nav-right { display: flex; align-items: center; gap: 18px; }
/* 四期 A 修复（2026-09-13，老大：右上角登录按钮字看不清）：
   原 .hp2-nav-right a（0,1,1）压过 .hp2-btn 白字（0,1,0），登录按钮变深绿底深灰字。
   现文字链规则只作用于非按钮链接；按钮恒定白字（#fff on #076646 ≈ 8.4:1，WCAG AA/AAA）。
   登录态文字链 ink-2 #55504C on 浅底 ≈ 7:1，同样达标。 */
.hp2-nav-right a:not(.hp2-btn) { font-size: 13px; color: var(--hp2-ink-2); transition: color 150ms ease; }
.hp2-nav-right a:not(.hp2-btn):hover { color: var(--hp2-green); }
.hp2-nav-right a.hp2-btn { color: #fff; }
.hp2-nav-right a.hp2-btn:hover { color: #fff; }
.hp2-nav-right .hp2-user { font-size: 12.5px; color: var(--hp2-ink-3); }

/* ---------- 按钮 ---------- */
.hp2-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 8px 18px; border-radius: 12px;
  background: var(--hp2-green); color: #fff;
  font-size: 13px; font-weight: 600; white-space: nowrap;
  transition: filter 160ms ease, transform 160ms ease, background 160ms ease;
}
.hp2-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.hp2-btn:active { transform: translateY(0) scale(0.98); }
.hp2-btn-lg { padding: 13px 30px; font-size: 15px; border-radius: 14px; }
.hp2-btn-ghost {
  background: rgba(255, 253, 249, 0.66); color: var(--hp2-green);
  border: 1px solid rgba(7, 102, 70, 0.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.hp2-btn-ghost:hover { background: rgba(232, 245, 239, 0.9); filter: none; }

/* ---------- 舞台（滚动驱动） ---------- */
.hp2-stage {
  position: relative;
  height: 260dvh;               /* 100dvh 钉住 + 160dvh  scrub 行程 */
  view-timeline: --hp2-stage block;
}
.hp2-sticky {
  position: sticky; top: 0;
  height: 100dvh;
  overflow: hidden;
}

/* 背景：Token Plan 生成图，左侧象牙白晕染保证文字对比 */
.hp2-bg { position: absolute; inset: 0; z-index: 0; }
.hp2-bg img {
  width: 100%; height: 100%; object-fit: cover;
  transform-origin: 62% 40%;
  animation: hp2-bg-settle linear both;
  animation-timeline: --hp2-stage;
  animation-range: contain 0% contain 100%;
  will-change: transform;
}
@keyframes hp2-bg-settle {
  from { transform: scale(1.07); }
  to   { transform: scale(1); }
}
.hp2-bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(246, 245, 240, 0.94) 0%, rgba(246, 245, 240, 0.72) 34%, rgba(246, 245, 240, 0) 62%),
    linear-gradient(0deg, rgba(246, 245, 240, 0.55), rgba(246, 245, 240, 0) 30%);
}

/* ---------- 首屏左栏介绍 ---------- */
.hp2-hero {
  position: absolute; z-index: 2;
  left: clamp(20px, 5vw, 84px);
  top: 50%;
  transform: translateY(-50%);
  max-width: min(560px, 42vw);
  animation: hp2-hero-out linear both;
  animation-timeline: --hp2-stage;
  animation-range: contain 0% contain 26%;
}
@keyframes hp2-hero-out {
  from { opacity: 1; transform: translateY(-50%); visibility: visible; }
  to   { opacity: 0; transform: translateY(calc(-50% - 7vh)); visibility: hidden; }
}
.hp2-eyebrow {
  font-family: var(--hp2-mono); font-size: 11px; letter-spacing: 0.2em;
  color: var(--hp2-green); margin-bottom: 18px;
}
.hp2-hero h1 {
  font-family: var(--hp2-macro); font-weight: 800;
  font-size: clamp(44px, 6.4vw, 92px);
  line-height: 1.02; letter-spacing: -0.03em;
  color: var(--hp2-ink);
}
.hp2-lede {
  margin-top: 20px;
  font-size: clamp(14px, 1.15vw, 17px);
  line-height: 1.7; color: var(--hp2-ink-2);
  max-width: 30em;
}
.hp2-cta { margin-top: 32px; display: flex; gap: 12px; flex-wrap: wrap; }

/* ---------- 卡片甲板（展开态 = 网格自然位） ---------- */
/* 三期根因修复（2026-09-13）：deck 容器整块透明铺满舞台、z-index 高于 hero，
   会拦截左栏主按钮的点击（elementFromPoint 实测命中 DIV.hp2-deck）。
   容器本身不接事件，只让卡片实体接收 —— 首屏主按钮恢复可点。 */
.hp2-deck {
  position: absolute; z-index: 3;
  inset: var(--hp2-nav-h) clamp(14px, 2vw, 28px) 14px;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: minmax(0, 47fr) minmax(0, 53fr);
  gap: 14px;
  pointer-events: none;
  grid-template-areas:
    "prod prod prod prod prod qual qual qual qual qual qual qual"
    "prod prod prod prod prod plan plan site site othr othr othr";
}
.hp2-card-production { grid-area: prod; z-index: 5; }
.hp2-card-quality    { grid-area: qual; z-index: 4; }
.hp2-card-plan       { grid-area: plan; z-index: 3; }
.hp2-card-site       { grid-area: site; z-index: 2; }
.hp2-card-other      { grid-area: othr; z-index: 1; }

/* 叠放态位移/旋转/缩放 + 各卡 scrub 区间（错开 = 刷刷刷序列感）
   三期（2026-09-13，老大：右侧卡簇整体调大一点）：缩放系数整体上调约两成，
   位移/旋转同步微调保持叠放构图不压左栏文字；scale 围绕卡心放大，中心不变。 */
.hp2-card-production { --sx: 50.5vw;  --sy: -10vh;   --sr: -6deg; --ss: .56; --r0: 4%;  --r1: 40%; }
.hp2-card-quality    { --sx: 7vw;     --sy: 11vh;    --sr: 5deg;  --ss: .47; --r0: 12%; --r1: 48%; }
.hp2-card-plan       { --sx: 12.5vw;  --sy: -31.5vh; --sr: -7deg; --ss: .82; --r0: 20%; --r1: 56%; }
.hp2-card-site       { --sx: 4.5vw;   --sy: -25vh;   --sr: 8deg;  --ss: .90; --r0: 28%; --r1: 64%; }
.hp2-card-other      { --sx: -21.5vw; --sy: -40.5vh; --sr: -9deg; --ss: .88; --r0: 36%; --r1: 72%; }

.hp2-card {
  min-width: 0; min-height: 0;
  pointer-events: auto;   /* 配合 deck 的 pointer-events:none，只让卡片实体接点击 */
  animation: hp2-deal linear both;
  animation-timeline: --hp2-stage;
  animation-range: contain var(--r0) contain var(--r1);
  will-change: transform;
}
@keyframes hp2-deal {
  from { transform: translate(var(--sx), var(--sy)) rotate(var(--sr)) scale(var(--ss)); }
  to   { transform: translate(0, 0) rotate(0deg) scale(1); }
}

/* ---------- 卡片本体（质感/层次/微交互） ---------- */
.hp2-card-in {
  position: relative;
  height: 100%;
  display: flex; flex-direction: column;
  background: var(--hp2-card);
  border: 1px solid rgba(26, 22, 23, 0.08);
  border-radius: var(--hp2-radius);
  overflow: hidden;
  box-shadow: var(--hp2-shadow);
  transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 220ms ease;
}
.hp2-card-in:hover { transform: translateY(-4px); box-shadow: var(--hp2-shadow-lift); }
.hp2-card-in:active { transform: translateY(-1px) scale(0.995); }

/* 五期（2026-09-14，老大：现场管理卡功能字被挡死、分组标题折两行）布局收紧：
   首页卡区是 100dvh 定高 deck（生产卡左侧通高、质量卡右上、计划/现场管理/日常事务
   在下面一行、各只占 2~3 格宽 ≈ 219px）。窄卡里「现场管理」4 字标题 + 右侧英文
   副标题超宽 → 标题折两行；再加上 2 行简介占位，功能行区被挤到 0，滚动条因此
   形同虚设。改法 = 收掉简介行（index.html 的 hp2-blurb 行已删）+ 压矮图片带 +
   标题不换行，把高度还给功能行区。 */
.hp2-art { position: relative; flex: none; height: clamp(52px, 7vh, 96px); overflow: hidden; }
.hp2-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hp2-art::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255, 253, 249, 0) 55%, var(--hp2-card) 100%);
}

.hp2-card-body {
  position: relative;
  flex: 1; min-height: 0;
  display: flex; flex-direction: column;
  padding: 12px 18px 12px;
  overflow: hidden;
}
/* 类别水印字：右下角低存在感类别标记（装饰层，不参与交互） */
.hp2-card-body > * { position: relative; z-index: 1; }
.hp2-card-body::after {
  content: var(--wm, "");
  z-index: 0;
  position: absolute; right: 16px; bottom: 10px;
  font-family: var(--hp2-mono); font-weight: 600;
  font-size: clamp(18px, 1.6vw, 26px); line-height: 1;
  letter-spacing: 0.14em;
  color: rgba(26, 22, 23, 0.10);
  pointer-events: none;
}
.hp2-card-production { --wm: "PRODUCTION"; }
.hp2-card-quality    { --wm: "QUALITY"; }
.hp2-card-plan       { --wm: "PLAN"; }
.hp2-card-site       { --wm: "SITE"; }
.hp2-card-other      { --wm: "DAILY"; }   /* 四期 C5：「其他」改名「日常事务」 */
.hp2-card-production .hp2-card-body::after { color: rgba(255, 252, 232, 0.16); }
/* 生产主卡底部：生成图镜像倒影，填充高卡留白（装饰层） */
.hp2-card-production .hp2-card-body::before {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 0;
  height: 36%;
  background: url("home-assets/card-production.webp") center bottom / cover no-repeat;
  transform: scaleY(-1);
  opacity: 0.16;
  /* 元素经 scaleY(-1) 翻转，mask 方向按翻转前坐标系写：翻转后顶部淡出 */
  -webkit-mask-image: linear-gradient(180deg, #000 22%, transparent);
  mask-image: linear-gradient(180deg, #000 22%, transparent);
  pointer-events: none;
}
.hp2-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.hp2-head h2 {
  font-family: var(--hp2-macro); font-weight: 800;
  font-size: clamp(17px, 1.5vw, 23px); letter-spacing: -0.015em;
  white-space: nowrap;
}
.hp2-head span { font-family: var(--hp2-mono); font-size: 9px; letter-spacing: 0.14em; color: var(--hp2-ink-3); white-space: nowrap;
  /* 五期：窄卡英文副标题让位给中文标题——后置覆盖上面的 9px/0.14em，超宽省略号截断 */
  font-size: 8px; letter-spacing: 0.1em; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.hp2-blurb {
  margin-top: 7px;
  font-size: 12.5px; line-height: 1.6; color: var(--hp2-ink-2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.hp2-chips { margin-top: 8px; display: flex; gap: 8px; flex-wrap: wrap; }
.hp2-chip {
  font-family: var(--hp2-mono); font-size: 10px; letter-spacing: 0.08em;
  padding: 4px 10px; border-radius: 999px;
  background: rgba(7, 102, 70, 0.08); color: var(--hp2-green);
}
/* 三期根因修复（2026-09-13，老大：现场管理按钮只剩一半点不到）：
   卡片体定高 + overflow:hidden，内容超高时最先裁掉底部的「进入XX」按钮。
   现把功能行区改成唯一可伸缩/可滚动的中段，底部按钮固定不裁——
   功能再多也只是行区内部滚动，「查看更多」永远完整可见可点。 */
.hp2-rows {
  margin-top: 8px; display: flex; flex-direction: column;
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  scrollbar-width: thin;
  overscroll-behavior: contain;
}
.hp2-rows::-webkit-scrollbar { width: 4px; }
.hp2-rows::-webkit-scrollbar-thumb { background: rgba(26,22,23,0.16); border-radius: 2px; }
.hp2-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 2px;
  border-top: 1px solid var(--hp2-line);
  font-size: 13.5px; color: var(--hp2-ink);
  transition: color 150ms ease;
}
.hp2-row:first-child { border-top: none; }
/* 三期：业务编号五位（XC-01）不换行——现场管理卡曾折成两行 */
.hp2-row .r-idx {
  font-family: var(--hp2-mono); font-size: 9.5px; color: var(--hp2-ink-3);
  min-width: 34px; white-space: nowrap; letter-spacing: 0.02em;
}
/* 行区可滚时的底部渐隐提示（.is-scroll 由 home.js 按溢出状态加） */
.hp2-rows.is-scroll {
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 16px), transparent);
  mask-image: linear-gradient(180deg, #000 calc(100% - 16px), transparent);
}
.hp2-row .r-chev { margin-left: auto; color: var(--hp2-ink-3); font-size: 12px; transition: transform 180ms cubic-bezier(0.16, 1, 0.3, 1); }
.hp2-row:hover { color: var(--hp2-green); }
.hp2-row:hover .r-chev { transform: translateX(4px); color: var(--hp2-green); }
.hp2-row.is-off { color: var(--hp2-ink-3); cursor: default; }
.hp2-row.is-off .r-chev { font-size: 10px; font-family: var(--hp2-mono); letter-spacing: 0.08em; }
.hp2-note { margin-top: 8px; font-size: 11px; color: var(--hp2-ink-3); }
/* 三期（2026-09-13）：底部入口统一为整宽按钮态（原裸文字链在现场管理/其他卡上
   排版参差），固定不参与压缩；文案统一「查看更多」。 */
.hp2-foot { margin-top: auto; padding-top: 12px; flex: none; }
.hp2-foot a {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  height: 38px; padding: 0 16px; border-radius: 10px;
  background: rgba(7, 102, 70, 0.08);
  font-size: 13px; font-weight: 600; color: var(--hp2-green);
  white-space: nowrap;
  transition: background 160ms ease, color 160ms ease;
}
.hp2-foot a:hover { background: rgba(7, 102, 70, 0.15); text-decoration: none; }
.hp2-foot a:active { transform: scale(0.985); }
.hp2-foot a .chev { transition: transform 180ms cubic-bezier(0.16, 1, 0.3, 1); }
.hp2-foot a:hover { text-decoration: underline; }
.hp2-foot a:hover .chev { transform: translateX(4px); }

/* 质量 = 浅绿次主卡（三期：图带与简介各让一档高度，三条功能行在常规屏完整可见） */
.hp2-card-quality .hp2-art { height: clamp(52px, 7vh, 96px); }
.hp2-card-quality .hp2-blurb { -webkit-line-clamp: 1; }

/* 四期 C2（2026-09-13，老大：质量卡竖排长度不够，1、2 功能行和「查看更多」被挤没；
   改横向布局，下面放查看更多）：功能行改横排磁贴，行区不再吃掉伸缩空间，
   「查看更多」恒定完整可见。窄屏（≤900px）回退竖排行，见下方媒体查询。 */
.hp2-card-quality .hp2-rows {
  flex: none; flex-direction: row; gap: 6px;
  overflow: visible; margin-top: 10px;
}
.hp2-card-quality .hp2-row {
  flex: 1 1 0; min-width: 0;
  flex-direction: column; align-items: flex-start; gap: 5px;
  border-top: none; border-radius: 10px;
  padding: 9px 10px;
  background: rgba(7, 102, 70, 0.06);
  transition: background 150ms ease, color 150ms ease;
}
.hp2-card-quality .hp2-row:hover { background: rgba(7, 102, 70, 0.13); }
.hp2-card-quality .hp2-row > span:nth-child(2) { font-size: 12.5px; line-height: 1.4; }
.hp2-card-quality .hp2-row .r-chev { display: none; }
.hp2-card-quality .hp2-row.is-off { background: rgba(26, 22, 23, 0.04); }

/* 四期 C3（老大：计划卡下面介绍可以去掉，字不要）：隐藏简介行，
   标题上移，功能行与「查看更多」空间更充裕 */
.hp2-card-plan .hp2-blurb { display: none; }

/* 生产 = 主卡：墨绿深底 + 生成图融合 */
.hp2-card-production .hp2-art { height: clamp(140px, 30vh, 320px); }
.hp2-card-production .hp2-art::after {
  background: linear-gradient(180deg, rgba(6, 80, 58, 0) 40%, rgba(6, 80, 58, 0.92) 100%);
}
.hp2-card-production .hp2-card-in {
  background: linear-gradient(168deg, var(--hp2-green-deep), var(--hp2-green) 58%, var(--hp2-green-mid));
  border-color: transparent;
  color: #FFFCE8;
}
.hp2-card-production .hp2-head span,
.hp2-card-production .hp2-blurb { color: rgba(255, 252, 232, 0.74); }
.hp2-card-production .hp2-row { border-top-color: rgba(255, 252, 232, 0.16); color: #FFFCE8; padding: 14px 2px; font-size: 14px; }
.hp2-card-production .hp2-chip { background: rgba(255, 252, 232, 0.14); color: var(--hp2-mint); }
.hp2-card-production .hp2-row .r-idx,
.hp2-card-production .hp2-row .r-chev { color: rgba(255, 252, 232, 0.6); }
.hp2-card-production .hp2-row:hover { color: var(--hp2-mint); }
.hp2-card-production .hp2-row:hover .r-chev { color: var(--hp2-mint); }
.hp2-card-production .hp2-note { color: rgba(255, 252, 232, 0.55); }
.hp2-card-production .hp2-foot a {
  color: var(--hp2-mint);
  background: rgba(255, 252, 232, 0.14);
}
.hp2-card-production .hp2-foot a:hover { background: rgba(255, 252, 232, 0.24); }
/* 三期：三张功能小卡图带压低，把竖向空间让给功能行与底部按钮（防裁切第二道保险） */
.hp2-card-plan .hp2-art,
.hp2-card-site .hp2-art,
.hp2-card-other .hp2-art { height: clamp(52px, 7vh, 96px); }

/* 质量 = 浅绿次主卡 */
.hp2-card-quality .hp2-card-in { background: var(--hp2-tint); border-color: transparent; }

/* ---------- 滚动引导（可点击控件：点击直接落到展开态，非装饰 cue） ---------- */
.hp2-hint {
  position: absolute; z-index: 4;
  left: 50%; bottom: 22px; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: none; border: none; cursor: pointer;
  font-family: var(--hp2-mono); font-size: 10px; letter-spacing: 0.18em;
  color: var(--hp2-ink-3);
  animation: hp2-hint-out linear both;
  animation-timeline: --hp2-stage;
  animation-range: contain 0% contain 10%;
}
@keyframes hp2-hint-out { to { opacity: 0; visibility: hidden; } }
.hp2-hint i {
  width: 1px; height: 26px;
  background: linear-gradient(180deg, var(--hp2-green), transparent);
  animation: hp2-hint-drop 1.6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes hp2-hint-drop {
  0%   { transform: scaleY(0); transform-origin: top; }
  45%  { transform: scaleY(1); transform-origin: top; }
  55%  { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* ---------- 管理条 / 页脚 / flash ---------- */
.hp2-admin { max-width: 1280px; margin: 20px auto 0; padding: 0 clamp(16px, 4vw, 44px); }
.hp2-admin-row {
  display: flex; align-items: center; gap: 14px;
  background: var(--hp2-card);
  border: 1px solid var(--hp2-line);
  border-radius: 14px;
  padding: 14px 22px;
}
.hp2-admin-row b { font-size: 14px; }
.hp2-admin-row span { font-size: 12.5px; color: var(--hp2-ink-2); }
.hp2-admin-row a { margin-left: auto; font-size: 13px; font-weight: 600; color: var(--hp2-green); }
.hp2-admin-row a:hover { text-decoration: underline; }

.hp2-footer {
  max-width: 1280px; margin: 0 auto;
  padding: 40px clamp(16px, 4vw, 44px) 48px;
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  color: var(--hp2-ink-3); font-family: var(--hp2-mono); font-size: 10px; letter-spacing: 0.1em;
}

.flash-bar {
  max-width: 1280px; margin: calc(var(--hp2-nav-h) + 12px) auto 0;
  padding: 10px 22px; font-size: 13px; border-radius: 10px;
  margin-left: auto; margin-right: auto;
  width: calc(100% - 2 * clamp(16px, 4vw, 44px));
}
.flash-bar.ok { background: var(--hp2-tint); color: var(--hp2-green-deep); }
.flash-bar.error { background: #FBE9E7; color: #7C1D16; }

/* ============================================================
   静态版式：不支持 scroll-driven / reduced-motion / 窄屏
   首屏介绍在上，卡片网格单列流式在下，无叠放无 scrub
   ============================================================ */
html.hp2-static .hp2-stage { height: auto; view-timeline: none; }
html.hp2-static .hp2-sticky { position: static; height: auto; overflow: visible; }
html.hp2-static .hp2-bg { position: absolute; height: min(720px, 92vh); }
html.hp2-static .hp2-bg img { animation: none; transform: none; }
html.hp2-static .hp2-hero {
  position: relative; left: auto; top: auto; transform: none;
  max-width: 640px;
  margin: 0 auto;
  padding: calc(var(--hp2-nav-h) + clamp(48px, 9vh, 110px)) clamp(20px, 5vw, 84px) clamp(36px, 6vh, 72px);
  animation: none; opacity: 1; visibility: visible;
}
html.hp2-static .hp2-deck {
  position: relative; inset: auto;
  max-width: 1280px; margin: 0 auto;
  padding: 0 clamp(14px, 2vw, 28px) 24px;
  grid-template-rows: auto;
  grid-template-areas:
    "prod prod prod prod prod prod prod prod prod prod prod prod"
    "qual qual qual qual qual qual qual qual qual qual qual qual"
    "plan plan plan plan plan plan site site site site site site"
    "othr othr othr othr othr othr othr othr othr othr othr othr";
}
html.hp2-static .hp2-card { animation: none; transform: none; will-change: auto; }
html.hp2-static .hp2-card-in { height: auto; min-height: 300px; }
html.hp2-static .hp2-card-production .hp2-card-in { min-height: 420px; }
html.hp2-static .hp2-blurb { -webkit-line-clamp: 3; }
html.hp2-static .hp2-hint { display: none; }

@media (prefers-reduced-motion: reduce) {
  html:not(.hp2-static) .hp2-stage { height: auto; view-timeline: none; }
  html:not(.hp2-static) .hp2-sticky { position: static; height: auto; overflow: visible; }
  html:not(.hp2-static) .hp2-hero,
  html:not(.hp2-static) .hp2-card,
  html:not(.hp2-static) .hp2-bg img,
  html:not(.hp2-static) .hp2-hint { animation: none; }
  html:not(.hp2-static) .hp2-card { transform: none; }
  html:not(.hp2-static) .hp2-hint i { animation: none; }
  .hp2-card-in, .hp2-btn, .hp2-row .r-chev, .hp2-foot a .chev { transition: none; }
}

/* ---------- 响应式坍缩 ---------- */
/* 六期（2026-09-14，手机版首页 3 处版式修复）：原 max-width:1100px 会漏进手机 ≤900px，
   且 html:not(.hp2-static) 特异性高于手机版 .hp2-hero 规则，把手机 hero 压成
   46vw（390 宽时 ≈179px）——小标断行留孤字、主标题折两行的根因。
   现限定作用区间 901-1100px：该区间行为与改前完全一致；≥1101px 本就不命中。 */
@media (min-width: 901px) and (max-width: 1100px) {
  html:not(.hp2-static) .hp2-hero { max-width: 46vw; }
}
/* ---------- 响应式坍缩（三期手机版重构，2026-09-13） ----------
   390×844 真机尺度对齐：触控目标 ≥44px、正文留白收紧、卡片单列流式。 */
@media (max-width: 900px) {
  .hp2-stage { height: auto; view-timeline: none; }
  .hp2-sticky { position: static; height: auto; overflow: visible; }
  /* 六期：bg 铺满整首屏（原 min(560px,80vh) 在首屏底部留一段素色空带）；
     hp2-static 分支需同特异性压过静态版式段同名规则 */
  .hp2-bg, html.hp2-static .hp2-bg { height: 100dvh; }
  .hp2-bg img { animation: none; transform: none; }
  .hp2-hero {
    position: relative; left: auto; top: auto; transform: none;
    max-width: 640px; margin: 0 auto;
    padding: calc(var(--hp2-nav-h) + 44px) 20px 32px;
    animation: none; opacity: 1; visibility: visible;
    /* 六期：hero 占满整首屏、内容垂直居中 → 卡组起于首屏之下，
       首屏底部不再露半截卡（首屏干净收尾） */
    min-height: 100dvh;
    display: flex; flex-direction: column; justify-content: center;
  }
  .hp2-hero h1 { font-size: clamp(38px, 10vw, 56px); }
  /* 六期：360 宽下 lede 修复 A 后差 2px 换行会掉孤「。」，窄屏两行均分 */
  .hp2-lede { font-size: 14px; text-wrap: balance; }
  .hp2-cta { margin-top: 24px; }
  .hp2-cta .hp2-btn-lg { min-height: 48px; padding: 13px 26px; }
  .hp2-deck {
    position: relative; inset: auto;
    padding: 0 14px 20px;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 12px;
    grid-template-areas: "prod" "qual" "plan" "site" "othr";
  }
  .hp2-card { animation: none; transform: none; will-change: auto; }
  .hp2-card-in { height: auto; min-height: 260px; }
  /* 手机版行高抬到 44px+ 触控标准 */
  .hp2-row { padding: 12px 2px; }
  .hp2-card-production .hp2-row { padding: 13px 2px; }
  /* 四期 C2 窄屏回退：质量卡横排磁贴还原为竖排行（单列窄卡横排会挤成多行碎字） */
  .hp2-card-quality .hp2-rows { flex-direction: column; gap: 0; overflow-y: auto; }
  .hp2-card-quality .hp2-row {
    flex: none; flex-direction: row; align-items: center; gap: 10px;
    background: none; border-radius: 0; border-top: 1px solid var(--hp2-line);
    padding: 12px 2px;
  }
  .hp2-card-quality .hp2-row:first-child { border-top: none; }
  .hp2-card-quality .hp2-row:hover { background: none; }
  .hp2-card-quality .hp2-row > span:nth-child(2) { font-size: 13.5px; }
  .hp2-card-quality .hp2-row .r-chev { display: block; margin-left: auto; }
  .hp2-foot { padding-top: 10px; }
  .hp2-foot a { height: 44px; }
  .hp2-card-body { padding: 12px 16px 14px; }
  .hp2-hint { display: none; }
  /* 手机版顶栏只留品牌 + 退出（登录态其余入口在工作台/个人中心内有） */
  .hp2-nav-right a:not(.hp2-btn):not(.hp2-quit) { display: none; }
  .hp2-nav-right .hp2-user { display: none; }
  .hp2-eyebrow { font-size: 10px; letter-spacing: 0.12em; }
  .hp2-admin-row { flex-wrap: wrap; padding: 12px 16px; }
  .hp2-footer { padding: 28px 20px 36px; }
}