/* Five Figma review cards, on the white surface requested for this section. */
@font-face {
  font-family: Montserrat;
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('assets/reviews/montserrat-cyrillic-300-600.woff2') format('woff2');
  unicode-range: U+0301, U+0400-052F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: Montserrat;
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('assets/reviews/montserrat-latin-300-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
.section.author-voices {
  display: block;
  max-width: none;
  --review-gutter: 40px;
  padding: 50px var(--review-gutter) 35px;
  overflow: hidden;
  background: #fff;
  color: #080a09;
  border-radius: 40px 40px 0 0;
}

.voices-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  margin: 0 0 32px;
}
.voices-heading h2 { margin: 0; font-weight: 400; }
.voices-controls { display: flex; align-items: center; gap: 10px; }
.voices-controls[hidden] { display: none; }
.voices-hint { margin-right: 8px; font-size: 14px; line-height: 20px; color: #414b43; }
.voices-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  border: 1px solid #080a0940;
  border-radius: 50%;
  background: transparent;
  color: #080a09;
  cursor: pointer;
  transition: background .2s, opacity .2s;
}
.voices-arrow-next { background: #e8ff8e; border-color: #e8ff8e; }
.voices-arrow:hover:not(:disabled) { background: #afcbff; }
.voices-arrow:disabled { opacity: .3; cursor: default; }
.voices-arrow:focus-visible { outline: 2px solid #080a09; outline-offset: 4px; }
.voices-arrow svg { width: 22px; height: 22px; }
.author-voices.is-in-view:not(.has-interacted) .voices-arrow-next:not(:disabled) svg {
  animation: voices-point-right 1.6s ease-in-out 3;
}
@keyframes voices-point-right {
  0%, 100% { transform: translateX(0); }
  45% { transform: translateX(5px); }
}
@media (prefers-reduced-motion: reduce) {
  .author-voices .voices-arrow svg { animation: none !important; }
  .voices-arrow { transition: none; }
}

/* The reviews and FAQ share one white surface without dark corner cutouts. */
.author-voices + .faq {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.voices-carousel { min-width: 0; }
.voices-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  gap: 30px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline-start: 5px;
  scrollbar-width: none;
  padding: 0 5px 15px;
  margin: 0 -5px;
  outline-offset: 5px;
}
.voices-track::-webkit-scrollbar { display: none; }
.voices-track:focus-visible { outline: 2px solid #ff6200; }

.voice-card {
  position: relative;
  width: 350px;
  min-height: 0;
  padding: 40px 19px 30px;
  scroll-snap-align: start;
  border: 1px solid #e2e2e2;
  border-radius: 20px;
  background: #080a09;
  color: #fff;
  box-shadow: -5px 5px 15px #e2e2e2;
  font-family: Montserrat, Arial, sans-serif;
}
.voice-card:nth-child(n + 4) { width: 360px; }
.voice-person { display: flex; align-items: flex-start; gap: 15px; min-height: 70px; }
.voice-avatar { display: block; flex: none; width: 70px; height: 70px; object-fit: cover; border-radius: 50%; }
.voice-identity { min-width: 0; }
.voice-name { margin: 0 0 15px; color: #fff; font-size: 17px; font-weight: 600; line-height: 22px; white-space: nowrap; }
.voice-meta { display: flex; flex-direction: column; color: #9b9b9b; font-size: 12px; font-weight: 500; line-height: 16px; white-space: nowrap; }
.voice-card:not(:first-child) .voice-meta { font-size: 13px; line-height: 17px; }
.voice-yandex { color: #ff6200; }
.voice-stars { display: block; width: 118px; height: 20.078px; margin-top: 15px; }
.voice-card blockquote { max-width: 310px; margin: 22px 0 0; color: #fff; font-size: 16px; font-weight: 300; line-height: 21px; overflow-wrap: break-word; }

@media (max-width: 600px) {
  .section.author-voices { padding: 42px 20px 35px; border-radius: 28px 28px 0 0; }
  .voices-heading { margin-right: 0; gap: 18px; margin-bottom: 26px; }
  .voices-controls { margin-left: auto; }
  .voices-hint { font-size: 13px; }
  .voices-track { gap: 16px; }
  .voice-card, .voice-card:nth-child(n + 4) { width: min(350px, calc(100vw - 60px)); }
  .voice-card { padding-top: 32px; }
  .voice-name { font-size: 16px; }
}

@media (max-width: 370px) {
  .voice-person { gap: 12px; }
  .voice-avatar { width: 62px; height: 62px; }
  .voice-name { font-size: 14px; }
  .voice-card blockquote { font-size: 15px; line-height: 20px; }
}

/* Match the shared section gutter at every breakpoint. */
@media(min-width:1601px){.section.author-voices{--review-gutter:var(--wide-gutter)}}
@media(max-width:1100px){.section.author-voices{--review-gutter:32px}}
@media(max-width:850px){.section.author-voices{--review-gutter:24px}}
@media(max-width:600px){.section.author-voices{--review-gutter:20px;padding-left:var(--review-gutter);padding-right:var(--review-gutter)}}
