/* Evo showcase: intro + swipe/scroll animations (additive) */
#evo-showcase{isolation:isolate;overflow:hidden}
.evo-bg{position:absolute;inset:0 -24px;z-index:-1;overflow:hidden;pointer-events:none;-webkit-mask-image:linear-gradient(transparent,#000 18%,#000 82%,transparent);mask-image:linear-gradient(transparent,#000 18%,#000 82%,transparent)}
/* Blur is pre-baked into evo-bg-blur.webp (same look as the old blur(46px) saturate(1.3)). No CSS filter, no transform, no scroll-linked motion = no GPU memory spike on iOS. 125% box centred = the old scale(1.25) */
.evo-bg img{display:block;position:absolute;left:-12.5%;top:-12.5%;width:125%;height:125%;max-width:none;object-fit:cover;opacity:.3}
.evo-intro{position:relative;max-width:920px;margin:0 auto 80px;aspect-ratio:1736/906;overflow:hidden;
  border-radius:32px;box-shadow:0 34px 90px rgba(37,99,235,.24);
  clip-path:inset(var(--ci,0%) var(--cx,0%) round 36px);transform:scale(var(--cs,1))}
.evo-intro img{width:100%;height:100%;object-fit:cover;display:block;transform:translateY(var(--iy,0px)) scale(1.12)}
.swipe-wrap{--pw:min(250px,64vw);position:relative;margin-top:30px}
.swipe-track{position:relative;display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;
  margin:-30px 0 -84px;padding:60px calc(50% - var(--pw)/2) 130px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);scrollbar-width:none;-webkit-overflow-scrolling:touch;cursor:grab;outline:none}
.swipe-track::-webkit-scrollbar{display:none}
.swipe-track.drag{scroll-snap-type:none;scroll-behavior:auto;cursor:grabbing}
.phone-card{flex:0 0 var(--pw);scroll-snap-align:center;transition:opacity .8s ease,transform .9s cubic-bezier(.16,.8,.3,1)}
.sc-js .phone-card:not(.in){opacity:0;transform:translateY(70px)}
.phone{position:relative;padding:6px;border-radius:40px;
  box-shadow:0 22px 40px rgba(14,165,233,.22),0 4px 12px rgba(11,27,58,.2);
  transform:perspective(900px) translateX(calc(var(--d,0)*-7%)) rotateY(calc(var(--d,0)*-30deg)) scale(calc(1 - var(--a,0)*.17));
  opacity:calc(1 - var(--a,0)*.5)}
/* Side phones: pre-blurred image (evo-screen-N-blur.webp, = old blur(2.2px)) crossfades over the sharp phone.
   Only opacity changes while scrolling (cheap), no CSS filter. --a: 0 = centre phone, 1 = neighbour. */
.phone::before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(145deg,#1d2d4f,#0B1B3A);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);opacity:calc(1 - var(--a,0)*var(--a,0))}
.phone img{position:relative;display:block;width:100%;height:auto;border-radius:34px;pointer-events:none;user-select:none;-webkit-user-drag:none;opacity:calc(1 - var(--a,0)*var(--a,0))}
.phone .pb{position:absolute;left:-4.8%;top:-2.27%;width:109.6%;height:auto;max-width:none;border-radius:0;opacity:var(--a,0);z-index:2}
.swipe-cap{text-align:center;min-height:92px;max-width:420px;margin:0 auto;transition:opacity .35s ease,transform .35s ease}
.swipe-cap.swap{opacity:0;transform:translateY(8px)}
.swipe-cap h3{font-weight:800;font-size:1.25rem;letter-spacing:-.02em;margin-bottom:6px;color:var(--text)}
.swipe-cap p{color:var(--text-mute);font-size:.95rem;line-height:1.65}
.swipe-ui{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:14px}
.sbtn{width:44px;height:44px;border-radius:50%;border:1px solid var(--glass-border);background:var(--glass-strong-bg);color:#2563EB;
  font-size:1.1rem;font-weight:700;cursor:pointer;box-shadow:0 6px 18px rgba(11,27,58,.08);transition:transform .3s,opacity .3s}
.sbtn:hover{transform:scale(1.08)}.sbtn:disabled{opacity:.35;cursor:default;transform:none}
.sdots{display:flex;gap:8px;align-items:center}
.sdot{width:8px;height:8px;padding:0;border:0;border-radius:8px;background:var(--border-strong);cursor:pointer;transition:width .35s,background .35s}
.sdot.on{width:26px;background:linear-gradient(120deg,#0EA5E9,#2563EB)}
@media(max-width:560px){.evo-intro{border-radius:24px;margin-bottom:56px}.sbtn{display:none}}

.swipe-wrap{overflow:visible}

/* arrow buttons: icon perfectly centered in the circle */
.sbtn{padding:0;line-height:0;border-color:rgba(37,99,235,.28)}
.sbtn svg{width:18px;height:18px;display:block}
.sbtn:disabled{opacity:.5}
@media(min-width:561px){.sbtn{display:inline-flex;align-items:center;justify-content:center}}