/* ========== Basic site-level polish ========== */

.hero-section,
.hero-section * {
  font-family: 'Poppins', sans-serif !important;
}

/* ensure the material icon font renders nicely */
.material-symbols-outlined { vertical-align: middle; }

/* Buttons - animated / elevated CTA */
.btn-cta {
  transition: transform .28s cubic-bezier(.2,.9,.2,1), box-shadow .28s ease, filter .28s ease;
  will-change: transform, box-shadow;
}
.btn-cta:hover { transform: translateY(-6px) scale(1.01); filter: saturate(1.02); }

/* subtle animated button used in header */
.btn-animated {
  position: relative;
  overflow: hidden;
}
.btn-animated::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(79,70,229,0.08), rgba(245,158,11,0.06));
  opacity: 0;
  transition: opacity .25s ease;
}
.btn-animated:hover::after { opacity: 1; }

/* card styles */
.card {
  background: rgba(255,255,255,0.9);
  border-radius: 1rem;
  padding: 1.5rem;
  border: 1px solid rgba(15,23,42,0.04);
  box-shadow: 0 6px 18px rgba(2,6,23,0.04);
  text-align: center;
}
.dark .card { background: rgba(15,23,42,0.45); border-color: rgba(255,255,255,0.03); }

/* icon circle used in cards */
.icon-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 64px;
  width: 64px;
  border-radius: 9999px;
  background: rgba(79,70,229,0.08);
  margin: 0 auto 1rem auto;
}

/* feature card */
.feature-card {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  background: rgba(255,255,255,0.9);
  border-radius: 1rem;
  padding: 1.25rem;
  border: 1px solid rgba(15,23,42,0.04);
  box-shadow: 0 4px 14px rgba(2,6,23,0.03);
}
.dark .feature-card { background: rgba(15,23,42,0.45); border-color: rgba(255,255,255,0.03); }

.feature-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(245,158,11,0.12);
}

/* testimonial slide */
.testimonial-slide {
  background: rgba(255,255,255,0.95);
  border-radius: 1rem;
  padding: 1.25rem;
  border: 1px solid rgba(15,23,42,0.04);
  min-height: 170px;
}
.dark .testimonial-slide { background: rgba(2,6,23,0.5); border-color: rgba(255,255,255,0.03); }

/* Swiper navigation visible polish */
.swiper-button-prev, .swiper-button-next {
  color: var(--tw-color-primary, #4F46E5);
  background: rgba(255,255,255,0.9);
  border-radius: 9999px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(2,6,23,0.06);
}
.dark .swiper-button-prev, .dark .swiper-button-next { background: rgba(15,23,42,0.6); color: #fff; }

/* control button (theme + audio) */
.control-btn {
  background: rgba(255,255,255,0.95);
  border-radius: 9999px;
  width: 52px;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(2,6,23,0.08);
  cursor: pointer;
  transition: transform .18s ease, background .18s ease;
  border: none;
}
.control-btn:hover { transform: translateY(-4px); }
.dark .control-btn { background: rgba(17,24,39,0.6); color: #fff; }

/* small social icon style */
.social {
  width: 40px; height: 40px; display: inline-flex; align-items:center; justify-content:center;
  background: rgba(241,245,249,0.9);
  border-radius: 9999px; color: #374151;
  transition: all .18s ease;
}
.social:hover { background: var(--tw-color-primary, #4F46E5); color: white; transform: translateY(-4px); }

/* Unmute overlay card */
#unmuteCard { transition: transform .18s ease, opacity .18s ease; }
#unmuteCard.hidden { opacity: 0; transform: translateY(6px); pointer-events: none; }

/* small responsiveness tuning */
@media (max-width: 768px) {
  .btn-cta { padding-left: 1.25rem; padding-right: 1.25rem; }
  .feature-card { flex-direction: column; }
}

/* minor accessibility: focus outlines */
:focus { outline: 3px solid rgba(79,70,229,0.12); outline-offset: 3px; }
