/* 
 * 现代CSS样式 - 赵曰奇个人网站
 * 注：本段代码定义全局CSS变量，构成网站设计系统基础 
 */

/* ============ 根元素变量定义 ============ */
:root {
    /* ----- 颜色系统 ----- */
    --primary-color: #1a365d;      /* 主品牌色 - 深蓝色（用于标题/重点元素） */
    --secondary-color: #2b6cb0;     /* 辅助品牌色 - 中蓝色（用于次级元素） */
    --accent-color: #4299e1;        /* 强调色 - 亮蓝色（用于按钮/交互元素） */
    --text-color: #2d3748;          /* 主文本色 - 深灰色（保证阅读对比度） */
    --text-light: #718096;          /* 辅助文本色 - 浅灰色（说明文字/次要信息） */
    --bg-color: #ffffff;            /* 背景主色 - 纯白（内容区块底色） */
    --bg-light: #f7fafc;            /* 浅背景色 - 浅灰（用于交替背景区块） */
    --bg-dark: #1a202c;             /* 深背景色 - 深灰蓝（特殊区块使用） */

    /* ----- 阴影系统 ----- */
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);  /* 小阴影 - 用于卡片悬停效果 */
    --shadow-md: 0 4px 6px rgba(0,0,0,0.1), 0 1px 3px rgba(0,0,0,0.08);    /* 中阴影 - 常规卡片投影 */
    --shadow-lg: 0 10px 25px rgba(0,0,0,0.1), 0 5px 10px rgba(0,0,0,0.05); /* 大阴影 - 浮动元素强调 */

    /* ----- 圆角系统 ----- */
    --radius-sm: 4px;   /* 小圆角 - 按钮/输入框等小元素 */
    --radius-md: 8px;   /* 中圆角 - 卡片/模块容器 */
    --radius-lg: 16px;  /* 大圆角 - 特殊形状元素 */

    /* ----- 动效系统 ----- */
    --transition: all 0.3s ease;  /* 全局过渡效果 - 统一交互动画时长与缓动函数 */

    /* ----- 布局系统 ----- */
    --container-width: 1200px;    /* 内容最大宽度 - 控制页面主体内容区域宽度 */
    --header-height: 80px;        /* 头部高度 - 导航栏等顶部元素高度基准 */
}

/* ============ 设计系统说明 ============ */
/*
  实现原理：
  1. 颜色阶梯：建立从深蓝到浅蓝的品牌色系，通过明度变化构建视觉层次
  2. 阴影层次：三级阴影系统对应不同高程需求，通过叠加投影实现Material Design效果
  3. 尺寸系统：圆角尺寸遵循8px基准网格系统，保证视觉一致性
  4. 响应式基础：通过容器宽度与相对单位(rem/%)实现响应式布局基础

  维护规范：
  1. 优先使用变量替代固定值
  2. 新增颜色需符合现有色阶逻辑
  3. 阴影使用需符合元素层级关系
  4. 修改尺寸变量需同步调整关联元素
*/

/* ==================== 全局重置与基础样式 ==================== */
/* 通用选择器重置 - 消除浏览器默认样式差异 */
* {
    margin: 0;                   /* 清除默认外边距 */
    padding: 0;                  /* 清除默认内边距 */
    box-sizing: border-box;      /* 统一盒模型计算方式 */
}

/* 根元素滚动行为 - 启用平滑滚动效果 */
html {
    scroll-behavior: smooth;     /* 锚点滚动时产生过渡动画 */
}

/* 主体内容样式 - 网站整体视觉基础 */
body {
    font-family: 'Inter', sans-serif;    /* 主字体设置 */
    color: var(--text-color);            /* 使用文本主色变量 */
    line-height: 1.6;                    /* 舒适行高增强可读性 */
    background-color: var(--bg-color);   /* 使用背景主色变量 */
    overflow-x: hidden;                  /* 防止横向滚动条出现 */
}

/* 超链接通用样式 */
a {
    text-decoration: none;               /* 去除下划线 */
    color: var(--accent-color);           /* 使用强调色变量 */
    transition: var(--transition);       /* 应用全局过渡效果 */
}

/* 列表样式重置 */
ul {
    list-style: none;                    /* 去除默认项目符号 */
}

/* 图片响应式处理 */
img {
    max-width: 100%;                     /* 防止图片溢出容器 */
    height: auto;                       /* 保持原始宽高比 */
}

/* ==================== 布局容器系统 ==================== */
/* 内容容器 - 控制页面主体宽度 */
.container {
    width: 100%;                        /* 充满父容器 */
    max-width: var(--container-width);  /* 使用变量控制最大宽度 */
    margin: 0 auto;                     /* 水平居中 */
    padding: 0 2rem;                    /* 安全边距防止内容贴边 */
}

/* 内容区块通用样式 */
.section {
    padding: 6rem 0;                   /* 区块上下间距保证呼吸感 */
}

/* ==================== 区块标题样式 ==================== */
/* 区块标题 - 统一各章节标题风格 */
.section-title {
    font-family: 'Poppins', sans-serif; /* 标题专用字体 */
    font-size: 2.5rem;                 /* 强调性字号 */
    font-weight: 600;                  /* 中等字重保证清晰度 */
    color: var(--primary-color);        /* 使用主品牌色 */
    text-align: center;                 /* 居中对齐 */
    margin-bottom: 3rem;               /* 下方留白间距 */
    position: relative;                 /* 为装饰线定位准备 */
}

/* 标题装饰线 - 通过伪元素实现视觉强调 */
.section-title::after {
    content: '';                        /* 必须属性 */
    position: absolute;                 /* 绝对定位 */
    bottom: -15px;                      /* 定位在标题下方 */
    left: 50%;                         /* 水平居中起始点 */
    transform: translateX(-50%);       /* 精确居中定位 */
    width: 80px;                       /* 装饰线长度 */
    height: 4px;                       /* 线粗 */
    background: var(--accent-color);    /* 使用强调色 */
    border-radius: 2px;                /* 圆角端点 */
}

/* ============ 关键设计决策说明 ============ */
/*
  布局系统原理：
  1. 容器系统：通过.container实现响应式居中布局
  2. 安全间距：padding防止移动端内容贴边
  3. 区块间距：使用rem单位保证比例协调性

  字体系统策略：
  1. 主体用Inter字体保证可读性
  2. 标题用Poppins字体增强设计感
  3. 字号层次：2.5rem标题 > 正文默认 > 辅助文字

  视觉层次构建：
  1. 装饰线通过绝对定位实现精准控制
  2. 强调色用于链接和装饰线形成视觉关联
  3. 负间距(bottom:-15px)创造元素叠加效果
*/


/* ==================== 按钮样式系统 ==================== */
/* 基础按钮样式 - 定义所有按钮的通用属性 */
.btn {
    display: inline-block;        /* 行内块级显示 */
    padding: 0.8rem 2rem;         /* 舒适的内边距比例 */
    border-radius: var(--radius-md); /* 使用中等圆角变量 */
    font-weight: 500;             /* 中等字重保证可读性 */
    text-align: center;           /* 文字居中显示 */
    cursor: pointer;             /* 手型光标提示可点击 */
    transition: var(--transition); /* 全局过渡效果 */
    border: none;                 /* 去除默认边框 */
    outline: none;                /* 去除聚焦轮廓线 */
}

/* 主按钮样式 - 用于主要操作（如提交/确认） */
.btn-primary {
    background-color: #004990;    /* 品牌深蓝色 */
    color: white;                 /* 高对比度文字 */
    border: 2px solid #004990;    /* 与背景同色边框 */
    z-index: 1;
}

/* 主按钮悬停状态 - 增强交互反馈 */
.btn-primary:hover {
    background-color: #003b73;    /* 稍深的品牌蓝色 */
    border-color: #003b73;        /* 同步修改边框颜色 */
}

/* 次级按钮样式 - 用于次要操作（如取消/返回） */
.btn-secondary {
    background-color: transparent; /* 透明背景 */
    color: #004990;               /* 品牌蓝色文字 */
    border: 2px solid #004990;    /* 品牌蓝色边框 */
}

/* 次级按钮悬停状态 - 转换为实心按钮效果 */
.btn-secondary:hover {
    background-color: #004990;    /* 填充品牌蓝色 */
    color: white;                 /* 文字反白 */
    transform: translateY(-3px);  /* 上移产生点击感 */
    box-shadow: var(--shadow-sm);  /* 添加轻微阴影 */
}

/* 链接式按钮 - 用于文本按钮/导航链接 */
.btn-link {
    color: var(--accent-color);    /* 使用强调色 */
    font-weight: 500;             /* 保持字重统一 */
    display: inline-flex;         /* 弹性布局对齐图标 */
    align-items: center;          /* 垂直居中 */
    gap: 0.5rem;                 /* 图标文字间距 */
    position: relative;          /* 为下划线定位准备 */
    padding-bottom: 2px;         /* 为下划线留出空间 */
}

/* 链接按钮下划线动画 - 伪元素实现 */
.btn-link::after {
    content: '';                 /* 必须属性 */
    position: absolute;          /* 绝对定位 */
    bottom: 0;                   /* 定位到底部 */
    left: 0;                     /* 从左侧开始 */
    width: 0;                    /* 初始不可见 */
    height: 2px;                 /* 线粗 */
    background: var(--accent-color); /* 与文字同色 */
    transition: var(--transition); /* 同步过渡效果 */
}

/* 链接按钮悬停状态 */
.btn-link:hover {
    color: var(--secondary-color); /* 变为次级品牌色 */
}

/* 悬停下划线展开动画 */
.btn-link:hover::after {
    width: 100%;                 /* 完全展开 */
}

/* 链接按钮图标动画 */
.btn-link:hover i {
    transform: translateX(3px);  /* 右移产生指向感 */
}

/* 按钮图标过渡 */
.btn-link i {
    transition: var(--transition); /* 同步全局过渡效果 */
}

/* ============ 设计系统说明 ============ */
/*
  按钮系统设计原则：
  1. 层次分明：通过颜色/样式区分操作优先级
  2. 状态反馈：悬停状态提供明确交互指示
  3. 动效统一：所有过渡效果保持0.3s时长

  颜色系统应用：
  - 品牌蓝(#004990)用于主要操作
  - 透明边框用于次要操作
  - 强调色(var)用于链接式按钮

  交互细节：
  - translateY产生点击物理感
  - 下划线动画引导视线移动
  - 图标位移暗示跳转动作
*/


/* ==================== 头部与导航系统 ==================== */
/* 网站头部容器 - 固定定位导航栏 */
.site-header {
    background-color: transparent;  /* 初始透明背景 */
    position: fixed;                /* 固定定位保证始终可见 */
    width: 100%;                    /* 全屏宽度 */
    top: 0;                        /* 置顶显示 */
    left: 0;                       /* 左侧对齐 */
    z-index: 1000;                 /* 确保悬浮于其他元素之上 */
    transition: all 0.3s ease;     /* 背景变化过渡动画 */
    height: var(--header-height);   /* 使用变量控制高度 */
}

/* 滚动状态下的头部样式 - 增强可读性 */
.site-header.scrolled {
    background-color: rgba(255, 255, 255, 0.95);  /* 半透明白色背景 */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);    /* 添加投影增强层次 */
}

/* 导航栏容器 - 控制内部元素布局 */
.navbar {
    display: flex;                  /* 弹性布局实现灵活排列 */
    justify-content: space-between; /* 两端对齐布局 */
    align-items: center;           /* 垂直居中 */
    height: var(--header-height);  /* 继承头部高度 */
}

/* Logo图像样式 - 品牌标识展示 */
.logo img {
    height: 46px;                  /* 固定高度保持比例 */
    transition: var(--transition);  /* 缩放过渡效果 */
}

/* 导航菜单容器 - 横向排列链接 */
.nav-menu {
    display: flex;                  /* 弹性布局 */
    gap: 1rem;                     /* 菜单项间距 */
}

/* 导航链接基础样式 */
.nav-link {
    color: #004990;                /* 品牌蓝色 */
    text-decoration: none;         /* 去除下划线 */
    font-weight: 500;              /* 中等字重 */
    font-size: 1.25rem;            /* 强调性字号 */
    padding: 0.5rem 1rem;          /* 点击热区扩展 */
    transition: var(--transition);  /* 全局过渡效果 */
    position: relative;            /* 为下划线定位准备 */
    text-shadow: none;             /* 清除文字阴影 */
}

/* 滚动状态下的链接颜色 */
.site-header.scrolled .nav-link {
    color: var(--text-color);       /* 使用主文本色 */
    text-shadow: none;             /* 保持文字清晰 */
}

/* 导航链接下划线动画 - 伪元素实现 */
.nav-link::after {
    content: '';                   /* 必须属性 */
    position: absolute;            /* 绝对定位 */
    bottom: 0;                     /* 定位到底部 */
    left: 0;                       /* 从左侧开始 */
    width: 0;                      /* 初始不可见 */
    height: 2px;                   /* 线粗 */
    background: var(--accent-color); /* 强调色 */
    transition: var(--transition);  /* 同步过渡效果 */
}

/* 链接悬停交互状态 */
.nav-link:hover {
    color: var(--accent-color);     /* 变为强调色 */
}

/* 悬停下划线展开效果 */
.nav-link:hover::after {
    width: 100%;                   /* 完全展开 */
}

/* 移动端菜单开关 - 默认隐藏 */
.mobile-toggle {
    display: none;                /* 桌面端不显示 */
    cursor: pointer;              /* 手型光标提示可点击 */
}

/* 汉堡菜单图标 - 三条横线实现 */
.mobile-toggle span {
    display: block;                /* 块级显示 */
    width: 25px;                   /* 图标宽度 */
    height: 3px;                   /* 线粗 */
    background: var(--text-color); /* 使用主文本色 */
    margin: 5px 0;                /* 间距形成三条线 */
    border-radius: 3px;           /* 圆角端点 */
    transition: var(--transition);  /* 形态变化过渡 */
}

/* ============ 交互设计说明 ============ */
/*
  动态效果实现：
  1. 滚动监听：通过JS添加.scrolled类触发样式变化
  2. 下划线动画：伪元素宽度变化实现伸展效果
  3. 颜色过渡：链接状态变化时的平滑颜色转换

  响应式策略：
  - 桌面端显示完整导航菜单
  - 移动端通过media query显示.mobile-toggle
  - 导航菜单在移动端转换为垂直布局

  视觉一致性：
  - 所有过渡效果保持0.3s时长
  - 使用相同品牌色系保持统一
  - 投影强度与全局阴影系统保持一致
*/


/* Background Decorations */
.section {
    position: relative;
    overflow: hidden;
}

.section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 90% 10%, rgba(0, 86, 169, 0.03) 0%, transparent 40%),
                radial-gradient(circle at 10% 90%, rgba(0, 86, 169, 0.03) 0%, transparent 40%);
    z-index: 0;
}

.section > .container {
    position: relative;
    z-index: 1;
}

/* ==================== 背景装饰系统 ==================== */
/* 通用内容区块装饰 */
.section {
    position: relative;         /* 为装饰元素定位准备 */
    overflow: hidden;           /* 隐藏溢出内容 */
}

/* 区块背景装饰 - 使用渐变创造层次感 */
.section::before {
    content: '';                /* 必须属性 */
    position: absolute;          /* 覆盖整个区块 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* 双径向渐变背景：右上/左下透明渐变 */
    background: radial-gradient(circle at 90% 10%, rgba(0, 86, 169, 0.03) 0%, transparent 40%),
                radial-gradient(circle at 10% 90%, rgba(0, 86, 169, 0.03) 0%, transparent 40%);
    z-index: 0;                 /* 置于内容下方 */
}

/* 内容容器层级控制 */
.section > .container {
    position: relative;         /* 建立新层叠上下文 */
    z-index: 1;                 /* 确保内容显示在装饰层之上 */
}

/* ==================== 首屏英雄区块 ==================== */
/* 首屏容器样式 */
.hero-section {
    height: 100vh;             /* 全视口高度 */
    min-height: 700px;         /* 最小高度保证内容展示 */
    display: flex;              /* 弹性布局居中内容 */
    align-items: center;
    justify-content: center;
    position: relative;        /* 为装饰元素定位准备 */
    background: linear-gradient(135deg, #f0f8ff, #e6f2ff); /* 浅蓝色渐变背景 */
    overflow: hidden;           /* 隐藏装饰元素溢出 */
    padding-top: var(--header-height); /* 预留头部高度 */
}

/* 首屏背景装饰层 */
.hero-section::before {
    content: '';
    position: absolute;
    /* 覆盖整个容器 */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* 左上角透明渐变 */
    background: radial-gradient(circle at 10% 20%, rgba(0, 73, 144, 0.05) 0%, transparent 50%);
    z-index: 0;                /* 置于内容下方 */
}

/* 复合背景装饰层 */
.hero-section::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: 
        /* 左上/右下径向渐变 */
        radial-gradient(circle at 10% 20%, rgba(0, 73, 144, 0.05) 0%, transparent 50%),
        radial-gradient(circle at 90% 80%, rgba(0, 73, 144, 0.05) 0%, transparent 50%),
        /* 45度斜线纹理 */
        linear-gradient(45deg, 
            rgba(0, 73, 144, 0.03) 25%, 
            transparent 25%, 
            transparent 50%, 
            rgba(0, 73, 144, 0.03) 50%, 
            rgba(0, 73, 144, 0.03) 75%, 
            transparent 75%, 
            transparent);
    background-size: auto, auto, 100px 100px; /* 斜线纹理尺寸 */
    z-index: 0;
    opacity: 0.7;              /* 降低透明度避免喧宾夺主 */
}

/* ==================== 装饰元素系统 ==================== */
/* 装饰线样式 */
.decorative-line {
    position: absolute;        /* 绝对定位自由布局 */
    height: 2px;               /* 线粗 */
    width: 150px;              /* 线长 */
    background: linear-gradient(90deg, 
        transparent, 
        rgba(0, 73, 144, 0.2), /* 品牌蓝透明色 */
        transparent);
}

/* 装饰圆形样式 */
.hero-section .decorative-circle {
    position: absolute;
    border-radius: 50%;        /* 圆形 */
    background: radial-gradient(circle, 
        rgba(0, 73, 144, 0.05) 0%, 
        transparent 70%);      /* 透明渐变 */
    z-index: 0;                /* 置于内容下方 */
}

/* 圆形装饰定位系统 */
.hero-section .decorative-circle:nth-child(1) {
    width: 300px; height: 300px; /* 大圆尺寸 */
    top: 10%; left: 5%;        /* 左上定位 */
}
.hero-section .decorative-circle:nth-child(2) {
    width: 200px; height: 200px; /* 中圆尺寸 */
    bottom: 15%; right: 10%;   /* 右下定位 */
}
.hero-section .decorative-circle:nth-child(3) {
    width: 150px; height: 150px; /* 小圆尺寸 */
    top: 20%; right: 20%;      /* 右上定位 */
}

/* 装饰线定位系统 */
.decorative-line:nth-child(1) {
    top: 20%; left: 5%;        /* 左上定位 */
    transform: rotate(45deg);  /* 45度旋转 */
}
.decorative-line:nth-child(2) {
    bottom: 30%; right: 10%;  /* 右下定位 */
    transform: rotate(-30deg); /* -30度旋转 */
}

/* ==================== 内容布局系统 ==================== */
/* 首屏内容容器 */
.hero-content {
    text-align: center;         /* 默认居中 */
    max-width: 800px;          /* 合理阅读宽度 */
    z-index: 2;                /* 确保显示在最前 */
    position: relative;
    margin: 0 auto;            /* 水平居中 */
    display: grid;             /* 网格布局 */
    grid-template-columns: 1fr 6fr; /* 图文比例1:6 */
    gap: 40px;                 /* 列间距 */
}

/* 主标题样式 */
.hero-content h1 {
    font-family: 'Poppins', sans-serif; /* 强调字体 */
    font-size: 3.5rem;        /* 超大字号 */
    font-weight: 700;          /* 粗体强调 */
    color: #004990;            /* 品牌蓝色 */
    line-height: 1.2;          /* 紧凑行距 */
    max-width: 800px;          /* 限制行长 */
}

/* 引导文本样式 */
.hero-content p {
    font-size: 1.25rem;        /* 适中字号 */
    color: #333;              /* 深灰色保证可读 */
    line-height: 1.6;          /* 舒适行距 */
    max-width: 700px;          /* 优化阅读宽度 */
}

/* 按钮容器布局 */
.hero-buttons {
    display: flex;            /* 水平排列按钮 */
    gap: 1rem;                /* 按钮间距 */
    justify-content: center;  /* 居中布局 */
}

/* ==================== 滚动指示系统 ==================== */
/* 滚动提示容器 */
.scroll-indicator {
    position: absolute;       /* 绝对定位 */
    bottom: 2rem;             /* 底部定位 */
    left: 50%;               /* 水平居中 */
    transform: translateX(-50%);
    display: flex;            /* 弹性布局 */
    flex-direction: column;    /* 垂直排列 */
    align-items: center;      /* 居中元素 */
    z-index: 2;              /* 显示层级 */
}

/* 鼠标图标容器 */
.mouse {
    width: 30px;              /* 真实鼠标比例 */
    height: 50px;
    border: 2px solid var(--text-light); /* 浅色边框 */
    border-radius: 20px;      /* 椭圆造型 */
    position: relative;       /* 为滚轮定位准备 */
}

/* 鼠标滚轮动画 */
.wheel {
    width: 6px; height: 6px;  /* 滚轮尺寸 */
    background: var(--text-light); /* 与边框同色 */
    border-radius: 50%;       /* 圆形 */
    animation: scroll 1.5s infinite; /* 滚动动画 */
}

/* 箭头容器 */
.arrows {
    display: flex;
    flex-direction: column;   /* 垂直排列 */
}

/* 单个箭头样式 */
.arrow {
    display: block;
    width: 10px; height: 10px;
    /* 通过边框实现箭头造型 */
    border-right: 2px solid var(--text-light);
    border-bottom: 2px solid var(--text-light);
    transform: rotate(45deg); /* 45度旋转 */
    animation: arrow 1.5s infinite; /* 闪烁动画 */
}

/* 箭头动画延迟 */
.arrow:nth-child(2) { animation-delay: 0.2s; }
.arrow:nth-child(3) { animation-delay: 0.4s; }

/* ==================== 动画关键帧 ==================== */
/* 滚轮滚动动画 */
@keyframes scroll {
    0% { opacity: 1; top: 10px; }   /* 起始位置 */
    100% { opacity: 0; top: 30px; } /* 结束位置 */
}

/* 箭头闪烁动画 */
@keyframes arrow {
    0% { opacity: 0; }    /* 完全透明 */
    50% { opacity: 1; }   /* 完全显示 */
    100% { opacity: 0; }  /* 恢复透明 */
}

/* ============ 设计系统说明 ============ */
/*
  视觉层次构建：
  1. 三层背景装饰：基础渐变+径向光晕+斜线纹理
  2. z-index层级控制：背景(0)→装饰(0)→内容(1)→指示器(2)
  3. 动态元素：滚动提示引导用户交互

  动效系统：
  - 滚轮下落动画模拟真实滚动
  - 箭头序列动画创造视觉流向
  - 所有动画时长保持1.5秒一致性

  响应式考虑：
  - 使用viewport单位实现自适应高度
  - 最大宽度限制保证内容可读性
  - 网格布局自动适应不同屏幕尺寸
*/


/* ==================== 关于板块样式 ==================== */
/* 关于板块容器 - 浅色背景区分内容区块 */
.about-section {
    background-color: var(--bg-light);  /* 使用浅背景色变量 */
}

/* 内容网格布局 - 图文混排系统 */
.about-content {
    display: grid;                     /* 网格布局 */
    grid-template-columns: 1fr 2fr;    /* 图片与文字1:2比例 */
    gap: 3rem;                        /* 列间距 */
    align-items: start;               /* 顶部对齐保持内容整齐 */
}

/* 个人照片容器 - 定位上下文准备 */
.profile-image {
    position: relative;               /* 为装饰元素定位准备 */
}

/* 个人照片样式 */
.profile-image img {
    width: 100%;                     /* 响应式宽度 */
    border-radius: var(--radius-lg);  /* 大圆角柔和边缘 */
    box-shadow: var(--shadow-md);     /* 中等投影增强立体感 */
}

/* 社交链接容器 - 水平排列图标 */
.social-links {
    display: flex;                    /* 弹性布局 */
    gap: 1rem;                       /* 图标间距 */
    margin-top: 1.5rem;              /* 上边距分隔内容 */
    justify-content: center;         /* 水平居中 */
}

/* 社交图标样式 */
.social-icon {
    width: 40px; height: 40px;        /* 标准尺寸 */
    display: flex;                    /* 弹性布局居中内容 */
    align-items: center;
    justify-content: center;
    background: white;                /* 白色背景 */
    color: var(--primary-color);      /* 主品牌色 */
    border-radius: 50%;              /* 圆形按钮 */
    box-shadow: var(--shadow-sm);    /* 轻微投影 */
    transition: var(--transition);   /* 过渡效果 */
}

/* 社交图标悬停状态 */
.social-icon:hover {
    background: var(--accent-color);  /* 强调色背景 */
    color: white;                     /* 文字反白 */
    transform: translateY(-3px);     /* 上移效果 */
    box-shadow: var(--shadow-md);    /* 增强投影 */
}

/* ==================== 个人信息头部 ==================== */
/* 姓名标题 */
.profile-header h1 {
    font-size: 2.5rem;               /* 强调性字号 */
    font-weight: 700;               /* 粗体显示 */
    color: var(--primary-color);     /* 主品牌色 */
    margin-bottom: 0.5rem;          /* 下方间距控制 */
}

/* 职位头衔 */
.profile-header .title {
    font-size: 1.25rem;              /* 次级字号 */
    font-weight: 500;               /* 中等字重 */
    color: var(--accent-color);      /* 强调色突出显示 */
    margin-bottom: 0.25rem;         /* 紧密间距 */
}

/* 机构名称 */
.profile-header .institution {
    font-size: 1rem;                /* 基础字号 */
    color: var(--text-light);        /* 辅助文本色 */
    margin-bottom: 1.5rem;          /* 下方留白 */
}

/* 个人简介区块 */
.profile-bio {
    margin-bottom: 2rem;            /* 与教育经历间距 */
}

/* ==================== 教育经历模块 ==================== */
/* 教育标题 */
.education h3 {
    font-size: 1.25rem;            /* 强调性字号 */
    font-weight: 600;              /* 半粗体 */
    color: var(--primary-color);    /* 主品牌色 */
    margin-bottom: 1rem;          /* 下方间距 */
    display: flex;                 /* 弹性布局 */
    align-items: center;          /* 垂直居中 */
    gap: 0.5rem;                  /* 图标文字间距 */
}

/* 教育经历列表项 */
.education-list li {
    margin-bottom: 1rem;          /* 项间距 */
    padding-left: 1.5rem;        /* 为装饰点留空间 */
    position: relative;           /* 定位上下文 */
}

/* 列表装饰点 - 伪元素实现 */
.education-list li::before {
    content: '';                  /* 必须属性 */
    position: absolute;           /* 绝对定位 */
    left: 0;                     /* 左侧对齐 */
    top: 10px;                   /* 垂直居中 */
    width: 8px; height: 8px;     /* 圆形尺寸 */
    background: var(--accent-color); /* 强调色 */
    border-radius: 50%;           /* 圆形效果 */
}

/* 学位信息 */
.education-list .degree {
    font-weight: 500;            /* 中等字重 */
    display: block;              /* 独占一行 */
}

/* 机构与年份 */
.education-list .institution,
.education-list .year {
    color: var(--text-light);     /* 辅助文本色 */
    font-size: 0.9rem;           /* 较小字号 */
}

/* ============ 设计系统说明 ============ */
/*
  视觉层次构建：
  1. 网格系统：1:2比例实现图文并排
  2. 颜色阶梯：主色→强调色→辅助色形成信息层次
  3. 间距系统：通过margin-bottom控制垂直节奏

  交互细节：
  - 社交图标悬停产生位移反馈
  - 装饰点替代传统列表符号
  - 投影系统保持视觉一致性

  排版原则：
  - 弹性布局实现元素对齐
  - 相对单位(rem)保证比例协调
  - 文字属性差异区分内容优先级
*/


/* ==================== 研究板块样式 ==================== */
/* 研究区块容器 */
.research-section {
    background-color: white;  /* 纯白背景区分内容区块 */
    display: flex;            /* 使用flex布局 */
    justify-content: center;  /* 水平居中 */    
}

/* 研究项目网格布局 */
.research-grid {
    display: grid;
    /* 自适应列数：最小300px，等宽响应式布局 */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;  /* 卡片间距 */
    justify-content: center;  /* 确保网格内的项目水平居中 */
}

/* 研究项目卡片 */
.research-card {
    background: white;
    border-radius: var(--radius-lg);  /* 大圆角 */
    padding: 2.5rem 2rem;            /* 内边距 */
    box-shadow: var(--shadow-md);    /* 中等投影 */
    transition: var(--transition);   /* 过渡效果 */
    border: 1px solid rgba(0, 0, 0, 0.05); /* 极细边框 */
    display: flex;
    flex-direction: column;          /* 垂直排列内容 */
    align-items: center;             /* 水平居中 */
    text-align: center;              /* 文本居中 */
}

/* 卡片悬停效果 */
.research-card:hover {
    transform: translateY(-10px);    /* 上移效果 */
    box-shadow: var(--shadow-lg);    /* 强调投影 */
}

/* 研究图标容器 */
.research-icon {
    font-size: 2.5rem;              /* 大图标尺寸 */
    color: var(--accent-color);     /* 强调色 */
    margin-bottom: 1.5rem;          /* 下方间距 */
    height: 80px;                   /* 固定高度保持对齐 */
    display: flex;
    justify-content: center;        /* 水平居中 */
    align-items: center;            /* 垂直居中 */
}

/* 图标悬停动画 */
.research-card:hover .research-icon i {
    transform: scale(1.2);          /* 放大效果 */
}

/* 研究标题 */
.research-card h3 {
    font-size: 1.5rem;              /* 强调字号 */
    font-weight: 600;               /* 半粗体 */
    color: var(--primary-color);    /* 主品牌色 */
    margin-bottom: 1rem;           /* 标题与文本间距 */
}

/* 研究描述文本 */
.research-card p {
    margin-bottom: 1.5rem;         /* 底部间距 */
    color: var(--text-light);       /* 辅助文本色 */
    flex-grow: 1;                  /* 撑满剩余空间保持等高 */
}

/* ==================== 出版物板块样式 ==================== */
/* 出版物区块容器 */
.publications-section {
    background-color: var(--bg-light);  /* 浅色背景 */
}

/* 出版物网格布局 */
.publications-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 450px)); /* 固定范围响应式布局 */
    gap: 2rem;                      /* 卡片间距 */
    justify-content: center;         /* 居中布局 */
}

/* 出版物卡片 */
.publication-card {
    background: white;
    border-radius: var(--radius-lg);  /* 大圆角 */
    overflow: hidden;               /* 隐藏图片溢出 */
    box-shadow: var(--shadow-md);    /* 中等投影 */
    transition: var(--transition);   /* 过渡效果 */
    display: flex;
    flex-direction: column;          /* 垂直堆叠内容 */
}

/* 卡片悬停效果 */
.publication-card:hover {
    transform: translateY(-5px);    /* 微上移 */
    box-shadow: var(--shadow-lg);    /* 强化投影 */
}

/* 出版物图片容器 */
.pub-image {
    height: 200px;                   /* 固定高度 */
    overflow: hidden;               /* 隐藏溢出部分 */
}

/* 出版物图片样式 */
.pub-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;             /* 保持比例完整显示 */
    padding: 15px;                  /* 内边距留白 */
    background-color: transparent;  /* 透明背景 */
    transition: var(--transition);  /* 过渡效果 */
}

/* 图片悬停放大 */
.publication-card:hover .pub-image img {
    transform: scale(1.05);          /* 微缩放效果 */
}

/* 出版物内容区域 */
.pub-content {
    padding: 1.5rem;                /* 内边距 */
    display: flex;
    flex-direction: column;         /* 垂直排列 */
    flex-grow: 1;                   /* 撑满剩余高度 */
}

/* 出版物标签 */
.pub-badge {
    display: inline-block;
    background: var(--accent-color);  /* 强调色背景 */
    color: white;                   /* 反白文字 */
    font-size: 0.75rem;             /* 小字号 */
    font-weight: 600;               /* 粗体 */
    padding: 0.25rem 0.75rem;       /* 紧凑内边距 */
    border-radius: var(--radius-sm); /* 小圆角 */
    margin-bottom: 1rem;           /* 下方间距 */
    align-self: flex-start;        /* 左对齐 */
}

/* 出版物标题 */
.pub-content h3 {
    font-size: 1.25rem;            /* 适中字号 */
    font-weight: 600;             /* 半粗体 */
    color: var(--primary-color);    /* 主品牌色 */
    margin-bottom: 0.75rem;       /* 标题与作者间距 */
    line-height: 1.4;             /* 舒适行高 */
}

/* 作者信息 */
.pub-content .authors {
    font-size: 0.9rem;            /* 较小字号 */
    color: var(--text-light);      /* 辅助文本色 */
    margin-bottom: 0.5rem;        /* 作者与期刊间距 */
}

/* 期刊信息 */
.pub-content .journal {
    font-size: 0.9rem;            /* 较小字号 */
    font-style: italic;           /* 斜体强调 */
    color: var(--text-light);      /* 辅助文本色 */
    margin-bottom: 1rem;          /* 下方间距 */
}

/* 出版物链接容器 */
.pub-links {
    display: flex;
    gap: 1rem;                     /* 链接间距 */
    margin-top: auto;             /* 置底对齐 */
}

/* 单个出版物链接 */
.pub-link {
    font-size: 0.9rem;            /* 较小字号 */
    color: var(--accent-color);    /* 强调色 */
    display: flex;
    align-items: center;          /* 图标文字对齐 */
    gap: 0.25rem;                /* 图标间距 */
}

/* 链接悬停状态 */
.pub-link:hover {
    color: var(--secondary-color); /* 次级品牌色 */
}

/* ==================== 通用查看全部按钮 ==================== */
.view-all {
    text-align: center;           /* 居中布局 */
    margin-top: 3rem;             /* 顶部间距 */
}

.btn-view-all {
    display: inline-block;
    padding: 0.75rem 1.5rem;      /* 舒适内边距 */
    background-color: #4299e1;    /* 品牌蓝色 */
    color: white;                 /* 反白文字 */
    border-radius: var(--radius-md); /* 中等圆角 */
    font-weight: 500;             /* 中等字重 */
    transition: var(--transition); /* 过渡效果 */
    text-decoration: none;         /* 去除下划线 */
    box-shadow: var(--shadow-sm);  /* 轻微投影 */
}

.btn-view-all:hover {
    transform: translateY(-3px);  /* 微上移 */
    box-shadow: var(--shadow-md);  /* 增强投影 */
}

/* ============ 设计系统说明 ============ */
/*
  布局系统：
  - 研究卡片使用等宽自适应网格
  - 出版物卡片使用固定范围网格保持排版一致性
  - flex-grow属性实现等高卡片

  交互细节：
  - translateY位移创造点击感
  - 图片缩放增强视觉反馈
  - 链接颜色变化引导用户操作

  视觉层次：
  - 主标题使用2.5rem保持信息层级
  - 辅助信息使用0.9rem小字号
  - 标签系统通过颜色对比突出状态
*/


/* ==================== 工具板块样式 ==================== */
/* 工具区块容器 */
.tools-section {
    background-color: white;  /* 纯白背景区分内容区块 */
}

/* 主工具卡片容器 */
.tool-main-card {
    display: flex;                  /* 弹性布局实现响应式排列 */
    background: white;            /* 卡片背景 */
    border-radius: var(--radius-lg); /* 大圆角 */
    padding: 3rem;                /* 内边距 */
    box-shadow: var(--shadow-md);  /* 中等投影 */
    transition: var(--transition); /* 全局过渡效果 */
    border: 1px solid rgba(0, 0, 0, 0.05); /* 极细边框防止边缘模糊 */
    margin-bottom: 3rem;          /* 底部间距 */
    align-items: center;           /* 垂直居中 */
    gap: 3rem;                     /* 列间距 */
}

/* 卡片悬停状态 */
.tool-main-card:hover {
    box-shadow: var(--shadow-lg);  /* 强化投影效果 */
}

/* 工具左侧功能区 */
.tool-left {
    flex: 0 0 280px;              /* 固定宽度布局 */
    display: flex;
    flex-direction: column;        /* 垂直排列 */
    align-items: center;           /* 水平居中 */
    text-align: center;            /* 文本居中 */
    padding: 1.5rem;              /* 内边距 */
    position: relative;           /* 为装饰线定位准备 */
    overflow: hidden;             /* 隐藏溢出内容 */
}

/* 右侧装饰竖线（伪元素实现） */
.tool-left::after {
    content: '';
    position: absolute;
    top: 10%;                     /* 纵向居中定位 */
    right: 0;
    width: 1px;                   /* 线宽 */
    height: 80%;                  /* 相对高度 */
    background: var(--accent-color); /* 强调色 */
    opacity: 0.5;                /* 半透明效果 */
}

/* 工具LOGO容器 */
.tool-logo {
    margin-bottom: 1rem;         /* 底部间距 */
    width: 100%;                 /* 占满容器宽度 */
    justify-content: center;     /* 水平居中 */
}

/* LOGO图像样式 */
.tool-logo img {
    object-fit: contain;         /* 保持比例完整显示 */
    transition: transform 0.3s ease; /* 缩放过渡 */
    transform: scale(1.8);      /* 初始放大比例 */
}

/* LOGO悬停缩放 */
.tool-logo img:hover {
    transform: scale(2.0);      /* 放大强调效果 */
}

/* 工具标题样式 */
.tool-left h3 {
    font-size: 2rem;             /* 强调性字号 */
    font-weight: 700;           /* 粗体显示 */
    color: var(--primary-color); /* 主品牌色 */
    margin-bottom: 1.5rem;      /* 下方间距 */
    position: relative;         /* 为装饰线定位准备 */
}

/* 标题装饰线（伪元素实现） */
.tool-left h3::after {
    content: '';
    position: absolute;
    bottom: -10px;              /* 定位在标题下方 */
    left: 50%;                 /* 水平居中起始点 */
    transform: translateX(-50%); /* 精确居中 */
    width: 50px;               /* 线长 */
    height: 3px;               /* 线粗 */
    background: var(--accent-color); /* 强调色 */
    border-radius: 2px;        /* 圆角端点 */
}

/* 工具按钮容器 */
.tool-buttons {
    display: flex;
    flex-direction: column;     /* 垂直排列按钮 */
    gap: 0.8rem;               /* 按钮间距 */
    width: 100%;               /* 占满宽度 */
    margin-top: 4rem;          /* 上方间距 */
}

/* 工具链接按钮 */
.tool-buttons .btn-link {
    padding: 0.5rem 1rem;      /* 内边距 */
    border-radius: var(--radius-md); /* 中等圆角 */
    background-color: rgba(66, 153, 225, 0.1); /* 浅蓝色背景 */
    transition: all 0.3s ease; /* 过渡效果 */
    width: 100%;               /* 全宽按钮 */
    display: flex;
    justify-content: center;   /* 水平居中 */
    align-items: center;       /* 垂直居中 */
    gap: 0.5rem;              /* 图标间距 */
}

/* 按钮悬停状态 */
.tool-buttons .btn-link:hover {
    background-color: var(--accent-color); /* 强调色填充 */
    color: white;               /* 文字反白 */
    transform: translateY(-2px); /* 上移效果 */
}

/* 工具右侧内容区 */
.tool-right {
    flex: 1;                   /* 占据剩余空间 */
    padding: 2rem;            /* 内边距 */
    display: flex;
    flex-direction: column;    /* 垂直排列内容 */
}

/* 工具描述文本 */
.tool-description {
    font-size: 1.5rem;        /* 较大字号 */
    line-height: 1.7;         /* 舒适行距 */
    color: var(--text-color);  /* 主文本色 */
    text-align: center;       /* 居中显示 */
    margin-bottom: 1.5rem;    /* 下方间距 */
}

/* ============ 设计系统说明 ============ */
/*
  交互设计细节：
  1. 动态投影：悬停时阴影增强创造卡片浮动感
  2. 按钮反馈：背景色变化结合位移提升点击感
  3. LOGO缩放：悬停放大突出品牌标识

  布局系统：
  - 固定/弹性结合布局：左侧固定280px，右侧自适应
  - 间距系统：使用rem单位保持比例协调
  - 垂直对齐：通过flex属性实现精准控制

  视觉层次：
  - 主标题使用2rem字号建立信息层级
  - 装饰线与品牌色形成视觉关联
  - 半透明边框提升卡片立体感
*/


/* ==================== 功能特性模块 ==================== */
/* 功能网格容器 - 双列布局系统 */
.tool-features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);  /* 双列等宽布局 */
    gap: 1.2rem;                          /* 单元格间距 */
    margin: 0;                            /* 清除默认外边距 */
}

/* 单个功能项容器 */
.feature-item {
    display: flex;                       /* 弹性布局 */
    align-items: flex-start;            /* 顶部对齐 */
    gap: 1rem;                         /* 图标与内容间距 */
    padding: 1.2rem;                   /* 内边距 */
    background: white;                 /* 白色背景 */
    border-radius: var(--radius-md);   /* 中等圆角 */
    box-shadow: var(--shadow-sm);     /* 轻微投影 */
    transition: var(--transition);    /* 全局过渡效果 */
    border: 1px solid rgba(0, 0, 0, 0.05); /* 极细边框 */
    position: relative;              /* 为复杂定位准备 */
}

/* 功能项悬停状态 */
.feature-item:hover {
    transform: translateY(-3px);    /* 上移产生点击感 */
    box-shadow: var(--shadow-md);    /* 强化投影效果 */
}

/* 功能图标容器 */
.feature-icon {
    font-size: 1.8rem;             /* 图标尺寸 */
    color: var(--accent-color);     /* 强调色 */
    flex-shrink: 0;                /* 禁止缩放保持尺寸 */
    width: 45px; height: 45px;     /* 固定容器尺寸 */
    border-radius: 50%;           /* 圆形背景 */
    display: flex;
    justify-content: center;      /* 水平居中 */
    align-items: center;          /* 垂直居中 */
    transition: var(--transition); /* 颜色过渡效果 */
}

/* 悬停状态图标颜色变化 */
.feature-item:hover .feature-icon {
    color: var(--secondary-color); /* 次级品牌色 */
}

/* 功能内容区域 */
.feature-content {
    flex: 1;                     /* 占据剩余空间 */
    display: flex;
    flex-direction: column;     /* 垂直排列内容 */
}

/* 功能标题 */
.feature-content h4 {
    font-size: 1.1rem;          /* 适中字号 */
    font-weight: 600;          /* 半粗体 */
    color: var(--primary-color); /* 主品牌色 */
    margin-bottom: 0.5rem;    /* 标题与描述间距 */
}

/* 功能描述文本 */
.feature-content p {
    color: var(--text-light);    /* 辅助文本色 */
    line-height: 1.5;          /* 舒适行距 */
    font-size: 0.95rem;        /* 较小字号 */
    margin-bottom: 0.75rem;   /* 描述与链接间距 */
}

/* 功能链接样式 */
.feature-link {
    margin-top: auto;         /* 自动置底对齐 */
    color: var(--accent-color); /* 强调色 */
    font-weight: 500;         /* 中等字重 */
    font-size: 0.85rem;      /* 较小字号 */
    display: inline-flex;     /* 行内弹性布局 */
    align-items: center;     /* 垂直居中 */
    gap: 0.3rem;            /* 图标文字间距 */
    transition: var(--transition); /* 过渡效果 */
}

/* 链接图标样式 */
.feature-link i {
    font-size: 0.75rem;     /* 图标尺寸 */
    transition: var(--transition); /* 同步过渡 */
}

/* 链接悬停状态 */
.feature-link:hover {
    color: var(--secondary-color); /* 次级品牌色 */
}

/* 链接图标动画 */
.feature-link:hover i {
    transform: translateX(3px);  /* 右移产生指向感 */
}

/* ============ 设计系统说明 ============ */
/*
  布局系统：
  1. 双列网格保持内容整齐
  2. 弹性布局实现自适应的内容高度
  3. margin-top:auto实现链接置底

  交互细节：
  - translateY位移创造物理点击感
  - 图标颜色变化提供操作反馈
  - 箭头位移暗示跳转动作

  视觉层次：
  - 主标题使用1.1rem建立信息层级
  - 描述文本使用0.95rem形成对比
  - 链接字号最小体现从属关系

  一致性设计：
  - 所有圆角使用变量保持统一
  - 投影强度与全局系统一致
  - 过渡效果时长同步设定
*/


/* ==================== 响应式设计调整 ==================== */
/* 移动端适配 (≤768px) */
@media (max-width: 768px) {
    /* 主工具卡片垂直布局 */
    .tool-main-card {
        flex-direction: column;  /* 改为垂直排列 */
        padding: 0;             /* 移除内边距 */
        gap: 0;                 /* 清除元素间距 */
    }
    
    /* 左侧工具区域适配 */
    .tool-left {
        flex: 0 0 auto;         /* 自动高度 */
        width: 100%;            /* 全宽显示 */
        padding: 2rem 1.5rem;    /* 安全边距 */
    }
    
    /* 移除装饰竖线 */
    .tool::after {
        display: none;         /* 移动端隐藏装饰元素 */
    }
    
    /* 右侧内容区域适配 */
    .tool-right {
        padding: 2rem 1.5rem;  /* 安全边距 */
    }
    
    /* 描述文本居中显示 */
    .tool-description {
        text-align: center;     /* 移动端居中排版 */
    }
    
    /* 功能网格单列布局 */
    .tool-features {
        grid-template-columns: 1fr; /* 单列显示 */
        margin-top: 1rem;      /* 顶部间距调整 */
    }
    
    /* 功能项尺寸优化 */
    .feature-item {
        padding: 1.2rem;       /* 紧凑内边距 */
    }
    
    /* 缩小功能图标 */
    .feature-icon {
        width: 40px; height: 40px; /* 缩小容器 */
        font-size: 1.5rem;     /* 调整图标尺寸 */
    }
    
    /* 访问统计垂直布局 */
    .visitor-stats {
        flex-direction: column; /* 垂直排列 */
        gap: 0.5rem;          /* 紧凑间距 */
    }
}

/* ==================== 历史兼容样式 ==================== */
/* 旧版工具图标样式 (保留兼容) */
.tool-icon {
    font-size: 2.5rem;        /* 大尺寸图标 */
    color: var(--accent-color); /* 强调色 */
    display: flex;
    justify-content: center;  /* 水平居中 */
    align-items: center;      /* 垂直居中 */
    margin-bottom: 1.5rem;    /* 底部间距 */
}

/* 旧版LOGO尺寸限制 */
.tool-logo {
    max-width: 80px;         /* 最大宽度限制 */
    max-height: 80px;        /* 最大高度限制 */
    object-fit: contain;     /* 保持比例显示 */
}

/* ==================== 服务板块样式 ==================== */
/* 服务区块容器 */
.services-section {
    background-color: var(--bg-light); /* 浅色背景 */
    padding: 6rem 0;        /* 上下边距 */
    overflow: hidden; /* 防止子元素溢出 */
}
/* flex容器定义 */
.services-section .container > .row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* 可选居中排列 */
    gap: 2rem; /* 替代margin间距 */
}

/* 服务卡片样式 */
.service-card {
    background: white;
    width: calc(33.33% - 20px); /* 三列布局计算 */
    min-width: 300px; /* 最小宽度限制 */    
    border-radius: var(--radius-lg); /* 大圆角 */
    padding: 2.5rem;        /* 内边距 */
    box-shadow: var(--shadow-md); /* 中等投影 */
    transition: var(--transition); /* 过渡效果 */
    border: 1px solid rgba(0, 0, 0, 0.05); /* 极细边框 */
    margin-bottom: 2rem;    /* 卡片间距 */
}
/* 链接覆盖整个卡片 */
.card-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

/* 卡片悬停效果 */
.service-card:hover {
    box-shadow: var(--shadow-lg); /* 强化投影 */
    transform: translateY(-3px); /* 微上移 */
}
/* 悬停时卡片整体效果 */
.service-card:hover .card-link {
    transform: translateY(-3px);
}
/* 保持标题颜色一致性 */
.service-card:hover .service-title {
    color: var(--accent-color);
}

/* 服务LOGO容器 */
.service-logo {
    margin-bottom: 1.5rem;  /* 底部间距 */
    text-align: center;     /* 居中显示 */
}

/* 服务LOGO图像 */
.service-logo img {
    width: 100px;          /* 固定宽度 */
    height: auto;         /* 保持比例 */
    object-fit: contain;   /* 完整显示 */
    transition: transform 0.3s ease; /* 缩放过渡 */
}

/* LOGO悬停缩放 */
.service-logo img:hover {
    transform: scale(1.1);  /* 微放大效果 */
}

/* 服务标题样式 */
.service-title {
    color: var(--primary-color); /* 主品牌色 */
    font-size: 1.4rem;    /* 强调字号 */
    font-weight: 600;     /* 半粗体 */
    text-align: center;    /* 居中显示 */
    margin-top: 1.5rem;   /* 顶部间距 */
    position: relative;   /* 为装饰线准备 */
}

/* 标题装饰线 */
.service-title::after {
    content: '';
    position: absolute;
    bottom: -10px;        /* 定位在标题下方 */
    left: 50%;           /* 水平居中 */
    transform: translateX(-50%); /* 精确居中 */
    width: 40px;         /* 线长 */
    height: 2px;         /* 线粗 */
    background: var(--accent-color); /* 强调色 */
}


/* ==================== 页脚样式系统 ==================== */
/* 页脚容器 */
.site-footer {
    background: #004990;  /* 深蓝品牌背景 */
    padding: 3rem 0 1.5rem; /* 上下边距 */
    color: white;         /* 反白文字 */
    position: relative;   /* 定位上下文 */
    overflow: hidden;    /* 隐藏装饰溢出 */
}

/* 页脚背景装饰层 */
.site-footer::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0; /* 覆盖整个容器 */
    background-size: 100% auto;         /* 背景图尺寸 */
    opacity: 0.1;                      /* 半透明效果 */
    z-index: 0;                       /* 置于内容下方 */
}

/* 页脚LOGO区域 */
.footer-logo {
    text-align: center;       /* 居中显示 */
    margin-bottom: 2rem;     /* 底部间距 */
}

/* 页脚LOGO图像 */
.footer-logo img {
    max-width: 200px;        /* 限制最大尺寸 */
    height: auto;           /* 保持比例 */
}

/* 页脚内容网格 */
.footer-content {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 双列布局 */
    gap: 3rem;                     /* 列间距 */
    position: relative;          /* 层级控制 */
    z-index: 1;                 /* 显示在背景上方 */
}

/* 联系信息标题样式 */
.contact-info h3,
.quick-links h3 {
    color: white;             /* 反白文字 */
    font-size: 1.5rem;       /* 标题字号 */
    margin-bottom: 1.5rem;   /* 底部间距 */
    position: relative;     /* 为装饰线准备 */
}

/* 标题装饰线 */
.contact-info h3::after,
.quick-links h3::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0;     /* 左侧对齐 */
    width: 50px;           /* 线长 */
    height: 3px;           /* 线粗 */
    background: var(--accent-color); /* 强调色 */
    border-radius: 2px;   /* 圆角端点 */
}

/* 联系信息文本 */
.contact-info p {
    color: rgba(255,255,255,0.9); /* 半透明白 */
    margin-bottom: 1rem;  /* 段落间距 */
    display: flex;        /* 弹性布局 */
    align-items: center; /* 垂直居中 */
    gap: 0.75rem;       /* 图标间距 */
}

/* 社交链接容器 */
.footer-social-links {
    display: flex;        /* 水平排列 */
    gap: 1rem;          /* 图标间距 */
    margin-top: 1.5rem; /* 顶部间距 */
}

/* 社交图标样式 */
.footer-social-icon {
    display: inline-flex;   /* 行内弹性容器更适配图标场景 */
    justify-content: center;  /* 水平轴居中 */    
    align-items: center;      /* 垂直轴居中 */
    color: white;       /* 反白图标 */
    font-size: 1.2rem; /* 图标尺寸 */
    transition: var(--transition); /* 过渡效果 */
    width: 40px; height: 40px;    /* 固定尺寸 */
    background: rgba(255,255,255,0.1); /* 半透背景 */
    border-radius: 50%;          /* 圆形按钮 */
}

/* 图标悬停效果 */
.footer-social-icon:hover {
    background: var(--accent-color); /* 强调色填充 */
    transform: translateY(-3px);   /* 上移效果 */
}

/* 链接网格布局 */
.links-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 双列布局 */
    gap: 2rem;                     /* 列间距 */
}

/* 链接栏目样式 */
.links-column h4 {
    color: var(--accent-color);    /* 强调色 */
    margin-bottom: 1rem;         /* 标题间距 */
    font-size: 1.1rem;           /* 小标题字号 */
}

/* 链接列表样式 */
.links-column ul {
    list-style: none;           /* 去除列表符号 */
    padding: 0;                /* 清除默认内边距 */
}

/* 链接项样式 */
.links-column ul li {
    margin-bottom: 0.8rem;     /* 行间距 */
}

/* 链接文本样式 */
.links-column ul li a {
    color: rgba(255,255,255,0.8); /* 半透链接 */
    text-decoration: none;     /* 去除下划线 */
    transition: var(--transition); /* 过渡效果 */
}

/* 链接悬移动画 */
.links-column ul li a:hover {
    color: white;              /* 悬停反白 */
    padding-left: 1.2rem;     /* 右侧留白 */
}

/* 访问统计样式 */
.visitor-stats {
    text-align: center;       /* 居中显示 */
    margin-top: 2rem;         /* 顶部间距 */
    color: rgba(255,255,255,0.8); /* 半透文本 */
}

/* 版权信息样式 */
.copyright {
    text-align: center;       /* 居中显示 */
    margin-top: 1.5rem;     /* 顶部间距 */
    border-top: 1px solid rgba(255,255,255,0.1); /* 上边框 */
    color: rgba(255,255,255,0.7); /* 浅灰文本 */
}

/* ==================== 响应式断点系统 ==================== */
/* 平板适配 (≤1024px) */
@media (max-width: 1024px) {
    :root {
        --container-width: 90%; /* 缩窄内容区域 */
    }
    
    /* 主标题字号缩减 */
    .hero-content h1 {
        font-size: 3rem;
    }
    
    /* 关于板块单列布局 */
    .about-content {
        grid-template-columns: 1fr;
    }
}

/* 移动端深度适配 (≤768px) */
@media (max-width: 768px) {
    /* 导航菜单切换 */
    .mobile-toggle {
        display: block;        /* 显示汉堡菜单 */
    }
    
    /* 导航菜单隐藏状态 */
    .nav-menu {
        position: fixed;       /* 固定定位 */
        right: -100%;         /* 移出可视区域 */
        width: 80%;          /* 侧边菜单宽度 */
        height: calc(100vh - var(--header-height)); /* 视口高度 */
        background: white;   /* 白色背景 */
        box-shadow: var(--shadow-lg); /* 投影效果 */
        transition: var(--transition); /* 滑入动画 */
    }
    
    /* 导航菜单激活状态 */
    .nav-menu.active {
        right: 0;            /* 滑入显示 */
    }

    .about-content {
        justify-items: center;  /* 网格单元格内容水平居中 */
        padding: 0 2%;         /* 增加左右内边距 */
    }
    .profile-image {
        max-width: 350px;      /* 限制头像容器宽度 */
        margin: 0 auto;        /* 容器自身居中 */
    }
    .profile-image img {
        display: block;
        margin: 0 auto;
    }
    
    .social-links {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        max-width: 95%;
        margin: 15px auto 0;
    }
    
    .social-links a {
        margin: 8px;
        transform: scale(0.95);
    }

    /* 页脚单列布局 */
    .footer-content {
        grid-template-columns: 1fr;
    }
}

/* 小屏手机适配 (≤480px) */
@media (max-width: 480px) {
    /* 主标题再缩减 */
    .hero-content h1 {
        font-size: 2rem;
    }
    
    /* 按钮垂直排列 */
    .hero-buttons {
        flex-direction: column;
    }
    
    /* 全宽按钮 */
    .btn {
        width: 100%;
    }
}