/*
 * Черновая index-new намеренно использует композицию и визуальный язык
 * действующей главной из index-new.css. В этом файле остаются только
 * preview-specific дополнения: исходный логотип и новые смысловые блоки про
 * совместную работу. Так обсуждение позиционирования не меняет общий landing
 * fallback внутри index.html.
 */

/*
 * Фирменный знак показываем исходным чёрным PNG на прозрачном фоне.
 * filter, mask и currentColor здесь запрещены: цвет является частью файла,
 * поэтому браузер не может перекрасить логотип вместе с текстовой ссылкой.
 */
.landing-home__brand {
  gap: 0.6rem;
}

.landing-home__brand-mark {
  display: block;
  flex: 0 0 auto;
  inline-size: 30px;
  block-size: 30px;
  object-fit: contain;
}

/* В product-mosaic сохраняем фирменные синие icon tiles текущей главной, но
   ставим их в одну строку с названием. Карточки остаются узнаваемыми и при этом
   не превращаются в повторяющийся шаблон «иконка над заголовком» семь раз. */
.landing-home__advantage-card-title--with-icon {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.95rem;
  align-items: center;
}

/* У текущей главной часть пояснений использует слишком светлый text-soft.
   В preview поднимаем только эти пользовательские строки до text-muted:
   на белой и soft surface этот token проходит WCAG AA для обычного текста. */
.landing-home__support-note,
.landing-home__advantages-lead,
.landing-home__pricing-lead,
.landing-home__faq-lead,
.landing-home__pricing-note {
  color: var(--text-muted);
}

/* В hero muted-текст лежит прямо на синем radial-gradient, а не на белой
   surface. Слегка смешиваем его с основным текстом, чтобы lead и бесплатный
   лимит сохраняли secondary-роль, но не опускались ниже AA на самом тёмном
   участке фона. Остальные muted-строки на белых карточках не меняем. */
.landing-home__hero-copy .landing-home__lead,
.landing-home__hero-copy .landing-home__support-note {
  color: color-mix(in oklch, var(--text-muted) 88%, var(--text-main));
}

/* На desktop четыре смысловых шага hero должны читаться раздельно: оффер,
   пояснение, действия и бесплатный лимит. Базовый gap текущей главной слишком
   плотный для нового трёхстрочного заголовка, поэтому расширяем только
   preview-колонку и не меняем общий index-new.css действующего fallback. */
@media (min-width: 992px) {
  .landing-home__hero-copy {
    gap: 1.5rem;
  }

  /* Три строки крупного оффера получают небольшой ink-clearance: при 1.02
     нижние глифы выходили за line box на 2px, хотя визуально не обрезались. */
  .landing-home__title {
    line-height: 1.04;
  }
}

/*
 * Hero теперь держит одну авторскую иллюстрацию вместо вложенной схемы из
 * панелей, списков и статусов. Прозрачный растр продолжает светлую основу
 * текущей главной, а две отдельные площадки и двусторонняя синяя лента
 * показывают человека, Agent Workspace, накопленный контекст и результат.
 */
.landing-home__hero-illustration {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 100%;
  margin: 0;
}

.landing-home__hero-illustration-picture {
  display: block;
  width: min(100%, 780px);
}

.landing-home__hero-illustration-image {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

/*
 * Первая surface после hero формулирует продукт через две равноправные роли.
 * Обе половины используют одну и ту же двухразмерную шкалу: title 2xl и body
 * base. Различие создают только содержимое и мягкая заливка agent-половины,
 * поэтому блок не возвращает прежнюю «чехарду» из локальных кеглей.
 */
.landing-home__audiences {
  display: grid;
  gap: 1.8rem;
  width: min(100%, 1024px);
  margin: clamp(4.5rem, 7vw, 6.5rem) auto 0;
}

.landing-home__audience-surface {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  overflow: hidden;
  border-color: var(--line-soft);
  border-radius: 28px;
}

.landing-home__audience {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  grid-template-areas:
    "icon title"
    "icon text";
  column-gap: 1rem;
  row-gap: 0.55rem;
  align-content: start;
  min-width: 0;
  padding: 1.7rem 1.6rem 1.75rem;
}

.landing-home__audience--agents {
  border-inline-start: 1px solid var(--line-soft);
  background: var(--surface-soft);
}

.landing-home__audience-icon {
  grid-area: icon;
  width: 3rem;
  height: 3rem;
  border-radius: 16px;
  font-size: 1.2rem;
  box-shadow: 0 14px 28px color-mix(in oklch, var(--accent) 18%, transparent);
}

.landing-home__audience-title {
  grid-area: title;
  margin: 0;
  color: var(--text-main);
  font-size: var(--font-size-2xl);
  font-weight: 700;
  line-height: 1.3;
}

.landing-home__audience-text {
  grid-area: text;
  margin: 0;
  color: var(--text-muted);
  font-size: var(--font-size-base);
  line-height: 1.6;
}

/* Следующий сценарий подробно раскрывает только agent-половину, поэтому обычный
   section-gap оставляет парному тезису собственный визуальный такт. */
.landing-home__audiences + .landing-home__collaboration {
  margin-top: clamp(4.5rem, 7vw, 6.5rem);
}

/*
 * Пошаговый блок после парной surface показывает один пользовательский сценарий.
 * Четыре шага остаются частями общей surface с hairline-разделителями, а не
 * превращаются в четыре самостоятельные feature-card с конкурирующими тенями.
 */
.landing-home__collaboration,
.landing-home__story-section {
  display: grid;
  gap: 1.8rem;
  width: min(100%, 1024px);
  margin: clamp(4.5rem, 7vw, 6.5rem) auto 0;
}

.landing-home__agent-steps {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: landing-agent-step;
  overflow: hidden;
  border-color: var(--line-soft);
  border-radius: 28px;
}

/* На широком экране общий hairline связывает четыре номера в один маршрут.
   Это именно последовательность работы, а не ряд взаимозаменяемых карточек. */
.landing-home__agent-steps::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: calc(1.45rem + 18px);
  inset-inline-start: calc(1.3rem + 18px);
  inset-inline-end: calc(25% - 1.3rem - 18px);
  height: 1px;
  background: var(--line-strong);
  pointer-events: none;
}

.landing-home__agent-step {
  position: relative;
  counter-increment: landing-agent-step;
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 0.75rem;
  align-content: start;
  min-width: 0;
  padding: 1.45rem 1.3rem 1.55rem;
}

.landing-home__agent-step:nth-child(even) {
  background: var(--surface-soft);
}

.landing-home__agent-step + .landing-home__agent-step {
  border-inline-start: 1px solid var(--line-soft);
}

.landing-home__agent-step::before {
  content: counter(landing-agent-step);
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--line-soft);
  border-radius: 50%;
  background: var(--surface-soft);
  color: var(--accent-dark);
  font-size: var(--font-size-sm);
  font-weight: 700;
  line-height: 1;
}

.landing-home__agent-step h3,
.landing-home__agent-step p {
  position: relative;
  z-index: 2;
}

.landing-home__agent-step:nth-child(even)::before {
  background: var(--surface-strong);
}

/* Пошаговая surface напрямую переиспользует title/body scale feature-карточек
   и не заводит отдельную маркетинговую типографику. */
.landing-home__agent-step h3 {
  margin: 0;
  color: var(--text-main);
  font-size: var(--font-size-xl);
  font-weight: 700;
  line-height: 1.3;
}

.landing-home__agent-step p {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--font-size-base);
  line-height: 1.6;
}

/* Context-секция напрямую переиспользует heading, title и lead действующего
   landing-блока. Внутри остаются только три источника: простая пиктограмма,
   короткая подпись и одно основное значение без повторных статусов и
   пояснений. Иконки наследуют уже знакомую синюю surface feature-карточек,
   поэтому добавляют визуальные опоры без новой палитры и без намёка на action. */
.landing-home__context-surface {
  overflow: hidden;
  border-color: var(--line-soft);
  border-radius: 28px;
}

.landing-home__context-sources {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
}

.landing-home__context-source {
  display: grid;
  gap: 0.55rem;
  align-content: start;
  min-width: 0;
  padding: 1.6rem 1.5rem 1.65rem;
}

.landing-home__context-source + .landing-home__context-source {
  border-inline-start: 1px solid var(--line-soft);
}

.landing-home__context-kind {
  color: var(--text-muted);
  /* Подпись и значение используют один кегль. Иерархию здесь создают цвет и
     вес, поэтому карточка не дробится ещё на один мелкий текстовый уровень. */
  font-size: var(--font-size-base);
  font-weight: 500;
  line-height: 1.4;
}

/* Размер чуть спокойнее, чем в feature-mosaic: здесь иконка помогает быстро
   различить уровни контекста, а не становится самостоятельным акцентом. */
.landing-home__context-icon {
  width: 3rem;
  height: 3rem;
  margin-bottom: 0.25rem;
  border-radius: 16px;
  font-size: 1.2rem;
  box-shadow: 0 14px 28px color-mix(in oklch, var(--accent) 18%, transparent);
}

.landing-home__context-source dd {
  margin: 0;
  color: var(--text-main);
  font-size: var(--font-size-base);
  font-weight: 700;
  line-height: 1.5;
}

@media (max-width: 575.98px) {
  .landing-home__brand {
    gap: 0.5rem;
  }

  .landing-home__brand-mark {
    inline-size: 27px;
    block-size: 27px;
  }

  /* На телефоне немного выходим за текстовую колонку, чтобы персонажи и
     контекст не становились мелкими, но сохраняем безопасный page gutter. */
  .landing-home__hero-illustration {
    width: calc(100% + 0.5rem);
    margin-inline: -0.25rem;
  }
}

@media (max-width: 1199.98px) {
  /* На средней ширине четыре коротких шага складываются в две строки. Третий
     шаг начинает новую строку, поэтому вертикальная граница у него снимается,
     а нижняя пара получает общий горизонтальный hairline. */
  .landing-home__agent-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* В сетке 2 × 2 связь уже читается через общие границы строк и колонок;
     один сквозной горизонтальный маршрут здесь был бы ложным. */
  .landing-home__agent-steps::before {
    display: none;
  }

  .landing-home__agent-step:nth-child(n + 3) {
    border-top: 1px solid var(--line-soft);
  }

  .landing-home__agent-step:nth-child(3) {
    border-inline-start: 0;
  }
}

@media (max-width: 991.98px) {
  .landing-home__collaboration,
  .landing-home__story-section {
    width: min(100%, 960px);
  }
}

@media (max-width: 767.98px) {
  /* На телефоне иллюстрация становится первым визуальным объяснением hero.
     DOM-порядок остаётся текстовым: heading по-прежнему первым попадает в
     document outline, а неинтерактивная картинка переставляется grid-областями
     без дублирования asset и без расхождения порядка focusable-элементов. */
  .landing-home__hero-body {
    grid-template-areas:
      "hero-preview"
      "hero-copy";
  }

  .landing-home__hero-copy {
    grid-area: hero-copy;
  }

  .landing-home__hero-preview {
    grid-area: hero-preview;
  }

  /* На телефоне карточка начинается ближе к hero, а её две половины становятся
     компактнее. Благодаря этому оба базовых обещания полностью считываются в
     одном визуальном фрагменте без уменьшения кегля. */
  .landing-home__audiences {
    gap: 1.45rem;
    margin-top: 3.5rem;
  }

  .landing-home__audiences + .landing-home__collaboration {
    margin-top: 4rem;
  }

  .landing-home__collaboration,
  .landing-home__story-section {
    gap: 1.45rem;
    margin-top: 3rem;
  }

  .landing-home__agent-steps,
  .landing-home__audience-surface,
  .landing-home__context-sources {
    grid-template-columns: minmax(0, 1fr);
  }

  .landing-home__audience--agents {
    border-inline-start: 0;
    border-top: 1px solid var(--line-soft);
  }

  .landing-home__audience {
    grid-template-columns: 2.75rem minmax(0, 1fr);
    column-gap: 0.85rem;
    row-gap: 0.4rem;
    padding: 1.1rem 1rem 1.15rem;
  }

  .landing-home__audience-icon {
    width: 2.75rem;
    height: 2.75rem;
  }

  .landing-home__agent-step {
    padding: 1.3rem 1.2rem 1.35rem;
  }

  .landing-home__agent-step + .landing-home__agent-step,
  .landing-home__context-source + .landing-home__context-source {
    border-inline-start: 0;
    border-top: 1px solid var(--line-soft);
  }

  .landing-home__context-source {
    /* На телефоне иконка становится левым якорем для двух строк текста. Так
       три источника легче сканировать, а surface не растягивается втрое. */
    grid-template-columns: 3rem minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 0.9rem;
    row-gap: 0.3rem;
    align-items: start;
    padding: 1.3rem 1.2rem 1.35rem;
  }

  .landing-home__context-icon {
    grid-row: 1 / 3;
    margin-bottom: 0;
  }

  .landing-home__context-kind,
  .landing-home__context-source dd {
    grid-column: 2;
  }
}

/*
 * Hero-сцена намеренно статична. Reduced-motion здесь нужен только прежней
 * drag-демонстрации feature cards, которая остаётся отдельной возможностью.
 */
@media (prefers-reduced-motion: reduce) {
  .landing-home__advantage-card {
    transition: none;
  }

  .landing-home__advantage-card.is-drop-target,
  .landing-home__advantage-drag-ghost {
    transform: none;
  }
}