/* Слой поверх вёрстки дизайна: единая анимация, общая сетка отступов, адаптив.
   Подключается после <style> страницы, поэтому переопределяет её правила.
   Пересборка через unpack_design.py этот файл не трогает. */

.pg {
  --ease-in: cubic-bezier(.2, .7, .2, 1);  /* одна кривая на все появления */
  --dur-in: .9s;                           /* одна длительность */
  --shift-in: 28px;                        /* один сдвиг */
  --gap: clamp(40px, 5vw, 64px);           /* промежуток между колонками */
  --pad-sec: clamp(72px, 9vw, 120px);      /* вертикальный ритм секций */
  --pad-card: clamp(28px, 3.4vw, 40px);    /* внутренние поля карточек */
  --measure: 54ch;                         /* длина строки основного текста */
  --measure-sm: 42ch;                      /* длина строки подписей */
}

/* ─────────── одна анимация появления ─────────── */

/* Базовое движение: всё на странице появляется одинаково. */
@keyframes reveal {
  from { opacity: 0; translate: 0 var(--shift-in); }
  to   { opacity: 1; translate: 0 0; }
}

/* Появления по скроллу: один кадр, один диапазон, линейное время —
   прогресс следует за прокруткой, поэтому кривая здесь не нужна. */
@supports (animation-timeline: view()) {
  .r,
  .p-h2.r,
  .p-pc.r,
  .p-card.r,
  .p-trow,
  .p-marq,
  .p-count {
    animation-name: reveal;
    animation-timing-function: linear;
    animation-range: entry calc(var(--i, 0) * 5%) entry calc(42% + var(--i, 0) * 5%);
  }
  /* Счётчику нужен свой кадр — выравниваем только диапазон. */
  .p-count { animation-name: count; animation-timing-function: var(--ease-in); }
  /* Линия прогресса у шагов заполняется по той же логике. */
  .p-steps::after { animation-range: cover 12% cover 60%; }
}

/* Появления по времени: та же кривая. Первый экран и шапка не ждут анимаций —
   предложение и CTA видны сразу после отрисовки, слова заголовка всплывают быстро. */
.p-hero, .p-nav { animation: none; }
.p-done { animation: reveal var(--dur-in) var(--ease-in) both; }
.p-h1 .w > span { animation: reveal .6s var(--ease-in) both var(--d, 0s); }
.a-rise { animation: reveal .6s var(--ease-in) both; animation-delay: calc(var(--d, 0s) / 2); }
.p-h1 em .w > span { animation: reveal .6s var(--ease-in) both var(--d, 0s); }
.p-chip {
  animation: floatY 8s ease-in-out infinite,
             reveal var(--dur-in) var(--ease-in) both;
}
.p-chip--a { animation-delay: -2s, .3s; }
.p-chip--b { animation-delay: -4s, .45s; }

/* Фоновое движение: одна длительность на все парящие элементы. */
.p-chat { animation: floatY 8s ease-in-out infinite; }

/* ─────────── выравнивание ─────────── */

/* Плашки над заголовком больше нет — её отступ у h1 оставлять незачем. */
.p-hero__in .p-h1 { margin-top: 0; }

/* Один ритм секций вместо трёх разных значений. */
.p-sec  { padding: var(--pad-sec) 0; }
.p-hero { padding: var(--pad-sec) 0 calc(var(--pad-sec) + 24px); }
.p-foot { margin-top: var(--pad-sec); }

/* Один промежуток между колонками во всех сетках. */
.p-hero__in,
.p-cd,
.p-split,
.p-panel,
.p-quotes { gap: var(--gap); }
.p-foot__in { gap: 24px var(--gap); }

/* Одна длина строки: до этого было шесть разных max-width. */
.p-lead,
.p-card__p,
.p-step__p,
.p-done p,
.p-banner__s { max-width: var(--measure); }
.p-cap,
.p-note,
.p-bigcap { max-width: var(--measure-sm); }

/* Поля карточек и панелей от одной переменной. */
.p-card  { padding: var(--pad-card); }
.p-panel { padding: clamp(32px, 5vw, 72px); }
.p-banner { padding: clamp(64px, 8vw, 112px) clamp(24px, 4vw, 32px); }
.p-tc { padding: 20px var(--pad-card); }

/* Номер карточки прижат к тем же полям, что и её содержимое. */
.p-card__n { top: var(--pad-card); right: var(--pad-card); }

/* Вторая колонка карточек держится до планшета, а не ломается на 1100px. */
.p-cards { grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); }


/* ─────────── адаптив ─────────── */

/* Элементы сетки не распирают страницу: без этого схема-SVG в герое
   растягивает колонку до своих 540px и вся вёрстка уезжает за экран. */
.p-hero__in > *,
.p-cd > *,
.p-split > *,
.p-cards > *,
.p-proc > *,
.p-quotes > *,
.p-panel > * { min-width: 0; }

.p-route,
.p-route svg,
.p-chat,
.p-visual { max-width: 100%; }


@media (max-width: 700px) {
  /* Заголовки на узком экране: нижняя граница ниже, чем в дизайне. */
  .p-h1 { font-size: clamp(34px, 9vw, 92px); }
  .p-h2 { font-size: clamp(28px, 7vw, 64px); }
  .p-big { font-size: clamp(64px, 17vw, 168px); }
  .p-big--accent { font-size: clamp(48px, 13vw, 112px); }

  /* Клампы выше уже сжали отступы — здесь только то, что от них не зависит. */
  .p-card { padding: var(--pad-card); }
  .p-panel { padding: clamp(32px, 5vw, 72px); }
  .p-banner { padding: clamp(64px, 8vw, 112px) clamp(24px, 4vw, 32px); }
  .p-tc { padding: 16px 20px; }
}

@media (max-width: 420px) {
  .p-wrap { padding: 0 16px; }
  .p-nav .p-btn--sm { padding: 0 16px; }
  .p-cta-row .p-btn,
  .p-banner .p-btn { width: 100%; padding: 0 16px; gap: 8px; }
  .p-brand { font-size: 13px; gap: 8px; }
  .p-lead { font-size: 17px; }
}


/* ─────────── золотая кнопка: один компонент на все CTA ─────────── */

/* Ровный золотой фон и тёмная надпись во всех состояниях: контраст ≈10,6:1.
   Блик, переливание и пульсация сняты; при наведении меняется только тень. */
.p-btn {
  max-width: 100%;
  min-height: 52px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.p-btn--sm { min-height: 48px; padding: 0 20px; font-size: 16px; }
.p-btn--gold,
.p-btn--gold:hover,
.p-btn--gold:focus-visible,
.p-btn--gold:active,
.p-btn--gold:disabled { background: #D8BE8A; color: #0A0F1C; }
.p-btn--gold *,
.p-btn--gold svg { color: #0A0F1C; stroke: currentColor; }
.p-btn--gold::before,
.p-btn--gold::after { content: none; animation: none; }
.p-btn > * { pointer-events: none; }  /* нажатие ловит сама кнопка */
.p-btn--gold:hover { transform: translateY(-1px); box-shadow: 0 10px 28px -16px rgba(216, 190, 138, .7); }
.p-btn--gold:active { transform: none; box-shadow: none; }
.p-btn:focus-visible { outline: 3px solid #EEF0F6; outline-offset: 3px; }
.p-btn:disabled { cursor: progress; transform: none; box-shadow: none; }

.p-btn__idle,
.p-btn__busy { display: inline-flex; align-items: center; justify-content: center; gap: inherit; }
.p-btn__busy,
.p-btn[aria-busy="true"] .p-btn__idle { display: none; }
.p-btn[aria-busy="true"] .p-btn__busy { display: inline-flex; }
.p-spin {
  flex: none; width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent;
  animation: spin .8s linear infinite;
}

/* ─────────── переход к форме ─────────── */

/* Скролл ведёт lead.js — не дольше полсекунды, без анимации при reduced motion. */
html { scroll-behavior: auto; }
/* Прямой заход по якорю: начало формы под шапкой, а не под ней. */
#lead-form-section { scroll-margin-top: calc(72px + 16px - var(--pad-sec)); }
/* Форма видна сразу, без проявления по скроллу. */
#lead-form-section .p-panel { animation: none; }
#lead-form-section h2:focus { outline: none; }

/* Декор не перехватывает нажатия и не похож на элементы управления. */
.p-hero__grid, .p-glow, .p-stars, .p-aura, .p-orbit,
.p-banner__g1, .p-banner__g2, .p-visual, .p-visual * { pointer-events: none; }
.p-tilt { transform: none !important; }

/* ─────────── форма ─────────── */

.p-req { color: var(--accent); }
.p-flabel { right: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-opt { margin: 6px 0 -6px; font-size: 14px; color: var(--muted); }
.p-input--area { font: inherit; font-size: 16px; display: block; height: auto; min-height: 128px; padding: 28px 20px 12px; line-height: 1.5; resize: vertical; }
.p-err { font-size: 14px; }
.p-check { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; line-height: 1.5; color: var(--muted); cursor: pointer; }
.p-check input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: #D8BE8A; cursor: pointer; }
.p-check a,
.p-err a,
.p-done a,
.p-foot a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.p-check a:hover,
.p-done a:hover,
.p-foot a:hover { color: var(--accent); }

/* Незаполненные реквизиты видны сразу — с ними трафик не запускают. */
.p-todo { color: #FFB4A8; border: 1px dashed currentColor; border-radius: 4px; padding: 0 4px; }

/* ─────────── первый экран и читаемость ─────────── */

/* Предложение, пояснение и CTA помещаются в первый экран. */
.p-hero { padding: clamp(40px, 6vw, 88px) 0 clamp(56px, 7vw, 104px); }
.p-h1 { font-size: clamp(40px, 5.2vw, 76px); }
.p-hero__in .p-lead { margin-top: 24px; }
.p-cta-row { margin-top: 32px; }
.p-visual, .p-tilt { min-height: 380px; }

/* Меньше свечения за текстом и схемами; движущиеся блики сняты. */
.pg em { animation: none; background-image: none; color: var(--accent); -webkit-text-fill-color: currentColor; }
.p-h1 em .w > span { background-image: none; color: var(--accent); }
.p-aura { opacity: .14; }
.p-glow--a { background: color-mix(in srgb, var(--blue) 16%, transparent); }
.p-glow--b { background: color-mix(in srgb, var(--accent) 9%, transparent); }
.p-hero__spot, .p-hero__beam { display: none; }
.p-stars span, .p-orbit::after, .p-steps::after { box-shadow: none; }
.p-route .pt { filter: none; }
.p-panel::before { opacity: .45; animation: none; }
.p-banner__g1 { background: rgba(111, 140, 255, .18); }
.p-banner__g2 { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.p-card::after, .p-pc::after, .p-panel::after, .p-banner::after { content: none; }

/* Карточки — не кнопки: при наведении не подпрыгивают. */
.p-card:hover, .p-pc:hover, .p-quote:hover { transform: none; }
.p-step:hover { padding-left: 0; }
.p-card:hover .p-card__ic { transform: none; }

/* Подписи и юридический текст — не мельче 14 px. */
.p-note, .p-cap, .p-foot, .p-consent { font-size: 14px; }
.p-foot p + p { margin-top: 8px; }

@media (max-width: 700px) {
  .p-visual, .p-tilt { min-height: 320px; }
}

/* ─────────── производительность ─────────── */

/* Без постоянной перерисовки: эти анимации браузер не может отдать видеокарте
   (вращение через @property под размытием 80px, сдвиг фона, пунктир и кольца SVG),
   и страница перерисовывалась каждый кадр даже в покое. */
.p-aura, .p-hero__grid, .p-route .flow, .p-route .spin { animation: none; }
.p-route .pulse { display: none; }

/* Размытие подложки пересчитывалось на каждом кадре парения и прокрутки. */
.p-chat { backdrop-filter: none; -webkit-backdrop-filter: none; background: linear-gradient(170deg, #1A2337, #101828); }
.p-nav { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(7, 11, 20, .94); }

/* Декор за пределами экрана стоит на паузе — флаг ставит lead.js. */
[data-offscreen] :is(.p-glow, .p-stars span, .p-orbit, .p-chat, .p-chip, .p-marq__track,
                     .p-banner__g1, .p-banner__g2) { animation-play-state: paused; }

/* ─────────── телефоны и планшеты ─────────── */

/* Мобильной видеокарте не по силам постоянно анимировать крупные размытые слои,
   звёзды, орбиты и 3D-схему: кадры прокрутки пропадают. Декор остаётся на месте,
   но стоит; размытие заменено мягкими градиентами того же вида; блоки при
   прокрутке не проявляются, а сразу видны. Схему Valrixor на паузу ставит lead.js. */
@media (max-width: 700px), (hover: none) and (pointer: coarse) {
  .p-glow, .p-stars span, .p-orbit, .p-chat, .p-chip, .p-marq__track,
  .p-banner__g1, .p-banner__g2, .p-ok, .p-okic path, .p-bubble, .p-ibrow { animation: none !important; }
  .p-okic path { stroke-dashoffset: 0; }
  .p-stars { display: none; }  /* без мерцания звёзды горят ярко и ложатся точками на текст */

  .p-glow, .p-aura, .p-banner__g1, .p-banner__g2 { filter: none; }
  .p-glow--a { background: radial-gradient(closest-side, color-mix(in srgb, var(--blue) 16%, transparent), transparent); }
  .p-glow--b { background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 9%, transparent), transparent); }
  .p-aura { background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 60%, var(--blue)), transparent); }
  .p-banner__g1 { background: radial-gradient(closest-side, rgba(111, 140, 255, .18), transparent); }
  .p-banner__g2 { background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 14%, transparent), transparent); }

  .p-visual { perspective: none; }
  .p-tilt { transform-style: flat; }
  .p-orbit, .p-chat, .p-route, .p-chip { transform: none; }

  .r, .p-h2.r, .p-pc.r, .p-card.r, .p-trow, .p-marq, .p-rule, .p-steps::after { animation: none !important; }
}