/* Integration logo marquee — single-row ticker, modeled on Firestrike:
   "Integrates with" label pinned left, one continuous left-scrolling track,
   edge-fade mask, pause on hover. Sits in the dark hero zone (carbon). */
.systems {
  background: var(--q-carbon);
  border-top: 1px solid rgba(184, 212, 194, 0.08);
  border-bottom: 1px solid rgba(184, 212, 194, 0.08);
  overflow: hidden;
  width: 100%;
}
.systems .inner {
  display: flex;
  align-items: center;
  gap: 40px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 22px 48px;
}
.systems .label {
  font: 600 11px/1.2 var(--q-font-display);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--q-celdon);
  opacity: 0.55;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Scroll viewport + edge fade */
.systems .scroll {
  position: relative;
  flex: 1 1 0;
  overflow: hidden;
}
.systems .mask {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background: linear-gradient(
    to right,
    var(--q-carbon) 0%,
    transparent 64px,
    transparent calc(100% - 64px),
    var(--q-carbon) 100%
  );
}

/* The moving track (logos are duplicated in markup → translateX(-50%) loops seamlessly) */
.systems .track {
  display: flex;
  align-items: center;
  gap: 56px;
  width: max-content;
  animation: q-marquee 80s linear infinite;
}
.systems:hover .track {
  animation-play-state: paused;
}
.systems .track img {
  height: 26px;
  width: auto;
  flex-shrink: 0;
  opacity: 0.95;
  transition: opacity var(--q-dur-med) var(--q-ease), transform var(--q-dur-med) var(--q-ease);
}
.systems .track img:hover {
  opacity: 1;
  transform: scale(1.08);
}

/* Some integration logos are near-black monochrome marks that vanish on the dark
   carbon strip — render those white (the conventional treatment on a dark bg).
   The colorful majority keep their brand color. */
.systems .track img[src*="microsoft_365"],
.systems .track img[src*="notion"],
.systems .track img[src*="github"],
.systems .track img[src*="linear"],
.systems .track img[src*="square"],
.systems .track img[src*="okta"],
.systems .track img[src*="aws"],
.systems .track img[src*="azure"],
.systems .track img[src*="zendesk"],
.systems .track img[src*="pagerduty"],
.systems .track img[src*="opsgenie"],
.systems .track img[src*="splunk"],
.systems .track img[src*="servicenow"],
.systems .track img[src*="anthropic"],
.systems .track img[src*="sap"],
.systems .track img[src*="fortinet"],
.systems .track img[src*="mailchimp"] {
  filter: brightness(0) invert(1);
}

@keyframes q-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Reduced motion: freeze the track; .scroll's overflow clips it to one screenful. */
@media (prefers-reduced-motion: reduce) {
  .systems .track { animation: none; }
}

@media (max-width: 1080px) {
  .systems .inner { gap: 28px; padding: 18px 32px; }
  .systems .track { gap: 44px; }
}
@media (max-width: 720px) {
  .systems .inner { gap: 18px; padding: 16px 24px; }
  .systems .label { font-size: 10px; }
  .systems .track { gap: 32px; }
  .systems .track img { height: 22px; }
}
@media (min-width: 2560px) {
  .systems .inner { max-width: 1680px; padding: 32px 48px; }
  .systems .track { gap: 72px; }
  .systems .track img { height: 34px; }
}