/* ══ Новая главная, макет от 06.09.2026 ═══════════════════════════════
   Стили только новых блоков. Базовые токены (шрифт, цвета, .нов-контейнер,
   .нов-чип, .нов-кнопка, смена строк в заголовке) берутся из home.css —
   этот файл подключается после него и ничего там не переопределяет.
   Префиксы: гц — герой центрированный. */

/* ── Блок 1. Первый экран по центру ─────────────────────────────────── */
/* Колонка без align-items:center: элементы растягиваются на всю ширину,
   а центрируются текстом и margin:auto. Иначе в узком экране браузер
   считал ширину p по max-width и текст вылезал за край. */
.гц-герой { display: flex; flex-direction: column; text-align: center;
            padding-top: clamp(48px, 7vw, 96px); padding-bottom: clamp(56px, 7vw, 96px); }

.гц .нов-чип { align-self: center; margin-bottom: clamp(22px, 3vw, 36px); }

/* Заголовок крупнее прежнего: без правой колонки ему есть куда расти */
.нов .гц-заголовок { font-size: clamp(36px, 5.6vw, 88px); line-height: 1.02; letter-spacing: -.035em;
                     margin: 0 auto clamp(20px, 2.6vw, 32px); max-width: 15em; text-wrap: balance; }

/* Пара слов второй строки стоит в одну линию по центру. В home.css класс
   .нов-строка переопределён под строку чата (display:flex) — здесь возвращаем.
   Высота блока смены зафиксирована и перенос запрещён: иначе одна пара занимала
   строку, другая две, и при смене прыгала вся страница. */
.гц-заголовок .нов-смена { display: flex; flex-wrap: nowrap; justify-content: center; gap: 0 .26em;
                           height: 1.02em; white-space: nowrap; }
.гц-заголовок .нов-строка { display: inline-block; }
@media (max-width: 767px) {
  /* на телефоне каждая пара — ровно две строки: слово над словом */
  .гц-заголовок .нов-смена { flex-direction: column; align-items: center; gap: 0; height: 2.04em; }
}

.гц-лид { font-size: clamp(16px, 1.35vw, 20px); line-height: 1.6; color: #3A4E5C;
          max-width: 40em; margin: 0 auto clamp(28px, 3vw, 40px); }

.гц-действия { display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
               gap: clamp(16px, 2.4vw, 32px); margin-bottom: clamp(36px, 4.5vw, 64px); }
.гц-ссылка { color: #0E9FD8; font-weight: 700; font-size: 16px; }
.гц-ссылка:hover { color: #22ADE0; }

/* Карточка с цифрами: белая, три колонки с тонкими разделителями */
.гц-метрики { width: 100%; max-width: 1140px; margin: 0 auto; background: #fff; border-radius: 28px;
              box-shadow: 0 18px 50px rgba(20, 35, 47, .07), 0 1px 0 rgba(20, 35, 47, .04);
              display: grid; grid-template-columns: repeat(3, 1fr);
              padding: clamp(22px, 2.6vw, 36px) clamp(16px, 2.4vw, 40px); }
.гц-метрика { padding: 0 clamp(10px, 2vw, 28px); border-right: 1px solid #E3ECF2; min-width: 0; }
.гц-метрика:last-child { border-right: 0; }
.гц-метрика b { display: block; font-size: clamp(28px, 2.9vw, 42px); font-weight: 800;
                letter-spacing: -.03em; line-height: 1.1; color: #14232F; }
.гц-метрика span { display: block; margin-top: 6px; font-size: clamp(13px, 1.05vw, 15px);
                   font-weight: 600; color: #5A6E7C; line-height: 1.35; }

@media (max-width: 767px) {
  .гц-метрики { grid-template-columns: 1fr; gap: 18px; padding: 22px 20px; border-radius: 22px; }
  .гц-метрика { border-right: 0; border-bottom: 1px solid #E3ECF2; padding: 0 0 18px; }
  .гц-метрика:last-child { border-bottom: 0; padding-bottom: 0; }
  .гц-действия { flex-direction: column; gap: 14px; }
  .гц-действия .нов-кнопка { width: 100%; }
}

/* ── Блок 2. «Вот как это выглядит на сайте» ─────────────────────────── */
.кв { background: #fff; padding: clamp(56px, 7vw, 96px) 0 clamp(48px, 6vw, 80px); scroll-margin-top: 84px; }
.кв-шапка { text-align: center; max-width: 60em; margin: 0 auto clamp(28px, 4vw, 48px); }
.нов .кв-шапка h2 { font-size: clamp(30px, 4vw, 56px); letter-spacing: -.03em; margin: 0 0 14px; text-wrap: balance; line-height: 1.06; }
.кв-шапка p { font-size: clamp(15px, 1.25vw, 18px); line-height: 1.55; color: #3A4E5C; max-width: 40em; margin: 0 auto; }

/* окно браузера */
.кв-браузер { background: #F4F8FB;  border-radius: 26px; overflow: hidden;
              box-shadow: 0 30px 80px rgba(20, 35, 47, .10), 0 2px 0 rgba(20, 35, 47, .03);
              border: 2px solid rgba(20, 35, 47, .16); }   /* рамка мок-браузера — в пару к окну чата */
.кв-адресная { display: flex; align-items: center; gap: 8px; padding: 14px 20px; min-width: 0; }
.кв-адресная i { width: 11px; height: 11px; border-radius: 50%; background: #D3DEE6; display: block; flex-shrink: 0; }
.кв-урл { margin-left: 14px; background: #fff; border-radius: 999px; padding: 9px 18px; font-size: 13.5px;
          font-weight: 600; color: #5A6E7C; min-width: min(420px, 60%); }
.кв-урл { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; max-width: 100%; }   /* длинный адрес режется многоточием, а не вылезает */

.кв-экран { position: relative; height: clamp(520px, 54vw, 760px); background: #fff; overflow: hidden; }

/* мок-сайт: обычная вёрстка, размытая целиком — так читается как «чужой сайт», но без деталей */
.кв-сайт { position: absolute; inset: 0; padding: clamp(14px, 2.4vw, 32px) clamp(16px, 3vw, 44px);
           filter: blur(3.5px); pointer-events: none; user-select: none; }

/* окно чата поверх — тот же .нов-панель, только прибит к правому краю */
.кв-панель { position: absolute; right: clamp(12px, 2.4vw, 32px); top: clamp(44px, 6vw, 72px); bottom: clamp(12px, 2vw, 28px);
             width: min(400px, 78%);
             border: 2px solid rgba(20, 35, 47, .18);                          /* рамка: окно чата отделяется от размытого сайта */
             box-shadow: 0 30px 70px rgba(20, 35, 47, .30), 0 6px 18px rgba(20, 35, 47, .14); }
.кв-панель .нов-лента { min-height: 0; }
/* Итог накрывает всё окно: лента перестаёт быть опорой для абсолютного слоя,
   и он растягивается на панель поверх шапки и поля ввода. */
/* Итог накрывает окно чата целиком — без шапки и поля ввода, как на макете.
   Шапка и ввод гаснут, карточка проявляется с лёгким увеличением. */
.кв-панель .нов-шапка-чата, .кв-панель .нов-ввод { transition: opacity .45s ease; }
.кв-панель.итог .нов-шапка-чата, .кв-панель.итог .нов-ввод { opacity: 0; pointer-events: none; }
.кв-панель.итог .нов-лента { position: static; }
.кв-панель #слой-итог { transition: opacity .5s ease, transform .55s cubic-bezier(.2, .7, .2, 1); transform: scale(.96); }
.кв-панель.итог #слой-итог { inset: 0; z-index: 6; background: #fff; border-radius: 22px; transform: scale(1);
                             padding: 32px 28px; justify-content: center; gap: 14px; }
.кв-панель.итог #слой-итог > div:nth-child(2) { font-size: 19px; margin-top: 4px; }
.кв-панель.итог #слой-итог > div:last-child { margin-top: 10px; max-width: 360px; padding: 16px 18px; gap: 10px; }
@media (max-width: 767px) { .кв-панель.итог #слой-итог { padding: 24px 18px; } }
.кв-канал { display: none; }
.кв-крест { width: 32px; height: 32px; border-radius: 50%; background: #F2F7FA; color: #5A6E7C; font-size: 20px;
            line-height: 1; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

/* три шага под окном */
.кв-шаги { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.4vw, 32px); margin-top: clamp(28px, 3.5vw, 44px); }
.кв-шаг { display: flex; gap: 14px; align-items: flex-start; }
.кв-шаг i { width: 44px; height: 44px; border-radius: 50%; background: #EAF6C8; color: #14232F; font-style: normal;
            font-weight: 800; font-size: 15px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.кв-шаг b { display: block; font-size: 17px; font-weight: 800; letter-spacing: -.01em; margin-bottom: 3px; }
.кв-шаг span { display: block; font-size: 14.5px; line-height: 1.45; color: #5A6E7C; }

@media (max-width: 767px) {
  .кв-экран { height: 640px; }
  .кв-урл { min-width: 0; flex: 1; font-size: 12px; padding: 8px 12px; margin-left: 8px; }
  .кв-панель { left: 10px; right: 10px; width: auto; top: 118px; bottom: 12px; }   /* сверху виден кусок сайта */
  .кв-шаги { grid-template-columns: 1fr; gap: 18px; }
}

/* ── мок-сайт: скелет чужого сайта ─────────────────────────────────── */
.мс { font-family: 'Manrope', sans-serif; color: #2C3A44; display: flex; flex-direction: column; gap: clamp(14px, 2vw, 26px); }
.мс-шапка { display: flex; align-items: center; gap: clamp(10px, 1.6vw, 22px); font-size: 14px; font-weight: 600; color: #4B5B67; }
.мс-лого { font-size: 19px; font-weight: 800; color: #1E2A32; letter-spacing: -.02em; }
.мс-шапка nav { display: flex; gap: clamp(10px, 1.6vw, 22px); flex: 1; }
.мс-тел { font-weight: 700; color: #1E2A32; }
.мс-кнопка { background: #3A4A55; color: #fff; border-radius: 10px; padding: 10px 16px; font-weight: 700; font-size: 13.5px; white-space: nowrap; }
.мс-кнопка2 { display: inline-block; background: #E8B85F; color: #2C2A20; border-radius: 10px; padding: 11px 18px; font-weight: 700; font-size: 13.5px; }

.мс-баннер { display: grid; grid-template-columns: 1.15fr .85fr; border-radius: 18px; overflow: hidden;
             background: var(--тон); color: #fff; min-height: clamp(150px, 20vw, 260px); }
.мс-баннер > div:first-child { padding: clamp(18px, 2.6vw, 38px); display: flex; flex-direction: column; justify-content: center; gap: 10px; }
.мс-баннер h3 { margin: 0; font-size: clamp(20px, 2.6vw, 38px); line-height: 1.1; font-weight: 800; letter-spacing: -.02em; }
.мс-баннер p { margin: 0 0 6px; font-size: clamp(12px, 1.1vw, 15px); opacity: .85; }
.мс-картинка { background: linear-gradient(160deg, rgba(255,255,255,.28), rgba(255,255,255,.06)), var(--тон); }

.мс-раздел h4 { margin: 0 0 10px; font-size: clamp(18px, 2vw, 26px); font-weight: 800; letter-spacing: -.02em; color: #1E2A32; }
.мс-раздел small { font-size: 13px; font-weight: 600; color: #8A98A3; margin-left: 8px; }
.мс-чипы { display: flex; gap: 8px; flex-wrap: wrap; }
.мс-чипы span { border: 1px solid #DCE4EA; border-radius: 999px; padding: 7px 14px; font-size: 13px; font-weight: 600; color: #4B5B67; }
.мс-чипы .акт { background: #1E2A32; border-color: #1E2A32; color: #fff; }

.мс-товары { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 1.6vw, 22px); }
.мс-товар b { display: block; font-size: 14.5px; font-weight: 800; margin-top: 10px; color: #1E2A32; }
.мс-товар span { display: block; font-size: 12.5px; color: #7A8893; margin-top: 2px; }
.мс-товар em { display: block; font-style: normal; font-weight: 800; font-size: 15px; margin-top: 6px; color: #1E2A32; }
.мс-фото { height: clamp(90px, 12vw, 170px); border-radius: 14px; background: linear-gradient(150deg, rgba(255,255,255,.55), rgba(255,255,255,.15)), var(--тон); }
.мс-товар:nth-child(2) .мс-фото { background: linear-gradient(150deg, rgba(0,0,0,.05), rgba(0,0,0,.28)), var(--тон); }
.мс-товар:nth-child(3) .мс-фото { background: linear-gradient(150deg, rgba(255,255,255,.75), rgba(255,255,255,.35)), var(--тон); }

/* вариант «объявление на Авито» */
.мс-авито .мс-лого { color: #00A046; }
.мс-поиск { flex: 1; background: #F1F4F6; border-radius: 10px; padding: 10px 14px; font-size: 13px; color: #8A98A3; }
.мс-объявление { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(16px, 2.4vw, 32px); }
.мс-галерея { display: flex; flex-direction: column; gap: 10px; }
.мс-большая { height: clamp(180px, 22vw, 320px); }
.мс-миниатюры { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.мс-миниатюры i { display: block; height: clamp(44px, 5vw, 70px); border-radius: 10px;
                  background: linear-gradient(150deg, rgba(255,255,255,.4), rgba(0,0,0,.12)), var(--тон); }
.мс-миниатюры i:nth-child(2) { opacity: .75; } .мс-миниатюры i:nth-child(3) { opacity: .55; } .мс-миниатюры i:nth-child(4) { opacity: .4; }
.мс-инфо h3 { margin: 0 0 6px; font-size: clamp(18px, 2.2vw, 28px); line-height: 1.15; font-weight: 800; letter-spacing: -.02em; color: #1E2A32; }
.мс-инфо em { display: block; font-style: normal; font-size: clamp(20px, 2.4vw, 32px); font-weight: 800; color: #1E2A32; margin-bottom: 12px; }
.мс-инфо p { margin: 0 0 16px; font-size: 13.5px; line-height: 1.55; color: #4B5B67; }
.мс-продавец { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.мс-продавец i { width: 40px; height: 40px; border-radius: 50%; background: var(--тон); display: block; flex-shrink: 0; }
.мс-продавец b { display: block; font-size: 14px; font-weight: 800; color: #1E2A32; }
.мс-продавец span { display: block; font-size: 12px; color: #8A98A3; }
.мс-авито .мс-кнопка2 { background: #00A046; color: #fff; }

@media (max-width: 767px) {
  .мс-шапка nav, .мс-тел { display: none; }
  .мс-баннер { grid-template-columns: 1fr; }
  .мс-картинка { display: none; }
  .мс-товары { grid-template-columns: repeat(2, 1fr); }
  .мс-товар:nth-child(3) { display: none; }
  .мс-объявление { grid-template-columns: 1fr; }
}

/* ── Блок 4. Скролл-анимация с точками ───────────────────────────────── */
.тс { position: relative; height: 320vh; background: #1E2A32; color: #fff; }
.тс.тс-фикс { height: auto; }                 /* фиксированный прогресс — обычная секция */

/* Высота — по видимой области (dvh): на iPhone 100vh выше экрана, и низ блока
   уезжал под панели Safari. Отступ сверху — под фиксированную шапку сайта. */
.тс-липкое { position: sticky; top: 0; height: 100vh; height: 100dvh; box-sizing: border-box;
             padding: 84px 0 28px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.тс.тс-фикс .тс-липкое { position: relative; height: auto; padding: clamp(64px, 8vw, 110px) 0; }
.тс-свет { position: absolute; inset: 0; pointer-events: none;
           background: radial-gradient(ellipse 60% 55% at 50% 58%, rgba(201, 242, 74, .12), transparent 70%); }
.тс-контент { position: relative; width: 100%; text-align: center; display: flex; flex-direction: column; align-items: center; }
.тс-низ { display: flex; flex-direction: column; align-items: center; width: 100%; }
/* Десктоп: скрипт (разместить) ставит текст по центру экрана — настолько, насколько
   позволяет сетка под ним; стек прижимается вверх только когда иначе не влезает. */

/* три набора текстов лежат друг на друге; активный виден */
.тс-тексты { position: relative; width: 100%; min-height: 200px; }   /* точную высоту ставит скрипт */
.тс-набор { position: absolute; inset: 0; opacity: 0; transform: translateY(12px);
            transition: opacity .6s cubic-bezier(.2, .7, .2, 1), transform .6s cubic-bezier(.2, .7, .2, 1); pointer-events: none; }
.тс-набор.акт { opacity: 1; transform: none; }
.тс-кикер { color: #C9F24A; font-size: 12.5px; font-weight: 800; letter-spacing: 3px; text-transform: uppercase; margin-bottom: 18px; }
/* .тс .тс-заголовок — а не просто .тс-заголовок: первый кадр это h2, и общий
   .нов h2 из home.css (margin 0, 42px) перебивал его — заголовок уезжал влево. */
.тс .тс-заголовок { font-size: clamp(28px, 4.4vw, 62px); line-height: 1.06; letter-spacing: -.03em; font-weight: 800;
                margin: 0 auto 16px; max-width: 18em; color: #fff; text-wrap: balance; transition: opacity .3s; }
.тс-текст { font-size: clamp(15px, 1.3vw, 19px); line-height: 1.55; color: #B6C2CB; max-width: 38em; margin: 0 auto; }

/* сцена: сетка точек и карточка чата поверх */
.тс-сцена { position: relative; width: 100%; max-width: 1040px; margin: clamp(22px, 3vw, 48px) auto 0; }
.тс-точки { display: grid; grid-template-columns: repeat(20, 1fr); gap: clamp(8px, 1.1vw, 16px); }
.тс-точка { display: block; aspect-ratio: 1; border-radius: 50%; background: #3A4852; opacity: 0;
            transition: opacity .55s cubic-bezier(.2, .7, .2, 1), background-color .55s, box-shadow .55s; }
.тс-точка.тёмн { background: #2F3B44; }
.тс-точка.зел { background: #C9F24A; box-shadow: 0 0 16px rgba(201, 242, 74, .55);
                animation: тс-дыхание 2.6s ease-in-out infinite; animation-delay: var(--з, 0s); }
.тс-точка.зел.тёмн { background: #8DB42B; box-shadow: 0 0 10px rgba(141, 180, 43, .45); }
@keyframes тс-дыхание {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.14); }
}

.тс-чат { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.94); width: min(470px, 84%);
          background: #fff; color: #14232F; border-radius: 18px; padding: 18px 22px 20px; text-align: left;
          box-shadow: 0 30px 70px rgba(0, 0, 0, .40); opacity: 0; will-change: transform, opacity; }
.тс-чат-шапка { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.тс-чат-аватар { position: relative; width: 38px; height: 38px; flex-shrink: 0; }
.тс-чат-аватар img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; background: #E8F1F7; }
.тс-чат-аватар i { position: absolute; right: -1px; bottom: -1px; width: 12px; height: 12px; border-radius: 50%;
                   background: #2ECC71; border: 2px solid #fff; }                 /* зелёная точка: в сети */
.тс-чат-кто { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; gap: 1px; }
.тс-чат-кто b { font-size: 14.5px; font-weight: 800; }
.тс-чат-кто span { font-size: 12px; color: #8FA3B0; font-weight: 700; }
.тс-чат-статус { font-size: 12px; font-weight: 700; color: #2ECC71; }
/* смена приветствия: текст и имя гаснут, меняются, возвращаются */
.тс-чат p, .тс-чат-кто b, .тс-чат-аватар img { transition: opacity .3s ease, transform .3s ease; }
.тс-чат.смена p, .тс-чат.смена .тс-чат-кто b { opacity: 0; transform: translateY(6px); }
.тс-чат.смена .тс-чат-аватар img { opacity: 0; }
.тс-чат p { margin: 0; font-size: 15.5px; line-height: 1.45; min-height: 4.35em; }   /* три строки: карточка не меняет высоту при смене текста */

.тс-итог { display: flex; align-items: baseline; justify-content: center; gap: 14px; margin-top: clamp(22px, 3vw, 48px);
           opacity: 0; }
.тс-итог b { font-size: clamp(38px, 4.6vw, 64px); font-weight: 800; letter-spacing: -.03em; color: #C9F24A;
             text-shadow: 0 0 30px rgba(201, 242, 74, .45); font-variant-numeric: tabular-nums; min-width: 3.1ch; text-align: right; }
.тс-итог span { font-size: clamp(15px, 1.3vw, 19px); color: #B6C2CB; font-weight: 600; }

@media (prefers-reduced-motion: reduce) { .тс-точка.зел { animation: none; } }

@media (max-width: 767px) {
  .тс { height: 260vh; }
  .тс-липкое { padding: 76px 0 28px; }
  .тс-кикер { margin-bottom: 12px; }
  .тс .тс-заголовок { font-size: clamp(26px, 7.2vw, 34px); margin-bottom: 12px; }
  .тс-текст { font-size: 15px; }
  /* на телефоне десять колонок и семь рядов: остальное просто не показываем */
  .тс-точки { grid-template-columns: repeat(10, 1fr); gap: 7px; }
  .тс-точка:nth-child(n+71) { display: none; }
  .тс-чат { width: 88%; padding: 12px 14px 14px; border-radius: 14px; }
  .тс-чат p { font-size: 14px; }
  .тс-чат-кто b { font-size: 13.5px; }
  .тс-чат-аватар { width: 34px; height: 34px; }
  .тс-итог { margin-top: 22px; gap: 10px; }
  .тс-итог b { font-size: 40px; }
  .тс-итог span { font-size: 14px; }
}

/* невысокий экран (ноутбук): текст компактнее и четыре ряда точек вместо пяти —
   точки остаются крупными, а стек не упирается в шапку */
@media (min-width: 768px) and (max-height: 860px) {
  .тс .тс-заголовок { font-size: clamp(28px, 3.6vw, 50px); margin-bottom: 12px; }
  .тс-кикер { margin-bottom: 12px; }
  .тс-текст { font-size: clamp(15px, 1.15vw, 17px); }
  .тс-точка:nth-child(n+81) { display: none; }
  .тс-сцена { margin-top: clamp(18px, 2.4vh, 36px); }
  .тс-итог { margin-top: clamp(14px, 2vh, 28px); }
  .тс-итог b { font-size: clamp(34px, 4vw, 52px); }
}

/* ── Блок 7. «Как мы учим агента» ─────────────────────────────────────── */
.ку { background: #fff; padding: clamp(56px, 7vw, 96px) 0; }
.ку-шапка { text-align: center; max-width: 60em; margin: 0 auto clamp(30px, 4vw, 52px); }
.ку-плашка { display: inline-block; background: #F2F8FC; border: 1px solid #DCEAF3; color: #14232F; font-size: 12.5px;
             font-weight: 800; letter-spacing: 2.5px; text-transform: uppercase; padding: 9px 20px; border-radius: 999px;
             margin-bottom: clamp(18px, 2.4vw, 28px); }
.нов .ку-шапка h2 { font-size: clamp(30px, 4.4vw, 62px); line-height: 1.06; letter-spacing: -.03em; margin: 0 0 14px; text-wrap: balance; }
.ку-шапка h2 span { color: #22ADE0; }
.ку-шапка p { font-size: clamp(15px, 1.25vw, 18px); line-height: 1.55; color: #3A4E5C; margin: 0; }

.ку-карточки { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 1.8vw, 24px); }
.ку-карточка { background: #F2F8FC; border-radius: 24px; padding: clamp(24px, 2.6vw, 40px); display: flex; flex-direction: column; gap: 14px; }
.ку-метка { font-size: 12.5px; font-weight: 800; letter-spacing: 2.5px; text-transform: uppercase; color: #22ADE0; }
.ку-карточка h3 { margin: 0; font-size: clamp(20px, 1.9vw, 27px); line-height: 1.2; letter-spacing: -.02em; font-weight: 800; color: #14232F; }
.ку-карточка p { margin: 0; font-size: clamp(14.5px, 1.1vw, 16.5px); line-height: 1.55; color: #3A4E5C; }

.ку-тёмная { background: #14232F; }
.ку-тёмная .ку-метка { color: #C9F24A; }
.ку-тёмная h3 { color: #fff; }
.ку-тёмная p { color: #B6C2CB; }

@media (max-width: 767px) {
  .ку-карточки { grid-template-columns: 1fr; }
}

/* ── Блок Telegram / MAX (боевая разметка Tailwind): строка «1000+ подписчиков ·
   Новые посты каждый день» на телефоне разъезжалась — иконка отдельно, текст в две
   строки. Столбиком и без переносов. Двойной класс — чтобы перебить Tailwind. */
@media (max-width: 767px) {
  .тг-факты.тг-факты { flex-direction: column; align-items: center; gap: 10px; }
  .тг-факты.тг-факты > div { white-space: nowrap; }
}