: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}}