/* ===== A1 CONNECT — "Why reviews matter" section extras =====
   Load AFTER base.css (and header.css, for --gold-dark).
   Adds a blue heading colour on the card titles and swaps the emoji
   icons for line icons (same stroke style as the header cart icon)
   that actually relate to each card's point. */

.why-reviews-section .card {
  text-align: center;
  border: 3px solid transparent;
  border-radius: var(--radius);
  background:
    linear-gradient(#ffffff, #ffffff) padding-box,
    linear-gradient(100deg, #1d4ed8 0%, #60a5fa 22%, #93c5fd 45%, #1d4ed8 65%, #60a5fa 85%, #93c5fd 100%) border-box;
  background-size: auto, 250% auto;
  background-position: 0 0, 0% 50%;
  animation: cardBorderMove 7s ease-in-out infinite;
}

@keyframes cardBorderMove {
  0% { background-position: 0 0, 0% 50%; }
  50% { background-position: 0 0, 100% 50%; }
  100% { background-position: 0 0, 0% 50%; }
}

.why-reviews-section .card .icon {
  margin-left: auto;
  margin-right: auto;
}

.why-reviews-section h3 {
  color: var(--gold-dark);
}

.why-reviews-section h2 {
  background: linear-gradient(100deg, #0b2560 0%, #1d4ed8 45%, #3b82f6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.why-reviews-section .card .icon svg {
  width: 26px;
  height: 26px;
  overflow: visible;
}

.why-reviews-section .card .icon svg .stroke-part {
  stroke: var(--gold-dark);
}

.why-reviews-section .card .icon svg .fill-part {
  fill: var(--gold-dark);
}