@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:#071a63;
  --bg2:#0a2380;
  --royal:#0a3fc9;
  --ink:#ffffff;
  --muted:#cfe6ff;
  --aqua:#27d3ff;
  --pink:#ff3d8b;
  --sun:#ffd62e;
  --sun2:#ffe985;
  --deep:#050f3a;
  --card:rgba(255,255,255,.1);
  --stroke:rgba(130,225,255,.45);
  --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:#06185c;
  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,#fff08a 0%,#ffd62e 45%,#ffa51f 100%);
  box-shadow:0 0 0 2px #fff,0 0 0 4px rgba(255,61,139,.85),0 10px 30px rgba(255,61,139,.45);
  animation:breathe 2.4s ease-in-out infinite;
}
.btn:hover,.btn:focus-visible{filter:brightness(1.05);outline:3px solid #fff;outline-offset:4px}
.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,.75) 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 2px #fff,0 0 0 4px rgba(255,61,139,.85),0 10px 30px rgba(255,61,139,.4)}
  50%{transform:scale(1.04);box-shadow:0 0 0 2px #fff,0 0 0 6px rgba(255,61,139,.95),0 12px 40px rgba(255,61,139,.62)}
}
@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}

/* ===================== stage system ===================== */
.stage{position:relative;overflow:hidden;background:#0a3fc9;isolation:isolate}
.stage .bg,.stage .bg img{position:absolute;inset:0;width:100%;height:100%;display:block}
.stage .bg img{object-fit:cover}
.layer{position:absolute;z-index:3;line-height:0}
.layer picture,.layer img{display:block;width:100%;height:auto}
.hero-art .mark{position:absolute}

/* sun rays */
.rays{position:absolute;inset:-10% -10% 20% -10%;z-index:1;pointer-events:none;mix-blend-mode:screen;opacity:.5;
  background:repeating-conic-gradient(from 188deg at 78% -6%,rgba(255,244,170,0) 0deg 5deg,rgba(255,244,170,.2) 6.5deg 8deg,rgba(255,244,170,0) 9.5deg 14deg);
  -webkit-mask-image:radial-gradient(ellipse 70% 85% at 78% 0%,#000 20%,transparent 75%);mask-image:radial-gradient(ellipse 70% 85% at 78% 0%,#000 20%,transparent 75%);
  animation:raybreath 6s ease-in-out infinite}
@keyframes raybreath{0%,100%{opacity:.35}50%{opacity:.7}}

/* floating + swaying */
.fly{animation:bob 5.2s ease-in-out infinite}
.fly.f2{animation-duration:6.4s;animation-delay:-1.6s}
.fly.f3{animation-duration:4.6s;animation-delay:-.8s}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.4%)}}
.sway{transform-origin:50% 0;animation:sway 6s ease-in-out infinite}
@keyframes sway{0%,100%{transform:rotate(-.5deg) translateX(-.4%)}50%{transform:rotate(.5deg) translateX(.4%)}}

.floorshadow{position:absolute;z-index:2;aspect-ratio:12/1;border-radius:50%;pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(5,20,100,.5),rgba(5,20,100,0) 70%);filter:blur(2px)}

/* ---------- slot machine with decorative reels ---------- */
.machine{position:relative;container-type:inline-size;line-height:0}
.machine .reels{position:absolute;inset:0;pointer-events:none}
.reel{position:absolute;top:37.13%;height:30.24%;overflow:hidden;border-radius:2.4cqw;
  background:linear-gradient(90deg,#03071f,#0a1450 50%,#03071f);
  box-shadow:inset 0 .6cqw 1.4cqw rgba(0,0,0,.7),inset 0 -.6cqw 1.4cqw rgba(0,0,0,.6)}
.reel.r1{left:23.54%;width:15.9%}
.reel.r2{left:41.86%;width:16.16%}
.reel.r3{left:60.43%;width:15.9%}
.reel::before,.reel::after{content:"";position:absolute;left:0;right:0;height:22%;z-index:2;pointer-events:none}
.reel::before{top:0;background:linear-gradient(180deg,rgba(0,0,0,.72),transparent)}
.reel::after{bottom:0;background:linear-gradient(0deg,rgba(0,0,0,.72),transparent)}
.machine .strip{display:flex;flex-direction:column;height:400%;animation:reelspin 18s linear infinite}
.machine .s2{animation-duration:23.5s;animation-delay:-7.4s}
.machine .s3{animation-duration:29s;animation-delay:-13.2s}
.machine .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:#ffd62e;font-size:11cqw;text-shadow:0 0 1.6cqw rgba(255,61,139,.9),0 .5cqw 0 #ff3d8b}
.sym.bar{color:#fff;font-size:4.2cqw;letter-spacing:.08em;text-shadow:0 0 1.2cqw rgba(39,211,255,.9)}
.sym.gem::before{content:"";width:38%;aspect-ratio:1;background:linear-gradient(135deg,#ffb0d2,#ff3d8b 55%,#9a0f56);transform:rotate(45deg);border-radius:3px;box-shadow:0 0 10px rgba(255,61,139,.7)}
.sym.coin::before{content:"";width:42%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff3c4,#ffd62e 45%,#b97a00);box-shadow:0 0 8px rgba(255,214,46,.7)}
.sym.drop::before{content:"";width:30%;aspect-ratio:1;border-radius:50% 0 50% 50%;transform:rotate(-45deg);background:radial-gradient(circle at 60% 60%,#e6fbff 0 12%,#6fe3ff 35%,#0b8fe6 80%);box-shadow:0 0 9px rgba(39,211,255,.8)}
.sym.flower::before{content:"";width:52%;aspect-ratio:1;background:url(frangi-w.png) center/contain no-repeat;background-image:image-set(url(frangi-w.webp) type("image/webp"),url(frangi-w.png) type("image/png"))}
.bulbglow{position:absolute;left:14%;right:14%;top:5%;height:12%;pointer-events:none;
  background:radial-gradient(ellipse at 50% 60%,rgba(255,240,140,.6),rgba(255,240,140,0) 70%);
  mix-blend-mode:screen;animation:bulbpulse 1.6s ease-in-out infinite}
@keyframes bulbpulse{0%,100%{opacity:.3}50%{opacity:1}}

/* ---------- falling coins / drops / petals (decorative) ---------- */
.rain{position:absolute;inset:0;z-index:4;pointer-events:none;overflow:hidden}
.cn{position:absolute;top:-8%;width:calc(var(--s) * clamp(14px,1.7vw,28px));aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fff6c8 0 18%,#ffd62e 40%,#c98a00 75%,#8a5a00);
  box-shadow:inset 0 0 0 .14em #fff0a0,inset 0 0 0 .26em #d9a000,0 0 10px rgba(255,214,46,.6);
  animation:coinfall var(--d) linear var(--dl) infinite}
@keyframes coinfall{
  0%{transform:translate(0,0) scaleX(1);opacity:0}
  6%{opacity:1}
  25%{transform:translate(calc(var(--dx) * .25),30vh) scaleX(.15)}
  50%{transform:translate(calc(var(--dx) * .5),62vh) scaleX(1)}
  75%{transform:translate(calc(var(--dx) * .75),94vh) scaleX(.2)}
  100%{transform:translate(var(--dx),125vh) scaleX(1);opacity:1}
}
.dp{position:absolute;top:-6%;width:calc(var(--s) * clamp(8px,1vw,15px));aspect-ratio:1;animation:dropfall var(--d) linear var(--dl) infinite}
.dp::before{content:"";position:absolute;inset:0;border-radius:50% 0 50% 50%;transform:rotate(-45deg);
  background:radial-gradient(circle at 60% 62%,#fff 0 12%,#b5f1ff 34%,#2cc0ff 78%);box-shadow:0 0 6px rgba(255,255,255,.7)}
@keyframes dropfall{0%{transform:translate(0,0);opacity:0}8%{opacity:.95}100%{transform:translate(var(--dx),110vh);opacity:.9}}
.pt{position:absolute;top:-8%;width:calc(var(--s) * clamp(18px,2vw,32px));aspect-ratio:1;background-size:contain;background-repeat:no-repeat;
  animation:petalfall var(--d) linear var(--dl) infinite}
.pt.w{background-image:url(frangi-w.png);background-image:image-set(url(frangi-w.webp) type("image/webp"),url(frangi-w.png) type("image/png"))}
.pt.y{background-image:url(frangi-y.png);background-image:image-set(url(frangi-y.webp) type("image/webp"),url(frangi-y.png) type("image/png"))}
@keyframes petalfall{
  0%{transform:translate(0,0) rotate(0);opacity:0}
  8%{opacity:1}
  30%{transform:translate(var(--dx),32vh) rotate(110deg)}
  60%{transform:translate(calc(var(--dx) * -.6),66vh) rotate(230deg)}
  100%{transform:translate(calc(var(--dx) * .8),115vh) rotate(380deg);opacity:1}
}
.stage .rain{height:100%}

/* water jet from the mascot's squirt gun + splash geysers (decorative arcs) */
.p-mascot,.c-mascot,.p-bucket,.g-bucket{container-type:inline-size}
.jet{position:absolute;left:96%;top:44%;width:0;height:0;pointer-events:none;z-index:3}
.jet.l{left:4%;transform:scaleX(-1)}
.jd{position:absolute;left:0;top:0;width:calc(var(--s) * 3.4cqw);aspect-ratio:1;border-radius:50%;opacity:0;
  background:radial-gradient(circle at 35% 30%,#fff 0 14%,#b9f3ff 38%,#27c0ff 80%);box-shadow:0 0 .8cqw rgba(255,255,255,.8);
  animation:jetflow var(--d) ease-out var(--dl) infinite}
@keyframes jetflow{
  0%{transform:translate(0,0) scale(.5);opacity:0}
  12%{opacity:1}
  55%{transform:translate(calc(var(--x) * .6cqw),calc(var(--y) * .3cqw + 2cqw)) scale(1);opacity:1}
  100%{transform:translate(calc(var(--x) * 1cqw),calc(var(--y) * .6cqw + 18cqw)) scale(.8);opacity:0}
}
.geyser{position:absolute;left:48%;top:38%;width:0;height:0;pointer-events:none;z-index:3}
.gd,.gc{position:absolute;left:0;top:0;opacity:0;animation:spurt var(--d) linear var(--dl) infinite}
.gd{width:calc(var(--s) * 4cqw);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff 0 14%,#b9f3ff 38%,#27c0ff 80%)}
.gc{width:calc(var(--s) * 7cqw);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff6c8 0 18%,#ffd62e 40%,#c98a00 75%);box-shadow:inset 0 0 0 .6cqw #ffe680,0 0 1.4cqw rgba(255,214,46,.8)}
@keyframes spurt{
  0%{transform:translate(0,0) scale(.5);opacity:0;animation-timing-function:cubic-bezier(.15,.75,.4,1)}
  10%{opacity:1}
  50%{transform:translate(calc(var(--x) * .5cqw),calc(var(--h) * -1cqw)) scale(1);animation-timing-function:cubic-bezier(.6,0,.85,.4)}
  100%{transform:translate(calc(var(--x) * 1cqw),calc(var(--h) * -.1cqw + 24cqw)) scale(.8);opacity:0}
}
.gc{animation-name:spurtc}
@keyframes spurtc{
  0%{transform:translate(0,0) scale(.5);opacity:0;animation-timing-function:cubic-bezier(.15,.75,.4,1)}
  10%{opacity:1}
  30%{transform:translate(calc(var(--x) * .3cqw),calc(var(--h) * -.8cqw)) scaleX(.2)}
  50%{transform:translate(calc(var(--x) * .5cqw),calc(var(--h) * -1cqw)) scaleX(1);animation-timing-function:cubic-bezier(.6,0,.85,.4)}
  75%{transform:translate(calc(var(--x) * .75cqw),calc(var(--h) * -.5cqw)) scaleX(.25)}
  100%{transform:translate(calc(var(--x) * 1cqw),calc(var(--h) * -.1cqw + 24cqw)) scaleX(1);opacity:0}
}
/* ground ripples */
.rip{position:absolute;z-index:2;aspect-ratio:5/1;border-radius:50%;border:2px solid rgba(255,255,255,.75);pointer-events:none;opacity:0;animation:ripple 3.2s ease-out infinite}
.rip.rp2{animation-delay:-1.1s}.rip.rp3{animation-delay:-2.1s}
@keyframes ripple{0%{transform:scale(.25);opacity:.9}100%{transform:scale(1.15);opacity:0}}

/* sparkles */
.sparks{position:absolute;inset:0;z-index:5;pointer-events:none}
.sp{position:absolute;width:calc(var(--s) * clamp(14px,1.6vw,26px));aspect-ratio:1;background:#fffbe0;
  clip-path:polygon(50% 0,59% 41%,100% 50%,59% 59%,50% 100%,41% 59%,0 50%,41% 41%);
  filter:drop-shadow(0 0 6px rgba(255,255,255,.95));animation:twinkle 2.8s ease-in-out var(--dl) infinite}
@keyframes twinkle{0%,100%{transform:scale(.2) rotate(0);opacity:0}45%{transform:scale(1) rotate(45deg);opacity:1}70%{transform:scale(.5) rotate(70deg);opacity:.5}}

/* ---------- marquee sign ---------- */
.sign{position:relative;height:clamp(52px,5.6vw,82px);overflow:hidden;
  background:linear-gradient(180deg,#d81b6d,#ff3d8b 48%,#c4125f);border-block:3px solid #ffe14a;
  box-shadow:0 0 28px rgba(255,61,139,.5),inset 0 0 22px rgba(120,0,60,.35)}
.sign .bulbs{position:absolute;left:0;right:0;height:10px;background:
  radial-gradient(circle,#fffbd0 0 28%,#ffd62e 30% 46%,rgba(255,214,46,0) 52%) 0 0/26px 10px repeat-x}
.sign .b-top{top:3px;animation:chase 1s steps(1) infinite}
.sign .b-bot{bottom:3px;animation:chase 1s steps(1) infinite reverse}
@keyframes chase{0%{background-position:0 0;opacity:1}50%{background-position:13px 0;opacity:.55}100%{background-position:26px 0;opacity:1}}
.sign .track{position:absolute;left:0;top:0;bottom:0;margin:0;padding:0;list-style:none;display:flex;align-items:center;gap:clamp(34px,5vw,80px);
  width:max-content;padding-inline:clamp(17px,2.5vw,40px);animation:ticker 40s linear infinite}
.sign li{display:flex;align-items:center;justify-content:center;width:clamp(28px,3.6vw,52px);height:clamp(28px,3.6vw,52px);font-size:clamp(22px,2.9vw,40px)}
.sign .sym{flex:none;width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-family:"Kanit",sans-serif;font-weight:700;line-height:1}
.sign .sym.seven{color:#ffe14a;font-size:1em;text-shadow:0 0 12px rgba(255,255,255,.7),0 2px 0 #a40e52}
.sign .sym.bar{color:#fff;font-size:.46em;letter-spacing:.05em;text-shadow:0 0 10px rgba(39,211,255,.9),0 1px 0 #a40e52}
.sign .sym.gem::before{background:linear-gradient(135deg,#e8fbff,#27d3ff 55%,#0a78c8);box-shadow:0 0 10px rgba(255,255,255,.8)}
.sign .star{width:100%;height:100%;background:#fffbd0;clip-path:polygon(50% 0,61% 38%,100% 38%,68% 60%,80% 100%,50% 75%,20% 100%,32% 60%,0 38%,39% 38%);filter:drop-shadow(0 0 8px rgba(255,255,255,.9))}
@keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* bulb frame around the gift stage */
.bframe{position:absolute;inset:6px;z-index:6;pointer-events:none;border:2px solid rgba(255,230,90,.85);border-radius:14px;box-shadow:0 0 18px rgba(255,255,255,.35) inset}
.bframe .bulbs{position:absolute;background:radial-gradient(circle,#fffbd0 0 26%,#ffd62e 30% 46%,rgba(255,214,46,0) 52%)}
.bframe .h{left:8px;right:8px;height:10px;background-size:22px 10px;background-repeat:repeat-x;animation:chase 1.1s steps(1) infinite}
.bframe .v{top:8px;bottom:8px;width:10px;background-size:10px 22px;background-repeat:repeat-y;animation:chase 1.1s steps(1) infinite reverse}
.bframe .t{top:3px}.bframe .b{bottom:3px}.bframe .l{left:3px}.bframe .r{right:3px}

/* ---------- hero text zone ---------- */
.hero{position:relative}
.hero-art .mark{z-index:7}
.hero-art::before{content:"";position:absolute;left:0;right:0;bottom:0;height:22%;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,63,201,0),rgba(10,63,201,.95))}
.hero-copy{padding:1.1rem 1.25rem 1.6rem;max-width:40rem;background:linear-gradient(180deg,#0a3fc9,#0a2a9c 70%,var(--bg2))}
.hero-copy h1{font-size:clamp(1.7rem,7.2vw,2.35rem);margin:0 0 .45rem;text-shadow:0 3px 0 #0a2a9c,0 6px 22px rgba(4,16,90,.7)}
.hero-copy h1 .amt{color:var(--sun);text-shadow:0 3px 0 #d6286f,0 0 22px rgba(255,214,46,.55);white-space:nowrap}
.hero-copy h1 .kick{display:inline-block;margin-bottom:.15em;padding:.06em .8em .02em;border-radius:999px;font-size:.5em;line-height:1.7;font-weight:700;color:#fff;
  background:linear-gradient(90deg,#ff3d8b,#ff7a45);box-shadow:0 0 0 2px rgba(255,255,255,.85),0 4px 14px rgba(255,61,139,.45);text-shadow:none}
.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,16,90,.7)}
.hero-copy .btn{margin-top:.2rem}
@media (min-width:900px){
  .hero-copy{position:absolute;left:5%;top:47%;transform:translateY(-50%);width:41%;max-width:none;padding:0;z-index:6;background:none}
  .hero-copy h1{font-size:clamp(2.1rem,3.2vw,3.25rem);text-shadow:0 3px 0 #0a2a9c,0 8px 30px rgba(4,16,90,.8)}
  .sub{font-size:1.15rem;color:#e6f3ff}
  .mark{top:22px;left:24px;width:44px;height:44px}
  .hero-art::before{height:14%;background:linear-gradient(180deg,rgba(8,30,120,0),rgba(8,30,120,.55))}
  .hero-art::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(90deg,rgba(6,24,110,.62),rgba(6,24,110,.32) 30%,rgba(6,24,110,0) 50%)}
}

/* ---------- gifts ---------- */
.gifts{display:grid;gap:0;background:linear-gradient(180deg,var(--bg2),#0a2f9c)}
.gifts-copy{padding:1.5rem 1.25rem 2rem}
.gifts-copy h2{font-size:clamp(1.45rem,5vw,2rem);text-shadow:0 2px 0 #0a2a9c}
.gifts-copy p{margin:0 0 1.15rem;color:var(--muted);font-size:1.05rem;line-height:1.55;padding-top:.1em}
.gstage{aspect-ratio:4/3.1}
.gbg{position:absolute;inset:0;z-index:0;background:#0a3fc9 url(hero-wide-bg.jpg) 70% 62%/210% auto no-repeat;background-image:image-set(url(hero-wide-bg.webp) type("image/webp"),url(hero-wide-bg.jpg) type("image/jpeg"))}
.g-garland{left:-3%;top:-3%;width:106%}
.g-mA{left:4%;top:28%;width:27%}
.g-mB{left:27%;top:12%;width:34%}
.g-hippo{left:61%;top:36%;width:37%}
.g-bucket{left:1%;top:60%;width:22%;z-index:4}
.g-coins{left:30%;top:62%;width:32%;z-index:4}
.g-mA .machine,.g-mB .machine{filter:drop-shadow(0 12px 14px rgba(5,20,100,.5))}
@media (min-width:900px){
  .gifts{grid-template-columns:.85fr 1.15fr;align-items:center}
  .gifts-copy{padding:2.5rem 2rem 2.5rem 8%}
  .gifts-art{order:1}
}

/* ---------- steps / faq ---------- */
.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;text-shadow:0 2px 0 #0a2a9c}
.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:18px;padding:1.05rem 1.1rem 1.15rem;box-shadow:0 8px 24px rgba(0,0,0,.18)}
.step .num{display:inline-flex;align-items:center;justify-content:center;width:2.1rem;height:2.1rem;border-radius:50%;background:linear-gradient(180deg,#ff7aae,#ff3d8b);color:#fff;font-family:"Kanit",sans-serif;font-weight:700;margin-bottom:.4rem;box-shadow:0 0 0 2px #ffe14a}
.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:18px;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;color:var(--sun2)}
.qa p{margin:0;color:var(--muted);font-size:1rem;line-height:1.55;padding-top:.08em}

/* ---------- close ---------- */
.close{position:relative;background:var(--deep);text-align:center}
.cstage{aspect-ratio:1170/760}
.cbg{position:absolute;inset:0;z-index:0;background:#0a3fc9 url(hero-wide-bg.jpg) 30% 62%/cover no-repeat;background-image:image-set(url(hero-wide-bg.webp) type("image/webp"),url(hero-wide-bg.jpg) type("image/jpeg"))}
.cstage::after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;background:linear-gradient(180deg,rgba(5,15,58,0) 40%,rgba(5,15,58,.92))}
@media (min-width:900px){.cstage::after{background:radial-gradient(ellipse 32% 36% at 50% 82%,rgba(5,15,58,.88),rgba(5,15,58,0) 72%),linear-gradient(180deg,rgba(5,15,58,0) 50%,rgba(5,15,58,.75))}}
.c-garland{left:-3%;top:-4%;width:106%;opacity:.95}
.c-mA{left:4%;top:20%;width:35%}
.c-mascot{left:56%;top:32%;width:34%}
.c-coins{left:30%;top:64%;width:34%;z-index:4}
.c-mA .machine{filter:drop-shadow(0 12px 14px rgba(5,20,100,.5))}
.close-copy{padding:1.6rem 1.25rem 2rem}
.close-copy h2{font-size:clamp(1.6rem,6vw,2.4rem);text-shadow:0 3px 0 #0a2a9c,0 4px 24px rgba(4,16,90,.9)}
.close-copy p{margin:0 auto 1.15rem;color:#e6f3ff;max-width:34rem;font-size:1.05rem;line-height:1.55;text-shadow:0 2px 14px rgba(4,16,90,.95)}
@media (min-width:900px){
  .cstage{aspect-ratio:2160/860}
  .c-mA{left:9%;top:15%;width:20%}
  .c-mascot{left:67%;top:31%;width:18%}
  .c-coins{left:30%;top:66%;width:15%}
  .close-copy{position:absolute;left:0;right:0;bottom:6%;padding:0 2rem;z-index:5}
}

.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:var(--deep)}
.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(7,26,99,0),rgba(7,26,99,.9) 28%,rgba(7,26,99,.97));pointer-events:none}
  .dock .btn{width:100%;pointer-events:auto;min-height:3.4rem}
}

/* ---------- reduced motion: everything stops ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
  .rain,.jet,.geyser,.rip{display:none}
  .sp{opacity:.85;transform:scale(.7)}
  .rise{opacity:1}
  .machine .s1{transform:translateY(-8%)}
  .machine .s2{transform:translateY(-28%)}
  .machine .s3{transform:translateY(-46%)}
  .sign .track{transform:none}
}
html.force-motion .btn,html.force-motion .btn::after,html.force-motion .rise,html.force-motion .strip,html.force-motion .cn,html.force-motion .dp,html.force-motion .pt,html.force-motion .jd,html.force-motion .gd,html.force-motion .gc,html.force-motion .rip,html.force-motion .sp,html.force-motion .fly,html.force-motion .sway,html.force-motion .track{animation-play-state:running !important}
html.force-motion .rise{opacity:1}

/* ---- layout: tall (mobile) ---- */
.hero-art{aspect-ratio:3/4}
.hero-art .p-garland{left:-4%;top:-1%;width:108%}
.hero-art .p-cab{left:41%;top:30%;width:44%}
.hero-art .p-coins{left:35%;top:70%;width:48%;z-index:4}
.hero-art .p-mascot{left:1%;top:44%;width:44%;z-index:5}
.hero-art .p-bucket{left:70%;top:58%;width:29%;z-index:5}
.hero-art .sh-mascot{left:0%;top:80%;width:48%}
.hero-art .sh-cab{left:40%;top:70%;width:48%}
.hero-art .sh-bucket{left:68%;top:82%;width:32%}
.hero-art .rp1{left:2%;top:80%;width:44%}
.hero-art .rp2{left:30%;top:88%;width:50%}
.hero-art .rp3{left:60%;top:82%;width:38%}
@media (min-width:900px){
.hero-art{aspect-ratio:16/9}
.hero-art .p-garland{left:-2%;top:-2%;width:104%}
.hero-art .p-cab{left:58.5%;top:22%;width:24.5%}
.hero-art .p-coins{left:54.5%;top:66%;width:28.5%}
.hero-art .p-mascot{left:34.5%;top:41%;width:22.5%}
.hero-art .p-bucket{left:82%;top:42%;width:17%}
.hero-art .sh-mascot{left:33%;top:88%;width:26%}
.hero-art .sh-cab{left:56%;top:84%;width:29%}
.hero-art .sh-bucket{left:80%;top:84%;width:20%}
.hero-art .rp1{left:33%;top:86%;width:26%}
.hero-art .rp2{left:54%;top:90%;width:31%}
.hero-art .rp3{left:79%;top:86%;width:20%}
}