/* ==========================================================================
   关于我们 · 网络拓扑版（从 Downloads/index.php 模板抽出，改为响应式）
   左侧：标题 + 文案 + 数据；右侧：动画网络拓扑
   ========================================================================== */
.about-v2 {
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: #000000;
  color: #fff;
  font-family: "Microsoft YaHei", "PingFang SC", "Segoe UI", system-ui, sans-serif;
}

.about-v2 .inner {
  position: relative; z-index: 3;
  width: min(1320px, calc(100% - 48px));
  margin: 0 auto;
  display: flex; align-items: center; gap: 40px;
  padding: 96px 0;
}
.about-v2 .copy { flex: 1 1 0; min-width: 0; }

.about-v2 .eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 17px 10px 14px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 61, 143, .09);
  font-size: 11px; line-height: 1; letter-spacing: .28em; font-weight: 700;
  color: #ffa3cb; text-transform: uppercase;
}
.about-v2 .eyebrow i {
  width: 7px; height: 7px; border-radius: 50%;
  background: #ff3d8f;
  box-shadow: 0 0 10px rgba(255, 61, 143, .85);
  animation: eyebrow-pulse 2.4s ease-out infinite;
}
@keyframes eyebrow-pulse {
  0% { box-shadow: 0 0 0 0 rgba(255, 61, 143, .5), 0 0 10px rgba(255, 61, 143, .85); }
  70% { box-shadow: 0 0 0 9px rgba(255, 61, 143, 0), 0 0 10px rgba(255, 61, 143, .85); }
  100% { box-shadow: 0 0 0 0 rgba(255, 61, 143, 0), 0 0 10px rgba(255, 61, 143, .85); }
}
.about-v2 h2 {
  margin: 20px 0 0;
  font-weight: 700; font-size: clamp(34px, 5vw, 60px); line-height: 1.08; letter-spacing: .04em;
  background: linear-gradient(180deg, #ffffff 0%, #ffffff 62%, #e7e2f4 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.about-v2 .lead {
  margin-top: 24px; max-width: 640px;
  font-size: 19px; line-height: 1.9; letter-spacing: .01em; color: #cfcbdd; font-weight: 300;
}
.about-v2 .lead strong { font-weight: 600; color: #fff; }
.about-v2 .sub {
  margin-top: 16px; max-width: 640px;
  font-size: 16px; line-height: 1.92; letter-spacing: .015em; color: #9894a8; font-weight: 300;
}
.about-v2 .stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px;
  margin-top: 46px; max-width: 600px;
}
.about-v2 .stat { border-top: 1px solid rgba(255, 255, 255, .14); padding-top: 16px; }
.about-v2 .num {
  display: flex; align-items: flex-start; gap: 5px;
  font-family: "Bahnschrift Condensed", "Bahnschrift", "DIN Alternate", "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
  font-size: clamp(50px, 5.2vw, 66px);
  font-weight: 600; line-height: .9; letter-spacing: -.01em;
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  background: linear-gradient(180deg, #ffffff 0%, #ffffff 58%, #cfc8e6 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.about-v2 .num sup {
  font-family: inherit;
  font-size: .4em; font-weight: 700; line-height: 1;
  transform: translateY(.05em);
  letter-spacing: 0;
  color: #ff3d8f;
  -webkit-text-fill-color: #ff3d8f;
  text-shadow:
    0 0 8px rgba(255, 61, 143, .85),
    0 0 18px rgba(255, 61, 143, .55),
    0 0 34px rgba(255, 61, 143, .3);
}
.about-v2 .stat p {
  margin-top: 14px;
  font-size: 12px; font-weight: 400; letter-spacing: .22em; color: #8b87a0;
}

.about-v2 .object { flex: none; width: 800px; height: 800px; position: relative; transform: translateX(48px); }
.about-v2 .object canvas { display: block; width: 800px; height: 800px; }
.about-v2 .object::before {
  content: ""; position: absolute; inset: -40px;
  background: radial-gradient(circle at 50% 50%, rgba(255, 61, 143, .12), transparent 62%);
  pointer-events: none;
}

@media (max-width: 1240px) {
  .about-v2 .inner { flex-direction: column; gap: 40px; text-align: center; padding: 72px 0; }
  .about-v2 .eyebrow { justify-content: center; }
  .about-v2 .lead, .about-v2 .sub { margin-left: auto; margin-right: auto; }
  .about-v2 .stats { max-width: 520px; margin-left: auto; margin-right: auto; }
  .about-v2 .object { width: 340px; height: 340px; transform: none; }
  .about-v2 .object canvas { width: 340px; height: 340px; }
}

@media (prefers-reduced-motion: reduce) {
  .about-v2 .eyebrow i { animation: none; }
}