.paizhuo-page {
  --seat-ink: #5a372c;
  --seat-muted: #9a786d;
  --seat-paper: #fff7e8;
  --seat-paper-2: #fffdf6;
  --seat-line: rgba(146, 98, 77, 0.18);
  --seat-primary: #ef5f86;
  --seat-primary-2: #d94773;
  --seat-gold: #f3b94d;
  --seat-lavender: #8f6bdc;
  --seat-green: #6ea274;
  color: var(--seat-ink);
  background:
    radial-gradient(circle at 12% 10%, rgba(255, 255, 255, 0.92) 0 7rem, transparent 7.3rem),
    radial-gradient(circle at 86% 7%, rgba(255, 216, 94, 0.34) 0 10rem, transparent 10.4rem),
    radial-gradient(circle at 70% 80%, rgba(149, 221, 255, 0.34) 0 16rem, transparent 16.4rem),
    linear-gradient(180deg, #d8f7ff 0%, #fff7e8 32%, #fffdf6 68%, #ffe7f1 100%);
}

.paizhuo-shell {
  width: min(1240px, calc(100% - 36px));
}

.paizhuo-nav {
  background: rgba(255, 253, 246, 0.72);
}

.paizhuo-hero {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(470px, 1.08fr);
  gap: 34px;
  align-items: center;
  min-height: calc(100vh - 98px);
  padding: 68px 0 58px;
}

.paizhuo-hero-copy h1 {
  margin-bottom: 12px;
  color: var(--seat-primary-2);
  font-size: clamp(58px, 7vw, 108px);
}

.paizhuo-tagline {
  margin-bottom: 18px;
  color: var(--seat-ink);
  font-family: var(--font-display);
  font-size: clamp(32px, 4.2vw, 58px);
  font-weight: 800;
  line-height: 1.08;
}

.paizhuo-lead,
.demo-copy p,
.screen-copy p,
.rules-grid p,
.paizhuo-cta p {
  color: var(--seat-muted);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.88;
}

.paizhuo-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 30px;
}

.paizhuo-stage {
  position: relative;
  min-height: 720px;
}

.phone-shot,
.screen-capture {
  overflow: hidden;
  margin: 0;
  border: 5px solid rgba(255, 255, 255, 0.88);
  background: rgba(255, 253, 246, 0.74);
  box-shadow: 0 26px 70px rgba(109, 70, 54, 0.18);
}

.phone-shot {
  position: absolute;
  aspect-ratio: 430 / 932;
  border-radius: 36px;
}

.phone-shot img,
.screen-capture img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.shot-seating {
  right: 7%;
  top: 2%;
  z-index: 3;
  width: min(39vw, 390px);
  transform: rotate(3deg);
}

.shot-review,
.shot-export {
  width: min(30vw, 310px);
  border-radius: 30px;
  opacity: 0.96;
}

.shot-review {
  left: 4%;
  bottom: 5%;
  transform: rotate(-8deg);
}

.shot-export {
  right: 2%;
  bottom: 7%;
  transform: rotate(8deg);
}

.paizhuo-proof {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin: 0 0 70px;
}

.paizhuo-proof div,
.rules-grid article {
  border: 4px solid rgba(255, 255, 255, 0.82);
  border-radius: 30px;
  background:
    radial-gradient(circle at 20% 10%, rgba(255, 216, 94, 0.22), transparent 8rem),
    rgba(255, 253, 246, 0.72);
  box-shadow: 0 18px 42px rgba(109, 70, 54, 0.12);
}

.paizhuo-proof div {
  min-height: 128px;
  padding: 22px;
}

.paizhuo-proof strong {
  display: block;
  color: var(--seat-primary-2);
  font-family: var(--font-display);
  font-size: clamp(42px, 5vw, 70px);
  line-height: 0.9;
}

.paizhuo-proof span {
  display: block;
  margin-top: 10px;
  color: var(--seat-muted);
  font-weight: 900;
}

.demo-section,
.screen-story,
.rules-section,
.paizhuo-cta {
  padding: 88px 0;
}

.demo-section {
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(420px, 1.12fr);
  gap: 30px;
  align-items: center;
}

.demo-copy h2,
.screen-copy h2,
.rules-section h2,
.paizhuo-cta h2 {
  margin-bottom: 22px;
  color: var(--seat-ink);
  font-size: clamp(42px, 5vw, 72px);
}

.demo-video-frame {
  overflow: hidden;
  border: 5px solid rgba(255, 255, 255, 0.86);
  border-radius: 38px;
  padding: 16px;
  background:
    radial-gradient(circle at 82% 18%, rgba(239, 95, 134, 0.16), transparent 12rem),
    rgba(255, 253, 246, 0.7);
  box-shadow: 0 26px 70px rgba(109, 70, 54, 0.18);
}

.demo-video-frame video {
  display: block;
  width: min(100%, 430px);
  max-height: 740px;
  margin: 0 auto;
  border-radius: 28px;
  background: #fff7e8;
}

.screen-story {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(360px, 0.64fr);
  gap: 38px;
  align-items: center;
}

.screen-story.reverse {
  grid-template-columns: minmax(360px, 0.64fr) minmax(0, 0.86fr);
}

.screen-story.reverse .screen-copy {
  order: 2;
}

.screen-capture {
  justify-self: center;
  width: min(430px, 100%);
  aspect-ratio: 430 / 932;
  border-radius: 40px;
}

.rules-section {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 34px;
  align-items: start;
}

.rules-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.rules-grid article {
  min-height: 230px;
  padding: 24px;
}

.rules-grid span {
  display: inline-flex;
  border-radius: 999px;
  padding: 6px 12px;
  color: #fff;
  background: linear-gradient(135deg, var(--seat-primary), var(--seat-lavender));
  font-family: var(--font-display);
  font-weight: 800;
}

.rules-grid h3 {
  margin: 22px 0 12px;
  color: var(--seat-ink);
  font-family: var(--font-display);
  font-size: 32px;
  line-height: 1;
}

.paizhuo-cta {
  display: grid;
  justify-items: center;
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

.paizhuo-cta .paizhuo-hero-actions {
  justify-content: center;
}

@media (max-width: 980px) {
  .paizhuo-hero,
  .demo-section,
  .screen-story,
  .screen-story.reverse,
  .rules-section {
    grid-template-columns: 1fr;
  }

  .paizhuo-stage {
    min-height: 640px;
  }

  .shot-seating {
    width: min(58vw, 370px);
    right: 11%;
  }

  .shot-review,
  .shot-export {
    width: min(39vw, 280px);
  }

  .screen-story.reverse .screen-copy {
    order: 0;
  }
}

@media (max-width: 720px) {
  .paizhuo-shell {
    width: calc(100% - 22px);
  }

  .paizhuo-hero {
    min-height: 0;
    padding-top: 52px;
  }

  .paizhuo-hero-copy h1 {
    font-size: clamp(44px, 14vw, 60px);
  }

  .paizhuo-tagline {
    font-size: clamp(28px, 9vw, 40px);
  }

  .paizhuo-stage {
    min-height: 530px;
  }

  .shot-seating {
    left: 50%;
    right: auto;
    width: min(82vw, 330px);
    transform: translateX(-50%) rotate(2deg);
  }

  .shot-review,
  .shot-export {
    display: none;
  }

  .paizhuo-proof,
  .rules-grid {
    grid-template-columns: 1fr;
  }

  .demo-section,
  .screen-story,
  .rules-section,
  .paizhuo-cta {
    padding: 62px 0;
  }
}