:root { color-scheme: light; --navy:#081a3b; --blue:#1d4ed8; --cyan:#0ea5e9; --text:#12213b; --muted:#65748a; --line:#dce6f2; --soft:#f4f8fd; }
*,*::before,*::after { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body.public-home { min-height:100vh; margin:0; overflow-x:hidden; color:var(--text); background:#fff; font-family:"Noto Sans Thai","Leelawadee UI",Tahoma,system-ui,sans-serif; }
a { color:inherit; }
.skip-link { position:fixed; z-index:100; top:.5rem; left:.5rem; padding:.7rem 1rem; border-radius:10px; color:#fff; background:#0f172a; transform:translateY(-150%); }
.skip-link:focus { transform:translateY(0); }
.public-nav { position:relative; z-index:20; display:flex; width:min(1240px,calc(100% - 2rem)); min-height:82px; align-items:center; justify-content:space-between; margin:auto; }
.public-brand { display:flex; align-items:center; gap:.7rem; text-decoration:none; }
.public-logo { display:grid; width:48px; height:48px; place-items:center; overflow:hidden; border:1px solid #cfe0f5; border-radius:15px; background:linear-gradient(145deg,#eff6ff,#dbeafe); box-shadow:0 10px 24px rgba(29,78,216,.12); }
.public-logo img { width:78%; height:78%; object-fit:contain; }
.public-brand > span:last-child { display:grid; gap:.08rem; }
.public-brand strong { color:#0b2350; font-size:1rem; }
.public-brand small { color:#6b7c93; font-size:.68rem; }
.public-login-link,.public-primary-button,.public-secondary-button,.public-security > a { display:inline-flex; min-height:44px; align-items:center; justify-content:center; gap:.55rem; border-radius:12px; padding:.65rem 1rem; font-size:.8rem; font-weight:750; text-decoration:none; transition:transform .18s ease,box-shadow .18s ease,background .18s ease; }
.public-login-link { border:1px solid #d9e4f2; color:#1e3a67; background:#fff; }
.public-login-link:hover,.public-secondary-button:hover { border-color:#aac5e8; background:#f6faff; transform:translateY(-1px); }
.public-hero { position:relative; display:grid; width:min(1240px,calc(100% - 2rem)); min-height:620px; grid-template-columns:minmax(0,1.02fr) minmax(440px,.98fr); align-items:center; gap:clamp(2rem,4vw,4rem); margin:auto; padding:4.5rem 0 6rem; }
.public-hero::before { position:absolute; z-index:-1; top:-5rem; right:-26rem; width:58rem; height:58rem; border-radius:50%; background:radial-gradient(circle,rgba(186,230,253,.6),rgba(219,234,254,.28) 44%,transparent 70%); content:""; }
.public-eyebrow { display:inline-flex; align-items:center; gap:.5rem; margin-bottom:1.25rem; color:#1455ba; font-size:.72rem; font-weight:800; letter-spacing:.03em; }
.public-eyebrow i,.public-trust i { width:7px; height:7px; border-radius:50%; background:#10b981; box-shadow:0 0 0 5px rgba(16,185,129,.12); }
.public-hero h1 { max-width:none; margin:0; color:#071a3c; font-weight:850; letter-spacing:-.035em; line-height:1.12; }
.public-title-line { display:block; white-space:nowrap; }
.public-title-line--system { font-size:clamp(1.8rem,2.15vw,2.2rem); }
.public-title-line--organization { margin-top:.3em; color:#175ac7; font-size:clamp(1.55rem,1.9vw,1.95rem); letter-spacing:-.025em; }
.public-hero-copy > p { max-width:650px; margin:1.5rem 0 0; color:#5d6f88; font-size:clamp(.92rem,1.35vw,1.05rem); line-height:1.85; }
.public-hero-actions { display:flex; flex-wrap:wrap; gap:.7rem; margin-top:2rem; }
.public-primary-button { min-height:50px; padding-inline:1.25rem; color:#fff; background:linear-gradient(120deg,#153f9c,#2671dc); box-shadow:0 15px 34px rgba(29,78,216,.22); }
.public-primary-button:hover { transform:translateY(-2px); box-shadow:0 20px 40px rgba(29,78,216,.3); }
.public-secondary-button { min-height:50px; border:1px solid #d8e3f0; color:#3b506f; background:#fff; }
.public-trust { display:flex; flex-wrap:wrap; gap:1rem 1.35rem; margin-top:1.75rem; color:#76869b; font-size:.66rem; font-weight:650; }
.public-trust span { display:flex; align-items:center; gap:.5rem; }
.public-trust i { width:5px; height:5px; box-shadow:0 0 0 4px rgba(16,185,129,.09); }
.public-visual { position:relative; perspective:1300px; }
.public-visual-glow { position:absolute; inset:8% 5%; border-radius:50%; background:rgba(14,165,233,.2); filter:blur(65px); }
.public-dashboard-card { position:relative; overflow:hidden; border:1px solid rgba(178,202,231,.8); border-radius:25px; padding:1rem; background:rgba(255,255,255,.9); box-shadow:0 35px 90px rgba(15,57,112,.2),0 8px 24px rgba(15,23,42,.08); transform:rotateY(-4deg) rotateX(1deg); backdrop-filter:blur(12px); }
.public-dashboard-head { display:flex; align-items:center; gap:.7rem; padding:.2rem .2rem .9rem; color:#60728c; font-size:.66rem; }
.public-dashboard-head > span { display:flex; gap:.28rem; }
.public-dashboard-head i { width:7px; height:7px; border-radius:50%; background:#cbd5e1; }
.public-dashboard-head i:first-child { background:#60a5fa; }
.public-dashboard-head strong { color:#27456f; }
.public-dashboard-head em { margin-left:auto; border-radius:99px; padding:.28rem .55rem; color:#047857; background:#ecfdf5; font-size:.58rem; font-style:normal; font-weight:750; }
.public-dashboard-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.75rem; }
.public-dashboard-grid article { position:relative; min-height:126px; overflow:hidden; border-radius:16px; padding:1rem; color:#fff; box-shadow:inset 0 1px 0 rgba(255,255,255,.18); }
.public-dashboard-grid article::after { position:absolute; right:-25px; bottom:-42px; width:105px; height:105px; border:1px solid rgba(255,255,255,.2); border-radius:50%; content:""; }
.public-dashboard-grid span,.public-dashboard-grid small { display:block; opacity:.82; font-size:.62rem; }
.public-dashboard-grid strong { display:block; margin:.55rem 0 .35rem; font-size:1.55rem; }
.public-dashboard-grid .is-blue { background:linear-gradient(135deg,#19428f,#3268cf); }
.public-dashboard-grid .is-amber { background:linear-gradient(135deg,#b85d00,#ed9908); }
.public-dashboard-grid .is-green { background:linear-gradient(135deg,#087a62,#17ad83); }
.public-dashboard-grid .is-violet { background:linear-gradient(135deg,#5b2ab7,#8852ea); }
.public-dashboard-chart { position:relative; height:185px; overflow:hidden; margin-top:.75rem; border:1px solid #e3ebf5; border-radius:16px; background:linear-gradient(180deg,#fbfdff,#f3f8fe); }
.public-dashboard-chart > span { position:absolute; left:0; width:100%; height:1px; background:#e6eef7; }
.public-dashboard-chart > span:nth-child(1){top:20%}.public-dashboard-chart > span:nth-child(2){top:40%}.public-dashboard-chart > span:nth-child(3){top:60%}.public-dashboard-chart > span:nth-child(4){top:80%}
.public-dashboard-chart svg { position:absolute; inset:22px 18px 12px; width:calc(100% - 36px); height:calc(100% - 34px); color:#2b6dd3; }
.public-section { padding:6rem max(1rem,calc((100% - 1240px)/2)); background:linear-gradient(180deg,#f7faff,#f2f7fd); }
.public-section-heading { max-width:1100px; margin:auto; text-align:center; }
.public-section-heading > span,.public-security > div > span { color:#1761cb; font-size:.7rem; font-weight:850; letter-spacing:.08em; }
.public-section h2,.public-security h2 { margin:.55rem 0 .75rem; color:#0c2145; font-size:clamp(1.55rem,2.2vw,2.25rem); line-height:1.25; }
.public-section-heading h2 { white-space:nowrap; }
.public-section-heading p,.public-security p { margin:0; color:#718097; font-size:.85rem; line-height:1.8; }
.public-feature-grid { display:grid; width:min(1240px,100%); grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem; margin:2.5rem auto 0; }
.public-feature-grid article { min-height:225px; border:1px solid #dce7f3; border-radius:18px; padding:1.35rem; background:#fff; box-shadow:0 15px 40px rgba(30,64,114,.055); }
.feature-number { display:grid; width:38px; height:38px; place-items:center; border-radius:11px; color:#1d5fc4; background:#eaf3ff; font-size:.7rem; font-weight:850; }
.public-feature-grid h3 { margin:1.3rem 0 .55rem; color:#17335e; font-size:1rem; }
.public-feature-grid p { margin:0; color:#75849a; font-size:.75rem; line-height:1.75; }
.public-security { display:flex; width:min(1120px,calc(100% - 2rem)); align-items:center; justify-content:space-between; gap:2rem; margin:5rem auto; border:1px solid #cfe0f5; border-radius:24px; padding:2.25rem; background:radial-gradient(circle at 92% 0,rgba(186,230,253,.55),transparent 18rem),linear-gradient(135deg,#f7fbff,#edf5ff); }
.public-security > div { max-width:720px; }
.public-security h2 { font-size:1.65rem; }
.public-security > a { flex:0 0 auto; color:#fff; background:#143f96; }
.public-footer { display:flex; min-height:100px; align-items:center; justify-content:space-between; gap:1rem; border-top:1px solid #e4ebf4; padding:1.2rem max(1rem,calc((100% - 1240px)/2)); color:#718097; background:#fbfdff; font-size:.7rem; }
.public-footer > div { display:grid; gap:.15rem; }
.public-footer strong { color:#17335e; font-size:.9rem; }
.public-footer p { margin:0; }
@media (max-width:980px){.public-hero{min-height:0;grid-template-columns:1fr;padding-top:3rem}.public-hero-copy{text-align:center}.public-hero h1,.public-hero-copy>p{margin-right:auto;margin-left:auto}.public-hero-actions,.public-trust{justify-content:center}.public-visual{width:min(680px,100%);margin:auto}.public-section-heading{max-width:720px}.public-section-heading h2{white-space:normal}.public-feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.public-nav{min-height:70px}.public-brand small{display:none}.public-logo{width:42px;height:42px;border-radius:13px}.public-login-link{min-height:40px}.public-hero{width:min(100% - 1.25rem,1240px);gap:2.5rem;padding:2.5rem 0 4rem}.public-title-line{white-space:normal}.public-title-line--system{font-size:clamp(1.75rem,8.4vw,2.2rem)}.public-title-line--organization{font-size:clamp(1.45rem,7.2vw,1.85rem)}.public-hero-actions{display:grid}.public-primary-button,.public-secondary-button{width:100%}.public-trust{align-items:flex-start;flex-direction:column;padding-left:.35rem}.public-dashboard-card{padding:.65rem;border-radius:18px;transform:none}.public-dashboard-grid{gap:.5rem}.public-dashboard-grid article{min-height:105px;padding:.75rem}.public-dashboard-grid strong{font-size:1.2rem}.public-dashboard-chart{height:140px}.public-section{padding-top:4rem;padding-bottom:4rem}.public-feature-grid{grid-template-columns:1fr}.public-feature-grid article{min-height:0}.public-security{align-items:stretch;flex-direction:column;margin:3rem auto;padding:1.5rem}.public-security>a{width:100%}.public-footer{align-items:flex-start;flex-direction:column}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.public-login-link,.public-primary-button,.public-secondary-button,.public-security>a{transition:none}}