/* ===== source: style.css ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* 修复em标签默认倾斜问题 */
em {
  font-style: normal;
}

:root {
  --bg: #ffffff;
  --bg2: #fbfbfd;
  --nav-bg: #000000;
  --primary: #0071e3;
  --primary-h: #0077ed;
  --text: #1d1d1f;
  --text-muted: #555555;
  --green: #06c167;
  --radius: 18px;
  --transition: cubic-bezier(0.28, 0.11, 0.32, 1);
}

html {
  overflow-x: hidden;
  overflow-y: auto;
  background: #ffffff;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", sans-serif;
  background: #ffffff;
  color: var(--text);
  line-height: 1.6;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  overflow-y: auto;
  margin: 0;
  padding: 0;
  width: 100%;
  min-height: 100vh;
}

a { color: #afafaf; text-decoration: none; transition: color 0.3s var(--transition); }
a:hover { color: var(--primary-h); }
.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 22px;
  width: 100%;
  box-sizing: border-box;
}

/* NAV — 苹果风格黑色导航 */
header {
  background: rgba(0,0,0,0.8);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(255,255,255,0.1);
  position: sticky;
  top: 0;
  z-index: 100;
  width: 100%;
  margin: 0;
  padding: 0;
}
nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
}
.logo {
  font-size: 24px;
  font-weight: 700;
  color: #f5f5f7;
  letter-spacing: -0.5px;
}
.logo span { color: #0071e3; }
.nav-links {
  display: flex;
  gap: 0;
  align-items: center;
  flex: 1;
  justify-content: center;
}
.nav-links > a,
.nav-links > .dropdown > a {
  color: #f5f5f7;
  padding: 0 16px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  transition: all 0.3s var(--transition);
  opacity: 0.85;
  display: block;
  line-height: 56px;
  position: relative;
}
.nav-links > a:hover,
.nav-links > .dropdown > a:hover {
  opacity: 1;
  color: #ffffff;
}
.nav-links > a::after,
.nav-links > .dropdown > a::after {
  content: '';
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%) scaleX(0);
  width: 20px;
  height: 2px;
  background: linear-gradient(90deg, #60a5fa, #a78bfa);
  border-radius: 1px;
  transition: transform 0.3s var(--transition);
}
.nav-links > a:hover::after,
.nav-links > .dropdown:hover > a::after {
  transform: translateX(-50%) scaleX(1);
}
.nav-links .dropdown {
  position: relative;
}
.nav-links .dropdown:hover .dropdown-menu {
  display: block;
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.dropdown-menu {
  display: none;
  opacity: 0;
  transform: translateX(-50%) translateY(-8px);
  position: absolute;
  top: 100%;
  left: 50%;
  background: rgba(22,22,24,0.98);
  backdrop-filter: saturate(180%) blur(30px);
  -webkit-backdrop-filter: saturate(180%) blur(30px);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  min-width: 180px;
  width: max-content;
  max-width: 280px;
  padding: 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4), 0 16px 48px rgba(0,0,0,0.3), 0 0 1px rgba(255,255,255,0.1) inset;
  transition: opacity 0.25s var(--transition), transform 0.25s var(--transition);
  margin-top: 2px;
}
.dropdown-menu a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  color: #f5f5f7;
  font-size: 14px;
  font-weight: 450;
  border-radius: 10px;
  opacity: 0.88;
  line-height: 1.5;
  letter-spacing: 0.01em;
  transition: all 0.25s ease;
  white-space: nowrap;
}
.dropdown-menu a:hover {
  background: rgba(255,255,255,0.12);
  color: #ffffff;
  opacity: 1;
  transform: translateX(2px);
}
.dropdown-menu a .flag {
  font-size: 16px;
  line-height: 1;
  opacity: 0.95;
  flex-shrink: 0;
  width: 16px;
  text-align: center;
}

/* Mega Menu */
.mega-menu {
  display: none;
  width: max-content;
  padding: 6px;
  background: rgba(22,22,24,0.98);
}
.mega-dropdown:hover .mega-menu {
  display: flex;
  gap: 0;
}
.mega-menu-section {
  flex: 1;
  min-width: 0;
  padding: 0;
}
.mega-menu-section:not(:last-child) {
  border-right: 1px solid rgba(255,255,255,0.08);
}
.mega-menu-section a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  color: #f5f5f7;
  font-size: 14px;
  font-weight: 450;
  border-radius: 10px;
  opacity: 0.88;
  transition: all 0.25s ease;
  white-space: nowrap;
  font-weight: 400;
  margin-bottom: 2px;
}
.mega-menu-section a:hover {
  background: rgba(255,255,255,0.12);
  color: #ffffff;
  opacity: 1;
  transform: translateX(2px);
}
.mega-menu-section a .flag {
  font-size: 17px;
  line-height: 1;
  opacity: 0.95;
  flex-shrink: 0;
  width: 17px;
  text-align: center;
}
.nav-actions {
  display: flex;
  gap: 12px;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 18px;
  border-radius: 980px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  border: none;
  transition: all 0.3s var(--transition);
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.btn-primary {
  background: #0071e3;
  color: #fff;
}
.btn-primary:hover {
  background: #0077ed;
  color: #fff;
  transform: scale(1.02);
}
.btn-outline {
  background: transparent;
  color: #f5f5f7;
  border: 1px solid rgba(245,245,247,0.3);
}
.btn-outline:hover {
  background: rgba(245,245,247,0.1);
  border-color: rgba(245,245,247,0.5);
}
header .btn-outline {
  background: transparent;
  color: #f5f5f7;
  border-color: rgba(245,245,247,0.3);
}
header .btn-outline:hover {
  background: rgba(245,245,247,0.1);
}
.btn-sm {
  padding: 6px 16px;
  font-size: 12px;
}
.btn-sm.btn-outline {
  background: transparent;
  color: var(--primary);
  border-color: rgba(0,113,227,0.3);
}
.btn-sm.btn-outline:hover {
  background: rgba(0,113,227,0.04);
  border-color: var(--primary);
}

/* HERO — 苹果风格精致 Banner */
.hero {
  min-height: 692px;
  padding: 110px 0 96px;
  text-align: center;
  background: #000000;
  position: relative;
  overflow: hidden;
  width: 100%;
  margin: 0;
}

/* Hero Background Effects */
.hero-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Orbs - Large glowing spheres */
.hero-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.5;
  animation: orbFloat 25s ease-in-out infinite;
}

.hero-orb-1 {
  width: 700px;
  height: 700px;
  background: radial-gradient(circle, rgba(14,165,233,0.4) 0%, transparent 70%);
  top: -200px;
  right: -150px;
  animation-duration: 30s;
}

.hero-orb-2 {
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(14,165,233,0.2) 0%, transparent 70%);
  bottom: -150px;
  left: -100px;
  animation-duration: 35s;
  animation-direction: reverse;
}

.hero-orb-3 {
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(59,130,246,0.15) 0%, transparent 70%);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation-duration: 40s;
}

@keyframes orbFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(40px, -40px) scale(1.1); }
  66% { transform: translate(-30px, 30px) scale(0.95); }
}

/* Grid Overlay */
.hero-grid-overlay {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(90deg, rgba(14,165,233,0.08) 1px, transparent 1px),
    linear-gradient(0deg, rgba(14,165,233,0.08) 1px, transparent 1px);
  background-size: 80px 80px;
  opacity: 0.4;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
}

/* Diagonal Lines */
.hero-lines {
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 100px,
    rgba(14,165,233,0.03) 100px,
    rgba(14,165,233,0.03) 102px
  );
  animation: linesMove 30s linear infinite;
}

@keyframes linesMove {
  0% { background-position: 0 0; }
  100% { background-position: 141px 141px; }
}

/* Dots Overlay */
.hero-dots-overlay {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 40px 40px;
  opacity: 0.6;
}

/* Pulse Lines */
.hero-pulse-lines {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent 0%, rgba(14,165,233,0.2) 50%, transparent 100%);
  background-size: 200% 100%;
  animation: pulseHorizontal 8s ease-in-out infinite;
  opacity: 0.3;
}

@keyframes pulseHorizontal {
  0%, 100% { background-position: 0% 0%; opacity: 0; }
  50% { background-position: 100% 0%; opacity: 0.3; }
}

.hero::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(14,165,233,0.3) 50%, transparent);
}

/* Beams - Vertical light beams */
.hero-beam {
  position: absolute;
  width: 2px;
  height: 100%;
  background: linear-gradient(180deg, transparent 0%, rgba(14,165,233,0.6) 50%, transparent 100%);
  animation: beamMove 12s ease-in-out infinite;
  opacity: 0.4;
}

.hero-beam-1 {
  left: 15%;
  animation-delay: 0s;
}

.hero-beam-2 {
  left: 50%;
  animation-delay: 4s;
}

.hero-beam-3 {
  left: 85%;
  animation-delay: 8s;
}

@keyframes beamMove {
  0%, 100% { transform: translateY(-100%); opacity: 0; }
  50% { transform: translateY(100%); opacity: 0.4; }
}

/* Rings - Expanding circles */
.hero-rings {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.ring {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 2px solid rgba(14,165,233,0.3);
  border-radius: 50%;
  animation: ringExpand 8s ease-out infinite;
}

.ring-1 {
  width: 300px;
  height: 300px;
  animation-delay: 0s;
}

.ring-2 {
  width: 300px;
  height: 300px;
  animation-delay: 4s;
}

@keyframes ringExpand {
  0% {
    width: 100px;
    height: 100px;
    opacity: 0.6;
  }
  100% {
    width: 800px;
    height: 800px;
    opacity: 0;
  }
}

/* Triangles */
.hero-triangles {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.triangle {
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  opacity: 0.15;
  animation: triangleFloat 20s ease-in-out infinite;
}

.triangle-1 {
  top: 10%;
  left: 10%;
  border-width: 0 30px 52px 30px;
  border-color: transparent transparent rgba(14,165,233,0.4) transparent;
  animation-duration: 25s;
}

.triangle-2 {
  top: 60%;
  right: 15%;
  border-width: 40px 0 40px 69px;
  border-color: transparent transparent transparent rgba(14,165,233,0.2);
  animation-duration: 30s;
  animation-direction: reverse;
}

.triangle-3 {
  bottom: 15%;
  left: 50%;
  border-width: 35px 20px 0 20px;
  border-color: rgba(59,130,246,0.2) transparent transparent transparent;
  animation-duration: 28s;
}

@keyframes triangleFloat {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  33% { transform: translate(30px, -30px) rotate(120deg); }
  66% { transform: translate(-20px, 20px) rotate(240deg); }
}

/* Hexagons */
.hero-hexagons {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='52' viewBox='0 0 60 52' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 0l15 8.66v17.32L30 34.64 15 26V8.66L30 0z' fill='none' stroke='rgba(14,165,233,0.1)' stroke-width='1'/%3E%3C/svg%3E");
  background-size: 120px 104px;
  opacity: 0.3;
  animation: hexMove 40s linear infinite;
}

@keyframes hexMove {
  0% { background-position: 0 0; }
  100% { background-position: 120px 104px; }
}

/* Particles */
.hero-particles {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.hero-particles span {
  position: absolute;
  width: 3px;
  height: 3px;
  background: rgba(14,165,233,0.6);
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(14,165,233,0.8);
  animation: particleFloat 15s ease-in-out infinite;
}

.hero-particles span:nth-child(1) { left: 10%; top: 20%; animation-delay: 0s; }
.hero-particles span:nth-child(2) { left: 25%; top: 60%; animation-delay: 2s; }
.hero-particles span:nth-child(3) { left: 40%; top: 30%; animation-delay: 4s; }
.hero-particles span:nth-child(4) { left: 55%; top: 70%; animation-delay: 1s; }
.hero-particles span:nth-child(5) { left: 70%; top: 40%; animation-delay: 3s; }
.hero-particles span:nth-child(6) { left: 85%; top: 25%; animation-delay: 5s; }
.hero-particles span:nth-child(7) { left: 15%; top: 80%; animation-delay: 2.5s; }
.hero-particles span:nth-child(8) { left: 60%; top: 15%; animation-delay: 4.5s; }
.hero-particles span:nth-child(9) { left: 35%; top: 85%; animation-delay: 1.5s; }
.hero-particles span:nth-child(10) { left: 80%; top: 55%; animation-delay: 3.5s; }

@keyframes particleFloat {
  0%, 100% {
    transform: translate(0, 0) scale(1);
    opacity: 0.6;
  }
  50% {
    transform: translate(50px, -50px) scale(1.5);
    opacity: 1;
  }
}

/* Code Stream */
.hero-code-stream {
  position: absolute;
  inset: 0;
  overflow: hidden;
  font-family: 'Courier New', monospace;
  font-size: 12px;
  color: rgba(14,165,233,0.3);
  pointer-events: none;
}

.hero-code-stream span {
  position: absolute;
  white-space: nowrap;
  animation: codeFlow 20s linear infinite;
  opacity: 0.4;
}

.hero-code-stream span:nth-child(1) {
  top: 15%;
  right: 100%;
  animation-delay: 0s;
}

.hero-code-stream span:nth-child(2) {
  top: 35%;
  right: 100%;
  animation-delay: 5s;
}

.hero-code-stream span:nth-child(3) {
  top: 55%;
  right: 100%;
  animation-delay: 10s;
}

.hero-code-stream span:nth-child(4) {
  top: 75%;
  right: 100%;
  animation-delay: 15s;
}

@keyframes codeFlow {
  0% {
    transform: translateX(0);
    opacity: 0;
  }
  10% {
    opacity: 0.4;
  }
  90% {
    opacity: 0.4;
  }
  100% {
    transform: translateX(calc(100vw + 100%));
    opacity: 0;
  }
}

/* Scanline */
.hero-scanline {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(14,165,233,0.8), transparent);
  box-shadow: 0 0 20px rgba(14,165,233,0.6);
  animation: scanlineMove 6s ease-in-out infinite;
}

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

/* Circuit Board */
.hero-circuit {
  position: absolute;
  inset: 0;
  opacity: 0.4;
}

.circuit-svg {
  width: 100%;
  height: 100%;
}

.circuit-path {
  stroke-dasharray: 400;
  stroke-dashoffset: 400;
  animation: circuitDraw 15s ease-in-out infinite;
}

.circuit-path-1 {
  animation-delay: 0s;
}

.circuit-path-2 {
  animation-delay: 5s;
}

.circuit-path-3 {
  animation-delay: 10s;
}

@keyframes circuitDraw {
  0%, 100% {
    stroke-dashoffset: 400;
    opacity: 0.3;
  }
  50% {
    stroke-dashoffset: 0;
    opacity: 0.8;
  }
}

.circuit-node {
  animation: nodePulse 2s ease-in-out infinite;
}

@keyframes nodePulse {
  0%, 100% {
    opacity: 0.6;
    r: 4;
  }
  50% {
    opacity: 1;
    r: 6;
  }
}

/* Energy Waves */
.hero-energy-waves {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.energy-wave {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 200px;
  border: 2px solid rgba(14,165,233,0.4);
  border-radius: 50%;
  animation: waveExpand 6s ease-out infinite;
}

.wave-1 {
  animation-delay: 0s;
}

.wave-2 {
  animation-delay: 2s;
}

.wave-3 {
  animation-delay: 4s;
}

@keyframes waveExpand {
  0% {
    width: 100px;
    height: 100px;
    opacity: 0.8;
  }
  100% {
    width: 1000px;
    height: 1000px;
    opacity: 0;
  }
}

/* Stars */
.hero-stars {
  position: absolute;
  inset: 0;
}

.star {
  position: absolute;
  width: 2px;
  height: 2px;
  background: #ffffff;
  border-radius: 50%;
  box-shadow: 0 0 4px rgba(255,255,255,0.8);
  animation: starTwinkle 3s ease-in-out infinite;
}

.star-1 { left: 15%; top: 20%; animation-delay: 0s; }
.star-2 { left: 30%; top: 40%; animation-delay: 0.5s; }
.star-3 { left: 50%; top: 15%; animation-delay: 1s; }
.star-4 { left: 65%; top: 35%; animation-delay: 1.5s; }
.star-5 { left: 80%; top: 25%; animation-delay: 2s; }
.star-6 { left: 20%; top: 70%; animation-delay: 2.5s; }
.star-7 { left: 45%; top: 80%; animation-delay: 1.2s; }
.star-8 { left: 75%; top: 65%; animation-delay: 0.8s; }

@keyframes starTwinkle {
  0%, 100% {
    opacity: 0.3;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.5);
  }
}

/* Data Nodes */
.hero-data-nodes {
  position: absolute;
  inset: 0;
}

.data-node {
  position: absolute;
  width: 60px;
  height: 60px;
}

.node-1 {
  left: 20%;
  top: 30%;
}

.node-2 {
  right: 25%;
  top: 50%;
}

.node-3 {
  left: 50%;
  bottom: 25%;
}

.node-core {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  background: rgba(14,165,233,0.8);
  border-radius: 50%;
  box-shadow: 0 0 20px rgba(14,165,233,1);
  animation: coreGlow 2s ease-in-out infinite;
}

.node-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 30px;
  height: 30px;
  border: 2px solid rgba(14,165,233,0.4);
  border-radius: 50%;
  animation: ringRotate 8s linear infinite;
}

@keyframes coreGlow {
  0%, 100% {
    box-shadow: 0 0 20px rgba(14,165,233,1);
  }
  50% {
    box-shadow: 0 0 40px rgba(14,165,233,1), 0 0 60px rgba(14,165,233,0.6);
  }
}

@keyframes ringRotate {
  0% {
    transform: translate(-50%, -50%) rotate(0deg) scale(1);
    opacity: 0.4;
  }
  50% {
    transform: translate(-50%, -50%) rotate(180deg) scale(1.2);
    opacity: 0.8;
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg) scale(1);
    opacity: 0.4;
  }
}

/* Glow Layers */
.hero-glow-layers {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.glow-layer {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.2;
  animation: glowPulse 10s ease-in-out infinite;
}

.glow-1 {
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(14,165,233,0.6), transparent);
  top: -100px;
  left: -100px;
  animation-delay: 0s;
}

.glow-2 {
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(14,165,233,0.3), transparent);
  bottom: -50px;
  right: -50px;
  animation-delay: 3.3s;
}

.glow-3 {
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(59,130,246,0.25), transparent);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation-delay: 6.6s;
}

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

/* Data Connections */
.hero-data-connections {
  position: absolute;
  inset: 0;
  opacity: 0.5;
}

.connections-svg {
  width: 100%;
  height: 100%;
}

.connection-line {
  stroke-dasharray: 500;
  stroke-dashoffset: 500;
  animation: lineFlow 8s ease-in-out infinite;
}

.line-1 {
  animation-delay: 0s;
}

.line-2 {
  animation-delay: 2.6s;
}

.line-3 {
  animation-delay: 5.2s;
}

@keyframes lineFlow {
  0%, 100% {
    stroke-dashoffset: 500;
    opacity: 0.2;
  }
  50% {
    stroke-dashoffset: 0;
    opacity: 0.8;
  }
}

.connection-dot {
  animation: dotPulse 2s ease-in-out infinite;
}

.dot-1 {
  animation-delay: 0s;
}

.dot-2 {
  animation-delay: 0.6s;
}

.dot-3 {
  animation-delay: 1.2s;
}

@keyframes dotPulse {
  0%, 100% {
    opacity: 0.6;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(2);
  }
}

/* Rectangles */
.hero-rectangles {
  position: absolute;
  inset: 0;
}

.rect {
  position: absolute;
  border: 1px solid rgba(14,165,233,0.3);
  animation: rectFloat 25s ease-in-out infinite;
}

.rect-1 {
  width: 120px;
  height: 80px;
  top: 15%;
  right: 20%;
  animation-duration: 28s;
}

.rect-2 {
  width: 90px;
  height: 60px;
  bottom: 25%;
  left: 15%;
  animation-duration: 32s;
  animation-direction: reverse;
}

.rect-3 {
  width: 100px;
  height: 70px;
  top: 50%;
  left: 10%;
  animation-duration: 30s;
  border-color: rgba(14,165,233,0.2);
}

.rect-4 {
  width: 80px;
  height: 50px;
  bottom: 35%;
  right: 25%;
  animation-duration: 26s;
  border-color: rgba(59,130,246,0.2);
}

@keyframes rectFloat {
  0%, 100% {
    transform: translate(0, 0) rotate(0deg);
    opacity: 0.3;
  }
  33% {
    transform: translate(30px, -30px) rotate(15deg);
    opacity: 0.6;
  }
  66% {
    transform: translate(-20px, 20px) rotate(-15deg);
    opacity: 0.4;
  }
}

/* Diamonds */
.hero-diamonds {
  position: absolute;
  inset: 0;
}

.diamond {
  position: absolute;
  width: 40px;
  height: 40px;
  border: 2px solid rgba(14,165,233,0.4);
  transform: rotate(45deg);
  animation: diamondSpin 20s linear infinite;
}

.diamond-1 {
  top: 20%;
  left: 25%;
  animation-duration: 22s;
}

.diamond-2 {
  top: 65%;
  right: 30%;
  animation-duration: 26s;
  border-color: rgba(14,165,233,0.3);
}

.diamond-3 {
  bottom: 20%;
  left: 60%;
  animation-duration: 24s;
  border-color: rgba(59,130,246,0.3);
}

@keyframes diamondSpin {
  0% {
    transform: rotate(45deg) scale(1);
    opacity: 0.4;
  }
  50% {
    transform: rotate(225deg) scale(1.2);
    opacity: 0.8;
  }
  100% {
    transform: rotate(405deg) scale(1);
    opacity: 0.4;
  }
}

/* Light Trails */
.hero-light-trails {
  position: absolute;
  inset: 0;
}

.light-trail {
  position: absolute;
  width: 100%;
  height: 2px;
  overflow: hidden;
}

.trail-1 {
  top: 25%;
  transform: rotate(-15deg);
}

.trail-2 {
  top: 50%;
  transform: rotate(10deg);
}

.trail-3 {
  top: 75%;
  transform: rotate(-8deg);
}

.trail-dot {
  position: absolute;
  width: 80px;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(14,165,233,0.8), transparent);
  box-shadow: 0 0 10px rgba(14,165,233,0.8);
  animation: trailMove 8s linear infinite;
}

.trail-1 .trail-dot {
  animation-delay: 0s;
}

.trail-2 .trail-dot {
  animation-delay: 2.6s;
}

.trail-3 .trail-dot {
  animation-delay: 5.2s;
}

@keyframes trailMove {
  0% {
    left: -100px;
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    left: 100%;
    opacity: 0;
  }
}

/* Digital Rain */
.hero-digital-rain {
  position: absolute;
  inset: 0;
  font-family: 'Courier New', monospace;
  font-size: 14px;
  color: rgba(14,165,233,0.4);
  overflow: hidden;
}

.rain-column {
  position: absolute;
  top: -100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  animation: rainFall 12s linear infinite;
}

.column-1 {
  left: 18%;
  animation-delay: 0s;
}

.column-2 {
  left: 42%;
  animation-delay: 3s;
}

.column-3 {
  left: 66%;
  animation-delay: 6s;
}

.column-4 {
  left: 84%;
  animation-delay: 9s;
}

@keyframes rainFall {
  0% {
    top: -100%;
    opacity: 0;
  }
  10% {
    opacity: 0.6;
  }
  90% {
    opacity: 0.6;
  }
  100% {
    top: 100%;
    opacity: 0;
  }
}

/* Hologram */
.hero-hologram {
  position: absolute;
  inset: 0;
  opacity: 0.2;
}

.holo-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(0deg, rgba(14,165,233,0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(14,165,233,0.1) 1px, transparent 1px);
  background-size: 50px 50px;
  transform: perspective(500px) rotateX(60deg);
  transform-origin: center bottom;
}

.holo-scan {
  position: absolute;
  left: 0;
  right: 0;
  height: 100px;
  background: linear-gradient(180deg, transparent, rgba(14,165,233,0.3), transparent);
  animation: holoScan 8s ease-in-out infinite;
}

@keyframes holoScan {
  0%, 100% {
    top: -100px;
    opacity: 0;
  }
  50% {
    top: 100%;
    opacity: 0.6;
  }
}

/* Energy Pulses */
.hero-energy-pulses {
  position: absolute;
  inset: 0;
}

.pulse {
  position: absolute;
  width: 4px;
  height: 4px;
  background: rgba(14,165,233,0.8);
  border-radius: 50%;
  box-shadow: 0 0 20px rgba(14,165,233,1);
  animation: pulseMove 10s ease-in-out infinite;
}

.pulse-1 {
  left: 10%;
  top: 20%;
  animation-delay: 0s;
}

.pulse-2 {
  left: 70%;
  top: 30%;
  animation-delay: 2.5s;
}

.pulse-3 {
  left: 40%;
  top: 60%;
  animation-delay: 5s;
}

.pulse-4 {
  left: 85%;
  top: 70%;
  animation-delay: 7.5s;
}

@keyframes pulseMove {
  0%, 100% {
    transform: translate(0, 0) scale(1);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  50% {
    transform: translate(200px, -100px) scale(2);
    opacity: 0.8;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translate(400px, -200px) scale(1);
    opacity: 0;
  }
}

/* Raster Effect */
.hero-raster {
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(14,165,233,0.02) 2px,
    rgba(14,165,233,0.02) 4px
  );
  opacity: 0.5;
}

/* Glow Dots */
.hero-glow-dots {
  position: absolute;
  inset: 0;
}

.glow-dot {
  position: absolute;
  width: 6px;
  height: 6px;
  background: rgba(14,165,233,0.8);
  border-radius: 50%;
  box-shadow: 0 0 20px rgba(14,165,233,1), 0 0 40px rgba(14,165,233,0.6);
  animation: glowDotPulse 4s ease-in-out infinite;
}

.glow-dot:nth-child(1) { animation-delay: 0s; }
.glow-dot:nth-child(2) { animation-delay: 0.5s; }
.glow-dot:nth-child(3) { animation-delay: 1s; }
.glow-dot:nth-child(4) { animation-delay: 1.5s; }
.glow-dot:nth-child(5) { animation-delay: 2s; }
.glow-dot:nth-child(6) { animation-delay: 2.5s; }
.glow-dot:nth-child(7) { animation-delay: 3s; }
.glow-dot:nth-child(8) { animation-delay: 3.5s; }

@keyframes glowDotPulse {
  0%, 100% {
    opacity: 0.4;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.8);
  }
}

/* Glass Cards - Apple-style frosted glass */
.hero-glass-cards {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.glass-card {
  position: absolute;
  background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05));
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 24px;
  box-shadow:
    0 8px 32px rgba(0,0,0,0.1),
    inset 0 1px 0 rgba(255,255,255,0.2);
  overflow: hidden;
  animation: glassFloat 20s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.card-1 {
  width: 280px;
  height: 180px;
  top: 15%;
  right: 10%;
  animation-duration: 25s;
}

.card-2 {
  width: 220px;
  height: 140px;
  bottom: 20%;
  left: 8%;
  animation-duration: 30s;
  animation-delay: 5s;
}

.card-3 {
  width: 200px;
  height: 120px;
  top: 55%;
  right: 35%;
  animation-duration: 28s;
  animation-delay: 10s;
}

.glass-card-shine {
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(45deg, transparent, rgba(255,255,255,0.1), transparent);
  animation: shineMove 8s ease-in-out infinite;
}

@keyframes glassFloat {
  0%, 100% {
    transform: translate(0, 0) rotate(0deg);
    opacity: 0.6;
  }
  33% {
    transform: translate(20px, -20px) rotate(2deg);
    opacity: 0.8;
  }
  66% {
    transform: translate(-15px, 15px) rotate(-2deg);
    opacity: 0.7;
  }
}

@keyframes shineMove {
  0%, 100% {
    transform: translate(-100%, -100%);
  }
  50% {
    transform: translate(100%, 100%);
  }
}

/* Luminous Spheres - Soft glowing orbs */
.hero-luminous-spheres {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.luminous-sphere {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.3;
  animation: luminousFloat 30s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.sphere-1 {
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(14,165,233,0.6), rgba(14,165,233,0) 70%);
  top: 10%;
  left: 15%;
  animation-duration: 35s;
}

.sphere-2 {
  width: 350px;
  height: 350px;
  background: radial-gradient(circle, rgba(14,165,233,0.3), rgba(14,165,233,0) 70%);
  bottom: 15%;
  right: 20%;
  animation-duration: 40s;
  animation-delay: 8s;
}

.sphere-3 {
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(59,130,246,0.25), rgba(59,130,246,0) 70%);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation-duration: 38s;
  animation-delay: 16s;
}

@keyframes luminousFloat {
  0%, 100% {
    transform: translate(0, 0) scale(1);
  }
  33% {
    transform: translate(30px, -30px) scale(1.1);
  }
  66% {
    transform: translate(-25px, 25px) scale(0.95);
  }
}

/* Depth Layers - Parallax effect */
.hero-depth-layers {
  position: absolute;
  inset: 0;
}

.depth-layer {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(14,165,233,0.05), transparent 60%);
  animation: depthMove 40s ease-in-out infinite;
}

.layer-1 {
  animation-duration: 45s;
  opacity: 0.4;
}

.layer-2 {
  animation-duration: 50s;
  animation-delay: 10s;
  opacity: 0.3;
  background: radial-gradient(ellipse at center, rgba(14,165,233,0.03), transparent 60%);
}

.layer-3 {
  animation-duration: 55s;
  animation-delay: 20s;
  opacity: 0.2;
  background: radial-gradient(ellipse at center, rgba(59,130,246,0.03), transparent 60%);
}

@keyframes depthMove {
  0%, 100% {
    transform: scale(1) translate(0, 0);
  }
  50% {
    transform: scale(1.05) translate(2%, 2%);
  }
}

/* Light Sweep - Smooth scanning light */
.hero-light-sweep {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.light-sweep-beam {
  position: absolute;
  top: -50%;
  left: -10%;
  width: 30%;
  height: 200%;
  background: linear-gradient(90deg,
    transparent,
    rgba(255,255,255,0.03),
    rgba(14,165,233,0.08),
    rgba(255,255,255,0.03),
    transparent
  );
  transform: skewX(-20deg);
  animation: sweepMove 15s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes sweepMove {
  0% {
    left: -30%;
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    left: 100%;
    opacity: 0;
  }
}

/* Glass Shards - Crystalline fragments */
.hero-glass-shards {
  position: absolute;
  inset: 0;
}

.glass-shard {
  position: absolute;
  background: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
  animation: shardFloat 25s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.shard-1 {
  width: 120px;
  height: 80px;
  top: 25%;
  left: 20%;
  clip-path: polygon(30% 0%, 70% 0%, 100% 100%, 0% 100%);
  animation-duration: 28s;
}

.shard-2 {
  width: 100px;
  height: 100px;
  top: 60%;
  right: 25%;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  animation-duration: 32s;
  animation-delay: 5s;
}

.shard-3 {
  width: 90px;
  height: 70px;
  bottom: 30%;
  left: 15%;
  clip-path: polygon(0% 0%, 100% 0%, 80% 100%, 20% 100%);
  animation-duration: 30s;
  animation-delay: 10s;
}

.shard-4 {
  width: 110px;
  height: 90px;
  top: 40%;
  right: 15%;
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  animation-duration: 26s;
  animation-delay: 15s;
}

@keyframes shardFloat {
  0%, 100% {
    transform: translate(0, 0) rotate(0deg);
    opacity: 0.4;
  }
  33% {
    transform: translate(15px, -15px) rotate(5deg);
    opacity: 0.6;
  }
  66% {
    transform: translate(-10px, 10px) rotate(-5deg);
    opacity: 0.5;
  }
}

/* Soft Lights - Gentle ambient lighting */
.hero-soft-lights {
  position: absolute;
  inset: 0;
}

.soft-light {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.15;
  animation: softLightPulse 12s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.light-1 {
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(14,165,233,0.8), transparent 70%);
  top: 20%;
  left: 10%;
  animation-delay: 0s;
}

.light-2 {
  width: 250px;
  height: 250px;
  background: radial-gradient(circle, rgba(14,165,233,0.4), transparent 70%);
  top: 60%;
  right: 15%;
  animation-delay: 3s;
}

.light-3 {
  width: 280px;
  height: 280px;
  background: radial-gradient(circle, rgba(59,130,246,0.35), transparent 70%);
  bottom: 25%;
  left: 40%;
  animation-delay: 6s;
}

.light-4 {
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(14,165,233,0.5), transparent 70%);
  top: 35%;
  right: 35%;
  animation-delay: 9s;
}

@keyframes softLightPulse {
  0%, 100% {
    opacity: 0.15;
    transform: scale(1);
  }
  50% {
    opacity: 0.25;
    transform: scale(1.15);
  }
}

/* Gradient Mesh - Fluid color blobs */
.hero-gradient-mesh {
  position: absolute;
  inset: 0;
  filter: blur(100px);
  opacity: 0.2;
}

.mesh-blob {
  position: absolute;
  border-radius: 50%;
  animation: blobMove 35s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.blob-1 {
  width: 500px;
  height: 500px;
  background: linear-gradient(135deg, rgba(14,165,233,0.4), rgba(59,130,246,0.3));
  top: -100px;
  left: -100px;
  animation-duration: 40s;
}

.blob-2 {
  width: 450px;
  height: 450px;
  background: linear-gradient(225deg, rgba(59,130,246,0.3), rgba(14,165,233,0.25));
  bottom: -80px;
  right: -80px;
  animation-duration: 45s;
  animation-delay: 10s;
}

.blob-3 {
  width: 400px;
  height: 400px;
  background: linear-gradient(315deg, rgba(14,165,233,0.3), rgba(59,130,246,0.25));
  top: 50%;
  left: 30%;
  animation-duration: 42s;
  animation-delay: 20s;
}

.blob-4 {
  width: 350px;
  height: 350px;
  background: linear-gradient(45deg, rgba(14,165,233,0.25), rgba(59,130,246,0.2));
  top: 30%;
  right: 20%;
  animation-duration: 38s;
  animation-delay: 30s;
}

@keyframes blobMove {
  0%, 100% {
    transform: translate(0, 0) scale(1);
  }
  33% {
    transform: translate(50px, -50px) scale(1.1);
  }
  66% {
    transform: translate(-40px, 40px) scale(0.9);
  }
}

/* Light Particles - Floating luminous dots */
.hero-light-particles {
  position: absolute;
  inset: 0;
}

.light-particle {
  position: absolute;
  width: 4px;
  height: 4px;
  background: rgba(255,255,255,0.8);
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(255,255,255,0.8), 0 0 20px rgba(14,165,233,0.6);
  animation: particleDrift 20s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.light-particle:nth-child(1) {
  left: 15%;
  top: 25%;
  animation-delay: 0s;
  animation-duration: 22s;
}

.light-particle:nth-child(2) {
  left: 45%;
  top: 15%;
  animation-delay: 3s;
  animation-duration: 25s;
}

.light-particle:nth-child(3) {
  left: 75%;
  top: 35%;
  animation-delay: 6s;
  animation-duration: 23s;
}

.light-particle:nth-child(4) {
  left: 30%;
  top: 65%;
  animation-delay: 9s;
  animation-duration: 24s;
}

.light-particle:nth-child(5) {
  left: 60%;
  top: 55%;
  animation-delay: 12s;
  animation-duration: 26s;
}

.light-particle:nth-child(6) {
  left: 85%;
  top: 70%;
  animation-delay: 15s;
  animation-duration: 21s;
}

@keyframes particleDrift {
  0%, 100% {
    transform: translate(0, 0);
    opacity: 0.3;
  }
  25% {
    transform: translate(30px, -30px);
    opacity: 0.8;
  }
  50% {
    transform: translate(60px, -10px);
    opacity: 0.6;
  }
  75% {
    transform: translate(30px, 20px);
    opacity: 0.9;
  }
}

/* Reflections - Mirror-like light reflections */
.hero-reflections {
  position: absolute;
  inset: 0;
  opacity: 0.1;
}

.reflection {
  position: absolute;
  background: linear-gradient(135deg, rgba(255,255,255,0.2), transparent);
  filter: blur(30px);
  animation: reflectionShimmer 10s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.reflection-1 {
  width: 300px;
  height: 200px;
  top: 20%;
  left: 25%;
  transform: rotate(-15deg);
  animation-delay: 0s;
}

.reflection-2 {
  width: 250px;
  height: 180px;
  bottom: 30%;
  right: 30%;
  transform: rotate(20deg);
  animation-delay: 5s;
}

@keyframes reflectionShimmer {
  0%, 100% {
    opacity: 0.1;
  }
  50% {
    opacity: 0.3;
  }
}

/* Mobile Optimization for Hero Banner */
@media (max-width: 768px) {
  /* 移动端板块间距优化 */
  section {
    padding: 50px 0;
  }

  .section-title {
    margin-bottom: 36px;
  }

  .sec-pricing {
    padding-top: 50px;
    padding-bottom: 45px;
  }

  .hero {
    min-height: 600px;
    padding: 80px 0 60px;
    width: 100%;
    overflow: hidden;
  }

  .hero .container {
    width: 100%;
    max-width: 100%;
    padding: 0 16px;
    box-sizing: border-box;
  }

  .hero-label {
    font-size: 15px;
    margin-bottom: 12px;
  }

  .hero h1 {
    font-size: clamp(28px, 7vw, 40px);
    letter-spacing: -0.015em;
    margin-bottom: 16px;
    line-height: 1.1;
  }

  .hero p {
    font-size: 17px;
    line-height: 1.47;
    margin-bottom: 28px;
    width: 100%;
    max-width: 100%;
    padding: 0;
  }

  .hero-cta {
    margin-bottom: 40px;
    gap: 12px;
    flex-direction: column;
    align-items: center;
  }

  .btn-hero-primary,
  .btn-hero-outline {
    padding: 12px 24px;
    font-size: 16px;
    width: 100%;
    max-width: 300px;
  }

  /* 移动端统计数据 - 平板用2x2网格 */
  .hero-stats {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 400px !important;
    padding: 0 !important;
    margin: 0 auto !important;
    box-sizing: border-box;
  }

  .hero-stat {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 0 !important;
    height: 85px !important;
    padding: 14px 10px !important;
    border-radius: 12px !important;
    background:
      linear-gradient(135deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.06) 100%),
      linear-gradient(180deg, rgba(14,165,233,0.04) 0%, rgba(14,165,233,0.02) 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    backdrop-filter: blur(16px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(160%) !important;
    box-sizing: border-box;
    margin: 0 !important;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    opacity: 0.95 !important;
    animation: none !important;
    position: relative;
    box-shadow:
      0 4px 16px rgba(0,0,0,0.10),
      0 1px 4px rgba(0,0,0,0.08),
      inset 0 1px 0 rgba(255,255,255,0.18) !important;
  }

  .hero-stat::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg,
      transparent,
      rgba(255,255,255,0.3) 20%,
      rgba(255,255,255,0.4) 50%,
      rgba(255,255,255,0.3) 80%,
      transparent);
    opacity: 0.4;
    transition: opacity 0.3s ease;
  }

  .hero-stat::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 12px;
    background:
      radial-gradient(circle at 50% 0%, rgba(14,165,233,0.05), transparent 60%),
      linear-gradient(135deg, rgba(255,255,255,0.03), rgba(14,165,233,0.02));
    opacity: 0;
    transition: opacity 0.35s ease;
  }

  .hero-stat:active {
    transform: translateY(-1px) scale(0.98);
    background:
      linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.08) 100%),
      linear-gradient(180deg, rgba(14,165,233,0.08) 0%, rgba(14,165,233,0.04) 100%);
    border-color: rgba(14,165,233,0.25);
    box-shadow:
      0 6px 20px rgba(14,165,233,0.15),
      0 2px 8px rgba(14,165,233,0.10),
      inset 0 1px 1px rgba(255,255,255,0.2) !important;
    opacity: 1 !important;
  }

  .hero-stat:active::before {
    opacity: 0.8;
    background: linear-gradient(90deg,
      transparent,
      rgba(255,255,255,0.5) 20%,
      rgba(255,255,255,0.6) 50%,
      rgba(255,255,255,0.5) 80%,
      transparent);
  }

  .hero-stat:active::after {
    opacity: 1;
  }

  .hero-stat-divider {
    display: none !important;
  }

  .hero-stat-num {
    display: block;
    font-size: 24px !important;
    font-weight: 700 !important;
    color: #ffffff;
    margin-bottom: 4px !important;
    letter-spacing: -0.02em;
    line-height: 1;
    white-space: nowrap;
    text-shadow:
      0 1px 3px rgba(0,0,0,0.3),
      0 0 8px rgba(255,255,255,0.1);
    position: relative;
    z-index: 1;
    opacity: 0.98;
  }

  .hero-stat-label {
    display: block;
    font-size: 11px !important;
    color: #e5e5ea;
    font-weight: 600 !important;
    letter-spacing: 0.02em;
    line-height: 1.3;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    width: 100%;
    padding: 0 4px !important;
    box-sizing: border-box;
    text-transform: none;
    position: relative;
    z-index: 1;
    opacity: 0.85;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
  }

  /* Enhance background quality on mobile */
  .hero-bg {
    filter: brightness(1.05) contrast(1.1);
  }

  /* Pricing板块移动端适配 */
  .pricing-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    padding-top: 10px !important;
  }

  .pricing-card {
    padding: 36px 20px 22px !important;
    border-radius: 18px !important;
    background: rgba(255, 255, 255, 0.75) !important;
    backdrop-filter: saturate(180%) blur(20px) !important;
    -webkit-backdrop-filter: saturate(180%) blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.08),
                0 1px 4px rgba(0, 0, 0, 0.04),
                inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
  }

  .pricing-card.popular {
    transform: scale(1) !important;
    margin: 0 !important;
    background: linear-gradient(135deg, rgba(88, 86, 214, 0.95) 0%, rgba(139, 92, 246, 0.95) 100%) !important;
    backdrop-filter: saturate(180%) blur(20px) !important;
    -webkit-backdrop-filter: saturate(180%) blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 6px 24px rgba(88, 86, 214, 0.4),
                0 3px 12px rgba(139, 92, 246, 0.25),
                inset 0 1px 1px rgba(255, 255, 255, 0.25) !important;
  }

  .pricing-card:hover {
    transform: translateY(-4px) !important;
    background: rgba(255, 255, 255, 0.85) !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12),
                0 6px 12px rgba(0, 0, 0, 0.06),
                inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
  }

  .pricing-card.popular:hover {
    transform: translateY(-4px) scale(1) !important;
    background: linear-gradient(135deg, rgba(88, 86, 214, 0.98) 0%, rgba(139, 92, 246, 0.98) 100%) !important;
    box-shadow: 0 16px 40px rgba(88, 86, 214, 0.45),
                0 8px 20px rgba(139, 92, 246, 0.3),
                inset 0 1px 1px rgba(255, 255, 255, 0.3) !important;
  }

  .pricing-card .popular-badge {
    top: 10px !important;
    font-size: 9px !important;
    padding: 4px 12px !important;
    border-radius: 12px !important;
  }

  .pricing-card h3 {
    font-size: 16px !important;
    margin-bottom: 14px !important;
  }

  .pricing-card .price {
    font-size: 38px !important;
    margin-bottom: 18px !important;
  }

  .pricing-card .price span {
    font-size: 13px !important;
  }

  .pricing-card ul {
    margin-bottom: 20px !important;
  }

  .pricing-card ul li {
    font-size: 13px !important;
    padding: 8px 0 !important;
  }

  .pricing-card ul li::before {
    width: 15px !important;
    height: 15px !important;
    font-size: 9px !important;
    margin-right: 8px !important;
  }

  .pricing-card .btn {
    padding: 12px 24px !important;
    font-size: 14px !important;
    border-radius: 12px !important;
  }

  /* Hide only the most complex elements */
  .hero-circuit,
  .hero-digital-rain,
  .hero-code-stream,
  .hero-data-connections,
  .hero-rectangles,
  .hero-light-trails,
  .hero-hologram,
  .hero-raster,
  .hero-data-nodes {
    display: none;
  }

  /* Keep but optimize key visual elements */
  .hero-hexagons {
    opacity: 0.2;
    animation-duration: 50s;
  }

  .hero-diamonds {
    opacity: 0.6;
  }

  .hero-triangles {
    opacity: 0.5;
  }

  /* Optimize orb sizes for mobile - keep them large for impact */
  .hero-orb-1 {
    width: 500px;
    height: 500px;
    top: -150px;
    right: -150px;
    filter: blur(100px);
  }

  .hero-orb-2 {
    width: 450px;
    height: 450px;
    bottom: -120px;
    left: -120px;
    filter: blur(100px);
  }

  .hero-orb-3 {
    width: 400px;
    height: 400px;
    filter: blur(100px);
  }

  /* Enhance luminous spheres for better quality */
  .luminous-sphere {
    filter: blur(70px);
    opacity: 0.35;
  }

  .sphere-1 {
    width: 350px;
    height: 350px;
  }

  .sphere-2 {
    width: 320px;
    height: 320px;
  }

  .sphere-3 {
    width: 280px;
    height: 280px;
  }

  /* Enhance gradient mesh for richer colors */
  .hero-gradient-mesh {
    filter: blur(90px);
    opacity: 0.25;
  }

  .mesh-blob {
    animation-duration: 45s !important;
  }

  .blob-1 {
    width: 400px;
    height: 400px;
  }

  .blob-2 {
    width: 350px;
    height: 350px;
  }

  .blob-3 {
    width: 320px;
    height: 320px;
  }

  .blob-4 {
    width: 280px;
    height: 280px;
  }

  /* Enhance soft lights */
  .soft-light {
    filter: blur(50px);
    opacity: 0.2;
  }

  .light-1 {
    width: 280px;
    height: 280px;
  }

  .light-2 {
    width: 250px;
    height: 250px;
  }

  .light-3 {
    width: 240px;
    height: 240px;
  }

  .light-4 {
    width: 220px;
    height: 220px;
  }

  /* Keep more particles for richness */
  .hero-particles span:nth-child(n+8) {
    display: none;
  }

  .hero-light-particles .light-particle:nth-child(n+5) {
    display: none;
  }

  .hero-stars .star:nth-child(n+6) {
    display: none;
  }

  .hero-glow-dots .glow-dot:nth-child(n+6) {
    display: none;
  }

  /* Optimize glass shards - keep them for texture */
  .glass-shard {
    opacity: 0.5;
  }

  .shard-3,
  .shard-4 {
    display: none;
  }

  /* Optimize rings */
  .ring {
    animation-duration: 10s;
  }

  .ring-1,
  .ring-2 {
    max-width: 600px;
    max-height: 600px;
  }

  /* Enhance grid overlay */
  .hero-grid-overlay {
    background-size: 70px 70px;
    opacity: 0.35;
  }

  /* Enhance dots overlay */
  .hero-dots-overlay {
    background-size: 35px 35px;
    opacity: 0.5;
  }

  /* Keep energy waves for dynamics */
  .energy-wave {
    animation-duration: 7s;
  }

  /* Enhance light sweep for quality */
  .light-sweep-beam {
    animation-duration: 18s;
    opacity: 1;
  }

  /* Optimize depth layers */
  .depth-layer {
    animation-duration: 50s !important;
    opacity: 0.3;
  }

  /* Enhance reflections */
  .hero-reflections {
    opacity: 0.15;
  }

  /* Keep energy pulses for dynamics */
  .pulse {
    opacity: 0.8;
  }

  .pulse-4 {
    display: none;
  }

  /* Optimize lines animation */
  .hero-lines {
    opacity: 0.6;
    animation-duration: 35s;
  }

  /* Enhance pulse lines */
  .hero-pulse-lines {
    opacity: 0.4;
  }

  /* 新闻列表移动端优化 - 标题单行显示 */
  .news-box .news-list .news-item .news-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }
}

/* Extra small mobile devices */
@media (max-width: 480px) {
  .hero {
    min-height: 500px;
    padding: 60px 0 70px;
  }

  /* Keep quality but optimize further */
  .hero-diamonds,
  .hero-triangles {
    display: none;
  }

  /* Adjust orb sizes */
  .hero-orb-1 {
    width: 400px;
    height: 400px;
    filter: blur(90px);
  }

  .hero-orb-2 {
    width: 350px;
    height: 350px;
    filter: blur(90px);
  }

  .hero-orb-3 {
    width: 300px;
    height: 300px;
    filter: blur(90px);
  }

  /* Adjust luminous spheres */
  .luminous-sphere {
    filter: blur(60px);
  }

  .sphere-1 {
    width: 300px;
    height: 300px;
  }

  .sphere-2 {
    width: 270px;
    height: 270px;
  }

  .sphere-3 {
    width: 240px;
    height: 240px;
  }

  /* Adjust gradient mesh */
  .hero-gradient-mesh {
    filter: blur(80px);
  }

  .mesh-blob {
    animation-duration: 50s !important;
  }

  .blob-1 {
    width: 350px;
    height: 350px;
  }

  .blob-2 {
    width: 300px;
    height: 300px;
  }

  .blob-3 {
    width: 280px;
    height: 280px;
  }

  .blob-4 {
    width: 250px;
    height: 250px;
  }

  /* Adjust soft lights */
  .soft-light {
    filter: blur(45px);
  }

  .light-3,
  .light-4 {
    display: none;
  }

  /* Reduce particles slightly */
  .hero-particles span:nth-child(n+6) {
    display: none;
  }

  .hero-light-particles .light-particle:nth-child(n+4) {
    display: none;
  }

  .hero-stars .star:nth-child(n+5) {
    display: none;
  }

  /* Keep glass shards for texture */
  .glass-shard {
    opacity: 0.4;
  }

  .shard-2 {
    display: none;
  }

  /* Optimize energy waves */
  .wave-3 {
    display: none;
  }

  /* Keep depth layers for quality */
  .depth-layer {
    opacity: 0.25;
  }

  .layer-3 {
    display: none;
  }

  /* Optimize hero-stats for extra small screens - 2x2 grid layout */
  .hero-stats {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 20px !important;
    flex-wrap: wrap !important;
  }

  .hero-stat {
    height: 75px !important;
    padding: 12px 8px !important;
    border-radius: 12px !important;
    min-width: 0 !important;
  }

  .hero-stat-num {
    font-size: 20px !important;
    margin-bottom: 4px !important;
  }

  .hero-stat-label {
    font-size: 11px !important;
    padding: 0 4px !important;
    line-height: 1.3 !important;
  }
}

.hero .container {
  position: relative;
  z-index: 1;
  max-width: 1024px;
}

.hero-label {
  display: inline-block;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: 0.007em;
  color: #f5f5f7;
  margin-bottom: 8px;
  animation: fadeInUp 0.8s cubic-bezier(0.28, 0.11, 0.32, 1) 0.2s forwards;
}

.hero h1 {
  font-size: clamp(36px, 4.5vw, 56px);
  font-weight: 700;
  line-height: 1.0416666667;
  margin-bottom: 20px;
  letter-spacing: -0.009em;
  color: #f5f5f7;
  animation: fadeInUp 0.8s cubic-bezier(0.28, 0.11, 0.32, 1) 0.3s forwards;
}

.hero h1 em {
  background: linear-gradient(90deg, #06b6d4 0%, #3b82f6 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-style: normal;
  font-weight: 700;
}

.hero p {
  font-size: 24px;
  color: #86868b;
  max-width: 820px;
  margin: 0 auto 36px;
  line-height: 1.3333333333;
  font-weight: 400;
  letter-spacing: 0.007em;
  animation: fadeInUp 0.8s cubic-bezier(0.28, 0.11, 0.32, 1) 0.4s forwards;
}

.hero-cta {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 72px;
  animation: fadeInUp 0.8s cubic-bezier(0.28, 0.11, 0.32, 1) 0.5s forwards;
}
.btn-hero-primary {
  background: #0071e3;
  color: #fff;
  font-weight: 400;
  padding: 14px 28px;
  border-radius: 980px;
  font-size: 17px;
  line-height: 1.17648;
  letter-spacing: -0.022em;
  transition: all 0.3s cubic-bezier(0.28, 0.11, 0.32, 1);
  box-shadow: 0 2px 8px rgba(0,113,227,0.25);
  min-width: 120px;
}

.btn-hero-primary:hover {
  background: #0077ed;
  color: #fff;
  transform: scale(1.01);
  box-shadow: 0 4px 16px rgba(0,113,227,0.35);
}

.btn-hero-outline {
  background: transparent;
  color: #2997ff;
  border: 1px solid rgba(41,151,255,0.4);
  padding: 14px 28px;
  border-radius: 980px;
  font-size: 17px;
  line-height: 1.17648;
  letter-spacing: -0.022em;
  transition: all 0.3s cubic-bezier(0.28, 0.11, 0.32, 1);
  min-width: 120px;
}

.btn-hero-outline:hover {
  background: rgba(41,151,255,0.1);
  color: #2997ff;
  border-color: rgba(41,151,255,0.6);
}

.hero-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: nowrap;
  max-width: 100%;
  animation: fadeInScale 0.8s cubic-bezier(0.28, 0.11, 0.32, 1) 0.6s forwards;
  margin: 0 auto;
}

.hero-stat {
  text-align: center;
  animation: fadeInUp 0.6s cubic-bezier(0.28, 0.11, 0.32, 1) forwards;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 20px 24px;
  transition: all 0.3s cubic-bezier(0.28, 0.11, 0.32, 1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  min-width: 120px;
  flex: 0 0 auto;
}

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

.hero-stat:nth-child(1) {
  animation-delay: 0.7s;
}

.hero-stat:nth-child(2) {
  animation-delay: 0.75s;
}

.hero-stat:nth-child(3) {
  animation-delay: 0.8s;
}

.hero-stat:nth-child(4) {
  animation-delay: 0.85s;
}

.hero-stat-num {
  display: block;
  font-size: 40px;
  font-weight: 600;
  color: #f5f5f7;
  letter-spacing: -0.005em;
  line-height: 1.07143;
  margin-bottom: 4px;
}

.hero-stat-label {
  display: block;
  font-size: 12px;
  color: #86868b;
  font-weight: 400;
  letter-spacing: -0.016em;
  line-height: 1.42859;
}

.hero-stat-divider {
  display: none;
}

/* SECTIONS */
section {
  padding: 70px 0;
  position: relative;
  overflow: hidden;
  width: 100%;
}
section:not(.hero) { background: var(--bg); }
section:nth-child(even):not(.hero) { background: var(--bg2); }

/* 为不同板块添加独特背景 */
.sec-regions {
  background: linear-gradient(180deg, #ffffff 0%, #fbfbfd 100%);
  position: relative;
  overflow: hidden;
}
.sec-products {
  background: #f5f5f7;
  position: relative;
}
.sec-products::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,0,0,0.06) 50%, transparent);
}
.sec-advantages {
  background: linear-gradient(180deg, #fbfbfd 0%, #ffffff 100%);
}
.sec-scenarios {
  background: #ffffff;
}
.sec-pricing {
  background: #f5f5f7;
  position: relative;
  overflow: visible;
  padding-top: 70px;
  padding-bottom: 60px;
}
.sec-pricing::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,0,0,0.06) 50%, transparent);
}
.sec-network {
  background: linear-gradient(180deg, #fbfbfd 0%, #f5f5f7 100%);
}
.sec-reviews {
  background: #ffffff;
}
.sec-articles {
  background: linear-gradient(180deg, #fbfbfd 0%, #f5f5f7 100%);
}

/* SECTION TITLE */
.section-title { text-align: center; margin-bottom: 48px; }
.section-title .label {
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: #bf4800;
  margin-bottom: 8px;
  text-transform: uppercase;
}
.section-title h2 {
  font-size: 40px;
  font-weight: 600;
  margin-bottom: 16px;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--text);
}
.section-title p {
  color: var(--text-muted);
  font-size: 18px;
  line-height: 1.6;
  letter-spacing: 0;
  font-weight: 400;
  max-width: 720px;
  margin: 0 auto;
}

/* CARD BASE — 优化可读性的卡片样式 */
.region-card, .product-card, .adv-item,
.scenario-card, .pricing-card, .network-item,
.review-card, .article-card {
  border-radius: 16px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  background: #ffffff;
}

/* 移除过度装饰的光泽效果 */
.region-card::before, .product-card::before, .adv-item::before,
.scenario-card::before, .pricing-card::before, .network-item::before,
.review-card::before, .article-card::before {
  display: none;
}

/* REGIONS */
.regions-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; }
.region-card {
  padding: 32px 28px 28px;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: saturate(180%) blur(30px);
  -webkit-backdrop-filter: saturate(180%) blur(30px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.5);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
}
.region-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 56px rgba(0,0,0,0.16), 0 8px 24px rgba(0,0,0,0.08);
  border-color: rgba(255, 255, 255, 0.28);
}
.region-card .flag { font-size: 20px; margin-bottom: 10px; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: linear-gradient(135deg, rgba(0,113,227,0.08), rgba(0,113,227,0.02)); border-radius: 10px; line-height: 1; flex-shrink: 0; }
.region-card .card-header { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.region-card .card-header .flag { margin-bottom: 0; }
.region-card h3 {
  font-size: 21px;
  font-weight: 600;
  margin-bottom: 6px;
  color: #1d1d1f;
  letter-spacing: 0.011em;
  line-height: 1.19048;
}
.region-card .latency {
  font-size: 12px;
  color: #06c167;
  font-weight: 500;
  margin-bottom: 10px;
  letter-spacing: -0.01em;
}
.region-card p {
  font-size: 14px;
  color: #6e6e73;
  margin-bottom: 20px;
  line-height: 1.42859;
  letter-spacing: -0.016em;
  font-weight: 400;
  flex: 1;
}
.region-card .card-actions { display: flex; gap: 10px; margin-top: auto; }
.region-card-more .card-actions { justify-content: center; }
.region-card .btn-primary.btn-sm {
  background: #0071e3;
  color: #fff;
  border: none;
  padding: 7px 16px;
  border-radius: 980px;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: -0.01em;
}
.region-card .btn-primary.btn-sm:hover { background: #0077ed; transform: scale(1.02); }
.region-card .btn-outline.btn-sm {
  background: transparent;
  color: #0071e3;
  border: 1px solid rgba(0,113,227,0.3);
  padding: 7px 16px;
  border-radius: 980px;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: -0.01em;
}
.region-card .btn-outline.btn-sm:hover { background: rgba(0,113,227,0.04); border-color: #0071e3; }

/* PRODUCTS — 优化后的产品卡片 */
.products-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; }
.product-card {
  padding: 0;
  border-radius: 20px;
  overflow: hidden;
  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
  border: 1px solid rgba(0, 0, 0, 0.08);
}
.product-card:hover {
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12);
  transform: translateY(-3px);
  border-color: rgba(0, 113, 227, 0.3);
}
.product-card .icon {
  font-size: 48px;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100px;
  border-radius: 0;
  background: linear-gradient(135deg, #0071e3 0%, #0056b3 100%);
  transition: all 0.3s ease;
  position: relative;
}
.product-card .icon::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.08) 100%);
  pointer-events: none;
}
.product-card:hover .icon {
  background: linear-gradient(135deg, #0077ed 0%, #0061c7 100%);
}
.product-card .card-content {
  padding: 24px 26px 26px;
}
.product-card h3 {
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 10px;
  color: #1d1d1f;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.product-card p {
  color: #555555;
  font-size: 14px;
  margin-bottom: 16px;
  line-height: 1.6;
  letter-spacing: 0;
  font-weight: 400;
}
.product-card .tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.tag {
  background: rgba(0, 113, 227, 0.08);
  color: #0071e3;
  border: 1px solid rgba(0, 113, 227, 0.15);
  border-radius: 14px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0;
  transition: all 0.3s ease;
  white-space: nowrap;
}
.tag:hover {
  background: rgba(0, 113, 227, 0.12);
  border-color: rgba(0, 113, 227, 0.25);
}

/* ADVANTAGES — 优化后的优势卡片 (WHY LUCKVM) */
.adv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.adv-item {
  padding: 36px 28px;
  text-align: center;
  border-radius: 20px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
  border: 1px solid rgba(0, 0, 0, 0.08);
}
.adv-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #0071e3 0%, #00a8ff 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.adv-item:hover::before {
  opacity: 1;
}
.adv-item:hover {
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12);
  transform: translateY(-4px);
  border-color: rgba(0, 113, 227, 0.2);
  background: #ffffff;
}
.adv-item .icon {
  font-size: 52px;
  margin: 0 auto 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(0,113,227,0.1), rgba(0,168,255,0.05));
  border: 2px solid rgba(0, 113, 227, 0.15);
  box-shadow: 0 4px 12px rgba(0,113,227,0.08);
  transition: all 0.3s ease;
  position: relative;
}
.adv-item .icon::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0071e3, #00a8ff);
  opacity: 0;
  z-index: -1;
  transition: opacity 0.3s ease;
}
.adv-item:hover .icon {
  background: linear-gradient(135deg, rgba(0,113,227,0.15), rgba(0,168,255,0.08));
  transform: scale(1.08) rotate(-3deg);
  box-shadow: 0 6px 20px rgba(0,113,227,0.15);
  border-color: rgba(0, 113, 227, 0.25);
}
.adv-item:hover .icon::after {
  opacity: 0.08;
}
.adv-item h4 {
  font-size: 19px;
  font-weight: 600;
  margin-bottom: 10px;
  color: #1d1d1f;
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.adv-item p {
  font-size: 14px;
  color: #555555;
  line-height: 1.6;
  letter-spacing: 0;
  font-weight: 400;
}

/* SCENARIOS — 还原之前的场景卡片样式 */
.scenarios-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 20px; }
.scenario-card {
  padding: 32px 24px;
  text-align: center;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: saturate(180%) blur(30px);
  -webkit-backdrop-filter: saturate(180%) blur(30px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.5);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.scenario-card:hover {
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.20), 0 8px 24px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  transform: translateY(-6px) scale(1.02);
  border-color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.92);
}
.scenario-card .icon {
  font-size: 40px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin-left: auto;
  margin-right: auto;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(0,113,227,0.08), rgba(0,113,227,0.02));
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.scenario-card:hover .icon {
  background: linear-gradient(135deg, rgba(0,113,227,0.15), rgba(0,113,227,0.05));
  transform: scale(1.1);
}
.scenario-card h4 {
  font-size: 17px;
  font-weight: 600;
  margin-bottom: 6px;
  color: #1d1d1f;
  letter-spacing: -0.022em;
  line-height: 1.23536;
}
.scenario-card p {
  font-size: 12px;
  color: #6e6e73;
  line-height: 1.33337;
  letter-spacing: -0.01em;
  font-weight: 400;
}

/* PRICING PAGE REDESIGN */

/* Hero Section */
.pricing-hero {
  background: linear-gradient(135deg, #1a1a1c 0%, #2d2d2f 50%, #1a1a1c 100%);
  padding: 80px 0 100px;
  position: relative;
  overflow: hidden;
}

.pricing-hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 50% 0%, rgba(0, 113, 227, 0.15) 0%, transparent 60%);
  pointer-events: none;
}

.pricing-hero-content {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
}

.pricing-hero-title {
  font-size: 56px;
  font-weight: 700;
  color: #ffffff;
  margin: 16px 0 20px;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.pricing-hero-desc {
  font-size: 19px;
  color: #a1a1a6;
  line-height: 1.6;
  margin-bottom: 40px;
}

/* Billing Toggle */
.billing-toggle {
  display: inline-flex;
  gap: 12px;
  background: rgba(255, 255, 255, 0.05);
  padding: 6px;
  border-radius: 16px;
  margin-bottom: 32px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.billing-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 32px;
  border: none;
  border-radius: 12px;
  background: transparent;
  color: #a1a1a6;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.billing-btn.active {
  background: #0071e3;
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(0, 113, 227, 0.4);
}

.billing-label {
  font-size: 15px;
  font-weight: 600;
}

.billing-desc {
  font-size: 12px;
  opacity: 0.7;
}

.billing-badge {
  font-size: 12px;
  font-weight: 600;
  background: linear-gradient(135deg, #06c167 0%, #04a855 100%);
  color: #ffffff;
  padding: 2px 8px;
  border-radius: 6px;
}

/* Promo Tags */
.promo-tags {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

.promo-tag {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  color: #f5f5f7;
  font-size: 14px;
  font-weight: 500;
}

.promo-tag svg {
  color: #0071e3;
}

/* Region Selector */
.region-selector-section {
  background: #ffffff;
  padding: 60px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.region-selector-header {
  text-align: center;
  margin-bottom: 36px;
}

.region-selector-header h2 {
  font-size: 32px;
  font-weight: 700;
  color: #1d1d1f;
  margin-bottom: 12px;
  letter-spacing: -0.02em;
}

.region-selector-header p {
  font-size: 17px;
  color: #555555;
}

.region-selector {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 16px;
  max-width: 1000px;
  margin: 0 auto;
}

.region-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 20px 16px;
  background: #f5f5f7;
  border: 2px solid rgba(0, 0, 0, 0.06);
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.region-btn::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 113, 227, 0.15) 0%, transparent 70%);
  transform: translate(-50%, -50%);
  transition: width 0.5s ease, height 0.5s ease;
}

.region-btn:hover {
  background: #ffffff;
  border-color: rgba(0, 113, 227, 0.2);
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

.region-btn.active {
  background: linear-gradient(135deg, #0071e3 0%, #0077ed 100%);
  border-color: #0071e3;
  color: #ffffff;
  box-shadow: 0 8px 24px rgba(0, 113, 227, 0.3);
}

.region-btn.active::after {
  width: 300px;
  height: 300px;
}

.region-icon {
  font-size: 32px;
}

.region-name {
  font-size: 15px;
  font-weight: 600;
  color: #1d1d1f;
}

.region-btn.active .region-name,
.region-btn.active .region-ping {
  color: #ffffff;
}

.region-ping {
  font-size: 12px;
  color: #86868b;
}

/* Pricing Section */
.pricing-section {
  padding: 80px 0;
  background: #ffffff;
}

.pricing-section-alt {
  background: #f5f5f7;
}

.pricing-section-header {
  text-align: center;
  margin-bottom: 56px;
}

.section-badge {
  display: inline-block;
  padding: 6px 16px;
  background: rgba(0, 113, 227, 0.1);
  color: #0071e3;
  font-size: 13px;
  font-weight: 600;
  border-radius: 12px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.section-title {
  font-size: 44px;
  font-weight: 700;
  color: #1d1d1f;
  margin-bottom: 16px;
  letter-spacing: -0.03em;
}

.section-desc {
  font-size: 19px;
  color: #555555;
  line-height: 1.6;
  max-width: 700px;
  margin: 0 auto;
}
/* PRICING CARDS - SIMPLE & ELEGANT REDESIGN */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: stretch;
  position: relative;
  overflow: visible;
  padding-top: 20px;
}

.pricing-card {
  padding: 28px 32px 26px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  position: relative;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  overflow: visible;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08),
              0 2px 6px rgba(0, 0, 0, 0.04),
              inset 0 1px 0 rgba(255, 255, 255, 0.8);
  padding-top: 40px;
}

.pricing-card:hover {
  transform: translateY(-6px);
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12),
              0 8px 16px rgba(0, 0, 0, 0.06),
              inset 0 1px 0 rgba(255, 255, 255, 0.9);
  border-color: rgba(0, 113, 227, 0.3);
}

.pricing-card.popular {
  background: linear-gradient(135deg, rgba(88, 86, 214, 0.95) 0%, rgba(139, 92, 246, 0.95) 100%);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #ffffff;
  transform: scale(1.05);
  box-shadow: 0 8px 32px rgba(88, 86, 214, 0.4),
              0 4px 16px rgba(139, 92, 246, 0.25),
              inset 0 1px 1px rgba(255, 255, 255, 0.25);
}

.pricing-card.popular:hover {
  transform: translateY(-6px) scale(1.05);
  background: linear-gradient(135deg, rgba(88, 86, 214, 0.98) 0%, rgba(139, 92, 246, 0.98) 100%);
  box-shadow: 0 20px 48px rgba(88, 86, 214, 0.45),
              0 10px 24px rgba(139, 92, 246, 0.3),
              inset 0 1px 1px rgba(255, 255, 255, 0.3);
  border-color: rgba(255, 255, 255, 0.45);
}

.popular-badge {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
  color: #ffffff;
  font-size: 10px;
  font-weight: 700;
  padding: 4px 14px;
  border-radius: 14px;
  white-space: nowrap;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: 0 4px 12px rgba(255, 107, 53, 0.45),
              0 2px 4px rgba(0, 0, 0, 0.15);
  z-index: 2;
  border: 2px solid #ffffff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.pricing-card h3 {
  font-size: 18px;
  font-weight: 700;
  color: #1d1d1f;
  margin: 0 0 16px 0;
  letter-spacing: -0.01em;
  text-align: center;
}

.pricing-card.popular h3 {
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.pricing-card .price {
  font-size: 42px;
  font-weight: 700;
  color: #0071e3;
  margin-bottom: 20px;
  letter-spacing: -0.02em;
  text-align: center;
  display: flex;
  align-items: baseline;
  justify-content: center;
  line-height: 1;
}

.pricing-card.popular .price {
  color: #ffffff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.pricing-card .price span {
  font-size: 15px;
  font-weight: 500;
  color: #6e6e73;
  margin-left: 2px;
}

.pricing-card.popular .price span {
  color: rgba(255, 255, 255, 0.85);
}

.pricing-card ul {
  list-style: none;
  padding: 0;
  margin: 0 0 24px 0;
  flex: 1;
}

.pricing-card ul li {
  padding: 9px 0;
  font-size: 14px;
  color: #1d1d1f;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  display: flex;
  align-items: center;
  font-weight: 500;
}

.pricing-card ul li:last-child {
  border-bottom: none;
}

.pricing-card ul li::before {
  content: '✓';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  background: linear-gradient(135deg, #34c759 0%, #28a745 100%);
  color: #ffffff;
  border-radius: 50%;
  margin-right: 10px;
  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0;
  box-shadow: 0 2px 4px rgba(52, 199, 89, 0.3);
}

.pricing-card.popular ul li {
  color: rgba(255, 255, 255, 0.95);
  border-bottom-color: rgba(255, 255, 255, 0.15);
}

.pricing-card.popular ul li::before {
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2),
              inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.pricing-card .btn {
  width: 100%;
  justify-content: center;
  padding: 13px 28px;
  font-size: 15px;
  font-weight: 600;
  border-radius: 14px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border: 2px solid transparent;
}

.pricing-card .btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

.pricing-card .btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.pricing-card .btn-outline {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #0071e3;
  border: 2px solid rgba(0, 113, 227, 0.3);
  box-shadow: 0 4px 12px rgba(0, 113, 227, 0.15),
              inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.pricing-card .btn-outline:hover {
  background: #0071e3;
  color: #ffffff;
  border-color: #0071e3;
  box-shadow: 0 6px 16px rgba(0, 113, 227, 0.3);
}

.pricing-card.popular .btn-primary {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #0071e3;
  border: 2px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 4px 16px rgba(255, 255, 255, 0.35),
              0 2px 6px rgba(0, 0, 0, 0.1),
              inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.pricing-card.popular .btn-primary:hover {
  background: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 255, 255, 0.45),
              0 3px 10px rgba(0, 0, 0, 0.15);
}


.card-header {
  margin-bottom: 32px;
}
  font-weight: 400;
}

.pricing-card.popular .card-subtitle {
  color: rgba(255, 255, 255, 0.8);
}

.card-price {
  margin-bottom: 8px;
}

.price-currency {
  font-size: 24px;
  font-weight: 600;
  color: #1d1d1f;
  vertical-align: top;
}

.pricing-card.popular .price-currency {
  color: #ffffff;
}

.price-amount {
  font-size: 56px;
  font-weight: 700;
  color: #1d1d1f;
  letter-spacing: -0.03em;
  line-height: 1;
}

.pricing-card.popular .price-amount {
  color: #ffffff;
}

.price-period {
  font-size: 18px;
  color: #86868b;
  font-weight: 500;
  margin-left: 4px;
}

.pricing-card.popular .price-period {
  color: rgba(255, 255, 255, 0.8);
}

.price-custom {
  font-size: 32px;
  font-weight: 700;
  color: #1d1d1f;
  letter-spacing: -0.02em;
}

.pricing-card.popular .price-custom {
  color: #ffffff;
}

.price-note {
  font-size: 13px;
  color: #06c167;
  font-weight: 500;
  margin-bottom: 32px;
}

.pricing-card.popular .price-note {
  color: rgba(255, 255, 255, 0.9);
}

.card-features {
  list-style: none;
  padding: 0;
  margin: 0 0 40px 0;
  flex: 1;
}

.card-features li {
  font-size: 15px;
  color: #555555;
  padding: 10px 0;
  display: flex;
  align-items: center;
  gap: 12px;
  line-height: 1.6;
}

.pricing-card.popular .card-features li {
  color: rgba(255, 255, 255, 0.95);
}

.card-features li::before {
  content: "✓";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #06c167;
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}

.pricing-card.popular .card-features li::before {
  background: rgba(255, 255, 255, 0.25);
  color: #ffffff;
}

.card-features li strong {
  font-weight: 600;
  color: #1d1d1f;
}

.pricing-card.popular .card-features li strong {
  color: #ffffff;
}

.card-btn {
  display: block;
  width: 100%;
  padding: 16px 28px;
  border-radius: 14px;
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: none;
  letter-spacing: -0.01em;
}

.btn-outline {
  background: #f5f5f7;
  color: #1d1d1f;
  border: 1.5px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.btn-outline:hover {
  background: #1d1d1f;
  color: #ffffff;
  border-color: #1d1d1f;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

.btn-primary {
  background: rgba(255, 255, 255, 0.25);
  color: #ffffff;
  border: 1.5px solid rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15),
              inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.btn-primary:hover {
  background: #ffffff;
  color: #0071e3;
  border-color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(255, 255, 255, 0.3);
}

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


.pricing-card h3 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 12px;
  color: #86868b;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.pricing-card.popular h3 {
  color: #efefef;
}

.pricing-card .price {
  font-size: 56px;
  font-weight: 700;
  color: var(--text);
  margin: 16px 0 24px;
  letter-spacing: -0.03em;
  line-height: 1;
  background: linear-gradient(135deg, #1d1d1f 0%, #4a4a4a 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.pricing-card.popular .price {
  background: linear-gradient(135deg, #f1f1f1 0%, #f1f1f1 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.pricing-card .price span {
  font-size: 18px;
  color: #86868b;
  font-weight: 500;
  letter-spacing: 0;
}

.pricing-card.popular .price span {
  color: #a1a1a6;
}

.pricing-card ul {
  list-style: none;
  margin-bottom: 28px;
}

.pricing-card ul li {
  font-size: 15px;
  color: var(--text);
  padding: 14px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  gap: 12px;
  letter-spacing: 0;
  font-weight: 400;
  line-height: 1.5;
  transition: padding-left 0.3s ease;
}

.pricing-card ul li:hover {
  padding-left: 4px;
}

.pricing-card.popular ul li {
  color: #f5f5f7;
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

.pricing-card ul li::before {
  content: "✓";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: linear-gradient(135deg, #06c167 0%, #04a855 100%);
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(6, 193, 103, 0.3);
}

.pricing-card .btn-outline {
  background: transparent;
  color: var(--primary);
  border: 2px solid rgba(0, 113, 227, 0.2);
  font-weight: 600;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.pricing-card .btn-outline:hover {
  background: var(--primary);
  color: #ffffff;
  border-color: var(--primary);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 113, 227, 0.3);
}

.pricing-card .btn-primary {
  background: linear-gradient(135deg, #0071e3 0%, #0077ed 100%);
  color: #fff;
  border: none;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(0, 113, 227, 0.3);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.pricing-card .btn-primary:hover {
  background: linear-gradient(135deg, #0077ed 0%, #0081ff 100%);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 113, 227, 0.4);
}

/* 地区选择器 */
.region-filter-btn {
  transition: all 0.3s ease;
}
.region-filter-btn:hover {
  background: #e8e8ed !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.region-filter-btn.active {
  background: #0071e3 !important;
  color: #fff !important;
  border-color: #0071e3 !important;
  box-shadow: 0 4px 12px rgba(0,113,227,0.3);
}

/* 价格卡片切换动画 - 全新设计 */
.pricing-grid {
  position: relative;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.pricing-card {
  opacity: 1;
  transform: translateY(0) rotateY(0deg) scale(1);
  transition: all 0.5s cubic-bezier(0.34, 1.26, 0.64, 1);
  will-change: opacity, transform;
  transform-origin: center center;
}

/* 淡出动画 - 3D翻转退出 */
.pricing-card.hiding {
  opacity: 0;
  transform: translateY(-30px) rotateX(-15deg) scale(0.9);
  transition: all 0.4s cubic-bezier(0.55, 0.085, 0.68, 0.53);
}

/* 完全隐藏 */
.pricing-card.hidden {
  opacity: 0;
  transform: translateY(-30px) rotateX(-15deg) scale(0.9);
  pointer-events: none;
  position: absolute;
  visibility: hidden;
  height: 0;
  overflow: hidden;
}

/* 淡入动画 - 3D翻转进入 */
.pricing-card.showing {
  animation: card3DEnter 0.7s cubic-bezier(0.34, 1.26, 0.64, 1) forwards;
}

.pricing-card.show {
  opacity: 1;
  transform: translateY(0) rotateY(0deg) scale(1);
}

@keyframes card3DEnter {
  0% {
    opacity: 0;
    transform: translateY(50px) rotateX(20deg) scale(0.85);
  }
  40% {
    opacity: 0.5;
    transform: translateY(10px) rotateX(5deg) scale(0.95);
  }
  70% {
    opacity: 0.9;
    transform: translateY(-5px) rotateX(-2deg) scale(1.02);
  }
  85% {
    transform: translateY(2px) rotateX(0deg) scale(0.99);
  }
  100% {
    opacity: 1;
    transform: translateY(0) rotateX(0deg) scale(1);
  }
}

/* 卡片交错动画延迟 */
.pricing-card:nth-child(1).showing {
  animation-delay: 0s;
}
.pricing-card:nth-child(2).showing {
  animation-delay: 0.1s;
}
.pricing-card:nth-child(3).showing {
  animation-delay: 0.2s;
}
.pricing-card:nth-child(4).showing {
  animation-delay: 0.3s;
}

/* 备用动画方案 - 滑动进入 */
@keyframes cardSlideIn {
  0% {
    opacity: 0;
    transform: translateX(-60px) scale(0.9);
  }
  60% {
    opacity: 0.8;
    transform: translateX(10px) scale(1.02);
  }
  100% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

/* 波浪式进入效果 */
@keyframes cardWaveIn {
  0% {
    opacity: 0;
    transform: translateY(60px) scale(0.8) rotate(-5deg);
  }
  50% {
    opacity: 0.7;
    transform: translateY(-10px) scale(1.05) rotate(2deg);
  }
  75% {
    transform: translateY(5px) scale(0.98) rotate(-1deg);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1) rotate(0deg);
  }
}

/* 空状态提示 - 重新设计 */
.empty-state {
  grid-column: 1 / -1;
  text-align: center;
  padding: 80px 40px;
  background: linear-gradient(135deg, #f9f9fb 0%, #ffffff 100%);
  border-radius: 24px;
  border: 2px dashed rgba(0, 113, 227, 0.15);
  opacity: 0;
  transform: translateY(40px) scale(0.95);
  transition: all 0.6s cubic-bezier(0.34, 1.26, 0.64, 1);
  position: relative;
  overflow: hidden;
}

.empty-state::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(0, 113, 227, 0.05) 0%, transparent 70%);
  animation: rotateGradient 10s linear infinite;
}

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

.empty-state.show {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.empty-state-icon {
  font-size: 72px;
  margin-bottom: 20px;
  opacity: 0.7;
  animation: floatIcon 3s ease-in-out infinite;
  position: relative;
  z-index: 1;
}

@keyframes floatIcon {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  25% {
    transform: translateY(-8px) rotate(-5deg);
  }
  75% {
    transform: translateY(-8px) rotate(5deg);
  }
}

.empty-state h3 {
  font-size: 28px;
  font-weight: 700;
  color: #1d1d1f;
  margin-bottom: 16px;
  position: relative;
  z-index: 1;
}

.empty-state p {
  font-size: 17px;
  color: #555555;
  margin-bottom: 32px;
  line-height: 1.6;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  z-index: 1;
}

.empty-state .btn {
  display: inline-block;
  margin: 0 8px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  z-index: 1;
}

/* 加载过渡效果 */
.pricing-grid.transitioning {
  pointer-events: none;
}

/* 地区按钮波纹效果 - 增强版 */
.region-filter-btn {
  position: relative;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.region-filter-btn::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 113, 227, 0.3) 0%, rgba(0, 113, 227, 0.1) 100%);
  transform: translate(-50%, -50%);
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1),
              height 0.6s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.6s ease;
  opacity: 0;
}

.region-filter-btn.active::after {
  width: 250px;
  height: 250px;
  opacity: 1;
}

.region-filter-btn:active {
  transform: scale(0.96);
}

.region-filter-btn:active::after {
  width: 250px;
  height: 250px;
  opacity: 0.7;
  transition: width 0s, height 0s, opacity 0.3s;
}

/* FAQ 常见问题 */
.sec-faq {
  background: #ffffff;
}
.faq-list {
  max-width: 800px;
  margin: 0 auto;
}
.faq-item {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 16px;
  margin-bottom: 16px;
  overflow: hidden;
  transition: all 0.3s ease;
}
.faq-item:hover {
  border-color: rgba(0, 0, 0, 0.15);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.faq-question {
  padding: 24px 28px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  user-select: none;
}
.faq-question h3 {
  font-size: 17px;
  font-weight: 600;
  color: #1d1d1f;
  margin: 0;
  letter-spacing: 0;
}
.faq-icon {
  font-size: 24px;
  color: #555555;
  font-weight: 300;
  transition: transform 0.3s ease;
  flex-shrink: 0;
  margin-left: 16px;
}
.faq-item.active .faq-icon {
  transform: rotate(45deg);
}
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease;
}
.faq-item.active .faq-answer {
  max-height: 500px;
  padding: 0 28px 24px;
}
.faq-answer p {
  font-size: 15px;
  line-height: 1.6;
  color: #555555;
  margin: 0;
}

/* NETWORK — 苹果风格网络卡片 */
.network-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 24px; }
.network-item {
  padding: 36px 32px;
  text-align: center;
  border-radius: 20px;
}
.network-item:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
  border-color: rgba(0, 0, 0, 0.15);
}
.network-item h4 {
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 12px;
  color: #1d1d1f;
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.network-item p {
  font-size: 15px;
  color: #555555;
  line-height: 1.6;
  letter-spacing: 0;
  font-weight: 400;
}

/* REVIEWS — 苹果风格评价卡片 */
.reviews-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; }
.review-card {
  padding: 36px 32px;
  border-radius: 20px;
}
.review-card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  transform: translateY(-6px) scale(1.01);
  border-color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.92);
}
.review-card .stars {
  color: #f5a623;
  margin-bottom: 16px;
  font-size: 16px;
  letter-spacing: 2px;
}
.review-card p {
  font-size: 16px;
  color: #1d1d1f;
  margin-bottom: 16px;
  line-height: 1.6;
  font-style: normal;
  letter-spacing: 0;
  font-weight: 400;
}
.review-card .author {
  font-size: 14px;
  font-weight: 400;
  color: #555555;
  letter-spacing: 0;
}

/* ARTICLES — 苹果风格文章卡片 */
.articles-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 24px; }
.article-card {
  padding: 32px 28px;
  display: block;
  color: inherit;
  border-radius: 20px;
}
.article-card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
  border-color: rgba(0, 0, 0, 0.15);
  text-decoration: none;
  color: inherit;
}
.article-card .cat {
  font-size: 12px;
  color: #fff;
  background: linear-gradient(135deg, #0071e3, #0077ed);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 12px;
  font-weight: 600;
  display: inline-block;
  padding: 5px 12px;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0,113,227,0.25);
}
.article-card h4 {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 12px;
  color: #1d1d1f;
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.article-card p {
  font-size: 15px;
  color: #555555;
  line-height: 1.6;
  letter-spacing: 0;
  font-weight: 400;
}

/* FAQ — 苹果风格常见问题板块 */
.sec-faq {
  background: linear-gradient(180deg, #f5f5f7 0%, #ffffff 100%);
  position: relative;
}
.sec-faq::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,0,0,0.06) 50%, transparent);
}
.faq-list {
  max-width: 920px;
  margin: 0 auto;
}
.faq-item {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 16px;
  margin-bottom: 16px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  position: relative;
}
.faq-item::before {
  display: none;
}
.faq-item:hover {
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.12),
    0 8px 24px rgba(0, 0, 0, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
  border-color: rgba(255, 255, 255, 0.35);
  transform: translateY(-4px);
  background: rgba(255, 255, 255, 0.92);
}
.faq-item:hover::before {
  opacity: 1;
}
.faq-question {
  padding: 24px 28px;
  cursor: pointer;
  position: relative;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.faq-question:hover {
  background: rgba(0, 113, 227, 0.02);
}
.faq-question h3 {
  font-size: 18px;
  font-weight: 600;
  color: #1d1d1f;
  margin: 0;
  letter-spacing: -0.01em;
  line-height: 1.4;
  transition: color 0.3s ease;
  flex: 1;
}
.faq-icon {
  font-size: 28px;
  font-weight: 300;
  color: #86868b;
  transition: transform 0.3s ease, color 0.3s ease;
  flex-shrink: 0;
  margin-left: 20px;
  line-height: 1;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.04);
}
.faq-item.active .faq-question h3 {
  color: #0071e3;
}
.faq-item.active .faq-icon {
  transform: rotate(45deg);
  color: #fff;
  background: linear-gradient(135deg, #0071e3, #0077ed);
  box-shadow: 0 2px 8px rgba(0, 113, 227, 0.3);
}
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease, opacity 0.3s ease;
  opacity: 0;
}
.faq-item.active .faq-answer {
  max-height: 600px;
  padding: 0 28px 24px 28px;
  opacity: 1;
}
.faq-item p {
  font-size: 16px;
  color: #555555;
  line-height: 1.6;
  letter-spacing: 0;
  font-weight: 400;
  margin: 0;
}

/* FOOTER */
footer {
  background: linear-gradient(180deg, #1d1d1f 0%, #161617 100%);
  border-top: 1px solid rgba(255,255,255,0.1);
  padding: 80px 0 32px;
  width: 100%;
  overflow: hidden;
  margin: 0;
}
.footer-brand p {
  font-size: 14px;
  color: #a1a1a6;
  margin-top: 12px;
  max-width: 280px;
  line-height: 1.42859;
  letter-spacing: -0.016em;
  font-weight: 400;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr repeat(4, 1fr);
  gap: 48px;
  margin-bottom: 48px;
}
.logo-footer {
  font-size: 21px;
  font-weight: 600;
  color: #f5f5f7;
  letter-spacing: -0.5px;
}
.logo-footer span { color: #0071e3; }
.footer-col h5 {
  font-size: 12px;
  font-weight: 600;
  color: #f5f5f7;
  margin-bottom: 16px;
  letter-spacing: -0.01em;
}
.footer-col a {
  display: block;
  font-size: 14px;
  color: #a1a1a6;
  margin-bottom: 10px;
  transition: color 0.3s var(--transition);
  letter-spacing: -0.016em;
  font-weight: 400;
}
.footer-col a:hover { color: #2997ff; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.footer-bottom p {
  font-size: 12px;
  color: #86868b;
  letter-spacing: -0.01em;
  font-weight: 400;
}

/* 移动端菜单按钮 */
.mobile-menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: space-around;
  width: 24px;
  height: 24px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  z-index: 10000;
}

.mobile-menu-toggle span {
  width: 24px;
  height: 2px;
  background: #f5f5f7;
  border-radius: 2px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: center;
}

.mobile-menu-toggle.active span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.mobile-menu-toggle.active span:nth-child(2) {
  opacity: 0;
}

.mobile-menu-toggle.active span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* 移动端菜单 */
.mobile-menu {
  position: fixed;
  top: 56px;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.95);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow-y: auto;
  display: none;
}

@media (max-width: 768px) {
  .mobile-menu {
    display: block;
  }
}

.mobile-menu.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.mobile-menu-content {
  padding: 20px 22px;
}

.mobile-menu-content > a {
  display: block;
  color: #f5f5f7;
  font-size: 16px;
  font-weight: 500;
  padding: 16px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.2s ease;
  letter-spacing: 0.01em;
}

.mobile-menu-content > a:hover {
  opacity: 0.7;
}

.mobile-dropdown {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.mobile-dropdown-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  justify-content: space-between;
  align-items: center;
  background: transparent;
  border: none;
  color: #f5f5f7;
  font-size: 17px;
  font-weight: 400;
  padding: 14px 0;
  cursor: pointer;
  text-align: left;
}

.mobile-dropdown-toggle::after {
  content: '+';
  font-size: 20px;
  font-weight: 300;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.mobile-dropdown.active .mobile-dropdown-toggle::after {
  content: '−';
}

.mobile-dropdown-menu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.mobile-dropdown.active .mobile-dropdown-menu {
  max-height: 300px;
}

.mobile-dropdown-menu a {
  display: block;
  color: #a1a1a6;
  font-size: 15px;
  padding: 10px 0 10px 16px;
  transition: color 0.2s ease;
}

.mobile-dropdown-menu a:hover {
  color: #f5f5f7;
}

.mobile-menu-actions {
  display: flex;
  gap: 12px;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.mobile-menu-actions .btn {
  flex: 1;
  text-align: center;
  padding: 12px 20px;
  font-size: 16px;
  font-weight: 500;
}

@media (max-width: 768px) {
  .nav-links { display: none; }
  .nav-actions { display: none; }
  .mobile-menu-toggle { display: flex; }
  .logo { font-size: 20px; }

  /* 移动端页脚 - 苹果风格，缩减空白 */
  footer {
    padding: 24px 0 16px;
    background: linear-gradient(180deg, #1d1d1f 0%, #161617 100%);
  }
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 0;
    margin-bottom: 16px;
  }
  .footer-brand {
    text-align: left;
    padding: 0 0 16px 0;
    border-bottom: none;
    order: 5;
  }
  .footer-brand .logo {
    font-size: 19px;
    margin-bottom: 6px;
    display: block;
    color: #f5f5f7;
  }
  .footer-brand p {
    max-width: 100%;
    margin: 0;
    font-size: 11px;
    line-height: 1.36364;
    color: #86868b;
  }
  .footer-col {
    text-align: left;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding: 0;
  }
  .footer-col h5 {
    font-size: 12px;
    margin: 0;
    padding: 10px 0;
    color: #f5f5f7;
    font-weight: 600;
    letter-spacing: -0.01em;
    cursor: pointer;
    position: relative;
  }
  .footer-col h5::after {
    content: '+';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    font-weight: 300;
    color: #86868b;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .footer-col.expanded h5::after {
    content: '−';
    transform: translateY(-50%) rotate(0deg);
  }
  .footer-col a {
    display: block;
    margin: 0;
    font-size: 12px;
    padding: 0;
    color: #a1a1a6;
    line-height: 1.33337;
    letter-spacing: -0.01em;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                padding 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .footer-col.expanded a {
    max-height: 50px;
    opacity: 1;
    padding: 8px 0;
  }
  .footer-col a:first-of-type {
    padding-top: 0;
  }
  .footer-col.expanded a:first-of-type {
    padding-top: 4px;
  }
  .footer-col a:last-of-type {
    padding-bottom: 0;
  }
  .footer-col.expanded a:last-of-type {
    padding-bottom: 10px;
  }
  .footer-bottom {
    flex-direction: column;
    text-align: left;
    gap: 4px;
    padding-top: 12px;
    margin-top: 0;
    border-top: 1px solid rgba(255,255,255,0.1);
  }
  .footer-bottom p {
    font-size: 11px;
    line-height: 1.36364;
    color: #86868b;
    letter-spacing: -0.01em;
  }
  .footer-bottom p:first-child {
    margin-bottom: 4px;
  }

  /* Banner 移动端优化 - 大幅缩减高度 */
  .hero {
    padding: 32px 0 36px;
    min-height: auto;
  }
  .hero-label {
    font-size: 11px;
    margin-bottom: 6px;
  }
  .hero h1 {
    font-size: 28px;
    margin-bottom: 8px;
    line-height: 1.07143;
  }
  .hero p {
    font-size: 15px;
    margin-bottom: 20px;
    line-height: 1.46667;
  }
  .hero-cta {
    margin-bottom: 32px;
    gap: 10px;
    flex-direction: column;
    align-items: center;
  }
  .btn-hero-primary,
  .btn-hero-outline {
    padding: 10px 20px;
    font-size: 15px;
    width: 100%;
    max-width: 280px;
  }
  .hero .container {
    padding: 0 12px;
  }

  /* 小屏幕移动端统计数据 - 横向一排优化 */
  .hero-stats {
    gap: 3px;
    padding: 0;
  }

  .hero-stat {
    height: 54px;
    min-width: 0 !important;
    padding: 6px 3px;
    border-radius: 8px;
  }

  .hero-stat-divider {
    display: none !important;
  }

  .hero-stat-num {
    font-size: 15px;
    margin-bottom: 2px;
    letter-spacing: -0.02em;
  }

  .hero-stat-label {
    font-size: 7.5px;
    line-height: 1.2;
    padding: 0 1px;
  }

  /* 内容板块移动端优化 - 缩减间距 */
  section {
    padding: 36px 0;
  }

  /* 产品板块移动端 - 柔和光晕背景，衬托毛玻璃卡片 */
  .sec-products {
    background:
      radial-gradient(circle at 15% 20%, rgba(0, 113, 227, 0.14), transparent 55%),
      radial-gradient(circle at 85% 80%, rgba(88, 86, 214, 0.12), transparent 55%),
      linear-gradient(180deg, #f5f5f7 0%, #eef0f4 100%);
  }
  .section-title {
    margin-bottom: 24px;
  }
  .section-title .label {
    font-size: 11px;
    margin-bottom: 4px;
  }
  .section-title h2 {
    font-size: 24px;
    line-height: 1.16667;
    margin-bottom: 6px;
  }
  .section-title p {
    font-size: 15px;
    line-height: 1.46667;
  }

  /* 热门地区板块特殊处理 */
  .sec-regions .section-title {
    padding: 0 20px;
  }

  /* 滑动提示指示器 */
  .sec-regions::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: 36px;
    width: 32px;
    height: 240px;
    background: linear-gradient(90deg, rgba(251,251,253,0) 0%, rgba(251,251,253,0.92) 100%);
    pointer-events: none;
    z-index: 1;
  }

  /* 卡片网格移动端优化 - 只显示前3个 */
  .pricing-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .pricing-grid > *:nth-child(n+4) {
    display: none;
  }
  .adv-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .regions-grid {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 14px;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 32px;
    scroll-padding-right: 32px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 8px 32px 20px 32px;
    margin: 0 -20px;
    position: relative;
    overflow-anchor: none;
  }
  .regions-grid::-webkit-scrollbar {
    display: none;
  }
  .regions-grid > * {
    flex: 0 0 calc(100vw - 88px);
    max-width: 300px;
    scroll-snap-align: center;
    scroll-snap-stop: always;
  }
  /* 第一个卡片左边距 */
  .regions-grid > *:first-child {
    margin-left: 0;
  }
  /* 最后一个卡片右边距 */
  .regions-grid > *:last-child {
    margin-right: 0;
  }
  .products-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  /* PRODUCTS 移动端优化 - 融合设计 */
  .product-card {
    border-radius: 20px;
    padding: 24px 20px 20px;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
  }

  .product-card .icon {
    width: 64px;
    height: 64px;
    font-size: 36px;
    border-radius: 16px;
    margin-bottom: 16px;
    background: linear-gradient(135deg, rgba(0,113,227,0.1), rgba(0,168,255,0.05));
    border: 2px solid rgba(0, 113, 227, 0.15);
    box-shadow: 0 4px 12px rgba(0,113,227,0.08);
  }

  .product-card .icon::after {
    display: none;
  }

  .product-card:hover .icon {
    background: linear-gradient(135deg, rgba(0,113,227,0.15), rgba(0,168,255,0.08));
  }

  .product-card .card-content {
    padding: 0;
  }

  .product-card h3 {
    font-size: 20px;
    margin-bottom: 10px;
    line-height: 1.3;
  }

  .product-card p {
    font-size: 14px;
    margin-bottom: 14px;
    line-height: 1.6;
  }

  .product-card .tags {
    gap: 6px;
    margin-top: 12px;
  }

  .tag {
    font-size: 11px;
    padding: 4px 10px;
    border-radius: 12px;
  }

  .products-grid > *:nth-child(n+4) {
    display: none;
  }
  .scenarios-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .scenarios-grid > *:nth-child(n+5) {
    display: none;
  }
  .network-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .network-grid > *:nth-child(n+4) {
    display: none;
  }
  .reviews-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .reviews-grid > *:nth-child(n+3) {
    display: none;
  }
  .articles-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .articles-grid > *:nth-child(n+3) {
    display: none;
  }

  /* 卡片内容移动端优化 - 苹果风格精致重构 */

  /* 区域卡片 - 横滑展示 */
  .region-card {
    padding: 22px 20px 20px;
    background: rgba(255, 255, 255, 0.86);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-radius: 16px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.04), 0 0 0 1.5px rgba(0,113,227,0.13);
    border: 1px solid rgba(0,113,227,0.18);
    transform: scale(0.94);
    opacity: 0.72;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                border-color 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                background 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .region-card.is-active {
    transform: scale(1);
    opacity: 1;
    background: rgba(255, 255, 255, 0.96);
    border-color: rgba(0, 113, 227, 0.28);
    box-shadow: 0 12px 36px rgba(0, 113, 227, 0.14),
                0 4px 12px rgba(0, 0, 0, 0.06);
  }
  .region-card.is-active .flag {
    background: linear-gradient(135deg, rgba(0,113,227,0.16), rgba(0,113,227,0.04));
  }
  .region-card .flag {
    font-size: 22px;
    margin-bottom: 10px;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(0,113,227,0.08), rgba(0,113,227,0.02));
    border-radius: 10px;
    line-height: 1;
  }
  .region-card .card-header { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
  .region-card .card-header .flag { margin-bottom: 0; }
  .region-card h3 {
    font-size: 18px;
    margin-bottom: 4px;
  }
  .region-card .latency {
    font-size: 11px;
    margin-bottom: 8px;
  }
  .region-card p {
    font-size: 13px;
    margin-bottom: 16px;
    line-height: 1.46;
  }
  .region-card .btn-primary.btn-sm,
  .region-card .btn-outline.btn-sm {
    padding: 7px 14px;
    font-size: 12px;
  }

  /* 产品卡片 - 横排布局：图标左 / 内容右 */
  .product-card {
    padding: 20px 18px;
    display: grid;
    grid-template-columns: 56px 1fr;
    grid-template-rows: auto auto auto;
    column-gap: 14px;
    row-gap: 6px;
    align-items: start;
    background: rgba(255, 255, 255, 0.62);
    backdrop-filter: saturate(180%) blur(24px);
    -webkit-backdrop-filter: saturate(180%) blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 8px 28px rgba(31, 38, 135, 0.08),
                inset 0 1px 0 rgba(255, 255, 255, 0.6);
  }
  .product-card .icon {
    grid-row: 1 / span 2;
    grid-column: 1;
    width: 56px;
    height: 56px;
    margin: 0;
    font-size: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(0,113,227,0.1), rgba(0,113,227,0.03));
    border-radius: 16px;
    align-self: center;
  }
  .product-card h3 {
    grid-row: 1;
    grid-column: 2;
    font-size: 17px;
    margin-bottom: 0;
    line-height: 1.2;
  }
  .product-card p {
    grid-row: 2;
    grid-column: 2;
    font-size: 13px;
    margin-bottom: 0;
    line-height: 1.46;
    color: #6e6e73;
  }
  .product-card .tags {
    grid-row: 3;
    grid-column: 1 / span 2;
    margin-top: 10px;
    gap: 6px;
    display: flex;
    flex-wrap: wrap;
  }
  .product-card .tag {
    padding: 3px 9px;
    font-size: 11px;
  }

  /* 优势卡片 - 2列居中卡片，紧凑展示全部6项 */
  .adv-item {
    padding: 20px 14px 18px;
    text-align: center;
    border-radius: 16px;
  }
  .adv-item .icon {
    width: 44px;
    height: 44px;
    margin: 0 auto 10px;
    font-size: 22px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(0,113,227,0.1), rgba(0,113,227,0.03));
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .adv-item h4 {
    font-size: 14px;
    margin-bottom: 4px;
    line-height: 1.25;
    letter-spacing: -0.01em;
  }
  .adv-item p {
    font-size: 11px;
    line-height: 1.4;
    color: #6e6e73;
  }

  /* 场景卡片 - 2列网格，紧凑居中 */
  .scenario-card {
    padding: 18px 12px 16px;
    border-radius: 14px;
  }
  .scenario-card .icon {
    width: 44px;
    height: 44px;
    margin: 0 auto 10px;
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(0,113,227,0.08), rgba(0,113,227,0.02));
    border-radius: 12px;
  }
  .scenario-card h4 {
    font-size: 14px;
    margin-bottom: 4px;
    line-height: 1.25;
  }
  .scenario-card p {
    font-size: 11px;
    line-height: 1.36;
  }

  /* 价格卡片 */
  .pricing-card {
    padding: 24px 20px;
  }
  .pricing-card.popular {
    padding-top: 32px;
  }
  .pricing-card h3 {
    font-size: 15px;
  }
  .pricing-card .price {
    font-size: 40px;
  }
  .pricing-card ul li {
    font-size: 13px;
  }

  /* 网络架构卡片 */
  .network-item {
    padding: 18px 18px;
  }
  .network-item h4 {
    font-size: 15px;
    margin-bottom: 4px;
  }
  .network-item p {
    font-size: 12px;
    line-height: 1.46;
  }

  /* 客户评价卡片 */
  .review-card {
    padding: 20px 18px;
  }
  .review-card .stars {
    font-size: 13px;
    margin-bottom: 10px;
    letter-spacing: 1.5px;
  }
  .review-card p {
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 10px;
  }
  .review-card .author {
    font-size: 12px;
  }

  /* 文章卡片 */
  .article-card {
    padding: 18px 18px;
  }
  .article-card .cat {
    font-size: 11px;
    margin-bottom: 6px;
    letter-spacing: 0.5px;
  }
  .article-card h4 {
    font-size: 15px;
    margin-bottom: 6px;
    line-height: 1.25;
  }
  .article-card p {
    font-size: 12px;
    line-height: 1.46;
  }

  /* FAQ 移动端优化 */
  .faq-list {
    max-width: 100%;
  }
  .faq-item {
    margin-bottom: 12px;
    border-radius: 16px;
  }
  .faq-question {
    padding: 18px 20px;
  }
  .faq-question h3 {
    font-size: 15px;
    line-height: 1.33333;
    letter-spacing: -0.016em;
  }
  .faq-icon {
    font-size: 24px;
    margin-left: 12px;
  }
  .faq-item.active .faq-answer {
    max-height: 600px;
    padding: 0 20px 18px 20px;
  }
  .faq-answer p {
    font-size: 14px;
    line-height: 1.5;
    letter-spacing: -0.016em;
  }
}

/* ========================================
   HERO ANIMATIONS - 科技感首次加载动画
   ======================================== */

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

@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes heroGlow {
  0% {
    opacity: 0;
    transform: translateX(-50%) scale(0.8);
  }
  100% {
    opacity: 1;
    transform: translateX(-50%) scale(1);
  }
}

@keyframes numberGlow {
  0%, 100% {
    text-shadow: none;
  }
  50% {
    text-shadow: 0 0 20px rgba(0, 113, 227, 0.6);
  }
}

@keyframes numberGlow {
  0%, 100% {
    text-shadow: none;
  }
  50% {
    text-shadow: 0 0 20px rgba(0, 113, 227, 0.6);
  }
}


/* 极小屏幕优化 (320px - 360px) */
@media (max-width: 360px) {
  .hero .container {
    padding: 0 10px;
  }

  .hero-stats {
    gap: 3px;
  }

  .hero-stat {
    height: 50px;
    min-width: 0 !important;
    padding: 5px 2px;
    border-radius: 7px;
  }

  .hero-stat-num {
    font-size: 14px;
    margin-bottom: 2px;
  }

  .hero-stat-label {
    font-size: 7px;
    line-height: 1.1;
    padding: 0 1px;
  }
}

/* ========================================
   新闻列表移动端优化 - 标题单行显示
   ======================================== */
@media (max-width: 768px) {
  /* 新闻卡片标题单行显示 */
  .news-card h3,
  .news-card .title,
  .news-card .news-title,
  .news-item .title,
  .news-item h3,
  .news-item .news-title,
  .article-card h3,
  .article-card .title,
  .post-card h3,
  .post-card .title,
  .card h3,
  .card .title {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: block !important;
    max-width: 100% !important;
  }

  /* 如果使用了 news-box 结构 */
  .news-box .news-list .news-item .news-text {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
    display: block !important;
  }

  .news-box .news-list .news-item a {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  .news-box .news-list .news-item .news-time {
    float: none !important;
    flex-shrink: 0 !important;
    margin-left: 8px !important;
  }
}

/* ========================================
   SEO内容扩展区样式 - 简洁统一设计
   仅影响 .sec-content-seo 内的元素
   ======================================== */

.sec-content-seo {
  background: #f8f9fa;
  padding: 80px 0;
  position: relative;
}

/* SEO内容容器 */
.sec-content-seo .container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 22px;
}

/* 内容卡片 - 简洁设计 */
.sec-content-seo .pp-seo-content {
  background: #ffffff;
  border-radius: 12px;
  padding: 50px 60px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  position: relative;
  border: 1px solid #e5e7eb;
}

/* 主标题样式 */
.sec-content-seo .pp-seo-content h2 {
  font-size: 28px;
  font-weight: 700;
  color: #1a1a1a;
  line-height: 1.4;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 2px solid #e5e7eb;
  position: relative;
}

/* 主标题底部蓝色装饰 */
.sec-content-seo .pp-seo-content h2::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 60px;
  height: 2px;
  background: #0071e3;
}

/* 副标题样式 */
.sec-content-seo .pp-seo-content h3 {
  font-size: 20px;
  font-weight: 600;
  color: #1a1a1a;
  line-height: 1.5;
  margin-top: 36px;
  margin-bottom: 16px;
  padding-left: 12px;
  border-left: 3px solid #0071e3;
}

/* 段落样式 */
.sec-content-seo .pp-seo-content p {
  font-size: 15px;
  line-height: 1.8;
  color: #4a5568;
  margin-bottom: 18px;
  text-align: justify;
}

.sec-content-seo .pp-seo-content p:last-child {
  margin-bottom: 0;
}

/* 第一段样式 - 轻微突出 */
.sec-content-seo .pp-seo-content h2 + p {
  font-size: 16px;
  line-height: 1.8;
  color: #2d3748;
  margin-bottom: 24px;
  padding: 16px 20px;
  background: #f7fafc;
  border-left: 3px solid #0071e3;
  border-radius: 4px;
}

/* 强调文字 */
.sec-content-seo .pp-seo-content strong {
  font-weight: 600;
  color: #0071e3;
}

/* 列表样式 */
.sec-content-seo .pp-seo-content ul,
.sec-content-seo .pp-seo-content ol {
  margin: 20px 0;
  padding-left: 0;
  list-style: none;
}

.sec-content-seo .pp-seo-content li {
  font-size: 15px;
  line-height: 1.8;
  color: #4a5568;
  margin-bottom: 12px;
  padding-left: 28px;
  position: relative;
}

/* 无序列表标记 */
.sec-content-seo .pp-seo-content ul li::before {
  content: '';
  position: absolute;
  left: 8px;
  top: 11px;
  width: 6px;
  height: 6px;
  background: #0071e3;
  border-radius: 50%;
}

/* 有序列表标记 */
.sec-content-seo .pp-seo-content ol {
  counter-reset: seo-ol-counter;
}

.sec-content-seo .pp-seo-content ol li::before {
  content: counter(seo-ol-counter) ".";
  counter-increment: seo-ol-counter;
  position: absolute;
  left: 0;
  top: 0;
  color: #0071e3;
  font-weight: 600;
  font-size: 15px;
}

/* 链接样式 */
.sec-content-seo .pp-seo-content a {
  color: #0071e3;
  text-decoration: none;
  border-bottom: 1px solid rgba(0, 113, 227, 0.3);
  transition: border-color 0.2s ease;
}

.sec-content-seo .pp-seo-content a:hover {
  border-bottom-color: #0071e3;
}

/* 移动端优化 - 平板 */
@media (max-width: 1024px) {
  .sec-content-seo .pp-seo-content {
    padding: 44px 48px;
  }
}

/* 移动端优化 - 手机 */
@media (max-width: 768px) {
  .sec-content-seo {
    padding: 60px 0;
  }

  .sec-content-seo .pp-seo-content {
    padding: 36px 28px;
    border-radius: 10px;
  }

  .sec-content-seo .pp-seo-content h2 {
    font-size: 24px;
    margin-bottom: 16px;
    padding-bottom: 12px;
  }

  .sec-content-seo .pp-seo-content h2::after {
    width: 50px;
  }

  .sec-content-seo .pp-seo-content h2 + p {
    font-size: 15px;
    padding: 14px 18px;
    margin-bottom: 20px;
  }

  .sec-content-seo .pp-seo-content h3 {
    font-size: 18px;
    margin-top: 28px;
    margin-bottom: 14px;
    padding-left: 10px;
    border-left-width: 2.5px;
  }

  .sec-content-seo .pp-seo-content p {
    font-size: 14px;
    line-height: 1.75;
    margin-bottom: 16px;
  }

  .sec-content-seo .pp-seo-content li {
    font-size: 14px;
    line-height: 1.75;
    margin-bottom: 10px;
    padding-left: 24px;
  }

  .sec-content-seo .pp-seo-content ul li::before {
    width: 5px;
    height: 5px;
    top: 10px;
    left: 6px;
  }

  .sec-content-seo .pp-seo-content ol li::before {
    font-size: 14px;
  }
}

/* 小屏优化 */
@media (max-width: 375px) {
  .sec-content-seo {
    padding: 50px 0;
  }

  .sec-content-seo .pp-seo-content {
    padding: 32px 24px;
    border-radius: 8px;
  }

  .sec-content-seo .pp-seo-content h2 {
    font-size: 22px;
    margin-bottom: 14px;
  }

  .sec-content-seo .pp-seo-content h2::after {
    width: 45px;
  }

  .sec-content-seo .pp-seo-content h2 + p {
    font-size: 14px;
    padding: 12px 16px;
    margin-bottom: 18px;
    border-left-width: 2.5px;
  }

  .sec-content-seo .pp-seo-content h3 {
    font-size: 17px;
    margin-top: 24px;
    margin-bottom: 12px;
    padding-left: 9px;
    border-left-width: 2.5px;
  }

  .sec-content-seo .pp-seo-content p,
  .sec-content-seo .pp-seo-content li {
    font-size: 14px;
    line-height: 1.7;
  }

  .sec-content-seo .pp-seo-content li {
    padding-left: 22px;
    margin-bottom: 10px;
  }

  .sec-content-seo .pp-seo-content ul li::before {
    width: 4px;
    height: 4px;
    top: 9px;
    left: 6px;
  }
}

/* 右下侧快捷菜单 - 精简设计 */
.quick-action-menu {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 9999;
  display: flex;
  flex-direction: column; /* 从上到下排列 */
  gap: 6px;
  align-items: flex-end;
  transition: opacity 0.3s ease;
}

.quick-action-menu:not(.is-hovered):not(.is-expanded) {
  opacity: 0.6;
}

.quick-action-menu.is-hovered,
.quick-action-menu.is-expanded {
  opacity: 1;
}

/* 默认状态：只显示客服按钮和回到顶部按钮 */
.quick-action-menu:not(.is-expanded) .quick-action-btn.line,
.quick-action-menu:not(.is-expanded) .quick-action-btn.telegram {
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px) scale(0.8);
}

/* 展开状态：显示所有按钮 */
.quick-action-menu.is-expanded .quick-action-btn {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.quick-action-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #ffffff;
  backdrop-filter: saturate(180%) blur(30px);
  -webkit-backdrop-filter: saturate(180%) blur(30px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06),
              0 4px 16px rgba(0, 0, 0, 0.04),
              inset 0 1px 0 rgba(255, 255, 255, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none;
  color: #1d1d1f;
  font-size: 20px;
  position: relative;
  overflow: visible;
  border: none;
  outline: none;
}

.quick-action-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: inherit;
  opacity: 0;
  transform: scale(0.9);
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.quick-action-btn:hover::before {
  opacity: 1;
  transform: scale(1);
}

.quick-action-btn:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12),
              0 10px 32px rgba(0, 0, 0, 0.08),
              inset 0 1px 0 rgba(255, 255, 255, 1);
}

.quick-action-btn:active,
.quick-action-btn.is-active {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12),
              0 6px 20px rgba(0, 0, 0, 0.1);
}

.quick-action-btn svg,
.quick-action-btn img {
  width: 24px;
  height: 24px;
  position: relative;
  z-index: 1;
  transition: transform 0.25s ease;
}

.quick-action-btn:hover svg,
.quick-action-btn:hover img {
  transform: scale(1.08);
}

/* 回到顶部按钮样式 */
.quick-action-btn.back-to-top {
  background: linear-gradient(135deg, #007aff 0%, #5856d6 100%);
  color: #ffffff;
  position: relative;
}

.quick-action-btn.back-to-top::before {
  background: linear-gradient(135deg, #0066dd 0%, #4640b8 100%);
}

.quick-action-btn.back-to-top:hover {
  box-shadow: 0 6px 16px rgba(0, 122, 255, 0.4),
              0 10px 32px rgba(88, 86, 214, 0.25),
              inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* Telegram按钮样式 */
.quick-action-btn.telegram {
  background: linear-gradient(135deg, #2aabee 0%, #229ed9 100%);
  color: #ffffff;
  position: relative;
}

.quick-action-btn.telegram::before {
  background: linear-gradient(135deg, #1e96d3 0%, #1a8bc4 100%);
}

.quick-action-btn.telegram:hover {
  box-shadow: 0 6px 16px rgba(42, 171, 238, 0.4),
              0 10px 32px rgba(34, 158, 217, 0.25),
              inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* Line按钮样式 */
.quick-action-btn.line {
  background: linear-gradient(135deg, #00b900 0%, #00c300 100%);
  color: #ffffff;
  position: relative;
}

.quick-action-btn.line::before {
  background: linear-gradient(135deg, #00a300 0%, #00ad00 100%);
}

.quick-action-btn.line:hover {
  box-shadow: 0 6px 16px rgba(0, 185, 0, 0.4),
              0 10px 32px rgba(0, 195, 0, 0.25),
              inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* 客服按钮样式 */
.quick-action-btn.customer-service {
  background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
  color: #ffffff;
  position: relative;
}

.quick-action-btn.customer-service::before {
  background: linear-gradient(135deg, #e65a28 0%, #dd8419 100%);
}

.quick-action-btn.customer-service:hover {
  box-shadow: 0 6px 16px rgba(255, 107, 53, 0.4),
              0 10px 32px rgba(247, 147, 30, 0.25),
              inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* 提示文字 */
.quick-action-btn .tooltip {
  position: absolute;
  right: 60px;
  background: rgba(29, 29, 31, 0.95);
  color: #ffffff;
  padding: 7px 12px;
  border-radius: 8px;
  font-size: 13px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translateX(6px);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  font-weight: 500;
  letter-spacing: 0.01em;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.18),
              0 1px 6px rgba(0, 0, 0, 0.12);
}

.quick-action-btn:hover .tooltip {
  opacity: 1;
  transform: translateX(0);
}

.quick-action-btn .tooltip::after {
  content: '';
  position: absolute;
  right: -5px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 5px solid rgba(29, 29, 31, 0.95);
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}

/* 响应式适配 - 移动端 */
@media (max-width: 768px) {
  .quick-action-menu {
    right: 12px;
    bottom: 10px;
    gap: 5px;
  }

  /* 移动端默认状态：只显示客服按钮和回到顶部按钮，其他按钮隐藏 */
  .quick-action-menu:not(.is-expanded) .quick-action-btn.line,
  .quick-action-menu:not(.is-expanded) .quick-action-btn.telegram {
    opacity: 0;
    pointer-events: none;
    transform: translateY(10px) scale(0.8);
  }

  /* 展开状态：显示所有按钮 */
  .quick-action-menu.is-expanded .quick-action-btn {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
  }

  .quick-action-btn {
    width: 50px;
    height: 50px;
  }

  /* 客服按钮和回到顶部按钮始终可见但半透明 */
  .quick-action-menu:not(.is-expanded) .quick-action-btn.customer-service,
  .quick-action-menu:not(.is-expanded) .quick-action-btn.back-to-top {
    opacity: 0.7;
  }

  .quick-action-menu.is-expanded .quick-action-btn.customer-service,
  .quick-action-menu.is-expanded .quick-action-btn.back-to-top {
    opacity: 1;
  }

  .quick-action-btn svg,
  .quick-action-btn img {
    width: 24px;
    height: 24px;
  }

  .quick-action-btn .tooltip {
    display: none;
  }

  /* 移动端点击反馈 */
  .quick-action-btn:active {
    transform: scale(0.94);
    transition: transform 0.1s ease;
  }
}

/* 小屏幕优化 */
@media (max-width: 480px) {
  .quick-action-menu {
    right: 10px;
    bottom: 8px;
    gap: 4px;
  }

  .quick-action-btn {
    width: 48px;
    height: 48px;
  }

  .quick-action-btn svg,
  .quick-action-btn img {
    width: 22px;
    height: 22px;
  }

  /* 按钮透明度更低 */
  .quick-action-menu:not(.is-expanded) .quick-action-btn.customer-service,
  .quick-action-menu:not(.is-expanded) .quick-action-btn.back-to-top {
    opacity: 0.65;
  }
}

/* 移动端 region-card 滑动优化 - 防止闪烁 */
@media (max-width: 768px) {
  .region-card, .product-card, .adv-item,
  .scenario-card, .pricing-card, .network-item,
  .review-card, .article-card {
    /* 禁用backdrop-filter，防止滑动时闪烁 */
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    /* 使用纯色背景代替 */
    background: #ffffff !important;
    /* 优化GPU加速 */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    /* 保持过渡动画 */
    transition: all 0.3s ease;
  }

  /* 移动端保留简化的hover效果 */
  .region-card:active, .product-card:active, .adv-item:active,
  .scenario-card:active, .pricing-card:active, .network-item:active,
  .review-card:active, .article-card:active {
    transform: translateZ(0) scale(0.98);
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  }
}



/* Distinct Infrastructure and Reviews layouts */
.sec-network {
  position: relative;
  overflow: hidden;
  padding: 88px 0;
  background: #0b1220;
  color: #e2e8f0;
}
.sec-network::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(34, 211, 238, .08) 1px, transparent 1px), linear-gradient(rgba(34, 211, 238, .06) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: linear-gradient(90deg, #000, transparent 82%);
}
.sec-network .container,
.sec-reviews .container {
  position: relative;
  z-index: 1;
}
.sec-network .section-title {
  max-width: 760px;
  margin: 0 0 30px;
  text-align: left;
}
.sec-network .section-title .label {
  color: #67e8f9;
  letter-spacing: .14em;
}
.sec-network .section-title h2 {
  color: #f8fafc;
}
.sec-network .section-title p {
  max-width: 680px;
  margin: 0;
  color: #94a3b8;
}
.network-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 228px;
  gap: 18px;
  align-items: stretch;
}
.network-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.sec-network .network-item {
  --network-accent: #22d3ee;
  min-height: 224px;
  display: flex;
  flex-direction: column;
  padding: 22px;
  border: 1px solid rgba(148, 163, 184, .2);
  border-top: 2px solid var(--network-accent);
  border-radius: 14px;
  background: #111c30;
  box-shadow: 0 16px 32px rgba(2, 8, 23, .18);
  text-align: left;
}
.sec-network .network-item:nth-child(2) { --network-accent: #60a5fa; }
.sec-network .network-item:nth-child(3) { --network-accent: #34d399; }
.sec-network .network-item:nth-child(4) { --network-accent: #fbbf24; }
.sec-network .network-item:hover {
  transform: translateY(-3px);
  border-color: rgba(148, 163, 184, .38);
  box-shadow: 0 20px 40px rgba(2, 8, 23, .28);
}
.network-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin-bottom: 18px;
  border: 1px solid color-mix(in srgb, var(--network-accent) 50%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--network-accent) 13%, #111c30);
  color: var(--network-accent);
  font-size: 20px;
  font-weight: 700;
}
.network-kicker {
  margin-bottom: 7px;
  color: var(--network-accent);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .14em;
}
.sec-network .network-item h4 {
  margin: 0 0 9px;
  color: #f8fafc;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
}
.sec-network .network-item p {
  margin: 0;
  color: #9fb0c5;
  font-size: 13px;
  line-height: 1.65;
}
.network-item-foot {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 16px;
  color: #64748b;
  font-size: 11px;
}
.network-item-foot span:last-child {
  color: #cbd5e1;
  font-weight: 700;
}
.network-rail {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 24px 20px;
  border: 1px solid rgba(103, 232, 249, .24);
  border-radius: 14px;
  background: #0f1a2e;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}
.network-rail-label {
  color: #67e8f9;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .16em;
}
.network-rail-metric {
  display: flex;
  flex-direction: column;
  margin-top: 38px;
}
.network-rail-metric strong {
  color: #f8fafc;
  font-size: 54px;
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: .95;
}
.network-rail-metric span {
  margin-top: 8px;
  color: #94a3b8;
  font-size: 13px;
}
.network-rail-rule {
  width: 100%;
  height: 1px;
  margin: 30px 0 22px;
  background: rgba(148, 163, 184, .2);
}
.network-rail-points {
  display: grid;
  gap: 14px;
  margin-top: auto;
}
.network-rail-points > div {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #cbd5e1;
  font-size: 12px;
}
.network-point-dot {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #34d399;
  box-shadow: 0 0 0 4px rgba(52, 211, 153, .12);
}

/* Reviews uses a warm editorial layout, intentionally separate from the technical network section. */
.sec-reviews {
  padding: 88px 0;
  background: #f7f3ed;
}
.sec-reviews .section-title {
  margin: 0 0 28px;
  text-align: left;
}
.sec-reviews .section-title .label {
  color: #b45309;
  letter-spacing: .14em;
}
.sec-reviews .section-title p {
  max-width: 720px;
  margin: 0;
}
.reviews-layout {
  display: grid;
  grid-template-columns: minmax(230px, .72fr) minmax(0, 2fr);
  gap: 18px;
  align-items: stretch;
}
.reviews-summary {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 28px;
  border-radius: 16px;
  background: #302a25;
  color: #fffaf3;
  box-shadow: 0 18px 36px rgba(74, 55, 39, .16);
}
.reviews-summary-label {
  color: #fbbf24;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
}
.reviews-summary-mark {
  height: 44px;
  margin-top: 22px;
  color: #f59e0b;
  font-family: Georgia, serif;
  font-size: 76px;
  line-height: .8;
}
.reviews-summary h3 {
  margin: 12px 0 12px;
  color: #fffaf3;
  font-size: 23px;
  line-height: 1.3;
}
.reviews-summary > p {
  margin: 0;
  color: #d6c8b8;
  font-size: 13px;
  line-height: 1.7;
}
.reviews-summary-list {
  display: grid;
  gap: 10px;
  margin-top: auto;
  padding-top: 24px;
}
.reviews-summary-list span {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #f4e9db;
  font-size: 12px;
}
.reviews-summary-list span::before {
  content: '✓';
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(251, 191, 36, .16);
  color: #fbbf24;
  font-size: 11px;
  font-weight: 800;
}
.sec-reviews .reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.sec-reviews .review-card {
  display: flex;
  min-height: 276px;
  flex-direction: column;
  padding: 22px;
  border: 1px solid #e8dccd;
  border-radius: 14px;
  background: #fffdf9;
  box-shadow: 0 8px 20px rgba(93, 67, 42, .06);
  text-align: left;
}
.sec-reviews .review-card:hover {
  transform: translateY(-4px);
  border-color: #d6b98b;
  background: #fffdf9;
  box-shadow: 0 16px 30px rgba(93, 67, 42, .12);
}
.review-card-top {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-bottom: 22px;
}
.sec-reviews .review-card .stars {
  margin: 0;
  color: #d97706;
  font-size: 14px;
  letter-spacing: 2px;
}
.review-context {
  color: #9a8066;
  font-size: 11px;
  font-weight: 700;
}
.sec-reviews .review-card p {
  margin: 0;
  color: #43382f;
  font-size: 15px;
  line-height: 1.75;
}
.sec-reviews .review-card .author {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding-top: 22px;
  color: #6b5a4b;
  font-size: 13px;
}
.author-avatar {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #ead7bd;
  color: #7c4a21;
  font-size: 13px;
  font-weight: 800;
}
.author-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.author-copy strong {
  color: #3f3228;
  font-size: 13px;
}
.author-copy small {
  color: #a38d79;
  font-size: 11px;
}
@media (max-width: 1080px) {
  .reviews-layout { grid-template-columns: 1fr; }
  .reviews-summary { min-height: 0; }
  .reviews-summary-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .network-layout { grid-template-columns: 1fr; }
  .network-rail {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    min-height: 0;
  }
  .network-rail-label { grid-column: 1 / -1; }
  .network-rail-metric { margin-top: 0; }
  .network-rail-rule { display: none; }
  .network-rail-points {
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 0;
  }
}
@media (max-width: 640px) {
  .sec-network, .sec-reviews { padding: 58px 0; }
  .sec-network .section-title, .sec-reviews .section-title { margin-bottom: 22px; }
  .network-grid { grid-template-columns: 1fr; }
  .network-item { min-height: 0; }
  .network-rail { display: flex; }
  .network-rail-points { display: grid; grid-template-columns: 1fr; }
  .reviews-summary-list { grid-template-columns: 1fr; }
  .sec-reviews .reviews-grid { grid-template-columns: 1fr; }
  .sec-reviews .reviews-grid > * { display: flex; }
}
/* Infrastructure palette refinement v2 */
.sec-network {
  background: #eef3f5;
  color: #1f2d36;
}
.sec-network::before {
  background: linear-gradient(90deg, rgba(31, 122, 140, .08) 1px, transparent 1px), linear-gradient(rgba(31, 122, 140, .06) 1px, transparent 1px);
}
.sec-network .section-title .label {
  color: #1f7a8c;
}
.sec-network .section-title h2 {
  color: #1f2d36;
}
.sec-network .section-title p {
  color: #61727d;
}
.sec-network .network-item {
  --network-accent: #1f7a8c;
  border-color: #d7e1e5;
  background: #ffffff;
  box-shadow: 0 14px 30px rgba(41, 65, 78, .08);
}
.sec-network .network-item:nth-child(2) {
  --network-accent: #487a91;
}
.sec-network .network-item:nth-child(3) {
  --network-accent: #4f8a72;
}
.sec-network .network-item:nth-child(4) {
  --network-accent: #b4773f;
}
.sec-network .network-item:hover {
  border-color: color-mix(in srgb, var(--network-accent) 45%, #d7e1e5);
  box-shadow: 0 18px 34px rgba(41, 65, 78, .14);
}
.sec-network .network-icon {
  background: color-mix(in srgb, var(--network-accent) 12%, #ffffff);
}
.sec-network .network-item h4 {
  color: #1f2d36;
}
.sec-network .network-item p {
  color: #61727d;
}
.sec-network .network-item-foot {
  color: #7b8b94;
}
.sec-network .network-item-foot span:last-child {
  color: #526771;
}
.sec-network .network-rail {
  border-color: #c9dfe2;
  background: #e3f0f1;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7);
}
.sec-network .network-rail-label {
  color: #1f7a8c;
}
.sec-network .network-rail-metric strong {
  color: #1f2d36;
}
.sec-network .network-rail-metric span {
  color: #61727d;
}
.sec-network .network-rail-rule {
  background: #c9dfe2;
}
.sec-network .network-rail-points > div {
  color: #526771;
}
.sec-network .network-point-dot {
  background: #4f8a72;
  box-shadow: 0 0 0 4px rgba(79, 138, 114, .14);
}
/* Center Infrastructure and Reviews headings */
.sec-network .section-title {
  margin: 0 auto 30px;
  text-align: center;
}
.sec-network .section-title p {
  margin-left: auto;
  margin-right: auto;
}
.sec-reviews .section-title {
  margin: 0 auto 28px;
  text-align: center;
}
.sec-reviews .section-title p {
  margin-left: auto;
  margin-right: auto;
}
/* Why LuckVM capability matrix redesign */
.sec-advantages {
  position: relative;
  overflow: hidden;
  padding: 96px 0;
  background: #f4f7f6;
}
.sec-advantages::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 1px;
  background: #dde6e3;
}
.sec-advantages > .container {
  position: relative;
  display: grid;
  grid-template-columns: minmax(250px, .72fr) minmax(0, 1.55fr);
  gap: 68px;
  align-items: start;
}
.sec-advantages .section-title {
  margin: 0;
  padding: 10px 0 0;
  text-align: left;
}
.sec-advantages .section-title::after {
  content: '';
  display: block;
  width: 54px;
  height: 3px;
  margin-top: 28px;
  border-radius: 2px;
  background: #2f7d71;
}
.sec-advantages .section-title .label {
  color: #2f7d71;
  letter-spacing: .12em;
}
.sec-advantages .section-title h2 {
  max-width: 340px;
  margin: 10px 0 16px;
  color: #20302e;
  font-size: 40px;
  line-height: 1.16;
}
.sec-advantages .section-title p {
  max-width: 330px;
  margin: 0;
  color: #687875;
  font-size: 15px;
  line-height: 1.75;
}
.sec-advantages .adv-grid {
  counter-reset: why-feature;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  overflow: hidden;
  border: 1px solid #dce5e2;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 20px 50px rgba(44, 70, 65, .08);
}
.sec-advantages .adv-item {
  --adv-accent: #2f7d71;
  counter-increment: why-feature;
  position: relative;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  column-gap: 18px;
  min-height: 166px;
  padding: 27px 44px 26px 24px;
  overflow: visible;
  border: 0;
  border-bottom: 1px solid #e3e9e7;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  text-align: left;
  transition: background-color .25s ease, box-shadow .25s ease;
}
.sec-advantages .adv-item:nth-child(2) {
  --adv-accent: #55758c;
}
.sec-advantages .adv-item:nth-child(3) {
  --adv-accent: #567b62;
}
.sec-advantages .adv-item:nth-child(4) {
  --adv-accent: #806a8d;
}
.sec-advantages .adv-item:nth-child(5) {
  --adv-accent: #ad7647;
}
.sec-advantages .adv-item:nth-child(6) {
  --adv-accent: #9a5d62;
}
.sec-advantages .adv-item:nth-child(odd) {
  border-right: 1px solid #e3e9e7;
}
.sec-advantages .adv-item:nth-child(n+5) {
  border-bottom: 0;
}
.sec-advantages .adv-item::before {
  content: '0' counter(why-feature);
  position: absolute;
  top: 24px;
  right: 18px;
  bottom: auto;
  left: auto;
  width: auto;
  height: auto;
  background: none;
  color: #a2afac;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .08em;
  opacity: 1;
  transition: none;
}
.sec-advantages .adv-item:hover {
  border-color: #e3e9e7;
  background: #f9fbfa;
  box-shadow: inset 3px 0 0 var(--adv-accent);
  transform: none;
}
.sec-advantages .adv-item .icon {
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin: 0;
  border: 1px solid color-mix(in srgb, var(--adv-accent) 26%, #e4ebe9);
  border-radius: 8px;
  background: color-mix(in srgb, var(--adv-accent) 10%, #ffffff);
  box-shadow: none;
  color: var(--adv-accent);
  transition: transform .25s ease, background-color .25s ease;
}
.sec-advantages .adv-item .icon::after {
  display: none;
}
.sec-advantages .adv-item .icon svg {
  width: 23px;
  height: 23px;
}
.sec-advantages .adv-item:hover .icon {
  border-color: color-mix(in srgb, var(--adv-accent) 36%, #dce5e2);
  background: color-mix(in srgb, var(--adv-accent) 14%, #ffffff);
  box-shadow: none;
  transform: translateY(-2px);
}
.sec-advantages .adv-item h4 {
  align-self: end;
  margin: 1px 0 8px;
  color: #263633;
  font-size: 17px;
  font-weight: 650;
  line-height: 1.35;
  letter-spacing: 0;
}
.sec-advantages .adv-item p {
  margin: 0;
  color: #6b7976;
  font-size: 13px;
  line-height: 1.62;
  letter-spacing: 0;
}

@media (max-width: 980px) {
  .sec-advantages {
    padding: 76px 0;
  }
  .sec-advantages > .container {
    grid-template-columns: 1fr;
    gap: 34px;
  }
  .sec-advantages .section-title {
    max-width: 680px;
    padding-top: 0;
  }
  .sec-advantages .section-title h2,
  .sec-advantages .section-title p {
    max-width: 680px;
  }
}
@media (max-width: 640px) {
  .sec-advantages {
    padding: 58px 0;
  }
  .sec-advantages > .container {
    gap: 26px;
  }
  .sec-advantages .section-title h2 {
    margin-top: 8px;
    font-size: 32px;
  }
  .sec-advantages .section-title::after {
    margin-top: 20px;
  }
  .sec-advantages .adv-grid {
    grid-template-columns: 1fr;
  }
  .sec-advantages .adv-item {
    min-height: 0;
    padding: 22px 42px 22px 18px;
    border-right: 0;
    border-bottom: 1px solid #e3e9e7;
  }
  .sec-advantages .adv-item:nth-child(odd) {
    border-right: 0;
  }
  .sec-advantages .adv-item:nth-child(n+5) {
    border-bottom: 1px solid #e3e9e7;
  }
  .sec-advantages .adv-item:last-child {
    border-bottom: 0;
  }
  .sec-advantages .adv-item .icon {
    width: 44px;
    height: 44px;
  }
  .sec-advantages .adv-item h4 {
    font-size: 16px;
  }
  .sec-advantages .adv-item p {
    font-size: 12px;
  }
}
/* Why LuckVM centered matrix refinement */
.sec-advantages > .container {
  display: block;
}
.sec-advantages .section-title {
  max-width: 780px;
  margin: 0 auto 38px;
  padding: 0;
  text-align: center;
}
.sec-advantages .section-title::after {
  margin: 24px auto 0;
}
.sec-advantages .section-title h2,
.sec-advantages .section-title p {
  max-width: none;
  margin-left: auto;
  margin-right: auto;
}
.sec-advantages .adv-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.sec-advantages .adv-item:nth-child(odd) {
  border-right: 0;
}
.sec-advantages .adv-item:nth-child(3n+1),
.sec-advantages .adv-item:nth-child(3n+2) {
  border-right: 1px solid #e3e9e7;
}
.sec-advantages .adv-item:nth-child(n+4) {
  border-bottom: 0;
}
.sec-advantages .adv-item:nth-child(-n+3) {
  border-bottom: 1px solid #e3e9e7;
}

@media (max-width: 980px) {
  .sec-advantages .section-title {
    max-width: 700px;
    margin-bottom: 32px;
  }
  .sec-advantages .adv-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .sec-advantages .adv-item:nth-child(3n+1),
  .sec-advantages .adv-item:nth-child(3n+2) {
    border-right: 0;
  }
  .sec-advantages .adv-item:nth-child(odd) {
    border-right: 1px solid #e3e9e7;
  }
  .sec-advantages .adv-item:nth-child(n+4) {
    border-bottom: 1px solid #e3e9e7;
  }
  .sec-advantages .adv-item:nth-child(n+5) {
    border-bottom: 0;
  }
}
@media (max-width: 640px) {
  .sec-advantages .section-title {
    margin-bottom: 26px;
  }
  .sec-advantages .adv-grid {
    grid-template-columns: 1fr;
  }
  .sec-advantages .adv-item:nth-child(odd),
  .sec-advantages .adv-item:nth-child(3n+1),
  .sec-advantages .adv-item:nth-child(3n+2) {
    border-right: 0;
  }
  .sec-advantages .adv-item:nth-child(n+4),
  .sec-advantages .adv-item:nth-child(-n+3),
  .sec-advantages .adv-item:nth-child(n+5) {
    border-bottom: 1px solid #e3e9e7;
  }
  .sec-advantages .adv-item:last-child {
    border-bottom: 0;
  }
}
/* Why LuckVM item content centering */
.sec-advantages .adv-item {
  grid-template-rows: auto auto;
  align-content: center;
  align-items: center;
}
.sec-advantages .adv-item .icon {
  align-self: center;
}
.sec-advantages .adv-item h4,
.sec-advantages .adv-item p {
  align-self: auto;
}
/* FAQ directory redesign */
.sec-faq {
  position: relative;
  overflow: hidden;
  padding: 92px 0;
  background: #eef3f1;
}
.sec-faq::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(47, 125, 113, .05) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(90deg, #000, transparent 86%);
}
.sec-faq > .container {
  position: relative;
  z-index: 1;
}
.sec-faq .section-title {
  max-width: 720px;
  margin: 0 auto 38px;
  text-align: center;
}
.sec-faq .section-title .label {
  color: #2f7d71;
  letter-spacing: .14em;
}
.sec-faq .section-title h2 {
  color: #20302e;
}
.sec-faq .section-title p {
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
  color: #687875;
}
.sec-faq .faq-list {
  counter-reset: faq-index;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 42px;
  max-width: 1040px;
  margin: 0 auto;
  border-top: 1px solid #cbdad5;
}
.sec-faq .faq-item {
  counter-increment: faq-index;
  position: relative;
  margin: 0;
  overflow: visible;
  border: 0;
  border-bottom: 1px solid #cbdad5;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transition: background-color .25s ease;
}
.sec-faq .faq-item::before {
  display: none;
}
.sec-faq .faq-question {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 28px;
  gap: 14px;
  align-items: center;
  min-height: 82px;
  padding: 18px 0;
  background: transparent;
}
.sec-faq .faq-question::before {
  content: counter(faq-index, decimal-leading-zero);
  color: #86a098;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .08em;
}
.sec-faq .faq-question:hover {
  background: transparent;
}
.sec-faq .faq-question h3 {
  color: #263633;
  font-size: 15px;
  font-weight: 650;
  line-height: 1.5;
  letter-spacing: 0;
}
.sec-faq .faq-icon {
  width: 26px;
  height: 26px;
  margin-left: 0;
  border: 1px solid #b6cbc4;
  border-radius: 50%;
  background: #f7faf9;
  color: #2f7d71;
  font-size: 20px;
  font-weight: 350;
  line-height: 1;
  transition: transform .25s ease, color .25s ease, background-color .25s ease;
}
.sec-faq .faq-item:hover {
  border-color: #9ebbb2;
  background: rgba(255, 255, 255, .35);
  box-shadow: none;
  transform: none;
}
.sec-faq .faq-item.active .faq-question h3 {
  color: #2f7d71;
}
.sec-faq .faq-item.active .faq-icon {
  transform: rotate(45deg);
  border-color: #2f7d71;
  background: #2f7d71;
  color: #ffffff;
  box-shadow: none;
}
.sec-faq .faq-answer {
  transition: max-height .3s ease, padding .3s ease, opacity .3s ease;
}
.sec-faq .faq-item.active .faq-answer {
  padding: 0 42px 22px 44px;
}
.sec-faq .faq-answer p {
  color: #687875;
  font-size: 14px;
  line-height: 1.75;
}
@media (max-width: 800px) {
  .sec-faq {
    padding: 72px 0;
  }
  .sec-faq .faq-list {
    grid-template-columns: 1fr;
    max-width: 720px;
  }
}
@media (max-width: 640px) {
  .sec-faq {
    padding: 58px 0;
  }
  .sec-faq .section-title {
    margin-bottom: 26px;
  }
  .sec-faq .faq-question {
    grid-template-columns: 24px minmax(0, 1fr) 26px;
    gap: 10px;
    min-height: 72px;
    padding: 16px 0;
  }
  .sec-faq .faq-question h3 {
    font-size: 14px;
  }
  .sec-faq .faq-item.active .faq-answer {
    padding: 0 36px 18px 34px;
  }
  .sec-faq .faq-answer p {
    font-size: 13px;
  }
}
/* Reviews evidence-first refinement */
.sec-reviews {
  background: #f4f7fb;
  padding: 92px 0 84px;
}
.sec-reviews .section-title {
  max-width: 820px;
  margin: 0 auto 26px;
  text-align: center;
}
.sec-reviews .section-title .label {
  color: #2563eb;
}
.sec-reviews .section-title p {
  max-width: 760px;
  margin: 0 auto;
  color: #526276;
}
.reviews-trust-bar {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: 0 0 24px;
  overflow: hidden;
  border: 1px solid #dbe4ef;
  border-radius: 12px;
  background: #dbe4ef;
}
.reviews-trust-bar > div {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 15px 18px;
  background: #fff;
}
.reviews-trust-bar strong {
  color: #172b4d;
  font-size: 13px;
}
.reviews-trust-bar span {
  color: #64748b;
  font-size: 12px;
  line-height: 1.5;
}
.sec-reviews .reviews-layout {
  grid-template-columns: minmax(235px, .7fr) minmax(0, 2fr);
  gap: 20px;
}
.sec-reviews .reviews-summary {
  border: 1px solid #203653;
  border-radius: 14px;
  background: #172b4d;
  box-shadow: 0 14px 30px rgba(23, 43, 77, .16);
}
.sec-reviews .reviews-summary-label {
  color: #93c5fd;
}
.sec-reviews .reviews-summary-mark {
  width: 46px;
  height: 32px;
  margin-top: 24px;
  color: #60a5fa;
  font-family: inherit;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: .08em;
  line-height: 1;
}
.sec-reviews .reviews-summary h3 {
  font-size: 22px;
}
.sec-reviews .reviews-summary > p {
  color: #c8d5e7;
}
.sec-reviews .reviews-summary-list {
  gap: 9px;
  padding-top: 22px;
}
.sec-reviews .reviews-summary-list span {
  color: #e2eaf5;
  line-height: 1.45;
}
.sec-reviews .reviews-summary-list span::before {
  width: 17px;
  height: 17px;
  border-radius: 5px;
  background: rgba(96, 165, 250, .16);
  color: #93c5fd;
}
.sec-reviews .reviews-grid {
  gap: 16px;
}
.sec-reviews .review-card {
  min-height: 0;
  padding: 20px;
  border: 1px solid #dbe4ef;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 8px 22px rgba(30, 64, 96, .06);
}
.sec-reviews .review-card:hover {
  border-color: #93c5fd;
  background: #fff;
  box-shadow: 0 14px 28px rgba(30, 64, 96, .1);
}
.sec-reviews .review-card-top {
  gap: 7px;
  margin-bottom: 15px;
}
.sec-reviews .review-signal {
  display: inline-flex;
  align-self: flex-start;
  padding: 5px 9px;
  border-radius: 6px;
  background: #eaf2ff;
  color: #1d4ed8;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .02em;
}
.sec-reviews .review-context {
  color: #718096;
  font-size: 11px;
  font-weight: 600;
}
.sec-reviews .review-card-title {
  margin: 0 0 14px;
  color: #172b4d;
  font-size: 17px;
  line-height: 1.4;
}
.sec-reviews .review-fact-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}
.sec-reviews .review-fact-grid > div {
  padding: 10px;
  border: 1px solid #e7edf5;
  border-radius: 8px;
  background: #f8fafc;
}
.sec-reviews .review-fact-grid span,
.sec-reviews .review-result span {
  display: block;
  margin-bottom: 4px;
  color: #8290a3;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
}
.sec-reviews .review-fact-grid strong {
  display: block;
  color: #334155;
  font-size: 12px;
  line-height: 1.45;
}
.sec-reviews .review-card p {
  color: #4b5d73;
  font-size: 13px;
  line-height: 1.72;
}
.sec-reviews .review-result {
  margin-top: 15px;
  padding: 10px 12px;
  border-left: 3px solid #60a5fa;
  background: #f1f6ff;
}
.sec-reviews .review-result strong {
  color: #24507f;
  font-size: 12px;
  line-height: 1.5;
}
.sec-reviews .review-card .author {
  padding-top: 17px;
  color: #64748b;
}
.sec-reviews .author-avatar {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #e7effb;
  color: #2563eb;
  font-size: 11px;
}
.sec-reviews .author-copy strong {
  color: #334155;
}
.sec-reviews .author-copy small {
  color: #8290a3;
}
.reviews-disclosure {
  max-width: 920px;
  margin: 18px auto 0;
  color: #718096;
  font-size: 11px;
  line-height: 1.65;
  text-align: center;
}
@media (max-width: 900px) {
  .sec-reviews .reviews-layout {
    grid-template-columns: 1fr;
  }
  .sec-reviews .reviews-summary {
    min-height: 0;
  }
}
@media (max-width: 600px) {
  .sec-reviews {
    padding: 66px 0 60px;
  }
  .reviews-trust-bar {
    grid-template-columns: 1fr;
  }
  .reviews-trust-bar > div {
    padding: 13px 15px;
  }
  .sec-reviews .review-fact-grid {
    grid-template-columns: 1fr;
  }
}
/* Host server product icon */
.host-product-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-right: 7px;
  flex: 0 0 24px;
  border: 1px solid #f4c978;
  border-radius: 6px;
  background: #fff8e8;
  color: #a85a08;
  box-shadow: 0 2px 6px rgba(146, 64, 14, .08);
  vertical-align: middle;
  transition: color .2s ease, background .2s ease, border-color .2s ease, transform .2s ease;
}
.host-product-icon svg {
  display: block;
  width: 16px;
  height: 16px;
}
.coverage-tab[data-coverage-tab="baremetal"],
.one-stop-tab[data-one-stop-product="host"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.coverage-tab[data-coverage-tab="baremetal"]:hover .host-product-icon,
.one-stop-tab[data-one-stop-product="host"]:hover .host-product-icon {
  border-color: #e4a846;
  background: #fff3d6;
  color: #92400e;
  transform: translateY(-1px);
}
.coverage-tab[data-coverage-tab="baremetal"].active .host-product-icon {
  border-color: #e8b95f;
  background: #fff4d9;
  color: #92400e;
}
.one-stop-tab[data-one-stop-product="host"].active .host-product-icon {
  border-color: rgba(255, 255, 255, .28);
  background: rgba(255, 255, 255, .16);
  color: #fff;
  box-shadow: none;
}
.coverage-badge-host {
  gap: 0;
  border: 1px solid #f2d28d;
  background: #fff8e8;
  color: #92400e;
}
.coverage-badge-host .host-product-icon {
  width: 20px;
  height: 20px;
  margin-right: 6px;
  flex-basis: 20px;
  border: 0;
  border-radius: 5px;
  background: #f9e4b6;
  color: #92400e;
  box-shadow: none;
}
.coverage-badge-host .host-product-icon svg {
  width: 14px;
  height: 14px;
}
@media (max-width: 600px) {
  .host-product-icon {
    width: 22px;
    height: 22px;
    margin-right: 6px;
    flex-basis: 22px;
  }
  .host-product-icon svg {
    width: 15px;
    height: 15px;
  }
}
/* Global Regions data methodology */
.regions-data-note {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 15px;
  margin-top: 22px;
  padding: 17px 19px;
  border: 1px solid #dbe7f5;
  border-radius: 10px;
  background: #f8fbff;
}
.regions-data-note-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: #e8f2ff;
  color: #2563eb;
}
.regions-data-note-icon svg {
  width: 20px;
  height: 20px;
}
.regions-data-note-copy h3 {
  margin: 0 0 4px;
  color: #1e3a5f;
  font-size: 14px;
  line-height: 1.4;
}
.regions-data-note-copy p {
  max-width: 820px;
  margin: 0;
  color: #64748b;
  font-size: 12px;
  line-height: 1.65;
}
.regions-data-note-link {
  color: #1d4ed8;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  text-decoration: none;
  white-space: nowrap;
}
.regions-data-note-link:hover {
  color: #1e40af;
  text-decoration: underline;
}
@media (max-width: 760px) {
  .regions-data-note {
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 12px;
    padding: 15px;
  }
  .regions-data-note-icon {
    width: 34px;
    height: 34px;
  }
  .regions-data-note-link {
    grid-column: 2;
    white-space: normal;
  }
}

/* ===== source: header.html inline style ===== */
img.emoji{height:1em;width:1em;margin:0 .05em 0 .1em;vertical-align:-0.1em;display:inline}
.region-card .flag img.emoji{width:1em;height:1em;vertical-align:-0.15em}
.product-card .icon img.emoji{width:1.2em;height:1.2em}

.nav-actions{align-items:center}
.lang-switcher{position:relative;display:inline-flex;align-items:center}
.lang-switcher::after{content:'';position:absolute;top:100%;left:0;right:0;height:10px;z-index:999}
.lang-btn{background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.15);color:rgba(255,255,255,0.8);padding:8px 14px;border-radius:980px;font-size:14px;font-weight:500;cursor:pointer;display:inline-flex;align-items:center;gap:5px;transition:all .25s ease;white-space:nowrap}
.lang-btn:hover{background:rgba(0,113,227,0.15);border-color:rgba(0,113,227,0.5);color:#fff}
.lang-dropdown{display:none;position:absolute;top:calc(100% + 6px);left:50%;margin-left:-65px;background:rgba(28,28,30,0.95);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border:1px solid rgba(255,255,255,0.12);border-radius:12px;padding:6px 0;min-width:130px;z-index:1000;box-shadow:0 8px 32px rgba(0,0,0,0.4);opacity:0;transform:translateY(-4px);transition:opacity .2s ease,transform .2s ease}
.lang-switcher:hover .lang-dropdown{display:block;opacity:1;transform:translateY(0)}
.lang-dropdown a{display:block;padding:8px 14px;color:rgba(255,255,255,0.7);font-size:13px;font-weight:400;text-decoration:none;transition:all .2s ease;white-space:nowrap}
.lang-dropdown a:hover{background:rgba(255,255,255,0.1);color:#fff}
.lang-dropdown a.active{color:#0a84ff;font-weight:600}
.mobile-lang-switcher{display:flex;gap:0;border-bottom:1px solid rgba(255,255,255,0.1);margin-bottom:4px}
.mobile-lang-switcher a{flex:1;text-align:center;padding:12px 0;color:rgba(255,255,255,0.6);font-size:14px;font-weight:400;text-decoration:none;transition:all .2s ease}
.mobile-lang-switcher a:hover{color:#fff;background:rgba(255,255,255,0.05)}
.mobile-lang-switcher a.active{color:#0a84ff;font-weight:600}
@media(max-width:768px){.lang-switcher{display:none}}

.hidden-until-auth { display: none; }
.footer-brand .footer-logo-mark { color: var(--primary); }

/* ===== source: seo-articles.css ===== */
/* SEO文章列表样式 */
.sec-seo-articles {
  padding: 80px 0;
  background: linear-gradient(180deg, #ffffff 0%, #f8f9fa 100%);
}

.seo-articles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 24px;
  margin-top: 40px;
}

.seo-article-card {
  background: #ffffff;
  border-radius: 12px;
  padding: 28px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;
  border: 1px solid #e5e7eb;
  position: relative;
  overflow: hidden;
}

.seo-article-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #3b82f6 0%, #60a5fa 100%);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.seo-article-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(59, 130, 246, 0.15);
  border-color: #3b82f6;
}

.seo-article-card:hover::before {
  transform: scaleX(1);
}

.article-meta {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
}

.article-tag {
  display: inline-block;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 500;
  border-radius: 4px;
  background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%);
  color: #ffffff;
}

.article-date {
  display: inline-block;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 500;
  border-radius: 4px;
  background: #f3f4f6;
  color: #6b7280;
}

.seo-article-card h3 {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.5;
  margin: 0 0 12px 0;
  color: #111827;
}

.seo-article-card h3 a {
  color: #111827;
  text-decoration: none;
  transition: color 0.2s ease;
}

.seo-article-card h3 a:hover {
  color: #3b82f6;
}

.article-excerpt {
  font-size: 14px;
  line-height: 1.7;
  color: #6b7280;
  margin: 0 0 16px 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.article-link {
  display: inline-flex;
  align-items: center;
  font-size: 14px;
  font-weight: 500;
  color: #3b82f6;
  text-decoration: none;
  transition: all 0.2s ease;
}

.article-link:hover {
  color: #2563eb;
  transform: translateX(4px);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .sec-seo-articles {
    padding: 60px 0;
  }

  .seo-articles-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .seo-article-card {
    padding: 24px;
  }

  .seo-article-card h3 {
    font-size: 16px;
  }

  .article-excerpt {
    font-size: 13px;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .seo-articles-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1025px) {
  .seo-articles-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* 暗色模式支持 */
@media (prefers-color-scheme: dark) {
  .sec-seo-articles {
    background: linear-gradient(180deg, #1f2937 0%, #111827 100%);
  }

  .seo-article-card {
    background: #1f2937;
    border-color: #374151;
  }

  .seo-article-card h3,
  .seo-article-card h3 a {
    color: #f9fafb;
  }

  .seo-article-card h3 a:hover {
    color: #60a5fa;
  }

  .article-excerpt {
    color: #9ca3af;
  }

  .article-date {
    background: #374151;
    color: #9ca3af;
  }

  .article-link {
    color: #60a5fa;
  }

  .article-link:hover {
    color: #93c5fd;
  }
}

/* Knowledge Base editorial redesign */
.sec-seo-articles {
  position: relative;
  overflow: hidden;
  padding: 92px 0;
  background: #f4f7f6;
}
.sec-seo-articles::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 1px;
  background: #dce6e2;
}
.sec-seo-articles > .container {
  position: relative;
  z-index: 1;
}
.sec-seo-articles .section-title {
  max-width: 760px;
  margin: 0 auto 38px;
  text-align: center;
}
.sec-seo-articles .section-title .label {
  color: #55758c;
  letter-spacing: .14em;
}
.sec-seo-articles .section-title h2 {
  color: #20302e;
}
.sec-seo-articles .section-title p {
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
  color: #687875;
}
.sec-seo-articles .seo-articles-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 0;
}
.sec-seo-articles .seo-article-card {
  --kb-accent: #55758c;
  display: flex;
  flex-direction: column;
  min-height: 286px;
  padding: 25px 24px 22px;
  overflow: hidden;
  border: 1px solid #dce5e2;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 12px 28px rgba(44, 70, 65, .06);
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.sec-seo-articles .seo-article-card:nth-child(2) {
  --kb-accent: #2f7d71;
}
.sec-seo-articles .seo-article-card:nth-child(3) {
  --kb-accent: #ad7647;
}
.sec-seo-articles .seo-article-card:nth-child(4) {
  --kb-accent: #806a8d;
}
.sec-seo-articles .seo-article-card:nth-child(5) {
  --kb-accent: #567b62;
}
.sec-seo-articles .seo-article-card:nth-child(6) {
  --kb-accent: #9a5d62;
}
.sec-seo-articles .seo-article-card::before {
  top: 0;
  left: 0;
  right: auto;
  width: 4px;
  height: 100%;
  background: var(--kb-accent);
  transform: none;
  opacity: .9;
}
.sec-seo-articles .seo-article-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--kb-accent) 42%, #dce5e2);
  box-shadow: 0 18px 36px rgba(44, 70, 65, .12);
}
.sec-seo-articles .article-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 19px;
}
.sec-seo-articles .article-tag {
  padding: 4px 9px;
  border: 1px solid color-mix(in srgb, var(--kb-accent) 25%, #ffffff);
  border-radius: 4px;
  background: color-mix(in srgb, var(--kb-accent) 10%, #ffffff);
  color: var(--kb-accent);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .03em;
}
.sec-seo-articles .article-date {
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: #8b9a96;
  font-size: 11px;
  letter-spacing: .04em;
}
.sec-seo-articles .seo-article-card h3 {
  margin: 0 0 12px;
  color: #263633;
  font-size: 18px;
  font-weight: 680;
  line-height: 1.42;
}
.sec-seo-articles .seo-article-card h3 a {
  color: inherit;
}
.sec-seo-articles .seo-article-card h3 a:hover {
  color: var(--kb-accent);
}
.sec-seo-articles .article-excerpt {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: #6b7976;
  font-size: 13px;
  line-height: 1.7;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.sec-seo-articles .article-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding-top: 18px;
  color: var(--kb-accent);
  font-size: 12px;
  font-weight: 750;
  letter-spacing: .02em;
}
.sec-seo-articles .article-link:hover {
  color: var(--kb-accent);
  transform: translateX(3px);
}
@media (max-width: 1024px) {
  .sec-seo-articles {
    padding: 76px 0;
  }
  .sec-seo-articles .seo-articles-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .sec-seo-articles {
    padding: 58px 0;
  }
  .sec-seo-articles .section-title {
    margin-bottom: 26px;
  }
  .sec-seo-articles .seo-articles-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .sec-seo-articles .seo-article-card {
    min-height: 0;
    padding: 22px 20px 20px;
  }
  .sec-seo-articles .seo-article-card h3 {
    font-size: 16px;
  }
  .sec-seo-articles .article-excerpt {
    font-size: 12px;
  }
}
/* Knowledge Base feature index refinement */
.sec-seo-articles {
  padding: 96px 0;
  background: #f5f7f5;
}
.sec-seo-articles .section-title {
  max-width: 760px;
  margin: 0 auto 42px;
}
.sec-seo-articles .section-title::after {
  content: '';
  display: block;
  width: 48px;
  height: 3px;
  margin: 22px auto 0;
  border-radius: 2px;
  background: #55758c;
}
.sec-seo-articles .seo-articles-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(176px, auto));
  grid-template-areas:
    "feature feature side-a"
    "feature feature side-b"
    "side-c side-d side-e";
  gap: 14px;
  margin-top: 0;
}
.sec-seo-articles .seo-article-card {
  min-height: 0;
  padding: 23px 22px 20px;
  border: 1px solid #d9e3df;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: none;
}
.sec-seo-articles .seo-article-card:nth-child(1) {
  grid-area: feature;
  min-height: 370px;
  padding: 32px 30px 28px;
  border-color: #294d4c;
  background: #294d4c;
  box-shadow: 0 18px 36px rgba(33, 67, 65, .16);
}
.sec-seo-articles .seo-article-card:nth-child(2) {
  grid-area: side-a;
}
.sec-seo-articles .seo-article-card:nth-child(3) {
  grid-area: side-b;
}
.sec-seo-articles .seo-article-card:nth-child(4) {
  grid-area: side-c;
}
.sec-seo-articles .seo-article-card:nth-child(5) {
  grid-area: side-d;
}
.sec-seo-articles .seo-article-card:nth-child(6) {
  grid-area: side-e;
}
.sec-seo-articles .seo-article-card::before {
  width: 3px;
  opacity: .95;
}
.sec-seo-articles .seo-article-card:nth-child(1)::before {
  width: 5px;
  background: #a9d4c6;
}
.sec-seo-articles .seo-article-card:hover {
  transform: translateY(-3px);
  border-color: #9db8af;
  box-shadow: 0 14px 28px rgba(44, 70, 65, .1);
}
.sec-seo-articles .seo-article-card:nth-child(1):hover {
  border-color: #294d4c;
  box-shadow: 0 22px 42px rgba(33, 67, 65, .22);
}
.sec-seo-articles .seo-article-card:nth-child(1) .article-meta {
  margin-bottom: 38px;
}
.sec-seo-articles .seo-article-card:nth-child(1) .article-tag {
  border-color: rgba(190, 231, 216, .38);
  background: rgba(190, 231, 216, .14);
  color: #c4e6da;
}
.sec-seo-articles .seo-article-card:nth-child(1) .article-date {
  color: #b7cfca;
}
.sec-seo-articles .seo-article-card:nth-child(1) h3 {
  max-width: 620px;
  margin-bottom: 16px;
  color: #ffffff;
  font-size: 29px;
  line-height: 1.3;
}
.sec-seo-articles .seo-article-card:nth-child(1) h3 a:hover {
  color: #d4eee5;
}
.sec-seo-articles .seo-article-card:nth-child(1) .article-excerpt {
  max-width: 590px;
  color: #c1d5d0;
  font-size: 14px;
  line-height: 1.8;
  -webkit-line-clamp: 4;
}
.sec-seo-articles .seo-article-card:nth-child(1) .article-link {
  color: #c4e6da;
  font-size: 13px;
}
.sec-seo-articles .seo-article-card:nth-child(n+2) .article-meta {
  margin-bottom: 15px;
}
.sec-seo-articles .seo-article-card:nth-child(n+2) h3 {
  margin-bottom: 9px;
  font-size: 16px;
  line-height: 1.45;
}
.sec-seo-articles .seo-article-card:nth-child(n+2) .article-excerpt {
  font-size: 12px;
  line-height: 1.6;
  -webkit-line-clamp: 2;
}
.sec-seo-articles .seo-article-card:nth-child(n+2) .article-link {
  padding-top: 12px;
  font-size: 11px;
}
@media (max-width: 1024px) {
  .sec-seo-articles {
    padding: 78px 0;
  }
  .sec-seo-articles .seo-articles-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto;
    grid-template-areas: none;
  }
  .sec-seo-articles .seo-article-card {
    grid-area: auto !important;
    min-height: 248px;
  }
  .sec-seo-articles .seo-article-card:nth-child(1) {
    grid-column: 1 / -1;
    min-height: 300px;
  }
}
@media (max-width: 640px) {
  .sec-seo-articles {
    padding: 60px 0;
  }
  .sec-seo-articles .section-title {
    margin-bottom: 28px;
  }
  .sec-seo-articles .seo-articles-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .sec-seo-articles .seo-article-card,
  .sec-seo-articles .seo-article-card:nth-child(1) {
    grid-column: auto;
    min-height: 0;
    padding: 22px 20px 20px;
  }
  .sec-seo-articles .seo-article-card:nth-child(1) .article-meta {
    margin-bottom: 24px;
  }
  .sec-seo-articles .seo-article-card:nth-child(1) h3 {
    font-size: 23px;
  }
  .sec-seo-articles .seo-article-card:nth-child(1) .article-excerpt {
    font-size: 13px;
  }
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* ===== source: hero-horizontal.css ===== */
/* ========================================
   Hero Banner 横向滚动重设计 - iOS风格
   左右自由滚动的现代化设计
   ======================================== */

/* === 重置Hero容器为横向滚动布局 === */
.hero {
  min-height: 680px !important;
  height: 680px !important;
  padding: 0 !important;
  margin: 0 !important;
  background: linear-gradient(180deg, #000000 0%, #0a0a0f 50%, #000000 100%) !important;
  position: relative;
  overflow: hidden !important;
  display: flex;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
}

/* === 横向滚动容器 === */
.hero-scroll-container {
  display: flex;
  width: 100%;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  position: relative;
  z-index: 10;
}

/* 移动端优化：平衡防止跳屏和确保对齐 */
@media (max-width: 768px) {
  .hero-scroll-container {
    scroll-behavior: auto;
    scroll-snap-type: x mandatory;  /* 恢复mandatory确保对齐 */
    scroll-padding: 0;
    /* 增加滚动停止时的snap强度 */
    scroll-snap-stop: normal;
  }

  /* 增加面板间距，防止误触发跳屏 */
  .hero-panel {
    scroll-snap-align: center;  /* 改为center对齐，更稳定 */
  }
}

.hero-scroll-container::-webkit-scrollbar {
  display: none;
}

/* === 滚动面板 === */
.hero-panel {
  min-width: 100vw;
  width: 100vw;
  height: 100%;
  flex-shrink: 0;
  scroll-snap-align: start;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 0 80px;
  box-sizing: border-box;
  /* 优化渲染性能 */
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* === 面板内容动画 === */
.hero-panel-content {
  max-width: 1200px;
  width: 100%;
  text-align: center;
  position: relative;
  z-index: 5;
  /* 初始状态 */
  opacity: 0;
  transform: translateY(40px) scale(0.98);
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 面板激活时的动画 */
.hero-panel.active .hero-panel-content {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition-delay: 0.1s;
}

/* 面板切换时的淡出效果 */
.hero-panel:not(.active) .hero-panel-content {
  opacity: 0;
  transform: translateY(40px) scale(0.98);
  transition-duration: 0.4s;
}

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

.hero-panel-content h1,
.hero-panel-content h2 {
  font-size: clamp(36px, 5.5vw, 72px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 24px;
  color: #ffffff;
  text-shadow: 0 2px 40px rgba(0,0,0,0.5);
  /* 标题延迟动画 */
  opacity: 0;
  transform: translateY(20px) scale(0.96);
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  word-break: break-word;
}

.hero-panel.active .hero-panel-content h1,
.hero-panel.active .hero-panel-content h2 {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition-delay: 0.2s;
}

@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.hero-panel-content h1 em,
.hero-panel-content h2 em {
  font-style: normal;
  background: linear-gradient(135deg, #0a84ff 0%, #5e5ce6 50%, #af52de 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline-block;
  /* 渐变文字动画 */
  animation: shimmer 3s ease-in-out infinite;
  background-size: 200% auto;
}

@keyframes shimmer {
  0%, 100% {
    background-position: 0% center;
  }
  50% {
    background-position: 100% center;
  }
}

.hero-panel-content p {
  font-size: clamp(19px, 2vw, 24px);
  line-height: 1.5;
  color: rgba(255,255,255,0.8);
  margin-bottom: 36px;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  /* 段落延迟动画 */
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.hero-panel.active .hero-panel-content p {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.3s;
}

.hero-panel-content .btn-group {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  /* 按钮组延迟动画 */
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.hero-panel.active .hero-panel-content .btn-group {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.4s;
}

.hero-panel-content .btn {
  padding: 14px 32px;
  font-size: 17px;
  font-weight: 500;
  border-radius: 980px;
  text-decoration: none;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  position: relative;
  overflow: hidden;
  /* 按钮3D效果 */
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

/* 按钮悬停光晕效果 */
.hero-panel-content .btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255,255,255,0.3);
  transform: translate(-50%, -50%);
  transition: width 0.6s ease, height 0.6s ease;
  z-index: 0;
}

.hero-panel-content .btn:hover::before {
  width: 300px;
  height: 300px;
}

.hero-panel-content .btn > * {
  position: relative;
  z-index: 1;
}

.hero-panel-content .btn-primary {
  background: #0a84ff;
  color: #ffffff;
  border: none;
  box-shadow: 0 4px 20px rgba(10,132,255,0.4);
}

.hero-panel-content .btn-primary:hover {
  background: #0077ed;
  transform: scale(1.05) translateY(-2px);
  box-shadow: 0 8px 30px rgba(10,132,255,0.6);
}

.hero-panel-content .btn-primary:active {
  transform: scale(0.98) translateY(0);
}

.hero-panel-content .btn-secondary {
  background: rgba(255,255,255,0.1);
  color: #ffffff;
  border: 1px solid rgba(255,255,255,0.2);
  backdrop-filter: blur(20px);
}

.hero-panel-content .btn-secondary:hover {
  background: rgba(255,255,255,0.15);
  border-color: rgba(255,255,255,0.3);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(255,255,255,0.1);
}

.hero-panel-content .btn-secondary:active {
  transform: translateY(0);
}

/* === 面板特定样式 === */
/* 第一个面板 - 主推广（深蓝紫渐变主题，更有质感） */
.hero-panel.panel-main {
  background:
    radial-gradient(ellipse 70% 50% at 30% 40%, rgba(59,130,246,0.28) 0%, rgba(59,130,246,0.12) 40%, transparent 70%),
    radial-gradient(ellipse 60% 50% at 70% 60%, rgba(139,92,246,0.22) 0%, rgba(139,92,246,0.08) 40%, transparent 70%),
    linear-gradient(135deg, rgba(30,58,138,0.15) 0%, rgba(88,28,135,0.12) 100%);
}

.hero-panel.panel-main .hero-panel-content h1,
.hero-panel.panel-main .hero-panel-content h2 {
  font-size: clamp(34px, 5.5vw, 68px);
  background: linear-gradient(135deg, #60a5fa 0%, #a78bfa 50%, #c084fc 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 30px rgba(96,165,250,0.3));
}

.hero-panel.panel-main .hero-panel-content p {
  color: rgba(255,255,255,0.85);
  text-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

.hero-panel.panel-main .btn-primary {
  background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
  box-shadow: 0 4px 20px rgba(59,130,246,0.5), 0 8px 40px rgba(139,92,246,0.3);
  border: 1px solid rgba(147,197,253,0.2);
}

.hero-panel.panel-main .btn-primary:hover {
  background: linear-gradient(135deg, #60a5fa 0%, #a78bfa 100%);
  box-shadow: 0 6px 30px rgba(59,130,246,0.6), 0 12px 60px rgba(139,92,246,0.4);
  transform: scale(1.05) translateY(-2px);
}

.hero-panel.panel-main .btn-secondary {
  background: rgba(255,255,255,0.08);
  border-color: rgba(147,197,253,0.25);
  backdrop-filter: blur(20px);
}

.hero-panel.panel-main .btn-secondary:hover {
  background: rgba(255,255,255,0.14);
  border-color: rgba(147,197,253,0.4);
  box-shadow: 0 4px 20px rgba(147,197,253,0.2);
}

.hero-panel.panel-main .stat-card {
  background: linear-gradient(135deg, rgba(59,130,246,0.18), rgba(139,92,246,0.12));
  border-color: rgba(96,165,250,0.3);
  backdrop-filter: blur(20px);
  box-shadow: 0 4px 20px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.1);
}

.hero-panel.panel-main .stat-card:hover {
  background: linear-gradient(135deg, rgba(59,130,246,0.28), rgba(139,92,246,0.18));
  border-color: rgba(96,165,250,0.5);
  box-shadow: 0 12px 40px rgba(59,130,246,0.35), 0 0 60px rgba(139,92,246,0.2);
  transform: translateY(-4px) scale(1.03);
}

.hero-panel.panel-main .stat-card .stat-num {
  background: linear-gradient(135deg, #60a5fa 0%, #c084fc 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 2px 8px rgba(96,165,250,0.4));
}

/* 第二个面板 - GPU服务器（橙红渐变主题，更强烈的视觉冲击） */
.hero-panel.panel-gpu {
  background:
    radial-gradient(circle at 20% 30%, rgba(249,115,22,0.25) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(239,68,68,0.22) 0%, transparent 50%),
    linear-gradient(135deg, rgba(124,45,18,0.12) 0%, rgba(127,29,29,0.12) 100%);
}

.hero-panel.panel-gpu .hero-panel-content {
  text-align: left;
  max-width: 1100px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

.hero-panel.panel-gpu .hero-panel-text {
  min-width: 0;
  overflow: hidden;
}

.hero-panel.panel-gpu .hero-panel-text {
  order: 1;
}

.hero-panel.panel-gpu .hero-panel-content h1,
.hero-panel.panel-gpu .hero-panel-content h2 {
  font-size: clamp(44px, 5.5vw, 68px);
  text-align: left;
  background: linear-gradient(135deg, #fb923c 0%, #f97316 40%, #ef4444 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 20px;
  line-height: 1.05;
  filter: drop-shadow(0 0 30px rgba(249,115,22,0.4));
}

.hero-panel.panel-gpu .hero-panel-content p {
  text-align: left;
  font-size: 19px;
  color: rgba(255,255,255,0.8);
  margin-bottom: 28px;
  text-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

.hero-panel.panel-gpu .btn-group {
  justify-content: flex-start;
}

.hero-panel.panel-gpu .btn-primary {
  background: linear-gradient(135deg, #f97316 0%, #ef4444 100%);
  box-shadow: none;
  border: 1px solid rgba(251,146,60,0.25);
}

.hero-panel.panel-gpu .btn-primary:hover {
  background: linear-gradient(135deg, #fb923c 0%, #f87171 100%);
  box-shadow: none;
  transform: scale(1.05) translateY(-2px);
}

.hero-panel.panel-gpu .btn-secondary {
  background: rgba(255,255,255,0.08);
  border-color: rgba(251,146,60,0.25);
}

.hero-panel.panel-gpu .btn-secondary:hover {
  background: rgba(255,255,255,0.14);
  border-color: rgba(251,146,60,0.4);
}

.hero-panel.panel-gpu .stats-grid {
  order: 2;
  margin: 0;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.hero-panel.panel-gpu .stat-card {
  background: linear-gradient(135deg, rgba(249,115,22,0.2), rgba(239,68,68,0.12));
  border-color: rgba(251,146,60,0.4);
  padding: 32px 20px;
  backdrop-filter: blur(20px);
  box-shadow: 0 4px 20px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.1);
}

.hero-panel.panel-gpu .stat-card:hover {
  background: linear-gradient(135deg, rgba(249,115,22,0.32), rgba(239,68,68,0.2));
  border-color: rgba(251,146,60,0.6);
  box-shadow: 0 12px 40px rgba(249,115,22,0.5), 0 0 60px rgba(239,68,68,0.3);
  transform: translateY(-6px) scale(1.02);
}

.hero-panel.panel-gpu .stat-card .stat-num {
  font-size: 36px;
  background: linear-gradient(135deg, #fb923c 0%, #fca5a5 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 2px 8px rgba(249,115,22,0.4));
}

/* 第三个面板 - 全球节点（青蓝绿渐变主题，清新科技感） */
.hero-panel.panel-global {
  background:
    radial-gradient(ellipse at 30% 50%, rgba(6,182,212,0.22) 0%, transparent 60%),
    radial-gradient(ellipse at 70% 50%, rgba(16,185,129,0.18) 0%, transparent 60%),
    linear-gradient(135deg, rgba(8,145,178,0.08) 0%, rgba(6,95,70,0.08) 100%);
}

.hero-panel.panel-global .hero-panel-content h1,
.hero-panel.panel-global .hero-panel-content h2 {
  font-size: clamp(34px, 5.5vw, 66px);
  background: linear-gradient(135deg, #22d3ee 0%, #14b8a6 50%, #10b981 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 30px rgba(34,211,238,0.3));
}

.hero-panel.panel-global .hero-panel-content p {
  font-size: 20px;
  color: rgba(255,255,255,0.85);
  text-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

.hero-panel.panel-global .btn-primary {
  background: linear-gradient(135deg, #06b6d4 0%, #10b981 100%);
  box-shadow: 0 4px 20px rgba(6,182,212,0.5), 0 8px 40px rgba(16,185,129,0.3);
  border: 1px solid rgba(34,211,238,0.3);
}

.hero-panel.panel-global .btn-primary:hover {
  background: linear-gradient(135deg, #22d3ee 0%, #34d399 100%);
  box-shadow: 0 6px 30px rgba(6,182,212,0.6), 0 12px 60px rgba(16,185,129,0.4);
  transform: scale(1.05) translateY(-2px);
}

.hero-panel.panel-global .btn-secondary {
  background: rgba(255,255,255,0.08);
  border-color: rgba(34,211,238,0.25);
}

.hero-panel.panel-global .btn-secondary:hover {
  background: rgba(255,255,255,0.14);
  border-color: rgba(34,211,238,0.4);
}

.hero-panel.panel-global .stats-grid {
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  max-width: 900px;
}

.hero-panel.panel-global .stat-card {
  background: linear-gradient(135deg, rgba(6,182,212,0.18), rgba(16,185,129,0.12));
  border-color: rgba(34,211,238,0.35);
  padding: 28px 16px;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(20px);
  box-shadow: 0 4px 20px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.1);
}

.hero-panel.panel-global .stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(34,211,238,0.7), transparent);
}

.hero-panel.panel-global .stat-card:hover {
  background: linear-gradient(135deg, rgba(6,182,212,0.28), rgba(16,185,129,0.18));
  border-color: rgba(34,211,238,0.6);
  box-shadow: 0 12px 40px rgba(6,182,212,0.4), 0 0 60px rgba(16,185,129,0.2);
  transform: translateY(-4px);
}

.hero-panel.panel-global .stat-card .stat-num {
  font-size: 28px;
  background: linear-gradient(135deg, #22d3ee 0%, #6ee7b7 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 2px 8px rgba(34,211,238,0.4));
}

.hero-panel.panel-global .stat-card .stat-label {
  font-size: 11px;
  color: rgba(255,255,255,0.75);
}

/* === 滚动指示器 === */
.hero-scroll-indicators {
  position: absolute;
  bottom: 40px;
  left: 0;
  right: 0;
  margin: 0 auto;
  display: flex;
  gap: 12px;
  z-index: 20;
  padding: 12px 20px;
  background: rgba(0,0,0,0.4);
  backdrop-filter: blur(20px) saturate(180%);
  border-radius: 100px;
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
  /* 指示器入场动画 */
  animation: fadeInUp 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  animation-delay: 1.2s;
  opacity: 0;
  /* 确保完美居中 */
  width: fit-content;
  justify-content: center;
}

.hero-scroll-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.3);
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  /* 脉冲效果 */
  box-shadow: 0 0 0 0 rgba(255,255,255,0.4);
}

.hero-scroll-indicator::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: transparent;
  transform: translate(-50%, -50%);
  transition: background 0.3s ease;
}

.hero-scroll-indicator:hover {
  background: rgba(255,255,255,0.6);
  transform: scale(1.2);
}

.hero-scroll-indicator:hover::before {
  background: rgba(255,255,255,0.1);
}

.hero-scroll-indicator.active {
  width: 32px;
  border-radius: 4px;
  background: #0a84ff;
  box-shadow: 0 0 20px rgba(10,132,255,0.6), 0 0 40px rgba(10,132,255,0.3);
  /* 活动指示器脉冲动画 */
  animation: indicatorPulse 2s ease-in-out infinite;
}

@keyframes indicatorPulse {
  0%, 100% {
    box-shadow: 0 0 20px rgba(10,132,255,0.6), 0 0 40px rgba(10,132,255,0.3);
  }
  50% {
    box-shadow: 0 0 30px rgba(10,132,255,0.8), 0 0 60px rgba(10,132,255,0.5);
  }
}

/* === 左右导航箭头 === */
.hero-nav-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(0,0,0,0.4);
  backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  color: rgba(255,255,255,0.8);
  font-size: 24px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
  /* 箭头入场动画 */
  animation: fadeIn 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  animation-delay: 1s;
  opacity: 0;
  /* 呼吸动画 */
  animation: arrowBreath 3s ease-in-out infinite;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes arrowBreath {
  0%, 100% {
    transform: translateY(-50%) scale(1);
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
  }
  50% {
    transform: translateY(-50%) scale(1.05);
    box-shadow: 0 6px 30px rgba(0,0,0,0.3), 0 0 30px rgba(255,255,255,0.1);
  }
}

.hero-nav-arrow:hover {
  background: rgba(0,0,0,0.6);
  border-color: rgba(255,255,255,0.3);
  color: #ffffff;
  transform: translateY(-50%) scale(1.15);
  box-shadow: 0 8px 30px rgba(0,0,0,0.4), 0 0 40px rgba(255,255,255,0.15);
  animation: none; /* 悬停时停止呼吸动画 */
}

.hero-nav-arrow:active {
  transform: translateY(-50%) scale(1.05);
  box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

/* 箭头图标动画 */
.hero-nav-arrow::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, transparent 70%);
  opacity: 0;
  transform: scale(0.5);
  transition: all 0.4s ease;
}

.hero-nav-arrow:hover::before {
  opacity: 1;
  transform: scale(1);
}

.hero-nav-arrow.prev {
  left: 32px;
  animation-delay: 0.9s;
}

.hero-nav-arrow.next {
  right: 32px;
  animation-delay: 1s;
}

/* 箭头左右摆动提示 */
@keyframes arrowHintLeft {
  0%, 100% {
    transform: translateY(-50%) translateX(0);
  }
  50% {
    transform: translateY(-50%) translateX(-5px);
  }
}

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

.hero-nav-arrow.prev {
  animation: arrowBreath 3s ease-in-out infinite, arrowHintLeft 2s ease-in-out infinite;
}

.hero-nav-arrow.next {
  animation: arrowBreath 3s ease-in-out infinite, arrowHintRight 2s ease-in-out infinite;
}

/* === 背景装饰层 === */
.hero-bg {
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

/* === 优化原有背景元素 === */
.hero-orb-1 {
  background: radial-gradient(circle, rgba(10,132,255,0.3) 0%, transparent 70%) !important;
  filter: blur(120px) !important;
  animation: orbFloatSlow 40s ease-in-out infinite !important;
}

.hero-orb-2 {
  background: radial-gradient(circle, rgba(94,92,230,0.25) 0%, transparent 70%) !important;
  filter: blur(120px) !important;
  animation: orbFloatSlow 45s ease-in-out infinite reverse !important;
}

.hero-orb-3 {
  background: radial-gradient(circle, rgba(175,82,222,0.2) 0%, transparent 70%) !important;
  filter: blur(120px) !important;
  animation: orbFloatSlow 50s ease-in-out infinite !important;
}

@keyframes orbFloatSlow {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(60px, -60px) scale(1.15); }
  66% { transform: translate(-50px, 50px) scale(0.9); }
}

/* === 移动端禁用所有背景动画，防止闪烁 === */
@media (max-width: 768px) {
  .hero-bg,
  .hero-bg * {
    animation: none !important;
    will-change: auto !important;
    transform: translate3d(0, 0, 0) !important;
  }

  .hero-orb-1,
  .hero-orb-2,
  .hero-orb-3 {
    animation: none !important;
    opacity: 0.2 !important;
  }
}

/* === 网格背景增强 === */
.hero-grid-overlay {
  background-image:
    linear-gradient(90deg, rgba(10,132,255,0.06) 1px, transparent 1px),
    linear-gradient(0deg, rgba(10,132,255,0.06) 1px, transparent 1px) !important;
  background-size: 100px 100px !important;
  opacity: 0.3 !important;
  mask-image: radial-gradient(ellipse at center, black 20%, transparent 85%) !important;
  display: none !important; /* 隐藏网格 */
}

/* 隐藏对角线条 */
.hero-lines {
  display: none !important;
}

/* 隐藏脉冲线 */
.hero-pulse-lines {
  display: none !important;
}

/* === 粒子效果优化 === */
.hero-particles span {
  background: rgba(10,132,255,0.8) !important;
  box-shadow: 0 0 20px rgba(10,132,255,1), 0 0 40px rgba(10,132,255,0.5) !important;
  animation: particleFloatEnhanced 20s ease-in-out infinite !important;
}

/* 移动端禁用粒子动画 */
@media (max-width: 768px) {
  .hero-particles span {
    animation: none !important;
  }
}

@keyframes particleFloatEnhanced {
  0%, 100% {
    transform: translate(0, 0) scale(1);
    opacity: 0.4;
  }
  25% {
    transform: translate(80px, -80px) scale(1.8);
    opacity: 1;
  }
  50% {
    transform: translate(120px, 0px) scale(1.2);
    opacity: 0.7;
  }
  75% {
    transform: translate(40px, 60px) scale(1.5);
    opacity: 0.9;
  }
}

/* === 移动端适配 === */
@media (max-width: 1024px) {
  .hero {
    min-height: 560px !important;
    height: 560px !important;
  }

  .hero-panel {
    padding: 0 40px;
  }

  .hero-nav-arrow {
    width: 44px;
    height: 44px;
    font-size: 20px;
  }

  .hero-nav-arrow.prev {
    left: 20px;
  }

  .hero-nav-arrow.next {
    right: 20px;
  }

  /* GPU面板平板端改为单列 */
  .hero-panel.panel-gpu .hero-panel-content {
    grid-template-columns: 1fr;
    gap: 28px;
    text-align: center;
  }

  .hero-panel.panel-gpu .hero-panel-text {
    order: 1;
  }

  .hero-panel.panel-gpu .hero-panel-content h1,
  .hero-panel.panel-gpu .hero-panel-content h2,
  .hero-panel.panel-gpu .hero-panel-content p {
    text-align: center;
  }

  .hero-panel.panel-gpu .btn-group {
    justify-content: center;
  }

  .hero-panel.panel-gpu .stats-grid {
    order: 2;
  }

  .hero-panel.panel-global .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .hero-scroll-indicators {
    bottom: 28px;
  }
}

@media (max-width: 768px) {
  .hero {
    min-height: 540px !important;
    height: 540px !important;
    position: relative;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  /* 修复移动端滚动抖动 */
  .hero-scroll-container {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-perspective: 1000px;
    perspective: 1000px;
  }

  .hero-panel {
    padding: 0 24px;
    align-items: center;
    padding-top: 0;
    justify-content: center;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }

  /* 内容区域紧凑优化 */
  .hero-panel-content {
    max-width: 100%;
    padding: 0;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }

  /* 禁用移动端的will-change以防止抖动 */
  .hero-panel,
  .hero-panel-content,
  .hero-bg,
  .hero-bg * {
    will-change: auto !important;
  }

  /* 移动端背景元素完全静态，防止闪烁 */
  .hero-orb,
  .hero-particles,
  .hero-stars,
  .hero-luminous-spheres,
  .hero-gradient-mesh,
  .hero-soft-lights,
  .hero-grid-overlay,
  .hero-dots-overlay,
  .hero-lines,
  .hero-pulse-lines {
    animation: none !important;
  }

  /* 保留内容区域的过渡动画 */
  .hero-panel-content,
  .hero-panel-content h1,
  .hero-panel-content h2,
  .hero-panel-content p,
  .hero-panel-content .btn-group,
  .hero-panel .stats-grid,
  .hero-panel .stat-card {
    transition: opacity 0.6s ease, transform 0.6s ease !important;
  }

  .hero-panel-content h1,
  .hero-panel-content h2 {
    font-size: clamp(22px, 6.5vw, 32px) !important;
    margin-bottom: 16px !important;
    line-height: 1.2 !important;
    overflow-wrap: break-word;
    word-wrap: break-word;
  }

  .hero-panel-content h1 br,
  .hero-panel-content h2 br {
    display: inline; /* 保留标题换行 */
  }

  .hero-panel-content p {
    font-size: 13px !important;
    margin-bottom: 20px !important;
    line-height: 1.5 !important;
    max-width: 100% !important;
    overflow-wrap: break-word;
    word-wrap: break-word;
  }

  .hero-panel-content p br {
    display: none; /* 移动端去掉段落换行 */
  }

  .hero-panel-content .btn-group {
    flex-direction: row !important;
    gap: 10px !important;
    width: 100% !important;
    flex-wrap: nowrap !important;
    margin-bottom: 8px !important;
  }

  .hero-panel-content .btn {
    flex: 1 !important;
    min-width: 0 !important;
    max-width: none !important;
    justify-content: center;
    padding: 12px 12px !important;
    font-size: 13px !important;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* 统计卡片网格紧凑优化 */
  .hero-panel .stats-grid {
    margin-top: 24px !important;
    gap: 10px !important;
    grid-template-columns: repeat(4, 1fr) !important;
  }

  .hero-panel .stat-card {
    padding: 14px 8px !important;
    border-radius: 12px !important;
  }

  .hero-panel .stat-card .stat-num {
    font-size: 20px !important;
    margin-bottom: 4px !important;
  }

  .hero-panel .stat-card .stat-label {
    font-size: 9px !important;
    line-height: 1.3 !important;
  }

  /* 第一屏（全球节点）移动端优化 */
  .hero-panel.panel-global .hero-panel-content h1,
  .hero-panel.panel-global .hero-panel-content h2 {
    font-size: clamp(22px, 6.5vw, 30px) !important;
  }

  .hero-panel.panel-global .stats-grid {
    grid-template-columns: repeat(4, 1fr) !important;
  }

  .hero-panel.panel-global .stat-card .stat-num {
    font-size: 18px !important;
  }

  /* 第二屏（GPU）移动端优化 */
  .hero-panel.panel-gpu .hero-panel-content {
    grid-template-columns: 1fr;
    gap: 24px;
    text-align: center;
  }

  .hero-panel.panel-gpu .hero-panel-content h1,
  .hero-panel.panel-gpu .hero-panel-content h2 {
    font-size: clamp(22px, 6.5vw, 30px) !important;
    text-align: center !important;
    line-height: 1.15 !important;
  }

  .hero-panel.panel-gpu .hero-panel-content p {
    text-align: center !important;
  }

  .hero-panel.panel-gpu .stats-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 10px !important;
    margin-top: 24px !important;
  }

  .hero-panel.panel-gpu .stat-card {
    padding: 14px 6px !important;
  }

  .hero-panel.panel-gpu .stat-card .stat-num {
    font-size: 18px !important;
  }

  .hero-panel.panel-gpu .stat-card .stat-label {
    font-size: 9px !important;
  }

  /* 第三屏（主推广）移动端优化 */
  .hero-panel.panel-main .hero-panel-content h1,
  .hero-panel.panel-main .hero-panel-content h2 {
    font-size: clamp(22px, 6.5vw, 30px) !important;
  }

  .hero-panel.panel-main .stats-grid {
    grid-template-columns: repeat(4, 1fr) !important;
  }

  /* 导航箭头移动端隐藏 */
  .hero-nav-arrow {
    display: none !important;
  }

  /* 滚动指示器移动端优化 - 修复位置在Banner内 */
  .hero-scroll-indicators {
    position: absolute !important;
    bottom: 20px !important;
    left: 0 !important;
    right: 0 !important;
    margin: 0 auto !important;
    transform: none !important;
    padding: 6px 12px !important;
    gap: 6px !important;
    z-index: 30 !important;
    /* 移动端强制显示 */
    opacity: 1 !important;
    animation: none !important;
    display: flex !important;
    width: fit-content !important;
    justify-content: center !important;
    background: rgba(0,0,0,0.5) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    border-radius: 100px !important;
    border: 1px solid rgba(255,255,255,0.15) !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.4) !important;
    pointer-events: auto !important;
  }

  .hero-scroll-indicator {
    width: 5px !important;
    height: 5px !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  .hero-scroll-indicator.active {
    width: 18px !important;
    border-radius: 2.5px !important;
    opacity: 1 !important;
  }

  /* 滚动提示移动端隐藏 */
  .hero-scroll-hint {
    display: none !important;
  }

  /* 移动端隐藏部分复杂装饰 */
  .hero-circuit,
  .hero-data-connections,
  .hero-rectangles,
  .hero-diamonds,
  .hero-light-trails,
  .hero-digital-rain,
  .hero-code-stream,
  .hero-data-nodes,
  .hero-hologram,
  .hero-energy-waves,
  .hero-rings,
  .hero-triangles,
  .hero-hexagons,
  .hero-energy-pulses,
  .hero-raster,
  .hero-glow-dots,
  .hero-glass-shards,
  .hero-light-particles,
  .hero-reflections,
  .hero-light-sweep,
  .hero-depth-layers {
    display: none !important;
  }

  /* 保留核心背景元素 */
  .hero-orb {
    filter: blur(90px) !important;
  }

  .hero-orb-1 {
    width: 350px;
    height: 350px;
    top: -80px;
    right: -80px;
  }

  .hero-orb-2 {
    width: 300px;
    height: 300px;
    bottom: -60px;
    left: -60px;
  }

  .hero-orb-3 {
    width: 280px;
    height: 280px;
  }

  .hero-grid-overlay {
    background-size: 50px 50px !important;
    opacity: 0.2 !important;
  }

  .hero-dots-overlay {
    background-size: 25px 25px !important;
    opacity: 0.3 !important;
  }

  .hero-lines {
    opacity: 0.3 !important;
  }

  .hero-pulse-lines {
    opacity: 0.25 !important;
  }

  /* 保留少量粒子 */
  .hero-particles span:nth-child(n+5) {
    display: none;
  }

  .hero-stars .star:nth-child(n+4) {
    display: none;
  }

  /* 优化背景光晕 */
  .luminous-sphere {
    filter: blur(50px) !important;
    opacity: 0.25 !important;
  }

  .sphere-1 {
    width: 250px;
    height: 250px;
  }

  .sphere-2 {
    width: 220px;
    height: 220px;
  }

  .sphere-3 {
    width: 200px;
    height: 200px;
  }

  /* 优化渐变网格 */
  .hero-gradient-mesh {
    filter: blur(70px) !important;
    opacity: 0.18 !important;
  }

  .mesh-blob {
    animation-duration: 55s !important;
  }

  .blob-1 {
    width: 280px;
    height: 280px;
  }

  .blob-2 {
    width: 250px;
    height: 250px;
  }

  .blob-3 {
    width: 230px;
    height: 230px;
  }

  .blob-4 {
    width: 210px;
    height: 210px;
  }

  /* 优化柔光 */
  .soft-light {
    filter: blur(35px) !important;
    opacity: 0.12 !important;
  }

  .light-1,
  .light-2,
  .light-3,
  .light-4 {
    width: 180px !important;
    height: 180px !important;
  }
}

/* 超小屏幕优化 (iPhone SE等) */
@media (max-width: 375px) {
  .hero {
    min-height: 500px !important;
    height: 500px !important;
  }

  .hero-panel {
    padding: 0 20px;
  }

  .hero-panel-content h1,
  .hero-panel-content h2 {
    font-size: clamp(20px, 7.5vw, 26px) !important;
    margin-bottom: 14px !important;
    overflow-wrap: break-word;
    word-wrap: break-word;
  }

  .hero-panel-content p {
    font-size: 12px !important;
    margin-bottom: 18px !important;
  }

  .hero-panel-content .btn-group {
    gap: 8px !important;
  }

  .hero-panel-content .btn {
    padding: 11px 10px !important;
    font-size: 12px !important;
  }

  .hero-panel .stats-grid {
    margin-top: 20px !important;
    gap: 8px !important;
  }

  .hero-panel .stat-card {
    padding: 12px 6px !important;
    border-radius: 10px !important;
  }

  .hero-panel .stat-card .stat-num {
    font-size: 17px !important;
    margin-bottom: 3px !important;
  }

  .hero-panel .stat-card .stat-label {
    font-size: 8px !important;
  }

  /* 滚动指示器 - 修复位置在Banner内 */
  .hero-scroll-indicators {
    position: absolute !important;
    bottom: 16px !important;
    left: 0 !important;
    right: 0 !important;
    margin: 0 auto !important;
    transform: none !important;
    padding: 5px 10px !important;
    gap: 5px !important;
    z-index: 30 !important;
    /* 小屏强制显示 */
    opacity: 1 !important;
    animation: none !important;
    display: flex !important;
    width: fit-content !important;
    justify-content: center !important;
    background: rgba(0,0,0,0.5) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    border-radius: 100px !important;
    border: 1px solid rgba(255,255,255,0.15) !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.4) !important;
    pointer-events: auto !important;
  }

  .hero-scroll-indicator {
    width: 4px !important;
    height: 4px !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  .hero-scroll-indicator.active {
    width: 14px !important;
    opacity: 1 !important;
  }
}

/* 横屏模式优化 */
@media (max-width: 768px) and (orientation: landscape) {
  .hero {
    min-height: 100vh !important;
    height: 100vh !important;
    max-height: 450px !important;
  }

  .hero-panel {
    padding-top: 0;
    padding-bottom: 0;
  }

  .hero-panel-content h1,
  .hero-panel-content h2 {
    font-size: clamp(18px, 4.5vw, 24px) !important;
    margin-bottom: 8px !important;
  }

  .hero-panel-content p {
    font-size: 12px !important;
    margin-bottom: 14px !important;
  }

  .hero-panel-content .btn {
    padding: 8px 14px !important;
    font-size: 12px !important;
  }

  .hero-panel .stats-grid {
    margin-top: 14px !important;
    gap: 6px !important;
  }

  .hero-panel .stat-card {
    padding: 8px 6px !important;
  }

  .hero-panel .stat-card .stat-num {
    font-size: 16px !important;
  }

  .hero-panel .stat-card .stat-label {
    font-size: 8px !important;
  }

  .hero-scroll-indicators {
    bottom: 12px;
  }
}

/* === 统计数据卡片（如果需要） === */
.hero-panel .stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 16px;
  max-width: 800px;
  margin: 48px auto 0;
  /* 卡片组延迟动画 */
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.hero-panel.active .stats-grid {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.5s;
}

.hero-panel .stat-card {
  background: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03));
  backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 20px;
  padding: 24px 16px;
  text-align: center;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  /* 3D变换 */
  transform-style: preserve-3d;
  backface-visibility: hidden;
  /* 卡片入场动画 */
  opacity: 0;
  transform: translateY(30px) scale(0.9);
  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 面板激活时，卡片依次入场 */
.hero-panel.active .stat-card {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* 每个卡片错开动画 */
.hero-panel.active .stat-card:nth-child(1) {
  transition-delay: 0.6s;
}

.hero-panel.active .stat-card:nth-child(2) {
  transition-delay: 0.7s;
}

.hero-panel.active .stat-card:nth-child(3) {
  transition-delay: 0.8s;
}

.hero-panel.active .stat-card:nth-child(4) {
  transition-delay: 0.9s;
}

@keyframes slideInScale {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* 卡片发光边框动画 */
.hero-panel .stat-card::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(135deg, rgba(255,255,255,0.2), transparent);
  border-radius: 20px;
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: -1;
}

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

/* 卡片背景光效 */
.hero-panel .stat-card::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.6s ease;
  border-radius: 50%;
  z-index: 0;
}

.hero-panel .stat-card:hover::after {
  transform: translate(-50%, -50%) scale(2);
}

.hero-panel .stat-card:hover {
  transform: translateY(-6px) scale(1.05) rotateX(5deg);
  box-shadow: 0 20px 50px rgba(0,0,0,0.3), 0 0 80px rgba(255,255,255,0.1);
}

.hero-panel .stat-card .stat-num {
  display: block;
  font-size: 32px;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 4px;
  background: linear-gradient(135deg, #ffffff 0%, #0a84ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  position: relative;
  z-index: 1;
  /* 数字跳动动画 */
  animation: numberPop 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
  animation-delay: inherit;
}

@keyframes numberPop {
  0% {
    transform: scale(0.5);
    opacity: 0;
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.hero-panel .stat-card .stat-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255,255,255,0.7);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  position: relative;
  z-index: 1;
}

/* === 滚动提示动画 === */
@keyframes scrollHint {
  0%, 100% {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
  }
  50% {
    transform: translateX(-50%) translateY(8px);
    opacity: 0.5;
  }
}

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

.hero-scroll-hint {
  position: absolute;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255,255,255,0.6);
  font-size: 14px;
  font-weight: 500;
  animation: scrollHint 2s ease-in-out infinite;
  z-index: 15;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: rgba(0,0,0,0.3);
  backdrop-filter: blur(10px);
  border-radius: 100px;
  border: 1px solid rgba(255,255,255,0.1);
  transition: opacity 0.3s ease;
}

.hero-scroll-hint::after {
  content: '→';
  font-size: 18px;
  animation: arrowBounce 1.5s ease-in-out infinite;
  display: inline-block;
}

/* === 背景装饰元素动画优化 === */
.hero-bg {
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

/* 移动端完全禁用背景动画 */
@media (max-width: 768px) {
  .hero-bg,
  .hero-bg *,
  .hero-orb,
  .hero-particles span,
  .star,
  .luminous-sphere,
  .mesh-blob,
  .soft-light,
  .hero-grid-overlay,
  .hero-lines,
  .hero-pulse-lines {
    animation: none !important;
    will-change: auto !important;
  }
}

/* 光球飘动 */
.hero-orb {
  animation-timing-function: ease-in-out !important;
}

.hero-orb-1 {
  animation: orbFloatSlow 40s ease-in-out infinite !important;
}

.hero-orb-2 {
  animation: orbFloatSlow 45s ease-in-out infinite reverse !important;
}

.hero-orb-3 {
  animation: orbFloatSlow 50s ease-in-out infinite !important;
}

@keyframes orbFloatSlow {
  0%, 100% {
    transform: translate(0, 0) scale(1);
    opacity: 0.3;
  }
  25% {
    transform: translate(60px, -60px) scale(1.15);
    opacity: 0.5;
  }
  50% {
    transform: translate(80px, 0) scale(1.1);
    opacity: 0.4;
  }
  75% {
    transform: translate(-50px, 50px) scale(0.9);
    opacity: 0.45;
  }
}

/* 粒子增强动画 */
.hero-particles span {
  animation: particleFloatEnhanced 20s ease-in-out infinite !important;
  will-change: transform, opacity;
}

@keyframes particleFloatEnhanced {
  0%, 100% {
    transform: translate(0, 0) scale(1);
    opacity: 0.4;
  }
  25% {
    transform: translate(80px, -80px) scale(1.8);
    opacity: 1;
  }
  50% {
    transform: translate(120px, 0px) scale(1.2);
    opacity: 0.7;
  }
  75% {
    transform: translate(40px, 60px) scale(1.5);
    opacity: 0.9;
  }
}

/* 星星闪烁 */
.star {
  animation: starTwinkleEnhanced 4s ease-in-out infinite !important;
  will-change: opacity, transform;
}

@keyframes starTwinkleEnhanced {
  0%, 100% {
    opacity: 0.3;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.8);
  }
}

/* 光晕球体 */
.luminous-sphere {
  animation: luminousFloatEnhanced 35s ease-in-out infinite !important;
  will-change: transform, opacity;
}

@keyframes luminousFloatEnhanced {
  0%, 100% {
    transform: translate(0, 0) scale(1);
    opacity: 0.3;
  }
  33% {
    transform: translate(40px, -40px) scale(1.15);
    opacity: 0.5;
  }
  66% {
    transform: translate(-35px, 35px) scale(0.95);
    opacity: 0.4;
  }
}

/* 渐变网格流动 */
.mesh-blob {
  animation: blobMoveEnhanced 40s ease-in-out infinite !important;
  will-change: transform;
}

@keyframes blobMoveEnhanced {
  0%, 100% {
    transform: translate(0, 0) scale(1) rotate(0deg);
  }
  33% {
    transform: translate(60px, -60px) scale(1.15) rotate(120deg);
  }
  66% {
    transform: translate(-50px, 50px) scale(0.9) rotate(240deg);
  }
}

/* 柔光脉冲 */
.soft-light {
  animation: softLightPulseEnhanced 15s ease-in-out infinite !important;
  will-change: opacity, transform;
}

@keyframes softLightPulseEnhanced {
  0%, 100% {
    opacity: 0.15;
    transform: scale(1);
  }
  50% {
    opacity: 0.3;
    transform: scale(1.2);
  }
}

/* 网格覆盖层呼吸 */
.hero-grid-overlay {
  animation: gridBreath 8s ease-in-out infinite !important;
}

@keyframes gridBreath {
  0%, 100% {
    opacity: 0.3;
  }
  50% {
    opacity: 0.5;
  }
}

/* 对角线移动 */
.hero-lines {
  animation: linesMove 30s linear infinite !important;
}

/* 脉冲线扫描 */
.hero-pulse-lines {
  animation: pulseHorizontal 10s ease-in-out infinite !important;
}

@keyframes pulseHorizontal {
  0%, 100% {
    background-position: 0% 0%;
    opacity: 0;
  }
  10% {
    opacity: 0.4;
  }
  50% {
    background-position: 100% 0%;
    opacity: 0.4;
  }
  90% {
    opacity: 0.4;
  }
  100% {
    opacity: 0;
  }
}

@media (max-width: 768px) {
  .hero-scroll-hint {
    bottom: 80px;
    font-size: 12px;
  }
}


/* ===== source: hero-ios-scroll-fix.css ===== */
/* ========================================
   Hero Banner iOS滚动抖动修复
   平衡版 - 保留安全的动画，禁用导致闪烁的部分
   ======================================== */

/* iOS滚动优化 - 仅在移动设备上应用 */
@media (max-width: 768px) {

  /* 1. 基础优化 - GPU加速 */
  .hero {
    -webkit-transform: translateZ(0) !important;
    transform: translateZ(0) !important;
    -webkit-backface-visibility: hidden !important;
    backface-visibility: hidden !important;
  }

  .hero-scroll-container {
    -webkit-transform: translateZ(0) !important;
    transform: translateZ(0) !important;
    -webkit-backface-visibility: hidden !important;
    backface-visibility: hidden !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .hero-panel {
    -webkit-backface-visibility: hidden !important;
    backface-visibility: hidden !important;
  }

  /* 2. 减慢背景动画速度，而不是完全禁用 */
  .hero-orb,
  .luminous-sphere,
  .mesh-blob,
  .soft-light {
    animation-duration: 60s !important;
    -webkit-animation-duration: 60s !important;
  }

  /* 3. 尝试恢复粒子动画，但减慢速度 */
  .hero-particles span {
    animation-duration: 30s !important;
    -webkit-animation-duration: 30s !important;
    opacity: 0.3 !important;
  }

  .star {
    animation-duration: 6s !important;
    -webkit-animation-duration: 6s !important;
    opacity: 0.4 !important;
  }

  .hero-grid-overlay,
  .hero-pulse-lines {
    animation: none !important;
    -webkit-animation: none !important;
  }

  /* 4. 简化背景层 */
  .hero-bg {
    opacity: 0.7 !important;
  }

  /* 5. 减少blur强度 */
  .hero-orb-1,
  .hero-orb-2,
  .hero-orb-3 {
    filter: blur(60px) !important;
  }

  /* 6. 禁用backdrop-filter（性能杀手） */
  .hero-panel-content .btn-secondary,
  .hero-panel .stat-card {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* 7. 禁用渐变文字的滚动动画 */
  .hero-panel-content h1 em,
  /* 7. 禁用渐变文字的滚动动画 */
  .hero-panel-content h2 em {
    animation: none !important;
    -webkit-animation: none !important;
  }

  /* 8. 禁用指示器脉冲动画 */
  .hero-scroll-indicator.active {
    animation: none !important;
    -webkit-animation: none !important;
  }

  /* 9. 禁用数字弹跳动画 */
  .hero-panel .stat-card .stat-num {
    animation: none !important;
    -webkit-animation: none !important;
  }

  /* 10. 禁用按钮和卡片的伪元素悬停效果 */
  .hero-panel-content .btn::before,
  .hero-panel .stat-card::before,
  .hero-panel .stat-card::after {
    display: none !important;
  }

  /* 11. 简化阴影 */
  .hero-panel-content .btn,
  .hero-panel .stat-card {
    box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
  }

  /* 12. 在移动端完全禁用内容区域的过渡动画 */
  .hero-panel-content,
  .hero-panel-content h1,
  .hero-panel-content h2,
  .hero-panel-content p,
  .hero-panel-content .btn-group,
  .hero-panel .stats-grid,
  .hero-panel .stat-card {
    transition: none !important;
  }
}

/* iOS特定修复 - 只在真正的iOS设备上应用更严格的规则 */
@supports (-webkit-touch-callout: none) {
  @media (max-width: 768px) {

    /* 禁用触摸高亮 */
    .hero,
    .hero * {
      -webkit-tap-highlight-color: transparent !important;
    }

    /* 完全禁用所有过渡和动画 */
    .hero-panel-content,
    .hero-panel-content *,
    .hero-panel-content h1,
    .hero-panel-content h2,
    .hero-panel-content p,
    .hero-panel-content .btn,
    .hero-panel-content .btn-group,
    .hero-panel .stats-grid,
    .hero-panel .stat-card,
    .hero-panel .stat-card * {
      transition: none !important;
      -webkit-transition: none !important;
      animation: none !important;
      -webkit-animation: none !important;
    }

    /* 强制所有面板和内容始终完全可见 */
    .hero-panel,
    .hero-panel-content,
    .hero-panel-content *,
    .hero-panel-content h1,
    .hero-panel-content h2,
    .hero-panel-content p,
    .hero-panel-content .btn,
    .hero-panel .stat-card,
    .hero-panel .stat-card * {
      opacity: 1 !important;
      visibility: visible !important;
    }

    /* 在iOS上滚动时暂停所有动画 */
    body.scrolling .hero-orb,
    body.scrolling .luminous-sphere,
    body.scrolling .mesh-blob,
    body.scrolling .soft-light {
      animation-play-state: paused !important;
    }
  }
}

/* 超小屏幕优化 */
@media (max-width: 375px) {
  .hero {
    height: 500px !important;
    min-height: 500px !important;
  }

  .hero-scroll-indicators {
    bottom: 16px !important;
  }
}

/* 横屏模式优化 */
@media (max-width: 768px) and (orientation: landscape) {
  .hero {
    height: 450px !important;
    min-height: 450px !important;
    max-height: 450px !important;
  }

  .hero-scroll-indicators {
    bottom: 12px !important;
  }
}

/* Banner trust-first redesign */
.hero {
  background: #07111f !important;
}
.hero-bg {
  opacity: 0 !important;
}
.hero-bg > * {
  display: none !important;
}
.hero-panel.panel-global {
  --hero-accent: #67e8f9;
  --hero-soft: rgba(103, 232, 249, .1);
  --hero-border: rgba(103, 232, 249, .28);
  background: #0b2632 !important;
}
.hero-panel.panel-gpu {
  --hero-accent: #fdba74;
  --hero-soft: rgba(253, 186, 116, .1);
  --hero-border: rgba(253, 186, 116, .28);
  background: #2a1b1d !important;
}
.hero-panel.panel-main {
  --hero-accent: #93c5fd;
  --hero-soft: rgba(147, 197, 253, .1);
  --hero-border: rgba(147, 197, 253, .28);
  background: #101d34 !important;
}
.hero-panel .hero-panel-content {
  display: grid !important;
  grid-template-columns: minmax(0, 1.08fr) minmax(300px, .72fr) !important;
  align-items: center !important;
  gap: 58px !important;
  max-width: 1140px !important;
  text-align: left !important;
}
.hero-panel .hero-panel-copy {
  min-width: 0;
  text-align: left;
}
.hero-panel .hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 17px;
  color: var(--hero-accent);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  line-height: 1.4;
}
.hero-kicker-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--hero-accent);
  box-shadow: 0 0 0 4px var(--hero-soft);
}
.hero-panel .hero-panel-content h1,
.hero-panel .hero-panel-content h2 {
  margin-bottom: 20px !important;
  color: #f8fafc !important;
  font-size: clamp(38px, 4.8vw, 62px) !important;
  font-weight: 750;
  letter-spacing: 0 !important;
  line-height: 1.12 !important;
  text-align: left !important;
  text-shadow: none !important;
  filter: none !important;
  background: none !important;
  -webkit-text-fill-color: #f8fafc !important;
}
.hero-panel .hero-panel-content h1 em,
.hero-panel .hero-panel-content h2 em {
  color: var(--hero-accent) !important;
  background: none !important;
  -webkit-text-fill-color: var(--hero-accent) !important;
  animation: none !important;
  filter: none !important;
}
.hero-panel .hero-panel-content p {
  max-width: 680px !important;
  margin: 0 0 26px !important;
  color: #c4d0df !important;
  font-size: 16px !important;
  line-height: 1.8 !important;
  text-align: left !important;
  text-shadow: none !important;
}
.hero-panel .hero-panel-copy .btn-group {
  justify-content: flex-start !important;
  gap: 11px !important;
  margin-bottom: 0 !important;
}
.hero-panel .hero-panel-content .btn {
  min-height: 44px;
  padding: 11px 20px !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}
.hero-panel .hero-panel-content .btn-primary {
  background: var(--hero-accent) !important;
  color: #08111f !important;
  box-shadow: 0 8px 18px rgba(0, 0, 0, .2) !important;
}
.hero-panel .hero-panel-content .btn-primary:hover {
  background: #f8fafc !important;
  color: #0f2740 !important;
  transform: translateY(-2px) !important;
}
.hero-panel .hero-panel-content .btn-secondary {
  border-color: var(--hero-border) !important;
  background: rgba(255, 255, 255, .05) !important;
  color: #e2e8f0 !important;
  box-shadow: none !important;
}
.hero-panel .hero-panel-content .btn-secondary:hover {
  border-color: var(--hero-accent) !important;
  background: var(--hero-soft) !important;
  color: #fff !important;
}
.hero-panel .hero-stats-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 9px !important;
  width: 100% !important;
  max-width: 700px !important;
  margin: 24px 0 0 !important;
}
.hero-panel .hero-stats-grid .stat-card {
  min-width: 0;
  min-height: 72px;
  padding: 13px 10px !important;
  border: 1px solid var(--hero-border) !important;
  border-radius: 9px !important;
  background: var(--hero-soft) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  text-align: left;
}
.hero-panel .hero-stats-grid .stat-card:hover {
  border-color: var(--hero-accent) !important;
  background: rgba(255, 255, 255, .1) !important;
  box-shadow: none !important;
  transform: translateY(-2px) !important;
}
.hero-panel .hero-stats-grid .stat-num {
  display: block;
  margin-bottom: 5px;
  color: var(--hero-accent) !important;
  font-size: 21px !important;
  font-weight: 800;
  line-height: 1.15;
  background: none !important;
  -webkit-text-fill-color: var(--hero-accent) !important;
  filter: none !important;
}
.hero-panel .hero-stats-grid .stat-label {
  display: block;
  overflow-wrap: anywhere;
  color: #b6c4d4 !important;
  font-size: 10px !important;
  line-height: 1.35 !important;
}
.hero-proof-card {
  width: 100%;
  max-width: 390px;
  justify-self: end;
  padding: 21px 22px;
  border: 1px solid var(--hero-border);
  border-radius: 14px;
  background: rgba(3, 12, 24, .42);
  box-shadow: 0 18px 34px rgba(0, 0, 0, .2);
}
.hero-proof-top {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 13px;
  padding-bottom: 13px;
  border-bottom: 1px solid rgba(226, 232, 240, .12);
}
.hero-proof-top span {
  color: #94a3b8;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .1em;
}
.hero-proof-top strong {
  color: #f8fafc;
  font-size: 15px;
  line-height: 1.4;
}
.hero-proof-line {
  display: grid;
  grid-template-columns: minmax(86px, 1fr) minmax(90px, 1.1fr);
  gap: 10px;
  align-items: baseline;
  padding: 11px 0;
  border-bottom: 1px solid rgba(226, 232, 240, .1);
}
.hero-proof-line span {
  color: #dbe5f0;
  font-size: 12px;
  font-weight: 700;
}
.hero-proof-line strong {
  color: var(--hero-accent);
  font-size: 12px;
  font-weight: 800;
  text-align: right;
}
.hero-proof-line small {
  grid-column: 1 / -1;
  margin-top: -4px;
  color: #8fa2b8;
  font-size: 11px;
  line-height: 1.45;
}
.hero-proof-note {
  margin-top: 14px;
  color: #9fb0c2;
  font-size: 11px;
  line-height: 1.6;
}
.hero-scroll-indicators {
  gap: 9px;
}
.hero-scroll-indicator {
  border: 0;
  padding: 0;
  background: rgba(226, 232, 240, .35);
  cursor: pointer;
}
.hero-scroll-indicator:focus-visible,
.hero-nav-arrow:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 4px;
}
.hero-nav-arrow {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid rgba(226, 232, 240, .22);
  border-radius: 8px;
  background: rgba(3, 12, 24, .48);
  color: #e2e8f0;
  font: inherit;
  line-height: 1;
}
.hero-nav-arrow:hover {
  border-color: rgba(226, 232, 240, .52);
  background: rgba(3, 12, 24, .72);
}

@media (max-width: 768px) {
  .hero {
    height: 620px !important;
    min-height: 620px !important;
  }
  .hero-panel {
    padding: 0 20px !important;
  }
  .hero-panel .hero-panel-content {
    display: block !important;
    max-width: 100% !important;
    text-align: center !important;
  }
  .hero-panel .hero-panel-copy {
    text-align: center !important;
  }
  .hero-panel .hero-kicker {
    margin-bottom: 12px;
    font-size: 10px;
  }
  .hero-panel .hero-panel-content h1,
  .hero-panel .hero-panel-content h2 {
    margin-bottom: 14px !important;
    font-size: clamp(28px, 8vw, 38px) !important;
    line-height: 1.18 !important;
    text-align: center !important;
  }
  .hero-panel .hero-panel-content p {
    max-width: 540px !important;
    margin: 0 auto 18px !important;
    font-size: 13px !important;
    line-height: 1.65 !important;
    text-align: center !important;
  }
  .hero-panel .hero-panel-copy .btn-group {
    justify-content: center !important;
  }
  .hero-panel .hero-panel-content .btn {
    min-height: 42px;
    padding: 10px 13px !important;
    font-size: 13px !important;
  }
  .hero-panel .hero-stats-grid {
    gap: 7px !important;
    max-width: 100% !important;
    margin-top: 18px !important;
  }
  .hero-panel .hero-stats-grid .stat-card {
    min-height: 62px;
    padding: 10px 7px !important;
    border-radius: 8px !important;
    text-align: center;
  }
  .hero-panel .hero-stats-grid .stat-num {
    margin-bottom: 3px;
    font-size: 16px !important;
  }
  .hero-panel .hero-stats-grid .stat-label {
    font-size: 9px !important;
  }
  .hero-proof-card {
    justify-self: center;
    max-width: 540px;
    margin: 18px auto 0;
    padding: 14px 15px;
    border-radius: 11px;
  }
  .hero-proof-top {
    margin-bottom: 7px;
    padding-bottom: 8px;
  }
  .hero-proof-top strong {
    font-size: 13px;
  }
  .hero-proof-line {
    grid-template-columns: minmax(78px, 1fr) minmax(90px, 1fr);
    padding: 8px 0;
  }
  .hero-proof-note {
    margin-top: 9px;
    font-size: 10px;
  }
}
@media (max-width: 375px) {
  .hero {
    height: 560px !important;
    min-height: 560px !important;
  }
  .hero-proof-card {
    display: none !important;
  }
  .hero-panel .hero-panel-content p {
    font-size: 12px !important;
  }
  .hero-panel .hero-stats-grid .stat-card {
    min-height: 58px;
  }
}
/* Banner image background and mobile fit */
.hero-panel {
  overflow: hidden;
}
.hero-panel::before,
.hero-panel::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.hero-panel::before {
  z-index: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  filter: saturate(.82) contrast(1.08);
  opacity: .62;
}
.hero-panel::after {
  z-index: 1;
  background: rgba(5, 15, 28, .74);
}
.hero-panel.panel-global::before {
  background-image: url("../images/hero/hero-regions-bg.svg");
  background-position: 68% center;
}
.hero-panel.panel-gpu::before {
  background-image: url("../images/hero/hero-gpu-bg.svg");
  background-position: center;
}
.hero-panel.panel-main::before {
  background-image: url("../images/hero/hero-cloud-bg.svg");
  background-position: center;
}
.hero-panel .hero-panel-content {
  z-index: 5;
}
.hero-panel .hero-proof-card,
.hero-panel .hero-stats-grid .stat-card {
  position: relative;
  z-index: 6;
}
.hero-panel.panel-global::after {
  background: rgba(5, 25, 35, .76);
}
.hero-panel.panel-gpu::after {
  background: rgba(35, 15, 18, .78);
}
.hero-panel.panel-main::after {
  background: rgba(8, 19, 38, .78);
}
@media (max-width: 768px) {
  .hero {
    height: 560px !important;
    min-height: 560px !important;
  }
  .hero-panel::before {
    opacity: .5;
    background-position: center;
  }
  .hero-panel.panel-global::before {
    background-position: 58% center;
  }
  .hero-panel::after {
    background: rgba(5, 15, 28, .84);
  }
  .hero-panel.panel-gpu::after {
    background: rgba(35, 15, 18, .86);
  }
  .hero-panel.panel-main::after {
    background: rgba(8, 19, 38, .86);
  }
  .hero-proof-card {
    display: none !important;
  }
  .hero-panel .hero-panel-content .btn {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }
  .hero-panel .hero-panel-content p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    max-height: none;
    overflow: hidden;
  }
}
@media (max-width: 375px) {
  .hero {
    height: 520px !important;
    min-height: 520px !important;
  }
  .hero-panel {
    padding: 0 16px !important;
  }
  .hero-panel .hero-panel-content h1,
  .hero-panel .hero-panel-content h2 {
    font-size: clamp(25px, 8vw, 32px) !important;
  }
  .hero-panel .hero-panel-content p {
    -webkit-line-clamp: 4;
    max-height: none;
    margin-bottom: 15px !important;
  }
  .hero-panel .hero-stats-grid {
    margin-top: 15px !important;
  }
  .hero-panel .hero-stats-grid .stat-card {
    min-height: 55px;
    padding: 8px 5px !important;
  }
  .hero-panel .hero-stats-grid .stat-num {
    font-size: 15px !important;
  }
  .hero-panel .hero-stats-grid .stat-label {
    font-size: 8px !important;
  }
}

/* ===== source: language-selector.css ===== */
/**
 * 语言选择弹窗样式
 * 美式设计风格 - 底部横幅
 * 针对非中国大陆用户的语言选择
 */

/* 遮罩层 */
.cookie-consent-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.15);
  z-index: 9998;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  backdrop-filter: blur(0.5px);
}

.cookie-consent-overlay.show {
  opacity: 1;
}

/* 弹窗容器 - 底部横幅 */
.cookie-consent-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #ffffff;
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.12);
  z-index: 9999;
  transform: translateY(100%);
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  border-top: 3px solid #2563eb;
}

.cookie-consent-banner.show {
  transform: translateY(0);
}

/* 内容容器 */
.cookie-consent-content {
  max-width: 1400px;
  margin: 0 auto;
  padding: 24px 32px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 24px;
  align-items: center;
}

/* 图标区域 - 美式简洁风格 */
.cookie-consent-header {
  display: flex;
  align-items: center;
  gap: 16px;
}

.cookie-consent-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  background: #f0f4ff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #2563eb;
}

.cookie-consent-icon svg {
  width: 28px;
  height: 28px;
}

.cookie-consent-title {
  font-size: 20px;
  font-weight: 700;
  color: #111827;
  line-height: 1.2;
  margin: 0;
  letter-spacing: -0.02em;
}

/* 文本区域 */
.cookie-consent-text {
  flex: 1;
  min-width: 0;
}

.cookie-consent-text p {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: #4b5563;
  font-weight: 400;
}

.cookie-consent-link {
  font-size: 15px;
  color: #2563eb;
  text-decoration: none;
  font-weight: 600;
  margin-left: 8px;
  white-space: nowrap;
  transition: color 0.15s ease;
  border-bottom: 2px solid transparent;
}

.cookie-consent-link:hover {
  color: #1d4ed8;
  border-bottom-color: #1d4ed8;
}

/* 按钮区域 - 美式风格 */
.cookie-consent-actions {
  display: flex;
  gap: 12px;
  flex-shrink: 0;
}

.cookie-consent-btn {
  padding: 14px 32px;
  border: none;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

.cookie-consent-btn-primary {
  background: #2563eb;
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
  min-width: 160px;
}

.cookie-consent-btn-primary:hover {
  background: #1d4ed8;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.4);
  transform: translateY(-2px);
}

.cookie-consent-btn-primary:active {
  transform: translateY(0);
  box-shadow: 0 1px 4px rgba(37, 99, 235, 0.3);
}

.cookie-consent-btn-secondary {
  background: transparent;
  color: #6b7280;
  border: 2px solid #d1d5db;
  padding: 12px 28px;
  font-weight: 600;
}

.cookie-consent-btn-secondary:hover {
  background: #f9fafb;
  border-color: #9ca3af;
  color: #374151;
}

.cookie-consent-btn-secondary:active {
  background: #f3f4f6;
}

/* 平板适配 */
@media (max-width: 1024px) {
  .cookie-consent-content {
    padding: 20px 24px;
    gap: 20px;
  }

  .cookie-consent-icon {
    width: 44px;
    height: 44px;
  }

  .cookie-consent-icon svg {
    width: 26px;
    height: 26px;
  }

  .cookie-consent-title {
    font-size: 18px;
  }

  .cookie-consent-text p {
    font-size: 14px;
  }

  .cookie-consent-link {
    font-size: 14px;
  }

  .cookie-consent-btn {
    padding: 12px 28px;
    font-size: 14px;
  }

  .cookie-consent-btn-primary {
    min-width: 140px;
  }
}

/* 移动端适配 */
@media (max-width: 768px) {
  .cookie-consent-content {
    grid-template-columns: 1fr;
    padding: 20px;
    gap: 18px;
  }

  .cookie-consent-header {
    gap: 14px;
  }

  .cookie-consent-icon {
    width: 40px;
    height: 40px;
  }

  .cookie-consent-icon svg {
    width: 24px;
    height: 24px;
  }

  .cookie-consent-title {
    font-size: 17px;
  }

  .cookie-consent-text p {
    font-size: 14px;
  }

  .cookie-consent-link {
    font-size: 14px;
    display: block;
    margin-left: 0;
    margin-top: 8px;
  }

  .cookie-consent-actions {
    justify-content: stretch;
    gap: 10px;
  }

  .cookie-consent-btn {
    flex: 1;
    padding: 14px 24px;
    font-size: 14px;
  }

  .cookie-consent-btn-primary {
    min-width: auto;
  }

  .cookie-consent-btn-secondary {
    padding: 12px 24px;
  }
}

/* 小屏幕优化 */
@media (max-width: 480px) {
  .cookie-consent-banner {
    border-top-width: 2px;
  }

  .cookie-consent-content {
    padding: 18px 16px;
    gap: 16px;
  }

  .cookie-consent-header {
    gap: 12px;
  }

  .cookie-consent-icon {
    width: 36px;
    height: 36px;
  }

  .cookie-consent-icon svg {
    width: 22px;
    height: 22px;
  }

  .cookie-consent-title {
    font-size: 16px;
  }

  .cookie-consent-text p {
    font-size: 13px;
  }

  .cookie-consent-link {
    font-size: 13px;
  }

  .cookie-consent-actions {
    flex-direction: column;
    gap: 10px;
  }

  .cookie-consent-btn {
    width: 100%;
    padding: 14px 20px;
    font-size: 13px;
  }

  .cookie-consent-btn-secondary {
    padding: 12px 20px;
  }
}

/* 深色模式支持 */
@media (prefers-color-scheme: dark) {
  .cookie-consent-overlay {
    background: rgba(0, 0, 0, 0.25);
  }

  .cookie-consent-banner {
    background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
    border-color: rgba(255, 255, 255, 0.1);
  }

  .cookie-consent-title {
    color: #f9fafb;
  }

  .cookie-consent-text p {
    color: #d1d5db;
  }

  .cookie-consent-link {
    color: #60a5fa;
  }

  .cookie-consent-link:hover {
    color: #93c5fd;
  }

  .cookie-consent-btn-primary {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.4);
  }

  .cookie-consent-btn-primary:hover {
    background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%);
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.5);
  }

  .cookie-consent-btn-secondary {
    background: #374151;
    color: #d1d5db;
    border-color: #4b5563;
  }

  .cookie-consent-btn-secondary:hover {
    background: #4b5563;
    border-color: #6b7280;
  }

  .cookie-consent-btn-secondary:active {
    background: #6b7280;
  }
}

/* 无障碍优化 */
@media (prefers-reduced-motion: reduce) {
  .cookie-consent-overlay,
  .cookie-consent-banner {
    transition: none;
  }

  .cookie-consent-btn:hover {
    transform: none;
  }
}

/* 确保在所有页面上都显示在最顶层 */
.cookie-consent-banner {
  isolation: isolate;
}


/* ===== source: index.html inline style ===== */

    .region-price {
      display: flex;
      align-items: baseline;
      gap: 4px;
      margin: 2px 0 12px;
      color: #0071e3;
    }

    .region-price-label {
      color: #6e6e73;
      font-size: 12px;
      font-weight: 500;
    }

    .region-price strong {
      font-size: 26px;
      font-weight: 700;
      letter-spacing: -0.02em;
      line-height: 1;
    }

    .region-price-unit {
      color: #6e6e73;
      font-size: 12px;
      font-weight: 500;
    }
  

/* ===== source: index.html inline style ===== */

  .sec-products-coverage {
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 52%, #f8fafc 100%);
    padding: 80px 0;
    position: relative;
    overflow: hidden;
  }
  .sec-products-coverage::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(37, 99, 235, .18), transparent);
  }
  .sec-products-coverage .section-title { margin-bottom: 40px; }
  .sec-products-coverage .section-title h2 { margin-bottom: 12px; }
  .sec-products-coverage .section-title p { max-width: 760px; }
  .coverage-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 8px 8px 0;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-bottom: 0;
    border-radius: 12px 12px 0 0;
  }
  .coverage-tab {
    flex: 1 1 180px;
    min-height: 52px;
    padding: 12px 20px;
    border: 0;
    border-bottom: 3px solid transparent;
    border-radius: 10px 10px 0 0;
    background: transparent;
    color: #64748b;
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: color .2s ease, background .2s ease, border-color .2s ease;
  }
  .coverage-tab:hover { color: #2563eb; background: rgba(255, 255, 255, .7); }
  .coverage-tab.active { color: #2563eb; background: #fff; border-bottom-color: #2563eb; }
  .coverage-panel {
    display: none;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-top: 0;
    border-radius: 0 0 12px 12px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, .06);
    overflow: hidden;
  }
  .coverage-panel.active { display: block; animation: coverage-fade-in .35s ease; }
  @keyframes coverage-fade-in {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .coverage-panel-inner { padding: 32px; }
  .coverage-plan-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-bottom: 28px; }
  .coverage-plan-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 390px;
    padding: 24px;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    background: #f8fafc;
  }
  .coverage-plan-card.blue { border-color: #bfdbfe; background: rgba(239, 246, 255, .55); }
  .coverage-plan-card.hot { border-color: #fcd34d; background: rgba(255, 251, 235, .62); }
  .coverage-plan-card h3 { margin: 0 0 8px; color: #0f172a; font-size: 16px; font-weight: 700; }
  .coverage-plan-price { margin-bottom: 2px; color: #0f172a; font-family: 'SF Mono', 'Menlo', 'Consolas', monospace; font-size: 32px; font-weight: 800; line-height: 1.15; }
  .coverage-plan-price span { color: #64748b; font-family: inherit; font-size: 14px; font-weight: 400; }
  .coverage-plan-location { margin: 0 0 16px; color: #94a3b8; font-size: 12px; }
  .coverage-plan-card ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; color: #334155; font-size: 13px; }
  .coverage-plan-card li { display: flex; align-items: flex-start; gap: 8px; line-height: 1.45; }
  .coverage-plan-card li::before { content: '✓'; flex: 0 0 auto; color: #10b981; font-weight: 800; }
  .coverage-plan-use { margin: auto 0 16px; padding-top: 18px; color: #64748b; font-size: 12px; line-height: 1.55; }
  .coverage-recommend-tag { position: absolute; top: 0; right: 0; padding: 5px 12px; border-radius: 0 10px 0 10px; background: #2563eb; color: #fff; font-size: 11px; font-weight: 700; }
  .coverage-recommend-tag.hot { background: linear-gradient(135deg, #ef4444, #dc2626); }
  .coverage-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding: 10px 18px;
    border: 1px solid transparent;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
  }
  .coverage-btn:hover { transform: translateY(-1px); }
  .coverage-btn-primary { background: #2563eb; color: #fff; box-shadow: 0 4px 12px rgba(37, 99, 235, .2); }
  .coverage-btn-primary:hover { background: #1d4ed8; box-shadow: 0 6px 16px rgba(37, 99, 235, .28); }
  .coverage-btn-outline { border-color: #cbd5e1; background: #fff; color: #1e293b; }
  .coverage-btn-outline:hover { border-color: #2563eb; background: #eff6ff; color: #1d4ed8; }
  .coverage-btn-wide { width: 100%; }
  .coverage-reference { padding: 20px; border-radius: 10px; background: #f8fafc; }
  .coverage-reference h4 { margin: 0 0 14px; color: #1e293b; font-size: 15px; }
  .coverage-table-wrap { overflow-x: auto; }
  .coverage-table { width: 100%; min-width: 760px; border-collapse: separate; border-spacing: 0; color: #334155; font-size: 12px; }
  .coverage-table th { padding: 12px 14px; border-bottom: 2px solid #2563eb; background: linear-gradient(135deg, #eff6ff, #dbeafe); color: #1d4ed8; font-weight: 700; text-align: left; white-space: nowrap; }
  .coverage-table td { padding: 12px 14px; border-bottom: 1px solid #e2e8f0; background: #fff; white-space: nowrap; }
  .coverage-table tbody tr:last-child td { border-bottom: 0; }
  .coverage-table .coverage-price { color: #2563eb; font-family: 'SF Mono', 'Menlo', 'Consolas', monospace; font-weight: 700; }
  .coverage-badge { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; white-space: nowrap; }
  .coverage-badge.blue { background: #dbeafe; color: #1d4ed8; }
  .coverage-badge.red { background: #fee2e2; color: #991b1b; }
  .coverage-badge.amber { background: #fef3c7; color: #92400e; }
  .coverage-badge.green { background: #d1fae5; color: #065f46; }
  .coverage-note { margin: 12px 0 0; color: #94a3b8; font-size: 11px; line-height: 1.6; }
  .coverage-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); min-height: 430px; }
  .coverage-copy { padding: 40px; }
  .coverage-copy > .coverage-badge { margin-bottom: 16px; }
  .coverage-copy h3 { margin: 0 0 16px; color: #0f172a; font-size: 24px; line-height: 1.25; }
  .coverage-copy > p { margin: 0 0 24px; color: #475569; font-size: 16px; line-height: 1.625; }
  .coverage-feature-list { display: grid; gap: 16px; }
  .coverage-feature { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 12px; align-items: start; }
  .coverage-feature-icon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; font-size: 14px; font-weight: 800; }
  .coverage-feature-icon.purple { background: #ede9fe; color: #7c3aed; }
  .coverage-feature-icon.blue { background: #dbeafe; color: #2563eb; }
  .coverage-feature-icon.green { background: #d1fae5; color: #059669; }
  .coverage-feature-title { margin: 0 0 3px; color: #1e293b; font-size: 16px; font-weight: 700; }
  .coverage-feature-text { margin: 0; color: #64748b; font-size: 14px; line-height: 1.55; }
  .coverage-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
  .coverage-visual { position: relative; min-height: 430px; overflow: hidden; background: linear-gradient(135deg, #0f172a, #312e81); }
  .coverage-visual::after { display: none; }
  .coverage-visual img { position: absolute; inset: 32px; z-index: 0; display: block; width: calc(100% - 64px); height: calc(100% - 64px); min-height: 0; border-radius: 12px; object-fit: cover; opacity: .7; }
  .coverage-visual-caption { position: absolute; right: 32px; bottom: 32px; left: 32px; z-index: 1; padding: 20px; border: 1px solid rgba(255, 255, 255, .2); border-radius: 12px; background: rgba(255, 255, 255, .1); color: #fff; box-shadow: 0 8px 24px rgba(0, 0, 0, .18); backdrop-filter: blur(12px); }
  .coverage-visual-caption small { display: block; margin-bottom: 4px; color: rgba(255, 255, 255, .8); font-size: 11px; }
  .coverage-visual-caption strong { display: block; font-family: 'SF Mono', 'Menlo', 'Consolas', monospace; font-size: 24px; line-height: 1.15; }
  .coverage-visual-caption span { display: block; margin-top: 5px; color: rgba(255, 255, 255, .7); font-size: 11px; }
  .coverage-domain-visual { background: linear-gradient(135deg, #0f172a, #0f766e); }
  .coverage-domain-visual img { object-fit: cover; padding: 0; opacity: .7; }
  .coverage-physical-top { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(280px, .9fr); gap: 32px; align-items: center; margin-bottom: 28px; }
  .coverage-check-list { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; color: #334155; font-size: 13px; }
  .coverage-check-list li { display: flex; align-items: flex-start; gap: 8px; line-height: 1.5; }
  .coverage-check-list li::before { content: '✓'; color: #10b981; font-weight: 800; }
  .coverage-physical-image { height: 260px; overflow: hidden; border-radius: 10px; box-shadow: 0 10px 25px rgba(15, 23, 42, .12); }
  .coverage-physical-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .coverage-baremetal-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }

  .coverage-baremetal-card { padding: 20px; border: 1px solid #e2e8f0; border-radius: 10px; background: #fff; }
  .coverage-baremetal-icon { margin-bottom: 10px; font-size: 26px; }
  .coverage-baremetal-card h4 { margin: 0 0 6px; color: #1e293b; font-size: 14px; }
  .coverage-baremetal-card p { margin: 0; color: #64748b; font-size: 12px; line-height: 1.6; }
  .coverage-contact { margin-top: 24px; padding: 18px 20px; border: 1px solid #fcd34d; border-radius: 10px; background: #fffbeb; }
  .coverage-contact h4 { margin: 0 0 5px; color: #92400e; font-size: 14px; }
  .coverage-contact p { margin: 0; color: #a16207; font-size: 12px; line-height: 1.65; }
  @media (max-width: 900px) {
    .coverage-plan-grid { grid-template-columns: 1fr; }
    .coverage-plan-card { min-height: 0; }
    .coverage-split, .coverage-physical-top { grid-template-columns: 1fr; }
    .coverage-visual { height: 300px; min-height: 300px; }
    .coverage-visual img { inset: 20px; width: calc(100% - 40px); height: calc(100% - 40px); min-height: 0; }
  }
  @media (max-width: 600px) {
    .sec-products-coverage { padding: 52px 0; }
    .coverage-tabs { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 0; scrollbar-width: none; }
    .coverage-tabs::-webkit-scrollbar { display: none; }
    .coverage-tab { flex: 0 0 auto; min-width: 150px; padding: 11px 14px; font-size: 13px; white-space: nowrap; }
    .coverage-panel-inner, .coverage-copy { padding: 22px 18px; }
    .coverage-copy h3 { font-size: 22px; }
    .coverage-reference { padding: 14px; margin: 0 -4px; }
    .coverage-actions { flex-direction: column; }
    .coverage-actions .coverage-btn { width: 100%; }
    .coverage-visual-caption { right: 20px; bottom: 20px; left: 20px; }
    .coverage-baremetal-cards { grid-template-columns: 1fr; }
    .coverage-physical-image { height: 220px; }
  }
  .sec-one-stop-products {
    padding: 80px 0;
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 48%, #f8fafc 100%);
    position: relative;
    overflow: hidden;
  }
  .sec-one-stop-products::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(59, 130, 246, .22), transparent);
  }
  .sec-one-stop-products .section-title { margin-bottom: 34px; }
  .sec-one-stop-products .section-title h2 { margin-bottom: 12px; }
  .sec-one-stop-products .section-title p { max-width: 760px; }
  .one-stop-gradient {
    background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .one-stop-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-bottom: 34px;
  }
  .one-stop-tab {
    min-height: 44px;
    padding: 10px 18px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #f1f5f9;
    color: #64748b;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: color .2s ease, background .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
  }
  .one-stop-tab:hover { color: #2563eb; border-color: #bfdbfe; background: #eff6ff; transform: translateY(-1px); }
  .one-stop-tab.active { border-color: transparent; background: linear-gradient(135deg, #3b82f6, #8b5cf6); color: #fff; box-shadow: 0 8px 20px rgba(59, 130, 246, .24); }
  .one-stop-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
  .one-stop-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .06);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  }
  .one-stop-card:hover { transform: translateY(-4px); border-color: #bfdbfe; box-shadow: 0 16px 32px rgba(15, 23, 42, .1); }
  .one-stop-card-kicker { display: inline-flex; align-items: center; align-self: flex-start; margin-bottom: 8px; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; }
  .one-stop-card-kicker.cloud, .one-stop-tags span.cloud { background: #dbeafe; color: #1d4ed8; }
  .one-stop-card-kicker.gpu, .one-stop-tags span.gpu { background: #ede9fe; color: #7c3aed; }
  .one-stop-card-kicker.dedicated, .one-stop-tags span.dedicated { background: #d1fae5; color: #047857; }
  .one-stop-card-kicker.host, .one-stop-tags span.host { background: #fef3c7; color: #92400e; }
  .one-stop-card-kicker.domain, .one-stop-tags span.domain { background: #ffedd5; color: #c2410c; }
  .one-stop-features { display: grid; gap: 8px; margin: 2px 0 16px; color: #64748b; font-size: 12px; line-height: 1.45; }
  .one-stop-features > div { display: flex; align-items: flex-start; gap: 8px; }
  .one-stop-feature-dot { flex: 0 0 auto; width: 6px; height: 6px; margin-top: 5px; border-radius: 50%; }
  .one-stop-feature-dot.cloud { background: #3b82f6; }
  .one-stop-feature-dot.gpu { background: #8b5cf6; }
  .one-stop-feature-dot.dedicated { background: #10b981; }
  .one-stop-feature-dot.host { background: #f59e0b; }
  .one-stop-feature-dot.domain { background: #f97316; }
  .one-stop-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 20px; }
  .one-stop-tags span { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; }
  .one-stop-tags span.green { background: #d1fae5; color: #047857; }
  .one-stop-tags span.blue { background: #dbeafe; color: #1d4ed8; }
  .one-stop-tags span.orange { background: #ffedd5; color: #c2410c; }
  .one-stop-tags span.purple { background: #ede9fe; color: #7c3aed; }
  .one-stop-tags span.red { background: #fee2e2; color: #b91c1c; }
  .one-stop-card-footer { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 16px; border-top: 1px solid #f1f5f9; }
  .one-stop-card-footer > div { display: flex; align-items: baseline; white-space: nowrap; }
  .one-stop-card-footer > div > span { color: #64748b; font-size: 12px; }
  .one-stop-price { font-size: 28px; font-weight: 800; line-height: 1; }
  .one-stop-price.cloud { color: #2563eb; }
  .one-stop-price.gpu { color: #9333ea; }
  .one-stop-price.dedicated { color: #059669; }
  .one-stop-price.host { color: #d97706; }
  .one-stop-price.domain { color: #ea580c; }
  .one-stop-card.cloud { border-color: #bfdbfe; }
  .one-stop-card.gpu { border-color: #e9d5ff; }
  .one-stop-card.dedicated { border-color: #a7f3d0; }
  .one-stop-card.host { border-color: #fde68a; }
  .one-stop-card.domain { border-color: #fed7aa; }
  .one-stop-card.cloud .one-stop-card-body { background: linear-gradient(180deg, #ffffff, #f8fbff); }
  .one-stop-card.gpu .one-stop-card-body { background: linear-gradient(180deg, #ffffff, #fcfaff); }
  .one-stop-card.dedicated .one-stop-card-body { background: linear-gradient(180deg, #ffffff, #f6fffb); }
  .one-stop-card.host .one-stop-card-body { background: linear-gradient(180deg, #ffffff, #fffdf5); }
  .one-stop-card.domain .one-stop-card-body { background: linear-gradient(180deg, #ffffff, #fffaf5); }
  .one-stop-card.cloud .one-stop-btn.primary { background: linear-gradient(135deg, #2563eb, #3b82f6); }
  .one-stop-card.gpu .one-stop-btn.primary { background: linear-gradient(135deg, #9333ea, #c026d3); }
  .one-stop-card.dedicated .one-stop-btn.primary { background: linear-gradient(135deg, #059669, #0d9488); }
  .one-stop-card.host .one-stop-btn.primary { background: linear-gradient(135deg, #d97706, #ea580c); }
  .one-stop-card.domain .one-stop-btn.primary { background: linear-gradient(135deg, #ea580c, #e11d48); }
  .one-stop-card[hidden] { display: none; }

  /* Products pricing-plan presentation */
  .sec-one-stop-products .one-stop-pricing-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    max-width: 1200px;
    margin: -8px auto 28px;
    padding: 16px 20px;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 6px 18px rgba(15, 23, 42, .05);
  }
  .sec-one-stop-products .one-stop-pricing-copy { display: grid; gap: 3px; }
  .sec-one-stop-products .one-stop-pricing-eyebrow { color: #2563eb; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
  .sec-one-stop-products .one-stop-pricing-copy strong { color: #0f172a; font-size: 16px; }
  .sec-one-stop-products .one-stop-pricing-copy p { margin: 0; color: #64748b; font-size: 12px; }
  .sec-one-stop-products .one-stop-pricing-methods { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
  .sec-one-stop-products .one-stop-pricing-method { display: inline-flex; align-items: center; min-height: 32px; padding: 6px 11px; border: 1px solid #e2e8f0; border-radius: 8px; color: #64748b; background: #f8fafc; font-size: 12px; font-weight: 600; }
  .sec-one-stop-products .one-stop-pricing-method.primary { border-color: #bfdbfe; color: #1d4ed8; background: #eff6ff; }
  .sec-one-stop-products .one-stop-pricing-method em { margin-left: 5px; color: #059669; font-size: 11px; font-style: normal; }
  .sec-one-stop-products .one-stop-card.package-card { position: relative; border: 1px solid #e2e8f0 !important; border-radius: 16px; box-shadow: 0 8px 24px rgba(15, 23, 42, .06); }
  .sec-one-stop-products .one-stop-card.package-card:hover { border-color: #93c5fd !important; box-shadow: 0 16px 32px rgba(15, 23, 42, .1); }
  .sec-one-stop-products .one-stop-card.package-card .one-stop-card-body { background: #fff !important; }
  .sec-one-stop-products .one-stop-card.package-card .one-stop-card-body::before { display: block; margin-bottom: 10px; color: #64748b; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
  .sec-one-stop-products #one-stop-panel-cloud .package-card:nth-child(1) .one-stop-card-body::before { content: '基础套餐'; color: #2563eb; }
  .sec-one-stop-products #one-stop-panel-cloud .package-card:nth-child(2) .one-stop-card-body::before { content: '标准套餐'; color: #2563eb; }
  .sec-one-stop-products #one-stop-panel-cloud .package-card:nth-child(3) .one-stop-card-body::before { content: '专业套餐'; color: #7c3aed; }
  .sec-one-stop-products #one-stop-panel-gpu .package-card:nth-child(1) .one-stop-card-body::before { content: 'AI 推理套餐'; color: #db2777; }
  .sec-one-stop-products #one-stop-panel-gpu .package-card:nth-child(2) .one-stop-card-body::before { content: 'GPU 推理套餐'; color: #ea580c; }
  .sec-one-stop-products #one-stop-panel-gpu .package-card:nth-child(3) .one-stop-card-body::before { content: '训练集群套餐'; color: #7c3aed; }
  .sec-one-stop-products #one-stop-panel-dedicated .package-card:nth-child(1) .one-stop-card-body::before { content: '独享入门套餐'; color: #059669; }
  .sec-one-stop-products #one-stop-panel-dedicated .package-card:nth-child(2) .one-stop-card-body::before { content: '企业标准套餐'; color: #0891b2; }
  .sec-one-stop-products #one-stop-panel-dedicated .package-card:nth-child(3) .one-stop-card-body::before { content: '旗舰定制套餐'; color: #0f766e; }
  .sec-one-stop-products #one-stop-panel-dedicated .reference-specs > div { padding: 8px 0; }
  .sec-one-stop-products #one-stop-panel-host .package-card:nth-child(1) .one-stop-card-body::before { content: '虚拟化入门套餐'; color: #d97706; }
  .sec-one-stop-products #one-stop-panel-host .package-card:nth-child(2) .one-stop-card-body::before { content: '企业集群套餐'; color: #dc2626; }
  .sec-one-stop-products #one-stop-panel-host .package-card:nth-child(3) .one-stop-card-body::before { content: '高密度存储套餐'; color: #991b1b; }
  .sec-one-stop-products #one-stop-panel-domain .package-card:nth-child(1) .one-stop-card-body::before { content: '域名基础套餐'; color: #ea580c; }
  .sec-one-stop-products #one-stop-panel-domain .package-card:nth-child(2) .one-stop-card-body::before { content: '主流后缀套餐'; color: #ea580c; }
  .sec-one-stop-products #one-stop-panel-domain .package-card:nth-child(3) .one-stop-card-body::before { content: '地区域名套餐'; color: #be123c; }
  .sec-one-stop-products .one-stop-grid .package-card:nth-child(2) { border-width: 2px !important; border-color: #2563eb !important; }
  .sec-one-stop-products .one-stop-grid .package-card:nth-child(2)::before { content: '推荐套餐'; position: absolute; top: 12px; right: 14px; z-index: 3; padding: 5px 10px; border-radius: 999px; color: #fff; background: #2563eb; box-shadow: 0 4px 10px rgba(37, 99, 235, .22); font-size: 11px; font-weight: 800; white-space: nowrap; }
  .sec-one-stop-products .one-stop-card.package-card .one-stop-price { font-size: 32px; }
  .sec-one-stop-products .one-stop-card.package-card .one-stop-card-footer { margin-top: 22px; padding-top: 18px; }
  .sec-one-stop-products .one-stop-card.package-card .one-stop-features { margin: 4px 0 14px; padding: 11px 12px; border: 1px solid #f1f5f9; border-radius: 10px; background: #f8fafc; }
  .sec-one-stop-products .one-stop-card.package-card .one-stop-tags { margin-bottom: 0; }
  .sec-one-stop-products .one-stop-card.package-card .one-stop-card-footer .one-stop-btn { min-width: 100px; white-space: nowrap; }
  @media (max-width: 700px) {
    .sec-one-stop-products .one-stop-pricing-header { align-items: flex-start; flex-direction: column; gap: 12px; margin-top: 0; }
    .sec-one-stop-products .one-stop-pricing-methods { justify-content: flex-start; }
  }

  .one-stop-product-panel { display: none; animation: one-stop-panel-in .35s ease; }
  .one-stop-product-panel.active { display: block; }
  @keyframes one-stop-panel-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
  .one-stop-panel-intro { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 24px; padding: 24px; border: 1px solid; border-radius: 16px; }
  .one-stop-panel-intro.cloud { border-color: #bfdbfe; background: linear-gradient(135deg, #eff6ff, #f5f3ff); }
  .one-stop-panel-intro.gpu { border-color: #e9d5ff; background: linear-gradient(135deg, #fdf4ff, #fff7ed); }
  .one-stop-panel-intro.dedicated { border-color: #a7f3d0; background: linear-gradient(135deg, #ecfdf5, #f0fdfa); }
  .one-stop-panel-intro.host { border-color: #fde68a; background: linear-gradient(135deg, #fffbeb, #fff7ed); }
  .one-stop-panel-intro.domain { border-color: #fed7aa; background: linear-gradient(135deg, #fff7ed, #fff1f2); }
  .one-stop-panel-icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 48px; height: 48px; border-radius: 12px; color: #fff; font-size: 24px; box-shadow: 0 8px 18px rgba(15, 23, 42, .12); }
  .one-stop-panel-intro.cloud .one-stop-panel-icon { background: linear-gradient(135deg, #3b82f6, #6366f1); }
  .one-stop-panel-intro.gpu .one-stop-panel-icon { background: linear-gradient(135deg, #a855f7, #ec4899); }
  .one-stop-panel-intro.dedicated .one-stop-panel-icon { background: linear-gradient(135deg, #10b981, #0d9488); }
  .one-stop-panel-intro.host .one-stop-panel-icon { background: linear-gradient(135deg, #f59e0b, #ea580c); }
  .one-stop-panel-intro.domain .one-stop-panel-icon { background: linear-gradient(135deg, #f97316, #e11d48); }
  .one-stop-panel-intro h3 { margin: 0 0 6px; color: #0f172a; font-size: 20px; }
  .one-stop-panel-intro p { margin: 0; color: #64748b; font-size: 13px; line-height: 1.65; }
  .one-stop-card-visual.cloud.standard { background: linear-gradient(135deg, #4f46e5, #7c3aed); }
  .one-stop-card-visual.cloud.performance { background: linear-gradient(135deg, #7c3aed, #db2777); }
  .one-stop-card-visual.gpu.standard { background: linear-gradient(135deg, #f97316, #dc2626); }
  .one-stop-card-visual.gpu.performance { background: linear-gradient(135deg, #7c3aed, #4f46e5); }
  .one-stop-card-visual.dedicated.standard { background: linear-gradient(135deg, #0891b2, #2563eb); }
  .one-stop-card-visual.dedicated.performance { background: linear-gradient(135deg, #0f766e, #0369a1); }
  .one-stop-card-visual.host.performance { background: linear-gradient(135deg, #dc2626, #e11d48); }
  .one-stop-card-visual.host.high-density { background: linear-gradient(135deg, #b45309, #991b1b); }
  .one-stop-card-visual.domain.standard { background: linear-gradient(135deg, #f59e0b, #ea580c); }
  .one-stop-card-visual.domain.performance { background: linear-gradient(135deg, #e11d48, #be123c); }
.sec-one-stop-products .one-stop-card.reference-card { border: 2px solid #f3f4f6; border-radius: 16px; }
  .sec-one-stop-products .one-stop-card.reference-card:hover { border-color: #f3f4f6; box-shadow: 0 20px 40px rgba(15, 23, 42, .1); }
  .sec-one-stop-products .one-stop-card.reference-card .one-stop-card-body { padding: 24px; background: #fff; }
  .sec-one-stop-products .one-stop-card.reference-card .one-stop-card-visual.reference-visual { height: 192px; }
  .sec-one-stop-products .one-stop-card.reference-card .one-stop-card-visual.gpu { background: linear-gradient(135deg, #ec4899, #e11d48); }
  .sec-one-stop-products .one-stop-card.reference-gpu-2 .one-stop-card-visual.gpu { background: linear-gradient(135deg, #f97316, #dc2626); }
  .sec-one-stop-products .one-stop-card.reference-gpu-3 .one-stop-card-visual.gpu { background: linear-gradient(135deg, #7c3aed, #4338ca); }
  .sec-one-stop-products .one-stop-card.reference-card .one-stop-card-visual.dedicated { background: linear-gradient(135deg, #10b981, #0d9488); }
  .sec-one-stop-products .one-stop-card.reference-dedicated-2 .one-stop-card-visual.dedicated { background: linear-gradient(135deg, #06b6d4, #2563eb); }
  .sec-one-stop-products .one-stop-card.reference-dedicated-3 .one-stop-card-visual.dedicated { background: linear-gradient(135deg, #0f766e, #0369a1); }
  .sec-one-stop-products .one-stop-card.reference-card .one-stop-card-overlay strong { font-size: 20px; }
  .sec-one-stop-products .one-stop-card.reference-card .one-stop-card-overlay span { margin: 4px 0 0; color: #fce7f3; font-size: 12px; }
  .sec-one-stop-products .one-stop-card.reference-card .one-stop-specs { gap: 0; margin-bottom: 0; }
  .sec-one-stop-products .one-stop-card.reference-card .one-stop-specs > div { display: grid; grid-template-columns: minmax(76px, 120px) minmax(0, 1fr); align-items: baseline; justify-content: initial; padding: 10px 0; border-bottom: 1px dashed #e5e7eb; font-size: 14px; }
  .sec-one-stop-products .one-stop-card.reference-card .one-stop-specs > div:last-child { border-bottom: none; }
  .sec-one-stop-products .one-stop-card.reference-card .one-stop-specs span { color: #6b7280; font-weight: 500; }
  .sec-one-stop-products .one-stop-card.reference-card .one-stop-specs strong { color: #111827; font-size: 14px; font-weight: 600; text-align: left; }
  .sec-one-stop-products .one-stop-card.reference-card .one-stop-card-footer { margin-top: 20px; padding-top: 16px; }
  .sec-one-stop-products .one-stop-card.reference-card .one-stop-card-footer > div > span { font-size: 14px; }
  .sec-one-stop-products .one-stop-card.reference-card .one-stop-btn { min-height: 0; padding: 10px 20px; border-radius: 10px; font-size: 14px; }
  .sec-one-stop-products .one-stop-card.reference-gpu-1 .one-stop-price { color: #db2777; }
  .sec-one-stop-products .one-stop-card.reference-gpu-1 .one-stop-btn.primary { background: linear-gradient(135deg, #ec4899, #f97316); }
  .sec-one-stop-products .one-stop-card.reference-gpu-2 .one-stop-price { color: #ea580c; }
  .sec-one-stop-products .one-stop-card.reference-gpu-2 .one-stop-btn.primary { background: linear-gradient(135deg, #f97316, #ef4444); }
  .sec-one-stop-products .one-stop-card.reference-gpu-3 .one-stop-price { color: #7c3aed; font-size: 18px; }
  .sec-one-stop-products .one-stop-card.reference-dedicated-1 .one-stop-price { color: #059669; }
  .sec-one-stop-products .one-stop-card.reference-dedicated-1 .one-stop-btn.primary { background: linear-gradient(135deg, #10b981, #0d9488); }
  .sec-one-stop-products .one-stop-card.reference-dedicated-2 .one-stop-price { color: #0891b2; }
  .sec-one-stop-products .one-stop-card.reference-dedicated-2 .one-stop-btn.primary { background: linear-gradient(135deg, #06b6d4, #2563eb); }
  .sec-one-stop-products .one-stop-card.reference-dedicated-3 .one-stop-price { color: #0f766e; }
  .sec-one-stop-products .one-stop-card.reference-card .one-stop-btn.outline { border: 2px solid #3b82f6; background: #fff; color: #2563eb; box-shadow: none; }
  .sec-one-stop-products .one-stop-card.reference-gpu-3 .one-stop-btn.outline { border-color: #8b5cf6; color: #7c3aed; }
  .sec-one-stop-products .one-stop-card.reference-dedicated-3 .one-stop-btn.outline { border-color: #0f766e; color: #0f766e; }
  .sec-one-stop-products .one-stop-card.reference-card .one-stop-btn.outline:hover { background: #eff6ff; transform: translateY(-1px); }
  .one-stop-grid-single { grid-template-columns: minmax(0, 1fr); max-width: 620px; margin: 0 auto; }
  .one-stop-panel-note { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 22px; }
  .one-stop-panel-note span { padding: 12px; border-radius: 10px; background: #eff6ff; color: #1d4ed8; font-size: 12px; font-weight: 600; text-align: center; }
  .one-stop-card-visual { position: relative; height: 192px; overflow: hidden; background: #1e293b; }
  .one-stop-card-visual::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15, 23, 42, .04), rgba(15, 23, 42, .78)); }
  .one-stop-card-visual.cloud { background: linear-gradient(135deg, #2563eb, #1d4ed8); }
  .one-stop-card-visual.gpu { background: linear-gradient(135deg, #7c3aed, #c026d3); }
  .one-stop-card-visual.dedicated { background: linear-gradient(135deg, #059669, #0f766e); }
  .one-stop-card-visual.host { background: linear-gradient(135deg, #d97706, #c2410c); }
  .one-stop-card-visual.domain { background: linear-gradient(135deg, #ea580c, #be123c); }
  .one-stop-card-visual img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: .64; }
  .one-stop-card-visual.domain img { object-fit: cover; padding: 0; opacity: .64; }
  .one-stop-card-overlay { position: absolute; right: 18px; bottom: 16px; left: 18px; z-index: 1; color: #fff; }
  .one-stop-card-overlay span { display: block; margin-bottom: 4px; font-size: 13px; font-weight: 600; }
  .one-stop-card-overlay strong { display: block; font-size: 18px; line-height: 1.2; }
  .one-stop-card-body { display: flex; flex: 1; flex-direction: column; padding: 24px; }
  .one-stop-card-body h3 { margin: 0 0 8px; color: #0f172a; font-size: 18px; }
  .one-stop-card-body > p { min-height: 50px; margin: 0 0 16px; color: #64748b; font-size: 13px; line-height: 1.6; }
  .one-stop-specs { display: grid; gap: 8px; margin-bottom: 20px; }
  .one-stop-specs > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px dashed #e5e7eb; font-size: 13px; }
  .one-stop-specs span { color: #94a3b8; }
  .one-stop-specs strong { color: #334155; font-size: 12px; font-weight: 600; text-align: right; }
  .one-stop-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; margin-top: auto; padding: 9px 16px; border-radius: 8px; font-size: 13px; font-weight: 600; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
  .one-stop-btn.primary { background: linear-gradient(135deg, #3b82f6, #6366f1); color: #fff; box-shadow: 0 4px 12px rgba(59, 130, 246, .2); }
  .one-stop-btn.primary:hover { background: linear-gradient(135deg, #2563eb, #4f46e5); box-shadow: 0 7px 16px rgba(59, 130, 246, .3); transform: translateY(-1px); }
  @media (max-width: 1000px) {
    .one-stop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (max-width: 600px) {
    .sec-one-stop-products { padding: 52px 0; }
    .one-stop-tabs { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; margin-right: -4px; margin-left: -4px; padding: 0 4px 4px; scrollbar-width: none; }
    .one-stop-tabs::-webkit-scrollbar { display: none; }
    .one-stop-tab { flex: 0 0 auto; min-width: max-content; padding: 10px 14px; font-size: 13px; }
    .one-stop-grid { grid-template-columns: 1fr; gap: 16px; }
    .one-stop-card-visual { height: 155px; }
    .one-stop-card-body { padding: 18px; }
    .one-stop-panel-intro { padding: 18px; }
    .one-stop-panel-intro h3 { font-size: 18px; }
    .one-stop-panel-note { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }

/* ===== source: index.html inline style attributes ===== */
.coverage-product-heading { margin: 14px 0; color: #0f172a; font-size: 25px; line-height: 1.25; }
.coverage-product-description { margin: 0 0 16px; color: #475569; font-size: 14px; line-height: 1.75; }
.coverage-product-description-wide { margin-bottom: 24px; }
.coverage-badge.ai { background: #ede9fe; color: #5b21b6; }
.coverage-price-unit { display: inline; font-size: 13px; }

/* English navigation fit: keep longer localized labels inside the header. */
html[lang="en"] .logo {
  flex-shrink: 0;
  font-size: 22px;
}

html[lang="en"] nav {
  min-width: 0;
}

html[lang="en"] .nav-links {
  min-width: 0;
}

html[lang="en"] .nav-links > a,
html[lang="en"] .nav-links > .dropdown > a {
  padding-left: 9px;
  padding-right: 9px;
  font-size: 13px;
  white-space: nowrap;
}

html[lang="en"] .nav-actions {
  flex-shrink: 0;
  gap: 6px;
}

html[lang="en"] .nav-actions .btn {
  padding-left: 11px;
  padding-right: 11px;
  font-size: 13px;
}

html[lang="en"] .lang-btn {
  padding-left: 9px;
  padding-right: 9px;
  font-size: 13px;
}

@media (max-width: 1180px) and (min-width: 769px) {
  html[lang="en"] .nav-links,
  html[lang="en"] .nav-actions {
    display: none;
  }

  html[lang="en"] .mobile-menu-toggle {
    display: flex;
  }

  html[lang="en"] .mobile-menu {
    display: block;
  }
}