/* ============================================================
   ReactBits-pattern enhancements — vanilla, brand-native, reduced-motion-safe
   1 testimonial marquee · 2 count-up stats · 3 heading reveal · 4 card tilt · 5 cross-sell CTA
   ============================================================ */

/* ---- 1. Testimonial marquee wall ---- */
.proof__rating{margin-top:var(--s12);font-weight:600;color:var(--text)}
.proof__stars{color:var(--honey);letter-spacing:1px}
.marquee{display:flex;flex-direction:column;gap:var(--s16);margin-top:var(--s32);overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.marquee__row{overflow:hidden}
.marquee__track{display:flex;gap:var(--s16);width:max-content;will-change:transform;animation:marquee var(--marquee-dur,72s) linear infinite}
.marquee__row--rev .marquee__track{animation-direction:reverse}
.marquee:hover .marquee__track,.marquee:focus-within .marquee__track{animation-play-state:paused}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.qcard{flex:0 0 348px;max-width:80vw;background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:var(--s20) var(--s24);box-shadow:var(--shadow-card)}
.qcard__stars{color:var(--honey);letter-spacing:2px;font-size:14px}
.qcard p{color:var(--text);font-size:15px;line-height:1.5;margin:var(--s8) 0 var(--s12)}
.qcard cite{font-style:normal;font-weight:700;font-size:14px;color:var(--text-secondary)}
@media (prefers-reduced-motion:reduce){
  .marquee{-webkit-mask-image:none;mask-image:none}
  .marquee__track{animation:none;flex-wrap:wrap;width:auto;justify-content:center}
}

/* ---- 2. Count-up stats strip ---- */
.stats{background:var(--surface)}
.stats__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s32);text-align:center}
.stat{display:flex;flex-direction:column;gap:6px}
.stat__num,.stat__big{font-family:var(--font-display);font-weight:700;font-size:clamp(30px,4vw,46px);line-height:1;color:var(--primary);font-variant-numeric:tabular-nums}
.stat__label{font-size:var(--small);color:var(--text-secondary);font-weight:600}
@media (max-width:768px){.stats__grid{gap:var(--s16)}.stat__num,.stat__big{font-size:clamp(24px,7vw,32px)}.stat__label{font-size:13px}}

/* ---- 3. Heading reveal (blur-in) ---- */
.section-head h2{transition:opacity .6s var(--ease),transform .6s var(--ease),filter .6s var(--ease)}
.reveal:not(.in) .section-head h2{opacity:0;transform:translateY(10px);filter:blur(6px)}
@media (prefers-reduced-motion:reduce){.reveal:not(.in) .section-head h2{opacity:1;transform:none;filter:none}}

/* ---- 4. Card tilt (depth on hover) ---- */
.tilt{transition:transform .16s var(--ease),box-shadow .28s var(--ease)}
@media (prefers-reduced-motion:reduce){.tilt{transform:none!important}}

/* ---- 5. Cross-sell CTA band ---- */
.crosssell{background:linear-gradient(105deg,var(--primary-darker),var(--primary))}
.crosssell__inner{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:var(--s48);align-items:center}
.crosssell__img{width:100%;height:260px;object-fit:cover;border-radius:var(--radius);box-shadow:0 12px 30px rgba(0,0,0,.25)}
.crosssell__text h3{color:#fff;font-size:clamp(24px,3vw,33px);margin:var(--s8) 0 var(--s12)}
.crosssell__text p{color:rgba(255,255,255,.88);max-width:54ch;margin-bottom:var(--s24)}
.crosssell__cta{display:flex;align-items:center;gap:var(--s20);flex-wrap:wrap}
.crosssell__call{color:#fff;font-weight:600;font-size:var(--small);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(255,255,255,.5)}
.crosssell__call:hover{color:var(--honey);text-decoration-color:var(--honey)}
@media (max-width:768px){.crosssell__inner{grid-template-columns:1fr;gap:var(--s24)}}