/* ========================================
   BUSINESS SCROLL SECTION
   ======================================== */

.business-scroll-section {
  background: #ffffff;
}

.business-scroll-wrap {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 var(--section-pad-x);
}

.business-scroll-panel {
  max-width: 1120px;
  margin: 0 auto;
  padding: 18px 0 8px;
}

.business-scroll-header {
  text-align: center;
  max-width: 980px;
  margin: 0 auto var(--space-section-elements);
}

.business-scroll-title {
  margin: 0 auto var(--space-heading-subtext);
  color: rgba(15, 26, 43, 0.95);
  font-size: var(--type-section-title-size);
  line-height: var(--type-section-title-line);
  letter-spacing: var(--type-section-title-track);
  font-weight: var(--type-section-title-weight);
}

.business-scroll-title span {
  color: inherit;
}

.business-scroll-subtitle {
  margin: 0;
  color: rgba(15, 26, 43, 0.68);
  font-size: var(--type-section-subtitle-size);
  line-height: var(--type-section-subtitle-line);
  font-weight: var(--type-section-subtitle-weight);
}

.business-scroll-marquee {
  position: relative;
  overflow: hidden;
  padding: 8px 0;
}

.business-scroll-marquee + .business-scroll-marquee {
  margin-top: 10px;
}

.business-scroll-marquee::before,
.business-scroll-marquee::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 72px;
  z-index: 2;
  pointer-events: none;
}

.business-scroll-marquee::before {
  left: 0;
  background: linear-gradient(to right, var(--bg-light), rgba(248,250,255,0));
}

.business-scroll-marquee::after {
  right: 0;
  background: linear-gradient(to left, var(--bg-light), rgba(248,250,255,0));
}

.business-scroll-track {
  display: flex;
  width: max-content;
  align-items: center;
  gap: 34px;
  animation: businessScroll 28s linear infinite;
}

.business-scroll-marquee:hover .business-scroll-track {
  animation-play-state: paused;
}

.business-scroll-item {
  flex: 0 0 auto;
  color: #1f3f99;
  font-size: 1.28rem;
  line-height: 1.2;
  font-weight: 700;
  white-space: nowrap;
}

.business-scroll-item::after {
  content: '•';
  margin-left: 34px;
  color: rgba(47,86,201,0.28);
}

.business-scroll-track .business-scroll-item:last-child::after {
  content: '•';
}

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

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

.business-scroll-track--reverse {
  animation: businessScrollReverse 30s linear infinite;
}

.business-scroll-marquee:hover .business-scroll-track--reverse {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .business-scroll-track,
  .business-scroll-track--reverse {
    animation: none;
  }
}

@media (max-width: 768px) {
  .business-scroll-title {
    font-size: var(--type-section-title-size-mobile);
  }

  .business-scroll-track {
    gap: 26px;
  }

  .business-scroll-item {
    font-size: 1.12rem;
  }

  .business-scroll-item::after {
    margin-left: 26px;
  }
}

@media (max-width: 560px) {
  .business-scroll-wrap {
    padding: 0 16px;
  }

  .business-scroll-panel {
    padding: 4px 0 0;
  }

  .business-scroll-kicker {
    font-size: 0.62rem;
    padding: 5px 10px;
  }

  .business-scroll-title {
    font-size: var(--type-section-title-size-mobile-sm);
  }

  .business-scroll-subtitle {
    font-size: var(--type-section-subtitle-size-mobile-sm);
  }

  .business-scroll-marquee::before,
  .business-scroll-marquee::after {
    width: 34px;
  }

  .business-scroll-track {
    gap: 20px;
  }

  .business-scroll-item {
    font-size: 1.02rem;
  }

  .business-scroll-item::after {
    margin-left: 20px;
  }
}