@import url('https://fonts.googleapis.com/css2?family=Bai+Jamjuree:wght@500;600;700&family=Sarabun:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ===== NexusBot light design system (จาก main.html) ===== */
:root{
  --bg:#f2f7fa;
  --paper:#ffffff;
  --ink:#0f1c2e;
  --muted:#546378;
  --faint:#8a9aae;
  --line:#dbe5ed;
  --line-2:#b7c8d6;
  --brand:#0ea5e9;
  --brand-dark:#0284c7;
  --grad:linear-gradient(135deg,#4fd1ff 0%,#2db8f5 55%,#13a0e8 100%);
  --grad-deep:linear-gradient(150deg,#27b4f2 0%,#0e9ee6 55%,#0889d4 100%);
  --grad-text:linear-gradient(135deg,#0fa8ea 0%,#0a8fd6 55%,#0678bd 100%);
  --rec:#ff4b2b;
  --ok:#0f9d58;
  --head:"Bai Jamjuree","Sarabun",system-ui,sans-serif;
  --body:"Sarabun","Bai Jamjuree",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --wrap:1180px;
  /* legacy tokens (ใช้โดย css เดิมของ app/admin) */
  --bg-soft:#eef5fa;
  --sidebar:#ffffff;
  --surface:#ffffff;
  --surface-2:#f7fbfe;
  --surface-3:#eef5fa;
  --border:#dbe5ed;
  --border-weak:#e8eff6;
  --border-strong:#b7c8d6;
  --text:#0f1c2e;
  --text-2:#546378;
  --accent:#0ea5e9;
  --accent-hover:#0284c7;
  --accent-soft:rgba(14,165,233,.10);
  --blue:#2db8f5;
  --cyan:#4fd1ff;
  --success:#0f9d58;
  --success-bright:#12b76a;
  --success-soft:rgba(15,157,88,.10);
  --warning:#d97706;
  --warning-soft:rgba(217,119,6,.12);
  --danger:#e5484d;
  --danger-soft:rgba(229,72,77,.10);
  --pro:#d97706;
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:20px;
  --font:"Sarabun",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-display:"Bai Jamjuree","Sarabun",system-ui,sans-serif;
  --font-body:"Sarabun","Bai Jamjuree",system-ui,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --shadow-lg:0 24px 60px -28px rgba(15,28,46,.18);
  --shadow-md:0 10px 30px -16px rgba(15,28,46,.12);
  --grad-brand:linear-gradient(135deg,#4fd1ff 0%,#2db8f5 55%,#13a0e8 100%);
  --grad-brand-2:linear-gradient(135deg,#4fd1ff 0%,#2db8f5 55%,#13a0e8 100%);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:84px;-webkit-text-size-adjust:100%}
body{
  background:var(--bg);color:var(--ink);
  font-family:var(--body);font-size:16.5px;line-height:1.7;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
  padding-bottom:env(safe-area-inset-bottom,0px);
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
:focus-visible{outline:3px solid var(--brand);outline-offset:3px;border-radius:6px}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:clamp(18px,4vw,32px)}
main,footer{position:relative;z-index:1}

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:var(--bg);border-left:1px solid var(--line)}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#5ad7ff,#2db8f5 55%,#13a0e8);border-radius:999px;border:3px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#8fe3ff,#4fc6fa 55%,#2db3f0)}
@supports (-moz-appearance:none){html{scrollbar-width:thin;scrollbar-color:#0ea5e9 #f2f7fa}}

/* ---------- The one moving circle ---------- */
.orb{
  position:fixed;top:0;left:0;z-index:0;pointer-events:none;
  width:min(520px,82vw);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 30% 28%,rgba(79,209,255,.30),rgba(14,165,233,.17) 60%,rgba(19,160,232,.13));
  will-change:transform;
}

/* ---------- Icons ---------- */
.i{width:1.2em;height:1.2em;display:inline-block;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.2em}
.i-g{stroke:#0ea5e9}
.landing .ico{width:48px;height:48px;border-radius:14px;background:var(--grad);color:#fff;display:grid;place-items:center;flex:none}
.landing .ico .i{width:24px;height:24px;vertical-align:0}
.landing .ico-s{width:40px;height:40px;border-radius:12px}
.landing .ico-s .i{width:20px;height:20px}
.landing .hd-ico{margin-bottom:20px}
.gt{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-points{list-style:none;display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:18px;font-size:15px;color:var(--muted)}
.hero-points li{display:flex;align-items:center;gap:8px}
.lb{display:flex;align-items:center;gap:8px}
.ci{display:inline-flex;align-items:center;gap:10px}
.s3 .top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:18px}
.plan-h{display:flex;align-items:center;gap:12px}
.plan-h .ico{width:44px;height:44px;border-radius:13px}
.plans .plan.feat .ico{background:rgba(255,255,255,.22)}
.plans .plan.feat .i-g{stroke:#fff}
.q{display:flex;align-items:center;gap:14px}
.cta .deco{position:absolute;right:-16px;bottom:-28px;width:clamp(150px,26vw,300px);height:clamp(150px,26vw,300px);opacity:.16;color:#fff;stroke-width:.8;pointer-events:none}
.soc{display:flex;gap:10px;margin-top:18px}
.soc a{width:42px;height:42px;border-radius:50%;border:1.5px solid transparent;background:linear-gradient(var(--paper),var(--paper)) padding-box,var(--grad) border-box;color:#0ea5e9;display:grid;place-items:center;transition:background .2s,color .2s}
.soc a:hover{background:var(--grad);color:#fff}
.legal span{display:inline-flex;align-items:center;gap:8px}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  height:50px;padding:0 26px;border-radius:10px;
  font-family:var(--head);font-weight:600;font-size:16px;line-height:1;white-space:nowrap;
  border:1.5px solid transparent;
  transition:background .2s,color .2s,border-color .2s,transform .15s;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--grad);color:#fff}
.btn-primary:hover{filter:brightness(1.1) saturate(1.1)}
.btn-ghost{border-color:transparent;color:#0284c7;background:linear-gradient(var(--paper),var(--paper)) padding-box,var(--grad) border-box}
.btn-ghost:hover{background:var(--grad);color:#fff}
.btn-sm{height:42px;padding:0 18px;font-size:15px;border-radius:9px}
.btn-lg{height:56px;padding:0 32px;font-size:17px}
.btn-block{width:100%}

/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;z-index:50;padding-top:env(safe-area-inset-top,0px);
  background:rgba(242,247,250,.86);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.nav{display:flex;align-items:center;justify-content:space-between;height:70px;gap:16px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--head);font-weight:700;font-size:22px;letter-spacing:-.01em}
.brand-mark{width:32px;height:32px;border-radius:50%;background:var(--grad);display:grid;place-items:center;flex:none}
.nav-links{display:flex;gap:30px}
.nav-links a{display:inline-flex;align-items:center;gap:8px;font-weight:500;font-size:16px;color:var(--ink);text-underline-offset:6px;text-decoration-thickness:2px}
.nav-links a:hover{color:var(--brand)}
.nav-cta{display:flex;gap:10px;align-items:center}
.burger{display:none;width:44px;height:44px;border-radius:10px;border:1.5px solid transparent;background:linear-gradient(var(--paper),var(--paper)) padding-box,var(--grad) border-box;align-items:center;justify-content:center}
.burger span,.burger span::before,.burger span::after{display:block;width:18px;height:2px;background:#0ea5e9;border-radius:2px;position:relative;transition:transform .25s,background .25s,top .25s}
.burger span::before,.burger span::after{content:"";position:absolute;left:0}
.burger span::before{top:-6px}.burger span::after{top:6px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.burger[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}
.mobile-panel{display:none;border-top:1px solid var(--line);background:var(--paper)}
.mobile-panel.open{display:block}
.mobile-panel a.m-link{display:flex;align-items:center;gap:12px;padding:16px 0;border-bottom:1px solid var(--line);font-weight:500;font-family:var(--head);font-size:18px}
.mobile-panel .m-cta{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:18px 0 22px}

/* ---------- Hero ---------- */
.hero{padding:clamp(48px,8vw,104px) 0 clamp(36px,5vw,56px)}
.landing h1{
  font-family:var(--head);font-weight:700;
  font-size:clamp(40px,7.4vw,96px);line-height:1.18;letter-spacing:-.025em;
  max-width:13ch;text-wrap:balance;
}
.hero-bottom{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px;align-items:end;margin-top:clamp(28px,4vw,48px)}
.lead{font-size:clamp(17px,1.7vw,20px);color:var(--muted);max-width:540px}
.lead strong{color:var(--ink);font-weight:600}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.hero-note{margin-top:14px;font-size:14.5px;color:var(--muted)}

/* ---------- Timeline demo ---------- */
.stage{padding-bottom:clamp(56px,8vw,104px)}
.tl{border:1.5px solid transparent;background:linear-gradient(var(--paper),var(--paper)) padding-box,var(--grad) border-box;border-radius:18px;overflow:hidden}
.tl-head{display:flex;align-items:center;gap:14px;padding:14px 20px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.tl-state{display:flex;align-items:center;gap:10px;font-weight:600;font-family:var(--head);font-size:16px}
.rec{width:11px;height:11px;border-radius:50%;background:var(--line-2)}
.running .rec{background:var(--rec);animation:blink 1s steps(2,jump-none) infinite}
.done .rec{background:var(--ok)}
@keyframes blink{50%{opacity:.25}}
.tl-code{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:14px;color:var(--muted);margin-left:auto}
.tl-body{display:grid;grid-template-columns:132px minmax(0,1fr)}
.tl-labels>div{height:68px;padding:0 18px;display:flex;flex-direction:column;justify-content:center;border-top:1px solid var(--line);font-family:var(--head);font-weight:600;font-size:15.5px;line-height:1.35}
.tl-labels>div:first-child{height:38px;border-top:0}
.tl-labels small{font-family:var(--mono);font-weight:400;font-size:11.5px;color:var(--faint)}
.tl-tracks{position:relative;border-left:1px solid var(--line);overflow:hidden}
.lane{position:relative;margin:0 16px}
.ruler{height:38px;position:relative;background:repeating-linear-gradient(90deg,var(--line-2) 0 1px,transparent 1px calc(100%/24)) left bottom/100% 9px no-repeat}
.ruler span{position:absolute;top:8px;font-family:var(--mono);font-size:11px;color:var(--faint);padding-left:4px}
.track{height:68px;border-top:1px solid var(--line);position:relative}
.clip{position:absolute;left:0;right:0;top:10px;bottom:10px;display:flex;gap:2px;border-radius:8px;overflow:hidden}
.clip i{flex:1;display:block}
.clip.out{clip-path:inset(0 100% 0 0)}
.ph{position:absolute;top:0;bottom:0;left:0;width:2px;margin-left:-1px;background:var(--rec);z-index:3}
.ph span{position:absolute;top:5px;left:5px;background:var(--rec);color:#fff;font:500 11px var(--mono);padding:2px 7px;border-radius:5px;white-space:nowrap}
.ph.flip span{left:auto;right:5px}
.tl-steps{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line)}
.st{display:flex;align-items:center;gap:12px;padding:14px 18px;font-size:15px;color:var(--faint);border-left:1px solid var(--line);transition:color .3s,background .3s}
.st:first-child{border-left:0}
.st .ib{flex:none;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:#e8f0f6;color:var(--faint);transition:background .3s,color .3s}
.st .ib .i{width:18px;height:18px}
.st.active{color:var(--ink);background:rgba(14,165,233,.05)}
.st.active .ib{background:var(--grad);color:#fff;animation:pulse 1s ease-in-out infinite}
.st.ok{color:var(--ink)}
.st.ok .ib{background:var(--ok);color:#fff}
@keyframes pulse{50%{box-shadow:0 0 0 6px rgba(14,165,233,.16)}}
.diff{display:grid;grid-template-columns:1fr 1fr 1fr;border-top:1px solid var(--line);background:#f7fbfe}
.diff>div{padding:16px 20px;border-left:1px solid var(--line);min-width:0}
.diff>div:first-child{border-left:0}
.diff small{display:flex;align-items:center;gap:7px;font-size:13.5px;color:var(--muted);line-height:1.4;margin-bottom:3px}
.diff code{display:block;font-family:var(--mono);font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.diff .was code{color:var(--faint);text-decoration:line-through;text-decoration-color:var(--line-2)}
.diff .now code{color:var(--ok);font-weight:500}
.tl-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:14px 20px;border-top:1px solid var(--line)}
.tl-foot p{display:flex;align-items:center;gap:8px;font-size:14.5px;color:var(--muted)}

/* ---------- Sections ---------- */
.section{padding:clamp(64px,9vw,120px) 0}
.band{background:rgba(255,255,255,.74);border-block:1px solid var(--line)}
.landing h2{font-family:var(--head);font-weight:700;font-size:clamp(30px,4.2vw,48px);line-height:1.25;letter-spacing:-.018em;text-wrap:balance}
.landing .sub{margin-top:14px;color:var(--muted);font-size:18px;max-width:440px}
.split{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);gap:clamp(32px,6vw,88px);align-items:start}
.split>.head{position:sticky;top:104px}

/* spec list */
.spec{background:var(--grad) 0 0/100% 3px no-repeat;padding-top:3px}
.row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:6px 22px;padding:28px 0;border-bottom:1px solid var(--line-2);align-items:start}
.row .ico{margin-top:2px}
.row h3{font-family:var(--head);font-size:22px;font-weight:600;line-height:1.35}
.row p{color:var(--muted);font-size:16.5px;max-width:520px}
.row .v{align-self:center;font-family:var(--mono);font-size:13px;text-align:right;display:inline-block}

/* compare */
.cmp{border:1.5px solid transparent;background:linear-gradient(var(--paper),var(--paper)) padding-box,var(--grad) border-box;border-radius:18px;overflow:hidden;margin-top:clamp(28px,4vw,48px)}
.cmp .r{display:grid;grid-template-columns:1.1fr 1.2fr 1.4fr;border-top:1px solid var(--line)}
.cmp .r:first-child{border-top:0}
.cmp .r>div{padding:18px 22px;font-size:16px;line-height:1.5}
.cmp .r>div+div{border-left:1px solid var(--line)}
.cmp .r>div:first-child{font-family:var(--head);font-weight:600}
.cmp .hd>div{font-family:var(--head);font-weight:700;font-size:15.5px;background:#f7fbfe}
.cmp .hd>div:last-child{background:var(--grad);color:#fff}
.cmp .r>div:nth-child(2){color:var(--muted)}
.cmp .r>div:last-child{font-weight:500}
.cmp code{font-family:var(--mono);font-size:13.5px}

/* steps */
.steps3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,4vw,56px);margin-top:clamp(32px,5vw,56px)}
.s3{background:var(--grad) 0 0/100% 3px no-repeat;padding-top:25px}
.s3 b{font-family:var(--head);font-weight:700;font-size:clamp(56px,7vw,88px);line-height:1;letter-spacing:-.04em;margin:0;display:inline-block;background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.s3 h3{font-family:var(--head);font-size:22px;font-weight:600;margin-bottom:8px}
.s3 p{color:var(--muted);font-size:16.5px;max-width:340px}

/* pricing */
.price-top{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:clamp(28px,4vw,48px)}
.plans{display:grid;grid-template-columns:repeat(4,1fr);border-radius:20px;overflow:hidden;border:1.5px solid transparent;background:linear-gradient(var(--paper),var(--paper)) padding-box,var(--grad) border-box;}
.plans .plan{display:flex;flex-direction:column;padding:clamp(22px,2.4vw,32px);border-left:1px solid var(--line)}
.plans .plan:first-child{border-left:0}
.plans .plan h3{font-family:var(--head);font-size:20px;font-weight:700}
.plans .plan .desc{color:var(--muted);font-size:15px;margin-top:2px;min-height:48px}
.plans .price{display:flex;align-items:baseline;gap:8px;margin:18px 0 6px}
.plans .price b{font-family:var(--head);font-size:clamp(32px,3vw,42px);font-weight:700;letter-spacing:-.03em;line-height:1}
.plans .price span{font-size:15px;color:var(--muted)}
.plans .plan ul{list-style:none;display:grid;gap:11px;margin:22px 0 28px;font-size:15.5px}
.plans .plan li{display:flex;gap:11px;align-items:flex-start}
.plans .plan li svg{flex:none;margin-top:6px;color:var(--brand)}
.plans .plan .btn{margin-top:auto;width:100%}
.plans .plan.feat{background:var(--grad-deep);color:#fff;border-left-color:transparent}
.plans .plan.feat .desc,.plans .plan.feat .price span{color:rgba(255,255,255,.8)}
.plans .plan.feat li svg{color:#fff}
.plans .plan.feat .btn{background:#fff;color:#0284c7}
.plans .plan.feat .btn:hover{background:#eaf4ff;color:#0284c7}

/* faq */
details{border-bottom:1px solid var(--line-2)}
details:first-child{background:var(--grad) 0 0/100% 3px no-repeat;padding-top:3px}
summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:24px 0;font-family:var(--head);font-weight:600;font-size:19px;line-height:1.45}
summary::-webkit-details-marker{display:none}
summary .pm{flex:none;position:relative;width:22px;height:22px}
summary .pm::before,summary .pm::after{content:"";position:absolute;left:50%;top:50%;width:18px;height:2px;background:#0ea5e9;transform:translate(-50%,-50%);transition:transform .25s,background .2s}
summary .pm::after{transform:translate(-50%,-50%) rotate(90deg)}
details[open] summary .pm::after{transform:translate(-50%,-50%) rotate(0)}
details[open] summary .pm::before,details[open] summary .pm::after{background:var(--grad)}
details .ans{padding:0 44px 26px 0;color:var(--muted);font-size:16.5px;max-width:640px}

/* cta */
.cta{position:relative;overflow:hidden;background:var(--grad-deep);color:#fff;border-radius:24px;padding:clamp(44px,7vw,88px) clamp(24px,5vw,72px) clamp(40px,6vw,72px)}
.cta::before{
  content:"";position:absolute;left:0;right:0;top:0;height:12px;
  background:linear-gradient(90deg,#e0f5ff 0 14.28%,#b9e8ff 0 28.57%,#8fdaff 0 42.85%,#5ec8fa 0 57.14%,#2db8f5 0 71.42%,#13a0e8 0 85.71%,#0889d4 0);
}
.cta h2{max-width:15ch;font-size:clamp(32px,5.4vw,64px)}
.cta p{margin:16px 0 30px;max-width:480px;color:rgba(255,255,255,.85);font-size:18px}
.cta .row2{display:flex;gap:12px;flex-wrap:wrap}
.cta .btn-w{background:#fff;color:#0284c7}
.cta .btn-w:hover{background:#eaf4ff;color:#0284c7}
.cta .btn-o{border-color:rgba(255,255,255,.7);color:#fff}
.cta .btn-o:hover{background:#fff;color:#0284c7}

footer{padding:56px 0 40px;margin-top:clamp(56px,8vw,96px);border-top:1px solid var(--line-2)}
.foot{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:32px}
.foot p{color:var(--muted);font-size:15.5px;margin-top:14px;max-width:300px}
.foot h4{font-family:var(--head);font-size:15.5px;font-weight:700;margin-bottom:14px}
.foot ul{list-style:none;display:grid;gap:10px}
.foot li a{display:inline-flex;align-items:center;gap:9px;color:var(--muted);font-size:15.5px}
.foot li a:hover{color:var(--ink);text-decoration:underline}
.legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-top:40px;padding-top:22px;border-top:1px solid var(--line);color:var(--muted);font-size:14.5px}

/* ---------- Auth pages ---------- */
.auth-page{min-height:100vh;display:grid;place-items:center;padding:clamp(20px,4vw,48px)}
.auth-card{width:100%;max-width:430px;background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:clamp(26px,4vw,40px);box-shadow:0 24px 60px -32px rgba(15,28,46,.25)}
.auth-card .brand{justify-content:center;margin-bottom:22px}
.auth-card h1{font-family:var(--head);font-weight:700;font-size:30px;letter-spacing:-.02em;line-height:1.3;text-align:center}
.auth-card .sub{color:var(--muted);margin:6px 0 26px;font-size:16.5px;text-align:center}
.auth-card .field{margin-bottom:16px}
.auth-card .field label{display:block;font-weight:600;font-family:var(--head);font-size:15px;margin-bottom:7px;color:var(--ink)}
.auth-card input[type=email],.auth-card input[type=password],.auth-card input[type=text]{
  width:100%;height:48px;padding:0 14px;border:1.5px solid var(--line-2);border-radius:10px;
  font:inherit;font-size:16px;color:var(--ink);background:var(--paper);
  transition:border-color .2s,box-shadow .2s;
}
.auth-card input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(14,165,233,.16)}
.remember{display:flex;align-items:center;gap:9px;margin:2px 0 16px;font-size:15px;color:var(--muted);cursor:pointer}
.remember input{width:17px;height:17px;accent-color:var(--brand)}
.captcha-row{display:flex;gap:10px;align-items:stretch;margin-bottom:16px}
.captcha-img{flex:1;min-width:0}
.captcha-img svg{width:100%;height:auto;border-radius:10px;display:block}
.captcha-refresh{width:48px;flex:none;border:1.5px solid var(--line-2);border-radius:10px;background:var(--paper);color:var(--muted);display:grid;place-items:center;transition:.15s}
.captcha-refresh:hover{color:var(--brand);border-color:var(--brand);background:#f7fbfe}
.captcha-refresh svg{width:18px;height:18px}
.oauth-divider{display:flex;align-items:center;gap:14px;margin:22px 0;color:var(--faint);font-size:14px}
.oauth-divider::before,.oauth-divider::after{content:"";flex:1;height:1px;background:var(--line)}
.btn-google{background:var(--paper);border:1.5px solid var(--line-2);color:var(--ink)}
.btn-google:hover{border-color:var(--brand);background:#f7fbfe}
.btn-google svg{width:19px;height:19px}
.auth-card .alt{margin-top:20px;text-align:center;color:var(--muted);font-size:15.5px}
.auth-card .alt a{color:var(--brand);font-weight:600}
.auth-card .alt a:hover{text-decoration:underline}
.auth-card .fine{margin-top:10px;text-align:center;font-size:13px;color:var(--faint);line-height:1.6}
.auth-card .fine a{color:var(--faint);text-decoration:underline}

/* ---------- Legal pages ---------- */
.legal-page{max-width:760px;margin:0 auto;padding:clamp(48px,7vw,80px) 24px}
.legal-page h1{font-family:var(--head);font-weight:700;font-size:clamp(28px,4vw,40px);letter-spacing:-.02em;line-height:1.3;margin-bottom:8px}
.legal-page .lead{color:var(--muted);margin-bottom:32px;font-size:17px}
.legal-page h2{font-family:var(--head);font-size:20px;font-weight:600;margin:32px 0 10px;color:var(--ink)}
.legal-page p,.legal-page li{color:var(--muted);font-size:15.5px;line-height:1.75}
.legal-page ul{margin:10px 0 10px 22px}
.legal-page li{margin-bottom:6px}
.legal-page strong{color:var(--ink)}
.legal-page .updated{font-size:13px;color:var(--faint);margin-top:8px}
.legal-foot{margin-top:0;padding:28px 0}
.legal-foot .legal{margin-top:0;border-top:0;padding-top:0}

/* ---------- 404 ---------- */
.notfound-wrap{min-height:calc(100vh - 70px);display:flex;align-items:center;justify-content:center;padding:40px 24px}
.notfound{text-align:center;max-width:520px}
.notfound .icon{width:64px;height:64px;margin:0 auto 20px;border-radius:18px;background:var(--grad);color:#fff;display:grid;place-items:center}
.notfound .icon svg{width:32px;height:32px}
.notfound .code{font-family:var(--head);font-size:110px;font-weight:700;line-height:1;background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.notfound h1{font-family:var(--head);font-size:24px;font-weight:700;margin:14px 0 8px}
.notfound p{color:var(--muted);margin-bottom:26px;font-size:15.5px}

/* ---------- Toast (light) ---------- */
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:500;display:flex;flex-direction:column;gap:10px;align-items:center;pointer-events:none;width:min(92vw,460px)}
.toast-item{width:100%;display:flex;align-items:center;gap:10px;background:var(--paper);border:1.5px solid var(--line-2);border-radius:12px;padding:12px 16px;font-size:15px;color:var(--ink);box-shadow:0 14px 40px -18px rgba(15,28,46,.3);animation:toastin .25s ease}
@keyframes toastin{from{opacity:0;transform:translateY(8px)}}
.toast-item.error{border-color:rgba(229,72,77,.5)}
.toast-item.success{border-color:rgba(15,157,88,.5)}
.toast-item .dot{width:8px;height:8px;border-radius:50%;flex:none;background:var(--brand)}
.toast-item.error .dot{background:var(--danger)}
.toast-item.success .dot{background:var(--ok)}

/* ---------- Utilities ---------- */
.hidden{display:none!important}

/* ---------- Light patches for legacy app/admin CSS ---------- */
.btn-primary,.btn-pro{color:#fff}
.btn-google{border:1.5px solid var(--line-2)}
.plan-option:hover{border-color:var(--line-2)}
.modal-overlay{background:rgba(15,28,46,.45)}
.bg-glow{background:radial-gradient(circle at 30% 28%,rgba(79,209,255,.25),rgba(14,165,233,.10) 60%,rgba(19,160,232,.06));position:fixed;inset:0;pointer-events:none}
.card .note a,.note a{color:var(--brand);text-decoration:underline}
.a-content a,.admin-main a{color:var(--brand)}
.btn-outline{border:1.5px solid var(--line-2);color:var(--ink);background:var(--paper)}
.btn-outline:hover{border-color:var(--brand);color:var(--brand)}
input[type="range"]{accent-color:var(--brand)}

/* ---------- Responsive ---------- */
@media (max-width:1080px){
  .split{grid-template-columns:1fr}
  .split>.head{position:static}
  .plans{grid-template-columns:1fr 1fr}
  .plans .plan{border-top:1px solid var(--line)}
  .plans .plan:first-child,.plans .plan:nth-child(2){border-top:0}
  .plans .plan:nth-child(odd){border-left:0}
  .plans .plan.feat{border-top-color:transparent}
  .plans .plan .desc{min-height:0}
  .foot{grid-template-columns:1fr 1fr}
  .foot>div:first-child{grid-column:1/-1}
}
@media (max-width:860px){
  .nav-links,.nav-cta .btn-ghost{display:none}
  .burger{display:inline-flex}
  .hero-bottom{grid-template-columns:1fr}
  .steps3{grid-template-columns:1fr;gap:32px}
  .tl-body{grid-template-columns:96px minmax(0,1fr)}
  .tl-labels>div{padding:0 12px;font-size:14px}
  .tl-labels small{display:none}
  .tl-steps{grid-template-columns:1fr 1fr}
  .st:nth-child(odd){border-left:0}
  .st:nth-child(n+3){border-top:1px solid var(--line)}
  .diff{grid-template-columns:1fr}
  .diff>div{border-left:0;border-top:1px solid var(--line)}
  .diff>div:first-child{border-top:0}
}
@media (max-width:620px){
  .hero-actions .btn{flex:1 1 100%}
  .tl-foot .btn{width:100%}
  .tl-code{display:none}
  .plans{grid-template-columns:1fr}
  .plans .plan{border-left:0;border-top:1px solid var(--line)}
  .plans .plan:first-child{border-top:0}
  .plans .plan.feat{border-top-color:transparent}
  .cmp .r{grid-template-columns:1fr 1fr}
  .cmp .r>div:first-child{grid-column:1/-1;background:#f7fbfe;border-bottom:1px solid var(--line);padding:12px 18px}
  .cmp .r>div+div{border-left:0}
  .cmp .r>div:nth-child(3){border-left:1px solid var(--line)}
  .cmp .hd{display:none}
  .cmp .r:not(.hd)>div:nth-child(2)::before,.cmp .r:not(.hd)>div:nth-child(3)::before{display:block;font-size:12.5px;color:var(--faint);font-weight:400}
  .cmp .r:not(.hd)>div:nth-child(2)::before{content:"ก่อน"}
  .cmp .r:not(.hd)>div:nth-child(3)::before{content:"หลัง"}
  .row{grid-template-columns:auto 1fr}
  .row .v{grid-column:2;text-align:left}
  .nav-cta .btn-primary{height:40px;padding:0 16px}
  .foot{grid-template-columns:1fr 1fr}
  details .ans{padding-right:0}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* ---------- Logo mark ---------- */
.brand-mark{background:#fff;border:1px solid var(--line);border-radius:9px;overflow:hidden;display:grid;place-items:center}
.brand-mark img{width:100%;height:100%;object-fit:cover;display:block}
.a-mark img{width:100%;height:100%;object-fit:contain;border-radius:inherit;display:block}
.logo-mark img{width:100%;height:100%;object-fit:contain;display:block}

/* ---------- hCaptcha ---------- */
.h-captcha{display:flex;justify-content:center;margin:4px 0 16px;min-height:78px}

/* ---------- Theme toggle button ---------- */
.theme-btn{width:42px;height:42px;border-radius:11px;border:1.5px solid transparent;background:linear-gradient(var(--paper),var(--paper)) padding-box,var(--grad) border-box;color:var(--brand);display:grid;place-items:center;cursor:pointer;flex:none;transition:background .2s,color .2s}
.theme-btn:hover{background:var(--grad);color:#fff}
.theme-btn svg{width:19px;height:19px}
.theme-btn.theme-floating{position:fixed;top:16px;right:16px;z-index:70;background:linear-gradient(var(--paper),var(--paper)) padding-box,var(--grad) border-box;box-shadow:0 10px 30px -18px rgba(15,28,46,.4)}

/* ---------- Stats band (รายละเอียดเพิ่ม) ---------- */
.stats4{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2.4vw,32px);text-align:center}
.stat4 b{display:block;font-family:var(--head);font-weight:700;font-size:clamp(30px,3.6vw,46px);letter-spacing:-.02em;line-height:1.1;background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat4 span{display:block;margin-top:7px;color:var(--muted);font-size:15px}
@media (max-width:700px){.stats4{grid-template-columns:1fr 1fr}}

.nav-links{gap:clamp(14px,1.8vw,26px)}

/* ================= Dark mode ================= */
html[data-theme="dark"]{
  --bg:#0a1220;
  --paper:#0f1b2e;
  --ink:#eaf2ff;
  --muted:#8ba2c6;
  --faint:#63799e;
  --line:#1d2c48;
  --line-2:#2a3c5e;
  --brand:#38bdf8;
  --brand-dark:#7dd3fc;
  --grad-text:linear-gradient(135deg,#8fe3ff 0%,#4fc6fa 55%,#2db3f0 100%);
  --bg-soft:#0d1728;
  --sidebar:#0c1626;
  --surface:#0f1b2e;
  --surface-2:#132038;
  --surface-3:#1a2946;
  --border:#1d2c48;
  --border-weak:#16233c;
  --border-strong:#2a3c5e;
  --text:#eaf2ff;
  --text-2:#9db4d6;
  --accent:#38bdf8;
  --accent-hover:#7dd3fc;
  --accent-soft:rgba(56,189,248,.14);
  --blue:#4fc6fa;
  --cyan:#8fe3ff;
  --success:#34d399;
  --success-bright:#4adea0;
  --success-soft:rgba(52,211,153,.13);
  --warning:#f5b544;
  --warning-soft:rgba(245,181,68,.14);
  --danger:#fb7185;
  --danger-soft:rgba(251,113,133,.13);
  --pro:#f5b544;
  --shadow-lg:0 24px 60px -28px rgba(0,0,0,.6);
  --shadow-md:0 10px 30px -16px rgba(0,0,0,.5);
}
html[data-theme="dark"] .site-header{background:rgba(10,18,32,.84)}
html[data-theme="dark"] .cmp .hd>div{background:var(--surface-2)}
html[data-theme="dark"] .diff{background:var(--surface-2)}
html[data-theme="dark"] .st .ib{background:var(--surface-3)}
html[data-theme="dark"] .brand-mark{background:#0f1b2e}
html[data-theme="dark"] .btn-ghost{color:#7dd3fc}
html[data-theme="dark"] .orb{opacity:.55}
html[data-theme="dark"] .theme-btn{box-shadow:none}
@media (max-width:620px){
  html[data-theme="dark"] .cmp .r>div:first-child{background:var(--surface-2);border-color:var(--line)}
}

/* ---------- Language toggle ---------- */
.lang-btn{width:42px;height:42px;border-radius:11px;border:1.5px solid transparent;background:linear-gradient(var(--paper),var(--paper)) padding-box,var(--grad) border-box;color:var(--brand);display:grid;place-items:center;cursor:pointer;flex:none;font-family:var(--head);font-weight:700;font-size:13px;letter-spacing:.02em;transition:background .2s,color .2s}
.lang-btn:hover{background:var(--grad);color:#fff}
.lang-btn.lang-floating{position:fixed;top:16px;right:68px;z-index:70;box-shadow:0 10px 30px -18px rgba(15,28,46,.4)}
html[data-theme="dark"] .lang-btn{box-shadow:none}
@media (max-width:640px){.lang-btn{width:44px;height:44px}}

/* ---------- brand logo (แนวนอน เต็มสัดส่วน ไม่ถูกกรอบตัด) ---------- */
.brand-mark{width:auto;height:34px;border-radius:0;background:transparent;border:0;overflow:visible;display:block}
.brand-mark img{height:100%;width:auto;object-fit:contain;display:block}
html[data-theme="dark"] .brand-mark{background:transparent}
.a-mark{width:46px;height:30px;border-radius:8px;background:transparent}
.a-mark img{width:100%;height:100%;object-fit:contain}
@media (max-width:640px){.brand-mark{height:30px}}

/* ---------- navbar: กันเมนูชนกัน / ตัดบรรทัด (EN ยาวกว่า TH) ---------- */
.nav{gap:12px}
.nav-links a{white-space:nowrap}
.nav-links{gap:clamp(10px,1.5vw,22px)}
@media (max-width:1400px){
  .nav-links a{font-size:14.5px;gap:6px}
  .nav-links a svg.i{width:15px;height:15px}
  .nav-cta .btn-sm{padding:0 12px}
  .nav-cta{gap:8px}
}
@media (max-width:1180px){
  .nav-links a svg.i{display:none}
  .nav-links{gap:14px}
}

/* ---------- navbar มือถือ: ไม่ดันกัน ---------- */
@media (max-width:860px){
  .nav{height:64px;gap:10px}
  .brand{font-size:19px;gap:8px;min-width:0;white-space:nowrap}
  .brand-mark{height:28px}
  .lang-btn,.theme-btn{width:40px;height:40px}
  .lang-btn{font-size:12.5px}
  .nav-cta{gap:8px}
  .nav-cta .btn{font-size:14px;padding:0 14px;height:40px}
  .burger{width:40px;height:40px}
}
@media (max-width:560px){
  .nav-cta .btn-primary{display:none}
  .brand{font-size:18px}
}

/* ---------- dark mode: แถบ band (stats / compare / pricing) ---------- */
html[data-theme="dark"] .band{background:var(--surface-2);border-block:1px solid var(--line)}

/* ---------- navbar desktop: กันโลโก้/ชื่อแบรนด์ถูกทับ ---------- */
.brand{flex:0 0 auto;white-space:nowrap;min-width:0}
.brand-mark{flex:none}
@media (max-width:1500px){
  .nav-links a{font-size:14.5px;gap:6px}
  .nav-links a svg.i{width:15px;height:15px}
  .nav-links{gap:clamp(10px,1.2vw,18px)}
  .nav-cta .btn-sm{padding:0 12px}
}
@media (max-width:1280px){
  .nav-links a svg.i{display:none}
  .nav-links{gap:14px}
  .brand{font-size:20px}
}
@media (max-width:1080px){
  .nav-links a{font-size:14px}
  .nav-cta .btn-sm{font-size:13.5px}
}