/* ========================================
   Hero Banner 配色重设计 - iOS风格
   参考Apple官网的高级质感与科技感
   ======================================== */

/* === 主背景 - 深色渐变替代纯黑 === */
.hero {
  background: linear-gradient(180deg, #0a0a0f 0%, #12141c 40%, #0f1118 70%, #08090d 100%) !important;
}

/* === 光球效果 - 更柔和的iOS配色 === */
.hero-orb-1 {
  background: radial-gradient(circle, rgba(0,122,255,0.45) 0%, rgba(10,132,255,0.25) 40%, transparent 70%) !important;
  filter: blur(130px);
}

.hero-orb-2 {
  background: radial-gradient(circle, rgba(88,86,214,0.35) 0%, rgba(120,110,230,0.2) 40%, transparent 70%) !important;
  filter: blur(130px);
}

.hero-orb-3 {
  background: radial-gradient(circle, rgba(175,82,222,0.3) 0%, rgba(191,90,242,0.18) 40%, transparent 70%) !important;
  filter: blur(130px);
}

/* === 网格覆盖层 - iOS蓝色调 === */
.hero-grid-overlay {
  background-image:
    linear-gradient(90deg, rgba(0,122,255,0.09) 1px, transparent 1px),
    linear-gradient(0deg, rgba(0,122,255,0.09) 1px, transparent 1px) !important;
  opacity: 0.45;
}

/* === 对角线 - 细腻的蓝紫色 === */
.hero-lines {
  background-image: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 100px,
    rgba(0,122,255,0.04) 100px,
    rgba(0,122,255,0.04) 102px
  ) !important;
}

/* === 脉冲线 - 增强光效 === */
.hero-pulse-lines {
  background:
    linear-gradient(90deg, transparent 0%, rgba(0,122,255,0.25) 50%, transparent 100%) !important;
  opacity: 0.4;
}

/* === 底部分隔线 === */
.hero::after {
  background: linear-gradient(90deg, transparent, rgba(0,122,255,0.4) 30%, rgba(175,82,222,0.3) 70%, transparent) !important;
  height: 2px;
  box-shadow: 0 0 20px rgba(0,122,255,0.3);
}

/* === 光束 - 垂直扫描光 === */
.hero-beam {
  background: linear-gradient(180deg, transparent 0%, rgba(0,122,255,0.7) 50%, transparent 100%) !important;
  width: 3px;
  opacity: 0.5;
  box-shadow: 0 0 15px rgba(0,122,255,0.6);
}

/* === 扩展光圈 - iOS质感 === */
.ring {
  border: 2px solid rgba(0,122,255,0.35) !important;
  box-shadow: 0 0 30px rgba(0,122,255,0.2), inset 0 0 20px rgba(0,122,255,0.1);
}

/* === 三角形装饰 - 多彩渐变 === */
.triangle-1 {
  border-color: transparent transparent rgba(0,122,255,0.45) transparent !important;
  filter: drop-shadow(0 0 10px rgba(0,122,255,0.4));
}

.triangle-2 {
  border-color: transparent transparent transparent rgba(88,86,214,0.4) !important;
  filter: drop-shadow(0 0 10px rgba(88,86,214,0.3));
}

.triangle-3 {
  border-color: rgba(175,82,222,0.4) transparent transparent transparent !important;
  filter: drop-shadow(0 0 10px rgba(175,82,222,0.3));
}

/* === 六边形网格 - 精致蓝色 === */
.hero-hexagons {
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='52' viewBox='0 0 60 52' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 0l15 8.66v17.32L30 34.64 15 26V8.66L30 0z' fill='none' stroke='rgba(0,122,255,0.12)' stroke-width='1'/%3E%3C/svg%3E") !important;
  opacity: 0.35;
}

/* === 粒子 - 明亮的蓝白色 === */
.hero-particles span {
  background: rgba(100,200,255,0.7) !important;
  box-shadow: 0 0 15px rgba(0,122,255,0.9), 0 0 25px rgba(0,122,255,0.5) !important;
}

/* === 代码流 - iOS蓝 === */
.hero-code-stream {
  color: rgba(0,122,255,0.35) !important;
}

/* === 扫描线 - 增强发光 === */
.hero-scanline {
  background: linear-gradient(90deg, transparent, rgba(100,200,255,0.9), transparent) !important;
  box-shadow: 0 0 30px rgba(0,122,255,0.7), 0 0 50px rgba(0,122,255,0.4) !important;
  height: 3px;
}

/* === 电路节点 - 明亮核心 === */
.node-core {
  background: rgba(100,200,255,0.9) !important;
  box-shadow: 0 0 25px rgba(0,122,255,1), 0 0 40px rgba(0,122,255,0.6) !important;
}

.node-ring {
  border: 2px solid rgba(0,122,255,0.5) !important;
}

/* === 光晕层 - 柔和多彩 === */
.glow-1 {
  background: radial-gradient(circle, rgba(0,122,255,0.65), rgba(0,122,255,0.3) 50%, transparent) !important;
}

.glow-2 {
  background: radial-gradient(circle, rgba(88,86,214,0.55), rgba(88,86,214,0.25) 50%, transparent) !important;
}

.glow-3 {
  background: radial-gradient(circle, rgba(175,82,222,0.45), rgba(175,82,222,0.2) 50%, transparent) !important;
}

/* === 矩形边框 - 多彩描边 === */
.rect {
  border: 1.5px solid rgba(0,122,255,0.35) !important;
  box-shadow: 0 0 20px rgba(0,122,255,0.15), inset 0 0 10px rgba(0,122,255,0.05);
}

.rect-3 {
  border-color: rgba(88,86,214,0.35) !important;
  box-shadow: 0 0 20px rgba(88,86,214,0.15), inset 0 0 10px rgba(88,86,214,0.05);
}

.rect-4 {
  border-color: rgba(175,82,222,0.35) !important;
  box-shadow: 0 0 20px rgba(175,82,222,0.15), inset 0 0 10px rgba(175,82,222,0.05);
}

/* === 菱形 - 发光边框 === */
.diamond {
  border: 2px solid rgba(0,122,255,0.45) !important;
  box-shadow: 0 0 20px rgba(0,122,255,0.2), inset 0 0 10px rgba(0,122,255,0.1);
}

.diamond-2 {
  border-color: rgba(88,86,214,0.45) !important;
  box-shadow: 0 0 20px rgba(88,86,214,0.2), inset 0 0 10px rgba(88,86,214,0.1);
}

.diamond-3 {
  border-color: rgba(175,82,222,0.45) !important;
  box-shadow: 0 0 20px rgba(175,82,222,0.2), inset 0 0 10px rgba(175,82,222,0.1);
}

/* === 光迹 - 明亮扫光 === */
.trail-dot {
  background: linear-gradient(90deg, transparent, rgba(100,200,255,0.9), transparent) !important;
  box-shadow: 0 0 15px rgba(0,122,255,0.9), 0 0 30px rgba(0,122,255,0.5) !important;
}

/* === 数字雨 - 蓝色矩阵 === */
.hero-digital-rain {
  color: rgba(0,122,255,0.45) !important;
}

/* === 全息网格 - 立体感增强 === */
.holo-grid {
  background-image:
    linear-gradient(0deg, rgba(0,122,255,0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,122,255,0.12) 1px, transparent 1px) !important;
}

.holo-scan {
  background: linear-gradient(180deg, transparent, rgba(0,122,255,0.4), transparent) !important;
}

/* === 能量脉冲 - 明亮光点 === */
.pulse {
  background: rgba(100,200,255,0.9) !important;
  box-shadow: 0 0 25px rgba(0,122,255,1), 0 0 40px rgba(0,122,255,0.6) !important;
}

/* === 光栅效果 - 细腻纹理 === */
.hero-raster {
  background-image: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0,122,255,0.025) 2px,
    rgba(0,122,255,0.025) 4px
  ) !important;
}

/* === 发光点阵 - 璀璨星点 === */
.glow-dot {
  background: rgba(100,200,255,0.9) !important;
  box-shadow:
    0 0 25px rgba(0,122,255,1),
    0 0 45px rgba(0,122,255,0.7),
    0 0 60px rgba(0,122,255,0.4) !important;
}

/* === 光晕球体 - 柔和渐变 === */
.sphere-1 {
  background: radial-gradient(circle, rgba(0,122,255,0.65), rgba(0,122,255,0.35) 50%, rgba(0,122,255,0) 70%) !important;
}

.sphere-2 {
  background: radial-gradient(circle, rgba(88,86,214,0.55), rgba(88,86,214,0.3) 50%, rgba(88,86,214,0) 70%) !important;
}

.sphere-3 {
  background: radial-gradient(circle, rgba(175,82,222,0.45), rgba(175,82,222,0.25) 50%, rgba(175,82,222,0) 70%) !important;
}

/* === 景深层 - 立体空间感 === */
.layer-1 {
  background: radial-gradient(ellipse at center, rgba(0,122,255,0.06), transparent 60%) !important;
}

.layer-2 {
  background: radial-gradient(ellipse at center, rgba(88,86,214,0.06), transparent 60%) !important;
}

.layer-3 {
  background: radial-gradient(ellipse at center, rgba(175,82,222,0.06), transparent 60%) !important;
}

/* === 光束扫描 - iOS质感扫光 === */
.light-sweep-beam {
  background: linear-gradient(90deg,
    transparent,
    rgba(255,255,255,0.04),
    rgba(0,122,255,0.1),
    rgba(255,255,255,0.04),
    transparent
  ) !important;
}

/* === 玻璃碎片 - 增强透明质感 === */
.glass-shard {
  background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.03)) !important;
  backdrop-filter: blur(12px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.15) !important;
  box-shadow:
    0 4px 20px rgba(0,0,0,0.15),
    0 0 30px rgba(0,122,255,0.1),
    inset 0 1px 0 rgba(255,255,255,0.2) !important;
}

/* === 柔光 - 温柔光晕 === */
.light-1 {
  background: radial-gradient(circle, rgba(0,122,255,0.85), rgba(0,122,255,0.4) 50%, transparent 70%) !important;
}

.light-2 {
  background: radial-gradient(circle, rgba(88,86,214,0.75), rgba(88,86,214,0.35) 50%, transparent 70%) !important;
}

.light-3 {
  background: radial-gradient(circle, rgba(175,82,222,0.65), rgba(175,82,222,0.3) 50%, transparent 70%) !important;
}

.light-4 {
  background: radial-gradient(circle, rgba(100,200,255,0.55), rgba(100,200,255,0.25) 50%, transparent 70%) !important;
}

/* === 渐变网格 - 流动色彩 === */
.blob-1 {
  background: linear-gradient(135deg, rgba(0,122,255,0.65), rgba(88,86,214,0.45)) !important;
}

.blob-2 {
  background: linear-gradient(225deg, rgba(88,86,214,0.55), rgba(175,82,222,0.35)) !important;
}

.blob-3 {
  background: linear-gradient(315deg, rgba(175,82,222,0.45), rgba(0,122,255,0.35)) !important;
}

.blob-4 {
  background: linear-gradient(45deg, rgba(0,122,255,0.35), rgba(88,86,214,0.25)) !important;
}

/* === 光影粒子 - 璀璨光点 === */
.light-particle {
  background: rgba(255,255,255,0.9) !important;
  box-shadow:
    0 0 12px rgba(255,255,255,0.9),
    0 0 25px rgba(0,122,255,0.7),
    0 0 40px rgba(0,122,255,0.4) !important;
}

/* === 反光效果 - 镜面光泽 === */
.reflection {
  background: linear-gradient(135deg, rgba(255,255,255,0.25), rgba(0,122,255,0.08), transparent) !important;
  filter: blur(35px);
}

/* === 玻璃卡片（如果有）- Apple毛玻璃效果 === */
.hero-glass-cards .glass-card {
  background: linear-gradient(135deg, rgba(255,255,255,0.12), rgba(255,255,255,0.06)) !important;
  backdrop-filter: blur(24px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(200%) !important;
  border: 1px solid rgba(255,255,255,0.2) !important;
  box-shadow:
    0 8px 32px rgba(0,0,0,0.12),
    0 0 40px rgba(0,122,255,0.15),
    inset 0 1px 0 rgba(255,255,255,0.25) !important;
}

/* === 连接线动画 - 增强可见度 === */
.connection-line {
  stroke: rgba(0,122,255,0.5) !important;
}

.circuit-path {
  stroke: rgba(0,122,255,0.4) !important;
}

.circuit-path-2 {
  stroke: rgba(88,86,214,0.4) !important;
}

.circuit-path-3 {
  stroke: rgba(175,82,222,0.4) !important;
}

.connection-dot {
  fill: rgba(100,200,255,0.9) !important;
}

.circuit-node {
  fill: rgba(100,200,255,0.8) !important;
}

/* === 能量波 === */
.energy-wave {
  border: 2px solid rgba(0,122,255,0.5) !important;
  box-shadow: 0 0 20px rgba(0,122,255,0.3), inset 0 0 15px rgba(0,122,255,0.1);
}

/* === 星星效果 - 增强闪烁 === */
.star {
  background: #ffffff !important;
  box-shadow:
    0 0 6px rgba(255,255,255,1),
    0 0 12px rgba(0,122,255,0.6) !important;
}

/* === 点状覆盖 - 细腻纹理 === */
.hero-dots-overlay {
  background-image: radial-gradient(circle, rgba(255,255,255,0.05) 1px, transparent 1px) !important;
  opacity: 0.65;
}

/* === 移动端优化 === */
@media (max-width: 768px) {
  .hero {
    background: linear-gradient(180deg, #08090d 0%, #0f1118 50%, #08090d 100%) !important;
  }

  .hero-bg {
    filter: brightness(1.08) contrast(1.12) !important;
  }

  .hero-orb-1 {
    filter: blur(110px);
  }

  .hero-orb-2 {
    filter: blur(110px);
  }

  .hero-orb-3 {
    filter: blur(110px);
  }
}