/* ============================================================
   im.css — 即时通讯 IM 产品页
   数值取自 Figma「创亚官网2期」· ·产品-即时通讯 IM（画布 1920 × 3749）

   本页只负责 0 ~ 3669 这段自研区：导航（0~75）由 include/header-nav.thtml 承担，
   页脚（3669~3749）由 include/foot.thtml 承担，都不在本文件内。

   纵向骨架（区块边界实测 629 / 2689 / 3225 / 3669，与设计稿逐点吻合）：
       0~629    hero
     629~2689   主体三行（底纹 1920×2060）
    2689~3225   安全可控的企业通讯（底纹 1920×536）
    3225~3669   应用场景（底纹 1919×444）

   入场动效全部复用全站的 animations.css，本文件不定义动画。
   ============================================================ */

/* ==================== Hero ====================
   纵向用 padding-top 直接定位，不是 flex 居中：
   249 = 标题行框顶（48px × 1.2 = 57.6 行框，墨迹高 44，上下各留 6.8
   → 墨迹落在 256~299，与设计稿实测 256~299 一致）。

   设计稿里标题／胶囊／描述整组横向中心在 x≈942，比画布中心 960 偏左 18px。
   这里按真正的居中对齐 —— 全站 hero 同为居中，18px 的组内偏移在 1920 画布上不可辨，
   写死左移反而会在别的断点错位。
   胶囊文案宽度 505 + 左右内边距各 34.6 = 设计稿 574.36，故内边距取 27（见下）。 */
.hero {
    position: relative;
    min-height: 629px;
    overflow: hidden;
}
.hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}
/* 设计稿 mask 层 838:61：SVG 线性渐变 #0068DD → 全透明，纵向 0→610。
   本层铺满 629 无碍 —— 610 之后 alpha 已为 0 */
.hero-mask {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, #0068dd 0%, rgba(0, 104, 221, 0) 100%);
}
.hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 249px 20px 0;
}
.hero-title {
    font-size: 48px;
    font-weight: 600;
    line-height: 1.2;
    color: #fff;
    text-shadow: 0 4px 4px rgba(0, 0, 0, .25);
    /* 标题行框底 306.3 → 胶囊顶 323.19 */
    margin-bottom: 16.9px;
}
/* 胶囊：底色 #2DA8FF 20% + 白描边 40%，与灵智 / AI Work / 数智协同同一组件。
   高度 30.8、内边距 27 均取自设计稿（574.36 − 519.93 文本框 = 2 × 27.2） */
.hero-pill {
    display: flex;
    align-items: center;
    justify-content: center;
    width: max-content;
    max-width: 100%;
    height: 30.8px;
    margin: 0 auto 17.5px;
    padding: 0 27px;
    border: 2px solid rgba(255, 255, 255, .4);
    border-radius: 999px;
    background: rgba(45, 168, 255, .2);
    font-size: 16px;
    line-height: 1;
    color: #fff;
    white-space: nowrap;
}
/* 1198px = 设计稿描述框宽；正文实测 1135 宽、单行，留 5% 余量防换行点漂移 */
.hero-desc {
    font-size: 24px;
    line-height: 48px;
    color: #fff;
    text-shadow: 0 4px 4px rgba(0, 0, 0, .25);
    max-width: 1198px;
    margin: 0 auto;
}

/* ==================== 主体三行（629 ~ 2689） ====================
   容器 1553 = 最宽一行 1473（544 + 234 + 695）+ 左右内边距各 40。
   与设计稿的差别只有整体左移 9.5px（原稿内容 233~1706，居中后为 223.5~1696.5）——
   原稿左右边距本就不是对称的，取居中换来一套可响应的骨架，同 header-nav / 数智协同口径。 */
.im-main {
    background: #e4edfa url('../images/im-bg-main.webp') center / cover no-repeat;
    /* 58 = hero 底到首行配图顶（687−629）；51 = 末行配图底到本区底（2689−2638） */
    padding: 58px 0 51px;
}

/* ---- 栏距与文案列宽 ----
   三行的横向数值完全各自独立（原稿手摆），且行 3 的文案列必须停在 526 ——
   它的首段 612px 自然宽在 526 下断成 29 字 + 5 字，与设计稿一致；
   放宽到 544 就会变成 30 字 + 4 字。故一律照抄原稿，不取均值。

   用自定义属性承载：断点里只要写普通的 gap / flex-basis 就能覆盖，
   不必把三行的选择器再抄一遍（.feature-block.is-xxx 的 (0,2,0)/(0,3,0)
   会压过断点里的 .feature-block，漏抄即静默失效） */
.feature-block {
    scroll-margin-top: 116px;   /* = --hn-h (73) + 一点呼吸，避免被固定头遮住 */
    display: flex;
    /* 文案与配图垂直居中。本页配图远高于文案（三行配图恒 580，文案 290.5 / 290.5 / 326.5），
       容器高由配图决定，故本属性移动的是**文案**，幅度也最大：
       文案顶下移 (580−290.5)/2 = 144.8（is-scene 为 (580−326.5)/2 = 126.8）。
       原为「文案块与配图顶对齐，不垂直居中」+ .feature-text 的 padding-top: 43px
       （原稿三行 68 / 36 / 26 的均值），即设计稿只让文案顶下移 43px 就停手 ——
       居中后这个取齐关系不再保留，文案落到配图的垂直中位。
       注意本属性不改容器高度 —— 105.5px 行距不受影响；
       ≤1024 的单列块显式写了 align-items: stretch，column 方向下不会被它误伤。 */
    align-items: center;
    gap: var(--gap, 0px);
    max-width: 1553px;
    margin: 0 auto 105.5px;
    padding: 0 40px;
}
.feature-block:last-child { margin-bottom: 0; }
/* row-reverse 下主轴自右向左，默认 flex-start 会把内容推到右边；
   本行内容 1433 < 容器 1473，要贴左边得写 flex-end */
.feature-block.reverse { flex-direction: row-reverse; justify-content: flex-end; }

.feature-block.is-collab { --gap: 234px; }
.feature-block.is-comm   { --gap: 180px; }
.feature-block.is-scene  { --gap: 198px; }

/* 垂直位置由 .feature-block 的 align-items: center 统一负责，故不再保留相对配图顶的
   padding-top 偏移 —— 留着它只会把居中后的文案**内容**再压低半个偏移量（43/2 = 21.5，
   因为居中偏的是盒、而 padding 占着盒高）。原值 43 是原稿三行 68 / 36 / 26 的均值，
   服务于「文案贴配图顶」的旧语义，居中后该语义已不存在。
   注：≤1024 的单列块本来就写了 padding-top: 0，故删掉不影响窄屏。 */
.feature-text {
    --tw: 544px;
    flex: 0 1 var(--tw);
    min-width: 0;
}
.feature-block.is-comm  .feature-text { --tw: 558px; }
.feature-block.is-scene .feature-text { --tw: 526px; }

.feature-image {
    position: relative;
    flex: 0 1 695px;
    min-width: 0;
    aspect-ratio: 695 / 580;
    overflow: hidden;          /* 配图按原稿取景溢出图框，靠这里裁掉 */
}
/* 配图用带 alpha 的原始素材（1080×1080），靠下面三组百分比摆放 ——
   数值即 get_design_context 给出的图框内取景，与设计稿渲染 MAE 1.0~1.7。
   三张的横纵缩放并不一致（第 1 张纵压 1.9%、第 3 张横压 11%），是原稿逐张拖拽
   图层的结果；照抄比取齐更忠实，故不改成等比。
   注意 download_assets 的节点导出件被拍平到白底、丢了 alpha，
   直接用会在本区蓝底上盖出白方块，故这里必须用原始素材 */
.feature-image img {
    position: absolute;
    display: block;
    max-width: none;
}
.feature-block.is-collab .feature-image img { width: 100.03%; height: 117.63%; left: -0.1%; top: -1.59%; }
.feature-block.is-comm   .feature-image img { width: 100%;    height: 119.9%;  left: 0;     top: -2.27%; }
.feature-block.is-scene  .feature-image img { width: 89.39%; height: 119.06%; left: 5.37%; top: -1.99%; }

/* 72×24 = 文字 48（4 字 × 12px）+ 左右内边距各 12，与设计稿胶囊同尺寸 */
.feature-tag {
    display: block;
    width: max-content;
    height: 24px;
    line-height: 24px;
    padding: 0 12px;
    border-radius: 999px;
    background: #d2e7ff;
    font-size: 12px;
    color: #0068dd;
    margin-bottom: 14.4px;
}
/* 行框 43.2（= 36 × 1.2），胶囊底 779 → 正文首行框顶 858 之间的 14.4 / 21.9 由此反推 */
.feature-label {
    font-size: 36px;
    font-weight: 600;
    line-height: 1.2;
    color: #000;
    margin-bottom: 21.9px;
}
.feature-label .gradient {
    background-image: linear-gradient(180deg, #00e5ff 0%, #0068dd 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
/* 正文 18px / 行高 36，一行一句；实测每行墨迹都落在 36 的整倍数上 */
.feature-desc {
    font-size: 18px;
    line-height: 36px;
    color: #000;
}

/* ==================== 安全可控的企业通讯（2689 ~ 3225） ====================
   底纹导出件已自带原稿的 53% 不透明度（实测与设计稿渲染逐点相同），
   故这里不必再挂 ::before + opacity */
.sec-security {
    background: #f2f9ff url('../images/im-bg-security.webp') center / cover no-repeat;
    /* 55 = 区顶到胶囊顶（2744−2689）；97 = 卡片底到区底（3225−3128） */
    padding: 55px 0 97px;
}
.sec-scenes {
    background: #d8e5ff url('../images/im-bg-scenes.webp') center / cover no-repeat;
    /* 41.7 = 区顶到标题行框顶（3266.7−3225）；65 = 卡片底到区底（3669−3604） */
    padding: 41.7px 0 65px;
}

.sec-head {
    text-align: center;
    padding: 0 20px;
}
.sec-security .sec-head { margin-bottom: 50.7px; }
.sec-scenes   .sec-head { margin-bottom: 56.7px; }
/* 标题为渐变填充，与 .feature-label 同配方但字号 48、字距 2.88（设计稿实测 451 宽） */
.sec-title {
    font-size: 48px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 2.88px;
    background-image: linear-gradient(180deg, #00e5ff 0%, #0068dd 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.sec-head .feature-tag { margin: 0 auto 28.7px; }

/* 三张 400×223、间距 27.5，共 1255 居中（1920 下单边 332.5；设计稿为 350，差 17.5）。
   同 hero，取真居中而非写死偏移 */
.sec-cards {
    display: flex;
    justify-content: center;
    gap: 27.5px;
    padding: 0 20px;
}
/* 用 min-height 而非 height：窄屏描述多折一行时卡片跟着长高，不会溢出 */
.sec-card {
    flex: 0 1 400px;
    min-width: 0;
    min-height: 223px;
    padding: 35px 37.5px 0;    /* 37.5 由描述框 325（= 400 − 2 × 37.5）反推 */
    border-radius: 16px;
    background: rgba(253, 254, 255, .7);
    box-shadow: 0 0 8px 5px rgba(210, 231, 255, .5);
    text-align: center;
}
.sec-card-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto;
}
.sec-card-icon img { width: 100%; height: 100%; }
.sec-card-name {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.2;
    color: #000;
    margin-top: 16px;          /* 图标底 3000 → 标题行框顶 3016 */
}
.sec-card-desc {
    font-size: 14px;
    line-height: 24px;
    color: #444;
    margin-top: 16.5px;        /* 标题行框底 3037.6 → 描述首行框顶 3054 */
}

/* ==================== Responsive ====================
   断点只保留 1024：1025 以上交给文件末尾的等比缩放。缩放区间内不得再有任何降级块，
   否则会出现「既等比缩放、又局部改布局」的混合态（媒体查询按物理视口判定，
   1440 视口下 zoom 已把布局撑到 1920，但那些断点照样会命中）。

   原 @media (max-width: 1536px) 整块已删：gap:56px 与 flex-basis:440px 都被下面 1024 块的
   gap:32px / flex:1 1 auto 覆盖。
   原 @media (max-width: 1280px) 里前三行同样被覆盖；只有 .sec-card 的左右内边距是活的
   （1024 块不碰它，768 块才收到 20px），已并入下面 1024 块。 */
@media (max-width: 1024px) {
    .hero { min-height: 520px; }
    .hero-content { padding-top: 170px; }
    .hero-title { font-size: 36px; margin-bottom: 14px; }
    .hero-pill { height: 30px; padding: 0 20px; font-size: 14px; margin-bottom: 15px; }
    .hero-desc { font-size: 18px; line-height: 34px; }

    .im-main { padding: 64px 0 64px; }
    /* 单列堆叠：横向栏距失效，统一改成「文案在上、配图在下」。
       必须带上 .reverse —— 它的 flex-direction 是 (0,2,0)，
       漏掉的话第 2 行会一直停在 row-reverse 横排 */
    .feature-block,
    .feature-block.reverse {
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 32px;
        max-width: 780px;
        margin-bottom: 72px;
    }
    .feature-text,
    .feature-image { flex: 1 1 auto; }
    .feature-text { padding-top: 0; }

    .sec-security { padding: 48px 0 64px; }
    .sec-scenes { padding: 40px 0 56px; }
    .sec-title { font-size: 38px; letter-spacing: 1.8px; }
    .sec-security .sec-head { margin-bottom: 40px; }
    .sec-scenes   .sec-head { margin-bottom: 44px; }

    /* 原 1280 档的唯一活条目：900 以下卡片转单列后这份内边距仍要，
       768 档再收到 20px（那条在本块之后，故能正常覆盖） */
    .sec-card { padding-left: 24px; padding-right: 24px; }
}
@media (max-width: 900px) {
    .sec-cards {
        flex-direction: column;
        align-items: center;
        gap: 16px;
    }
    .sec-card { flex: 0 0 auto; width: 100%; max-width: 400px; }
}
@media (max-width: 768px) {
    .hero { min-height: 460px; }
    .hero-content { padding-top: 140px; }
    .hero-title { font-size: 30px; }
    .hero-pill { height: 28px; padding: 0 16px; font-size: 12px; }
    .hero-desc { font-size: 16px; line-height: 30px; }

    .im-main { padding: 48px 0 56px; }
    .feature-block { padding: 0 24px; gap: 24px; margin-bottom: 56px; }
    .feature-label { font-size: 28px; }
    .feature-desc { font-size: 16px; line-height: 32px; }

    .sec-title { font-size: 30px; letter-spacing: 1px; }
    .sec-card { padding-left: 20px; padding-right: 20px; }
}
@media (max-width: 480px) {
    .hero { min-height: 400px; }
    .hero-content { padding-top: 118px; }
    .hero-title { font-size: 26px; margin-bottom: 12px; }
    .hero-pill { height: 26px; padding: 0 12px; font-size: 11px; margin-bottom: 12px; }
    .hero-desc { font-size: 15px; line-height: 26px; }

    .im-main { padding: 36px 0 44px; }
    .feature-block { padding: 0 16px; margin-bottom: 44px; gap: 20px; }
    .feature-tag { padding: 0 10px; }
    .feature-label { font-size: 22px; }
    .feature-desc { font-size: 15px; line-height: 28px; }

    .sec-security { padding: 36px 0 48px; }
    .sec-scenes { padding: 32px 0 44px; }
    .sec-title { font-size: 24px; letter-spacing: .5px; }
    .sec-card { min-height: 0; padding: 28px 16px 28px; }
    .sec-card-desc { font-size: 13px; line-height: 22px; }
}

/* === 设计稿等比缩放（基准 1920）===
   本页尺寸全按 1920 画布写死。视口不足 1920 时原本只有左右留白被压、元素尺寸不动，
   观感就是「元素被放大」。这里把整页按 视口/1920 缩放：留白与元素乘同一个系数，
   比例关系恒定，任意视口下都是设计稿的等比副本。

   zoom 只改「尺寸的缩放系数」，不改变媒体查询的判定依据 —— 媒体查询与 100vw 仍按
   **物理视口**判定，而布局视口被撑成 物理视口/zoom（1440 下即 1920）。所以本页
   max-width 落在 [1025,1919] 的降级块都已收进 1024。 */
@media (min-width: 1025px) {
    html { --z: min(1, calc(100vw / 1920px)); zoom: var(--z); }

    /* 页脚与设计稿同比：base.css 那条 1600 断点兜底只服务 1200 系页面，
       在缩放区间（1025–1600）会把内边距压成 40px，比页面其余部分宽出一截。
       同特异性下后加载者胜，故这里可直接覆盖 base.css 的规则。 */
    .footer .content { padding: 18px 180px 0; }
    .footer-qr { margin-right: 94px; }
}