.precise-page main::before,
.cbzsfw-page main::before,
.twzbxt-page main::before,
.xtjc-page .precise-hero::before {
  animation: product-bg-breathe 14s ease-in-out infinite alternate;
}

.precise-hero h1 span,
.service-hero h1 span,
.hero h1 span {
  background: linear-gradient(90deg, #1c54e8 0%, #2d60ff 48%, #00a8ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.precise-hero h1.product-title-animate,
.service-hero h1.product-title-animate,
.hero h1.product-title-animate {
  animation: product-title-in 900ms cubic-bezier(0.19, 1, 0.22, 1) both;
}

.product-reveal {
  opacity: 0;
  will-change: opacity, transform;
}

.product-reveal.is-visible {
  opacity: 1;
}

.product-detail-breadcrumb {
  position: relative;
  z-index: 1;
  width: min(1400px, calc(100% - 64px));
  margin: -12px auto 0;
}

.precise-page .p-card,
.precise-page .scope-item,
.precise-page .design-panel,
.cbzsfw-page .panel,
.cbzsfw-page .screen-card,
.twzbxt-page .panel,
.twzbxt-page .card {
  transition:
    transform 360ms ease,
    box-shadow 360ms ease,
    filter 360ms ease;
}

.precise-page .p-card:hover,
.precise-page .scope-item:hover,
.precise-page .design-panel:hover,
.cbzsfw-page .panel:hover,
.cbzsfw-page .screen-card:hover,
.twzbxt-page .panel:hover,
.twzbxt-page .card:hover {
  box-shadow: 0 24px 58px rgba(29, 85, 181, 0.13);
  filter: saturate(1.03);
  transform: translateY(-6px);
}

.precise-page .p-img,
.precise-page .design-img,
.precise-page .case-img,
.precise-page .travel-phone img,
.cbzsfw-page main img,
.twzbxt-page main img {
  transition:
    transform 520ms cubic-bezier(0.19, 1, 0.22, 1),
    filter 520ms ease;
}

.precise-page .p-card:hover img,
.precise-page .design-panel:hover img,
.precise-page .scope-item:hover + .case-img,
.cbzsfw-page .panel:hover img,
.cbzsfw-page .screen-card:hover img,
.twzbxt-page .panel:hover img,
.twzbxt-page .card:hover img {
  filter: drop-shadow(0 22px 28px rgba(32, 84, 172, 0.16));
  transform: translateY(-5px) scale(1.012);
}

.product-soft-float.is-visible img,
.product-soft-float.is-visible.p-img,
.product-soft-float.is-visible.design-img,
.product-soft-float.is-visible.case-img {
  animation: product-media-float 5.8s ease-in-out infinite;
}

@keyframes product-bg-breathe {
  from {
    opacity: 0.92;
    transform: scale(1);
  }

  to {
    opacity: 1;
    transform: scale(1.025);
  }
}

@keyframes product-title-in {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-26px);
  }

  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

@keyframes product-media-float {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }

  50% {
    transform: translate3d(0, -6px, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .precise-page main::before,
  .cbzsfw-page main::before,
  .twzbxt-page main::before,
  .xtjc-page .precise-hero::before,
  .precise-hero h1.product-title-animate,
  .service-hero h1.product-title-animate,
  .hero h1.product-title-animate,
  .product-soft-float.is-visible img,
  .product-soft-float.is-visible.p-img,
  .product-soft-float.is-visible.design-img,
  .product-soft-float.is-visible.case-img {
    animation: none;
  }

  .precise-page .p-card,
  .precise-page .scope-item,
  .precise-page .design-panel,
  .cbzsfw-page .panel,
  .cbzsfw-page .screen-card,
  .twzbxt-page .panel,
  .twzbxt-page .card,
  .precise-page .p-img,
  .precise-page .design-img,
  .precise-page .case-img,
  .precise-page .travel-phone img,
  .cbzsfw-page main img,
  .twzbxt-page main img {
    transition: none;
  }

  .product-reveal {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 980px) {
  .precise-hero,
  .service-hero,
  .hero,
  .matrix-hero {
    height: 220px;
  }

  .matrix-hero {
    padding-top: 110px;
  }

  .precise-hero h1,
  .service-hero h1,
  .hero h1,
  .matrix-hero h1 {
    font-size: 26px;
    line-height: 36px;
  }

  .product-detail-breadcrumb {
    width: calc(100% - 24px);
    margin-top: -8px;
  }

  .p-title,
  .intro-copy h2,
  .panel-copy h2,
  .screen-intro h2,
  .matrix-section-head h2,
  .studio-overlay h2 {
    font-size: 22px;
    line-height: 31px;
  }

  .matrix-section-head h2 {
    margin-left: 18px;
    padding-left: 0;
  }

  .p-title::before,
  .intro-copy h2::before,
  .panel-copy h2::before,
  .screen-intro h2::before,
  .matrix-section-head h2::before,
  .studio-overlay h2::before {
    left: -18px;
    top: 7px;
    width: 3px;
    height: 18px;
  }
}