:root{--bg0:#0a111e;--bg1:#101a2c;--panel:#162134cc;--panel2:#1f2e48a6;--line:#f2b64047;--line2:#96bef024;--gold:#f2b640;--gold2:#ffd76a;--teal:#5af0ff;--text:#eef5ff;--text2:#b9cbe4;--muted:#8296b6;--good:#72e39a;--bad:#ff8080;--font:"Mitr", "Noto Sans Thai", system-ui, sans-serif;--head:"Kanit", "Mitr", sans-serif;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:72px}body{font-family:var(--font);color:var(--text);background:radial-gradient(1000px 600px at 85% 30%, #5af0ff0f, transparent 60%), radial-gradient(900px 600px at 0% 70%, #9b6bff14, transparent 60%), linear-gradient(180deg, var(--bg1), var(--bg0));margin:0;font-size:16px;font-weight:300;line-height:1.6;overflow-x:hidden}a{color:var(--gold2);text-decoration:none}h1,h2,h3{font-family:var(--head);margin:0;font-weight:600;line-height:1.2}b{font-weight:500}.btn{height:46px;font-family:var(--head);cursor:pointer;border:0;border-radius:14px;justify-content:center;align-items:center;gap:9px;padding:0 22px;font-size:16px;font-weight:600;transition:transform .15s,filter .15s,box-shadow .15s;display:inline-flex}.btn:hover{filter:brightness(1.07);transform:translateY(-2px)}.btn.gold{color:#3a2406;background:linear-gradient(180deg, #ffe596, var(--gold));box-shadow:0 4px #a8722a,0 0 30px #f2b64059}.btn.gold:hover{color:#2a1803}.btn.ghost{color:#fff;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#ffffff1a;border:1px solid #ffffff47}.btn.xl{border-radius:18px;height:58px;padding:0 32px;font-size:19px}.btn.sm{border-radius:12px;height:40px;padding:0 16px;font-size:15px;box-shadow:0 3px #a8722a}.pill{color:var(--text2);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#080e1a8c;border:1px solid #ffffff29;border-radius:999px;align-items:center;gap:7px;padding:5px 13px;font-size:13.5px;display:inline-flex}.dot{background:#8a98b0;border-radius:50%;width:9px;height:9px;display:inline-block}.dot.on{background:var(--good);animation:2s infinite pulse;box-shadow:0 0 0 4px #72e39a38}.dot.off{background:var(--bad)}@keyframes pulse{50%{box-shadow:0 0 0 7px #72e39a0d}}.nav{z-index:20;border-bottom:1px solid #0000;align-items:center;gap:18px;height:64px;padding:0 clamp(16px,4vw,48px);transition:background .2s,border-color .2s;display:flex;position:fixed;inset:0 0 auto}.nav.solid{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-color:var(--line);background:#0a111edb}.brand{font-family:"Fredoka", var(--head);letter-spacing:.5px;background:linear-gradient(180deg, #fff6d8, var(--gold) 70%);-webkit-text-fill-color:transparent;filter:drop-shadow(0 2px #78460acc);-webkit-background-clip:text;background-clip:text;font-size:26px;font-weight:700}.links{gap:4px;margin-left:auto;display:flex}.links a{color:var(--text2);border-radius:10px;padding:8px 12px;font-size:15px}.links a:hover{color:#fff;background:#ffffff12}.lang-switch{border:1px solid var(--line2);background:#ffffff0d;border-radius:10px;display:inline-flex;overflow:hidden}.lang-switch button{font:inherit;color:var(--text2);cursor:pointer;background:0 0;border:0;padding:6px 10px;font-size:13px;font-weight:500}.lang-switch button.on{background:var(--gold);color:#3a2406}.hero{text-align:center;justify-content:center;align-items:center;min-height:100svh;padding:96px 20px 80px;display:flex;position:relative;overflow:hidden}.hero-bg{background:var(--bg,linear-gradient(135deg, #24406a, #101a2c)) center / cover no-repeat;animation:40s ease-in-out infinite alternate drift;position:absolute;inset:-4%}.hero:after{content:"";background:radial-gradient(ellipse at 50% 45%, #080e1a33, #080e1abf 75%), linear-gradient(180deg, #080e1a59, #080e1a1a 30%, var(--bg0) 100%);position:absolute;inset:0}@keyframes drift{0%{transform:scale(1.04)translate(-1%)}to{transform:scale(1.12)translate(1.5%,-1.5%)}}.hero-in{z-index:1;max-width:860px;position:relative}.kicker{font-family:var(--head);letter-spacing:2px;text-transform:uppercase;color:var(--teal);background:#080e1a73;border:1px solid #5af0ff59;border-radius:999px;padding:4px 14px;font-size:14px;display:inline-block}.logo{font-family:"Fredoka", var(--head);letter-spacing:2px;background:linear-gradient(180deg, #fffbe9 10%, var(--gold2) 55%, #e2952a);-webkit-text-fill-color:transparent;filter:drop-shadow(0 6px #7a4810)drop-shadow(0 14px 30px #0009);-webkit-background-clip:text;background-clip:text;margin:14px 0 6px;font-size:clamp(64px,13vw,150px);font-weight:700;line-height:1}.title{font-family:var(--head);text-shadow:0 3px 12px #000000b3;margin:0 0 10px;font-size:clamp(22px,3.4vw,32px);font-weight:600}.tag{color:#e4eeff;text-shadow:0 2px 10px #000c;max-width:640px;margin:0 auto 26px;font-size:clamp(15px,2vw,18px)}.cta{flex-wrap:wrap;justify-content:center;gap:12px;display:flex}.pills,.meta{flex-wrap:wrap;justify-content:center;gap:8px;margin-top:18px;display:flex}.meta{margin-top:10px}.scroll{z-index:1;color:var(--text2);animation:2s ease-in-out infinite bob;position:absolute;bottom:20px;left:50%;transform:translate(-50%)}@keyframes bob{50%{transform:translate(-50%,6px)}}main{position:relative}.block{max-width:1180px;margin:0 auto;padding:72px clamp(16px,4vw,40px) 10px}.block h2{text-align:center;font-size:clamp(26px,4vw,38px)}.block h2:after{content:"";background:var(--teal);width:14px;height:14px;box-shadow:0 0 14px var(--teal);margin:14px auto 0;display:block;transform:rotate(45deg)}.lead{text-align:center;color:var(--text2);max-width:680px;margin:14px auto 32px}.more{text-align:center;margin-top:22px}.more a{font-family:var(--head);font-size:16px}.reveal{opacity:0;transition:opacity .6s,transform .6s;transform:translateY(18px)}.reveal.in{opacity:1;transform:none}.feats{grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px;display:grid}.feat{background:var(--panel);border:1px solid var(--line2);border-radius:20px;padding:22px;transition:border-color .2s,transform .2s;box-shadow:inset 0 1px #ffffff0d}.feat:hover{border-color:var(--line);transform:translateY(-3px)}.fi{width:72px;height:72px;color:var(--gold2);border:1px solid var(--line);background:radial-gradient(circle at 30% 25%,#ffd76a38,#1e2c44f2);border-radius:20px;place-items:center;margin-bottom:14px;display:grid;overflow:hidden}.fi img{object-fit:contain;width:86%;height:86%}.feat h3{margin-bottom:6px;font-size:20px}.feat p{color:var(--text2);margin:0;font-size:15px}.emblem{--s:56px;width:var(--s);height:var(--s);background:radial-gradient(circle, color-mix(in srgb, var(--c) 28%, transparent), transparent 68%);border-radius:50%;flex:none;place-items:center;display:inline-grid;position:relative}.emblem .rune{background:var(--c);-webkit-mask:var(--m) center / contain no-repeat;-webkit-mask:var(--m) center / contain no-repeat;mask:var(--m) center / contain no-repeat;filter:drop-shadow(0 0 6px var(--c));position:absolute;inset:14%}.emblem .ring{background:var(--gold);-webkit-mask:var(--m) center / contain no-repeat;-webkit-mask:var(--m) center / contain no-repeat;mask:var(--m) center / contain no-repeat;position:absolute;inset:-6%}.emblem b{font-family:var(--head);color:var(--c);font-size:calc(var(--s) * .45)}.jcards{grid-template-columns:repeat(auto-fill,minmax(205px,1fr));gap:14px;display:grid}.jcard{color:var(--text);background:var(--panel);border:1px solid color-mix(in srgb, var(--c) 35%, transparent);border-radius:22px;flex-direction:column;transition:transform .2s,box-shadow .2s;display:flex;overflow:hidden}.jcard:hover{box-shadow:0 16px 40px #00000059, 0 0 0 1px var(--c);color:var(--text);transform:translateY(-5px)}.jart{background:radial-gradient(ellipse 60% 22% at 50% 88%, color-mix(in srgb, var(--c) 40%, transparent), transparent), radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--c) 18%, #1d2b44), #121c2e);place-items:center;height:200px;display:grid}.jart img{filter:drop-shadow(0 8px 12px #00000080);max-width:90%;max-height:180px}.jbody{padding:14px 16px 16px}.jhead{align-items:center;gap:6px;display:flex}.jhead b{font-family:var(--head);font-size:20px}.jbody small{color:var(--c);font-size:13px}.jbody p{color:var(--text2);margin:6px 0 10px;font-size:14px}.kids{flex-wrap:wrap;gap:5px;display:flex}.kids span{border:1px solid var(--line2);color:var(--text2);background:#ffffff12;border-radius:999px;padding:1px 9px;font-size:12px}.mcards{grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px;display:grid}.mcard{color:#fff;border:1px solid var(--line2);background:linear-gradient(180deg, transparent 35%, #080e1ae6), var(--bg,linear-gradient(135deg, #24406a, #101a2c)) center / cover;border-radius:22px;flex-direction:column;justify-content:flex-end;min-height:200px;padding:18px;transition:transform .2s,border-color .2s;display:flex;position:relative;overflow:hidden}.mcard:hover{border-color:var(--line);color:#fff;transform:translateY(-4px)}.mcard b{font-family:var(--head);text-shadow:0 2px 10px #000c;font-size:24px}.mcard .lv{color:var(--gold2);border:1px solid var(--line);background:#080e1ab3;border-radius:999px;align-self:flex-start;margin-bottom:6px;padding:2px 10px;font-size:13px}.faces{scroll-snap-type:x mandatory;scrollbar-width:thin;gap:12px;padding:6px 4px 14px;display:flex;overflow-x:auto}.face{scroll-snap-align:start;text-align:center;background:var(--panel);border:1px solid var(--line2);width:150px;color:var(--text);border-radius:20px;flex:none;padding:12px 10px;transition:transform .2s}.face:hover{color:var(--text);transform:translateY(-4px)}.face img{object-fit:contain;filter:drop-shadow(0 6px 8px #00000073);width:110px;height:110px;margin:0 auto 6px;display:block}.face span{font-family:var(--head);font-size:15px;display:block}.face small{color:var(--muted)}.ncards{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px;display:grid}.ncard{background:var(--panel);border:1px solid var(--line2);color:var(--text);border-radius:20px;padding:18px 20px;transition:border-color .2s}.ncard:hover{border-color:var(--line);color:var(--text)}.nh{align-items:center;gap:8px;display:flex}.ver{font-family:var(--head);color:var(--teal);font-weight:600}.new{font-family:var(--head);background:var(--gold);color:#3a2406;border-radius:999px;padding:1px 8px;font-size:11px;font-weight:600}.date{color:var(--muted);margin-left:auto;font-size:13px}.ncard h3{margin:8px 0;font-size:19px}.ncard ul{color:var(--text2);margin:0;padding-left:18px;font-size:14px}.steps{counter-reset:s;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin:28px 0 0;padding:0;list-style:none;display:grid}.steps li{background:var(--panel);border:1px solid var(--line2);border-radius:20px;padding:22px 20px 18px;position:relative}.sn{width:40px;height:40px;font-family:var(--head);color:#3a2406;background:linear-gradient(180deg, #ffe596, var(--gold));border-radius:50%;place-items:center;margin-bottom:10px;font-size:18px;font-weight:700;display:grid}.steps b{font-family:var(--head);font-size:19px}.steps p{color:var(--text2);margin:4px 0 0;font-size:15px}.install{text-align:center;color:var(--muted);margin-top:20px;font-size:14px}.install p{max-width:560px;margin:10px auto 0}.band{text-align:center;border:1px solid var(--line);background:linear-gradient(180deg, #080e1a99, #080e1ad9), var(--bg,linear-gradient(135deg, #24406a, #101a2c)) center 70% / cover;border-radius:28px;max-width:1180px;margin:80px auto 0;padding:64px 20px;position:relative;overflow:hidden}.band h2{font-size:clamp(26px,4vw,40px)}.band p{color:var(--text2);margin:10px 0 24px}.foot{max-width:1180px;color:var(--muted);flex-wrap:wrap;align-items:center;gap:18px 28px;margin:0 auto;padding:48px clamp(16px,4vw,40px) 36px;font-size:14px;display:flex}.foot .fl{flex:1;min-width:260px}.foot .fl p{margin:6px 0 0}.foot nav{flex-wrap:wrap;gap:6px 18px;display:flex}.foot nav a{color:var(--text2)}.foot nav a:hover{color:var(--gold2)}@media (width<=860px){.links{display:none}#lang{margin-left:auto}}@media (width<=520px){.nav{gap:10px}.brand{font-size:22px}.nav .btn.sm span{display:none}.nav .btn.sm{padding:0 12px}.btn.xl{width:100%;height:52px;padding:0 24px;font-size:17px}.cta{flex-direction:column;align-items:stretch}.feats,.mcards,.ncards{grid-template-columns:1fr}.jcards{grid-template-columns:repeat(2,1fr);gap:10px}.jart{height:150px}.jart img{max-height:135px}.jbody p{display:none}.block{padding-top:56px}}@media (prefers-reduced-motion:reduce){.hero-bg,.scroll,.dot.on{animation:none}html{scroll-behavior:auto}}.logo img{width:min(560px,82vw);margin:0 auto;display:block}.logo{-webkit-text-fill-color:initial;filter:drop-shadow(0 10px 24px #0000008c);background:0 0;margin:10px 0 4px}.brand img{width:auto;height:46px;display:block}.brand{-webkit-text-fill-color:initial;filter:none;background:0 0}.foot .brand img{height:56px}.hero .logo{margin-bottom:-36px}.hero .hero-bg{transition:translate .2s linear}.hero .rays{z-index:0;pointer-events:none;mix-blend-mode:screen;opacity:.7;background:repeating-conic-gradient(from 200deg at 50% -10%, #ffe29629 0 4deg, transparent 4deg 13deg);animation:26s ease-in-out infinite alternate rays7;position:absolute;inset:-20% -10% 30%;-webkit-mask:radial-gradient(70% 80% at 50% 0,#000 20%,#0000 75%);mask:radial-gradient(70% 80% at 50% 0,#000 20%,#0000 75%)}@keyframes rays7{0%{opacity:.4;transform:rotate(-4deg)}to{opacity:.65;transform:rotate(4deg)}}.hero canvas.fx{z-index:1;pointer-events:none;width:100%;height:100%;position:absolute;inset:0}.hero .mist{z-index:1;pointer-events:none;opacity:.5;filter:blur(18px);background:radial-gradient(40% 60% at 20% 70%,#bedcff59,#0000 70%),radial-gradient(45% 55% at 75% 80%,#c8ffeb47,#0000 70%);height:34%;animation:18s ease-in-out infinite alternate mist7;position:absolute;bottom:-6%;left:-10%;right:-10%}@keyframes mist7{0%{transform:translate(-4%)}to{transform:translate(4%)}}.hero:after{z-index:1}.hero-in{z-index:2}.logo .lg-wrap{animation:1.4s cubic-bezier(.2,.8,.2,1.2) both logoIn,6s ease-in-out 1.4s infinite float7;display:inline-block;position:relative}@keyframes logoIn{0%{opacity:0;filter:blur(6px);transform:scale(.82)translateY(18px)}to{opacity:1;filter:none;transform:none}}@keyframes float7{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.logo .lg-glow{z-index:-1;filter:blur(24px);background:radial-gradient(#ffd66e8c,#5af0ff2e 45%,#0000 70%);border-radius:50%;animation:3.6s ease-in-out infinite glow7;position:absolute;inset:12% 10% 22%}@keyframes glow7{0%,to{opacity:.55;transform:scale(.96)}50%{opacity:1;transform:scale(1.06)}}.logo .lg-shine{pointer-events:none;-webkit-mask:var(--m) center / 100% 100% no-repeat;-webkit-mask:var(--m) center / 100% 100% no-repeat;mask:var(--m) center / 100% 100% no-repeat;mix-blend-mode:overlay;background:linear-gradient(105deg,#0000 38%,#ffffffd9 48%,#fffad2f2 50%,#0000 60%) 160% 0/250% 100% no-repeat;animation:5.5s ease-in-out 1.6s infinite shine7;position:absolute;inset:0}@keyframes shine7{0%,55%{background-position:160% 0}85%,to{background-position:-60% 0}}.logo .spk{z-index:2;pointer-events:none;opacity:0;-webkit-mask:conic-gradient(from 45deg, #000 0 4deg, transparent 4deg 86deg, #000 86deg 94deg, transparent 94deg 176deg, #000 176deg 184deg, transparent 184deg 266deg, #000 266deg 274deg, transparent 274deg), radial-gradient(circle, #000 0 22%, transparent 24%);-webkit-mask:conic-gradient(from 45deg, #000 0 4deg, transparent 4deg 86deg, #000 86deg 94deg, transparent 94deg 176deg, #000 176deg 184deg, transparent 184deg 266deg, #000 266deg 274deg, transparent 274deg), radial-gradient(circle, #000 0 22%, transparent 24%);mask:conic-gradient(from 45deg, #000 0 4deg, transparent 4deg 86deg, #000 86deg 94deg, transparent 94deg 176deg, #000 176deg 184deg, transparent 184deg 266deg, #000 266deg 274deg, transparent 274deg), radial-gradient(circle, #000 0 22%, transparent 24%);background:radial-gradient(circle,#fff 0 12%,#ffecaae6 18%,#0000 60%);animation:3s ease-in-out infinite spk7;position:absolute}@keyframes spk7{0%,to{opacity:0;transform:scale(.3)rotate(0)}45%{opacity:1;transform:scale(1)rotate(40deg)}60%{opacity:.8}}@media (prefers-reduced-motion:reduce){.hero .rays,.hero .mist{animation:none}.logo .lg-wrap{animation:.8s ease-out both logoIn}}.logo .lg-ring{aspect-ratio:1;z-index:-1;pointer-events:none;width:92%;-webkit-mask:var(--m) center / contain no-repeat;-webkit-mask:var(--m) center / contain no-repeat;mask:var(--m) center / contain no-repeat;opacity:.42;filter:drop-shadow(0 0 10px #ffd66ee6)blur(.3px);background:radial-gradient(circle,#fff3c4,#f2b640 55%,#ffd76a);animation:60s linear infinite ring7;position:absolute;top:46%;left:50%;translate:-50% -50%}.logo .lg-ring.r2{opacity:.3;filter:drop-shadow(0 0 10px #5af0ffe6);background:radial-gradient(circle,#c8fbff,#5af0ff 60%);width:64%;animation-duration:40s;animation-direction:reverse}@keyframes ring7{to{rotate:360deg}}.logo .lg-burst{aspect-ratio:1;z-index:-2;pointer-events:none;background:repeating-conic-gradient(#ffe29638 0 5deg, transparent 5deg 15deg);mix-blend-mode:screen;border-radius:50%;width:150%;animation:90s linear infinite ring7;position:absolute;top:46%;left:50%;translate:-50% -50%;-webkit-mask:radial-gradient(circle,#000 10%,#0000 62%);mask:radial-gradient(circle,#000 10%,#0000 62%)}.btn.gold{position:relative;overflow:hidden}.btn.gold:after{content:"";background:linear-gradient(90deg,#0000,#ffffffb3,#0000);width:40%;animation:3.2s ease-in-out infinite sheen7;position:absolute;inset:-20% auto -20% -60%;transform:skew(-20deg)}@keyframes sheen7{0%,60%{left:-60%}to{left:130%}}.cta .btn.gold,.band .btn.gold{animation:2.4s ease-in-out infinite pulse7}@keyframes pulse7{0%,to{box-shadow:0 4px #a8722a,0 0 #f2b6408c,0 0 30px #f2b64059}50%{box-shadow:0 4px #a8722a,0 0 0 14px #f2b64000,0 0 44px #f2b64099}}.tilt{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transform-style:preserve-3d;transition:transform .25s,border-color .2s,box-shadow .2s;position:relative}.tilt:hover{transition:transform 80ms linear,border-color .2s,box-shadow .2s}.tilt:before{content:"";border-radius:inherit;pointer-events:none;opacity:0;z-index:2;background:radial-gradient(circle at var(--gx,50%) var(--gy,50%), #ffffff2e, transparent 45%);transition:opacity .25s;position:absolute;inset:0}.tilt:hover:before{opacity:1}.reveal.in.tilt{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}@media (prefers-reduced-motion:reduce){.logo .lg-ring{animation-duration:140s}.logo .lg-burst,.cta .btn.gold,.band .btn.gold{animation:none}}.logo .lg-ring{width:80%;top:39%}.logo .lg-ring.r2{width:56%}.logo .lg-burst{width:135%;top:39%}