/*!
 * ==========================================================================
 * IFU 官网 · 品牌补充样式
 * 文件：assets/css/ifu-brand.css
 * --------------------------------------------------------------------------
 * 作用：加载在 Conzex 模板样式之后。第 1–12 节为「中文适配 + Logo + 品牌修正
 *       + 版式节奏统一」；第 13 节为「版式扩充组件」，补齐此前完全未用的
 *       面包屑、分页、折叠问答、能力标签页、之字形图文、数据条与场景图墙；
 *       第 14 节为 404 页面样式；第 15 节为 FAQ 页面样式；第 16 节为首页进入
 *       动画补齐；第 17 节为两栏内容段（左说明栏 + 右折叠问答）；第 18 节为
 *       窄屏修补（并列按钮错位、页脚标志对齐、页头装饰隐藏）。
 *       所有结构仍复用 Conzex 既有类名与已加载脚本，不引入新的 JS 依赖。
 * 说明：Conzex 主色（粉紫）已在 template/ifu/assets/css 下的拷贝件中
 *       统一替换为 IFU 品牌绿（#10B981 / #059669 / #047857），原始 Conzex
 *       目录未改动，因此本文件无需再重复覆盖主色。
 * 令牌来源：fox-visual-system-v1.3 / tokens / fox-design-tokens.json
 * ==========================================================================
 */

/* ==========================================================================
   1. 中文字体栈
   Poppins 不含中文字形，中文会自动回退到后面的系统无衬线字体
   ========================================================================== */
body {
    font-family: 'Poppins', "HarmonyOS Sans", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
}

/* ==========================================================================
   2. 中文标题字号收敛
   英文模板按单词长度定字号（h1 42px / h2 35px），中文显得过大
   ========================================================================== */

/* 标题色：Conzex 原色为深藏紫（#130350），与品牌绿同屏偏冷，
   统一收敛到品牌中性色；页头与首屏的白色标题由各自更具体的规则保留，
   深色区块的白色标题由第 9 段更高优先级的规则覆盖。 */
h1,
h2,
h3,
h4,
h5,
h6 {
    color: #1E293B;
}

.section-title h2,
.section-title h3 {
    color: #1E293B;
}

h1 {
    font-size: 36px;
}

h2 {
    font-size: 30px;
}

h3 {
    font-size: 24px;
}

/* Hero 主标题：中文需要更紧凑的行高 */
.hero-text h1 {
    line-height: 1.42;
}

/* Hero 两个按钮之间的间距（模板只有一个按钮） */
.hero-text .btn {
    margin-right: 14px;
    margin-bottom: 10px;
}

/* ==========================================================================
   3. Logo 图文组合（IFU 标志为纯图形，需与文字并排）
   ========================================================================== */
.logo-outer {
    max-width: none;
}

.logo > a,
.fixed-logo > a,
.footer-logo > a {
    display: flex;
    align-items: center;
}

/* 顶部标志放大一档：原来的 38px 在导航栏里偏小，
   与 24px 的文字重新配平后，标志块整体约 46px 高 */
.ifu-logo-mark {
    width: 46px;
    height: 46px;
    object-fit: contain;
    flex: 0 0 46px;
}

.ifu-logo-text {
    margin-left: 12px;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: .08em;
    color: #FFFFFF;
}

/* 滚动吸顶后 header 转为白底，logo 文字需转深色 */
.fixed-header .ifu-logo-text,
.footer-logo .ifu-logo-text {
    color: #1E293B;
}

/* ==========================================================================
   4. 导航右上角：项目咨询 + 会员入口（登录 / 用户中心）
   两个入口都不做成按钮块——导航右侧挂两个实心块会把视线从菜单上拽走，
   也会显得比导航本身更重。这里降级成与导航条目同节奏的文字链：
   「项目咨询」用品牌绿强调文字 + 小箭头，负责转化；
   「会员入口」用用户图标 + 浅色文字，是常规入口。
   节奏对齐：字号 14px、字重 500、行高与导航继承同一个值、盒高同为 38px；
   水平间距补齐到 34px，与导航条目之间的节奏一致；
   悬停反馈沿用导航同款「底部 2px 下划线」（深色顶栏白线，吸顶后深绿线）。
   ========================================================================== */

/* 桌面端与导航条目对齐，靠三个与导航同源的量：
   一是 margin-top 27px，与导航条目的 27px 外边距一致；
   二是 .sup-log a 不写死行高，与导航条目继承同一个行高，盒高同为 38px；
   三是 align-self: flex-start，让这一块不被父级 flex 拉伸到整栏高——
      否则高度变成 67px，内部再一居中就会整体下偏十几个像素。
   左边距 17px 是为了凑出 34px 的水平间距：导航条目之间是
   左右各 17px 的 margin 相加，这里补上自己那份，避免贴着「关于我们」。
   只在 993px 以上生效：992px 以下导航折成汉堡按钮，
   基础样式表另有把这块 margin-top 归零并右浮的安排，不能被覆盖。 */
@media (min-width: 993px) {
    .sup-log {
        align-self: flex-start;
        margin-top: 27px;
        margin-left: 17px;
    }
}

/* 基础样式表给这两个入口在不同状态下铺过背景块与 4px 圆角，
   权重最高的一条在吸顶态，这里一并抹平，只保留文字与下划线。 */
.sup-log a,
.sup-log .support,
.sup-log .login,
.sup-log .login:hover,
.sup-log .login:focus,
.fixed-header .sup-log .support,
.fixed-header .sup-log .login:hover,
.fixed-header .sup-log .login:focus {
    background: none;
}

/* 入口块自身用 flex 排布，两个好处：
   一是模板里两个链接之间的换行空白不会再算成间隙（块级排布下实测多出约 3.7px），
      组内间距就是 CSS 里写的那个数；
   二是高度不再被父级 flex 拉伸到整栏高，垂直位置只由 margin-top 决定。 */
.sup-log {
    display: flex;
    align-items: center;
}

/* 这里刻意不写 line-height：让它和导航条目继承同一个行高（当前为 26px），
   盒高同为 5 + 26 + 5 + 2 = 38px，才能与导航文字落在同一条中线上。
   写死行高会让两边盒高不等，进而上下错位。 */
.sup-log a {
    display: inline-flex;
    align-items: center;
    padding: 5px 0;
    font-size: 14px;
    font-weight: 500;
    color: rgba(255, 255, 255, .78);
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    transition: .3s;
}

.sup-log a:hover,
.sup-log a:focus {
    color: #FFFFFF;
    border-bottom-color: #FFFFFF;
}

/* 主入口：项目咨询——品牌绿强调文字 + 小箭头 */
.sup-log .support {
    margin-left: 0;
    color: #34D399;
}

/* 基础样式表的悬停态还是按钮写法（绿底 + 1px 描边），
   权重刚好比我上面这条高，这里连背景与描边一起清掉，只留文字与下划线。 */
.sup-log .support:hover,
.sup-log .support:focus {
    color: #A7F3D0;
    background: none;
    border: 0;
    border-bottom: 2px solid #FFFFFF;
}

/* 主入口的两个图标：电话在前、箭头在后，间距各 5px。
   图标与文字的垂直居中是 inline-flex 的 align-items 负责的，
   不需要再给图标单独调 baseline 偏移。 */
.sup-log .support .flaticon-phone-call {
    margin-right: 5px;
    font-size: 13px;
}

/* 箭头跟着文字走，悬停时右移 3px 做「往那边去」的暗示 */
.sup-log .support .flaticon-right {
    margin-left: 5px;
    font-size: 11px;
    transition: transform .3s;
}

.sup-log .support:hover .flaticon-right,
.sup-log .support:focus .flaticon-right {
    transform: translateX(3px);
}

/* 会员入口：图标与文字之间留 6px，与项目咨询拉开一个导航条目级的间距 */
.sup-log .login {
    margin-left: 18px;
}

.sup-log .login i {
    margin-right: 6px;
    font-size: 14px;
}

/* 会员入口的悬停态同样是按钮写法（白底 + 1px 白线 + 绿字），一并拉平 */
.sup-log .login:hover,
.sup-log .login:focus {
    color: #FFFFFF;
    background: none;
    border: 0;
    border-bottom: 2px solid #FFFFFF;
}

/* 吸顶后 header 是白底：浅色文字与白色下划线都会看不见，整体换深色系。
   基础样式表在吸顶态还有几条权重更高的规则（文字转白、铺绿底），
   这里按状态逐条对齐，保证吸顶前后是同一套「文字 + 下划线」的样子。 */
.fixed-header .sup-log a {
    color: #64748B;
}

.fixed-header .sup-log a:hover,
.fixed-header .sup-log a:focus {
    color: #047857;
    border-bottom-color: #047857;
}

.fixed-header .sup-log .support,
.fixed-header .sup-log .support:hover,
.fixed-header .sup-log .support:focus {
    color: #059669;
}

.fixed-header .sup-log .support:hover,
.fixed-header .sup-log .support:focus {
    color: #047857;
    border-bottom-color: #047857;
}

.fixed-header .sup-log .login:hover,
.fixed-header .sup-log .login:focus {
    color: #047857;
    border-bottom-color: #047857;
}

/* 小屏：导航已折成汉堡按钮，这两个入口缩一号，
   并在汉堡那一行下方另起一行右对齐。
   基础样式表原本把小屏的整个入口块隐藏了，等于手机上没有任何登录入口，
   这里用同权重 + 后加载放开；clear 是为了确保它落在 logo/汉堡换行之后，
   而不是与那一行挤在同一侧。 */
@media (max-width: 767px) {
    .sup-log {
        display: flex !important;
        align-items: center;
        clear: both;
        float: right;
        margin-top: 10px;
    }

    .sup-log a {
        padding: 4px 0;
        font-size: 13px;
    }

    .sup-log .login {
        margin-left: 14px;
    }
}

/* ==========================================================================
   5. 卡片等高兜底
   Conzex 的卡片（.single-service / .featured-item）本身没有等高机制，高度
   完全由内容撑开；英文文案长度统一所以看不出问题，中文文案长短不一就会
   出现同排卡片参差。
   处理：在模板里给卡片列加 Bootstrap 的 d-flex、给卡片加 w-100，
        这里再补齐 flex 布局下的两处细节。
   ========================================================================== */

/* 卡片在 flex 列中撑满，宽度交给 w-100，这里只确保不因阴影/边框溢出 */
.single-service.w-100,
.featured-item.w-100 {
    box-sizing: border-box;
}

/* 卡片底部 30px 外边距在 flex 拉伸时会被算入列高，统一交给栅格的 gutter 处理 */
.d-flex > .single-service,
.d-flex > .featured-item {
    margin-bottom: 30px;
}

/* 全宽 CTA（Conzex call-to-action-two）中文标题字号收敛 */
.cta-two-text h2 {
    font-size: 28px;
    line-height: 1.45;
}

/* 全宽 CTA 有两个并列按钮，补间距；次要按钮用描边样式区分主次 */
.cta-two-text .btn-bg4 + .btn-bg4 {
    margin-left: 14px;
}

.cta-two-text .btn-bg4.btn-ghost {
    background: transparent;
    color: #FFFFFF;
    border: 1px solid rgba(255, 255, 255, .6);
}

.cta-two-text .btn-bg4.btn-ghost:hover {
    background: #FFFFFF;
    color: #047857;
}

/* ==========================================================================
   6. 卡片媒体图与图标
   Conzex 的 service-style-two / featured-item 原本没有图片槽位，
   IFU 需要在场景卡和软件卡上补视觉标识，这里统一尺寸、间距与配色。
   ========================================================================== */

/* 场景卡顶部现场图：用负外边距抵消卡片内边距，让图片贴齐卡片边缘 */
.service-style-two .service-media {
    overflow: hidden;
    border-radius: 4px;
    margin: -30px -30px 24px;
}

.service-style-two .service-media img {
    display: block;
    width: 100%;
    height: auto;
}

/* 卡片标题前的小图标（Conzex 的标题里没有图标位） */
.single-service .service-content h5 i {
    margin-right: 8px;
    color: #10B981;
    font-size: 16px;
    vertical-align: middle;
}

/* 软件卡图标：Conzex 用 flaticon 伪元素画色块，IFU 改用 Fox 软件 SVG */
.featured-item .featured-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 77px;
    height: 53px;
    border-radius: 33px;
    margin-bottom: 20px;
}

.featured-item .featured-icon img {
    display: block;
    width: 36px;
    height: 36px;
    object-fit: contain;
}

/* 五个软件卡共用同一浅绿底，靠 Fox 图标本身区分 */
.featured-item .featured-icon.violet,
.featured-item .featured-icon.skay,
.featured-item .featured-icon.yeallow,
.featured-item .featured-icon.green,
.featured-item .featured-icon.black {
    background: #ECFDF5;
}

/* 首页软件卡入场错位：卡片由后台子栏目循环生成，模板拿不到循环序号，
   改由 CSS 按卡片位置补上逐个延后的动画延迟，效果与逐张写延迟类一致 */
.ifu-software-row > div:nth-child(1) .customFadeInUp { animation-delay: 0.1s; }
.ifu-software-row > div:nth-child(2) .customFadeInUp { animation-delay: 0.2s; }
.ifu-software-row > div:nth-child(3) .customFadeInUp { animation-delay: 0.3s; }
.ifu-software-row > div:nth-child(4) .customFadeInUp { animation-delay: 0.4s; }
.ifu-software-row > div:nth-child(5) .customFadeInUp { animation-delay: 0.5s; }

/* 「查看全部」入口卡：实心品牌绿圆 + 白色加号 */
.featured-item .featured-icon.more i:before {
    color: #FFFFFF;
    background: #10B981;
}

/* 案例卡缩略图圆角（.news-block 只给卡片设了圆角，没有裁掉图片直角） */
.news-block .blog-thumb {
    border-radius: 4px 4px 0 0;
    overflow: hidden;
}

/* 案例卡分类标签：沿用 Conzex 的 .admin-by 槽位（原为作者位），补图标与品牌绿文字 */
.news-block .admin-by {
    padding-top: 4px;
    font-size: 14px;
}

.news-block .admin-by i {
    margin-right: 6px;
    color: #10B981;
    font-size: 14px;
    vertical-align: middle;
}

.news-block .admin-by a,
.news-block .admin-by span {
    color: #059669;
    font-weight: 600;
}

.news-block .admin-by a:hover {
    color: #10B981;
}

/* ==========================================================================
   7. Hero 右侧视觉
   Conzex 的 hero-animation-image 是绝对定位装饰槽（right:0 / bottom:150px），
   这里改为跟随栅格排列的常规块，避免与左侧文案重叠。
   ========================================================================== */
.hero-section .hero-animation-image {
    position: relative;
    right: auto;
    bottom: auto;
    width: 100%;
}

.hero-animation-image img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(4, 47, 34, .38);
}

/* ==========================================================================
   8. Conzex 品牌色装饰图转色
   模板自带的装饰图为 PNG 位图，颜色写死在像素里，CSS 无法直接改色。
   这里用 hue-rotate 把 Conzex 紫 / 粉整体旋转到 IFU 品牌绿附近：
     紫色约 244°，转角 -90°  → 约 154°（品牌绿区间）
     粉色约 344°，转角 +174° → 约 158°（品牌绿区间）
   说明：纯色装饰图转色准确；紫粉混色的插画会残留少量偏色，
        属临时占位方案，后续应替换为 IFU 自有插画。
   ========================================================================== */

/* 纯紫色装饰：旋转后准确落在品牌绿 */
.animation-round-border img,
.skill-bg,
.featured-area .featured-round img {
    filter: hue-rotate(-90deg);
}

/* 纯粉色装饰：反向旋转到品牌绿 */
.leaf {
    filter: hue-rotate(174deg);
}

/* 紫粉混色装饰插画：以紫色为主进行纠正，并压低饱和度减少残留偏色 */
.skill-note-img .notpad,
.featured-area .featured-round-small img {
    filter: hue-rotate(-90deg) saturate(.72);
}

/* 内页页头条幅
   原来引用 Conzex 的 banner-bg.png：一张紫色位图，只能靠色相旋转转成品牌绿，
   且左下角那个大圆是画在图片里的，尺寸会随视口 cover 缩放忽大忽小、位置也漂，
   没法在里面放东西。现改为自绘：
     1. 底色用 CSS 线性渐变铺满整块页头，颜色直接写品牌绿，不再需要色相旋转；
     2. 装饰线条（右上圆环、虚线弧、左侧发散线）用一张透明底 SVG 单独铺一层；
     3. 左下角的动效徽标改为一个真实图片元素（见下面的 .ifu-banner-mark），
        不能再用伪元素加背景图，因为放进背景图里的动画不会播放，
        必须用 img 引用，标志内部的呼吸动画才会跑起来。
   改成整块铺满后页头是完整的绿色区块，徽标落在绿色区域内，也不会再被下边缘裁掉。 */
.banner-section {
    position: relative;
    overflow: hidden;
    background-color: #0B8A63;
    background-image: url(../img/bg/ifu-banner-deco.svg),
                      linear-gradient(135deg, #056C4E 0%, #0B8A63 55%, #14A87C 100%);
    background-repeat: no-repeat, no-repeat;
    background-position: center, top center;
    background-size: cover, 100% 100%;
}

/* 页头文字压在徽标之上，避免徽标盖住标题与面包屑 */
.banner-section > .container {
    position: relative;
    z-index: 1;
}

/* 左下角动效徽标：白色圆托 + 会呼吸的 IFU 标志，两者分开画。
   为什么要分开：标志是方形取景框，四个角是方的。如果圆托和标志画在同一个
   图片元素上（给图片加圆形圆角），方形标志的四个角会被圆边裁掉；把圆托挪到
   本节的伪元素上单独画，标志只是叠在圆托上方，就完全不参与圆形裁切。
   另外标志必须用图片元素引用而来，不能做成背景图——动画写在 SVG 内部，
   放进背景图里不会播放。
   徽标距页头下边是固定间距（不是百分比），所以整圆始终落在绿色区域内，
   不会被容器的 overflow 裁掉。 */
.banner-section::before {
    content: '';
    position: absolute;
    left: 5%;
    bottom: 34px;
    z-index: 0;
    width: clamp(116px, 11vw, 178px);
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background-color: #FFFFFF;
    background-image: radial-gradient(circle at 50% 42%, #FFFFFF 0%, #ECFDF5 100%);
    box-shadow: 0 0 0 12px rgba(255, 255, 255, .1), 0 18px 42px rgba(4, 103, 75, .34);
}

/* 标志本体：与圆托同尺寸同位置，再靠 transform 整体缩到圆托的一半左右。
   这里刻意不用「内边距 + 图形适配」来控制图形大小：各家浏览器对图片内边距
   与图形适配的组合处理不一致，有的会把图形按外框铺满，方形取景框的四个角
   就会被圆边削掉（这正是四角被切的原因）。改用 transform 缩放是绘制层面的
   操作，各家表现一致；缩到一半后四个角距离圆边还剩四成余量。
   z-index 高于圆托，叠在圆托正中；圆托已由上面的伪元素画好，图片本身不带圆角，
   所以标志完全不参与圆形裁切。 */
.ifu-banner-mark {
    position: absolute;
    left: 5%;
    bottom: 34px;
    z-index: 1;
    width: clamp(116px, 11vw, 178px);
    aspect-ratio: 1 / 1;
    object-fit: contain;
    transform: scale(.53);
    transform-origin: center;
    pointer-events: none;
}

/* 徽标外圈虚线环：与圆托同心、略大一圈的静态装饰，不再转动 */
.banner-section::after {
    content: '';
    position: absolute;
    left: 5%;
    bottom: 34px;
    z-index: 0;
    width: clamp(116px, 11vw, 178px);
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    border: 1px dashed rgba(255, 255, 255, .38);
    transform: scale(1.16);
    pointer-events: none;
}

/* ==========================================================================
   9. 深色区块（.dark-bg）通用适配
   首页只把深色用在首屏与结尾（hero 与 CTA 用渐变底），中间区块统一走
   「白 / 浅灰」交替，保证模块间的切换感又不显突兀。
   此段为深色区块的通用适配，供 element 目录下使用 .dark-bg 的区块复用。
   ========================================================================== */

/* 深蓝标题 #243E63 在深墨绿上几乎不可见，转为白色 */
.dark-bg .section-title h2 {
    color: #FFFFFF;
}

.dark-bg .section-title p {
    color: rgba(255, 255, 255, .74);
}

/* 深色底上的圆形装饰边框本身是绿色，会与底色糊在一起，压低存在感 */
.dark-bg .animation-round-border {
    opacity: .3;
}

/* ==========================================================================
   10. 版式节奏统一（间距 / 字号 / 卡片内边距）
   参考：ifu-site-template-prototypes-v4 的 site.css、ifu-official-v5 的 styles.css，
         两者都把区块垂直间距收敛为固定几档（v4 统一 96px，v5 用 82px + 紧凑 60px）。
   问题：此前各内页模板各自拼 Conzex 的 pt-* / pb-* 工具类，全站出现了
         pt-200/pb-175、pt-75/pb-45、pt-70/pb-45、pt-85/pb-45、pt-75/pb-60、
         pt-75/pb-75、pt-40/pb-100 共 7 种组合，模块之间没有统一节奏；
         三种卡片的内边距也各写各的（30/13、30/10、40/31），左右与栅格不齐。
   做法：本节定义 2 档语义间距与统一的标题组、标签、步骤、清单等模块，
         模板统一改用这些类，后续调整间距只改这一处。
   ========================================================================== */

/* 标准区块：页面主体内容段，上下对称 82px */
.ifu-band {
    padding: 82px 0;
}

/* 紧凑区块：紧随页头的引导段，以及收尾的 CTA 段 */
.ifu-band-tight {
    padding: 58px 0;
}

/* 页头：Conzex 原为 pt-200 pb-175，内页留白接近正文段的三倍，
   收敛后与正文段形成合理比例，顶部留白仍保证固定头部不遮标题。
   下留白比上留白小一档，但在宽屏下足以让左下角徽标与居中标题在水平方向错开 */
.banner-section {
    padding: 150px 0 140px;
}

/* 区块标题组：眉标 + 标题 + 引导语，统一最大宽度与下间距
   （Conzex 的 .section-title 下间距为 50px，比 v4 的 38px 偏松，收敛到 44px） */
.ifu-head {
    max-width: 780px;
    margin: 0 auto 44px;
    text-align: center;
}

.ifu-head h2 {
    margin-bottom: 14px;
    line-height: 1.28;
}

.ifu-head p {
    margin: 0;
    font-size: 16px;
    line-height: 1.85;
    color: #64748B;
}

/* 左对齐变体：用于正文内的分节标题，不居中 */
.ifu-head--left {
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 30px;
    text-align: left;
}

/* 眉标：中文站点不用夸张的大写字母间距，只保留小号 + 品牌绿 */
.ifu-kicker {
    display: block;
    margin-bottom: 12px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .08em;
    color: #059669;
}

/* 标签组：软件卡与案例卡上的属性标签 */
.ifu-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 18px;
    padding: 0;
    list-style: none;
}

.ifu-tag {
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.6;
    color: #047857;
    background-color: #ECFDF5;
    border-radius: 999px;
}

/* 入口标签行：放在板块末尾用于跳转到其他栏目，与上方内容留出间距 */
.ifu-tags--entry {
    margin: 28px 0 0;
}

/* 文档聚合页：应用卡里的「该应用的文档」入口列表。
   卡片高度靠 .d-flex + w-100 拉平，这里只负责列表与分隔线的样式 */
.ifu-doc-entry {
    margin: 20px 0 0;
    padding: 16px 0 0;
    list-style: none;
    border-top: 1px solid #E2E8F0;
}

.ifu-doc-entry li + li {
    margin-top: 8px;
}

.ifu-doc-entry a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 14px;
    font-weight: 600;
    color: #047857;
}

/* 右侧篇数用弱色，避免与入口名抢注意力 */
.ifu-doc-entry a span {
    flex: 0 0 auto;
    font-size: 12px;
    font-weight: 400;
    color: #94A3B8;
}

.ifu-doc-entry a:hover {
    color: #10B981;
}

/* 软件截图位：软件页预留的真实界面截图区（主界面 / 核心功能 / 实际场景）。
   图位留空并标注清楚，避免用示意图冒充真实软件界面 */
.ifu-shots {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 46px;
}

.ifu-shot {
    flex: 1 1 260px;
    padding: 20px 20px 22px;
    background-color: #FFFFFF;
    border: 1px dashed #A7F3D0;
    border-radius: 4px;
}

.ifu-shot h6 {
    margin-bottom: 12px;
    font-size: 14px;
    font-weight: 600;
    color: #1E293B;
}

/* 图集标题：后台没给某张图配标题时该行为空，用 :empty 隐藏，避免留出空行。
   注意 :empty 只在标签内完全无内容时命中，模板里要写成紧贴写法 */
.ifu-shot h6:empty {
    display: none;
}

/* 图集图片：等比缩放，不撑破卡片 */
.ifu-shot-frame img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
}

.ifu-shot-frame {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 168px;
    padding: 16px;
    font-size: 13px;
    line-height: 1.7;
    color: #94A3B8;
    text-align: center;
    background-color: #F6F8FA;
    border-radius: 4px;
}

/* 流程步骤：编号 + 标题 + 说明的等高小卡（对应 v4 的 .steps、v5 的 .process） */
.ifu-steps {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ifu-steps > li {
    flex: 1 1 220px;
    padding: 28px 26px 26px;
    background-color: #FFFFFF;
    border: 0.7px solid #E0E0F2;
    border-radius: 4px;
}

.ifu-steps .num {
    display: block;
    margin-bottom: 10px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .1em;
    color: #10B981;
}

.ifu-steps h4 {
    margin-bottom: 8px;
    font-size: 17px;
    line-height: 1.5;
}

.ifu-steps p {
    margin: 0;
    font-size: 14px;
    line-height: 1.8;
    color: #64748B;
}

/* 五列流程条：文档中心的五个入口需要排在同一行，窄屏仍按容器宽度自动换行 */
.ifu-steps--five > li {
    flex: 1 1 176px;
}

/* 要点清单：勾选式条目（对应 v4 的 .feature-list、v5 的 .list） */
.ifu-points {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ifu-points > li {
    position: relative;
    padding: 13px 0 13px 30px;
    font-size: 15px;
    line-height: 1.8;
    color: #475569;
    border-bottom: 1px dashed #E0E0F2;
}

.ifu-points > li:last-child {
    border-bottom: 0;
}

.ifu-points > li:before {
    content: "\f00c";
    position: absolute;
    left: 0;
    top: 15px;
    font-family: 'FontAwesome';
    font-size: 13px;
    color: #10B981;
}

/* 指标条：案例页的「背景 / 方案 / 结果」三格（对应 v4 的 .info-row） */
.ifu-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.ifu-metric {
    flex: 1 1 200px;
    padding: 24px 22px;
    background-color: #FFFFFF;
    border: 0.7px solid #E0E0F2;
    border-radius: 4px;
}

.ifu-metric b {
    display: block;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .1em;
    color: #10B981;
}

.ifu-metric span {
    display: block;
    margin-top: 8px;
    font-size: 15px;
    line-height: 1.75;
    color: #475569;
}

/* 常见问题卡（对应 v4 / v5 的 faq 区块） */
.ifu-faq {
    height: 100%;
    padding: 28px 26px;
    background-color: #FFFFFF;
    border: 0.7px solid #E0E0F2;
    border-radius: 4px;
}

.ifu-faq h4 {
    margin-bottom: 10px;
    font-size: 16px;
    line-height: 1.55;
}

.ifu-faq p {
    margin: 0;
    font-size: 14px;
    line-height: 1.8;
    color: #64748B;
}

/* 卡片内边距统一：Conzex 三种卡片原本各写各的，
   左右内缩与栅格对不齐，统一为 30 / 30 / 28 */
.single-service.service-style-two,
.featured-item,
.news-block .news-inner {
    padding: 30px 30px 28px;
}

/* 区块标题下间距收敛，与 .ifu-head 保持一致 */
.section-title {
    margin-bottom: 44px;
}

.section-title h2 {
    margin-bottom: 14px;
}

/* ==========================================================================
   11. 内页通用组件
   内页模板（方案 / 软件 / 服务 / 案例 / 文档 / 单页）统一采用
   「banner 页头 + 8:4 正文与侧栏 + 全宽 CTA」的结构。
   下面这些类名只在 IFU 内页模板里出现，Conzex 没有对应定义，在此补齐。
   ========================================================================== */

/* 正文区底色：与首页「白 / 浅灰交替」的节奏保持一致，正文区统一白底 */
.service-details-section {
    background-color: #FFFFFF;
}

/* 正文引导语：用于承接页头标题的那段说明（h2 承载），
   左侧品牌绿竖线点出层级，字号比正文标题降一档 */
.service-details-content .ifu-lead {
    margin-bottom: 26px;
    padding-left: 16px;
    font-size: 22px;
    font-weight: 500;
    line-height: 1.65;
    color: #1E293B;
    border-left: 4px solid #10B981;
}

/* 富文本正文可读性：中文段落行高放松，段间距加大 */
.service-details-content p {
    margin-bottom: 18px;
    line-height: 1.9;
    color: #475569;
}

.service-details-content h3,
.service-details-content h4 {
    margin: 32px 0 14px;
    color: #1E293B;
}

/* Conzex 全局把 ul/li 的 list-style 清成了 none，正文里的列表需要还原项目符号 */
.service-details-content ul {
    margin: 0 0 18px;
    padding-left: 4px;
}

.service-details-content ul li {
    position: relative;
    padding-left: 22px;
    line-height: 1.9;
    color: #475569;
}

.service-details-content ul li:before {
    content: "\f00c";
    position: absolute;
    left: 0;
    top: 0;
    font-family: 'FontAwesome';
    color: #10B981;
    font-size: 13px;
}

/* 正文内的图片与表格不撑破容器 */
.service-details-content img,
.service-details-content table {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
}

/* 详情页顶部现场图：撑满正文宽度并与下方引导语拉开距离 */
.ifu-detail-media {
    margin-bottom: 32px;
}

.ifu-detail-media img {
    display: block;
    width: 100%;
    background-color: #F6F8FA;
    border-radius: 4px;
}

/* 侧栏卡片：白底 + 细边框，与卡片（.single-service）同一视觉语言 */
.ifu-side-entry {
    padding: 34px 30px 36px;
    background-color: #FFFFFF;
    border: 0.7px solid #E0E0F2;
    border-radius: 4px;
}

/* 侧栏小标题：Conzex 的 .footer-title 只在页脚作用域内生效，这里补侧栏作用域 */
.ifu-side-entry .footer-title {
    padding-bottom: 18px;
    margin-bottom: 6px;
    font-size: 18px;
    font-weight: 600;
    color: #1E293B;
    border-bottom: 0.7px solid #E0E0F2;
}

/* 侧栏链接列表：沿用页脚链接的细排视觉，悬停转品牌绿并右移 */
.ifu-side-entry .list li a {
    display: block;
    padding: 11px 0;
    color: #64748B;
    border-bottom: 1px dashed #E0E0F2;
    transition: .3s;
}

.ifu-side-entry .list li:last-child a {
    border-bottom: 0;
}

.ifu-side-entry .list li a:hover {
    padding-left: 6px;
    color: #059669;
}

/* 侧栏底部按钮：Conzex 的 .btn-bg4 是白底绿字的 inline-block（min-width 204px），
   在白色侧栏卡片里不可见，改为实心品牌绿并撑满侧栏宽度 */
.ifu-side-entry .btn-bg4 {
    display: block;
    width: 100%;
    min-width: 0;
    margin-top: 26px;
    padding: 15px 10px;
    font-size: 16px;
    background: #10B981;
    color: #FFFFFF;
}

.ifu-side-entry .btn-bg4:hover {
    background: #047857;
    color: #FFFFFF;
}

/* 验证码输入组：输入框与验证码图并排，图片高度对齐输入框（70px） */
.contact-form .form-group.ifu-checkcode-group {
    display: flex;
    align-items: stretch;
}

.contact-form .form-group.ifu-checkcode-group input[type="text"] {
    flex: 1 1 auto;
    width: auto;
}

.contact-form .form-group.ifu-checkcode-group img {
    flex: 0 0 130px;
    height: 70px;
    margin-left: 14px;
    background-color: #FFFFFF;
    border: 0.7px solid #E0E0F2;
    border-radius: 4px;
    cursor: pointer;
}

/* 会员登录 / 注册：验证码输入组，输入框与验证码图并排且自动等高 */
.login-form .ifu-checkcode {
    display: flex;
    align-items: stretch;
    margin-bottom: 26px;
}

.login-form .ifu-checkcode .text-field {
    flex: 1 1 auto;
    margin-bottom: 0;
}

.login-form .ifu-checkcode .ifu-checkcode-img {
    flex: 0 0 130px;
    margin-left: 14px;
    background-color: #FFFFFF;
    border: 0.7px solid #E0E0F2;
    border-radius: 4px;
    cursor: pointer;
}

/* 会员注册：邮箱验证码按钮，与验证码输入框并排并由 flex 自动拉平高度；
   发送成功后按钮进入倒计时，倒计时期间保持禁用态以示不可再点 */
.login-form .ifu-checkcode .ifu-checkcode-btn {
    flex: 0 0 140px;
    margin-left: 14px;
    padding: 0 10px;
    color: #FFFFFF;
    font-size: 15px;
    white-space: nowrap;
    background-color: #10B981;
    border: 0;
    border-radius: 4px;
    cursor: pointer;
}

.login-form .ifu-checkcode .ifu-checkcode-btn:hover:not(:disabled) {
    background-color: #047857;
}

.login-form .ifu-checkcode .ifu-checkcode-btn:disabled {
    color: #8198AE;
    background-color: #F2F4F8;
    cursor: not-allowed;
}

/* 会员注册：验证码提示行，向上贴住验证码组、向下与昵称字段留出间距 */
.login-form .ifu-code-tip {
    margin: -14px 0 24px;
    color: #8198AE;
    font-size: 14px;
    line-height: 1.6;
}

.login-form .ifu-code-tip.is-error {
    color: #D64545;
}

/* 会员页面按钮组：按钮之间留间距，窄屏自动换行 */
.ifu-member-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
    align-items: center;
}

/* ==========================================================================
   12. 响应式微调
   ========================================================================== */

/* 平板及以下：区块间距整体收紧，避免长页面在窄屏上过度留白 */
@media (max-width: 991px) {
    .ifu-band {
        padding: 64px 0;
    }

    .ifu-band-tight {
        padding: 48px 0;
    }

    /* 窄屏下标题会占满整宽、与徽标在水平方向无法错开，
       所以把下留白加到比徽标高度更大，让两者改为上下分层 */
    .banner-section {
        padding: 130px 0 150px;
    }

    .ifu-head {
        margin-bottom: 36px;
    }

    h1 {
        font-size: 30px;
    }

    h2 {
        font-size: 26px;
    }

    /* 内页 8:4 在平板起堆叠，侧栏与正文之间补出间距 */
    .ifu-side-entry {
        margin-top: 20px;
    }
}

/* ==========================================================================
   13. 版式扩充组件
   --------------------------------------------------------------------------
   背景：原始 Conzex 提供 7 套首页、6 种列表排布、6 种详情页组织方式，以及
         26 个组件演示页共 90 余个样式变体。改造成 IFU 时只保留了 9 个区块
         类名，另外 16 个（计数器、手风琴、标签页、面包屑、分页、客户 logo、
         团队、价格、视频、进度条等）使用次数为 0，导致全站只剩
         「页头大图 → 白灰交替段 → 居中标题组 + 三列卡 → CTA」一种版式语法，
         页面数量增加后看起来高度重复。
   做法：本节补齐 6 类此前完全未用的版式。全部复用 Conzex 既有类名与已经
         加载的脚本，不引入任何新的 JS 依赖：
           · 面包屑    → {pboot:position} 系统标签（后端已实现并已调用）
           · 分页      → {page:bar} 系统标签（Paging::pageBar 输出 span 序列）
           · 折叠问答  → 复用 main.js 已绑定的 .accordion-box-two 点击逻辑
           · 能力标签页→ 复用已加载的 bootstrap-v4.1.3 的 data-toggle="tab"
           · 之字形图文→ 对应原始 process.html 的左右交替排布
           · 数据条    → 复用 main.js + jquery.countTo 的 .funfact / .count
   ========================================================================== */

/* --- 13.1 面包屑 ------------------------------------------------------ */
/* {pboot:position} 直接输出一串 <a>，没有 ul / li 包裹，
   所以这里用一个容器承接，分隔符与末级弱化都靠 CSS 完成。
   页头底图经过 hue-rotate 转色，彩色文字会被改变色相，
   因此面包屑统一用白色，只靠透明度区分层级。 */
.ifu-breadcrumb {
    margin-top: 14px;
    font-size: 13px;
    line-height: 1.9;
    color: rgba(255, 255, 255, .72);
}

.ifu-breadcrumb a {
    color: rgba(255, 255, 255, .72);
}

.ifu-breadcrumb a:hover {
    color: #FFFFFF;
}

.ifu-breadcrumb a:last-child {
    color: #FFFFFF;
}

.ifu-breadcrumb i {
    margin: 0 6px;
    font-size: 11px;
    opacity: .55;
}

/* --- 13.2 分页 -------------------------------------------------------- */
/* {page:bar} 输出的是 span 序列（page-status / page-index / page-pre /
   page-numbar / page-next / page-last），不是 ul+li，故按 span 设样式。
   当前页用品牌绿实心，与全站按钮保持同一套视觉语言。 */
.ifu-pager {
    margin-top: 46px;
    text-align: center;
    font-size: 14px;
    color: #64748B;
}

.ifu-pager span {
    display: inline-block;
    margin: 0 3px;
    vertical-align: middle;
}

.ifu-pager .page-status {
    margin-right: 16px;
}

.ifu-pager a {
    display: inline-block;
    min-width: 40px;
    padding: 9px 13px;
    line-height: 1.2;
    color: #475569;
    background-color: #FFFFFF;
    border: 0.7px solid #E0E0F2;
    border-radius: 4px;
    transition: .25s;
}

/* 数字按钮之间的间距：.page-numbar 只是个外层容器，同一容器内的每个 a
   默认紧贴在一起（1 和 2 会粘住）。这里补上左右 3px，
   与相邻分页项之间各 3px 相加得到的 6px 间隔保持一致。 */
.ifu-pager .page-numbar a {
    margin: 0 3px;
}

.ifu-pager a:hover {
    color: #047857;
    border-color: #10B981;
}

.ifu-pager a.page-num-current,
.ifu-pager a.page-num-current:hover {
    color: #FFFFFF;
    background-color: #10B981;
    border-color: #10B981;
}

.ifu-pager .page-none {
    color: #94A3B8;
}

/* --- 13.3 折叠问答 ---------------------------------------------------- */
/* 直接复用 Conzex 的 accordion-box-two，而不是自建类名：
   main.js 的手风琴点击逻辑只绑定在 .accordion-box-one/two/five/six 上，
   换类名就必须额外写 JS。
   【反直觉点】Conzex 的 .accord-content 默认是 display:none，
   .accord-content.collapsed 才是 display:block —— 语义与命名相反，
   因此只有默认展开的第一条要加 collapsed，其余不加。
   宽度：原先限制 860px 并居中，两侧各空出一大块，整段看着空；现由第 17 节
        的两栏栅格给出宽度（左说明栏 + 右问答栏），这里只取消限宽。 */
.ifu-accordion.accordion-box-two {
    margin: 0;
    max-width: none;
}

.ifu-accordion .accordion-block-two:hover {
    box-shadow: none;
}

.ifu-accordion .accordion-block-two .accord-btn {
    padding: 20px 58px 20px 24px;
    border-radius: 4px;
}

.ifu-accordion .accordion-block-two .accord-btn h5 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #1E293B;
}

/* 展开态：Conzex 原本是深色 #2f2f31 底 + 荧光绿标题，
   改为品牌绿浅底，与本文件其余模块统一 */
.ifu-accordion .accordion-block-two .accord-btn.active {
    background: #ECFDF5;
    border-radius: 4px 4px 0 0;
}

.ifu-accordion .accordion-block-two .accord-btn.active h5 {
    color: #047857;
}

/* 圆形图标从左侧移到右侧，避免与标题起点抢视觉 */
.ifu-accordion .accordion-block-two .accord-btn:after {
    left: auto;
    right: 22px;
    top: 22px;
    background: #F3F4FA;
    color: #10B981;
}

.ifu-accordion .accordion-block-two .accord-btn.active:after {
    background: #10B981;
    color: #FFFFFF;
}

.ifu-accordion .accordion-block-two .accord-content {
    padding: 18px 24px 22px;
    color: #64748B;
    background: #FFFFFF;
    border: 0.7px solid #E0E0F2;
    border-top: 0;
    border-radius: 0 0 4px 4px;
}

.ifu-accordion .accordion-block-two .accord-content p {
    margin: 0;
    font-size: 14px;
    line-height: 1.85;
    color: #64748B;
}

/* --- 13.4 能力标签页 -------------------------------------------------- */
/* 用 Conzex element.css 已有的 .tab-one-btn / .tab-one-content 结构，
   切换交给 Bootstrap 的 data-toggle="tab"（bootstrap-v4.1.3 已在 foot 加载）。 */
.ifu-tabs .tab-one-btn-wrap {
    justify-content: center;
    border-bottom: 1px solid #E0E0F2;
}

.ifu-tabs .tab-one-btn {
    padding: 18px 24px;
    color: #475569;
    background: transparent;
    border: 0;
    border-bottom: 3px solid transparent;
    border-radius: 0;
}

.ifu-tabs .tab-one-btn:hover {
    color: #047857;
}

.ifu-tabs .tab-one-btn.active {
    color: #047857;
    background: transparent;
    border-bottom-color: #10B981;
}

.ifu-tabs .tab-one-btn-title h5 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #1E293B;
}

.ifu-tabs .tab-one-btn.active .tab-one-btn-title h5 {
    color: #047857;
}

.ifu-tabs .tab-one-btn-title i {
    color: #10B981;
}

.ifu-tabs .tab-one-btn p {
    margin: 0;
    font-size: 13px;
    line-height: 1.7;
    color: #94A3B8;
}

.ifu-tabs .tab-one-content-wrap {
    margin-top: 34px;
    border: 0;
}

.ifu-tabs .tab-one-content {
    padding: 0;
    background: transparent;
}

.ifu-tabs .tab-one-content h4 {
    margin-bottom: 12px;
    font-size: 19px;
}

.ifu-tabs .tab-one-content p {
    font-size: 15px;
    line-height: 1.9;
    color: #475569;
}

/* --- 13.5 之字形图文 -------------------------------------------------- */
/* 对应原始 process.html 的左右交替大图文块。
   此前全站的流程内容都用 .ifu-steps 横向小卡表达，缺少节奏变化。 */
.ifu-zigzag > .row {
    align-items: center;
}

.ifu-zigzag > .row + .row {
    margin-top: 64px;
}

.ifu-zigzag-media img {
    display: block;
    width: 100%;
    height: auto;
}

.ifu-zigzag-text .num {
    display: block;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .1em;
    color: #10B981;
}

.ifu-zigzag-text h3 {
    margin-bottom: 14px;
    font-size: 23px;
    line-height: 1.42;
}

.ifu-zigzag-text p {
    margin-bottom: 14px;
    font-size: 15px;
    line-height: 1.9;
    color: #475569;
}

.ifu-zigzag-text p:last-child {
    margin-bottom: 0;
}

/* --- 13.6 数据条 ------------------------------------------------------ */
/* main.js 在 .funfact 滚动进可视区时对 .count 调用 countTo，
   所以容器必须保留 .funfact 类名，否则数字不会滚动。
   Conzex 原样式给 .count::after 硬编码了 "K" 后缀（原模板数字都是 160K 量级），
   IFU 的数字是个位数量级，必须去掉，否则会显示成「5K」。 */
/* 首页节奏为「白灰交替」。数据条紧邻的上一段「项目与服务」已是 .gray-bg（#F6F8FA），
   若数据条也用同色，两段会连成一整条长灰带、失去分段感；
   故这里用简写 background 一次性清掉 Conzex 原 .funfact 的紫色底与背景图，
   改为白底，形成「灰 → 白 → 深绿 CTA」的三段递进。 */
.ifu-stats.funfact {
    background: #FFFFFF;
}

.ifu-stats.funfact h2 {
    color: #1E293B;
}

.ifu-stats .stat-item .count {
    font-size: 46px;
    font-weight: 700;
    color: #10B981;
    padding-bottom: 12px;
}

.ifu-stats .stat-item .count::after {
    content: "";
}

.ifu-stats .stat-item .text {
    font-size: 15px;
    font-weight: 500;
    color: #475569;
}

/* --- 13.7 场景图墙 ---------------------------------------------------- */
/* 大图 + 图上叠加标题的排布，全站此前没有这种形态 */
.ifu-wall {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ifu-wall > li {
    position: relative;
    flex: 1 1 300px;
    overflow: hidden;
    background-color: #FFFFFF;
    border: 0.7px solid #E0E0F2;
    border-radius: 4px;
}

.ifu-wall > li > a {
    display: block;
}

.ifu-wall img {
    display: block;
    width: 100%;
    height: 230px;
    object-fit: cover;
    transition: transform .55s;
}

.ifu-wall > li:hover img {
    transform: scale(1.06);
}

.ifu-wall .wall-cap {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 22px;
    background: linear-gradient(180deg, rgba(4, 120, 87, 0), rgba(4, 120, 87, .9));
}

.ifu-wall .wall-cap h4 {
    margin: 0 0 6px;
    font-size: 18px;
    color: #FFFFFF;
}

.ifu-wall .wall-cap p {
    margin: 0;
    font-size: 13px;
    line-height: 1.7;
    color: rgba(255, 255, 255, .88);
}

/* --- 13.8 扩充组件的响应式微调 ---------------------------------------- */
@media (max-width: 991px) {
    .ifu-zigzag > .row + .row {
        margin-top: 44px;
    }

    /* 之字形在平板起堆叠：图片统一排到文字上方 */
    .ifu-zigzag-media {
        margin-bottom: 22px;
    }

    .ifu-tabs .tab-one-btn {
        padding: 14px 16px;
    }
}

@media (max-width: 767px) {
    .ifu-stats .stat-item .count {
        font-size: 36px;
    }

    .ifu-pager .page-status {
        display: block;
        margin: 0 0 12px;
    }

    .ifu-wall img {
        height: 190px;
    }
}

@media (max-width: 767px) {
    h1 {
        font-size: 26px;
    }

    h2 {
        font-size: 22px;
    }

    .hero-text h1 {
        line-height: 1.4;
    }

    .ifu-logo-mark {
        width: 38px;
        height: 38px;
        flex: 0 0 38px;
    }

    .ifu-logo-text {
        font-size: 20px;
    }

    /* 窄屏下页头徽标组（圆托 + 呼吸标志 + 虚线环）整体隐藏：
       手机上页头只剩标题与面包屑，圆托贴着左边线会溢出到段外、还压住面包屑，
       属于宽屏才成立的搭配装饰，窄屏直接不显示 */
    .ifu-banner-mark,
    .banner-section::before,
    .banner-section::after {
        display: none;
    }

    /* 徽标隐去后，页头底纹也要一并收起：虚线弧、右上圆环与左侧发散线这三组
       线条都是围绕左下角徽标布置的搭配装饰，徽标不显示后它们会单独浮在标题
       旁边，看着像没删干净的残留元素；这里只保留品牌绿渐变底色，同时把为
       徽标加大的下留白一起还原，使页头上下留白接近对称 */
    .banner-section {
        background-image: linear-gradient(135deg, #056C4E 0%, #0B8A63 55%, #14A87C 100%);
        padding: 120px 0 90px;
    }

    /* 窄屏下侧栏卡片与正文引导语的留白同步收紧 */
    .ifu-side-entry {
        padding: 26px 22px 28px;
    }

    .service-details-content .ifu-lead {
        font-size: 19px;
    }

    /* 窄屏下验证码图收窄，避免输入框被压得过短 */
    .contact-form .form-group.ifu-checkcode-group img {
        flex: 0 0 100px;
        height: 60px;
    }
}

/* ==========================================================================
   14. 404 页面（静态文件 /404.html）
   说明：404.html 由 core/function/helper.php 的 _404() 直接读取，只做纯文本
        变量替换（支持 {info} / {url} / {time} / {js} / {sitedir} / {coredir}），
        不经过模板引擎，因此不能写 {pboot:xxx} 标签，样式只能放在这里。
   ========================================================================== */
.ifu-404 {
    display: flex;
    align-items: center;
    min-height: 100vh;
    padding: 70px 0;
    background-color: #FFFFFF;
}

.ifu-404-inner {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
}

/* 品牌标志：与站内 header 的图文组合保持同一尺寸与字距 */
.ifu-404-brand {
    display: inline-flex;
    align-items: center;
    margin-bottom: 30px;
}

.ifu-404-brand img {
    width: 38px;
    height: 38px;
    object-fit: contain;
}

.ifu-404-brand span {
    margin-left: 10px;
    font-size: 21px;
    font-weight: 700;
    letter-spacing: .08em;
    color: #1E293B;
}

.ifu-404-code {
    margin: 0 0 6px;
    font-size: 88px;
    font-weight: 700;
    line-height: 1;
    color: #10B981;
}

.ifu-404-title {
    margin-bottom: 12px;
    font-size: 26px;
    color: #1E293B;
}

/* 这里是 PbootCMS 注入的本次访问原因，弱化处理成辅助信息 */
.ifu-404-info {
    margin-bottom: 18px;
    font-size: 14px;
    color: #94A3B8;
}

.ifu-404-desc {
    max-width: 560px;
    margin: 0 auto 32px;
    font-size: 15px;
    line-height: 1.9;
    color: #475569;
}

.ifu-404-actions {
    margin-bottom: 44px;
}

.ifu-404-actions .btn-bg {
    margin: 0 6px 10px;
}

.ifu-404-ghost {
    display: inline-block;
    margin: 0 6px 10px;
    padding: 15px 34px;
    font-size: 15px;
    font-weight: 600;
    color: #047857;
    background-color: #ECFDF5;
    border-radius: 4px;
    transition: .25s;
}

.ifu-404-ghost:hover {
    color: #FFFFFF;
    background-color: #047857;
}

/* 常用入口：让 404 页面有出口，而不是死胡同 */
.ifu-404-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0;
    padding: 26px 0 0;
    list-style: none;
    border-top: 1px solid #E0E0F2;
}

.ifu-404-links li {
    margin: 0 14px 8px;
}

.ifu-404-links a {
    font-size: 14px;
    color: #475569;
}

.ifu-404-links a:hover {
    color: #047857;
}

/* ==========================================================================
   15. 留言表单卡片
   「常见问题」不再单独成页，改为问答区块嵌入各栏目页面，由后台
   「常见问题」模型维护内容；本节的表单卡片由「联系我们」与
   「提交想法」两个页面共用。
   ========================================================================== */

/* --- 15.1 留言表单卡片 --- */
/* 结构复用 Conzex 的 .faq-form-area（白底圆角卡片），此处只覆盖内边距与描边。
   卡片在模板中直接放在容器里、占满整宽，与上方说明共用同一条左右边界；
   此前由 col-lg-8 居中，在整幅底色上是一块孤立的窄框，页面下半段看着空。 */
.ifu-form-band .faq-form-area {
    padding: 44px 50px 50px;
    background-color: #FFFFFF;
    border: 0.7px solid #E0E0F2;
    border-radius: 4px;
}

/* --- 15.2 页面内嵌问答区块 --- */
/* 各栏目页面用 {pboot:list} 拉取「常见问题」模型下对应分类的文章，
   渲染成与联系页一致的折叠面板。折叠块补齐最后一条的下外边距。 */
.ifu-faq-embed .accordion-block-two:last-child {
    margin-bottom: 0;
}

/* 问答区块的答案文字与其他折叠块保持一致的行高与颜色 */
.ifu-faq-embed .accordion-block-two .accord-content p {
    margin: 0;
    font-size: 14px;
    line-height: 1.85;
    color: #64748B;
}

@media (max-width: 991px) {
    .ifu-form-band .faq-form-area {
        padding: 30px 24px 34px;
    }
}

@media (max-width: 767px) {
    .ifu-404-code {
        font-size: 64px;
    }

    .ifu-404-title {
        font-size: 21px;
    }
}

/* ==========================================================================
   17. 两栏内容段：左说明栏 + 右折叠问答（仅问答段使用）
   背景：折叠问答段此前是「标题居中 + 内容限宽居中」，问答被限制在 860px，
        两侧各空出一大片底色，整段看着空，宽度也被浪费掉。Conzex 的 faq-one
        版式（左栏装饰 + 右栏问答）正是为这种情况准备的，这里按同一思路重做，
        但不搬它的位图素材，装饰改用品牌自绘元素（虚线圆环 + 静态标志），
        与页头徽标同源。
       留言表单段不走这里：表单字段多、纵向很长，两栏会让左栏空出一大片，
        模板中改为「说明在上、卡片占满容器」，见第 18 节。
   做法：不给问答段加类，直接用结构选择器命中——凡是段内直接放折叠问答的
        整段，容器自动切成两栏。
   兼容：不支持 :has() 的旧浏览器会退化成「标题居中 + 内容整栏」，比原来的
        限宽窄栏更宽，不会破版。
   ========================================================================== */

/* 容器：切成左右两栏，右栏吃掉剩余宽度。
   行高写成 auto + 1fr 两档：右栏跨两行时，多出来的高度全部落到第二行，
   左栏的说明文字与装饰圆环才会紧贴顶部，不会被均摊着往下推。 */
.ifu-band:has(> .container > .ifu-accordion) > .container {
    display: grid;
    grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    column-gap: clamp(28px, 3.2vw, 52px);
    align-items: start;
}

/* 左栏说明：取消居中与限宽，改为左对齐，并用一条品牌绿竖线起头 */
.ifu-band:has(> .container > .ifu-accordion) > .container > .ifu-head {
    grid-column: 1;
    grid-row: 1;
    max-width: none;
    margin: 0;
    padding-left: 20px;
    border-left: 3px solid #10B981;
    text-align: left;
}

/* 左栏装饰：虚线圆环套静态标志，补住说明文字下方的空白 */
.ifu-band:has(> .container > .ifu-accordion) > .container::after {
    content: '';
    display: block;
    justify-self: start;
    grid-column: 1;
    grid-row: 2;
    width: clamp(112px, 12vw, 152px);
    aspect-ratio: 1 / 1;
    margin-top: clamp(28px, 3.4vw, 46px);
    border: 1px dashed #A7F3D0;
    border-radius: 50%;
    background: url(../img/fox/ifu-logo-static-green-v1.svg) center / 58% no-repeat;
}

/* 右栏：折叠问答，跨两行占满右栏 */
.ifu-band:has(> .container > .ifu-accordion) > .container > .ifu-accordion {
    grid-column: 2;
    grid-row: 1 / span 2;
    min-width: 0;
}

/* 窄屏：退回单列堆叠，左栏在上、内容在下，装饰圆环隐去 */
@media (max-width: 991px) {
    .ifu-band:has(> .container > .ifu-accordion) > .container {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto;
    }

    .ifu-band:has(> .container > .ifu-accordion) > .container > .ifu-head {
        grid-column: 1;
        grid-row: auto;
        margin-bottom: 26px;
    }

    .ifu-band:has(> .container > .ifu-accordion) > .container > .ifu-accordion {
        grid-column: 1;
        grid-row: auto;
    }

    .ifu-band:has(> .container > .ifu-accordion) > .container::after {
        display: none;
    }
}

/* ==========================================================================
   16. 首页进入动画补齐
   背景：全站的进入动画由 WOW.js 驱动（见 main.js 的初始化调用）——元素带上
        相应类名后，脚本先把它设为不可见，等滚动到它的位置再补上动画类，
        播放一次淡入位移。此前首页只有卡片类元素带了这些类，标题组、场景
        图墙、左侧配图、路径条、收尾引导段都是静默出现的，滚动时一段有一
        段没有，节奏是断的。
   做法：需要动画的元素统一在模板（index.html）上补类，本节点只做两件
        模板做不到的事：
          1. 由循环生成的列表拿不到循环序号，写不了逐个变化的延迟类，
             改为按元素位置补延后，与软件卡（见第 6 节）用的是同一手法；
          2. 尊重系统里的「减少动态效果」设置：此时脚本仍会把元素设成
             不可见，必须用带 !important 的规则把它强制显出来，
             否则动画一取消，这些元素就永久看不见了。
   ========================================================================== */

/* Hero 右侧配图：Conzex 给它单独写了 2s 时长（为旧模板的入场动画准备的），
   与全站进入动画的 1s 节奏不一致，这里收敛回统一时长 */
.hero-section .hero-animation-image {
    animation-duration: 1s;
}

/* 场景图墙：三张大图自左向右依次登场 */
.ifu-wall > li:nth-child(1) {
    animation-delay: .05s;
}

.ifu-wall > li:nth-child(2) {
    animation-delay: .18s;
}

.ifu-wall > li:nth-child(3) {
    animation-delay: .31s;
}

/* 路径条：四步按顺序推进，间隔比图墙更密，读起来有推进感 */
.ifu-steps > li:nth-child(1) {
    animation-delay: .05s;
}

.ifu-steps > li:nth-child(2) {
    animation-delay: .16s;
}

.ifu-steps > li:nth-child(3) {
    animation-delay: .27s;
}

.ifu-steps > li:nth-child(4) {
    animation-delay: .38s;
}

/* 案例卡：与软件卡同一手法，按卡片位置补延后 */
.blog-section .row > div:nth-child(2) .customFadeInUp {
    animation-delay: .16s;
}

.blog-section .row > div:nth-child(3) .customFadeInUp {
    animation-delay: .32s;
}

/* 系统开启「减少动态效果」时：取消所有进入动画并强制显示，
   避免元素停在动画起始状态（透明度 0 或不可见）而看不到内容 */
@media (prefers-reduced-motion: reduce) {
    .wow,
    .wow.animated {
        visibility: visible !important;
        animation: none !important;
    }
}

/* ==========================================================================
   18. 窄屏修补：按钮错位、页脚标志对齐、装饰元素隐藏
   三处问题都只在窄屏暴露：并列按钮换行后仍带着 + 选择器的左外边距、页脚标志
   被图片的 auto 外边距推到一侧、页头装饰圆托溢出到段外并压住面包屑。
   ========================================================================== */

/* 18.1 全宽 CTA 的并列按钮：窄屏改为整宽上下排列。
   原来两个按钮同行，放不下时后一个换行仍带 + 选择器给的 14px 左外边距，
   于是比上一个缩进一截、两个按钮左边界对不齐；整宽堆叠后左边界始终一致 */
@media (max-width: 767px) {
    .cta-two-text .btn-bg4 {
        display: block;
        width: 100%;
        margin-left: 0;
        margin-bottom: 12px;
        text-align: center;
    }

    .cta-two-text .btn-bg4 + .btn-bg4 {
        margin-left: 0;
    }
}

/* 18.2 页脚标志：Conzex 在 576px 以下把标志图片设为 margin:auto 居中，
   而标志链接是 flex 容器，auto 外边距会把图片推到行的中部、文字挤到行尾，
   两者被拉开一整行；这里改为整组居中，并清掉图片的 auto 外边距 */
@media (max-width: 575.98px) {
    .footer-logo > a {
        justify-content: center;
    }

    .footer-logo img {
        margin: 0;
    }
}

/* ==========================================================================
   19. 会员中心：用户中心 / 资料修改
   背景：会员两页此前只借用登录页的零散样式，左栏会员卡、右栏内容块、
        下载条目、资料表单都没有对应规则，整页处于无样式状态。
   结构：两页共用同一套「左栏会员卡 + 站内导航 / 右栏内容面板」，
        区别只在右栏内容（概览 + 下载 + 文档入口 / 资料表单）。
   做法：本节按现有的白卡 + 细描边（0.7px #E0E0F2）+ 4px 圆角视觉语言
        统一补齐，不引入新的颜色与圆角规格。
   ========================================================================== */

/* --- 19.1 左栏：会员卡 + 站内导航 --- */

/* 会员卡与导航：右栏内容比左栏长，滚动时让导航吸在视口内不被滚走 */
.ifu-member-side {
    position: sticky;
    top: 120px;
}

.ifu-member-card {
    padding: 32px 26px 28px;
    text-align: center;
    background-color: #FFFFFF;
    border: 0.7px solid #E0E0F2;
    border-radius: 4px;
}

/* 头像：后台没传头像时会回退到站点标志，非方形，用等比裁剪裁成圆形不留白边 */
.ifu-member-avatar {
    width: 88px;
    height: 88px;
    object-fit: cover;
    background-color: #F6F8FA;
    border: 0.7px solid #E0E0F2;
    border-radius: 50%;
}

.ifu-member-card h5 {
    margin: 16px 0 10px;
    font-size: 18px;
    line-height: 1.5;
    word-break: break-all;
}

.ifu-member-nav {
    margin: 20px 0 0;
    padding: 0;
    list-style: none;
    background-color: #FFFFFF;
    border: 0.7px solid #E0E0F2;
    border-radius: 4px;
    overflow: hidden;
}

.ifu-member-nav li + li {
    border-top: 0.7px solid #E0E0F2;
}

.ifu-member-nav a {
    display: block;
    padding: 15px 22px;
    font-size: 15px;
    font-weight: 600;
    color: #475569;
    transition: .25s;
}

.ifu-member-nav a:hover {
    color: #047857;
    background-color: #F6F8FA;
}

/* 当前页高亮：淡绿底 + 左侧竖条，竖条用内阴影实现，不占额外一列宽度 */
.ifu-member-nav li.active a {
    color: #047857;
    background-color: #ECFDF5;
    box-shadow: inset 3px 0 0 #10B981;
}

/* --- 19.2 右栏：内容面板 --- */

.ifu-member-panel {
    padding: 34px 32px 36px;
    background-color: #FFFFFF;
    border: 0.7px solid #E0E0F2;
    border-radius: 4px;
}

.ifu-member-panel + .ifu-member-panel {
    margin-top: 24px;
}

/* 面板内的标题组改为左对齐：.ifu-head 默认居中并限宽 780px，
   落在白卡里会与下方表格、列表的中轴线错开 */
.ifu-member-panel .ifu-head {
    max-width: none;
    margin: 0 0 26px;
    text-align: left;
}

.ifu-member-panel .ifu-head h2 {
    font-size: 22px;
}

/* 面板内的指标格收窄内边距，一屏内能多放几格 */
.ifu-member-panel .ifu-metric {
    flex: 1 1 170px;
    padding: 18px 20px;
}

.ifu-member-panel .ifu-metric b {
    font-size: 12px;
    letter-spacing: .06em;
}

/* 我的下载：每行一个软件，左侧图标与文字、右侧下载按钮 */
.ifu-downloads {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ifu-download {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 18px 20px;
    background-color: #F6F8FA;
    border: 0.7px solid #E0E0F2;
    border-radius: 4px;
}

.ifu-download-main {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.ifu-download-ico {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    object-fit: contain;
    background-color: #FFFFFF;
    border: 0.7px solid #E0E0F2;
    border-radius: 4px;
}

.ifu-download h6 {
    margin: 0 0 4px;
    font-size: 16px;
    line-height: 1.5;
}

.ifu-download p {
    margin: 0;
    font-size: 13px;
    line-height: 1.7;
    color: #64748B;
}

/* 下载按钮：.btn-bg2 的 min-width 170px 在条目里会把按钮撑得过宽，
   这里按条目内的尺寸收紧；中文站点同时去掉大写转换 */
.ifu-download-btn {
    flex: 0 0 auto;
    min-width: 0;
    padding: 12px 22px;
    font-size: 14px;
    text-transform: none;
}

/* 安装包未上传时的占位文字，与下载按钮占同一位置，避免行高跳变 */
.ifu-download-na {
    flex: 0 0 auto;
    font-size: 13px;
    color: #94A3B8;
}

.ifu-member-foot {
    margin: 22px 0 0;
    font-size: 14px;
    line-height: 1.8;
    color: #64748B;
}

.ifu-member-foot a {
    font-weight: 600;
    color: #047857;
}

/* --- 19.3 操作结果提示页 --- */

/* 结果卡片：图标、标题、说明、倒计时、主按钮自上而下居中排列 */
.ifu-tips-card {
    padding: 46px 40px 44px;
}

.ifu-tips-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 68px;
    height: 68px;
    margin: 0 auto 22px;
    color: #0B7A55;
    background-color: #F0FBF7;
    border: 1px solid #10B981;
    border-radius: 50%;
}

.ifu-tips-icon svg {
    width: 32px;
    height: 32px;
}

/* 面板内的标题组默认左对齐，结果页恢复居中并去掉默认下边距 */
.ifu-tips-card .ifu-head {
    max-width: none;
    margin: 0;
    text-align: center;
}

.ifu-tips-card .ifu-head h2 {
    font-size: 24px;
}

.ifu-tips-card .ifu-head p {
    margin-left: auto;
    margin-right: auto;
}

/* 倒计时文字用弱色，避免与主按钮抢注意力 */
.ifu-tips-time {
    margin: 18px 0 26px;
    font-size: 13px;
    color: #94A3B8;
}

/* --- 19.4 资料修改表单 --- */

.ifu-form-row {
    margin-bottom: 22px;
}

.ifu-form-row > label {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #1E293B;
}

/* 「必填」标记：用强调色提示，但不做成按钮样式 */
.ifu-form-row > label em {
    margin-left: 8px;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    color: #DC2626;
}

.ifu-form-row input[type="text"],
.ifu-form-row input[type="email"],
.ifu-form-row input[type="password"] {
    width: 100%;
    padding: 15px 18px;
    font-size: 15px;
    color: #1E293B;
    background-color: #FFFFFF;
    border: 0.7px solid #E0E0F2;
    border-radius: 4px;
    transition: .25s;
}

.ifu-form-row input:focus {
    border-color: #10B981;
    outline: none;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, .12);
}

.ifu-form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin-top: 30px;
    padding-top: 26px;
    border-top: 0.7px solid #E0E0F2;
}

.ifu-form-actions .btn-bg2,
.ifu-form-actions .btn-bg4 {
    min-width: 0;
    padding: 15px 34px;
    font-size: 15px;
    text-transform: none;
}

/* 次要按钮是白底绿字，落在白色面板里没有轮廓，补一层描边 */
.ifu-form-actions .btn-bg4 {
    color: #047857;
    border: 1px solid #10B981;
}

/* 头像选择：左侧预览、右侧按钮与提示 */
.ifu-avatar-picker {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
}

.ifu-avatar-picker img {
    width: 96px;
    height: 96px;
    object-fit: cover;
    background-color: #F6F8FA;
    border: 0.7px solid #E0E0F2;
    border-radius: 50%;
}

.ifu-avatar-ops {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

/* 原生文件框不直接暴露给用户，由「选择图片」按钮代为触发 */
.ifu-avatar-file {
    display: none;
}

.ifu-avatar-ops .btn-bg4 {
    min-width: 0;
    padding: 11px 26px;
    font-size: 14px;
    border: 1px solid #10B981;
}

.ifu-form-tip {
    font-size: 13px;
    line-height: 1.7;
    color: #94A3B8;
}

/* 表单内联提示条：会员各表单共用，替代浏览器原生 alert */
.ifu-form-alert {
    display: block;
    margin: 0 0 18px;
    padding: 12px 16px;
    font-size: 14px;
    line-height: 1.6;
    color: #B91C1C;
    background-color: #FEF2F2;
    border: 1px solid #FCA5A5;
    border-radius: 10px;
}

/* 需要显式声明，否则会被上面的 display:block 覆盖 */
.ifu-form-alert[hidden] {
    display: none;
}

.ifu-form-alert.is-ok {
    color: #0B7A55;
    background-color: #F0FBF7;
    border-color: #6EE7B7;
}

/* --- 19.5 会员页响应式 --- */

@media (max-width: 991px) {
    /* 平板起左栏落到正文上方，取消吸顶并补出与下方内容块的间距 */
    .ifu-member-side {
        position: static;
        margin-bottom: 24px;
    }

    .ifu-member-panel {
        padding: 28px 22px 30px;
    }
}

@media (max-width: 575.98px) {
    /* 窄屏下载条目改为上下排列，按钮撑满整行便于点按 */
    .ifu-download {
        flex-direction: column;
        align-items: flex-start;
    }

    .ifu-download-btn,
    .ifu-download-na {
        align-self: stretch;
        text-align: center;
    }

    .ifu-member-panel .ifu-metric {
        flex: 1 1 140px;
        padding: 14px 16px;
    }

    .ifu-form-actions .btn-bg2,
    .ifu-form-actions .btn-bg4 {
        width: 100%;
        text-align: center;
    }
}

/* ==========================================================================
   20. 登录 / 注册页右栏插图
   背景：Conzex 原做法是让插图用负边距溢出右栏、再用两块白色伪元素把溢出部分遮掉，
        在 1400px 以下的视口会横向撑出滚动条，插图也和左侧表单的中线对不齐。
   做法：不再让插图出血，整栏居中并随栏宽等比缩放；窄屏落到表单下方。
   ========================================================================== */

/* 插图栏：水平居中，垂直方向由该列的 align-items-center 与左侧表单对齐 */
.ifu-login-aside {
    justify-content: center;
}

/* 插图容器：限一个最大宽度，避免宽屏下插图过大压过表单 */
.ifu-login-illust {
    width: 100%;
    max-width: 440px;
}

.ifu-login-illust img {
    display: block;
    width: 100%;
    height: auto;
}

@media (max-width: 991px) {
    /* 窄屏两栏堆叠，插图落到表单下方，补出与表单之间的间距并居中 */
    .ifu-login-aside {
        margin-top: 36px;
    }

    .ifu-login-illust {
        max-width: 360px;
        margin: 0 auto;
    }
}

/* ==========================================================================
   21. 博客列表页（列表式排布）
   背景：原模板用 col-lg-4 三列网格，一行塞三张卡，中文标题长短不一导致卡片
        高度参差；新增配图后卡片会更松散，也不适合承载 16:10 的文章缩略图。
   做法：改成一行一篇的列表式排布 —— 左侧固定尺寸缩略图 + 右侧标题与摘要。
        缩略图外框写死尺寸、内部图片用 object-fit:cover 裁切填充，
        因此后台无论上传什么尺寸和比例的图，列表版式都不会被撑破。
   底部对齐：一行的高度以缩略图（200px，平板 163px）为准。右侧文字区改成纵向
        flex 并随行拉伸到满高，日期与「阅读全文」那一行用 margin-top:auto
        顶到底部，于是脚注始终与缩略图下沿齐平 —— 标题和摘要偏短的条目，
        脚注也不会悬在条目中间。文字比缩略图更高的条目（长标题多行时），
        行高以文字为准，缩略图保持自身尺寸不动。
   ========================================================================== */

.ifu-post-list {
    margin-top: 8px;
}

/* 单条：左图右文，条目之间用细分隔线区分。
   align-items 用 stretch（不改回 flex-start）：让右侧文字区自动拉伸到与
   缩略图等高，脚注才有"底部"可以贴；缩略图自身写死了高度，不会跟着被拉长 */
.ifu-post-item {
    display: flex;
    align-items: stretch;
    padding: 28px 0;
    border-bottom: 0.7px solid #E0E0F2;
}

.ifu-post-item:first-child {
    padding-top: 0;
}

.ifu-post-item:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

/* 缩略图外框：固定 320×200（16:10），图片超出部分裁切，
   框内先用浅灰兜底，图片未加载完时不会露出白块 */
.ifu-post-thumb {
    display: block;
    flex: 0 0 320px;
    width: 320px;
    height: 200px;
    margin-right: 28px;
    overflow: hidden;
    border: 0.7px solid #E0E0F2;
    border-radius: 4px;
    background: #F3F4F6;
}

.ifu-post-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 正文区：占满剩余宽度；min-width:0 防止长标题把 flex 项撑破。
   纵向 flex 是为了让最后一行脚注能贴到底部（见 .ifu-post-meta 的 margin-top:auto） */
.ifu-post-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.ifu-post-title {
    margin: 2px 0 10px;
    font-size: 20px;
    line-height: 1.5;
}

.ifu-post-title a {
    color: #1E293B;
}

.ifu-post-title a:hover {
    color: #047857;
}

/* 摘要固定最多三行，超出省略，保证每条列表高度接近 */
.ifu-post-summary {
    margin-bottom: 14px;
    color: #64748B;
    line-height: 1.85;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 脚注行：日期 + 阅读全文。margin-top:auto 吃掉正文区剩余空间，
   把它顶到条目底部，与左侧缩略图下沿齐平；空间不够时 auto 变 0，
   仍保留摘要自身的 14px 间距，不会贴在一起 */
.ifu-post-meta {
    margin-top: auto;
    font-size: 14px;
    color: #94A3B8;
}

.ifu-post-meta .ifu-post-more {
    margin-left: 18px;
}

.ifu-post-meta .ifu-post-more a {
    color: #047857;
}

@media (max-width: 991px) {
    /* 平板：缩略图收窄到 260×163，仍是 16:10，标题字号降一档 */
    .ifu-post-thumb {
        flex: 0 0 260px;
        width: 260px;
        height: 163px;
        margin-right: 22px;
    }

    .ifu-post-title {
        font-size: 18px;
    }
}

@media (max-width: 575.98px) {
    /* 手机：改为上图下文，图片占满整行但高度写死，避免不同比例图片把版式拉歪 */
    .ifu-post-item {
        display: block;
    }

    .ifu-post-thumb {
        width: 100%;
        height: 180px;
        margin: 0 0 16px;
    }

    .ifu-post-title {
        margin-top: 0;
    }

    .ifu-post-summary {
        -webkit-line-clamp: 4;
    }
}

/* ==========================================================================
   22. 首页技术文章区块（两列大图）
   布局：沿用 Conzex blog-grid-2col 的做法 —— col-lg-6 两列铺开，
        卡片宽度约为案例区块（三列）的 1.5 倍，图片明显更大。
   图片：外框固定 16:10 比例，随卡片宽度自动缩放，内部按 object-fit 裁切填充，
        因此后台无论上传什么尺寸的配图都不会撑破卡片；
        这里不用固定像素高度，是因为两列卡片宽度在不同断点变化较大，
        写死高度反而会在中间档位出现比例失真。
   ========================================================================== */

/* 缩略图外框：16:10，框内先铺浅灰，图片未加载完时不露白块 */
.ifu-home-post .blog-thumb {
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #F3F4F6;
}

/* 图片填满外框并按比例裁切；保留 Conzex 的 hover 缩放过渡 */
.ifu-home-post .blog-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 内容区：两列卡片比案例的三列宽，内边距略收一点 */
.ifu-home-post .news-inner {
    padding: 30px 30px 24px;
}

/* 标题与摘要各限两行，保证同排两张卡片高度接近 */
.ifu-home-post .news-inner h5,
.ifu-home-post .news-text p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ifu-home-post .news-inner h5 {
    -webkit-line-clamp: 2;
}

.ifu-home-post .news-text p {
    -webkit-line-clamp: 2;
    margin-bottom: 0;
}

/* 日期行：与摘要拉开一点距离 */
.ifu-home-post .admin-by {
    margin-top: 14px;
    padding-bottom: 0;
}

@media (max-width: 575.98px) {
    /* 手机端卡片变成整行，内边距再收一档，避免正文区过窄 */
    .ifu-home-post .news-inner {
        padding: 22px 20px 18px;
    }
}

/* ==========================================================================
   23. 区块装饰（右侧上下飘动的两个圆点）
   原先只有首页和软件列表页带这套装饰，内页全都没有。现抽成通用类：
   给区块加上 .ifu-deco（只负责 position:relative，提供定位上下文），
   再 include 片段 shape-deco.html，就能获得与软件区完全一致的圆点与飘动。
   定位和动画沿用模板原有的那套（right:184px、top:60%/40%、两组 animation），
   不做改动，保证内页与软件区观感相同；圆点在片段上由 d-none d-xl-block 控制，
   xl 以下不输出显示，避免小屏压住内容。
   ========================================================================== */

.ifu-deco {
    position: relative;
}

.ifu-deco .ifu-deco-round {
    position: absolute;
    right: 184px;
    top: 60%;
    -webkit-animation: animationRoundTopBottom 25s infinite linear;
    animation: animationRoundTopBottom 25s infinite linear;
}

.ifu-deco .ifu-deco-round-small {
    position: absolute;
    right: 184px;
    top: 40%;
    -webkit-animation-delay: 2s;
    animation-delay: 2s;
    -webkit-animation: animationRoundTopBottomTwo 15s infinite linear;
    animation: animationRoundTopBottomTwo 15s infinite linear;
}

/* 素材是同一套粉色位图，靠色相旋转转成品牌绿：
   大圆整体旋转，小圆再压一档饱和度，两颗圆点才有层次 */
.ifu-deco .ifu-deco-round img {
    filter: hue-rotate(-90deg);
}

.ifu-deco .ifu-deco-round-small img {
    filter: hue-rotate(-90deg) saturate(.72);
}

/* ==========================================================================
   24. 关于页与联系页的补全模块
   ========================================================================== */

/* 24.1 正文之后的三张判断卡（关于页）
   正文区是 8+4 两栏栅格，收尾在栅格底部，直接接三张卡会贴在一起，
   这里单独给出一档上间距，不再借用 Bootstrap 的 mt-* 工具类 */
.ifu-metrics-after-text {
    margin-top: 52px;
}

/* 24.2 入口标签改成链接后的悬停反馈
   .ifu-tag 原本只当标签用（span），关于页把它当入口（a），
   补上悬停态，避免出现「能点但看不出能点」的标签 */
a.ifu-tag:hover {
    color: #FFFFFF;
    background-color: #10B981;
}

/* 24.3 联系页「联系与咨询」合并模块（深绿底）
   联系页下方是灰底的合作方式与白底的响应流程，本段用深绿底收尾，
   与页头、页尾 CTA 同一套渐变，成为整页唯一的高对比区块；
   模块内部左右分栏：左栏直接联系、右栏提交需求表单，
   两栏在 992px 以下由栅格自动上下堆叠，无需额外断点 */
.ifu-contact-band {
    background: linear-gradient(120deg, #064E3B 0%, #059669 100%);
}

/* 深底上的标题组：眉标用浅绿，正文用带透明度的白，保证对比度达标 */
.ifu-contact-band .ifu-kicker {
    color: #A7F3D0;
}

.ifu-contact-band .ifu-head h2 {
    color: #FFFFFF;
}

.ifu-contact-band .ifu-head p {
    color: rgba(255, 255, 255, .78);
}

/* 24.4 左栏联系方式：改为纵向条目
   原先三张卡片横向铺满整宽，现在并入左栏，横排会挤成窄条，
   因此改为一行一条（图标 + 小标题 + 内容），信息密度更高也更好读 */
.ifu-contact-lines {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 12px;
}

.ifu-contact-lines li {
    display: flex;
    align-items: flex-start;
    padding: 16px 20px;
    background-color: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 4px;
}

.ifu-contact-lines li i {
    flex: 0 0 auto;
    width: 34px;
    padding-top: 2px;
    font-size: 18px;
    color: #A7F3D0;
}

.ifu-contact-lines b {
    display: block;
    margin-bottom: 4px;
    font-size: 15px;
    color: #FFFFFF;
}

.ifu-contact-lines span {
    display: block;
    font-size: 14px;
    line-height: 1.8;
    color: rgba(255, 255, 255, .8);
}

/* 电话与邮箱要能直接拨打、直接发信，用下划线标出可点，
   悬停回到浅绿，与眉标同色 */
.ifu-contact-lines a {
    color: #FFFFFF;
    border-bottom: 1px solid rgba(255, 255, 255, .38);
}

.ifu-contact-lines a:hover {
    color: #A7F3D0;
    border-bottom-color: #A7F3D0;
}

/* 24.5 右栏表单卡片
   模板 15 节的表单控件按整宽设计（输入框 70px、多行框 230px、
   字段间距 35px），直接放进 5/12 窄栏会显得笨重，
   因此在深绿底上包一层白卡，并在卡内把控件与间距整体压缩 */
.ifu-contact-form {
    padding: 28px 26px 26px;
    background-color: #FFFFFF;
    border-radius: 4px;
}

.ifu-contact-form h5 {
    margin-bottom: 6px;
    font-size: 17px;
}

.ifu-contact-form-tip {
    margin-bottom: 18px;
    font-size: 13px;
    line-height: 1.7;
    color: #64748B;
}

/* 字段之间的垂直间距：输入框压到 46px 后，原来的 35px 会显得松散，
   但压到 10px 出头又会黏在一起，这里取 18px，上下留白看起来才均衡 */
.ifu-contact-form .contact-form .form-group {
    margin-bottom: 18px;
}

.ifu-contact-form .contact-form .form-group input[type="text"],
.ifu-contact-form .contact-form .form-group textarea {
    height: 46px;
    padding: 8px 14px;
    font-size: 14px;
}

.ifu-contact-form .contact-form .form-group textarea {
    height: 84px;
    padding: 12px 14px;
}

/* 验证码图默认按 70px 输入框定高，这里跟随压缩后的 46px 一起收窄，
   否则图片会比旁边的输入框高出一截 */
.ifu-contact-form .contact-form .form-group.ifu-checkcode-group img {
    flex: 0 0 104px;
    height: 46px;
}

.ifu-contact-form .contact-form .form-group:last-child {
    margin-bottom: 0;
}

/* 提交按钮跟随压缩后的字号，与上方字段宽度保持一致 */
.ifu-contact-form .contact-form .btn-bg {
    width: 100%;
    padding: 11px 20px;
    font-size: 14px;
}

/* 表单卡片在窄栏里再收一档内边距，避免小屏上留白过多 */
@media (max-width: 991px) {
    .ifu-contact-form {
        margin-top: 34px;
        padding: 24px 20px 22px;
    }
}

/* ==========================================================================
   25. 页脚：「联系」列与底部条款行
   ========================================================================== */

/* 25.1 页脚「联系」列：联系人 / 电话 / 邮箱
   三行都由图标起头，图标固定宽度，后面的文字左边缘才能对齐；
   行距沿用 links-widget 内链接自带的上下内边距，
   因此纯文本行（联系人）补同样的内边距，三行基线才一致；
   白底深灰文字，图标用品牌绿，链接悬停同色，与底部条款行统一 */
.ifu-footer-contact li {
    display: flex;
    align-items: center;
}

.ifu-footer-contact li i {
    flex: 0 0 18px;
    text-align: center;
    font-size: 14px;
    color: #10B981;
}

.ifu-footer-contact li span {
    padding: 5.3px 0;
    color: #727B9A;
}

.ifu-footer-contact li a:hover {
    color: #10B981;
}

/* 该列沿用了 links-widget 的链接样式，而它会给链接加首字母大写，
   邮箱会被显示成 Hi@Ifu.Me，与后台填写的地址对不上，这里还原为原样输出 */
.footer-widget.links-widget .list.ifu-footer-contact li a {
    text-transform: none;
}

/* 25.2 底部条款行：备案号 + 隐私政策 / 用户协议 / Cookie 政策 + 网站地图
   用 flex 自动换行，窄屏逐项折行，不必单独写移动端断点 */
.ifu-footer-legal {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px 18px;
    font-size: 14px;
}

.ifu-footer-legal a {
    color: #64748B;
}

.ifu-footer-legal a:hover {
    color: #10B981;
}

/* 25.3 版权行：排在条款行上方，两行字号一致、颜色略浅，
   与下方条款行保持 10px 间距 */
.ifu-footer-copy {
    margin-bottom: 10px;
    font-size: 14px;
    color: #94A3B8;
}

/* 25.4 底部信息行的底部留白
   原模板给 .footer-bottom 留了 100px 空白，现在底部只有两行文字，
   收窄到 60px，页脚最下方不再出现过大空档 */
.footer-bottom {
    padding-bottom: 60px;
}

/* 25.5 关于页只用两张公司信息卡时的限宽
   两卡各占一半会显得空，收窄到 880px 后信息密度与三卡版本一致 */
.ifu-metrics--pair {
    max-width: 880px;
    margin-right: auto;
    margin-left: auto;
}

/* ==========================================================================
   26. 组内错落入场：指标卡 / 步骤条 / 问答条
   这三类模块的条目数量由后台数据决定（问答条尤其如此），模板里没办法逐条
   写延迟类，因此按序号统一给前六条递增一点延迟，由 CSS 控制节奏；
   档位与模板里显式写的 delay-0-Xs 保持一致（每档 0.1s），
   两种写法同时存在时取到的是同一档，不会互相打架。
   说明：这些条目只在带 wow 类播放动画时才会用到 animation-delay，
        即使某一组没加 wow，这里的声明也不会有副作用。
   ========================================================================== */
.ifu-metrics .ifu-metric:nth-child(2),
.ifu-steps li:nth-child(2),
.ifu-accordion .accordion-block-two:nth-child(2) {
    animation-delay: .1s;
}

.ifu-metrics .ifu-metric:nth-child(3),
.ifu-steps li:nth-child(3),
.ifu-accordion .accordion-block-two:nth-child(3) {
    animation-delay: .2s;
}

.ifu-metrics .ifu-metric:nth-child(4),
.ifu-steps li:nth-child(4),
.ifu-accordion .accordion-block-two:nth-child(4) {
    animation-delay: .3s;
}

.ifu-metrics .ifu-metric:nth-child(5),
.ifu-steps li:nth-child(5),
.ifu-accordion .accordion-block-two:nth-child(5) {
    animation-delay: .4s;
}

.ifu-metrics .ifu-metric:nth-child(6),
.ifu-steps li:nth-child(6),
.ifu-accordion .accordion-block-two:nth-child(6) {
    animation-delay: .5s;
}