/* ============================================================
   c-footer — site footer
   Dark footer: black bg, blue glow, 1 brand column + 6 nav
   columns, legal rows, SOC-2 badge.
   ============================================================ */

/* Layout shell (html h-full, body min-h-full flex
   flex-col, main flex-1) — keeps this footer pinned to the viewport
   bottom on short pages. Lives here because the stick-to-bottom
   behavior is a footer concern. */
html { height: 100%; }
body {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}
.site-main { flex: 1; }

.c-footer {
  position: relative;
  background: var(--color-black);
  color: var(--color-white);
  overflow: hidden;
}

/* Blue glow bottom — brighter and it FADES IN as the footer scrolls
   into view (Sofia, 2026-08-06: "too dark" + "appear with a fade").
   Rides the site reveal system; anchored without transforms because
   .is-revealed sets transform:none. The slow duration makes it read
   as the room's lights coming up, not a UI reveal. */
.c-footer__glow {
  position: absolute;
  /* sunk half below the footer's edge: only the top of the ellipse shows,
     a half circle rising from the floor (Sofia, 2026-08-06: the blurred
     rectangle read blocky — "super faded and smooth") */
  bottom: -340px;
  left: 0;
  right: 0;
  margin-inline: auto;
  width: min(1700px, 140%);
  height: 680px;
  pointer-events: none;
  /* a true radial fade needs no blur — there is no rectangle edge to hide */
  background: radial-gradient(
    50% 50% at 50% 50%,
    rgba(0, 106, 255, 0.55) 0%,
    rgba(0, 106, 255, 0.22) 42%,
    rgba(0, 106, 255, 0.08) 62%,
    transparent 76%
  );
  --reveal-y: 0px;
  --reveal-duration: 1.8s;
}

.c-footer__inner {
  position: relative;
  margin-inline: auto;
  max-width: var(--container-large);
  padding: 48px 20px;
}
@media (min-width: 640px) { .c-footer__inner { padding-block: 56px; } }
@media (min-width: 768px) { .c-footer__inner { padding-block: var(--space-section-sm); } }
@media (min-width: 1024px) { .c-footer__inner { padding-inline: 32px; } }

.c-footer__grid {
  display: grid;
  gap: 32px;
}
@media (min-width: 640px) {
  .c-footer__grid {
    gap: 40px;
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .c-footer__grid { grid-template-columns: 1.3fr repeat(6, 1fr); }
  /* EN runs 7 nav-derived columns (Use cases · Industries · Products ·
     Technology · Platform · Resources · Company); ES keeps 6 */
  .c-footer__grid--wide { grid-template-columns: 1.3fr repeat(7, 1fr); }
}

/* ---------- Brand column ---------- */
.c-footer__logo {
  height: 28px;
  width: auto;
  filter: brightness(0) invert(1);
}

.c-footer__social {
  margin-top: 20px;
  display: flex;
  align-items: center;
  /* 8px between the 24px hit boxes keeps the same 12px optical gap
     between the 20px glyphs (a11y tap-target pass, 2026-07-29) */
  gap: 8px;
}
.c-footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: rgba(255, 255, 255, 0.6);
  transition: color 0.2s;
}
.c-footer__social a:hover { color: var(--color-white); }
.c-footer__social svg {
  height: 20px;
  width: 20px;
}

.c-footer__address {
  font-style: normal;
  margin-top: 24px;
  /* matches the 13px column links (Sofia, 2026-08-05: a bit smaller) */
  font-size: 13px;
  line-height: var(--leading-body);
  color: rgba(255, 255, 255, 0.5);
}

/* seated at the foot of the main area, just above the legal divider
   (Sofia, 2026-08-05); the legal block's 64px margin-top provides the
   gap below. 2026-08-07: stray merge markers lived here and made the
   browser drop this rule AND the g2-link rule below (invalid-selector
   recovery eats the next block) — that's what glued the badge to the
   Company column. */
.c-footer__g2 { margin-top: 56px; }
/* dark-ground badge: red stars over a white "Read our reviews on [G2]"
   line; the mark is the black g2.svg inverted */
.c-footer__g2-link {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.c-footer__g2-stars { height: 15px; width: auto; }
.c-footer__g2-caption {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.72);
  transition: color 0.2s ease;
}
.c-footer__g2-link:hover .c-footer__g2-caption { color: var(--color-white); }
.c-footer__g2-mark {
  height: 17px;
  width: auto;
  filter: brightness(0) invert(1);
}

/* ---------- Nav columns ---------- */
.c-footer__col-title {
  font-size: var(--fs-sm);
  line-height: 20px;
  font-weight: 500;
  color: var(--color-white);
  margin-bottom: 12px;
}
.c-footer__col-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.c-footer__col-list a {
  /* 4px padding-block grows the 20px line to a 28px hit box; the negative
     margin keeps the 8px list rhythm untouched (a11y 24px tap floor) */
  display: inline-block;
  padding-block: 4px;
  margin-block: -4px;
  /* a step under fs-sm (Sofia, 2026-08-05: the grey link mass read big
     across 7 columns) */
  font-size: 13px;
  line-height: 20px;
  color: rgba(255, 255, 255, 0.5);
  transition: color 0.2s;
}
.c-footer__col-list a:hover { color: var(--color-white); }

/* ---------- Legal bottom ---------- */
.c-footer__legal {
  margin-top: 64px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 32px;
}
.c-footer__legal-row {
  display: flex;
  flex-wrap: wrap;
  column-gap: 24px;
  row-gap: 8px;
  font-size: var(--fs-xs);
  line-height: 16px;
  color: rgba(255, 255, 255, 0.4);
}
.c-footer__legal-row + .c-footer__legal-row { margin-top: 12px; }
.c-footer__legal-row a {
  /* 16px line + 4px padding-block = 24px hit box, rhythm preserved via
     the negative margin (a11y 24px tap floor) */
  display: inline-block;
  padding-block: 4px;
  margin-block: -4px;
  transition: color 0.2s;
}
.c-footer__legal-row a:hover { color: var(--color-white); }

/* ---------- SOC-2 + copyright ---------- */
.c-footer__soc {
  margin-top: 32px;
  display: flex;
  /* seal vertically centered on the two-line text block (Sofia, 2026-08-05) */
  align-items: center;
  gap: 16px;
}
.c-footer__soc-badge {
  flex-shrink: 0;
  /* the Figma SOC-2 badge, white cut, at the badge's 56px seat
     (Sofia, 2026-08-10) */
  height: 56px;
  width: 56px;
}

.c-footer__soc-text p {
  font-size: var(--fs-xs);
  line-height: 16px;
  color: rgba(255, 255, 255, 0.4);
}
.c-footer__soc-text p + p { margin-top: 4px; }

/* Footer newsletter (data-newsletter) — launch-critical rebuild 2026-08-03.
   Live's block is hidden in production; this one is real: HubSpot Forms API
   submission handled in site.js. */
.c-footer__newsletter {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 48px;
  align-items: center;
  justify-content: space-between;
  padding: 28px 0;
  border-top: 1px solid rgb(255 255 255 / 12%);
}
.c-footer__newsletter-copy { max-width: 520px; }
.c-footer__newsletter-title {
  margin: 0 0 6px;
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--color-white);
}
.c-footer__newsletter-sub {
  margin: 0;
  font-size: var(--fs-sm);
  color: rgb(255 255 255 / 64%);
}
.c-footer__newsletter-form { display: flex; gap: 10px; flex-wrap: wrap; }
.c-footer__newsletter-input {
  min-width: 260px;
  padding: 10px 14px;
  border: 1px solid rgb(255 255 255 / 24%);
  border-radius: 10px;
  background: rgb(255 255 255 / 8%);
  color: var(--color-white);
  font: inherit;
  font-size: var(--fs-sm);
}
.c-footer__newsletter-input::placeholder { color: rgb(255 255 255 / 48%); }
.c-footer__newsletter-input:focus-visible { outline: 2px solid var(--color-blue-500); outline-offset: 1px; }
.c-footer__newsletter-btn {
  padding: 10px 18px;
  border: 0;
  border-radius: 10px;
  background: var(--color-blue-500);
  color: var(--color-white);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 500;
  cursor: pointer;
}
.c-footer__newsletter-btn:hover { filter: brightness(0.92); }
.c-footer__newsletter-btn:disabled { opacity: 0.6; cursor: default; }
.c-footer__newsletter-msg { margin: 10px 0 0; font-size: var(--fs-sm); color: var(--color-red-300); width: 100%; }
.c-footer__newsletter-msg.is-ok { color: var(--color-green-flow); }

/* ---------- language dropdown (Sofia, 2026-08-18) ----------
   Sits at the right end of the legal row; the menu opens UPWARD (the
   footer is the page foot). Hairlines carry the elevation — no shadows. */
.c-footer__lang {
  position: relative;
  margin-left: auto;
}
.c-footer__lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 12px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 10px;
  color: rgba(255, 255, 255, 0.7);
  font-size: var(--fs-xs);
  line-height: 16px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.c-footer__lang-btn::-webkit-details-marker { display: none; }
.c-footer__lang-btn:hover { color: var(--color-white); border-color: rgba(255, 255, 255, 0.35); }
.c-footer__lang-chev { transition: transform 0.25s var(--ease-out-expo); }
.c-footer__lang[open] .c-footer__lang-chev { transform: rotate(180deg); }
.c-footer__lang-menu {
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  min-width: 148px;
  padding: 6px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  background: var(--color-black);
  z-index: 5;
}
.c-footer__lang-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: var(--fs-xs);
  line-height: 16px;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
}
.c-footer__lang-item.is-current { color: var(--color-white); }
a.c-footer__lang-item:hover { background: rgba(255, 255, 255, 0.08); color: var(--color-white); }