:root{--bg:#f4f8fc;--panel:#fff;--ink:#102039;--muted:#6c7b90;--line:#d7e5ef;--cyan:#0ea5c6;--cyan2:#22d3ee;--blue:#2563eb;--navy:#062a47;--navy2:#0b4165;--green:#10b981;--amber:#f59e0b;--shadow:0 24px 65px rgba(20,52,78,.10)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:'Noto Sans Thai','Inter',system-ui,sans-serif;background:var(--bg);color:var(--ink);line-height:1.6;-webkit-font-smoothing:antialiased}a{text-decoration:none;color:inherit}.civil-shell{width:min(1180px,calc(100% - 36px));margin:auto}.civil-bg{position:fixed;inset:0;z-index:-3;pointer-events:none;background:linear-gradient(#f8fbfe,#eef6fb)}.civil-bg:after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(8,125,165,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(8,125,165,.04) 1px,transparent 1px);background-size:54px 54px}.civil-bg i{position:absolute;border-radius:50%;filter:blur(90px);opacity:.16}.civil-bg i:nth-child(1){width:450px;height:450px;background:#38bdf8;left:-160px;top:300px}.civil-bg i:nth-child(2){width:390px;height:390px;background:#22d3ee;right:-110px;top:680px}.civil-bg i:nth-child(3){width:330px;height:330px;background:#60a5fa;left:45%;bottom:-120px}
.civil-nav{position:sticky;top:0;z-index:80;background:rgba(249,252,254,.9);backdrop-filter:blur(18px);border-bottom:1px solid rgba(215,229,239,.9)}.nav-row{height:78px;display:flex;align-items:center;gap:20px}.civil-brand{display:flex;align-items:center;gap:11px}.civil-brand>span{width:45px;height:45px;border-radius:14px;border:1px solid var(--line);background:#fff;display:grid;place-items:center;box-shadow:0 9px 28px rgba(8,125,165,.09)}.civil-brand img{width:35px;height:35px}.civil-brand b{display:block;font:800 19px Inter}.civil-brand b span,.civil-footer b span{color:#0b82ae}.civil-brand small{display:block;font-size:9px;font-weight:800;letter-spacing:.07em;color:#6d8098}.civil-menu{margin-left:auto;display:flex;align-items:center;gap:5px}.civil-menu a{padding:10px 12px;border-radius:12px;font-size:13px;font-weight:800;color:#42546a}.civil-menu a:hover{background:#eaf8fc;color:#087da5}.civil-menu i{margin-right:6px}.civil-menu .core-link{background:#e9f9fd;color:#087da5}.civil-menu .login-link{border:1px solid var(--line);background:#fff}.menu-btn{display:none;margin-left:auto;width:43px;height:43px;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--ink)}
.civil-hero{position:relative;overflow:hidden;padding:82px 0 90px;background:radial-gradient(circle at 13% 20%,rgba(14,165,198,.28),transparent 30%),radial-gradient(circle at 85% 22%,rgba(37,99,235,.18),transparent 30%),linear-gradient(135deg,#051b31,#063655 48%,#0a4267);color:#fff}.civil-hero:after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(125,211,252,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(125,211,252,.055) 1px,transparent 1px);background-size:58px 58px;mask-image:linear-gradient(to bottom,#000,transparent 95%);pointer-events:none}.hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.03fr .97fr;gap:58px;align-items:center}.kicker,.section-label{display:inline-flex;align-items:center;gap:8px;font:900 11px Inter,'Noto Sans Thai';letter-spacing:.12em;color:#7dd3fc}.hero-copy h1{font:900 clamp(45px,5vw,68px)/1.05 Inter,'Noto Sans Thai';letter-spacing:-.055em;margin:16px 0 20px}.hero-copy h1 em{font-style:normal;color:transparent;background:linear-gradient(95deg,#67e8f9,#93c5fd);-webkit-background-clip:text;background-clip:text}.hero-copy>p{max-width:670px;color:#bfd5e3;font-size:16px}.hero-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px}.civil-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;border-radius:14px;padding:12px 17px;font-weight:900;border:1px solid transparent;transition:.2s}.civil-btn.primary{background:linear-gradient(135deg,#0891b2,#2563eb);box-shadow:0 15px 35px rgba(14,165,198,.25)}.civil-btn.primary:hover,.civil-btn.cyan:hover{transform:translateY(-2px)}.civil-btn.glass{border-color:rgba(255,255,255,.18);background:rgba(255,255,255,.07);color:#fff;backdrop-filter:blur(10px)}.civil-btn.glass:hover{background:rgba(255,255,255,.12)}.hero-metrics{display:flex;gap:18px;flex-wrap:wrap;margin-top:30px}.hero-metrics div{min-width:110px;padding-left:14px;border-left:2px solid rgba(34,211,238,.4)}.hero-metrics strong,.hero-metrics span{display:block}.hero-metrics strong{font:800 21px Inter}.hero-metrics span{font:800 9px Inter;color:#91acc1;text-transform:uppercase;letter-spacing:.08em}
.blueprint-visual{position:relative;min-height:470px}.blueprint-panel{position:absolute;inset:8px 0 0 18px;border:1px solid rgba(125,211,252,.2);border-radius:28px;background:linear-gradient(155deg,rgba(7,47,75,.97),rgba(5,31,54,.98));box-shadow:0 35px 90px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.05);overflow:hidden;transform:rotate(1deg)}.bp-head{height:50px;border-bottom:1px solid rgba(255,255,255,.08);display:flex;align-items:center;gap:10px;padding:0 16px;position:relative;z-index:5}.bp-head>span{display:flex;gap:5px}.bp-head>span i{width:7px;height:7px;border-radius:50%;background:#5e7990}.bp-head b{font:700 10px Inter;color:#9db8cb}.bp-head small{margin-left:auto;font:800 8px Inter;color:#5ee6a8;letter-spacing:.1em}.bp-stage{height:340px;position:relative;overflow:hidden;background-image:linear-gradient(rgba(125,211,252,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(125,211,252,.055) 1px,transparent 1px);background-size:34px 34px}.axis{position:absolute;background:rgba(103,232,249,.28)}.axis-x{left:7%;right:7%;top:50%;height:1px}.axis-y{top:8%;bottom:8%;left:50%;width:1px}.grid-building{position:absolute;right:8%;bottom:12%;width:58%;height:61%;border:1px solid rgba(125,211,252,.25)}.col{position:absolute;top:0;bottom:0;width:1px;background:rgba(125,211,252,.38)}.c1{left:0}.c2{left:33.333%}.c3{left:66.666%}.c4{right:0}.beam{position:absolute;left:0;right:0;height:1px;background:rgba(125,211,252,.38)}.b1{top:0}.b2{top:33.333%}.b3{top:66.666%}.b4{bottom:0}.node{position:absolute;width:8px;height:8px;border:2px solid #67e8f9;background:#083c5c}.n1{left:-4px;top:-4px}.n2{right:-4px;top:-4px}.n3{left:-4px;bottom:-4px}.n4{right:-4px;bottom:-4px}.bp-core{position:absolute;left:14%;top:22%;z-index:4;width:130px;height:130px;border-radius:50%;display:grid;place-items:center;text-align:center;background:radial-gradient(circle at 35% 30%,#12628d,#0a4369 52%,#073551);border:1px solid rgba(125,211,252,.3);box-shadow:0 0 45px rgba(34,211,238,.18),inset 0 0 25px rgba(125,211,252,.09)}.bp-core i{font-size:26px;color:#7dd3fc}.bp-core b{font:800 14px Inter;margin-top:-9px}.bp-core small{font:700 8px Inter;color:#8fb0c5;letter-spacing:.12em;margin-top:-22px}.measure{position:absolute;color:#facc15;font:700 8px Inter;letter-spacing:.05em}.mx{right:15%;bottom:6%;border-top:1px dashed #facc15;padding-top:3px;width:45%;text-align:center}.my{right:2%;top:25%;writing-mode:vertical-rl;border-left:1px dashed #facc15;padding-left:3px;height:50%;text-align:center}.bp-tag{position:absolute;border:1px solid rgba(125,211,252,.2);border-radius:999px;background:rgba(4,35,58,.9);padding:6px 9px;font:800 8px Inter;color:#b7e9f7}.t1{left:6%;bottom:11%}.t2{left:40%;top:8%}.t3{right:6%;top:12%}.scan-line{position:absolute;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,#67e8f9,transparent);box-shadow:0 0 18px rgba(103,232,249,.6);animation:scan 5.2s ease-in-out infinite}@keyframes scan{0%,100%{top:14%;opacity:.15}50%{top:84%;opacity:.7}}.bp-footer{height:52px;border-top:1px solid rgba(255,255,255,.07);display:flex;align-items:center;justify-content:space-between;padding:0 17px;color:#809caf;font:700 9px Inter}.bp-footer span i{display:inline-block;width:7px;height:7px;border-radius:50%;background:#34d399;margin-right:6px;box-shadow:0 0 12px rgba(52,211,153,.7)}.bp-footer b{color:#7dd3fc}.float-note{position:absolute;z-index:8;padding:9px 12px;border:1px solid rgba(186,230,253,.28);border-radius:999px;background:rgba(255,255,255,.95);color:#16405b;font:900 9px Inter;box-shadow:0 15px 38px rgba(0,0,0,.2);animation:float 6s ease-in-out infinite}.float-note i{color:#0891b2;margin-right:5px}.fn1{left:-4px;bottom:66px}.fn2{right:-8px;top:67px;animation-delay:-2s}@keyframes float{50%{transform:translateY(-7px)}}
.mode-strip{position:relative;z-index:5;margin-top:-32px}.mode-inner{display:grid;grid-template-columns:1fr 115px 1fr;gap:12px;align-items:stretch}.current-mode,.other-mode{min-height:98px;border:1px solid #d7e5ef;border-radius:22px;background:rgba(255,255,255,.96);box-shadow:0 18px 50px rgba(20,52,78,.1);display:grid;grid-template-columns:auto auto 1fr auto;align-items:center;gap:13px;padding:15px 18px;backdrop-filter:blur(16px)}.current-mode>span,.other-mode>span{font:900 8px Inter;color:#7b8da0;writing-mode:vertical-rl;transform:rotate(180deg);letter-spacing:.12em}.current-mode>i,.other-mode>i{width:45px;height:45px;border-radius:14px;display:grid;place-items:center}.other-mode>i{background:#eef2ff;color:#5b55df}.current-mode>i{background:#e8faff;color:#087da5}.current-mode b,.other-mode b{display:block;font-size:15px}.current-mode small,.other-mode small{display:block;color:#77889b;font-size:10px}.current-mode strong{font-size:10px;color:#087da5;background:#e8faff;border-radius:999px;padding:6px 9px}.other-mode em{font-style:normal;font-size:10px;font-weight:900;color:#4f46e5}.mode-bridge{display:flex;align-items:center;justify-content:center;gap:8px;color:#99a8b8}.mode-bridge span{height:1px;background:#ccd9e4;flex:1}.other-mode{transition:.2s}.other-mode:hover{transform:translateY(-3px);border-color:#b8caee;box-shadow:0 22px 55px rgba(79,70,229,.1)}
.workspace{padding:100px 0 92px}.workspace-head{display:grid;grid-template-columns:1fr 320px;gap:34px;align-items:end}.workspace-head h2,.core-copy h2,.new-lab h2{font:900 clamp(31px,4vw,48px)/1.12 Inter,'Noto Sans Thai';letter-spacing:-.045em;margin:9px 0 10px}.workspace-head p{max-width:750px;margin:0;color:var(--muted)}.status-panel{display:flex;align-items:center;gap:12px;border:1px solid #cfe8ef;border-radius:18px;background:#f2fcff;padding:14px}.status-panel>i{width:42px;height:42px;border-radius:13px;background:#dff8fd;display:grid;place-items:center;color:#0891b2}.status-panel b,.status-panel small{display:block}.status-panel b{font-size:12px}.status-panel small{font-size:10px;color:#71859b}.module-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:28px}.module-card{position:relative;overflow:hidden;isolation:isolate;min-height:330px;border:1px solid var(--line);border-radius:26px;background:rgba(255,255,255,.93);padding:23px;box-shadow:0 16px 48px rgba(20,52,78,.055);transition:.24s}.module-card:hover{transform:translateY(-5px);border-color:#b8d4e2;box-shadow:0 25px 60px rgba(8,125,165,.12)}.card-grid{position:absolute;z-index:-2;inset:0;background-image:linear-gradient(rgba(8,125,165,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(8,125,165,.025) 1px,transparent 1px);background-size:32px 32px;opacity:0;transition:.25s}.module-card:hover .card-grid{opacity:1}.card-glow{position:absolute;z-index:-1;width:240px;height:240px;border-radius:50%;right:-100px;top:-110px;opacity:.12;transition:.25s}.tone-cyan .card-glow{background:#06b6d4}.tone-blue .card-glow{background:#2563eb}.tone-indigo .card-glow{background:#4f46e5}.tone-amber .card-glow{background:#f59e0b}.module-card:hover .card-glow{transform:scale(1.25);opacity:.18}.module-card.featured{background:linear-gradient(145deg,#073856,#0a4e72);color:#fff;border-color:#12668c}.module-card.featured .card-grid{opacity:.5;background-image:linear-gradient(rgba(125,211,252,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(125,211,252,.05) 1px,transparent 1px)}.module-top{display:flex;align-items:center;justify-content:space-between}.module-top>span{font:900 9px Inter;letter-spacing:.13em;color:#50708d}.featured .module-top>span{color:#9fd9e9}.module-status{font-size:9px;color:#73859a}.featured .module-status{color:#a9d8e5}.module-status i{display:inline-block;width:7px;height:7px;border-radius:50%;background:#34d399;margin-right:5px;box-shadow:0 0 10px rgba(52,211,153,.55)}.tone-amber .module-status i{background:#f59e0b;box-shadow:0 0 10px rgba(245,158,11,.4)}.module-icon{width:58px;height:58px;margin-top:28px;border-radius:18px;display:grid;place-items:center;background:#e9faff;color:#0891b2;font-size:22px;box-shadow:inset 0 0 0 1px rgba(34,211,238,.35)}.tone-blue .module-icon{background:#edf4ff;color:#2563eb}.tone-indigo .module-icon{background:#eef2ff;color:#4f46e5}.tone-amber .module-icon{background:#fff8e8;color:#d97706}.featured .module-icon{background:rgba(255,255,255,.08);color:#7dd3fc;box-shadow:inset 0 0 0 1px rgba(125,211,252,.2)}.module-card h3{font-size:22px;margin:15px 0 2px}.module-card>small{font:700 10px Inter;color:#71849a}.featured>small{color:#a7cad7}.module-card p{font-size:12px;line-height:1.75;max-width:92%;color:#6d7f92;margin:12px 0 24px}.featured p{color:#c2d8e1}.module-foot{position:absolute;left:23px;right:23px;bottom:20px;display:flex;align-items:center;justify-content:space-between;border-top:1px solid #e7eef3;padding-top:13px}.featured .module-foot{border-color:rgba(255,255,255,.1)}.module-foot span{font:900 8px Inter;letter-spacing:.12em;color:#7d91a5}.featured .module-foot span{color:#94c8d8}.module-foot b{font-size:11px;color:#256d91}.featured .module-foot b{color:#8ee5f5}.reveal{opacity:0;transform:translateY(18px);transition:.55s ease;transition-delay:var(--delay,0ms)}.reveal.visible{opacity:1;transform:none}
.core-preview{padding:88px 0;background:radial-gradient(circle at 15% 20%,rgba(14,165,198,.21),transparent 29%),radial-gradient(circle at 82% 74%,rgba(37,99,235,.13),transparent 27%),linear-gradient(135deg,#06233c,#073b5c 58%,#084b6d);color:#fff}.core-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:70px;align-items:center}.section-label.light{color:#7dd3fc}.core-copy h2{color:#fff}.core-copy p{color:#bad1de;margin:0 0 25px}.civil-btn.white{background:#fff;color:#087da5}.core-flow{display:grid;grid-template-columns:1fr 35px 1fr;gap:12px;align-items:center}.core-flow>div{min-height:115px;border:1px solid rgba(255,255,255,.09);border-radius:19px;background:rgba(255,255,255,.05);padding:18px;display:grid;grid-template-columns:43px 1fr;gap:0 12px;align-items:center}.core-flow>div i{grid-row:1/3;width:43px;height:43px;border-radius:13px;background:rgba(125,211,252,.11);display:grid;place-items:center;color:#7dd3fc}.core-flow b{font-size:13px}.core-flow small{font-size:10px;color:#93afc0}.core-flow>span{height:1px;background:linear-gradient(90deg,#4c7894,#7dd3fc,#4c7894);position:relative}.core-flow>span:after{content:"";position:absolute;right:-2px;top:-3px;border-left:5px solid #7dd3fc;border-top:3px solid transparent;border-bottom:3px solid transparent}
.new-lab{padding:82px 0}.lab-inner{display:grid;grid-template-columns:110px 1fr auto;gap:28px;align-items:center;padding:35px;border:1px solid #cfe8ef;border-radius:28px;background:linear-gradient(130deg,#f1fcff,#fff 55%,#edf9ff);box-shadow:0 22px 60px rgba(8,125,165,.08)}.lab-visual{position:relative;width:100px;height:100px;border-radius:24px;background:linear-gradient(145deg,#073856,#0b6b8d);color:#fff;display:grid;place-items:center;overflow:hidden}.lab-visual:before,.lab-visual:after{content:"";position:absolute;border:1px solid rgba(125,211,252,.28);border-radius:50%}.lab-visual:before{width:92px;height:92px}.lab-visual:after{width:60px;height:60px}.lab-visual>i{z-index:2;font-size:25px;color:#7dd3fc}.lab-visual>span{position:absolute;width:120px;height:1px;background:rgba(125,211,252,.3);transform:rotate(-35deg)}.lab-visual>b{position:absolute;bottom:8px;font:900 7px Inter;letter-spacing:.1em;color:#c4f2fa}.new-lab h2{font-size:30px;margin:6px 0 7px}.new-lab p{color:#667a8f;font-size:13px;margin:0}.civil-btn.cyan{background:linear-gradient(135deg,#0891b2,#0ea5e9);color:#fff;white-space:nowrap;box-shadow:0 12px 30px rgba(8,145,178,.18)}
.civil-footer{padding:30px 0 42px;border-top:1px solid var(--line);background:#f7fafc}.civil-footer>.civil-shell{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:25px}.civil-footer b{font:800 18px Inter}.civil-footer small{display:block;font-size:9px;color:#8092a7}.civil-footer div:nth-child(2){display:flex;gap:15px;font-size:11px;font-weight:800;color:#52677d}.civil-footer>div>span{font-size:9px;color:#98a8b6}
@media(max-width:980px){.menu-btn{display:grid;place-items:center}.civil-menu{display:none;position:absolute;top:70px;left:18px;right:18px;background:#fff;border:1px solid var(--line);border-radius:18px;padding:10px;box-shadow:var(--shadow);flex-direction:column;align-items:stretch}.civil-menu.open{display:flex}.hero-grid,.core-grid{grid-template-columns:1fr}.hero-copy{text-align:center}.hero-copy>p{margin-left:auto;margin-right:auto}.hero-actions,.hero-metrics{justify-content:center}.blueprint-visual{max-width:650px;width:100%;margin:auto}.mode-inner{grid-template-columns:1fr 65px 1fr}.workspace-head{grid-template-columns:1fr}.status-panel{max-width:460px}.core-flow{grid-template-columns:1fr 28px 1fr}.lab-inner{grid-template-columns:95px 1fr}.lab-inner .civil-btn{grid-column:2;width:max-content}.civil-footer>.civil-shell{grid-template-columns:1fr auto}.civil-footer>div>span{grid-column:1/-1}}
@media(max-width:680px){.civil-shell{width:min(100% - 26px,1180px)}.civil-hero{padding:60px 0 78px}.hero-copy h1{font-size:39px}.hero-copy>p{font-size:14px}.blueprint-visual{min-height:390px}.blueprint-panel{inset:8px 0 0 0}.bp-stage{height:275px}.bp-core{width:105px;height:105px}.float-note{display:none}.mode-strip{margin-top:-24px}.mode-inner{grid-template-columns:1fr}.mode-bridge{display:none}.current-mode,.other-mode{grid-template-columns:auto auto 1fr}.current-mode strong,.other-mode em{grid-column:3}.workspace{padding:75px 0}.module-grid{grid-template-columns:1fr}.module-card{min-height:330px}.core-preview{padding:72px 0}.core-grid{gap:35px}.core-flow{grid-template-columns:1fr}.core-flow>span{width:1px;height:20px;margin:auto;background:linear-gradient(#4c7894,#7dd3fc,#4c7894)}.core-flow>span:after{right:-3px;top:auto;bottom:-2px;border-left:3px solid transparent;border-right:3px solid transparent;border-top:5px solid #7dd3fc;border-bottom:0}.new-lab{padding:62px 0}.lab-inner{grid-template-columns:1fr;text-align:center}.lab-visual{margin:auto}.lab-inner .civil-btn{grid-column:auto;width:100%}.civil-footer>.civil-shell{grid-template-columns:1fr;text-align:center}.civil-footer div:nth-child(2){justify-content:center;flex-wrap:wrap}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}.scan-line,.float-note{animation:none!important}.reveal{opacity:1;transform:none;transition:none}.module-card,.other-mode,.civil-btn{transition:none}}