/* ============================================================
 * 首页 V2 样式（index.html）
 * 设计稿：设计稿/画板/首页@2x.png（1920 @1x 基准）
 * 规范：《重构规则.md》第七章（带字切图整用，已裁决）/ 第十一章（滚动动画）
 *        第十二章（按钮）/ 第十三章（卡片放大 + 产品卡 hover 蓝框）
 * 切图：static/images/v2/（蒙版组182 等 5 张为 3840 全宽切图）
 * ========================================================== */

/* ---------- 模块公共 ---------- */
.home-title {
    font-size: clamp(28px, 2.3vw, 44px);
    font-weight: 700;
    line-height: 1.4;
    color: var(--text-main);
}
/* 模块副文案（蓝湖标注 2026-09-30：PingFang SC / 400 / 22px / #1D1D1F，原 18px 偏细）
   22px@1920 → clamp(14px, 1.146vw, 22px)（下限取 @1200 值） */
.home-sub {
    margin-top: clamp(12px, 0.94vw, 18px);
    font-size: clamp(14px, 1.146vw, 22px);
    font-weight: 400;
    line-height: 1.6;
    color: #1D1D1F;
}

/* ============================================================
 * M1 Hero：金属 MFA 大字（全宽黑底切图）+ 平台介绍（截图墙全宽切图，文字叠左）
 * ========================================================== */
.hero {
    background-color: #000000;
}
.hero-mfa {
    width: 100%;
    display: block;
}
/* 介绍区：截图墙为全宽底图，文字叠加在左侧留白区（设计稿构图）
 * 图文同格堆叠（grid-template-areas）：区高 = max(图高, 文字高)。
 * 旧写法「图定区高 + 文字层 absolute」在视口 <1200 时必然溢出：
 * body{min-width:1200px} 使图高冻结在 1200 档（788/3840×1200≈246），
 * 而文字尺寸走 vw clamp 仍随视口继续缩小 → 文字块高于图高，
 * 居中后上下同时溢出，下方被 M2（.container{position:relative} 后画）盖住。
 * 现由网格撑高容器，文字永不溢出模块，≥1200 观感与旧写法完全一致。 */
.hero-intro {
    display: grid;
    grid-template-columns: minmax(0, 1fr); /* 防内容撑破列宽 */
    grid-template-areas: "hero-stack";
    background-color: #FFFFFF;
}
.hero-intro-bg {
    grid-area: hero-stack;
    align-self: end; /* 图贴底：底边界面面板被画布裁切，须紧贴下一模块白底才连续，上方余白由底色吸收 */
    width: 100%;
    display: block;
}
.hero-intro-overlay {
    grid-area: hero-stack;
    z-index: 1; /* 网格项直接生效，兜底保证文字层永远压在后续模块之上 */
    display: flex;
    align-items: center;
    padding: 0 max(153.6px, 12.8vw); /* 文字左缘跟随整图比例（设计稿 246px @1920）；下限 = @1200 值，与冻结整图同基准 */
}
.hero-intro-overlay .container {
    width: 100%;
    max-width: none;
    padding: 0;
}
/* 文本列宽下限取 @1200 值（37.5vw=450）：与图高同基准冻结，
 * 避免视口 <1200 时列宽继续变窄造成 <br /> 之外二次折行、文字块异常增高 */
.hero-title {
    max-width: clamp(450px, 37.5vw, 720px);
    font-size: clamp(24px, 2.5vw, 48px);
    font-weight: 700;
    line-height: 1.3;
    color: var(--text-main);
}
.hero-desc {
    /* 22px 下首行 34 字≈748px，原 max-width 720 会二次折行，放宽到 800（下限取 @1200 值） */
    max-width: clamp(500px, 41.667vw, 800px);
    margin-top: clamp(16px, 1.35vw, 26px);
    font-size: clamp(14px, 1.146vw, 22px);
    font-weight: 400;
    line-height: 1.9;
    color: #1D1D1F;
}
.hero-btns {
    margin-top: clamp(24px, 2.2vw, 42px);
    display: flex;
}
.hero-btns .btn-outline {
    margin-left: 20px;
}
/* <1200 时区高等于文字高，文字块上下正好贴模块边界，补少量呼吸空间（≥1200 不受影响） */
@media (max-width: 1199.98px) {
    .hero-intro-overlay {
        padding-block: clamp(10px, 1.2vw, 20px);
    }
}

/* ============================================================
 * M2 平台 + 运营服务：居中标题 + 段落 + 3 张场景图（带字整图，已裁决）
 * ========================================================== */
.service {
    background-color: #FFFFFF;
    padding: clamp(64px, 6.8vw, 130px) 0 clamp(60px, 6.25vw, 120px);
    text-align: center;
}
.service-desc {
    margin-top: clamp(18px, 1.56vw, 30px);
    font-size: clamp(14px, 1.146vw, 22px);
    font-weight: 400;
    line-height: 2;
    color: #1D1D1F;
}
.service-scenes {
    margin-top: clamp(40px, 3.96vw, 76px);
    display: flex;
    justify-content: space-between;
}
.service-scenes img {
    width: calc((100% - 44px) / 3); /* 单张 462px，与设计稿一致 */
    border-radius: 16px;
}

/* ============================================================
 * M3 核心产品矩阵
 * 背景：m3-cubes.png 全宽切图（浅蓝渐变 + 网格 + 右侧魔方，与模块底色一致）
 * 产品卡：常态无边框；hover 加 #416BF5 边框 + 外层整卡 scale(1.02)（第十三章）
 * ========================================================== */
.matrix {
    background: #F3F8FD url('https://qnoss.supernode.pro/supernode/pc/static/images/v2/m3-cubes.png') no-repeat top center / 100% auto;
    padding: clamp(70px, 7.3vw, 140px) 0 clamp(56px, 5.7vw, 110px);
}
.matrix-head {
    max-width: 560px;
}
.matrix-desc {
    margin-top: clamp(14px, 1.25vw, 24px);
    font-size: clamp(14px, 1.146vw, 22px);
    font-weight: 400;
    line-height: 1.9;
    color: #1D1D1F;
}
.matrix-head .btn-primary {
    margin-top: clamp(24px, 2.1vw, 40px);
}
.prod-grid {
    margin-top: clamp(32px, 3.1vw, 60px);
    display: flex;
    justify-content: space-between;
}
.prod-grid > .card-zoom {
    width: calc((100% - 70px) / 8); /* 8 卡 + 7×10px 间距 = 单卡约 170px，与设计稿一致 */
}
.prod-card {
    display: block;
    width: 100%;
    background-color: #FFFFFF;
    border: 1px solid transparent; /* 常态无边框，占位防抖动 */
    border-radius: 14px;
    overflow: hidden;
}
.prod-card img {
    width: 100%;
}
@media (hover: hover) and (pointer: fine) {
    .prod-card:hover {
        border-color: var(--primary); /* hover 加 #416BF5 蓝框，与外层整卡放大同时生效 */
    }
}

/* ============================================================
 * M4 解决方案与运营服务 / M5 行业洞察（同构：标题 + 2 张大卡）
 * 大卡：带字整图（已裁决）+ 代码按钮；hover 外层整卡放大（第十三章）
 * ========================================================== */
.solution {
    background-color: #F5F6F8;
    padding: clamp(56px, 5.7vw, 110px) 0 clamp(50px, 5.2vw, 100px);
}
.insight {
    background-color: #F5F6F8;
    padding: clamp(50px, 5.2vw, 100px) 0 clamp(60px, 6.25vw, 120px);
}
.feat-grid {
    margin-top: clamp(30px, 2.9vw, 56px);
    display: flex;
    justify-content: space-between;
}
.feat-grid > .card-zoom {
    width: calc((100% - 28px) / 2); /* 单卡 700px，与设计稿一致 */
}
.feat-card {
    display: block;
    width: 100%;
    background-color: #FFFFFF;
    border-radius: 20px;
    overflow: hidden;
}
.feat-card-media {
    overflow: hidden;
}
.feat-card-media img {
    width: 100%;
}
.feat-card-btn {
    display: flex;
    justify-content: center;
    /* 切图实测（m4/m5 四张同构 1400×1256 = @1x 700×628）：
     * 底部白留白带顶 y=407、标题墨底 y=484（距图底 144）。
     * 按钮 46 高取「标题下 40 / 图底上 58」居中于留白带：
     * 负 margin 104 + 下内边距 58 → 卡高恰等于图高 628，
     * 不再像旧值（-32/40）那样把按钮落在距标题 112px 处、卡底多出 54px 空白。
     * M4/M5 同构共用，调此两值即可整体上下微调（下限取 @1200 档，与卡宽冻结基准一致） */
    margin-top: calc(-1 * clamp(65px, 5.417vw, 104px));
    padding: 0 0 clamp(36px, 3.021vw, 58px);
    position: relative;
    z-index: 1; /* 避免图片放大时遮挡按钮点击 */
}

/* ============================================================
 * M6 CTA：品牌墙（全宽黑底带字整图）+ 星空横幅（全宽带字整图）+ 400 按钮
 * ========================================================== */
.cta {
    background-color: #000000;
}
.cta-brand {
    width: 100%;
    display: block;
}
.cta-banner {
    position: relative;
}
.cta-banner-bg {
    width: 100%;
    display: block;
}
.cta-banner .btn-primary {
    position: absolute;
    /* 下限 = @1200 值，与 body{min-width:1200} 冻结后的横幅整图同基准（详见 guide.css .guide-hero-btn 注释） */
    left: max(153.6px, 12.8vw); /* 跟随横幅整图比例（设计稿 246px @1920） */
    bottom: clamp(25px, 2.1vw, 40px);
}