/* ══════════════════════════════════════════════════════════════
   SECTION 8 — REVIEWS ("From the first users.")
   Centred title + subcopy, then a horizontal carousel of glass quote
   cards (5 stars + quote + "Early user feedback"). Edge cards bleed.
   ══════════════════════════════════════════════════════════════ */
.reviews {
  position: relative;
  z-index: 1;
  background: transparent;
  padding: clamp(50px, 8vh, 110px) 0 clamp(60px, 9vh, 130px);
  text-align: center;
}
.reviews-head { max-width: 720px; margin: 0 auto clamp(40px, 6vh, 72px); padding-inline: 24px; }
.reviews-title {
  font-size: clamp(30px, 4.4vw, 50px);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #ffffff;
}
.reviews-sub {
  margin-top: 16px;
  font-size: clamp(16px, 1.6vw, 20px);
  line-height: 1.5;
  color: rgba(255,255,255,0.92);
}

/* — Never-ending marquee (same pattern as chapters): the cards are
   rendered TWICE in one track; it translates left by half its width on
   a loop → seamless infinite scroll. Edge-masked, pauses on hover. — */
.reviews-viewport {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.reviews-track {
  display: flex;
  gap: 22px;
  width: max-content;
  padding-block: 8px 24px;
  animation: reviews-marquee 70s linear infinite;
}
.reviews-viewport:hover .reviews-track { animation-play-state: paused; }
@keyframes reviews-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-50% - 11px)); }   /* -half track - half gap */
}
@media (prefers-reduced-motion: reduce) {
  .reviews-track { animation: none; }
  .reviews-viewport { overflow-x: auto; scrollbar-width: none; }
  .reviews-viewport::-webkit-scrollbar { display: none; }
}

/* — Quote card (uses shared .glass-card base) — */
.review {
  flex: 0 0 auto;
  width: 320px;
  padding: 26px 26px 28px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.review-stars { color: #FFC53D; font-size: 16px; letter-spacing: 2px; }
.review-quote {
  font-size: 16px;
  line-height: 1.5;
  color: #ffffff;
  flex: 1;
}
.review-by {
  font-size: 14px;
  font-weight: 500;
  color: rgba(255,255,255,0.8);
}