/*
 * site.css — สไตล์ทั้งหมดของเว็บบริษัท (ระบบดีไซน์เล็ก ๆ 1 ชุด)
 * · DESIGN_platform_split.md ข้อ ② · DESIGN_site_redesign.md ข้อ ②
 *
 * ⚠️ CSS ของเว็บนี้ต้องอยู่ในไฟล์เท่านั้น ห้ามมี <style> ในหน้าและห้าม style="..."
 *    CSP เป็น default-src 'self' ซึ่งบล็อก inline style ทั้งหมด — เขียนไปก็ไม่ติด
 *    แล้วหน้าจะเพี้ยนเฉพาะบน prod (dev ที่เปิดจากไฟล์ตรง ๆ อาจไม่เห็นปัญหา)
 *
 * ⚠️ โหลดหลัง bootstrap.min.css เสมอ (ดู partials/head.php) — กฎที่นี่ตั้งใจทับของ
 *    Bootstrap ได้เองด้วยลำดับ **ห้ามใช้ !important เพื่อทับ** (DESIGN ข้อ ②)
 *
 * ── โครงของไฟล์ ─────────────────────────────────────────────────────────────
 *   ①  โทเคน       — สี · ระยะ · รัศมี · เงา · เส้น · ตัวอักษร  (ประกาศที่เดียว)
 *   ②  พื้นฐาน      — body · หัวข้อ · ลิงก์ · โฟกัส
 *   ③  โครงหน้า     — section · band · หัวข้อ section
 *   ④  แถบบน
 *   ⑤  ปุ่ม
 *   ⑥  hero
 *   ⑦  การ์ด · ฟีเจอร์ · ไอคอน
 *   ⑧  ภาพหน้าจอระบบ
 *   ⑨  ขั้นตอน
 *   ⑩  ราคา
 *   ⑪  คำถามพบบ่อย
 *   ⑫  ฟอร์มสมัคร
 *   ⑬  ท้ายหน้า
 *   ⑮  เอกสารกฎหมาย (/privacy · /terms)
 *   ⑭  มือถือ (ทดสอบที่ 360px)   ⚠️ media query ต้องอยู่ท้ายไฟล์เสมอ
 */

/* ═══ ① โทเคน ═══════════════════════════════════════════════════════════════
 *
 * ⚠️ **ค่าดิบทุกค่าอยู่ในบล็อกนี้บล็อกเดียว** ที่อื่นในไฟล์ห้ามเขียนเลขสีหรือ
 *    ระยะแบบสุ่มลงไปตรง ๆ — เดิมไฟล์นี้มีโทเคนแค่ 4 ตัวแล้วที่เหลือกระจายเป็นค่าดิบ
 *    ผลคือ "เทาอ่อน" ในหน้ามี 5 เฉดที่ตั้งใจให้เหมือนกัน
 */
:root {
  /* ══ สีของแบรนด์ — ชุดที่เจ้าของกำหนด ═══════════════════════════════════════
   * ทั้งเว็บคุมโทนด้วย 6 สีนี้ ตัวอื่นทุกตัวข้างล่างเป็น "ญาติ" ของมัน คือ
   * น้ำเงินกรมเข้มกับเทาอมฟ้าที่อยู่ในตระกูลสีเดียวกัน (hue ~210-213) —
   * ไม่ใช่เทากลาง ๆ ที่หยิบมาจากที่อื่น หน้าจึงอ่านออกว่าเป็นชุดสีเดียว
   */
  --iz-blue: #3892fe; /* น้ำเงินหลักของแบรนด์ */
  --iz-blue-2: #4b8aff;
  --iz-blue-3: #71a2fe;
  --iz-cyan: #3dc4fd;
  --iz-cyan-2: #7cedfc;
  --iz-white: #ffffff;

  /* ⚠️ **น้ำเงินเข้มอีก 2 ระดับที่ต้องเพิ่ม** — ไม่ได้อยู่ในชุดที่กำหนด แต่จำเป็น
   *    #3892fe กับตัวอักษรสีขาวได้คอนทราสต์แค่ **3.1:1** ซึ่งตกเกณฑ์ WCAG AA
   *    ของตัวอักษรขนาดปกติ (ต้อง 4.5:1) ปุ่ม "สมัครเปิดร้าน" ที่อ่านยากคือปุ่ม
   *    ที่ไม่มีใครกด สีสว่างชุดบนจึงถูกใช้กับ **เส้นขอบ · แสงฟุ้ง · ไอคอน ·
   *    ตัวอักษรบนพื้นเข้ม** ส่วนพื้นทึบที่มีตัวหนังสือขาวทับใช้ 2 ตัวนี้
   *    (#0f62d6 = 5.6:1 · #0b4fae = 7.7:1)
   *    ⚠️ ถ้าจะปรับให้สว่างขึ้นต้องวัดคอนทราสต์ใหม่ ไม่ใช่ปรับด้วยตา
   */
  --iz-blue-700: #0f62d6;
  --iz-blue-800: #0b4fae;

  /* ── สีใช้งาน (semantic) — คอมโพเนนต์ข้างล่างอ้างชุดนี้ ไม่ใช่ชื่อสีตรง ๆ ──
   * ⚠️ ตั้งใจแยกชั้น: วันไหนแบรนด์เปลี่ยนสี แก้ที่บล็อกบนบล็อกเดียว
   *    ไม่ต้องไล่แก้ทุกกฎในไฟล์
   */
  --iz-accent: var(--iz-blue-700); /* พื้นปุ่ม · ตัวอักษรลิงก์บนพื้นสว่าง */
  --iz-accent-700: var(--iz-blue-800); /* ตอน hover */
  --iz-accent-300: var(--iz-blue); /* เส้นขอบ · กรอบโฟกัส · บนพื้นเข้ม */
  --iz-accent-100: #d3e5ff;
  --iz-accent-050: #eaf3ff;

  /* ── สี: หมึก (พื้นเข้ม) — น้ำเงินกรม ไม่ใช่ดำ ────────────────────────────
   * ⚠️ พื้นเข้มของเว็บนี้ต้องเป็นน้ำเงินกรม ไม่ใช่เทาดำ เพราะแสงฟุ้งสีฟ้าใน hero
   *    จะดูเหมือนคราบสกปรกทันทีถ้าพื้นหลังเป็นสีกลาง
   */
  --iz-ink-900: #05101f;
  --iz-ink-800: #0a1b30;
  --iz-ink-700: #102844;
  --iz-ink-600: #1b3a5c;

  /* ── สี: เนื้อความ ─────────────────────────────────────────────────────── */
  --iz-text: #0f1e33; /* เนื้อความหลัก — 15.7:1 บนพื้นเว็บ */
  --iz-text-2: #46586f; /* เนื้อความรอง  —  7.3:1 บนพื้นขาว */

  /* ⚠️ #5f7189 ไม่ใช่ "เทาอ่อนกว่านี้อีกนิด" ตามใจ — มันคือเฉดที่จางที่สุดที่ยัง
   *    ผ่าน WCAG AA (4.99:1 บนพื้นขาว · 4.67:1 บนพื้นเว็บ) ตัวที่ใช้อยู่เดิม
   *    (#6b7d94) ได้แค่ 4.21:1 คือ **ตกเกณฑ์** และมันไปอยู่บนของที่คนต้องอ่านจริง
   *    เช่นหน่วยราคา ("ต่อเดือน") กับคำอธิบายใต้ช่องกรอกในฟอร์มสมัคร
   *    จะทำให้จางกว่านี้ต้องวัดใหม่ ไม่ใช่ปรับด้วยตา
   */
  --iz-text-3: #5f7189; /* คำอธิบายย่อย · หน่วย */
  --iz-on-dark: #ffffff;
  --iz-on-dark-2: rgba(255, 255, 255, 0.8);
  --iz-on-dark-3: rgba(255, 255, 255, 0.58);

  /* ── สี: พื้น ─────────────────────────────────────────────────────────── */
  --iz-bg: #f3f8fe;
  --iz-surface: #ffffff;
  --iz-surface-2: #e8f1fd;

  /* ── สี: เส้น ─────────────────────────────────────────────────────────── */
  --iz-line: #dce9f8;
  --iz-line-2: #c3d8f1;
  --iz-line-dark: rgba(124, 237, 252, 0.16);

  /* ── ระยะ: สเกล 4/8px ชุดเดียวทั้งเว็บ ─────────────────────────────────── */
  --iz-s-1: 0.25rem; /*  4 */
  --iz-s-2: 0.5rem; /*  8 */
  --iz-s-3: 0.75rem; /* 12 */
  --iz-s-4: 1rem; /* 16 */
  --iz-s-5: 1.5rem; /* 24 */
  --iz-s-6: 2rem; /* 32 */
  --iz-s-7: 2.5rem; /* 40 */
  --iz-s-8: 3rem; /* 48 */
  --iz-s-9: 4rem; /* 64 */
  --iz-s-10: 5rem; /* 80 */

  /* ── รัศมี ─────────────────────────────────────────────────────────────── */
  --iz-r-sm: 10px;
  --iz-r: 14px;
  --iz-r-lg: 18px;
  --iz-r-xl: 26px;
  --iz-r-pill: 999px;

  /* ── ความหนาเส้น ───────────────────────────────────────────────────────── */
  --iz-bw: 1px;
  --iz-bw-2: 2px;

  /* ── เงาแบบซ้อนชั้น ───────────────────────────────────────────────────────
   * DESIGN ข้อ ②.4: ใช้เงาแทนเส้นขอบเทาทึบ เพราะขอบเทา 1px รอบทุกการ์ดคือ
   * หน้าตาของ "ฟอร์มกรอกข้อมูล" ไม่ใช่ของสินค้าที่ขายราคาเต็ม
   * ⚠️ ทุกระดับมี **2 ชั้นเสมอ** — ชั้นคมสั้น ๆ ให้ขอบ + ชั้นฟุ้งไกลให้ความลึก
   *    เงาชั้นเดียวจะได้ก้อนเทาลอย ๆ ที่ดูถูกกว่าไม่ใส่เงาเลย
   * ⚠️ เงาทุกตัวเป็น **น้ำเงินเจือ** ไม่ใช่ดำเจือ — เงาสีดำบนพื้นอมฟ้าจะออกเทา
   *    หม่นแล้วทั้งหน้าดูสกปรกลงทันที
   */
  --iz-sh-1: 0 1px 2px rgba(10, 27, 48, 0.05), 0 1px 3px rgba(10, 27, 48, 0.04);
  --iz-sh-2:
    0 1px 2px rgba(10, 27, 48, 0.05), 0 8px 20px -6px rgba(15, 62, 122, 0.12);
  --iz-sh-3:
    0 2px 4px rgba(10, 27, 48, 0.05), 0 18px 38px -10px rgba(15, 62, 122, 0.18);
  --iz-sh-4:
    0 4px 8px rgba(10, 27, 48, 0.06), 0 34px 64px -16px rgba(9, 40, 82, 0.28);
  --iz-sh-accent:
    0 2px 4px rgba(11, 79, 174, 0.16), 0 14px 30px -8px rgba(15, 98, 214, 0.38);
  --iz-sh-accent-lift:
    0 4px 8px rgba(11, 79, 174, 0.18), 0 22px 44px -10px rgba(15, 98, 214, 0.46);

  /* วงแหวนบางรอบการ์ด — ให้ขอบคมโดยไม่ต้องมี border จริงที่กินพื้นที่ layout */
  --iz-ring: inset 0 0 0 1px rgba(56, 146, 254, 0.1);

  /* ── ไล่สีของแบรนด์ — ประกาศไว้ที่เดียว ใช้ซ้ำได้ทั้งไฟล์ ─────────────────── */
  --iz-grad-brand: linear-gradient(
    135deg,
    var(--iz-blue) 0%,
    var(--iz-cyan) 100%
  );
  --iz-grad-btn: linear-gradient(135deg, #1a6fe0 0%, var(--iz-blue-700) 100%);
  --iz-grad-tint: linear-gradient(
    135deg,
    var(--iz-accent-050) 0%,
    #e2f4ff 100%
  );

  /* ── ตัวอักษร ─────────────────────────────────────────────────────────────
   * ⚠️ ภาษาไทยไม่มีตัวพิมพ์ใหญ่-เล็ก ลำดับความสำคัญจึงต้องมาจาก **ขนาดกับน้ำหนัก**
   *    อย่างเดียว (DESIGN ข้อ ②.3) ระยะห่างระหว่างขั้นจึงกว้างกว่าเว็บอังกฤษ
   * ⚠️ line-height ของเนื้อความตั้ง 1.75-1.8 เพราะสระบน (ไม้เอก ไม้โท) กับสระล่าง
   *    (สระอุ สระู) กินที่เกินกรอบบรรทัด ถ้าใช้ 1.5 แบบเว็บอังกฤษ สระจะชนกัน
   */
  --iz-font: "Noto Sans Thai", system-ui, -apple-system, "Segoe UI", sans-serif;
  --iz-font-mono: ui-monospace, "Cascadia Code", Consolas, monospace;

  --iz-fs-hero: clamp(1.75rem, 1.1rem + 2.7vw, 3rem);
  --iz-fs-h2: clamp(1.375rem, 1.12rem + 1.15vw, 2rem);
  --iz-fs-h3: 1.0625rem;
  --iz-fs-lead: clamp(1rem, 0.955rem + 0.28vw, 1.15rem);
  --iz-fs-body: 1rem;
  --iz-fs-sm: 0.9375rem;
  --iz-fs-xs: 0.8125rem;

  --iz-lh-tight: 1.35; /* หัวเรื่องใหญ่ */
  --iz-lh-head: 1.45; /* หัวข้อ section */
  --iz-lh-body: 1.75; /* เนื้อความ */
  --iz-lh-loose: 1.8; /* ย่อหน้านำ */
}

/* ═══ ② พื้นฐาน ═════════════════════════════════════════════════════════════ */

body {
  font-family: var(--iz-font);
  font-size: var(--iz-fs-body);
  line-height: var(--iz-lh-body);
  color: var(--iz-text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;

  /* พื้นหลังทั้งหน้า: ขาวอมฟ้าจาง ๆ พร้อมแสงฟุ้งสีแบรนด์ที่มุมบน
     ⚠️ fixed เพื่อไม่ให้แสงเลื่อนตามหน้าจนดูเหมือนคราบวิ่ง */
  background-color: var(--iz-bg);
  background-image:
    radial-gradient(
      52rem 30rem at 88% -6%,
      rgba(61, 196, 253, 0.16) 0%,
      rgba(61, 196, 253, 0) 60%
    ),
    radial-gradient(
      46rem 28rem at 4% 2%,
      rgba(56, 146, 254, 0.12) 0%,
      rgba(56, 146, 254, 0) 62%
    );
  background-attachment: fixed;
  background-repeat: no-repeat;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: var(--iz-lh-head);
  color: var(--iz-text);
}

p {
  line-height: var(--iz-lh-body);
}

/* ⚠️ โฟกัสต้องมองเห็นได้ทั้งเว็บ — คนที่ใช้คีย์บอร์ดอย่างเดียวต้องรู้ว่าตัวเองอยู่ตรงไหน
   ใช้ :focus-visible ไม่ใช่ :focus เพื่อไม่ให้กรอบขึ้นตอนคลิกเมาส์ */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
.btn:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: var(--iz-bw-2) solid var(--iz-accent-300);
  outline-offset: 2px;
  border-radius: var(--iz-r-sm);
}

.site-link {
  color: var(--iz-text-2);
  text-decoration: none;
  font-size: var(--iz-fs-sm);
  font-weight: 500;
  transition: color 0.15s ease;
}
.site-link:hover {
  color: var(--iz-accent);
  text-decoration: underline;
}

/* ตัวหนังสือรองในหน้าพื้นสว่าง — ทับของ Bootstrap ที่จางเกินไปสำหรับตัวไทย */
.text-secondary {
  color: var(--iz-text-2);
}

/* ═══ ③ โครงหน้า ════════════════════════════════════════════════════════════ */

/* จังหวะแนวตั้งของทั้งหน้ามาจากคลาสเดียว — ไม่ใช่ py-5 กระจายตามใจแต่ละ section */
.section {
  padding-block: var(--iz-s-8);
}
.section-tight {
  padding-block: var(--iz-s-7);
}

/* แถบพื้นขาวคั่นระหว่างแถบพื้นอมฟ้า — ให้จังหวะสายตาโดยไม่ต้องมีเส้นขอบ */
.band {
  background: var(--iz-surface);
}
.band-soft {
  background:
    radial-gradient(
      40rem 24rem at 50% 0%,
      rgba(56, 146, 254, 0.07) 0%,
      rgba(56, 146, 254, 0) 70%
    ),
    linear-gradient(180deg, var(--iz-surface) 0%, var(--iz-surface-2) 100%);
}

/* หัวข้อ section: ป้ายเล็ก + หัวเรื่อง + คำอธิบาย */
.section-head {
  max-width: 44rem;
  margin-bottom: var(--iz-s-6);
}
.section-head-center {
  margin-inline: auto;
  text-align: center;
}

.eyebrow {
  display: inline-block;
  font-size: var(--iz-fs-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--iz-accent);
  background: var(--iz-grad-tint);
  box-shadow: inset 0 0 0 1px rgba(56, 146, 254, 0.18);
  border-radius: var(--iz-r-pill);
  padding: var(--iz-s-1) var(--iz-s-3);
  margin-bottom: var(--iz-s-3);
}
.eyebrow-dark {
  color: var(--iz-cyan-2);
  background: rgba(61, 196, 253, 0.12);
  box-shadow: inset 0 0 0 1px rgba(124, 237, 252, 0.26);
}

.section-title {
  font-size: var(--iz-fs-h2);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: var(--iz-s-3);
}
.section-sub {
  font-size: var(--iz-fs-lead);
  line-height: var(--iz-lh-loose);
  color: var(--iz-text-2);
  margin-bottom: 0;
}

/* ═══ ④ แถบบน ═══════════════════════════════════════════════════════════════ */

.site-nav {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: saturate(1.7) blur(14px);
  border-bottom: var(--iz-bw) solid var(--iz-line);
}

.site-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--iz-s-2);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  color: var(--iz-ink-900);
  text-decoration: none;
}
.site-brand:hover {
  color: var(--iz-accent);
}

/* ── โลโก้จริงบนแถบบน ──────────────────────────────────────────────────────
 * ⚠️ ตั้งความสูงเป็นตัวคุม แล้วให้ width: auto — ไฟล์จริง 460×79 ถูกย่อลงมาเหลือ
 *    สูง 30px กว้าง ~175px · แอตทริบิวต์ width/height ในแท็กยังต้องเป็นขนาดจริง
 *    ของไฟล์เสมอ (เบราว์เซอร์ใช้คำนวณสัดส่วนจองที่ก่อนรูปมาถึง)
 * ⚠️ มือถือย่อลงอีกนิด — ชื่อแบรนด์ในโลโก้ยาว พอจอ 360px แล้วปุ่ม "สมัครเปิดร้าน"
 *    จะถูกเบียดตกบรรทัด
 */
.brand-logo {
  height: 45px;
  width: auto;
  display: block;
}
@media (max-width: 575.98px) {
  .brand-logo {
    height: 26px;
  }
}

/* ตัวมาร์คอย่างเดียว — ใช้ท้ายเว็บที่พื้นเข้ม (ดูเหตุผลใน partials/footer.php) */
.brand-mark-img {
  width: 1.75rem;
  height: 1.75rem;
  flex: 0 0 auto;
  display: block;
}

/* เครื่องหมายหน้าแบรนด์แบบ CSS — เหลือไว้ให้หน้าที่ยังไม่ได้ใช้ไฟล์โลโก้
   (ไม่มีคำขอเพิ่ม ไม่มี layout shift) */
.brand-mark {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--iz-r-sm);
  background: var(--iz-grad-brand);
  box-shadow: 0 4px 12px -3px rgba(56, 146, 254, 0.55);
  color: var(--iz-on-dark);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

/* ═══ ⑤ ปุ่ม ════════════════════════════════════════════════════════════════
 *
 * ⚠️ DESIGN ข้อ ②.5: **ปุ่มหลักได้ 1 แบบต่อหน้าจอ** ("สมัครเปิดร้าน") ที่เหลือ
 *    ต้องเป็นปุ่มรอง หน้าที่มีปุ่มทึบสีเน้น 3 ปุ่มพร้อมกันคือหน้าที่ไม่ได้บอกว่า
 *    อยากให้คนกดอะไร
 */
.btn {
  font-family: var(--iz-font);
  font-weight: 600;
  border-radius: var(--iz-r-sm);
}

.btn-primary {
  --bs-btn-bg: transparent;
  --bs-btn-border-color: transparent;
  --bs-btn-hover-bg: transparent;
  --bs-btn-hover-border-color: transparent;
  --bs-btn-active-bg: transparent;
  --bs-btn-active-border-color: transparent;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: transparent;
  background-image: var(--iz-grad-btn);
  box-shadow: var(--iz-sh-accent);
  transition:
    transform 0.12s ease,
    box-shadow 0.18s ease;
}
.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: var(--iz-sh-accent-lift);
}
.btn-primary:active {
  transform: translateY(0);
}

/* ปุ่มรองบนพื้นสว่าง */
.btn-quiet {
  background: var(--iz-surface);
  border: var(--iz-bw) solid var(--iz-line-2);
  color: var(--iz-accent);
  box-shadow: var(--iz-sh-1);
}
.btn-quiet:hover {
  border-color: var(--iz-accent-300);
  color: var(--iz-accent-700);
  box-shadow: var(--iz-sh-2);
}

/* ปุ่มรองบนพื้นเข้ม (hero) — โปร่งใสมีเส้นขอบ ไม่ใช่ปุ่มทึบอีกสี
   ⚠️ ขอบต้องสว่างพอที่จะเห็นว่าเป็นปุ่ม — ครั้งแรกใช้ขาว 14% แล้วบนพื้น hero
      มันจางจนดูเหมือนกล่องข้อความ ไม่ใช่ของที่กดได้
      แต่ห้ามทำเป็นปุ่มทึบ: ปุ่มหลักมีได้ปุ่มเดียวต่อหน้าจอ (DESIGN ②.5) */
.btn-quiet-dark {
  background: rgba(124, 237, 252, 0.08);
  border: var(--iz-bw) solid rgba(124, 237, 252, 0.34);
  color: var(--iz-on-dark);
}
.btn-quiet-dark:hover {
  background: rgba(124, 237, 252, 0.16);
  border-color: rgba(124, 237, 252, 0.58);
  color: var(--iz-on-dark);
}

.btn-lg {
  padding: var(--iz-s-3) var(--iz-s-6);
  font-size: var(--iz-fs-body);
}

/* ═══ ⑥ hero ════════════════════════════════════════════════════════════════
 *
 * ⚠️ พื้นเป็นน้ำเงินกรมเข้ม แล้ววาง "แสงเหนือ" 2 ก้อน (น้ำเงิน + ฟ้า) ทับ
 *    ไม่ใช่ไล่สีสองสีตัดกันเต็มพื้น (DESIGN ข้อ ② "ห้ามทำ") — ไล่สีเต็มพื้นคือ
 *    หน้าตาเทมเพลตสำเร็จรูป ส่วนแสงฟุ้งเฉพาะจุดให้ความรู้สึกลึกและแพงกว่า
 */
.hero {
  position: relative;
  overflow: hidden;
  background-color: var(--iz-ink-900);
  background-image:
    radial-gradient(
      58rem 30rem at 82% -14%,
      rgba(61, 196, 253, 0.34) 0%,
      rgba(61, 196, 253, 0) 58%
    ),
    radial-gradient(
      46rem 30rem at 12% 108%,
      rgba(56, 146, 254, 0.3) 0%,
      rgba(56, 146, 254, 0) 60%
    ),
    linear-gradient(168deg, var(--iz-ink-800) 0%, var(--iz-ink-900) 100%);
  color: var(--iz-on-dark);
}

/* เส้นตารางจาง ๆ ให้พื้นเข้มไม่ตายด้าน — ทำจาก gradient ไม่ใช่ไฟล์รูป */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(
      rgba(124, 237, 252, 0.05) var(--iz-bw),
      transparent var(--iz-bw)
    ),
    linear-gradient(
      90deg,
      rgba(124, 237, 252, 0.05) var(--iz-bw),
      transparent var(--iz-bw)
    );
  background-size: 3.5rem 3.5rem;
  /* จางลงเรื่อย ๆ ตอนลงล่าง — ตารางที่คมเท่ากันทั้งบล็อกดูเป็นกระดาษกราฟ */
  -webkit-mask-image: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.9) 0%,
    transparent 78%
  );
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.9) 0%, transparent 78%);
  pointer-events: none;
}

/* เส้นเรืองแสงบาง ๆ ที่ขอบล่างของ hero — รอยต่อกับเนื้อหาข้างล่างจะไม่ตัดห้วน */
.hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--iz-bw);
  background: linear-gradient(
    90deg,
    rgba(56, 146, 254, 0) 0%,
    rgba(61, 196, 253, 0.55) 50%,
    rgba(56, 146, 254, 0) 100%
  );
  pointer-events: none;
}

.hero > * {
  position: relative;
  z-index: 1;
}

.hero-inner {
  padding-block: var(--iz-s-9);
}
.hero-sm .hero-inner {
  padding-block: var(--iz-s-7);
}

.hero-title {
  font-size: var(--iz-fs-hero);
  font-weight: 700;
  line-height: var(--iz-lh-tight);
  letter-spacing: -0.015em;
  color: var(--iz-on-dark);
  margin-bottom: var(--iz-s-4);
}
.hero-sm .hero-title {
  font-size: var(--iz-fs-h2);
}

.hero-sub {
  font-size: var(--iz-fs-lead);
  line-height: var(--iz-lh-loose);
  color: var(--iz-on-dark-2);
  max-width: 40rem;
  margin-bottom: 0;
}
.hero-center .hero-sub {
  margin-inline: auto;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--iz-s-3);
  margin-top: var(--iz-s-6);
}
.hero-center .hero-actions {
  justify-content: center;
}

/* จุดยืนยัน 3 ข้อใต้ปุ่ม — ข้อความสั้น ๆ ที่เป็นเรื่องจริงตรวจสอบได้
   ⚠️ ที่นี่ไม่ใช่ที่ของตัวเลขสถิติ (DESIGN ข้อ ③ "ห้ามกุขึ้นมาเอง") */
.hero-points {
  list-style: none;
  padding-left: 0;
  margin: var(--iz-s-6) 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--iz-s-3) var(--iz-s-5);
  font-size: var(--iz-fs-sm);
  color: var(--iz-on-dark-2);
}
.hero-center .hero-points {
  justify-content: center;
}
.hero-points li {
  display: flex;
  align-items: center;
  gap: var(--iz-s-2);
}
.hero-points li::before {
  content: "";
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background: var(--iz-cyan-2);
  box-shadow: 0 0 8px rgba(124, 237, 252, 0.9);
  flex: 0 0 auto;
}

/* ⚠️ กำหนดขนาดคงที่ให้ภาพประกอบเสมอ (width/height ทั้งบนแท็กและที่นี่)
   ไม่งั้นหน้าจะขยับตอนโหลด = คะแนน CLS ของ Core Web Vitals เสียฟรี ๆ */
.hero-art {
  width: 100%;
  height: auto;
  max-width: 26.25rem;
  display: block;
  margin-left: auto;
}

/* ═══ ⑦ การ์ด · ฟีเจอร์ · ไอคอน ════════════════════════════════════════════ */

.card-soft {
  background: var(--iz-surface);
  border: 0;
  border-radius: var(--iz-r-lg);
  box-shadow: var(--iz-ring), var(--iz-sh-2);
  transition:
    box-shadow 0.2s ease,
    transform 0.2s ease;
}
.card-soft:hover {
  box-shadow: var(--iz-ring), var(--iz-sh-3);
  transform: translateY(-2px);
}

/* การ์ดฟีเจอร์ — ไอคอน + หัวข้อ + คำอธิบาย */
.feature {
  height: 100%;
  padding: var(--iz-s-5);
}
.feature-icon {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--iz-r);
  background: var(--iz-grad-tint);
  box-shadow: inset 0 0 0 1px rgba(56, 146, 254, 0.16);
  color: var(--iz-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--iz-s-4);
}
.feature-icon svg {
  width: 1.375rem;
  height: 1.375rem;
  display: block;
}
.feature-title {
  font-size: var(--iz-fs-h3);
  font-weight: 600;
  margin-bottom: var(--iz-s-2);
}
.feature-body {
  font-size: var(--iz-fs-sm);
  color: var(--iz-text-2);
  margin-bottom: 0;
}

/* การ์ดกิจการที่หน้าบริษัท — ต้องดูกดได้ทั้งใบ */
.vertical-card {
  height: 100%;
  padding: var(--iz-s-5);
  display: flex;
  flex-direction: column;
}
.vertical-card .feature-title {
  font-size: 1.125rem;
}
.vertical-card .feature-body {
  flex-grow: 1;
  margin-bottom: var(--iz-s-5);
}

/* แถบจุดแข็ง (ทำไมต้องเรา) — มีเส้นสีแบรนด์นำหน้าแต่ละข้อ ไม่ใช่ข้อความลอย ๆ */
.trust-item {
  padding-left: var(--iz-s-4);
  border-left: var(--iz-bw-2) solid transparent;
}
.trust-item {
  border-image: linear-gradient(180deg, var(--iz-blue) 0%, var(--iz-cyan) 100%)
    1;
}

/* ═══ ⑧ ภาพหน้าจอระบบ ═══════════════════════════════════════════════════════
 *
 * DESIGN ข้อ ③.1 — "ของจริงหน้าตาเป็นยังไง" ได้ผลกว่าการแต่งสีทั้งหมดรวมกัน
 * กรอบจำลองหน้าต่างเบราว์เซอร์ทำจาก CSS ล้วน รูปข้างในเป็นภาพจริงที่เบลอข้อมูล
 * ลูกค้าออกแล้ว
 */
.shot {
  border-radius: var(--iz-r-lg);
  overflow: hidden;
  background: var(--iz-surface);
  box-shadow: var(--iz-ring), var(--iz-sh-4);
}

/* ภาพใน hero — มีวงแหวนกับแสงฟุ้งสีฟ้า ให้ลอยออกมาจากพื้นเข้ม */
.shot-dark {
  box-shadow:
    inset 0 0 0 1px rgba(124, 237, 252, 0.16),
    0 30px 70px -18px rgba(0, 0, 0, 0.65),
    0 0 90px -24px rgba(61, 196, 253, 0.5);
}

.shot-bar {
  display: flex;
  align-items: center;
  gap: var(--iz-s-2);
  padding: var(--iz-s-3) var(--iz-s-4);
  background: var(--iz-surface-2);
  border-bottom: var(--iz-bw) solid var(--iz-line);
}
.shot-dot {
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  background: var(--iz-line-2);
}

/* ⚠️ รูปต้องมี width/height บนแท็กเสมอ (ชุดทดสอบข้อ ⑥.6 ตรวจ) — สองบรรทัดนี้
   ทำให้มันยืดตามคอลัมน์ได้โดยที่เบราว์เซอร์ยังรู้อัตราส่วนตั้งแต่ก่อนรูปมาถึง */
.shot img {
  display: block;
  width: 100%;
  height: auto;
}

/* ⚠️ `.shot-phone` ถูกลบทิ้ง 2026-09-05 — ภาพมือถือทุกใบไปอยู่บล็อก ⑯ (สไลด์
   ที่มีกรอบเครื่องจริง) แล้ว การเก็บทางเลือกที่แย่กว่าไว้แปลว่าวันหนึ่งจะมีคน
   หยิบใบผิด แล้วหน้าจะมีภาพมือถือ 2 หน้าตาในหน้าเดียวกัน */

/* ⚠️ `.shot-caption` · `.shot-row` ถูกลบทิ้ง 2026-09-05 พร้อมกับแถวสลับซ้าย-ขวา
   ที่ถูกแทนด้วยสไลด์ (บล็อก ⑯) — `.shot` เหลือใช้ที่เดียวคือภาพใน hero
   ⚠️ อย่าเอา `.shot` ไปใช้ในสไลด์: กรอบหน้าต่างของสไลด์คือ `.izwin-frame`
   ซึ่งออกแบบมาสำหรับพื้นเข้มและถูกย่อ/เอียงใน 3 มิติ คนละบทบาทกัน */

/* ═══ ⑨ ขั้นตอน ═════════════════════════════════════════════════════════════ */

/* รายการขั้นตอนแนวตั้ง (ใช้ในหน้าฟอร์มสมัคร) */
.steps {
  list-style: none;
  padding-left: 0;
  margin: 0;
  display: grid;
  gap: var(--iz-s-4);
}
.steps li {
  display: flex;
  gap: var(--iz-s-3);
  align-items: flex-start;
}

.step-num {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--iz-grad-tint);
  box-shadow: inset 0 0 0 1px rgba(56, 146, 254, 0.18);
  color: var(--iz-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: var(--iz-fs-xs);
  flex: 0 0 auto;
}

/* "ระบบทำงานยังไง" ที่หน้าขาย — เรียงเป็นแถวบนจอกว้าง มีเส้นเชื่อมระหว่างขั้น */
.flow {
  list-style: none;
  padding-left: 0;
  margin: 0;
  display: grid;
  gap: var(--iz-s-5);
}
.flow-step {
  position: relative;
  padding-left: var(--iz-s-8);
}
.flow-num {
  position: absolute;
  left: 0;
  top: 0;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--iz-surface);
  color: var(--iz-accent);
  box-shadow:
    inset 0 0 0 2px var(--iz-accent-100),
    var(--iz-sh-1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: var(--iz-fs-sm);
}
.flow-body {
  font-size: var(--iz-fs-sm);
  color: var(--iz-text-2);
  margin: 0;
  padding-top: var(--iz-s-1);
}

/* ═══ ⑩ ราคา ════════════════════════════════════════════════════════════════ */

.plan {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: var(--iz-s-5);
}

/* ⚠️ แพ็กที่แนะนำใช้ **เส้นขอบไล่สี + เงาสีแบรนด์** ไม่ใช่พื้นทึบสีเน้น —
   พื้นทึบจะแย่งสายตาไปจากปุ่ม "สมัครเปิดร้าน" ซึ่งเป็นสิ่งเดียวที่เราอยากให้กด
   ⚠️ ขอบไล่สีทำด้วย background 2 ชั้น (padding-box + border-box) ไม่ใช่ธาตุครอบ
   เพิ่ม — จึงไม่ต้องแตะ HTML และไม่กระทบความสูงของการ์ดใบอื่นในแถว */
.plan-hl {
  border: var(--iz-bw-2) solid transparent;
  background:
    linear-gradient(var(--iz-surface), var(--iz-surface)) padding-box,
    var(--iz-grad-brand) border-box;
  box-shadow: var(--iz-sh-accent);
}
.plan-hl:hover {
  box-shadow: var(--iz-sh-accent-lift);
}

.plan-badge {
  align-self: flex-start;
  font-size: var(--iz-fs-xs);
  font-weight: 600;
  color: var(--iz-on-dark);
  background: var(--iz-grad-btn);
  border-radius: var(--iz-r-pill);
  padding: var(--iz-s-1) var(--iz-s-3);
  margin-bottom: var(--iz-s-3);
  box-shadow: 0 4px 12px -4px rgba(15, 98, 214, 0.6);
}

/* ── การ์ด "เจอแบบนี้อยู่หรือเปล่า" ─────────────────────────────────────────
 *
 * ⚠️ **ต้องมี padding และ height: 100% เองเสมอ** — `.card-soft` ให้แค่พื้น เงา
 *    และมุมโค้ง ไม่ได้ให้ระยะขอบใน ๆ (`.feature` กับ `.vertical-card` ก็ประกาศเอง
 *    ทั้งคู่) การ์ดที่ลืม 2 บรรทัดนี้จะได้ตัวหนังสือชนขอบการ์ด และในแถวเดียวกัน
 *    ใบที่ข้อความสั้นกว่าจะเตี้ยกว่าเพื่อน — ก้นการ์ดไม่ตรงกันทั้งแถว
 *
 * ⚠️ ไม่ใส่ไอคอนโดยตั้งใจ — บล็อกนี้อยู่ติดกับบล็อกความสามารถที่เป็นการ์ดมีไอคอน
 *    ถ้าหน้าตาเหมือนกันเป๊ะ 2 บล็อกจะอ่านเหมือนบล็อกเดียวที่ยาวผิดปกติ
 *    ตัวแยกคือ "แถบสีด้านซ้าย" ซึ่งใช้ไล่สีชุดเดียวกับ .trust-item ทั้งเว็บ
 */
.problem {
  position: relative;
  height: 100%;
  padding: var(--iz-s-5);
  /* ⚠️ แถบสีเป็น ::before แบบ absolute ไม่ใช่ border-left — border จะดันกล่อง
     ทำให้หัวข้อกับเนื้อความเยื้องจากขอบการ์ดคนละระยะกับการ์ดใบอื่นในหน้า */
  overflow: hidden;
}
.problem::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--iz-bw-2);
  background: linear-gradient(180deg, var(--iz-blue) 0%, var(--iz-cyan) 100%);
}
.problem-pain {
  font-size: var(--iz-fs-h3);
  font-weight: 600;
  margin-bottom: var(--iz-s-2);
  color: var(--iz-text);
}

/* ── ตารางเทียบแพ็กเกจ ──────────────────────────────────────────────────────
   ⚠️ ห่อด้วย wrapper ที่เลื่อนแนวนอนได้ — จอมือถือ 360px ใส่ 4 คอลัมน์ไม่ลง
   ถ้าปล่อยให้ตารางบีบตัวเอง ตัวหนังสือจะซ้อนกันจนอ่านไม่ออก
   ⚠️ position:relative ห้ามถอด (แก้ 2026-09-15) — ทุกช่อง ✓/✗ มี
      <span class="visually-hidden">มี</span> ซึ่งเป็น position:absolute
      ถ้า wrapper ไม่ใช่ containing block มันจะยึดตำแหน่งกับ "ทั้งหน้า" แล้วหลุด
      ออกนอกกล่องเลื่อน ⇒ หน้ากว้าง 767px บนจอ 412px และ Chrome มือถือ **ซูมทั้ง
      หน้าออก** ให้พอดี (html,body overflow-x:hidden กันไม่ได้ — มันไม่ได้คุม
      ความกว้าง layout viewport บนมือถือ) */
.table-compare-wrap {
  position: relative;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.table-compare {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  font-size: var(--iz-fs-sm);
  background: var(--iz-surface);
  border: 1px solid var(--iz-line);
  border-radius: var(--iz-r-md);
  overflow: hidden;
}
.table-compare th,
.table-compare td {
  padding: var(--iz-s-3);
  border-bottom: 1px solid var(--iz-line);
  text-align: center;
  vertical-align: middle;
}
.table-compare thead th {
  font-weight: 700;
  color: var(--iz-text);
  background: var(--iz-surface-2, rgba(15, 98, 214, 0.04));
  white-space: nowrap;
}
.table-compare tbody th {
  text-align: left;
  font-weight: 400;
  color: var(--iz-text-2);
}
.table-compare thead th:first-child,
.table-compare tbody th {
  min-width: 16rem;
}
.table-compare tbody tr:last-child th,
.table-compare tbody tr:last-child td {
  border-bottom: 0;
}
.table-compare .yes {
  color: var(--iz-blue);
  font-weight: 700;
}
.table-compare .no {
  color: var(--iz-text-3);
}

/* ช่องทางติดต่อใต้ปุ่มปิดท้าย — ขึ้นเฉพาะเมื่อกรอก config/contact.php ไว้ */
.cta-contact {
  margin-top: var(--iz-s-4);
  color: var(--iz-text-2);
  font-size: var(--iz-fs-sm);
}

.plan-name {
  font-size: 1.125rem;
  font-weight: 700;
  margin-bottom: var(--iz-s-1);
}
.plan-tagline {
  font-size: var(--iz-fs-sm);
  color: var(--iz-text-2);
  margin-bottom: var(--iz-s-4);
  min-height: 3.2rem;
}

.price {
  font-size: 1.875rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 var(--iz-s-2);
  color: var(--iz-text);
}
.price-unit {
  font-size: var(--iz-fs-sm);
  font-weight: 400;
  color: var(--iz-text-3);
}

/* ราคาปกติขีดฆ่าเหนือราคาโปรโมชั่น (2026-09-13)
 * ⚠️ ใช้ --iz-text-3 (4.99:1) ไม่ใช่เทาที่จางกว่านี้ — ราคาปกติคือข้อมูลที่คน
 *    ต้องอ่านออกเพื่อเทียบว่าลดไปเท่าไร ไม่ใช่ของตกแต่ง ความจางต้องผ่าน AA
 * ⚠️ เส้นขีดฆ่าสีเดียวกับตัวอักษร — เส้นสีแดงดูเหมือน "ข้อผิดพลาด" มากกว่า "ส่วนลด" */
.price-list {
  font-size: var(--iz-fs-sm);
  color: var(--iz-text-3);
  margin: 0 0 var(--iz-s-1);
}
.price-list s {
  text-decoration-thickness: 1.5px;
}
.price-ask {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--iz-text-2);
}

/* บรรทัดใต้ราคา เช่น "จ่ายรายปีลด 5%" — ไม่มีก็ไม่พ่นแท็ก ระยะห่างจึงต้องอยู่
   ที่ตัวมันเอง ไม่ใช่ไปเพิ่ม margin ล่างให้ .price ซึ่งจะดันการ์ดที่ไม่มีโน้ตด้วย */
.plan-note {
  font-size: var(--iz-fs-sm);
  color: var(--iz-text-3);
  margin: 0 0 var(--iz-s-4);
}
.price-block .price {
  margin-bottom: var(--iz-s-2);
}
.price-block .plan-note:last-child {
  margin-bottom: var(--iz-s-4);
}
.price-ask {
  display: inline-block;
  margin-bottom: var(--iz-s-4);
}

/* ── สวิตช์ รายเดือน / รายปี ────────────────────────────────────────────────
 *
 * ⚠️ CSS ล้วน ไม่มี JS — radio ที่ซ่อนไว้ 2 ตัวคุมว่าจะโชว์ราคาก้อนไหน
 *    (CSP ของเว็บนี้ห้าม <script> ในหน้าอยู่แล้ว และไม่มี JS = ไม่มีจังหวะที่
 *     ราคากะพริบตอนหน้าโหลด)
 * ⚠️ ราคาทั้ง 2 ชุดมาจากเซิร์ฟเวอร์ครบแล้ว ที่นี่แค่สลับการมองเห็น
 *    ห้ามมีการคำนวณเงินที่ฝั่งเบราว์เซอร์เด็ดขาด
 */
.cycle-switch {
  display: inline-flex;
  gap: 0.25rem;
  padding: 0.25rem;
  margin: 0 auto var(--iz-s-5);
  border-radius: var(--iz-r-pill);
  background: var(--iz-surface);
  box-shadow: var(--iz-ring), var(--iz-sh-1, var(--iz-sh-2));
}
/* จัดให้อยู่กลางแนวนอนโดยไม่ต้องมี div ครอบเพิ่ม */
#pricing .cycle-switch {
  display: flex;
  width: fit-content;
}
/* ⚠️ .visually-hidden ของ Bootstrap เป็น position:absolute — ถ้าไม่กันไว้ มันจะ
   ไปวางทับมุมบนซ้ายของ section แล้วดัน layout ตอนโฟกัส (บางเบราว์เซอร์เลื่อนหน้าไปหา) */
.cycle-switch + .row {
  clear: both;
}

.cycle-switch label {
  cursor: pointer;
  user-select: none;
  padding: 0.5rem 1.15rem;
  border-radius: var(--iz-r-pill);
  font-size: var(--iz-fs-sm);
  font-weight: 600;
  color: var(--iz-text-2);
  line-height: 1.2;
  transition:
    background 0.15s ease,
    color 0.15s ease;
}
.cycle-switch label:hover {
  color: var(--iz-text);
}

/* ⚠️ ต้องมีทั้ง :checked + :focus-visible — คนที่ใช้คีย์บอร์ดต้องเห็นว่าโฟกัสอยู่ไหน
   ตัว input ถูกซ่อนด้วย .visually-hidden ซึ่งยังโฟกัสได้ (ต่างจาก display:none) */
#iz-cycle-month:checked ~ .cycle-switch label[for="iz-cycle-month"],
#iz-cycle-year:checked ~ .cycle-switch label[for="iz-cycle-year"] {
  background: var(--iz-grad-brand);
  color: var(--iz-on-dark);
  box-shadow: 0 4px 12px -4px rgba(56, 146, 254, 0.55);
}
#iz-cycle-month:focus-visible ~ .cycle-switch label[for="iz-cycle-month"],
#iz-cycle-year:focus-visible ~ .cycle-switch label[for="iz-cycle-year"] {
  outline: 2px solid var(--iz-blue);
  outline-offset: 2px;
}

.cycle-hint {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.05rem 0.4rem;
  border-radius: var(--iz-r-pill);
  background: rgba(56, 146, 254, 0.14);
  color: var(--iz-blue);
  font-size: 0.75rem;
  font-weight: 700;
}
#iz-cycle-year:checked ~ .cycle-switch label[for="iz-cycle-year"] .cycle-hint {
  background: rgba(255, 255, 255, 0.22);
  color: var(--iz-on-dark);
}

/* ตั้งต้น: โชว์รายเดือน · ติ๊ก "รายปี" เมื่อไร ก้อนราคาก็สลับกัน
   ⚠️ ตัวเลือกเป็น `~` (พี่น้องถัดไป) — radio จึงต้องอยู่ก่อน .row ในหน้า
      ถ้าย้าย .cycle-switch ไปไว้ใต้การ์ด สวิตช์จะกดแล้วไม่มีอะไรเกิดขึ้น */
.price-block-year {
  display: none;
}
#iz-cycle-year:checked ~ .row .price-block-month {
  display: none;
}
#iz-cycle-year:checked ~ .row .price-block-year {
  display: block;
}

.plan .list-check {
  flex-grow: 1;
  margin-bottom: var(--iz-s-5);
}
.plan .btn {
  margin-top: auto;
}

/* ── รายการติ๊กถูก ──────────────────────────────────────────────────────── */
.list-check {
  list-style: none;
  padding-left: 0;
  margin: 0;
}
.list-check li {
  position: relative;
  padding-left: var(--iz-s-6);
  margin-bottom: var(--iz-s-3);
  font-size: var(--iz-fs-sm);
  line-height: var(--iz-lh-body);
  color: var(--iz-text-2);
}
.list-check li:last-child {
  margin-bottom: 0;
}
.list-check li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0.28em;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background: var(--iz-grad-tint);
  box-shadow: inset 0 0 0 1px rgba(56, 146, 254, 0.2);
  color: var(--iz-accent);
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1.25rem;
  text-align: center;
}

/* กล่อง "ความโปร่งใสเรื่องราคา" — DESIGN ข้อ ③.4 */
.terms {
  display: grid;
  gap: var(--iz-s-4);
}
.term {
  background: var(--iz-surface);
  border-radius: var(--iz-r);
  padding: var(--iz-s-4);
  box-shadow: var(--iz-ring), var(--iz-sh-1);
}
.term-q {
  font-size: var(--iz-fs-sm);
  font-weight: 600;
  margin-bottom: var(--iz-s-1);
}
.term-a {
  font-size: var(--iz-fs-sm);
  color: var(--iz-text-2);
  margin: 0;
}

/* ═══ ⑪ คำถามพบบ่อย ═════════════════════════════════════════════════════════ */

.faq {
  display: grid;
  gap: var(--iz-s-3);
  max-width: 48rem;
}

.faq-item {
  background: var(--iz-surface);
  border-radius: var(--iz-r);
  box-shadow: var(--iz-ring), var(--iz-sh-1);
  padding: var(--iz-s-4) var(--iz-s-5);
  transition: box-shadow 0.2s ease;
}
.faq-item[open] {
  box-shadow: var(--iz-ring), var(--iz-sh-2);
}

.faq-item summary {
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--iz-s-4);
}
.faq-item summary::-webkit-details-marker {
  display: none;
}

/* ลูกศรทำจากเส้นขอบ 2 ด้าน — ไม่ต้องมีไฟล์ไอคอนและหมุนได้ตอนกางออก */
.faq-item summary::after {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-right: var(--iz-bw-2) solid var(--iz-accent-300);
  border-bottom: var(--iz-bw-2) solid var(--iz-accent-300);
  transform: rotate(45deg);
  flex: 0 0 auto;
  margin-bottom: 0.25rem;
  transition: transform 0.18s ease;
}
.faq-item[open] summary::after {
  transform: rotate(-135deg);
  margin-bottom: -0.15rem;
}

.faq-item p {
  margin: var(--iz-s-3) 0 0;
  font-size: var(--iz-fs-sm);
  color: var(--iz-text-2);
}

/* ═══ ⑫ ฟอร์มสมัคร ══════════════════════════════════════════════════════════ */

.form-label {
  font-size: var(--iz-fs-sm);
  font-weight: 600;
  margin-bottom: var(--iz-s-2);
}
.form-control,
.form-select {
  border-color: var(--iz-line-2);
  border-radius: var(--iz-r-sm);
  padding: var(--iz-s-3);
}
.form-control:focus,
.form-select:focus {
  border-color: var(--iz-accent-300);
  box-shadow: 0 0 0 3px rgba(56, 146, 254, 0.18);
}
.form-text {
  font-size: var(--iz-fs-xs);
  color: var(--iz-text-3);
}

.domain-preview {
  font-family: var(--iz-font-mono);
  font-size: var(--iz-fs-sm);
}

/* ⚠️ honeypot — ต้องอยู่ในฟอร์มจริงและคนต้องมองไม่เห็น
   ห้ามใช้ type="hidden": บอตข้าม hidden แต่กรอกช่องที่ซ่อนด้วย CSS
   ห้ามใช้ display:none เพียว ๆ — screen reader บางตัวจะอ่านข้ามจนคนตาบอด
   กรอกไม่ได้ ใช้การดันออกนอกจอ + aria-hidden แทน (ดู resources/views/signup.php) */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ═══ ⑬ ท้ายหน้า ════════════════════════════════════════════════════════════ */

.site-footer {
  position: relative;
  background-color: var(--iz-ink-900);
  background-image: radial-gradient(
    40rem 20rem at 20% 0%,
    rgba(56, 146, 254, 0.16) 0%,
    rgba(56, 146, 254, 0) 62%
  );
  color: var(--iz-on-dark-2);
  /* ระยะหายใจก่อนถึงแถบเข้ม — สำหรับหน้าที่จบด้วยเนื้อหาบนพื้นสว่าง
     (หน้าบริษัท · หน้าสมัคร · หน้าขอบคุณ · เอกสารกฎหมาย) */
  margin-top: var(--iz-s-9);
}

/* ⚠️ **แต่หน้าที่จบด้วยแถบเข้มต้องไม่มีระยะนั้น** — ระยะ 64px ระหว่างแถบเข้ม 2 อัน
   ไม่ได้อ่านว่า "ช่องหายใจ" แต่อ่านว่า **แถบสว่างที่หลุดมาคั่น** (พื้น body เป็น
   ขาวอมฟ้า) ซึ่งดูเหมือนหน้าเว็บพัง เจ้าของทักเรื่องนี้ 2026-09-05
   ⚠️ ตอนนี้มีหน้าเดียวที่เข้าเงื่อนไข คือหน้าขาย ซึ่งปิดท้ายด้วย CTA พื้นเข้ม
   ⚠️ ตัวคั่นที่ถูกต้องของกรณีนี้คือ `.site-footer::before` (เส้นเรืองแสงที่ขอบบน)
      ซึ่งมีอยู่แล้ว — และระยะห่างของเนื้อหามาจาก `.container py-5` ข้างในอยู่แล้ว
   ⚠️ ใช้ตัวเลือกพี่น้องติดกัน ไม่ใช่คลาสที่ต้องไปเติมในเทมเพลต — หน้าใหม่ที่จบ
      ด้วย .hero จะได้ของถูกเองโดยไม่มีใครต้องจำ */
.hero + .site-footer {
  margin-top: 0;
}
/* เส้นเรืองแสงที่ขอบบน — จบหน้าด้วยจังหวะเดียวกับที่ hero เปิดหน้า */
.site-footer::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: var(--iz-bw);
  background: linear-gradient(
    90deg,
    rgba(56, 146, 254, 0) 0%,
    rgba(61, 196, 253, 0.5) 50%,
    rgba(56, 146, 254, 0) 100%
  );
}
.site-footer .site-brand {
  color: var(--iz-on-dark);
}
.site-footer .site-brand:hover {
  color: var(--iz-cyan-2);
}
.site-footer .site-link {
  color: var(--iz-on-dark-2);
}
.site-footer .site-link:hover {
  color: var(--iz-cyan-2);
}

.footer-head {
  font-size: var(--iz-fs-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--iz-on-dark-3);
  margin-bottom: var(--iz-s-3);
}

.footer-links {
  list-style: none;
  padding-left: 0;
  margin: 0;
  display: grid;
  gap: var(--iz-s-2);
}

/* ── ข้อมูลผู้ให้บริการ (DESIGN ข้อ ③.2) ───────────────────────────────────
 * ⚠️ คนไทยดูตรงนี้จริง เว็บที่ไม่มีที่อยู่ = ไม่น่าเชื่อถือทันที
 *    แต่ห้ามกรอกค่ามั่วไว้ก่อน — config/contact.php ที่ยังว่างจะไม่พ่นบรรทัดนั้นเลย
 */
.provider {
  list-style: none;
  padding-left: 0;
  margin: 0;
  display: grid;
  gap: var(--iz-s-2);
  font-size: var(--iz-fs-sm);
}
.provider dt {
  font-size: var(--iz-fs-xs);
  color: var(--iz-on-dark-3);
}
.provider dd {
  margin: 0 0 var(--iz-s-3);
  color: var(--iz-on-dark-2);
}
.provider dd:last-child {
  margin-bottom: 0;
}
.provider a {
  color: var(--iz-on-dark-2);
  text-decoration: none;
}
.provider a:hover {
  color: var(--iz-cyan-2);
  text-decoration: underline;
}

/* ปุ่ม "เพิ่มเพื่อนใน LINE" ท้ายเว็บ (2026-09-13)
 * ⚠️ #06C755 คือสีเขียวของ LINE เอง — สีเชิงความหมาย "นี่คือ LINE" ห้ามเปลี่ยนตามแบรนด์
 * ⚠️ ตัวหนังสือบนพื้นเขียวนี้ต้องเป็น **ดำเกือบสนิท ไม่ใช่ขาว** — ขาวบน #06C755 วัดได้
 *    2.26:1 ตกเกณฑ์ AA · #04220f บน #06C755 = 7.50:1 · บนสีตอน hover #05b04b = 5.90:1
 *    (ปุ่มทางการของ LINE ใช้ตัวขาว — ที่นี่ปุ่มเล็ก จึงเลือกให้อ่านออกก่อน) */
.btn-line {
  display: inline-flex;
  align-items: center;
  gap: var(--iz-s-2);
  min-height: 44px; /* พื้นที่กดขั้นต่ำบนมือถือ */
  padding: 0 var(--iz-s-4);
  border-radius: 999px;
  background: #06c755;
  color: #04220f;
  font-weight: 600;
  font-size: var(--iz-fs-sm);
  text-decoration: none;
}
.btn-line:hover,
.btn-line:focus-visible {
  background: #05b04b;
  color: #04220f;
}
.btn-line:focus-visible {
  outline: 2px solid var(--iz-cyan-2);
  outline-offset: 2px;
}
.btn-line-icon {
  flex: 0 0 auto;
}

/* ปุ่ม LINE บนแถบบน (2026-09-14) — ขนาดเท่า .btn-sm ข้าง ๆ ไม่ใช่ 44px แบบท้ายเว็บ
 * ⚠️ สูง 31px = เท่า .btn-sm ที่อยู่ข้างกันพอดี (วัดจริง) — สูงไม่เท่ากันแถบบนดูเบี้ยว
 * ⚠️ วงโฟกัสใช้สี accent ไม่ใช่ cyan — แถบบนพื้นขาว cyan-2 บนขาวมองแทบไม่เห็น
 * ⚠️ มือถือเหลือแค่ไอคอน ⇒ padding เท่ากันทุกด้านให้เป็นวงกลม */
/* ตัวหนังสือขาว — เจ้าของเลือกเอง (2026-09-15) · ⚠️ ขาวบน #06C755 = 2.26:1 ต่ำกว่า AA
   (ปุ่มท้ายเว็บยังเป็นตัวเข้มตามเดิม) · เขียนครบ 3 สถานะแทน !important ซึ่งเว็บนี้ห้าม —
   .btn-line:hover มีความจำเพาะสูงกว่า .btn-line-nav จึงต้องระบุสถานะให้ชนะด้วยตัวเอง */
.btn-line-nav,
.btn-line-nav:hover,
.btn-line-nav:focus-visible {
  color: #ffffff;
}
.btn-line-nav {
  min-height: 31px;
  padding: 0 var(--iz-s-3);
  gap: 6px;
  font-size: var(--iz-fs-xs);
  line-height: 1;
}
.btn-line-nav:focus-visible {
  outline-color: var(--iz-accent);
}
@media (max-width: 575.98px) {
  .btn-line-nav {
    width: 31px;
    padding: 0;
    justify-content: center;
  }
}

.footer-bar {
  border-top: var(--iz-bw) solid var(--iz-line-dark);
  margin-top: var(--iz-s-6);
  padding-top: var(--iz-s-4);
  font-size: var(--iz-fs-xs);
  color: var(--iz-on-dark-3);
}

/* ═══ ⑮ เอกสารกฎหมาย (/privacy · /terms) ═══════════════════════════════════
 *
 * · ../pos_carcare/DESIGN_legal_platform.md ข้อ ②
 *
 * ⚠️ หน้ากลุ่มนี้ต่างจากหน้าขายตรงที่ **คนอ่านจริงทีละบรรทัด** ไม่ใช่กวาดตา —
 *    ความกว้างบรรทัดกับระยะห่างจึงสำคัญกว่าลูกเล่น ไม่มีการ์ด ไม่มีเงา ไม่มีสี
 *    เรียกร้องความสนใจ นอกจากกล่องเตือนที่ตั้งใจให้เห็น
 *
 * ⚠️ ใช้โทเคนจากบล็อก ① เท่านั้น ห้ามเขียนค่าดิบลงตรงนี้
 *
 * ⚠️ บล็อกนี้อยู่ **ก่อน** บล็อก ⑭ (มือถือ) ทั้งที่เลขมากกว่า — เพราะบล็อกมือถือ
 *    เป็น media query ที่ต้องอยู่ท้ายไฟล์เสมอเพื่อให้ทับของทุกบล็อกได้
 */

.legal-doc {
  color: var(--iz-text);
  font-size: var(--iz-fs-body);
  line-height: var(--iz-lh-body);
}
.legal-doc h2 {
  font-size: var(--iz-fs-h2);
  line-height: var(--iz-lh-head);
  margin: var(--iz-s-8) 0 var(--iz-s-4);
  padding-top: var(--iz-s-2);
}
.legal-doc h2:first-of-type {
  margin-top: var(--iz-s-2);
}
.legal-doc h3 {
  font-size: var(--iz-fs-h3);
  margin: var(--iz-s-6) 0 var(--iz-s-3);
}
.legal-doc p {
  margin-bottom: var(--iz-s-4);
}
.legal-doc ul,
.legal-doc ol {
  margin-bottom: var(--iz-s-4);
  padding-left: var(--iz-s-5);
}
.legal-doc li {
  margin-bottom: var(--iz-s-2);
}
.legal-doc code {
  font-family: var(--iz-font-mono);
  font-size: var(--iz-fs-xs);
  color: var(--iz-text-2);
}

/* กล่องข้อความสำคัญที่ไม่ใช่คำเตือน — ใช้บอกขอบเขตของเอกสาร */
.legal-note {
  background: var(--iz-accent-050);
  border-left: var(--iz-bw-2) solid var(--iz-accent-300);
  border-radius: var(--iz-r-sm);
  padding: var(--iz-s-4);
  margin-bottom: var(--iz-s-5);
  font-size: var(--iz-fs-sm);
}
.legal-note ul {
  margin-bottom: 0;
}

/* ⚠️ ตารางในเอกสารมักกว้างเกินจอมือถือ — ต้องเลื่อนได้ในกล่องของตัวเอง
   ไม่ใช่ดันให้ทั้งหน้าเลื่อนแนวนอน (html,body มี overflow-x:hidden อยู่แล้ว
   ซึ่งจะ "ตัด" คอลัมน์ท้ายหายไปเงียบ ๆ แทนที่จะให้เลื่อนดู) */
.legal-table {
  display: block;
  position: relative; /* เหตุผลเดียวกับ .table-compare-wrap */
  overflow-x: auto;
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--iz-s-5);
  font-size: var(--iz-fs-sm);
}
.legal-table th,
.legal-table td {
  border: var(--iz-bw) solid var(--iz-line);
  padding: var(--iz-s-3);
  text-align: left;
  vertical-align: top;
  min-width: 8rem;
}
.legal-table thead th {
  background: var(--iz-surface-2);
  font-weight: 600;
}

.legal-dl {
  display: grid;
  gap: var(--iz-s-2);
  margin-bottom: var(--iz-s-5);
}
.legal-dl dt {
  font-size: var(--iz-fs-xs);
  color: var(--iz-text-3);
}
.legal-dl dd {
  margin: 0 0 var(--iz-s-3);
}

.legal-rule {
  margin: var(--iz-s-9) 0 var(--iz-s-6);
  border-color: var(--iz-line-2);
}

.legal-version {
  margin-top: var(--iz-s-8);
  padding-top: var(--iz-s-4);
  border-top: var(--iz-bw) solid var(--iz-line);
  font-size: var(--iz-fs-sm);
  color: var(--iz-text-3);
}

/* ═══ ⑯ สไลด์ภาพหน้าจอ (ใช้ร่วมกัน 2 ชุด: มือถือ + เดสก์ท็อป) ═══════════════
 *
 * มาร์กอัปอยู่ที่ `resources/views/partials/deck.php` (ไฟล์เดียว 2 ชุด)
 * เจ้าของสั่งทำสไลด์มือถือ 2026-09-05 แล้วสั่งให้ฝั่งพนักงานทำแบบเดียวกันวันเดียวกัน
 *
 * ⚠️ **CSS ล้วน ไม่มี JavaScript** — หน้าขายห้ามมี `<script>` เลย (CSP
 *    `default-src 'self'` · ชุดทดสอบ `iz_site_test.php` ยิงข้อนี้ตรง ๆ)
 *    กลไกเดียวกับสวิตช์ รายเดือน/รายปี ในบล็อก ⑩: radio ที่ซ่อนไว้ + `~`
 *
 * ⚠️ **จำนวนใบถูกตรึงไว้ที่ 6** เพราะกฎ `#…-N:checked ~ …` ต้องเขียนทีละใบ
 *    (CSS เลือก "ใบที่ N" จากตัวแปรไม่ได้) เนื้อหาส่งมาเกิน 6 partial ตัดทิ้ง
 *    — อยากได้ใบที่ 7 ต้องมาเพิ่มกฎ 4 ชุดข้างล่างนี้ด้วย
 *
 * ⚠️ **กฎทุกข้อเขียน id 2 ตระกูลคู่กันเสมอ** (`iz-screen-N` = มือถือ ·
 *    `iz-shot-N` = เดสก์ท็อป) แยกเขียนคนละชุดเมื่อไรจะมีชุดหนึ่งพังเงียบ ๆ
 *    แล้วหาเจอยากกว่าพังทั้งคู่มาก · เพิ่มสไลด์ชุดที่ 3 = เติม id ตระกูลใหม่
 *    เข้าไปในทุกกลุ่มตัวเลือกข้างล่าง
 *
 * ── เลขที่ต้องเข้าใจก่อนแก้ ────────────────────────────────────────────────
 *   --dw    = ความกว้างของ "เครื่อง" หนึ่งใบ
 *   --dscale = สัดส่วนย่อของใบที่ไม่ได้ถูกเลือก
 *   --dstep = ระยะจากกึ่งกลางใบหนึ่งไปกึ่งกลางใบถัดไป
 *
 * ⚠️ `--dstep` ต้อง = `--dw × --dscale` **เสมอ** ไม่ใช่เลขสุ่ม: ใบที่ไม่ได้เลือก
 *    จึงเรียงชิดกันพอดีโดย **ไม่ทับกันเอง** มีแค่ใบที่ถูกเลือก (ขยายกลับเป็น 1)
 *    ที่ทับเพื่อนสองข้าง ⇒ ต้องการ z-index แค่ค่าเดียว ถ้าเปลี่ยนสัดส่วนย่อแล้ว
 *    ไม่เปลี่ยน --dstep ตาม ใบที่อยู่ไกลจะไปทับใบที่อยู่ใกล้กลาง (ลำดับ DOM ชนะ)
 *    แล้วกองซ้อนจะดูเหมือนวางผิดด้าน
 *
 * ⚠️ รางเลื่อนมี `padding-inline-start: 50%` แล้วเลื่อนด้วย `-(k + .5) × dstep`
 *    สูตรนี้ **ไม่ขึ้นกับจำนวนใบ** จึงเพิ่ม/ลดใบได้โดยไม่ต้องคิดเลขใหม่
 *    (ถ้าจัดกึ่งกลางรางด้วย justify-content แทน สูตรจะมี N อยู่ในนั้นและต้อง
 *     แก้ทุกบรรทัดทุกครั้งที่เนื้อหาเพิ่มใบ)
 */

/* ── ผิวของแถบ: มือถือ (pshow) กับ เดสก์ท็อป (dshow) ───────────────────────
   ⚠️ 2 แถบนี้อยู่ห่างกันไม่กี่จอ **จึงต้องไม่เหมือนกันเป๊ะ** ไม่งั้นอ่านเหมือน
      แถบเดียวที่ยาวผิดปกติ (เหตุผลเดียวกับที่ .problem ไม่ใส่ไอคอน) —
      ตัวแยกคือทิศของแสงเหนือ ไม่ใช่คนละสี ซึ่งจะกลายเป็น 2 แบรนด์ในหน้าเดียว */
.pshow,
.dshow {
  position: relative;
  overflow: hidden;
  background-color: var(--iz-ink-900);
  background-repeat: no-repeat;
  color: var(--iz-on-dark);
}
.pshow {
  background-image:
    radial-gradient(
      50rem 26rem at 78% -10%,
      rgba(61, 196, 253, 0.26) 0%,
      rgba(61, 196, 253, 0) 60%
    ),
    radial-gradient(
      44rem 26rem at 16% 110%,
      rgba(56, 146, 254, 0.24) 0%,
      rgba(56, 146, 254, 0) 62%
    ),
    linear-gradient(172deg, var(--iz-ink-800) 0%, var(--iz-ink-900) 100%);
}
.dshow {
  background-image:
    radial-gradient(
      52rem 28rem at 18% -12%,
      rgba(56, 146, 254, 0.26) 0%,
      rgba(56, 146, 254, 0) 60%
    ),
    radial-gradient(
      42rem 26rem at 86% 108%,
      rgba(61, 196, 253, 0.22) 0%,
      rgba(61, 196, 253, 0) 62%
    ),
    linear-gradient(188deg, var(--iz-ink-800) 0%, var(--iz-ink-900) 100%);
}

/* เส้นเรืองแสงหัว-ท้าย — จังหวะรอยต่อชุดเดียวกับ hero กับท้ายหน้า */
.pshow::before,
.pshow::after,
.dshow::before,
.dshow::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: var(--iz-bw);
  background: linear-gradient(
    90deg,
    rgba(56, 146, 254, 0) 0%,
    rgba(61, 196, 253, 0.5) 50%,
    rgba(56, 146, 254, 0) 100%
  );
  pointer-events: none;
}
.pshow::before,
.dshow::before {
  top: 0;
}
.pshow::after,
.dshow::after {
  bottom: 0;
}
.pshow > *,
.dshow > * {
  position: relative;
  z-index: 1;
}

.izdeck-title {
  color: var(--iz-on-dark);
}
.izdeck-sub {
  color: var(--iz-on-dark-2);
}

.izdeck-note {
  margin: var(--iz-s-6) 0 0;
  text-align: center;
  font-size: var(--iz-fs-xs);
  color: var(--iz-on-dark-3);
}

/* ── ขนาดต่อชุด ───────────────────────────────────────────────────────────
   ⚠️ เดสก์ท็อปต้องกว้างกว่ามาก — ภาพ 1600×1029 ที่ย่อเหลือเท่าจอมือถือคือ
      ตัวหนังสือในภาพเล็กจนอ่านไม่ออก แล้วภาพก็ไม่ได้ทำหน้าที่อะไรเลย */
.izdeck {
  position: relative;
  --dscale: 0.84;
  --dstep: calc(var(--dw) * var(--dscale));
}
.izdeck-phone {
  --dw: clamp(11rem, 33vw, 16rem);
}
.izdeck-win {
  --dw: clamp(17rem, 62vw, 46rem);
}

/* ── เวที ────────────────────────────────────────────────────────────────────
 * ⚠️ ใช้ mask ไม่ใช่ overflow:hidden — เครื่องมีแสงฟุ้งรอบตัว overflow:hidden
 *    จะตัดแสงบน-ล่างเป็นเส้นตรงคม ๆ ส่วน mask ไล่จางเฉพาะซ้าย-ขวา (ด้านที่
 *    ต้องตัดจริง) แล้วปล่อยบน-ล่างไว้
 */
.izdeck-stage {
  display: flex;
  justify-content: flex-start;
  padding-block: var(--iz-s-5);
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0%,
    #000 9%,
    #000 91%,
    transparent 100%
  );
  mask-image: linear-gradient(
    90deg,
    transparent 0%,
    #000 9%,
    #000 91%,
    transparent 100%
  );
}

.izdeck-track {
  display: flex;
  flex: 0 0 auto;
  padding-inline-start: 50%;
  transform: translateX(calc(var(--dstep) * -0.5));
  /* ⚠️ การไถ (transition) อยู่ท้ายไฟล์ในบล็อก no-preference — ไม่ใช่ที่นี่
     คนที่ขอลดการเคลื่อนไหวต้องได้สไลด์ที่ "สลับใบทันที" ไม่ใช่ไถผ่านทุกใบ */
}

.izdeck-item {
  --side: 0; /* -1 = อยู่ขวาของใบที่เลือก · 1 = อยู่ซ้าย · 0 = ใบที่เลือก */
  flex: 0 0 var(--dw);
  width: var(--dw);
  margin-inline: calc((var(--dstep) - var(--dw)) / 2);
  cursor: pointer;
  /* ⚠️ มุมเอียงกับการย่อเป็น **สถานะนิ่ง** ไม่ใช่การเคลื่อนไหว จึงอยู่ที่นี่เสมอ
     ถ้าย้ายไป no-preference ทุกใบจะกลับมาเต็มขนาดแล้วซ้อนทับกันมั่ว
     (ระยะเรียง --dstep คำนวณจากขนาด **ที่ย่อแล้ว**) */
  transform: perspective(1600px) rotateY(calc(var(--side) * 26deg))
    scale(var(--dscale));
  opacity: 0.56;
  filter: saturate(0.62) brightness(0.78);
}

/* ── กรอบมือถือ ─────────────────────────────────────────────────────────────
   ⚠️ เงาต้อง 3 ชั้น: เส้นสว่างในสุด (ขอบเงา) + เงาดำไกล ๆ (น้ำหนัก) +
      แสงฟุ้งสีแบรนด์ (ให้ลอยออกจากพื้นเข้ม) ขาดชั้นไหนก็ดูเป็นสี่เหลี่ยมแบน */
.izphone-frame {
  display: block;
  padding: 0.34rem;
  border-radius: 1.5rem;
  background: linear-gradient(
    152deg,
    #6b7c92 0%,
    #18212e 20%,
    #080d14 48%,
    #3a4757 74%,
    #0a1019 100%
  );
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.12),
    inset 0 1.5px 2px rgba(255, 255, 255, 0.22),
    0 34px 60px -22px rgba(0, 0, 0, 0.85),
    0 0 70px -26px rgba(61, 196, 253, 0.45);
}
.izphone-glass {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: 1.18rem;
  background: #000;
}
.izphone-glass img {
  display: block;
  width: 100%;
  height: auto;
}

/* แถบสถานะ — เป็นของตัวเครื่อง ไม่ใช่ของระบบ (เทียบเท่า .izwin-bar ของเดสก์ท็อป)
   ⚠️ พื้นดำเท่ากับพื้นพอร์ทัล จึงต่อเนื่องกับรูปโดยไม่มีเส้นคั่นให้เห็น */
.izphone-status {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--iz-s-2);
  padding: 0.5rem 0.95rem 0.3rem;
  background: #000;
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.62rem;
  font-weight: 600;
  line-height: 1;
}
.izphone-time {
  letter-spacing: 0.01em;
}
.izphone-sig {
  width: 2.3rem;
  height: auto;
  display: block;
}

/* รอยบาก — วางกลางแถบสถานะ ไม่ใช่ลอยทับรูป (หัวพอร์ทัลมีชื่อร้านอยู่บรรทัดบนสุด) */
.izphone-island {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 30%;
  height: 0.95rem;
  border-radius: var(--iz-r-pill);
  background: #000;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07);
}

/* ── กรอบหน้าต่างเบราว์เซอร์ ─────────────────────────────────────────────────
   ⚠️ **ไม่ใช้ `.shot` เดิมซ้ำ** ทั้งที่หน้าตาใกล้กัน — `.shot` เป็นการ์ดพื้นขาว
      สำหรับแถบพื้นสว่าง ส่วนอันนี้ต้องลอยอยู่บนพื้นเข้มและถูกย่อ/เอียงใน 3 มิติ
      การยัดทั้ง 2 บทบาทลงคลาสเดียวแปลว่าแก้ที่หนึ่งพังอีกที่หนึ่งเสมอ */
.izwin-frame {
  display: block;
  overflow: hidden;
  border-radius: var(--iz-r-lg);
  background: var(--iz-ink-800);
  box-shadow:
    inset 0 0 0 1px rgba(124, 237, 252, 0.18),
    0 34px 64px -22px rgba(0, 0, 0, 0.85),
    0 0 80px -28px rgba(56, 146, 254, 0.5);
}
.izwin-bar {
  display: flex;
  align-items: center;
  gap: var(--iz-s-2);
  padding: 0.55rem 0.75rem;
  background: rgba(255, 255, 255, 0.06);
  border-bottom: var(--iz-bw) solid var(--iz-line-dark);
}
.izwin-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
}
.izwin-glass {
  display: block;
  background: #fff;
}
.izwin-glass img {
  display: block;
  width: 100%;
  height: auto;
}

/* ── แถบเลือกใบ ─────────────────────────────────────────────────────────── */
.izdeck-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--iz-s-2);
  margin-top: var(--iz-s-5);
}
.izdeck-tab {
  cursor: pointer;
  user-select: none;
  padding: 0.45rem 1rem;
  border-radius: var(--iz-r-pill);
  font-size: var(--iz-fs-xs);
  font-weight: 600;
  line-height: 1.3;
  color: var(--iz-on-dark-2);
  background: rgba(124, 237, 252, 0.07);
  box-shadow: inset 0 0 0 1px rgba(124, 237, 252, 0.2);
  transition:
    background 0.2s ease,
    color 0.2s ease,
    box-shadow 0.2s ease;
}
.izdeck-tab:hover {
  color: var(--iz-on-dark);
  background: rgba(124, 237, 252, 0.15);
}

/* ── คำบรรยายที่สลับตามใบ ───────────────────────────────────────────────── */
.izdeck-copy {
  max-width: 34rem;
  margin: var(--iz-s-5) auto 0;
  text-align: center;
  /* ⚠️ กันหน้ากระตุกตอนสลับใบ: คำบรรยายแต่ละใบยาวไม่เท่ากัน ถ้าปล่อยให้กล่อง
     หดตามข้อความ ทุกอย่างใต้ section จะขยับขึ้น-ลงทุกครั้งที่กด
     (ตัวเลขมาจากการวัดจริง — ดูบล็อก ⑭ ท้ายไฟล์) */
  min-height: 6.5rem;
}
.izdeck-copy-item {
  display: none;
}
.izdeck-copy-title {
  font-size: var(--iz-fs-h3);
  font-weight: 600;
  color: var(--iz-on-dark);
  margin-bottom: var(--iz-s-2);
}
.izdeck-copy-body {
  font-size: var(--iz-fs-sm);
  color: var(--iz-on-dark-2);
  margin: 0;
}

/* ── กฎต่อใบ · 4 ชุด × 6 ใบ × 2 ตระกูล id ──────────────────────────────────
 * ⚠️ เพิ่มใบที่ 7 ต้องเพิ่มครบทั้ง 4 ชุด ขาดชุดไหนก็เจ๊งคนละแบบ:
 *      ① ราง — ไม่เลื่อนไปหาใบนั้น    ② ใบที่เลือก — ไม่ขยาย/ไม่ขึ้นหน้า
 *      ③ ซ้าย/ขวา — เอียงผิดด้าน      ④ แท็บ+คำบรรยาย — ไม่มีอะไรเปลี่ยน
 */

/* ① ราง: เลื่อนให้ใบที่ k (นับจาก 0) มาอยู่กึ่งกลางเวที */
#iz-screen-1:checked ~ .izdeck-stage .izdeck-track,
#iz-shot-1:checked ~ .izdeck-stage .izdeck-track {
  transform: translateX(calc(var(--dstep) * -0.5));
}
#iz-screen-2:checked ~ .izdeck-stage .izdeck-track,
#iz-shot-2:checked ~ .izdeck-stage .izdeck-track {
  transform: translateX(calc(var(--dstep) * -1.5));
}
#iz-screen-3:checked ~ .izdeck-stage .izdeck-track,
#iz-shot-3:checked ~ .izdeck-stage .izdeck-track {
  transform: translateX(calc(var(--dstep) * -2.5));
}
#iz-screen-4:checked ~ .izdeck-stage .izdeck-track,
#iz-shot-4:checked ~ .izdeck-stage .izdeck-track {
  transform: translateX(calc(var(--dstep) * -3.5));
}
#iz-screen-5:checked ~ .izdeck-stage .izdeck-track,
#iz-shot-5:checked ~ .izdeck-stage .izdeck-track {
  transform: translateX(calc(var(--dstep) * -4.5));
}
#iz-screen-6:checked ~ .izdeck-stage .izdeck-track,
#iz-shot-6:checked ~ .izdeck-stage .izdeck-track {
  transform: translateX(calc(var(--dstep) * -5.5));
}

/* ② ใบที่เลือก: กลับมาเต็มขนาด สีเต็ม และอยู่หน้าสุด */
#iz-screen-1:checked ~ .izdeck-stage .izdeck-item:nth-child(1),
#iz-screen-2:checked ~ .izdeck-stage .izdeck-item:nth-child(2),
#iz-screen-3:checked ~ .izdeck-stage .izdeck-item:nth-child(3),
#iz-screen-4:checked ~ .izdeck-stage .izdeck-item:nth-child(4),
#iz-screen-5:checked ~ .izdeck-stage .izdeck-item:nth-child(5),
#iz-screen-6:checked ~ .izdeck-stage .izdeck-item:nth-child(6),
#iz-shot-1:checked ~ .izdeck-stage .izdeck-item:nth-child(1),
#iz-shot-2:checked ~ .izdeck-stage .izdeck-item:nth-child(2),
#iz-shot-3:checked ~ .izdeck-stage .izdeck-item:nth-child(3),
#iz-shot-4:checked ~ .izdeck-stage .izdeck-item:nth-child(4),
#iz-shot-5:checked ~ .izdeck-stage .izdeck-item:nth-child(5),
#iz-shot-6:checked ~ .izdeck-stage .izdeck-item:nth-child(6) {
  transform: perspective(1600px) rotateY(0) scale(1);
  opacity: 1;
  filter: none;
  position: relative;
  z-index: 2;
  cursor: default;
}

/* ③ ใบที่อยู่ซ้าย/ขวาของใบที่เลือก — ตัดสินด้วยช่วง nth-child ไม่ใช่กฎรายคู่
      (รายคู่คือ 36 กฎต่อชุด · แบบนี้ 12 กฎ และเพิ่มใบใหม่ยังเป็นชุดละ 2 บรรทัด) */
#iz-screen-2:checked ~ .izdeck-stage .izdeck-item:nth-child(-n + 1),
#iz-screen-3:checked ~ .izdeck-stage .izdeck-item:nth-child(-n + 2),
#iz-screen-4:checked ~ .izdeck-stage .izdeck-item:nth-child(-n + 3),
#iz-screen-5:checked ~ .izdeck-stage .izdeck-item:nth-child(-n + 4),
#iz-screen-6:checked ~ .izdeck-stage .izdeck-item:nth-child(-n + 5),
#iz-shot-2:checked ~ .izdeck-stage .izdeck-item:nth-child(-n + 1),
#iz-shot-3:checked ~ .izdeck-stage .izdeck-item:nth-child(-n + 2),
#iz-shot-4:checked ~ .izdeck-stage .izdeck-item:nth-child(-n + 3),
#iz-shot-5:checked ~ .izdeck-stage .izdeck-item:nth-child(-n + 4),
#iz-shot-6:checked ~ .izdeck-stage .izdeck-item:nth-child(-n + 5) {
  --side: 1;
}

#iz-screen-1:checked ~ .izdeck-stage .izdeck-item:nth-child(n + 2),
#iz-screen-2:checked ~ .izdeck-stage .izdeck-item:nth-child(n + 3),
#iz-screen-3:checked ~ .izdeck-stage .izdeck-item:nth-child(n + 4),
#iz-screen-4:checked ~ .izdeck-stage .izdeck-item:nth-child(n + 5),
#iz-screen-5:checked ~ .izdeck-stage .izdeck-item:nth-child(n + 6),
#iz-shot-1:checked ~ .izdeck-stage .izdeck-item:nth-child(n + 2),
#iz-shot-2:checked ~ .izdeck-stage .izdeck-item:nth-child(n + 3),
#iz-shot-3:checked ~ .izdeck-stage .izdeck-item:nth-child(n + 4),
#iz-shot-4:checked ~ .izdeck-stage .izdeck-item:nth-child(n + 5),
#iz-shot-5:checked ~ .izdeck-stage .izdeck-item:nth-child(n + 6) {
  --side: -1;
}

/* ④ แท็บที่ถูกเลือก + คำบรรยายของใบนั้น */
#iz-screen-1:checked ~ .izdeck-tabs .izdeck-tab:nth-child(1),
#iz-screen-2:checked ~ .izdeck-tabs .izdeck-tab:nth-child(2),
#iz-screen-3:checked ~ .izdeck-tabs .izdeck-tab:nth-child(3),
#iz-screen-4:checked ~ .izdeck-tabs .izdeck-tab:nth-child(4),
#iz-screen-5:checked ~ .izdeck-tabs .izdeck-tab:nth-child(5),
#iz-screen-6:checked ~ .izdeck-tabs .izdeck-tab:nth-child(6),
#iz-shot-1:checked ~ .izdeck-tabs .izdeck-tab:nth-child(1),
#iz-shot-2:checked ~ .izdeck-tabs .izdeck-tab:nth-child(2),
#iz-shot-3:checked ~ .izdeck-tabs .izdeck-tab:nth-child(3),
#iz-shot-4:checked ~ .izdeck-tabs .izdeck-tab:nth-child(4),
#iz-shot-5:checked ~ .izdeck-tabs .izdeck-tab:nth-child(5),
#iz-shot-6:checked ~ .izdeck-tabs .izdeck-tab:nth-child(6) {
  background: var(--iz-grad-brand);
  color: var(--iz-on-dark);
  box-shadow: 0 6px 16px -6px rgba(56, 146, 254, 0.75);
}

#iz-screen-1:checked ~ .izdeck-copy .izdeck-copy-item:nth-child(1),
#iz-screen-2:checked ~ .izdeck-copy .izdeck-copy-item:nth-child(2),
#iz-screen-3:checked ~ .izdeck-copy .izdeck-copy-item:nth-child(3),
#iz-screen-4:checked ~ .izdeck-copy .izdeck-copy-item:nth-child(4),
#iz-screen-5:checked ~ .izdeck-copy .izdeck-copy-item:nth-child(5),
#iz-screen-6:checked ~ .izdeck-copy .izdeck-copy-item:nth-child(6),
#iz-shot-1:checked ~ .izdeck-copy .izdeck-copy-item:nth-child(1),
#iz-shot-2:checked ~ .izdeck-copy .izdeck-copy-item:nth-child(2),
#iz-shot-3:checked ~ .izdeck-copy .izdeck-copy-item:nth-child(3),
#iz-shot-4:checked ~ .izdeck-copy .izdeck-copy-item:nth-child(4),
#iz-shot-5:checked ~ .izdeck-copy .izdeck-copy-item:nth-child(5),
#iz-shot-6:checked ~ .izdeck-copy .izdeck-copy-item:nth-child(6) {
  /* ⚠️ ที่นี่ให้แค่ `display` — อนิเมชันเฟดเข้าไปประกาศไว้ที่ `.izdeck-copy-item`
     ในบล็อก no-preference ท้ายไฟล์ ประกาศตรงนี้จะทับด้วย media query ไม่ได้
     (ความจำเพาะสูงเกิน) แล้วต้องไปพึ่ง !important ซึ่งเว็บนี้ห้าม
     อนิเมชันเริ่มเองตอน display เปลี่ยนจาก none เป็น block */
  display: block;
}

/* ⚠️ ต้องมีกรอบโฟกัสด้วย — radio ถูกซ่อนด้วย .visually-hidden ซึ่งยังโฟกัสได้
   คนที่เลื่อนด้วยคีย์บอร์ด (ลูกศรซ้าย-ขวาในกลุ่ม radio) ต้องเห็นว่าตัวเองอยู่ใบไหน */
#iz-screen-1:focus-visible ~ .izdeck-tabs .izdeck-tab:nth-child(1),
#iz-screen-2:focus-visible ~ .izdeck-tabs .izdeck-tab:nth-child(2),
#iz-screen-3:focus-visible ~ .izdeck-tabs .izdeck-tab:nth-child(3),
#iz-screen-4:focus-visible ~ .izdeck-tabs .izdeck-tab:nth-child(4),
#iz-screen-5:focus-visible ~ .izdeck-tabs .izdeck-tab:nth-child(5),
#iz-screen-6:focus-visible ~ .izdeck-tabs .izdeck-tab:nth-child(6),
#iz-shot-1:focus-visible ~ .izdeck-tabs .izdeck-tab:nth-child(1),
#iz-shot-2:focus-visible ~ .izdeck-tabs .izdeck-tab:nth-child(2),
#iz-shot-3:focus-visible ~ .izdeck-tabs .izdeck-tab:nth-child(3),
#iz-shot-4:focus-visible ~ .izdeck-tabs .izdeck-tab:nth-child(4),
#iz-shot-5:focus-visible ~ .izdeck-tabs .izdeck-tab:nth-child(5),
#iz-shot-6:focus-visible ~ .izdeck-tabs .izdeck-tab:nth-child(6) {
  outline: var(--iz-bw-2) solid var(--iz-cyan-2);
  outline-offset: 3px;
}

/* ═══ ⑱ hero แบบเต็มยศ + โทน "หรูหรา" ทั้งหน้า ═════════════════════════════
 *
 * เจ้าของสั่ง 2026-09-05 (รอบที่ 2): *"section hero ทำให้ดูหรูหรา ทันสมัยกว่านี้
 * ... ที่ผมเน้นย้ำสไตล์หรูหราทันสมัยตรงนี้อยากให้ทำทั้งหน้าเลย"*
 *
 * ⚠️ **ของที่ขยับเองทั้งหมดอยู่ท้ายไฟล์ในบล็อก no-preference** ที่นี่มีแต่รูปทรง
 *    สี และเลย์เอาต์ — เหตุผลเขียนไว้หัวบล็อก ⑰
 *
 * ⚠️ กติกาที่ยังคุมอยู่: ไม่มีไลบรารี · ไม่มีไฟล์รูปเพิ่ม (ทุกอย่างเป็น gradient)
 *    · ไม่มี `!important` · ห้ามแตะโทเคนในบล็อก ① (สีทุกสีที่นี่อ้างโทเคน)
 */

/* ── ①⑧.1 แสงเหนือ 3 ก้อนใน hero ───────────────────────────────────────────
 * ⚠️ **ต้องเป็น 3 ธาตุแยกกัน ไม่ใช่ 3 ชั้น background บนธาตุเดียว** —
 *    `background-position` ขยับได้ทีเดียวทุกชั้นพร้อมกัน ก้อนแสงจะเลื่อนพร้อมกัน
 *    เป็นแพเดียว ซึ่งตาอ่านออกทันทีว่าเป็น "ภาพเลื่อน" ไม่ใช่ "แสงลอย"
 * ⚠️ `filter: blur()` สร้าง stacking context ⇒ ต้อง z-index ต่ำกว่าเนื้อหา
 *    (`.hero > *` ตั้ง z-index: 1 ไว้แล้วในบล็อก ⑥)
 */
.hero-aura {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.hero-aura span {
  position: absolute;
  display: block;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.5;
}
.hero-aura span:nth-child(1) {
  width: 34rem;
  height: 34rem;
  top: -12rem;
  right: -8rem;
  background: radial-gradient(
    circle,
    rgba(61, 196, 253, 0.55) 0%,
    rgba(61, 196, 253, 0) 70%
  );
}
.hero-aura span:nth-child(2) {
  width: 30rem;
  height: 30rem;
  bottom: -14rem;
  left: -10rem;
  background: radial-gradient(
    circle,
    rgba(56, 146, 254, 0.5) 0%,
    rgba(56, 146, 254, 0) 70%
  );
}
.hero-aura span:nth-child(3) {
  width: 22rem;
  height: 22rem;
  top: 30%;
  left: 42%;
  background: radial-gradient(
    circle,
    rgba(124, 237, 252, 0.3) 0%,
    rgba(124, 237, 252, 0) 70%
  );
}

/* ── ⑱.2 องค์ประกอบภาพใน hero ──────────────────────────────────────────────
 * ⚠️ **perspective กับ transform ต้องอยู่คนละธาตุ** — วางบนธาตุเดียวกัน
 *    perspective จะคิดจากจุดกึ่งกลางของตัวมันเอง แล้วมุมเอียงจะดูแบนเหมือน
 *    แค่ย่อด้านหนึ่ง ไม่ใช่หมุนในพื้นที่ 3 มิติ
 */
.hero-stage {
  position: relative;
  perspective: 2000px;
  perspective-origin: 60% 50%;
}

/* แผ่นแสงใต้องค์ประกอบ — ให้ทั้งก้อน "ลอย" แทนที่จะแปะอยู่บนพื้น */
.hero-glowpad {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: -6%;
  height: 42%;
  border-radius: 50%;
  background: radial-gradient(
    ellipse at center,
    rgba(56, 146, 254, 0.5) 0%,
    rgba(56, 146, 254, 0) 70%
  );
  filter: blur(38px);
  pointer-events: none;
}

/* หน้าต่างระบบ — เอียงในมุมมอง 3 มิติแบบ **คงที่**
 *
 * ⚠️ **เคยลองทำเป็น "เอียงแล้วหันตรงตามการเลื่อนหน้า" แล้วถอยออก 2026-09-05**
 *    เขียนเสร็จ ดูโค้ดแล้วถูกทุกอย่าง — `animationName` ถูก · `getAnimations()`
 *    เห็นอนิเมชัน · ไทม์ไลน์เดินจริง — แต่ `progress` **ค้างที่ 0 ทุกตำแหน่ง
 *    การเลื่อน** ลองครบทั้ง `entry` · `cover` · `exit` และทั้ง `view()` /
 *    `view(block)` ผลเหมือนกันหมด ⇒ หน้าต่างไม่ขยับเลยสักองศา
 *    ⚠️ และตอนที่ยังใช้ช่วง `entry 100% cover 42%` (ช่วง**กลับหัว** เพราะ
 *    entry 100% = H/(H+V) ซึ่งมากกว่า cover 42% ที่ 1440×900) มันให้ผล
 *    **ตรงข้ามกันคนละขนาดจอ**: เดสก์ท็อปตรงตลอด · มือถือเอียงค้างตลอดกาล
 *    บั๊กเดียวกัน 2 อาการ และไม่มีอะไรฟ้องทั้งคู่
 *
 *    ⇒ hero คือ LCP และเป็นส่วนที่สำคัญที่สุดของหน้า **ไม่ใช่ที่ทางของกลไกที่
 *    พิสูจน์ไม่ได้ว่าทำงาน** มุมเอียงคงที่ให้ผลลัพธ์ทางสายตาเกือบเท่ากัน
 *    ได้ทุกเบราว์เซอร์ ไม่มีเงื่อนไข และไม่มีอะไรให้พังเงียบ ๆ
 *    ⚠️ ถ้าวันไหนจะรื้อกลับไปทำแบบผูก scroll ต้อง **วัด `progress` จริงในเบราว์เซอร์
 *    ก่อน** ไม่ใช่ดูว่าโค้ดอ่านแล้วถูก — ครั้งนี้โค้ดอ่านแล้วถูกทุกบรรทัด
 *
 * ⚠️ มุมต้องน้อย (8°/3°) — ภาพนี้คือ "หลักฐาน" ที่คนต้องอ่านตัวเลขในนั้นได้
 *    เอียงมากกว่านี้ได้ความหรูแลกกับการอ่านไม่ออก ซึ่งเสียมากกว่าได้
 */
.hero-win {
  position: relative;
  z-index: 1;
  transform: perspective(2200px) rotateY(-8deg) rotateX(3deg);
  transform-style: preserve-3d;
}

/* จอมือถือลอยทับมุมล่างซ้าย
   ⚠️ ซ่อนที่จอแคบ (< 992px): hero เรียงลงเป็นคอลัมน์เดียว ภาพหลักแคบลงจน
      จอมือถือที่ทับอยู่กินพื้นที่ภาพหลักไปเกินครึ่ง แล้วทั้งคู่อ่านไม่ออกทั้งคู่ */
.hero-phone {
  position: absolute;
  z-index: 2;
  left: -3%;
  bottom: -12%;
  width: 26%;
  min-width: 7.5rem;
  pointer-events: none;
  display: none;
}

/* ── ⑱.3 ปุ่มหลัก: วงแหวนเรืองแสง ─────────────────────────────────────────
   ⚠️ ใช้ box-shadow ไม่ใช่ธาตุเพิ่ม — ปุ่มมี ::after เป็นแถบแสงกวาดอยู่แล้ว */
.hero .btn-primary {
  box-shadow:
    var(--iz-sh-accent),
    0 0 0 0 rgba(56, 146, 254, 0.45);
}

/* ── ⑱.4 โทน "หรูหรา" ของทั้งหน้า ──────────────────────────────────────────
 *
 * ⚠️ ทำด้วย **ขอบไล่สี + แสงฟุ้ง** ไม่ใช่การเพิ่มสีใหม่ — DESIGN ข้อ ② ห้าม
 *    gradient ม่วง-ฟ้าแบบเทมเพลตสำเร็จรูป ทุกค่าที่นี่มาจากโทเคนน้ำเงิน/ฟ้าเดิม
 */

/* หัวข้อ section: เส้นไล่สีสั้น ๆ ใต้หัวเรื่อง — ให้จังหวะโดยไม่ต้องเพิ่มสี
   ⚠️ ใช้ ::after ของ .section-title ซึ่งยังว่างอยู่ (อย่าไปแย่ง ::before ของ
      .problem หรือ .flow-step ที่ถูกใช้ไปแล้ว) */
.section-title {
  position: relative;
}
.section-head-center .section-title::after {
  margin-inline: auto;
}
.section-title::after {
  content: "";
  display: block;
  width: 3rem;
  height: var(--iz-bw-2);
  margin-top: var(--iz-s-3);
  border-radius: var(--iz-r-pill);
  background: var(--iz-grad-brand);
  transform-origin: left center;
}
.section-head-center .section-title::after {
  transform-origin: center;
}

/* การ์ด: ขอบไล่สีบาง ๆ โผล่ตอนเอาเมาส์ชี้ (เพิ่มจากแผ่นแสงในบล็อก ⑰)
   ⚠️ ทำด้วย box-shadow ชั้น inset ไม่ใช่ border — border จะดันกล่องแล้วการ์ด
      ทั้งแถวขยับ 1px ตอนชี้ ซึ่งเห็นชัดกว่าที่คิด */
.card-soft:hover {
  box-shadow:
    inset 0 0 0 1px rgba(56, 146, 254, 0.28),
    var(--iz-sh-3);
}

/* แพ็กที่แนะนำ: แสงฟุ้งหายใจอยู่รอบใบ (อนิเมชันอยู่ท้ายไฟล์) */
.plan-hl {
  position: relative;
}

/* ตัวเลขขั้นตอน: ไล่สีทึบแทนพื้นขาว — ทำให้แถวขั้นตอนมีน้ำหนักพอจะเป็นจุดพัก */
.flow-num {
  background: var(--iz-grad-btn);
  color: var(--iz-on-dark);
  box-shadow: 0 6px 16px -6px rgba(15, 98, 214, 0.7);
}

/* ท้ายหน้า: แสงเหนือก้อนที่ 2 ให้จบหน้าด้วยจังหวะเดียวกับที่ hero เปิด */
.site-footer {
  background-image:
    radial-gradient(
      40rem 20rem at 20% 0%,
      rgba(56, 146, 254, 0.16) 0%,
      rgba(56, 146, 254, 0) 62%
    ),
    radial-gradient(
      34rem 18rem at 86% 100%,
      rgba(61, 196, 253, 0.12) 0%,
      rgba(61, 196, 253, 0) 64%
    );
  background-repeat: no-repeat;
}

/* คำถามพบบ่อย: ยกขึ้นเล็กน้อยตอนชี้ ให้รู้ว่ากดได้ */
.faq-item {
  transition:
    box-shadow 0.2s ease,
    transform 0.2s ease;
}
.faq-item:hover {
  transform: translateY(-2px);
}

/* ═══ ⑲ หน้าบริษัท: การ์ดกิจการ + รายการ "กำลังทำ" ═════════════════════════
 *
 * เจ้าของสั่ง 2026-09-06: *"อยากให้ใส่ประเภทธุรกิจ ... จากนั้นให้ใส่ว่า Coming soon
 * ส่วนคาร์แคร์ที่เรามีอยู่แล้วก็ให้เพิ่มรูปภาพสวย ๆ ประกอบด้วย อย่าให้มีแต่คำอธิบาย"*
 *
 * ⚠️ **ของที่ขยับเองอยู่ท้ายไฟล์ใน no-preference** ที่นี่มีแต่รูปทรงกับสี
 *    (กติกาเดียวกับบล็อก ⑱ · เหตุผลอยู่หัวบล็อก ⑰)
 * ⚠️ ไม่มี media query ในบล็อกนี้เลย — ทั้ง 2 เลย์เอาต์ยืดหยุ่นด้วยตัวเอง
 *    (`auto-fill minmax` กับ `flex-wrap` + basis) media query ของไฟล์นี้อยู่
 *    ท้ายไฟล์บล็อกเดียว ห้ามแทรกใหม่กลางไฟล์
 */

/* ── คำที่ไล่สีในหัวเรื่อง ─────────────────────────────────────────────────────
 * ⚠️ **ต้องอยู่ใน @supports และต้องมีสีทึบเป็นค่าตั้งต้น** — `color: transparent`
 *    ที่ไม่มี background-clip รองรับ = ตัวหนังสือ **หายไปทั้งคำ** ไม่ใช่แค่ไม่สวย
 *    และหัวเรื่อง hero คือบรรทัดที่สำคัญที่สุดในหน้า
 * ⚠️ ใช้กับ "คำที่เน้น" เท่านั้น ห้ามใช้ทั้งบรรทัด — ตัวอักษรไล่สีอ่านยากกว่า
 *    ตัวอักษรทึบเสมอ (ทั้ง 2 สีที่ใช้เป็นสีสว่างบนพื้นเข้ม จึงยังคมพอ)
 */
.txt-grad {
  color: var(--iz-cyan-2);
}
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .txt-grad {
    background-image: linear-gradient(
      100deg,
      var(--iz-cyan-2) 0%,
      var(--iz-blue-3) 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

/* ป้ายจุดยืนเหนือหัวเรื่องใน hero */
.hero-flag {
  margin-bottom: var(--iz-s-4);
}

/* ── hero ของหน้าบริษัท: กองหน้าต่างเรียงพัด ─────────────────────────────────
 *
 * ⚠️ **มีอยู่เพื่อไม่ให้ซ้ำกับ hero ของหน้าขาย** (เจ้าของทัก 2026-09-06) —
 *    หน้าขาย = ข้อความชิดซ้าย + หน้าต่างเอียงใบเดียว + จอมือถือลอยทับมุม
 *    หน้านี้  = ข้อความกึ่งกลาง + หน้าต่าง 3 ใบเรียงพัดที่ล้นออกนอกขอบล่าง
 *    ⚠️ 2 หน้านี้ใช้โทเคน สี และแสงชุดเดียวกัน (ต้องเป็นเว็บเดียวกัน) สิ่งที่ต้อง
 *       ต่างคือ **รูปทรงของกอง** ⇒ ห้ามเอา `.hero-win` / `.hero-phone` มาใช้ที่นี่
 *       และห้ามย้ายกองนี้ไปหน้าขาย ไม่งั้นก็ซ้ำอีกครั้งจากอีกทาง
 */

/* หัวเรื่องกึ่งกลางต้องมีเพดานความกว้าง — บรรทัดที่ยาวเกิน ~20 คำอ่านยากขึ้นมาก
   และหัวเรื่องกึ่งกลางที่ยาวเต็มจอกว้างจะกวาดตาจากซ้ายสุดไปขวาสุดทุกบรรทัด */
.hero-title-wide {
  max-width: 46rem;
  margin-inline: auto;
}

/* ⚠️ ระยะใต้ข้อความมาจาก `.hero-strip` ตัวเดียว ไม่ใช่ padding ของ `.hero-inner`
   บวกกับ margin ของกอง — 2 แหล่งที่ต้องบวกกันเองคือที่ที่ปรับทีไรก็เกินหรือขาด */
.hero-home .hero-inner {
  padding-bottom: 0;
}

.hero-strip {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  margin-top: var(--iz-s-7);
  /* ⚠️ ล้นออกนอกขอบล่างของ hero โดยตั้งใจ — `.hero` มี overflow:hidden อยู่แล้ว
     จึงถูกตัดพอดีขอบ ให้ความรู้สึกว่ากองภาพยังมีต่อ ไม่ใช่ภาพที่วางจบในกล่อง
     ⚠️ ค่าติดลบต้องน้อยกว่าความสูงของภาพเสมอ ไม่งั้นใบทั้งใบหายไปใต้ขอบ */
  margin-bottom: calc(var(--iz-s-9) * -1);
  padding-inline: var(--iz-s-4);
}

/* ใบข้าง: ย่อลง เอียงออก และอยู่หลังใบกลาง
   ⚠️ มุมต้องน้อย (3°) — ภาพพวกนี้คือ "หลักฐาน" ที่คนต้องพออ่านออก เอียงมากกว่านี้
      ได้ความหวือหวาแลกกับการอ่านไม่ออก ซึ่งเสียมากกว่าได้ (หลักเดียวกับ .hero-win)
   ⚠️ `transform` ของใบนอกเป็นของ "มุมเอียงคงที่" เท่านั้น — การลอยขึ้นลงอยู่ที่
      `.shot` ข้างใน (ท้ายไฟล์) เพราะ 2 อย่างนี้แย่งคุณสมบัติเดียวกัน */
.hero-card {
  flex: 0 1 auto;
  width: min(34%, 24rem);
  /* ⚠️ ต้องเลื่อนลงด้วย ไม่ใช่แค่ย่อ — ใบที่ก้นเสมอกันทุกใบอ่านเป็น "3 ภาพวางเรียง"
     ไม่ใช่ "กองที่มีใบหน้าใบหลัง" ซึ่งเป็นทั้งหมดของความต่างจาก hero หน้าขาย */
  transform: translateY(3%) scale(0.88) rotate(-3deg);
  transform-origin: bottom center;
  opacity: 0.8;
}
.hero-card + .hero-card {
  margin-left: -7%;
}
.hero-card:last-child {
  transform: translateY(3%) scale(0.88) rotate(3deg);
}

/* ใบกลาง: ใหญ่สุด ตรง อยู่หน้าสุด และมีแสงฟุ้งของตัวเอง */
.hero-card-main {
  width: min(46%, 34rem);
  transform: none;
  opacity: 1;
  z-index: 2;
  position: relative;
}
.hero-card-main:last-child {
  transform: none;
}

/* แสงใต้กอง — ให้ทั้งกอง "ลอย" แทนที่จะแปะอยู่บนพื้น (หลักเดียวกับ .hero-glowpad) */
.hero-card-main::before {
  content: "";
  position: absolute;
  left: -12%;
  right: -12%;
  bottom: -8%;
  height: 46%;
  border-radius: 50%;
  background: radial-gradient(
    ellipse at center,
    rgba(56, 146, 254, 0.45) 0%,
    rgba(56, 146, 254, 0) 70%
  );
  filter: blur(38px);
  pointer-events: none;
  z-index: -1;
}

/* ภาพประกอบ SVG ตอนยังไม่มีกิจการไหนมีภาพ — hero นี้กึ่งกลาง จึงต้องอยู่กึ่งกลางด้วย
   (`.hero-art` ตั้ง margin-left:auto ไว้สำหรับ hero แบบ 2 คอลัมน์ของหน้าขาย) */
.hero-art-center {
  margin-inline: auto;
  margin-top: var(--iz-s-7);
}

/* ── การ์ดกิจการที่เปิดใช้งานแล้ว ─────────────────────────────────────────────
 * โครง: ภาพหน้าจอจริง → ป้ายสถานะ → ชื่อ → คำอธิบาย → ชิป 3 ใบ → ปุ่ม
 * ⚠️ `.vertical-card` (บล็อก ⑦) ยังเป็นตัวให้ padding + height:100% เหมือนเดิม
 *    ที่นี่ **เพิ่ม** ของข้างในเท่านั้น ห้ามประกาศ `.vertical-card { }` ซ้ำที่นี่
 */
.vcard {
  gap: var(--iz-s-5);
}

/* ⚠️ overflow:hidden ไม่ใช่ของประดับ — แถบแสงกวาดตอนชี้ (ท้ายไฟล์) วิ่งออกนอก
   กรอบภาพถ้าไม่มีบรรทัดนี้ */
.vcard-media {
  position: relative;
  overflow: hidden;
  border-radius: var(--iz-r-lg);
}
.vcard-media::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 45%;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.34) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: translateX(-120%) skewX(-18deg);
  pointer-events: none;
}

/* ภาพขยับเข้าเล็กน้อยตอนชี้ — ให้การ์ดรู้สึกว่า "กดได้" โดยไม่ต้องขยับทั้งใบเยอะ ๆ
   ⚠️ 1.03 เท่านั้น: ภาพนี้คือภาพหน้าจอที่มีตัวหนังสือเล็ก ขยายมากกว่านี้ = เบลอ
   ⚠️ ที่ตัดขอบให้คือ `.shot` (overflow:hidden ของมันเอง) ไม่ใช่กฎนี้ */
.vcard-media img {
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.vcard:hover .vcard-media img {
  transform: scale(1.03);
}

.vcard-text {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

/* ⚠️ กิจการเดียว = การ์ดใบกว้าง ภาพอยู่ข้างข้อความ — ใบเดี่ยวกว้าง 1/3 กลางแถว
   ที่ว่างอ่านเหมือนหน้าเว็บโหลดไม่ครบ
   ⚠️ **ไม่ใช้ media query** — `flex-wrap` + basis ทำให้ 2 คอลัมน์กลายเป็น 1
      เองเมื่อที่ไม่พอ และไม่ต้องเดาจุดตัดให้ตรงกับความยาวชื่อกิจการ
   ⚠️ เขียนเป็น `.vertical-card.vcard-wide` (2 คลาส) เพื่อชนะ `flex-direction`
      ของ `.vertical-card` ด้วยความจำเพาะ ไม่ใช่ด้วยลำดับในไฟล์ — ลำดับเป็น
      เหตุผลที่ถูกวันนี้และผิดวันที่มีคนย้ายบล็อก */
.vertical-card.vcard-wide {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--iz-s-6);
}
.vcard-wide .vcard-media {
  flex: 1 1 22rem;
  min-width: 0;
}
.vcard-wide .vcard-text {
  flex: 1 1 19rem;
}
/* ⚠️ ปุ่มในการ์ดใบกว้างต้องกว้างเท่าข้อความในปุ่ม ไม่ใช่เต็มคอลัมน์ — ปุ่มเต็ม
   ความกว้าง 584px อ่านเป็นแถบว่างที่มีตัวหนังสืออยู่ตรงกลาง ไม่ใช่ปุ่ม
   (ในการ์ดแคบเต็มความกว้างถูกแล้ว จึงทับเฉพาะใบกว้าง) */
.vcard-wide .vcard-text .btn {
  align-self: flex-start;
}

/* ป้าย "เปิดใช้งานแล้ว" — คู่ตรงข้ามของป้าย Coming soon ข้างล่าง
   ⚠️ ใช้สีแบรนด์ ไม่ใช่เขียว: เว็บนี้ไม่มีสีเชิงความหมาย (เขียว/แดง) อยู่เลย
      สักที่ เพิ่มมาที่เดียวคือเพิ่มสีที่ 3 ให้ทั้งเว็บเพื่อป้ายเดียว */
.vcard-tag {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: var(--iz-s-2);
  font-size: var(--iz-fs-xs);
  font-weight: 600;
  color: var(--iz-accent);
  background: var(--iz-grad-tint);
  box-shadow: inset 0 0 0 1px rgba(56, 146, 254, 0.18);
  border-radius: var(--iz-r-pill);
  padding: var(--iz-s-1) var(--iz-s-3);
  margin-bottom: var(--iz-s-3);
}
.vcard-tag::before {
  content: "";
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background: var(--iz-accent-300);
  box-shadow: 0 0 8px rgba(56, 146, 254, 0.8);
  flex: 0 0 auto;
}

/* ชิปคุณสมบัติสั้น ๆ ในการ์ด — มาจาก hero_points ของกิจการนั้น
   ⚠️ ชิปคือ "ของที่ยืนยันได้" ไม่ใช่ที่ของตัวเลขสถิติ (DESIGN ข้อ ③) */
.chips {
  list-style: none;
  padding-left: 0;
  margin: 0 0 var(--iz-s-5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--iz-s-2);
}
.chips li {
  font-size: var(--iz-fs-xs);
  color: var(--iz-text-2);
  background: var(--iz-bg);
  box-shadow: inset 0 0 0 1px var(--iz-line);
  border-radius: var(--iz-r-pill);
  padding: var(--iz-s-1) var(--iz-s-3);
}

/* ── แถบ "กิจการที่กำลังทำ" ───────────────────────────────────────────────────
 * ⚠️ พื้นเข้มโดยตั้งใจ — หน้านี้เรียงเป็น เข้ม(hero) → สว่าง → **เข้ม** → สว่าง
 *    → เข้ม(ท้ายหน้า) การสลับผิวคือสิ่งที่ทำให้หน้ายาว ๆ ไม่กลายเป็นแผ่นเดียว
 * ⚠️ ทิศแสงเหนือต่างจาก .pshow/.dshow ตามกติกาเดิม: แถบพื้นเข้มหลายแถบใน
 *    เว็บเดียวต้องแยกกันด้วย **ทิศของแสง ไม่ใช่คนละสี** (คนละสี = 2 แบรนด์)
 * ⚠️ หัวข้อ section ต้องเปลี่ยนสีเอง — `.section-title` / `.section-sub` เป็น
 *    สีหมึกเข้ม ถ้าไม่ทับตรงนี้จะเป็นตัวหนังสือเข้มบนพื้นเข้ม (อ่านไม่ออก และ
 *    ไม่มีอะไรฟ้อง) หลักเดียวกับ `.izdeck-title` ของสไลด์
 */
.soon-band {
  position: relative;
  overflow: hidden;
  background-color: var(--iz-ink-900);
  background-repeat: no-repeat;
  background-image:
    radial-gradient(
      46rem 24rem at 50% -18%,
      rgba(61, 196, 253, 0.22) 0%,
      rgba(61, 196, 253, 0) 62%
    ),
    radial-gradient(
      38rem 22rem at 8% 112%,
      rgba(56, 146, 254, 0.2) 0%,
      rgba(56, 146, 254, 0) 64%
    ),
    linear-gradient(176deg, var(--iz-ink-800) 0%, var(--iz-ink-900) 100%);
  color: var(--iz-on-dark);
}
.soon-band::before,
.soon-band::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: var(--iz-bw);
  background: linear-gradient(
    90deg,
    rgba(56, 146, 254, 0) 0%,
    rgba(61, 196, 253, 0.5) 50%,
    rgba(56, 146, 254, 0) 100%
  );
  pointer-events: none;
}
.soon-band::before {
  top: 0;
}
.soon-band::after {
  bottom: 0;
}
.soon-band > * {
  position: relative;
  z-index: 1;
}
.soon-band .section-title {
  color: var(--iz-on-dark);
}
.soon-band .section-sub {
  color: var(--iz-on-dark-2);
}

/* ⚠️ `auto-fill minmax` แทน media query — จำนวนคอลัมน์ปรับตามที่ว่างจริง
   ⚠️ `min(100%, 18rem)` ไม่ใช่ `18rem` เฉย ๆ: ที่จอแคบกว่า 18rem ช่องจะกว้าง
      เกินคอนเทนเนอร์แล้วทั้งหน้ามีแถบเลื่อนแนวนอน */
.soon-grid {
  list-style: none;
  padding-left: 0;
  margin: 0;
  display: grid;
  gap: var(--iz-s-4);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
}

/* ⚠️ ใบพวกนี้ **ไม่ใช่ลิงก์** และต้องไม่ดูเหมือนลิงก์ — ยังไม่มีหน้าให้ไป
   เงาจึงจางกว่าการ์ดจริง ไม่มีปุ่ม และตอนชี้ยกขึ้นแค่ 2px (พอให้รู้ว่ามีชีวิต
   ไม่ถึงกับชวนให้กด) */
.soon-tile {
  display: flex;
  gap: var(--iz-s-4);
  padding: var(--iz-s-4);
  border-radius: var(--iz-r-lg);
  background: rgba(255, 255, 255, 0.045);
  box-shadow: inset 0 0 0 1px rgba(124, 237, 252, 0.16);
  transition:
    background 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.25s ease;
}
.soon-tile:hover {
  background: rgba(255, 255, 255, 0.075);
  box-shadow:
    inset 0 0 0 1px rgba(124, 237, 252, 0.3),
    0 18px 34px -20px rgba(0, 0, 0, 0.8);
  transform: translateY(-2px);
}

.soon-icon {
  width: 2.5rem;
  height: 2.5rem;
  flex: 0 0 auto;
  border-radius: var(--iz-r);
  background: rgba(56, 146, 254, 0.16);
  box-shadow: inset 0 0 0 1px rgba(124, 237, 252, 0.24);
  color: var(--iz-cyan-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition:
    transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.3s ease;
}
.soon-icon svg {
  width: 1.375rem;
  height: 1.375rem;
  display: block;
}
.soon-tile:hover .soon-icon {
  transform: translateY(-1px) scale(1.06);
  box-shadow:
    inset 0 0 0 1px rgba(124, 237, 252, 0.45),
    0 10px 22px -12px rgba(61, 196, 253, 0.9);
}

.soon-text {
  min-width: 0;
}
.soon-name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--iz-s-2);
  font-size: var(--iz-fs-h3);
  font-weight: 600;
  color: var(--iz-on-dark);
  margin: 0 0 var(--iz-s-1);
  line-height: var(--iz-lh-head);
}

/* ⚠️ ป้ายนี้ต้องอ่านออกว่า "ยังไม่เปิด" โดยไม่ต้องกด — จึงจางกว่าชื่อกิจการ
   ชัดเจน แต่ยังต้องผ่านคอนทราสต์ (ฟ้าอ่อนบนพื้นเข้ม) ไม่ใช่เทาจนหายไป */
.soon-badge {
  font-size: var(--iz-fs-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--iz-cyan-2);
  background: rgba(61, 196, 253, 0.12);
  box-shadow: inset 0 0 0 1px rgba(124, 237, 252, 0.26);
  border-radius: var(--iz-r-pill);
  padding: 0.1rem var(--iz-s-2);
  white-space: nowrap;
}

.soon-body {
  font-size: var(--iz-fs-sm);
  color: var(--iz-on-dark-3);
  margin: 0;
}

/* ใบ "ไม่เห็นกิจการของคุณ" — ใบเดียวที่มีช่องทางติดต่อ จึงเน้นกว่าเพื่อนนิดเดียว */
.soon-ask {
  background: rgba(56, 146, 254, 0.1);
  box-shadow: inset 0 0 0 1px rgba(124, 237, 252, 0.26);
}
.soon-contact {
  display: block;
  margin-top: var(--iz-s-2);
  color: var(--iz-cyan-2);
  font-weight: 600;
}

/* ═══ ⑰ ความเคลื่อนไหว ══════════════════════════════════════════════════════
 *
 * เจ้าของสั่งเพิ่ม 2026-09-05 — **กลับข้อห้ามเดิม** ที่เขียนไว้ใน
 * `DESIGN_site_redesign.md` ข้อ ② ("ห้ามใส่ animation ที่เล่นตอนเลื่อนหน้าจอ")
 * เอกสารนั้นถูกแก้ให้ตรงกับของจริงแล้ว — อ่านที่นั่นก่อนคิดจะรื้อบล็อกนี้ทิ้ง
 *
 * กติกาที่ยังคุมอยู่ ไม่ได้ปล่อยฟรี:
 *   · **ไม่มี JavaScript** ทั้งบล็อก — ของที่ต้องรู้ตำแหน่ง scroll ใช้
 *     `animation-timeline` ของ CSS เอง
 *   · ระยะทางสั้น (≤ 14px) ไม่มีอะไรเด้ง ไม่มีอะไรหมุน — ที่นี่ขายความน่าเชื่อถือ
 *
 * ── ⚠️ บล็อกนี้ถูกผ่าเป็น 2 ส่วน และต้องอยู่แบบนี้ ──────────────────────────
 *
 *   **ที่นี่** = ของที่นิ่ง: keyframes · การจัดวาง · เอฟเฟกต์ตอนเอาเมาส์ชี้
 *   **ท้ายไฟล์** = ของที่ขยับเอง ทั้งหมดอยู่ใน
 *                  `@media (prefers-reduced-motion: no-preference)`
 *
 * ⚠️ **ต้องเป็น "เปิดเมื่อไม่ได้ขอให้ลด" ไม่ใช่ "ใส่ก่อนแล้วค่อยไปปิดที่ reduce"**
 *    เขียนแบบหลังแล้วต้องใช้ `!important` เพื่อล้าง `animation-delay` กับ
 *    `animation-timeline` (ตัวเลือก `*` มีความจำเพาะ 0 ทับ `.hero-title` ไม่ได้)
 *    ซึ่งชนกฎของเว็บนี้ตรง ๆ — และที่แย่กว่านั้นคือ **มันเคยพลาดมาแล้วจริง**:
 *    วัดเมื่อ 2026-09-05 ตอนเปิด prefers-reduced-motion แล้ว hero ยังค้างที่
 *    opacity 0 ตลอด delay และคำถามพบบ่อยค้างที่ .84 ⇒ คนที่ตั้งค่าเพื่อสุขภาพ
 *    ตัวเองได้หน้าที่ **อ่านยากกว่า** คนอื่น
 *    เขียนแบบ no-preference แล้วไม่มีอะไรต้องล้าง เพราะไม่เคยถูกประกาศตั้งแต่ต้น
 *
 * ⚠️ ของที่ผูกกับ scroll ยังต้องอยู่ใน `@supports` ซ้อนอีกชั้น **ห้ามย้ายออกมา**
 *    เบราว์เซอร์ที่ไม่รู้จัก `animation-timeline` จะเล่นอนิเมชันนั้นแบบจับเวลา
 *    ทันทีที่โหลด ⇒ ของครึ่งหน้าล่างเฟดจบไปตั้งแต่ยังไม่มีใครเลื่อนถึง
 */

@keyframes iz-rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes iz-copy-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes iz-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}
/* ⚠️ **เฟรม 0% ต้องเท่ากับค่าตั้งต้นเป๊ะ ๆ (`0% 0%` ทุกชั้น)** — เขียนผิดครั้งแรก
 *    เป็น `0% 100%` ที่ชั้นกลาง ผลคือ **หน้าตาตอนนิ่งของ hero เปลี่ยนไปเลย**
 *    (แสงฟุ้งก้อนล่างถูกดันจากที่ที่ออกแบบไว้) ไม่ใช่แค่ "ขยับตอนเล่น"
 *    ⇒ อนิเมชันที่ตั้งใจให้เป็นของแถม กลายเป็นการแก้ดีไซน์โดยไม่มีใครตั้งใจ
 * ⚠️ ชั้นที่ 3 คือไล่สีพื้นเต็มบล็อก **ห้ามขยับ** — ขยับแล้วขอบจะโผล่สีพื้นทึบ
 *    เป็นแถบให้เห็น (ชั้นแสง 2 ชั้นแรกขยับได้เพราะมันจางหายก่อนถึงขอบอยู่แล้ว)
 */
@keyframes iz-aurora {
  0%,
  100% {
    background-position:
      0% 0%,
      0% 0%,
      0% 0%;
  }
  50% {
    background-position:
      6% 4%,
      -5% -4%,
      0% 0%;
  }
}
@keyframes iz-sheen {
  from {
    transform: translateX(-120%) skewX(-18deg);
  }
  to {
    transform: translateX(320%) skewX(-18deg);
  }
}
@keyframes iz-dot {
  0%,
  100% {
    box-shadow: 0 0 8px rgba(124, 237, 252, 0.9);
  }
  50% {
    box-shadow: 0 0 14px rgba(124, 237, 252, 1);
  }
}
@keyframes iz-progress {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

/* จุดสถานะบนพื้นสว่าง — เต้นด้วย "ขนาด" ไม่ใช่แสงฟุ้งแบบ iz-dot
   (แสงฟุ้งสีฟ้าอ่อนบนพื้นขาวแทบมองไม่เห็น · เหตุผลเต็มอยู่ที่ .vcard-tag::before) */
@keyframes iz-pip {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.35);
    opacity: 0.6;
  }
}

/* แถบบนตอนเลื่อนหน้าลง: ทึบขึ้นและมีเงา — บอกว่าเนื้อหากำลังไหลอยู่ใต้มัน
   ⚠️ ผูกกับระยะเลื่อน ไม่ใช่เวลา (อยู่ใน @supports ท้ายไฟล์) และแตะแค่พื้นกับเงา
      ห้ามแตะความสูง: แถบนี้ sticky ⇒ ความสูงที่เปลี่ยนคือเนื้อหาทั้งหน้ากระตุก */
@keyframes iz-nav-lift {
  from {
    background-color: rgba(255, 255, 255, 0.82);
    box-shadow: 0 0 0 0 rgba(9, 40, 82, 0);
  }
  to {
    background-color: rgba(255, 255, 255, 0.95);
    box-shadow: 0 10px 30px -18px rgba(9, 40, 82, 0.55);
  }
}

/* แสงเหนือ 3 ก้อนใน hero — คนละระยะ คนละความเร็ว จึงไม่มีวันเข้าจังหวะกัน
   ⚠️ ย้าย translate อย่างเดียว ห้ามแตะ width/height/top/left — คุณสมบัติพวกนั้น
      บังคับให้เบราว์เซอร์คำนวณเลย์เอาต์ใหม่ทุกเฟรม (ก้อนนี้ blur 70px ⇒ แพงมาก) */
@keyframes iz-drift-a {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(-3rem, 2.5rem, 0);
  }
}
@keyframes iz-drift-b {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(3.5rem, -2rem, 0);
  }
}
@keyframes iz-drift-c {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    transform: translate3d(-2rem, -3rem, 0) scale(1.12);
  }
}

/* หน้าต่างระบบใน hero: ลอยขึ้นลงเบา ๆ โดยคงมุมเอียงคงที่ไว้
   ⚠️ **ต้องเขียนมุมเอียงซ้ำในทุกเฟรม** — keyframe ที่ตั้ง `transform` จะ
      **แทนที่ทั้งค่า** ไม่ใช่บวกเพิ่ม เขียนแค่ translateY อย่างเดียวเมื่อไร
      มุมเอียงคงที่จะหายไปทันทีที่อนิเมชันเริ่มเล่น */
@keyframes iz-hero-float {
  0%,
  100% {
    transform: perspective(2200px) rotateY(-8deg) rotateX(3deg) translateY(0);
  }
  50% {
    transform: perspective(2200px) rotateY(-8deg) rotateX(3deg)
      translateY(-10px);
  }
}

/* ปุ่มหลักใน hero: วงแหวนขยายออกแล้วจางหาย */
@keyframes iz-ring {
  0% {
    box-shadow:
      var(--iz-sh-accent),
      0 0 0 0 rgba(56, 146, 254, 0.45);
  }
  70%,
  100% {
    box-shadow:
      var(--iz-sh-accent),
      0 0 0 14px rgba(56, 146, 254, 0);
  }
}

/* แสงฟุ้งหายใจรอบการ์ดแพ็กที่แนะนำ */
@keyframes iz-breathe {
  0%,
  100% {
    box-shadow: var(--iz-sh-accent);
  }
  50% {
    box-shadow: var(--iz-sh-accent-lift);
  }
}

/* เส้นใต้หัวข้อ section ยืดออกตอนเลื่อนถึง */
@keyframes iz-underline {
  from {
    transform: scaleX(0);
    opacity: 0;
  }
  to {
    transform: scaleX(1);
    opacity: 1;
  }
}

/* ── การเลื่อนหน้าไปยัง anchor ───────────────────────────────────────────────
   ⚠️ scroll-padding-top ไม่ใช่ของตกแต่ง — แถบบนเป็น sticky สูง ~4.5rem
      ถ้าไม่กันไว้ หัวข้อ #pricing จะไปนอนอยู่ **ใต้แถบบน** ทุกครั้งที่กด "ดูราคา"
   ⚠️ ส่วน `scroll-behavior: smooth` อยู่ท้ายไฟล์ (การไถถือเป็นการเคลื่อนไหว) */
html {
  scroll-padding-top: 5.5rem;
}

/* ── แถบความคืบหน้าการอ่าน (บนสุดของทุกหน้า) ────────────────────────────────
   ⚠️ ตั้งต้น display:none — ถ้าเบราว์เซอร์ไม่รู้จัก scroll timeline แถบจะค้างเต็ม
      หลอดตลอดเวลา ซึ่งแย่กว่าไม่มีแถบ (เปิดที่ท้ายไฟล์) */
.scroll-progress {
  display: none;
}

/* ── ปุ่มหลัก: ที่ทางของแถบแสงกวาด (ตัวอนิเมชันอยู่ท้ายไฟล์) ────────────────
   ⚠️ overflow:hidden จำเป็น ไม่งั้นแถบแสงวิ่งออกไปนอกปุ่ม */
.btn-primary {
  position: relative;
  overflow: hidden;
}
.btn-primary > * {
  position: relative;
  z-index: 1;
}
.btn-primary::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 45%;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.34) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: translateX(-120%) skewX(-18deg);
  pointer-events: none;
}
/* ── การ์ด: ยกสูงขึ้นและมีแสงจาง ๆ ตอนชี้ ──────────────────────────────────
   ⚠️ isolation:isolate จำเป็นคู่กับ z-index:-1 — ไม่งั้นแผ่นแสงจะไปอยู่ "หลัง
      พื้นการ์ด" แล้วมองไม่เห็นอะไรเลย (มันต้องอยู่หน้าพื้น หลังตัวหนังสือ) */
.card-soft {
  position: relative;
  isolation: isolate;
}
.card-soft::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
  background: linear-gradient(
    135deg,
    rgba(56, 146, 254, 0.12) 0%,
    rgba(61, 196, 253, 0.05) 46%,
    rgba(255, 255, 255, 0) 72%
  );
  transition: opacity 0.3s ease;
}
.card-soft:hover {
  transform: translateY(-4px);
}
.card-soft:hover::after {
  opacity: 1;
}

.feature-icon {
  transition:
    transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.3s ease;
}
.card-soft:hover .feature-icon {
  transform: translateY(-2px) scale(1.06);
  box-shadow:
    inset 0 0 0 1px rgba(56, 146, 254, 0.3),
    0 10px 20px -10px rgba(15, 98, 214, 0.7);
}

/* ⚠️ เอฟเฟกต์ "ยกภาพขึ้นตอนเอาเมาส์ชี้" ของ `.shot` ถูกถอดออก 2026-09-05
   ตอนที่แถวสลับซ้าย-ขวาถูกแทนด้วยสไลด์ — `.shot` เหลือที่เดียวคือหน้าต่างใน hero
   ซึ่ง **มีอนิเมชันหันตรงตามการเลื่อนหน้าครองคุณสมบัติ `transform` อยู่แล้ว**
   อนิเมชันชนะการประกาศธรรมดาเสมอ ⇒ กฎ hover จะไม่มีผลอะไรเลย และเป็นโค้ดที่
   อ่านแล้วเข้าใจผิดว่ามันทำงาน */

/* ═══ ⑭ มือถือ ══════════════════════════════════════════════════════════════
 *
 * ⚠️ DESIGN ข้อ ②.6: ลูกค้ากลุ่มนี้เปิดจากมือถือเป็นหลัก **ต้องผ่านที่ 360px ก่อน**
 *    กฎในไฟล์นี้เขียนแบบมือถือมาก่อนอยู่แล้ว (ค่าตั้งต้น = จอแคบ) ส่วนนี้จึงมีแค่
 *    ของที่ต้อง "เพิ่มให้" ตอนจอกว้าง กับกันล้นที่จอแคบสุด
 */

/* กันแถบเลื่อนแนวนอนทั้งหน้า — จุดที่พลาดบ่อยคือเงาและ gradient ของ hero */
html,
body {
  overflow-x: hidden;
}

/* ⚠️ ปุ่มใน hero เต็มความกว้างทุกจอมือถือ ไม่ใช่เฉพาะ 360px (แก้ 2026-09-06)
   ของเดิมอยู่ในบล็อก 360px ⇒ ที่ 390px (ขนาดมือถือที่พบบ่อยที่สุด) ปุ่ม 2 ปุ่มตกบรรทัด
   แล้วกว้างไม่เท่ากันตามความยาวข้อความ — จัดกึ่งกลางแล้วยิ่งเห็นชัดว่าไม่ตรงกัน
   ⚠️ กระทบหน้าขายด้วยโดยตั้งใจ: ปุ่มเต็มความกว้างบนมือถือคือเป้ากดที่ใหญ่ขึ้น
      และทั้ง 2 หน้าใช้ `.hero-actions` ตัวเดียวกัน แยกกฎ = อีกหน้าหลุดเงียบ ๆ */
@media (max-width: 35.9375em) {
  /* < 576px */
  .hero-actions .btn {
    width: 100%;
  }
}

@media (max-width: 22.5em) {
  /* 360px */
  .hero-inner {
    padding-block: var(--iz-s-7);
  }
  .section {
    padding-block: var(--iz-s-7);
  }
  .plan-tagline {
    min-height: 0;
  }

  /* ⚠️ สไลด์ที่ 360px: เครื่องต้องเล็กลงจนยัง "เห็นใบข้างเคียงโผล่มา"
     ไม่งั้นมันดูเหมือนรูปเดี่ยว ๆ แล้วไม่มีใครรู้ว่าเลื่อนดูใบอื่นได้ */
  .izdeck-phone {
    --dw: 10rem;
  }
  .izdeck-win {
    --dw: 15rem;
  }
  .izdeck-tab {
    padding: 0.4rem 0.7rem;
  }
}

/* ⚠️ กล่องคำบรรยายต้องสูงพอสำหรับ **ใบที่ยาวที่สุด** ไม่งั้นทุกอย่างใต้ section
   ขยับขึ้น-ลงทุกครั้งที่กดเปลี่ยนใบ · ตัวเลขนี้มาจากการวัดจริง 2026-09-05
   (จอกว้างสูงสุด 85px = 5.31rem · จอแคบ 111px = 6.94rem เพราะขึ้นบรรทัดมากกว่า)
   ⚠️ min-height เป็น "พื้น" ไม่ใช่ "เพดาน" — กิจการที่เขียนคำบรรยายยาวกว่านี้
   กล่องจะโตตามและกลับมาขยับอีก วัดใหม่ทุกครั้งที่เปลี่ยนข้อความ */
@media (max-width: 47.9375em) {
  /* < 768px */
  .izdeck-copy {
    min-height: 7.5rem;
  }

  /* ── ⚠️ กองภาพใน hero **หายไปทั้งกอง** ที่จอมือถือ (เจ้าของสั่ง 2026-09-06) ──
   *
   * ของเดิมเหลือใบเดียวไว้ ซึ่งเจ้าของทักว่า *"รูปภาพ 3 รูปนั้นไม่มีค่าอะไรเลย
   * มันดูไม่สวยเลย"* — และถูก: ภาพที่วางอยู่ตรงนั้นคือ **หน้าจอเดสก์ท็อป**
   * กว้าง 1600px ย่อลงมาเหลือ 360px ⇒ ตัวหนังสือในภาพเล็กจนอ่านไม่ออกสักตัว
   * แล้วยังถูกขอบล่างของ hero ตัดครึ่ง เหลือแค่ "ก้อนสี่เหลี่ยมสีเทา ๆ"
   * ที่กินพื้นที่จอแรกไปครึ่งจอโดยไม่ได้บอกอะไรเลย
   *
   * ⚠️ **ไม่ได้แปลว่ามือถือไม่มีภาพ** — section ถัดลงไปแค่หน้าจอเดียวคือการ์ด
   *    กิจการซึ่งมีภาพหน้าจอเต็มความกว้างอยู่แล้ว ที่นี่จึงตัดของที่ซ้ำและอ่านไม่ออก
   *    ทิ้ง ไม่ใช่ตัดภาพออกจากหน้า
   * ⚠️ ผลพลอยได้: LCP ของมือถือกลายเป็น **ตัวหนังสือหัวเรื่อง** ซึ่งมาถึงก่อนรูปเสมอ
   */
  .hero-strip {
    display: none;
  }
  /* กองหายไปแล้ว ระยะหายใจก่อนจบ hero จึงต้องกลับมาที่ padding ตามปกติ
     (`.hero-home .hero-inner` ตัด padding-bottom ทิ้งเพราะเผื่อที่ให้กอง) */
  .hero-home .hero-inner {
    padding-bottom: var(--iz-s-9);
  }
}

/* ⚠️ จอกลาง (แท็บเล็ตแนวตั้ง · โน้ตบุ๊กจอเล็ก) เหลือ **ใบกลางใบเดียว** —
   ที่ความกว้างนี้ยังพอมีที่ให้ภาพใหญ่พอจะอ่านออก แต่ไม่พอสำหรับ 3 ใบ
   (3 ใบที่ 768px = ใบละ ~245px ซึ่งอ่านไม่ออกเหมือนกัน แค่ไม่โดนบ่นเพราะไม่ค่อยมีคนดู)
   ⚠️ ใบข้างเป็น `loading="lazy"` จึงไม่ถูกโหลดเลยตอนถูกซ่อน */
@media (min-width: 48em) and (max-width: 61.9375em) {
  .hero-card:not(.hero-card-main) {
    display: none;
  }
  .hero-card-main {
    width: min(80%, 32rem);
  }
}

@media (min-width: 62em) {
  /* 992px */
  .section {
    padding-block: var(--iz-s-10);
  }
  .hero-inner {
    padding-block: var(--iz-s-10);
  }

  /* ⚠️ จอมือถือที่ลอยทับมุมภาพ hero โผล่เฉพาะจอกว้าง — ที่ < 992px hero เรียงลง
     เป็นคอลัมน์เดียว ภาพหลักแคบลงจนจอที่ทับอยู่กินพื้นที่ไปเกินครึ่ง
     แล้วอ่านไม่ออกทั้งคู่ (ตั้งต้นเป็น display:none ในบล็อก ⑱) */
  .hero-phone {
    display: block;
  }

  /* ขั้นตอนเรียงเป็นแถวเดียวพร้อมเส้นเชื่อม */
  .flow {
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: var(--iz-s-5);
  }
  .flow-step {
    padding-left: 0;
    padding-top: var(--iz-s-8);
  }
  .flow-num {
    top: 0;
  }

  /* เส้นเชื่อมระหว่างขั้น — ขั้นสุดท้ายไม่มี */
  .flow-step::after {
    content: "";
    position: absolute;
    top: 1.125rem;
    left: 2.75rem;
    right: var(--iz-s-4);
    height: var(--iz-bw-2);
    background: linear-gradient(
      90deg,
      var(--iz-accent-100) 0%,
      rgba(124, 237, 252, 0.55) 100%
    );
  }
  .flow-step:last-child::after {
    display: none;
  }

  .terms {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ═══ ⑰-ข ความเคลื่อนไหว — ส่วนที่ "ขยับเอง" ════════════════════════════════
 *
 * ครึ่งแรกของบล็อก ⑰ (keyframes · การจัดวาง · เอฟเฟกต์ตอนชี้) อยู่กลางไฟล์
 * อ่านเหตุผลของการผ่าเป็น 2 ส่วนที่หัวบล็อกนั้น สรุปสั้น ๆ:
 *
 * ⚠️ **เปิดเมื่อ `no-preference` ไม่ใช่ใส่ก่อนแล้วไปปิดที่ `reduce`** — แบบหลัง
 *    ต้องใช้ `!important` เพื่อล้าง `animation-delay` / `animation-timeline`
 *    (ตัวเลือก `*` ความจำเพาะ 0 ทับ `.hero-title` ไม่ได้) ซึ่งเว็บนี้ห้าม
 *    และแบบนี้ยัง "ปลอดภัยโดยโครงสร้าง": ลืมเขียนข้อยกเว้น = ไม่มีอนิเมชัน
 *    ไม่ใช่ = อนิเมชันหลุดไปหาคนที่ขอไม่ให้มี
 *
 * ⚠️ `animation-timeline: view()` **ไม่สนใจ `animation-duration`** — มันเดินตาม
 *    ระยะเลื่อนหน้า ⇒ วิธี "ตัดอนิเมชันด้วย duration .01ms" ที่ใช้กันทั่วไป
 *    ใช้กับพวกนี้ไม่ได้เลย อีกเหตุผลที่ต้องเป็น no-preference
 */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }

  /* ── hero: เข้าฉากทีละชิ้น ─────────────────────────────────────────────────
     ⚠️ จับเวลา ไม่ใช่ผูก scroll โดยตั้งใจ — ทุกชิ้นอยู่เหนือจอแรกอยู่แล้ว
        การผูกกับ scroll จะทำให้มันไม่เล่นเลยสำหรับคนที่ไม่เลื่อนหน้า */
  .hero-title,
  .hero-sub,
  .hero-actions,
  .hero-points,
  .hero-stage,
  .hero-art {
    animation: iz-rise 0.85s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  .hero-sub {
    animation-delay: 0.07s;
  }
  .hero-actions {
    animation-delay: 0.14s;
  }
  .hero-points {
    animation-delay: 0.21s;
  }
  .hero-stage,
  .hero-art {
    animation-delay: 0.16s;
  }

  /* ⚠️ **อนิเมชันของ hero ถูกแบ่งเป็น 3 ธาตุ ไม่ใช่กองไว้ที่เดียว และแบ่งแบบนี้
     เพราะทั้ง 3 อย่างแย่งคุณสมบัติ `transform` กันหมด** — อันหลังในลิสต์ชนะ
     ⇒ ถ้ากองไว้บนธาตุเดียว จะเหลือทำงานแค่อันเดียวโดยไม่มีอะไรฟ้อง
        · `.hero-stage` = เข้าฉาก (จับเวลา)
        · `.hero-win`   = หันตรงตามการเลื่อนหน้า (อยู่ใน @supports ข้างล่าง)
        · `.hero-phone` = ลอยขึ้นลง (จับเวลา · ช้ากว่าและเริ่มทีหลัง จึงอ่านเป็น
                          2 ระนาบที่ลอยอิสระ ไม่ใช่ภาพเดียวที่ขยับทั้งแผง) */

  /* แสงเหนือไหลช้า ๆ — ขยับแค่ background-position ไม่มีธาตุเพิ่ม
     ⚠️ 26-32 วินาทีต่อรอบ ช้าจนไม่มีใครจับได้ว่ามันขยับ แต่หน้าไม่นิ่งตาย
     ⚠️ ต้อง no-repeat ด้วย — ค่าตั้งต้นของ background-repeat คือ repeat พอเลื่อน
        ตำแหน่งแล้วชั้นแสงจะปูกระเบื้องซ้ำโผล่มาที่ขอบตรงข้าม (body ประกาศ
        no-repeat ไว้แล้ว แต่ .hero กับ .pshow ไม่ได้ประกาศ) */
  .hero,
  .pshow {
    background-repeat: no-repeat;
  }
  .hero {
    animation: iz-aurora 26s ease-in-out infinite;
  }
  .pshow {
    animation: iz-aurora 32s ease-in-out infinite;
  }

  /* จุดเรืองแสงหน้าจุดยืนยัน 3 ข้อ — เต้นเบา ๆ ไล่เวลากันทีละข้อ */
  .hero-points li::before {
    animation: iz-dot 3.4s ease-in-out infinite;
  }
  .hero-points li:nth-child(2)::before {
    animation-delay: 0.5s;
  }
  .hero-points li:nth-child(3)::before {
    animation-delay: 1s;
  }

  /* แสงกวาดบนปุ่มหลักตอนชี้ (ที่ทางของมันอยู่ในบล็อก ⑰ กลางไฟล์) */
  .btn-primary:hover::after {
    animation: iz-sheen 0.85s ease-out;
  }

  /* ── hero เต็มยศ · บล็อก ⑱ ─────────────────────────────────────────────── */

  /* แสงเหนือ 3 ก้อน — คนละความเร็ว/คนละ delay จึงไม่มีวันเข้าจังหวะกัน */
  .hero-aura span:nth-child(1) {
    animation: iz-drift-a 24s ease-in-out infinite;
  }
  .hero-aura span:nth-child(2) {
    animation: iz-drift-b 31s ease-in-out -6s infinite;
  }
  .hero-aura span:nth-child(3) {
    animation: iz-drift-c 19s ease-in-out -11s infinite;
  }

  /* ภาพ 2 ชิ้นลอยคนละจังหวะ — คนละความเร็ว คนละ delay จึงอ่านเป็น 2 ระนาบที่
     ลอยอิสระ ไม่ใช่ภาพเดียวที่ขยับทั้งแผง (ถ้าเท่ากันจะดูเหมือนภาพนิ่งที่เลื่อน) */
  .hero-win {
    animation: iz-hero-float 8s ease-in-out 1.2s infinite;
  }
  .hero-phone {
    animation: iz-float 11s ease-in-out 2.4s infinite;
  }

  /* ปุ่มหลักใน hero: วงแหวนเรืองแสงเป็นจังหวะ
     ⚠️ **หยุดตอนเอาเมาส์ชี้** — ตอนนั้นปุ่มมีแถบแสงกวาดอยู่แล้ว 2 อย่างพร้อมกัน
        อ่านเป็นความรกทันที และมันหยุดอยู่แล้วเมื่อคนกำลังจะกด */
  .hero .btn-primary {
    animation: iz-ring 3.6s ease-out 1.4s infinite;
  }
  .hero .btn-primary:hover {
    animation: none;
  }

  .plan-hl {
    animation: iz-breathe 5s ease-in-out infinite;
  }

  /* ── หน้าบริษัท · บล็อก ⑲ ──────────────────────────────────────────────── */

  /* กองหน้าต่างใน hero ลอยขึ้นลงคนละจังหวะ
     ⚠️ **ต้องเป็น `.hero-card .shot` (ใบใน) ไม่ใช่ `.hero-card` (ใบนอก)** — ใบนอก
        ถือมุมเอียงคงที่ไว้ อนิเมชันที่ตั้ง `transform` จะ **แทนที่ทั้งค่า** ⇒ มุมเอียง
        หายไปตั้งแต่เฟรมแรก (บทเรียนเดิมของ iz-hero-float ในบล็อก ⑰)
     ⚠️ คนละความเร็ว คนละ delay จึงอ่านเป็น 3 ระนาบที่ลอยอิสระ ไม่ใช่ภาพเดียวที่
        ขยับทั้งแผง (ถ้าเท่ากันจะดูเหมือนภาพนิ่งที่เลื่อน) */
  .hero-card .shot {
    animation: iz-float 9s ease-in-out 1.2s infinite;
  }
  .hero-card:first-child .shot {
    animation-duration: 12s;
    animation-delay: 0.4s;
  }
  .hero-card:last-child .shot {
    animation-duration: 10.5s;
    animation-delay: 2.1s;
  }

  /* แสงกวาดผ่านภาพในการ์ดกิจการตอนชี้ — ใช้ keyframe ตัวเดียวกับปุ่มหลัก
     ⚠️ ที่ทางของแถบแสง (`.vcard-media::after`) อยู่ในบล็อก ⑲ ไม่ใช่ที่นี่ */
  .vcard:hover .vcard-media::after {
    animation: iz-sheen 0.9s ease-out;
  }

  /* จุดหน้าป้าย "เปิดใช้งานแล้ว" เต้นเบา ๆ
     ⚠️ **ใช้ iz-pip ไม่ใช่ iz-dot** ถึงจะเป็นจังหวะเดียวกัน — `iz-dot` เต้นด้วย
        แสงฟุ้ง**สีฟ้าอ่อน** ซึ่งออกแบบมาสำหรับพื้นเข้มใน hero วางบนการ์ดพื้นขาว
        แล้วแทบไม่เห็นอะไรเลย ⇒ ที่นี่เต้นด้วยขนาดแทน */
  .vcard-tag::before {
    animation: iz-pip 3.4s ease-in-out infinite;
  }

  /* ── สไลด์มือถือ: การไถระหว่างใบ ─────────────────────────────────────────── */
  .izdeck-track {
    transition: transform 0.78s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .izdeck-item {
    transition:
      transform 0.78s cubic-bezier(0.22, 1, 0.36, 1),
      opacity 0.55s ease,
      filter 0.55s ease;
  }
  .izdeck-copy-item {
    animation: iz-copy-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  /* ── เผยตอนเลื่อนถึง ─────────────────────────────────────────────────────
   * ⚠️ **ทั้งก้อนต้องอยู่ใน @supports** — เบราว์เซอร์ที่ไม่รู้จัก
   *    `animation-timeline` จะเล่นแบบจับเวลาทันทีที่โหลด
   * ⚠️ ไล่จังหวะทีละคอลัมน์ด้วยการเลื่อน **จุดเริ่มของช่วง** ไม่ใช่
   *    `animation-delay` — ไทม์ไลน์นี้เป็นระยะเลื่อน ไม่ใช่เวลา delay ไม่มีผล
   */
  @supports (animation-timeline: view()) {
    /* ⚠️ **ช่วงต้องจบภายใน `entry` เท่านั้น ห้ามใช้ `cover`** — วัดแล้วเมื่อ
     *    2026-09-05 ด้วย `_shots/iz_motion_ui.js` ช่วงเดิมคือ `entry 8% cover 26%`
     *    แล้วคำถามพบบ่อย 3-6 ข้อสุดท้าย (อยู่ใกล้ท้ายเอกสาร) **ค้างที่ opacity
     *    0.79–0.90 อย่างถาวร** เพราะเลื่อนหน้าต่อไม่ได้แล้ว จึงไปไม่ถึง cover 26%
     *    ⇒ ตัวหนังสือจาง ๆ ที่ไม่มีวันชัด โดยไม่มี error อะไรเลย · ยิ่งจอเตี้ยยิ่งแย่
     *
     *    `entry 100%` = ธาตุเข้ามาในจอครบใบ ซึ่งท้ายเอกสารยังไปถึงได้เสมอ
     *    จบที่ 55% เพื่อให้ธาตุที่ **สูงกว่าจอ** (เช่น .izdeck บนมือถือ) จบได้
     *    ด้วย — ธาตุแบบนั้นไปไม่ถึง entry 100% ตลอดกาล
     */
    .section-head,
    .card-soft,
    .trust-item,
    .flow-step,
    .term,
    .faq-item,
    .izdeck,
    .soon-tile {
      animation: iz-rise 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
      animation-timeline: view();
      animation-range: entry 0% entry 55%;
    }

    /* ไล่จังหวะของใบ "กำลังทำ" ทีละใบในแถว
       ⚠️ ตารางเป็น `auto-fill` ⇒ **จำนวนคอลัมน์จริงไม่แน่นอน** (1-4 ใบต่อแถว
          แล้วแต่ความกว้าง) การไล่ด้วย nth-child จึงเป็นการไล่ "ตามลำดับใบ"
          ไม่ใช่ "ตามคอลัมน์" — ที่จอกว้างมันบังเอิญตรงกัน ที่จอแคบมันกลายเป็น
          การไล่ทีละใบซึ่งก็ยังอ่านดี · อย่าพยายามทำให้ตรงคอลัมน์เป๊ะ ๆ
          CSS ไม่มีทางรู้ว่า auto-fill ตัดสินใจได้กี่คอลัมน์
       ⚠️ ไล่ด้วยการเลื่อน **จุดเริ่มของช่วง** ไม่ใช่ animation-delay — ไทม์ไลน์นี้
          เป็นระยะเลื่อนหน้า ไม่ใช่เวลา delay ไม่มีผลเลย */
    .soon-tile:nth-child(4n + 2) {
      animation-range: entry 6% entry 61%;
    }
    .soon-tile:nth-child(4n + 3) {
      animation-range: entry 12% entry 67%;
    }
    .soon-tile:nth-child(4n + 4) {
      animation-range: entry 18% entry 73%;
    }

    /* แถบบน: ทึบขึ้นตอนเลื่อนพ้นจอแรกไปนิดเดียว (~5rem)
       ⚠️ ต้องอยู่ใน @supports เหมือนทุกอย่างที่ผูก scroll — เบราว์เซอร์ที่ไม่รู้จัก
          `animation-timeline` จะเล่นแบบจับเวลา ⇒ แถบบนทึบตั้งแต่ยังไม่มีใครเลื่อน
          แล้วค้างอยู่อย่างนั้นทั้งหน้า (อาการเดียวกับแถบความคืบหน้าการอ่าน) */
    .site-nav {
      animation: iz-nav-lift linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 5rem;
    }

    .row > [class*="col-"]:nth-child(3n + 2) .card-soft {
      animation-range: entry 8% entry 63%;
    }
    .row > [class*="col-"]:nth-child(3n) .card-soft {
      animation-range: entry 16% entry 71%;
    }
    .trust-item {
      animation-range: entry 5% entry 60%;
    }

    /* เส้นเชื่อมระหว่างขั้นตอน "วาด" ออกมาตอนเลื่อนถึง (เฉพาะจอกว้างที่มีเส้น) */
    .flow-step::after {
      animation: iz-progress 0.9s ease-out both;
      animation-timeline: view();
      animation-range: entry 10% entry 75%;
      transform-origin: left center;
    }

    /* เส้นใต้หัวข้อ section ยืดออกตอนเลื่อนถึง */
    .section-title::after {
      animation: iz-underline 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
      animation-timeline: view();
      animation-range: entry 6% entry 58%;
    }

    /* ⚠️ ไม่มีอนิเมชันผูก scroll ให้ `.hero-win` โดยตั้งใจ — เคยลองแล้วไม่ทำงาน
       เหตุผลเต็มเขียนไว้ที่กฎ `.hero-win` ในบล็อก ⑱ อ่านที่นั่นก่อนจะลองใหม่ */

    .scroll-progress {
      display: block;
      position: fixed;
      inset: 0 0 auto;
      height: 3px;
      z-index: 40;
      background: linear-gradient(
        90deg,
        var(--iz-blue-700) 0%,
        var(--iz-blue) 45%,
        var(--iz-cyan-2) 100%
      );
      transform-origin: left center;
      animation: iz-progress linear both;
      animation-timeline: scroll(root block);
    }
  }
}

/* ⚠️ คนที่ตั้งค่าเครื่องว่า "ลดการเคลื่อนไหว" ต้องได้หน้าที่นิ่งจริง ๆ
 *
 * ⚠️ **บล็อกนี้เหลือหน้าที่แค่ "ของที่เคลื่อนตอนเอาเมาส์ชี้"** — อนิเมชันที่
 *    ขยับเองย้ายไปอยู่ใต้ `no-preference` ข้างบนหมดแล้ว จึงไม่มีอะไรต้องล้าง
 *
 * ⚠️ `* { transition-duration }` มีความจำเพาะ 0 — มัน **ทับ `.card-soft` กับ
 *    `.shot` ไม่ได้** (ซึ่งประกาศ transition ไว้เอง) จึงต้องล้าง `transform`
 *    ตอน :hover ทีละตัวแบบข้างล่างนี้ ไม่ใช่พึ่งบรรทัด `*` อย่างเดียว
 *    ⚠️ เพิ่มเอฟเฟกต์ hover ที่ขยับตำแหน่งใหม่เมื่อไร ต้องมาเติมที่บรรทัดนั้นด้วย
 */
@media (prefers-reduced-motion: reduce) {
  * {
    transition-duration: 0.01ms;
    animation-duration: 0.01ms;
  }
  .btn-primary:hover,
  .card-soft:hover,
  .card-soft:hover .feature-icon,
  .shot:hover,
  .vcard:hover .vcard-media img,
  .soon-tile:hover,
  .soon-tile:hover .soon-icon {
    transform: none;
  }
}

/* ═════════════════════════════════════════════════════════════════════════════
 * ㉑ แผง "ได้รับใบสมัครแล้ว" หน้าสมัคร (2026-09-13 · resources/views/signup.php #applyDone)
 * ═════════════════════════════════════════════════════════════════════════════
 *
 * เดิมหลังส่งฟอร์มเหลือกล่อง alert สีเขียวบรรทัดเดียว — เจ้าของทักว่า "ดูธรรมดาเกินไป
 * ไม่เข้ากับธีม" · แผงนี้บอก 3 อย่างที่คนเพิ่งกดส่งอยากรู้: ส่งถึงแล้วจริงไหม ·
 * ต่อจากนี้เกิดอะไรขึ้น · ต้องเฝ้าที่ไหน (อีเมล + โฟลเดอร์สแปม)
 *
 * ⚠️ เครื่องหมายถูกเป็น **สีแบรนด์ ไม่ใช่เขียว** — สีเขียวในเว็บนี้สงวนไว้ให้ LINE (#06c755)
 *    ปุ่ม LINE อยู่ในแผงเดียวกัน ถ้าเครื่องหมายถูกเขียวด้วย 2 อย่างจะอ่านเป็นเรื่องเดียวกัน
 * ⚠️ อนิเมชันเล่นเฉพาะใต้ prefers-reduced-motion: no-preference — ค่าตั้งต้นคือ
 *    "วาดเสร็จแล้ว" แล้วค่อยย้อนให้วาดใหม่ในบล็อก motion (ไม่ใช่กลับกัน) คนที่ลดการ
 *    เคลื่อนไหวจึงได้เครื่องหมายเต็มทันที
 */
.apply-done {
  text-align: center;
  padding: var(--iz-s-3) var(--iz-s-2) var(--iz-s-2);
  outline: none;
}
.apply-done-mark {
  width: 76px;
  height: 76px;
  margin: 0 auto var(--iz-s-4);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(
    135deg,
    var(--iz-blue-700) 0%,
    var(--iz-blue) 100%
  );
  box-shadow:
    0 0 0 8px var(--iz-accent-050),
    0 14px 30px rgba(15, 98, 214, 0.28);
}
.apply-done-ring {
  fill: none;
  stroke: rgba(255, 255, 255, 0.35);
  stroke-width: 2;
}
.apply-done-tick {
  fill: none;
  stroke: #ffffff;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 34;
  stroke-dashoffset: 0;
}
.apply-done-title {
  font-size: var(--iz-fs-h2);
  font-weight: 700;
  line-height: 1.35;
  color: var(--iz-text);
  margin: 0 0 var(--iz-s-2);
  overflow-wrap: anywhere;
}
/* ⚠️ ไม่ใช้ .txt-grad — ไล่สีนั้นทำมาสำหรับพื้นเข้มของ hero บนการ์ดสว่างวัดได้ไม่ถึง 3:1 */
.apply-done-shop {
  color: var(--iz-accent);
}
.apply-done-sub {
  color: var(--iz-text-2);
  font-size: var(--iz-fs-lead);
  margin: 0 auto var(--iz-s-5);
  max-width: 34rem;
}

/* ข้อมูลที่เพิ่งกรอก — ให้ตรวจได้ทันทีว่าพิมพ์อีเมล/ลิงก์ถูก ก่อนไปนั่งรอผิดที่ */
.apply-done-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: var(--iz-s-3);
  margin: 0 0 var(--iz-s-5);
  text-align: left;
}
.apply-done-facts > div {
  background: var(--iz-grad-tint);
  box-shadow: inset 0 0 0 1px rgba(56, 146, 254, 0.18);
  border-radius: var(--iz-r-sm);
  padding: var(--iz-s-3) var(--iz-s-4);
}
.apply-done-facts dt {
  font-size: var(--iz-fs-xs);
  font-weight: 600;
  color: var(--iz-accent);
  margin-bottom: 2px;
}
.apply-done-facts dd {
  margin: 0;
  font-weight: 600;
  color: var(--iz-text);
  overflow-wrap: anywhere;
}

/* ── ไทม์ไลน์ ────────────────────────────────────────────────────────────── */
.apply-timeline {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--iz-s-5);
  text-align: left;
}
.apply-timeline li {
  position: relative;
  display: flex;
  gap: var(--iz-s-3);
  align-items: flex-start;
  padding-bottom: var(--iz-s-4);
  font-size: var(--iz-fs-sm);
  color: var(--iz-text);
}
.apply-timeline li:last-child {
  padding-bottom: 0;
}
/* เส้นเชื่อมระหว่างจุด — วาดจากจุดนี้ลงไปหาจุดถัดไป ไม่มีเส้นใต้จุดสุดท้าย */
.apply-timeline li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 13px;
  top: 30px;
  bottom: 2px;
  width: 2px;
  background: var(--iz-line);
}
.apply-timeline-dot {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  font-size: var(--iz-fs-xs);
  font-weight: 700;
  color: var(--iz-accent);
  background: var(--iz-surface);
  box-shadow: inset 0 0 0 2px var(--iz-line);
}
.apply-timeline li > div {
  padding-top: 3px;
  line-height: 1.7;
}
.apply-timeline li.is-done .apply-timeline-dot {
  background: var(--iz-accent);
  box-shadow: none;
}
/* ✓ วาดด้วยเส้นขอบ ไม่ใช่อักขระ — ฟอนต์บางตัวไม่มีเครื่องหมายถูกแล้วขึ้นเป็นกล่อง */
.apply-timeline li.is-done .apply-timeline-dot::before {
  content: "";
  width: 7px;
  height: 12px;
  margin-top: -3px;
  border: solid #ffffff;
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}
.apply-timeline li.is-done::after {
  background: linear-gradient(var(--iz-accent), var(--iz-line));
}
.apply-timeline li.is-next .apply-timeline-dot {
  box-shadow: inset 0 0 0 2px var(--iz-accent);
}

.apply-done-tip {
  text-align: left;
  font-size: var(--iz-fs-sm);
  line-height: 1.7;
  color: #6a4a00;
  background: #fff7e6;
  box-shadow: inset 0 0 0 1px #f5d48a;
  border-radius: var(--iz-r-sm);
  padding: var(--iz-s-3) var(--iz-s-4);
  margin-bottom: var(--iz-s-5);
}
.apply-done-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--iz-s-3);
}

@media (prefers-reduced-motion: no-preference) {
  .apply-done.is-shown .apply-done-mark {
    animation: iz-done-pop 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.3) both;
  }
  .apply-done.is-shown .apply-done-tick {
    stroke-dashoffset: 34;
    animation: iz-done-draw 0.45s 0.25s ease-out forwards;
  }
  .apply-done.is-shown .apply-timeline li {
    animation: iz-done-rise 0.4s ease-out both;
  }
  .apply-done.is-shown .apply-timeline li:nth-child(2) {
    animation-delay: 0.08s;
  }
  .apply-done.is-shown .apply-timeline li:nth-child(3) {
    animation-delay: 0.16s;
  }
  .apply-done.is-shown .apply-timeline li:nth-child(4) {
    animation-delay: 0.24s;
  }
}
@keyframes iz-done-pop {
  from {
    transform: scale(0.6);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes iz-done-draw {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes iz-done-rise {
  from {
    transform: translateY(6px);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}

/* ═══ ㉒ ฟอร์มสมัคร: ประกอบกิจการหลัก + จำนวนสาขาล็อกตามแพ็ก (2026-09-15) ═════════
 * ⚠️ ตัวเลือกเรียงเป็นแถวที่ตัดบรรทัดเองได้ — จอแคบลงมาเป็นทีละบรรทัด ไม่ล้นจอ
 * ⚠️ ช่องจำนวนสาขาที่ถูกล็อก (readonly) ต้องดูออกว่า "แก้ไม่ได้" — ไม่งั้นคนกดพิมพ์แล้วงงว่าทำไมไม่ขยับ
 *    ใช้พื้นเทาอ่อน ไม่ใช่ disabled (ช่อง disabled ไม่ถูกส่งไปกับฟอร์ม)
 */
.biz-options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--iz-s-1) var(--iz-s-5);
}
.branches-input[readonly] {
  background-color: var(--iz-accent-050);
  color: var(--iz-text-2);
  cursor: not-allowed;
}