/* DeepSeek 2026-10-30: NOVAREFLECT 演示站设计系统
   基于《反光行业出海独立站调研报告》第 4.4 节设计习惯与第 7.1 节信息架构 */

/* ============================================================
   1. Tokens
   ============================================================ */
:root {
  --ink: #070B12;
  --ink-2: #0C131F;
  --ink-3: #141D2C;
  --ink-4: #1E293B;

  --paper: #FFFFFF;
  --paper-2: #F5F7FA;
  --paper-3: #EDF1F6;

  --line: #E2E8F0;
  --line-2: #CBD5E1;

  --muted: #55606F;
  --muted-2: #8892A0;

  --signal: #FFCE00;
  --signal-2: #F0B900;
  --flare: #EF5A1E;
  --ok: #0E9F6E;
  --info: #2563EB;

  --radius: 4px;
  --radius-lg: 8px;

  --shadow-sm: 0 1px 2px rgba(9, 16, 28, .06), 0 1px 3px rgba(9, 16, 28, .04);
  --shadow-md: 0 4px 12px rgba(9, 16, 28, .07), 0 12px 28px -12px rgba(9, 16, 28, .12);
  --shadow-lg: 0 24px 60px -24px rgba(9, 16, 28, .28);

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Inter, "Helvetica Neue", Arial, "PingFang SC", sans-serif;
  --mono: "SF Mono", ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace;

  --wrap: 1240px;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ============================================================
   2. Reset
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; font-weight: 680; letter-spacing: -.022em; line-height: 1.14; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
table { border-collapse: collapse; width: 100%; }
::selection { background: var(--signal); color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--flare);
  outline-offset: 3px;
}

/* ============================================================
   3. Layout primitives
   ============================================================ */
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 26px; }
.wrap-narrow { max-width: 860px; }
.section { padding: 88px 0; }
.section-sm { padding: 56px 0; }
.section-tight { padding: 64px 0; }
.bg-2 { background: var(--paper-2); }
.bg-ink { background: var(--ink); color: #E8EDF5; }
.bg-ink h1, .bg-ink h2, .bg-ink h3, .bg-ink h4 { color: #fff; }
.hairline { height: 1px; background: var(--line); border: 0; margin: 0; }

.grid { display: grid; gap: 24px; }
.g-2 { grid-template-columns: repeat(2, 1fr); }
.g-3 { grid-template-columns: repeat(3, 1fr); }
.g-4 { grid-template-columns: repeat(4, 1fr); }
.g-5 { grid-template-columns: repeat(5, 1fr); }
.g-6 { grid-template-columns: repeat(6, 1fr); }
.split { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
.split-wide { display: grid; grid-template-columns: 1.35fr .65fr; gap: 48px; align-items: start; }

/* ============================================================
   4. Type
   ============================================================ */
.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--flare);
}
.eyebrow::before {
  content: ""; width: 16px; height: 2px; background: var(--flare);
}
.eyebrow.on-dark { color: var(--signal); }
.eyebrow.on-dark::before { background: var(--signal); }

.h1 { font-size: clamp(36px, 4.6vw, 60px); }
.h2 { font-size: clamp(27px, 3.1vw, 40px); }
.h3 { font-size: clamp(20px, 2vw, 25px); }
.h4 { font-size: 18px; letter-spacing: -.01em; }

.lead { font-size: 18px; line-height: 1.62; color: var(--muted); }
.body-sm { font-size: 14.5px; line-height: 1.7; color: var(--muted); }
.small { font-size: 13px; line-height: 1.6; color: var(--muted); }
.micro { font-size: 11.5px; letter-spacing: .04em; color: var(--muted-2); }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }

/* DeepSeek 2026-11-01: 内容库正文的排版。
   详情页的 HTML 由后台编辑器产出（p / ul / strong / a / img），不可能在每个
   模板里各写一遍行高与间距 —— 那正是「同一段正文在标准页和应用页长得不一样」
   的来源。统一由 .prose 接管，模板只负责外层栅格。 */
.prose { font-size: 16px; line-height: 1.78; color: #3C4757; }
.prose > * + * { margin-top: 18px; }
.prose > :first-child { margin-top: 0; }
.prose h2 { font-size: 22px; margin-top: 40px; color: var(--ink); letter-spacing: -.01em; }
.prose h3 { font-size: 18px; margin-top: 32px; color: var(--ink); }
.prose strong, .prose b { color: var(--ink); font-weight: 680; }
.prose a { color: var(--ink); border-bottom: 1px solid var(--signal); text-decoration: none; }
.prose a:hover { border-bottom-color: var(--ink); }
.prose ul, .prose ol { padding-left: 22px; }
.prose li + li { margin-top: 8px; }
.prose img { max-width: 100%; height: auto; border-radius: 12px; }
.prose blockquote { border-left: 2px solid var(--signal); padding-left: 18px; color: var(--muted); }
.prose table { width: 100%; border-collapse: collapse; font-size: 14px; }
.prose th, .prose td { border-top: 1px solid var(--line); padding: 10px 12px; text-align: left; }
.on-dark .lead, .bg-ink .lead { color: #A9B6C8; }
.on-dark .body-sm, .bg-ink .body-sm, .on-dark .small { color: #93A1B5; }

.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; margin-bottom: 40px; }
.sec-head .txt { max-width: 840px; }
.sec-head h2 { margin-top: 14px; }
.sec-head p { margin-top: 14px; }
.sec-head .act { flex: none; padding-bottom: 6px; }

/* ============================================================
   5. Buttons
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  height: 46px; padding: 0 22px;
  font-size: 14.5px; font-weight: 640; letter-spacing: -.005em;
  border-radius: var(--radius); border: 1px solid transparent;
  transition: background .18s var(--ease), color .18s, border-color .18s, transform .18s, box-shadow .18s;
  white-space: nowrap;
}
.btn svg { width: 15px; height: 15px; flex: none; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primary { background: var(--signal); color: #14100A; box-shadow: 0 1px 0 rgba(255,255,255,.4) inset; }
.btn-primary:hover { background: #FFD829; box-shadow: 0 8px 20px -8px rgba(255,206,0,.7); }

.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: var(--ink-4); box-shadow: var(--shadow-md); }

.btn-ghost { border-color: var(--line-2); color: var(--ink); background: #fff; }
.btn-ghost:hover { border-color: var(--ink); }

.btn-ghost-dark { border-color: rgba(255,255,255,.28); color: #fff; }
.btn-ghost-dark:hover { border-color: rgba(255,255,255,.7); background: rgba(255,255,255,.07); }

.btn-sm { height: 38px; padding: 0 16px; font-size: 13.5px; }
.btn-lg { height: 52px; padding: 0 28px; font-size: 15.5px; }
.btn-block { width: 100%; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 14px; font-weight: 640; color: var(--ink);
  border-bottom: 1px solid transparent; transition: gap .2s, border-color .2s;
}
.link-arrow svg { width: 14px; height: 14px; transition: transform .2s var(--ease); }
.link-arrow:hover { border-color: var(--signal); }
.link-arrow:hover svg { transform: translateX(3px); }
.link-arrow.on-dark { color: var(--signal); }

/* ============================================================
   6. Top bar + header
   ============================================================ */
.topbar {
  background: var(--ink);
  color: #B7C3D4;
  font-size: 12.5px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.topbar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 38px; }
.topbar-left { display: flex; align-items: center; gap: 22px; min-width: 0; }
.topbar-left span { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.topbar-left span::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--ok); flex: none;
}
.topbar-left span + span::before { background: var(--signal); }
.topbar-right { display: flex; align-items: center; gap: 20px; }
.topbar-right a { display: inline-flex; align-items: center; gap: 6px; transition: color .15s; }
.topbar-right a:hover { color: #fff; }
.topbar-right svg { width: 13px; height: 13px; opacity: .7; }
.tb-sep { width: 1px; height: 14px; background: rgba(255,255,255,.16); }

.lang { position: relative; }
.lang-btn {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; color: #B7C3D4; padding: 4px 0;
}
.lang-btn:hover { color: #fff; }
.lang-btn .caret { width: 8px; height: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); }
.lang-menu {
  position: absolute; right: 0; top: calc(100% + 10px);
  background: #fff; color: var(--ink); border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  padding: 6px; min-width: 168px; display: none; z-index: 90;
}
.lang-menu.open { display: block; }
.lang-menu a { display: flex; justify-content: space-between; align-items: center; padding: 7px 10px; font-size: 13px; border-radius: 4px; }
.lang-menu a:hover { background: var(--paper-2); }
.lang-menu a.active { font-weight: 680; }
.lang-menu a.active::after { content: "✓"; color: var(--ok); font-size: 12px; }
/* DeepSeek 2026-10-31: 未上线语种的占位行。
   之前这些是 href="#" 的假链接：能聚焦、能回车、什么都不发生。
   改成 span + aria-disabled，并给一个浅色 soon 标签，一眼看出还没上线。
   样式与 a 对齐（同样的内边距和字号），否则整列会参差不齐。 */
.lang-menu .is-soon {
  display: flex; justify-content: space-between; align-items: center;
  padding: 7px 10px; font-size: 13px; border-radius: 4px;
  color: var(--muted-2); cursor: default;
}
.lang-menu .is-soon em {
  font-style: normal; font-size: 9.5px; font-weight: 650; letter-spacing: .06em;
  text-transform: uppercase; padding: 2px 6px; border-radius: 999px;
  background: var(--paper-2); color: var(--muted-2);
}
.lang-menu .lnote { padding: 8px 10px 4px; font-size: 11px; color: var(--muted-2); border-top: 1px solid var(--line); margin-top: 4px; }

.site-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255,255,255,.94);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow .25s;
}
.site-header.scrolled { box-shadow: 0 6px 24px -16px rgba(9,16,28,.35); }
.site-header .wrap { display: flex; align-items: center; gap: 32px; height: 72px; }

.brand { display: flex; align-items: center; gap: 11px; flex: none; }
.brand-mark { width: 34px; height: 34px; flex: none; }
.brand-txt { display: flex; flex-direction: column; line-height: 1.05; }
.brand-txt strong { font-size: 17.5px; font-weight: 760; letter-spacing: .085em; }
.brand-txt small { font-size: 9px; letter-spacing: .13em; text-transform: uppercase; color: var(--muted-2); margin-top: 3px; }

.menu { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.menu > .mi { position: relative; }
.menu > .mi > a {
  display: flex; align-items: center; gap: 5px;
  padding: 10px 13px; font-size: 14.5px; font-weight: 560; border-radius: 4px;
  transition: color .15s, background .15s;
}
.menu > .mi > a:hover { color: var(--ink); background: var(--paper-2); }
.menu > .mi > a .chev { width: 6px; height: 6px; border-right: 1.4px solid currentColor; border-bottom: 1.4px solid currentColor; transform: rotate(45deg) translateY(-3px); opacity: .45; }
/* DeepSeek 2026-11-01: 黄线跟随「谁在展开浮窗」，而不是死守当前页。
   原先浮窗由 .mi:hover 展开、黄线只认 .mi.current：鼠标扫到别的菜单时会出现
   「浮窗是 About 的、黄线还压在 Products 上」——两处高亮互相矛盾，读者会认错归属。
   现在每项都预留黄线、默认透明：当前页常亮，悬停/聚焦的那项顶替它，同屏永远只有一条。 */
.menu > .mi > a::after {
  content: ""; position: absolute; left: 13px; right: 13px; bottom: -1px; height: 2px;
  background: var(--signal); opacity: 0; transition: opacity .15s;
}
.menu > .mi.current > a { color: var(--ink); }
.menu > .mi.current > a::after { opacity: 1; }
.menu > .mi:hover > a::after,
.menu > .mi:focus-within > a::after { opacity: 1; }
/* 悬停/聚焦到别的项时当前页让位。:not(.current) 不能省 —— 否则悬停当前页自身
   也会命中这条更高优先级的规则，把本该亮着的黄线清掉。 */
.menu:has(> .mi:not(.current):hover) > .mi.current > a::after,
.menu:has(> .mi:not(.current):focus-within) > .mi.current > a::after { opacity: 0; }

.nav-tools { display: flex; align-items: center; gap: 10px; flex: none; }
.icon-btn {
  width: 40px; height: 40px; display: grid; place-items: center;
  border-radius: 50%; color: var(--ink); transition: background .15s;
}
.icon-btn:hover { background: var(--paper-2); }
.icon-btn svg { width: 17px; height: 17px; }
.burger { display: none; width: 42px; height: 42px; border: 1px solid var(--line-2); border-radius: 4px; place-items: center; }
.burger span { display: block; width: 17px; height: 1.6px; background: var(--ink); position: relative; }
.burger span::before, .burger span::after { content: ""; position: absolute; left: 0; width: 17px; height: 1.6px; background: var(--ink); }
.burger span::before { top: -5.5px; }
.burger span::after { top: 5.5px; }

/* Mega menu */
/* DeepSeek 2026-10-30: 用 --mx 控制水平位移，右端菜单的浮层由 JS 夹到视口内，避免整站横向滚动 */
.mega {
  --mx: -50%;
  position: absolute; left: 50%; top: calc(100% + 1px); transform: translate(var(--mx), 8px);
  width: min(1120px, calc(100vw - 52px));
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 30px 32px 0;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .18s var(--ease), transform .2s var(--ease), visibility .18s;
  z-index: 70;
}
.mi:hover .mega, .mi:focus-within .mega { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(var(--mx), 0); }
/* DeepSeek 2026-11-01: 列用 minmax(0,1fr) 而不是 1fr。
   1fr 的隐含下限是 min-content，产品名一旦 nowrap，四列各自撑到 300px，
   合计 1366px 直接顶出白底浮层 —— 字会落在深色 Hero 上。
   min-width:0 同样是为了让子项能被压缩。 */
.mega-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px; padding-bottom: 26px; }
.mega-col, .mega-col li { min-width: 0; }
.mega-col h5 {
  margin: 0 0 13px; font-size: 11px; font-weight: 750; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted-2);
}
.mega-col h5 a:hover { color: var(--ink); }
.mega-col li + li { margin-top: 1px; }
.mega-col a.mlink {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 6px 8px; margin-left: -8px; font-size: 14px; color: #2A3546; border-radius: 4px;
}
.mega-col a.mlink:hover { background: var(--paper-2); color: var(--ink); }
/* 单行截断：库里的产品名长短不一，多行会让四列的行高互相错位 */
.mega-col a.mlink > span:not(.ml2) {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* 两行条目：主名一行，规格一行。产品菜单专有 —— 之前把
   "High Intensity Prismatic · Type IV" 压成一行，四列挤不下只能省略，
   现在拆开写，每行都短，列宽和行高都回到整齐。 */
.mega-col a.mlink > .ml2 { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.mega-col a.mlink > .ml2 .mt {
  font-size: 13.5px; line-height: 1.3; color: inherit;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mega-col a.mlink > .ml2 .ms {
  font-size: 11px; line-height: 1.3; letter-spacing: .01em; color: var(--muted-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mega-col a.mlink .tag {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .02em; color: var(--muted-2);
  background: var(--paper-3); padding: 1px 4px; border-radius: 3px;
  /* DeepSeek 2026-11-01: 型号徽章不能换行。
     产品名来自内容库，长短不一（"Conspicuity tape · DOT-C2, 2 in × 150 ft"），
     徽章在 flex 收缩时会被压成 "NVR-" / "1000" 两行，看起来像两个不同的码。 */
  white-space: nowrap; flex: none;
}
/* 列尾的「查看全部」：产品超过 8 条时出现，指向族页 */
.mega-col .mega-more {
  display: inline-block; margin: 10px 0 0 8px; font-size: 12px; font-weight: 600;
  color: #B5410E; letter-spacing: .02em;
}
.mega-col .mega-more::after { content: " →"; }
.mega-col .mega-more:hover { color: var(--ink); }
.mega-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  margin: 0 -32px; padding: 14px 32px;
  background: var(--paper-2); border-top: 1px solid var(--line);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  font-size: 13px; color: var(--muted);
}
.mega-foot .feat { display: flex; align-items: center; gap: 10px; }
.mega-foot .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--flare); box-shadow: 0 0 0 3px rgba(239,90,30,.16); }
/* DeepSeek 2026-11-01: 1081–1160px 这段浮层被压到约 1030px，四列各少 11px，
   最长的 "High Intensity Prismatic" 就顶出省略号。收窄内外边距与字号把空间让回来。
   1080 以下主导航整体隐藏改用抽屉，所以只需管到 1160。 */
@media (max-width: 1160px) {
  .mega { padding: 26px 26px 0; }
  .mega-grid { gap: 24px; }
  .mega-foot { margin: 0 -26px; padding: 14px 26px; }
  .mega-col a.mlink > .ml2 .mt { font-size: 13px; }
}

/* Mobile drawer */
.drawer {
  position: fixed; inset: 0; z-index: 100; display: none;
}
.drawer.open { display: block; }
.drawer-bd { position: absolute; inset: 0; background: rgba(7,11,18,.5); backdrop-filter: blur(2px); }
.drawer-panel {
  position: absolute; right: 0; top: 0; bottom: 0; width: min(400px, 88vw);
  background: #fff; box-shadow: -20px 0 60px rgba(7,11,18,.25);
  display: flex; flex-direction: column;
  animation: slideIn .26s var(--ease);
}
@keyframes slideIn { from { transform: translateX(24px); opacity: .6; } to { transform: none; opacity: 1; } }
.drawer-top { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--line); }
.drawer-body { overflow: auto; padding: 8px 22px 30px; flex: 1; }
.dr-item { border-bottom: 1px solid var(--line); }
.dr-item > button, .dr-item > a {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  padding: 15px 0; font-size: 16px; font-weight: 600; text-align: left;
}
.dr-item .plus { width: 10px; height: 10px; position: relative; flex: none; }
.dr-item .plus::before, .dr-item .plus::after { content: ""; position: absolute; background: var(--muted); }
.dr-item .plus::before { left: 0; top: 4px; width: 10px; height: 1.5px; }
.dr-item .plus::after { left: 4px; top: 0; width: 1.5px; height: 10px; transition: transform .2s; }
.dr-item.open .plus::after { transform: scaleY(0); }
.dr-sub { display: none; padding: 2px 0 14px; }
.dr-item.open .dr-sub { display: block; }
.dr-sub a { display: block; padding: 7px 0 7px 12px; font-size: 14px; color: var(--muted); border-left: 1px solid var(--line); }
.dr-sub a:hover { color: var(--ink); border-color: var(--signal); }
.drawer-foot { padding: 20px 22px; border-top: 1px solid var(--line); display: grid; gap: 10px; }

/* ============================================================
   7. Hero
   ============================================================ */
.hero {
  position: relative; background: var(--ink); color: #fff; overflow: hidden;
  min-height: 640px; display: flex; align-items: center;
}
.hero-bg { position: absolute; inset: 0; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
.hero-bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(7,11,18,.95) 0%, rgba(7,11,18,.82) 34%, rgba(7,11,18,.44) 62%, rgba(7,11,18,.62) 100%),
    radial-gradient(120% 80% at 78% 20%, rgba(255,206,0,.10), transparent 60%);
}
/* 逆反射光斑：跟随指针，隐喻反光膜的回射特性 */
.hero-spot {
  position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: radial-gradient(340px 340px at var(--mx, 72%) var(--my, 38%), rgba(255,232,150,.20), rgba(255,206,0,.07) 42%, transparent 68%);
  mix-blend-mode: screen; transition: opacity .3s; opacity: .9;
}
.hero .wrap { position: relative; z-index: 3; padding-top: 74px; padding-bottom: 74px; }
.hero-inner { max-width: 700px; }
.hero h1 { font-size: clamp(38px, 4.9vw, 62px); letter-spacing: -.028em; margin: 20px 0 0; }
.hero h1 em { font-style: normal; color: var(--signal); }
.hero .lead { color: #C6D2E2; font-size: 18.5px; max-width: 600px; margin-top: 22px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.hero-meta {
  display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 40px;
  padding-top: 24px; border-top: 1px solid rgba(255,255,255,.13);
  font-size: 12.5px; color: #93A1B5;
}
.hero-meta span { display: inline-flex; align-items: center; gap: 7px; }
.hero-meta svg { width: 14px; height: 14px; color: var(--signal); }

/* 轮播帧（DeepSeek 2026-11-01：背景图改由后台幻灯片管理驱动）
   只换图不换文案，所以每一帧里除了图什么都没有 —— 标题、按钮、指标都是
   hero 自己的固定内容，不随帧变化。
   两个关键点：
     1) 用 opacity 交叉淡入而不是滑动：hero 有跟随指针的 .hero-spot 光斑，
        位移会让光斑和图不同步，看着像两张纸在错位；
     2) 淡出的帧必须 pointer-events:none。它们仍然铺满整个 hero，若不关掉，
        第 2 帧之后的每一帧都会挡在按钮上面，把 CTA 变成死链。 */
.hero-bg > .hero-slide {
  position: absolute; inset: 0; opacity: 0; pointer-events: none;
  transition: opacity 1.1s ease;
}
.hero-bg > .hero-slide.is-on { opacity: 1; pointer-events: auto; }
.hero-bg > .hero-slide a { position: absolute; inset: 0; display: block; }
.hero-bg > .hero-slide img { display: block; }

/* 帧指示器：细长条而不是圆点，跟站点的技术资料气质一致 */
/* DeepSeek 2026-11-01: 指示条移到 .hero-inner 之外，改由 .wrap 承载并水平居中——
   留在文案块内时它的父宽只有 700px，居中会偏在页面左半区。
   同日按用户要求把条尺寸等比放大一倍（24→48 / 3→6 / on 42→84 / gap 7→14）。 */
.hero-dots { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 36px; }
.hero-dot {
  width: 48px; height: 6px; padding: 0; border: 0; border-radius: 3px;
  background: rgba(255, 255, 255, .26); cursor: pointer;
  transition: width .28s ease, background .28s ease;
}
.hero-dot:hover { background: rgba(255, 255, 255, .52); }
.hero-dot.is-on { width: 84px; background: var(--signal); }
.hero-dot:focus-visible { outline: 2px solid var(--signal); outline-offset: 4px; }

.hero-compact { min-height: 400px; }
.hero-compact .wrap { padding-top: 56px; padding-bottom: 56px; }

/* Page hero (inner pages) */
.phero {
  background: var(--ink); color: #fff; position: relative; overflow: hidden;
  padding: 54px 0 60px;
}
.phero::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(80% 120% at 88% 0%, rgba(255,206,0,.10), transparent 55%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.028) 0 1px, transparent 1px 76px);
}

/* DeepSeek 2026-11-01: 栏目 banner 氛围图。
   为什么要三层：图（::after，z-index 0）→ 网格与暖光（::before，1）→ 正文（.wrap，2）。
   遮罩直接写进 ::after 的渐变里而不是给图层加 opacity —— 用 opacity 会把遮罩一起
   调淡，右侧就压不住了；写进渐变则每一档都是确定值。
   取景 72%/42%：主体都在右半边（左半边刻意拍成暗场给标题让位），竖直方向偏上，
   因为桌面端容器只有图高的 58%，居中取景会把主体压到裁切线上。 */
.phero { --phero-art: none; --phero-y: 42%; }
.phero[data-art="products"]     { --phero-art: url("../img/banner/banner-products.webp"); }
.phero[data-art="applications"] { --phero-art: url("../img/banner/banner-applications.webp"); --phero-y: 10%; }
.phero[data-art="standards"]    { --phero-art: url("../img/banner/banner-standards.webp"); --phero-y: 46%; }
.phero[data-art="resources"]    { --phero-art: url("../img/banner/banner-resources.webp"); --phero-y: 44%; }
.phero[data-art="about"]        { --phero-art: url("../img/banner/banner-about.webp"); --phero-y: 36%; }
.phero[data-art="contact"]      { --phero-art: url("../img/banner/banner-contact.webp"); --phero-y: 38%; }
.phero[data-art]::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background-image:
    linear-gradient(90deg,
      rgba(7, 11, 18, .97) 0%,
      rgba(7, 11, 18, .95) 30%,
      rgba(7, 11, 18, .80) 50%,
      rgba(7, 11, 18, .52) 74%,
      rgba(7, 11, 18, .34) 100%),
    var(--phero-art);
  background-size: auto, cover;
  background-position: 0 0, 72% var(--phero-y);
  background-repeat: no-repeat;
}
.phero .wrap { position: relative; z-index: 2; }
/* DeepSeek 2026-11-01: 标题折行用 balance，不要"末行只剩一个词"。
   .phero h1 限宽 860px，46px 的 "Every model, with its standard and its R_A value."
   放不下时会断成两行，第二行只剩 "value." —— 看着像排版事故。
   balance 让浏览器在同样两行内把长度分匀（断在短语之间），不需要在文案里塞 <br>
   （塞了的话窄屏会变成硬折行，更糟）。老浏览器不支持时就是普通的自然折行。 */
.hero h1, .phero h1, .sec-head h2 { text-wrap: balance; }

.phero h1 { font-size: clamp(30px, 3.6vw, 46px); margin-top: 16px; max-width: 860px; }
.phero .lead { color: #A9B6C8; margin-top: 16px; max-width: 720px; font-size: 17px; }
.phero-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }

.crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12.5px; color: #8593A6; }
.crumb a:hover { color: #fff; }
.crumb .sep { opacity: .45; }
.crumb .cur { color: #D6DFEB; }

/* ============================================================
   8. Badges, pills, tags
   ============================================================ */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  height: 26px; padding: 0 9px;
  font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .02em;
  border: 1px solid var(--line-2); border-radius: 3px;
  color: #3C4757; background: #fff; white-space: nowrap;
}
.badge.on-dark { border-color: rgba(255,255,255,.22); background: rgba(255,255,255,.06); color: #D7E0EC; }
.badge.sig { border-color: rgba(240,185,0,.5); background: rgba(255,206,0,.14); color: #6B5200; }
.badge.ok { border-color: rgba(14,159,110,.35); background: rgba(14,159,110,.09); color: #0A7D56; }
.badge.flare { border-color: rgba(239,90,30,.35); background: rgba(239,90,30,.08); color: #B5410E; }
.pill {
  display: inline-flex; align-items: center; gap: 7px;
  height: 30px; padding: 0 12px; font-size: 12.5px; font-weight: 560;
  background: var(--paper-2); border: 1px solid var(--line); border-radius: 100px; color: #3C4757;
}
.pill .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); }
.pill.sig { background: rgba(255,206,0,.13); border-color: rgba(240,185,0,.34); color: #6B5200; }
.pill.sig .dot { background: var(--signal-2); }

/* ============================================================
   9. Trust bar
   ============================================================ */
.trustbar { border-bottom: 1px solid var(--line); background: #fff; }
.trustbar .inner {
  display: grid; grid-template-columns: repeat(4, 1fr);
  divide-x: 1px;
}
.trust-item { padding: 26px 26px; border-left: 1px solid var(--line); }
.trust-item:first-child { border-left: 0; padding-left: 0; }
.trust-item .num { font-family: var(--mono); font-size: 27px; font-weight: 620; letter-spacing: -.03em; line-height: 1; }
.trust-item .num small { font-size: 14px; font-weight: 600; opacity: .55; margin-left: 2px; }
.trust-item .lbl { font-size: 12.5px; color: var(--muted); margin-top: 8px; }

/* ============================================================
   10. Cards
   ============================================================ */
.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  transition: border-color .2s, box-shadow .25s, transform .25s var(--ease);
  position: relative; overflow: hidden;
}
.card:hover { border-color: var(--line-2); box-shadow: var(--shadow-md); transform: translateY(-3px); }
.card-media { background: #fff; border-bottom: 1px solid var(--line); aspect-ratio: 4 / 3; overflow: hidden; display: grid; place-items: center; }
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.card:hover .card-media img { transform: scale(1.035); }
.card-media.contain { padding: 22px; }
.card-media.contain img { object-fit: contain; }
.card-body { padding: 20px 22px 22px; }
.card-body h4 { font-size: 16.5px; letter-spacing: -.012em; }
.card-body p { font-size: 13.8px; color: var(--muted); margin-top: 7px; line-height: 1.6; }
.card-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 16px; }
.card-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 14px; }
.card-tags .badge { height: 23px; font-size: 10.5px; }

/* 应用场景卡（深色遮罩 + 图） */
.scene {
  position: relative; overflow: hidden; border-radius: var(--radius-lg);
  min-height: 224px; display: flex; align-items: flex-end;
  color: #fff; isolation: isolate;
}
.scene img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .6s var(--ease); }
.scene::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(7,11,18,.10) 0%, rgba(7,11,18,.55) 46%, rgba(7,11,18,.90) 100%);
}
.scene:hover img { transform: scale(1.05); }
.scene-body { padding: 20px 22px; width: 100%; }
.scene h4 { font-size: 17px; color: #fff; }
.scene p { font-size: 12.8px; color: #BFCAD8; margin-top: 6px; }
.scene .go {
  position: absolute; top: 16px; right: 16px; width: 30px; height: 30px; border-radius: 50%;
  background: rgba(255,255,255,.14); backdrop-filter: blur(6px);
  display: grid; place-items: center; opacity: 0; transform: translateX(-4px);
  transition: opacity .2s, transform .2s;
}
.scene .go svg { width: 13px; height: 13px; color: #fff; }
.scene:hover .go { opacity: 1; transform: none; }

/* Feature / value cards */
/* DeepSeek 2026-10-30: 卡片内 kv 行贴底，避免文字行数不同时虚线分隔错位 */
.vcard {
  padding: 26px 24px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: #fff;
  display: flex; flex-direction: column; height: 100%;
}
.vcard .ico {
  width: 40px; height: 40px; border-radius: 6px; display: grid; place-items: center;
  background: var(--paper-2); border: 1px solid var(--line); margin-bottom: 18px;
}
.vcard .ico svg { width: 19px; height: 19px; color: var(--ink); }
.vcard h4 { font-size: 16px; }
.vcard p { font-size: 13.8px; color: var(--muted); margin-top: 8px; margin-bottom: 16px; line-height: 1.66; }
.vcard .kv { display: flex; gap: 18px; margin-top: auto; padding-top: 14px; border-top: 1px dashed var(--line); }
.vcard .kv div { font-size: 11.5px; color: var(--muted-2); }
.vcard .kv b { display: block; font-family: var(--mono); font-size: 15px; color: var(--ink); font-weight: 620; }

/* Numbered steps */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--line); }
.step { padding: 28px 26px 0 0; position: relative; }
.step + .step { padding-left: 26px; border-left: 1px solid var(--line); }
.step .n {
  font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .1em;
  color: var(--flare);
}
.step h4 { margin-top: 12px; font-size: 15.5px; }
.step p { font-size: 13.2px; color: var(--muted); margin-top: 7px; line-height: 1.6; }

/* ============================================================
   11. Tables
   ============================================================ */
.table-wrap { border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: #fff; color: var(--ink); }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.spec { font-size: 13.6px; min-width: 100%; color: var(--ink); }
table.spec thead th {
  background: var(--ink); color: #E9EFF7;
  font-size: 11.5px; font-weight: 650; letter-spacing: .07em; text-transform: uppercase;
  text-align: left; padding: 12px 14px; white-space: nowrap;
  border-right: 1px solid rgba(255,255,255,.08);
}
table.spec thead th:last-child { border-right: 0; }
table.spec tbody td { padding: 12px 14px; border-top: 1px solid var(--line); border-right: 1px solid var(--line); vertical-align: top; }
table.spec tbody td:last-child { border-right: 0; }
table.spec tbody tr:nth-child(even) { background: #FBFCFD; }
table.spec tbody tr:hover { background: #FFFDF2; }
/* DeepSeek 2026-11-01: 产品索引的封面列。40×30 是「看得出来是什么材料、
   又不把 135 行的表撑成两倍长」的平衡点；缺图时给一块同尺寸浅色底板，
   行高才不会因为个别记录缺图而参差。 */
table.spec td.pthumb { width: 62px; padding: 6px 10px; vertical-align: middle; }
table.spec td.pthumb img {
  display: block; width: 48px; height: 36px; object-fit: cover;
  border-radius: 3px; background: #EAEEF4; box-shadow: 0 1px 3px rgba(9, 16, 28, .22);
}
table.spec td.pthumb .pthumb-none {
  display: block; width: 48px; height: 36px; border-radius: 3px;
  background: #F1F4F8; box-shadow: inset 0 0 0 1px var(--line);
}
table.spec td.mono, table.spec th.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
table.spec .rowhead { font-weight: 640; color: var(--ink); white-space: nowrap; }
table.spec caption {
  caption-side: top; text-align: left; padding: 14px 16px;
  font-size: 12.5px; color: var(--muted); background: var(--paper-2); border-bottom: 1px solid var(--line);
}
.t-note { font-size: 11.8px; color: var(--muted-2); margin-top: 10px; line-height: 1.6; }

/* 等级对比：RA 值条形（渐变实现，避免表格自动布局下的百分比失真） */
.ra-bar { display: flex; align-items: center; gap: 10px; }
.ra-bar .track {
  flex: 1; height: 6px; border-radius: 3px; min-width: 70px;
  background: linear-gradient(90deg, #FFB800 0 var(--p, 0%), #E6EBF1 var(--p, 0%) 100%);
}
.ra-bar .v { font-family: var(--mono); font-size: 12px; width: 40px; text-align: right; color: #2A3546; font-weight: 600; }

/* ============================================================
   12. Callouts
   ============================================================ */
.note {
  border: 1px solid var(--line); border-left: 3px solid var(--info);
  background: #F7FAFF; border-radius: 0 var(--radius) var(--radius) 0;
  padding: 16px 20px; font-size: 13.8px; color: #2C3A4E; line-height: 1.68;
}
.note b { color: var(--ink); }
.note.warn { border-left-color: var(--flare); background: #FFF8F4; }
.note.tip { border-left-color: var(--ok); background: #F4FBF8; }
.note .nt { display: block; font-size: 11px; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 6px; }

/* ============================================================
   13. CTA band
   ============================================================ */
.cta-band { background: var(--ink); color: #fff; position: relative; overflow: hidden; }
.cta-band::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(70% 140% at 82% 100%, rgba(255,206,0,.13), transparent 60%),
    repeating-linear-gradient(115deg, rgba(255,255,255,.03) 0 2px, transparent 2px 12px);
}
.cta-band .wrap { position: relative; z-index: 2; display: grid; grid-template-columns: 1.3fr auto; gap: 40px; align-items: center; padding: 52px 26px; }
.cta-band h2 { font-size: clamp(24px, 2.6vw, 33px); }
.cta-band p { color: #A9B6C8; margin-top: 10px; font-size: 15px; max-width: 620px; }
.cta-band .acts { display: flex; gap: 12px; flex-wrap: wrap; }

/* ============================================================
   14. Footer
   ============================================================ */
.site-footer { background: var(--ink); color: #93A1B5; font-size: 13.5px; padding-top: 60px; }
.foot-grid { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 40px; padding-bottom: 46px; }
.foot-brand .brand-txt strong { color: #fff; }
.foot-brand .brand-txt small { color: #6C7A8E; }
.foot-brand p { margin-top: 18px; font-size: 13.2px; line-height: 1.7; max-width: 300px; }
.foot-brand .addr { margin-top: 16px; font-size: 12.5px; color: #7D8B9F; line-height: 1.65; }
.foot-col h5 { margin: 0 0 14px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #fff; }
.foot-col li + li { margin-top: 9px; }
.foot-col a:hover { color: #fff; }
.foot-col .badge { margin: 0 4px 5px 0; }
.foot-bottom {
  border-top: 1px solid rgba(255,255,255,.09);
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 20px 0; font-size: 12.3px; color: #6C7A8E;
}
.foot-bottom .links { display: flex; gap: 20px; flex-wrap: wrap; }
.foot-bottom a:hover { color: #fff; }

/* ============================================================
   15. Floating actions
   ============================================================ */
/* DeepSeek 2026-11-01: 侧边浮窗收敛成一条深色胶囊。
   原来是三个各自带底色和投影的圆（绿 WhatsApp / 黑书签 / 白邮件），
   颜色一多就和站点的墨黑 + 信号黄打架。现在一体成型：深色胶囊里只放
   白色线性图标，悬停变主色黄 —— 颜色只剩两种，形状也只剩一个。 */
.floats {
  /* DeepSeek 2026-11-01: 贴右边缘、垂直居中。
     不能同时留 bottom —— fixed 元素 top/bottom 都设且高度 auto 时会被拉伸。 */
  position: fixed; right: 0; top: 50%; bottom: auto;
  transform: translateY(-50%);
  z-index: 50;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 10px; background: var(--ink); border-radius: 999px;
  /* 页脚也是 --ink，同色会让胶囊在页脚区整个消失、只剩图标飘着。
     内侧压一道极淡的白边保住轮廓；用 inset 而非 border，避免宽度跳动。 */
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .13),
              0 22px 48px -20px rgba(9, 16, 28, .5), 0 2px 6px rgba(9, 16, 28, .18);
}
.float-btn {
  position: relative;
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  padding: 0; border: 0; background: none; color: #fff;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background .16s, color .16s;
}
.float-btn svg { width: 21px; height: 21px; }
.float-btn:hover { background: rgba(255, 255, 255, .1); color: var(--signal); }
.float-btn:focus-visible { outline: 2px solid var(--signal); outline-offset: 1px; }
/* 回顶按钮默认不占位：胶囊有底色了，藏起来的按钮会留一块深色空洞 */
.float-btn.top { display: none; }
.float-btn.top.show { display: grid; animation: fabIn .2s var(--ease); }
@keyframes fabIn { from { opacity: 0; transform: scale(.72); } to { opacity: 1; transform: none; } }
.float-btn .tip {
  position: absolute; right: calc(100% + 15px); top: 50%; transform: translateY(-50%) translateX(4px);
  background: #fff; color: var(--ink); font-size: 12px; font-weight: 550;
  padding: 6px 10px; border-radius: 5px; box-shadow: 0 8px 22px -10px rgba(9, 16, 28, .5);
  white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s;
}
.float-btn:hover .tip { opacity: 1; transform: translateY(-50%); }

/* ============================================================
   16. Forms
   ============================================================ */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: 12.5px; font-weight: 640; color: #34404F; letter-spacing: .01em; }
.field label .req { color: var(--flare); margin-left: 2px; }
.field .hint { font-size: 11.5px; color: var(--muted-2); }
.input, .select, .textarea {
  width: 100%; height: 44px; padding: 0 13px;
  border: 1px solid var(--line-2); border-radius: var(--radius); background: #fff;
  font-size: 14px; transition: border-color .15s, box-shadow .15s;
}
.textarea { height: auto; min-height: 104px; padding: 11px 13px; resize: vertical; line-height: 1.6; }
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(7,11,18,.07);
}
.input.err, .select.err, .textarea.err { border-color: #D93A3A; box-shadow: 0 0 0 3px rgba(217,58,58,.09); }
.field .err-msg { font-size: 11.5px; color: #C22B2B; display: none; }
.field.invalid .err-msg { display: block; }

/* 蜜罐字段：正常访客看不见、也 Tab 不到，脚本按 input 名填表时才会碰到它。
   用「移出视口」而不是 display:none —— 部分脚本会跳过不可见元素，
   而 display:none 的输入框在多数无障碍树里也直接消失，反而更像"没这个字段"。
   高度归零 + overflow hidden 保证它不占布局、不撑出横向滚动条。 */
.hp {
  position: absolute; left: -9999px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}

.checks { display: grid; gap: 10px; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; color: var(--muted); cursor: pointer; }
.check input { margin-top: 3px; width: 15px; height: 15px; accent-color: var(--ink); flex: none; }

/* 带勾选的要点列表（非表单控件） */
.ticks { display: grid; gap: 11px; }
.ticks > div { position: relative; padding-left: 23px; font-size: 13.6px; color: var(--muted); line-height: 1.62; }
.ticks > div::before {
  content: "✓"; position: absolute; left: 0; top: 0;
  font-size: 11.5px; font-weight: 800; color: var(--ok); line-height: 1.75;
}

/* ============================================================
   17. Misc utilities
   ============================================================ */
.tag-row { display: flex; flex-wrap: wrap; gap: 8px; }
.stack-xs > * + * { margin-top: 8px; }
.stack-sm > * + * { margin-top: 14px; }
.stack > * + * { margin-top: 22px; }
.stack-lg > * + * { margin-top: 36px; }
.mt-8 { margin-top: 8px; } .mt-14 { margin-top: 14px; } .mt-20 { margin-top: 20px; }
.mt-28 { margin-top: 28px; } .mt-36 { margin-top: 36px; } .mt-48 { margin-top: 48px; }
.center { text-align: center; }
.mx-auto { margin-left: auto; margin-right: auto; }
.muted { color: var(--muted); }
.nowrap { white-space: nowrap; }
.dark-line { border-color: rgba(255,255,255,.12) !important; }

/* 滚动显现：默认可见（渐进增强），只有 JS 主动开启动画时才隐藏 */
.reveal { opacity: 1; transform: none; }
html.anim .reveal { opacity: 0; transform: translateY(14px); }
html.anim .reveal.in {
  opacity: 1; transform: none;
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}

/* Accordion */
.acc { border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: #fff; }
.acc-item + .acc-item { border-top: 1px solid var(--line); }
.acc-q {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; width: 100%;
  padding: 18px 22px; text-align: left; font-size: 15px; font-weight: 600; line-height: 1.45;
}
.acc-q:hover { background: #FBFCFD; }
.acc-q .sign { position: relative; width: 12px; height: 12px; flex: none; margin-top: 4px; }
.acc-q .sign::before, .acc-q .sign::after { content: ""; position: absolute; background: var(--muted); transition: transform .22s; }
.acc-q .sign::before { left: 0; top: 5.2px; width: 12px; height: 1.6px; }
.acc-q .sign::after { left: 5.2px; top: 0; width: 1.6px; height: 12px; }
.acc-item.open .acc-q .sign::after { transform: scaleY(0); }
.acc-a { display: none; padding: 0 22px 20px; font-size: 14px; color: var(--muted); line-height: 1.72; }
.acc-item.open .acc-a { display: block; }
.acc-a p + p { margin-top: 10px; }
.acc-a ul { margin-top: 8px; }
.acc-a li { position: relative; padding-left: 15px; }
.acc-a li + li { margin-top: 6px; }
.acc-a li::before { content: ""; position: absolute; left: 0; top: 9px; width: 5px; height: 5px; border-radius: 50%; background: var(--line-2); }

/* Filter chips */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  height: 34px; padding: 0 14px; display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--line-2); border-radius: 100px; font-size: 13px; font-weight: 550;
  background: #fff; color: #3C4757; transition: all .15s;
}
.chip:hover { border-color: var(--ink); }
.chip.active { background: var(--ink); border-color: var(--ink); color: #fff; }
.chip .c { font-family: var(--mono); font-size: 11px; opacity: .6; }

/* Doc / download rows */
.dl-row {
  display: grid; grid-template-columns: 34px 1fr auto; gap: 16px; align-items: center;
  padding: 16px 20px; border: 1px solid var(--line); border-radius: var(--radius);
  background: #fff; transition: border-color .15s, background .15s;
}
.dl-row:hover { border-color: var(--line-2); background: #FCFDFE; }
.dl-ico { width: 34px; height: 34px; border-radius: 4px; background: var(--paper-2); border: 1px solid var(--line); display: grid; place-items: center; }
.dl-ico span { font-family: var(--mono); font-size: 9.5px; font-weight: 700; color: #55606F; letter-spacing: .02em; }
.dl-row .t { font-size: 14px; font-weight: 600; }
.dl-row .m { font-size: 11.8px; color: var(--muted-2); margin-top: 3px; font-family: var(--mono); }
.dl-row .go { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 620; color: var(--ink); }
.dl-row .go svg { width: 13px; height: 13px; }

/* TDS 参数两列 */
.kv-table { border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.kv-table .row { display: grid; grid-template-columns: 40% 60%; border-top: 1px solid var(--line); }
.kv-table .row:first-child { border-top: 0; }
.kv-table .row > div { padding: 11px 16px; font-size: 13.6px; }
.kv-table .row > div:first-child { background: var(--paper-2); color: #3C4757; font-weight: 560; }
.kv-table .row > div:last-child { font-family: var(--mono); font-size: 13px; color: var(--ink); }

/* Sticky side nav (product page) */
.side-nav { position: sticky; top: 92px; }
.side-nav ul { border-left: 1px solid var(--line); }
.side-nav a { display: block; padding: 7px 0 7px 16px; margin-left: -1px; border-left: 2px solid transparent; font-size: 13.5px; color: var(--muted); }
.side-nav a:hover { color: var(--ink); }
.side-nav a.active { color: var(--ink); font-weight: 640; border-left-color: var(--signal); }

/* 品牌 logo 墙 */
.logo-wall { display: grid; grid-template-columns: repeat(6, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.logo-cell {
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  height: 78px; display: grid; place-items: center; padding: 12px;
  font-family: var(--mono); font-size: 12px; letter-spacing: .06em; color: #8A94A3;
  text-align: center; line-height: 1.3; transition: color .18s, background .18s;
}
.logo-cell:hover { color: var(--ink); background: #FCFDFE; }

/* Search overlay */
/* DeepSeek 2026-11-01: 之前是"一条无边框白条"，访客看不出哪里能输入，
   也读不出它搜的是全站。重做三件事：真正的输入框（浅底 + 描边 + 聚焦光圈）、
   抬头写明范围与条目数、加半透明遮罩（点空白/ESC 关闭）。 */
.searchbox { position: fixed; left: 0; right: 0; top: 0; z-index: 75; display: none; }
.searchbox.open { display: block; }
.search-bd {
  position: fixed; inset: 0;
  background: rgba(7, 11, 18, .42);
  animation: fadeIn .18s var(--ease);
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.search-panel {
  position: relative;
  background: #fff; border-bottom: 1px solid var(--line);
  box-shadow: 0 28px 56px -34px rgba(9, 16, 28, .55);
  animation: dropIn .2s var(--ease);
}
@keyframes dropIn { from { transform: translateY(-10px); opacity: .4; } to { transform: none; opacity: 1; } }
.search-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; padding: 20px 0 0; }
.search-kicker {
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--flare);
}
.search-scope { font-size: 12.5px; color: var(--muted-2); }
.search-form { padding: 10px 0 0; }
.search-field {
  display: flex; align-items: center; gap: 13px;
  height: 58px; padding: 0 10px 0 18px;
  background: #F7F9FB; border: 1.5px solid var(--line-2); border-radius: 12px;
  transition: background .15s, border-color .15s, box-shadow .15s;
}
.search-field:hover { border-color: #C3CCD8; }
.search-field:focus-within {
  background: #fff; border-color: var(--ink);
  box-shadow: 0 0 0 4px rgba(9, 16, 28, .07);
}
.sf-ico { width: 20px; height: 20px; color: var(--muted-2); flex: none; transition: color .15s; }
.search-field:focus-within .sf-ico { color: var(--ink); }
.search-field input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: none;
  font-size: 17px; letter-spacing: -.01em; color: var(--ink);
}
.search-field input::placeholder { color: #96A0AE; }
.search-field input::-webkit-search-cancel-button { -webkit-appearance: none; }
.search-close {
  flex: none; font-family: var(--mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: .06em; color: var(--muted); background: #fff;
  border: 1px solid var(--line-2); border-radius: 5px; padding: 5px 8px;
  transition: color .15s, border-color .15s;
}
.search-close:hover { color: var(--ink); border-color: var(--ink); }
.search-hint { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 15px 0 18px; }
.search-hint-lbl {
  font-family: var(--mono); font-size: 10.5px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted-2);
  margin-right: 2px;
}
.search-hint a {
  font-size: 12.5px; color: var(--ink);
  background: #fff; border: 1px solid var(--line-2); border-radius: 999px; padding: 6px 12px;
  transition: border-color .15s, background .15s;
}
.search-hint a:hover { border-color: var(--ink); background: var(--paper-2); }

/* DeepSeek 2026-11-01: 搜索结果。max-height + 内滚动，避免 8 条结果把
   整个视口顶掉 —— 固定在顶部的面板一旦超过 100vh，关闭按钮就点不到了。 */
.search-results {
  max-height: 52vh; overflow-y: auto; margin-bottom: 14px;
  border-bottom: 1px solid var(--line); padding-bottom: 8px;
}
.search-results[hidden] { display: none; }
.sr-item {
  display: grid; grid-template-columns: 104px 1fr; gap: 3px 16px;
  padding: 11px 10px; border-radius: 8px;
}
.sr-item:hover { background: var(--paper-2); }
.sr-kind {
  grid-row: span 2; padding-top: 3px;
  font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-2);
}
.sr-t { font-size: 14.5px; font-weight: 620; color: var(--ink); letter-spacing: -.01em; }
.sr-s {
  font-size: 12.5px; color: var(--muted); line-height: 1.5;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sr-empty { padding: 14px 10px; font-size: 13px; color: var(--muted); }

.foot-certs { display: flex; flex-wrap: wrap; gap: 7px; padding-bottom: 26px; }

/* 应用清单行 */
/* DeepSeek 2026-11-01: 第二列 minmax(0,1fr)。
   裸 1fr 的最小尺寸是 min-content，长标题压不下去，整行会撑破容器 —— 在 390px
   视口实测把文档撑出 27px 横向滚动，连带 position:fixed 的侧边胶囊被推出屏幕。
   与本项目其他网格同一处理方式（见 .mega / 产品卡片的 minmax(0,1fr)）。 */
.app-row {
  display: grid; grid-template-columns: 30px minmax(0, 1fr) 20px; gap: 16px; align-items: center;
  padding: 17px 6px; border-top: 1px solid var(--line); margin: 0 -6px;
  transition: background .15s, padding .2s var(--ease);
}
.app-row:hover { background: #fff; padding-left: 12px; }
.app-row > .mono { font-size: 11px; color: var(--muted-2); letter-spacing: .06em; }
.app-row b { display: block; font-size: 15px; font-weight: 620; letter-spacing: -.01em; }
.app-row span { display: block; font-size: 12.8px; color: var(--muted); margin-top: 2px; }
.app-row i { display: grid; place-items: center; opacity: 0; transform: translateX(-4px); transition: opacity .2s, transform .2s; }
.app-row i svg { width: 14px; height: 14px; color: var(--ink); }
.app-row:hover i { opacity: 1; transform: none; }

/* 演示站 toast 提示 */
.toast {
  position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 14px);
  z-index: 90; max-width: 90vw;
  background: var(--ink); color: #fff; font-size: 13px; line-height: 1.5;
  padding: 11px 18px; border-radius: 6px; box-shadow: 0 18px 40px -18px rgba(9, 16, 28, .6);
  opacity: 0; pointer-events: none; transition: opacity .2s var(--ease), transform .2s var(--ease);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* 面包屑 + 页面内小标题 */
.inline-head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.inline-head h3 { font-size: 17px; }
.inline-head span { font-size: 12.5px; color: var(--muted-2); }

/* ============================================================
   18. Responsive
   ============================================================ */
@media (max-width: 1120px) {
  .foot-grid { grid-template-columns: 1.4fr repeat(2, 1fr); gap: 34px; }
  .g-5 { grid-template-columns: repeat(3, 1fr); }
  .g-6 { grid-template-columns: repeat(3, 1fr); }
  .logo-wall { grid-template-columns: repeat(4, 1fr); }
}
/* DeepSeek 2026-10-31: 主导航增至 7 项（新增 Home），断点由 980 提到 1080，
   避免 980–1060 区间品牌 + 导航 + 工具按钮挤出容器 */
@media (max-width: 1080px) {
  .topbar-left span + span { display: none; }
  .menu, .nav-tools .icon-btn { display: none; }
  .burger { display: grid; }
  .site-header .wrap { height: 64px; gap: 16px; }
  .nav-tools { margin-left: auto; }
  .split, .split-wide { grid-template-columns: 1fr; gap: 34px; }
  .section { padding: 64px 0; }
  .trustbar .inner { grid-template-columns: repeat(2, 1fr); }
  .trust-item { padding: 20px 20px; }
  .trust-item:nth-child(odd) { border-left: 0; padding-left: 0; }
  .trust-item:nth-child(n+3) { border-top: 1px solid var(--line); }
  .g-4 { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .step:nth-child(3) { border-left: 0; padding-left: 0; }
  .step:nth-child(n+3) { border-top: 1px solid var(--line); margin-top: 24px; padding-top: 24px; }
  .cta-band .wrap { grid-template-columns: 1fr; gap: 26px; }
  .sec-head { flex-direction: column; align-items: flex-start; gap: 18px; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .foot-brand { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .wrap { padding: 0 18px; }
  .hero { min-height: 560px; }
  .hero .wrap { padding-top: 52px; padding-bottom: 52px; }
  .hero-meta { gap: 8px 16px; font-size: 11.5px; }
  .g-2, .g-3, .g-4 { grid-template-columns: 1fr; }
  .g-5, .g-6 { grid-template-columns: repeat(2, 1fr); }
  .form-grid { grid-template-columns: 1fr; }
  .logo-wall { grid-template-columns: repeat(2, 1fr); }
  .topbar { display: none; }
  .site-header .wrap { height: 60px; }
  .brand-txt strong { font-size: 15.5px; }
  .brand-txt small { display: none; }
  .nav-tools .btn { display: none; }
  .section { padding: 52px 0; }
  .trust-item .num { font-size: 23px; }
  .step { padding-right: 0; }
  .steps { grid-template-columns: 1fr; }
  .step + .step { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); margin-top: 20px; padding-top: 20px; }
  .step:nth-child(3) { border-top: 1px solid var(--line); }
  .floats { right: 0; padding: 8px; }
  .float-btn { width: 38px; height: 38px; }
  .float-btn svg { width: 20px; height: 20px; }
  .foot-bottom { flex-direction: column; align-items: flex-start; gap: 12px; }
  table.spec { font-size: 12.8px; }
  table.spec thead th, table.spec tbody td { padding: 10px 11px; }
}

/* ============================================================
   Model links — 表格里的型号统一指向详情页
   DeepSeek 2026-11-01: 全站 a 是 color:inherit + 无下划线（正文里的
   链接靠上下文自证），但表格里一个纯文本型号和一个可点型号外观必须
   有区别，否则"能点"这件事没人会发现。用底部发丝线而不是整行变色：
   一张 22 行的对比表里飘 22 个彩字，反而看不出重点。
   ============================================================ */
.model-link { color: inherit; border-bottom: 1px solid var(--line-2); padding-bottom: 1px; }
.model-link:hover { color: var(--flare); border-bottom-color: var(--flare); }

/* ============================================================
   DeepSeek 2026-11-01: 无实拍图的产品占位底板
   113 条对标数据没有图片。原来这块直接不渲染，标题下方会留出
   16/10 的空白；现在给一块带型号的底板，版面完整、也不假装有图。
   ============================================================ */
.pdp-noimg {
  aspect-ratio: 16 / 10; box-sizing: border-box;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding: 28px; text-align: center;
  background: #F8FAFC; border: 1px dashed var(--line-2); border-radius: var(--radius-lg);
}
.pdp-noimg .micro { color: var(--muted-2); letter-spacing: .1em; text-transform: uppercase; }
.pdp-noimg strong {
  font-family: var(--mono); font-size: 19px; font-weight: 600;
  color: var(--ink); letter-spacing: .02em;
}
.pdp-noimg .body-sm { max-width: 36ch; color: var(--muted); }

/* ============================================================
   DeepSeek 2026-11-01: 产品列表页 —— 平铺/列表切换 + 分面筛选
   ------------------------------------------------------------
   视图切换只切一个属性（.plist 的 data-view），两套 DOM 构建期都已渲染好：
   平铺是大图卡（材质样片满幅），列表是原来那张 5 列表格。
   这样做的代价是产物多约 60KB，换来的是没有 JS 时也能看到完整目录，
   而且不用在滚动时重建 135 个节点。
   ============================================================ */

/* ---------- 工具栏 ---------- */
.plist-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 22px;
}
.plist-fam { flex: 1 1 auto; min-width: 0; }
.plist-tools { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }

/* 漏斗按钮：与分类 chip 同一套视觉语言，展开时压成实心，和选中的 chip 对齐 */
.fbtn {
  height: 34px; padding: 0 14px; display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--line-2); border-radius: 100px; background: #fff;
  font-family: var(--font); font-size: 13px; font-weight: 550; color: #3C4757;
  cursor: pointer; transition: all .15s var(--ease);
}
.fbtn:hover { border-color: var(--ink); color: var(--ink); }
.fbtn[aria-expanded="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.fbtn-ico { width: 15px; height: 15px; display: block; }
.fbtn-ico svg { width: 15px; height: 15px; display: block; }
.fbtn-n {
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 100px;
  background: var(--signal); color: var(--ink);
  font-family: var(--mono); font-size: 11px; font-weight: 700; line-height: 18px;
  text-align: center;
}
.fbtn-n[hidden] { display: none; }

/* 分段开关：截图里的胶囊 + 双图标，选中态是浅灰圆角块 */
.seg {
  display: inline-flex; align-items: center; gap: 2px; padding: 3px;
  border: 1px solid var(--line-2); border-radius: 100px; background: #fff;
}
.seg-btn {
  width: 38px; height: 28px; padding: 0; border: 0; border-radius: 100px;
  background: transparent; color: #6B7686; display: grid; place-items: center;
  cursor: pointer; transition: background .15s, color .15s;
}
.seg-btn svg { width: 16px; height: 16px; display: block; }
.seg-btn:hover { color: var(--ink); }
.seg-btn.is-on { background: var(--paper-3); color: var(--ink); }
.seg-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }

/* ---------- 筛选面板 ---------- */
.fpanel-bd { display: none; }
.fpanel[hidden], .fpanel-bd[hidden] { display: none; }
.fpanel {
  position: relative;
  /* 往上顶 14px：工具栏本来留 22px 常规间距，实测尖角尖端只探出面板上沿约 5px，
     按原间距会和漏斗按钮之间空出 15px 的白，像两个不相干的东西。
     顶掉之后量到的可见间隙约 1px —— 尖角贴着按钮下沿。 */
  margin: -14px 0 20px;
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: #fff; box-shadow: var(--shadow-md);
  padding: 18px 22px 16px;
}
/* 指向工具栏上那颗漏斗按钮的小尖角：面板在下方、按钮在上方，
   不画这个角的话两者看起来是两块互不相干的东西。
   位置由 JS 在展开时按按钮中心算出来（--caret-x），换断点不会飘。 */
.fpanel::before {
  content: ""; position: absolute; top: -8px; left: var(--caret-x, 50%);
  width: 15px; height: 15px; margin-left: -7.5px;
  background: #fff; border-left: 1px solid var(--line); border-top: 1px solid var(--line);
  border-top-left-radius: 4px; transform: rotate(45deg);
}
.fpanel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.fpanel:focus { outline: none; }
.fpanel-headline { min-width: 0; }
.fpanel-title { font-size: 15px; font-weight: 650; color: var(--ink); }
/* 不设 max-width：这段说明本来就该一行读完，硬压 62ch 会折成两行，
   第二行只剩 "groups with AND." 三个词，看着像排版事故。 */
.fpanel-sub {
  display: block; margin-top: 4px; font-size: 12.5px; color: var(--muted);
  line-height: 1.5;
}
/* 关闭按钮去掉后，右上角这个位置留给 Clear all —— 同一只手的位置，
   从"关掉"变成"清空"，不用在面板底部再摆一条操作栏。 */
.fpanel-clear {
  flex: 0 0 auto; height: 30px; padding: 0 13px;
  border: 1px solid var(--line-2); border-radius: 100px; background: #fff;
  font-family: var(--font); font-size: 12.5px; font-weight: 550; color: #3C4757;
  cursor: pointer; transition: border-color .15s, color .15s, opacity .15s;
}
.fpanel-clear:hover:not(:disabled) { border-color: var(--ink); color: var(--ink); }
.fpanel-clear[hidden] { display: none; }

.fpanel-groups {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
  gap: 20px 30px; margin-top: 18px;
}
.fgroup-head h4 { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink); }
.fgroup-head p { margin: 4px 0 0; font-size: 11.5px; color: var(--muted-2); line-height: 1.4; }
.fopts { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 11px; }

/* 选项是 <label> 包一个视觉隐藏的真 checkbox：键盘可聚焦、读屏可读，
   状态由 JS 同步到 .is-on（不依赖 :has，老 Safari 也能用） */
.fopt {
  position: relative; display: inline-flex; align-items: center; gap: 7px;
  height: 30px; padding: 0 11px; border: 1px solid var(--line-2); border-radius: 100px;
  background: #fff; font-size: 12.5px; color: #3C4757; cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
  user-select: none; white-space: nowrap;
}
.fopt input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; }
.fopt:hover { border-color: var(--ink); }
.fopt.is-on { background: var(--ink); border-color: var(--ink); color: #fff; }
.fopt.is-on .fopt-n { opacity: .75; }
.fopt:focus-within { outline: 2px solid var(--ink); outline-offset: 1px; }
.fopt-n { font-family: var(--mono); font-size: 11px; font-style: normal; opacity: .5; }
/* 本条已无结果可选：淡出但仍可读，点不了 */
.fopt[data-disabled="1"] { opacity: .38; }
.fopt[data-disabled="1"]:hover { border-color: var(--line-2); }

/* ---------- 已选条件 + 结果条数 ---------- */
/* 一行两栏：左边已选条件，右边条数。条数原先在面板底部那条操作栏里，
   操作栏删掉后挪到这里 —— 它本来描述的就是"下面的列表有几条"，
   放在列表正上方比藏在浮窗里更合理，浮窗也因此少一行。 */
.plist-status {
  display: flex; align-items: center; gap: 18px;
  margin-bottom: 18px;
}
.plist-count {
  margin-left: auto; flex: 0 0 auto;
  font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums;
}
.plist-count b { color: var(--ink); font-weight: 650; }

.factives { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.factives[hidden] { display: none; }
.factives-lbl { font-size: 12px; color: var(--muted-2); margin-right: 2px; }
.fact {
  display: inline-flex; align-items: center; gap: 6px;
  height: 28px; padding: 0 5px 0 11px; border-radius: 100px;
  background: var(--paper-3); font-size: 12.5px; color: #3C4757;
}
.fact button {
  width: 18px; height: 18px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(7, 11, 18, .08); color: #3C4757; cursor: pointer;
  display: grid; place-items: center; font-size: 13px; line-height: 1;
}
.fact button:hover { background: var(--ink); color: #fff; }
.fact-clear { font-size: 12.5px; color: var(--flare); background: none; border: 0; cursor: pointer; padding: 0 4px; }
.fact-clear:hover { text-decoration: underline; }

/* ---------- 平铺大图 ---------- */
.plist[data-view="grid"] [data-plist-table] { display: none; }
.plist[data-view="list"] .plist-grid { display: none; }

/* 卡片与表格行共用同一个隐藏开关：一次筛选要同时作用于两套 DOM，
   否则从大图切到列表时会看到没被筛掉的旧行。 */
.plist-item.is-hidden { display: none; }

.pgroup + .pgroup { margin-top: 44px; }
.pgroup[hidden] { display: none; }
.pgroup-head {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  padding-bottom: 11px; margin-bottom: 18px; border-bottom: 1px solid var(--line);
}
.pgroup-title { margin: 0; font-size: 18px; font-weight: 650; letter-spacing: -.01em; color: var(--ink); }
.pgroup-n { font-family: var(--mono); font-size: 12px; color: var(--muted-2); }
.pgroup-link { margin-left: auto; font-size: 13px; font-weight: 550; color: var(--flare); }

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

.pcard {
  display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--radius-lg); background: #fff;
  transition: border-color .15s, box-shadow .18s, transform .18s var(--ease);
}
.pcard.is-hidden { display: none; }
.pcard:hover { border-color: var(--line-2); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.pcard-media { display: block; aspect-ratio: 4 / 3; background: var(--paper-2); overflow: hidden; }
.pcard-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s var(--ease); }
.pcard:hover .pcard-media img { transform: scale(1.045); }
.pcard-none {
  display: grid; place-items: center; width: 100%; height: 100%;
  font-size: 11px; color: var(--muted-2); letter-spacing: .06em; text-transform: uppercase;
}
.pcard-body { display: flex; flex-direction: column; gap: 8px; flex: 1; padding: 13px 14px 14px; }
.pcard-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.pcard-model {
  font-family: var(--mono); font-size: 13.5px; font-weight: 600; color: var(--ink);
  letter-spacing: .01em; line-height: 1.35;
  /* 竞品型号名最长 "Nippon Carbide 99800 Series" 这类 28 字符，一行放不下。
     给两行并禁止省略号截断：卡片上认不出型号名，这卡就等于没有标题。 */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: 1.35em; word-break: break-word;
}
.pcard-model:hover { color: var(--flare); }
.pcard-badge {
  flex: 0 0 auto; max-width: 46%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding: 2px 7px; border-radius: 100px; background: var(--paper-3);
  font-size: 10.5px; font-weight: 550; color: #4A5566;
}
.pcard-desc {
  margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--muted);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: 2.9em;
}
.pcard-foot {
  margin-top: auto; display: flex; flex-wrap: wrap; gap: 4px 14px;
  padding-top: 9px; border-top: 1px dashed var(--line);
  font-family: var(--mono); font-size: 11.5px; color: #3C4757;
}
.pcard-foot i { font-family: var(--font); font-style: normal; font-size: 11px; color: var(--muted-2); margin-right: 4px; }
.pcard-foot:empty { border-top: 0; padding-top: 0; }

/* ---------- 无结果 ---------- */
.pempty {
  padding: 64px 24px; text-align: center;
  border: 1px dashed var(--line-2); border-radius: var(--radius-lg); background: var(--paper-2);
}
.pempty[hidden] { display: none; }
.pempty-t { margin: 0; font-size: 16px; font-weight: 620; color: var(--ink); }
.pempty-s { margin: 8px auto 18px; max-width: 46ch; font-size: 13px; color: var(--muted); line-height: 1.55; }

@media (max-width: 1080px) {
  .pgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .plist-bar { gap: 12px; }
  .plist-tools { width: 100%; justify-content: space-between; }
  /* 手机上筛选面板做成底部抽屉：34 个选项内联在正文里会把列表推到第二屏外 */
  .fpanel {
    position: fixed; left: 0; right: 0; bottom: 0;
    /* 要盖住 H5 底部 Tab 栏（z-index 95）和 WhatsApp 浮标（94），
       否则抽屉底部永远点不到。 */
    z-index: 131;
    max-height: 84vh; overflow-y: auto; margin: 0;
    border-radius: 16px 16px 0 0; border-bottom: 0;
    padding: 16px 18px calc(16px + env(safe-area-inset-bottom));
    box-shadow: 0 -18px 50px -18px rgba(9, 16, 28, .34);
  }
  /* 抽屉是从屏幕底部顶出来的，上方没有可指的东西，尖角反而多一块 */
  .fpanel::before { display: none; }
  .fpanel-bd {
    display: block; position: fixed; inset: 0; z-index: 130;
    background: rgba(7, 11, 18, .38);
  }
  .fpanel-bd[hidden] { display: none; }
  /* 只有抽屉形态才锁页面滚动：桌面端面板跟着文档流走，锁了会像页面卡死 */
  body.fpanel-open { overflow: hidden; }
  .fpanel-groups { grid-template-columns: 1fr 1fr; gap: 18px 20px; }
  .plist-status { flex-wrap: wrap; gap: 10px; }
}
@media (max-width: 460px) {
  .fpanel-groups { grid-template-columns: 1fr; }
  .pcard-desc { min-height: 0; }
}