/* ---------- Подвал ----------
   Та же система, что у тарифов и заявки: макет 1440px, --px — пиксель макета.

   Приём 1 — «занавес»: подвал стоит под страницей (sticky, bottom: 0),
   а страница уезжает вверх, как лист со скруглёнными углами. Пока подвал
   открывается, его содержимое выходит из размытия — тот же язык, что у шапки
   и панели возможностей.

   Приём 2 — «линза»: огромный вордмарк висит фиолетовой светящейся дымкой
   (размытие + plus-lighter, как свечение кнопок из Figma), а курсор работает
   как объектив — под ним буквы фокусируются в резкий градиент кнопок,
   вокруг — кольцо частичной резкости. Без курсора линза медленно гуляет сама. */

/* Страница — лист поверх подвала. */
/* Нижний край листа не обрезан, а растворяется: последние --sheet-fade
   пикселей уходят в прозрачность, и подвал проступает сквозь них. */
main {
  --sheet-fade: 180px;

  position: relative;
  z-index: 1;
  background: linear-gradient(180deg, #000 calc(100% - var(--sheet-fade)), transparent);
}

main > :last-child {
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - var(--sheet-fade)), transparent);
  mask-image: linear-gradient(180deg, #000 calc(100% - var(--sheet-fade)), transparent);
}

.site-footer {
  --px: calc(100cqw / 1440);
  --muted: rgba(244, 235, 255, .58);
  --line: rgba(244, 235, 255, .08);
  --ease: cubic-bezier(.16, 1, .3, 1);
  --reveal: 1;

  container-type: inline-size;
  position: sticky;
  z-index: 0;
  bottom: 0;
  overflow: hidden;
  background: #07060d;
}

.footer__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: calc(var(--px) * 120) calc(var(--px) * 20) calc(var(--px) * 20);
  opacity: calc(.25 + var(--reveal) * .75);
  transform: translate3d(0, calc((1 - var(--reveal)) * -18%), 0) scale(calc(.96 + var(--reveal) * .04));
  transform-origin: 50% 100%;
  will-change: transform, opacity, filter;
}

.footer__top {
  display: grid;
  grid-template-columns: calc(var(--px) * 480) 1fr;
  gap: calc(var(--px) * 40);
  padding: 0 calc(var(--px) * 20);
}

.footer__lead {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.footer__mark {
  width: calc(var(--px) * 32);
  height: calc(var(--px) * 40);
  margin-bottom: calc(var(--px) * 24);
}

.footer__title {
  margin: 0 0 calc(var(--px) * 32);
  color: #fff;
  font-size: calc(var(--px) * 36);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.04em;
}

/* Кнопка — как «Пробный доступ» в шапке; свечение берёт общее правило из styles.css. */
.footer__cta {
  position: relative;
  display: inline-flex;
  height: calc(var(--px) * 44);
  gap: calc(var(--px) * 8);
  align-items: center;
  padding: 0 calc(var(--px) * 16);
  border: calc(var(--px) * 2) solid rgba(108, 67, 255, .3);
  border-radius: calc(var(--px) * 8);
  color: var(--violet-deep);
  background: linear-gradient(180deg, var(--button-top), var(--button-bottom));
  box-shadow: 0 calc(var(--px) * 4) calc(var(--px) * 40) rgba(244, 235, 255, .3);
  font-size: calc(var(--px) * 16);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.02em;
  --glow-blur: calc(var(--px) * 40);
}

.footer__cta img { width: calc(var(--px) * 20); height: calc(var(--px) * 20); }

.footer__nav {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(var(--px) * 24);
}

.footer__col-title {
  margin: 0 0 calc(var(--px) * 20);
  color: var(--muted);
  font-size: calc(var(--px) * 14);
  font-weight: 400;
  line-height: 1;
}

.footer__col ul {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--px) * 12);
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer__link {
  display: inline-block;
  padding: 0;
  border: 0;
  color: var(--ink);
  background: none;
  font: inherit;
  font-size: calc(var(--px) * 16);
  line-height: 1.25;
  cursor: pointer;
  transition: filter 560ms var(--ease), opacity 560ms var(--ease);
}

/* Фирменное наведение: в фокусе одна ссылка, остальные уходят в размытие. */
@media (hover: hover) {
  .footer__nav:has(.footer__link:hover) .footer__link:not(:hover) {
    opacity: .5;
    filter: blur(4px);
  }
}

.footer__link:focus-visible,
.footer__totop:focus-visible {
  border-radius: calc(var(--px) * 4);
  outline: calc(var(--px) * 2) solid var(--button-bottom);
  outline-offset: calc(var(--px) * 4);
}

/* ---------- Вордмарк-линза ----------
   Четыре слоя одних и тех же букв:
   base — невидимый, задаёт размер и ширину (единственный в потоке);
   haze — фиолетовая дымка: заливка #6c43ff → #5943ff, сильное размытие,
          plus-lighter — светится, как неон сквозь туман;
   mid  — лёгкое размытие в широком кольце вокруг курсора — край резкости;
   lit  — резкие буквы градиентом кнопок в центре линзы.
   Курсор работает как объектив: под ним надпись «фокусируется». */

.footer__word {
  --x: 50%;
  --y: 50%;
  --r: calc(var(--px) * 240 * var(--lens, 1));
  --haze-blur: calc(var(--px) * 26);
  /* Запас под размытие у слоёв с маской: маска режет всё за границей
     элемента, поэтому слой шире надписи на --bleed с каждой стороны. */
  --bleed: calc(var(--haze-blur) * 3);
  /* Доля ширины, которую занимает надпись (footer.js), — остальное под свечение. */
  --fit: .97;

  position: relative;
  margin: calc(var(--px) * 64) 0 calc(var(--px) * 28);
  font-size: calc(var(--px) * 280);
  font-weight: 600;
  line-height: .9;
  letter-spacing: -.05em;
  white-space: nowrap;
  text-align: center;
  user-select: none;
}

.footer__word-row { display: block; }

.footer__word-row:not(.footer__word-base) {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Появление: буквы по очереди выходят из размытия и чуть поднимаются. */
.footer__word-row span {
  display: inline-block;
  opacity: var(--rise, 1);
  transform: translate3d(0, calc((1 - var(--rise, 1)) * 18%), 0);
}

/* Базовый слой невидим: он только задаёт размер и ширину надписи. */
.footer__word-base { visibility: hidden; }

.footer__word-haze {
  filter: blur(var(--haze-blur));
  mix-blend-mode: plus-lighter;
  animation: footer-breathe 6s ease-in-out infinite;
}

.footer__word-haze span {
  color: transparent;
  background: linear-gradient(180deg, #8b6bff, #5943ff 60%, #3a1f9e);
  -webkit-background-clip: text;
  background-clip: text;
}

@keyframes footer-breathe {
  50% { opacity: .7; }
}

/* Свет линзы: фиолетовое пятно, складывается с дымкой. */
.footer__beam {
  position: absolute;
  top: var(--y);
  left: var(--x);
  width: calc(var(--r) * 2.2);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(89, 67, 255, .5), rgba(89, 67, 255, .14) 55%, transparent);
  filter: blur(calc(var(--px) * 30));
  mix-blend-mode: plus-lighter;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* --lx/--ly — центр линзы в px от угла надписи (footer.js); без них — центр. */
.footer__word-row:is(.footer__word-mid, .footer__word-lit) {
  --cx: calc(var(--bleed) + var(--lx, calc(50% - var(--bleed))));
  --cy: calc(var(--bleed) + var(--ly, calc(50% - var(--bleed))));
  inset: calc(var(--bleed) * -1);
  padding: var(--bleed);
}

.footer__word-mid {
  filter: blur(calc(var(--px) * 7));
  mask-image: radial-gradient(circle calc(var(--r) * 1.9) at var(--cx) var(--cy), #000 25%, transparent 100%);
}

.footer__word-lit {
  mask-image: radial-gradient(circle var(--r) at var(--cx) var(--cy), #000 0, #000 30%, transparent 100%);
}

:is(.footer__word-mid, .footer__word-lit) span {
  color: transparent;
  background: linear-gradient(180deg, #fff, var(--button-top) 35%, var(--button-bottom) 70%, #8b6bff);
  -webkit-background-clip: text;
  background-clip: text;
}

.footer__word-mid span { opacity: calc(var(--rise, 1) * .8); }

.footer__bottom {
  display: flex;
  align-items: center;
  gap: calc(var(--px) * 32);
  padding: calc(var(--px) * 20) calc(var(--px) * 20) 0;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: calc(var(--px) * 14);
  line-height: 1;
}

.footer__bottom a { transition: color 360ms var(--ease); }
.footer__bottom a:hover { color: var(--ink); }

.footer__totop {
  display: inline-flex;
  margin-left: auto;
  gap: calc(var(--px) * 6);
  align-items: center;
  padding: 0;
  border: 0;
  color: var(--ink);
  background: none;
  font: inherit;
  cursor: pointer;
}

.footer__totop svg {
  width: calc(var(--px) * 14);
  height: calc(var(--px) * 14);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 560ms var(--ease);
}

.footer__totop:hover svg { transform: translateY(calc(var(--px) * -3)); }

@media (prefers-reduced-motion: reduce) {
  .footer__inner { opacity: 1; transform: none; filter: none !important; }
  .footer__word-row span { opacity: 1; transform: none; }
  .footer__word-haze { animation: none; }
}

/* Узкие экраны: макет не масштабируется, колонки встают друг под друга. */
@media (max-width: 900px) {
  .site-footer { --px: 1px; }
  .footer__inner { padding: 64px 16px 16px; }
  .footer__top { grid-template-columns: 1fr; gap: 40px; padding: 0; }
  .footer__title { font-size: 28px; }
  .footer__nav { grid-template-columns: repeat(2, 1fr); row-gap: 32px; }
  .footer__word { --r: calc(120px * var(--lens, 1)); --haze-blur: 14px; margin-top: 36px; }
  .footer__bottom { flex-wrap: wrap; gap: 12px 20px; padding: 16px 0 0; }
}