/* Orbital integration architecture: readable nodes, directed moving packets. */
.integrations-page .ig-hero-grid { display:block; padding-bottom:34px; }
.ig-hero-copy { display:grid; grid-template-columns:1.3fr 1fr; column-gap:70px; align-items:start; }
.ig-hero-copy .ig-breadcrumbs { grid-column:1/-1; margin-bottom:25px; }
.ig-hero-copy .home-overline { grid-column:1; }
.ig-hero-copy h1 { grid-column:1; grid-row:3/6; font-size:clamp(40px,4.5vw,66px); margin:18px 0 0; }
.ig-hero-copy .ig-hero-lead { grid-column:2; grid-row:2/4; font-size:16px; padding-top:12px; }
.ig-hero-copy .ig-hero-actions { grid-column:2; grid-row:4; gap:16px; margin-top:20px; }
.ig-hero-copy .ig-hero-note { grid-column:2; font-size:10px; margin-top:16px!important; }
.ix { --ix-bg:#080e15; position:relative; margin-bottom:42px; color:#edf5f7; scroll-margin-top:94px; }
.ix-top { display:flex; align-items:center; justify-content:space-between; gap:25px; padding:26px 0 23px; border-top:1px solid #25333a; }
.ix-eyebrow { color:#81999f; font-size:9px; text-transform:uppercase; letter-spacing:.14em; font-weight:500; }
.ix-top h2 { font:600 clamp(21px,2.2vw,30px)/1.2 var(--home-display); letter-spacing:-.035em; margin-top:10px; }
.ix-demo { display:flex; align-items:center; gap:9px; color:#a1b2bc; font-size:11px; white-space:nowrap; }
.ix-demo i { width:5px; height:5px; border-radius:50%; background:#53edd0; box-shadow:0 0 10px #53edd075; }
.ix-toolbar { display:flex; align-items:center; justify-content:space-between; gap:18px; border:1px solid #26343e; border-bottom:0; border-radius:14px 14px 0 0; padding:12px 16px; background:#101922; }
.ix-modes,.ix-playback { display:flex; align-items:center; gap:5px; }
.ix button { -webkit-tap-highlight-color:transparent; cursor:pointer; }
.ix-modes button { background:transparent; color:#a4b4c1; border:1px solid transparent; border-radius:6px; padding:11px 13px; font-size:11px; white-space:nowrap; transition:background .2s,color .2s; }
.ix-modes button:hover { color:white; background:#1c2d38; }
.ix-modes button[aria-pressed="true"] { color:#b6fcec; background:#1d3937; border-color:#365f57; }
.ix-playback button { display:flex; align-items:center; justify-content:center; gap:7px; border:1px solid #33414b; color:#a7b8c3; border-radius:6px; background:#14202a; min-height:36px; padding:0 11px; font-size:11px; }
.ix-playback button:hover { background:#243a45; color:#fff; }
.ix-playback [data-ix-restart] { font-size:22px; }
.ix-scroll { overflow:hidden; background:var(--ix-bg); border-inline:1px solid #26343e; }
.ix-stage { position:relative; width:100%; aspect-ratio:1140/620; isolation:isolate; background:radial-gradient(ellipse at 51% 49%,#16383c55 0,transparent 35%),radial-gradient(ellipse at 78% 48%,#593c1922 0,transparent 35%),linear-gradient(135deg,#0b121d,#080e15 65%); }
.ix-space { position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; }
.ix-orbits { fill:none; stroke:#9cb7ca; stroke-opacity:.075; stroke-width:1; }
.ix-orbits ellipse:nth-child(2n) { stroke-dasharray:2 7; stroke-opacity:.12; }
.ix-quadrant { position:absolute; top:26px; color:#677e91; font:9px var(--home-body); letter-spacing:.17em; text-transform:uppercase; }
.ix-quadrant--left { left:28px; }
.ix-quadrant--right { right:28px; }
.ix-mint { --ix-color:#53edd0; --ix-rgb:83,237,208; }
.ix-blue { --ix-color:#80bdff; --ix-rgb:128,189,255; }
.ix-gold { --ix-color:#f6c477; --ix-rgb:246,196,119; }
.ix-violet { --ix-color:#bca7ed; --ix-rgb:188,167,237; }
.ix-route { fill:none; transition:opacity .45s; }
.ix-track { stroke:var(--ix-color); stroke-width:1; opacity:.2; }
.ix-lit { stroke:var(--ix-color); stroke-width:3; opacity:.065; }
.ix-direction { stroke:var(--ix-color); stroke-width:.65; opacity:.4; }
.ix-route.is-active .ix-track { opacity:.72; stroke-width:1.4; }
.ix-route.is-active .ix-lit { opacity:.16; stroke-width:7; }
.ix.is-focused .ix-route:not(.is-active) { opacity:.12; }
.ix-packet { pointer-events:none; }
.ix-trail { fill:none; stroke:var(--ix-color); stroke-width:2; stroke-linecap:round; opacity:.6; }
.ix-halo { fill:var(--ix-color); opacity:.13; }
.ix-dot { fill:#f3fffc; filter:drop-shadow(0 0 3px var(--ix-color)); }
.ix-packet-tag { fill:var(--ix-color); font:10px var(--home-body); text-anchor:middle; }
.ix-packet-tag rect { fill:#0c1822; stroke:var(--ix-color); stroke-opacity:.25; }
.ix-node { position:absolute; z-index:2; left:var(--x); top:var(--y); width:150px; height:var(--size); transform:translate(-50%,-50%); background:none; border:0; padding:0; color:#d8e4ec; display:flex; align-items:center; flex-direction:column; overflow:visible; transition:opacity .4s; }
.ix-node::after { content:""; position:absolute; top:0; width:var(--size); height:var(--size); border-radius:50%; border:1px solid var(--ix-color); opacity:.16; transform:scale(1.14); transition:opacity .25s,transform .25s; pointer-events:none; }
.ix-orb { flex-shrink:0; width:var(--size); height:var(--size); display:grid; place-items:center; position:relative; border-radius:50%; border:1px solid rgba(var(--ix-rgb),.5); background:radial-gradient(circle at 32% 22%,rgba(var(--ix-rgb),.25),transparent 66%),radial-gradient(circle at 70% 90%,#050b12 5%,#192a36 72%); box-shadow:inset -6px -9px 13px #020810a6,inset 0 1px 3px rgba(var(--ix-rgb),.2),0 0 25px rgba(var(--ix-rgb),.07); transition:box-shadow .3s,border-color .3s; }
.ix-orb svg { width:30px; height:30px; fill:none; stroke:var(--ix-color); stroke-width:1.35; stroke-linecap:round; stroke-linejoin:round; }
.ix-node-name { display:block; font-family:var(--home-display); font-weight:550; font-size:12px; margin-top:14px; line-height:1.1; white-space:nowrap; text-shadow:0 1px 7px #080e15,0 1px 12px #080e15; }
.ix-node-sub { display:block; font-size:9px; color:#7d94a5; margin-top:5px; white-space:nowrap; text-shadow:0 1px 7px #080e15; }
.ix-node:hover .ix-orb,.ix-node[aria-pressed="true"] .ix-orb { border-color:var(--ix-color); box-shadow:inset -6px -9px 13px #020810a6,0 0 36px rgba(var(--ix-rgb),.25); }
.ix-node:hover::after,.ix-node[aria-pressed="true"]::after { opacity:.6; transform:scale(1.25); }
.ix.is-focused .ix-node:not(.is-active) { opacity:.23; }
.ix-node--crm { --size:128px; }
.ix-node--crm .ix-orb { background:radial-gradient(circle at 32% 26%,#dbfff1,#5bebcc 25%,#1e9f8d 60%,#10504b 85%); border:1px solid #8bffe2; box-shadow:inset -11px -12px 25px #004740a0,inset 3px 3px 20px #e1fff184,0 0 38px #39e8bc40,0 0 100px #3fe6c119; }
.ix-node--crm::before { content:""; position:absolute; inset:-20px 0 auto; margin:auto; width:168px; height:168px; border:1px solid #53edd024; border-radius:50%; }
.ix-node--crm::after { border:1px dashed #8bfadd50; opacity:1; transform:scale(1.18); animation:ix-spin 42s linear infinite; }
.ix-crm-word { font-family:var(--home-display); color:#073c35; font-size:29px; font-weight:750; letter-spacing:-.04em; text-shadow:0 1px 0 #d3ffea66; }
.ix-node--crm .ix-node-name { display:none; }
.ix-node--crm .ix-node-sub { margin-top:29px; font-size:11px; color:#b2d5d0; }
.ix-node--erp .ix-orb svg { width:37px; height:37px; }
.ix-node--erp .ix-orb { box-shadow:inset -8px -8px 13px #020810a6,0 0 45px #f6c47710; }
.ix-node--erp .ix-node-name { font-size:16px; }
.ix-core-caption { position:absolute; top:69.5%; left:50.88%; transform:translateX(-50%); color:#648a87; font-size:8px; letter-spacing:.11em; text-transform:uppercase; white-space:nowrap; }
.ix-legend { display:flex; flex-wrap:wrap; align-items:center; gap:12px 22px; border:1px solid #26343e; border-top:0; padding:17px 25px; background:#0b141d; font-size:10px; color:#93a9b8; }
.ix-legend>span { display:flex; align-items:center; gap:8px; }
.ix-legend i { width:5px; height:5px; background:var(--ix-color); border-radius:50%; }
.ix-legend small { margin-left:auto; font-size:9px; color:#768d9a; }
.ix-detail { display:grid; grid-template-columns:1.25fr 1fr; gap:55px; padding:26px; background:#101a23; border:1px solid #26343e; border-top:0; border-radius:0 0 14px 14px; min-height:180px; }
.ix-detail h3 { font:550 clamp(17px,1.7vw,23px)/1.25 var(--home-display); letter-spacing:-.025em; margin:10px 0; }
.ix-detail p { font-size:12px; line-height:1.65; color:#9ab0bf; max-width:530px; }
.ix-detail-aside { align-self:center; }
.ix-event { border-left:1px solid #34554f; padding:3px 0 3px 23px; display:grid; gap:10px; }
.ix-event-label { text-transform:uppercase; letter-spacing:.12em; font-size:8px; color:#738f9c; }
.ix-event strong { font-size:14px; font-weight:500; color:#c0f2e7; }
.ix-event>span:last-child { font-size:11px; color:#8ca9b4; }
.ix-steps { display:flex; align-items:center; gap:9px; }
.ix-steps button { flex:1; position:relative; background:#182a36; color:#8da3b3; border:1px solid #354651; border-radius:6px; height:38px; font-size:11px; overflow:hidden; }
.ix-steps button[aria-pressed="true"] { border-color:#53edd0; color:#c4fff1; background:#163c35; }
.ix-steps button::after { content:""; position:absolute; bottom:0; height:2px; background:#53edd0; left:0; width:0; }
.ix-steps button[aria-pressed="true"]::after { width:var(--progress,0%); }
.ix-reset { background:transparent; border:0; color:#72c9b7; font-size:10px; margin-top:16px; padding:4px 0; }
.ix-note { color:#718794; font-size:10px; line-height:1.5; padding:15px 0 0; }
.ix.is-stopped * { animation-play-state:paused!important; }
@keyframes ix-spin { to { transform:scale(1.18) rotate(360deg); } }
@media(min-width:1400px) { .ix-node { --scale:1.08; } }
@media(max-width:1100px) { .ig-hero-copy { column-gap:35px; }.ig-hero-copy h1 { font-size:48px; }.ix-node { --size:52px!important; }.ix-node--crm { --size:100px!important; }.ix-node--crm::before { width:136px;height:136px;top:-18px; }.ix-node--erp { --size:74px!important; }.ix-node-name { font-size:11px; }.ix-node-sub { font-size:8px; }.ix-legend small { width:100%; margin-left:0; }.ix-core-caption { display:none; } }
@media(max-width:760px) { .ig-hero-copy { display:block; }.ig-hero-copy h1 { font-size:clamp(38px,8vw,52px); }.ig-hero-copy .ig-hero-lead { margin-top:22px; }.ix-top { align-items:flex-start; gap:14px; flex-direction:column; }.ix-demo { font-size:10px; }.ix-toolbar { align-items:flex-start; flex-direction:column; padding:12px; gap:10px; }.ix-modes { width:100%; flex-wrap:wrap; }.ix-modes button { padding:9px 10px; font-size:10px; }.ix-playback { align-self:flex-end; }.ix-scroll { overflow-x:auto; scrollbar-color:#34534e #0b141d; }.ix-stage { width:880px; min-width:880px; }.ix-quadrant { font-size:8px; }.ix-legend { padding:15px; gap:12px 18px; font-size:9px; }.ix-legend small::before { content:"Схему можно прокручивать в сторону. "; }.ix-detail { grid-template-columns:1fr; gap:22px; padding:22px; min-height:260px; }.ix-event { padding-left:16px; }.ix-node { width:135px; }.ix-node-name { font-size:11px; }.ix-node-sub { font-size:8px; }.ix-note { font-size:9px; }.ix { scroll-margin-top:75px; } }
@media(prefers-reduced-motion:reduce) { .ix * { animation:none!important; transition:none!important; } }

/* Compact edition. The diagram uses the available viewport, not the page width. */
.ix--compact {
  display:grid;
  grid-template-rows:44px 48px minmax(280px,1fr) 30px 104px 26px;
  height:min(760px,calc(100svh - 108px));
  scroll-margin-top:94px;
}
.ix--compact .ix-top { padding:0 0 10px; gap:18px; align-items:center; border-top:0; }
.ix--compact .ix-top .ix-eyebrow { display:none; }
.ix--compact .ix-top h2 { margin:0; font-size:23px; }
.ix--compact .ix-demo { font-size:11px; }
.ix--compact .ix-toolbar { padding:6px 12px; gap:12px; }
.ix--compact .ix-modes button { padding:8px 12px; font-size:12px; }
.ix--compact .ix-playback button { min-height:32px; font-size:12px; }
.ix--compact .ix-playback [data-ix-restart] { font-size:21px; }
.ix--compact .ix-scroll { min-height:0; overflow:visible; }
.ix--compact .ix-stage { height:100%; width:100%; min-width:0; aspect-ratio:auto; }
.ix--compact .ix-quadrant,.ix--compact .ix-core-caption { display:none; }
.ix--compact .ix-node { width:160px; }
.ix--compact .ix-orb svg { width:25px; height:25px; }
.ix--compact .ix-node--erp .ix-orb svg { width:29px; height:29px; }
.ix--compact .ix-node-name { font-size:14px; line-height:1.12; font-weight:600; margin-top:7px; color:#edf5fc; }
.ix--compact .ix-node-sub { display:none; }
.ix--compact .ix-node--crm .ix-node-sub { display:block; font-size:12px; margin-top:13px; color:#b9ded4; }
.ix--compact .ix-node--crm::before { width:calc(var(--size) + 26px); height:calc(var(--size) + 26px); top:-13px; }
.ix--compact .ix-node--crm::after { transform:scale(1.14); }
.ix--compact .ix-crm-word { font-size:25px; }
.ix--compact .ix-node--erp .ix-node-name { font-size:15px; }
.ix--compact .ix-track { opacity:.28; stroke-width:1.15; }
.ix--compact .ix-lit { opacity:.09; }
.ix--compact .ix-trail { stroke-width:2.8; opacity:.85; }
.ix--compact .ix-halo { opacity:.2; }
.ix--compact .ix-dot { filter:drop-shadow(0 0 4px var(--ix-color)); }
.ix--compact .ix-packet-tag { font-size:12px; font-weight:500; }
.ix--compact .ix-legend { padding:5px 15px; gap:8px 19px; font-size:10px; }
.ix--compact .ix-legend small { font-size:10px; width:auto; margin-left:auto; }
.ix--compact .ix-detail { min-height:0; padding:12px 16px; gap:28px; grid-template-columns:1.4fr 1fr; align-items:center; }
.ix--compact .ix-detail-intro,.ix--compact .ix-detail-aside { font-size:12px; line-height:1.3; }
.ix--compact .ix-detail .ix-eyebrow { display:block; font-size:9px; line-height:1.2; }
.ix--compact .ix-detail h3 { font-size:16px; line-height:1.25; margin:5px 0; }
.ix--compact .ix-detail p { font-size:12px; line-height:1.45; max-width:650px; }
.ix--compact .ix-event { gap:5px; padding-left:18px; }
.ix--compact .ix-event strong { font-size:13px; line-height:1.25; }
.ix--compact .ix-event>span { line-height:1.25; }
.ix--compact .ix-event>span:last-child { font-size:12px; }
.ix--compact .ix-reset { display:block; margin-top:6px; padding:2px 0; font-size:11px; line-height:1.2; }
.ix--compact .ix-steps { gap:6px; }
.ix--compact .ix-steps button { height:30px; font-size:12px; }
.ix--compact .ix-note { padding:7px 0 0; font-size:10px; line-height:1.3; }
@media(min-width:901px) and (max-width:1100px) {
  .ix--compact .ix-node-name { font-size:13px; }
  .ix--compact .ix-legend small { display:none; }
  .ix--compact .ix-modes button { padding-inline:9px; }
}
@media(max-width:900px) {
  .ix--compact {
    height:min(900px,calc(100svh - 108px));
    grid-template-rows:45px 80px minmax(370px,1fr) 42px 115px 30px;
    scroll-margin-top:94px;
  }
  .ix--compact .ix-top { flex-direction:row; gap:10px; padding-bottom:9px; }
  .ix--compact .ix-top h2 { font-size:18px; max-width:220px; }
  .ix--compact .ix-demo { font-size:0; }
  .ix--compact .ix-demo i { width:6px; height:6px; }
  .ix--compact .ix-toolbar { flex-direction:row; align-items:center; padding:8px; gap:6px; }
  .ix--compact .ix-modes { display:grid; grid-template-columns:auto auto; gap:3px; width:auto; }
  .ix--compact .ix-modes button { padding:7px 8px; font-size:11px; }
  .ix--compact .ix-playback { align-self:center; gap:4px; }
  .ix--compact .ix-playback button { padding:0 8px; min-width:30px; }
  .ix--compact [data-ix-pause-text] { display:none; }
  .ix--compact .ix-node { width:130px; }
  .ix--compact .ix-node-name { font-size:12px; white-space:normal; max-width:130px; margin-top:6px; line-height:1.15; }
  .ix--compact .ix-node--analytics .ix-node-name { max-width:115px; }
  .ix--compact .ix-node--crm .ix-node-sub { display:none; }
  .ix--compact .ix-node--erp .ix-node-name { font-size:13px; }
  .ix--compact .ix-orb svg { width:23px; height:23px; }
  .ix--compact .ix-node--erp .ix-orb svg { width:27px; height:27px; }
  .ix--compact .ix-crm-word { font-size:22px; }
  .ix--compact .ix-legend { gap:5px 14px; padding:5px 10px; font-size:9px; }
  .ix--compact .ix-legend small { display:none; }
  .ix--compact .ix-detail { display:block; position:relative; padding:10px 12px; }
  .ix--compact .ix-detail h3 { font-size:14px; margin:4px 0; }
  .ix--compact .ix-detail p { font-size:11px; line-height:1.4; }
  .ix--compact .ix-detail:has(.ix-steps:not([hidden])) .ix-detail-intro p { display:none; }
  .ix--compact .ix-detail .ix-eyebrow { font-size:8px; }
  .ix--compact .ix-event { display:none; }
  .ix--compact .ix-detail-aside { margin-top:7px; }
  .ix--compact .ix-steps { max-width:260px; }
  .ix--compact .ix-steps button { height:23px; font-size:10px; }
  .ix--compact .ix-reset { position:absolute; top:8px; right:12px; font-size:9px; margin:0; max-width:100px; }
  .ix--compact .ix-note { font-size:8px; padding-top:6px; }
}
@media(max-width:900px) and (max-height:820px) {
  .ix--compact { grid-template-rows:36px 74px minmax(330px,1fr) 36px 100px 26px; }
  .ix--compact .ix-detail p { display:none; }
  .ix--compact .ix-node-name { font-size:11px; }
}