/* ================================================
 * 嘉善县临澜毅行科技信息服务工作室 - 网站样式表
 * ================================================
 *
 * 文件路径: d:\phpstudy_pro\WWW\gzs\css\style.css
 * 版本: 2.1
 * 最后更新: 2026-05-27
 *
 * 描述:
 * 本文件是网站的核心样式表，包含了网站所有的视觉样式定义。
 * 从整体配色方案到具体元素的样式，从动画效果到响应式布局，
 * 都集中在这个文件中管理。
 *
 * 主要特性:
 * - CSS变量系统：使用CSS自定义属性实现主题色彩管理
 * - 暗色/护眼双主题：支持深色科技风和豆绿色护眼模式
 * - 毛玻璃效果：使用backdrop-filter实现现代模糊效果
 * - 流畅动画：使用CSS动画和过渡效果提升用户体验
 * - 响应式设计：适配桌面、平板、手机等多种设备
 *
 * ================================================
 * 目录结构 (Table of Contents)
 * ================================================
 *
 * 01. CSS变量定义 (:root)
 *    - 主题色彩变量
 *    - 背景色彩变量
 *    - 边框色彩变量
 *    - 文字色彩变量
 *
 * 02. 基础重置样式 (*)
 *    - margin/padding清除
 *    - box-sizing设置
 *
 * 03. 页面基础样式 (body, .container)
 *    - 字体栈设置
 *    - 背景渐变
 *    - 全局文字颜色
 *    - 行高设置
 *    - 溢出处理
 *
 * 04. 头部导航区域 (.header)
 *    - 固定定位导航栏
 *    - 毛玻璃背景效果
 *    - 滚动状态变化
 *    - Logo样式
 *    - 导航菜单
 *    - 后台入口按钮
 *
 * 05. 英雄区域 (.hero)
 *    - 多层渐变背景
 *    - 粒子动画系统
 *    - 主标题渐变文字
 *    - 副标题描述框
 *    - CTA按钮组
 *    - 扫光动画效果
 *
 * 06. 走马灯区域
 *    - 服务走马灯 (从右到左)
 *    - 项目走马灯 (从左到右)
 *    - marquee-right动画
 *    - marquee-left动画
 *    - 走马灯项目卡片
 *    - 走马灯图标
 *
 * 07. 服务网格区域 (.services)
 *    - CSS Grid网格布局
 *    - 服务卡片
 *    - 卡片顶部渐变条
 *    - 卡片光效
 *    - 服务图标
 *
 * 08. 关于我们区域 (.about)
 *    - 双栏Grid布局
 *    - 特性列表
 *    - 图片占位符
 *    - 脉冲动画
 *
 * 09. 行动号召区域 (.cta)
 *    - CTA容器
 *    - 装饰性分隔线
 *
 * 10. 页脚区域 (.footer)
 *    - 三列Grid布局
 *    - 页脚链接
 *    - 版权信息
 *
 * 11. 内页样式
 *    - page-hero内页英雄区
 *    - contact-section联系区
 *    - info-item信息项
 *
 * 12. 表单样式
 *    - 表单组
 *    - 表单行
 *    - 输入框
 *    - 文本域
 *    - 成功/错误消息
 *
 * 13. 响应式设计 (@media)
 *    - 平板适配 (≤992px)
 *    - 手机适配 (≤768px)
 *
 * 14. 主题切换
 *    - 主题切换按钮
 *    - 豆绿色护眼主题
 *    - 护眼主题各元素样式
 *
 * ================================================ */


/* ================================================
 * 01. CSS变量定义区域 (:root)
 * ================================================
 *
 * CSS变量，又称CSS自定义属性，是定义在:root伪类中的全局变量。
 *
 * 使用CSS变量的优势：
 * 1. 【统一管理】所有颜色、间距等值集中在一处，方便统一修改
 * 2. 【主题切换】只需修改变量值即可实现整体换肤
 * 3. 【减少重复】避免在多处重复写相同的值
 * 4. 【易于维护】修改一处即可全局生效
 *
 * 语法格式：
 * 定义：--变量名: 值;
 * 使用：var(--变量名) 或 var(--变量名, 默认值)
 *
 * 颜色格式说明：
 * - 十六进制：#3b82f6
 * - RGB：rgb(59, 130, 246)
 * - RGBA：rgba(59, 130, 246, 0.5) 最后一位是透明度(0-1)
 * - HSL：hsl(217, 91%, 60%)
 * ================================================ */

:root {
    /* ---------- 主色调 (Primary Color) ----------
     *
     * 用途：网站的核心品牌色，用于最重要的UI元素
     * 具体应用：
     *   - 主按钮(.btn-primary)的背景色
     *   - 导航链接悬停时的背景色
     *   - 输入框聚焦时的边框色
     *   - 重要图标的颜色
     *
     * 颜色心理学：
     * #3b82f6 是明亮的科技蓝色
     * - RGB: R=59, G=130, B=246
     * - HSL: H=217°(蓝色), S=91%(饱和度), L=60%(亮度)
     *
     * 蓝色在科技类网站中传达：
     * - 专业性 (Professionalism)
     * - 信任感 (Trust)
     * - 创新精神 (Innovation)
     * - 稳定可靠 (Stability)
     */
    --primary-color: #3b82f6;

    /* ---------- 次要色 (Secondary Color) ----------
     *
     * 用途：辅助主色调，用于渐变过渡和次要强调
     * 具体应用：
     *   - 服务卡片图标悬停时变为此色
     *   - 渐变背景的中间色
     *   - 部分装饰性元素
     *
     * 颜色心理学：
     * #8b5cf6 是紫罗兰色 (Violet)
     * - RGB: R=139, G=92, B=246
     * - HSL: H=258°, S=90%, L=66%
     *
     * 紫色传达：
     * - 创意 (Creativity)
     * - 高端感 (Premium)
     * - 神秘感 (Mystery)
     * - 想象力 (Imagination)
     */
    --secondary-color: #8b5cf6;

    /* ---------- 强调色 (Accent Color) ----------
     *
     * 用途：用于需要特别突出的元素
     * 具体应用：
     *   - CTA区域的分隔线
     *   - 成功提示的图标色
     *   - 特殊高亮效果
     *
     * 颜色心理学：
     * #06b6d4 是青色 (Cyan)
     * - RGB: R=6, G=182, B=212
     * - HSL: H=189°, S=94%, L=41%
     *
     * 青色传达：
     * - 清新感 (Freshness)
     * - 现代感 (Modernity)
     * - 科技感 (Tech-feel)
     * - 开放性 (Openness)
     */
    --accent-color: #06b6d4;

    /* ---------- 深色背景 (Dark Background) ----------
     *
     * 用途：网站的主背景色
     * 具体应用：
     *   - body元素的背景
     *   - 深色模式下的主要背景
     *
     * 选择理由：
     * #0f172a 是深蓝黑色 (Slate 900)
     * - 比纯黑色(#000000)更有层次感
     * - 带蓝色调与主色调呼应
     * - 在科技感网站中常用此色替代纯黑
     * - 长时间浏览不易疲劳
     */
    --bg-dark: #0f172a;

    /* ---------- 卡片背景色 (Card Background) ----------
     *
     * 用途：用于卡片、面板等容器背景
     * 具体应用：
     *   - 服务卡片背景
     *   - 项目卡片背景
     *   - 表单元素背景
     *
     * 技术说明：
     * rgba(255, 255, 255, 0.05) = RGB(255,255,255)，5%不透明度
     *
     * 效果优势：
     * 1. 半透明效果可以隐约透出背景渐变
     * 2. 营造出层次感和深度
     * 3. 比纯色背景更现代、更轻盈
     * 4. 叠加在渐变背景上色调更和谐
     */
    --bg-card: rgba(255, 255, 255, 0.05);

    /* ---------- 边框颜色 (Border Color) ----------
     *
     * 用途：用于分隔线、卡片边框、输入框边框等
     * 具体应用：
     *   - 卡片边框
     *   - 走马灯项目边框
     *   - 输入框默认边框
     *
     * 技术说明：
     * rgba(255, 255, 255, 0.1) = 白色，10%不透明度
     * 比bg-card的5%透明度稍浓
     * 起到明确的视觉分隔作用
     */
    --border-color: rgba(255, 255, 255, 0.1);

    /* ---------- 主要文字颜色 (Primary Text) ----------
     *
     * 用途：用于标题、重要文字
     * 具体应用：
     *   - h1-h6标题
     *   - 卡片标题
     *   - 导航链接
     *
     * 选择理由：
     * #ffffff 纯白色提供最高的对比度
     * 确保重要文字清晰可读
     */
    --text-primary: #fff;

    /* ---------- 次要文字颜色 (Secondary Text) ----------
     *
     * 用途：用于正文、说明文字、描述性内容
     * 具体应用：
     *   - 段落文字
     *   - 服务描述
     *   - 项目描述
     *   - 页脚文字
     *
     * 选择理由：
     * #94a3b8 是灰蓝色 (Slate 400)
     * - 比纯白更柔和，降低视觉刺激
     * - 保持足够的可读性
     * - 与深色背景搭配和谐
     * - 营造层次感，区分主次信息
     */
    --text-secondary: #94a3b8;
}

    /* 边框颜色 - 半透明白色边框 */
    --border-color: rgba(255, 255, 255, 0.1);

    /* 主要文字颜色 - 白色 */
    --text-primary: #fff;

    /* 次要文字颜色 - 灰蓝色，用于正文、说明文字 */
    --text-secondary: #94a3b8;
}


/* ================================================
 * 02. 基础重置样式 (CSS Reset)
 * ================================================
 *
 * CSS Reset 基础重置样式
 *
 * 为什么需要重置？
 * 不同浏览器对HTML元素有不同的默认样式，
 * 例如：
 * - body元素默认有8px的外边距
 * - h1-h6元素有默认的粗体和大小
 * - ul/ol列表有默认的内边距
 * - a链接有默认的下划线和颜色
 *
 * 重置样式可以消除这些差异，确保在所有浏览器中有一致的基础外观。
 *
 * box-sizing 盒模型说明：
 * - content-box (默认值)：width/height只包含内容区
 *   实际宽度 = width + padding + border
 * - border-box：width/height包含内容+内边距+边框
 *   实际宽度 = width（ padding和border包含在内）
 *
 * 例如：一个width:200px, padding:20px, border:1px的元素
 * - content-box：实际宽度 = 200 + 20*2 + 1*2 = 242px
 * - border-box：实际宽度 = 200px（内容区=200-20*2-1*2=158px）
 *
 * 使用border-box让尺寸计算更直观，因此被广泛推荐使用。
 * ================================================ */

* {
    /* ---------- 清除外边距 (margin: 0) ----------
     *
     * margin 外边距：元素边框外部的间距
     *
     * 重置原因：
     * - body默认有8px外边距（在不同浏览器中可能不同）
     * - h1-h6等标题元素有默认的上下外边距
     * - p段落元素有默认的下外边距
     * - 列表元素(ul/ol)有默认的左内边距
     *
     * 设置为0表示清除所有默认外边距，
     * 由我们自己在样式中统一控制间距。
     */
    margin: 0;

    /* ---------- 清除内边距 (padding: 0) ----------
     *
     * padding 内边距：元素边框内部的间距
     *
     * 重置原因：
     * - ul/ol列表默认有40px左右的左内边距（用于项目符号）
     * - button等表单元素有默认的内边距
     * - 输入框有默认的内边距
     *
     * 设置为0清除默认内边距，
     * 确保我们设置的padding就是最终的padding。
     */
    padding: 0;

    /* ---------- 盒模型计算方式 (box-sizing: border-box) ----------
     *
     * box-sizing 属性决定如何计算元素的尺寸
     *
     * border-box 的优势：
     * - 元素的 width/height 包含 content + padding + border
     * - 设置 width: 200px 后，无论加多少padding，元素宽度始终是200px
     * - padding和border会向内压缩内容区，而不是向外扩展
     *
     * 这使得布局计算更简单直观：
     * - 如果想给元素加padding，不需要重新计算总宽度
     * - 如果设置了边框，不需要担心边框增加额外尺寸
     *
     * 例如：
     * .box { width: 200px; padding: 20px; border: 1px solid #000; }
     * - content-box: 元素实际宽度 = 200 + 20*2 + 1*2 = 242px
     * - border-box: 元素实际宽度 = 200px（内容区=200-40-2=158px）
     */
    box-sizing: border-box;
}


/* ================================================
 * 03. 页面基础样式 (Body & Container)
 * ================================================
 *
 * body 是页面最外层容器
 * 所有其他HTML元素都嵌套在body内部
 * body的样式会影响整个页面
 * ================================================ */

body {
    /* ---------- 字体栈 (Font Family) ----------
     *
     * font-family 属性设置字体系列
     * 字体栈(font-stack)提供多个字体选项，浏览器从左到右依次查找
     * 如果第一个字体不可用，就用下一个，以此类推
     *
     * 'Segoe UI' - Windows Vista/7/8/10/11的系统默认无衬线字体
     * 'PingFang SC' - macOS/iOS系统的中文黑体
     * 'Microsoft YaHei' - 微软雅黑，Windows中文系统的常用字体
     * 'Helvetica Neue' - macOS的经典字体
     * sans-serif - 无衬线字体族的通用名称，作为最后的备选
     *
     * 为什么都用无衬线字体？
     * - 无衬线字体没有笔画末端的装饰线
     * - 在屏幕上显示更清晰、现代
     * - 更适合科技类、设计感强的网站
     */
    font-family: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', 'Helvetica Neue', sans-serif;

    /* ---------- 背景渐变 (Background Gradient) ----------
     *
     * linear-gradient() 创建线性渐变背景
     *
     * 语法：linear-gradient(方向/角度, 颜色1 停止位置, 颜色2 停止位置, ...)
     *
     * 135deg - 135度角的方向
     * - 0deg = 从下向上
     * - 90deg = 从左向右
     * - 135deg = 从左下角到右上角（对角线）
     *
     * 渐变色节点：
     * #0f172a 0% - 起始位置使用深蓝黑色
     * #1e293b 50% - 中间位置(50%)使用稍浅的蓝灰色
     * #0f172a 100% - 结束位置回到深蓝黑色
     *
     * 渐变效果的优势：
     * 1. 比纯色更有层次感和深度
     * 2. 营造出科技、未来感的氛围
     * 3. 光影效果让页面不显单调
     * 4. 配合深色主题更显高级
     */
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%);

    /* ---------- 全局文字颜色 ----------
     *
     * #e2e8f0 是浅灰白色 (Slate 200)
     * RGB: 226, 232, 240
     *
     * 选择理由：
     * - 比纯白色(#fff)稍暗，降低视觉刺激
     * - 在深色背景上有良好的对比度
     * - 长时间浏览不易产生视觉疲劳
     * - 比纯白更柔和、更有质感
     */
    color: #e2e8f0;

    /* ---------- 行高 (Line Height) ----------
     *
     * line-height 属性设置行与行之间的垂直间距
     * 数值表示字体高度的倍数
     *
     * 1.6 的含义：
     * - 行高 = 字体大小 × 1.6
     * - 例如字体16px时，行高就是25.6px
     *
     * 行高的作用：
     * 1. 影响文本的可读性
     * 2. 行与行之间有足够空间，避免阅读串行
     * 3. 1.6是推荐的舒适阅读行高
     * 4. 太小会显得拥挤，太大会显得松散
     */
    line-height: 1.6;

    /* ---------- 防止横向溢出 (Overflow X) ----------
     *
     * overflow-x: hidden 隐藏水平方向溢出的内容
     *
     * 作用：
     * - 防止内容超出容器宽度时产生横向滚动条
     * - 通常与 overflow-y: auto 配合使用
     * - 配合max-width使用，确保内容不会无限延伸
     *
     * 为什么需要？
     * - 某些动画或绝对定位元素可能超出容器
     * - 走马灯动画可能会导致滚动条出现
     * - 隐藏溢出保持页面整洁
     */
    overflow-x: hidden;

    /* ---------- 最小高度 (Min Height) ----------
     *
     * min-height: 100vh 设置最小高度为视口高度的100%
     *
     * vh (viewport height) 单位：
     * - 1vh = 视口高度的1%
     * - 100vh = 整个视口的高度
     *
     * 作用：
     * - 确保页面至少占满整个屏幕
     * - 当内容很少时，页面不会显得空旷
     * - 配合overflow-x: hidden防止异常滚动
     */
    min-height: 100vh;
}


/* ================================================
 * 容器样式 (.container)
 * ================================================
 *
 * 容器用于限制内容的最大宽度，并在屏幕两侧留白
 * ================================================ */

.container {
    /* ---------- 最大宽度 (Max Width) ----------
     *
     * max-width: 1200px 设置容器最大宽度为1200像素
     *
     * 与 width: 1200px 的区别：
     * - width: 1200px 始终是1200px，即使屏幕更小
     * - max-width: 1200px 在屏幕≥1200px时是1200px
     * - 在屏幕<1200px时，会自动填满屏幕（因为没有max-width限制了）
     *
     * 为什么用1200px？
     * - 这是网页内容的常用最大宽度
     * - 在这个宽度下，中文文字行长度适中（约40-60个字）
     * - 阅读体验最佳，不会因为行太长而眼睛疲劳
     * - 配合响应式设计，在小屏幕上自动适配
     */
    max-width: 1200px;

    /* ---------- 水平居中 (Horizontal Center) ----------
     *
     * margin: 0 auto 是水平居中的经典写法
     *
     * margin 的四个值：margin: 上 右 下 左
     * - 第一个值(0)：上下外边距为0
     * - 第二个值(auto)：左右外边距自动
     *
     * auto 的工作原理：
     * - 在块级元素中，auto会占据所有可用空间
     * - 设置左右为auto后，它们会平分剩余空间
     * - 结果就是元素水平居中
     *
     * 注意：要让 margin: auto 生效，元素必须是块级元素
     * 或设置 display: block
     */
    margin: 0 auto;

    /* ---------- 内边距 (Padding) ----------
     *
     * padding: 0 20px 设置上下0，左右各20px
     *
     * 作用：
     * - 在屏幕两侧留出20px的空白
     * - 避免内容紧贴屏幕边缘
     * - 当屏幕很小时，内容与屏幕边缘保持距离
     *
     * 这个内边距是必要的，因为：
     * - 移动设备屏幕边缘是圆角，内容可能被裁剪
     * - 手指操作时，边缘处不易精确点击
     * - 留白让页面看起来更舒适
     */
    padding: 0 20px;
}


/* ================================================
 * 04. 头部导航区域 (.header)
 * ================================================
 *
 * 头部导航是网站的核心导航组件
 * 固定在页面顶部，用户随时可以访问
 * 主要包含Logo、导航链接、后台入口按钮等
 * ================================================ */

.header {
    /* ---------- 定位方式 (Position: Fixed) ----------
     *
     * position: fixed 使元素相对于浏览器窗口定位
     *
     * fixed 定位的特点：
     * - 元素脱离正常文档流，不占用原有空间
     * - 始终相对于浏览器窗口定位，不随滚动移动
     * - 即使页面滚动，元素也保持在相同位置
     *
     * 与 absolute 的区别：
     * - absolute 相对于最近的定位祖先元素
     * - fixed 始终相对于视口(viewport)
     *
     * 常见应用：
     * - 固定导航栏
     * - 固定侧边栏
     * - 固定返回顶部按钮
     */
    position: fixed;

    /* ---------- 位置设置 (Top/Left/Right) ----------
     *
     * top: 0 - 距离浏览器窗口顶部0像素
     * left: 0 - 距离浏览器窗口左边0像素
     * right: 0 - 距离浏览器窗口右边0像素
     *
     * 效果：
     * - 结合 position: fixed，元素会固定在页面顶部
     * - 从左到右撑满整个宽度
     * - 高度由 padding 决定
     *
     * 与 bottom: 0 配合可以实现固定在底部
     */
    top: 0;
    left: 0;
    right: 0;

    /* ---------- 层级控制 (Z-Index) ----------
     *
     * z-index: 1000 设置元素的堆叠顺序
     *
     * 数值越大，层级越高，越显示在前面
     * 只有定位元素(position非static)才能使用z-index
     *
     * 层级分组：
     * - 0-999: 普通文档流元素
     * - 1000-1999: 导航、头部组件
     * - 2000-2999: 弹出层、模态框
     * - 3000+: 工具提示/tooltip等最高层元素
     *
     * 为什么用1000？
     * - 确保导航在其他内容之上
     * - 给弹出层等留出足够的层级空间
     * - 避免与特殊效果元素冲突
     */
    z-index: 1000;

    /* ---------- 内边距 (Padding) ----------
     *
     * padding: 20px 0 设置上下各20px，左右为0
     *
     * 作用：
     * - 增加导航栏的垂直空间
     * - 让内容不紧贴导航栏顶部
     * - 使导航栏看起来更舒展
     *
     * 为什么只设上下？
     * - 导航栏宽度是100%，不需要左右内边距
     * - 内容通过 .container 控制左右边距
     */
    padding: 20px 0;

    /* ---------- 过渡动画 (Transition) ----------
     *
     * transition 属性允许属性值平滑过渡
     *
     * 完整语法：transition: 属性 时长 缓动函数 延迟;
     *
     * 各个值的含义：
     * - all: 所有可动画的属性都应用过渡
     * - 0.4s: 过渡持续0.4秒
     * - cubic-bezier(0.4, 0, 0.2, 1): 缓动函数
     *
     * cubic-bezier 缓动函数解释：
     * - 控制动画速度的变化
     * - (0.4, 0, 0.2, 1) 是Material Design的标准曲线
     * - 开始和结束慢，中间快
     * - 模拟真实物理世界的运动感
     *
     * 可动画的属性包括：
     * - opacity, transform, background, box-shadow, padding 等
     */
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);

    /* ---------- 背景色 (Background) ----------
     *
     * rgba(15, 23, 42, 0.8) = RGB(15,23,42)，80%不透明度
     *
     * 效果：
     * - 半透明背景让导航栏不那么沉闷
     * - 可以隐约看到背景的渐变效果
     * - 保持导航的可读性
     *
     * 颜色解析：
     * - RGB(15,23,42) 与 --bg-dark 相同
     * - 80%透明度 = 20%透明度
     * - 背景约80%不透明
     */
    background: rgba(15, 23, 42, 0.8);

    /* ---------- 毛玻璃效果 (Backdrop Filter) ----------
     *
     * backdrop-filter 类似Photoshop的滤镜效果
     *
     * blur(15px) 的效果：
     * - 模糊导航栏后面的背景内容
     * - 创造现代、模糊玻璃的视觉效果
     * - 类似iOS系统的毛玻璃效果
     *
     * 视觉优势：
     * - 让导航栏看起来更轻薄
     * - 增加层次感和深度
     * - 现代UI设计的常见手法
     *
     * 兼容性问题：
     * - 部分移动浏览器可能不支持
     * - 老版本浏览器不支持
     * - 不影响不支持的浏览器（静默失效）
     */
    backdrop-filter: blur(15px);
}


/* ---------- 滚动后的头部样式 (.header.scrolled) ----------
 *
 * 当用户滚动页面后，JavaScript会给header添加scrolled类
 * 这会改变导航栏的外观
 *
 * 实现方式：
 * 在index.php中有JavaScript代码监听滚动事件
 * 当 scrollY > 50 时添加 scrolled 类
 *
 * 这种设计的好处：
 * - 页面顶部留出更多空间给内容
 * - 导航栏更紧凑但不拥挤
 * - 增强的阴影让导航栏更突出
 */

.header.scrolled {
    /* 背景变得更不透明 */
    background: rgba(15, 23, 42, 0.98);

    /* 毛玻璃效果增强 */
    backdrop-filter: blur(20px);

    /* 上下内边距减少，使导航栏更紧凑 */
    padding: 15px 0;

    /* ---------- 阴影效果 (Box Shadow) ----------
     *
     * box-shadow 可以设置多层阴影
     *
     * 语法：box-shadow: X偏移 Y偏移 模糊半径 扩展半径 颜色 位置
     *
     * 第一层阴影：
     * - 0: X方向不偏移
     * - 4px: Y方向向下偏移4px
     * - 30px: 模糊30px（阴影边缘模糊范围）
     * - rgba(0, 0, 0, 0.3): 黑色30%透明度
     *
     * 第二层阴影（发光效果）：
     * - 0: X方向不偏移
     * - 0: Y方向不偏移
     * - 60px: 模糊60px（更大的模糊范围）
     * - rgba(59, 130, 246, 0.1): 蓝色10%透明度
     *
     * 多层阴影叠加的效果：
     * - 底层是深色阴影，产生厚重感
     * - 顶层是蓝色发光，产生科技感
     * - 组合起来自然且有层次
     */
    box-shadow:
        0 4px 30px rgba(0, 0, 0, 0.3),
        0 0 60px rgba(59, 130, 246, 0.1);
}


/* ---------- 头部内容器布局 ----------
 *
 * .header .container 选择器选中header内部的container
 * 使用Flexbox实现logo和导航的水平分布
 */

.header .container {
    /* ---------- Flexbox布局 (Display: Flex) ----------
     *
     * display: flex 将元素转换为弹性容器
     * 子元素称为"弹性项目"，默认水平排列
     *
     * Flexbox的主要概念：
     * - 主轴(main axis)：默认是水平方向
     * - 交叉轴(cross axis)：垂直于主轴的方向
     * - 弹性项目沿主轴排列
     */
    display: flex;

    /* ---------- 主轴对齐 (Justify Content) ----------
     *
     * justify-content 控制弹性项目在主轴上的对齐方式
     *
     * space-between 的效果：
     * - 第一个项目靠主轴起点（左边）
     * - 最后一个项目靠主轴终点（右边）
     * - 中间的项目均匀分布，间距相等
     *
     * 常用值：
     * - flex-start: 全部靠左
     * - flex-end: 全部靠右
     * - center: 全部居中
     * - space-between: 两端对齐，中间平分
     * - space-around: 每个项目两侧间距相等
     */
    justify-content: space-between;

    /* ---------- 交叉轴对齐 (Align Items) ----------
     *
     * align-items 控制弹性项目在交叉轴上的对齐方式
     *
     * center 的效果：
     * - 垂直居中对齐
     * - 确保logo和导航高度一致时垂直居中
     *
     * 常用值：
     * - stretch: 拉伸填满交叉轴
     * - flex-start: 靠交叉轴起点
     * - flex-end: 靠交叉轴终点
     * - center: 居中对齐
     * - baseline: 按文本基线对齐
     */
    align-items: center;
}


/* ================================================
 * Logo样式 (.logo)
 * ================================================
 *
 * Logo是网站的品牌标识
 * 通常包含图标和公司/工作室名称
 * ================================================ */

.logo {
    /* Flexbox布局 - 图标和文字水平排列 */
    display: flex;

    /* 垂直居中对齐 */
    align-items: center;

    /* ---------- 项目间距 (Gap) ----------
     *
     * gap: 12px 设置弹性项目之间的间距
     *
     * 相当于：
     * - margin-right: 12px (最后一个项目除外)
     * - 或设置项目之间的margin
     *
     * gap 的优势：
     * - 比margin更简洁
     * - 只会增加项目之间的间距，不会影响外部
     * - 在换行时自动处理间距
     */
    gap: 12px;

    /* 字体大小 */
    font-size: 22px;

    /* ---------- 字体粗细 (Font Weight) ----------
     *
     * font-weight 设置字体粗细
     *
     * 常用值：
     * - 100: Thin (最细)
     * - 300: Light
     * - 400: Normal (普通)
     * - 500: Medium
     * - 600: Semi Bold
     * - 700: Bold (粗体)
     * - 800-900: Extra Bold / Black (最粗)
     *
     * 700 相当于 HTML 的 <b> 标签效果
     */
    font-weight: 700;

    /* Logo文字颜色 */
    color: #fff;
}


/* ---------- Logo图标样式 ----------
 * Font Awesome图标
 */

.logo i {
    /* 图标颜色 - 使用主色调蓝色 */
    color: #3b82f6;

    /* 图标大小，比文字稍大 */
    font-size: 28px;
}


/* ================================================
 * 导航菜单样式 (.nav)
 * ================================================
 *
 * 导航菜单包含网站的主要页面链接
 * ================================================ */

.nav {
    /* Flexbox布局 */
    display: flex;

    /* 导航项之间的水平间距 */
    gap: 30px;

    /* 垂直居中对齐 */
    align-items: center;
}


/* ---------- 导航链接样式 ---------- */

.nav a {
    /* 文字颜色 - 浅灰蓝色，比纯白柔和 */
    color: #cbd5e1;

    /* 去除下划线
     * <a> 标签默认有下划线 */
    text-decoration: none;

    /* 字体粗细 - 中等粗细 */
    font-weight: 500;

    /* 过渡动画 - 所有属性变化时平滑过渡 */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    /* 相对定位 - 为 ::after 伪元素提供定位参考
     *
     * 定位上下文：
     * - 默认static元素不能作为绝对定位子元素的参考
     * - 设置relative后，::after的绝对定位相对于此元素
     */
    position: relative;

    /* ---------- 内边距 ----------
     *
     * padding: 8px 16px
     * - 上下各8px
     * - 左右各16px
     *
     * 作用：
     * - 增加链接的可点击区域
     * - 提高移动端的可操作性
     * - 让链接看起来不那么紧凑
     */
    padding: 8px 16px;

    /* 圆角 - 使hover背景有圆角效果 */
    border-radius: 8px;
}


/* ---------- 导航链接悬停和激活状态 ---------- */

.nav a:hover,
.nav a.active {
    /* 文字变白 */
    color: #fff;

    /* 半透明蓝色背景
     * rgba(59, 130, 246, 0.15) = 蓝色15%不透明度
     *
     * 视觉反馈：
     * - 用户知道这个链接是可点击的
     * - 与默认状态形成对比
     */
    background: rgba(59, 130, 246, 0.15);
}


/* ---------- 激活链接的下划线指示器 ----------
 *
 * 使用 ::after 伪元素创建下划线效果
 *
 * ::before 和 ::after 伪元素：
 * - 用于在元素内容之前或之后插入内容
 * - 需要设置 content 属性才会显示
 * - 默认为行内元素
 * - 常用于创建装饰性元素
 */

.nav a.active::after {
    /* 必须设置content，否则伪元素不存在
     * 空字符串表示插入一个无形的内容 */
    content: '';

    /* 绝对定位
     * 相对于 .nav a 元素定位
     * (因为 .nav a 设置了 position: relative) */
    position: absolute;

    /* ---------- 位置控制 ----------
     *
     * bottom: -2px 表示下边框外2px处
     * - 元素下边缘下方2像素的位置
     * - 这样下划线会紧贴链接底部
     */
    bottom: -2px;

    /* left: 50% + transform: translateX(-50%)
     *
     * 实现水平居中的方法：
     * 1. left: 50% 让元素的左边缘位于父元素的50%处
     * 2. transform: translateX(-50%) 向左平移自身宽度的50%
     * 3. 组合效果：元素水平居中
     *
     * 为什么不用 margin: 0 auto？
     * - ::after 是行内元素，不支持 margin: auto
     * - transform 是更好的居中方案
     */
    left: 50%;

    /* 向左平移自身宽度的50%，实现真正的居中 */
    transform: translateX(-50%);

    /* 下划线宽度 */
    width: 20px;

    /* 下划线高度 */
    height: 3px;

    /* ---------- 渐变背景 ----------
     *
     * linear-gradient(90deg, 颜色1, 颜色2, 颜色3)
     * 90deg = 从左到右的水平方向
     *
     * 蓝→紫→青三色渐变
     * 与网站主色调呼应
     */
    background: linear-gradient(90deg, #3b82f6, #8b5cf6, #06b6d4);

    /* 圆角 - 使线条两端圆润 */
    border-radius: 2px;
}


/* ================================================
 * 后台管理入口按钮 (.btn-admin)
 * ================================================
 *
 * 位于导航右侧的按钮，指向后台管理页面
 * 样式与普通导航链接略有不同
 * ================================================ */

.btn-admin {
    /* 内边距 */
    padding: 8px 16px;

    /* 半透明蓝色背景
     * 比普通链接的hover背景稍淡 */
    background: rgba(59, 130, 246, 0.1);

    /* 边框 - 蓝色边框 */
    border: 1px solid rgba(59, 130, 246, 0.3);

    /* 圆角 */
    border-radius: 8px;
}

/* ---------- 后台按钮悬停状态 ---------- */

.btn-admin:hover {
    /* 背景加深 */
    background: rgba(59, 130, 246, 0.2);
}


/* ================================================
 * 05. 英雄区域 (Hero Section)
 * ================================================
 *
 * 英雄区域是首页最顶部的主要展示区
 * 是用户进入网站后第一眼看到的内容
 * 通常包含：大标题、副标题、简介、CTA按钮
 *
 * 设计要点：
 * - 视觉冲击力强，留下深刻印象
 * - 清晰传达网站主题/价值
 * - 提供明确的行动指引
 * ================================================ */

.hero {
    /* 相对定位 - 为背景层和内容层提供定位参考
     * 绝对定位元素会相对于最近的定位祖先定位
     * 如果没有设置relative的祖先，则相对于body/document定位 */
    position: relative;

    /* 最小高度为auto - 由内容决定高度
     * 区别于固定height:auto，可以让容器根据内容自动扩展 */
    min-height: auto;

    /* 高度由内容决定 - 不设置固定高度
     * 如果内容多，容器会自动变高 */
    height: auto;

    /* Flexbox布局 - 控制子元素排列
     * 将hero-content等子元素放在容器内 */
    display: flex;

    /* 靠上对齐 - 内容贴顶部
     * align-items控制交叉轴（垂直方向）的对齐方式
     * flex-start = 靠上对齐 */
    align-items: flex-start;

    /* ---------- 顶部内边距 ----------
     *
     * padding-top: 80px 为固定导航栏留出空间
     *
     * 计算依据：
     * - 导航栏固定定位，高度约60px
     * - 加上一些额外间距（约20px）
     * - 确保英雄区域内容不被导航栏遮挡
     *
     * 注意：导航栏使用z-index: 1000
     * 英雄区域内容需要足够靠下才能显示在导航栏下方
     */
    padding-top: 80px;

    /* 底部内边距 - 内容与下方区域的间距 */
    padding-bottom: 30px;

    /* 溢出隐藏 - 防止内容溢出产生滚动条
     *
     * 应用场景：
     * - 粒子动画可能会超出容器边界
     * - 走马灯动画在切换时可能产生滚动条
     * - 隐藏溢出保持页面整洁
     */
    overflow: hidden;
}


/* ================================================
 * 英雄区域背景 (.hero-bg)
 * ================================================
 *
 * 使用多层径向渐变创造科技感背景效果
 * ================================================ */

.hero-bg {
    /* 绝对定位 - 相对于.hero定位
     * 脱离文档流，不占用空间 */
    position: absolute;

    /* 填满整个父容器 */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    /* ---------- 多层径向渐变 (Multiple Radial Gradients) ----------
     *
     * radial-gradient() 创建从中心向外的渐变
     * 语法：radial-gradient(形状 圆心位置, 颜色 停止位置, ...)
     *
     * 第一层渐变：
     * - circle at 20% 30% - 圆心在距离左边20%、距离上边30%的位置
     * - rgba(59, 130, 246, 0.2) - 蓝色20%透明度
     * - transparent 50% - 渐变到透明，在50%处完全透明
     *
     * 第二层渐变：
     * - circle at 80% 20% - 圆心在距离右边80%、距离上边20%的位置
     * - rgba(139, 92, 246, 0.2) - 紫色20%透明度
     * - transparent 50% - 渐变到透明
     *
     * 第三层渐变：
     * - circle at 50% 80% - 圆心在中间50%、距离下边80%的位置
     * - rgba(6, 182, 212, 0.15) - 青色15%透明度（更淡）
     *
     * 第四层渐变：
     * - circle at 30% 70% - 圆心在左边30%、距离下边70%的位置
     * - rgba(168, 85, 247, 0.1) - 浅紫色10%透明度（最淡）
     *
     * 多层叠加效果：
     * - 营造出丰富、立体的光影效果
     * - 模拟光源从多个方向照射的感觉
     * - 创造科技感、未来感的氛围
     */
    background:
        radial-gradient(circle at 20% 30%, rgba(59, 130, 246, 0.2) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(139, 92, 246, 0.2) 0%, transparent 50%),
        radial-gradient(circle at 50% 80%, rgba(6, 182, 212, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 30% 70%, rgba(168, 85, 247, 0.1) 0%, transparent 40%);

    /* ---------- 背景脉冲动画 ----------
     *
     * animation 属性应用名为 bgPulse 的动画
     * - 8s: 动画持续8秒
     * - ease-in-out: 缓入缓出，开始和结束慢，中间快
     * - infinite: 无限循环
     */
    animation: bgPulse 8s ease-in-out infinite;
}


/* ---------- 背景脉冲动画 (Keyframes) ----------
 *
 * @keyframes 定义动画的关键帧
 * 关键帧描述动画在特定时间点的状态
 * 浏览器自动计算中间状态的过渡
 */

@keyframes bgPulse {
    /* 起始和结束状态 - 透明度0.8 */
    0%, 100% {
        /* opacity 控制元素的透明度
         * 0 = 完全透明（看不见）
         * 1 = 完全不透明（正常显示） */
        opacity: 0.8;
    }

    /* 中间状态 - 透明度1（完全显示） */
    50% {
        opacity: 1;
    }
}


/* ================================================
 * 粒子动画区域 (.hero-particles)
 * ================================================
 *
 * 在英雄区域背景中漂浮的发光粒子
 * 增强科技感和动态效果
 * 粒子会向上漂浮并逐渐消失
 * ================================================ */

.hero-particles {
    /* 绝对定位 */
    position: absolute;

    /* 填满父容器 */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    /* 溢出隐藏 - 防止粒子超出边界
     * 配合绝对定位，确保粒子不会露出容器 */
    overflow: hidden;

    /* ---------- 鼠标事件穿透 ----------
     *
     * pointer-events 属性控制元素是否对鼠标事件作出反应
     *
     * none 的效果：
     * - 元素对鼠标"不可见"
     * - 鼠标点击会穿透这个元素，作用于下方的元素
     * - 但元素仍然可见
     *
     * 应用场景：
     * - 装饰性覆盖层，不需要交互
     * - 背景效果层，不影响下方内容点击
     * - 这里让粒子不影响下方的按钮点击
     */
    pointer-events: none;
}


/* ---------- 单个粒子样式 (.particle) ---------- */

.particle {
    /* 绝对定位 - 父容器.hero-particles已设置relative */
    position: absolute;

    /* 粒子尺寸 - 4x4像素的小圆点 */
    width: 4px;
    height: 4px;

    /* 圆形 - border-radius: 50% 使正方形变成圆形 */
    border-radius: 50%;

    /* 粒子发光效果 - 蓝色半透明
     * box-shadow 可以创造发光效果：
     * 第一个值是X偏移，第二个是Y偏移，第三个是模糊半径
     * 没有设置扩散半径，所以是向外的光晕效果 */
    background: rgba(59, 130, 246, 0.6);

    /* 应用 float 动画：
     * - 15s: 周期15秒
     * - infinite: 无限循环 */
    animation: float 15s infinite;
}


/* ---------- 粒子位置和动画延迟 ----------
 *
 * 每个粒子有不同位置和动画延迟
 * 这样粒子不会同步运动，看起来更自然
 *
 * :nth-child(n) 伪类选择器
 * 选择父元素下的第n个子元素
 */

.particle:nth-child(1) {
    /* 距离左边10%，距离顶部20% */
    left: 10%;
    top: 20%;
    /* 动画延迟0秒，立即开始 */
    animation-delay: 0s;
}

.particle:nth-child(2) {
    left: 30%;
    top: 60%;
    /* 延迟2秒后开始 */
    animation-delay: 2s;
}

.particle:nth-child(3) {
    left: 50%;
    top: 30%;
    /* 延迟4秒 */
    animation-delay: 4s;
}

.particle:nth-child(4) {
    left: 70%;
    top: 70%;
    /* 延迟6秒 */
    animation-delay: 6s;
}

.particle:nth-child(5) {
    left: 90%;
    top: 40%;
    /* 延迟8秒 */
    animation-delay: 8s;
}


/* ---------- 粒子漂浮动画 ----------
 *
 * 粒子向上漂浮并逐渐消失
 * 配合旋转效果
 */

@keyframes float {
    /* 起始和结束状态 */
    0%, 100% {
        /* translateY(0): 不偏移
         * rotate(0deg): 不旋转 */
        transform: translateY(0) rotate(0deg);

        /* 透明度60% */
        opacity: 0.6;
    }

    /* 中间状态 */
    50% {
        /* 向上偏移100px */
        transform: translateY(-100px) rotate(180deg);

        /* 完全透明 */
        opacity: 0;
    }
}


/* ================================================
 * 英雄区域内容 (.hero-content)
 * ================================================
 *
 * 包含标题、描述、按钮的核心内容区
 * 使用相对定位，在背景层之上
 * ================================================ */

.hero-content {
    /* 相对定位 - 在背景层之上
     * z-index 需要定位元素才能生效 */
    position: relative;

    /* 设置层级 - 确保在背景层之上
     * z-index: 1 已经足够，因为背景是0 */
    z-index: 1;

    /* 水平居中 - 文字居中 */
    text-align: center;

    /* 最大宽度 - 防止一行文字过长
     * 中文阅读最佳行宽约40-60字
     * 800px 约等于 25-30个中文字符 */
    max-width: 800px;

    /* 水平居中 - auto margin */
    margin: 0 auto;
}


/* ---------- 主标题样式 ----------
 * "科技赋能未来" */

.hero-content h1 {
    /* 字体大小 - 56像素 */
    font-size: 56px;

    /* 字体粗细 - 800是最粗的级别
     * 相当于 Ultra Bold / Black */
    font-weight: 800;

    /* 下边距 - 与副标题的间距 */
    margin-bottom: 1px;

    /* ---------- 文字渐变效果 ----------
     *
     * 三步配合实现渐变文字效果：
     *
     * 1. background: linear-gradient() 设置渐变背景
     *    - 白色 → 灰蓝色 → 灰蓝色
     *    - 三种颜色的平滑过渡
     *
     * 2. -webkit-background-clip: text
     *    - WebKit内核（Safari/Chrome）的私有属性
     *    - 只在文字区域显示背景
     *    - 文字之外的背景被裁剪掉
     *
     * 3. -webkit-text-fill-color: transparent
     *    - 将文字颜色设为透明
     *    - 让下面的渐变背景显示出来
     *
     * 4. background-clip: text (标准属性)
     *    - Firefox等浏览器的兼容写法
     *    - 与 -webkit-background-clip 作用相同
     */
    background: linear-gradient(135deg, #fff 0%, #94a3b8 50%, #64748b 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;

    /* ---------- 文字阴影 ----------
     *
     * text-shadow 为文字添加阴影效果
     *
     * 语法：text-shadow: X偏移 Y偏移 模糊半径 颜色
     *
     * 0 0 60px rgba(59, 130, 246, 0.3)：
     * - X偏移: 0（水平不偏移）
     * - Y偏移: 0（垂直不偏移）
     * - 模糊半径: 60px（大量模糊，产生光晕效果）
     * - 颜色: 蓝色30%透明度
     *
     * 效果：文字周围产生蓝色发光效果
     */
    text-shadow: 0 0 60px rgba(59, 130, 246, 0.3);

    /* 应用 titleGlow 动画 */
    animation: titleGlow 3s ease-in-out infinite alternate;
}


/* ---------- 标题发光动画 ----------
 *
 * 亮度和阴影在两种状态间平滑切换
 * alternate 值让动画正向播放后反向播放（来回循环）
 */

@keyframes titleGlow {
    /* 正常状态 */
    0% {
        /* brightness(1) - 正常亮度 */
        filter: brightness(1);

        /* 单层阴影 */
        text-shadow: 0 0 60px rgba(59, 130, 246, 0.3);
    }

    /* 增强状态 */
    100% {
        /* brightness(1.1) - 稍亮的滤镜效果 */
        filter: brightness(1.1);

        /* 多层阴影，更强烈
         * 第一层：80px模糊的蓝色
         * 第二层：120px模糊的紫色 */
        text-shadow:
            0 0 80px rgba(59, 130, 246, 0.5),
            0 0 120px rgba(139, 92, 246, 0.3);
    }
}


/* ---------- 副标题/描述文字 ---------- */

.hero-content p {
    /* 字体大小 - 20像素 */
    font-size: 20px;

    /* 文字颜色 - 灰蓝色 */
    color: #94a3b8;

    /* 下边距 - 与按钮的间距 */
    margin-bottom: 45px;

    /* 行高 - 适当增加 */
    line-height: 1.8;

    /* ---------- 描述框背景 ----------
     *
     * rgba(255, 255, 255, 0.03) = 白色3%透明度
     * 几乎不可见的背景
     * 但能营造出层次感和玻璃质感
     */
    background: rgba(255, 255, 255, 0.03);

    /* 内边距 - 背景区域更大 */
    padding: 25px 30px;

    /* 圆角 - 柔和的边角 */
    border-radius: 15px;

    /* ---------- 微妙的边框 ----------
     *
     * 1px 实线边框
     * rgba(255, 255, 255, 0.05) = 白色5%透明度
     * 几乎看不见，但增加边框定义感
     */
    border: 1px solid rgba(255, 255, 255, 0.05);

    /* ---------- 背景模糊 ----------
     *
     * backdrop-filter: blur(10px)
     * 使背景（渐变）透过这个区域时产生模糊
     * 创造玻璃质感的效果
     */
    backdrop-filter: blur(10px);
}


/* ================================================
 * 英雄区域按钮容器
 * ================================================ */

.hero-buttons {
    /* Flexbox布局 */
    display: flex;

    /* 按钮之间水平间距 */
    gap: 20px;

    /* 水平居中 */
    justify-content: center;
}


/* ================================================
 * 按钮基础样式 (.btn)
 * ================================================
 *
 * 所有按钮的通用样式
 * 包括主按钮、次按钮等
 * ================================================ */

.btn {
    /* ---------- 显示方式 ----------
     *
     * inline-block 与 inline 的区别：
     * - inline: 不能设置宽高，宽度由内容决定
     * - inline-block: 可以设置宽高，但不会占满整行
     * - block: 占满整行
     *
     * 选择 inline-block 的原因：
     * - 可以设置 padding、width、height
     * - 但不会像 block 那样自动占满一行
     * - 可以和其他元素并排显示
     */
    display: inline-block;

    /* 内边距 - 按钮内部空间
     * 16px上下，36px左右 */
    padding: 16px 36px;

    /* 圆角 - 按钮更圆润
     * 12px的圆角是比较现代的设计 */
    border-radius: 12px;

    /* 字体粗细 - 600 = Semi Bold */
    font-weight: 600;

    /* 去除下划线 - <a>标签默认有下划线 */
    text-decoration: none;

    /* 过渡动画 */
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);

    /* ---------- 鼠标样式 ----------
     *
     * cursor 属性改变鼠标指针样式
     * pointer = 手型，表示可点击
     * 其他常见值：
     * - default: 箭头
     * - text: I型文本选择光标
     * - wait: 加载/沙漏
     * - not-allowed: 禁止
     */
    cursor: pointer;

    /* 去除边框 - 按钮默认可能有边框 */
    border: none;

    /* 字体大小 */
    font-size: 16px;

    /* 相对定位 - 为 ::before 伪元素提供参考 */
    position: relative;

    /* 溢出隐藏 - 配合 ::before 扫光效果
     * 确保扫光效果不会溢出按钮边界 */
    overflow: hidden;
}


/* ---------- 按钮扫光效果（伪元素）----------
 *
 * 使用 ::before 伪元素创建光效
 * 悬停时从左向右扫过
 */

.btn::before {
    /* 伪元素内容为空 - 只是创建一条光线 */
    content: '';

    /* 绝对定位 */
    position: absolute;

    /* 位于按钮顶部 */
    top: 0;

    /* ---------- 初始位置 ----------
     *
     * left: -100% = 在按钮左侧外部
     * 这个位置是看不到的
     * 当悬停时，动画会将它移动到右侧外部
     */
    left: -100%;

    /* 宽度和高度与按钮相同 */
    width: 100%;
    height: 100%;

    /* ---------- 线性渐变光线 ----------
     *
     * linear-gradient(90deg, 透明, 白, 透明)
     *
     * 效果是一条从透明→白→透明的横条
     * 白色部分在中间，两端透明
     *
     * rgba(255, 255, 255, 0.2) = 白色20%透明度
     */
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);

    /* 过渡动画 - 移动0.5秒 */
    transition: left 0.5s;
}


/* ---------- 悬停时扫光 ---------- */

.btn:hover::before {
    /* 移动到按钮右侧外部 */
    left: 100%;
}


/* ================================================
 * 主按钮样式 (.btn-primary)
 * ================================================
 *
 * 主要行动号召按钮
 * 使用蓝色渐变背景
 * ================================================ */

.btn-primary {
    /* ---------- 蓝色渐变背景 ----------
     *
     * linear-gradient(角度, 颜色1 位置, 颜色2 位置, 颜色3 位置)
     *
     * 135deg - 135度角，从左下到右上
     *
     * 颜色过渡：
     * - #3b82f6 0% - 起始：亮蓝色
     * - #2563eb 50% - 中间：标准蓝色
     * - #1d4ed8 100% - 结束：深蓝色
     *
     * 渐变效果模拟按钮的立体感
     * 从亮到暗的过渡看起来更有质感
     */
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 50%, #1d4ed8 100%);

    /* 文字白色 - 在蓝色背景上清晰可见 */
    color: #fff;

    /* ---------- 阴影效果 ----------
     *
     * box-shadow 可以叠加多层
     *
     * 第一层：主阴影
     * - 0 10px 30px - 向下10px，模糊30px
     * - 蓝色30%透明度
     * - 创造浮起的效果
     *
     * 第二层：边框阴影（inset向内）
     * - 0 0 0 1px - 没有偏移，1px的边框
     * - 蓝色20%透明度
     * - inset关键字使阴影向内，创造边框效果
     */
    box-shadow:
        0 10px 30px rgba(59, 130, 246, 0.3),
        0 0 0 1px rgba(59, 130, 246, 0.2) inset;
}


/* ---------- 主按钮悬停状态 ---------- */

.btn-primary:hover {
    /* ---------- 上浮效果 ----------
     *
     * translateY(-4px) 向上移动4像素
     * 配合阴影增强，创造"抬起"效果
     * 用户会觉得按钮被拉起来了
     */
    transform: translateY(-4px);

    /* ---------- 阴影增强 ----------
     *
     * - 偏移从10px增加到20px
     * - 模糊从30px增加到45px
     * - 透明度从30%增加到40%
     * - 增加了60px的蓝色发光
     */
    box-shadow:
        0 20px 45px rgba(59, 130, 246, 0.4),
        0 0 60px rgba(59, 130, 246, 0.2);
}


/* ================================================
 * 次要按钮样式 (.btn-secondary)
 * ================================================
 *
 * 次要行动号召按钮
 * 透明背景带边框，更低调
 * ================================================ */

.btn-secondary {
    /* 半透明白色背景 */
    background: rgba(255, 255, 255, 0.05);

    /* 文字白色 */
    color: #fff;

    /* 半透明白色边框 */
    border: 1px solid rgba(255, 255, 255, 0.15);

    /* 毛玻璃效果 */
    backdrop-filter: blur(10px);
}


/* ---------- 次要按钮悬停状态 ---------- */

.btn-secondary:hover {
    /* 背景稍微变浓 */
    background: rgba(255, 255, 255, 0.1);

    /* 上浮效果 */
    transform: translateY(-4px);

    /* 边框变为蓝色 */
    border-color: rgba(59, 130, 246, 0.4);

    /* 阴影效果 - 深色阴影 */
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
}


/* ---------- 通栏按钮 ----------
 * 占满容器宽度的按钮 */

.btn-full {
    width: 100%;
}


/* ================================================
 * 区块标题样式
 * ================================================ */
.section-title {
    font-size: 40px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 15px;
    color: #fff;
}

.section-subtitle {
    text-align: center;
    color: #94a3b8;
    font-size: 18px;
    margin-bottom: 50px;
}


/* ================================================
 * 06. 走马灯展示区域 (Marquee Display Areas)
 * ================================================
 *
 * 走马灯（Marquee）是一种经典的网页动画效果
 * 内容水平滚动，常用于新闻滚动、公告、合作伙伴展示等场景
 *
 * 在本页面中的应用：
 * 1. 服务走马灯 - 展示工作室提供的各项服务
 *    - 滚动方向：从右向左 (marquee-right)
 *    - 位置：导航栏下方，英雄区域上方
 *    - 作用：吸引注意力，展示服务范围
 *
 * 2. 项目走马灯 - 展示工作室已完成的项目案例
 *    - 滚动方向：从左向右 (marquee-left)
 *    - 位置：英雄区域下方，服务网格区域上方
 *    - 作用：展示实力和成果，建立信任
 *
 * ================================================
 * 走马灯实现原理
 * ================================================
 *
 * CSS动画实现走马灯的核心技术：
 *
 * 1. 【双倍复制技巧】
 *    - 将走马灯内容复制一份
 *    - 第一份从位置0移动到-50%
 *    - 第二份同时从50%移动到100%
 *    - 由于两份内容相同，看起来就像无缝循环
 *
 * 2. 【translateX 变换】
 *    - 使用CSS transform的translateX属性
 *    - translateX(0) = 原始位置
 *    - translateX(-50%) = 向左移动自身宽度的50%
 *    - GPU加速，性能优秀
 *
 * 3. 【linear 缓动函数】
 *    - linear表示匀速运动
 *    - 与ease-in-out的区别：
 *      - linear：速度恒定，看起来机械
 *      - ease-in-out：开始结束慢，中间快，更自然
 *    - 走马灯用linear是因为：
 *      - 匀速滚动便于阅读内容
 *      - 非匀速会让用户感到不安
 *
 * 4. 【infinite 无限循环】
 *    - 动画永久重复，不停止
 *    - 配合linear实现不间断滚动效果
 *
 * ================================================
 * 服务走马灯区域 (Services Marquee)
 * ================================================
 *
 * 样式特点：
 * - 浅蓝色半透明背景，营造科技感
 * - 上下有细边框线，增加层次感
 * - 与上下区域有明显区分
 * ================================================ */

.services-marquee {
    /* ---------- 外边距 (Margin) ----------
     *
     * margin-top: 80px 将走马灯区域定位在导航栏下方
     * 
     * 计算依据：
     * - 导航栏固定定位(position: fixed)，不占用文档流空间
     * - 导航栏高度约60px（padding: 20px 0 + 内容高度）
     * - 加上20px额外间距
     * - 确保走马灯不与导航栏重叠
     */
    margin-top: 80px;

    /* ---------- 内边距 (Padding) ----------
     *
     * padding: 20px 0 上下各20px，左右为0
     * 减小内边距让内容更紧凑
     */
    padding: 20px 0;

    /* ---------- 背景色 (Background) ----------
     *
     * rgba(59, 130, 246, 0.05) = RGB(59,130,246)，5%不透明度
     *
     * 效果：
     * - 几乎不可见的淡蓝色背景
     * - 与深色主背景形成微妙对比
     * - 营造科技、专业的氛围
     * - 区分走马灯区域与普通内容区
     */
    background: rgba(59, 130, 246, 0.05);

    /* ---------- 溢出隐藏 (Overflow Hidden) ----------
     *
     * 这是实现走马灯效果的关键！
     *
     * 原理：
     * - 走马灯动画会让内容水平移动
     * - 如果overflow visible，内容会溢出容器
     * - 溢出部分会产生滚动条或被浏览器截断
     * - 设置overflow: hidden后，溢出的内容被隐藏
     * - 只显示容器内部的部分
     *
     * 配合策略：
     * - 容器设置overflow: hidden
     * - 内容在容器内部水平滚动
     * - 用户只能看到容器内的内容
     */
    overflow: hidden;

    /* ---------- 区域边框线 ----------
     *
     * 上下细边框作为装饰性分隔线
     *
     * rgba(255, 255, 255, 0.05) = 白色5%透明度
     * 几乎看不见，但定义了区域边界
     */
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}


/* ---------- 走马灯容器 (Marquee Container) ----------
 *
 * 这是实际滚动的容器
 * 采用Flexbox布局，让走马灯项目水平排列
 * ================================================ */

.marquee-container {
    /* ---------- Flexbox布局 ----------
     *
     * display: flex 将容器转为弹性盒
     * 子元素（走马灯项目）会水平排列
     *
     * 默认主轴是水平方向 (row)
     * 子元素从左到右排列
     */
    display: flex;

    /* ---------- 走马灯动画 ----------
     *
     * animation 属性绑定名为 marquee-right 的动画
     *
     * 语法：animation: 名称 时长 缓动函数 循环次数;
     *
     * 30s = 30秒完成一次完整的滚动
     * 较长的时长让滚动不易察觉，内容更易阅读
     *
     * linear = 匀速运动
     * - 优点：内容移动速度恒定，阅读体验稳定
     * - 缺点：开始和结束没有缓冲，稍显生硬
     *
     * infinite = 无限循环
     * - 动画播完后立即重新开始
     * - 视觉效果上是永不停歇的滚动
     */
    animation: marquee-right 30s linear infinite;
}


/* ---------- 从右到左滚动动画 (marquee-right) ----------
 *
 * 关键帧定义动画的中间状态
 * @keyframes 规则用于定义动画序列
 *
 * 工作原理：
 * 1. 定义关键帧（动画进行中的特定时刻）
 * 2. 浏览器自动计算关键帧之间的过渡
 * 3. 将这些过渡应用到元素的属性上
 * ================================================ */

@keyframes marquee-right {
    /* ---------- 起始帧 (0%) ----------
     *
     * transform: translateX(0)
     * - translateX: X轴方向的位移
     * - 0: 不发生位移，元素在初始位置
     *
     * 此时所有走马灯项目排列在可见区域内
     */
    0% {
        transform: translateX(0);
    }

    /* ---------- 结束帧 (100%) ----------
     *
     * transform: translateX(-50%)
     * - 元素向左移动自身宽度的50%
     *
     * 为什么是50%？
     * 因为走马灯容器内的内容被复制了两份！
     * - 第一份从位置0到50%
     * - 第二份从位置50%到100%（内容与第一份相同）
     * - 移动-50%后，第一份的末尾正好接上第二份的开头
     * - 由于两份内容完全相同，视觉上是无缝的
     *
     * 循环效果：
     * - 当动画从100%回到0%时
     * - 实际上是第一份的末尾突然跳到开头
     * - 但因为两份内容相同，用户察觉不到这个跳跃
     */
    100% {
        transform: translateX(-50%);
    }
}


/* ================================================
 * 走马灯单个项目卡片 (Marquee Item Card)
 * ================================================
 *
 * 走马灯中的每一个服务项目卡片
 * 包含图标、标题、描述文字
 *
 * 设计要点：
 * - 固定宽度，确保滚动时大小一致
 * - 半透明背景，融入深色主题
 * - 悬停时有抬起效果，增加交互感
 * - 右边距控制卡片之间的间距
 * ================================================ */

.marquee-item {
    /* ---------- 防止收缩 (Flex Shrink) ----------
     *
     * flex-shrink: 0 表示项目不会收缩
     *
     * 在Flexbox布局中：
     * - flex-shrink: 1 (默认) - 项目可以收缩
     * - flex-shrink: 0 - 项目保持原始宽度
     *
     * 为什么需要flex-shrink: 0？
     * - 走马灯项目需要固定宽度才能正确计算滚动距离
     * - 如果项目被收缩，滚动动画会错乱
     * - 确保每个卡片都是300px宽度
     */
    flex-shrink: 0;

    /* ---------- 固定宽度 (Fixed Width) ----------
     *
     * width: 300px 设置卡片的固定宽度
     *
     * 与max-width的区别：
     * - width: 300px - 始终是300px
     * - max-width: 300px - 最大300px，可以更小
     *
     * 走马灯需要固定宽度是因为：
     * - translateX(-50%) 依赖于已知宽度
     * - 如果宽度不确定，滚动动画无法精确计算
     */
    width: 300px;

    /* ---------- 卡片背景 (Card Background) ----------
     *
     * linear-gradient 实现微妙的渐变效果
     * - 5%不透明度的白色 → 2%不透明度的白色
     * - 从上到下逐渐变淡
     *
     * 效果：
     * - 营造出层次感和深度
     * - 比纯色更有质感
     * - 轻微的玻璃质感
     */
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);

    /* ---------- 边框 (Border) ----------
     *
     * 1px 实线边框
     * 白色10%透明度
     *
     * 作用：
     * - 勾勒出卡片的边界
     * - 在半透明背景上定义形状
     * - 比阴影更明确的边界感
     */
    border: 1px solid rgba(255, 255, 255, 0.1);

    /* ---------- 圆角 (Border Radius) ----------
     *
     * border-radius: 15px
     * - 将直角的四角变成圆角
     * - 15px是比较柔和的圆角值
     *
     * 现代设计趋势：
     * - 圆角让界面更柔和、更友好
     * - 符合Material Design和iOS的设计语言
     * - 避免过于尖锐的边角
     */
    border-radius: 15px;

    /* ---------- 内边距 (Padding) ----------
     *
     * padding: 25px
     * - 内容与卡片边缘保持距离
     * - 让内容呼吸，不显得拥挤
     */
    padding: 25px;

    /* ---------- 右外边距 (Margin Right) ----------
     *
     * margin-right: 25px
     * - 卡片之间的水平间距
     * - 最后一个卡片不需要右边距（由overflow: hidden处理）
     *
     * 使用margin而不是gap的原因：
     * - Flexbox的gap在某些浏览器中可能被内容溢出撑开
     * - margin更可靠地控制间距
     */
    margin-right: 25px;

    /* ---------- 过渡动画 (Transition) ----------
     *
     * transition: all 0.3s
     * - 所有可动画属性在0.3秒内平滑过渡
     *
     * 主要用于：
     * - transform变化（悬停时上浮）
     * - border-color变化（悬停时边框变蓝）
     */
    transition: all 0.3s;
}


/* ---------- 走马灯项目悬停状态 ----------

 * 鼠标悬停在卡片上时的视觉效果
 * ================================================ */

.marquee-item:hover {
    /* ---------- 上浮效果 (Hover Lift) ----------
     *
     * transform: translateY(-5px)
     * - 向上移动5像素
     * - 配合阴影加深，创造"抬起"效果
     *
     * 交互设计原理：
     * - 上浮效果给用户"可点击"的暗示
     * - 阴影加深增强立体感
     * - 边框变蓝表示"聚焦"状态
     */
    transform: translateY(-5px);

    /* ---------- 边框颜色变化 ----------
     *
     * 悬停时边框变为蓝色
     * rgba(59, 130, 246, 0.3) = 蓝色30%透明度
     *
     * 颜色变化提供视觉反馈
     * 用户知道鼠标正在这个元素上
     */
    border-color: rgba(59, 130, 246, 0.3);
}


/* ---------- 走马灯项目图标容器 ----------
 *
 * 包含Font Awesome图标的容器
 * 圆角矩形背景，突出图标
 * ================================================ */

.marquee-icon {
    /* ---------- 尺寸 (Dimensions) ----------
     *
     * width/height: 50px
     * - 正方形的图标容器
     * - 50px足够大，能容纳图标并留白
     */
    width: 50px;
    height: 50px;

    /* ---------- 图标背景 (Icon Background) ----------
     *
     * 蓝紫渐变，20%透明度
     * - rgba(59, 130, 246, 0.2) - 蓝色
     * - rgba(139, 92, 246, 0.2) - 紫色
     *
     * 与主色调呼应：
     * - 蓝紫渐变是科技感的代表
     * - 半透明让背景内容隐约可见
     */
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(139, 92, 246, 0.2) 100%);

    /* ---------- 圆角矩形 ----------
     *
     * border-radius: 12px
     * - 12px比卡片的15px稍小
     * - 保持设计一致性
     */
    border-radius: 12px;

    /* ---------- Flexbox居中 ----------
     *
     * display: flex
     * - 启用弹性盒布局
     *
     * align-items/justify-content: center
     * - 图标在容器内水平和垂直居中
     *
     * 完美居中的常用写法：
     * .parent {
     *     display: flex;
     *     align-items: center;
     *     justify-content: center;
     * }
     */
    display: flex;
    align-items: center;
    justify-content: center;

    /* ---------- 下边距 ----------
     *
     * margin-bottom: 15px
     * - 图标与下方标题的距离
     * - 让布局更舒展
     */
    margin-bottom: 15px;
}


/* ---------- 图标样式 ----------

 * Font Awesome图标的样式
 * ================================================ */

.marquee-icon i {
    /* ---------- 图标尺寸 ----------
     *
     * font-size: 24px
     * - Font Awesome是图标字体，所以用font-size控制大小
     * - 24px比一般文字大，比图标容器小
     * - 留有足够空间避免拥挤
     */
    font-size: 24px;

    /* ---------- 图标颜色 ----------
     *
     * color: #3b82f6
     * - 使用主色调蓝色
     * - 与背景的蓝色呼应
     * - 保持视觉一致性
     */
    color: #3b82f6;
}


/* ---------- 走马灯项目标题 ----------

 * 服务项目的名称
 * ================================================ */

.marquee-item h4 {
    /* 字体大小 - 18px */
    font-size: 18px;

    /* 下边距 - 与描述文字的间距 */
    margin-bottom: 10px;

    /* 标题颜色 - 纯白色 */
    color: #fff;
}


/* ---------- 走马灯项目描述 ----------

 * 服务项目的简短描述
 * ================================================ */

.marquee-item p {
    /* 描述颜色 - 灰蓝色，比标题淡 */
    color: #94a3b8;

    /* 字体大小 - 14px，较小 */
    font-size: 14px;

    /* 行高 - 1.6倍
     * - 让文字有足够的呼吸空间
     * - 每行之间不显拥挤
     */
    line-height: 1.6;
}


/* ================================================
 * 07. 服务网格区域 (Services Grid Section)
 * ================================================
 *
 * 展示工作室提供的各项服务
 * 采用CSS Grid网格布局，实现响应式卡片排列
 *
 * 设计特点：
 * - 网格布局自动适应不同屏幕宽度
 * - 卡片有精致的悬停动画效果
 * - 顶部渐变条增加视觉层次
 * - 毛玻璃效果增强现代感
 * ================================================ */

.services {
    /* ---------- 垂直内边距 ----------
     *
     * padding: 30px 0
     * - 上下各30px的内边距
     * - 减小间距让页面更紧凑
     */
    padding: 30px 0;
}


/* ================================================
 * 服务网格容器 (Services Grid Container)
 * ================================================
 *
 * CSS Grid布局核心：
 * - repeat(auto-fit, minmax(...)) 实现响应式列数
 * - 自动根据容器宽度调整列数
 * - 无需媒体查询即可实现响应式
 * ================================================ */

.services-grid {
    /* ---------- Grid网格布局 ----------
     *
     * display: grid 启用CSS网格布局
     *
     * 网格布局 vs Flexbox：
     * - Flexbox是单轴布局（水平或垂直）
     * - Grid是双轴布局（同时控制行和列）
     * - Grid更适合二维布局（行列同时）
     */
    display: grid;

    /* ---------- 响应式列配置 ----------
     *
     * grid-template-columns: repeat(auto-fit, minmax(320px, 1fr))
     *
     * 各部分解析：
     *
     * 1. repeat(auto-fit, ...)
     *    - auto-fit：自动填充尽可能多的列
     *    - 根据容器宽度和最小列宽自动计算列数
     *
     * 2. minmax(320px, 1fr)
     *    - 最小列宽：320px
     *    - 最大列宽：1fr（等分剩余空间）
     *
     * 工作原理：
     * - 如果容器宽度 > 320px×n，则放n列
     * - 如果容器宽度 < 320px×(n-1)，则减少一列
     * - 每列至少320px，不足时换行
     * - 多余空间平均分配给每列（1fr）
     *
     * 例如在1200px容器中：
     * - 320px×3 = 960px，剩余240px
     * - 每列变为：320px + 80px = 400px
     * - 结果：3列，每列400px
     */
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));

    /* ---------- 网格间距 (Gap) ----------
     *
     * gap: 30px
     * - 同时设置行间距和列间距
     * - 相当于 row-gap: 30px 和 column-gap: 30px
     *
     * Grid的gap优势：
     * - 比margin更简洁
     * - 只增加项目之间的间距，不影响外部
     * - 在任何列数下都自动应用
     */
    gap: 30px;
}


/* ================================================
 * 服务卡片样式 (Service Card)
 * ================================================
 *
 * 每项服务的展示卡片
 * 包含图标、标题、描述
 *
 * 交互效果：
 * - 悬停时卡片上浮 + 轻微放大
 * - 顶部渐变条展开
 * - 边框颜色变蓝
 * - 阴影加深增强立体感
 * ================================================ */

.service-card {
    /* ---------- 卡片背景 ----------
     *
     * 渐变背景：5%白 → 2%白
     * 营造毛玻璃般的视觉效果
     */
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);

    /* ---------- 卡片边框 ----------
     *
     * 1px实线边框，白色8%透明度
     * 勾勒卡片边界，与背景区分
     */
    border: 1px solid rgba(255, 255, 255, 0.08);

    /* ---------- 圆角 ----------
     *
     * border-radius: 24px
     * - 较大的圆角，24px
     * - 营造柔和、友好的感觉
     * - 比走马灯卡片的15px更大
     * - 卡片更大，圆角也相应更大
     */
    border-radius: 24px;

    /* ---------- 内边距 ----------
     *
     * padding: 45px 35px
     * - 上下45px，左右35px
     *
     * 较大的内边距：
     * - 让内容不显得拥挤
     * - 卡片有更多"留白"
     * - 符合现代简约设计趋势
     */
    padding: 45px 35px;

    /* ---------- 过渡动画 ----------
     *
     * transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1)
     * - 所有可动画属性
     * - 0.4秒过渡时间
     * - Material Design标准曲线
     *
     * cubic-bezier(0.4, 0, 0.2, 1) 的含义：
     * - 开始快，结束慢的缓动效果
     * - 模拟真实物理世界的运动
     * - 更加自然、流畅
     */
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);

    /* ---------- 相对定位 ----------
     *
     * position: relative
     * - 为 ::before 和 ::after 伪元素提供定位参考
     * - 伪元素会相对于此卡片定位
     */
    position: relative;

    /* ---------- 溢出隐藏 ----------
     *
     * overflow: hidden
     * - 隐藏伪元素超出的部分
     * - 确保动画不会影响布局
     */
    overflow: hidden;

    /* ---------- 毛玻璃效果 ----------
     *
     * backdrop-filter: blur(10px)
     * - 模糊卡片后方的背景
     * - 增强层次感和现代感
     */
    backdrop-filter: blur(10px);
}


/* ================================================
 * 服务卡片样式
 * ================================================ */
.service-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    padding: 45px 35px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(10px);
}


/* ================================================
 * 服务卡片顶部渐变条 (Service Card Top Gradient Bar)
 * ================================================
 *
 * 使用 ::before 伪元素创建顶部装饰条
 * 悬停时从左到右展开
 *
 * 技术要点：
 * - 伪元素默认宽度为0（scaleX(0)）
 * - 悬停时宽度变为100%（scaleX(1)）
 * - transform-origin: left 从左侧开始展开
 * ================================================ */

.service-card::before {
    /* ---------- 伪元素内容 ----------
     *
     * content: '' 是伪元素的必要属性
     * 即使是空字符串也必须设置
     * 没有content属性，伪元素不会显示
     */
    content: '';

    /* ---------- 绝对定位 ----------
     *
     * position: absolute
     * - 相对于.service-card定位
     * - 脱离文档流，不占用空间
     */
    position: absolute;

    /* ---------- 位置控制 ----------
     *
     * top: 0 - 紧贴卡片顶部
     * left: 0 - 从左侧边缘开始
     * right: 0 - 延伸到右侧边缘
     */
    top: 0;
    left: 0;
    right: 0;

    /* ---------- 渐变条高度 ----------
     *
     * height: 4px
     * - 4像素的高度
     * - 足够显眼但不喧宾夺主
     */
    height: 4px;

    /* ---------- 渐变背景 ----------
     *
     * linear-gradient(90deg, 蓝, 紫, 青)
     *
     * 三色渐变效果：
     * - #3b82f6 - 蓝色（主色调）
     * - #8b5cf6 - 紫色（次要色）
     * - #06b6d4 - 青色（强调色）
     *
     * 90deg = 从左到右的水平渐变
     */
    background: linear-gradient(90deg, #3b82f6, #8b5cf6, #06b6d4);

    /* ---------- 初始状态：隐藏 ----------
     *
     * transform: scaleX(0)
     * - scaleX: X轴方向的缩放
     * - 0 = 完全不显示（宽度为0）
     */
    transform: scaleX(0);

    /* ---------- 变换原点 ----------
     *
     * transform-origin: left
     * - 缩放/旋转的基准点
     * - left = 左侧边缘作为基准
     *
     * 效果：
     * - 从左侧开始向右展开
     * - 如果是right，则从右向左展开
     */
    transform-origin: left;

    /* ---------- 过渡动画 ----------
     *
     * transition: transform 0.4s
     * - 只动画transform属性
     * - 0.4秒完成
     */
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}


/* ================================================
 * 服务卡片光效 (Service Card Glow Effect)
 * ================================================
 *
 * 使用 ::after 伪元素创建悬停时的发光效果
 * 从右上方向下扩散的径向渐变
 * ================================================ */

.service-card::after {
    /* 伪元素内容 - 空字符串 */
    content: '';

    /* 绝对定位，相对于卡片 */
    position: absolute;

    /* ---------- 位置控制 ----------
     *
     * top: -50%
     * - 将元素的顶部定位到卡片垂直中心的上方
     * - 这样元素大部分在卡片外部
     *
     * right: -50%
     * - 将元素的右边缘定位到卡片水平中心的右侧
     * - 元素大部分在卡片外部
     *
     * 效果：元素从右上角开始，向左下延伸
     */
    top: -50%;
    right: -50%;

    /* ---------- 尺寸 ----------
     *
     * width: 100%
     * height: 100%
     * - 与卡片相同尺寸
     *
     * 由于位置是-50%，实际覆盖区域是：
     * - 水平：50%到150%
     * - 垂直：-50%到50%
     * - 从右上角开始
     */
    width: 100%;
    height: 100%;

    /* ---------- 径向渐变 ----------
     *
     * radial-gradient(circle, 蓝色, 透明)
     *
     * 参数解析：
     * - circle - 圆形的渐变（而不是椭圆）
     * - rgba(59, 130, 246, 0.1) 0% - 圆心处是蓝色10%透明度
     * - transparent 70% - 70%处渐变到完全透明
     *
     * 效果：
     * - 圆心处有轻微的蓝色发光
     * - 向外逐渐透明
     * - 70%之外完全看不见
     */
    background: radial-gradient(circle, rgba(59, 130, 246, 0.1) 0%, transparent 70%);

    /* ---------- 初始状态：隐藏 ----------
     *
     * transform: scale(0)
     * - 完全缩小到不可见
     * - 元素尺寸为0
     */
    transform: scale(0);

    /* ---------- 过渡 ----------
     *
     * transition: transform 0.4s
     * - 只动画transform属性
     * - 0.4秒完成
     */
    transition: transform 0.4s;
}


/* ================================================
 * 服务卡片悬停状态
 * ================================================
 */

.service-card:hover {
    /* ---------- 上浮+放大 ----------
     *
     * transform: translateY(-12px) scale(1.02)
     *
     * 两个变换组合：
     * 1. translateY(-12px) - 向上移动12像素
     * 2. scale(1.02) - 放大2%
     *
     * 效果：
     * - 卡片明显"抬起"
     * - 轻微放大增加存在感
     * - 阴影随之加深
     */
    transform: translateY(-12px) scale(1.02);

    /* ---------- 边框颜色变化 ----------
     *
     * 悬停时边框变为蓝色
     * rgba(59, 130, 246, 0.4) = 蓝色40%透明度
     */
    border-color: rgba(59, 130, 246, 0.4);

    /* ---------- 阴影效果 ----------
     *
     * 多层阴影叠加：
     *
     * 第一层：深色阴影
     * - 0 25px 70px - Y偏移25px，模糊70px
     * - rgba(0, 0, 0, 0.4) - 黑色40%透明度
     * - 创造卡片"浮起"的投影
     *
     * 第二层：蓝色发光
     * - 0 0 40px - 居中模糊40px
     * - rgba(59, 130, 246, 0.15) - 蓝色15%透明度
     * - 创造科技感的边缘发光
     */
    box-shadow:
        0 25px 70px rgba(0, 0, 0, 0.4),
        0 0 40px rgba(59, 130, 246, 0.15);
}


/* ---------- 悬停时渐变条展开 ---------- */

.service-card:hover::before {
    /* scaleX(1) - 宽度变为100% */
    transform: scaleX(1);
}


/* ---------- 悬停时光效展开 ---------- */

.service-card:hover::after {
    /* scale(1.5) - 放大到150% */
    transform: scale(1.5);
}


/* ================================================
 * 服务卡片图标 (Service Card Icon)
 * ================================================
 *
 * 服务卡片的视觉焦点元素
 * 圆角矩形容器，内含Font Awesome图标
 *
 * 悬停效果：
 * - 整个图标容器放大
 * - 添加阴影
 * - 图标颜色从蓝变紫
 * - 图标添加发光效果
 * ================================================ */

.service-icon {
    /* ---------- 尺寸 ----------
     *
     * width/height: 75px
     * - 正方形容器
     * - 75px比走马灯图标的50px更大
     * - 作为服务卡片的主要视觉元素，需要更大
     */
    width: 75px;
    height: 75px;

    /* ---------- 图标背景 ----------
     *
     * 蓝紫渐变，25%透明度
     * 比走马灯图标的20%稍浓
     */
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.25) 0%, rgba(139, 92, 246, 0.25) 100%);

    /* ---------- 圆角 ----------
     *
     * border-radius: 20px
     * - 20px的圆角
     * - 比卡片的24px稍小
     */
    border-radius: 20px;

    /* ---------- Flexbox居中 ----------
     *
     * display: flex
     * align-items/justify-content: center
     *
     * 图标在容器内完全居中
     */
    display: flex;
    align-items: center;
    justify-content: center;

    /* ---------- 下边距 ----------
     *
     * margin-bottom: 28px
     * - 图标与标题之间的间距
     * - 28px比走马灯图标的15px更大
     * - 因为服务卡片整体更大
     */
    margin-bottom: 28px;

    /* ---------- 过渡动画 ----------
     *
     * transition: all 0.4s
     * - 所有属性在0.4秒内过渡
     */
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);

    /* ---------- 边框 ----------
     *
     * 蓝色边框，20%透明度
     */
    border: 1px solid rgba(59, 130, 246, 0.2);
}


/* ---------- 服务图标内的Font Awesome图标 ---------- */

.service-icon i {
    /* 字体大小 - 34px，比走马灯图标的24px更大 */
    font-size: 34px;

    /* 图标颜色 - 蓝色 */
    color: #3b82f6;

    /* 过渡动画 */
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}


/* ---------- 服务图标悬停状态 ---------- */

.service-card:hover .service-icon {
    /* ---------- 放大效果 ----------
     *
     * scale(1.15) - 放大到115%
     */
    transform: scale(1.15);

    /* ---------- 阴影效果 ----------
     *
     * 蓝色阴影，30%透明度
     * 创造发光效果
     */
    box-shadow: 0 10px 30px rgba(59, 130, 246, 0.3);
}


/* ---------- 图标悬停状态 ---------- */

.service-card:hover .service-icon i {
    /* 颜色变为紫色 */
    color: #8b5cf6;

    /* ---------- 发光滤镜 ----------
     *
     * filter: drop-shadow(0 0 10px 颜色)
     *
     * drop-shadow是CSS的阴影滤镜
     * - 不同于box-shadow
     * - 可以给PNG等透明图片的像素添加阴影
     * - 10px的模糊半径
     * - 蓝色50%透明度
     *
     * 效果：图标周围有发光效果
     */
    filter: drop-shadow(0 0 10px rgba(59, 130, 246, 0.5));
}


/* ---------- 服务卡片标题 ---------- */

.service-card h3 {
    /* 字体大小 - 22px */
    font-size: 22px;

    /* 下边距 - 与描述的间距 */
    margin-bottom: 15px;

    /* 颜色 - 白色 */
    color: #fff;
}


/* ---------- 服务卡片描述 ---------- */

.service-card p {
    /* 描述颜色 - 灰蓝色 */
    color: #94a3b8;

    /* 行高 - 1.8倍 */
    line-height: 1.8;
}


/* ================================================
 * 08. 项目走马灯区域 (Projects Marquee Section)
 * ================================================
 *
 * 展示工作室已完成的项目案例
 * 采用从左到右的滚动方向，与服务走马灯形成对比
 *
 * 设计差异：
 * - 背景色使用紫色调（与蓝色服务区区分）
 * - 项目卡片更大，包含图片展示
 * - 卡片悬停时有图片放大效果
 * ================================================ */

.projects-marquee {
    /* ---------- 垂直内边距 ----------
     *
     * padding: 25px 0
     * - 上下各25px
     * - 减小间距让页面更紧凑
     */
    padding: 25px 0;

    /* ---------- 背景色 ----------
     *
     * rgba(139, 92, 246, 0.03) = 紫色3%透明度
     * 比服务走马灯的蓝色5%更淡
     * 紫色调与蓝色形成对比
     */
    background: rgba(139, 92, 246, 0.03);

    /* ---------- 溢出隐藏 ----------
     *
     * 关键！允许内容水平滚动
     */
    overflow: hidden;
}


/* ---------- 项目走马灯标题 ---------- */

.projects-marquee .section-title {
    /* 下边距 - 与下方内容的间距 */
    margin-bottom: 25px;
}


/* ================================================
 * 项目走马灯容器 (Projects Marquee Container)
 * ================================================
 *
 * 与服务走马灯类似的结构
 * 但动画方向相反：从左到右
 * ================================================ */

.projects-marquee-container {
    /* Flexbox布局 */
    display: flex;

    /* ---------- marquee-left动画 ----------
     *
     * 与marquee-right相反的方向
     * transform: translateX(-50%) 到 translateX(0)
     *
     * 动画时长35秒，比服务走马灯的30秒稍长
     * 因为项目卡片更大，需要更多时间阅读
     */
    animation: marquee-left 35s linear infinite;
}


/* ================================================
 * 从左到右滚动动画 (marquee-left)
 * ================================================
 *
 * 与marquee-right相反的滚动方向
 * 用于项目展示，给用户不同的视觉节奏
 * ================================================ */

@keyframes marquee-left {
    /* ---------- 起始帧 ----------
     *
     * translateX(-50%)
     * - 元素从-50%位置开始（向左偏移）
     *
     * 配合双倍复制技巧：
     * - 初始时，第二份内容在视口右侧可见
     * - 第一份内容在视口左侧之外（被隐藏）
     */
    0% {
        transform: translateX(-50%);
    }

    /* ---------- 结束帧 ----------
     *
     * translateX(0)
     * - 元素回到原始位置
     * - 第二份内容移动到视口左侧之外
     * - 第一份内容移动到视口中央可见
     *
     * 视觉效果：
     * - 内容从右向左推进
     * - 与服务走马灯方向相反
     * - 避免视觉疲劳
     */
    100% {
        transform: translateX(0);
    }
}


/* ================================================
 * 项目卡片样式 (Project Card)
 * ================================================
 *
 * 项目走马灯中的单个项目展示卡片
 * 包含图片、标题、描述
 *
 * 与服务卡片的不同：
 * - 卡片更宽（360px vs 300px）
 * - 包含图片展示区域
 * - 悬停时有图片放大效果
 * ================================================ */

.project-card {
    /* ---------- 防止收缩 ----------
     *
     * flex-shrink: 0
     * - 项目不会收缩，保持固定宽度
     */
    flex-shrink: 0;

    /* ---------- 固定宽度 ----------
     *
     * width: 360px
     * - 比服务卡片的300px更宽
     * - 因为需要展示图片内容
     */
    width: 360px;

    /* ---------- 卡片背景 ----------
     *
     * 渐变背景：6%白 → 2%白
     * 比服务卡片的5%稍浓
     */
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 100%);

    /* ---------- 边框 ----------
     *
     * 1px实线，白色8%透明度
     */
    border: 1px solid rgba(255, 255, 255, 0.08);

    /* ---------- 圆角 ----------
     *
     * border-radius: 24px
     * 与服务卡片相同
     */
    border-radius: 24px;

    /* ---------- 溢出隐藏 ----------
     *
     * 隐藏图片放大时超出的部分
     */
    overflow: hidden;

    /* ---------- 右外边距 ----------
     *
     * margin-right: 35px
     * - 比服务卡片的25px更大
     * - 卡片更宽，需要更大的间距
     */
    margin-right: 35px;

    /* ---------- 过渡动画 ----------
     *
     * transition: all 0.4s
     */
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);

    /* ---------- 鼠标样式 ----------
     *
     * cursor: pointer
     * - 鼠标变为手型，表示可点击
     */
    cursor: pointer;

    /* ---------- 毛玻璃效果 ----------
     *
     * backdrop-filter: blur(10px)
     */
    backdrop-filter: blur(10px);

    /* ---------- 相对定位 ----------
     *
     * 为 ::before 伪元素提供定位参考
     */
    position: relative;
}


/* ================================================
 * 项目卡片顶部渐变条
 * ================================================
 *
 * 位于卡片顶部的装饰条
 * 蓝紫青三色渐变
 * ================================================ */

.project-card::before {
    /* 伪元素内容 */
    content: '';

    /* 绝对定位 */
    position: absolute;

    /* ---------- 位置 ----------
     *
     * top: 0 - 紧贴顶部
     * left: 0 - 从左侧开始
     * right: 0 - 延伸到右侧
     */
    top: 0;
    left: 0;
    right: 0;

    /* 高度：3px，比服务卡片的4px稍薄 */
    height: 3px;

    /* ---------- 渐变背景 ----------
     *
     * 蓝紫青渐变
     * 注意顺序与 ::before 不同
     * 这里是 紫→蓝→青
     */
    background: linear-gradient(90deg, #8b5cf6, #3b82f6, #06b6d4);

    /* 初始状态：隐藏 */
    transform: scaleX(0);

    /* 从左侧开始展开 */
    transform-origin: left;

    /* 过渡动画 */
    transition: transform 0.4s;
}


/* ================================================
 * 项目卡片悬停状态
 * ================================================
 */

.project-card:hover {
    /* 上浮+放大 */
    transform: translateY(-10px) scale(1.02);

    /* 边框变紫色 */
    border-color: rgba(139, 92, 246, 0.5);

    /* ---------- 多层阴影 ----------
     *
     * 深色阴影 + 紫色发光
     */
    box-shadow:
        0 30px 70px rgba(0, 0, 0, 0.4),
        0 0 50px rgba(139, 92, 246, 0.15);
}


/* 悬停时渐变条展开 */
.project-card:hover::before {
    transform: scaleX(1);
}


/* ================================================
 * 项目卡片图片区域 (Project Card Image Area)
 * ================================================
 *
 * 包含项目封面图的区域
 * 悬停时图片会放大，添加遮罩层
 * ================================================ */

.project-image {
    /* ---------- 尺寸 ----------
     *
     * width: 100% - 与卡片同宽
     * height: 190px - 固定高度
     *
     * aspect-ratio 尚未设置
     * 使用固定高度控制图片区域大小
     */
    width: 100%;
    height: 190px;

    /* ---------- 渐变背景 ----------
     *
     * 蓝紫渐变，20%透明度
     * 作为图片的占位背景
     * 当没有实际图片时显示
     */
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.2) 0%, rgba(59, 130, 246, 0.2) 100%);

    /* Flexbox布局 */
    display: flex;

    /* 水平和垂直居中 */
    align-items: center;
    justify-content: center;

    /* 相对定位，为 ::after 遮罩提供参考 */
    position: relative;

    /* 溢出隐藏 */
    overflow: hidden;
}


/* ================================================
 * 图片遮罩层 (Image Overlay)
 * ================================================
 *
 * 使用 ::after 伪元素创建遮罩层
 * 悬停时渐变显示，增强图片层次感
 * ================================================ */

.project-image::after {
    /* 伪元素内容 */
    content: '';

    /* 绝对定位，填满整个容器 */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    /* ---------- 渐变遮罩 ----------
     *
     * linear-gradient(180deg, 透明, 半透明黑)
     *
     * 180deg = 从上到下的垂直渐变
     * - 顶部：完全透明
     * - 底部：60%不透明度的黑色
     *
     * 效果：
     * - 图片下方渐变为暗色
     * - 让文字在图片上更易读
     * - 增加图片的深度感
     */
    background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.6) 100%);

    /* 初始状态：隐藏 */
    opacity: 0;

    /* 过渡动画 */
    transition: opacity 0.3s;
}


/* ---------- 悬停时显示遮罩 ---------- */

.project-card:hover .project-image::after {
    opacity: 1;
}


/* ---------- 项目封面图片 ---------- */

.project-image img {
    /* 图片宽度和高度与容器相同 */
    width: 100%;
    height: 100%;

    /* ---------- 图片填充方式 ----------
     *
     * object-fit: cover
     *
     * 类似background-size的cover
     * - 保持图片原始宽高比
     * - 缩放图片以填满容器
     * - 超出的部分被裁剪
     *
     * 与contain的区别：
     * - cover：填满，可能裁剪
     * - contain：完整显示，可能留白
     */
    object-fit: cover;

    /* 过渡动画 - 用于悬停时放大 */
    transition: transform 0.5s;
}


/* ---------- 悬停时图片放大 ---------- */

.project-card:hover .project-image img {
    /* scale(1.1) - 放大到110% */
    transform: scale(1.1);
}


/* ---------- 图片占位图标 ---------- */

.project-image .placeholder-icon {
    /* 图标大小 - 65px */
    font-size: 65px;

    /* 颜色 - 紫色30%透明度 */
    color: rgba(139, 92, 246, 0.4);
}


/* ================================================
 * 项目卡片内容区域 (Project Card Content)
 * ================================================
 *
 * 包含项目名称和描述的文字区域
 * 位于图片下方
 * ================================================ */

.project-content {
    /* ---------- 内边距 ----------
     *
     * padding: 28px
     * - 与图片区域相邻的内边距
     * - 让内容不紧贴图片边缘
     */
    padding: 28px;
}


/* ---------- 项目标题 ---------- */

.project-content h4 {
    /* 字体大小 - 20px */
    font-size: 20px;

    /* 下边距 - 与描述的间距 */
    margin-bottom: 12px;

    /* 字体粗细 - 600 = Semi Bold */
    font-weight: 600;

    /* 颜色 - 白色 */
    color: #fff;

    /* 过渡动画 */
    transition: color 0.3s;
}


/* ---------- 项目标题悬停状态 ---------- */

.project-card:hover .project-content h4 {
    /* 悬停时变为浅蓝色 */
    color: #a5b4fc;
}


/* ---------- 项目描述 ---------- */

.project-content p {
    /* 描述颜色 - 灰蓝色 */
    color: #94a3b8;

    /* 字体大小 - 14px */
    font-size: 14px;

    /* 行高 - 1.7倍 */
    line-height: 1.7;

    /* ---------- 文字截断 ----------
     *
     * 多行文字超过两行时截断
     * 显示省略号 (...)
     *
     * 三个属性配合实现：
     *
     * 1. display: -webkit-box
     *    - 使用弹性盒模型（WebKit内核专用）
     *    - 配合-webkit-line-clamp限制行数
     *
     * 2. -webkit-line-clamp: 2
     *    - 限制最多显示2行
     *    - 超出2行的内容被隐藏
     *
     * 3. -webkit-box-orient: vertical
     *    - 设置盒子的排列方向为垂直
     *    - 让文本从上到下排列
     */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;

    /* 溢出隐藏 */
    overflow: hidden;
}


/* ================================================
 * 09. 关于我们区域 (About Us Section)
 * ================================================
 *
 * 介绍工作室的基本信息和核心优势
 * 采用双栏布局：左侧文字，右侧图片
 *
 * 设计特点：
 * - 蓝紫渐变背景
 * - 左侧展示工作室描述和优势列表
 * - 右侧展示占位图片或图标动画
 * ================================================ */

.about {
    /* ---------- 垂直内边距 ----------
     *
     * padding: 30px 0
     * - 减小间距让页面更紧凑
     */
    padding: 30px 0;

    /* ---------- 背景渐变 ----------
     *
     * 蓝紫渐变，3%透明度
     * 营造专业、可信的氛围
     */
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.03) 0%, rgba(139, 92, 246, 0.03) 100%);
}


/* ================================================
 * 关于我们内容容器 (About Us Content)
 * ================================================
 *
 * 双栏Grid布局
 * ================================================ */

.about-content {
    /* ---------- Grid网格布局 ----------
     *
     * display: grid
     * - 启用CSS网格布局
     */
    display: grid;

    /* ---------- 双栏配置 ----------
     *
     * grid-template-columns: 1fr 1fr
     * - 两列等宽布局
     * - 1fr = 一份_fraction（可用空间的一份）
     *
     * 也可以写作：
     * - repeat(2, 50%)
     * - 50% 50%
     *
     * 效果：
     * - 左侧列宽度 = 右侧列宽度
     * - 在≤768px时变为单列
     */
    grid-template-columns: 1fr 1fr;

    /* ---------- 列间距 ----------
     *
     * gap: 40px
     * - 左右两列之间的间距
     */
    gap: 40px;

    /* ---------- 垂直居中对齐 ----------
     *
     * align-items: center
     * - 让左右两列垂直居中对齐
     * - 如果内容高度不同，也能完美对齐
     */
    align-items: center;
}


/* ================================================
 * 关于我们文字区域 (About Text)
 * ================================================ */

.about-text h2 {
    /* 左对齐，不同于其他section的居中 */
    text-align: left;

    /* 下边距 - 与正文的间距 */
    margin-bottom: 25px;
}


/* ---------- 关于我们正文 ---------- */

.about-text p {
    /* 正文颜色 - 灰蓝色 */
    color: #94a3b8;

    /* 下边距 - 段落之间的间距 */
    margin-bottom: 20px;

    /* 字体大小 - 16px */
    font-size: 16px;

    /* 行高 - 1.8倍 */
    line-height: 1.8;
}


/* ================================================
 * 优势列表区域 (Features List)
 * ================================================
 *
 * 展示工作室的核心优势和特点
 * ================================================ */

.about-features {
    /* Flexbox水平布局 */
    display: flex;

    /* ---------- 项目间距 ----------
     *
     * gap: 30px
     * - 各个优势之间的间距
     */
    gap: 30px;

    /* 上边距 - 与上方正文的间距 */
    margin-top: 30px;
}


/* ================================================
 * 单个优势项 (Feature Item)
 * ================================================ */

.feature {
    /* Flexbox布局 - 图标和文字水平排列 */
    display: flex;

    /* 垂直居中对齐 */
    align-items: center;

    /* 优势文字颜色 */
    color: #cbd5e1;

    /* gap: 10px - 图标与文字的间距 */
    gap: 10px;
}


/* ---------- 优势图标 ---------- */

.feature i {
    /* 绿色图标 - 表示成功/正面 */
    color: #22c55e;

    /* 图标大小 - 20px */
    font-size: 20px;
}


/* ================================================
 * 关于我们图片区域 (About Image)
 * ================================================
 *
 * 右侧图片展示区域
 * 包含一个带动画的占位图标
 * ================================================ */

.about-image {
    /* Flexbox居中 */
    display: flex;
    justify-content: center;
}


/* ---------- 图片占位符容器 ---------- */

.image-placeholder {
    /* 最大宽度 - 400px */
    width: 100%;
    max-width: 400px;

    /* ---------- 纵横比 ----------
     *
     * aspect-ratio: 1
     * - 宽度与高度比例为1:1（正方形）
     * - 容器会是正方形
     *
     * 注意：如果内容超出，容器会被撑开
     * 但这里设置了overflow: hidden在外面
     */
    aspect-ratio: 1;

    /* ---------- 渐变背景 ----------
     *
     * 蓝紫渐变，10%透明度
     */
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%);

    /* 圆角 - 30px */
    border-radius: 30px;

    /* Flexbox居中 */
    display: flex;
    align-items: center;
    justify-content: center;

    /* 边框 - 白色10%透明度 */
    border: 1px solid rgba(255, 255, 255, 0.1);
}


/* ---------- 占位图标 ---------- */

.image-placeholder i {
    /* 图标大小 - 100px */
    font-size: 100px;

    /* 蓝色图标 */
    color: #3b82f6;

    /* 应用pulse动画 */
    animation: pulse 2s infinite;
}


/* ================================================
 * 脉冲动画 (Pulse Animation)
 * ================================================
 *
 * 图标持续放大缩小的动画
 * 吸引用户注意力
 * ================================================ */

@keyframes pulse {
    /* 起始帧 - 正常大小 */
    0%, 100% {
        transform: scale(1);
    }

    /* 中间帧 - 放大到105% */
    50% {
        transform: scale(1.05);
    }
}


/* ================================================
 * 10. 行动号召区域 (Call To Action / CTA Section)
 * ================================================
 *
 * CTA是网页设计中最重要的部分之一
 * 用于引导用户进行下一步操作（如联系、购买等）
 *
 * 设计要点：
 * - 简洁有力，明确传达价值
 * - 视觉上突出，与周围内容区分
 * - 提供清晰的行动指引
 * ================================================ */

.cta {
    /* ---------- 垂直内边距 ----------
     *
     * padding: 30px 0
     * - 减小间距让页面更紧凑
     */
    padding: 30px 0;

    /* 文字居中 */
    text-align: center;

    /* 相对定位，为 ::before 分隔线提供参考 */
    position: relative;
}


/* ================================================
 * CTA区域装饰性分隔线
 * ================================================
 *
 * 使用 ::before 伪元素创建
 * 水平渐变线条，分隔CTA与上方内容
 * ================================================ */

.cta::before {
    /* 伪元素内容 */
    content: '';

    /* 绝对定位 */
    position: absolute;

    /* ---------- 位置控制 ----------
     *
     * top: 0 - 位于区域顶部
     * left: 50% - 水平居中
     */
    top: 0;
    left: 50%;

    /* ---------- 变换 ----------
     *
     * transform: translateX(-50%)
     * - 向左平移自身宽度的50%
     * - 实现真正的水平居中
     */
    transform: translateX(-50%);

    /* ---------- 线条尺寸 ----------
     *
     * width: 80% - 线条宽度为容器的80%
     * height: 1px - 1像素高度
     */
    width: 80%;
    height: 1px;

    /* ---------- 渐变背景 ----------
     *
     * 透明 → 蓝色30% → 透明
     * 创造左右渐变消失的效果
     * 让分隔线不那么突兀
     */
    background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.3), transparent);
}


/* ---------- CTA标题 ---------- */

.cta h2 {
    /* 字体大小 - 36px */
    font-size: 36px;

    /* 下边距 - 与描述的间距 */
    margin-bottom: 15px;

    /* 颜色 - 白色 */
    color: #fff;
}


/* ---------- CTA描述文字 ---------- */

.cta p {
    /* 正文颜色 - 灰蓝色 */
    color: #94a3b8;

    /* 下边距 - 与按钮的间距 */
    margin-bottom: 30px;

    /* 字体大小 - 18px */
    font-size: 18px;
}


/* ================================================
 * 11. 页脚区域 (Footer Section)
 * ================================================
 *
 * 网站的底部区域
 * 包含联系方式、链接、版权信息等
 *
 * 设计特点：
 * - 深色背景，与主内容区分
 * - 三列Grid布局
 * - 信息层次清晰
 * ================================================ */

.footer {
    /* ---------- 背景色 ----------
     *
     * #0a0f1a 是比主背景更深的颜色
     * - 视觉上区分页脚
     * - 创造"到底了"的感觉
     */
    background: #0a0f1a;

    /* 内边距 - 上下30px/15px，左右0
     * - 减小间距让页面更紧凑 */
    padding: 30px 0 15px;

    /* 上边框 - 白色5%透明度 */
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}


/* ================================================
 * 页脚内容区域 (Footer Content)
 * ================================================
 *
 * 三列Grid布局
 * ================================================ */

.footer-content {
    /* Grid布局 - 三列 */
    display: grid;

    /* ---------- 列配置 ----------
     *
     * grid-template-columns: 2fr 1fr 1fr
     *
     * 三列布局：
     * - 第一列（工作室信息）：2份宽度
     * - 第二列（快速链接）：1份宽度
     * - 第三列（联系方式）：1份宽度
     *
     * 总共4份，第一列占2份，后两列各1份
     */
    grid-template-columns: 2fr 1fr 1fr;

    /* 行间距 - 40px */
    gap: 50px;

    /* 下边距 - 与底部版权信息的间距 */
    margin-bottom: 40px;
}


/* ================================================
 * 页脚各栏通用样式
 * ================================================ */

.footer-section h4 {
    /* 标题颜色 - 白色 */
    color: #fff;

    /* 下边距 - 与链接列表的间距 */
    margin-bottom: 20px;

    /* 字体大小 - 18px */
    font-size: 18px;
}


/* ---------- 页脚正文 ---------- */

.footer-section p {
    /* 正文颜色 - 暗灰色 */
    color: #64748b;

    /* 下边距 - 段落间距 */
    margin-bottom: 10px;
}


/* ---------- 页脚链接 ---------- */

.footer-section a {
    /* 块级显示 - 整行可点击 */
    display: block;

    /* 链接颜色 - 暗灰色 */
    color: #64748b;

    /* 去除下划线 */
    text-decoration: none;

    /* 下边距 - 链接间距 */
    margin-bottom: 10px;

    /* 过渡动画 */
    transition: color 0.3s;
}


/* ---------- 页脚链接悬停状态 ---------- */

.footer-section a:hover {
    /* 悬停时变为蓝色 */
    color: #3b82f6;
}


/* ---------- 页脚图标 ---------- */

.footer-section i {
    /* 图标右边距 - 与文字的间距 */
    margin-right: 8px;

    /* 图标颜色 - 蓝色 */
    color: #3b82f6;
}


/* ================================================
 * 页脚底部版权区域
 * ================================================
 *
 * 包含版权声明和法律链接
 * ================================================ */

.footer-bottom {
    /* 文字居中 */
    text-align: center;

    /* 上边框 - 分隔线 */
    padding-top: 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);

    /* 版权文字颜色 - 更淡的灰色 */
    color: #475569;
}


/* ================================================
 * 12. 内页样式 (Inner Page Styles)
 * ================================================
 *
 * 用于非首页的子页面
 * 如关于我们、联系页面等
 * ================================================ */

/* ================================================
 * 内页英雄区域 (Inner Page Hero)
 * ================================================
 *
 * 子页面的顶部展示区域
 * 包含页面标题和简介
 * ================================================ */

.page-hero {
    /* ---------- 内边距 ----------
     *
     * padding: 180px 0 100px
     * - 上方180px（为固定导航栏留空间）
     * - 下方100px
     */
    padding: 180px 0 100px;

    /* 文字居中 */
    text-align: center;

    /* 相对定位 */
    position: relative;

    /* 上边距 - 与导航栏的间距 */
    margin-top: 0;
}


/* ---------- 内页英雄背景装饰 ---------- */

.page-hero::before {
    /* 伪元素内容 */
    content: '';

    /* 绝对定位 - 填满容器 */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    /* ---------- 径向渐变背景 ----------
     *
     * 中心位于50% 30%的蓝色圆形渐变
     * - rgba(59, 130, 246, 0.1) - 10%透明度的蓝色
     * - transparent - 渐变到透明
     *
     * 效果：
     * - 顶部有柔和的蓝色光晕
     * - 增加页面的科技感
     */
    background: radial-gradient(circle at 50% 30%, rgba(59, 130, 246, 0.1), transparent);
}


/* ---------- 内页标题 ---------- */

.page-hero h1 {
    /* 相对定位 - 在背景之上 */
    position: relative;

    /* 字体大小 - 48px */
    font-size: 48px;

    /* 颜色 - 白色 */
    color: #fff;

    /* 下边距 - 与副标题的间距 */
    margin-bottom: 15px;
}


/* ---------- 内页副标题 ---------- */

.page-hero p {
    /* 相对定位 */
    position: relative;

    /* 颜色 - 灰蓝色 */
    color: #94a3b8;

    /* 字体大小 - 18px */
    font-size: 18px;
}


/* ================================================
 * 13. 联系区域 (Contact Section)
 * ================================================
 *
 * 包含联系信息和联系表单的区域
 * ================================================ */

.contact-section {
    /* 垂直内边距 - 80px */
    padding: 80px 0;
}


/* ================================================
 * 联系区域网格布局
 * ================================================ */

.contact-grid {
    /* Grid双栏布局 */
    display: grid;

    /* 两列，比例1:1.5 */
    grid-template-columns: 1fr 1.5fr;

    /* 列间距 - 60px */
    gap: 60px;
}


/* ---------- 联系信息区域标题 ---------- */

.contact-info h2 {
    /* 字体大小 - 28px */
    font-size: 28px;

    /* 颜色 - 白色 */
    color: #fff;

    /* 下边距 */
    margin-bottom: 30px;
}


/* ================================================
 * 联系信息项 (Contact Info Item)
 * ================================================
 *
 * 包含图标和文字的单条联系信息
 * ================================================ */

.info-item {
    /* Flexbox布局 - 图标和文字水平排列 */
    display: flex;

    /* 项目间距 - 20px */
    gap: 20px;

    /* 下边距 - 信息项之间的间距 */
    margin-bottom: 30px;
}


/* ---------- 信息图标容器 ---------- */

.info-icon {
    /* 尺寸 - 50x50 */
    width: 50px;
    height: 50px;

    /* 蓝紫渐变背景，20%透明度 */
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(139, 92, 246, 0.2) 100%);

    /* 圆角 - 12px */
    border-radius: 12px;

    /* Flexbox居中 */
    display: flex;
    align-items: center;
    justify-content: center;

    /* 防止收缩 */
    flex-shrink: 0;
}


/* ---------- 信息图标 ---------- */

.info-icon i {
    /* 字体大小 - 22px */
    font-size: 22px;

    /* 蓝色 */
    color: #3b82f6;
}


/* ---------- 信息文字区域 ---------- */

.info-text h4 {
    /* 标题颜色 - 白色 */
    color: #fff;

    /* 下边距 - 与内容的间距 */
    margin-bottom: 5px;
}


/* ---------- 信息内容 ---------- */

.info-text p {
    /* 正文颜色 - 灰蓝色 */
    color: #94a3b8;
}


/* ================================================
 * 14. 表单样式 (Form Styles)
 * ================================================
 *
 * 联系表单和其他表单的统一样式
 * ================================================ */

/* ---------- 表单容器标题 ---------- */

.contact-form h2 {
    /* 字体大小 - 28px */
    font-size: 28px;

    /* 颜色 - 白色 */
    color: #fff;

    /* 下边距 */
    margin-bottom: 25px;
}


/* ================================================
 * 表单组 (Form Group)
 * ================================================
 *
 * 单个表单项的容器
 * 包含标签和输入框/文本域
 * ================================================ */

.form-group {
    /* 下边距 - 表单项之间的间距 */
    margin-bottom: 20px;
}


/* ================================================
 * 表单行 (Form Row)
 * ================================================
 *
 * 包含多个表单项的行
 * 用于并排放置多个输入框
 * ================================================ */

.form-row {
    /* Grid双栏布局 */
    display: grid;

    /* 两列等宽 */
    grid-template-columns: 1fr 1fr;

    /* 列间距 - 20px */
    gap: 20px;
}


/* ---------- 表单标签 ---------- */

.form-group label {
    /* 块级显示 */
    display: block;

    /* 标签颜色 - 浅灰蓝色 */
    color: #cbd5e1;

    /* 下边距 - 与输入框的间距 */
    margin-bottom: 8px;

    /* 字体大小 - 14px */
    font-size: 14px;
}


/* ---------- 必填标记 ---------- */

.form-group label span {
    /* 红色星号 */
    color: #ef4444;
}


/* ================================================
 * 表单输入框和文本域
 * ================================================ */

.form-group input,
.form-group textarea {
    /* ---------- 尺寸 ----------
     *
     * width: 100%
     * - 输入框宽度占满容器
     */
    width: 100%;

    /* 内边距 - 14px上下，18px左右 */
    padding: 14px 18px;

    /* ---------- 背景色 ----------
     *
     * rgba(255, 255, 255, 0.05)
     * - 5%透明度的白色
     * - 半透明背景
     */
    background: rgba(255, 255, 255, 0.05);

    /* ---------- 边框 ----------
     *
     * 1px实线，白色10%透明度
     */
    border: 1px solid rgba(255, 255, 255, 0.1);

    /* 圆角 - 10px */
    border-radius: 10px;

    /* 文字颜色 - 白色 */
    color: #fff;

    /* 字体大小 - 16px */
    font-size: 16px;

    /* 过渡动画 */
    transition: all 0.3s;
}


/* ---------- 输入框聚焦状态 ---------- */

.form-group input:focus,
.form-group textarea:focus {
    /* 去除默认轮廓线 */
    outline: none;

    /* 聚焦时边框变蓝色 */
    border-color: #3b82f6;

    /* 聚焦时背景稍浓 */
    background: rgba(255, 255, 255, 0.08);
}


/* ---------- 文本域特殊样式 ---------- */

.form-group textarea {
    /* 最小高度 - 150px */
    min-height: 150px;

    /* ---------- 调整大小 ----------
     *
     * resize: vertical
     * - 只允许垂直方向调整大小
     * - 防止水平方向调整破坏布局
     */
    resize: vertical;
}


/* ================================================
 * 成功/错误消息样式 (Success/Error Message Styles)
 * ================================================
 *
 * 表单提交后的反馈消息
 * 成功消息为绿色，错误消息为红色
 * ================================================ */

/* ---------- 成功消息容器 ---------- */

.success-message,
.error-message {
    /* 内边距 */
    padding: 20px;

    /* 圆角 - 10px */
    border-radius: 10px;

    /* 下边距 - 与表单的间距 */
    margin-bottom: 25px;

    /* Flexbox布局 - 图标和文字水平排列 */
    display: flex;

    /* 垂直居中对齐 */
    align-items: center;

    /* 图标与文字间距 */
    gap: 12px;
}


/* ---------- 成功消息样式 ---------- */

.success-message {
    /* 绿色背景，10%透明度 */
    background: rgba(34, 197, 94, 0.1);

    /* 绿色边框，30%透明度 */
    border: 1px solid rgba(34, 197, 94, 0.3);

    /* 浅绿色文字 */
    color: #86efac;
}


/* ---------- 错误消息样式 ---------- */

.error-message {
    /* 红色背景，10%透明度 */
    background: rgba(239, 68, 68, 0.1);

    /* 红色边框，30%透明度 */
    border: 1px solid rgba(239, 68, 68, 0.3);

    /* 浅红色文字 */
    color: #fca5a5;
}


/* ---------- 消息图标 ---------- */

.success-message i,
.error-message i {
    /* 图标大小 - 24px */
    font-size: 24px;
}


/* ================================================
 * 15. 响应式设计 (Responsive Design)
 * ================================================
 *
 * 响应式设计的核心概念：
 *
 * 1. 【移动优先 vs 桌面优先】
 *    - 移动优先：先设计移动端，再为大屏幕添加样式
 *    - 桌面优先：先设计桌面端，再为移动端覆盖样式
 *    - 本项目采用桌面优先（因为先有桌面设计）
 *
 * 2. 【断点 (Breakpoints)】
 *    - 特定的屏幕宽度阈值
 *    - 当屏幕宽度小于阈值时，应用对应的样式
 *    - 常见的断点：
 *      - 576px - 超小屏幕（大型手机）
 *      - 768px - 小屏幕（平板、手机横屏）
 *      - 992px - 中等屏幕（平板竖屏）
 *      - 1200px - 大屏幕（笔记本）
 *      - 1400px+ - 超大屏幕（桌面显示器）
 *
 * 3. 【@media 查询语法】
 *    - @media 媒体类型 and (媒体特性) { 样式 }
 *    - max-width: 992px 表示"当宽度 <= 992px时"
 *    - all 是默认的媒体类型，可省略
 * ================================================ */

/* ================================================
 * 平板尺寸适配 (Tablet - max-width: 992px)
 * ================================================
 *
 * 断点：992px
 * 目标设备：平板电脑竖屏、中等屏幕笔记本
 *
 * 调整内容：
 * - 双栏布局变为单栏
 * - 标题字体缩小
 * - 网格列数减少
 * ================================================ */

@media (max-width: 992px) {
    /* ---------- 双栏变单栏 ----------
     *
     * about-content 和 contact-grid
     * 从 grid-template-columns: 1fr 1fr
     * 变为 grid-template-columns: 1fr
     */
    .about-content,
    .contact-grid {
        grid-template-columns: 1fr;
    }

    /* ---------- 主标题缩小 ----------
     *
     * hero-content h1 从56px缩小到42px
     * 适应中等屏幕
     */
    .hero-content h1 {
        font-size: 42px;
    }

    /* ---------- 页脚变双栏 ----------
     *
     * footer-content 从2fr 1fr 1fr
     * 变为1fr 1fr（两列）
     */
    .footer-content {
        grid-template-columns: 1fr 1fr;
    }
}


/* ================================================
 * 手机尺寸适配 (Mobile - max-width: 768px)
 * ================================================
 *
 * 断点：768px
 * 目标设备：手机、平板横屏以下
 *
 * 调整内容：
 * - 导航栏隐藏后台入口按钮
 * - 进一步缩小标题字体
 * - 所有网格变为单列
 * ================================================ */

@media (max-width: 768px) {
    /* ---------- 导航栏容器调整 ----------
     *
     * 在手机端设置为一行显示
     */
    .header .container {
        /* 不允许换行，强制一行显示 */
        flex-wrap: nowrap;

        /* 垂直居中对齐 */
        align-items: center;

        /* 设置最小高度 */
        min-height: 50px;

        /* 横向滚动隐藏 */
        overflow-x: auto;

        /* 隐藏滚动条 */
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    /* 隐藏滚动条 */
    .header .container::-webkit-scrollbar {
        display: none;
    }

    /* ---------- Logo调整 ----------
     *
     * 在手机端完全隐藏Logo
     */
    .logo {
        /* 完全隐藏Logo */
        display: none;
    }

    /* ---------- 导航菜单调整 ----------
     *
     * 导航项紧凑显示在一行
     */
    .nav {
        /* 导航项间距减少到6px */
        gap: 6px;

        /* 字体大小缩小到13px */
        font-size: 13px;

        /* 不允许换行 */
        flex-wrap: nowrap;

        /* 允许横向滚动 */
        overflow-x: auto;
    }

    /* ---------- 导航链接调整 ----------
     *
     * 导航链接紧凑显示
     */
    .nav a {
        /* 减少内边距 */
        padding: 4px 8px;

        /* 添加圆角 */
        border-radius: 4px;

        /* 不换行 */
        white-space: nowrap;
    }

    /* ---------- 主题切换按钮调整 ----------
     *
     * 缩小主题切换按钮，只显示图标
     */
    .theme-toggle {
        /* 缩小按钮 */
        padding: 4px 8px;
        font-size: 0;
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .theme-toggle i {
        /* 显示图标 */
        font-size: 16px;
    }

    /* ---------- 英雄区域标题进一步缩小 ----------
     *
     * hero-content h1 从42px缩小到32px
     * 适应手机屏幕
     */
    .hero-content h1 {
        font-size: 32px;
    }

    /* ---------- 区块标题缩小 ----------
     *
     * section-title 从40px缩小到30px
     */
    .section-title {
        font-size: 30px;
    }

    /* ---------- 服务网格变为单列 ----------
     *
     * services-grid 从 auto-fit(minmax(320px, 1fr))
     * 变为 1fr（固定单列）
     */
    .services-grid {
        grid-template-columns: 1fr;
    }

    /* ---------- 表单行变为单列 ----------
     *
     * form-row 从 1fr 1fr
     * 变为 1fr
     */
    .form-row {
        grid-template-columns: 1fr;
    }

    /* ---------- 页脚变为单列 ----------
     *
     * footer-content 从 1fr 1fr
     * 变为 1fr（固定单列）
     */
    .footer-content {
        grid-template-columns: 1fr;
    }

    /* ---------- 隐藏后台入口按钮 ----------
     *
     * 在手机屏幕上不显示后台入口
     * 节省导航栏空间
     * 用户可以通过其他方式访问后台
     */
    .btn-admin {
        display: none;
    }
}


/* ================================================
 * 16. 主题切换功能 (Theme Toggle)
 * ================================================
 *
 * 支持三种主题模式：
 * 1. 暗色主题（默认）- 深蓝黑配色，科技感强
 * 2. 豆绿色护眼主题 - 浅绿配色，长时间阅读更舒适
 * 3. 清新白主题 - 参照 https://www.anxiaoxi.cn/ 风格，纯白背景配深蓝色强调
 *
 * 实现原理：
 * - 在body标签上添加或移除 .theme-green 或 .theme-white 类
 * - 使用CSS选择器覆盖原有样式
 * - 使用localStorage保存用户选择
 *
 * 优势：
 * - 纯CSS实现，无需JavaScript操作样式
 * - 切换时只有颜色变化，布局保持一致
 * - localStorage确保刷新后主题不丢失
 * ================================================ */

/* ================================================
 * 主题切换按钮样式 (Theme Toggle Button)
 * ================================================
 *
 * 导航栏右侧的切换按钮
 * 点击可以切换暗色/护眼主题
 * ================================================ */

/* ---------- 按钮容器 ---------- */

.theme-toggle {
    /* Flexbox布局 - 图标和文字水平排列 */
    display: flex;

    /* 垂直居中对齐 */
    align-items: center;

    /* 按钮内图标与文字间距 */
    gap: 8px;

    /* 内边距 - 8px上下，16px左右 */
    padding: 8px 16px;

    /* ---------- 按钮背景 ----------
     *
     * rgba(255, 255, 255, 0.1) = 白色10%透明度
     * 半透明白色背景
     */
    background: rgba(255, 255, 255, 0.1);

    /* 边框 - 白色20%透明度 */
    border: 1px solid rgba(255, 255, 255, 0.2);

    /* 圆角 - 20px（胶囊形状） */
    border-radius: 20px;

    /* 按钮文字颜色 */
    color: #cbd5e1;

    /* 鼠标样式 - 手型 */
    cursor: pointer;

    /* 字体大小 - 14px */
    font-size: 14px;

    /* 过渡动画 */
    transition: all 0.3s;
}


/* ---------- 按钮悬停状态 ---------- */

.theme-toggle:hover {
    /* 背景变蓝色 */
    background: rgba(59, 130, 246, 0.2);

    /* 边框变蓝色 */
    border-color: rgba(59, 130, 246, 0.4);

    /* 文字变白 */
    color: #fff;
}


/* ---------- 按钮图标 ---------- */

.theme-toggle i {
    /* 图标大小 - 16px */
    font-size: 16px;
}


/* ================================================
 * 豆绿色护眼主题 (Pea Green Eye-Care Theme)
 * ================================================
 *
 * 使用 body.theme-green 类选择器
 * 覆盖默认的暗色主题样式
 *
 * 护眼色的原理：
 * - 人眼对绿色光最敏感
 * - 绿色光在视网膜上成像最清晰
 * - 长时间观看不易疲劳
 * - 因此绿色背景被广泛用于电子书、阅读软件
 *
 * 护眼色的特点：
 * - 背景是浅绿色（#c7edcc）
 * - 文字是深绿色（#2d5a32）
 * - 降低对比度，减少眼睛刺激
 * ================================================ */

/* ---------- 护眼主题：Body ---------- */

body.theme-green {
    /* 豆绿色背景 - 护眼色的代表色 */
    background: #c7edcc;

    /* 深绿色文字 */
    color: #2d5a32;
}


/* ---------- 护眼主题：导航栏 ---------- */

body.theme-green .header {
    /* 半透明豆绿色背景，98%不透明度 */
    background: rgba(199, 237, 204, 0.98);

    /* 绿色边框 */
    border-bottom: 1px solid rgba(74, 157, 84, 0.1);

    /* 绿色阴影 */
    box-shadow: 0 2px 20px rgba(45, 90, 50, 0.08);
}

/* ---------- 护眼主题：滚动后的导航栏 ---------- */

body.theme-green .header.scrolled {
    /* 半透明豆绿色背景，98%不透明度 */
    background: rgba(199, 237, 204, 0.98);

    /* 绿色阴影加深 */
    box-shadow: 0 10px 40px rgba(45, 90, 50, 0.15);
}


/* ---------- 护眼主题：Logo ---------- */

body.theme-green .logo {
    /* Logo文字变深绿色 */
    color: #2d5a32;
}


body.theme-green .logo i {
    /* Logo图标变绿色 */
    color: #4a9d54;
}


/* ---------- 护眼主题：导航链接 ---------- */

body.theme-green .nav a {
    /* 导航文字变绿色 */
    color: #4a7a4f;
}


body.theme-green .nav a:hover,
body.theme-green .nav a.active {
    /* 悬停/激活时变亮绿色 */
    color: #4a9d54;
}


body.theme-green .nav a.active::after {
    /* 激活链接下划线变为绿色渐变 */
    background: linear-gradient(90deg, #4a9d54, #6bc476);
}


/* ---------- 护眼主题：后台按钮 ---------- */

body.theme-green .btn-admin {
    /* 绿色背景10%透明度 */
    background: rgba(74, 157, 84, 0.1);

    /* 绿色边框30%透明度 */
    border-color: rgba(74, 157, 84, 0.3);
}


body.theme-green .btn-admin:hover {
    /* 悬停时背景加深 */
    background: rgba(74, 157, 84, 0.2);
}


/* ---------- 护眼主题：英雄区域背景 ---------- */

body.theme-green .hero-bg {
    /* 绿色径向渐变背景 */
    background:
        radial-gradient(circle at 20% 50%, rgba(74, 157, 84, 0.2) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(107, 196, 118, 0.2) 0%, transparent 50%),
        radial-gradient(circle at 40% 80%, rgba(150, 220, 160, 0.15) 0%, transparent 50%);
}


/* ---------- 护眼主题：粒子 ---------- */

body.theme-green .particle {
    /* 粒子变为绿色 */
    background: rgba(74, 157, 84, 0.5);
}


/* ---------- 护眼主题：英雄区域标题 ---------- */

body.theme-green .hero-content h1 {
    /* 标题渐变变为绿色系 */
    background: linear-gradient(135deg, #2d5a32 0%, #4a7a4f 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}


body.theme-green .hero-content p {
    /* 描述文字变绿色 */
    color: #4a7a4f;
}

/* ---------- 护眼主题：主按钮 ---------- */

body.theme-green .btn-primary {
    /* 主按钮变为绿色渐变 */
    background: linear-gradient(135deg, #4a9d54 0%, #6bc476 100%);

    /* 绿色阴影 */
    box-shadow: 0 10px 30px rgba(74, 157, 84, 0.3);
}


body.theme-green .btn-primary:hover {
    /* 悬停时阴影加深 */
    box-shadow: 0 15px 40px rgba(74, 157, 84, 0.4);
}


/* ---------- 护眼主题：次按钮 ---------- */

body.theme-green .btn-secondary {
    /* 次按钮半透明绿色背景 */
    background: rgba(45, 90, 50, 0.08);

    /* 深绿色文字 */
    color: #2d5a32;

    /* 绿色边框 */
    border-color: rgba(45, 90, 50, 0.2);
}


body.theme-green .btn-secondary:hover {
    /* 悬停时背景稍浓 */
    background: rgba(45, 90, 50, 0.12);
}


/* ---------- 护眼主题：区块标题 ---------- */

body.theme-green .section-title {
    /* 标题变深绿色 */
    color: #2d5a32;
}


body.theme-green .section-subtitle {
    /* 副标题变绿色 */
    color: #4a7a4f;
}


/* ---------- 护眼主题：服务走马灯 ---------- */

body.theme-green .services-marquee {
    /* 走马灯背景变为绿色 */
    background: rgba(74, 157, 84, 0.05);
}


/* ---------- 护眼主题：走马灯项目卡片 ---------- */

body.theme-green .marquee-item {
    /* 卡片背景变为浅色（不透明） */
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.4) 100%);

    /* 绿色边框 */
    border-color: rgba(74, 157, 84, 0.2);
}


body.theme-green .marquee-item:hover {
    /* 悬停时边框变深绿 */
    border-color: rgba(74, 157, 84, 0.4);
}


/* ---------- 护眼主题：走马灯图标 ---------- */

body.theme-green .marquee-icon {
    /* 绿色渐变背景 */
    background: linear-gradient(135deg, rgba(74, 157, 84, 0.2) 0%, rgba(107, 196, 118, 0.2) 100%);
}


body.theme-green .marquee-icon i {
    /* 绿色图标 */
    color: #4a9d54;
}


/* ---------- 护眼主题：走马灯文字 ---------- */

body.theme-green .marquee-item h4 {
    /* 标题变深绿色 */
    color: #2d5a32;
}


body.theme-green .marquee-item p {
    /* 描述变绿色 */
    color: #4a7a4f;
}


/* ---------- 护眼主题：服务卡片 ---------- */

body.theme-green .service-card {
    /* 服务卡片背景变为浅色 */
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.4) 100%);

    /* 绿色边框 */
    border-color: rgba(74, 157, 84, 0.2);
}


body.theme-green .service-card:hover {
    /* 悬停时边框变深绿 */
    border-color: rgba(74, 157, 84, 0.4);

    /* 阴影变为绿色系 */
    box-shadow: 0 20px 60px rgba(45, 90, 50, 0.15);
}


body.theme-green .service-card::before {
    /* 顶部渐变条变为绿色系 */
    background: linear-gradient(90deg, #4a9d54, #6bc476, #96dca0);
}


/* ---------- 护眼主题：服务图标 ---------- */

body.theme-green .service-icon {
    /* 绿色渐变背景 */
    background: linear-gradient(135deg, rgba(74, 157, 84, 0.2) 0%, rgba(107, 196, 118, 0.2) 100%);
}


body.theme-green .service-icon i {
    /* 绿色图标 */
    color: #4a9d54;
}


/* ---------- 护眼主题：服务卡片文字 ---------- */

body.theme-green .service-card h3 {
    /* 标题变深绿色 */
    color: #2d5a32;
}


body.theme-green .service-card p {
    /* 描述变绿色 */
    color: #4a7a4f;
}


/* ---------- 护眼主题：项目走马灯 ---------- */

body.theme-green .projects-marquee {
    /* 项目走马灯背景变为淡绿色 */
    background: rgba(74, 157, 84, 0.03);
}


/* ---------- 护眼主题：项目卡片 ---------- */

body.theme-green .project-card {
    /* 项目卡片背景变为浅色 */
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.4) 100%);

    /* 绿色边框 */
    border-color: rgba(74, 157, 84, 0.2);
}


body.theme-green .project-card:hover {
    /* 悬停时边框变深绿 */
    border-color: rgba(74, 157, 84, 0.4);
}


/* ---------- 护眼主题：项目图片 ---------- */

body.theme-green .project-image {
    /* 图片区域绿色渐变背景 */
    background: linear-gradient(135deg, rgba(74, 157, 84, 0.15) 0%, rgba(107, 196, 118, 0.15) 100%);
}


body.theme-green .project-image .placeholder-icon {
    /* 占位图标变为绿色 */
    color: rgba(74, 157, 84, 0.3);
}


/* ---------- 护眼主题：项目内容 ---------- */

body.theme-green .project-content h4 {
    /* 项目标题变深绿色 */
    color: #2d5a32;
}


body.theme-green .project-content p {
    /* 项目描述变绿色 */
    color: #4a7a4f;
}


/* ---------- 护眼主题：关于我们区域 ---------- */

body.theme-green .about {
    /* 背景变为淡绿色渐变 */
    background: linear-gradient(135deg, rgba(74, 157, 84, 0.05) 0%, rgba(107, 196, 118, 0.05) 100%);
}


body.theme-green .about-text p {
    /* 文字变绿色 */
    color: #4a7a4f;
}


/* ---------- 护眼主题：优势项 ---------- */

body.theme-green .feature {
    /* 优势文字变深绿 */
    color: #3d6a42;
}


body.theme-green .feature i {
    /* 优势图标变绿色 */
    color: #4a9d54;
}


/* ---------- 护眼主题：图片占位符 ---------- */

body.theme-green .image-placeholder {
    /* 占位符背景变绿色 */
    background: linear-gradient(135deg, rgba(74, 157, 84, 0.15) 0%, rgba(107, 196, 118, 0.15) 100%);

    /* 边框变绿色 */
    border-color: rgba(74, 157, 84, 0.2);
}

/* ---------- 护眼主题：图片占位符图标 ---------- */

body.theme-green .image-placeholder i {
    /* 图标变绿色 */
    color: #4a9d54;
}


/* ---------- 护眼主题：CTA分隔线 ---------- */

body.theme-green .cta::before {
    /* 分隔线变为绿色 */
    background: linear-gradient(90deg, transparent, rgba(74, 157, 84, 0.3), transparent);
}


/* ---------- 护眼主题：CTA标题和描述 ---------- */

body.theme-green .cta h2 {
    /* CTA标题变深绿色 */
    color: #2d5a32;
}


body.theme-green .cta p {
    /* CTA描述变绿色 */
    color: #4a7a4f;
}


/* ---------- 护眼主题：页脚区域 ---------- */

body.theme-green .footer {
    /* 页脚背景变为浅绿色 */
    background: #b0ddb7;

    /* 边框变绿色 */
    border-color: rgba(74, 157, 84, 0.1);
}


/* ---------- 护眼主题：页脚各栏标题 ---------- */

body.theme-green .footer-section h4 {
    /* 页脚标题变深绿色 */
    color: #2d5a32;
}


/* ---------- 护眼主题：页脚正文 ---------- */

body.theme-green .footer-section p {
    /* 页脚正文变绿色 */
    color: #4a7a4f;
}


/* ---------- 护眼主题：页脚链接 ---------- */

body.theme-green .footer-section a {
    /* 页脚链接变绿色 */
    color: #4a7a4f;
}


body.theme-green .footer-section a:hover {
    /* 悬停时链接变亮绿色 */
    color: #4a9d54;
}


/* ---------- 护眼主题：页脚图标 ---------- */

body.theme-green .footer-section i {
    /* 页脚图标变绿色 */
    color: #4a9d54;
}


/* ---------- 护眼主题：页脚底部 ---------- */

body.theme-green .footer-bottom {
    /* 版权文字变绿色 */
    color: #4a7a4f;

    /* 边框变绿色 */
    border-color: rgba(74, 157, 84, 0.1);
}


/* ---------- 护眼主题：内页英雄背景 ---------- */

body.theme-green .page-hero::before {
    /* 背景变为绿色光晕 */
    background: radial-gradient(circle at 50% 30%, rgba(74, 157, 84, 0.15), transparent);
}


/* ---------- 护眼主题：联系信息图标 ---------- */

body.theme-green .info-icon {
    /* 绿色渐变背景 */
    background: linear-gradient(135deg, rgba(74, 157, 84, 0.2) 0%, rgba(107, 196, 118, 0.2) 100%);
}


body.theme-green .info-icon i {
    /* 图标变绿色 */
    color: #4a9d54;
}


/* ---------- 护眼主题：联系信息文字 ---------- */

body.theme-green .info-text h4 {
    /* 联系信息标题变深绿色 */
    color: #2d5a32;
}


body.theme-green .info-text p {
    /* 联系信息内容变绿色 */
    color: #4a7a4f;
}

body.theme-green .contact-form h2 {
    color: #2d5a32;
}

body.theme-green .form-group label {
    color: #4a7a4f;
}

body.theme-green .form-group input,
body.theme-green .form-group textarea {
    background: rgba(255, 255, 255, 0.5);
    border-color: rgba(74, 157, 84, 0.2);
    color: #2d5a32;
}

body.theme-green .form-group input:focus,
body.theme-green .form-group textarea:focus {
    border-color: #4a9d54;
    background: rgba(255, 255, 255, 0.7);
}

/* ================================================
 * 清新白主题 (Fresh White Theme)
 * ================================================
 *
 * 参照 https://www.anxiaoxi.cn/ 网站风格设计
 * 清新简洁的白色主题，适合白天浏览
 *
 * 使用 body.theme-white 类选择器
 * 覆盖默认的暗色主题样式
 *
 * 清新白主题特点：
 * - 纯白色背景（#ffffff）
 * - 深色文字（#1a1a2e）
 * - 蓝色强调色（#16213e / #0f3460）
 * - 简洁清爽的视觉效果
 * ================================================ */

/* ---------- 清新白主题：Body ---------- */

body.theme-white {
    /* 纯白色背景 */
    background: #ffffff;

    /* 深灰色文字 */
    color: #1a1a2e;
}

/* ---------- 清新白主题：导航栏 ---------- */

body.theme-white .header {
    /* 白色背景，98%不透明度 */
    background: rgba(255, 255, 255, 0.98);

    /* 浅灰色边框 */
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);

    /* 灰色阴影 */
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.05);
}

/* ---------- 清新白主题：滚动后的导航栏 ---------- */

body.theme-white .header.scrolled {
    /* 白色背景，98%不透明度 */
    background: rgba(255, 255, 255, 0.98);

    /* 灰色阴影加深 */
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}

/* ---------- 清新白主题：Logo ---------- */

body.theme-white .logo {
    /* Logo文字变深蓝色 */
    color: #16213e;
}

body.theme-white .logo i {
    /* Logo图标变蓝色 */
    color: #0f3460;
}

/* ---------- 清新白主题：导航链接 ---------- */

body.theme-white .nav a {
    /* 导航文字变深色 */
    color: #333333;
}

body.theme-white .nav a:hover,
body.theme-white .nav a.active {
    /* 悬停/激活时变蓝色 */
    color: #0f3460;
}

body.theme-white .nav a.active::after {
    /* 激活链接下划线变为蓝色渐变 */
    background: linear-gradient(90deg, #0f3460, #16213e);
}

/* ---------- 清新白主题：后台按钮 ---------- */

body.theme-white .btn-admin {
    /* 蓝色背景10%透明度 */
    background: rgba(15, 52, 96, 0.1);

    /* 蓝色边框30%透明度 */
    border-color: rgba(15, 52, 96, 0.3);
}

body.theme-white .btn-admin:hover {
    /* 悬停时背景加深 */
    background: rgba(15, 52, 96, 0.2);
}

/* ---------- 清新白主题：英雄区域背景 ---------- */

body.theme-white .hero-bg {
    /* 淡蓝色渐变背景 */
    background:
        radial-gradient(circle at 20% 50%, rgba(15, 52, 96, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(22, 33, 62, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 40% 80%, rgba(100, 150, 200, 0.05) 0%, transparent 50%);
}

/* ---------- 清新白主题：粒子 ---------- */

body.theme-white .particle {
    /* 粒子变为蓝色 */
    background: rgba(15, 52, 96, 0.3);
}

/* ---------- 清新白主题：英雄区域标题 ---------- */

body.theme-white .hero-content h1 {
    /* 标题渐变变为深蓝色系 */
    background: linear-gradient(135deg, #16213e 0%, #0f3460 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

body.theme-white .hero-content p {
    /* 描述文字变深灰色 */
    color: #4a4a4a;
}

/* ---------- 清新白主题：主按钮 ---------- */

body.theme-white .btn-primary {
    /* 主按钮变为蓝色渐变 */
    background: linear-gradient(135deg, #0f3460 0%, #16213e 100%);
    box-shadow: 0 10px 30px rgba(15, 52, 96, 0.3);
}

body.theme-white .btn-primary:hover {
    box-shadow: 0 15px 40px rgba(15, 52, 96, 0.4);
}

/* ---------- 清新白主题：次按钮 ---------- */

body.theme-white .btn-secondary {
    background: rgba(22, 33, 62, 0.08);
    color: #16213e;
    border-color: rgba(22, 33, 62, 0.2);
}

body.theme-white .btn-secondary:hover {
    background: rgba(22, 33, 62, 0.12);
}

/* ---------- 清新白主题：区块标题 ---------- */

body.theme-white .section-title {
    color: #16213e;
}

body.theme-white .section-subtitle {
    color: #4a4a4a;
}

/* ---------- 清新白主题：服务走马灯 ---------- */

body.theme-white .services-marquee {
    background: rgba(15, 52, 96, 0.03);
}

body.theme-white .marquee-item {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.7) 100%);
    border-color: rgba(15, 52, 96, 0.15);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

body.theme-white .marquee-item:hover {
    border-color: rgba(15, 52, 96, 0.3);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

body.theme-white .marquee-icon {
    background: linear-gradient(135deg, rgba(15, 52, 96, 0.1) 0%, rgba(22, 33, 62, 0.1) 100%);
}

body.theme-white .marquee-icon i {
    color: #0f3460;
}

body.theme-white .marquee-item h4 {
    color: #16213e;
}

body.theme-white .marquee-item p {
    color: #5a5a5a;
}

/* ---------- 清新白主题：服务卡片 ---------- */

body.theme-white .service-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.7) 100%);
    border-color: rgba(15, 52, 96, 0.15);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

body.theme-white .service-card:hover {
    border-color: rgba(15, 52, 96, 0.3);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

body.theme-white .service-card::before {
    background: linear-gradient(90deg, #0f3460, #16213e, #2a4a6e);
}

body.theme-white .service-icon {
    background: linear-gradient(135deg, rgba(15, 52, 96, 0.1) 0%, rgba(22, 33, 62, 0.1) 100%);
}

body.theme-white .service-icon i {
    color: #0f3460;
}

body.theme-white .service-card h3 {
    color: #16213e;
}

body.theme-white .service-card p {
    color: #5a5a5a;
}

/* ---------- 清新白主题：项目走马灯 ---------- */

body.theme-white .projects-marquee {
    background: rgba(15, 52, 96, 0.02);
}

body.theme-white .project-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.7) 100%);
    border-color: rgba(15, 52, 96, 0.15);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

body.theme-white .project-card:hover {
    border-color: rgba(15, 52, 96, 0.3);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

body.theme-white .project-image {
    background: linear-gradient(135deg, rgba(15, 52, 96, 0.08) 0%, rgba(22, 33, 62, 0.08) 100%);
}

body.theme-white .project-image .placeholder-icon {
    color: rgba(15, 52, 96, 0.2);
}

body.theme-white .project-content h4 {
    color: #16213e;
}

body.theme-white .project-content p {
    color: #5a5a5a;
}

/* ---------- 清新白主题：关于我们区域 ---------- */

body.theme-white .about {
    background: linear-gradient(135deg, rgba(15, 52, 96, 0.03) 0%, rgba(22, 33, 62, 0.03) 100%);
}

body.theme-white .about-text p {
    color: #5a5a5a;
}

body.theme-white .feature {
    color: #16213e;
}

body.theme-white .feature i {
    color: #0f3460;
}

body.theme-white .image-placeholder {
    background: linear-gradient(135deg, rgba(15, 52, 96, 0.08) 0%, rgba(22, 33, 62, 0.08) 100%);
    border-color: rgba(15, 52, 96, 0.15);
}

body.theme-white .image-placeholder i {
    color: #0f3460;
}

/* ---------- 清新白主题：CTA分隔线 ---------- */

body.theme-white .cta::before {
    background: linear-gradient(90deg, transparent, rgba(15, 52, 96, 0.2), transparent);
}

body.theme-white .cta h2 {
    color: #16213e;
}

body.theme-white .cta p {
    color: #5a5a5a;
}

/* ---------- 清新白主题：页脚区域 ---------- */

body.theme-white .footer {
    background: #16213e;
    border-color: rgba(255, 255, 255, 0.1);
}

body.theme-white .footer-section h4 {
    color: #ffffff;
}

body.theme-white .footer-section p {
    color: #a0a0b0;
}

body.theme-white .footer-section a {
    color: #a0a0b0;
}

body.theme-white .footer-section a:hover {
    color: #ffffff;
}

body.theme-white .footer-section i {
    color: #4a90c2;
}

body.theme-white .footer-bottom {
    color: #808090;
    border-color: rgba(255, 255, 255, 0.1);
}

/* ---------- 清新白主题：内页英雄背景 ---------- */

body.theme-white .page-hero::before {
    background: radial-gradient(circle at 50% 30%, rgba(15, 52, 96, 0.1), transparent);
}

body.theme-white .info-icon {
    background: linear-gradient(135deg, rgba(15, 52, 96, 0.1) 0%, rgba(22, 33, 62, 0.1) 100%);
}

body.theme-white .info-icon i {
    color: #0f3460;
}

body.theme-white .info-text h4 {
    color: #16213e;
}

body.theme-white .info-text p {
    color: #5a5a5a;
}

body.theme-white .contact-form h2 {
    color: #16213e;
}

body.theme-white .form-group label {
    color: #333333;
}

body.theme-white .form-group input,
body.theme-white .form-group textarea {
    background: rgba(255, 255, 255, 0.8);
    border-color: rgba(0, 0, 0, 0.1);
    color: #333333;
}

body.theme-white .form-group input:focus,
body.theme-white .form-group textarea:focus {
    border-color: #0f3460;
    background: rgba(255, 255, 255, 0.95);
}