/* =========================================
   TESTIMONIALS — testimonials.css
   ========================================= */

/* ── SECTION ─────────────────────────────── */

.testimonials-section {
  padding: 96px 48px 80px;
}

/* ── HEADER ──────────────────────────────── */

.testimonials-header {
  margin-bottom: 52px;
}

.testimonials-kicker {
  display:        flex;
  align-items:    center;
  gap:            10px;
  font-size:      11px;
  color:          var(--blue);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom:  16px;
}

.testimonials-kicker::before {
  content:       "";
  width:         20px;
  height:        1.5px;
  background:    var(--blue);
  border-radius: 2px;
}

.testimonials-title {
  font-size:      clamp(2.8rem, 4.2vw, 4.4rem);
  line-height:    1.00;
  letter-spacing: -0.06em;
  font-weight:    300;
  color:          var(--text-primary);
}

.testimonials-title span { color: var(--blue); }

/* ── GRID ────────────────────────────────── */

.testimonials-grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   16px;
}

/* ── CARD ────────────────────────────────── */

.testimonial-card {
  background:   #ffffff;
  border:       1px solid var(--border);
  border-radius: var(--radius-lg);
  padding:       32px 28px 28px;
  display:       flex;
  flex-direction: column;
  gap:           20px;
  transition:
    transform    0.35s var(--ease-out),
    box-shadow   0.35s ease,
    border-color 0.35s ease;
}

.testimonial-card:hover {
  transform:    translateY(-4px);
  box-shadow:   0 16px 48px rgba(26,70,201,0.08);
  border-color: rgba(26,70,201,0.20);
}

.testimonial-card__quote-mark {
  font-size:   3rem;
  line-height: 1;
  color:       var(--blue);
  opacity:     0.25;
  font-weight: 700;
  margin-bottom: -8px;
}

.testimonial-card__quote {
  font-size:   15px;
  line-height: 1.75;
  color:       var(--text-secondary);
  flex:        1;
}

.testimonial-card__footer {
  display:     flex;
  align-items: center;
  gap:         12px;
  padding-top: 16px;
  border-top:  1px solid var(--border);
}

.testimonial-card__avatar {
  width:           40px;
  height:          40px;
  border-radius:   50%;
  background:      var(--blue);
  color:           #ffffff;
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       12px;
  font-weight:     600;
  letter-spacing:  0.04em;
  flex-shrink:     0;
}

.testimonial-card__name {
  display:     block;
  font-size:   14px;
  font-weight: 600;
  color:       var(--text-primary);
  line-height: 1.3;
}

.testimonial-card__role {
  display:     block;
  font-size:   12px;
  color:       var(--text-muted);
  line-height: 1.4;
}

/* ── LOGO CLOUD ──────────────────────────── */

.logos-section {
  padding:    0 48px 80px;
  text-align: center;
}

.logos-label {
  font-size:      11px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color:          var(--text-muted);
  margin-bottom:  32px;
}

.logos-grid {
  display:         flex;
  flex-wrap:       wrap;
  align-items:     center;
  justify-content: center;
  gap:             12px 24px;
}

.logo-item {
  display:         flex;
  align-items:     center;
  gap:             10px;
  padding:         12px 22px;
  border:          1px solid var(--border);
  border-radius:   var(--radius-pill);
  background:      rgba(255,255,255,0.70);
  backdrop-filter: blur(8px);
  transition:
    border-color var(--t-fast) ease,
    background   var(--t-fast) ease,
    transform    var(--t-fast) ease;
}

.logo-item:hover {
  border-color: rgba(26,70,201,0.25);
  background:   rgba(26,70,201,0.04);
  transform:    translateY(-2px);
}

.logo-item__abbr {
  font-size:      11px;
  font-weight:    700;
  letter-spacing: 0.08em;
  color:          var(--blue);
  background:     rgba(26,70,201,0.10);
  padding:        3px 7px;
  border-radius:  4px;
}

.logo-item__name {
  font-size:   13px;
  font-weight: 500;
  color:       var(--text-secondary);
}

/* ── MARQUEE STRIP ───────────────────────── */

.marquee-strip {
  background:  var(--text-primary);
  overflow:    hidden;          /* critical — clips the infinite track */
  padding:     18px 0;
  position:    relative;
  white-space: nowrap;
  /* Contain width strictly — track extends beyond but is clipped */
  width:       100%;
  max-width:   100%;
  box-sizing:  border-box;
}

/* subtle gradient fade edges */
.marquee-strip::before,
.marquee-strip::after {
  content:  "";
  position: absolute;
  top:      0;
  bottom:   0;
  width:    80px;
  z-index:  2;
  pointer-events: none;
}

.marquee-strip::before {
  left:       0;
  background: linear-gradient(to right, var(--text-primary), transparent);
}

.marquee-strip::after {
  right:      0;
  background: linear-gradient(to left, var(--text-primary), transparent);
}

.marquee-track {
  display:   inline-flex;
  gap:       0;
  animation: marqueeScroll 28s linear infinite;
  will-change: transform;
}

.marquee-strip:hover .marquee-track {
  animation-play-state: paused;
}

.marquee-item {
  display:        inline-flex;
  align-items:    center;
  padding:        0 32px;
  font-size:      12px;
  font-weight:    600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color:          rgba(255,255,255,0.80);
  white-space:    nowrap;
}

.marquee-item:nth-child(odd) {
  color: rgba(255,255,255,0.45);
}

@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
}

/* ── RESPONSIVE ──────────────────────────── */

@media (max-width: 1024px) {

  .testimonials-section { padding: 80px 40px 64px; }
  .logos-section        { padding: 0 40px 64px; }

  .testimonials-grid {
    grid-template-columns: repeat(2, 1fr);
  }

}

@media (max-width: 768px) {

  .testimonials-section { padding: 64px 20px 48px; }
  .logos-section        { padding: 0 20px 48px; }

  .testimonials-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .testimonial-card {
    padding: 24px 20px 20px;
  }

  .logos-grid {
    gap: 8px 12px;
  }

  .logo-item {
    padding: 10px 16px;
  }

}