/* app.seamsi.com — shared styles (mobile first) */
:root{
  --bg:#140d1f; --bg2:#1d1430; --card:#251a3b; --line:rgba(255,215,140,.14);
  --gold:#e8c16a; --gold2:#f6dea0; --rose:#e98a8a; --text:#f6efe3; --muted:#bfb2c9;
  --cream:#fbf4e6; --ink:#3b2a22;
  --r:20px; --shadow:0 10px 40px rgba(0,0,0,.35);
  --display:"Charm","Sarabun",serif; --body:"Sarabun","Noto Sans Thai",system-ui,sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:var(--body);background:var(--bg);color:var(--text);line-height:1.6;min-height:100dvh;overflow-x:hidden;
  background-image:radial-gradient(1200px 600px at 50% -200px,rgba(232,193,106,.18),transparent 60%),
  radial-gradient(800px 500px at 100% 40%,rgba(233,138,138,.08),transparent 60%);background-attachment:fixed}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
.wrap{width:100%;max-width:1080px;margin:0 auto;padding:0 18px}
.stars{position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.55;
  background-image:radial-gradient(1.5px 1.5px at 20% 30%,#fff8,transparent),radial-gradient(1px 1px at 70% 20%,#fff6,transparent),
  radial-gradient(1.2px 1.2px at 40% 80%,#fff5,transparent),radial-gradient(1px 1px at 85% 65%,#fff7,transparent),
  radial-gradient(1.3px 1.3px at 10% 70%,#fff5,transparent),radial-gradient(1px 1px at 55% 50%,#fff4,transparent);background-size:400px 400px}
main,header,footer{position:relative;z-index:1}

/* header */
.top{position:sticky;top:0;z-index:20;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);background:rgba(20,13,31,.72);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;height:58px}
.logo{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:.3px}
.logo svg{width:30px;height:30px}
.logo b{font-family:var(--display);font-size:22px;color:var(--gold2);font-weight:700}
.logo small{font-size:12px;color:var(--muted);font-weight:400}
.pill{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:999px;border:1px solid var(--line);font-size:14px;color:var(--gold2)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:0 24px;border-radius:999px;font-weight:700;font-size:16px;transition:transform .15s,box-shadow .2s}
.btn:active{transform:scale(.97)}
.btn-gold{background:linear-gradient(135deg,#f6dea0,#e0a94a);color:#3a2410;box-shadow:0 8px 28px rgba(232,193,106,.35)}
.btn-ghost{border:1px solid var(--line);color:var(--gold2);background:rgba(255,255,255,.03)}
.btn svg{width:20px;height:20px}

/* section titles */
.eyebrow{font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.h-display{font-family:var(--display);font-weight:700;line-height:1.25}
.sec{padding-block:48px}
.sec h2{font-family:var(--display);font-size:30px;color:var(--gold2);margin:6px 0 6px}
.sec p.lead{color:var(--muted);max-width:560px}

/* footer */
.foot{border-top:1px solid var(--line);padding:32px 0 44px;color:var(--muted);font-size:14px;margin-top:24px}
.foot .wrap{display:grid;gap:14px}
.foot .note{font-size:12.5px;opacity:.85}
.foot a{color:var(--gold2)}

/* utilities */
.fade-up{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
.fade-up.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.fade-up{opacity:1;transform:none}}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}