/* ==========================================================================
   OSICARE 官网 · 重写版设计系统（浅灰极简 + 顶栏固定）
   与 bootstrap.min.css 搭配使用；不依赖任何第三方 JS 插件
   ========================================================================== */

:root {
    --bg:        #f6f7f8;
    --surface:   #ffffff;
    --ink:       #1d2129;
    --ink-2:     #4a4f57;
    --muted:     #8b9098;
    --line:      #e6e8eb;
    --line-2:    #f0f1f3;
    --dark:      #1d2129;
    --dark-h:    #34383f;
    /* 深色只用于「视频墙」这类图片替代位，与按钮用的 --dark 分开，
       这样调深灰色不会波及全站按钮和选中态 chip */
    --slate:     #333941;
    --slate-2:   #272c33;
    /* 浅灰底：行动条与页脚（不再是黑块） */
    --soft:      #eceef1;
    --h-h:       74px;
    --h-h-m:     58px;
    --radius:    2px;
    --shadow:    0 1px 2px rgba(29, 33, 41, .04), 0 8px 24px rgba(29, 33, 41, .06);
    --ease:      .28s cubic-bezier(.4, 0, .2, 1);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
    font-size: 15px;
    line-height: 1.72;
    padding-top: var(--h-h);
    -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; border: 0; }
a { color: inherit; text-decoration: none; transition: color var(--ease), opacity var(--ease); }
a:hover { color: var(--ink-2); }
h1, h2, h3, h4 { margin: 0 0 .5em; font-weight: 600; line-height: 1.28; letter-spacing: -.01em; }
h1 { font-size: 40px; }
h2 { font-size: 28px; }
h3 { font-size: 18px; }
p  { margin: 0 0 1em; }
ul { margin: 0; padding: 0; list-style: none; }

.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.container--narrow { max-width: 900px; }

/* ---------------------------------------------------------------- 头部 */
.site-header {
    position: fixed; top: 0; left: 0; right: 0; z-index: 900;
    height: var(--h-h);
    background: rgba(255, 255, 255, .94);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--line);
}
.site-header.is-scrolled { box-shadow: 0 1px 12px rgba(29, 33, 41, .07); }
.header__inner { display: flex; align-items: center; height: var(--h-h); gap: 26px; }
.brand { flex: 0 0 auto; display: flex; align-items: center; }
.brand img { max-height: 34px; width: auto; display: block; }
.brand__txt { font-size: 20px; font-weight: 700; letter-spacing: .06em; }

.mainnav { flex: 1 1 auto; display: flex; justify-content: flex-end; }
.mainnav > ul { display: flex; align-items: center; gap: 4px; }
.mainnav > ul > li { position: relative; }
.mainnav > ul > li > a {
    display: block; padding: 10px 13px; font-size: 14.5px; color: var(--ink-2);
    border-radius: var(--radius); white-space: nowrap;
}
.mainnav > ul > li > a:hover { color: var(--ink); background: var(--line-2); }
.mainnav > ul > li.is-active > a { color: var(--ink); font-weight: 600; }
.mainnav .caret { display: inline-block; width: 0; height: 0; margin-left: 5px;
    border: 4px solid transparent; border-top-color: currentColor; vertical-align: 2px; }
.subnav {
    /* 间距抽成变量：文件末尾那条「悬停桥」用的就是它，两边永远一致 */
    --subgap: 8px;
    position: absolute; top: calc(100% + var(--subgap)); left: 0; min-width: 210px;
    background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow);
    padding: 8px 0; opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity var(--ease), transform var(--ease), visibility var(--ease);
}
.mainnav li.has-children:hover > .subnav { opacity: 1; visibility: visible; transform: translateY(0); }
.subnav a { display: block; padding: 9px 18px; font-size: 14px; color: var(--ink-2); }
.subnav a:hover { background: var(--line-2); color: var(--ink); }

.header__tools { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; }
.hsearch { display: flex; align-items: center; background: var(--line-2); border-radius: 40px; padding: 0 12px; height: 38px; }
.hsearch input { border: 0; background: transparent; outline: none; width: 118px; font-size: 14px; color: var(--ink); }
.hsearch button { border: 0; background: transparent; padding: 0; cursor: pointer; line-height: 1; color: var(--ink-2); }

.btn { display: inline-block; padding: 11px 22px; font-size: 14px; border-radius: var(--radius);
       border: 1px solid transparent; cursor: pointer; transition: all var(--ease); text-align: center; }
.btn--dark { background: var(--dark); color: #fff; }
.btn--dark:hover { background: var(--dark-h); color: #fff; }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--ink); color: var(--ink); }
.btn--sm { padding: 8px 16px; font-size: 13.5px; }
.btn--block { display: block; width: 100%; }

.htoggle { display: none; width: 40px; height: 38px; border: 1px solid var(--line);
           background: #fff; border-radius: var(--radius); cursor: pointer; padding: 0; }
.htoggle span { display: block; width: 17px; height: 1.5px; margin: 3px auto; background: var(--ink); }

/* 移动端抽屉 */
.mdrawer { position: fixed; top: var(--h-h-m); left: 0; right: 0; bottom: 0; z-index: 890;
           background: #fff; border-top: 1px solid var(--line);
           transform: translateX(-100%); transition: transform var(--ease); overflow-y: auto; }
.mdrawer.is-open { transform: translateX(0); }
.mdrawer ul { padding: 8px 0; }
.mdrawer a { display: block; padding: 12px 22px; font-size: 15px; color: var(--ink-2); border-bottom: 1px solid var(--line-2); }
.mdrawer .sub a { padding-left: 40px; font-size: 14px; color: var(--muted); }
.mdrawer__foot { padding: 18px 22px; }

/* ---------------------------------------------------------------- 提示条 */
.flashbar { padding: 14px 0 0; }
.flashbar .msg { padding: 12px 18px; margin-bottom: 10px; font-size: 14.5px; background: #fff; border-left: 3px solid var(--ink); }
.flashbar .msg.err { border-left-color: #c0392b; color: #8f2f2f; }

/* ---------------------------------------------------------------- 通用区块 */
.sec { padding: 84px 0; }
.sec--tight { padding: 56px 0; }
.sec--grey { background: var(--bg); }
.sec--white { background: #fff; }
.sec__head { text-align: center; max-width: 720px; margin: 0 auto 46px; }
.sec__head h2 { font-size: 30px; }
.sec__head p { color: var(--muted); margin: 10px 0 0; }
.eyebrow { display: block; font-size: 12.5px; letter-spacing: .18em; text-transform: uppercase;
           color: var(--muted); margin-bottom: 12px; }

/* 面包屑 */
.crumbs { padding: 22px 0 0; font-size: 13.5px; color: var(--muted); }
.crumbs a:hover { color: var(--ink); }
.crumbs span.sep { margin: 0 8px; opacity: .6; }
.pagehead { padding: 40px 0 8px; }
.pagehead h1 { font-size: 34px; margin-bottom: 8px; }
.pagehead p { color: var(--muted); max-width: 760px; }

/* ---------------------------------------------------------------- 内页整幅头图
   由内容编辑者按页开启；不开就走上面的 .pagehead 标题带，所以不会每页都顶一张图。
   没有真实头图时会自动回落到标题带（见 inc/func.php 的 page_head_html）。 */
.phero { position: relative; overflow: hidden; background: #2b3038;
  min-height: 360px; display: flex; align-items: center; }
.phero__bg { position: absolute; inset: 0; }
.phero__bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.phero__mask { position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(18,22,28,.70) 0%, rgba(18,22,28,.38) 62%, rgba(18,22,28,.24) 100%); }
.phero__in { position: relative; z-index: 2; padding-top: 88px; padding-bottom: 88px; }
.phero h1 { color: #fff; font-size: 42px; margin-bottom: 12px; }
.phero p { color: rgba(255,255,255,.88); font-size: 16px; max-width: 720px; margin: 0; }

/* ---------------------------------------------------------------- 首页轮播 */
.hero { position: relative; background: #dfe1e4; overflow: hidden; }
.hero__slides { position: relative; height: 560px; }
.hero__slide {
    position: absolute; inset: 0; background-position: center; background-size: cover;
    opacity: 0; visibility: hidden; transition: opacity .8s ease, visibility .8s ease;
}
.hero__slide.is-active { opacity: 1; visibility: visible; }
.hero__slide::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.45), rgba(0,0,0,.12) 55%, rgba(0,0,0,0)); }
.hero__body { position: relative; z-index: 2; height: 100%; display: flex; align-items: center; }
.hero__txt { max-width: 620px; color: #fff; }
.hero__txt h1 { font-size: 46px; color: #fff; margin-bottom: 14px; }
.hero__txt h1 .text--theme { color: #fff; opacity: .78; }
.hero__txt p { font-size: 17px; color: rgba(255,255,255,.88); max-width: 520px; }
.hero__dots { position: absolute; z-index: 3; left: 0; right: 0; bottom: 22px; display: flex; justify-content: center; gap: 10px; }
.hero__dots button { width: 9px; height: 9px; padding: 0; border-radius: 50%; border: 0; cursor: pointer;
                     background: rgba(255,255,255,.45); transition: background var(--ease); }
.hero__dots button.is-active { background: #fff; }

/* ---------------------------------------------------------------- 类目入口图 */
.cat-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.cat-tile { position: relative; display: block; overflow: hidden; background: #e9ebee; min-height: 280px; }
.cat-tile img { width: 100%; height: 100%; min-height: 280px; object-fit: cover; display: block;
                transition: transform .6s ease; }
.cat-tile:hover img { transform: scale(1.04); }
.cat-tile__cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 28px;
                 background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0)); color: #fff; }
.cat-tile__cap h3 { color: #fff; margin: 0 0 4px; font-size: 22px; }
.cat-tile__cap span { font-size: 13.5px; opacity: .85; }
/* 分类没有配图时：用干净色块，不放不相干的模板照片 */
.cat-tile--plain { background: #e9ebee; display: flex; align-items: flex-end; }
.cat-tile--plain .cat-tile__cap { position: static; background: none; padding: 30px 28px; }
.cat-tile--plain .cat-tile__cap h3 { color: var(--ink); }
.cat-tile--plain .cat-tile__cap span { color: var(--muted); opacity: 1; }
.cat-tile--plain:hover { background: #e2e5e9; }

/* ---------------------------------------------------------------- 产品网格 */
.pgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px 22px; }
.pgrid--3 { grid-template-columns: repeat(3, 1fr); }
.pcard { background: transparent; }
/* 产品图统一 1:1 正方形（已确认的样张要求：4 列 + 1:1 + 卡片上只留型号与一行属性） */
.pcard__media { position: relative; display: block; overflow: hidden; background: #fff;
border: 1px solid var(--line); aspect-ratio: 1 / 1; }
@supports not (aspect-ratio: 1 / 1) { .pcard__media { height: 0; padding-bottom: 100%; } }
/* 产品没有配图时的兜底，避免出现破图 */
.pcard__ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
padding: 14px; text-align: center; color: var(--muted); font-size: 13px; }
.pcard__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
                    transition: transform .6s ease; }
.pcard:hover .pcard__media img { transform: scale(1.05); }
.pcard__badge { position: absolute; top: 10px; left: 10px; z-index: 2; background: rgba(255,255,255,.92);
                color: var(--ink); font-size: 11.5px; letter-spacing: .06em; padding: 4px 9px; text-transform: uppercase; }
.pcard__body { padding: 14px 2px 0; }
.pcard__name { font-size: 15px; font-weight: 500; margin: 0 0 3px; line-height: 1.4; }
.pcard__name a:hover { color: var(--ink-2); }
.pcard__meta { font-size: 13px; color: var(--muted); margin: 0; }
.pcard__code { font-size: 12.5px; color: var(--muted); letter-spacing: .03em; }

/* 工具栏 */
.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 26px; flex-wrap: wrap; }
.toolbar__count { font-size: 13.5px; color: var(--muted); }
.toolbar__sort { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--muted); }
.toolbar__sort select { padding: 8px 10px; border: 1px solid var(--line); background: #fff; font-size: 13.5px; color: var(--ink); border-radius: var(--radius); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.chip { padding: 8px 16px; border: 1px solid var(--line); background: #fff; font-size: 13.5px;
        color: var(--ink-2); border-radius: 40px; }
.chip:hover { border-color: var(--ink-2); color: var(--ink); }
.chip.is-active { background: var(--dark); border-color: var(--dark); color: #fff; }
.morewrap { text-align: center; margin-top: 40px; }

/* ---------------------------------------------------------------- 分页
   每页 12 条；某个分类总数 ≤ 12 时前台完全不输出这一段。
   页码是真实 <a> 链接（可被搜索引擎抓取），不依赖 JS。 */
.pager { display: flex; align-items: center; justify-content: center;
  gap: 8px; margin-top: 46px; flex-wrap: wrap; }
.pager a, .pager__gap { min-width: 40px; height: 40px; padding: 0 12px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); background: #fff; color: var(--ink-2);
  font-size: 14px; line-height: 1; transition: all var(--ease); }
.pager a:hover { border-color: var(--ink); color: var(--ink); }
.pager__n.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }
.pager__step { letter-spacing: .02em; }
.pager__gap { border-color: transparent; background: transparent; color: var(--muted); }
.empty { text-align: center; padding: 70px 0; color: var(--muted); }

/* ---------------------------------------------------------------- 产品详情 */
.pdetail { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 52px; align-items: start; }
.pdetail__media { background: #fff; border: 1px solid var(--line); position: relative; overflow: hidden; }
.pdetail__media img { display: block; width: 100%; }
.pdetail__zoom { position: absolute; right: 12px; bottom: 12px; background: rgba(255,255,255,.94);
                 border: 1px solid var(--line); font-size: 12.5px; padding: 7px 12px; cursor: pointer; }
.pthumbs { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.pthumbs button { padding: 0; border: 1px solid var(--line); background: #fff; cursor: pointer; width: 84px; height: 64px; overflow: hidden; }
.pthumbs button.is-active { border-color: var(--ink); }
.pthumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pdetail__info h1 { font-size: 30px; margin-bottom: 10px; }
.pdetail__lead { color: var(--ink-2); font-size: 16px; margin-bottom: 20px; }
.pinfo { border-top: 1px solid var(--line); margin: 0 0 22px; }
.pinfo__row { display: flex; border-bottom: 1px solid var(--line); font-size: 14.5px; }
.pinfo__k { flex: 0 0 42%; padding: 12px 0; color: var(--muted); }
.pinfo__v { flex: 1 1 auto; padding: 12px 0; color: var(--ink); }
.pinfo__row--wide { display: block; padding: 14px 0; }
.pinfo__row--wide .pinfo__k { padding: 0 0 4px; }
.pinfo__row--wide .pinfo__v { padding: 0; }
.colors { display: flex; gap: 10px; flex-wrap: wrap; margin: 6px 0 24px; }
.color { padding: 7px 14px; border: 1px solid var(--line); background: #fff; font-size: 13.5px; cursor: pointer; border-radius: 40px; }
.color.is-active { border-color: var(--ink); }
.pshare { display: flex; gap: 10px; align-items: center; font-size: 13.5px; color: var(--muted); margin-bottom: 26px; }
.pshare a, .pshare button { border: 1px solid var(--line); background: #fff; padding: 7px 13px; font-size: 13px;
                            color: var(--ink-2); cursor: pointer; border-radius: var(--radius); }
.inqbox { background: #fff; border: 1px solid var(--line); padding: 22px; }

/* ---------------------------------------------------------------- 表单 */
.form { display: block; }
.form__row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.input, .textarea, select.input {
    width: 100%; padding: 11px 13px; border: 1px solid var(--line); background: #fff;
    font-size: 14.5px; color: var(--ink); border-radius: var(--radius); outline: none;
    font-family: inherit; transition: border-color var(--ease);
}
.input:focus, .textarea:focus { border-color: var(--ink-2); }
.textarea { min-height: 120px; resize: vertical; }
.form__note { font-size: 12.5px; color: var(--muted); margin-top: 10px; }

/* ---------------------------------------------------------------- 内容块 */
.blk { padding: 66px 0; }
.blk + .blk { border-top: 1px solid var(--line); }
/* 不带 bg 的块是透明的（露出页面底色 #f6f7f8）；要真正的白底用 blk--white */
.blk--grey { background: var(--bg); }
.blk--white { background: #fff; }
.blk__head { max-width: 780px; margin-bottom: 26px; }
.blk__head--center { margin-left: auto; margin-right: auto; text-align: center; }
.blk__title { font-size: 27px; margin-bottom: 8px; }
.blk__sub { color: var(--muted); margin: 0; }
.blk__text { max-width: 860px; color: var(--ink-2); font-size: 15.5px; }
.blk__text p { margin-bottom: 1.05em; }
.blk__figure { margin: 0; }
.blk__figure img { width: 100%; display: block; }
.blk__figure figcaption { font-size: 13px; color: var(--muted); margin-top: 10px; }
.blk__ti { display: grid; grid-template-columns: repeat(2, 1fr); gap: 46px; align-items: center; }
.blk__ti--left .blk__ti__img { order: -1; }
.blk__ti__txt { color: var(--ink-2); font-size: 15.5px; }
.blk__ti__img img { width: 100%; display: block; }
.blk__stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
.blk__stat { background: #fff; border: 1px solid var(--line); padding: 26px 22px; }
.blk__stat__num { display: block; font-size: 34px; font-weight: 600; line-height: 1.1; margin-bottom: 6px; }
.blk__stat__lab { display: block; font-size: 13.5px; color: var(--muted); }
.blk__timeline { position: relative; max-width: 820px; margin: 0; padding-left: 150px; }
.blk__timeline::before { content: ""; position: absolute; left: 130px; top: 6px; bottom: 6px; width: 1px; background: var(--line); }
.blk__tl__item { position: relative; padding: 0 0 30px; }
.blk__tl__item:last-child { padding-bottom: 0; }
.blk__tl__item::before { content: ""; position: absolute; left: -24px; top: 8px; width: 9px; height: 9px;
                         border-radius: 50%; background: var(--ink); }
.blk__tl__year { position: absolute; left: -150px; top: 2px; width: 112px; text-align: right;
                 font-size: 14px; font-weight: 600; color: var(--ink); }
.blk__tl__body h3 { font-size: 16.5px; margin: 0 0 4px; }
.blk__tl__body p { color: var(--ink-2); margin: 0; font-size: 14.5px; }
.blk__certs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.blk__cert { background: #fff; border: 1px solid var(--line); padding: 26px 22px; text-align: center; }
.blk__cert img { max-height: 74px; width: auto; margin: 0 auto 14px; display: block; }
.blk__cert h3 { font-size: 16px; margin-bottom: 6px; }
.blk__cert p { font-size: 13.5px; color: var(--muted); margin: 0; }
/* 认证区块底部的「View all certifications」 */
.blk__more { margin-top: 30px; text-align: center; }

/* ---------------------------------------------------------------- 页面内二级导航
   同组页面（例如 About Us 的 4 页）互相切换用；当前页加下划线高亮。
   与顶部导航的下拉并存，互不替代。 */
.groupnav { border-bottom: 1px solid var(--line); margin-bottom: 30px; }
.groupnav__in { display: flex; gap: 28px; flex-wrap: wrap; }
.groupnav__in a { display: block; padding: 15px 0; font-size: 14px; color: var(--muted);
  border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color var(--ease), border-color var(--ease); }
.groupnav__in a:hover { color: var(--ink); }
.groupnav__in a.is-active { color: var(--ink); border-bottom-color: var(--ink); }

/* ---------------------------------------------------------------- 行动条 */
/* 由深色改为浅灰：整页只保留「视频墙」一处深色，避免两个黑块并列 */
.cta { background: var(--soft); color: var(--ink); padding: 74px 0; text-align: center;
       border-top: 1px solid var(--line); }
.cta h2 { color: var(--ink); font-size: 30px; margin-bottom: 12px; }
.cta p { color: var(--ink-2); max-width: 700px; margin: 0 auto 26px; }
.cta .btn--dark { background: var(--dark); color: #fff; }
.cta .btn--dark:hover { background: var(--dark-h); color: #fff; }
.cta .btn--ghost { color: var(--ink); border-color: #cfd3d9; }
.cta .btn--ghost:hover { border-color: var(--ink); color: var(--ink); }

/* ---------------------------------------------------------------- 页脚 */
/* 按旧模板的形式：品牌 / Newsletter / Contact Us / Follow Us，浅灰底 */
.site-footer { background: var(--soft); border-top: 1px solid var(--line); padding: 58px 0 0; }
.footer__grid { display: grid; grid-template-columns: 1.5fr 1.3fr 1.2fr 1fr; gap: 38px; }
.footer__col h4 { font-size: 14px; letter-spacing: .04em; margin-bottom: 16px; }
.footer__col p, .footer__col li { font-size: 14px; color: var(--ink-2); }
.footer__col li { padding: 5px 0; }
.footer__col a:hover { color: var(--ink); }
.footer__brand img { max-height: 32px; margin-bottom: 14px; display: block; }
/* 页脚「一段话」这行原来单独用了更浅的 --muted 且小 1px，和上面「品牌简介」那段并排看颜色不一致
   （客户 2026-09-16 反馈）。样张页脚那边两条都是普通 <p>、同色同号，这里也统一成和普通段落一致；
   真正该淡的那行是订阅框下面的提示（.news__note），它保持 --muted 不变。 */
.footer__col .footer__note { font-size: 14px; color: var(--ink-2); margin-top: 8px; }
.footer__bottom { margin-top: 46px; border-top: 1px solid var(--line); padding: 20px 0;
                  display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap;
                  font-size: 13px; color: var(--muted); }
.footer__links { display: flex; gap: 22px; margin: 0; padding: 0; list-style: none; }
.footer__links li { padding: 0; font-size: 13px; }
.social { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.social a, .social__ph { width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 50%;
            background: #fff; display: flex; align-items: center; justify-content: center;
            font-size: 12.5px; letter-spacing: .02em; color: var(--ink-2); }
.social a:hover { border-color: var(--ink); color: var(--ink); }
/* 链接还没填时用虚线圈占位，避免出现点了没反应的死链 */
.social__ph { border-style: dashed; color: var(--muted); cursor: default; }

/* ---------------------------------------------------------------- 响应式 */
@media (max-width: 1199px) {
    .pgrid { grid-template-columns: repeat(3, 1fr); }
    .blk__stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 991px) {
    body { padding-top: var(--h-h-m); }
    :root { --h-h: var(--h-h-m); }
    .site-header { height: var(--h-h-m); }
    .header__inner { height: var(--h-h-m); gap: 14px; }
    .mainnav, .hsearch { display: none; }
    .htoggle { display: block; }
    .brand img { max-height: 28px; }
    .hero__slides { height: 420px; }
    .hero__txt h1 { font-size: 32px; }
    .hero__txt p { font-size: 15.5px; }
    .pdetail { grid-template-columns: 1fr; gap: 34px; }
    .blk__ti { grid-template-columns: 1fr; gap: 24px; }
    .blk__ti--left .blk__ti__img { order: 0; }
    .blk__certs { grid-template-columns: repeat(2, 1fr); }
    .footer__grid { grid-template-columns: 1fr 1fr; gap: 30px; }
    .sec { padding: 62px 0; }
    .blk { padding: 50px 0; }
    .blk__timeline { padding-left: 118px; }
    .blk__timeline::before { left: 100px; }
    .blk__tl__year { left: -118px; width: 88px; }
}
@media (max-width: 767px) {
    h1 { font-size: 30px; }
    h2 { font-size: 23px; }
    .sec { padding: 48px 0; }
    .sec__head { margin-bottom: 30px; }
    .pgrid, .pgrid--3 { grid-template-columns: repeat(2, 1fr); gap: 18px 14px; }
    .cat-tiles { grid-template-columns: 1fr; gap: 14px; }
    .cat-tile, .cat-tile img { min-height: 200px; }
    .hero__slides { height: 340px; }
    .hero__txt h1 { font-size: 26px; }
    .form__row { grid-template-columns: 1fr; gap: 0; }
    .blk__stats { grid-template-columns: 1fr 1fr; gap: 14px; }
    .blk__stat { padding: 18px 16px; }
    .blk__stat__num { font-size: 26px; }
    .footer__grid { grid-template-columns: 1fr; gap: 26px; }
    .footer__bottom { flex-direction: column; }
    .pagehead h1 { font-size: 26px; }
    .phero { min-height: 250px; }
    .phero__in { padding-top: 54px; padding-bottom: 54px; }
    .phero h1 { font-size: 27px; }
    .phero p { font-size: 14.5px; }
    .pdetail__info h1 { font-size: 24px; }
    .pinfo__k { flex: 0 0 46%; }
    .blk__timeline { padding-left: 0; }
    .blk__timeline::before { display: none; }
    .blk__tl__year { position: static; width: auto; text-align: left; display: block; margin-bottom: 2px; }
    .blk__tl__item::before { display: none; }
    .blk__certs { grid-template-columns: 1fr; }
}
@media (max-width: 400px) {
    .pgrid, .pgrid--3 { grid-template-columns: 1fr; }
    .blk__stats { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------------
   图片横排（工厂/展厅实景）：白边框 + 浅灰底，成排照片墙
   --------------------------------------------------------------------------- */
/* 底色压深一档，白色相框才看得出来（参照图的关键质感） */
.blk__strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
              background: #e6e9ec; padding: 24px 0; }
.blk__strip__item { margin: 0; padding: 0 11px; }
.blk__strip__item img {
    width: 100%; height: 250px; object-fit: cover; display: block;
    border: 6px solid #fff; box-shadow: 0 1px 3px rgba(29, 33, 41, .06);
}
.blk__strip__item figcaption { font-size: 12.5px; color: var(--muted); text-align: center; margin-top: 9px; }

/* ---------------------------------------------------------------------------
   图文形象块：大图 + 浅灰大写标题（两侧细线）+ 简介
   --------------------------------------------------------------------------- */
.blk__showcase { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 58px; align-items: center; }
.blk__showcase__img img { width: 100%; display: block; }
.blk__showcase__title {
    display: flex; align-items: center; gap: 18px;
    font-size: 34px; font-weight: 200; letter-spacing: .08em; text-transform: uppercase;
    color: #c4c8ce; margin: 0 0 22px; line-height: 1.2;
}
.blk__showcase__title::before,
.blk__showcase__title::after { content: ""; flex: 0 0 1px; height: 32px; background: #d7dae0; }
.blk__showcase__txt p { color: var(--ink-2); font-size: 15.5px; }
.blk__showcase--right .blk__showcase__img { order: 2; }

@media (max-width: 991px) {
    .blk__showcase { grid-template-columns: 1fr; gap: 28px; }
    .blk__showcase--right .blk__showcase__img { order: 0; }
    .blk__showcase__title { font-size: 26px; }
}
@media (max-width: 767px) {
    .blk__strip { grid-template-columns: 1fr !important; }
    .blk__strip__item { padding: 0; margin-bottom: 12px; }
    .blk__strip__item img { height: 200px; }
    .blk__showcase__title { font-size: 21px; gap: 12px; }
}

/* 待上传占位框（图片块留空时使用，上传后自动消失） */
.blk .ph {
    display: flex; align-items: center; justify-content: center;
    height: 250px; border: 6px solid #fff; background: #e9ebee;
    box-shadow: 0 1px 3px rgba(29, 33, 41, .06);
    color: var(--muted); font-size: 13px; letter-spacing: .04em;
}
.blk .ph--wide { height: 360px; border: 1px dashed #cfd3d9; background: #eef0f2; }
/* 占位框里的建议尺寸（第二行小字），方便按尺寸准备图片 */
.blk .ph em { display: block; font-style: normal; font-size: 12px; letter-spacing: .04em;
              margin-top: 5px; opacity: .78; }

/* 列表页：标题与工具栏之间收紧，去掉标题下方的大片留白 */
.sec--list { padding: 30px 0 76px; }

/* ---------------------------------------------------------------------------
   要点列表（圆点）：对应国际站左栏 bullet 列表
   --------------------------------------------------------------------------- */
.blk__plist { margin: 20px 0 0; padding: 0; }
.blk__plist li { position: relative; padding-left: 26px; margin-bottom: 11px; color: var(--ink-2); font-size: 15px; line-height: 1.62; }
.blk__plist li::before { content: ""; position: absolute; left: 4px; top: 9px; width: 7px; height: 7px; border-radius: 50%; background: var(--ink); }

.blk__showcase__sub { color: var(--ink-2); font-size: 16px; margin: 0 0 14px; }

/* ---------------------------------------------------------------------------
   价值主张块（对应国际站 YOUR BEST CHOICE：左文右媒）
   --------------------------------------------------------------------------- */
.blk__points { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 56px; align-items: start; }
.blk__points__title {
    font-size: 40px; font-weight: 200; letter-spacing: .05em; text-transform: uppercase;
    color: var(--ink); margin: 0 0 18px; line-height: 1.16;
}
.blk__points__txt p { color: var(--ink-2); font-size: 15.5px; }
.blk__points__media img { width: 100%; display: block; }
.blk__points--right .blk__points__media { order: -1; }

/* ---------------------------------------------------------------------------
   照片墙（对应国际站 Activities & customers / 墙面照片）
   --------------------------------------------------------------------------- */
.blk--tint { background: #eef1f4; }
.blk__collage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr); gap: 48px; align-items: start; }
.blk__collage__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; align-items: start; }
.blk__collage__item { margin: 0; background: #fff; padding: 9px; box-shadow: 0 3px 14px rgba(29, 33, 41, .10); }
.blk__collage__item img { width: 100%; display: block; }
.blk__collage__item figcaption { font-size: 12.5px; color: var(--muted); padding-top: 9px; letter-spacing: .02em; }
/* 错落感：交替不同上边距，形成"墙面照片"的参差排布 */
.blk__collage__item--1 { margin-top: 0; }
.blk__collage__item--2 { margin-top: 38px; }
.blk__collage__item--3 { margin-top: 18px; }
.blk__collage__item--4 { margin-top: 50px; }

@media (max-width: 991px) {
    .blk__points { grid-template-columns: 1fr; gap: 30px; }
    .blk__points--right .blk__points__media { order: 0; }
    .blk__points__title { font-size: 30px; }
    .blk__collage { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 767px) {
    .blk__points__title { font-size: 24px; }
    .blk__collage__grid { gap: 14px; }
    .blk__collage__item { padding: 6px; }
    .blk__collage__item--2, .blk__collage__item--4 { margin-top: 22px; }
    .blk__collage__item--3 { margin-top: 10px; }
}

/* ---------------------------------------------------------------------------
   通栏区块：去掉容器宽度与上下留白，内容自己撑满（视频墙用）
   --------------------------------------------------------------------------- */
.blk--full { padding: 0; }
.blk--full + .blk { border-top: 0; }

/* ---------------------------------------------------------------------------
   三列故事卡
   --------------------------------------------------------------------------- */
.cards3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; }
.card3 { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
         overflow: hidden; display: flex; flex-direction: column;
         transition: box-shadow var(--ease), transform var(--ease); }
.card3:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.card3__im { position: relative; aspect-ratio: 1.9 / 1; background: #e9ebee; }
@supports not (aspect-ratio: 1.9 / 1) { .card3__im { height: 0; padding-bottom: 52.6%; } }
.card3__im img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* 未传图时的占位：撑满图位、去掉默认白边 */
.card3__im .ph { position: absolute; inset: 0; height: auto; border: 0; box-shadow: none; }
.card3__bd { padding: 22px 24px 26px; }
.card3__eb { font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase;
             color: var(--muted); margin-bottom: 8px; }
.card3__bd h3 { font-size: 19px; font-weight: 500; margin-bottom: 8px; }
.card3__bd p { font-size: 14px; color: var(--ink-2); margin: 0; }
.card3__more { display: inline-block; margin-top: 14px; font-size: 13.5px; font-weight: 500;
               border-bottom: 1px solid var(--line); padding-bottom: 2px;
               transition: border-color var(--ease); }
.card3:hover .card3__more { border-color: var(--ink); }

/* ---------------------------------------------------------------------------
   区块标题行 + 横滑轨道（案例横滑等复用）
   --------------------------------------------------------------------------- */
.headrow { display: flex; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-bottom: 30px; }
.headrow__txt .blk__head { margin-bottom: 0; }
.headrow__ctl { display: flex; gap: 8px; margin-left: auto; }
.railbtn { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line);
           background: var(--surface); cursor: pointer; color: var(--ink); font-size: 15px;
           line-height: 1; padding: 0; transition: all var(--ease); }
.railbtn:hover { border-color: var(--ink); background: var(--ink); color: #fff; }
.railbtn:focus-visible { outline: 2px solid var(--ink-2); outline-offset: 2px; }

/* 横滑轨道：用 proximity 而不是 mandatory —— mandatory 会把不足一屏的位移强行吸回，
   箭头点了不动（已踩过的坑）；隐藏滚动条，靠箭头和触控滑动 */
[data-track] { display: flex; overflow-x: auto; scroll-snap-type: x proximity;
               scrollbar-width: none; -ms-overflow-style: none; }
[data-track]::-webkit-scrollbar { display: none; }
.hl__track { gap: 26px; padding-bottom: 6px; }
/* 卡片少到一屏放得下时：取消吸附、让卡片平分整行，右侧不留空档
   （窄屏会退回可横滑状态，此时箭头由 JS 自动显示） */
.hl__track.is-static { scroll-snap-type: none; }
.hl__track.is-static .hl__card { flex: 1 1 0; min-width: 0; }
.hl__card { flex: 0 0 400px; scroll-snap-align: start; background: var(--surface);
            border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
            transition: box-shadow var(--ease); }
.hl__card:hover { box-shadow: var(--shadow); }
.hl__media { display: block; position: relative; aspect-ratio: 16 / 10;
             background: #e9ebee; overflow: hidden; }
@supports not (aspect-ratio: 16 / 10) { .hl__media { height: 0; padding-bottom: 62.5%; } }
.hl__media img { position: absolute; inset: 0; width: 100%; height: 100%;
                 object-fit: cover; transition: transform .6s ease; }
.hl__card:hover .hl__media img { transform: scale(1.04); }
.hl__media .ph { position: absolute; inset: 0; height: auto; border: 0; box-shadow: none; }
.hl__bd { padding: 20px 22px 22px; }
.hl__bd h3 { font-size: 18px; font-weight: 500; margin-bottom: 6px; }
.hl__bd p { font-size: 13.5px; color: var(--ink-2); margin: 0; }
.hl__link { display: inline-block; margin-top: 14px; font-size: 12px; letter-spacing: .12em;
            text-transform: uppercase; font-weight: 500; border-bottom: 1px solid var(--line);
            padding-bottom: 3px; transition: border-color var(--ease); }
.hl__card:hover .hl__link { border-color: var(--ink); }

/* ---------------------------------------------------------------------------
   居中引言
   --------------------------------------------------------------------------- */
.blk__quote { max-width: 820px; margin: 0 auto; text-align: center; }
.blk__quote blockquote { margin: 0; font-size: 26px; font-weight: 300; line-height: 1.55;
                         letter-spacing: -.008em; color: var(--ink); }
.blk__quote blockquote::before,
.blk__quote blockquote::after { content: ""; display: block; width: 34px; height: 1px;
                                background: var(--line); margin: 0 auto; }
.blk__quote blockquote::before { margin-bottom: 26px; }
.blk__quote blockquote::after { margin-top: 26px; }
.blk__quote__src { display: block; margin-top: 18px; font-size: 13.5px; color: var(--muted); font-style: normal; }

/* ---------------------------------------------------------------------------
   视频墙：整页唯一的深色块（深灰而非纯黑）
   --------------------------------------------------------------------------- */
.vwall { position: relative; background: var(--slate) center / cover no-repeat; }
.vwall::after { content: ""; position: absolute; inset: 0; background: rgba(15, 18, 22, .16); }
.vwall__in { position: relative; z-index: 2; min-height: 420px; padding: 40px 20px;
             display: flex; flex-direction: column; align-items: center; justify-content: center;
             gap: 16px; color: #fff; text-align: center; }
.vwall__play { width: 76px; height: 76px; border-radius: 50%; border: 1px solid rgba(255,255,255,.6);
               background: rgba(255,255,255,.12); color: #fff; cursor: pointer; padding: 0;
               display: flex; align-items: center; justify-content: center; transition: all var(--ease); }
.vwall__play svg { margin-left: 4px; }
.vwall__play:hover { background: #fff; color: var(--slate); border-color: #fff; transform: scale(1.06); }
.vwall__play--off { opacity: .42; cursor: default; }
.vwall__play--off:hover { background: rgba(255,255,255,.12); color: #fff;
                          border-color: rgba(255,255,255,.6); transform: none; }
.vwall__cap { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; }
.vwall__hint { font-size: 12px; color: rgba(255,255,255,.55); }

/* 视频灯箱 */
.lbox { position: fixed; inset: 0; z-index: 200; background: rgba(10, 12, 16, .9);
        display: none; align-items: center; justify-content: center; padding: 36px; }
.lbox.is-open { display: flex; }
.lbox__frame { position: relative; width: 100%; max-width: 1040px; aspect-ratio: 16 / 9; background: #000; }
@supports not (aspect-ratio: 16 / 9) { .lbox__frame { height: 0; padding-bottom: 56.25%; } }
.lbox__frame iframe, .lbox__frame video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.lbox__x { position: absolute; top: -40px; right: 0; background: none; border: 0; color: #fff;
           font-size: 22px; line-height: 1; cursor: pointer; padding: 0; }

/* ---------------------------------------------------------------------------
   大标题段
   --------------------------------------------------------------------------- */
.bigh { max-width: 720px; margin: 0 auto; text-align: center; }
.bigh__h { font-size: 38px; font-weight: 300; letter-spacing: -.01em; line-height: 1.3; margin-bottom: 16px; }
.bigh__p { font-size: 21px; font-weight: 300; line-height: 1.5; color: var(--ink-2); margin: 0; }
.bigh__body { margin-top: 18px; color: var(--ink-2); }

/* ---------------------------------------------------------------------------
   页脚订阅表单（对应旧模板的 Newsletter 列）
   --------------------------------------------------------------------------- */
.news { display: flex; max-width: 300px; }
.news input { flex: 1 1 auto; min-width: 0; padding: 10px 12px; font-family: inherit; font-size: 13.5px;
              color: var(--ink); background: #fff; border: 1px solid var(--line); border-right: 0;
              border-radius: var(--radius) 0 0 var(--radius); }
.news input:focus { outline: none; border-color: var(--ink-2); }
.news button { flex: 0 0 44px; width: 44px; font-size: 15px; line-height: 1; color: var(--ink);
               background: #fff; border: 1px solid var(--line); cursor: pointer;
               border-radius: 0 var(--radius) var(--radius) 0; transition: all var(--ease); }
.news button:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
.news__note { font-size: 12px; color: var(--muted); margin-top: 9px; line-height: 1.6; }

/* ---------------------------------------------------------------------------
   新区块的响应式
   --------------------------------------------------------------------------- */
@media (max-width: 1199px) {
    .cards3 { gap: 26px; }
}
@media (max-width: 991px) {
    .cards3 { grid-template-columns: repeat(2, 1fr); gap: 24px; }
    .hl__card { flex: 0 0 340px; }
    .vwall__in { min-height: 350px; }
    .blk__quote blockquote { font-size: 22px; }
    .bigh__h { font-size: 30px; }
    .bigh__p { font-size: 19px; }
}
@media (max-width: 767px) {
    .cards3 { grid-template-columns: 1fr; gap: 20px; }
    .hl__card { flex: 0 0 84%; }
    /* 窄屏即使只有 2 张卡也放不下，退回可横滑状态（箭头由 JS 重新显示） */
    .hl__track.is-static .hl__card { flex: 0 0 84%; }
    .hl__track { gap: 16px; }
    .vwall__in { min-height: 270px; gap: 12px; }
    .vwall__play { width: 62px; height: 62px; }
    .blk__quote blockquote { font-size: 19px; }
    .blk__quote blockquote::before,
    .blk__quote blockquote::after { width: 26px; }
    .bigh__h { font-size: 25px; }
    .bigh__p { font-size: 17px; }
    .headrow { margin-bottom: 22px; }
}


/* ============================================================================
   二级菜单「悬停断层」修复

   背景：products / cases / contact 以及各内容页走的是这份 rebuild.css（不是 sample.css）。
   客户实测的问题正出在这些页面上：鼠标从一级项往下移、还没碰到二级项，菜单就消失了。

   原因：面板放在 calc(100% + 8px)，与一级项之间有 8px 空隙；
   而显示条件挂在一级项的 :hover 上（.mainnav li.has-children:hover > .subnav）。
   指针穿过这 8px 时，既不在 li 里、也不在面板里，:hover 立即失效 → 面板收起。

   修法：给面板加一条**透明的桥**，把这 8px 空隙填满。
   桥属于面板，而面板本身又是 li 的子元素 —— 所以指针落在桥上时，
   li 依然处于 :hover，面板不会收。间距与桥高共用 --subgap 变量，
   将来调整间距也不会再错位。

   安全性：
   · 只在桌面（≥992px，面板是浮层）启用；≤991px 是抽屉菜单、面板不浮动，
     加了桥反而会跑位，所以用 min-width 限住。
   · 面板隐藏时是 visibility:hidden，本身不可点击，所以桥也不会挡住下面的内容。
   ============================================================================ */
@media (min-width: 992px) {
    .subnav::before {
        content: ""; position: absolute; left: 0; right: 0;
        top: calc(-1 * var(--subgap)); height: var(--subgap);
    }
}

/* ============================================================================
   Insights 文章版块（2026-09-18 新增）

   来由：客户要做内容推广、让文章能被谷歌搜到，但官网定位是极简纯英文展示站、
   不要「新闻中心」。所以做成 Insights：内容是给买家看的采购知识，不是公司动态。

   版式沿用产品卡那一套语言（图片 + 卡片下方文字），但三处不同：
     1. 3 列而不是 4 列 —— 文章标题比产品名长，4 列会挤成两行半；
     2. 配图用 3:2 横图而不是 1:1 —— 文章配图多为横幅，裁正方形会切掉主体；
     3. 卡片多一行摘要（3 行截断），让列表页能被快速扫读。
   颜色只用既有设计变量，不引入新的色值。
   ============================================================================ */

.igrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px 26px; }
.igrid--3 { grid-template-columns: repeat(3, 1fr); }

.icard { background: transparent; }
.icard__media { position: relative; display: block; overflow: hidden; background: var(--soft);
  border: 1px solid var(--line); aspect-ratio: 3 / 2; }
@supports not (aspect-ratio: 3 / 2) { .icard__media { height: 0; padding-bottom: 66.67%; } }
/* 没配图时的占位：只留一块浅灰，不出现破图图标 */
.icard__ph { position: absolute; inset: 0; background: var(--soft); }
.icard__media img { position: absolute; inset: 0; width: 100%; height: 100%;
                    object-fit: cover; transition: transform .6s ease; }
.icard:hover .icard__media img { transform: scale(1.05); }

.icard__body { padding: 16px 2px 0; }
.icard__meta { font-size: 12.5px; color: var(--muted); margin: 0 0 9px; letter-spacing: .02em; }
.icard__meta .dot { margin: 0 7px; opacity: .6; }
.icard__title { font-size: 17px; font-weight: 500; line-height: 1.42; margin: 0 0 9px; }
.icard__title a:hover { color: var(--ink-2); }
.icard__sum { font-size: 14px; color: var(--ink-2); line-height: 1.65; margin: 0 0 12px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.icard__more { font-size: 13.5px; color: var(--ink); border-bottom: 1px solid var(--line);
               padding-bottom: 1px; transition: border-color var(--ease); }
.icard:hover .icard__more { border-color: var(--ink); }

/* ---------------------------------------------------------------- 文章详情 */
.article { padding: 40px 0 0; }
.article__head { max-width: 780px; }
.article__meta { font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase;
                 color: var(--muted); margin: 0 0 16px; }
.article__meta .dot { margin: 0 8px; opacity: .6; }
.article__head h1 { font-size: 36px; line-height: 1.25; margin: 0 0 18px; }
.article__lead { font-size: 18px; color: var(--ink-2); line-height: 1.7; margin: 0; }
.article__hero { margin: 38px 0 0; border: 1px solid var(--line); background: var(--soft); }
.article__hero img { display: block; width: 100%; height: auto; }

/* 正文按 780px 单栏、16.5px 行高 1.8 —— 长文可读性优先，不用全宽 */
.article__body { max-width: 780px; margin: 42px 0 0; font-size: 16.5px; line-height: 1.8; color: var(--ink-2); }
.article__body h2 { font-size: 22px; line-height: 1.35; color: var(--ink); margin: 40px 0 14px; }
.article__body p { margin: 0 0 20px; }
.article__body strong { color: var(--ink); font-weight: 600; }
.article__body ul { margin: 0 0 22px; padding-left: 22px; }
.article__body li { margin-bottom: 9px; }
/* 正文里手写的 | 表格 | 由 news_flush() 转成真表格，窄屏可横向滚动而不是撑破版面 */
.tablewrap { overflow-x: auto; margin: 0 0 26px; }
.article__body table { border-collapse: collapse; width: 100%; font-size: 15px; }
.article__body th, .article__body td { border: 1px solid var(--line); padding: 11px 14px;
                                       text-align: left; vertical-align: top; }
.article__body th { background: var(--soft); color: var(--ink); font-weight: 500; }

.article__cta { max-width: 780px; margin: 46px 0 0; padding: 30px 32px;
                border: 1px solid var(--line); background: var(--surface); }
.article__cta__eyebrow { font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
                         color: var(--muted); margin: 0 0 11px; }
.article__cta h3 { font-size: 20px; margin: 0 0 10px; }
.article__cta p { color: var(--ink-2); font-size: 15px; margin: 0 0 20px; }
.article__back { max-width: 780px; margin: 30px 0 0; font-size: 14px; }
.article__back a { color: var(--ink-2); }

/* ---------------------------------------------------------------- 列表页底部询盘带 */
.ctaband { display: flex; align-items: center; justify-content: space-between; gap: 32px;
           border-top: 1px solid var(--line); padding-top: 44px; flex-wrap: wrap; }
.ctaband__txt h2 { font-size: 24px; margin: 0 0 10px; }
.ctaband__txt p { color: var(--muted); margin: 0; max-width: 620px; }

/* ---------------------------------------------------------------- 断点
   与全站口径一致：991px 平板、767px 手机。 */
@media (max-width: 991px) {
    .igrid, .igrid--3 { grid-template-columns: repeat(2, 1fr); gap: 34px 22px; }
    .article__head h1 { font-size: 30px; }
}
@media (max-width: 767px) {
    .igrid, .igrid--3 { grid-template-columns: 1fr; gap: 32px; }
    .article { padding: 24px 0 0; }
    .article__head h1 { font-size: 26px; }
    .article__lead { font-size: 16.5px; }
    .article__body { font-size: 16px; margin-top: 30px; }
    .article__body h2 { font-size: 20px; margin-top: 32px; }
    .article__cta { padding: 24px 20px; }
    .ctaband { flex-direction: column; align-items: flex-start; gap: 20px; padding-top: 34px; }
}