/* เสี่ยสัก ซื้อซากรถ — supplementary styles (Tailwind CDN handles utility classes) */

body { font-family: 'Noto Sans Thai', sans-serif; }
.font-display { font-family: 'Kanit', sans-serif; }

.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle;
}

.glass-card {
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(18, 68, 52, 0.10);
}

.hero-gradient {
  background: radial-gradient(circle at 75% 25%, #E4F3E9 0%, #FFFDF7 55%, #FFFDF7 100%);
}

.step-connector::after {
  content: '';
  position: absolute;
  top: 26px;
  left: 100%;
  width: 100%;
  border-top: 2px dashed #B8923F;
  transform: translateY(-50%);
  z-index: -1;
}
@media (max-width: 1024px) {
  .step-connector::after { display: none; }
}

/* scroll reveal */
.reveal-init { opacity: 0; transform: translateY(2.5rem); }
.reveal-in { opacity: 1; transform: translateY(0); }

/* robot hexagon badge (signature element, used as floating accent on hero photo) */
.hexbadge-float {
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
.scan-line {
  position: absolute; left: 8%; right: 8%; height: 2px;
  background: linear-gradient(90deg, transparent, #06C755, transparent);
  animation: scanmove 2.6s linear infinite;
}
@keyframes scanmove {
  0% { top: 18%; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { top: 82%; opacity: 0; }
}

/* FAQ accordion */
.faq-a { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.faq-item.open .faq-a { max-height: 400px; }
.faq-item.open .faq-caret { transform: rotate(45deg); }
.faq-caret { transition: transform .25s; }

/* mobile nav */
.main-nav { transition: max-height .25s ease; }