/* remote.maesuaisystem.com — layout modelled on a classic Thai software-reseller page:
   white top bar, solid brand menu bar, light hero with a big illustration, illustrated card grids. */
:root{
  --brand:#4C3BFF;--brand-d:#3B2BE0;--brand-l:#EEECFF;
  --go:#14A04F;--go-d:#0E8A42;
  --ink:#1F2633;--ink-2:#3A4254;--muted:#5D6678;--line:#E3E6EE;--ground:#F3F4F8;
  --navy:#16133F;--warn:#C2410C;
  --r:18px;--shadow:0 18px 40px -24px rgba(31,38,51,.35);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:64px}
body{margin:0;background:#fff;color:var(--ink);font-family:'Noto Sans Thai',system-ui,sans-serif;font-size:16.5px;line-height:1.75;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:'Prompt','Noto Sans Thai',sans-serif;line-height:1.3;margin:0}
p{margin:0}
a{color:var(--brand-d)}
img{max-width:100%;height:auto;display:block}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:46px;padding:0 22px;border-radius:999px;border:2px solid transparent;
  font-family:'Prompt',sans-serif;font-weight:600;font-size:16px;text-decoration:none;cursor:pointer;white-space:nowrap;transition:background .15s,transform .15s,box-shadow .15s}
.btn:hover{transform:translateY(-1px)}
.btn:focus-visible{outline:3px solid #FFC94A;outline-offset:2px}
.btn-go{background:var(--go);color:#fff;box-shadow:0 10px 24px -10px rgba(20,160,79,.7)}
.btn-go:hover{background:var(--go-d)}
.btn-primary{background:var(--brand);color:#fff}
.btn-primary:hover{background:var(--brand-d)}
.btn-line{background:#fff;color:var(--brand-d);border-color:#CFCBFF}
.btn-line:hover{border-color:var(--brand)}
.btn-white{background:#fff;color:var(--brand-d)}
.btn-lg{height:56px;padding:0 30px;font-size:18px}
.btn[disabled]{opacity:.6;cursor:wait;transform:none}

/* ---------- top bar ---------- */
.topbar{background:#fff;border-bottom:1px solid var(--line)}
.topbar .wrap{display:flex;align-items:center;gap:24px;height:70px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--ink);flex:none}
.brand svg{flex:none}
.brand .name{font-family:'Prompt',sans-serif;font-size:21px;font-weight:700;letter-spacing:-.2px;white-space:nowrap}
.brand .name b{color:var(--brand)}
.brand small{display:block;font-family:'Noto Sans Thai',sans-serif;font-weight:500;font-size:12px;color:var(--muted);letter-spacing:0;margin-top:-4px}
.toplinks{display:flex;gap:22px;margin-left:auto;align-items:center}
.toplinks a{color:var(--ink-2);text-decoration:none;font-weight:500;font-size:15px}
.toplinks a:hover{color:var(--brand)}
.toplinks .gh{display:flex;color:var(--ink)}
.free-pill{display:inline-flex;align-items:center;gap:6px;background:#E7F7EE;color:#0B6B35;border:1px solid #BFE8D0;border-radius:999px;padding:3px 12px;font-size:13.5px;font-weight:600;white-space:nowrap}

/* ---------- brand menu bar ---------- */
.menubar{background:var(--brand);position:sticky;top:0;z-index:20;box-shadow:0 6px 18px -10px rgba(76,59,255,.8)}
.menubar .wrap{display:flex;align-items:center;height:56px;gap:6px}
.menu{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;flex:1;min-width:0}
.menu::-webkit-scrollbar{display:none}
.menu a{color:#fff;text-decoration:none;font-family:'Prompt',sans-serif;font-weight:500;font-size:16px;padding:8px 16px;border-radius:10px;white-space:nowrap}
.menu a:hover,.menu a.on{background:rgba(255,255,255,.16)}
.menubar .cta{height:40px;padding:0 20px;font-size:15.5px;background:#FFC94A;color:#2A1F00;flex:none}
.menubar .cta:hover{background:#FFD56E}

/* ---------- hero ---------- */
.hero{background:linear-gradient(180deg,#EEF0F6 0%,#F7F8FB 70%,#fff 100%);overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);gap:28px;align-items:center;padding-top:56px;padding-bottom:56px}
.chip{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:5px 14px 5px 6px;font-size:14.5px;font-weight:600;color:var(--ink-2);box-shadow:0 6px 16px -10px rgba(31,38,51,.3)}
.chip i{font-style:normal;background:var(--go);color:#fff;border-radius:999px;padding:1px 10px;font-size:13px}
.hero h1{display:flex;align-items:center;gap:16px;font-size:46px;font-weight:700;letter-spacing:-.8px;margin:22px 0 6px}
.hero h1 b{color:var(--brand)}
.hero h1>span{white-space:nowrap}
.hero h1 svg{flex:none}
.hero .tag{font-family:'Prompt',sans-serif;font-size:23px;font-weight:600;color:var(--ink-2);margin-bottom:14px}
.hero .lead{font-size:18px;color:var(--muted);max-width:33em}
.perks{list-style:none;padding:0;margin:20px 0 28px;display:flex;flex-wrap:wrap;gap:10px 22px}
.perks li{display:flex;align-items:center;gap:8px;font-weight:600;color:var(--ink-2);font-size:15.5px}
.perks svg{flex:none}
.hero .ctas{display:flex;flex-wrap:wrap;gap:12px}
.hero .meta{margin-top:14px;font-size:14px;color:var(--muted)}
.hero-art img{width:100%;max-width:680px;margin-left:auto}

/* ---------- sections ---------- */
.sec{padding:80px 0}
.sec.grey{background:var(--ground)}
.sec-head{text-align:center;max-width:760px;margin:0 auto 46px}
.sec-head h2{display:inline-flex;align-items:center;justify-content:center;gap:12px;font-size:36px;font-weight:700;letter-spacing:-.4px}
.sec-head h2 b{color:var(--brand)}
.sec-head h2 svg{flex:none}
.sec-head p{color:var(--muted);font-size:17.5px;margin-top:10px}
.sec-head::after{content:"";display:block;width:72px;height:4px;border-radius:4px;background:var(--brand);margin:18px auto 0;opacity:.85}

/* audience cards (3) */
.who{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}
.who article{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s}
.who article:hover{transform:translateY(-4px);box-shadow:0 26px 50px -26px rgba(31,38,51,.45)}
.who .body{padding:22px 24px 26px;display:flex;flex-direction:column;gap:8px;flex:1}
.who h3{font-size:22px;color:var(--brand-d)}
.who p{color:var(--muted)}
.who .more{margin-top:auto;padding-top:10px;font-weight:600;text-decoration:none;font-family:'Prompt',sans-serif}

/* features (2 columns) */
.feat{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px}
.feat article{background:#fff;border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow)}
.feat article img{width:100%}
.feat .body{padding:24px 28px 28px}
.feat h3{font-size:23px;color:var(--brand-d);margin-bottom:8px}
.feat p{color:var(--muted)}

/* why (2x2, image left) */
.why{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}
.why article{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1fr);background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow)}
.why article img{width:100%;height:100%;object-fit:cover}
.why .body{padding:24px 24px;display:flex;flex-direction:column;justify-content:center;gap:8px}
.why h3{font-size:21px;color:var(--ink)}
.why h3 span{color:var(--brand)}
.why p{color:var(--muted);font-size:15.5px}

/* getting started */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px;counter-reset:s;padding:0;margin:0}
.steps li{list-style:none;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:30px 26px 28px;position:relative;box-shadow:var(--shadow)}
.steps li::before{counter-increment:s;content:counter(s);display:flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:16px;background:var(--brand);color:#fff;font-family:'Prompt',sans-serif;font-weight:700;font-size:24px;margin-bottom:16px}
.steps h3{font-size:20px;margin-bottom:6px}
.steps p{color:var(--muted)}
.steps .id{display:inline-block;font-family:'Prompt',sans-serif;font-weight:700;font-size:20px;letter-spacing:1px;background:var(--brand-l);color:var(--brand-d);border-radius:10px;padding:2px 12px;margin-top:10px}
.scam{display:flex;gap:16px;align-items:flex-start;background:#FFF6EC;border:1px solid #FBD5AE;border-radius:var(--r);padding:20px 24px;margin-top:30px;color:#6B2A07}
.scam svg{flex:none;margin-top:2px}
.scam b{color:var(--warn)}

/* faq */
.faq{max-width:860px;margin:0 auto;display:grid;gap:12px}
.faq details{background:#fff;border:1px solid var(--line);border-radius:14px;padding:0 22px}
.faq details[open]{box-shadow:var(--shadow)}
.faq summary{cursor:pointer;list-style:none;padding:17px 0;font-family:'Prompt',sans-serif;font-weight:600;font-size:17.5px;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--brand);background:var(--brand-l);width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:22px;line-height:1;font-weight:600;flex:none}
.faq details[open] summary::after{content:"–"}
.faq details p{padding:0 0 18px;color:var(--muted)}

/* footer */
.foot{background:var(--navy);color:#C9C6E8;font-size:15px}
.foot .wrap{padding-top:56px;padding-bottom:28px}
.foot .cols{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));gap:32px}
.foot .brand{color:#fff}
.foot .about{margin-top:14px;max-width:24em}
.foot h4{font-family:'Prompt',sans-serif;color:#fff;font-size:16px;margin:4px 0 12px}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.foot a{color:#C9C6E8;text-decoration:none}
.foot a:hover{color:#fff}
.foot .base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;border-top:1px solid rgba(255,255,255,.12);margin-top:40px;padding-top:22px;font-size:14px;color:#9A97C2}
.foot .base a{color:#9A97C2;text-decoration:underline}

/* "Windows protected your PC" walkthrough */
.steps.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.steps h3 small{font-size:15px;font-weight:500;color:var(--muted)}
.ss{background:#DCE4EF;border-radius:14px;padding:18px;margin-top:18px}
.ss-win{background:#0F6CBD;color:#fff;border-radius:6px;padding:22px 22px 18px;position:relative;font-family:'Segoe UI','Noto Sans Thai',sans-serif;box-shadow:0 16px 30px -16px rgba(0,0,0,.55)}
.ss-x{position:absolute;right:14px;top:8px;font-size:14px;opacity:.8}
.ss-win h4{font-family:inherit;font-size:21px;font-weight:600;margin:0 0 10px;line-height:1.35}
.ss-win p{color:#fff;font-size:14px;line-height:1.6}
.ss-win .ss-meta{margin-top:12px}
.ss-link{display:inline-block;margin-top:12px;font-size:14px;text-decoration:underline}
.ss-btns{display:flex;justify-content:flex-end;gap:10px;margin-top:22px}
.ss-btn{border:2px solid rgba(255,255,255,.9);padding:4px 18px;font-size:14px;white-space:nowrap}
.hit{position:relative;outline:3px solid #FFC94A;outline-offset:4px;border-radius:3px;animation:hit 1.6s ease-in-out infinite}
.hit::after{content:"";position:absolute;right:-16px;bottom:-26px;width:20px;height:28px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 34'%3E%3Cpath d='M1 1v29l7.5-7 5 11 4.6-2.1-5-10.9H23z' fill='%23fff' stroke='%23111' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain}
@keyframes hit{50%{outline-color:rgba(255,201,74,.3)}}
@media (prefers-reduced-motion:reduce){.hit{animation:none}}
#open .scam a{color:var(--warn)}

/* one-line installer */
.cmd-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}
.cmd-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:10px;min-width:0}
.cmd-card h3{font-size:21px;color:var(--brand-d)}
.cmd-card p{color:var(--muted)}
.code{margin-top:auto;display:flex;align-items:stretch;background:#14122E;border-radius:12px;overflow:hidden}
.code code{flex:1;min-width:0;padding:14px 16px;color:#E6E4FF;font-family:ui-monospace,Consolas,'Cascadia Mono',monospace;font-size:14px;line-height:1.6;white-space:pre-wrap;word-break:break-all}
.copy{flex:none;border:0;background:var(--brand);color:#fff;font-family:'Prompt',sans-serif;font-weight:600;font-size:14px;padding:0 16px;cursor:pointer}
.copy:hover{background:var(--brand-d)}
code.inl{background:var(--brand-l);color:var(--brand-d);border-radius:6px;padding:1px 6px;font-size:.92em}
.cmd-perks{justify-content:center;margin:28px 0 0}
.cmd-perks a{color:inherit}

/* ---------- register ---------- */
.auth{background:var(--ground);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:calc(100vh - 126px)}
.auth-side{background:var(--brand);color:#fff;padding:60px 56px;display:flex;flex-direction:column;justify-content:center;gap:18px;position:relative;overflow:hidden}
.auth-side::before{content:"";position:absolute;width:460px;height:460px;border-radius:50%;background:rgba(255,255,255,.07);right:-160px;top:-160px}
.auth-side>*{position:relative}
.auth-side h1{font-size:40px;font-weight:700}
.auth-side p{color:#E4E0FF;font-size:18px;max-width:26em}
.auth-side ul{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.auth-side li{display:flex;gap:12px;align-items:flex-start;font-size:16px}
.auth-side li svg{flex:none;margin-top:4px}
.auth-side img{max-width:420px;border-radius:var(--r);margin-top:8px}
.auth-main{display:flex;align-items:center;justify-content:center;padding:48px 24px}
.form{width:100%;max-width:440px;background:#fff;border:1px solid var(--line);border-radius:24px;padding:34px;box-shadow:0 40px 80px -40px rgba(31,38,51,.3)}
.form h2{font-size:28px}
.form .sub{color:var(--muted);margin:6px 0 24px;font-size:15.5px}
.field2{display:grid;gap:6px;margin-bottom:16px}
.field2 label{font-weight:600;font-size:14.5px}
.field2 input{height:50px;border-radius:12px;border:1.5px solid #D5D9E3;padding:0 14px;font:inherit;font-size:16px;color:var(--ink);background:#fff;transition:border-color .15s,box-shadow .15s}
.field2 input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 4px rgba(76,59,255,.15)}
.field2 .hint{font-size:13px;color:var(--muted)}
.check{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;color:var(--ink-2);margin:6px 0 22px}
.check input{width:18px;height:18px;margin-top:4px;accent-color:var(--brand)}
.form .btn{width:100%}
.msg{border-radius:12px;padding:12px 14px;font-size:14.5px;margin-bottom:16px}
.msg.err{background:#FFF1F1;color:#8A1C21;border:1px solid #F8C9CA}
.done .ok{width:58px;height:58px;border-radius:18px;background:#E7F7EE;color:var(--go);display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.done ol{padding-left:22px;margin:16px 0 24px;display:grid;gap:8px;color:var(--ink-2)}

/* ---------- plain document pages ---------- */
.doc{max-width:820px;padding-top:56px;padding-bottom:80px}
.doc h1{font-size:36px;margin-bottom:6px}
.doc h2{font-size:21px;margin:36px 0 8px}
.doc p,.doc ul{margin:0 0 12px}
.doc ul{padding-left:22px}
.doc li{margin:4px 0}
.doc .meta{color:var(--muted);margin-bottom:28px}
.doc .box{background:var(--ground);border:1px solid var(--line);border-radius:16px;padding:18px 22px}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .toplinks .ed{display:none}
  .hero h1{font-size:38px}
  .why{grid-template-columns:minmax(0,1fr)}
  .foot .cols{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:860px){
  .hero .wrap{grid-template-columns:minmax(0,1fr);padding-top:36px;padding-bottom:36px}
  .hero-art{order:-1}
  .hero-art img{margin:0 auto;max-width:520px}
  .who,.steps,.steps.two,.cmd-grid{grid-template-columns:minmax(0,1fr)}
  .feat{grid-template-columns:minmax(0,1fr)}
  .auth{grid-template-columns:minmax(0,1fr)}
  .auth-side{padding:40px 24px}
  .auth-side img{display:none}
}
@media (max-width:640px){
  body{font-size:16px}
  .wrap{padding:0 16px}
  .topbar .wrap{height:62px;gap:12px}
  .brand .name{font-size:17px}
  .topbar .brand svg{width:36px;height:36px}
  .brand small{display:none}
  .toplinks{display:none}
  .menubar .wrap{height:50px;padding-right:0}
  .menu a{font-size:15px;padding:7px 12px}
  .menubar .cta{display:none}
  .hero h1{font-size:30px;gap:12px}
  .hero h1>span{white-space:normal}
  .hero h1 svg{width:46px;height:46px}
  .hero .tag{font-size:19px}
  .hero .lead{font-size:16.5px}
  .btn-lg{padding:0 18px;font-size:16.5px}
  .hero .ctas .btn{flex:1 1 100%}
  .sec{padding:56px 0}
  .sec-head{margin-bottom:32px}
  .sec-head h2{font-size:26px;gap:8px;flex-direction:column}
  .sec-head h2 svg{width:30px;height:30px}
  .sec-head p{font-size:16px}
  .why article{grid-template-columns:minmax(0,1fr)}
  .why article img{height:auto}
  .feat .body,.who .body{padding:20px}
  .foot .cols{grid-template-columns:minmax(0,1fr)}
  .form{padding:24px 18px}
  .auth-side h1{font-size:30px}
  .doc h1{font-size:28px}
}