/* ============================================================
   超级节点MFA 页（fmcgMFA.html）—— v2 流式适配规范
   基准 1920 设计稿：clamp(下限, 设计值/19.2 的 vw 值, 设计值)
   标注来源：蓝湖画板「超级节点·MFA」（1920×8251，底色 #F5F5F7）
   ============================================================ */

/* 页面底色：蓝湖画板背景层 #F5F5F7（CTA 白块、hero/介绍区图片自带底色） */
body {
    background-color: #F5F5F7;
}

/* ---------- Hero：黑底金属字主视觉（切图 1102.png 3840×1438 @2x → @1920 1920×719）
   2026-10-10 改版：图与文字由「绝对定位叠加」改为「上下分离」——图为通栏流内元素（高等比自适应），
   标题/正文/按钮在图下方居中排布（页面底色 #F5F5F7 直接承托，文字改深色）。
   间距全部取自蓝湖画板像素实测（图一 scale=0.526：hero底 y454、标题墨行 513~536、正文墨行 553~562 / 570~578、
   按钮 615~642 且实测 165.4×53.2 与全站大按钮 166×53 吻合；图三 scale=0.5371 红色标注线 y345~439 = 175px）：
   hero底→标题行盒顶 103、hero底→正文行盒顶 175、hero底→按钮顶 306.1、hero底→按钮底 357.4、
   hero底→介绍区 section 顶 392.65（= 介绍区标题墨顶 541.8 − .fm-intro-body padding-top 135 − 行盒上留 14.15）。 ---------- */
.fm-hero {
    overflow: hidden;
    padding-bottom: max(51.9px, 4.323vw); /* 按钮底→介绍区顶 83@1920（2026-10-10 用户要求加大下方留白，取全站 hero 按钮底距图底既有规范值 83；原画板实测 35）；下限 = @1200 值 */
}
.fm-hero-bg {
    display: block;
    width: 100%; /* 通栏等比：@1920 高 719 */
    height: auto;
}
.fm-hero-text {
    text-align: center; /* 图一：标题/正文/按钮整体水平居中 */
}
.fm-hero-title {
    margin-top: max(64.4px, 5.365vw); /* hero底→标题行盒顶 103@1920 = 蓝湖标注 175（正文框顶）− 72（标题行盒高），两文本框紧邻 */
    font-size: clamp(32px, 2.676vw, 51.38px); /* 图二标注 51.38px */
    line-height: 1.4; /* 72/51.38 = 1.4013，与图二 height 72px 一致，同全站模块标题规范 */
    font-weight: 800; /* PingFang SC·Heavy */
    color: #1D1D1F; /* 图二标注 */
}
.fm-hero-desc {
    margin: 0 auto; /* 标题行盒底与正文行盒顶紧邻（175 = 103 + 72），无额外间距 */
    max-width: clamp(871px, 72.552vw, 1393px); /* 图三标注正文框 1393（左右各 264/265）；下限 = @1200 值 */
    font-size: clamp(13px, 1.094vw, 21px); /* 图三标注 21px */
    line-height: 1.49; /* 31.27/21（图三标注行高 31.27px） */
    font-weight: 700; /* PingFang SC·Bold */
    color: #1D1D1F; /* 图三标注 */
}
.fm-hero-btn {
    margin-top: max(42.9px, 3.573vw); /* 正文两行行盒底→按钮顶 68.6@1920（按钮顶 306.1 − 正文顶 175 − 两行 62.5） */
}

/* ---------- 介绍区：浅蓝渐变底 + 平台界面面板（组158878，1563×1140 @2x 导出，设计槽位 1954×1425、x-18 出血）
   新切图把「超级节点 MFA + 三条卖点」面板烘焙进了背景层，故：
   ① 图改为流内元素、由图自身决定区高（禁止 object-fit:cover——面板会被裁切/缩放失控）；
   ② 文字层绝对定位叠在图上方的透明光晕区；
   ③ 图宽按设计槽位 1954/1920 = 101.771% 左右各出血 0.8855%，由 section overflow:hidden 裁到视口宽，
      面板实尺寸 = 1954×(1072/1563) = 1339 CSS（图二画板实测 1339，与旧界面大图 1264 视觉一致不缩小）。 ---------- */
.fm-intro {
    position: relative;
    overflow: hidden; /* 裁掉左右各 17px 出血，等同蓝湖 x-18 的画板裁切 */
}
.fm-intro-bg {
    display: block;
    width: 101.771%; /* 设计槽位 1954 @1920 */
    margin-left: -0.8855%; /* 左右各出血 17.04px @1920 */
    height: auto;
}
.fm-intro-body {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1;
    text-align: center;
    /* 下内边距归零：区高改由 fm-intro-bg 自身高度（1425@1920）决定，
       面板顶边落在图 382/1140=33.5% 处（=477 CSS），与正文底部留 85 间隙 */
    padding: clamp(84px, 7.03vw, 135px) 24px 0;
}
.fm-intro-title {
    font-size: clamp(32px, 2.676vw, 51.38px);
    line-height: 1.4;
    font-weight: 800;
    color: var(--text-main);
}
.fm-intro-sub {
    margin: clamp(20px, 1.67vw, 32px) auto 0;
    /* 设计稿为单行（28px 下单行约 1440px），不限宽避免折行 */
    font-size: clamp(18px, 1.458vw, 28px);
    line-height: 1.37; /* 38.33/28 */
    font-weight: 700;
    color: var(--text-main);
}
.fm-intro-text {
    margin: clamp(10px, 0.83vw, 16px) auto 0;
    /* 2026-10-10 用户给定：24px / #6D6D6D（覆盖此前 22px/#1D1D1F）。下限 = @1200 值，与全站流式缩放基准一致。
       行高沿用 33px 不变：.fm-intro-body 是绝对定位在烘焙面板切图上方，行高不变才不会压到下方面板。
       长行校验：最长行≈69 字×24 = 1656px，而 body 满屏宽（1920 − 左右 padding 48）= 1872px，不会二次折行 */
    font-size: clamp(15px, 1.25vw, 24px);
    line-height: clamp(26px, 1.72vw, 33px);
    font-weight: 400;
    color: #6D6D6D;
}
/* 平台界面大图（旧 fm-intro-ui.png）已于 2026-09-28 取消：面板已烘焙进组158878 背景切图 */

/* ---------- 模块标题（MFA能力 / MFA价值）：全站标题规范 51.38px / 1.4 / Heavy / #1D1D1F
   画板实测：MFA能力 墨高 25@s0.528→47.3；MFA价值 墨高 24@s0.5288→45.4 → 字号均对应 51.38 ---------- */
.fm-ability-title,
.fm-feature-title {
    text-align: center;
    font-size: clamp(32px, 2.676vw, 51.38px);
    line-height: 1.4;
    font-weight: 800;
    color: var(--text-main);
}

/* ---------- 四大能力白卡（组158708~711，346×600，间距14~16） ---------- */
.fm-ability {
    /* 2026-10-13 二次修正：取消负 margin，标题落在整块切图之外。
       介绍区切图 fmcg-intro-bg.png（1563×1140 → @1920 显示 1954×1425）图底确有 146.3 CSS 的
       整幅恒定 alpha=153 浅蓝平铺膜，但它视觉上属于切图本身（浅蓝区的可见底边 = 图盒底边），
       不是可抵消的「留白」：
         · 上轮按「可视内容底 146.3」抵消 → 标题落进浅蓝区内（距图底 80），仍被切图压住；
         · 正确做法：不抵消，padding-top 80 即「切图可见底边 → 标题顶」= 80，与其余各模块同构。
       旧值沿革：深色文字末行 300（错·只认文字）→ 可视内容底 146.3（错·膜属切图）→ 不抵消（正）。
       ★ 结论：半透明平铺膜、彩色装饰等「非深色但可见」的图底像素，一律计入切图高度，不得抵消。 */
    padding-top: clamp(50px, 4.167vw, 80px);
}
/* 标题盒底→卡顶 84：画板实测墨底→卡顶 96.6，扣行盒上下余量（71.9-47.3)/2≈12.3 */
.fm-ability-title {
    margin-bottom: clamp(52px, 4.375vw, 84px);
}
.fm-ability-grid {
    display: flex;
    gap: clamp(10px, 0.78vw, 15px);
}
/* 白底卡不动、hover 由外层 .card-zoom 整卡放大（第十三章卡片悬停放大规范） */
.fm-ability-grid > .card-zoom {
    flex: 1 1 0;
    width: 0;
    min-width: 0;
}
.fm-ability-card {
    width: 100%;
    background-color: #FFFFFF; /* 蓝湖：卡底纯白无边框无圆角 */
    overflow: hidden;
}
.fm-ability-card img {
    display: block;
    width: 100%;
    height: auto;
}

/* ---------- MFA价值·彩色特性卡（组158712~715，341×523，间距21~22） ---------- */
.fm-feature {
    /* 2026-10-10 用户要求：与 MFA能力 模块上移后的间距保持一致（80@1920）。
       上一模块是白卡切图、底边基无图内留白，故无需负 margin，直接收 padding-top 175 → 80 */
    padding-top: clamp(50px, 4.167vw, 80px);
}
/* 标题盒底→卡顶 78.5：画板实测墨底→卡顶 92.7，扣行盒上下余量（71.9-45.4)/2≈13.3 */
.fm-feature-title {
    margin-bottom: clamp(48px, 4.089vw, 78.5px);
}
.fm-feature-grid {
    display: flex;
    gap: clamp(13px, 1.15vw, 22px);
}
.fm-feature-grid img {
    flex: 1 1 0;
    width: 0;
    min-width: 0;
    height: auto;
    transition: transform .3s var(--ease-zoom);
    will-change: transform;
}
@media (hover: hover) and (pointer: fine) {
    .fm-feature-grid img:hover {
        transform: scale(1.02);
    }
}

/* ---------- MFA平台七大功能组件（4×2 无缝网格，单格 480×217） ---------- */
.fm-comp {
    /* 2026-10-10 用户要求上移：与 MFA能力 / MFA价值 统一为 80@1920（原 171） */
    padding-top: clamp(50px, 4.167vw, 80px);
}
.fm-comp-title {
    display: block;
    margin: 0 auto;
    width: clamp(329px, 27.45vw, 527px); /* 标题带字切图 527×72（MiSans） */
    height: auto;
}
.fm-comp-grid {
    margin: clamp(54px, 4.69vw, 90px) auto 0;
    max-width: 1920px; /* 全宽网格 ≥1920 封顶居中，保持单格 480×217 */
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}
.fm-comp-card {
    position: relative;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 480 / 217;
    background-color: #FFFFFF;
    border: 2px solid #EEEEEE; /* 常态：白底 2px #EEEEEE 外描边 */
    overflow: hidden;
}
/* hover 渐变底（蓝湖矩形866：左上→右下 0% #D0EAFF → 34.76% #FFFFFF → 100% #EAF3FF），
   置于内容切图之下，白底卡本身不动 */
.fm-comp-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: linear-gradient(135deg, #D0EAFF 0%, #FFFFFF 34.76%, #EAF3FF 100%);
    opacity: 0;
    transition: opacity .3s var(--ease-zoom);
}
/* 内容切图（图标+文字透明图）按实尺寸居中：组件卡 348×105、MFA 主卡 339×132（@2x÷2） */
.fm-comp-card img {
    position: relative;
    z-index: 1;
    width: clamp(217px, 18.125vw, 348px);
    height: auto;
    transition: transform .3s var(--ease-zoom);
    will-change: transform;
}
.fm-comp-card.is-main img {
    width: clamp(212px, 17.66vw, 339px);
}
@media (hover: hover) and (pointer: fine) {
    .fm-comp-card:hover::before {
        opacity: 1;
    }
    /* 无缝网格模块特殊处理（已裁决）：整卡不放大，仅内容切图 scale，避免盖住相邻卡描边 */
    .fm-comp-card:hover img {
        transform: scale(1.02);
    }
}

/* ---------- 平台技术底座（标题真文字 + 内容整区切图 1427×988） ---------- */
.fm-base {
    /* 2026-10-10 用户要求上移：与上方各模块统一为 80@1920（原 187） */
    padding-top: clamp(50px, 4.167vw, 80px);
}
.fm-base-title {
    text-align: center;
    font-size: clamp(32px, 2.676vw, 51.38px);
    line-height: 1.4;
    font-weight: 800;
    color: var(--text-main);
}
.fm-base-img {
    display: block;
    margin: clamp(62px, 5.36vw, 103px) auto 0;
    width: 100%;
    height: auto;
}

/* ---------- CTA：白底横幅（矩形796，1920×369） ---------- */
.fm-cta {
    /* 2026-10-10 用户要求上移：与上方各模块统一为 80@1920（原 195） */
    margin-top: clamp(50px, 4.167vw, 80px);
    background-color: #FFFFFF;
    text-align: center;
    padding: clamp(54px, 4.48vw, 86px) 24px clamp(56px, 4.9vw, 94px);
}
.fm-cta-title {
    font-size: clamp(25px, 2.083vw, 40px);
    line-height: 1.4;
    font-weight: 800;
    color: var(--text-main);
}
.fm-cta-sub {
    margin-top: clamp(8px, 0.57vw, 11px);
    font-size: clamp(14px, 1.146vw, 22px);
    line-height: 1.41; /* 31/22 */
    font-weight: 500; /* PingFang SC·Medium */
    color: #3D3D3D;
}
.fm-cta-btns {
    margin-top: clamp(31px, 2.6vw, 50px);
    display: flex;
    justify-content: center;
    gap: clamp(31px, 2.6vw, 50px);
}

/* ---------- FAQ（整区切图，含标题与三组问答，1427×668.5） ---------- */
.fm-faq {
    /* 2026-10-10 用户要求上移：与上方各模块统一为 80@1920（原 176）。
       注意「常见问题」标题烘焙在切图内，图自身顶部尚有一段留白，若仍显疏可继续下调此值 */
    padding-top: clamp(50px, 4.167vw, 80px);
    padding-bottom: clamp(123px, 10.29vw, 198px); /* 图底至页脚 197.5px */
}
.fm-faq-img {
    display: block;
    width: 100%;
    height: auto;
}