/* Integrations section with connection map */
.connect-section { overflow: hidden; background: #f8faff; border-block: 1px solid #eef2f7; }
.connect-grid { display: grid; grid-template-columns: minmax(290px,.78fr) minmax(0,1.22fr); align-items: center; gap: 62px; }
.connect-copy { max-width: 430px; }
.connect-copy h2 { margin: 14px 0 14px; color: #111b2e; font-size: clamp(34px,4vw,47px); line-height: 1.08; letter-spacing: -.06em; }
.connect-copy p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.75; }
.connect-copy .button { margin-top: 24px; }
.integration-map { position: relative; min-height: 310px; display: grid; place-items: center; overflow: hidden; border: 1px solid #e3eaf4; border-radius: 18px; background: radial-gradient(#dce8fb .8px,transparent .8px) 0 0/22px 22px,#fff; }
.map-lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.map-lines path { fill: none; stroke: #9bbdf8; stroke-width: 1.6; stroke-dasharray: 4 7; }
.map-lines path.is-live { stroke: var(--blue-600); stroke-dasharray: 6 6; animation: map-dash .6s linear infinite; }
.map-packet { fill: var(--blue-600); stroke: #fff; stroke-width: 2; opacity: 0; filter: drop-shadow(0 0 6px rgb(37 99 235 / 55%)); transition: opacity .2s; }
.map-packet.is-moving { opacity: 1; }
@keyframes map-dash { to { stroke-dashoffset: -12; } }
.map-node { position: absolute; z-index: 1; display: flex; align-items: center; gap: 9px; min-width: 128px; padding: 12px; border: 1px solid #e7ecf2; border-radius: 11px; background: #fff; box-shadow: 0 9px 24px rgb(37 59 94 / 7%); transition: border-color .3s, box-shadow .3s, transform .3s; }
.map-node.is-active { border-color: #93b4f8; box-shadow: 0 0 0 4px rgb(37 99 235 / 10%), 0 12px 28px rgb(37 99 235 / 14%); transform: translateY(-2px); }
.map-node.is-done small { color: var(--success); font-weight: 650; }
.node-icon { display: grid; flex: 0 0 28px; width: 28px; height: 28px; place-items: center; border-radius: 9px; color: #fff; background: #f79009; font-size: 11px; font-weight: 780; }
.map-node strong { display: block; color: #344054; font-size: 10px; }
.map-node small { display: block; margin-top: 2px; color: #98a2b3; font-size: 8px; }
.node-market { left: 6%; top: 21%; }
.node-market .node-icon { color: #2d3277; background: #ffe600; transition: background .3s, color .3s; }
.node-lunq { left: 39%; top: 39%; min-width: 148px; border-color: #c6d8ff; box-shadow: 0 10px 28px rgb(37 99 235 / 10%); }
.node-lunq .node-icon { overflow: hidden; background: #1f52dd; }
.node-lunq .node-icon img { width: 100%; height: 100%; }
.node-invoice { right: 5%; top: 15%; }
.node-ship { right: 5%; bottom: 14%; }
.node-invoice .node-icon { background: #7a5af8; }
.node-ship .node-icon { background: #12b76a; }

@media (max-width: 1060px) {
  .connect-grid { gap: 34px; }
}
@media (max-width: 820px) {
  .connect-grid { grid-template-columns: 1fr; gap: 28px; }
  .connect-copy { max-width: 600px; }
  .integration-map { min-height: 290px; }
}
@media (max-width: 620px) {
  .connect-copy h2 { font-size: 37px; }
  .connect-copy p { font-size: 14px; }
  .integration-map { min-height: 300px; }
  .map-node { min-width: 108px; padding: 9px; gap: 7px; }
  .node-icon { flex-basis: 24px; width: 24px; height: 24px; }
  .map-node strong { font-size: 9px; }
  .node-market { left: 3%; top: 8%; }
  .node-lunq { left: 28%; top: 41%; min-width: 128px; }
  .node-invoice { right: 3%; top: 8%; }
  .node-ship { right: 3%; bottom: 8%; }
}