/* ====================== 品牌荣誉样式 - 独立CSS文件 ====================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Microsoft YaHei", sans-serif;
}

body {
    padding: 0px;
    background-color: #f9f9f9;
}

/* 标题区域 */
.header {
    text-align: center;
    margin: 40px auto 50px;
    max-width: 1000px;
}

.honor-title {
    font-size: 38px;
    font-weight: 600;
    color: #222;
    margin-bottom: 10px;
}

.subtitle {
    font-size: 16px;
    color: #666;
    line-height: 1.6;
}

/* 布局容器 */
.container {
    max-width: 1000px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

/* 卡片样式 */
.card {
    background-color: #f2f2f2;
    border-radius: 12px;
    padding: 28px 24px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
}

.card:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.card h3 {
    font-size: 18px;
    color: #333;
    margin-bottom: 16px;
    font-weight: 600;
    border-left: 4px solid #999;
    padding-left: 10px;
}

.card ul {
    list-style: none;
}

.card li {
    font-size: 15px;
    color: #555;
    line-height: 1.7;
    margin-bottom: 8px;
    padding-left: 20px;
    position: relative;
}

/* 对勾图标 */
.card li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #666;
    font-weight: bold;
}

/* 新增：链接样式优化 */
.card li a {
    color: #555;
    text-decoration: none; /* 去除下划线 */
    transition: color 0.2s ease;
}

/* 链接悬浮变色 */
.card li a:hover {
    color: #111;
    font-weight: 500;
}

/* 手机端响应式 */
@media (max-width: 768px) {
    .container {
        grid-template-columns: 1fr;
    }
    .title {
        font-size: 24px;
    }
}

/* ====================== 首页宣传标语 - 强制黑底白字，消除继承冲突 ====================== */
.home-slogan {
    width: 100% !important; /* 强制宽度 */
    background: #111 !important; /* 黑底 */
    color: #fff !important; /* 白字（关键：强制覆盖继承色） */
    text-align: center !important; /* 居中 */
    padding: 18px 15px !important; /* 上下内边距，左右留边更美观 */
    font-size: 22px !important; /* 字号 */
    line-height: 1.8 !important; /* 行高 */
    letter-spacing: 2px !important; /* 字间距，提升设计感 */
    font-weight: 500 !important; /* 字重 */
    box-sizing: border-box !important; /* 宽高计算包含内边距 */
    display: block !important; /* 强制块级显示 */
}

/* 移动端适配 */
@media (max-width: 768px) {
    .home-slogan {
        font-size: 14px !important;
        padding: 12px 15px !important;
    }
}

/* ====================== 设计服务流程样式 ====================== */
*{margin:0;padding:0;box-sizing:border-box;font-family:"Microsoft YaHei",sans-serif;}
body{background:#fafbfc;}

.flow{max-width:1400px;margin:80px auto;padding:0 20px;}
.title{text-align:center;font-size:34px;font-weight:600;margin-bottom:0px;color:#222;letter-spacing:1px;}
.flow-wrap{display:flex;align-items:center;justify-content:space-between;position:relative;min-height:550px;}

.stage{width:30%;position:relative;z-index:2;}
.stage-title{display:flex;align-items:center;gap:14px;margin-bottom:36px;justify-content:center;}
.stage-num{
    width:50px;height:50px;border-radius:50%;
    background:#e53935;
    color:#fff;display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:700;
}
.stage-name{font-size:26px;font-weight:500;color:#222;}

.items{display:flex;flex-direction:column;gap:16px;padding:0 30px;}
.item{
    background:#fff;border-radius:10px;padding:16px 20px;
    font-size:15px;color:#444;
    box-shadow:0 2px 10px rgba(0,0,0,0.04);
    transition:all 0.25s ease;text-align:center;
    position:relative;
}
.item:hover::before{
    content:'';
    width:4px;
    height:24px;
    background:#e53935;
    position:absolute;
    left:0;
    top:50%;
    transform:translateY(-50%);
    border-radius:0 2px 2px 0;
}
.item:hover{
    transform:translateY(-3px);
    box-shadow:0 8px 20px rgba(0,0,0,0.08);
}

.stage2 .item{border-left:4px solid #e53935;}
.stage3 .item{border-right:4px solid #999;}

.svg-line{position:absolute;left:0;top:0;width:100%;height:100%;z-index:1;pointer-events:none;}

@media(max-width:768px){
.flow-wrap{flex-direction:column;gap:60px;}
.stage{width:100%;}
.svg-line{display:none;}
}

/* ====================== 合作品牌样式 ====================== */
/* ======================================
【全局样式重置】
作用：清除浏览器默认的边距/内边距，避免不同浏览器显示不一致
修改建议：小白无需修改这里
======================================== */
* {
    margin: 0;      /* 清除所有元素默认外边距 */
    padding: 0;     /* 清除所有元素默认内边距 */
    box-sizing: border-box; /* 宽高计算规则：包含边框/内边距，避免盒子变形 */
}

/* ======================================
【页面基础样式】
作用：定义整个页面的背景、字体，匹配截图的浅灰白风格
修改建议：
- background-color：修改页面整体背景色（当前#f9f9f9是浅灰白，匹配截图）
- font-family：修改字体（当前是苹方+微软雅黑，适配中文）
======================================== */
body {
    font-family: "PingFang SC","Microsoft YaHei",sans-serif; /* 中文友好字体 */
    background-color: #f9f9f9; /* 页面背景色：匹配截图的浅灰白 */
    color: #333; /* 全局文字默认颜色：深灰色 */
    line-height: 1.6; /* 行高：让文字排版更舒适 */
}

/* ======================================
【核心包裹容器 - 解决错位/居中的关键】
作用：将标题+品牌图标整体包裹，强制垂直排列+水平居中
修改建议：
- padding：修改上下留白（当前70px 0，数值越大上下空白越多）
======================================== */
.brand-section {
    width: 100%; /* 占满整个屏幕宽度 */
    padding: 70px 0; /* 上下留白，左右无留白 */
    display: flex; /* 弹性布局 */
    flex-direction: column; /* 子元素垂直排列（标题在上，图标在下） */
    align-items: center; /* 所有子元素水平居中（核心：解决错位） */
}

/* ======================================
【内容宽度控制容器】
作用：限制品牌区域的最大宽度，避免大屏下太松散，匹配截图布局
修改建议：
- max-width：修改品牌区域最大宽度（当前1200px，适配电脑端）
- width：修改自适应宽度比例（当前90%，小屏占90%宽度）
======================================== */
.brand-container {
    width: 90%;             /* 小屏时占屏幕90%宽度 */
    max-width: 1200px;      /* 大屏时最大宽度1200px */
    display: flex;
    flex-direction: column; /* 内部元素垂直排列 */
    align-items: center;    /* 内部元素全部水平居中 */
}

/* ======================================
【合作品牌标题样式】
作用：定义标题文字、下划线样式，匹配截图的简约风格
修改建议：
- margin-bottom：修改标题和图标之间的间距（当前50px）
- font-size：修改标题文字大小（当前28px，匹配截图）
- width：必须保持100%，确保标题居中
======================================== */
.page-title {
    text-align: center;     /* 文字居中 */
    margin-bottom: 50px;    /* 标题与图标区域的间距 */
    width: 100%;            /* 占满容器宽度，确保居中不偏移 */
}
.page-title h2 {
    font-size: 38px;        /* 标题字号（匹配截图） */
    font-weight: 600;       /* 字体粗细：400是常规，500更粗 */
    color: #222;            /* 标题颜色：近黑色 */
    position: relative;     /* 为下划线定位做准备 */
    display: inline-block;  /* 让下划线只跟标题宽度走 */
    padding-bottom: 8px;    /* 标题与下划线的间距 */
}
/* 标题下方的小横线（匹配截图样式） */
.page-title h2::after {
    content: '';            /* 空内容，仅做装饰 */
    position: absolute;     /* 绝对定位，相对于标题 */
    bottom: 0;              /* 贴标题底部 */
    left: 50%;              /* 水平居中 */
    transform: translateX(-50%); /* 精准居中 */
    width: 40px;            /* 横线长度（匹配截图） */
    height: 1px;            /* 横线粗细（匹配截图） */
    background: #222;       /* 横线颜色 */
}

/* ======================================
【品牌图标列表布局 - 核心】
作用：
- 电脑端：自动换行、整体居中，无数量限制
- 手机端：强制显示3列（修改核心）
修改建议：
- gap：修改图标之间的水平间距（当前30px）
- row-gap：修改图标行与行之间的垂直间距（当前30px）
- justify-content：保持center，确保整体居中
======================================== */
.brand-list {
    display: flex;          /* 弹性布局：自动排列 */
    flex-wrap: wrap;        /* 自动换行：数量多了自动下一行 */
    justify-content: center;/* 水平居中（核心：解决图标偏右） */
    align-items: center;    /* 垂直居中 */
    gap: 30px;              /* 图标之间的水平间距 */
    row-gap: 30px;          /* 图标行与行的垂直间距 */
    width: 100%;            /* 占满容器宽度，确保居中 */
}

/* ======================================
【单个品牌图标盒子样式】
作用：定义每个品牌图标的外观，匹配截图的白色方块
修改建议：
- width/height：修改图标盒子大小（当前150px，匹配截图）
- border-radius：修改圆角（当前4px，0为直角）
- box-shadow：修改阴影（数值越小阴影越淡）
======================================== */
.brand-item {
    width: 150px;       /* 图标盒子宽度 */
    height: 150px;      /* 图标盒子高度（和宽度一致为正方形） */
    background: #fff;   /* 盒子背景色：白色（匹配截图） */
    border-radius: 4px; /* 轻微圆角，匹配截图简约风格 */
    display: flex;
    align-items: center;/* 图片在盒子内垂直居中 */
    justify-content: center;/* 图片在盒子内水平居中 */
    cursor: pointer;    /* 鼠标悬浮显示小手 */
    transition: all 0.32s ease; /* 悬浮动画过渡时间，更丝滑 */
    box-shadow: 0 1px 5px rgba(0,0,0,0.03); /* 极淡阴影，匹配截图 */
}

/* 鼠标悬浮效果：轻微上浮+加深阴影（提升交互感） */
.brand-item:hover {
    transform: translateY(-4px); /* 向上浮动4px */
    box-shadow: 0 5px 10px rgba(0,0,0,0.05); /* 悬浮时阴影加深 */
}

/* ======================================
【品牌LOGO图片样式】
作用：控制图片在盒子内的显示比例，默认灰色，悬浮变彩色
修改建议：
- max-width/max-height：修改图片占盒子的比例（当前65%）
- filter: grayscale(100%)：删除此行，图片默认显示彩色
======================================== */
.brand-item img {
    max-width: 65%;     /* 图片最大宽度：盒子的65%（不撑满） */
    max-height: 65%;    /* 图片最大高度：盒子的65% */
    object-fit: contain;/* 保持图片比例，不变形 */
    filter: grayscale(100%); /* 默认灰色（黑白灰高级风） */
    transition: 0.3s ease; /* 颜色过渡动画 */
}
/* 悬浮时：图片恢复彩色 */
.brand-item:hover img {
    filter: grayscale(0);
}

/* ======================================
【鼠标悬浮提示框样式】
作用：鼠标放图标上，旁边弹出品牌名称
修改建议：
- background：修改提示框背景色（当前#222黑色）
- color：修改提示框文字色（当前#fff白色）
- padding：修改提示框大小（当前7px 13px）
- font-size：修改提示文字大小（当前14px）
======================================== */
.brand-tooltip {
    position: fixed;        /* 固定定位，跟随鼠标移动 */
    background: #222;       /* 提示框背景色 */
    color: #fff;            /* 提示框文字色 */
    padding: 7px 13px;      /* 提示框内边距（上下7px，左右13px） */
    border-radius: 4px;     /* 提示框圆角 */
    font-size: 14px;        /* 提示文字大小 */
    white-space: nowrap;    /* 文字不换行 */
    pointer-events: none;   /* 不阻挡鼠标操作 */
    opacity: 0;             /* 默认隐藏 */
    transition: opacity 0.2s; /* 显示/隐藏动画 */
    z-index: 999;           /* 层级最高，确保不被遮挡 */
}

/* ======================================
【媒体查询 - 手机端适配（核心修改：2列→3列）】
作用：屏幕宽度≤768px（手机端）时，强制显示3列
修改建议：
- max-width：修改适配临界点（如750px，适配更多手机）
- flex-basis：修改手机端图标宽度占比（当前28%，确保3列）
- width/height：修改手机端图标大小（当前100px，适配3列布局）
======================================== */
@media (max-width: 768px) {
    /* 手机端品牌列表：调整间距，确保3列整齐 */
    .brand-list {
        justify-content: space-between; /* 两端对齐，强制3列 */
        padding: 0 10px; /* 手机端左右留白，适配3列 */
        gap: 15px; /* 缩小间距，适配3列布局 */
        row-gap: 20px;
    }

    /* 手机端单个图标：核心修改→28%占比，确保一行3个 */
    .brand-item {
        flex-basis: 28%; /* 核心：每行仅能容纳3个（28%*3 + 间距 ≈ 100%） */
        width: 100px; /* 缩小图标尺寸，适配3列显示 */
        height: 100px;
        margin: 0 auto; /* 确保3列图标居中显示 */
    }

    /* 手机端标题调整：字号缩小，间距减小 */
    .page-title h2 {
        font-size: 24px; /* 手机端标题更小 */
    }
    .brand-section {
        padding: 40px 0; /* 手机端上下留白减少 */
    }
}