.integration-visual{position:relative;border:1px solid #aa73df30;background:radial-gradient(ellipse at 50% 50%,#6b249226,transparent 55%),#0b0712;margin:0 0 36px;padding:25px 28px 22px;overflow:hidden}.integration-topline,.integration-caption{display:flex;justify-content:space-between;align-items:center;gap:20px}.integration-topline>span{font-size:9px;letter-spacing:1.5px;color:#c9a5e6}.connections-toggle{background:none;color:#b3a0c3;border:1px solid #a77ac133;padding:6px 9px;font:inherit;font-size:9px;display:flex;gap:8px;align-items:center}.connections-toggle:hover{color:#e7ceff;border-color:#b477ff}.connection-map{position:relative;display:grid;grid-template-columns:280px 210px 280px;justify-content:space-between;align-items:center;gap:30px;min-height:420px;padding:35px 0}.connection-lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}.connection-base{fill:none;stroke:#9e60d251;stroke-width:1}.connection-pulse{fill:none;stroke:#d4a2ff;stroke-width:2;stroke-dasharray:5 25;stroke-linecap:round;animation:connection-flow 4s linear infinite;filter:drop-shadow(0 0 3px #b56cff);opacity:.7}.integration-brands{display:grid;grid-template-columns:1fr 1fr;gap:14px;position:relative;z-index:1}.integration-logo{display:flex;align-items:center;gap:10px;background:#160f20;border:1px solid #ae7bc32e;padding:13px 11px;min-height:64px;font-size:10px;color:#e5d9ed;transition:background .2s,border-color .2s}.integration-logo:hover{background:#251332;border-color:#ac6aff}.brand-icon{width:35px;height:35px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:#fff;border-radius:7px;padding:5px}.brand-icon img{width:100%;height:100%;object-fit:contain}.ncx-hub{position:relative;z-index:1;text-align:center;padding:32px 14px;background:linear-gradient(135deg,#37134f,#1b0d2b);border:1px solid #b578ff9c;box-shadow:0 0 45px #9a3de329}.ncx-hub>img{width:175px;max-width:100%;height:auto;display:block;margin:0 auto 18px}.ncx-hub>span:not(.hub-halo){display:block;font-size:8px;color:#c8a8e4;letter-spacing:1.1px}.hub-description{font-size:9px;color:#ae91c5;margin-top:8px}.hub-halo{position:absolute;inset:-12px;pointer-events:none;border:1px solid #ad6ce123;animation:hub-glow 4s ease-in-out infinite}.integration-apps{display:flex;flex-direction:column;gap:20px;position:relative;z-index:1}.connected-app{padding:18px 14px;display:flex;gap:13px;align-items:center;background:#130c1c;border:1px solid #a87fcb42}.app-symbol{font-size:23px;color:#bd82f1}.connected-app strong{font-size:11px;font-weight:500;display:block;color:#e5d5f4}.connected-app div>span{display:block;font-size:8px;color:#a791bb;margin-top:6px}.integration-caption{border-top:1px solid #ad70cf25;padding-top:18px;font-size:10px;color:#9d89ae}.integration-caption a{color:#caa0ed}.connections-paused .connection-pulse,.connections-paused .hub-halo{animation-play-state:paused}.connections-offscreen .connection-pulse,.connections-offscreen .hub-halo{animation-play-state:paused}@keyframes connection-flow{to{stroke-dashoffset:-120}}@keyframes hub-glow{50%{border-color:#c794ff60;box-shadow:0 0 25px #a56bd41a}}@media(max-width:1100px){.connection-map{grid-template-columns:240px 175px 235px;gap:15px}.integration-visual{padding:22px 18px}.integration-logo{font-size:9px;padding:10px 7px;gap:7px}.brand-icon{width:30px;height:30px}.ncx-hub{padding:28px 12px}.connected-app{padding:15px 12px;gap:10px}}@media(max-width:850px){.connection-map{grid-template-columns:1fr;gap:65px;padding:35px 0;justify-items:center}.integration-brands{grid-template-columns:repeat(4,1fr);width:100%;gap:10px}.integration-logo{flex-direction:column;justify-content:center;text-align:center;gap:9px;padding:12px 4px;font-size:9px}.brand-icon{width:34px;height:34px}.ncx-hub{width:230px;padding:28px 18px}.integration-apps{width:100%;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.connected-app{flex-direction:column;align-items:flex-start;padding:15px 12px}.connected-app strong{font-size:10px}.connected-app div>span{font-size:8px;line-height:1.6}.integration-topline>span{font-size:8px;letter-spacing:1px;max-width:180px}}@media(max-width:480px){.integration-visual{padding:18px 12px}.integration-topline{align-items:flex-start;gap:8px}.integration-topline>span{max-width:155px;line-height:1.8;font-size:7px}.connections-toggle{font-size:8px;padding:5px 6px;white-space:nowrap}.integration-brands{gap:8px}.integration-logo{font-size:8px;min-height:80px}.brand-icon{width:32px;height:32px}.integration-apps{gap:8px}.connected-app{padding:12px 8px;gap:6px}.connected-app strong{font-size:9px;line-height:1.5}.connected-app div>span{font-size:8px}.integration-caption{align-items:flex-start;font-size:9px;gap:15px}.integration-caption>span{max-width:110px}.integration-caption a{max-width:145px;text-align:right}}@media(prefers-reduced-motion:reduce){.connection-pulse,.hub-halo{animation:none}.integration-logo{transition:none}}
.integration-brands{grid-template-columns:repeat(4,1fr);gap:20px 12px;justify-items:center}
.integration-logo,.integration-logo:hover{border:0;padding:0;min-height:0;width:54px;height:54px;background:transparent;display:block;border-radius:50%}
.integration-logo .brand-icon{width:54px;height:54px;border-radius:50%;background:#fff;padding:12px;box-shadow:0 3px 16px #0003;transition:transform .2s,box-shadow .2s}
.integration-logo:hover .brand-icon,.integration-logo:focus-visible .brand-icon{transform:translateY(-3px);box-shadow:0 0 24px #ad6aff65}
.integration-logo img{width:30px;height:30px}
@media(max-width:1100px) and (min-width:851px){.integration-brands{gap:18px 9px}.integration-logo,.integration-logo .brand-icon{width:48px;height:48px}.integration-logo .brand-icon{padding:11px}.integration-logo img{width:26px;height:26px}}
@media(max-width:850px){.integration-brands{grid-template-columns:repeat(8,1fr);gap:20px 12px}.integration-logo,.integration-logo .brand-icon{width:50px;height:50px}.integration-logo .brand-icon{padding:11px}.integration-logo img{width:28px;height:28px}}
@media(max-width:600px){.integration-brands{grid-template-columns:repeat(4,1fr);gap:18px 12px}.integration-logo,.integration-logo .brand-icon{width:52px;height:52px}.integration-logo .brand-icon{padding:12px}}
@media(prefers-reduced-motion:reduce){.integration-logo .brand-icon{transition:none}}
.connection-map{grid-template-columns:350px 210px 280px;min-height:490px}
.integration-brands{display:block;width:100%;position:relative;aspect-ratio:350/420}
.integration-brands .integration-logo{position:absolute;left:var(--cloud-x);top:var(--cloud-y);width:var(--cloud-size);height:var(--cloud-size);transform:translate(-50%,-50%);margin:0;padding:0}
.integration-brands .brand-icon{width:100%;height:100%;padding:23%}
.integration-brands .integration-logo img{width:100%;height:100%}
@media(max-width:1100px) and (min-width:851px){.connection-map{grid-template-columns:260px 175px 235px;min-height:420px}}
@media(max-width:850px){.connection-map{grid-template-columns:1fr;gap:45px}.integration-brands{width:min(100%,390px);margin:auto}}
.integration-brands .integration-logo{height:auto;aspect-ratio:1}
.connection-map{grid-template-columns:420px 190px 260px;min-height:560px}
.integration-brands{aspect-ratio:420/490}
.connection-pulse{opacity:.5;stroke-width:1.5}
@media(max-width:1100px) and (min-width:851px){.connection-map{grid-template-columns:310px 165px 220px;gap:14px;min-height:460px}}
@media(max-width:850px){.connection-map{grid-template-columns:1fr}.integration-brands{width:min(100%,450px)}}
.connection-map .ncx-hub{width:180px;height:180px;justify-self:center;padding:0;border:0;border-radius:50%;background:radial-gradient(circle at 35% 25%,#2d163f,#130b1e 72%);display:flex;align-items:center;justify-content:center;box-shadow:0 0 45px #a754e52a}
.connection-map .ncx-hub>img{width:78px;height:auto;max-width:50%;margin:0}
.connection-map .ncx-hub .hub-halo{border-radius:50%;inset:-10px}
@media(max-width:1100px) and (min-width:851px){.connection-map .ncx-hub{width:150px;height:150px}.connection-map .ncx-hub>img{width:66px}}
@media(max-width:850px){.connection-map .ncx-hub{width:170px;height:170px}.connection-map .ncx-hub>img{width:75px}}
