.value-home-redesign-preview { background: #fcfdff; }

.value-home-redesign-preview .value-hero {
  height: clamp(350px, 36vw, 430px);
  overflow: hidden;
  background: linear-gradient(
    180deg,
    #087ce6 0%,
    #2f92e7 24%,
    #72b9ec 50%,
    #b8d9f1 72%,
    #e7f2fa 90%,
    #fcfdff 100%
  );
}

.value-home-redesign-preview .hero-bg {
  left: auto;
  right: max(20px, calc((100vw - 1160px) / 2));
  top: 18px;
  bottom: auto;
  display: grid;
  width: min(48vw, 560px);
  height: 390px;
  place-items: center;
  background: none !important;
  mix-blend-mode: normal;
  filter: none;
  -webkit-mask-image: none;
  mask-image: none;
  transform: translateX(20px);
}

.value-home-redesign-preview .hero-bg.a {
  right: max(68px, calc((100vw - 1080px) / 2));
  width: min(43vw, 490px);
  animation: previewHeroA 24s ease-in-out infinite;
}
.value-home-redesign-preview .hero-bg.d { animation: previewHeroD 24s ease-in-out infinite; }
.value-home-redesign-preview .hero-bg img {
  display: block;
  width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 24px 34px rgba(0,63,147,.22));
}

@keyframes previewHeroA { 0%,44%,100%{opacity:.8} 52%,94%{opacity:0} }
@keyframes previewHeroD { 0%,44%,100%{opacity:0} 52%,94%{opacity:.8} }

.value-home-redesign-preview .value-hero::after {
  background: linear-gradient(180deg, rgba(0,54,143,.28) 0%, rgba(0,77,172,.08) 52%, transparent 100%);
}

.value-home-redesign-preview .hero-copy {
  align-items: flex-start;
  justify-content: flex-start;
  padding-top: 30px;
  padding-bottom: 82px;
  transform: translateY(40px);
}

.value-home-redesign-preview .hero-brand-logo {
  display: block;
  width: clamp(146px, 16vw, 202px);
  height: auto;
  margin: 0 0 8px;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

.value-home-redesign-preview .hero-copy > span { font-size: 15px; }

.value-home-redesign-preview .value-main > .site-compliance {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 17px;
}

.value-home-redesign-preview .footer-brand-logo {
  display: block;
  width: clamp(136px, 15vw, 190px);
  height: auto;
  opacity: .11;
  filter: grayscale(1);
}

.value-home-redesign-preview .hero-heading-block { margin-top: 28px; }
.value-home-redesign-preview .hero-copy h1 { margin: 0; font-size: 0; line-height: 0; }
.value-home-redesign-preview .hero-title-art {
  display: block;
  width: clamp(420px, 42vw, 620px);
  height: auto;
  object-fit: contain;
}
.value-home-redesign-preview .hero-heading-block p { margin-top: 13px; font-size: 20px; }

.value-home-redesign-preview .value-main {
  position: relative;
  z-index: 4;
  margin-top: -86px;
}

.value-home-redesign-preview .workspace,
.value-home-redesign-preview .popular {
  border-color: rgba(210,226,241,.9);
  border-radius: 30px;
  box-shadow: 0 24px 60px rgba(34,79,126,.15);
}

.value-home-redesign-preview .popular { background: #f2f9fe; }
.value-home-redesign-preview .report-open { background: #f8fcff; }

.value-home-redesign-preview .search input { border-radius: 17px; }
.value-home-redesign-preview .search input::placeholder { color: #aebdca; opacity: 1; }
.value-home-redesign-preview .primary,
.value-home-redesign-preview .short-primary,
.value-home-redesign-preview .wechat,
.value-home-redesign-preview .switch { border-radius: 18px; }
.value-home-redesign-preview .report-row { border-radius: 22px; }

.value-home-redesign-preview .account-page {
  background: #fcfdff;
  box-shadow: 0 0 44px rgba(13,53,95,.045);
}

.value-home-redesign-preview .account-hero {
  min-height: 220px;
  padding: 36px 28px 92px;
  background: linear-gradient(
    180deg,
    #087ce6 0%,
    #2f92e7 26%,
    #72b9ec 52%,
    #b8d9f1 74%,
    #e7f2fa 91%,
    #fcfdff 100%
  );
}

.value-home-redesign-preview .account-hero::after {
  background: linear-gradient(180deg, rgba(0,54,143,.2), transparent 100%);
}

.value-home-redesign-preview .avatar { box-shadow: 0 9px 24px rgba(0,74,157,.14); }
.value-home-redesign-preview .ghost {
  min-height: 36px;
  border-radius: 18px;
  padding: 7px 15px;
  transform: translateY(6px);
  font-size: 12px;
}

.value-home-redesign-preview .metrics {
  margin: -76px 20px 0;
  overflow: hidden;
  border-color: rgba(210,226,241,.9);
  border-radius: 28px;
  box-shadow: 0 24px 60px rgba(34,79,126,.14);
  transform: translateY(-8px);
}

.value-home-redesign-preview .account-body { padding: 15px 20px 90px; }
.value-home-redesign-preview .account-body > .section-head { padding: 0 12px; }
.value-home-redesign-preview .account-body > .section-head h2 { gap: 5px; }
.value-home-redesign-preview .account-body .service-title { margin-left: 14px; }

.value-home-redesign-preview .research-list,
.value-home-redesign-preview .service-list {
  border: 1px solid rgba(210,226,241,.9);
  border-radius: 26px;
  background: #fff;
  box-shadow: 0 18px 44px rgba(34,79,126,.09);
}

.value-home-redesign-preview .research-list,
.value-home-redesign-preview .service-list { overflow: hidden; }

.value-home-redesign-preview .wechat-contact {
  padding: 18px 18px 12px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

@media (max-width: 700px) {
  .value-home-redesign-preview .value-hero {
    height: 300px;
    min-height: 300px;
    aspect-ratio: auto;
  }

  .value-home-redesign-preview .hero-bg {
    left: auto;
    right: -38px;
    top: 50px;
    width: 58vw;
    height: 190px;
  }

  .value-home-redesign-preview .hero-bg.a {
    right: -2px;
    top: 42px;
    width: 51vw;
  }

  .value-home-redesign-preview .hero-bg.d {
    top: 44px;
    width: 64vw;
  }

  .value-home-redesign-preview .hero-copy { padding: 20px 20px 70px; transform: translateY(14px); }
  .value-home-redesign-preview .hero-brand-logo { width: 110px; margin: 0 0 3px; }
  .value-home-redesign-preview .hero-copy > span { font-size: 9px; }
  .value-home-redesign-preview .footer-brand-logo { width: 102px; }
  .value-home-redesign-preview .hero-title-art { width: clamp(220px, 62vw, 260px); }
  .value-home-redesign-preview .hero-heading-block { margin-top: 25px; transform: translateY(10px); }
  .value-home-redesign-preview .hero-heading-block p { max-width: 340px; margin-top: 3px; font-size: 11px; }
  .value-home-redesign-preview .value-main { margin-top: -96px; }
  .value-home-redesign-preview .workspace,
  .value-home-redesign-preview .popular { border-radius: 25px; }
  .value-home-redesign-preview .account-hero { min-height: 205px; padding: 31px 22px 86px; }
  .value-home-redesign-preview .metrics { margin: -70px 14px 0; border-radius: 25px; }
  .value-home-redesign-preview .account-body { padding: 12px 14px 90px; }
  .value-home-redesign-preview .research-list,
  .value-home-redesign-preview .service-list { border-radius: 25px; }
  .value-home-redesign-preview .search input,
  .value-home-redesign-preview .primary { border-radius: 16px; }
}