/* Service page components (ServiceHero, FeatureGrid, FaqAccordion, CtaBanner) — ported from their scoped <style> blocks. */

/* ── ServiceHero ── */
.group:hover .group-hover\:scale-105 {
  transform: scale(1.05);
}

/* Bouncy gold pill — hard-offset shadow grows on hover, drops on press. */
.hero-cta-primary {
  transition: transform var(--dur-mid) var(--ease-pop), box-shadow var(--dur-mid) var(--ease-pop), background var(--dur-mid) var(--ease-pop);
}
.hero-cta-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 0 var(--gold-deep), var(--glow-gold);
  background: linear-gradient(135deg, var(--gold-glow), var(--gold-glow) 55%, var(--gold)) !important;
}
.hero-cta-primary:active {
  transform: translateY(1px);
  box-shadow: 0 2px 0 var(--gold-deep), var(--glow-gold);
}

.hero-cta-outline {
  transition: background-color var(--dur-mid) var(--ease-pop), transform var(--dur-mid) var(--ease-pop);
}
.hero-cta-outline:hover {
  background-color: rgba(242, 182, 54, 0.08);
  transform: translateY(-2px);
}
.hero-cta-outline:active {
  transform: translateY(1px);
}

/* ── FeatureGrid ── */
/* Bouncy float on the night canvas — gold ring + soft halo on hover. */
.feature-card {
  transition: border-color var(--dur-mid) var(--ease-pop), transform var(--dur-mid) var(--ease-pop), box-shadow var(--dur-mid) var(--ease-pop);
}

.feature-card:hover {
  border-color: rgba(242, 182, 54, 0.35) !important;
  transform: translateY(-4px);
  box-shadow: var(--glow-gold);
}

/* ── FaqAccordion ── */
.faq-item {
  transition: border-color var(--dur-mid) var(--ease-pop), box-shadow var(--dur-mid) var(--ease-pop);
}

.faq-item:hover {
  border-color: rgba(242, 182, 54, 0.25) !important;
}

.faq-item[open] {
  border-color: rgba(242, 182, 54, 0.35) !important;
  box-shadow: var(--glow-gold);
}

/* ── CtaBanner ── */
/* Bouncy gold pill — hard-offset shadow grows on hover, drops on press. */
.cta-primary {
  transition: transform var(--dur-mid) var(--ease-pop), box-shadow var(--dur-mid) var(--ease-pop), background var(--dur-mid) var(--ease-pop);
}
.cta-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 0 var(--gold-deep), var(--glow-gold);
  background: linear-gradient(135deg, var(--gold-glow), var(--gold-glow) 55%, var(--gold)) !important;
}
.cta-primary:active {
  transform: translateY(1px);
  box-shadow: 0 2px 0 var(--gold-deep), var(--glow-gold);
}

.cta-outline {
  transition: background-color var(--dur-mid) var(--ease-pop), transform var(--dur-mid) var(--ease-pop);
}
.cta-outline:hover {
  background-color: rgba(242, 182, 54, 0.08);
  transform: translateY(-2px);
}
.cta-outline:active {
  transform: translateY(1px);
}