/* ============ Testimonials ============ */
.testimonials-section {
  position: relative;
  overflow: hidden;
  background: var(--pattern-dots), var(--accent-100);
  -webkit-mask: var(--mask-wavy);
  mask: var(--mask-wavy);
}
.testimonials-glow {
  position: absolute;
  top: 25%;
  left: 0;
  width: 288px;
  height: 288px;
  background: var(--primary-200);
  border-radius: var(--radius-pill);
  filter: blur(80px);
  opacity: 0.5;
  pointer-events: none;
}
.testimonials-inner {
  position: relative;
  max-width: 720px;
}
.testimonial-slider {
  position: relative;
}
.testimonial-card {
  display: none;
  background: var(--color-surface);
  border: 3px solid var(--ink);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-md);
  padding: var(--space-8) var(--space-6);
}
.testimonial-card.is-active {
  display: block;
  animation: fadeInUp var(--dur-slow) var(--ease-out);
}
@media (min-width: 768px) {
  .testimonial-card {
    padding: var(--space-10);
  }
}
.testimonial-head {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
.testimonial-quote-icon {
  width: 52px;
  height: 52px;
  border: var(--border-strong);
  border-radius: var(--radius-pill);
  background: var(--cream-400);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.testimonial-stars {
  display: flex;
  gap: var(--space-0-5);
  padding-top: var(--space-1);
}
.testimonial-content {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--color-heading);
  font-weight: var(--fw-medium);
  line-height: var(--lh-normal);
  margin-bottom: var(--space-6);
  min-height: 72px;
}
.testimonial-author {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: var(--border-w) dashed var(--gray-300);
}
.testimonial-avatar {
  width: 52px;
  height: 52px;
  border: var(--border-strong);
  border-radius: var(--radius-pill);
  overflow: hidden;
  background: var(--tint-2);
  flex-shrink: 0;
}
.testimonial-name {
  font-family: var(--font-display);
  font-weight: var(--fw-heading);
  color: var(--color-heading);
}
.testimonial-role {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.testimonial-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  margin-top: var(--space-6);
}
.testimonial-nav {
  width: 44px;
  height: 44px;
  border: var(--border-strong);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--ink);
  box-shadow: var(--shadow-pop-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--dur-fast) var(--ease-spring), box-shadow var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.testimonial-nav:hover {
  background: var(--cream-400);
  transform: var(--lift);
  box-shadow: var(--shadow-pop);
}
.testimonial-dots {
  display: flex;
}
/* The button is a 24x24 touch target (WCAG 2.5.8); the visible pill is drawn by ::before. */
.testimonial-dot {
  position: relative;
  width: 24px;
  height: 24px;
  padding: 0;
  background: none;
}
.testimonial-dot::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  border: 1.5px solid var(--ink);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  transform: translate(-50%, -50%);
  transition: width var(--dur-base) var(--ease-spring), background-color var(--dur-base) var(--ease-out);
}
.testimonial-dot:hover::before {
  background: var(--cream-200);
}
.testimonial-dot.is-active::before {
  width: 22px;
  background: var(--primary-500);
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}