main { overflow-x: hidden; }

.hero {
  display: grid; grid-template-columns: 1fr; gap: var(--space-l); align-items: center;
  max-width: 1080px; margin: 0 auto; padding: var(--space-l) var(--space-m) 48px;
  background: radial-gradient(ellipse at 50% 30%, var(--color-primary-soft) 0, #fff 70%);
}
@media (min-width: 820px) {
  .hero { grid-template-columns: 1fr 1fr; padding-top: 56px; }
  .hero-text { order: -1; }
}
.eyebrow { font-family: var(--font-heading); color: var(--color-primary); font-weight: 500; margin-bottom: var(--space-s); }
.hero h1 { font-size: clamp(2rem, 6vw, 3.2rem); }
.hero h1 span { color: var(--color-primary); }
.lead { font-size: 1.08rem; color: #333; margin: var(--space-m) 0 var(--space-l); }
.btn-big { font-size: 1.15rem; padding: 16px 36px; border-radius: 14px; }
.price { margin-top: var(--space-m); color: var(--text-secondary); font-size: .92rem; }
.price strong { color: var(--color-primary); }

/* ไพ่ 3 ใบ + ตัวละคร */
.hero-art { position: relative; height: 340px; max-width: 420px; width: 100%; margin: 0 auto; }
.hcard {
  position: absolute; left: 50%; top: 20px; width: 150px; height: 243px; margin-left: -75px;
  border-radius: 16px; border: 1px solid #E6D6CA;
  background: url(/cards/back.svg) center / 100% 100% no-repeat, #fafaf8 url(/cards/marble.webp) center / cover;
  box-shadow: 0 10px 28px rgba(80, 50, 30, .18);
  transform-origin: 50% 120%;
}
.hcard.c1 { transform: rotate(-16deg) translateX(-30px); }
.hcard.c2 { transform: translateY(-10px); }
.hcard.c3 { transform: rotate(16deg) translateX(30px); }
.hero-char {
  position: absolute; left: 50%; bottom: -10px; width: 210px; margin-left: -105px;
  filter: drop-shadow(0 8px 14px rgba(120, 60, 20, .2));
  transition: transform .25s, opacity .25s;
}
.hero-char.swap { transform: scale(.85) translateY(10px); opacity: 0; }

.steps, .zodiac-strip, .cta { max-width: 1080px; margin: 0 auto; padding: 32px var(--space-m); text-align: center; }
.steps ol { list-style: none; padding: 0; margin: var(--space-l) 0 0; display: grid; gap: var(--space-m); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.steps li { text-align: left; position: relative; padding-top: 32px; }
.steps .n {
  position: absolute; top: -16px; left: var(--space-l); width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center; background: var(--color-primary); color: #fff;
  font-family: var(--font-heading); font-weight: 700;
}
.steps p { margin: 0; color: var(--text-secondary); }

.chars { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: var(--space-s); margin-top: var(--space-l); }
.chars figure { margin: 0; padding: var(--space-s); border-radius: var(--radius-card); background: var(--color-cream); }
.chars img { width: 100%; aspect-ratio: 1; object-fit: contain; display: block; }
.chars figcaption { font-family: var(--font-heading); font-weight: 500; font-size: .9rem; }

.cta { padding-bottom: 48px; }

@media (prefers-reduced-motion: reduce) { .hero-char { transition: none; } }