.wi-pt{
  --wi-bg:#eef0ec; --wi-card-w:340px; --wi-gap:28px; --wi-speed:60s;
  position:relative; width:100%; height:100vh; min-height:560px; overflow:hidden;
  background:var(--wi-bg); isolation:isolate; box-sizing:border-box;
  font-family:"Inter","Helvetica Neue",Arial,sans-serif;
}
.wi-pt *{box-sizing:border-box}

/* ---------- rows ---------- */
.wi-pt__rows{position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; gap:calc(var(--wi-gap) * 1.1); z-index:1}
.wi-pt__row{overflow:visible; width:100%}
.wi-pt__track{display:flex; width:max-content; will-change:transform; animation:wi-pt-left var(--wi-speed) linear infinite}
.wi-pt__row--b .wi-pt__track{animation-name:wi-pt-right; animation-duration:calc(var(--wi-speed) * 1.15); animation-delay:calc(var(--wi-speed) * -0.3)}
.wi-pt__row--a .wi-pt__track{animation-delay:calc(var(--wi-speed) * -0.1)}
.wi-pt__group{display:flex; flex:none}
.wi-pt--pause .wi-pt__row:hover .wi-pt__track{animation-play-state:paused}
@keyframes wi-pt-left{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@keyframes wi-pt-right{from{transform:translate3d(-50%,0,0)}to{transform:translate3d(0,0,0)}}

/* ---------- card ---------- */
.wi-pt__card{
  flex:0 0 var(--wi-card-w); width:var(--wi-card-w); margin-right:var(--wi-gap);
  padding:26px 28px; border-radius:26px; background:rgba(255,255,255,.55);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset, 0 8px 30px rgba(0,0,0,.04);
}
.wi-pt__stars{color:#f5a524; letter-spacing:3px; font-size:15px; line-height:1; margin-bottom:12px}
.wi-pt__star-off{opacity:.22}
.wi-pt__quote{margin:0 0 18px; font-size:16px; line-height:1.45; font-weight:500; color:#1d1d1f}
.wi-pt__who{display:flex; align-items:center; gap:12px}
.wi-pt__avatar,.wi-pt__photo{width:34px; height:34px; border-radius:50%; flex:none}
.wi-pt__avatar{display:grid; place-items:center; font-size:13px; font-weight:700; color:#fff}
.wi-pt__photo{object-fit:cover; display:block}
.wi-pt__name{font-size:14px; font-weight:600; line-height:1.2; color:#1d1d1f}
.wi-pt__role{font-size:12px; line-height:1.3; color:#6b6f6a}

/* ---------- edges ---------- */
.wi-pt--edges::before,.wi-pt--edges::after{content:""; position:absolute; top:0; bottom:0; width:8%; z-index:2; pointer-events:none}
.wi-pt--edges::before{left:0; background:linear-gradient(to right,var(--wi-bg),transparent)}
.wi-pt--edges::after{right:0; background:linear-gradient(to left,var(--wi-bg),transparent)}

/* ---------- hand + phone ---------- */
.wi-pt__hand{
  position:absolute; z-index:3; left:50%; top:9%; width:340px; max-width:100%;
  transform:translate3d(-50%,0,0); will-change:transform,opacity; pointer-events:none;
}
.wi-pt--handfade .wi-pt__hand{
  -webkit-mask-image:linear-gradient(to bottom,#000 68%,transparent 100%);
          mask-image:linear-gradient(to bottom,#000 68%,transparent 100%);
}
.wi-pt__img{position:relative; z-index:2; display:block; width:100%; height:auto; max-width:none}

.wi-pt__screen{position:absolute; left:9.6%; top:1.3%; width:49.8%; height:61.8%; overflow:hidden; background:#111}
.wi-pt--behind .wi-pt__screen{z-index:1}
.wi-pt--over .wi-pt__screen{z-index:3}

.wi-pt__slide{position:absolute; inset:0; opacity:0; visibility:hidden; transition:opacity .7s ease, transform .7s ease, visibility 0s linear .7s}
.wi-pt__slide.is-active{opacity:1; visibility:visible; transition-delay:0s; z-index:2}
.wi-pt__shot{width:100%; height:100%; object-fit:cover; display:block; max-width:none}
.wi-pt__slide--ph{background:linear-gradient(180deg,#c9b4e0,#e08fe0)}

.wi-pt--fx-slide .wi-pt__slide{transform:translateY(8%)}
.wi-pt--fx-slide .wi-pt__slide.is-active{transform:none}
.wi-pt--fx-zoom .wi-pt__slide{transform:scale(1.12)}
.wi-pt--fx-zoom .wi-pt__slide.is-active{transform:none}

@media (max-width:1024px){
  .wi-pt__hand{width:300px}
}
@media (max-width:767px){
  .wi-pt{min-height:520px}
  .wi-pt__hand{width:64vw; top:12%}
  .wi-pt__quote{font-size:13.5px; margin-bottom:12px}
  .wi-pt__stars{font-size:12px; margin-bottom:8px}
}
@media (prefers-reduced-motion:reduce){
  .wi-pt__track{animation:none}
  .wi-pt__slide{transition:none}
}
