html { scroll-behavior: smooth; }
body { font-family: 'Anuphan', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
.font-display { font-family: 'IBM Plex Sans Thai', 'Anuphan', sans-serif; }
::selection { background: #D4AF37; color: #2c0e4c; }
.hero-grid {
  background-image: radial-gradient(rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size: 22px 22px;
}
.hero-glow {
  background: radial-gradient(circle at 78% 18%, rgba(212,175,55,0.16), transparent 42%),
              radial-gradient(circle at 12% 88%, rgba(122,77,173,0.4), transparent 46%);
}
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }
.ph { /* placeholder image */
  background-color: #ece4f5;
  background-image: linear-gradient(135deg, rgba(65,23,109,0.08) 25%, transparent 25%, transparent 50%, rgba(65,23,109,0.08) 50%, rgba(65,23,109,0.08) 75%, transparent 75%, transparent);
  background-size: 18px 18px;
}
.marquee { animation: marquee 32s linear infinite; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }
.hl-gold {
  background-image: linear-gradient(transparent 62%, rgba(212,175,55,.85) 62%, rgba(212,175,55,.85) 92%, transparent 92%);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  padding: 0 .06em;
}
details[open] .faq-icon { transform: rotate(45deg); }
.brand-gold {
  background: linear-gradient(180deg, #F7E9A8 0%, #E8C969 38%, #C9A227 62%, #9A7B1A 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  letter-spacing: .02em;
}
.lav { background: linear-gradient(120deg, #efe7f8 0%, #f8f4fc 46%, #ece2f6 100%); }
.lav::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(116deg, rgba(255,255,255,0) 0 70px, rgba(255,255,255,.45) 70px 74px, rgba(255,255,255,0) 74px 150px);
}
/* ── Hero entrance + ambient animations ── */
@keyframes heroUp { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
.hero-enter > * { opacity: 0; animation: heroUp .75s cubic-bezier(.2,.7,.2,1) forwards; }
.hero-enter > *:nth-child(1) { animation-delay: .10s; }
.hero-enter > *:nth-child(2) { animation-delay: .22s; }
.hero-enter > *:nth-child(3) { animation-delay: .34s; }
.hero-enter > *:nth-child(4) { animation-delay: .46s; }
.hero-enter > *:nth-child(5) { animation-delay: .58s; }

@keyframes cardIn { from { opacity: 0; transform: translateY(22px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
.hero-card-anim { animation: cardIn .8s cubic-bezier(.2,.7,.2,1) .35s both, floaty 6.5s ease-in-out 1.2s infinite; }

@keyframes orbPulse { 0%, 100% { opacity: .55; transform: scale(1); } 50% { opacity: 1; transform: scale(1.15); } }
.orb-pulse { animation: orbPulse 8s ease-in-out infinite; }

/* logo shine sweep (แสงวิ้งวิ่งผ่านโลโก้) */
.logo-shine { position: relative; display: inline-block; overflow: hidden; border-radius: 9999px; }
.logo-shine::after {
  content: ""; position: absolute; top: -15%; left: -80%; width: 55%; height: 130%;
  background: linear-gradient(115deg, transparent 0%, rgba(255,255,255,.75) 50%, transparent 100%);
  transform: skewX(-18deg); pointer-events: none;
  animation: logoSweep 4.2s ease-in-out 1s infinite;
}
@keyframes logoSweep { 0% { left: -80%; } 20%, 100% { left: 150%; } }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity:1; transform:none; transition:none; }
  .marquee { animation: none; }
  .hero-enter > *, .hero-card-anim, .orb-pulse { animation: none !important; opacity: 1 !important; transform: none !important; }
  .logo-shine::after { animation: none !important; display: none; }
}