:root{
  --blue:#1493d4;
  --blue-dark:#0c6fa1;
  --blue-soft:#e8f4fb;
  --navy:#24424f;
  --muted:#6d8089;
  --bg:#ffffff;
  --gray:#f3f6f8;
  --line:#e2eaef;
  --radius:6px;
  --shadow:0 10px 30px rgba(20,70,95,.10);
  --font-h:'Prompt',sans-serif;
  --font-b:'Anuphan',sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:#33454e;font-family:var(--font-b);line-height:1.7}
img{max-width:100%;display:block}
.container{width:min(1140px,92%);margin:0 auto}
h1,h2,h3,h4{font-family:var(--font-h);color:var(--navy);line-height:1.3;margin:0 0 .6rem}
.sec-title{font-size:1.7rem;font-weight:600}
.sec-title.center{text-align:center}
.sec-title.left{text-align:left}
.sec-sub{text-align:center;color:var(--muted);max-width:640px;margin:0 auto 2rem}
.center{text-align:center}
.muted{color:var(--muted)}
.btn{display:inline-block;text-decoration:none;font-family:var(--font-h);font-weight:600;font-size:.9rem;
  letter-spacing:.03em;padding:.75rem 1.7rem;border-radius:4px;transition:.2s;border:1px solid transparent;cursor:pointer}
.btn-solid{background:var(--blue);color:#fff}
.btn-solid:hover{background:var(--blue-dark)}
.btn-outline{border-color:var(--blue);color:var(--blue);background:#fff}
.btn-outline:hover{background:var(--blue-soft)}
.btn-white{border-color:#fff;color:var(--blue);background:#fff}
.btn-white:hover{background:var(--blue-soft)}

/* TOPBAR */
.topbar{background:#f7fafc;border-bottom:1px solid var(--line);font-size:.8rem}
.topbar-inner{display:flex;justify-content:space-between;align-items:center;padding:.4rem 0}
.topbar a{color:var(--muted);text-decoration:none}
.topbar a:hover{color:var(--blue)}
.sep{margin:0 .6rem;color:#c4d2d9}
.topbar-right{display:flex;align-items:center;gap:1rem}
.social{display:flex;gap:.4rem}
.social i{width:18px;height:18px;border-radius:50%;border:1px solid #b9c9d1;display:block}
.top-phone{font-weight:700;color:var(--navy)!important}

/* HEADER */
.header-main{display:flex;align-items:center;gap:2rem;padding:1.1rem 0}
.logo{display:flex;align-items:center;gap:.6rem;text-decoration:none}
.logo-mark{width:46px;height:40px;background:var(--blue);color:#fff;font-family:var(--font-h);font-weight:700;
  display:grid;place-items:center;border-radius:4px;font-size:1.1rem;letter-spacing:.02em}
.logo-text{font-family:var(--font-h);font-weight:700;color:var(--blue);line-height:1.05;font-size:1.05rem}
.logo-text small{display:block;color:var(--navy);font-size:.62rem;letter-spacing:.28em;font-weight:600}
.header-info{margin-left:auto;display:flex;gap:2rem;font-size:.82rem;color:var(--muted)}
.hi{display:flex;gap:.55rem;align-items:flex-start}
.hi-icon{color:var(--blue);font-size:1.15rem}
.hi-icon.blue{background:var(--blue);color:#fff;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-size:1rem}
.phone{color:var(--blue);font-size:1.05rem}
.hamburger{display:none;background:none;border:1px solid var(--line);border-radius:8px;width:44px;height:42px;cursor:pointer;flex-direction:column;gap:5px;align-items:center;justify-content:center}
.hamburger span{width:20px;height:2px;background:var(--navy);display:block}

/* NAV */
.mainnav{background:#fff;border-top:1px solid var(--line);box-shadow:0 2px 10px rgba(0,0,0,.04);position:sticky;top:0;z-index:40}
.nav-inner{display:flex;align-items:center;justify-content:space-between}
.nav-links{display:flex;gap:1.6rem}
.nav-links a{text-decoration:none;color:var(--navy);font-family:var(--font-h);font-weight:500;font-size:.86rem;
  letter-spacing:.04em;padding:1rem 0;border-bottom:3px solid transparent;text-transform:uppercase}
.nav-links a:hover,.nav-links a.active{color:var(--blue);border-color:var(--blue)}
.nav-search{color:var(--muted);font-size:1.2rem;cursor:pointer}

/* HERO */
.hero{position:relative;background:linear-gradient(90deg,#eef6fb 55%,#ffffff 55%);overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:center;padding:3.2rem 0;min-height:420px}
.hero-photo img{width:100%;height:340px;object-fit:cover;border-radius:4px;box-shadow:var(--shadow)}
.hero-copy h1{font-size:clamp(2rem,4.4vw,3rem);color:var(--blue);font-weight:600}
.hero-copy p{color:var(--muted)}
.hero-actions{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.2rem}
.hero-dots{display:flex;gap:.5rem;margin-top:1.4rem}
.hero-dots button{width:34px;height:5px;border:0;border-radius:99px;background:#c9d9e2;cursor:pointer}
.hero-dots button.on{background:var(--blue)}
.slider-arrow{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;
  border:1px solid var(--line);background:#fff;color:var(--muted);font-size:1.4rem;cursor:pointer;z-index:5}
.slider-arrow:hover{color:var(--blue);border-color:var(--blue)}
.slider-arrow.left{left:14px}.slider-arrow.right{right:14px}
.slider-arrow.small{position:static;transform:none;flex:none}

/* WELCOME */
.welcome{padding:3.5rem 0}
.welcome-grid{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;color:var(--muted)}
.welcome-grid b{color:var(--navy)}

/* CTA STRIP */
.cta-strip{background:linear-gradient(rgba(20,147,212,.82),rgba(20,147,212,.82)),url('https://images.unsplash.com/photo-1504608524841-42fe6f032b4b?w=1400&q=60&auto=format&fit=crop') center/cover;color:#fff}
.cta-inner{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding:2.4rem 0}
.cta-inner h2{color:#fff;font-weight:600;font-size:1.6rem;margin:0}

/* SERVICES */
.services{background:var(--gray);padding:3.8rem 0}
.carousel{display:flex;align-items:center;gap:1rem;margin-bottom:1.6rem}
.svc-track{flex:1;display:grid;grid-auto-flow:column;grid-auto-columns:calc(33.333% - .8rem);gap:1.2rem;overflow-x:auto;scroll-snap-type:x mandatory;padding:.4rem .2rem;scrollbar-width:none}
.svc-track::-webkit-scrollbar{display:none}
.svc-card{background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);scroll-snap-align:start;border:1px solid var(--line)}
.svc-card img{height:180px;width:100%;object-fit:cover}
.svc-card h3{font-size:1rem;padding:1rem 1.1rem 0}
.svc-card p{font-size:.85rem;color:var(--muted);padding:0 1.1rem 1.2rem;margin:0}

/* ZONE LAB */
.zlab{padding:3.8rem 0}
.zlab-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:2.5rem;align-items:start}
.zform{display:grid;grid-template-columns:1fr 1fr auto;gap:.7rem;margin:1.2rem 0;align-items:end}
.zform label{display:grid;gap:.35rem;font-size:.85rem;color:var(--muted);font-weight:600}
.zform input{border:1px solid var(--line);border-radius:4px;padding:.7rem .8rem;font-size:1rem;width:100%;font-family:var(--font-b)}
.zform input:focus{outline:2px solid var(--blue)}
.zmax{color:var(--muted)}.zmax b{color:var(--blue)}
.zones{display:grid;gap:.6rem}
.zone{background:#fff;border:1px solid var(--line);border-left:5px solid var(--blue);border-radius:4px;padding:.75rem 1rem;box-shadow:var(--shadow)}
.zone b{font-family:var(--font-h);color:var(--navy)}
.zone span{display:block;color:var(--muted);font-size:.88rem}
.zone .bar{height:7px;background:#e8eff3;border-radius:99px;margin-top:.5rem;overflow:hidden}
.zone .bar i{display:block;height:100%;background:var(--blue)}
.zone.z1{border-color:#8fd0a8}.zone.z1 .bar i{width:20%;background:#3faf71}
.zone.z2 .bar i{width:40%}.zone.z3 .bar i{width:60%;background:#f0a22e}
.zone.z4 .bar i{width:80%;background:#ef6c2e}.zone.z5{border-color:#ef5350}.zone.z5 .bar i{width:100%;background:#ef5350}

/* PROJECTS */
.projects{padding:3.8rem 0;background:#fff}
.proj-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}
.proj-card{position:relative;border-radius:4px;overflow:hidden;box-shadow:var(--shadow)}
.proj-card img{height:300px;width:100%;object-fit:cover}
.proj-label{position:absolute;left:12px;right:12px;bottom:12px;background:var(--blue);color:#fff;
  font-family:var(--font-h);font-size:.9rem;padding:.8rem 1rem;border-radius:3px}

/* ABOUT */
.about{background:var(--gray);padding:3.8rem 0}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;align-items:center}
.about-photos{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.about-photos img{height:260px;object-fit:cover;border-radius:4px;box-shadow:var(--shadow)}
.about-grid .btn{margin-top:1rem}

/* WHY */
.why{padding:3.8rem 0}
.why-grid{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;align-items:center}
.why-photo{height:340px;width:100%;object-fit:cover;border-radius:4px;box-shadow:var(--shadow)}
.checklist{list-style:none;margin:1.2rem 0;padding:0;display:grid;gap:1rem}
.checklist li{display:flex;gap:.9rem}
.checklist span{color:var(--blue);font-size:1.4rem;flex:none}
.checklist b{color:var(--navy)}
.checklist p{margin:.1rem 0 0;color:var(--muted);font-size:.92rem}
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;margin-top:3rem;text-align:center}
.feat-icon{width:64px;height:64px;border:1px solid var(--blue);color:var(--blue);border-radius:50%;
  display:grid;place-items:center;font-size:1.5rem;margin:0 auto 1rem}
.feat h3{font-size:1.02rem}
.feat p{color:var(--muted);font-size:.92rem}

/* TESTIMONIALS */
.testi{background:var(--gray);padding:3.8rem 0}
.testi-grid{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
.testi-card{background:#fff;border:1px solid var(--line);border-radius:4px;padding:1.6rem;text-align:center;box-shadow:var(--shadow)}
.avatar{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;margin:0 auto 1rem;color:#fff;font-weight:700;font-family:var(--font-h)}
.avatar.a1{background:#ef5350}.avatar.a2{background:#2e8b9a}
.testi-card p{color:var(--muted);font-style:italic}
.testi-card b{color:var(--navy)}
.testi-card small{color:var(--muted)}
.dots{display:flex;gap:.45rem;justify-content:center;margin-top:1.4rem}
.dots span{width:9px;height:9px;border-radius:50%;background:#c3d3db}
.dots span.on{background:var(--blue)}

/* BLUE CTA */
.blue-cta{background:var(--blue);color:#fff;text-align:center;padding:3.2rem 0}
.blue-cta h2{color:#fff;font-size:1.7rem}
.blue-cta p{opacity:.9;max-width:560px;margin:0 auto 1.4rem}

/* NEWS */
.news{padding:3.8rem 0}
.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-bottom:1.6rem}
.news-card{background:#fff;border:1px solid var(--line);border-radius:4px;overflow:hidden;box-shadow:var(--shadow)}
.news-card img{height:170px;width:100%;object-fit:cover}
.news-card div{padding:1rem 1.1rem}
.news-card h3{font-size:.98rem}
.news-card small{color:var(--muted)}

/* FOOTER */
.footer{background:#fff;padding-top:3rem}
.footer-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:2rem;padding-bottom:2.5rem}
.footer h4{font-size:.95rem}
.flinks{display:grid;gap:.3rem}
.flinks a{color:var(--muted);text-decoration:none;font-size:.92rem}
.flinks a:hover{color:var(--blue)}
.bottombar{background:var(--blue);color:#fff;font-size:.82rem}
.bottom-inner{display:flex;justify-content:space-between;gap:1rem;padding:.8rem 0;flex-wrap:wrap}
.bottom-inner a{color:#fff;text-decoration:none}

/* RESPONSIVE */
@media (max-width:960px){
  .header-info{display:none}
  .hero-grid,.welcome-grid,.zlab-grid,.proj-grid,.about-grid,.why-grid,.testi-grid,.news-grid,.feat-grid{grid-template-columns:1fr}
  .svc-track{grid-auto-columns:calc(50% - .6rem)}
  .footer-grid{grid-template-columns:1fr 1fr}
  .cta-inner{flex-direction:column;text-align:center}
  .slider-arrow.left{left:4px}.slider-arrow.right{right:4px}
}
@media (max-width:640px){
  .topbar-left{display:none}
  .topbar-inner{justify-content:flex-end}
  .hamburger{display:flex}
  .header-main{gap:1rem}
  .mainnav .nav-inner{padding:0}
  .nav-links{display:none;flex-direction:column;gap:0;padding:.5rem 4%}
  .mainnav.open .nav-links{display:flex}
  .nav-links a{padding:.7rem 0;border-bottom:1px solid var(--line)}
  .nav-search{display:none}
  .hero{background:#eef6fb}
  .hero-grid{padding:2rem 0}
  .hero-photo img{height:220px}
  .svc-track{grid-auto-columns:82%}
  .zform{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .bottom-inner{justify-content:center;text-align:center}
}