标签（3条横线），设置横线样式 */
width: 25px;
/* 52. 横线宽度为25px，保证汉堡菜单有足够的点击区域 */
height: 3px;
/* 53. 横线高度为3px，形成细长的线条样式 */
background-color: var(--brand-blue);
/* 54. 横线颜色为品牌蓝色，与logo颜色一致，保持视觉统一 */
}
/* --- 英雄区（大图区）布局 --- */
.hero {
/* 55. .hero类选择器：匹配英雄区容器，包裹轮播图、遮罩层和文字内容 */
position: relative;
/* 56. 设置为相对定位：作为内部绝对定位元素（轮播图、遮罩层、文字）的父容器，让子元素的定位相对于该容器，而不是整个页面 */
width: 100%;
/* 57. 英雄区宽度占满整个父容器（页面宽度） */
max-width: 1800px;
/* 58. 限制英雄区最大宽度为1800px，与导航栏保持一致，避免超大屏幕下过度拉伸 */
margin: 0 auto;
/* 59. 英雄区水平居中，与导航栏对齐 */
overflow: hidden;
/* 60. 隐藏超出容器的内容：避免轮播图放大时超出英雄区边界，出现滚动条 */
background-color: #000;
/* 61. 设置默认背景色为黑色：当轮播图图片加载失败时，显示黑色背景，避免出现白色空白，提升容错性 */
}
/* --- 轮播图容器 --- */
.slideshow-container {
/* 62. .slideshow-container类选择器：匹配轮播图容器，包裹所有幻灯片 */
position: relative;
/* 63. 相对定位：作为内部幻灯片（绝对定位）的父容器 */
width: 100%;
/* 64. 轮播图容器宽度占满英雄区 */
height: 55vh;
/* 65. 轮播图高度为55vh（视口高度单位）：占浏览器视口高度的55%，响应式适配不同屏幕高度，比固定像素更灵活 */
overflow: hidden;
/* 66. 隐藏超出容器的内容：避免幻灯片放大时超出容器边界 */
}
/* --- 移动端适配 --- */
@media (max-width: 768px) {
/* 67. 媒体查询：当屏幕宽度小于等于768px（移动端，手机/平板竖屏）时，执行内部的样式覆盖 */
.slideshow-container {
height: 30vh !important;
/* 68. 移动端轮播图高度改为30vh，适配移动端较小的屏幕，避免轮播图过高挤压下方内容；
!important：强制覆盖之前设置的55vh，确保移动端样式生效（优先级最高） */
}
}
/* --- 单个幻灯片基础样式：解决回弹的终极方案 --- */
.slide {
/* 69. .slide类选择器：匹配单个幻灯片（轮播图的每张图片） */
position: absolute;
/* 70. 绝对定位：让所有幻灯片重叠在一起（都相对于父容器.slideshow-container定位），方便实现淡入淡出切换 */
top: 0;
/* 71. 幻灯片顶部与父容器顶部对齐 */
left: 0;
/* 72. 幻灯片左侧与父容器左侧对齐 */
width: 100%;
/* 73. 幻灯片宽度占满父容器 */
height: 100%;
/* 74. 幻灯片高度占满父容器 */
background-color: #041427;
/* 75. 纯色底作为图片加载前的占位，避免首屏闪白 */
overflow: hidden;
/* 76. 确保内部图片放大时不溢出容器 */
opacity: 0;
/* 77. 默认透明度为0（完全透明），幻灯片默认隐藏，只有激活状态才显示 */
/* 使用 3.5s 的长过渡，让切换时的透明度变化极其丝滑，掩盖缩放比例的微小差异 */
transition: opacity 2.5s ease-in-out;
/* 78. 仅对透明度（opacity）设置过渡效果，时长2.5s，过渡曲线为ease-in-out（先慢后快再慢），让淡入淡出更丝滑 */
z-index: 1;
/* 79. 默认层级为1，处于较低层级，激活状态会提升层级 */
/* 重点：动画写在 .slide 基础上，而不是 .active。 */
/* 作用：图片加载后动画就永远在后台运行，不随 active 切换而重置，彻底消除回弹感。 */
animation: zoomEffect 60s linear infinite;
/* 80. 给幻灯片添加无限循环的放大动画：调用@keyframes定义的zoomEffect动画，时长60s，线性速度（匀速），无限循环 */
will-change: transform; /* 作用：调用硬件加速，优化缩放平滑度 */
/* 81. 告诉浏览器该元素的transform属性即将发生变化，让浏览器提前开启硬件加速，优化动画性能，避免卡顿 */
}
/* --- 幻灯片图片设置 --- */
.slide picture,
.slide img {
width: 100%;
height: 100%;
display: block;
}
.slide img {
object-fit: cover;
filter: saturate(1.05);
}
/* --- 激活状态：仅仅负责透明度显现 --- */
.slide.active {
/* 82. .slide.active类选择器：匹配处于激活状态的幻灯片（当前显示的轮播图） */
opacity: 1;
/* 83. 激活状态透明度为1（完全不透明），显示该幻灯片 */
z-index: 2;
/* 84. 激活状态层级提升为2，确保该幻灯片在其他隐藏幻灯片的上层，避免被遮挡 */
}
/* --- 重新定义动画：极慢速单向持续放大 --- */
@keyframes zoomEffect {
/* 85. @keyframes定义自定义动画zoomEffect，用于幻灯片的慢速放大效果 */
0% {
/* 86. 动画起始状态（0%进度） */
transform: scale(1); /* 作用：起始比例 100% */
/* 87. 元素缩放比例为1（原始大小，不缩放） */
}
100% {
/* 88. 动画结束状态（100%进度） */
transform: scale(1.2); /* 作用：60秒内缓慢变大到 1.2，绝不往回缩 */
/* 89. 元素缩放比例为1.2（放大到原始大小的120%），单向放大不回缩，避免出现回弹感 */
}
}
/* --- 遮罩层 --- */
.hero-overlay {
/* 90. .hero-overlay类选择器：匹配英雄区遮罩层，用于覆盖在轮播图上方，提升文字可读性 */
position: absolute;
/* 91. 绝对定位：相对于父容器.hero定位 */
top: 0;
/* 92. 遮罩层顶部与hero容器顶部对齐 */
left: 0;
/* 93. 遮罩层左侧与hero容器左侧对齐 */
width: 100%;
/* 94. 遮罩层宽度占满hero容器 */
height: 100%;
/* 95. 遮罩层高度占满hero容器 */
background: rgba(0,0,0,0.3);
/* 96. 遮罩层背景为半透明黑色：rgba(红,绿,蓝,透明度)，0.3的透明度既可以调暗轮播图，又不会完全遮挡图片内容，同时让白色文字更清晰 */
z-index: 3; /* 确保遮罩层在图片上方 */
/* 97. 层级为3，高于幻灯片（z-index:2），确保遮罩层覆盖在轮播图上方 */
}
/* --- 英雄区文字容器 --- */
.hero-content {
/* 98. .hero-content类选择器：匹配英雄区文字内容容器，包裹标题和描述文本 */
position: absolute;
/* 99. 绝对定位：相对于父容器.hero定位，方便调整文字在轮播图上的位置 */
left: 5%;
/* 100. 文字容器距离hero容器左侧5%，响应式适配 */
bottom: 8%;
/* 101. 文字容器距离hero容器底部8%，放置在轮播图下方，符合视觉习惯 */
color: white;
/* 102. 文字颜色为白色，与半透明遮罩层对比鲜明，提升可读性 */
text-align: left !important;
/* 103. 文字左对齐，!important确保覆盖其他可能的对齐样式 */
max-width: 800px;
/* 104. 限制文字容器的最大宽度为800px，避免文字在超大屏幕上过度拉伸，提升阅读体验 */
z-index: 4; /* 确保文字在最顶层 */
/* 105. 层级为4，高于遮罩层（z-index:3），确保文字显示在最顶层，不被其他元素遮挡 */
}
.hero-content h1 {
/* 106. 匹配.hero-content内的标签（主标题），设置标题样式 */
font-size: clamp(1.8rem, 5vw, 3.2rem);
/* 107. 响应式字体大小：clamp(最小值, 中间值, 最大值)
- 最小值1.8rem：屏幕较小时，字体不小于1.8rem
- 中间值5vw：屏幕宽度变化时，字体大小随视口宽度（5%）动态调整
- 最大值3.2rem：屏幕较大时，字体不大于3.2rem
实现不同屏幕下字体大小的自适应，无需额外写媒体查询 */
margin-bottom: 0.5rem;
/* 108. 标题底部外边距为0.5rem，与下方描述文本保持适当间距 */
font-weight: 300;
/* 109. 字体粗细为300（轻量级），让标题更优雅，不显得笨重 */
letter-spacing: 2px;
/* 110. 字符间距为2px，拉开文字之间的距离，提升标题的视觉美感 */
text-shadow: 0 2px 10px rgba(0,0,0,0.5);
/* 111. 给文字添加阴影：水平偏移0，垂直偏移2px，模糊半径10px，半透明黑色阴影
提升文字与轮播图的对比度，让文字更清晰易读，同时增加层次感 */
}
.hero-content p {
/* 112. 匹配.hero-content内的
标签（描述文本），设置文本样式 */
color: #d1dce5;
/* 113. 文本颜色为浅蓝灰色，比纯白色稍暗，与主标题形成主次对比，同时保持可读性 */
font-size: clamp(1.1rem, 2.5vw, 1.6rem);
/* 114. 响应式字体大小，逻辑同
，适配不同屏幕 */
margin: 0;
/* 115. 清除默认外边距，让文本与标题的间距仅由标题的margin-bottom控制 */
line-height: 1.4;
/* 116. 设置行高为1.4，行高是文本可读性的关键，1.4的行高让多行文本不拥挤 */
font-weight: 400;
/* 117. 字体粗细为400（正常体重），与标题的轻量级形成对比 */
text-shadow: 0 1px 5px rgba(0,0,0,0.3);
/* 118. 文字阴影，比标题阴影更浅更小，保持层次感，同时提升可读性 */
}
/* --- 业务应用网格 --- */
.section-title {
/* 119. .section-title类选择器：匹配业务板块的标题，设置标题样式 */
text-align: center;
/* 120. 文字居中对齐，作为板块标题，符合视觉习惯 */
padding: 2rem 0 0.2rem;
/* 121. 内边距：上下4rem，左右0；底部2rem，与下方网格保持适当间距 */
font-size: 2rem;
/* 122. 字体大小为2rem，突出板块标题 */
color: var(--brand-blue);
/* 123. 颜色为品牌蓝色，与logo保持视觉统一，强化品牌风格 */
}
.app-grid {
/* 124. .app-grid类选择器：匹配业务网格容器，包裹4个业务项 */
display: grid;
/* 125. 设置为Grid布局，Grid是二维布局（行+列），适合实现网格状布局，比Flex更便捷 */
grid-template-columns: repeat(4, 1fr);
/* 126. 定义网格的列布局：repeat(4, 1fr) 等价于 1fr 1fr 1fr 1fr
- fr是Grid的弹性单位，1fr表示占用剩余空间的1份
实现4列等宽的网格布局，响应式适配 */
gap: 0;
/* 127. 取消网格缝隙，避免出现浅灰横线 */
max-width: 1800px;
/* 129. 限制网格最大宽度为1800px，与导航栏、英雄区保持一致 */
margin: 0 auto;
/* 130. 网格水平居中，与其他板块对齐 */
border: 1px solid #eee;
/* 131. 为整个网格添加细边框，保持版块结构感 */
}
.app-item {
/* 131. .app-item类选择器：匹配单个业务项，设置业务项的样式 */
background: var(--soft-white);
/* 132. 业务项背景为白色 */
padding: 1rem 2rem;
/* 133. 内边距：上下4rem，左右2rem，给业务项内的文字足够的空间，提升美观度 */
text-align: center;
/* 134. 业务项内的文字居中对齐，符合网格布局的视觉习惯 */
border-right: 1px solid #eee;
border-bottom: 1px solid #eee;
/* 使用细边框替代网格间隙，整体更干净 */
}
.app-item:nth-child(4n) { border-right: none; }
.app-item:nth-last-child(-n+4) { border-bottom: none; }
/* 去掉每行最后一个和最后一行的边框，避免双线 */
/* --- 移动端（手机）适配 --- */
@media (max-width: 768px) {
/* 135. 媒体查询：屏幕宽度≤768px时，执行移动端样式覆盖 */
.menu-toggle { display: flex; }
/* 136. 移动端显示汉堡菜单（将display:none改为display:flex），用于切换导航链接 */
.nav-links {
/* 137. 重新设置移动端导航链接容器的样式 */
display: none;
/* 138. 移动端默认隐藏导航链接，点击汉堡菜单后再显示 */
flex-direction: column;
/* 139. 导航链接改为垂直方向排列，适配移动端竖屏布局 */
position: absolute;
/* 140. 绝对定位：相对于父容器