/* Xizhi reference visual pass. Loaded last, keep content/templates intact. */
:root {
  --ink: #0f0f0f;
  --ink-2: #050608;
  --ink-3: #172f43;
  --heading: #222832;
  --text: #555f68;
  --muted: #8b949c;
  --teal: #264a66;
  --teal-deep: #18364c;
  --glow: #86a9bf;
  --line: #e6e8ea;
  --paper: #ffffff;
  --clinic: #f3f4f5;
  --r: 6px;
  --shadow: 0 18px 42px -34px rgba(18, 30, 42, .42);
  --shadow-hi: 0 26px 58px -38px rgba(18, 30, 42, .52);
  --font-sans: "HarmonyOS Sans SC", "MiSans", "Alibaba PuHuiTi 3.0", "Source Han Sans SC", "Noto Sans CJK SC", "PingFang SC", "Microsoft YaHei UI", "Microsoft YaHei", system-ui, sans-serif;
  --font-display: "MiSans", "HarmonyOS Sans SC", "Alibaba PuHuiTi 3.0", "Source Han Sans SC", "PingFang SC", system-ui, sans-serif;
}

html,
body {
  background: #fff;
}

body {
  color: var(--text);
  font-size: 15.5px;
  line-height: 1.82;
}

.wrap {
  max-width: 1600px;
  padding-left: clamp(28px, 4.6vw, 88px);
  padding-right: clamp(28px, 4.6vw, 88px);
}

header {
  background: rgba(255, 255, 255, .96);
  border-bottom: 1px solid rgba(16, 24, 32, .08);
  backdrop-filter: blur(12px);
}

header .bar {
  height: 90px;
}

header.scrolled {
  background: rgba(255, 255, 255, .98);
  box-shadow: 0 12px 34px -30px rgba(16, 24, 32, .5);
}

body.has-dark-hero header:not(.scrolled),
header:not(.scrolled) {
  background: rgba(255, 255, 255, .96);
  border-bottom-color: rgba(16, 24, 32, .08);
}

body.has-dark-hero header:not(.scrolled) .logo,
body.has-dark-hero header:not(.scrolled) nav.menu a,
header:not(.scrolled) .logo,
header:not(.scrolled) nav.menu a {
  color: #222832;
}

.logo {
  font-size: 23px;
  font-weight: 700;
}

.logo .mark,
body.has-dark-hero header:not(.scrolled) .logo .mark,
header:not(.scrolled) .logo .mark {
  width: 42px;
  height: 42px;
  border-radius: 2px;
  background: #264a66;
}

nav.menu {
  gap: 48px;
}

nav.menu a {
  color: #222832;
  font-size: 16px;
  font-weight: 520;
}

nav.menu a::after {
  bottom: -12px;
  height: 3px;
  background: #264a66;
}

.nav-cta,
.btn-primary {
  border-radius: 2px;
  background: #264a66;
  color: #fff;
  box-shadow: none;
}

.nav-cta {
  padding: 13px 28px;
}

.btn {
  border-radius: 2px;
  min-height: 46px;
  padding: 13px 28px;
  font-weight: 620;
}

.btn-primary:hover,
.nav-cta:hover {
  background: #18364c;
  box-shadow: none;
  transform: translateY(-2px);
}

.btn-line,
.btn-ghost {
  border: 1px solid #264a66;
  background: transparent;
  color: #264a66;
  box-shadow: none;
  backdrop-filter: none;
}

.btn-line:hover,
.btn-ghost:hover {
  background: rgba(38, 74, 102, .08);
  color: #18364c;
  transform: translateY(-2px);
}

.eyebrow {
  gap: 12px;
  color: #264a66;
  font-size: 12px;
  font-weight: 700;
}

.eyebrow path {
  stroke: #264a66;
}

.sec-title {
  margin-top: 16px;
  color: #202832;
  font-size: clamp(30px, 3vw, 44px);
  line-height: 1.2;
}

.sec-sub {
  max-width: 620px;
  color: #7d8790;
}

section.block {
  padding: 92px 0;
}

.sec-head {
  margin-bottom: 44px;
}

.card,
.prod,
.news-card,
.news-list-card,
.video-card,
.product-media-panel,
.product-summary-panel,
.product-detail-main,
.product-side-card,
.news-detail-article,
.contact-card,
.acard,
.pillar-row,
.empty-state {
  border-radius: 4px;
  border-color: var(--line);
  box-shadow: var(--shadow);
}

.card::before,
.prod::before {
  display: none;
}

.card:hover,
.prod:hover,
.news-card:hover,
.news-list-card:hover,
.pillar-row:hover,
.acard:hover {
  border-color: rgba(38, 74, 102, .28);
  box-shadow: var(--shadow-hi);
  transform: translateY(-6px);
}

.page-hero {
  min-height: 590px;
  display: grid;
  align-items: center;
  padding: 170px 0 88px;
  background: #111820;
}

.page-hero::before {
  inset: 0;
  filter: saturate(.96);
}

.page-hero::after {
  background: linear-gradient(180deg, rgba(5, 8, 12, .42), rgba(5, 8, 12, .56));
  background-size: auto;
}

.page-hero .wrap,
.news-hero .wrap {
  text-align: center;
}

.page-hero .crumb,
.news-hero .crumb {
  justify-content: center;
}

.page-hero .eyebrow {
  color: rgba(255, 255, 255, .82);
}

.page-hero .eyebrow path {
  stroke: rgba(255, 255, 255, .82);
}

.page-hero h1,
.page-hero .hero-title {
  margin-top: 14px;
  font-size: clamp(36px, 4.2vw, 58px);
  font-weight: 720;
  color: #fff;
}

.page-hero p.lead {
  max-width: 720px;
  margin: 18px auto 0;
  color: rgba(255, 255, 255, .82);
}

.crumb {
  margin-bottom: 18px;
  color: rgba(255, 255, 255, .66);
}

.cat-tabs {
  justify-content: center;
  gap: 8px;
  margin-bottom: 42px;
}

.cat-tabs a {
  min-width: 108px;
  padding: 10px 18px;
  border-radius: 2px;
  background: #fff;
  color: #56616a;
  text-align: center;
}

.cat-tabs a:hover,
.cat-tabs a.active {
  border-color: #264a66;
  background: #264a66;
  color: #fff;
  box-shadow: none;
}

.prod-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px 24px;
}

.prod {
  background: #fff;
}

.prod .pimg {
  height: clamp(220px, 15vw, 288px);
  padding: 26px 28px;
  background: #f3f4f5;
}

.prod .pimg img {
  width: 100%;
  height: 100%;
  max-height: none;
  max-width: none;
  object-fit: contain;
  transform: none !important;
}

.prod .pbody,
.prod .prod-label {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 190px;
  padding: 22px 22px 24px;
  border-top: 1px solid var(--line);
  background: #fff;
}

.prod h4,
.prod .prod-label h4 {
  min-height: auto;
  color: #222832;
  font-size: 16px;
  font-weight: 680;
  line-height: 1.55;
}

.prod p {
  margin-top: 10px;
  color: #7d8790;
  font-size: 13.5px;
  line-height: 1.75;
}

.prod .more {
  width: auto;
  height: auto;
  margin-top: auto;
  padding-top: 16px;
  border-radius: 0;
  background: transparent;
  color: #264a66;
  font-size: 13.5px;
  font-weight: 700;
}

.prod:hover .more {
  background: transparent;
  color: #18364c;
  gap: 12px;
  transform: none;
}

.news-section,
#products,
#tech,
#contact,
.stats-band,
.product-detail-shell,
.news-detail-shell {
  background: #f3f4f5;
}

.news-list-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px 24px;
}

.news-list-card {
  border-radius: 4px;
  background: #fff;
}

.news-list-card .nimg {
  height: 220px;
  background: #f3f4f5;
}

.news-list-card .nbody {
  padding: 22px 22px 24px;
}

.news-list-card h4 {
  color: #222832;
  font-size: 16px;
  line-height: 1.65;
}

.news-list-card .more {
  color: #264a66;
}

.news-list-card .more::after {
  background: #264a66;
}

.hero {
  min-height: 960px;
  align-items: center;
  padding-top: 90px;
}

.hero-bg {
  transform: scale(1.03);
}

.hero-bg::after {
  background: linear-gradient(90deg, rgba(8, 12, 18, .68) 0%, rgba(8, 12, 18, .42) 46%, rgba(8, 12, 18, .18) 100%);
}

.hero-grid,
.hero-ruler,
.scrolldown {
  display: none;
}

.hero-copy {
  max-width: 820px;
  margin-left: 0;
  text-align: left;
}

.hero .eyebrow,
.hero .eyebrow path {
  color: rgba(255, 255, 255, .86);
  stroke: rgba(255, 255, 255, .86);
}

.hero h1 {
  margin-top: 18px;
  font-size: clamp(56px, 5.2vw, 92px);
  line-height: 1.14;
  font-weight: 760;
}

.hero h1 .hl {
  color: #fff;
  background: none;
}

.hero p.lead {
  max-width: 620px;
  margin-left: 0;
  color: rgba(255, 255, 255, .86);
  font-size: 18px;
}

.hero .cta-row {
  justify-content: flex-start;
}

.stats-band {
  border: 0;
}

.stats-band::before,
#about::before,
.about-band::before,
.about-band::after,
#about::after,
.contact-card::after {
  display: none;
}

.stat b,
.acard b {
  color: #264a66;
}

.pillar-row {
  grid-template-columns: 220px 280px 1fr;
  background: #fff;
}

.pr-ico,
.pillar .ico {
  width: 42px;
  height: 42px;
  border-radius: 2px;
  background: #264a66;
  box-shadow: none;
}

.pr-img,
.pillar .ph {
  border-radius: 4px;
}

#about,
.about-band {
  background: #fff;
  color: var(--text);
}

.about-band h2,
#about h2 {
  color: #222832;
}

.about-band p.intro,
#about p.intro {
  color: #59646d;
}

.contact-card {
  grid-template-columns: 1.05fr .95fr;
  background: #0f0f0f;
  color: #fff;
}

.contact-card .btn-primary {
  background: #fff;
  color: #0f0f0f;
}

footer {
  background: #0f0f0f;
  color: rgba(255, 255, 255, .62);
}

.foot-grid {
  border-bottom-color: rgba(255, 255, 255, .12);
}

.foot-grid a:hover {
  color: #fff;
}

.product-breadcrumb-band {
  background: #fff;
}

.product-detail-shell {
  padding: 56px 0 96px;
}

.product-detail-overview {
  grid-template-columns: minmax(0, 1.06fr) minmax(340px, .78fr);
  gap: 34px;
}

.product-media-main {
  min-height: clamp(420px, 34vw, 540px);
  background: #f3f4f5;
}

.product-summary-panel {
  padding: clamp(30px, 3.4vw, 48px);
}

.product-summary-panel::before {
  display: none;
}

.product-summary-head::after,
.news-detail-head::after {
  background: #264a66;
}

.product-summary-panel h2 {
  color: #222832;
  font-size: clamp(28px, 2.8vw, 40px);
}

.product-published::before,
.news-detail-date::before {
  background: #264a66;
  box-shadow: 0 0 0 4px rgba(38, 74, 102, .1);
}

.product-intro,
.product-summary-meta {
  border-radius: 4px;
  background: #f7f8f9;
}

.product-actions .btn {
  width: 148px;
  border-radius: 2px;
}

.product-detail-grid {
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 30px;
}

.product-detail-main,
.product-side-card {
  background: #fff;
}

.product-feature-main::before {
  background: #264a66;
}

.product-media-caption {
  border-color: rgba(16, 24, 32, .28);
  border-radius: 2px;
}

.product-carousel-thumb.is-active {
  border-color: #264a66;
}

.product-carousel-btn:hover {
  color: #264a66;
}

.article-wrap {
  max-width: 1120px;
}

.news-detail-article {
  padding: clamp(36px, 5vw, 64px);
}

.news-detail-head h1 {
  max-width: 920px;
  color: #222832;
  font-size: clamp(30px, 3vw, 44px);
}

.news-detail-content {
  max-width: 900px;
}

.news-detail-content img {
  border-radius: 4px;
}

.form-field input,
.form-field textarea {
  border-radius: 4px;
  background: #fff;
}

.empty-state {
  background: #fff;
}

@media (max-width: 1180px) {
  .prod-grid,
  .news-list-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .pillar-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 980px) {
  header .bar {
    display: flex;
    height: 90px;
  }

  .hero {
    min-height: 820px;
  }

  .hero-copy {
    max-width: 720px;
  }

  .prod-grid,
  .news-list-grid,
  .video-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .product-detail-overview,
  .product-detail-grid,
  .contact-card {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .wrap {
    padding-left: 18px;
    padding-right: 18px;
  }

  section.block {
    padding: 68px 0;
  }

  .page-hero {
    min-height: 430px;
    padding: 120px 0 54px;
  }

  .hero {
    min-height: 720px;
  }

  .hero h1 {
    font-size: 42px;
  }

  .prod-grid,
  .news-list-grid,
  .video-grid {
    grid-template-columns: 1fr;
  }

  .prod .pimg,
  .news-list-card .nimg {
    height: 240px;
  }

  .cat-tabs {
    justify-content: flex-start;
  }

  .cat-tabs a {
    min-width: auto;
  }

  .product-actions {
    grid-template-columns: 1fr;
  }

  .product-actions .btn {
    width: 100%;
  }
}
/* Dimension corrections from the 1920px reference boards. */
.stats-band {
  background: #fff;
}

.post-type-archive-ht_product section.block,
.tax-ht_product_category section.block {
  padding-top: 100px !important;
}
/* Proportional desktop scaling based on the 1920px reference board. */
@media (min-width: 981px) {
  :root {
    --board-u: clamp(1px, 0.052083vw, 2px);
  }

  .wrap {
    max-width: calc(1600 * var(--board-u));
    padding-left: calc(88 * var(--board-u));
    padding-right: calc(88 * var(--board-u));
  }

  header .bar {
    height: calc(90 * var(--board-u));
  }

  .logo .mark,
  body.has-dark-hero header:not(.scrolled) .logo .mark,
  header:not(.scrolled) .logo .mark {
    width: calc(42 * var(--board-u));
    height: calc(42 * var(--board-u));
  }

  nav.menu {
    gap: calc(48 * var(--board-u));
  }

  .nav-cta {
    padding: calc(13 * var(--board-u)) calc(28 * var(--board-u));
  }

  .btn {
    min-height: calc(46 * var(--board-u));
    padding: calc(13 * var(--board-u)) calc(28 * var(--board-u));
  }

  section.block {
    padding-top: calc(92 * var(--board-u));
    padding-bottom: calc(92 * var(--board-u));
  }

  .page-hero {
    min-height: calc(590 * var(--board-u));
    padding-top: calc(170 * var(--board-u));
    padding-bottom: calc(88 * var(--board-u));
  }

  .hero {
    min-height: calc(960 * var(--board-u));
    padding-top: calc(90 * var(--board-u));
  }

  .stats-band {
    padding-top: calc(56 * var(--board-u));
    padding-bottom: calc(56 * var(--board-u));
  }

  .sec-head {
    margin-bottom: calc(44 * var(--board-u));
  }

  .cat-tabs {
    gap: calc(8 * var(--board-u));
    margin-bottom: calc(42 * var(--board-u));
  }

  .cat-tabs a {
    min-width: calc(108 * var(--board-u));
    padding: calc(10 * var(--board-u)) calc(18 * var(--board-u));
  }

  .prod-grid,
  .news-list-grid {
    gap: calc(28 * var(--board-u)) calc(24 * var(--board-u));
  }

  .prod .pimg {
    height: calc(288 * var(--board-u));
    padding: calc(26 * var(--board-u)) calc(28 * var(--board-u));
  }

  .prod .pbody,
  .prod .prod-label {
    min-height: calc(190 * var(--board-u));
    padding: calc(22 * var(--board-u)) calc(22 * var(--board-u)) calc(24 * var(--board-u));
  }

  .news-list-card .nimg {
    height: calc(220 * var(--board-u));
  }

  .news-list-card .nbody {
    padding: calc(22 * var(--board-u)) calc(22 * var(--board-u)) calc(24 * var(--board-u));
  }

  .product-detail-shell {
    padding-top: calc(56 * var(--board-u));
    padding-bottom: calc(96 * var(--board-u));
  }

  .product-detail-overview {
    gap: calc(34 * var(--board-u));
  }

  .product-media-main {
    min-height: calc(540 * var(--board-u));
  }

  .product-summary-panel {
    padding: calc(48 * var(--board-u));
  }

  .product-detail-grid {
    grid-template-columns: minmax(0, 1fr) calc(340 * var(--board-u));
    gap: calc(30 * var(--board-u));
    margin-top: calc(36 * var(--board-u));
  }

  .product-detail-main {
    padding: calc(56 * var(--board-u));
  }

  .product-side-card {
    padding: calc(34 * var(--board-u)) calc(30 * var(--board-u));
  }

  .news-detail-shell {
    padding-top: calc(64 * var(--board-u));
    padding-bottom: calc(96 * var(--board-u));
  }

  .article-wrap {
    max-width: calc(1120 * var(--board-u));
  }

  .news-detail-article {
    padding: calc(64 * var(--board-u));
  }

  .post-type-archive-ht_product section.block,
  .tax-ht_product_category section.block {
    padding-top: calc(100 * var(--board-u)) !important;
  }
}

@media (min-width: 2400px) {
  body { font-size: 18px; }
  .logo { font-size: 28px; }
  nav.menu a { font-size: 18px; }
  .nav-cta, .btn { font-size: 17px; }
  .eyebrow { font-size: 14px; }
  .hero h1 { font-size: 112px; }
  .page-hero h1, .page-hero .hero-title { font-size: 72px; }
  .sec-title { font-size: 58px; }
  .hero p.lead, .page-hero p.lead { font-size: 22px; }
  .prod h4, .prod .prod-label h4, .news-list-card h4 { font-size: 20px; }
  .prod p { font-size: 17px; }
  .product-summary-panel h2 { font-size: 54px; }
  .detail-section-head h2 { font-size: 48px; }
  .news-detail-head h1 { font-size: 58px; }
}

@media (min-width: 3400px) {
  body { font-size: 22px; }
  .logo { font-size: 38px; }
  nav.menu a { font-size: 24px; }
  .nav-cta, .btn { font-size: 22px; }
  .eyebrow { font-size: 18px; }
  .hero h1 { font-size: 168px; }
  .page-hero h1, .page-hero .hero-title { font-size: 104px; }
  .sec-title { font-size: 82px; }
  .hero p.lead, .page-hero p.lead { font-size: 30px; }
  .prod h4, .prod .prod-label h4, .news-list-card h4 { font-size: 28px; }
  .prod p { font-size: 23px; }
  .product-summary-panel h2 { font-size: 78px; }
  .detail-section-head h2 { font-size: 68px; }
  .news-detail-head h1 { font-size: 82px; }
}
/* Keep text columns proportional on large desktop boards. */
@media (min-width: 981px) {
  .hero-copy {
    max-width: calc(820 * var(--board-u));
  }

  .hero p.lead,
  .page-hero p.lead,
  .sec-sub {
    max-width: calc(720 * var(--board-u));
  }

  .product-content-body,
  .news-detail-content,
  .news-detail-head h1 {
    max-width: calc(900 * var(--board-u));
  }
}
/* Product layout pass matching the reference boards. */
.pimg {
  position: relative;
}

.pintro {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px;
  background: rgba(15, 15, 15, .72);
  color: #fff;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .28s var(--ease), transform .28s var(--ease);
  pointer-events: none;
}

.pintro p {
  max-width: 88%;
  margin: 0;
  color: rgba(255, 255, 255, .9);
  font-size: 14px;
  line-height: 1.85;
  text-align: center;
}

.prod:hover .pintro {
  opacity: 1;
  transform: translateY(0);
}

.home-products-section {
  background: #fff;
}

.home-products-section .sec-head {
  text-align: center;
}

.home-products-section .sec-sub {
  margin-left: auto;
  margin-right: auto;
}

.home-products-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 1200px;
  margin: 0 auto;
}

.home-products-grid .prod {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.home-products-grid .prod:hover {
  transform: translateY(-4px);
  box-shadow: none;
}

.home-products-grid .prod .pimg {
  height: 300px;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: #f3f4f5;
  overflow: hidden;
}

.home-products-grid .prod .pbody {
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.home-products-grid .prod .pbody p,
.home-products-grid .prod .more {
  display: none;
}

.home-products-grid .prod h4 {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 58px;
  margin-top: 16px;
  padding: 0 18px;
  background: #0f0f0f;
  color: #fff;
  font-size: 16px;
  line-height: 1.35;
  text-align: center;
  transition: background .24s var(--ease);
}

.home-products-grid .prod:hover h4 {
  background: #264a66;
}

.product-archive-shell {
  background: #fff;
}

.product-catalog-layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 54px;
  align-items: start;
}

.product-category-side {
  position: sticky;
  top: 126px;
  border-top: 3px solid #0f0f0f;
  background: #fff;
}

.product-category-side h3 {
  margin: 0;
  padding: 22px 0 18px;
  color: #222832;
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1.25;
}

.product-category-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--line);
}

.product-category-list a {
  display: flex;
  align-items: center;
  min-height: 54px;
  padding: 14px 18px 14px 0;
  border-bottom: 1px solid var(--line);
  color: #5d6871;
  font-size: 15px;
  line-height: 1.45;
  transition: color .2s var(--ease), padding-left .2s var(--ease), background .2s var(--ease);
}

.product-category-list a:hover,
.product-category-list a.active {
  padding-left: 16px;
  background: #f3f4f5;
  color: #0f0f0f;
}

/* 大类 / 子类两级：子类默认折起，进到本大类时展开 */
.product-category-list .pcs-top {
  font-weight: 600;
  color: #24313c;
}

.product-category-list .pcs-children {
  display: none;
}

.product-category-list .pcs-children.is-open {
  display: block;
}

.product-category-list .pcs-child {
  padding-left: 26px;
  min-height: 46px;
  font-size: 14px;
}

.product-category-list .pcs-child:hover,
.product-category-list .pcs-child.active {
  padding-left: 34px;
}

.product-catalog-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 34px 30px;
}

.product-catalog-grid .prod .pimg {
  height: 360px;
}

.product-catalog-grid .prod .pbody {
  min-height: 196px;
}

.product-catalog-grid .prod h4 {
  font-size: 18px;
}

.product-catalog-grid .prod .more {
  color: #264a66;
}

@media (min-width: 981px) {
  header .bar {
    grid-template-columns: minmax(calc(230 * var(--board-u)), .8fr) auto minmax(calc(150 * var(--board-u)), .8fr);
    column-gap: calc(26 * var(--board-u));
  }

  .logo {
    white-space: nowrap;
  }

  nav.menu {
    gap: calc(34 * var(--board-u));
  }

  .home-products-grid {
    max-width: calc(1200 * var(--board-u));
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: calc(34 * var(--board-u));
  }

  .home-products-grid .prod .pimg {
    height: calc(300 * var(--board-u));
  }

  .home-products-grid .prod h4 {
    min-height: calc(58 * var(--board-u));
    margin-top: calc(16 * var(--board-u));
  }

  .product-catalog-layout {
    grid-template-columns: calc(260 * var(--board-u)) minmax(0, 1fr);
    gap: calc(54 * var(--board-u));
  }

  .product-category-side {
    top: calc(126 * var(--board-u));
  }

  .product-catalog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: calc(34 * var(--board-u)) calc(30 * var(--board-u));
  }

  .product-catalog-grid .prod .pimg {
    height: calc(360 * var(--board-u));
  }

  .product-catalog-grid .prod .pbody {
    min-height: calc(196 * var(--board-u));
  }
}

@media (min-width: 2400px) {
  .home-products-grid .prod h4 { font-size: 21px; }
  .pintro p { font-size: 18px; }
  .product-category-side h3 { font-size: 28px; }
  .product-category-list a { font-size: 18px; }
  .product-catalog-grid .prod h4 { font-size: 22px; }
}

@media (min-width: 3400px) {
  .logo { font-size: 34px; }
  nav.menu a { font-size: 22px; }
  .nav-cta, .btn { font-size: 20px; }
  .home-products-grid .prod h4 { font-size: 30px; }
  .pintro p { font-size: 24px; }
  .product-category-side h3 { font-size: 38px; }
  .product-category-list a { font-size: 24px; }
  .product-catalog-grid .prod h4 { font-size: 32px; }
}

@media (max-width: 980px) {
  .home-products-grid,
  .product-catalog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .product-catalog-layout {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .product-category-side {
    position: static;
  }

  .product-category-list {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
    border-top: 0;
  }

  .product-category-list a {
    min-height: 42px;
    padding: 9px 14px;
    border: 1px solid var(--line);
  }

  .product-category-list a:hover,
  .product-category-list a.active {
    padding-left: 14px;
  }
}

@media (max-width: 620px) {
  .home-products-grid,
  .product-catalog-grid {
    grid-template-columns: 1fr;
  }

  .home-products-grid .prod .pimg,
  .product-catalog-grid .prod .pimg {
    height: 260px;
  }
}
/* Header proportion pass based on the Softmimics reference. */
@media (min-width: 981px) {
  header .wrap.bar {
    max-width: none;
    width: 100%;
    padding-left: clamp(34px, 3.1vw, calc(58 * var(--board-u)));
    padding-right: clamp(34px, 3.1vw, calc(58 * var(--board-u)));
    grid-template-columns: auto 1fr auto;
    column-gap: clamp(44px, 4vw, calc(88 * var(--board-u)));
  }

  header .bar > nav.menu {
    justify-self: center;
  }

  .logo {
    gap: 12px;
    font-size: clamp(22px, 1.28vw, calc(30 * var(--board-u)));
  }

  .logo .mark,
  body.has-dark-hero header:not(.scrolled) .logo .mark,
  header:not(.scrolled) .logo .mark {
    width: clamp(44px, 2.65vw, calc(56 * var(--board-u)));
    height: clamp(44px, 2.65vw, calc(56 * var(--board-u)));
  }

  nav.menu {
    gap: clamp(36px, 3vw, calc(70 * var(--board-u)));
  }

  nav.menu a {
    font-size: clamp(17px, 1.02vw, calc(24 * var(--board-u)));
    font-weight: 560;
    white-space: nowrap;
  }

  .nav-cta {
    min-width: clamp(154px, 9.2vw, calc(220 * var(--board-u)));
    min-height: clamp(48px, 2.72vw, calc(62 * var(--board-u)));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: clamp(10px, .65vw, calc(14 * var(--board-u)));
    padding: 0 clamp(22px, 1.55vw, calc(36 * var(--board-u)));
    border-radius: clamp(8px, .55vw, calc(12 * var(--board-u)));
    font-size: clamp(16px, .95vw, calc(22 * var(--board-u)));
    line-height: 1;
  }

  .nav-cta svg {
    width: clamp(18px, 1.08vw, calc(24 * var(--board-u)));
    height: clamp(18px, 1.08vw, calc(24 * var(--board-u)));
    flex: 0 0 auto;
    fill: currentColor;
  }
}

@media (min-width: 981px) and (max-width: 1480px) {
  header .wrap.bar {
    padding-left: 42px;
    padding-right: 42px;
    column-gap: 30px;
  }

  nav.menu {
    gap: 24px;
  }

  nav.menu a {
    font-size: 15.5px;
  }

  .logo {
    font-size: 20px;
  }

  .logo .mark,
  body.has-dark-hero header:not(.scrolled) .logo .mark,
  header:not(.scrolled) .logo .mark {
    width: 40px;
    height: 40px;
  }

  .nav-cta {
    min-width: 140px;
    min-height: 48px;
    padding: 0 20px;
    font-size: 15px;
  }
}

@media (max-width: 980px) {
  .nav-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: 8px;
  }

  .nav-cta svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
  }
}
/* Softer header typography and aligned eyebrow icon. */
header .logo,
header nav.menu a,
header .nav-cta {
  font-family: "PingFang SC", "HarmonyOS Sans SC", "MiSans", "Microsoft YaHei UI", "Microsoft YaHei", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

header nav.menu a {
  font-weight: 400;
  letter-spacing: .01em;
}

header .nav-cta {
  font-weight: 460;
  letter-spacing: .01em;
}

header .logo {
  font-weight: 560;
}

.eyebrow {
  align-items: center;
  line-height: 1;
}

.eyebrow svg {
  flex: 0 0 auto;
  display: block;
  position: relative;
  top: -1px;
}

.page-hero .eyebrow svg {
  top: -1px;
}

@media (min-width: 981px) {
  nav.menu a {
    font-weight: 400;
  }

  .nav-cta {
    font-weight: 460;
  }
}
/* Slightly smaller header type after visual review. */
@media (min-width: 981px) {
  nav.menu a {
    font-size: clamp(15.5px, .9vw, calc(21 * var(--board-u)));
  }

  .nav-cta {
    font-size: clamp(14.5px, .84vw, calc(19 * var(--board-u)));
  }
}

@media (min-width: 981px) and (max-width: 1480px) {
  nav.menu a {
    font-size: 14.5px;
  }

  .nav-cta {
    font-size: 14px;
  }
}

@media (min-width: 3400px) {
  nav.menu a {
    font-size: 34px;
  }

  .nav-cta,
  .btn {
    font-size: 30px;
  }
}
/* Reference-style single hero CTA. */
.hero-more-btn {
  min-width: 190px;
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 0 24px 0 26px;
  border-radius: 6px;
  background: #264a66;
  color: #fff;
  font-family: "PingFang SC", "HarmonyOS Sans SC", "MiSans", system-ui, sans-serif;
  font-size: 16px;
  font-weight: 420;
  line-height: 1;
  box-shadow: 0 18px 36px -24px rgba(15, 31, 45, .5);
  transition: background .24s var(--ease), transform .24s var(--ease), box-shadow .24s var(--ease);
}

.hero-more-btn span {
  white-space: nowrap;
}

.hero-more-btn i {
  position: relative;
  width: 34px;
  height: 24px;
  border-left: 1px solid rgba(255, 255, 255, .32);
  flex: 0 0 auto;
}

.hero-more-btn:hover {
  background: #1e425d;
  transform: translateY(-2px);
  box-shadow: 0 22px 42px -26px rgba(15, 31, 45, .62);
}

@media (min-width: 981px) {
  .hero-more-btn {
    min-width: calc(190 * var(--board-u));
    min-height: calc(52 * var(--board-u));
    gap: calc(18 * var(--board-u));
    padding: 0 calc(24 * var(--board-u)) 0 calc(26 * var(--board-u));
    border-radius: calc(6 * var(--board-u));
    font-size: clamp(16px, .84vw, calc(18 * var(--board-u)));
  }

  .hero-more-btn i {
    width: calc(34 * var(--board-u));
    height: calc(24 * var(--board-u));
  }
}

@media (min-width: 3400px) {
  .hero-more-btn {
    font-size: 30px;
  }
}

@media (max-width: 620px) {
  .hero-more-btn {
    min-width: 170px;
    min-height: 48px;
    font-size: 15px;
  }
}
.hero-more-btn i svg {
  position: absolute;
  right: 0;
  top: 50%;
  width: 22px;
  height: 22px;
  transform: translateY(-50%);
  overflow: visible;
}

.hero-more-btn i svg path {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (min-width: 981px) {
  .hero-more-btn i svg {
    width: calc(22 * var(--board-u));
    height: calc(22 * var(--board-u));
  }
}
/* Intelligent blood flow platform style tech cards. */
#tech {
  background: #f3f4f5;
}

#tech .wrap {
  position: relative;
}

#tech .sec-head {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

#tech .sec-sub {
  margin-left: auto;
  margin-right: auto;
}

.tech-platform-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px;
}

.tech-platform-grid .pillar-row {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  overflow: hidden;
  background: #fff;
  border: 0;
  border-radius: 4px;
  box-shadow: none;
}

.tech-platform-grid .pillar-row:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 58px -40px rgba(18, 30, 42, .52);
}

.tech-platform-grid .pr-img {
  position: relative;
  order: 0;
  width: 100%;
  height: 300px;
  border-radius: 0;
  overflow: hidden;
  background: #dfe4e7;
}

.tech-platform-grid .pr-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 15, 15, 0) 45%, rgba(15, 15, 15, .48) 100%);
  pointer-events: none;
}

.tech-platform-grid .pr-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.96);
  transition: transform .45s var(--ease);
}

.tech-platform-grid .pillar-row:hover .pr-img img {
  transform: scale(1.045);
}

.pr-index {
  position: absolute;
  left: 24px;
  bottom: 18px;
  z-index: 2;
  color: #fff;
  font-family: var(--font-data);
  font-size: 34px;
  font-weight: 700;
  line-height: 1;
}

.tech-platform-grid .pr-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 28px 28px 0;
}

.tech-platform-grid .pr-num {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #264a66;
  color: #fff;
  box-shadow: none;
}

.tech-platform-grid .pr-num svg {
  width: 24px;
  height: 24px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tech-platform-grid h3 {
  margin: 0;
  color: #222832;
  font-size: 20px;
  font-weight: 560;
  line-height: 1.35;
}

.tech-platform-grid .pillar-row > p {
  padding: 16px 28px 30px;
  margin: 0;
  color: #66717a;
  font-size: 14.5px;
  line-height: 1.85;
}

@media (min-width: 981px) {
  #tech .sec-head {
    max-width: calc(760 * var(--board-u));
  }

  .tech-platform-grid {
    gap: calc(30 * var(--board-u));
  }

  .tech-platform-grid .pr-img {
    height: calc(300 * var(--board-u));
  }

  .pr-index {
    left: calc(24 * var(--board-u));
    bottom: calc(18 * var(--board-u));
    font-size: calc(34 * var(--board-u));
  }

  .tech-platform-grid .pr-head {
    gap: calc(14 * var(--board-u));
    padding: calc(28 * var(--board-u)) calc(28 * var(--board-u)) 0;
  }

  .tech-platform-grid .pr-num {
    width: calc(46 * var(--board-u));
    height: calc(46 * var(--board-u));
  }

  .tech-platform-grid .pr-num svg {
    width: calc(24 * var(--board-u));
    height: calc(24 * var(--board-u));
  }

  .tech-platform-grid .pillar-row > p {
    padding: calc(16 * var(--board-u)) calc(28 * var(--board-u)) calc(30 * var(--board-u));
  }
}

@media (min-width: 2400px) {
  .tech-platform-grid h3 { font-size: 26px; }
  .tech-platform-grid .pillar-row > p { font-size: 18px; }
}

@media (min-width: 3400px) {
  .tech-platform-grid h3 { font-size: 36px; }
  .tech-platform-grid .pillar-row > p { font-size: 24px; }
}

@media (max-width: 980px) {
  .tech-platform-grid {
    grid-template-columns: 1fr;
  }

  .tech-platform-grid .pr-img {
    height: 260px;
  }
}


/* Homepage technology image hover descriptions. */
.tech-platform-grid .pr-img::before {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 22px;
  z-index: 4;
  padding: 14px 16px;
  border-radius: 6px;
  background: rgba(255, 255, 255, .94);
  color: #24313b;
  font-family: "HarmonyOS Sans SC", "PingFang SC", "MiSans", system-ui, sans-serif;
  font-size: 14.5px;
  font-weight: 340;
  line-height: 1.65;
  box-shadow: 0 16px 34px -24px rgba(10, 28, 40, .42);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .22s ease, transform .22s ease;
  pointer-events: none;
}

.tech-platform-grid .pillar-row:nth-child(1) .pr-img::before {
  content: "\57FA \4E8E  CT / MRA / CTA \6570 \636E \4E09 \7EF4 \91CD \5EFA \FF0C \590D \73B0 \4EBA \4F53 \7ED3 \6784 \7684 \7A7A \95F4 \8D70 \5F62 \4E0E \7EC6 \8282 \5C3A \5BF8 \3002 ";
}

.tech-platform-grid .pillar-row:nth-child(2) .pr-img::before {
  content: "\4EE5 \900F \660E \5F39 \6027 \6750 \6599 \4E0E \4E13 \5229 \5DE5 \827A \8FD8 \539F \771F \5B9E \624B \672F \89E6 \611F \FF0C \652F \6301 \53CD \590D \8BAD \7EC3 \4E0E \5668 \68B0 \6D4B \8BD5 \3002 ";
}

.tech-platform-grid .pillar-row:nth-child(3) .pr-img::before {
  content: "\7ED3 \5408 \67D4 \6027 \4F20 \611F \4E0E \6559 \5B66 \7BA1 \7406 \8F6F \4EF6 \FF0C \8BB0 \5F55 \8BAD \7EC3 \8FC7 \7A0B \FF0C \8F85 \52A9 \6559 \5B66 \8BC4 \4F30 \548C \80FD \529B \63D0 \5347 \3002 ";
}

.tech-platform-grid .pr-img:hover::before,
.tech-platform-grid .pr-img:focus-within::before {
  opacity: 1;
  transform: translateY(0);
}

.tech-platform-grid .pr-img:hover::after,
.tech-platform-grid .pr-img:focus-within::after {
  background: linear-gradient(180deg, rgba(15, 15, 15, .08) 0%, rgba(15, 15, 15, .55) 100%);
}

@media (min-width: 981px) {
  .tech-platform-grid .pr-img::before {
    left: calc(22 * var(--board-u));
    right: calc(22 * var(--board-u));
    bottom: calc(22 * var(--board-u));
    padding: calc(14 * var(--board-u)) calc(16 * var(--board-u));
    border-radius: calc(6 * var(--board-u));
    font-size: clamp(14.5px, .76vw, calc(16 * var(--board-u)));
  }
}

@media (min-width: 2400px) {
  .tech-platform-grid .pr-img::before {
    font-size: 18px;
  }
}

@media (min-width: 3400px) {
  .tech-platform-grid .pr-img::before {
    font-size: 25px;
  }
}

@media (max-width: 620px) {
  .tech-platform-grid .pr-img::before {
    left: 14px;
    right: 14px;
    bottom: 14px;
    padding: 12px 13px;
    font-size: 13.5px;
  }
}

/* Homepage product card ratio matching the provided reference. */
.home-products-section .sec-head {
  margin-bottom: 40px;
}

.home-products-section .sec-sub {
  display: none;
}

.home-products-grid {
  width: 100%;
  max-width: none;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px;
  margin: 0;
}

.home-products-grid .prod {
  display: flex;
  flex-direction: column;
  min-height: auto;
  padding: 20px;
  border: 1px solid #e4e8eb;
  border-radius: 14px;
  background: #fff;
  box-shadow: none;
  overflow: hidden;
}

.home-products-grid .prod:hover {
  border-color: #d7dee3;
  transform: translateY(-4px);
  box-shadow: 0 24px 54px -42px rgba(15, 31, 45, .45);
}

.home-products-grid .prod .pimg {
  height: 260px;
  padding: 22px 20px 10px;
  border: 0;
  border-radius: 10px 10px 4px 4px;
  background: #fff;
}

.home-products-grid .prod .pimg img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.home-products-grid .prod .pbody {
  min-height: auto;
  padding: 0;
  border: 0;
  background: transparent;
}

.home-products-grid .prod h4 {
  width: 100%;
  min-height: 64px;
  margin: 18px 0 0;
  padding: 0 18px;
  border-radius: 8px;
  background: #264a66;
  color: #fff;
  font-family: "PingFang SC", "HarmonyOS Sans SC", "MiSans", system-ui, sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.35;
  text-align: center;
}

.home-products-grid .prod:hover h4 {
  background: #1f425c;
}

@media (min-width: 981px) {
  .home-products-section .sec-head {
    margin-bottom: calc(40 * var(--board-u));
  }

  .home-products-grid {
    max-width: none;
    gap: calc(30 * var(--board-u));
  }

  .home-products-grid .prod {
    padding: calc(20 * var(--board-u));
    border-radius: calc(14 * var(--board-u));
  }

  .home-products-grid .prod .pimg {
    height: calc(260 * var(--board-u));
    padding: calc(22 * var(--board-u)) calc(20 * var(--board-u)) calc(10 * var(--board-u));
    border-radius: calc(10 * var(--board-u)) calc(10 * var(--board-u)) calc(4 * var(--board-u)) calc(4 * var(--board-u));
  }

  .home-products-grid .prod h4 {
    min-height: calc(64 * var(--board-u));
    margin-top: calc(18 * var(--board-u));
    padding: 0 calc(18 * var(--board-u));
    border-radius: calc(8 * var(--board-u));
    font-size: clamp(17px, .9vw, calc(19 * var(--board-u)));
  }
}

@media (min-width: 2400px) {
  .home-products-grid .prod h4 {
    font-size: 22px;
  }
}

@media (min-width: 3400px) {
  .home-products-grid .prod h4 {
    font-size: 32px;
  }
}

@media (max-width: 620px) {
  .home-products-grid .prod {
    padding: 16px;
    border-radius: 12px;
  }

  .home-products-grid .prod .pimg {
    height: 245px;
    padding: 18px 14px 8px;
  }

  .home-products-grid .prod h4 {
    min-height: 58px;
    margin-top: 14px;
    border-radius: 8px;
    font-size: 16px;
  }
}
/* Final mobile correction for homepage product cards. */
@media (max-width: 620px) {
  .home-products-grid {
    grid-template-columns: 1fr;
  }
}


/* Product detail top layout matching the provided reference. */
.product-detail-shell {
  background: #f1f3f4;
  padding: 72px 0 110px;
}

.product-detail-overview {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(420px, .95fr);
  gap: clamp(58px, 5vw, 86px);
  align-items: center;
}

.product-media-panel {
  padding: 22px;
  border: 0;
  border-radius: 18px;
  background: #fff;
  box-shadow: none;
  overflow: hidden;
}

.product-media-carousel {
  display: flex;
  flex-direction: column;
}

.product-media-main {
  min-height: 0;
  aspect-ratio: 1.52 / 1;
  padding: 0;
  border-radius: 10px;
  background: #f8f8f9;
}

.product-media-slide {
  padding: 0;
}

.product-media-slide img {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: contain;
}

.product-media-zoom {
  right: 0;
  bottom: 0;
  width: 34px;
  height: 34px;
  background: rgba(154, 162, 169, .7);
}

.product-carousel-strip {
  display: block;
  padding: 22px 0 0;
  background: #fff;
}

.product-carousel-btn {
  display: none;
}

.product-carousel-thumbs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  overflow: visible;
  padding: 0;
}

.product-carousel-thumb {
  width: 100%;
  height: 80px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 8px;
  background: #f7f8f9;
  overflow: hidden;
}

.product-carousel-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-carousel-thumb.is-active {
  border-color: #d9e4ea;
}

.product-summary-panel {
  min-height: auto;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

.product-summary-title-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 48px;
  gap: 22px;
  align-items: center;
  margin-bottom: 28px;
}

.product-summary-title-row h2,
.product-summary-panel h2 {
  margin: 0;
  color: #2d3035;
  font-family: "HarmonyOS Sans SC", "PingFang SC", "MiSans", system-ui, sans-serif;
  font-size: clamp(42px, 3.15vw, 58px);
  font-weight: 520;
  line-height: 1.28;
  letter-spacing: 0;
}

.product-summary-arrow {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #fff;
  color: #8a8f94;
  box-shadow: 0 10px 24px rgba(22, 30, 38, .14);
  transition: color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.product-summary-arrow:hover {
  color: #285676;
  transform: translateX(2px);
  box-shadow: 0 12px 28px rgba(22, 30, 38, .18);
}

.product-summary-arrow svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.product-spec-card {
  padding: 26px 28px;
  border-radius: 10px;
  background: #fff;
  box-shadow: none;
}

.product-spec-row {
  display: flex;
  align-items: baseline;
  gap: 14px;
  min-height: 32px;
  color: #6d7176;
  font-size: 17px;
  font-weight: 330;
  line-height: 1.45;
}

.product-spec-row span {
  flex: 0 0 auto;
  color: #30343a;
  font-weight: 520;
}

.product-spec-row strong {
  color: #73777c;
  font-weight: 340;
}

.product-spec-plain {
  color: #30343a;
  font-weight: 520;
}

.product-actions {
  display: flex;
  flex-wrap: wrap; /* 三个按钮，窄屏放不下就折行，别把右边的挤出去 */
  justify-content: flex-start;
  gap: 22px 18px;
  margin-top: 36px;
}

.product-actions .btn {
  width: auto;
  min-width: 172px;
  height: 56px;
  padding: 0 22px;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 360;
  gap: 12px;
}

.product-actions .btn svg {
  width: 19px;
  height: 19px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.product-actions .btn-primary svg path:first-child,
.product-actions .btn-primary svg circle {
  fill: currentColor;
  stroke: none;
}

.product-actions .btn-line {
  border: 1px solid #285676;
  background: transparent;
  color: #285676;
}

.product-share-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 34px;
  color: #777b80;
  font-size: 16px;
  font-weight: 330;
}

.product-share-row a,
.product-share-row button {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: #dce5eb;
  color: #285676;
  font: inherit;
  font-size: 15px;
  font-weight: 520;
  text-decoration: none;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}

.product-share-row a:hover,
.product-share-row button:hover,
.product-share-row button.copied {
  background: #285676;
  color: #fff;
  transform: translateY(-2px);
}

.product-summary-head {
  display: none;
}


@media (min-width: 981px) {
  /* 主图栏收窄到内容区的 40%（文字栏 60%），比着 deweimed 产品页的分栏来的。
     老板嫌之前 1fr/.95fr 那版主图太占地方。图框比例保持 1.52 不动——
     参考站那边框是 1.15，照抄会给我们 1.5 比例的产品图上下各留一条空白。 */
  .product-detail-overview {
    grid-template-columns: minmax(0, .667fr) minmax(calc(420 * var(--board-u)), 1fr);
  }

  .product-media-panel {
    padding: calc(22 * var(--board-u));
    border-radius: calc(18 * var(--board-u));
  }

  .product-carousel-thumb {
    height: calc(80 * var(--board-u));
  }
}

@media (min-width: 2400px) {
  .product-spec-row,
  .product-share-row,
  .product-actions .btn {
    font-size: 20px;
  }
}

@media (min-width: 3400px) {
  .product-spec-row,
  .product-share-row,
  .product-actions .btn {
    font-size: 28px;
  }
}

@media (max-width: 980px) {
  .product-detail-shell {
    padding: 48px 0 82px;
  }

  .product-detail-overview {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .product-summary-title-row h2,
  .product-summary-panel h2 {
    font-size: clamp(32px, 8vw, 46px);
  }

  .product-actions {
    flex-wrap: wrap;
  }
}

@media (max-width: 620px) {
  .product-media-panel {
    padding: 12px;
    border-radius: 14px;
  }

  .product-carousel-thumbs {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
  }

  .product-carousel-thumb {
    height: 58px;
  }

  .product-summary-title-row {
    grid-template-columns: 1fr 42px;
    gap: 14px;
  }

  .product-summary-arrow {
    width: 42px;
    height: 42px;
  }

  .product-spec-card {
    padding: 22px 20px;
  }

  .product-spec-row {
    font-size: 15px;
  }

  .product-actions {
    gap: 12px;
    margin-top: 28px;
  }

  .product-actions .btn {
    min-width: 0;
    flex: 1 1 150px;
    height: 50px;
    padding: 0 14px;
    font-size: 14px;
  }
}


/* Keep original product summary text inside the new right-side card. */
.product-spec-card .product-published {
  display: block;
  margin: 0 0 16px;
  color: #777b80;
  font-size: 15px;
  font-weight: 330;
  line-height: 1.6;
}

.product-spec-card .product-intro {
  display: block;
  margin: 0 0 18px;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: #5f646a;
  font-size: 16px;
  font-weight: 330;
  line-height: 1.8;
}

.product-spec-card .product-summary-meta {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: #6d7176;
  font-size: 16px;
  line-height: 1.6;
}

.product-spec-card .product-summary-meta span {
  color: #30343a;
  font-weight: 520;
}

.product-spec-card .product-summary-meta strong {
  color: #73777c;
  font-weight: 340;
}

.product-summary-panel .product-actions .btn {
  justify-content: center;
}


/* Related products use the same image + button card style as the homepage. */
.related-products .prod-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px;
}

.related-products .prod {
  display: flex;
  flex-direction: column;
  min-height: auto;
  padding: 20px;
  border: 1px solid #e4e8eb;
  border-radius: 14px;
  background: #fff;
  box-shadow: none;
  overflow: hidden;
}

.related-products .prod:hover {
  border-color: #d7dee3;
  transform: translateY(-4px);
  box-shadow: 0 24px 54px -42px rgba(15, 31, 45, .45);
}

.related-products .prod .pimg {
  height: 260px;
  padding: 22px 20px 10px;
  border: 0;
  border-radius: 10px 10px 4px 4px;
  background: #fff;
}

.related-products .prod .pimg img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.related-products .prod .pintro,
.related-products .prod .pbody p,
.related-products .prod .more {
  display: none;
}

.related-products .prod .pbody {
  min-height: auto;
  padding: 0;
  border: 0;
  background: transparent;
}

.related-products .prod h4 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 64px;
  margin: 18px 0 0;
  padding: 0 18px;
  border-radius: 8px;
  background: #264a66;
  color: #fff;
  font-family: "HarmonyOS Sans SC", "PingFang SC", "MiSans", system-ui, sans-serif;
  font-size: 17px;
  font-weight: 360;
  line-height: 1.35;
  text-align: center;
}

.related-products .prod:hover h4 {
  background: #1f425c;
}

@media (min-width: 981px) {
  .related-products .prod-grid {
    gap: calc(30 * var(--board-u));
  }

  .related-products .prod {
    padding: calc(20 * var(--board-u));
    border-radius: calc(14 * var(--board-u));
  }

  .related-products .prod .pimg {
    height: calc(260 * var(--board-u));
    padding: calc(22 * var(--board-u)) calc(20 * var(--board-u)) calc(10 * var(--board-u));
    border-radius: calc(10 * var(--board-u)) calc(10 * var(--board-u)) calc(4 * var(--board-u)) calc(4 * var(--board-u));
  }

  .related-products .prod h4 {
    min-height: calc(64 * var(--board-u));
    margin-top: calc(18 * var(--board-u));
    padding: 0 calc(18 * var(--board-u));
    border-radius: calc(8 * var(--board-u));
    font-size: clamp(17px, .9vw, calc(19 * var(--board-u)));
  }
}

@media (min-width: 2400px) {
  .related-products .prod h4 {
    font-size: 22px;
  }
}

@media (min-width: 3400px) {
  .related-products .prod h4 {
    font-size: 32px;
  }
}

@media (max-width: 980px) {
  .related-products .prod-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .related-products .prod-grid {
    grid-template-columns: 1fr;
  }

  .related-products .prod {
    padding: 16px;
    border-radius: 12px;
  }

  .related-products .prod .pimg {
    height: 245px;
    padding: 18px 14px 8px;
  }

  .related-products .prod h4 {
    min-height: 58px;
    margin-top: 14px;
    border-radius: 8px;
    font-size: 16px;
  }
}
/* Product summary card polish: larger text, no internal divider lines. */
.product-summary-panel .product-spec-card {
  padding: 32px 34px 30px;
  border: 0;
  border-radius: 14px;
  background: linear-gradient(180deg, #fff 0%, #fbfcfd 100%);
  box-shadow: 0 24px 58px -46px rgba(15, 31, 45, .38);
}

.product-summary-panel .product-spec-card .product-published {
  display: block;
  margin: 0 0 18px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #8a9096;
  font-size: 16px;
  font-weight: 330;
  line-height: 1.65;
}

.product-summary-panel .product-spec-card .product-published::before {
  display: none;
  content: none;
}

.product-summary-panel .product-spec-card .product-intro {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #4e545a;
  font-size: 18px;
  font-weight: 330;
  line-height: 1.78;
}

.product-summary-panel .product-spec-card .product-summary-meta {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  width: auto;
  margin: 24px 0 0;
  padding: 10px 16px;
  border: 0;
  border-radius: 999px;
  background: rgba(40, 86, 118, .08);
  color: #285676;
  font-size: 16px;
  font-weight: 340;
  line-height: 1.35;
}

.product-summary-panel .product-spec-card .product-summary-meta span {
  color: rgba(40, 86, 118, .68);
  font-weight: 340;
}

.product-summary-panel .product-spec-card .product-summary-meta strong {
  color: #285676;
  font-weight: 420;
  text-align: left;
}

@media (min-width: 2400px) {
  .product-summary-panel .product-spec-card .product-published,
  .product-summary-panel .product-spec-card .product-summary-meta {
    font-size: 19px;
  }

  .product-summary-panel .product-spec-card .product-intro {
    font-size: 22px;
  }
}

@media (min-width: 3400px) {
  .product-summary-panel .product-spec-card .product-published,
  .product-summary-panel .product-spec-card .product-summary-meta {
    font-size: 26px;
  }

  .product-summary-panel .product-spec-card .product-intro {
    font-size: 30px;
  }
}

@media (max-width: 620px) {
  .product-summary-panel .product-spec-card {
    padding: 24px 20px;
  }

  .product-summary-panel .product-spec-card .product-published {
    font-size: 14px;
  }

  .product-summary-panel .product-spec-card .product-intro {
    font-size: 16px;
  }

  .product-summary-panel .product-spec-card .product-summary-meta {
    font-size: 14px;
  }
}
/* Product detail width override. */
.product-detail-shell > .wrap {
  max-width: 1400px;
  padding-left: 0;
  padding-right: 0;
}

@media (min-width: 981px) {
  .product-detail-shell > .wrap {
    max-width: calc(1400 * var(--board-u));
    padding-left: 0;
    padding-right: 0;
  }
}

@media (max-width: 980px) {
  .product-detail-shell > .wrap {
    padding-left: 18px;
    padding-right: 18px;
  }
}


/* News pagination uses the same arrow page style as products. */
:is(.news-section, .video-section) .news-pagination {
  width: 100%;
  margin: 48px auto 0;
}

:is(.news-section, .video-section) .news-pagination .screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

:is(.news-section, .video-section) .news-pagination .nav-links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  width: 100%;
}

:is(.news-section, .video-section) .news-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  padding: 0 13px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: #f5f7f8;
  color: #4f5961;
  font-family: "HarmonyOS Sans SC", "PingFang SC", "MiSans", system-ui, sans-serif;
  font-size: 15px;
  font-weight: 360;
  line-height: 1;
  text-decoration: none;
  box-shadow: none;
  transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}

:is(.news-section, .video-section) .news-pagination a.page-numbers:hover {
  border-color: rgba(40, 86, 118, .18);
  background: #eef3f6;
  color: #285676;
  transform: translateY(-1px);
}

:is(.news-section, .video-section) .news-pagination .page-numbers.current {
  border-color: #285676;
  background: #285676;
  color: #fff;
}

:is(.news-section, .video-section) .news-pagination .page-numbers.dots {
  min-width: 42px;
  background: #f5f7f8;
  color: #6a737b;
}

:is(.news-section, .video-section) .news-pagination .prev,
:is(.news-section, .video-section) .news-pagination .next {
  width: 42px;
  min-width: 42px;
  padding: 0;
  font-size: 24px;
  font-weight: 360;
}

:is(.news-section, .video-section) .news-pagination .page-numbers.disabled {
  background: #f0f2f3;
  color: #a5adb3;
  cursor: default;
  pointer-events: none;
}

@media (min-width: 981px) {
  :is(.news-section, .video-section) .news-pagination {
    margin-top: calc(48 * var(--board-u));
  }

  :is(.news-section, .video-section) .news-pagination .page-numbers {
    min-width: calc(42 * var(--board-u));
    height: calc(42 * var(--board-u));
    padding-left: calc(13 * var(--board-u));
    padding-right: calc(13 * var(--board-u));
    border-radius: calc(7 * var(--board-u));
    font-size: clamp(15px, .78vw, calc(17 * var(--board-u)));
  }

  :is(.news-section, .video-section) .news-pagination .prev,
  :is(.news-section, .video-section) .news-pagination .next {
    width: calc(42 * var(--board-u));
    min-width: calc(42 * var(--board-u));
    font-size: calc(24 * var(--board-u));
  }
}

@media (max-width: 620px) {
  :is(.news-section, .video-section) .news-pagination {
    margin-top: 34px;
  }

  :is(.news-section, .video-section) .news-pagination .nav-links {
    gap: 6px;
    flex-wrap: wrap;
  }

  :is(.news-section, .video-section) .news-pagination .page-numbers {
    min-width: 38px;
    height: 38px;
    padding: 0 10px;
    border-radius: 6px;
    font-size: 14px;
  }

  :is(.news-section, .video-section) .news-pagination .prev,
  :is(.news-section, .video-section) .news-pagination .next {
    width: 38px;
    min-width: 38px;
    font-size: 22px;
  }
}
/* Product catalog pagination: centered between the two product columns. */
.product-archive-shell .product-pagination {
  width: 100%;
  margin: 48px auto 0;
}

.product-archive-shell .product-pagination .screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.product-archive-shell .product-pagination .nav-links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.product-archive-shell .product-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  padding: 0 13px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: #f5f7f8;
  color: #4f5961;
  font-family: "HarmonyOS Sans SC", "PingFang SC", "MiSans", system-ui, sans-serif;
  font-size: 15px;
  font-weight: 360;
  line-height: 1;
  text-decoration: none;
  box-shadow: none;
  transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}

.product-archive-shell .product-pagination a.page-numbers:hover {
  border-color: rgba(40, 86, 118, .18);
  background: #eef3f6;
  color: #285676;
  transform: translateY(-1px);
}

.product-archive-shell .product-pagination .page-numbers.current {
  border-color: #285676;
  background: #285676;
  color: #fff;
}

.product-archive-shell .product-pagination .page-numbers.dots {
  min-width: 42px;
  background: #f5f7f8;
  color: #6a737b;
}

.product-archive-shell .product-pagination .prev,
.product-archive-shell .product-pagination .next {
  width: 42px;
  min-width: 42px;
  padding: 0;
  font-size: 24px;
  font-weight: 360;
}

.product-archive-shell .product-pagination .page-numbers.disabled {
  background: #f0f2f3;
  color: #a5adb3;
  cursor: default;
  pointer-events: none;
}

@media (min-width: 981px) {
  .product-archive-shell .product-pagination {
    margin-top: calc(48 * var(--board-u));
  }

  .product-archive-shell .product-pagination .page-numbers {
    min-width: calc(42 * var(--board-u));
    height: calc(42 * var(--board-u));
    padding-left: calc(13 * var(--board-u));
    padding-right: calc(13 * var(--board-u));
    border-radius: calc(7 * var(--board-u));
    font-size: clamp(15px, .78vw, calc(17 * var(--board-u)));
  }

  .product-archive-shell .product-pagination .prev,
  .product-archive-shell .product-pagination .next {
    width: calc(42 * var(--board-u));
    min-width: calc(42 * var(--board-u));
    font-size: calc(24 * var(--board-u));
  }
}

@media (max-width: 620px) {
  .product-archive-shell .product-pagination {
    margin-top: 34px;
  }

  .product-archive-shell .product-pagination .nav-links {
    gap: 6px;
    flex-wrap: wrap;
  }

  .product-archive-shell .product-pagination .page-numbers {
    min-width: 38px;
    height: 38px;
    padding: 0 10px;
    border-radius: 6px;
    font-size: 14px;
  }

  .product-archive-shell .product-pagination .prev,
  .product-archive-shell .product-pagination .next {
    width: 38px;
    min-width: 38px;
    font-size: 22px;
  }
}

/* Pagination arrows are drawn in CSS to avoid character encoding issues. */
.product-archive-shell .product-pagination .prev,
.product-archive-shell .product-pagination .next,
:is(.news-section, .video-section) .news-pagination .prev,
:is(.news-section, .video-section) .news-pagination .next {
  position: relative;
  font-size: 0;
}

.product-archive-shell .product-pagination .prev::before,
.product-archive-shell .product-pagination .next::before,
:is(.news-section, .video-section) .news-pagination .prev::before,
:is(.news-section, .video-section) .news-pagination .next::before {
  content: "";
  width: 8px;
  height: 8px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
}

.product-archive-shell .product-pagination .prev::before,
:is(.news-section, .video-section) .news-pagination .prev::before {
  transform: rotate(-135deg) translate(-1px, -1px);
}

.product-archive-shell .product-pagination .next::before,
:is(.news-section, .video-section) .news-pagination .next::before {
  transform: rotate(45deg) translate(-1px, 1px);
}
/* Product catalog page: reference-style category sidebar and simple product cards. */
.product-archive-shell .product-catalog-layout {
  grid-template-columns: minmax(280px, 336px) minmax(0, 1fr);
  gap: clamp(52px, 4.3vw, 82px);
}

.product-archive-shell .product-category-side {
  position: sticky;
  top: 126px;
  border-top: 0;
  background: transparent;
  box-shadow: none;
}

.product-archive-shell .product-category-side h3 {
  margin: 0 0 28px;
  padding: 0;
  color: #303238;
  font-family: "HarmonyOS Sans SC", "PingFang SC", "MiSans", system-ui, sans-serif;
  font-size: 28px;
  font-weight: 430;
  line-height: 1.25;
  letter-spacing: 0;
}

.product-archive-shell .product-category-list {
  display: flex;
  flex-direction: column;
  border-top: 0;
}

.product-archive-shell .product-category-list a {
  display: flex;
  align-items: center;
  min-height: 63px;
  padding: 0 20px;
  border-bottom: 1px solid #e8eaec;
  background: transparent;
  color: #50545a;
  font-family: "HarmonyOS Sans SC", "PingFang SC", "MiSans", system-ui, sans-serif;
  font-size: 17px;
  font-weight: 350;
  line-height: 1.35;
  text-decoration: none;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.product-archive-shell .product-category-list a:hover,
.product-archive-shell .product-category-list a.active {
  padding-left: 20px;
  border-bottom-color: transparent;
  background: #285676;
  color: #fff;
}

.product-archive-shell .product-catalog-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px;
}

.product-archive-shell .product-catalog-grid .prod {
  display: flex;
  flex-direction: column;
  min-height: auto;
  padding: 20px;
  border: 1px solid #e4e8eb;
  border-radius: 14px;
  background: #fff;
  box-shadow: none;
  overflow: hidden;
}

.product-archive-shell .product-catalog-grid .prod:hover {
  border-color: #d7dee3;
  transform: translateY(-4px);
  box-shadow: 0 24px 54px -42px rgba(15, 31, 45, .45);
}

.product-archive-shell .product-catalog-grid .prod .pimg {
  height: 260px;
  padding: 22px 20px 10px;
  border: 0;
  border-radius: 10px 10px 4px 4px;
  background: #fff;
}

.product-archive-shell .product-catalog-grid .prod .pimg img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.product-archive-shell .product-catalog-grid .prod .pintro,
.product-archive-shell .product-catalog-grid .prod .pbody p,
.product-archive-shell .product-catalog-grid .prod .more {
  display: none;
}

.product-archive-shell .product-catalog-grid .prod .pbody {
  min-height: auto;
  padding: 0;
  border: 0;
  background: transparent;
}

.product-archive-shell .product-catalog-grid .prod h4 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 64px;
  margin: 18px 0 0;
  padding: 0 18px;
  border-radius: 8px;
  background: #264a66;
  color: #fff;
  font-family: "HarmonyOS Sans SC", "PingFang SC", "MiSans", system-ui, sans-serif;
  font-size: 17px;
  font-weight: 360;
  line-height: 1.35;
  text-align: center;
}

.product-archive-shell .product-catalog-grid .prod:hover h4 {
  background: #1f425c;
}

@media (min-width: 981px) {
  .product-archive-shell .product-catalog-layout {
    grid-template-columns: minmax(calc(280 * var(--board-u)), calc(336 * var(--board-u))) minmax(0, 1fr);
    gap: clamp(52px, 4.3vw, calc(82 * var(--board-u)));
  }

  .product-archive-shell .product-category-side {
    top: calc(126 * var(--board-u));
  }

  .product-archive-shell .product-category-side h3 {
    margin-bottom: calc(28 * var(--board-u));
    font-size: clamp(28px, 1.46vw, calc(32 * var(--board-u)));
  }

  .product-archive-shell .product-category-list a {
    min-height: calc(63 * var(--board-u));
    padding-left: calc(20 * var(--board-u));
    padding-right: calc(20 * var(--board-u));
    font-size: clamp(17px, .9vw, calc(19 * var(--board-u)));
  }

  .product-archive-shell .product-category-list a:hover,
  .product-archive-shell .product-category-list a.active {
    padding-left: calc(20 * var(--board-u));
  }

  .product-archive-shell .product-catalog-grid {
    gap: calc(30 * var(--board-u));
  }

  .product-archive-shell .product-catalog-grid .prod {
    padding: calc(20 * var(--board-u));
    border-radius: calc(14 * var(--board-u));
  }

  .product-archive-shell .product-catalog-grid .prod .pimg {
    height: calc(260 * var(--board-u));
    padding: calc(22 * var(--board-u)) calc(20 * var(--board-u)) calc(10 * var(--board-u));
    border-radius: calc(10 * var(--board-u)) calc(10 * var(--board-u)) calc(4 * var(--board-u)) calc(4 * var(--board-u));
  }

  .product-archive-shell .product-catalog-grid .prod h4 {
    min-height: calc(64 * var(--board-u));
    margin-top: calc(18 * var(--board-u));
    padding: 0 calc(18 * var(--board-u));
    border-radius: calc(8 * var(--board-u));
    font-size: clamp(17px, .9vw, calc(19 * var(--board-u)));
  }
}

@media (min-width: 2400px) {
  .product-archive-shell .product-category-side h3 { font-size: 34px; }
  .product-archive-shell .product-category-list a { font-size: 22px; }
  .product-archive-shell .product-catalog-grid .prod h4 { font-size: 22px; }
}

@media (min-width: 3400px) {
  .product-archive-shell .product-category-side h3 { font-size: 46px; }
  .product-archive-shell .product-category-list a { font-size: 30px; }
  .product-archive-shell .product-catalog-grid .prod h4 { font-size: 32px; }
}

@media (max-width: 980px) {
  .product-archive-shell .product-catalog-layout {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .product-archive-shell .product-category-side {
    position: static;
  }

  .product-archive-shell .product-category-side h3 {
    margin-bottom: 18px;
    font-size: 24px;
  }

  .product-archive-shell .product-category-list {
    flex-direction: column;
    gap: 0;
  }

  .product-archive-shell .product-category-list a {
    min-height: 54px;
  }

  .product-archive-shell .product-catalog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .product-archive-shell .product-catalog-grid {
    grid-template-columns: 1fr;
  }

  .product-archive-shell .product-catalog-grid .prod {
    padding: 16px;
    border-radius: 12px;
  }

  .product-archive-shell .product-catalog-grid .prod .pimg {
    height: 245px;
    padding: 18px 14px 8px;
  }

  .product-archive-shell .product-catalog-grid .prod h4 {
    min-height: 58px;
    margin-top: 14px;
    border-radius: 8px;
    font-size: 16px;
  }
}
/* Dark four-column footer inspired by the reference layout. */
.site-footer {
  padding: 64px 0 30px;
  background: #101010;
  color: rgba(255, 255, 255, .68);
  font-family: "HarmonyOS Sans SC", "PingFang SC", "MiSans", "Source Han Sans SC", system-ui, sans-serif;
}

.footer-wrap {
  max-width: 1450px;
  padding-left: 0;
  padding-right: 0;
}

.footer-main {
  display: grid;
  grid-template-columns: 1.32fr .84fr .96fr .94fr;
  gap: 48px;
  align-items: start;
}

.footer-main > * + * {
  min-height: 278px;
  border-left: 1px solid rgba(255, 255, 255, .09);
  padding-left: 48px;
}

.footer-brand {
  padding-right: 10px;
}

.footer-logo {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: #fff;
  text-decoration: none;
}

.footer-logo-mark {
  display: grid;
  place-items: center;
  width: 88px;
  height: 88px;
  line-height: 1;
}

.footer-logo-mark img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.footer-logo-text {
  color: #fff;
  font-size: 16px;
  font-weight: 330;
  letter-spacing: .01em;
}

.footer-brand p {
  max-width: 380px;
  margin: 44px 0 28px;
  color: rgba(255, 255, 255, .74);
  font-size: 16px;
  font-weight: 320;
  line-height: 1.72;
}

.footer-socials {
  display: flex;
  gap: 12px;
  align-items: center;
}

.footer-socials a {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #3c3c3c;
  color: #fff;
  font-size: 14px;
  font-weight: 330;
  text-decoration: none;
  transition: background .2s ease, transform .2s ease;
}

.footer-socials a:hover {
  background: #285676;
  transform: translateY(-2px);
}

.footer-col h5 {
  margin: 0 0 22px;
  color: #fff;
  font-size: 20px;
  font-weight: 360;
  line-height: 1.2;
  letter-spacing: .01em;
}

.footer-links a,
.footer-contact a {
  color: inherit;
  text-decoration: none;
}

.footer-links a {
  position: relative;
  display: block;
  margin: 0 0 20px;
  padding-left: 18px;
  color: rgba(255, 255, 255, .76);
  font-size: 15.5px;
  font-weight: 320;
  line-height: 1.35;
  transition: color .2s ease;
}

.footer-links a::before,
.footer-contact-item span::before {
  content: "";
  position: absolute;
  left: 0;
  top: .58em;
  width: 7px;
  height: 7px;
  background: #285676;
}

.footer-links a:hover,
.footer-contact a:hover,
.footer-bottom a:hover {
  color: #fff;
}

.footer-contact-item {
  margin-bottom: 22px;
}

.footer-contact-item span {
  position: relative;
  display: block;
  margin-bottom: 10px;
  padding-left: 18px;
  color: rgba(255, 255, 255, .48);
  font-size: 15.5px;
  font-weight: 320;
}

.footer-contact-item strong {
  display: block;
  color: rgba(255, 255, 255, .84);
  font-size: 15.5px;
  font-weight: 340;
  line-height: 1.58;
}

.footer-quote-form {
  display: grid;
  gap: 10px;
}

.site-footer .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.footer-quote-form label {
  display: block;
}

.footer-quote-form input,
.footer-quote-form textarea {
  width: 100%;
  border: 1px solid transparent;
  border-radius: 4px;
  background: #363636;
  color: #fff;
  font: inherit;
  font-size: 14.5px;
  font-weight: 320;
  outline: none;
  transition: border-color .2s ease, background .2s ease;
}

.footer-quote-form input {
  height: 44px;
  padding: 0 16px;
}

.footer-quote-form textarea {
  min-height: 100px;
  resize: vertical;
  padding: 14px 16px;
}

.footer-quote-form input::placeholder,
.footer-quote-form textarea::placeholder {
  color: rgba(255, 255, 255, .5);
}

.footer-quote-form input:focus,
.footer-quote-form textarea:focus {
  border-color: rgba(58, 116, 154, .85);
  background: #404040;
}

.footer-quote-form button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  width: 100%;
  height: 46px;
  border: 0;
  border-radius: 4px;
  background: #285676;
  color: #fff;
  font: inherit;
  font-size: 14.5px;
  font-weight: 340;
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}

.footer-quote-form button svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.footer-quote-form button:hover {
  background: #316587;
  transform: translateY(-1px);
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  margin-top: 48px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, .08);
  color: rgba(255, 255, 255, .48);
  font-size: 14.5px;
  font-weight: 320;
}

.footer-bottom a {
  color: rgba(255, 255, 255, .58);
  text-decoration: none;
}

.footer-bottom i {
  margin: 0 18px;
  color: rgba(255, 255, 255, .28);
  font-style: normal;
}

@media (min-width: 981px) {
  .site-footer {
    padding-top: calc(64 * var(--board-u));
    padding-bottom: calc(30 * var(--board-u));
  }

  .footer-wrap {
    max-width: calc(1450 * var(--board-u));
    padding-left: 0;
    padding-right: 0;
  }

  .footer-main {
    gap: calc(48 * var(--board-u));
  }

  .footer-main > * + * {
    min-height: calc(278 * var(--board-u));
    padding-left: calc(48 * var(--board-u));
  }

  .footer-logo-mark {
    width: calc(88 * var(--board-u));
    height: calc(88 * var(--board-u));
  }

  .footer-logo-text,
  .footer-links a,
  .footer-contact-item span,
  .footer-contact-item strong {
    font-size: clamp(15.5px, .82vw, calc(17 * var(--board-u)));
  }

  .footer-brand p {
    max-width: calc(380 * var(--board-u));
    margin-top: calc(44 * var(--board-u));
    margin-bottom: calc(28 * var(--board-u));
    font-size: clamp(16px, .84vw, calc(18 * var(--board-u)));
  }

  .footer-col h5 {
    margin-bottom: calc(22 * var(--board-u));
    font-size: clamp(20px, 1.04vw, calc(23 * var(--board-u)));
  }
}

@media (min-width: 2400px) {
  .footer-quote-form input,
  .footer-quote-form textarea,
  .footer-quote-form button,
  .footer-bottom {
    font-size: 17px;
  }
}

@media (min-width: 3400px) {
  .footer-quote-form input,
  .footer-quote-form textarea,
  .footer-quote-form button,
  .footer-bottom {
    font-size: 23px;
  }
}

@media (max-width: 1100px) {
  .footer-main {
    grid-template-columns: 1fr 1fr;
  }

  .footer-main > * + * {
    min-height: 0;
  }

  .footer-main > :nth-child(3) {
    border-left: 0;
    padding-left: 0;
  }
}

@media (max-width: 680px) {
  .site-footer {
    padding: 50px 0 28px;
  }

  .footer-wrap {
    padding-left: 22px;
    padding-right: 22px;
  }

  .footer-main {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .footer-main > * + * {
    border-left: 0;
    padding-left: 0;
  }

  .footer-brand p {
    margin: 32px 0 24px;
    font-size: 15px;
  }

  .footer-col h5 {
    margin-bottom: 18px;
    font-size: 19px;
  }

  .footer-links a {
    margin-bottom: 16px;
  }

  .footer-bottom {
    flex-direction: column;
    margin-top: 36px;
    font-size: 14px;
  }
}

/* Site logo image override. */
header .logo.logo-image {
  display: inline-flex;
  align-items: center;
  width: clamp(148px, 10.8vw, 196px);
  height: 48px;
  font-size: 0;
  line-height: 0;
}

header .logo.logo-image img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 48px;
  object-fit: contain;
}

@media (max-width: 760px) {
  header .logo.logo-image {
    width: 142px;
    height: 38px;
  }

  header .logo.logo-image img {
    max-height: 38px;
  }
}

/* About and contact page structure. */
.about-anchor-band {
  position: relative;
  z-index: 3;
  margin-top: -54px;
  padding-bottom: 30px;
}

.about-anchor-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.about-anchor-grid a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 92px;
  padding: 0 30px;
  border: 1px solid rgba(255, 255, 255, .2);
  background: rgba(255, 255, 255, .96);
  color: #17222c;
  text-decoration: none;
  font-size: 19px;
  font-weight: 520;
  box-shadow: 0 18px 50px -34px rgba(14, 25, 37, .5);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.about-anchor-grid a:hover {
  transform: translateY(-3px);
  border-color: rgba(42, 91, 123, .32);
  box-shadow: 0 26px 62px -38px rgba(14, 25, 37, .58);
}

.about-anchor-grid span {
  color: #2f6f90;
  font-size: 15px;
  letter-spacing: .08em;
}

.about-company {
  padding-top: 70px;
}

.about-grid {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(360px, 1fr);
  gap: 58px;
  align-items: center;
}

.about-grid h2 {
  margin: 18px 0 24px;
  color: var(--heading);
  font-size: clamp(30px, 3vw, 46px);
  line-height: 1.18;
}

.about-grid .intro,
.about-grid p {
  color: #5f6c75;
  font-size: 17px;
  line-height: 2;
}

.about-company-figure {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: 4px;
  background: #0f0f0f;
  box-shadow: 0 26px 70px -46px rgba(0, 0, 0, .62);
}

.about-company-figure img {
  display: block;
  width: 100%;
  aspect-ratio: 1.28;
  object-fit: cover;
}

.about-company-figure figcaption {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 22px;
  color: #fff;
  font-size: 18px;
  font-weight: 520;
  text-shadow: 0 2px 16px rgba(0, 0, 0, .38);
}

.about-business {
  background: linear-gradient(180deg, #fff, var(--clinic));
}

.about-business-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.about-business-item {
  min-height: 150px;
  padding: 26px 24px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #fff;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.about-business-item:hover {
  transform: translateY(-3px);
  border-color: rgba(42, 91, 123, .28);
  box-shadow: 0 24px 58px -44px rgba(18, 30, 42, .5);
}

.about-business-item span {
  display: block;
  margin-bottom: 28px;
  color: #2f6f90;
  font-size: 14px;
  letter-spacing: .08em;
}

.about-business-item h3 {
  margin: 0;
  color: #222832;
  font-size: 18px;
  line-height: 1.55;
  font-weight: 560;
}

.about-technology {
  background: #fff;
}

.about-tech-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.about-tech-grid .pillar-row {
  min-width: 0;
}

.contact-page-block {
  padding-top: 72px;
}

.contact-map-layout {
  display: grid;
  grid-template-columns: minmax(320px, .78fr) minmax(0, 1.22fr);
  gap: 28px;
  align-items: stretch;
}

.contact-baidu-map {
  position: relative;
  display: flex;
  min-height: 640px;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  border-radius: 4px;
  padding: 42px;
  color: #fff;
  text-decoration: none;
  background:
    linear-gradient(135deg, rgba(16, 34, 48, .1), rgba(16, 34, 48, .72)),
    linear-gradient(90deg, rgba(255, 255, 255, .08) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255, 255, 255, .08) 1px, transparent 1px),
    #1a3446;
  background-size: auto, 54px 54px, 54px 54px, auto;
  box-shadow: 0 24px 70px -44px rgba(10, 22, 35, .68);
}

.contact-baidu-map::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 40%;
  width: 48px;
  height: 48px;
  border-radius: 50% 50% 50% 0;
  background: #fff;
  transform: translate(-50%, -50%) rotate(-45deg);
  box-shadow: 0 14px 36px rgba(0, 0, 0, .25);
}

.contact-baidu-map::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 40%;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #2f6f90;
  transform: translate(-50%, -50%);
}

.contact-baidu-map > * {
  position: relative;
  z-index: 1;
}

.contact-baidu-map .map-kicker {
  margin-bottom: 18px;
  color: rgba(255, 255, 255, .58);
  font-size: 13px;
  letter-spacing: .16em;
}

.contact-baidu-map strong {
  display: block;
  margin-bottom: 14px;
  font-size: clamp(25px, 2.4vw, 36px);
  line-height: 1.25;
}

.contact-baidu-map em {
  display: block;
  max-width: 320px;
  color: rgba(255, 255, 255, .78);
  font-style: normal;
  line-height: 1.8;
}

.contact-baidu-map .map-action {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin-top: 26px;
  padding: 12px 18px;
  border: 1px solid rgba(255, 255, 255, .28);
  color: #fff;
  font-size: 14px;
}

.contact-form-card {
  display: grid;
  grid-template-columns: .82fr 1.18fr;
  gap: 28px;
  padding: 32px;
}

.contact-form-card .cinfo {
  display: flex;
  align-items: stretch;
  color: #fff;
}

.contact-form-card .cinfo > div {
  width: 100%;
  padding: 30px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 4px;
}

.contact-form-card .cinfo h2,
.contact-message-panel h3 {
  margin: 0 0 22px;
  font-size: 22px;
  color: inherit;
}

.contact-form-card .row {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 18px;
  color: rgba(255, 255, 255, .82);
  line-height: 1.7;
}

.contact-form-card .row a {
  color: inherit;
  text-decoration: none;
}

.contact-form-card .ri {
  display: inline-grid;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 50%;
}

.contact-form-card .ri svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
}

.contact-message-panel {
  border-radius: 4px;
  padding: 34px;
  background: #f6f8f9;
  color: #222832;
}

.contact-message-panel > p,
.contact-message-panel .form-note {
  color: #6a747d;
  font-size: 14px;
  line-height: 1.7;
}

.contact-static-form .form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 22px;
}

.contact-static-form .form-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: #3d4a54;
  font-size: 14px;
}

.contact-static-form .form-field.full {
  grid-column: 1 / -1;
}

.contact-static-form input,
.contact-static-form textarea {
  width: 100%;
  border: 1px solid #dde4e8;
  border-radius: 3px;
  background: #fff;
  padding: 12px 13px;
  color: #1f2933;
  font: inherit;
}

.contact-static-form textarea {
  min-height: 118px;
  resize: vertical;
}

.contact-static-form .btn-primary {
  width: 100%;
  justify-content: center;
  margin-top: 20px;
}

@media (min-width: 2400px) {
  .about-business-item h3,
  .about-grid .intro,
  .about-grid p,
  .contact-form-card .row {
    font-size: 20px;
  }
}

@media (max-width: 1100px) {
  .about-grid,
  .contact-map-layout,
  .contact-form-card {
    grid-template-columns: 1fr;
  }

  .about-business-grid,
  .about-tech-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .contact-baidu-map {
    min-height: 420px;
  }
}

@media (max-width: 720px) {
  .about-anchor-band {
    margin-top: -30px;
    padding-bottom: 12px;
  }

  .about-anchor-grid,
  .about-business-grid,
  .about-tech-grid,
  .contact-static-form .form-grid {
    grid-template-columns: 1fr;
  }

  .about-anchor-grid a {
    min-height: 68px;
    padding: 0 20px;
    font-size: 16px;
  }

  .about-company {
    padding-top: 50px;
  }

  .about-grid {
    gap: 34px;
  }

  .about-grid h2 {
    font-size: 30px;
  }

  .about-grid .intro,
  .about-grid p {
    font-size: 15.5px;
    line-height: 1.85;
  }

  .about-company-figure img {
    aspect-ratio: 1.05;
  }

  .contact-page-block {
    padding-top: 48px;
  }

  .contact-baidu-map,
  .contact-form-card,
  .contact-message-panel,
  .contact-form-card .cinfo > div {
    padding: 24px;
  }

  .contact-baidu-map {
    min-height: 360px;
  }
}

/* Reference About page and hover submenu pass. */
header .bar {
  overflow: visible;
}

nav.menu {
  align-items: stretch;
}

nav.menu .menu-item {
  position: relative;
  display: flex;
  align-items: center;
}

nav.menu .menu-item > a {
  display: inline-flex;
  align-items: center;
}

nav.menu .has-submenu .submenu {
  position: absolute;
  left: 50%;
  top: 100%;
  width: 260px;
  padding: 0;
  background: #fff;
  border-top: 2px solid #75a3dc;
  box-shadow: 0 16px 36px rgba(20, 35, 50, .12);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 10px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
}

nav.menu .has-submenu:hover .submenu,
nav.menu .has-submenu:focus-within .submenu {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

nav.menu .has-submenu .submenu a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 46px;
  padding: 0 22px;
  border-bottom: 1px solid #f0f2f4;
  color: #222832 !important;
  font-size: 15px;
  font-weight: 400;
  text-decoration: none;
}

nav.menu .has-submenu .submenu a::after {
  display: none;
}

nav.menu .has-submenu .submenu a span::before {
  content: '';
  display: block;
  width: 8px;
  height: 8px;
  border-top: 1.6px solid #222832;
  border-right: 1.6px solid #222832;
  transform: rotate(45deg);
}

nav.menu .has-submenu .submenu a:hover {
  color: #5d93d3 !important;
  background: #f8fbff;
}

.header-tools {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 24px;
}

.header-search {
  position: relative;
  display: flex;
  align-items: center;
  width: clamp(170px, 10.8vw, 230px);
  height: 42px;
  border: 1px solid #d7dce2;
  border-radius: 999px;
  background: #fff;
}

.header-search input {
  width: 100%;
  height: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  padding: 0 48px 0 24px;
  color: #222832;
  font-size: 14px;
}

.header-search button {
  position: absolute;
  right: 14px;
  top: 50%;
  width: 24px;
  height: 24px;
  border: 0;
  background: transparent;
  transform: translateY(-50%);
  cursor: pointer;
}

.header-search button span,
.header-search button span::after {
  position: absolute;
  display: block;
  content: '';
}

.header-search button span {
  left: 3px;
  top: 3px;
  width: 13px;
  height: 13px;
  border: 1.7px solid #17304a;
  border-radius: 50%;
}

.header-search button span::after {
  left: 10px;
  top: 11px;
  width: 8px;
  height: 1.7px;
  background: #17304a;
  transform: rotate(45deg);
  transform-origin: left center;
}

.header-contact-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  color: #17304a;
  text-decoration: none;
  transition: color .22s ease, transform .22s ease;
}

.header-contact-icon svg {
  display: block;
  width: 25px;
  height: 25px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.header-contact-icon:hover {
  color: #264a66;
  transform: translateY(-1px);
}
.legacy-about-page {
  background: #fff;
  color: #202833;
}

.legacy-about-wrap {
  width: min(1520px, calc(100vw - 56px));
  margin: 0 auto;
}

.legacy-about-hero {
  position: relative;
  height: 416px;
  margin-top: 90px;
  overflow: hidden;
  background: #d6e4f2;
}

.legacy-about-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.legacy-about-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(36, 54, 76, .12);
}

.legacy-about-hero-title {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 60%;
  transform: translate(-50%, -50%);
  color: #fff;
  text-align: center;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .22);
}

.legacy-about-hero-title h1 {
  margin: 0 0 12px;
  font-size: 38px;
  font-weight: 700;
  line-height: 1;
}

.legacy-about-hero-title p {
  margin: 0;
  font-size: 19px;
  letter-spacing: .2em;
  font-weight: 520;
}

.legacy-breadcrumb {
  height: 52px;
  border-bottom: 1px solid #e5e5e5;
  background: #fff;
  color: #1f2a35;
  font-size: 16px;
}

.legacy-breadcrumb .legacy-about-wrap {
  display: flex;
  align-items: center;
  height: 100%;
  gap: 7px;
}

.legacy-breadcrumb a {
  position: relative;
  color: #1f2a35;
  text-decoration: none;
  padding-left: 22px;
}

.legacy-breadcrumb a::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 14px;
  height: 12px;
  background: #75a3dc;
  transform: translateY(-50%);
  clip-path: polygon(50% 0, 100% 45%, 100% 100%, 63% 100%, 63% 62%, 37% 62%, 37% 100%, 0 100%, 0 45%);
}

.legacy-company {
  padding: 0 0 86px;
  background: #fff;
}

.legacy-company-grid {
  display: grid;
  grid-template-columns: 382px minmax(0, 1fr);
  min-height: 430px;
  align-items: stretch;
}

.legacy-side-title {
  min-height: 430px;
  padding: 148px 58px 42px;
  background: #74a5dc;
  color: #fff;
}

.legacy-side-title i,
.legacy-message-copy i {
  display: block;
  width: 58px;
  height: 3px;
  margin-bottom: 34px;
  background: currentColor;
}

.legacy-side-title strong {
  display: block;
  margin-bottom: 24px;
  font-size: 38px;
  font-style: italic;
  line-height: 1;
  letter-spacing: .02em;
}

.legacy-side-title span {
  display: block;
  font-size: 34px;
  font-weight: 700;
}

.legacy-company-copy {
  padding: 64px 0 0 90px;
}

.legacy-company-copy h2 {
  margin: 0 0 24px;
  color: #222832;
  font-size: 38px;
  line-height: 1.3;
  font-weight: 700;
}

.legacy-company-copy p {
  max-width: 1040px;
  margin: 0;
  color: #1f2a35;
  font-size: 17px;
  line-height: 2.05;
}

.legacy-slogan {
  display: inline-flex;
  align-items: center;
  min-width: 610px;
  max-width: 100%;
  margin-top: 24px;
  padding: 0 34px 0 0;
  border: 1px solid #1a1a1a;
  border-radius: 999px;
  overflow: hidden;
  color: #6093d6;
  font-size: 28px;
  font-weight: 700;
}

.legacy-slogan img {
  width: 88px;
  height: 70px;
  object-fit: contain;
  padding: 6px 10px;
  margin-right: 10px;
}

.legacy-section-title {
  position: relative;
  text-align: center;
  padding: 72px 0 72px;
  overflow: hidden;
}

.legacy-section-title span {
  position: absolute;
  left: 50%;
  top: 42px;
  transform: translateX(-50%);
  color: transparent;
  -webkit-text-stroke: 2px rgba(117, 163, 220, .2);
  font-size: 96px;
  line-height: 1;
  font-weight: 300;
  letter-spacing: .03em;
  white-space: nowrap;
}

.legacy-section-title h2 {
  position: relative;
  z-index: 1;
  margin: 0 0 8px;
  color: #202833;
  font-size: 38px;
  line-height: 1.2;
  font-weight: 700;
}

.legacy-section-title p {
  position: relative;
  z-index: 1;
  margin: 0;
  color: #1f2a35;
  font-size: 16px;
}

.legacy-business {
  padding: 0 0 84px;
  background: #fff;
}

.legacy-business-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.legacy-business-card {
  min-height: 172px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  border-radius: 8px;
  background: #f3f9ff;
  color: #111827;
}

.legacy-business-card .legacy-icon {
  width: 78px;
  height: 78px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  color: #75a3dc;
}

.legacy-business-card:nth-child(8) .legacy-icon {
  background: #75a3dc;
  color: #fff;
}

.legacy-icon svg,
.legacy-tech-icon svg {
  width: 42px;
  height: 42px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.legacy-business-card h3 {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  font-weight: 700;
  text-align: center;
}

.legacy-technology {
  padding: 0 0 70px;
  background: #fff;
}

.legacy-tech-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 36px;
}

.legacy-tech-card {
  position: relative;
  min-height: 336px;
  overflow: hidden;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 22px 60px rgba(110, 136, 164, .14);
}

.legacy-tech-card > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .14;
  filter: saturate(.9);
}

.legacy-tech-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(255, 255, 255, .7));
}

.legacy-tech-content {
  position: relative;
  z-index: 1;
  padding: 72px 28px 28px;
}

.legacy-tech-icon {
  width: 76px;
  height: 76px;
  display: grid;
  place-items: center;
  margin-bottom: 28px;
  color: #75a3dc;
}

.legacy-tech-icon svg {
  width: 64px;
  height: 64px;
  stroke-width: 1.4;
}

.legacy-tech-card h3 {
  margin: 0 0 20px;
  color: #101820;
  font-size: 25px;
  line-height: 1.2;
  font-weight: 700;
}

.legacy-tech-card p {
  margin: 0;
  color: #1f2a35;
  font-size: 16px;
  line-height: 1.75;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.legacy-message-band {
  position: relative;
  min-height: 454px;
  padding: 60px 0;
  background: linear-gradient(rgba(93, 143, 205, .76), rgba(93, 143, 205, .76)), url('../img/e0c9666de3.jpg') center / cover no-repeat;
  color: #fff;
}

.legacy-message-grid {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(360px, .72fr);
  gap: 90px;
  align-items: center;
}

.legacy-message-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 28px;
}

.legacy-message-form input,
.legacy-message-form textarea {
  width: 100%;
  border: 0;
  border-radius: 4px;
  background: #fff;
  color: #1f2a35;
  font: inherit;
  font-size: 16px;
  padding: 0 16px;
}

.legacy-message-form input {
  height: 50px;
}

.legacy-message-form textarea {
  grid-column: 1 / -1;
  min-height: 118px;
  padding-top: 16px;
  resize: vertical;
}

.legacy-message-form button {
  grid-column: 1 / -1;
  justify-self: center;
  width: 200px;
  height: 54px;
  border: 0;
  border-radius: 999px;
  background: #fff;
  color: #6093d6;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}

.legacy-message-copy {
  text-align: center;
}

.legacy-message-copy i {
  margin: 0 auto 24px;
}

.legacy-message-copy h2 {
  margin: 0 0 40px;
  font-size: 38px;
  line-height: 1.2;
  font-weight: 700;
}

.legacy-message-copy p {
  margin: 0;
  font-size: 16px;
  color: rgba(255, 255, 255, .9);
}

@media (max-width: 1180px) {
  .header-tools {
    display: none;
  }

  .legacy-business-grid,
  .legacy-tech-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .legacy-company-grid,
  .legacy-message-grid {
    grid-template-columns: 1fr;
  }

  .legacy-side-title {
    min-height: 250px;
    padding: 80px 44px 40px;
  }

  .legacy-company-copy {
    padding: 46px 0 0;
  }
}

@media (max-width: 760px) {
  .legacy-about-wrap {
    width: min(100% - 32px, 1520px);
  }

  .legacy-about-hero {
    height: 300px;
    margin-top: 90px;
  }

  .legacy-about-hero-title h1 {
    font-size: 32px;
  }

  .legacy-company-copy h2,
  .legacy-section-title h2,
  .legacy-message-copy h2 {
    font-size: 30px;
  }

  .legacy-side-title strong {
    font-size: 32px;
  }

  .legacy-side-title span {
    font-size: 28px;
  }

  .legacy-company-copy p {
    font-size: 15.5px;
  }

  .legacy-slogan {
    min-width: 0;
    font-size: 18px;
  }

  .legacy-business-grid,
  .legacy-tech-grid,
  .legacy-message-form {
    grid-template-columns: 1fr;
  }

  .legacy-section-title span {
    font-size: 58px;
  }
}

/* Legacy About cbox interactions crawled from the original About.html loops. */
.legacy-business-grid.e_loop-112,
.legacy-tech-grid.e_loop-4 {
  display: block;
}

.legacy-business-grid.e_loop-112 > .p_list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
}

.legacy-business-card.cbox-112.p_loopitem {
  position: relative;
  min-height: 172px;
  padding: 20px 15px;
  border-radius: 10px;
  background: rgba(243, 250, 255, .9);
  box-shadow: none;
  transition: box-shadow .5s ease, background-color .5s ease;
}

.legacy-business-card.cbox-112.p_loopitem:hover {
  background: rgba(243, 250, 255, .96);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .1);
}

.legacy-business-card.cbox-112.p_loopitem .legacy-icon,
.legacy-business-card.cbox-112.p_loopitem:nth-child(8) .legacy-icon {
  position: relative;
  width: 80px;
  height: 80px;
  overflow: hidden;
  background: #fff;
  color: #74a3dd;
  transition: color .5s ease;
}

.legacy-business-card.cbox-112.p_loopitem .legacy-icon::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #74a3dd;
  transform: scale(0);
  transition: transform .5s ease;
}

.legacy-business-card.cbox-112.p_loopitem .legacy-icon svg {
  position: relative;
  z-index: 1;
  width: 42px;
  height: 42px;
  transition: color .5s ease, stroke .5s ease;
}

.legacy-business-card.cbox-112.p_loopitem:hover .legacy-icon {
  color: #fff;
}

.legacy-business-card.cbox-112.p_loopitem:hover .legacy-icon::after {
  transform: scale(1);
}

.legacy-tech-grid.e_loop-4 > .p_list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 36px;
  width: 93%;
  max-width: 1500px;
  margin: 0 auto;
}

.legacy-tech-card.cbox-4.p_loopitem {
  position: relative;
  min-height: 340px;
  overflow: hidden;
  border-radius: 25px;
  background: #fff;
  box-shadow: 0 0 50px 0 rgba(0, 0, 0, .05);
  animation: legacyFadeInUp .7s ease both;
}

.legacy-tech-card.cbox-4.p_loopitem:nth-child(2) { animation-delay: .08s; }
.legacy-tech-card.cbox-4.p_loopitem:nth-child(3) { animation-delay: .16s; }
.legacy-tech-card.cbox-4.p_loopitem:nth-child(4) { animation-delay: .24s; }

.legacy-tech-card.cbox-4.p_loopitem > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .06;
  filter: grayscale(.5);
  transition: opacity .4s ease, filter .4s ease, transform .4s ease;
}

.legacy-tech-card.cbox-4.p_loopitem::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(0deg, #fff 0%, rgba(255, 255, 255, 0) 100%);
  transition: background .4s ease;
}

.legacy-tech-card.cbox-4.p_loopitem .legacy-tech-content {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 8%;
}

.legacy-tech-card.cbox-4.p_loopitem .legacy-tech-icon {
  width: 76px;
  height: 76px;
  margin-bottom: 24px;
  color: #74a3dd;
  transition: opacity .35s ease, transform .35s ease;
}

.legacy-tech-card.cbox-4.p_loopitem h3,
.legacy-tech-card.cbox-4.p_loopitem p {
  transition: color .4s ease, font-size .4s ease;
}

.legacy-tech-card.cbox-4.p_loopitem:hover > img {
  opacity: 1;
  filter: grayscale(0);
  transform: scale(1.02);
}

.legacy-tech-card.cbox-4.p_loopitem:hover::after {
  background: linear-gradient(0deg, rgba(24, 67, 121, .9) 0%, rgba(30, 145, 70, 0) 100%);
}

.legacy-tech-card.cbox-4.p_loopitem:hover .legacy-tech-icon {
  opacity: 0;
  transform: translateY(-8px);
}

.legacy-tech-card.cbox-4.p_loopitem:hover h3 {
  color: #fff;
}

.legacy-tech-card.cbox-4.p_loopitem:hover p {
  color: rgba(255, 255, 255, .82);
  font-size: 15px;
  -webkit-line-clamp: 10;
}

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

@media (max-width: 1180px) {
  .legacy-business-grid.e_loop-112 > .p_list,
  .legacy-tech-grid.e_loop-4 > .p_list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .legacy-business-grid.e_loop-112 > .p_list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .legacy-tech-grid.e_loop-4 > .p_list {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .legacy-tech-card.cbox-4.p_loopitem {
    min-height: 320px;
  }
}
/* Legacy Contact page restored from Contact.html. */
.legacy-contact-page {
  background: #fff;
}

.legacy-contact-breadcrumb {
  margin-top: 90px;
}

.legacy-contact-panel {
  padding: 60px 0 80px;
  background: #fff;
}

.legacy-contact-card {
  display: grid;
  grid-template-columns: minmax(360px, 1fr) minmax(360px, 1fr);
  align-items: stretch;
  min-height: 474px;
}

.legacy-contact-map {
  position: relative;
  display: block;
  min-height: 474px;
  overflow: hidden;
  border: 1px solid #d8dfe6;
  background: #edf3f7;
  text-decoration: none;
}

.legacy-contact-map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.legacy-map-fallback {
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 2;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .92);
  color: #4d7fbe;
  font-size: 13px;
  box-shadow: 0 8px 24px rgba(18, 30, 42, .12);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .25s ease, transform .25s ease;
}

.legacy-contact-map:hover .legacy-map-fallback {
  opacity: 1;
  transform: translateY(0);
}

.legacy-contact-info {
  min-height: 474px;
  padding: 52px 78px;
  border-radius: 0 8px 8px 0;
  background: #f7f7f7;
  color: #202833;
}

.legacy-contact-info h1 {
  margin: 0 0 32px;
  font-size: 28px;
  line-height: 1.25;
  font-weight: 700;
  color: #202833;
}

.legacy-contact-info ul {
  display: grid;
  gap: 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.legacy-contact-info li {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #111827;
  font-size: 16px;
  line-height: 1.6;
}

.legacy-contact-info a {
  color: inherit;
  text-decoration: none;
}

.legacy-contact-ico {
  display: inline-grid;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  place-items: center;
  color: #5f91d5;
}

.legacy-contact-ico svg {
  width: 28px;
  height: 28px;
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.legacy-contact-qrs {
  display: flex;
  gap: 24px;
  margin-top: 18px;
  padding-left: 2px;
}

.legacy-contact-qrs figure {
  margin: 0;
  text-align: center;
}

.legacy-contact-qrs img {
  display: block;
  width: 96px;
  height: 96px;
  object-fit: contain;
  background: #fff;
}

.legacy-contact-qrs figcaption {
  margin-top: 10px;
  color: #222832;
  font-size: 16px;
  line-height: 1.2;
}

.legacy-contact-message-band {
  margin-top: 0;
}

@media (max-width: 1180px) {
  .legacy-contact-card {
    grid-template-columns: 1fr;
  }

  .legacy-contact-info {
    border-radius: 0 0 8px 8px;
  }
}

@media (max-width: 760px) {
  .legacy-contact-breadcrumb {
    margin-top: 90px;
  }

  .legacy-contact-panel {
    padding: 36px 0 48px;
  }

  .legacy-contact-card,
  .legacy-contact-map,
  .legacy-contact-info {
    min-height: 0;
  }

  .legacy-contact-map {
    aspect-ratio: 1 / .72;
  }

  .legacy-contact-info {
    padding: 34px 24px;
  }

  .legacy-contact-info h1 {
    font-size: 24px;
  }

  .legacy-contact-info li {
    align-items: flex-start;
    font-size: 15px;
  }

  .legacy-contact-qrs {
    gap: 18px;
  }

  .legacy-contact-qrs img {
    width: 86px;
    height: 86px;
  }
}
/* Contact hero restoration: breadcrumb follows the hero directly. */
.legacy-contact-page .legacy-contact-breadcrumb {
  margin-top: 0;
}

@media (max-width: 760px) {
  .legacy-contact-page .legacy-contact-breadcrumb {
    margin-top: 0;
  }
}
/* Contact map lightweight default: static Baidu image with local fallback. */
.legacy-contact-map {
  color: inherit;
}

.legacy-contact-map .legacy-map-static,
.legacy-contact-map .legacy-map-lite {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.legacy-contact-map .legacy-map-static {
  z-index: 2;
  display: block;
  object-fit: cover;
}

.legacy-contact-map .legacy-map-lite {
  z-index: 1;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(246, 249, 251, .72) 0 2px, transparent 2px 100px),
    linear-gradient(0deg, rgba(246, 249, 251, .72) 0 2px, transparent 2px 100px),
    #e9f1f4;
}

.legacy-contact-map.is-static-failed .legacy-map-lite {
  z-index: 2;
}

.legacy-map-water {
  position: absolute;
  display: block;
  height: 3px;
  border-radius: 999px;
  background: #58d5ef;
  opacity: .85;
  transform-origin: left center;
}

.legacy-map-water-a {
  left: 8%;
  top: 42%;
  width: 68%;
  transform: rotate(-9deg);
}

.legacy-map-water-b {
  right: 0;
  top: 56%;
  width: 42%;
  transform: rotate(13deg);
}

.legacy-map-park {
  position: absolute;
  left: 42%;
  top: 23%;
  width: 18%;
  height: 20%;
  display: grid;
  place-items: center;
  border-radius: 50% 48% 44% 56%;
  background: #b7f0bf;
  color: #489761;
  font-size: 13px;
}

.legacy-map-road {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #666f78;
  font-size: 13px;
  background: #ffd985;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .76) inset;
}

.legacy-road-v {
  width: 10px;
  height: 96%;
  top: 2%;
  writing-mode: vertical-rl;
}

.legacy-road-v1 { left: 27%; }
.legacy-road-v2 { left: 58%; }

.legacy-road-h {
  height: 10px;
  width: 90%;
  left: 5%;
}

.legacy-road-h1 { top: 21%; }
.legacy-road-h2 { top: 72%; }

.legacy-map-pin {
  position: absolute;
  left: 56%;
  top: 67%;
  z-index: 3;
  display: grid;
  gap: 2px;
  padding: 10px 14px 10px 34px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 12px 28px rgba(18, 30, 42, .18);
  color: #202833;
  transform: translate(-50%, -100%);
  white-space: nowrap;
}

.legacy-map-pin::before {
  content: '';
  position: absolute;
  left: 12px;
  top: 13px;
  width: 14px;
  height: 14px;
  border-radius: 50% 50% 50% 0;
  background: #d52525;
  transform: rotate(-45deg);
}

.legacy-map-pin strong {
  font-size: 14px;
  line-height: 1.25;
}

.legacy-map-pin em {
  font-style: normal;
  color: #66717b;
  font-size: 12px;
}

.legacy-contact-map .legacy-map-fallback {
  z-index: 4;
}

@media (max-width: 760px) {
  .legacy-map-pin {
    left: 54%;
    max-width: calc(100% - 36px);
    white-space: normal;
  }
}
/* Unified header dropdown navigation. */
header .bar {
  overflow: visible;
}

nav.menu {
  align-items: stretch;
}

nav.menu > a,
nav.menu .menu-item > a {
  display: inline-flex;
  align-items: center;
}

nav.menu .menu-item {
  position: relative;
  display: inline-flex;
  align-items: stretch;
}

nav.menu .has-submenu .submenu {
  position: absolute;
  top: calc(100% - 8px);
  left: 50%;
  z-index: 120;
  width: min(320px, calc(100vw - 48px));
  max-height: min(520px, calc(100vh - 122px));
  overflow-y: auto;
  padding: 10px;
  border: 1px solid rgba(38, 74, 102, .12);
  border-top: 3px solid #264a66;
  border-radius: 6px;
  background: rgba(255, 255, 255, .98);
  box-shadow: 0 24px 54px -34px rgba(18, 30, 42, .66), 0 12px 28px -22px rgba(18, 30, 42, .4);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 12px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
  scrollbar-width: thin;
  scrollbar-color: rgba(38, 74, 102, .36) transparent;
}

nav.menu .has-submenu .submenu::-webkit-scrollbar {
  width: 6px;
}

nav.menu .has-submenu .submenu::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(38, 74, 102, .28);
}

nav.menu .has-submenu .submenu::before {
  content: "";
  position: absolute;
  top: -8px;
  left: 50%;
  width: 12px;
  height: 12px;
  border-left: 1px solid rgba(38, 74, 102, .12);
  border-top: 1px solid rgba(38, 74, 102, .12);
  background: #fff;
  transform: translateX(-50%) rotate(45deg);
}

nav.menu .has-submenu:hover .submenu,
nav.menu .has-submenu:focus-within .submenu {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

nav.menu .has-submenu .submenu a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 46px;
  height: auto;
  padding: 11px 13px 11px 16px;
  border: 0;
  border-radius: 4px;
  color: #222832 !important;
  font-size: 15px;
  font-weight: 420;
  line-height: 1.45;
  text-decoration: none;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}

nav.menu .has-submenu .submenu a + a {
  margin-top: 2px;
}

nav.menu .has-submenu .submenu a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 11px;
  bottom: 11px;
  width: 3px;
  border-radius: 999px;
  background: #264a66;
  opacity: 0;
  transform: scaleY(.45);
  transition: opacity .18s ease, transform .18s ease;
}

nav.menu .has-submenu .submenu a::after {
  display: none;
}

nav.menu .has-submenu .submenu a:hover,
nav.menu .has-submenu .submenu a:focus-visible {
  color: #18364c !important;
  background: rgba(38, 74, 102, .07);
  transform: translateX(2px);
  outline: none;
}

nav.menu .has-submenu .submenu a:hover::before,
nav.menu .has-submenu .submenu a:focus-visible::before {
  opacity: 1;
  transform: scaleY(1);
}

nav.menu .submenu-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

nav.menu .submenu-arrow {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-top: 1.6px solid currentColor;
  border-right: 1.6px solid currentColor;
  opacity: .42;
  transform: rotate(45deg);
  transition: opacity .18s ease, transform .18s ease;
}

nav.menu .has-submenu .submenu a:hover .submenu-arrow,
nav.menu .has-submenu .submenu a:focus-visible .submenu-arrow {
  opacity: .8;
  transform: translateX(2px) rotate(45deg);
}

@media (max-width: 980px) {
  nav.menu .has-submenu .submenu {
    display: none;
  }
}
/* Header dropdown positioning polish. */
nav.menu {
  align-self: stretch;
}

nav.menu > a,
nav.menu .menu-item > a {
  height: 100%;
}

nav.menu > a::after,
nav.menu .menu-item > a::after {
  bottom: 0;
}

nav.menu .has-submenu .submenu {
  top: 100%;
}

nav.menu .has-submenu .submenu a span::before {
  content: none;
  display: none;
}
/* Reference breadcrumb placement: separate white band after inner-page hero. */
.page-hero .crumb {
  display: none;
}

.page-breadcrumb-band,
.product-breadcrumb-band {
  position: relative;
  z-index: 3;
  background: #fff;
  border-top: 1px solid rgba(16, 24, 32, .06);
  border-bottom: 1px solid #e5e8eb;
}

.page-breadcrumb-band .wrap,
.product-breadcrumb-band .wrap {
  min-height: 54px;
  display: flex;
  align-items: center;
}

.page-breadcrumb,
.product-breadcrumb {
  min-height: 54px;
  padding: 0;
  color: #5d6c76;
  font-size: 15px;
  font-weight: 400;
}

.page-breadcrumb li + li::before,
.product-breadcrumb li + li::before {
  content: "/";
  color: #8d98a1;
  font-size: 14px;
  margin-right: 8px;
}

.page-breadcrumb a,
.product-breadcrumb a {
  color: #3f5362;
}

.page-breadcrumb li:first-child a::before,
.product-breadcrumb li:first-child a::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 5px;
  vertical-align: -2px;
  background: #5b98d6;
  clip-path: polygon(50% 0, 100% 42%, 100% 100%, 64% 100%, 64% 62%, 36% 62%, 36% 100%, 0 100%, 0 42%);
}

.page-breadcrumb [aria-current="page"],
.product-breadcrumb [aria-current="page"] {
  color: #2b3740;
  font-weight: 420;
}

@media (max-width: 620px) {
  .page-breadcrumb-band .wrap,
  .product-breadcrumb-band .wrap {
    min-height: 48px;
  }

  .page-breadcrumb,
  .product-breadcrumb {
    min-height: 48px;
    font-size: 13px;
  }
}
/* Tighter archive spacing after breadcrumb. */
.post-type-archive-ht_product .product-archive-shell,
.tax-ht_product_category .product-archive-shell,
.post-type-archive-ht_news .news-section,
.tax-ht_news_category .news-section,
.post-type-archive-ht_video .video-section,
.tax-ht_video_category .video-section {
  padding-top: 34px !important;
}

@media (min-width: 981px) {
  .post-type-archive-ht_product .product-archive-shell,
  .tax-ht_product_category .product-archive-shell,
  .post-type-archive-ht_news .news-section,
  .tax-ht_news_category .news-section,
  .post-type-archive-ht_video .video-section,
  .tax-ht_video_category .video-section {
    padding-top: calc(34 * var(--board-u)) !important;
  }
}

@media (max-width: 620px) {
  .post-type-archive-ht_product .product-archive-shell,
  .tax-ht_product_category .product-archive-shell,
  .post-type-archive-ht_news .news-section,
  .tax-ht_news_category .news-section,
  .post-type-archive-ht_video .video-section,
  .tax-ht_video_category .video-section {
    padding-top: 24px !important;
  }
}
/* Admin-replaceable homepage hero image. */
.hero-bg {
  background-image: var(--home-hero-image, url("../img/4d894cfd50.webp"));
}

/* Homepage news cards should fill the available row even when fewer than four items exist. */
.home .news-section .news-list-grid,
.front-page .news-section .news-list-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  width: 100%;
}

@media (min-width: 981px) {
  .home .news-section .news-list-grid,
  .front-page .news-section .news-list-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }
}

/* Homepage technology highlights: dark image cards that reveal copy on hover. */
.highlights-block {
  background: #fff;
}

.highlights-block .sec-head {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.highlights-block .sec-sub {
  margin-left: auto;
  margin-right: auto;
}

.hl-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 30px;
}

.hl-card {
  position: relative;
  display: block;
  height: 420px;
  overflow: hidden;
  border-radius: var(--r);
  background: #101820;
  color: #fff;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}

.hl-card:hover,
.hl-card:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 24px 58px -40px rgba(18, 30, 42, .52);
}

.hl-card:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
}

.hl-media {
  position: absolute;
  inset: 0;
  display: block;
}

.hl-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 16, 22, .06) 0%, rgba(10, 16, 22, .30) 45%, rgba(10, 16, 22, .84) 100%);
  pointer-events: none;
}

.hl-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .5;
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}

.hl-card:hover .hl-media img,
.hl-card:focus-visible .hl-media img {
  opacity: .72;
  transform: scale(1.08);
}

.hl-body {
  position: absolute;
  inset: auto 0 0;
  z-index: 2;
  display: block;
  padding: 0 26px 30px;
}

.hl-index {
  display: block;
  margin-bottom: 10px;
  color: rgba(255, 255, 255, .55);
  font-family: var(--font-data);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .12em;
  line-height: 1;
}

.hl-title {
  display: block;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.3;
  color: #fff;
  text-shadow: 0 1px 4px rgba(6, 12, 18, .58);
}

.hl-text {
  display: block;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(10px);
  color: rgba(255, 255, 255, .92);
  font-size: 14px;
  line-height: 1.75;
  text-shadow: 0 1px 4px rgba(6, 12, 18, .62);
  transition: max-height .5s var(--ease), margin-top .5s var(--ease), opacity .5s var(--ease), transform .5s var(--ease);
}

.hl-card:hover .hl-text,
.hl-card:focus-visible .hl-text {
  max-height: 180px;
  margin-top: 14px;
  opacity: 1;
  transform: none;
}

/* No hover on touch, and narrow viewports get the copy up front either way:
   some Android browsers report `hover: hover` even without a pointer. */
@media (hover: none), (max-width: 640px) {
  .hl-media img {
    opacity: .62;
  }

  .hl-text {
    max-height: 180px;
    margin-top: 14px;
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 1439px) {
  .hl-card {
    height: 390px;
  }

  .hl-title {
    font-size: 22px;
  }
}

@media (max-width: 980px) {
  .hl-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }
}

@media (max-width: 640px) {
  .hl-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  .hl-card {
    height: 300px;
  }

  .hl-body {
    padding: 0 22px 26px;
  }
}

/* Homepage news heading joins the centered rhythm of the sections above it.
   Scoped to the front page: the news archive and category pages keep their own alignment. */
.home .news-section .sec-head,
.front-page .news-section .sec-head {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.home .news-section .sec-sub,
.front-page .news-section .sec-sub {
  margin-left: auto;
  margin-right: auto;
}

/* Homepage product business: one card per product category.
   Card frame and copy flip to brand teal on hover; the media plate stays white so
   product shots keep their own light backdrop instead of showing a pale block. */
.business-block .sec-head {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.business-block .sec-sub {
  margin-left: auto;
  margin-right: auto;
}

.pb-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 30px;
}

.pb-card {
  display: flex;
  flex-direction: column;
  padding: 34px 22px 26px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: #fff;
  transition: background .5s var(--ease), border-color .5s var(--ease), transform .5s var(--ease), box-shadow .5s var(--ease);
}

.pb-card:hover,
.pb-card:focus-visible {
  background: var(--teal);
  border-color: var(--teal);
  transform: translateY(-4px);
  box-shadow: 0 24px 58px -40px rgba(18, 30, 42, .52);
}

.pb-card:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
}

.pb-head {
  display: block;
  text-align: center;
}

.pb-name {
  display: block;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--heading);
  transition: color .5s var(--ease);
}

.pb-card:hover .pb-name,
.pb-card:focus-visible .pb-name {
  color: #fff;
}

.pb-more {
  display: block;
  width: 132px;
  height: 40px;
  margin: 18px auto 0;
  border: 1px solid var(--teal);
  border-radius: 30px;
  color: var(--teal);
  font-size: 14px;
  line-height: 38px;
  text-align: center;
  opacity: 0;
  transition: opacity .5s var(--ease), color .5s var(--ease), border-color .5s var(--ease);
}

.pb-card:hover .pb-more,
.pb-card:focus-visible .pb-more {
  border-color: rgba(255, 255, 255, .85);
  color: #fff;
  opacity: 1;
}

.pb-media {
  display: block;
  height: 225px;
  margin-top: 22px;
  padding: 10px;
  border-radius: 4px;
  background: #fff;
  overflow: hidden;
}

/* The image box fills the plate and `contain` does the fitting. Sizing the box
   with max-height:100% instead would be ignored: a percentage against an
   auto-sized grid row is cyclic, so portrait images overflowed and got clipped. */
.pb-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform .5s var(--ease);
}

.pb-card:hover .pb-media img,
.pb-card:focus-visible .pb-media img {
  transform: scale(1.05);
}

/* No hover on touch: show the button so the card does not look unfinished. */
@media (hover: none), (max-width: 640px) {
  .pb-more {
    opacity: 1;
  }
}

@media (max-width: 1439px) {
  .pb-name {
    font-size: 17px;
  }

  .pb-media {
    height: 195px;
  }
}

@media (max-width: 980px) {
  .pb-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }
}

@media (max-width: 640px) {
  .pb-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  .pb-card {
    padding: 28px 20px 22px;
  }

  .pb-media {
    height: 200px;
  }
}

/* Homepage customer cases: image cards whose copy panel unfolds on hover.
   Mirrors the reference behaviour (rotateY 270deg -> 360deg, rule grows to 40%). */
.cases-block {
  background: var(--clinic);
}

.cases-block .sec-head {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.cases-block .sec-sub {
  margin-left: auto;
  margin-right: auto;
}

.case-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 30px;
}

.case-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: #fff;
  overflow: hidden;
  transition: box-shadow .36s var(--ease), transform .36s var(--ease), border-color .36s var(--ease);
}

.case-card:hover,
.case-card:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 24px 58px -40px rgba(18, 30, 42, .52);
}

.case-card:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
}

.cc-media {
  position: relative;
  display: block;
  padding-top: 68%;
  overflow: hidden;
}

.cc-media img {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
  object-fit: cover;
  transition: transform .5s var(--ease);
}

.cc-panel {
  position: absolute;
  inset: 10%;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 6%;
  border-radius: var(--r);
  background: rgba(255, 255, 255, .9);
  opacity: 0;
  transform: rotateY(270deg);
  transition: opacity .36s cubic-bezier(.42, 0, 1, 1), transform .36s cubic-bezier(.42, 0, 1, 1);
}

.case-card:hover .cc-panel,
.case-card:focus-visible .cc-panel {
  opacity: 1;
  transform: rotateY(360deg);
}

.cc-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--heading);
}

.cc-text {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 15px;
  font-size: 14px;
  line-height: 1.8;
  color: var(--muted);
}

.cc-rule {
  display: block;
  width: 0;
  margin-top: 16px;
  border-bottom: 4px solid var(--teal);
  transition: width .36s cubic-bezier(.42, 0, 1, 1);
}

.case-card:hover .cc-rule,
.case-card:focus-visible .cc-rule {
  width: 40%;
}

/* 文字块原本是盖在图片上、悬停才翻出来的浮层。用户要求挪到图片下面，
   所以改回正常文档流：图在上、字在下，一进页面就能看全。 */
.cc-panel {
  position: static;
  inset: auto;
  flex: 1;
  justify-content: flex-start;
  padding: 20px 22px 22px;
  border-radius: 0;
  background: #fff;
  opacity: 1;
  transform: none;
  transition: none;
}

.case-card:hover .cc-panel,
.case-card:focus-visible .cc-panel {
  transform: none;
}

.case-card:hover,
.case-card:focus-visible {
  border-color: rgba(14, 143, 156, .4);
}

/* 卡片总高固定，图片吃掉剩下的空间。这样悬停展开介绍时，
   图片自己收窄，卡片和整行的高度都不动。 */
.case-grid-3 .case-card {
  height: 400px;
}

.case-grid-3 .cc-media {
  flex: 1 1 auto;
  min-height: 0;
  padding-top: 0;
}

.case-grid-3 .cc-media img {
  left: 0;
  top: 0;
  transform: none;
}

.cc-panel {
  flex: none;
}

/* 标题只留一行，超了省略号。 */
.cc-title {
  -webkit-line-clamp: 1;
  line-clamp: 1;
  font-size: 17px;
}

/* 介绍平时收起来，鼠标停上去才展开。 */
.cc-text {
  -webkit-line-clamp: 3;
  line-clamp: 3;
  max-height: 0;
  margin-top: 0;
  opacity: 0;
  transition: max-height .36s var(--ease), margin-top .36s var(--ease), opacity .36s var(--ease);
}

.case-card:hover .cc-text,
.case-card:focus-visible .cc-text {
  max-height: 78px;
  margin-top: 10px;
  opacity: 1;
}

@media (hover: none), (max-width: 640px) {
  .cc-text {
    max-height: 78px;
    margin-top: 10px;
    opacity: 1;
  }
}

/* 那条青色短线原来是悬停才展开的，现在常驻，悬停时再长一点。 */
.cc-rule {
  width: 28%;
  margin-top: 16px;
  padding-top: 0;
}

.case-card:hover .cc-rule,
.case-card:focus-visible .cc-rule {
  width: 40%;
}

@media (max-width: 640px) {
  .cc-panel {
    padding: 16px 18px 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cc-panel {
    transform: none;
    transition: opacity .2s linear;
  }

  .cc-media img,
  .cc-rule {
    transition: none;
  }
}

@media (max-width: 980px) {
  .case-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }
}

@media (max-width: 640px) {
  .case-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  .cc-media {
    padding-top: 56%;
  }

  /* The overlay panel is taller than a phone-width card, so the copy would be
     clipped mid-line. Below 640px it becomes a normal block under the image. */
  .case-card {
    background: #fff;
  }

  .cc-panel {
    position: static;
    inset: auto;
    padding: 20px 22px 24px;
    border-radius: 0;
    background: #fff;
  }

  .cc-title {
    -webkit-line-clamp: 3;
  }
}

/* ------------------------------------------------------------------
   Horizontal rail: a scrollable row with prev/next buttons.
   Shared component -- any block can wrap items in
   .rail > .rail-viewport > .rail-track > .rail-item and add the
   buttons from humantech_rail_buttons().
   --rail-per controls how many items fit one screen at each breakpoint.
   ------------------------------------------------------------------ */
.rail {
  --rail-gap: 24px;
  --rail-per: 4;
  position: relative;
}

.rail-viewport {
  overflow-x: auto;
  overflow-y: hidden;
  /* Cards lift on hover; the padding keeps the lift and its shadow from
     being clipped by the scroll container. Vertical only -- horizontal
     negative margin would poke outside wraps that have no side padding. */
  padding: 10px 0 18px;
  margin: -10px 0 -18px;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior-x: contain;
}

.rail-viewport::-webkit-scrollbar {
  display: none;
}

.rail-track {
  display: flex;
  align-items: stretch;
  gap: var(--rail-gap);
}

.rail-item {
  flex: 0 0 calc((100% - (var(--rail-per) - 1) * var(--rail-gap)) / var(--rail-per));
  min-width: 0;
  display: flex;
}

.rail-item > * {
  width: 100%;
}

.rail-btn {
  position: absolute;
  top: 50%;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-top: -22px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: rgba(255, 255, 255, .94);
  color: var(--heading);
  box-shadow: 0 14px 34px -18px rgba(10, 38, 52, .42);
  cursor: pointer;
  transition: background .3s var(--ease), color .3s var(--ease), opacity .3s var(--ease), border-color .3s var(--ease);
}

.rail-btn svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.rail-btn:hover:not(:disabled) {
  background: var(--teal);
  border-color: var(--teal);
  color: #fff;
}

.rail-btn:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
}

.rail-btn:disabled {
  opacity: .34;
  cursor: default;
}

.rail-prev {
  left: -14px;
}

.rail-next {
  right: -14px;
}

/* Nothing to scroll (fewer items than one screen): hide the controls. */
.rail-static .rail-btn {
  display: none;
}

@media (max-width: 1180px) {
  .rail {
    --rail-per: 3;
  }
}

@media (max-width: 980px) {
  .rail {
    --rail-gap: 20px;
    --rail-per: 2.2;
  }

  /* No room for outside buttons; touch swipe carries the interaction. */
  .rail-btn {
    display: none;
  }
}

@media (max-width: 640px) {
  .rail {
    --rail-gap: 16px;
    --rail-per: 1.15;
  }
}

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

/* Homepage news rail: keep the card height even when titles are short. */
.home .news-rail .news-list-card,
.front-page .news-rail .news-list-card {
  min-height: 100%;
}

/* ------------------------------------------------------------------
   Tag navigation. Same markup twice: a dark band above the footer
   bottom bar, and the sidebar of the tag archive.
   ------------------------------------------------------------------ */
.tag-nav-title {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 650;
  letter-spacing: .02em;
}

.tag-nav-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.tag-nav-list a {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: inherit;
  font-size: 14px;
  line-height: 1.4;
  text-decoration: none;
  transition: background .28s var(--ease), border-color .28s var(--ease), color .28s var(--ease);
}

/* Footer band. */
.tag-nav-footer {
  margin-top: 44px;
  padding-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, .08);
}

.tag-nav-footer .tag-nav-title {
  margin-bottom: 16px;
  color: #fff;
}

.tag-nav-footer .tag-nav-list a {
  border-color: rgba(255, 255, 255, .16);
  color: rgba(255, 255, 255, .7);
}

.tag-nav-footer .tag-nav-list a:hover,
.tag-nav-footer .tag-nav-list a:focus-visible {
  border-color: rgba(255, 255, 255, .42);
  background: rgba(255, 255, 255, .07);
  color: #fff;
}

.tag-nav-footer + .footer-bottom {
  margin-top: 30px;
}

/* Tag archive sidebar: stacked list, matching the product category side. */
.tag-nav-side .tag-nav-title {
  margin-bottom: 14px;
  padding: 12px 18px;
  border-radius: var(--r);
  background: var(--heading);
  color: #fff;
  font-size: 15.5px;
}

.tag-nav-side .tag-nav-list {
  flex-direction: column;
  gap: 8px;
}

.tag-nav-side .tag-nav-list a {
  justify-content: flex-start;
  border-radius: var(--r);
  background: #fff;
  color: var(--heading);
  font-size: 14.5px;
}

.tag-nav-side .tag-nav-list a:hover,
.tag-nav-side .tag-nav-list a:focus-visible,
.tag-nav-side .tag-nav-list a.active {
  border-color: var(--teal);
  background: var(--teal);
  color: #fff;
}

/* ------------------------------------------------------------------
   Tag archive: one group per content type, compact rows so a tag with
   only a couple of matches does not leave a tall empty page.
   ------------------------------------------------------------------ */
.tag-archive-shell {
  padding-top: 34px;
  padding-bottom: 56px;
  background: linear-gradient(180deg, #f6f9fa 0%, #fff 60%);
}

.tag-layout {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}

.tag-group + .tag-group {
  margin-top: 34px;
}

.tag-group-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--heading);
}

.tag-group-title a {
  color: inherit;
  text-decoration: none;
}

.tag-group-title a:hover {
  color: var(--teal);
}

.tag-group-count {
  padding: 2px 9px;
  border-radius: 999px;
  background: rgba(14, 143, 156, .12);
  color: var(--teal);
  font-size: 12.5px;
  font-weight: 650;
}

.tag-rows {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tag-row {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 18px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: #fff;
  text-decoration: none;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease);
}

.tag-row:hover,
.tag-row:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(14, 143, 156, .34);
  box-shadow: 0 18px 44px -32px rgba(10, 38, 52, .38);
}

.tr-media {
  display: block;
  height: 88px;
  border-radius: 4px;
  background: #eef3f5;
  overflow: hidden;
}

.tr-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tr-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  min-width: 0;
}

.tr-title {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-family: var(--font-display);
  font-size: 15.5px;
  font-weight: 650;
  color: var(--heading);
}

.tag-row:hover .tr-title {
  color: var(--teal);
}

.tr-text {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 13.5px;
  line-height: 1.78;
  color: var(--muted);
}

@media (max-width: 900px) {
  .tag-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  .tag-nav-side .tag-nav-list {
    flex-direction: row;
  }
}

@media (max-width: 560px) {
  .tag-row {
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 14px;
  }

  .tr-media {
    height: 70px;
  }

  .tr-title {
    -webkit-line-clamp: 2;
  }

  .tr-text {
    display: none;
  }
}

/* ------------------------------------------------------------------
   Product listings: a fixed 3 x 2 board (posts_per_page is 6), and the
   card description now slides up as a band over the lower part of the
   image instead of being hidden.
   ------------------------------------------------------------------ */
.product-catalog-grid,
.product-archive-shell .product-catalog-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px 22px;
}

.product-catalog-grid .prod .pimg {
  height: 268px;
}

.product-archive-shell .product-catalog-grid .prod .pimg {
  height: 240px;
}

.product-catalog-grid .prod .pbody {
  min-height: 168px;
}

@media (min-width: 981px) {
  .product-catalog-grid,
  .product-archive-shell .product-catalog-grid {
    gap: calc(26 * var(--board-u)) calc(22 * var(--board-u));
  }

  .product-catalog-grid .prod .pimg {
    height: calc(268 * var(--board-u));
  }

  .product-archive-shell .product-catalog-grid .prod .pimg {
    height: calc(240 * var(--board-u));
  }

  .product-catalog-grid .prod .pbody {
    min-height: calc(168 * var(--board-u));
  }
}

@media (max-width: 1080px) {
  .product-catalog-grid,
  .product-archive-shell .product-catalog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .product-catalog-grid,
  .product-archive-shell .product-catalog-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Hover description: a band across the lower part of the product image. */
.pintro {
  inset: auto 0 0 0;
  align-items: center;
  justify-content: flex-start;
  height: 47%;
  padding: 14px 20px;
  background: linear-gradient(180deg, rgba(14, 22, 30, .78), rgba(14, 22, 30, .93));
  transform: translateY(100%);
}

.pintro p {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-width: none;
  font-size: 13.5px;
  line-height: 1.7;
  text-align: left;
}

.prod:hover .pintro,
.prod:focus-visible .pintro {
  transform: translateY(0);
}

/* The catalog board used to hide the hover copy entirely. */
.product-archive-shell .product-catalog-grid .prod .pintro {
  display: flex;
  /* The image sits inside 22px/10px padding, so inset the band to match. */
  inset: auto 0 0 0;
  border-radius: 0 0 4px 4px;
}

@media (hover: none) {
  /* Touch devices never hover: the band would be unreachable, so leave the
     image clean and rely on the description under the title. */
  .pintro {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pintro {
    transition: opacity .2s linear;
    transform: none;
    opacity: 0;
  }

  .prod:hover .pintro {
    opacity: 1;
  }
}

/* ------------------------------------------------------------------
   Product detail page pass.
   ------------------------------------------------------------------ */

/* The product name is now the page H1, and it was sized like a banner. */
.product-summary-title-row h1,
.product-summary-panel h1 {
  margin: 0;
  color: #2d3035;
  font-family: "HarmonyOS Sans SC", "PingFang SC", "MiSans", system-ui, sans-serif;
  font-size: clamp(24px, 1.85vw, 32px);
  font-weight: 600;
  line-height: 1.34;
  letter-spacing: 0;
}

.product-summary-title-row {
  margin-bottom: 20px;
}

/* Category is a link in both the summary card and the sidebar. */
.product-spec-card .product-summary-meta strong a,
.product-detail-side .side-field p a {
  color: var(--teal);
  text-decoration: none;
  border-bottom: 1px solid rgba(14, 143, 156, .34);
  transition: color .26s var(--ease), border-color .26s var(--ease);
}

.product-spec-card .product-summary-meta strong a:hover,
.product-detail-side .side-field p a:hover {
  color: #0b6f7a;
  border-color: currentColor;
}

/* Left-aligned name + intro block between the gallery and the content blocks. */
.product-lede {
  margin-top: 40px;
  padding: 26px 30px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--teal);
  border-radius: 4px;
  background: #fff;
  text-align: left;
}

.product-lede-title {
  margin: 0;
  color: var(--heading);
  font-family: var(--font-display);
  font-size: clamp(19px, 1.5vw, 24px);
  font-weight: 700;
  line-height: 1.4;
}

.product-lede-text {
  margin: 12px 0 0;
  max-width: 980px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.9;
}

/* Content blocks: one column of cards, the aside stays on the right. */
.product-detail-blocks {
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-width: 0;
}

/* These were tall enough to stretch the page; trim the padding and headings. */
.product-detail-main {
  padding: clamp(22px, 2.2vw, 32px);
}

.detail-section-head {
  margin-bottom: 14px;
}

.detail-section-head h2 {
  margin: 8px 0 0;
  font-size: clamp(20px, 1.6vw, 26px);
}

.product-content-body,
.product-feature-body {
  font-size: 14.5px;
  line-height: 1.9;
}

.product-feature-main {
  grid-column: auto;
}

@media (min-width: 981px) {
  .product-detail-main {
    padding: calc(32 * var(--board-u));
  }

  .detail-section-head h2 {
    font-size: calc(26 * var(--board-u));
  }
}

/* Supported procedures: a compact two-column checklist. */
.product-procedure-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.product-procedure-list li {
  position: relative;
  padding-left: 20px;
  color: #4c555d;
  font-size: 14.5px;
  line-height: 1.85;
}

.product-procedure-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .78em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--teal);
}

/* Model parameters: label / value rows. */
.product-spec-list {
  margin: 0;
  border-top: 1px solid var(--line);
}

.product-spec-row {
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr);
  gap: 16px;
  padding: 11px 4px;
  border-bottom: 1px solid var(--line);
}

.product-spec-row dt {
  margin: 0;
  color: var(--heading);
  font-size: 14.5px;
  font-weight: 650;
}

.product-spec-row dd {
  margin: 0;
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.8;
}

@media (max-width: 700px) {
  .product-procedure-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .product-spec-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }

  .product-lede {
    margin-top: 28px;
    padding: 20px 22px;
  }
}

/* ------------------------------------------------------------------
   Previous / next links under a detail page.
   ------------------------------------------------------------------ */
.post-nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 30px;
}

.post-nav-item {
  display: flex;
  align-items: baseline;
  gap: 12px;
  min-width: 0;
  padding: 16px 20px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #fff;
}

.post-nav-item.next {
  justify-content: flex-end;
  text-align: right;
}

.pn-label {
  flex: none;
  color: var(--heading);
  font-size: 13.5px;
  font-weight: 650;
}

.post-nav-item a {
  overflow: hidden;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.7;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color .26s var(--ease);
}

.post-nav-item a:hover {
  color: var(--teal);
}

.pn-none {
  color: #a9b1b7;
  font-size: 14px;
}

@media (max-width: 640px) {
  .post-nav {
    grid-template-columns: minmax(0, 1fr);
  }

  .post-nav-item.next {
    justify-content: flex-start;
    text-align: left;
  }
}

/* ------------------------------------------------------------------
   Related products: four smaller cards on a rail, description on hover.
   ------------------------------------------------------------------ */
.related-rail {
  --rail-per: 4;
  margin-top: 4px;
}

.related-rail .prod {
  display: flex;
  flex-direction: column;
  min-height: auto;
  padding: 14px;
  border: 1px solid #e4e8eb;
  border-radius: 12px;
  background: #fff;
  box-shadow: none;
  overflow: hidden;
}

.related-rail .prod:hover {
  border-color: #d7dee3;
  transform: translateY(-4px);
  box-shadow: 0 22px 50px -40px rgba(15, 31, 45, .45);
}

.related-rail .prod .pimg {
  height: 186px;
  padding: 14px 12px 8px;
  border: 0;
  border-radius: 8px 8px 4px 4px;
  background: #fff;
}

.related-rail .prod .pbody {
  min-height: auto;
  padding: 0;
  border: 0;
  background: transparent;
}

.related-rail .prod .pbody p,
.related-rail .prod .more {
  display: none;
}

.related-rail .prod .pintro {
  display: flex;
  height: 52%;
  padding: 12px 14px;
}

.related-rail .prod .pintro p {
  -webkit-line-clamp: 3;
  font-size: 12.5px;
  line-height: 1.62;
}

.related-rail .prod h4 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 52px;
  margin: 12px 0 0;
  padding: 0 12px;
  border-radius: 6px;
  background: #264a66;
  color: #fff;
  font-family: "HarmonyOS Sans SC", "PingFang SC", "MiSans", system-ui, sans-serif;
  font-size: 14px;
  font-weight: 360;
  line-height: 1.35;
  text-align: center;
}

.related-rail .prod:hover h4 {
  background: #1f425c;
}

@media (max-width: 1180px) {
  .related-rail {
    --rail-per: 3;
  }
}

@media (max-width: 980px) {
  .related-rail {
    --rail-per: 2.2;
  }
}

@media (max-width: 640px) {
  .related-rail {
    --rail-per: 1.2;
  }
}

/* ------------------------------------------------------------------
   Gallery zoom: a lens over the image with a magnified pane beside it,
   plus an in-page lightbox for the magnifier button.
   ------------------------------------------------------------------ */
.product-media-carousel {
  position: relative;
}

.product-zoom-lens {
  position: absolute;
  z-index: 3;
  display: none;
  border: 1px solid rgba(255, 255, 255, .8);
  background: rgba(38, 74, 102, .18);
  box-shadow: 0 0 0 1px rgba(38, 74, 102, .3);
  pointer-events: none;
}

.product-zoom-pane {
  position: absolute;
  left: calc(100% + 26px);
  top: 0;
  z-index: 20;
  display: none;
  width: min(520px, 42vw);
  height: 420px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background-color: #fff;
  background-repeat: no-repeat;
  box-shadow: 0 30px 70px -40px rgba(10, 38, 52, .5);
  pointer-events: none;
}

@media (hover: hover) and (min-width: 1100px) {
  .product-media-carousel.is-zooming .product-zoom-lens,
  .product-media-carousel.is-zooming .product-zoom-pane {
    display: block;
  }
}

.media-lightbox {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 40px clamp(16px, 4vw, 64px);
  background: rgba(8, 14, 20, .88);
}

.media-lightbox[hidden] {
  display: none;
}

.media-lightbox img {
  display: block;
  max-width: 100%;
  max-height: calc(100vh - 80px);
  margin: 0 auto;
  object-fit: contain;
}

.ml-close,
.ml-nav {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  color: #fff;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  transition: background .26s var(--ease);
}

.ml-close {
  position: absolute;
  right: clamp(16px, 4vw, 48px);
  top: 24px;
}

.ml-close:hover,
.ml-nav:hover {
  background: rgba(255, 255, 255, .2);
}

body.has-lightbox {
  overflow: hidden;
}

/* The zoom pane sits beside the gallery, so the panel must not clip it. */
.product-media-panel {
  overflow: visible;
}

/* ------------------------------------------------------------------
   News listings: a 3 x 3 board (posts_per_page is 9), a hover
   description over the image, a tighter title box and the publish date
   next to the "more" link.
   ------------------------------------------------------------------ */
.news-list-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px 24px;
}

@media (min-width: 981px) {
  .news-list-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: calc(26 * var(--board-u)) calc(24 * var(--board-u));
  }
}

@media (max-width: 980px) {
  .news-list-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .news-list-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.news-list-card .nimg {
  position: relative;
}

.nintro {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  display: flex;
  align-items: center;
  height: 56%;
  padding: 14px 18px;
  background: linear-gradient(180deg, rgba(14, 22, 30, .78), rgba(14, 22, 30, .93));
  transform: translateY(100%);
  transition: transform .3s var(--ease);
  pointer-events: none;
}

.nintro p {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
  color: rgba(255, 255, 255, .92);
  font-size: 13px;
  line-height: 1.68;
}

.news-list-card:hover .nintro,
.news-list-card:focus-visible .nintro {
  transform: translateY(0);
}

@media (hover: none) {
  /* No hover on touch: leave the image alone. */
  .nintro {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nintro {
    transform: none;
    opacity: 0;
    transition: opacity .2s linear;
  }

  .news-list-card:hover .nintro {
    opacity: 1;
  }
}

/* The title reserved three lines, which left a visible gap under short
   headlines. Two lines, sized to the content. */
.news-list-card h4 {
  min-height: 0;
  -webkit-line-clamp: 2;
}

.nmeta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
}

.news-list-card .nmeta .more {
  margin-top: 0;
}

.ndate {
  flex: none;
  color: #98a1a8;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: .01em;
}

/* The homepage rail keeps a steady card height across the row. */
.news-rail .nbody {
  justify-content: space-between;
}

.news-rail .nmeta {
  margin-top: 16px;
}

/* ------------------------------------------------------------------
   Article / video detail pages: content on the left, related panels on
   the right.
   ------------------------------------------------------------------ */
.detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 30px;
  align-items: start;
}

.detail-side {
  position: sticky;
  top: 96px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.side-panel {
  padding: 20px 22px 22px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: #fff;
  box-shadow: var(--shadow);
}

.side-panel-title {
  margin: 0 0 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
  color: var(--heading);
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
}

.side-panel-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.side-panel-list li + li {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
}

.side-panel-list a {
  display: block;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.72;
  text-decoration: none;
  transition: color .26s var(--ease);
}

.side-panel-list a:hover {
  color: var(--teal);
}

.side-panel-list .sp-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Rows with a thumbnail. */
.side-panel-list.has-media a {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

.side-panel-list.has-media .sp-media {
  display: block;
  height: 58px;
  border-radius: 3px;
  background: #eef3f5;
  overflow: hidden;
}

.side-panel-list.has-media .sp-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The article title was banner-sized. */
.news-detail-head h1,
.video-detail-head h1 {
  max-width: 900px;
  margin: 0;
  color: var(--heading);
  font-family: var(--font-display);
  font-size: clamp(22px, 2vw, 30px);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0;
}

/* 发布时间 / 所属栏目 line. */
.detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
  margin-top: 14px;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.6;
}

.dm-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.dm-label {
  color: #6b7580;
}

.detail-meta a {
  color: var(--teal);
  text-decoration: none;
  border-bottom: 1px solid rgba(14, 143, 156, .34);
}

.detail-meta a:hover {
  color: #0b6f7a;
  border-color: currentColor;
}

.news-detail-content {
  max-width: none;
}

/* ------------------------------------------------------------------
   Video detail page.
   ------------------------------------------------------------------ */
.video-detail-main {
  padding: clamp(24px, 3vw, 40px);
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: #fff;
  box-shadow: var(--shadow);
}

.video-detail-head {
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}

.video-detail-main .video-embed,
.video-detail-main .detail-cover {
  margin-bottom: 26px;
}

.video-summary-title {
  margin: 0 0 10px;
  color: var(--heading);
  font-family: var(--font-display);
  font-size: clamp(17px, 1.4vw, 21px);
  font-weight: 700;
  line-height: 1.4;
}

.video-summary p {
  margin: 0;
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.9;
}

.video-detail-content {
  margin-top: 24px;
}

@media (max-width: 1080px) {
  .detail-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .detail-side {
    position: static;
  }
}

/* The site chrome styles the bare `header` element as a fixed top bar, so a
   <header> used inside page content has to opt out of it. */
.detail-layout header,
.product-detail-shell header,
.news-detail-shell header,
.video-detail-shell header {
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  z-index: auto;
  transition: none;
}

/* ------------------------------------------------------------------
   About page: the company name is now the page H1, and a horizontal
   "荣誉资质" rail sits above the message band.
   ------------------------------------------------------------------ */
.legacy-company-copy h1 {
  margin: 0 0 24px;
  color: #222832;
  font-family: var(--font-display);
  font-size: 38px;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: 0;
}

@media (max-width: 860px) {
  .legacy-company-copy h1 {
    font-size: 30px;
  }
}

.legacy-honours {
  padding: 0 0 84px;
  background: #fff;
}

.honour-rail {
  --rail-per: 4;
}

.honour-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  margin: 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 18px 44px -34px rgba(10, 38, 52, .34);
  transition: transform .32s var(--ease), box-shadow .32s var(--ease), border-color .32s var(--ease);
}

.honour-card:hover {
  transform: translateY(-4px);
  border-color: rgba(38, 74, 102, .28);
  box-shadow: 0 26px 58px -36px rgba(10, 38, 52, .46);
}

.hc-media {
  display: grid;
  place-items: center;
  height: 250px;
  border-radius: 4px;
  background: #f5f7f8;
  overflow: hidden;
}

.hc-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.honour-card figcaption {
  color: var(--heading);
  font-size: 14px;
  font-weight: 650;
  line-height: 1.6;
  text-align: center;
}

@media (max-width: 1180px) {
  .honour-rail {
    --rail-per: 3;
  }
}

@media (max-width: 980px) {
  .honour-rail {
    --rail-per: 2.2;
  }

  .hc-media {
    height: 210px;
  }
}

@media (max-width: 640px) {
  .honour-rail {
    --rail-per: 1.2;
  }

  .legacy-honours {
    padding-bottom: 56px;
  }
}

/* ------------------------------------------------------------------
   Fix: images inside a fixed-height grid box were being cropped.

   .pimg / .hc-media are `display:grid` with an implicit auto-sized row,
   so the img's `height:100%` resolved against an indefinite row and was
   dropped. The image then took its intrinsic aspect ratio, grew past the
   box and got clipped by `overflow:hidden` -- obvious on wide photos,
   invisible on white-background product shots.

   Giving the row a definite size makes the percentage resolve, so
   object-fit:contain letterboxes instead of cropping.
   ------------------------------------------------------------------ */
.prod .pimg,
.hc-media {
  grid-template-rows: minmax(0, 1fr);
}

.prod .pimg img,
.hc-media img {
  max-height: 100%;
}

/* —— 右侧悬浮联系栏（微信 / 电话 / 邮箱 / 回顶部） —— */
.ht-online {
  --os: 50px;
  --br: 10px;
  --oc: var(--teal-deep);
  position: fixed;
  right: 10px;
  bottom: 20%;
  width: var(--os);
  z-index: 90;
  opacity: 0;
  visibility: hidden;
  transition: opacity .5s var(--ease), visibility .5s var(--ease);
}

.ht-online.is-visible {
  opacity: 1;
  visibility: visible;
}

.ht-online-list {
  display: block;
  padding-bottom: 4px;
}

.ht-online-item {
  width: var(--os);
  height: var(--os);
  margin-top: 4px;
}

.ht-online-item > a {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  background: #fff;
  border-radius: var(--br);
  box-shadow: 0 0 10px rgba(12, 35, 48, .15);
}

.ht-online-item > a > span {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
}

.ht-online svg {
  width: 45%;
  height: auto;
  fill: none;
  stroke: #6b7880;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke .4s var(--ease);
}

.ht-online svg circle {
  fill: #6b7880;
  stroke: none;
  transition: fill .4s var(--ease);
}

.ht-online-item > a:hover svg,
.ht-online-item > a:focus-visible svg {
  stroke: var(--oc);
}

.ht-online-item > a:hover svg circle,
.ht-online-item > a:focus-visible svg circle {
  fill: var(--oc);
}

.ht-online-item p,
.ht-online-code {
  position: absolute;
  right: calc(var(--os) + 30px);
  top: 50%;
  transform: translate(0, -50%);
  background: var(--oc);
  border-radius: 5px;
  color: #fff;
  opacity: 0;
  visibility: hidden;
  transition: all .5s var(--ease);
  box-shadow: 0 0 10px rgba(12, 35, 48, .15);
}

.ht-online-item p {
  padding: 10px 15px;
  width: max-content;
  font-size: 14px;
  line-height: 1.4;
}

.ht-online-code {
  padding: 10px;
  width: 130px;
}

.ht-online-code img {
  width: 100%;
  height: auto;
  border-radius: 3px;
}

.ht-online-code i {
  display: block;
  padding-top: 5px;
  text-align: center;
  font-style: normal;
  font-size: 13px;
}

.ht-online-item p::after,
.ht-online-code::after {
  content: "";
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translate(0, -50%);
  width: 0;
  height: 0;
  border: 5px solid transparent;
  border-left-color: var(--oc);
}

.ht-online-item > a:hover p,
.ht-online-item > a:focus-visible p,
.ht-online-item > a:hover .ht-online-code,
.ht-online-item > a:focus-visible .ht-online-code {
  right: calc(var(--os) + 5px);
  opacity: 1;
  visibility: visible;
}

.ht-online-top {
  display: flex;
  width: var(--os);
  height: var(--os);
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 0;
  border-radius: var(--br);
  box-shadow: 0 0 10px rgba(12, 35, 48, .15);
  cursor: pointer;
}

.ht-online-top:hover svg,
.ht-online-top:focus-visible svg {
  stroke: var(--oc);
}

@media screen and (max-width: 768px) {
  .ht-online {
    right: auto;
    left: 0;
    bottom: 0;
    width: 100%;
    display: flex;
    background: #fff;
    box-shadow: 0 -5px 10px rgba(12, 35, 48, .15);
  }

  .ht-online-list {
    flex: 1;
    display: flex;
    padding: 0;
  }

  .ht-online-item {
    flex: 1;
    position: relative;
    margin: 0;
    width: auto;
    border-right: 1px solid var(--line);
  }

  .ht-online-item > a {
    position: static;
    width: 100%;
    height: var(--os);
    border-radius: 0;
    box-shadow: none;
  }

  .ht-online svg {
    width: auto;
    height: 45%;
  }

  .ht-online-item p,
  .ht-online-code {
    right: auto;
    left: 50%;
    top: auto;
    bottom: 100%;
    transform: translate(-50%, -5px);
  }

  .ht-online-item p::after,
  .ht-online-code::after {
    left: 50%;
    top: 100%;
    border-left-color: transparent;
    border-top-color: var(--oc);
    transform: translate(-50%, 0);
  }

  .ht-online-item:first-child p,
  .ht-online-item:first-child .ht-online-code {
    left: 0;
    transform: translate(0, -5px);
  }

  .ht-online-item:first-child p::after,
  .ht-online-item:first-child .ht-online-code::after {
    left: 15px;
    transform: translate(0, 0);
  }

  .ht-online-item:last-child p {
    left: auto;
    right: 0;
    transform: translate(0, -5px);
  }

  .ht-online-item:last-child p::after {
    left: auto;
    right: 25px;
    transform: translate(0, 0);
  }

  .ht-online-item > a:hover p,
  .ht-online-item > a:focus-visible p,
  .ht-online-item > a:hover .ht-online-code,
  .ht-online-item > a:focus-visible .ht-online-code {
    right: auto;
  }

  .ht-online-item:last-child > a:hover p,
  .ht-online-item:last-child > a:focus-visible p {
    right: 0;
  }

  .ht-online-top {
    border-radius: 0;
    box-shadow: none;
  }
}

@media screen and (max-width: 768px) {
  /* The rail becomes a fixed bottom bar; keep it off the footer's last line. */
  body {
    padding-bottom: 50px;
  }
}

/* WeChat is a solid two-bubble mark, not a stroked outline like the others. */
.ht-online .ht-icon-wechat {
  fill: #6b7880;
  stroke: none;
  transition: fill .4s var(--ease);
}

.ht-online .ht-icon-wechat .sep {
  stroke: #fff;
  stroke-width: 1.4;
}

.ht-online .ht-icon-wechat .dot {
  fill: #fff;
  stroke: none;
}

.ht-online-item > a:hover .ht-icon-wechat,
.ht-online-item > a:focus-visible .ht-icon-wechat {
  fill: var(--oc);
  stroke: none;
}

.ht-online-item > a:hover .ht-icon-wechat .sep,
.ht-online-item > a:focus-visible .ht-icon-wechat .sep {
  stroke: #fff;
}

.ht-online-item > a:hover .ht-icon-wechat .dot,
.ht-online-item > a:focus-visible .ht-icon-wechat .dot {
  fill: #fff;
}

/* ==================================================================
   第三版改版
   ================================================================== */

/* ------------------------------------------------------------------
   首页「关于休曼」：左图右文，按钮在文字下面。
   ------------------------------------------------------------------ */
.home-about-block {
  background: #fff;
}

.home-about-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(32px, 4vw, 72px);
  align-items: center;
}

.home-about-media {
  position: relative;
  border-radius: var(--r);
  overflow: hidden;
  background: var(--clinic);
}

.home-about-media img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 320px;
  max-height: 460px;
  object-fit: cover;
}

.home-about-copy .eyebrow {
  justify-content: flex-start;
}

.home-about-copy .sec-title {
  margin: 10px 0 0;
  text-align: left;
}

.home-about-text {
  margin: 20px 0 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 2;
}

.home-about-more {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 28px;
}

.home-about-more svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 980px) {
  .home-about-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .home-about-media img {
    min-height: 240px;
  }
}

/* ------------------------------------------------------------------
   技术亮点卡：说明文字露得更多（原来 180px 只够四行左右）。
   ------------------------------------------------------------------ */
.hl-card {
  height: 470px;
}

.hl-card:hover .hl-text,
.hl-card:focus-visible .hl-text {
  max-height: 320px;
}

@media (hover: none), (max-width: 640px) {
  .hl-text {
    max-height: 320px;
  }
}

@media (max-width: 1439px) {
  .hl-card {
    height: 440px;
  }
}

/* ------------------------------------------------------------------
   产品业务卡：加高，标题和「了解更多」中间放栏目摘要。
   ------------------------------------------------------------------ */
/* 栏目摘要在标题和「了解更多」之间，悬停才展开三行。
   展开多少高度，下面的图片就矮多少，卡片总高不变，同一行的卡不会跳。 */
.pb-desc {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  max-height: 0;
  margin-top: 0;
  opacity: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.8;
  text-align: left;
  transition: max-height .5s var(--ease), margin-top .5s var(--ease), opacity .5s var(--ease), color .5s var(--ease);
}

.pb-card:hover .pb-desc,
.pb-card:focus-visible .pb-desc {
  max-height: 78px;
  margin-top: 14px;
  opacity: 1;
  color: rgba(255, 255, 255, .88);
}

.pb-media {
  height: 250px;
  transition: height .5s var(--ease), margin-top .5s var(--ease);
}

.pb-card.has-desc:hover .pb-media,
.pb-card.has-desc:focus-visible .pb-media {
  height: 158px;
}

/* 没有悬停的设备（触屏）看不到展开动作，直接摊开。 */
@media (hover: none), (max-width: 640px) {
  .pb-desc {
    max-height: 78px;
    margin-top: 14px;
    opacity: 1;
  }
}

@media (max-width: 1439px) {
  .pb-media {
    height: 220px;
  }

  .pb-card.has-desc:hover .pb-media,
  .pb-card.has-desc:focus-visible .pb-media {
    height: 128px;
  }
}

/* ------------------------------------------------------------------
   项目案例：置顶的 3 篇，所以是 3 列。
   ------------------------------------------------------------------ */
.case-grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 980px) {
  .case-grid-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .case-grid-3 {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ------------------------------------------------------------------
   客户 Logo 滚动带：紧接在项目案例下面，自己一直走。
   ------------------------------------------------------------------ */
.client-strip {
  padding: 34px 0;
  background: #101820;
  overflow: hidden;
}

.client-strip-title {
  margin: 0 0 22px;
  color: #fff;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  text-align: center;
}

.client-marquee {
  position: relative;
  overflow: hidden;
  /* 两端淡出，看起来是从画面外滚进来的。 */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.client-marquee-track {
  display: flex;
  align-items: center;
  gap: 20px;
  width: max-content;
  animation: humantech-client-marquee var(--client-marquee-duration, 30s) linear infinite;
}

.client-marquee:hover .client-marquee-track {
  animation-play-state: paused;
}

/* 原来是固定 168×78 的格子，横宽的 logo 塞进去只剩一小条。
   现在格子高度固定、宽度跟着图片走：图按原比例缩到刚好放进格子，
   横的就得到一个宽格子，谁都不会被裁。 */
.client-logo {
  display: grid;
  place-items: center;
  flex: none;
  height: 96px;
  min-width: 150px;
  padding: 12px 20px;
  border-radius: 6px;
  background: #fff;
}

/* max-height 得写死像素。grid 里百分比的 max-height 要拿行高来算，
   而行高又由内容决定，浏览器判成循环依赖直接忽略掉。 */
.client-logo img {
  display: block;
  width: auto;
  height: auto;
  max-width: 260px;
  max-height: 72px;
}

/* logo 铺了两遍，走完一半正好接回起点，看不出接缝。
   一半的宽度还要算上中间那道 gap 的一半，所以是 -50% - 10px。 */
@keyframes humantech-client-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-50% - 10px)); }
}

@media (prefers-reduced-motion: reduce) {
  .client-marquee-track {
    animation: none;
  }

  .client-marquee {
    overflow-x: auto;
  }
}

@media (max-width: 640px) {
  .client-logo {
    height: 68px;
    min-width: 110px;
    padding: 8px 14px;
  }

  .client-logo img {
    max-width: 180px;
    max-height: 52px;
  }
}

/* ------------------------------------------------------------------
   首页资讯：箭头挪到卡片外面，卡片补上所属栏目，下方加「查看更多」。
   ------------------------------------------------------------------ */
.news-section .news-rail {
  padding: 0 72px;
}

.news-section .news-rail .rail-prev {
  left: 0;
}

.news-section .news-rail .rail-next {
  right: 0;
}

/* 三个元素挤一行：「查看全部」和日期不许换行，栏目名太长就用省略号。 */
.nmeta {
  flex-wrap: wrap;
  row-gap: 8px;
}

.nmeta .more {
  flex: none;
  white-space: nowrap;
}

.nmeta .ncat {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  padding: 2px 10px;
  text-overflow: ellipsis;
  border-radius: 999px;
  background: rgba(40, 86, 118, .08);
  color: #285676;
  font-size: 12.5px;
  line-height: 1.7;
  white-space: nowrap;
}

.nmeta .ndate {
  white-space: nowrap;
}

/* 栏目占了中间，日期不用再靠 auto 推到右边。 */
.nmeta .ncat + .ndate {
  margin-left: 12px;
}

.news-more-row {
  display: flex;
  justify-content: center;
  margin-top: 34px;
}

.news-more-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.news-more-btn svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 980px) {
  .news-section .news-rail {
    padding: 0;
  }
}

/* ------------------------------------------------------------------
   页脚热门标签（原来那整行「标签导航」已经去掉）。
   ------------------------------------------------------------------ */
.footer-tags {
  margin-top: 26px;
}

.footer-tags h5 {
  margin: 0 0 12px;
}

.footer-tags-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.footer-tags-list a {
  padding: 5px 12px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 999px;
  color: rgba(255, 255, 255, .74);
  font-size: 12.5px;
  line-height: 1.7;
  text-decoration: none;
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}

.footer-tags-list a:hover,
.footer-tags-list a:focus-visible {
  border-color: rgba(58, 116, 154, .9);
  background: rgba(58, 116, 154, .22);
  color: #fff;
}

.footer-icp a {
  color: inherit;
  text-decoration: none;
}

.footer-icp a:hover {
  color: #fff;
  text-decoration: underline;
}

/* ------------------------------------------------------------------
   表单字段。
   占位文字是叠在输入框上的一个 <span>，不是原生 placeholder ——
   原生 placeholder 只能是纯文本，没办法把必填星号单独染红。
   ------------------------------------------------------------------ */
.ht-field {
  position: relative;
  display: block;
  min-width: 0;
}

.ht-field-ph {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  padding: 0 16px;
  color: #98a0a8;
  font-size: inherit;
  line-height: 1.5;
  pointer-events: none;
  transition: opacity .18s ease;
}

.ht-field-textarea .ht-field-ph {
  align-items: flex-start;
  padding-top: 15px;
}

/* 一有内容或拿到焦点，占位文字就让位。 */
.ht-field input:focus ~ .ht-field-ph,
.ht-field textarea:focus ~ .ht-field-ph,
.ht-field input:not(:placeholder-shown) ~ .ht-field-ph,
.ht-field textarea:not(:placeholder-shown) ~ .ht-field-ph {
  opacity: 0;
}

.ht-req {
  color: #d63638;
  font-style: normal;
  font-weight: 600;
}

/* 蜜罐字段：留给机器人填，真人看不到也 tab 不到。 */
.ht-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.ht-form-notice {
  margin: 0 0 4px;
  padding: 12px 16px;
  border-radius: 4px;
  font-size: 14.5px;
  line-height: 1.7;
}

.ht-form-notice.is-ok {
  background: rgba(14, 143, 156, .12);
  color: #0b6f7a;
}

.ht-form-notice.is-error {
  background: rgba(214, 54, 56, .12);
  color: #b32d2e;
}

/* 联系页表单：网格的直接子项从 input 变成了 .ht-field。 */
.legacy-message-form .ht-field {
  font-size: 16px;
}

.legacy-message-form .ht-field-textarea,
.legacy-message-form .ht-form-notice {
  grid-column: 1 / -1;
}

.legacy-message-form .ht-field-ph {
  color: #8e969f;
}

.legacy-message-form .ht-form-notice {
  background: rgba(255, 255, 255, .92);
}

/* 页脚快速咨询是深色底，占位文字要浅一点才看得见。 */
.footer-quote-form .ht-field {
  font-size: 14.5px;
}

.footer-quote-form .ht-field-ph {
  color: rgba(255, 255, 255, .5);
}

.footer-quote-form .ht-form-notice {
  background: rgba(255, 255, 255, .1);
  color: #fff;
}

/* 屏幕阅读器专用文字，之前只在页脚作用域里有。 */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------------------------
   产品详情：名称块只剩一行标题，原来的上下留白就太空了。
   ------------------------------------------------------------------ */
.product-lede {
  padding: 20px 30px;
}

.product-lede-title {
  margin: 0;
}

/* ==================================================================
   第三版「补充」
   ================================================================== */

/* 产品详情页顶部摘要：整段展示以后字太大了，调小一档。
   换行由模板的 nl2br 输出，段落之间自然分开。 */
.product-summary-panel .product-spec-card .product-intro {
  font-size: 15.5px;
  line-height: 1.9;
}

@media (min-width: 2400px) {
  .product-summary-panel .product-spec-card .product-intro {
    font-size: 18px;
  }
}

@media (min-width: 3400px) {
  .product-summary-panel .product-spec-card .product-intro {
    font-size: 24px;
  }
}

@media (max-width: 620px) {
  .product-summary-panel .product-spec-card .product-intro {
    font-size: 14.5px;
  }
}

/* ------------------------------------------------------------------
   提交成功弹窗。表单上方那行小字容易被忽略，尤其页脚那个表单 ——
   提交完页面回到顶部，根本看不到底下发生了什么。
   ------------------------------------------------------------------ */
.ht-modal {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(10, 20, 28, .55);
  animation: ht-modal-in .2s var(--ease, ease) both;
}

.ht-modal.is-closing {
  opacity: 0;
  transition: opacity .2s ease;
}

.ht-modal-card {
  width: min(420px, 100%);
  padding: 34px 32px 28px;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 30px 80px -30px rgba(10, 30, 45, .5);
  text-align: center;
}

.ht-modal-icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: rgba(14, 143, 156, .12);
  color: var(--teal, #0e8f9c);
}

.ht-modal-icon svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ht-modal-title {
  margin: 0;
  color: var(--heading, #1f2a35);
  font-family: var(--font-display, inherit);
  font-size: 22px;
  font-weight: 700;
}

.ht-modal-text {
  margin: 12px 0 24px;
  color: var(--muted, #6b7480);
  font-size: 15px;
  line-height: 1.8;
}

.ht-modal-close {
  min-width: 140px;
  height: 44px;
  padding: 0 22px;
  border: 0;
  border-radius: 999px;
  background: var(--teal, #0e8f9c);
  color: #fff;
  font: inherit;
  font-size: 15px;
  cursor: pointer;
  transition: background .2s ease;
}

.ht-modal-close:hover {
  background: #0b6f7a;
}

@keyframes ht-modal-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .ht-modal {
    animation: none;
  }
}

/* ------------------------------------------------------------------
   页脚热门标签分成产品 / 资讯两组，两组之间留点距离。
   ------------------------------------------------------------------ */
.footer-tags + .footer-tags {
  margin-top: 18px;
}

/* ------------------------------------------------------------------
   标签页：分组标题前面挂上当前标签，翻到下面也知道自己在看哪个标签。
   ------------------------------------------------------------------ */
.tag-group-term {
  display: inline-block;
  margin-right: 10px;
  padding: 2px 10px;
  border-radius: 999px;
  background: rgba(40, 86, 118, .1);
  color: #285676;
  font-size: 13px;
  font-weight: 500;
  vertical-align: middle;
}

/* ------------------------------------------------------------------
   产品正文里的加粗等格式（技术亮点区块现在是富文本）。
   ------------------------------------------------------------------ */
.product-content-body strong,
.product-content-body b {
  color: var(--heading, #1f2a35);
  font-weight: 700;
}

.product-content-body ul,
.product-content-body ol {
  margin: 12px 0;
  padding-left: 22px;
}

.product-content-body li {
  margin-bottom: 6px;
}

/* ------------------------------------------------------------------
   产品中心左侧栏目列表：大类和子类原来只差 10px 的缩进，看着分不出层级。
   子类往里再推一截，前面加一小段横线做标记。

   选择器要带上元素名（a.pcs-child）。上面 .product-archive-shell 那组
   把 `a` 的 padding 整个重设过一遍，优先级比 .product-category-list .pcs-child
   高，不带元素名会被它压掉。
   ------------------------------------------------------------------ */
.product-category-list a {
  position: relative;
}

.product-category-list a.pcs-top {
  padding-left: 20px;
  font-weight: 600;
}

.product-category-list a.pcs-child {
  padding-left: 48px;
  color: #737f89;
}

.product-category-list a.pcs-child:hover,
.product-category-list a.pcs-child.active {
  padding-left: 52px;
}

.pcs-mark {
  position: absolute;
  left: 26px;
  top: 50%;
  width: 12px;
  height: 1px;
  background: currentColor;
  opacity: .5;
  transition: left .2s var(--ease), width .2s var(--ease), opacity .2s var(--ease);
}

.product-category-list a.pcs-child:hover .pcs-mark,
.product-category-list a.pcs-child.active .pcs-mark {
  left: 30px;
  width: 16px;
  opacity: 1;
}

/* ==================================================================
   页脚标签按钮 + 标签总览页
   ================================================================== */
/* 两个标签按钮和「邮 / 电 / 询」排一行。 */
.footer-brand-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.footer-tag-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.footer-tag-buttons a {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 18px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 4px;
  color: rgba(255, 255, 255, .82);
  font-size: 13.5px;
  line-height: 1.4;
  text-decoration: none;
  transition: border-color .2s ease, background .2s ease, color .2s ease;
}

.footer-tag-buttons a:hover,
.footer-tag-buttons a:focus-visible {
  border-color: rgba(58, 116, 154, .9);
  background: rgba(58, 116, 154, .22);
  color: #fff;
}

.tag-index-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.tag-index-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--heading);
  font-size: 15px;
  text-decoration: none;
  transition: border-color .2s ease, color .2s ease, transform .2s ease;
}

.tag-index-item:hover,
.tag-index-item:focus-visible {
  border-color: var(--teal);
  color: var(--teal);
  transform: translateY(-2px);
}

.tag-index-count {
  min-width: 22px;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(40, 86, 118, .1);
  color: #285676;
  font-size: 12.5px;
  text-align: center;
}

/* ==================================================================
   窄屏导航：右上角「栏目」按钮 + 展开的分栏
   ================================================================== */
.nav-toggle {
  display: none;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 12px;
  border: 1px solid currentColor;
  border-radius: 4px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}

.nav-toggle-bars {
  display: inline-grid;
  gap: 3px;
  width: 16px;
}

.nav-toggle-bars i {
  display: block;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
  transition: transform .2s ease, opacity .2s ease;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bars i:nth-child(1) {
  transform: translateY(5px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bars i:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bars i:nth-child(3) {
  transform: translateY(-5px) rotate(-45deg);
}

.mobile-nav {
  display: none;
}

.mobile-nav-inner {
  display: grid;
  gap: 18px;
  padding-top: 18px;
  padding-bottom: 24px;
}

.mnav-link,
.mnav-title {
  display: block;
  color: var(--heading);
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
}

.mnav-group {
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.mnav-sub {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.mnav-sub a {
  padding: 7px 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: #5d6871;
  font-size: 13.5px;
  line-height: 1.5;
  text-decoration: none;
}

.mnav-sub a:active {
  border-color: var(--teal);
  color: var(--teal);
}

@media (max-width: 980px) {
  /* .header-tools 在 1180px 以下被整块隐藏了（搜索框和客服图标在窄屏
     没地方放）。这里把它放出来，但里面只留菜单按钮。 */
  .header-tools {
    display: flex;
    gap: 12px;
  }

  .header-tools .header-search,
  .header-tools .header-contact-icon {
    display: none;
  }

  .nav-toggle {
    display: inline-flex;
  }

  /* 展开的面板挂在页眉下面，自己滚动，最高不超过一屏。 */
  .mobile-nav {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    top: var(--humantech-header-height, 72px);
    z-index: 60;
    max-height: calc(100vh - var(--humantech-header-height, 72px));
    overflow-y: auto;
    background: #fff;
    border-top: 1px solid var(--line);
    box-shadow: 0 24px 48px -28px rgba(10, 30, 45, .45);
  }

  .mobile-nav[hidden] {
    display: none;
  }

  /* 面板是白底，页眉这时也得是实色，否则按钮和 logo 看不清。 */
  body.nav-open header#hdr {
    background: #fff;
  }

  body.nav-open header#hdr .logo,
  body.nav-open header#hdr .nav-toggle,
  body.nav-open header#hdr .header-contact-icon {
    color: var(--heading);
  }

  body.nav-open {
    overflow: hidden;
  }
}

/* ==================================================================
   移动端首页
   ================================================================== */
@media (max-width: 640px) {
  /* 首屏大图原来是 cover，两边被裁掉一大半。改成整张放下：
     图在上、文字和按钮在下。
     不压在图上是因为页眉是固定的，会盖掉图的顶部一截；而窄屏上
     图本来就矮，字压上去也挤。box 的比例取图片真实宽高（PHP 算好
     塞进 --home-hero-ratio），不然 contain 会留出黑边。 */
  .hero {
    display: block;
    min-height: 0;
    padding: 0 0 30px;
    background: #0b141c;
  }

  .hero-bg {
    position: relative;
    inset: auto;
    width: 100%;
    margin-top: var(--humantech-header-height, 90px);
    aspect-ratio: var(--home-hero-ratio, 16 / 10);
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    transform: none;
  }

  /* 那层压暗的渐变是给「字盖在图上」用的，现在字在图下面，不需要了。 */
  .hero-bg::after {
    display: none;
  }

  .hero .wrap {
    position: relative;
    padding-top: 24px;
    padding-bottom: 0;
  }

  .hero-copy {
    text-align: center;
  }

  .hero h1 {
    font-size: 26px;
    margin-top: 8px;
  }

  .hero p.lead {
    margin-top: 12px;
    font-size: 13px;
    line-height: 1.7;
  }

  .hero .cta-row {
    display: flex;
    justify-content: center;
    margin-top: 16px;
  }

  /* 关于休曼：标题和按钮居中 */
  .home-about-copy {
    text-align: center;
  }

  .home-about-copy .eyebrow {
    justify-content: center;
  }

  .home-about-copy .sec-title {
    text-align: center;
  }

  .home-about-more {
    margin-left: auto;
    margin-right: auto;
  }

  /* 技术亮点 / 产品业务 / 推荐产品 / 项目案例：
     和资讯动态一样改成横向滑动，不再一张张竖着堆。 */
  .hl-grid,
  .pb-grid,
  .home-products-grid,
  .case-grid {
    display: flex;
    grid-template-columns: none;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    /* 负边距让第一张贴着屏幕边开始滑，padding 再把它推回来 */
    margin-left: -20px;
    margin-right: -20px;
    padding: 4px 20px 14px;
    scrollbar-width: none;
  }

  .hl-grid::-webkit-scrollbar,
  .pb-grid::-webkit-scrollbar,
  .home-products-grid::-webkit-scrollbar,
  .case-grid::-webkit-scrollbar {
    display: none;
  }

  .hl-grid > *,
  .pb-grid > *,
  .home-products-grid > *,
  .case-grid > * {
    flex: 0 0 78%;
    scroll-snap-align: start;
  }

  .case-grid-3 .case-card {
    height: auto;
  }

  .case-grid-3 .cc-media {
    flex: none;
    padding-top: 62%;
  }
}

/* ==================================================================
   移动端页脚：快捷导航横过来排
   ================================================================== */
@media (max-width: 640px) {
  .footer-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
  }

  .footer-links h5 {
    flex: 0 0 100%;
    margin-bottom: 2px;
  }

  .footer-links a {
    padding: 6px 13px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 999px;
    font-size: 13.5px;
  }

  /* 竖排时每项前面那个小方块，横排成胶囊后正好压在左边框上。 */
  .footer-links a::before {
    display: none;
  }
}

/* ------------------------------------------------------------------
   Hero 标题排成一行。

   模板里的 <br> 早就去掉了，但字号是按「两行短标题」定的（最大 92px），
   一行 14 个字放不下，还是会折行。这里把字号改成纯 vw 驱动、容器放宽，
   算下来一行约 75vw，各种屏宽都能一行放下。没有用 white-space: nowrap
   ——真换了更长的标题时，宁可折行也别横向溢出。
   放在文件最后，覆盖前面几个断点里的固定字号。
   ------------------------------------------------------------------ */
.hero-copy {
  /* 让标题用满 .wrap 的宽度，别再被 820px 卡着折行 */
  max-width: 100%;
  /* 字号按这个容器的宽度算（下面的 cqw），而不是按视口。
     .wrap 在大屏上是定宽 1600px，只看 vw 的话字会长到容器装不下。 */
  container-type: inline-size;
}

.hero h1 {
  /* 老浏览器不认 cqw 时的兜底 */
  font-size: clamp(18px, 4.2vw, 74px);
  /* 标题 14 个字加一个空格约 14.5em，5.2cqw × 14.5 ≈ 75% 容器宽，
     任何屏宽都是一行，两边还留出余地。
     换成更长的标题时会自己折行，不会横向溢出。 */
  font-size: clamp(18px, 5.2cqw, 96px);
  line-height: 1.25;
}

/* ------------------------------------------------------------------
   产品详情页：产品介绍 / 技术亮点 / 模型功能 / 模型结构 / 模型参数
   五张通栏横版卡片，右侧不再留侧栏。
   ------------------------------------------------------------------ */
.product-detail-blocks {
  display: flex;
  flex-direction: column;
  gap: 26px;
  margin-top: 34px;
  min-width: 0;
}

.product-block {
  padding: clamp(24px, 2.6vw, 46px);
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #fff;
  box-shadow: var(--shadow);
}

.product-block-head {
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}

.product-block-head h2 {
  margin: 8px 0 0;
  padding-left: 14px;
  border-left: 4px solid var(--teal);
  color: var(--heading);
  font-family: var(--font-display);
  font-size: clamp(20px, 1.7vw, 27px);
  font-weight: 700;
  line-height: 1.3;
}

.product-intro-body {
  font-size: 15px;
  line-height: 1.95;
}

.product-intro-body p {
  margin: 0 0 14px;
}

.product-intro-body p:last-child {
  margin-bottom: 0;
}

/* 技术亮点：一段一格，横向铺开。 */
.highlight-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
}

.highlight-item {
  position: relative;
  padding: 24px 24px 26px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #f7f8f9;
  transition: transform .3s var(--ease), background-color .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}

.highlight-item:hover {
  transform: translateY(-3px);
  border-color: rgba(38, 74, 102, .28);
  background: #fff;
  box-shadow: var(--shadow-hi);
}

.highlight-index {
  position: absolute;
  top: 16px;
  right: 20px;
  color: rgba(38, 74, 102, .22);
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1;
}

.highlight-item h3 {
  margin: 0 46px 10px 0;
  color: var(--heading);
  font-size: 16.5px;
  font-weight: 650;
  line-height: 1.55;
}

.highlight-item p {
  margin: 0;
  color: var(--text);
  font-size: 14px;
  line-height: 1.85;
}

/* 模型功能：一张卡里分「支持术式」「适用场景」两段。 */
.function-part + .function-part {
  margin-top: 26px;
  padding-top: 24px;
  border-top: 1px dashed var(--line);
}

.function-part-title {
  margin: 0 0 14px;
  padding-left: 12px;
  border-left: 3px solid var(--glow);
  color: var(--heading);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
}

.function-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.function-list li {
  position: relative;
  padding: 10px 14px 10px 30px;
  border-radius: 3px;
  background: #f7f8f9;
  color: #4c555d;
  font-size: 14.5px;
  line-height: 1.7;
}

.function-list li::before {
  content: "";
  position: absolute;
  left: 13px;
  top: 1.05em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--teal);
}

/* 模型结构：左边文字，右边结构图。没传图就单栏两列排文字。 */
.structure-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 42%);
  gap: clamp(22px, 2.6vw, 44px);
  align-items: center;
}

.structure-split.no-figure {
  grid-template-columns: minmax(0, 1fr);
}

.structure-list {
  display: grid;
  gap: 11px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.structure-split.no-figure .structure-list {
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 11px 28px;
}

/* 左栏：结构要点 + 可换模块。 */
.structure-text {
  min-width: 0;
}

.structure-text .replaceable-block {
  margin-top: 70px;
}

.structure-text .panel-sub-title {
  margin-top: 0;
}

.structure-list li {
  position: relative;
  padding-left: 24px;
  color: #4c555d;
  font-size: 14.5px;
  line-height: 1.85;
}

/* 圆点对到第一行文字的中心线上：半行高 0.925em 减去圆的半径 6.5px。
   原来写死 .72em，圆会比文字低三四个像素。 */
.structure-list li::before,
.replaceable-list li::before {
  top: calc(.925em - 6.5px);
}

.structure-list li::before {
  content: "";
  position: absolute;
  left: 0;
  width: 9px;
  height: 9px;
  border: 2px solid var(--teal);
  border-radius: 50%;
}

.structure-figure {
  margin: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #f7f8f9;
}

.structure-figure img {
  display: block;
  width: 100%;
  height: auto;
}

/* 模型参数表格。 */
.spec-table-wrap {
  overflow-x: auto;
}

.spec-table {
  width: 100%;
  border-collapse: collapse;
}

.spec-table th,
.spec-table td {
  padding: 13px 18px;
  border: 1px solid var(--line);
  font-size: 14.5px;
  line-height: 1.8;
  text-align: left;
  vertical-align: top;
}

.spec-table th {
  width: 190px;
  background: #f3f4f5;
  color: var(--heading);
  font-weight: 650;
  white-space: nowrap;
}

.spec-table td {
  color: var(--text);
}

/* 顶部卖点短句。 */
.product-selling-points {
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.product-selling-points li {
  position: relative;
  padding-left: 26px;
  color: #4c555d;
  font-size: 14.5px;
  line-height: 1.72;
}

.product-selling-points li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: .46em;
  width: 10px;
  height: 6px;
  border-left: 2px solid var(--teal);
  border-bottom: 2px solid var(--teal);
  transform: rotate(-45deg);
}

/* 相关资讯：四张卡片一排。 */
.product-related-news {
  margin-top: 56px;
}

.related-news-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

.related-news-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #fff;
  box-shadow: var(--shadow);
  text-decoration: none;
  transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}

.related-news-card:hover {
  transform: translateY(-4px);
  border-color: rgba(38, 74, 102, .28);
  box-shadow: var(--shadow-hi);
}

.rn-img {
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: #f3f4f5;
}

.rn-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s var(--ease);
}

.related-news-card:hover .rn-img img {
  transform: scale(1.05);
}

.rn-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 8px;
  padding: 18px 20px 22px;
}

.rn-date {
  color: var(--muted);
  font-size: 12.5px;
  letter-spacing: .04em;
}

.rn-body h3 {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  color: var(--heading);
  font-size: 16px;
  font-weight: 650;
  line-height: 1.55;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.rn-body p {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.8;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.rn-more {
  margin-top: auto;
  padding-top: 6px;
  color: var(--teal);
  font-size: 13px;
  font-weight: 600;
}

@media (max-width: 1200px) {
  .related-news-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .structure-split {
    grid-template-columns: minmax(0, 1fr);
  }

  .product-block {
    padding: 22px 20px;
  }
}

@media (max-width: 640px) {
  .highlight-grid,
  .function-list,
  .related-news-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .spec-table th {
    width: 118px;
    white-space: normal;
  }

  .spec-table th,
  .spec-table td {
    padding: 11px 12px;
  }
}

/* 结构要点里以冒号收尾的行是分组标题，单独排一档层次出来。 */
.structure-list li.structure-group {
  margin-top: 8px;
  padding-left: 0;
  color: var(--heading);
  font-size: 15px;
  font-weight: 650;
}

.structure-list li.structure-group:first-child {
  margin-top: 0;
}

.structure-list li.structure-group::before {
  display: none;
}

.structure-list li.structure-point {
  padding-left: 24px;
}

.structure-split {
  grid-template-columns: minmax(0, 1fr) minmax(0, 38%);
  align-items: start;
}

/* ------------------------------------------------------------------
   产品详情：文件夹式标签（参考 softmimics 产品页）
   未选中是描边标签，选中的填实深蓝、比别的高一截，下沿和内容卡连成一体。
   ------------------------------------------------------------------ */
.product-tabs {
  margin-top: 30px;
}

.product-tab-nav {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  overflow-x: auto;
  padding: 0 0 0 6px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.product-tab-nav::-webkit-scrollbar {
  display: none;
}

.product-tab-btn {
  position: relative;
  flex: 0 0 auto;
  padding: 11px 20px;
  border: 1px solid rgba(38, 74, 102, .55);
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  background: transparent;
  color: var(--teal);
  font-family: var(--font-display);
  font-size: clamp(14.5px, 1vw, 16.5px);
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
  cursor: pointer;
  transition: color .24s var(--ease), background-color .24s var(--ease), border-color .24s var(--ease);
}

.product-tab-btn:hover {
  border-color: var(--teal);
  background: rgba(38, 74, 102, .08);
}

.product-tab-btn.is-active {
  padding: 17px 28px;
  border-color: var(--teal);
  background: var(--teal);
  color: #fff;
  font-weight: 650;
}

.product-tab-btn:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

.product-tab-panel {
  display: none;
  padding: clamp(26px, 3vw, 52px) clamp(22px, 2.8vw, 46px);
  border: 1px solid var(--line);
  border-radius: 0 4px 4px 4px;
  background: #fff;
  box-shadow: var(--shadow);
}

.product-tab-panel.is-active {
  display: block;
  animation: product-tab-in .34s var(--ease) both;
}

@keyframes product-tab-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* 面板内的小标题，前面一个实心方块。 */
.product-panel-title {
  position: relative;
  margin: 0 0 22px;
  padding-left: 22px;
  color: var(--teal);
  font-family: var(--font-display);
  font-size: clamp(20px, 1.7vw, 27px);
  font-weight: 700;
  line-height: 1.35;
}

.product-panel-title::before {
  content: "";
  position: absolute;
  top: .56em;
  left: 0;
  width: 10px;
  height: 10px;
  background: var(--teal);
}

/* 脚本没跑起来时，把所有分栏摊开，别整块内容都看不到。 */
.no-js .product-tab-panel,
.product-tabs.is-fallback .product-tab-panel {
  display: block;
  margin-top: 12px;
  border-radius: 4px;
  animation: none;
}

@media (max-width: 700px) {
  .product-tab-nav {
    padding-left: 2px;
  }

  .product-tab-btn {
    padding: 9px 14px;
    font-size: 14px;
  }

  .product-tab-btn.is-active {
    padding: 13px 18px;
  }

  .product-tab-panel {
    padding: 22px 18px;
  }
}

/* ------------------------------------------------------------------
   产品详情页：右边介绍块和左边图框等高。

   图框高度是定死的（1.52 图框 + 缩略图条），介绍块原本各长各的，
   7 行卖点时比图框高出 76px，两张卡上下边缘对不齐。

   做法：网格改 stretch 保证两边永远等高，再把介绍块内部的空隙压掉，
   让 7 行这种最满的情况也能塞进图框那个高度——所以是介绍块向图框看齐，
   不是把图框拉高（老板刚要求过主图别太大）。

   行数不足 7 行时多出来的空间落在按钮上方：wp.css 本来就给按钮写了
   margin-top:auto 让它贴底，这里把 refine 之前覆盖掉的 36px 还原回去。
   ------------------------------------------------------------------ */
@media (min-width: 981px) {
  .product-detail-overview {
    align-items: stretch;
  }

  .product-summary-title-row {
    margin-bottom: 16px;
  }

  .product-summary-panel .product-spec-card {
    padding: 22px 34px;
  }

  .product-selling-points {
    gap: 6px;
  }

  .product-summary-panel .product-spec-card .product-summary-meta {
    margin: 16px 0 0;
  }

  /* 剩余空间上下均分给规格卡，卡片就落在标题和按钮中间。
     4K 这种大屏图框会按 --board-u 放大到 900+，介绍块跟着拉高，
     卡片贴顶、按钮贴底的话中间会空出 400 多像素。
     按钮不再吃 wp.css 的 margin-top:auto，改由卡片的上下 auto 边距吸收，
     按钮自然还是落在最底下。 */
  .product-summary-panel .product-spec-card {
    margin: auto 0;
  }

  .product-summary-panel .product-actions {
    margin-top: 0;
  }
}

/* ------------------------------------------------------------------
   超大屏（2K 往上）：卡片内容跟着版面一起放大。

   --board-u 在 1920 是 1px、3840 封顶 2px，整个版面按它翻倍，但卖点文字
   写死 14.5px 没跟着走——两倍大的板子上印着原尺寸小字，卡片也就撑不起来，
   4K 上介绍块和按钮之间空出 400~500px。

   这里把卡片内部的字号、行距、内边距、连同对勾图标都改成按 --board-u 走。
   实测 3840：卖点页空隙 471→172，介绍页 545→251。

   只从 1900px 起生效，1K/2K 的观感一点不变。
   ------------------------------------------------------------------ */
@media (min-width: 1900px) {
  .product-selling-points {
    gap: calc(6 * var(--board-u));
  }

  .product-selling-points li {
    padding-left: calc(26 * var(--board-u));
    font-size: calc(14.5 * var(--board-u));
    line-height: 1.72;
  }

  .product-selling-points li::before {
    left: calc(4 * var(--board-u));
    width: calc(10 * var(--board-u));
    height: calc(6 * var(--board-u));
    border-left-width: calc(2 * var(--board-u));
    border-bottom-width: calc(2 * var(--board-u));
  }

  .product-summary-panel .product-spec-card {
    padding: calc(22 * var(--board-u)) calc(34 * var(--board-u));
  }

  .product-summary-panel .product-spec-card .product-intro {
    font-size: calc(18 * var(--board-u));
    line-height: 1.9;
  }

  .product-summary-panel .product-spec-card .product-summary-meta {
    margin: calc(16 * var(--board-u)) 0 0;
    padding: calc(10 * var(--board-u)) calc(16 * var(--board-u));
    font-size: calc(16 * var(--board-u));
  }
}

/* ------------------------------------------------------------------
   标题行右侧：原来是个只有箭头的圆按钮，换成带文字的返回按钮。
   底部两个按钮改成表单入口后，返回入口只剩这一个，光一个箭头认不出来。
   ------------------------------------------------------------------ */
.product-summary-title-row {
  grid-template-columns: minmax(0, 1fr) auto;
}

.product-summary-back {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 48px;
  padding: 0 20px;
  border-radius: 999px;
  background: #fff;
  color: #6d7479;
  font-size: 15px;
  font-weight: 400;
  white-space: nowrap;
  text-decoration: none;
  box-shadow: 0 10px 24px rgba(22, 30, 38, .14);
  transition: color .2s ease, box-shadow .2s ease;
}

.product-summary-back:hover {
  color: #285676;
  box-shadow: 0 12px 28px rgba(22, 30, 38, .18);
}

.product-summary-back svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .2s ease;
}

.product-summary-back:hover svg {
  transform: translateX(3px);
}

/* 从产品页跳过来时，联系方式栏闪两下告诉用户光标在哪。
   两个 0.42s 的周期 = 两下；用 outline 而不是 border，免得撑动布局。 */
@keyframes ht-field-flash {
  0%, 100% { outline-color: rgba(14, 143, 156, 0); background-color: transparent; }
  50% { outline-color: rgba(14, 143, 156, .85); background-color: rgba(14, 143, 156, .09); }
}

.footer-quote-form .is-flashing {
  outline: 2px solid rgba(14, 143, 156, 0);
  outline-offset: 2px;
  border-radius: 4px;
  animation: ht-field-flash .42s ease-in-out 2;
}

@media (prefers-reduced-motion: reduce) {
  .footer-quote-form .is-flashing {
    animation: none;
    outline-color: rgba(14, 143, 156, .85);
  }
}

@media (max-width: 620px) {
  .product-summary-back {
    height: 42px;
    padding: 0 14px;
    font-size: 14px;
  }
}

/* ------------------------------------------------------------------
   分栏面板里的小标题（产品视频 / 技术亮点 / 可换模块）
   ------------------------------------------------------------------ */
.panel-sub-title {
  margin: 34px 0 16px;
  padding-left: 12px;
  border-left: 3px solid var(--glow);
  color: var(--heading);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
}

.product-video-block .video-embed {
  overflow: hidden;
  /* 通栏铺满太占版面，收到一半宽并居中。 */
  max-width: 50%;
  margin-left: auto;
  margin-right: auto;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #0f1418;
}

@media (max-width: 900px) {
  .product-video-block .video-embed {
    max-width: 100%;
  }
}

.product-video-block .video-embed video,
.product-video-block .video-embed iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
}

.product-highlight-block .highlight-item h4 {
  margin: 0 46px 10px 0;
  color: var(--heading);
  font-size: 16.5px;
  font-weight: 650;
  line-height: 1.55;
}

/* ------------------------------------------------------------------
   支持术式：蛇形流程。一行四格，第二行调头从右往左，
   行末的箭头从右边（或左边）绕下来接上下一行。
   ------------------------------------------------------------------ */
.procedure-flow {
  --pf-gap: 46px;
  --pf-drop: 38px;
  --pf-head: 9px;
  --pf-cols: 5;
  display: flex;
  flex-direction: column;
  gap: var(--pf-drop);
}

.pf-row {
  position: relative;
  display: grid;
  /* repeat() 的列数不吃 var()，只能写死；改列数时连同 --pf-cols 一起改。 */
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--pf-gap);
}

/* 最后一行没排满时，格子仍旧对齐上一行的列宽，不撑开。 */
.pf-row.is-rtl[data-count="1"] .pf-item:first-child {
  grid-column-start: 5;
}

.pf-row.is-rtl[data-count="2"] .pf-item:first-child {
  grid-column-start: 4;
}

.pf-row.is-rtl[data-count="3"] .pf-item:first-child {
  grid-column-start: 3;
}

.pf-row.is-rtl[data-count="4"] .pf-item:first-child {
  grid-column-start: 2;
}

.pf-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 62px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: #f7f8f9;
  color: #4c555d;
  font-size: 14px;
  line-height: 1.6;
  text-align: center;
  transition: border-color .26s var(--ease), background-color .26s var(--ease);
}

.pf-item:hover {
  border-color: rgba(38, 74, 102, .34);
  background: #fff;
}

/* 格子之间是一支箭头：一段线，线的终点接上三角，两者首尾相接不重叠。 */
.pf-row .pf-item:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  width: calc(var(--pf-gap) - var(--pf-head));
  height: 2px;
  transform: translateY(-50%);
  background: rgba(38, 74, 102, .55);
}

.pf-row .pf-item:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: 5px solid transparent;
}

/* 从左往右：线从格子右边出发，三角落在空档最右端，尖顶着下一个格子。 */
.pf-row.is-ltr .pf-item:not(:last-child)::after {
  right: calc(var(--pf-gap) * -1 + var(--pf-head));
}

.pf-row.is-ltr .pf-item:not(:last-child)::before {
  right: calc(var(--pf-gap) * -1);
  border-width: 5px 0 5px var(--pf-head);
  border-left-color: var(--teal);
}

/* 调头往回走：三角落在空档最左端，线接在三角后面。 */
.pf-row.is-rtl .pf-item:not(:last-child)::after {
  right: calc(var(--pf-gap) * -1);
}

.pf-row.is-rtl .pf-item:not(:last-child)::before {
  right: calc(var(--pf-head) * -1);
  border-width: 5px var(--pf-head) 5px 0;
  border-right-color: var(--teal);
}

/* 行末绕下来那一段：从右往左的行在最右侧掉头，反过来的在最左侧。 */
.pf-row:not(:last-child)::after {
  content: "";
  position: absolute;
  bottom: calc(var(--pf-drop) * -1 + var(--pf-head));
  width: 2px;
  height: calc(var(--pf-drop) - var(--pf-head));
  background: rgba(38, 74, 102, .55);
}

.pf-row:not(:last-child)::before {
  content: "";
  position: absolute;
  bottom: calc(var(--pf-drop) * -1);
  border: 5px solid transparent;
  border-width: var(--pf-head) 5px 0;
  border-top-color: var(--teal);
}

/* 50% / 列数 = 最后一列的中心离边的距离。竖线和三角都对到这条线上，
   以后改列数只用动 --pf-cols。 */
.pf-row.is-ltr:not(:last-child)::after,
.pf-row.is-ltr:not(:last-child)::before {
  right: calc(50% / var(--pf-cols));
  transform: translateX(50%);
}

.pf-row.is-rtl:not(:last-child)::after,
.pf-row.is-rtl:not(:last-child)::before {
  left: calc(50% / var(--pf-cols));
  transform: translateX(-50%);
}

/* ------------------------------------------------------------------
   可换模块
   ------------------------------------------------------------------ */
.replaceable-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 11px 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.replaceable-list li {
  position: relative;
  padding-left: 24px;
  color: #4c555d;
  font-size: 14.5px;
  line-height: 1.85;
}

/* 跟结构要点用同一个空心圆 */
.replaceable-list li::before {
  content: "";
  position: absolute;
  left: 0;
  width: 9px;
  height: 9px;
  border: 2px solid var(--teal);
  border-radius: 50%;
}

@media (max-width: 900px) {
  .procedure-flow {
    --pf-gap: 30px;
  }
}

/* 手机上蛇形没意义，改成一列从上往下走，箭头统一朝下。 */
@media (max-width: 700px) {
  .procedure-flow {
    --pf-drop: 26px;
    gap: var(--pf-drop);
  }

  .pf-row {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--pf-drop);
  }

  /* 调头行的视觉顺序要倒过来，才接得上上一行的末尾。 */
  .pf-row.is-rtl {
    display: flex;
    flex-direction: column-reverse;
  }

  .pf-row.is-rtl[data-count="1"] .pf-item:first-child,
  .pf-row.is-rtl[data-count="2"] .pf-item:first-child,
  .pf-row.is-rtl[data-count="3"] .pf-item:first-child,
  .pf-row.is-rtl[data-count="4"] .pf-item:first-child {
    grid-column-start: auto;
  }

  /* 行与行之间的绕行线用不上了 */
  .pf-row::after,
  .pf-row::before {
    display: none;
  }

  /* 每个格子下面接一段带箭头的竖线。选择器要压过上面按行方向写的那几条。 */
  .procedure-flow .pf-row.is-ltr .pf-item::after,
  .procedure-flow .pf-row.is-rtl .pf-item::after {
    content: "";
    display: block;
    position: absolute;
    top: auto;
    right: auto;
    bottom: calc(var(--pf-drop) * -1 + var(--pf-head));
    left: 50%;
    width: 2px;
    height: calc(var(--pf-drop) - var(--pf-head));
    margin: 0;
    transform: translateX(-50%);
    background: rgba(38, 74, 102, .55);
  }

  .procedure-flow .pf-row.is-ltr .pf-item::before,
  .procedure-flow .pf-row.is-rtl .pf-item::before {
    content: "";
    display: block;
    position: absolute;
    top: auto;
    right: auto;
    bottom: calc(var(--pf-drop) * -1);
    left: 50%;
    margin: 0;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-width: var(--pf-head) 5px 0;
    border-top-color: var(--teal);
  }

  /* 整条流程的最后一格后面不再拖线 */
  .procedure-flow .pf-row:last-child.is-ltr .pf-item:last-child::after,
  .procedure-flow .pf-row:last-child.is-ltr .pf-item:last-child::before,
  .procedure-flow .pf-row:last-child.is-rtl .pf-item:first-child::after,
  .procedure-flow .pf-row:last-child.is-rtl .pf-item:first-child::before {
    display: none;
  }

  /* 手机上只留四个分栏，产品案例收起来 */
  .product-tab-btn[data-tab-target="case"],
  .product-tab-panel[data-tab-panel="case"] {
    display: none !important;
  }
}