/*
 * ECCOAPS 保留式浅青绿主题
 * 导航标记以 index.html 为唯一服务端来源；本文件只换肤，不增删导航结构。
 */

:root {
  --navy: #18364a !important;
  --navy-l: #365767 !important;
  --navy-d: #102f42 !important;
  --blue: #159889 !important;
  --blue-l: #54b8ac !important;
  --blue-50: #edf9f7 !important;
  --orange: #159889 !important;
  --orange-d: #176e69 !important;
  --orange-50: #edf9f7 !important;
  --green: #159889 !important;
  --purple: #66828c !important;
  --g50: #f7fcfb !important;
  --g100: #edf9f7 !important;
  --g200: #d6e8e5 !important;
  --g300: #bcd7d3 !important;
  --g400: #8199a2 !important;
  --g500: #66828c !important;
  --g600: #4c6b78 !important;
  --g700: #365767 !important;
  --g800: #18364a !important;
  --w: #fff !important;
  --ink: #18364a !important;
  --muted: #66828c !important;
  --teal: #159889 !important;
  --teal2: #176e69 !important;
  --mint: #edf9f7 !important;
  --paper: #f7fcfb !important;
  --line: #d6e8e5 !important;
  --ss: 0 1px 2px rgba(24, 82, 87, .05) !important;
  --sd: 0 8px 24px rgba(24, 82, 87, .07) !important;
  --sl: 0 18px 48px rgba(24, 82, 87, .10) !important;
  --sx: 0 24px 64px rgba(24, 82, 87, .12) !important;
}

html {
  background: #f7fcfb;
}

body {
  color: #18364a !important;
  background: #f7fcfb !important;
  font-family: "Segoe UI", "Microsoft YaHei", "PingFang SC", system-ui, sans-serif !important;
}

img {
  height: auto;
}

::selection {
  color: #fff;
  background: #159889;
}

/* 唯一一套桌面导航视觉规则 */
.hd {
  color: #18364a !important;
  background: rgba(247, 252, 251, .96) !important;
  border-bottom: 1px solid rgba(214, 232, 229, .94) !important;
  box-shadow: 0 8px 28px rgba(24, 82, 87, .06) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
}

.hd.sc {
  background: rgba(247, 252, 251, .985) !important;
  box-shadow: 0 12px 32px rgba(24, 82, 87, .08) !important;
}

.hd-in {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  max-width: 1200px !important;
  height: 72px !important;
  margin-inline: auto !important;
  padding-inline: 24px !important;
}

.hd .logo {
  flex: 0 0 auto;
}

.hd .li-icon {
  width: 40px !important;
  height: 40px !important;
  color: #fff !important;
  background: #159889 !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 20px rgba(21, 152, 137, .20) !important;
}

.hd .li-txt {
  color: #18364a !important;
}

.hd .li-txt span {
  color: #66828c !important;
}

.hd .nav {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 30px !important;
  margin-left: auto !important;
  white-space: nowrap;
}

.hd .nav-item {
  position: relative !important;
}

.hd .nav-item > a {
  color: #294f60 !important;
  font-weight: 600 !important;
}

.hd .nav-item > a:hover,
.hd .nav-item > a.active,
.hd .nav-item > a[aria-current="page"],
.hd .nav-item:focus-within > a,
.hd .nav-item.is-open > a {
  color: #176e69 !important;
}

.hd .nav-item > a::before {
  background: #159889 !important;
}

.hd .nav-item > a.active::before,
.hd .nav-item > a[aria-current="page"]::before,
.hd .nav-item:focus-within > a::before,
.hd .nav-item.is-open > a::before {
  width: 100%;
}

.hd .nav-item.is-open > a::after {
  transform: rotate(225deg) translateY(0) !important;
}

.hd .nav-search {
  color: #365767 !important;
  background: #edf9f7 !important;
  border: 1px solid #d6e8e5;
}

.hd .nav-search:hover,
.hd .nav-search:focus-visible {
  color: #fff !important;
  background: #159889 !important;
}

.hd .nav-cta {
  min-height: 38px;
  color: #fff !important;
  border-color: #176e69 !important;
  background: #176e69 !important;
  box-shadow: none !important;
}

.hd .nav-cta:hover,
.hd .nav-cta:focus-visible {
  color: #fff !important;
  background: #105c58 !important;
  transform: translateY(-1px);
}

.hd .nav-cta .dot {
  background: #bde8df !important;
}

.hd .nav-sub,
.hd .nav-mega {
  color: #18364a !important;
  background: #fff !important;
  border: 1px solid #d6e8e5 !important;
  box-shadow: 0 22px 54px rgba(24, 82, 87, .12) !important;
}

/* 原官网导航下拉的完整几何规则，供每个页面共用。 */
.hd .nav-sub {
  position: absolute !important;
  z-index: 100 !important;
  top: 100% !important;
  left: 50% !important;
  min-width: 220px !important;
  padding: 8px !important;
  border-radius: 12px !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateX(-50%) translateY(8px) !important;
  transition: opacity .2s ease, transform .2s ease, visibility .2s !important;
}

.hd .nav-sub a {
  display: flex !important;
  flex-direction: column !important;
  padding: 10px 14px !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
}

.hd .nav-mega {
  position: absolute !important;
  z-index: 100 !important;
  top: 100% !important;
  left: 50% !important;
  display: grid !important;
  grid-template-columns: 1.1fr .9fr 1fr !important;
  gap: 14px !important;
  width: 740px !important;
  max-width: calc(100vw - 32px) !important;
  padding: 18px !important;
  border-radius: 16px !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateX(-50%) translateY(8px) !important;
  transition: opacity .2s ease, transform .2s ease, visibility .2s !important;
}

.hd .mega-group {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0;
}

.hd .mega-group h6 {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 0 0 8px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 1px !important;
}

.hd .mega-group a {
  position: relative !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 8px !important;
  margin: 0 0 2px !important;
  padding: 6px 8px !important;
  border-radius: 9px !important;
}

.hd .mega-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  width: 30px !important;
  height: 30px !important;
  border-radius: 8px !important;
}

.hd .mega-txt {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

.hd .mega-group a span {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

.hd .mega-group a small {
  display: block !important;
  margin-top: 1px !important;
  font-size: 11px !important;
  line-height: 1.4 !important;
}

.hd .mega-left {
  padding-right: 8px !important;
}

.hd .mega-left h6:nth-of-type(2) {
  margin-top: 10px !important;
  padding-top: 10px !important;
  border-top: 1px solid #d6e8e5 !important;
}

.hd .mega-foot {
  grid-column: 1 / -1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-top: 2px !important;
  padding: 10px 14px !important;
  border-radius: 10px !important;
  font-size: 12px !important;
}

.hd .mega-link {
  display: block !important;
  margin-bottom: 2px !important;
  padding: 8px 10px !important;
  border-radius: 8px !important;
}

.hd .mega-link span:first-child,
.hd .mega-link span:last-child {
  display: block !important;
}

.hd .mega-link span:last-child {
  margin-top: 2px !important;
  font-size: 11px !important;
  line-height: 1.4 !important;
}

.hd .nav-item:hover > .nav-sub,
.hd .nav-item:focus-within > .nav-sub,
.hd .nav-item:hover > .nav-mega,
.hd .nav-item:focus-within > .nav-mega {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateX(-50%) translateY(0) !important;
}

.hd .nav-item.is-open > .nav-sub {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateX(-50%) translateY(0) !important;
}

.hd .nav-item.is-open > .nav-mega {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateX(-50%) translateY(0) !important;
}

.hd .mega-group h6,
.hd .mega-group a span,
.hd .mega-link,
.hd .mega-link span:first-child {
  color: #18364a !important;
}

.hd .mega-group a small,
.hd .mega-link span:last-child,
.hd .nav-sub a small {
  color: #66828c !important;
}

.hd .mega-group h6 .mh-icon,
.hd .mega-group:nth-child(n) h6 .mh-icon,
.hd .mega-icon {
  color: #176e69 !important;
  background: #edf9f7 !important;
}

.hd .mega-group a:hover,
.hd .nav-sub a:hover,
.hd .mega-link:hover,
.hd .mega-group a:focus-visible,
.hd .nav-sub a:focus-visible,
.hd .mega-link:focus-visible {
  color: #176e69 !important;
  background: #edf9f7 !important;
}

.hd .mega-group a::before {
  background: #159889 !important;
}

.hd .mega-group a:hover .mega-icon,
.hd .mega-group a:focus-visible .mega-icon,
.hd .mega-group a span.mega-badge {
  color: #fff !important;
  background: #159889 !important;
  box-shadow: none !important;
}

.hd .mega-left {
  border-color: #d6e8e5 !important;
}

.hd .mega-foot {
  color: #4c6b78 !important;
  background: #edf9f7 !important;
}

.hd .mega-foot strong,
.hd .mega-foot a {
  color: #176e69 !important;
}

.hd a:focus-visible,
.mob-menu a:focus-visible,
.mtog:focus-visible {
  outline: 3px solid rgba(21, 152, 137, .34) !important;
  outline-offset: 3px;
}

.mtog {
  border: 1px solid #d6e8e5 !important;
  border-radius: 10px;
  background: #fff !important;
}

.mtog span {
  background: #18364a !important;
}

/* 原移动菜单结构保持不变 */
.mob-menu {
  top: 72px !important;
  max-height: calc(100dvh - 72px);
  overflow-y: auto;
  color: #18364a !important;
  background: rgba(247, 252, 251, .99) !important;
  border-color: #d6e8e5 !important;
  box-shadow: 0 20px 40px rgba(24, 82, 87, .10) !important;
}

.mob-menu a {
  color: #294f60 !important;
}

.mob-menu a:hover,
.mob-menu a:focus-visible,
.mob-menu a[aria-current="page"] {
  color: #176e69 !important;
  background: #edf9f7 !important;
}

.mob-menu .nav-cta {
  color: #fff !important;
  background: #176e69 !important;
  border-color: #176e69 !important;
}

/* 首页浅青绿换肤，保留全部原区块与锚点 */
.hero,
.phero,
.news-hero {
  color: #18364a !important;
  background:
    radial-gradient(circle at 82% 14%, rgba(21, 152, 137, .12), transparent 28%),
    linear-gradient(145deg, #f7fcfb, #edf9f7 58%, #eef7fc) !important;
  border-bottom: 1px solid #d6e8e5 !important;
}

.hero-bg {
  background:
    radial-gradient(circle at 74% 28%, rgba(21, 152, 137, .13), transparent 38%),
    radial-gradient(circle at 24% 78%, rgba(102, 130, 140, .08), transparent 34%) !important;
}

.hero-gd,
.phero-gd {
  background-image:
    linear-gradient(rgba(21, 152, 137, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(21, 152, 137, .045) 1px, transparent 1px) !important;
}

.hero h1,
.phero h1,
.news-hero h1 {
  color: #18364a !important;
}

.hero h1 .hl,
.phero h1 .hl,
.news-hero h1 .hl,
.cta h2 .hl {
  color: #159889 !important;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
}

.h-badge {
  color: #365767 !important;
  background: rgba(255, 255, 255, .76) !important;
  border-color: #bcd7d3 !important;
}

.h-badge .dot {
  background: #159889 !important;
}

.h-sub,
.phero .psub,
.news-hero .hero-copy,
.hero .hero-copy,
.hero-meta,
.breadcrumb,
.crumb {
  color: #66828c !important;
}

.breadcrumb a,
.breadcrumb span {
  color: #66828c !important;
}

.breadcrumb a:hover {
  color: #159889 !important;
}

.pstat .num {
  color: #18364a !important;
}

.pstat .num span {
  color: #159889 !important;
}

.pstat .lab {
  color: #66828c !important;
}

.btn-pri,
.btn.primary,
.fbtn,
.filter-apply {
  color: #fff !important;
  border-color: #176e69 !important;
  background: #176e69 !important;
  box-shadow: 0 10px 26px rgba(23, 110, 105, .18) !important;
}

.btn-pri:hover,
.btn.primary:hover,
.fbtn:hover,
.filter-apply:hover {
  color: #fff !important;
  background: #105c58 !important;
}

.btn-out,
.btn-soft,
.btn.secondary {
  color: #18364a !important;
  border-color: #bcd7d3 !important;
  background: rgba(255, 255, 255, .76) !important;
}

.btn-out:hover,
.btn-soft:hover,
.btn.secondary:hover {
  color: #176e69 !important;
  border-color: #159889 !important;
  background: #fff !important;
}

.hero-product-stage::before {
  background: linear-gradient(145deg, #fff, #e5f4f1) !important;
  box-shadow: 0 30px 80px rgba(24, 82, 87, .12) !important;
}

.hero-product-stage::after {
  border-color: rgba(21, 152, 137, .18) !important;
}

.hero-product-label {
  color: #18364a !important;
  background: rgba(255, 255, 255, .88) !important;
  border-color: #d6e8e5 !important;
  box-shadow: 0 16px 36px rgba(24, 82, 87, .10) !important;
}

.hero-product-label small {
  color: #66828c !important;
}

.trust-bar {
  background: #edf9f7 !important;
  border-color: #d6e8e5 !important;
}

.trust-item {
  color: #66828c !important;
}

.trust-item .tic {
  color: #176e69 !important;
  background: #fff !important;
  border: 1px solid #d6e8e5;
}

.trust-item strong {
  color: #18364a !important;
}

.product-path,
.prods,
.process,
.cases,
.factory,
.cbar,
.pmain,
.page,
.detail,
.news-main,
.contact-main {
  background: #f7fcfb !important;
}

.product-shell,
.scope-grid,
.why-card,
.ci,
.sbox,
.pcard,
.media-card,
.info-card,
.section-card,
.side-card,
.article,
.sidebar-card,
.news-card,
.contact-card,
.form-card,
.ci-card,
.value-card,
.io-card,
.app-card {
  border-color: #d6e8e5 !important;
  box-shadow: 0 10px 30px rgba(24, 82, 87, .06) !important;
}

.product-visual,
.pcard-img,
.main-media,
.key-spec {
  background: linear-gradient(145deg, #f7fcfb, #edf9f7) !important;
}

.selector-row:hover,
.app-row:hover {
  background: linear-gradient(90deg, #edf9f7, rgba(255, 255, 255, .72)) !important;
}

.stag,
.scope-no,
.app-index,
.result-info strong,
.pcard-detail,
.selector-row:hover .selector-arrow,
.app-row:hover a {
  color: #159889 !important;
}

.why {
  color: #18364a !important;
  background:
    radial-gradient(circle at 22% 16%, rgba(21, 152, 137, .09), transparent 28%),
    #eef7fc !important;
}

.why .stit,
.why-card h4,
.why-card .wstat .n {
  color: #18364a !important;
}

.why .sdesc,
.why-card p,
.why-card .wstat .l {
  color: #66828c !important;
}

.why .stag,
.why-card {
  background: rgba(255, 255, 255, .72) !important;
  border-color: #d6e8e5 !important;
}

.why-card:hover {
  background: #fff !important;
  border-color: #83bcb4 !important;
}

.pnum {
  background: #fff !important;
  border-color: #bcd7d3 !important;
}

.pstep:hover .pnum,
.pstep:last-child .pnum {
  color: #176e69 !important;
  border-color: #159889 !important;
  background: #edf9f7 !important;
}

.pf-line {
  background: #159889 !important;
}

.application-scene {
  position: relative;
  margin: -20px 0 44px;
  overflow: hidden;
  border: 1px solid #d6e8e5;
  border-radius: 20px;
  background: #edf9f7;
  box-shadow: 0 18px 48px rgba(24, 82, 87, .09);
}

.application-scene img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.application-scene figcaption {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 18px;
  color: #66828c;
  background: rgba(247, 252, 251, .96);
  border-top: 1px solid #d6e8e5;
  font-size: 13px;
}

.application-scene figcaption strong {
  color: #18364a;
  font-size: 14px;
}

.cta,
.scta,
section.cta {
  color: #18364a !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(21, 152, 137, .10), transparent 40%),
    #edf9f7 !important;
  border-block: 1px solid #d6e8e5 !important;
}

.cta h2,
.scta h3,
.cta p,
.scta p {
  color: #18364a !important;
}

.footer {
  color: #66828c !important;
  background: #edf9f7 !important;
  border-top: 1px solid #d6e8e5;
}

.footer .li-icon {
  background: #159889 !important;
  box-shadow: none !important;
}

.footer .li-txt,
.footer .li-txt span,
.footer .logo-copy,
.footer .logo-copy small,
.footer strong,
.footer h5,
.footer a,
.footer p,
.footer .fcontact,
.footer .fcol li,
.footer .fcol li > span,
.footer .foot,
.footer .foot p,
.footer .foot-links a,
.footer .copy,
.footer .fbot,
.footer .fbrand > div,
.footer .fbot > div {
  color: #365767 !important;
}

.footer .logo-mark {
  color: #fff !important;
  background: #159889 !important;
}

/* 原深色工厂区改成浅青底后，内部文字同步恢复为海军蓝。 */
.factory .stit,
.factory .fac-card h4 {
  color: #18364a !important;
}

.factory .sdesc,
.factory .fac-card p,
.factory .fac-card p[style] {
  color: #4c6b78 !important;
}

.factory .stag,
.factory .fac-card .fnum {
  color: #176e69 !important;
}

.factory .stag {
  background: #e2f3f0 !important;
}

.factory .fac-card {
  color: #18364a !important;
  background: rgba(255, 255, 255, .78) !important;
  border-color: #d6e8e5 !important;
}

.factory .fac-card:hover {
  background: #fff !important;
  border-color: #83bcb4 !important;
}

/* 资讯头图已改为浅色，数据卡不能继续沿用原深色版白字。 */
.news-hero .hero-stat {
  background: rgba(255, 255, 255, .76) !important;
  border-color: #c9dfdc !important;
}

.news-hero .hero-stat .num {
  color: #18364a !important;
}

.news-hero .hero-stat .lab {
  color: #4c6b78 !important;
}

.footer a:hover {
  color: #159889 !important;
}

.footer .ftop {
  border-color: #d6e8e5 !important;
}

input:focus,
select:focus,
textarea:focus,
button:focus-visible {
  border-color: #159889 !important;
  box-shadow: 0 0 0 3px rgba(21, 152, 137, .14) !important;
  outline: none;
}

@media (max-width: 1100px) and (min-width: 969px) {
  .hd .nav {
    gap: 18px !important;
  }

  .hd .nav-item > a {
    font-size: 14px !important;
  }

  .hd .nav-cta {
    padding-inline: 15px !important;
  }
}

@media (max-width: 968px) {
  .hd .nav {
    display: none !important;
  }

  .hd .mtog {
    display: flex !important;
  }

  .application-scene {
    margin-top: -6px;
  }
}

@media (max-width: 600px) {
  .hd-in {
    height: 64px !important;
    padding-inline: 16px !important;
  }

  .hd .li-icon {
    width: 36px !important;
    height: 36px !important;
  }

  .mob-menu {
    top: 64px !important;
    max-height: calc(100dvh - 64px);
    padding: 16px !important;
  }

  .application-scene {
    margin-bottom: 28px;
    border-radius: 14px;
  }

  .application-scene figcaption {
    display: block;
    padding: 12px 14px;
  }

  .application-scene figcaption span {
    display: block;
    margin-top: 3px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}