.knowledge-globe::before {
  content: "";
  position: absolute;
  inset: -15%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(236, 248, 255, .92), rgba(26, 143, 212, .16) 38%, rgba(37, 99, 235, .1) 58%, transparent 72%);
  animation: cz-globe-breathe 5s ease-in-out infinite;
}

.globe-sphere {
  position: absolute;
  inset: 24px;
  overflow: hidden;
  border: 1px solid rgba(62, 115, 168, .11);
  border-radius: 50%;
  background: radial-gradient(circle at 34% 27%, rgba(250, 253, 255, .85), rgba(80, 180, 230, .18) 34%, rgba(37, 99, 235, .1) 65%, rgba(50, 100, 180, .03) 80%, transparent 100%);
  box-shadow: 0 22px 60px rgba(40, 100, 160, .12), inset -16px -19px 48px rgba(37, 99, 235, .08);
}

.globe-sphere::before,
.globe-sphere::after {
  content: "";
  position: absolute;
  inset: 13%;
  border: 1px solid rgba(40, 140, 200, .28);
  border-radius: 50% 50% 46% 54%;
  transform: rotate(19deg);
}

.globe-sphere::after {
  inset: 27% 8%;
  border-color: rgba(37, 99, 235, .2);
  transform: rotate(-14deg);
}

.globe-line {
  position: absolute;
  left: 50%;
  top: 50%;
  border: 1px solid rgba(40, 140, 200, .28);
  border-radius: 50%;
  transform-origin: center;
}

.longitude {
  width: 86px;
  height: 300px;
  margin: -150px -43px;
}

.longitude-one {
  animation: cz-longitude 10s ease-in-out infinite;
}

.longitude-two {
  width: 188px;
  margin-left: -94px;
  border-color: rgba(37, 99, 235, .22);
  animation: cz-longitude 13s ease-in-out infinite reverse;
}

.latitude {
  width: 300px;
  height: 82px;
  margin: -41px -150px;
}

.latitude-one {
  animation: cz-latitude 8s ease-in-out infinite;
}

.latitude-two {
  height: 176px;
  margin-top: -88px;
  border-color: rgba(37, 99, 235, .18);
  animation: cz-latitude 12s ease-in-out infinite reverse;
}

.globe-track {
  position: absolute;
  inset: 11px;
  border: 1px dashed rgba(84, 77, 186, .13);
  border-radius: 50%;
  transform: rotate(-14deg);
  animation: cz-track 25s linear infinite;
}

.globe-track::after {
  content: "";
  position: absolute;
  left: 39px;
  top: 23px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(37, 99, 235, .7);
  box-shadow: 0 0 0 4px rgba(37, 99, 235, .08), 0 0 13px rgba(37, 99, 235, .4);
}

.globe-center {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  display: flex;
  align-items: baseline;
  gap: 2px;
  color: #1768a8;
  font-size: 24px;
  font-weight: 900;
  letter-spacing: -.05em;
  text-shadow: 0 2px 16px rgba(255, 255, 255, .96);
  transform: translate(-50%, -50%);
}

.globe-center em {
  color: #2563eb;
  font-style: normal;
}

.globe-node {
  position: absolute;
  z-index: 5;
  color: #1a5f9a;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-align: center;
  text-shadow: 0 1px 8px #fff, 0 0 12px rgba(26, 143, 212, .65);
  animation: cz-node-flash 3s ease-in-out infinite;
}

.globe-node i {
  display: block;
  width: 8px;
  height: 8px;
  margin: 0 auto 2px;
  border: 1px solid rgba(255, 255, 255, .92);
  border-radius: 50%;
  background: #1a8fd4;
  box-shadow: 0 0 0 5px rgba(26, 143, 212, .12), 0 0 17px rgba(26, 143, 212, .9);
  animation: cz-node-pulse 2.4s ease-in-out infinite;
}

.globe-node:nth-of-type(even) i {
  background: #2563eb;
  box-shadow: 0 0 0 5px rgba(37, 99, 235, .12), 0 0 17px rgba(37, 99, 235, .85);
}

.globe-node b {
  font-weight: inherit;
}

.node-detect { left: 49px; top: 35px; }
.node-strategy { right: 45px; top: 66px; animation-delay: -.5s; }
.node-optimize { right: 31px; top: 168px; animation-delay: -1s; }
.node-content { left: 59px; bottom: 40px; animation-delay: -1.5s; }
.node-publish { left: 24px; top: 153px; animation-delay: -2s; }
.node-review { right: 70px; bottom: 21px; animation-delay: -2.5s; }

.node-strategy i { animation-delay: -.5s; }
.node-optimize i { animation-delay: -1s; }
.node-content i { animation-delay: -1.5s; }
.node-publish i { animation-delay: -2s; }
.node-review i { animation-delay: -2.5s; }

.product-float {
  animation: cz-card-float 6s ease-in-out infinite;
}

.float-zhida {
  animation-delay: -2s;
}

.float-xiaoguan {
  animation-delay: -4s;
}

@keyframes cz-globe-breathe {
  0%, 100% { opacity: .62; transform: scale(.96); }
  50% { opacity: 1; transform: scale(1.04); }
}

@keyframes cz-longitude {
  0%, 100% { transform: scaleX(.46); }
  50% { transform: scaleX(1); }
}

@keyframes cz-latitude {
  0%, 100% { transform: scaleY(.65); }
  50% { transform: scaleY(1.04); }
}

@keyframes cz-track {
  to { transform: rotate(346deg); }
}

@keyframes cz-node-pulse {
  0%, 100% { opacity: .45; transform: scale(.72); }
  48% { opacity: 1; transform: scale(1.35); }
}

@keyframes cz-node-flash {
  0%, 100% { opacity: .18; transform: translateY(3px); }
  45%, 62% { opacity: 1; transform: translateY(0); }
}

@keyframes cz-card-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .knowledge-globe *,
  .knowledge-globe::before,
  .product-float {
    animation: none !important;
  }

  .globe-node {
    opacity: 1;
    transform: none;
  }

  .growth-chain article,
  .growth-chain article:not(:last-child)::after,
  .growth-chain b,
  .growth-chain p,
  .growth-chain span {
    transition: none !important;
  }

  .growth-chain article:hover,
  .growth-chain article:focus-visible {
    transform: none;
  }

  .growth-chain article:hover:not(:last-child)::after,
  .growth-chain article:hover span {
    transform: none;
  }
}