@font-face{font-family:Noto Sans Thai Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url(../media/noto-sans-thai-thai-wght-normal.35a9qnauvobla.woff2)format("woff2-variations");unicode-range:U+2D7,U+303,U+331,U+E01-E5B,U+200C-200D,U+25CC}@font-face{font-family:Noto Sans Thai Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url(../media/noto-sans-thai-latin-ext-wght-normal.0dnd662bub_gf.woff2)format("woff2-variations");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Noto Sans Thai Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url(../media/noto-sans-thai-latin-wght-normal.3sa71yz_9i4ni.woff2)format("woff2-variations");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{--ink:#17211b;--muted:#66706a;--surface:#fff;--canvas:#f5f7f5;--line:#17211b1a;--green:#08783e;--green-bright:#06c755;--green-soft:#e9f8ef;--blue-soft:#eaf2ff;--shadow:0 0 0 1px var(--line), 0 8px 24px #182a1f0f}*{box-sizing:border-box}html{scroll-behavior:smooth}body{color:var(--ink);background:var(--canvas);-webkit-font-smoothing:antialiased;margin:0;font-family:Noto Sans Thai Variable,system-ui,sans-serif}a{color:inherit;text-decoration:none}button{font:inherit}:focus-visible{outline-offset:3px;outline:3px solid #0070f373}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.brand{letter-spacing:-.5px;align-items:center;gap:10px;font-size:19px;font-weight:650;display:inline-flex}.brand-mark{color:#fff;background:var(--ink);border-radius:9px;place-items:center;width:34px;height:34px;display:grid}.landing{background:#fbfcfb;min-height:100vh;overflow:hidden}.landing-nav{justify-content:space-between;align-items:center;max-width:1180px;height:72px;margin:auto;padding:0 24px;display:flex}.nav-login{min-height:42px;box-shadow:0 0 0 1px var(--line);background:#fff;border-radius:8px;place-items:center;padding:10px 18px;font-size:14px;font-weight:600;display:grid}.hero{grid-template-columns:1.05fr .95fr;align-items:center;gap:80px;max-width:1180px;min-height:640px;margin:auto;padding:80px 24px 96px;display:grid}.hero-copy{max-width:610px}.eyebrow{color:var(--green);background:var(--green-soft);border-radius:999px;align-items:center;gap:8px;padding:7px 11px;font-size:13px;font-weight:600;display:inline-flex}.live-dot{background:var(--green-bright);border-radius:50%;width:7px;height:7px;box-shadow:0 0 0 4px #06c7551f}.hero h1{letter-spacing:-3.2px;margin:24px 0 20px;font-size:clamp(44px,5vw,67px);font-weight:660;line-height:1.08}.hero h1 span{color:var(--green)}.hero-copy>p{max-width:570px;color:var(--muted);margin:0 0 32px;font-size:18px;line-height:1.85}.line-button{color:#fff;background:#06c755;border-radius:11px;align-items:center;gap:12px;width:fit-content;min-height:56px;padding:8px 18px 8px 9px;font-weight:620;transition:transform .15s,background .15s;display:flex;box-shadow:0 8px 24px #06c75538}.line-button:hover{background:#05b84e;transform:translateY(-2px)}.line-logo{color:#06c755;background:#fff;border-radius:8px;place-items:center;width:40px;height:40px;font-size:9px;font-weight:800;display:grid}.hero-copy small{color:#78817b;align-items:center;gap:7px;margin-top:15px;font-size:12px;display:flex}.hero-visual{place-items:center;min-height:430px;display:grid;position:relative}.hero-visual:before{content:"";background:radial-gradient(circle,#06c75529,#06c75505 64%,#0000 65%);border-radius:50%;width:440px;height:440px;position:absolute}.phone-card{z-index:1;background:#fff;border-radius:22px;width:min(100%,390px);padding:24px;transform:rotate(1.5deg);box-shadow:0 0 0 1px #16362314,0 28px 70px #16362324}.phone-top{justify-content:space-between;align-items:center;margin-bottom:18px;font-size:19px;font-weight:650;display:flex}.count-pill{background:var(--green-soft);color:var(--green);border-radius:999px;padding:5px 9px;font-size:11px}.preview-job{box-shadow:0 0 0 1px var(--line);border-radius:11px;grid-template-columns:40px 1fr auto;align-items:center;gap:11px;margin-top:10px;padding:14px;display:grid}.preview-job.active-preview{background:#fbfffc;box-shadow:0 0 0 1px #08783e40}.preview-icon{width:40px;height:40px;color:var(--green);background:var(--green-soft);border-radius:9px;place-items:center;display:grid}.preview-job b,.preview-job span{display:block}.preview-job b{font-size:13px;font-weight:620}.preview-job div>span{color:var(--muted);margin-top:3px;font-size:11px}.status-dot{background:var(--green-bright);border-radius:50%;width:8px;height:8px}.route-line{color:var(--muted);box-shadow:inset 0 1px var(--line);gap:9px;margin-top:20px;padding-top:18px;font-size:12px;display:flex}.floating-badge{z-index:2;box-shadow:var(--shadow);color:var(--green);background:#fff;border-radius:11px;align-items:center;gap:10px;padding:12px 15px;display:flex;position:absolute;bottom:48px;right:-6px}.floating-badge span,.floating-badge small{display:block}.floating-badge b{font-size:12px}.floating-badge small{color:var(--muted);font-size:10px}.value-strip{grid-template-columns:repeat(3,1fr);max-width:1180px;margin:0 auto 48px;padding:0 24px;display:grid}.value-strip>div{box-shadow:0 0 0 1px var(--line);background:#fff;padding:24px 28px}.value-strip>div:first-child{border-radius:12px 0 0 12px}.value-strip>div:last-child{border-radius:0 12px 12px 0}.value-strip span{color:var(--green);font-size:11px;font-weight:700}.value-strip b{margin:8px 0 2px;font-size:15px;display:block}.value-strip p{color:var(--muted);margin:0;font-size:12px}.app-shell{grid-template-columns:248px 1fr;min-height:100vh;display:grid}.sidebar{color:#fff;background:#17211b;flex-direction:column;height:100vh;padding:24px 16px;display:flex;position:sticky;top:0}.dashboard-brand{padding:0 10px 26px}.dashboard-brand .brand-mark{color:var(--ink);background:#fff}.sidebar nav{gap:5px;display:grid}.sidebar nav a,.sidebar-footer a{color:#ffffffb8;border-radius:8px;align-items:center;gap:12px;min-height:46px;padding:0 13px;font-size:14px;display:flex}.sidebar nav a:hover,.sidebar nav a:focus-visible,.sidebar-footer a:hover{color:#fff;background:#ffffff14}.sidebar-footer{border-top:1px solid #ffffff1a;margin-top:auto;padding-top:20px}.service-indicator{color:#67dc96;align-items:center;gap:9px;padding:0 13px 10px;font-size:11px;display:flex}.app-content{min-width:0}.mobile-header,.bottom-nav{display:none}.dashboard-page{width:min(100%,1080px);margin:auto;padding:60px 48px 80px}.page-heading{justify-content:space-between;align-items:end;gap:20px;margin-bottom:34px;display:flex}.overline{color:var(--green);letter-spacing:.08em;font-size:11px;font-weight:700}.page-heading h1{letter-spacing:-1.8px;margin:5px 0;font-size:clamp(30px,4vw,42px);line-height:1.2}.page-heading p{color:var(--muted);margin:0;font-size:14px}.demo-badge,.count-label{color:var(--muted);box-shadow:0 0 0 1px var(--line);white-space:nowrap;background:#fff;border-radius:999px;padding:6px 10px;font-size:11px}.dashboard-empty{box-shadow:var(--shadow);background:#fff;border-radius:14px;align-items:center;gap:22px;padding:28px;display:flex}.empty-illustration{min-width:68px;height:68px;color:var(--green);background:var(--green-soft);border-radius:14px;place-items:center;display:grid}.dashboard-empty h2{margin:0 0 5px;font-size:18px}.dashboard-empty p{max-width:700px;color:var(--muted);margin:0;font-size:13px;line-height:1.7}.quick-links{grid-template-columns:1fr 1fr;gap:18px;margin-top:18px;display:grid}.quick-links a{min-height:104px;box-shadow:0 0 0 1px var(--line);background:#fff;border-radius:12px;grid-template-columns:46px 1fr auto;align-items:center;gap:14px;padding:20px;transition:transform .15s,box-shadow .15s;display:grid}.quick-links a:hover{box-shadow:var(--shadow);transform:translateY(-2px)}.quick-icon{width:46px;height:46px;color:var(--green);background:var(--green-soft);border-radius:10px;place-items:center;display:grid}.quick-icon.blue{color:#2563c9;background:var(--blue-soft)}.quick-links b,.quick-links small{display:block}.quick-links b{font-size:15px}.quick-links small{color:var(--muted);margin-top:3px;font-size:11px}.job-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;display:grid}.job-card{min-width:0;box-shadow:0 0 0 1px var(--line);background:#fff;border-radius:12px;padding:22px}.job-card-top{justify-content:space-between;align-items:center;gap:12px;display:flex}.job-number{color:var(--muted);font-family:ui-monospace,monospace;font-size:11px}.job-status{color:#505a54;background:#f0f2f1;border-radius:999px;padding:5px 8px;font-size:10px;font-weight:650}.job-status.in_progress,.job-status.assigned{color:#1262b2;background:#eaf3ff}.job-status.completed{color:var(--green);background:var(--green-soft)}.job-status.cancelled{color:#a33a3a;background:#fff0f0}.job-card h2{letter-spacing:-.4px;margin:18px 0 8px;font-size:18px}.customer-name{color:#3e4842;align-items:center;gap:8px;margin:0;font-size:13px;display:flex}.job-card dl{box-shadow:inset 0 1px var(--line);gap:10px;margin:20px 0 0;padding-top:16px;display:grid}.job-card dl div{color:var(--muted);grid-template-columns:20px 1fr;gap:8px;font-size:12px;display:grid}.job-card dt,.job-card dd{margin:0}.skeleton{align-content:center;gap:14px;min-height:190px;display:grid}.skeleton span{background:linear-gradient(90deg,#edf0ee 25%,#f7f8f7 50%,#edf0ee 75%) 0 0/200% 100%;border-radius:5px;height:14px;animation:1.5s infinite shimmer}.skeleton span:first-child{width:35%}.skeleton span:nth-child(2){width:78%;height:20px}.skeleton span:nth-child(3){width:58%}@keyframes shimmer{to{background-position-x:-200%}}.state-card{text-align:center;min-height:330px;box-shadow:0 0 0 1px var(--line);background:#fff;border-radius:14px;flex-direction:column;justify-content:center;align-items:center;padding:42px 24px;display:flex}.state-icon{width:60px;height:60px;color:var(--green);background:var(--green-soft);border-radius:14px;place-items:center;display:grid}.state-icon.error{color:#a33a3a;background:#fff0f0}.state-card h2{margin:18px 0 6px;font-size:18px}.state-card p{max-width:440px;color:var(--muted);margin:0;font-size:13px}.state-card button{color:#fff;background:var(--ink);cursor:pointer;border:0;border-radius:8px;align-items:center;gap:8px;min-height:43px;margin-top:20px;padding:0 16px;font-weight:600;display:inline-flex}.state-card button.secondary-button{color:var(--ink);box-shadow:0 0 0 1px var(--line);background:#fff}@media (max-width:800px){.landing-nav{height:64px;padding:0 18px}.hero{text-align:center;grid-template-columns:1fr;gap:52px;min-height:auto;padding:52px 20px 64px}.hero-copy{margin:auto}.hero h1{letter-spacing:-2.2px;margin-top:20px}.hero-copy>p{font-size:16px}.line-button{margin:auto}.hero-copy small{justify-content:center}.hero-visual{min-height:400px}.floating-badge{right:4%}.value-strip{grid-template-columns:1fr;padding:0 20px}.value-strip>div:first-child{border-radius:12px 12px 0 0}.value-strip>div:last-child{border-radius:0 0 12px 12px}.app-shell{display:block}.sidebar{display:none}.mobile-header{height:64px;box-shadow:0 1px var(--line);background:#fff;justify-content:space-between;align-items:center;padding:0 18px;display:flex}.mobile-header .brand{font-size:17px}.mobile-header .brand-mark{width:31px;height:31px}.bottom-nav{z-index:10;padding:8px max(10px, env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));box-shadow:0 -1px var(--line);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);background:#fffffff5;grid-template-columns:repeat(3,1fr);display:grid;position:fixed;inset:auto 0 0}.bottom-nav a{min-height:48px;color:var(--muted);flex-direction:column;justify-content:center;align-items:center;gap:3px;font-size:9px;display:flex}.bottom-nav a:hover{color:var(--green)}.dashboard-page{padding:38px 18px 100px}.page-heading{align-items:start;margin-bottom:25px}.page-heading h1{font-size:32px}.dashboard-empty{flex-direction:column;align-items:start;padding:24px}.quick-links,.job-grid{grid-template-columns:1fr}}@media (max-width:430px){.nav-login{font-size:12px}.hero{padding-top:38px}.hero h1{letter-spacing:-1.9px;font-size:39px}.hero-visual{min-height:340px}.hero-visual:before{width:330px;height:330px}.phone-card{padding:18px}.floating-badge{bottom:5px;right:-4px}.page-heading{display:block}.page-heading .count-label,.page-heading .demo-badge{margin-top:14px;display:inline-block}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}
