/* 我們是誰 */
#about {
  --about-field-h: 540px;
  --about-band-h: 46px;
  --about-head-h: 44px;
  --about-cols: 1.3fr 1fr 1fr 0.8fr;
  border-top: 1px solid var(--line);
  overflow: hidden;
}
#about .about-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
#about .hl-h2 { color: var(--ink-2); font-weight: 560; line-height: 1.32; }
#about .hl-h2 em { font-style: normal; color: var(--ink-1); font-weight: 700; }
#about .about-nb { display: inline-block; }
#about .hl-lead { max-width: 30em; }

#about .about-trio { margin: 48px 0 0; display: grid; }
#about .about-trio div { display: grid; grid-template-columns: 96px 1fr; align-items: baseline; gap: 20px; padding: 22px 0; border-top: 1px solid var(--line); }
#about .about-trio dt { font-size: var(--fs-h3); font-weight: 650; color: var(--ink-1); }
#about .about-trio dd { margin: 0; color: var(--ink-2); font-size: 17px; line-height: 1.75; }

/* 業務詞軌道 */
#about .about-field { margin: 0; }
#about .about-rails { position: relative; height: var(--about-field-h); pointer-events: none; user-select: none; }
#about .about-labels { position: absolute; inset: 0 0 auto 0; height: var(--about-head-h); margin: 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: var(--about-cols); gap: 0 20px; border-bottom: 1px solid var(--line); }
#about .about-labels li { font-size: 13px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#about .about-cols { position: absolute; inset: var(--about-head-h) 0 0 0; display: grid; grid-template-columns: var(--about-cols); gap: 0 20px;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 20%, #000 80%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 20%, #000 80%, transparent); }
#about .about-col { position: relative; overflow: hidden; }
#about .about-track { position: absolute; inset: 0 0 auto 0; display: flex; flex-direction: column; will-change: transform;
  animation: about-up var(--about-dur, 60s) linear infinite; }
#about .about-track.is-down { animation-name: about-down; }
#about .about-set { margin: 0; padding: 0; list-style: none; display: grid; }
#about .about-set li { height: 38px; line-height: 38px; font-size: 14px; color: var(--ink-4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#about .about-col--1 .about-set li:nth-child(3n + 1),
#about .about-col--3 .about-set li:nth-child(4n + 2),
#about .about-col--0 .about-set li:nth-child(5n + 3) { color: #6e747b; }

/* 讀取帶：同一組軌道再疊一層亮字，只露出中間一條 */
#about .about-band { position: absolute; left: -12px; right: -12px; height: var(--about-band-h);
  top: calc(var(--about-head-h) + (var(--about-field-h) - var(--about-head-h) - var(--about-band-h)) / 2);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background: linear-gradient(90deg, transparent, rgba(242, 179, 61, 0.05) 18%, rgba(242, 179, 61, 0.05) 82%, transparent); }
#about .about-band::before { content: ""; position: absolute; left: 0; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 1px; background: var(--amber); }
#about .about-cols--lit {
  -webkit-mask-image: linear-gradient(to bottom, transparent calc(50% - 30px), #000 calc(50% - 6px), #000 calc(50% + 6px), transparent calc(50% + 30px));
  mask-image: linear-gradient(to bottom, transparent calc(50% - 30px), #000 calc(50% - 6px), #000 calc(50% + 6px), transparent calc(50% + 30px)); }
#about .about-cols--lit .about-set li { color: var(--ink-1) !important; }
#about .about-field-cap { margin-top: 18px; font-size: 13px; color: var(--ink-3); }

@keyframes about-up { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, -50%, 0); } }
@keyframes about-down { from { transform: translate3d(0, -50%, 0); } to { transform: translate3d(0, 0, 0); } }
#about.about-paused .about-track { animation-play-state: paused; }

/* 手機：軌道收成一條 */
#about .about-strip { display: none; }
@media (max-width: 860px) {
  #about .about-grid { grid-template-columns: 1fr; }
  #about .about-field { display: none; }
  #about .about-strip { display: block; position: relative; height: 40px; margin-top: 32px; overflow: hidden; pointer-events: none;
    border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); }
  #about .about-track--x { position: absolute; inset: 0 auto 0 0; flex-direction: row; width: max-content; animation: about-left 140s linear infinite; top: 0; }
  #about .about-track--x .about-set { display: flex; gap: 28px; padding-right: 28px; }
  #about .about-track--x li { height: 38px; line-height: 38px; font-size: 13px; color: var(--ink-3); overflow: visible; }
  #about .about-trio { margin-top: 28px; }
  #about .about-trio div { grid-template-columns: 64px 1fr; gap: 14px; padding: 18px 0; }
  #about .about-trio dd { font-size: 16px; }
}
@keyframes about-left { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }

@media (prefers-reduced-motion: reduce) {
  #about .about-track { animation: none !important; }
}