:root{box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);
--sky1:#06121f;--sky2:#123a5c;--sky3:#5fb6d9;--m1:#2b5d86;--m2:#1b4266;--m3:#0d2640;--snow:#eaf8ff;
--text:#f2fbff;--muted:#b7d4e6;--glass:rgba(255,255,255,.12);--glass-b:rgba(255,255,255,.35);--accent:#7fe6ff;--panel:rgba(8,26,44,.8);--scrim:rgba(3,12,24,.55)}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]){--sky1:#7cc4ea;--sky2:#b9e3f7;--sky3:#eaf8ff;--m1:#8fb9d6;--m2:#5f95bb;--m3:#3b6f97;--text:#0c2a40;--muted:#2c536f;--glass:rgba(255,255,255,.32);--glass-b:rgba(255,255,255,.8);--accent:#0a7ea8;--panel:rgba(255,255,255,.88);--scrim:rgba(255,255,255,.4)}}
:root[data-theme="dark"]{--sky1:#06121f;--sky2:#123a5c;--sky3:#5fb6d9;--text:#f2fbff;--panel:rgba(8,26,44,.8);--scrim:rgba(3,12,24,.55)}
html{scroll-padding-top:env(safe-area-inset-top,0px);scroll-behavior:smooth}
*{box-sizing:border-box}
body{margin:0;font-family:-apple-system,"SF Pro Display","Noto Sans Thai","Sarabun",system-ui,sans-serif;color:var(--text);background:linear-gradient(var(--sky1),var(--sky2) 55%,var(--sky3));background-attachment:fixed;min-height:100vh;line-height:1.6;-webkit-font-smoothing:antialiased}
.mtn{position:fixed;left:0;right:0;bottom:0;height:55vh;z-index:0;pointer-events:none}
.mtn svg{width:100%;height:100%;display:block}
main,footer{position:relative;z-index:1}
.glass{background:var(--glass);border:1px solid var(--glass-b);border-radius:28px;-webkit-backdrop-filter:blur(22px) saturate(180%);backdrop-filter:blur(22px) saturate(180%);box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 -1px 0 rgba(255,255,255,.08),0 12px 40px rgba(0,20,40,.28)}
.bar{position:sticky;top:calc(env(safe-area-inset-top,0px) + 12px);margin:12px auto 0;width:min(840px,calc(100% - 24px));z-index:10}
nav{display:flex;align-items:center;justify-content:space-between;padding:8px 10px 8px 20px;border-radius:999px}
nav b{font-weight:800;font-size:17px;display:flex;align-items:center;gap:10px}
.ico{width:34px;height:34px;border-radius:9px;display:block}
.hero-ico{width:112px;height:112px;border-radius:28px;display:block;margin:0 auto 22px;border:1px solid var(--glass-b);box-shadow:0 14px 40px rgba(0,20,40,.35)}
.cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.dc{display:inline-flex;align-items:center;gap:10px;padding:0 28px;min-height:66px;border-radius:999px;color:var(--text);text-decoration:none;font-weight:600;font-size:18px;transition:transform .15s}
.dc:active{transform:scale(.96)}
.links{display:flex;gap:4px}
.links a{color:var(--text);text-decoration:none;font-size:15px;padding:8px 14px;border-radius:999px;transition:background .2s}
.links a:hover,.links a:focus-visible{background:rgba(255,255,255,.22);outline:none}
.links a.join{background:var(--text);color:var(--sky1)}
.burger{display:none;width:44px;height:44px;border:0;background:rgba(255,255,255,.18);border-radius:50%;cursor:pointer;position:relative;color:var(--text)}
.burger span{position:absolute;left:12px;right:12px;height:2px;border-radius:2px;background:currentColor;transition:transform .25s,opacity .2s}
.burger span:nth-child(1){top:15px}.burger span:nth-child(2){top:21px}.burger span:nth-child(3){top:27px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.scrim{display:none}
.video{display:inline-flex;align-items:center;gap:10px;margin:0 0 20px;padding:14px 26px;border-radius:999px;font-weight:600;font-size:17px;color:var(--sky1);background:var(--text);text-decoration:none;transition:transform .15s}
.video:active{transform:scale(.96)}
.or{color:var(--muted);margin:0 0 20px}
.burger:focus-visible,a:focus-visible,.ip button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.hero{text-align:center;padding:14vh 20px 10vh;max-width:820px;margin:0 auto}
h1{font-size:clamp(44px,12vw,104px);line-height:1.1;margin:0 0 18px;font-weight:800;letter-spacing:-.03em}
.badge{display:inline-block;padding:8px 20px;border-radius:999px;font-size:15px;font-weight:600;margin-bottom:22px}
.hero p{font-size:clamp(16px,2.4vw,20px);color:var(--muted);max-width:520px;margin:0 auto 34px}
.ip{display:inline-flex;align-items:center;gap:14px;padding:10px 10px 10px 26px;border-radius:999px;font-size:20px;font-weight:600}
.ip button{font:inherit;font-size:15px;border:0;cursor:pointer;color:var(--sky1);background:var(--text);padding:12px 22px;border-radius:999px;transition:transform .15s}
.ip button:active{transform:scale(.95)}
.sec{max-width:1000px;margin:0 auto;padding:40px 20px}
h2{font-size:clamp(26px,4vw,38px);line-height:1.3;margin:0 0 20px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.card{padding:26px}
.card h3{margin:0 0 6px;font-size:20px}
.card p{margin:0;color:var(--muted);font-size:15px}
.steps{padding:12px 28px;margin:0}
.steps li{padding:16px 0;border-bottom:1px solid var(--glass-b);list-style:none}
.steps li:last-child{border:0}
.steps code{background:rgba(255,255,255,.2);padding:2px 9px;border-radius:8px;word-break:break-all}
footer{text-align:center;color:var(--muted);font-size:14px;padding:50px 20px 60vh}
@media (prefers-reduced-motion:no-preference){.hero{animation:rise .9s cubic-bezier(.2,.8,.2,1)}@keyframes rise{from{opacity:0;transform:translateY(24px)}}}
@media (max-width:640px){
.burger{display:block}
.links{display:flex;visibility:hidden;opacity:0;transform:translateY(-10px) scale(.96);transform-origin:top right;transition:opacity .28s,transform .4s cubic-bezier(.2,.9,.3,1.2),visibility 0s .4s;position:absolute;top:calc(100% + 10px);left:0;right:0;flex-direction:column;gap:2px;padding:10px;border-radius:28px;background:var(--panel);border:1px solid var(--glass-b);-webkit-backdrop-filter:blur(30px) saturate(180%);backdrop-filter:blur(30px) saturate(180%);box-shadow:0 16px 48px rgba(0,20,40,.4)}
.scrim{display:block;position:fixed;inset:0;z-index:9;background:transparent;visibility:hidden;-webkit-backdrop-filter:blur(0);backdrop-filter:blur(0);transition:background .4s,-webkit-backdrop-filter .4s,backdrop-filter .4s,visibility 0s .4s}
.scrim.open{visibility:visible;background:var(--scrim);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);transition-delay:0s}
.links.open{visibility:visible;opacity:1;transform:none;transition:opacity .28s,transform .4s cubic-bezier(.2,.9,.3,1.2),visibility 0s}
.links a{opacity:0;transform:translateY(-8px);transition:opacity .3s,transform .3s,background .2s}
.links.open a{opacity:1;transform:none}
.links.open a:nth-child(1){transition-delay:.07s}.links.open a:nth-child(2){transition-delay:.12s}.links.open a:nth-child(3){transition-delay:.17s}.links.open a:nth-child(4){transition-delay:.22s}
.links a{font-size:17px;padding:14px 18px;text-align:center}
.ip{font-size:17px;padding-left:20px}
.dc{min-height:60px}
@media (prefers-reduced-motion:reduce){.scrim,.links,.links a{transition:none!important}}
.sec{padding:28px 16px}
}

/* Login modal (mockup) */
.modal{position:fixed;inset:0;z-index:20;display:grid;place-items:center;padding:20px;visibility:hidden;background:transparent;-webkit-backdrop-filter:blur(0);backdrop-filter:blur(0);transition:background .4s,-webkit-backdrop-filter .4s,backdrop-filter .4s,visibility 0s .4s}
.modal.open{visibility:visible;background:var(--scrim);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);transition-delay:0s}
.panel{position:relative;width:min(400px,100%);padding:30px 26px 26px;text-align:center;background:var(--panel);opacity:0;transform:translateY(24px) scale(.94);transition:opacity .3s,transform .45s cubic-bezier(.2,.9,.3,1.2)}
.modal.open .panel{opacity:1;transform:none}
.ico.big{width:64px;height:64px;border-radius:16px;margin:0 auto 14px}
.panel h2{margin:0 0 18px;font-size:26px}
.x{position:absolute;top:14px;right:14px;width:40px;height:40px;border:0;border-radius:50%;background:rgba(255,255,255,.16);color:var(--text);font-size:24px;line-height:1;cursor:pointer}
.tabs{display:flex;gap:4px;padding:4px;border-radius:999px;background:rgba(255,255,255,.14);margin-bottom:18px}
.tabs button{flex:1;border:0;background:transparent;color:var(--text);font:inherit;font-size:15px;font-weight:600;padding:10px;border-radius:999px;cursor:pointer;transition:background .2s,color .2s}
.tabs button.on{background:var(--text);color:var(--sky1)}
.panel label{display:block;text-align:left;font-size:14px;color:var(--muted);margin-bottom:14px}
.panel input{display:block;width:100%;margin-top:6px;padding:14px 16px;font:inherit;font-size:16px;color:var(--text);background:rgba(255,255,255,.12);border:1px solid var(--glass-b);border-radius:16px}
.panel input::placeholder{color:var(--muted);opacity:.7}
.regonly{display:none!important}
.reg .regonly{display:block!important}
.go{width:100%;margin-top:4px;padding:15px;border:0;border-radius:999px;background:var(--text);color:var(--sky1);font:inherit;font-size:17px;font-weight:600;cursor:pointer;transition:transform .15s}
.go:active{transform:scale(.97)}
.note{margin:14px 0 0;font-size:13px;color:var(--muted)}
.note.err{color:#ff8a8a}
.panel input:focus-visible,.x:focus-visible,.tabs button:focus-visible,.go:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.modal,.panel{transition:none!important}}

.links.open a:nth-child(5){transition-delay:.27s}

.hide{display:none!important}
.panel input[type=checkbox]{display:inline-block;width:auto;margin:0 10px 0 0;accent-color:var(--accent);vertical-align:middle}
.panel label.tog{display:flex;align-items:center;color:var(--text);font-size:15px;margin-bottom:12px}
.bal{padding:16px;border-radius:20px;background:rgba(255,255,255,.12);border:1px solid var(--glass-b);margin-bottom:16px}
.bal span{display:block;font-size:13px;color:var(--muted)}
.bal b{font-size:32px;color:var(--accent)}
.who{margin:0 0 4px;font-size:18px;font-weight:800}
.mail{margin:0 0 16px;font-size:14px;color:var(--muted);word-break:break-all}
.hint{margin:0 0 14px;font-size:14px;color:var(--muted)}
#otp{text-align:center;font-size:28px;letter-spacing:.4em;font-weight:800}
.link{display:block;margin:12px auto 0;background:none;border:0;color:var(--accent);font:inherit;font-size:14px;cursor:pointer}
.out{background:rgba(255,255,255,.14);color:var(--text)}
.go:disabled{opacity:.6;cursor:wait}

.dc,.ip button,.video,.links a,.go,.tabs button,.x,.burger,.card,.badge,.steps,.bal,.link,.hero-ico{touch-action:manipulation;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;will-change:transform}
#pwCode{text-align:center;font-size:28px;letter-spacing:.4em;font-weight:800;margin-bottom:14px}