/* ===== Hostify palette (จากโลโก้) ===== */
:root{
  --blue:   #0A66CC;   /* primary */
  --blue-2: #0E7AE6;   /* lighter accent */
  --orange: #FF9E1B;   /* accent */
  --bg:     #ffffff;   /* พื้นหลังขาว */
  --text:   #111827;   /* เกือบดำ อ่านง่าย */
  --muted:  #6B7280;   /* เทา */
  --card:   #ffffff;   /* การ์ดพื้นขาว */
  --stroke: #E5E7EB;   /* เส้นแบ่ง/ขอบ */
  --ring:   rgba(10,102,204,.25);
}

/* ===== Base ===== */
*{box-sizing:border-box}
html,body{margin:0; padding:0; background:var(--bg); color:var(--text); font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial}
a{color:var(--blue); text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%; height:auto}
.container{max-width:1120px; margin:0 auto; padding:0 20px}

/* ===== Top Color Bar (แถบสี) ===== */
.colorbar{
  height:6px;
  background: linear-gradient(90deg, var(--blue), var(--blue-2) 60%, var(--orange));
}

/* ===== Nav ===== */
.nav{position:sticky; top:0; z-index:40; background:#fff; border-bottom:1px solid var(--stroke)}
.nav-inner{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 0}
.brand{display:flex; align-items:center; gap:12px}
.brand-logo{width:48px; height:48px; object-fit:contain}
.brand-text strong{display:block; font-size:18px}
.brand-text span{display:block; font-size:12px; color:var(--muted)}
.nav-cta{display:flex; gap:10px; align-items:center}
.link{color:var(--text); font-weight:600}
.link:hover{color:var(--blue)}

/* ===== Buttons ===== */
.btn{
  padding:10px 14px; border-radius:10px; border:1px solid var(--stroke);
  background:#fff; color:var(--text); cursor:pointer; font-weight:700;
  transition:.15s ease-in-out;
}
.btn:hover{box-shadow:0 1px 0 rgba(17,24,39,.06)}
.btn.primary{
  border-color:transparent;
  background:linear-gradient(135deg, var(--blue), var(--blue-2));
  color:#fff;
  box-shadow:0 8px 18px rgba(10,102,204,.18);
}
.btn.primary:hover{filter:brightness(.98)}
.btn.accent{background:var(--orange); color:#fff; border-color:var(--orange)}
.btn.accent.ghost{background:transparent; color:var(--orange); border-color:var(--orange)}
.btn.outline{background:#fff; border-color:var(--blue); color:var(--blue)}

/* ===== Hero ===== */
.hero{border-bottom:1px solid var(--stroke); background:#fff}
.hero-wrap{display:grid; grid-template-columns:1.1fr .9fr; gap:28px; padding:72px 0}
@media (max-width:900px){.hero-wrap{grid-template-columns:1fr; padding:56px 0}}
.hero h1{font-size:40px; line-height:1.15; margin:0 0 12px}
.sub{color:var(--muted); margin:0 0 20px}
.cta{display:flex; gap:12px; flex-wrap:wrap}
.kpis{display:flex; gap:12px; flex-wrap:wrap; margin-top:12px}
.badge{
  display:inline-flex; align-items:center; gap:8px; font-size:12px;
  padding:6px 10px; border-radius:999px; border:1px solid var(--stroke); color:var(--muted); background:#fff;
}
.card{
  border:1px solid var(--stroke); background:var(--card); border-radius:16px; padding:20px;
  box-shadow:0 1px 2px rgba(17,24,39,.04);
}
.mini-title{margin:0 0 6px; color:var(--blue)}

/* ===== Sections ===== */
section{padding:56px 0; border-bottom:1px solid var(--stroke); background:#fff}
.sec-title{
  font-size:26px; margin:0 0 16px; position:relative; padding-bottom:8px;
}
.sec-title::after{
  content:""; position:absolute; left:0; bottom:0; height:4px; width:72px;
  background: linear-gradient(90deg, var(--blue), var(--orange));
  border-radius:999px;
}
.lead{color:var(--muted); margin:-6px 0 24px}

/* ===== Grid & Cards ===== */
.grid{display:grid; gap:16px}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
.grid.cols-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:1000px){.grid.cols-3,.grid.cols-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.grid.cols-3,.grid.cols-4{grid-template-columns:1fr}}
.plan h3{margin:0}
.plan ul{margin:0 0 12px; padding-left:18px; color:var(--muted)}

/* ===== Contact ===== */
.contact-list{display:grid; gap:8px; margin-top:18px}
.contact-list a{color:var(--blue)}
.contact-list a:hover{color:#084a99}

/* ===== Footer ===== */
footer{padding:24px 0; color:#6B7280; background:#fff}

/* ===== Focus ===== */
:is(a,button,.btn,input,select):focus{outline:3px solid var(--orange); outline-offset:2px; border-radius:10px}