/* kx-footer: the site footer (Kairos Footer widget, widgets/footer). Mirrors site/Footer.tsx. Depends on kx-tokens. */
.kx.kx-footer { position: relative; isolation: isolate; overflow: hidden; background: var(--kx-navy-deep); padding-block: 2rem 2.5rem; }
@media (min-width: 1024px) { .kx.kx-footer { padding-block: 2.5rem 3.5rem; } }
/* BrandWave "bloom": light rising from the bottom of the page in the PROS blues */
.kx .kx-footer__bloom { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.kx .kx-footer__bloom i { position: absolute; border-radius: 50%; filter: blur(70px); will-change: transform; animation: kx-drift var(--kx-bloom-d, 26s) ease-in-out infinite alternate; }
@media (min-width: 640px) { .kx .kx-footer__bloom i { filter: blur(110px); } }
.kx .kx-footer__bloom i:nth-child(1) { left: 8%;  top: 52%; width: 62%; height: 78%; background: var(--kx-sky);   opacity: 0.5;  --kx-bloom-d: 26s; --kx-dx: 12%;  --kx-dy: -7%; }
.kx .kx-footer__bloom i:nth-child(2) { left: 34%; top: 62%; width: 72%; height: 84%; background: var(--kx-blue);  opacity: 0.55; --kx-bloom-d: 34s; --kx-dx: -10%; --kx-dy: -5%; }
.kx .kx-footer__bloom i:nth-child(3) { left: 58%; top: 70%; width: 50%; height: 66%; background: var(--kx-green); opacity: 0.3;  --kx-bloom-d: 21s; --kx-dx: 14%;  --kx-dy: -9%; }
.kx .kx-footer__bloom i:nth-child(4) { left: 66%; top: 48%; width: 58%; height: 80%; background: var(--kx-sky);   opacity: 0.34; --kx-bloom-d: 29s; --kx-dx: -14%; --kx-dy: 8%; }
@keyframes kx-drift { to { transform: translate(var(--kx-dx), var(--kx-dy)); } }

.kx .kx-footer__card {
  border-radius: 1.75rem; border: 1px solid rgb(255 255 255 / 0.15);
  background: rgb(2 38 56 / 0.55); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  padding: 2rem 1.5rem;
}
@media (min-width: 640px)  { .kx .kx-footer__card { padding: 2.5rem 2.25rem; } }
@media (min-width: 1024px) { .kx .kx-footer__card { padding: 3rem; } }
.kx .kx-footer__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; }
.kx .kx-footer__top img { height: 26px; width: auto; }
.kx .kx-footer__tools { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.kx .kx-footer__cta { padding: 0.625rem 1.25rem; font-size: 0.875rem; } /* the small pill, as in the header and testimonial (Andre, 7 Oct: one button system) */
.kx .kx-footer__hr { height: 1px; margin-block: 2.25rem; background: rgb(255 255 255 / 0.12); }
@media (min-width: 1024px) { .kx .kx-footer__hr { margin-block: 2.5rem; } }
.kx .kx-footer__columns { display: grid; gap: 2.5rem; grid-template-columns: 1fr; }
@media (min-width: 640px)  { .kx .kx-footer__columns { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .kx .kx-footer__columns { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.kx .kx-footer__col-heading { display: block; margin-bottom: 1.25rem; color: rgb(255 255 255 / 0.6); }
.kx .kx-footer__columns ul { display: grid; gap: 0.75rem; }
.kx .kx-footer__columns a { font-size: 0.9375rem; color: rgb(255 255 255 / 0.9); transition: color var(--kx-duration-base); }
.kx .kx-footer__columns a:hover { color: var(--kx-green); }
.kx .kx-footer__base { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; row-gap: 1.5rem; }
.kx .kx-footer__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.kx .kx-footer__copy { font-size: 0.8125rem; color: rgb(255 255 255 / 0.7); }
.kx .kx-footer__social { display: flex; align-items: center; gap: 0.625rem; }
.kx .kx-footer__social a { display: flex; width: 2rem; height: 2rem; align-items: center; justify-content: center; border-radius: 50%; background: rgb(255 255 255 / 0.1); color: #fff; transition: background-color var(--kx-duration-base), color var(--kx-duration-base); }
.kx .kx-footer__social a:hover { background: var(--kx-green); color: var(--kx-navy); }
.kx .kx-footer__social svg { width: 1rem; height: 1rem; }
.kx .kx-footer__legal { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.25rem; }
.kx .kx-footer__legal a { font-size: 0.8125rem; color: rgb(255 255 255 / 0.8); transition: color var(--kx-duration-base); }
.kx .kx-footer__legal a:hover { color: var(--kx-green); }

@media (prefers-reduced-motion: reduce) { .kx .kx-footer__bloom i { animation: none; } }