/* =========================================================
   1. БАЗОВЫЕ НАСТРОЙКИ
========================================================= */

:root {
    --color-dark: #002633;
    --color-dark-light: #003847;
    --color-orange: #ff6a00;
    --color-white: #ffffff;
  
    --text-light: #dbecef;
    --text-muted: #7697a2;
  
    --site-width: 1400px;
    --site-padding: 40px;
  }
  
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  
  html {
    scroll-behavior: smooth;
  }
  
  body {
    margin: 0;
    min-width: 320px;
  
    background: var(--color-dark);
    color: var(--text-light);
  
    font-family: "Barlow", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;
  }
  
  body,
  button,
  input,
  textarea,
  select {
    font-family: "Barlow", Arial, sans-serif;
  }
  
  img,
  video,
  svg {
    display: block;
    max-width: 100%;
  }
  
  a {
    color: inherit;
    text-decoration: none;
  }
  
  button,
  input,
  textarea,
  select {
    font: inherit;
  }
  
  button,
  a {
    -webkit-tap-highlight-color: transparent;
  }
  
  ul,
  ol {
    margin: 0;
    padding: 0;
  }
  
  h1,
  h2,
  h3,
  p {
    margin-top: 0;
  }
  
  
  /* =========================================================
     2. ОБЩИЙ КОНТЕЙНЕР
  ========================================================= */
  
  .header__container,
  .hero__container,
  .how-it-works__container {
    width: min(
      var(--site-width),
      calc(100% - var(--site-padding))
    );
  
    margin-inline: auto;
  }
  
  
  /* =========================================================
     3. ШАПКА
  ========================================================= */
  
  .header {
    position: sticky;
    top: 0;
    z-index: 1000;
  
    background: rgba(0, 38, 51, 0.96);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
  
  .header__container {
    min-height: 88px;
  
    display: flex;
    align-items: center;
    justify-content: space-between;
  
    gap: 30px;
  }
  
  .logo {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
  }
  
  .logo lottie-player {
    display: block;
  }
  
  .header__right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
  
    gap: 26px;
  }
  
  
  /* =========================================================
     4. НАВИГАЦИЯ
  ========================================================= */
  
  .nav {
    flex: 0 1 auto;
  }
  
  .nav__list {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
  
    gap: 4px;
  
    list-style: none;
  }
  
  .nav__item {
    margin: 0;
  }
  
  .nav__link {
    min-height: 44px;
  
    display: inline-flex;
    align-items: center;
    justify-content: center;
  
    padding: 0 13px;
  
    color: var(--text-muted);
  
    font-family: "Oswald", Arial, sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.4px;
  
    border-radius: 7px;
  
    transition:
      color 0.2s ease,
      background-color 0.2s ease;
  }
  
  .nav__link:hover,
  .nav__link:focus-visible {
    color: var(--color-white);
    background: var(--color-orange);
  }
  
  
  /* =========================================================
     5. ОБЩИЙ ВИД КНОПОК HERO
     Эти кнопки используются и в шапке
  ========================================================= */
  
  .hero__btn {
    min-height: 50px;
  
    display: inline-flex;
    align-items: center;
    justify-content: center;
  
    padding: 13px 24px;
  
    border: 1px solid transparent;
    border-radius: 7px;
  
    font-size: 16px;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
  
    cursor: pointer;
  
    transition:
      transform 0.2s ease,
      background-color 0.2s ease,
      border-color 0.2s ease,
      color 0.2s ease,
      box-shadow 0.2s ease;
  }
  
  .hero__btn:hover {
    transform: translateY(-2px);
  }
  
  .hero__btn:focus-visible {
    outline: 3px solid rgba(255, 106, 0, 0.35);
    outline-offset: 3px;
  }
  
  .hero__btn--primary {
    color: var(--color-white);
    background: var(--color-orange);
  
    box-shadow: 0 12px 28px rgba(255, 106, 0, 0.22);
  }
  
  .hero__btn--primary:hover {
    background: #ff7a1a;
    box-shadow: 0 15px 32px rgba(255, 106, 0, 0.3);
  }
  
  .header__right > .hero__btn {
    min-height: 46px;
    max-width: 310px;
  
    padding: 10px 17px;
  
    font-size: 14px;
    line-height: 1.25;
  }

  /* Кнопка «Включить Автопилот» только в шапке */
.header__right > .hero__btn--primary {
  min-width: 210px;
  min-height: 50px;
  padding: 7px 20px;

  flex-direction: column;

  color: var(--color-white);
  background: transparent;
  border-color: var(--color-orange);
  box-shadow: none;
}

.header__right > .hero__btn--primary strong {
  color: var(--color-white);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.15;
}

.header__right > .hero__btn--primary span {
  margin-top: 3px;

  color: #ff8a3d;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.15;
}

.header__right > .hero__btn--primary:hover {
  color: var(--color-white);
  background: var(--color-orange);
  border-color: var(--color-orange);
  box-shadow: 0 12px 28px rgba(255, 106, 0, 0.22);
}

.header__right > .hero__btn--primary:hover strong,
.header__right > .hero__btn--primary:hover span {
  color: var(--color-white);
}

/* Кнопка «Войти» в шапке */
.header__right > .hero__btn--login {
  box-sizing: border-box;
  height: 50px;
  min-height: 50px;
  padding-top: 0;
  padding-bottom: 0;
}
  
  
  /* =========================================================
     6. АДАПТИВ ШАПКИ
  ========================================================= */
  
  @media (max-width: 1200px) {
    :root {
      --site-padding: 32px;
    }
  
    .header__container {
      min-height: 80px;
    }
  
    .header__right {
      gap: 16px;
    }
  
    .nav__link {
      padding-inline: 9px;
      font-size: 15px;
    }
  
    .header__right > .hero__btn {
      max-width: 250px;
      font-size: 13px;
    }
  }
  
  @media (max-width: 980px) {
    .header__container {
      padding-block: 12px;
    }
  
    .nav {
      display: none;
    }
  
    .header__right {
      margin-left: auto;
    }
  }
  
  @media (max-width: 640px) {
    :root {
      --site-padding: 28px;
    }
  
    .header__container {
      min-height: 72px;
      gap: 12px;
    }
  
    .logo lottie-player {
      width: 165px !important;
      height: 54px !important;
    }
  
    .header__right > .hero__btn {
      min-height: 42px;
      max-width: 170px;
  
      padding: 8px 11px;
  
      font-size: 11px;
    }
  }
  
  @media (max-width: 440px) {
    .logo lottie-player {
      width: 135px !important;
      height: 48px !important;
    }
  
    .header__right > .hero__btn {
      max-width: 150px;
      font-size: 10px;
    }
  }

  /* =========================================================
   6.1. ПЕРЕХОД В ЛИЧНЫЙ КАБИНЕТ
========================================================= */
.hero__btn--login {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  height: 57px;
  padding: 12px 24px;

  color: #ffffff;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: 7px;

  font-size: 16px;
  font-weight: 600;
  line-height: 1;

  text-decoration: none;
  white-space: nowrap;

  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease;
}

.hero__btn--login:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.12);
  border-color: #ffffff;
  transform: translateY(-1px);
}

  /* =========================================================
   7. ПЕРВЫЙ ЭКРАН — HERO
========================================================= */

.main {
    width: 100%;
  }
  
  .hero {
    position: relative;
    overflow: hidden;
  
    padding: 72px 0 82px;
  
    background:
      radial-gradient(
        circle at 78% 18%,
        rgba(0, 136, 164, 0.18),
        transparent 33%
      ),
      radial-gradient(
        circle at 20% 80%,
        rgba(255, 106, 0, 0.08),
        transparent 30%
      ),
      var(--color-dark);
  }
  
  .hero::before {
    content: "";
  
    position: absolute;
    inset: 0;
  
    pointer-events: none;
  
    background-image:
      linear-gradient(
        rgba(255, 255, 255, 0.018) 1px,
        transparent 1px
      ),
      linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.018) 1px,
        transparent 1px
      );
  
    background-size: 42px 42px;
    mask-image: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.45),
      transparent 90%
    );
  }
  
  .hero__container {
    position: relative;
    z-index: 1;
  
    display: grid;
    grid-template-columns:
      minmax(0, 1.14fr)
      minmax(420px, 0.86fr);
  
    align-items: center;
    gap: 58px;
  }
  
  .hero__content {
    width: 100%;
    max-width: 790px;
    
  }
  
  .hero__visual {
    min-width: 0;
  
    display: flex;
    justify-content: flex-end;
  }
  
  
  /* =========================================================
     8. HERO — МАЛЕНЬКИЙ ТЕКСТ НАД ЗАГОЛОВКОМ
  ========================================================= */
  
  .hero__kicker-wrap {
    height: 24px;
  
    display: inline-flex;
    align-items: center;
  
    gap: 12px;
    margin-bottom: 20px;
  
    overflow: hidden;
  }
  
  .hero__kicker-line {
    width: 3px;
    height: 19px;
  
    flex: 0 0 3px;
  
    border-radius: 999px;
    background: var(--color-orange);
  }
  
  .hero__kicker-text {
    color: #cfe2e7;
  
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.9px;
    text-transform: uppercase;
    white-space: nowrap;
  
    opacity: 0;
    transform: translateX(-18px);
  
    animation: heroKickerReveal 7.5s ease-in-out infinite;
  }
  
  @keyframes heroKickerReveal {
    0% {
      opacity: 0;
      transform: translateX(-18px);
    }
  
    20%,
    67% {
      opacity: 1;
      transform: translateX(0);
    }
  
    91%,
    100% {
      opacity: 0;
      transform: translateX(-18px);
    }
  }
  
  
  /* =========================================================
     9. HERO — ЗАГОЛОВОК И ТЕКСТ
  ========================================================= */
  
  .hero__title {
    margin: 0 0 24px;
    color: #8fd4e2;
    
  
    font-family: "Oswald", Arial, sans-serif;
    font-size: clamp(58px, 4.35vw, 57px);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: 0.02em;
  }
  
  .hero__subtitle {
    max-width: 680px;
  
    margin: 0 0 19px;
  
    color: #bfd4da;
  
    font-size: 16px;
    font-weight: 400;
    line-height: 1.55;
  }

  .hero__subtitle--accent {
    color: #ffffff;
    font-weight: 700;
    letter-spacing: 0.4px;
  }
  
  
  /* =========================================================
     10. HERO — КНОПКИ
  ========================================================= */
  
  .hero__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
  
    gap: 14px;
    margin-bottom: 30px;
    margin-top: 36px;
  }
  
  .hero__actions .hero__btn {
    min-width: 190px;
  }
  
  .hero__btn--ghost {
    color: var(--color-white);
  
    background: rgba(255, 255, 255, 0.025);
    border-color: rgba(255, 255, 255, 0.25);
  
    box-shadow: none;
  }
  
  .hero__btn--ghost:hover {
    color: var(--color-white);
  
    background: rgba(255, 255, 255, 0.09);
    border-color: rgba(255, 255, 255, 0.48);
  
    box-shadow: none;
  }
  
  
/* =========================================================
   11. HERO — СПИСОК ПРЕИМУЩЕСТВ
   3 колонки × 2 строки
========================================================= */

.hero__points {
  display: grid;

  /*
   * Первые две колонки занимают только необходимое место.
   * Третья получает всё оставшееся пространство.
   */
  grid-template-columns: max-content max-content 1fr;

  width: 100%;
  max-width: none;

  margin: 28px 0 0;
  padding: 0;

  column-gap: 20px;
  row-gap: 12px;

  align-items: start;
  list-style: none;
  box-sizing: border-box;
}

.hero__points li {
  position: relative;

  width: max-content;
  min-width: 0;
  margin: 0;
  padding-left: 19px;

  color: #d5e6ea;
  font-size: 15px;
  line-height: 1.45;
  white-space: nowrap;

  box-sizing: border-box;
}

/* Третья колонка заканчивается у правого края кнопки */
.hero__points li:nth-child(3),
.hero__points li:nth-child(6) {
  justify-self: end;
}

.hero__points li::before {
  content: "";

  position: absolute;
  top: 0.58em;
  left: 0;

  width: 7px;
  height: 7px;

  border-radius: 50%;
  background: var(--color-orange);
  box-shadow: 0 0 0 4px rgba(255, 106, 0, 0.1);
}

/* Планшеты и узкие экраны */
@media (max-width: 900px) {
  .hero__points {
    grid-template-columns: 1fr 1fr;
    column-gap: 24px;
  }

  .hero__points li,
  .hero__points li:nth-child(3),
  .hero__points li:nth-child(6) {
    width: auto;
    justify-self: start;
    white-space: normal;
  }
}

/* Телефоны */
@media (max-width: 560px) {
  .hero__points {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}
  
  /* =========================================================
   12. HERO — ПРАВАЯ ЛЕНТА ПУБЛИКАЦИЙ
========================================================= */

.hero-feed {
  width: 100%;
  max-width: 560px;
  padding: 20px;

  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 22px;

  background: rgba(5, 27, 34, 0.8);

  box-shadow:
    0 28px 65px rgba(0, 0, 0, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.035);

  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  box-sizing: border-box;
}

/* Верхняя часть: цена, пояснение и статус */
.hero-feed__top {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 14px;
  margin-bottom: 16px;
}

.hero-feed__offer {
  min-width: 0;
}

/* Цена */
.hero-feed__price {
  margin-bottom: 6px;

  color: #8fd4e2;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.6px;
}

/* Текст под ценой */
.hero-feed__tagline {
  max-width: 300px;

  color: #cde0e6;
  font-size: 14px;
  line-height: 1.45;
  letter-spacing: 0.5px;
}

/* Индикатор работы Автопилота */
.hero-feed__status {
  min-height: 34px;

  display: inline-flex;
  align-items: center;
  gap: 8px;

  padding: 7px 12px;
  flex: 0 0 auto;

  border: 1px solid rgba(255, 106, 0, 0.18);
  border-radius: 999px;

  background: rgba(255, 106, 0, 0.1);
  color: #ffb27c;

  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.3px;
  white-space: nowrap;
}

.hero-feed__status-dot {
  width: 8px;
  height: 8px;
  flex: 0 0 8px;

  border-radius: 50%;
  background: var(--color-orange);

  animation: autopilotPulse 1.8s infinite;
}

@keyframes autopilotPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 106, 0, 0.55);
  }

  70% {
    box-shadow: 0 0 0 8px rgba(255, 106, 0, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(255, 106, 0, 0);
  }
}

/* Видимая область движущейся ленты */
.hero-feed__viewport {
  position: relative;

  height: 406px;
  overflow: hidden;

  border-radius: 14px;
}

/* Лента карточек */
.hero-feed__track {
  display: flex;
  flex-direction: column;
  gap: 14px;

  will-change: transform;
}

/* Обычная карточка публикации */
.hero-post {
  position: relative;
  overflow: hidden;

  width: calc(100% - 12px);
  min-height: 126px;
  margin-left: 6px;
  padding: 17px 18px 16px;

  flex: 0 0 auto;
  box-sizing: border-box;

  border: 1px solid rgba(255, 255, 255, 0.065);
  border-radius: 13px;

  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.055),
      rgba(255, 255, 255, 0.025)
    );

  opacity: 0.72;

  transition:
    transform 0.55s ease,
    opacity 0.55s ease,
    background 0.55s ease,
    border-color 0.55s ease,
    box-shadow 0.55s ease;
}

/* Средняя активная карточка */
.hero-post:nth-child(2) {
  z-index: 2;

  opacity: 1;
  transform: translateX(-6px) scale(1.012);

  border-color: rgba(255, 106, 0, 0.46);

  background:
    linear-gradient(
      135deg,
      rgba(26, 86, 99, 0.96),
      rgba(12, 49, 59, 0.96)
    );

  box-shadow:
    -8px 0 22px rgba(255, 106, 0, 0.11),
    0 14px 30px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

/* Оранжевая полоска активной карточки */
.hero-post:nth-child(2)::before {
  content: "";

  position: absolute;
  top: 19%;
  bottom: 19%;
  left: 0;

  width: 3px;
  border-radius: 0 4px 4px 0;

  background: var(--color-orange);
  box-shadow: 0 0 14px rgba(255, 106, 0, 0.5);
}

/* Дата и время публикации */
.hero-post__meta {
  margin-bottom: 8px;

  color: #8eb3bc;
  font-size: 13px;
  line-height: 1.3;
  letter-spacing: 0.35px;

  transition:
    color 0.55s ease,
    opacity 0.55s ease;
}

/* Заголовок публикации */
.hero-post__title {
  margin-bottom: 7px;

  color: var(--color-white);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.3;

  transition:
    color 0.55s ease,
    opacity 0.55s ease;
}

/* Описание публикации */
.hero-post__text {
  color: #cde0e6;
  font-size: 15px;
  line-height: 1.5;

  transition:
    color 0.55s ease,
    opacity 0.55s ease;
}

/* Текст активной карточки */
.hero-post:nth-child(2) .hero-post__meta {
  color: #a8dbe4;
}

.hero-post:nth-child(2) .hero-post__title {
  color: #ffffff;
}

.hero-post:nth-child(2) .hero-post__text {
  color: #e2f0f3;
}
  
  
  /* =========================================================
     13. АДАПТИВ ПЕРВОГО ЭКРАНА
  ========================================================= */
  
  @media (min-width: 1101px) {
    .hero__title {
      white-space: nowrap;
    }
  }
  
  @media (max-width: 1200px) {
    .hero {
      padding: 62px 0 72px;
    }
  
    .hero__container {
      grid-template-columns:
        minmax(0, 1fr)
        minmax(390px, 0.8fr);
  
      gap: 40px;
    }
  
    .hero__title {
      font-size: clamp(43px, 4.4vw, 58px);
    }
  
    .hero__subtitle {
      font-size: 19px;
    }
  
    .hero__points {
      grid-template-columns: 1fr;
    }
  }
  
  @media (max-width: 1100px) {
    .hero__container {
      grid-template-columns: 1fr;
      gap: 42px;
    }
  
    .hero__content {
      max-width: 850px;
    }
  
    .hero__visual {
      justify-content: flex-start;
    }
  
    .hero-feed {
      max-width: 680px;
    }
  }
  
  @media (max-width: 768px) {
    .hero {
      padding: 44px 0 56px;
    }
  
    .hero__title {
      margin-bottom: 20px;
  
      font-size: clamp(40px, 10vw, 52px);
      line-height: 1.1;
    }
  
    .hero__subtitle {
      margin-bottom: 26px;
  
      font-size: 18px;
      line-height: 1.5;
    }
  
    .hero__actions {
      flex-direction: column;
      align-items: stretch;
    }
  
    .hero__actions .hero__btn {
      width: 100%;
      min-width: 0;
    }
  
    .hero__points {
      gap: 10px;
    }
  
    .hero-feed {
      padding: 16px;
      border-radius: 18px;
    }
  
    .hero-feed__top {
      flex-direction: column;
      align-items: flex-start;
    }
  
    .hero-feed__viewport {
      height: 392px;
    }
  
    .hero-post {
      min-height: 120px;
      padding: 15px;
    }
  
    .hero-post__title {
      font-size: 17px;
    }
  
    .hero-post__text {
      font-size: 14px;
    }
  }
  
  @media (max-width: 480px) {
    .hero {
      padding-top: 36px;
    }
  
    .hero__kicker-text {
      font-size: 12px;
    }
  
    .hero__title {
      font-size: 39px;
    }
  
    .hero__subtitle {
      font-size: 17px;
    }
  
    .hero-feed__label {
      font-size: 15px;
    }
  
    .hero-feed__viewport {
      height: 382px;
    }
  }
  
  
  /* =========================================================
     14. ОТКЛЮЧЕНИЕ АНИМАЦИЙ ПРИ СИСТЕМНОЙ НАСТРОЙКЕ
  ========================================================= */
  
  @media (prefers-reduced-motion: reduce) {
    html {
      scroll-behavior: auto;
    }
  
    .hero__kicker-text,
    .hero-feed__status-dot {
      animation: none;
    }
  
    .hero__kicker-text {
      opacity: 1;
      transform: none;
    }
  }

/* =========================================================
   ЧЕТЫРЕ ШАГА ДО ПЕРВОЙ ПУБЛИКАЦИИ
   Полный CSS-блок — предыдущие стили секции удалить
========================================================= */

.how-it-works,
.how-it-works * {
  box-sizing: border-box;
}

/* =========================================================
   ОСНОВНАЯ СЕКЦИЯ
========================================================= */

.how-it-works {
  position: relative;
  min-height: calc(100svh - 130px);
  padding: 48px 22px 38px;
  display: flex;
  align-items: flex-start;
  overflow: hidden;
  background:
    radial-gradient(
      circle at 8% 16%,
      rgba(74, 192, 220, 0.08),
      transparent 32%
    ),
    radial-gradient(
      circle at 94% 10%,
      rgba(255, 112, 18, 0.07),
      transparent 30%
    ),
    linear-gradient(
      180deg,
      #f4f7f8 0%,
      #edf3f5 100%
    );
}

.how-it-works__container {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1580px;
  margin: 0 auto;
}

/* =========================================================
   ЗАГОЛОВОК ЭКРАНА
========================================================= */

.how-it-works__heading {
  margin-bottom: 24px;
  text-align: center;
}

.how-it-works__microcopy {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  margin-bottom: 8px;
  padding-left: 15px;
  color: #ff6500;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

.how-it-works__microcopy::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 3px;
  border-radius: 999px;
  background: #ff6500;
}

.how-it-works__title {
  max-width: 1100px;
  margin: 0 auto;
  color: #063742;
  font-family:
    var(--font-heading, "Roboto Condensed"),
    Arial,
    sans-serif;
  font-size: clamp(40px, 2.55vw, 50px);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -1.2px;
  text-wrap: balance;
}

/* =========================================================
   ОБЩАЯ ПАНЕЛЬ
========================================================= */

.workflow-card {
  position: relative;
  width: 100%;
  padding: 22px;
  border: 1px solid rgba(17, 70, 84, 0.14);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.84);
  box-shadow:
    0 22px 54px rgba(23, 64, 76, 0.11),
    inset 0 1px 0 rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/*
   Внутреннюю надпись
   «Как начать работу с Автопилотом»
   скрываем, поскольку она повторяет верхний кикер.
*/

.workflow-card__label {
  display: none;
}

/*
   Обёртка больше не занимает отдельную строку.
   Статус располагается на верхней границе панели.
*/

.workflow-card__top {
  position: absolute;
  top: 0;
  right: 30px;
  z-index: 5;
  min-height: 0;
  margin: 0;
  padding: 0;
  display: block;
  transform: translateY(-50%);
}

.workflow-card__status {
  min-height: 34px;
  padding: 7px 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 1px solid rgba(255, 106, 0, 0.32);
  border-radius: 999px;
  color: #d95700;
  background: rgba(255, 248, 243, 0.98);
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  box-shadow:
    0 7px 18px rgba(255, 106, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.workflow-card__status-dot {
  width: 9px;
  height: 9px;
  flex: 0 0 9px;
  border-radius: 50%;
  background: #ff6a00;
  box-shadow:
    0 0 0 4px rgba(255, 106, 0, 0.12),
    0 0 12px rgba(255, 106, 0, 0.3);
}

/* =========================================================
   СЕТКА ШАГОВ
========================================================= */

.workflow-list {
  display: grid;
  gap: 18px;
}

.workflow-list__bottom {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

/* =========================================================
   ОБЩИЙ ВИД КАРТОЧКИ ШАГА
========================================================= */

.workflow-item {
  position: relative;
  min-width: 0;
  padding: 22px;
  border: 1px solid rgba(24, 72, 85, 0.13);
  border-radius: 17px;
  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.97),
      rgba(245, 249, 250, 0.92)
    );
  box-shadow:
    0 10px 26px rgba(25, 68, 80, 0.065),
    inset 0 1px 0 rgba(255, 255, 255, 0.98);
}

/* Три нижние карточки */

.workflow-list__bottom .workflow-item {
  min-height: 230px;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  column-gap: 17px;
  align-content: start;
}

/* =========================================================
   НОМЕР ШАГА
========================================================= */

.workflow-item__number {
  position: absolute;
  top: 17px;
  right: 17px;
  color: rgba(35, 83, 98, 0.46);
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.9px;
}

/* =========================================================
   ИКОНКА
========================================================= */

.workflow-item__icon {
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 54px;
  border-radius: 14px;
  background: #e8f1f4;
  font-size: 26px;
  line-height: 1;
}

/* =========================================================
   ТЕКСТЫ КАРТОЧЕК
========================================================= */

.workflow-item__body {
  min-width: 0;
}

.workflow-item__title {
  margin: 0;
  padding-right: 30px;
  color: #073641;
  font-size: 19px;
  font-weight: 800;
  line-height: 1.25;
}

.workflow-item__text {
  margin: 8px 0 0;
  color: #456b77;
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.48;
}

.workflow-subtext {
  position: relative;
  margin: 10px 0 0;
  padding-left: 15px;
  color: #4d707b;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.46;
}

.workflow-subtext::before {
  content: "";
  position: absolute;
  top: 0.65em;
  left: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #ff6a00;
}

/* =========================================================
   ПЕРВЫЙ, ПОДРОБНЫЙ ШАГ
========================================================= */

.workflow-item--main {
  padding: 22px;
}

.workflow-item--main .workflow-item__head {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  align-items: center;
  gap: 17px;
}

.workflow-item--main .workflow-item__intro {
  min-width: 0;
}

.workflow-item--main .workflow-item__title {
  font-size: 20px;
}

.workflow-item--main .workflow-item__text {
  font-size: 14.5px;
}

/* Три пояснения внутри первого шага */

.workflow-start-options {
  margin-top: 17px;
  padding-left: 71px;
  display: grid;
  grid-template-columns: 1.05fr 0.82fr 1.45fr;
  gap: 13px;
}

.workflow-start-item {
  min-width: 0;
  padding: 15px 16px;
  border: 1px solid rgba(26, 76, 90, 0.12);
  border-radius: 12px;
  color: #4e707a;
  background: rgba(233, 242, 245, 0.84);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.46;
}

.workflow-start-item strong {
  color: #123e49;
  font-weight: 800;
}

.workflow-accent {
  color: #ff6500;
  font-weight: 800;
}

/* =========================================================
   ПОСЛЕДНИЙ ШАГ
========================================================= */

.workflow-item--accent {
  border-color: rgba(255, 106, 0, 0.38);
  background:
    linear-gradient(
      145deg,
      rgba(255, 250, 247, 0.99),
      rgba(255, 241, 231, 0.91)
    );
  box-shadow:
    0 10px 28px rgba(255, 106, 0, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.98);
}

.workflow-item--accent .workflow-item__icon {
  background: rgba(255, 106, 0, 0.12);
}

.workflow-item--accent .workflow-item__number {
  color: rgba(224, 84, 0, 0.6);
}

/* =========================================================
   СТРЕЛКИ МЕЖДУ НИЖНИМИ ШАГАМИ
========================================================= */

.workflow-list__bottom .workflow-item:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -19px;
  z-index: 2;
  width: 19px;
  height: 1px;
  background: rgba(255, 106, 0, 0.62);
}

.workflow-list__bottom .workflow-item:not(:last-child)::before {
  content: "";
  position: absolute;
  top: calc(50% - 3px);
  right: -19px;
  z-index: 3;
  width: 7px;
  height: 7px;
  border-top: 1px solid #ff6a00;
  border-right: 1px solid #ff6a00;
  transform: rotate(45deg);
}

/* =========================================================
   ЭКРАНЫ С НЕБОЛЬШОЙ ВЫСОТОЙ
========================================================= */

@media (min-width: 1101px) and (max-height: 900px) {
  .how-it-works {
    padding-top: 34px;
    padding-bottom: 28px;
  }

  .how-it-works__heading {
    margin-bottom: 19px;
  }

  .how-it-works__microcopy {
    margin-bottom: 5px;
  }

  .how-it-works__title {
    font-size: clamp(38px, 2.35vw, 46px);
  }

  .workflow-card {
    padding: 18px;
  }

  .workflow-list {
    gap: 14px;
  }

  .workflow-list__bottom {
    gap: 14px;
  }

  .workflow-item,
  .workflow-item--main {
    padding: 18px;
  }

  .workflow-list__bottom .workflow-item {
    min-height: 205px;
  }

  .workflow-start-options {
    margin-top: 13px;
    padding-left: 71px;
    gap: 10px;
  }

  .workflow-start-item {
    padding: 12px 14px;
    font-size: 13.5px;
  }

  .workflow-item__text {
    font-size: 14px;
  }

  .workflow-subtext {
    margin-top: 8px;
    font-size: 13.5px;
  }

  .workflow-list__bottom .workflow-item:not(:last-child)::after {
    right: -15px;
    width: 15px;
  }

  .workflow-list__bottom .workflow-item:not(:last-child)::before {
    right: -15px;
  }
}

/* =========================================================
   СРЕДНИЕ МОНИТОРЫ
========================================================= */

@media (max-width: 1500px) {
  .how-it-works__container {
    max-width: 1360px;
  }

  .workflow-item__title {
    font-size: 18px;
  }

  .workflow-item__text {
    font-size: 14px;
  }

  .workflow-subtext {
    font-size: 13.5px;
  }

  .workflow-start-item {
    font-size: 13.5px;
  }
}

/* =========================================================
   ПЛАНШЕТЫ
========================================================= */

@media (max-width: 1100px) {
  .how-it-works {
    min-height: auto;
    padding: 64px 24px;
    overflow: visible;
  }

  .how-it-works__heading {
    margin-bottom: 28px;
  }

  .workflow-card {
    padding: 18px;
  }

  .workflow-card__top {
    right: 24px;
  }

  .workflow-start-options {
    padding-left: 0;
    grid-template-columns: 1fr;
  }

  .workflow-list__bottom {
    grid-template-columns: 1fr;
  }

  .workflow-list__bottom .workflow-item {
    min-height: 0;
  }

  .workflow-list__bottom .workflow-item::before,
  .workflow-list__bottom .workflow-item::after {
    display: none;
  }
}

/* =========================================================
   МОБИЛЬНЫЕ ЭКРАНЫ
========================================================= */

@media (max-width: 640px) {
  .how-it-works {
    padding: 54px 15px 48px;
  }

  .how-it-works__heading {
    margin-bottom: 26px;
    text-align: left;
  }

  .how-it-works__microcopy {
    font-size: 12px;
  }

  .how-it-works__title {
    font-size: clamp(34px, 10vw, 44px);
    line-height: 1.05;
    letter-spacing: -0.8px;
  }

  .workflow-card {
    padding: 13px;
    border-radius: 18px;
  }

  .workflow-card__top {
    top: 0;
    right: 16px;
  }

  .workflow-card__status {
    min-height: 30px;
    padding: 6px 11px;
    font-size: 10px;
  }

  .workflow-list {
    gap: 13px;
  }

  .workflow-list__bottom {
    gap: 13px;
  }

  .workflow-item,
  .workflow-item--main {
    padding: 16px;
  }

  .workflow-item--main .workflow-item__head,
  .workflow-list__bottom .workflow-item {
    grid-template-columns: 44px minmax(0, 1fr);
    column-gap: 12px;
  }

  .workflow-item__icon {
    width: 44px;
    height: 44px;
    flex-basis: 44px;
    border-radius: 11px;
    font-size: 21px;
  }

  .workflow-item__title,
  .workflow-item--main .workflow-item__title {
    padding-right: 22px;
    font-size: 17px;
  }

  .workflow-start-options {
    margin-top: 14px;
    padding-left: 0;
  }

  .workflow-start-item,
  .workflow-item__text,
  .workflow-subtext {
    font-size: 13.5px;
  }

  .workflow-item__number {
    top: 14px;
    right: 14px;
    font-size: 11px;
  }
}

/* =========================================================
   ФИНАЛЬНЫЕ ОТСТУПЫ ТРЕТЬЕГО ЭКРАНА
========================================================= */

@media (min-width: 1101px) {
  /* Воздух между «Как настроить Автопилот»
     и заголовком */
  .how-it-works__microcopy {
    margin-bottom: 17px;
  }

  /* Опускаем общую панель немного ниже */
  .how-it-works__heading {
    margin-bottom: 48px;
  }
}

/* На невысоких мониторах оставляем отступы компактнее */
@media (min-width: 1101px) and (max-height: 900px) {
  .how-it-works__microcopy {
    margin-bottom: 11px;
  }

  .how-it-works__heading {
    margin-bottom: 29px;
  }
}

/* =========================================================
   ЧЕТВЁРТЫЙ ЭКРАН — ЧТО ПОЛУЧАЕТ БИЗНЕС
   Полный CSS-блок. Предыдущие стили секции удалить.
========================================================= */

.benefits,
.benefits * {
  box-sizing: border-box;
}

.benefits {
  position: relative;
  min-height: calc(100svh - 88px);
  padding: 34px 0 38px;
  display: flex;
  align-items: center;
  overflow: hidden;
  color: #ffffff;
  background:
    radial-gradient(
      circle at 10% 0%,
      rgba(255, 106, 0, 0.08),
      transparent 28%
    ),
    #062d38;
}

.benefits__container {
  width: min(1400px, calc(100% - 48px));
  margin-inline: auto;
}

/* =========================================================
   ВЕРХНЯЯ ЧАСТЬ
========================================================= */

.benefits__top {
  display: grid;
  grid-template-columns:
    minmax(0, 0.92fr)
    minmax(500px, 1.08fr);
  align-items: center;
  gap: 52px;
  margin-bottom: 24px;
}

.benefits__head {
  max-width: 650px;
}

.benefits__kicker {
  margin-bottom: 12px;
  color: var(--color-orange, #ff6a00);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.benefits__title {
  margin: 0 0 16px;
  color: #ffffff;
  font-family: "Oswald", Arial, sans-serif;
  font-size: clamp(42px, 3.45vw, 56px);
  font-weight: 500;
  line-height: 1.08;
}

.benefits__subtitle {
  max-width: 640px;
  margin: 0;
  color: #bfd4da;
  font-size: 18px;
  line-height: 1.55;
}

/* =========================================================
   КАЛЕНДАРЬ ПУБЛИКАЦИЙ
========================================================= */

.benefits__calendar {
  width: 100%;
}

.publish-calendar {
  width: 100%;
  padding: 17px 18px 18px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.08),
      rgba(255, 255, 255, 0.035)
    );
  box-shadow:
    0 22px 48px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.045);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.publish-calendar__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 13px;
}

.publish-calendar__title {
  color: #ffffff;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.25;
}

.publish-calendar__status {
  min-height: 31px;
  padding: 6px 11px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  border: 1px solid rgba(255, 106, 0, 0.22);
  border-radius: 999px;
  color: #ffb27c;
  background: rgba(255, 106, 0, 0.11);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.publish-calendar__status-dot {
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  border-radius: 50%;
  background: var(--color-orange, #ff6a00);
  animation: publishPulse 1.8s infinite;
}

@keyframes publishPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 106, 0, 0.5);
  }

  70% {
    box-shadow: 0 0 0 8px rgba(255, 106, 0, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(255, 106, 0, 0);
  }
}

/* =========================================================
   ДНИ НЕДЕЛИ
========================================================= */

.publish-calendar__week {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 9px;
  margin-bottom: 12px;
}

.publish-calendar__day {
  min-height: 62px;
  padding: 9px 7px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.04);
}

.publish-calendar__day-name {
  color: #9bb9c1;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}

.publish-calendar__slot {
  position: relative;
  width: 13px;
  height: 13px;
  display: block;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  transition:
    background-color 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.25s ease;
}

.publish-calendar__slot.is-active {
  background: var(--color-orange, #ff6a00);
  box-shadow:
    0 0 0 5px rgba(255, 106, 0, 0.13),
    0 0 18px rgba(255, 106, 0, 0.4);
  transform: scale(1.05);
}

/* =========================================================
   СОБЫТИЯ КАЛЕНДАРЯ
========================================================= */

.publish-calendar__events {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.publish-calendar__event {
  min-height: 37px;
  padding: 7px 12px;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  border: 1px solid rgba(255, 255, 255, 0.065);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.035);
  opacity: 0.58;
  transition:
    opacity 0.25s ease,
    transform 0.25s ease,
    border-color 0.25s ease,
    background-color 0.25s ease;
}

.publish-calendar__event.is-active {
  opacity: 1;
  transform: translateX(3px);
  border-color: rgba(255, 106, 0, 0.28);
  background: rgba(255, 106, 0, 0.09);
}

.publish-calendar__time {
  color: #ffb27c;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}

.publish-calendar__text {
  color: #d9e9ed;
  font-size: 13px;
  line-height: 1.3;
}

/* =========================================================
   КАРТОЧКИ РЕЗУЛЬТАТА
========================================================= */

.benefits__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 18px;
}

.benefit-card {
  position: relative;
  min-height: 156px;
  padding: 18px 24px 20px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 16px;
  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.075),
      rgba(255, 255, 255, 0.025)
    );
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.11);
  transition:
    transform 0.25s ease,
    border-color 0.25s ease,
    background-color 0.25s ease;
}

.benefit-card::after {
  content: "";
  position: absolute;
  right: -44px;
  bottom: -70px;
  width: 135px;
  height: 135px;
  border-radius: 50%;
  background: rgba(255, 106, 0, 0.065);
  pointer-events: none;
}

.benefit-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 106, 0, 0.25);
  background: rgba(255, 255, 255, 0.075);
}

.benefit-card__num {
  margin-bottom: 10px;
  color: var(--color-orange, #ff6a00);
  font-family: "Oswald", Arial, sans-serif;
  font-size: 19px;
  font-weight: 500;
  line-height: 1;
}

.benefit-card__title {
  position: relative;
  z-index: 1;
  margin: 0 0 7px;
  color: #ffffff;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.25;
}

.benefit-card__text {
  position: relative;
  z-index: 1;
  max-width: 610px;
  margin: 0;
  color: #bdd1d7;
  font-size: 14.5px;
  line-height: 1.45;
}

/* =========================================================
   АНИМАЦИЯ ПОЯВЛЕНИЯ КАРТОЧЕК
========================================================= */

.reveal-card {
  opacity: 0;
  transition:
    opacity 0.8s ease,
    transform 0.8s ease;
}

.reveal-left {
  transform: translateX(-50px);
}

.reveal-right {
  transform: translateX(50px);
}

.reveal-card.is-visible,
.reveal-card.visible {
  opacity: 1;
  transform: translateX(0);
}

/* =========================================================
   НЕВЫСОКИЕ МОНИТОРЫ
========================================================= */

@media (min-width: 1101px) and (max-height: 900px) {
  .benefits {
    padding-top: 24px;
    padding-bottom: 26px;
  }

  .benefits__top {
    margin-bottom: 18px;
  }

  .benefits__title {
    margin-bottom: 12px;
    font-size: clamp(40px, 3.2vw, 52px);
  }

  .benefits__subtitle {
    font-size: 17px;
    line-height: 1.5;
  }

  .publish-calendar {
    padding: 14px 16px 15px;
  }

  .publish-calendar__top {
    margin-bottom: 10px;
  }

  .publish-calendar__day {
    min-height: 56px;
  }

  .publish-calendar__week {
    margin-bottom: 10px;
  }

  .publish-calendar__event {
    min-height: 34px;
    padding-top: 6px;
    padding-bottom: 6px;
  }

  .benefit-card {
    min-height: 145px;
    padding: 16px 22px 18px;
  }

  .benefit-card__num {
    margin-bottom: 8px;
  }

  .benefit-card__title {
    margin-bottom: 6px;
  }
}

/* =========================================================
   СРЕДНИЕ ЭКРАНЫ
========================================================= */

@media (max-width: 1250px) {
  .benefits__top {
    grid-template-columns:
      minmax(0, 0.88fr)
      minmax(460px, 1.12fr);
    gap: 35px;
  }

  .benefits__title {
    font-size: clamp(40px, 4vw, 52px);
  }

  .benefits__subtitle {
    font-size: 17px;
  }

  .benefit-card__title {
    font-size: 19px;
  }

  .benefit-card__text {
    font-size: 14px;
  }
}

/* =========================================================
   ПЛАНШЕТЫ
========================================================= */

@media (max-width: 1100px) {
  .benefits {
    min-height: auto;
    padding: 64px 0;
    display: block;
    overflow: visible;
  }

  .benefits__container {
    width: min(800px, calc(100% - 40px));
  }

  .benefits__top {
    grid-template-columns: 1fr;
    gap: 34px;
    margin-bottom: 30px;
  }

  .benefits__head,
  .benefits__calendar {
    max-width: 800px;
  }

  .benefits__grid {
    gap: 16px;
  }

  .benefit-card {
    min-height: 175px;
  }
}

/* =========================================================
   МОБИЛЬНЫЕ ЭКРАНЫ
========================================================= */

@media (max-width: 768px) {
  .benefits {
    padding: 54px 0;
  }

  .benefits__container {
    width: min(100% - 30px, 680px);
  }

  .benefits__title {
    font-size: clamp(38px, 9vw, 50px);
  }

  .benefits__subtitle {
    font-size: 17px;
  }

  .benefits__grid {
    grid-template-columns: 1fr;
  }

  .publish-calendar {
    padding: 17px;
    border-radius: 18px;
  }

  .publish-calendar__top {
    flex-direction: column;
    align-items: flex-start;
  }

  .publish-calendar__week {
    gap: 7px;
  }

  .publish-calendar__day {
    min-height: 72px;
    padding: 11px 5px;
  }

  .publish-calendar__event {
    min-height: 42px;
  }

  .benefit-card {
    min-height: 0;
    padding: 22px;
  }
}

/* =========================================================
   МАЛЕНЬКИЕ МОБИЛЬНЫЕ ЭКРАНЫ
========================================================= */

@media (max-width: 480px) {
  .publish-calendar {
    padding: 14px;
  }

  .publish-calendar__week {
    gap: 5px;
  }

  .publish-calendar__day {
    min-height: 66px;
    padding-inline: 3px;
  }

  .publish-calendar__day-name {
    font-size: 11px;
  }

  .publish-calendar__slot {
    width: 12px;
    height: 12px;
  }

  .publish-calendar__event {
    grid-template-columns: 49px minmax(0, 1fr);
    gap: 8px;
    padding-inline: 9px;
  }

  .publish-calendar__time {
    font-size: 11px;
  }

  .publish-calendar__text {
    font-size: 12px;
  }

  .benefit-card__title {
    font-size: 19px;
  }

  .benefit-card__text {
    font-size: 14px;
  }
}

/* =========================================================
   ОТКЛЮЧЕНИЕ АНИМАЦИЙ
========================================================= */

@media (prefers-reduced-motion: reduce) {
  .publish-calendar__status-dot {
    animation: none;
  }

  .reveal-card {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

  /* =========================================================
   34. ПЯТЫЙ ЭКРАН ЭКРАН — КОМУ ПОДХОДИТ АВТОПИЛОТ
========================================================= */

.audience {
    position: relative;
  
    padding: 92px 0;
  
    background:
      radial-gradient(
        circle at 92% 7%,
        rgba(255, 106, 0, 0.08),
        transparent 26%
      ),
      linear-gradient(
        180deg,
        #f7fafb 0%,
        #edf3f5 100%
      );
  
    color: #0b2d36;
  }
  
  .audience__container {
    width: min(
      var(--site-width),
      calc(100% - var(--site-padding))
    );
  
    margin-inline: auto;
  }
  
  .audience__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
  
    gap: 58px;
    margin-bottom: 42px;
  }
  
  .audience__head {
    flex: 1 1 auto;
  
    max-width: 790px;
  }
  
  .audience__kicker {
    position: relative;
  
    display: inline-block;
  
    margin-bottom: 14px;
    padding-left: 17px;
  
    color: #526a72;
  
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.9px;
    text-transform: uppercase;
  }
  
  .audience__kicker::before {
    content: "";
  
    position: absolute;
    top: 50%;
    left: 0;
  
    width: 9px;
    height: 2px;
  
    border-radius: 999px;
    background: var(--color-orange);
  
    transform: translateY(-50%);
  }
  
  .audience__title {
    margin: 0 0 20px;
  
    color: #0b2d36;
  
    font-family: "Oswald", Arial, sans-serif;
    font-size: clamp(40px, 4vw, 58px);
    font-weight: 500;
    line-height: 1.08;
  }
  
  .audience__subtitle {
    margin: 0;
  
    max-width: 760px;
  
    color: #587078;
  
    font-size: 19px;
    line-height: 1.65;
  }
  
  
  /* =========================================================
     35. ПРАВАЯ СХЕМА
  ========================================================= */
  
  .audience__visual {
    flex: 0 0 360px;
  
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
  }
  
  .audience-flow {
    position: relative;
  
    width: 340px;
    height: 250px;
  
    overflow: hidden;
  
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 20px;
  
    background:
      radial-gradient(
        circle at 50% 50%,
        rgba(255, 106, 0, 0.09),
        transparent 38%
      ),
      linear-gradient(
        180deg,
        #063947 0%,
        #052f3b 100%
      );
  
    box-shadow:
      0 22px 45px rgba(11, 45, 54, 0.18),
      inset 0 1px 0 rgba(255, 255, 255, 0.04);
  }
  
  
  /* =========================================================
     36. ЦЕНТР СХЕМЫ
  ========================================================= */
  
  .audience-flow__center {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
  
    width: 144px;
    height: 144px;
  
    transform: translate(-50%, -50%);
  }
  
  .audience-flow__cross::before,
  .audience-flow__cross::after {
    content: "";
  
    position: absolute;
    top: 50%;
    left: 50%;
  
    z-index: 0;
  
    background: rgba(255, 255, 255, 0.09);
  
    pointer-events: none;
  }
  
  .audience-flow__cross::before {
    width: 2px;
    height: 154px;
  
    transform: translate(-50%, -50%);
  }
  
  .audience-flow__cross::after {
    width: 205px;
    height: 2px;
  
    transform: translate(-50%, -50%);
  }
  
  .audience-flow__center-circle {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
  
    width: 120px;
    height: 120px;
  
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 50%;
  
    background: rgba(255, 255, 255, 0.045);
  
    transform: translate(-50%, -50%);
  }
  
  .audience-flow__core {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 4;
  
    width: 15px;
    height: 15px;
  
    border-radius: 50%;
  
    background: var(--color-orange);
  
    box-shadow:
      0 0 0 7px rgba(255, 106, 0, 0.12),
      0 0 22px rgba(255, 106, 0, 0.55);
  
    transform: translate(-50%, -50%);
  }
  
  
  /* =========================================================
     37. СТРЕЛКА В ЦЕНТРЕ
  ========================================================= */
  
  .audience-flow__needle-wrap {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 3;
  
    width: 2px;
    height: 58px;
  
    transform-origin: center bottom;
    transform:
      translate(-50%, -100%)
      rotate(-45deg);
  
    transition: transform 0.6s ease;
  }
  
  .audience-flow__needle {
    position: relative;
  
    width: 2px;
    height: 58px;
  
    border-radius: 999px;
  
    background:
      linear-gradient(
        to top,
        var(--color-orange),
        #ffc095
      );
  
    box-shadow: 0 0 10px rgba(255, 106, 0, 0.42);
  }
  
  .audience-flow__needle::after {
    content: "";
  
    position: absolute;
    top: -3px;
    left: 50%;
  
    width: 8px;
    height: 8px;
  
    border-top: 2px solid #ffc095;
    border-right: 2px solid #ffc095;
  
    transform:
      translateX(-50%)
      rotate(-45deg);
  }
  
  .audience-flow__label {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 5;
  
    color: #ffffff;
  
    font-family: "Oswald", Arial, sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.5px;
  
    transform: translate(-50%, 22px);
  }
  
  
  /* =========================================================
     38. ЭЛЕМЕНТЫ ВОКРУГ СХЕМЫ
  ========================================================= */
  
  .audience-flow__item {
    position: absolute;
    z-index: 5;
  
    display: inline-flex;
    align-items: center;
  
    gap: 8px;
  
    color: #93b0b8;
  
    font-size: 13px;
    line-height: 1;
  
    opacity: 0.58;
  
    transition:
      color 0.35s ease,
      opacity 0.35s ease,
      transform 0.35s ease;
  }
  
  .audience-flow__item--1,
  .audience-flow__item--2 {
    top: 18px;
  }
  
  .audience-flow__item--3,
  .audience-flow__item--4 {
    bottom: 18px;
  }
  
  .audience-flow__item--1,
  .audience-flow__item--3 {
    left: 18px;
  }
  
  .audience-flow__item--2,
  .audience-flow__item--4 {
    right: 18px;
  }
  
  .audience-flow__dot {
    width: 7px;
    height: 7px;
  
    flex: 0 0 7px;
  
    border-radius: 50%;
  
    background: rgba(255, 255, 255, 0.2);
  
    transition:
      background-color 0.35s ease,
      box-shadow 0.35s ease;
  }
  
  .audience-flow__icon {
    width: 20px;
  
    display: inline-flex;
    align-items: center;
    justify-content: center;
  
    flex: 0 0 20px;
  
    font-size: 17px;
    line-height: 1;
  }
  
  .audience-flow__name {
    font-weight: 500;
    white-space: nowrap;
  }
  
  .audience-flow__item.is-active {
    color: #ffffff;
    opacity: 1;
  
    transform: translateY(-2px);
  }
  
  .audience-flow__item.is-active .audience-flow__dot {
    background: var(--color-orange);
  
    box-shadow:
      0 0 0 4px rgba(255, 106, 0, 0.13),
      0 0 13px rgba(255, 106, 0, 0.5);
  }
  
  
  /* =========================================================
     39. СЕТКА КАРТОЧЕК
  ========================================================= */
  
  .audience__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  
    gap: 20px;
  }
  
  .audience-card {
    position: relative;
  
    min-height: 230px;
  
    padding: 28px 26px 26px;
  
    overflow: hidden;
  
    border: 1px solid rgba(11, 45, 54, 0.08);
    border-radius: 16px;
  
    background: #ffffff;
  
    box-shadow: 0 12px 28px rgba(11, 45, 54, 0.065);
  
    transition:
      transform 0.25s ease,
      border-color 0.25s ease,
      box-shadow 0.25s ease;
  }
  
  .audience-card::before {
    content: "";
  
    position: absolute;
    top: -60px;
    right: -60px;
  
    width: 145px;
    height: 145px;
  
    border-radius: 50%;
  
    background: rgba(255, 106, 0, 0.04);
  
    pointer-events: none;
  }
  
  .audience-card::after {
    content: "";
  
    position: absolute;
    right: 24px;
    bottom: 0;
    left: 24px;
  
    height: 3px;
  
    border-radius: 999px;
  
    background: var(--color-orange);
  
    opacity: 0;
  
    transform: scaleX(0.4);
    transform-origin: center;
  
    transition:
      opacity 0.35s ease,
      transform 0.35s ease;
  }
  
  .audience-card:hover {
    transform: translateY(-5px);
  
    border-color: rgba(255, 106, 0, 0.22);
  
    box-shadow: 0 18px 36px rgba(11, 45, 54, 0.1);
  }
  
  .audience-card:hover::after {
    opacity: 1;
    transform: scaleX(1);
  }
  
  .audience-card__name {
    position: relative;
    z-index: 1;
  
    margin-bottom: 13px;
  
    color: #0b2d36;
  
    font-family: "Oswald", Arial, sans-serif;
    font-size: 27px;
    font-weight: 500;
    line-height: 1.2;
  }
  
  .audience-card__text {
    position: relative;
    z-index: 1;
  
    margin: 0;
  
    color: #587078;
  
    font-size: 15px;
    line-height: 1.68;
  }
  
  
  /* =========================================================
     40. АКТИВНАЯ КАРТОЧКА
  ========================================================= */
  
  .audience-card.is-glow {
    border-color: rgba(255, 106, 0, 0.3);
  
    box-shadow:
      inset 0 -3px 0 var(--color-orange),
      inset 0 0 0 1px rgba(255, 106, 0, 0.12),
      0 15px 32px rgba(255, 106, 0, 0.11);
  
    transform: translateY(-4px);
  }
  
  .audience-card.is-glow::after {
    opacity: 1;
    transform: scaleX(1);
  }
  
  
  /* =========================================================
     41. АДАПТИВ ЧЕТВЁРТОГО ЭКРАНА
  ========================================================= */
  
  @media (max-width: 1100px) {
    .audience {
      padding: 76px 0;
    }
  
    .audience__top {
      flex-direction: column;
      align-items: stretch;
  
      gap: 32px;
    }
  
    .audience__visual {
      flex: none;
  
      justify-content: flex-start;
    }
  
    .audience__grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  
  @media (max-width: 768px) {
    .audience {
      padding: 62px 0;
    }
  
    .audience__title {
      font-size: clamp(36px, 9vw, 46px);
    }
  
    .audience__subtitle {
      font-size: 17px;
    }
  
    .audience__visual {
      justify-content: center;
    }
  
    .audience-flow {
      width: 100%;
      max-width: 340px;
      height: 235px;
    }
  
    .audience-flow__center {
      width: 132px;
      height: 132px;
    }
  
    .audience-flow__center-circle {
      width: 108px;
      height: 108px;
    }
  
    .audience-flow__cross::before {
      height: 140px;
    }
  
    .audience-flow__cross::after {
      width: 185px;
    }
  
    .audience-flow__needle,
    .audience-flow__needle-wrap {
      height: 52px;
    }
  
    .audience-flow__label {
      font-size: 12px;
  
      transform: translate(-50%, 19px);
    }
  
    .audience-flow__item {
      gap: 6px;
  
      font-size: 12px;
    }
  
    .audience-flow__icon {
      width: 18px;
  
      flex-basis: 18px;
  
      font-size: 15px;
    }
  
    .audience__grid {
      grid-template-columns: 1fr;
    }
  
    .audience-card {
      min-height: 0;
  
      padding: 23px 21px 22px;
    }
  
    .audience-card__name {
      font-size: 24px;
    }
  }
  
  @media (max-width: 480px) {
    .audience-flow {
      height: 218px;
    }
  
    .audience-flow__center {
      width: 122px;
      height: 122px;
    }
  
    .audience-flow__center-circle {
      width: 98px;
      height: 98px;
    }
  
    .audience-flow__cross::before {
      height: 128px;
    }
  
    .audience-flow__cross::after {
      width: 164px;
    }
  
    .audience-flow__needle,
    .audience-flow__needle-wrap {
      height: 47px;
    }
  
    .audience-flow__item--1,
    .audience-flow__item--2 {
      top: 14px;
    }
  
    .audience-flow__item--3,
    .audience-flow__item--4 {
      bottom: 14px;
    }
  
    .audience-flow__item--1,
    .audience-flow__item--3 {
      left: 12px;
    }
  
    .audience-flow__item--2,
    .audience-flow__item--4 {
      right: 12px;
    }
  
    .audience-flow__name {
      font-size: 11px;
    }
  
    .audience-card__text {
      font-size: 14px;
    }
  }
  
  
  /* =========================================================
     42. ОТКЛЮЧЕНИЕ ПЛАВНЫХ ЭФФЕКТОВ
  ========================================================= */
  
  @media (prefers-reduced-motion: reduce) {
    .audience-flow__needle-wrap,
    .audience-flow__item,
    .audience-flow__dot,
    .audience-card,
    .audience-card::after {
      transition: none;
    }
  }

  /* =========================================================
   43. ПЯТЫЙ ЭКРАН — ПРИМЕРЫ ПУБЛИКАЦИЙ
========================================================= */

.ap-examples-clean {
    position: relative;
  
    padding: 100px 0;
  
    background:
      radial-gradient(
        circle at 12% 10%,
        rgba(255, 106, 0, 0.1),
        transparent 28%
      ),
      linear-gradient(
        180deg,
        #064554 0%,
        #043946 100%
      );
  
    color: #ffffff;
  }
  
  .ap-container {
    width: min(
      var(--site-width),
      calc(100% - var(--site-padding))
    );
  
    margin-inline: auto;
  }
  
  .ap-examples-top {
    display: grid;
    grid-template-columns:
      minmax(0, 1fr)
      minmax(430px, 0.9fr);
  
    align-items: start;
    gap: 48px;
  }
  
  .ap-examples-left,
  .ap-examples-right {
    min-width: 0;
  }
  
  
  /* =========================================================
     44. ЗАГОЛОВОК БЛОКА
  ========================================================= */
  
  .ap-label {
    position: relative;
  
    display: inline-block;
  
    margin-bottom: 15px;
    padding-left: 18px;
  
    color: var(--color-orange);
  
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 1px;
    text-transform: uppercase;
  }
  
  .ap-label::before {
    content: "";
  
    position: absolute;
    top: 50%;
    left: 0;
  
    width: 10px;
    height: 2px;
  
    border-radius: 999px;
    background: var(--color-orange);
  
    transform: translateY(-50%);
  }
  
  .ap-title {
    max-width: 760px;
  
    margin: 0 0 20px;
  
    color: #ffffff;
  
    font-family: "Oswald", Arial, sans-serif;
    font-size: clamp(42px, 4.2vw, 62px);
    font-weight: 500;
    line-height: 1.08;
  }
  
  .ap-subtitle {
    max-width: 720px;
  
    margin: 0;
  
    color: #bed3d9;
  
    font-size: 19px;
    line-height: 1.65;
  }
  
  
  /* =========================================================
     45. КОЛЛАЖ
  ========================================================= */
  
  .ap-collage {
    position: relative;
  
    width: 100%;
    max-width: 690px;
  
    margin-top: 36px;
  
    overflow: hidden;
  
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
  
    background: rgba(255, 255, 255, 0.035);
  
    box-shadow:
      0 24px 55px rgba(0, 0, 0, 0.25),
      inset 0 1px 0 rgba(255, 255, 255, 0.045);
  }
  
  .ap-collage-row {
    position: relative;
  
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  
  .ap-collage-row::after {
    content: "";
  
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(50% - 1px);
    z-index: 3;
  
    width: 2px;
  
    background: rgba(255, 255, 255, 0.9);
  
    opacity: 0;
  }
  
  .ap-collage-row:not(:last-child)::before {
    content: "";
  
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    z-index: 3;
  
    height: 2px;
  
    background: rgba(255, 255, 255, 0.9);
  
    opacity: 0;
  }
  
  .ap-cell {
    position: relative;
  
    width: 100%;
  
    aspect-ratio: 345 / 350;
  
    overflow: hidden;
  
    background: #0b3540;
  }
  
  .ap-cell img {
    width: 100%;
    height: 100%;
  
    object-fit: cover;
  
    opacity: 0;
  
    transform: scale(1.04);
  
    filter: saturate(0.95) contrast(1.02);
  }
  
  
  /* =========================================================
     46. АНИМАЦИЯ КОЛЛАЖА
  ========================================================= */
  
  .ap-collage-row.is-active .ap-cell:first-child img {
    animation: apRowImageIn 0.75s ease forwards;
  }
  
  .ap-collage-row.is-active .ap-cell:last-child img {
    animation: apRowImageIn 0.75s ease 0.16s forwards;
  }
  
  .ap-collage-row.is-active::after {
    animation: apRowLineIn 0.5s ease forwards;
  }
  
  .ap-collage-row.is-active::before {
    animation: apRowLineInHorizontal 0.5s ease 0.06s forwards;
  }
  
  .ap-collage-row.is-out .ap-cell img {
    animation: apRowImageOut 0.55s ease forwards;
  }
  
  .ap-collage-row.is-out::after,
  .ap-collage-row.is-out::before {
    animation: apRowLineOut 0.35s ease forwards;
  }
  
  @keyframes apRowImageIn {
    from {
      opacity: 0;
      transform: scale(1.04);
    }
  
    to {
      opacity: 1;
      transform: scale(1);
    }
  }
  
  @keyframes apRowImageOut {
    from {
      opacity: 1;
      transform: scale(1);
    }
  
    to {
      opacity: 0;
      transform: scale(0.985);
    }
  }
  
  @keyframes apRowLineIn {
    from {
      opacity: 0;
      transform: scaleY(0);
    }
  
    to {
      opacity: 1;
      transform: scaleY(1);
    }
  }
  
  @keyframes apRowLineInHorizontal {
    from {
      opacity: 0;
      transform: scaleX(0);
    }
  
    to {
      opacity: 1;
      transform: scaleX(1);
    }
  }
  
  @keyframes apRowLineOut {
    from {
      opacity: 1;
    }
  
    to {
      opacity: 0;
    }
  }
  
  
  /* =========================================================
     47. ЛОГОТИПЫ ПОВЕРХ КОЛЛАЖА
  ========================================================= */
  
  .ap-logo {
    position: absolute;
    z-index: 10;
  
    display: block;
  
    pointer-events: none;
  
    opacity: 0;
  
    filter:
      drop-shadow(0 5px 12px rgba(0, 0, 0, 0.28))
      brightness(1.05);
  }
  
  .ap-logo--1 {
    top: 7%;
    left: 7%;
  
    width: 58px;
  }
  
  .ap-logo--2 {
    top: 31%;
    right: 7%;
  
    width: 92px;
  }
  
  .ap-logo--3 {
    top: 57%;
    left: 9%;
  
    width: 70px;
  }
  
  .ap-logo--4 {
    right: 8%;
    bottom: 6%;
  
    width: 82px;
  }
  
  .ap-collage.is-playing .ap-logo--1 {
    animation: apLogoFloat 6s ease-in-out infinite;
  }
  
  .ap-collage.is-playing .ap-logo--2 {
    animation: apLogoFloat 6.8s ease-in-out 0.8s infinite;
  }
  
  .ap-collage.is-playing .ap-logo--3 {
    animation: apLogoFloat 6.4s ease-in-out 1.4s infinite;
  }
  
  .ap-collage.is-playing .ap-logo--4 {
    animation: apLogoFloat 7s ease-in-out 2s infinite;
  }
  
  @keyframes apLogoFloat {
    0%,
    100% {
      opacity: 0.78;
      transform: translateY(0) rotate(-2deg);
    }
  
    50% {
      opacity: 1;
      transform: translateY(-8px) rotate(2deg);
    }
  }
  
  
  /* =========================================================
     48. ПРАВАЯ ЛЕНТА ПУБЛИКАЦИЙ
  ========================================================= */
  
  .ap-feed {
    display: flex;
    flex-direction: column;
  
    gap: 18px;
  }
  
  .ap-post {
    padding: 18px;
  
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 18px;
  
    background:
      linear-gradient(
        145deg,
        rgba(255, 255, 255, 0.075),
        rgba(255, 255, 255, 0.035)
      );
  
    box-shadow:
      0 18px 38px rgba(0, 0, 0, 0.15),
      inset 0 1px 0 rgba(255, 255, 255, 0.035);
  
    transition:
      transform 0.25s ease,
      border-color 0.25s ease,
      background-color 0.25s ease;
  }
  
  .ap-post:hover {
    transform: translateY(-4px);
  
    border-color: rgba(255, 106, 0, 0.28);
    background: rgba(255, 255, 255, 0.07);
  }
  
  .ap-post-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
  
    gap: 13px;
    margin-bottom: 14px;
  }
  
  .ap-post-meta {
    display: flex;
    align-items: center;
  }
  
  .ap-time {
    color: #8eb0b9;
  
    font-size: 13px;
    line-height: 1.2;
    white-space: nowrap;
  }
  
  
  /* =========================================================
     49. МЕТКА НИШИ
  ========================================================= */
  
  .audience-flow-mini {
    min-height: 42px;
  
    display: inline-flex;
    align-items: center;
  
    gap: 9px;
    padding: 0 14px;
  
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 999px;
  
    background: rgba(255, 255, 255, 0.07);
  }
  
  .audience-flow-mini--active {
    border-color: rgba(255, 106, 0, 0.3);
  
    background: rgba(255, 106, 0, 0.13);
  }
  
  .audience-flow-mini__dot {
    width: 8px;
    height: 8px;
  
    flex: 0 0 8px;
  
    border-radius: 50%;
  
    background: var(--color-orange);
  
    box-shadow: 0 0 0 4px rgba(255, 106, 0, 0.1);
  }
  
  .audience-flow-mini__icon {
    width: 20px;
  
    display: inline-flex;
    align-items: center;
    justify-content: center;
  
    flex: 0 0 20px;
  
    font-size: 17px;
    line-height: 1;
  }
  
  .audience-flow-mini__name {
    color: #ffffff;
  
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
  }
  
  
  /* =========================================================
     50. ИЗОБРАЖЕНИЕ ВНУТРИ ПУБЛИКАЦИИ
  ========================================================= */
  
  .ap-post-image {
    min-height: 160px;
  
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  
    gap: 10px;
    margin-bottom: 16px;
    padding: 18px;
  
    overflow: hidden;
  
    border-radius: 14px;
  
    box-shadow: inset 0 -70px 70px rgba(0, 0, 0, 0.15);
  }
  
  .ap-post--shop .ap-post-image {
    background:
      linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.02),
        rgba(0, 0, 0, 0.34)
      ),
      linear-gradient(
        135deg,
        #8a5a22 0%,
        #b57c3a 54%,
        #d7a25d 100%
      );
  }
  
  .ap-post--factory .ap-post-image {
    background:
      linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.02),
        rgba(0, 0, 0, 0.34)
      ),
      linear-gradient(
        135deg,
        #45515e 0%,
        #647485 50%,
        #8a97a3 100%
      );
  }
  
  .ap-post--service .ap-post-image {
    background:
      linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.02),
        rgba(0, 0, 0, 0.34)
      ),
      linear-gradient(
        135deg,
        #7a5830 0%,
        #a7753f 52%,
        #ca9453 100%
      );
  }
  
  .ap-post--delivery .ap-post-image {
    background:
      linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.02),
        rgba(0, 0, 0, 0.34)
      ),
      linear-gradient(
        135deg,
        #4b5368 0%,
        #69748d 52%,
        #8e97b1 100%
      );
  }
  
  .ap-post-badge {
    min-height: 31px;
  
    align-self: flex-start;
  
    display: inline-flex;
    align-items: center;
  
    padding: 0 13px;
  
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 999px;
  
    background: rgba(10, 19, 23, 0.5);
    color: #ffffff;
  
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
  }
  
  .ap-post-image-title {
    max-width: 390px;
  
    color: #ffffff;
  
    font-size: 20px;
    font-weight: 700;
    line-height: 1.25;
  }
  
  
  /* =========================================================
     51. ТЕКСТ ПУБЛИКАЦИИ
  ========================================================= */
  
  .ap-post-title {
    margin: 0 0 10px;
  
    color: #ffffff;
  
    font-size: 23px;
    font-weight: 700;
    line-height: 1.3;
  }
  
  .ap-post-text {
    margin: 0;
  
    color: #bfd3d9;
  
    font-size: 15px;
    line-height: 1.65;
  }
  
  
  /* =========================================================
     52. АДАПТИВ ПЯТОГО ЭКРАНА
  ========================================================= */
  
  @media (max-width: 1180px) {
    .ap-examples-top {
      grid-template-columns: 1fr;
      gap: 46px;
    }
  
    .ap-examples-left,
    .ap-examples-right {
      max-width: 850px;
    }
  
    .ap-collage {
      max-width: 760px;
    }
  }
  
  @media (max-width: 768px) {
    .ap-examples-clean {
      padding: 68px 0;
    }
  
    .ap-title {
      font-size: clamp(37px, 9vw, 48px);
    }
  
    .ap-subtitle {
      font-size: 17px;
    }
  
    .ap-collage {
      margin-top: 28px;
  
      border-radius: 16px;
    }
  
    .ap-post {
      padding: 15px;
  
      border-radius: 16px;
    }
  
    .ap-post-image {
      min-height: 140px;
  
      padding: 15px;
  
      border-radius: 12px;
    }
  
    .ap-post-image-title {
      font-size: 18px;
    }
  
    .ap-post-title {
      font-size: 20px;
    }
  
    .ap-post-text {
      font-size: 14px;
    }
  
    .audience-flow-mini {
      min-height: 39px;
  
      padding-inline: 12px;
    }
  
    .audience-flow-mini__name {
      font-size: 13px;
    }
  
    .ap-time {
      font-size: 12px;
    }
  }
  
  @media (max-width: 520px) {
    .ap-collage {
      max-width: 100%;
    }
  
    .ap-logo--1 {
      width: 40px;
    }
  
    .ap-logo--2 {
      width: 60px;
    }
  
    .ap-logo--3 {
      width: 48px;
    }
  
    .ap-logo--4 {
      width: 55px;
    }
  
    .ap-post-head {
      align-items: flex-start;
      flex-direction: column;
    }
  
    .ap-post-image {
      min-height: 130px;
    }
  
    .ap-post-title {
      font-size: 19px;
    }
  }
  
  
  /* =========================================================
     53. ОТКЛЮЧЕНИЕ АНИМАЦИЙ
  ========================================================= */
  
  @media (prefers-reduced-motion: reduce) {
    .ap-collage-row .ap-cell img {
      opacity: 1;
      transform: none;
      animation: none !important;
    }
  
    .ap-collage-row::before,
    .ap-collage-row::after {
      opacity: 1;
      animation: none !important;
    }
  
    .ap-logo {
      opacity: 0.9;
      transform: none;
      animation: none !important;
    }
  
    .ap-post {
      transition: none;
    }
  }

  /* =========================================================
   54. FOOTER
========================================================= */

.footer {
    position: relative;
  
    background: #021f28;
    color: #c7dade;
  
    border-top: 1px solid rgba(255, 255, 255, 0.07);
  }
  
  .footer__cols {
    display: grid;
    grid-template-columns:
      minmax(320px, 0.9fr)
      minmax(420px, 1.1fr);
  
    min-height: 390px;
  }
  
  
  /* =========================================================
     55. ПУСТЫЕ КОЛОНКИ
     Сейчас в HTML в них нет содержимого
  ========================================================= */
  
  .footer__col--info,
  .footer__col--map {
    display: none;
  }
  
  
  /* =========================================================
     56. ИЗОБРАЖЕНИЕ FOOTER
  ========================================================= */
  
  .footer__col--image {
    position: relative;
  
    min-height: 390px;
  
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }
  
  .footer__col--image::before {
    content: "";
  
    position: absolute;
    inset: 0;
  
    background:
      linear-gradient(
        90deg,
        rgba(2, 31, 40, 0.12),
        rgba(2, 31, 40, 0.55)
      ),
      linear-gradient(
        180deg,
        rgba(2, 31, 40, 0.05),
        rgba(2, 31, 40, 0.45)
      );
  }
  
  
  /* =========================================================
     57. КОНТАКТЫ
  ========================================================= */
  
  .footer__col--contact {
    display: flex;
    flex-direction: column;
    justify-content: center;
  
    padding: 62px clamp(40px, 6vw, 95px);
  }
  
  .footer__title {
    position: relative;
  
    margin: 0 0 34px;
    padding-bottom: 17px;
  
    color: #ffffff;
  
    font-family: "Oswald", Arial, sans-serif;
    font-size: clamp(36px, 3.5vw, 50px);
    font-weight: 500;
    line-height: 1.1;
  }
  
  .footer__title::after {
    content: "";
  
    position: absolute;
    bottom: 0;
    left: 0;
  
    width: 62px;
    height: 3px;
  
    border-radius: 999px;
    background: var(--color-orange);
  }
  
  .footer__col--contact p {
    margin: 0;
  
    color: #b7cdd2;
  
    font-size: 17px;
    line-height: 1.65;
  }
  
  .footer__col--contact p + p {
    margin-top: 18px;
  }
  
  .footer__col--contact strong {
    display: block;
  
    margin-bottom: 4px;
  
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.65px;
    text-transform: uppercase;
  }
  
  .text-primary {
    color: var(--color-orange);
  }
  
  .footer__link {
    display: inline-block;
  
    color: #ffffff;
  
    font-size: 18px;
    font-weight: 600;
  
    overflow-wrap: anywhere;
  
    transition:
      color 0.2s ease,
      transform 0.2s ease;
  }
  
  .footer__link:hover,
  .footer__link:focus-visible {
    color: var(--color-orange);
    transform: translateX(3px);
  }
  
  .footer__link:focus-visible {
    outline: 2px solid rgba(255, 106, 0, 0.45);
    outline-offset: 4px;
    border-radius: 3px;
  }
  
  
  /* =========================================================
     58. НИЖНЯЯ ЧАСТЬ FOOTER
  ========================================================= */
  
  .footer__bottom {
    width: min(
      var(--site-width),
      calc(100% - var(--site-padding))
    );
  
    margin-inline: auto;
    padding: 24px 0;
  
    border-top: 1px solid rgba(255, 255, 255, 0.07);
  }
  
  .footer__note {
    margin: 0;
  
    color: #78969e;
  
    font-size: 14px;
    line-height: 1.5;
    text-align: center;
  }
  
  
  /* =========================================================
     59. АДАПТИВ FOOTER
  ========================================================= */
  
  @media (max-width: 900px) {
    .footer__cols {
      grid-template-columns: 1fr;
      min-height: 0;
    }
  
    .footer__col--image {
      min-height: 320px;
    }
  
    .footer__col--image::before {
      background:
        linear-gradient(
          180deg,
          rgba(2, 31, 40, 0.05),
          rgba(2, 31, 40, 0.58)
        );
    }
  
    .footer__col--contact {
      padding:
        50px
        max(
          calc(var(--site-padding) / 2),
          calc((100% - var(--site-width)) / 2)
        );
    }
  }
  
  @media (max-width: 640px) {
    .footer__col--image {
      min-height: 245px;
    }
  
    .footer__col--contact {
      padding:
        44px
        calc(var(--site-padding) / 2);
    }
  
    .footer__title {
      margin-bottom: 28px;
  
      font-size: 38px;
    }
  
    .footer__col--contact p {
      font-size: 16px;
    }
  
    .footer__link {
      font-size: 16px;
    }
  
    .footer__bottom {
      padding: 20px 0;
    }
  
    .footer__note {
      font-size: 13px;
    }
  }
  
  @media (max-width: 420px) {
    .footer__col--image {
      min-height: 210px;
    }
  
    .footer__col--contact {
      padding-top: 38px;
      padding-bottom: 38px;
    }
  
    .footer__title {
      font-size: 34px;
    }
  }
  
  
  /* =========================================================
     60. FOOTER — ОТКЛЮЧЕНИЕ ПЛАВНЫХ ЭФФЕКТОВ
  ========================================================= */
  
  @media (prefers-reduced-motion: reduce) {
    .footer__link {
      transition: none;
    }
  }

  /* =========================================================
   POPUP — ПРОБНЫЙ ДОСТУП
   ========================================================= */

.entry-popup {
  position: fixed;
  inset: 0;
  z-index: 9999;

  display: none;
  align-items: center;
  justify-content: center;

  padding: 24px;
}

.entry-popup.is-open {
  display: flex;
}

/* Затемнение и размытие сайта */
.entry-popup__overlay {
  position: absolute;
  inset: 0;

  background:
    radial-gradient(
      circle at 50% 42%,
      rgba(255, 107, 0, 0.22),
      transparent 26%
    ),
    radial-gradient(
      circle at 50% 58%,
      rgba(0, 210, 230, 0.12),
      transparent 42%
    ),
    rgba(1, 18, 25, 0.84);

  backdrop-filter: blur(11px);
}

/* Основная карточка */
.entry-popup__card {
  position: relative;
  z-index: 2;

  width: 100%;
  max-width: 920px;

  padding: 42px 58px 34px;
  border-radius: 32px;

  overflow: hidden;

  background:
    linear-gradient(
      145deg,
      rgba(7, 75, 84, 0.99),
      rgba(3, 37, 47, 0.99)
    );

  border: 1px solid rgba(255, 138, 38, 0.55);

  box-shadow:
    0 0 0 1px rgba(255, 122, 24, 0.08),
    0 0 46px rgba(255, 107, 0, 0.26),
    0 34px 110px rgba(0, 0, 0, 0.64);

  color: #ffffff;

  transform: scale(0.88) translateY(22px);
  opacity: 0;

  transition:
    transform 0.34s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.26s ease;
}

.entry-popup.is-open .entry-popup__card {
  transform: scale(1) translateY(0);
  opacity: 1;
}

/* Движущееся свечение внутри карточки */
.entry-popup__card::before {
  content: "";
  position: absolute;
  inset: -70px;

  background:
    radial-gradient(
      circle at 18% 8%,
      rgba(255, 122, 24, 0.38),
      transparent 27%
    ),
    radial-gradient(
      circle at 86% 20%,
      rgba(255, 177, 80, 0.16),
      transparent 24%
    ),
    radial-gradient(
      circle at 52% 88%,
      rgba(0, 193, 215, 0.11),
      transparent 34%
    );

  pointer-events: none;

  animation: popupGlowMove 16s ease-in-out infinite alternate;
}

/* Световая линия сверху */
.entry-popup__card::after {
  content: "";
  position: absolute;

  top: 0;
  left: 36px;
  right: 36px;

  height: 3px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255, 122, 24, 0.95),
      rgba(255, 211, 145, 0.92),
      transparent
    );

  box-shadow:
    0 0 22px rgba(255, 122, 24, 0.86);
}

/* Все элементы поверх свечения */
.entry-popup__close,
.entry-popup__badge,
.entry-popup h2,
.entry-popup__text,
.entry-popup__result,
.entry-popup__button,
.entry-popup__note {
  position: relative;
  z-index: 2;
}

/* Кнопка закрытия */
.entry-popup__close {
  position: absolute;
  top: 18px;
  right: 18px;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 42px;
  height: 42px;

  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 50%;

  background: rgba(255, 255, 255, 0.11);
  color: #ffffff;

  font-size: 28px;
  line-height: 1;

  cursor: pointer;

  transition:
    background 0.2s ease,
    transform 0.2s ease;
}

.entry-popup__close:hover {
  background: rgba(255, 122, 24, 0.92);
  transform: rotate(5deg);
}

/* Метка "Пробный доступ" */
.entry-popup__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  margin-bottom: 20px;
  padding: 9px 15px;

  border-radius: 999px;

  background: rgba(255, 107, 0, 0.17);
  color: #ffbc7d;

  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;

  box-shadow:
    0 0 20px rgba(255, 107, 0, 0.17);
}

.entry-popup__badge::before {
  content: "";

  width: 8px;
  height: 8px;

  border-radius: 50%;

  background: #ff6b00;

  box-shadow:
    0 0 13px rgba(255, 107, 0, 0.95);
}

/* Главный заголовок */
.entry-popup h2 {
  max-width: 790px;
  margin: 0 0 20px;

  color: #ff8318;

  font-size: clamp(31px, 3.5vw, 35px);
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: -0.035em;

  text-shadow:
    0 0 20px rgba(255, 107, 0, 0.23),
    0 2px 0 rgba(0, 0, 0, 0.18);
}

/* Основные абзацы */
.entry-popup__text {
  max-width: 790px;
  margin: 0 0 17px;

  color: rgba(255, 255, 255, 0.86);

  font-size: 17px;
  line-height: 1.55;
}

/* Заключение перед кнопкой */
.entry-popup__result {
  max-width: 790px;
  margin: 23px 0 24px;

  color: rgba(255, 255, 255, 0.96);

  font-size: 17px;
  line-height: 1.5;
  font-weight: 650;
}

/* Главная кнопка */
.entry-popup__button {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  min-height: 66px;

  padding: 16px 24px;

  border: 0;
  border-radius: 18px;

  background:
    linear-gradient(
      135deg,
      #ff6800,
      #ff8c25
    );

  color: #ffffff;

  font-size: 19px;
  font-weight: 900;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;

  cursor: pointer;

  box-shadow:
    0 16px 38px rgba(255, 107, 0, 0.31),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    filter 0.2s ease;
}

.entry-popup__button:hover {
  color: #ffffff;
  text-decoration: none;

  transform: translateY(-2px);
  filter: brightness(1.05);

  box-shadow:
    0 21px 46px rgba(255, 107, 0, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.34);
}

/* Нижняя строка */
.entry-popup__note {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;

  gap: 10px;

  margin-top: 25px;

  color: rgba(255, 255, 255, 0.68);

  font-size: 16px;
  line-height: 1.4;
  text-align: center;
}

/* Живые оранжевые точки */
.entry-popup__note i {
  display: inline-block;

  width: 6px;
  height: 6px;

  border-radius: 50%;

  background: #ff8a26;

  box-shadow:
    0 0 12px rgba(255, 138, 38, 0.92);

  animation:
    entryNotePulse 1.45s ease-in-out infinite;
}

.entry-popup__note i:nth-of-type(2) {
  animation-delay: 0.45s;
}

/* Запрещаем прокрутку страницы под открытым окном */
body.entry-popup-open {
  overflow: hidden;
}

/* Анимация точек */
@keyframes entryNotePulse {
  0%,
  100% {
    transform: scale(0.85);
    opacity: 0.45;
  }

  50% {
    transform: scale(1.65);
    opacity: 1;
  }
}

/* Медленное движение внутреннего свечения */
@keyframes popupGlowMove {
  0% {
    transform: translate(-12px, -8px) scale(1);
    opacity: 0.84;
  }

  25% {
    transform: translate(10px, -4px) scale(1.04);
    opacity: 1;
  }

  50% {
    transform: translate(17px, 10px) scale(1.08);
    opacity: 0.91;
  }

  75% {
    transform: translate(-6px, 14px) scale(1.03);
    opacity: 1;
  }

  100% {
    transform: translate(-18px, 6px) scale(1.1);
    opacity: 0.87;
  }
}

/* =========================================================
   ПЛАНШЕТ
   ========================================================= */

@media (max-width: 900px) {
  .entry-popup__card {
    max-width: 760px;
    padding: 40px 42px 32px;
  }

  .entry-popup h2 {
    max-width: 670px;
    font-size: 39px;
  }
}

/* =========================================================
   ТЕЛЕФОН
   ========================================================= */

@media (max-width: 620px) {
  .entry-popup {
    align-items: flex-start;

    padding: 14px;

    overflow-y: auto;
  }

  .entry-popup__card {
    max-width: 100%;

    margin: auto 0;

    padding: 32px 22px 25px;

    border-radius: 24px;
  }

  .entry-popup__close {
    top: 13px;
    right: 13px;

    width: 38px;
    height: 38px;

    font-size: 25px;
  }

  .entry-popup__badge {
    margin-bottom: 17px;
    padding: 7px 12px;

    font-size: 12px;
  }

  .entry-popup h2 {
    max-width: calc(100% - 15px);
    margin-bottom: 17px;

    font-size: 31px;
    line-height: 1.08;
  }

  .entry-popup__text,
  .entry-popup__result {
    font-size: 15px;
    line-height: 1.48;
  }

  .entry-popup__text {
    margin-bottom: 14px;
  }

  .entry-popup__result {
    margin: 19px 0 21px;
  }

  .entry-popup__button {
    min-height: 58px;

    padding: 14px 16px;

    border-radius: 16px;

    font-size: 16px;
  }

  .entry-popup__note {
    gap: 7px;

    margin-top: 21px;

    font-size: 13px;
  }
}

/* Очень узкие экраны */
@media (max-width: 390px) {
  .entry-popup h2 {
    font-size: 27px;
  }

  .entry-popup__note {
    font-size: 12px;
  }
}

/* ==========================================================
   Блик по главной фразе — слева направо
   ========================================================== */

   .entry-popup__shine {
    display: inline;

    font-weight: 700;
    color: transparent;

    background-image: linear-gradient(
        110deg,
        #ffffff 0%,
        #ffffff 42%,
        #ffd9b2 47%,
        #ff9b3d 50%,
        #ffd9b2 53%,
        #ffffff 58%,
        #ffffff 100%
    );

    background-size: 260% 100%;
    background-position: 130% 0;

    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;

    animation: entryTextShineLeftToRight 4s ease-in-out infinite;
    animation-delay: 1s;
}

@keyframes entryTextShineLeftToRight {

    0%,
    12% {
        background-position: 130% 0;
    }

    34% {
        background-position: -130% 0;
    }

    35%,
    100% {
        background-position: 130% 0;
    }
}

/* ==========================================================
Стрелка локатора
   ========================================================== */
  /* =========================================================
   TEST — АНИМАЦИЯ СТРЕЛКИ ЛОКАТОРА
========================================================= */

.audience-flow__needle-wrap {
  animation: audienceNeedleTest 8s infinite !important;
}



/* =========================================================
   СТРЕЛКА ЛОКАТОРА
========================================================= */

.audience-flow__needle-wrap {
  position: absolute;

  top: 50%;
  left: 50%;
  z-index: 3;

  width: 2px;
  height: 58px;

  transform-origin: center bottom;

  transform:
      translate(-50%, -100%)
      rotate(-45deg);

  transition: transform 0.6s ease;

  /* Стрелкой управляет JavaScript */
  animation: none !important;
}

/* =========================================================
   ИМПУЛЬС ЦЕНТРАЛЬНОЙ ТОЧКИ ЛОКАТОРА
========================================================= */

.audience-flow__core::after {
  content: "";

  position: absolute;
  top: 50%;
  left: 50%;

  width: 28px;
  height: 28px;

  border-radius: 50%;
  background: rgba(255, 106, 0, 0.22);

  transform: translate(-50%, -50%) scale(1);
  opacity: 0;

  pointer-events: none;
}

.audience-flow__core.is-pulse::after {
  animation: audienceCorePulse 1.1s ease-out;
}

@keyframes audienceCorePulse {

  0% {
      transform: translate(-50%, -50%) scale(1);
      opacity: 0.55;
  }

  100% {
      transform: translate(-50%, -50%) scale(2.8);
      opacity: 0;
  }
}

/* =========================================================
   ШИРОКАЯ КНОПКА «ПОЛУЧИТЬ БЕСПЛАТНО» В ПЕРВОМ ЭКРАНЕ
========================================================= */

.hero__actions {
  width: 100%;
}

.hero__actions .hero__btn--primary {
  box-sizing: border-box;

  width: 100%;
  max-width: none;
  min-height: 78px;
  padding: 13px 24px;

  flex-direction: column;
  gap: 8px;

  border: 2px solid var(--color-orange);
  border-radius: 8px;

  text-align: center;
}

.hero__actions .hero__btn--primary strong {
  color: var(--color-white);
  font-size: 21px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.04em;
}

.hero__actions .hero__btn--primary small {
  color: rgba(255, 255, 255, 0.86);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.03em;
}

.hero__actions .hero__btn--primary:hover small {
  color: var(--color-white);
}



/* Планшеты */
@media (max-width: 900px) {
  .hero__points {
    grid-template-columns: max-content max-content;
  }
}

/* Телефоны */
@media (max-width: 560px) {
  .hero__points {
    grid-template-columns: 1fr;
    gap: 13px;
  }

  .hero__points li {
    white-space: normal;
  }
}

/* =========================================================
   НОВЫЙ ПЕРВЫЙ ЭКРАН — АВТОПИЛОТ
========================================================= */

.ap-intro,
.ap-intro * {
  box-sizing: border-box;
}

.ap-intro {
  position: relative;
  min-height: calc(100svh - 90px);
  padding: 92px 24px 112px;

  display: flex;
  align-items: center;
  justify-content: center;

  overflow: hidden;
  isolation: isolate;

  background:
    linear-gradient(
      180deg,
      #f1f5f7 0%,
      #ebf1f4 52%,
      #e3ecef 100%
    );
}


/* =========================================================
   ПРОЗРАЧНАЯ СТАЛЬНАЯ ПОВЕРХНОСТЬ
========================================================= */

.ap-intro__steel {
  position: absolute;
  inset: 0;
  z-index: 1;

  pointer-events: none;

  background:
    linear-gradient(
      112deg,
      rgba(255, 255, 255, 0.15) 0%,
      rgba(255, 255, 255, 0.025) 29%,
      rgba(66, 94, 108, 0.045) 51%,
      rgba(255, 255, 255, 0.08) 73%,
      rgba(58, 84, 97, 0.04) 100%
    ),
    linear-gradient(
      180deg,
      rgba(70, 96, 109, 0.04) 0%,
      rgba(255, 255, 255, 0.025) 45%,
      rgba(57, 82, 95, 0.065) 100%
    );

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.52),
    inset 0 -1px 0 rgba(41, 69, 82, 0.11);
}


/* =========================================================
   ПОЛЕ АНИМИРОВАННЫХ ЛИНИЙ
========================================================= */

.ap-line-scene {
  position: absolute;
  top: 7%;
  right: 6%;
  bottom: 7%;
  left: 6%;
  z-index: 2;

  overflow: hidden;
  pointer-events: none;
}

.ap-line {
  position: absolute;
  display: block;

  background: rgba(34, 72, 88, 0.68);

  box-shadow:
    0 0 1px rgba(14, 46, 60, 0.46),
    0 0 9px rgba(47, 102, 123, 0.18),
    0 1px 0 rgba(255, 255, 255, 0.28);

  opacity: 0;
  will-change: transform, opacity;
}


/* =========================================================
   ГОРИЗОНТАЛЬНЫЕ ЛИНИИ
========================================================= */

.ap-line--horizontal {
  left: 0;
  width: 100%;
  height: 1px;

  transform: scaleX(0);
  animation: apLineHorizontal 10s ease-in-out infinite;
}

.ap-line--h1 {
  top: 18%;
  transform-origin: left center;
  animation-delay: 0s;
}

.ap-line--h2 {
  top: 39%;
  transform-origin: right center;
  animation-delay: 0.18s;
}

.ap-line--h3 {
  top: 61%;
  transform-origin: left center;
  animation-delay: 0.36s;
}

.ap-line--h4 {
  top: 82%;
  transform-origin: right center;
  animation-delay: 0.54s;
}


/* =========================================================
   ВЕРТИКАЛЬНЫЕ ЛИНИИ
========================================================= */

.ap-line--vertical {
  top: 0;
  width: 1px;
  height: 100%;

  transform: scaleY(0);
  animation: apLineVertical 10s ease-in-out infinite;
}

.ap-line--v1 {
  left: 18%;
  transform-origin: center top;
  animation-delay: 0.9s;
}

.ap-line--v2 {
  left: 39%;
  transform-origin: center bottom;
  animation-delay: 1.08s;
}

.ap-line--v3 {
  left: 61%;
  transform-origin: center top;
  animation-delay: 1.26s;
}

.ap-line--v4 {
  left: 82%;
  transform-origin: center bottom;
  animation-delay: 1.44s;
}


/* =========================================================
   АНИМАЦИЯ ПОСТРОЕНИЯ
========================================================= */

@keyframes apLineHorizontal {
  0%,
  5% {
    opacity: 0;
    transform: scaleX(0);
  }

  18% {
    opacity: 0.88;
    transform: scaleX(1);
  }

  68% {
    opacity: 0.58;
    transform: scaleX(1);
  }

  84%,
  100% {
    opacity: 0;
    transform: scaleX(1);
  }
}

@keyframes apLineVertical {
  0%,
  5% {
    opacity: 0;
    transform: scaleY(0);
  }

  18% {
    opacity: 0.82;
    transform: scaleY(1);
  }

  68% {
    opacity: 0.54;
    transform: scaleY(1);
  }

  84%,
  100% {
    opacity: 0;
    transform: scaleY(1);
  }
}


/* =========================================================
   ПОЯВЛЕНИЕ СОДЕРЖАНИЯ ПОСЛЕ ПОСТРОЕНИЯ СЕТКИ
========================================================= */

/* 1. Верхняя надпись */
.ap-intro__kicker {
  animation:
    apIntroTextReveal
    0.58s
    cubic-bezier(0.22, 1, 0.36, 1)
    3.00s
    both;
}

/* 2. Главный заголовок */
.ap-intro__title {
  animation:
    apIntroTextReveal
    0.65s
    cubic-bezier(0.22, 1, 0.36, 1)
    3.26s
    both;
}

/* 3. Подзаголовок */
.ap-intro__subtitle {
  animation:
    apIntroTextReveal
    0.62s
    cubic-bezier(0.22, 1, 0.36, 1)
    3.48s
    both;
}

/* 4. Кнопка */
.ap-intro__button {
  animation:
    apIntroFadeReveal
    0.58s
    ease
    3.72s
    both;
}

/* 5. Пояснения под кнопкой */
.ap-intro__trust {
  animation:
    apIntroFadeReveal
    0.58s
    ease
    3.92s
    both;
}


@keyframes apIntroTextReveal {
  from {
    opacity: 0;
    transform: translateY(18px);
    filter: blur(4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}


@keyframes apIntroFadeReveal {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}


/* =========================================================
   СОДЕРЖАНИЕ ПЕРВОГО ЭКРАНА
========================================================= */

.ap-intro__inner {
  position: relative;
  z-index: 3;

  width: 100%;
  max-width: 1500px;
  margin: 0 auto;

  text-align: center;
  transform: translateY(-12px);
}


/* =========================================================
   НАДПИСЬ НАД ЗАГОЛОВКОМ
========================================================= */

.ap-intro__kicker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;

  margin-bottom: 45px;
}

.ap-intro__kicker-line {
  width: 3px;
  height: 25px;
  flex: 0 0 3px;

  border-radius: 999px;
  background: #ff6a00;

  box-shadow:
    0 0 14px rgba(255, 106, 0, 0.22);
}

.ap-intro__kicker-text {
  color: #355c68;

  font-size: 17px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.35px;
  text-transform: uppercase;
}


/* =========================================================
   ГЛАВНЫЙ ЗАГОЛОВОК
========================================================= */

.ap-intro__title {
  margin: 0;

  color: #063742;

  font-family:
    var(--font-heading, "Roboto Condensed"),
    Arial,
    sans-serif;

    font-size: clamp(74px, 6.65vw, 128px);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -3px;

  text-wrap: balance;

  text-shadow:
    0 2px 0 rgba(255, 255, 255, 0.55),
    0 12px 30px rgba(8, 53, 64, 0.08);
}


/* =========================================================
   ПОДЗАГОЛОВОК
========================================================= */

.ap-intro__subtitle {
  max-width: 1600px;
  margin: 37px auto 0;

  color: #496f7a;

  font-size: clamp(15px, 1.4vw, 24px);
  font-weight: 600;
  line-height: 1.28;
  letter-spacing: -0.2px;

  text-wrap: balance;
}


/* =========================================================
   ОСНОВНАЯ КНОПКА
========================================================= */

.ap-intro .ap-intro__button.hero__btn--primary {
  position: relative;

  width: min(100%, 620px);
  min-height: 82px;
  margin: 52px auto 0;
  padding: 18px 34px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  overflow: hidden;
  cursor: pointer;

  border: 1px solid rgba(255, 118, 24, 0.8);
  border-radius: 9px;

  color: #ffffff;
  background:
    linear-gradient(
      180deg,
      #ff7b21 0%,
      #ff6500 100%
    );

  font-size: 25px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: 0.2px;
  text-align: center;
  text-decoration: none;

  box-shadow:
    0 15px 34px rgba(255, 106, 0, 0.23),
    0 4px 12px rgba(255, 106, 0, 0.17),
    inset 0 1px 0 rgba(255, 255, 255, 0.32);

  transition:
    transform 0.25s ease,
    border-color 0.25s ease,
    background-color 0.25s ease,
    box-shadow 0.25s ease;
}

.ap-intro .ap-intro__button.hero__btn--primary::before {
  content: "";

  position: absolute;
  top: -55%;
  left: -23%;

  width: 42%;
  height: 210%;

  pointer-events: none;

  background:
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.20) 50%,
      rgba(255, 255, 255, 0) 100%
    );

  opacity: 0.65;
  transform: rotate(18deg);
}

.ap-intro .ap-intro__button.hero__btn--primary:hover {
  transform: translateY(-3px);

  border-color: rgba(255, 106, 0, 0.96);

  background:
    linear-gradient(
      180deg,
      #ff872f 0%,
      #ff6a00 100%
    );

  box-shadow:
    0 19px 40px rgba(255, 106, 0, 0.29),
    0 6px 15px rgba(255, 106, 0, 0.19),
    inset 0 1px 0 rgba(255, 255, 255, 0.36);
}

.ap-intro .ap-intro__button.hero__btn--primary:active {
  transform: translateY(0);
}

.ap-intro .ap-intro__button.hero__btn--primary:focus-visible {
  outline: 4px solid rgba(255, 106, 0, 0.28);
  outline-offset: 5px;
}


/* =========================================================
   ТЕКСТ ПОД КНОПКОЙ
========================================================= */

.ap-intro__trust {
  max-width: 880px;
  margin: 22px auto 0;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;

  text-align: center;
}

.ap-intro__trust-main {
  color: #3e6570;

  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.15px;
}

.ap-intro__trust-secondary {
  color: #68858e;

  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.1px;
}


/* =========================================================
   АДАПТИВ
========================================================= */

@media (max-width: 1100px) {
  .ap-intro {
    padding-top: 82px;
    padding-bottom: 96px;
  }

  .ap-intro__title {
    font-size: clamp(62px, 8.5vw, 92px);
    letter-spacing: -2.4px;
  }

  .ap-intro__subtitle {
    max-width: 900px;
  }
}


@media (max-width: 768px) {
  .ap-intro {
    min-height: auto;
    padding: 70px 18px 82px;
  }

  .ap-intro__inner {
    transform: none;
  }

  .ap-intro__kicker {
    gap: 10px;
    margin-bottom: 25px;
  }

  .ap-intro__kicker-line {
    width: 3px;
    height: 24px;
    flex-basis: 3px;
  }

  .ap-intro__kicker-text {
    font-size: 15px;
  }

  .ap-intro__title {
    font-size: clamp(50px, 11vw, 72px);
    line-height: 1.02;
    letter-spacing: -1.8px;
  }

  .ap-intro__subtitle {
    margin-top: 22px;
    font-size: clamp(20px, 4.8vw, 28px);
  }

  .ap-intro .ap-intro__button.hero__btn--primary {
    width: 100%;
    min-height: 72px;
    margin-top: 40px;
    padding: 16px 22px;

    font-size: 22px;
  }

  .ap-intro__trust {
    margin-top: 19px;
  }

  .ap-intro__trust-main {
    font-size: 15px;
  }

  .ap-intro__trust-secondary {
    font-size: 14px;
  }

  .ap-line-scene {
    top: 5%;
    right: 4%;
    bottom: 5%;
    left: 4%;
  }

  .ap-line--h4,
  .ap-line--v4 {
    display: none;
  }
}


@media (max-width: 480px) {
  .ap-intro {
    padding: 58px 16px 68px;
  }

  .ap-intro__kicker-text {
    font-size: 13px;
    letter-spacing: 0.25px;
  }

  .ap-intro__title {
    font-size: clamp(43px, 13vw, 58px);
    letter-spacing: -1.2px;
  }

  .ap-intro__subtitle {
    font-size: 20px;
  }

  .ap-intro .ap-intro__button.hero__btn--primary {
    min-height: 68px;
    margin-top: 34px;
    font-size: 20px;
  }
}


/* =========================================================
   ОТКЛЮЧЕНИЕ АНИМАЦИИ ПО СИСТЕМНОЙ НАСТРОЙКЕ
========================================================= */

@media (prefers-reduced-motion: reduce) {
  .ap-line {
    animation: none !important;
    opacity: 0.20;
  }

  .ap-line--horizontal {
    transform: scaleX(1);
  }

  .ap-line--vertical {
    transform: scaleY(1);
  }
}

/* =========================================================
   ПЯТЫЙ ЭКРАН — ПРИМЕР ГОТОВОЙ ПУБЛИКАЦИИ
========================================================= */

.demo-post,
.demo-post * {
  box-sizing: border-box;
}

.demo-post {
  position: relative;
  padding: 72px 0 66px;
  overflow: hidden;
  color: #ffffff;
  background:
    radial-gradient(
      circle at 7% 12%,
      rgba(255, 106, 0, 0.10),
      transparent 29%
    ),
    radial-gradient(
      circle at 93% 88%,
      rgba(29, 119, 139, 0.18),
      transparent 34%
    ),
    #062d38;
}

.demo-post::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: min(1400px, calc(100% - 48px));
  height: 1px;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.07);
}

.demo-post__container {
  position: relative;
  z-index: 1;
  width: min(1400px, calc(100% - 48px));
  margin-inline: auto;
}

/* =========================================================
   ЗАГОЛОВОК
========================================================= */

.demo-post__header {
  max-width: 900px;
  margin: 0 auto 30px;
  text-align: center;
}

.demo-post__kicker {
  margin-bottom: 12px;
  color: var(--color-orange, #ff6a00);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 1.1px;
  text-transform: uppercase;
}

.demo-post__title {
  margin: 0 0 17px;
  color: #ffffff;
  font-family: "Oswald", Arial, sans-serif;
  font-size: clamp(42px, 3.7vw, 58px);
  font-weight: 500;
  line-height: 1.08;
}

.demo-post__subtitle {
  max-width: 850px;
  margin: 0 auto;
  color: #bed2d8;
  font-size: 18px;
  line-height: 1.55;
}

/* =========================================================
   ПЕРЕКЛЮЧАТЕЛИ
========================================================= */

.demo-post__tabs {
  width: fit-content;
  margin: 0 auto 24px;
  padding: 5px;
  display: flex;
  align-items: center;
  gap: 5px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.045);
}

.demo-post__tab {
  min-width: 145px;
  min-height: 42px;
  padding: 10px 22px;
  border: 0;
  border-radius: 999px;
  color: #afc7cd;
  background: transparent;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition:
    color 0.25s ease,
    background-color 0.25s ease,
    box-shadow 0.25s ease;
}

.demo-post__tab:hover {
  color: #ffffff;
}

.demo-post__tab.is-active {
  color: #ffffff;
  background: var(--color-orange, #ff6a00);
  box-shadow: 0 8px 22px rgba(255, 106, 0, 0.24);
}

/* =========================================================
   ОБЩАЯ РАБОЧАЯ ПАНЕЛЬ
========================================================= */

.demo-post__workspace {
  display: grid;
  grid-template-columns:
    minmax(360px, 0.84fr)
    minmax(560px, 1.16fr);
  gap: 20px;
  align-items: stretch;
}

.demo-post__source,
.demo-post__result {
  padding: 25px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 22px;
  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.075),
      rgba(255, 255, 255, 0.028)
    );
  box-shadow: 0 22px 55px rgba(0, 0, 0, 0.17);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.demo-post__panel-head,
.demo-post__result-head {
  min-height: 51px;
  margin-bottom: 19px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.demo-post__panel-label {
  display: block;
  margin-bottom: 5px;
  color: #789da6;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.85px;
  text-transform: uppercase;
}

.demo-post__panel-title {
  margin: 0;
  color: #ffffff;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.25;
}

/* =========================================================
   ЛЕВАЯ ПАНЕЛЬ
========================================================= */

.demo-post__source-status,
.demo-post__ready {
  min-height: 31px;
  padding: 7px 11px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  border: 1px solid rgba(99, 210, 171, 0.2);
  border-radius: 999px;
  color: #91ddc1;
  background: rgba(62, 185, 141, 0.09);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.demo-post__company {
  margin-bottom: 18px;
  padding: 15px;
  display: flex;
  align-items: center;
  gap: 13px;
  border: 1px solid rgba(255, 106, 0, 0.16);
  border-radius: 14px;
  background: rgba(255, 106, 0, 0.07);
}

.demo-post__company-icon,
.vk-preview__avatar {
  width: 45px;
  height: 45px;
  display: grid;
  place-items: center;
  flex: 0 0 45px;
  border-radius: 12px;
  color: #ffffff;
  background:
    linear-gradient(145deg, #ff7b1d, #e95300);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.3px;
  box-shadow: 0 8px 20px rgba(255, 106, 0, 0.19);
}

.demo-post__company-name {
  margin-bottom: 3px;
  color: #ffffff;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.25;
}

.demo-post__company-type {
  color: #a6c0c7;
  font-size: 13px;
  line-height: 1.35;
}

.demo-post__facts {
  margin: 0;
  padding: 0;
  display: grid;
  gap: 9px;
  list-style: none;
}

.demo-post__fact {
  min-height: 65px;
  padding: 11px 13px;
  display: grid;
  grid-template-columns: 29px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  border: 1px solid rgba(255, 255, 255, 0.065);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.028);
}

.demo-post__fact-icon {
  width: 29px;
  height: 29px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #ffb17a;
  background: rgba(255, 106, 0, 0.12);
  font-size: 13px;
  font-weight: 800;
}

.demo-post__fact-label {
  display: block;
  margin-bottom: 3px;
  color: #789da6;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.55px;
  text-transform: uppercase;
}

.demo-post__fact strong {
  display: block;
  color: #d9e7ea;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.38;
}

.demo-post__analysis {
  margin-top: 13px;
  padding: 12px 14px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border-radius: 12px;
  background: rgba(19, 124, 145, 0.13);
}

.demo-post__analysis-dot {
  width: 8px;
  height: 8px;
  margin-top: 6px;
  flex: 0 0 8px;
  border-radius: 50%;
  background: #48bcd0;
  box-shadow: 0 0 0 5px rgba(72, 188, 208, 0.1);
}

.demo-post__analysis p {
  margin: 0;
  color: #a9c7ce;
  font-size: 12.5px;
  line-height: 1.45;
}

/* =========================================================
   ПРАВАЯ ПАНЕЛЬ
========================================================= */

.demo-post__ready-dot {
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  border-radius: 50%;
  background: #54d2a5;
  box-shadow: 0 0 0 5px rgba(84, 210, 165, 0.1);
}

.vk-preview {
  max-width: 690px;
  margin-inline: auto;
  overflow: hidden;
  border-radius: 16px;
  color: #17212b;
  background: #ffffff;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.23);
}

.vk-preview__head {
  padding: 15px 17px 11px;
  display: flex;
  align-items: center;
  gap: 11px;
}

.vk-preview__avatar {
  width: 41px;
  height: 41px;
  flex-basis: 41px;
  border-radius: 50%;
  font-size: 12px;
}

.vk-preview__identity {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.vk-preview__identity strong {
  color: #1d2a35;
  font-size: 14px;
  line-height: 1.25;
}

.vk-preview__identity span {
  margin-top: 2px;
  color: #818c99;
  font-size: 11px;
  line-height: 1.25;
}

.vk-preview__menu {
  margin-left: auto;
  color: #99a2ad;
  font-size: 16px;
  letter-spacing: 2px;
}

.vk-preview__body {
  padding: 0 17px 13px;
}

.vk-preview__title {
  margin: 0 0 7px;
  color: #17212b;
  font-size: 17px;
  font-weight: 750;
  line-height: 1.3;
}

.vk-preview__text {
  margin: 0 0 12px;
  color: #303b45;
  font-size: 12.5px;
  line-height: 1.44;
}

.vk-preview__image {
  width: 100%;

  display: block;
  object-fit: cover;
  border-radius: 10px 10px 0 0;
  background: #dce4e7;
}

.vk-preview__link {
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  border: 1px solid #e3e8ec;
  border-top: 0;
  border-radius: 0 0 10px 10px;
  color: inherit;
  text-decoration: none;
  pointer-events: none;
}

.vk-preview__link-domain {
  margin-bottom: 4px;
  color: #818c99;
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.45px;
  text-transform: uppercase;
}

.vk-preview__link strong {
  margin-bottom: 3px;
  color: #214d77;
  font-size: 12.5px;
  line-height: 1.3;
}

.vk-preview__link > span:last-child {
  color: #7c8792;
  font-size: 10.5px;
  line-height: 1.35;
}

.vk-preview__footer {
  min-height: 41px;
  padding: 10px 17px;
  display: flex;
  align-items: center;
  gap: 22px;
  border-top: 1px solid #e9edf0;
  color: #687785;
  font-size: 10.5px;
  font-weight: 600;
}

/* =========================================================
   НИЖНЯЯ ЧАСТЬ
========================================================= */

.demo-post__bottom {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.demo-post__note {
  max-width: 760px;
  margin: 0 0 16px;
  color: #a9c3ca;
  font-size: 14px;
  line-height: 1.5;
}

.demo-post__button {
  min-width: 330px;
  min-height: 52px;
  padding: 14px 27px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #ff7a1a;
  border-radius: 11px;
  color: #ffffff;
  background:
    linear-gradient(135deg, #ff7a1a, #f05a00);
  box-shadow: 0 13px 30px rgba(255, 106, 0, 0.22);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.2;
  text-decoration: none;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.demo-post__button:hover {
  transform: translateY(-2px);
  box-shadow: 0 17px 34px rgba(255, 106, 0, 0.29);
}

.demo-post__button-note {
  margin-top: 8px;
  color: #789da6;
  font-size: 11px;
  line-height: 1.2;
}

/* =========================================================
   АНИМАЦИЯ СМЕНЫ ПРИМЕРА
========================================================= */

.demo-post__workspace.is-changing {
  animation: demoPostChange 0.38s ease;
}

@keyframes demoPostChange {
  0% {
    opacity: 0.55;
    transform: translateY(5px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* =========================================================
   НЕВЫСОКИЕ МОНИТОРЫ
========================================================= */

@media (min-width: 1101px) and (max-height: 950px) {
  .demo-post {
    padding-top: 40px;
    padding-bottom: 38px;
  }

  .demo-post__header {
    margin-bottom: 21px;
  }

  .demo-post__title {
    margin-bottom: 12px;
    font-size: clamp(40px, 3.4vw, 53px);
  }

  .demo-post__subtitle {
    font-size: 17px;
    line-height: 1.48;
  }

  .demo-post__tabs {
    margin-bottom: 18px;
  }

  .demo-post__source,
  .demo-post__result {
    padding: 20px;
  }

  .demo-post__panel-head,
  .demo-post__result-head {
    min-height: 44px;
    margin-bottom: 14px;
  }

  .demo-post__company {
    margin-bottom: 12px;
    padding: 12px;
  }

  .demo-post__facts {
    gap: 7px;
  }

  .demo-post__fact {
    min-height: 56px;
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .demo-post__analysis {
    margin-top: 10px;
    padding-block: 9px;
  }

  

  .demo-post__bottom {
    margin-top: 17px;
  }

  .demo-post__note {
    margin-bottom: 12px;
  }

  .demo-post__button {
    min-height: 48px;
  }
}

/* =========================================================
   СРЕДНИЕ ЭКРАНЫ
========================================================= */

@media (max-width: 1200px) {
  .demo-post__workspace {
    grid-template-columns:
      minmax(330px, 0.78fr)
      minmax(520px, 1.22fr);
  }

  .demo-post__source,
  .demo-post__result {
    padding: 20px;
  }

  .demo-post__fact strong {
    font-size: 12.5px;
  }
}

/* =========================================================
   ПЛАНШЕТЫ
========================================================= */

@media (max-width: 1100px) {
  .demo-post {
    padding: 64px 0;
  }

  .demo-post__container {
    width: min(820px, calc(100% - 40px));
  }

  .demo-post__workspace {
    grid-template-columns: 1fr;
  }

  .vk-preview {
    max-width: 700px;
  }

  .vk-preview__image {
    height: auto;
    aspect-ratio: 16 / 7;
  }
}

/* =========================================================
   МОБИЛЬНЫЕ ЭКРАНЫ
========================================================= */

@media (max-width: 700px) {
  .demo-post {
    padding: 52px 0;
  }

  .demo-post__container {
    width: min(100% - 28px, 620px);
  }

  .demo-post__header {
    margin-bottom: 24px;
    text-align: left;
  }

  .demo-post__title {
    font-size: clamp(38px, 10vw, 49px);
  }

  .demo-post__subtitle {
    font-size: 16px;
  }

  .demo-post__tabs {
    width: 100%;
  }

  .demo-post__tab {
    min-width: 0;
    min-height: 40px;
    padding-inline: 10px;
    flex: 1;
    font-size: 12px;
  }

  .demo-post__source,
  .demo-post__result {
    padding: 17px;
    border-radius: 18px;
  }

  .demo-post__panel-head,
  .demo-post__result-head {
    flex-direction: column;
  }

  .vk-preview__footer {
    gap: 13px;
    overflow: hidden;
    white-space: nowrap;
  }

  .demo-post__button {
    width: 100%;
    min-width: 0;
  }
}

@media (max-width: 450px) {
  .demo-post__tab {
    font-size: 11px;
  }

  .demo-post__company {
    align-items: flex-start;
  }

  .demo-post__fact {
    align-items: flex-start;
  }

  .vk-preview__body {
    padding-inline: 13px;
  }

  .vk-preview__head,
  .vk-preview__footer {
    padding-inline: 13px;
  }

  .vk-preview__image {
    aspect-ratio: 4 / 3;
  }
}

/* =========================================================
   ОТКЛЮЧЕНИЕ АНИМАЦИЙ
========================================================= */

@media (prefers-reduced-motion: reduce) {
  .demo-post__workspace.is-changing {
    animation: none;
  }

  .demo-post__tab,
  .demo-post__button {
    transition: none;
  }
}

/* =========================================================
   КОМПАКТНЫЙ ВАРИАНТ ПРИМЕРА ПУБЛИКАЦИИ
========================================================= */

/* Обе панели больше не растягивают друг друга по высоте */
.demo-post__workspace {
  align-items: stretch;
}

/* Правая панель становится примерно на 12% компактнее */
.demo-post__result {
  width: 88%;
  justify-self: center;
}

/* Ограничиваем высоту изображения */
.vk-preview__image {
  width: 100%;
  height: 250px;
  aspect-ratio: auto;
  object-fit: cover;
  object-position: center;
}

/* Немного сокращаем белую область карточки */
.vk-preview__body {
  padding-bottom: 10px;
}

.vk-preview__link {
  padding-top: 8px;
  padding-bottom: 8px;
}

.vk-preview__footer {
  min-height: 36px;
  padding-top: 8px;
  padding-bottom: 8px;
}

/* На планшетах снова используем полную ширину */
@media (max-width: 1100px) {
  .demo-post__result {
    width: 100%;
  }

  .vk-preview__image {
    height: auto;
    aspect-ratio: 1200 / 630;
  }
}

/* =========================================================
   ВЫРАВНИВАНИЕ ЛЕВОЙ И ПРАВОЙ ПАНЕЛЕЙ ПО ВЫСОТЕ
========================================================= */

.demo-post__source {
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* Распределяем четыре пункта по свободной высоте */
.demo-post__facts {
  flex: 1;
  display: grid;
  grid-template-rows: repeat(4, minmax(68px, 1fr));
  gap: 11px;
}

.demo-post__fact {
  min-height: 68px;
  padding: 13px 15px;
}

/* Немного увеличиваем основной текст слева */
.demo-post__fact strong {
  font-size: 14px;
  line-height: 1.45;
}

/* Нижнее пояснение остаётся у нижней границы */
.demo-post__analysis {
  margin-top: 14px;
  padding: 14px 16px;
}

.demo-post__analysis p {
  font-size: 13.5px;
  line-height: 1.5;
}

/* =========================================================
   ШЕСТОЙ ЭКРАН
   АВТОПИЛОТ РАБОТАЕТ — КОНТРОЛЬ ОСТАЁТСЯ У ВАС
========================================================= */

.work-share,
.work-share * {
  box-sizing: border-box;
}

.work-share {
  position: relative;
  min-height: calc(100svh - 88px);
  padding: 54px 0 45px;
  overflow: hidden;
  color: #18343c;
  background:
    radial-gradient(
      circle at 3% 4%,
      rgba(255, 106, 0, 0.07),
      transparent 25%
    ),
    radial-gradient(
      circle at 96% 96%,
      rgba(6, 45, 56, 0.07),
      transparent 28%
    ),
    #f2f4f4;
}

.work-share::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: min(1400px, calc(100% - 48px));
  height: 1px;
  transform: translateX(-50%);
  background: rgba(6, 45, 56, 0.1);
}

.work-share__container {
  position: relative;
  z-index: 1;
  width: min(1400px, calc(100% - 48px));
  margin-inline: auto;
}

/* =========================================================
   ЗАГОЛОВОК
========================================================= */

.work-share__header {
  max-width: 930px;
  margin: 0 auto 29px;
  text-align: center;
}

.work-share__kicker {
  margin-bottom: 10px;
  color: var(--color-orange, #ff6a00);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: 1.1px;
  text-transform: uppercase;
}

.work-share__title {
  margin: 0 0 14px;
  color: #082f3a;
  font-family: "Oswald", Arial, sans-serif;
  font-size: clamp(41px, 3.25vw, 55px);
  font-weight: 500;
  line-height: 1.05;
}

.work-share__title span {
  color: var(--color-orange, #ff6a00);
}

.work-share__subtitle {
  max-width: 850px;
  margin: 0 auto;
  color: #5e767d;
  font-size: 17px;
  line-height: 1.5;
}

/* =========================================================
   ОСНОВНАЯ СЕТКА
========================================================= */

.work-share__main {
  display: grid;
  grid-template-columns:
    minmax(380px, 0.86fr)
    62px
    minmax(540px, 1.14fr);
  align-items: stretch;
  gap: 17px;
}

.work-share__setup,
.work-share__automatic {
  position: relative;
  padding: 24px;
  border: 1px solid rgba(6, 45, 56, 0.1);
  border-radius: 20px;
  background: #ffffff;
  box-shadow:
    0 17px 44px rgba(24, 52, 60, 0.08),
    0 2px 6px rgba(24, 52, 60, 0.03);
}

.work-share__automatic {
  border-color: rgba(255, 106, 0, 0.21);
  box-shadow:
    0 19px 48px rgba(24, 52, 60, 0.1),
    0 0 0 4px rgba(255, 106, 0, 0.025);
}

.work-share__card-head {
  min-height: 52px;
  margin-bottom: 18px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 15px;
}

.work-share__card-label {
  display: block;
  margin-bottom: 5px;
  color: #83969b;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

.work-share__card-title {
  margin: 0;
  color: #113942;
  font-size: 21px;
  font-weight: 750;
  line-height: 1.25;
}

/* =========================================================
   ЛЕВАЯ КАРТОЧКА
========================================================= */

.work-share__setup {
  display: flex;
  flex-direction: column;
}

.work-share__time {
  min-width: 76px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 11px;
  color: #ffffff;
  background: #082f3a;
}

.work-share__time strong {
  font-family: "Oswald", Arial, sans-serif;
  font-size: 21px;
  font-weight: 500;
  line-height: 1;
}

.work-share__time span {
  margin-top: 3px;
  color: #aec4ca;
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
}

.work-share__steps {
  position: relative;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
  list-style: none;
}

.work-share__steps::before {
  content: "";
  position: absolute;
  top: 25px;
  bottom: 25px;
  left: 21px;
  width: 1px;
  background: rgba(255, 106, 0, 0.2);
}

.work-share__step {
  position: relative;
  min-height: 70px;
  padding: 10px 12px 10px 57px;
  display: flex;
  align-items: center;
  border: 1px solid rgba(6, 45, 56, 0.075);
  border-radius: 12px;
  background: #f8f9f9;
}

.work-share__step-number {
  position: absolute;
  left: 9px;
  top: 50%;
  z-index: 1;
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  transform: translateY(-50%);
  border: 1px solid rgba(255, 106, 0, 0.25);
  border-radius: 50%;
  color: #f06400;
  background: #ffffff;
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
}

.work-share__step strong {
  display: block;
  margin-bottom: 3px;
  color: #193e46;
  font-size: 13.5px;
  font-weight: 750;
  line-height: 1.25;
}

.work-share__step p {
  margin: 0;
  color: #698087;
  font-size: 11.5px;
  line-height: 1.4;
}

.work-share__setup-note {
  margin-top: auto;
  padding: 12px 14px;
  border-left: 3px solid var(--color-orange, #ff6a00);
  border-radius: 0 9px 9px 0;
  color: #536d74;
  background: rgba(255, 106, 0, 0.055);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.4;
}

/* =========================================================
   ПЕРЕХОД МЕЖДУ КАРТОЧКАМИ
========================================================= */

.work-share__transfer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.work-share__transfer > span {
  width: 1px;
  height: 74px;
  display: block;
  background:
    linear-gradient(
      to bottom,
      transparent,
      rgba(6, 45, 56, 0.15),
      transparent
    );
}

.work-share__transfer-arrow {
  width: 42px;
  height: 42px;
  margin: 10px 0;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 106, 0, 0.22);
  border-radius: 50%;
  color: #ffffff;
  background: var(--color-orange, #ff6a00);
  box-shadow: 0 9px 22px rgba(255, 106, 0, 0.2);
  font-size: 20px;
  line-height: 1;
}

/* =========================================================
   ПРАВАЯ КАРТОЧКА
========================================================= */

.work-share__active-status {
  min-height: 30px;
  padding: 7px 11px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  border: 1px solid rgba(36, 165, 119, 0.18);
  border-radius: 999px;
  color: #138457;
  background: rgba(36, 165, 119, 0.07);
  font-size: 10px;
  font-weight: 750;
  line-height: 1;
  white-space: nowrap;
}

.work-share__active-status span {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 50%;
  background: #28a874;
  box-shadow: 0 0 0 4px rgba(40, 168, 116, 0.1);
}

.work-share__schedule {
  margin-bottom: 13px;
  padding: 15px 16px;
  border: 1px solid rgba(6, 45, 56, 0.08);
  border-radius: 13px;
  background: #f6f8f8;
}

.work-share__schedule-head {
  margin-bottom: 12px;
  padding-bottom: 11px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  border-bottom: 1px solid rgba(6, 45, 56, 0.08);
}

.work-share__schedule-head > div:first-child {
  display: flex;
  flex-direction: column;
}

.work-share__schedule-head span {
  color: #82959a;
  font-size: 9px;
  font-weight: 750;
  line-height: 1;
  letter-spacing: 0.45px;
  text-transform: uppercase;
}

.work-share__schedule-head strong {
  margin-top: 4px;
  color: #173b43;
  font-size: 15px;
  line-height: 1;
}

.work-share__schedule-total {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.work-share__schedule-total strong {
  margin: 0;
  color: var(--color-orange, #ff6a00);
  font-family: "Oswald", Arial, sans-serif;
  font-size: 25px;
  font-weight: 500;
}

.work-share__schedule-total span {
  color: #627a81;
  font-size: 9px;
}

.work-share__weeks {
  display: grid;
  gap: 7px;
}

.work-share__week {
  min-height: 31px;
  padding: 6px 8px;
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) 55px;
  align-items: center;
  gap: 10px;
  border-radius: 8px;
  background: #ffffff;
}

.work-share__week-name {
  color: #576f76;
  font-size: 10px;
  font-weight: 700;
}

.work-share__week-line {
  display: flex;
  align-items: center;
  gap: 7px;
}

.work-share__week-line i {
  width: 8px;
  height: 8px;
  display: block;
  flex: 0 0 8px;
  border-radius: 50%;
  background: #d8e0e2;
}

.work-share__week-line i.is-ready {
  background: #255966;
}

.work-share__week-line i.is-active {
  background: var(--color-orange, #ff6a00);
  box-shadow: 0 0 0 4px rgba(255, 106, 0, 0.12);
}

.work-share__week-result {
  color: #8a9ca1;
  font-size: 9px;
  font-weight: 750;
  text-align: right;
}

.work-share__week-result.is-current {
  color: #ed6504;
}

.work-share__tasks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.work-share__task {
  min-height: 50px;
  padding: 9px 10px;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  border: 1px solid rgba(6, 45, 56, 0.075);
  border-radius: 10px;
}

.work-share__task:nth-child(5) {
  grid-column: 1 / -1;
}

.work-share__task > span {
  position: relative;
  width: 20px;
  height: 20px;
  display: block;
  border-radius: 50%;
  background: rgba(255, 106, 0, 0.09);
}

.work-share__task > span::after {
  content: "";
  position: absolute;
  top: 5px;
  left: 7px;
  width: 5px;
  height: 8px;
  transform: rotate(45deg);
  border-right: 2px solid #f06400;
  border-bottom: 2px solid #f06400;
}

.work-share__task p {
  margin: 0;
  color: #526b72;
  font-size: 11px;
  font-weight: 650;
  line-height: 1.35;
}

.work-share__control {
  margin-top: 11px;
  padding: 10px 12px;
  display: grid;
  grid-template-columns: 41px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  border-radius: 10px;
  color: #dbe8eb;
  background: #082f3a;
}

.work-share__control-line {
  position: relative;
  width: 41px;
  height: 20px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
}

.work-share__control-line span {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 14px;
  height: 14px;
  display: block;
  border-radius: 50%;
  background: var(--color-orange, #ff6a00);
}

.work-share__control p {
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
}

/* =========================================================
   НИЖНЯЯ ПОЛОСА
========================================================= */

.work-share__bottom {
  margin-top: 19px;
  padding: 15px 18px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
  border: 1px solid rgba(6, 45, 56, 0.1);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.75);
  box-shadow: 0 12px 30px rgba(24, 52, 60, 0.055);
}

.work-share__facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.work-share__fact {
  min-height: 45px;
  padding: 0 21px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-right: 1px solid rgba(6, 45, 56, 0.1);
}

.work-share__fact:first-child {
  padding-left: 0;
}

.work-share__fact:last-child {
  border-right: 0;
}

.work-share__fact strong {
  margin-bottom: 3px;
  color: #113942;
  font-size: 17px;
  line-height: 1.2;
}

.work-share__fact span {
  color: #74898f;
  font-size: 10.5px;
  line-height: 1.3;
}

.work-share__action {
  min-width: 315px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.work-share__button {
  width: 100%;
  min-height: 47px;
  padding: 12px 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #ff7b1c;
  border-radius: 10px;
  color: #ffffff;
  background:
    linear-gradient(135deg, #ff7b1c, #ed5b00);
  box-shadow: 0 11px 24px rgba(255, 106, 0, 0.2);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.2;
  text-decoration: none;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.work-share__button:hover {
  transform: translateY(-2px);
  box-shadow: 0 15px 29px rgba(255, 106, 0, 0.27);
}

.work-share__button-note {
  margin-top: 6px;
  color: #7c9095;
  font-size: 9.5px;
  line-height: 1.2;
}

/* =========================================================
   НЕВЫСОКИЕ МОНИТОРЫ
========================================================= */

@media (min-width: 1101px) and (max-height: 900px) {
  .work-share {
    padding-top: 32px;
    padding-bottom: 30px;
  }

  .work-share__header {
    margin-bottom: 21px;
  }

  .work-share__title {
    margin-bottom: 10px;
    font-size: clamp(39px, 3vw, 50px);
  }

  .work-share__subtitle {
    font-size: 16px;
  }

  .work-share__setup,
  .work-share__automatic {
    padding: 19px;
  }

  .work-share__card-head {
    margin-bottom: 13px;
  }

  .work-share__step {
    min-height: 62px;
    padding-top: 7px;
    padding-bottom: 7px;
  }

  .work-share__schedule {
    padding: 12px 14px;
  }

  .work-share__task {
    min-height: 43px;
    padding-top: 7px;
    padding-bottom: 7px;
  }

  .work-share__bottom {
    margin-top: 14px;
    padding-top: 11px;
    padding-bottom: 11px;
  }
}

/* =========================================================
   СРЕДНИЕ ЭКРАНЫ
========================================================= */

@media (max-width: 1220px) {
  .work-share__main {
    grid-template-columns:
      minmax(350px, 0.9fr)
      48px
      minmax(500px, 1.1fr);
    gap: 12px;
  }

  .work-share__transfer-arrow {
    width: 38px;
    height: 38px;
  }

  .work-share__setup,
  .work-share__automatic {
    padding: 19px;
  }
}

/* =========================================================
   ПЛАНШЕТЫ
========================================================= */

@media (max-width: 1100px) {
  .work-share {
    min-height: auto;
    padding: 64px 0;
  }

  .work-share__container {
    width: min(820px, calc(100% - 40px));
  }

  .work-share__main {
    grid-template-columns: 1fr;
  }

  .work-share__transfer {
    min-height: 64px;
    flex-direction: row;
  }

  .work-share__transfer > span {
    width: 74px;
    height: 1px;
    background:
      linear-gradient(
        to right,
        transparent,
        rgba(6, 45, 56, 0.15),
        transparent
      );
  }

  .work-share__transfer-arrow {
    margin: 0 10px;
    transform: rotate(90deg);
  }

  .work-share__bottom {
    grid-template-columns: 1fr;
  }

  .work-share__action {
    width: min(100%, 390px);
    margin-inline: auto;
  }
}

/* =========================================================
   МОБИЛЬНЫЕ ЭКРАНЫ
========================================================= */

@media (max-width: 700px) {
  .work-share {
    padding: 52px 0;
  }

  .work-share__container {
    width: min(100% - 28px, 620px);
  }

  .work-share__header {
    text-align: left;
  }

  .work-share__title {
    font-size: clamp(38px, 10vw, 48px);
  }

  .work-share__subtitle {
    font-size: 16px;
  }

  .work-share__setup,
  .work-share__automatic {
    padding: 17px;
    border-radius: 17px;
  }

  .work-share__card-head {
    flex-direction: column;
  }

  .work-share__time,
  .work-share__active-status {
    align-self: flex-start;
  }

  .work-share__week {
    grid-template-columns: 57px minmax(0, 1fr);
  }

  .work-share__week-result {
    display: none;
  }

  .work-share__week-line {
    gap: 5px;
  }

  .work-share__tasks {
    grid-template-columns: 1fr;
  }

  .work-share__task:nth-child(5) {
    grid-column: auto;
  }

  .work-share__facts {
    grid-template-columns: 1fr;
  }

  .work-share__fact {
    min-height: 0;
    padding: 12px 0;
    border-right: 0;
    border-bottom: 1px solid rgba(6, 45, 56, 0.1);
  }

  .work-share__fact:last-child {
    border-bottom: 0;
  }

  .work-share__action {
    min-width: 0;
  }
}

/* =========================================================
   ОТКЛЮЧЕНИЕ АНИМАЦИЙ
========================================================= */

@media (prefers-reduced-motion: reduce) {
  .work-share__button {
    transition: none;
  }
}

/* =========================================================
   СЕДЬМОЙ ЭКРАН
   ОДИН ПОНЯТНЫЙ ТАРИФ
========================================================= */

.pricing-simple,
.pricing-simple * {
  box-sizing: border-box;
}

.pricing-simple {
  position: relative;
  min-height: calc(100svh - 88px);
  padding: 48px 0 42px;
  overflow: hidden;
  color: #ffffff;
  background:
    radial-gradient(
      circle at 8% 5%,
      rgba(255, 106, 0, 0.09),
      transparent 27%
    ),
    radial-gradient(
      circle at 90% 92%,
      rgba(39, 132, 151, 0.15),
      transparent 30%
    ),
    #062d38;
}

.pricing-simple::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: min(1400px, calc(100% - 48px));
  height: 1px;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.08);
}

.pricing-simple__container {
  position: relative;
  z-index: 1;
  width: min(1400px, calc(100% - 48px));
  margin-inline: auto;
}

/* =========================================================
   ЗАГОЛОВОК
========================================================= */

.pricing-simple__header {
  max-width: 940px;
  margin: 0 auto 30px;
  text-align: center;
}

.pricing-simple__kicker {
  margin-bottom: 10px;
  color: var(--color-orange, #ff6a00);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: 1.1px;
  text-transform: uppercase;
}

.pricing-simple__title {
  margin: 0 0 15px;
  color: #ffffff;
  font-family: "Oswald", Arial, sans-serif;
  font-size: clamp(36px, 3.05vw, 49px);
  font-weight: 500;
  line-height: 1.06;
}

.pricing-simple__title span {
  display: block;
  color: #ffffff;
}

.pricing-simple__subtitle {
  max-width: 850px;
  margin: 0 auto;
  color: #b9cfd5;
  font-size: 17px;
  line-height: 1.52;
}

/* =========================================================
   СЕТКА ТАРИФОВ
========================================================= */

.pricing-simple__grid {
  display: grid;
  grid-template-columns:
    minmax(330px, 0.72fr)
    minmax(670px, 1.28fr);
  align-items: stretch;
  gap: 22px;
}

.pricing-simple__trial,
.pricing-simple__main {
  position: relative;
  min-width: 0;
  border-radius: 21px;
}

.pricing-simple__trial {
  padding: 27px;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.07),
      rgba(255, 255, 255, 0.025)
    );
  box-shadow: 0 22px 48px rgba(0, 0, 0, 0.17);
}

.pricing-simple__main {
  padding: 28px 30px 26px;
  border: 1px solid rgba(255, 106, 0, 0.32);
  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(255, 106, 0, 0.09),
      transparent 31%
    ),
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.095),
      rgba(255, 255, 255, 0.035)
    );
  box-shadow:
    0 26px 60px rgba(0, 0, 0, 0.23),
    0 0 0 4px rgba(255, 106, 0, 0.025);
}

/* =========================================================
   ОБЩИЕ ЭЛЕМЕНТЫ КАРТОЧЕК
========================================================= */

.pricing-simple__eyebrow {
  display: block;
  margin-bottom: 7px;
  color: #7fa3ac;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

.pricing-simple__card-title {
  margin: 0 0 8px;
  color: #ffffff;
  font-size: 24px;
  font-weight: 750;
  line-height: 1.2;
}

.pricing-simple__card-description {
  max-width: 570px;
  margin: 0;
  color: #a9c2c8;
  font-size: 13px;
  line-height: 1.48;
}

/* =========================================================
   ПРОБНЫЙ ЗАПУСК
========================================================= */

.pricing-simple__trial-top {
  margin-bottom: 19px;
}

.pricing-simple__price {
  min-height: 76px;
  margin-bottom: 21px;
  padding: 13px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.035);
}

.pricing-simple__price > strong {
  color: #ffffff;
  font-family: "Oswald", Arial, sans-serif;
  font-size: 55px;
  font-weight: 500;
  line-height: 0.9;
}

.pricing-simple__price > div {
  display: flex;
  flex-direction: column;
}

.pricing-simple__price span {
  color: var(--color-orange, #ff6a00);
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
}

.pricing-simple__price small {
  margin-top: 5px;
  color: #88a6ae;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
}

.pricing-simple__list {
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
  list-style: none;
}

.pricing-simple__list li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  color: #d4e2e5;
  font-size: 13px;
  line-height: 1.35;
}

.pricing-simple__list li > span {
  position: relative;
  width: 22px;
  height: 22px;
  display: block;
  border-radius: 50%;
  background: rgba(255, 106, 0, 0.11);
}

.pricing-simple__list li > span::after {
  content: "";
  position: absolute;
  top: 5px;
  left: 8px;
  width: 5px;
  height: 8px;
  transform: rotate(45deg);
  border-right: 2px solid #ff8b39;
  border-bottom: 2px solid #ff8b39;
}

.pricing-simple__trial-action {
  margin-top: auto;
  padding-top: 25px;
}

.pricing-simple__action-note {
  margin: 9px 0 0;
  color: #819fa7;
  font-size: 10.5px;
  line-height: 1.35;
  text-align: center;
}

/* =========================================================
   ОСНОВНОЙ ТАРИФ
========================================================= */

.pricing-simple__main-label {
  position: absolute;
  top: -14px;
  right: 28px;
  min-height: 28px;
  padding: 7px 14px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  color: #ffffff;
  background: var(--color-orange, #ff6a00);
  box-shadow: 0 8px 22px rgba(255, 106, 0, 0.22);
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.pricing-simple__main-top {
  margin-bottom: 22px;
  padding-bottom: 20px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 25px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}

.pricing-simple__main-price {
  min-width: 175px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.pricing-simple__main-price > div {
  display: flex;
  align-items: flex-start;
}

.pricing-simple__main-price strong {
  color: #ffffff;
  font-family: "Oswald", Arial, sans-serif;
  font-size: 49px;
  font-weight: 500;
  line-height: 0.9;
}

.pricing-simple__main-price span {
  margin: 3px 0 0 6px;
  color: var(--color-orange, #ff6a00);
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
}

.pricing-simple__main-price small {
  margin-top: 8px;
  color: #88a6ae;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
}

.pricing-simple__features {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 17px;
}

.pricing-simple__feature-column {
  padding: 17px;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.03);
}

.pricing-simple__feature-column h4 {
  margin: 0 0 13px;
  color: #ffffff;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.2;
}

.pricing-simple__feature-column .pricing-simple__list {
  gap: 11px;
}

.pricing-simple__feature-column .pricing-simple__list li {
  align-items: flex-start;
}

.pricing-simple__feature-column .pricing-simple__list li > span {
  margin-top: 1px;
}

.pricing-simple__feature-column strong {
  display: block;
  margin-bottom: 2px;
  color: #e8f0f2;
  font-size: 12.5px;
  line-height: 1.3;
}

.pricing-simple__feature-column small {
  display: block;
  color: #87a2a9;
  font-size: 10px;
  line-height: 1.35;
}

.pricing-simple__main-bottom {
  margin-top: 18px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 290px;
  align-items: center;
  gap: 19px;
}

.pricing-simple__payment {
  min-height: 55px;
  padding: 11px 13px;
  display: grid;
  grid-template-columns: 31px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  border-radius: 11px;
  background: rgba(16, 135, 106, 0.09);
}

.pricing-simple__payment-mark {
  position: relative;
  width: 31px;
  height: 31px;
  display: block;
  border: 1px solid rgba(65, 204, 157, 0.22);
  border-radius: 50%;
  background: rgba(65, 204, 157, 0.08);
}

.pricing-simple__payment-mark::after {
  content: "";
  position: absolute;
  top: 7px;
  left: 11px;
  width: 7px;
  height: 11px;
  transform: rotate(45deg);
  border-right: 2px solid #56d2a7;
  border-bottom: 2px solid #56d2a7;
}

.pricing-simple__payment p {
  margin: 0;
  color: #acd0c4;
  font-size: 11px;
  line-height: 1.42;
}

.pricing-simple__main-action {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.pricing-simple__main-action > span {
  margin-top: 7px;
  color: #819fa7;
  font-size: 9.5px;
  line-height: 1.25;
}

/* =========================================================
   КНОПКИ
========================================================= */

.pricing-simple__button {
  width: 100%;
  min-height: 49px;
  padding: 13px 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.2;
  text-decoration: none;
  transition:
    transform 0.25s ease,
    border-color 0.25s ease,
    background-color 0.25s ease,
    box-shadow 0.25s ease;
}

.pricing-simple__button--trial {
  border: 1px solid rgba(255, 106, 0, 0.52);
  color: #ffffff;
  background: rgba(255, 106, 0, 0.075);
}

.pricing-simple__button--trial:hover {
  transform: translateY(-2px);
  border-color: #ff7b1b;
  background: rgba(255, 106, 0, 0.13);
}

.pricing-simple__button--main {
  border: 1px solid #ff7b1b;
  color: #ffffff;
  background:
    linear-gradient(
      135deg,
      #ff7b1b,
      #ee5c00
    );
  box-shadow: 0 12px 27px rgba(255, 106, 0, 0.22);
}

.pricing-simple__button--main:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 32px rgba(255, 106, 0, 0.29);
}

/* =========================================================
   НИЖНЯЯ ПОЛОСА
========================================================= */

.pricing-simple__assurance {
  margin-top: 20px;
  min-height: 56px;
  padding: 11px 16px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 14px;
  color: #a4bdc3;
  background: rgba(255, 255, 255, 0.027);
  font-size: 11.5px;
  font-weight: 650;
  line-height: 1.35;
  text-align: center;
}

.pricing-simple__assurance div {
  min-height: 31px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.pricing-simple__assurance div:last-child {
  border-right: 0;
}

/* =========================================================
   НЕВЫСОКИЕ МОНИТОРЫ
========================================================= */

@media (min-width: 1101px) and (max-height: 900px) {
  .pricing-simple {
    padding-top: 30px;
    padding-bottom: 28px;
  }

  .pricing-simple__header {
    margin-bottom: 22px;
  }

  .pricing-simple__title {
    margin-bottom: 10px;
    font-size: clamp(40px, 3.2vw, 52px);
  }

  .pricing-simple__subtitle {
    font-size: 16px;
  }

  .pricing-simple__trial {
    padding: 21px;
  }

  .pricing-simple__main {
    padding: 22px 24px 21px;
  }

  .pricing-simple__price {
    min-height: 65px;
    margin-bottom: 16px;
  }

  .pricing-simple__price > strong {
    font-size: 48px;
  }

  .pricing-simple__main-top {
    margin-bottom: 16px;
    padding-bottom: 15px;
  }

  .pricing-simple__feature-column {
    padding: 13px;
  }

  .pricing-simple__feature-column .pricing-simple__list {
    gap: 8px;
  }

  .pricing-simple__main-bottom {
    margin-top: 13px;
  }

  .pricing-simple__assurance {
    margin-top: 14px;
    min-height: 49px;
  }
}

/* =========================================================
   СРЕДНИЕ ЭКРАНЫ
========================================================= */

@media (max-width: 1200px) {
  .pricing-simple__grid {
    grid-template-columns:
      minmax(310px, 0.75fr)
      minmax(590px, 1.25fr);
  }

  .pricing-simple__main {
    padding-inline: 23px;
  }

  .pricing-simple__main-bottom {
    grid-template-columns: 1fr;
  }

  .pricing-simple__main-action {
    width: min(100%, 360px);
    margin-inline: auto;
  }
}

/* =========================================================
   ПЛАНШЕТЫ
========================================================= */

@media (max-width: 1100px) {
  .pricing-simple {
    min-height: auto;
    padding: 64px 0;
  }

  .pricing-simple__container {
    width: min(820px, calc(100% - 40px));
  }

  .pricing-simple__grid {
    grid-template-columns: 1fr;
  }

  .pricing-simple__trial,
  .pricing-simple__main {
    padding: 26px;
  }

  .pricing-simple__trial-action {
    margin-top: 25px;
  }

  .pricing-simple__assurance {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pricing-simple__assurance div:nth-child(2) {
    border-right: 0;
  }

  .pricing-simple__assurance div:nth-child(-n + 2) {
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  .pricing-simple__assurance div:nth-child(n + 3) {
    padding-top: 10px;
  }
}

/* =========================================================
   МОБИЛЬНЫЕ ЭКРАНЫ
========================================================= */

@media (max-width: 700px) {
  .pricing-simple {
    padding: 52px 0;
  }

  .pricing-simple__container {
    width: min(100% - 28px, 620px);
  }

  .pricing-simple__header {
    text-align: left;
  }

  .pricing-simple__title {
    font-size: clamp(38px, 10vw, 49px);
  }

  .pricing-simple__subtitle {
    font-size: 16px;
  }

  .pricing-simple__trial,
  .pricing-simple__main {
    padding: 20px;
    border-radius: 18px;
  }

  .pricing-simple__main-label {
    right: 18px;
  }

  .pricing-simple__main-top {
    grid-template-columns: 1fr;
  }

  .pricing-simple__main-price {
    align-items: flex-start;
  }

  .pricing-simple__features {
    grid-template-columns: 1fr;
  }

  .pricing-simple__assurance {
    grid-template-columns: 1fr;
  }

  .pricing-simple__assurance div {
    min-height: 43px;
    padding: 9px 5px;
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  .pricing-simple__assurance div:nth-child(-n + 2),
  .pricing-simple__assurance div:nth-child(n + 3) {
    padding: 9px 5px;
  }

  .pricing-simple__assurance div:last-child {
    border-bottom: 0;
  }
}

/* =========================================================
   ОТКЛЮЧЕНИЕ АНИМАЦИЙ
========================================================= */

@media (prefers-reduced-motion: reduce) {
  .pricing-simple__button {
    transition: none;
  }
}

/* =========================================================
   ДОПОЛНИТЕЛЬНЫЕ ПАКЕТЫ ССЫЛОК
========================================================= */

.pricing-simple__links {
  margin-top: 13px;
  padding: 12px 14px;
  display: grid;
  grid-template-columns:
    minmax(190px, 0.8fr)
    minmax(240px, 1.2fr)
    auto;
  align-items: center;
  gap: 15px;
  border: 1px solid rgba(255, 106, 0, 0.18);
  border-radius: 11px;
  background: rgba(255, 106, 0, 0.055);
}

.pricing-simple__links-title {
  display: flex;
  flex-direction: column;
}

.pricing-simple__links-title span {
  margin-bottom: 4px;
  color: #ff9a52;
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.7px;
  text-transform: uppercase;
}

.pricing-simple__links-title strong {
  color: #ffffff;
  font-size: 12px;
  line-height: 1.3;
}

.pricing-simple__links > p {
  margin: 0;
  color: #9fb9c0;
  font-size: 10.5px;
  line-height: 1.4;
}

.pricing-simple__links-options {
  display: flex;
  align-items: center;
  gap: 7px;
}

.pricing-simple__links-options > span {
  min-width: 92px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 8px;
  color: #8daab1;
  background: rgba(255, 255, 255, 0.035);
  font-size: 9px;
  line-height: 1.2;
  white-space: nowrap;
}

.pricing-simple__links-options strong {
  margin-bottom: 2px;
  color: #ffffff;
  font-size: 11px;
}

@media (max-width: 700px) {
  .pricing-simple__links {
    grid-template-columns: 1fr;
  }

  .pricing-simple__links-options {
    width: 100%;
  }

  .pricing-simple__links-options > span {
    flex: 1;
  }
}

/* =========================================================
   ВОСЬМОЙ ЭКРАН
   ВОПРОСЫ ПЕРЕД ЗАПУСКОМ
========================================================= */

.product-faq,
.product-faq * {
  box-sizing: border-box;
}

.product-faq {
  position: relative;
  min-height: calc(100svh - 88px);
  padding: 58px 0 50px;
  overflow: hidden;
  color: #173840;
  background:
    radial-gradient(
      circle at 4% 3%,
      rgba(255, 106, 0, 0.065),
      transparent 26%
    ),
    radial-gradient(
      circle at 96% 96%,
      rgba(6, 45, 56, 0.055),
      transparent 29%
    ),
    #f2f4f4;
}

.product-faq::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: min(1400px, calc(100% - 48px));
  height: 1px;
  transform: translateX(-50%);
  background: rgba(6, 45, 56, 0.1);
}

.product-faq__container {
  position: relative;
  z-index: 1;
  width: min(1400px, calc(100% - 48px));
  margin-inline: auto;
}

/* =========================================================
   ЗАГОЛОВОК
========================================================= */

.product-faq__header {
  max-width: 860px;
  margin: 0 auto 31px;
  text-align: center;
}

.product-faq__kicker {
  margin-bottom: 10px;
  color: var(--color-orange, #ff6a00);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: 1.05px;
  text-transform: uppercase;
}

.product-faq__title {
  margin: 0 0 14px;
  color: #082f3a;
  font-family: "Oswald", Arial, sans-serif;
  font-size: clamp(39px, 3.15vw, 51px);
  font-weight: 500;
  line-height: 1.08;
}

.product-faq__subtitle {
  margin: 0 auto;
  color: #60787f;
  font-size: 17px;
  line-height: 1.5;
}

/* =========================================================
   СЕТКА
========================================================= */

.product-faq__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 18px;
}

.product-faq__column {
  display: grid;
  gap: 10px;
}

/* =========================================================
   ВОПРОС
========================================================= */

.product-faq__item {
  overflow: hidden;
  border: 1px solid rgba(6, 45, 56, 0.1);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 8px 24px rgba(24, 52, 60, 0.045);
  transition:
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    background-color 0.25s ease;
}

.product-faq__item[open] {
  border-color: rgba(255, 106, 0, 0.25);
  background: #ffffff;
  box-shadow: 0 13px 30px rgba(24, 52, 60, 0.075);
}

.product-faq__question {
  position: relative;
  min-height: 62px;
  padding: 13px 56px 13px 16px;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.product-faq__question::-webkit-details-marker {
  display: none;
}

.product-faq__number {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 106, 0, 0.2);
  border-radius: 50%;
  color: #ed6504;
  background: rgba(255, 106, 0, 0.055);
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
}

.product-faq__question-text {
  color: #173b43;
  font-size: 14px;
  font-weight: 750;
  line-height: 1.35;
}

.product-faq__toggle {
  position: absolute;
  top: 50%;
  right: 18px;
  width: 20px;
  height: 20px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: #edf1f1;
}

.product-faq__toggle::before,
.product-faq__toggle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: #597178;
  transform: translate(-50%, -50%);
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}

.product-faq__toggle::before {
  width: 9px;
  height: 1.5px;
}

.product-faq__toggle::after {
  width: 1.5px;
  height: 9px;
}

.product-faq__item[open] .product-faq__toggle {
  background: rgba(255, 106, 0, 0.1);
}

.product-faq__item[open] .product-faq__toggle::before,
.product-faq__item[open] .product-faq__toggle::after {
  background: #ed6504;
}

.product-faq__item[open] .product-faq__toggle::after {
  opacity: 0;
  transform:
    translate(-50%, -50%)
    rotate(90deg);
}

/* =========================================================
   ОТВЕТ
========================================================= */

.product-faq__answer {
  margin: 0 18px 0 60px;
  padding: 0 0 17px;
  color: #637b82;
  font-size: 12.5px;
  line-height: 1.55;
}

.product-faq__answer p {
  margin: 0;
}

.product-faq__answer p + p {
  margin-top: 8px;
}

/* =========================================================
   ПАКЕТЫ ССЫЛОК ВНУТРИ FAQ
========================================================= */

.product-faq__item--links[open] {
  border-color: rgba(255, 106, 0, 0.32);
}

.product-faq__link-plans {
  margin-top: 13px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.product-faq__link-plan {
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(6, 45, 56, 0.09);
  border-radius: 9px;
  background: #f5f7f7;
}

.product-faq__link-plan > span {
  margin-bottom: 4px;
  color: #8a9da2;
  font-size: 8px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

.product-faq__link-plan strong {
  margin-bottom: 3px;
  color: #173b43;
  font-size: 12px;
  line-height: 1.2;
}

.product-faq__link-plan b {
  color: #ed6504;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
}

.product-faq__link-plan--accent {
  border-color: rgba(255, 106, 0, 0.24);
  background: rgba(255, 106, 0, 0.055);
}

/* =========================================================
   НИЖНИЙ БЛОК
========================================================= */

.product-faq__bottom {
  margin-top: 22px;
  padding: 17px 19px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 325px;
  align-items: center;
  gap: 25px;
  border: 1px solid rgba(6, 45, 56, 0.1);
  border-radius: 15px;
  background: #ffffff;
  box-shadow: 0 12px 30px rgba(24, 52, 60, 0.06);
}

.product-faq__bottom-text {
  display: flex;
  flex-direction: column;
}

.product-faq__bottom-text strong {
  margin-bottom: 4px;
  color: #123841;
  font-size: 16px;
  line-height: 1.25;
}

.product-faq__bottom-text span {
  color: #71878d;
  font-size: 12px;
  line-height: 1.4;
}

.product-faq__button {
  width: 100%;
  min-height: 48px;
  padding: 13px 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #ff7b1b;
  border-radius: 10px;
  color: #ffffff;
  background:
    linear-gradient(
      135deg,
      #ff7b1b,
      #ee5c00
    );
  box-shadow: 0 11px 25px rgba(255, 106, 0, 0.2);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.2;
  text-decoration: none;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.product-faq__button:hover {
  transform: translateY(-2px);
  box-shadow: 0 15px 30px rgba(255, 106, 0, 0.27);
}

/* =========================================================
   НЕВЫСОКИЕ МОНИТОРЫ
========================================================= */

@media (min-width: 1101px) and (max-height: 900px) {
  .product-faq {
    padding-top: 34px;
    padding-bottom: 30px;
  }

  .product-faq__header {
    margin-bottom: 23px;
  }

  .product-faq__title {
    margin-bottom: 10px;
    font-size: clamp(36px, 2.8vw, 46px);
  }

  .product-faq__subtitle {
    font-size: 16px;
  }

  .product-faq__column {
    gap: 8px;
  }

  .product-faq__question {
    min-height: 56px;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .product-faq__answer {
    padding-bottom: 13px;
  }

  .product-faq__bottom {
    margin-top: 16px;
    padding-top: 13px;
    padding-bottom: 13px;
  }
}

/* =========================================================
   ПЛАНШЕТЫ
========================================================= */

@media (max-width: 900px) {
  .product-faq {
    min-height: auto;
    padding: 64px 0;
  }

  .product-faq__container {
    width: min(760px, calc(100% - 40px));
  }

  .product-faq__grid {
    grid-template-columns: 1fr;
  }

  .product-faq__bottom {
    grid-template-columns: 1fr;
  }

  .product-faq__button {
    width: min(100%, 380px);
  }
}

/* =========================================================
   МОБИЛЬНЫЕ ЭКРАНЫ
========================================================= */

@media (max-width: 600px) {
  .product-faq {
    padding: 52px 0;
  }

  .product-faq__container {
    width: min(100% - 28px, 560px);
  }

  .product-faq__header {
    text-align: left;
  }

  .product-faq__title {
    font-size: clamp(37px, 10vw, 47px);
  }

  .product-faq__subtitle {
    font-size: 16px;
  }

  .product-faq__question {
    min-height: 62px;
    padding-left: 13px;
    padding-right: 48px;
    grid-template-columns: 29px minmax(0, 1fr);
    gap: 10px;
  }

  .product-faq__number {
    width: 29px;
    height: 29px;
  }

  .product-faq__question-text {
    font-size: 13px;
  }

  .product-faq__toggle {
    right: 14px;
  }

  .product-faq__answer {
    margin-left: 52px;
    margin-right: 15px;
  }

  .product-faq__link-plans {
    grid-template-columns: 1fr;
  }

  .product-faq__bottom {
    padding: 17px;
  }

  .product-faq__button {
    width: 100%;
  }
}

/* =========================================================
   ОТКЛЮЧЕНИЕ АНИМАЦИЙ
========================================================= */

@media (prefers-reduced-motion: reduce) {
  .product-faq__item,
  .product-faq__toggle::before,
  .product-faq__toggle::after,
  .product-faq__button {
    transition: none;
  }
}

/* =========================================================
   КОМПАКТНАЯ НИЖНЯЯ ПОЛОСА FAQ
========================================================= */

.product-faq__bottom {
  margin-top: 22px;
  padding: 15px 19px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 325px;
  align-items: center;
  gap: 28px;
  border: 1px solid rgba(6, 45, 56, 0.1);
  border-radius: 15px;
  background: #ffffff;
  box-shadow: 0 12px 30px rgba(24, 52, 60, 0.06);
}

.product-faq__bottom-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.product-faq__bottom-text strong {
  margin-bottom: 5px;
  color: #123841;
  font-size: 16px;
  line-height: 1.2;
}

.product-faq__bottom-text span {
  color: #71878d;
  font-size: 12px;
  line-height: 1.4;
}

.product-faq__button--telegram {
  width: 100%;
  min-height: 48px;
  justify-self: end;
  border-color: #229ed9;
  background: linear-gradient(135deg, #229ed9, #168ac2);
  box-shadow: 0 11px 25px rgba(34, 158, 217, 0.2);
}

.product-faq__button--telegram:hover {
  box-shadow: 0 15px 30px rgba(34, 158, 217, 0.28);
}

@media (max-width: 700px) {
  .product-faq__bottom {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .product-faq__button--telegram {
    width: 100%;
  }
}

/* =========================================================
   (9 страница футер)
========================================================= */
.final-cta,
  .site-footer {
    --ink: #f6fbfc;
    --muted: #9eb0b5;
    --line: rgba(255, 255, 255, .09);
    --orange: #ff8a3d;
    --blue: #3977eb;
    font-family: inherit;
  }

  .final-cta {
    position: relative;
    overflow: hidden;
    padding: 88px 24px 82px;
    color: var(--ink);
    background: #071c23;
  }

  .final-cta__glow {
    position: absolute;
    width: 440px;
    height: 440px;
    border-radius: 50%;
    filter: blur(110px);
    opacity: .15;
    pointer-events: none;
  }

  .final-cta__glow--left {
    left: -220px;
    top: -180px;
    background: #ff8a3d;
  }

  .final-cta__glow--right {
    right: -220px;
    bottom: -210px;
    background: #3977eb;
  }

  .final-cta__container,
  .site-footer__container {
    position: relative;
    z-index: 1;
    width: min(1160px, 100%);
    margin: 0 auto;
  }

  .final-cta__container {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(330px, .65fr);
    align-items: center;
    gap: 74px;
  }

  .final-cta__eyebrow {
    display: inline-flex;
    margin-bottom: 19px;
    color: #ffad75;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
  }

  .final-cta__title {
    max-width: 760px;
    margin: 0;
    color: var(--ink);
    font-size: clamp(40px, 5vw, 68px);
    font-weight: 800;
    line-height: .98;
    letter-spacing: -.045em;
  }

  .final-cta__title span {
    color: #82aefc;
  }

  .final-cta__text {
    max-width: 650px;
    margin: 24px 0 30px;
    color: var(--muted);
    font-size: 18px;
    line-height: 1.6;
  }

  .final-cta__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    min-height: 56px;
    padding: 0 27px;
    border: 1px solid rgba(255, 138, 61, .82);
    border-radius: 12px;
    color: #fff;
    background: #2867da;
    box-shadow: 0 14px 34px rgba(26, 85, 190, .27);
    font-size: 16px;
    font-weight: 800;
    text-decoration: none;
    transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
  }

  .final-cta__button:hover {
    transform: translateY(-2px);
    background: #3475e9;
    box-shadow: 0 18px 39px rgba(26, 85, 190, .34);
  }

  .final-cta__note {
    margin: 12px 0 0;
    color: #758e95;
    font-size: 12px;
  }

  .final-cta__facts {
    border: 1px solid var(--line);
    border-radius: 20px;
    background: rgba(255, 255, 255, .035);
    box-shadow: 0 24px 70px rgba(0, 0, 0, .18);
    backdrop-filter: blur(8px);
  }

  .final-cta__fact {
    padding: 22px 25px;
  }

  .final-cta__fact + .final-cta__fact {
    border-top: 1px solid var(--line);
  }

  .final-cta__fact strong,
  .final-cta__fact span {
    display: block;
  }

  .final-cta__fact strong {
    margin-bottom: 6px;
    color: #edf7f8;
    font-size: 16px;
  }

  .final-cta__fact span {
    color: #82999f;
    font-size: 13px;
    line-height: 1.45;
  }

  .site-footer {
    padding: 52px 24px 24px;
    color: var(--muted);
    border-top: 1px solid var(--line);
    background: #05171d;
  }

  .site-footer__top {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 72px;
    padding-bottom: 38px;
  }

  .site-footer__logo {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    color: #f3f9fa;
    font-size: 18px;
    font-weight: 800;
    text-decoration: none;
  }

  .site-footer__logo-mark {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 11px;
    color: #fff;
    background: linear-gradient(135deg, #ff8a3d, #3977eb);
  }

  .site-footer__about p {
    max-width: 410px;
    margin: 17px 0 0;
    font-size: 14px;
    line-height: 1.65;
  }

  .site-footer__nav {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 46px;
  }

  .site-footer__column {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 11px;
  }

  .site-footer__column strong {
    margin-bottom: 4px;
    color: #eaf3f5;
    font-size: 13px;
  }

  .site-footer__column a,
  .site-footer__bottom a {
    color: #8fa3a9;
    font-size: 13px;
    text-decoration: none;
    transition: color .2s ease;
  }

  .site-footer__column a:hover,
  .site-footer__bottom a:hover {
    color: #fff;
  }

  .site-footer__materials {
    padding: 30px 0 34px;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }

  .site-footer__caption {
    margin: 0 0 15px;
    color: #647c83;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .11em;
    text-transform: uppercase;
  }

  .site-footer__article-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: min(560px, 100%);
    padding: 17px 19px;
    border: 1px solid rgba(255, 255, 255, .085);
    border-radius: 13px;
    color: #e8f1f3;
    background: rgba(255, 255, 255, .025);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.35;
    text-decoration: none;
    transition: border-color .2s ease, background .2s ease, transform .2s ease;
  }

  .site-footer__article-link:hover {
    transform: translateY(-2px);
    border-color: rgba(130, 174, 252, .35);
    background: rgba(255, 255, 255, .045);
  }

  .site-footer__article-link small {
    display: block;
    margin-bottom: 4px;
    color: #728991;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
  }

  .site-footer__article-link b {
    margin-left: 24px;
    color: #82aefc;
    font-size: 20px;
  }

  .site-footer__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    padding-top: 22px;
    color: #5e747a;
    font-size: 12px;
  }

  .site-footer__bottom div {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px 25px;
  }

  @media (max-width: 820px) {
    .final-cta {
      padding: 68px 20px 64px;
    }

    .final-cta__container {
      grid-template-columns: 1fr;
      gap: 38px;
    }

    .final-cta__facts {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
    }

    .final-cta__fact + .final-cta__fact {
      border-top: 0;
      border-left: 1px solid var(--line);
    }

    .site-footer__top {
      grid-template-columns: 1fr;
      gap: 36px;
    }
  }

  @media (max-width: 600px) {
    .final-cta__title {
      font-size: 39px;
    }

    .final-cta__text {
      font-size: 16px;
    }

    .final-cta__button {
      width: 100%;
    }

    .final-cta__facts {
      grid-template-columns: 1fr;
    }

    .final-cta__fact + .final-cta__fact {
      border-top: 1px solid var(--line);
      border-left: 0;
    }

    .site-footer__nav {
      grid-template-columns: 1fr 1fr;
      gap: 24px;
    }

    .site-footer__bottom {
      align-items: flex-start;
      flex-direction: column;
    }

    .site-footer__bottom div {
      justify-content: flex-start;
    }
  }