/* ==========================================================================
   Doing++ 模板 · 自定义样式层
   --------------------------------------------------------------------------
   本文件叠加在默认模板的 css/style.css 之上，只做三件事：
     1) 顶部导航（参考 www.tencent.com：白底 / 横向菜单 / 悬停大菜单 / 右侧工具区）
     2) 首页公司介绍（Hero / 简介 / 业务 / 占位 / 联系）
     3) 底部（参考 marvis.qq.com：浅色 / 链接分组 / 关注二维码 / 备案条）
   配色取 TDesign 官方色板，不自造色。

   ⚠️ 配色约束（用户明确要求，改样式前先读这里）
   1) **不要有大面积的蓝色**。腾讯蓝 #0052D9 只作点缀 —— 允许出现在：
      Logo、主按钮、标题上的短装饰线、图标底色（浅蓝 #F2F3FF）。
      **禁止**用作整块区块背景（「联系我们」原为整段通栏蓝底，已改回白底 + 一条 40px 短蓝线）。
   2) **顶部导航完全不用蓝色、不做下划线**。一级导航为黑字常规字重，
      **选中项只靠「黑体加粗」区分**（对齐 tencent.com 实测值：
      一级 color:#000 / font-weight:600，二级 font-weight:500，无下划线、无背景、hover 不变色）。
      悬停仅加深到纯黑，不下划线、不变蓝。

   ⚠️ 类名冲突警告（已踩过，务必遵守）
   本文件叠加在默认模板的 css/style.css 之上，而该文件里存在**裸的通用类名规则**，例如
   style.css 第 3017 行既有一条裸的 .active 规则，把背景刷成 #717171。
   因此本模板所有类名一律加 dx- 前缀，且**禁用 active / container / btn / card / main 等通用类名**。
   「当前页高亮」用 .dx-current，不要用 .active——否则导航项会被刷上整块灰底。

   ⚠️ 本文件顶部注释内**不得出现注释结束符**（即 星号加斜杠）。
   CSS 注释不支持嵌套：一旦在注释里写出结束符，外层注释会被提前闭合，
   后面的说明文字会变成非法 CSS，并被解析器连带吞掉紧随其后的 :root 块，
   表现为所有 var(--dx-*) 全部失效（头部高度塌陷、配色回落到默认值）。

   关键约束（与默认模板对齐，勿随意改）：
     · 默认 .blog-header 是 position:fixed，高度 71.63px
     · 默认 .blog-container 靠 margin-top: calc(71.63px + 24px) 让出头部空间
     · 本模板改用 --dx-header-h 统一表达，并覆盖 .blog-container 的补偿值
       使「新导航高度」与「内容避让高度」始终一致，不会顶出空白
   ========================================================================== */

:root {
    --dx-brand: #0052D9;
    --dx-brand-hover: #366EF4;
    --dx-brand-light: #F2F3FF;
    --dx-text-1: rgba(0, 0, 0, .9);
    --dx-text-2: rgba(0, 0, 0, .6);
    --dx-text-3: rgba(0, 0, 0, .4);
    --dx-border: #E8E8E8;
    --dx-bg: #FFFFFF;
    --dx-bg-soft: #F7F8FA;
    --dx-header-h: 72px;
    /* 内容区避让头部的高度（= 头部高度 + 呼吸间隔） */
    --dx-content-gap: 24px;
    /* 中文字体栈：默认模板用的是 helvetica 系，中文会回落到系统默认字体。
       这里显式声明无衬线中文字体（黑体系），保证选中态「黑体加粗」观感正确。 */
    --dx-font: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
        "Microsoft YaHei", "Source Han Sans SC", "Noto Sans CJK SC", sans-serif;
}

/* --------------------------------------------------------------------------
   0. 页面骨架
   -------------------------------------------------------------------------- */

/* 首页整体白底（默认模板 body 背景为浅蓝灰，首页改用纯白） */
body.dx-home {
    background-color: #fff;
}

/* 主内容：撑满剩余高度 */
.dx-page {
    flex: 1 0 auto;
    padding-top: var(--dx-header-h);
    background: var(--dx-bg);
    font-family: var(--dx-font);
}

/* 底部：置于页面最底 */
.dx-footer {
    flex: 0 0 auto;
    margin-top: auto;
}

/* 覆盖默认模板的头部避让高度，改用本模板的头部高度变量 */
.blog-container {
    margin-top: calc(var(--dx-header-h) + var(--dx-content-gap)) !important;
}

/* 锚点定位时避开固定头部 */
.dx-page section[id] {
    scroll-margin-top: calc(var(--dx-header-h) + 16px);
}

/* --------------------------------------------------------------------------
   1. 顶部导航（腾讯官网风格）
   --------------------------------------------------------------------------
   滚动行为对齐 tencent.com：
     · 向下滚 → 头部整体上移自身高度（translateY(-100%)）滑出视口
     · 向上滚 → 立刻滑回
   实现细节：
     · 用 transform 而不是 top，只触发合成层，不引起重排，滚动时更跟手
     · transition 只写 transform，避免和 .is-scrolled 的 box-shadow 抢动画
     · 过渡时长 .35s / 缓动 cubic-bezier(.4,0,.2,1)，接近腾讯的 0.4s 观感
     · 触发条件见 js/common_tpl.js 的 dxHeaderAutoHide()
   -------------------------------------------------------------------------- */
.dx-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1020;
    background: var(--dx-bg);
    /* ------------------------------------------------------------------
       这里**不要**画 border-bottom。
       参考对象 tencent.com/zh-cn 的顶部导航实测：高度 106px、纯白底、
       `border-bottom: 0px none`、`box-shadow: none`，滚动前后都没有任何分割线。
       它的层次感来自「大面积留白 + 下方内容自己留出的间距」，不靠画线。

       我们原来这条 `1px solid var(--dx-border)`（#E8E8E8）把导航切成了一块
       独立的横条，看起来像个「工具栏」，而不是腾讯那种融入页面的导航区。

       注意：别用 border-bottom 而用 border: 0，是为了把可能存在的
       其它方向边框一并清掉，避免深色模式或未来的样式覆盖时又冒出来。
       层次改由 .is-scrolled 的投影承担（见下）。
       ------------------------------------------------------------------ */
    border: 0;
    transition: box-shadow .2s, transform .35s cubic-bezier(.4, 0, .2, 1);
    will-change: transform;
}

/* 向下滚动时挂上这个类 → 滑出屏幕顶部 */
.dx-header.is-hidden {
    transform: translateY(-100%);
}

/* 滚动后**悬停状态**（停止滚动、导航重新出现）才给一点投影。
   因为去掉了分割线，静止贴住页面时靠留白区分；
   一旦页面内容滚到导航下面，没有投影就会糊成一片、分不清边界。
   腾讯那边整页是固定导航 + 内容自带边距，不存在这个场景；
   我们的导航是 fixed 叠在内容上，所以这里保留投影，且只在需要时出现。 */
.dx-header.is-scrolled {
    box-shadow: 0 1px 3px rgba(0, 0, 0, .04), 0 8px 24px rgba(0, 0, 0, .05);
}

/* 移动端抽屉展开期间不自动隐藏，否则菜单会跟着飞走 */
.dx-header.is-open {
    transform: none !important;
}

/* 尊重系统「减少动态效果」偏好：直接跳变，不做滑动 */
@media (prefers-reduced-motion: reduce) {
    .dx-header {
        transition: box-shadow .2s;
    }
}

.dx-header-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
    height: var(--dx-header-h);
    display: flex;
    align-items: center;
    /* 需求：logo 与导航作为一个整体在头部水平居中。
       右侧登录区已移除，只剩移动端汉堡按钮 —— 它用绝对定位脱离主轴，
       所以不会把「logo + 导航」这组往左挤，居中是真居中而非近似居中。 */
    justify-content: center;
    gap: 40px;
    position: relative;
    box-sizing: border-box;
    font-family: var(--dx-font);
}

/* LOGO
   默认输出图片标（模板自带 images/logo-doingxx.png，透明底 3x 图，显示高度锁定 32px）；
   文字标只作兜底 —— 仅当后台未上传 Logo 且模板图缺失时才会出现。
   高度锁 32px、宽度 auto，换任何比例的字标图都不会变形。 */
.dx-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 22px;
    font-weight: 600;
    color: var(--dx-brand);
    text-decoration: none;
    flex: none;
    letter-spacing: .2px;
    /* 竖排双行字标（独域 / Doing++）高度：头高 72px，居中留白 */
    height: 28px;
}

.dx-logo img {
    height: 28px;
    width: auto;
    display: block;
}

.dx-logo:hover {
    color: var(--dx-brand);
}

/* 深色模式：字标里的「Doing++」是黑字，在 #1a202c 底上完全看不见。
   做法：隐藏原 <img>，用 background-image 铺深色版（红字不变、英文转白）。
   兼容性比 `content: url()` 替换 src 稳（Safari 不支持后者）。 */
[data-theme="dark"] .dx-logo.dx-logo--default img {
    visibility: hidden;
}

[data-theme="dark"] .dx-logo.dx-logo--default {
    background-image: url("../images/logo-doingxx-dark.png");
    background-size: contain;
    background-position: left center;
    background-repeat: no-repeat;
}


/* 主导航
   —— 视觉规格对齐 tencent.com 实测值：
        · 一级项：16px / 600，左右 padding 20px，项高 = 头部高（42px 文字区 + 上下留白）
        · 默认黑字，hover 与当前项变品牌蓝 #0052D9
        · 底部 1px 蓝色下划线，左右各留 20px（即与文字等宽）
   */
.dx-nav {
    display: flex;
    align-items: center;
    /* 导航紧跟 logo 排布，两者作为一整组居中（由 .dx-header-inner 的 justify-content 控制） */
    justify-content: flex-start;
    gap: 0;
    flex: 0 1 auto;
    min-width: 0;
    height: 100%;
}

.dx-nav-item {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
}

.dx-nav-item > a {
    position: relative;
    display: flex;
    align-items: center;
    height: 42px;
    padding: 0 20px;
    box-sizing: border-box;
    font-size: 16px;
    /* 一级导航：黑字 + 600 字重（腾讯实测 16px/600），与浏览器默认粗细区分开 */
    color: #000;
    font-weight: 600;
    letter-spacing: .25px;
    text-decoration: none;
    white-space: nowrap;
    transition: color .18s;
}

.dx-nav-item > a:hover {
    color: var(--dx-brand);
}

/* 当前页：蓝色文字 + 底部 1px 蓝色横线（横线左右各留 20px，与文字等宽，贴头部底边） */
.dx-nav-item.dx-current > a {
    color: var(--dx-brand);
    font-weight: 600;
}

.dx-nav-item.dx-current > a::after {
    content: "";
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: -1px;
    height: 1px;
    background: var(--dx-brand);
}

/* 有二级菜单的项：hover 时给一点视觉提示（腾讯是整栏展开大菜单，本站二级项少，用箭头区分） */
.dx-nav-item.dx-has-sub > a::before {
    content: "";
    position: absolute;
    right: 9px;
    top: 50%;
    width: 0;
    height: 0;
    margin-top: 1px;
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    border-top: 4px solid currentColor;
    opacity: .45;
    transition: transform .18s, opacity .18s;
}

.dx-nav-item.dx-has-sub:hover > a::before {
    transform: rotate(180deg);
    opacity: .9;
}

/* 大菜单面板 */
.dx-sub {
    position: absolute;
    top: 100%;
    left: 8px;
    min-width: 200px;
    background: var(--dx-bg);
    border: 1px solid var(--dx-border);
    border-radius: 0 0 8px 8px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .10);
    padding: 8px 0;
    z-index: 10;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity .18s, transform .18s, visibility .18s;
}

.dx-nav-item:hover > .dx-sub {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dx-sub a {
    display: block;
    padding: 9px 20px;
    font-size: 14px;
    /* tencent.com 二级菜单实测为黑字、中等字重；悬停用浅灰底，不用蓝色 */
    color: #1A1A1A;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    transition: background .15s, color .15s;
}

.dx-sub a:hover {
    background: var(--dx-bg-soft);
    color: #000;
}

/* 右侧工具区 */
.dx-header-right {
    display: flex;
    align-items: center;
    gap: 18px;
    /* 只承载移动端汉堡按钮：绝对定位贴右侧，不参与 flex 主轴，
       这样桌面端「logo + 导航」才能整体真正居中 */
    position: absolute;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
}

.dx-header-right a {
    color: var(--dx-text-2);
    text-decoration: none;
    transition: color .18s;
    white-space: nowrap;
}

.dx-header-right a:hover {
    color: #000;
}

.dx-divider {
    width: 1px;
    height: 16px;
    background: var(--dx-border);
    flex: none;
}

/* 右侧工具区里的用户菜单项（登录后出现），
   需覆盖主导航的 line-height / padding，否则会撑高或加宽 */
.dx-header-right .dx-nav-item > a {
    line-height: 1.6;
    padding: 0;
    font-size: 14px;
    font-weight: 400; /* 右侧用户菜单不参与主导航加粗 */
    color: var(--dx-text-2);
}

.dx-header-right .dx-nav-item > a:hover {
    color: #000;
}

/* 右侧的下拉菜单改为右对齐，避免超出屏幕 */
.dx-header-right .dx-sub {
    left: auto;
    right: 0;
}

/* 移动端汉堡 */
.dx-burger {
    display: none;
    width: 40px;
    height: 40px;
    border: 0;
    background: none;
    cursor: pointer;
    padding: 0;
    flex: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.dx-burger i {
    display: block;
    width: 22px;
    height: 2px;
    margin: 3px auto;
    background: var(--dx-text-1);
    transition: .2s;
}

.dx-header.is-open .dx-burger i:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.dx-header.is-open .dx-burger i:nth-child(2) { opacity: 0; }
.dx-header.is-open .dx-burger i:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

@media (max-width: 900px) {
    .dx-header-inner {
        gap: 16px;
        padding: 0 16px;
        /* 移动端导航收进抽屉，头部只剩 logo —— 让 logo 居中，
           汉堡按钮由 .dx-header-right 的绝对定位固定在右侧 */
        justify-content: center;
    }
    .dx-header-right {
        right: 16px;
    }
    /* 竖排字标在窄屏再收一档 */
    .dx-logo,
    .dx-logo img {
        height: 22px;
    }
    .dx-burger { display: flex; }
    .dx-nav {
        position: absolute;
        top: var(--dx-header-h);
        left: 0;
        right: 0;
        display: none;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 0;
        /* 展开面板由内容撑高：height:auto 覆盖桌面端为「贴满头部高度」而设的 height:100%，
           否则菜单会被压成 72px，只能看到第一项 */
        height: auto;
        background: var(--dx-bg);
        border-bottom: 1px solid var(--dx-border);
        box-shadow: 0 12px 24px rgba(0, 0, 0, .06);
        max-height: calc(100vh - var(--dx-header-h));
        overflow-y: auto;
        z-index: 5;
        padding: 8px 0;
    }
    .dx-header.is-open .dx-nav { display: flex; }
    .dx-nav-item { height: auto; display: block; }
    .dx-nav-item > a {
        height: auto;
        line-height: 48px;
        padding: 0 20px;
        font-size: 16px;
    }
    /* 移动端选中项：浅灰底 + 底部蓝线（横线与 20px 内边距对齐） */
    .dx-nav-item.dx-current > a {
        background: var(--dx-bg-soft);
    }
    .dx-nav-item.dx-current > a::after {
        left: 20px;
        right: 20px;
        bottom: 0;
    }
    .dx-nav-item.dx-has-sub > a::before {
        right: 20px;
    }
    .dx-sub {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border: 0;
        border-radius: 0;
        min-width: 0;
        padding: 0 0 8px;
        background: var(--dx-bg-soft);
    }
    .dx-sub a { padding-left: 36px; }
    .dx-header-right { gap: 12px; font-size: 13px; }
    .dx-hide-sm { display: none !important; }
}

/* --------------------------------------------------------------------------
   2. 首页（公司介绍）
   -------------------------------------------------------------------------- */

/* Hero */
.dx-hero {
    padding: 96px 24px 88px;
    /* 原为 #F7F8FA → #FFFFFF 的纵向渐变，按「首页整体白底」改为纯白 */
    background: #FFFFFF;    text-align: center;
}

.dx-hero h1 {
    margin: 0 0 18px;
    font-size: 44px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--dx-text-1);
    letter-spacing: -.5px;
}

.dx-hero p {
    margin: 0 auto;
    max-width: 720px;
    font-size: 17px;
    line-height: 1.9;
    color: var(--dx-text-2);
}

.dx-hero-actions {
    margin-top: 34px;
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
}

.dx-btn {
    display: inline-flex;
    align-items: center;
    height: 44px;
    padding: 0 28px;
    border-radius: 6px;
    font-size: 15px;
    text-decoration: none;
    cursor: pointer;
    transition: .18s;
    border: 1px solid transparent;
}

.dx-btn-primary {
    background: var(--dx-brand);
    color: #fff;
}

.dx-btn-primary:hover {
    background: var(--dx-brand-hover);
    color: #fff;
}

.dx-btn-ghost {
    border-color: #DDDDDD;
    color: var(--dx-text-1);
    background: #fff;
}

.dx-btn-ghost:hover {
    border-color: var(--dx-brand);
    color: var(--dx-brand);
}

/* 通用区块 */
.dx-section {
    max-width: 1180px;
    margin: 0 auto;
    padding: 80px 24px;
    box-sizing: border-box;
}

/* 浅底背景带：只负责通栏底色，内部仍用 .dx-section 控制宽度，
   这样浅底区块与白底区块的内容左右边界严格对齐 */
/* 通栏背景带：原为浅灰 #F7F8FA，需求「首页整体背景为白色」→ 改为纯白。
   保留该层是为了不影响内部 .dx-section 的宽度计算与上下留白。 */
.dx-band {
    background: #FFFFFF;
}

.dx-section-head {
    text-align: center;
    margin-bottom: 48px;
}

.dx-section-head h2 {
    margin: 0 0 12px;
    font-size: 30px;
    font-weight: 600;
    color: var(--dx-text-1);
}

.dx-section-head p {
    margin: 0;
    font-size: 15px;
    color: var(--dx-text-3);
}

/* 公司简介 */
.dx-about-grid {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 64px;
    align-items: center;
}

.dx-about-text p {
    margin: 0 0 18px;
    font-size: 15.5px;
    line-height: 2;
    color: var(--dx-text-2);
}

.dx-about-text p:last-child {
    margin-bottom: 0;
}

.dx-about-media {
    aspect-ratio: 4 / 3;
    border-radius: 10px;
    /* 原为 45° 斜纹浅灰底，按「整页白底」要求改为纯白，仅保留虚线框示意位置 */
    background: #FFFFFF;
    border: 1px dashed #D5D7DB;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--dx-text-3);
    font-size: 14px;
}

@media (max-width: 900px) {
    .dx-hero { padding: 64px 20px 56px; }
    .dx-hero h1 { font-size: 30px; }
    .dx-hero p { font-size: 15.5px; }
    .dx-section { padding: 56px 20px; }
    .dx-about-grid { grid-template-columns: 1fr; gap: 32px; }
    .dx-contact { padding: 56px 20px; }
    .dx-contact-list { gap: 32px; }
}

/* 业务卡片 */
.dx-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.dx-card {
    background: #fff;
    border: 1px solid var(--dx-border);
    border-radius: 10px;
    padding: 28px 26px;
    transition: .2s;
}

.dx-card:hover {
    border-color: #C9D6F5;
    box-shadow: 0 8px 24px rgba(0, 81, 217, .08);
    transform: translateY(-2px);
}

.dx-card h3 {
    margin: 0 0 10px;
    font-size: 17px;
    font-weight: 600;
    color: var(--dx-text-1);
}

.dx-card p {
    margin: 0;
    font-size: 14px;
    line-height: 1.85;
    color: var(--dx-text-2);
}

.dx-card-ico {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: var(--dx-brand-light);
    color: var(--dx-brand);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    font-weight: 600;
    margin-bottom: 16px;
}

/* 占位区 */
.dx-placeholder {
    margin: 0;
    min-height: 240px;
    border: 2px dashed #D5D7DB;
    border-radius: 10px;
    /* 原为斜纹浅灰底，按「整页白底」要求改为纯白 */
    background: #FFFFFF;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--dx-text-3);
    font-size: 14px;
    text-align: center;
    padding: 24px;
    box-sizing: border-box;
}

.dx-placeholder strong {
    font-size: 15px;
    font-weight: 500;
    color: var(--dx-text-2);
}

/* 联系区块 —— 浅色处理，只保留极小面积的蓝色点缀
   （原为整块纯蓝 #0052D9，属于「大面积蓝色」，已按要求去掉） */
.dx-contact {
    background: #FFFFFF;
    border-top: 1px solid var(--dx-border);
    text-align: center;
    padding: 72px 24px;
}

.dx-contact h2 {
    margin: 0 0 14px;
    font-size: 28px;
    font-weight: 600;
    color: var(--dx-text-1);
}

/* 蓝色点缀：标题上方 40px 短横线（唯一的蓝色元素，面积可忽略） */
.dx-contact h2::before {
    content: '';
    display: block;
    width: 40px;
    height: 3px;
    border-radius: 2px;
    background: var(--dx-brand);
    margin: 0 auto 20px;
}

.dx-contact > p {
    margin: 0 0 34px;
    font-size: 15px;
    color: var(--dx-text-2);
}

.dx-contact-list {
    display: flex;
    justify-content: center;
    gap: 56px;
    flex-wrap: wrap;
    margin: 0;
}

.dx-contact-list div {
    font-size: 14px;
    color: var(--dx-text-3);
}

.dx-contact-list span {
    display: block;
    margin-top: 8px;
    font-size: 15px;
    font-weight: 500;
    color: var(--dx-text-1);
}

/* --------------------------------------------------------------------------
   3. 底部（纯白底 · 只用上边框与正文分隔）
   参考 marvis.qq.com 的结构，但底色改为纯白 #FFFFFF：
   白底 + 顶部 1px 分隔线 + 近黑标题 + 灰链接。
   注意：新闻页的面包屑区块紧贴本区块，那条分隔线即由这里的 border-top 提供，
        不要在面包屑里再画 border-bottom，否则会叠成双线。
   -------------------------------------------------------------------------- */
.dx-footer {
    background: #FFFFFF;
    /* 分隔线左右内缩，不顶到屏幕边缘 —— 与新闻页面包屑那条线取齐。
       实现方式：去掉 footer 自身的 border-top，改由 ::before 画一条带左右内距的线； */
    position: relative;
    color: var(--dx-text-2);
    font-size: 13.5px;
    font-family: var(--dx-font);
}

.dx-footer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 24px;
    right: 24px;
    height: 1px;
    background: var(--dx-border);
    pointer-events: none;
}

.dx-footer-main {
    max-width: 1180px;
    margin: 0 auto;
    padding: 56px 24px 40px;
    display: grid;
    /* 四列：品牌列（含微信服务号 / 抖音二维码）+ 业务板块 + 关于我们 + 联系我们 */
    grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
    gap: 40px;
    box-sizing: border-box;
}

.dx-footer h4 {
    margin: 0 0 16px;
    font-size: 14px;
    font-weight: 600;
    color: var(--dx-text-1);
}

.dx-footer-brand .dx-footer-logo {
    font-size: 19px;
    font-weight: 600;
    color: var(--dx-text-1);
    letter-spacing: .5px;
    margin-bottom: 12px;
}

.dx-footer-brand p {
    margin: 0;
    line-height: 1.9;
    color: var(--dx-text-3);
    font-size: 13px;
}

/* 品牌列下方的关注二维码（微信服务号 / 抖音） */
.dx-footer-brand .dx-follow {
    margin-top: 20px;
}

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

.dx-footer ul li { margin-bottom: 10px; }

.dx-footer a {
    color: var(--dx-text-2);
    text-decoration: none;
    transition: color .18s;
}

.dx-footer a:hover { color: var(--dx-brand); }

/* 关注我们（二维码） */
.dx-follow {
    display: flex;
    gap: 22px;
}

.dx-qr {
    text-align: center;
    font-size: 12px;
    color: var(--dx-text-3);
}

.dx-qr-box {
    width: 88px;
    height: 88px;
    border-radius: 6px;
    background: #fff;
    border: 1px dashed #DDDDDD;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--dx-text-3);
    font-size: 11px;
    line-height: 1.5;
    margin-bottom: 8px;
    box-sizing: border-box;
    text-align: center;
}

/* 真二维码：原来的虚线占位框样式全部撤掉，改由图片自己的外形说话。
   两张码现在统一是「方形白底 + 内容原样」：
     · 微信  qr-wechat.png  —— 标准方形 QR
     · 抖音  qr-douyin.png  —— 原本是圆形码盘，已把圆外刷白改成方图、内容去色
   所以两者共用 4px 圆角。绝不能给 50%：
   微信码的三个定位角（左上/右上/左下）必须完整露出，圆角一大就识别不了。 */
.dx-qr-box--img {
    background: transparent;
    border: 0;
    padding: 0;
}

.dx-qr-box--img img {
    display: block;
    width: 88px;
    height: 88px;
    /* 白色码面在浅色页面上边界不明显，加一圈极轻的描边把它"按住" */
    outline: 1px solid rgba(0, 0, 0, .06);
    outline-offset: -1px;
    border-radius: 4px;
    transition: transform .25s ease;
}

.dx-qr-box--img:hover img {
    transform: scale(1.04);
}

/* 深色底上白盘本来就跳，描边反而显脏，去掉 */
[data-theme="dark"] .dx-qr-box--img img {
    outline-color: transparent;
}

/* 版权条 */
.dx-footer-bottom {
    border-top: 1px solid var(--dx-border);
    padding: 20px 24px;
    max-width: 1180px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 13px;
    color: var(--dx-text-3);
    box-sizing: border-box;
}

.dx-footer-bottom a { color: var(--dx-text-3); }
.dx-footer-bottom a:hover { color: var(--dx-brand); }

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

@media (max-width: 900px) {
    .dx-footer-main {
        grid-template-columns: 1fr 1fr;
        gap: 32px 24px;
        padding: 40px 20px 28px;
    }

    /* 分隔线左右内距与内容对齐。
       这里原本是 right: 64px，为固定悬浮工具条让位；需求「手机上不必预留、
       按钮可以盖在文字上」后改为与左侧对称的 20px，线尾真正贴到内容右边界。 */
    .dx-footer::before {
        left: 20px;
        right: 20px;
    }
    .dx-footer-bottom { padding: 18px 20px; font-size: 12px; }
}

@media (max-width: 560px) {
    .dx-footer-main { grid-template-columns: 1fr; }
    .dx-follow { flex-wrap: wrap; }
}

/* --------------------------------------------------------------------------
   4. 通栏页面模板（page_full）
   内容区不做任何四周留白，直接撑满整屏。
   唯一的 padding 是顶部为固定头部让位的偏移 —— 那是结构性偏移，不是留白。
   -------------------------------------------------------------------------- */
.dx-fullpage {
    flex: 1 0 auto;
    width: 100%;
    padding: var(--dx-header-h) 0 0;
    background: var(--dx-bg);
    font-family: var(--dx-font);
    box-sizing: border-box;
}

/* 正文里的图片默认不超过屏宽 */
.dx-fullpage img {
    max-width: 100%;
    height: auto;
}

/* 仅屏幕阅读器可见：用于输出 SEO 一级标题而不占版面 */
.dx-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* --- 通栏页面可用的辅助类（直接写在页面正文里） --------------------------- */
/* 通栏段落：撑满屏宽，自带呼吸内边距 */
.dx-fp-section {
    width: 100%;
    padding: 80px 24px;
    box-sizing: border-box;
}

/* 浅灰底（与 .dx-fp-section 叠加用） */
.dx-fp-band {
    background: var(--dx-bg-soft);
}

/* 段落内的内容容器：把文字收到舒适宽度，但段落本身仍是通栏 */
.dx-fp-inner {
    max-width: 1180px;
    margin: 0 auto;
    width: 100%;
}

/* 段落标题 / 正文 */
.dx-fp-title {
    margin: 0 0 14px;
    font-size: 30px;
    font-weight: 600;
    color: var(--dx-text-1);
    line-height: 1.35;
}

.dx-fp-text {
    margin: 0 0 16px;
    font-size: 15.5px;
    line-height: 2;
    color: var(--dx-text-2);
}

.dx-fp-text:last-child {
    margin-bottom: 0;
}

/* 真·通栏块：连内边距都不要，用于整屏大图 / 色块 */
.dx-fp-bleed {
    width: 100%;
    padding: 0;
    margin: 0;
}

@media (max-width: 900px) {
    .dx-fp-section { padding: 56px 20px; }
    .dx-fp-title { font-size: 24px; }
}