/* ============================================================
   PLM + ERP 一体化系统 · product-integrated.css
   页面专属样式：先引入共享 pf- 基础，再做本页微调
   ============================================================ */
@import url('/css/products.css?v=20261002');


/* ============================================================
   Banner：深色背景图 /images/bg1.jpg（2000×500，原名引用）
   高 500px；背景图按高 500px 等比、水平居中显示，
   视口宽于 2000px 时两侧回落背景色 #070d0d
   ============================================================ */
.pf-hero {
    height: 500px;
    background-color: #070d0d;
    background-image: url('/images/bg1.jpg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: auto 100%;
}

/* 共享层的浅色蒙版服务于视频背景，深色图下直接移除 */
.pf-hero::before {
    display: none;
}

/* 单列布局，内容左对齐、垂直居中 */
.pf-hero .pf-hero-grid {
    grid-template-columns: 1fr;
    gap: 0;
    height: 100%;
    padding: 40px 24px;
    align-items: center;
    text-align: left;
}

/* 深色底上的文字对比 */
.pf-hero h1 {
    font-size: clamp(36px, 3.9vw, 50px);
    color: #fff;
}
.pf-hero h1 em {
    color: #69B4FF;
}
.pf-hero .pf-slogan {
    color: #F0F6FF;
}
.pf-hero .pf-lead {
    max-width: 760px;
    color: rgba(255, 255, 255, .8);
}
.pf-hero .pf-actions {
    justify-content: flex-start;
    margin-bottom: 0;
}
.pf-hero .pf-btn-ghost {
    background: rgba(255, 255, 255, .06);
    color: #fff;
    border-color: rgba(255, 255, 255, .42);
}
.pf-hero .pf-btn-ghost:hover {
    border-color: #fff;
    color: #fff;
}

/* 响应式：压缩间距与字号，保证内容控制在 500px 内 */
@media (max-width: 900px) {
    .pf-hero .pf-hero-grid {
        padding: 32px 20px;
    }
}
@media (max-width: 768px) {
    .pf-hero .pf-hero-grid {
        padding: 30px 20px;
    }
    .pf-hero .pf-slogan {
        font-size: 1.0625rem;
        margin-bottom: 12px;
    }
    .pf-hero .pf-lead {
        font-size: .875rem;
        line-height: 1.75;
        margin-bottom: 20px;
    }
    .pf-hero .pf-actions {
        gap: 10px;
    }
}


/* -- 三层架构：纵向强调“底座 → 交付”的贯通关系 -- */
#architecture .pf-layers {
    counter-reset: layer;
}

/* -- 核心功能：1 行 3 列 × 2 行，6 张卡片铺满 -- */
#features .pf-feats {
    grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 1200px) {
    #features .pf-feats {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    #features .pf-feats {
        grid-template-columns: 1fr;
    }
}

/* -- 核心功能卡片：跨子系统跳转链接加重 -- */
#features .pf-feat .more a {
    font-weight: 600;
}



/* ============================================================
   最佳实践：深色底 + 视频背景，按外贸形态 5 卡
   ============================================================ */

/* 深色底兜底，视频未加载时回落深色 */
#practices {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background-color: #0F172A;
}


#practices .pf-head h2 {
    color: #fff;
}

/* 5 卡一行铺满；中屏 3 列、窄屏 2 列 / 1 列 */
#practices .pf-prac {
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
}

@media (max-width: 1200px) {
    #practices .pf-prac {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 900px) {
    #practices .pf-prac {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 560px) {
    #practices .pf-prac {
        grid-template-columns: 1fr;
    }
}

/* 卡片：深色半透明底 + 浅色细描边，浮于背景图之上 */
#practices .pf-prac-c {
    background: rgba(15, 23, 42, .72);
    border: 1px solid rgba(148, 163, 184, .28);
    border-radius: 14px;
    padding: 22px 18px;
    transition: transform .22s, border-color .22s, box-shadow .22s;
}

#practices .pf-prac-c:hover {
    transform: translateY(-5px);
    border-color: rgba(145, 202, 255, .6);
    box-shadow: 0 20px 40px -18px rgba(0, 0, 0, .65);
}

/* 子标题：亮蓝胶囊小标签 */
#practices .pf-prac-c .sub {
    display: inline-block;
    padding: 3px 10px;
    margin-bottom: 10px;
    border-radius: 100px;
    background: rgba(64, 150, 255, .16);
    border: 1px solid rgba(145, 202, 255, .38);
    color: #91CAFF;
    font-size: .75rem;
    font-weight: 600;
    line-height: 1.6;
}

/* 次级标题：白色（H5 级 16px） */
#practices .pf-prac-c .tt {
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.55;
    margin-bottom: 8px;
}

/* 正文：14px，浅灰保证深色底上的对比度 */
#practices .pf-prac-c p {
    font-size: .875rem;
    line-height: 1.75;
    color: #CBD5E1;
}