/* 2026-10-12：将来源文档的继承和复位迁入业务根，避免污染宿主页。 */
.vl7mwp9 {
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
.vl7mwp9,
.vl7mwp9 *,
.vl7mwp9 *::before,
.vl7mwp9 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.vl7mwp9 .processing-panel-img {
  max-width: 100%;
  display: block;
  object-fit: var(--process-image-fit, cover);
  border-radius: var(--process-image-radius, 0px);
}

.vl7mwp9 {
  background-color: var(--ac-root-background-color, #0b1329);
  position: relative;
  overflow: hidden;
  color: #ffffff;
  height: auto;
}

.vl7mwp9 .processing-container {
  --processing-panel-slant: clamp(80px, 8.5vw, 112px);
  --processing-panel-divider: 5px;
  --processing-panel-angle: atan2(var(--processing-panel-slant), var(--processing-panel-height, 520px));
  display: flex;
  min-height: 520px;
  overflow: hidden;
}

/* Left Polygon Blue Stage */
.vl7mwp9 .processing-left {
  flex: 0 0 52%;
  min-width: 0;

  background: var(--engineering-background-color);
  padding: 50px calc(var(--processing-panel-slant) + 48px) 50px 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  z-index: 3;
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--processing-panel-slant)) 100%, 0 100%);
  background-image: var(--engineering-background-image, none);
  background-position: var(--engineering-background-position, center);
  background-size: var(--engineering-background-size, cover);
  background-repeat: var(--engineering-background-repeat, no-repeat);
}

.vl7mwp9 .processing-left > * {
  flex-shrink: 0;
}

.vl7mwp9 .processing-subhead {
  font-size: var(--eyebrow-font-size, 13px);

  font-weight: var(--eyebrow-normal-font-weight, 700);

  letter-spacing: var(--eyebrow-letter-spacing, 2px);

  text-transform: var(--eyebrow-text-transform, uppercase);

  color: var(--eyebrow-normal-color, #93c5fd);
  margin-bottom: 8px;
  display: block;
  font-family: var(--eyebrow-font-family, inherit);
  line-height: var(--eyebrow-line-height, 1.6);
  text-align: var(--eyebrow-text-align, left);
  font-style: var(--eyebrow-normal-font-style, normal);
  text-decoration: var(--eyebrow-normal-text-decoration, none);
}

.vl7mwp9 .processing-title {
  font-size: var(--title-font-size, 36px);

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

  color: var(--title-normal-color, #ffffff);
  margin-bottom: 12px;

  letter-spacing: var(--title-letter-spacing, 0.5px);

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

.vl7mwp9 .processing-intro {
  font-size: var(--intro-font-size, 14.5px);

  color: var(--intro-normal-color, #bfdbfe);
  margin-bottom: 28px;
  max-width: 520px;

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

.vl7mwp9 .processing-checklist {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 32px;
}

.vl7mwp9 .processing-check-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: #f0f6ff;
  background: var(--capability-background-normal, rgba(0,0,0,0));
}

.vl7mwp9 .processing-check-icon {
  width: 18px;
  height: 18px;
  border-radius: 50%;

  background: var(--capability-mark-background-normal, #38bdf8);

  color: var(--capability-mark-normal-color, #063a8a);
  display: flex;
  align-items: center;
  justify-content: center;

  font-size: var(--capability-mark-font-size, 11px);

  font-weight: var(--capability-mark-normal-font-weight, 900);
  flex-shrink: 0;
  font-family: var(--capability-mark-font-family, inherit);
  line-height: var(--capability-mark-line-height, 1.6);
  letter-spacing: var(--capability-mark-letter-spacing, normal);
  text-align: var(--capability-mark-text-align, left);
  text-transform: var(--capability-mark-text-transform, none);
  font-style: var(--capability-mark-normal-font-style, normal);
  text-decoration: var(--capability-mark-normal-text-decoration, none);
}

.vl7mwp9 .processing-btn-wrap {
  display: flex;
  align-items: center;
}

.vl7mwp9 .btn-white {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 28px;
  border-radius: 9999px;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;

  background: var(--quote-background-normal, #ffffff);

  color: var(--quote-label-normal-color, #0d47a1);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
  border: 1px solid transparent;
  border-color: var(--quote-border-normal, transparent);
}

.vl7mwp9 .btn-white:hover {
  background: var(--quote-background-hover, #f0f6ff);

  color: var(--quote-label-hover-color, #0b3c8a);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
  border-color: var(--quote-border-hover, var(--quote-border-normal, transparent));
}

/* Right Slanted Hover-Interactive Panels (Guoze Style - Smooth & Jitter-Free) */
.vl7mwp9 .processing-right {
  flex: 1;
  min-width: 0;
  margin-left: calc(-1 * var(--processing-panel-slant));
  display: flex;
  position: relative;
  z-index: 1;
}

.vl7mwp9 .processing-panel-item {
  flex: 1;
  min-width: 0;
  position: relative;
  overflow: hidden;
  clip-path: polygon(calc(var(--processing-panel-slant) + var(--processing-panel-divider)) 0, 100% 0, calc(100% - var(--processing-panel-slant)) 100%, var(--processing-panel-divider) 100%);
  margin-right: calc(-1 * var(--processing-panel-slant));
  transition: flex 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
  cursor: pointer;
  will-change: flex;
  transform: translateZ(0);
  background: var(--process-background-normal, rgba(0,0,0,0));
}

.vl7mwp9 .processing-panel-item:last-child {
  clip-path: polygon(calc(var(--processing-panel-slant) + var(--processing-panel-divider)) 0, 100% 0, 100% 100%, var(--processing-panel-divider) 100%);
  margin-right: 0;
}

/* Mouse Hover & Active State: Panel Expands Smoothly Without Shaking */
.vl7mwp9 .processing-panel-item:hover,
.vl7mwp9 .processing-panel-item.is-active {
  flex: 1.52;
  z-index: 5;
}

.vl7mwp9 .processing-right:hover .processing-panel-item:not(:hover),
.vl7mwp9 .processing-right.has-active .processing-panel-item:not(.is-active) {
  flex: 0.82;
  filter: brightness(0.85);
}

.vl7mwp9 .processing-panel-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.45s ease;
  pointer-events: none;
}

.vl7mwp9 .processing-panel-item:hover .processing-panel-img,
.vl7mwp9 .processing-panel-item.is-active .processing-panel-img {
  transform: scale(1.12);
  filter: brightness(1.1);
}

.vl7mwp9 .processing-panel-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11, 19, 41, 0.15) 0%, rgba(11, 19, 41, 0.85) 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 22px calc(var(--processing-panel-slant) + 18px) 22px 18px;
  color: #ffffff;
  transition: background 0.4s ease;
  transform: skewX(calc(-1 * var(--processing-panel-angle)));
  transform-origin: left bottom;
  pointer-events: none; /* Prevents event bubbling flickering */
}

.vl7mwp9 .processing-panel-overlay > * {
  transform: skewX(var(--processing-panel-angle));
  transform-origin: left center;
}

.vl7mwp9 .processing-panel-item:hover .processing-panel-overlay,
.vl7mwp9 .processing-panel-item.is-active .processing-panel-overlay {
  background: linear-gradient(180deg, rgba(15, 91, 209, 0.22) 0%, rgba(11, 19, 41, 0.9) 100%);
}

.vl7mwp9 .processing-panel-tag {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: var(--process-step-font-size, 11.5px);

  font-weight: var(--process-step-normal-font-weight, 700);

  color: var(--process-step-normal-color, #60a5fa);
  margin-bottom: 4px;
  transition: color 0.3s ease;

  letter-spacing: var(--process-step-letter-spacing, 0.5px);
  pointer-events: none;
  font-family: var(--process-step-font-family, inherit);
  line-height: var(--process-step-line-height, 1.6);
  text-align: var(--process-step-text-align, left);
  text-transform: var(--process-step-text-transform, none);
  font-style: var(--process-step-normal-font-style, normal);
  text-decoration: var(--process-step-normal-text-decoration, none);
}

.vl7mwp9 .processing-panel-item:hover .processing-panel-tag,
.vl7mwp9 .processing-panel-item.is-active .processing-panel-tag {
  color: var(--process-step-hover-color, var(--process-step-normal-color, #60a5fa));
  text-shadow: 0 0 10px rgba(56, 189, 248, 0.6);
  font-size: var(--process-step-hover-font-size);
  font-family: var(--process-step-hover-font-family);
  font-weight: var(--process-step-hover-font-weight);
  font-style: var(--process-step-hover-font-style);
  text-decoration: var(--process-step-hover-text-decoration);
}

.vl7mwp9 .processing-panel-name {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: var(--process-name-font-size, 14.5px);

  font-weight: var(--process-name-normal-font-weight, 700);

  line-height: var(--process-name-line-height, 1.32);
  pointer-events: none;
  font-family: var(--process-name-font-family, inherit);
  letter-spacing: var(--process-name-letter-spacing, normal);
  text-align: var(--process-name-text-align, left);
  text-transform: var(--process-name-text-transform, none);
  font-style: var(--process-name-normal-font-style, normal);
  text-decoration: var(--process-name-normal-text-decoration, none);
  color: var(--process-name-normal-color, #ffffff);
}

.vl7mwp9 .processing-panel-item:hover .processing-panel-name,
.vl7mwp9 .processing-panel-item.is-active .processing-panel-name {
  white-space: normal;
  overflow-wrap: anywhere;
}

@media (min-width: 993px) {
  .vl7mwp9 .processing-panel-item:last-child:not(:hover):not(.is-active) .processing-panel-overlay {
    padding-right: 32px;
  }
}


@media (max-width: 992px) {
  .vl7mwp9 {
    height: auto;
  }
  .vl7mwp9 .processing-container {
    flex-direction: column;
    height: auto;
    min-height: 0;
  }
  .vl7mwp9 .processing-left {
    flex: none;
    clip-path: none;
    padding: 40px 24px;
  }
  .vl7mwp9 .processing-right {
    flex: none;
    margin-left: 0;
    height: 320px;
  }
  .vl7mwp9 .processing-panel-item {
    clip-path: none !important;
    margin-right: 4px !important;
  }
  .vl7mwp9 .processing-panel-overlay {
    padding: 22px 18px;
    transform: none;
  }
  .vl7mwp9 .processing-panel-overlay > * {
    transform: none;
  }
}

.vl7mwp9 .processing-subhead:hover {
  font-size: var(--eyebrow-hover-font-size);
  font-family: var(--eyebrow-hover-font-family);
  font-weight: var(--eyebrow-hover-font-weight);
  font-style: var(--eyebrow-hover-font-style);
  text-decoration: var(--eyebrow-hover-text-decoration);
  color: var(--eyebrow-hover-color, var(--eyebrow-normal-color, #93c5fd));
}

.vl7mwp9 .processing-title:hover {
  font-size: var(--title-hover-font-size);
  font-family: var(--title-hover-font-family);
  font-weight: var(--title-hover-font-weight);
  font-style: var(--title-hover-font-style);
  text-decoration: var(--title-hover-text-decoration);
  color: var(--title-hover-color, var(--title-normal-color, #ffffff));
}

.vl7mwp9 .processing-intro:hover {
  font-size: var(--intro-hover-font-size);
  font-family: var(--intro-hover-font-family);
  font-weight: var(--intro-hover-font-weight);
  font-style: var(--intro-hover-font-style);
  text-decoration: var(--intro-hover-text-decoration);
  color: var(--intro-hover-color, var(--intro-normal-color, #bfdbfe));
}

.vl7mwp9 .processing-check-icon:hover {
  font-size: var(--capability-mark-hover-font-size);
  font-family: var(--capability-mark-hover-font-family);
  font-weight: var(--capability-mark-hover-font-weight);
  font-style: var(--capability-mark-hover-font-style);
  text-decoration: var(--capability-mark-hover-text-decoration);
  color: var(--capability-mark-hover-color, var(--capability-mark-normal-color, #063a8a));
  background: var(--capability-mark-background-hover, var(--capability-mark-background-normal, #38bdf8));
}

.vl7mwp9 .processing-check-text {
  font-size: var(--capability-description-font-size, 14px);
  font-family: var(--capability-description-font-family, inherit);
  line-height: var(--capability-description-line-height, 1.6);
  letter-spacing: var(--capability-description-letter-spacing, normal);
  text-align: var(--capability-description-text-align, left);
  text-transform: var(--capability-description-text-transform, none);
  font-weight: var(--capability-description-normal-font-weight, 400);
  font-style: var(--capability-description-normal-font-style, normal);
  text-decoration: var(--capability-description-normal-text-decoration, none);
  color: var(--capability-description-normal-color, #f0f6ff);
}

.vl7mwp9 .processing-check-text:hover {
  font-size: var(--capability-description-hover-font-size);
  font-family: var(--capability-description-hover-font-family);
  font-weight: var(--capability-description-hover-font-weight);
  font-style: var(--capability-description-hover-font-style);
  text-decoration: var(--capability-description-hover-text-decoration);
  color: var(--capability-description-hover-color, var(--capability-description-normal-color, #f0f6ff));
}

.vl7mwp9 .processing-quote-text {
  font-size: var(--quote-label-font-size, 15px);
  font-family: var(--quote-label-font-family, inherit);
  line-height: var(--quote-label-line-height, 1.6);
  letter-spacing: var(--quote-label-letter-spacing, normal);
  text-align: var(--quote-label-text-align, left);
  text-transform: var(--quote-label-text-transform, none);
  font-weight: var(--quote-label-normal-font-weight, 700);
  font-style: var(--quote-label-normal-font-style, normal);
  text-decoration: var(--quote-label-normal-text-decoration, none);
  color: var(--quote-label-normal-color, #0d47a1);
}

.vl7mwp9 .btn-white:hover .processing-quote-text {
  font-size: var(--quote-label-hover-font-size);
  font-family: var(--quote-label-hover-font-family);
  font-weight: var(--quote-label-hover-font-weight);
  font-style: var(--quote-label-hover-font-style);
  text-decoration: var(--quote-label-hover-text-decoration);
  color: var(--quote-label-hover-color, var(--quote-label-normal-color, #0d47a1));
}

.vl7mwp9 .processing-panel-name:hover {
  font-size: var(--process-name-hover-font-size);
  font-family: var(--process-name-hover-font-family);
  font-weight: var(--process-name-hover-font-weight);
  font-style: var(--process-name-hover-font-style);
  text-decoration: var(--process-name-hover-text-decoration);
  color: var(--process-name-hover-color, var(--process-name-normal-color, #ffffff));
}

.vl7mwp9 .processing-check-item:hover {
  background: var(--capability-background-hover, var(--capability-background-normal, rgba(0,0,0,0)));
}

.vl7mwp9 .processing-panel-item:hover {
  background: var(--process-background-hover, var(--process-background-normal, rgba(0,0,0,0)));
}

.vl7mwp9 .processing-quote-icon {
  width: var(--quote-icon-size, 16px);
  height: var(--quote-icon-size, 16px);
  font-size: var(--quote-icon-size, 16px);
  line-height: 1;
  display: inline-block;
  flex-shrink: 0;
  color: var(--quote-label-normal-color, #0d47a1);
}

.vl7mwp9 .processing-quote-icon.yiyingbaoicon {
  font-family: yiyingbao;
}

.vl7mwp9 .btn-white:hover .processing-quote-icon.yiyingbaoicon {
  color: var(--quote-label-hover-color, #0b3c8a);
}

/* 2026-09-18：固定平台结构配置消费；接到 Demo 已有 Root/Inner，不新增包装或作用于内部独立背景。 */
.vl7mwp9-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);
}

.vl7mwp9-component[data-style-section] > .vl7mwp9-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) {
  .vl7mwp9-component[data-style-section] > .vl7mwp9-component__inner {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

@media (max-width: 992px) {
.vl7mwp9 .processing-subhead,
.vl7mwp9 .processing-subhead:hover { font-size: var(--eyebrow-mobile-font-size, 13px); }
.vl7mwp9 .processing-title,
.vl7mwp9 .processing-title:hover { font-size: var(--title-mobile-font-size, 36px); }
.vl7mwp9 .processing-intro,
.vl7mwp9 .processing-intro:hover { font-size: var(--intro-mobile-font-size, 14.5px); }
.vl7mwp9 .processing-check-icon,
.vl7mwp9 .processing-check-icon:hover { font-size: var(--capability-mark-mobile-font-size, 11px); }
.vl7mwp9 .processing-check-text,
.vl7mwp9 .processing-check-text:hover { font-size: var(--capability-description-mobile-font-size, 14px); }
.vl7mwp9 .processing-quote-text,
.vl7mwp9 .btn-white:hover .processing-quote-text { font-size: var(--quote-label-mobile-font-size, 15px); }
.vl7mwp9 .processing-panel-tag,
.vl7mwp9 .processing-panel-item:hover .processing-panel-tag,
.vl7mwp9 .processing-panel-item.is-active .processing-panel-tag { font-size: var(--process-step-mobile-font-size, 11.5px); }
.vl7mwp9 .processing-panel-name,
.vl7mwp9 .processing-panel-name:hover { font-size: var(--process-name-mobile-font-size, 14.5px); }
}