/**
 * 全站顶栏 — 与「关于我们」页 top-nav 同一套 1920 画布坐标
 *
 * 关于我们栏本身 left:-34 / width:1989；子元素 left 相对该栏。
 * 换算到 1920 画布：canvasX = navX - 34，再写成百分比，避免 logo / 菜单整体偏右。
 */
.top-nav {
  width: 100%;
  height: calc(116 / 1920 * 100vw);
  z-index: 100;
  overflow: visible;
  background: linear-gradient(180deg, #f1f6fd 0%, #f7fbff 100%);
  font-family: "SimHei", "Heiti SC", "STHeiti", "Microsoft YaHei", sans-serif;
  font-weight: 400;
  color: #000;
}

.top-nav--in-canvas,
.top-nav--in-flow {
  position: absolute;
  left: 0;
  top: 0;
}

.top-nav__logo {
  position: absolute;
  left: calc(153 / 1920 * 100%); /* 187 - 34 */
  top: calc(21 / 116 * 100%);
  width: calc(71 / 1920 * 100vw);
  height: calc(71 / 1920 * 100vw);
}

.top-nav__logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  max-width: none;
}

.top-nav__brand-en {
  position: absolute;
  left: calc(237.625 / 1920 * 100%); /* 271.625 - 34 */
  top: calc(29.178 / 116 * 100%);
  font-size: calc(23.333 / 1920 * 100vw);
  line-height: calc(34 / 1920 * 100vw);
  color: #000;
  white-space: nowrap;
  letter-spacing: 0.02em;
}

.top-nav__brand-cn {
  position: absolute;
  left: calc(237 / 1920 * 100%); /* 271 - 34 */
  top: calc(65 / 116 * 100%);
  width: calc(93 / 1920 * 100vw);
  height: auto;
  object-fit: contain;
  max-width: none;
}

.top-nav__menu > a {
  position: absolute;
  top: calc(39.178 / 116 * 100%);
  font-size: calc(23.333 / 1920 * 100vw);
  line-height: calc(34 / 1920 * 100vw);
  color: #000;
  white-space: nowrap;
  text-decoration: none;
  transition: color 0.2s;
}

.top-nav__menu > a:hover { color: #196df4; }
.top-nav__menu > a:nth-child(1) { left: calc(544.625 / 1920 * 100%); } /* 578.625 - 34 */
.top-nav__menu > a:nth-child(4) { left: calc(988.625 / 1920 * 100%); } /* 1022.625 - 34 */
.top-nav__menu a.is-active { color: #196df4; }

.top-nav__dropdown {
  position: absolute;
  top: calc(39.178 / 116 * 100%);
  font-size: calc(23.333 / 1920 * 100vw);
  line-height: calc(34 / 1920 * 100vw);
  white-space: nowrap;
  z-index: 2;
}

.top-nav__menu > .top-nav__dropdown:nth-child(2) {
  left: calc(663.625 / 1920 * 100%); /* 核心产品 697.625 - 34 */
}

.top-nav__menu > .top-nav__dropdown:nth-child(3) {
  left: calc(824.625 / 1920 * 100%); /* 解决方案 858.625 - 34 */
}

.top-nav__dropdown:hover,
.top-nav__dropdown:focus-within {
  z-index: 3;
}

.top-nav__dropdown > a {
  display: inline-block;
  color: #000;
  text-decoration: none;
  transition: color 0.2s;
}

.top-nav__dropdown > a:hover,
.top-nav__dropdown:hover > a,
.top-nav__dropdown:focus-within > a,
.top-nav__dropdown > a.is-active {
  color: #196df4;
}

.top-nav__submenu {
  position: absolute;
  left: 50%;
  top: calc(100% + 12 / 1920 * 100vw);
  width: calc(168 / 1920 * 100vw);
  padding: calc(8 / 1920 * 100vw);
  background: #fff;
  border-radius: calc(12 / 1920 * 100vw);
  box-shadow:
    0 calc(14 / 1920 * 100vw) calc(36 / 1920 * 100vw) rgba(25, 109, 244, 0.14),
    0 calc(2 / 1920 * 100vw) calc(8 / 1920 * 100vw) rgba(15, 40, 90, 0.06);
  border: 1px solid rgba(25, 109, 244, 0.12);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, calc(8 / 1920 * 100vw));
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s ease;
  z-index: 40;
}

.top-nav__submenu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(-16 / 1920 * 100vw);
  height: calc(16 / 1920 * 100vw);
}

.top-nav__submenu::after {
  content: "";
  position: absolute;
  left: 50%;
  top: calc(-6 / 1920 * 100vw);
  width: calc(12 / 1920 * 100vw);
  height: calc(12 / 1920 * 100vw);
  background: #fff;
  border-left: 1px solid rgba(25, 109, 244, 0.12);
  border-top: 1px solid rgba(25, 109, 244, 0.12);
  transform: translateX(-50%) rotate(45deg);
}

.top-nav__dropdown:hover .top-nav__submenu,
.top-nav__dropdown:focus-within .top-nav__submenu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

.top-nav__submenu a,
.top-nav__submenu [role="menuitem"] {
  display: block;
  padding: calc(10 / 1920 * 100vw) calc(8 / 1920 * 100vw);
  font-size: calc(16 / 1920 * 100vw);
  line-height: 1.4;
  text-align: center;
  color: #3a4454;
  text-decoration: none;
  white-space: nowrap;
  border-radius: calc(8 / 1920 * 100vw);
  transition: color 0.2s ease, background-color 0.2s ease;
}

.top-nav__submenu > * + * { margin-top: calc(2 / 1920 * 100vw); }

.top-nav__submenu a:hover,
.top-nav__submenu a.is-current {
  color: #196df4;
  background: rgba(25, 109, 244, 0.08);
}

.top-nav__submenu [role="menuitem"]:not(a) {
  cursor: default;
}

/* 底部选中线：48×4，圆角 2，主色 #196DF4，贴顶栏底 */
.top-nav__underline {
  position: absolute;
  top: calc(112 / 116 * 100%);
  width: calc(48 / 1920 * 100vw);
  height: calc(4 / 1920 * 100vw);
  background: #196df4;
  border-radius: calc(2 / 1920 * 100vw);
  pointer-events: none;
}

.top-nav--home .top-nav__underline { left: calc(543.958 / 1920 * 100%); } /* 577.958 - 34 */
.top-nav--product .top-nav__underline { left: calc(686.291 / 1920 * 100%); } /* 720.291 - 34 */
.top-nav--solution .top-nav__underline { left: calc(847.291 / 1920 * 100%); } /* 881.291 - 34 */
.top-nav--about .top-nav__underline { left: calc(1006.2 / 1920 * 100%); } /* 1040.2 - 34 */

.top-nav__phone-icon {
  position: absolute;
  left: calc(1437 / 1920 * 100%); /* 1471 - 34 */
  top: calc(43 / 116 * 100%);
  width: calc(31 / 1920 * 100vw);
  height: calc(30 / 1920 * 100vw);
  object-fit: contain;
}

.top-nav__phone {
  position: absolute;
  left: calc(1478.625 / 1920 * 100%); /* 1512.625 - 34 */
  top: calc(41.178 / 116 * 100%);
  font-size: calc(20 / 1920 * 100vw);
  line-height: calc(29 / 1920 * 100vw);
  color: #000;
  white-space: nowrap;
  text-decoration: none;
}

.top-nav__cta {
  position: absolute;
  left: calc(1654 / 1920 * 100%); /* 1688 - 34 */
  top: calc(31 / 116 * 100%);
  width: calc(141 / 1920 * 100vw);
  height: calc(52 / 1920 * 100vw);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: calc(10 / 1920 * 100vw);
  background: #196df4;
  color: #fff;
  font-size: calc(20 / 1920 * 100vw);
  line-height: calc(29 / 1920 * 100vw);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}

@media (max-width: 991px) {
  .top-nav {
    display: none;
  }
}