@font-face {
  font-family: 'Noto Sans Thai';
  src: url('assets/NotoSansThai.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
:root {
  --blue: #0967db;
  --ink: #172b40;
  --muted: #65768a;
  --line: #e2eaf3;
  --mint: #138c83;
}
body {font-family:'Noto Sans Thai',Tahoma,sans-serif;color:var(--ink);-webkit-font-smoothing:antialiased;line-height:1.8}
button,input,select,textarea {font-family:inherit}
h1,h2,h3,h4 {font-weight:650;letter-spacing:0}
h2 {font-size:36px;line-height:1.45}
h3 {font-size:23px}
.header {background:#ffffffee;border-color:#edf1f6}
.nav-row {gap:28px;min-height:88px}
.brand img {width:188px}
.header nav {gap:26px;margin-left:auto;font-size:13px;font-weight:500}
.login {padding-left:22px}
.nav-actions {display:flex;gap:10px;align-items:center;flex-shrink:0}
.nav-quote {font-size:13px;padding:11px 17px;min-height:44px;gap:16px}
.button {border-radius:7px;font-weight:600;transition:background .18s,box-shadow .18s,transform .18s}
.primary {box-shadow:0 4px 12px #0967db18}
.button:hover {transform:translateY(-2px);box-shadow:0 7px 18px #0967db1c}
.button:active {transform:translateY(0)}
.secondary {background:#ffffffd9;color:var(--blue);border:1px solid #b0cff6}
.secondary:hover {background:#f1f7ff}
.hero {min-height:565px}
.hero-content {padding-top:40px;padding-bottom:44px}
.hero h1 {font-size:84px;font-weight:750;line-height:1.05;margin-bottom:20px}
.hero h2 {font-size:40px;font-weight:650;line-height:1.4;max-width:580px}
.accent-period {color:var(--blue)}
.hero p {font-size:17px;line-height:1.9;max-width:520px;color:#5d6e80;margin-top:20px}
.hero .actions {gap:12px;margin-top:28px}
.hero .button {min-width:165px;padding:13px 24px}
.explore-link {display:inline-flex;gap:18px;align-items:center;font-size:12px;color:var(--muted);margin-top:26px}
.explore-link:hover {color:var(--blue)}
.explore-link span {transition:transform .2s}
.explore-link:hover span {transform:translateY(3px)}
.capability-band {border-block:1px solid var(--line);background:white}
.capability-inner {display:flex;align-items:center;gap:28px;min-height:72px;font-size:13px}
.capability-inner>span {color:var(--muted);margin-right:auto;font-size:12px}
.capability-inner p {font-weight:600}
.capability-inner i {width:4px;height:4px;background:#96c4c3;border-radius:50%}
.capability-inner a {color:var(--blue);font-size:12px;margin-left:auto}
.capability-inner a span {margin-left:12px}
.section {padding-block:78px}
.section-heading {margin-bottom:38px}
.overline {color:var(--mint);font-size:12px;margin-bottom:10px;font-weight:600}
.section-intro {font-size:14px;font-weight:400;color:var(--muted);line-height:1.95}
.product-layout {gap:62px;grid-template-columns:1fr 1.1fr}
.tabs {border:1px solid var(--line);padding:4px;gap:4px;background:#f4f7fb;border-radius:7px;align-items:stretch}
.tabs button {flex:1;border:0;border-radius:4px;font-weight:500;font-size:14px;padding:10px 12px;transition:background .2s,color .2s,box-shadow .2s;white-space:nowrap}
.tabs button[aria-selected=true] {background:var(--blue);color:white;box-shadow:0 3px 8px #0967db24}
.tabs button:hover:not([aria-selected=true]) {background:#e4ecf6}
#module-panel {min-height:282px}
#module-title {font-size:23px;line-height:1.55}
#module-description {font-size:15px;line-height:1.9}
.feature-list li {font-size:14px;margin:12px 0}
.feature-list li:before {color:var(--mint)}
.product-preview {border-color:#dfe8f4;box-shadow:0 16px 38px #243f6510;background:#f6f9fc}
.preview-top {padding:16px 22px}
.preview-top b {font-weight:700}
.sample {color:var(--mint);font-size:11px}
.preview-body {padding:24px}
.preview-body h3 {font-size:23px;margin:6px 0 20px}
.preview-label {color:#728ca6;font-size:10px;font-weight:500}
.workflow {gap:8px}
.workflow>button {position:relative;border:1px solid #dfe7f2;background:white;border-radius:5px;text-align:left;min-height:122px;padding:16px 12px;color:var(--ink);transition:border-color .18s,background .18s}
.workflow>button[aria-pressed=true] {background:#edf5ff;border-color:#82b4f4}
.workflow>button:hover {border-color:var(--blue)}
.workflow span {font-size:19px;margin-bottom:10px;line-height:1.4}
.workflow b {font-size:13px;font-weight:600}
.workflow small {font-size:10px}
.workflow-detail {padding:20px 0 0;min-height:123px}
.detail-kicker {font-size:10px;color:var(--mint);font-weight:600}
.workflow-detail h4 {font-size:15px;margin:5px 0 6px}
.workflow-detail p {font-size:12px;color:var(--muted);line-height:1.8;margin:0}
.preview-note {font-size:10px;margin-top:12px;padding-top:15px;border-top:1px solid var(--line)}
.status-dot {background:var(--mint)}
.other-modules {margin-top:32px}
.other-modules summary {font-weight:500;font-size:14px}
.module-list span {color:var(--ink);font-size:13px}
.approach {background:#f7f9fc}
.principles {gap:42px;margin-top:40px}
.principles article {padding-top:24px;border-color:#d5e3ee}
.index {font-size:11px;color:var(--mint)}
.principles h3 {font-size:23px;margin-top:12px}
.principles p {font-size:14px;line-height:1.9}
.steps {gap:42px;margin-block:42px}
.steps h3 {font-size:21px}
.steps p {font-size:13px;line-height:1.9}
.steps li>span {background:var(--blue);color:white;font-size:17px;box-shadow:0 4px 12px #0967db20}
.faq summary {font-weight:500}
.faq details {padding-block:21px}
.faq p {font-size:13px;line-height:1.95}
.contact-band {padding-block:60px;background:#0861ce}
.contact-inner {gap:48px}
.contact-label {font-size:12px;color:#bbdaff;margin:0 0 12px!important}
.contact-inner h2 {font-size:31px}
.contact-inner p {font-size:14px;line-height:1.9}
.contact-stages {display:flex;flex-wrap:wrap;gap:24px;margin-top:24px;font-size:11px;color:#d5e8ff}
.contact-actions {display:flex;flex-direction:column;gap:12px;min-width:218px}
.outline-light {background:transparent;border:1px solid #ffffff70;color:white}
.outline-light:hover {background:#ffffff12}
.footer {padding-top:42px}
.footer p {font-size:11px}
.footer a {font-size:12px}
.footer a:hover {color:var(--blue)}
.footer .preview-disclosure {font-size:10px}
dialog {width:min(760px,calc(100% - 32px));padding:32px;border:1px solid #edf2f8;box-shadow:0 24px 90px #102a4830;border-radius:8px}
dialog[open] {animation:dialog-enter .22s ease-out}
dialog::backdrop {background:#172b4075;backdrop-filter:blur(8px)}
.dialog-header h2 {font-size:28px;font-weight:600}
.form-notice {margin:18px 0;color:#5c7087;font-size:12px;background:#f4f8fd;border-left:2px solid #8eb8eb;padding:10px 14px}
.form-progress {display:grid;grid-template-columns:repeat(3,1fr);list-style:none;margin:24px 0 28px;padding:0;gap:12px}
.form-progress li {display:flex;align-items:center;gap:9px;font-size:12px;color:#8191a2;border-bottom:2px solid #e8edf4;padding-bottom:12px}
.form-progress span {display:grid;place-items:center;width:24px;height:24px;flex-shrink:0;background:#edf2f7;color:#778ba0;border-radius:50%;font-size:11px;font-weight:600}
.form-progress [aria-current=step] {color:var(--blue);border-color:var(--blue)}
.form-progress [aria-current=step] span {background:var(--blue);color:white}
.form-progress li.complete {border-color:#94cfc5;color:var(--mint)}
.form-progress li.complete span {color:var(--mint);background:#e6f5f0}
#needs-title,#contact-title {font-size:22px}
.step-subtitle {font-size:13px;color:var(--muted);margin:6px 0 20px}
form label {font-size:13px;font-weight:500}
.form-grid {gap:18px}
input,select,textarea {font-size:14px;min-height:46px;border-color:#d9e2ed;padding:11px 12px;border-radius:5px;transition:border-color .15s,box-shadow .15s}
input:hover,select:hover,textarea:hover {border-color:#a5bfdc}
input:focus,select:focus,textarea:focus {border-color:var(--blue);box-shadow:0 0 0 3px #0967db0c}
.choices {display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:0}
.choices label {font-size:12px;gap:8px;padding:11px 10px;border:1px solid #e0e7f0;border-radius:5px;cursor:pointer;background:white;transition:background .18s,border-color .18s;min-height:46px}
.choices label:has(input:checked) {background:#eef5ff;border-color:#7dace9;color:#085dc7}
.choices label:hover {border-color:#7dace9}
.choices input {width:16px;height:16px;min-height:16px;flex-shrink:0}
fieldset {margin:0 0 22px}
.migration-field {margin-top:18px}
.form-bottom {display:flex;align-items:center;justify-content:space-between;gap:16px;border-top:1px solid var(--line);margin-top:28px;padding-top:20px}
.form-bottom>p {font-size:11px;color:var(--muted)}
.form-bottom .button {font-size:13px;min-height:45px;padding:11px 20px}
#form-error {color:#b73737;font-size:12px;margin-top:12px}
.sr-only {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.content-enter {animation:content-enter .24s ease-out}
@keyframes content-enter {from{opacity:.2;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@keyframes dialog-enter {from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@media(min-width:1600px){.hero{background-size:1600px auto}.hero-content{padding-block:48px}}
@media(max-width:1100px){
  .nav-row{gap:18px}.brand img{width:160px}.header nav{gap:18px;font-size:12px}.login{padding-left:16px}.nav-quote{padding:10px 13px;font-size:12px;gap:8px}
  .hero h1{font-size:72px}.hero h2{font-size:35px}.hero p{font-size:15px}.hero{min-height:540px}.product-layout{gap:32px}.section-heading{gap:30px}h2{font-size:30px}
  .capability-inner{gap:18px}.capability-inner>span{font-size:11px}.capability-inner a{font-size:11px}.section-intro{font-size:12px}
  .tabs button{font-size:13px;padding:9px 8px}#module-title{font-size:21px}#module-description{font-size:14px}.contact-inner h2{font-size:27px}
}
@media(max-width:900px){
  .header nav{display:none;position:absolute;left:0;right:0;top:88px;flex-direction:column;align-items:stretch;gap:0;background:white;border-bottom:1px solid var(--line);padding:10px 24px 20px;box-shadow:0 16px 24px #18304c0c}
  .header nav.open{display:flex}.header nav a{padding:12px;font-size:14px}.header .login{border:0}.menu-toggle{display:block;padding:10px 12px;font-size:12px}.nav-actions{margin-left:auto}
  .capability-inner>span{display:none}.capability-inner a{margin-left:auto}.capability-inner{justify-content:space-between}.contact-inner{gap:24px}.contact-actions{min-width:190px}
}
@media(max-width:720px){
  .container{width:calc(100% - 40px)}.nav-row{min-height:76px;gap:12px}.header nav{top:76px}.brand img{width:130px}.nav-actions{gap:6px}.nav-quote{font-size:11px;padding:9px 11px;min-height:39px;gap:5px}.nav-quote span{display:none}.menu-toggle{font-size:11px;padding:9px 8px;min-height:39px}
  .hero{min-height:640px;background-size:auto 300px;background-position:right bottom}.hero-content{padding-top:34px;padding-bottom:268px}.hero h1{font-size:55px;margin-bottom:16px}.hero h2{font-size:30px;line-height:1.45}.hero p{font-size:14px;max-width:350px;line-height:1.9;margin-top:16px}
  .hero .actions{margin-top:23px;gap:10px}.hero .button{font-size:13px;padding:12px 17px;min-width:0;min-height:46px}.explore-link{font-size:11px;margin-top:18px;gap:14px}.image-caption{font-size:9px}
  .capability-inner{min-height:62px;gap:8px;font-size:12px;justify-content:space-between}.capability-inner a{display:none}.capability-inner i{width:3px;height:3px}
  .section{padding-block:48px}h2{font-size:28px}.section-heading{margin-bottom:27px}.section-intro{font-size:13px}.product-layout{gap:24px;grid-template-columns:1fr}.overline{font-size:11px}
  .tabs{gap:3px;padding:3px}.tabs button{font-size:13px;padding:10px 6px}.feature-list li{font-size:13px}#module-panel{min-height:267px}#module-title{font-size:22px}
  .product-preview{box-shadow:0 9px 24px #243f650c}.preview-body{padding:20px}.preview-body h3{font-size:22px}.workflow{gap:7px}.workflow>button{min-height:115px;padding:12px 9px}.workflow b{font-size:12px}.workflow small{font-size:9px}.workflow span{font-size:18px}
  .workflow-detail{min-height:135px;padding-top:18px}.workflow-detail h4{font-size:14px}.workflow-detail p{font-size:12px}.preview-note{font-size:10px}.preview-top{padding:15px 19px}.sample{font-size:10px}
  .principles{gap:24px;margin-top:28px}.principles h3{font-size:22px}.principles p{font-size:14px}.steps{margin-block:30px;gap:27px}.steps p{font-size:13px}.faq summary{font-size:13px}.faq p{font-size:12px;margin-left:0}
  .contact-band{padding-block:44px}.contact-inner h2{font-size:27px;max-width:320px}.contact-inner p{font-size:13px}.contact-stages{gap:8px 14px;font-size:10px;margin-top:18px}.contact-actions{flex-direction:row;margin-top:25px;min-width:0;gap:10px}.contact-actions .button{margin-top:0;font-size:13px;padding:12px 18px}
  dialog{padding:22px 20px}.dialog-header h2{font-size:25px}.form-progress{margin:22px 0;gap:8px}.form-progress li{font-size:10px;gap:6px}.form-progress span{width:21px;height:21px;font-size:10px}.choices{grid-template-columns:1fr 1fr;gap:8px}.choices label{font-size:11px;padding:10px 8px}
  #needs-title,#contact-title{font-size:21px}.step-subtitle{font-size:12px}.form-grid{grid-template-columns:1fr;gap:14px}.form-bottom>p{max-width:160px;font-size:10px}.form-bottom{gap:12px}.form-bottom .button{font-size:12px;padding:11px 14px;gap:10px}
  .footer>div:nth-child(2){gap:20px}.footer a{font-size:12px}
}
@media(max-width:360px){.container{width:calc(100% - 32px)}.brand img{width:108px}.nav-row{gap:8px}.nav-quote{padding-inline:9px}.hero h1{font-size:50px}.hero h2{font-size:27px}.hero .button{font-size:12px;padding-inline:15px}.workflow>button{padding:11px 7px}.workflow b{font-size:11px}.contact-actions .button{font-size:12px;padding-inline:14px}.form-progress li{font-size:9px;gap:4px}.form-progress span{width:19px;height:19px}.form-bottom>p{max-width:125px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}