.fdtm-marquee {
  --fdtm-font-family: Arial, sans-serif;
  --fdtm-font-size: 26px;
  --fdtm-font-weight: 700;
  --fdtm-text-color: #111111;
  --fdtm-bg-color: #f5f7fb;
  --fdtm-gap: 60px;
  --fdtm-padding-y: 16px;
  --fdtm-padding-x: 24px;
  --fdtm-radius: 18px;
  --fdtm-start: 0px;
  --fdtm-end: -300px;
  --fdtm-duration: 14s;
  width: 100%;
}

.fdtm-marquee__viewport {
  position: relative;
  overflow: hidden;
  width: 100%;
  background: var(--fdtm-bg-color);
  color: var(--fdtm-text-color);
  border-radius: var(--fdtm-radius);
  padding: var(--fdtm-padding-y) var(--fdtm-padding-x);
  box-shadow: 0 12px 30px rgba(17, 24, 39, 0.08);
}

.fdtm-marquee__viewport::before,
.fdtm-marquee__viewport::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: clamp(28px, 6vw, 68px);
  z-index: 2;
  pointer-events: none;
}

.fdtm-marquee__viewport::before {
  left: 0;
  background: linear-gradient(90deg, var(--fdtm-bg-color) 0%, rgba(255, 255, 255, 0) 100%);
}

.fdtm-marquee__viewport::after {
  right: 0;
  background: linear-gradient(270deg, var(--fdtm-bg-color) 0%, rgba(255, 255, 255, 0) 100%);
}

.fdtm-marquee__track {
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  width: max-content;
  will-change: transform;
  transform: translate3d(0, 0, 0);
}

.fdtm-marquee.is-ready .fdtm-marquee__track {
  animation: fdtm-scroll var(--fdtm-duration) linear infinite;
}

.fdtm-marquee--pause:hover .fdtm-marquee__track {
  animation-play-state: paused;
}

.fdtm-marquee__item {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  padding-right: var(--fdtm-gap);
  font-family: var(--fdtm-font-family);
  font-size: var(--fdtm-font-size);
  font-weight: var(--fdtm-font-weight);
  line-height: 1.2;
  letter-spacing: 0.01em;
  margin: 0;
}

@keyframes fdtm-scroll {
  from {
    transform: translateX(var(--fdtm-start));
  }
  to {
    transform: translateX(var(--fdtm-end));
  }
}

@media (max-width: 767px) {
  .fdtm-marquee__viewport {
    padding-left: max(16px, var(--fdtm-padding-x));
    padding-right: max(16px, var(--fdtm-padding-x));
  }
}