/* ── Новый первый экран. Стили только для него, чтобы не задеть остальной сайт ── */
.нов { font-family: 'Manrope', sans-serif; color: #14232F; }
.нов * { box-sizing: border-box; }
.нов a { text-decoration: none; }

.нов-обёртка { background: linear-gradient(180deg,#F4FAFD 0%,#E4F1F9 100%); }
.нов-контейнер { max-width: 1240px; margin: 0 auto; padding-left: clamp(16px,5vw,64px); padding-right: clamp(16px,5vw,64px); }

/* герой */
/* Первый экран: левая колонка и окно чата стоят ровно — совпадают и верх,
   и низ. Панель тянется на высоту колонки, лента внутри занимает остаток. */
.нов-герой { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,420px),1fr));
             gap: clamp(28px,5vw,64px); align-items: stretch; padding-top: 40px; padding-bottom: 72px; }
.нов-герой > div:first-child { display: flex; flex-direction: column; justify-content: center;
                              align-items: flex-start; }   /* иначе плашка и кнопки растягиваются на всю колонку */
.нов-чип { display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 1px solid #D5E6F0;
           border-radius: 999px; padding: 8px 16px; font-size: 13px; font-weight: 700; color: #0E9FD8; margin-bottom: 24px; }
.нов-точка { width: 8px; height: 8px; background: #2ECC71; border-radius: 50%; display: inline-block; }
.нов h1 { font-size: clamp(34px,4.5vw,64px); line-height: 1.05; letter-spacing: -2px; font-weight: 800; margin: 0 0 20px; }
.нов h1 span { color: #22ADE0; }
.нов-лид { width: 100%; font-size: clamp(16px,1.3vw,19px); line-height: 1.6; color: #3A4E5C; margin: 0 0 28px; max-width: 34em; }
.нов-действия { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin-bottom: 36px; }
.нов-кнопка { background: #C9F24A; color: #14232F; font-weight: 800; font-size: 17px; padding: 16px 32px;
              border-radius: 999px; box-shadow: 0 8px 24px rgba(201,242,74,.5); border: 0; cursor: pointer; }
.нов-кнопка:hover { background: #B8E23A; }
.нов-ссылка { color: #14232F; font-weight: 700; font-size: 15px; }
.нов-ссылка:hover { color: #0E9FD8; }
.нов-метрики { width: 100%; display: flex; gap: clamp(10px,2.2vw,28px); border-top: 1px solid #D5E6F0; padding-top: 22px; }
.нов-метрика { flex: 1 1 0; min-width: 0; padding-right: clamp(10px,2.2vw,28px); border-right: 1px solid #D5E6F0; }
.нов-метрика:last-child { border-right: 0; padding-right: 0; }
.нов-метрика b { display: block; font-size: 26px; font-weight: 800; letter-spacing: -1px; }
.нов-метрика span { font-size: 13px; color: #5A6E7C; font-weight: 600; display: block; line-height: 1.35; }

/* окно чата */
.нов-чат-обёртка { position: relative; min-width: 0; display: flex; }
.нов-пятно { position: absolute; border-radius: 50%; filter: blur(56px); z-index: 0; }
.нов-панель { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column;
              background: rgba(255,255,255,.92); backdrop-filter: blur(12px);
              border-radius: 22px; box-shadow: 0 28px 64px rgba(20,35,47,.18); padding: 18px; }
.нов-бейдж { position: absolute; top: -14px; right: 16px; z-index: 2; background: #14232F; color: #C9F24A;
             font-size: 12.5px; font-weight: 800; padding: 8px 16px; border-radius: 999px; white-space: nowrap; }
.нов-шапка-чата { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid #EEF4F8; }
.нов-аватар { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
              color: #fff; font-weight: 800; font-size: 16px; overflow: hidden; flex-shrink: 0; position: relative; }
.нов-аватар img { width: 100%; height: 100%; object-fit: cover; display: block; }
.нов-онлайн { position: absolute; right: 0; bottom: 0; width: 12px; height: 12px; background: #2ECC71;
              border: 2px solid #fff; border-radius: 50%; }
/* Лента фиксированной высоты: раньше она росла под содержимое и на ноутбуке
   с экраном 768px окно уезжало за край. Теперь высота привязана к экрану,
   а сообщения прокручиваются вниз сами, как в мессенджере. */
.нов-лента { position: relative; flex: 1; min-height: clamp(300px, 44vh, 460px); padding: 14px 0; overflow: hidden; }
.нов-слой { position: absolute; inset: 16px 0; z-index: 2; display: flex; flex-direction: column; align-items: center;
            justify-content: center; gap: 10px; transition: opacity .45s, transform .5s ease; pointer-events: none; }
.нов-баббл-бот { background: #F2F7FA; color: #14232F; padding: 11px 15px; border-radius: 16px 16px 16px 4px;
                 font-size: 14.5px; line-height: 1.5; max-width: 85%; }
.нов-баббл-клиент { align-self: flex-end; background: #22ADE0; color: #fff; padding: 11px 15px;
                    border-radius: 16px 16px 4px 16px; font-size: 14.5px; max-width: 78%; }
.нов-строка { display: flex; gap: 8px; align-items: flex-end; transition: opacity .45s, transform .45s; }
/* Подпись отправителя над сообщением: без неё в переписке не видно,
   где говорит ИИ-продавец, а где человек. Ставится только при смене стороны. */
.нов-подпись { font-size: 10.5px; font-weight: 800; letter-spacing: .03em; color: #94A6B2; margin-bottom: 4px; }
.нов-бок { min-width: 0; max-width: 85%; }
.нов-бок .нов-баббл-бот { max-width: 100%; }
.нов-блок-клиент { display: flex; flex-direction: column; align-items: flex-end; }
.нов-блок-клиент .нов-подпись { text-align: right; }

/* «Печатает…» — те же три точки, что в мессенджерах: пауза перед репликой
   читается как живой набор, а не как задержка загрузки. */
.нов-пишет { display: inline-flex; align-items: center; gap: 7px; background: #F2F7FA; color: #7A8D9A;
             font-size: 12.5px; font-weight: 700; padding: 9px 14px; border-radius: 15px 15px 15px 4px; }
.нов-пишет-клиент { background: #E3F3FB; color: #2C7FA2; border-radius: 15px 15px 4px 15px; }
.нов-точки { display: inline-flex; gap: 3px; }
.нов-точки i { width: 4px; height: 4px; border-radius: 50%; background: currentColor;
               animation: нов-набор 1.1s infinite; }
.нов-точки i:nth-child(2) { animation-delay: .15s; }
.нов-точки i:nth-child(3) { animation-delay: .3s; }
@keyframes нов-набор { 0%, 65%, 100% { opacity: .28; transform: translateY(0); }
                       32% { opacity: 1; transform: translateY(-3px); } }
.нов-мини { width: 26px; height: 26px; border-radius: 50%; color: #fff; font-weight: 800; font-size: 10px;
            display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; }
.нов-мини img { width: 100%; height: 100%; object-fit: cover; }
.нов-товары { display: flex; gap: 10px; margin-left: 34px; transition: opacity .45s, transform .45s; }
.нов-товар { flex: 1; min-width: 0; background: #fff; border: 1px solid #E2ECF3; border-radius: 14px; padding: 8px; }
/* Фото товара: полоса в 74px резала предмет пополам. Стало выше, и картинка
   вписывается целиком — товар снят на белом, поэтому поля не видны. */
.нов-фото { position: relative; height: 118px; border-radius: 10px; margin-bottom: 9px; overflow: hidden;
            background: #fff; display: flex; align-items: center; justify-content: center; }
.нов-фото img { width: 100%; height: 100%; object-fit: contain; display: block; }
.нов-наличие { position: absolute; top: 6px; left: 6px; background: #EAF8D9; color: #5AA31E; font-size: 9.5px;
               font-weight: 800; padding: 2px 7px; border-radius: 999px; }
.нов-ввод { display: flex; align-items: center; gap: 10px; border-top: 1px solid #EEF4F8; padding-top: 14px; }
.нов-поле { flex: 1; min-width: 0; background: #F8FBFD; border: 1px solid #E2ECF3; border-radius: 999px;
            padding: 11px 16px; font-size: 13.5px; color: #8FA3B0; }
.нов-отправить { width: 34px; height: 34px; border-radius: 50%; background: #C9F24A; color: #14232F;
                 display: flex; align-items: center; justify-content: center; font-weight: 800; flex-shrink: 0; }
.нов-загрузка { position: absolute; inset: 0; z-index: 3; background: #fff; border-radius: 22px; display: flex;
                flex-direction: column; align-items: center; justify-content: center; gap: 14px; transition: opacity .5s; }
.нов-спиннер { width: 34px; height: 34px; border: 3px solid #EAF3F9; border-top-color: #C9F24A; border-radius: 50%;
               animation: нов-верчение .8s linear infinite; }
@keyframes нов-верчение { to { transform: rotate(360deg); } }

/* Отметка «что произошло до диалога». Размер постоянный — чуть крупнее реплик,
   чтобы её прочитали. Ничего не увеличивается и не сжимается: она просто
   показывается первой, а потом уезжает вверх вместе с лентой. */
.нов-отметка { display: block; align-self: center; max-width: 94%; background: #F2F7FA; color: #5A6E7C;
               font-size: 14px; font-weight: 500; line-height: 1.4; padding: 10px 16px;
               border-radius: 12px; text-align: center;
               transition: opacity .45s, transform .45s; }


/* Обратный отсчёт до старта: кольцо плавно убывает, цифра внутри */
.нов-кольцо { position: relative; width: 56px; height: 56px; flex-shrink: 0; }
.нов-кольцо svg { display: block; }
.нов-кольцо #дуга { transition: stroke-dashoffset 1s linear; }
.нов-кольцо span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
                   font-size: 20px; font-weight: 800; color: #14232F; }

/* две карточки продуктов */
.нов-белая { background: #fff; padding: 72px 0; }
.нов h2 { font-size: clamp(26px,3vw,42px); letter-spacing: -1.5px; font-weight: 800; margin: 0 0 10px; }
.нов-подзаголовок { color: #5A6E7C; font-size: 16px; margin: 0 0 36px; }
.нов-двое { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,340px),1fr)); gap: 24px; }
.нов-карточка { display: block; background: linear-gradient(160deg,#F7FBFE,#EDF6FB); border: 1px solid #E2ECF3;
                border-radius: 24px; padding: 28px; transition: transform .2s, box-shadow .2s; }
.нов-карточка:hover { transform: translateY(-4px); box-shadow: 0 16px 32px rgba(20,35,47,.10); }
.нов-метка { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: 1px; padding: 6px 12px;
             border-radius: 999px; margin-bottom: 14px; }
.нов-список { list-style: none; padding: 0; margin: 16px 0 18px; }
.нов-список li { display: flex; gap: 8px; align-items: flex-start; font-size: 14.5px; color: #3A4E5C; margin-bottom: 8px; }
.нов-галка { color: #2ECC71; font-weight: 800; flex-shrink: 0; }

/* тёмный блок */
.нов-тёмный { background: #14232F; color: #fff; padding: 72px 0; }
.нов-кикер { color: #C9F24A; font-size: 12.5px; font-weight: 800; letter-spacing: 2px; margin-bottom: 14px; }
.нов-модули { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,230px),1fr)); gap: 16px; margin-top: 32px; }
.нов-модуль { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); border-radius: 18px;
              padding: 20px; transition: border-color .2s; }
.нов-модуль:hover { border-color: #C9F24A; }
.нов-иконка { width: 44px; height: 44px; border-radius: 12px; background: #C9F24A; display: flex; align-items: center;
              justify-content: center; font-size: 20px; margin-bottom: 14px; }

@media (max-width: 767px) {
  .нов-герой { padding-top: 24px; padding-bottom: 40px; }
  .нов-панель { padding: 14px; }
  .нов-товары { margin-left: 0; }
  .нов-лента { min-height: 320px; }
  .нов-белая, .нов-тёмный { padding: 44px 0; }
  .нов-метрика b { font-size: 22px; }
}