:root {
  --bg: #080706;
  --bg2: #0e0c09;
  --panel: #15120d;
  --line: rgba(246, 183, 62, .22);
  --gold: #f4b73e;
  --gold2: #ffd66f;
  --gold3: #d58a14;
  --text: #f7f2e8;
  --muted: #b9aa91;
  --shadow: 0 24px 70px rgba(0, 0, 0, .42);
  --radius: 22px;
  --shell: min(1180px, calc(100% - 40px));
}

* {
  box-sizing: border-box
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 84px
}

body {
  margin: 0;
  background: radial-gradient(circle at 50% -10%, #271808 0, #0a0806 28%, #080706 58%);
  color: var(--text);
  font-family: Inter, "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
  line-height: 1.65;
  overflow-x: hidden
}

img {
  display: block;
  max-width: 100%
}

a {
  color: inherit;
  text-decoration: none
}

button {
  font: inherit
}

.shell {
  width: var(--shell);
  margin-inline: auto
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(7, 6, 5, .82);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(255, 255, 255, .06)
}

.header-inner {
  height: 78px;
  display: flex;
  align-items: center;
  gap: 28px
}

.brand img {
  width: 182px;
  height: auto
}

.nav {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-left: auto
}

.nav a {
  font-size: 14px;
  color: #d9cebc;
  transition: .25s
}

.nav a:hover {
  color: var(--gold2)
}

.mini-download {
  padding: 10px 18px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--gold2), var(--gold3));
  color: #1b1205;
  font-weight: 800
}

.nav-toggle {
  display: none;
  background: none;
  border: 0;
  width: 38px;
  height: 38px;
  padding: 8px;
  cursor: pointer
}

.nav-toggle span {
  display: block;
  height: 2px;
  background: #fff;
  margin: 5px 0;
  border-radius: 3px
}

.hero {
  padding: 18px 0 0
}

.hero-carousel {
  position: relative;
  width: min(1460px, calc(100% - 28px));
  height: clamp(500px, 45vw, 720px);
  margin: auto;
  border-radius: 28px;
  overflow: hidden;
  border: 1px solid rgba(255, 196, 88, .14);
  box-shadow: var(--shadow);
  background: #000
}

.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .6s ease, visibility .6s
}

.hero-slide.is-active {
  opacity: 1;
  visibility: visible
}

.hero-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center
}

.hero-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(4, 3, 2, .85) 0%, rgba(4, 3, 2, .58) 34%, rgba(4, 3, 2, .18) 62%, rgba(4, 3, 2, .34) 100%), linear-gradient(0deg, rgba(3, 3, 3, .42), transparent 42%)
}

.hero-shade-soft {
  background: linear-gradient(90deg, rgba(3, 3, 2, .74), rgba(3, 3, 2, .25) 58%, rgba(3, 3, 2, .2)), linear-gradient(0deg, rgba(3, 3, 3, .42), transparent)
}

.hero-copy {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  padding-bottom: 66px
}

.eyebrow,
.small-cap {
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold2);
  font-weight: 700
}

.hero h1,
.hero h2 {
  font-size: clamp(38px, 5vw, 72px);
  line-height: 1.04;
  margin: 12px 0 18px;
  max-width: 760px;
  text-shadow: 0 4px 26px rgba(0, 0, 0, .45)
}

.hero h2 {
  font-size: clamp(34px, 4.3vw, 64px)
}

.lead {
  font-size: clamp(16px, 1.6vw, 20px);
  max-width: 700px;
  color: #e6dccb;
  margin: 0 0 28px
}

.hero-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 54px;
  padding: 0 24px;
  border-radius: 14px;
  font-weight: 800;
  transition: transform .2s, box-shadow .2s, border-color .2s
}

.btn:hover {
  transform: translateY(-2px)
}

.btn-gold {
  background: linear-gradient(135deg, #ffd66f 0, #efa82b 55%, #d8890e 100%);
  color: #1c1204;
  box-shadow: 0 12px 28px rgba(223, 145, 19, .22)
}

.btn-gold:hover {
  box-shadow: 0 16px 34px rgba(223, 145, 19, .33)
}

.btn-ghost {
  border: 1px solid rgba(248, 194, 91, .68);
  background: rgba(10, 9, 7, .5);
  color: #f2c56b
}

.ico {
  font-size: 18px
}

.hero-arrow {
  position: absolute;
  z-index: 5;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(10, 8, 6, .45);
  color: #fff;
  font-size: 32px;
  cursor: pointer;
  backdrop-filter: blur(8px)
}

.hero-arrow.prev {
  left: 18px
}

.hero-arrow.next {
  right: 18px
}

.hero-dots {
  position: absolute;
  z-index: 5;
  bottom: 20px;
  right: 30px;
  display: flex;
  gap: 8px
}

.hero-dots button {
  width: 8px;
  height: 8px;
  border: 0;
  border-radius: 99px;
  background: rgba(255, 255, 255, .4);
  padding: 0;
  transition: .25s
}

.hero-dots button.is-active {
  width: 28px;
  background: var(--gold)
}

.download-strip {
  padding: 24px 0
}

.download-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 28px 30px;
  background: linear-gradient(120deg, rgba(242, 174, 53, .13), rgba(23, 18, 10, .82));
  border: 1px solid var(--line);
  border-radius: 20px
}

.download-inner h2 {
  margin: 4px 0 2px;
  font-size: 28px
}

.download-inner p {
  margin: 0;
  color: var(--muted)
}

.section {
  padding: 84px 0
}

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 28px
}

.section-head h2 {
  font-size: clamp(34px, 4vw, 54px);
  margin: 5px 0 0;
  line-height: 1.1
}

.section-head p {
  margin: 0;
  color: var(--muted)
}

.filter-tabs {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 26px
}

.tab {
  border: 1px solid rgba(255, 255, 255, .1);
  background: #12100d;
  color: #cfc2ad;
  border-radius: 999px;
  padding: 9px 18px;
  cursor: pointer;
  transition: .25s
}

.tab:hover,
.tab.is-active {
  background: linear-gradient(135deg, #f8c04f, #d99016);
  color: #1d1305;
  border-color: transparent
}

.poster-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px
}

.poster-card {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  aspect-ratio: 3/4;
  background: #17120b;
  border: 1px solid rgba(255, 255, 255, .07);
  box-shadow: 0 12px 34px rgba(0, 0, 0, .25);
  transition: transform .25s, border-color .25s
}

.poster-card:hover {
  transform: translateY(-7px);
  border-color: rgba(245, 183, 62, .55)
}

.poster-card img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.poster-card::after {
  content: "";
  position: absolute;
  inset: 42% 0 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, .9))
}

.poster-meta {
  position: absolute;
  z-index: 2;
  left: 14px;
  right: 14px;
  bottom: 13px
}

.poster-meta h3 {
  font-size: 17px;
  margin: 0 0 2px
}

.poster-meta span {
  font-size: 12px;
  color: #d7c8ad
}

.poster-card.is-hidden {
  display: none
}

.feature {
  position: relative;
  min-height: 620px;
  overflow: hidden;
  border-top: 1px solid rgba(255, 255, 255, .04);
  border-bottom: 1px solid rgba(255, 255, 255, .04)
}

.feature-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center
}

.feature-mask {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(5, 4, 3, .94) 0%, rgba(5, 4, 3, .74) 32%, rgba(5, 4, 3, .18) 72%, rgba(5, 4, 3, .24) 100%)
}

.feature-copy {
  position: relative;
  z-index: 2;
  min-height: 620px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start
}

.feature-copy h2,
.wish-copy h2 {
  font-size: clamp(42px, 5vw, 68px);
  margin: 6px 0 8px;
  line-height: 1.06;
  background: linear-gradient(#ffe18a, #e79b23);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent
}

.feature-kicker {
  font-size: clamp(20px, 2.4vw, 30px);
  margin: 4px 0 22px;
  color: #f1c66e;
  font-weight: 700
}

.feature-text {
  color: #d4c6b2;
  max-width: 520px;
  margin: -4px 0 28px
}

.feature-points {
  display: grid;
  gap: 15px;
  margin: 0 0 28px
}

.feature-points div {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 16px;
  align-items: center
}

.feature-points strong {
  color: #f0bf5b
}

.feature-points span {
  color: #c8baa4
}

.feature-wish {
  min-height: 650px
}

.feature-wish .feature-bg {
  object-fit: cover
}

.center-mask {
  background: linear-gradient(0deg, rgba(4, 3, 2, .78), rgba(4, 3, 2, .06) 50%, rgba(4, 3, 2, .44))
}

.wish-copy {
  position: relative;
  z-index: 2;
  min-height: 650px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  padding-top: 58px
}

.wish-copy p {
  font-size: 20px;
  color: #e0c89f;
  margin: 0 0 18px
}

.feature-creator .feature-mask {
  background: linear-gradient(90deg, rgba(5, 4, 3, .94) 0%, rgba(5, 4, 3, .72) 38%, rgba(5, 4, 3, .12) 75%)
}

.faq-section {
  padding-bottom: 96px
}

.faq-list {
  display: grid;
  gap: 12px
}

.faq-item {
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 16px;
  background: linear-gradient(180deg, #15130f, #100e0b);
  overflow: hidden;
  transition: border-color .25s, transform .25s
}

.faq-item:hover {
  border-color: rgba(244, 183, 62, .36)
}

.faq-item[open] {
  border-color: rgba(244, 183, 62, .45)
}

.faq-item summary {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 21px 22px;
  cursor: pointer;
  font-weight: 700
}

.faq-item summary::-webkit-details-marker {
  display: none
}

.faq-item summary span {
  font-size: 24px;
  color: var(--gold);
  transition: transform .25s
}

.faq-item[open] summary span {
  transform: rotate(45deg)
}

.faq-answer {
  padding: 0 22px 22px;
  color: #c8baa4;
  max-width: 900px
}

.final-cta {
  padding: 34px 0 90px
}

.final-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 20px;
  align-items: center;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: radial-gradient(circle at 0 50%, rgba(242, 173, 48, .17), transparent 40%), #100d09
}

.final-inner img {
  width: 78px;
  height: 78px;
  border-radius: 18px
}

.final-inner h2 {
  font-size: 28px;
  margin: 0 0 3px
}

.final-inner p {
  margin: 0;
  color: var(--muted)
}

.footer {
  border-top: 1px solid rgba(255, 255, 255, .07);
  background: #050403;
  padding: 26px 0 96px
}

.footer-inner {
  display: flex;
  align-items: center;
  gap: 22px;
  color: #8f8372;
  font-size: 13px
}

.footer-brand img {
  width: 135px
}

.footer-inner p {
  margin-left: auto
}

.footer-inner>a:last-child {
  color: #c9bda8
}

.mobile-bar {
  display: none
}

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s ease, transform .7s ease
}

.reveal.in-view {
  opacity: 1;
  transform: none
}

@media(max-width:1100px) {
  .poster-grid {
    grid-template-columns: repeat(3, 1fr)
  }

  .nav {
    gap: 17px
  }

  .feature {
    min-height: 560px
  }

  .feature-copy {
    min-height: 560px
  }

  .feature-wish,
  .wish-copy {
    min-height: 580px
  }
}

@media(max-width:820px) {
  :root {
    --shell: min(100% - 28px, 1180px)
  }

  body {
    padding-bottom: 72px
  }

  .site-header {
    position: sticky
  }

  .header-inner {
    height: 68px
  }

  .brand img {
    width: 150px
  }

  .nav {
    position: absolute;
    top: 68px;
    left: 14px;
    right: 14px;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 10px;
    background: rgba(10, 8, 6, .98);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 16px;
    box-shadow: var(--shadow)
  }

  .nav.is-open {
    display: flex
  }

  .nav a {
    padding: 12px
  }

  .mini-download {
    margin-left: auto
  }

  .nav-toggle {
    display: block
  }

  .hero {
    padding-top: 10px
  }

  .hero-carousel {
    width: calc(100% - 16px);
    height: 72vh;
    min-height: 560px;
    border-radius: 20px
  }

  .hero-media {
    object-position: center
  }

  .hero-shade,
  .hero-shade-soft {
    background: linear-gradient(0deg, rgba(4, 3, 2, .92) 0%, rgba(4, 3, 2, .58) 44%, rgba(4, 3, 2, .14) 75%)
  }

  .hero-copy {
    justify-content: flex-end;
    padding-bottom: 58px
  }

  .hero h1,
  .hero h2 {
    font-size: clamp(38px, 10vw, 58px);
    max-width: 95%
  }

  .lead {
    font-size: 15px;
    max-width: 92%
  }

  .hero-arrow {
    display: none
  }

  .hero-dots {
    right: 20px
  }

  .download-inner {
    align-items: flex-start;
    flex-direction: column
  }

  .section {
    padding: 66px 0
  }

  .section-head {
    align-items: flex-start;
    flex-direction: column
  }

  .section-head p {
    font-size: 14px
  }

  .feature,
  .feature-copy {
    min-height: 620px
  }

  .feature-bg {
    object-position: 62% center
  }

  .feature-mask,
  .feature-creator .feature-mask {
    background: linear-gradient(0deg, rgba(4, 3, 2, .96) 0%, rgba(4, 3, 2, .7) 46%, rgba(4, 3, 2, .13) 78%)
  }

  .feature-copy {
    justify-content: flex-end;
    padding-bottom: 54px
  }

  .feature-wish,
  .wish-copy {
    min-height: 600px
  }

  .wish-copy {
    justify-content: flex-start;
    padding-top: 50px
  }

  .final-inner {
    grid-template-columns: auto 1fr
  }

  .final-inner .btn {
    grid-column: 1/-1
  }

  .footer-inner {
    flex-wrap: wrap
  }

  .footer-inner p {
    width: 100%;
    margin: 0
  }

  .mobile-bar {
    position: fixed;
    z-index: 120;
    left: 10px;
    right: 10px;
    bottom: 10px;
    height: 58px;
    border: 1px solid rgba(255, 203, 103, .25);
    border-radius: 16px;
    background: rgba(12, 9, 6, .93);
    backdrop-filter: blur(18px);
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 8px 8px 14px;
    box-shadow: 0 10px 38px rgba(0, 0, 0, .45)
  }

  .mobile-bar div {
    display: flex;
    flex-direction: column;
    min-width: 0
  }

  .mobile-bar strong {
    font-size: 14px
  }

  .mobile-bar span {
    font-size: 11px;
    color: #9f927f;
    white-space: nowrap
  }

  .mobile-bar a {
    margin-left: auto;
    padding: 9px 16px;
    border-radius: 11px;
    background: linear-gradient(135deg, var(--gold2), var(--gold3));
    color: #211604;
    font-size: 13px;
    font-weight: 800
  }
}

@media(max-width:560px) {
  .mini-download {
    display: none
  }

  .hero-carousel {
    min-height: 530px;
    height: 74vh
  }

  .hero-copy {
    padding-bottom: 52px
  }

  .hero h1,
  .hero h2 {
    margin-bottom: 12px
  }

  .hero-actions {
    width: 100%;
    gap: 10px
  }

  .hero-actions .btn {
    flex: 1;
    padding: 0 14px;
    font-size: 14px
  }

  .poster-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px
  }

  .poster-meta h3 {
    font-size: 15px
  }

  .filter-tabs {
    overflow: auto;
    flex-wrap: nowrap;
    padding-bottom: 4px
  }

  .tab {
    white-space: nowrap
  }

  .download-inner {
    padding: 22px
  }

  .download-inner h2 {
    font-size: 22px
  }

  .feature-points div {
    grid-template-columns: 90px 1fr;
    gap: 10px
  }

  .feature-points span {
    font-size: 13px
  }

  .feature {
    min-height: 570px
  }

  .feature-copy {
    min-height: 570px
  }

  .feature-wish,
  .wish-copy {
    min-height: 540px
  }

  .wish-copy {
    padding-top: 36px
  }

  .faq-item summary {
    padding: 18px;
    font-size: 15px
  }

  .faq-answer {
    padding: 0 18px 18px;
    font-size: 14px
  }

  .final-inner {
    padding: 20px
  }

  .final-inner img {
    width: 64px;
    height: 64px
  }

  .final-inner h2 {
    font-size: 21px
  }

  .footer {
    padding-bottom: 90px
  }
}

@media(prefers-reduced-motion:reduce) {
  * {
    scroll-behavior: auto !important;
    animation: none !important;
    transition: none !important
  }

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

/* 2026-09-24 layout refinement */
.hero-thumbs {
  position: absolute;
  z-index: 6;
  right: 34px;
  bottom: 44px;
  display: flex;
  gap: 10px;
  align-items: flex-end
}

.hero-thumb {
  width: 86px;
  height: 116px;
  padding: 0;
  border: 1px solid rgba(255, 209, 113, .45);
  border-radius: 12px;
  overflow: hidden;
  background: #111;
  opacity: .62;
  cursor: pointer;
  transition: .25s;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .35)
}

.hero-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.hero-thumb:hover,
.hero-thumb.is-active {
  opacity: 1;
  transform: translateY(-5px);
  border-color: #ffd66f;
  box-shadow: 0 0 0 2px rgba(255, 214, 111, .18), 0 15px 35px rgba(0, 0, 0, .48)
}

.hero-dots {
  right: 34px;
  bottom: 22px
}

.benefit-strip {
  margin-top: 18px;
  border-top: 1px solid rgba(244, 183, 62, .15);
  border-bottom: 1px solid rgba(244, 183, 62, .15);
  background: linear-gradient(90deg, #050504, #0b0905, #050504);
  padding: 30px 0
}

.benefit-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr)
}

.benefit-grid article {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  min-height: 78px;
  border-right: 1px solid rgba(244, 183, 62, .16)
}

.benefit-grid article:last-child {
  border-right: 0
}

.benefit-icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border: 2px solid #e7a62d;
  border-radius: 50%;
  color: #ffd66f;
  font-size: 25px;
  box-shadow: inset 0 0 18px rgba(244, 183, 62, .12), 0 0 18px rgba(244, 183, 62, .07)
}

.benefit-grid h2 {
  font-size: 20px;
  color: #f7cb68;
  margin: 0
}

.benefit-grid p {
  margin: 3px 0 0;
  color: #9e927e;
  font-size: 13px
}

.theater-section {
  position: relative;
  background: radial-gradient(circle at 50% 100%, rgba(217, 133, 14, .14), transparent 36%), linear-gradient(#080706, #0a0805);
  overflow: hidden
}

.theater-section:before,
.theater-section:after {
  content: "";
  position: absolute;
  left: -5%;
  right: -5%;
  height: 70px;
  border: 2px solid rgba(215, 138, 20, .17);
  transform: rotate(-7deg);
  pointer-events: none
}

.theater-section:before {
  top: 30px
}

.theater-section:after {
  bottom: 28px;
  transform: rotate(6deg)
}

.centered {
  justify-content: center;
  text-align: center
}

.centered>div {
  margin: auto
}

.centered p {
  margin-top: 10px;
  color: #d3ad62;
  font-size: 20px
}

.type-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  position: relative;
  z-index: 2
}

.type-card {
  position: relative;
  aspect-ratio: 4/5;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255, 193, 73, .5);
  background: #0d0b08;
  box-shadow: 0 20px 48px rgba(0, 0, 0, .38);
  transition: .28s
}

.type-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 25px 55px rgba(0, 0, 0, .55), 0 0 24px rgba(232, 165, 41, .12)
}

.type-card img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.type-card:after {
  content: "";
  position: absolute;
  inset: 40% 0 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, .93))
}

.type-card div {
  position: absolute;
  z-index: 2;
  left: 18px;
  right: 18px;
  bottom: 16px;
  text-align: center
}

.type-card h3 {
  font-size: 25px;
  color: #ffd24f;
  margin: 0 0 5px
}

.type-card p {
  margin: 0;
  color: #d1c2a8;
  font-size: 13px
}

.immersive-built {
  position: relative;
  overflow: hidden;
  padding: 92px 0;
  background: radial-gradient(circle at 72% 58%, rgba(217, 130, 9, .15), transparent 34%), linear-gradient(120deg, #070604, #120b04 58%, #050504)
}

.immersive-built:before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg, transparent 0 90px, rgba(242, 173, 48, .025) 91px 92px)
}

.immersive-built .feature-copy {
  min-height: 520px;
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 40px;
  align-items: center
}

.immersive-copy {
  position: relative;
  z-index: 4
}

.immersive-copy h2 {
  font-size: clamp(42px, 5vw, 68px);
  margin: 5px 0 8px;
  background: linear-gradient(#ffe18a, #e79b23);
  -webkit-background-clip: text;
  color: transparent
}

.immersive-controls {
  display: flex;
  gap: 10px;
  margin-top: 24px
}

.slide-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 204, 100, .45);
  background: #0e0b07;
  color: #f4bf56;
  font-size: 28px;
  cursor: pointer
}

.immersive-stage {
  position: relative;
  min-width: 0;
  perspective: 1000px
}

.glow-ring {
  position: absolute;
  width: 76%;
  height: 150px;
  left: 12%;
  bottom: 18px;
  border-radius: 50%;
  border: 2px solid rgba(248, 177, 44, .35);
  box-shadow: 0 0 45px rgba(236, 151, 20, .25), inset 0 0 34px rgba(255, 187, 46, .14);
  transform: rotateX(68deg)
}

.immersive-track {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 16px;
  transition: transform .55s cubic-bezier(.2, .8, .2, 1)
}

.immersive-card,
.phone-card {
  flex: 0 0 19%;
  border: 1px solid rgba(255, 189, 57, .5);
  border-radius: 16px;
  overflow: hidden;
  background: #0b0907;
  box-shadow: 0 20px 38px rgba(0, 0, 0, .45);
  transition: .35s
}

.immersive-card:nth-child(1),
.immersive-card:nth-child(5) {
  transform: perspective(700px) rotateY(18deg) scale(.84)
}

.immersive-card:nth-child(2),
.immersive-card:nth-child(4) {
  transform: perspective(700px) rotateY(9deg) scale(.92)
}

.phone-card {
  flex-basis: 26%;
  border: 3px solid #1d1d1d;
  border-radius: 28px;
  transform: translateY(-20px);
  box-shadow: 0 25px 55px rgba(0, 0, 0, .58), 0 0 0 1px #9e742e
}

.immersive-card img,
.phone-card img {
  width: 100%;
  aspect-ratio: 3/5;
  object-fit: cover
}

.immersive-card span {
  display: block;
  text-align: center;
  color: #efba4d;
  padding: 9px;
  font-weight: 700
}

.phone-ui {
  display: flex;
  justify-content: space-between;
  padding: 10px 12px;
  background: #050505;
  color: #f1bb4c;
  font-size: 12px
}

.wish-built {
  padding: 86px 0 96px;
  background: radial-gradient(circle at 50% 60%, rgba(166, 33, 9, .22), transparent 38%), linear-gradient(#060504, #0a0503);
  position: relative;
  overflow: hidden
}

.wish-built:before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 25%, rgba(229, 140, 13, .04) 26%, transparent 27%)
}

.wish-heading {
  text-align: center
}

.wish-heading h2 {
  font-size: clamp(42px, 5vw, 68px);
  margin: 6px 0;
  color: #edb24b
}

.wish-heading p {
  color: #c5ad88
}

.wish-rank {
  height: 410px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 16px;
  margin-top: 30px
}

.rank-card {
  position: relative;
  width: 150px;
  border: 1px solid rgba(244, 171, 49, .52);
  border-radius: 16px;
  padding: 8px;
  background: #0c0906;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .42);
  text-align: center
}

.rank-card img {
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
  border-radius: 11px
}

.rank-card span {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(#ffd66f, #b86d09);
  color: #241505;
  font-weight: 900
}

.rank-card h3 {
  font-size: 14px;
  margin: 8px 0 0;
  color: #f2c566
}

.rank-1 {
  width: 220px;
  transform: translateY(-22px);
  border-color: #ffd36a;
  box-shadow: 0 0 30px rgba(255, 177, 33, .16), 0 22px 48px rgba(0, 0, 0, .5)
}

.rank-2,
.rank-3 {
  width: 180px
}

.rank-4,
.rank-5 {
  width: 130px
}

.rank-1 b {
  display: block;
  color: #ffd159;
  margin: 4px 0
}

.crown {
  position: absolute;
  top: -42px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 38px;
  color: #ffd35c;
  text-shadow: 0 0 14px rgba(255, 181, 50, .5)
}

.wish-action {
  text-align: center;
  margin-top: 22px
}

.creator-clean {
  min-height: 620px;
  background: #050403
}

.creator-clean .feature-bg {
  object-position: center center
}

.creator-text-cover {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, #050403 0%, #050403 35%, rgba(5, 4, 3, .82) 48%, rgba(5, 4, 3, .15) 67%, rgba(5, 4, 3, .05) 100%)
}

.creator-clean .feature-copy {
  z-index: 2
}

@media(max-width:900px) {
  .hero-thumbs {
    right: 18px;
    bottom: 42px
  }

  .hero-thumb {
    width: 60px;
    height: 82px
  }

  .benefit-grid {
    grid-template-columns: 1fr
  }

  .benefit-grid article {
    justify-content: flex-start;
    padding: 14px 16px;
    border-right: 0;
    border-bottom: 1px solid rgba(244, 183, 62, .12)
  }

  .benefit-grid article:last-child {
    border-bottom: 0
  }

  .type-grid {
    grid-template-columns: repeat(2, 1fr)
  }

  .immersive-built .feature-copy {
    grid-template-columns: 1fr
  }

  .immersive-stage {
    overflow: hidden
  }

  .immersive-track {
    width: 760px;
    transform: translateX(-65px)
  }

  .wish-rank {
    height: auto;
    align-items: flex-end;
    gap: 10px;
    overflow: auto;
    justify-content: flex-start;
    padding: 45px 10px 15px
  }

  .rank-card,
  .rank-4,
  .rank-5 {
    min-width: 130px
  }

  .rank-1 {
    min-width: 180px
  }

  .rank-2,
  .rank-3 {
    min-width: 150px
  }

  .creator-text-cover {
    background: linear-gradient(0deg, #050403 0%, rgba(5, 4, 3, .88) 42%, rgba(5, 4, 3, .15) 72%)
  }
}

@media(max-width:560px) {
  .hero-thumbs {
    left: 14px;
    right: 14px;
    justify-content: flex-end;
    bottom: 28px
  }

  .hero-thumb {
    width: 48px;
    height: 66px
  }

  .hero-dots {
    display: none
  }

  .type-grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px
  }

  .type-card h3 {
    font-size: 20px
  }

  .type-card p {
    font-size: 11px
  }

  .immersive-built {
    padding: 70px 0
  }

  .immersive-built .feature-copy {
    min-height: auto
  }

  .immersive-track {
    width: 660px;
    transform: translateX(-105px)
  }

  .wish-built {
    padding: 70px 0
  }

  .creator-clean .feature-copy {
    min-height: 600px;
    padding-bottom: 44px
  }
}

/* 2026-09-24 interactive refinements */
.benefit-icon {
  padding: 0;
  background: radial-gradient(circle at 50% 50%, rgba(255, 215, 123, .08), rgba(0, 0, 0, 0) 72%)
}

.benefit-icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0 8px rgba(244, 183, 62, .18))
}

.wish-built {
  /* background-image:
    linear-gradient(180deg, rgba(5, 4, 3, .62), rgba(8, 5, 3, .84)),
    url('/assets/wish-bg-generated.png'); */
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

.wish-built:before {
  background: linear-gradient(115deg, transparent 24%, rgba(229, 140, 13, .05) 25%, transparent 26%), radial-gradient(circle at 50% 70%, rgba(255, 148, 31, .10), transparent 34%)
}

.immersive-controls,
.slide-btn {
  display: none !important
}

.immersive-stage {
  overflow: visible;
  perspective: none
}

.immersive-track {
  display: grid;
  grid-template-columns: repeat(5, minmax(110px, 1fr));
  gap: 18px;
  width: 100% !important;
  transform: none !important;
  transition: none !important;
  align-items: end;
}

.immersive-card,
.phone-card {
  flex: none
}

.immersive-card:nth-child(1),
.immersive-card:nth-child(5),
.immersive-card:nth-child(2),
.immersive-card:nth-child(4),
.phone-card {
  transform: none
}

.phone-card {
  grid-column: 3;
  transform: translateY(-12px);
  border-width: 3px
}

.immersive-card img,
.phone-card img {
  aspect-ratio: 3/5
}

.js-download {
  position: relative;
  overflow: visible
}

.download-qr-pop {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 14px);
  transform: translate(-50%, 12px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  width: 164px;
  padding: 10px;
  border-radius: 16px;
  border: 1px solid rgba(255, 209, 108, .35);
  background: rgba(14, 10, 7, .96);
  box-shadow: 0 18px 36px rgba(0, 0, 0, .46), 0 0 0 1px rgba(255, 255, 255, .03) inset;
  transition: opacity .22s ease, transform .22s ease, visibility .22s ease;
  z-index: 60;
}

.download-qr-pop:after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  border: 8px solid transparent;
  border-top-color: rgba(14, 10, 7, .96);
}

.qr-down .download-qr-pop {
  top: calc(100% + 14px);
  bottom: auto;
  transform: translate(-50%, -12px);
}

.qr-down .download-qr-pop:after {
  top: auto;
  bottom: 100%;
  border-top-color: transparent;
  border-bottom-color: rgba(14, 10, 7, .96);
}

.js-download:hover .download-qr-pop,
.js-download:focus-visible .download-qr-pop {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

.download-qr-pop img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  background: #fff;
}

.download-qr-pop span {
  display: block;
  margin-top: 8px;
  text-align: center;
  font-size: 12px;
  line-height: 1.45;
  color: #f2d291;
  white-space: normal;
}

@media(max-width:1024px) {
  .immersive-track {
    grid-template-columns: repeat(3, minmax(130px, 1fr));
  }

  .phone-card {
    grid-column: 2
  }
}

@media(max-width:820px) {
  .immersive-track {
    grid-template-columns: repeat(2, minmax(120px, 1fr));
    gap: 14px
  }

  .phone-card {
    grid-column: 1 / -1;
    max-width: 280px;
    justify-self: center;
    transform: translateY(0)
  }

  .download-qr-pop {
    display: none !important
  }
}

@media(max-width:560px) {
  .wish-rank {
    padding-inline: 0;
    overflow: visible;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center
  }

  .rank-card,
  .rank-4,
  .rank-5,
  .rank-2,
  .rank-3,
  .rank-1 {
    min-width: 0;
    width: calc(50% - 8px)
  }

  .rank-1 {
    width: 100%;
    max-width: 260px;
    order: -1;
    transform: none
  }

  .rank-card img {
    aspect-ratio: 3/4.2
  }

  .benefit-grid article {
    gap: 14px
  }

  .benefit-grid h2 {
    font-size: 18px
  }
}

@media (hover:none),
(pointer:coarse) {
  .download-qr-pop {
    display: none !important
  }
}

/* 2026-09-24 hero 4-slide + mobile adaptation */
.hero-slide-2 .hero-media,
.hero-slide-3 .hero-media,
.hero-slide-4 .hero-media {
  object-position: center right
}

.hero-slide-2 .hero-copy,
.hero-slide-3 .hero-copy,
.hero-slide-4 .hero-copy {
  /* max-width: min(100%, 760px) */
}

.hero-thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  align-items: end;
  max-width: 400px
}

.hero-thumb {
  width: 100%;
  height: 104px
}

.hero-dots {
  right: 34px;
  bottom: 18px
}

.creator-clean .feature-bg {
  object-position: center center
}

@media(max-width:1024px) {
  .hero-carousel {
    height: clamp(520px, 58vw, 700px)
  }

  .hero-copy {
    padding-inline: 22px;
    padding-bottom: 120px
  }

  .hero h1,
  .hero h2 {
    max-width: 70%
  }

  .lead {
    max-width: 62%
  }

  .hero-thumbs {
    max-width: 330px;
    right: 24px;
    bottom: 48px
  }

  .hero-thumb {
    height: 88px
  }
}

@media(max-width:820px) {
  .hero-carousel {
    height: auto;
    min-height: 620px;
    aspect-ratio: 4/5;
    border-radius: 20px
  }

  .hero-slide,
  .hero-slide.is-active {
    position: absolute;
    inset: 0
  }

  .hero-media {
    object-position: center center
  }

  .hero-shade,
  .hero-shade-soft {
    background: linear-gradient(180deg, rgba(8, 6, 4, .15) 0%, rgba(8, 6, 4, .48) 34%, rgba(8, 6, 4, .92) 76%, rgba(8, 6, 4, .98) 100%),
      linear-gradient(90deg, rgba(8, 6, 4, .85) 0%, rgba(8, 6, 4, .25) 55%, rgba(8, 6, 4, .35) 100%);
  }

  .hero-copy {
    padding: 24px 22px 132px;
    justify-content: flex-end
  }

  .hero h1,
  .hero h2 {
    font-size: clamp(32px, 8.4vw, 48px);
    max-width: 100%;
    margin-bottom: 10px
  }

  .lead {
    font-size: 14px;
    line-height: 1.65;
    max-width: 100%;
    margin-bottom: 18px
  }

  .hero-actions {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px
  }

  .hero-actions .btn {
    min-height: 48px;
    padding: 0 14px;
    font-size: 14px
  }

  .hero-thumbs {
    left: 14px;
    right: 14px;
    bottom: 18px;
    max-width: none;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
  }

  .hero-thumb {
    height: 74px;
    border-radius: 10px
  }

  .hero-dots {
    left: 0;
    right: 0;
    bottom: 100px;
    justify-content: center
  }
}

@media(max-width:560px) {
  .hero {
    padding-top: 8px
  }

  .hero-carousel {
    width: calc(100% - 12px);
    min-height: 660px;
    aspect-ratio: auto;
    height: calc(100svh - 86px)
  }

  .hero-copy {
    padding: 20px 16px 118px
  }

  .eyebrow {
    font-size: 11px;
    letter-spacing: .12em
  }

  .hero h1,
  .hero h2 {
    font-size: clamp(28px, 8vw, 38px);
    line-height: 1.08
  }

  .lead {
    font-size: 13px;
    margin-bottom: 14px
  }

  .hero-actions {
    grid-template-columns: 1fr;
    gap: 9px
  }

  .hero-actions .btn {
    width: 100%
  }

  .hero-thumb {
    height: 60px
  }

  .hero-thumb:hover,
  .hero-thumb.is-active {
    transform: none
  }

  .hero-dots {
    bottom: 86px
  }
}