@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:#07011a;
  --bg2:#12062c;
  --ink:#f6f3ff;
  --muted:#c9c0e6;
  --cyan:#2ef0e0;
  --cyan2:#9bfff6;
  --mag:#d24bff;
  --gold:#ffe27a;
  --line:#06c755;
  --card:rgba(18,8,46,.72);
  --stroke:rgba(155,255,246,.28);
  --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}

/* typography: extra top padding so Thai tone marks are not clipped */
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;
  border:0;
  border-radius:999px;
  color:#06131a;
  font-family:"Kanit","Noto Sans Thai",sans-serif;
  font-weight:700;
  font-size:1.125rem;
  line-height:1.5;
  padding-top:.9rem;
  text-decoration:none;
  white-space:nowrap;
  cursor:pointer;
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:linear-gradient(100deg,#7dfff2 0%,#5ce8ff 42%,#d4b8ff 100%);
  box-shadow:0 0 0 1px rgba(255,255,255,.28),0 8px 32px rgba(46,240,224,.32),0 0 24px rgba(210,75,255,.18);
  animation:breathe 2.4s ease-in-out infinite;
}
.btn:hover,.btn:focus-visible{
  filter:brightness(1.06);
  outline:2px solid var(--cyan);
  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,255,255,.28),0 8px 28px rgba(46,240,224,.28),0 0 18px rgba(210,75,255,.16)}
  50%{transform:scale(1.035);box-shadow:0 0 0 1px rgba(255,255,255,.4),0 10px 36px rgba(46,240,224,.48),0 0 28px rgba(210,75,255,.32)}
}
@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)}
}
.rise{animation:rise .7s ease both}
.d1{animation-delay:.08s}
.d2{animation-delay:.18s}
.d3{animation-delay:.3s}
.d4{animation-delay:.42s}

@media (prefers-reduced-motion:reduce){
  .btn,.btn::after,.rise{animation:none}
  .btn{transform:none}
}

/* HERO */
.hero{position:relative;background:#07011a;color:var(--ink)}
.hero-art{position:relative}
.hero-art img{width:100%;height:auto;display:block;vertical-align:middle}
.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 0 16px rgba(46,240,224,.35);
}
.mark img{width:100%;height:100%;object-fit:cover}
.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 8px 32px rgba(7,1,26,.55);
}
.hero-copy h1 .amt{
  color:var(--gold);
  text-shadow:0 0 18px rgba(46,240,224,.45),0 0 28px rgba(210,75,255,.35);
  white-space:nowrap;
}
.sub{
  margin:0 0 1.15rem;
  color:var(--muted);
  font-size:1.05rem;
  line-height:1.55;
  padding-top:.1em;
}
@media (min-width:900px){
  .hero-copy{
    position:absolute;
    left:5%;
    top:50%;
    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)}
  .sub{font-size:1.15rem}
  .mark{top:22px;left:24px;width:44px;height:44px}
}

/* GIFTS */
.gifts{
  display:grid;
  gap:0;
  background:linear-gradient(180deg,#0a0420,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:1.15fr .85fr;align-items:center}
  .gifts-copy{padding:2.5rem 4rem 2.5rem 2rem}
}

/* STEPS */
.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:1100px;
}
.step{
  background:var(--card);
  border:1px solid var(--stroke);
  border-radius:1.15rem;
  padding:1.15rem 1.15rem 1.25rem;
  box-shadow:0 0 0 1px rgba(210,75,255,.08),0 12px 40px rgba(0,0,0,.25);
}
.num{
  display:inline-flex;align-items:center;justify-content:center;
  width:2.15rem;height:2.15rem;border-radius:50%;
  font-family:"Kanit",sans-serif;font-weight:700;font-size:1.05rem;
  color:#06131a;
  background:linear-gradient(135deg,var(--cyan),#c9b6ff);
  margin-bottom:.55rem;
  box-shadow:0 0 16px rgba(46,240,224,.35);
}
.step h3{
  font-family:"Kanit","Noto Sans Thai",sans-serif;
  font-weight:700;
  font-size:1.15rem;
  line-height:1.5;
  padding-top:.12em;
  margin:0 0 .3rem;
}
.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.25rem}
  .steps{padding:3rem 2rem 2rem}
}

/* FAQ */
.faq{padding:1.2rem 1.25rem 2.2rem;background:var(--bg);max-width:860px;margin:0 auto}
.qa{border-top:1px solid rgba(155,255,246,.16);padding:1rem 0}
.qa:last-child{border-bottom:1px solid rgba(155,255,246,.16)}
.qa h3{
  font-family:"Kanit","Noto Sans Thai",sans-serif;
  font-size:1.08rem;
  font-weight:700;
  line-height:1.5;
  padding-top:.12em;
  margin:0 0 .35rem;
}
.qa p{margin:0;color:var(--muted);font-size:1rem;line-height:1.55;padding-top:.08em}

/* CLOSE */
.close{position:relative;background:#07011a;text-align:center;color:var(--ink)}
.close-art img{width:100%;height:auto}
.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(7,1,26,.9),0 0 24px rgba(7,1,26,.7)}
.close-copy p{margin:0 auto 1.15rem;color:#ece8ff;max-width:34rem;font-size:1.05rem;line-height:1.55;text-shadow:0 2px 18px rgba(7,1,26,.95),0 0 10px rgba(7,1,26,.8)}
@media (min-width:900px){
  .close-copy{
    position:absolute;left:0;right:0;bottom:10%;
    padding:0 2rem;
    z-index:2;
  }
}

/* FOOTER */
.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:#050014;
}
.foot p{margin:0 0 .4rem;padding-top:.12em}
@media (min-width:900px){
  .foot{padding:1.8rem 2rem 2rem}
}

/* MOBILE DOCK */
.dock{
  display:none;
}
@media (max-width:899px){
  .hero-copy{padding-bottom:calc(1.15rem + var(--safe-dock))}
  html{scroll-padding-bottom:var(--safe-dock)}
}
@media (max-width:899px){
  .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,1,26,0),rgba(7,1,26,.92) 28%,rgba(7,1,26,.96));
    pointer-events:none;
  }
  .dock .btn{width:100%;pointer-events:auto;min-height:3.4rem}
  /* body space is provided by footer padding-bottom: var(--safe-dock) so the bar never covers copy */
}

@media (min-width:1280px){
  .hero-copy{left:5%;width:40%}
}

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