/* ── Scroll reveal ── */
.reveal {
  opacity: 0;
  transform: translateY(60px) scale(0.96);
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ── Pricing cards ── */

#plans .card {
  background: #fff;
  color: var(--ink-700);
  border: 1px solid var(--ink-100);
  border-radius: 14px;
  overflow: hidden;
}

#plans .card .card-title {
  color: var(--brand-600);
  font-weight: 700;
  letter-spacing: 0.04em;
  font-size: 1.1rem;
}

#plans .card .card-text.lead {
  color: var(--ink-500);
  font-size: 0.92rem;
}

#plans .card .price {
  color: var(--brand-500);
  font-weight: 700;
  font-size: 1.25rem;
  margin: 10px 0 4px;
}

#plans .card .text-center.muted {
  color: var(--ink-300);
  font-size: 0.82rem;
}

#plans .card ul {
  color: var(--ink-700);
  font-size: 0.88rem;
  padding-left: 1.2rem;
  margin-top: 8px;
}

#plans .card ul li {
  margin-bottom: 4px;
}

#plans .card .btn-light {
  background: var(--brand-500);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.03em;
  padding: 10px 22px;
  transition: background 200ms ease;
}

#plans .card:hover .btn-light {
  background: var(--brand-600);
}

/* Transitions */
#plans .pricing-card .card {
  transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 220ms ease, border-color 220ms ease, background 220ms ease;
  transform-origin: center;
  will-change: transform, box-shadow;
}

/* Hover state */
#plans .pricing-card .card:hover {
  transform: scale(1.035);
  border-color: var(--brand-500);
  box-shadow: 0 8px 28px rgba(var(--brand-500-rgb), 0.15);
  background: var(--brand-50);
  cursor: pointer;
}

/* Keep internal text layout stable */
#plans .pricing-card .card .card-body {
  backface-visibility: hidden;
}

/* Respect reduced-motion user preference */
@media (prefers-reduced-motion: reduce) {
  #plans .pricing-card .card {
    transition: none;
  }
  #plans .pricing-card .card:hover {
    transform: none;
    box-shadow: none;
  }
}

/* ── Stats counters ── */
.stats-section {
  background: var(--ink-50);
  padding: 56px 0;
}

.stat-counter {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.stat-number {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  color: var(--brand-600);
  line-height: 1;
}

.stat-label {
  font-size: 0.88rem;
  color: var(--ink-500);
  text-align: center;
  line-height: 1.3;
}

/* ── Testimonials carousel ── */
#testimonialCarousel .carousel-inner {
  height: 520px; /* mobile: 2 cards stacked */
  overflow: hidden;
}

@media (min-width: 576px) {
  #testimonialCarousel .carousel-inner {
    height: 310px; /* sm+: 2 cards side by side */
  }
}

#testimonialCarousel .carousel-control-prev,
#testimonialCarousel .carousel-control-next {
  width: 40px;
  filter: invert(18%) sepia(90%) saturate(3000%) hue-rotate(230deg) brightness(80%);
}

/* ── Testimonials ── */
.testimonial-card {
  border: 1px solid var(--ink-100);
  border-radius: 14px;
  transition: transform 220ms ease, box-shadow 220ms ease;
}

.testimonial-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(var(--brand-500-rgb), 0.1);
}

.testimonial-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  overflow: hidden;
}

.testimonial-card h6 {
  color: var(--brand-600);
}

.testimonial-card small {
  font-weight: 600;
  letter-spacing: 0.03em;
}

/* ── Demo booking ── */
.demo-section {
  background: var(--ink-50);
}

.calendly-embed-wrapper {
  max-width: 900px;
  margin: 0 auto;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(16, 24, 40, 0.08);
  background: #fff;
}