/* Same near-black base as the hero and the final CTA above it, so the two read as one dark block. */
.a6-page .a6_Footer_footer {
  position: relative;
  overflow: clip;
  padding-top: 40px;
  padding-bottom: 0;
  background: var(--neutral-950);
  color: var(--text-primary);
}

/* A faint purple light rising from behind the wordmark. */
.a6-page .a6_Footer_footer::before {
  content: '';
  position: absolute;
  bottom: -26%;
  left: 50%;
  width: 96%;
  height: 62%;
  translate: -50% 0;
  background: radial-gradient(closest-side, rgb(91 8 187 / 0.3), rgb(44 4 90 / 0.14) 55%, transparent);
  pointer-events: none;
}

.a6-page .a6_Footer_footer > * {
  position: relative;
}

/* A second, tighter light behind the wordmark. Always on in the CSS; the scroll reveal fades it in as the word lands (it only
   ever animates opacity), so reduced motion gets the landed state. */
.a6-page .a6_Footer_footer > .a6_Footer_halo {
  position: absolute;
  bottom: -14%;
  left: 50%;
  width: 78%;
  height: 46%;
  translate: -50% 0;
  background: radial-gradient(closest-side, rgb(125 59 218 / 0.3), rgb(75 7 156 / 0.12) 58%, transparent);
  pointer-events: none;
}

.a6-page .a6_Footer_top {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 64px;
}

/* ---------- brand column ---------- */
.a6-page .a6_Footer_brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

.a6-page .a6_Footer_logoLink {
  display: inline-flex;
}

.a6-page .a6_Footer_description {
  max-width: 300px;
  color: var(--text-secondary);
}

.a6-page .a6_Footer_social {
  display: flex;
  align-items: center;
  gap: 8px;
}

.a6-page .a6_Footer_socialButton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-full);
  color: var(--text-primary);
  transition:
    background-color 0.3s var(--ease-snappy),
    border-color 0.3s var(--ease-snappy),
    transform 0.35s var(--ease-snappy);
}

.a6-page .a6_Footer_socialButton:hover {
  border-color: var(--border-strong);
  background: var(--bg-muted);
  transform: translateY(-1px);
}

.a6-page .a6_Footer_handle {
  margin-left: 4px;
  color: var(--text-secondary);
}

/* ---------- link columns ---------- */
.a6-page .a6_Footer_columns {
  display: grid;
  grid-template-columns: repeat(5, auto);
  justify-content: space-between;
  gap: 24px 32px;
  align-items: start;
}

.a6-page .a6_Footer_column {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.a6-page .a6_Footer_columnTitle {
  color: var(--text-tertiary);
}

.a6-page .a6_Footer_links {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.a6-page .a6_Footer_link {
  color: var(--text-secondary);
  transition: color 0.3s var(--ease-snappy);
}

.a6-page .a6_Footer_link:hover {
  color: var(--text-primary);
}

/* ---------- legal line: hairline above, copyright and company on the left, contacts on the right ---------- */
.a6-page .a6_Footer_bottom {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px 40px;
  margin-top: 80px;
  padding-top: 28px;
  border-top: 1px solid var(--border-default);
}

.a6-page .a6_Footer_legal {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 760px;
}

.a6-page .a6_Footer_copyright {
  color: var(--text-secondary);
}

.a6-page .a6_Footer_company {
  color: var(--text-tertiary);
}

.a6-page .a6_Footer_contacts {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px 28px;
}

.a6-page .a6_Footer_contact {
  color: var(--text-secondary);
  transition: color 0.3s var(--ease-snappy);
}

.a6-page .a6_Footer_contact:hover {
  color: var(--text-primary);
}

/* ---------- the wordmark ---------- */
/* The band clips the bottom of the word: the letters sit a few percent below the footer edge. */
.a6-page .a6_Footer_markBand {
  margin-top: 72px;
  overflow: hidden;
}



/* The pointer light: moves by transform and opacity only, clipped to the letters by the mask above. Hidden until the pointer
   comes (and for good on touch screens and with reduced motion, where it is never driven). */
.a6-page .a6_Footer_glow {
  position: absolute;
  top: 0;
  left: 0;
  width: 56%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(214 190 248 / 0.95), rgb(162 116 232 / 0.55) 38%, rgb(125 59 218 / 0.18) 68%, transparent);
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
}

@media (max-width: 1023px) {
  .a6-page .a6_Footer_top {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .a6-page .a6_Footer_columns {
    grid-template-columns: repeat(3, auto);
    justify-content: start;
    gap: 40px 48px;
  }

  .a6-page .a6_Footer_bottom {
    flex-direction: column;
    align-items: flex-start;
    margin-top: 64px;
  }

  .a6-page .a6_Footer_contacts {
    justify-content: flex-start;
  }
}

@media (max-width: 767px) {
  .a6-page .a6_Footer_footer {
    padding-top: 24px;
  }

  .a6-page .a6_Footer_top {
    gap: 40px;
  }

  .a6-page .a6_Footer_columns {
    grid-template-columns: 1fr 1fr;
    gap: 32px 24px;
  }

  .a6-page .a6_Footer_bottom {
    margin-top: 48px;
    padding-top: 24px;
  }

  .a6-page .a6_Footer_contacts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 24px;
    align-self: stretch;
  }

  .a6-page .a6_Footer_markBand {
    margin-top: 48px;
  }
}