/* Motion stays within the original blue palette and never changes layout size. */
.gateway-hero { background-size: 160% 160%; animation: hero-light 14s ease-in-out infinite alternate; }
.gateway-hero > .eyebrow { animation: arrive .7s ease-out both; }
.gateway-hero > h1 { animation: arrive .9s .08s ease-out both; }
.gateway-lead { animation: arrive .9s .18s ease-out both; }
.gateway-hero > .button-row { animation: arrive .9s .28s ease-out both; }
.provider-marquees { max-width: 880px; margin: 30px auto 24px; display: grid; gap: 16px; }
.provider-marquee { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); }
.provider-track { display: flex; width: max-content; animation: provider-scroll 32s linear infinite; }
.provider-marquee:nth-child(2) .provider-track { animation-direction: reverse; animation-duration: 38s; }
.provider-group { display: flex; align-items: center; gap: 16px; padding-right: 16px; flex-shrink: 0; }
.provider-group > span, .provider-group > a { display: flex; align-items: center; justify-content: center; min-width: 126px; padding: 11px 20px; border: 1px solid #c9ddf5; border-radius: 10px; background: #ffffff80; color: #254665; font-size: 13px; white-space: nowrap; }
.provider-marquees:hover .provider-track { animation-play-state: paused; }
.motion-toggle { margin-top: 22px; border: 1px solid #a9c8ed; border-radius: 30px; padding: 8px 15px; background: #ffffff80; color: #1757a0; font-size: 11px; }
.motion-toggle span { margin-left: 8px; }
.capabilities.has-tabs .capability-panel:not([hidden]) { animation: panel-arrive .4s ease-out; }
.usage-illustration span { transform-origin: bottom; animation: bar-grow 3.5s ease-in-out infinite alternate; }
.usage-illustration span:nth-child(3n) { animation-delay: -1s; }
.usage-illustration span:nth-child(4n) { animation-delay: -2s; }
.route-preview strong { animation: hub-glow 4s ease-in-out infinite alternate; }
.setup-preview { transition: transform .3s, box-shadow .3s; }
.setup-grid article:hover .setup-preview { transform: translateY(-5px); box-shadow: 0 15px 35px #0a60ff12; }
.request-preview > div > span { animation: request-status 4s ease-in-out infinite; }
.request-preview > div > span:last-child { animation-delay: -2s; }
.motion-reveal { opacity: 0; transform: translateY(22px); transition: opacity .75s ease, transform .75s ease; }
.motion-reveal.is-visible { opacity: 1; transform: none; }
.setup-grid > article:nth-child(2), .landing-facts > div:nth-child(2) { transition-delay: .1s; }
.setup-grid > article:nth-child(3), .landing-facts > div:nth-child(3) { transition-delay: .2s; }
[data-motion-paused="true"] *, [data-motion-paused="true"] *::before, [data-motion-paused="true"] *::after { animation-play-state: paused !important; }
[data-motion-paused="true"] .motion-reveal { opacity: 1; transform: none; transition: none; }
[data-motion-paused="true"] .gateway-hero > .eyebrow, [data-motion-paused="true"] .gateway-hero > h1, [data-motion-paused="true"] .gateway-lead, [data-motion-paused="true"] .gateway-hero > .button-row { animation: none; }
@keyframes arrive { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes panel-arrive { from { opacity: .35; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes hero-light { from { background-position: 20% 20%; } to { background-position: 80% 40%; } }
@keyframes hub-glow { from { box-shadow: 0 0 15px #0a60ff10; } to { box-shadow: 0 0 45px #0a60ff30; } }
@keyframes provider-scroll { to { transform: translateX(-50%); } }
@keyframes bar-grow { from { transform: scaleY(.7); } to { transform: scaleY(1); } }
@keyframes request-status { 0%, 100% { color: #516580; } 50% { color: #0a60ff; } }
@media (max-width: 820px) { .motion-toggle { min-height: 44px; } }
@media (max-width: 480px) {
  .provider-group { gap: 10px; padding-right: 10px; }
  .provider-group > span, .provider-group > a { min-width: 100px; padding: 10px 14px; font-size: 11px; }
  .provider-marquees { gap: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .motion-reveal { opacity: 1; transform: none; }
  .motion-toggle { display: none; }
}

.provider-group > a:hover { color: var(--accent); border-color: var(--accent); }
.provider-marquees:focus-within .provider-track { animation-play-state: paused; }