/* ==========================================================================
   premium.css — ธีม Tech Premium
   โหลดหลัง style.css: Hero พื้นน้ำเงินเข้ม, เส้น network, ตู้ server 3D,
   การ์ดขอบเรืองแสง, พื้นหลังลาย grid
   ========================================================================== */

:root {
  --glow: 0 0 0 1px rgba(56,168,245,.25), 0 20px 50px -10px rgba(11,111,203,.45);
  --grid-line: rgba(11,111,203,.07);
}

body {
  background:
    radial-gradient(1200px 600px at 100% 0%, rgba(56,168,245,.10), transparent 60%),
    var(--blue-50);
}

/* ---------- Header บนพื้นเข้ม ---------- */
.site-header__bar {
  background: rgba(255,255,255,.72);
  border-color: rgba(255,255,255,.6);
  box-shadow: 0 8px 30px rgba(6,26,48,.12);
}

/* ---------- Hero เข้ม ---------- */
.hero--dark,
.page-hero {
  margin-top: -78px;
  color: #fff;
  background:
    radial-gradient(900px 500px at 85% 20%, rgba(56,168,245,.35), transparent 60%),
    radial-gradient(700px 400px at 0% 100%, rgba(11,111,203,.35), transparent 60%),
    linear-gradient(160deg, #061A30 0%, #0A2540 45%, #0B3F75 100%);
  isolation: isolate;
}
.hero--dark { padding: 150px 0 110px; }
.page-hero { padding: 150px 0 72px; }

/* ลาย grid จางๆ */
.hero--dark::before,
.page-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  width: auto; height: auto;
  background:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px) 0 0 / 56px 56px,
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px) 0 0 / 56px 56px;
  mask-image: radial-gradient(ellipse 80% 70% at 60% 40%, #000 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 60% 40%, #000 30%, transparent 80%);
}
/* ขอบล่างไล่เฉดเข้าหาเนื้อหา (ไม่มีเส้นตัด) */
.hero--dark::after,
.page-hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; top: auto;
  width: auto; height: 160px; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--blue-50) 25%, transparent) 45%, var(--blue-50) 100%);
}

.hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; opacity: .7; }
/* ลูกโลกวงจรมุมขวาบนของ hero */
.hero-globe {
  position: absolute; z-index: -1; pointer-events: none;
  top: -160px; right: -140px; width: 620px; max-width: none; height: auto;
  opacity: .45;
  animation: spin 180s linear infinite;
}
@media (max-width: 1100px) { .hero-globe { width: 520px; top: -140px; right: -170px; } }
@media (max-width: 860px)  { .hero-globe { width: 420px; top: -110px; right: -170px; opacity: .3; } }
@media (max-width: 640px)  { .hero-globe { width: 320px; top: -80px; right: -150px; opacity: .25; } }
/* เส้น network ในพื้นที่สีน้ำเงินอื่นๆ (hero-canvas.js ใส่ให้) */
.particles-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; opacity: .8; }
.site-footer { isolation: isolate; }

.hero--dark .eyebrow,
.page-hero .eyebrow {
  background: rgba(56,168,245,.14);
  color: #BFE2FF;
  border: 1px solid rgba(56,168,245,.3);
}
.hero--dark .hero__title { color: #fff; letter-spacing: -.01em; }
.hero--dark .accent,
.page-hero .accent {
  background: linear-gradient(90deg, #7CC8FF 0%, #38A8F5 50%, #BFE2FF 100%);
  -webkit-background-clip: text; background-clip: text;
}
.hero--dark .hero__lead,
.page-hero p { color: rgba(255,255,255,.72); }
.page-hero h1 { color: #fff; }
.page-hero .breadcrumb,
.page-hero .breadcrumb a { color: rgba(255,255,255,.6); }
.page-hero .breadcrumb a:hover { color: #fff; }
.page-hero .breadcrumb li + li::before { color: rgba(255,255,255,.3); }
.page-hero .breadcrumb [aria-current] { color: #fff; }

.hero--dark .btn-ghost {
  background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.2);
}
.hero--dark .btn-ghost:hover { background: rgba(255,255,255,.16); color: #fff; }
.hero--dark .btn-primary { box-shadow: 0 10px 30px rgba(56,168,245,.45); }
.hero--dark .chip {
  background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); color: rgba(255,255,255,.8);
}
.hero--dark .chip svg { color: #7CC8FF; }

/* ---------- Hero visual: ตู้ server 3D ---------- */
.hero--dark .hero__visual { perspective: 1400px; }

.hero__orbit {
  position: absolute; left: 50%; top: 48%; width: 88%; aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  border: 1px dashed rgba(124,200,255,.25);
  animation: spin 40s linear infinite;
}
.hero__orbit::after {
  content: ""; position: absolute; top: 12%; left: 12%; width: 10px; height: 10px; border-radius: 50%;
  background: #7CC8FF; box-shadow: 0 0 16px 4px rgba(124,200,255,.7);
}
.hero__orbit--2 { width: 64%; border-style: solid; border-color: rgba(124,200,255,.12); animation-duration: 26s; animation-direction: reverse; }
.hero__orbit--2::after { top: auto; bottom: 8%; left: auto; right: 14%; width: 7px; height: 7px; }

.rack {
  position: absolute; left: 50%; top: 47%;
  width: 56%; translate: -50% -50%;
  display: grid; gap: 12px;
  transform: rotateX(18deg) rotateY(-24deg) rotateZ(2deg);
  transform-style: preserve-3d;
  animation: rackFloat 7s ease-in-out infinite;
}
.rack__unit {
  position: relative; height: 58px; border-radius: 14px;
  display: flex; align-items: center; gap: 8px; padding: 0 18px;
  background: linear-gradient(135deg, rgba(255,255,255,.22), rgba(255,255,255,.06));
  border: 1px solid rgba(255,255,255,.28);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    14px 16px 0 -2px rgba(11,111,203,.35),
    0 24px 40px rgba(0,0,0,.25);
}
.rack__unit i {
  width: 8px; height: 8px; border-radius: 50%; background: #3DF5A7;
  box-shadow: 0 0 10px #3DF5A7;
  animation: blink 2.4s ease-in-out infinite;
}
.rack__unit i:nth-child(2) { background: #7CC8FF; box-shadow: 0 0 10px #7CC8FF; animation-delay: -.8s; }
.rack__unit i:nth-child(3) { background: #7CC8FF; box-shadow: 0 0 10px #7CC8FF; animation-delay: -1.6s; opacity: .6; }
.rack__unit:nth-child(2) i:first-child { animation-delay: -1.2s; }
.rack__unit:nth-child(3) i:first-child { animation-delay: -.4s; }
.rack__unit b {
  margin-left: auto; width: 45%; height: 18px; border-radius: 6px;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.35) 0 3px, transparent 3px 8px);
  opacity: .55;
}
.rack__base {
  height: 16px; margin: 6px 8% 0; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(56,168,245,.6), transparent 70%);
  filter: blur(6px);
}

.hero--dark .glass-tile {
  background: linear-gradient(145deg, rgba(255,255,255,.22), rgba(255,255,255,.05));
  border-color: rgba(255,255,255,.3);
  color: #BFE2FF;
  box-shadow: 0 20px 40px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.35);
}
.hero--dark .glass-tile--dark { background: linear-gradient(145deg, #1E88E5, #0B6FCB); color: #fff; border-color: rgba(255,255,255,.35); }
.hero--dark .hero__status {
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.22);
  color: #fff;
  box-shadow: 0 20px 40px rgba(0,0,0,.25);
}
.hero--dark .hero__status span { color: rgba(255,255,255,.7); }

/* ---------- Strip / Stats ลอยทับขอบ hero ---------- */
.hero--dark + .section--tight { padding-top: 0; margin-top: -40px; position: relative; z-index: 2; }

.stat {
  position: relative; overflow: hidden;
  background: #fff; border: 1px solid var(--line);
  transition: transform .25s, box-shadow .25s;
}
.stat::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--grad-brand);
}
.stat:hover { transform: translateY(-4px); box-shadow: var(--glow); }
.stat__num {
  font-size: 42px; font-weight: 600;
  background: linear-gradient(135deg, #0A2540, #0B6FCB);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stat__icon { background: var(--grad-brand); color: #fff; box-shadow: 0 8px 18px rgba(11,111,203,.3); }

/* ---------- Sections: ลาย grid ---------- */
.section--alt {
  background:
    linear-gradient(var(--grid-line) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px) 0 0 / 48px 48px,
    #fff;
}

.eyebrow { border: 1px solid rgba(11,111,203,.15); }
.section-title { letter-spacing: -.01em; }

/* ---------- Cards: ขอบ gradient + glow ---------- */
.card {
  border: 1px solid transparent;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(135deg, rgba(56,168,245,.45), rgba(217,232,246,.6) 40%, rgba(217,232,246,.6) 60%, rgba(11,111,203,.35)) border-box;
}
.card:hover { transform: translateY(-6px); box-shadow: var(--glow); }
.card--soft {
  background:
    linear-gradient(160deg, #fff 0%, var(--blue-100) 100%) padding-box,
    linear-gradient(135deg, rgba(56,168,245,.45), rgba(217,232,246,.6)) border-box;
}
.card--dark {
  background:
    radial-gradient(400px 240px at 100% 0%, rgba(56,168,245,.35), transparent 70%) padding-box,
    linear-gradient(160deg, #0A2540, #0B3F75) padding-box,
    linear-gradient(135deg, rgba(124,200,255,.6), rgba(255,255,255,.05)) border-box;
}
.card--blue {
  background:
    radial-gradient(300px 200px at 100% 0%, rgba(255,255,255,.25), transparent 70%) padding-box,
    linear-gradient(135deg, #0B6FCB, #38A8F5) padding-box,
    linear-gradient(135deg, rgba(255,255,255,.6), rgba(255,255,255,.1)) border-box;
}
.card__icon {
  background: var(--grad-brand); color: #fff;
  box-shadow: 0 10px 22px rgba(11,111,203,.3);
}
.card--dark .card__icon, .card--blue .card__icon {
  background: rgba(255,255,255,.14); box-shadow: inset 0 1px 0 rgba(255,255,255,.25);
}

/* strip */
.strip {
  background:
    radial-gradient(500px 260px at 100% 0%, rgba(56,168,245,.4), transparent 70%),
    linear-gradient(145deg, #0A2540 0%, #0B3F75 100%);
  border: 1px solid rgba(124,200,255,.25);
}
.strip__item { backdrop-filter: blur(6px); }
.strip__item:hover { background: rgba(56,168,245,.2); border-color: rgba(124,200,255,.4); }

/* zones / steps / refs */
.zone, .step, .ref { transition: transform .25s, box-shadow .25s, border-color .25s; }
.zone:hover, .step:hover { transform: translateY(-4px); box-shadow: var(--glow); border-color: transparent; }
.ref:hover { box-shadow: var(--glow); border-color: transparent; }
.ref__icon { background: var(--grad-brand); color: #fff; }

.marquee__item { transition: color .2s, border-color .2s; }
.marquee__item:hover { color: var(--blue-600); border-color: var(--blue-200); }

/* ---------- CTA เข้ม ---------- */
.cta {
  background:
    radial-gradient(600px 300px at 90% 10%, rgba(56,168,245,.55), transparent 65%),
    linear-gradient(135deg, #061A30 0%, #0A2540 50%, #0B4F8F 100%);
  border: 1px solid rgba(124,200,255,.25);
}
.cta::before {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px) 0 0 / 40px 40px,
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px) 0 0 / 40px 40px;
  mask-image: linear-gradient(90deg, transparent, #000);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000);
}
.cta::after { background: rgba(56,168,245,.15); filter: blur(10px); }
.cta > div:first-child { position: relative; z-index: 1; }
.cta .btn-light { background: var(--grad-brand); color: #fff; box-shadow: 0 10px 26px rgba(56,168,245,.4); }
.cta .btn-light:hover { color: #fff; }

/* ---------- Footer ---------- */
.site-footer {
  position: relative; overflow: hidden;
  background:
    radial-gradient(700px 300px at 100% 0%, rgba(11,111,203,.3), transparent 70%),
    var(--navy-900);
}
.site-footer::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(124,200,255,.6), transparent);
}

/* ---------- Animations ---------- */
@keyframes spin { to { rotate: 360deg; } }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@keyframes rackFloat {
  0%, 100% { translate: -50% -50%; }
  50%      { translate: -50% calc(-50% - 10px); }
}

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .hero--dark { padding: 130px 0 100px; }
  .hero--dark .hero__visual { max-width: 440px; }
}
@media (max-width: 640px) {
  .hero--dark, .page-hero { margin-top: -70px; }
  .hero--dark { padding: 136px 0 90px; }
  .page-hero { padding: 136px 0 64px; }
  .rack { width: 62%; gap: 9px; }
  .rack__unit { height: 44px; padding: 0 12px; border-radius: 11px; }
  .stat__num { font-size: 32px; }
}

/* ==========================================================================
   บริการหลัก (หน้าแรก) — การ์ด spotlight + ขอบแสงวิ่ง
   ========================================================================== */
@property --beam { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

.svc {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: minmax(260px, .8fr) 2fr; gap: 28px;
  padding: 36px; border-radius: 32px;
  background:
    radial-gradient(600px 320px at 0% 0%, rgba(56,168,245,.35), transparent 70%),
    radial-gradient(500px 300px at 100% 100%, rgba(11,111,203,.45), transparent 70%),
    linear-gradient(150deg, #061A30 0%, #0A2540 55%, #0B3F75 100%);
  border: 1px solid rgba(124,200,255,.22);
  box-shadow: 0 40px 80px -30px rgba(6,26,48,.6), inset 0 1px 0 rgba(255,255,255,.08);
  color: #fff;
  isolation: isolate;
}
.svc::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px) 0 0 / 44px 44px,
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px) 0 0 / 44px 44px;
  mask-image: radial-gradient(ellipse 70% 90% at 20% 30%, #000, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 70% 90% at 20% 30%, #000, transparent 75%);
}

.svc__intro { display: flex; flex-direction: column; justify-content: center; padding: 8px 4px; }
.svc__kicker {
  align-self: flex-start; position: relative;
  padding-left: 22px; margin-bottom: 14px;
  font-size: 12.5px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase;
  color: #7CC8FF;
}
.svc__kicker::before {
  content: ""; position: absolute; left: 0; top: 50%; width: 14px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, #38A8F5, #BFE2FF);
}
.svc__intro h2 {
  font-size: clamp(30px, 3.4vw, 42px); font-weight: 500; line-height: 1.15; margin-bottom: 14px;
  background: linear-gradient(180deg, #fff 30%, #BFE2FF 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.svc__intro p { color: rgba(255,255,255,.66); font-size: 16px; margin-bottom: 28px; }
.svc__all {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 20px; border-radius: 999px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18);
  color: #fff; font-weight: 500; font-size: 15px;
  transition: background .25s, gap .25s, border-color .25s;
}
.svc__all svg { width: 18px; height: 18px; }
.svc__all:hover { color: #fff; background: rgba(56,168,245,.25); border-color: rgba(124,200,255,.5); gap: 14px; }

.svc__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }

.svc-tile {
  --mx: 50%; --my: 50%;
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto 1fr;
  column-gap: 16px; row-gap: 6px; align-items: start;
  min-height: 168px; padding: 22px;
  border-radius: 22px;
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.1);
  color: #fff;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: transform .35s cubic-bezier(.2,.8,.2,1), background .35s, border-color .35s, box-shadow .35s;
}
/* spotlight ตามเมาส์ (main.js ตั้ง --mx / --my) */
.svc-tile::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(260px circle at var(--mx) var(--my), rgba(56,168,245,.3), transparent 60%);
  opacity: 0; transition: opacity .35s;
}
/* ขอบแสงวิ่ง */
.svc-tile::after {
  content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; padding: 1px;
  background: conic-gradient(from var(--beam), transparent 0 70%, #7CC8FF 82%, #fff 88%, transparent 94%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .35s;
  pointer-events: none;
}
.svc-tile:hover, .svc-tile:focus-visible {
  color: #fff;
  transform: translateY(-4px);
  background: rgba(255,255,255,.07);
  border-color: rgba(124,200,255,.25);
  box-shadow: 0 24px 50px -20px rgba(56,168,245,.55);
}
.svc-tile:hover::before, .svc-tile:focus-visible::before { opacity: 1; }
.svc-tile:hover::after, .svc-tile:focus-visible::after { opacity: 1; animation: beam 3s linear infinite; }

.svc-tile__num {
  position: absolute; right: 20px; top: 14px;
  font-size: 44px; font-weight: 600; line-height: 1; letter-spacing: -.02em;
  background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  transition: transform .35s;
}
.svc-tile:hover .svc-tile__num { transform: translateY(-3px); }

.svc-tile__icon {
  grid-row: 1 / 3; position: relative;
  width: 52px; height: 52px; border-radius: 16px;
  display: grid; place-items: center;
  background: linear-gradient(145deg, #38A8F5, #0B6FCB);
  box-shadow: 0 12px 26px -6px rgba(56,168,245,.7), inset 0 1px 0 rgba(255,255,255,.4);
  transition: transform .35s cubic-bezier(.2,.8,.2,1);
}
.svc-tile__icon::after {
  content: ""; position: absolute; inset: -6px; border-radius: 20px;
  border: 1px solid rgba(124,200,255,.35);
  opacity: 0; transform: scale(.85); transition: opacity .35s, transform .35s;
}
.svc-tile__icon svg { width: 26px; height: 26px; color: #fff; }
.svc-tile:hover .svc-tile__icon { transform: rotate(-6deg) scale(1.06); }
.svc-tile:hover .svc-tile__icon::after { opacity: 1; transform: scale(1); }

.svc-tile__title { font-size: 17.5px; font-weight: 500; line-height: 1.35; padding-right: 48px; align-self: center; }
.svc-tile__desc { grid-column: 2; font-size: 14px; line-height: 1.55; color: rgba(255,255,255,.62); padding-right: 40px; }

.svc-tile__go {
  position: absolute; right: 18px; bottom: 18px;
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14);
  transition: background .35s, color .35s, transform .35s, border-color .35s;
}
.svc-tile__go svg { width: 16px; height: 16px; }
.svc-tile:hover .svc-tile__go { background: #fff; color: #0B6FCB; border-color: #fff; transform: rotate(45deg); }

@keyframes beam { to { --beam: 360deg; } }

@media (max-width: 1100px) {
  .svc { grid-template-columns: 1fr; }
  .svc__intro { padding: 0; }
}
@media (max-width: 640px) {
  .svc { padding: 24px 18px; border-radius: 26px; }
  .svc__grid { grid-template-columns: 1fr; gap: 12px; }
  .svc-tile { min-height: 0; padding: 18px; }
  .svc-tile__num { font-size: 36px; }
}
@media (hover: none) {
  .svc-tile::before { opacity: .5; }
}

/* ==========================================================================
   ตัวเลขสำคัญ (หน้าแรก) — แผงเดียว คั่นด้วยเส้นบาง
   ใช้ gap 1px + พื้นหลังสีเส้น เพื่อให้เส้นคั่นถูกต้องทั้ง 4 / 2 คอลัมน์
   ========================================================================== */
.stats {
  position: relative; gap: 1px; overflow: hidden;
  border-radius: 28px;
  background: linear-gradient(135deg, rgba(56,168,245,.35), rgba(217,232,246,.9) 35%, rgba(217,232,246,.9) 65%, rgba(11,111,203,.3));
  padding: 1px;
  box-shadow: 0 30px 60px -30px rgba(11,111,203,.35), 0 2px 6px rgba(10,37,64,.04);
}
.stats .stat {
  --mx: 50%; --my: 0%;
  flex-direction: row-reverse; align-items: center; justify-content: flex-end;
  gap: 18px; padding: 28px;
  border: 0; border-radius: 0; box-shadow: none;
  background: #fff;
  isolation: isolate;
}
.stats .stat:first-child { border-radius: 27px 0 0 27px; }
.stats .stat:last-child  { border-radius: 0 27px 27px 0; }

/* เส้นแสงด้านบน */
.stats .stat::before {
  top: 0; bottom: auto; left: 28px; right: 28px; width: auto; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, #38A8F5, transparent);
  transform: scaleX(0); transition: transform .5s cubic-bezier(.2,.8,.2,1);
}
/* spotlight */
.stats .stat::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(240px circle at var(--mx) var(--my), rgba(56,168,245,.12), transparent 70%);
  opacity: 0; transition: opacity .35s;
}
.stats .stat:hover { transform: none; box-shadow: none; }
.stats .stat:hover::before { transform: scaleX(1); }
.stats .stat:hover::after { opacity: 1; }

.stats .stat__icon {
  position: relative;
  width: 52px; height: 52px; border-radius: 16px;
  background: linear-gradient(145deg, #38A8F5, #0B6FCB);
  box-shadow: 0 12px 24px -8px rgba(11,111,203,.55), inset 0 1px 0 rgba(255,255,255,.4);
  transition: transform .35s cubic-bezier(.2,.8,.2,1);
}
.stats .stat__icon svg { width: 24px; height: 24px; }
.stats .stat__icon::after {
  content: ""; position: absolute; inset: -7px; border-radius: 21px;
  border: 1px solid rgba(56,168,245,.35);
  animation: ring 2.8s ease-out infinite;
}
.stats .stat:nth-child(2) .stat__icon::after { animation-delay: .7s; }
.stats .stat:nth-child(3) .stat__icon::after { animation-delay: 1.4s; }
.stats .stat:nth-child(4) .stat__icon::after { animation-delay: 2.1s; }
.stats .stat:hover .stat__icon { transform: translateY(-3px) rotate(-6deg); }

.stats .stat__num {
  font-size: clamp(30px, 2.8vw, 40px); font-weight: 600; line-height: 1; letter-spacing: -.02em;
  margin-bottom: 8px;
  background: linear-gradient(135deg, #0A2540 20%, #0B6FCB 70%, #38A8F5);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-variant-numeric: tabular-nums;
}
.stats .stat__label { font-size: 15px; color: var(--ink-soft); line-height: 1.45; }

/* ==========================================================================
   ทำไมต้องจิฏากาญจน์ (หน้าแรก)
   ========================================================================== */
.why__head {
  display: grid; grid-template-columns: 1.15fr 1fr; gap: 48px; align-items: end;
  margin-bottom: 48px;
}
.why__head .section-title { margin: 0; font-size: clamp(30px, 4vw, 48px); line-height: 1.15; }
.why__head .section-lead { margin: 0; padding-left: 24px; border-left: 2px solid var(--blue-200); }

.why__grid {
  display: grid; gap: 20px;
  grid-template-columns: repeat(12, 1fr);
  grid-template-areas:
    "photo photo photo photo photo photo photo pm pm pm pm pm"
    "photo photo photo photo photo photo photo ma ma ma ma ma"
    "stack stack stack stack stack stack stack stack stack stack stack stack";
}

/* ---- รูปทีมช่าง ---- */
.why-photo {
  grid-area: photo; position: relative; overflow: hidden;
  min-height: 560px; border-radius: 28px; margin: 0;
  isolation: isolate;
  box-shadow: 0 30px 60px -30px rgba(6,26,48,.55);
}
.why-photo img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 25%;
  transition: transform 1.2s cubic-bezier(.2,.8,.2,1);
}
.why-photo:hover img { transform: scale(1.05); }
.why-photo::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(6,26,48,0) 35%, rgba(6,26,48,.55) 60%, rgba(6,26,48,.95) 100%),
    linear-gradient(90deg, rgba(11,111,203,.25), transparent 60%);
}
.why-photo__badge {
  position: absolute; top: 20px; left: 20px; z-index: 2;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 9px 16px 9px 14px; border-radius: 999px;
  background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.3);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  color: #fff; font-size: 14px; font-weight: 500;
}
.why-photo__badge i {
  position: relative; width: 8px; height: 8px; border-radius: 50%; background: #3DF5A7;
}
.why-photo__badge i::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  border: 2px solid #3DF5A7; animation: ping 1.8s ease-out infinite;
}
.why-photo__body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 32px; color: #fff; }
.why-photo__tag {
  display: inline-block; margin-bottom: 12px;
  font-size: 12.5px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: #7CC8FF;
}
.why-photo__body h3 { font-size: clamp(24px, 2.4vw, 32px); margin-bottom: 10px; color: #fff; }
.why-photo__body p { margin: 0; max-width: 520px; color: rgba(255,255,255,.78); font-size: 15.5px; }

/* ---- การ์ดขวา ---- */
.why-card {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; gap: 24px; align-items: flex-start;
  padding: 30px; border-radius: 28px; color: #fff;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s;
}
.why-card:hover { transform: translateY(-5px); }
.why-card h3 { font-size: 22px; margin-bottom: 8px; color: #fff; }
.why-card p { font-size: 15px; margin-bottom: 18px; }
.why-card__body { position: relative; z-index: 1; flex: 1; min-width: 0; }

.why-card--dark {
  grid-area: pm;
  background:
    radial-gradient(360px 220px at 100% 0%, rgba(56,168,245,.4), transparent 70%),
    linear-gradient(155deg, #0A2540 0%, #0B3F75 100%);
  border: 1px solid rgba(124,200,255,.22);
  box-shadow: 0 30px 60px -30px rgba(6,26,48,.6);
}
.why-card--dark p { color: rgba(255,255,255,.7); }
.why-card--dark:hover { box-shadow: 0 34px 70px -28px rgba(11,111,203,.7); }

.why-card--blue {
  grid-area: ma; flex-direction: column; gap: 18px;
  background:
    radial-gradient(300px 200px at 0% 100%, rgba(255,255,255,.2), transparent 70%),
    linear-gradient(135deg, #0B6FCB 0%, #38A8F5 100%);
  border: 1px solid rgba(255,255,255,.3);
  box-shadow: 0 30px 60px -30px rgba(11,111,203,.7);
}
.why-card--blue p { color: rgba(255,255,255,.88); }
.why-card__bg {
  position: absolute; right: -40px; bottom: -50px; width: 220px; height: 220px;
  color: rgba(255,255,255,.14); transform: rotate(-12deg);
  transition: transform .6s cubic-bezier(.2,.8,.2,1);
}
.why-card--blue:hover .why-card__bg { transform: rotate(-4deg) scale(1.06); }

.why-card__icon {
  width: 52px; height: 52px; border-radius: 16px; flex: none;
  display: grid; place-items: center;
  background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.3);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35);
}
.why-card__icon svg { width: 26px; height: 26px; }
.why-card__icon--brand {
  background: linear-gradient(145deg, #38A8F5, #0B6FCB); color: #fff; border: 0;
  box-shadow: 0 12px 24px -8px rgba(11,111,203,.55), inset 0 1px 0 rgba(255,255,255,.4);
}

/* วงแหวนรอบการตรวจเช็ก */
.why-cycle { position: relative; width: 108px; height: 108px; flex: none; order: 2; }
.why-cycle__ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.why-cycle__ring circle { fill: none; stroke: rgba(124,200,255,.15); stroke-width: 6; }
.why-cycle__ring .why-cycle__arc {
  stroke: #38A8F5; stroke-linecap: round;
  stroke-dasharray: 327; stroke-dashoffset: 245;
  filter: drop-shadow(0 0 6px rgba(56,168,245,.8));
  transform-origin: 60px 60px;
  animation: cycle 4s linear infinite;
}
.why-cycle__dot {
  position: absolute; inset: 0; animation: spin 4s linear infinite;
}
.why-cycle__dot::before {
  content: ""; position: absolute; left: 50%; top: 1px; width: 10px; height: 10px; margin-left: -5px;
  border-radius: 50%; background: #fff; box-shadow: 0 0 12px 3px rgba(124,200,255,.9);
}
.why-cycle__icon {
  position: absolute; inset: 22px; border-radius: 50%;
  display: grid; place-items: center;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.2), rgba(255,255,255,.04));
  border: 1px solid rgba(255,255,255,.2);
  color: #BFE2FF;
}
.why-cycle__icon svg { width: 30px; height: 30px; }

.why-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.why-pills span {
  padding: 5px 12px; border-radius: 999px; font-size: 13px; font-weight: 500;
  background: rgba(56,168,245,.16); border: 1px solid rgba(124,200,255,.3); color: #BFE2FF;
}
.why-link { display: inline-flex; align-items: center; gap: 8px; color: #fff; font-weight: 500; }
.why-link svg { width: 18px; height: 18px; transition: transform .25s; }
.why-link:hover { color: #7CC8FF; }
.why-link:hover svg { transform: translateX(4px); }

/* ---- อุปกรณ์ที่รองรับ: ไดอะแกรมชั้นระบบ ---- */
.why-stack {
  grid-area: stack; position: relative; overflow: hidden; isolation: isolate;
  display: grid; grid-template-columns: minmax(240px, .75fr) 2fr; gap: 40px; align-items: center;
  padding: 36px; border-radius: 28px;
  border: 1px solid transparent;
  background:
    radial-gradient(500px 260px at 0% 100%, rgba(56,168,245,.10), transparent 70%) padding-box,
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(135deg, rgba(56,168,245,.5), rgba(217,232,246,.8) 40%, rgba(217,232,246,.8) 60%, rgba(11,111,203,.35)) border-box;
  box-shadow: 0 30px 60px -36px rgba(11,111,203,.4);
}
.why-stack::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(circle, rgba(11,111,203,.14) 1px, transparent 1.5px) 0 0 / 18px 18px;
  mask-image: linear-gradient(90deg, transparent 30%, #000 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 30%, #000 100%);
}
.why-stack__intro { display: flex; flex-direction: column; }
.why-stack__kicker {
  position: relative; align-self: flex-start; padding-left: 22px; margin-bottom: 14px;
  font-size: 12.5px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--blue-600);
}
.why-stack__kicker::before {
  content: ""; position: absolute; left: 0; top: 50%; width: 14px; height: 2px; border-radius: 2px;
  background: var(--grad-brand);
}
.why-stack__intro h3 { font-size: clamp(22px, 2.2vw, 28px); line-height: 1.25; margin-bottom: 12px; }
.why-stack__intro p { margin: 0; color: var(--ink-soft); font-size: 15px; }

.why-layers { position: relative; display: grid; gap: 10px; }
/* เส้นเชื่อมแนวตั้ง + จุดข้อมูลวิ่ง */
.why-layers__line {
  position: absolute; left: 25px; top: 26px; bottom: 26px; width: 2px;
  background: linear-gradient(180deg, var(--blue-200), rgba(56,168,245,.5), var(--blue-200));
  border-radius: 2px;
}
.why-layers__line i {
  position: absolute; left: 50%; top: 0; width: 8px; height: 22px; margin-left: -4px; border-radius: 8px;
  background: linear-gradient(180deg, transparent, #38A8F5, #fff);
  box-shadow: 0 0 12px 2px rgba(56,168,245,.7);
  animation: packet 3.2s cubic-bezier(.6,0,.4,1) infinite;
}

.why-layer {
  position: relative;
  display: grid; grid-template-columns: 52px 128px 1fr; gap: 16px; align-items: center;
  padding: 10px 14px 10px 0;
  border-radius: 18px;
  transition: background .3s, box-shadow .3s, transform .3s;
}
.why-layer::before {
  content: ""; position: absolute; inset: 0 0 0 26px; z-index: -1; border-radius: 18px;
  background: linear-gradient(90deg, var(--blue-50), rgba(234,245,255,.4));
  border: 1px solid var(--line);
  transition: background .3s, border-color .3s, box-shadow .3s;
}
.why-layer:hover { transform: translateX(6px); }
.why-layer:hover::before {
  background: linear-gradient(90deg, #fff, var(--blue-50));
  border-color: var(--blue-200);
  box-shadow: 0 14px 30px -18px rgba(11,111,203,.5);
}

.why-layer__node {
  position: relative; z-index: 1;
  width: 52px; height: 52px; border-radius: 16px;
  display: grid; place-items: center;
  background: #fff; color: var(--blue-600);
  border: 1px solid var(--blue-200);
  box-shadow: 0 6px 16px -6px rgba(11,111,203,.35);
  transition: background .3s, color .3s, box-shadow .3s, transform .3s;
}
.why-layer__node svg { width: 24px; height: 24px; }
.why-layer:hover .why-layer__node {
  background: linear-gradient(145deg, #38A8F5, #0B6FCB); color: #fff; border-color: transparent;
  box-shadow: 0 0 0 6px rgba(56,168,245,.15), 0 12px 24px -8px rgba(11,111,203,.6);
  transform: scale(1.05);
}

.why-layer__label {
  font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink);
}
.why-layer__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.why-layer__chips span {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px; border-radius: 999px;
  background: #fff; border: 1px solid var(--line);
  font-size: 13.5px; color: var(--ink);
  transition: border-color .2s, color .2s, transform .2s;
}
.why-layer__chips span::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--blue-400);
}
.why-layer__chips span:hover { color: var(--blue-600); border-color: var(--blue-200); transform: translateY(-2px); }

@keyframes packet {
  0%   { top: 0; opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { top: calc(100% - 22px); opacity: 0; }
}

@media (max-width: 1100px) {
  .why-stack { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 760px) {
  .why-stack { padding: 24px 18px; }
  .why-layer { grid-template-columns: 44px 1fr; row-gap: 10px; padding: 12px 12px 12px 0; }
  .why-layer::before { left: 22px; }
  .why-layer__node { width: 44px; height: 44px; border-radius: 13px; }
  .why-layer__node svg { width: 20px; height: 20px; }
  .why-layer__chips { grid-column: 2; }
  .why-layers__line { left: 21px; }
  .why-layer:hover { transform: none; }
}

/* ==========================================================================
   ลูกค้า (หน้าแรก) — พื้นเข้ม + marquee 2 แถวสวนทาง
   ========================================================================== */
.clients {
  position: relative; overflow: hidden; isolation: isolate;
  color: #fff;
  background:
    radial-gradient(800px 400px at 10% 0%, rgba(56,168,245,.28), transparent 65%),
    radial-gradient(700px 400px at 100% 100%, rgba(11,111,203,.4), transparent 65%),
    linear-gradient(170deg, #061A30 0%, #0A2540 55%, #0B3A6B 100%);
}
.clients::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px) 0 0 / 56px 56px,
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px) 0 0 / 56px 56px;
  mask-image: radial-gradient(ellipse 70% 80% at 50% 30%, #000 20%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 50% 30%, #000 20%, transparent 80%);
}
.clients::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(124,200,255,.5), transparent);
}

.clients__head {
  display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; align-items: end;
  margin-bottom: 56px;
}
.clients .eyebrow { background: rgba(56,168,245,.14); color: #BFE2FF; border-color: rgba(56,168,245,.3); }
.clients .section-title { margin: 0; color: #fff; font-size: clamp(30px, 4vw, 48px); line-height: 1.15; }
.clients .accent {
  background: linear-gradient(90deg, #7CC8FF, #38A8F5 50%, #BFE2FF);
  -webkit-background-clip: text; background-clip: text;
}
.clients__side { padding-left: 24px; border-left: 2px solid rgba(124,200,255,.3); }
.clients__side p { color: rgba(255,255,255,.7); font-size: 16.5px; margin-bottom: 18px; }
.clients__cta {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 22px; border-radius: 999px;
  background: #fff; color: var(--navy-800); font-weight: 500;
  box-shadow: 0 12px 30px -10px rgba(56,168,245,.6);
  transition: gap .25s, transform .25s, box-shadow .25s;
}
.clients__cta svg { width: 18px; height: 18px; }
.clients__cta:hover { color: var(--blue-600); gap: 14px; transform: translateY(-2px); box-shadow: 0 16px 36px -10px rgba(56,168,245,.8); }

.clients__rows { display: grid; gap: 16px; }
.clients .marquee { mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.clients .marquee__track { gap: 16px; animation-duration: 55s; padding-block: 8px; }
.clients .marquee--reverse .marquee__track { animation-direction: reverse; animation-duration: 65s; }

.client {
  display: inline-flex; align-items: center; gap: 14px; flex: none;
  padding: 14px 22px 14px 14px; border-radius: 20px;
  background: linear-gradient(145deg, rgba(255,255,255,.09), rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: background .3s, border-color .3s, transform .3s, box-shadow .3s;
}
.client:hover {
  background: linear-gradient(145deg, rgba(56,168,245,.25), rgba(255,255,255,.06));
  border-color: rgba(124,200,255,.5);
  transform: translateY(-4px);
  box-shadow: 0 18px 40px -16px rgba(56,168,245,.7);
}
.client__icon {
  width: 46px; height: 46px; border-radius: 14px; flex: none;
  display: grid; place-items: center;
  background: linear-gradient(145deg, rgba(56,168,245,.35), rgba(11,111,203,.25));
  border: 1px solid rgba(124,200,255,.35);
  color: #BFE2FF;
  transition: background .3s, color .3s;
}
.client__icon svg { width: 22px; height: 22px; }
.client:hover .client__icon { background: linear-gradient(145deg, #38A8F5, #0B6FCB); color: #fff; }
.client__logo {
  width: 46px; height: 46px; flex: none; padding: 6px; border-radius: 14px;
  display: grid; place-items: center; background: #fff;
  box-shadow: 0 6px 16px -6px rgba(0,0,0,.4);
  transition: transform .3s;
}
.client__logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.client__logo--bleed { padding: 0; background: #08A5E9; overflow: hidden; place-items: stretch; }
.client__logo--bleed img { max-width: 100%; max-height: 100%; width: 100%; height: 100%; object-fit: contain; }
.client:hover .client__logo { transform: scale(1.08); }
.client__text { display: flex; flex-direction: column; line-height: 1.3; }
.client__name { font-size: 16px; font-weight: 500; color: #fff; white-space: nowrap; }
.client__sector { font-size: 12px; letter-spacing: .06em; color: #7CC8FF; }

@media (max-width: 760px) {
  .clients__head { grid-template-columns: 1fr; gap: 20px; margin-bottom: 36px; }
  .clients__side { padding-left: 16px; }
  .client { padding: 10px 16px 10px 10px; border-radius: 16px; gap: 10px; }
  .client__icon { width: 38px; height: 38px; border-radius: 11px; }
  .client__icon svg { width: 18px; height: 18px; }
  .client__logo { width: 38px; height: 38px; border-radius: 11px; padding: 5px; }
  .client__name { font-size: 14.5px; }
}

/* ==========================================================================
   พื้นที่ให้บริการ (หน้าแรก) — แผนที่จุด + หมุด 19 จังหวัด
   ========================================================================== */
.zonemap__wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 56px; align-items: center; }

.zonemap__panel {
  position: relative; overflow: hidden; isolation: isolate;
  padding: 36px 28px 24px; border-radius: 32px;
  background:
    radial-gradient(420px 320px at 45% 40%, rgba(56,168,245,.28), transparent 70%),
    linear-gradient(160deg, #061A30 0%, #0A2540 55%, #0B3A6B 100%);
  border: 1px solid rgba(124,200,255,.22);
  box-shadow: 0 40px 80px -36px rgba(6,26,48,.7);
}
.zonemap__panel::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px) 0 0 / 40px 40px,
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px) 0 0 / 40px 40px;
}
.zonemap__map { position: relative; width: 100%; max-width: 360px; margin-inline: auto; aspect-ratio: 393 / 704; }
.zonemap__map img, .zonemap__pins { position: absolute; inset: 0; width: 100%; height: 100%; }
.zonemap__pins { overflow: visible; }

.pin { transition: opacity .35s; }
.pin__dot { fill: #fff; stroke: #38A8F5; stroke-width: 2.5; transition: fill .3s, r .3s; }
.pin__pulse {
  fill: rgba(56,168,245,.45);
  transform-box: fill-box; transform-origin: center;
  animation: pinPulse 2.6s ease-out infinite;
}
.pin[data-zone="2"] .pin__pulse { animation-delay: .65s; }
.pin[data-zone="3"] .pin__pulse { animation-delay: 1.3s; }
.pin[data-zone="4"] .pin__pulse { animation-delay: 1.95s; }
.pin__label {
  font: 500 15px var(--font); fill: #fff;
  paint-order: stroke; stroke: rgba(6,26,48,.9); stroke-width: 4px; stroke-linejoin: round;
  opacity: 0; transition: opacity .3s;
}

/* เลือกโซน: หมุดโซนอื่นจาง / โซนที่เลือกขึ้นชื่อจังหวัด */
.zonemap[data-active] .pin { opacity: .18; }
.zonemap[data-active="1"] .pin[data-zone="1"],
.zonemap[data-active="2"] .pin[data-zone="2"],
.zonemap[data-active="3"] .pin[data-zone="3"],
.zonemap[data-active="4"] .pin[data-zone="4"] { opacity: 1; }
.zonemap[data-active="1"] .pin[data-zone="1"] .pin__label,
.zonemap[data-active="2"] .pin[data-zone="2"] .pin__label,
.zonemap[data-active="3"] .pin[data-zone="3"] .pin__label,
.zonemap[data-active="4"] .pin[data-zone="4"] .pin__label { opacity: 1; }
.zonemap[data-active="1"] .pin[data-zone="1"] .pin__dot,
.zonemap[data-active="2"] .pin[data-zone="2"] .pin__dot,
.zonemap[data-active="3"] .pin[data-zone="3"] .pin__dot,
.zonemap[data-active="4"] .pin[data-zone="4"] .pin__dot { fill: #38A8F5; stroke: #fff; }

.zonemap__legend {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 16px; padding: 14px 18px; border-radius: 18px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.75); font-size: 14px;
}
.zonemap__legend > span { display: inline-flex; align-items: center; gap: 10px; }
.zonemap__legend i { width: 10px; height: 10px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px #38A8F5; }
.zonemap__legend strong { font-size: 28px; font-weight: 600; line-height: 1; color: #fff; }

.zonemap__content .section-title { font-size: clamp(30px, 4vw, 48px); line-height: 1.15; }
.zonemap__content .section-lead { margin-bottom: 28px; }

.zone-list { display: grid; gap: 12px; }
.zone-item {
  position: relative; cursor: pointer;
  display: grid; grid-template-columns: 56px 1fr auto; gap: 16px; align-items: center;
  padding: 16px 20px 16px 16px; border-radius: 20px;
  background: #fff; border: 1px solid var(--line);
  transition: border-color .3s, box-shadow .3s, transform .3s;
}
.zone-item::before {
  content: ""; position: absolute; left: 0; top: 18px; bottom: 18px; width: 3px; border-radius: 3px;
  background: var(--grad-brand); transform: scaleY(0); transition: transform .35s cubic-bezier(.2,.8,.2,1);
}
.zone-item:hover, .zone-item:focus-visible, .zone-item.is-active {
  border-color: var(--blue-200); transform: translateX(6px);
  box-shadow: 0 18px 40px -22px rgba(11,111,203,.55);
  outline: none;
}
.zone-item:hover::before, .zone-item:focus-visible::before, .zone-item.is-active::before { transform: scaleY(1); }
.zone-item__num {
  width: 56px; height: 56px; border-radius: 16px;
  display: grid; place-items: center;
  font-size: 18px; font-weight: 600; color: var(--blue-600);
  background: var(--blue-100);
  transition: background .3s, color .3s, box-shadow .3s;
}
.zone-item:hover .zone-item__num, .zone-item:focus-visible .zone-item__num, .zone-item.is-active .zone-item__num {
  background: linear-gradient(145deg, #38A8F5, #0B6FCB); color: #fff;
  box-shadow: 0 10px 22px -8px rgba(11,111,203,.6);
}
.zone-item h3 { font-size: 17.5px; margin: 0 0 8px; }
.zone-item ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 6px; }
.zone-item li { font-size: 13.5px; color: var(--ink-soft); }
.zone-item li + li::before { content: "·"; margin-right: 6px; color: var(--blue-400); }
.zone-item__count {
  min-width: 40px; padding: 6px 10px; border-radius: 999px; text-align: center;
  font-size: 14px; font-weight: 600; color: var(--blue-600); background: var(--blue-50); border: 1px solid var(--line);
}

@keyframes pinPulse {
  0%   { transform: scale(.4); opacity: .9; }
  100% { transform: scale(1.6); opacity: 0; }
}

@media (max-width: 960px) {
  .zonemap__wrap { grid-template-columns: 1fr; gap: 36px; }
  .zonemap__content { order: -1; }
  .zonemap__panel { max-width: 460px; width: 100%; margin-inline: auto; }
}
@media (max-width: 640px) {
  .zonemap__panel { padding: 24px 16px 16px; border-radius: 26px; }
  .zone-item { grid-template-columns: 44px 1fr auto; gap: 12px; padding: 14px; }
  .zone-item__num { width: 44px; height: 44px; border-radius: 13px; font-size: 16px; }
  .zone-item:hover, .zone-item.is-active { transform: none; }
}

/* ==========================================================================
   CTA (หน้าแรก) — การ์ดติดต่อ + วงสัญญาณ
   ========================================================================== */
.cta2 {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; grid-template-columns: 1.15fr 1fr; gap: 40px; align-items: center;
  padding: 56px; border-radius: 36px; color: #fff;
  background:
    radial-gradient(520px 380px at 78% 50%, rgba(56,168,245,.45), transparent 70%),
    radial-gradient(500px 300px at 0% 100%, rgba(11,111,203,.45), transparent 70%),
    linear-gradient(150deg, #061A30 0%, #0A2540 50%, #0B3F75 100%);
  border: 1px solid rgba(124,200,255,.25);
  box-shadow: 0 50px 100px -40px rgba(6,26,48,.75);
}
.cta2::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px) 0 0 / 44px 44px,
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px) 0 0 / 44px 44px;
  mask-image: radial-gradient(ellipse 60% 80% at 75% 50%, #000, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 60% 80% at 75% 50%, #000, transparent 75%);
}
.cta2::after {
  content: ""; position: absolute; left: 10%; right: 10%; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(124,200,255,.7), transparent);
}

.cta2__kicker {
  position: relative; display: inline-block; padding-left: 22px; margin-bottom: 16px;
  font-size: 12.5px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: #7CC8FF;
}
.cta2__kicker::before {
  content: ""; position: absolute; left: 0; top: 50%; width: 14px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, #38A8F5, #BFE2FF);
}
.cta2 h2 {
  font-size: clamp(30px, 3.8vw, 46px); line-height: 1.15; margin-bottom: 14px;
  background: linear-gradient(180deg, #fff 40%, #BFE2FF);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.cta2__content > p { color: rgba(255,255,255,.72); font-size: 17px; margin-bottom: 32px; max-width: 520px; }

.cta2__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 22px; }
.cta2__tile {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 12px;
  padding: 14px; border-radius: 22px;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  color: #fff;
  transition: background .3s, border-color .3s, transform .3s, box-shadow .3s;
}
.cta2__tile:hover {
  color: #fff; transform: translateY(-4px);
  background: rgba(56,168,245,.2); border-color: rgba(124,200,255,.55);
  box-shadow: 0 20px 44px -18px rgba(56,168,245,.8);
}
.cta2__tile-icon {
  width: 46px; height: 46px; border-radius: 14px; flex: none;
  display: grid; place-items: center;
  background: linear-gradient(145deg, #38A8F5, #0B6FCB);
  box-shadow: 0 10px 22px -8px rgba(56,168,245,.8), inset 0 1px 0 rgba(255,255,255,.4);
}
.cta2__tile-icon--line { background: linear-gradient(145deg, #3DDC84, #06A94D); box-shadow: 0 10px 22px -8px rgba(6,199,85,.7), inset 0 1px 0 rgba(255,255,255,.4); }
.cta2__tile-icon svg { width: 24px; height: 24px; }
.cta2__tile-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.cta2__tile-text small { font-size: 12.5px; letter-spacing: .06em; color: rgba(255,255,255,.6); }
.cta2__tile-text strong { font-size: 17.5px; font-weight: 600; white-space: nowrap; letter-spacing: .01em; }
.cta2__tile-go {
  margin-left: auto; flex: none;
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,.1); transition: background .3s, color .3s, transform .3s;
}
.cta2__tile-go svg { width: 15px; height: 15px; }
.cta2__tile:hover .cta2__tile-go { background: #fff; color: var(--blue-600); transform: rotate(45deg); }

.cta2__more {
  display: inline-flex; align-items: center; gap: 16px;
  padding: 7px 7px 7px 26px; border-radius: 999px;
  background: #fff; color: var(--blue-600); font-size: 16.5px; font-weight: 600;
  box-shadow: 0 18px 40px -16px rgba(56,168,245,.9), inset 0 -2px 0 rgba(11,111,203,.12);
  transition: transform .3s, box-shadow .3s;
}
.cta2__more svg {
  box-sizing: border-box; width: 40px; height: 40px; padding: 11px; border-radius: 50%; flex: none;
  background: linear-gradient(145deg, #38A8F5, #0B6FCB); color: #fff;
  box-shadow: 0 8px 18px -8px rgba(11,111,203,.9), inset 0 1px 0 rgba(255,255,255,.4);
  transition: transform .3s;
}
.cta2__more:hover { color: var(--blue-600); transform: translateY(-3px); box-shadow: 0 24px 48px -16px rgba(56,168,245,1), inset 0 -2px 0 rgba(11,111,203,.12); }
.cta2__more:hover svg { transform: translateX(4px); }
.cta2__more:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }

/* วงสัญญาณ */
.cta2__visual { position: relative; aspect-ratio: 1; max-width: 400px; width: 100%; justify-self: center; }
.cta2__ring {
  position: absolute; inset: 0; margin: auto; width: 36%; height: 36%; border-radius: 50%;
  border: 1.5px solid rgba(124,200,255,.55);
  animation: signal 3.6s cubic-bezier(.2,.6,.3,1) infinite;
}
.cta2__ring:nth-child(2) { animation-delay: 1.2s; }
.cta2__ring:nth-child(3) { animation-delay: 2.4s; }
.cta2__visual::before, .cta2__visual::after {
  content: ""; position: absolute; inset: 0; margin: auto; border-radius: 50%;
  border: 1px dashed rgba(124,200,255,.2);
}
.cta2__visual::before { width: 62%; height: 62%; animation: spin 50s linear infinite; }
.cta2__visual::after  { width: 92%; height: 92%; border-style: solid; border-color: rgba(124,200,255,.1); }
.cta2__core {
  position: absolute; inset: 0; margin: auto; width: 30%; height: 30%; border-radius: 50%;
  display: grid; place-items: center;
  background: radial-gradient(circle at 30% 30%, #7CC8FF, #0B6FCB 70%);
  box-shadow: 0 0 0 10px rgba(56,168,245,.15), 0 0 60px 10px rgba(56,168,245,.55), inset 0 2px 0 rgba(255,255,255,.5);
  animation: ringCall 2.4s ease-in-out infinite;
}
.cta2__core svg { width: 40%; height: 40%; color: #fff; }

.cta2__chip {
  position: absolute; display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px 10px 12px; border-radius: 999px; white-space: nowrap;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.28);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  font-size: 14px; font-weight: 500; color: #fff;
  box-shadow: 0 14px 30px -12px rgba(0,0,0,.4);
  animation: float 6s ease-in-out infinite;
}
.cta2__chip svg {
  width: 22px; height: 22px; padding: 4px; border-radius: 50%;
  background: #3DF5A7; color: #06301F;
}
.cta2__chip.c1 { top: 10%; left: 0; }
.cta2__chip.c2 { top: 44%; right: -4%; animation-delay: -2s; }
.cta2__chip.c3 { bottom: 8%; left: 8%; animation-delay: -4s; }

/* เต็มความกว้าง: พื้นหลังย้ายไปที่ section แล้วต่อลงไปชน footer */
.cta2-band {
  position: relative; overflow: hidden; isolation: isolate;
  margin-top: 96px; padding-block: 104px 88px;
  background:
    linear-gradient(180deg, transparent 50%, #061A30 100%),
    radial-gradient(700px 480px at 72% 45%, rgba(124,200,255,.35), transparent 70%),
    radial-gradient(600px 360px at 0% 20%, rgba(56,168,245,.35), transparent 70%),
    linear-gradient(180deg, #1E88E5 0%, #0B4F9C 100%);
}
.cta2-band::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px) 0 0 / 56px 56px,
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px) 0 0 / 56px 56px;
  mask-image: radial-gradient(ellipse 70% 80% at 70% 50%, #000, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 70% 50%, #000, transparent 75%);
}
/* ขอบบนไล่เฉดรับจากเนื้อหาด้านบน (ไม่มีเส้นตัด) */
.cta2-band::after {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 160px; z-index: -1; pointer-events: none;
  background: linear-gradient(0deg, transparent 0%, color-mix(in srgb, var(--blue-50) 25%, transparent) 45%, var(--blue-50) 100%);
}
/* ลูกโลกลายวงจร มุมขวาบน */
.cta2-band__globe {
  position: absolute; z-index: -1; pointer-events: none;
  top: -330px; right: -120px; width: 760px; max-width: none; height: auto;
  opacity: .5;
  animation: spin 180s linear infinite;
}
@media (max-width: 1100px) { .cta2-band__globe { width: 600px; top: -270px; right: -160px; } }
@media (max-width: 860px)  { .cta2-band__globe { width: 460px; top: -220px; right: -150px; opacity: .35; } }
@media (max-width: 640px)  { .cta2-band__globe { width: 360px; top: -180px; right: -140px; } }
.cta2-band .cta2 {
  padding: 0; border: 0; border-radius: 0; box-shadow: none; overflow: visible;
  background: none;
}
.cta2-band .cta2::before, .cta2-band .cta2::after { display: none; }
.cta2-band + * { margin-top: 0; }
main:has(> .cta2-band:last-child) + .site-footer { margin-top: 0; background: var(--navy-900); }
main:has(> .cta2-band:last-child) + .site-footer::before { display: none; }

@media (max-width: 640px) {
  .cta2-band { margin-top: 56px; padding-block: 80px 56px; }
  .cta2-band::after { height: 110px; }
}

/* ==========================================================================
   Footer
   ========================================================================== */
.f-ico {
  display: inline-block; width: 18px; height: 18px; flex: none;
  background: currentColor;
  -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat;
}
.f-ico--phone { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1.9.4 1.8.7 2.7a2 2 0 0 1-.5 2.1L8 9.8a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.7.7a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E"); }
.f-ico--chat  { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.4 8.4 0 0 1-9 8.4 9 9 0 0 1-3.8-.9L3 21l1.9-5.2A8.4 8.4 0 1 1 21 11.5z'/%3E%3C/svg%3E"); }
.f-ico--pin   { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-6 8-12a8 8 0 0 0-16 0c0 6 8 12 8 12z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E"); }
.f-ico--up    { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5M5 12l7-7 7 7'/%3E%3C/svg%3E"); }

.site-footer { padding: 48px 0 calc(20px + env(safe-area-inset-bottom, 0px)); color: rgba(255,255,255,.66); }
.site-footer .container { position: relative; }

.footer-top {
  display: flex; justify-content: space-between; align-items: center; gap: 32px; flex-wrap: wrap;
}
.footer-brand { max-width: 480px; }
.footer-brand .brand { margin-bottom: 16px; }
.footer-brand .brand__mark { width: auto; height: 44px; }
.footer-brand .brand__name { font-size: 22px; }
.footer-brand p { margin: 0; font-size: 15px; line-height: 1.7; }

.footer-quick { display: flex; gap: 12px; flex-wrap: wrap; }
.site-footer .footer-pill { color: #fff; }
.footer-pill {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 10px 20px 10px 10px; border-radius: 999px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12);
  line-height: 1.25;
  transition: background .3s, border-color .3s, transform .3s;
}
.site-footer .footer-pill:hover { color: #fff; background: rgba(56,168,245,.16); border-color: rgba(124,200,255,.45); transform: translateY(-3px); }
.footer-pill__icon {
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(145deg, #38A8F5, #0B6FCB); color: #fff;
}
.footer-pill--line .footer-pill__icon { background: linear-gradient(145deg, #3DDC84, #06A94D); }
.footer-pill:not(.footer-pill--line) .footer-pill__icon { animation: ringCall 2.4s ease-in-out infinite; }
.footer-pill small { display: block; font-size: 12px; color: rgba(255,255,255,.55); }
.footer-pill strong { font-size: 16px; font-weight: 600; white-space: nowrap; }

.footer-cols { display: grid; grid-template-columns: 1fr 1.3fr 1.1fr; gap: 40px; }
.site-footer h3 {
  margin-bottom: 18px; color: #fff;
  font-size: 15px; font-weight: 600;
}
html[lang="en"] .site-footer h3 { font-size: 13px; letter-spacing: .16em; text-transform: uppercase; }
.footer-links { display: grid; gap: 10px; }
.footer-links a {
  position: relative; display: inline-flex; align-items: center;
  color: rgba(255,255,255,.66); font-size: 15px;
  transition: color .25s, padding .25s;
}
.footer-links a::before {
  content: ""; position: absolute; left: 0; top: 50%; width: 0; height: 2px; border-radius: 2px;
  background: #38A8F5; transition: width .25s;
}
.footer-links a:hover { color: #fff; padding-left: 18px; }
.footer-links a:hover::before { width: 10px; }

.site-footer .footer-contact { display: grid; gap: 12px; }
.site-footer .footer-contact li { display: flex; align-items: center; gap: 12px; font-size: 15px; }
.site-footer .footer-contact .f-ico {
  width: 34px; height: 34px; border-radius: 10px;
  -webkit-mask: none; mask: none; background: rgba(56,168,245,.12);
  position: relative;
}
.site-footer .footer-contact .f-ico::after {
  content: ""; position: absolute; inset: 9px; background: #7CC8FF;
  -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat;
}

/* footer-top วางซ้อนบน footer-body (ช่อง grid เดียวกัน), footer-body กว้างเต็ม section */
.site-footer .container { display: grid; grid-template-columns: minmax(0, 1fr); }
.footer-top, .footer-body { grid-area: 1 / 1; }
.footer-top { position: relative; z-index: 1; align-self: center; }
.footer-body { position: relative; margin-inline: calc(50% - 50vw); overflow: hidden; }
.footer-mark {
  display: block;
  margin: 0 0 -.1em; white-space: nowrap; text-align: center; user-select: none; pointer-events: none;
  font-family: var(--font-head); font-weight: 600; line-height: .8; letter-spacing: -.02em;
  font-size: 20.5vw;
  background: linear-gradient(180deg, rgba(124,200,255,.16) 0%, rgba(124,200,255,0) 85%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.site-footer .footer-bottom {
  margin-top: 0; padding-top: 24px;
  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
  font-size: 14px; border-top: 1px solid rgba(255,255,255,.09);
}
.footer-top-btn {
  display: inline-flex; align-items: center; gap: 10px;
  color: rgba(255,255,255,.75); font-size: 14px;
}
.footer-top-btn .f-ico {
  width: 36px; height: 36px; border-radius: 50%;
  -webkit-mask: none; mask: none; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15);
  position: relative; transition: background .25s, transform .25s;
}
.footer-top-btn .f-ico::after {
  content: ""; position: absolute; inset: 10px; background: #fff;
  -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat;
}
.site-footer .footer-top-btn:hover { color: #fff; }
.footer-top-btn:hover .f-ico { background: #38A8F5; transform: translateY(-3px); }

@media (max-width: 860px) {
  .footer-cols { grid-template-columns: 1fr 1fr; }
  .footer-cols > div:last-child { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .site-footer { padding-top: 40px; }
  .footer-quick, .footer-pill { width: 100%; }
  .footer-cols { grid-template-columns: 1fr; gap: 32px; }
}

/* ==========================================================================
   หน้าย่อย (บริการ / ผลงาน / ติดต่อ)
   ========================================================================== */
.anchor { scroll-margin-top: 90px; }
.page-hero { padding-bottom: 104px; }
.page-hero h1 { font-size: clamp(34px, 5vw, 58px); line-height: 1.12; letter-spacing: -.01em; }

/* ปุ่มลัดหมวดบริการ */
.hero-jump { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }
.hero-jump a {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 18px 10px 10px; border-radius: 999px;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  color: #fff; font-size: 14.5px; font-weight: 500;
  transition: background .3s, border-color .3s, transform .3s;
}
.hero-jump a span:first-child {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(145deg, #38A8F5, #0B6FCB); font-size: 12px; font-weight: 600;
}
.hero-jump a:hover { color: #fff; background: rgba(56,168,245,.22); border-color: rgba(124,200,255,.5); transform: translateY(-3px); }

/* การ์ดเข้มลอยทับขอบ hero */
.page-hero + .section--tight { padding-top: 0; margin-top: -56px; position: relative; z-index: 2; }
.page-hero + #maintenance { margin-top: 24px; }

/* 01 Maintenance: หัวข้อด้านบน + 3 การ์ด */
.svc--stack { grid-template-columns: 1fr; gap: 24px; }
.svc--stack .svc__intro h2 { margin: 0; font-size: clamp(26px, 3vw, 36px); }
.svc__grid--3 { grid-template-columns: repeat(3, 1fr); }
.svc__grid--3 .svc-tile { min-height: 220px; cursor: default; }
.svc__grid--3 .svc-tile__title { padding-right: 56px; }
.svc__grid--3 .svc-tile__desc { padding-right: 0; }

/* 02 Installation */
.split { display: grid; grid-template-columns: 1fr 1.05fr; gap: 56px; align-items: center; }
.split__media, .sec-card, .sec-photo { grid-area: auto; }
.split__media { min-height: 460px; }
.split .section-title { font-size: clamp(28px, 3.4vw, 42px); }
.feature-list { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 10px; }
.feature-list li {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 16px 12px 12px; border-radius: 16px;
  background: #fff; border: 1px solid var(--line); font-size: 15.5px;
  transition: border-color .3s, box-shadow .3s, transform .3s;
}
.feature-list li:hover { border-color: var(--blue-200); box-shadow: 0 14px 30px -18px rgba(11,111,203,.5); transform: translateX(6px); }
.feature-list__icon {
  width: 42px; height: 42px; border-radius: 12px; flex: none; display: grid; place-items: center;
  background: linear-gradient(145deg, #38A8F5, #0B6FCB); color: #fff;
  box-shadow: 0 8px 18px -8px rgba(11,111,203,.6);
}
.feature-list__icon svg { width: 20px; height: 20px; }

/* 02 Installation: การ์ดรูป 4 ใบ */
.inst-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.inst {
  position: relative; overflow: hidden; display: flex; flex-direction: column;
  border-radius: 26px; background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 24px 50px -34px rgba(6,26,48,.5);
  transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s, border-color .4s;
}
.inst:hover { transform: translateY(-8px); border-color: var(--blue-200); box-shadow: 0 34px 60px -30px rgba(11,111,203,.55); }
.inst__media { position: relative; aspect-ratio: 4 / 3.4; overflow: hidden; }
.inst__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s cubic-bezier(.2,.8,.2,1); }
.inst:hover .inst__media img { transform: scale(1.08); }
.inst__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(6,26,48,.05) 40%, rgba(6,26,48,.55) 100%);
}
.inst__num {
  position: absolute; top: 14px; left: 14px; z-index: 1;
  padding: 5px 12px; border-radius: 999px;
  background: rgba(6,26,48,.55); border: 1px solid rgba(255,255,255,.3);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  color: #fff; font-size: 13px; font-weight: 600; letter-spacing: .06em;
}
.inst__body { position: relative; flex: 1; display: flex; flex-direction: column; padding: 38px 22px 22px; }
.inst__icon {
  position: absolute; top: -28px; left: 22px;
  width: 56px; height: 56px; border-radius: 17px;
  display: grid; place-items: center;
  background: linear-gradient(145deg, #38A8F5, #0B6FCB); color: #fff;
  box-shadow: 0 0 0 5px #fff, 0 14px 26px -8px rgba(11,111,203,.65);
  transition: transform .4s cubic-bezier(.2,.8,.2,1);
}
.inst__icon svg { width: 26px; height: 26px; }
.inst:hover .inst__icon { transform: translateY(-4px) rotate(-6deg); }
.inst h3 { font-size: 17px; line-height: 1.4; margin-bottom: 14px; }
.inst__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.inst__chips span {
  padding: 4px 10px; border-radius: 8px; font-size: 12.5px; font-weight: 500;
  color: var(--blue-700); background: var(--blue-100);
}

@media (max-width: 1100px) { .inst-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .inst-grid { grid-template-columns: 1fr; } .inst__media { aspect-ratio: 16 / 10; } }

/* 03 Infrastructure: แท็บซ้าย + แผงรายละเอียดขวา */
.infra { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 20px; align-items: stretch; }
.infra__tabs { display: grid; gap: 10px; }
.infra-tab {
  position: relative; overflow: hidden; cursor: pointer; text-align: left;
  display: grid; grid-template-columns: 30px 48px 1fr; align-items: center; gap: 14px;
  padding: 14px 18px; border-radius: 20px;
  background: #fff; border: 1px solid var(--line);
  font: inherit; color: var(--ink);
  transition: border-color .3s, box-shadow .3s, transform .3s, background .3s;
}
.infra-tab:hover { border-color: var(--blue-200); transform: translateX(4px); }
.infra-tab.is-active {
  border-color: transparent; transform: translateX(8px);
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(135deg, #38A8F5, rgba(191,226,255,.9), #0B6FCB) border-box;
  border: 1px solid transparent;
  box-shadow: 0 20px 40px -24px rgba(11,111,203,.6);
}
.infra-tab__num { font-size: 13px; font-weight: 600; color: var(--blue-200); transition: color .3s; }
.infra-tab.is-active .infra-tab__num { color: var(--blue-600); }
.infra-tab__icon {
  width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center;
  background: var(--blue-100); color: var(--blue-600);
  transition: background .3s, color .3s, box-shadow .3s;
}
.infra-tab__icon svg { width: 22px; height: 22px; }
.infra-tab.is-active .infra-tab__icon {
  background: linear-gradient(145deg, #38A8F5, #0B6FCB); color: #fff;
  box-shadow: 0 10px 22px -8px rgba(11,111,203,.6);
}
.infra-tab__text { display: flex; flex-direction: column; line-height: 1.3; }
.infra-tab__text small { font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.infra-tab__text span { font-size: 17px; font-weight: 500; }
.infra-tab__bar {
  position: absolute; left: 0; bottom: 0; height: 3px; width: 100%;
  background: var(--grad-brand); transform: scaleX(0); transform-origin: left;
}
.infra.is-playing .infra-tab.is-active .infra-tab__bar { animation: infraBar var(--dur, 5000ms) linear forwards; }

.infra__stage {
  position: relative; overflow: hidden; isolation: isolate;
  min-height: 460px; padding: 44px; border-radius: 30px; color: #fff;
  display: flex; flex-direction: column;
  background:
    radial-gradient(420px 320px at 70% 30%, rgba(56,168,245,.45), transparent 70%),
    linear-gradient(155deg, #061A30 0%, #0A2540 55%, #0B3F75 100%);
  border: 1px solid rgba(124,200,255,.22);
  box-shadow: 0 40px 80px -40px rgba(6,26,48,.7);
}
.infra__stage::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px) 0 0 / 40px 40px,
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px) 0 0 / 40px 40px;
  mask-image: radial-gradient(ellipse 70% 70% at 70% 30%, #000, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 70% 30%, #000, transparent 80%);
}
.infra-panel { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; }
.infra-panel[hidden] { display: none; }
.infra-panel.is-active { animation: infraIn .55s cubic-bezier(.2,.8,.2,1); }
.infra-orb {
  position: relative; align-self: flex-end;
  width: 150px; height: 150px; margin-bottom: auto; border-radius: 50%;
  display: grid; place-items: center; color: #fff;
  background: radial-gradient(circle at 30% 30%, #7CC8FF, #0B6FCB 70%);
  box-shadow: 0 0 0 12px rgba(56,168,245,.12), 0 0 80px 10px rgba(56,168,245,.5), inset 0 2px 0 rgba(255,255,255,.5);
}
.infra-orb svg { position: relative; width: 60px; height: 60px; }
.infra-orb span {
  position: absolute; inset: 0; border-radius: 50%;
  border: 1.5px solid rgba(124,200,255,.5);
  animation: signal 3.6s cubic-bezier(.2,.6,.3,1) infinite;
}
.infra-orb span:nth-child(2) { animation-delay: 1.2s; }
.infra-orb span:nth-child(3) { animation-delay: 2.4s; }
.infra-panel__tag { margin: 28px 0 10px; font-size: 12.5px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: #7CC8FF; }
.infra-panel h3 {
  font-size: clamp(26px, 3vw, 38px); line-height: 1.2; margin-bottom: 12px;
  background: linear-gradient(180deg, #fff 40%, #BFE2FF);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.infra-panel p { margin: 0; max-width: 460px; color: rgba(255,255,255,.72); font-size: 16.5px; }

.infra__nav { display: flex; align-items: center; gap: 10px; margin-top: 32px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.1); }
.infra__count { margin-right: auto; font-size: 14px; color: rgba(255,255,255,.55); letter-spacing: .06em; }
.infra__count b { font-size: 22px; font-weight: 600; color: #fff; }
.infra__btn {
  width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); color: #fff;
  transition: background .25s, border-color .25s, transform .25s;
}
.infra__btn svg { width: 18px; height: 18px; }
.infra__btn:hover { background: #fff; color: var(--blue-600); border-color: #fff; transform: translateY(-2px); }

@keyframes infraBar { to { transform: scaleX(1); } }
@keyframes infraIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

@media (max-width: 960px) {
  .infra { grid-template-columns: 1fr; }
  .infra__stage { min-height: 380px; order: -1; }
  .infra-tab.is-active, .infra-tab:hover { transform: none; }
}
@media (max-width: 640px) {
  .infra__tabs { grid-template-columns: 1fr 1fr; gap: 8px; }
  .infra-tab { grid-template-columns: 1fr; gap: 8px; padding: 14px; }
  .infra-tab__num { display: none; }
  .infra-tab__icon { width: 40px; height: 40px; border-radius: 12px; }
  .infra-tab__text small { display: none; }
  .infra-tab__text span { font-size: 15px; }
  .infra__stage { padding: 26px; min-height: 340px; }
  .infra-orb { width: 110px; height: 110px; }
  .infra-orb svg { width: 44px; height: 44px; }
}

/* 03 Infrastructure: การ์ดสว่าง + spotlight */
.feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.feat {
  --mx: 50%; --my: 0%;
  position: relative; overflow: hidden; isolation: isolate;
  padding: 28px; border-radius: 24px;
  border: 1px solid transparent;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(135deg, rgba(56,168,245,.45), rgba(217,232,246,.8) 40%, rgba(217,232,246,.8) 60%, rgba(11,111,203,.3)) border-box;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s;
}
.feat::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(260px circle at var(--mx) var(--my), rgba(56,168,245,.14), transparent 70%);
  opacity: 0; transition: opacity .35s;
}
.feat:hover { transform: translateY(-6px); box-shadow: 0 28px 50px -26px rgba(11,111,203,.55); }
.feat:hover::before { opacity: 1; }
.feat__num {
  position: absolute; right: 22px; top: 18px;
  font-size: 40px; font-weight: 600; line-height: 1;
  background: linear-gradient(180deg, rgba(11,111,203,.16), rgba(11,111,203,0));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.feat__icon {
  width: 54px; height: 54px; border-radius: 16px; margin-bottom: 20px;
  display: grid; place-items: center;
  background: linear-gradient(145deg, #38A8F5, #0B6FCB); color: #fff;
  box-shadow: 0 12px 24px -8px rgba(11,111,203,.55), inset 0 1px 0 rgba(255,255,255,.4);
  transition: transform .35s cubic-bezier(.2,.8,.2,1);
}
.feat__icon svg { width: 26px; height: 26px; }
.feat:hover .feat__icon { transform: rotate(-6deg) scale(1.06); }
.feat__tag { display: block; margin-bottom: 6px; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--blue-600); }
.feat h3 { font-size: 20px; margin-bottom: 8px; }
.feat p { margin: 0; font-size: 15px; color: var(--ink-soft); }

/* 04 Security */
.sec-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 20px; }
.sec-card { padding: 40px; min-height: 420px; align-items: center; }
.sec-card h2 { font-size: clamp(26px, 3vw, 38px); color: #fff; margin: 0 0 14px; }
.sec-card p { font-size: 16px; }
.sec-card__shield { position: relative; width: 160px; height: 160px; flex: none; display: grid; place-items: center; color: #BFE2FF; }
.sec-card__shield svg { position: relative; width: 70px; height: 70px; filter: drop-shadow(0 0 18px rgba(56,168,245,.8)); }
.sec-card__shield span {
  position: absolute; inset: 0; border-radius: 50%;
  border: 1.5px solid rgba(124,200,255,.45);
  animation: signal 3.6s cubic-bezier(.2,.6,.3,1) infinite; transform-origin: center;
}
.sec-card__shield span:nth-child(2) { animation-delay: 1.8s; }
.sec-card__shield::before {
  content: ""; position: absolute; inset: 30px; border-radius: 50%;
  background: radial-gradient(circle, rgba(56,168,245,.4), transparent 70%);
}
.sec-card__shield span { inset: 40px; }
.sec-photo { min-height: 420px; }

/* ไทม์ไลน์ */
.timeline { list-style: none; margin: 0; padding: 0; position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.timeline::before {
  content: ""; position: absolute; left: 12%; right: 12%; top: 32px; height: 2px;
  background: linear-gradient(90deg, var(--blue-200), #38A8F5, var(--blue-200));
}
.timeline__item {
  position: relative; text-align: center;
  padding: 0 16px 28px;
}
.timeline__dot {
  position: relative; z-index: 1;
  width: 64px; height: 64px; margin: 0 auto 22px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 18px; font-weight: 600; color: #fff;
  background: linear-gradient(145deg, #38A8F5, #0B6FCB);
  box-shadow: 0 0 0 8px var(--blue-50), 0 0 0 9px var(--blue-200), 0 14px 30px -10px rgba(11,111,203,.6);
  transition: transform .35s;
}
.section--alt .timeline__dot { box-shadow: 0 0 0 8px #fff, 0 0 0 9px var(--blue-200), 0 14px 30px -10px rgba(11,111,203,.6); }
.timeline__item:hover .timeline__dot { transform: translateY(-4px) scale(1.05); }
.timeline__item h3 { font-size: 18.5px; margin-bottom: 8px; }
.timeline__item p { margin: 0; font-size: 15px; color: var(--ink-soft); }

/* ขั้นตอนการทำงาน: เส้นทาง 4 ขั้น */
.journey {
  --node: 72px;
  list-style: none; margin: 0; padding: 0; position: relative;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
}
/* เส้นพื้น + แสงไหล */
.journey::before, .journey::after {
  content: ""; position: absolute; top: calc(var(--node) / 2 - 1px); left: 12.5%; right: 12.5%; height: 2px; border-radius: 2px;
}
.journey::before { background: repeating-linear-gradient(90deg, var(--blue-200) 0 8px, transparent 8px 14px); }
.journey::after {
  background: linear-gradient(90deg, transparent 0%, #38A8F5 45%, #BFE2FF 50%, transparent 55%) 0 0 / 200% 100% no-repeat;
  animation: journeyFlow 3.2s linear infinite;
}
.journey__step { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; }
.journey__node {
  width: var(--node); height: var(--node); border-radius: 22px; margin-bottom: 22px;
  display: grid; place-items: center;
  background: #fff; color: var(--blue-600);
  border: 1px solid var(--blue-200);
  box-shadow: 0 0 0 8px #fff, 0 16px 30px -14px rgba(11,111,203,.55);
  transition: background .35s, color .35s, transform .35s, box-shadow .35s;
}
.journey__node svg { width: 30px; height: 30px; }
.journey__step:hover .journey__node, .journey__step--final .journey__node {
  background: linear-gradient(145deg, #38A8F5, #0B6FCB); color: #fff; border-color: transparent;
  box-shadow: 0 0 0 8px #fff, 0 0 0 9px var(--blue-200), 0 18px 34px -12px rgba(11,111,203,.7);
}
.journey__step:hover .journey__node { transform: translateY(-4px) rotate(-6deg); }

.journey__card {
  position: relative; overflow: hidden; flex: 1; width: 100%;
  padding: 24px 22px 26px; border-radius: 22px;
  border: 1px solid transparent;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(160deg, rgba(56,168,245,.45), rgba(217,232,246,.8) 45%, rgba(217,232,246,.8)) border-box;
  box-shadow: 0 20px 40px -30px rgba(6,26,48,.45);
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s;
}
.journey__step:hover .journey__card { transform: translateY(-6px); box-shadow: 0 30px 50px -28px rgba(11,111,203,.55); }
.journey__label {
  display: inline-block; margin-bottom: 12px; padding: 4px 10px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--blue-600); background: var(--blue-100);
}
.journey__card h3 { font-size: 19px; margin-bottom: 8px; position: relative; z-index: 1; }
.journey__card p { margin: 0; font-size: 15px; color: var(--ink-soft); position: relative; z-index: 1; }
.journey__big {
  position: absolute; right: 10px; bottom: -18px;
  font-size: 96px; font-weight: 600; line-height: 1; letter-spacing: -.04em;
  background: linear-gradient(180deg, rgba(11,111,203,.12), rgba(11,111,203,0));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  pointer-events: none;
}
/* ขั้นสุดท้าย: การ์ดเข้ม */
.journey__step--final .journey__card {
  color: #fff;
  background:
    radial-gradient(260px 180px at 100% 0%, rgba(56,168,245,.45), transparent 70%) padding-box,
    linear-gradient(155deg, #0A2540, #0B3F75) padding-box,
    linear-gradient(135deg, rgba(124,200,255,.7), rgba(255,255,255,.05)) border-box;
  box-shadow: 0 30px 60px -30px rgba(6,26,48,.7);
}
.journey__step--final .journey__label { color: #BFE2FF; background: rgba(56,168,245,.2); }
.journey__step--final .journey__card h3 { color: #fff; }
.journey__step--final .journey__card p { color: rgba(255,255,255,.72); }
.journey__step--final .journey__big { background: linear-gradient(180deg, rgba(124,200,255,.22), rgba(124,200,255,0)); -webkit-background-clip: text; background-clip: text; }

@keyframes journeyFlow { from { background-position: 150% 0; } to { background-position: -50% 0; } }

@media (max-width: 960px) {
  .journey { grid-template-columns: 1fr; gap: 16px; --node: 60px; }
  .journey::before, .journey::after { top: 0; bottom: 0; left: calc(var(--node) / 2 - 1px); right: auto; width: 2px; height: auto; }
  .journey::before { background: repeating-linear-gradient(180deg, var(--blue-200) 0 8px, transparent 8px 14px); }
  .journey::after { background: linear-gradient(180deg, transparent 0%, #38A8F5 45%, #BFE2FF 50%, transparent 55%) 0 0 / 100% 200% no-repeat; animation-name: journeyFlowV; }
  .journey__step { flex-direction: row; align-items: stretch; gap: 18px; }
  .journey__node { flex: none; margin: 0; border-radius: 18px; }
  .journey__node svg { width: 26px; height: 26px; }
}
@keyframes journeyFlowV { from { background-position: 0 150%; } to { background-position: 0 -50%; } }

/* ติดต่อ: การ์ดช่องทางติดต่อ */
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.page-hero + .contact-hub { margin-top: 24px; }
.ch-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 20px; }
.ch {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; align-items: flex-start;
  min-height: 340px; padding: 32px; border-radius: 30px;
  color: #fff;
  transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s;
}
.ch::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px) 0 0 / 36px 36px,
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px) 0 0 / 36px 36px;
  mask-image: radial-gradient(ellipse 80% 70% at 100% 0%, #000, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 100% 0%, #000, transparent 75%);
}
.ch:hover { color: #fff; transform: translateY(-8px); }
.ch--phone {
  background:
    radial-gradient(360px 260px at 100% 0%, rgba(56,168,245,.5), transparent 70%),
    linear-gradient(155deg, #061A30 0%, #0A2540 55%, #0B3F75 100%);
  border: 1px solid rgba(124,200,255,.25);
  box-shadow: 0 40px 80px -40px rgba(6,26,48,.75);
}
.ch--phone:hover { box-shadow: 0 46px 90px -36px rgba(11,111,203,.8); }
.ch--line {
  background:
    radial-gradient(320px 240px at 100% 0%, rgba(255,255,255,.25), transparent 70%),
    linear-gradient(150deg, #06A94D 0%, #0B8F4A 60%, #07693A 100%);
  border: 1px solid rgba(255,255,255,.25);
  box-shadow: 0 40px 80px -44px rgba(6,120,60,.8);
}
.ch--area {
  background:
    radial-gradient(320px 240px at 100% 0%, rgba(255,255,255,.28), transparent 70%),
    linear-gradient(150deg, #1E88E5 0%, #0B6FCB 60%, #0856A3 100%);
  border: 1px solid rgba(255,255,255,.25);
  box-shadow: 0 40px 80px -44px rgba(11,111,203,.8);
}

.ch__orb {
  position: relative; width: 68px; height: 68px; margin-bottom: auto; border-radius: 20px;
  display: grid; place-items: center;
  background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.3);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35);
  transition: transform .4s cubic-bezier(.2,.8,.2,1);
}
.ch--phone .ch__orb { background: linear-gradient(145deg, #38A8F5, #0B6FCB); border: 0; box-shadow: 0 0 40px 4px rgba(56,168,245,.55), inset 0 1px 0 rgba(255,255,255,.4); }
.ch__orb svg { position: relative; width: 30px; height: 30px; }
.ch__orb i {
  position: absolute; inset: 0; border-radius: inherit;
  border: 1.5px solid rgba(255,255,255,.45);
  animation: signal 3.2s cubic-bezier(.2,.6,.3,1) infinite;
}
.ch__orb i:nth-child(2) { animation-delay: 1.6s; }
.ch:hover .ch__orb { transform: rotate(-8deg) scale(1.06); }

.ch__label { margin-top: 36px; font-size: 14px; font-weight: 500; color: rgba(255,255,255,.75); }
html[lang="en"] .ch__label { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; }
.ch__value { margin: 4px 0 10px; font-size: clamp(24px, 2.4vw, 32px); font-weight: 600; line-height: 1.15; letter-spacing: .01em; white-space: nowrap; }
.ch__desc { font-size: 15px; line-height: 1.6; color: rgba(255,255,255,.78); margin-bottom: 24px; max-width: 340px; }
.ch__btn {
  display: inline-flex; align-items: center; gap: 10px; margin-top: auto;
  padding: 11px 20px; border-radius: 999px;
  background: #fff; color: var(--navy-800); font-size: 15px; font-weight: 500;
  box-shadow: 0 10px 24px -10px rgba(0,0,0,.4);
  transition: gap .25s, color .25s;
}
.ch__btn svg { width: 18px; height: 18px; }
.ch:hover .ch__btn { gap: 14px; color: var(--blue-600); }
.ch--line:hover .ch__btn { color: #06A94D; }

.perk-strip {
  list-style: none; margin: 20px 0 0; padding: 18px 24px;
  display: flex; justify-content: space-around; flex-wrap: wrap; gap: 14px 28px;
  border-radius: 22px; background: #fff; border: 1px solid var(--line);
  box-shadow: 0 20px 40px -32px rgba(6,26,48,.4);
}
.perk-strip li { display: flex; align-items: center; gap: 12px; font-size: 15.5px; font-weight: 500; }
.perk-strip__icon {
  width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: linear-gradient(145deg, #38A8F5, #0B6FCB); color: #fff;
  box-shadow: 0 8px 16px -6px rgba(11,111,203,.6);
}
.perk-strip__icon svg { width: 16px; height: 16px; }

@media (max-width: 1100px) {
  .ch-grid { grid-template-columns: 1fr 1fr; }
  .ch--phone { grid-column: 1 / -1; min-height: 280px; }
}
@media (max-width: 640px) {
  .ch-grid { grid-template-columns: 1fr; gap: 14px; }
  .ch { min-height: 0; padding: 24px; border-radius: 24px; }
  .ch__label { margin-top: 24px; }
  .perk-strip { flex-direction: column; align-items: flex-start; padding: 18px 20px; }
}

/* ผลงาน: การ์ดโครงการ */
.seg { display: flex; flex-wrap: wrap; gap: 6px; padding: 5px; border-radius: 999px; background: #fff; border: 1px solid var(--line); justify-self: end; }
.seg button {
  border: 0; background: transparent; cursor: pointer;
  min-height: 38px; padding: 6px 16px; border-radius: 999px;
  font: 500 14.5px var(--font); color: var(--ink-soft);
  transition: background .25s, color .25s;
}
.seg button:hover { color: var(--blue-600); }
.seg button[aria-pressed="true"] { background: var(--navy-800); color: #fff; }
.why__head .seg { align-self: end; }
.why__head:has(.seg) { grid-template-columns: 1fr auto; }
@media (max-width: 960px) { .why__head:has(.seg) { grid-template-columns: 1fr; } }

.proj-marquee {
  overflow: hidden; padding: 10px 0 34px; margin-bottom: -24px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.section:has(.proj-marquee) { padding-bottom: 40px; }
.proj-track { display: flex; gap: 16px; width: max-content; animation: proj-scroll 120s linear infinite; }
.proj-marquee:hover .proj-track, .proj-marquee:focus-within .proj-track { animation-play-state: paused; }
.proj-track .proj { flex: 0 0 340px; }
@keyframes proj-scroll { to { transform: translateX(calc(-50% - 8px)); } }
@media (max-width: 640px) { .proj-track .proj { flex-basis: 280px; } }
@media (prefers-reduced-motion: reduce) {
  .proj-marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .proj-track { animation: none; }
}
.proj {
  --mx: 50%; --my: 0%;
  position: relative; overflow: hidden; isolation: isolate;
  padding: 22px 24px 24px; border-radius: 22px;
  background: #fff; border: 1px solid var(--line);
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s, border-color .35s;
}
.proj::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(220px circle at var(--mx) var(--my), rgba(56,168,245,.12), transparent 70%);
  opacity: 0; transition: opacity .35s;
}
.proj::after {
  content: ""; position: absolute; left: 24px; right: 24px; top: 0; height: 2px;
  background: linear-gradient(90deg, transparent, #38A8F5, transparent);
  transform: scaleX(0); transition: transform .45s cubic-bezier(.2,.8,.2,1);
}
.proj:hover { transform: translateY(-5px); border-color: var(--blue-200); box-shadow: 0 24px 44px -26px rgba(11,111,203,.55); }
.proj:hover::before { opacity: 1; }
.proj:hover::after { transform: scaleX(1); }
.proj[hidden] { display: none !important; }
.proj__top { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.proj__icon {
  width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
  background: linear-gradient(145deg, #38A8F5, #0B6FCB); color: #fff;
  box-shadow: 0 8px 18px -8px rgba(11,111,203,.6);
}
.proj__icon svg { width: 20px; height: 20px; }
.proj__logo {
  width: 64px; height: 64px; flex: none; padding: 8px; border-radius: 16px;
  display: grid; place-items: center;
  background: #fff; border: 1px solid var(--line);
  box-shadow: 0 8px 20px -12px rgba(11,111,203,.45);
  transition: transform .35s cubic-bezier(.2,.8,.2,1), border-color .35s;
}
.proj__logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.proj:hover .proj__logo { transform: scale(1.06); border-color: var(--blue-200); }
.proj--logo .proj__top { margin-bottom: 18px; }
.proj__sector { font-size: 12.5px; font-weight: 500; color: var(--blue-600); padding: 3px 10px; border-radius: 999px; background: var(--blue-100); }
.proj__num { margin-left: auto; font-size: 13px; font-weight: 600; color: var(--blue-200); }
.proj h3 { font-size: 17.5px; margin-bottom: 6px; }
.proj p { margin: 0; font-size: 14.5px; color: var(--ink-soft); }

/* แกลเลอรี */
.gallery figure {
  border-radius: 22px; box-shadow: 0 16px 34px -24px rgba(6,26,48,.5);
}
.gallery figure::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 50%, rgba(6,26,48,.75));
  opacity: 0; transition: opacity .35s;
}
.gallery figure:hover::after, .gallery figure:focus-visible::after { opacity: 1; }
.gallery figcaption {
  z-index: 1; left: 16px; right: 16px; bottom: 14px; padding: 0;
  background: none; backdrop-filter: none; color: #fff; font-weight: 500;
}
/* จอสัมผัส (แท็บเล็ต/iPad) ไม่มี hover: แสดงคำบรรยายรูปผลงานตลอด */
@media (hover: none) {
  .gallery figure::after { opacity: 1; }
  .gallery figcaption { opacity: 1; transform: none; }
}

/* รายชื่อลูกค้าทั้งหมด (พื้นเข้ม) */
.client-wall { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.client-wall li {
  padding: 10px 18px; border-radius: 14px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.85); font-size: 15px;
  transition: background .25s, border-color .25s, transform .25s;
}
.client-wall li:hover { background: rgba(56,168,245,.2); border-color: rgba(124,200,255,.5); color: #fff; transform: translateY(-3px); }
.client-wall.marquee__track { flex-wrap: nowrap; }
.client-wall.marquee__track li { white-space: nowrap; }
@media (prefers-reduced-motion: reduce) {
  .clients .marquee:has(.client-wall) { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
}

/* ผลงาน: แผงตัวเลขลอยทับขอบ hero */
.stats-float { padding-bottom: 0; }

/* ติดต่อ: ฟอร์ม + แผงข้อมูล */
.contact-panel {
  display: grid; grid-template-columns: .9fr 1.1fr; overflow: hidden;
  border-radius: 32px; background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 50px 100px -50px rgba(6,26,48,.55);
}
.contact-panel__info {
  position: relative; overflow: hidden; isolation: isolate;
  padding: 44px 40px; color: #fff;
  background:
    radial-gradient(420px 300px at 100% 0%, rgba(56,168,245,.4), transparent 70%),
    linear-gradient(160deg, #061A30 0%, #0A2540 55%, #0B3F75 100%);
}
.contact-panel__info::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px) 0 0 / 40px 40px,
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px) 0 0 / 40px 40px;
  mask-image: linear-gradient(180deg, #000, transparent);
  -webkit-mask-image: linear-gradient(180deg, #000, transparent);
}
.contact-panel__info h2 { font-size: clamp(24px, 2.6vw, 32px); line-height: 1.2; margin-bottom: 12px; color: #fff; }
.contact-panel__info > p { color: rgba(255,255,255,.7); font-size: 15px; margin-bottom: 26px; }
.contact-panel__tiles { display: grid; gap: 12px; margin-bottom: 26px; }
.cta2__tile-icon--soft { background: rgba(255,255,255,.14); box-shadow: inset 0 1px 0 rgba(255,255,255,.3); }
.contact-panel__perks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.contact-panel__perks li { display: flex; align-items: center; gap: 10px; font-size: 14.5px; color: rgba(255,255,255,.8); }
.contact-panel__perks li::before {
  content: ""; width: 20px; height: 20px; border-radius: 50%; flex: none;
  background: #3DF5A7 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2306301F' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 11px no-repeat;
}
.contact-panel__form { padding: 44px 40px; }
.quote-form { padding: 0; }
.quote-form .field input, .quote-form .field select, .quote-form .field textarea { border-radius: 14px; }

@media (max-width: 1100px) {
  .svc__grid--3 { grid-template-columns: 1fr; }
  .svc__grid--3 .svc-tile { min-height: 0; }
  .feat-grid { grid-template-columns: repeat(2, 1fr); }
  .sec-grid { grid-template-columns: 1fr; }
  .sec-card { min-height: 0; }
  .contact-panel { grid-template-columns: 1fr; }
}
@media (max-width: 960px) {
  .split { grid-template-columns: 1fr; gap: 36px; }
  .split__media { min-height: 360px; }
  .timeline { grid-template-columns: 1fr 1fr; row-gap: 32px; }
  .timeline::before { display: none; }
  .why__head .seg { justify-self: start; }
}
@media (max-width: 640px) {
  .page-hero { padding-bottom: 88px; }
  .hero-jump a { font-size: 13.5px; padding: 8px 14px 8px 8px; }
  .feat-grid { grid-template-columns: 1fr; }
  .sec-card { flex-direction: column; padding: 26px; }
  .sec-card__shield { width: 120px; height: 120px; order: -1; }
  .timeline { grid-template-columns: 1fr; }
  .timeline__item { text-align: left; display: grid; grid-template-columns: 64px 1fr; column-gap: 16px; padding: 0; }
  .timeline__dot { grid-row: 1 / 3; margin: 0; }
  .contact-panel { border-radius: 26px; }
  .contact-panel__info, .contact-panel__form { padding: 28px 20px; }
  .seg { border-radius: 20px; }
}

@keyframes signal {
  0%   { transform: scale(1); opacity: .9; }
  100% { transform: scale(2.7); opacity: 0; }
}
@keyframes ringCall {
  0%, 70%, 100% { rotate: 0deg; }
  75% { rotate: -10deg; } 80% { rotate: 10deg; } 85% { rotate: -8deg; } 90% { rotate: 6deg; }
}

@media (max-width: 1100px) {
  .cta2 { padding: 44px; }
  .cta2__actions { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .cta2 { grid-template-columns: 1fr; }
  .cta2__visual { max-width: 340px; order: -1; }
}
@media (max-width: 640px) {
  .cta2 { padding: 28px 20px; border-radius: 28px; gap: 16px; }
  .cta2__visual { max-width: 300px; }
  .cta2__chip { font-size: 12.5px; padding: 7px 12px 7px 8px; gap: 6px; }
  .cta2__chip svg { width: 20px; height: 20px; }
  /* จัดเป็นสามเหลี่ยมรอบวงกลาง: บนกลาง / ล่างซ้าย / ล่างขวา (เหลื่อมระดับกันไม่ให้ชน) */
  .cta2__chip.c1 { top: 3%; left: 50%; right: auto; bottom: auto; transform: translateX(-50%); }
  .cta2__chip.c2 { top: auto; bottom: 19%; left: 0; right: auto; }
  .cta2__chip.c3 { top: auto; bottom: 3%; right: 0; left: auto; }
  .cta2__tile-text strong { font-size: 17px; }
}

@keyframes ping { 0% { opacity: .9; transform: scale(.6); } 100% { opacity: 0; transform: scale(1.8); } }
@keyframes cycle { to { transform: rotate(360deg); } }

@media (max-width: 1100px) {
  .why__grid {
    grid-template-areas:
      "photo photo photo photo photo photo photo photo photo photo photo photo"
      "pm pm pm pm pm pm ma ma ma ma ma ma"
      "stack stack stack stack stack stack stack stack stack stack stack stack";
  }
  .why-photo { min-height: 440px; }
  .why-card { flex-direction: column; }
  .why-cycle { order: 0; width: 88px; height: 88px; }
  .why-cycle__icon { inset: 18px; }
  .why-stack { grid-template-columns: 1fr; }
  .why-stack__groups { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .why__head { grid-template-columns: 1fr; gap: 16px; }
  .why__head .section-lead { padding-left: 16px; }
  .why__grid {
    grid-template-columns: 1fr;
    grid-template-areas: "photo" "pm" "ma" "stack";
    gap: 16px;
  }
  .why-photo { min-height: 420px; border-radius: 24px; }
  .why-photo__body { padding: 24px; }
  .why-card, .why-stack { padding: 24px; border-radius: 24px; }
  .why-stack__groups { grid-template-columns: 1fr; }
}

@keyframes ring {
  0%   { opacity: .9; transform: scale(.9); }
  80%, 100% { opacity: 0; transform: scale(1.25); }
}

@media (max-width: 1100px) {
  .stats .stat:nth-child(1) { border-radius: 27px 0 0 0; }
  .stats .stat:nth-child(2) { border-radius: 0 27px 0 0; }
  .stats .stat:nth-child(3) { border-radius: 0 0 0 27px; }
  .stats .stat:nth-child(4) { border-radius: 0 0 27px 0; }
}
@media (max-width: 640px) {
  .container .stats { gap: 1px; border-radius: 22px; }
  .stats .stat { flex-direction: row-reverse; align-items: center; padding: 16px 12px; gap: 10px; }
  .stats .stat:nth-child(1) { border-radius: 21px 0 0 0; }
  .stats .stat:nth-child(2) { border-radius: 0 21px 0 0; }
  .stats .stat:nth-child(3) { border-radius: 0 0 0 21px; }
  .stats .stat:nth-child(4) { border-radius: 0 0 21px 0; }
  .stats .stat__icon { width: 38px; height: 38px; border-radius: 11px; }
  .stats .stat__icon svg { width: 18px; height: 18px; }
  .stats .stat__num { font-size: 24px; margin-bottom: 6px; }
  .stats .stat__label { font-size: 13px; }
}

/* ==========================================================================
   Header v2 — Floating pill glass (เฉพาะ Desktop ≥ 961px)
   ========================================================================== */
@media (min-width: 961px) {
  .site-header { padding-top: 18px; }

  /* header สูงขึ้น 8px จึงเลื่อน hero ให้ยังซ้อนใต้แถบพอดี */
  .hero--dark,
  .page-hero { margin-top: -86px; }

  .site-header__bar {
    height: 68px;
    max-width: 1140px;
    margin-inline: auto;
    padding: 0 10px 0 20px;
    gap: 20px;
    background:
      linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,255,255,.72));
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255,255,255,.75);
    box-shadow:
      0 1px 0 rgba(255,255,255,.9) inset,
      0 10px 34px -12px rgba(6,26,48,.28);
    transition: height .35s cubic-bezier(.4,0,.2,1),
                max-width .35s cubic-bezier(.4,0,.2,1),
                background .35s, box-shadow .35s, border-color .35s;
  }
  .site-header.is-scrolled .site-header__bar {
    height: 58px;
    max-width: 1020px;
    background:
      linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.88));
    border-color: rgba(11,111,203,.16);
    box-shadow:
      0 1px 0 rgba(255,255,255,.9) inset,
      0 16px 40px -14px rgba(6,26,48,.38);
  }

  /* แบรนด์ */
  .site-header .brand { gap: 12px; transition: transform .3s; }
  .site-header .brand:hover { transform: translateX(2px); }
  .site-header .brand__mark {
    border-radius: 12px;
    transition: transform .4s cubic-bezier(.4,0,.2,1), filter .3s;
  }
  .site-header .brand:hover .brand__mark {
    transform: scale(1.06);
    filter: drop-shadow(0 6px 14px rgba(11,111,203,.45));
  }
  .site-header .brand__name { letter-spacing: .08em; }
  .site-header .brand__sub {
    color: var(--ink-soft);
    transition: color .3s;
  }
  .site-header .brand:hover .brand__sub { color: var(--blue-600); }

  /* เมนู */
  .site-header .nav {
    gap: 2px;
    padding: 4px;
    border-radius: 999px;
    background: rgba(10,37,64,.04);
    border: 1px solid rgba(10,37,64,.05);
  }
  .site-header .nav a {
    position: relative;
    padding: 9px 18px;
    font-size: 15px;
    letter-spacing: .01em;
    transition: color .25s, background .25s, box-shadow .25s;
  }
  .site-header .nav a::after {
    content: "";
    position: absolute;
    left: 50%; bottom: 3px;
    width: 0; height: 2px; border-radius: 2px;
    background: currentColor;
    opacity: .55;
    transform: translateX(-50%);
    transition: width .28s cubic-bezier(.4,0,.2,1);
  }
  .site-header .nav a:hover {
    color: var(--blue-600);
    background: rgba(255,255,255,.9);
    box-shadow: 0 4px 12px -4px rgba(10,37,64,.18);
  }
  .site-header .nav a:hover::after { width: 16px; }
  .site-header .nav a.is-active {
    color: #fff;
    background: linear-gradient(145deg, #38A8F5, #0B6FCB);
    box-shadow: 0 8px 18px -8px rgba(11,111,203,.9);
  }
  .site-header .nav a.is-active::after { width: 0; }

  /* กลุ่มปุ่มขวา */
  .site-header .header-actions { gap: 10px; }

  .site-header .lang-switch {
    padding: 3px;
    background: rgba(10,37,64,.05);
    border: 1px solid rgba(10,37,64,.06);
  }
  .site-header .lang-switch button {
    min-width: 38px; height: 32px;
    font-size: 12.5px; letter-spacing: .06em;
  }
  .site-header .lang-switch button:hover { color: var(--blue-600); }
  .site-header .lang-switch button[aria-pressed="true"] {
    background: #fff;
    box-shadow: 0 2px 8px -2px rgba(10,37,64,.3);
  }

  .site-header .header-cta {
    min-height: 42px;
    padding: 10px 22px;
    font-size: 14.5px;
    background: linear-gradient(145deg, #0B6FCB, #061A30);
    border: 1px solid rgba(124,200,255,.35);
    box-shadow: 0 10px 24px -12px rgba(11,111,203,.95);
    transition: transform .28s, box-shadow .28s, background .28s;
  }
  .site-header .header-cta:hover {
    background: linear-gradient(145deg, #38A8F5, #0B6FCB);
    transform: translateY(-2px);
    box-shadow: 0 16px 32px -12px rgba(56,168,245,.95);
  }
  .site-header .header-cta svg {
    transition: transform .3s cubic-bezier(.4,0,.2,1);
  }
  .site-header .header-cta:hover svg { transform: rotate(-12deg) scale(1.1); }
}