/* ============================================================
 * 快眼AI V2 样式（kuAIyanAi.html）—— 2026-09 依蓝湖画板重做（旧失败尝试完全重写）
 * 设计稿：蓝湖「超级节点-快眼 AI」画板（1920×9919 @1x 基准）
 * 标注来源：蓝湖单画板 d2c 图层实测（2026-09 读取，第一准则），计算依据逐条写入注释
 *   body 底色 #FFFFFF（本页例外，非灰底）；内容区 1428（.container，左右各 246）
 *   模块标题统一 51.38/72 Heavy #1D1D1F 居中；正文 #3D3D3D；强调蓝 #416BF5
 *   背景带（逐模块实测，第十五章第3条）：M2 痛点带 #F5F5F7 / M7 收益带 #F5F5F7 /
 *     M8 CTA 带 #E6E9FE；M1 Hero 整图自带渐变；M3/M4/M5/M6 透白底
 *   模块 y 坐标（画板含头部100，2026-09-28 改版后）：Hero100-740 / 痛点带740-1682 /
 *     改变1682-3322（对比整图 1970-3280）/ 能力3322-4221 / 场景4221-7115 / 技术7181-7861 /
 *     收益带7947-8659 / CTA带8659-9028 / 页脚9028
 *     ※ 原 M4「方案价值」灰带（2632-3661）整块删除，BEFORE/AFTER 对比内容并入 M3 整图，下游模块上移 339
 *   切图（开图实测，@2x÷2）：Hero整图含文字仅叠按钮；痛点5卡341×471；
 *     改变BEFORE/AFTER对比整图1432×1310（组158880，图文全烘焙）；能力12卡333×193；
 *     场景4图490×492/663×370（文字代码）；技术4卡373×431；
 *     收益3卡453×313（组158882/83/84：降低提效/标准落地/数据驱动，图文全烘焙）
 * 规范：《重构规则.md》十一/十二/十三/十五/十六章节
 * ========================================================== */

/* ---------- 页面底色：蓝湖画板 #FFFFFF（本页例外，第十五章第3条） ---------- */
body.kyai-page {
    background-color: #FFFFFF;
}

/* ---------- 模块标题（蓝湖 51.38/72 Heavy #1D1D1F 居中） ---------- */
.kyai-title {
    font-size: clamp(32px, 2.676vw, 51.38px);
    font-weight: 700;
    line-height: clamp(45px, 3.75vw, 72px);
    color: #1D1D1F;
    text-align: center;
}

/* ---------- 卡片内层（第十三章：外层 .card-zoom 放大，内图不放大零裁切） ---------- */
.kyai-zoom {
    overflow: hidden;
}
.kyai-zoom > img {
    width: 100%;
}

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

/* ============================================================
 * M1 Hero：整幅切图（浅蓝紫渐变底+左文+右插画均含图内）+ 代码按钮
 *   按钮蓝湖 组158123 x242 y536 → 距 hero 顶 436；left 242/1920=12.604vw，top 436/1920=22.708vw
 * ========================================================== */
.kyai-hero {
    position: relative;
}
.kyai-hero-bg {
    width: 100%;
    display: block;
}
.kyai-hero-btn {
    position: absolute;
    /* 下限 = @1200 值，与 body{min-width:1200} 冻结后的整图同基准（详见 guide.css .guide-hero-btn 注释） */
    left: max(151.2px, 12.604vw);
    top: max(272.5px, 22.708vw);
}

/* ============================================================
 * M2 业务痛点：灰带 #F5F5F7（矩形821 y740 高942）+ 代码标题/副标题 + 5 卡轮播
 *   标题顶距带顶 75；副标题距标题底 21（28/39 Bold #1D1D1F）；卡顶距副标题底 55；
 *   卡宽 341 间隙 24；卡高不写死——由切图自身比例自适应（img width:100% + height:auto，
 *   不用 aspect-ratio 锁框、不用 object-fit:cover 裁切，以后换任意比例的图都不会被切）；
 *   箭头圆 54×54 右对齐，距卡底 36；带底距箭头底 119
 * ========================================================== */
.kyai-pain {
    background-color: #F5F5F7;
    padding: clamp(47px, 3.906vw, 75px) 0 clamp(74px, 6.198vw, 119px);
}
.kyai-pain-sub {
    margin-top: clamp(13px, 1.094vw, 21px);
    font-size: clamp(17px, 1.458vw, 28px);
    font-weight: 700;
    line-height: clamp(24px, 2.028vw, 39px);
    color: #1D1D1F;
    text-align: center;
}
.kyai-pain-viewport {
    margin-top: calc(clamp(34px, 2.865vw, 55px) - 12px); /* -12 为 hover 放大缓冲 */
    /* 苹果官网完整模式（第十三章第10条）：左右出血至屏边（1920封顶）；padding-left=内容边距把首卡推回内容区左缘；整轨平移，卡片滑至屏幕左缘才裁；末端末卡右缘对齐内容区右缘 */
    margin-left: calc(-1 * (max((min(100vw, 1920px) - 1476px) / 2, 0px) + 24px));
    margin-right: calc(-1 * (max((min(100vw, 1920px) - 1476px) / 2, 0px) + 24px));
    padding: 12px 0 12px calc(max((min(100vw, 1920px) - 1476px) / 2, 0px) + 24px);
    margin-bottom: -12px;
    overflow: hidden;
}
.kyai-pain-track {
    display: flex;
    gap: 24px;
    transition: transform .5s cubic-bezier(0.4, 0, 0.6, 1);
    will-change: transform;
}
.kyai-pain-track > .card-zoom {
    flex: 0 0 clamp(213px, 17.76vw, 341px); /* 只锁卡宽 @1920=341，高度交给切图比例 */
    min-width: 0;
}
.kyai-pain-card {
    width: 100%;
}
.kyai-pain-card > img {
    width: 100%;
    height: auto; /* 等比自适应：不拉伸、不裁切 */
}
.kyai-pain-arrows {
    margin-top: clamp(43.5px, 3.021vw, 58px); /* 全站统一（基准 pengyipeng M2 轮播按钮）：原 clamp(22px, 1.875vw, 36px) */
    display: flex;
    justify-content: flex-end;
}
.kyai-pain-prev,
.kyai-pain-next {
    width: 48px; /* 全站统一按钮宽 48px（基准 pengyipeng），原自绘圆钮 clamp(34px, 2.807vw, 54px) */
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    transition: opacity .3s ease;
}
.kyai-pain-prev + .kyai-pain-next {
    margin-left: 24px; /* 全站统一两钮间距 24px（基准 pengyipeng），原 27 */
}
.kyai-pain-prev img,
.kyai-pain-next img {
    width: 100%;
    height: auto;
    display: block;
}
.kyai-pain-prev img {
    transform: scaleX(-1); /* 左箭头 = 右箭头镜像 */
}
.kyai-pain-prev:disabled,
.kyai-pain-next:disabled {
    opacity: .35; /* 全站统一禁用态（基准 pengyipeng），原 .45 */
    cursor: default;
}

/* ============================================================
 * M3 快眼AI带来业务改变：白底 + 代码标题 + BEFORE/AFTER 对比整图（组158880 1432×1310 @1x，图文全烘焙）
 *   蓝湖 组158880 x248 y1970 → 图顶 1970、图底 3280；上段 M2 痛点带底 1682 未变
 *   标题位置由设计图像素扫描反推（图内 组顶 y=104.5px、标题墨迹顶 y=54.5px，比例 s=627/1432=0.4374）：
 *     墨迹顶 CSS y = 1970 - (104.5-54.5)/0.4374 = 1856；51.38/72 行内墨迹顶距文本框顶 11.7（与 M7 收益标题同口径校验）
 *     ⇒ 标题文本框顶 1844 → padding-top 162（1844-1682）；文本框底 1916 → 图 margin-top 54（1970-1916）
 *   下接「产品能力」：其标题墨迹顶 y=736.5 → CSS y 3415 → 文本框顶 3403 → 距图底 123 = 本段 padding-bottom 40 + 能力 padding-top 83
 * ========================================================== */
.kyai-change {
    padding: clamp(101.25px, 8.4375vw, 162px) 0 clamp(25px, 2.0833vw, 40px);
}
.kyai-change-img {
    display: block;
    width: clamp(895px, 74.583vw, 1432px); /* 蓝湖 1432/1920 */
    height: auto; /* 覆盖 HTML width/height 属性，防拉伸 */
    margin: clamp(33.75px, 2.8125vw, 54px) auto 0;
}

/* ============================================================
 * M4 产品能力：白底 + 代码标题 + 12 卡网格 4×3（333×193，列间17 行间15）
 *   标题距上段底 83；卡顶距标题底 97；网格宽 1383 居中
 * ========================================================== */
.kyai-ability {
    padding-top: clamp(52px, 4.323vw, 83px);
}
.kyai-ab-grid {
    margin: clamp(61px, 5.052vw, 97px) auto 0;
    max-width: 1383px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: 17px;
    row-gap: 15px;
}

/* ============================================================
 * M5 业务应用场景：白底 + 代码标题 + 4 组左右交替（蓝色面板 #E6E9FE + UI 插画 + 代码文字）
 *   标题距上段底 138；面板占半屏（941~979 宽，658 高）；场景标题 43.32/61 Bold #1D1D1F；
 *   正文 24.75/39.6 Medium #3D3D3D
 *   接缝对齐（四行角相咬）：蓝湖面板两档宽 979 / 941（相加=1920），
 *     左面板行取 51%、右面板行取 49%，所有行面板内边同落在 x=979（@1920）一条竖线上；
 *     若四行统一 49%，左行缝 941、右行缝 979，会出现 38px 错台（角没咬住）。
 * ========================================================== */
.kyai-scene {
    padding-top: clamp(86px, 7.188vw, 138px);
}
.kyai-sc-list {
    margin-top: clamp(86px, 7.188vw, 138px);
}
.kyai-sc-row {
    display: flex;
    align-items: stretch;
    width: 100%;
}
.kyai-sc-row + .kyai-sc-row {
    margin-top: 0; /* 行间贴合（蓝湖行距 650~658，面板等高无缝） */
}
.kyai-sc-row-reverse {
    flex-direction: row-reverse;
}
.kyai-sc-panel {
    flex: 0 0 51%;
    background-color: #E6E9FE;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: clamp(336px, 34.27vw, 658px);
}
/* 右面板行取 49%，与左面板行 51% 互补，保证接缝落在同一竖线上 */
.kyai-sc-row-reverse .kyai-sc-panel {
    flex-basis: 49%;
}
.kyai-sc-panel img {
    width: clamp(306px, 25.52vw, 490px);
    height: auto;
}
.kyai-sc-panel-wide img {
    width: clamp(414px, 34.53vw, 663px); /* 导购人员核验 663×370 横图 */
}
.kyai-sc-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 clamp(40px, 5.417vw, 104px);
}
.kyai-sc-text h3 {
    font-size: clamp(27px, 2.256vw, 43.32px);
    font-weight: 700;
    line-height: clamp(38px, 3.177vw, 61px);
    color: #1D1D1F;
    margin-bottom: clamp(12px, 1.042vw, 20px);
}
.kyai-sc-text p {
    font-size: clamp(15px, 1.289vw, 24.75px);
    font-weight: 500;
    line-height: clamp(25px, 2.063vw, 39.6px);
    color: #3D3D3D;
}

/* ============================================================
 * M6 产品技术优势：白底 + 代码标题 + 4 卡网格（343×401，间隙18）
 *   标题距上段底 129；卡顶距标题底 101
 * ========================================================== */
.kyai-tech {
    padding-top: clamp(81px, 6.719vw, 129px);
}
.kyai-tech-grid {
    margin-top: clamp(63px, 5.26vw, 101px);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

/* ============================================================
 * M7 客户收益：灰带 #F5F5F7（矩形853 y8326 高712）+ 代码标题 + 3 卡（453×313，间隙35）
 *   上灰隙 129（margin-top）；标题距带顶 91；卡顶距标题底 86；带底距卡底 150
 * ========================================================== */
.kyai-benefit {
    background-color: #F5F5F7;
    margin-top: clamp(81px, 6.719vw, 129px);
    padding: clamp(57px, 4.74vw, 91px) 0 clamp(94px, 7.813vw, 150px);
}
.kyai-bn-grid {
    margin-top: clamp(54px, 4.479vw, 86px);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 35px;
}

/* ============================================================
 * M8 CTA：浅蓝通栏 #E6E9FE（矩形796 y9038 高369）+ 代码标题/副标题/按钮
 *   标题距带顶 86（40/56 Heavy #3D3D3D）；副标题距标题底 11（22/31 Medium #3D3D3D）；
 *   按钮距副标题底 38；带底距按钮底 94
 * ========================================================== */
.kyai-cta {
    background-color: #E6E9FE;
    padding: clamp(54px, 4.479vw, 86px) 0 clamp(59px, 4.896vw, 94px);
    text-align: center;
}
.kyai-cta-title {
    font-size: clamp(25px, 2.083vw, 40px);
    font-weight: 700;
    line-height: clamp(35px, 2.917vw, 56px);
    color: #3D3D3D;
}
.kyai-cta-sub {
    margin-top: clamp(7px, 0.573vw, 11px);
    font-size: clamp(14px, 1.146vw, 22px);
    font-weight: 500;
    line-height: clamp(20px, 1.615vw, 31px);
    color: #3D3D3D;
}
.kyai-cta-btn {
    margin-top: clamp(24px, 1.979vw, 38px);
}