/* ===== TESTIMONIALS ===== */
#test{position:relative;overflow:hidden;border-top:1px solid #E2E8F0}
.test-float::before{background:var(--orange);opacity:.15}
.test-float::after{background:var(--blue);opacity:.12}
.test-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
#test .sr{transition-duration:1.1s}
.test-card{background:var(--white);border-radius:20px;padding:36px;border:1px solid #E2E8F0;transition:all .5s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}
.test-card:hover{transform:translateY(-6px);box-shadow:0 24px 64px rgba(0,0,0,.07)}
.test-card .quote-mark{font-size:48px;color:var(--orange);opacity:0;position:absolute;top:16px;right:24px;font-family:Georgia,serif;transform:translateY(10px)}
.test-stars{color:#FBBF24;font-size:14px;margin-bottom:16px;letter-spacing:2px}
.test-txt{font-size:15px;color:var(--g600);line-height:1.8;margin-bottom:24px;font-style:italic}
.test-who{display:flex;align-items:center;gap:12px}
.test-av{width:44px;height:44px;border-radius:12px;background:linear-gradient(135deg,var(--navy),var(--navy3));display:flex;align-items:center;justify-content:center;color:var(--orange);font-weight:800;font-size:18px;opacity:0;transform:scale(.5)}
.test-info b{display:block;font-size:14px;color:var(--navy)}
.test-info span{font-size:12px;color:var(--g400)}

/* Stars animate in sequentially after card enters viewport */
.test-card .test-stars i{opacity:0}
.test-card.vis .test-stars i{animation:starPop .3s forwards}
.test-card.vis .test-stars i:nth-child(1){animation-delay:.4s}
.test-card.vis .test-stars i:nth-child(2){animation-delay:.5s}
.test-card.vis .test-stars i:nth-child(3){animation-delay:.6s}
.test-card.vis .test-stars i:nth-child(4){animation-delay:.7s}
.test-card.vis .test-stars i:nth-child(5){animation-delay:.8s}
@keyframes starPop{0%{opacity:0;transform:scale(0) rotate(-30deg)}70%{transform:scale(1.3) rotate(5deg)}100%{opacity:1;transform:scale(1) rotate(0)}}

/* Avatar pulse after card enters */
.test-card.vis .test-av{animation:avPulse .6s .9s cubic-bezier(.16,1,.3,1) forwards}
@keyframes avPulse{0%{opacity:0;transform:scale(.5)}70%{transform:scale(1.1)}100%{opacity:1;transform:scale(1)}}

/* Quote mark float in */
.test-card.vis .quote-mark{animation:quoteIn .8s .3s ease forwards}
@keyframes quoteIn{to{opacity:.15;transform:translateY(0)}}

@media(max-width:1024px){.test-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:768px) and (max-width:1024px){.test-card.sr.left.vis,.test-card.sr.right.vis{transform:none}}
@media(max-width:768px){
  .test-grid{grid-template-columns:repeat(2,1fr);gap:16px}
  .test-card{padding:24px 20px}
  .test-card .quote-mark{font-size:32px;top:12px;right:16px}
  .test-txt{font-size:14px}
  .test-card:hover{transform:none;box-shadow:none}
}
@media(max-width:480px){.test-grid{grid-template-columns:1fr}.test-card.sr.left,.test-card.sr.right{transform:translateY(30px)}.test-card.sr.left.vis,.test-card.sr.right.vis{transform:translateY(0)}}