:root{
  --bg: #f8fafc;
  --card: #ffffff;
  --ink: #0b1324;
  --muted: #5b6475;
  --brand: #06b6d4; /* cyan-500 */
  --brand-2: #60a5fa; /* blue-400 */
  --accent: #22c55e; /* green-500 */
  --shadow: 0 10px 30px rgba(2,8,23,.08);
  --radius: 16px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--ink); background:var(--bg);
  line-height:1.65;
}

img{max-width:100%; display:block; border-radius:12px}
a{color:var(--brand); text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{line-height:1.2; margin:0 0 .4em}
h1{font-size:clamp(28px,4.5vw,48px); font-weight:800}
h2{font-size:clamp(22px,3.2vw,34px); font-weight:700}
h3{font-size:clamp(18px,2.2vw,24px); font-weight:700}
p{margin:.6em 0; color:var(--muted)}
ul{margin:.6em 0; padding-left:1.2rem}

.container{width:min(1120px,92%); margin:0 auto}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
@media (max-width:900px){.grid-3{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.grid-3{grid-template-columns:1fr}}

.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.75); backdrop-filter:saturate(160%) blur(10px);
  border-bottom:1px solid #e5eaf1;
}
.navwrap{display:flex; align-items:center; justify-content:space-between; padding:14px 0}
.brand{display:flex; align-items:center; gap:10px; font-weight:800; color:var(--ink); letter-spacing:.2px}
.brand svg{color:var(--brand)}
.nav ul{display:flex; gap:18px; list-style:none; margin:0; padding:0}
.nav a{color:var(--ink); font-weight:600}
.nav a:hover{color:var(--brand)}

.hamburger{display:none; background:none; border:0; padding:8px; cursor:pointer}
.hamburger span{display:block; width:26px; height:2px; background:#0b1324; margin:6px 0; transition:.3s}
@media (max-width:900px){
  .hamburger{display:block}
  .nav{position:fixed; inset:64px 0 auto 0; background:rgba(255,255,255,.98); padding:20px 5%; border-bottom:1px solid #e5eaf1; transform:translateY(-120%); transition:.35s}
  .nav.open{transform:translateY(0)}
  .nav ul{flex-direction:column; gap:14px}
}

.skip{position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden}
.skip:focus{left:12px; top:12px; width:auto; height:auto; background:#fff; padding:8px 10px; border-radius:6px; box-shadow:var(--shadow)}

.hero{
  background: radial-gradient(1200px 600px at 80% -10%, #e0f2fe 0, transparent 60%),
              radial-gradient(700px 400px at -10% 20%, #ccfbf1 0, transparent 60%);
  padding:64px 0 24px;
}
.hero-inner{display:grid; grid-template-columns: 1.1fr .9fr; gap:32px; align-items:center}
.hero-copy .lead{font-size:18px}
.badges{display:flex; gap:16px; flex-wrap:wrap; padding:0; list-style:none}
.badges li{background:#fff; border:1px solid #e5eaf1; padding:8px 12px; border-radius:999px; font-size:14px; color:#384152}
.hero-art .glass{border-radius:24px; background:linear-gradient(135deg,rgba(255,255,255,.7),rgba(255,255,255,.35)); padding:12px; box-shadow:var(--shadow)}

.strip{background:linear-gradient(90deg,var(--brand) 0,var(--brand-2) 100%); color:#fff}
.strip .grid-3{padding:16px 0}
.strip strong{display:block; font-size:28px}
.strip span{opacity:.9}

.features{padding:56px 0}
.card{background:var(--card); border:1px solid #eef2f7; padding:18px; border-radius:var(--radius); box-shadow:var(--shadow)}
.cards{padding:24px 0}
.split{display:grid; grid-template-columns:1fr 1fr; gap:28px; align-items:center; margin:40px auto}
@media (max-width:900px){.hero-inner,.split{grid-template-columns:1fr}}

.btn{display:inline-block; border-radius:999px; padding:12px 18px; font-weight:700; border:2px solid transparent}
.btn.primary{background:linear-gradient(90deg,var(--brand),var(--brand-2)); color:#fff}
.btn.ghost{border-color:#cfe7ff; color:#0b1324}
.btn.link{padding:0; border:none; font-weight:700}

.page-hero{padding:48px 0 10px; background:linear-gradient(0deg, rgba(96,165,250,.12), transparent 60%)}
.check{list-style:none; padding:0}
.check li{padding-left:28px; position:relative; margin:.5em 0}
.check li:before{content:""; position:absolute; left:0; top:.35em; width:18px; height:18px; border-radius:50%; background:radial-gradient(circle at 30% 30%, var(--accent), var(--brand));}

.contact-grid{display:grid; grid-template-columns:1.2fr .8fr; gap:24px; margin:32px 0 56px}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr}}
.contact-form input, .contact-form textarea{width:100%; padding:12px 14px; border-radius:10px; border:1px solid #dbe3ef; background:#fff; outline:none}
.contact-form label{display:block; font-weight:600; margin:.4em 0 .2em}

.site-footer{background:#ffffff; border-top:1px solid #e5eaf1; margin-top:48px}
.site-footer .container{padding:28px 0}
.site-footer h4{margin-bottom:.5em}
.contact-list, .company-list{list-style:none; padding:0; margin:0}
.footnote{padding-bottom:20px; border-top:1px dashed #e9eef6; margin-top:18px}

/* Reveal on scroll */
.reveal{opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease}
.reveal.visible{opacity:1; transform:none}

/* Floating Action Button */
.fab{position:fixed; right:18px; bottom:18px; z-index:60}
.fab-btn{
  width:56px; height:56px; border-radius:50%; border:none; cursor:pointer;
  color:#fff; background:linear-gradient(135deg, var(--brand), var(--brand-2));
  display:grid; place-items:center; box-shadow:var(--shadow);
}
.fab-menu{position:absolute; right:70px; bottom:0; display:flex; gap:10px; flex-direction:column; padding:10px; background:rgba(255,255,255,.98); border:1px solid #e8eef7; border-radius:12px; box-shadow:var(--shadow)}
.fab-item{display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:10px; background:#fff; border:1px solid #eef2f7}
.fab-item:hover{background:#f6fbff}
.fab-menu[hidden]{display:none}

.icon.phone::before{content:"📞"}
.icon.mail::before{content:"✉️"}
.icon.whatsapp::before{content:"💬"}

/* Utility glass */
.glass{border-radius:20px; background:linear-gradient(135deg, rgba(255,255,255,.6), rgba(255,255,255,.35)); padding:12px; border:1px solid rgba(180,200,230,.35); box-shadow:var(--shadow)}

.cta-wide{padding:56px 0; background: radial-gradient(900px 400px at 90% -10%, #e0f2fe 0, transparent 65%), radial-gradient(700px 300px at -10% 50%, #d1fae5 0, transparent 60%)}

/* === Contact page centering === */
.page-hero .container{
  text-align: center;             /* หัวข้อ Contact กึ่งกลาง */
}

/* ทำให้สองการ์ดกึ่งกลางทั้งบล็อก */
.contact-grid{
  grid-template-columns: minmax(0,560px) minmax(0,420px);
  justify-content: center;        /* จัดทั้งกริดให้อยู่กลาง */
  max-width: 1020px;              /* แคบลงเล็กน้อยให้ดูบาลานซ์ */
  margin: 32px auto 56px;         /* คงระยะห่างเดิมแต่กึ่งกลาง */
}

@media (max-width: 900px){
  .contact-grid{
    grid-template-columns: 1fr;   /* มือถือเป็นคอลัมน์เดียว */
    max-width: 680px;
  }
}


/* Footnote inline credit */
.footnote .foot-flex{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;}
.footnote .credit{opacity:.85; font-size:13px}
.footnote .credit a{text-decoration:none}