/* 基础样式重置 */
* {
    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 {
    width: 100%;
    min-height: 90vh;
    background: url("/static/index/pages/ingenious/img/bg.png") bottom center no-repeat;
    background-size: cover;
    border-bottom: 1px solid #f6f9ff;
    padding: 2rem 0;
}

.banner h1 {
    margin: 0;
    font-size: 48px;
    font-weight: 600;
    color: #323232;
    text-align: left;
}

.banner h2 {
    color: #646464;
    margin: 20px 0 0 0;
    font-size: 22px;
    font-weight: 100;
    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;
    background-color: #fff;
    box-shadow: 0 2px 12px rgba(1, 41, 112, 0.1);
    height: 100%;
    transition: transform 0.3s ease;
}

.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;
}

/* 适用场景区域优化（PC端8列） */
.check {
    padding: 4rem 0;
    background: #F9FBFE;
}

.check .item-wrap {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* 小屏幕默认自适应，最小200px */
    gap: 2rem; /* 初始间距（小屏幕） */
    margin-top: 2rem;
    padding: 0 1rem;
}

/* 平板（≥768px）显示4列 */
@media (min-width: 768px) {
    .check .item-wrap {
        grid-template-columns: repeat(4, 1fr);
        gap: 1.5rem;
    }
}

/* PC端（≥992px）显示8列 */
@media (min-width: 992px) {
    .check .item-wrap {
        grid-template-columns: repeat(8, 1fr);
        gap: 1rem; /* 缩小间距适应8列 */
        padding: 0 0.5rem; /* 减少容器内边距 */
    }
}

.check .li {
    padding: 1.25rem 0.75rem; /* 缩小项内边距 */
    border-radius: 8px;
    background-color: #fff;
    box-shadow: 0 2px 12px rgba(1, 41, 112, 0.1);
    height: 100%;
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column; /* 内容垂直排列 */
    align-items: center; /* 内容居中 */
    text-align: center;
    min-width: 0; /* 防止内容溢出 */
}

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

.check .li img {
    height: 30px; /* 缩小图片高度（原40px） */
    width: auto;
    margin-bottom: 0.75rem; /* 缩小图片与文字间距 */
    flex-shrink: 0; /* 图片不收缩 */
}

.check .li p {
    font-size: 0.875rem; /* 缩小文字大小（原0.95rem） */
    color: #20242b;
    margin: 0;
    flex-grow: 1; /* 文字区域占满剩余空间 */
    line-height: 1.4; /* 优化行高 */
}

/* 功能模块优化（PC端3列） */
.services {
    padding: 4rem 0;
    background-color: #fff;
}

.services .item-wrap {
    display: grid;
    grid-template-columns: 1fr; /* 默认1列（移动端） */
    gap: 1.5rem; /* 缩小列间距适应多列 */
    margin-top: 2rem;
    padding: 0 1rem;
}

/* 中等屏幕（≥768px）显示2列 */
@media (min-width: 768px) {
    .services .item-wrap {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* PC端（≥992px）显示3列 */
@media (min-width: 992px) {
    .services .item-wrap {
        grid-template-columns: repeat(3, 1fr);
    }
}

.services .service-box {
    padding: 1.5rem 1rem; /* 缩小内边距适应3列 */
    border-radius: 8px;
    background-color: #fff;
    box-shadow: 0 2px 12px rgba(1, 41, 112, 0.1);
    height: 100%;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-width: 0; /* 防止内容溢出 */
}

.services .service-box:hover {
    transform: scale(1.03);
    color: #fff;
}

.services .service-box.blue:hover {
    background: #2db6fa;
}

.services .service-box.orange:hover {
    background: #f68c09;
}

.services .service-box.green:hover {
    background: #52CD75;
}

.services .service-box.red:hover {
    background: #EA4335;
}

.services .service-box.purple:hover {
    background: #9B74D7;
}

.services .service-box.pink:hover {
    background: #f51f9c;
}

.services .service-box .bi {
    font-size: 2.5rem;
    margin-bottom: 1rem; /* 缩小图标与文字间距 */
    transition: all 0.3s ease;
}

.services .service-box h3 {
    font-size: 1.125rem; /* 缩小标题字体 */
    margin-bottom: 0.75rem;
}

.services .service-box p {
    font-size: 0.875rem; /* 缩小描述字体 */
    margin: 0;
    flex-grow: 1;
}

/* 步骤区域优化 */
.step {
    padding-top: 4rem;
    background: #fff url('/static/index/pages/ingenious/img/step.png') top center no-repeat;
    background-size: contain;
}

.step-container {
    background-color: #F7FAFF;
    padding-bottom: 4rem;
}

.step .item-wrap {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
    padding: 0 1rem;
}

.step .step-box {
    display: flex;
    align-items: center;
    padding: 1.5rem;
    background: #fff;
    box-shadow: 0 2px 12px rgba(1, 41, 112, 0.1);
    border-radius: 8px;
    transition: transform 0.3s ease;
}

.step .step-box:hover {
    transform: translateX(10px);
}

.step .step-box i {
    font-size: 2rem;
    margin-right: 1rem;
    color: #4154f1;
    flex-shrink: 0; /* 图标不收缩 */
}

.step .step-box div {
    flex-grow: 1; /* 文字区域占满剩余空间 */
}

.step .step-box div p {
    font-size: 0.95rem;
    margin: 0.5rem 0;
}

.step .step-box div span {
    font-size: 1.25rem;
    font-weight: 500;
    color: #4154f1;
    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; /* 可选：设置副标题颜色（与主标题区分） */
}