body{margin:0;background:#EEF1F5}
a{color:#1A4FA0}a:hover{color:#0B2A5B}
.h{font-family:'Anuphan',sans-serif}
.navlinks{display:flex}
.mbar{display:none}
.fab{display:flex}
details summary{list-style:none;cursor:pointer}
details summary::-webkit-details-marker{display:none}
details[open] .chev{transform:rotate(180deg)}
@media (max-width:820px){.navlinks{display:none}.mbar{display:flex}.fab{display:none}}
html{scroll-behavior:smooth}
section[id]{scroll-margin-top:96px}
@view-transition{navigation:auto}
.pagein{animation:pageIn .45s ease both}
@keyframes pageIn{from{opacity:0}to{opacity:1}}
.hidesm{display:flex}
.showsm{display:none}
@media (max-width:820px){.hidesm{display:none}.showsm{display:flex}}
.menu-panel{animation:menuIn .22s ease both}
@keyframes menuIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.menu-link{transition:background .15s ease}
.menu-link:hover{background:rgba(255,255,255,0.10)}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}.pagein,.menu-panel{animation:none}}
.bento{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:210px;grid-auto-flow:dense;gap:16px}
@media (max-width:820px){.bento{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:170px;gap:12px}}
.bg-dark{background:radial-gradient(640px 440px at 88% 18%, rgba(91,180,232,0.42), transparent 70%),radial-gradient(560px 420px at 8% 92%, rgba(31,111,209,0.55), transparent 70%),#0A2550}
@media (max-width:1100px){.navlinks{display:none!important}.hidesm{display:none!important}.showsm{display:flex!important}}
@media (max-width:420px){.coname{font-size:10.5px!important;white-space:normal!important}}
.navdrop-menu{display:none}
.navdrop:hover .navdrop-menu,.navdrop:focus-within .navdrop-menu{display:flex}
.navdrop-menu a:hover{background:rgba(255,255,255,0.10)}
.bg-hero-light{background:radial-gradient(640px 460px at 92% 8%, rgba(91,180,232,0.22), transparent 70%),radial-gradient(560px 420px at 4% 96%, rgba(174,184,198,0.42), transparent 70%),radial-gradient(500px 360px at 55% 40%, rgba(255,255,255,0.95), transparent 70%),linear-gradient(180deg,#FFFFFF 0%,#EDF1F6 100%)}
.glass-light{border:1.5px solid transparent;background:linear-gradient(rgba(255,255,255,0.82),rgba(255,255,255,0.82)) padding-box,linear-gradient(135deg,#FFFFFF 0%,#9AA6B6 35%,#FFFFFF 55%,#7F8C9E 100%) border-box;-webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%);box-shadow:0 10px 30px rgba(11,42,91,0.12), inset 0 1px 0 #FFFFFF}
.steel-text{background:linear-gradient(180deg,#2E4466 0%,#6F819C 48%,#24385A 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.bg-light{background:radial-gradient(560px 380px at 10% 12%, rgba(91,180,232,0.30), transparent 70%),radial-gradient(520px 380px at 92% 88%, rgba(174,184,198,0.55), transparent 70%),linear-gradient(180deg,#F4F6F9,#E6EAF0)}
.bg-soft{background:radial-gradient(520px 360px at 90% 10%, rgba(124,196,240,0.28), transparent 70%),radial-gradient(480px 340px at 6% 90%, rgba(174,184,198,0.40), transparent 70%),#F6F8FB}
.bg-red{background:radial-gradient(520px 380px at 85% 15%, rgba(255,140,150,0.40), transparent 70%),radial-gradient(520px 400px at 10% 95%, rgba(110,10,25,0.55), transparent 70%),#C8202F}
.glass-m{border:1.5px solid transparent;background:linear-gradient(rgba(255,255,255,0.74),rgba(255,255,255,0.74)) padding-box,linear-gradient(135deg,#FFFFFF 0%,#9AA6B6 35%,#FFFFFF 55%,#7F8C9E 100%) border-box;-webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%);box-shadow:0 12px 36px rgba(11,42,91,0.14), inset 0 1px 0 rgba(255,255,255,0.95)}
.glass-md{border:1.5px solid transparent;background:linear-gradient(rgba(14,44,92,0.62),rgba(14,44,92,0.62)) padding-box,linear-gradient(135deg,rgba(255,255,255,0.85) 0%,rgba(150,165,185,0.35) 35%,rgba(255,255,255,0.75) 55%,rgba(120,135,155,0.3) 100%) border-box;-webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%);box-shadow:0 14px 44px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.3)}
.solid-navy{background:linear-gradient(rgba(11,42,91,0.92),rgba(11,42,91,0.92)) padding-box,linear-gradient(135deg,#FFFFFF 0%,#8796AB 35%,#E6EBF1 55%,#5D6C82 100%) border-box}
.metal{background:linear-gradient(135deg,#FDFEFF 0%,#CDD5DF 28%,#FFFFFF 50%,#A3AEBD 78%,#E8ECF1 100%);box-shadow:inset 0 1px 0 #FFFFFF, inset 0 -1px 0 rgba(60,75,95,0.25), 0 3px 10px rgba(11,42,91,0.18)}
.metal-text-d{background:linear-gradient(180deg,#FFFFFF 0%,#D9E0E9 45%,#9DAABB 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.metal-text-l{background:linear-gradient(180deg,#0B2A5B 0%,#3E5578 50%,#0B2A5B 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.metal-line{height:2px;border:0;margin:0;background:linear-gradient(90deg,transparent,#AEB8C6 20%,#FFFFFF 50%,#AEB8C6 80%,transparent)}
.ph{background:repeating-linear-gradient(135deg,rgba(174,184,198,0.18) 0 10px,rgba(255,255,255,0.25) 10px 20px);border:1px dashed #9AA6B6}
.shine{position:relative;overflow:hidden}
.shine::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,0.6),transparent);transform:skewX(-20deg);animation:shine 5s ease-in-out infinite;pointer-events:none}
@keyframes shine{0%{left:-60%}30%,100%{left:140%}}
.cta{transition:transform .2s ease, filter .2s ease}
.cta:hover{transform:translateY(-2px);filter:brightness(0.9)}
.cta:active{transform:translateY(0) scale(0.98)}
.cta-shine{position:relative;overflow:hidden;isolation:isolate}
.cta-shine::after{content:"";position:absolute;top:0;left:-75%;width:45%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,0.55),transparent);transform:skewX(-20deg);animation:ctaShine 3s ease-in-out infinite;pointer-events:none}
.cta-shine.alt::after{animation-delay:1.5s}
.cta-shine.on-light::after{background:linear-gradient(100deg,transparent,rgba(110,165,230,0.45),transparent)}
@keyframes ctaShine{0%{left:-75%}30%,100%{left:135%}}
@media (prefers-reduced-motion: reduce){.shine::after,.cta-shine::after{animation:none;display:none}.cta{transition:none}.cta:hover{transform:none}}
.pstrip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.pstrip>figure{margin:0}
@media (max-width:820px){.pstrip{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}}
.headimg{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:end}
@media (max-width:820px){.headimg{grid-template-columns:minmax(0,1fr);gap:24px}}
.wideimg{height:260px}
@media (max-width:820px){.wideimg{height:200px}}
.okglow{background:radial-gradient(circle at 35% 30%,#86EFAC 0%,#22C55E 55%,#16A34A 100%);color:#FFFFFF;box-shadow:0 0 0 3px rgba(34,197,94,0.18),0 0 16px rgba(34,197,94,0.55),inset 0 1px 0 rgba(255,255,255,0.55)}
.faqlist{padding:8px 24px}
@media (max-width:820px){.faqlist{padding:4px 16px}}
.xsell{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
@media (max-width:820px){.xsell{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}}
.bub{position:absolute;border-radius:50%;pointer-events:none;background:radial-gradient(circle at 32% 28%,rgba(255,255,255,0.95) 0 5%,rgba(255,255,255,0.35) 12%,rgba(200,226,246,0.10) 42%,rgba(140,190,230,0.16) 68%,rgba(255,255,255,0.65) 92%,rgba(255,255,255,0.15) 100%);border:1px solid rgba(255,255,255,0.75);box-shadow:inset -6px -10px 18px rgba(120,170,215,0.18),inset 4px 6px 12px rgba(255,255,255,0.6),0 6px 18px rgba(11,42,91,0.06)}
.bub::after{content:"";position:absolute;left:58%;top:62%;width:14%;height:9%;border-radius:50%;background:rgba(255,255,255,0.55);transform:rotate(-30deg)}
@media (max-width:820px){.bub.dk{display:none}}

/* ---- mobile menu (static export) ---- */
.menu-panel,.menu-overlay{display:none}
body.menu-open .menu-panel{display:flex}
body.menu-open .menu-overlay{display:block}
.ico-open,.ico-close{display:inline-flex}
.ico-close{display:none}
body.menu-open .ico-open{display:none}
body.menu-open .ico-close{display:inline-flex}
@media (min-width:821px){body.menu-open .menu-panel,body.menu-open .menu-overlay{display:none}}
/* ---- page fade-out fallback for browsers without view transitions ---- */
body{transition:opacity .3s ease}
body.page-leave{opacity:0}
@media (prefers-reduced-motion: reduce){body{transition:none}}