/* Shared site footer.

   The markup is identical on every page, so its styling lives here rather
   than being repeated per stylesheet. Every page links this file last, and
   theme.css first.

   It used to define its own literal colours because not every page loaded a
   token file. Every page loads theme.css now, so a reskin reaches the footer
   like everything else.

   BREAKPOINTS (fixed across every site on this base — see theme.css):
     1024px / 768px / 480px. */

/* The page ends on the brand's deep ink. It used to end on #FAF9FF,
   a hair off the white section above it, so the footer read as more
   page rather than as the end of one. Dark closes it and balances the
   purple bar at the top; the glow keeps the slab from going flat. */
.site-footer {
  position: relative;
  overflow: hidden;
  background: var(--footer-bg);
  padding: var(--sp-14) var(--sp-12) 0;
  font-family: var(--font-body);
}
.site-footer::before {
  content: '';
  position: absolute;
  top: -180px;
  left: -120px;
  width: 620px;
  height: 620px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(91, 47, 224, .30), rgba(91, 47, 224, 0) 70%);
  pointer-events: none;
}
.site-footer::after {
  content: '';
  position: absolute;
  bottom: -260px;
  right: -160px;
  width: 560px;
  height: 560px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 77, 109, .16), rgba(255, 77, 109, 0) 70%);
  pointer-events: none;
}
.foot-top, .foot-bottom { position: relative; z-index: 1; }

.foot-top {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr 1.05fr;
  gap: 48px;
  padding-bottom: 48px;
}

/* --- brand column ------------------------------------------------- */
.foot-logo { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 18px; text-decoration: none; }
.foot-mark {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--brand-grad);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  flex: none;
}
.foot-mark i { width: 3px; height: 12px; border-radius: 1.5px; background: var(--on-brand); }
.foot-mark i:last-child { transform: translateY(3px); }
.foot-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  color: var(--on-brand);
}
.foot-brand p {
  color: rgba(255, 255, 255, .62);
  font-size: 13.5px;
  line-height: 1.75;
  max-width: 380px;
  margin: 0 0 12px;
}
/* --- social ------------------------------------------------------- */
.foot-social { display: flex; gap: 10px; margin-top: 20px; }
.foot-social a {
  text-decoration: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, .75);
  transition: color .2s ease, border-color .2s ease, transform .2s ease;
}
.foot-social svg { width: 16px; height: 16px; fill: currentColor; }
.foot-social a:hover {
  color: var(--on-brand);
  background: rgba(255, 255, 255, .12);
  border-color: var(--brand-bright);
  transform: translateY(-2px);
}

/* --- link columns ------------------------------------------------- */
.foot-col { display: flex; flex-direction: column; align-items: flex-start; }
.foot-col h2 {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  color: var(--on-brand);
  letter-spacing: .01em;
  margin: 0 0 18px;
}
.foot-col a {
  text-decoration: none;
  color: rgba(255, 255, 255, .62);
  font-size: 14px;
  line-height: 1.5;
  padding: 6px 0;
  transition: color .18s ease;
}
.foot-col a:hover { color: var(--on-brand); }

/* --- legal bar ---------------------------------------------------- */
/* Same surface as the columns above it, separated by a hairline rather
   than a change of colour — a second band in a different shade would read
   as something stapled to the bottom of the page. */
.foot-bottom {
  max-width: var(--container);
  margin: 0 auto;
  border-top: 1px solid rgba(255, 255, 255, .12);
  padding: 22px 0 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 13px;
  color: rgba(255, 255, 255, .5);
}
.foot-legal { display: flex; gap: 22px; flex-wrap: wrap; }
.foot-legal a { color: rgba(255, 255, 255, .5); text-decoration: none; transition: color .18s ease; }
.foot-legal a:hover { color: var(--on-brand); }

@media (max-width: 1024px) {
  .site-footer { padding: var(--sp-12) var(--sp-6) 0; }
  .foot-top { grid-template-columns: 1fr 1fr; gap: var(--sp-10) var(--sp-8); }
  .foot-brand { grid-column: 1 / -1; }
  .foot-brand p { max-width: none; }

  /* touch sizing. Height is the obvious half; width is the half that gets
     missed — a link reading "FAQ" is 27px wide until the column stretches it. */
  .foot-col { align-items: stretch; }
  .foot-col a { min-height: var(--tap-min); display: flex; align-items: center; padding: var(--sp-1) 0; }
  .foot-logo { min-height: var(--tap-min); }
  .foot-legal a { min-height: var(--tap-min); display: inline-flex; align-items: center; padding: 0 var(--sp-1); }
  .foot-social a { width: var(--tap-min); height: var(--tap-min); }
  .foot-social svg { width: 18px; height: 18px; }
}

@media (max-width: 768px) {
  .site-footer { padding: var(--sp-10) var(--sp-4) 0; }
  .foot-top { gap: var(--sp-8) var(--sp-6); padding-bottom: var(--sp-8); }
  .foot-bottom { justify-content: flex-start; gap: var(--sp-2) var(--sp-4); }
}

@media (max-width: 480px) {
  .foot-top { grid-template-columns: 1fr; gap: var(--sp-8); }
  .foot-legal { gap: var(--sp-4); }
}