/* =========================================================
   汇世源科技 · 官网样式表
   HUISHI TECHNOLOGY  |  www.schsy.net
   ========================================================= */

/* ---------- 1. 变量 ---------- */
/* 主色调对齐《2026 企宣》封面：青蓝 #00AEEF 为品牌主色，
   深色底从原来的海军蓝改为深青蓝，全站统一。 */
:root {
    --navy: #052C42;
    --navy-2: #0A4C6B;
    --blue: #00AEEF;
    --blue-2: #2CC1F5;
    --blue-3: #7ED9FA;
    --orange: #E8542B;
    --orange-2: #F58A29;
    --ink: #0A2A3D;
    --body: #3D5A6E;
    --muted: #5F7C90;
    --line: #E1EEF7;
    --line-2: #EFF8FD;
    --bg: #FFFFFF;
    --bg-soft: #F4FAFE;
    --bg-mist: #E6F6FE;
    --ok: #1C9E6B;

    --grad-brand: linear-gradient(120deg, #0095D6 0%, #00AEEF 52%, #2CC1F5 100%);
    --grad-blue: linear-gradient(135deg, #04202F 0%, #08405C 56%, #0B5A7E 100%);
    --grad-soft: linear-gradient(180deg, #FFFFFF 0%, #F1F9FE 100%);

    --shadow-sm: 0 2px 8px rgba(5, 44, 66, .06);
    --shadow: 0 10px 30px rgba(5, 44, 66, .08);
    --shadow-lg: 0 24px 60px rgba(5, 44, 66, .14);
    --shadow-blue: 0 14px 34px rgba(0, 174, 239, .26);

    --r-sm: 8px;
    --r: 14px;
    --r-lg: 22px;
    --r-pill: 999px;

    --w: 1200px;
    --pad: 88px;

    --ease: cubic-bezier(.22, .68, .35, 1);
    --font: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Source Han Sans SC",
        "Noto Sans CJK SC", "WenQuanYi Micro Hei", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-num: "DIN Alternate", "Bahnschrift", "Segoe UI", Roboto, Arial, sans-serif;
}

/* ---------- 2. 基础 ---------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

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

body {
    margin: 0;
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.85;
    color: var(--body);
    background: var(--bg);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

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

a {
    color: var(--blue);
    text-decoration: none;
    transition: color .25s var(--ease);
}

a:hover {
    color: var(--orange);
}

h1, h2, h3, h4, h5 {
    margin: 0;
    color: var(--ink);
    font-weight: 700;
    line-height: 1.32;
    letter-spacing: -.2px;
}

p {
    margin: 0 0 1em;
}

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

button {
    font-family: inherit;
    cursor: pointer;
    border: 0;
    background: none;
}

::selection {
    background: rgba(0, 174, 239, .18);
}

/* ---------- 3. 布局 ---------- */
.wrap {
    width: 100%;
    max-width: var(--w);
    margin: 0 auto;
    padding: 0 24px;
}

.wrap-wide {
    max-width: 1440px;
}

.section {
    padding: var(--pad) 0;
    position: relative;
}

.section-sm {
    padding: 56px 0;
}

.bg-soft {
    background: var(--bg-soft);
}

.bg-mist {
    background: var(--bg-mist);
}

.bg-gradient {
    background: var(--grad-soft);
}

/* ---------- 4. 标题块 ---------- */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    letter-spacing: 2.4px;
    font-weight: 700;
    color: var(--blue);
    text-transform: uppercase;
    margin-bottom: 14px;
}

.eyebrow::before {
    content: "";
    width: 26px;
    height: 2px;
    background: var(--grad-brand);
    border-radius: 2px;
}

.sec-head {
    max-width: 760px;
    margin-bottom: 50px;
}

/* 个别区块副标题整句只差二三十像素就换行，末尾两字被挤到第二行
   （如「…现场只需对接与运行。」「…的嘉奖。」）。给该区块标题容器放宽即可一行，
   不动其他区块的 760px 行宽。 */
.sec-head.wide {
    max-width: 860px;
}

.sec-head.center {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.sec-head.center .eyebrow {
    justify-content: center;
}

.sec-title {
    font-size: 38px;
    line-height: 1.28;
    margin-bottom: 16px;
}

.sec-title em {
    font-style: normal;
    background: var(--grad-brand);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.sec-sub {
    color: var(--muted);
    font-size: 16px;
    margin: 0;
}

.sec-head.on-dark .sec-title {
    color: #fff;
}

.sec-head.on-dark .sec-sub {
    color: rgba(255, 255, 255, .72);
}

.sec-head.on-dark .eyebrow {
    color: var(--blue-3);
}

/* ---------- 5. 按钮 ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 14px 30px;
    border-radius: var(--r-pill);
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: .4px;
    transition: all .3s var(--ease);
    white-space: nowrap;
}

.btn svg {
    width: 16px;
    height: 16px;
    flex: none;
}

.btn-primary {
    background: var(--grad-brand);
    color: #fff;
    box-shadow: 0 10px 24px rgba(0, 174, 239, .30);
}

.btn-primary:hover {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 16px 34px rgba(0, 174, 239, .42);
}

.btn-blue {
    background: var(--blue);
    color: #fff;
    box-shadow: var(--shadow-blue);
}

.btn-blue:hover {
    background: var(--blue-2);
    color: #fff;
    transform: translateY(-2px);
}

.btn-ghost {
    border: 1.5px solid rgba(255, 255, 255, .5);
    color: #fff;
}

.btn-ghost:hover {
    background: rgba(255, 255, 255, .14);
    border-color: #fff;
    color: #fff;
}

.btn-outline {
    border: 1.5px solid var(--line);
    color: var(--ink);
    background: #fff;
}

.btn-outline:hover {
    border-color: var(--blue);
    color: var(--blue);
}

.btn-sm {
    padding: 10px 20px;
    font-size: 14px;
}

/* ---------- 6. 页头 ---------- */
.header {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 900;
    transition: background .35s var(--ease), box-shadow .35s var(--ease), padding .35s var(--ease);
    padding: 14px 0;
}

.header::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(14px);
    opacity: 0;
    transition: opacity .35s var(--ease);
}

.header.solid {
    box-shadow: 0 1px 0 var(--line), 0 8px 26px rgba(5, 44, 66, .06);
    padding: 8px 0;
}

/* 首页首屏本身就是白的：页头一开始就带极细下划线，滚动前也不至于「悬空」 */
.header.header-home:not(.solid) {
    box-shadow: 0 1px 0 rgba(225, 238, 247, .9);
}

.header.solid::after {
    opacity: 1;
}

.header .wrap {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 28px;
}

.brand {
    display: flex;
    align-items: center;
    flex: none;
}

.brand img {
    height: 44px;
    width: auto;
    transition: height .35s var(--ease);
}

.header.solid .brand img {
    height: 38px;
}

/* 全站透明页头统一走深色 logo。
   首页首屏与内页 banner 现在都是浅底，白 logo 会完全看不见，
   因此白色版 logo 全站不再使用，只保留深色版。 */
.header:not(.solid) .logo-dark {
    display: block;
}

.header .logo-light {
    display: none;
}

.nav {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
}

.nav a {
    position: relative;
    padding: 10px 15px;
    font-size: 15px;
    font-weight: 500;
    color: var(--body);
    border-radius: var(--r-sm);
    transition: color .25s var(--ease);
}

.nav a::after {
    content: "";
    position: absolute;
    left: 15px;
    right: 15px;
    bottom: 2px;
    height: 2px;
    border-radius: 2px;
    background: var(--grad-brand);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .3s var(--ease);
}

.nav a:hover,
.nav a.active {
    color: var(--ink);
}

/* 说明：这里原先是一组「仅首页透明态用深色」的覆盖规则。
   内页 banner 改为浅底后全站已无深色 banner，深色文字成为默认值，故移除。 */

.nav a:hover::after,
.nav a.active::after {
    transform: scaleX(1);
}

.header.solid .nav a {
    color: var(--body);
}

.header.solid .nav a:hover,
.header.solid .nav a.active {
    color: var(--blue);
}

.header-contact {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-left: 20px;
    border-left: 1px solid var(--line);
    color: var(--ink);
    font-weight: 700;
    font-size: 16px;
    letter-spacing: .3px;
    font-family: var(--font-num);
    flex: none;
}

.header-contact svg {
    width: 17px;
    height: 17px;
    opacity: .9;
}

.header.solid .header-contact {
    border-color: var(--line);
    color: var(--blue);
}

.header-cta {
    flex: none;
    padding: 11px 24px;
    font-size: 14px;
}

/* 汉堡 */
.burger {
    display: none;
    width: 42px;
    height: 42px;
    border-radius: 10px;
    align-items: center;
    justify-content: center;
    flex: none;
}

.burger span {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--ink);
    border-radius: 2px;
    position: relative;
    transition: background .2s;
}

.burger span::before,
.burger span::after {
    content: "";
    position: absolute;
    left: 0;
    width: 20px;
    height: 2px;
    background: inherit;
    border-radius: 2px;
    transition: transform .3s var(--ease);
}

.burger span::before {
    top: -6px;
}

.burger span::after {
    top: 6px;
}

.header.solid .burger span,
.header.solid .burger span::before,
.header.solid .burger span::after {
    background: var(--ink);
}

body.nav-open .burger span {
    background: transparent;
}

body.nav-open .burger span::before {
    transform: translateY(6px) rotate(45deg);
}

body.nav-open .burger span::after {
    transform: translateY(-6px) rotate(-45deg);
}

/* 移动端抽屉 */
.drawer {
    position: fixed;
    inset: 0;
    z-index: 890;
    background: #fff;
    padding: 96px 28px 32px;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform .38s var(--ease), visibility .38s;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

body.nav-open .drawer {
    transform: none;
    visibility: visible;
}

body.nav-open {
    overflow: hidden;
}

.drawer a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 17px 4px;
    font-size: 17px;
    font-weight: 600;
    color: var(--ink);
    border-bottom: 1px solid var(--line-2);
}

.drawer a.active {
    color: var(--blue);
}

.drawer a svg {
    width: 16px;
    height: 16px;
    color: var(--muted);
}

.drawer-foot {
    margin-top: auto;
    padding-top: 28px;
}

.drawer-foot .btn {
    width: 100%;
}

.drawer-foot small {
    display: block;
    margin-top: 16px;
    color: var(--muted);
    text-align: center;
}

/* ---------- 7. 首屏 ---------- */
/* 白底「展陈式」首屏：文案居中 → 设备全景实拍横贯 → 数据带。
   无背景动画、无深色底；轻奢科技感来自大留白 + 极细线 + 克制的青蓝点缀。 */
.hero {
    position: relative;
    background: #FFFFFF;
    padding: 132px 0 0;
    overflow: hidden;
}

/* 极浅精密网格，只在上半部隐约可见 */
.hero-grid {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(8, 32, 47, .042) 1px, transparent 1px),
        linear-gradient(90deg, rgba(8, 32, 47, .042) 1px, transparent 1px);
    background-size: 72px 72px;
    -webkit-mask-image: radial-gradient(126% 72% at 50% 4%, #000 0%, transparent 74%);
    mask-image: radial-gradient(126% 72% at 50% 4%, #000 0%, transparent 74%);
}

/* 顶部灯晕：极淡青蓝，营造展厅顶光，不形成色块 */
.hero-halo {
    position: absolute;
    left: 50%;
    top: -320px;
    width: 1200px;
    height: 680px;
    transform: translateX(-50%);
    background: radial-gradient(50% 50% at 50% 50%, rgba(0, 174, 239, .15), transparent 68%);
    pointer-events: none;
    z-index: 0;
}

.hero .wrap {
    position: relative;
    z-index: 2;
}

.hero-inner {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 20px 8px 14px;
    border-radius: var(--r-pill);
    background: #fff;
    border: 1px solid var(--line);
    box-shadow: 0 4px 16px rgba(8, 32, 47, .05);
    color: var(--ink);
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: .6px;
    margin-bottom: 26px;
}

.hero-badge i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--blue);
    box-shadow: 0 0 0 4px rgba(0, 174, 239, .16);
}

.hero h1 {
    color: var(--ink);
    font-size: 52px;
    font-weight: 800;
    line-height: 1.18;
    letter-spacing: -1.2px;
    margin-bottom: 22px;
}

/* 浅底上用纯色青蓝，比渐变填充更干净、更像印刷品 */
.hero h1 span {
    color: var(--blue);
}

.hero-lead {
    font-size: 17.5px;
    line-height: 1.92;
    color: var(--body);
    max-width: 700px;
    margin: 0 auto 32px;
}

.hero-actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 38px;
}

/* 使命手写体：浅底用深色版，作为签名收尾 */
.hero-mission {
    display: block;
    height: 46px;
    width: auto;
    margin: 0 auto;
    opacity: .9;
}

/* ---- 设备全景：白底实拍，与页面白底无缝衔接 ---- */
.hero-stage {
    position: relative;
    z-index: 1;
    margin-top: 44px;
}

/* 设备全景「撑到接近视口边缘」：解除内容区 1152px 宽度限制，只留一道极窄安全边，
   让设备阵列透出画面，不再被内容栏宽度截住。clamp + vw 随视口缩放，
   超宽屏也不会被拉大到失真。 */
.hero-stage .wrap {
    max-width: none;
    padding: 0 clamp(16px, 2vw, 40px);
}

.hero-lineup {
    display: block;
    width: 100%;
    height: auto;
}

/* ---- 数据带：无底色，靠极细线分隔 ---- */
.hero-facts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    margin-top: 0;
}

.hero-facts li {
    padding: 28px 30px;
    border-left: 1px solid var(--line);
}

.hero-facts li:first-child {
    border-left: 0;
}

.hero-facts b {
    display: block;
    font-family: var(--font-num);
    font-size: 30px;
    font-weight: 800;
    color: var(--ink);
    line-height: 1.1;
    letter-spacing: -.5px;
}

.hero-facts b i {
    font-style: normal;
    font-size: 17px;
    margin-left: 2px;
    font-weight: 700;
    color: var(--blue);
}

/* 只作用于 li 的直接子 span（说明文字）；
   <b> 内部包着 <span data-count> 用来做数字动画，不能被一起压成小字 */
.hero-facts li > span {
    display: block;
    margin-top: 7px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--muted);
}

.hero-facts b span {
    display: inline;
    margin: 0;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
}

/* 内页 banner：改用与首页同一套「白底展陈」语言——白底 + 极浅网格 +
   右侧隐约的实拍底纹，深色标题左对齐。不再是深蓝渐变照片底，避免与首页割裂。 */
.pagehead {
    position: relative;
    padding: 172px 0 78px;
    background: #FFFFFF;
    border-bottom: 1px solid var(--line);
    overflow: hidden;
}

/* 极浅精密网格，从左上向右下淡出，左侧文字区保持干净 */
.pagehead::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(8, 32, 47, .04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(8, 32, 47, .04) 1px, transparent 1px);
    background-size: 72px 72px;
    -webkit-mask-image: radial-gradient(128% 104% at 8% 0%, #000 0%, transparent 76%);
    mask-image: radial-gradient(128% 104% at 8% 0%, #000 0%, transparent 76%);
}

/* 实拍照片转为极淡灰底纹，只从右侧隐约透出，不形成色块 */
.pagehead .hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-size: cover;
    background-position: center;
    filter: grayscale(1);
    opacity: .05;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 74%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 74%);
}

.pagehead .wrap {
    position: relative;
    z-index: 2;
}

.pagehead h1 {
    color: var(--ink);
    font-size: 44px;
    margin-bottom: 14px;
}

.pagehead p {
    color: var(--body);
    font-size: 17px;
    max-width: 640px;
    margin: 0;
}

.crumb {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 13.5px;
    color: var(--muted);
    margin-bottom: 20px;
}

.crumb a {
    color: var(--body);
}

.crumb a:hover {
    color: var(--blue);
}

.crumb svg {
    width: 13px;
    height: 13px;
    opacity: .6;
}

/* 内页 banner 的装饰光晕。
   注意：这套基础定义原先挂在首屏块里，首页改白底时被一并删掉过，
   导致「取消蓝底」的改动把内页 banner 的光晕也弄没了——它由 .pagehead 复用，必须留在这里。 */
.hero-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    pointer-events: none;
    z-index: 1;
}

.hero-glow.g1 {
    width: 620px;
    height: 620px;
    right: -160px;
    top: -180px;
    background: rgba(0, 174, 239, .40);
}

.pagehead .hero-glow.g1 {
    right: -200px;
    top: -260px;
    background: radial-gradient(circle, rgba(0, 174, 239, .30), transparent 70%);
}

/* ---------- 8. 卡片 / 网格 ---------- */
.grid {
    display: grid;
    gap: 26px;
}

/* 栅格降级为单列时也必须写 minmax(0, 1fr)，不能写 1fr：
   1fr 等价 minmax(auto, 1fr)，轨道最小值会取子项的内容最小宽度，
   而参数表 table.tbl 的 min-width 是 560px —— 于是窄屏下满宽轨道被顶到 562px，
   整页多出 90px 横向滚动（2026-09-13 在产品中心页抓到并修掉）。 */
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

.card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 32px 28px;
    transition: all .35s var(--ease);
    position: relative;
    overflow: hidden;
}

.card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: var(--grad-brand);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .4s var(--ease);
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow);
    border-color: transparent;
}

.card:hover::before {
    transform: scaleX(1);
}

.card-ico {
    width: 54px;
    height: 54px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-mist);
    color: var(--blue);
    margin-bottom: 20px;
    transition: all .35s var(--ease);
}

.card-ico svg {
    width: 26px;
    height: 26px;
}

.card:hover .card-ico {
    background: var(--grad-brand);
    color: #fff;
}

.card h3 {
    font-size: 19px;
    margin-bottom: 10px;
}

.card p {
    color: var(--muted);
    font-size: 14.5px;
    line-height: 1.85;
    margin: 0;
}

.card .num {
    position: absolute;
    right: 20px;
    top: 12px;
    font-family: var(--font-num);
    font-size: 46px;
    font-weight: 800;
    color: var(--line-2);
    line-height: 1;
}

/* 能力条 */
.cap {
    display: grid;
    grid-template-columns: 62px 1fr;
    gap: 20px;
    align-items: start;
}

.cap-n {
    width: 62px;
    height: 62px;
    border-radius: 18px;
    background: var(--bg-mist);
    color: var(--blue);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .35s var(--ease);
}

.cap-n svg {
    width: 28px;
    height: 28px;
}

.card:hover .cap-n {
    background: var(--grad-brand);
    color: #fff;
    transform: rotate(-6deg);
}

/* ---------- 9. 产品 ---------- */
.tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-bottom: 42px;
}

.tab {
    padding: 11px 24px;
    border-radius: var(--r-pill);
    font-size: 14.5px;
    font-weight: 600;
    color: var(--body);
    background: #fff;
    border: 1px solid var(--line);
    transition: all .28s var(--ease);
}

.tab:hover {
    border-color: var(--blue-3);
    color: var(--blue);
}

.tab.on {
    background: var(--blue);
    border-color: var(--blue);
    color: #fff;
    box-shadow: var(--shadow-blue);
}

.pcard {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: all .35s var(--ease);
}

.pcard:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
    border-color: transparent;
}

.pcard-img {
    height: 230px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 22px;
    border-bottom: 1px solid var(--line-2);
    position: relative;
    overflow: hidden;
}

.pcard-img img {
    max-height: 100%;
    max-width: 100%;
    width: auto;
    object-fit: contain;
    transition: transform .5s var(--ease);
}

.pcard:hover .pcard-img img {
    transform: scale(1.05);
}

.pcard-img.fill {
    padding: 0;
    background: var(--bg-mist);
}

.pcard-img.fill img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pcard-tag {
    position: absolute;
    left: 16px;
    top: 16px;
    z-index: 2;
    padding: 5px 13px;
    border-radius: var(--r-pill);
    background: rgba(5, 44, 66, .78);
    backdrop-filter: blur(6px);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .4px;
}

.pcard-body {
    padding: 24px 26px 28px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.pcard-body h3 {
    font-size: 19px;
    margin-bottom: 4px;
}

.pcard-en {
    font-family: var(--font-num);
    font-size: 11.5px;
    letter-spacing: 1.6px;
    color: var(--muted);
    text-transform: uppercase;
    margin-bottom: 14px;
}

.pcard-body p {
    font-size: 14.5px;
    color: var(--muted);
    margin-bottom: 18px;
}

.spec {
    display: grid;
    gap: 8px;
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px dashed var(--line);
}

.spec li {
    display: flex;
    gap: 10px;
    font-size: 13.5px;
    color: var(--body);
    line-height: 1.6;
}

.spec li::before {
    content: "";
    flex: none;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--orange);
    margin-top: 8px;
}

/* 标签不参与压缩、不折行。
   否则「外观与运营：」这类长标签会被 flex 折断成「…外观与运 / 营：」，
   折行后内容错位、右半边留一大片空白。统一标签列宽后内容左边缘对齐。 */
.spec li strong {
    flex: none;
    white-space: nowrap;
    min-width: 7em;
    color: var(--ink);
    font-weight: 600;
}

.chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.chip {
    padding: 5px 12px;
    border-radius: var(--r-pill);
    background: var(--bg-mist);
    color: var(--blue);
    font-size: 12.5px;
    font-weight: 600;
}

/* 参数表 */
.tbl-wrap {
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: #fff;
}

table.tbl {
    width: 100%;
    border-collapse: collapse;
    min-width: 560px;
    font-size: 14.5px;
}

table.tbl th {
    background: var(--bg-mist);
    color: var(--navy);
    font-weight: 700;
    text-align: left;
    padding: 14px 18px;
    white-space: nowrap;
    font-size: 14px;
}

table.tbl td {
    padding: 13px 18px;
    border-top: 1px solid var(--line-2);
    color: var(--body);
}

table.tbl tbody tr:hover td {
    background: #FAFDFF;
}

table.tbl td:first-child {
    font-weight: 600;
    color: var(--ink);
    font-family: var(--font-num);
}

/* ---------- 10. 案例 ---------- */
.cases {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.case {
    position: relative;
    border-radius: var(--r);
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: var(--navy);
    display: block;
}

.case.wide {
    grid-column: span 2;
    aspect-ratio: 8 / 3;
}

.case.tall {
    grid-row: span 2;
    aspect-ratio: 2 / 3;
}

.case img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s var(--ease);
}

.case:hover img {
    transform: scale(1.07);
}

.case figcaption {
    position: absolute;
    inset: auto 0 0 0;
    padding: 44px 20px 18px;
    background: linear-gradient(transparent, rgba(4, 32, 47, .88));
    color: #fff;
}

.case strong {
    display: block;
    font-size: 16px;
    font-weight: 700;
}

.case small {
    display: block;
    font-size: 12.5px;
    color: rgba(255, 255, 255, .7);
    margin-top: 3px;
}

.case .tag {
    position: absolute;
    right: 14px;
    top: 14px;
    padding: 4px 11px;
    border-radius: var(--r-pill);
    background: rgba(255, 255, 255, .9);
    color: var(--blue);
    font-size: 11.5px;
    font-weight: 700;
}

/* 名单 */
.namecols {
    columns: 4;
    column-gap: 28px;
}

.namecols li {
    break-inside: avoid;
    font-size: 14px;
    color: var(--body);
    padding: 7px 0 7px 20px;
    position: relative;
    line-height: 1.6;
}

.namecols li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 15px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--bg-mist);
    border: 2px solid var(--blue-3);
}

.panel-names {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 34px 36px;
}

.panel-names h4 {
    font-size: 17px;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.panel-names h4::before {
    content: "";
    width: 4px;
    height: 18px;
    border-radius: 2px;
    background: var(--grad-brand);
}

.panel-names .hint {
    font-size: 13px;
    color: var(--muted);
    margin-bottom: 20px;
}

/* ---------- 11. 机房（深色） ---------- */
.dark {
    background: var(--grad-blue);
    color: rgba(255, 255, 255, .8);
    position: relative;
    overflow: hidden;
}

.dark .sec-title,
.dark h3,
.dark h4 {
    color: #fff;
}

.room-visual {
    border-radius: var(--r-lg);
    overflow: hidden;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .14);
    padding: 14px;
}

.room-visual img {
    width: 100%;
    border-radius: 12px;
}

/* 机房主图下方的实拍小图：填补左列空白。
   主图 room-render.jpg 是 3.14:1 的超宽横幅（只占 165px 高），左列自然矮一大截，
   因此小图用「两张 4:3 并排 + 一张 11:5 通栏」，总高与右侧 5 条卡片基本齐平。 */
.room-thumbs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-top: 12px;
}

.room-visual .room-thumbs img {
    width: 100%;
    object-fit: cover;
    border-radius: 10px;
    display: block;
}

.room-visual .room-thumbs img:nth-child(1),
.room-visual .room-thumbs img:nth-child(2) {
    aspect-ratio: 4 / 3;
}

.room-visual .room-thumbs img:nth-child(3) {
    grid-column: 1 / -1;
    aspect-ratio: 11 / 5;
}

/* 注：2026-09-13 产品分类重排后，「开水机 / 壁挂机」的锚点 #boiler 已从产品卡
   升到区块级 <section id="boiler">，与 #station / #ro / #parts 等一致，靠区块自身的
   --pad 上留白让开固定页头，原先给 article[id] 的 scroll-margin-top 不再需要。 */

.room-points {
    display: grid;
    gap: 14px;
}

.room-points li {
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: 14px;
    padding: 16px 18px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .1);
    transition: all .3s var(--ease);
}

.room-points li:hover {
    background: rgba(255, 255, 255, .11);
    transform: translateX(4px);
}

.room-points .k {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(126, 217, 250, .18);
    color: var(--blue-3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-num);
    font-weight: 800;
    font-size: 15px;
}

.room-points b {
    display: block;
    color: #fff;
    font-size: 15px;
    margin-bottom: 2px;
}

.room-points span {
    font-size: 13.5px;
    color: rgba(255, 255, 255, .68);
    line-height: 1.7;
}

/* ---------- 12. 工艺流程 ---------- */
.flow {
    display: flex;
    align-items: stretch;
    gap: 0;
    overflow-x: auto;
    padding: 8px 4px 20px;
}

.flow-step {
    flex: 1 1 0;
    min-width: 0;
    text-align: center;
    position: relative;
    padding: 0 4px;
}

.flow-step .dot {
    width: 54px;
    height: 54px;
    margin: 0 auto 13px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--line);
    color: var(--blue);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-num);
    font-weight: 800;
    font-size: 16px;
    position: relative;
    z-index: 2;
    transition: all .35s var(--ease);
}

.flow-step:hover .dot {
    background: var(--grad-brand);
    border-color: transparent;
    color: #fff;
    transform: scale(1.08);
}

.flow-step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 27px;
    left: 50%;
    width: 100%;
    height: 2px;
    background: repeating-linear-gradient(90deg, var(--line) 0 7px, transparent 7px 13px);
    z-index: 1;
}

.flow-step b {
    display: block;
    font-size: 14px;
    color: var(--ink);
    margin-bottom: 4px;
    line-height: 1.45;
}

.flow-step span {
    font-size: 12px;
    color: var(--muted);
    line-height: 1.6;
    display: block;
}

/* ---------- 13. 资质 ---------- */
.certs-rail {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 16px;
}

.cert {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 12px;
    transition: all .35s var(--ease);
}

.cert:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow);
}

.cert img {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    object-position: top center;
    border-radius: var(--r-sm);
    background: var(--bg-soft);
}

.cert p {
    margin: 10px 0 2px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
    text-align: center;
    line-height: 1.5;
}

.strip {
    display: flex;
    gap: 16px;
    overflow: hidden;
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.strip-track {
    display: flex;
    gap: 16px;
    animation: slide 46s linear infinite;
    flex: none;
}

.strip-track img {
    height: 92px;
    width: auto;
    border-radius: var(--r-sm);
    border: 1px solid var(--line);
    background: #fff;
    padding: 6px;
    object-fit: contain;
}

.strip:hover .strip-track {
    animation-play-state: paused;
}

@keyframes slide {
    to {
        transform: translateX(-50%);
    }
}

/* ---------- 14. 合作伙伴 logo 墙 ---------- */
/* 一块白卡里叠放「行业合作伙伴」与「产品案例合作品牌」两面 logo 墙，通栏铺满、细线分隔。
   ⚠️ 历史坑：这里原本是给**单个小 logo** 设计的（flex 居中 + max-height:96px + width:auto），
   而实际入库的是 partners-tech.jpg(699×207) / partners-case.jpg(707×656) 这种**整面拼版图**，
   被压成 324×96 和 103×96 的一小坨、四周全是白，肉眼「根本显示不出来」。
   拼版图只能 width:100% 通栏，且不加 grayscale/低透明度（会让本就密集的 logo 更糊）。 */
.logo-row {
    padding: 34px clamp(20px, 3vw, 44px);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
}

.logo-row img {
    display: block;
    width: 100%;
    height: auto;
    max-height: none;
}

.logo-row > div + div {
    margin-top: 34px;
    padding-top: 34px;
    border-top: 1px solid var(--line);
}

/* ---------- 15. CTA ---------- */
.cta {
    position: relative;
    background: var(--grad-blue);
    border-radius: var(--r-lg);
    padding: 62px 60px;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 40px;
    align-items: center;
}

.cta::before {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    right: -120px;
    top: -180px;
    background: radial-gradient(circle, rgba(126, 217, 250, .45), transparent 70%);
}

.cta::after {
    content: "";
    position: absolute;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    left: -110px;
    bottom: -170px;
    background: radial-gradient(circle, rgba(0, 174, 239, .34), transparent 70%);
}

.cta > * {
    position: relative;
    z-index: 2;
}

.cta h2 {
    color: #fff;
    font-size: 32px;
    margin-bottom: 12px;
}

.cta p {
    color: rgba(255, 255, 255, .78);
    margin: 0;
    max-width: 560px;
}

.cta-side {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.telbox {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 26px;
    border-radius: var(--r);
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .2);
}

.telbox svg {
    width: 26px;
    height: 26px;
    color: var(--blue-3);
    flex: none;
}

.telbox b {
    display: block;
    font-family: var(--font-num);
    font-size: 26px;
    font-weight: 800;
    color: #fff;
    letter-spacing: .5px;
    line-height: 1.2;
}

.telbox span {
    font-size: 12.5px;
    color: rgba(255, 255, 255, .66);
}

/* ---------- 16. 页脚 ---------- */
.footer {
    background: #04202F;
    color: rgba(255, 255, 255, .6);
    padding: 68px 0 0;
    font-size: 14px;
}

.footer-top {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1.3fr;
    gap: 40px;
    padding-bottom: 50px;
}

.footer h4 {
    color: #fff;
    font-size: 15px;
    margin-bottom: 20px;
    letter-spacing: .5px;
}

.footer .brand img {
    height: 40px;
    margin-bottom: 20px;
}

.footer p {
    line-height: 1.9;
    margin: 0 0 8px;
}

.footer a {
    color: rgba(255, 255, 255, .6);
}

.footer a:hover {
    color: #fff;
}

.footer-links li {
    margin-bottom: 11px;
}

.footer-li {
    display: flex;
    gap: 12px;
    margin-bottom: 15px;
    line-height: 1.75;
    align-items: flex-start;
}

.footer-li svg {
    width: 16px;
    height: 16px;
    margin-top: 5px;
    flex: none;
    color: var(--blue-3);
}

.footer-li b {
    color: #fff;
    font-family: var(--font-num);
    font-size: 17px;
    letter-spacing: .4px;
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, .1);
    padding: 22px 0;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
}

.footer-bottom .links {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
}

/* ---------- 17. 侧栏浮窗 ---------- */
.dock {
    position: fixed;
    right: 20px;
    bottom: 26px;
    z-index: 800;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dock a,
.dock button {
    width: 50px;
    height: 50px;
    border-radius: 14px;
    background: #fff;
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--blue);
    transition: all .3s var(--ease);
    position: relative;
}

.dock a:hover,
.dock button:hover {
    background: var(--blue);
    color: #fff;
    border-color: var(--blue);
    transform: translateY(-3px);
}

.dock svg {
    width: 21px;
    height: 21px;
}

.dock .tip {
    position: absolute;
    right: 62px;
    white-space: nowrap;
    background: var(--navy);
    color: #fff;
    font-size: 13px;
    padding: 8px 14px;
    border-radius: 8px;
    opacity: 0;
    pointer-events: none;
    transform: translateX(6px);
    transition: all .25s var(--ease);
}

.dock a:hover .tip {
    opacity: 1;
    transform: none;
}

#toTop {
    opacity: 0;
    pointer-events: none;
    transition: all .35s var(--ease);
}

#toTop.show {
    opacity: 1;
    pointer-events: auto;
}

/* ---------- 18. 动效 ---------- */
/* 渐进增强：仅当 JS 可用（<html class="js">）时才隐藏待入场元素。
   这样在 JS 被禁用或脚本加载失败时，页面内容依然完整可见、可被 SEO 抓取。 */
.js .reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .7s var(--ease), transform .7s var(--ease);
}

.js .reveal.in {
    opacity: 1;
    transform: none;
}

.reveal.d1 { transition-delay: .07s; }
.reveal.d2 { transition-delay: .14s; }
.reveal.d3 { transition-delay: .21s; }
.reveal.d4 { transition-delay: .28s; }
.reveal.d5 { transition-delay: .35s; }

@media (prefers-reduced-motion: reduce) {
    /* 必须用 .js .reveal 才压得住 .js .reveal 的初始隐藏态 */
    .reveal,
    .js .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .strip-track {
        animation: none;
    }

    html {
        scroll-behavior: auto;
    }
}

/* ---------- 19. 杂项 ---------- */
.rich {
    font-size: 15.5px;
    line-height: 2;
    color: var(--body);
}

.rich p {
    margin-bottom: 1.2em;
}

.rich strong {
    color: var(--ink);
}

.rich h3 {
    font-size: 21px;
    margin: 34px 0 14px;
}

.rich ul {
    margin: 0 0 1.3em;
}

/* ⚠️ 选择器必须写 `.rich li`（不能用 `.rich ul li`）：
   站内多处是 `<ul class="rich">`，此时 .rich 就在 ul 上，`.rich ul li` 匹配不到后代 li，
   会导致「li 既没有项目符号、也没有行间距」——列表退化成一段密排文字。 */
.rich li {
    position: relative;
    padding-left: 22px;
    margin-bottom: 9px;
}

.rich li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 13px;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: var(--grad-brand);
}

.quote {
    border-left: 3px solid var(--orange);
    background: var(--bg-soft);
    padding: 20px 26px;
    border-radius: 0 var(--r) var(--r) 0;
    color: var(--ink);
    font-size: 15.5px;
}

.note {
    font-size: 13px;
    color: var(--muted);
    background: var(--bg-soft);
    border: 1px dashed var(--line);
    border-radius: var(--r);
    padding: 14px 18px;
}

.split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: center;
}

.split-media {
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--shadow);
    background: var(--bg-mist);
}

.split-media img {
    width: 100%;
    display: block;
}

/* 并列图组统一框型，避免同一行里竖图/横图/超宽全景混排导致高低参差。 */

/* 方形框：横图只裁两侧、竖图只裁上下，一组图等大且填满 */
.split-media.shot {
    aspect-ratio: 1 / 1;
    background: var(--bg-soft);
}

.split-media.shot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 16:9 全宽框：给超宽全景图（比例 3.6 左右）搭配方图时使用，
   全景保留原比例铺满、方图裁上下，两张上下叠放互不拉扯 */
.split-media.shot-169 {
    aspect-ratio: 16 / 9;
    background: var(--bg-soft);
}

.split-media.shot-169 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 竖版图组：锁定 3:4 框，保证同排两张竖图永远等高
   （机房/管网竖拍源图 1280x1707 正好 0.750，不会裁掉内容） */
.split-media.shot-vert {
    aspect-ratio: 3 / 4;
    background: var(--bg-soft);
}

.split-media.shot-vert img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 4:3 图组：同一区块里想「统一比例」时用它。
   比 16:9 对竖图友好、比 1:1 对横图友好，是横竖混排的折中框型。 */
.split-media.shot-43 {
    aspect-ratio: 4 / 3;
    background: var(--bg-soft);
}

.split-media.shot-43 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 产品图统一展示位（竖版设备图不撑破版面） */
.prod-tile {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r);
    height: 330px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    transition: all .35s var(--ease);
}

.prod-tile:hover {
    box-shadow: var(--shadow);
    border-color: var(--blue-3);
}

.prod-tile img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

.prod-tile-cap {
    text-align: center;
    font-size: 13px;
    color: var(--muted);
    margin-top: 10px;
}

.mt0 { margin-top: 0; }
.mb0 { margin-bottom: 0; }
.mt40 { margin-top: 40px; }
.mt56 { margin-top: 56px; }
.center { text-align: center; }

/* 时间线 */
.timeline {
    position: relative;
    padding-left: 30px;
}

.timeline::before {
    content: "";
    position: absolute;
    left: 7px;
    top: 8px;
    bottom: 8px;
    width: 2px;
    background: var(--line);
}

.timeline li {
    position: relative;
    padding-bottom: 26px;
}

.timeline li::before {
    content: "";
    position: absolute;
    left: -30px;
    top: 7px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid var(--blue-2);
}

.timeline b {
    display: block;
    color: var(--ink);
    font-size: 16px;
    margin-bottom: 4px;
}

.timeline span {
    font-size: 14px;
    color: var(--muted);
}

/* 联系页 */
.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 48px;
    align-items: start;
}

.info-item {
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: 16px;
    padding: 20px 22px;
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: #fff;
    transition: all .3s var(--ease);
}

.info-item + .info-item {
    margin-top: 14px;
}

.info-item:hover {
    border-color: var(--blue-3);
    box-shadow: var(--shadow-sm);
}

.info-item .ico {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: var(--bg-mist);
    color: var(--blue);
    display: flex;
    align-items: center;
    justify-content: center;
}

.info-item .ico svg {
    width: 22px;
    height: 22px;
}

.info-item h4 {
    font-size: 15px;
    margin-bottom: 3px;
}

.info-item p {
    margin: 0;
    font-size: 15px;
    color: var(--body);
    line-height: 1.75;
}

.info-item p.big {
    font-family: var(--font-num);
    font-size: 22px;
    font-weight: 800;
    color: var(--blue);
    letter-spacing: .5px;
}

.form {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 40px;
    box-shadow: var(--shadow-sm);
}

.field {
    margin-bottom: 18px;
}

.field label {
    display: block;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 8px;
}

.field input,
.field textarea,
.field select {
    width: 100%;
    padding: 13px 16px;
    border: 1px solid var(--line);
    border-radius: 10px;
    font-family: inherit;
    font-size: 15px;
    color: var(--ink);
    background: #fff;
    transition: all .25s var(--ease);
    outline: none;
}

.field input:focus,
.field textarea:focus,
.field select:focus {
    border-color: var(--blue-2);
    box-shadow: 0 0 0 4px rgba(44, 193, 245, .12);
}

.field textarea {
    min-height: 118px;
    resize: vertical;
}

.field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.form-msg {
    margin-top: 16px;
    font-size: 14px;
    padding: 12px 16px;
    border-radius: 10px;
    display: none;
}

.form-msg.ok {
    display: block;
    background: #E9F8F1;
    color: #12734E;
    border: 1px solid #BEE9D5;
}

.form-msg.err {
    display: block;
    background: #FDEEE9;
    color: #B4462A;
    border: 1px solid #F7D3C6;
}

.mapbox {
    border-radius: var(--r-lg);
    overflow: hidden;
    border: 1px solid var(--line);
    background: var(--bg-soft);
    min-height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 40px;
}

.mapbox .inner svg {
    width: 46px;
    height: 46px;
    color: var(--blue-3);
    margin-bottom: 14px;
}

.mapbox b {
    display: block;
    color: var(--ink);
    font-size: 17px;
    margin-bottom: 6px;
}

.mapbox span {
    color: var(--muted);
    font-size: 14px;
}

/* 新闻 */
.news-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 26px;
}

.ncard {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 30px 28px;
    display: flex;
    flex-direction: column;
    transition: all .35s var(--ease);
}

.ncard:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow);
    border-color: transparent;
}

.ncard .nd {
    font-family: var(--font-num);
    font-size: 13px;
    letter-spacing: 1px;
    color: var(--muted);
    margin-bottom: 12px;
}

.ncard h3 {
    font-size: 18px;
    line-height: 1.5;
    margin-bottom: 10px;
}

.ncard p {
    font-size: 14px;
    color: var(--muted);
    flex: 1;
}

.ncard .more {
    font-size: 14px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
}

.ncard .more svg {
    width: 14px;
    height: 14px;
    transition: transform .3s var(--ease);
}

.ncard:hover .more svg {
    transform: translateX(4px);
}

.article {
    max-width: 820px;
    margin: 0 auto;
}

.article h1 {
    font-size: 34px;
    line-height: 1.38;
    margin-bottom: 18px;
}

.article .meta {
    display: flex;
    gap: 18px;
    padding-bottom: 22px;
    margin-bottom: 32px;
    border-bottom: 1px solid var(--line);
    font-size: 13.5px;
    color: var(--muted);
}

.badge-cat {
    display: inline-block;
    padding: 4px 12px;
    border-radius: var(--r-pill);
    background: var(--bg-mist);
    color: var(--blue);
    font-size: 12.5px;
    font-weight: 700;
    margin-bottom: 14px;
}

/* ---------- 20. 响应式 ---------- */
@media (max-width: 1100px) {
    :root {
        --pad: 70px;
    }

    .flow {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 26px 12px;
        overflow: visible;
    }

    .flow-step:not(:last-child)::after {
        display: none;
    }

    .nav,
    .header-contact {
        display: none;
    }

    .burger {
        display: flex;
        margin-left: auto;
    }

    .header .wrap {
        gap: 14px;
    }

    .header-cta {
        display: none;
    }

    .hero h1 {
        font-size: 42px;
    }

    .g4,
    .g5,
    .certs-rail {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .cases {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .case.wide {
        grid-column: span 2;
    }

    .namecols {
        columns: 3;
    }

    .footer-top {
        grid-template-columns: 1fr 1fr;
        gap: 34px;
    }
}

@media (max-width: 860px) {
    :root {
        --pad: 56px;
    }

    .hero {
        padding: 120px 0 0;
    }

    .hero-halo {
        width: 820px;
        height: 480px;
        top: -240px;
    }

    .hero h1 {
        font-size: 34px;
    }

    .hero-lead {
        font-size: 16px;
    }

    .hero-mission {
        height: 36px;
    }

    .hero-stage {
        margin-top: 30px;
    }

    /* 数据带折成两行：行首去左线，第二行补上横线 */
    .hero-facts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hero-facts li:nth-child(3) {
        border-left: 0;
    }

    .hero-facts li:nth-child(n+3) {
        border-top: 1px solid var(--line);
    }

    .hero-facts li {
        padding: 22px 20px;
    }

    .sec-title {
        font-size: 27px;
    }

    .pagehead {
        padding: 132px 0 56px;
    }

    .pagehead h1 {
        font-size: 30px;
    }

    .split,
    .contact-grid,
    .cta {
        grid-template-columns: minmax(0, 1fr);
        gap: 30px;
    }

    .cta {
        padding: 40px 28px;
    }

    .cta h2 {
        font-size: 24px;
    }

    .g2,
    .g3,
    .g4,
    .g5,
    .news-grid,
    .certs-rail {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .card {
        padding: 26px 22px;
    }

    .namecols {
        columns: 2;
    }

    .flow {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .form {
        padding: 28px 22px;
    }

    /* logo 墙是「整面拼版图」，窄屏按容器等比缩会把品牌名糊成一团蚂蚁；
       改为保底宽度 + 卡片内横向滑动，至少能看清。 */
    .logo-row > div {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .logo-row img {
        min-width: 620px;
    }

    .prod-tile {
        height: 270px;
    }
}

@media (max-width: 560px) {
    body {
        font-size: 15px;
    }

    .hero {
        padding: 108px 0 0;
    }

    .hero h1 {
        font-size: 27px;
        letter-spacing: -.6px;
    }

    .hero-badge {
        font-size: 12.5px;
        margin-bottom: 20px;
    }

    .hero-lead {
        font-size: 15px;
    }

    .hero-actions .btn {
        flex: 1 1 auto;
    }

    .hero-mission {
        height: 32px;
    }

    .hero-stage {
        margin-top: 22px;
    }

    .sec-title {
        font-size: 24px;
    }

    .g2,
    .g3,
    .g4,
    .g5,
    .news-grid,
    .certs-rail,
    .cases {
        grid-template-columns: minmax(0, 1fr);
    }

    .case.wide,
    .case.tall {
        grid-column: span 1;
        grid-row: span 1;
        aspect-ratio: 4 / 3;
    }

    .namecols {
        columns: 1;
    }

    .panel-names {
        padding: 24px 20px;
    }

    .field-row {
        grid-template-columns: minmax(0, 1fr);
    }

    /* 窄屏：标签独占一行，否则 7em 的标签列会把内容挤得无处可放 */
    .spec li {
        display: block;
        position: relative;
        padding-left: 15px;
    }

    .spec li::before {
        position: absolute;
        left: 0;
        top: 8px;
        margin-top: 0;
    }

    .spec li strong {
        display: block;
        min-width: 0;
    }

    .dock {
        right: 12px;
        bottom: 16px;
    }

    .footer-top {
        grid-template-columns: minmax(0, 1fr);
    }

    .hero-facts b {
        font-size: 24px;
    }
}

/* 产品页：单张产品图要占满整列（2026-09-15 林哥反馈「图片太小、旁边一片空白」）。
   .pcard-img 基础 230px、.prod-tile 基础 330px（<=860 降到 270px）；
   下面这些是同特异性更高的修饰类，按 CSS 优先级会覆盖上面两条，不受断点影响。 */
.pcard-img.tall { height: 420px; }
.prod-tile.tall { height: 460px; }
.prod-tile.mid { height: 360px; }

@media (max-width: 560px) {
    .pcard-img.tall { height: 300px; }
    .prod-tile.tall { height: 340px; }
    .prod-tile.mid { height: 300px; }
}

/* 2026-09-15 二轮：方图卡按图片自身比例定高。
   `.pcard-img.tall` 的 420px 是给横图（1.4:1）用的；1:1 的方图塞进 563 宽的框里
   只能渲染 375px，左右各空 92px，看着不饱满。改用 aspect-ratio 让它铺满整列。
   —— 两类图比例不同，各按各的比例定高，不互相迁就。 */
.pcard-img.sq {
    height: auto;
    aspect-ratio: 1 / 1;
}

/* 超宽设备图（3.56:1）改通栏后，右下方的参数列表改两列，避免单列拖出一大片空白 */
.spec.cols2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 48px;
}

@media (max-width: 860px) {
    .spec.cols2 {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
    }
}