.elementor-17 .elementor-element.elementor-element-8dc6de7{--display:flex;--min-height:658px;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;}.elementor-17 .elementor-element.elementor-element-8dc6de7:not(.elementor-motion-effects-element-type-background), .elementor-17 .elementor-element.elementor-element-8dc6de7 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://szpigment.com/wp-content/uploads/2026/08/banner-1.webp");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-17 .elementor-element.elementor-element-9975097{text-align:center;}.elementor-17 .elementor-element.elementor-element-9975097 .elementor-heading-title{font-family:"Roboto", Sans-serif;font-size:55px;font-weight:600;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-17 .elementor-element.elementor-element-8fa9201{text-align:center;font-family:"Roboto", Sans-serif;font-size:25px;font-weight:400;color:var( --e-global-color-primary );}.elementor-17 .elementor-element.elementor-element-f9b21aa{text-align:center;font-family:"Roboto", Sans-serif;font-size:20px;font-weight:400;color:var( --e-global-color-primary );}.elementor-17 .elementor-element.elementor-element-82a9b1c{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:center;}.elementor-widget-button .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-17 .elementor-element.elementor-element-d428616{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-17 .elementor-element.elementor-element-e53cc56{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:-50px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-17 .elementor-element.elementor-element-09e1a00{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:-50px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-17 .elementor-element.elementor-element-3a7184f{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:-50px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-17 .elementor-element.elementor-element-3cf3627{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:-50px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-17 .elementor-element.elementor-element-fd388da{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-17 .elementor-element.elementor-element-8de19e3{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}:root{--page-title-display:none;}/* Start custom CSS for container, class: .elementor-element-8dc6de7 *//* ==================================================
   SHENGZHU — CHAMELEON PIGMENT HERO
================================================== */

.chameleon-hero,
.chameleon-hero * {
  box-sizing: border-box;
}

.chameleon-hero {
  position: relative;
  isolation: isolate;

  display: flex;
  align-items: center;

  min-height: 680px;
  padding: 105px 7% 95px;
  overflow: hidden;

  background-position: center center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;

  color: #ffffff;
}

/* 左侧深色遮罩，防止文字压在高亮样板上 */
.chameleon-hero::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 0;

  background:
    linear-gradient(
      90deg,
      rgba(2, 2, 7, 0.98) 0%,
      rgba(4, 4, 12, 0.94) 24%,
      rgba(6, 5, 18, 0.82) 42%,
      rgba(7, 6, 18, 0.42) 63%,
      rgba(3, 3, 8, 0.13) 100%
    );
}

/* 底部暗角与轻微紫蓝光感 */
.chameleon-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;

  background:
    radial-gradient(
      circle at 15% 82%,
      rgba(142, 67, 255, 0.24),
      transparent 33%
    ),
    radial-gradient(
      circle at 85% 12%,
      rgba(0, 217, 202, 0.08),
      transparent 25%
    ),
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.04) 0%,
      rgba(0, 0, 0, 0.18) 100%
    );

  pointer-events: none;
}

/* Elementor 内部宽度 */
.chameleon-hero > .e-con-inner {
  width: 100%;
  max-width: 1380px;
  margin: 0 auto;
}

/* 让内容全部靠左 */
.chameleon-hero .elementor-element {
  text-align: left;
}

/* ==================================================
   TITLE
================================================== */

.chameleon-hero-title {
  width: 100%;
  max-width: 760px;
}

.chameleon-hero-title .elementor-heading-title {
  margin: 0;

  color: #ffffff;

  font-size: clamp(48px, 5.1vw, 76px);
  line-height: 0.98;
  font-weight: 900;
  letter-spacing: -2.4px;
  text-align: left;
  text-transform: uppercase;

  text-shadow:
    0 5px 26px rgba(0, 0, 0, 0.78),
    0 0 32px rgba(118, 73, 255, 0.16);
}

/* ==================================================
   SLOGAN
================================================== */

.chameleon-hero-slogan {
  width: 100%;
  max-width: 680px;
  margin-top: 24px;
}

.chameleon-hero-slogan,
.chameleon-hero-slogan p {
  margin-bottom: 0;

  color: #ffffff;

  font-size: 17px;
  line-height: 1.45;
  font-weight: 900;
  letter-spacing: 0.35px;
  text-align: left;
  text-transform: uppercase;

  text-shadow:
    0 3px 18px rgba(0, 0, 0, 0.82);
}

/* 给短句加入紫蓝青渐变 */
.chameleon-hero-slogan p {
  display: inline-block;

  background:
    linear-gradient(
      90deg,
      #d28cff 0%,
      #8c7dff 34%,
      #40bfff 66%,
      #38e5cc 100%
    );

  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ==================================================
   DESCRIPTION
================================================== */

.chameleon-hero-desc {
  width: 100%;
  max-width: 650px;
  margin-top: 20px;
}

.chameleon-hero-desc,
.chameleon-hero-desc p {
  margin-bottom: 0;

  color: rgba(235, 235, 242, 0.82);

  font-size: 16px;
  line-height: 1.76;
  font-weight: 400;
  text-align: left;

  text-shadow:
    0 3px 18px rgba(0, 0, 0, 0.86);
}

.chameleon-hero-desc strong {
  color: #ffffff;
  font-weight: 700;
}

/* ==================================================
   BUTTON AREA
================================================== */

.chameleon-hero-actions {
  display: flex !important;
  flex-direction: row !important;
  justify-content: flex-start !important;
  align-items: center !important;

  width: auto !important;
  max-width: 680px;
  margin-top: 31px;
  padding: 0 !important;
  gap: 13px !important;

  border: 0 !important;
  background: transparent !important;
}

/* 清除截图里按钮父容器的大边框 */
.chameleon-hero-actions::before,
.chameleon-hero-actions::after {
  display: none !important;
}

/* 通用按钮 */
.chameleon-hero-primary .elementor-button,
.chameleon-hero-secondary .elementor-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 54px;
  padding: 0 27px;

  border-radius: 999px;

  font-size: 12px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: 0.45px;
  text-transform: uppercase;

  transition:
    transform 0.3s ease,
    border-color 0.3s ease,
    background 0.3s ease,
    box-shadow 0.3s ease;
}

/* 主按钮 */
.chameleon-hero-primary .elementor-button {
  border: 1px solid transparent;

  background:
    linear-gradient(
      90deg,
      #843dff 0%,
      #ba42f2 46%,
      #0fcbbd 100%
    );

  color: #ffffff;

  box-shadow:
    0 16px 35px rgba(132, 61, 255, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.chameleon-hero-primary .elementor-button:hover {
  color: #ffffff;
  transform: translateY(-4px);

  box-shadow:
    0 23px 46px rgba(132, 61, 255, 0.46),
    0 0 28px rgba(15, 203, 189, 0.14);
}

/* 次按钮 */
.chameleon-hero-secondary .elementor-button {
  border: 1px solid rgba(215, 201, 255, 0.43);

  background: rgba(8, 8, 13, 0.56);
  color: #ffffff;

  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.chameleon-hero-secondary .elementor-button:hover {
  color: #ffffff;
  transform: translateY(-4px);

  border-color: rgba(74, 226, 208, 0.70);
  background: rgba(20, 105, 107, 0.18);

  box-shadow:
    0 17px 36px rgba(0, 0, 0, 0.34),
    0 0 24px rgba(42, 217, 202, 0.10);
}

/* ==================================================
   OPTIONAL ACCENT LINE
================================================== */

.chameleon-hero-desc::after {
  content: "";

  display: block;

  width: 86px;
  height: 3px;
  margin-top: 23px;

  border-radius: 999px;

  background:
    linear-gradient(
      90deg,
      #9c4cff,
      #39bfff,
      #33dfc6
    );

  box-shadow:
    0 0 17px rgba(95, 103, 255, 0.38);
}

/* ==================================================
   TABLET
================================================== */

@media (max-width: 1024px) {
  .chameleon-hero {
    min-height: 620px;
    padding: 92px 6% 80px;

    background-position: 57% center !important;
  }

  .chameleon-hero::before {
    background:
      linear-gradient(
        90deg,
        rgba(2, 2, 7, 0.97) 0%,
        rgba(5, 4, 15, 0.90) 40%,
        rgba(6, 5, 16, 0.52) 70%,
        rgba(3, 3, 8, 0.17) 100%
      );
  }

  .chameleon-hero-title {
    max-width: 680px;
  }

  .chameleon-hero-title .elementor-heading-title {
    letter-spacing: -1.7px;
  }

  .chameleon-hero-desc {
    max-width: 590px;
  }
}

/* ==================================================
   MOBILE
================================================== */

@media (max-width: 767px) {
  .chameleon-hero {
    min-height: 690px;
    padding: 78px 20px 55px;

    align-items: flex-end;

    background-position: 61% center !important;
  }

  .chameleon-hero::before {
    background:
      linear-gradient(
        180deg,
        rgba(2, 2, 7, 0.08) 0%,
        rgba(3, 3, 9, 0.23) 32%,
        rgba(4, 4, 11, 0.77) 59%,
        rgba(2, 2, 7, 0.98) 100%
      );
  }

  .chameleon-hero::after {
    background:
      radial-gradient(
        circle at 20% 87%,
        rgba(139, 60, 255, 0.25),
        transparent 38%
      );
  }

  .chameleon-hero-title {
    max-width: 100%;
  }

  .chameleon-hero-title .elementor-heading-title {
    font-size: 38px;
    line-height: 1.01;
    letter-spacing: -1.2px;
  }

  .chameleon-hero-slogan {
    margin-top: 18px;
  }

  .chameleon-hero-slogan,
  .chameleon-hero-slogan p {
    font-size: 13px;
    line-height: 1.45;
  }

  .chameleon-hero-desc {
    max-width: 100%;
    margin-top: 16px;
  }

  .chameleon-hero-desc,
  .chameleon-hero-desc p {
    font-size: 13px;
    line-height: 1.65;
  }

  .chameleon-hero-desc::after {
    width: 68px;
    margin-top: 18px;
  }

  .chameleon-hero-actions {
    width: 100% !important;
    max-width: none;
    margin-top: 24px;

    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }

  .chameleon-hero-primary,
  .chameleon-hero-secondary {
    width: 100% !important;
  }

  .chameleon-hero-primary .elementor-button,
  .chameleon-hero-secondary .elementor-button {
    width: 100%;
    min-height: 50px;
  }
}/* End custom CSS */