/* ===== Base / icons ===== */
.material-symbols-outlined {
  font-variation-settings:
    "FILL" 0,
    "wght" 400,
    "GRAD" 0,
    "opsz" 24;
  display: inline-block;
  vertical-align: middle;
}

html {
  scroll-behavior: smooth;
}

/* ===== Hero & imagery ===== */
.hero-gradient {
  background: linear-gradient(
    90deg,
    rgba(22, 40, 57, 0.96) 0%,
    rgba(22, 40, 57, 0.78) 45%,
    rgba(22, 40, 57, 0.15) 100%
  );
}

.hero-gradient-bottom {
  background: linear-gradient(
    to top,
    rgba(22, 40, 57, 0.95) 0%,
    rgba(22, 40, 57, 0.35) 60%,
    rgba(22, 40, 57, 0) 100%
  );
}

.low-profile-shadow {
  box-shadow: 0px 4px 20px rgba(44, 62, 80, 0.05);
  transition:
    box-shadow 0.3s ease,
    transform 0.3s ease;
}
.low-profile-shadow:hover {
  box-shadow: 0px 12px 32px rgba(44, 62, 80, 0.12);
  transform: translateY(-4px);
}

.bg-noise {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
}

/* ===== Scrollbar ===== */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: #f3f4f4;
}
::-webkit-scrollbar-thumb {
  background: #b5c8df;
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: #a23f00;
}

/* ===== Motion-driven reveal utilities =====
   Elements start hidden/offset; assets/main.js animates them
   into view with Motion when they enter the viewport. If JS
   fails to load, the fallback rule below still reveals content. */
[data-animate] {
  opacity: 0;
  transform: translateY(28px);
  will-change: transform, opacity;
}
[data-animate="fade"] {
  transform: none;
}
[data-animate="left"] {
  transform: translateX(-32px);
}
[data-animate="right"] {
  transform: translateX(32px);
}
[data-animate="zoom"] {
  transform: scale(0.92);
}
.js-motion-ready [data-animate] {
  transition: none;
}
html:not(.js-motion-ready) [data-animate] {
  animation: fallback-reveal 0.01s 0.4s forwards;
}
@keyframes fallback-reveal {
  to {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  [data-animate] {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ===== Mobile menu ===== */
#mobile-menu {
  max-height: 0;
  overflow: hidden;
}
#mobile-menu.open {
  max-height: 640px;
}

/* ===== WhatsApp floating button ===== */
.whatsapp-fab {
  animation: wa-pulse 2.6s ease-out infinite;
}
@keyframes wa-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.55);
  }
  70% {
    box-shadow: 0 0 0 14px rgba(37, 211, 102, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
  }
}

/* ===== Marquee (brands strip) ===== */
.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 28s linear infinite;
}
@keyframes marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* ===== FAQ accordion ===== */
.accordion-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}
.accordion-trigger[aria-expanded="true"] .accordion-icon {
  transform: rotate(45deg);
}
.accordion-icon {
  transition: transform 0.3s ease;
}

/* ===== Star rating ===== */
.star-rating .material-symbols-outlined {
  font-size: 16px;
}

/* ===== Toast ===== */
#toast {
  transform: translateY(120%);
  opacity: 0;
}
#toast.show {
  transform: translateY(0);
  opacity: 1;
}