:root{--ink:#1a1f2e;--title:#1e3a8a;--paper:#f4f5f8;--card:#fff;--line:#e3e6ec;--muted:#6b7385;--blue:#2563eb;--ok:#15803d;
  --sky:#dbe8fb;--sky-t:#12468f;--sky2:#eaf5fc;--rose:#fae1e1;--rose-t:#ad2e2e;--green:#e0f1e4;--green-t:#24663a;
  --butter:#faf2cf;--butter-t:#80630f;--lilac:#ece5f9;--lilac-t:#6a3fa8;--amber:var(--title);--amber2:var(--green-t)}
@media (prefers-color-scheme:dark){:root{--ink:#e6e9f0;--title:#a9c8f5;--paper:#0f131c;--card:#171c27;--line:#2a3142;--muted:#8f98ab;--blue:#93adf7;--ok:#4ade80;
  --sky:#202d44;--sky-t:#a9c8f5;--sky2:#20303c;--rose:#3a2526;--rose-t:#f2bcbc;--green:#1f332b;--green-t:#a6e2c8;
  --butter:#332d1b;--butter-t:#eeda9b;--lilac:#2f2638;--lilac-t:#d9bdf0}}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:"IBM Plex Sans Thai","Sarabun",system-ui,sans-serif;color:var(--ink);background:var(--paper);line-height:1.7;font-size:17px}
a{color:var(--blue)}
.wrap{max-width:1080px;margin:0 auto;padding:0 22px}
header.top{position:sticky;top:0;z-index:5;background:color-mix(in srgb,var(--card) 94%,transparent);backdrop-filter:blur(6px);color:var(--ink);border-bottom:1px solid var(--line)}
header.top .wrap{display:flex;align-items:center;gap:14px;height:64px}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font-weight:700;letter-spacing:.3px}
.brand img{width:38px;height:38px}
.brand small{display:block;font-weight:400;font-size:11.5px;color:var(--muted);letter-spacing:.6px;margin-top:-4px}
nav.menu{margin-left:auto;display:flex;gap:6px;font-size:15px}
nav.menu a{color:var(--muted);text-decoration:none;padding:5px 11px;border-radius:10px}
nav.menu a:hover{background:var(--sky);color:var(--sky-t)}
.hero{background:radial-gradient(1000px 460px at 85% -10%,var(--lilac) 0,transparent 60%),linear-gradient(180deg,var(--sky) 0,var(--sky2) 100%);color:var(--ink);padding:78px 0 92px;overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:1.25fr .75fr;gap:40px;align-items:center}
.eyebrow{display:inline-block;font-size:13px;letter-spacing:1.6px;text-transform:uppercase;color:var(--sky-t);background:var(--card);padding:3px 12px;border-radius:99px}
.hero h1{font-size:50px;line-height:1.15;margin:18px 0 6px;font-weight:700;letter-spacing:.2px;color:var(--title)}
.hero h1 span{color:var(--sky-t);opacity:.75}
.hero .tag{font-size:19px;color:var(--muted);margin:0 0 18px;letter-spacing:.4px}
.hero p.lead{font-size:20px;color:var(--ink);max-width:560px;margin:0 0 30px}
.cta{display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:8px;padding:13px 22px;border-radius:12px;font-weight:600;text-decoration:none;font-size:16px;border:0;cursor:pointer;font-family:inherit}
.btn.primary{background:var(--title);color:#fff}
.btn.primary:hover{filter:brightness(1.12)}
@media (prefers-color-scheme:dark){.btn.primary{color:#0f131c}}
.btn.ghost{background:var(--card);color:var(--ink);border:1.5px solid var(--line)}
.btn.ghost:hover{border-color:var(--sky-t)}
.btn.line{background:#06c755;color:#fff}
.btn[aria-disabled=true]{opacity:.6;cursor:default;pointer-events:none}
.soon{display:block;font-size:13.5px;color:var(--muted);margin-top:12px}
.hero .mark{justify-self:center;width:290px;height:290px;border-radius:40px;background:var(--card);border:1px solid var(--line);display:grid;place-items:center;box-shadow:0 30px 70px rgba(18,70,143,.14)}
.hero .mark img{width:230px;height:230px}
section{padding:78px 0}
section h2{font-size:34px;margin:0 0 10px;line-height:1.25;color:var(--title)}
section .sub{color:var(--muted);margin:0 0 36px;max-width:680px}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:24px}
.card .ic{width:44px;height:44px;border-radius:13px;background:var(--sky);display:grid;place-items:center;font-size:21px;margin-bottom:12px}
.grid .card:nth-child(6n+2) .ic{background:var(--rose)}
.grid .card:nth-child(6n+3) .ic{background:var(--green)}
.grid .card:nth-child(6n+4) .ic{background:var(--butter)}
.grid .card:nth-child(6n+5) .ic{background:var(--lilac)}
.grid .card:nth-child(6n) .ic{background:var(--sky2)}
.card h3{margin:0 0 6px;font-size:19px}
.card p{margin:0;color:var(--muted);font-size:15.5px}
.card.star{border-color:transparent;background:var(--sky);box-shadow:none}
.card.star .ic{background:var(--card)!important}
.card.star h3{color:var(--sky-t)}
.badge{display:inline-block;font-size:12px;background:var(--card);color:var(--sky-t);border-radius:99px;padding:1px 10px;margin-left:6px;vertical-align:middle;font-weight:600}
.wide{display:grid;grid-template-columns:1.15fr 1fr;gap:24px;align-items:center;background:var(--butter);border-radius:18px;padding:24px 28px;margin:0 0 18px}
.wide .ic{width:44px;height:44px;border-radius:13px;background:var(--card);display:grid;place-items:center;font-size:21px;margin-bottom:12px}
.wide h3{margin:0 0 6px;font-size:21px;color:var(--butter-t)}
.wide .badge{color:var(--butter-t)}
.wide p{margin:0;color:var(--muted);font-size:15.5px}
.wide ol{list-style:none;counter-reset:w;padding:0;margin:0;display:grid;gap:8px}
.wide li{counter-increment:w;background:var(--card);border-radius:12px;padding:10px 14px;font-size:15.5px;display:flex;gap:10px;align-items:center}
.wide li::before{content:counter(w);flex:none;display:inline-grid;place-items:center;width:26px;height:26px;border-radius:8px;background:var(--butter);color:var(--butter-t);font-weight:700}
@media (max-width:860px){.wide{grid-template-columns:1fr;padding:22px 18px}}
.dark{background:var(--green);color:var(--ink)}
.dark h2{color:var(--green-t)}
.dark .sub{color:var(--muted)}
.dark .card{background:var(--card);border-color:transparent}
.dark .card p{color:var(--muted)}
.dark .card .ic{background:var(--green)!important}
.price{display:grid;grid-template-columns:1.2fr 1fr;gap:18px;align-items:stretch}
.plan{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:30px}
.plan.main{border:0;background:var(--butter)}
.plan.main h3,.plan.main .amt{color:var(--butter-t)}
.plan h3{margin:0;font-size:21px}
.amt{font-size:46px;font-weight:700;margin:6px 0 0}
.amt small{font-size:17px;font-weight:400;color:var(--muted)}
.promo{display:inline-block;margin:12px 0 0;font-size:13.5px;font-weight:700;color:var(--rose-t);background:var(--rose);border-radius:99px;padding:2px 12px}
.was{font-size:15px;color:var(--muted);margin:2px 0 0}
.was s{text-decoration-thickness:1.5px}
.plan ul{padding-left:20px;margin:16px 0 0}
.plan li{margin:4px 0}
table.ai{width:100%;border-collapse:collapse;margin-top:12px;font-size:16px}
table.ai td{padding:10px 4px;border-bottom:1px solid var(--line)}
table.ai td:last-child{text-align:right;font-weight:600;white-space:nowrap;color:var(--lilac-t)}
.note{font-size:14px;color:var(--muted);margin-top:14px}
.steps{counter-reset:s;display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.step{position:relative;padding:22px 20px 20px;background:var(--card);border:1px solid var(--line);border-radius:16px}
.step::before{counter-increment:s;content:counter(s);position:absolute;top:-14px;left:18px;width:30px;height:30px;border-radius:10px;background:var(--sky);color:var(--sky-t);font-weight:700;display:grid;place-items:center}
.step h3{font-size:17px;margin:4px 0 4px}
.step p{margin:0;font-size:15px;color:var(--muted)}
details{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 18px;margin-bottom:10px}
details[open]{background:var(--sky2);border-color:transparent}
details summary{cursor:pointer;font-weight:600}
details p{margin:8px 0 0;color:var(--muted)}
.contact{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.contact .card{display:flex;flex-direction:column;gap:10px}
.contact .card:first-child{background:var(--green);border-color:transparent}
.contact .card:last-child{background:var(--lilac);border-color:transparent}
.contact .card strong{font-size:20px;word-break:break-all}
footer{background:var(--card);border-top:1px solid var(--line);color:var(--muted);font-size:14px;padding:30px 0}
footer .wrap{display:flex;gap:18px;flex-wrap:wrap;align-items:center}
footer a{color:var(--ink);text-decoration:none}
footer a:hover{color:var(--blue)}
footer .sp{margin-left:auto}
.doc{max-width:820px;margin:0 auto;padding:56px 22px 80px}
.doc h1{font-size:34px;margin:0 0 4px;color:var(--title)}
.doc .date{color:var(--muted);margin:0 0 30px}
.doc h2{font-size:22px;margin:34px 0 8px;color:var(--sky-t)}
.doc table{width:100%;border-collapse:collapse;font-size:15.5px;margin:10px 0}
.doc th,.doc td{border:1px solid var(--line);padding:9px 10px;text-align:left;vertical-align:top;background:var(--card)}
.doc th{background:var(--sky);color:var(--sky-t)}
@media (max-width:860px){
  .hero .wrap,.price,.contact{grid-template-columns:1fr}
  .hero .mark{display:none}
  .hero h1{font-size:38px}
  .grid{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr 1fr;row-gap:30px}
  nav.menu{display:none}
}
@media (max-width:560px){.grid,.steps{grid-template-columns:1fr}section{padding:56px 0}}

.hero-ai{display:inline-block;font-size:16px;font-weight:600;color:var(--lilac-t);background:var(--card);border-radius:12px;padding:8px 14px;margin:-12px 0 24px}
.ai-sec{background:var(--lilac)}
.ai-sec .eyebrow{color:var(--lilac-t)}
.ai-sec h2{margin-top:14px;color:var(--lilac-t)}
.flow{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.fstep{background:var(--card);border-radius:16px;padding:24px;position:relative}
.fstep .ic{width:48px;height:48px;border-radius:14px;background:var(--lilac);display:grid;place-items:center;font-size:23px;margin-bottom:12px}
.fstep:nth-child(2) .ic{background:var(--butter)}
.fstep:nth-child(3) .ic{background:var(--green)}
.fstep h3{margin:0 0 6px;font-size:19px}
.fstep p{margin:0;color:var(--muted);font-size:15.5px}
.ai-note{margin:22px 0 0;font-size:15px;color:var(--ink);background:color-mix(in srgb,var(--card) 60%,transparent);border-radius:12px;padding:12px 16px}
@media (max-width:860px){.flow{grid-template-columns:1fr}}
.voice{background:var(--card);border-radius:18px;padding:28px 30px;margin:0 0 18px;box-shadow:0 12px 34px rgba(106,63,168,.10)}
.voice h3{margin:0 0 8px;font-size:24px;color:var(--lilac-t);line-height:1.35}
.voice .vlead{margin:0 0 18px;font-size:17px;max-width:820px}
.voice ol{list-style:none;counter-reset:v;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.voice li{counter-increment:v;background:var(--lilac);border-radius:14px;padding:16px 16px 14px;font-size:15.5px;color:var(--muted)}
.voice li::before{content:counter(v);display:inline-grid;place-items:center;width:28px;height:28px;border-radius:9px;background:var(--card);color:var(--lilac-t);font-weight:700;margin-bottom:8px}
.voice li b{display:block;color:var(--ink);font-size:16.5px;margin-bottom:2px}
.voice .vend{margin:16px 0 0;font-weight:600;color:var(--green-t)}
@media (max-width:860px){.voice ol{grid-template-columns:1fr}.voice{padding:22px 18px}}