/* K&E Techno Supply — เดโม (ตามสั่ง)
   โครงหน้าและจังหวะการเล่าเรื่องยืมมาจาก bullsdynamic.com (ฮีโร่เต็มจอ → แถบตัวเลข →
   การ์ดบริการ → เหตุผลที่เลือกเรา → ขั้นตอนทำงาน → พาร์ตเนอร์/มาตรฐาน → แถบปิดการขาย)
   แต่เปลี่ยนชุดสีเป็นของ K&E เอง: ทองจากโลโก้ + น้ำเงินน้ำ แทนน้ำเงิน-เขียวของ Bulls */

:root{
  --ink:#080C12;
  --navy:#0C1B2A;
  --navy-2:#123049;
  --water:#2AA9C9;
  --water-deep:#0E7490;
  --gold:#D8B45A;
  --gold-lite:#EBD08A;
  --paper:#F4F7F9;
  --line:#DFE6EC;
  --text:#0E1A24;
  --muted:#5C6E7C;
  --maxw:1220px;
  --pad:clamp(18px,4vw,40px);
  --ease:cubic-bezier(.22,1,.36,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:92px}
body{
  margin:0;background:#fff;color:var(--text);
  font-family:Inter,"Noto Sans Thai",Kanit,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased;
}
html[lang="th"] body{font-family:Kanit,"Noto Sans Thai",Inter,sans-serif;line-height:1.8}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.eyebrow{
  font-size:12px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;
  color:var(--water-deep);margin:0 0 10px;
}
.on-dark .eyebrow{color:var(--gold)}
h1,h2,h3{margin:0 0 14px;line-height:1.12;letter-spacing:-.02em;font-weight:800;color:var(--navy)}
h1{font-size:clamp(31px,3.9vw,52px);letter-spacing:-.03em}
h2{font-size:clamp(26px,3.3vw,40px)}
h3{font-size:clamp(18px,1.5vw,21px);line-height:1.25}
p{margin:0 0 16px}
.lede{font-size:clamp(16px,1.25vw,19px);color:var(--muted);max-width:62ch}
.on-dark h1,.on-dark h2,.on-dark h3{color:#fff}
.on-dark .lede{color:#B9C9D6}
section{padding:clamp(46px,5.4vw,82px) 0}
.sec-head{max-width:70ch;margin:0 0 clamp(24px,3vw,38px)}

/* ---------- ปุ่ม ---------- */
.btn{
  display:inline-flex;align-items:center;gap:9px;border:0;cursor:pointer;
  padding:14px 26px;border-radius:4px;font-weight:700;font-size:15px;
  text-decoration:none;transition:transform .35s var(--ease),background .25s,box-shadow .35s var(--ease);
}
.btn-gold{background:linear-gradient(135deg,var(--gold-lite),var(--gold));color:#20170A;box-shadow:0 10px 26px -12px rgba(216,180,90,.85)}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 16px 34px -12px rgba(216,180,90,.95)}
.btn-ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.42)}
.btn-ghost:hover{background:rgba(255,255,255,.1);transform:translateY(-2px)}
.btn-dark{background:var(--navy);color:#fff}
.btn-dark:hover{transform:translateY(-2px);background:var(--navy-2)}

/* ---------- แถบหัวเว็บ ----------
   14/9/26 jek ชี้ตัวอย่างจาก glow-clinic: แถบโปร่งทับรูปฮีโร่ตอนอยู่บนสุด ·
   ลิงก์บาง เว้นวรรคกว้าง มีเส้นใต้ตอนชี้ · มีปุ่มยาแคปซูลปิดการขายอยู่ขวาสุด ·
   ปุ่มเมนูมีคำว่า "เมนู" กำกับ ไม่ใช่ขีดสามขีดลอยๆ
   ต่างจากต้นแบบตรงพื้น — glow ใช้พื้นขาวเพราะฮีโร่เขาสีชมพูอ่อน ของเราฮีโร่เป็นรูป
   มืด แถบขาวจะตัดกันจนลอย จึงใช้โปร่ง→ทึบแทน (สีแบรนด์ K&E คือทองบนพื้นหมึกอยู่แล้ว)
   "เริ่มเลื่อนหรือยัง" อ่านจากคลาส .scrolled ที่ตั้งด้วย IntersectionObserver

   ⚠️ ต้องเป็น position:fixed ไม่ใช่ sticky — sticky ยังกินที่ในสายการวาง แปลว่าแถบ
   จะอยู่ "เหนือ" ฮีโร่ ไม่ได้ "ทับ" ฮีโร่ พอทำพื้นโปร่งจึงเห็นพื้นขาวของ body
   แทนที่จะเห็นรูป (เจอตอนวัดจริง 14/9/26) ฮีโร่จึงต้องเผื่อ padding-top ไว้เอง */
.nav{position:fixed;top:0;left:0;right:0;z-index:60;transition:background .45s var(--ease),border-color .45s var(--ease),backdrop-filter .45s var(--ease)}
.nav{background:transparent;border-bottom:1px solid transparent}
html.scrolled .nav{background:rgba(8,12,18,.92);backdrop-filter:blur(10px);border-bottom-color:rgba(216,180,90,.26)}
.nav-in{display:flex;align-items:center;gap:26px;height:88px;max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);transition:height .45s var(--ease)}
html.scrolled .nav-in{height:72px}

.brand{display:flex;align-items:center;gap:12px;text-decoration:none;flex:0 0 auto}
.brand img{height:42px;width:auto;border-radius:3px;transition:height .45s var(--ease)}
html.scrolled .brand img{height:36px}
.brand b{color:#fff;font-size:15.5px;letter-spacing:.07em;font-weight:700;line-height:1.15}
.brand span{display:block;color:var(--gold);font-size:9.5px;letter-spacing:.24em;font-weight:600}

.nav-links{margin-left:auto;display:flex;gap:30px}
.nav-links a{
  position:relative;color:#DCE5EC;text-decoration:none;font-size:13px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;padding:8px 0;white-space:nowrap;
}
/* เส้นใต้ "ลากออกมา" จากกลาง ไม่ใช่ border ที่ปรากฏทันที */
.nav-links a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;background:var(--gold);
  transform:scaleX(0);transform-origin:center;transition:transform .45s var(--ease);
}
.nav-links a:hover{color:#fff}
.nav-links a:hover::after{transform:scaleX(1)}

.nav-right{display:flex;align-items:center;gap:14px;flex:0 0 auto}
.lang{display:flex;border:1px solid rgba(255,255,255,.32);border-radius:999px;overflow:hidden}
.lang button{background:transparent;border:0;color:#CFDBE4;font:inherit;font-size:11.5px;font-weight:700;padding:6px 12px;cursor:pointer;letter-spacing:.06em}
.lang button[aria-pressed="true"]{background:var(--gold);color:#20170A}

/* ปุ่มยาแคปซูลปิดการขาย — ท่าที่ยืมมาจาก glow-clinic ตรงๆ */
.nav-cta{
  display:inline-flex;align-items:center;text-decoration:none;white-space:nowrap;
  background:linear-gradient(135deg,var(--gold-lite),var(--gold));color:#20170A;
  font-size:13px;font-weight:700;letter-spacing:.02em;padding:11px 22px;border-radius:999px;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}
.nav-cta:hover{transform:translateY(-2px);box-shadow:0 12px 26px -12px rgba(216,180,90,.9)}

.burger{display:none;align-items:center;gap:9px;background:none;border:0;padding:6px 2px;cursor:pointer}
.burger-bars{display:block;width:22px}
.burger-bars i{display:block;height:1.5px;background:#fff;margin:5px 0;transition:transform .35s var(--ease),opacity .35s var(--ease)}
.burger em{font-style:normal;color:#DCE5EC;font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase}
.burger[aria-expanded="true"] .burger-bars i:first-child{transform:translateY(3.25px) rotate(45deg)}
.burger[aria-expanded="true"] .burger-bars i:last-child{transform:translateY(-3.25px) rotate(-45deg)}

/* ---------- ฮีโร่ ----------
   14/9/26 jek: "โมเสก 4 ช่องดูแปลก" → เปลี่ยนเป็นรูปเดียวเต็มความกว้าง
   รูปจริงที่ใหญ่สุดในโปรไฟล์กว้าง 670px จึงขยายไฟล์ไว้ที่ 1600px ก่อน (img/hero.jpg)
   เบราว์เซอร์จะได้ไม่ต้องยืดบิตแมปเล็กซ้ำอีกชั้น · เลือกรูปบ่อเติมอากาศเพราะเป็นรูปเดียว
   ในกองที่ "ดูแล้วรู้ทันทีว่าขายอะไร" และเป็นภาพชัดตื้น การขยายจึงไม่ฟ้องเท่าภาพคมทั้งใบ */
.hero{position:relative;padding:0;background:var(--ink);display:flex;align-items:center;min-height:min(82vh,660px);overflow:hidden}
.hero-bg{position:absolute;inset:0}
.hero-bg img{
  width:100%;height:100%;object-fit:cover;object-position:50% 50%;
  /* รูปละอองน้ำจากโปรไฟล์เป็นภาพโทนมืด พอทับม่านแล้วเกือบดำสนิท จึงดันความสว่างที่ตัวรูป
     แทนการลดม่าน (ลดม่านอย่างเดียวตัวหนังสือฝั่งซ้ายจะอ่านไม่ออก)
     เป็น filter แบบค้างที่ ไม่ได้อนิเมต จึงไม่ผิดข้อห้าม "ห้ามอนิเมต filter" */
  filter:brightness(1.45) contrast(1.05) saturate(1.05);
}
/* ม่านไล่จากซ้าย ไม่ทาทับทั้งใบ — ตัวหนังสืออ่านออกโดยที่รูปยังเห็นเต็มฝั่งขวา */
.hero-bg::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(100deg,rgba(6,10,16,.94) 0%,rgba(7,14,22,.86) 30%,rgba(8,18,28,.42) 56%,rgba(8,18,28,.06) 100%),
    linear-gradient(to top,rgba(6,10,16,.55) 0%,rgba(6,10,16,0) 26%);
}
.hero-in{position:relative;z-index:2;width:100%;max-width:var(--maxw);margin:0 auto;padding:clamp(132px,13vw,178px) var(--pad) clamp(84px,9vw,116px)}
.hero-copy{max-width:640px}
.hero h1{max-width:16ch;margin-bottom:18px}
.hero h1 em{font-style:normal;color:var(--gold-lite)}
.hero-copy > p{max-width:48ch;color:#C3D1DC;font-size:clamp(15px,1.15vw,17.5px)}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.hero-tag{display:flex;align-items:center;gap:12px;color:var(--gold);font-size:11.5px;letter-spacing:.15em;font-weight:700;text-transform:uppercase;margin-bottom:18px}
.hero-tag::before{content:"";width:30px;height:1px;background:var(--gold);flex:0 0 auto}
.hero-caps{display:grid;grid-template-columns:repeat(4,auto);justify-content:start;margin:26px 0 0;padding:0}
.hero-caps span{
  font-size:11px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:#D8E4EC;
  padding:0 14px;border-left:1px solid rgba(216,180,90,.55);line-height:1.25;white-space:nowrap;
}
.hero-caps span:first-child{padding-left:0;border-left:0}

/* เซนเซอร์บอกว่า "เริ่มเลื่อนหรือยัง" — ใช้กับแถบหัวเว็บ (ดู .nav) */
#topSentinel{display:block;height:28px;margin-bottom:-28px;pointer-events:none}

/* ---------- ฮีโร่: อนิเมชันตอนหน้าเปิด ----------
   ทำด้วย CSS keyframes ล้วน ไม่ผูกกับ JS และ **สถานะพื้นฐานของทุกตัวคือมองเห็น**
   คีย์เฟรมวิ่งจาก "ซ่อน → เห็น" เท่านั้น ถ้าอนิเมชันไม่ทำงาน (ปิดการเคลื่อนไหว /
   เบราว์เซอร์เก่า / กฎ *{animation:none} ในโหมดลดการเคลื่อนไหว) หน้าจะอยู่ที่สถานะ
   เห็นเสมอ — ต่างจาก reveal ตอนเลื่อนที่ต้อง gate ใต้ html.js เพราะต้องรอ JS มาปลด
   ค่า: outQuint · 720ms · 26px (website.md §530) · ไล่ทีละชั้น ~90ms */
@keyframes heroRise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes heroLine{from{transform:scaleX(0)}to{transform:scaleX(1)}}
/* รูปฮีโร่ค่อยๆ ถอยออก — ท่าเดียวที่ใช้กับรูป ไม่วนซ้ำ จบแล้วจบเลย */
@keyframes heroSettle{from{transform:scale(1.07)}to{transform:scale(1)}}

.hero-bg img{animation:heroSettle 1.8s var(--ease) both}
.hero-tag,.hero h1,.hero-copy > p,.hero-cta,.hero-caps{animation:heroRise .72s var(--ease) both}
.hero-tag{animation-delay:.05s}
.hero h1{animation-delay:.14s}
.hero-copy > p{animation-delay:.23s}
.hero-cta{animation-delay:.32s}
.hero-caps{animation-delay:.41s}
.hero-tag::before{transform-origin:left center;animation:heroLine .8s var(--ease) .05s both}

/* ---------- แถบตัวเลข ---------- */
.stats{background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line)}
.stat{background:var(--paper);padding:clamp(22px,3vw,34px) 20px;text-align:center}
.stat b{display:block;font-size:clamp(28px,3.4vw,42px);font-weight:800;color:var(--navy);letter-spacing:-.03em;line-height:1}
/* หน่วยต้องอยู่บรรทัดเดียวกับตัวเลข — เคยแยกเป็น <b> สองก้อนแล้ว display:block
   ดันคำว่า "yr" ตกบรรทัดใหม่ (jek จับได้ 14/9/26) ตัวเลขจึงห่อเป็น <i> ใน <b> ก้อนเดียว */
.stat b i{font-style:normal}
.stat b small{font-size:.45em;font-weight:700;letter-spacing:0}
.stat span{display:block;margin-top:8px;font-size:13px;color:var(--muted);font-weight:600}

/* ---------- ขอบเขตงานสี่ด้าน (แบบแถบ) ----------
   audit 14/9/26: เดิมเป็นการ์ดมีรูป 4 ใบ วางก่อนกริด "ระบบและบริการ" 6 ใบ
   ผู้อ่านจึงเจอการแบ่งหมวดแบบเดียวกันสองรอบใน 2.6 จอแรก (Water&Wastewater ≈ การ์ด
   1-2 · Cooling&Utility ≈ การ์ด 4 · Lifecycle ≈ การ์ด 5) ยุบเหลือแถบสี่บรรทัด
   ให้ทำหน้าที่เป็น "ภาพรวมว่าครอบคลุมอะไร" ส่วนรายละเอียดไปอยู่ที่กริดข้างล่างที่เดียว */
.disc{list-style:none;counter-reset:d;margin:0;padding:0;display:grid;gap:0}
.disc li{
  counter-increment:d;display:grid;grid-template-columns:58px minmax(0,.9fr) minmax(0,1.35fr);
  gap:clamp(14px,2.4vw,34px);align-items:baseline;
  padding:20px 0;border-top:1px solid var(--line);
}
.disc li:last-child{border-bottom:1px solid var(--line)}
.disc li::before{
  content:"0" counter(d);font-size:13px;font-weight:800;letter-spacing:.16em;color:var(--gold);
}
.disc b{font-size:clamp(17px,1.5vw,20px);color:var(--navy);line-height:1.25}
.disc span{color:var(--muted);font-size:14.5px;line-height:1.6}

/* หมายเหตุใต้กริดผลงาน — กันคนนับใบแล้วสงสัยว่าทำไมไม่ตรงกับเลข 18+ ในแถบสถิติ */
.proj-note{margin:clamp(18px,2.4vw,26px) 0 0;font-size:14px;color:var(--muted);max-width:76ch}

@media (max-width:820px){
  .disc li{grid-template-columns:44px 1fr;gap:10px 14px;padding:16px 0}
  .disc span{grid-column:2}
}

/* ---------- การ์ด ---------- */
.grid{display:grid;gap:22px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.card{
  background:#fff;border:1px solid var(--line);border-radius:6px;overflow:hidden;
  display:flex;flex-direction:column;transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .3s;
}
.card:hover{transform:translateY(-5px);box-shadow:0 24px 48px -26px rgba(10,30,45,.45);border-color:#C7D6E1}
.card figure{margin:0;aspect-ratio:16/10;overflow:hidden;background:var(--navy)}
.card figure img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.card:hover figure img{transform:scale(1.05)}
.card-body{padding:22px 24px 26px;flex:1;display:flex;flex-direction:column}
.card-num{font-size:12px;font-weight:800;letter-spacing:.18em;color:var(--water-deep);margin-bottom:8px}
.card p{font-size:14.5px;color:var(--muted);margin-bottom:14px}
.ticks{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.ticks li{position:relative;padding-left:22px;font-size:14px;color:var(--text)}
.on-dark .ticks li{color:#D6E3EC}
.ticks li::before{content:"";position:absolute;left:0;top:7px;width:11px;height:6px;border-left:2px solid var(--water);border-bottom:2px solid var(--water);transform:rotate(-45deg)}

/* ---- ส่วน "วิธีทำงาน" แบบย่อ (โปรไฟล์หน้า 6) ----
   14/9/26 jek: "หน้านี้ใหญ่ไปและไม่ได้สำคัญขนาดนั้น" → ยุบจากการ์ดใหญ่สองใบ +
   สารบัญ 4 แถว เหลือแถบเตี้ยแถบเดียว หัวข้อกับคำสัญญาอยู่บรรทัดเดียวกัน
   สารบัญ 4 กลุ่มถอดออก เพราะหลังรวม "ระบบและบริการ" เป็น 6 การ์ดแล้ว มันชี้ไปที่เดียวกันหมด */
.case{padding:clamp(38px,4.4vw,58px) 0}
.approach{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(22px,3.5vw,48px);align-items:center}
.approach-head{padding-bottom:0}
.approach-head::after{display:none}
.approach-head h2{font-size:clamp(22px,2.4vw,32px);margin:0}
.promise{display:grid;gap:14px}
.promise-card{display:flex;gap:14px;align-items:flex-start;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.13);border-left:3px solid var(--gold);border-radius:5px;padding:14px 18px}
.promise-ico{width:26px;height:26px;color:var(--gold);flex:0 0 auto;margin-top:2px}
.promise-card b{display:block;color:#fff;font-size:15.5px;margin-bottom:3px}
.promise-card span{display:block;color:#A9BDCC;font-size:14px;line-height:1.55}
@media (max-width:820px){ .approach{grid-template-columns:1fr} }

/* ---------- กรณีศึกษา ก่อน-หลัง ---------- */
.case{background:var(--navy);color:#fff;position:relative;overflow:hidden}
.case::before{content:"";position:absolute;inset:0;z-index:2;background:radial-gradient(1000px 420px at 82% -10%,rgba(42,169,201,.2),transparent 62%)}
.case .wrap{position:relative;z-index:2}


/* ---------- ขั้นตอนทำงาน ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;counter-reset:s}
.step{position:relative;padding:0 22px 0 0}
.step::before{
  counter-increment:s;content:"0" counter(s);
  display:block;font-size:13px;font-weight:800;letter-spacing:.2em;color:var(--gold);margin-bottom:14px;
}
.step::after{content:"";position:absolute;left:0;top:38px;right:22px;height:2px;background:linear-gradient(90deg,var(--gold),rgba(216,180,90,.12))}
/* jek 14/9/26: ไอคอนชิดเส้นทองด้านบนเกินไป ถอยลงมาให้หายใจ */
.step-ico{width:34px;height:34px;color:var(--water-deep);display:block;margin:30px 0 6px}
.step h3{margin-top:10px;font-size:18px}
.case .steps{margin-top:clamp(28px,3.4vw,44px)}
.on-dark .step h3{color:#fff}
.on-dark .step p{color:#A9BDCC}
.on-dark .step-ico{color:var(--gold)}
.on-dark .step::after{background:linear-gradient(90deg,var(--gold),rgba(216,180,90,.12))}
.step p{font-size:14px;color:var(--muted);margin:0}

/* ---------- ผลงาน ---------- */
.proj{background:var(--paper)}
.proj-card{background:#fff;border:1px solid var(--line);border-radius:6px;overflow:hidden;transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.proj-card:hover{transform:translateY(-4px);box-shadow:0 22px 44px -24px rgba(10,30,45,.4)}
.proj-card figure{margin:0;aspect-ratio:4/3;overflow:hidden;background:var(--navy)}
.proj-card figure img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.proj-card:hover figure img{transform:scale(1.06)}
.proj-body{padding:16px 18px 20px}
.proj-body h3{font-size:16px;margin-bottom:8px}
.proj-meta{font-size:13px;color:var(--muted);margin:0}
.proj-meta b{color:var(--text);font-weight:700}
.pill{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--water-deep);background:rgba(42,169,201,.12);padding:4px 9px;border-radius:3px;margin-bottom:10px}

/* ---- ป้ายหมวดงานในกริดผลงาน: คนละสีต่อชนิดงาน ----
   jek 14/9/26 ขอให้แยกสี · คุมให้ยังเป็นครอบครัวเดียวกันด้วยการใช้พื้นอ่อน 10%
   กับตัวหนังสือสีเข้มของหมวดนั้น ทุกคู่วัดคอนทราสต์บนพื้นการ์ดขาวแล้วเกิน 4.5:1 */
.pill[data-cat="petro"]{color:#0F3A5C;background:rgba(15,58,92,.10)}
.pill[data-cat="build"]{color:#1B6B46;background:rgba(27,107,70,.10)}
.pill[data-cat="pure"]{color:#0E7490;background:rgba(14,116,144,.10)}
.pill[data-cat="auto"]{color:#39468F;background:rgba(57,70,143,.10)}
.pill[data-cat="start"]{color:#8A5A0B;background:rgba(138,90,11,.12)}
.pill[data-cat="modify"]{color:#6B3E97;background:rgba(107,62,151,.10)}
.pill[data-cat="control"]{color:#14625F;background:rgba(20,98,95,.10)}
.pill[data-cat="power"]{color:#9B3524;background:rgba(155,53,36,.10)}
.pill[data-cat="fab"]{color:#5C4A2E;background:rgba(92,74,46,.12)}

/* ---------- นวัตกรรม ---------- */
.inno{background:var(--ink);color:#fff}
.blind{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:36px}
.blind div{border:1px solid rgba(255,255,255,.14);border-left:3px solid var(--gold);border-radius:5px;padding:18px 20px;background:rgba(255,255,255,.035)}
.blind b{display:block;color:#fff;font-size:16px;margin-bottom:6px}
.blind p{margin:0;font-size:14px;color:#9FB3C2}
.inno-split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,4vw,48px);align-items:center}
.inno-media img{border-radius:6px;border:1px solid rgba(255,255,255,.16);margin-bottom:16px}
.inno-sub{color:var(--gold-lite);font-weight:700;font-size:14.5px;letter-spacing:.02em;margin:-6px 0 12px}

/* เส้นทางของข้อมูล — sensors → RTU/PLC → gateway → SCADA → database → cloud */
.chain-k{font-size:11px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:#7F94A6;margin:22px 0 10px}
.chain{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:8px;counter-reset:none}
.chain li{
  background:rgba(42,169,201,.12);border:1px solid rgba(42,169,201,.35);border-radius:4px;
  padding:6px 10px;font-size:12px;font-weight:600;color:#D6E8F0;position:relative;white-space:nowrap;
}
.chain li:not(:last-child)::after{content:"→";margin-left:9px;color:var(--gold);font-weight:700}
.chain{gap:6px}
.alerts{display:flex;gap:8px;flex-wrap:wrap;margin:0}
.alerts span{
  background:rgba(216,180,90,.14);border:1px solid rgba(216,180,90,.42);border-radius:999px;
  padding:6px 15px;font-size:12.5px;font-weight:700;color:var(--gold-lite);letter-spacing:.04em;
}

/* สี่ผลลัพธ์ที่ลูกค้าได้ */
.gains{
  list-style:none;margin:clamp(28px,3.4vw,44px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(4,1fr);gap:10px;
}
/* audit 14/9/26: เดิมเป็นกล่องเปล่าที่มีแค่คำเดียววางกลาง ดูเหมือนแถบที่ยังทำไม่เสร็จ
   เติมไอคอนกับบรรทัดขยายความ แล้วชิดซ้าย ให้มันอ่านเป็น "เนื้อหา" ไม่ใช่ "ป้าย" */
.gains li{
  border:1px solid rgba(255,255,255,.14);border-top:2px solid var(--gold);border-radius:5px;
  background:rgba(255,255,255,.04);padding:18px 18px 20px;
}
.gains svg{width:26px;height:26px;color:var(--gold);display:block;margin-bottom:12px}
.gains b{display:block;font-size:15px;color:#fff;margin-bottom:5px}
.gains li span{display:block;font-size:13.5px;line-height:1.55;color:#9FB3C2}

/* ---------- ครอบคลุมพื้นที่ ---------- */
.cover-split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,54px);align-items:center}
.cover-split img{border-radius:6px;border:1px solid var(--line)}

/* ---------- เสาหลักสองต้น (หน้า 5 ของโปรไฟล์: I = Innovation · S = Solution) ----------
   ของเดิมย่อทั้งหน้าเหลือ bullet เดียวในลิสต์ ซึ่งทิ้งคำพูดที่เขาเขียนเองไปหมด
   ทำเป็นบล็อกสองคอลัมน์แทน แต่ไม่ตั้งเป็น section ใหม่ — วางต่อในส่วน "พันธสัญญา"
   ที่พูดเรื่องเดียวกันอยู่แล้ว จะได้ไม่ยืดหน้าเพิ่มอีกหนึ่งจอ */
.pillars{margin-top:clamp(36px,5vw,64px)}
.pillars-lede{max-width:72ch;color:var(--muted);font-size:clamp(15px,1.2vw,18px);margin-bottom:clamp(22px,3vw,34px)}
.pillars-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,40px)}
.pillar{position:relative;padding-left:62px}
.pillar + .pillar{border-left:1px solid var(--line);padding-left:calc(62px + clamp(20px,3vw,40px))}
.pillar-mark{
  position:absolute;left:0;top:-6px;font-size:52px;font-weight:800;line-height:1;
  color:var(--water-deep);opacity:.22;letter-spacing:-.04em;
}
.pillar + .pillar .pillar-mark{left:clamp(20px,3vw,40px)}
.pillar h3{margin-bottom:8px}
.pillar p{font-size:14.5px;color:var(--muted);margin:0}
@media (max-width:820px){
  .pillars-grid{grid-template-columns:1fr}
  .pillar + .pillar{border-left:0;border-top:1px solid var(--line);padding-left:62px;padding-top:22px}
  .pillar + .pillar .pillar-mark{left:0;top:16px}
}

/* ---------- คำถามที่พบบ่อย ---------- */
.faq{max-width:860px}
.faq details{border-bottom:1px solid var(--line);padding:4px 0}
.faq summary{cursor:pointer;list-style:none;padding:18px 44px 18px 0;font-weight:700;font-size:17px;color:var(--navy);position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:8px;top:27px;width:9px;height:9px;border-right:2px solid var(--water-deep);border-bottom:2px solid var(--water-deep);transform:rotate(45deg);transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:rotate(225deg)}
.faq details p{margin:0 0 18px;color:var(--muted);font-size:15px;max-width:70ch}

/* ---------- แถบปิดการขาย + ท้ายเว็บ ---------- */
.cta{background:linear-gradient(120deg,var(--navy) 0%,var(--navy-2) 58%,#17466A 100%);color:#fff;text-align:center}
.cta h2{max-width:22ch;margin:0 auto 14px}
.cta p{color:#BFD1DE;max-width:58ch;margin:0 auto 26px}
.cta-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.foot{background:var(--ink);color:#9FB3C2;font-size:14px;padding:clamp(40px,5vw,64px) 0 28px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:30px}
.foot h4{color:#fff;font-size:13px;letter-spacing:.16em;text-transform:uppercase;margin:0 0 14px}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.foot a{text-decoration:none;color:#9FB3C2}
.foot a:hover{color:var(--gold)}
.foot-bot{margin-top:34px;padding-top:20px;border-top:1px solid rgba(255,255,255,.12);display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:12.5px}

/* ---------- ชั้นการเคลื่อนไหวที่เหลืออยู่ ----------
   14/9/26 jek: "เอาอนิเมชันการ์ดตอนเลื่อนออก" → ถอดกลไก reveal ทั้งชุดทิ้ง
   (คลาส .rv/.rv-item · IntersectionObserver ที่ใส่คลาส .in · การไล่ทีละใบ)
   ที่เหลือไว้มีสามอย่างซึ่งไม่ผูกกับการเลื่อน: อนิเมชันฮีโร่ตอนเปิดหน้า ·
   ตัวเลขที่วิ่งขึ้นในแถบสถิติ · เอฟเฟกต์ตอนชี้เมาส์ */

/* เส้นใต้หัวข้อ section — วาดไว้เลย ไม่ต้องรอเลื่อนถึง */
.sec-head{position:relative;padding-bottom:18px}
.sec-head::after{content:"";position:absolute;left:0;bottom:0;width:104px;height:2px;background:linear-gradient(90deg,var(--water),rgba(42,169,201,0))}
.on-dark .sec-head::after{background:linear-gradient(90deg,var(--gold),rgba(216,180,90,0))}
.stat b{font-variant-numeric:tabular-nums}
.case-mark{position:absolute;right:-70px;top:50%;width:min(48vw,620px);height:auto;transform:translateY(-50%);opacity:.14;mix-blend-mode:screen;pointer-events:none;z-index:1}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
}

/* ---------- จอเล็ก ---------- */
@media (max-width:1180px){
  .nav-links{gap:18px}
  .nav-links a{font-size:12px;letter-spacing:.08em}
  .brand b{font-size:14px}
  .nav-cta{padding:10px 16px;font-size:12px}
}
@media (max-width:1000px){
  .hero{min-height:0}
  .hero-caps{grid-template-columns:1fr 1fr;gap:10px 20px}
  .hero-caps span{padding:0;border-left:0;white-space:normal}
  .hero-in{padding-top:clamp(110px,22vw,150px);padding-bottom:clamp(64px,9vw,92px)}
  .g4{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr);gap:26px 0}
  .foot-grid{grid-template-columns:1fr 1fr}
  .inno-split,.cover-split{grid-template-columns:1fr}
  .gains{grid-template-columns:1fr 1fr}
  .blind{grid-template-columns:1fr}
}
@media (max-width:900px){
  .case-mark{width:min(70vw,420px);right:-110px;opacity:.1}
  html.js .case.in-view .case-mark{opacity:.1}
}
@media (max-width:820px){
  .nav-in{gap:12px;height:74px}
  html.scrolled .nav-in{height:66px}
  .brand img{height:32px}
  html.scrolled .brand img{height:30px}
  .brand b{font-size:13px;letter-spacing:.03em}
  .brand span span{display:none}
  .lang button{padding:5px 10px;font-size:11px}
  .nav-cta{display:none}
  .nav-right{margin-left:auto;gap:10px}
  .nav-links{display:none;position:absolute;top:100%;left:0;right:0;background:rgba(8,12,18,.98);flex-direction:column;gap:0;padding:8px 0;border-bottom:1px solid rgba(216,180,90,.22)}
  .nav-links.open{display:flex}
  .nav-links a{padding:14px var(--pad);letter-spacing:.1em}
  .nav-links a::after{display:none}
  .burger{display:flex}
  .g3,.g2{grid-template-columns:1fr}
  /* ผลงาน 9 ใบเรียงตั้งเดี่ยวบนมือถือ = กำแพง 4.8 จอ (audit-height S1.3)
     ซอยเป็นสองคอลัมน์แทนการตัดเนื้อหาลูกค้าทิ้ง — การ์ดใบนี้มีแค่รูป/ป้าย/ชื่อ/ที่ตั้ง
     จึงอ่านออกที่ความกว้างครึ่งจอ */
  /* การ์ด 6 ใบเรียงตั้งเดี่ยวบนมือถือ = กำแพง 3.8 จอ (audit-height S1.3)
     ซอยเป็นสองคอลัมน์เหมือนกริดผลงาน แทนการตัดเนื้อหาลูกค้าทิ้ง */
  #projGrid,#systems .grid{grid-template-columns:1fr 1fr;gap:12px}
  #systems .card-body{padding:13px 14px 16px}
  #systems .card h3{font-size:14.5px;line-height:1.3;margin-bottom:10px}
  #systems .card p{font-size:12.5px}
  #systems .ticks li{font-size:12.5px;padding-left:18px;line-height:1.45}
  #systems .ticks li::before{width:9px;height:5px;top:6px}
  #projGrid .proj-body{padding:12px 13px 15px}
  #projGrid h3{font-size:14px;line-height:1.3}
  #projGrid .proj-meta{font-size:11.5px;line-height:1.45}
  #projGrid .pill{font-size:9px;letter-spacing:.1em;padding:3px 7px;margin-bottom:8px}
  .case-facts{grid-template-columns:1fr}
  .stats-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  /* จอ 390px: แบรนด์ + TH/EN + ปุ่มเมนูที่มีคำว่า "เมนู" รวมกันล้นขอบ 13px
     ย่อช่องไฟกับตัวอักษรลง แทนการถอดคำว่า "เมนู" ทิ้ง (คำกำกับคือจุดที่ยืมมาจากต้นแบบ) */
  .nav-in{gap:8px}
  .brand b{font-size:12px;letter-spacing:.02em}
  .brand img{height:28px}
  .lang button{padding:4px 8px;font-size:10.5px}
  .burger{gap:6px}
  .burger em{font-size:10.5px;letter-spacing:.1em}
  .g4{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .hero{min-height:auto}
}