:root{
  --red:#C8102E; --red-deep:#9E0B22; --red-tint:#FBECEE;
  --ink:#1F1F21; --gray-700:#4D4D4F; --gray-500:#8A8A8D; --gray-300:#D4D4D6; --gray-100:#F4F4F5;
  --white:#fff;
  --wrap:1160px;
  --display:"Sora","IBM Plex Sans Thai",system-ui,sans-serif;
  --body:"IBM Plex Sans Thai",system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;font-family:var(--body);color:var(--ink);background:var(--white);line-height:1.65;font-size:17px;-webkit-font-smoothing:antialiased}
html[lang=th] [lang=en],html[lang=en] [lang=th]{display:none}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
h1,h2,h3{font-family:var(--display);line-height:1.15;margin:0;letter-spacing:-.02em;text-wrap:balance}
html[lang=th] h1,html[lang=th] h2,html[lang=th] h3{line-height:1.3;letter-spacing:0}
p{margin:0}
.eyebrow{font-family:var(--display);font-size:13px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--red);display:flex;align-items:center;gap:10px}
.eyebrow::before{content:"";width:0;height:0;border-left:12px solid var(--red);border-top:6px solid transparent;border-bottom:6px solid transparent}
.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 26px;font-weight:600;font-size:16px;border:2px solid var(--red);background:var(--red);color:#fff;transition:.2s;cursor:pointer;font-family:inherit}
.btn:hover{background:var(--red-deep);border-color:var(--red-deep)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--gray-300)}
.btn.ghost:hover{border-color:var(--ink);background:transparent}
:focus-visible{outline:3px solid var(--red);outline-offset:3px}

/* nav */
header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--gray-300)}
.nav{display:flex;align-items:center;justify-content:space-between;height:72px}
.nav img{height:44px;width:auto}
.nav nav{display:flex;align-items:center;gap:30px;font-size:15px;font-weight:500;color:var(--gray-700)}
.nav nav a:hover{color:var(--red)}
.lang{display:flex;border:1px solid var(--gray-300);font-family:var(--display);font-size:12px;font-weight:600}
.lang button{border:0;background:none;padding:6px 10px;cursor:pointer;color:var(--gray-500);font:inherit}
.lang button[aria-pressed=true]{background:var(--ink);color:#fff}
@media(max-width:860px){.nav nav a{display:none}}

/* hero */
.hero{position:relative;overflow:hidden;background:var(--white)}
.hero .wrap{position:relative;display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center;min-height:620px;padding-top:72px;padding-bottom:72px}
.hero h1{font-size:clamp(38px,5.4vw,68px);font-weight:800;margin:22px 0 24px}
.hero h1 em{font-style:normal;color:var(--red)}
.hero p.lead{font-size:19px;color:var(--gray-700);max-width:34em}
.hero .cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:36px}
.shards{position:relative;aspect-ratio:1/1;width:100%;max-width:460px;justify-self:end}
.shards i{position:absolute;inset:0;display:block;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.shards .s1{background:var(--red);clip-path:polygon(4% 22%,78% 2%,58% 52%)}
.shards .s2{background:var(--gray-700);clip-path:polygon(82% 6%,98% 46%,64% 50%)}
.shards .s3{background:var(--gray-500);clip-path:polygon(62% 56%,97% 52%,80% 84%)}
.shards .s4{background:var(--gray-100);clip-path:polygon(8% 30%,54% 58%,74% 92%,20% 96%)}
.shards .s5{background:var(--red-tint);clip-path:polygon(0 40%,16% 98%,4% 100%)}
.shards:hover .s1{transform:translate(-8px,-8px)}
.shards:hover .s2{transform:translate(8px,-6px)}
.shards:hover .s3{transform:translate(8px,8px)}
.shards .tag{position:absolute;left:14%;bottom:12%;font-family:var(--display);font-weight:800;font-size:clamp(54px,8vw,96px);letter-spacing:-.04em;color:var(--ink);line-height:1}
.shards .tag small{display:block;font-size:14px;font-weight:600;letter-spacing:.2em;color:var(--gray-500);margin-top:8px}
@media(max-width:860px){.hero .wrap{grid-template-columns:1fr;min-height:0;padding-top:48px;padding-bottom:48px}.shards{max-width:300px;justify-self:start}}

/* facts */
.facts{background:var(--ink);color:#fff}
.facts .wrap{display:grid;grid-template-columns:repeat(4,1fr)}
.facts div{padding:34px 24px;border-left:1px solid rgba(255,255,255,.14)}
.facts div:first-child{border-left:0;padding-left:0}
.facts b{font-family:var(--display);font-size:44px;font-weight:800;display:block;line-height:1}
.facts b::after{content:"";display:block;width:28px;height:3px;background:var(--red);margin:14px 0 10px}
.facts span{font-size:14.5px;color:var(--gray-300)}
@media(max-width:860px){.facts .wrap{grid-template-columns:1fr 1fr}.facts div{border-left:0;padding:24px 0}}

section{padding:104px 0}
.head{max-width:720px;margin-bottom:56px}
.head h2{font-size:clamp(30px,3.6vw,44px);font-weight:700;margin:16px 0 18px}
.head p{color:var(--gray-700);font-size:18px}
@media(max-width:860px){section{padding:68px 0}}

/* about */
.about .grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.about blockquote{margin:0;padding:36px 36px 36px 40px;background:var(--gray-100);border-left:5px solid var(--red);font-family:var(--display);font-size:24px;font-weight:600;line-height:1.4}
html[lang=th] .about blockquote{line-height:1.6;font-size:22px}
.about blockquote footer{font-family:var(--body);font-size:14px;font-weight:400;color:var(--gray-500);margin-top:18px}
.about .text p+p{margin-top:18px}
.about .text p{color:var(--gray-700)}
@media(max-width:860px){.about .grid{grid-template-columns:1fr;gap:32px}}

/* roles */
.roles{background:var(--gray-100)}
.roles .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--gray-300);border:1px solid var(--gray-300)}
.role{background:#fff;padding:40px 34px;position:relative;transition:.25s}
.role .n{font-family:var(--display);font-weight:800;font-size:15px;color:var(--red);letter-spacing:.1em}
.role h3{font-size:23px;font-weight:700;margin:18px 0 12px}
.role p{color:var(--gray-700);font-size:16px}
.role::after{content:"";position:absolute;top:0;right:0;width:0;height:0;border-top:34px solid var(--red);border-left:34px solid transparent;opacity:0;transition:.25s}
.role:hover::after{opacity:1}
@media(max-width:860px){.roles .cards{grid-template-columns:1fr}}

/* group */
.tree{display:grid;grid-template-columns:2fr 1fr;gap:56px;align-items:start;position:relative}
.tree::before{content:"";position:absolute;top:109px;left:calc((100% - 56px)/3);right:calc((100% - 56px)/6);height:2px;background:var(--gray-300)}
.branch{display:flex;flex-direction:column;align-items:center;min-width:0}
.branch.hold{margin-top:64px}
.node{position:relative;z-index:1;display:flex;flex-direction:column;justify-content:center;height:92px;border:2px solid var(--ink);padding:0 30px;text-align:center;background:#fff;min-width:280px}
.node.parent{background:var(--red);border-color:var(--red);color:#fff;min-width:360px}
.node.holding{width:100%}
.node small{display:block;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;font-family:var(--display);font-weight:600;opacity:.8}
.node strong{font-family:var(--display);font-size:22px;font-weight:700}
.cos{display:grid;grid-template-columns:repeat(2,1fr);grid-auto-rows:1fr;gap:20px 48px;width:100%;padding-top:36px}
.co,.sub{position:relative}
.co::before,.sub::before{content:"";position:absolute;top:50%;height:2px;background:var(--gray-300)}
.co:nth-child(odd)::before{left:100%;width:25px}
.co:nth-child(even)::before{right:100%;width:25px}
.co:nth-child(odd)::after,.sub::after{content:"";position:absolute;width:2px;background:var(--gray-300)}
.co:nth-child(odd)::after{right:-26px}
.co:nth-child(1)::after{top:-41px;bottom:-21px}
.co:nth-child(3)::after{top:-5px;height:calc(50% + 6px)}
.co{display:flex;flex-direction:column;border:1px solid var(--gray-300);border-top:5px solid var(--c);padding:28px 24px;background:#fff;transition:.25s}
.co:hover{box-shadow:0 14px 30px rgba(0,0,0,.08)}
.co img{height:44px;width:auto;align-self:flex-start;margin-bottom:20px}
.co h3{font-size:19px;font-weight:700;margin-bottom:10px;letter-spacing:-.01em}
.co p{font-size:15px;color:var(--gray-700);flex:1}
.co .go{margin-top:20px;font-weight:600;font-size:15px;color:var(--red)}
.subs{display:grid;grid-auto-rows:1fr;gap:20px;width:100%;padding:36px 0 0 40px}
.sub{border:1px solid var(--gray-300);border-left:5px solid var(--ink);padding:22px 24px;background:#fff}
.sub::before{right:100%;width:33px}
.sub::after{left:-33px}
.sub:first-child::after{top:-37px;bottom:-21px}
.sub:last-child::after{top:-1px;height:calc(50% + 2px)}
.sub img{height:96px;width:auto;margin:-6px 0 10px -8px}
.sub img.vec{height:70px;margin:8px 0 18px}
.sub small{display:block;font-size:12.5px;color:var(--gray-500);margin-bottom:8px}
.sub h3{font-size:18px;font-weight:700;margin-bottom:8px;letter-spacing:-.01em}
.sub p{font-size:15px;color:var(--gray-700)}
.tech{background:var(--gray-100);padding-top:88px;padding-bottom:88px}
.layers{display:grid;gap:10px}
.layer{display:grid;grid-template-columns:300px 1fr;background:#fff;border-left:5px solid var(--gray-500)}
.layer:nth-child(1){border-color:var(--red)}
.layer:nth-child(2){border-color:var(--gray-700)}
.layer:nth-child(4){border-color:var(--ink);background:var(--ink);color:#fff}
.lh{padding:30px 28px;border-right:1px solid var(--gray-300)}
.layer:nth-child(4) .lh{border-color:rgba(255,255,255,.16)}
.lh .n{font-family:var(--display);font-weight:800;font-size:13px;letter-spacing:.14em;color:var(--red)}
.lh h3{font-size:22px;font-weight:700;margin:8px 0 18px}
.count{font-size:14px;color:var(--gray-500);display:flex;align-items:baseline;gap:8px}
.count b{font-family:var(--display);font-size:40px;font-weight:800;line-height:1;color:var(--ink)}
.layer:nth-child(4) .count b{color:#fff}
.lb{padding:30px 32px}
.lb p{font-size:15.5px;color:var(--gray-700);margin-bottom:18px;max-width:46em}
.layer:nth-child(4) .lb p{color:var(--gray-300)}
.chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.chips li{font-size:14px;padding:5px 12px;background:var(--gray-100);border:1px solid var(--gray-300)}
.svc{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:14px 24px}
.svc li{font-size:14px;color:var(--gray-700);border-top:2px solid var(--gray-300);padding-top:10px}
.svc b{display:block;font-family:var(--display);font-size:15.5px;color:var(--ink);margin-bottom:2px}
.layer:nth-child(4) .svc li{color:var(--gray-300);border-color:rgba(255,255,255,.22)}
.layer:nth-child(4) .svc b{color:#fff}
.tnotes{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:48px}
.tnotes div{border-top:3px solid var(--red);padding-top:16px}
.tnotes b{font-family:var(--display);font-size:17px}
.tnotes p{font-size:15px;color:var(--gray-700);margin-top:6px}
@media(max-width:860px){.layer{grid-template-columns:1fr}.lh{border-right:0;padding-bottom:0}.lh h3{margin-bottom:10px}.svc{grid-template-columns:1fr 1fr}.tnotes{grid-template-columns:1fr;gap:22px}}
@media(max-width:480px){.svc{grid-template-columns:1fr}}
@media(max-width:860px){.tree{grid-template-columns:1fr;gap:0}.tree::before{display:none}.branch.hold{margin-top:48px}.node.parent{min-width:0;width:100%}.node{height:auto;min-height:92px;padding:16px 20px}}
@media(max-width:560px){.cos{grid-template-columns:1fr;grid-auto-rows:auto}.co::before,.co::after{display:none}}

/* values */
.values{background:var(--ink);color:#fff;position:relative;overflow:hidden}
.values::before{content:"";position:absolute;right:-60px;top:-130px;width:320px;height:320px;background:var(--red);clip-path:polygon(0 20%,100% 0,70% 100%);opacity:.9}
.values .wrap{position:relative}
.values .head p{color:var(--gray-300)}
.values .eyebrow{color:#fff}
.vgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:32px}
.vgrid div{border-top:2px solid rgba(255,255,255,.2);padding-top:22px}
.vgrid h3{font-size:20px;font-weight:700;margin-bottom:10px}
.vgrid p{font-size:15.5px;color:var(--gray-300)}
@media(max-width:860px){.vgrid{grid-template-columns:1fr 1fr}.values::before{width:220px;height:220px}}

/* contact */
.contact .box{display:grid;grid-template-columns:1.2fr .8fr;border:2px solid var(--ink)}
.contact .l{padding:56px}
.contact .l h2{font-size:clamp(28px,3.2vw,40px);font-weight:700;margin:16px 0 16px}
.contact .l p{color:var(--gray-700);margin-bottom:30px}
.contact .r{background:var(--gray-100);padding:56px 44px;display:grid;gap:22px;align-content:center}
.contact dt{font-family:var(--display);font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gray-500)}
.contact dd{margin:4px 0 0;font-weight:500}
.contact dl{margin:0;display:grid;gap:20px}
@media(max-width:860px){.contact .box{grid-template-columns:1fr}.contact .l,.contact .r{padding:34px 26px}}

footer.site{border-top:1px solid var(--gray-300);padding:36px 0;font-size:14px;color:var(--gray-500)}
footer.site .wrap{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
footer.site img{height:36px}

.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s,transform .7s}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}}

/* technology sub-pages */
.crumb{font-size:14px;color:var(--gray-500);display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px}
.crumb a:hover{color:var(--red)}
.phero{background:var(--ink);color:#fff;position:relative;overflow:hidden}
.phero::before{content:"";position:absolute;right:-90px;top:-70px;width:460px;height:460px;background:var(--red);clip-path:polygon(0 18%,100% 0,68% 100%)}
.phero::after{content:"";position:absolute;right:150px;bottom:-120px;width:300px;height:300px;background:var(--gray-700);clip-path:polygon(20% 0,100% 40%,0 100%);opacity:.7}
.phero .wrap{position:relative;z-index:1;padding-top:72px;padding-bottom:80px}
.phero .crumb{color:var(--gray-300)}
.phero .pkg{display:inline-block;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13.5px;padding:5px 12px;border:1px solid rgba(255,255,255,.3);color:var(--gray-300);margin-bottom:22px}
.phero h1{font-size:clamp(34px,4.8vw,60px);font-weight:800;max-width:15em}
.phero .pname{font-family:var(--display);font-weight:700;font-size:18px;color:var(--red);letter-spacing:.04em;margin-bottom:12px;filter:brightness(1.5)}
.phero p.lead{font-size:19px;color:var(--gray-300);max-width:38em;margin-top:22px}
.phero .cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}
.phero .btn.ghost{color:#fff;border-color:rgba(255,255,255,.4)}
.phero .btn.ghost:hover{border-color:#fff}
.pstats{border-bottom:1px solid var(--gray-300)}
.pstats .wrap{display:grid;grid-template-columns:repeat(4,1fr)}
.pstats div{padding:34px 24px;border-left:1px solid var(--gray-300)}
.pstats div:first-child{border-left:0;padding-left:0}
.pstats b{font-family:var(--display);font-size:40px;font-weight:800;display:block;line-height:1.05;color:var(--ink)}
.pstats b::after{content:"";display:block;width:28px;height:3px;background:var(--red);margin:14px 0 10px}
.pstats span{font-size:14.5px;color:var(--gray-700)}
.caps{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--gray-300);border:1px solid var(--gray-300)}
.cap{background:#fff;padding:34px 30px}
.cap .n{font-family:var(--display);font-weight:800;font-size:13px;color:var(--red);letter-spacing:.12em}
.cap h3{font-size:20px;font-weight:700;margin:12px 0 10px}
.cap p{font-size:15.5px;color:var(--gray-700)}
.cap ul{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:7px}
.cap li{font-size:14.5px;padding-left:20px;position:relative}
.cap li::before{content:"";position:absolute;left:0;top:.6em;border-left:8px solid var(--red);border-top:4px solid transparent;border-bottom:4px solid transparent}
.perf{background:var(--gray-100)}
.ptable{background:#fff;border:1px solid var(--gray-300)}
.prow{display:grid;grid-template-columns:1.1fr auto 1.4fr;gap:28px;align-items:center;padding:22px 28px;border-top:1px solid var(--gray-300)}
.prow:first-child{border-top:0}
.prow .m{font-weight:600}
.prow .v{font-family:var(--display);font-weight:800;font-size:26px;color:var(--red);white-space:nowrap;text-align:right;min-width:150px}
.prow .nt{font-size:14.5px;color:var(--gray-700)}
.pfoot{font-size:13.5px;color:var(--gray-500);margin-top:16px}
.biz{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.biz div{border-top:3px solid var(--red);padding-top:18px}
.biz h3{font-size:20px;font-weight:700;margin-bottom:8px}
.biz p{font-size:15.5px;color:var(--gray-700)}
.codewrap{display:grid;grid-template-columns:.8fr 1.2fr;gap:48px;align-items:center}
.codewrap h2{font-size:clamp(26px,3vw,36px);font-weight:700;margin:16px 0 16px}
.codewrap .uses{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:8px}
.codewrap .uses li{padding:10px 14px;background:var(--gray-100);border-left:4px solid var(--gray-700);font-size:15px}
pre.code{margin:0;background:var(--ink);color:#E8E8EA;padding:28px;overflow-x:auto;font:13.5px/1.7 ui-monospace,SFMono-Regular,Menlo,monospace;border-top:4px solid var(--red)}
.pnav{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:1px;background:var(--gray-300);border:1px solid var(--gray-300)}
.pnav a{background:#fff;padding:16px 10px;text-align:center;font-family:var(--display);font-weight:600;font-size:14.5px;transition:.2s}
.pnav a:hover{background:var(--red-tint);color:var(--red)}
.pnav a[aria-current]{background:var(--ink);color:#fff}
.band{background:var(--red);color:#fff}
.band .wrap{display:flex;justify-content:space-between;align-items:center;gap:28px;flex-wrap:wrap;padding-top:56px;padding-bottom:56px}
.band h2{font-size:clamp(24px,3vw,34px);font-weight:700;max-width:18em}
.band .btn{background:#fff;color:var(--red);border-color:#fff}
.band .btn:hover{background:var(--ink);border-color:var(--ink);color:#fff}
a.pk{display:block;color:inherit}
a.pk:hover b{color:var(--red)}
.layer:nth-child(4) a.pk:hover b{color:#fff;text-decoration:underline;text-decoration-color:var(--red);text-underline-offset:4px}
@media(max-width:860px){.pstats .wrap{grid-template-columns:1fr 1fr}.pstats div{border-left:0;padding:22px 0}.caps,.biz{grid-template-columns:1fr}.prow{grid-template-columns:1fr;gap:6px}.prow .v{text-align:left}.codewrap{grid-template-columns:1fr;gap:28px}.pnav{grid-template-columns:repeat(2,1fr)}.phero::before{width:240px;height:240px;right:-70px}.phero::after{display:none}}

/* package icons */
.pi{width:30px;height:30px;display:block;flex:none}
a.pk .pi{margin-bottom:10px}
.pmark{display:flex;align-items:center;gap:18px;margin-bottom:20px}
.pmark .pi{width:64px;height:64px;padding:12px;border:1px solid rgba(255,255,255,.3);box-sizing:content-box;color:#fff}
.pmark .pname{margin:0;font-size:22px}
.pnav a{display:flex;flex-direction:column;align-items:center;gap:10px;padding:20px 10px 16px}

/* scroll showcase of real screens */
.show{background:#0B0B0C;color:#fff;padding:0;height:calc(var(--n) * 90vh + 60vh);position:relative}
.show .stage{position:sticky;top:0;height:100vh;min-height:560px;overflow:hidden;display:grid;grid-template-rows:auto 1fr auto;justify-items:center;padding:96px 24px 28px;gap:22px}
.show .glow{position:absolute;left:50%;top:58%;width:min(1200px,120vw);height:70vh;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(200,16,46,.42),rgba(200,16,46,.08) 60%,transparent);filter:blur(30px);opacity:calc(.25 + var(--in,0) * .75);pointer-events:none}
.shead{position:relative;text-align:center;width:100%;max-width:860px}
.shead .eyebrow{justify-content:center;color:#fff;opacity:.75;margin-bottom:14px}
.scaps{display:grid}
.scap{grid-area:1/1;opacity:0;transform:translateY(14px);transition:opacity .5s,transform .5s;pointer-events:none}
.scap.on{opacity:1;transform:none}
.scap h3{font-size:clamp(28px,4.4vw,56px);font-weight:800;letter-spacing:-.03em;background:linear-gradient(180deg,#fff 30%,#B9B9BD);-webkit-background-clip:text;background-clip:text;color:transparent}
html[lang=th] .scap h3{letter-spacing:0;line-height:1.3}
.scap p{font-size:clamp(15px,1.5vw,19px);color:#A9A9AE;margin:10px auto 0;max-width:36em}
.device{position:relative;align-self:center;width:min(1040px,100%,calc((100vh - 400px) * 1.6));min-width:280px;transform:perspective(1600px) rotateX(calc((1 - var(--in,0)) * 22deg)) scale(calc(.78 + var(--in,0) * .22));transform-origin:50% 100%;opacity:calc(.35 + var(--in,0) * .65);will-change:transform}
.show-browser .device{border-radius:14px;background:#1C1C1F;box-shadow:0 0 0 1px rgba(255,255,255,.12),0 40px 120px rgba(0,0,0,.7),0 0 90px rgba(200,16,46,.22);overflow:hidden}
.device .bar{height:30px;display:flex;align-items:center;gap:7px;padding:0 13px;background:#232327}
.device .bar i{width:10px;height:10px;border-radius:50%;background:#4A4A50}
.device .bar i:first-child{background:#C8102E}
.shots{display:grid;position:relative}
.show-browser .shots{aspect-ratio:16/10;background:#fff}
.shot{grid-area:1/1;opacity:0;transition:opacity .6s,transform .8s cubic-bezier(.2,.7,.2,1);transform:scale(1.03)}
.shot.on{opacity:1;transform:none}
.show-browser .shot img{width:100%;height:100%;object-fit:cover;object-position:top left;display:block}
.show-devices .device{width:min(900px,100%)}
.show-devices .shot{display:flex;justify-content:center;align-items:flex-end;gap:clamp(12px,3vw,40px)}
.show-devices .shot img{height:min(calc(100vh - 430px),540px);min-height:240px;width:auto;border-radius:26px;border:6px solid #2A2A2E;box-shadow:0 30px 80px rgba(0,0,0,.7),0 0 60px rgba(200,16,46,.18);background:#fff}
.show-devices .shot img:nth-child(2){transform:translateY(-22px)}
.show-devices .shot img:nth-child(3){border-radius:12px}
.sfoot{position:relative;display:grid;justify-items:center;gap:12px;font-size:13px;color:#77777D;text-align:center}
.dots{display:flex;gap:8px}
.dots i{width:26px;height:3px;background:#3A3A40;transition:.4s}
.dots i.on{background:var(--red);width:44px}
@media(max-width:700px){.show .stage{padding-top:84px}.show-devices .shot img{height:min(calc(100vh - 470px),420px);border-width:4px;border-radius:18px}.show-devices .shot img:nth-child(3){display:none}}
@media(prefers-reduced-motion:reduce){.device{transform:none;opacity:1}.shot,.scap{transition:none}}

/* modern refresh */
:root{--r:20px;--r-lg:28px;--line:rgba(17,17,20,.09);--soft:0 1px 2px rgba(17,17,20,.04),0 12px 32px rgba(17,17,20,.06)}
body{background:#FCFCFD}
h1,h2,h3{letter-spacing:-.03em}
header{top:12px;background:transparent;border:0;backdrop-filter:none;padding:0 16px;margin-bottom:-72px}
.nav{height:60px;max-width:1180px;padding:0 10px 0 22px;background:rgba(255,255,255,.78);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border:1px solid var(--line);border-radius:999px;box-shadow:var(--soft)}
.nav img{height:36px}
.nav nav{gap:6px;font-size:14.5px}
.nav nav a{padding:8px 14px;border-radius:999px;transition:.2s}
.nav nav a:hover{background:rgba(17,17,20,.06);color:var(--ink)}
.lang{border-radius:999px;overflow:hidden;margin-left:8px;background:#fff}
.lang button{padding:7px 12px}
.lang button[aria-pressed=true]{border-radius:999px}
main>:first-child{padding-top:72px}
.btn{border-radius:999px;padding:14px 26px;box-shadow:0 8px 24px rgba(200,16,46,.28);transition:transform .2s,box-shadow .2s,background .2s}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(200,16,46,.34)}
.btn.ghost{box-shadow:none;background:rgba(255,255,255,.7);border-color:var(--line)}
.btn.ghost:hover{box-shadow:var(--soft);border-color:var(--ink)}
.eyebrow{font-size:12.5px}
.head h2{font-size:clamp(32px,4.2vw,54px);font-weight:800}
html[lang=th] .head h2{font-weight:700}
.reveal{filter:blur(6px);transition:opacity .8s,transform .8s cubic-bezier(.2,.7,.2,1),filter .8s}
.reveal.in{filter:none}

/* hero v2 */
.hero.v2{position:relative;overflow:hidden;background:#fff;isolation:isolate}
.hero.v2 .wrap{display:block;min-height:0;text-align:center;padding-top:150px;padding-bottom:84px;max-width:1040px}
.hbg{position:absolute;inset:0;z-index:-1;overflow:hidden}
.hbg .g1,.hbg .g2{position:absolute;border-radius:50%;filter:blur(90px)}
.hbg .g1{width:720px;height:720px;left:-220px;top:-260px;background:radial-gradient(circle,rgba(200,16,46,.26),transparent 68%);animation:drift 16s ease-in-out infinite alternate}
.hbg .g2{width:760px;height:760px;right:-240px;bottom:-380px;background:radial-gradient(circle,rgba(77,77,79,.22),transparent 68%);animation:drift 20s ease-in-out infinite alternate-reverse}
.hbg .grid{position:absolute;inset:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:64px 64px;-webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 30%,#000 20%,transparent 75%);mask-image:radial-gradient(ellipse 70% 60% at 50% 30%,#000 20%,transparent 75%)}
.hero.v2 .shards{position:absolute;right:-90px;top:30px;width:min(520px,44vw);max-width:none;opacity:.5;animation:floaty 9s ease-in-out infinite alternate}
.hero.v2 .shards .s4,.hero.v2 .shards .s5{display:none}
@keyframes drift{to{transform:translate(60px,40px) scale(1.08)}}
@keyframes floaty{to{transform:translateY(-18px) rotate(2deg)}}
.badge{display:inline-flex;align-items:center;gap:10px;padding:6px 14px 6px 6px;border-radius:999px;background:rgba(255,255,255,.8);border:1px solid var(--line);box-shadow:var(--soft);font-size:14px;color:var(--gray-700);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:.2s}
.badge b{font-family:var(--display);font-size:12px;letter-spacing:.06em;background:var(--ink);color:#fff;padding:5px 11px;border-radius:999px}
.badge i{font-style:normal;color:var(--red);transition:transform .2s}
.badge:hover i{transform:translateX(3px)}
.hero.v2 h1{font-size:clamp(42px,7.4vw,96px);font-weight:800;margin:28px auto 26px;line-height:1.02;letter-spacing:-.045em}
html[lang=th] .hero.v2 h1{font-size:clamp(40px,6.6vw,84px);line-height:1.2;letter-spacing:-.01em;font-weight:700}
.hero.v2 h1 em{background:linear-gradient(100deg,#C8102E 10%,#FF4D64 60%,#C8102E);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero.v2 p.lead{margin:0 auto;font-size:clamp(17px,1.6vw,21px);max-width:40em}
.hero.v2 .cta{justify-content:center;margin-top:38px}
.lstrip{margin-top:72px}
.lstrip small{display:block;font-family:var(--display);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--gray-500);margin-bottom:16px}
.lrow{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.lchip{display:inline-flex;align-items:center;gap:10px;padding:9px 16px 9px 10px;border-radius:999px;background:rgba(255,255,255,.82);border:1px solid var(--line);font-family:var(--display);font-weight:600;font-size:14px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:.2s}
.lchip img{width:26px;height:26px;object-fit:contain}
.lchip:hover{transform:translateY(-2px);box-shadow:var(--soft);border-color:rgba(17,17,20,.2)}

/* sections */
.about blockquote{border-left:0;border-radius:var(--r-lg);background:var(--ink);color:#fff;padding:44px;position:relative;overflow:hidden}
.about blockquote::before{content:"";position:absolute;right:-60px;top:-60px;width:240px;height:240px;background:var(--red);clip-path:polygon(0 20%,100% 0,70% 100%);opacity:.9}
.about blockquote>span,.about blockquote footer{position:relative}
.about blockquote footer{color:var(--gray-300)}
.roles{background:transparent}
.roles .cards{gap:16px;background:none;border:0}
.role{border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--soft);padding:36px 32px 40px;overflow:hidden;transition:transform .3s,box-shadow .3s}
.role:hover{transform:translateY(-6px);box-shadow:0 2px 4px rgba(17,17,20,.04),0 24px 56px rgba(17,17,20,.12)}
.role .n{font-size:64px;line-height:1;letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1.5px var(--gray-300);transition:.3s}
.role:hover .n{-webkit-text-stroke-color:var(--red)}
.role::after{border-top-width:44px;border-left-width:44px}
.node{border-radius:22px;border-width:1px;border-color:var(--line);box-shadow:var(--soft);padding:16px 34px}
.node.parent{box-shadow:0 12px 32px rgba(200,16,46,.3)}
.co{border:1px solid var(--line);border-top:1px solid var(--line);border-radius:var(--r);box-shadow:inset 0 4px 0 var(--c),var(--soft);overflow:hidden}
.co:hover{box-shadow:inset 0 4px 0 var(--c),0 24px 56px rgba(17,17,20,.12)}
.sub{border:1px solid var(--line);border-left:1px solid var(--line);border-radius:var(--r);box-shadow:var(--soft)}
.tech{background:#F4F4F6;border-radius:40px;margin:0 16px}
.layer{border-left:0;border-radius:var(--r);overflow:hidden;box-shadow:inset 5px 0 0 var(--gray-500),var(--soft)}
.layer:nth-child(1){box-shadow:inset 5px 0 0 var(--red),var(--soft)}
.layer:nth-child(2){box-shadow:inset 5px 0 0 var(--gray-700),var(--soft)}
.layer:nth-child(4){box-shadow:0 24px 60px rgba(17,17,20,.28)}
.chips li{border-radius:999px;background:#fff}
.tnotes div{border-top:0;padding:24px;background:#fff;border-radius:var(--r);box-shadow:var(--soft)}
.values{border-radius:40px;margin:16px}
.contact .box{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--soft)}
footer.site{border-top:0}
/* sub-pages */
.phero{border-radius:0 0 40px 40px}
.phero .wrap{padding-top:140px}
.pmark .pi{border-radius:18px;background:rgba(255,255,255,.06)}
.caps,.pnav,.ptable{border-radius:var(--r);overflow:hidden}
pre.code{border-radius:var(--r);border-top:0}
.perf{border-radius:40px;margin:0 16px}
.biz div{border-top:0;padding:28px;background:#fff;border-radius:var(--r);border:1px solid var(--line);box-shadow:var(--soft)}
.band{border-radius:40px;margin:16px}
.codewrap .uses li{border-radius:12px}
.show{border-radius:40px;margin:16px}
.show .stage{border-radius:40px}
@media(max-width:860px){header{padding:0 10px}.nav{padding-left:16px}.hero.v2 .wrap{padding-top:120px;padding-bottom:56px}.hero.v2 .shards{opacity:.22;right:-120px}.lstrip{margin-top:48px}.tech,.perf{margin:0 8px;border-radius:28px}.values,.band,.show{margin:8px;border-radius:28px}.show .stage{border-radius:28px}}
@media(prefers-reduced-motion:reduce){.hbg .g1,.hbg .g2,.hero.v2 .shards{animation:none}.reveal{filter:none}}

/* motion */
.sprog{position:fixed;left:0;top:0;height:3px;width:100%;background:linear-gradient(90deg,var(--red),#FF4D64);transform-origin:0 50%;transform:scaleX(var(--sp,0));z-index:60;pointer-events:none}
@keyframes rise{from{opacity:0;transform:translateY(26px);filter:blur(8px)}to{opacity:1;transform:none;filter:none}}
.hero.v2 .wrap>*{animation:rise .9s cubic-bezier(.2,.7,.2,1) both}
.hero.v2 .wrap>:nth-child(1){animation-delay:.05s}
.hero.v2 .wrap>:nth-child(2){animation-delay:.16s}
.hero.v2 .wrap>:nth-child(3){animation-delay:.3s}
.hero.v2 .wrap>:nth-child(4){animation-delay:.42s}
.hero.v2 .wrap>:nth-child(5){animation-delay:.56s}
.hero.v2 h1 em{background-size:220% 100%;animation:shine 6s linear infinite}
@keyframes shine{to{background-position:-220% 0}}
.lchip{animation:rise .7s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(.7s + var(--i,0) * .07s)}
.hero.v2 .shards{transform:translate(calc(var(--mx,0) * -18px),calc(var(--my,0) * -14px));transition:transform .5s cubic-bezier(.2,.7,.2,1);animation:none}
.hero.v2 .shards i{animation:shard 1.3s cubic-bezier(.2,.8,.2,1) both,bob 7s ease-in-out 1.4s infinite alternate}
.hero.v2 .shards .s1{--fx:-160px;--fy:-120px;--fr:-28deg;animation-delay:.2s,1.5s}
.hero.v2 .shards .s2{--fx:180px;--fy:-90px;--fr:34deg;animation-delay:.34s,1.9s;--by:-12px}
.hero.v2 .shards .s3{--fx:150px;--fy:160px;--fr:-22deg;animation-delay:.48s,2.3s;--by:12px}
@keyframes shard{from{opacity:0;transform:translate(var(--fx),var(--fy)) rotate(var(--fr)) scale(.6)}to{opacity:1;transform:none}}
@keyframes bob{to{transform:translateY(var(--by,-9px))}}
.nav{transition:height .3s,box-shadow .3s,background .3s}
header.scrolled .nav{height:52px;background:rgba(255,255,255,.9);box-shadow:0 1px 2px rgba(17,17,20,.05),0 16px 40px rgba(17,17,20,.12)}
.btn{position:relative;overflow:hidden}
.btn:not(.ghost)::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);transform:translateX(-120%);transition:transform .7s}
.btn:not(.ghost):hover::after{transform:translateX(120%)}
/* staggered children */
.stag>*{opacity:0;transform:translateY(28px) scale(.98);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1),box-shadow .3s,border-color .3s;transition-delay:calc(var(--i,0) * 90ms),calc(var(--i,0) * 90ms),0s,0s}
.stag.in>*{opacity:1;transform:none}
.stag.done>*{transition-delay:0s}
.layers.stag>*{transform:translateX(-36px)}
.layers.stag.in>*{transform:none}
.reveal.stag{opacity:1;transform:none;filter:none}
.node.parent{animation:pulse 3.2s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 12px 44px rgba(200,16,46,.5)}}
.about blockquote::before{animation:floaty 8s ease-in-out infinite alternate}
.values::before{animation:floaty 10s ease-in-out infinite alternate}
@media(prefers-reduced-motion:reduce){.hero.v2 .wrap>*,.lchip,.hero.v2 .shards i,.hero.v2 h1 em,.node.parent,.about blockquote::before,.values::before{animation:none}.stag>*{opacity:1;transform:none;transition:none}.sprog{display:none}}
/* fixes */
.pstats>.wrap.wrap{padding:0 24px;border-left:0}
.phero .btn.ghost{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.32)}
.phero .btn.ghost:hover{background:rgba(255,255,255,.16);border-color:#fff}

/* ecosystem */
.eco-top{display:grid;grid-template-columns:minmax(0,480px) 1fr;gap:56px;align-items:center}
.eco-map{position:relative;aspect-ratio:1/1;width:100%;max-width:480px;justify-self:center}
.eco-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.eco-lines .ring{fill:none;stroke:var(--gray-300);stroke-width:1.2;stroke-dasharray:2 9;transform-origin:200px 205px;animation:spin 60s linear infinite}
.eco-lines .spoke{fill:none;stroke:var(--gray-300);stroke-width:1.5}
.eco-lines .flow{fill:none;stroke:var(--red);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:3 13;animation:flow 1.6s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes flow{to{stroke-dashoffset:-32}}
.eco-core{position:absolute;left:50%;top:51.25%;transform:translate(-50%,-50%);width:27%;aspect-ratio:1/1;border-radius:50%;background:var(--red);color:#fff;display:grid;place-content:center;text-align:center;box-shadow:0 0 0 10px rgba(200,16,46,.12),0 0 0 24px rgba(200,16,46,.06),0 20px 50px rgba(200,16,46,.4);animation:corepulse 3.4s ease-in-out infinite}
.eco-core b{font-family:var(--display);font-weight:800;font-size:clamp(20px,2.4vw,28px);letter-spacing:-.02em;line-height:1}
.eco-core small{font-size:11.5px;opacity:.9;margin-top:4px}
@keyframes corepulse{50%{box-shadow:0 0 0 16px rgba(200,16,46,.1),0 0 0 36px rgba(200,16,46,.04),0 20px 60px rgba(200,16,46,.5)}}
.eco-node{position:absolute;transform:translate(-50%,-50%);background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--soft);padding:14px 18px;text-align:center;min-width:138px;display:grid;justify-items:center;gap:2px;animation:bob 6s ease-in-out infinite alternate}
.eco-node .ei{width:30px;height:30px;margin-bottom:6px}
.eco-node b{font-family:var(--display);font-size:15px}
.eco-node small{font-size:12.5px;color:var(--gray-500)}
.eco-node.n1{left:50%;top:15.5%}
.eco-node.n2{left:19.5%;top:75%;animation-delay:-2s}
.eco-node.n3{left:80.5%;top:75%;animation-delay:-4s}
.eco-cards{display:grid;gap:14px}
.eco-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--soft);padding:24px 26px;transition:transform .3s,box-shadow .3s,border-color .3s}
.eco-card:hover{transform:translateX(6px);border-color:rgba(200,16,46,.35);box-shadow:0 24px 56px rgba(17,17,20,.1)}
.eco-card .eh{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.eco-card .eh .ei{flex:none;width:28px;height:28px}
.eco-card h3{font-size:19px;font-weight:700}
.eco-card dl{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:20px}
.eco-card dt{font-family:var(--display);font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--red);margin-bottom:4px}
.eco-card dd{margin:0;font-size:15px;color:var(--gray-700)}
.eco-loop{margin-top:56px;background:var(--ink);color:#fff;border-radius:var(--r-lg);padding:36px 40px 40px;position:relative;overflow:hidden}
.eco-loop::before{content:"";position:absolute;right:-70px;bottom:-90px;width:260px;height:260px;background:var(--red);clip-path:polygon(20% 0,100% 40%,0 100%);opacity:.85;animation:floaty 9s ease-in-out infinite alternate}
.elh{font-family:var(--display);font-weight:700;font-size:20px;margin-bottom:26px;position:relative}
.eco-loop ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:28px;position:relative}
.eco-loop li{position:relative;padding-top:20px;border-top:2px solid rgba(255,255,255,.18)}
.eco-loop li::before{content:"";position:absolute;left:0;top:-2px;height:2px;width:100%;background:var(--red);transform-origin:0 50%;animation:loopbar 8s linear infinite;animation-delay:calc(var(--i,0) * 2s)}
@keyframes loopbar{0%{transform:scaleX(0)}25%{transform:scaleX(1)}26%,100%{transform:scaleX(1);opacity:0}}
.eco-loop li>span{font-family:var(--display);font-weight:800;font-size:13px;letter-spacing:.12em;color:#FF6B7F}
.eco-loop b{display:block;font-family:var(--display);font-size:17.5px;margin:8px 0 6px}
.eco-loop p{font-size:14.5px;color:var(--gray-300)}
@media(max-width:960px){.eco-top{grid-template-columns:1fr;gap:36px}.eco-loop ol{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.eco-card dl{grid-template-columns:1fr;gap:12px}.eco-loop{padding:28px 22px}.eco-loop ol{grid-template-columns:1fr}.eco-node{min-width:0;padding:10px 12px}.eco-node small{display:none}.eco-node b{font-size:13px}}
@media(prefers-reduced-motion:reduce){.eco-lines .ring,.eco-lines .flow,.eco-core,.eco-node,.eco-loop::before,.eco-loop li::before{animation:none}.eco-loop li::before{display:none}}
.ei{display:block}
.eco-loop li b{color:#fff}
html[lang=th] .hero.v2 h1{font-size:clamp(36px,6.2vw,80px)}
.hero.v2 h1 em{display:inline-block;white-space:nowrap}
.badge b{white-space:nowrap}
@media(max-width:560px){.badge{font-size:12.5px;text-align:left;gap:8px}html[lang=th] .hero.v2 h1{font-size:34px}}
.about blockquote{padding:44px 150px 44px 44px}
.about blockquote::before{right:-70px;top:-70px;width:210px;height:210px}
@media(max-width:860px){.about blockquote{padding:32px 90px 32px 28px}}
.node{height:auto;min-height:92px;padding:20px 28px}
.node.holding{min-width:0}
.node small{margin-bottom:4px}
.node strong{line-height:1.25}

/* technology -> ecosystem linkage */
.layers{position:relative;gap:26px}
.layers>.layer{position:relative}
.layers>.layer:not(:last-child)::after{content:"";position:absolute;left:150px;bottom:-26px;width:2px;height:26px;background:repeating-linear-gradient(0deg,var(--red) 0 5px,transparent 5px 10px);background-size:2px 10px;animation:feed 0.9s linear infinite}
.layers>.layer:not(:last-child)::before{content:"";position:absolute;left:144px;bottom:-6px;z-index:1;border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:9px solid var(--red)}
@keyframes feed{to{background-position:0 -10px}}
.layer{overflow:visible}
.lk{margin-top:22px;padding:18px 20px;border-radius:14px;background:var(--red-tint);display:grid;grid-template-columns:1fr auto;gap:8px 20px;align-items:center}
.lk-h{grid-column:1/-1;display:flex;align-items:center;gap:9px;font-family:var(--display);font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--red)}
.lk-h i{width:18px;height:2px;background:var(--red);position:relative}
.lk-h i::after{content:"";position:absolute;right:-1px;top:-4px;border-left:7px solid var(--red);border-top:5px solid transparent;border-bottom:5px solid transparent}
.lk p{margin:0;font-size:15.5px;color:var(--ink);max-width:none;font-weight:500}
.lb .lk p{margin-bottom:0;color:var(--ink)}
.who{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.who b{font-family:var(--display);font-size:12px;font-weight:600;padding:5px 11px;border-radius:999px;background:#fff;border:1px solid rgba(200,16,46,.3);color:var(--red);white-space:nowrap}
.layer:nth-child(4) .lk{background:rgba(200,16,46,.18)}
.layer:nth-child(4) .lk-h{color:#FF8696}
.layer:nth-child(4) .lk-h i{background:#FF8696}
.layer:nth-child(4) .lk-h i::after{border-left-color:#FF8696}
.layer:nth-child(4) .lb .lk p{color:#fff}
.layer:nth-child(4) .who b{background:transparent;border-color:rgba(255,255,255,.35);color:#fff}
@media(max-width:860px){.layers>.layer:not(:last-child)::after{left:40px}.layers>.layer:not(:last-child)::before{left:34px}.lk{grid-template-columns:1fr}.who{justify-content:flex-start}}
@media(prefers-reduced-motion:reduce){.layers>.layer::after{animation:none}}

/* products */
.pcard{display:grid;grid-template-columns:1fr 1.15fr;gap:0;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--soft);overflow:hidden;transition:transform .35s,box-shadow .35s}
.pcard:hover{transform:translateY(-6px);box-shadow:0 30px 70px rgba(17,17,20,.14)}
.pc-t{padding:48px 44px;display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.pc-t h2{font-size:clamp(34px,4vw,52px);font-weight:800}
.pc-l{font-family:var(--display);font-weight:600;font-size:19px;color:var(--red)}
.pc-t p{color:var(--gray-700)}
.pc-t .btn{margin-top:10px}
.pmark2{display:flex;align-items:center;gap:12px;font-family:var(--display);font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gray-500)}
.pmark2 .pi{width:38px;height:38px;color:var(--ink)}
.pc-i{background:linear-gradient(135deg,#1F1F21,#3A1016);padding:44px 0 0 44px;display:flex;align-items:flex-end;overflow:hidden}
.pc-i img{width:130%;max-width:none;border-radius:12px 0 0 0;box-shadow:0 30px 80px rgba(0,0,0,.5);transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.pcard:hover .pc-i img{transform:translate(-14px,-10px) scale(1.02)}
.tags{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.tags li{font-family:var(--display);font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;padding:6px 12px;border-radius:999px;border:1px solid var(--line);color:var(--gray-700)}
.tags.dark{margin-top:26px}
.tags.dark li{border-color:rgba(255,255,255,.28);color:#fff}
.pnote{margin-top:24px;padding:26px 30px;border-radius:var(--r);background:#F4F4F6;display:grid;grid-template-columns:auto 1fr auto;gap:8px 24px;align-items:center}
.pnote b{font-family:var(--display)}
.pnote p{color:var(--gray-700);font-size:15.5px}
.pnote a{font-weight:600;color:var(--red);white-space:nowrap}
.why{display:grid;grid-template-columns:1fr 1.1fr;gap:20px}
.why>div{border-radius:var(--r-lg);padding:34px;border:1px solid var(--line);background:#fff;box-shadow:var(--soft)}
.why .a{background:var(--ink);color:#fff;border:0}
.why b{font-family:var(--display);font-size:20px;display:block;margin-bottom:22px}
.why .a b{color:#FF8696;font-size:14px;letter-spacing:.06em}
.q3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.q3 div{background:var(--gray-100);border-radius:14px;padding:16px}
.q3 small{display:block;font-size:12px;color:var(--gray-500)}
.q3 strong{display:block;font-family:var(--display);font-size:32px;font-weight:800;line-height:1.2}
.q3 span{font-size:13px;color:var(--gray-700)}
.why p{margin-top:18px;font-size:14px;color:var(--gray-500)}
.why table{width:100%;border-collapse:collapse;font-size:15px}
.why th{text-align:left;font-family:var(--display);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--gray-500);padding:0 8px 12px 0;font-weight:600}
.why td{padding:13px 8px 13px 0;border-top:1px solid rgba(255,255,255,.14)}
.why td i{font-style:normal;font-size:12.5px;font-weight:600;padding:4px 10px;border-radius:999px;white-space:nowrap}
.why .ok{background:rgba(14,159,110,.2);color:#5FE0B0}
.why .warn{background:rgba(200,16,46,.28);color:#FF8696}
.vid{width:100%;max-width:980px;display:block;margin:0 auto;border-radius:var(--r-lg);background:#000;box-shadow:0 30px 80px rgba(17,17,20,.25);aspect-ratio:16/9}
.srcs{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;align-items:start}
.srcg{background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--soft);padding:24px}
.srcg h3{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--red);margin-bottom:14px;font-weight:700}
.srcg ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.srcg li b{display:block;font-family:var(--display);font-size:16px;margin-bottom:5px}
.srcg li span{display:flex;gap:5px;flex-wrap:wrap}
.srcg li i{font-style:normal;font-size:11.5px;padding:3px 9px;border-radius:999px;background:var(--gray-100);color:var(--gray-700)}
.srcg p{font-size:13.5px;color:var(--gray-700);margin-top:12px}
.feats{display:grid;gap:22px}
.feat{display:grid;grid-template-columns:1fr 1.2fr;gap:0;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--soft);overflow:hidden}
.feat:nth-child(even) .ft{order:2}
.ft{padding:44px 40px}
.fn{font-family:var(--display);font-size:12.5px;font-weight:800;letter-spacing:.16em;color:var(--red)}
.ft h3{font-size:clamp(24px,2.6vw,32px);font-weight:700;margin:12px 0 18px}
.ft ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.ft li{font-size:15.5px;color:var(--gray-700);padding-left:22px;position:relative}
.ft li::before{content:"";position:absolute;left:0;top:.62em;border-left:8px solid var(--red);border-top:4px solid transparent;border-bottom:4px solid transparent}
.fi{background:#F1F1F3;display:flex;align-items:center;padding:32px 0 32px 32px;overflow:hidden}
.feat:nth-child(even) .fi{padding:32px 32px 32px 0;justify-content:flex-end}
.fi img{width:118%;max-width:none;border-radius:10px;box-shadow:0 18px 50px rgba(17,17,20,.16);border:1px solid var(--line)}
.dl{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:860px}
.dl a{display:grid;grid-template-columns:auto 1fr;gap:4px 18px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px 24px;box-shadow:var(--soft);transition:.25s}
.dl a:hover{transform:translateY(-3px);border-color:rgba(200,16,46,.4)}
.dl i{grid-row:1/3;font-style:normal;font-family:var(--display);font-weight:800;font-size:12px;background:var(--red);color:#fff;padding:12px 10px;border-radius:10px}
.dl b{font-family:var(--display);font-size:17px}
.dl span{font-size:13.5px;color:var(--gray-500)}
@media(max-width:900px){.pcard,.why,.feat{grid-template-columns:1fr}.feat:nth-child(even) .ft{order:0}.pc-t,.ft{padding:30px 24px}.pc-i{padding:24px 0 0 24px}.srcs{grid-template-columns:1fr 1fr}.pnote{grid-template-columns:1fr}.dl{grid-template-columns:1fr}.q3{grid-template-columns:1fr}.fi,.feat:nth-child(even) .fi{padding:20px 0 20px 20px;justify-content:flex-start}}
@media(max-width:520px){.srcs{grid-template-columns:1fr}}
.pstats b span{font-size:inherit;color:inherit}
html[lang=th] .dl a[lang=en],html[lang=en] .dl a[lang=th]{display:none}
.lang a{padding:7px 12px;color:var(--gray-500);font:inherit;border-radius:999px}
.lang a[aria-current]{background:var(--ink);color:#fff}
.nav nav .lang a:hover{background:rgba(17,17,20,.06)}
.nav nav .lang a[aria-current]:hover{background:var(--ink);color:#fff}
@media(max-width:860px){.nav nav .lang a{display:block}}
footer.site img,.nav img{width:auto}

/* privacy / documents */
.upd{margin-top:18px;font-size:14px;color:var(--gray-300)}
.docsec{padding-top:72px}
.doc{display:grid;grid-template-columns:260px minmax(0,1fr);gap:64px;align-items:start}
.toc{position:sticky;top:96px;font-size:14.5px}
.toc b{font-family:var(--display);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--gray-500)}
.toc ol{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:2px;counter-reset:t}
.toc a{display:block;padding:7px 12px;border-radius:10px;color:var(--gray-700);transition:.2s}
.toc a:hover{background:var(--red-tint);color:var(--red)}
.doc article{max-width:720px}
.doc h2{font-size:24px;font-weight:700;margin:52px 0 16px;display:flex;align-items:baseline;gap:14px;scroll-margin-top:96px}
.doc article>h2:first-child{margin-top:0}
.doc .dn{font-size:13px;font-weight:800;letter-spacing:.1em;color:var(--red)}
.doc p{color:var(--gray-700);margin-bottom:14px}
.doc article ul{margin:0 0 18px;padding:0;list-style:none;display:grid;gap:9px}
.doc article li{padding-left:22px;position:relative;color:var(--gray-700)}
.doc article li::before{content:"";position:absolute;left:0;top:.62em;border-left:8px solid var(--red);border-top:4px solid transparent;border-bottom:4px solid transparent}
.dcontact{margin-top:8px;padding:24px 26px;border-radius:var(--r);background:#F4F4F6;display:grid;gap:6px}
.dcontact b{font-family:var(--display);font-size:17px}
.dcontact a{color:var(--red);font-weight:600}
.flink{color:var(--gray-700);border-bottom:1px solid var(--gray-300)}
.flink:hover{color:var(--red);border-color:var(--red)}
@media(max-width:860px){.doc{grid-template-columns:1fr;gap:28px}.toc{position:static;padding:18px;border-radius:var(--r);background:#F4F4F6}}

/* FAQ */
.faq{max-width:860px;display:grid;gap:10px}
.faq details{background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--soft);overflow:hidden;transition:border-color .25s}
.faq details[open]{border-color:rgba(200,16,46,.35)}
.faq summary{list-style:none;cursor:pointer;padding:20px 56px 20px 24px;font-family:var(--display);font-weight:600;font-size:17px;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:24px;top:50%;width:10px;height:10px;border-right:2px solid var(--red);border-bottom:2px solid var(--red);transform:translateY(-70%) rotate(45deg);transition:transform .25s}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq details>div{padding:0 24px 22px;color:var(--gray-700);font-size:16px}