/* 
  * 主题色变量 
  * Theme Color Variables
*/
:root {
  /* 主题核心颜色 - 保持用户要求的 #09a2e7 */
  /* Theme Core Color - Keep user requested #09a2e7 */
  --primary-color: #09a2e7;
  --primary-light: #e6f6fd;
  --secondary-color: #f39800;
  --text-dark: #1d1d1f; /* 采用类似苹果的深色文字 / Apple-like dark text */
  --text-light: #86868b; /* 采用类似苹果的浅色文字 / Apple-like light text */
  --bg-white: #ffffff;
  --white: #ffffff;
  --bg-soft: #f5f5f7;
  --transition-smooth: all 0.6s cubic-bezier(0.16, 1, 0.3, 1); /* 更平滑的曲线 / Smoother curve */
}

/* 
  * 全局样式重置 
  * Global Style Reset
*/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'SF Pro Display', 'PingFang SC', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
  -webkit-font-smoothing: antialiased; /* 文字抗锯齿 / Text antialiasing */
}

body {
  background-color: var(--bg-white);
  overflow-x: hidden;
  line-height: 1.5;
  color: var(--text-dark);
}

a {
  text-decoration: none;
  color: inherit;
  transition: var(--transition-smooth);
}

ul {
  list-style: none;
}

/* 
  * 导航栏样式 
  * Navigation Bar Styles
*/
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 20px 8%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 1000;
  transition: var(--transition-smooth);
}

.header.scrolled {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  padding: 15px 8%;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.03);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.logo {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-dark);
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Logo 图片样式开始 / Logo Image Styles Start */
.logo-img {
  height: 32px; /* 设置高度 / Set height */
  width: auto; /* 宽度自适应 / Auto width */
  border-radius: 6px; /* 圆角 / Border radius */
  object-fit: contain; /* 包含模式 / Contain fit */
}
/* Logo 图片样式结束 / Logo Image Styles End */

/* 移动端菜单按钮初始隐藏开始 / Mobile Menu Button Initial Hidden Start */
.mobile-menu-btn {
  display: none; /* 默认隐藏 / Hidden by default */
}
/* 移动端菜单按钮初始隐藏结束 / Mobile Menu Button Initial Hidden End */

.header.scrolled .logo {
  color: var(--primary-color);
}

.nav-links {
  display: flex;
  gap: 40px;
}

.nav-links li a {
  font-size: 15px;
  font-weight: 500;
  color: var(--text-dark);
  opacity: 0.8;
  transition: var(--transition-smooth);
}

.nav-links li a:hover {
  color: var(--primary-color);
  opacity: 1;
}

.nav-links li a::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--primary-color);
  transition: var(--transition-smooth);
}

.nav-links li a:hover::after {
  width: 100%;
}

.nav-cta .btn {
  padding: 10px 24px;
  font-size: 14px;
  background: var(--primary-color);
  color: var(--white);
  border-radius: 20px;
}

/* 
  * 首屏 Hero 区域 (左右分栏布局)
  * Hero Section Styles (Split Layout)
*/
.hero {
  height: 100vh;
  display: flex;
  align-items: center;
  padding: 0 8%;
  background: radial-gradient(circle at 70% 30%, #e6f6fd 0%, #ffffff 50%);
  position: relative;
  overflow: hidden;
}

/* 装饰背景圆 */
.hero-bg-shapes {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.shape {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.4;
  animation: float-shape 20s infinite alternate;
}

.shape-1 {
  width: 400px;
  height: 400px;
  background: var(--primary-color);
  top: -100px;
  right: -100px;
}

.shape-2 {
  width: 300px;
  height: 300px;
  background: var(--secondary-color);
  bottom: 10% ;
  left: 10% ;
  animation-delay: -5s;
}

@keyframes float-shape {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(50px, 30px) scale(1.1); }
}

/* 首屏内容容器 / Hero Content Container */
.hero-container {
  display: grid; /* 网格布局 / Grid layout */
  grid-template-columns: 1fr 1.5fr; /* 增加视觉区域比例 / Increased visual area ratio */
  align-items: center; /* 垂直居中 / Vertical center */
  gap: 80px; /* 增加间距 / Increased gap */
  width: 100%; /* 宽度 / Width */
  position: relative; /* 相对定位 / Relative positioning */
  z-index: 1; /* 层级 / Z-index */
}
/* 首屏内容容器结束 / Hero Content Container End */

.hero-text h1 {
  font-size: 64px;
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 24px;
  color: var(--text-dark);
  opacity: 0;
  transform: translateY(40px);
  animation: slideUp 1s cubic-bezier(0.16, 1, 0.3, 1) forwards 0.2s;
}

.hero-text h1 span {
  color: var(--primary-color);
}

.hero-text p {
  font-size: 20px;
  color: var(--text-light);
  margin-bottom: 40px;
  max-width: 500px;
  opacity: 0;
  transform: translateY(40px);
  animation: slideUp 1s cubic-bezier(0.16, 1, 0.3, 1) forwards 0.4s;
}

/* 首屏按钮容器样式开始 / Hero Buttons Container Styles Start */
.hero-btns {
  display: flex; /* 弹性布局 / Flex layout */
  gap: 20px; /* 按钮间距 / Gap between buttons */
  flex-wrap: wrap; /* 允许换行以适配移动端 / Allow wrapping for mobile compatibility */
  opacity: 0; /* 初始透明度 / Initial opacity */
  transform: translateY(40px); /* 初始位移 / Initial displacement */
  animation: slideUp 1s cubic-bezier(0.16, 1, 0.3, 1) forwards 0.6s; /* 动画效果 / Animation effect */
}
/* 首屏按钮容器样式结束 / Hero Buttons Container Styles End */

/* 
  * 首屏视觉区域 (Glass UI Stack 风格)
  * Hero Visual (Glass UI Stack Style)
*/
.hero-visual {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 1000px; /* 增加 3D 视距 / Add 3D perspective */
  opacity: 0;
  transform: translateX(60px);
  animation: slideInRight 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards 0.5s;
}

/* 主屏幕展示容器开始 / Main Screen Visual Container Start */
.main-screen {
  position: relative; /* 相对定位 / Relative positioning */
  width: 100%; /* 宽度占满父容器 / Width 100% of container */
  aspect-ratio: 16/9; /* 优化纵横比 / Optimized aspect ratio */
  background: rgba(255, 255, 255, 0.4); /* 背景 / Background */
  backdrop-filter: blur(20px); /* 模糊 / Blur */
  -webkit-backdrop-filter: blur(20px); /* Safari 模糊 / Safari blur */
  border-radius: 28px; /* 增加圆角 / Increased border radius */
  border: 1px solid rgba(255, 255, 255, 0.5); /* 边框 / Border */
  box-shadow: 0 50px 120px rgba(0, 0, 0, 0.1); /* 增加阴影深度 / Increased shadow depth */
  overflow: hidden; /* 溢出隐藏 / Overflow hidden */
  transform: rotateY(-8deg) rotateX(4deg); /* 减小倾斜角度以显示更多内容 / Reduced tilt angle */
  transition: var(--transition-smooth); /* 过渡效果 / Transition effect */
}
/* 主屏幕展示容器结束 / Main Screen Visual Container End */

/* 轮播容器 */
.carousel-inner {
  position: relative;
  width: 100%;
  height: 100%;
}

.carousel-item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1s ease-in-out;
  display: flex;
  align-items: center;
  justify-content: center;
}

.carousel-item.active {
  opacity: 1;
  z-index: 1;
}

.carousel-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 轮播指示点 */
.carousel-dots {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 10;
}

/* 轮播指示点样式开始 / Carousel Dots Styles Start */
.dot {
  width: 10px; /* 稍微增加宽度 / Slightly increased width */
  height: 10px; /* 稍微增加高度 / Slightly increased height */
  border-radius: 50%; /* 圆形 / Circular */
  background: rgba(0, 0, 0, 0.15); /* 使用深色半透明背景，在浅色图上更清晰 / Darker semi-transparent background for better visibility on light images */
  cursor: pointer; /* 鼠标指针 / Pointer cursor */
  transition: var(--transition-smooth); /* 平滑过渡 / Smooth transition */
  border: 1px solid rgba(255, 255, 255, 0.3); /* 添加细微边框增强对比 / Subtle border for contrast */
}

.dot.active {
  background: var(--primary-color); /* 激活状态使用品牌主色 / Use primary color for active state */
  width: 28px; /* 增加激活状态的宽度 / Increased active width */
  border-radius: 5px; /* 激活状态圆角 / Active state border radius */
  box-shadow: 0 2px 10px rgba(9, 162, 231, 0.3); /* 添加发光效果 / Add glow effect */
  border-color: transparent; /* 激活状态隐藏边框 / Hide border in active state */
}
/* 轮播指示点样式结束 / Carousel Dots Styles End */

/* 主屏幕悬浮效果开始 / Main Screen Hover Effect Start */
.main-screen:hover {
  transform: rotateY(0) rotateX(0) scale(1.05); /* 增加悬浮放大倍数 / Increased hover scale */
  box-shadow: 0 60px 150px rgba(0, 0, 0, 0.15); /* 增强悬浮阴影 / Enhanced hover shadow */
}
/* 主屏幕悬浮效果结束 / Main Screen Hover Effect End */

/* 玻璃态装饰组件 */
.glass-widget {
  position: absolute;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border-radius: 16px;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.05);
  z-index: 2;
  transition: var(--transition-smooth);
}

.glass-widget:hover {
  transform: translateY(-10px) scale(1.05);
  background: rgba(255, 255, 255, 0.9);
}

/* 销售趋势组件 */
.widget-sales {
  top: -5%;
  left: -5%;
  width: 180px;
  animation: float-widget 5s ease-in-out infinite;
}

/* 系统状态组件 */
.widget-status {
  bottom: 10%;
  right: -5%;
  width: 200px;
  animation: float-widget 6s ease-in-out infinite -2s;
}

/* 实时监控组件 */
.widget-monitor {
  top: 40%;
  left: -15%;
  width: 140px;
  animation: float-widget 7s ease-in-out infinite -4s;
}

/* 漂浮动画修正：确保节点保持居中偏移 / Floating Animation Fix: Ensure nodes keep centering transform */
@keyframes float-widget {
  /* 初始状态：保持居中对齐 / Start: keep centered */
  0%, 100% { transform: translate(-50%, -50%) translateY(0) rotate(0); }
  /* 漂浮状态：在居中基础上偏移 / Floating: offset from center */
  50% { transform: translate(-50%, -50%) translateY(-15px) rotate(2deg); }
}

.widget-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  margin-bottom: 10px;
}

.widget-label {
  font-size: 12px;
  color: var(--text-light);
  margin-bottom: 4px;
}

.widget-value {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-dark);
}

/* 渐变装饰球 (增强背景) */
.visual-glow {
  position: absolute;
  width: 150%;
  height: 150%;
  background: radial-gradient(circle, rgba(9, 162, 231, 0.1) 0%, transparent 70%);
  z-index: -1;
  pointer-events: none;
}

@keyframes slideUp {
  to { opacity: 1; transform: translateY(0); }
}

@keyframes slideInRight {
  to { opacity: 1; transform: translateX(0); }
}

/* 
  * 通用 Section 样式 
*/
.section {
  padding: 140px 8%;
}

.section-title {
  text-align: center;
  margin-bottom: 80px;
}

.section-title h2 {
  font-size: 42px;
  font-weight: 700;
  margin-bottom: 16px;
  color: var(--text-dark);
}

.section-title p {
  color: var(--text-light);
  font-size: 18px;
}

/* 
  * 场景方案 (大卡片布局)
*/
.solutions {
  background: var(--bg-soft);
}

.solution-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}

.solution-card {
  background: var(--bg-white);
  padding: 0;
  border-radius: 32px;
  overflow: hidden;
  transition: var(--transition-smooth);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
  display: flex;
  flex-direction: column;
}

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

.solution-img-wrapper {
  width: 100%;
  height: 240px;
  overflow: hidden;
}

.solution-img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: var(--transition-smooth);
}

.solution-card:hover .solution-img-wrapper img {
  transform: scale(1.1);
}

.solution-info {
  padding: 35px;
}

.solution-icon {
  width: 60px;
  height: 60px;
  background: var(--primary-light);
  color: var(--primary-color);
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin-bottom: 24px;
}

.solution-info h3 {
  font-size: 24px;
  margin-bottom: 12px;
  color: var(--text-dark);
}

.solution-info p {
  color: var(--text-light);
  font-size: 16px;
  line-height: 1.6;
}

/* 
  * 关于我们 (深度重构 - Premium 风格)
*/
.about-premium {
  position: relative;
  overflow: hidden;
  padding: 140px 8%;
  background: #fff;
}

.about-bg-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 260px;
  font-weight: 900;
  color: rgba(9, 162, 231, 0.03);
  z-index: 0;
  pointer-events: none;
  letter-spacing: 40px;
  /* 优化重绘范围 / Optimize repaint area */
  contain: paint;
}

.about-container {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 100px;
  align-items: center;
  position: relative;
  z-index: 1;
}

/* 视觉区域：多层堆叠 */
.about-visual {
  position: relative;
}

/* 视觉区域：科技感抽象图形开始 / About Visual Section Styles Start */
.tech-visual-canvas {
  /* 相对定位 / Relative positioning */
  position: relative;
  /* 宽度占满 / Full width */
  width: 100%;
  /* 保持正方形比例 / Maintain square ratio */
  aspect-ratio: 1/1;
  /* 弹性布局 / Flex layout */
  display: flex;
  /* 垂直居中 / Vertical centering */
  align-items: center;
  /* 水平居中 / Horizontal centering */
  justify-content: center;
  /* GPU 加速 / GPU Acceleration */
  transform: translateZ(0);
  will-change: transform;
}

/* 背景光晕装饰开始 / Background Glow Styles Start */
.visual-glow {
  /* 绝对定位 / Absolute positioning */
  position: absolute;
  /* 居中定位 / Center positioning */
  top: 50%;
  /* 居中定位 / Center positioning */
  left: 50%;
  /* 居中偏移 / Center transform */
  transform: translate(-50%, -50%);
  /* 宽度 120% / Width 120% */
  width: 120%;
  /* 高度 120% / Height 120% */
  height: 120%;
  /* 背景渐变 / Background gradient */
  background: radial-gradient(circle at center, rgba(9, 162, 231, 0.08) 0%, transparent 70%);
  /* 模糊效果 / Blur effect */
  filter: blur(40px);
  /* 缩放动画 / Scaling animation */
  animation: glow-pulse 8s ease-in-out infinite alternate;
  /* 层级 / Z-index */
  z-index: 0;
  /* 性能优化 / Performance optimization */
  will-change: transform, opacity;
  pointer-events: none;
}

@keyframes glow-pulse {
  /* 初始状态：保持居中对齐并缩小 / Start: keep centered and scale down */
  from { transform: translate(-50%, -50%) scale(0.8); opacity: 0.5; }
  /* 结束状态：保持居中对齐并放大 / End: keep centered and scale up */
  to { transform: translate(-50%, -50%) scale(1.1); opacity: 1; }
}
/* 背景光晕装饰结束 / Background Glow Styles End */

/* 轨道装饰样式开始 / Orbit Path Styles Start */
.visual-orbit {
  /* 绝对定位 / Absolute positioning */
  position: absolute;
  /* 居中定位 / Center positioning */
  top: 50%;
  /* 居中定位 / Center positioning */
  left: 50%;
  /* 居中偏移 / Center transform */
  transform: translate(-50%, -50%);
  /* 圆形 / Circle */
  border-radius: 50%;
  /* 虚线边框 / Dashed border */
  border: 1px dashed rgba(9, 162, 231, 0.1);
  /* 层级 / Z-index */
  z-index: 1;
}

.orbit-1 {
  /* 轨道 1 大小 / Orbit 1 size */
  width: 75%;
  /* 轨道 1 大小 / Orbit 1 size */
  height: 75%;
}

.orbit-2 {
  /* 轨道 2 大小 / Orbit 2 size */
  width: 50%;
  /* 轨道 2 大小 / Orbit 2 size */
  height: 50%;
}

.orbit-3 {
  /* 轨道 3 大小 / Orbit 3 size */
  width: 25%;
  /* 轨道 3 大小 / Orbit 3 size */
  height: 25%;
  /* 轨道 3 边框样式 / Orbit 3 border style */
  border-style: solid;
  /* 轨道 3 透明度 / Orbit 3 opacity */
  opacity: 0.05;
}
/* 轨道装饰样式结束 / Orbit Path Styles End */

.visual-circle {
  /* 绝对定位 / Absolute positioning */
  position: absolute;
  /* 居中定位 / Center positioning */
  top: 50%;
  /* 居中定位 / Center positioning */
  left: 50%;
  /* 居中偏移 / Center transform */
  transform: translate(-50%, -50%);
  /* 虚线边框 / Dashed border */
  border: 1px dashed var(--primary-color);
  /* 圆形 / Circle */
  border-radius: 50%;
  /* 透明度 / Opacity */
  opacity: 0.2;
  /* 旋转动画 / Rotation animation */
  animation: rotate-circle 20s linear infinite;
  /* 性能优化 / Performance optimization */
  will-change: transform;
  pointer-events: none;
}

.circle-1 {
  /* 宽度 100% / Width 100% */
  width: 100%;
  /* 高度 100% / Height 100% */
  height: 100%;
}

.circle-2 {
  /* 宽度 80% / Width 80% */
  width: 80%;
  /* 高度 80% / Height 80% */
  height: 80%;
  /* 反向旋转 / Reverse rotation */
  animation-direction: reverse;
  /* 动画时长 / Animation duration */
  animation-duration: 15s;
}

.circle-3 {
  /* 宽度 60% / Width 60% */
  width: 60%;
  /* 高度 60% / Height 60% */
  height: 60%;
  /* 实线 / Solid line */
  border-style: solid;
  /* 透明度 / Opacity */
  opacity: 0.1;
}

.visual-core {
  /* 绝对定位 / Absolute positioning */
  position: absolute;
  /* 居中定位 / Center positioning */
  top: 50%;
  /* 居中定位 / Center positioning */
  left: 50%;
  /* 居中偏移 / Center transform */
  transform: translate(-50%, -50%);
  /* 宽度 / Width */
  width: 120px;
  /* 高度 / Height */
  height: 120px;
  /* 背景色 / Background color */
  background: var(--primary-color);
  /* 圆角 / Border radius */
  border-radius: 30px;
  /* 弹性布局 / Flex layout */
  display: flex;
  /* 垂直居中 / Vertical centering */
  align-items: center;
  /* 水平居中 / Horizontal centering */
  justify-content: center;
  /* 文字颜色 / Text color */
  color: #fff;
  /* 图标大小 / Icon size */
  font-size: 48px;
  /* 阴影 / Box shadow */
  box-shadow: 0 20px 40px rgba(9, 162, 231, 0.3);
  /* 层级 / Z-index */
  z-index: 2;
  /* 漂浮动画 / Floating animation */
  animation: float-widget 4s ease-in-out infinite;
  /* GPU 加速 / GPU Acceleration */
  will-change: transform;
  backface-visibility: hidden;
}

/* 核心组件装饰背景开始 / Core Component Decorative Background Styles Start */
.visual-core::before {
  /* 必须属性 / Mandatory property */
  content: '';
  /* 绝对定位 / Absolute positioning */
  position: absolute;
  /* 铺满并向外扩展 / Fill and expand outward */
  inset: -20px;
  /* 背景颜色 / Background color */
  background: rgba(9, 162, 231, 0.1);
  /* 圆角 / Border radius */
  border-radius: 40px;
  /* 模糊背景 / Backdrop blur */
  backdrop-filter: blur(5px);
  /* 层级置后 / Z-index behind core */
  z-index: -1;
}
/* 核心组件装饰背景结束 / Core Component Decorative Background Styles End */

/* 核心组件脉冲效果开始 / Core Component Pulse Styles Start */
.visual-core::after {
  /* 必须属性 / Mandatory property */
  content: '';
  /* 绝对定位 / Absolute positioning */
  position: absolute;
  /* 铺满 / Fill */
  inset: -10px;
  /* 边框 / Border */
  border: 2px solid var(--primary-color);
  /* 圆角 / Border radius */
  border-radius: 35px;
  /* 透明度 / Opacity */
  opacity: 0;
  /* 动画 / Animation */
  animation: core-pulse 2s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
}

@keyframes core-pulse {
  /* 起始状态 / Start state */
  0% { transform: scale(0.95); opacity: 0.5; }
  /* 结束状态 / End state */
  100% { transform: scale(1.3); opacity: 0; }
}
/* 核心组件脉冲效果结束 / Core Component Pulse Styles End */

.tech-node {
  /* 绝对定位 / Absolute positioning */
  position: absolute;
  /* 半透明背景 / Semi-transparent background */
  background: rgba(255, 255, 255, 0.9);
  /* 模糊背景 / Backdrop blur */
  backdrop-filter: blur(10px);
  /* 内边距 / Padding */
  padding: 10px 18px;
  /* 圆角 / Border radius */
  border-radius: 12px;
  /* 弹性布局 / Flex layout */
  display: flex;
  /* 垂直居中 / Vertical centering */
  align-items: center;
  /* 间距 / Gap */
  gap: 8px;
  /* 阴影 / Box shadow */
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
  /* 边框 / Border */
  border: 1px solid rgba(255, 255, 255, 0.5);
  /* 层级 / Z-index */
  z-index: 3;
  /* 过渡效果 / Transition effect */
  transition: var(--transition-smooth);
  /* 居中偏移 / Center transform */
  transform: translate(-50%, -50%);
  /* 性能优化 / Performance optimization */
  will-change: transform;
  backface-visibility: hidden;
}

.tech-node:hover {
  /* 悬浮效果：增加缩放并改变背景色 / Hover: scale up and change bg */
  transform: translate(-50%, -50%) scale(1.1);
  /* 悬浮阴影 / Hover shadow */
  box-shadow: 0 15px 35px rgba(9, 162, 231, 0.15);
  /* 背景颜色改变 / Background color change */
  background: var(--white);
  /* 边框高亮 / Border highlight */
  border-color: var(--primary-color);
}

.tech-node i {
  /* 图标颜色 / Icon color */
  color: var(--primary-color);
  /* 图标大小 / Icon size */
  font-size: 18px;
}

.tech-node span {
  /* 文字大小 / Text size */
  font-size: 13px;
  /* 文字粗细 / Font weight */
  font-weight: 600;
  /* 文字颜色 / Text color */
  color: var(--text-dark);
  /* 禁止换行 / No wrap */
  white-space: nowrap;
}

.node-1 { 
  /* 0度位置（上正中） / 0 degree position (Top center) */
  top: 12.5%; 
  /* 0度位置 / 0 degree position */
  left: 50%; 
  /* 漂浮动画 / Floating animation */
  animation: float-widget 5s ease-in-out infinite; 
}

.node-2 { 
  /* 45度位置 / 45 degree position */
  top: 23.5%; 
  /* 45度位置 / 45 degree position */
  left: 76.5%; 
  /* 漂浮动画 / Floating animation */
  animation: float-widget 6s ease-in-out infinite -1s; 
}

.node-3 { 
  /* 90度位置（右侧） / 90 degree position (Right) */
  top: 50%; 
  /* 90度位置 / 90 degree position */
  left: 87.5%; 
  /* 漂浮动画 / Floating animation */
  animation: float-widget 7s ease-in-out infinite -2s; 
}

.node-4 { 
  /* 135度位置 / 135 degree position */
  top: 76.5%; 
  /* 135度位置 / 135 degree position */
  left: 76.5%; 
  /* 漂浮动画 / Floating animation */
  animation: float-widget 5.5s ease-in-out infinite -3s; 
}

.node-5 { 
  /* 180度位置（下正中） / 180 degree position (Bottom center) */
  top: 87.5%; 
  /* 180度位置 / 180 degree position */
  left: 50%; 
  /* 漂浮动画 / Floating animation */
  animation: float-widget 6.5s ease-in-out infinite -4s; 
}

.node-6 { 
  /* 225度位置 / 225 degree position */
  top: 76.5%; 
  /* 225度位置 / 225 degree position */
  left: 23.5%; 
  /* 漂浮动画 / Floating animation */
  animation: float-widget 7.5s ease-in-out infinite -5s; 
}

.node-7 { 
  /* 270度位置（左侧） / 270 degree position (Left) */
  top: 50%; 
  /* 270度位置 / 270 degree position */
  left: 12.5%; 
  /* 漂浮动画 / Floating animation */
  animation: float-widget 5.8s ease-in-out infinite -6s; 
}

.node-8 { 
  /* 315度位置 / 315 degree position */
  top: 23.5%; 
  /* 315度位置 / 315 degree position */
  left: 23.5%; 
  /* 漂浮动画 / Floating animation */
  animation: float-widget 6.8s ease-in-out infinite -7s; 
}

/* 内部小节点样式开始 / Inner Small Nodes Styles Start */
.tech-node-s {
  /* 绝对定位 / Absolute positioning */
  position: absolute;
  /* 宽度 / Width */
  width: 36px;
  /* 高度 / Height */
  height: 36px;
  /* 背景色 / Background color */
  background: rgba(255, 255, 255, 0.8);
  /* 模糊效果 / Backdrop blur */
  backdrop-filter: blur(10px);
  /* 圆形 / Circle */
  border-radius: 50%;
  /* 弹性布局 / Flex layout */
  display: flex;
  /* 居中 / Center */
  align-items: center;
  /* 居中 / Center */
  justify-content: center;
  /* 图标颜色 / Icon color */
  color: var(--primary-color);
  /* 阴影 / Box shadow */
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  /* 边框 / Border */
  border: 1px solid rgba(255, 255, 255, 0.5);
  /* 层级 / Z-index */
  z-index: 4;
  /* 过渡效果 / Transition effect */
  transition: var(--transition-smooth);
  /* 居中偏移 / Center transform */
  transform: translate(-50%, -50%);
  /* 性能优化 / Performance optimization */
  will-change: transform;
  backface-visibility: hidden;
}

.tech-node-s:hover {
  /* 悬浮效果 / Hover effect */
  transform: translate(-50%, -50%) scale(1.2);
  /* 悬浮背景 / Hover background */
  background: var(--primary-color);
  /* 悬浮文字颜色 / Hover text color */
  color: #fff;
}

.node-9 { 
  /* 45度位置 / 45 degree position */
  top: 32.3%; 
  /* 45度位置 / 45 degree position */
  left: 67.7%; 
  /* 漂浮动画 / Floating animation */
  animation: float-widget 4.5s ease-in-out infinite; 
}

.node-10 { 
  /* 135度位置 / 135 degree position */
  top: 67.7%; 
  /* 135度位置 / 135 degree position */
  left: 67.7%; 
  /* 漂浮动画 / Floating animation */
  animation: float-widget 5.5s ease-in-out infinite -1.5s; 
}

.node-11 { 
  /* 225度位置 / 225 degree position */
  top: 67.7%; 
  /* 225度位置 / 225 degree position */
  left: 32.3%; 
  /* 漂浮动画 / Floating animation */
  animation: float-widget 6.5s ease-in-out infinite -3s; 
}

.node-12 { 
  /* 315度位置 / 315 degree position */
  top: 32.3%; 
  /* 315度位置 / 315 degree position */
  left: 32.3%; 
  /* 漂浮动画 / Floating animation */
  animation: float-widget 7.5s ease-in-out infinite -4.5s; 
}
/* 内部小节点样式结束 / Inner Small Nodes Styles End */

@keyframes rotate-circle {
  /* 起始位置：保持居中对齐并从 0 度旋转 / Start: keep centered and rotate from 0deg */
  from { transform: translate(-50%, -50%) rotate(0deg); }
  /* 结束位置：保持居中对齐并旋转 360 度 / End: keep centered and rotate to 360deg */
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* 装饰粒子点样式开始 / Decorative Particles Styles Start */
.visual-dot {
  /* 绝对定位 / Absolute positioning */
  position: absolute;
  /* 宽度 / Width */
  width: 6px;
  /* 高度 / Height */
  height: 6px;
  /* 背景色 / Background color */
  background: var(--primary-color);
  /* 圆形 / Circle */
  border-radius: 50%;
  /* 透明度 / Opacity */
  opacity: 0.3;
  /* 动画 / Animation */
  animation: float-widget 4s ease-in-out infinite alternate;
}

.dot-1 { top: 20%; left: 20%; animation-delay: -1s; } /* 粒子 1 / Dot 1 */
.dot-2 { top: 70%; right: 20%; animation-delay: -2s; } /* 粒子 2 / Dot 2 */
.dot-3 { bottom: 30%; left: 10%; animation-delay: -3s; } /* 粒子 3 / Dot 3 */
.dot-4 { top: 40%; right: 10%; animation-delay: -4s; } /* 粒子 4 / Dot 4 */
/* 装饰粒子点样式结束 / Decorative Particles Styles End */
/* 视觉区域：科技感抽象图形结束 / About Visual Section Styles End */

/* 悬浮玻璃卡片 */
.floating-glass-card {
  position: absolute;
  bottom: 15%;
  left: -5%;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: 24px;
  border-radius: 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
  z-index: 3;
  animation: float-widget 6s ease-in-out infinite;
}

.glass-icon {
  width: 48px;
  height: 48px;
  background: var(--primary-color);
  color: #fff;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}

.glass-text span {
  display: block;
  font-weight: 700;
  color: var(--text-dark);
  font-size: 16px;
}

.glass-text p {
  font-size: 12px;
  color: var(--text-light);
  margin: 0;
}

/* 文字内容区 */
.about-title {
  font-size: 44px;
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 30px;
  color: var(--text-dark);
}

.about-desc {
  font-size: 18px;
  color: var(--text-light);
  line-height: 1.8;
  margin-bottom: 24px;
}

/* 玻璃态数字指标 */
.about-stats-glass {
  display: flex;
  gap: 20px;
  margin-top: 50px;
}

.stat-glass-item {
  flex: 1;
  background: var(--bg-soft);
  padding: 24px;
  border-radius: 24px;
  border: 1px solid transparent;
  transition: var(--transition-smooth);
}

.stat-glass-item:hover {
  background: #fff;
  border-color: var(--primary-light);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.03);
  transform: translateY(-5px);
}

.stat-number {
  display: block;
  font-size: 32px;
  font-weight: 800;
  color: var(--primary-color);
  margin-bottom: 4px;
}

.stat-label {
  font-size: 14px;
  color: var(--text-light);
  font-weight: 500;
}

/* 
  * 多媒体发布系统 (对标参考图风格)
*/
.system-showcase {
  background: #0a1122; /* 深色背景 / Dark tech background */
  padding: 120px 8%;
  color: #fff;
  position: relative;
  overflow: hidden;
}

.system-container {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 80px;
  align-items: center;
  max-width: 1400px;
  margin: 0 auto;
}

.pill-tag.dark {
  background: rgba(9, 162, 231, 0.15);
  color: var(--primary-color);
  border: 1px solid rgba(9, 162, 231, 0.3);
}

.system-title {
  font-size: 42px;
  font-weight: 800;
  line-height: 1.3;
  margin-bottom: 60px;
  color: #fff;
}

.feature-matrix {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}

.matrix-item {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.matrix-icon {
  width: 44px;
  height: 44px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: var(--primary-color);
  transition: var(--transition-smooth);
}

.matrix-item:hover .matrix-icon {
  background: var(--primary-color);
  color: #fff;
  transform: translateY(-5px);
}

.matrix-info h4 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 10px;
  color: #fff;
}

.matrix-info p {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.6;
}

/* 右侧视觉 Mockup */
.system-visual {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.mockup-container {
  position: relative;
  width: 100%;
  max-width: 600px;
  aspect-ratio: 16/10;
}

.mockup-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 110%;
  height: 110%;
  background: radial-gradient(circle, rgba(9, 162, 231, 0.2) 0%, transparent 70%);
  filter: blur(40px);
  z-index: -1;
}

.mockup-screen {
  position: relative; /* 相对定位 / Relative positioning */
  width: 100%;
  height: 100%;
  background: #151e33;
  border: 8px solid #1c2642;
  border-radius: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.5);
  overflow: hidden; /* 溢出隐藏 / Overflow hidden */
  transition: var(--transition-smooth);
}

.mockup-screen:hover {
  transform: translateY(-10px) rotateX(5deg);
  border-color: var(--primary-color);
}

/* 系统预览图片背景开始 / System Preview Image Background Start */
.system-preview-img {
  position: absolute; /* 绝对定位作为背景 / Absolute positioning as background */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 填充模式 / Cover fit */
  opacity: 0.3; /* 降低透明度以突出文字内容 / Lower opacity to highlight text */
  transition: var(--transition-smooth);
  z-index: 1; /* 背景层级 / Background z-index */
}

.mockup-screen:hover .system-preview-img {
  transform: scale(1.05); /* 悬浮时背景轻微放大 / Background slight scale on hover */
  opacity: 0.5; /* 悬浮时背景稍清晰 / Background slightly clearer on hover */
}
/* 系统预览图片背景结束 / System Preview Image Background End */

/* 叠加内容样式开始 / Overlay Content Styles Start */
.mockup-overlay {
  position: relative; /* 相对定位以置于背景图上方 / Relative positioning above background */
  z-index: 2; /* 内容层级 / Content z-index */
  text-align: center; /* 居中 / Center text */
  padding: 40px; /* 内边距 / Padding */
}

.editor-icon {
  font-size: 64px;
  color: var(--primary-color);
  margin-bottom: 24px;
  opacity: 0.9; /* 增强图标可见度 / Enhanced icon visibility */
}

.mockup-screen h3 {
  font-size: 24px; /* 增大字号 / Increased font size */
  font-weight: 700;
  margin-bottom: 12px;
  color: #fff;
  text-shadow: 0 2px 10px rgba(0,0,0,0.5); /* 添加阴影增强可读性 / Shadow for readability */
}

.mockup-screen p {
  font-size: 16px; /* 增大字号 / Increased font size */
  color: rgba(255, 255, 255, 0.8); /* 增强文字亮度 / Enhanced text brightness */
  text-shadow: 0 2px 5px rgba(0,0,0,0.5); /* 添加阴影增强可读性 / Shadow for readability */
}
/* 叠加内容样式结束 / Overlay Content Styles End */

/* 响应式调整 */
@media (max-width: 1024px) {
  .system-container {
    grid-template-columns: 1fr;
    gap: 60px;
    text-align: center;
  }
  
  .matrix-item {
    align-items: center;
  }
  
  .system-visual {
    order: -1;
  }
}

@media (max-width: 768px) {
  .feature-matrix {
    grid-template-columns: 1fr;
  }
  
  .system-title {
    font-size: 32px;
  }
}

/* 
  * 重点功能 
*/
.features-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
}

.feature-item {
  display: flex;
  gap: 24px;
  padding: 40px;
  background: var(--bg-soft);
  border-radius: 24px;
  transition: var(--transition-smooth);
}

.feature-item:hover {
  background: var(--bg-white);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.05);
}

.feature-item i {
  font-size: 32px;
  color: var(--primary-color);
}

.feature-item h4 {
  font-size: 22px;
  margin-bottom: 12px;
}

.feature-item p {
  color: var(--text-light);
  font-size: 16px;
}

/* 
  * 按钮样式 
*/
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 32px;
  border-radius: 14px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition-smooth);
  border: none;
}

.btn-primary {
  background: var(--primary-color);
  color: #fff;
}

.btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(9, 162, 231, 0.3);
}

.btn-outline {
  background: transparent;
  color: var(--text-dark);
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.btn-outline:hover {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.2);
}

/* 
  * 页脚 
*/
/* 
  * 按钮样式扩展 / Button Styles Extension 
*/
/* 按钮样式扩展开始 / Button Styles Extension Start */
.btn-white {
  background: #fff; /* 白色背景 / White background */
  color: var(--text-dark); /* 深色文字 / Dark text */
}

.btn-white:hover {
  background: rgba(255, 255, 255, 0.9); /* 悬浮背景 / Hover background */
  transform: translateY(-3px); /* 向上偏移 / Upward offset */
  box-shadow: 0 10px 20px rgba(255, 255, 255, 0.1); /* 悬浮阴影 / Hover shadow */
}
/* 按钮样式扩展结束 / Button Styles Extension End */

/* 
  * 页脚样式重构 
*/
/* 页脚整体布局开始 / Footer Layout Start */
.footer {
  background: var(--text-dark); /* 页脚背景色 / Footer background color */
  color: #fff; /* 页脚文字颜色 / Footer text color */
  padding: 30px 8% 15px; /* 极简页脚内边距 / Minimal footer padding */
  position: relative; /* 相对定位 / Relative positioning */
  overflow: hidden; /* 溢出隐藏 / Overflow hidden */
}

/* 装饰性光晕背景 / Decorative Glow Background */
.footer::before {
  content: ''; /* 伪元素内容 / Pseudo-element content */
  position: absolute; /* 绝对定位 / Absolute positioning */
  top: -150px; /* 顶部偏移 / Top offset */
  right: -100px; /* 右侧偏移 / Right offset */
  width: 300px; /* 减小宽度 / Reduced width */
  height: 300px; /* 减小高度 / Reduced height */
  background: radial-gradient(circle, rgba(9, 162, 231, 0.08) 0%, transparent 70%); /* 降低亮度 / Reduced brightness */
  pointer-events: none; /* 禁用鼠标事件 / Disable pointer events */
}
/* 页脚整体布局结束 / Footer Layout End */

/* 页脚行动导向区开始 / Footer CTA Section Start */
.footer-cta {
  display: flex; /* 弹性布局 / Flex layout */
  justify-content: space-between; /* 两端对齐 / Space between */
  align-items: center; /* 垂直居中 / Vertical center */
  padding-bottom: 15px; /* 极简底部内边距 / Minimal bottom padding */
  margin-bottom: 25px; /* 极简底部外边距 / Minimal bottom margin */
  border-bottom: 1px solid rgba(255, 255, 255, 0.08); /* 减淡边框 / Faded border */
}

.cta-content h2 {
  font-size: 20px; /* 极简标题字号 / Minimal title size */
  font-weight: 700; /* 标题粗细 / Title font weight */
  margin-bottom: 2px; /* 极简标题底部间距 / Minimal title bottom margin */
}

.cta-content p {
  color: rgba(255, 255, 255, 0.5); /* 降低亮度 / Reduced brightness */
  font-size: 14px; /* 极简描述文字字号 / Minimal description size */
}
/* 页脚行动导向区结束 / Footer CTA Section End */

/* 页脚网格内容开始 / Footer Grid Content Start */
.footer-grid {
  display: grid; /* 网格布局 / Grid layout */
  grid-template-columns: 2fr 1fr 1fr 1.2fr; /* 列宽分配 / Column width allocation */
  gap: 30px; /* 极简网格间距 / Minimal grid gap */
  margin-bottom: 25px; /* 极简底部外边距 / Minimal bottom margin */
}

.footer-logo {
  font-size: 22px; /* 极简 Logo 字号 / Minimal Logo size */
  font-weight: 800; /* Logo 粗细 / Logo font weight */
  color: #fff; /* Logo 颜色 / Logo color */
  margin-bottom: 12px; /* 极简 Logo 底部间距 / Minimal Logo bottom margin */
  display: block; /* 块级显示 / Block display */
}

.footer-info p {
  color: rgba(255, 255, 255, 0.4); /* 降低亮度 / Reduced brightness */
  font-size: 13px; /* 极简信息文字字号 / Minimal info text size */
  line-height: 1.4; /* 极简行高 / Minimal line height */
  margin-bottom: 15px; /* 极简底部外边距 / Minimal bottom margin */
}

.social-links {
  display: flex; /* 弹性布局 / Flex layout */
  gap: 10px; /* 极简社交链接间距 / Minimal social links gap */
}

.social-item {
  width: 28px; /* 极简宽度 / Minimal width */
  height: 28px; /* 极简高度 / Minimal height */
  border-radius: 50%; /* 圆形 / Circular */
  background: rgba(255, 255, 255, 0.05); /* 半透明背景 / Semi-transparent background */
  display: flex; /* 弹性布局 / Flex layout */
  align-items: center; /* 垂直居中 / Vertical center */
  justify-content: center; /* 水平居中 / Horizontal center */
  font-size: 13px; /* 极简图标大小 / Minimal icon size */
  color: rgba(255, 255, 255, 0.6); /* 降低亮度 / Reduced brightness */
  transition: var(--transition-smooth); /* 平滑过渡 / Smooth transition */
  cursor: pointer; /* 鼠标指针 / Pointer cursor */
}

.social-item:hover {
  background: var(--primary-color); /* 悬浮背景色 / Hover background color */
  color: #fff; /* 悬浮图标颜色 / Hover icon color */
  transform: translateY(-2px); /* 减小偏移 / Reduced offset */
}
/* 页脚网格内容结束 / Footer Grid Content End */

/* 页脚链接样式开始 / Footer Link Styles Start */
.footer-links h4 {
  font-size: 15px; /* 极简标题字号 / Minimal title size */
  font-weight: 600; /* 标题粗细 / Title font weight */
  margin-bottom: 12px; /* 极简标题底部间距 / Minimal title bottom margin */
  position: relative; /* 相对定位 / Relative positioning */
}

.footer-links h4::after {
  content: ''; /* 伪元素内容 / Pseudo-element content */
  position: absolute; /* 绝对定位 / Absolute positioning */
  bottom: -4px; /* 极简底部偏移 / Minimal bottom offset */
  left: 0; /* 左侧偏移 / Left offset */
  width: 15px; /* 极简宽度 / Minimal width */
  height: 2px; /* 高度 / Height */
  background: var(--primary-color); /* 背景色 / Background color */
}

.footer-links ul li {
  margin-bottom: 6px; /* 极简列表项间距 / Minimal list item margin */
}

.footer-links ul li a {
  color: rgba(255, 255, 255, 0.4); /* 降低亮度 / Reduced brightness */
  font-size: 13px; /* 极简链接字号 / Minimal link size */
  transition: var(--transition-smooth); /* 平滑过渡 / Smooth transition */
}

.footer-links ul li a:hover {
  color: var(--primary-color); /* 悬浮链接颜色 / Hover link color */
  padding-left: 3px; /* 减小悬浮内边距 / Reduced hover padding */
}

.contact-list li {
  display: flex; /* 弹性布局 / Flex layout */
  gap: 6px; /* 极简间距 / Minimal gap */
  color: rgba(255, 255, 255, 0.4); /* 降低亮度 / Reduced brightness */
  font-size: 13px; /* 极简文字字号 / Minimal text size */
  margin-bottom: 8px; /* 极简底部间距 / Minimal bottom margin */
}

.contact-list li i {
  color: var(--primary-color); /* 图标颜色 / Icon color */
  font-size: 13px; /* 极简图标大小 / Minimal icon size */
}
/* 页脚链接样式结束 / Footer Link Styles End */

/* 页脚底部版权开始 / Footer Bottom Section Start */
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.08); /* 减淡边框 / Faded border */
  padding-top: 15px; /* 极简顶部内边距 / Minimal top padding */
  display: flex; /* 弹性布局 / Flex layout */
  justify-content: center; /* 两端对齐 / Space between */
  align-items: center; /* 垂直居中 / Vertical center */
  color: rgba(255, 255, 255, 0.35); /* 降低亮度 / Reduced brightness */
  font-size: 12px; /* 极简文字字号 / Minimal text size */
}

.copyright-info {
  display: flex; /* 弹性布局 / Flex layout */
  gap: 12px; /* 极简间距 / Minimal gap */
}

.footer-legal {
  display: flex; /* 弹性布局 / Flex layout */
  gap: 12px; /* 极简间距 / Minimal gap */
}

.copyright-info a { /* 备案号链接基础样式 / ICP link base style */
  text-decoration: underline; /* 添加下划线 / Add underline */
  color: inherit; /* 继承父级颜色 / Inherit parent color */
}

.footer-legal a:hover,
.copyright-info a:hover { /* 底部链接与备案号悬浮效果 / Footer link and ICP link hover effect */
  color: #fff; /* 悬浮时变为白色 / Turns white on hover */
  text-decoration: underline; /* 悬浮时保持下划线 / Keep underline on hover */
}
/* 页脚底部版权结束 / Footer Bottom Section End */

/* 
  * 通用小标签 
*/
.pill-tag {
  display: inline-block;
  padding: 6px 16px;
  background: var(--primary-light);
  color: var(--primary-color);
  font-size: 13px;
  font-weight: 600;
  border-radius: 20px;
  margin-bottom: 16px;
  letter-spacing: 0.5px;
}

/* 
  * 供应链伙伴 (极简科技风格)
*/
.partners {
  background: #fff;
  padding-bottom: 120px;
}

.partner-grid {
  display: flex;
  justify-content: center;
  gap: 30px;
  margin-top: 60px;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

.partner-card {
  flex: 1;
  background: #fff;
  border-radius: 30px;
  padding: 30px 40px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.05);
  transition: var(--transition-smooth);
  max-width: 450px;
}

.partner-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
}

.card-label {
  font-size: 12px;
  color: var(--text-light);
  margin-bottom: 20px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.card-body {
  display: flex;
  align-items: center;
  gap: 24px;
}

.partner-logo {
  width: 70px;
  height: 70px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 20px;
  color: #fff;
}

.partner-logo.boe {
  background: #2359ff; /* 京东方蓝 / BOE Blue */
}

.partner-logo.hisense {
  background: #0099cc; /* 海信蓝 / Hisense Blue */
}

.partner-info h3 {
  font-size: 24px;
  margin-bottom: 4px;
  color: var(--text-dark);
}

.partner-info p {
  font-size: 14px;
  color: var(--text-light);
}

/* 
  * 显现动画 
*/
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: all 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

/* 
  * 响应式 
*/
@media (max-width: 1024px) {
  .hero-container { grid-template-columns: 1fr; text-align: center; }
  .hero-text p { margin: 0 auto 40px; }
  .hero-btns { justify-content: center; }
  .hero-visual { display: none; }
  .solution-grid { grid-template-columns: repeat(2, 1fr); }
  /* 页脚网格响应式适配开始 / Footer Grid Responsive Start */
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 20px; }
  /* 页脚网格响应式适配结束 / Footer Grid Responsive End */
}

@media (max-width: 768px) {
  /* 移动端导航栏样式开始 / Mobile Navigation Styles Start */
  .header {
    padding: 15px 5%; /* 减小导航栏内边距 / Reduced header padding */
  }

  .mobile-menu-btn {
    display: block; /* 显示菜单按钮 / Show menu button */
    font-size: 24px; /* 减小菜单按钮大小 / Reduced menu button size */
    color: var(--text-dark);
    cursor: pointer;
    z-index: 1001;
    transition: var(--transition-smooth);
  }

  .nav-links {
    position: fixed;
    top: 0;
    right: -100%; /* 默认隐藏在右侧 / Hidden on the right by default */
    width: 50%; /* 进一步减小宽度，使其更紧凑 / Further reduced width for compactness */
    height: 100vh;
    background: #fff;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 25px; /* 减小间距 / Reduced gap */
    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.05);
    transition: 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 1000;
    display: flex; /* 覆盖之前的 display: none / Override previous display: none */
  }

  .nav-links.active {
    right: 0; /* 展开菜单 / Expand menu */
  }

  .nav-links li a {
    font-size: 16px; /* 减小字号 / Reduced font size */
    font-weight: 600;
  }

  .nav-cta {
    display: none; /* 移动端隐藏右侧按钮 / Hide CTA on mobile */
  }

  .logo {
    font-size: 20px; /* 移动端减小 Logo 文字大小 / Reduced logo font size on mobile */
  }

  .logo-img {
    height: 28px; /* 移动端减小 Logo 高度 / Reduced logo height on mobile */
  }
  /* 移动端导航栏样式结束 / Mobile Navigation Styles End */

  .hero-text h1 { font-size: 44px; }
  
  /* 移动端首屏按钮布局优化开始 / Mobile Hero Buttons Layout Optimization Start */
  .hero-btns {
    flex-direction: column; /* 垂直排列 / Vertical stacking */
    gap: 15px; /* 减小间距 / Reduced gap */
    width: 100%; /* 占满宽度 / Full width */
    max-width: 320px; /* 限制最大宽度 / Limit max width */
    margin: 0 auto; /* 居中 / Center */
  }

  .hero-btns .btn {
    width: 100%; /* 按钮占满一行 / Buttons take full width */
    padding: 12px 24px; /* 减小内边距适配屏幕 / Reduced padding for mobile */
  }
  /* 移动端首屏按钮布局优化结束 / Mobile Hero Buttons Layout Optimization End */

  .section { padding: 40px 5%; } /* 进一步减小 Section 内边距 / Further reduced section padding */
  .about-container { grid-template-columns: 1fr; }
  
  /* 关于我们移动端性能与布局优化开始 / About Section Mobile Optimization Start */
  .about-premium {
    padding: 80px 5%;
  }

  .about-bg-text {
    font-size: 120px; /* 减小背景文字大小 / Reduced bg text size */
    letter-spacing: 10px;
    top: 30%;
  }

  .tech-visual-canvas {
    max-width: 350px; /* 限制视觉区域最大宽度 / Limit max width of visual area */
    margin: 0 auto 40px;
    transform: scale(0.9); /* 整体微调缩放 / Slight overall scale */
  }

  /* 移动端关闭昂贵的模糊效果以提升流畅度 / Disable expensive blur on mobile for smoothness */
  .visual-glow, 
  .tech-node, 
  .tech-node-s,
  .floating-glass-card {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .visual-glow {
    filter: blur(20px); /* 减小模糊半径 / Reduced blur radius */
    opacity: 0.3;
  }

  /* 移动端隐藏部分装饰节点以减轻渲染负担 / Hide some decorative nodes on mobile to reduce load */
  .tech-node-s,
  .visual-dot {
    display: none !important;
  }

  .about-title {
    font-size: 32px; /* 适配移动端标题大小 / Adjusted title size for mobile */
    text-align: center;
  }

  .about-desc {
    font-size: 16px;
    text-align: center;
  }

  .about-stats-glass {
    flex-direction: column; /* 统计数据垂直排列 / Stats vertical stacking */
    gap: 15px;
  }

  .stat-glass-item {
    padding: 20px;
    text-align: center;
  }
  /* 关于我们移动端性能与布局优化结束 / About Section Mobile Optimization End */
  .solution-grid { grid-template-columns: 1fr; }
  .features-container { grid-template-columns: 1fr; }

  /* 硬件伙伴响应式适配开始 / Partners Section Responsive Start */
  .partners {
    padding-bottom: 80px; /* 移动端减小底部间距 / Reduced bottom padding */
  }

  .partner-grid {
    flex-direction: column; /* 垂直排列 / Vertical stacking */
    align-items: center; /* 居中对齐 / Center alignment */
    gap: 20px; /* 减小间距 / Reduced gap */
    margin-top: 40px; /* 减小顶部间距 / Reduced top margin */
  }

  .partner-card {
    width: 100%; /* 占满宽度 / Full width */
    max-width: 100%; /* 取消最大宽度限制 / Remove max-width limit */
    padding: 24px; /* 减小内边距 / Reduced padding */
  }

  .partner-info h3 {
    font-size: 20px; /* 减小字号 / Reduced font size */
  }
  /* 硬件伙伴响应式适配结束 / Partners Section Responsive End */

  /* 页脚行动导向区响应式适配开始 / Footer CTA Responsive Start */
  .footer-cta { flex-direction: column; text-align: center; gap: 15px; padding-bottom: 20px; margin-bottom: 25px; }
  /* 页脚行动导向区响应式适配结束 / Footer CTA Responsive End */
  /* 页脚网格响应式适配开始 / Footer Grid Responsive Start */
  .footer-grid { grid-template-columns: 1fr; gap: 20px; margin-bottom: 25px; }
  /* 页脚网格响应式适配结束 / Footer Grid Responsive End */
  /* 页脚底部版权响应式适配开始 / Footer Bottom Responsive Start */
  .footer-bottom { flex-direction: column; gap: 10px; text-align: center; padding-top: 15px; }
  .copyright-info { flex-direction: column; gap: 5px; }
  /* 页脚底部版权响应式适配结束 / Footer Bottom Responsive End */
}