/*
 * Общие стили десктопной и мобильной версий: цвета, шрифты и кривые
 * анимации (:root), сброс, служебные классы и ключевые кадры анимаций.
 *
 * Размеры — в пикселях макета: calc(N * var(--u)). --u и шаг плитки шума
 * (--noise-tile) задают css/desktop.css (фрейм 1920) и css/mobile.css
 * (фрейм 385), каждый для своей ширины окна.
 */

:root {
  --c-page: #000;
  --c-card: #212121;
  --c-card-module: #272727;
  --c-card-role: #171717;
  --c-card-slide: #151515;
  --c-card-cta: #111;
  --c-card-light: #404040;
  --c-card-channels: #0d0d0d;
  --c-text: #bababa;
  /*
   * Белая обводка 30% внутрь у мелкого текста (9–14px) почти целиком
   * закрывает тонкие штрихи букв, и в рендере Figma они светлее: ~#c9c9c9.
   * Обводку внутрь CSS не рисует, поэтому у такого текста сразу итоговый цвет.
   */
  --c-text-lit: #c9c9c9;
  --c-text-50: rgb(186 186 186 / 0.5);
  --c-text-33: rgb(186 186 186 / 0.33);
  --c-red: #b9351e;
  --c-red-hover: #c9432b;
  /* Фирменный фиолетовый — последний цвет фирменных градиентов */
  --c-violet: #5e439c;
  --c-field: #bababa;
  --c-field-border: #aaa;
  --c-field-text: #000;
  --c-link: #6aafef;
  --c-link-33: rgb(106 175 239 / 0.33);
  --c-link-channel: #738aae;
  --c-question: #4c6b99;
  --c-question-hover: #7394c4;
  --c-error: #e0654f;
  /* Телефон: обводка 0.45px внутрь закрывает около 40% штриха */
  --c-phone: #c2c2c2;
  --c-white: #fff;
  --c-white-55: rgb(255 255 255 / 0.55);
  --c-white-20: rgb(255 255 255 / 0.2);
  --c-white-12: rgb(255 255 255 / 0.12);
  --c-white-10: rgb(255 255 255 / 0.1);
  --c-white-8: rgb(255 255 255 / 0.08);
  --c-white-5: rgb(255 255 255 / 0.05);
  --c-white-4: rgb(255 255 255 / 0.04);
  --c-white-3: rgb(255 255 255 / 0.03);
  --c-white-2: rgb(255 255 255 / 0.02);
  --c-black: #000;
  --c-glass: rgb(0 0 0 / 0.1);
  --c-glass-dark: rgb(0 0 0 / 0.39);
  --c-overlay: rgb(0 0 0 / 0.6);
  --c-menu-overlay: rgb(0 0 0 / 0.58);
  --c-border: #2f2f2f;
  --c-divider: #2a2a2a;
  --c-tag-border: rgb(64 64 64 / 0.22);
  --c-progress: #161616;
  --c-shine: rgb(255 255 255 / 0.22);
  --c-load-track: #464646;
  --c-load-from: #b9d971;
  --c-load-to: #5da8bd;
  --c-load-label: #afafaf;

  /* Градиенты текста */
  --c-title-from: #bababa;
  --c-title-to: #545454;
  --c-green-from: #4c6b4a;
  --c-green-to: #94d191;
  --c-blue-from: #41597c;
  --c-blue-to: #8ba7cf;
  --c-red-from: #ac4a4c;
  --c-red-to: #f4bdbe;
  /*
   * Радиальные градиенты Figma: SVG на весь блок текста, растягивается
   * вместе с ним (preserveAspectRatio="none"), как и в макете.
   */
  --g-brand: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1' preserveAspectRatio='none'%3E%3CradialGradient id='g' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='1' gradientTransform='matrix(0.84309 3.48925 -0.76648 4.10902 -0.10153 -0.40942)'%3E%3Cstop offset='0' stop-color='%239b895a'/%3E%3Cstop offset='0.52' stop-color='%238e4d56'/%3E%3Cstop offset='0.89' stop-color='%235e439c'/%3E%3C/radialGradient%3E%3Crect width='1' height='1' fill='url(%23g)'/%3E%3C/svg%3E");
  --g-number: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1' preserveAspectRatio='none'%3E%3CradialGradient id='g' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='1' gradientTransform='matrix(1.25 -0.72728 1.05052 1.89404 0 1)'%3E%3Cstop offset='0' stop-color='%2347995e'/%3E%3Cstop offset='0.52' stop-color='%238e4d7e'/%3E%3Cstop offset='0.89' stop-color='%235e439c'/%3E%3C/radialGradient%3E%3Crect width='1' height='1' fill='url(%23g)'/%3E%3C/svg%3E");
  --g-channels: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1' preserveAspectRatio='none'%3E%3CradialGradient id='g' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='1' gradientTransform='matrix(1.4173 5.14447 -0.9805 6.28741 -0.75203 -2.44179)'%3E%3Cstop offset='0' stop-color='%239b895a'/%3E%3Cstop offset='0.52' stop-color='%238e4d56'/%3E%3Cstop offset='0.89' stop-color='%235e439c'/%3E%3C/radialGradient%3E%3Crect width='1' height='1' fill='url(%23g)'/%3E%3C/svg%3E");
  /* Мобильная версия: заголовок заявки в последнем блоке и тень на фото Павла */
  --g-brand-final: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1' preserveAspectRatio='none'%3E%3CradialGradient id='g' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='1' gradientTransform='matrix(1.26318 1.45082 -0.622 1.33731 -0.35761 -0.19613)'%3E%3Cstop offset='0' stop-color='%239b895a'/%3E%3Cstop offset='0.52' stop-color='%238e4d56'/%3E%3Cstop offset='0.89' stop-color='%235e439c'/%3E%3C/radialGradient%3E%3Crect width='1' height='1' fill='url(%23g)'/%3E%3C/svg%3E");
  --g-shade: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1' preserveAspectRatio='none'%3E%3CradialGradient id='g' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='1' gradientTransform='matrix(0.89587 -0.35237 0.35237 0.26153 0.21679 0.83415)'%3E%3Cstop offset='0'/%3E%3Cstop offset='1' stop-opacity='0'/%3E%3C/radialGradient%3E%3Crect width='1' height='1' fill='url(%23g)'/%3E%3C/svg%3E");

  /*
   * Отметка согласия в формах: кружок макета 8.9 × 8.9 с линией 0.89,
   * белый 22% — с галочкой (как в макете, отмечен заранее) и пустой; под
   * курсором ярче; красный, если отметку сняли и отправили заявку
   */
  --i-check-off: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8.889 8.889' fill='none'%3E%3Cpath d='M4.444.444C2.235.444.444 2.235.444 4.444s1.791 4 4 4 4-1.791 4-4-1.791-4-4-4Z' stroke='white' stroke-opacity='0.22' stroke-width='0.889' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --i-check-hover: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8.889 8.889' fill='none'%3E%3Cpath d='M4.444.444C2.235.444.444 2.235.444 4.444s1.791 4 4 4 4-1.791 4-4-1.791-4-4-4Z' stroke='white' stroke-opacity='0.6' stroke-width='0.889' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --i-check-on: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8.889 8.889' fill='none'%3E%3Cpath d='M5.841 3.548 3.944 5.444 3.298 4.798M4.444.444C2.235.444.444 2.235.444 4.444s1.791 4 4 4 4-1.791 4-4-1.791-4-4-4Z' stroke='white' stroke-opacity='0.22' stroke-width='0.889' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --i-check-on-hover: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8.889 8.889' fill='none'%3E%3Cpath d='M5.841 3.548 3.944 5.444 3.298 4.798M4.444.444C2.235.444.444 2.235.444 4.444s1.791 4 4 4 4-1.791 4-4-1.791-4-4-4Z' stroke='white' stroke-opacity='0.6' stroke-width='0.889' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --i-check-error: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8.889 8.889' fill='none'%3E%3Cpath d='M4.444.444C2.235.444.444 2.235.444 4.444s1.791 4 4 4 4-1.791 4-4-1.791-4-4-4Z' stroke='%23e0654f' stroke-opacity='1' stroke-width='0.889' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  /* Стрелка слайдера 16 × 14, линия 2px */
  --g-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 16' fill='none'%3E%3Cpath d='M10.33 15 17 8l-6.67-7M17 8H1' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  --f-wide: 'Halvar Breitschrift', 'Helvetica Neue', Arial, sans-serif;
  --f-text: 'Helvetica Neue Cyr', 'Helvetica Neue', Helvetica, FreeSans, Arial, sans-serif;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-soft: cubic-bezier(0.45, 0, 0.55, 1);
}

/* Сброс */

*,
*::before,
*::after {
  box-sizing: border-box;
}

/*
 * Над текстом — обычная стрелка, а не курсор выделения, но текст по-прежнему
 * выделяется. У ссылок и кнопок — рука, в поле телефона — курсор ввода.
 */
html {
  color-scheme: dark;
  background: var(--c-page);
  cursor: default;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/*
 * Выделенный текст — белый на фирменном фиолетовом. Цвет текста обязателен:
 * у градиентных заголовков свой цвет прозрачный, и без него выделенные
 * буквы пропали бы под заливкой выделения.
 */
::selection {
  background-color: var(--c-violet);
  color: var(--c-white);
}

/* Фон страницы: плитка шума, в макете 200 × 200 */
body {
  margin: 0;
  overflow-x: hidden;
  background: var(--c-page) url('../assets/desktop/bg-noise.webp') 0 0 / calc(var(--noise-tile) * var(--u)) repeat;
  color: var(--c-text);
  font-family: var(--f-text);
  font-weight: 400;
  font-kerning: normal;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
p,
ol,
ul {
  margin: 0;
  padding: 0;
  font: inherit;
}

ol,
ul {
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

a,
button,
input {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

b {
  font-weight: 700;
}

img,
svg {
  display: block;
  max-width: none;
}

button,
input {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
}

button {
  cursor: pointer;
}

[hidden] {
  display: none !important;
}

:focus-visible {
  outline: calc(2 * var(--u)) solid var(--c-link);
  outline-offset: calc(4 * var(--u));
}

.visually-hidden {
  position: absolute !important;
  width: calc(1 * var(--u));
  height: calc(1 * var(--u));
  margin: calc(-1 * var(--u));
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Спрайт с иконками и градиентами: без размеров, но не display: none — иначе градиенты не рисуются */
.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* Ссылка «к содержанию» видна только при переходе с клавиатуры */
.skip-link {
  position: fixed;
  top: calc(16 * var(--u));
  left: calc(16 * var(--u));
  z-index: 30;
  padding: calc(12 * var(--u)) calc(20 * var(--u));
  border-radius: calc(12 * var(--u));
  background: var(--c-card);
  font-size: calc(14 * var(--u));
  line-height: calc(18 * var(--u));
  translate: 0 calc(-200% - 16 * var(--u));
}

.skip-link:focus-visible {
  translate: none;
}

.is-loading body {
  overflow: hidden;
}

/*
 * Пока прокрутка выключена (загрузка, открытые меню или окно), место под
 * полосу прокрутки остаётся: иначе в Windows страница на это время
 * становилась бы шире на 15px и весь макет прыгал. Только там, где полоса
 * занимает место (has-scrollbar ставит скрипт в index.html): в браузере без
 * видимой полосы (так меряют PageSpeed и Lighthouse) пустое место под неё
 * сдвигало бы страницу после загрузки.
 */
.has-scrollbar.is-loading,
.has-scrollbar.is-dialog-open {
  scrollbar-gutter: stable;
}

.is-dialog-open body {
  overflow: hidden;
}

/* Слово с дефисом, которое нельзя переносить: «AI-менеджер» */
.nobr {
  white-space: nowrap;
}

@keyframes preloader-in {
  from {
    opacity: 0;
    scale: 0.96;
  }
}

@keyframes preloader-fade {
  from {
    opacity: 0;
  }
}

/* Блик кнопки */
/* Блик: 3 с проходит по кнопке, мягко проявляясь и угасая, 2 с пауза */
@keyframes button-shine {
  0% {
    opacity: 0;
    transform: translateX(-120%);
  }

  15% {
    opacity: 1;
  }

  45% {
    opacity: 1;
  }

  60%,
  100% {
    opacity: 0;
    transform: translateX(320%);
  }
}

/* Кольца мигают волной сверху вниз (своя прозрачность у кружков внутри) */
@keyframes hint-wave {
  0%,
  50%,
  100% { opacity: 1; }
  25% { opacity: 0.25; }
}

/* Мышь опускается на 3 единицы макета: 9% её высоты */
@keyframes hint-mouse {
  0%,
  100% { translate: 0 0; }
  50% { translate: 0 9%; }
}

@keyframes spot-drift {
  from { translate: 0 calc(-240 * var(--u)); }
  to { translate: 0 calc(240 * var(--u)); }
}

@keyframes spark-twinkle {
  0%,
  70%,
  100% {
    opacity: 1;
    scale: 1;
  }

  80% {
    opacity: 0.45;
    scale: 0.82;
  }
}

@keyframes sparkle-spin {
  0%,
  80%,
  100% { rotate: 0deg; }
  90% { rotate: 12deg; }
}

@media print {
  [data-reveal],
  [data-reveal] > *,
  .w,
  .c {
    opacity: 1 !important;
    translate: none !important;
    scale: none !important;
    rotate: none !important;
  }

  .c {
    visibility: visible !important;
  }

  .preloader,
  .menu,
  .popup {
    display: none !important;
  }
}