.zbo8lt6 {
  
  
  --text-dark: #0f172a;
  
  
  --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --radius-full: 9999px;
  
  --transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.zbo8lt6, .zbo8lt6 *, .zbo8lt6 *::before, .zbo8lt6 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.zbo8lt6 {
  font-family: var(--font-sans);
  color: var(--text-dark);
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.zbo8lt6 .strip-btn-more {
  text-decoration: none;
}

/* 2026-10-12：将组件上下留白移入唯一版心；背景和有意裁切仍由根承接，避免版心尺寸改变装饰锚点。 */
.zbo8lt6 .services-container {
  width: 100%;
  max-width: var(--custom-content-max-width);
  margin-left: auto;
  margin-right: auto;
  padding-top: var(--padding_tb, 0rem);
  padding-bottom: var(--padding_tb, 0rem);
  padding-left: var(--padding_lr);
  padding-right: var(--padding_lr);
}

.zbo8lt6.section-tech-services {

  position: relative;
  overflow: hidden;
}

.zbo8lt6 .tech-services-ambient-bg {
  position: absolute;
  top: 10px;
  right: -50px;
  width: 550px;
  height: 400px;
  pointer-events: none;
  opacity: 0.75;
}

.zbo8lt6 .tech-molecule-bg {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.zbo8lt6 .services-header-group {
  margin-bottom: 36px;
  position: relative;
  z-index: 2;
}

.zbo8lt6 .services-tag-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.zbo8lt6 .services-tag-text {
  font-size: var(--tag-size, 13px);

  font-weight: var(--tag-weight, 800);

  letter-spacing: var(--tag-letter-spacing, 1.5px);

  color: var(--tag-color, #0284c7);

  text-transform: var(--tag-transform, uppercase);
  font-family: var(--tag-family, inherit);
  line-height: var(--tag-line-height, inherit);
  font-style: var(--tag-style, normal);
  text-decoration: var(--tag-decoration, none);
  text-align: var(--tag-align, left);
}

.zbo8lt6 .services-tag-text:hover {
  font-size: var(--tag-hover-size, var(--tag-size, inherit));
  font-family: var(--tag-hover-family, var(--tag-family, inherit));
  font-weight: var(--tag-hover-weight, var(--tag-weight, 400));
  font-style: var(--tag-hover-style, var(--tag-style, normal));
  text-decoration: var(--tag-hover-decoration, var(--tag-decoration, none));
  color: var(--tag-hover-color, var(--tag-color, inherit));
}


.zbo8lt6 .services-main-title {
  font-size: var(--heading-size, 36px);

  font-weight: var(--heading-weight, 800);

  color: var(--heading-color, #0f172a);

  letter-spacing: var(--heading-letter-spacing, -0.5px);
  margin-bottom: 12px;
  font-family: var(--heading-family, inherit);
  line-height: var(--heading-line-height, inherit);
  font-style: var(--heading-style, normal);
  text-decoration: var(--heading-decoration, none);
  text-align: var(--heading-align, left);
  text-transform: var(--heading-transform, none);
}

.zbo8lt6 .services-main-title:hover {
  font-size: var(--heading-hover-size, var(--heading-size, inherit));
  font-family: var(--heading-hover-family, var(--heading-family, inherit));
  font-weight: var(--heading-hover-weight, var(--heading-weight, 400));
  font-style: var(--heading-hover-style, var(--heading-style, normal));
  text-decoration: var(--heading-hover-decoration, var(--heading-decoration, none));
  color: var(--heading-hover-color, var(--heading-color, inherit));
}


.zbo8lt6 .services-description {
  font-size: var(--intro-size, 15px);

  color: var(--intro-color, #64748b);

  line-height: var(--intro-line-height, 1.65);
  max-width: 820px;
  font-family: var(--intro-family, inherit);
  letter-spacing: var(--intro-letter-spacing, normal);
  font-weight: var(--intro-weight, 400);
  font-style: var(--intro-style, normal);
  text-decoration: var(--intro-decoration, none);
  text-align: var(--intro-align, left);
  text-transform: var(--intro-transform, none);
}

.zbo8lt6 .services-description:hover {
  font-size: var(--intro-hover-size, var(--intro-size, inherit));
  font-family: var(--intro-hover-family, var(--intro-family, inherit));
  font-weight: var(--intro-hover-weight, var(--intro-weight, 400));
  font-style: var(--intro-hover-style, var(--intro-style, normal));
  text-decoration: var(--intro-hover-decoration, var(--intro-decoration, none));
  color: var(--intro-hover-color, var(--intro-color, inherit));
}



.zbo8lt6 .tech-accordion-wrapper {
  display: flex;
  border-radius: 20px;
  overflow: hidden;
  height: 380px;
  box-shadow: 0 16px 40px rgba(8, 62, 168, 0.1);
  position: relative;
  z-index: 2;
}

.zbo8lt6 .tech-strip {
  flex: 1;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: flex 0.5s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.35s ease;
  color: #ffffff;
}

.zbo8lt6 .tech-strip.strip-navy { background: var(--item-background, #0f3478); }
.zbo8lt6 .tech-strip.strip-green { background: var(--item-background, #16a366); }
.zbo8lt6 .tech-strip.strip-cyan { background: var(--item-background, #0ea5b5); }
.zbo8lt6 .tech-strip.strip-slate { background: var(--item-background, #64748b); }
.zbo8lt6 .tech-strip.strip-vibrant-blue { background: var(--item-background, #1d75c8); }

.zbo8lt6 .tech-strip.active {
  flex: 2.4;
  background: #1a68bf;
  cursor: default;
}

.zbo8lt6 .tech-strip .strip-inner {
  padding: 36px 28px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
}

.zbo8lt6 .strip-icon-box {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--icon-color, #ffffff);
  background: var(--icon-background-normal, rgba(0,0,0,0));
  margin-bottom: 12px;
}

.zbo8lt6 .strip-title {
  font-size: var(--title-size, 20px);

  font-weight: var(--title-weight, 800);

  color: var(--title-color, #ffffff);
  margin-bottom: 4px;
  font-family: var(--title-family, inherit);
  line-height: var(--title-line-height, inherit);
  letter-spacing: var(--title-letter-spacing, normal);
  font-style: var(--title-style, normal);
  text-decoration: var(--title-decoration, none);
  text-align: var(--title-align, left);
  text-transform: var(--title-transform, none);
}

.zbo8lt6 .strip-title:hover {
  font-size: var(--title-hover-size, var(--title-size, inherit));
  font-family: var(--title-hover-family, var(--title-family, inherit));
  font-weight: var(--title-hover-weight, var(--title-weight, 400));
  font-style: var(--title-hover-style, var(--title-style, normal));
  text-decoration: var(--title-hover-decoration, var(--title-decoration, none));
  color: var(--title-hover-color, var(--title-color, inherit));
}


.zbo8lt6 .strip-subtitle {
  font-size: var(--subtitle-size, 12px);

  color: var(--subtitle-color, rgba(255, 255, 255, 0.8));

  font-weight: var(--subtitle-weight, 500);
  display: block;
  font-family: var(--subtitle-family, inherit);
  line-height: var(--subtitle-line-height, inherit);
  letter-spacing: var(--subtitle-letter-spacing, normal);
  font-style: var(--subtitle-style, normal);
  text-decoration: var(--subtitle-decoration, none);
  text-align: var(--subtitle-align, left);
  text-transform: var(--subtitle-transform, none);
}

.zbo8lt6 .strip-subtitle:hover {
  font-size: var(--subtitle-hover-size, var(--subtitle-size, inherit));
  font-family: var(--subtitle-hover-family, var(--subtitle-family, inherit));
  font-weight: var(--subtitle-hover-weight, var(--subtitle-weight, 400));
  font-style: var(--subtitle-hover-style, var(--subtitle-style, normal));
  text-decoration: var(--subtitle-hover-decoration, var(--subtitle-decoration, none));
  color: var(--subtitle-hover-color, var(--subtitle-color, inherit));
}


.zbo8lt6 .strip-expanded-details {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 0.4s ease, max-height 0.4s ease;
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.92);
}

.zbo8lt6 .tech-strip.active .strip-expanded-details {
  opacity: 1;
  max-height: 160px;
  margin: 12px 0 20px;
}

.zbo8lt6 .tech-strip.active .strip-icon-box {
  display: none;
}

.zbo8lt6 .strip-btn-more {
  display: inline-flex;
  align-items: center;
  padding: var(--contact-button-normal-padding, 0);
  border-radius: var(--contact-button-normal-radius, 0);
  box-shadow: var(--contact-button-normal-shadow, none);
  gap: 8px;
  font-size: 13.5px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.95);
  transition: var(--transition);
  width: fit-content;
  white-space: nowrap;
  background: var(--contact-background-normal, rgba(0,0,0,0));
}

.zbo8lt6 .strip-btn-more:hover {
  background: var(--contact-background-hover, #38bdf8);
  padding: var(--contact-button-hover-padding, 8px 22px);
  border-radius: var(--contact-button-hover-radius, 9999px);
  box-shadow: var(--contact-button-hover-shadow, 0 4px 12px rgba(0, 0, 0, 0.15));
  color: #ffffff;
  transform: translateX(4px);
}

.zbo8lt6 .tech-strip.active .strip-btn-more {
  background: var(--contact-background-selected, #ffffff);
  padding: var(--contact-button-selected-padding, 8px 22px);
  border-radius: var(--contact-button-selected-radius, 9999px);
  box-shadow: var(--contact-button-selected-shadow, 0 4px 12px rgba(0, 0, 0, 0.15));
  color: #0284c7;
  white-space: nowrap;
  transform: none;
}

.zbo8lt6 .tech-strip.active .strip-btn-more:hover {
  background: var(--contact-background-hover, #38bdf8);
  padding: var(--contact-button-hover-padding, 8px 22px);
  border-radius: var(--contact-button-hover-radius, 9999px);
  box-shadow: var(--contact-button-hover-shadow, 0 4px 12px rgba(0, 0, 0, 0.15));
  color: #041438;
  transform: translateY(-1px);
}
@media (max-width: 992px) {
  .zbo8lt6 .tech-accordion-wrapper {
    flex-direction: column;
    height: auto;
  }
  .zbo8lt6 .tech-strip {
    min-height: 100px;
  }
  .zbo8lt6 .tech-strip.active {
    min-height: 240px;
  }
}


@media (max-width: 959px) {
  .zbo8lt6 .services-tag-text { font-size: var(--tag-mobile-size, var(--tag-size, inherit)); }
}

@media (max-width: 959px) {
  .zbo8lt6 .services-main-title { font-size: var(--heading-mobile-size, var(--heading-size, inherit)); }
}

@media (max-width: 959px) {
  .zbo8lt6 .services-description { font-size: var(--intro-mobile-size, var(--intro-size, inherit)); }
}

@media (max-width: 959px) {
  .zbo8lt6 .strip-title { font-size: var(--title-mobile-size, var(--title-size, inherit)); }
}

@media (max-width: 959px) {
  .zbo8lt6 .strip-subtitle { font-size: var(--subtitle-mobile-size, var(--subtitle-size, inherit)); }
}

.zbo8lt6 .strip-description {
  font-size: var(--description-size, inherit);
  font-family: var(--description-family, inherit);
  line-height: var(--description-line-height, inherit);
  letter-spacing: var(--description-letter-spacing, normal);
  font-weight: var(--description-weight, 400);
  font-style: var(--description-style, normal);
  text-decoration: var(--description-decoration, none);
  text-align: var(--description-align, left);
  text-transform: var(--description-transform, none);
  color: var(--description-color, inherit);
}

.zbo8lt6 .strip-description:hover {
  font-size: var(--description-hover-size, var(--description-size, inherit));
  font-family: var(--description-hover-family, var(--description-family, inherit));
  font-weight: var(--description-hover-weight, var(--description-weight, 400));
  font-style: var(--description-hover-style, var(--description-style, normal));
  text-decoration: var(--description-hover-decoration, var(--description-decoration, none));
  color: var(--description-hover-color, var(--description-color, inherit));
}

@media (max-width: 959px) {
  .zbo8lt6 .strip-description { font-size: var(--description-mobile-size, var(--description-size, inherit)); }
}

.zbo8lt6 .strip-action-text {
  font-size: var(--contact-size, inherit);
  font-family: var(--contact-family, inherit);
  line-height: var(--contact-line-height, inherit);
  letter-spacing: var(--contact-letter-spacing, normal);
  font-weight: var(--contact-weight, 400);
  font-style: var(--contact-style, normal);
  text-decoration: var(--contact-decoration, none);
  text-align: var(--contact-align, left);
  text-transform: var(--contact-transform, none);
  color: var(--contact-color, inherit);
}

.zbo8lt6 .strip-btn-more:hover .strip-action-text {
  font-size: var(--contact-hover-size, var(--contact-size, inherit));
  font-family: var(--contact-hover-family, var(--contact-family, inherit));
  font-weight: var(--contact-hover-weight, var(--contact-weight, 400));
  font-style: var(--contact-hover-style, var(--contact-style, normal));
  text-decoration: var(--contact-hover-decoration, var(--contact-decoration, none));
}

@media (max-width: 959px) {
  .zbo8lt6 .strip-action-text { font-size: var(--contact-mobile-size, var(--contact-size, inherit)); }
}

/* 2026-10-13：沿原图标盒替换 SVG 叶子，字体与图片共用原布局，不让正文字体覆盖平台字形。 */
.zbo8lt6 .strip-icon-box .strip-icon-glyph {
  width: var(--icon-size, 28px);
  height: var(--icon-size, 28px);
  font-size: var(--icon-size, 28px);
  line-height: 1;
  display: block;
  object-fit: contain;
}
.zbo8lt6 .strip-icon-box .strip-icon-glyph.yiyingbaoicon {
  font-family: yiyingbao;
  color: var(--icon-color, #ffffff);
}
.zbo8lt6 .strip-icon-box:hover {
  background: var(--icon-background-hover, var(--icon-background-normal, rgba(0,0,0,0)));
}
/* 2026-10-13：原 mouseenter 会激活项；Hover 背景在组合态生效，离开后恢复原固定激活绘制。 */
.zbo8lt6 .tech-strip:hover {
  background: var(--item-hover-background, #1a68bf);
}
/* 2026-10-13：已发布上下文三态由 Item.active 与完整 CTA Hover 分别触发，变量仍属管理器。 */
.zbo8lt6 .strip-btn-more .strip-action-text {
  color: var(--contact-color, rgba(255, 255, 255, 0.95));
}
.zbo8lt6 .tech-strip.active .strip-btn-more .strip-action-text {
  color: var(--contact-selected-color, #0284c7);
}
.zbo8lt6 .tech-strip.active .strip-btn-more:hover .strip-action-text {
  color: var(--contact-hover-color, #041438);
}

/* 2026-09-18：固定平台结构配置消费；接到 Demo 已有 Root/Inner，不新增包装或作用于内部独立背景。 */
.zbo8lt6-component[data-style-section] {
  background-color: var(--ac-root-background-color, transparent);
  background-image: var(--ac-root-background-image, none);
  background-position: var(--ac-root-background-position, center);
  background-size: var(--ac-root-background-size, cover);
  background-repeat: var(--ac-root-background-repeat, no-repeat);
  margin-top: var(--ac-root-margin-tb, 0rem);
  margin-bottom: var(--ac-root-margin-tb, 0rem);
}

.zbo8lt6-component[data-style-section] > .zbo8lt6-component__inner {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--custom-content-max-width);
  margin-left: auto;
  margin-right: auto;
  padding-top: var(--padding_tb, 0rem);
  padding-bottom: var(--padding_tb, 0rem);
  padding-left: var(--padding_lr);
  padding-right: var(--padding_lr);
}

@media (max-width: 959px) {
  .zbo8lt6-component[data-style-section] > .zbo8lt6-component__inner {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}