/* ================================================
   西安优势物联网科技 - 官网 V2 主样式表
   ================================================ */


/* === CSS Variables 设计变量 === */
:root {
  /* 品牌色彩体系 */
  --primary: #4385F5;        /* 科技蓝 */
  --secondary: #34A853;     /* 环保绿 */
  --accent: #FF6B03;        /* 活力橙 */
  --dark: #0A1628;          /* 深邃蓝黑 */
  --dark-2: #0F1E35;        /* 次深色 */
  --light: #F5F7FA;         /* 云白 */
  --light-2: #EEF1F6;       /* 浅灰白 */
  --text: #1A1A2E;          /* 墨黑 */
  --text-secondary: #6B7280;/* 灰文字 */
  --text-light: #94A3B8;    /* 浅灰 */

  /* 渐变色 */
  --gradient-primary: linear-gradient(135deg, #4385F5 0%, #34A853 100%);
  --gradient-accent: linear-gradient(135deg, #FF6B03 0%, #FF8C42 100%);
  --gradient-dark: linear-gradient(180deg, #0A1628 0%, #1A2B4A 100%);
  --gradient-hero: linear-gradient(135deg, #0A1628 0%, #0F1E35 40%, #1A2B4A 100%);

  /* 阴影 */
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.08);
  --shadow-md: 0 4px 20px rgba(0,0,0,0.12);
  --shadow-lg: 0 8px 40px rgba(0,0,0,0.16);
  --shadow-card: 0 20px 60px rgba(0,0,0,0.15);
  --shadow-glow-blue: 0 0 30px rgba(67,133,245,0.3);
  --shadow-glow-green: 0 0 30px rgba(52,168,83,0.3);
  --shadow-glow-orange: 0 0 30px rgba(255,107,3,0.3);

  /* 圆角 */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;

  /* 过渡 */
  --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast: 0.2s ease;
  --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);

  /* 间距 */
  --section-padding: clamp(80px, 10vw, 140px);
  --container-max: 1400px;
  --container-padding: clamp(20px, 4vw, 60px);
}

/* === 基础重置 === */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.8;
  color: var(--text);
  background: #fff;
  overflow-x: hidden;
}

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

img {
  max-width: 100%;
  height: auto;
  display: block;
}

ul, ol {
  list-style: none;
}

button {
  border: none;
  background: none;
  cursor: pointer;
  font-family: inherit;
}

/* === 通用容器 === */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

/* === 导航栏 === */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: rgba(10, 22, 40, 0.85);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  transition: var(--transition);
}

.header.scrolled {
  background: rgba(10, 22, 40, 0.95);
  box-shadow: 0 4px 30px rgba(0,0,0,0.3);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

.nav__logo {
  display: flex;
  align-items: center;
  gap: 12px;
}

.nav__logo img {
  height: 44px;
  width: auto;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.3));
}

.nav__logo-text {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.5px;
}

.nav__menu {
  display: flex;
  align-items: center;
  gap: 8px;
}

.nav__item {
  position: relative;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 500;
  color: rgba(255,255,255,0.8);
  border-radius: var(--radius-sm);
  transition: var(--transition);
}

.nav__item:hover {
  color: #fff;
  background: rgba(255,255,255,0.08);
}

.nav__item.active {
  color: var(--primary);
}

.nav__item.active::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 2px;
  background: var(--primary);
  border-radius: 2px;
}

@media (max-width: 1024px) {
  .nav__item.active::after {
    display: none;
  }
}

.nav__dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 200px;
  background: var(--dark);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-md);
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: var(--transition);
  box-shadow: var(--shadow-lg);
}

.nav__item:hover .nav__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav__dropdown-item {
  display: block;
  padding: 10px 16px;
  color: rgba(255,255,255,0.7);
  font-size: 14px;
  border-radius: var(--radius-sm);
  transition: var(--transition);
}

.nav__dropdown-item:hover {
  color: #fff;
  background: rgba(67,133,245,0.15);
}

.nav__cta {
  display: flex;
  align-items: center;
  gap: 12px;
}

.nav__phone {
  font-size: 14px;
  font-weight: 500;
  color: rgba(255,255,255,0.8);
}

/* 移动端菜单 */
.nav__mobile-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.nav__mobile-toggle span {
  display: block;
  width: 22px;
  height: 0;
  border-top: 2.5px solid #fff;
  border-radius: 2px;
  transition: var(--transition);
  background: transparent !important;
  background-color: transparent !important;
  -webkit-appearance: none;
  appearance: none;
}

.nav__mobile-toggle:hover,
.nav__mobile-toggle:focus {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.35);
}

@media (max-width: 1024px) {
  .nav__menu {
    position: fixed;
    top: 72px;
    left: 0;
    right: 0;
    background: var(--dark);
    flex-direction: column;
    padding: 20px;
    gap: 4px;
    transform: translateY(-100%);
    opacity: 0;
    visibility: hidden;
    transition: var(--transition);
    max-height: calc(100vh - 72px);
    overflow-y: auto;
  }

  .nav__menu.active {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
  }

  .nav__mobile-toggle {
    display: flex;
  }

  .nav__phone {
    display: none;
  }
  
  /* 移动端导航项样式 */
  .nav__item {
    width: 100%;
    padding: 12px 16px;
    position: relative;
  }

  .nav__item > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }

  /* 移动端二级菜单展开箭头 */
  .nav__item.has-dropdown > a::after {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: var(--transition);
    margin-left: 8px;
  }

  .nav__item.has-dropdown.expanded > a::after {
    transform: rotate(-135deg);
  }

  /* 移动端二级菜单样式 */
  .nav__dropdown {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    max-height: 0;
    overflow: hidden;
    padding: 0;
    transition: max-height 0.3s ease, padding 0.3s ease, margin 0.3s ease;
    background: rgba(255,255,255,0.04);
    border: none;
    border-radius: var(--radius-sm);
    margin-top: 0;
    box-shadow: none;
  }

  .nav__item.expanded .nav__dropdown {
    max-height: 500px;
    padding: 6px 0;
    margin-top: 8px;
  }

  .nav__dropdown-item {
    padding: 10px 20px;
    font-size: 13px;
  }

  /* 移动端禁用hover触发 */
  .nav__item:hover .nav__dropdown {
    max-height: 0;
    padding: 0;
    margin-top: 0;
  }

  .nav__item.expanded:hover .nav__dropdown {
    max-height: 500px;
    padding: 6px 0;
    margin-top: 8px;
  }
}

/* === 按钮 === */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 28px;
  font-size: 15px;
  font-weight: 600;
  border-radius: var(--radius-md);
  transition: var(--transition);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.btn--primary {
  background: var(--primary);
  color: #fff;
  box-shadow: 0 4px 15px rgba(67,133,245,0.4);
}

.btn--primary:hover {
  background: #5599FF;
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(67,133,245,0.5);
}

.btn--accent {
  background: var(--gradient-accent);
  color: #fff;
  box-shadow: 0 4px 15px rgba(255,107,3,0.4);
}

.btn--accent:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(255,107,3,0.5);
}

.btn--outline {
  background: transparent;
  color: #fff;
  border: 1.5px solid rgba(255,255,255,0.3);
}

.btn--outline:hover {
  border-color: #fff;
  background: rgba(255,255,255,0.08);
}

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

.btn--outline-dark:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.btn--lg {
  padding: 16px 36px;
  font-size: 16px;
}

.btn--sm {
  padding: 8px 18px;
  font-size: 13px;
}

/* === Hero 区域 === */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  background: var(--gradient-hero);
  overflow: hidden;
}

.hero__bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.hero__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero__particles {
  position: absolute;
  inset: 0;
  background-image: 
    radial-gradient(2px 2px at 20% 30%, rgba(67,133,245,0.4) 0%, transparent 100%),
    radial-gradient(2px 2px at 40% 70%, rgba(52,168,83,0.3) 0%, transparent 100%),
    radial-gradient(1px 1px at 60% 40%, rgba(255,255,255,0.3) 0%, transparent 100%),
    radial-gradient(2px 2px at 80% 20%, rgba(255,107,3,0.3) 0%, transparent 100%);
  background-size: 100% 100%;
  animation: particlesMove 20s linear infinite;
}

@keyframes particlesMove {
  0% { transform: translateY(0); }
  100% { transform: translateY(-50px); }
}

.hero__glow {
  position: absolute;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.15;
}

.hero__glow--blue {
  background: var(--primary);
  top: -100px;
  right: -100px;
  animation: glowPulse 8s ease-in-out infinite;
}

.hero__glow--green {
  background: var(--secondary);
  bottom: -150px;
  left: -100px;
  animation: glowPulse 10s ease-in-out infinite reverse;
}

.hero__glow--orange {
  background: var(--accent);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 400px;
  height: 400px;
  animation: glowPulse 6s ease-in-out infinite;
  animation-delay: 2s;
}

@keyframes glowPulse {
  0%, 100% { opacity: 0.1; transform: scale(1); }
  50% { opacity: 0.25; transform: scale(1.1); }
}

/* 图标悬浮脉冲发光 */
@keyframes iconHoverGlow {
  0% { box-shadow: 0 0 0 0 rgba(67,133,245,0.3); }
  50% { box-shadow: 0 0 20px 4px rgba(67,133,245,0.15); }
  100% { box-shadow: 0 0 0 0 rgba(67,133,245,0.3); }
}

.hero__content {
  position: relative;
  z-index: 10;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 120px var(--container-padding) 80px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

.hero__text {
  color: #fff;
}

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  background: rgba(67,133,245,0.15);
  border: 1px solid rgba(67,133,245,0.3);
  border-radius: 50px;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255,255,255,0.9);
  margin-bottom: 28px;
}

.hero__badge-dot {
  width: 6px;
  height: 6px;
  background: var(--primary);
  border-radius: 50%;
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.hero__title {
  font-size: clamp(42px, 5.5vw, 72px);
  font-weight: 900;
  line-height: 1.15;
  margin-bottom: 24px;
  letter-spacing: -1px;
}

.hero__title .highlight {
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero__subtitle {
  font-size: clamp(14px, 2vw, 18px);
  font-weight: 400;
  color: rgba(255,255,255,0.7);
  margin-bottom: 40px;
  line-height: 1.7;
  max-width: 520px;
}

.hero__cta {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

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

.hero__stat {
  text-align: center;
  padding: 32px 20px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(10px);
  transition: var(--transition);
}

.hero__stat:hover {
  background: rgba(255,255,255,0.08);
  transform: translateY(-4px);
  border-color: rgba(255,255,255,0.15);
}

.hero__stat-value {
  font-size: clamp(36px, 4vw, 56px);
  font-weight: 900;
  line-height: 1;
  margin-bottom: 8px;
}

.hero__stat--blue .hero__stat-value { color: var(--primary); }
.hero__stat--green .hero__stat-value { color: var(--secondary); }
.hero__stat--orange .hero__stat-value { color: var(--accent); }

.hero__stat-label {
  font-size: 13px;
  color: rgba(255,255,255,0.5);
  font-weight: 500;
}

.hero__stat-unit {
  font-size: 0.5em;
  margin-left: 2px;
}

.hero__scroll {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: rgba(255,255,255,0.4);
  font-size: 12px;
  animation: bounce 2s ease-in-out infinite;
}

@keyframes bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(8px); }
}

.hero__scroll-line {
  width: 1px;
  height: 40px;
  background: linear-gradient(to bottom, rgba(255,255,255,0.4), transparent);
}

@media (max-width: 900px) {
  .hero__content {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .hero__subtitle {
    margin-left: auto;
    margin-right: auto;
  }

  .hero__cta {
    justify-content: center;
  }

  .hero__stats {
    grid-template-columns: repeat(3, 1fr);
    max-width: 500px;
    margin: 0 auto;
  }
}

/* === Hero 右侧 SVG 动画 === */
.hero__visual {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.hero-svg {
  width: 100%;
  max-width: 560px;
  height: auto;
  overflow: visible;
}

/* 背景光晕呼吸 */
.svg-bg-glow {
  animation: svgGlowBreath 6s ease-in-out infinite;
}
@keyframes svgGlowBreath {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.05); }
}

/* ===== 建筑动画 ===== */
.building-group {
  animation: buildingFloat 8s ease-in-out infinite;
}
@keyframes buildingFloat {
  0%, 100% { transform: translate(180px, 200px) translateY(0); }
  50% { transform: translate(180px, 200px) translateY(-4px); }
}

/* AI核心脉冲 */
.ai-core-pulse {
  animation: corePulse 2s ease-in-out infinite;
}
@keyframes corePulse {
  0%, 100% { opacity: 1; r: 4; }
  50% { opacity: 0.5; r: 6; }
}

/* 窗户闪烁 - 错开时间 */
.window { transition: fill 0.5s ease, opacity 0.5s ease; }
.win-1 { animation: winBlink 4s ease-in-out infinite 0s; }
.win-3 { animation: winBlink 3.5s ease-in-out infinite 0.3s; }
.win-5 { animation: winBlink 5s ease-in-out infinite 0.7s; }
.win-7 { animation: winBlink 4.2s ease-in-out infinite 1.1s; }
.win-9 { animation: winBlink 3.8s ease-in-out infinite 0.5s; }
.win-11 { animation: winBlink 4.5s ease-in-out infinite 1.5s; }
.win-13 { animation: winBlink 3.2s ease-in-out infinite 0.2s; }
.win-15 { animation: winBlink 4.8s ease-in-out infinite 0.9s; }
.win-17 { animation: winBlink 3.6s ease-in-out infinite 1.3s; }
.win-19 { animation: winBlink 4.1s ease-in-out infinite 0.4s; }
.win-21 { animation: winBlink 3.9s ease-in-out infinite 1.7s; }
.win-23 { animation: winBlink 4.6s ease-in-out infinite 0.1s; }
.win-25 { animation: winBlink 3.3s ease-in-out infinite 1.0s; }
.win-27 { animation: winBlink 4.3s ease-in-out infinite 0.6s; }
.win-29 { animation: winBlink 3.7s ease-in-out infinite 1.4s; }
.win-31 { animation: winBlink 4.9s ease-in-out infinite 0.8s; }
.win-33 { animation: winBlink 3.4s ease-in-out infinite 1.2s; }
.win-35 { animation: winBlink 4.4s ease-in-out infinite 0.35s; }
.win-37 { animation: winBlink 3.1s ease-in-out infinite 1.6s; }
.win-39 { animation: winBlink 4.7s ease-in-out infinite 0.55s; }
.win-41 { animation: winBlink 3.5s ease-in-out infinite 1.05s; }
.win-43 { animation: winBlink 4.0s ease-in-out infinite 0.15s; }
.win-45 { animation: winBlink 3.8s ease-in-out infinite 1.25s; }
.win-47 { animation: winBlink 4.2s ease-in-out infinite 0.65s; }
.win-49 { animation: winBlink 3.3s ease-in-out infinite 1.45s; }
.win-51 { animation: winBlink 4.5s ease-in-out infinite 0.25s; }
.win-53 { animation: winBlink 3.6s ease-in-out infinite 1.15s; }
.win-55 { animation: winBlink 4.1s ease-in-out infinite 0.75s; }

@keyframes winBlink {
  0%, 40%, 100% { opacity: 1; }
  45%, 55% { opacity: 0.25; }
  50% { opacity: 0.5; }
}

/* ===== AI神经网络动画 ===== */
.neural-network {
  animation: nnFloat 7s ease-in-out infinite;
}
@keyframes nnFloat {
  0%, 100% { transform: translate(280px, 85px) translateY(0); }
  50% { transform: translate(280px, 85px) translateY(-6px); }
}

/* AI中心节点脉冲 */
.ai-center {
  animation: aiCenterPulse 3s ease-in-out infinite;
}
@keyframes aiCenterPulse {
  0%, 100% { r: 18; stroke-opacity: 1; }
  50% { r: 22; stroke-opacity: 0.6; }
}

/* 神经网络线条流动 */
.nn-line { animation: nnLineFlow 3s ease-in-out infinite; }
.l1, .l2 { animation-delay: 0s; }
.l3, .l4 { animation-delay: 0.5s; }
.l5, .l6 { animation-delay: 1s; }
.l7, .l8 { animation-delay: 1.5s; }
.l9, .l10 { animation-delay: 2s; }

@keyframes nnLineFlow {
  0%, 100% { opacity: 0.25; }
  50% { opacity: 0.65; }
}

/* 神经元节点呼吸 */
.neuron { animation: neuronBreathe 2.5s ease-in-out infinite; }
.n1 { animation-delay: 0s; }
.n2 { animation-delay: 0.4s; }
.n3 { animation-delay: 0.8s; }
.n4 { animation-delay: 1.2s; }
.n5 { animation-delay: 1.6s; }
.n6 { animation-delay: 2s; }

@keyframes neuronBreathe {
  0%, 100% { r: 8; opacity: 1; }
  50% { r: 10; opacity: 0.7; }
}

/* 神经网络脉冲粒子沿路径移动 */
.pulse-particle { opacity: 0; }
.p1 { animation: pulseMove1 3s linear infinite; }
.p2 { animation: pulseMove2 3.5s linear infinite 0.5s; }
.p3 { animation: pulseMove3 2.8s linear infinite 1s; }
.p4 { animation: pulseMove4 3.2s linear infinite 1.5s; }
.p5 { animation: pulseMove5 3s linear infinite 2s; }
.p6 { animation: pulseMove6 2.6s linear infinite 2.3s; }

@keyframes pulseMove1 {
  0% { cx: 0; cy: 0; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { cx: -70px; cy: -45px; opacity: 0; }
}
@keyframes pulseMove2 {
  0% { cx: 0; cy: 0; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { cx: 70px; cy: -45px; opacity: 0; }
}
@keyframes pulseMove3 {
  0% { cx: 0; cy: 0; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { cx: -90px; cy: 10px; opacity: 0; }
}
@keyframes pulseMove4 {
  0% { cx: 0; cy: 0; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { cx: 55px; cy: 50px; opacity: 0; }
}
@keyframes pulseMove5 {
  0% { cx: 0; cy: 0; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { cx: -55px; cy: 50px; opacity: 0; }
}
@keyframes pulseMove6 {
  0% { cx: 0; cy: 0; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { cx: 90px; cy: 10px; opacity: 0; }
}

/* ===== 传感器网络动画 ===== */
.sensor { animation: sensorPulse 2s ease-in-out infinite; }
.s1 { animation-delay: 0s; }
.s2 { animation-delay: 0.3s; }
.s3 { animation-delay: 0.6s; }
.s4 { animation-delay: 0.9s; }
.s5 { animation-delay: 0.15s; }
.s6 { animation-delay: 0.45s; }
.s7 { animation-delay: 0.75s; }
.s8 { animation-delay: 1.05s; }
.s9 { animation-delay: 0.2s; }
.s10{ animation-delay: 0.5s; }
.s11{ animation-delay: 0.8s; }
.s12{ animation-delay: 1.1s; }
.s13{ animation-delay: 0.25s; }
.s14{ animation-delay: 0.55s; }
.s15{ animation-delay: 0.85s; }
.s16{ animation-delay: 1.15s; }

@keyframes sensorPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.85); }
}

/* 传感器信号波纹扩散 */
.sensor-wave {
  animation: waveExpand 2.5s ease-out infinite;
  transform-origin: center;
}
.w1 { animation-delay: 0s; }
.w2 { animation-delay: 0.6s; }
.w3 { animation-delay: 1.2s; }
.w4 { animation-delay: 0.3s; }
.w5 { animation-delay: 0.9s; }
.w6 { animation-delay: 1.5s; }

@keyframes waveExpand {
  0% { r: 6; opacity: 0.8; stroke-width: 1.2; }
  100% { r: 22; opacity: 0; stroke-width: 0.3; }
}

/* ===== 数据流动画 ===== */
.data-path {
  stroke-dasharray: 80 40;
  animation: dataFlowDash 3s linear infinite;
}
.dp-left1 { animation-delay: 0s; animation-duration: 2.5s; }
.dp-left2 { animation-delay: 0.4s; animation-duration: 3s; }
.dp-left3 { animation-delay: 0.8s; animation-duration: 2.8s; }
.dp-left4 { animation-delay: 1.2s; animation-duration: 3.2s; }
.dp-right1{ animation-delay: 0.2s; animation-duration: 2.6s; }
.dp-right2{ animation-delay: 0.6s; animation-duration: 2.9s; }
.dp-right3{ animation-delay: 1.0s; animation-duration: 3.1s; }
.dp-right4{ animation-delay: 1.4s; animation-duration: 2.7s; }

@keyframes dataFlowDash {
  0% { stroke-dashoffset: 120; opacity: 0.2; }
  50% { opacity: 0.6; }
  100% { stroke-dashoffset: 0; opacity: 0.2; }
}

/* 上行数据线脉动 */
.uplink {
  stroke-dasharray: 8 12;
  animation: uplinkPulse 2s linear infinite;
}
.up1 { animation-delay: 0s; }
.up2 { animation-delay: 1s; }

@keyframes uplinkPulse {
  0% { stroke-dashoffset: 20; opacity: 0.3; }
  50% { opacity: 0.8; }
  100% { stroke-dashoffset: 0; opacity: 0.3; }
}

/* 数据粒子沿路径运动（使用 offset-path 近似） */
.data-dot { opacity: 0; }
.d1 { animation: dataDotLeft1 2.5s ease-in-out infinite; }
.d2 { animation: dataDotLeft2 3s ease-in-out infinite 0.5s; }
.d3 { animation: dataDotLeft3 2.8s ease-in-out infinite 1s; }
.d4 { animation: dataDotRight1 2.6s ease-in-out infinite 0.3s; }
.d5 { animation: dataDotRight2 3.2s ease-in-out infinite 0.8s; }
.d6 { animation: dataDotRight3 2.7s ease-in-out infinite 1.3s; }
.d7 { animation: dataDotLeft4 3.1s ease-in-out infinite 1.6s; }
.d8 { animation: dataDotRight4 2.9s ease-in-out infinite 1.9s; }

@keyframes dataDotLeft1 {
  0% { cx: 95px; cy: 280px; opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { cx: 175px; cy: 290px; opacity: 0; }
}
@keyframes dataDotLeft2 {
  0% { cx: 75px; cy: 330px; opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { cx: 175px; cy: 340px; opacity: 0; }
}
@keyframes dataDotLeft3 {
  0% { cx: 110px; cy: 380px; opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { cx: 175px; cy: 380px; opacity: 0; }
}
@keyframes dataDotLeft4 {
  0% { cx: 60px; cy: 400px; opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { cx: 175px; cy: 405px; opacity: 0; }
}
@keyframes dataDotRight1 {
  0% { cx: 465px; cy: 280px; opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { cx: 385px; cy: 290px; opacity: 0; }
}
@keyframes dataDotRight2 {
  0% { cx: 485px; cy: 330px; opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { cx: 385px; cy: 340px; opacity: 0; }
}
@keyframes dataDotRight3 {
  0% { cx: 450px; cy: 380px; opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { cx: 385px; cy: 380px; opacity: 0; }
}
@keyframes dataDotRight4 {
  0% { cx: 500px; cy: 400px; opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { cx: 385px; cy: 405px; opacity: 0; }
}

/* 上行到AI的粒子 */
.up-particle { opacity: 0; }
.u1 { animation: upParticle1 2.5s ease-in-out infinite; }
.u2 { animation: upParticle2 3s ease-in-out infinite 0.8s; }
.u3 { animation: upParticle3 2.8s ease-in-out infinite 1.6s; }

@keyframes upParticle1 {
  0% { cx: 260px; cy: 225px; opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { cx: 278px; cy: 105px; opacity: 0; }
}
@keyframes upParticle2 {
  0% { cx: 300px; cy: 225px; opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { cx: 282px; cy: 105px; opacity: 0; }
}
@keyframes upParticle3 {
  0% { cx: 280px; cy: 230px; opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { cx: 280px; cy: 105px; opacity: 0; }
}

/* ===== 能源系统动画 ===== */
.energy-source { animation: energySourceSpin 12s linear infinite; }
.es-solar { animation-direction: normal; }
.es-grid { animation-direction: reverse; }

@keyframes energySourceSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.sun-core { animation: sunCoreGlow 3s ease-in-out infinite; }
@keyframes sunCoreGlow {
  0%, 100% { opacity: 0.5; r: 6; }
  50% { opacity: 0.8; r: 7; }
}

.sun-rays { animation: sunRaysRotate 8s linear infinite; transform-origin: center; }
@keyframes sunRaysRotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.bolt-icon { animation: boltFlash 2s ease-in-out infinite; }
@keyframes boltFlash {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
  75% { opacity: 0.4; }
}

/* 能源路径流动 */
.energy-path {
  stroke-dasharray: 60 30;
  animation: energyPathFlow 2s linear infinite;
}
.ep-left { animation-delay: 0s; }
.ep-right { animation-delay: 1s; }

@keyframes energyPathFlow {
  0% { stroke-dashoffset: 90; }
  100% { stroke-dashoffset: 0; }
}

/* 能源粒子运动 */
.energy-particle { opacity: 0; }
.e1 { animation: energyLeft1 2.5s ease-in-out infinite; }
.e2 { animation: energyLeft2 3s ease-in-out infinite 0.5s; }
.e3 { animation: energyRight1 2.6s ease-in-out infinite 0.25s; }
.e4 { animation: energyRight2 3.2s ease-in-out infinite 0.75s; }
.e5 { animation: energyLeft3 2.8s ease-in-out infinite 1.25s; }
.e6 { animation: energyRight3 2.9s ease-in-out infinite 1.5s; }

@keyframes energyLeft1 {
  0% { cx: 68px; cy: 250px; opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { cx: 178px; cy: 295px; opacity: 0; }
}
@keyframes energyLeft2 {
  0% { cx: 68px; cy: 250px; opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { cx: 178px; cy: 295px; opacity: 0; }
}
@keyframes energyLeft3 {
  0% { cx: 68px; cy: 250px; opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { cx: 178px; cy: 295px; opacity: 0; }
}
@keyframes energyRight1 {
  0% { cx: 492px; cy: 250px; opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { cx: 382px; cy: 295px; opacity: 0; }
}
@keyframes energyRight2 {
  0% { cx: 492px; cy: 250px; opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { cx: 382px; cy: 295px; opacity: 0; }
}
@keyframes energyRight3 {
  0% { cx: 492px; cy: 250px; opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { cx: 382px; cy: 295px; opacity: 0; }
}

/* ===== 节能指示器动画 ===== */
.save-arc {
  animation: saveArcFill 4s ease-in-out infinite;
}
@keyframes saveArcFill {
  0% { stroke-dashoffset: 201; }
  50% { stroke-dashoffset: 60; } /* ~70% filled */
  100% { stroke-dashoffset: 201; }
}

.save-dot {
  animation: saveDotPulse 2s ease-in-out infinite;
}
@keyframes saveDotPulse {
  0%, 100% { opacity: 1; r: 3; }
  50% { opacity: 0.4; r: 5; }
}

.save-num {
  animation: saveNumCount 4s ease-in-out infinite;
}
@keyframes saveNumCount {
  0%, 30% { opacity: 0.5; }
  50%, 70% { opacity: 1; }
  100% { opacity: 0.5; }
}

/* ===== 智能决策指示器动画 ===== */
.decision-scan {
  animation: decisionScanRotate 4s linear infinite;
  transform-origin: center;
}
@keyframes decisionScanRotate {
  0% { transform: rotate(-90deg); }
  100% { transform: rotate(270deg); }
}

.dec-core { animation: decCorePulse 2s ease-in-out infinite; }
@keyframes decCorePulse {
  0%, 100% { r: 8; opacity: 1; }
  50% { r: 10; opacity: 0.6; }
}

.dec-arrow { animation: decArrowMove 2s ease-in-out infinite; }
@keyframes decArrowMove {
  0%, 100% { transform: translateY(0); opacity: 1; }
  50% { transform: translateY(2px); opacity: 0.5; }
}

/* ===== 环境浮动粒子 ===== */
.ambient { opacity: 0; }
.a1 { animation: ambientFloat1 8s ease-in-out infinite; }
.a2 { animation: ambientFloat2 9s ease-in-out infinite 1s; }
.a3 { animation: ambientFloat3 7s ease-in-out infinite 2s; }
.a4 { animation: ambientFloat4 10s ease-in-out infinite 0.5s; }
.a5 { animation: ambientFloat5 8.5s ease-in-out infinite 3s; }
.a6 { animation: ambientFloat6 9.5s ease-in-out infinite 1.5s; }
.a7 { animation: ambientFloat7 7.5s ease-in-out infinite 4s; }
.a8 { animation: ambientFloat8 8s ease-in-out infinite 2.5s; }

@keyframes ambientFloat1 {
  0% { cx: 50px; cy: 120px; opacity: 0; }
  20% { opacity: 0.6; }
  80% { opacity: 0.6; }
  100% { cx: 70px; cy: 90px; opacity: 0; }
}
@keyframes ambientFloat2 {
  0% { cx: 510px; cy: 140px; opacity: 0; }
  20% { opacity: 0.5; }
  80% { opacity: 0.5; }
  100% { cx: 485px; cy: 110px; opacity: 0; }
}
@keyframes ambientFloat3 {
  0% { cx: 130px; cy: 460px; opacity: 0; }
  20% { opacity: 0.5; }
  80% { opacity: 0.5; }
  100% { cx: 155px; cy: 430px; opacity: 0; }
}
@keyframes ambientFloat4 {
  0% { cx: 440px; cy: 60px; opacity: 0; }
  20% { opacity: 0.6; }
  80% { opacity: 0.6; }
  100% { cx: 420px; cy: 90px; opacity: 0; }
}
@keyframes ambientFloat5 {
  0% { cx: 30px; cy: 350px; opacity: 0; }
  20% { opacity: 0.4; }
  80% { opacity: 0.4; }
  100% { cx: 55px; cy: 320px; opacity: 0; }
}
@keyframes ambientFloat6 {
  0% { cx: 530px; cy: 320px; opacity: 0; }
  20% { opacity: 0.5; }
  80% { opacity: 0.5; }
  100% { cx: 505px; cy: 350px; opacity: 0; }
}
@keyframes ambientFloat7 {
  0% { cx: 250px; cy: 50px; opacity: 0; }
  20% { opacity: 0.4; }
  80% { opacity: 0.4; }
  100% { cx: 270px; cy: 80px; opacity: 0; }
}
@keyframes ambientFloat8 {
  0% { cx: 320px; cy: 465px; opacity: 0; }
  20% { opacity: 0.5; }
  80% { opacity: 0.5; }
  100% { cx: 340px; cy: 440px; opacity: 0; }
}

/* 响应式：小屏隐藏SVG或缩小 */
@media (max-width: 900px) {
  .hero__visual {
    display: none;
  }
}

@media (min-width: 901px) and (max-width: 1200px) {
  .hero-svg {
    max-width: 440px;
  }
}

/* 减少动效偏好支持 */
@media (prefers-reduced-motion: reduce) {
  .hero-svg *,
  .hero-svg *::before,
  .hero-svg *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* === 区块标题 === */
.section-header {
  text-align: center;
  margin-bottom: 60px;
}

.section-header--left {
  text-align: left;
}

.section__label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 16px;
}

.section__label::before,
.section__label::after {
  content: '';
  width: 20px;
  height: 1.5px;
  background: var(--primary);
  opacity: 0.5;
}

.section__title {
  font-size: clamp(24px, 4vw, 44px);
  font-weight: 800;
  color: var(--text);
  line-height: 1.25;
  margin-bottom: 20px;
  letter-spacing: -0.5px;
}

.section__title .highlight {
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.section__desc {
  font-size: clamp(15px, 1.5vw, 18px);
  color: var(--text-secondary);
  max-width: 780px;
  margin: 0 auto;
  line-height: 1.8;
}

.section-header--left .section__desc {
  margin: 0;
}

/* === 核心数据区 === */
.stats-section {
  background: var(--dark);
  padding: var(--section-padding) 0;
  position: relative;
  overflow: hidden;
}

.stats-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: 
    radial-gradient(ellipse at 20% 50%, rgba(67,133,245,0.08) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 50%, rgba(52,168,83,0.06) 0%, transparent 60%);
}

.stats-section__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  position: relative;
}

.stat-card {
  text-align: center;
  padding: 40px 24px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius-lg);
  transition: var(--transition);
  position: relative;
  overflow: hidden;
}

.stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  opacity: 0;
  transition: var(--transition);
}

.stat-card--blue::before { background: var(--primary); }
.stat-card--green::before { background: var(--secondary); }
.stat-card--orange::before { background: var(--accent); }
.stat-card--purple::before { background: #8B5CF6; }

.stat-card:hover {
  background: rgba(255,255,255,0.06);
  transform: translateY(-6px);
  border-color: rgba(255,255,255,0.12);
}

.stat-card:hover::before {
  opacity: 1;
}

.stat-card__icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 20px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}

.stat-card--blue .stat-card__icon { background: rgba(67,133,245,0.15); }
.stat-card--green .stat-card__icon { background: rgba(52,168,83,0.15); }
.stat-card--orange .stat-card__icon { background: rgba(255,107,3,0.15); }
.stat-card--purple .stat-card__icon { background: rgba(139,92,246,0.15); }

.stat-card__number {
  font-size: clamp(48px, 5vw, 64px);
  font-weight: 900;
  line-height: 1;
  margin-bottom: 8px;
  font-feature-settings: 'tnum';
  font-variant-numeric: tabular-nums;
}

.stat-card--blue .stat-card__number { color: var(--primary); }
.stat-card--green .stat-card__number { color: var(--secondary); }
.stat-card--orange .stat-card__number { color: var(--accent); }
.stat-card--purple .stat-card__number { color: #8B5CF6; }

.stat-card__unit {
  font-size: 20px;
  font-weight: 600;
  margin-left: 2px;
  color: var(--primary);
}

.stat-card__label {
  font-size: 15px;
  color: rgba(255,255,255,0.6);
  font-weight: 500;
}

.stat-card__sub {
  font-size: 13px;
  color: rgba(255,255,255,0.35);
  margin-top: 4px;
}

@media (max-width: 900px) {
  .stats-section__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .stats-section__grid {
    grid-template-columns: 1fr;
  }
  
  /* 移动端标题字号标准 */
  .page-hero__title {
    font-size: 26px;
  }

  .section__title {
    font-size: 22px;
    line-height: 1.3;
  }

  .solution-detail__title {
    font-size: 20px;
    line-height: 1.4;
  }

  .section__desc,
  .page-hero__desc {
    font-size: 14px;
  }
}

/* === 四大管家展示 === */
.butlers-section {
  padding: var(--section-padding) 0;
  background: var(--light);
}

.butlers-section__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.butler-card {
  background: #fff;
  border-radius: var(--radius-xl);
  padding: 40px 28px;
  text-align: center;
  position: relative;
  overflow: hidden;
  transition: var(--transition);
  border: 1px solid rgba(0,0,0,0.06);
}

.butler-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
}

.butler-card--energy::before { background: var(--primary); }
.butler-card--env::before { background: var(--secondary); }
.butler-card--safe::before { background: var(--accent); }
.butler-card--ops::before { background: #8B5CF6; }

.butler-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-card);
}

.butler-card__icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 24px;
  border-radius: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  transition: var(--transition);
}

.butler-card--energy .butler-card__icon { background: rgba(67,133,245,0.1); }
.butler-card--env .butler-card__icon { background: rgba(52,168,83,0.1); }
.butler-card--safe .butler-card__icon { background: rgba(255,107,3,0.1); }
.butler-card--ops .butler-card__icon { background: rgba(139,92,246,0.1); }

.butler-card:hover .butler-card__icon {
  transform: scale(1.1);
}

.butler-card__name {
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 12px;
}

.butler-card__features {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.8;
  margin-bottom: 20px;
}

.butler-card__value {
  display: inline-block;
  padding: 6px 16px;
  border-radius: 50px;
  font-size: 13px;
  font-weight: 600;
}

.butler-card--energy .butler-card__value { background: rgba(67,133,245,0.1); color: var(--primary); }
.butler-card--env .butler-card__value { background: rgba(52,168,83,0.1); color: var(--secondary); }
.butler-card--safe .butler-card__value { background: rgba(255,107,3,0.1); color: var(--accent); }
.butler-card--ops .butler-card__value { background: rgba(139,92,246,0.1); color: #8B5CF6; }

@media (max-width: 1024px) {
  .butlers-section__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .butlers-section__grid {
    grid-template-columns: 1fr;
  }
}

/* === 解决方案预览 === */
.solutions-section {
  padding: var(--section-padding) 0;
  background: #fff;
}

.solutions-section__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.solution-card {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  aspect-ratio: 3/4;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 32px;
  color: #fff;
  cursor: pointer;
  transition: var(--transition);
}

.solution-card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}

.solution-card--building {
  background: linear-gradient(135deg, #1A4F7A, #0D2B4A);
}
.solution-card--building::before {
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 300"><rect fill="rgba(67,133,245,0.1)" x="20" y="100" width="60" height="180" rx="4"/><rect fill="rgba(67,133,245,0.08)" x="100" y="60" width="80" height="220" rx="4"/><rect fill="rgba(67,133,245,0.12)" x="200" y="80" width="70" height="200" rx="4"/><rect fill="rgba(67,133,245,0.06)" x="290" y="120" width="90" height="160" rx="4"/></svg>') no-repeat bottom right;
  background-size: cover;
}

.solution-card--tunnel {
  background: linear-gradient(135deg, #0D3D2E, #061A12);
}
.solution-card--tunnel::before {
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 300"><ellipse fill="rgba(52,168,83,0.1)" cx="200" cy="150" rx="150" ry="100"/><rect fill="rgba(52,168,83,0.08)" x="50" y="150" width="300" height="130" rx="0"/><circle fill="rgba(52,168,83,0.15)" cx="200" cy="150" r="30"/></svg>') no-repeat bottom right;
  background-size: cover;
}

.solution-card--street {
  background: linear-gradient(135deg, #3D2000, #1A0C00);
}
.solution-card--street::before {
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 300"><rect fill="rgba(255,107,3,0.1)" x="150" y="20" width="8" height="260" rx="4"/><circle fill="rgba(255,107,3,0.2)" cx="154" cy="30" r="20"/><rect fill="rgba(255,107,3,0.05)" x="0" y="250" width="400" height="50"/></svg>') no-repeat bottom right;
  background-size: cover;
}

.solution-card--elec {
  background: linear-gradient(135deg, #2D1060, #150830);
}
.solution-card--elec::before {
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 300"><path fill="rgba(139,92,246,0.15)" d="M200 50 L230 130 L200 110 L170 130 Z"/><path fill="rgba(139,92,246,0.08)" d="M150 150 L190 180 L150 200 L170 180 Z M250 150 L270 180 L250 200 L230 180 Z"/></svg>') no-repeat bottom right;
  background-size: cover;
}

.solution-card__color-tag {
  position: absolute;
  top: 24px;
  left: 24px;
  z-index: 2;
  width: 4px;
  height: 40px;
  border-radius: 4px;
}

.solution-card--building .solution-card__color-tag { background: var(--primary); }
.solution-card--tunnel .solution-card__color-tag { background: var(--secondary); }
.solution-card--street .solution-card__color-tag { background: var(--accent); }
.solution-card--elec .solution-card__color-tag { background: #8B5CF6; }

.solution-card__content {
  position: relative;
  z-index: 2;
}

.solution-card__icon {
  font-size: 40px;
  margin-bottom: 16px;
}

.solution-card__icon .icon {
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), filter 0.4s ease;
  display: inline-block;
}

.solution-card:hover .solution-card__icon .icon {
  transform: scale(1.18);
  filter: drop-shadow(0 0 12px currentColor) drop-shadow(0 0 24px rgba(255,255,255,0.25));
}

.solution-card__name {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 8px;
}

.solution-card__sub {
  font-size: 13px;
  color: rgba(255,255,255,0.6);
  margin-bottom: 20px;
}

.solution-card__metrics {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.solution-card__metric {
  text-align: center;
}

.solution-card__metric-value {
  font-size: clamp(16px, 3.5vw, 28px);
  font-weight: 900;
  line-height: 1.1;
}

.solution-card__metric-label {
  font-size: clamp(9px, 2.2vw, 11px);
  color: rgba(255,255,255,0.5);
  margin-top: 4px;
}

.solution-card:hover {
  transform: translateY(-10px) scale(1.02);
  box-shadow: 0 20px 50px rgba(0,0,0,0.35), 0 8px 20px rgba(0,0,0,0.2);
}

.solution-card:hover::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-xl);
  border: 1.5px solid rgba(255,255,255,0.2);
  pointer-events: none;
}

@media (max-width: 1024px) {
  .solutions-section__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .solutions-section__grid {
    grid-template-columns: 1fr;
  }

  .solution-card {
    aspect-ratio: auto;
    min-height: auto;
    padding: 24px;
  }

  .solution-card__icon {
    font-size: 32px;
    margin-bottom: 12px;
  }

  .solution-card__name {
    font-size: 20px;
  }

  .solution-card__sub {
    font-size: 13px;
  }

  .solution-card__metrics {
    margin-top: 16px;
  }
}

/* === 标杆案例 === */
.cases-section {
  padding: var(--section-padding) 0;
  background: var(--light);
}

.cases-section__featured {
display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

/* 旗舰项目卡片横向布局 */
.case-card--featured {
  flex-direction: row;
}

.case-card__image--featured {
  width: 220px;
  flex-shrink: 0;
  height: auto;
  min-height: 240px;
}

/* 响应式：平板及以下改为纵向布局 */
@media (max-width: 900px) {
  .cases-section__featured {
    grid-template-columns: 1fr;
  }

  .case-card--featured {
    flex-direction: column;
  }

  .case-card__image--featured {
    width: 100%;
    height: 200px;
    min-height: auto;
  }
}

.case-card {
  background: #fff;
  border-radius: var(--radius-xl);
  overflow: hidden;
  transition: var(--transition);
  border: 1px solid rgba(0,0,0,0.06);
  display: flex;
  flex-direction: column;
}

.case-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-card);
}

.case-card__image {
  position: relative;
  overflow: hidden;
  background: var(--dark-2);
}

.case-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: var(--transition-slow);
}

.case-card:hover .case-card__image img {
  transform: scale(1.05);
}

.case-card__badge {
  position: absolute;
  top: 16px;
  left: 16px;
  padding: 4px 12px;
  border-radius: 50px;
  font-size: 12px;
  font-weight: 600;
  backdrop-filter: blur(10px);
}

.case-card__badge--blue {
  background: rgba(67,133,245,0.9);
  color: #fff;
}

.case-card__badge--green {
  background: rgba(52,168,83,0.9);
  color: #fff;
}

.case-card__badge--orange {
  background: rgba(255,107,3,0.9);
  color: #fff;
}

.case-card__body {
  padding: 28px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.case-card__title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
}

.case-card__location {
  font-size: 13px;
  color: var(--text-light);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.case-card__metrics {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.case-card__metric {
  display: flex;
  flex-direction: column;
}

.case-card__metric-value {
  font-size: 24px;
  font-weight: 800;
  line-height: 1;
}

.case-card__metric-value--blue { color: var(--primary); }
.case-card__metric-value--green { color: var(--secondary); }
.case-card__metric-value--orange { color: var(--accent); }

.case-card__metric-label {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 4px;
}

.case-card__desc {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.7;
  flex: 1;
}

.case-card__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 20px;
  font-size: 14px;
  font-weight: 600;
  color: var(--primary);
}

.case-card__link:hover {
  gap: 10px;
}

.cases-section__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

@media (max-width: 900px) {
  .cases-section__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .cases-section__grid {
    grid-template-columns: 1fr;
  }
}

/* === 产品/技术预览 === */
.products-tech-section {
  padding: var(--section-padding) 0;
  background: #fff;
}

.products-tech-section__layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

.products-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.product-item {
  padding: 24px;
  background: var(--light);
  border-radius: var(--radius-lg);
  transition: var(--transition);
  border: 1px solid transparent;
}

.product-item:hover {
  background: #fff;
  border-color: rgba(67,133,245,0.2);
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
}

.product-item__icon {
  font-size: 32px;
  margin-bottom: 12px;
}

.product-item__name {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}

.product-item__desc {
  font-size: 13px;
  color: var(--text-secondary);
}

.tech-highlight {
  background: var(--dark);
  border-radius: var(--radius-xl);
  padding: 48px;
  color: #fff;
}

.tech-highlight__badge {
  display: inline-block;
  padding: 4px 14px;
  background: rgba(67,133,245,0.2);
  border: 1px solid rgba(67,133,245,0.3);
  border-radius: 50px;
  font-size: 12px;
  font-weight: 600;
  color: var(--primary);
  margin-bottom: 20px;
}

.tech-highlight__title {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 16px;
}

.tech-term {
  position: relative;
  display: inline-flex;
  align-items: flex-start;
  cursor: help;
}

.tech-term::after {
  content: '';
  position: absolute;
  top: -8px;
  right: -10px;
  width: 16px;
  height: 16px;
  background-color: #99b5f6;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  content: '?';
}

.tech-term .tech-term__tooltip {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(30, 41, 59, 0.95);
  color: #fff;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.6;
  white-space: normal;
  width: max-content;
  max-width: 320px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s, visibility 0.25s;
  z-index: 100;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  pointer-events: none;
  font-weight: 400;
}

.tech-term .tech-term__tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: rgba(30, 41, 59, 0.95);
}

.tech-term:hover .tech-term__tooltip {
  opacity: 1;
  visibility: visible;
}

.tech-highlight__desc {
  font-size: 15px;
  color: rgba(255,255,255,0.6);
  line-height: 1.8;
  margin-bottom: 28px;
}

.tech-highlight__features {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 28px;
}

.tech-highlight__feature {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
}

.tech-highlight__feature-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.tech-highlight__feature-dot--blue { background: var(--primary); }
.tech-highlight__feature-dot--green { background: var(--secondary); }
.tech-highlight__feature-dot--orange { background: var(--accent); }

@media (max-width: 900px) {
  .products-tech-section__layout {
    grid-template-columns: 1fr;
  }
}

/* === CTA 横幅 === */
.cta-section {
  padding: var(--section-padding) 0;
  background: var(--gradient-primary);
  position: relative;
  overflow: hidden;
}

.cta-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle fill="rgba(255,255,255,0.03)" cx="50" cy="50" r="40"/></svg>');
  background-size: 200px;
}

.cta-section__inner {
  position: relative;
  text-align: center;
  color: #fff;
}

.cta-section__title {
  font-size: clamp(28px, 3.5vw, 48px);
  font-weight: 800;
  margin-bottom: 16px;
}

.cta-section__desc {
  font-size: clamp(15px, 1.5vw, 18px);
  color: rgba(255,255,255,0.8);
  margin-bottom: 36px;
  max-width: 780px;
  margin-left: auto;
  margin-right: auto;
}

.cta-section__btns {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

.btn--white {
  background: #fff;
  color: var(--primary);
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}

.btn--white:hover {
  background: rgba(255,255,255,0.9);
  transform: translateY(-2px);
}

.btn--white-outline {
  background: transparent;
  color: #fff;
  border: 1.5px solid rgba(255,255,255,0.4);
}

.btn--white-outline:hover {
  border-color: #fff;
  background: rgba(255,255,255,0.1);
}

/* === 页脚 === */
.footer {
  background: var(--dark);
  color: rgba(255,255,255,0.7);
  padding: 80px 0 0;
}

.footer__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 60px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.footer__brand {
  display: flex;
  flex-direction: column;
}

.footer__logo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.footer__logo img {
  height: 44px;
}

.footer__logo-text {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
}

.footer__desc {
  font-size: 14px;
  color: rgba(255,255,255,0.5);
  line-height: 1.8;
  margin-bottom: 24px;
  max-width: 300px;
}

.footer__qr {
  display: flex;
  align-items: center;
  gap: 12px;
}

.footer__qr-box {
  width: 80px;
  height: 80px;
  background: rgba(255,255,255,0.1);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: rgba(255,255,255,0.5);
}

.footer__qr-text {
  font-size: 13px;
}

.footer__qr-text strong {
  display: block;
  color: #fff;
  font-size: 14px;
}

.footer__col-title {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 20px;
}

.footer__links {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer__link {
  font-size: 14px;
  color: rgba(255,255,255,0.5);
  transition: var(--transition);
}

.footer__link:hover {
  color: #fff;
  padding-left: 4px;
}

.footer__contact-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: rgba(255,255,255,0.5);
  margin-bottom: 14px;
}

.footer__contact-icon {
  font-size: 16px;
  margin-top: -3px;
}

.footer__bottom {
  padding: 24px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: rgba(255,255,255,0.35);
}

.footer__bottom-links {
  display: flex;
  gap: 20px;
}

.footer__bottom-link {
  color: rgba(255,255,255,0.35);
  font-size: 13px;
}

.footer__bottom-link:hover {
  color: rgba(255,255,255,0.7);
}

@media (max-width: 900px) {
  .footer__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .footer__grid {
    grid-template-columns: 1fr;
  }

  .footer__bottom {
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }
}

/* === 页面通用区块 === */
.page-hero {
  background: var(--gradient-hero);
  padding: 160px 0 80px;
  text-align: center;
  color: #fff;
  position: relative;
  overflow: hidden;
}

.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: 
    radial-gradient(ellipse at 30% 50%, rgba(67,133,245,0.1) 0%, transparent 60%),
    radial-gradient(ellipse at 70% 50%, rgba(52,168,83,0.07) 0%, transparent 60%);
}

.page-hero__content {
  position: relative;
  z-index: 1;
}

.page-hero__title {
  font-size: clamp(36px, 4.5vw, 60px);
  font-weight: 900;
  margin-bottom: 16px;
  letter-spacing: -0.5px;
}

.page-hero__desc {
  font-size: clamp(16px, 1.5vw, 20px);
  color: rgba(255,255,255,0.7);
  max-width: 680px;
  margin: 0 auto;
}

.page-hero__breadcrumb {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 14px;
  color: rgba(255,255,255,0.5);
  margin-bottom: 24px;
}

.page-hero__breadcrumb a:hover {
  color: rgba(255,255,255,0.8);
}

.breadcrumb-sep {
  opacity: 0.3;
}

/* === 内容区块 === */
.content-section {
  padding: var(--section-padding) 0;
}

.content-section--dark {
  background: var(--dark);
  color: #fff;
}

.content-section--light {
  background: var(--light);
}

.content-section--gradient {
  background: linear-gradient(135deg, rgba(67,133,245,0.04) 0%, rgba(52,168,83,0.04) 100%);
}

/* === 功能展示卡片 === */
.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.feature-card {
  padding: 36px 28px;
  background: #fff;
  border-radius: var(--radius-xl);
  border: 1px solid rgba(0,0,0,0.06);
  transition: var(--transition);
}

.content-section--dark .feature-card {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.08);
}

.feature-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.3), 0 0 30px rgba(67,133,245,0.08);
  border-color: rgba(67,133,245,0.25);
}

/* 深色主题下 feature-card 悬浮增强 */
.content-section--dark .feature-card:hover {
  background: rgba(255,255,255,0.065);
  border-color: rgba(67,133,245,0.3);
  box-shadow: 0 20px 40px rgba(0,0,0,0.4), 0 0 40px rgba(67,133,245,0.06), inset 0 1px 0 rgba(255,255,255,0.05);
}

/* 图标容器悬浮动画 */
.feature-card__icon {
  width: 60px;
  height: 60px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  margin-bottom: 20px;
  background: rgba(67,133,245,0.1);
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  position: relative;
  overflow: hidden;
}

.feature-card__icon::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120%;
  height: 120%;
  transform: translate(-50%, -50%) scale(0);
  border-radius: 50%;
  opacity: 0;
  transition: all 0.5s ease;
}

.feature-card:hover .feature-card__icon {
  transform: scale(1.08) rotate(2deg);
  box-shadow: 0 8px 24px rgba(67,133,245,0.2), 0 0 0 1px rgba(67,133,245,0.15);
  animation: iconHoverGlow 2s ease-in-out infinite;
}

.content-section--dark .feature-card:hover .feature-card__icon svg {
  filter: drop-shadow(0 0 6px currentColor);
}

.feature-card--blue .feature-card__icon { background: rgba(67,133,245,0.1); }
.feature-card--green .feature-card__icon { background: rgba(52,168,83,0.1); }
.feature-card--orange .feature-card__icon { background: rgba(255,107,3,0.1); }
.feature-card--purple .feature-card__icon { background: rgba(139,92,246,0.1); }

/* 各颜色图标容器悬浮增强 */
.feature-card--blue:hover .feature-card__icon {
  background: rgba(67,133,245,0.22);
  box-shadow: 0 8px 24px rgba(67,133,245,0.25), 0 0 0 1px rgba(67,133,245,0.3);
}
.feature-card--green:hover .feature-card__icon {
  background: rgba(52,168,83,0.22);
  box-shadow: 0 8px 24px rgba(52,168,83,0.25), 0 0 0 1px rgba(52,168,83,0.3);
}
.feature-card--orange:hover .feature-card__icon {
  background: rgba(255,107,3,0.22);
  box-shadow: 0 8px 24px rgba(255,107,3,0.25), 0 0 0 1px rgba(255,107,3,0.3);
}
.feature-card--purple:hover .feature-card__icon {
  background: rgba(139,92,246,0.22);
  box-shadow: 0 8px 24px rgba(139,92,246,0.25), 0 0 0 1px rgba(139,92,246,0.3);
}

/* 深色主题各颜色卡片边框悬浮 */
.content-section--dark .feature-card--blue:hover { border-color: rgba(67,133,245,0.35); }
.content-section--dark .feature-card--green:hover { border-color: rgba(52,168,83,0.35); }
.content-section--dark .feature-card--orange:hover { border-color: rgba(255,107,3,0.35); }
.content-section--dark .feature-card--purple:hover { border-color: rgba(139,92,246,0.35); }

/* SVG 图标悬浮动画 */
.feature-card__icon svg {
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.feature-card:hover .feature-card__icon svg {
  transform: scale(1.15) rotate(-5deg);
}

/* 标题悬浮微动 */
.feature-card__title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 12px;
  transition: all 0.3s ease;
}

.feature-card:hover .feature-card__title {
  letter-spacing: 0.5px;
}

.content-section--dark .feature-card__title {
  color: #fff;
}

.feature-card__desc {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.8;
}

.content-section--dark .feature-card__desc {
  color: rgba(255,255,255,0.6);
}

@media (max-width: 900px) {
  .features-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .features-grid {
    grid-template-columns: 1fr;
  }
}

/* === 架构图 === */
.architecture {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  position: relative;
}

.architecture::before {
  content: '';
  position: absolute;
  top: 55%;
  left: 10%;
  right: 10%;
  height: 2px;
  background: linear-gradient(90deg, var(--primary), var(--secondary), var(--accent));
  opacity: 0.3;
  z-index: 0;
}

.arch-layer {
  text-align: center;
  position: relative;
  z-index: 1;
}

.arch-layer__card {
  padding: 32px 24px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-lg);
  transition: var(--transition);
}

.arch-layer__card:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.2);
}

.arch-layer__icon {
  font-size: 40px;
  margin-bottom: 16px;
}

.arch-layer__name {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 8px;
}

.arch-layer__sub {
  font-size: 14px;
  margin-bottom: 16px;
}

.arch-layer__features {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.arch-layer__feature {
  font-size: 13px;
  padding: 6px 12px;
  background: rgba(255,255,255,0.04);
  border-radius: 6px;
}

@media (max-width: 768px) {
  .architecture {
    grid-template-columns: 1fr;
  }

  .architecture::before {
    display: none;
  }
}

/* ================================================================
   技术双卡 Tech Pair  (浅色背景适配版)
   ================================================================ */
.tech-pair {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

/* ---------- 面板卡片 ---------- */
.tech-panel {
  flex: 1;
  border-radius: 18px;
  position: relative;
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(.23,1,.32,1), box-shadow 0.4s ease;
  padding: 30px;
}

.tech-panel:hover {
  transform: translateY(-5px);
}

.tech-panel--wifi {
  background: linear-gradient(160deg, #F5F8FF 0%, #EEF2FC 50%, #FAFBFF 100%);
  border: 1px solid rgba(67,133,245,0.14);
  box-shadow: 0 4px 24px rgba(67,133,245,0.07), 0 1px 3px rgba(0,0,0,0.04);
}
.tech-panel--wifi:hover {
  box-shadow: 0 16px 48px rgba(67,133,245,0.14), 0 4px 12px rgba(67,133,245,0.08);
}

.tech-panel--sfis {
  background: linear-gradient(160deg, #F8F5FF 0%, #F3ECFC 50%, #FBF9FF 100%);
  border: 1px solid rgba(139,92,246,0.14);
  box-shadow: 0 4px 24px rgba(139,92,246,0.07), 0 1px 3px rgba(0,0,0,0.04);
}
.tech-panel--sfis:hover {
  box-shadow: 0 16px 48px rgba(139,92,246,0.14), 0 4px 12px rgba(139,92,246,0.08);
}

.tech-panel__content-wrapper {
  padding: 30px;
  display: flex;
  flex-direction: column;
}

/* 顶部：图标 + 序号 */
.tech-panel__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

.tech-panel__icon-box {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.tech-panel--wifi .tech-panel__icon-box {
  background: rgba(67,133,245,0.09);
}
.tech-panel--sfis .tech-panel__icon-box {
  background: rgba(139,92,246,0.09);
}

.tech-panel__icon {
  width: 42px;
  height: 42px;
}

.tech-panel__num {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 4px 14px;
  border-radius: 20px;
  font-variant-numeric: tabular-nums;
}

.tech-panel--wifi .tech-panel__num {
  background: #4385F5;
  color: #fff;
}
.tech-panel--sfis .tech-panel__num {
  background: #8B5CF6;
  color: #fff;
}

/* 标题 & 描述 */
.tech-panel__title {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.35;
  margin-bottom: 5px;
  letter-spacing: -0.01em;
}

.tech-panel--wifi .tech-panel__title { color: #1a365d; }
.tech-panel--sfis .tech-panel__title { color: #3b1d6e; }

.tech-panel__desc {
  font-size: 13.5px;
  color: #6b7280;
  margin-bottom: 20px;
  font-weight: 400;
}

/* 特性列表 */
.tech-panel__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.tech-panel__list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  line-height: 1.55;
  color: #374151;
  padding: 9px 14px;
  border-radius: 10px;
  background: rgba(255,255,255,0.7);
  border: 1px solid rgba(0,0,0,0.05);
  transition: all 0.3s ease;
}

.tech-panel__list li:hover {
  background: #fff;
  transform: translateX(4px);
}

.tech-panel--wifi .tech-panel__list li:hover {
  border-color: rgba(67,133,245,0.25);
  box-shadow: inset 3px 0 0 #4385F5;
}

.tech-panel--sfis .tech-panel__list li:hover {
  border-color: rgba(139,92,246,0.25);
  box-shadow: inset 3px 0 0 #8B5CF6;
}

.tech-panel__check {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  border-radius: 5px;
  background: rgba(255,255,255,0.8);
  padding: 2px;
}

/* 装饰：信号柱 / 神经元 */
.tech-panel__signal-bar,
.tech-panel__neural-dots {
  position: absolute;
  bottom: 18px;
  right: 20px;
  pointer-events: none;
}

.tech-panel__signal-bar {
  display: flex;
  align-items: flex-end;
  gap: 4px;
}

.tech-panel__signal-bar i {
  display: block;
  width: 4px;
  border-radius: 2px;
  background: #4385F5;
  opacity: 0.3;
  animation: sigBar 1.8s ease-in-out infinite;
}
.tech-panel__signal-bar i:nth-child(1) { height: 8px; animation-delay: 0s; }
.tech-panel__signal-bar i:nth-child(2) { height: 14px; animation-delay: 0.15s; }
.tech-panel__signal-bar i:nth-child(3) { height: 20px; animation-delay: 0.3s; }
.tech-panel__signal-bar i:nth-child(4) { height: 26px; animation-delay: 0.45s; }

@keyframes sigBar {
  0%,100% { opacity: 0.2; transform: scaleY(0.7); }
  50% { opacity: 0.65; transform: scaleY(1); }
}

.tech-panel__neural-dots {
  display: flex;
  gap: 7px;
  align-items: center;
}

.tech-panel__neural-dots span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #8B5CF6;
  opacity: 0.25;
  animation: neuralPulse 2s ease-in-out infinite;
}
.tech-panel__neural-dots span:nth-child(1) { animation-delay: 0s; }
.tech-panel__neural-dots span:nth-child(2) { animation-delay: 0.4s; }
.tech-panel__neural-dots span:nth-child(3) { animation-delay: 0.8s; }

@keyframes neuralPulse {
  0%,100% { opacity: 0.2; transform: scale(0.75); }
  50% { opacity: 0.6; transform: scale(1.25); }
}

/* ---------- 中间连接器 ---------- */
.tech-connector {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
  min-width: 56px;
  z-index: 5;
}

.tech-connector__line {
  width: 48px;
  height: 24px;
  flex-shrink: 0;
  opacity: 0;
  animation: connFadeIn 0.5s ease 0.8s forwards;
}

@keyframes connFadeIn {
  to { opacity: 1; }
}

.tech-connector__line svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.tech-connector__path {
  stroke-dasharray: 80;
  stroke-dashoffset: 80;
  animation: connDraw 0.8s ease-out 1s forwards;
}

@keyframes connDraw {
  to { stroke-dashoffset: 0; }
}

.tech-connector__label {
  font-size: 11px;
  font-weight: 600;
  color: #8B5CF6;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-top: 6px;
  white-space: nowrap;
  opacity: 0;
  animation: fadeInUp 0.5s ease 1.6s forwards;
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 入场动画 */
.tech-panel.fade-in {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.65s cubic-bezier(.23,1,.32,1),
              transform 0.65s cubic-bezier(.23,1,.32,1);
}

.tech-panel.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

.stagger-1 { transition-delay: 0.1s !important; }
.stagger-2 { transition-delay: 0.32s !important; }

/* 响应式 */
@media (max-width: 860px) {
  .tech-pair {
    flex-direction: column;
    gap: 24px;
  }

  .tech-connector {
    flex-direction: row;
    padding: 0;
    min-width: auto;
    gap: 10px;
  }

  .tech-connector__line {
    width: 80px;
    height: 22px;
  }

  .tech-connector__label {
    margin-top: 0;
    margin-left: 0;
  }
}

@media (max-width: 480px) {
  .tech-panel__top { margin-bottom: 14px; }
  .tech-panel__icon-box { width: 48px; height: 48px; border-radius: 13px; }
  .tech-panel__icon { width: 36px; height: 36px; }
  .tech-panel__title { font-size: 18px; }
  .tech-panel__list li { font-size: 13px; padding: 8px 12px; }
}

/* === 流程步骤 === */
.process-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  position: relative;
}

.process-steps::before {
  content: '';
  position: absolute;
  top: 48px;
  left: 12.5%;
  right: 12.5%;
  height: 2px;
  background: linear-gradient(90deg, var(--primary), var(--secondary), var(--accent), #8B5CF6);
  opacity: 0.3;
}

.process-step {
  text-align: center;
  padding: 0 16px;
  position: relative;
}

.process-step__num {
  width: 96px;
  height: 96px;
  margin: 0 auto 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  font-weight: 900;
  position: relative;
  z-index: 1;
}

.process-step--blue .process-step__num { 
  background: rgba(67,133,245,0.15);
  border: 2px solid var(--primary);
  color: var(--primary);
}
.process-step--green .process-step__num { 
  background: rgba(52,168,83,0.15);
  border: 2px solid var(--secondary);
  color: var(--secondary);
}
.process-step--orange .process-step__num { 
  background: rgba(255,107,3,0.15);
  border: 2px solid var(--accent);
  color: var(--accent);
}
.process-step--purple .process-step__num { 
  background: rgba(139,92,246,0.15);
  border: 2px solid #8B5CF6;
  color: #8B5CF6;
}

.process-step__title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
}

.process-step__desc {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.7;
}

@media (max-width: 900px) {
  .process-steps {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
  }

  .process-steps::before {
    display: none;
  }
}

@media (max-width: 500px) {
  .process-steps {
    grid-template-columns: 1fr;
  }
}

/* === 场景卡片 === */
.scenario-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.scenario-card {
  padding: 32px;
  background: #fff;
  border-radius: var(--radius-xl);
  border: 1px solid rgba(0,0,0,0.06);
  transition: var(--transition);
}

.scenario-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: rgba(67,133,245,0.2);
}

.scenario-card__icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin-bottom: 20px;
  background: rgba(67,133,245,0.1);
}

.scenario-card__title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
}

.scenario-card__needs {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 16px;
  line-height: 1.7;
}

.scenario-card__value {
  display: inline-block;
  padding: 6px 14px;
  background: rgba(67,133,245,0.08);
  border-radius: 50px;
  font-size: 13px;
  font-weight: 600;
  color: var(--primary);
}

@media (max-width: 900px) {
  .scenario-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .scenario-cards {
    grid-template-columns: 1fr;
  }
}

/* === 解决方案详情 === */
.solution-detail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

.solution-detail__visual {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  aspect-ratio: 4/3;
  background: var(--dark-2);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.06);
  transition: transform 0.4s cubic-bezier(.23, 1, .32, 1),
              box-shadow 0.4s cubic-bezier(.23, 1, .32, 1),
              border-color 0.4s ease;
  isolation: isolate;
}

/* 顶部渐变光带 */
.solution-detail__visual::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #4385F5, #34A853, #4385F5);
  background-size: 200% 100%;
  opacity: 0;
  transition: opacity 0.35s ease, background-position 0.8s ease;
}

.solution-detail__visual:hover {
  transform: translateY(-6px) scale(1.01);
  box-shadow: 0 24px 60px rgba(67, 133, 245, 0.15), 0 8px 24px rgba(0, 0, 0, 0.12);
  border-color: rgba(67, 133, 245, 0.18);
}

.solution-detail__visual:hover::before {
  opacity: 1;
  background-position: 100% 0;
}

.solution-detail__visual-icon {
  font-size: 120px;
  opacity: 0.15;
}

.solution-detail__visual-tag {
  position: absolute;
  top: 50px;
  left: 0px;
  padding: 8px 20px;
  border-radius: 50px;
  font-size: 14px;
  font-weight: 600;
  backdrop-filter: blur(10px);
  z-index: 2;
}

.solution-detail__visual-stats {
  text-align: center;
  color: rgba(255,255,255,0.6);
  padding: 40px;
}

.solution-detail__visual-value {
  font-size: 72px;
  font-weight: 900;
  line-height: 1.1;
}

.solution-detail__visual-value + .solution-detail__visual-label {
  margin-top: 8px;
}

.solution-detail__visual-label {
  font-size: 18px;
}

.solution-detail__visual-label + .solution-detail__visual-value {
  margin-top: 24px;
}

/* ========== 建筑节能 SVG 插画动画 ========== */
.building-illustration {
  width: 100%;
  height: 100%;
}

/* 太阳光线旋转 */
.ill-rays { transform-origin: 320px 70px; }
@keyframes sunRaysRotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.ill-sun .ill-rays { animation: sunRaysRotate 20s linear infinite; }

/* 太阳整体脉冲 */
@keyframes sunPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.05); opacity: 0.85; }
}
.ill-sun circle:first-of-type { animation: sunPulse 4s ease-in-out infinite; transform-origin: 320px 70px; }

/* 自然光连接线流动 */
@keyframes lightFlow {
  to { stroke-dashoffset: -16; }
}
.ill-connect-light { animation: lightFlow 3s linear infinite; }

/* 空调冷气输出动画 */
@keyframes acWindFlow {
  0% { opacity: 0.15; transform: translateX(0); }
  50% { opacity: 0.45; transform: translateX(4px); }
  100% { opacity: 0.15; transform: translateX(8px); }
}
.ill-ac-wind path:nth-child(1) { animation: acWindFlow 2s ease-in-out infinite; }
.ill-ac-wind path:nth-child(2) { animation: acWindFlow 2s ease-in-out infinite 0.3s; }
.ill-ac-wind path:nth-child(3) { animation: acWindFlow 2s ease-in-out infinite 0.6s; }

/* 空调连接线流动 */
@keyframes acConnectPulse {
  0%, 100% { opacity: 0.15; }
  50% { opacity: 0.35; }
}
.ill-connect-ac { animation: acConnectPulse 2.5s ease-in-out infinite; }

/* AI 大脑节点闪烁 */
@keyframes brainNodeGlow {
  0%, 100% { fill-opacity: 0.5; r: 2.5; }
  50% { fill-opacity: 0.85; r: 3; }
}
.ill-brain circle[fill-opacity="0.6"] { animation: brainNodeGlow 2s ease-in-out infinite; }

/* AI 脑回路脉冲 */
@keyframes brainPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
.ill-brain path { animation: brainPulse 3s ease-in-out infinite; }

/* 数据流线条 */
@keyframes dataFlowDash {
  to { stroke-dashoffset: -12; }
}
.ill-data-flow path[dasharray] { animation: dataFlowDash 2.5s linear infinite; }

/* 建筑窗户呼吸（绿色节能层） */
@keyframes windowBreath {
  0%, 100% { fill-opacity: 0.12; stroke-opacity: 0.3; }
  50% { fill-opacity: 0.22; stroke-opacity: 0.5; }
}
.ill-window-green:nth-child(odd) { animation: windowBreath 4s ease-in-out infinite; }
.ill-window-green:nth-child(even) { animation: windowBreath 4s ease-in-out infinite 1s; }

/* 节能数字跳动 */
@keyframes percentBounce {
  0%, 100% { transform: translateY(0); }
  25% { transform: translateY(-2px); }
  75% { transform: translateY(1px); }
}
.ill-percent { animation: percentBounce 3s ease-in-out infinite; }

/* 下降箭头弹跳 */
@keyframes arrowBounce {
  0%, 100% { transform: translateY(0); opacity: 0.5; }
  50% { transform: translateY(4px); opacity: 0.7; }
}
.ill-arrow-down { animation: arrowBounce 2s ease-in-out infinite; transform-origin: center; }

/* 能耗卡片整体微动 */
@keyframes energyFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}
.ill-energy-drop { animation: energyFloat 4s ease-in-out infinite; }

/* 浮动粒子漂移 */
@keyframes particleFloat1 {
  0%, 100% { transform: translate(0, 0); opacity: 0.3; }
  25% { transform: translate(6px, -10px); opacity: 0.5; }
  50% { transform: translate(-3px, -18px); opacity: 0.35; }
  75% { transform: translate(-8px, -8px); opacity: 0.45; }
}
@keyframes particleFloat2 {
  0%, 100% { transform: translate(0, 0); opacity: 0.3; }
  33% { transform: translate(-8px, -14px); opacity: 0.5; }
  66% { transform: translate(5px, -22px); opacity: 0.25; }
}
@keyframes particleFloat3 {
  0%, 100% { transform: translate(0, 0); opacity: 0.3; }
  50% { transform: translate(10px, -12px); opacity: 0.55; }
}
@keyframes particleFloat4 {
  0%, 100% { transform: translate(0, 0); opacity: 0.25; }
  40% { transform: translate(-6px, -16px); opacity: 0.45; }
  80% { transform: translate(-12px, -6px); opacity: 0.3; }
}
@keyframes particleFloat5 {
  0%, 100% { transform: translate(0, 0); opacity: 0.25; }
  50% { transform: translate(8px, -10px); opacity: 0.4; }
}
@keyframes particleFloat6 {
  0%, 100% { transform: translate(0, 0); opacity: 0.25; }
  33% { transform: translate(-5px, -14px); opacity: 0.45; }
  66% { transform: translate(4px, -8px); opacity: 0.3; }
}
.ill-p1 { animation: particleFloat1 6s ease-in-out infinite; }
.ill-p2 { animation: particleFloat2 7s ease-in-out infinite 0.5s; }
.ill-p3 { animation: particleFloat3 5.5s ease-in-out infinite 1s; }
.ill-p4 { animation: particleFloat4 6.5s ease-in-out infinite 1.5s; }
.ill-p5 { animation: particleFloat5 5s ease-in-out infinite 2s; }
.ill-p6 { animation: particleFloat6 7.5s ease-in-out infinite 2.5s; }

/* 背景网格缓慢移动 */
@keyframes gridDriftSlow {
  0%, 100% { opacity: 0.06; }
  50% { opacity: 0.1; }
}
.ill-grid { animation: gridDriftSlow 8s ease-in-out infinite; }

/* 减少动画偏好适配 */
@media (prefers-reduced-motion: reduce) {
  .building-illustration * { animation: none !important; transition: none !important; }
  .tunnel-illustration * { animation: none !important; transition: none !important; }
  .street-illustration * { animation: none !important; transition: none !important; }
  .electrical-illustration * { animation: none !important; transition: none !important; }
}

/* ========== 隧道随车智能照明 SVG 动画 ========== */
.tunnel-illustration,
.street-illustration,
.electrical-illustration {
  width: 100%;
  height: 100%;
}

/* 隧道网格漂移 */
@keyframes tunGridDrift {
  0%, 100% { opacity: 0.05; }
  50% { opacity: 0.09; }
}
.tun-grid { animation: tunGridDrift 8s ease-in-out infinite; }

/* 隧道路线流动 */
@keyframes tunRoadDash {
  to { stroke-dashoffset: -16; }
}
.tun-road-line line { animation: tunRoadDash 2s linear infinite; }

/* 隧道灯光锥呼吸 - 亮灯 */
@keyframes tunConeBrightBreath {
  0%, 100% { opacity: 1; transform: scaleX(1); }
  50% { opacity: 0.7; transform: scaleX(0.96); }
}
.tun-cone-bright { animation: tunConeBrightBreath 3s ease-in-out infinite; transform-origin: center top; }

/* 隧道灯光锥呼吸 - 暗灯 */
@keyframes tunConeDimBreath {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.2; }
}
.tun-cone-dim { animation: tunConeDimBreath 4s ease-in-out infinite; }

/* 车辆微动（模拟行驶感） */
@keyframes tunCarMove {
  0%, 100% { transform: translate(155px, 200px); }
  25% { transform: translate(157px, 199px); }
  75% { transform: translate(153px, 201px); }
}
.tun-car { animation: tunCarMove 5s ease-in-out infinite; }

/* 车头大灯闪烁 */
@keyframes tunHeadlightPulse {
  0%, 100% { fill-opacity: 0.7; rx: 3; ry: 2; }
  50% { fill-opacity: 0.9; rx: 3.5; ry: 2.3; }
}
.tun-headlight { animation: tunHeadlightPulse 2s ease-in-out infinite; }

/* 车前光照区域脉动 */
@keyframes tunCarBeamPulse {
  0%, 100% { opacity: 0.06; rx: 28; ry: 12; }
  50% { opacity: 0.1; rx: 32; ry: 14; }
}
.tun-car-beam { animation: tunCarBeamPulse 3s ease-in-out infinite; }

/* 传感器节点脉冲 */
@keyframes tunSensorPulse {
  0%, 100% { fill-opacity: 0.5; r: 2.5; }
  50% { fill-opacity: 0.8; r: 3.2; }
}
.tun-sensor-pulse { animation: tunSensorPulse 2.5s ease-in-out infinite; }

/* 传感器波纹扩散 */
@keyframes tunSensorWaveExpand {
  0% { r: 6; stroke-opacity: 0.35; stroke-width: 1; }
  100% { r: 18; stroke-opacity: 0; stroke-width: 0.3; }
}
.tun-sensor-wave { animation: tunSensorWaveExpand 3s ease-out infinite; }

/* AI中心数据条动画 */
@keyframes tunDataBar1 {
  0%, 100% { width: 26px; fill-opacity: 0.2; }
  50% { width: 22px; fill-opacity: 0.28; }
}
@keyframes tunDataBar2 {
  0%, 100% { width: 20px; fill-opacity: 0.15; }
  50% { width: 14px; fill-opacity: 0.22; }
}
@keyframes tunDataBar3 {
  0%, 100% { width: 14px; fill-opacity: 0.1; }
  50% { width: 10px; fill-opacity: 0.18; }
}
.tun-data-bar-1 { animation: tunDataBar1 2.5s ease-in-out infinite; }
.tun-data-bar-2 { animation: tunDataBar2 3s ease-in-out infinite 0.3s; }
.tun-data-bar-3 { animation: tunDataBar3 3.5s ease-in-out infinite 0.6s; }

/* 数据流线 */
@keyframes tunDataFlowDash {
  to { stroke-dashoffset: -12; }
}
.tun-data-flow-left, .tun-data-flow-right { animation: tunDataFlowDash 2.5s linear infinite; }

/* 节能卡片浮动 */
@keyframes tunEnergyFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
.tun-energy-card { animation: tunEnergyFloat 4s ease-in-out infinite; }

/* 百分比数字跳动 */
@keyframes tunPercentBounce {
  0%, 100% { transform: translateY(0); }
  30% { transform: translateY(-2px); }
  70% { transform: translateY(1px); }
}
.tun-percent { animation: tunPercentBounce 3s ease-in-out infinite; }

/* 箭头弹跳 */
@keyframes tunArrowBounce {
  0%, 100% { transform: translateY(0); opacity: 0.45; }
  50% { transform: translateY(3px); opacity: 0.65; }
}
.tun-arrow-down { animation: tunArrowBounce 2.2s ease-in-out infinite; transform-origin: center; }

/* 隧道粒子漂移 */
@keyframes tunPFloat1 { 0%,100%{transform:translate(0,0);opacity:.3} 40%{transform:translate(8px,-14px);opacity:.55} 80%{transform:translate(-4px,-8px);opacity:.35} }
@keyframes tunPFloat2 { 0%,100%{transform:translate(0,0);opacity:.25} 33%{transform:translate(-10px,-18px);opacity:.45} 66%{transform:translate(6px,-10px);opacity:.2} }
@keyframes tunPFloat3 { 0%,100%{transform:translate(0,0);opacity:.25} 50%{transform:translate(10px,-14px);opacity:.5} }
@keyframes tunPFloat4 { 0%,100%{transform:translate(0,0);opacity:.2} 40%{transform:translate(-8px,-16px);opacity:.42} 80%{transform:translate(-12px,-6);opacity:.28} }
@keyframes tunPFloat5 { 0%,100%{transform:translate(0,0);opacity:.2} 50%{transform:translate(8px,-10px);opacity:.38} }
@keyframes tunPFloat6 { 0%,100%{transform:translate(0,0);opacity:.2} 33%{transform:translate(-6px,-14px);opacity:.42} 66%{transform:translate(4px,-8);opacity:.26} }
.tun-p1{animation:tunPFloat1 6s ease-in-out infinite}.tun-p2{animation:tunPFloat2 7s ease-in-out infinite .5s}
.tun-p3{animation:tunPFloat3 5.5s ease-in-out infinite 1s}.tun-p4{animation:tunPFloat4 6.5s ease-in-out infinite 1.5s}
.tun-p5{animation:tunPFloat5 5s ease-in-out infinite 2s}.tun-p6{animation:tunPFloat6 7.5s ease-in-out infinite 2.5s}

/* ========== 路灯AI节能 SVG 动画 ========== */

/* 星星闪烁 */
@keyframes strStarTwinkle {
  0%, 100% { opacity: var(--star-base, 0.3); transform: scale(1); }
  50% { opacity: calc(var(--star-base, 0.3) + 0.3); transform: scale(1.3); }
}
.str-star-1 { --star-base: 0.5; animation: strStarTwinkle 3s ease-in-out infinite; }
.str-star-2 { --star-base: 0.4; animation: strStarTwinkle 4s ease-in-out infinite 0.5s; }
.str-star-3 { --star-base: 0.45; animation: strStarTwinkle 3.5s ease-in-out infinite 1s; }
.str-star-4 { --star-base: 0.35; animation: strStarTwinkle 4.5s ease-in-out infinite 1.5s; }
.str-star-5 { --star-base: 0.5; animation: strStarTwinkle 2.8s ease-in-out infinite 2s; }
.str-star-6 { --star-base: 0.3; animation: strStarTwinkle 5s ease-in-out infinite 2.5s; }

/* 路灯光晕呼吸（亮） */
@keyframes strGlowBreathBright {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.75; transform: scale(1.03); }
}
.str-glow-area { animation: strGlowBreathBright 4s ease-in-out infinite; transform-origin: center top; }

/* 光束呼吸（亮） */
@keyframes strBeamBrightBreath {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}
.str-beam-bright { animation: strBeamBrightBreath 4s ease-in-out infinite; }

/* 光束呼吸（暗） */
@keyframes strBeamDimBreath {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 0.25; }
}
.str-beam-dim { animation: strBeamDimBreath 5s ease-in-out infinite; }

/* AI云微微浮动 */
@keyframes strCloudFloat {
  0%, 100% { transform: translate(148px, 28px) translateY(0); }
  50% { transform: translate(148px, 28px) translateY(-3px); }
}
.str-ai-cloud { animation: strCloudFloat 5s ease-in-out infinite; }

/* WiFi信号波动 */
@keyframes strSignalWave {
  0%, 100% { opacity: 0.35; transform: scaleY(1); }
  50% { opacity: 0.15; transform: scaleY(0.85); }
}
.str-signal-1 { animation: strSignalWave 2.5s ease-in-out infinite; transform-origin: bottom; }
.str-signal-2 { animation: strSignalWave 2.5s ease-in-out infinite 0.3s; transform-origin: bottom; }

/* 控制线数据流动 */
@keyframes strCtrlLineFlow {
  to { stroke-dashoffset: -14; }
}
.str-ctrl-line-1 { animation: strCtrlLineFlow 3s linear infinite; }
.str-ctrl-line-2 { animation: strCtrlLineFlow 3.5s linear infinite 0.4s; }
.str-ctrl-line-3 { animation: strCtrlLineFlow 4s linear infinite 0.8s; }

/* 时间文字渐变 */
@keyframes strTimeTextShift {
  0%, 85% { content: '深夜模式'; opacity: 1; }
  86%, 95% { opacity: 0; }
  96%, 100% { opacity: 1; }
}

/* 节能卡片浮动 */
@keyframes strEnergyFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}
.str-energy-card { animation: strEnergyFloat 4.5s ease-in-out infinite; }

/* 百分比跳动 */
@keyframes strPercentBounce {
  0%, 100% { transform: translateY(0); }
  30% { transform: translateY(-2px); }
  70% { transform: translateY(1px); }
}
.str-percent { animation: strPercentBounce 3s ease-in-out infinite; }

/* 箭头弹跳 */
@keyframes strArrowBounce {
  0%, 100% { transform: translateY(0); opacity: 0.45; }
  50% { transform: translateY(3px); opacity: 0.65; }
}
.str-arrow-down { animation: strArrowBounce 2.2s ease-in-out infinite; transform-origin: center; }

/* 路灯粒子漂移 */
@keyframes strPFloat1 { 0%,100%{transform:translate(0,0);opacity:.3} 40%{transform:translate(7px,-12px);opacity:.5} 80%{transform:translate(-3px,-6px);opacity:.32} }
@keyframes strPFloat2 { 0%,100%{transform:translate(0,0);opacity:.25} 33%{transform:translate(-8px,-16px);opacity:.44} 66%{transform:translate(5px,-10px);opacity:.2} }
@keyframes strPFloat3 { 0%,100%{transform:translate(0,0);opacity:.2} 50%{transform:translate(9px,-13px);opacity:.42} }
@keyframes strPFloat4 { 0%,100%{transform:translate(0,0);opacity:.2} 40%{transform:translate(-7px,-14px);opacity:.4} 80%{transform:translate(-11px,-6);opacity:.26} }
@keyframes strPFloat5 { 0%,100%{transform:translate(0,0);opacity:.2} 50%{transform:translate(7px,-9px);opacity:.36} }
@keyframes strPFloat6 { 0%,100%{transform:translate(0,0);opacity:.18} 33%{transform:translate(-5px,-13px);opacity:.4} 66%{transform:translate(4px,-7px);opacity:.24}}
.str-p1{animation:strPFloat1 6s ease-in-out infinite}.str-p2{animation:strPFloat2 7s ease-in-out infinite .5s}
.str-p3{animation:strPFloat3 5.5s ease-in-out infinite 1s}.str-p4{animation:strPFloat4 6.5s ease-in-out infinite 1.5s}
.str-p5{animation:strPFloat5 5s ease-in-out infinite 2s}.str-p6{animation:strPFloat6 7.5s ease-in-out infinite 2.5s}

/* ========== 用电安全运维 SVG 动画 ========== */

/* 配电柜网格漂移 */
@keyframes elecGridDrift {
  0%, 100% { opacity: 0.04; }
  50% { opacity: 0.08; }
}
.elec-grid { animation: elecGridDrift 8s ease-in-out infinite; }

/* 断路器开关脉冲（合闸状态） */
@keyframes elecSwitchOnPulse {
  0%, 100% { stroke-opacity: 0.55; filter: brightness(1); }
  50% { stroke-opacity: 0.7; filter: brightness(1.15); }
}
.elec-switch-on { animation: elecSwitchOnPulse 3s ease-in-out infinite; }

/* 断路器开关警告态（水平） */
@keyframes elecSwitchWarnPulse {
  0%, 100% { stroke-opacity: 0.5; }
  33% { stroke-opacity: 0.7; }
  66% { stroke-opacity: 0.45; }
}
.elec-switch-warn { animation: elecSwitchWarnPulse 2s ease-in-out infinite; }

/* 状态点呼吸（绿色正常） */
@keyframes elecDotGreenBreath {
  0%, 100% { fill-opacity: 0.4; r: 2; }
  50% { fill-opacity: 0.6; r: 2.4; }
}
.elec-dot-green { animation: elecDotGreenBreath 2.5s ease-in-out infinite; }

/* 状态点警告（橙色） */
@keyframes elecDotOrangePulse {
  0%, 100% { fill-opacity: 0.45; r: 2; }
  50% { fill-opacity: 0.7; r: 2.6; }
}
.elec-dot-orange { animation: elecDotOrangePulse 1.5s ease-in-out infinite; }

/* 波形图动态偏移 */
@keyframes elecWaveformAnim {
  0% { transform: translateX(0); }
  100% { transform: translateX(-8px); }
}
.elec-waveform { animation: elecWaveformAnim 3s linear infinite; }

/* 数值微变 */
@keyframes elecValFlickerA {
  0%, 90%, 100% { opacity: 1; }
  93% { opacity: 0.7; }
  96% { opacity: 1; }
}
@keyframes elecValFlickerV {
  0%, 92%, 100% { opacity: 1; }
  94% { opacity: 0.75; }
  97% { opacity: 1; }
}
.elec-val-a { animation: elecValFlickerA 4s ease-in-out infinite; }
.elec-val-v { animation: elecValFlickerV 5s ease-in-out infinite 1s; }

/* 电流粒子流动（向下） */
@keyframes elecFlowDown {
  0% { cy: 54px; opacity: 0.6; }
  20% { cy: 60px; opacity: 0.5; }
  40% { cy: 66px; opacity: 0.5; }
  60% { cy: 72px; opacity: 0.4; }
  80% { cy: 76px; opacity: 0.3; }
  100% { cy: 82px; opacity: 0; }
}
@keyframes elecFlowDown2 {
  0% { cy: 48px; opacity: 0; }
  20% { cy: 54px; opacity: 0.6; }
  40% { cy: 62px; opacity: 0.5; }
  60% { cy: 68px; opacity: 0.5; }
  80% { cy: 74px; opacity: 0.4; }
  100% { cy: 78px; opacity: 0.2; }
}
@keyframes elecFlowDown3 {
  0% { cy: 58px; opacity: 0.3; }
  20% { cy: 64px; opacity: 0.5; }
  40% { cy: 70px; opacity: 0.5; }
  60% { cy: 74px; opacity: 0.4; }
  80% { cy: 78px; opacity: 0.2; }
  100% { cy: 80px; opacity: 0; }
}
.elec-fd-1 { animation: elecFlowDown 2s linear infinite; }
.elec-fd-2 { animation: elecFlowDown2 2s linear infinite 0.67s; }
.elec-fd-3 { animation: elecFlowDown3 2s linear infinite 1.33s; }

/* 电流粒子流动（向上） */
@keyframes elecFlowUp1 {
  0% { cy: 250px; opacity: 0.4; }
  25% { cy: 255px; opacity: 0.5; }
  50% { cy: 260px; opacity: 0.55; }
  75% { cy: 264px; opacity: 0.5; }
  100% { cy: 270px; opacity: 0; }
}
@keyframes elecFlowUp2 {
  0% { cy: 246px; opacity: 0; }
  25% { cy: 252px; opacity: 0.45; }
  50% { cy: 256px; opacity: 0.52; }
  75% { cy: 262px; opacity: 0.48; }
  100% { cy: 268px; opacity: 0.2; }
}
@keyframes elecFlowUp3 {
  0% { cy: 254px; opacity: 0.25; }
  25% { cy: 258px; opacity: 0.48; }
  50% { cy: 264px; opacity: 0.55; }
  75% { cy: 266px; opacity: 0.45; }
  100% { cy: 272px; opacity: 0; }
}
.elec-fu-1 { animation: elecFlowUp1 2s linear infinite; }
.elec-fu-2 { animation: elecFlowUp2 2s linear infinite 0.67s; }
.elec-fu-3 { animation: elecFlowUp3 2s linear infinite 1.33s; }

/* 盾牌保护脉冲 */
@keyframes elecShieldPulse {
  0%, 100% { stroke-opacity: 0.4; fill-opacity: 0.12; }
  50% { stroke-opacity: 0.6; fill-opacity: 0.2; }
}
.elec-shield { animation: elecShieldPulse 3s ease-in-out infinite; }

/* 对勾闪烁 */
@keyframes elecCheckFlash {
  0%, 100% { stroke-opacity: 0.55; }
  50% { stroke-opacity: 0.8; }
}
.elec-checkmark { animation: elecCheckFlash 2.5s ease-in-out infinite; }

/* 安全文字呼吸 */
@keyframes elecSafeTextBreath {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.75; }
}
.elec-safe-text { animation: elecSafeTextBreath 3s ease-in-out infinite; }

/* 脉冲环扩散 */
@keyframes elecPulseRingBreathe {
  0%, 100% { fill-opacity: 0.35; r: 3; }
  50% { fill-opacity: 0.55; r: 3.5; }
}
.elec-pulse-ring { animation: elecPulseRingBreathe 2s ease-in-out infinite; }

@keyframes elecPulseWaveExpand {
  0% { r: 3; stroke-opacity: 0.25; stroke-width: 0.8; }
  100% { r: 10; stroke-opacity: 0; stroke-width: 0.2; }
}
.elec-pulse-wave { animation: elecPulseWaveExpand 2.5s ease-out infinite; }

/* 数据连接线流动 */
@keyframes elecDataLineFlow {
  to { stroke-dashoffset: -12; }
}
.elec-data-line-left, .elec-data-line-right { animation: elecDataLineFlow 2.5s linear infinite; }

/* 指标卡片浮动 */
@keyframes elecMetricFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}
.elec-metric-card { animation: elecMetricFloat 4s ease-in-out infinite; }

/* 告警面板浮动 */
@keyframes elecAlertFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}
.elec-alert-panel { animation: elecAlertFloat 5s ease-in-out infinite; }

/* 告警指示灯 */
@keyframes elecAlertL1 {
  0%, 100% { fill-opacity: 0.35; r: 3; }
  50% { fill-opacity: 0.5; r: 3.3; }
}
@keyframes elecAlertL2 {
  0%, 70%, 100% { fill-opacity: 0.25; r: 3; }
  80% { fill-opacity: 0.45; r: 3.5; }
  90% { fill-opacity: 0.25; r: 3; }
}
@keyframes elecAlertL3 {
  0%, 85%, 100% { fill-opacity: 0.12; r: 3; }
  88% { fill-opacity: 0.2; r: 3.2; }
  91% { fill-opacity: 0.12; r: 3; }
}
.elec-alert-l1 { animation: elecAlertL1 2.5s ease-in-out infinite; }
.elec-alert-l2 { animation: elecAlertL2 3s ease-in-out infinite; }
.elec-alert-l3 { animation: elecAlertL3 4s ease-in-out infinite; }

/* 百分比跳动 */
@keyframes elecPercentBounce {
  0%, 100% { transform: translateY(0); }
  30% { transform: translateY(-2px); }
  70% { transform: translateY(1px); }
}
.elec-percent { animation: elecPercentBounce 3s ease-in-out infinite; }

/* 箭头弹跳 */
@keyframes elecArrowBounce {
  0%, 100% { transform: translateY(0); opacity: 0.4; }
  50% { transform: translateY(3px); opacity: 0.6; }
}
.elec-arrow-down { animation: elecArrowBounce 2.2s ease-in-out infinite; transform-origin: center; }

/* 用电安全粒子漂移 */
@keyframes elecPFloat1 { 0%,100%{transform:translate(0,0);opacity:.3} 40%{transform:translate(7px,-13px);opacity:.5} 80%{transform:translate(-4px,-7px);opacity:.32} }
@keyframes elecPFloat2 { 0%,100%{transform:translate(0,0);opacity:.25} 33%{transform:translate(-9px,-17px);opacity:.43} 66%{transform:translate(5px,-11px);opacity:.2} }
@keyframes elecPFloat3 { 0%,100%{transform:translate(0,0);opacity:.25} 50%{transform:translate(10px,-14px);opacity:.48} }
@keyframes elecPFloat4 { 0%,100%{transform:translate(0,0);opacity:.2} 40%{transform:translate(-8px,-15px);opacity:.4} 80%{transform:translate(-12px,-7);opacity:.26} }
@keyframes elecPFloat5 { 0%,100%{transform:translate(0,0);opacity:.2} 50%{transform:translate(8px,-10px);opacity:.36} }
@keyframes elecPFloat6 { 0%,100%{transform:translate(0,0);opacity:.2} 33%{transform:translate(-6px,-14px);opacity:.4} 66%{transform:translate(4px,-8px);opacity:.24} }
.elec-p1{animation:elecPFloat1 6s ease-in-out infinite}.elec-p2{animation:elecPFloat2 7s ease-in-out infinite .5s}
.elec-p3{animation:elecPFloat3 5.5s ease-in-out infinite 1s}.elec-p4{animation:elecPFloat4 6.5s ease-in-out infinite 1.5s}
.elec-p5{animation:elecPFloat5 5s ease-in-out infinite 2s}.elec-p6{animation:elecPFloat6 7.5s ease-in-out infinite 2.5s}

.solution-detail__content {
  padding: 20px 0;
}

.solution-detail__pain-point {
  display: inline-block;
  padding: 6px 16px;
  background: rgba(255,107,3,0.1);
  color: var(--accent);
  border-radius: 50px;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 20px;
}

.solution-detail__title {
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 800;
  color: var(--text);
  margin-bottom: 16px;
  line-height: 1.3;
}

.solution-detail__desc {
  font-size: 15px;
  color: var(--text-secondary);
  line-height: 1.8;
  margin-bottom: 28px;
}

.solution-detail__tech-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 28px;
}

.solution-detail__tech-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: var(--text);
}

.solution-detail__tech-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ================================================
   修复：大深色区块文字颜色（确保可读性）
   ================================================ */

/* 深色区块内的标题/描述 → 白色 */
.content-section--dark .section__title,
.content-section--dark .section__desc,
.content-section--dark .solution-detail__title,
.content-section--dark .solution-detail__desc,
.content-section--dark .solution-detail__tech-item,
.content-section--dark .section__label {
  color: rgba(255, 255, 255, 0.92) !important;
}

.content-section--dark .section__title .highlight {
  background: linear-gradient(135deg, #6BA3FF, #6FD49A);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.content-section--dark .section__label::before,
.content-section--dark .section__label::after {
  background: rgba(255, 255, 255, 0.4);
}

.content-section--dark .section__label {
  color: rgba(255, 255, 255, 0.7) !important;
}

/* SFIS 深色区块（绿底）内内容白色 */
.content-section--dark .arch-layer__name,
.content-section--dark .arch-layer__sub,
.content-section--dark .arch-layer__feature {
  color: rgba(255, 255, 255, 0.92) !important;
}

/* ================================================
   修复：认证资质卡片文字颜色
   ================================================ */
.cert-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.cert-item {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-lg);
  padding: 32px 20px;
  text-align: center;
  transition: var(--transition);
  color: #fff;
}

.cert-item:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.22);
  transform: translateY(-4px);
}

.cert-item__icon {
  font-size: 36px;
  margin-bottom: 14px;
}

.cert-item__name {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
}

@media (max-width: 768px) {
  .cert-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
  .cert-grid { grid-template-columns: 1fr; }
}

/* ================================================
   Hero 文字渐入动画（消除抖动）
   ================================================ */
.hero__content {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.hero__content--visible {
  opacity: 1;
  transform: translateY(0);
}

/* ================================================
   Hero 增强：科技感背景 + 网格线
   ================================================ */
.hero__grid-lines {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(67,133,245,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(67,133,245,0.06) 1px, transparent 1px);
  background-size: 60px 60px;
  animation: gridDrift 30s linear infinite;
  pointer-events: none;
}

@keyframes gridDrift {
  0% { transform: translate(0, 0); }
  100% { transform: translate(60px, 60px); }
}

/* 扫描线动画 */
.hero__scan-line {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(67,133,245,0.5), transparent);
  animation: scanDown 4s ease-in-out infinite;
  pointer-events: none;
}

@keyframes scanDown {
  0% { top: 0; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}

/* ================================================
   Hero 科技感动画：星光闪烁 + 霓虹拖尾
   ================================================ */
.hero__neon-trail,
.scifi-trail {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
}

.scifi-stars {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.page-hero .scifi-stars {
  z-index: 0;
}

.page-hero .scifi-trail {
  z-index: 2;
}

.solution-detail__metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 28px;
}

.solution-detail__metric {
  padding: 20px;
  background: var(--light);
  border-radius: var(--radius-lg);
  text-align: center;
  position: relative;
  overflow: hidden;
  border: 1px solid transparent;
  transition: transform 0.4s cubic-bezier(.23, 1, .32, 1),
              box-shadow 0.4s cubic-bezier(.23, 1, .32, 1),
              border-color 0.4s ease;
}

/* 顶部渐变边框装饰条 */
.solution-detail__metric::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--metric-accent, var(--primary)), var(--metric-accent-alt, var(--primary)));
  background-size: 200% 100%;
  opacity: 0;
  transition: opacity 0.35s ease, background-position 0.6s ease;
}

.solution-detail__metric:nth-child(1) { --metric-accent: #4385F5; --metric-accent-alt: #6BA3F7; }
.solution-detail__metric:nth-child(2) { --metric-accent: #34A853; --metric-accent-alt: #5EC07A; }
.solution-detail__metric:nth-child(3) { --metric-accent: #FF6B03; --metric-accent-alt: #FF924D; }

.solution-detail__metric:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(67, 133, 245, 0.10), 0 6px 16px rgba(0, 0, 0, 0.06);
  border-color: rgba(67, 133, 245, 0.12);
}

.solution-detail__metric:hover::before {
  opacity: 1;
  background-position: 100% 0;
}

.solution-detail__metric-value {
  font-size: clamp(18px, 4vw, 28px);
  font-weight: 900;
  color: var(--primary);
  line-height: 1.1;
}

.solution-detail__metric-label {
  font-size: clamp(10px, 2.5vw, 12px);
  color: var(--text-secondary);
  margin-top: 6px;
}

@media (max-width: 900px) {
  .solution-detail {
    grid-template-columns: 1fr;
  }
  
  .solution-detail__visual {
    aspect-ratio: auto;
    min-height: 320px;
  }
  
  .solution-detail__visual > svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .solution-detail__visual-stats {
    padding: 32px 24px;
  }

  .solution-detail__visual-value {
    font-size: clamp(36px, 12vw, 72px);
  }

  .solution-detail__visual-label {
    font-size: clamp(14px, 4vw, 18px);
  }
}

@media (max-width: 480px) {
  .solution-detail__metrics {
    gap: 8px;
  }

  .solution-detail__metric {
    padding: 12px 8px;
  }

  .solution-detail__metric-value {
    font-size: 16px;
  }

  .solution-detail__metric-label {
    font-size: 10px;
  }
  
  .solution-detail__visual-stats {
    padding: 24px 16px;
  }

  .solution-detail__visual-value {
    font-size: 32px;
  }

  .solution-detail__visual-label {
    font-size: 14px;
  }

  .solution-detail__visual-label + .solution-detail__visual-value {
    margin-top: 16px;
  }
}

/* === 案例地图 === */
.cases-map {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

@media (max-width: 900px) {
  .cases-map {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .cases-map {
    grid-template-columns: 1fr;
  }
}

/* === 产品网格 === */
.products-grid-large {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.product-card {
  background: #fff;
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.06);
  transition: var(--transition);
}

.product-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-card);
}

.product-card__image {
  height: 160px;
  background: linear-gradient(135deg, rgba(67,133,245,0.05), rgba(52,168,83,0.05));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 56px;
}

.product-card__body {
  padding: 24px;
}

.product-card__name {
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 6px;
}

.product-card__type {
  font-size: 12px;
  color: var(--primary);
  font-weight: 600;
  margin-bottom: 12px;
}

.product-card__features {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.7;
}

@media (max-width: 1024px) {
  .products-grid-large {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .products-grid-large {
    grid-template-columns: 1fr;
  }
}

/* === 技术资质 === */
.cert-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.cert-item {
  padding: 24px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-lg);
  text-align: center;
  transition: var(--transition);
}

.cert-item:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.15);
}

.cert-item__icon {
  font-size: 36px;
  margin-bottom: 12px;
}

.cert-item__name {
  font-size: 14px;
  font-weight: 600;
  color: #333 !important;
}

@media (max-width: 900px) {
  .cert-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* === 关于我们 === */
.about-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

.about-section__visual {
  border-radius: var(--radius-xl);
  overflow: hidden;
  aspect-ratio: 4/3;
  background: linear-gradient(135deg, var(--dark), var(--dark-2));
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.about-section__visual-text {
  font-size: 100px;
  opacity: 0.1;
}

.about-values {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 40px;
}

.about-value {
  padding: 24px;
  background: var(--light);
  border-radius: var(--radius-lg);
  transition: var(--transition);
}

.about-value:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.about-value__icon {
  font-size: 28px;
  margin-bottom: 12px;
}

.about-value__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 6px;
}

.about-value__desc {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.7;
}

.about-section__contact {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:24px;
    margin:0 auto;
}

@media (max-width: 900px) {
  .about-section {
    grid-template-columns: 1fr;
  }
  
  .about-values {
    grid-template-columns: 1fr;
  }
  
.about-section__contact {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:24px;
    margin:0 auto;
}
}

@media (max-width: 600px) {
  .cases-map {
    grid-template-columns: 1fr;
  }
  
.about-section__contact {
    display:grid;
    grid-template-columns:repeat(1,1fr);
    gap:24px;
    margin:0 auto;
}
}

/* === 动画类 === */
.fade-in {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

.fade-in-left {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in-left.visible {
  opacity: 1;
  transform: translateX(0);
}

.fade-in-right {
  opacity: 0;
  transform: translateX(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in-right.visible {
  opacity: 1;
  transform: translateX(0);
}

.stagger-1 { transition-delay: 0.1s; }
.stagger-2 { transition-delay: 0.2s; }
.stagger-3 { transition-delay: 0.3s; }
.stagger-4 { transition-delay: 0.4s; }
.stagger-5 { transition-delay: 0.5s; }
.stagger-6 { transition-delay: 0.6s; }

/* === 深色模式适配 === */
@media (prefers-color-scheme: dark) {
  body {
    background: #0A0A14;
    color: #E8E8F0;
  }
  
  /* 浅色内容区在暗色模式下转为深色主题，保证文字可读性 */
  .content-section:not(.content-section--light) {
    background: var(--dark);
    color: #fff;
  }

  .content-section--gradient {
    background: linear-gradient(135deg, rgba(67,133,245,0.08) 0%, rgba(52,168,83,0.08) 100%), var(--dark);
  }

  .content-section:not(.content-section--light) .section__title,
  .content-section:not(.content-section--light) .section__desc,
  .content-section:not(.content-section--light) .section__label,
  .content-section:not(.content-section--light) .solution-detail__title,
  .content-section:not(.content-section--light) .solution-detail__desc,
  .content-section:not(.content-section--light) .solution-detail__tech-item,
  .content-section:not(.content-section--light) .solution-detail__metric-label,
  .content-section:not(.content-section--light) .feature-card__title,
  .content-section:not(.content-section--light) .feature-card__desc,
  .content-section:not(.content-section--light) .product-card__name,
  .content-section:not(.content-section--light) .product-card__features,
  .content-section:not(.content-section--light) .butler-card__name,
  .content-section:not(.content-section--light) .butler-card__features,
  .content-section:not(.content-section--light) .case-card__title,
  .content-section:not(.content-section--light) .case-card__desc,
  .content-section:not(.content-section--light) .case-card__metric-label,
  .content-section:not(.content-section--light) .case-card__location,
  .content-section:not(.content-section--light) .scenario-card__title,
  .content-section:not(.content-section--light) .scenario-card__needs,
  .content-section:not(.content-section--light) .tech-panel__title,
  .content-section:not(.content-section--light) .tech-panel__desc,
  .content-section:not(.content-section--light) .tech-panel__list li,
  .content-section:not(.content-section--light) .arch-layer__name,
  .content-section:not(.content-section--light) .arch-layer__sub,
  .content-section:not(.content-section--light) .arch-layer__feature,
  .content-section:not(.content-section--light) .embodied__title,
  .content-section:not(.content-section--light) .embodied__desc,
  .content-section:not(.content-section--light) .embodied__list-item,
  .content-section:not(.content-section--light) .cert-item__name,
  .content-section:not(.content-section--light) p[style*="color:var(--text-secondary)"],
  .content-section:not(.content-section--light) p[style*="color:var(--text-light)"] {
    color: rgba(255, 255, 255, 0.92) !important;
  }
  
  .content-section:not(.content-section--light) .embodied__list-item:hover {
    color: rgba(255, 255, 255, 0.95) !important;
  }

  .content-section:not(.content-section--light) .section__title .highlight {
    background: linear-gradient(135deg, #6BA3FF, #6FD49A);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  .content-section:not(.content-section--light) .section__label::before,
  .content-section:not(.content-section--light) .section__label::after {
    background: rgba(255, 255, 255, 0.4);
  }

  .content-section:not(.content-section--light) .section__label {
    color: rgba(255, 255, 255, 0.7) !important;
  }

  /* 深色内容区卡片背景统一 */
  .content-section:not(.content-section--light) .butler-card,
  .content-section:not(.content-section--light) .case-card,
  .content-section:not(.content-section--light) .product-card,
  .content-section:not(.content-section--light) .scenario-card {
    background: rgba(255,255,255,0.03);
    border-color: rgba(255,255,255,0.08);
  }

  .content-section:not(.content-section--light) .feature-card {
    background: rgba(255,255,255,0.02);
    border-color: rgba(255,255,255,0.06);
  }

  .content-section:not(.content-section--light) .solution-detail__metric {
    background: rgba(255,255,255,0.04);
  }
  
  /* 技术面板 hover 适配深色背景 */
  .content-section:not(.content-section--light) .tech-panel__list li:hover {
    background: rgba(255,255,255,0.08);
  }

  /* 显式深色区块保持原有卡片样式 */
  .content-section--dark .feature-card {
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.08);
  }

  .content-section--dark .feature-card__title { color: #fff !important; }
  .content-section--dark .feature-card__desc { color: rgba(255,255,255,0.6) !important; }
}

/* === 减少动画偏好 === */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }

  .hero__particles,
  .embodied-illustration * {
    animation: none;
  }
}

/* === 工具类 === */
.text-center { text-align: center; }
.text-left { text-align: left; }
.mb-4 { margin-bottom: 4px; }
.mb-8 { margin-bottom: 8px; }
.mb-12 { margin-bottom: 12px; }
.mb-16 { margin-bottom: 16px; }
.mb-20 { margin-bottom: 20px; }
.mb-24 { margin-bottom: 24px; }
.mb-32 { margin-bottom: 32px; }
.mb-40 { margin-bottom: 40px; }
.mb-48 { margin-bottom: 48px; }
.mb-60 { margin-bottom: 60px; }
.mt-4 { margin-top: 4px; }
.mt-8 { margin-top: 8px; }
.mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; }
.mt-20 { margin-top: 20px; }
.mt-24 { margin-top: 24px; }
.mt-32 { margin-top: 32px; }
.mt-48 { margin-top: 48px; }

/* ================================================
   SVG 图标系统 - 统一替换 emoji
   使用 SVG Sprite 方式引用，确保跨浏览器一致性
   ================================================ */

/* SVG 图标基础类 */
.icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  vertical-align: middle;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* 图标尺寸变体 */
.icon--xs { font-size: 14px; }
.icon--sm { font-size: 18px; }
.icon--md { font-size: 24px; }
.icon--lg { font-size: 32px; }
.icon--xl { font-size: 40px; }
.icon--2xl { font-size: 56px; }
.icon--3xl { font-size: 72px; }
.icon--4xl { font-size: 96px; }
.icon--5xl { font-size: 120px; }

/* 各容器图标尺寸适配 */
.stat-card__icon .icon,
.butler-card__icon .icon,
.solution-card__icon .icon,
.feature-card__icon .icon,
.scenario-card__icon .icon,
.product-item__icon .icon,
.cert-item__icon .icon,
.arch-layer__icon .icon,
.about-value__icon .icon {
  width: 1em;
  height: 1em;
}

.footer__contact-icon .icon {
  width: 1.1em;
  height: 1.1em;
}

.case-card__location .icon {
  width: 1em;
  height: 1em;
  margin-right: 4px;
  vertical-align: text-bottom;
}

.nav__phone .icon {
  width: 0.95em;
  height: 0.95em;
  vertical-align: -1px;
  margin-right: 2px;
  padding-top: 3px;
}

/* 装饰性大图标（低透明度背景） */
.decorative-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.decorative-icon .icon {
  opacity: inherit;
}

/* ================================================
   具身建筑智能 - 核心架构展示区
   ================================================ */

/* 布局 */
.embodied-showcase {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 4vw, 56px);
  align-items: center;
}

.embodied__visual {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: linear-gradient(135deg, #1A2B4A, #0D1525);
  box-shadow: var(--shadow-card), 0 0 60px rgba(67,133,245,0.08);
  transition: transform var(--transition-slow), box-shadow var(--transition-slow);
}

.embodied__visual:hover {
  transform: translateY(-6px) scale(1.01);
  box-shadow: var(--shadow-card), 0 0 80px rgba(139,92,246,0.15), 0 20px 80px rgba(0,0,0,0.25);
}

.embodied__visual-tag {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 5px 14px;
  background: rgba(67,133,245,0.22);
  color: #4385F5;
  font-size: 12px;
  font-weight: 600;
  border-radius: 50px;
  z-index: 20;
  letter-spacing: 0.5px;
  backdrop-filter: blur(4px);
}

.embodied-illustration {
  width: 100%;
  height: auto;
  display: block;
}

/* 右侧文案区 */
.embodied__content {
  padding: 12px 8px;
}

.embodied__content-tag {
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  font-weight: 600;
  color: #FF6B03;
  margin-bottom: 16px;
  letter-spacing: 0.3px;
}

.embodied__title {
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 800;
  line-height: 1.25;
  color: var(--text);
  margin-bottom: 18px;
  letter-spacing: -0.02em;
}

.embodied__desc {
  font-size: 15px;
  line-height: 1.75;
  color: var(--text-secondary);
  margin-bottom: 28px;
}

.embodied__list {
  list-style: none;
  padding: 0;
  margin: 0 0 36px 0;
}

.embodied__list-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--text-secondary);
  margin-bottom: 14px;
  transition: transform var(--transition-fast);
}

.embodied__list-item:hover {
  transform: translateX(4px);
  color: var(--text);
}

.embodied__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 6px;
}

.embodied__cta {
  display: inline-flex;
  align-items: center;
}

/* 响应式 */
@media (max-width: 900px) {
  .embodied-showcase {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .embodied__visual {
    max-width: 520px;
    margin: 0 auto;
  }
  .embodied__content {
    text-align: center;
    padding: 0 8px;
  }
  .embodied__content-tag {
    justify-content: center;
  }
  .embodied__cta {
    justify-content: center;
  }
}


/* ========== 具身建筑智能 SVG 动画 ========== */

/* 背景网格漂移 */
@keyframes ebGridDrift {
  0%, 100% { opacity: 0.03; }
  50% { opacity: 0.07; }
}
.eb-grid { animation: ebGridDrift 7s ease-in-out infinite; }

/* 建筑轮廓微呼吸 */
@keyframes ebBuildingBreath {
  0%, 100% { stroke-opacity: 0.06; fill-opacity: 0.025; }
  50% { stroke-opacity: 0.11; fill-opacity: 0.04; }
}
.eb-building-outline { animation: ebBuildingBreath 6s ease-in-out infinite; }

/* AI大脑光晕脉冲 */
@keyframes ebBrainPulse {
  0%, 100% { r: 75; opacity: 1; }
  50% { r: 82; opacity: 0.65; }
}
#eBrainGlow + circle,
[class*="eb-brain-center"] > [fill*="url(#eBrainGlow)"],
.eb-brain-center > circle:first-of-type {
  animation: ebBrainPulse 4s ease-in-out infinite;
}

/* 大脑外圈旋转感（通过缩放+透明度模拟） */
@keyframes ebOuterRing {
  0%, 100% { stroke-opacity: 0.22; transform-origin: 260px 110px; }
  50% { stroke-opacity: 0.38; }
}
.eb-brain-center > circle[stroke-opacity="0.25"] { animation: ebOuterRing 5s ease-in-out infinite; }

@keyframes ebInnerRing {
  0%, 100% { stroke-opacity: 0.3; }
  50% { stroke-opacity: 0.5; }
}
.eb-brain-center > circle[stroke-opacity="0.35"] { animation: ebInnerRing 4s ease-in-out infinite; }

/* 脑回路绘制动画 */
@keyframes ebCircuitDrawL1 {
  0% { stroke-dasharray: 0 60; stroke-dashoffset: 0; }
  50%, 100% { stroke-dasharray: 60 60; stroke-dashoffset: 0; }
}
.eb-circuit-l1 { animation: ebCircuitDrawL1 4s ease-in-out infinite; }

@keyframes ebCircuitDrawR1 {
  0% { stroke-dasharray: 0 60; stroke-dashoffset: 0; }
  45%, 100% { stroke-dasharray: 60 60; stroke-dashoffset: 0; }
}
.eb-circuit-r1 { animation: ebCircuitDrawR1 4s ease-in-out infinite 0.3s; }

@keyframes ebCircuitDrawL2 {
  0% { stroke-dasharray: 0 55; stroke-dashoffset: 0; }
  55%, 100% { stroke-dasharray: 55 55; stroke-dashoffset: 0; }
}
.eb-circuit-l2 { animation: ebCircuitDrawL2 4.5s ease-in-out infinite 0.6s; }

@keyframes ebCircuitDrawR2 {
  0% { stroke-dasharray: 0 55; stroke-dashoffset: 0; }
  50%, 100% { stroke-dasharray: 55 55; stroke-dashoffset: 0; }
}
.eb-circuit-r2 { animation: ebCircuitDrawR2 4.5s ease-in-out infinite 0.9s; }

/* 中枢连接线闪烁 */
@keyframes ebMidFlash {
  0%, 100% { stroke-opacity: 0.35; }
  50% { stroke-opacity: 0.7; }
}
.eb-circuit-mid { animation: ebMidFlash 3s ease-in-out infinite; }

/* 核心节点脉动 */
@keyframes ebCoreBeat {
  0%, 100% { r: 5; fill-opacity: 0.7; }
  50% { r: 6.5; fill-opacity: 0.9; }
}
.eb-core-node { animation: ebCoreBeat 2s ease-in-out infinite; }

/* 四周子节点微动 */
@keyframes ebNodeFloatNW {
  0%, 100% { transform: translate(245px, 92px); opacity: 0.45; }
  33% { transform: translate(242px, 89px); opacity: 0.6; }
  66% { transform: translate(247px, 94px); opacity: 0.5; }
}
.eb-node-nw { animation: ebNodeFloatNW 5s ease-in-out infinite; }

@keyframes ebNodeFloatNE {
  0%, 100% { transform: translate(275px, 92px); opacity: 0.45; }
  33% { transform: translate(278px, 88px); opacity: 0.58; }
  66% { transform: translate(273px, 94px); opacity: 0.48; }
}
.eb-node-ne { animation: ebNodeFloatNE 5s ease-in-out infinite 0.8s; }

@keyframes ebNodeFloatSW {
  0%, 100% { transform: translate(240px, 116px); opacity: 0.45; }
  33% { transform: translate(238px, 119px); opacity: 0.55; }
  66% { transform: translate(242px, 114px); opacity: 0.5; }
}
.eb-node-sw { animation: ebNodeFloatSW 5s ease-in-out infinite 1.6s; }

@keyframes ebNodeFloatSE {
  0%, 100% { transform: translate(280px, 116px); opacity: 0.45; }
  33% { transform: translate(282px, 113px); opacity: 0.55; }
  66% { transform: translate(278px, 118px); opacity: 0.5; }
}
.eb-node-se { animation: ebNodeFloatSE 5s ease-in-out infinite 2.2s; }

/* IoT身体节点悬浮效果（使用opacity避免覆盖SVG transform） */
@keyframes ebBodyNodeFloat {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.92; }
}
.eb-body-node { animation: ebBodyNodeFloat 4s ease-in-out infinite; }
.eb-node-light { animation-delay: 0.5s; }
.eb-node-hvac { animation-delay: 1s; }
.eb-node-power { animation-delay: 1.5s; }
.eb-node-security { animation-delay: 2s; }
.eb-node-meter { animation-delay: 2.5s; }

/* 图标脉冲 - 白色图标 */
@keyframes ebIconPulseBlue {
  0%, 100% { stroke-opacity: 1; stroke-width: 1.5; }
  50% { stroke-opacity: 0.6; stroke-width: 2; }
}
.eb-icon-pulse { animation: ebIconPulseBlue 3s ease-in-out infinite; }

@keyframes ebIconPulseGreen {
  0%, 100% { stroke-opacity: 1; stroke-width: 1.5; }
  50% { stroke-opacity: 0.6; stroke-width: 2; }
}
.eb-icon-pulse-green { animation: ebIconPulseGreen 3s ease-in-out infinite 0.5s; }

@keyframes ebIconPulseOrange {
  0%, 100% { stroke-opacity: 1; stroke-width: 1.5; }
  50% { stroke-opacity: 0.6; stroke-width: 2; }
}
.eb-icon-pulse-orange { animation: ebIconPulseOrange 3s ease-in-out infinite 1s; }

/* 闪电闪烁 - 白色填充 */
@keyframes ebBoltFlash {
  0%, 82%, 100% { fill-opacity: 1; filter: none; }
  88% { fill-opacity: 0.4; }
  94% { fill-opacity: 1; filter: url(#eGlowPurple); }
}
.eb-bolt-flash { animation: ebBoltFlash 3s ease-in-out infinite; }

/* 盾牌脉冲 - 白色描边 */
@keyframes ebShieldPulse {
  0%, 100% { stroke-opacity: 1; stroke-width: 1.5; }
  50% { stroke-opacity: 0.6; stroke-width: 2; }
}
.eb-shield-pulse { animation: ebShieldPulse 3.5s ease-in-out infinite 1.2s; }

/* 图表折线 - 白色 */
@keyframes ebChartPulse {
  0%, 100% { stroke-opacity: 1; }
  50% { stroke-opacity: 0.55; }
}
.eb-chart-pulse { animation: ebChartPulse 3s ease-in-out infinite 1.5s; }

/* 感应波纹扩散 - 增强可见度 */
@keyframes ebSenseWaveExpand {
  0% { r: 22; stroke-opacity: 0.5; stroke-width: 1.3; }
  100% { r: 40; stroke-opacity: 0.05; stroke-width: 0.4; }
}
.eb-sense-wave { animation: ebSenseWaveExpand 2.8s ease-out infinite; }

/* 第二条感应波纹（错开相位） */
@keyframes ebSenseWaveExpand2 {
  0% { r: 22; stroke-opacity: 0.38; stroke-width: 1; }
  100% { r: 38; stroke-opacity: 0.04; stroke-width: 0.3; }
}
.eb-sense-wave2 { animation: ebSenseWaveExpand2 2.8s ease-out infinite 1.5s; }

/* 照明灯泡光芒射线闪烁 */
@keyframes ebRayV {
  0%, 100% { stroke-opacity: 0.35; y1: -11; y2: -14; }
  50% { stroke-opacity: 0.85; y1: -12.5; y2: -16; }
}
.eb-ray-v { animation: ebRayV 2s ease-in-out infinite; }

@keyframes ebRayL {
  0%, 100% { stroke-opacity: 0.28; x1: -8; y1: -6; x2: -11; y2: -8; }
  50% { stroke-opacity: 0.7; x1: -9.5; y1: -7.5; x2: -13; y2: -10; }
}
.eb-ray-l { animation: ebRayL 2s ease-in-out infinite 0.33s; }

@keyframes ebRayR {
  0%, 100% { stroke-opacity: 0.28; x1: 8; y1: -6; x2: 11; y2: -8; }
  50% { stroke-opacity: 0.7; x1: 9.5; y1: -7.5; x2: 13; y2: -10; }
}
.eb-ray-r { animation: ebRayR 2s ease-in-out infinite 0.66s; }

/* 暖通温度弧线流动 */
@keyframes ebTempArcFlow {
  0%, 100% { stroke-dasharray: 16 20; stroke-dashoffset: 0; stroke-opacity: 0.55; }
  50% { stroke-opacity: 1; }
}
.eb-temp-arc { animation: ebTempArcFlow 3s ease-in-out infinite; stroke-dasharray: 16 20; }

/* 用电波纹扩散 */
@keyframes ebPowerWaveExpand {
  0% { r: 17; stroke-opacity: 0.38; stroke-width: 1; }
  100% { r: 30; stroke-opacity: 0; stroke-width: 0.25; }
}
.eb-power-wave { animation: ebPowerWaveExpand 2.5s ease-out infinite; }

/* 安防对勾闪烁 */
@keyframes ebCheckFlashAnim {
  0%, 80%, 100% { stroke-opacity: 1; }
  90% { stroke-opacity: 0.45; }
}
.eb-check-flash { animation: ebCheckFlashAnim 3s ease-in-out infinite; }

/* 能耗柱状图跳动 */
@keyframes ebBarAPulse {
  0%, 100% { height: 3px; y: 3px; fill-opacity: 0.55; }
  50% { height: 5px; y: 1px; fill-opacity: 0.85; }
}
.eb-bar-a { animation: ebBarAPulse 2.5s ease-in-out infinite; }

@keyframes ebBarBPulse {
  0%, 100% { height: 5px; y: 1px; fill-opacity: 0.7; }
  50% { height: 7px; y: -1px; fill-opacity: 1; }
}
.eb-bar-b { animation: ebBarBPulse 2.5s ease-in-out infinite 0.4s; }

@keyframes ebBarCPulse {
  0%, 100% { height: 4px; y: 2px; fill-opacity: 0.58; }
  50% { height: 6px; y: 0; fill-opacity: 0.88; }
}
.eb-bar-c { animation: ebBarCPulse 2.5s ease-in-out infinite 0.8s; }
@keyframes ebFlowDash {
  0% { stroke-dashoffset: 30; }
  100% { stroke-dashoffset: 0; }
}
.eb-flow-to-1, .eb-flow-to-2, .eb-flow-to-3,
.eb-flow-to-4, .eb-flow-to-5, .eb-flow-to-6 {
  stroke-dasharray: 8 12;
  animation: ebFlowDash 2.5s linear infinite;
}
.eb-flow-to-2 { animation-duration: 2s; }
.eb-flow-to-3 { animation-duration: 2.8s; animation-direction: reverse; }
.eb-flow-to-4 { animation-duration: 3s; }
.eb-flow-to-5 { animation-duration: 2.2s; animation-direction: reverse; }
.eb-flow-to-6 { animation-duration: 1.8s; }

/* 反向数据流（虚线） */
@keyframes ebFlowBackDash {
  0% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -12; }
}
.eb-flow-back-2 { animation: ebFlowBackDash 2.5s linear infinite; }

/* 数据流粒子沿路径移动 - 提高可见度 */
@keyframes ebFDot1aMove {
  0% { cx: 238; cy: 135; opacity: 0; }
  10% { opacity: 0.8; }
  65% { cx: 138; cy: 210; opacity: 0.6; }
  100% { cx: 100; cy: 248; opacity: 0.2; }
}
.eb-fd-1a { animation: ebFDot1aMove 3s ease-in infinite; }

@keyframes ebFDot1bMove {
  0% { cx: 215; cy: 148; opacity: 0; }
  15% { opacity: 0.7; }
  70% { cx: 160; cy: 198; opacity: 0.5; }
  100% { cx: 100; cy: 248; opacity: 0.15; }
}
.eb-fd-1b { animation: ebFDot1bMove 3s ease-in infinite 0.5s; }

@keyframes ebFDot1cMove {
  0% { cx: 195; cy: 162; opacity: 0; }
  20% { opacity: 0.6; }
  75% { cx: 130; cy: 220; opacity: 0.45; }
  100% { cx: 100; cy: 248; opacity: 0.1; }
}
.eb-fd-1c { animation: ebFDot1cMove 3s ease-in infinite 1s; }

/* 照明连接线粒子 */
@keyframes ebFDot2aMove {
  0% { cx: 250; cy: 146; opacity: 0; }
  15% { opacity: 0.8; }
  70% { cx: 233; cy: 175; opacity: 0.6; }
  100% { cx: 222; cy: 188; opacity: 0.2; }
}
.eb-fd-2a { animation: ebFDot2aMove 2.2s ease-in infinite; }

@keyframes ebFDot2bMove {
  0% { cx: 245; cy: 155; opacity: 0; }
  20% { opacity: 0.7; }
  75% { cx: 228; cy: 178; opacity: 0.5; }
  100% { cx: 222; cy: 188; opacity: 0.15; }
}
.eb-fd-2b { animation: ebFDot2bMove 2.2s ease-in infinite 0.6s; }

@keyframes ebFDot3aMove {
  0% { cx: 278; cy: 138; opacity: 0; }
  10% { opacity: 0.8; }
  65% { cx: 305; cy: 172; opacity: 0.6; }
  100% { cx: 320; cy: 196; opacity: 0.2; }
}
.eb-fd-3a { animation: ebFDot3aMove 2.8s ease-in infinite; }

@keyframes ebFDot3bMove {
  0% { cx: 290; cy: 150; opacity: 0; }
  15% { opacity: 0.7; }
  72% { cx: 310; cy: 178; opacity: 0.5; }
  100% { cx: 320; cy: 196; opacity: 0.15; }
}
.eb-fd-3b { animation: ebFDot3bMove 2.8s ease-in infinite 0.5s; }

@keyframes ebFDot3cMove {
  0% { cx: 300; cy: 162; opacity: 0; }
  20% { opacity: 0.6; }
  78% { cx: 315; cy: 186; opacity: 0.45; }
  100% { cx: 320; cy: 196; opacity: 0.1; }
}
.eb-fd-3c { animation: ebFDot3cMove 2.8s ease-in infinite 1s; }

/* 用电连接线粒子 */
@keyframes ebFDot4aMove {
  0% { cx: 238; cy: 150; opacity: 0; }
  12% { opacity: 0.8; }
  60% { cx: 168; cy: 235; opacity: 0.6; }
  100% { cx: 100; cy: 320; opacity: 0.2; }
}
.eb-fd-4a { animation: ebFDot4aMove 3s ease-in infinite; }

@keyframes ebFDot4bMove {
  0% { cx: 218; cy: 168; opacity: 0; }
  18% { opacity: 0.7; }
  68% { cx: 148; cy: 252; opacity: 0.5; }
  100% { cx: 100; cy: 320; opacity: 0.15; }
}
.eb-fd-4b { animation: ebFDot4bMove 3s ease-in infinite 0.6s; }

@keyframes ebFDot4cMove {
  0% { cx: 198; cy: 190; opacity: 0; }
  25% { opacity: 0.6; }
  75% { cx: 135; cy: 278; opacity: 0.45; }
  100% { cx: 100; cy: 320; opacity: 0.1; }
}
.eb-fd-4c { animation: ebFDot4cMove 3s ease-in infinite 1.2s; }

/* 安防连接线粒子 */
@keyframes ebFDot5aMove {
  0% { cx: 290; cy: 140; opacity: 0; }
  12% { opacity: 0.8; }
  60% { cx: 355; cy: 205; opacity: 0.6; }
  100% { cx: 410; cy: 270; opacity: 0.2; }
}
.eb-fd-5a { animation: ebFDot5aMove 2.5s ease-in infinite; }

@keyframes ebFDot5bMove {
  0% { cx: 310; cy: 155; opacity: 0; }
  18% { opacity: 0.7; }
  68% { cx: 370; cy: 218; opacity: 0.5; }
  100% { cx: 410; cy: 270; opacity: 0.15; }
}
.eb-fd-5b { animation: ebFDot5bMove 2.5s ease-in infinite 0.5s; }

@keyframes ebFDot5cMove {
  0% { cx: 330; cy: 172; opacity: 0; }
  25% { opacity: 0.6; }
  75% { cx: 385; cy: 240; opacity: 0.45; }
  100% { cx: 410; cy: 270; opacity: 0.1; }
}
.eb-fd-5c { animation: ebFDot5cMove 2.5s ease-in infinite 1s; }

/* 能耗连接线粒子 */
@keyframes ebFDot6aMove {
  0% { cx: 260; cy: 162; opacity: 0; }
  15% { opacity: 0.8; }
  60% { cx: 260; cy: 235; opacity: 0.6; }
  100% { cx: 260; cy: 308; opacity: 0.2; }
}
.eb-fd-6a { animation: ebFDot6aMove 2s ease-in infinite; }

@keyframes ebFDot6bMove {
  0% { cx: 260; cy: 175; opacity: 0; }
  25% { opacity: 0.7; }
  70% { cx: 260; cy: 248; opacity: 0.5; }
  100% { cx: 260; cy: 308; opacity: 0.15; }
}
.eb-fd-6b { animation: ebFDot6bMove 2s ease-in infinite 0.5s; }

/* 能力标签环呼吸 - 增强可见度 */
@keyframes ebCapLabelPulse {
  0%, 100% { fill-opacity: 0.1; stroke-opacity: 0.28; }
  50% { fill-opacity: 0.18; stroke-opacity: 0.5; }
}
.eb-capability-ring rect { animation: ebCapLabelPulse 4s ease-in-out infinite; }
.eb-capability-ring g:nth-child(2) rect { animation-delay: 0.5s; }
.eb-capability-ring g:nth-child(3) rect { animation-delay: 1s; }
.eb-capability-ring g:nth-child(4) rect { animation-delay: 1.5s; }

/* 浮动粒子 */
@keyframes ebParticleFloat1 {
  0%, 100% { transform: translate(0, 0); opacity: 0.3; }
  33% { transform: translate(-8px, -12px); opacity: 0.5; }
  66% { transform: translate(5px, -6px); opacity: 0.35; }
}
.eb-p1 { animation: ebParticleFloat1 7s ease-in-out infinite; }

@keyframes ebParticleFloat2 {
  0%, 100% { transform: translate(0, 0); opacity: 0.25; }
  33% { transform: translate(10px, -8px); opacity: 0.45; }
  66% { transform: translate(-4px, -14px); opacity: 0.3; }
}
.eb-p2 { animation: ebParticleFloat2 8s ease-in-out infinite 1s; }

@keyframes ebParticleFloat3 {
  0%, 100% { transform: translate(0, 0); opacity: 0.25; }
  33% { transform: translate(6px, -10px); opacity: 0.4; }
  66% { transform: translate(-3px, -5px); opacity: 0.28; }
}
.eb-p3 { animation: ebParticleFloat3 6s ease-in-out infinite 2s; }

@keyframes ebParticleFloat4 {
  0%, 100% { transform: translate(0, 0); opacity: 0.2; }
  33% { transform: translate(-7px, -9px); opacity: 0.38; }
  66% { transform: translate(4px, -4px); opacity: 0.25; }
}
.eb-p4 { animation: ebParticleFloat4 7.5s ease-in-out infinite 0.5s; }

@keyframes ebParticleFloat5 {
  0%, 100% { transform: translate(0, 0); opacity: 0.2; }
  33% { transform: translate(-5px, -8px); opacity: 0.35; }
  66% { transform: translate(6px, -3px); opacity: 0.22; }
}
.eb-p5 { animation: ebParticleFloat5 6.5s ease-in-out infinite 3s; }

@keyframes ebParticleFloat6 {
  0%, 100% { transform: translate(0, 0); opacity: 0.2; }
  33% { transform: translate(8px, -10px); opacity: 0.37; }
  66% { transform: translate(-5px, -6px); opacity: 0.23; }
}
.eb-p6 { animation: ebParticleFloat6 8s ease-in-out infinite 1.5s; }

@keyframes ebParticleFloat7 {
  0%, 100% { transform: translate(0, 0); opacity: 0.2; }
  33% { transform: translate(-6px, -7px); opacity: 0.33; }
  66% { transform: translate(4px, -4px); opacity: 0.21; }
}
.eb-p7 { animation: ebParticleFloat7 7s ease-in-out infinite 2.5s; }

@keyframes ebParticleFloat8 {
  0%, 100% { transform: translate(0, 0); opacity: 0.25; }
  33% { transform: translate(7px, -11px); opacity: 0.42; }
  66% { transform: translate(-4px, -5px); opacity: 0.28; }
}
.eb-p8 { animation: ebParticleFloat8 6s ease-in-out infinite 3.5s; }

/* ========== IoT节点持续动画（增强版） ========== */

/* 节点外圈光晕呼吸 - 高可见度 */
@keyframes ebNodeGlowRing {
  0%, 100% { stroke-opacity: 0.5; r: 26; }
  50% { stroke-opacity: 0.75; r: 29; }
}
.eb-node-glow-ring { animation: ebNodeGlowRing 3s ease-in-out infinite; }

@keyframes ebNodeGlowRingGreen {
  0%, 100% { stroke-opacity: 0.45; r: 28; }
  50% { stroke-opacity: 0.7; r: 31; }
}
.eb-node-glow-ring-green { animation: ebNodeGlowRingGreen 3s ease-in-out infinite 0.4s; }

@keyframes ebNodeGlowRingOrange {
  0%, 100% { stroke-opacity: 0.45; r: 26; }
  50% { stroke-opacity: 0.7; r: 29; }
}
.eb-node-glow-ring-orange { animation: ebNodeGlowRingOrange 3s ease-in-out infinite 0.8s; }

@keyframes ebNodeGlowRingPurple {
  0%, 100% { stroke-opacity: 0.45; r: 24; }
  50% { stroke-opacity: 0.7; r: 27; }
}
.eb-node-glow-ring-purple { animation: ebNodeGlowRingPurple 3s ease-in-out infinite 1.2s; }

@keyframes ebNodeGlowRingBlue2 {
  0%, 100% { stroke-opacity: 0.45; r: 24; }
  50% { stroke-opacity: 0.7; r: 27; }
}
.eb-node-glow-ring-blue2 { animation: ebNodeGlowRingBlue2 3s ease-in-out infinite 1.6s; }

@keyframes ebNodeGlowRingGreen2 {
  0%, 100% { stroke-opacity: 0.4; r: 22; }
  50% { stroke-opacity: 0.65; r: 25; }
}
.eb-node-glow-ring-green2 { animation: ebNodeGlowRingGreen2 3s ease-in-out infinite 2s; }

/* 节点旋转环 - 持续旋转 */
@keyframes ebNodeSpinRing {
  0% { transform: rotate(0deg); transform-origin: center; }
  100% { transform: rotate(360deg); transform-origin: center; }
}
.eb-node-spin-ring { animation: ebNodeSpinRing 8s linear infinite; }

@keyframes ebNodeSpinRingGreen {
  0% { transform: rotate(0deg); transform-origin: center; }
  100% { transform: rotate(360deg); transform-origin: center; }
}
.eb-node-spin-ring-green { animation: ebNodeSpinRingGreen 9s linear infinite reverse; }

@keyframes ebNodeSpinRingOrange {
  0% { transform: rotate(0deg); transform-origin: center; }
  100% { transform: rotate(360deg); transform-origin: center; }
}
.eb-node-spin-ring-orange { animation: ebNodeSpinRingOrange 7.5s linear infinite; }

@keyframes ebNodeSpinRingPurple {
  0% { transform: rotate(0deg); transform-origin: center; }
  100% { transform: rotate(360deg); transform-origin: center; }
}
.eb-node-spin-ring-purple { animation: ebNodeSpinRingPurple 8.5s linear infinite reverse; }

@keyframes ebNodeSpinRingBlue2 {
  0% { transform: rotate(0deg); transform-origin: center; }
  100% { transform: rotate(360deg); transform-origin: center; }
}
.eb-node-spin-ring-blue2 { animation: ebNodeSpinRingBlue2 8s linear infinite; }

@keyframes ebNodeSpinRingGreen2 {
  0% { transform: rotate(0deg); transform-origin: center; }
  100% { transform: rotate(360deg); transform-origin: center; }
}
.eb-node-spin-ring-green2 { animation: ebNodeSpinRingGreen2 7s linear infinite reverse; }

/* 节点核心点脉动 - 白色核心点始终醒目 */
@keyframes ebNodeCorePulse {
  0%, 100% { r: 4.5; fill-opacity: 0.9; }
  50% { r: 5.8; fill-opacity: 1; }
}
.eb-node-core-pulse { animation: ebNodeCorePulse 2s ease-in-out infinite; }

@keyframes ebNodeCorePulseGreen {
  0%, 100% { r: 5; fill-opacity: 0.9; }
  50% { r: 6.3; fill-opacity: 1; }
}
.eb-node-core-pulse-green { animation: ebNodeCorePulseGreen 2.2s ease-in-out infinite 0.3s; }

@keyframes ebNodeCorePulseOrange {
  0%, 100% { r: 4.5; fill-opacity: 0.9; }
  50% { r: 5.8; fill-opacity: 1; }
}
.eb-node-core-pulse-orange { animation: ebNodeCorePulseOrange 2s ease-in-out infinite 0.6s; }

@keyframes ebNodeCorePulsePurple {
  0%, 100% { r: 4.5; fill-opacity: 0.9; }
  50% { r: 5.8; fill-opacity: 1; }
}
.eb-node-core-pulse-purple { animation: ebNodeCorePulsePurple 2.1s ease-in-out infinite 0.9s; }

@keyframes ebNodeCorePulseBlue2 {
  0%, 100% { r: 4.5; fill-opacity: 0.9; }
  50% { r: 5.8; fill-opacity: 1; }
}
.eb-node-core-pulse-blue2 { animation: ebNodeCorePulseBlue2 2s ease-in-out infinite 1.2s; }

@keyframes ebNodeCorePulseGreen2 {
  0%, 100% { r: 4; fill-opacity: 0.9; }
  50% { r: 5.2; fill-opacity: 1; }
}
.eb-node-core-pulse-green2 { animation: ebNodeCorePulseGreen2 2.3s ease-in-out infinite 1.5s; }

/* 照明灯泡光芒射线闪烁 */
@keyframes ebRayV {
  0%, 100% { stroke-opacity: 0.28; y1: -11; y2: -13.5; }
  50% { stroke-opacity: 0.65; y1: -12.5; y2: -15; }
}
.eb-ray-v { animation: ebRayV 2s ease-in-out infinite; }

@keyframes ebRayL {
  0%, 100% { stroke-opacity: 0.22; x1: -8; y1: -6; x2: -10; y2: -7.5; }
  50% { stroke-opacity: 0.52; x1: -9.5; y1: -7.5; x2: -12; y2: -9; }
}
.eb-ray-l { animation: ebRayL 2s ease-in-out infinite 0.33s; }

@keyframes ebRayR {
  0%, 100% { stroke-opacity: 0.22; x1: 8; y1: -6; x2: 10; y2: -7.5; }
  50% { stroke-opacity: 0.52; x1: 9.5; y1: -7.5; x2: 12; y2: -9; }
}
.eb-ray-r { animation: ebRayR 2s ease-in-out infinite 0.66s; }

/* 暖通温度弧线流动 */
@keyframes ebTempArcFlow {
  0%, 100% { stroke-dasharray: 16 20; stroke-dashoffset: 0; stroke-opacity: 0.35; }
  50% { stroke-opacity: 0.6; }
}
.eb-temp-arc { animation: ebTempArcFlow 3s ease-in-out infinite; stroke-dasharray: 16 20; }

/* 用电波纹扩散 */
@keyframes ebPowerWaveExpand {
  0% { r: 17; stroke-opacity: 0.18; stroke-width: 0.7; }
  100% { r: 28; stroke-opacity: 0; stroke-width: 0.2; }
}
.eb-power-wave { animation: ebPowerWaveExpand 2.5s ease-out infinite; }

/* 安防对勾闪烁 */
@keyframes ebCheckFlashAnim {
  0%, 80%, 100% { stroke-opacity: 0.55; }
  90% { stroke-opacity: 1; }
}
.eb-check-flash { animation: ebCheckFlashAnim 3s ease-in-out infinite; }

/* 能耗柱状图跳动 */
@keyframes ebBarAPulse {
  0%, 100% { height: 3px; y: 3px; fill-opacity: 0.3; }
  50% { height: 5px; y: 1px; fill-opacity: 0.5; }
}
.eb-bar-a { animation: ebBarAPulse 2.5s ease-in-out infinite; }

@keyframes ebBarBPulse {
  0%, 100% { height: 5px; y: 1px; fill-opacity: 0.38; }
  50% { height: 7px; y: -1px; fill-opacity: 0.58; }
}
.eb-bar-b { animation: ebBarBPulse 2.5s ease-in-out infinite 0.4s; }

@keyframes ebBarCPulse {
  0%, 100% { height: 4px; y: 2px; fill-opacity: 0.32; }
  50% { height: 6px; y: 0; fill-opacity: 0.5; }
}
.eb-bar-c { animation: ebBarCPulse 2.5s ease-in-out infinite 0.8s; }

/* ================================================================
   能源管家 SVG 插画动画 (Energy Manager Illustration)
   注意：所有动画使用 opacity/r/cx/cy/stroke-dashoffset 等安全属性
   禁止使用 transform（会覆盖 SVG 内联 style transform）
   ================================================================ */

/* --- 曲线图绘制动画 --- */
@keyframes enChartDrawActual {
  0% { stroke-dashoffset: 500; }
  60%, 100% { stroke-dashoffset: 0; }
}
.en-chart-actual { animation: enChartDrawActual 3s ease-out forwards; }

@keyframes enChartDrawPredict {
  0% { stroke-dashoffset: 500; }
  70%, 100% { stroke-dashoffset: 0; }
}
.en-chart-predict { animation: enChartDrawPredict 3.5s ease-out forwards 0.4s; }

@keyframes enChartFillFade {
  0% { fill-opacity: 0; }
  80%, 100% { fill-opacity: 0.06; }
}
.en-chart-fill { animation: enChartFillFade 3.2s ease-out forwards 0.6s; }

/* --- AI 大脑核心脉动 --- */
@keyframes enCoreNodePulse {
  0%, 100% { r: 6; fill-opacity: 0.6; }
  50% { r: 7.5; fill-opacity: 0.8; }
}
.en-core-node { animation: enCoreNodePulse 2.8s ease-in-out infinite; }

/* 闪电图标闪烁 */
@keyframes enBoltFlash {
  0%, 85%, 100% { fill-opacity: 0.7; }
  90% { fill-opacity: 1; }
}
.en-bolt-icon { animation: enBoltFlash 3s ease-in-out infinite; }

/* 大脑子节点浮动 */
@keyframes enBnFloatNW {
  0%, 100% { cx: 232; cy: 118; opacity: 0.35; }
  50% { cx: 229; cy: 115; opacity: 0.55; }
}
.en-bn-nw { animation: enBnFloatNW 5s ease-in-out infinite; }

@keyframes enBnFloatNE {
  0%, 100% { cx: 288; cy: 118; opacity: 0.35; }
  50% { cx: 291; cy: 115; opacity: 0.55; }
}
.en-bn-ne { animation: enBnFloatNE 5s ease-in-out infinite 0.8s; }

@keyframes enBnFloatSW {
  0%, 100% { cx: 228; cy: 158; opacity: 0.35; }
  50% { cx: 225; cy: 161; opacity: 0.55; }
}
.en-bn-sw { animation: enBnFloatSW 5s ease-in-out infinite 1.6s; }

@keyframes enBnFloatSE {
  0%, 100% { cx: 292; cy: 158; opacity: 0.35; }
  50% { cx: 295; cy: 161; opacity: 0.55; }
}
.en-bn-se { animation: enBnFloatSE 5s ease-in-out infinite 2.2s; }

/* 能量波形微动 */
@keyframes enWavePulse1 {
  0%, 100% { stroke-opacity: 0.5; }
  50% { stroke-opacity: 0.85; }
}
.en-wave-1, .en-wave-2 { animation: enWavePulse1 2.5s ease-in-out infinite; }
.en-wave-2 { animation-delay: 0.6s; }

@keyframes enWaveBarPulse {
  0%, 100% { stroke-opacity: 0.35; }
  50% { stroke-opacity: 0.65; }
}
.en-wave-bar, .en-wave-bar2 { animation: enWaveBarPulse 2.2s ease-in-out infinite 0.3s; }
.en-wave-bar2 { animation-delay: 0.8s; }

/* --- 四维节点光晕呼吸 --- */
@keyframes enGlowRingGreen {
  0%, 100% { stroke-opacity: 0.45; r: 24; }
  50% { stroke-opacity: 0.72; r: 27; }
}
.en-glow-ring-green { animation: enGlowRingGreen 3s ease-in-out infinite; }

@keyframes enGlowRingOrange {
  0%, 100% { stroke-opacity: 0.45; r: 24; }
  50% { stroke-opacity: 0.72; r: 27; }
}
.en-glow-ring-orange { animation: enGlowRingOrange 3s ease-in-out infinite 0.5s; }

@keyframes enGlowRingBlue {
  0%, 100% { stroke-opacity: 0.45; r: 22; }
  50% { stroke-opacity: 0.72; r: 25; }
}
.en-glow-ring-blue { animation: enGlowRingBlue 3s ease-in-out infinite 1s; }

@keyframes enGlowRingPurple {
  0%, 100% { stroke-opacity: 0.42; r: 20; }
  50% { stroke-opacity: 0.68; r: 23; }
}
.en-glow-ring-purple { animation: enGlowRingPurple 3s ease-in-out infinite 1.5s; }

/* 节点旋转环 */
@keyframes enSpinRingGreen {
  0% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -48; }
}
.en-spin-ring-green { animation: enSpinRingGreen 8s linear infinite; }

@keyframes enSpinRingOrange {
  0% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -52; }
}
.en-spin-ring-orange { animation: enSpinRingOrange 9s linear infinite; }

@keyframes enSpinRingBlue {
  0% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -48; }
}
.en-spin-ring-blue { animation: enSpinRingBlue 8s linear infinite 0.5s; }

@keyframes enSpinRingPurple {
  0% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -40; }
}
.en-spin-ring-purple { animation: enSpinRingPurple 7s linear infinite 1s; }

/* 核心点脉动（各颜色）*/
@keyframes enCorePulseGreen {
  0%, 100% { r: 4.5; fill-opacity: 0.88; }
  50% { r: 5.8; fill-opacity: 1; }
}
.en-core-pulse-green { animation: enCorePulseGreen 2.3s ease-in-out infinite; }

@keyframes enCorePulseOrange {
  0%, 100% { r: 4.5; fill-opacity: 0.88; }
  50% { r: 5.8; fill-opacity: 1; }
}
.en-core-pulse-orange { animation: enCorePulseOrange 2.3s ease-in-out infinite 0.5s; }

@keyframes enCorePulseBlue {
  0%, 100% { r: 4.5; fill-opacity: 0.88; }
  50% { r: 5.8; fill-opacity: 1; }
}
.en-core-pulse-blue { animation: enCorePulseBlue 2.3s ease-in-out infinite 1s; }

@keyframes enCorePulsePurple {
  0%, 100% { r: 4; fill-opacity: 0.88; }
  50% { r: 5.2; fill-opacity: 1; }
}
.en-core-pulse-purple { animation: enCorePulsePurple 2.3s ease-in-out infinite 1.5s; }

/* 节点整体微呼吸（用opacity，不用transform）*/
@keyframes enBodyNodeBreath {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.93; }
}
.en-body-node { animation: enBodyNodeBreath 4s ease-in-out infinite; }
.en-node-hvac { animation-delay: 0.5s; }
.en-node-power { animation-delay: 1s; }
.en-node-special { animation-delay: 1.5s; }

/* --- 数据流路径流动效果 --- */
@keyframes enFlowDash1 {
  0% { stroke-dasharray: 4 12; stroke-dashoffset: 0; stroke-opacity: 0.4; }
  50% { stroke-opacity: 0.65; }
  100% { stroke-dasharray: 4 12; stroke-dashoffset: -32; stroke-opacity: 0.4; }
}
.en-flow-1 { animation: enFlowDash1 3s linear infinite; }

@keyframes enFlowDash2 {
  0% { stroke-dasharray: 4 12; stroke-dashoffset: 0; stroke-opacity: 0.4; }
  50% { stroke-opacity: 0.65; }
  100% { stroke-dasharray: 4 12; stroke-dashoffset: -32; stroke-opacity: 0.4; }
}
.en-flow-2 { animation: enFlowDash2 3s linear infinite 0.75s; }

@keyframes enFlowDash3 {
  0% { stroke-dasharray: 3 10; stroke-dashoffset: 0; stroke-opacity: 0.35; }
  50% { stroke-opacity: 0.58; }
  100% { stroke-dasharray: 3 10; stroke-dashoffset: -26; stroke-opacity: 0.35; }
}
.en-flow-3 { animation: enFlowDash3 3.2s linear infinite 1.2s; }

@keyframes enFlowDash4 {
  0% { stroke-dasharray: 3 10; stroke-dashoffset: 0; stroke-opacity: 0.35; }
  50% { stroke-opacity: 0.58; }
  100% { stroke-dasharray: 3 10; stroke-dashoffset: -26; stroke-opacity: 0.35; }
}
.en-flow-4 { animation: enFlowDash4 3.2s linear infinite 1.8s; }

/* 流动粒子沿路径移动 */
@keyframes enFp1aMove {
  0% { cx: 145; cy: 188; opacity: 0; }
  15% { opacity: 0.75; }
  70% { cx: 185; cy: 155; opacity: 0.55; }
  100% { cx: 218; cy: 142; opacity: 0.15; }
}
.en-fp-1a { animation: enFp1aMove 3s ease-in infinite; }

@keyframes enFp1bMove {
  0% { cx: 135; cy: 195; opacity: 0; }
  20% { opacity: 0.65; }
  75% { cx: 175; cy: 162; opacity: 0.5; }
  100% { cx: 218; cy: 142; opacity: 0.1; }
}
.en-fp-1b { animation: enFp1bMove 3s ease-in infinite 0.6s; }

@keyframes enFp2aMove {
  0% { cx: 390; cy: 178; opacity: 0; }
  15% { opacity: 0.75; }
  70% { cx: 340; cy: 150; opacity: 0.55; }
  100% { cx: 298; cy: 142; opacity: 0.15; }
}
.en-fp-2a { animation: enFp2aMove 3s ease-in infinite 0.3s; }

@keyframes enFp2bMove {
  0% { cx: 400; cy: 185; opacity: 0; }
  20% { opacity: 0.65; }
  75% { cx: 350; cy: 155; opacity: 0.5; }
  100% { cx: 298; cy: 142; opacity: 0.1; }
}
.en-fp-2b { animation: enFp2bMove 3s ease-in infinite 0.9s; }

@keyframes enFp3aMove {
  0% { cx: 138; cy: 248; opacity: 0; }
  18% { opacity: 0.65; }
  68% { cx: 180; cy: 200; opacity: 0.5; }
  100% { cx: 228; cy: 155; opacity: 0.1; }
}
.en-fp-3a { animation: enFp3aMove 3.2s ease-in infinite 0.5s; }

@keyframes enFp4aMove {
  0% { cx: 405; cy: 242; opacity: 0; }
  18% { opacity: 0.6; }
  68% { cx: 345; cy: 195; opacity: 0.45; }
  100% { cx: 290; cy: 155; opacity: 0.1; }
}
.en-fp-4a { animation: enFp4aMove 3.2s ease-in infinite 1.2s; }

/* --- 指标标签微弹 --- */
@keyframes enMetricPop1 {
  0%, 100% { opacity: 0.95; }
  50% { opacity: 1; }
}
.en-metric-val { animation: enMetricPop1 3s ease-in-out infinite; }

@keyframes enMetricPop2 {
  0%, 100% { opacity: 0.92; }
  50% { opacity: 1; }
}
.en-metric-val-sm { animation: enMetricPop2 3.5s ease-in-out infinite 0.5s; }

/* 指标整体缓浮 */
@keyframes enMetricFloat1 {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.92; }
}
.en-metric-1 { animation: enMetricFloat1 4s ease-in-out infinite; }

@keyframes enMetricFloat2 {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.92; }
}
.en-metric-2 { animation: enMetricFloat2 4s ease-in-out infinite 1.2s; }

@keyframes enMetricFloat3 {
  0%, 100% { opacity: 0.95; }
  50% { opacity: 0.87; }
}
.en-metric-3 { animation: enMetricFloat3 4s ease-in-out infinite 2s; }

/* --- 浮动装饰粒子 --- */
@keyframes enPtFloat1 {
  0%, 100% { cx: 155; cy: 55; opacity: 0.25; }
  33% { cx: 148; cy: 47; opacity: 0.4; }
  66% { cx: 162; cy: 51; opacity: 0.28; }
}
.en-pt-1 { animation: enPtFloat1 7s ease-in-out infinite; }

@keyframes enPtFloat2 {
  0%, 100% { cx: 400; cy: 50; opacity: 0.2; }
  33% { cx: 408; cy: 43; opacity: 0.38; }
  66% { cx: 395; cy: 46; opacity: 0.24; }
}
.en-pt-2 { animation: enPtFloat2 8s ease-in-out infinite 1s; }

@keyframes enPtFloat3 {
  0%, 100% { cx: 70; cy: 200; opacity: 0.2; }
  33% { cx: 63; cy: 192; opacity: 0.35; }
  66% { cx: 75; cy: 196; opacity: 0.22; }
}
.en-pt-3 { animation: enPtFloat3 6.5s ease-in-out infinite 2s; }

@keyframes enPtFloat4 {
  0%, 100% { cx: 470; cy: 210; opacity: 0.16; }
  33% { cx: 476; cy: 202; opacity: 0.3; }
  66% { cx: 465; cy: 206; opacity: 0.18; }
}
.en-pt-4 { animation: enPtFloat4 7s ease-in-out infinite 0.5s; }

@keyframes enPtFloat5 {
  0%, 100% { cx: 185; cy: 235; opacity: 0.16; }
  33% { cx: 178; cy: 228; opacity: 0.28; }
  66% { cx: 190; cy: 232; opacity: 0.18; }
}
.en-pt-5 { animation: enPtFloat5 6s ease-in-out infinite 2.5s; }

@keyframes enPtFloat6 {
  0%, 100% { cx: 350; cy: 240; opacity: 0.16; }
  33% { cx: 357; cy: 233; opacity: 0.28; }
  66% { cx: 345; cy: 236; opacity: 0.18; }
}
.en-pt-6 { animation: enPtFloat6 6.5s ease-in-out infinite 1.5s; }

@keyframes enPtFloat7 {
  0%, 100% { cx: 355; cy: 80; opacity: 0.18; }
  33% { cx: 361; cy: 73; opacity: 0.32; }
  66% { cx: 351; cy: 77; opacity: 0.2; }
}
.en-pt-7 { animation: enPtFloat7 5.5s ease-in-out infinite 3s; }

@keyframes enPtFloat8 {
  0%, 100% { cx: 165; cy: 95; opacity: 0.18; }
  33% { cx: 159; cy: 88; opacity: 0.32; }
  66% { cx: 170; cy: 92; opacity: 0.2; }
}
.en-pt-8 { animation: enPtFloat8 5.5s ease-in-out infinite 3.5s; }

/* SVG 容器基础样式 */
.energy-illustration {
  width: 100%;
  height: auto;
  display: block;
}

/* ================================================ */
/* 四大管家页面 - SVG动画样式 (from four-butlers.html) */
/* ================================================ */
    /* 环境管家SVG动画样式 */

    /* 背景光晕脉冲 */
    .env-bg-pulse {
      animation: envPulse 4s ease-in-out infinite;
    }
    @keyframes envPulse {
      0%, 100% { opacity: 1; transform: scale(1); }
      50% { opacity: 0.7; transform: scale(1.05); }
    }

    /* 装饰圆环旋转 */
    .env-ring-slow {
      animation: envRingRotate 20s linear infinite;
      transform-origin: center;
    }
    .env-ring-reverse {
      animation: envRingRotateReverse 15s linear infinite;
      transform-origin: center;
    }
    @keyframes envRingRotate {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }
    @keyframes envRingRotateReverse {
      from { transform: rotate(360deg); }
      to { transform: rotate(0deg); }
    }

    /* 数据流动画 */
    .env-flow-line-1, .env-flow-line-2, .env-flow-line-3,
    .env-flow-line-4, .env-flow-line-5 {
      animation: envFlowDash 3s linear infinite;
    }
    .env-flow-line-2 { animation-delay: -0.6s; }
    .env-flow-line-3 { animation-delay: -1.2s; }
    .env-flow-line-4 { animation-delay: -1.8s; }
    .env-flow-line-5 { animation-delay: -2.4s; }
    @keyframes envFlowDash {
      to { stroke-dashoffset: -16; }
    }

    /* 中心核心旋转环 */
    .env-core-ring-outer {
      animation: envCoreSpin 8s linear infinite;
      transform-origin: center;
    }
    @keyframes envCoreSpin {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }

    /* 中圈呼吸效果 */
    .env-core-ring-mid {
      animation: envCoreBreathe 3s ease-in-out infinite;
    }
    @keyframes envCoreBreathe {
      0%, 100% { stroke-opacity: 0.5; fill-opacity: 0.1; }
      50% { stroke-opacity: 0.8; fill-opacity: 0.18; }
    }

    /* 温度计填充动画 */
    .env-temp-fill, .env-temp-indicator {
      animation: envTempFill 2s ease-in-out infinite;
    }
    @keyframes envTempFill {
      0%, 100% { height: 10px; y: 8px; }
      50% { height: 6px; y: 12px; }
    }

    /* 水滴填充动画 */
    .env-drop-fill {
      animation: envDropFill 2.5s ease-in-out infinite;
    }
    @keyframes envDropFill {
      0%, 100% { opacity: 0.6; }
      50% { opacity: 0.9; }
    }

    /* 叶子脉动 */
    .env-leaf-pulse {
      animation: envLeafPulse 2s ease-in-out infinite;
    }
    @keyframes envLeafPulse {
      0%, 100% { opacity: 0.5; transform: scale(1); }
      50% { opacity: 0.8; transform: scale(1.05); }
    }

    /* 光照发光效果 */
    .env-light-glow {
      animation: envLightGlow 1.5s ease-in-out infinite;
    }
    @keyframes envLightGlow {
      0%, 100% { opacity: 0.6; r: 3px; }
      50% { opacity: 1; r: 3.5px; }
    }

    /* 光芒旋转 */
    .ray-1, .ray-2, .ray-3, .ray-4,
    .ray-5, .ray-6, .ray-7, .ray-8 {
      animation: envRayRotate 4s linear infinite;
      transform-origin: 10px 10px;
    }
    .ray-2 { animation-delay: -0.5s; }
    .ray-3 { animation-delay: -1s; }
    .ray-4 { animation-delay: -1.5s; }
    .ray-5 { animation-delay: -2s; }
    .ray-6 { animation-delay: -2.5s; }
    .ray-7 { animation-delay: -3s; }
    .ray-8 { animation-delay: -3.5s; }
    @keyframes envRayRotate {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }

    /* 人感波纹扩散 */
    .env-human-wave-1 {
      animation: envWaveExpand 2s ease-out infinite;
    }
    .env-human-wave-2 {
      animation: envWaveExpand 2s ease-out infinite 0.7s;
    }
    @keyframes envWaveExpand {
      0% { r: 10px; stroke-opacity: 0.5; }
      100% { r: 20px; stroke-opacity: 0; }
    }

    /* 节点脉冲环 */
    .env-pulse-ring {
      animation: envNodePulse 2.5s ease-out infinite;
      transform-origin: center;
    }
    @keyframes envNodePulse {
      0% { r: 32px; stroke-opacity: 0.4; stroke-width: 1px; }
      100% { r: 45px; stroke-opacity: 0; stroke-width: 0.5px; }
    }

    /* 空气质量指标浮动 */
    .env-air-metrics {
      animation: envMetricFloat 3s ease-in-out infinite;
    }
    @keyframes envMetricFloat {
      0%, 100% { transform: translateY(0); opacity: 0.9; }
      50% { transform: translateY(-3px); opacity: 1; }
    }

    /* 数据指标动画 */
    .env-metric-value {
      animation: envValueGlow 2s ease-in-out infinite;
    }
    .metric-1 .env-metric-value { animation-delay: 0s; }
    .metric-2 .env-metric-value { animation-delay: -0.3s; }
    .metric-3 .env-metric-value { animation-delay: -0.6s; }
    @keyframes envValueGlow {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.75; }
    }

    /* 浮动粒子动画 */
    .env-pt-1 { animation: envParticleFloat1 6s ease-in-out infinite; }
    .env-pt-2 { animation: envParticleFloat2 7s ease-in-out infinite; }
    .env-pt-3 { animation: envParticleFloat3 5.5s ease-in-out infinite; }
    .env-pt-4 { animation: envParticleFloat4 6.5s ease-in-out infinite; }
    .env-pt-5 { animation: envParticleFloat5 5s ease-in-out infinite; }
    .env-pt-6 { animation: envParticleFloat6 7.5s ease-in-out infinite; }
    .env-pt-7 { animation: envParticleFloat7 6s ease-in-out infinite; }
    .env-pt-8 { animation: envParticleFloat8 8s ease-in-out infinite; }

    @keyframes envParticleFloat1 {
      0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.4; }
      50% { transform: translate(15px, -20px) scale(1.2); opacity: 0.7; }
    }
    @keyframes envParticleFloat2 {
      0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.35; }
      50% { transform: translate(-12px, -25px) scale(1.15); opacity: 0.6; }
    }
    @keyframes envParticleFloat3 {
      0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.3; }
      50% { transform: translate(20px, -15px) scale(1.25); opacity: 0.55; }
    }
    @keyframes envParticleFloat4 {
      0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.35; }
      50% { transform: translate(-18px, -22px) scale(1.1); opacity: 0.6; }
    }
    @keyframes envParticleFloat5 {
      0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.3; }
      50% { transform: translate(10px, -18px) scale(1.2); opacity: 0.55; }
    }
    @keyframes envParticleFloat6 {
      0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.3; }
      50% { transform: translate(-15px, -20px) scale(1.15); opacity: 0.5; }
    }
    @keyframes envParticleFloat7 {
      0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.4; }
      50% { transform: translate(12px, -16px) scale(1.1); opacity: 0.65; }
    }
    @keyframes envParticleFloat8 {
      0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.25; }
      50% { transform: translate(-10px, -24px) scale(1.2); opacity: 0.45; }
    }

    /* 协同弧线流动 */
    .env-arc-1 {
      animation: envArcFlow 5s linear infinite;
    }
    .env-arc-2 {
      animation: envArcFlow 5s linear infinite reverse;
    }
    @keyframes envArcFlow {
      to { stroke-dashoffset: -18; }
    }

    /* 节点悬浮效果 */
    .env-node {
      animation: envNodeFloat 4s ease-in-out infinite;
    }
    .env-node-temp { animation-delay: 0s; }
    .env-node-humid { animation-delay: -0.8s; }
    .env-node-air { animation-delay: -1.6s; }
    .env-node-light { animation-delay: -2.4s; }
    .env-node-human { animation-delay: -3.2s; }
    @keyframes envNodeFloat {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-4px); }
    }

    /* SVG容器响应式 */
    .env-butler-svg {
      min-height: 420px;
      width: 100%;
      height: auto;
    }

    /* 减少动画偏好支持 */
    @media (prefers-reduced-motion: reduce) {
      .env-bg-pulse,
      .env-ring-slow,
      .env-ring-reverse,
      .env-core-ring-outer,
      .env-core-ring-mid,
      .env-flow-line-1, .env-flow-line-2, .env-flow-line-3,
      .env-flow-line-4, .env-flow-line-5,
      .env-temp-fill, .env-temp-indicator,
      .env-drop-fill,
      .env-leaf-pulse,
      .env-light-glow,
      .ray-1, .ray-2, .ray-3, .ray-4,
      .ray-5, .ray-6, .ray-7, .ray-8,
      .env-human-wave-1, .env-human-wave-2,
      .env-pulse-ring,
      .env-air-metrics,
      .env-metric-value,
      .env-pt-1, .env-pt-2, .env-pt-3, .env-pt-4,
      .env-pt-5, .env-pt-6, .env-pt-7, .env-pt-8,
      .env-arc-1, .env-arc-2,
      .env-node {
        animation: none !important;
      }
    }

    /* ========== 安全管家SVG动画样式 ========== */

    /* 背景光晕脉冲 */
    .sec-bg-pulse {
      animation: secPulse 4s ease-in-out infinite;
    }
    @keyframes secPulse {
      0%, 100% { opacity: 1; transform: scale(1); }
      50% { opacity: 0.7; transform: scale(1.05); }
    }

    /* 雷达扫描 */
    .sec-radar-sweep {
      animation: secRadarSweep 4s linear infinite;
      transform-origin: center;
    }
    @keyframes secRadarSweep {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }

    /* 装饰圆环旋转 */
    .sec-ring-slow {
      animation: secRingRotate 25s linear infinite;
      transform-origin: 260px 200px;
    }
    .sec-ring-reverse {
      animation: secRingRotateReverse 18s linear infinite;
      transform-origin: 260px 200px;
    }
    @keyframes secRingRotate {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }
    @keyframes secRingRotateReverse {
      from { transform: rotate(360deg); }
      to { transform: rotate(0deg); }
    }

    /* 数据流动画 */
    .sec-flow-line-1, .sec-flow-line-2, .sec-flow-line-3, .sec-flow-line-4 {
      animation: secFlowDash 3s linear infinite;
    }
    .sec-flow-line-2 { animation-delay: -0.75s; }
    .sec-flow-line-3 { animation-delay: -1.5s; }
    .sec-flow-line-4 { animation-delay: -2.25s; }
    @keyframes secFlowDash {
      to { stroke-dashoffset: -16; }
    }

    /* 中心核心旋转环 */
    .sec-core-ring-outer {
      animation: secCoreSpin 10s linear infinite;
      transform-origin: center;
    }
    @keyframes secCoreSpin {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }

    /* 六边形呼吸 */
    .sec-core-hex {
      animation: secHexBreathe 3.5s ease-in-out infinite;
    }
    @keyframes secHexBreathe {
      0%, 100% { stroke-opacity: 0.5; fill-opacity: 0.08; }
      50% { stroke-opacity: 0.8; fill-opacity: 0.16; }
    }

    /* 盾牌填充脉动 */
    .sec-shield-fill {
      animation: secShieldPulse 2.5s ease-in-out infinite;
    }
    @keyframes secShieldPulse {
      0%, 100% { fill-opacity: 0.25; }
      50% { fill-opacity: 0.45; }
    }

    /* 核心脉冲点 */
    .sec-core-pulse-dot {
      animation: secDotPulse 1.5s ease-in-out infinite;
    }
    @keyframes secDotPulse {
      0%, 100% { r: 1.5px; opacity: 1; }
      50% { r: 2.5px; opacity: 0.6; }
    }

    /* 波形图动画 */
    .sec-waveform {
      animation: secWaveDraw 2s ease-in-out infinite;
    }
    @keyframes secWaveDraw {
      0%, 100% { stroke-dasharray: 80; stroke-dashoffset: 0; }
      50% { stroke-dashoffset: 20; }
    }

    /* 警告标记闪烁 */
    .sec-alert-mark {
      animation: secAlertBlink 1.5s ease-in-out infinite;
    }
    @keyframes secAlertBlink {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.3; }
    }

    /* 火焰动画 */
    .sec-flame-inner {
      animation: secFlicker 0.8s ease-in-out infinite alternate;
    }
    @keyframes secFlicker {
      0% { fill-opacity: 0.4; transform: scaleY(1) translateY(0); }
      100% { fill-opacity: 0.65; transform: scaleY(1.08) translateY(-1px); }
    }
    .sec-flame-outline {
      animation: secFlameGlow 2s ease-in-out infinite;
    }
    @keyframes secFlameGlow {
      0%, 100% { stroke-opacity: 1; filter: none; }
      50% { stroke-opacity: 0.7; }
    }

    /* 摄像头镜头 */
    .sec-cam-lens {
      animation: secLensFocus 2s ease-in-out infinite;
    }
    @keyframes secLensFocus {
      0%, 100% { fill-opacity: 0.5; r: 2px; }
      50% { fill-opacity: 0.85; r: 2.5px; }
    }

    /* 扫描线移动 */
    .sec-scan-line {
      animation: secScanMove 2s ease-in-out infinite;
    }
    @keyframes secScanMove {
      0%, 100% { opacity: 0.6; }
      50% { opacity: 0.15; }
    }

    /* 摄像头探测波纹 */
    .sec-cam-wave-1 {
      animation: secCamWaveExpand 2.5s ease-out infinite;
    }
    .sec-cam-wave-2 {
      animation: secCamWaveExpand 2.5s ease-out infinite 0.8s;
    }
    @keyframes secCamWaveExpand {
      0% { rx: 8px; ry: 5px; stroke-opacity: 0.3; }
      100% { rx: 14px; ry: 9px; stroke-opacity: 0; }
    }

    /* 节点脉冲环 */
    .sec-pulse-ring {
      animation: secNodePulse 2.5s ease-out infinite;
      transform-origin: center;
    }
    @keyframes secNodePulse {
      0% { r: 32px; stroke-opacity: 0.4; stroke-width: 1px; }
      100% { r: 48px; stroke-opacity: 0; stroke-width: 0.5px; }
    }

    /* 状态指示灯 */
    .sec-status-ok {
      animation: secStatusOk 2s ease-in-out infinite;
    }
    @keyframes secStatusOk {
      0%, 100% { box-shadow: 0 0 4px #34D399; filter: drop-shadow(0 0 3px #34D399); }
      50% { box-shadow: 0 0 8px #34D399; filter: drop-shadow(0 0 6px #34D399); }
    }

    /* 标签浮动 */
    .sec-fire-tag, .sec-ai-tag {
      animation: secTagFloat 3s ease-in-out infinite;
    }
    .sec-ai-tag { animation-delay: -1s; }
    @keyframes secTagFloat {
      0%, 100% { transform: translateY(0); opacity: 0.9; }
      50% { transform: translateY(-3px); opacity: 1; }
    }

    /* 数据指标动画 */
    .sec-metric-value {
      animation: secValueGlow 2s ease-in-out infinite;
    }
    .sec-metric-1 .sec-metric-value { animation-delay: 0s; }
    .sec-metric-2 .sec-metric-value { animation-delay: -0.35s; }
    .sec-metric-3 .sec-metric-value { animation-delay: -0.7s; }
    @keyframes secValueGlow {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.72; }
    }

    /* 浮动粒子 */
    .sec-pt-1 { animation: secParticleFloat1 6s ease-in-out infinite; }
    .sec-pt-2 { animation: secParticleFloat2 7s ease-in-out infinite; }
    .sec-pt-3 { animation: secParticleFloat3 5.5s ease-in-out infinite; }
    .sec-pt-4 { animation: secParticleFloat4 6.5s ease-in-out infinite; }
    .sec-pt-5 { animation: secParticleFloat5 5s ease-in-out infinite; }
    .sec-pt-6 { animation: secParticleFloat6 7.5s ease-in-out infinite; }
    .sec-pt-7 { animation: secParticleFloat7 6s ease-in-out infinite; }
    .sec-pt-8 { animation: secParticleFloat8 8s ease-in-out infinite; }

    @keyframes secParticleFloat1 {
      0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.4; }
      50% { transform: translate(12px, -18px) scale(1.2); opacity: 0.7; }
    }
    @keyframes secParticleFloat2 {
      0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.35; }
      50% { transform: translate(-10px, -22px) scale(1.15); opacity: 0.6; }
    }
    @keyframes secParticleFloat3 {
      0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.3; }
      50% { transform: translate(15px, -20px) scale(1.25); opacity: 0.55; }
    }
    @keyframes secParticleFloat4 {
      0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.35; }
      50% { transform: translate(-14px, -18px) scale(1.1); opacity: 0.6; }
    }
    @keyframes secParticleFloat5 {
      0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.3; }
      50% { transform: translate(8px, -16px) scale(1.2); opacity: 0.55; }
    }
    @keyframes secParticleFloat6 {
      0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.3; }
      50% { transform: translate(-12px, -18px) scale(1.15); opacity: 0.5; }
    }
    @keyframes secParticleFloat7 {
      0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.4; }
      50% { transform: translate(10px, -14px) scale(1.1); opacity: 0.65; }
    }
    @keyframes secParticleFloat8 {
      0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.25; }
      50% { transform: translate(-8px, -22px) scale(1.2); opacity: 0.45; }
    }

    /* 协同弧线流动 */
    .sec-arc-1 { animation: secArcFlow 6s linear infinite; }
    .sec-arc-2 { animation: secArcFlow 6s linear infinite reverse; }
    @keyframes secArcFlow {
      to { stroke-dashoffset: -18; }
    }

    /* 边界框微动 */
    .sec-boundary {
      animation: secBoundaryPulse 5s ease-in-out infinite;
    }
    @keyframes secBoundaryPulse {
      0%, 100% { stroke-opacity: 0.06; }
      50% { stroke-opacity: 0.12; }
    }

    /* 角落标记闪烁 */
    .corner-tl, .corner-tr, .corner-br, .corner-bl {
      animation: secCornerFlash 4s ease-in-out infinite;
    }
    .corner-tr { animation-delay: -1s; }
    .corner-br { animation-delay: -2s; }
    .corner-bl { animation-delay: -3s; }
    @keyframes secCornerFlash {
      0%, 100% { stroke-opacity: 0.25; }
      50% { stroke-opacity: 0.5; }
    }

    /* 节点悬浮效果 */
    .sec-node {
      animation: secNodeFloat 4s ease-in-out infinite;
    }
    .sec-node-elec { animation-delay: 0s; }
    .sec-node-fault { animation-delay: -1s; }
    .sec-node-fire { animation-delay: -2s; }
    .sec-node-ai { animation-delay: -3s; }
    @keyframes secNodeFloat {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-4px); }
    }

    /* SVG容器响应式 */
    .sec-butler-svg {
      min-height: 420px;
      width: 100%;
      height: auto;
    }

    /* 减少动画偏好支持 - 安全管家 */
    @media (prefers-reduced-motion: reduce) {
      .sec-bg-pulse,
      .sec-radar-sweep,
      .sec-ring-slow, .sec-ring-reverse,
      .sec-flow-line-1, .sec-flow-line-2, .sec-flow-line-3, .sec-flow-line-4,
      .sec-core-ring-outer, .sec-core-hex,
      .sec-shield-fill, .sec-core-pulse-dot,
      .sec-waveform, .sec-alert-mark,
      .sec-flame-inner, .sec-flame-outline,
      .sec-cam-lens, .sec-scan-line,
      .sec-cam-wave-1, .sec-cam-wave-2,
      .sec-pulse-ring,
      .sec-status-ok,
      .sec-fire-tag, .sec-ai-tag,
      .sec-metric-value,
      .sec-pt-1, .sec-pt-2, .sec-pt-3, .sec-pt-4,
      .sec-pt-5, .sec-pt-6, .sec-pt-7, .sec-pt-8,
      .sec-arc-1, .sec-arc-2,
      .sec-boundary,
      .corner-tl, .corner-tr, .corner-br, .corner-bl,
      .sec-node {
        animation: none !important;
      }
    }

    /* ========== 运维管家SVG动画样式 ========== */

    /* 背景光晕脉冲 */
    .ops-bg-pulse { animation: opsPulse 4s ease-in-out infinite; }
    @keyframes opsPulse {
      0%, 100% { opacity: 1; transform: scale(1); }
      50% { opacity: 0.7; transform: scale(1.05); }
    }

    /* 装饰圆环旋转 */
    .ops-ring-slow { animation: opsRingRotate 28s linear infinite; transform-origin: 260px 195px; }
    .ops-ring-reverse { animation: opsRingRotateReverse 20s linear infinite; transform-origin: 260px 195px; }
    @keyframes opsRingRotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
    @keyframes opsRingRotateReverse { from { transform: rotate(360deg); } to { transform: rotate(0deg); } }

    /* 数据流动画 */
    .ops-flow-line-1, .ops-flow-line-2, .ops-flow-line-3, .ops-flow-line-4 {
      animation: opsFlowDash 3s linear infinite;
    }
    .ops-flow-line-2 { animation-delay: -0.75s; }
    .ops-flow-line-3 { animation-delay: -1.5s; }
    .ops-flow-line-4 { animation-delay: -2.25s; }
    @keyframes opsFlowDash { to { stroke-dashoffset: -16; } }

    /* 生命周期环形节点闪烁 */
    .lc-1 { animation: opsLcDotBlink 2.4s ease-in-out infinite; }
    .lc-2 { animation: opsLcDotBlink 2.4s ease-in-out infinite -0.3s; }
    .lc-3 { animation: opsLcDotBlink 2.4s ease-in-out infinite -0.6s; }
    .lc-4 { animation: opsLcDotBlink 2.4s ease-in-out infinite -0.9s; }
    .lc-5 { animation: opsLcDotBlink 2.4s ease-in-out infinite -1.2s; }
    .lc-6 { animation: opsLcDotBlink 2.4s ease-in-out infinite -1.5s; }
    .lc-7 { animation: opsLcDotBlink 2.4s ease-in-out infinite -1.8s; }
    .lc-8 { animation: opsLcDotBlink 2.4s ease-in-out infinite -2.1s; }
    @keyframes opsLcDotBlink {
      0%, 100% { opacity: 0.25; r: 2.5px; }
      50% { opacity: 0.55; r: 3.5px; }
    }

    /* 生命周期弧线流动 */
    .ops-lc-arc-1 { animation: opsLcArcFlow 6s linear infinite; }
    .ops-lc-arc-2 { animation: opsLcArcFlow 6s linear infinite -3s; }
    @keyframes opsLcArcFlow { to { stroke-dashoffset: -16; } }

    /* 中心核心旋转环 */
    .ops-core-ring-outer { animation: opsCoreSpin 12s linear infinite; transform-origin: center; }
    @keyframes opsCoreSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

    /* 齿轮齿形缓慢旋转 */
    .ops-gear-teeth { animation: opsGearRotate 24s linear infinite; transform-origin: center; }
    @keyframes opsGearRotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

    /* 中圈呼吸 */
    .ops-core-mid { animation: opsMidBreathe 3.5s ease-in-out infinite; }
    @keyframes opsMidBreathe {
      0%, 100% { stroke-opacity: 0.5; fill-opacity: 0.09; }
      50% { stroke-opacity: 0.8; fill-opacity: 0.17; }
    }

    /* 核心脉冲点 */
    .ops-core-pulse { animation: opsCoreDotPulse 1.8s ease-in-out infinite; }
    @keyframes opsCoreDotPulse {
      0%, 100% { r: 2px; opacity: 0.7; }
      50% { r: 3px; opacity: 1; }
    }

    /* 预测趋势线绘制 */
    .ops-trend-line { animation: opsTrendDraw 2.5s ease-in-out infinite; }
    @keyframes opsTrendDraw {
      0%, 100% { stroke-dasharray: 80; stroke-dashoffset: 0; }
      50% { stroke-dashoffset: 15; }
    }

    /* 预测标记脉冲 */
    .ops-pred-marker { animation: opsPredMarkPulse 2s ease-in-out infinite; }
    @keyframes opsPredMarkPulse {
      0%, 100% { stroke-opacity: 0.5; r: 2px; }
      50% { stroke-opacity: 1; r: 3px; }
    }

    /* 工单头部条动画 */
    .ops-ticket-header { animation: opsTicketHeaderGlow 2s ease-in-out infinite; }
    @keyframes opsTicketHeaderGlow {
      0%, 100% { fill-opacity: 0.5; width: 10px; }
      50% { fill-opacity: 0.8; width: 14px; }
    }

    /* 勾选标记出现 */
    .ops-check-circle, .ops-check-mark { animation: opsCheckAppear 3s ease-in-out infinite; }
    @keyframes opsCheckAppear {
      0%, 70% { opacity: 0; }
      85%, 100% { opacity: 1; }
    }

    /* 循环箭头旋转 */
    .ops-cycle-path, .ops-cycle-arrow { animation: opsCycleRotate 6s linear infinite; transform-origin: 13px 12px; }
    @keyframes opsCycleRotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

    /* 阶段圆点依次点亮 */
    .stage-1 { animation: opsStageLight 2.4s ease-in-out infinite; }
    .stage-2 { animation: opsStageLight 2.4s ease-in-out infinite -0.8s; }
    .stage-3 { animation: opsStageLight 2.4s ease-in-out infinite -1.6s; }
    @keyframes opsStageLight {
      0%, 100% { fill-opacity: 0.4; }
      50% { fill-opacity: 0.9; }
    }

    /* AI知识库徽章脉动 */
    .ops-kb-ai-badge { animation: opsKbBadgePulse 2s ease-in-out infinite; }
    @keyframes opsKbBadgePulse {
      0%, 100% { stroke-opacity: 0.5; transform: scale(1); }
      50% { stroke-opacity: 1; transform: scale(1.15); }
    }

    /* 节点脉冲环 */
    .ops-pulse-ring { animation: opsNodePulse 2.8s ease-out infinite; transform-origin: center; }
    @keyframes opsNodePulse {
      0% { r: 33px; stroke-opacity: 0.35; stroke-width: 1px; }
      100% { r: 48px; stroke-opacity: 0; stroke-width: 0.5px; }
    }

    /* 指标数值动画 */
    .ops-metric-value { animation: opsValueGlow 2.2s ease-in-out infinite; }
    .ops-metric-1 .ops-metric-value { animation-delay: 0s; }
    .ops-metric-2 .ops-metric-value { animation-delay: -0.35s; }
    .ops-metric-3 .ops-metric-value { animation-delay: -0.7s; }
    @keyframes opsValueGlow {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.7; }
    }

    /* 浮动粒子 */
    .ops-pt-1 { animation: opsParticleFloat1 6s ease-in-out infinite; }
    .ops-pt-2 { animation: opsParticleFloat2 7s ease-in-out infinite; }
    .ops-pt-3 { animation: opsParticleFloat3 5.5s ease-in-out infinite; }
    .ops-pt-4 { animation: opsParticleFloat4 6.5s ease-in-out infinite; }
    .ops-pt-5 { animation: opsParticleFloat5 5s ease-in-out infinite; }
    .ops-pt-6 { animation: opsParticleFloat6 7.5s ease-in-out infinite; }
    .ops-pt-7 { animation: opsParticleFloat7 6s ease-in-out infinite; }
    .ops-pt-8 { animation: opsParticleFloat8 8s ease-in-out infinite; }

    @keyframes opsParticleFloat1 {
      0%, 100% { transform: translate(0,0) scale(1); opacity: 0.35; }
      50% { transform: translate(14px,-18px) scale(1.2); opacity: 0.65; }
    }
    @keyframes opsParticleFloat2 {
      0%, 100% { transform: translate(0,0) scale(1); opacity: 0.35; }
      50% { transform: translate(-12px,-20px) scale(1.15); opacity: 0.6; }
    }
    @keyframes opsParticleFloat3 {
      0%, 100% { transform: translate(0,0) scale(1); opacity: 0.3; }
      50% { transform: translate(16px,-18px) scale(1.25); opacity: 0.55; }
    }
    @keyframes opsParticleFloat4 {
      0%, 100% { transform: translate(0,0) scale(1); opacity: 0.35; }
      50% { transform: translate(-14px,-16px) scale(1.1); opacity: 0.6; }
    }
    @keyframes opsParticleFloat5 {
      0%, 100% { transform: translate(0,0) scale(1); opacity: 0.3; }
      50% { transform: translate(10px,-16px) scale(1.2); opacity: 0.55; }
    }
    @keyframes opsParticleFloat6 {
      0%, 100% { transform: translate(0,0) scale(1); opacity: 0.3; }
      50% { transform: translate(-13px,-18px) scale(1.15); opacity: 0.5; }
    }
    @keyframes opsParticleFloat7 {
      0%, 100% { transform: translate(0,0) scale(1); opacity: 0.4; }
      50% { transform: translate(11px,-14px) scale(1.1); opacity: 0.65; }
    }
    @keyframes opsParticleFloat8 {
      0%, 100% { transform: translate(0,0) scale(1); opacity: 0.25; }
      50% { transform: translate(-9px,-22px) scale(1.2); opacity: 0.45; }
    }

    /* 协同弧线流动 */
    .ops-arc-1 { animation: opsArcFlow 7s linear infinite; }
    .ops-arc-2 { animation: opsArcFlow 7s linear infinite reverse; }
    @keyframes opsArcFlow { to { stroke-dashoffset: -18; } }

    /* 边界框微动 */
    .ops-boundary { animation: opsBoundaryPulse 5s ease-in-out infinite; }
    @keyframes opsBoundaryPulse {
      0%, 100% { stroke-opacity: 0.05; }
      50% { stroke-opacity: 0.11; }
    }

    /* 节点悬浮效果 */
    .ops-node { animation: opsNodeFloat 4s ease-in-out infinite; }
    .ops-node-pred { animation-delay: 0s; }
    .ops-node-ticket { animation-delay: -1s; }
    .ops-node-asset { animation-delay: -2s; }
    .ops-node-kb { animation-delay: -3s; }
    @keyframes opsNodeFloat {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-4px); }
    }

    /* SVG容器响应式 */
    .ops-butler-svg { min-height: 420px; width: 100%; height: auto; }

    /* 减少动画偏好支持 - 运维管家 */
    @media (prefers-reduced-motion: reduce) {
      .ops-bg-pulse,
      .ops-ring-slow, .ops-ring-reverse,
      .ops-flow-line-1, .ops-flow-line-2, .ops-flow-line-3, .ops-flow-line-4,
      .lc-1, .lc-2, .lc-3, .lc-4, .lc-5, .lc-6, .lc-7, .lc-8,
      .ops-lc-arc-1, .ops-lc-arc-2,
      .ops-core-ring-outer, .ops-gear-teeth, .ops-core-mid,
      .ops-core-pulse,
      .ops-trend-line, .ops-pred-marker,
      .ops-ticket-header,
      .ops-check-circle, .ops-check-mark,
      .ops-cycle-path, .ops-cycle-arrow,
      .stage-1, .stage-2, .stage-3,
      .ops-kb-ai-badge,
      .ops-pulse-ring,
      .ops-metric-value,
      .ops-pt-1, .ops-pt-2, .ops-pt-3, .ops-pt-4,
      .ops-pt-5, .ops-pt-6, .ops-pt-7, .ops-pt-8,
      .ops-arc-1, .ops-arc-2,
      .ops-boundary,
      .ops-node {
        animation: none !important;
      }
    }