/* Hero — Figma pc-xoon 首屏 */
/* 基准宽度：1980px  换算：vw = px / 1980 * 100 */

html {
  scrollbar-gutter: stable;
}

.content .hero {
  position: relative;
  min-height: clamp(600px, 54.545vw, 1400px); /* 1080/1980 */
  overflow-x: hidden;
  overflow-y: hidden;
  background: linear-gradient(
    60deg,
    #eee3ff 0%,
    #fbebfd 35%,
    #f0dbfc 66%,
    #e5e4fc 100%
  );
}

.content .hero .hero-bg {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  pointer-events: none;
  z-index: 0;
}

.content .hero .hero-bg__main,
.content .hero .hero-bg__texture {
  display: none;
}

.content .hero .hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 2480px;  /* 从 1920px 提高到 2480px，覆盖 2560px 屏 */
  min-height: clamp(600px, 54.545vw, 1400px); /* 1080/1980 */
  margin: 0 auto;
  padding: clamp(100px, 11.162vw, 320px) clamp(12px, 1.212vw, 40px) 0; /* 221/1980, 24/1980 */
  box-sizing: border-box;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
  align-items: flex-start;
  -webkit-flex-wrap: nowrap;
  flex-wrap: nowrap;
  gap: clamp(32px, 5.051vw, 120px); /* 100/1980，拉开文字与图片距离 */
}

/* 图标 + 文案 + 下载条 */
.content .hero .hero-left {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-flex: 0 0 auto;
  flex: 0 0 auto;
  width: clamp(360px, 39.848vw, 1020px); /* 789/1980，2560px时扩到1020px */
  max-width: clamp(360px, 39.848vw, 1020px);
  min-width: 0;
  margin-right: 0; /* 改用 gap 控制间距 */
}

.content .hero .hero-phones {
  position: relative;
  z-index: 1;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: end;
  -webkit-align-items: flex-end;
  align-items: flex-end;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  width: 100%;
  max-width: 100%;
  margin: 0 0 clamp(8px, 0.859vw, 24px); /* 17/1980 */
  pointer-events: none;
}

.content .hero .hero-phones__left {
  width: clamp(80px, 7.273vw, 180px); /* 144/1980 */
  max-width: 32%;
  height: auto;
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
}

.content .hero .hero-phones__connector {
  width: clamp(50px, 4.697vw, 120px); /* 93/1980 */
  max-width: 22%;
  height: auto;
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
  margin: 0 clamp(-6px, -0.404vw, -3px) clamp(6px, 0.606vw, 16px); /* -8/1980, 12/1980 */
  z-index: 2;
}

.content .hero .hero-phones__right {
  width: clamp(90px, 8.081vw, 200px); /* 160/1980 */
  max-width: 36%;
  height: auto;
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
}

.content .hero .hero-main {
  width: 100%;
  max-width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
}

.content .hero .hero-title {
  margin: 0 0 clamp(16px, 1.616vw, 48px); /* 32/1980 */
  width: 100%;
  max-width: 100%;
  font-family: "HarmonyOS Sans", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-weight: 900;
  font-size: clamp(28px, 2.525vw, 72px); /* 50/1980 */
  line-height: 1.172;
  color: #222222;
  text-align: center;
  word-break: break-word;
}

.content .hero .hero-subtitle {
  margin: 0 0 clamp(40px, 4.040vw, 120px); /* 80/1980 */
  max-width: clamp(280px, 27.778vw, 700px); /* 550/1980 */
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
  font-weight: 500;
  font-size: clamp(14px, 1.212vw, 36px); /* 24/1980 */
  line-height: 1.4;
  color: #666666;
  text-align: center;
}

.content .hero .hero-download {
  display: block;
  width: 100%;
  max-width: clamp(360px, 34.848vw, 860px); /* 690/1980 */
  margin: 0 auto;
  border: none;
  padding: 0;
  background: transparent;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.content .hero .hero-download img {
  display: block;
  width: 100%;
  height: auto;
}

.content .hero .hero-download:hover {
  transform: translateY(-2px);
}

.content .hero .hero-download.down-animation {
  animation: heroDownAnimate 1s forwards;
}

/* Swipe Up */
.content .hero > .download-pull {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(80px, 9.091vw, 240px); /* 180/1980 */
  z-index: 3;
  margin: 0 auto;
  width: clamp(80px, 6.061vw, 160px); /* 120/1980 */
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  text-decoration: none;
  color: #222222;
}

.content .hero > .download-pull .animate_bg {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: heroSwipeFloat 2s ease-in-out infinite;
}

.content .hero > .download-pull .pull-icon {
  width: clamp(24px, 2.020vw, 56px); /* 40/1980 */
  height: clamp(24px, 2.020vw, 56px);
  margin: 0 auto clamp(6px, 0.505vw, 14px); /* 10/1980 */
}

.content .hero > .download-pull .pull-icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.content .hero > .download-pull .lang {
  margin: 0;
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: clamp(12px, 0.808vw, 22px); /* 16/1980 */
  font-weight: 400;
  line-height: 1.4;
  text-align: center;
  white-space: nowrap;
}

@keyframes heroSwipeFloat {
  0%,
  100% {
    transform: translateY(0);
    opacity: 1;
  }
  50% {
    transform: translateY(6px);
    opacity: 0.85;
  }
}

.content .hero .hero-visual {
  -webkit-flex: 0 0 clamp(280px, 28.182vw, 720px); /* 558/1980，2560px时扩到720px */
  flex: 0 0 clamp(280px, 28.182vw, 720px);
  width: clamp(280px, 28.182vw, 720px);
  max-width: none;
  min-width: 0;
  margin-top: 0;
}

.content .hero .hero-visual img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  vertical-align: top;
}

@media screen and (min-width: 1201px) {
  .content .hero .hero-title {
    white-space: nowrap;
  }
}

@keyframes heroDownAnimate {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.96);
  }
  100% {
    transform: scale(1);
  }
}

@media screen and (max-width: 1200px) {
  .content .hero .hero-inner {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    min-height: auto;
    padding: 120px 24px 80px;
    gap: 0;
  }

  .content .hero .hero-left {
    width: 100%;
    max-width: 690px;
    margin-right: 0;
    margin-bottom: 16px;
  }

  .content .hero .hero-visual {
    -webkit-flex: none;
    flex: none;
    width: 100%;
    max-width: 558px;
    margin-top: 8px;
  }

  .content .hero .hero-title {
    font-size: 40px;
    white-space: normal;
  }

  .content .hero > .download-pull {
    bottom: 48px;
  }

  .content .hero > .download-pull .pull-icon {
    width: 36px;
    height: 36px;
    margin-bottom: 8px;
  }

  .content .hero > .download-pull .pull-icon img {
    width: 36px;
    height: 36px;
  }

  .content .hero .hero-phones {
    display: none;
  }

  .content .hero {
    min-height: auto;
  }

  .content .hero > .download-pull {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    margin: 40px auto 0;
  }
}

@media screen and (max-width: 900px) {
  .content .hero .hero-title {
    font-size: 32px;
    white-space: normal;
  }
}

@media (max-width: 768px) {
  .content .hero .hero-title {
    font-size: 28px;
    margin-bottom: 16px;
  }

  .content .hero .hero-subtitle {
    font-size: 16px;
    margin-bottom: 40px;
  }

  .content .hero .hero-download {
    margin-bottom: 60px;
  }
}