/* Ваш HR - база: сброс, шрифт, типографика, контейнер. */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/Inter.woff2') format('woff2');
}

*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
ul[class], ol[class] { list-style: none; padding: 0; }
img, picture, svg { max-width: 100%; display: block; }
input, button, textarea, select { font: inherit; color: inherit; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--ink-900);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

h1, .h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); font-weight: var(--fw-bold); letter-spacing: var(--ls-tight); }
h2, .h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: var(--fw-semibold); letter-spacing: var(--ls-tight); }
h3, .h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: var(--fw-semibold); }

.display { font-size: var(--fs-display); line-height: var(--lh-display); font-weight: var(--fw-bold); letter-spacing: var(--ls-tight); }
.lead { font-size: var(--fs-lg); line-height: var(--lh-lg); color: var(--ink-700); }
.muted { color: var(--ink-500); }
.small { font-size: var(--fs-sm); line-height: var(--lh-sm); }
/* Надзаголовок с фирменной чертой.
   Черта - графическая отсылка к знаку: щупальце, которое тянется к содержимому.
   Она же единственный сквозной декоративный элемент сайта, поэтому всё
   остальное оформление остаётся дисциплинированным. */
.eyebrow {
  display: flex; align-items: center; gap: 12px;
  font-size: var(--fs-xs); font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: var(--ls-caps); color: var(--ink-500);
}
.eyebrow::before {
  content: ''; flex: 0 0 auto;
  width: 28px; height: 2px; background: var(--brand-red);
  transform-origin: left center;
}

/* внутри карточек черта не нужна: там надзаголовок - подпись, а не веха */
.card .eyebrow::before,
.mega .eyebrow::before { display: none; }
.card .eyebrow, .mega .eyebrow { gap: 0; }

a { color: var(--brand-red-ink); text-decoration: none; }
a:hover { text-decoration: underline; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: var(--section-y) 0; }
.section--muted { background: var(--bg-muted); }
.section--dark { background: var(--bg-dark); color: #fff; }

.grid { display: grid; gap: var(--gutter); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

/* Без left/top элемент оставался в статической позиции: honeypot-поле форм
   вылезало за правый край и давало горизонтальную прокрутку на телефоне. */
.visually-hidden {
  position: absolute; left: 0; top: 0;
  width: 1px; height: 1px; overflow: hidden;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

:focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--r-sm); }

@media (max-width: 900px) {
  .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Анимации (переработаны 30.09.2026 по просьбе заказчика)
   ========================================================================== */

/* Принципы: двигаем только transform и opacity - это не нагружает телефон;
   появление с задержкой, а не всё разом; всё выключается системной
   настройкой «уменьшить движение». Без JS содержимое видно сразу. */
:root {
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --reveal-shift: 32px;
}

/* ---------- Секции при прокрутке ---------- */
.js-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(var(--reveal-shift));
}
.js-reveal [data-reveal].is-visible {
  opacity: 1;
  transform: none;
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
}

/* Черта у надзаголовка прорастает к заголовку */
.js-reveal [data-reveal] .eyebrow::before { transform: scaleX(0); transform-origin: left; }
.js-reveal [data-reveal].is-visible .eyebrow::before {
  transform: scaleX(1);
  transition: transform .6s var(--ease-out) .15s;
}

/* Элементы сетки поднимаются друг за другом; задержку ставит скрипт */
.js-reveal [data-reveal].is-visible > * > .grid > *,
.js-reveal [data-reveal].is-visible > * > .steps > *,
.js-reveal [data-reveal].is-visible > * > .metrics > * {
  animation: wahhr-rise .6s var(--ease-out) backwards;
}
@keyframes wahhr-rise {
  from { opacity: 0; transform: translateY(24px) scale(.98); }
  to   { opacity: 1; transform: none; }
}

/* ---------- Первый экран при загрузке ---------- */
/* Текст, плашки и кнопки выезжают по очереди, форма - чуть позже */
.hero__grid > div > *,
.hero__grid > .lead-form,
.hero__grid > .hero__art {
  animation: wahhr-hero-in .8s var(--ease-out) backwards;
}
.hero__grid > div > :nth-child(2) { animation-delay: .08s; }
.hero__grid > div > :nth-child(3) { animation-delay: .16s; }
.hero__grid > div > :nth-child(4) { animation-delay: .24s; }
.hero__grid > div > :nth-child(5) { animation-delay: .32s; }
.hero__grid > div > :nth-child(6) { animation-delay: .40s; }
.hero__grid > .hero__art { animation-delay: .30s; }
.hero__grid > .lead-form { animation-delay: .25s; animation-name: wahhr-hero-form; }
.hero-strip { animation: wahhr-fade 1s ease .5s backwards; }
@keyframes wahhr-hero-in {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}
@keyframes wahhr-hero-form {
  from { opacity: 0; transform: translateY(28px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
@keyframes wahhr-fade { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Иллюстрации: лёгкое парение ---------- */
.compare-art img, .hero__art img, .banner__art img {
  animation: wahhr-float 6s ease-in-out infinite;
}
.banner__art img { animation-duration: 7s; animation-delay: -2s; }
@keyframes wahhr-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

/* ---------- Вопросы: плавное раскрытие ----------
   Браузеры без ::details-content раскрывают мгновенно, как раньше */
:root { interpolate-size: allow-keywords; }
.faq__item::details-content {
  block-size: 0; overflow: hidden;
  transition: block-size .35s var(--ease-out), content-visibility .35s allow-discrete;
}
.faq__item[open]::details-content { block-size: auto; }
.faq__q::after { transition: transform .25s var(--ease-out); }
.faq__item[open] .faq__q::after { transform: rotate(180deg); }

/* ---------- Уменьшить движение: всё выключено, содержимое видно ---------- */
@media (prefers-reduced-motion: reduce) {
  .js-reveal [data-reveal],
  .js-reveal [data-reveal].is-visible {
    opacity: 1; transform: none; transition: none;
  }
  .js-reveal [data-reveal] .eyebrow::before,
  .js-reveal [data-reveal].is-visible .eyebrow::before { transform: none; transition: none; }
  .js-reveal [data-reveal].is-visible > * > .grid > *,
  .js-reveal [data-reveal].is-visible > * > .steps > *,
  .js-reveal [data-reveal].is-visible > * > .metrics > *,
  .hero__grid > div > *, .hero__grid > .lead-form, .hero__grid > .hero__art, .hero-strip,
  .compare-art img, .hero__art img, .banner__art img { animation: none; }
  .faq__item::details-content { transition: none; }
}