:root{--bg:#0b0a0f;--ink:#f4f1f8;--mute:#b5adc2;--dim:#7d758a;--hot:#ff2d55;--warm:#ff7a59;--pink:#ff4fd8;--glass:#16131e6b;--glass-hi:#ffffff12;--line:#ffffff1a;--r:20px;--s:0;--display:"Mitr", "IBM Plex Sans Thai", system-ui, sans-serif;--body:"IBM Plex Sans Thai", system-ui, -apple-system, sans-serif;--mono:"JetBrains Mono", ui-monospace, monospace;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*,:before,:after{box-sizing:border-box}html{scroll-behavior:smooth;background:var(--bg);scroll-padding-top:96px}body{min-height:100vh;color:var(--ink);font:400 17px/1.65 var(--body);-webkit-font-smoothing:antialiased;margin:0;overflow-x:hidden}a{color:inherit;text-decoration:none}img{display:block}h1,h2,h3{font-family:var(--display);letter-spacing:-.01em;margin:0;font-weight:500;line-height:1.15}p{margin:0}.sr-only{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}:focus-visible{outline:2px solid var(--hot);outline-offset:3px;border-radius:8px}.bg{z-index:-3;background:radial-gradient(80% 60% at 50% 70%, #3a0f1c 0%, var(--bg) 70%);position:fixed;inset:0;overflow:hidden}.bg-video{object-fit:cover;object-position:50% 30%;width:108%;height:108%;opacity:calc(.85 - var(--s) * .35);filter:saturate(1.15) blur(calc(var(--s) * 10px));transform:scale(calc(1 + var(--s) * .08));will-change:transform, filter;position:absolute;inset:-4%}.bg-shade{background:radial-gradient(120% 90% at 50% 40%,#0000 30%,#0b0a0fd9 100%),linear-gradient(#0b0a0f59 0%,#0b0a0f26 40%,#0b0a0fe6 100%);position:absolute;inset:0}#fx{z-index:-2;pointer-events:none;mix-blend-mode:screen;opacity:0;width:100%;height:100%;transition:opacity 1.2s;position:fixed;inset:0}#fx.on{opacity:1}.grain{z-index:-1;pointer-events:none;opacity:.07;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:1s steps(4,end) infinite grain;position:fixed;inset:-50%}@keyframes grain{0%{transform:translate(0)}25%{transform:translate(-3%,2%)}50%{transform:translate(2%,-3%)}75%{transform:translate(-1%,3%)}}.glass{background:linear-gradient(160deg, var(--glass-hi), transparent 45%), var(--glass);border:1px solid var(--line);border-radius:var(--r);-webkit-backdrop-filter:blur(18px)saturate(1.4);position:relative;box-shadow:inset 0 1px #ffffff14,0 20px 60px -20px #0009}.spot{--mx:50%;--my:0%;--rx:0deg;--ry:0deg;transform:perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));transition:transform .4s cubic-bezier(.2,.8,.2,1),border-color .3s}.spot:before,.spot:after{content:"";border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s;position:absolute;inset:0}.spot:before{background:radial-gradient(420px circle at var(--mx) var(--my), #ff2d5524, transparent 45%)}.spot:after{background:radial-gradient(260px circle at var(--mx) var(--my), #ff8ca0e6, #ff4fd866 30%, transparent 60%);-webkit-mask-composite:xor;padding:1px;-webkit-mask-image:linear-gradient(#000 0 0),linear-gradient(#000 0 0);-webkit-mask-position:0 0,0 0;-webkit-mask-size:auto,auto;-webkit-mask-repeat:repeat,repeat;-webkit-mask-clip:content-box,border-box;-webkit-mask-origin:content-box,border-box;-webkit-mask-composite:xor;mask-composite:exclude;-webkit-mask-source-type:auto,auto;mask-mode:match-source,match-source}.spot:hover:before,.spot:hover:after{opacity:1}.nav{z-index:10;border-radius:999px;align-items:center;gap:24px;width:min(1120px,100% - 28px);padding:10px 12px 10px 18px;display:flex;position:fixed;top:14px;left:50%;translate:-50%}.brand{font:500 19px var(--display);letter-spacing:.01em;align-items:center;gap:10px;display:flex}.brand b{background:linear-gradient(90deg, var(--hot), var(--warm));color:#0000;-webkit-background-clip:text;background-clip:text;font-weight:600}.nav nav{gap:4px;margin-inline:auto;display:flex}.nav nav a,.lang,.nav-signin{white-space:nowrap;color:var(--mute);border-radius:999px;padding:8px 14px;font-size:15px;transition:color .2s,background .2s}.nav nav a:hover,.lang:hover,.nav-signin:hover{color:var(--ink);background:#ffffff0f}.nav-end{align-items:center;gap:6px;margin-left:auto;display:flex}.nav nav+.nav-end{margin-left:0}.nav-user{place-items:center;min-width:36px;display:grid}.btn{white-space:nowrap;font:500 16px var(--display);color:#fff;background:linear-gradient(135deg, var(--hot), #ff4d6d 50%, var(--warm));border-radius:999px;align-items:center;gap:10px;padding:14px 26px;transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s;display:inline-flex;position:relative;overflow:hidden;box-shadow:inset 0 0 0 1px #ffffff26,0 10px 40px -8px #ff2d55b3}.btn:after{content:"";background:linear-gradient(110deg,#0000 30%,#ffffff73 50%,#0000 70%);transition:translate .7s;position:absolute;inset:0;translate:-120%}.btn:hover:after{translate:120%}.btn:hover{box-shadow:inset 0 0 0 1px #ffffff40,0 14px 50px -6px #ff2d55e6}.btn span{transition:translate .25s}.btn:hover span{translate:4px}.btn-sm{padding:9px 18px;font-size:15px}.btn-ghost{box-shadow:0 0 0 1px var(--line) inset;-webkit-backdrop-filter:blur(12px);background:#ffffff0f}.btn-ghost:hover{background:#ffffff1a;box-shadow:inset 0 0 0 1px #fff3}main{width:min(1120px,100% - 40px);margin-inline:auto}.hero{flex-direction:column;justify-content:center;align-items:flex-start;gap:26px;min-height:100svh;padding:140px 0 80px;display:flex}.eyebrow{border:1px solid var(--line);-webkit-backdrop-filter:blur(10px);font:500 13px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--mute);background:#ffffff0a;border-radius:999px;align-items:center;gap:10px;padding:6px 14px 6px 10px;display:inline-flex}.dot{background:var(--hot);width:8px;height:8px;box-shadow:0 0 12px var(--hot);border-radius:50%;animation:2s ease-in-out infinite pulse}@keyframes pulse{50%{opacity:.35;transform:scale(.7)}}.hero h1{text-shadow:0 4px 40px #00000080;font-size:clamp(42px,7.4vw,92px);font-weight:600;line-height:1.04}.hero h1 .line{display:block}.shine{background:linear-gradient(100deg, #fff 0%, #ffd0d9 18%, var(--hot) 38%, var(--pink) 58%, #fff 78%, #ffd0d9 100%);color:#0000;filter:drop-shadow(0 0 28px #ff2d5559);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;animation:6s linear infinite shine}@keyframes shine{to{background-position:-220% 0}}.lead{max-width:640px;color:var(--mute);font-size:clamp(17px,1.6vw,20px)}.ctas{flex-wrap:wrap;gap:12px;display:flex}.stats{border-radius:18px;grid-template-columns:repeat(3,auto);margin:18px 0 0;padding:18px 8px;list-style:none;display:grid}.stats li{flex-direction:column;padding:0 26px;display:flex}.stats li+li{border-left:1px solid var(--line)}.stats b{font:500 22px var(--display)}.stats span{color:var(--dim);font-size:13px}.section{padding:90px 0}.section h2{max-width:760px;font-size:clamp(30px,4vw,48px)}.section-lead{color:var(--mute);margin-top:12px}.cards,.grid,.steps{gap:18px;margin-top:40px;display:grid}.cards{grid-template-columns:1.4fr 1fr 1fr}.card{flex-direction:column;gap:12px;min-height:280px;padding:28px;display:flex}.card h3{font-size:24px}.card p{color:var(--mute);flex:1}.card-main{background:radial-gradient(120% 100% at 0% 0%, #ff2d5538, transparent 55%), linear-gradient(160deg, var(--glass-hi), transparent 45%), var(--glass);border-color:#ff2d5559}.card-main h3{font-size:30px}.card-soon{border-style:dashed}.tag{font:500 12px var(--mono);letter-spacing:.05em;text-transform:uppercase;color:#ffd0d9;background:#ff2d5529;border:1px solid #ff2d5559;border-radius:999px;align-self:flex-start;padding:3px 10px}.card-soon .tag{color:var(--mute);border-color:var(--line);background:#ffffff0d}.more{font:500 15px var(--display);color:#ff8fa3}.more span{transition:translate .25s;display:inline-block}.more:hover span{translate:4px}.grid{grid-template-columns:repeat(3,1fr)}.feat{flex-direction:column;gap:10px;padding:26px;display:flex}.feat h3{font-size:20px}.feat p{color:var(--mute);font-size:15.5px}.feat-icon{color:#ff8fa3;background:linear-gradient(135deg,#ff2d5540,#ff4fd814);border:1px solid #ff2d554d;border-radius:14px;place-items:center;width:46px;height:46px;margin-bottom:6px;display:grid;box-shadow:0 0 24px -6px #ff2d5599}.feat-icon svg{width:24px;height:24px}.steps{counter-reset:none;grid-template-columns:repeat(3,1fr);padding:0;list-style:none}.step{flex-direction:column;gap:10px;padding:28px;display:flex}.step-n{font:500 40px var(--display);background:linear-gradient(180deg, var(--hot), transparent 110%);color:#0000;-webkit-background-clip:text;background-clip:text;line-height:1}.step h3{font-size:21px}.step p{color:var(--mute);font-size:15.5px}.final{text-align:center;background:radial-gradient(70% 120% at 50% 120%, #ff2d5559, transparent 60%), linear-gradient(160deg, var(--glass-hi), transparent 45%), var(--glass);flex-direction:column;align-items:center;gap:18px;padding:clamp(36px,6vw,72px);display:flex}.final h2{margin-inline:auto}.final p{color:var(--mute);max-width:520px}.foot{border-top:1px solid var(--line);width:min(1120px,100% - 40px);color:var(--dim);grid-template-columns:auto 1fr auto;align-items:center;gap:8px 24px;margin:40px auto 0;padding:36px 0 48px;font-size:14px;display:grid}.foot .brand{color:var(--ink);font-size:16px}.foot nav{gap:18px;display:flex}.foot nav a:hover{color:var(--ink)}.foot small{grid-column:1/-1}.reveal{opacity:0;filter:blur(6px);transition:opacity .9s cubic-bezier(.2, .8, .2, 1) var(--d,0s), translate .9s cubic-bezier(.2, .8, .2, 1) var(--d,0s), filter .9s ease var(--d,0s), transform .4s cubic-bezier(.2, .8, .2, 1), border-color .3s;translate:0 24px}.reveal.in{opacity:1;filter:none;translate:0}.auth-body .nav{justify-content:center}.auth{place-items:center;min-height:100svh;padding:110px 16px 40px;display:grid}.auth-box{place-items:center;min-height:200px;display:grid}.auth-loading{color:var(--mute);font:500 14px var(--mono)}@media (max-width:900px){.nav nav{display:none}.cards,.grid,.steps{grid-template-columns:1fr}.card{min-height:0}.foot{grid-template-columns:1fr}}@media (max-width:560px){body{font-size:16px}.nav{gap:8px;padding-left:14px}.brand span{display:none}.nav-signin{padding-inline:10px}.lang{padding-inline:8px}.nav .btn-sm{padding:8px 14px;font-size:14px}.stats{grid-template-columns:1fr;gap:12px;width:100%}.stats li+li{border-left:0;border-top:1px solid var(--line);padding-top:12px}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition:none!important;animation:none!important}html{scroll-behavior:auto}}:lang(th) .eyebrow,:lang(th) .tag{letter-spacing:0;text-transform:none;font-family:var(--body)}@media (max-width:420px){.nav .btn-sm{display:none}}
