@layer components {
  .marquee { position: relative; overflow: hidden; padding-block: var(--s-4); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
  .marquee { --marquee-dur: 36s; }
  .marquee[data-len="s"] { --marquee-dur: 24s; }
  .marquee[data-len="l"] { --marquee-dur: 54s; }
  .marquee-track { display: flex; gap: var(--s-8); width: max-content; animation: marquee var(--marquee-dur) linear infinite; }
  .marquee:hover .marquee-track, .marquee:focus-within .marquee-track { animation-play-state: paused; }
  .marquee-group { display: flex; gap: var(--s-8); align-items: center; flex: none; }
  .logo-item { display: grid; place-items: center; height: 56px; min-width: 120px; padding: 0 var(--s-3); filter: grayscale(1) brightness(1.2); opacity: .7; transition: filter var(--dur), opacity var(--dur); }
  .logo-item:hover { filter: none; opacity: 1; }
  .logo-item img { max-height: 44px; width: auto; object-fit: contain; }
  html[data-surface="paper"] .logo-item { filter: grayscale(1); }
  @keyframes marquee { to { transform: translateX(calc(-50% - var(--s-4))); } }
  @media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; flex-wrap: wrap; width: auto; } .marquee-group[aria-hidden="true"] { display: none; } .marquee { mask-image: none; -webkit-mask-image: none; } }

  /* 服务行业文字条（LOGO 不足时） */
  .industries { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5); justify-content: center; font-family: var(--font-display); font-weight: 500; font-size: var(--t-lg); color: var(--muted); letter-spacing: .02em; padding-block: var(--s-5); border-block: 1px solid var(--line); }
  .industries span { display: inline-flex; align-items: center; gap: var(--s-3); }
  .industries span + span::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--cyan-ink); }

  /* 伙伴网格（关于页） */
  .logo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--s-3); }
  .logo-grid .logo-item { height: 80px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); min-width: 0; }
}