:root{font-family:Inter,"Noto Sans Thai",system-ui,sans-serif;color:#edf3ff;background:#071019;--panel:#0d1824;--line:#1e3041;--muted:#91a2b5;--brand:#52e0bd;--blue:#7693ff}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(circle at 70% -10%,#142f45 0,transparent 38%),#071019;color:#edf3ff}a{color:inherit;text-decoration:none}.wordmark{display:inline-flex;align-items:center;gap:10px;font-size:21px;font-weight:850;letter-spacing:-.04em}.wordmark span{display:grid;place-items:center;width:36px;height:36px;border-radius:11px;background:linear-gradient(145deg,var(--blue),var(--brand));color:#061119}.topbar{height:76px;max-width:1220px;margin:auto;padding:0 28px;display:flex;align-items:center;justify-content:space-between}.topbar nav{display:flex;align-items:center;gap:27px;color:#aebccc;font-size:14px}.button{display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:13px;padding:14px 21px;background:linear-gradient(120deg,#6f84ff,#32d1b2);color:#071019;font-weight:800;cursor:pointer;box-shadow:0 14px 40px #3cc7b326}.button.small{padding:10px 16px}.button.wide{width:100%;font-size:15px}.hero-v2{min-height:690px;max-width:1220px;margin:auto;padding:95px 28px 80px;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:80px}.eyebrow{color:#65d9c0;font-size:11px;letter-spacing:.19em;font-weight:850;margin:0 0 14px}.hero-v2 h1{font-size:clamp(48px,6.4vw,82px);line-height:1.02;letter-spacing:-.065em;margin:0 0 25px}.hero-v2 h1 em{font-style:normal;color:#7a98ff}.lead{color:#a9b8c9;line-height:1.75;font-size:19px;max-width:620px}.hero-actions{display:flex;align-items:center;gap:24px;margin:32px 0}.quiet-link{color:#c2cfdb;font-weight:700}.trust-row{display:flex;gap:22px;color:#8193a6;font-size:12px;flex-wrap:wrap}.product-preview{background:linear-gradient(160deg,#101e2b,#0a141e);border:1px solid #294153;border-radius:26px;padding:20px;box-shadow:0 36px 100px #0009;transform:perspective(1000px) rotateY(-4deg)}.preview-head{display:grid;grid-template-columns:auto 1fr;gap:3px 9px;padding:9px}.preview-head small{grid-column:2;color:#75899c}.online-dot{width:9px;height:9px;border-radius:50%;background:#42e5ae;box-shadow:0 0 18px #42e5ae;margin-top:6px}.preview-chat{min-height:280px;background:#08121b;border:1px solid #172c3c;border-radius:19px;padding:28px 20px;display:flex;flex-direction:column;gap:15px}.preview-chat p{max-width:82%;padding:13px 16px;border-radius:16px;line-height:1.55;font-size:13px;margin:0}.preview-chat .customer{align-self:flex-end;background:#1c3048}.preview-chat .agent{background:#12271f;border:1px solid #275846}.preview-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding-top:15px}.preview-stats div{background:#0a1621;border-radius:12px;padding:13px}.preview-stats b,.preview-stats span{display:block}.preview-stats b{font-size:20px}.preview-stats span{color:#74889b;font-size:10px;margin-top:3px}.section{max-width:1164px;margin:auto;padding:90px 28px}.section>h2,.feature-band h2{font-size:clamp(32px,4vw,52px);letter-spacing:-.045em;margin:0 0 38px}.step-grid,.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.step-grid article,.plans article{padding:27px;background:#0d1824;border:1px solid #1f3445;border-radius:19px}.step-grid i{font-style:normal;color:#61ddbf;font-size:12px}.step-grid h3{font-size:20px;margin:34px 0 8px}.step-grid p,.plans p,.feature-list p{color:#8fa1b4;line-height:1.65;font-size:14px}.feature-band{display:grid;grid-template-columns:.85fr 1.15fr;gap:70px;background:#0a151f;border-radius:30px;padding:55px;margin-top:45px}.feature-list{display:grid;grid-template-columns:1fr 1fr;gap:12px}.feature-list article{padding:20px;border:1px solid #203445;border-radius:15px}.plans article.featured{border-color:#4fc9b0;transform:translateY(-8px)}.plans h3{font-size:21px}.plans strong{font-size:32px}.plans small{color:#8294a8}.cta{max-width:1108px;margin:60px auto 110px;text-align:center;padding:65px 25px;border:1px solid #284252;border-radius:30px;background:radial-gradient(circle at 50% 100%,#123f3a,transparent 60%),#0c1822}.cta h2{font-size:40px;margin:0}.cta p{color:#91a2b5;margin:14px 0 28px}footer{border-top:1px solid #162837;max-width:1164px;margin:auto;padding:35px 28px 55px;display:flex;gap:22px;color:#8293a5}footer b{color:#fff}footer a{margin-left:auto}.auth-page{min-height:100vh}.auth-brand{position:fixed;left:32px;top:25px}.auth-shell{min-height:100vh;display:grid;grid-template-columns:1fr 540px;max-width:1200px;margin:auto;align-items:center;padding:90px 28px;gap:80px}.auth-aside h1{font-size:58px;letter-spacing:-.055em;margin:0 0 20px}.auth-aside>p{color:#9babbc;font-size:18px;line-height:1.7}.auth-aside ul{list-style:none;padding:0;margin-top:30px;display:grid;gap:14px}.auth-aside li:before{content:'✓';color:#55dfbd;margin-right:12px}.auth-card{background:#0d1824;border:1px solid #23394a;border-radius:24px;padding:36px;box-shadow:0 30px 90px #0006}.auth-title h1,.auth-title h2{font-size:34px;margin:0 0 8px}.auth-title p{color:#899bad}.auth-title a,.auth-switch a{color:#66dec1}form{display:grid;gap:15px;margin-top:25px}label{display:grid;gap:7px;font-size:12px;color:#a8b8c8;font-weight:700}input,select,textarea{width:100%;border:1px solid #294052;background:#08131d;color:#eef4ff;border-radius:11px;padding:13px 14px;font:inherit;outline:none}input:focus,select:focus,textarea:focus{border-color:#5ad9bd;box-shadow:0 0 0 3px #4ed9ba17}.form-result{min-height:22px;color:#ff8f9f;font-size:13px}.login-wrap{min-height:100vh;display:grid;place-items:center;padding:90px 22px}.login-card{width:min(460px,100%)}.auth-switch{text-align:center;color:#8ea0b3}.admin-login{min-height:100vh;display:grid;place-items:center;padding:24px}.admin-card{width:min(430px,100%);text-align:center;background:#0d1824;border:1px solid #294052;border-radius:22px;padding:42px}.admin-logo{margin:auto;width:58px;height:58px;display:grid;place-items:center;border-radius:17px;background:linear-gradient(135deg,#6675ff,#32c7db);font-size:28px;font-weight:800}.admin-card h1{font-size:34px}.admin-card p{color:#91a2b5}.admin-card form{display:grid}.admin-card #adminResult{color:#ff8e9f;min-height:24px}@media(max-width:850px){.topbar nav>a:not(.button){display:none}.hero-v2{grid-template-columns:1fr;padding-top:60px;gap:45px}.product-preview{transform:none}.step-grid,.plans{grid-template-columns:1fr}.feature-band{grid-template-columns:1fr;margin-inline:16px}.auth-shell{grid-template-columns:1fr;gap:35px}.auth-aside{padding-top:30px}.auth-aside h1{font-size:42px}}@media(max-width:560px){.topbar{padding:0 18px}.hero-v2,.section{padding-left:18px;padding-right:18px}.hero-v2 h1{font-size:46px}.hero-actions{align-items:flex-start;flex-direction:column}.feature-list{grid-template-columns:1fr}.auth-brand{left:20px}.auth-shell{padding:90px 16px 30px}.auth-card{padding:25px}.auth-aside{display:none}.cta{margin:30px 16px 70px}.cta h2{font-size:30px}footer{margin:0 16px;padding-inline:0}}

.nav-logout{appearance:none;border:1px solid #37495a;background:#0d1a25;color:#ff9aab;font:inherit;font-size:13px;font-weight:700;line-height:1;border-radius:11px;padding:10px 14px;cursor:pointer;transition:.18s ease}.nav-logout:hover{color:#ffd0d8;border-color:#7f4652;background:#1c1520;transform:translateY(-1px)}.nav-logout:focus-visible{outline:3px solid #ff8fa733;outline-offset:2px}.nav-logout[hidden]{display:none!important}

/* BIZ public landing */
.marketing{overflow-x:clip;background:radial-gradient(ellipse 45% 26% at 78% 13%,#123349aa,transparent),radial-gradient(ellipse 40% 18% at 7% 29%,#24265670,transparent),#08111c}
.marketing .topbar{position:relative;z-index:5;max-width:1280px;height:84px}
.marketing .topbar nav a:not(.button):hover{color:#fff}
.marketing .topbar .button{gap:8px}
.marketing .button,.marketing .quiet-link,.marketing .step-grid article,.marketing .feature-list article,.marketing .plans article{transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease,background .25s ease}
.marketing .button:hover{transform:translateY(-3px);box-shadow:0 20px 48px #48d2b245}
.marketing .button:focus-visible,.marketing a:focus-visible,.marketing button:focus-visible{outline:3px solid #78e6d0;outline-offset:4px}
.marketing .hero-v2{position:relative;isolation:isolate;max-width:1280px;min-height:660px;padding:68px 28px 88px;grid-template-columns:1.05fr .95fr;gap:64px}
.marketing .hero-copy,.marketing .hero-visual{position:relative;z-index:1}
.marketing .hero-eyebrow{display:inline-flex;align-items:center;gap:10px;padding:10px 15px;border:1px solid #5cdbcf55;background:#0e302eaa;border-radius:999px;letter-spacing:.08em;color:#8cf4db;font-size:11px;line-height:1.4;max-width:100%}
.marketing .eyebrow-dot{flex:none;width:7px;height:7px;border-radius:50%;background:#75e9cf;box-shadow:0 0 0 5px #64e6c321}
.marketing .hero-v2 h1{font-size:clamp(50px,5.4vw,74px);line-height:1.09;letter-spacing:-.06em;margin:20px 0 24px;text-wrap:balance}
.marketing .hero-v2 h1 em,.marketing .section h2 em,.marketing .cta h2 em{font-style:normal;background:linear-gradient(105deg,#83a3ff 8%,#79ddff 42%,#67e5c1 89%);-webkit-background-clip:text;background-clip:text;color:transparent}
.marketing .lead{font-size:18px;line-height:1.75;color:#b8c9d9;max-width:570px}
.marketing .hero-actions{margin:35px 0 31px;gap:27px}
.marketing .hero-primary{min-height:55px;gap:17px;padding-inline:25px}
.marketing .hero-primary span,.marketing .cta .button span{font-size:18px;transition:transform .2s ease}
.marketing .hero-primary:hover span,.marketing .cta .button:hover span{transform:translate(2px,-2px)}
.marketing .quiet-link{display:inline-flex;align-items:center;gap:9px;color:#deebf8}
.marketing .quiet-link:hover{color:#8fe9dc;transform:translateX(3px)}
.marketing .trust-row{gap:10px}
.marketing .trust-row span{padding:8px 11px;border:1px solid #31516680;border-radius:999px;background:#0d2433a8;color:#b5c8d7;font-size:11px}
.marketing .hero-orb{position:absolute;z-index:0;border-radius:50%;filter:blur(45px);pointer-events:none;opacity:.7}
.marketing .hero-orb-one{width:340px;height:340px;right:7%;top:0;background:#204ea788;animation:orbDrift 11s ease-in-out infinite alternate}
.marketing .hero-orb-two{width:250px;height:250px;right:38%;bottom:1%;background:#0d927866;animation:orbDrift 13s ease-in-out infinite alternate-reverse}
.marketing .hero-visual{padding:28px 8px 25px;animation:heroRise .85s both .12s}
.marketing .product-preview{position:relative;z-index:1;padding:0;border:1px solid #4b748c88;border-radius:26px;background:linear-gradient(155deg,#152537,#0b1723 75%);box-shadow:0 42px 100px #0009,0 0 75px #4465dc1c;transform:rotate(-1.5deg);overflow:hidden}
.marketing .preview-toolbar{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid #3450687a}
.marketing .preview-toolbar-left{display:flex;align-items:center;gap:11px}
.marketing .preview-avatar{display:grid;place-items:center;width:39px;height:39px;border-radius:13px;background:linear-gradient(140deg,#7b91ff,#58dfc3);color:#092134;font-weight:900}
.marketing .preview-toolbar b,.marketing .preview-toolbar small{display:block}
.marketing .preview-toolbar b{font-size:14px}
.marketing .preview-toolbar small{font-size:10px;color:#a7b9c9;margin-top:3px}
.marketing .preview-toolbar .online-dot{display:inline-block;width:6px;height:6px;margin:0 3px 0 0;vertical-align:middle}
.marketing .preview-sparkle{font-size:20px;color:#75dbc8}
.marketing .preview-tabs{display:flex;gap:7px;padding:15px 20px 0}
.marketing .preview-tab{border:1px solid #2d495e;background:#101f2e;color:#9db1c4;border-radius:9px;padding:8px 13px;font:700 11px Inter,"Noto Sans Thai",system-ui,sans-serif;cursor:pointer;transition:.2s ease}
.marketing .preview-tab:hover{color:#fff;border-color:#65d6cb}
.marketing .preview-tab.active{background:#1c3b45;border-color:#5ccdbd;color:#a9f0de}
.marketing .preview-chat{min-height:278px;margin:14px 17px 0;padding:28px 20px;gap:18px;border-color:#34536a;border-radius:18px;background:radial-gradient(circle at 15% 12%,#142c3c,#0a1622 60%)}
.marketing .preview-chat p{font-size:13px;line-height:1.6;max-width:85%;box-shadow:0 8px 25px #0002}
.marketing .preview-chat .customer{background:#253c60;border:1px solid #45649c;animation:chatEnter .6s both .28s}
.marketing .preview-chat .agent{background:#163c32;border:1px solid #347761;animation:chatEnter .65s both .62s}
.marketing .preview-typing{display:flex;gap:4px;width:max-content;padding:8px 12px;border:1px solid #315062;border-radius:12px;background:#122333}
.marketing .preview-typing i{width:5px;height:5px;border-radius:50%;background:#69d9c6;animation:typingDots 1.2s infinite}
.marketing .preview-typing i:nth-child(2){animation-delay:.2s}.marketing .preview-typing i:nth-child(3){animation-delay:.4s}
.marketing .preview-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:17px 20px;color:#8ca3b8;font-size:11px}
.marketing .preview-footer b{color:#81e9cd;font-size:11px;text-align:right}
.marketing .floating-badge{position:absolute;z-index:2;display:flex;align-items:center;gap:10px;padding:11px 15px;border:1px solid #5a8193a8;border-radius:13px;background:#142b3be8;box-shadow:0 18px 40px #0008;color:#9ef0dd;font-size:12px;backdrop-filter:blur(12px);animation:badgeFloat 5s ease-in-out infinite}
.marketing .floating-badge-top{right:-10px;top:3px}.marketing .floating-badge-bottom{left:-15px;bottom:8px;animation-delay:-2s}
.marketing .floating-badge-bottom span{display:grid;place-items:center;width:23px;height:23px;border-radius:7px;background:#5ecfbb;color:#08212e;font-weight:900}
.marketing .value-strip{max-width:1180px;margin:-12px auto 30px;padding:16px 22px;display:flex;justify-content:space-between;gap:12px;border-block:1px solid #2943567d;color:#a6c3d2;font-size:12px;font-weight:700;letter-spacing:.025em}
.marketing .value-strip span:before{content:"✦";color:#72e0c7;margin-right:10px}
.marketing .section{padding-block:90px}
.marketing .section h2,.marketing .cta h2{line-height:1.16;text-wrap:balance}
.marketing .section-intro{max-width:630px;margin:-16px 0 32px;color:#afc0d1;line-height:1.75;font-size:16px}
.marketing .step-grid article,.marketing .plans article{position:relative;overflow:hidden;background:linear-gradient(160deg,#142436,#0c1825);border:1px solid #345069;box-shadow:0 18px 50px #0002}
.marketing .step-grid article:before{content:"";position:absolute;inset:0 0 auto;height:3px;background:linear-gradient(90deg,#7895ff,#64dabc);opacity:.75}
.marketing .step-grid article:hover,.marketing .feature-list article:hover,.marketing .plans article:hover{transform:translateY(-6px);border-color:#5b9eab;box-shadow:0 24px 55px #0005}
.marketing .step-grid i{font-size:12px;letter-spacing:.15em;color:#86dacf}
.marketing .step-icon{display:grid;place-items:center;width:47px;height:47px;margin:21px 0 0;border-radius:13px;background:#203d5c;color:#85b8ff;font-size:25px}
.marketing .step-grid article:nth-child(2) .step-icon{background:#1c4c46;color:#7ae8c8}
.marketing .step-grid article:nth-child(3) .step-icon{background:#3a3658;color:#b5a6ff}
.marketing .step-grid h3{margin:18px 0 9px}
.marketing .feature-band{max-width:1164px;gap:45px;border:1px solid #2b4d60;background:radial-gradient(circle at 0 10%,#243b7370,transparent 55%),#0c1a27}
.marketing .feature-band .section-intro{margin:5px 0 0}
.marketing .feature-list article{background:#101f2c;border-color:#335066}
.marketing .feature-list article span{display:grid;place-items:center;width:36px;height:36px;margin-bottom:14px;border-radius:10px;background:#1f4052;color:#7ee0d1;font-size:20px}
.marketing .feature-list article b{font-size:15px}
.marketing .feature-list article p{margin-bottom:0}
.marketing .plans-section .plans article{min-height:282px}
.marketing .plans article.featured{border-color:#60d7b8;box-shadow:0 20px 55px #2fb89719}
.marketing .plans article.featured:hover{transform:translateY(-13px)}
.marketing .cta{position:relative;overflow:hidden;background:radial-gradient(circle at 72% 95%,#21599b88,transparent 46%),radial-gradient(circle at 15% 10%,#12685d88,transparent 45%),#0d1c2b;border-color:#4c7e92;box-shadow:0 30px 80px #0004}
.marketing .cta h2{font-size:clamp(34px,4.5vw,54px)}
.marketing .cta .button{gap:13px}
.marketing.has-motion .reveal{opacity:0;transform:translateY(26px);transition:opacity .65s ease,transform .65s ease}
.marketing.has-motion .reveal.is-visible{opacity:1;transform:translateY(0)}
@keyframes orbDrift{to{transform:translate(28px,-23px) scale(1.12)}}
@keyframes heroRise{from{opacity:0;transform:translateY(25px)}to{opacity:1;transform:translateY(0)}}
@keyframes chatEnter{from{opacity:0;transform:translateY(11px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes typingDots{0%,55%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
@keyframes badgeFloat{50%{transform:translateY(-8px)}}
@media(max-width:1000px){.marketing .hero-v2{gap:35px}.marketing .hero-v2 h1{font-size:clamp(49px,5.5vw,66px)}.marketing .floating-badge-top{right:0}.marketing .floating-badge-bottom{left:0}}
@media(max-width:850px){.marketing .hero-v2{grid-template-columns:1fr;min-height:0;padding-top:45px;gap:22px}.marketing .hero-copy{max-width:720px}.marketing .hero-v2 h1{font-size:clamp(50px,7vw,70px)}.marketing .hero-visual{max-width:620px;width:100%;margin-inline:auto}.marketing .value-strip{margin-top:0;flex-wrap:wrap;justify-content:center}.marketing .step-grid article:hover,.marketing .feature-list article:hover{transform:none}}
@media(max-width:560px){.marketing .topbar{height:72px}.marketing .topbar nav{gap:8px}.marketing .topbar .button{padding:10px 11px;font-size:12px}.marketing .topbar .nav-logout{padding:10px;font-size:11px}.marketing .hero-v2{padding:42px 18px 55px}.marketing .hero-eyebrow{font-size:10px}.marketing .hero-v2 h1{font-size:clamp(42px,11.8vw,56px);letter-spacing:-.055em}.marketing .lead{font-size:16px}.marketing .hero-actions{align-items:stretch;gap:17px}.marketing .hero-primary{width:100%}.marketing .quiet-link{justify-content:center}.marketing .trust-row{gap:7px}.marketing .trust-row span{font-size:10px}.marketing .hero-visual{padding:18px 0}.marketing .product-preview{transform:none}.marketing .floating-badge{display:none}.marketing .preview-chat{min-height:240px}.marketing .preview-chat p{max-width:92%}.marketing .preview-footer{align-items:flex-start;flex-direction:column}.marketing .value-strip{justify-content:flex-start;padding-inline:18px}.marketing .value-strip span{width:calc(50% - 10px);font-size:10px}.marketing .section{padding-block:70px}.marketing .section>h2{font-size:36px}.marketing .feature-band{margin-inline:16px}.marketing .plans article.featured,.marketing .plans article.featured:hover{transform:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.marketing *,.marketing *:before,.marketing *:after{animation:none!important;transition:none!important}.marketing.has-motion .reveal{opacity:1;transform:none}.marketing .hero-visual{opacity:1;transform:none}}