/* ============================================================
   HMI 软硬件销售 · 触摸屏页面
     services/hardware.html   拯救 HMI，也卖触摸屏（首屏巨标 / 出血渲染带 / 三张理由卡 / 全包三步 / 主推机型）
     products/<slug>.html     每款机型：3D 机身 + 亮点 + 渲染图组 + 规格 + 抵扣设计费
   依赖 aw.css 的 Design Tokens（颜色 / 字阶 / 圆角 / 容器 / 节奏），本文件只定义区块。
   页面由 tools/build-products.py 生成，数据在 tools/products.json。
   ============================================================ */

/* ---------- 销售页首屏：巨标先出，两行各自拆字上浮，第二行延后半拍 ---------- */
.hw-hero { margin-top: 52px; }
.hw-hero__title { margin-top: 2px; }
.hw-hero__line { display: block; }
.hw-hero__line--2 .split__c > i { transition-delay: calc((var(--i) + 5) * 44ms); }
.hw-hero__sub {
  margin-top: 26px;
  max-width: 32em;
  font-size: 18px;
  font-weight: 300;
  line-height: 30px;
  color: var(--mut);
}
.hw-hero__sub b { font-weight: 500; color: var(--ink); }
.hw-hero__acts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

/* ---------- 图片槽位（进场揭示 + 指针聚光），与案例页 .cs-slot 同一套手感 ---------- */
.hw-media {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-media);
  background: #e6e7e9;
  isolation: isolate;
}
.hw-media > picture,
.hw-media > picture > img,
.hw-media > img,
.hw-media > svg { display: block; width: 100%; height: 100%; }
.hw-media img { object-fit: cover; }
.hw-media--band { aspect-ratio: 21 / 9; }
.hw-media--16x9 { aspect-ratio: 16 / 9; }
.hw-media--4x3 { aspect-ratio: 4 / 3; }
@media (max-width: 760px) { .hw-media--band { aspect-ratio: 16 / 10; } }

.hw-media[data-reveal] {
  opacity: 1;
  transform: none;
  clip-path: inset(6% round 14px);
  transition: clip-path 1.05s var(--ease);
  transition-delay: var(--d, 0s);
}
.hw-media[data-reveal] img { transform: scale(1.06); transition: transform 1.3s var(--ease); transition-delay: var(--d, 0s); }
.hw-media[data-reveal].is-in { clip-path: inset(0 round var(--r-media)); }
.hw-media[data-reveal].is-in img { transform: none; }
.no-js .hw-media[data-reveal] { clip-path: none; }
.no-js .hw-media[data-reveal] img { transform: none; }

.hw-media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(460px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.14), transparent 62%);
  transition: opacity 0.45s var(--ease);
}
.hw-media:hover::after { opacity: 1; }

.hw-media__tag {
  position: absolute;
  left: 16px;
  bottom: 14px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 11px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: saturate(1.4) blur(3px);
  font-family: var(--mono);
  font-size: 11px;
  line-height: 14px;
  letter-spacing: 0.02em;
  color: var(--ink);
  white-space: nowrap;
}
.hw-media__tag i { width: 5px; height: 5px; border-radius: 1px; background: var(--accent); flex: none; }

.hw-band { margin-top: clamp(44px, 6vw, 84px); }

/* ---------- 三张理由卡：品牌优势 / 抵扣设计费（青柠爆点）/ 全包 ---------- */
.hw-pitch {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap-x);
  margin-top: 44px;
}
.hw-pitch__card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 320px;
  padding: 28px;
  border-radius: var(--r-card);
  background: var(--card);
  box-shadow: inset 0 0 0 0.5px var(--line);
}
.hw-pitch__card--lime {
  background: linear-gradient(150deg, #eef8c4 0%, #dff36a 58%, #d9f24f 100%);
  box-shadow: none;
}
.hw-pitch__n { font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; color: var(--mut-2); }
.hw-pitch__card--lime .hw-pitch__n { color: rgba(34, 34, 34, 0.55); }
.hw-pitch__t {
  font-size: clamp(22px, 1.9vw, 30px);
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.hw-pitch__d { max-width: 24em; font-size: 15px; font-weight: 300; line-height: 25px; color: var(--mut); }
.hw-pitch__card--lime .hw-pitch__d { color: rgba(34, 34, 34, 0.72); }
.hw-pitch__foot { margin-top: auto; padding-top: 18px; font-size: 13px; font-weight: 300; line-height: 20px; color: rgba(34, 34, 34, 0.6); }

.hw-partners { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 18px; }
.hw-partners a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 0.5px var(--line);
  font-size: 13px;
  font-weight: 400;
  line-height: 18px;
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease);
}
.hw-partners a i { width: 5px; height: 5px; border-radius: 1px; background: var(--violet); flex: none; }
.hw-partners a:hover { background: var(--ink); color: #fff; }

@media (max-width: 1100px) { .hw-pitch { grid-template-columns: 1fr; } .hw-pitch__card { min-height: 0; } }

/* ---------- 全包三步：设计 / 实施 / 硬件供应，进场时上沿细线自左向右画出 ---------- */
.hw-flow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-x); }
.hw-step { position: relative; padding-top: 22px; }
.hw-step::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 1px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1s var(--ease);
  transition-delay: calc(var(--d, 0s) + 0.1s);
}
.hw-step.is-in::before { transform: scaleX(1); }
.hw-step:last-child::before { background: var(--violet); }
.no-js .hw-step::before { transform: none; }
.hw-step__n { display: block; font-family: var(--mono); font-size: 13px; letter-spacing: 0.06em; color: var(--mut-2); }
.hw-step__k { display: block; margin-top: 16px; font-size: 13px; font-weight: 400; line-height: 20px; color: var(--mut); }
.hw-step__t { margin-top: 4px; font-size: 24px; font-weight: 600; line-height: 30px; letter-spacing: -0.015em; }
.hw-step__d { margin-top: 10px; max-width: 26em; font-size: 14px; font-weight: 300; line-height: 24px; color: var(--mut); }
@media (max-width: 860px) { .hw-flow { grid-template-columns: 1fr; row-gap: 30px; } }

/* ---------- 主推机型卡：渲染图封面 + 型号 + 一句话 + 参数胶囊 ---------- */
.hw-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-y) var(--gap-x); }
@media (min-width: 1500px) { .hw-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .hw-grid { grid-template-columns: 1fr; } }

.hw-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--r-card);
  background: var(--card);
  box-shadow: inset 0 0 0 0.5px var(--line);
  overflow: hidden;
  transition: transform 0.55s var(--ease), box-shadow 0.55s var(--ease);
}
.hw-card:hover { transform: translateY(-6px); box-shadow: 0 34px 60px -34px rgba(20, 22, 26, 0.35), inset 0 0 0 0.5px var(--line); }
.hw-card__cover { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: #e6e7e9; }
.hw-card__cover img, .hw-card__cover svg { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.hw-card:hover .hw-card__cover img { transform: scale(1.045); }
.hw-card__badge {
  position: absolute;
  left: 16px;
  top: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--accent);
  font-family: var(--mono);
  font-size: 11px;
  line-height: 14px;
  letter-spacing: 0.04em;
  color: var(--ink);
}
.hw-card__body { display: flex; flex-direction: column; gap: 8px; padding: 26px 28px; }
.hw-card__brand { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mut-2); }
.hw-card__model { font-size: clamp(26px, 2.3vw, 36px); font-weight: 600; line-height: 1.1; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.hw-card__tag { font-size: 16px; font-weight: 400; line-height: 24px; color: var(--mut); }
.hw-card__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.hw-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 0.5px solid var(--line);
  font-size: 14px;
  font-weight: 500;
}
.hw-card__foot i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 0.5px var(--line);
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease), transform 0.3s var(--ease);
}
.hw-card__foot i svg { width: 12px; height: 12px; }
.hw-card:hover .hw-card__foot i { background: var(--ink); color: #fff; transform: translateX(3px); }

/* 没有渲染图时的兜底示意（深墨底 + 细网格 + 机身线框），由生成器输出 */
.hw-art { background: #0e1013; }

/* ============================================================
   机型详情页
   ============================================================ */
.pd-top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 36px;
  font-size: 13px;
  font-weight: 300;
  line-height: 20px;
  color: var(--mut);
}
.pd-top a { border-bottom: 1px solid transparent; }
.pd-top a:hover { color: var(--ink); border-bottom-color: var(--line); }
.pd-top i { font-style: normal; color: var(--mut-2); }

.pd-hero {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(24px, 4vw, 72px);
  align-items: center;
  margin-top: clamp(20px, 3vw, 40px);
}
.pd-hero__brand { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mut); }
.pd-hero__model {
  margin-top: 12px;
  font-size: clamp(40px, 5.6vw, 92px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.035em;
  overflow-wrap: anywhere;
}
.pd-hero__tag { margin-top: 20px; font-size: clamp(20px, 1.9vw, 28px); font-weight: 500; line-height: 1.3; letter-spacing: -0.015em; }
.pd-hero__lead { margin-top: 12px; max-width: 30em; font-size: 16px; font-weight: 300; line-height: 28px; color: var(--mut); }
.pd-hero .meta-chips { margin-top: 20px; }
.pd-hero__acts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.pd-hero__note { margin-top: 12px; font-size: 13px; font-weight: 300; color: var(--mut-2); }
.pd-hero__note a { border-bottom: 1px solid var(--line); }
.pd-hero__note a:hover { color: var(--ink); }
@media (max-width: 1000px) { .pd-hero { grid-template-columns: 1fr; } }

/* 大数字行：上沿发丝线，每格进场画出下方细线，末格走紫罗兰 */
.pd-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gap-x);
  margin-top: clamp(40px, 5vw, 72px);
  padding-top: 26px;
  border-top: 0.5px solid var(--line);
}
.pd-stat { position: relative; padding-bottom: 14px; }
.pd-stat::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.9s var(--ease);
  transition-delay: calc(var(--d, 0s) + 0.1s);
}
.pd-stat.is-in::after { transform: scaleX(1); }
.pd-stat:last-child::after { background: var(--violet); }
.no-js .pd-stat::after { transform: none; }
.pd-stat > b {
  display: block;
  font-size: clamp(28px, 3vw, 46px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.pd-stat > b i { font-style: normal; font-size: 0.5em; font-weight: 500; margin-left: 0.14em; color: var(--violet); }
.pd-stat > span { display: block; margin-top: 8px; max-width: 22ch; font-size: 13px; font-weight: 300; line-height: 20px; color: var(--mut); }
@media (max-width: 760px) { .pd-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 22px; } }

/* 亮点四卡：第一张走紫罗兰渐变（一处爆点），其余白卡 */
.pd-hl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap-x); }
.pd-hl__card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 250px;
  padding: 26px;
  border-radius: var(--r-card);
  background: var(--card);
  box-shadow: inset 0 0 0 0.5px var(--line);
}
.pd-hl__card:first-child { background: linear-gradient(150deg, #e7e4ff 0%, #f3e9ff 46%, #ffeef4 100%); box-shadow: none; }
.pd-hl__n { font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; color: var(--mut-2); }
.pd-hl__t { font-size: 22px; font-weight: 600; line-height: 1.24; letter-spacing: -0.015em; text-wrap: balance; }
.pd-hl__d { font-size: 14px; font-weight: 300; line-height: 24px; color: var(--mut); }
@media (max-width: 1200px) { .pd-hl { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .pd-hl { grid-template-columns: 1fr; } .pd-hl__card { min-height: 0; } }

/* 渲染图组：一张 16:9 场景图 + 两张 4:3（棚拍 / 侧面细节） */
.pd-gallery { display: grid; gap: var(--gap-y) var(--gap-x); }
.pd-gallery__duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-y) var(--gap-x); }
.pd-fig { margin: 0; }
.pd-fig figcaption { margin-top: 12px; font-size: 13px; font-weight: 300; line-height: 20px; color: var(--mut); }
.pd-fig figcaption b { margin-right: 8px; font-weight: 500; color: var(--ink); }
@media (max-width: 760px) { .pd-gallery__duo { grid-template-columns: 1fr; } }

/* 规格表：分组，两栏流排，组头墨线、行间发丝线 */
.pd-spec { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(24px, 4vw, 64px); }
.pd-spec__group { padding: 22px 0 10px; border-top: 1px solid var(--ink); }
.pd-spec__group h3 { font-family: var(--mono); font-size: 12px; font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mut); }
.pd-spec__rows { margin-top: 10px; }
.pd-spec__row {
  display: grid;
  grid-template-columns: minmax(96px, 30%) minmax(0, 1fr);
  gap: 16px;
  padding: 9px 0;
  border-top: 0.5px solid var(--line);
  font-size: 14px;
  line-height: 22px;
}
.pd-spec__row:first-child { border-top: 0; }
.pd-spec__row dt { font-weight: 300; color: var(--mut); }
.pd-spec__row dd { font-weight: 400; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.pd-spec__note { margin-top: 28px; font-size: 13px; font-weight: 300; line-height: 20px; color: var(--mut); }
.pd-spec__note a { border-bottom: 1px solid var(--line); }
.pd-spec__note a:hover { color: var(--ink); }
@media (max-width: 860px) { .pd-spec { grid-template-columns: 1fr; } }

/* 抵扣设计费：青柠大卡 */
.pd-offer {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: var(--gap-x);
  align-items: center;
  min-height: 380px;
  padding: 44px;
  border-radius: var(--r-card);
  background: linear-gradient(150deg, #eef8c4 0%, #dff36a 58%, #d9f24f 100%);
  overflow: hidden;
}
.pd-offer__k { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(34, 34, 34, 0.55); }
.pd-offer h2 { margin-top: 14px; max-width: 14em; }
.pd-offer p { margin-top: 14px; max-width: 30em; font-size: 15px; font-weight: 300; line-height: 26px; color: rgba(34, 34, 34, 0.72); }
.pd-offer__acts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.pd-offer__art { position: relative; aspect-ratio: 4 / 3; border-radius: var(--r-ui); overflow: hidden; background: rgba(255, 255, 255, 0.5); }
.pd-offer__art img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) { .pd-offer { grid-template-columns: 1fr; padding: 28px; } }

/* 其他主推机型：一行一款 */
.pd-more { border-top: 0.5px solid var(--line); }
.pd-more__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: clamp(24px, 3vw, 40px) 0;
  border-bottom: 0.5px solid var(--line);
}
.pd-more__row small { display: block; font-size: 13px; font-weight: 300; color: var(--mut); }
.pd-more__row strong { display: block; margin-top: 6px; font-size: clamp(22px, 2.6vw, 38px); font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; }
.pd-more__row em { display: block; margin-top: 6px; font-style: normal; font-size: 14px; font-weight: 300; color: var(--mut); }
.pd-more__thumb { width: 180px; aspect-ratio: 4 / 3; flex: none; border-radius: var(--r-media); overflow: hidden; background: #e6e7e9; }
.pd-more__thumb img, .pd-more__thumb svg { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.pd-more__row:hover .pd-more__thumb img { transform: scale(1.05); }
@media (max-width: 620px) { .pd-more__thumb { width: 108px; } }

/* ============================================================
   3D 机身 · 纯 CSS 六面体，按真实毫米尺寸建模
     --mm  1 毫米对应的像素，由 hardware.js 按舞台宽度写入
     --w / --h / --d  外形尺寸  · --sw / --sh 显示区域 · --r 圆角 · --vesa 支架孔距（均为毫米）
     --rx / --ry 当前姿态 · --gx 玻璃反光位置 · --sx / --so 地面投影偏移与浓度
   六个面各自 backface-visibility: hidden，转到背面时自然只剩背板与侧壁。
   ============================================================ */
.dev {
  --mm: 1.6px;
  --rx: 9deg;
  --ry: -24deg;
  --gx: 30%;
  --sx: 0px;
  --so: 0.5;
  position: relative;
}
.dev__stage {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-card);
  background:
    radial-gradient(58% 52% at 50% 56%, #ffffff 0%, rgba(255, 255, 255, 0) 100%),
    linear-gradient(rgba(34, 34, 34, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34, 34, 34, 0.045) 1px, transparent 1px),
    var(--ground);
  background-size: auto, 44px 44px, 44px 44px, auto;
  background-position: center, center, center, center;
  perspective: calc(var(--mm) * 1100);
  perspective-origin: 50% 44%;
  overflow: hidden;
  cursor: grab;
  touch-action: pan-y;          /* 竖向滑动仍然翻页，横向拖才转机身，手机上不会卡住滚动 */
  user-select: none;
  -webkit-user-select: none;
}
.dev.is-drag .dev__stage { cursor: grabbing; }

.dev__floor {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--w) * var(--mm) * 1.02);
  height: calc(var(--h) * var(--mm) * 0.3);
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(20, 22, 26, var(--so)) 0%, rgba(20, 22, 26, 0) 70%);
  filter: blur(calc(var(--mm) * 6));
  transform: translate(calc(-50% + var(--sx)), calc(var(--h) * var(--mm) * 0.5));
  pointer-events: none;
}

.dev__body {
  position: relative;
  width: calc(var(--w) * var(--mm));
  height: calc(var(--h) * var(--mm));
  transform-style: preserve-3d;
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  will-change: transform;
}
.dev__face {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* 正面：整块钢化玻璃，黑色窄边，屏幕居中 */
.dev__face--front {
  transform: translateZ(calc(var(--d) * var(--mm) / 2));
  border-radius: calc(var(--r) * var(--mm));
  background: linear-gradient(165deg, #202329 0%, #111317 55%, #0b0c0f 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  overflow: hidden;
}
.dev__screen {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--sw) * var(--mm));
  height: calc(var(--sh) * var(--mm));
  transform: translate(-50%, -50%);
  border-radius: calc(1.2 * var(--mm));
  background: #07080a;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.7);
  overflow: hidden;
}
.dev__screen svg {
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  transform: scale(1.02);
  transition: opacity 1.1s var(--ease) 0.25s, transform 1.1s var(--ease) 0.25s;
}
.dev.is-on .dev__screen svg { opacity: 1; transform: none; }
.no-js .dev__screen svg { opacity: 1; transform: none; }

.dev__glass {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(115deg,
    rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 38%,
    rgba(255, 255, 255, 0.14) 47%, rgba(255, 255, 255, 0.04) 53%,
    rgba(255, 255, 255, 0) 62%);
  background-size: 180% 100%;
  background-position: var(--gx) 0;
}

/* 背面：接口区（按官网接口清单标注，位置是示意）+ 支架孔 + 散热槽 */
.dev__face--back {
  transform: rotateY(180deg) translateZ(calc(var(--d) * var(--mm) / 2));
  border-radius: calc(var(--r) * var(--mm));
  background: linear-gradient(160deg, #24272d 0%, #1a1c21 60%, #16181c 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.dev__vents {
  position: absolute;
  right: calc(12 * var(--mm));
  top: calc(10 * var(--mm));
  width: calc(46 * var(--mm));
  height: calc(20 * var(--mm));
  border-radius: calc(1 * var(--mm));
  background: repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.55) 0 calc(1.3 * var(--mm)), transparent calc(1.3 * var(--mm)) calc(3.2 * var(--mm)));
}
.dev__vesa {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--vesa) * var(--mm));
  height: calc(var(--vesa) * var(--mm));
  transform: translate(-50%, -50%);
}
.dev__vesa i {
  position: absolute;
  width: calc(3.2 * var(--mm));
  height: calc(3.2 * var(--mm));
  border-radius: 50%;
  background: #0a0b0d;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
  transform: translate(-50%, -50%);
}
.dev__vesa i:nth-child(1) { left: 0; top: 0; }
.dev__vesa i:nth-child(2) { left: 100%; top: 0; }
.dev__vesa i:nth-child(3) { left: 0; top: 100%; }
.dev__vesa i:nth-child(4) { left: 100%; top: 100%; }
.dev__io {
  position: absolute;
  left: calc(12 * var(--mm));
  bottom: calc(10 * var(--mm));
  display: flex;
  gap: calc(3 * var(--mm));
}
.dev__io span {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-width: calc(15 * var(--mm));
  height: calc(12 * var(--mm));
  padding: 0 calc(2 * var(--mm)) calc(1.6 * var(--mm));
  border-radius: calc(1 * var(--mm));
  background: #0b0c0f;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
  font-family: var(--mono);
  font-size: calc(2.7 * var(--mm));
  line-height: 1;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.6);
  white-space: nowrap;
}
.dev__plate {
  position: absolute;
  right: calc(12 * var(--mm));
  bottom: calc(12 * var(--mm));
  font-family: var(--mono);
  font-size: calc(2.6 * var(--mm));
  line-height: 1;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.32);
  white-space: nowrap;
}

/* 四个侧壁：厚度 = --d */
.dev__face--top,
.dev__face--bottom {
  top: 50%;
  height: calc(var(--d) * var(--mm));
  margin-top: calc(var(--d) * var(--mm) / -2);
}
.dev__face--top { transform: rotateX(90deg) translateZ(calc(var(--h) * var(--mm) / 2)); background: linear-gradient(180deg, #34373e, #1c1e23); }
.dev__face--bottom { transform: rotateX(-90deg) translateZ(calc(var(--h) * var(--mm) / 2)); background: linear-gradient(0deg, #202227, #121316); }
.dev__face--left,
.dev__face--right {
  left: 50%;
  width: calc(var(--d) * var(--mm));
  margin-left: calc(var(--d) * var(--mm) / -2);
}
.dev__face--left { transform: rotateY(-90deg) translateZ(calc(var(--w) * var(--mm) / 2)); background: linear-gradient(90deg, #26292f, #15171b); }
.dev__face--right { transform: rotateY(90deg) translateZ(calc(var(--w) * var(--mm) / 2)); background: linear-gradient(90deg, #15171b, #26292f); }

/* 金属机身（FUTURE 系列）：阳极氧化深灰 + 拉丝侧壁 */
.dev--metal .dev__face--front {
  background: linear-gradient(165deg, #3b3e45 0%, #24262b 46%, #17191d 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.dev--metal .dev__face--back { background: linear-gradient(160deg, #4a4e56 0%, #3a3d44 60%, #33363c 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); }
.dev--metal .dev__face--top,
.dev--metal .dev__face--bottom,
.dev--metal .dev__face--left,
.dev--metal .dev__face--right {
  background-image:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, #8d9199 0%, #5f636b 45%, #7d8189 100%);
}
.dev--metal .dev__face--left,
.dev--metal .dev__face--right {
  background-image:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 3px),
    linear-gradient(90deg, #5f636b 0%, #8d9199 50%, #6a6e76 100%);
}

/* 视角按钮 + 尺寸说明 */
.dev__ctl { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.dev__ctl button {
  height: 32px;
  padding: 0 14px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 0.5px var(--line);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.dev__ctl button:hover { background: rgba(34, 34, 34, 0.06); }
.dev__ctl button[aria-pressed="true"] { background: var(--ink); color: #fff; box-shadow: none; }
.dev__hint { margin-left: auto; font-family: var(--mono); font-size: 12px; color: var(--mut-2); }
.dev__dims { margin-top: 8px; font-family: var(--mono); font-size: 12px; line-height: 20px; color: var(--mut); }

@media (max-width: 1000px) {
  .dev__stage { aspect-ratio: 4 / 3; }
}

/* 屏幕里的界面动效：仪表弧摆动 · 状态点闪烁 · 曲线在点亮后画出 · 进度条呼吸 */
.ui-arc { stroke-dasharray: 100; stroke-dashoffset: 42; animation: uiArc 5.4s ease-in-out infinite alternate; }
.ui-blink { animation: uiBlink 1.8s steps(1, end) infinite; }
.ui-line { stroke-dasharray: 100; stroke-dashoffset: 100; }
.dev.is-on .ui-line { animation: uiDraw 2.6s var(--ease) 0.6s forwards; }
.no-js .ui-line { stroke-dashoffset: 0; }
.ui-bar { transform-box: fill-box; transform-origin: left center; animation: uiBar 4.2s ease-in-out infinite alternate; }

@keyframes uiArc { from { stroke-dashoffset: 46; } to { stroke-dashoffset: 24; } }
@keyframes uiBlink { 0%, 62% { opacity: 1; } 63%, 100% { opacity: 0.22; } }
@keyframes uiDraw { to { stroke-dashoffset: 0; } }
@keyframes uiBar { from { transform: scaleX(0.55); } to { transform: scaleX(1); } }

@media (prefers-reduced-motion: reduce) {
  .ui-arc, .ui-blink, .ui-bar { animation: none; }
  .ui-line { stroke-dashoffset: 0; }
  .dev.is-on .ui-line { animation: none; }
  .dev__screen svg { opacity: 1; transform: none; transition: none; }
  .hw-media[data-reveal] { clip-path: none; }
  .hw-media[data-reveal] img { transform: none; }
  .hw-step::before, .pd-stat::after { transform: none; transition: none; }
}

/* ---------- 视觉化改造（2026-09-05）----------
   三步流程加了 emoji 圆章（vibe.css 的 .vb-ico）。 */
/* 圆章走 .vb-e 的 ::before，位移与色板都在 vibe.css，这里不用再写 */

/* ============================================================
   询价表单（2026-09-06）
   控件在 assets/css/forms.css，这里只排版：左说明右表单，窄版两列。
   ============================================================ */
.hw-quote__grid {
  display: grid;
  grid-template-columns: minmax(260px, 380px) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 76px);
  align-items: start;
}
@media (max-width: 900px) { .hw-quote__grid { grid-template-columns: 1fr; gap: 30px; } }
.hw-quote__grid .heading-5 { margin-top: 10px; }
.hw-quote__p { color: var(--mut); margin-top: 15px; max-width: 40ch; }
.hw-quote__form {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: clamp(20px, 3vw, 34px);
}
.hw-quote__form.sform--tight .sform__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
.hw-quote__form .sfield:nth-last-child(-n+2) { grid-column: 1 / -1; }
@media (max-width: 620px) { .hw-quote__form.sform--tight .sform__grid { grid-template-columns: 1fr; } }
.hw-quote__form .sfield input,
.hw-quote__form .sfield select,
.hw-quote__form .sfield textarea { background-color: var(--ground); }
.hw-quote__form .sfield input:focus,
.hw-quote__form .sfield select:focus,
.hw-quote__form .sfield textarea:focus { background-color: var(--card); }
.hw-quote__form[data-state="done"] { padding: 0; border: 0; }
.hw-quote__form .sform__done { border-radius: var(--r-card); }