* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
}

body {
  margin: 0;
  font-family: "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", system-ui, sans-serif;
  color: #fff3bc;
  background: #26160f;
  overflow-x: hidden;
}

.slogan {
  margin-top: 60px;
}

.hero {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: clamp(12px, 3vw, 36px);
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(circle at 25% 15%, rgba(255, 225, 128, .34), transparent 18rem),
    radial-gradient(circle at 75% 35%, rgba(255, 255, 255, .24), transparent 16rem),
    linear-gradient(135deg, rgba(52, 28, 16, .9), rgba(109, 76, 52, .82) 48%, rgba(48, 37, 28, .92)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cg fill='%23fff1c4' fill-opacity='.08'%3E%3Crect x='22' y='20' width='48' height='66' rx='6'/%3E%3Crect x='112' y='42' width='48' height='66' rx='6'/%3E%3Ccircle cx='56' cy='134' r='30'/%3E%3C/g%3E%3C/svg%3E");
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  backdrop-filter: blur(2px);
  background: rgba(42, 24, 13, .18);
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(20, 10, 4, .22), rgba(20, 10, 4, .52));
}

.bg-orbs span {
  position: absolute;
  width: 18vmin;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(255, 238, 187, .16);
  filter: blur(10px);
  animation: float 9s ease-in-out infinite;
}

.bg-orbs span:nth-child(1) {
  top: 8%;
  left: 14%;
}

.bg-orbs span:nth-child(2) {
  top: 26%;
  right: 8%;
  animation-delay: -2s;
}

.bg-orbs span:nth-child(3) {
  bottom: 22%;
  left: 5%;
  animation-delay: -4s;
}

.bg-orbs span:nth-child(4) {
  bottom: 8%;
  right: 22%;
  animation-delay: -6s;
}

@keyframes float {
  50% {
    transform: translateY(-18px) scale(1.08);
  }
}

.poster {
  width: min(100%, 860px);
  min-height: min(980px, calc(100svh - 24px));
  position: relative;
  padding: clamp(28px, 5vw, 58px) clamp(16px, 4vw, 44px) 0;
  border-radius: clamp(18px, 2vw, 32px);
  overflow: hidden;
  box-shadow:
    0 30px 90px rgba(0, 0, 0, .38),
    inset 0 0 0 1px rgba(255, 232, 151, .18);
  background:
    radial-gradient(circle at 38% 48%, rgba(255, 255, 255, .18), transparent 18rem),
    linear-gradient(180deg, rgba(95, 63, 39, .32), rgba(38, 22, 15, .62));
}

.poster::before {
  content: "";
  position: absolute;
  inset: -18px;
  background: inherit;
  filter: blur(10px);
  z-index: -1;
}

.corner {
  position: absolute;
  top: clamp(28px, 5vw, 54px);
  width: clamp(52px, 11vw, 112px);
  height: clamp(72px, 12vw, 132px);
  opacity: .9;
}

.corner::before,
.corner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(#ffe383, #fff0b8);
  clip-path: polygon(0 0, 14% 0, 14% 75%, 100% 75%, 100% 90%, 0 90%);
}

.corner::after {
  transform: translate(13px, 13px);
  opacity: .85;
}

.corner-left {
  left: clamp(22px, 6vw, 70px);
  transform: rotate(45deg);
}

.corner-right {
  right: clamp(22px, 6vw, 70px);
  transform: scaleX(-1) rotate(45deg);
}

.copy {
  position: relative;
  z-index: 5;
  text-align: center;
  text-shadow:
    3px 0 #8b1119,
    -3px 0 #8b1119,
    0 3px #8b1119,
    0 -3px #8b1119,
    0 8px 10px rgba(0, 0, 0, .35);
}

.eyebrow {
  margin: 0 0 .2em;
  font-size: clamp(2.4rem, 8vw, 5rem);
  line-height: .9;
  font-weight: 900;
  letter-spacing: .04em;
}

h1 {
  margin: 0;
  display: grid;
  gap: .08em;
  font-size: clamp(2rem, 6.4vw, 4.4rem);
  line-height: 1.08;
  font-weight: 900;
}

.headline {
  margin: .35em 0 0;
  font-size: clamp(2rem, 7.2vw, 5rem);
  line-height: 1;
  font-weight: 900;
  letter-spacing: .02em;
}

.subline {
  margin: .18em 0 0;
  font-size: clamp(1.35rem, 4.8vw, 3.6rem);
  line-height: 1.05;
  font-weight: 900;
}

/* 人物 + 下载按钮区域 */
.visual-row {
  position: static;
  z-index: 3;
  display: grid;
  grid-template-columns: 44% 56%;
  align-items: center;
  gap: 0;
  margin-top: clamp(10px, 4vw, 44px);
  min-height: clamp(360px, 58vw, 560px);
}

/* 人物贴在整个海报底部 */
.character {
  position: absolute;
  left: 0;
  bottom: 0;
  width: clamp(320px, 50vw, 520px);
  max-width: none;
  z-index: 2;
  transform: translateX(-4%);
  filter: drop-shadow(0 18px 22px rgba(0, 0, 0, .35));
}

.character-img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}

/* 右侧按钮和标题 */
.cta-panel {
  grid-column: 2;
  position: relative;
  z-index: 4;
  justify-self: end;
  margin-right: clamp(10px, 4vw, 54px);
  margin-top: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(12px, 3vw, 22px);
}

.store-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: clamp(132px, 22vw, 190px);
  min-height: clamp(44px, 6vw, 58px);
  padding: 0 clamp(18px, 3vw, 32px);
  border-radius: 999px;
  color: #fff3bc;
  text-decoration: none;
  font-size: clamp(1rem, 2.8vw, 1.45rem);
  font-weight: 900;
  letter-spacing: .04em;
  background: linear-gradient(180deg, #4b1b12, #130907);
  border: 2px solid #f6d46c;
  box-shadow:
    0 10px 22px rgba(0, 0, 0, .35),
    inset 0 1px 0 rgba(255, 255, 255, .35);
  transition: transform .2s ease, box-shadow .2s ease;
}

.store-btn:hover {
  transform: translateY(-3px);
  box-shadow:
    0 14px 28px rgba(0, 0, 0, .42),
    inset 0 1px 0 rgba(255, 255, 255, .35);
}

/* 手机和平板 */
@media (max-width: 720px) {
  .hero {
    padding: 0;
  }

  .poster {
    width: 100%;
    min-height: 100svh;
    border-radius: 0;
    padding: 38px 12px 0;
  }

  .corner {
    opacity: .55;
  }

  .copy {
    text-shadow:
      2px 0 #8b1119,
      -2px 0 #8b1119,
      0 2px #8b1119,
      0 -2px #8b1119,
      0 7px 8px rgba(0, 0, 0, .38);
  }

  .eyebrow {
    font-size: clamp(2.4rem, 13vw, 4rem);
  }

  h1 {
    font-size: clamp(1.9rem, 10vw, 3.4rem);
  }

  .headline {
    font-size: clamp(1.9rem, 10.5vw, 3.6rem);
  }

  .subline {
    font-size: clamp(1.25rem, 6.8vw, 2.4rem);
  }

  .visual-row {
    position: static;
    grid-template-columns: 44% 56%;
    min-height: 430px;
    margin-top: 10px;
  }

  .character {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 76vw;
    max-width: none;
    transform: translateX(-8%);
  }

  .cta-panel {
    grid-column: 2;
    justify-self: end;
    margin-right: 0;
    margin-top: 40px;
    align-items: center;
    gap: 10px;
  }

  .store-btn {
    min-width: 118px;
    min-height: 42px;
    padding: 0 14px;
    font-size: 1rem;
    border-width: 1.5px;
  }

}

/* 小屏手机 */
@media (max-width: 390px) {
  .poster {
    padding-inline: 8px;
    padding-bottom: 0;
  }

  .visual-row {
    position: static;
    grid-template-columns: 42% 58%;
    min-height: 420px;
  }

  .character {
    left: 0;
    bottom: 0;
    width: 84vw;
    transform: translateX(-10%);
  }

  .cta-panel {
    justify-self: end;
    margin-right: 0;
    margin-top: 30px;
  }

  .store-btn {
    min-width: 108px;
    min-height: 38px;
    padding: 0 10px;
    font-size: .92rem;
  }

}