/* พื้นหลังหน้าร้าน: แสงส้มอุ่น + จุดแบบแผ่นรองพิมพ์ PEI + เส้นชั้นพิมพ์บาง ๆ
   แยกไฟล์ไว้ ถอดออกได้โดยไม่กระทบเนื้อหา การ์ด หรือเครื่องคำนวณราคา */
.home-page {
  --bd-dot: #53644d1f;
  --bd-layer: #53644d0a;
  --bd-glow-warm: #e0782a1f;
  --bd-glow-sage: #7f9c7a1c;
  --bd-section: #edf1ebd9;
}
[data-theme="dark"] .home-page {
  --bd-dot: #ffffff12;
  --bd-layer: #ffffff07;
  --bd-glow-warm: #ff9b5017;
  --bd-glow-sage: #6f9a8612;
  --bd-section: #151918d9;
}

/* ชั้นหลังสุด อยู่กับที่ตอนเลื่อน: แสงสองมุม + ลายจุดที่จางลงตามระยะ */
.home-page::before,
.home-page::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.home-page::before {
  background:
    radial-gradient(60vmax 45vmax at 88% 8%, var(--bd-glow-warm), transparent 70%),
    radial-gradient(55vmax 40vmax at 4% 96%, var(--bd-glow-sage), transparent 70%);
}
.home-page::after {
  background-image: radial-gradient(circle at 1px 1px, var(--bd-dot) 1.1px, transparent 1.6px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(120% 90% at 70% 20%, #000 0%, #0008 45%, transparent 85%);
  mask-image: radial-gradient(120% 90% at 70% 20%, #000 0%, #0008 45%, transparent 85%);
}

/* ส่วนที่มีพื้นสี: โปร่งนิด ให้ลายด้านหลังซึมผ่าน ขอบบน-ล่างค่อย ๆ จาง
   และมีเส้นแนวนอนถี่ ๆ เหมือนชั้นพิมพ์ของงาน FDM */
.home-page :is(#estimate, #how, #contact) {
  position: relative;
  isolation: isolate;
  background: transparent;
}
[data-theme="dark"] .home-page #estimate { background: transparent; }
.home-page :is(#estimate, #how, #contact)::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    repeating-linear-gradient(180deg, var(--bd-layer) 0 1px, transparent 1px 7px),
    var(--bd-section);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 72px, #000 calc(100% - 72px), transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 72px, #000 calc(100% - 72px), transparent 100%);
}

/* หน้าจอเล็ก: ลดลายให้เบาลง อ่านง่ายและไม่ลายตา */
@media (max-width: 700px) {
  .home-page::after { background-size: 18px 18px; opacity: .8; }
  .home-page :is(#estimate, #how, #contact)::before {
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
  }
}
@media print { .home-page::before, .home-page::after, .home-page :is(#estimate, #how, #contact)::before { display: none; } }