/* Homepage-only typography and layout. The rest of the site keeps its legacy type system. */
:root {
  --wt-banner-line: rgba(114, 176, 232, .18);
  --wt-banner-line-strong: rgba(148, 205, 255, .28);
}

@font-face {
  font-family: "WuThreat Manrope";
  src: url("../fonts/banner/manrope-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
}

/* The Banner's first horizontal rule tracks the live navigation edge, so the
   floating card sits on it and the vertical grid descends from the same line.
   Past the Banner the rule has nothing to structure, so it is dropped. */
#navigation-container .main-nav {
  border-bottom: 1px solid var(--wt-banner-line);
}

#navigation-container .main-nav.body-scrolled {
  border-bottom-color: transparent;
}
@font-face {
  font-family: "WuThreat Noto SC";
  src: url("../fonts/banner/noto-sans-sc-banner.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

#home.wt-banner {
  --wt-ink: #f5f8fc;
  --wt-muted: #a9b7c8;
  --wt-soft: #7f90a5;
  --wt-line: var(--wt-banner-line);
  --wt-line-strong: var(--wt-banner-line-strong);
  --wt-action-blue: #71aef9;
  --wt-action-green: #67d8ad;
  --wt-action-ease: cubic-bezier(.22, 1, .36, 1);
  --wt-banner-top: 112px;
  --wt-navigation-edge: 85px;
  position: relative;
  z-index: 0;
  isolation: isolate;
  overflow: hidden;
  box-sizing: border-box;
  min-height: 100vh;
  min-height: 100svh;
  padding: 112px 0 0;
  border-top: 1px solid var(--wt-line);
  border-bottom: 1px solid var(--wt-line);
  background: #07101a;
  color: var(--wt-ink);
  /* 与 .wt-sec 同一套理由：基线自带，不继承页面 body（中英两版的 body 不一样） */
  font-family: "WuThreat Manrope", "WuThreat Noto SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.7;
  text-align: left;
}

/* The structural grid runs down the outer rail, one step outside the reading
   column, so headings, product cells and section content never touch a rule. */
#home .wt-banner-grid {
  position: absolute;
  z-index: 0;
  top: calc(var(--wt-navigation-edge) - var(--wt-banner-top) - 1px);
  right: 0;
  bottom: -1px;
  left: 0;
  pointer-events: none;
}

#home .wt-banner-grid span {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--wt-line);
}

#home .wt-banner-grid span:nth-child(1) { left: 0; }
#home .wt-banner-grid span:nth-child(2) { right: 0; }

#home.wt-banner::after {
  display: none;
}

#home .wt-banner-visual {
  position: absolute;
  z-index: -2;
  inset: 0;
  overflow: hidden;
  background: #07101a url("../images/full-width-images/section-bg-14.jpg") center / cover no-repeat;
  pointer-events: none;
}

#home .wt-banner-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(3, 10, 18, .58);
}

#home .wt-banner-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transition: opacity .35s ease;
}

#home.is-video-ready .wt-banner-video { opacity: .72; }

#home.is-video-fallback .wt-banner-video,
#home.is-data-saver .wt-banner-video { display: none; }

#home.is-motion-paused .wt-banner-video,
#home.is-page-hidden .wt-banner-video {
  will-change: auto;
}

#home.wt-banner *,
#home.wt-banner *::before,
#home.wt-banner *::after { box-sizing: border-box; }

#home .wt-banner-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  width: var(--site-frame-width, min(1350px, 100vw));
  max-width: none;
  min-height: calc(100vh - var(--wt-banner-top) - 1px);
  min-height: calc(100svh - var(--wt-banner-top) - 1px);
  margin: 0 auto;
  /* The rules run down the padding edge; the reading column starts one rail
     step inside, so nothing ever sits flush against a grid line. */
  padding: 0 var(--site-rail-inset, 30px);
}

#home .wt-banner-heading {
  position: relative;
  margin: 0;
  padding: clamp(126px, 18vh, 172px) 20px 44px;
  text-align: center;
}

/* Keep the complete hero message locked to the video's central shield on non-mobile layouts. */
@media (min-width: 701px) {
  #home .wt-banner-heading {
    position: absolute;
    top: calc(-1px - var(--wt-banner-top));
    right: 0;
    left: 0;
    display: flex;
    min-height: 100vh;
    min-height: 100svh;
    flex-direction: column;
    justify-content: center;
    padding: 0 20px;
    pointer-events: none;
  }

  #home .wt-banner-heading a { pointer-events: auto; }
}

#home .wt-banner-heading > * { position: relative; z-index: 1; }

/* 居中的细边小牌：一枚绿点 + 提亮的字距文字。
   原来是一行灰字，太平也太暗；现在按「点 → 牌 → 字」三层，读得清也看得出是设计过的。 */
#home .wt-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  /* 标题区是列向 flex，inline-flex 会被块化后拉满整行；
     align-self + fit-content 才收得回本来的宽度。 */
  align-self: center;
  width: fit-content;
  margin: 0 0 18px;
  padding: 5px calc(14px - .18em) 5px 12px;
  border: 1px solid rgba(148, 205, 255, .22);
  border-radius: 2px;
  background: rgba(255, 255, 255, .04);
  backdrop-filter: blur(6px);
  color: #cfe0f2;
  font-size: 11px;
  font-weight: 650;
  line-height: 1.5;
  letter-spacing: .18em;
}

#home .wt-eyebrow-mark {
  flex: none;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #67d8ad;
  box-shadow: 0 0 0 3px rgba(103, 216, 173, .16);
}

#home #wt-banner-title {
  max-width: 940px;
  margin: 0 auto 19px;
  color: var(--wt-ink);
  font: 540 clamp(46px, 5vw, 70px)/1.12 "WuThreat Manrope", "WuThreat Noto SC", "PingFang SC", "Microsoft YaHei", sans-serif !important;
  /* 中文大标题不宜用负字距：原来 -.052em 挤成一团，放开到微正值才透气。
     英文标题另有覆盖，拉丁字形该紧还是紧。 */
  letter-spacing: .012em !important;
}

#home #wt-banner-title span { display: block; white-space: nowrap; }

#home .wt-intro {
  max-width: 680px;
  margin: 0 auto;
  /* 比 --wt-muted 亮一档：首屏压在视频底图上，灰得太深就看不清了 */
  color: #c6d6e8;
  font-size: 17px !important;
  font-weight: 400 !important;
  line-height: 1.75 !important;
}

#home[data-locale="en"] #wt-banner-title {
  max-width: 900px;
  font-size: clamp(48px, 5.2vw, 72px) !important;
  line-height: 1.05 !important;
  letter-spacing: -.06em !important;
}

#home .wt-hero-actions { display: flex; justify-content: center; margin-top: 25px; }

/* 首屏 CTA 用站内统一的品牌按钮（.wt-btn-accent，见 home-sections-2026.css）：
   蓝底白字，悬停时蓝绿渐变从左扫入，文字同时上滑换行。
   这里只负责首屏的尺寸，颜色与交互一律不在这里另写。 */
#home .wt-hero-cta .wt-btn-inner {
  min-width: 164px;
  height: 50px;
  padding: 0 26px;
  font-size: 14px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .22);
}

/* The authority band is an overlay pinned to the banner floor. It starts at
   zero height and slides up over the product row on the first scroll, exactly
   as the old site did; the overshoot in the easing curve is the bounce.
   Its height is not hard-coded — JS measures the product row so the green card
   covers the two product cards exactly. */
#home .wt-hero-band {
  position: absolute;
  z-index: 3;
  right: 0;
  bottom: 0;
  left: 0;
  height: 0;
  overflow: hidden;
  background: linear-gradient(135deg, #36c958 0%, #2ba849 100%);
  box-shadow: 0 -4px 20px rgba(54, 201, 88, .15);
  transition: height .8s cubic-bezier(.34, 1.56, .64, 1);
}

#home.is-authority-visible .wt-hero-band { height: var(--wt-band-h, 186px); }

/* Fixed inner height keeps the content from reflowing while the box animates. */
#home .wt-hero-band-inner {
  position: relative;
  box-sizing: border-box;
  width: var(--site-frame-width, min(1350px, 100vw));
  height: var(--wt-band-h, 186px);
  margin: 0 auto;
  padding: 0 var(--site-rail-inset, 30px);
}

#home .wt-hero-band-rails {
  position: absolute;
  z-index: 0;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  pointer-events: none;
}

#home .wt-hero-band-rails span {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(255, 255, 255, .18);
}

#home .wt-hero-band-rails span:nth-child(1) { left: 0; }
#home .wt-hero-band-rails span:nth-child(2) { right: 0; }

#home .wt-hero-band .wt-authority {
  position: relative;
  z-index: 1;
  height: 100%;
  min-height: 0;
}

@media (prefers-reduced-motion: reduce) {
  #home .wt-hero-band { transition: none; }
}

#home .wt-products {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  flex: 0 0 auto;
  margin-top: auto;
}

#home .wt-products::before,
#home .wt-products::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  width: 100vw;
  height: 1px;
  background: var(--wt-line);
  transform: translateX(-50%);
  pointer-events: none;
}

#home .wt-products::before { top: 0; }
#home .wt-products::after { bottom: 0; }

#home .wt-product {
  --wt-accent: #75aef8;
  position: relative;
  min-width: 0;
}

#home .wt-product[data-product="endpoint"] {
  --wt-accent: #72d9b1;
}

#home .wt-product + .wt-product { border-left: 1px solid var(--wt-line); }

#home .wt-product-body {
  display: grid;
  grid-template-columns: 152px minmax(0, 1fr);
  align-items: stretch;
  min-height: 184px;
}

#home .wt-logo-stage {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
}

#home .logo-motion {
  position: relative;
  width: 127px;
  max-width: 100%;
  aspect-ratio: 1;
  pointer-events: none;
}

#home .logo-motion img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  transition: opacity .3s ease;
}

#home .logo-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}

#home .is-3d-ready .logo-canvas { opacity: 1; }
#home .is-3d-ready .logo-motion img { opacity: 0; }

.preparing-3d #home .wt-product:not(.is-3d-ready):not(.is-static-fallback) .logo-motion img {
  opacity: .1;
  filter: grayscale(1);
  transition: none;
}

#home .wt-product-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 16px 22px;
}

#home .wt-product-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  margin-bottom: 7px;
}

#home .wt-product-category {
  color: var(--wt-accent);
  font-size: 9px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .14em;
}

#home .wt-deployment {
  color: #91a2b5;
  font-size: 10px;
  font-weight: 500;
  line-height: 1.5;
}

#home .wt-product h2 {
  margin: 0 0 7px;
  color: var(--wt-ink);
  font-family: "WuThreat Manrope", sans-serif !important;
  font-size: clamp(27px, 2.2vw, 32px) !important;
  font-weight: 650 !important;
  line-height: 1.12 !important;
  letter-spacing: -.05em !important;
  white-space: nowrap;
}

#home .wt-product-position {
  max-width: 390px;
  margin: 0;
  color: #b8c5d4;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.55 !important;
}

#home .wt-product-link {
  display: inline-flex;
  width: fit-content;
  min-height: 34px;
  align-items: center;
  gap: 16px;
  margin-top: 12px;
  border-bottom: 0;
  background-image: linear-gradient(90deg, var(--wt-accent), var(--wt-action-green), var(--wt-accent));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 200% 1px;
  color: #eef4fb;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.5;
  text-decoration: none;
  transition: color .25s ease, background-position .55s var(--wt-action-ease);
}

#home .wt-product-link i { transition: transform .3s var(--wt-action-ease); }

@media (hover: hover) and (pointer: fine) {
  #home .wt-product-link:hover { color: #ffffff; background-position: 100% 100%; }
  #home .wt-product-link:hover i { transform: translateX(4px); }
}

#home .wt-product-link:active { color: var(--wt-accent); }

#home a:focus-visible,
#home button:focus-visible {
  outline: 2px solid #91bfff;
  outline-offset: 5px;
}

@media (min-width: 1101px) and (max-height: 820px) {
  #home.wt-banner { --wt-banner-top: 96px; min-height: 100vh; min-height: 100svh; padding-top: 96px; }
  #home .wt-banner-inner {
    min-height: calc(100vh - var(--wt-banner-top) - 1px);
    min-height: calc(100svh - var(--wt-banner-top) - 1px);
  }
  #home #wt-banner-title { font-size: 52px !important; margin-bottom: 13px; }
  #home[data-locale="en"] #wt-banner-title { font-size: 54px !important; }
  #home .wt-intro { font-size: 15px !important; }
  #home .wt-hero-actions { margin-top: 18px; }
  #home .wt-hero-cta .wt-btn-inner { height: 46px; }
#home .wt-products { margin-top: auto; }
  #home .wt-product-body { min-height: 164px; grid-template-columns: 142px minmax(0, 1fr); }
  #home .logo-motion { width: 114px; }
  #home .wt-product-copy { padding: 13px 22px; }
  #home[data-locale="en"] .wt-product-position { min-height: 43.4px; }
}

@media (max-width: 1100px) {
  #home.wt-banner { --wt-banner-top: 96px; min-height: 100vh; min-height: 100svh; padding: 96px 0 0; }
  #home .wt-banner-visual {
    background-position: center;
  }
  #home .wt-banner-inner {
    min-height: calc(100vh - var(--wt-banner-top) - 1px);
    min-height: calc(100svh - var(--wt-banner-top) - 1px);
    padding-right: 22px;
    padding-left: 22px;
  }
  #home #wt-banner-title { font-size: 52px !important; margin-bottom: 14px; }
  #home[data-locale="en"] #wt-banner-title { font-size: 54px !important; }
  #home .wt-intro { font-size: 14px !important; }
  #home .wt-hero-actions { margin-top: 19px; }
  #home .wt-hero-cta .wt-btn-inner { height: 46px; }
#home .wt-products { gap: 0; margin-top: auto; }
  #home .wt-product-body { grid-template-columns: 116px minmax(0, 1fr); min-height: 170px; }
  #home .wt-logo-stage { padding: 10px; }
  #home .logo-motion { width: 99px; }
  #home .wt-product-copy { padding: 14px 17px; }
  #home .wt-product-meta { display: block; }
  #home .wt-product-category,
  #home .wt-deployment { display: block; }
  #home .wt-product-category { margin-bottom: 3px; }
  #home .wt-product h2 { font-size: 27px !important; }
  #home .wt-product-position { font-size: 12px !important; }
  #home .wt-product-link { margin-top: 10px; }
}

@media (max-width: 900px) {
#home .wt-products { grid-template-columns: 1fr; gap: 0; }
  #home .wt-product-body { min-height: 180px; }
  #home .wt-product + .wt-product { border-left: 0; }
  #home .wt-product + .wt-product::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 100vw;
    height: 1px;
    background: var(--wt-line);
    transform: translateX(-50%);
    pointer-events: none;
  }
  #home .wt-product-link { min-height: 44px; }
}

/* High browser zoom leaves a short CSS viewport: keep CTA and product cells separated. */
@media (min-width: 701px) and (max-height: 620px) {
  #home .wt-banner-heading {
    transform: translateY(clamp(-54px, calc((100svh - 620px) * .37), -14px));
  }
  #home .wt-product-body { min-height: 150px; }
  #home .logo-motion { width: 90px; }
  #home .wt-product-copy { padding-top: 10px; padding-bottom: 10px; }
}

@media (max-width: 700px) {
  #home.wt-banner { --wt-banner-top: 86px; min-height: 0; padding: 86px 0 0; }
  #home .wt-banner-video { display: none; }
  #home .wt-banner-inner { display: block; min-height: 0; padding: 0 var(--site-rail-inset, 12px) 24px; }
  #home .wt-banner-heading { padding: 44px 10px 34px; }
  #home .wt-eyebrow { margin-bottom: 13px; font-size: 8px; letter-spacing: .12em; }
  /* 窄屏也别用负字距，跟桌面保持同一种气口 */
  #home #wt-banner-title { font-size: 38px !important; line-height: 1.18 !important; letter-spacing: .008em !important; }
  #home[data-locale="en"] #wt-banner-title { max-width: 330px; font-size: 40px !important; line-height: 1.06 !important; }
  #home .wt-intro { max-width: 320px; font-size: 13px !important; line-height: 1.7 !important; }
  #home .wt-hero-actions { margin-top: 20px; }
  #home .wt-hero-cta .wt-btn-inner { min-width: 150px; height: 46px; padding: 0 20px; font-size: 13px; }
#home .wt-products { gap: 0; margin-top: 24px; }
  #home .wt-product-body { grid-template-columns: 98px minmax(0, 1fr); min-height: 180px; }
  #home .wt-logo-stage { padding: 8px; }
  #home .logo-motion { width: 82px; }
  #home .wt-product-copy { padding: 14px 15px; }
  #home .wt-product-meta { margin-bottom: 7px; }
  #home .wt-product-category { font-size: 8px; letter-spacing: .1em; }
  #home .wt-deployment { font-size: 9px; }
  #home .wt-product h2 { margin-bottom: 7px; font-size: 24px !important; }
  #home .wt-product-position { font-size: 11px !important; line-height: 1.55 !important; }
  #home .wt-product-link { gap: 12px; margin-top: 10px; font-size: 11px; }
}

@media (max-width: 370px) {
  #home #wt-banner-title { font-size: 34px !important; }
  #home[data-locale="en"] #wt-banner-title { font-size: 36px !important; }
  #home .wt-product-body { grid-template-columns: 92px minmax(0, 1fr); }
  #home .logo-motion { width: 76px; }
  #home .wt-product-copy { padding-right: 12px; padding-left: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  #home .wt-banner-video { display: none !important; }
  #home.wt-banner *,
  #home.wt-banner *::before,
  #home.wt-banner *::after { transition: none !important; }
  #home .wt-hero-cta .wt-btn-inner::before,
  #home .wt-hero-cta .wt-btn-label { transition: none !important; }
  #home .wt-product-link i { transform: none !important; }
}

/* Authority band interior, moved here with the band itself. */
#home .wt-authority {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

#home .wt-authority-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 28px;
  text-align: center;
}

#home .wt-authority-item + #home .wt-authority-item::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 1px;
  height: 60%;
  background: rgba(255, 255, 255, .2);
  transform: translateY(-50%);
}

#home .wt-authority-logo {
  display: flex;
  height: 40px;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

#home .wt-authority-logo img {
  width: auto;
  max-width: 160px;
  height: auto;
  max-height: 40px;
  object-fit: contain;
  opacity: .95;
  /* The marks ship in their brand colours; the band needs them monochrome. */
  filter: brightness(0) invert(1);
  transition: opacity .3s ease, transform .3s ease;
}

#home .wt-authority-desc {
  max-width: 34em;
  margin: 0;
  color: rgba(255, 255, 255, .9);
  font-size: 13px !important;
  font-weight: 400;
  line-height: 1.6 !important;
  letter-spacing: .3px;
}

@media (hover: hover) and (pointer: fine) {
  #home .wt-authority-item:hover #home .wt-authority-logo img { opacity: 1; transform: scale(1.05); }
  #home .wt-authority-item:hover #home .wt-authority-desc { color: #ffffff; }
}

/* Ported from the old band: three tighter columns on tablets, then a single
   column with horizontal rules once three columns stop being readable. */
@media (max-width: 1024px) {
  #home .wt-authority-item { padding: 28px 20px; }
  #home .wt-authority-logo { height: 36px; margin-bottom: 14px; }
  #home .wt-authority-logo img { max-width: 140px; max-height: 36px; }
  #home .wt-authority-desc { font-size: 12px !important; }
}

@media (max-width: 860px) {
  #home .wt-authority { grid-template-columns: minmax(0, 1fr); }
  #home .wt-authority-item { padding: 26px 20px; }
  #home .wt-authority-item + #home .wt-authority-item::before {
    top: 0;
    left: 50%;
    width: 60%;
    height: 1px;
    transform: translateX(-50%);
  }
  #home .wt-authority-logo { height: 32px; margin-bottom: 12px; }
  #home .wt-authority-logo img { max-width: 120px; max-height: 32px; }
  #home .wt-authority-desc { max-width: 30em; font-size: 13px !important; line-height: 1.7 !important; }
}

@media (max-width: 480px) {
  #home .wt-authority-item { padding: 22px 16px; }
}