@font-face{font-family:"Kanit";src:url("kanit-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Kanit";src:url("kanit-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Noto Sans Thai";src:url("noto-sans-thai-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Noto Sans Thai";src:url("noto-sans-thai-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

:root{
  --bg:#07120e;
  --bg2:#0c1c16;
  --ink:#fbf6e8;
  --muted:#d9c79a;
  --gold:#e8c36a;
  --gold2:#f6e2a2;
  --ruby:#c81e3a;
  --emerald:#1f6b4a;
  --deep:#04110c;
  --card:rgba(6,22,18,.78);
  --stroke:rgba(232,195,106,.32);
  --safe-dock:calc(4.75rem + env(safe-area-inset-bottom,0px));
}
*{box-sizing:border-box}
html{color-scheme:dark;background:var(--bg)}
html,body{margin:0;padding:0;max-width:100%;overflow-x:hidden}
body{
  font-family:"Noto Sans Thai","Kanit",system-ui,sans-serif;
  background:var(--bg);
  color:var(--ink);
  line-height:1.55;
  word-break:keep-all;
  overflow-wrap:normal;
  line-break:strict;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%;height:auto;display:block}
a{color:inherit}
.skip{position:absolute;left:-999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip:focus{left:12px;top:12px;width:auto;height:auto;padding:.5rem 1rem;background:#fff;color:#000;z-index:80;border-radius:8px}

h1,h2,h3,p,li,dt,dd{overflow:visible}
h1,h2{
  font-family:"Kanit","Noto Sans Thai",sans-serif;
  font-weight:700;
  letter-spacing:0;
  line-height:1.45;
  padding-top:.18em;
  margin:0 0 .55em;
  text-wrap:balance;
}
.lock{white-space:nowrap}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.55rem;
  min-height:3.35rem;
  padding:.8rem 1.55rem .8rem;
  padding-top:.9rem;
  border:0;
  border-radius:999px;
  color:#fffdf8;
  font-family:"Kanit","Noto Sans Thai",sans-serif;
  font-weight:700;
  font-size:1.125rem;
  line-height:1.5;
  text-decoration:none;
  white-space:nowrap;
  cursor:pointer;
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:linear-gradient(100deg,#f3d78a 0%,#e0b24a 42%,#c81e3a 100%);
  box-shadow:0 0 0 1px rgba(255,236,180,.28),0 8px 28px rgba(200,30,58,.38);
  animation:breathe 2.4s ease-in-out infinite;
}
.btn:hover,.btn:focus-visible{
  filter:brightness(1.06);
  outline:2px solid #f6e2a2;
  outline-offset:3px;
}
.btn .ic{width:1.25rem;height:1.25rem;flex:0 0 auto}
.btn::after{
  content:"";
  position:absolute;
  inset:-20%;
  background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.5) 50%,transparent 58%);
  transform:translateX(-120%);
  animation:sweep 2.8s ease-in-out infinite;
  pointer-events:none;
  z-index:1;
}
.btn > *{position:relative;z-index:2}

@keyframes breathe{
  0%,100%{transform:scale(1);box-shadow:0 0 0 1px rgba(255,236,180,.28),0 8px 28px rgba(200,30,58,.32)}
  50%{transform:scale(1.035);box-shadow:0 0 0 1px rgba(255,236,180,.5),0 10px 36px rgba(200,30,58,.5)}
}
@keyframes sweep{
  0%,55%{transform:translateX(-120%)}
  80%,100%{transform:translateX(120%)}
}
@keyframes rise{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes reelspin{
  from{transform:translateY(0)}
  to{transform:translateY(-50%)}
}
.rise{animation:rise .7s ease both}
.d1{animation-delay:.08s}
.d2{animation-delay:.18s}
.d3{animation-delay:.3s}

@media (prefers-reduced-motion:reduce){
  .btn,.btn::after,.rise{animation:none}
  .btn{transform:none}
  .strip{animation:none !important}
  .s1{transform:translateY(-8%)}
  .s2{transform:translateY(-28%)}
  .s3{transform:translateY(-46%)}
}

.hero{position:relative;background:var(--bg);color:var(--ink)}
.hero-art{position:relative}
.hero-art img{width:100%;height:auto;display:block}
.mark{
  position:absolute;top:max(12px,env(safe-area-inset-top,0px));left:14px;z-index:3;
  width:36px;height:36px;border-radius:10px;overflow:hidden;
  box-shadow:0 4px 16px rgba(0,0,0,.35);
}
.mark img{width:100%;height:100%;object-fit:cover}

/* Decorative 3-reel strips — aligned to the cabinet windows in the hero art.
   Continuous scroll, never a result line. Chrome lives in the photograph. */
.reels{
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;
  transform:none;
}
.machine{
  position:absolute;
  inset:0;
  display:block;
  background:none;
  box-shadow:none;
  padding:0;
  gap:0;
  border-radius:0;
}
.reel{
  position:absolute;
  overflow:hidden;
  border-radius:3px;
  background:transparent;
  box-shadow:inset 0 10px 14px rgba(0,0,0,.35),inset 0 -10px 14px rgba(0,0,0,.3);
  width:auto;
  height:auto;
}
.reel::before,.reel::after{
  content:"";
  position:absolute;left:0;right:0;height:14%;z-index:2;pointer-events:none;
}
.reel::before{top:0;background:linear-gradient(180deg,rgba(0,0,0,.5),transparent)}
.reel::after{bottom:0;background:linear-gradient(0deg,rgba(0,0,0,.5),transparent)}
.strip{display:flex;flex-direction:column;height:400%;animation:reelspin 18s linear infinite}
.s2{animation-duration:23.5s;animation-delay:-7.4s}
.s3{animation-duration:29s;animation-delay:-13.2s}
.sym{
  flex:0 0 calc(100% / 12);
  height:calc(100% / 12);
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:"Kanit",sans-serif;
  font-weight:700;
  line-height:1;
}
.sym.seven{color:#f4d36a;font-size:clamp(1.1rem,2.8vw,2rem);text-shadow:0 0 10px rgba(244,211,106,.7)}
.sym.bar{color:#f6e2a2;font-size:clamp(.55rem,1.4vw,.8rem);letter-spacing:.06em}
.sym.gem::before{content:"";width:38%;aspect-ratio:1;background:linear-gradient(135deg,#7ef0c0,#1f6b4a 55%,#0a2a1c);transform:rotate(45deg);border-radius:3px;box-shadow:0 0 10px rgba(80,220,160,.55)}
.sym.coin::before{content:"";width:42%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff3c4,#e0b24a 45%,#8a6a1a);box-shadow:0 0 8px rgba(224,178,74,.55)}
.sym.cherry::before{content:"";width:22%;aspect-ratio:1;border-radius:50%;background:#c81e3a;box-shadow:10px 2px 0 #c81e3a, 4px -8px 0 -5px #3a7a28}
.sym.bell::before{content:"";width:32%;height:28%;background:#f0c55a;border-radius:10px 10px 3px 3px;box-shadow:0 10px 0 -5px #e8c36a}

/* tall / mobile hero windows */
.reel.r1{left:36.584%;top:49.766%;width:7.773%;height:21.2%}
.reel.r2{left:45.629%;top:49.766%;width:8.056%;height:21.2%}
.reel.r3{left:55.099%;top:49.766%;width:8.339%;height:21.2%}

.hero-copy{padding:1.15rem 1.25rem 1.6rem;max-width:40rem}
.hero-copy h1{
  font-size:clamp(1.7rem,7.2vw,2.35rem);
  margin:0 0 .45rem;
  text-shadow:0 6px 28px rgba(4,17,12,.7);
}
.hero-copy h1 .amt{
  color:#f6e2a2;
  text-shadow:0 0 18px rgba(232,195,106,.45);
  white-space:nowrap;
}
.sub{
  margin:0 0 1.15rem;
  color:var(--muted);
  font-size:1.05rem;
  line-height:1.55;
  padding-top:.1em;
  text-shadow:0 2px 12px rgba(4,17,12,.55);
}
@media (min-width:900px){
  .reel.r1{left:58.832%;top:47.007%;width:4.291%;height:27.739%}
  .reel.r2{left:63.825%;top:47.007%;width:4.447%;height:27.739%}
  .reel.r3{left:69.052%;top:47.007%;width:4.603%;height:27.739%}
  .hero-copy{
    position:absolute;
    left:5%;
    top:46%;
    transform:translateY(-50%);
    width:40%;
    max-width:none;
    padding:0;
    z-index:2;
  }
  .hero-copy h1{font-size:clamp(2.1rem,3.2vw,3.25rem);text-shadow:0 8px 32px rgba(4,17,12,.75)}
  .sub{font-size:1.15rem}
  .mark{top:22px;left:24px;width:44px;height:44px}
}
@media (min-width:1280px){
  .hero-copy{left:5%;width:40%}
}

.gifts{
  display:grid;
  gap:0;
  background:linear-gradient(180deg,#0c1c16,var(--bg2));
}
.gifts-art img{width:100%;height:auto}
.gifts-copy{padding:1.5rem 1.25rem 2rem}
.gifts-copy h2{font-size:clamp(1.45rem,5vw,2rem)}
.gifts-copy p{margin:0 0 1.15rem;color:var(--muted);font-size:1.05rem;line-height:1.55;padding-top:.1em}
@media (min-width:900px){
  .gifts{grid-template-columns:.85fr 1.15fr;align-items:center}
  .gifts-copy{padding:2.5rem 2rem 2.5rem 8%;order:0}
  .gifts-art{order:1}
}

.steps{padding:2.2rem 1.25rem 1.5rem;background:var(--bg)}
.steps h2,.faq h2{text-align:center;font-size:clamp(1.45rem,5vw,2rem);margin-bottom:1.2rem}
.step-list{
  list-style:none;
  margin:0 auto;
  padding:0;
  display:grid;
  gap:1rem;
  max-width:980px;
}
.step{
  background:var(--card);
  border:1px solid var(--stroke);
  border-radius:16px;
  padding:1.05rem 1.1rem 1.15rem;
}
.step .num{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:2rem;height:2rem;
  border-radius:50%;
  background:linear-gradient(180deg,#f3d78a,#c81e3a);
  color:#fffdf8;
  font-family:"Kanit",sans-serif;
  font-weight:700;
  margin-bottom:.4rem;
}
.step h3{font-family:"Kanit","Noto Sans Thai",sans-serif;font-weight:700;font-size:1.12rem;margin:0 0 .25rem;padding-top:.12em;line-height:1.5}
.step p{margin:0;color:var(--muted);font-size:1rem;line-height:1.55;padding-top:.08em}
@media (min-width:900px){
  .step-list{grid-template-columns:repeat(3,1fr);gap:1.15rem;padding:0 2rem}
}

.faq{padding:1.2rem 1.25rem 2rem;background:var(--bg2)}
.qa{
  max-width:720px;
  margin:0 auto 1rem;
  background:var(--card);
  border:1px solid var(--stroke);
  border-radius:16px;
  padding:1rem 1.15rem 1.1rem;
}
.qa h3{font-family:"Kanit","Noto Sans Thai",sans-serif;font-weight:700;font-size:1.08rem;margin:0 0 .3rem;padding-top:.12em;line-height:1.5}
.qa p{margin:0;color:var(--muted);font-size:1rem;line-height:1.55;padding-top:.08em}

.close{position:relative;background:var(--deep);text-align:center}
.close-art img{width:100%;height:auto;display:block}
.close-copy{padding:1.6rem 1.25rem 2rem}
.close-copy h2{font-size:clamp(1.6rem,6vw,2.4rem);text-shadow:0 4px 28px rgba(4,17,12,.9),0 0 24px rgba(4,17,12,.7)}
.close-copy p{margin:0 auto 1.15rem;color:#f6e2a2;max-width:34rem;font-size:1.05rem;line-height:1.55;text-shadow:0 2px 18px rgba(4,17,12,.95)}
@media (min-width:900px){
  .close-copy{
    position:absolute;left:0;right:0;bottom:9%;
    padding:0 2rem;
    z-index:2;
  }
}

.foot{
  padding:1.4rem 1.25rem calc(1.4rem + var(--safe-dock));
  text-align:center;
  color:var(--muted);
  font-size:.92rem;
  line-height:1.55;
  background:#04110c;
}
.foot p{margin:0 0 .4rem;padding-top:.12em}
@media (min-width:900px){
  .foot{padding:1.8rem 2rem 2rem}
}

.dock{display:none}
@media (max-width:899px){
  .hero-copy{padding-bottom:calc(1.15rem + var(--safe-dock))}
  html{scroll-padding-bottom:var(--safe-dock)}
  .dock{
    display:block;
    position:fixed;
    left:0;right:0;bottom:0;
    z-index:60;
    padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px));
    background:linear-gradient(180deg,rgba(4,17,12,0),rgba(4,17,12,.92) 28%,rgba(4,17,12,.96));
    pointer-events:none;
  }
  .dock .btn{width:100%;pointer-events:auto;min-height:3.4rem}
}

html.force-motion .btn,html.force-motion .btn::after,html.force-motion .rise,html.force-motion .strip{animation-play-state:running !important}
html.force-motion .rise{opacity:1}