/* ==========================================================================
   NanoBeadMill · Site Styles
   来源：砂磨机独立站_design-tokens.css（唯一色值权威，禁止在此写死颜色）
   结构：header / hero(方案B) / section / card / table / callout / form / footer
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { max-width: 100%; display: block; }

h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -.02em; line-height: 1.2; }
h2 { font-size: 34px; letter-spacing: -.024em; }
h3 { font-size: 21px; }
p  { margin: 0; }
a  { color: var(--accent-dark); text-decoration: none; }
a:hover { text-decoration: underline; }

/* 数字、型号、单位一律等宽 —— 工业精密感的主要来源 */
.num, .mono, code { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

.wrap { width: min(1240px, 100% - 48px); margin-inline: auto; }

/* ── HEADER ─────────────────────────────────────────────── */
.hdr {
  position: sticky; top: 0; z-index: 40;
  background: rgba(244,246,248,.88);
  backdrop-filter: saturate(150%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.hdr-inner { display: flex; align-items: center; gap: 40px; height: 72px; }
.brand { display: flex; align-items: baseline; gap: 9px; font-weight: 700; letter-spacing: -.03em;
         color: var(--ink); font-size: 18px; }
.brand:hover { text-decoration: none; }
.brand .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
              align-self: center; }
.brand small { font-family: var(--font-mono); font-size: 10px; font-weight: 500;
               letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.nav { display: flex; gap: 30px; margin-left: auto; }
.nav a { color: var(--ink); font-size: 15px; font-weight: 500; }
.nav a:hover { color: var(--accent-dark); text-decoration: none; }
.nav a.is-current { color: var(--accent-dark); font-weight: 600; }
.hdr-cta { margin-left: 30px; }

/* ── HERO ────────────────────────────────────────────────────
   三种形态，同一套排版骨架：
     A  .hero--video   整幅背景视频 + 左侧定向渐变（默认，打动力最强）
     B  .hero--specs   左侧文案+表单 / 右侧参数面板（没有合适视频、或论据是数字）
     C  .hero--plain   单栏纯文字（contact / privacy / terms）
   左栏永远放询盘表单，因为访客的第二个问题永远是"多少钱"。 */
.hero { position: relative; min-height: 620px; display: flex; align-items: center;
        overflow: hidden; background: var(--deep); isolation: isolate; }
.hero-inner { position: relative; z-index: 3; width: 100%; padding: 72px 0 96px; }

/* ── A：整幅背景视频 ──
   视频铺满，靠一层定向渐变压暗左 1/3 —— 表单要读得清，机器要露得出来。
   这是全站唯一允许大面积动的地方，所以只给它一个页面（每页一条专属视频）。 */
.hero-video { position: absolute; inset: 0; z-index: 0;
              width: 100%; height: 100%; object-fit: cover;
              /* 视频只负责氛围，别让它抢文案：略微降饱和 + 压暗 */
              filter: saturate(.94) brightness(.94); }
.hero-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  /* 左侧压得够深保住表单，右侧几乎全亮把机器"放"出来 ——
     表单字段自己还有一层半透明底 + 模糊，所以渐变不必压到底。 */
  background:
    linear-gradient(90deg,
      rgba(9,14,17,.92) 0%,
      rgba(9,14,17,.82) 30%,
      rgba(9,14,17,.34) 58%,
      rgba(9,14,17,.05) 100%),
    linear-gradient(180deg,
      rgba(9,14,17,.38) 0%, rgba(9,14,17,0) 24%,
      rgba(9,14,17,0) 70%, rgba(9,14,17,.6) 100%);
}
.hero--video .hero-inner { z-index: 3; }

/* ── B：参数面板 ──
   没有视频的页面不铺纯黑，加一层极淡冷光，避免整块死黑显得廉价。 */
.hero--specs::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 8% 0%,
    rgba(13,125,140,.16) 0%, rgba(13,125,140,0) 58%);
}

/* 单栏骨架（A / C）：文案与表单上下叠，宽度压到 620 */
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr);
             max-width: 620px; row-gap: 6px; align-items: start; }
/* 双栏骨架（B）：文案 / 面板 / 表单 三个独立 grid item，靠区域摆放 ——
   手机端才能重排成 文案 → 参数 → 表单。 */
.hero-grid--split { grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
                    max-width: none; column-gap: 64px; }
.hero-grid--split .hero-copy   { grid-area: 1 / 1 / 2 / 2; }
.hero-grid--split .hero-action { grid-area: 2 / 1 / 3 / 2; }
.hero-grid--split .hero-specs  { grid-area: 1 / 2 / 3 / 3; align-self: center; }

.hero-copy { color: #fff; }
.hero-copy .eyebrow { color: #7fd4de; }
.hero-copy .eyebrow::before { background: #7fd4de; }
.hero-h1 { font-size: 40px; line-height: 1.1; letter-spacing: -.028em; font-weight: 600; color: #fff;
           text-shadow: 0 1px 24px rgba(0,0,0,.35); }
.hero-sub { margin-top: 16px; font-size: 16.5px; line-height: 1.6; color: rgba(255,255,255,.78);
            max-width: 540px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hero-cta .btn-outline { border-color: rgba(255,255,255,.42); color: #fff; background: transparent; }
.hero-cta .btn-outline:hover { border-color: #fff; color: #fff; background: rgba(255,255,255,.06);
                               text-decoration: none; }

/* ── 首屏询盘表单 ──
   4 个字段，两列排。深色/视频底上不用白卡片（会在暗背景里砸出一个洞），
   改用低对比描边 + 半透明填充，任何背景上都读得清。 */
.hero-form { margin-top: 30px; }
.hf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.hf-grid label { display: flex; flex-direction: column; gap: 6px; }
.hf-grid .hf-full { grid-column: 1 / -1; }
.hf-l { font-family: var(--font-mono); font-size: 10.5px; font-weight: 500;
        letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.56); }
.hero-form input, .hero-form select {
  width: 100%; font-family: var(--font-sans); font-size: 14.5px; color: #fff;
  padding: 11px 13px; border-radius: 4px;
  border: 1px solid rgba(255,255,255,.24);
  /* 视频在动，字段底必须够实才读得清，否则文字会被画面"吃"掉。
     底太透会让同一个字段左深右浅（画面亮度不均），看起来像坏掉了。 */
  background: rgba(9,14,17,.8);
  backdrop-filter: blur(3px);
  transition: border-color .12s ease, background .12s ease;
}
.hero-form input::placeholder { color: rgba(255,255,255,.52); }
.hero-form input:hover, .hero-form select:hover { border-color: rgba(255,255,255,.4); }
.hero-form input:focus, .hero-form select:focus {
  outline: 2px solid #7fd4de; outline-offset: 1px; border-color: #7fd4de;
  background: rgba(9,14,17,.72);
}
.hero-form select { appearance: none; -webkit-appearance: none; padding-right: 34px;
  background-image: linear-gradient(45deg, transparent 50%, rgba(255,255,255,.6) 50%),
                    linear-gradient(135deg, rgba(255,255,255,.6) 50%, transparent 50%);
  background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
  background-color: rgba(9,14,17,.8); }
.hero-form select option { background: #16202a; color: #fff; }
/* 参数面板版没有视频垫底，字段底可以收回到很轻的一层 —— 
   保持与面板同一套"低对比描边"语言，不要像视频版那么实。
   只改 background-color：用 background 简写会把 select 的自绘箭头一起重置掉。 */
.hero--specs .hero-form input,
.hero--specs .hero-form select { background-color: rgba(255,255,255,.05); backdrop-filter: none; }
.hero--specs .hero-form input:focus,
.hero--specs .hero-form select:focus { background-color: rgba(255,255,255,.09); }
.hf-submit { width: 100%; justify-content: center; margin-top: 14px; }
.hf-arrow { margin-left: 6px; transition: transform .15s ease; }
.hf-submit:hover .hf-arrow { transform: translateX(3px); }
.hf-note { margin-top: 11px; font-family: var(--font-mono); font-size: 11px;
           color: rgba(255,255,255,.52); letter-spacing: .01em; }
.hf-alt { display: inline-block; margin-top: 16px; font-size: 13.5px;
          color: rgba(255,255,255,.68); border-bottom: 1px solid rgba(255,255,255,.24); }
.hf-alt:hover { color: #fff; text-decoration: none; border-color: #fff; }

/* ── B：参数面板 ──
   等宽字体排数字，是这个站"精密感"最便宜的来源。 */
.hero-specs { border: 1px solid rgba(255,255,255,.17);
  border-top: 2px solid rgba(127,212,222,.65); border-radius: 8px;
  background: rgba(255,255,255,.035); backdrop-filter: blur(2px); }
.hs-row { display: flex; align-items: baseline; justify-content: space-between; gap: 18px;
  padding: 16px 20px; border-bottom: 1px solid rgba(255,255,255,.09); }
.hs-row:last-child { border-bottom: 0; }
.hs-k { font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; letter-spacing: .13em;
  text-transform: uppercase; color: rgba(255,255,255,.5); white-space: nowrap; }
.hs-v { font-family: var(--font-mono); font-size: 16px; font-weight: 600; color: #fff;
  font-variant-numeric: tabular-nums; text-align: right; letter-spacing: -.01em; }

.hero-foot { position: absolute; left: 0; bottom: 22px; z-index: 3; width: 100%;
             font-family: var(--font-mono); font-size: 11.5px;
             color: rgba(255,255,255,.66); }
.hero-foot .wrap { display: flex; gap: 26px; flex-wrap: wrap; }
/* 底部小字与上方内容之间留一条极淡的分隔 */
.hero-foot::before { content: ""; position: absolute; left: 0; right: 0; top: -18px;
                     height: 1px; background: rgba(255,255,255,.09); }

/* ── C：没有素材的短页 ── */
.hero--plain { min-height: 400px; }
.hero--plain .hero-h1 { font-size: clamp(28px, 3.6vw, 42px); }

/* ── D：单品详情首屏 ──
   系列视频拍的是系列，访客要看的偏偏是"这一台长什么样"。
   左侧文案+表单，右侧白底实拍卡片 —— 棚拍图本身就是白底，
   放进白卡里等于无边界，机器像直接摆在版面上。 */
.hero--product::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 8% 0%,
    rgba(13,125,140,.18) 0%, rgba(13,125,140,0) 58%);
}
.hero-media {
  grid-area: 1 / 2 / 3 / 3; align-self: center;
  margin: 0; padding: 14px 14px 0;
  background: #fff; border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--r-card);
  box-shadow: 0 34px 80px rgba(0,0,0,.42);
}
/* 必须 height:auto —— HTML 的 width/height 属性会变成固定高度，
   aspect-ratio 会被无视，机器被拉成竖条。 */
.hero-media img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: contain;
                  border: 0; border-radius: 0; background: #fff; }
.hero-media figcaption {
  margin: 0; padding: 10px 2px 12px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em;
  color: var(--muted); text-align: center;
}

/* 数字标签：H1 只放关键词，参数拆成等宽小标签挂在下面 */
.hero-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.hero-tags span {
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 500; letter-spacing: .05em;
  color: #bfeef3; padding: 5px 9px; border-radius: 3px;
  border: 1px solid rgba(127,212,222,.4); background: rgba(127,212,222,.1);
}

/* ── SECTION ─────────────────────────────────────────────── */
.section { padding: var(--sp-section) 0; }
.section + .section { border-top: 1px solid var(--line); }
.section-tight { padding: 64px 0; }
.lead { font-size: 19px; line-height: 1.62; color: var(--muted); max-width: 760px; margin-top: 18px; }
/* 浅底上的按钮行。不要复用 .hero-cta —— 那条规则把 outline 按钮刷成白字+白底，
   放到 --paper 上等于隐形（实测：产品页"Ask a process question"完全看不见）。 */
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.section > .wrap > h2 + .lead { margin-top: 16px; }
.prose { max-width: 760px; }
.prose > * + * { margin-top: 22px; }
.prose h2 { font-size: 30px; margin-top: 0; }
.prose h3 { margin-top: 44px; }
.prose ul, .prose ol { padding-left: 22px; }
.prose li + li { margin-top: 10px; }
.prose strong { font-weight: 600; }

/* Markdown 生成的段落（不套 .prose 容器，避免把宽表压到 760px）。
   全局重置把 h1–h4 和 p 的 margin 都清成了 0，节奏在这里补回来。 */
.sec-md > .wrap > * + * { margin-top: 22px; }
.sec-md > .wrap > h2 { font-size: 30px; }
.sec-md > .wrap > h2:not(:first-child) { margin-top: 46px; }
.sec-md > .wrap > h3:not(:first-child) { margin-top: 34px; }
.sec-md > .wrap > ul, .sec-md > .wrap > ol { padding-left: 22px; }
.sec-md > .wrap > ul > li + li,
.sec-md > .wrap > ol > li + li { margin-top: 10px; }
.sec-md > .wrap > .lead { margin-top: 18px; }

/* ── GRID / CARDS ────────────────────────────────────────── */
.grid { display: grid; gap: var(--sp-gap); }
.g2 { grid-template-columns: repeat(2, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }
.grid + .grid, .grid + .note, .note + .grid { margin-top: 20px; }

.tile { display: flex; flex-direction: column; gap: 10px; padding: 28px;
        background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card);
        transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
a.tile:hover { text-decoration: none; border-color: var(--accent); box-shadow: var(--shadow);
               transform: translateY(-2px); }
.tile h3 { font-size: 19px; }
.tile p { color: var(--muted); font-size: 15.5px; line-height: 1.6; }
.tile .kicker { font-family: var(--font-mono); font-size: 11.5px; font-weight: 500;
                color: var(--accent-dark); letter-spacing: .04em; }
.tile .more { margin-top: auto; padding-top: 14px; font-size: 14.5px; font-weight: 600;
              color: var(--accent-dark); }

/* 情境入口（首页第二屏）——先接住问题，再给选项 */
.pathways { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-gap); }
.pathway { position: relative; display: block; padding: 30px 26px 26px; background: var(--surface);
           border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden;
           transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.pathway:hover { text-decoration: none; border-color: var(--accent); box-shadow: var(--shadow);
                 transform: translateY(-2px); }
.pathway .idx { font-family: var(--font-mono); font-size: 12px; color: var(--accent-dark);
                letter-spacing: .1em; }
.pathway h3 { margin-top: 14px; font-size: 19px; }
.pathway p { margin-top: 10px; color: var(--muted); font-size: 15px; line-height: 1.58; }
.pathway .go { display: block; margin-top: 18px; font-size: 14.5px; font-weight: 600;
               color: var(--accent-dark); }

/* ── PRODUCT CARD（带实拍/产品图的分类卡）───────────────── */
.pgrid { gap: var(--sp-gap); }
.pcard { display: flex; flex-direction: column; overflow: hidden;
         background: var(--surface); border: 1px solid var(--line);
         border-radius: var(--r-card);
         transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.pcard:hover { text-decoration: none; border-color: var(--accent);
               box-shadow: var(--shadow); transform: translateY(-2px); }
/* height:auto 不能省。HTML 的 width="…" height="…" 属性会变成 CSS 的固定高度，
   aspect-ratio 就会被无视，图被拉成竖长条。显式 height:auto 才能让 4:3 生效。 */
.pcard img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover;
             background: var(--surface-2); }
.pcard-b { display: flex; flex-direction: column; gap: 10px; padding: 20px 22px 22px; }
.pcard-b .kicker { font-family: var(--font-mono); font-size: 11.5px; font-weight: 500;
                   color: var(--accent-dark); letter-spacing: .04em; }
.pcard-b h3 { font-size: 18px; line-height: 1.3; }
.pcard-b p { color: var(--muted); font-size: 15px; line-height: 1.55; }
.pcard-b .judge { font-size: 14.5px; line-height: 1.5; color: var(--accent-dark);
                  background: var(--accent-soft); padding: 10px 12px; border-radius: var(--r-chip); }
.pcard-b .judge strong { font-weight: 600; }
.pcard-subs { display: flex; flex-wrap: wrap; gap: 6px; }
.pcard-b .more { margin-top: auto; padding-top: 12px; font-size: 14.5px; font-weight: 600;
                 color: var(--accent-dark); }

/* ── MODEL STRIP（首页：全部机型，每张都是实拍）─────────────── */
/* 一行两个。再多的列数会让机器变成缩略图，工业买家要看的是机身、机封、转子，
   不是图标。分组标题改成通栏分隔线，不再占左侧 84px 的竖条。 */
.model-list { display: flex; flex-direction: column; gap: 40px; }
.model-group { display: block; }
.model-group-h { margin: 0 0 18px; padding: 0 0 10px; border-bottom: 1px solid var(--line);
                 font-family: var(--font-mono); font-size: 12px; font-weight: 500;
                 letter-spacing: .1em; color: var(--accent-dark); }
.model-row { display: grid; gap: 22px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mcard { display: flex; flex-direction: column; overflow: hidden; background: var(--surface);
         border: 1px solid var(--line); border-radius: var(--r-card);
         transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.mcard:hover { text-decoration: none; border-color: var(--accent);
               box-shadow: var(--shadow); transform: translateY(-2px); }
.mcard img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover;
             background: var(--surface-2); }
.mcard-b { display: flex; flex-direction: column; gap: 7px; padding: 17px 20px 20px; }
.mcard-b .kicker { font-family: var(--font-mono); font-size: 12px; font-weight: 500;
                   color: var(--accent-dark); letter-spacing: .06em; }
.mcard-b h4 { margin: 0; font-size: 18px; font-weight: 600; line-height: 1.3; }
.mcard-b p { margin: 0; color: var(--muted); font-size: 14.5px; line-height: 1.55; }
@media (max-width: 760px) {
  /* 手机端不竖排大卡。23 个机型 × 400px = 9500px 滚动，约 24 屏，没人翻得完。
     改成「左图右文」紧凑行：116px 方图 + 两行字，单个高度降到约 140px。 */
  .model-list { gap: 26px; }
  .model-row { grid-template-columns: 1fr; gap: 10px; }
  .mcard { flex-direction: row; align-items: center; gap: 14px; padding: 10px; }
  .mcard img { width: 116px; flex: 0 0 116px; aspect-ratio: 1 / 1; border-radius: 6px; }
  .mcard-b { padding: 0; gap: 4px; flex: 1 1 auto; min-width: 0; }
  .mcard-b .kicker { font-size: 11px; }
  .mcard-b h4 { font-size: 15.5px; line-height: 1.25; }
  .mcard-b p { font-size: 13px; line-height: 1.45; }
}

/* ── TABLE ───────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-card);
              background: var(--surface); }
table { width: 100%; border-collapse: collapse; font-size: 15px; }
thead th { white-space: nowrap; }
tbody td { color: var(--ink); }
.table-wrap + .note, .note + .table-wrap { margin-top: 16px; }
.note { font-size: 14px; color: var(--muted); line-height: 1.65; }

/* ── 手机端把宽表折成卡片 ──────────────────────────────────
   三列全是句子的表，390px 下第一列就吃掉一半宽度，剩下两列要横向拖动才能读 ——
   没人会拖。thead 藏掉，每个 td 用 data-l 自带的标签立起来。
   纯 CSS，不用复制一份 DOM（复制会产生重复内容）。 */
@media (max-width: 760px) {
  .tbl-cards { border: 0; background: none; overflow: visible; }
  .tbl-cards table, .tbl-cards tbody, .tbl-cards tr, .tbl-cards td { display: block; width: 100%; }
  .tbl-cards thead { display: none; }
  .tbl-cards tr { padding: 18px 20px; margin-bottom: 12px;
                  background: var(--surface); border: 1px solid var(--line);
                  border-radius: var(--r-card); }
  .tbl-cards td { padding: 0; border: 0; white-space: normal; }
  .tbl-cards td + td { margin-top: 12px; }
  .tbl-cards td::before { content: attr(data-l); display: block; margin-bottom: 4px;
    font-family: var(--font-mono); font-size: 10px; font-weight: 500; letter-spacing: .12em;
    text-transform: uppercase; color: var(--muted); }
  .tbl-cards td.key { font-family: var(--font-sans); font-size: 17px; font-weight: 600;
                      color: var(--ink); white-space: normal; }
  .tbl-cards td.key::before { display: none; }
  .tbl-cards tbody tr:hover { background: var(--surface); }
}

/* ── CALLOUT ─────────────────────────────────────────────── */
.callout { margin-top: 26px; }
.callout p + p { margin-top: 12px; }
.callout-warn { background: var(--signal-soft); border-left-color: var(--signal); }
.callout-warn strong { color: var(--signal-dark); }

/* ── 论据卡（数字证据条）────────────────────────────────── */
.facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-gap); margin-top: 32px; }
.fact { padding: 26px 24px; background: var(--surface); border: 1px solid var(--line);
        border-radius: var(--r-card); }
.fact .n { font-family: var(--font-mono); font-size: 30px; font-weight: 600; letter-spacing: -.03em;
           color: var(--accent-dark); line-height: 1.1; }
.fact .t { margin-top: 10px; font-size: 14.5px; color: var(--muted); line-height: 1.5; }

/* ── 流程步骤 ────────────────────────────────────────────── */
.steps { counter-reset: s; margin-top: 32px; display: grid; gap: 0; }
.step { display: grid; grid-template-columns: 56px 1fr; gap: 20px; padding: 22px 0;
        border-top: 1px solid var(--line); }
.step:last-child { border-bottom: 1px solid var(--line); }
.step::before { counter-increment: s; content: counter(s, decimal-leading-zero);
                font-family: var(--font-mono); font-size: 15px; color: var(--accent-dark);
                letter-spacing: .06em; padding-top: 3px; }
.step h3 { font-size: 18px; }
.step p { margin-top: 8px; color: var(--muted); font-size: 15.5px; }

/* ── FAB 卡（Feature / Advantage / Benefit）───────────────────
   三行必须分开写。合成一段话就变成形容词，买家读到的只有"好"。
   dt 用等宽小字压成标签，让买家一眼扫完三条再决定要不要细读。 */
.fab-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-gap);
            margin-top: 36px; }
.fab { display: flex; flex-direction: column; padding: 26px 26px 22px;
       background: var(--surface); border: 1px solid var(--line);
       border-radius: var(--r-card); }
.fab-k { font-family: var(--font-mono); font-size: 11.5px; font-weight: 500;
         letter-spacing: .1em; color: var(--accent-dark); }
.fab h3 { margin-top: 10px; font-size: 20px; }
.fab dl { margin: 16px 0 0; }
.fab .row { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 14px;
            padding: 12px 0; border-top: 1px solid var(--line); }
.fab dt { font-family: var(--font-mono); font-size: 10.5px; font-weight: 500;
          letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
          padding-top: 3px; }
.fab dd { margin: 0; font-size: 15px; line-height: 1.58; color: var(--ink); }

/* ── FAQ ────────────────────────────────────────────────────── */
.faq { max-width: 860px; margin-top: 28px; }
.faq .qa { padding: 22px 0; border-top: 1px solid var(--line); }
.faq .qa:last-child { border-bottom: 1px solid var(--line); }
.faq h3 { font-size: 17.5px; font-weight: 600; letter-spacing: -.01em; }
.faq p { margin-top: 9px; color: var(--muted); font-size: 15.5px; line-height: 1.62; }

/* ── FIGURE ──────────────────────────────────────────────── */
figure { margin: 0; }
figure img, figure svg { width: 100%; height: auto; border: 1px solid var(--line);
                         border-radius: var(--r-card); background: var(--surface); }
figcaption { margin-top: 12px; font-size: 14px; color: var(--muted); }
.fig-inline { width: 100%; }

/* ── FORM ────────────────────────────────────────────────── */
.form-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card);
             padding: 34px; }
/* 提交失败的兜底面板：把访客填的内容摊开，能复制、能看到邮箱。
   不做自动 mailto 跳转 —— 没配邮件客户端的人会撞上「添加账户」弹窗，等于走进了死胡同。 */
.fallback h3 { margin-bottom: 10px; }
.fallback p { margin-top: 0; color: var(--muted); max-width: 640px; }
.fallback-body {
  margin-top: 16px; padding: 16px 18px; background: var(--surface-2);
  border: 1px solid var(--line); border-radius: var(--r-btn);
  font-family: var(--font-mono); font-size: 13.5px; line-height: 1.7; color: var(--ink);
  white-space: pre-wrap; word-break: break-word; max-height: 260px; overflow: auto;
}
.fallback .fine { margin-top: 14px; font-size: 13px; color: var(--muted); }
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field.full { grid-column: 1 / -1; }
label { font-size: 13.5px; font-weight: 600; color: var(--ink); }
label .req { color: var(--signal); font-family: var(--font-mono); }
.req-note { font-size: 12.5px; color: var(--muted); font-weight: 400; }
input, select, textarea {
  font-family: var(--font-sans); font-size: 15.5px; color: var(--ink);
  padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: var(--r-btn);
  background: var(--surface); width: 100%;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px;
                                            border-color: var(--accent); }
textarea { min-height: 110px; resize: vertical; }
.form-actions { margin-top: 24px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.form-actions .fine { font-size: 13.5px; color: var(--muted); }
.form-note { margin-top: 18px; font-size: 13.5px; color: var(--muted); }
/* 从首屏表单跳过来时的提示条：告诉访客"信息带过来了"，不用怀疑自己填过没填 */
.form-prefill { margin: 26px 0 -8px; padding: 11px 14px; border-radius: var(--r-btn);
  font-size: 13.5px; color: var(--accent-dark); background: var(--accent-soft);
  border: 1px solid rgba(13,125,140,.24); }

/* ── CTA BAND ────────────────────────────────────────────── */
.band-deep { padding: var(--sp-section) 0; }
.band-deep h2 { font-size: 36px; max-width: 720px; }
.band-deep p { margin-top: 18px; max-width: 640px; font-size: 17.5px; }
.band-deep .hero-cta { margin-top: 30px; }
.band-deep .btn-outline { border-color: var(--line-deep); color: var(--on-deep); background: transparent; }
.band-deep .btn-outline:hover { border-color: var(--on-deep-mut); color: #fff; }

/* ── FOOTER ──────────────────────────────────────────────── */
.ftr { background: var(--deep); color: var(--on-deep); padding: 64px 0 32px; }
/* 四列：品牌 + Equipment + Solutions + Company。
   原来是 3 列，FOOTER["cols"] 却有 3 组 —— 加上品牌共 4 个格子，
   第四组（Company）每次都被挤到第二行、压在品牌下面。 */
.ftr-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 44px; }
.ftr h4 { font-size: 12px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
          color: var(--on-deep-mut); margin-bottom: 16px; }
.ftr ul { list-style: none; margin: 0; padding: 0; }
.ftr li + li { margin-top: 10px; }
.ftr a { color: var(--on-deep); font-size: 15px; }
.ftr a:hover { color: #fff; }
.ftr .brand-line { font-size: 15.5px; color: var(--on-deep); line-height: 1.7; }
.ftr .entity { margin-top: 20px; font-size: 13px; color: var(--on-deep-mut); line-height: 1.7; }
.ftr-bottom { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line-deep);
              display: flex; gap: 20px; flex-wrap: wrap; justify-content: space-between;
              font-size: 13px; color: var(--on-deep-mut); }
.ftr-bottom nav { display: flex; gap: 20px; }
.ftr-bottom a { font-size: 13px; color: var(--on-deep-mut); }

/* ── 待确认项占位符（上线前必须全部替换）─────────────────── */
.ph { font-family: var(--font-mono); font-size: .92em; padding: 1px 5px; border-radius: 3px;
      background: var(--signal-soft); color: var(--signal-dark);
      border: 1px dashed rgba(201,69,31,.45); white-space: nowrap; }
.ph-dim { opacity: .55; }
/* 上线版：未确认的数据渲染成破折号，不显示高亮方括号 */
.na { color: var(--muted); font-family: var(--font-mono); }
.devp { position: fixed; left: 16px; bottom: 16px; z-index: 90;
        display: inline-flex; align-items: center; gap: 9px;
        padding: 10px 14px; border-radius: 999px; border: 1px solid var(--line-strong);
        background: var(--surface); box-shadow: var(--shadow);
        font-family: var(--font-mono); font-size: 12.5px; color: var(--muted); cursor: pointer; }
.devp .n { color: var(--signal-dark); font-weight: 600; }
.devp:hover { color: var(--ink); }

/* ── RESPONSIVE ──────────────────────────────────────────── */
@media (max-width: 1040px) {
  .hero-h1 { font-size: 36px; }
  /* 平板：双栏各让一点，但表单不能窄于 260px 否则 select 文字会截断 */
  .hero-grid--split { grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr); column-gap: 40px; }
  .hero-sub { font-size: 15.5px; }
  .hf-grid { gap: 10px 12px; }
  .hs-row { padding: 13px 16px; }
  .hs-v { font-size: 14.5px; }
  .g3, .g4, .pathways, .facts { grid-template-columns: repeat(2, 1fr); }
  .hdr-inner { gap: 24px; }
  .nav { gap: 20px; }
  /* 产品页的实拍卡在平板上会挤掉文案宽度，让出一点 */
  .hero-media { padding: 10px 10px 0; }
  .fab-grid { grid-template-columns: 1fr; gap: 14px; }
  .fab { padding: 22px 20px 18px; }
}
@media (max-width: 760px) {
  :root { --sp-section: var(--sp-section-m); }
  .wrap { width: min(1240px, 100% - 32px); }
  /* 首屏底部那条「CE compliant / Run-tested ...」原来是绝对定位，手机上正文变高
     会压到 chips 上（实测和 D90<100nm 那排重叠）。窄屏改成常规流式排版。 */
  .hero { min-height: 0; display: block; }
  .hero-inner { padding: 56px 0 26px; }
  .hero-foot { position: static; padding: 16px 0 24px;
               border-top: 1px solid rgba(255, 255, 255, .14); }
  .hero-foot .wrap { flex-direction: column; gap: 6px; }
  /* 占位符默认 nowrap（短标记不拆行更好看），但长占位符会顶破 390px 视口。
     窄屏一律允许换行 + 强行断词。实测 /about/ 曾溢出到 1098px。 */
  .ph { white-space: normal; overflow-wrap: anywhere; }
  .hdr-inner { height: 62px; gap: 12px; }
  .nav { display: none; }
  .hdr-cta { margin-left: auto; }
  /* 390px 下品牌副标题会折成两行、CTA 也会折行，顶栏看起来像坏了。
     副标题直接藏起来（品牌名本身已经够辨识），按钮强制单行并收窄内边距。 */
  .brand small { display: none; }
  .hdr-cta .btn { white-space: nowrap; padding: 10px 14px; font-size: 13.5px; }
  /* 首屏：单栏堆叠。
     形态 A（背景视频）没有右侧块，本来就是单栏，什么都不用改。
     形态 B（参数面板）手机端顺序改成 文案 → 参数 → 表单 ——
     先看到"这机器能干什么"，再被要联系方式；顺序反了等于让人先交钱后看货。 */
  .hero-grid { max-width: none; }
  /* 手机首屏是竖的，16:9 的画面 cover 进去只剩一条极窄的切片，机器完全读不出来。
     把取景框压到机器主体那一段，再用一层近乎垂直的暗纱盖住正文区 ——
     画面退成质感，文字保住可读。 */
  .hero-video { object-position: 50% 34%; }
  .hero-scrim {
    background: linear-gradient(180deg,
      rgba(9,14,17,.55) 0%, rgba(9,14,17,.86) 42%,
      rgba(9,14,17,.94) 100%);
  }
  .hero-grid--split { display: flex; flex-direction: column; gap: 26px; }
  .hero-grid--split .hero-copy,
  .hero-grid--split .hero-action,
  .hero-grid--split .hero-specs { grid-area: auto / auto / auto / auto; max-width: none; }
  .hero-grid--split .hero-copy { order: 1; }
  .hero-grid--split .hero-specs { order: 2; }
  .hero-grid--split .hero-action { order: 3; }
  /* 产品页手机端：文案 → 实拍 → 表单。先看机器再看价格，顺序反了没人填。 */
  .hero-media { order: 2; grid-area: auto / auto / auto / auto; padding: 8px 8px 0;
                box-shadow: 0 20px 46px rgba(0,0,0,.4); }
  .hero--product .hero-action { order: 3; }
  .hero-tags { gap: 6px; margin-top: 14px; }
  .hero-tags span { font-size: 10.5px; padding: 4px 7px; }
  .hero-inner { padding: 56px 0 26px; }
  .hero-h1 { font-size: 32px; }
  .hero-sub { font-size: 16px; margin-top: 16px; }
  .hero-cta { margin-top: 24px; }
  /* 两个下拉并排时宽不到 200px，选项文字直接被截断（"Under 5 L/h (lab /"）。
     560 以下一律单列。 */
  .hf-grid { grid-template-columns: 1fr; gap: 12px; }
  .hero-form { margin-top: 0; }
  .hero--plain { min-height: 0; }
  h2 { font-size: 27px; }
  .prose h2 { font-size: 25px; }
  .band-deep h2 { font-size: 27px; }
  .g2, .g3, .g4, .pathways, .facts, .ftr-grid, .form-grid { grid-template-columns: 1fr; }
  /* FAB 卡在 390px 下左边 84px 的标签列会把正文挤成一行四五个词，改成标签上、正文下 */
  .fab-grid { grid-template-columns: 1fr; gap: 14px; }
  .fab { padding: 22px 20px 18px; }
  .fab .row { grid-template-columns: 1fr; gap: 4px; padding: 12px 0; }
  .fab dt { padding-top: 0; }
  /* 7 张分类卡竖排要 4300px 滚动，整页被拉到 19000px。改成左图右文的紧凑行，
     与 .mcard 在手机端的处理一致。只加在带 --rows 的网格上（产品页），
     首页/设备页的大图卡不动。 */
  .pgrid--rows { gap: 12px; }
  .pgrid--rows .pcard { flex-direction: row; align-items: flex-start; gap: 14px; padding: 12px; }
  .pgrid--rows .pcard img { width: 104px; flex: 0 0 104px; aspect-ratio: 1 / 1; border-radius: 6px; }
  .pgrid--rows .pcard-b { padding: 0; gap: 5px; min-width: 0; }
  .pgrid--rows .pcard-b h3 { font-size: 15.5px; line-height: 1.3; }
  .pgrid--rows .pcard-b p { font-size: 13px; line-height: 1.45; }
  .pgrid--rows .pcard-b .judge { font-size: 12.5px; padding: 8px 10px; }
  .pgrid--rows .pcard-subs,
  .pgrid--rows .pcard-b .more { display: none; }
  .ftr-grid { gap: 32px; }
  .step { grid-template-columns: 40px 1fr; gap: 14px; }
  .form-card { padding: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}