/* แบบ F — Product Bento: ซอฟต์แวร์ยุคใหม่ (แนว SaaS) โทนกราไฟต์เป็นกลาง สีเน้นเดียวคือส้มแบรนด์ช่างคิด (ต่อเนื่องกับแบรนด์เดิม)
 * โครง: หัวเรื่องกึ่งกลาง → ภาพจราจรใหญ่กลางจอ → ข้อมูลและแอปจัดเป็นกล่องเบนโต ขอบไล่สีบาง ๆ */
:root{--bg:#0b0c0e;--bg-soft:#121417;--ink:#f2f3f5;--ink-soft:#9097a0;--line:#1f2328;--blue:#f58220;--blue-dark:#f2f3f5;--blue-light:#ffa552;--orange:#f58220;--orange-dark:#d96a0e;--orange-light:#ffa552;--radius:16px;--radius-lg:22px;--radius-sm:10px}
body{background:var(--bg);color:var(--ink);font-family:'Anuphan','Sarabun',sans-serif;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,.btn,.brand,.nav a{font-family:'Anuphan',sans-serif;letter-spacing:-.02em}
header{background:#0b0c0ecc;border-bottom:1px solid var(--line)}
.brand{color:var(--ink)}.brand small{color:var(--ink-soft)}
.logo{background:#17191d;border:1px solid #2a2e34}
.nav ul a{color:var(--ink-soft)}.nav ul a:hover{color:var(--ink)}
.btn{border-radius:10px;font-weight:600}.btn-o{background:#f2f3f5;color:#0b0c0e;box-shadow:none}.btn-o:hover{background:#fff}
.btn-g{background:#17191d;border:1px solid #2a2e34;color:var(--ink)}
.hero{background:radial-gradient(800px 380px at 50% 0%,#f5822026,transparent 70%),var(--bg)}
.hero .wrap{display:block!important;text-align:center;padding-top:70px!important;padding-bottom:30px!important}
.hero .wrap>div:first-child{max-width:780px;margin:0 auto 40px}
.hero h1{font-size:clamp(38px,5.4vw,68px);line-height:1.4;padding-top:.12em;font-weight:700;background:linear-gradient(180deg,#fff,#9097a0);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero h1 span{padding-top:.18em;background:linear-gradient(90deg,#ffa552,#f58220);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero h1 br{display:none}
.hero p{margin:18px auto 26px;color:var(--ink-soft);opacity:1;max-width:600px}
.hero .cta{justify-content:center}.hero .btn-g{color:var(--ink);border-color:#2a2e34}
.tag{background:#17191d;border:1px solid #2a2e34;color:var(--ink-soft)}.tag b{color:#ffa552}
.stats{justify-content:center;gap:50px}.stats b{color:var(--ink)}.stats span{opacity:1;color:var(--ink-soft)}
.monitor{max-width:1180px;margin:0 auto;border-radius:22px;border:1px solid #2a2e34;background:#0f1113;box-shadow:0 0 0 1px #000,0 40px 120px #f582201a,0 30px 60px #000a;text-align:left;padding:8px}
.road3d{height:min(52vw,540px)!important;border-radius:16px;overflow:hidden}
.live,.chip3d{background:#0b0c0ecc;border:1px solid #ffffff1a;border-radius:8px}
.dash{background:transparent;padding:8px 0 0;display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.dash .kpi{display:contents}
.kpi>div{background:#141619;border:1px solid #1f2328;border-radius:14px;padding:14px 16px}
.kpi small{color:var(--ink-soft)}.kpi b{color:var(--ink);font-size:24px}.kpi em{color:#5c636c}
.dgrid{grid-column:1/-1;grid-template-columns:2fr 1fr!important;gap:8px;margin-top:0}
.cls,.side{background:#141619;border:1px solid #1f2328;border-radius:14px;padding:14px 16px}
.ch{color:var(--ink)}.bn{color:#c4c9cf}.bv{color:var(--ink)}.bc{color:#5c636c}.bt{background:#1f2328}
.wx{background:#1a1d21;border:1px solid #262a30;border-radius:10px}.wx b{color:var(--ink)}
.sh .k{color:#ffa552}.sh h2{color:var(--ink)}
.chip{background:#141619;border-color:#1f2328;color:var(--ink-soft);border-radius:10px}.chip.on{background:#f2f3f5;color:#0b0c0e;border-color:#f2f3f5}
.grid{grid-template-columns:2fr 1fr!important;grid-auto-rows:minmax(220px,auto)}
.grid .card:first-child{grid-row:span 2}
.card{background:#141619;border:1px solid #1f2328;border-radius:22px}.card:hover{transform:translateY(-3px);border-color:#f5822066;box-shadow:0 20px 50px #f5822014}
.grid .card:first-child .thumb{height:300px}
.cb h3{color:var(--ink)}.meta{border-top:1px solid #1f2328}
.flow{background:var(--bg);border-color:var(--line)}.step{background:#141619;border:1px solid #1f2328;border-radius:16px}.step h4{color:var(--ink)}.step::before{background:#f2f3f5;color:#0b0c0e;border-radius:8px}
.band{background:linear-gradient(120deg,#1a1410,#141619);border:1px solid #f5822044;border-radius:22px}.band .btn{background:#f58220;color:#fff}
footer{background:#08090a;border-top:1px solid var(--line)}
.draft{background:#141619;color:#ffa552}
@media(max-width:900px){.dash{grid-template-columns:repeat(3,1fr)}.dgrid{grid-template-columns:1fr!important}.grid{grid-template-columns:1fr!important}.grid .card:first-child{grid-row:auto}}