/* ============================================================
   MasterGo → 静态HTML  公共样式表 (common.css)
   设计基准宽: 1920px
   设计稿字体: Alibaba PuHuiTi 3.0 (正文/标题) · MiSans (数字)
   风格: 黑 / 白 / 深灰(#333) 高对比 · 摄影大图 + 黑色渐变遮罩
   ============================================================ */

/* ---------- 自托管字体（阿里巴巴普惠体，子集化 woff2）----------
   字重: light(300) · regular(400) · medium(500) · semibold(600) · bold(700)
   重新生成字库: node build-fonts.js */
@font-face {
    font-family: 'Alibaba PuHuiTi 3.0';
    src: url('../fonts/puhuiti-light.woff2') format('woff2');
    font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Alibaba PuHuiTi 3.0';
    src: url('../fonts/puhuiti-regular.woff2') format('woff2');
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Alibaba PuHuiTi 3.0';
    src: url('../fonts/puhuiti-medium.woff2') format('woff2');
    font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Alibaba PuHuiTi 3.0';
    src: url('../fonts/puhuiti-semibold.woff2') format('woff2');
    font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Alibaba PuHuiTi 3.0';
    src: url('../fonts/puhuiti-bold.woff2') format('woff2');
    font-weight: 700; font-style: normal; font-display: swap;
}

/* ---------- 设计 Token ---------- */
:root {
    /* 颜色 */
    --c-black: #000000;
    --c-white: #ffffff;
    --c-dark: #333333;          /* 正文深灰 */
    --c-line-dark: rgba(252, 252, 252, 0.2);   /* 深底上的分隔线 */
    --c-line-light: rgba(0, 0, 0, 0.1);        /* 浅底上的分隔线 */

    /* 字体（设计稿 Alibaba PuHuiTi 3.0 / MiSans，无 webfont 时回退系统字体） */
    --font-sans: "Alibaba PuHuiTi 3.0", "AlibabaPuHuiTi3", -apple-system,
        BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei",
        "Helvetica Neue", Arial, sans-serif;
    --font-num: "MiSans", "Alibaba PuHuiTi 3.0", "PingFang SC",
        "Microsoft YaHei", sans-serif;

    /* TOKENS-VARS:start */
    --fw-light: 300;
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;

    /* 字号 token（由 font-tokens.json 生成） */
    --fs-micro: 11px;
    --fs-micro-12: 12px;
    --fs-micro-13: 13px;
    --fs-caption: 14px;
    --fs-caption-15: 15px;
    --fs-caption-16: 16px;
    --fs-caption-17: 17px;
    --fs-body-sm: 18px;
    --fs-body-sm-20: 20px;
    --fs-body: 22px;
    --fs-body-24: 24px;
    --fs-body-26: 26px;
    --fs-h5: 28px;
    --fs-h4: 32px;
    --fs-h4-36: 36px;
    --fs-h4-38: 38px;
    --fs-h4-40: 40px;
    --fs-h3: 42px;
    --fs-h3-48: 48px;
    --fs-h2: 54px;
    --fs-h2-56: 56px;
    --fs-h2-64: 64px;
    --fs-h1: 72px;
    --fs-h1-80: 85px;
    --fs-hero: 100px;
/* TOKENS-VARS:end */

    /* 布局 */
    --container-w: 1720px;       /* 内容区最大宽（设计稿左右各 100px 留白） */
    --header-h: 150px;           /* 导航栏：顶栏60 + 主导航90 */
    --radius-card: 10px;
    --radius-card-lg: 20px;
    --shadow-card: 0 4px 10px rgba(0, 0, 0, 0.3);
}

/* ---------- 基础重置 ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
    font-family: var(--font-sans);
    color: var(--c-dark);
    background: var(--c-white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { text-decoration: none; color: inherit; }
ul, ol { list-style: none; }
button {
    font-family: inherit; cursor: pointer;
    border: none; background: none;
    padding: 0; margin: 0;
    box-sizing: border-box;
    -webkit-appearance: none;          /* iOS Safari 去除按钮默认圆角/高光 */
    appearance: none;
    border-radius: 0;
    color: inherit;
    font-size: inherit;
}

/* TOKENS-CLS:start */
/* 字体 utility class（由 font-tokens.json 生成，勿手改） */
.t-micro { font-size: var(--fs-micro); font-weight: var(--fw-regular); line-height: 1.4; font-family: var(--font-sans); }
.t-micro-12 { font-size: var(--fs-micro-12); font-weight: var(--fw-regular); line-height: 1.4; font-family: var(--font-sans); }
.t-micro-13 { font-size: var(--fs-micro-13); font-weight: var(--fw-regular); line-height: 1.4; font-family: var(--font-sans); }
.t-caption { font-size: var(--fs-caption); font-weight: var(--fw-regular); line-height: 1.5; font-family: var(--font-sans); }
.t-caption-15 { font-size: var(--fs-caption-15); font-weight: var(--fw-regular); line-height: 1.5; font-family: var(--font-sans); }
.t-caption-16 { font-size: var(--fs-caption-16); font-weight: var(--fw-regular); line-height: 1.5; font-family: var(--font-sans); }
.t-caption-17 { font-size: var(--fs-caption-17); font-weight: var(--fw-regular); line-height: 1.5; font-family: var(--font-sans); }
.t-body-sm { font-size: var(--fs-body-sm); font-weight: var(--fw-regular); line-height: 1.6; font-family: var(--font-sans); }
.t-body-sm-20 { font-size: var(--fs-body-sm-20); font-weight: var(--fw-regular); line-height: 1.6; font-family: var(--font-sans); }
.t-body { font-size: var(--fs-body); font-weight: var(--fw-regular); line-height: 1.6; font-family: var(--font-sans); }
.t-body-24 { font-size: var(--fs-body-24); font-weight: var(--fw-regular); line-height: 1.6; font-family: var(--font-sans); }
.t-body-26 { font-size: var(--fs-body-26); font-weight: var(--fw-regular); line-height: 1.6; font-family: var(--font-sans); }
.t-h5 { font-size: var(--fs-h5); font-weight: var(--fw-semibold); line-height: 1.3; font-family: var(--font-sans); }
.t-h4 { font-size: var(--fs-h4); font-weight: var(--fw-semibold); line-height: 1.25; font-family: var(--font-sans); }
.t-h4-36 { font-size: var(--fs-h4-36); font-weight: var(--fw-semibold); line-height: 1.25; font-family: var(--font-sans); }
.t-h4-38 { font-size: var(--fs-h4-38); font-weight: var(--fw-semibold); line-height: 1.25; font-family: var(--font-sans); }
.t-h4-40 { font-size: var(--fs-h4-40); font-weight: var(--fw-semibold); line-height: 1.25; font-family: var(--font-num); }
.t-h3 { font-size: var(--fs-h3); font-weight: var(--fw-bold); line-height: 1.2; font-family: var(--font-sans); }
.t-h3-48 { font-size: var(--fs-h3-48); font-weight: var(--fw-bold); line-height: 1.2; font-family: var(--font-sans); }
.t-h2 { font-size: var(--fs-h2); font-weight: var(--fw-bold); line-height: 1.15; font-family: var(--font-sans); }
.t-h2-56 { font-size: var(--fs-h2-56); font-weight: var(--fw-bold); line-height: 1.15; font-family: var(--font-sans); }
.t-h2-64 { font-size: var(--fs-h2-64); font-weight: var(--fw-bold); line-height: 1.15; font-family: var(--font-sans); }
.t-h1 { font-size: var(--fs-h1); font-weight: var(--fw-bold); line-height: 1.15; font-family: var(--font-sans); }
.t-h1-80 { font-size: var(--fs-h1-80); font-weight: var(--fw-bold); line-height: 1.15; font-family: var(--font-sans); }
.t-hero { font-size: var(--fs-hero); font-weight: var(--fw-bold); line-height: 1.1; font-family: var(--font-sans); }
/* TOKENS-CLS:end */

/* ---------- 内容容器 ---------- */
.mg-container {
    width: 100%;
    max-width: var(--container-w);
    margin: 0 auto;

}

/* ---------- 区块标题（设计稿 80px Bold） ---------- */
.mg-section-title {
    font-size: var(--fs-h1-80);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: 2px;
}
@media (max-width: 1280px) { .mg-section-title { font-size: var(--fs-h2-56); } }
@media (max-width: 768px)  { .mg-section-title { font-size: var(--fs-h4-38); letter-spacing: 1px; } }

.mg-desc { font-size: var(--fs-body-24); font-weight: 500; line-height: 1.5; }
@media (max-width: 768px) { .mg-desc { font-size: var(--fs-caption-16); } }

/* ---------- 通用按钮（设计稿 160×45 胶囊） ---------- */
.mg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 160px;
    height: 45px;
    padding: 0 24px;
    border-radius: 50px;
    font-size: var(--fs-body-sm-20);
    font-weight: 400;
    white-space: nowrap;
    transition: transform .3s, box-shadow .3s, opacity .3s;
}
.mg-btn::after {           /* 按钮尾部箭头 */
    content: "";
    width: 16px;
    height: 8px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 8'><path d='M12 1l3 3-3 3M15 4H0' stroke='black' stroke-width='1.5' fill='none'/></svg>") center/contain no-repeat;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 8'><path d='M12 1l3 3-3 3M15 4H0' stroke='black' stroke-width='1.5' fill='none'/></svg>") center/contain no-repeat;
}
.mg-btn-light { background: var(--c-white); color: var(--c-dark); }
.mg-btn-noarrow::after { content: none; }   /* 隐藏按钮尾部箭头 */
.mg-btn-dark  { background: var(--c-black); color: var(--c-white); }
.mg-btn-outline { background: transparent; color: var(--c-white); border: 2px solid var(--c-white); }
.mg-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0, 0, 0, .35); }
.mg-btn-outline:hover { background: var(--c-white); color: var(--c-dark); }

/* 纯文字按钮变体：无箭头、字号18/字重600、无 hover 动画、白底深字 */
.mg-btn-plain {
    border-radius: 50px;
    background: #FFFFFF;
    box-sizing: border-box;
    border: 1px solid #333333;
    color: #333;
    font-size: 18px;
    font-weight: 600;
}
.mg-btn-plain::after { content: none; }
.mg-btn-plain:hover,
.mg-btn-outline.mg-btn-plain:hover { transform: none; box-shadow: none; background: #FFFFFF; color: #333; }

/* ============================================================
   导航栏（全站复用）
   结构: 顶栏(关于/搜索/语言) + 主导航(logo + 6项)
   ============================================================ */
.mg-header {
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    padding: 0 100px;
    z-index: 1000;
    color: var(--c-white);
    background: rgba(255, 255, 255, 0.1);       /* 非吸顶：白色 10% 半透明 + 12px 毛玻璃 */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: background .35s, color .35s, box-shadow .35s;
}
/* 滚动吸顶：白底 + 深色菜单文字(#333) */
.mg-header.is-scrolled {
    background: #fff;
    color: #333;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}
/* 吸顶态下，白色 logo / 图标反色为 #333、下划线与汉堡按钮同步变深 */
.mg-header.is-scrolled .mg-header__logo img,
.mg-header.is-scrolled .mg-header__top img { filter: brightness(.2); }   /* 255*.2=51=#333 */
.mg-header.is-scrolled .mg-header__nav > li > a::after { background: #333; }
.mg-header.is-scrolled .mg-header__top { height: 0; opacity: 0; border-bottom: 0; }
.mg-header.is-scrolled .mg-header__toggle span { background: #333; }

/* 汉堡菜单展开(.is-open)时：屏蔽滚动吸顶样式，令展开态在滚动/非滚动下完全一致
   （背景、字色、logo、汉堡条全部恢复为透明毛玻璃 + 白色；字号/字重/字体本就不随滚动变化） */
.mg-header.is-scrolled.is-open {
    background: rgba(255, 255, 255, 0.1);
    color: var(--c-white);
    box-shadow: none;
}
.mg-header.is-scrolled.is-open .mg-header__logo img,
.mg-header.is-scrolled.is-open .mg-header__top img { filter: none; }
.mg-header.is-scrolled.is-open .mg-header__nav > li > a::after { background: var(--c-white); }
.mg-header.is-scrolled.is-open .mg-header__toggle span { background: var(--c-white); }

.mg-header__top {
    /* 负边距抵消 .mg-header 的 100px 横向内边距，让顶栏（含底部分隔线）横跨整个浏览器窗口；
       再用 100px 左右内边距把内容收拢回原位置，避免链接位置偏移 */
    margin-left: -100px;
    margin-right: -100px;
    padding-left: 100px;
    padding-right: 100px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 36px;
    overflow: hidden;

    font-size: var(--fs-caption-16);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);   /* 顶栏/主导航分隔线（全宽） */
    transition: height .35s ease, opacity .35s ease, border-color .35s;
}
.mg-header__top a { display: inline-flex; align-items: center; gap: 8px; opacity: .9; transition: opacity .3s; }
.mg-header__top a:hover { opacity: 1; }
.mg-header__top img { width: 20px; height: 20px; transition: filter .35s; }

.mg-header__main {
    height: 90px;
    display: flex;
    align-items: center;

}
.mg-header__logo img { height: 50px; width: auto; transition: filter .35s; }

.mg-header__nav {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 56px;
}
/* 超宽屏（>1600px）：用固定公式定位 nav 左外边距，覆盖默认的 margin-left:auto */
@media (min-width: 1601px) {
    .mg-header__nav {
        margin-left: calc( (100vw - 886px) / 2 - 266px );
    }
}
.mg-header__nav > li > a {
    position: relative;
    font-size: 17px;                       /* 仅顶部导航：覆盖 --fs-body-sm-20(20px) */
    font-weight: 400;
    line-height: 90px;
    transition: font-weight .3s, opacity .3s;
}
.mg-header__nav > li > a::after {      /* 当前页 / hover 下划线 */
    content: "";
    position: absolute;
    left: 0;
    bottom: -33px;
    width: 0; height: 2px;
    background: var(--c-white);
    transition: width .3s, background-color .3s;
}
.mg-header__nav > li > a:hover,
.mg-header__nav > li.active > a { font-weight: 700; }
.mg-header__nav > li > a:hover::after,
.mg-header__nav > li.active > a::after { width: 100%; }

/* 移动端汉堡按钮 */
.mg-header__toggle { display: none; }

/* 中等屏（1025–1135px）：去掉导航栏左右 100px 内边距，让内容更贴近视口边缘
   全局应用。同步清掉顶栏的负边距/补偿内边距，避免顶栏溢出视口 */
@media (min-width: 1025px) and (max-width: 1135px) {
    .mg-header {
        padding-left: 30px;
        padding-right: 30px;
    }
    .mg-header__top {
        margin-left: 0;
        margin-right: 0;
        padding-left: 0;
        padding-right: 0;
    }
    .mg-header__logo img {
        height: 40px;
        width: auto;
    }
}

@media (max-width: 1024px) {
    .mg-header {padding: 0;}
    .mg-header__top { display: none; }            /* 移动端隐藏顶栏 */
    .mg-header__main { height: 64px; padding: 0 24px; width: 100%;}
    .mg-header__logo img { height: 36px; }
    .mg-header__toggle {
        position: relative;
        display: inline-block;          /* 不用 flex+gap（鸿蒙浏览器不支持 flex gap） */
        margin-left: auto;
        width: 30px; height: 30px;
        vertical-align: middle;
        -webkit-tap-highlight-color: transparent;   /* 去 iOS 点击灰块 */
    }
    /* 三条横线：绝对定位，按固定几何排列，不依赖 gap / flex 基线 */
    .mg-header__toggle span {
        position: absolute;
        left: 3px; right: 3px;          /* 宽度自适应按钮，左右各留 3px */
        height: 2px;
        background: var(--c-white);
        transition: transform .3s, opacity .3s;
    }
    .mg-header__toggle span:nth-child(1) { top: 9px; }
    .mg-header__toggle span:nth-child(2) { top: 14px; }
    .mg-header__toggle span:nth-child(3) { top: 19px; }
    /* 变 ✕：三线归位到容器纵向中心(14px)再旋转，几何精确无魔法数字 */
    .mg-header.is-open .mg-header__toggle span:nth-child(1) { top: 14px; transform: rotate(45deg); }
    .mg-header.is-open .mg-header__toggle span:nth-child(2) { opacity: 0; }
    .mg-header.is-open .mg-header__toggle span:nth-child(3) { top: 14px; transform: rotate(-45deg); }

    .mg-header__nav {
        position: fixed;
        top: 64px; right: 0;
        width: 70%; max-width: 320px;
        height: calc(100vh - 64px);
        flex-direction: column;
        gap: 0;
        background: rgba(0, 0, 0, 0.92);
        backdrop-filter: blur(12px);
        padding: 20px 30px;
        transform: translateX(100%);
        transition: transform .35s;
    }
    .mg-header.is-open .mg-header__nav { transform: translateX(0); }
    .mg-header__nav > li { width: 100%; border-bottom: 1px solid rgba(255,255,255,.12); }
    .mg-header__nav > li > a { font-size: 17px; line-height: 60px; }   /* 仅顶部导航：覆盖 --fs-body-sm(18px) */
    .mg-header__nav > li > a::after { display: none; }
    /* 汉堡菜单：隐藏所有二级菜单，点击一级菜单直接跳转 */
    .mg-megamenu { display: none !important; }
}

/* ============================================================
   二级菜单 / mega-menu（hover 下拉，全站复用）
   结构: li.has-mega > a + .mg-megamenu[data-mega]
   桌面端 hover 滑出；移动端点击展开为内联列表。
   ============================================================ */
.mg-megamenu {
    position: absolute;
    top: 100%;                         /* 紧贴主导航底部 */
    left: 0;
    width: 100%;
    /* 全站统一：黑色 60% 半透明 + 12px 毛玻璃 */
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.30);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .3s ease, transform .3s ease, visibility .3s;
    z-index: 1;
}
/* 桌面端 hover 触发（common.js 亦会切换 .is-open-mega 提升稳健性） */
.has-mega:hover .mg-megamenu,
.has-mega.is-open-mega .mg-megamenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* 内容容器：居中、自适应高度（桌面 ~760px，中屏压缩到 ~620px） */
.mg-megamenu__inner {
    max-width: 1680px;
    margin: 0 auto;
    /* padding: 80px 100px 70px; */
    padding: 60px 0;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    /*gap: 60px 50px;                    /* 行间距 / 列间距 */
    gap: 30px;
    justify-items: center;
}

@media (max-width: 1440px) {
    .mg-megamenu__inner { padding: 60px 80px 55px; gap: 45px 36px; }
}

/* 单张产品卡 */
.mg-mega-card {
    width: 100%;
    max-width: 240px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    text-decoration: none;
    /* background-color: #666; */
}
.mg-mega-card__img {
    width: 200px; height: 200px;
    display: flex; align-items: center; justify-content: center;
    /* background: #f6f6f6; */
    overflow: hidden;
    transition: transform .3s ease;
}
.mg-mega-card__img img {
    width: 100%; height: 100%;
    object-fit: contain;
    padding: 16px;
    transition: transform .35s ease;
}
.mg-mega-card__name {
    margin-top: 22px;
    font-size: 16px;                   /* 仅二级菜单：覆盖 --fs-body-sm(18px) */
    line-height: 30px;
    color: rgba(255, 255, 255, 0.85);  /* 全站统一：暗底白字 */
    transition: color .3s ease;
}
/* 主推项：标题加深 + 底部分隔线 */
.mg-mega-card.is-feature .mg-mega-card__name {
    color: #ffffff;
    font-weight: 600;
    position: relative;
    padding-bottom: 8px;
}
.mg-mega-card.is-feature .mg-mega-card__name::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    /* transform: translateX(-50%); */
    width: 100%; height: 2px;
    background: rgba(255, 255, 255, 0.85);
}
/* 卡片 hover：图缩放 */
.mg-mega-card:hover .mg-mega-card__img img { transform: scale(1.06); }

/* —— 二级菜单项：hover 才加粗+下划线，下划线进出动画（防抖动） —— */
/* 默认态：统一普通态，预留 padding 占位防抖动；下划线 ::after 用 scaleX（锚左） */
.mg-mega-card .mg-mega-card__name,
.mg-mega-card.is-feature .mg-mega-card__name {
    color: rgba(255, 255, 255, 0.85);
    font-weight: 400;
    position: relative;
    padding-bottom: 8px;
    transition: color .25s ease;
}
.mg-mega-card .mg-mega-card__name::after,
.mg-mega-card.is-feature .mg-mega-card__name::after {
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    width: 100%; height: 2px;
    background: rgba(255, 255, 255, 0.85);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .3s ease;
}
/* hover：文字加深加粗 + 下划线从左到右展开 */
.mg-mega-card:hover .mg-mega-card__name,
.mg-mega-card:hover.is-feature .mg-mega-card__name {
    color: #ffffff;
    font-weight: 600;
}
.mg-mega-card:hover .mg-mega-card__name::after,
.mg-mega-card:hover.is-feature .mg-mega-card__name::after {
    transform: scaleX(1);
    transform-origin: left;
}

/* ============================================================
   二级菜单 / text-only（合作 / 服务与支持 / 新闻动态）
   复用 .mg-megamenu 外壳与 .mg-mega-card，但去除图片，呈现为居中横向文字列表。
   不影响带图的智邸/智谷 megamenu 与产品中心 tabs。
   ============================================================ */
.mg-megamenu--text .mg-megamenu__inner {
    padding: 32px 80px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0 56px;
}
@media (max-width: 1440px) {
    .mg-megamenu--text .mg-megamenu__inner { padding: 28px 60px; gap: 0 44px; }
}
.mg-megamenu--text .mg-mega-card {
    width: auto;                       /* 覆盖基类 width:100%，使 flex 横向排列而非堆叠 */
    max-width: none;
    padding: 6px 0;
}
.mg-megamenu--text .mg-mega-card .mg-mega-card__name {
    margin: 0;
    font-size: 18px;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.85);
    white-space: nowrap;
}

/* ============================================================
   产品中心 megamenu：左 tab 选项卡 + 右产品区（hover 切换 tab）
   复用 .mg-megamenu 外壳与 .mg-mega-card 单卡片，独立两栏布局，不影响智谷/智邸。
   ============================================================ */
.mg-megamenu--tabs .mg-mega-tabs {
    max-width: 1680px;
    margin: 0 auto;
    padding: 60px 80px;
    display: grid;
    grid-template-columns: 260px 1fr;       /* 左 tab 栏固定宽 / 右产品区自适应 */
    gap: 60px;
    align-items: start;
}
@media (max-width: 1440px) {
    .mg-megamenu--tabs .mg-mega-tabs { padding: 50px 60px; gap: 40px; grid-template-columns: 220px 1fr; }
    .mg-mega-panel.is-active { gap: 45px 36px; }   /* 对齐智谷 megamenu 中屏间距 */
}

/* —— 左侧：tab 导航（竖排） —— */
.mg-mega-tabs__nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.mg-mega-tab {
    display: flex;
    align-items: center;
    justify-content: flex-end;               /* 文字 + 箭头整体右对齐，贴近右侧产品区 */
    gap: 10px;
    padding: 16px 0;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 17px;
    font-weight: 300;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.85);
    transition: color .25s ease, font-weight .25s ease;
}
.mg-mega-tab:hover,
.mg-mega-tab.is-active {
    color: #ffffff;
    font-weight: 600;
}
/* 箭头：CSS 画的 chevron。默认朝下，hover/active 旋转向右 */
.mg-mega-tab__arrow {
    display: inline-block;
    width: 7px; height: 7px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);                /* 45° = 朝右下 → 竖排里视觉为向下箭头 */
    transition: transform .3s ease;
    flex: none;
}
.mg-mega-tab:hover .mg-mega-tab__arrow,
.mg-mega-tab.is-active .mg-mega-tab__arrow {
    transform: rotate(-45deg);               /* 旋转向右（朝右） */
}

/* —— 右侧：产品卡片区，随 tab 切换（display 控制） —— */
.mg-mega-tabs__panels { min-height: 280px; }  /* 避免 tab 间产品数不同导致整体跳动 */
.mg-mega-panel { display: none; }
.mg-mega-panel.is-active {
    display: grid;
    grid-template-columns: repeat(4, 1fr);   /* 固定 4 列，对齐智谷 megamenu 布局（智谷为 6 列） */
    gap: 30px;
    justify-items: center;
}

/* —— 移动端：mega-menu 转为内联可展开列表（汉堡菜单内点击展开） —— */
@media (max-width: 1024px) {
    .mg-megamenu {
        position: static;
        width: auto;
        background: rgba(0, 0, 0, 0.25);
        box-shadow: none;
        opacity: 1;
        visibility: visible;
        transform: none;
        max-height: 0;                 /* 折叠态：高度 0 */
        overflow: hidden;
        transition: max-height .35s ease;
    }
    .has-mega.is-open-mega .mg-megamenu { max-height: 1200px; }
    .mg-megamenu__inner {
        max-width: none;
        padding: 10px 0 14px 24px;
        grid-template-columns: 1fr;
        gap: 0;
    }
    .mg-mega-card {
        flex-direction: row;
        max-width: none;
        text-align: left;
        padding: 8px 0;
    }
    .mg-mega-card__img { width: 44px; height: 44px; flex: none; background: transparent; }
    .mg-mega-card__img img { padding: 4px; }
    .mg-mega-card__name {
        margin: 0 0 0 12px;
        font-size: var(--fs-caption-15);
        line-height: 44px;
        color: rgba(255, 255, 255, 0.85);
    }
    .mg-mega-card.is-feature .mg-mega-card__name { color: #fff; }
    .mg-mega-card.is-feature .mg-mega-card__name::after { display: none; }

    /* text-only megamenu（合作/服务/新闻）：移动端转为纵向列表，融入暗色抽屉 */
    .mg-megamenu--text .mg-megamenu__inner {
        display: block;
        padding: 10px 0 14px 24px;
        gap: 0;
    }
    .mg-megamenu--text .mg-mega-card { padding: 8px 0; }
    .mg-megamenu--text .mg-mega-card__name {
        margin: 0;
        font-size: var(--fs-caption-15);
        line-height: 44px;
        color: rgba(255, 255, 255, 0.85);
    }

    /* 产品中心 megamenu：tab 横向、产品纵向，融入暗色抽屉 */
    .mg-megamenu--tabs .mg-mega-tabs {
        display: block;
        padding: 10px 0 14px 24px;
        gap: 0;
    }
    .mg-mega-tabs__nav {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 20px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.12);
        padding-bottom: 10px;
        margin-bottom: 6px;
    }
    .mg-mega-tab {
        padding: 6px 0;
        justify-content: center;              /* 横排时 label+arrow 整体居中，覆盖桌面右对齐 */
        color: rgba(255, 255, 255, 0.7);
        font-size: var(--fs-caption-15);
    }
    .mg-mega-tab:hover,
    .mg-mega-tab.is-active { color: #fff; }
    .mg-mega-tabs__panels { min-height: 0; }
    .mg-mega-panel,
    .mg-mega-panel.is-active {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0;
    }
}

/* ============================================================
   页脚（全站复用）
   ============================================================ */
.mg-footer {
    position: relative;
    color: var(--c-white);
    background: #0c0c0c;
}
.mg-footer__inner { position: relative; z-index: 1; }

.mg-footer__top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 40px;
    padding: 86px 100px 0;
}
.mg-footer__cols { display: flex; flex-wrap: wrap; gap: 96px; }
.mg-footer__col h4 { font-size: var(--fs-body-24); font-weight: 600; margin-bottom: 30px; }
.mg-footer__col li { font-size: var(--fs-body-sm); line-height: 2.05; opacity: .85; transition: opacity .3s; }
.mg-footer__col li:hover { opacity: 1; }

.mg-footer__qrcode { text-align: center; flex-shrink: 0; }
.mg-footer__qrcode img { width: 180px; height: 180px; border-radius: 8px; }
.mg-footer__qrcode p { margin-top: 18px; font-size: var(--fs-body-sm-20); font-weight: 500; }

.mg-footer__contact {
    display: flex;
    flex-wrap: wrap;
    gap: 60px;
    padding: 30px 100px 28px;
    margin-top: 56px;
    border-top: 1px solid var(--c-line-dark);
}
.mg-footer__contact-item { display: flex; align-items: center; gap: 24px; }
.mg-footer__contact-item img { width: 34px; height: 34px; }
.mg-footer__contact-item .label { font-size: var(--fs-body-sm-20); opacity: .9; }
.mg-footer__contact-item .value { font-size: var(--fs-body-sm-20); font-family: var(--font-num); }

.mg-footer__copyright {
    text-align: center;
    font-size: var(--fs-caption-16);
    line-height: 1.8;
    opacity: .7;
    padding: 26px 100px;
    border-top: 1px solid var(--c-line-dark);
}

@media (max-width: 1280px) {
    .mg-footer__top, .mg-footer__contact, .mg-footer__copyright { padding-left: 40px; padding-right: 40px; }
    .mg-footer__cols { gap: 64px; }
}
@media (max-width: 768px) {
    .mg-footer__top { flex-direction: column; padding: 40px 24px 0; }
    .mg-footer__cols { gap: 40px; }
    .mg-footer__col h4 { font-size: var(--fs-body-sm); margin-bottom: 14px; }
    .mg-footer__col li { font-size: var(--fs-caption); }
    .mg-footer__qrcode img { width: 130px; height: 130px; }
    .mg-footer__qrcode p { font-size: var(--fs-caption); }
    .mg-footer__contact { gap: 24px; padding: 24px; }
    .mg-footer__contact-item { gap: 12px; }
    .mg-footer__contact-item .label, .mg-footer__contact-item .value { font-size: var(--fs-caption); }
    .mg-footer__copyright { font-size: var(--fs-micro-12); padding: 18px 24px; }
}

/* ============================================================
   返回顶部
   ============================================================ */
.mg-backtop {
    position: fixed;
    right: 32px; bottom: 48px;
    width: 50px; height: 50px;
    border: none;
    border-radius: 50%;
    background: var(--c-white);
    color: var(--c-black);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px) scale(.9);
    transition: opacity .35s ease, visibility .35s ease, transform .35s cubic-bezier(.22,1,.36,1), box-shadow .3s ease, background .3s ease, color .3s ease;
    z-index: 900;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}
.mg-backtop__icon { width: 22px; height: 22px; display: block; }
.mg-backtop.is-show { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.mg-backtop:hover { background: var(--c-white); color: var(--c-black); }
.mg-backtop:active { transform: translateY(0) scale(.94); }
.mg-backtop:focus-visible { outline: 2px solid var(--c-black); outline-offset: 3px; }
/* 移动端略小、收边，避免遮挡内容 */
@media (max-width: 768px) {
    .mg-backtop { width: 46px; height: 46px; right: 16px; bottom: 24px; }
    .mg-backtop__icon { width: 20px; height: 20px; }
}

/* ============================================================
   滚动进入动画（IntersectionObserver 驱动，见 common.js）
   ============================================================ */
[data-aos] {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity .9s ease, transform .9s ease;
}
[data-aos].aos-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    [data-aos] { opacity: 1; transform: none; transition: none; }
    html { scroll-behavior: auto; }
}

/* 按钮 hover 的 transform 需稳赢入场态的 [data-aos].aos-in（同特异性时后者后置会覆盖），
   故用属性选择器+class 抬高特异性到 (0,3,0)，确保带 data-aos 的按钮也能上移。 */
[data-aos].mg-btn,
[data-aos].mg-btn-light,
[data-aos].mg-btn-dark,
[data-aos].mg-btn-outline { transition: transform .3s, box-shadow .3s, opacity .3s; }
[data-aos].mg-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0, 0, 0, .35); }


/* 首页各模块之间的 10px 全宽白色分隔条 */
.home-gap {
    width: 100%;
    /* height: 10px; */
    height: 0;
    background-color: #fff;
    display: none;
}

/* ============= 模块标题、描述、按钮、图标等 ============= */
.jgjn-section-title {
    font-size: clamp(28px, 7vw, 42px) !important;
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: 40px;
}

.jgjn-section-description {
    font-size: 17px;
    font-weight: 300;
    line-height: 2;
    margin-bottom: 40px;
}

.jgjn-section-button {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    justify-content: center;
    gap: 10px;
    /* min-width: 160px;
    height: 45px; */
    padding: 10px 20px;
    /* margin-left: 30px; */
    margin-bottom: 60px;
    border: 2px solid var(--c-white);
    border-radius: 40px;
    background: var(--c-white);
    color: var(--c-dark);
    font-size: 17px;
    font-weight: 400;
    line-height: 1;
    white-space: nowrap;
    transition: transform .3s, box-shadow .3s, opacity .3s;
}
.jgjn-section-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .35);
}
.jgjn-section-button::after {           /* 按钮尾部箭头（同 .mg-btn） */
    content: "";
    width: 16px;
    height: 8px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 8'><path d='M12 1l3 3-3 3M15 4H0' stroke='black' stroke-width='1.5' fill='none'/></svg>") center/contain no-repeat;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 8'><path d='M12 1l3 3-3 3M15 4H0' stroke='black' stroke-width='1.5' fill='none'/></svg>") center/contain no-repeat;
}
.jgjn-section-button.mg-btn-noarrow::after { content: none; }   /* 隐藏 jgjn 按钮尾部箭头 */


.jgjn-section-featureicons {
    /* padding-left: 30px; */
    /* padding-right: 30px; */
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    align-content: center;
}

.jgjn-section-featureicons img {
    width: 36px;
    height: 36px;
    object-fit: contain;
    overflow: hidden;
    margin: 0 auto 20px auto;
}

.jgjn-section-featureicons span {
    font-size: 15px;
    font-weight: 300;
    line-height: 1;
    letter-spacing: 2px;
}

/* 小屏模式：APP 下载按钮去掉最小宽度，字号 16px */
@media (max-width: 480px) {
    .mg-btn.app-qr-btn { min-width: 100px !important; font-size: 12px !important; }
}

@media (max-width: 600px) {
    .mkhxys {
        letter-spacing: 0 !important;
    }
}