.integrations{
  position:relative;max-width:var(--maxw);margin:var(--section-gap) auto 0;padding:var(--section-gap) 24px var(--section-gap);
  min-height:820px;display:flex;align-items:center;
  border-top:1px dotted rgba(0,0,0,.28);overflow:hidden;
}
.integrations-copy{position:relative;z-index:20;max-width:470px}
.integrations h2{font-size:clamp(44px,5vw,68px);margin:13px 0 20px}
.integrations-copy>p{font-size:17px;line-height:1.6;color:var(--muted);margin-bottom:25px}
.integration-status{
  position:relative;z-index:20;display:block;width:100%;max-width:352px;height:132px;margin-top:15px;overflow:hidden;
  border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.74);
  box-shadow:0 7px 18px rgba(32,43,62,.08);color:var(--ink);
  transition:height .3s cubic-bezier(.22,1,.36,1);
}
.integration-status.no-anim{transition:none}
.status-line{
  position:absolute;left:16px;right:16px;top:14px;display:flex;flex-direction:column;gap:5px;
  transition:opacity .3s ease,transform .3s cubic-bezier(.22,1,.36,1),filter .3s ease;
}
.status-line.is-in{opacity:0;transform:translateY(9px);filter:blur(2px)}
.status-line.is-out{opacity:0;transform:translateY(-11px);filter:blur(2px)}
.status-industry{font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.status-head{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.status-head b{font-family:var(--disp);font-weight:600;font-size:19px;letter-spacing:-.01em;color:var(--ink)}
.status-name{font-size:12px;font-weight:500;color:var(--muted)}
.status-blurb{font-size:12.5px;line-height:1.5;color:var(--ink);margin-top:2px}
.status-coverage{font-size:11px;line-height:1.45;color:var(--muted);margin-top:3px}
.status-logos{min-height:20px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:2px}
.status-logos img{display:block;width:auto;height:auto;max-width:68px;max-height:18px;object-fit:contain}
.status-own{font-size:10.5px;line-height:1;color:var(--muted);white-space:nowrap}

/* --- right-side sliding orbit (composition sampled from unreleased.openvector.com,
       re-themed to the light canvas; nodes stay ink-on-white acronym wordmarks) --- */
.logo-orbit{
  --orbit-size:1148px;--orbit-radius:-315px;--node-size:120px;--ring-size:630px;
  --line-length:720px;--track-length:414px;--track-thickness:144px;--track-offset:-20px;
  --core-size:120px;--core-offset:58px;
  pointer-events:none;
  position:absolute;z-index:5;top:50%;left:50%;
  width:var(--orbit-size);height:var(--orbit-size);
  transform:translate(-37.3%,-50%);
  opacity:0;filter:blur(6px);transition:opacity .7s ease,filter .7s ease;
  /* fade the frame's left side out so cards never collide with the copy */
  -webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,0) 0%,rgba(0,0,0,0) 42%,rgba(0,0,0,.4) 45%,rgba(0,0,0,.85) 47%,#000 49%,#000 100%);
  mask-image:linear-gradient(90deg,rgba(0,0,0,0) 0%,rgba(0,0,0,0) 42%,rgba(0,0,0,.4) 45%,rgba(0,0,0,.85) 47%,#000 49%,#000 100%);
}
.integrations.is-active .logo-orbit{opacity:1;filter:blur(0)}
/* bottom arc hidden — cards surface low on the right, peak at active, climb + dim up top */
.logo-orbit__vmask{
  position:absolute;inset:0;
  -webkit-mask-image:linear-gradient(rgba(0,0,0,.45) 0%,rgba(0,0,0,.7) 18%,rgba(0,0,0,.92) 30%,#000 40%,#000 56%,rgba(0,0,0,.4) 59%,rgba(0,0,0,.1) 62%,rgba(0,0,0,0) 65%,rgba(0,0,0,0) 100%);
  mask-image:linear-gradient(rgba(0,0,0,.45) 0%,rgba(0,0,0,.7) 18%,rgba(0,0,0,.92) 30%,#000 40%,#000 56%,rgba(0,0,0,.4) 59%,rgba(0,0,0,.1) 62%,rgba(0,0,0,0) 65%,rgba(0,0,0,0) 100%);
}
.orbit-stage{position:absolute;inset:0}
.orbit-ring{
  position:absolute;left:50%;top:50%;width:var(--ring-size);height:var(--ring-size);transform:translate(-50%,-50%);
  border-radius:50%;box-shadow:0 0 0 1px rgba(36,44,58,.14),inset 0 1px 0 rgba(255,255,255,.75);opacity:.7;
}
.orbit-trackpill{
  position:absolute;top:50%;left:calc(50% + var(--track-offset));width:var(--track-length);height:var(--track-thickness);
  transform:translateY(-50%);border-radius:999px;box-shadow:0 0 0 1px rgba(36,44,58,.12),inset 0 1px 0 rgba(255,255,255,.82);opacity:.85;
}
.orbit-line{
  position:absolute;left:50%;top:50%;width:var(--line-length);height:1px;transform:translate(-50%,-50%);
  background:linear-gradient(90deg,transparent,var(--line) 38%,var(--line) 62%,transparent);opacity:.7;
}
.orbit-core{
  position:absolute;left:calc(50% + var(--core-offset));top:50%;width:var(--core-size);height:var(--core-size);
  transform:translate(-50%,-50%);display:grid;place-items:center;border:1px solid rgba(0,0,0,.28);border-radius:50%;
  color:var(--ink);background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(222,225,231,.88));
  box-shadow:0 20px 44px rgba(35,47,69,.15),inset 0 1px 0 #fff;z-index:24;
}
.orbit-core-halo{position:absolute;inset:-8px;border-radius:50%;background:conic-gradient(from 270deg,rgba(11,11,13,.05),rgba(11,11,13,.16),rgba(255,255,255,.55),rgba(11,11,13,.06))}
.orbit-core-halo--soft{-webkit-mask:radial-gradient(circle,transparent 52%,#000 58%,#000 64%,transparent 70%);mask:radial-gradient(circle,transparent 52%,#000 58%,#000 64%,transparent 70%);filter:blur(7px);opacity:.42}
.orbit-core-halo--crisp{-webkit-mask:radial-gradient(circle,transparent 56%,#000 59%,#000 62%,transparent 65%);mask:radial-gradient(circle,transparent 56%,#000 59%,#000 62%,transparent 65%);opacity:.5}
.orbit-core-inner{position:relative;display:grid;place-items:center;gap:6px}
.orbit-core-mark{width:48px;height:27px}.orbit-core-mark svg{width:100%;height:100%;display:block}.orbit-core b{font-size:12px;font-weight:600}

.orbit-node{
  pointer-events:auto;
  position:absolute;left:50%;top:50%;width:var(--node-size);height:var(--node-size);padding:0;border:0;background:none;cursor:pointer;
  transition:transform .65s cubic-bezier(.22,1,.36,1),opacity .75s cubic-bezier(.22,1,.36,1),filter .75s cubic-bezier(.22,1,.36,1);
  will-change:transform,opacity,filter;
}
.orbit-node__cell{
  width:100%;height:100%;display:grid;place-items:center;border:1px solid rgba(0,0,0,.18);border-radius:50%;
  background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(222,225,231,.88));
  box-shadow:0 14px 30px rgba(35,47,69,.13),inset 0 1px 0 #fff;
  transition:transform .2s var(--ease),box-shadow .2s ease,border-color .2s ease;
}
.orbit-node:hover .orbit-node__cell,.orbit-node:focus-visible .orbit-node__cell{transform:scale(1.05);border-color:rgba(0,0,0,.26);box-shadow:0 18px 38px rgba(35,47,69,.16),inset 0 1px 0 #fff}
.orbit-node__cell.is-front{border-color:transparent;box-shadow:0 16px 34px rgba(35,47,69,.14),inset 0 1px 0 #fff,0 0 0 2px var(--blue-soft)}
.orbit-node__acr{
  font-family:var(--disp);font-weight:600;font-size:clamp(16px,calc(var(--node-size) * .2),23px);
  letter-spacing:-.02em;line-height:1;color:var(--ink);text-align:center;
}

@media(max-width:1024px){
  .integrations{
    display:block;padding:88px 24px 480px;margin-top:20px;min-height:0;text-align:center;
  }
  .integrations-copy{max-width:560px;margin:0 auto}
  .integration-status{margin-inline:auto}
  /* copy on top, orbit clipped at the bottom, stage rotated so the active card
     sits at the top of the arc and points up at the copy */
  .logo-orbit{
    --orbit-size:900px;--orbit-radius:-300px;--node-size:118px;--ring-size:600px;
    --line-length:680px;--track-length:340px;--track-thickness:150px;--track-offset:60px;
    --core-size:126px;--core-offset:132px;
    position:absolute;left:50%;top:auto;bottom:-410px;
    width:var(--orbit-size);height:var(--orbit-size);transform:translateX(-50%);
    -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.1) 6%,rgba(0,0,0,.4) 12%,rgba(0,0,0,.75) 18%,#000 24%,#000 76%,rgba(0,0,0,.75) 82%,rgba(0,0,0,.4) 88%,rgba(0,0,0,.1) 94%,transparent 100%);
    mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.1) 6%,rgba(0,0,0,.4) 12%,rgba(0,0,0,.75) 18%,#000 24%,#000 76%,rgba(0,0,0,.75) 82%,rgba(0,0,0,.4) 88%,rgba(0,0,0,.1) 94%,transparent 100%);
  }
  .logo-orbit__vmask{
    -webkit-mask-image:linear-gradient(rgba(0,0,0,0) 0%,#000 1%,#000 42%,rgba(0,0,0,.5) 45%,rgba(0,0,0,.18) 50%,rgba(0,0,0,.05) 56%,rgba(0,0,0,0) 62%,rgba(0,0,0,0) 100%);
    mask-image:linear-gradient(rgba(0,0,0,0) 0%,#000 1%,#000 42%,rgba(0,0,0,.5) 45%,rgba(0,0,0,.18) 50%,rgba(0,0,0,.05) 56%,rgba(0,0,0,0) 62%,rgba(0,0,0,0) 100%);
  }
  .orbit-stage{transform:rotate(-90deg)}
  .orbit-node__cell,.orbit-core-inner{transform:rotate(90deg)}
  .orbit-node:hover .orbit-node__cell,.orbit-node:focus-visible .orbit-node__cell{transform:rotate(90deg) scale(1.05)}
  .orbit-core-halo{transform:rotate(90deg)}
  /* Mobile perf: drop every per-frame blur pass on the masked orbit layer.
     Depth reads from scale + opacity; the layer just fades in. */
  .orbit-node{filter:none!important;transition:transform .65s cubic-bezier(.22,1,.36,1),opacity .75s cubic-bezier(.22,1,.36,1);will-change:transform,opacity}
  .logo-orbit{filter:none;transition:opacity .7s ease}
  .integrations.is-active .logo-orbit{filter:none}
  .orbit-core-halo--soft{filter:none;-webkit-mask:radial-gradient(circle,transparent 46%,#000 58%,#000 64%,transparent 76%);mask:radial-gradient(circle,transparent 46%,#000 58%,#000 64%,transparent 76%);opacity:.34}
  /* Mobile perf: drop the blur(2px) that fires on every status-line swap (~1.8s
     cadence); the opacity/transform fade alone carries the transition. */
  .status-line{transition:opacity .3s ease,transform .3s cubic-bezier(.22,1,.36,1)}
  .status-line.is-in,.status-line.is-out{filter:none}
}
@media(max-width:600px){
  .integrations{margin-top:var(--section-gap);padding:var(--section-gap) 18px 380px}.integrations h2{font-size:47px}.integrations-copy>p{font-size:16px}
  .logo-orbit{--orbit-size:720px;--ring-size:470px;--orbit-radius:-235px;--node-size:96px;--core-size:104px;--core-offset:110px;bottom:-330px;transform:translateX(-50%) scale(.98)}
  .status-logos{gap:10px}.status-logos img{max-width:62px;max-height:17px}
}
@media(prefers-reduced-motion:reduce){
  .logo-orbit,.orbit-node,.orbit-node__cell,.status-line,.integration-status{transition:none!important}
  .logo-orbit{opacity:1;filter:none}
}