/* 03 — integrations: phone + logo tiles fanning out on scroll (933px) */
.integ { position: relative; z-index: 2; background: #fff; border-radius: 120px 120px 0 0; padding: 80px var(--gutter); min-height: 933px; }
.integ .sec-head .h-sec { max-width: 900px; margin: 0 auto; }
.integ-row { position: relative; max-width: 1344px; height: 420px; margin: 64px auto 0; overflow: visible; }
.integ-phone { position: absolute; left: 50%; top: 30px; width: 824px; height: 360px; margin-left: -412px; -webkit-mask-image: linear-gradient(#000 55%, transparent 96%); mask-image: linear-gradient(#000 55%, transparent 96%); }
.it { --f: 1; position: absolute; left: 50%; top: 210px; width: var(--s); height: var(--s); margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2); padding: 4px; border-radius: 60px; background: rgba(255, 255, 255, .2); box-shadow: 0 5px 15px rgba(0, 0, 0, .1); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transform: translate(calc(var(--dx) * var(--f) * 1px), calc(var(--dy) * var(--f) * 1px)); z-index: var(--z, 0); will-change: transform; }
.it i { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 56px; background: #fff; }
.it img { width: 46%; height: 46%; object-fit: contain; }
.it img.round { width: 56%; height: 56%; border-radius: 50%; }
.it img.sq { width: 62%; height: 62%; border-radius: 28%; }
.it img.rh { width: 42%; filter: invert(62%) sepia(83%) saturate(530%) hue-rotate(40deg) brightness(95%); }
.it img.cb { filter: invert(33%) sepia(95%) saturate(3500%) hue-rotate(216deg) brightness(98%); }
.it img.wc { filter: invert(52%) sepia(71%) saturate(3000%) hue-rotate(196deg) brightness(101%); }
.it-c i { background: linear-gradient(#6d55e2, #28119c); color: #fff; }
.it-c .mark { width: 52%; height: 52%; }
.integ-sub { max-width: 720px; margin: 0 auto; text-align: center; color: var(--ink-3); }
@media (max-width: 900px) {
  .integ { border-radius: 56px 56px 0 0; min-height: 0; padding-bottom: 64px; }
  .integ-row { height: 300px; transform: scale(.5); transform-origin: 50% 30%; margin-top: 20px; margin-bottom: -120px; }
}