/* ============================================================
 * 物码营销 V2 样式（wuma.html）
 * 设计稿：设计稿/画板/超级节点-物码营销@2x.png（画板 @1x 1920×9108）
 * 取数：蓝湖画板源数据逐图层标注（第十五章第 1/3/9 条：逐条算准一次写对，依据写进注释）
 * clamp 约定：设计值 D px@1920 → clamp(round(D*0.625)px, (D/19.2)vw, Dpx)，min 对应 1200 视口
 * 交互：M2 轮播 / M4 四大核心 4-Tab / M6 业务落地 6-Tab / M9 Q&A 折叠（见 js/v2/wuma.js）
 * ========================================================== */

/* ---------- 页面通底：蓝湖 #FFFFFF（第十五章第3条：body 唯一默认底色；交替段用浅蓝 #F7FAFF 局部背景） ---------- */
body.wuma-page {
    background-color: #FFFFFF;
}

/* ---------- 章节大标题：全站统一 51.38/72 Heavy #1D1D1F 居中 ---------- */
.wuma-title {
    margin: 0 auto;
    font-size: clamp(32px, 2.676vw, 51.38px);
    font-weight: 700;
    line-height: clamp(45px, 3.75vw, 72px);
    color: #1D1D1F;
    text-align: center;
}
/* 副标题：Bold 21/31.27 #6D6D6D 居中 max-width 1193 */
.wuma-subtitle {
    margin: clamp(12px, 1vw, 19px) auto 0;
    max-width: 1193px;
    font-size: clamp(13px, 1.094vw, 21px);
    font-weight: 700;
    line-height: clamp(20px, 1.629vw, 31.27px);
    color: #6D6D6D;
    text-align: center;
}

/* ---------- 整图模块通用：图铺满内容区（1428） ---------- */
.wuma-security-img,
.wuma-benefit-img,
.wuma-chain-panel {
    display: block;
    width: 100%;
}

/* ---------- 本页按钮字号/字重（蓝湖按钮文字 18px） ---------- */
.wuma-page .btn-primary {
    font-size: 18px;
    font-weight: 700;
}

/* ============================================================
 * M1 Hero：浅紫蓝底 + 整幅切图（左文字/右节点插画全烘焙）+ 2 代码按钮
 *   btn1 组158123 x247 y570（蓝底）；btn2 组158286 x428 y570（白底蓝字）；hero 顶 y100 → offset 470
 * ========================================================== */
.wuma-hero {
    position: relative;
    background-color: #F0EEFC;
    overflow: hidden;
}
.wuma-hero-bg {
    width: 100%;
    height: auto; /* 配合 HTML width/height 属性等比缩放，修复缩屏纵向拉伸变形 */
    display: block;
}
/* 2026-09-28 改版：Hero 只剩一个「获取解决方案」蓝底主按钮（复用全站 .btn-primary）
   位置按新图组158608 像素实测：设区顶 = hero 顶，按钮顶相对 hero 431 → 431/1920 = 22.448vw（旧 470 → 24.479vw）
   左缘与图内文案左对齐 x247 → 12.865vw */
.wuma-hero-btns {
    position: absolute;
    top: 22.448vw;
    left: 12.865vw; /* 247/1920 */
}

/* ============================================================
 * M2 现实业务困境：bg #FFFFFF + 标题/副标题 + 5 卡横向轮播 + 箭头
 *   标题距模块顶 89（矩形830 y740，标题 y829）
 * ========================================================== */
.wuma-pain {
    padding: clamp(56px, 4.635vw, 89px) 0 clamp(70px, 5.833vw, 112px);
}
/* 现实业务困境轮播：本页单独实现（非公共苹果模式）。
   设计=6 卡循环，视口居中显示 5 张整卡 + 两侧各露相邻卡(第6张)约一半并向背景白渐隐；箭头位于 5 卡外侧、居中压在两侧第 6 张半卡上。
   卡宽 --cw、间距 --cg 用 clamp 随屏缩放；卡 238×287（@1x）。 */
.wuma-pain-stage {
    container-type: inline-size;
    --cg: clamp(8px, 0.625vw, 12px);
    /* 卡宽由舞台实际宽推导：6 槽(5 整卡 + 两侧各半卡) 恰好铺满容器，随屏缩放、永不被 max-width 夹断 */
    --cw: calc((100cqi - 6 * var(--cg)) / 6);
    --aw: 55px; /* 箭头按钮尺寸（原 46px 放大 1.2 倍）；定位含 -aw/2，放大后仍居中压在两侧半卡上 */
    position: relative;
    width: 100%; /* 填满容器（= 6cw+6cg），不再写死宽度 + max-width 夹断导致右侧半卡/箭头错位 */
    margin: clamp(34px, 2.865vw, 55px) auto 0;
}
.wuma-pain-viewport {
    overflow: hidden;
    padding: 14px 0; /* 为悬停放大留空间，避免阴影/缩放被裁 */
    margin: -14px 0;
}
.wuma-pain-track {
    display: flex;
    gap: var(--cg);
    transition: transform .55s cubic-bezier(.4, 0, .2, 1);
    will-change: transform;
}
.wuma-pain-cell {
    flex: 0 0 var(--cw);
    aspect-ratio: 238 / 287;
}
.wuma-pain-card {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border-radius: 16px;
    transition: transform .4s ease;
}
.wuma-pain-cell:hover .wuma-pain-card {
    transform: scale(1.03);
}
/* 两侧渐隐遮罩：向背景白(#fff)线性渐隐露出的半张卡（替代原 backdrop-filter 模糊，避免发虚难看） */
.wuma-pain-peek {
    position: absolute;
    top: 0;
    bottom: 0;
    width: calc(var(--cw) / 2 + var(--cg));
    z-index: 2;
    pointer-events: none;
}
.wuma-pain-peek--l {
    left: 0;
    background: linear-gradient(90deg, #FFFFFF 10%, rgba(255, 255, 255, 0) 100%);
}
.wuma-pain-peek--r {
    right: 0;
    background: linear-gradient(270deg, #FFFFFF 10%, rgba(255, 255, 255, 0) 100%);
}
/* 箭头：位于 5 张整卡外侧、居中压在两侧第 6 张半卡上，垂直居中 */
.wuma-pain-prev,
.wuma-pain-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: var(--aw);
    height: var(--aw);
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    z-index: 3;
    transition: opacity .3s ease;
}
.wuma-pain-prev { left: calc((var(--cw) / 2 + var(--cg)) / 2 - var(--aw) / 2); }
.wuma-pain-next { right: calc((var(--cw) / 2 + var(--cg)) / 2 - var(--aw) / 2); }
.wuma-pain-prev img,
.wuma-pain-next img {
    width: 100%;
    height: auto;
    display: block;
}
.wuma-pain-prev:hover,
.wuma-pain-next:hover {
    opacity: .7;
}

/* ============================================================
 * M3 全链路说明：bg #F7FAFF + 标题/副标题 + 3 节点（图标+代码标题+描述）+ 曲线 + 左右箭头 + 底部痛点面板
 *   标题距模块顶 114（矩形832 y1392，标题 y1506）
 *   图标统一 172×132（蓝湖组158818/158817/158816 @1x，之前误用含文字整图且宽度不一，现拆分）
 *   曲线 wuma-chain-line @1x 1077×54：两端落在左/右节点图标中心，峰顶落在中间节点图标中心
 *     → 中间节点相对两侧上抬 = 弧高 54；曲线宽 1077 居中，其左右端点≈两侧图标中心
 *   clamp：172→clamp(108px,8.958vw,172px)；54→clamp(34px,2.8125vw,54px)；1077→clamp(673px,56.09vw,1077px)
 * ========================================================== */
.wuma-chain {
    padding: clamp(71px, 5.938vw, 114px) 0 clamp(70px, 5.833vw, 112px);
    background-color: #F7FAFF;
}
.wuma-chain-flow {
    position: relative;
    margin-top: clamp(40px, 3.333vw, 64px);
    padding: clamp(34px, 2.8125vw, 54px) clamp(44px, 4.167vw, 80px) 0; /* 上边为中间抬高节点预留，左右为箭头预留 */
}
.wuma-chain-track {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
/* 曲线：锁定左右端点分别落在左/右图标中心（随屏缩放），弧顶落在中间图标中心。
   用 div + background 100%/100% 拉伸，强制填满 left→right 之间（img 在 width:auto 下按固有宽高比渲染且忽略 right，会连不到右节点） */
.wuma-chain-line {
    position: absolute;
    left: clamp(31px, 2.604vw, 50px);   /* 左图标(200×264)中心 = 132×(200/264)/2 = 50 */
    right: clamp(54px, 4.479vw, 86px);  /* 右图标(344×264)中心 = 132×(344/264)/2 = 86 */
    top: clamp(7px, 0.625vw, 12px);     /* 弧顶=中间图标中心(y12)：两侧中心66 - 弧高54 */
    height: clamp(34px, 2.81vw, 54px);  /* 弧高54；底端=两侧图标中心(y66) */
    background: url("https://qnoss.supernode.pro/supernode/pc/static/images/v2/wuma/wuma-chain-line.png") no-repeat center / 100% 100%;
    z-index: 0;
    pointer-events: none;
}
.wuma-chain-node {
    position: relative;
    z-index: 1;
    display: block;
    cursor: pointer; /* 节点可悬停/点击切换固定选中 */
    width: clamp(220px, 19.79vw, 380px); /* 列宽，容纳描述换行 */
    height: clamp(169px, 14.06vw, 270px); /* 定死节点高（图标132+间距+最长描述），刚好容纳最高内容不预留过头；描述显隐/切换不改变行高，下方痛点面板不再跳动 */
}
/* 三列对齐：左列左对齐、中列居中、右列右对齐（图标与描述同侧，描述继承本列对齐方式） */
.wuma-chain-node--l { text-align: left; }
.wuma-chain-node--m { text-align: center; transform: translateY(calc(-1 * clamp(34px, 2.8125vw, 54px))); } /* 抬至曲线峰 */
.wuma-chain-node--r { text-align: right; }
/* 图标切图（组158818/158817/158816，图标+标题烘焙）：统一按高 132 渲染，宽随切图自然（100/128/172），图标圆心等高对齐 */
.wuma-chain-fig {
    position: relative;
    display: inline-block;
    vertical-align: top; /* 收缩到图标宽，下划杠宽度=标题宽 */
}
.wuma-chain-icon {
    display: block;
    height: clamp(83px, 6.875vw, 132px);
    width: auto;
}
/* 标题下横杠（选中/悬停展示，蓝湖渐变 2px）：贴切图标题底部 */
.wuma-chain-bar {
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, #416BF5, #7C9BFF);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .3s ease;
}
.wuma-chain-node--m .wuma-chain-bar { transform-origin: center; }
.wuma-chain-node--r .wuma-chain-bar { transform-origin: right center; }
.wuma-chain-node.is-active .wuma-chain-bar {
    transform: scaleX(1);
}
/* 描述：默认隐藏，选中（is-active，由箭头切换或悬停 JS 驱动）时展示 */
.wuma-chain-desc {
    margin: clamp(14px, 1.15vw, 22px) 0 0;
    font-size: clamp(12px, 0.833vw, 16px);
    font-weight: 400;
    line-height: clamp(20px, 1.51vw, 29px);
    color: #6D6D6D;
    display: none;
}
.wuma-chain-node.is-active .wuma-chain-desc {
    display: block;
}
/* 左右蓝色箭头（切图 容器@2x / 容器@2x(1)，@1x 55×56） */
.wuma-chain-arrow {
    position: absolute;
    top: clamp(75px, 6.25vw, 120px); /* 对齐两侧模块图标垂直中心：flow padding-top 54 + 图标半高 66 = 120 */
    transform: translateY(-50%);
    width: clamp(30px, 2.86vw, 55px);
    height: clamp(30px, 2.92vw, 56px);
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity .3s ease;
}
.wuma-chain-arrow img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}
.wuma-chain-prev { left: 0; }
.wuma-chain-next { right: 0; }
.wuma-chain-arrow:hover {
    opacity: .7;
}
.wuma-chain-panel {
    margin: clamp(24px, 2.08vw, 40px) auto 0;
    max-width: 1209px;
}

/* ============================================================
 * M4 四大核心能力板块：bg #FFFFFF + 标题 + 4 Tab 卡 + 4 详情整图（Tab 切换）
 *   标题距模块顶 76（y2281，标题 y2357）
 * ========================================================== */
.wuma-cap {
    padding: clamp(48px, 3.958vw, 76px) 0 clamp(70px, 5.833vw, 112px);
    background-color: #F5F5F7; /* 四大核心能力板块：蓝湖浅灰底 */
}
.wuma-cap-tabs {
    margin-top: clamp(33px, 2.7vw, 52px);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: clamp(14px, 1.458vw, 28px);
    flex-wrap: wrap;
}
/* 照首页 .prod-card 逻辑：白卡是「真实盒子」(白底+圆角+投影)，图只是透明底的“图标+文字”内容；
   边框/投影直接落在盒子上，天然贴合，无需负 margin、无需测切图留白 */
.wuma-cap-tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: clamp(15px, 1.25vw, 24px) clamp(18px, 1.458vw, 28px);
    border: 1px solid transparent; /* 占位：激活时透出渐变边框，尺寸不跳动（同首页 .prod-card） */
    border-radius: clamp(13px, 1.042vw, 20px);
    background-color: #FFFFFF;
    box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.05);
    cursor: pointer;
    transition: box-shadow .3s ease;
}
.wuma-cap-tab img {
    display: block;
    height: clamp(32px, 2.656vw, 51px); /* 透明底内容图，高 51@1x */
    width: auto;
}
/* 选中态：加深投影 + 圆角渐变描边（#60C3FE→#3D76F3，1px）。
   用「padding-box 铺白 + border-box 铺渐变」双背景实现圆角渐变边框——纯背景绘制，
   不用 mask/::after，避免反复切换 is-active 时 mask 合成层抖动导致渲染卡死 */
.wuma-cap-tab.is-active {
    box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.10);
    background:
        linear-gradient(#FFFFFF, #FFFFFF) padding-box,
        linear-gradient(90deg, #60C3FE, #3D76F3) border-box;
}
.wuma-cap-panels {
    margin-top: clamp(40px, 3.333vw, 64px);
    position: relative;
}
.wuma-cap-detail {
    display: none;
    width: 100%;
    margin: 0 auto;
}
.wuma-cap-detail.is-active {
    display: block;
}

/* ============================================================
 * M5 玩法矩阵：bg #FFFFFF + 标题/副标题 + 3 彩色卡（绿/橙/紫）
 *   标题距模块顶 90（矩形835 y3289，标题 y3379）；卡 460×583 gap25
 * ========================================================== */
.wuma-play {
    padding: clamp(56px, 4.688vw, 90px) 0 clamp(70px, 5.833vw, 112px);
}
.wuma-play-grid {
    margin-top: clamp(40px, 3.333vw, 64px);
    display: flex;
    justify-content: center;
    gap: 25px;
}
.wuma-play-grid > .card-zoom {
    flex: 0 0 clamp(288px, 23.958vw, 460px);
}
.wuma-play-card {
    width: 100%;
    display: block;
}

/* ============================================================
 * M6 业务落地场景：bg #F7FAFF + 标题 + 6 Tab 图标 + 内容区（手机图+代码文字+2按钮）Tab 切换
 *   标题距模块顶 114（矩形871 y4282，标题 y4396）
 * ========================================================== */
.wuma-scene {
    padding: clamp(71px, 5.938vw, 114px) 0 clamp(70px, 5.833vw, 112px);
    background-color: #F7FAFF;
}
.wuma-scene-tabs {
    margin-top: clamp(40px, 3.333vw, 64px);
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: clamp(16px, 2vw, 40px);
    flex-wrap: wrap;
}
/* 等宽列：每个 tab 均分容器宽、内容居中，使 6 个图标中心严格等距（切图宽窄不一也不会错位） */
.wuma-scene-tab {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    justify-content: center;
    padding: 0 0 clamp(10px, 1vw, 18px);
    border: 0;
    background: none;
    cursor: pointer;
}
.wuma-scene-tab img {
    display: block;
    height: clamp(83px, 6.875vw, 132px); /* 节点高 132 */
    width: auto;
    opacity: .55;
    transition: opacity .3s ease;
}
.wuma-scene-tab.is-active img {
    opacity: 1;
}
/* 选中下划线：矩形872 126×2 渐变 */
.wuma-scene-tab.is-active::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 60%;
    height: 2px;
    background: linear-gradient(90deg, #416BF5, #7C9BFF);
    border-radius: 2px;
}
.wuma-scene-panels {
    position: relative; /* 承载左右切换箭头绝对定位 */
    margin-top: clamp(40px, 3.333vw, 64px);
}
/* 场景切换箭头：从容器两侧向内挨靠内容、垂直居中（复用 M3 全链路蓝色箭头切图 wuma-chain-arrow-l/r，@1x 55×56） */
.wuma-scene-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: clamp(30px, 2.86vw, 55px);
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    z-index: 3;
    transition: opacity .3s ease;
}
.wuma-scene-arrow img {
    width: 100%;
    height: auto;
    display: block;
}
.wuma-scene-arrow:hover {
    opacity: .65;
}
.wuma-scene-prev {
    left: clamp(24px, 4.167vw, 80px); /* 从容器左缘向内挨靠内容 */
}
.wuma-scene-next {
    right: clamp(24px, 4.167vw, 80px); /* 从容器右缘向内挨靠内容 */
}
.wuma-scene-panel {
    display: none;
    align-items: center;
    justify-content: center; /* 内容组居中（修复偏左） */
    gap: clamp(30px, 3.958vw, 76px);
}
.wuma-scene-panel.is-active {
    display: flex;
}
.wuma-scene-phone {
    flex: 0 0 clamp(268px, 22.344vw, 429px); /* 手机图列 429×402 */
    height: clamp(280px, 20.94vw, 402px);
}
.wuma-scene-phone img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* 各图比例不一，contain 防拉伸变形、统一列高 */
    display: block;
}
/* 占位（手机图缺失，Tab5/6） */
.wuma-ph {
    aspect-ratio: 429 / 402;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 24px;
    background: #E9EEFB;
    color: #9AA3B8;
    font-size: 14px;
}
.wuma-scene-text {
    /* 定宽列（不能用内容宽）：面板用 justify-content:center 居中整组，若文字列宽随文案长短变，
     * 短文案场景（如场景5）会让整组变窄 → 图片被推右、文字与按钮左移，各场景不同竖线；
     * 定宽后 6 个场景图片列与文字/按钮列位置完全一致（620 = 原 max-width 设计值，长文案折行不变） */
    flex: 0 0 clamp(387px, 32.3vw, 620px);
}
.wuma-scene-h3 {
    margin: 0;
    font-size: clamp(18px, 1.458vw, 28px);
    font-weight: 700;
    line-height: clamp(27px, 2.031vw, 39px);
    color: #1D1D1F;
}
.wuma-scene-p {
    margin: clamp(14px, 1.25vw, 24px) 0 0;
    font-size: clamp(12px, 0.833vw, 16px);
    font-weight: 500;
    line-height: clamp(20px, 1.333vw, 25.6px);
    color: #3D3D3D;
    /* 预留两行高（全站最长正文 = 2 行）：面板 align-items:center 会把文字块垂直居中，
     * 场景 5/6 正文仅 1 行时块高矮一行→上下各让 12.8px→标题下沉、按钮上浮，切 tab 时跳动；
     * 定两行高后 6 个场景文字块等高，标题与按钮的垂直位置完全固定 */
    min-height: calc(clamp(20px, 1.333vw, 25.6px) * 2);
}
.wuma-scene-btns {
    margin-top: clamp(24px, 2vw, 40px);
    display: flex;
    gap: 15px;
}
.wuma-btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 166px;
    height: 53px;
    border-radius: 999px;
    background-color: #FFFFFF;
    color: #416BF5;
    font-size: 18px;
    font-weight: 700;
    border: none; /* 业务落地场景：白色按钮无描边 */
    transition: background-color .3s ease;
}
.wuma-btn-ghost:hover {
    background-color: #F0F4FF;
}

/* ============================================================
 * M7 多层安全与风控保障：bg #FFFFFF + 标题 + 4 卡整图（组158618 含文字）
 *   标题距模块顶 151（y5275，标题 y5426）
 * ========================================================== */
.wuma-security {
    padding: clamp(94px, 7.865vw, 151px) 0 clamp(40px, 3.333vw, 64px);
    background-color: #F5F5F7; /* 多层安全与风控保障：浅灰底 */
}
.wuma-security-img {
    margin-top: clamp(50px, 4.167vw, 80px);
}

/* ============================================================
 * M8 业务收益：bg #FFFFFF + 标题 + 5 卡整图（组158619 含文字，上2下3）
 *   标题距模块顶 65（y6300，标题 y6365）
 * ========================================================== */
.wuma-benefit {
    padding: clamp(41px, 3.385vw, 65px) 0 clamp(70px, 5.833vw, 112px);
    background-color: #F5F5F7; /* 业务收益：浅灰底 */
}
.wuma-benefit-img {
    margin-top: clamp(50px, 4.167vw, 80px);
}

/* ============================================================
 * M9 常见问题：bg #F5F5F7 + 整区切图（组158617 含标题与 Q1~Q5，@2x 2000×1754 → @1x 1000×877）
 * 2026-09-21 用户裁决：由代码平铺 Q&A 改为整图，与全站 FAQ 整图方案统一
 * ========================================================== */
.wuma-faq {
    padding: clamp(56px, 4.688vw, 90px) 0 clamp(80px, 6.667vw, 128px);
    background-color: #F5F5F7; /* 常见问题：浅灰底 */
}
.wuma-faq img {
    display: block;
    /* 2026-09-21 用户裁决：与其他 4 页 FAQ 统一宽度 1427（源图 @2x 2000 宽，2x 屏显示 2854 物理像素需放大 1.43 倍，文字轻微发软属已知取舍） */
    width: clamp(892px, 74.323vw, 1427px);
    margin: 0 auto;
}