/* ---------------------------------------------------------------
   Hero art — each illustration is split into its own elements, and
   every element breathes on its own: a slow rotate + drift that
   ping-pongs (animation-direction: alternate). One shared keyframe,
   per-layer custom properties. Transform-only, so nothing reflows.
   --------------------------------------------------------------- */

.art {
  position: relative;
  width: 100%;
  aspect-ratio: 1672 / 941;
}

.art img {
  position: absolute;
  display: block;
  max-width: none;
  will-change: transform;
  animation-name: art-breathe;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;   /* the ping-pong */
}

@keyframes art-breathe {
  from { transform: translate(0, 0) rotate(0deg); }
  to   { transform: translate(var(--dx), var(--dy)) rotate(var(--rot)); }
}

@media (prefers-reduced-motion: reduce) {
  .art img { animation: none; }
}


/* AI agents & assistants */
.agents-l0 { left: 57.536%; top: 12.752%; width: 34.031%; transform-origin: 50% 100%; --dx: -0.2px; --dy: -2.1px; --rot: -0.27deg; animation-duration: 7.6s; animation-delay: -2.1s; }
.agents-l1 { left: 28.17%; top: 60.786%; width: 10.167%; transform-origin: 50% 50%; --dx: 4.0px; --dy: -1.0px; --rot: 1.97deg; animation-duration: 7.5s; animation-delay: -5.1s; }
.agents-l2 { left: 38.876%; top: 61.637%; width: 10.048%; transform-origin: 50% 50%; --dx: -0.6px; --dy: 2.5px; --rot: -1.61deg; animation-duration: 5.8s; animation-delay: -5.7s; }
.agents-l3 { left: 50.0%; top: 61.424%; width: 10.108%; transform-origin: 50% 50%; --dx: 2.2px; --dy: -1.0px; --rot: 2.20deg; animation-duration: 7.7s; animation-delay: -1.0s; }
.agents-l4 { left: 53.289%; top: 52.179%; width: 5.024%; transform-origin: 50% 50%; --dx: -0.1px; --dy: 1.2px; --rot: -1.23deg; animation-duration: 7.3s; animation-delay: -4.4s; }
.agents-l5 { left: 64.892%; top: 21.785%; width: 3.349%; transform-origin: 50% 50%; --dx: -4.0px; --dy: 0.7px; --rot: 2.15deg; animation-duration: 6.8s; animation-delay: -5.1s; }
.agents-l6 { left: 90.012%; top: 50.691%; width: 3.11%; transform-origin: 50% 50%; --dx: 3.0px; --dy: -4.0px; --rot: -2.32deg; animation-duration: 5.1s; animation-delay: -1.2s; }
.agents-l7 { left: 51.316%; top: 50.266%; width: 8.732%; animation: none; }


/* Workflow automation */
.automation-l0 { left: 0.0%; top: 14.984%; width: 78.708%; transform-origin: 50% 50%; --dx: -1.6px; --dy: -3.5px; --rot: -0.96deg; animation-duration: 6.6s; animation-delay: -1.0s; }
.automation-l1 { left: 75.538%; top: 14.665%; width: 15.311%; transform-origin: 50% 100%; --dx: 1.1px; --dy: -1.8px; --rot: 0.25deg; animation-duration: 8.3s; animation-delay: -0.5s; }


/* Data pipelines */
.data-l0 { left: 40.431%; top: 8.82%; width: 45.455%; transform-origin: 50% 100%; --dx: -0.6px; --dy: -1.3px; --rot: -0.31deg; animation-duration: 8.2s; animation-delay: -5.3s; }
.data-l1 { left: 87.799%; top: 5.632%; width: 7.237%; transform-origin: 50% 50%; --dx: -3.4px; --dy: 1.7px; --rot: 1.43deg; animation-duration: 6.0s; animation-delay: -1.2s; }
.data-l2 { left: 47.189%; top: 57.279%; width: 5.981%; transform-origin: 50% 50%; --dx: -0.5px; --dy: -4.5px; --rot: -1.67deg; animation-duration: 7.7s; animation-delay: -3.1s; }
.data-l3 { left: 56.639%; top: 66.844%; width: 6.22%; transform-origin: 50% 50%; --dx: -3.9px; --dy: 2.1px; --rot: 2.14deg; animation-duration: 7.6s; animation-delay: -5.4s; }
.data-l4 { left: 53.708%; top: 54.942%; width: 5.682%; transform-origin: 50% 50%; --dx: -0.3px; --dy: 2.7px; --rot: -0.94deg; animation-duration: 7.9s; animation-delay: -5.6s; }
.data-l5 { left: 49.043%; top: 44.102%; width: 6.041%; transform-origin: 50% 50%; --dx: 3.8px; --dy: -1.6px; --rot: 1.19deg; animation-duration: 6.4s; animation-delay: -5.3s; }
.data-l6 { left: 59.689%; top: 48.672%; width: 5.203%; transform-origin: 50% 50%; --dx: -4.0px; --dy: -2.1px; --rot: -2.16deg; animation-duration: 6.8s; animation-delay: -4.6s; }
.data-l7 { left: 62.62%; top: 12.115%; width: 1.794%; transform-origin: 50% 50%; --dx: 1.7px; --dy: 1.8px; --rot: 1.42deg; animation-duration: 8.5s; animation-delay: -4.4s; }
.data-l8 { left: 60.467%; top: 15.728%; width: 1.854%; transform-origin: 50% 50%; --dx: 3.3px; --dy: -4.0px; --rot: -1.91deg; animation-duration: 5.0s; animation-delay: -3.4s; }
.data-l9 { left: 67.644%; top: 20.191%; width: 3.589%; transform-origin: 50% 50%; --dx: 4.3px; --dy: -4.3px; --rot: 1.72deg; animation-duration: 7.1s; animation-delay: -5.5s; }
.data-l10 { left: 41.986%; top: 51.86%; width: 4.964%; transform-origin: 50% 50%; --dx: 4.0px; --dy: -3.1px; --rot: -1.71deg; animation-duration: 8.2s; animation-delay: -5.0s; }
.data-l11 { left: 48.983%; top: 18.278%; width: 1.734%; transform-origin: 50% 50%; --dx: 3.0px; --dy: -4.5px; --rot: 1.72deg; animation-duration: 8.1s; animation-delay: -1.9s; }
.data-l12 { left: 50.419%; top: 70.563%; width: 5.144%; transform-origin: 50% 50%; --dx: -1.1px; --dy: 2.9px; --rot: -1.30deg; animation-duration: 7.9s; animation-delay: -5.6s; }
.data-l13 { left: 62.022%; top: 61.105%; width: 4.904%; transform-origin: 50% 50%; --dx: 0.2px; --dy: -3.1px; --rot: 1.93deg; animation-duration: 6.1s; animation-delay: -2.4s; }
.data-l14 { left: 58.313%; top: 19.872%; width: 1.854%; transform-origin: 50% 50%; --dx: 2.6px; --dy: 1.8px; --rot: -1.82deg; animation-duration: 8.3s; animation-delay: -2.2s; }
.data-l15 { left: 47.01%; top: 21.36%; width: 1.675%; transform-origin: 50% 50%; --dx: 4.0px; --dy: -2.3px; --rot: 1.99deg; animation-duration: 6.9s; animation-delay: -3.6s; }
.data-l16 { left: 45.036%; top: 23.061%; width: 1.675%; transform-origin: 50% 50%; --dx: -0.6px; --dy: -2.5px; --rot: -1.56deg; animation-duration: 6.0s; animation-delay: -5.1s; }
.data-l17 { left: 67.943%; top: 12.009%; width: 2.691%; transform-origin: 50% 50%; --dx: -2.1px; --dy: -0.9px; --rot: 2.00deg; animation-duration: 8.2s; animation-delay: -0.8s; }
.data-l18 { left: 53.768%; top: 12.115%; width: 2.751%; transform-origin: 50% 50%; --dx: 3.0px; --dy: -5.3px; --rot: -1.31deg; animation-duration: 6.3s; animation-delay: -3.5s; }
.data-l19 { left: 45.395%; top: 2.232%; width: 51.435%; animation: none; }


/* Custom software */
.custom-l0 { left: 43.9%; top: 9.883%; width: 48.026%; transform-origin: 50% 100%; --dx: 1.3px; --dy: -1.8px; --rot: -0.21deg; animation-duration: 8.8s; animation-delay: -1.9s; }
.custom-l1 { left: 50.718%; top: 17.216%; width: 4.545%; transform-origin: 50% 50%; --dx: -1.7px; --dy: -1.1px; --rot: 1.97deg; animation-duration: 8.4s; animation-delay: -5.0s; }


/* Book a call */
.contact-l0 { left: 45.813%; top: 7.439%; width: 39.773%; transform-origin: 50% 100%; --dx: 0.6px; --dy: -1.4px; --rot: -0.31deg; animation-duration: 8.1s; animation-delay: -3.4s; }
.contact-l1 { left: 14.474%; top: 19.979%; width: 22.069%; transform-origin: 50% 50%; --dx: -1.4px; --dy: 1.2px; --rot: 1.20deg; animation-duration: 8.1s; animation-delay: -1.3s; }
.contact-l2 { left: 76.974%; top: 9.352%; width: 12.679%; transform-origin: 50% 50%; --dx: 4.2px; --dy: -2.3px; --rot: -1.87deg; animation-duration: 5.6s; animation-delay: -2.3s; }