/* ========== CSS 变量定义 - 紫色系配色 ========== */
:root {                                  /* :root 选择器匹配文档根元素(html)，定义全局变量 */
  --primary: #4f397f;                   /* CSS变量：主品牌色-深紫 */
  --primary-light: #6f52ad;              /* CSS变量：主品牌色-中紫 */
  --primary-dark: #3d2a66;               /* CSS变量：主品牌色-深黑紫 */
  --accent: #9e80d8;                    /* CSS变量：强调色-浅紫 */
  --ink-0: #1f1830;                     /* CSS变量：主文字-深紫黑 */
  --ink-1: #4c4362;                     /* CSS变量：次要文字-中紫灰 */
  --ink-2: #736b8b;                     /* CSS变量：辅助文字-浅紫灰 */
  --ink-3: #9a90b0;                     /* CSS变量：提示文字-淡紫灰 */
  --bg-white: #ffffff;                   /* CSS变量：纯白背景 */
  --bg-gray-50: #f7f2ff;                /* CSS变量：极浅紫灰背景 */
  --bg-gray-100: #ece1fb;               /* CSS变量：浅紫背景 */
  --bg-gray-200: #dfd1f6;               /* CSS变量：中紫背景 */
  --border-gray: rgba(84, 61, 137, 0.18);/* CSS变量：边框色(带透明度) */
  --shadow-sm: 0 1px 2px 0 rgba(79, 57, 127, 0.05);/* CSS变量：小阴影 */
  --shadow-md: 0 4px 6px -1px rgba(79, 57, 127, 0.1), 0 2px 4px -1px rgba(79, 57, 127, 0.06);/* CSS变量：中阴影 */
  --shadow-lg: 0 10px 15px -3px rgba(79, 57, 127, 0.1), 0 4px 6px -2px rgba(79, 57, 127, 0.05);/* CSS变量：大阴影 */
  --shadow-xl: 0 20px 25px -5px rgba(79, 57, 127, 0.15), 0 10px 10px -5px rgba(79, 57, 127, 0.1);/* CSS变量：超大阴影 */
  --radius: 8px;                        /* CSS变量：圆角大小 */
  --max-width: 1200px;                  /* CSS变量：最大宽度 */
}

/* 全局盒模型设置 */
* { box-sizing: border-box; }           /* *选择器匹配所有元素；box-sizing:border-box使宽高包含padding和border */

/* 页面基础样式 */
html,                                   /* 选择html元素 */
body {                                  /* 选择body元素 */
  margin: 0;                            /* 清除默认外边距 */
  padding: 0;                           /* 清除默认内边距 */
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;/* 设置字体栈，优先中文字体 */
  color: var(--ink-0);                  /* 使用CSS变量设置文字颜色 */
  background-color: var(--bg-white);    /* 使用CSS变量设置背景色 */
  line-height: 1.6;                     /* 设置行高 */
  -webkit-font-smoothing: antialiased;  /* 苹果设备字体抗锯齿 */
  -moz-osx-font-smoothing: grayscale;   /* Firefox字体灰度优化 */
}

/* ========== 通用容器类 ========== */
.shell {                                /* 类选择器：通用容器 */
  width: min(var(--max-width), calc(100% - 40px));/* 宽度取最大值和视口宽度减40px的较小值 */
  margin: 0 auto;                       /* 水平居中 */
}

/* ========== 头部导航 ========== */
.header {                               /* 类选择器：头部容器 */
  position: sticky;                     /* 粘性定位，滚动时固定在顶部 */
  top: 0;                               /* 固定在顶部位置 */
  z-index: 100;                         /* 堆叠层级，确保在最上层 */
  background-color:#fff;  /* 原 #dfd1f6 的 rgba 版本，60%不透明度 */
  border-bottom: 1px solid var(--border-gray);/* 底部边框 */
  box-shadow: var(--shadow-sm);         /* 小阴影效果 */
}

.header-row {                           /* 类选择器：头部内容行 */
  height: 64px;                         /* 固定高度 */
  display: flex;                        /* Flex布局 */
  align-items: center;                  /* 垂直居中对齐 */
  justify-content: space-between;       /* 两端对齐 */
  gap: 20px;                            /* 子元素间距 */
}

/* 品牌Logo区域 */
.brand {                                /* 类选择器：品牌区域 */
  display: flex;                        /* Flex布局 */
  align-items: center;                  /* 垂直居中 */
  gap: 10px;                            /* 子元素间距 */
  margin-left: -220px;
  text-decoration: none;                /* 去除下划线 */
}

.brand-icon img {                       /* 类选择器：品牌图标 */
  width: 40px;                          /* 宽度 */
  height: 40px;                         /* 高度 */
  object-fit: contain;                  /* 保持比例缩放 */
  position: relative;                   /* 相对定位 */
  top: 3px;                             /* 向下移动3px */
}

.brand-text {                           /* 类选择器：品牌文字容器 */
  display: flex;                        /* Flex布局 */
  flex-direction: row;                  /* 水平排列 */
  align-items: center;                  /* 垂直居中 */
  gap: 10px;                            /* 元素间距 */
}

.brand-divider {                        /* 类选择器：分隔竖杠 */
  color: var(--ink-3);                  /* 淡紫灰色 */
  font-size: 16px;                      /* 字号 */
  margin: 0 4px;                        /* 左右间距 */
}

.brand-slogan {                         /* 类选择器：品牌标语 */
  color: var(--ink-2);                  /* 辅助文字色 */
  font-size: 12px;                      /* 字体大小 */
  line-height: 1.4;                     /* 行高 */
}

.brand strong {                         /* 类选择器：品牌名称 */
  color: var(--primary);                /* 主品牌色 */
  font-size: 22px;                      /* 字体大小 */
  font-weight: 600;                     /* 字重 */
  line-height: 1.2;                     /* 行高 */
  letter-spacing: 0.5px;                /* 字间距 */
}

.brand span {                           /* 类选择器：品牌副标题 */
  color: var(--ink-2);                  /* 辅助文字色 */
  font-size: 17px;                      /* 字体大小 */
  line-height: 1.4;                     /* 行高 */
}

/* 导航菜单 */
.nav {                                  /* 类选择器：导航菜单 */
  display: flex;                        /* Flex布局 */
  align-items: center;                  /* 垂直居中 */
  gap: 32px;                            /* 菜单项间距 */
}

.nav a {                                /* 类选择器：导航链接 */
  color: var(--accent);                  /* 次要文字色 */
  font-size: 16px;                      /* 字体大小 */
  font-weight: 600;                     /* 字重 */
  text-decoration: none;                /* 去除下划线 */
  transition: all 0.3s ease;            /* 所有属性过渡动画 */
  position: relative;                   /* 相对定位 */
  padding: 4px 0;                       /* 上下内边距 */
}

.nav a::after {                         /* 伪元素：底部指示器 */
  content: "";                          /* 必须设置content */
  position: absolute;                   /* 绝对定位 */
  bottom: 0;                            /* 底部对齐 */
  left: 0;                              /* 左侧对齐 */
  width: 0;                             /* 初始宽度为0 */
  height: 2px;                          /* 高度 */
  background: linear-gradient(90deg, var(--primary) 0%, var(--accent) 100%);/* 紫色渐变 */
  transition: width 0.3s ease;          /* 宽度过渡动画 */
}

.nav a:hover {                          /* 类选择器：导航链接悬停状态 */
  color: var(--primary);                /* 悬停时变为品牌色 */
}

.nav a:hover::after {                   /* 伪元素：悬停时显示指示器 */
  width: 100%;                          /* 宽度100% */
}

/* ========== Hero 区域 ========== */
.hero {                                 /* 类选择器：Hero区域 */
  position: relative;                   /* 相对定位(作为子元素定位参考) */
  padding: 80px 0 150px;                /* 内边距：上下分别为80px和100px */
  background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 80%);/* 135度紫色渐变背景 */
  color: #fff;                          /* 白色文字 */
  overflow: hidden;                     /* 隐藏溢出内容 */
}

.hero::before {                         /* 伪元素：背景装饰层 */
  content: "";                          /* 必须设置content才能显示伪元素 */
  position: absolute;                   /* 绝对定位 */
  right: -10%;                          /* 右侧超出10% */
  top: 5%;                            /* 顶部超出10% */
  width: 60%;                           /* 宽度60% */
  height: 80%;                         /* 高度120% */
  background: url("./database/logo.png") center / contain no-repeat;/* 背景图居中不重复 */
  opacity: 0.10;                        /* 5%不透明度 */
  pointer-events: none;                 /* 不响应鼠标事件 */
  animation: logoFloat 20s ease-in-out infinite;/* Logo浮动动画 */
}

@keyframes logoFloat {                  /* 关键帧动画：Logo浮动 */
  0%, 100% {                            /* 起始和结束状态 */
    transform: translate(0, 0);         /* 原位 */
  }
  50% {                                 /* 半周期 */
    transform: translate(-20px, -10px); /* 向左向上移动 */
  }
}

.hero::after {                          /* 伪元素：底部渐变过渡 */
  content: "";                          /* 必须设置content */
  position: absolute;                   /* 绝对定位 */
  bottom: 0;                            /* 底部对齐 */
  left: 0;                              /* 左侧对齐 */
  right: 0;                             /* 右侧对齐 */
  height: 80px;                         /* 高度80px */
  background: linear-gradient(to top, var(--bg-gray-50), transparent);/* 向上渐变透明 */
}

.hero-content {                         /* 类选择器：Hero内容容器 */
  position: relative;                   /* 相对定位 */
  z-index: 1;                           /* 堆叠层级高于伪元素 */
  margin-left: 200px;                        /* 取消居中，左对齐 */
  margin-right: auto;                    /* 右侧自动 */
}

.hero-subtitle {                        /* 类选择器：副标题 */
  display: inline-block;                /* 行内块元素 */
  margin-top: 100px;
  margin-bottom: 8px;                  /* 底部外边距 */
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;/* 英文字体 */
  font-size: 24px;                      /* 字体大小 */
  font-weight: 600;                     /* 字重 */
  letter-spacing: 2px;                  /* 字间距 */
  text-transform: uppercase;            /* 大写转换 */
  opacity: 0.9;                         /* 90%不透明度 */
}

.hero h1 {                              /* 类选择器：Hero标题 */
  margin: 0 0 60px;                     /* 外边距：底部20px */
  font-size: clamp(36px, 5vw, 56px);    /* 响应式字号：最小36px，最大56px */
  font-weight: 700;                     /* 粗体 */
  line-height: 1.15;                    /* 行高 */
  letter-spacing: -0.5px;                /* 负字间距(紧缩) */
}

.hero-description {                     /* 类选择器：描述文字 */
  max-width: 600px;                     /* 最大宽度 */
  margin: 0 0 32px;                     /* 外边距：底部32px */
  font-size: 16px;                      /* 字体大小 */
  line-height: 1.8;                     /* 行高 */
  color: rgba(255, 255, 255, 0.85);     /* 白色85%不透明度 */
}

.hero-slogan {                          /* 类选择器：Hero标语 */
  opacity: 0.15;                        /* 低不透明度融入背景 */
  font-size: 100px;                      /* 大字号 */
  font-weight: 500;                     /* 细字重 */
  letter-spacing: 2px;                  /* 字间距 */
  margin-left: 200px;
  margin-top: 20px;                     /* 顶部间距 */
  color: #fff;                          /* 白色文字 */
}

/* ========== 统计数据区域 ========== */
.stats {                                /* 类选择器：统计区域 */
  background-color: var(--bg-gray-50);  /* 浅紫背景 */
  border-bottom: 1px solid var(--border-gray);/* 底部边框 */
}

.stats-grid {                           /* 类选择器：统计网格 */
  display: grid;                        /* Grid布局 */
  grid-template-columns: repeat(4, minmax(0, 1fr));/* 4列等宽 */
  padding: 100px 0 100px;                      /* 上下内边距 */
}

.stat {                                 /* 类选择器：统计项 */
  text-align: center;                   /* 文字居中 */
  padding: 0 20px;                      /* 左右内边距 */
  position: relative;                   /* 相对定位 */
  transition: all 0.3s ease;            /* 过渡动画 */
}

.stat::before {                         /* 伪元素：背景装饰 */
  content: "";                          /* 必须设置content */
  position: absolute;                   /* 绝对定位 */
  top: 50%;                             /* 垂直居中 */
  left: 50%;                            /* 水平居中 */
  transform: translate(-50%, -50%);     /* 居中对齐 */
  width: 80px;                          /* 宽度 */
  height: 80px;                         /* 高度 */
  background: radial-gradient(circle, rgba(158, 128, 216, 0.1) 0%, transparent 70%);/* 紫色径向渐变 */
  border-radius: 50%;                   /* 圆形 */
  z-index: -1;                          /* 在内容下方 */
  transition: all 0.3s ease;            /* 过渡动画 */
}

.stat:hover {                           /* 类选择器：统计项悬停 */
  transform: translateY(-4px);          /* 向上移动4px */
}

.stat:hover::before {                   /* 伪元素：悬停时放大 */
  width: 100px;                         /* 放大宽度 */
  height: 100px;                        /* 放大高度 */
  background: radial-gradient(circle, rgba(158, 128, 216, 0.2) 0%, transparent 70%);/* 加深颜色 */
}

.stat strong {                          /* 类选择器：统计数字 */
  display: block;                       /* 块级元素 */
  margin-bottom: 8px;                   /* 底部外边距 */
  font-size: 36px;                      /* 字体大小 */
  font-weight: 700;                     /* 粗体 */
  color: var(--primary);                /* 品牌色 */
  line-height: 1.2;                     /* 行高 */
}

.stat span {                            /* 类选择器：统计标签 */
  font-size: 14px;                      /* 字体大小 */
  color: var(--ink-2);                  /* 辅助文字色 */
  line-height: 1.5;                     /* 行高 */
}

/* ========== 通用区块样式 ========== */
.section {                              /* 类选择器：通用区块 */
  padding: 64px 0;                      /* 上下内边距 */
}

.section-gray {                         /* 类选择器：灰色背景区块 */
  background-color: var(--bg-gray-50);  /* 浅紫背景 */
}

.section-head {                         /* 类选择器：区块头部 */
  text-align: center;                   /* 居中 */
  margin-bottom: 48px;                  /* 底部外边距 */
}

.section-head h2 {                      /* 类选择器：区块标题 */
  margin: 0 0 12px;                     /* 底部外边距 */
  font-size: 32px;                      /* 字体大小 */
  font-weight: 700;                     /* 粗体 */
  color: var(--ink-0);                  /* 主文字色 */
  letter-spacing: -0.3px;                /* 负字间距 */
}

.section-head p {                       /* 类选择器：区块副标题 */
  margin: 0 auto;                       /* 水平居中 */
  max-width: 600px;                     /* 最大宽度 */
  font-size: 15px;                      /* 字体大小 */
  color: var(--ink-2);                  /* 辅助文字色 */
  line-height: 1.8;                     /* 行高 */
}

/* ========== 机构简介区域 ========== */
.intro-layout {                          /* 类选择器：简介布局 */
  display: grid;                         /* Grid布局 */
  grid-template-columns: minmax(300px, 1fr) minmax(300px, 1fr);/* 两列等宽，最小300px */
  gap: 60px;                            /* 增加列间距 */
  align-items: start;                   /* 顶部对齐 */
  width: 100vw;                         /* 视口宽度100% */
  margin-left: calc(-50vw + 50%);       /* 向左偏移使左右撑满 */
  padding: 0 60px;                      /* 左右内边距 */
}

.intro-video {                           /* 类选择器：视频区域 */
  position: relative;                    /* 相对定位，固定位置 */
  align-self: start;                    /* 顶部对齐 */
}

.intro-video-element {                   /* 类选择器：视频元素 */
  width: 100%;                          /* 宽度100% */
  height: auto;                         /* 高度自适应 */
  display: block;                       /* 块级元素 */
  border-radius: var(--radius);          /* 圆角 */
  box-shadow: var(--shadow-lg);         /* 大阴影 */
}

.intro-content {                         /* 类选择器：内容区域 */
  display: flex;                        /* Flex布局 */
  flex-direction: column;               /* 垂直排列 */
  gap: 0;                               /* 无间距 */
}

.intro-content .panel {                 /* 类选择器：内容区域的panel */
  height: 100%;                         /* 高度100% */
  display: flex;                        /* Flex布局 */
  flex-direction: column;               /* 垂直排列 */
  gap: 32px;                            /* 内部间距 */
  background: none;                     /* 无背景 */
  border: none;                         /* 无边框 */
  padding: 0;                           /* 无内边距 */
  box-shadow: none;                     /* 无阴影 */
}

.intro-content .panel h3 {              /* 类选择器：内容区域标题 */
  margin-top: 0;                        /* 顶部外边距为0 */
  margin-bottom: 16px;                  /* 底部外边距 */
  padding-bottom: 0;                    /* 无底部内边距 */
  border-bottom: none;                  /* 无底部边框 */
}

.intro-content .panel h3:first-child {  /* 类选择器：第一个标题 */
  margin-top: 0;                        /* 顶部外边距为0 */
}

.intro-content .panel h3:not(:first-child) {/* 类选择器：非第一个标题 */
  margin-top: 32px;                     /* 顶部外边距 */
}

/* 卡片面板 */
.panel {                                /* 类选择器：卡片面板 */
  background-color: var(--bg-white);    /* 白色背景 */
  border: 1px solid var(--border-gray); /* 边框 */
  border-radius: var(--radius);         /* 圆角 */
  padding: 32px;                        /* 内边距 */
  transition: all 0.3s ease;            /* 所有属性过渡动画 */
  position: relative;                   /* 相对定位 */
  overflow: hidden;                     /* 隐藏溢出 */
}

.panel::before {                        /* 伪元素：顶部装饰线 */
  content: "";                          /* 必须设置content */
  position: absolute;                   /* 绝对定位 */
  top: 0;                               /* 顶部对齐 */
  left: 0;                              /* 左侧对齐 */
  right: 0;                             /* 右侧对齐 */
  height: 3px;                          /* 高度 */
  background: linear-gradient(90deg, var(--primary) 0%, var(--accent) 100%);/* 紫色渐变 */
  transform: scaleX(0);                 /* 初始宽度为0 */
  transform-origin: left;               /* 从左侧开始 */
  transition: transform 0.3s ease;      /* 过渡动画 */
}

.panel:hover {                          /* 类选择器：卡片悬停状态 */
  box-shadow: var(--shadow-lg);         /* 悬停时显示大阴影 */
  transform: translateY(-4px);          /* 向上移动4px */
}

.panel:hover::before {                  /* 伪元素：悬停时显示装饰线 */
  transform: scaleX(1);                 /* 恢复完整宽度 */
}

.panel h3 {                             /* 类选择器：卡片标题 */
  margin: 0 0 16px;                     /* 底部外边距 */
  font-size: 20px;                      /* 字体大小 */
  font-weight: 600;                     /* 字重 */
  color: var(--primary);                /* 品牌色 */
}

.panel p {                              /* 类选择器：卡片描述 */
  margin: 0 0 20px;                     /* 底部外边距 */
  font-size: 15px;                      /* 字体大小 */
  color: var(--ink-1);                  /* 次要文字色 */
  line-height: 1.8;                     /* 行高 */
}

/* 徽章组 */
.intro-badges {                         /* 类选择器：徽章容器 */
  display: flex;                        /* Flex布局 */
  flex-wrap: wrap;                      /* 自动换行 */
  gap: 8px;                             /* 徽章间距 */
}

.intro-badges span {                    /* 类选择器：徽章项 */
  padding: 6px 12px;                    /* 内边距 */
  background-color: var(--bg-gray-50);  /* 浅紫背景 */
  border: 1px solid var(--border-gray); /* 边框 */
  border-radius: 4px;                   /* 圆角 */
  font-size: 12px;                      /* 字体大小 */
  color: var(--ink-1);                  /* 次要文字色 */
  transition: all 0.3s ease;            /* 过渡动画 */
}

.intro-badges span:hover {              /* 类选择器：徽章项悬停 */
  background-color: var(--accent);      /* 强调色背景 */
  color: #fff;                          /* 白色文字 */
  transform: translateY(-2px);          /* 向上移动2px */
}

/* 列表项 */
.intro-lines {                          /* 类选择器：列表容器 */
  margin: 0;                            /* 清除默认外边距 */
  padding: 0;                           /* 清除默认内边距 */
  display: grid;                        /* Grid布局 */
  gap: 12px;                            /* 列表项间距 */
}

.intro-lines li {                       /* 类选择器：列表项 */
  list-style: none;                     /* 去除默认列表样式 */
  padding: 8px 0 8px 28px;              /* 简化内边距 */
  background-color: transparent;         /* 透明背景 */
  border-radius: 0;                     /* 无圆角 */
  font-size: 14px;                      /* 字体大小 */
  color: var(--ink-1);                  /* 次要文字色 */
  line-height: 1.7;                     /* 行高 */
  position: relative;                   /* 相对定位(作为伪元素参考) */
}

.intro-lines li::before {               /* 伪元素：列表图标 */
  content: "";                          /* 必须设置content */
  position: absolute;                   /* 绝对定位 */
  left: 8px;                            /* 左侧位置 */
  top: 50%;                             /* 顶部50% */
  transform: translateY(-50%);          /* 向上移动自身高度一半(垂直居中) */
  width: 8px;                           /* 宽度 */
  height: 8px;                          /* 高度 */
  background-color: var(--accent);      /* 强调色 */
  border-radius: 50%;                   /* 圆形 */
}

/* ========== 案例分享区域 ========== */
#case {                                 /* ID选择器：案例分享区域 */
  position: relative;                   /* 相对定位 */
  padding-bottom: 60px;                 /* 底部内边距 */
  background: linear-gradient(135deg, rgba(122, 94, 169, 0.08) 0%, rgba(156, 115, 198, 0.12) 100%);/* 淡紫色渐变背景 */
}

#case .shell {                          /* 案例区域内的shell容器 */
  position: relative;                   /* 相对定位 */
}

.case-layout {                          /* 类选择器：案例布局 */
  display: grid;                        /* Grid布局 */
  grid-template-columns: minmax(400px, 1fr) minmax(400px, 1fr);/* 两列等宽，最小400px */
  gap: 0;                               /* 无间距 */
  width: 100%;                          /* 宽度100% */
}

.case-text {                            /* 类选择器：左侧文字区域 */
  background-color: transparent;        /* 透明背景 */
  padding: 0 60px 60px 60px;           /* 内边距，上边距为0 */
  display: flex;                        /* Flex布局 */
  align-items: flex-start;              /* 顶部对齐 */
}

.case-text-inner {                      /* 类选择器：文字内容容器 */
  color: #333;                          /* 深灰色文字 */
  text-align: left;                     /* 左对齐 */
  margin-left: 300px;
}

.case-text-inner h3 {                   /* 类选择器：文字区域标题 */
  font-size: 28px;                      /* 字体大小 */
  font-weight: 600;                     /* 字重 */
  margin-bottom: 24px;                  /* 底部外边距 */
  line-height: 1.4;                     /* 行高 */
}

.case-text-inner h4 {                   /* 类选择器：文字区域子标题 */
  font-size: 18px;                      /* 字体大小 */
  font-weight: 600;                     /* 字重 */
  margin: 20px 0 12px;                 /* 外边距 */
  opacity: 0.95;                        /* 稍微透明 */
}

.case-text-inner p {                    /* 类选择器：文字区域段落 */
  font-size: 15px;                      /* 字体大小 */
  line-height: 1.8;                     /* 行高 */
  opacity: 0.92;                        /* 稍微透明 */
  margin-bottom: 16px;                  /* 底部外边距 */
}

.case-text-inner ul {                   /* 类选择器：文字区域列表 */
  padding-left: 20px;                   /* 左侧内边距 */
  padding-right: 0;                     /* 清除右侧内边距 */
  margin-bottom: 16px;                  /* 底部外边距 */
  list-style-position: outside;         /* 列表标记在外部 */
  text-align: left;                     /* 左对齐 */
}

.case-text-inner li {                   /* 类选择器：文字区域列表项 */
  font-size: 14px;                      /* 字体大小 */
  line-height: 1.8;                     /* 行高 */
  opacity: 0.88;                        /* 稍微透明 */
  margin-bottom: 8px;                   /* 底部外边距 */
}

.case-text-inner strong {               /* 类选择器：强调文字 */
  color: var(--primary);                /* 品牌紫色 */
}

.case-image-wrapper {                   /* 类选择器：右侧图片区域容器 */
  position: relative;                   /* 相对定位 */
  padding: 0 60px 60px 60px;           /* 内边距，上边距为0 */
  display: flex;                        /* Flex布局 */
  align-items: flex-start;              /* 顶部对齐 */
  justify-content: center;              /* 水平居中 */
}

.case-image-wrapper .case-image-frame {
  padding-top: 0;                       /* 图片容器上边距为0 */
}

.case-image-frame {                     /* 类选择器：图片边框容器 */
  position: relative;                   /* 相对定位 */
  border: none;                          /* 无边框 */
  overflow: hidden;                     /* 隐藏溢出 */
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);/* 更大的阴影效果 */
}

.case-image-frame img {                 /* 类选择器：案例图片 */
  display: block;                       /* 块级元素 */
  width: 100%;                          /* 宽度100% */
  height: auto;                         /* 高度自动 */
}

.case-image-caption {                   /* 类选择器：图片注释 */
  color: #999;                          /* 浅灰色文字 */
  font-size: 13px;                      /* 字体大小 */
  text-align: center;                   /* 居中对齐 */
  margin-top: 12px;                     /* 顶部外边距 */
  line-height: 1.5;                     /* 行高 */
}

.case-full-width {                      /* 旧样式保留兼容 */
  display: grid;                        /* Grid布局 */
  grid-template-columns: 1fr 1fr;       /* 两列等宽 */
  width: 100%;                          /* 宽度100% */
}

.case-image img {                       /* 类选择器：案例图片 */
  width: 60%;                          /* 宽度100% */
  height: auto;                         /* 高度100% */
  min-height: 400px;                    /* 最小高度 */
  object-fit: cover;                    /* 覆盖填充(保持比例) */
}

.case-copy {  
  margin-right: 400px;                          /* 类选择器：案例内容 */
  background-color: var(--bg-white);    /* 白色背景 */
  padding: 0;                           /* 清除内边距 */
  display: flex;                        /* Flex布局 */
  align-items: center;                  /* 垂直居中 */
}

.case-content {                         /* 类选择器：案例内容容器 */
  padding: 60px;                        /* 内边距 */
  max-width: 500px;                     /* 最大宽度 */
}

.case-copy h3 {                         /* 类选择器：案例标题 */
  margin: 0 0 16px;                     /* 底部外边距 */
  font-size: 22px;                      /* 字体大小 */
  font-weight: 600;                     /* 字重 */
  color: var(--primary);                /* 品牌色 */
  line-height: 1.4;                     /* 行高 */
}

.case-copy p {                          /* 类选择器：案例描述 */
  margin: 0 0 16px;                     /* 底部外边距 */
  font-size: 15px;                      /* 字体大小 */
  color: var(--ink-1);                  /* 次要文字色 */
  line-height: 1.8;                     /* 行高 */
}

.case-copy ul {                         /* 类选择器：案例列表 */
  margin: 0 0 16px;                     /* 底部外边距 */
  padding-left: 20px;                   /* 左侧内边距 */
}

.case-copy li {                         /* 类选择器：案例列表项 */
  margin-bottom: 8px;                   /* 底部外边距 */
  font-size: 15px;                      /* 字体大小 */
  color: var(--ink-1);                  /* 次要文字色 */
  line-height: 1.7;                     /* 行高 */
}

/* ========== 知识分享区域 ========== */
.knowledge-grid {                       /* 类选择器：知识网格 */
  display: grid;                        /* Grid布局 */
  grid-template-columns: repeat(3, minmax(0, 1fr));/* 3列等宽 */
  gap: 40px;                            /* 增加间距 */
}

.knowledge {                            /* 类选择器：知识卡片 */
  display: flex;                        /* Flex布局 */
  flex-direction: column;               /* 垂直排列 */
  background-color: transparent;        /* 透明背景 */
  border: none;                         /* 无边框 */
  border-radius: 0;                     /* 无圆角 */
  overflow: visible;                    /* 可见溢出 */
  transition: all 0.3s ease;            /* 所有属性过渡动画 */
  position: relative;                   /* 相对定位 */
  padding: 24px 0;                     /* 上下内边距 */
}

.knowledge-icon {                       /* 类选择器：知识图标容器 */
  width: 56px;                          /* 宽度 */
  height: 56px;                         /* 高度 */
  border-radius: 50%;                   /* 圆形 */
  background-color: rgba(122, 94, 169, 0.1);/* 淡紫色背景 */
  display: flex;                        /* Flex布局 */
  align-items: center;                  /* 垂直居中 */
  justify-content: center;              /* 水平居中 */
  margin-bottom: 20px;                  /* 底部外边距 */
  color: var(--primary);                /* 品牌色 */
  transition: all 0.3s ease;            /* 过渡动画 */
}

.knowledge:hover .knowledge-icon {      /* 类选择器：悬停时图标 */
  background-color: var(--primary);     /* 品牌色背景 */
  color: #fff;                          /* 白色图标 */
  transform: scale(1.1);                /* 放大 */
}

.knowledge h3 {                         /* 类选择器：知识标题 */
  margin: 0 0 12px;                     /* 底部外边距 */
  font-size: 16px;                      /* 字体大小 */
  font-weight: 600;                     /* 字重 */
  color: var(--ink-0);                  /* 主文字色 */
  line-height: 1.4;                     /* 行高 */
}

.knowledge p {                          /* 类选择器：知识描述 */
  margin: 0 0 16px;                     /* 底部外边距 */
  font-size: 14px;                      /* 字体大小 */
  color: var(--ink-2);                  /* 辅助文字色 */
  line-height: 1.7;                     /* 行高 */
}

/* ========== 联系我们区域 ========== */
.contact-purple {                       /* 类选择器：紫色联系区域 */
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);/* 紫色渐变 */
  color: #fff;                          /* 白色文字 */
  padding: 64px 0;                      /* 上下内边距 */
}

.contact-layout {                       /* 类选择器：联系布局 */
  display: flex;                         /* Flex布局 */
  flex-direction: column;               /* 垂直排列 */
}

.contact-layout h3 {                    /* 类选择器：联系标题 */
  margin: 0 0 16px;                     /* 底部外边距 */
  font-size: 26px;                      /* 字体大小 */
  font-weight: 600;                     /* 字重 */
  line-height: 1.3;                     /* 行高 */
}

.contact-info {                         /* 类选择器：联系信息两列布局 */
  display: grid;                         /* Grid布局 */
  grid-template-columns: 1fr 1fr;        /* 两列等宽 */
  gap: 40px;                             /* 列间距 */
  margin-bottom: 24px;                   /* 底部外边距 */
}

.contact-left, .contact-right {          /* 类选择器：左右两列列表 */
  margin: 0;                             /* 清除外边距 */
  padding: 0;                            /* 清除内边距 */
}

.contact-left li, .contact-right li {    /* 类选择器：列表项 */
  list-style: none;                      /* 去除默认样式 */
  font-size: 15px;                       /* 字体大小 */
  line-height: 2;                        /* 行高 */
  color: rgba(255, 255, 255, 0.95);     /* 白色95%不透明度 */
  padding-left: 20px;                    /* 左侧内边距 */
  position: relative;                    /* 相对定位 */
}

.contact-left li::before,
.contact-right li::before {              /* 伪元素：圆点标记 */
  content: "•";                          /* 圆点字符 */
  position: absolute;                    /* 绝对定位 */
  left: 0;                               /* 左侧对齐 */
  color: rgba(255, 255, 255, 0.8);      /* 白色80%不透明度 */
  font-size: 16px;                       /* 圆点大小 */
}

.contact-note {                          /* 类选择器：联系备注 */
  margin: 0;                             /* 清除外边距 */
  font-size: 14px;                       /* 字体大小 */
  line-height: 1.6;                      /* 行高 */
  color: rgba(255, 255, 255, 0.8);      /* 白色80%不透明度 */
}


/* ========== 入场动画 ========== */
.reveal {                               /* 类选择器：待入场元素 */
  opacity: 0;                           /* 初始透明 */
  transform: translateY(30px);          /* 初始向下偏移30px */
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);/* 平滑过渡动画 */
}

.reveal.in {                            /* 类选择器：入场后状态 */
  opacity: 1;                           /* 完全不透明 */
  transform: translateY(0);             /* 回到原位 */
}

.reveal-delay-1 { animation-delay: 0.1s; }
.reveal-delay-2 { animation-delay: 0.2s; }
.reveal-delay-3 { animation-delay: 0.3s; }

/* ========== 导航栏滚动效果 ========== */
.header {                               /* 类选择器：头部容器 */
  position: sticky;                     /* 粘性定位，滚动时固定在顶部 */
  top: 0;                               /* 固定在顶部位置 */
  z-index: 100;                         /* 堆叠层级，确保在最上层 */
  background-color: rgba(255, 255, 255, 0.95);/* 白色背景(95%不透明度) */
  border-bottom: 1px solid var(--border-gray);/* 底部边框 */
  transition: all 0.3s ease;            /* 所有属性过渡动画 */
}

.header.scrolled {                      /* 类选择器：滚动后状态 */
  box-shadow: var(--shadow-md);         /* 添加中阴影 */
  backdrop-filter: blur(10px);          /* 毛玻璃效果 */
}

.nav a.active {                         /* 类选择器：导航激活状态 */
  color: var(--primary);                /* 品牌色 */
  position: relative;                   /* 相对定位 */
}

.nav a.active::after {                  /* 伪元素：激活指示器 */
  content: "";                          /* 必须设置content */
  position: absolute;                   /* 绝对定位 */
  bottom: -4px;                         /* 底部位置 */
  left: 0;                              /* 左侧对齐 */
  right: 0;                             /* 右侧对齐 */
  height: 2px;                          /* 高度 */
  background-color: var(--accent);      /* 强调色 */
  border-radius: 1px;                   /* 圆角 */
}

/* ========== Hero区域粒子效果 ========== */
.particle {                             /* 类选择器：浮动粒子 */
  position: absolute;                   /* 绝对定位 */
  border-radius: 50%;                   /* 圆形 */
  background-color: rgba(255, 255, 255, 0.4);/* 白色半透明 */
  pointer-events: none;                 /* 不响应鼠标事件 */
  animation: float 8s ease-in-out infinite;/* 浮动动画 */
}

@keyframes float {                      /* 关键帧动画：浮动 */
  0%, 100% {                            /* 起始和结束状态 */
    transform: translateY(0) translateX(0);/* 原位 */
    opacity: 0.3;                       /* 低不透明度 */
  }
  25% {                                 /* 四分之一周期 */
    transform: translateY(-20px) translateX(10px);/* 向上向右移动 */
    opacity: 0.6;                       /* 中等不透明度 */
  }
  50% {                                 /* 半周期 */
    transform: translateY(-10px) translateX(-5px);/* 向上向左移动 */
    opacity: 0.4;                       /* 低中等不透明度 */
  }
  75% {                                 /* 四分之三周期 */
    transform: translateY(-30px) translateX(5px);/* 向上向右移动 */
    opacity: 0.5;                       /* 中等不透明度 */
  }
}

/* ========== 页面加载动画 ========== */
body {                                  /* 标签选择器：body */
  opacity: 0;                           /* 初始透明 */
  transition: opacity 0.5s ease;        /* 过渡动画 */
}

body.loaded {                           /* 类选择器：加载完成状态 */
  opacity: 1;                           /* 完全不透明 */
}

/* ========== 视差元素样式 ========== */
.parallax {                             /* 类选择器：视差元素 */
  will-change: transform;               /* 告诉浏览器即将变化 */
}

/* ========== 响应式断点 ========== */
@media (max-width: 960px) {             /* 媒体查询：屏幕宽度≤960px */
  .intro-layout {                        /* 简介布局 */
    grid-template-columns: 1fr;          /* 改为单列 */
    width: 100%;                         /* 恢复正常宽度 */
    margin-left: 0;                      /* 移除左偏移 */
    padding: 0;                          /* 移除内边距 */
  }

  .case-layout,                         /* 案例布局 */
  .case-full-width,                     /* 案例布局（旧） */
  .contact-info {                       /* 联系信息布局 */
    grid-template-columns: 1fr;          /* 改为单列 */
  }

  .case-text {                           /* 案例文字区域 */
    padding: 40px 24px;                  /* 减小内边距 */
  }

  .case-image-wrapper {                  /* 案例图片区域 */
    padding: 40px 24px;                  /* 减小内边距 */
  }

  .case-image-corner {                   /* 角落装饰 */
    display: none;                       /* 隐藏角落装饰 */
  }

  .intro-video {                         /* 视频区域 */
    position: static;                    /* 移除粘性定位 */
    order: -1;                          /* 视频在内容上方 */
  }

  .intro-content {                       /* 内容区域 */
    order: 1;                           /* 内容在视频下方 */
  }

  .intro-content .panel h3:not(:first-child) {/* 非第一个标题 */
    margin-top: 24px;                   /* 减小顶部外边距 */
  }

  .knowledge-grid {                     /* 知识网格 */
    grid-template-columns: repeat(2, minmax(0, 1fr));/* 改为两列 */
  }
}

@media (max-width: 768px) {             /* 媒体查询：屏幕宽度≤768px */
  .header-row {                         /* 头部行 */
    height: auto;                        /* 高度自适应 */
    padding: 12px 0;                    /* 上下内边距 */
    flex-direction: column;              /* 垂直排列 */
    align-items: flex-start;             /* 左对齐 */
    gap: 12px;                          /* 间距 */
  }

  .nav {                                /* 导航菜单 */
    gap: 20px;                          /* 间距 */
  }

  .hero {                               /* Hero区域 */
    padding: 56px 0 72px;               /* 减小内边距 */
  }

  .hero h1 {                            /* Hero标题 */
    font-size: clamp(28px, 5vw, 40px);  /* 减小字号范围 */
  }

  .stats-grid {                         /* 统计网格 */
    grid-template-columns: repeat(2, minmax(0, 1fr));/* 改为两列 */
    gap: 24px;                          /* 间距 */
  }

  .stat strong {                        /* 统计数字 */
    font-size: 28px;                    /* 减小字号 */
  }

  .knowledge-grid {                     /* 知识网格 */
    grid-template-columns: repeat(2, minmax(0, 1fr));/* 改为两列 */
    gap: 32px;                           /* 减小间距 */
  }

  .panel,                               /* 卡片面板 */
  .case-content {                       /* 案例内容 */
    padding: 20px;                      /* 减小内边距 */
  }
}

.icp-number {                          /* 类选择器：备案号 */
  margin: 0;                           /* 清除外边距 */
  font-size: 12px;                     /* 字体大小 */
  color: rgba(255, 255, 255, 0.7);     /* 白色70%不透明度 */
  font-weight: 400;                    /* 常规字重 */
  margin-top: 16px;                    /* 顶部外边距 */
  padding-top: 16px;                   /* 顶部内边距 */
  border-top: 1px solid rgba(255, 255, 255, 0.15);/* 顶部分隔线 */
}