/* ============================================================
   Главная страница. Опирается на токены из kreo.css и ничего не
   переопределяет — только собирает из них разделы.
   ============================================================ */

/* ---------- Первый экран ---------- */

.hero { position: relative; padding-top: clamp(40px, 6vw, 88px); padding-bottom: clamp(48px, 7vw, 96px); overflow: hidden; }

/* Мягкое свечение за первым экраном. Не «блоб на градиенте»: одно пятно,
   низкая насыщенность, задача — отделить герой от остальной страницы. */
.hero::before {
    content: ''; position: absolute; z-index: 0;
    top: -30%; right: -10%; width: 70vw; height: 70vw; max-width: 900px; max-height: 900px;
    background: radial-gradient(circle at 50% 50%, var(--accent-soft), transparent 62%);
    pointer-events: none;
}

.hero__in { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: clamp(32px, 5vw, 72px); align-items: center; }

.hero__copy { display: grid; gap: var(--gap-5); align-content: center; }
/* Размер подобран так, чтобы заголовок оставался в две строки: на 1440 самая
   длинная строка «которые уже работают» занимает 560 px из 600 доступных. */
.hero__title { font-family: var(--font-display); font-weight: 800; letter-spacing: -.035em; line-height: 1.06;
               font-size: clamp(2.05rem, 3.9vw, 3.25rem); }
.hero__title em { font-style: normal; color: var(--accent-text); }
.hero__sub { font-size: clamp(1.02rem, 1.5vw, 1.22rem); line-height: 1.55; color: var(--text-2); max-width: 46ch; }
.hero__acts { display: flex; flex-wrap: wrap; gap: var(--gap-3); }
.hero__acts .btn { padding-inline: 26px; }

/* Стена живых сайтов: три колонки настоящих скриншотов, которые медленно
   едут в разные стороны. Движение здесь работает как аргумент — показывает
   объём сделанного за секунду, без просьбы листать. */
.wall { position: relative; height: clamp(400px, 52vw, 620px); display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
        -webkit-mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
        mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent); }
.wall__col { display: grid; gap: 14px; align-content: start; will-change: transform; }
.wall__col--a { animation: wall-up 64s linear infinite; }
.wall__col--b { animation: wall-down 78s linear infinite; }
.wall__col--c { animation: wall-up 71s linear infinite; }
@keyframes wall-up   { from { transform: translateY(0); }    to { transform: translateY(-50%); } }
@keyframes wall-down { from { transform: translateY(-50%); } to { transform: translateY(0); } }

.wall__shot { position: relative; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: var(--surface-2); aspect-ratio: 8 / 5; }
.wall__shot img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }

@media (prefers-reduced-motion: reduce) { .wall__col { animation: none !important; } }

@media (max-width: 980px) {
    .hero__in { grid-template-columns: 1fr; }
    .wall { height: 320px; grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 640px) {
    .wall { height: 260px; grid-template-columns: repeat(2, 1fr); }
    .hero__acts .btn { flex: 1 1 auto; }
}

/* ---------- Полоса фактов под первым экраном ---------- */

.facts { border-block: 1px solid var(--line); background: var(--bg-sunk); }
.facts__in { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap-5); padding-block: var(--gap-6); }
.facts__it { display: grid; gap: 4px; }
.facts__num { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.6rem, 3vw, 2.3rem); line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.facts__lab { font-size: .85rem; color: var(--text-3); line-height: 1.4; }
@media (max-width: 760px) { .facts__in { grid-template-columns: 1fr 1fr; gap: var(--gap-5) var(--gap-4); } }

/* ---------- Рельс работ ---------- */

.rail { display: grid; gap: var(--gap-5); }
.rail__track {
    display: grid; grid-auto-flow: column; grid-auto-columns: min(340px, 78vw);
    gap: var(--gap-4); overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-left: var(--pad);
    padding-inline: var(--pad); margin-inline: calc(var(--pad) * -1);
    padding-bottom: var(--gap-3);
    scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent;
}
.rail__track::-webkit-scrollbar { height: 8px; }
.rail__track::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 99px; }
.rail__track::-webkit-scrollbar-track { background: transparent; }

.work { scroll-snap-align: start; display: grid; gap: 12px; }
.work__frame { position: relative; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); background: var(--surface-2); aspect-ratio: 8 / 5; }
.work__frame img { width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform .6s var(--ease); }
.work:hover .work__frame img { transform: scale(1.035); }
.work__go {
    position: absolute; inset: auto 10px 10px auto;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 12px; border-radius: 999px;
    background: color-mix(in srgb, var(--bg) 78%, transparent);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--line-strong);
    font-size: .78rem; font-weight: 600; color: var(--text);
    opacity: 0; transform: translateY(6px); transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.work:hover .work__go, .work:focus-within .work__go { opacity: 1; transform: none; }
.work__name { font-family: var(--font-display); font-weight: 700; font-size: 1rem; letter-spacing: -.015em; }
.work__meta { font-size: .82rem; color: var(--text-3); }

/* ---------- Услуги: плитки разного размера ---------- */

.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--gap-4); }
.bento__it {
    display: grid; gap: 12px; align-content: start;
    padding: clamp(20px, 2.4vw, 28px);
    background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--radius-lg);
    position: relative; overflow: hidden;
    transition: border-color .25s, transform .25s var(--ease);
}
.bento__it:hover { border-color: var(--line-strong); transform: translateY(-2px); }
/* Ширина ячейки задаётся явно, в долях шести колонок. Ряды обязаны
   складываться ровно в шесть: пустая ячейка в конце ряда читается как
   недоделанная вёрстка, а не как воздух. Раскладка: 4+2, 4+2, 2+4, 6. */
.bento__it--s2 { grid-column: span 2; }
.bento__it--s4 { grid-column: span 4; }
.bento__it--s6 { grid-column: span 6; }
.bento__ic { width: 26px; height: 26px; color: var(--accent-text); }
.bento__t { font-family: var(--font-display); font-weight: 700; font-size: 1.12rem; letter-spacing: -.015em; }
.bento__d { font-size: .92rem; color: var(--text-2); line-height: 1.55; }
.bento__list { display: grid; gap: 6px; margin-top: 2px; }
.bento__list li { font-size: .85rem; color: var(--text-3); padding-left: 16px; position: relative; }
.bento__list li::before { content: ''; position: absolute; left: 2px; top: .62em; width: 5px; height: 5px; border-radius: 1px; background: var(--accent); }

/* Плитка с настоящим снимком вместо текста: не все ячейки должны быть словами.
   Подписи поверх кадра нет намеренно — она ложилась на заголовок самого сайта. */
.bento__shot { position: relative; padding: 0; min-height: 260px; }
.bento__shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.bento__shot figcaption {
    position: absolute; inset: auto 0 0 0; padding: 42px 22px 18px;
    background: linear-gradient(to top, rgba(4,5,6,.92), transparent);
    color: #fff; font-size: .88rem; font-weight: 600;
}

@media (max-width: 900px) {
    .bento { grid-template-columns: repeat(2, 1fr); }
    .bento__it--s2 { grid-column: span 1; }
    .bento__it--s4, .bento__it--s6 { grid-column: span 2; }
}
@media (max-width: 560px) {
    .bento { grid-template-columns: 1fr; }
    .bento__it--s2, .bento__it--s4, .bento__it--s6 { grid-column: span 1; }
}

/* ---------- Кейсы ---------- */

.cases { display: grid; gap: var(--gap-4); }
.case {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(20px, 3vw, 48px);
    align-items: center;
    padding: clamp(22px, 3vw, 36px);
    border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface-1);
}
.case:nth-child(even) { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.case:nth-child(even) .case__body { order: 2; }
.case__body { display: grid; gap: var(--gap-4); align-content: center; }
.case__t { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.3rem, 2.4vw, 1.75rem); letter-spacing: -.025em; line-height: 1.15; }
.case__d { color: var(--text-2); font-size: .95rem; line-height: 1.6; }
.case__stack { display: flex; flex-wrap: wrap; gap: 6px; }
.case__stack span { font-family: var(--font-mono); font-size: .76rem; padding: 4px 9px; border-radius: 7px; background: var(--surface-3); color: var(--text-2); }
.case__art { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: var(--surface-2); aspect-ratio: 16 / 10; }
.case__art img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }

/* Ещё девять сданных проектов. Развёрнутых кейсов три — со снимками экранов
   и разбором; остальные девять здесь коротко. Полоса фактов обещает
   двенадцать, и страница обязана их показать, иначе цифру приходится брать
   на веру ровно там, где человек решает, доверять ли вообще.
   Плитками, а не в столбик: девять строк подряд читаются как список дел. */
.more__lead { margin-top: var(--gap-5); color: var(--text-2); font-size: .95rem; }
.more {
    display: grid; gap: 10px; margin-top: var(--gap-3); list-style: none;
    grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
}
.more__i {
    display: grid; gap: 6px; align-content: start;
    padding: 16px 18px;
    border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-1);
}
.more__t { font-weight: 700; font-size: 1rem; line-height: 1.25; }
.more__d { color: var(--text-2); font-size: .88rem; line-height: 1.5; }
/* Стек — та же сущность, что у больших кейсов, поэтому берёт их класс
   case__stack целиком, а не повторяет его значения. Своя копия у меня уже
   успела разъехаться: кегль вышел 11.52px при минимуме в 12, а цвет дал
   4.48:1 при норме 4.5 — то и другое поймала проверка. Здесь остаётся
   только отступ. */
.more__s { margin-top: 2px; }

/* Ссылка — цель для пальца, а не строка текста: 20px высоты проверка
   справедливо назвала непопадаемыми. */
.more__all { margin-top: var(--gap-4); font-size: .95rem; }
.more__all a { display: inline-flex; align-items: center; min-height: 44px; }

@media (max-width: 820px) {
    .case, .case:nth-child(even) { grid-template-columns: 1fr; }
    .case:nth-child(even) .case__body { order: 0; }
}

/* ---------- Как работаем ---------- */

.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 0; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.step { padding: clamp(22px, 2.6vw, 30px); display: grid; gap: 10px; align-content: start; border-right: 1px solid var(--line); background: var(--surface-1); }
.step:last-child { border-right: 0; }
.step__t { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; letter-spacing: -.015em; }
.step__d { font-size: .89rem; color: var(--text-2); line-height: 1.55; }
.step__when { font-family: var(--font-mono); font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-text); }
@media (max-width: 760px) {
    .step { border-right: 0; border-bottom: 1px solid var(--line); }
    .step:last-child { border-bottom: 0; }
}

/* ---------- Что входит, кроме сайта ---------- */

.after { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.after__list { display: grid; gap: var(--gap-4); }
.after__it { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; }
.after__ic { width: 22px; height: 22px; color: var(--accent-text); margin-top: 3px; }
.after__t { font-weight: 650; font-size: .98rem; margin-bottom: 3px; }
.after__d { font-size: .89rem; color: var(--text-2); line-height: 1.55; }
.after__art { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); background: var(--surface-2); box-shadow: var(--shadow-2); }
.after__art img { width: 100%; }
@media (max-width: 880px) { .after { grid-template-columns: 1fr; } }

/* ---------- Команда ---------- */

.team { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: var(--gap-4); }
.mate { padding: clamp(20px, 2.4vw, 26px); border: 1px solid var(--line); border-radius: var(--radius-lg);
        background: var(--surface-1); display: grid; gap: 8px; align-content: start; }
/* Монограмма вместо фотографии: настоящих фотографий команды нет, а
   поставить чужие лица на страницу, которая продаёт доверие, нельзя. */
.mate__mark {
    display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: 6px;
    border-radius: 11px; background: var(--accent); color: var(--accent-ink);
    font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; line-height: 1;
}
.mate__who { font-family: var(--font-mono); font-size: .82rem; color: var(--text-3); }
.mate__role { font-family: var(--font-display); font-weight: 700; font-size: 1.08rem; letter-spacing: -.015em; line-height: 1.25; }
/* Чем человек занят в вашем проекте — это то, что покупатель хочет знать.
   Список технологий ему ничего не говорит, поэтому он ушёл вниз и помельче. */
.mate__does { font-size: .9rem; color: var(--text-2); line-height: 1.55; }
.mate__stack { font-family: var(--font-mono); font-size: .76rem; color: var(--text-3); line-height: 1.6;
               margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--line); }

/* ---------- Вопросы ---------- */

.faq { display: grid; gap: 0; border-top: 1px solid var(--line); }
.faq__it { border-bottom: 1px solid var(--line); }
.faq__q {
    width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--gap-4);
    padding: 20px 0; background: none; border: 0; cursor: pointer; text-align: left;
    font-family: var(--font-display); font-weight: 700; font-size: clamp(1rem, 1.6vw, 1.12rem); letter-spacing: -.015em;
    color: var(--text); transition: color .2s;
}
.faq__q:hover { color: var(--accent-text); }
.faq__sign { width: 22px; height: 22px; flex: none; color: var(--text-3); transition: transform .3s var(--ease); }
.faq__it.is-open .faq__sign { transform: rotate(45deg); }
.faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s var(--ease); }
.faq__it.is-open .faq__a { grid-template-rows: 1fr; }
.faq__a > div { overflow: hidden; }
.faq__a p { padding-bottom: 22px; color: var(--text-2); font-size: .94rem; line-height: 1.65; max-width: 74ch; }

/* ---------- Живой канал ---------- */

.feed { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: var(--gap-4); }
.post {
    display: grid; gap: 10px; align-content: start;
    padding: clamp(18px, 2.2vw, 24px);
    border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface-1);
    transition: border-color .25s, transform .25s var(--ease);
}
.post:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.post__top { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: .78rem; color: var(--text-3); letter-spacing: .04em; }
.post__t { font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; letter-spacing: -.015em; line-height: 1.3;
           display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.post__d { font-size: .89rem; color: var(--text-2); line-height: 1.55;
           display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ---------- Заявка ---------- */

.ask { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.ask__side { display: grid; gap: var(--gap-5); align-content: start; }
.ask__pts { display: grid; gap: 12px; }
.ask__pt { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; font-size: .92rem; color: var(--text-2); }
.ask__pt svg { width: 19px; height: 19px; color: var(--accent-text); margin-top: 2px; flex: none; }
.ask__form { display: grid; gap: var(--gap-4); padding: clamp(22px, 3vw, 34px); background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--radius-xl); }
.ask__two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-4); }
@media (max-width: 880px) { .ask { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .ask__two { grid-template-columns: 1fr; } }

/* ---------- Итоговый призыв ---------- */

.final { text-align: center; display: grid; gap: var(--gap-5); justify-items: center; padding-block: clamp(56px, 8vw, 100px); }
.final__t { font-family: var(--font-display); font-weight: 800; letter-spacing: -.03em; line-height: 1.08; font-size: clamp(1.9rem, 4.6vw, 3.1rem); max-width: 18ch; }

/* ---------- Не шаблон: цифры и разбор состава ---------- */
/* Раздел намеренно другой по раскладке: до него страница идёт колонкой
   «заголовок сверху, блок снизу», и седьмой такой же экран подряд читается
   как бесконечная простыня. Здесь широкая полоса чисел и две колонки. */

.proof {
    padding-block: clamp(56px, 9vw, 112px);
    background: var(--surface-1);
    border-block: 1px solid var(--line);
}
.proof__head { display: grid; gap: var(--gap-4); max-width: 62ch; margin-bottom: clamp(32px, 4vw, 56px); }

.proof__nums {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--gap-5);
    padding-bottom: clamp(32px, 4vw, 48px);
    margin-bottom: clamp(32px, 4vw, 48px);
    border-bottom: 1px solid var(--line);
}
.proof__num { display: grid; gap: 8px; align-content: start; }
.proof__val {
    font-family: var(--font-display); font-weight: 800;
    font-size: clamp(2.4rem, 5vw, 3.6rem); line-height: .95;
    letter-spacing: -.04em; font-variant-numeric: tabular-nums;
    color: var(--accent-text);
}
.proof__of { font-size: .5em; color: var(--text-3); letter-spacing: -.02em; }
.proof__cap { font-size: .875rem; line-height: 1.5; color: var(--text-2); max-width: 26ch; }

.proof__split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 72px); }
.proof__t {
    font-family: var(--font-display); font-weight: 700; font-size: 1.05rem;
    letter-spacing: -.015em; margin-bottom: var(--gap-4);
}
.proof__list { display: grid; gap: 12px; }
.proof__list li {
    position: relative; padding-left: 26px;
    font-size: .94rem; line-height: 1.5; color: var(--text-2);
}
.proof__list li::before {
    content: ''; position: absolute; left: 0; top: .42em;
    width: 14px; height: 8px; border: 2px solid var(--accent);
    border-top: 0; border-right: 0; transform: rotate(-45deg);
}
/* Во второй колонке галочка не годится: это не «есть везде», а «есть не у всех». */
.proof__list--muted li::before {
    width: 8px; height: 8px; border: 0; border-radius: 2px;
    background: var(--line-strong); transform: none; top: .5em;
}
.proof__list--muted b { color: var(--text); font-weight: 650; font-variant-numeric: tabular-nums; }

@media (max-width: 900px) {
    .proof__nums { grid-template-columns: 1fr 1fr; gap: var(--gap-5) var(--gap-4); }
    .proof__split { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
    .proof__nums { grid-template-columns: 1fr 1fr; }
    .proof__cap { font-size: .82rem; }
}

/* ---------- Живой предпросмотр ---------- */
/* Скриншот доказывает, что сайт нарисован. Работающий сайт внутри страницы
   доказывает, что он работает, и снимает главный страх покупателя: «а на
   телефоне не развалится?». Рамка ровно 390px — ширина обычного телефона. */

.live {
    margin-top: clamp(32px, 4vw, 56px);
    padding: clamp(24px, 3.2vw, 40px);
    border: 1px solid var(--line);
    border-radius: var(--radius-xl);
    background: var(--surface-1);
}
.live__head { display: grid; gap: 10px; margin-bottom: clamp(20px, 2.6vw, 32px); max-width: 56ch; }
.live__t { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.3rem, 2.4vw, 1.75rem); letter-spacing: -.025em; }
.live__d { color: var(--text-2); font-size: .95rem; line-height: 1.6; }

.live__body { display: grid; grid-template-columns: minmax(0, 220px) auto minmax(0, 1fr); gap: clamp(20px, 3vw, 44px); align-items: start; }

.live__tabs { display: grid; gap: 8px; align-content: start; }
.live__tab {
    display: grid; gap: 2px; text-align: left;
    padding: 12px 14px; min-height: 56px;
    border: 1px solid var(--line); border-radius: var(--radius);
    background: var(--surface-2); color: var(--text-2); cursor: pointer;
    transition: border-color .18s, background-color .18s, color .18s;
}
.live__tab:hover { border-color: var(--line-strong); color: var(--text); }
.live__tab[aria-selected="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.live__tabname { font-weight: 650; font-size: .95rem; }
.live__tabmeta { font-size: .8rem; opacity: .75; }

/* Рамка телефона. Ободок нарисован границей и тенью, картинок нет. */
.live__phone {
    width: 390px; max-width: 100%;
    padding: 12px 10px;
    border: 1px solid var(--line-strong);
    border-radius: 34px;
    background: var(--surface-2);
    box-shadow: var(--shadow-2);
}
.live__screen {
    position: relative; overflow: hidden;
    height: 620px; border-radius: 24px;
    background: var(--bg-sunk);
    display: grid; place-items: center;
}
.live__screen iframe { width: 100%; height: 100%; border: 0; display: block; }
.live__hint { color: var(--text-3); font-size: .85rem; text-align: center; padding: var(--gap-5); max-width: 24ch; }

.live__side { display: grid; gap: var(--gap-4); align-content: start; }
.live__note { color: var(--text-2); font-size: .92rem; line-height: 1.6; }

@media (max-width: 1100px) {
    .live__body { grid-template-columns: 1fr; justify-items: start; }
    .live__tabs { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); width: 100%; }
    .live__phone { justify-self: center; }
}
@media (max-width: 460px) {
    /* На телефоне рамка телефона внутри телефона — глупость. Убираем ободок,
       оставляем сам сайт: человек и так смотрит с той самой ширины. */
    .live__phone { width: 100%; padding: 0; border: 0; border-radius: var(--radius-lg); box-shadow: none; }
    .live__screen { height: 520px; border-radius: var(--radius-lg); border: 1px solid var(--line); }
}

/* ---------- Полоса действия на телефоне ---------- */
/* На узких экранах кнопка из шапки прячется, а страница длинная: без этой
   полосы человек на десятом экране остаётся без действия вообще. */

.tapbar {
    position: fixed;
    z-index: 90;
    left: 12px; right: 12px; bottom: 12px;
    display: none;
    align-items: center;
    gap: var(--gap-3);
    padding: 10px 12px 10px 16px;
    background: color-mix(in srgb, var(--surface-1) 94%, transparent);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    box-shadow: var(--shadow-3);
    transform: translateY(140%);
    transition: transform .4s var(--ease);
}
@supports not (backdrop-filter: blur(1px)) { .tapbar { background: var(--surface-1); } }

.tapbar.is-shown { transform: none; }
.tapbar__t { flex: 1; min-width: 0; font-size: .85rem; line-height: 1.3; color: var(--text-2); }
.tapbar .btn { flex: none; }

@media (max-width: 640px) { .tapbar { display: flex; } }
/* Полоса перекрывает низ страницы, поэтому подвалу нужен запас, иначе
   последние ссылки оказываются под ней и по ним не попасть. */
@media (max-width: 640px) { .foot { padding-bottom: 92px; } }