/* Subtle blue motion accents. No external libraries or fonts required. */
:root {
  --motion-blue: linear-gradient(110deg, #073e97, #0b59c6 35%, #168bbd 55%, #125fd0 75%, #073e97);
}
.site-header::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -2px;
  left: 0;
  height: 3px;
  pointer-events: none;
  background: linear-gradient(90deg, #0a4fae, #2d88ef, #a0e5ff, #2878dc, #0a4fae);
  background-size: 250% 100%;
  animation: blue-drift 18s ease-in-out infinite alternate;
}
.btn-primary, .nav-cta, .contact-section {
  background-image: var(--motion-blue);
  background-size: 240% 100%;
  animation: blue-drift 20s ease-in-out infinite alternate;
}
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .hero h1 > span {
    background-image: linear-gradient(100deg, #0948a8, #1262ca 35%, #057ea8 55%, #0948a8 80%);
    background-size: 220% 100%;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    animation: blue-drift 16s ease-in-out infinite alternate;
  }
}
.specific-card { position: relative; }
.specific-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #1056b1, #81dbf8, #196dd8, #1056b1);
  background-size: 260% 100%;
  animation: blue-drift 18s ease-in-out infinite alternate;
  pointer-events: none;
}
.motion-reveal.is-revealed { animation: soft-arrival .7s cubic-bezier(.2,.65,.3,1) both; }
@keyframes blue-drift { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
@keyframes soft-arrival { from { opacity: .15; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@media (hover: hover) and (pointer: fine) {
  .specific-card, .main-service-card { transition: translate .25s ease, box-shadow .25s ease; }
  .specific-card:hover, .main-service-card:hover { translate: 0 -4px; box-shadow: 0 14px 28px rgba(10,65,128,.12); }
}

/* One editable logo list; the second group is an inaccessible visual copy for the loop. */
.client-marquee { min-width: 0; margin-top: 18px; }
.marquee-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 14px; }
.marquee-toolbar p { margin: 0; color: #526b88; font-size: .83rem; }
.marquee-toggle { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; gap: 9px; min-height: 44px; padding: 9px 13px; border: 1px solid #cbdff5; border-radius: 8px; background: #fff; color: #174c8e; font-size: .78rem; font-weight: 700; cursor: pointer; }
.marquee-toggle:hover { background: #eaf3ff; }
.marquee-toggle-icon { width: 10px; height: 12px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; }
.marquee-toggle[aria-pressed="true"] .marquee-toggle-icon { width: 0; height: 0; border: 6px solid transparent; border-left: 9px solid currentColor; border-right: 0; }
.marquee-play-label, .marquee-toggle[aria-pressed="true"] .marquee-pause-label { display: none; }
.marquee-toggle[aria-pressed="true"] .marquee-play-label { display: inline; }
.marquee-viewport { width: 100%; overflow: hidden; padding-block: 8px; border-block: 1px solid #e2ecf8; border-radius: 10px; background: linear-gradient(180deg, #f5faff, #fff); }
.marquee-viewport:focus-visible { outline: 3px solid #0d7fe7; outline-offset: 4px; }
.marquee-track { display: flex; width: max-content; }
.marquee-group { display: flex; flex: 0 0 auto; align-items: stretch; gap: 16px; margin: 0; padding: 8px 16px 8px 0; list-style: none; }
.marquee-logo { display: grid; flex: 0 0 172px; place-items: center; width: 172px; height: 100px; padding: 17px; border: 1px solid #e0eaf6; border-radius: 10px; background: #fff; }
.marquee-logo img { display: block; width: 100%; height: 100%; min-height: 0; object-fit: contain; }
.client-marquee.is-running .marquee-track { animation: logo-drift var(--marquee-duration, 180s) linear infinite; }
.client-marquee.is-paused .marquee-track,
.client-marquee.is-offscreen .marquee-track,
.marquee-viewport:focus-within .marquee-track { animation-play-state: paused; }
@media (hover: hover) {
  .marquee-viewport:hover .marquee-track { animation-play-state: paused; }
}
@keyframes logo-drift { to { transform: translateX(calc(-1 * var(--marquee-distance, 0px))); } }
.client-marquee:not(.is-running) .marquee-viewport { overflow-x: auto; }
.client-marquee:not(.is-running) [data-marquee-copy] { display: none; }
.motion-suspended .site-header::after,
.motion-suspended .btn-primary, .motion-suspended .nav-cta,
.motion-suspended .contact-section, .motion-suspended .hero h1 > span,
.motion-suspended .specific-card::after, .motion-suspended .marquee-track { animation-play-state: paused; }
@media (max-width: 600px) {
  .marquee-toolbar { align-items: flex-start; gap: 10px; }
  .marquee-toolbar p { max-width: 48%; padding-top: 9px; font-size: .76rem; }
  .marquee-toggle { font-size: .73rem; padding-inline: 10px; }
  .marquee-group { gap: 12px; padding-right: 12px; }
  .marquee-logo { flex-basis: 140px; width: 140px; height: 86px; padding: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .site-header::after, .btn-primary, .nav-cta, .contact-section,
  .hero h1 > span, .specific-card::after, .motion-reveal.is-revealed,
  .client-marquee.is-running .marquee-track { animation: none !important; }
  .motion-reveal { opacity: 1; transform: none; }
  .specific-card:hover, .main-service-card:hover { translate: none; }
  .client-marquee .marquee-viewport { overflow-x: auto; }
  [data-marquee-copy], .marquee-toggle { display: none !important; }
}