/* ==========================================================================
   reviews.css — "Манай зочдын сэтгэгдэл" — featured middle card, quote badge
   ========================================================================== */
.reviews{background:var(--mist)}
.rev-head{text-align:center;margin-bottom:54px}
.rev-head h2{font-size:clamp(30px,4vw,46px)}
.rev-head h2 em{color:var(--teal-2)}

.rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;align-items:start}
.rev-card{position:relative;background:var(--white);border-radius:22px;padding:38px 32px;border:1px solid var(--line);
  box-shadow:var(--shadow);transition:transform .35s cubic-bezier(.4,0,.2,1),box-shadow .35s ease,border-color .35s ease}
.rev-card:hover{box-shadow:var(--shadow-lg);border-color:var(--teal-2)}

/* quote badge */
.rev-quote{width:52px;height:52px;border-radius:50%;background:var(--amber);color:var(--ink);
  display:flex;align-items:center;justify-content:center;margin-bottom:22px;
  font-family:'Onest',system-ui,sans-serif;font-weight:800;font-size:30px;line-height:1}
.rev-quote span{transform:translateY(6px)}

.rev-stars{color:var(--amber);font-size:15px;letter-spacing:3px;margin-bottom:14px}
.rev-card p{color:var(--ink-soft);font-size:15px;line-height:1.8;margin-bottom:26px}
.rev-who{display:flex;align-items:center;gap:14px;padding-top:22px;border-top:1px solid var(--line)}
.rev-av{width:50px;height:50px;border-radius:50%;background:var(--teal);color:#fff;flex:0 0 50px;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:18px;font-family:'Onest',system-ui,sans-serif}
.rev-av.a2{background:var(--amber);color:var(--ink)}
.rev-av.a3{background:var(--teal-2)}
.rev-who b{display:block;color:var(--ink);font-size:15px}
.rev-who span{font-size:13px;color:var(--ink-soft)}

/* featured (middle) card — teal, lifted */
.rev-card.feat{background:linear-gradient(140deg,var(--teal) 0%,var(--teal-2) 100%);border:none;transform:translateY(-14px);
  box-shadow:0 30px 60px rgba(12,51,46,.32)}
.rev-card.feat:hover{box-shadow:0 40px 80px rgba(12,51,46,.4)}
.rev-card.feat p{color:rgba(255,255,255,.92)}
.rev-card.feat .rev-who{border-top-color:rgba(255,255,255,.18)}
.rev-card.feat .rev-who b{color:#fff}
.rev-card.feat .rev-who span{color:rgba(255,255,255,.7)}
.rev-card.feat .rev-av{background:#fff;color:var(--teal)}

@media(max-width:880px){
  .rev-grid{grid-template-columns:1fr;max-width:520px;margin:0 auto}
  .rev-card.feat{transform:none}
}