/* CE-5008-20V10A-SMB 智能笔记本测试仪 · 产品介绍页样式（10 屏 · 亮色主题）
   部署位置：/Public/Home/css/smb-overview.css（介绍字段里以绝对地址外链引用）
   源稿：Apple版本2/index.html，由 部署-v2-20261010/_build.py 自动生成，勿手改
   纪律：全部选择器以 .smb / .smb-* 开头，零裸元素选择器，不覆盖站点组件类，不影响其它页面
   改样式只重传本文件，介绍字段不用重贴 */
/* ============================================================
   新威官网前端视觉与排版规范 v1.7 · 设计变量(第 8 节)
   Apple 风格产品页 · 亮色主题
   ============================================================ */
.smb{
  /* 品牌金 —— 唯一主色 */
  --smb-brand-gold:#f0b100;      /* 底色 / 描边 / 图形 / 图标 / 装饰线 / 【重点文字】 */
  --smb-brand-gold-dark:#c48d00;
  --smb-brand-gold-deep:#d49900;
  /* 深金 —— v1.8 起收紧用途:仅限(1)技术图内的标注文字(2)交互态文字 hover(3)深色图底上的图标描边。
     页面正文的重点文字一律不得再用它,统一走 --smb-brand-gold。 */
  --smb-gold-text:#8a6400;
  --smb-brand-gold-light:#fff3cc;
  --smb-brand-gold-bg:#fef8e0;
  --smb-brand-gold-glow:rgba(240,177,0,.15);
  --smb-brand-gold-shadow:rgba(240,177,0,.35);

  /* 中性色(亮色) */
  --smb-ink:#1a1a1a;
  --smb-ink-2:#4a4a4a;
  --smb-ink-3:#707070;
  --smb-bg:#ffffff;
  --smb-bg-soft:#faf8f3;
  --smb-line:#e5e5e5;

  /* 媒体占位底(暗图加载/失败时可见) */
  --smb-dark-surface:#141414;

  /* 字体 */
  --smb-font-cn:"PingFang SC","Microsoft YaHei","Helvetica Neue",Arial,sans-serif;

  /* 字号
     ⚠️ 层级铁律:H1 的【下限】必须大于 H2 的下限,且 H1 的 vw 系数必须大于 H2 的。
        否则在中等屏(768~1280)会出现「首屏产品名比区块标题还小」的层级倒挂。
        H1 min 34px > H2 min 32px;H1 5.5vw > H2 4.4vw —— 两者都不可反向。 */
  --smb-fs-h1:clamp(34px,5.5vw,76px);
  --smb-fs-h2:clamp(32px,4.4vw,56px);
  --smb-fs-h2-cta:clamp(28px,3.4vw,44px);
  --smb-fs-h3:20px;
  --smb-fs-eyebrow:12px;
  --smb-fs-body:16px;
  --smb-fs-desc:clamp(15px,1.2vw,18px);
  --smb-fs-card:14px;
  --smb-fs-stat:38px;
  --smb-fs-btn:15px;
  --smb-fs-footer:13px;

  /* 布局与动效 */
  --smb-container:1320px;
  --smb-space-section:clamp(80px,10vw,120px);
  --smb-radius-card:16px;
  --smb-radius-btn:999px;
  --smb-ease-out:cubic-bezier(.2,.7,.3,1);
  --smb-t-fast:.3s;
  --smb-shadow-card:0 2px 12px rgba(0,0,0,.05);
  --smb-shadow-hover:0 12px 32px rgba(0,0,0,.10);
}

/* ============================================================ 基础 */
.smb *{box-sizing:border-box}
.smb{margin:0;background:var(--smb-bg);color:var(--smb-ink);font-family:var(--smb-font-cn);font-size:var(--smb-fs-body);line-height:1.7;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.smb img{display:block;max-width:100%;height:auto}
.smb a{color:inherit}
.smb section[id]{scroll-margin-top:90px}
.smb ::selection{background:var(--smb-brand-gold);color:var(--smb-ink)}
.smb :focus-visible{outline:3px solid var(--smb-brand-gold);outline-offset:3px;border-radius:8px}

.smb-container{width:min(var(--smb-container),calc(100% - 48px));margin-inline:auto}
.smb-section{padding-block:var(--smb-space-section)}
.smb-section--soft{background:var(--smb-bg-soft)}
.smb-center{text-align:center}
.smb-center .smb-section-desc{margin-inline:auto}

/* 排版 */
/* 眉标签 —— 「品牌金药丸 + 黑字」(Alice 2026-10-09 定稿,已写入规范 §2.5)
   起因:12px/700 的 #f0b100 文字在 #faf8f3 软底上对比度只有 1.80:1,实测几乎看不见
   (「新威 · CT/CE-5000 系列」要凑近才认得出)。改用金底黑字后对比度 10.99:1,12px 也清楚,
   且品牌金仍然在场 —— 这是既保品牌金又过无障碍的唯一解法。
   ⚠️ letter-spacing 会在最后一个字后面多出 3px,药丸看起来右重左轻 → 左内边距多加 3px 补偿。
   ⚠️ display:inline-block 是必须的:①让药丸宽度贴合文字 ②transform 对 inline 元素无效,`.smb-reveal` 需要它。
      居中由父级 text-align 提供(.smb-hero / .smb-center 都有),不要加 margin:auto。 */
.smb-eyebrow{
  display:inline-block;
  font-size:var(--smb-fs-eyebrow);font-weight:700;letter-spacing:3px;
  color:var(--smb-ink);background:var(--smb-brand-gold);
  padding:5px 12px 5px 15px;border-radius:999px;
  margin:0 0 16px;line-height:1;
}
.smb-display-hero{
  font-size:var(--smb-fs-h1);font-weight:800;
  line-height:1.1;letter-spacing:-1.5px;margin:0;
}
.smb-display{
  font-size:var(--smb-fs-h2);font-weight:800;
  line-height:1.15;letter-spacing:0;margin:0;
}
.smb-display-cta{
  font-size:var(--smb-fs-h2-cta);font-weight:800;
  line-height:1.2;letter-spacing:0;margin:0;
}
/* 区块标题金色装饰线(60×3px,同页统一) */
.smb-sec-head::after{
  content:"";display:block;width:60px;height:3px;border-radius:2px;
  background:var(--smb-brand-gold);margin:22px auto 0;
}
.smb-section-desc{
  font-size:var(--smb-fs-desc);line-height:1.8;font-weight:400;
  max-width:720px;color:var(--smb-ink-2);margin:22px 0 0;
  text-wrap:balance; /* 均分各行,避免末行只剩两三个字(widow) */
}

/* 重点文字(规范 v1.8):正文里的关键词统一走品牌金 + 700 字重。
   ⚠️ 已知取舍:白底 1.91:1 / 软底 1.80:1,不满足 WCAG AA 4.5:1 —— 这是 v1.8 明知的选择。
      需要过无障碍的页面,把这一行换成「金底黑字」:.smb-hl{background:var(--smb-brand-gold);color:var(--smb-ink);padding:0 .25em;border-radius:3px}
   用法克制:每段不超过 3 处,只标差异化名词与结果性收益,避免金色泛滥。 */
.smb-hl{color:var(--smb-brand-gold);font-weight:700;font-style:normal}
/* 上面这条适用于 ≥15px 的语境(.smb-section-desc)。.smb-pillar p / .smb-eco-tile p 走 --smb-fs-card 14px,
   品牌金字色在这一档对比度不足(规范 §2.5 判据:字号 ≤14px 时 #f0b100 只能做底色),
   故这两处把「金色字」翻成「金底黑字」,10.99:1,品牌金一点没少。 */
.smb-pillar p .smb-hl,.smb-eco-tile p .smb-hl{
  background:var(--smb-brand-gold);color:var(--smb-ink);
  padding:0 .25em;border-radius:3px;
  box-decoration-break:clone;-webkit-box-decoration-break:clone;
}

/* ============================================================ Hero */
.smb-hero{
  background:
    radial-gradient(900px 420px at 82% 6%,var(--smb-brand-gold-glow),transparent 60%),
    var(--smb-bg);
  padding:clamp(64px,9vw,110px) 0 0;text-align:center;
}
.smb-hero .smb-display-hero{margin-top:6px}
.smb-hero-sub{
  font-size:clamp(20px,2.4vw,30px);font-weight:700;
  line-height:1.35;letter-spacing:0;margin:20px 0 0;color:var(--smb-ink);
}
.smb-hero-chips{
  display:flex;flex-wrap:wrap;justify-content:center;gap:12px;
  margin:30px 0 0;padding:0;list-style:none;
}
.smb-hero-actions{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:16px;margin-top:34px;
}
.smb-hero-scroll{
  display:inline-flex;align-items:center;gap:6px;margin-top:34px;
  font-size:14px;font-weight:600;color:var(--smb-ink);text-decoration:none;
  transition:color var(--smb-t-fast) var(--smb-ease-out);
}
.smb-hero-scroll svg{color:var(--smb-brand-gold);transition:transform var(--smb-t-fast) var(--smb-ease-out)}
.smb-hero-scroll:hover{color:var(--smb-gold-text)}
.smb-hero-scroll:hover svg{transform:translateY(4px)}
.smb-hero-figure{
  margin:clamp(40px,5vw,64px) auto 0;
  width:min(1180px,calc(100% - 32px));
}

/* 按钮 */
.smb-btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--smb-font-cn);font-size:var(--smb-fs-btn);font-weight:600;line-height:1;
  text-decoration:none;border-radius:var(--smb-radius-btn);
  padding:14px 28px;transition:all var(--smb-t-fast) var(--smb-ease-out);
}
.smb-btn:active{transform:scale(.98)}
.smb-btn--primary{
  background:var(--smb-brand-gold);color:var(--smb-ink);
  box-shadow:0 8px 22px var(--smb-brand-gold-shadow);
}
.smb-btn--primary:hover{background:var(--smb-brand-gold-dark);transform:translateY(-2px);box-shadow:0 12px 28px var(--smb-brand-gold-shadow)}
.smb-btn--ghost{background:transparent;color:var(--smb-ink);border:1px solid #ccc}
.smb-btn--ghost:hover{border-color:var(--smb-brand-gold);color:var(--smb-gold-text)}

/* 图片模块 */
.smb-imgwrap{
  border-radius:var(--smb-radius-card);overflow:hidden;
  background:var(--smb-dark-surface);position:relative;
}
.smb-imgwrap img{width:100%;height:100%;object-fit:cover}
.smb-imgwrap.smb-imgfail::after{
  content:attr(data-label);position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  padding:24px;text-align:center;font-size:14px;color:rgba(255,255,255,.55);
}
.smb-imgwrap--light{background:linear-gradient(#f8f9fa,#eef1f4)}
.smb-imgwrap--light.smb-imgfail::after{color:var(--smb-ink-3)}
.smb-caption{font-size:13px;color:var(--smb-ink-3);text-align:center;margin:14px 0 0;letter-spacing:0}
/* 首屏大图:源图 hero.smb-jpg 原为 2560×970(2.64:1)超宽画幅,产品(611×810,自身宽高比 0.742)
   只占 x[0.568,0.807]、中心 0.686 —— 整幅铺满时左侧留下 55% 纯暗场,观感「空了一半」。
   已在「素材层」重裁(原图备份于 _原图备份/hero.smb-jpg):裁掉上下空白、右侧用背景镜像补齐,
   产品占比 23.4%→27.2%、占高 83.1%→95.1%、中心 0.686→0.500(正中对齐)。
   ⚠️ 画幅比例刻意保持不变(2249/852 = 2.6397 ≈ 原 2.6392)。这是几何上限——
      产品最大占宽 = 产品宽高比 ÷ 画幅比例 × 高度利用率 = 0.742 ÷ 2.639 × 0.95 ≈ 27%。
      想再大只能改画幅比例,或往空白处放内容。 */
.smb-r-hero{aspect-ratio:2249/852}
.smb-r-ov{aspect-ratio:2560/950}
.smb-r-scene{aspect-ratio:16/9}
.smb-r-app{aspect-ratio:16/9}

/* ============================================================ 技术指标(6 列亮点栅格) */
.smb-specs-grid{
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:24px;
  margin-top:clamp(40px,5vw,64px);
}
.smb-spec-card{
  background:var(--smb-bg);border:1px solid var(--smb-line);border-radius:var(--smb-radius-card);
  padding:28px 20px 26px;text-align:center;
  transition:transform var(--smb-t-fast) var(--smb-ease-out),box-shadow var(--smb-t-fast) var(--smb-ease-out);
}
.smb-spec-card:hover{transform:translateY(-2px);box-shadow:var(--smb-shadow-hover)}
.smb-spec-v{
  font-size:var(--smb-fs-stat);font-weight:800;line-height:1;margin:0;
  font-variant-numeric:tabular-nums;
  /* 大数字走品牌金(Alice 2026-10-09 定稿):38px/800 是大字,金色可读性远好于 12px 小字。
     单位 small 刻意保留中性灰 --smb-ink-3,形成「金数字 + 灰单位」的两级层次,也避免金色泛滥。 */
  color:var(--smb-brand-gold);
}
.smb-spec-v small{font-size:.42em;font-weight:700;margin-left:2px;color:var(--smb-ink-3)}
.smb-spec-k{font-size:14px;font-weight:600;color:var(--smb-ink-2);margin:12px 0 0}
.smb-spec-d{font-size:13px;color:var(--smb-ink-3);margin:8px 0 0;line-height:1.6}
.smb-spec-strip{
  display:flex;flex-wrap:wrap;justify-content:center;gap:12px;
  margin:36px 0 0;padding:0;list-style:none;
}
.smb-tag{
  font-size:13px;font-weight:500;color:var(--smb-ink-2);
  padding:8px 18px;border-radius:100px;
  background:var(--smb-bg);border:1px solid var(--smb-line);
}

/* ============================================================ 价值锚点(调研洞察) */
.smb-value-pillars{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;
  margin-top:clamp(40px,5vw,64px);text-align:left;
}
.smb-pillar{
  background:var(--smb-bg);border:1px solid var(--smb-line);border-radius:var(--smb-radius-card);
  padding:36px 32px;
  transition:transform var(--smb-t-fast) var(--smb-ease-out),border-color var(--smb-t-fast) var(--smb-ease-out),box-shadow var(--smb-t-fast) var(--smb-ease-out);
}
.smb-pillar:hover{transform:translateY(-2px);border-color:var(--smb-brand-gold);box-shadow:var(--smb-shadow-hover)}
.smb-pillar .smb-no{
  /* 12px 是「≤14px 时 #f0b100 只能做底色」的命中档,故与 .smb-eyebrow 同形态:金底黑字(10.99:1)。
     letter-spacing 2px 会在末字后多出 2px → 左内边距 +2px 补偿。 */
  display:inline-block;
  font-size:12px;font-weight:700;letter-spacing:2px;
  color:var(--smb-ink);background:var(--smb-brand-gold);
  padding:5px 12px 5px 14px;border-radius:999px;
  margin:0 0 16px;line-height:1;
}
.smb-pillar h3{font-size:var(--smb-fs-h3);font-weight:700;line-height:1.3;margin:0}
.smb-pillar p{font-size:var(--smb-fs-card);color:var(--smb-ink-3);margin:12px 0 0;line-height:1.6}
.smb-value-line{
  margin:clamp(40px,5vw,64px) auto 0;max-width:840px;
  font-size:clamp(19px,2.2vw,26px);font-weight:700;
  line-height:1.5;letter-spacing:0;text-align:center;color:var(--smb-ink);
}
.smb-value-line .smb-accent{color:var(--smb-brand-gold)}

/* ============================================================ SMBus 功能卡 + 原理图 */
.smb-fn-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;
  margin-top:clamp(40px,5vw,64px);
}
.smb-fn-card{
  background:var(--smb-bg);border:1px solid var(--smb-line);border-radius:var(--smb-radius-card);
  padding:clamp(28px,3vw,36px) clamp(24px,2.6vw,34px);
  transition:transform var(--smb-t-fast) var(--smb-ease-out),box-shadow var(--smb-t-fast) var(--smb-ease-out),border-color var(--smb-t-fast) var(--smb-ease-out);
}
.smb-fn-card:hover{transform:translateY(-2px);box-shadow:var(--smb-shadow-hover);border-color:rgba(240,177,0,.5)}
.smb-fn-card .smb-ic{
  width:44px;height:44px;border-radius:12px;margin-bottom:20px;
  background:var(--smb-brand-gold-light);display:flex;align-items:center;justify-content:center;
}
.smb-fn-card .smb-ic svg{
  width:22px;height:22px;fill:none;stroke:var(--smb-gold-text);stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;
}
.smb-fn-card h3{font-size:var(--smb-fs-h3);font-weight:700;margin:0;line-height:1.3}
.smb-fn-card ul{list-style:none;display:grid;gap:10px;margin:16px 0 0;padding:0}
.smb-fn-card li{
  position:relative;padding-left:18px;font-size:var(--smb-fs-card);
  color:var(--smb-ink-2);line-height:1.65;
}
.smb-fn-card li::before{
  content:"";position:absolute;left:0;top:.66em;
  width:7px;height:2px;border-radius:1px;background:var(--smb-brand-gold);
}

.smb-dg-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;
  margin-top:24px;
}
.smb-dg-card{
  margin:0;
  background:var(--smb-bg);border:1px solid var(--smb-line);border-radius:var(--smb-radius-card);
  overflow:hidden;display:flex;flex-direction:column;
}
.smb-dg-card .smb-dg-img{
  flex:1;display:flex;align-items:center;justify-content:center;
  padding:26px 20px;background:var(--smb-bg-soft);
}
.smb-dg-card .smb-dg-img svg{width:100%;height:auto;display:block}
.smb-dg-card .smb-dg-cap{
  padding:13px 20px 15px;border-top:1px solid var(--smb-line);
  display:block;font-size:12.5px;color:var(--smb-ink-3);line-height:1.5;
}
.smb-dg-card .smb-dg-cap b{
  display:block;color:var(--smb-ink);font-weight:600;
  font-size:13.5px;margin-bottom:3px;
}
/* 原理图矢量元素(亮底技术图:金色线条 + 中性文字) */
.smb-dg-wire{stroke:var(--smb-brand-gold);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.smb-dg-thin{stroke:var(--smb-brand-gold);stroke-width:1.2;fill:none;opacity:.55}
.smb-dg-box{fill:var(--smb-brand-gold-bg);stroke:rgba(240,177,0,.45);stroke-width:1.5}
.smb-dg-dot{fill:var(--smb-brand-gold)}
.smb-dg-pin{fill:var(--smb-bg);stroke:var(--smb-brand-gold);stroke-width:2}
.smb-dg-txt{fill:var(--smb-ink);font-size:16px;font-weight:600}
.smb-dg-dt{fill:var(--smb-ink);font-size:14px;font-weight:500}
.smb-dg-lab{fill:var(--smb-ink-3);font-size:12.5px}
.smb-dg-mono{
  fill:var(--smb-gold-text);font-size:13px;letter-spacing:.02em;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

/* ============================================================ 节能逆变 */
.smb-eco-grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;
  margin-top:clamp(40px,5vw,64px);
}
.smb-eco-tile{
  background:var(--smb-bg);border:1px solid var(--smb-line);border-radius:var(--smb-radius-card);
  padding:32px 26px;
  transition:transform var(--smb-t-fast) var(--smb-ease-out),box-shadow var(--smb-t-fast) var(--smb-ease-out);
}
.smb-eco-tile:hover{transform:translateY(-2px);box-shadow:var(--smb-shadow-hover)}
.smb-eco-tile .smb-ico{width:32px;height:32px;margin:0 0 18px;color:var(--smb-brand-gold)}
.smb-eco-tile h3{font-size:var(--smb-fs-h3);font-weight:700;margin:0;line-height:1.3}
.smb-eco-tile p{font-size:var(--smb-fs-card);color:var(--smb-ink-3);margin:10px 0 0;line-height:1.6}

/* ============================================================ 散热 */
.smb-cool-pair{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;
  margin:clamp(40px,5vw,64px) auto 0;
}
.smb-cool-pair figure{margin:0}
.smb-cool-flow{
  display:flex;justify-content:center;align-items:center;gap:16px;
  margin-top:36px;color:var(--smb-ink-3);
  font-size:14px;font-weight:500;letter-spacing:1px;
}
.smb-cool-flow .smb-arrow{color:var(--smb-brand-gold)}

/* ============================================================ 应用场景(4 列 + 整行重点卡) */
.smb-apps-grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;
  margin-top:clamp(40px,5vw,64px);
}
.smb-app-card{
  background:var(--smb-bg);border:1px solid var(--smb-line);border-radius:var(--smb-radius-card);overflow:hidden;
  transition:transform var(--smb-t-fast) var(--smb-ease-out),box-shadow var(--smb-t-fast) var(--smb-ease-out);
}
.smb-app-card:hover{transform:translateY(-2px);box-shadow:var(--smb-shadow-hover)}
.smb-app-card .smb-imgwrap{border-radius:0}
/* 悬停时图片轻微放大(规范 §7.1:scale 1.05 / .6s) */
.smb-app-card .smb-imgwrap img{transition:transform .6s cubic-bezier(.2,.7,.3,1);will-change:transform}
.smb-app-card:hover .smb-imgwrap img,
.smb-app-card:focus-within .smb-imgwrap img{transform:scale(1.05)}
.smb-app-card .smb-txt{padding:20px 22px 24px}
.smb-app-card h3{font-size:16px;font-weight:700;margin:0;line-height:1.4}
.smb-app-card p{font-size:var(--smb-fs-card);color:var(--smb-ink-3);margin:6px 0 0;line-height:1.6}
/* 第 5 张:整行横向重点卡(图左文右),避免「半宽卡」造成的错位感 */
.smb-app-card--wide{grid-column:1 / -1;display:grid;grid-template-columns:minmax(0,50%) minmax(0,1fr);align-items:stretch}
.smb-app-card--wide .smb-imgwrap{height:100%;min-height:300px}
.smb-app-card--wide .smb-txt{padding:40px 48px;display:flex;flex-direction:column;justify-content:center}
.smb-app-card--wide h3{font-size:24px}
.smb-app-card--wide p{font-size:15px;margin-top:10px;max-width:420px}

/* ============================================================ 同系列型号 */
.smb-series-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;
  margin-top:clamp(40px,5vw,64px);
}
.smb-series-card{
  display:block;text-decoration:none;
  background:var(--smb-bg);border:1px solid var(--smb-line);border-radius:var(--smb-radius-card);
  padding:28px 28px 26px;
  transition:transform var(--smb-t-fast) var(--smb-ease-out),box-shadow var(--smb-t-fast) var(--smb-ease-out),border-color var(--smb-t-fast) var(--smb-ease-out);
}
.smb-series-card:hover{transform:translateY(-2px);box-shadow:var(--smb-shadow-hover);border-color:var(--smb-brand-gold)}
.smb-series-card .smb-badge{
  display:inline-block;font-size:11px;font-weight:700;letter-spacing:1px;
  color:var(--smb-ink);background:var(--smb-brand-gold-light);
  border-radius:100px;padding:5px 14px;margin-bottom:14px;
}
.smb-series-card.smb-current .smb-badge{color:var(--smb-ink);background:var(--smb-brand-gold)}
.smb-series-card h3{font-size:var(--smb-fs-h3);font-weight:700;margin:0;line-height:1.3}
.smb-series-card p{font-size:var(--smb-fs-card);color:var(--smb-ink-3);margin:8px 0 0}
.smb-series-note{font-size:13px;color:var(--smb-ink-3);text-align:center;margin:32px 0 0}

/* ============================================================ CTA */
.smb-cta-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;margin-top:38px}

/* ============================================================ 锚点圆点导航(规范 §11) */
.smb-dot-nav{
  position:fixed;right:115px;top:50%;transform:translateY(-50%);
  z-index:85;                     /* 压在销售悬浮轨(90)/面板(91)之下,面板展开时盖住圆点(§11.1 修订) */
  display:none;flex-direction:column;gap:14px;   /* 默认隐藏,由 .smb-js 门控显示 */
}
.smb-dot-nav button{
  position:relative;display:block;width:10px;height:10px;padding:0;margin:0;
  border-radius:50%;background:rgba(0,0,0,.15);border:1px solid rgba(0,0,0,.1);
  font:inherit;color:inherit;cursor:pointer;
  -webkit-appearance:none;appearance:none;transition:all .25s ease;
}
/* 热区外扩（规范 §12.1：用伪元素外扩,禁止改 width/height 换热区）。
   ⚠️ 纵向只扩 ±7px：§11.1 规定圆点间距 gap:14px,相邻热区若要各占 44px 必然互相重叠,
      两者几何上不可兼得。此处取 gap/2 = 7px（相邻热区正好相接、无死角、无叠压）,
      横向放宽到 61px。结论：圆点导航是「指针（鼠标）专用」控件,触屏由 ≤1023px 隐藏接管。 */
.smb-dot-nav button::before{
  content:"";position:absolute;left:-34px;top:-7px;right:-17px;bottom:-7px;
}
.smb-dot-nav button:hover{background:var(--smb-brand-gold);transform:scale(1.25)}
.smb-dot-nav button.smb-active{
  background:var(--smb-brand-gold);border-color:var(--smb-brand-gold);transform:scale(1.35);
  box-shadow:0 0 10px rgba(240,177,0,.4);
}
.smb-dot-nav button::after{
  content:attr(data-title);position:absolute;right:22px;top:50%;
  transform:translateY(-50%) translateX(6px);padding:5px 12px;background:var(--smb-ink);
  color:#fff;font-size:12px;font-weight:500;white-space:nowrap;
  border-radius:6px;opacity:0;pointer-events:none;transition:all .25s ease;
}
.smb-dot-nav button:hover::after,.smb-dot-nav button:focus-visible::after{opacity:1;transform:translateY(-50%) translateX(0)}

/* ============================================================ 滚动淡入(规范 §7.1) */
.smb.smb-js .smb-reveal{opacity:0;transform:translateY(40px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)}
.smb.smb-js .smb-reveal.smb-on{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .smb.smb-js .smb-reveal{opacity:1!important;transform:none!important;transition:none!important}
  .smb-spec-card,.smb-pillar,.smb-eco-tile,.smb-app-card,.smb-series-card,.smb-btn{transition:none}
  .smb-app-card .smb-imgwrap img{transition:none}
  .smb-app-card:hover .smb-imgwrap img,.smb-app-card:focus-within .smb-imgwrap img{transform:none}
}

/* ============================================================ 响应式(桌面优先五档) */
@media (max-width:1440px){ /* lg */ }
@media (max-width:1024px){ /* lg′ */
  .smb-specs-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .smb-value-pillars{grid-template-columns:1fr}
  .smb-eco-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .smb-apps-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .smb-series-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .smb-dg-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .smb-section{padding-block:60px}
}
@media (max-width:768px){ /* md */
  .smb{font-size:15px}
  .smb-container{width:calc(100% - 32px)}
  /* 首屏标题不再单独覆盖字号:交给 --smb-fs-h1 的 clamp 平滑过渡,
     原 min(30px,8vw) 会把 H1 压到 30px,低于 H2 的 32px 下限,造成倒挂 */
  .smb-hero-chips{
    display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;
  }
  .smb-hero-chips li{grid-column:span 2}
  .smb-hero-chips li:nth-child(4){grid-column:2 / 4}
  .smb-hero-chips li:nth-child(5){grid-column:4 / 6}
  .smb-specs-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
  .smb-fn-grid,.smb-dg-grid{grid-template-columns:1fr;gap:16px}
  .smb-dg-grid{margin-top:16px}
  .smb-cool-pair{grid-template-columns:1fr}
  .smb-apps-grid{gap:16px}
  .smb-app-card--wide{grid-template-columns:1fr}
  .smb-app-card--wide .smb-imgwrap{height:auto;min-height:0;aspect-ratio:4/3}
  .smb-app-card--wide .smb-txt{padding:22px 24px 26px}
  .smb-app-card--wide h3{font-size:20px}
  .smb-app-card--wide p{font-size:var(--smb-fs-card);margin-top:6px}
  .smb-series-grid{gap:16px}
}
@media (max-width:640px){ /* sm */
  .smb-display{font-size:30px}
  .smb-hero-chips{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  /* 用同等权重(0-2-1)复位 768 档的 span/定位,否则 span:2 在 2 列栅格里等于整行 */
  .smb-hero-chips li:nth-child(n){grid-column:auto}
  .smb-hero-chips li:nth-child(5){grid-column:1 / -1}
  .smb-specs-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .smb-eco-grid{grid-template-columns:1fr}
  .smb-apps-grid{grid-template-columns:1fr}
  .smb-series-grid{grid-template-columns:1fr}
  .smb-spec-v{font-size:30px}
  .smb-cta-actions .smb-btn{width:100%;max-width:320px}
}
@media (max-width:480px){ /* xs */
  .smb-btn{padding:12px 22px}
}

/* ============ 部署适配层（介绍字段环境专用） ============ */
.smb section[id]{scroll-margin-top:96px;}          /* 锚点滚动避让站点固定导航 */
.smb b,.smb strong{width:auto;max-width:100%;}     /* 站点裸 b{width:100%} 防御（规范 §13.8） */
.smb [data-target]{cursor:pointer;}
.smb-hero-figure--mb{margin-bottom:var(--smb-space-section);}   /* 源稿唯一一处行内样式的落点 */
.smb.smb-js .smb-dot-nav{display:flex;flex-direction:column;}   /* 圆点导航：仅在 .smb-js 下显示 */
@media (max-width:1023px){ .smb.smb-js .smb-dot-nav{display:none;} }   /* 规范 §11.1 */