/* ==========================================================================
   Footer, shared by every page: the homepage design (logo and line, Products
   and Company columns, then the copyright and legal links).
   Self-contained: it brings its own type, colours and container width, so it
   looks the same under the homepage's stylesheet and the inner pages'.
   ========================================================================== */
.footer {
  --footer-gutter: clamp(20px, 4.1667vw, 60px);
  background: #0d0d1c;
  color: #fff;
  font: 400 16px/1.625 "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  padding: 76px 0 34px;
}
.footer .container {
  width: min(100% - 2 * var(--footer-gutter), 1320px);
  margin-inline: auto;
}
.footer h3, .footer p, .footer ul { margin: 0; }
.footer ul { padding: 0; list-style: none; }
.footer a { color: inherit; text-decoration: none; }
.footer img { display: block; max-width: 100%; }

/* Animated underline for text links: draws in from the left on hover / keyboard focus, retracts to the right on leave */
.footer .u-line {
  background: linear-gradient(currentColor, currentColor) right 100% / 0 1px no-repeat;
  background-origin: content-box; /* stays under the text even when the link has padding */
  transition: background-size .38s cubic-bezier(.16, 1, .3, 1);
}
.footer a.u-line:hover,
.footer a.u-line:focus-visible { background-size: 100% 1px; background-position-x: left; }

.footer__top {
  display: flex;
  justify-content: space-between;
  gap: 48px;
}
.footer__logo { position: relative; display: inline-block; line-height: 0; }
.footer__logo::before { content: ""; position: absolute; inset: -12px -6px; }
.footer__logo img { height: 64px; width: auto; }
.footer__brand { max-width: 420px; }
.footer__brand p { margin-top: 30px; color: #b6b6bb; }
.footer__cols { display: flex; gap: 0; }
.footer__cols > div { width: 212px; }
.footer__cols > div:last-child { width: auto; min-width: 78px; }
.footer__head {
  font: 600 17px/1 "Pixelify Sans", "Host Grotesk", monospace;
  text-transform: uppercase;
  letter-spacing: .02em;
}
.footer__cols ul { margin-top: 20px; display: grid; gap: 16px; font-size: 14px; line-height: 1.25; color: #9e9ea4; }
.footer__cols a { transition: color .2s; }
.footer__cols a:hover,
.footer__bottom a:hover { color: #fff; }
.footer__bottom {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  margin-top: 46px;
  padding-top: 27px;
  border-top: 1px solid rgba(255, 255, 255, .08);
  font-size: 14px;
  color: #7a7a83; /* reference #6e6e77 lifted to 4.5:1 on navy */
}
.footer__bottom ul { display: flex; gap: 24px; }

@media (max-width: 1023px) {
  .footer__top { flex-direction: column; gap: 40px; }
  .footer__cols > div { width: 50%; }
}
@media (max-width: 640px) {
  .footer__bottom { flex-direction: column; }
}
/* Touch devices: 44px targets. Spacing grows only where expanded hit areas would otherwise overlap. */
@media (pointer: coarse) {
  .footer__cols ul { gap: 2px; }
  .footer__cols a { display: inline-block; padding-block: 13px; }
  .footer__bottom a { display: inline-block; padding-block: 13px; margin-block: -13px; }
}