* {
        box-sizing: border-box;
    }

    body {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
        color: #425066;
        line-height: 1.6;
        margin: 0;
        padding: 0;
    }

    .banner {
        min-height: 90vh;
        background: linear-gradient(rgba(66, 80, 102, 0.7), rgba(66, 80, 102, 0.7)),
        url("/static/index/images/bg.png") bottom center no-repeat;
        background-size: cover;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        color: #fff;
        padding: 2rem 0;
    }

    .banner h1 {
        color: #ffffff;
        font-size: 3.0rem;
        font-weight: 700;
        margin-bottom: 1.5rem;
        line-height: 1.2;
        text-align: left;
    }

    .banner h2 {
        color: #cbd5e1;
        font-size: 1.5rem;
        font-weight: 300;
        margin-bottom: 2.5rem;
        max-width: 600px;
        text-align: left;
    }

    .banner-text {
        position: relative;
        top: auto;
        transform: none;
        margin: 0 auto;
        padding: 0 15px;
        text-align: center;
    }

    .banner-img {
        position: relative;
        top: auto;
        transform: none;
        margin: 2rem auto 0;
        text-align: center;
    }

    .banner-img img {
        max-width: 100%;
        height: auto;
    }

    .banner-btn-group {
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
        justify-content: left;
        margin-top: 2rem;
    }

    .advantage {
        padding: 4rem 0;
        background-color: #fff;
    }

    .advantage .item-wrap {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* 调整最小宽度为280px */
        gap: 2rem;
        margin-top: 2rem;
        padding: 0 1rem; /* 增加左右内边距避免贴边 */
    }

    .advantage .box {
        padding: 1.5rem;
        border-radius: 8px;
        box-shadow: 0 2px 12px rgba(1, 41, 112, 0.1);
        height: 100%;
        transition: transform 0.3s ease;
        border-left: 4px solid #2563eb; /* 蓝色主色调 */
        background: #f8fafc; /* 浅背景突出内容 */
    }

    .advantage .box:hover {
        transform: translateY(-5px);
        box-shadow: 0 4px 20px rgba(1, 41, 112, 0.15);
    }

    .advantage .box h3 {
        font-size: 1.25rem;
        color: #012970;
        margin-bottom: 0.75rem;
    }

    .advantage .box p {
        font-size: 0.95rem;
        color: #646464;
        margin: 0;
    }


    /* 功能矩阵区域*/
    .function-matrix {
        padding: 5rem 0;
        background-color: #f8fafc;
    }

    .matrix-container {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 2rem;
    }

    /* 默认阴影强化*/
    .matrix-item {
        background: #ffffff;
        padding: 2.5rem 2rem;
        border-radius: 1rem;
        border-top: 4px solid #2563eb; /* 商务蓝主色调 */
        transition: all 0.3s ease; /* 更平滑的过渡 */
        position: relative;
        box-shadow: 0 2px 8px rgba(37, 99, 235, 0.05); /* 默认轻微阴影 */
    }

    /* 科技感光效（弱化动态，强化质感） */
    .matrix-item::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 4px; /* 与顶部边线同高 */
        background: linear-gradient(90deg,
        transparent 0%,
        rgba(37, 99, 235, 0.1) 50%,
        transparent 100%
        );
        opacity: 0; /* 默认隐藏 */
        transition: opacity 0.3s ease;
    }

    /* 悬停效果 */
    .matrix-item:hover {
        transform: translateY(-3px); /* 轻微上移（更稳重） */
        box-shadow: 0 6px 16px rgba(37, 99, 235, 0.12); /* 加深阴影但不夸张 */
    }

    .matrix-item:hover::before {
        opacity: 1; /* 显示顶部光效 */
    }

    .matrix-item h3 {
        color: #1e293b;
        font-size: 1.5rem;
        margin-bottom: 1.5rem;
        position: relative;
        display: inline-block; /* 关键：让下划线宽度匹配文字 */
    }

    /* 调整：文字下划线（非贯穿，仅覆盖文字宽度） */
    .matrix-item h3::after {
        content: '';
        position: absolute;
        bottom: -6px; /* 调整下划线与文字间距 */
        left: 0;
        width: 100%; /* 宽度等于文字内容宽度（因h3是inline-block） */
        height: 2px;
        background: #2563eb; /* 与顶部边线同色 */
        border-radius: 1px;
    }

    .matrix-item ul {
        list-style: none;
        margin: 0;
        padding-left: 0; /* 保持左对齐 */
    }

    .matrix-item li {
        color: #475569;
        font-size: 1rem;
        padding: 0.5rem 0; /* 减少垂直间距更紧凑 */
        display: flex;
        align-items: center;
        transition: all 0.2s ease;
    }

    /* 列表项悬停（商务微反馈） */
    .matrix-item li:hover {
        color: #2563eb; /* 悬停文字变蓝 */
        transform: translateX(3px); /* 轻微右移（更含蓄） */
    }

    .matrix-item li::before {
        content: '✓';
        color: #2563eb; /* 与主色调一致 */
        font-weight: bold;
        margin-right: 0.75rem;
        font-size: 1.125rem;
        transition: all 0.2s ease;
    }

    .matrix-item li:hover::before {
        transform: scale(1.1); /* 对勾微放大（更细腻） */
    }

    @media (max-width: 767.98px) {
        .matrix-item {
            padding: 2rem 1.5rem;
        }

        .matrix-item h3 {
            font-size: 1.375rem;
        }
    }


    /* 技术架构区域 */
    .tech-architecture {
        padding: 5rem 0;
        background-color: #ffffff;
    }

    .architecture-diagram {
        position: relative;
        padding-left: 2rem;
    }

    .tech-item {
        background: #f8fafc;
        padding: 2rem 1.5rem;
        border-radius: 0.75rem;
        margin-bottom: 2rem;
        position: relative;
        transition: all 0.3s ease;
    }

    .tech-item:hover {
        background: #eff6ff;
        transform: translateX(0.5rem);
    }

    .tech-item::before {
        content: '';
        position: absolute;
        left: -2rem;
        top: 50%;
        transform: translateY(-50%);
        width: 1rem;
        height: 1rem;
        border-radius: 50%;
        background: #2563eb;
    }

    .tech-item h3 {
        color: #1e293b;
        font-size: 1.5rem;
        margin-bottom: 1rem;
    }

    .tech-item p {
        color: #475569;
        font-size: 1rem;
        line-height: 1.7;
        margin: 0;
    }


    /* 响应式调整 */
    @media (max-width: 767.98px) {
        .banner {
            min-height: 70vh;
        }

        .banner h1 {
            font-size: 2rem;
        }

        .banner h2 {
            font-size: 1.125rem;
        }

        .banner-btn-group {
            flex-direction: column;
            align-items: center;
        }

        .section-header h2 {
            font-size: 1.75rem;
        }

        .section-header p {
            font-size: 1rem;
        }
    }

    /* 通用：所有section-header标题和副标题居中 */
    .section-header {
        text-align: center; /* 关键：强制内容居中 */
        max-width: 800px; /* 可选：限制最大宽度避免过长文本撑开 */
        margin: 0 auto; /* 可选：配合max-width实现更紧凑的居中 */
    }

    /* 标题与副标题的间距优化 */
    .section-header h2 {
        margin-bottom: 1rem; /* 标题与副标题的间距（原可能无或较小） */
        font-size: 2rem; /* 可选：调整标题字体大小（根据设计需求） */
    }

    .section-header p {
        margin: 0; /* 移除副标题默认边距（避免与标题间距过大） */
        font-size: 1.125rem; /* 可选：调整副标题字体大小 */
        color: #646464; /* 可选：设置副标题颜色（与主标题区分） */
    }