@font-face{font-family:"IBM Plex Sans Thai";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/ibm-plex-sans-thai-thai-400-normal.woff2) format("woff2");unicode-range:U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:"IBM Plex Sans Thai";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/ibm-plex-sans-thai-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Sans Thai";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/ibm-plex-sans-thai-thai-600-normal.woff2) format("woff2");unicode-range:U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:"IBM Plex Sans Thai";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/ibm-plex-sans-thai-latin-600-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Kanit";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/kanit-thai-600-normal.woff2) format("woff2");unicode-range:U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:"Kanit";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/kanit-latin-600-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* ธีม A น้ำเงินลึก · สว่าง/มืดตามเครื่อง · ตัวหนังสือตัดพื้น >= 4.5:1 */
:root{
  color-scheme:light dark;
  --bg:#eef3fb; --bg2:#dfe8f7; --card:#ffffff; --line:#cdd9ee;
  --fg:#0b1630; --muted:#33476b; --brand:#0B1F4D;
  --acc1:#2563EB; --acc2:#22D3EE;
  --line-g1:#06893f; --line-g2:#04692f;
  --shadow:0 18px 48px rgba(11,31,77,.16);
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#071533; --bg2:#0B1F4D; --card:#0e2558; --line:#1d3f86;
    --fg:#f2f6ff; --muted:#bccbea; --brand:#ffffff;
    --shadow:0 18px 48px rgba(0,0,0,.45);
  }
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;
  font-family:"IBM Plex Sans Thai",system-ui,sans-serif;font-size:17px;line-height:1.65;
  color:var(--fg);background:radial-gradient(1200px 600px at 50% -10%,var(--bg2),var(--bg) 70%) fixed,var(--bg);
  overflow-x:hidden;-webkit-text-size-adjust:100%;
}
a{color:inherit}
.top{width:100%;max-width:1100px;margin:0 auto;padding:20px 16px}
.logo{display:inline-flex;align-items:center;gap:10px;font-family:"Kanit",sans-serif;font-weight:600;font-size:26px;letter-spacing:.06em;color:var(--brand);text-decoration:none}
.logo picture,.logo img{display:block;width:44px;height:44px;flex:none}
.logo .hub{background:linear-gradient(90deg,var(--acc1),var(--acc2));-webkit-background-clip:text;background-clip:text;color:transparent}
main{flex:1;display:flex;align-items:center;justify-content:center;padding:24px 16px 48px}
.card{
  width:100%;max-width:720px;text-align:center;background:var(--card);border:1px solid var(--line);
  border-radius:24px;padding:48px 32px;box-shadow:var(--shadow);position:relative;overflow:hidden;
}
.card::before{content:"";position:absolute;inset:0 0 auto 0;height:5px;background:linear-gradient(90deg,var(--acc1),var(--acc2))}
.badge{
  display:inline-block;margin:0 0 20px;padding:6px 16px;border-radius:999px;font-weight:600;font-size:15px;
  color:#ffffff;background:linear-gradient(90deg,#1d4ed8,#0e7490);
}
h1{font-family:"Kanit",sans-serif;font-weight:600;font-size:clamp(26px,4.6vw,40px);line-height:1.35;margin:0 0 16px;overflow-wrap:break-word}
.lead{margin:0 auto 32px;max-width:34em;color:var(--muted);font-size:clamp(16px,2.2vw,18px)}
.btn{
  position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:52px;max-width:100%;padding:12px 28px;border-radius:14px;text-decoration:none;
  font-weight:600;font-size:18px;color:#ffffff;
  background:linear-gradient(135deg,var(--line-g1),var(--line-g2));
  box-shadow:0 8px 22px rgba(4,105,47,.32);transition:transform .15s ease,box-shadow .15s ease;
}
.btn svg{flex:none;width:24px;height:24px}
.btn:hover{transform:translateY(-1px);box-shadow:0 12px 26px rgba(4,105,47,.4)}
.btn:focus-visible{outline:3px solid var(--acc2);outline-offset:3px}
/* เอฟเฟคสายฟ้าวิ่ง */
.btn::after{
  content:"";position:absolute;top:-20%;bottom:-20%;left:-40%;width:30%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);
  transform:skewX(-20deg);animation:bolt 3.2s ease-in-out infinite;
}
@keyframes bolt{0%,55%{left:-40%}100%{left:130%}}
@media (prefers-reduced-motion:reduce){.btn::after{animation:none;display:none}.btn{transition:none}}
.home{font-weight:600;color:var(--fg)}
footer{padding:20px 16px 28px;text-align:center;font-size:14px;color:var(--muted)}
@media (max-width:480px){
  .card{padding:36px 20px;border-radius:20px}
  .btn{width:100%;padding:12px 18px;font-size:17px}
}
.nw{display:inline-block;white-space:nowrap}