/* ── Компоненты наполненной версии. База и токены — site.css ─────────────────── */

/* Услуги: 2×2 карточки + полоса принципов */
.svc{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap)}
.svc-card{background:var(--surface);border-radius:var(--r-card);box-shadow:var(--shadow);padding:40px 40px 36px;display:flex;flex-direction:column;gap:16px}
.svc-card .ic{width:56px;height:56px;border-radius:var(--r-node);display:grid;place-items:center;background:var(--bg);box-shadow:var(--shadow)}
.svc-card h3{font-size:25px;margin-top:10px}
.svc-card p{font-size:16px;line-height:1.55;color:var(--muted)}
.svc-card > ul{list-style:none;display:flex;flex-direction:column;gap:10px;margin-top:6px;margin-bottom:36px}
.svc-card > ul li{font-size:15px;line-height:1.45;padding-left:16px;position:relative}
.svc-card > ul li::before{content:"";position:absolute;left:0;top:.6em;width:6px;height:6px;border-radius:50%;background:var(--accent)}
.svc-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:22px;border-top:1px solid var(--line)}
.svc-links a{display:inline-flex;align-items:center;gap:8px;font:600 13.5px var(--f-body);text-decoration:none;color:var(--ink);cursor:pointer;padding:6px 12px 6px 6px;border-radius:999px;background:var(--bg);transition:background .2s,color .2s}
.svc-links a b{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--surface);font:700 11px var(--f-head);color:var(--muted)}
.svc-links a:hover{background:var(--accent);color:#fff}
.svc-links a:hover b{color:var(--accent)}
.svc-links .soon{display:inline-flex;align-items:center;gap:8px;font:600 13.5px var(--f-body);color:var(--muted);padding:6px 12px;border-radius:999px;border:1px dashed var(--dot)}
.svc-links .soon::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--dot)}
.svc-links-lbl{flex-basis:100%;margin-bottom:4px;font:600 12px var(--f-body);letter-spacing:.01em;text-transform:uppercase;color:var(--muted)}

/* Принципы — отдельный блок главной */
.tenets{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap)}
.tenet{background:var(--surface);border-radius:var(--r-card);box-shadow:var(--shadow);padding:32px;display:flex;flex-direction:column;gap:12px}
.tenet i{width:14px;height:14px;border-radius:50%;background:var(--accent);margin-bottom:6px}
.tenet h3{font-size:24px}
.tenet p{font-size:16px;line-height:1.55;color:var(--muted)}

/* Мини-макеты в шапке карточки услуги: точечная сетка как у обложек кейсов, внутри — кусочек интерфейса */
.mini{height:176px;border-radius:20px;background-color:var(--cover);background-image:radial-gradient(var(--dot) 1.4px,transparent 1.6px);background-size:28px 28px;
  display:flex;align-items:center;justify-content:center;padding:20px;overflow:hidden;margin-bottom:6px}
.mini.live{position:relative;background-image:none}  /* сетку рисует холст .df и подсвечивает у курсора */
.mini.live > :not(.df){position:relative;z-index:1}
.mini-letter{width:230px;background:#fff;border-radius:6px;box-shadow:var(--shadow);padding:14px 16px;display:flex;flex-direction:column;gap:7px;transform:translateY(22px) rotate(-2deg)}
.mini-letter b{font:800 12px var(--f-head);letter-spacing:-.01em}
.mini-letter i{height:5px;border-radius:3px;background:var(--line)}
.mini-letter i.m{width:75%}.mini-letter i.s{width:50%}
.mini-letter .q{font:500 9.5px/1.4 var(--f-body);background:var(--accent-tint);color:var(--accent);border-left:2px solid var(--accent);padding:5px 7px;border-radius:0 4px 4px 0}
.mini-call{width:100%;max-width:330px;display:flex;flex-direction:column;gap:8px}
.mini-call .ln{background:#fff;border-radius:12px;padding:8px 12px;font:500 12.5px/1.35 var(--f-body);box-shadow:0 6px 16px #0000000f}
.mini-call .who{display:block;font:600 10.5px var(--f-body);color:var(--muted);text-transform:uppercase;letter-spacing:.02em;margin-bottom:2px}
.mini-call .chk{display:flex;gap:6px;flex-wrap:wrap}
.mini-call .chk span{font:600 11px var(--f-body);padding:5px 9px;border-radius:999px}
.mini-call .ok{background:var(--accent-tint);color:var(--accent)}
.mini-call .no{background:#fff;color:var(--ink);border:1px dashed var(--muted)}
.mini-chat{width:100%;max-width:330px;display:flex;flex-direction:column;gap:10px}
.mini-chat .out{align-self:flex-end;max-width:84%;background:var(--accent);color:#fff;font:500 12.5px/1.35 var(--f-body);padding:9px 13px;border-radius:16px 16px 4px 16px;box-shadow:0 10px 22px rgba(26,80,230,.22)}
.mini-chat .in{align-self:flex-start;max-width:88%;background:#fff;font:500 12.5px/1.35 var(--f-body);padding:9px 13px;border-radius:16px 16px 16px 4px;box-shadow:0 6px 16px #0000000f}
.mini-chat .in b{color:var(--accent)}
.mini-table{width:100%;max-width:330px;background:#fff;border-radius:12px;box-shadow:0 6px 16px #0000000f;padding:6px 0;font:500 12px var(--f-body)}
.mini-table .r{display:grid;grid-template-columns:1.6fr 1fr 1fr;padding:6px 14px;font-variant-numeric:tabular-nums}
.mini-table .r span:not(:first-child){text-align:right}
.mini-table .h{font:600 10.5px var(--f-body);color:var(--muted);text-transform:uppercase;letter-spacing:.02em}
.mini-table .bad{background:var(--accent-tint);color:var(--accent);font-weight:600}
.mini-path{list-style:none;display:flex;align-items:flex-start;justify-content:space-between;width:100%;max-width:340px;position:relative}
.mini-path::before{content:"";position:absolute;left:calc(100% / 6);right:calc(100% / 6);top:12px;height:2px;background:linear-gradient(90deg,var(--dot),var(--accent))}
.mini-path li{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;width:calc(100% / 3);text-align:center}
.mini-path i{height:24px;display:grid;place-items:center}
.mini-path i::before{content:"";width:var(--d);height:var(--d);border-radius:50%;background:var(--c);box-shadow:0 0 0 5px var(--cover)}
.mini-path span{font:600 12px/1.3 var(--f-body)}

/* Telegram на сайте: обои в фирменных тонах вместо зелёных по умолчанию — тёплый фон сайта, голубые пятна от синего;
   капсула названия с подписью — выше, чтобы вторая строка не липла к нижнему краю. Общий макет assets/telegram-ui не меняем */
.tg .tg-screen{background:
  radial-gradient(120% 60% at 15% 10%,#F4F1EA 0,transparent 60%),
  radial-gradient(90% 55% at 90% 35%,#C8D5F6 0,transparent 62%),
  radial-gradient(100% 60% at 20% 80%,#DDE5F9 0,transparent 60%),
  radial-gradient(90% 50% at 85% 95%,#EEE8DC 0,transparent 60%),
  #E4E7EF}
/* под новые обои — кнопки и стекло шапки в синеватом тоне (у Telegram они берут оттенок обоев) */
.tg{--tg-btn-bg:rgba(40,70,150,.30);--tg-glass:rgba(250,251,255,.72)}
.tg .tg-title:has(span){height:50px}
.tg .tg-title:has(span) b{margin-top:7px}

/* Ряд экранов Telegram на странице кейса: телефоны на подложке-обложке, подпись под каждым */
.screens{display:grid;grid-template-columns:repeat(3,1fr);column-gap:var(--gap);row-gap:40px}
/* подложки одной высоты, подписи на одной линии — строки общие для всех трёх (subgrid) */
.screens .screen{display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:6px}
/* группы экранов по контурам схемы: «Команде» (личка с ботом) и «Руководителю» (база) — шапка с линией над своими экранами */
.sgrp{grid-column:span var(--k);grid-row:span 4;display:grid;grid-template-columns:subgrid;grid-template-rows:subgrid;column-gap:var(--gap);row-gap:0}
.sgrp-hd{grid-column:1/-1;display:flex;align-items:baseline;gap:10px;padding-bottom:14px;margin-bottom:24px;border-bottom:1px solid var(--line-strong)}
.sgrp-hd b{font:800 20px/1.2 var(--f-head);letter-spacing:-.01em}
.sgrp-hd span{font-size:15px;color:var(--muted)}
.screen-ph{align-items:center}

/* База проекта — записи-выжимки карточкой в стиле мини-макетов */
.db-card{width:100%;max-width:310px;background:#fff;border-radius:18px;box-shadow:0 10px 26px #00000014;padding:18px 18px 14px;display:flex;flex-direction:column}
.db-hd{display:flex;flex-direction:column;gap:2px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.db-hd b{font:800 20px/1.2 var(--f-head);letter-spacing:-.02em}
.brick{padding:12px 0;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:6px}
.brick-top{display:flex;justify-content:space-between;align-items:center;gap:8px;font:600 11px var(--f-body);color:var(--muted)}
.brick p{font-size:13px;line-height:1.45}
.brick-time{font:500 11px var(--f-body);color:var(--muted);margin-top:-2px}
.brick-tags{display:flex;flex-wrap:wrap;gap:5px}
.brick-tags em{font-style:normal;font:500 10.5px var(--f-body);color:var(--muted);padding:3px 8px;border-radius:999px;border:1px solid var(--line)}
.src{font-style:normal;font:600 10.5px var(--f-body);padding:4px 8px;border-radius:999px;white-space:nowrap}
.src--in{background:var(--accent-tint);color:var(--accent)}
.src--out{background:var(--accent);color:#fff}
.src--meet{background:var(--bg);color:var(--ink)}
.db-ft{padding-top:12px;font-size:11.5px;color:var(--muted)}
.screen{display:flex;flex-direction:column;gap:6px}
.screen-ph{background:var(--cover);border-radius:var(--r-card);box-shadow:var(--shadow);padding:32px 16px;display:flex;justify-content:center;margin-bottom:14px}
.screen b{font:800 18px/1.3 var(--f-head);letter-spacing:-.01em}
.screen span{font-size:15px;line-height:1.5;color:var(--muted)}
@media (max-width:980px){ .screens{grid-template-columns:1fr 1fr} .sgrp{grid-column:1/-1;grid-row:auto;grid-template-rows:none;row-gap:40px} .sgrp .screen{grid-row:auto;display:flex} }
@media (max-width:700px){ .screens{grid-template-columns:1fr} .sgrp{grid-template-columns:1fr} }

/* Системы, к которым подключаемся — строка тегов под карточками услуг */
.integ{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:28px}
.integ .lbl{margin-right:10px}
.integ .tag{cursor:default;transition:background .2s,color .2s,border-color .2s,transform .2s}
.integ .tag::before{transition:background .2s,transform .2s}
.integ .tag:hover{background:var(--accent);border-color:var(--accent);color:#fff;transform:translateY(-2px)}
.integ .tag:hover::before{background:#fff;transform:scale(1.3)}

/* Флагман разработки — рабочее окружение: на всю ширину, «обычно» против «с тулкитом» */
.svc-flag{grid-column:1 / -1;display:grid;grid-template-columns:5fr 7fr;gap:40px;padding:40px}
.svc-flag-main{display:flex;flex-direction:column;gap:14px}
.svc-flag h3{font-size:32px;line-height:1.1}
.flag-badge{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;height:28px;padding:0 12px;border-radius:999px;background:var(--accent-tint);color:var(--accent);font:600 12.5px var(--f-body)}
.flag-badge::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent)}
/* Сравнение таблицей: заголовок строки | «Обычно» серой полосой | «С тулкитом» синей полосой.
   Полосы сплошные: ячейки одной колонки стыкуются без зазора, скругляются только первая и последняя */
/* Вся таблица — один прямоугольник (владелец, 2026-10-13: иначе заголовки строк «болтаются»).
   Внутри: заголовки строк и «Обычно» — на общем фоне с тонкими линиями, «С тулкитом» — сплошной синей полосой */
.vs-t{display:grid;grid-template-columns:auto 1fr 1fr;align-self:center;background:var(--bg);border-radius:24px;padding:8px 8px 8px 24px}
.vs-t > *{padding:14px 20px;font-size:15px;line-height:1.35}
.vs-t .k{padding-left:0;font:700 14px/1.35 var(--f-body);color:var(--ink);display:flex;align-items:center}
.vs-t .was,.vs-t .now{display:flex;align-items:center}
.vs-t .was{color:var(--muted)}
.vs-t .now{background:var(--accent);color:#fff;font-weight:600}
.vs-t .lbl{padding-top:16px;padding-bottom:8px}
.vs-t .lbl.now{color:var(--accent-soft);font-weight:inherit}
.vs-t .first{border-radius:18px 18px 0 0}
.vs-t .now.last{border-radius:0 0 18px 18px;padding-bottom:18px}
.vs-t .k.sep,.vs-t .was.sep{box-shadow:inset 0 1px 0 var(--line)}
.vs-t .now.sep{box-shadow:inset 0 1px 0 rgba(255,255,255,.18)}

/* Консалтинг — отдельный блок, не в ряд с разработкой. Инверсия: тёмная обложка рилсов
   (cover-dark #1A1917, точки белые ~10%), маркеры — белые точки */
/* Ритм главной в два уровня. Между группами меню (Услуги / Кейсы / Как работаем) — 192px и тонкая линия
   посередине; внутри группы (разработка → консалтинг, принципы → «Как работаем») — 120px без линии.
   Тёмная и синяя плашки отделяют себя сами, линии перед ними не ставим. */
.sec--join{padding-top:24px}
.sec--ruled{padding-top:0}
.sec--ruled > .wrap::before{content:"";display:block;height:1px;background:var(--line);margin-bottom:96px}
/* Разделитель секций: тонкая линия цвета разделителей */
.cons{display:grid;grid-template-columns:5fr 7fr;gap:48px;background:#1A1917;color:#fff;border-radius:var(--r-band);padding:72px 64px;position:relative;overflow:hidden}
.cons .df{position:absolute;inset:0;z-index:0}
.cons > :not(.df){position:relative;z-index:1}
.cons .lbl{color:rgba(255,255,255,.6)}
.cons-hd{display:flex;flex-direction:column;gap:16px}
.cons-hd h2{font-size:clamp(32px,3.8vw,50px);color:#fff}
.cons-list{display:flex;flex-direction:column}
.cons-item{display:flex;gap:18px;padding:24px 0;border-top:1px solid rgba(255,255,255,.14)}
.cons-item:first-child{border-top:0;padding-top:4px}
.cons-item > i{flex:none;width:12px;height:12px;border-radius:50%;background:#fff;margin-top:9px}
.cons-item h3{font-size:22px;margin-bottom:6px;color:#fff}
.cons-item p{font-size:16px;line-height:1.55;color:rgba(255,255,255,.7)}

/* Переход из услуги к кейсу: карточка мягко светится синим, пока на неё смотрят */
.case.glow{animation:glow 2.8s ease-in-out}
@keyframes glow{
  0%{box-shadow:var(--shadow),0 0 0 0 rgba(26,80,230,0)}
  18%,70%{box-shadow:var(--shadow),0 0 0 2px rgba(26,80,230,.35),0 0 48px 6px rgba(26,80,230,.28)}
  100%{box-shadow:var(--shadow),0 0 0 0 rgba(26,80,230,0)}}

/* Страница кейса: мелкие свойства под карточками «Что мы сделали» — плашка в стиле паспорта кейса */
.feats{margin-top:var(--gap);background:var(--surface);border-radius:var(--r-card);box-shadow:var(--shadow);padding:28px 0 32px}
.feats > .lbl{display:block;padding:0 32px 20px}
.feats-row{display:grid;grid-template-columns:repeat(var(--k),1fr)}
.feats-row > div{padding:0 32px;border-left:1px solid var(--line);display:flex;flex-direction:column;gap:8px}
.feats-row > div:first-child{border-left:0}
.feats-row b{font:800 17px/1.3 var(--f-head);letter-spacing:-.01em}
.feats-row p{font-size:15px;line-height:1.55;color:var(--muted)}
@media (max-width:980px){ .feats-row{grid-template-columns:1fr 1fr;row-gap:24px} .feats-row > div:nth-child(odd){border-left:0} }
@media (max-width:700px){ .feats-row{grid-template-columns:1fr} .feats-row > div{border-left:0} .feats > .lbl,.feats-row > div{padding-inline:20px} }
.principles{display:grid;grid-template-columns:repeat(4,1fr);gap:0 40px;margin-top:40px}
.principles div{padding-top:24px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:10px}
.principles b{font:800 19px/1.25 var(--f-head);letter-spacing:-.02em}
.principles p{font-size:16px;line-height:1.6;color:var(--muted)}

/* Кейсы: бенто 7/5 и 4/4/4 */
.cases.bento{grid-template-columns:repeat(12,1fr)}
.case.w7{grid-column:span 7}.case.w5{grid-column:span 5}.case.w4{grid-column:span 4}
.case.w4 .case-body h3{font-size:20px}
.case .cover{transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.cover--media{padding:0;background-image:none;background-color:#d9d6cf}
.cover--media img,.cover--media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.case:hover .cover--media img,.case:hover .cover--media video{transform:scale(1.04)}
.cover--media .num{z-index:1;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.4)}
.cover-badge{position:absolute;left:16px;bottom:16px;z-index:1;display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:999px;background:rgba(250,249,246,.92);font:600 12.5px var(--f-body);backdrop-filter:blur(6px)}
.cover-badge::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent)}

/* Обложка с телефоном: экран чата выглядывает снизу */
.cover--tg{align-items:flex-start;padding-top:28px}
.cover--tg .tg{--tg-zoom:.52;transform:translateY(0);transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.case:hover .cover--tg .tg{transform:translateY(-14px)}

/* Письмо на бланке (Альфа) */
.letter{background:#fff;border-radius:6px;box-shadow:0 18px 40px #0000001f,0 3px 8px #00000014;padding:22px 24px;width:min(330px,78%);display:flex;flex-direction:column;gap:7px;position:relative}
.letter .lh{display:flex;justify-content:space-between;align-items:center;padding-bottom:10px;margin-bottom:4px;border-bottom:2px solid var(--ink)}
.letter .lh i{display:block;width:72px;height:8px;border-radius:4px;background:var(--ink)}
.letter .lh span{font:600 9px var(--f-body);color:var(--muted)}
.letter .lt{font:800 13px var(--f-head);letter-spacing:-.01em;margin:4px 0 2px}
.letter .ln{height:6px;border-radius:3px;background:#E4E1DA}
.letter .ln.s{width:62%}.letter .ln.m{width:84%}
.letter .q{font:500 9.5px/1.4 var(--f-body);background:var(--accent-tint);color:var(--accent);border-left:2px solid var(--accent);padding:6px 8px;border-radius:0 4px 4px 0}
.letter .sg{display:flex;justify-content:space-between;align-items:flex-end;margin-top:8px}
.letter .sg i{display:block;width:60px;height:22px;border-bottom:1px solid var(--ink)}
.letter .sg span{font:500 8.5px var(--f-body);color:var(--muted)}
.ask{position:absolute;z-index:2;background:var(--accent);color:#fff;font:500 12.5px/1.35 var(--f-body);padding:10px 14px;border-radius:16px 16px 4px 16px;max-width:230px;box-shadow:0 10px 24px rgba(26,80,230,.3)}
/* обложка Альфы: сначала запрос (справа сверху), под ним ответ — письмо, низ письма уходит за край обложки */
.cover--letter{flex-direction:column;justify-content:flex-start;padding-top:22px}
.cover--letter .ask{position:relative;align-self:flex-end;flex:none}
.cover--letter .letter{flex:none;margin-top:14px;transform-origin:top center}

/* Путь материала (Культура платежей): точки растут от этапа к этапу */
.path{list-style:none;display:flex;flex-direction:column;gap:0;width:min(360px,86%);position:relative}
.path::before{content:"";position:absolute;left:13px;top:14px;bottom:14px;width:2px;background:var(--line)}
.path li{display:grid;grid-template-columns:28px 1fr auto;gap:12px;align-items:center;padding:7px 0;position:relative}
.path li i{width:var(--d);height:var(--d);border-radius:50%;background:var(--c);justify-self:center;box-shadow:0 0 0 4px var(--cover)}
.path li span{font:600 14px var(--f-body)}
.path li em{font:500 12px var(--f-body);font-style:normal;color:var(--muted)}
.path li.end span{color:var(--accent)}

/* Большая версия пути на странице кейса */
.path.big{width:100%;max-width:560px}
.path.big li{padding:12px 0;grid-template-columns:28px 1fr}
.path.big li span{font:800 18px var(--f-head);letter-spacing:-.015em}
.path.big li em{grid-column:2;font-size:14.5px;line-height:1.45;margin-top:-4px}
.path.big li i{align-self:start;margin-top:6px}
.path.big::before{top:20px;bottom:20px}

/* Команда агентов */
.roster{display:flex;flex-direction:column;gap:18px}
.roster-g{display:flex;flex-direction:column;gap:10px}
.roster-g > span{font:600 12.5px var(--f-body);text-transform:uppercase;color:var(--muted);letter-spacing:.02em}
.roster-g .tags .tag{background:var(--bg)}

/* Окно чата Альфы на странице кейса */
.chatline{display:flex;flex-direction:column;gap:10px;align-items:flex-end}
.chatline .ask{position:static}
.chatline .ans{align-self:flex-start;background:var(--surface);border-radius:16px 16px 16px 4px;box-shadow:var(--shadow);padding:10px 14px;font:500 12.5px/1.4 var(--f-body);max-width:260px}
.chatline .ans b{color:var(--accent)}

/* Галерея-матрица (креативный тулкит) */
.gal{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.gal figure{aspect-ratio:4/5}
.gal figure.g-wide{grid-column:span 2;aspect-ratio:auto}
.gal figure{position:relative;margin:0;border-radius:22px;overflow:hidden;background:#d9d6cf;box-shadow:var(--shadow)}
.gal img,.gal video{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.gal figure:hover img,.gal figure:hover video{transform:scale(1.04)}
.gal figcaption{position:absolute;left:12px;bottom:12px;display:inline-flex;align-items:center;gap:7px;padding:6px 11px;border-radius:999px;background:rgba(250,249,246,.92);font:600 12px var(--f-body)}
.gal figcaption::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent)}

.gal-note{margin-top:16px;font-size:15px;color:var(--muted)}

/* Карусель (Эльбрус, материалы) */
.car-wrap{position:relative}
.car{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:4px 2px 24px}
.car::-webkit-scrollbar{display:none}
.car{cursor:grab;user-select:none}
.car.drag{cursor:grabbing;scroll-snap-type:none}
.car figure{flex:0 0 auto;height:440px;margin:0;border-radius:22px;overflow:hidden;scroll-snap-align:start;background:#d9d6cf;box-shadow:var(--shadow);position:relative}
.car img{height:100%;width:auto;display:block}
.car figcaption{position:absolute;left:12px;bottom:12px;display:inline-flex;align-items:center;gap:7px;padding:6px 11px;border-radius:999px;background:rgba(250,249,246,.92);font:600 12px var(--f-body)}
.car-nav{display:flex;align-items:center;gap:10px;margin-top:4px}
.car-nav button{all:unset;cursor:pointer;width:44px;height:44px;border-radius:50%;border:1px solid var(--line-strong);display:grid;place-items:center;transition:background .2s,color .2s}
.car-nav button:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.car-nav button .i{width:18px;height:18px}
.car-nav button.prev .i{transform:rotate(180deg)}
.car-dots{display:flex;gap:7px;margin-left:8px}
.car-dots i{width:7px;height:7px;border-radius:50%;background:var(--dot);transition:background .2s,transform .2s}
.car-dots i.on{background:var(--accent);transform:scale(1.35)}


/* Кейс: варианты панели «как выглядит» */
.panel-media{padding:0;overflow:hidden;position:relative;min-height:420px}
.panel-media img,.panel-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.panel-plain{align-items:center;justify-content:center;background:var(--cover);background-image:radial-gradient(var(--dot) 1.4px,transparent 1.6px);background-size:28px 28px}
.show.even{grid-template-columns:1fr 1fr}

/* Мелкие подписи-сноски внутри страницы */
.aside-note{font-size:14px;color:var(--muted);margin-top:14px}

/* iPad горизонтально и узкий ноутбук: три узкие карточки в ряд резали схемы в обложках, таблица «Обычно / С тулкитом» сжималась */
@media (max-width:1180px){
  .svc-flag{grid-template-columns:1fr;gap:28px}
  .case.w7,.case.w5,.case.w4{grid-column:span 6}
  .cases .case:last-child:nth-child(odd){grid-column:span 12}
  .cases .case .cover,.cases .case.w4 .cover{aspect-ratio:auto;min-height:0;height:350px}
  .cases .case.w7 .cover{height:auto;min-height:350px}
}
@media (max-width:980px){
  .svc,.tenets{grid-template-columns:1fr}
  .svc-flag,.cons{grid-template-columns:1fr;gap:28px}
  .principles{grid-template-columns:1fr 1fr}
  .case.w7,.case.w5,.case.w4{grid-column:span 12}
  /* карточки в одну колонку: обложки одной высоты, а не по пропорциям десктопной сетки (узкая 4:3.3 вытягивалась до 450px) */
  .cases .case .cover,.cases .case.w4 .cover{aspect-ratio:auto;min-height:0;height:350px}
  .cases .case.w7 .cover{height:auto;min-height:350px}  /* чат-обложка — по содержимому, иначе срежется последний ответ */
  .gal{grid-template-columns:repeat(2,1fr)}
  .gal figure.g-wide{aspect-ratio:8/5}
  .car figure{height:340px}
  .show.even{grid-template-columns:1fr}
}
@media (max-width:700px){
  .sec--ruled > .wrap::before{margin-bottom:64px}
  .principles{grid-template-columns:1fr}
  .svc-card{padding:24px}
  .cases .case .cover,.cases .case.w4 .cover{min-height:0;height:280px}
  .cases .case.w7 .cover{height:auto;min-height:280px}
  /* на телефоне — как десктоп, только уже: серая часть и сплошная синяя полоса; заголовок строки — над парой,
     левая половина на фоне, правая продолжает синюю полосу; линии через обе колонки (вариант B, владелец 2026-10-13) */
  .vs-t{grid-template-columns:minmax(0,1fr) minmax(0,1fr);padding:8px}
  .vs-t > span:first-child{display:none}
  .vs-t > *{font-size:14px}
  .vs-t .was,.vs-t .now{padding:2px 14px 14px}
  .vs-t .lbl{padding:12px 14px 6px}
  .vs-t .lbl.now{border-radius:16px 16px 0 0}
  .vs-t .now.last{border-radius:0 0 16px 16px;padding-bottom:14px}
  .vs-t .k{grid-column:1 / -1;padding:12px 14px 4px;font-size:13px;background:linear-gradient(90deg,transparent 50%,var(--accent) 50%)}
  .vs-t .was.sep,.vs-t .now.sep{box-shadow:none}
  .cons{padding:48px 24px}
  .svc-flag h3{font-size:26px}
  .car figure{height:280px}
  .letter{width:86%}
  .cover--letter .ask{max-width:180px}
}

/* Результат одной фразой (когда чисел нет) */
.fig.quote{display:flex;gap:18px;align-items:flex-start}
.fig.quote::before{content:"";flex:none;width:14px;height:14px;border-radius:50%;background:var(--accent);margin-top:12px}
.fig.quote p{margin:0;max-width:34ch;font:800 clamp(22px,2.4vw,30px)/1.3 var(--f-head);letter-spacing:-.02em}
.row-intro{font-size:18px;line-height:1.55;max-width:60ch;margin-bottom:24px}


/* правки после первого просмотра */
.cover--tg{align-items:flex-end;padding:0 24px}
.cover--tg .tg{margin-bottom:-150px}
.case:hover .cover--tg .tg{transform:translateY(-10px)}
.case.w4 .cover{aspect-ratio:4/3.3}
.case.w4 .cover--letter .letter{transform:scale(.86)}
.case.w4 .path{transform:scale(.92)}
.panel-plain .letter{width:min(400px,86%);transform:scale(1.18)}
.panel-plain{min-height:440px}
.cover .chatline{width:min(420px,90%)}
.ans-kb{display:flex;gap:6px;margin-top:8px}
.ans-kb i{flex:1;font-style:normal;text-align:center;padding:6px 0;border-radius:10px;background:var(--accent-tint);color:var(--accent);font-weight:600}

/* Safari (iPhone): видео в скруглённом блоке периодически даёт тонкую чёрную полосу по краю — шов слоя,
   в самих кадрах её нет (проверено ffmpeg, 2026-10-13). Видео на 1px шире блока со всех сторон, блок режет маской */
.gal figure,.car figure,.cover--media,.panel-media{-webkit-mask-image:-webkit-radial-gradient(white,black);mask-image:radial-gradient(white,black)}
.gal video,.car video{width:calc(100% + 2px);height:calc(100% + 2px);margin:-1px}
.cover--media video,.panel-media video{inset:-1px;width:calc(100% + 2px);height:calc(100% + 2px)}