/* ═══════════ КАРКАС — общий стиль (index + страницы кейсов) ═══════════ */
:root {
  --bg:       #141210;   /* тёплый почти-чёрный */
  --bg-elev:  #1e1a16;   /* приподнятые блоки */
  --ink:      #f4eee3;   /* тёплый белый */
  --accent:   #f4eee3;   /* монохром: акцент = тёплый белый */
  --accent-2: #f4eee3;
  --grad:     linear-gradient(120deg, #f4eee3 0%, #f4eee3 100%);
  /* Единственный цвет в монохромной палитре: фоновые слова секций,
     счётчики в панели, блик по контуру кнопки. Держим в одном месте. */
  --brand:    #2ba6d8;   /* аквамарин с уклоном в синий */
}
:root[data-theme="light"] {
  --bg:       #f1ede3;   /* тёплый светлый */
  --bg-elev:  #ffffff;
  --ink:      #17140d;   /* тёплый тёмный */
  --accent:   #17140d;
  --accent-2: #17140d;
  --grad:     linear-gradient(120deg, #17140d 0%, #17140d 100%);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); text-wrap: pretty; font-family: 'Manrope', system-ui, sans-serif; overflow-x: hidden; }
a { color: inherit; }
::selection { background: var(--accent); color: var(--bg); }
img { display: block; }

/* ── Атмосферные цветные свечения (глубина, «жизнь») ── */
.page { position: relative; }
.page::before { content: none; }
.page > * { position: relative; z-index: 1; }

.nav-link { display: inline-flex; align-items: center; gap: 7px; padding: 8px 6px; margin: -8px -6px; color: color-mix(in srgb, var(--ink) 68%, transparent); text-decoration: none; font-family: 'Roboto Slab', Georgia, serif; font-weight: 500; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; transition: color .25s ease; cursor: pointer; }
.nav-link:hover { color: var(--accent); }

.btn { position: relative; overflow: hidden; isolation: isolate; display: inline-flex; align-items: center; gap: 10px; font-family: 'Roboto Slab', Georgia, serif; font-weight: 700; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; padding: 15px 30px; border-radius: 8px; text-decoration: none; cursor: pointer; transition: transform .3s ease, color .3s ease, border-color .3s ease; }
.btn-fill, .btn-line { background: transparent; color: var(--ink); border: 1px solid color-mix(in srgb, var(--ink) 42%, transparent); box-shadow: none; }
.btn-fill::before, .btn-line::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--ink); transform: scaleX(0); transform-origin: left center; transition: transform .42s cubic-bezier(.45,0,.15,1); }
.btn-fill:hover, .btn-line:hover { color: var(--bg); border-color: var(--ink); transform: translateY(-1px); }
.btn-fill:hover::before, .btn-line:hover::before { transform: scaleX(1); }

.arrow { width: 42px; height: 42px; border: 1px solid color-mix(in srgb, var(--ink) 28%, transparent); border-radius: 8px; background: transparent; color: var(--ink); display: grid; place-items: center; cursor: pointer; font-size: 14px; transition: border-color .25s ease, color .25s ease; }
.arrow:hover { border-color: var(--accent); color: var(--accent); }

.soc { color: color-mix(in srgb, var(--ink) 48%, transparent); text-decoration: none; font-family: 'Roboto Slab', Georgia, serif; font-weight: 500; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; transition: color .25s ease; }
.soc:hover { color: var(--accent); }

/* ── Карточки проектов: живые цветные скрины ── */
.proj-card { transition: transform .4s ease, box-shadow .4s ease; }
.proj-card img { transition: filter .5s ease, transform .6s ease; }
.proj-card:hover { transform: translateY(-4px); box-shadow: 0 24px 50px -22px rgba(0,0,0,.55); }
.proj-card:hover img { filter: saturate(1.15) brightness(1) !important; transform: scale(1.05); }
.proj-card .mag { opacity: 0; transition: opacity .3s ease; border-color: var(--accent) !important; color: var(--accent); background: color-mix(in srgb, var(--bg) 55%, transparent); }
.proj-card:hover .mag { opacity: 1; }

.k-input { font-family: 'Manrope', sans-serif; font-size: 15px; font-weight: 300; color: var(--ink); background: transparent; border: none; border-bottom: 1px solid color-mix(in srgb, var(--ink) 24%, transparent); padding: 14px 2px; transition: border-color .25s ease; }
.k-input::placeholder { color: color-mix(in srgb, var(--ink) 40%, transparent); font-weight: 300; }
.k-input:focus { outline: none; border-bottom-color: var(--accent); }

/* ── Страницы кейсов ── */
.chip { display: inline-block; font-family: 'Roboto Slab', Georgia, serif; font-weight: 500; font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: color-mix(in srgb, var(--ink) 78%, transparent); background: color-mix(in srgb, var(--accent) 8%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); border-radius: 100px; padding: 8px 15px; transition: border-color .25s ease, color .25s ease, background .25s ease; }
.chip:hover { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.case-kicker { font-family: 'Roboto Slab', Georgia, serif; font-weight: 700; font-size: clamp(18px,2vw,24px); letter-spacing: .08em; text-transform: uppercase; }
.case-num { font-family: 'Unbounded', system-ui, sans-serif; font-weight: 600; font-size: clamp(30px,3.4vw,46px); line-height: 1; letter-spacing: .01em; color: var(--accent); }
.do-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; }
.do-list li { position: relative; padding-left: 30px; font-family: 'Manrope', sans-serif; font-weight: 300; font-size: 15px; line-height: 1.7; color: color-mix(in srgb, var(--ink) 78%, transparent); max-width: 62ch; }
.do-list li::before { content: '→'; position: absolute; left: 0; top: 0; color: var(--accent); font-weight: 600; }
.do-list li strong { font-family: 'Unbounded', system-ui, sans-serif; font-weight: 600; font-size: .88em; letter-spacing: .01em; color: var(--ink); }
/* Пункт с переходом: текст слева, кнопка справа. Ссылка внутри абзаца
   переносилась на свою строку и читалась как случайное подчёркивание —
   кнопка у правого края видна сразу и попадает под курсор без прицеливания. */
.do-list li.do-row { display: flex; align-items: center; justify-content: space-between; gap: 14px 28px; flex-wrap: wrap; max-width: none; }
/* Врезка стоит РЯДОМ СО СПИСКОМ, а не внутри пункта: внутри она растягивала
   одну строку списка на высоту кадра, и между соседними пунктами зияла дыра.
   Отдельная колонка даёт и кадр крупнее, и ровный ритм списка.
   Кадр липнет к верху экрана, пока список прокручивается мимо. */
.withmedia { display: grid; grid-template-columns: minmax(0,1fr) clamp(280px,32%,420px);
  gap: clamp(24px,3.4vw,52px); align-items: start; }
.withmedia > .do-media { display: flex; flex-direction: column; gap: 14px; margin: 0;
  position: sticky; top: clamp(80px,10vh,110px); }
@media (max-width: 900px) {
  .withmedia { grid-template-columns: 1fr; }
  .withmedia > .do-media { position: static; }
  .withmedia > .do-media img { max-width: 460px; }
}
.do-list li.do-row > div { flex: 1 1 340px; min-width: 0; max-width: 62ch; }
.do-list li.do-row > .btn { flex: none; }
/* Компактный размер кнопки: рядом с текстом пункта обычная (15/30) выглядит
   вывеской и ломает ритм списка. */
.btn.btn-sm { padding: 10px 20px; font-size: 11.5px; gap: 8px; }
/* Врезка: кадр интерфейса, под ним кнопка перехода. Одна кнопка в пустой
   правой колонке смотрелась потерянной — снимок и объясняет, куда ведёт
   переход, и заполняет полосу. Кадр открывается на весь экран (класс .shot
   подхватывает lightbox.js), фото меняется из панели. Раскладку задаёт
   .withmedia ниже: врезка живёт рядом со списком, а не внутри пункта. */
.do-media img { width: 100%; height: auto; display: block; border-radius: 9px;
  border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
  box-shadow: 0 16px 40px -28px rgba(0,0,0,.55); }
.do-media .btn { width: 100%; justify-content: center; }
@media (max-width: 560px) { .do-list li.do-row > .btn { width: 100%; justify-content: center; } }

/* ═══ Инлайн-элементы внутри редактируемых через панель текстов ═══
   Вынесены из style="…" в классы: иначе в поле редактора вместо текста
   видна простыня стилей. Правится в панели как <strong>Слово</strong>. */
.u-strong { font-family: 'Unbounded', system-ui, sans-serif; font-weight: 600; color: var(--ink); letter-spacing: .01em; }
.u-sub    { font-size: .5em; }

/* Акцентный маркер для ключевого слова в заголовке */
.accent-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ═══ Переключатель темы (кружок ©, тема-зависимый; на тёмном герое/футере становится белым через always-dark override) ═══ */
.theme-toggle{flex:none;width:34px;height:34px;border:1px solid color-mix(in srgb,var(--ink) 50%,transparent);border-radius:50%;background:transparent;color:var(--ink);display:grid;place-items:center;cursor:pointer;transition:background .25s ease,color .25s ease,border-color .25s ease,transform .25s ease;}
.theme-toggle:hover{background:var(--ink);color:var(--bg);border-color:var(--ink);transform:rotate(18deg);}
.theme-toggle svg{width:18px;height:18px;display:block;}

/* ═══════════ Брутализм: страницы кейсов ═══════════ */
.case-top{position:sticky;top:0;z-index:60;display:flex;align-items:center;gap:22px;padding:16px clamp(20px,4vw,54px);background:color-mix(in srgb,var(--bg) 84%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid color-mix(in srgb,var(--ink) 9%,transparent);flex-wrap:wrap;}
.case-top .theme-toggle{width:32px;height:32px;}
.case-top .theme-toggle svg{width:17px;height:17px;}
.case-top .brand{font-family:'Unbounded',system-ui,sans-serif;font-weight:600;letter-spacing:.04em;text-transform:uppercase;font-size:15px;text-decoration:none;color:var(--ink);}
/* Лого-локап шапки: ШЕСТЕРОВ (сплошной) + STUDIO. контуром (тот же Unbounded, как в героях). */
.brand::after{content:'\00a0STUDIO.';-webkit-text-fill-color:transparent;-webkit-text-stroke:.8px currentColor;}
.case-top .grow{margin-left:auto;}
.chero{padding:clamp(28px,5vw,72px) clamp(20px,4vw,54px) clamp(16px,2vw,28px);}
.chero .kick{font-family:'Roboto Slab',Georgia,serif;font-weight:600;letter-spacing:.2em;text-transform:uppercase;font-size:12px;color:color-mix(in srgb,var(--ink) 55%,transparent);}
.chero h1{font-family:'Unbounded',system-ui,sans-serif;font-weight:600;text-transform:uppercase;line-height:.9;letter-spacing:.01em;font-size:clamp(34px,7.6vw,124px);margin:16px 0 0;color:var(--ink);}
.cbody{display:grid;grid-template-columns:minmax(280px,440px) 1fr;gap:clamp(28px,4vw,64px);align-items:center;padding:clamp(18px,2.5vw,34px) clamp(20px,4vw,54px) clamp(30px,4vw,60px);}
.cshot{display:block;border-radius:6px;overflow:hidden;border:1px solid color-mix(in srgb,var(--ink) 12%,transparent);box-shadow:0 30px 70px -42px rgba(0,0,0,.85);transition:transform .3s ease,box-shadow .3s ease;}
.cshot:hover{transform:translateY(-3px);box-shadow:0 40px 80px -42px rgba(0,0,0,.85);}
.cshot img{width:100%;height:auto;display:block;}
.cintro{font-family:'Manrope',sans-serif;font-weight:300;font-size:clamp(16px,1.4vw,18px);line-height:1.75;color:color-mix(in srgb,var(--ink) 82%,transparent);max-width:52ch;margin:0;}
.cmeta{display:flex;flex-wrap:wrap;gap:16px 40px;margin:26px 0 0;}
.cmeta>div{display:grid;gap:4px;}
.cmeta .lbl{font-family:'Roboto Slab',Georgia,serif;font-weight:500;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:color-mix(in srgb,var(--ink) 45%,transparent);}
.cmeta .val{font-family:'Manrope',sans-serif;font-size:14px;color:color-mix(in srgb,var(--ink) 88%,transparent);}
.cblock{border-top:1px solid color-mix(in srgb,var(--ink) 12%,transparent);padding:clamp(42px,5.5vw,80px) clamp(20px,4vw,54px);}
.cblock-in{max-width:1160px;margin:0 auto;}
.chead{position:relative;margin-bottom:clamp(28px,3.4vw,48px);}
.chead .gw{position:absolute;left:-.01em;top:-.34em;z-index:0;font-family:'Unbounded',system-ui,sans-serif;font-weight:600;font-size:clamp(44px,8.6vw,128px);line-height:1;letter-spacing:.01em;text-transform:uppercase;white-space:nowrap;pointer-events:none;}
.cblock .cnum{position:relative;z-index:1;font-family:'Unbounded',system-ui,sans-serif;font-weight:600;font-size:clamp(24px,2.8vw,38px);line-height:1;letter-spacing:.01em;color:var(--accent);}
.cblock .clabel{position:relative;z-index:1;font-family:'Unbounded',system-ui,sans-serif;font-weight:600;text-transform:uppercase;letter-spacing:.06em;font-size:clamp(16px,1.7vw,22px);margin-top:6px;color:var(--ink);}
.cbody-content{position:relative;z-index:1;}
.cblock .ctext{font-family:'Manrope',sans-serif;font-weight:300;font-size:clamp(15px,1.3vw,17px);line-height:1.85;color:color-mix(in srgb,var(--ink) 78%,transparent);max-width:64ch;margin:0;}
.stacklist{display:flex;flex-wrap:wrap;gap:14px 0;}
.stacklist span{font-family:'Roboto Slab',Georgia,serif;font-weight:600;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:color-mix(in srgb,var(--ink) 82%,transparent);padding:2px 24px;border-left:1px solid color-mix(in srgb,var(--ink) 22%,transparent);white-space:nowrap;}
/* На десктопе стек всегда идёт ОДНОЙ строкой: перенос ломал ритм блока —
   один-два хвостовых пункта уезжали вниз и читались как отдельный список.
   Разделители между пунктами вертикальные, а во второй строке первый из них
   висел без пары. Пункты ужимаются, а если их совсем много — строка
   прокручивается вбок (полоса скрыта, справа лёгкое затухание как намёк). */
@media (min-width: 821px) {
  .stacklist{flex-wrap:nowrap;gap:0;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent);
    mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent);}
  .stacklist::-webkit-scrollbar{display:none;}
  .stacklist span{font-size:12px;padding:2px 18px;flex:none;}
}
/* Ноутбук: на 1024px длинный стек (9 пунктов у Silver) упирался в край и
   включал прокрутку. Ужимаем шрифт и отступы — влезает целиком. */
@media (min-width: 821px) and (max-width: 1200px) {
  .stacklist span{font-size:11px;padding:2px 13px;letter-spacing:.08em;}
}
.stacklist span:first-child{padding-left:0;border-left:none;}
.case-next{border-top:1px solid color-mix(in srgb,var(--ink) 12%,transparent);display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:clamp(28px,4vw,56px) clamp(20px,4vw,54px);}
@media(max-width:820px){.cbody{grid-template-columns:1fr;}.chead .gw{font-size:clamp(40px,15vw,80px);}}

/* ═══════════ Страница-хаб проектов (projects.html) ═══════════ */
/* .hubrow — повторяемый блок: панель управления рендерит его в цикле.
   Поля: номер, название, ссылка на кейс, описание, тип, домен, скриншот. */
.hub-intro{padding:0 clamp(20px,4vw,54px) clamp(30px,4vw,54px);}
.hub-intro p{font-family:'Manrope',sans-serif;font-weight:300;font-size:clamp(16px,1.4vw,18px);line-height:1.75;color:color-mix(in srgb,var(--ink) 82%,transparent);max-width:58ch;margin:0;}
/* Базовая строка: что входит в КАЖДЫЙ проект (чтобы не дублировать в описании каждого) */
.hub-base{font-family:'Roboto Slab',Georgia,serif;font-weight:500;font-size:12px;letter-spacing:.1em;text-transform:uppercase;line-height:1.6;color:color-mix(in srgb,var(--ink) 52%,transparent);margin-top:clamp(20px,2.6vw,30px);}
/* Ссылки-выходы из хаба: строкой, тем же языком, что и «Смотреть кейс». */
.hub-links{display:flex;flex-wrap:wrap;gap:14px 28px;margin:clamp(16px,2vw,22px) 0 0;}
.hub-links a{display:inline-flex;align-items:center;gap:7px;text-decoration:none;color:var(--ink);
  font-family:'Roboto Slab',Georgia,serif;font-weight:500;font-size:13px;letter-spacing:.06em;
  text-transform:uppercase;transition:color .25s ease;}
.hub-links a:hover{color:var(--accent);}
.hublist{border-top:1px solid color-mix(in srgb,var(--ink) 14%,transparent);}
.hubrow{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(220px,340px);gap:clamp(18px,3vw,48px);align-items:center;padding:clamp(26px,3.4vw,46px) clamp(20px,4vw,54px);border-bottom:1px solid color-mix(in srgb,var(--ink) 14%,transparent);transition:background .3s ease;}
.hubrow:hover{background:color-mix(in srgb,var(--ink) 4%,transparent);}
.hubnum{font-family:'Roboto Slab',Georgia,serif;font-weight:600;font-size:13px;letter-spacing:.1em;color:color-mix(in srgb,var(--ink) 42%,transparent);align-self:start;padding-top:10px;}
.hubname{font-family:'Unbounded',system-ui,sans-serif;font-weight:600;text-transform:uppercase;font-size:clamp(20px,2.6vw,36px);line-height:1.05;letter-spacing:.01em;color:var(--ink);text-decoration:none;display:inline-block;transition:color .25s ease;}
.hubrow:hover .hubname{color:var(--accent);}
.hubdesc{font-family:'Manrope',sans-serif;font-weight:300;font-size:14px;line-height:1.65;color:color-mix(in srgb,var(--ink) 64%,transparent);margin:12px 0 0;max-width:48ch;}
.hubmeta{font-family:'Roboto Slab',Georgia,serif;font-weight:500;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:color-mix(in srgb,var(--ink) 45%,transparent);margin-top:14px;}
.hublinks{display:flex;gap:22px;margin-top:18px;flex-wrap:wrap;}
.hublinks a{font-family:'Roboto Slab',Georgia,serif;font-weight:600;font-size:12px;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;color:color-mix(in srgb,var(--ink) 70%,transparent);transition:color .25s ease;}
.hublinks a:hover{color:var(--accent);}
.hubshot{display:block;border-radius:6px;overflow:hidden;border:1px solid color-mix(in srgb,var(--ink) 12%,transparent);box-shadow:0 24px 50px -34px rgba(0,0,0,.8);transition:transform .35s ease;}
.hubshot img{width:100%;height:auto;display:block;}
.hubrow:hover .hubshot{transform:translateY(-3px);}
.hub-cta{display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:space-between;padding:clamp(32px,4.5vw,60px) clamp(20px,4vw,54px);}
@media(max-width:860px){.hubrow{grid-template-columns:1fr;gap:18px;}.hubnum{padding-top:0;}}

/* ═══════════ Брутализм: список работ на главной ═══════════ */
.worklist{border-top:1px solid color-mix(in srgb,var(--ink) 16%,transparent);}
.workrow{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:clamp(16px,3vw,40px);align-items:baseline;padding:clamp(22px,3vw,36px) 0;border-bottom:1px solid color-mix(in srgb,var(--ink) 16%,transparent);transition:padding-left .3s ease;}
.workrow:hover{padding-left:12px;}
.workrow .wn{font-family:'Roboto Slab',Georgia,serif;font-weight:600;font-size:13px;letter-spacing:.1em;color:color-mix(in srgb,var(--ink) 42%,transparent);}
.workrow .wname{font-family:'Unbounded',system-ui,sans-serif;font-weight:600;text-transform:uppercase;font-size:clamp(20px,3vw,40px);line-height:1.05;letter-spacing:.01em;color:var(--ink);text-decoration:none;transition:color .25s ease;}
.workrow:hover .wname{color:var(--accent);}
.workrow .wdesc{font-family:'Manrope',sans-serif;font-weight:300;font-size:13px;color:color-mix(in srgb,var(--ink) 58%,transparent);margin-top:8px;}
.worklinks{display:flex;gap:20px;white-space:nowrap;align-self:center;}
.worklinks a{font-family:'Roboto Slab',Georgia,serif;font-weight:600;font-size:12px;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;color:color-mix(in srgb,var(--ink) 70%,transparent);transition:color .25s ease;}
.worklinks a:hover{color:var(--accent);}
@media(max-width:720px){.workrow{grid-template-columns:1fr;gap:10px;}.worklinks{align-self:start;}}

/* ═══ Юридические страницы (политика, согласие) ═══ */
/* Длинный текст: узкая колонка, крупный межстрочный — читать, а не листать. */
/* Заголовок кейса рассчитан на короткое название, а тут длинная фраза —
   во весь экран она выглядит как ошибка вёрстки. */
.legal-hero h1{font-size:clamp(23px,3.2vw,42px);line-height:1.15;max-width:26ch;}
/* Колонка по левому краю — как заголовок выше, иначе текст «уезжает» вправо. */
.legal{max-width:74ch;margin:0;padding:clamp(8px,2vw,24px) clamp(20px,4vw,54px) clamp(56px,7vw,96px);font-family:'Manrope',sans-serif;font-weight:300;font-size:15px;line-height:1.85;color:color-mix(in srgb,var(--ink) 78%,transparent);}
.legal-lead{font-size:16px;color:var(--ink);padding-bottom:clamp(18px,2vw,26px);border-bottom:1px solid color-mix(in srgb,var(--ink) 14%,transparent);}
.legal h2{font-family:'Unbounded',system-ui,sans-serif;font-weight:600;font-size:clamp(15px,1.7vw,19px);line-height:1.35;letter-spacing:.01em;text-transform:uppercase;color:var(--ink);margin:clamp(32px,4vw,46px) 0 12px;}
.legal-sub{font-family:'Roboto Slab',Georgia,serif;font-weight:600;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);margin:26px 0 10px;}
.legal p{margin:0 0 14px;}
.legal .btn{margin-top:4px;}
.legal ul{margin:0 0 16px;padding-left:1.1em;}
.legal li{margin-bottom:8px;}
.legal strong{font-weight:500;color:var(--ink);}
.legal a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;transition:opacity .25s ease;}
.legal a:hover{opacity:.6;}
.legal-date{font-family:'Roboto Slab',Georgia,serif;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:color-mix(in srgb,var(--ink) 50%,transparent);margin-top:28px;}
.legal-links{display:flex;gap:24px;flex-wrap:wrap;margin-top:clamp(34px,4vw,48px);padding-top:24px;border-top:1px solid color-mix(in srgb,var(--ink) 14%,transparent);}
.mf-bottom a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.25);transition:color .25s ease;}
.mf-bottom a:hover{color:#fff;}

/* ═══ Чекбокс согласия под формами ═══ */
/* Родная галочка не красится под тему, поэтому рисуем свою на ::before,
   а настоящий input оставляем в потоке (клавиатура, скринридер, :checked). */
.consent{display:flex;align-items:flex-start;gap:10px;font-family:'Manrope',sans-serif;font-weight:300;font-size:12.5px;line-height:1.55;color:color-mix(in srgb,var(--ink) 62%,transparent);cursor:pointer;}
.consent input{appearance:none;-webkit-appearance:none;flex:none;width:17px;height:17px;margin:1px 0 0;border:1px solid color-mix(in srgb,var(--ink) 38%,transparent);border-radius:3px;background:transparent;cursor:pointer;position:relative;transition:border-color .2s ease,background .2s ease;}
.consent input:checked{background:var(--ink);border-color:var(--ink);}
.consent input:checked::before{content:"";position:absolute;left:5px;top:1.5px;width:4px;height:9px;border:solid var(--bg);border-width:0 1.6px 1.6px 0;transform:rotate(43deg);}
.consent input:focus-visible{outline:2px solid var(--ink);outline-offset:2px;}
.consent a{color:color-mix(in srgb,var(--ink) 85%,transparent);text-decoration:underline;text-underline-offset:2px;}
.consent a:hover{color:var(--ink);}
/* Форму не отправить без галочки — подсказка появляется только после попытки */
.form-err{font-family:'Manrope',sans-serif;font-size:12.5px;color:#d9534f;margin:0;}

/* ═══ Движение: появление, кнопка «наверх», микровзаимодействия ═══ */
/* Скрываем элементы ТОЛЬКО когда скрипт жив (.js-motion на <html>):
   иначе при отключённом или упавшем JS страница осталась бы пустой. */
.js-motion .reveal{opacity:0;transform:translate3d(0,14px,0);}
.js-motion .reveal.is-in{opacity:1;transform:none;
  transition:opacity .5s ease,transform .5s cubic-bezier(.22,.61,.36,1);
  transition-delay:var(--rv-delay,0ms);}
/* Гигантские фоновые слова приходят чуть иначе — «проявляются» без сдвига,
   иначе на широком экране их движение слишком заметно. */
.js-motion .gw.reveal{transform:none;}

/* Кнопка «наверх»: квадрат со срезанными углами — тот же техно-язык,
   что у стат-бара и меток. Чёрная в светлой теме, светлая в тёмной. */
/* Двойной слой: внешний квадрат цвета фона страницы работает как кант.
   Без него чёрная кнопка светлой темы пропадала на тёмном мега-футере,
   который остаётся тёмным в обеих темах. */
.to-top{position:fixed;right:clamp(16px,2.2vw,28px);bottom:clamp(16px,2.2vw,28px);z-index:70;
  width:46px;height:46px;display:grid;place-items:center;padding:0;cursor:pointer;
  background:var(--bg);color:var(--bg);border:none;
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);
  filter:drop-shadow(0 6px 16px rgba(0,0,0,.35));
  opacity:0;transform:translate3d(0,12px,0) scale(.94);pointer-events:none;
  transition:opacity .28s ease,transform .28s cubic-bezier(.22,.61,.36,1);}
.to-top::before{content:"";position:absolute;inset:2px;background:var(--ink);
  clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px);
  transition:background .25s ease;}
.to-top.on{opacity:1;transform:none;pointer-events:auto;}
.to-top:hover::before{background:color-mix(in srgb,var(--ink) 82%,var(--bg));}
.to-top svg{position:relative;z-index:1;width:20px;height:20px;display:block;transition:transform .25s ease;}
.to-top:hover svg{transform:translateY(-2px);}
.to-top:focus-visible{outline:2px solid var(--ink);outline-offset:3px;}
@media(max-width:720px){.to-top{width:42px;height:42px;}.to-top svg{width:18px;height:18px;}}

/* ═══ Бегущий блик по контуру кнопки ═══ */
/* Крутим не сам контур, а большой конический градиент под кнопкой: видна
   только полоска по краю, потому что кнопка накрывает середину. Анимируется
   один transform — дёшево даже на слабом телефоне.
   Обёртка нужна, чтобы не занимать ::before самой кнопки — он уже держит
   заливку при наведении. */
.glow-wrap{position:relative;display:inline-block;padding:1.5px;border-radius:9px;overflow:hidden;isolation:isolate;}
/* Один слой, без размытого ореола: чистая линия по контуру читается
   аккуратнее, а фирменный голубой сам по себе достаточно заметен на
   монохромном фоне — подсвечивать его нечем и незачем. */
.glow-wrap::before{content:"";position:absolute;left:50%;top:50%;width:240%;aspect-ratio:1;z-index:0;
  transform:translate(-50%,-50%);
  background:conic-gradient(from 0deg,
    transparent 0 60%,
    color-mix(in srgb,var(--brand) 35%,transparent) 69%,
    var(--brand) 75%,
    color-mix(in srgb,var(--brand) 35%,transparent) 81%,
    transparent 90% 100%);
  animation:glow-run 4.5s linear infinite;}
.glow-wrap > .btn{position:relative;z-index:1;background:var(--bg);}
/* На наведении блик ускоряется — кнопка «оживает» под курсором */
.glow-wrap:hover::before{animation-duration:2.2s;}
@keyframes glow-run{to{transform:translate(-50%,-50%) rotate(360deg);}}
@media (prefers-reduced-motion: reduce){
  .glow-wrap::before{animation:none;background:none;}
}

/* Карточки работ и скриншоты — лёгкий подъём: сигнал «сюда можно кликнуть» */
.hubshot,.cshot{will-change:transform;}
.workrow .wname,.hubname{will-change:transform;}

/* Смена темы: красим фон и текст плавно, но НЕ вешаем transition на всё
   подряд — иначе каждая мелочь начинает «догонять» при скролле. */
html.theme-shift,
html.theme-shift body,
html.theme-shift .page,
html.theme-shift .case-top,
html.theme-shift .card,
html.theme-shift .intcard{transition:background-color .32s ease,color .32s ease,border-color .32s ease;}

/* Формы: ошибка встряхивает поле — заметно, но не грубо */
@keyframes shs-shake{
  0%,100%{transform:translate3d(0,0,0);}
  20%{transform:translate3d(-5px,0,0);}
  40%{transform:translate3d(4px,0,0);}
  60%{transform:translate3d(-3px,0,0);}
  80%{transform:translate3d(2px,0,0);}
}
.k-input.err{animation:shs-shake .34s ease;border-bottom-color:#d9534f;}
.consent.err{animation:shs-shake .34s ease;}
.form-err{opacity:0;transform:translate3d(0,-4px,0);transition:opacity .25s ease,transform .25s ease;}
.form-err.on{opacity:1;transform:none;}
/* Кнопка в состоянии отправки: крутится точка, текст не прыгает */
@keyframes shs-spin{to{transform:rotate(360deg);}}
.btn.is-busy{pointer-events:none;opacity:.75;}
.btn.is-busy .lnk-ico,.btn.is-busy .btn-spin{animation:shs-spin .8s linear infinite;}
.btn-spin{width:14px;height:14px;border:1.6px solid currentColor;border-right-color:transparent;
  border-radius:50%;display:inline-block;flex:none;}

/* Уважаем системную настройку: движение выключаем, функции оставляем */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important;}
  .js-motion .reveal{opacity:1;transform:none;}
  .to-top{transition:none;}
}

/* ═══ Страница услуги «CRM» ═══ */
.crm-hero h1{max-width:16ch;}
.crm-intro{max-width:1160px;margin:0 auto;padding:clamp(6px,1.5vw,18px) clamp(20px,4vw,54px) clamp(36px,5vw,64px);}
.crm-lead{font-family:'Manrope',sans-serif;font-weight:300;font-size:clamp(15px,1.4vw,17px);line-height:1.85;color:color-mix(in srgb,var(--ink) 78%,transparent);max-width:64ch;margin:0 0 clamp(28px,3.5vw,44px);}
/* Три цифры в строку — тот же приём, что в стат-баре главной */
.crm-facts{display:flex;flex-wrap:wrap;gap:clamp(20px,3vw,48px);}
.crm-facts div{display:flex;align-items:baseline;gap:12px;padding-left:clamp(14px,2vw,24px);border-left:1px solid color-mix(in srgb,var(--ink) 20%,transparent);}
.crm-facts div:first-child{padding-left:0;border-left:none;}
.crm-facts b{font-family:'Unbounded',system-ui,sans-serif;font-weight:600;font-size:clamp(22px,2.6vw,34px);line-height:1;color:var(--ink);}
.crm-facts span{font-family:'Roboto Slab',Georgia,serif;font-weight:500;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;line-height:1.45;color:color-mix(in srgb,var(--ink) 55%,transparent);max-width:18ch;}

/* Карточки интеграций: не пилюли и не логотипы чужих брендов —
   короткий текст о том, ЧТО именно даёт связка. */
.intgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:clamp(18px,2.4vw,30px);}
.intcard{border:1px solid color-mix(in srgb,var(--ink) 14%,transparent);border-radius:10px;padding:clamp(20px,2.4vw,28px);}
.intcard h3{font-family:'Unbounded',system-ui,sans-serif;font-weight:600;font-size:13px;letter-spacing:.04em;text-transform:uppercase;margin:0 0 16px;color:var(--ink);}
.intcard ul{list-style:none;margin:0;padding:0;display:grid;gap:14px;}
.intcard li{font-family:'Manrope',sans-serif;font-weight:300;font-size:14px;line-height:1.65;color:color-mix(in srgb,var(--ink) 74%,transparent);}
.intcard li b{font-family:'Roboto Slab',Georgia,serif;font-weight:700;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);display:block;margin-bottom:3px;}
/* На телефоне цифры идут столбцом: вертикальные разделители при этом
   висят обрубками, поэтому убираем их и даём подписи полную ширину. */
@media(max-width:720px){
  .crm-facts{flex-direction:column;gap:18px;}
  .crm-facts div{padding-left:0;border-left:none;gap:14px;}
  .crm-facts span{max-width:none;}
}
.crm-cta-kick{font-family:'Roboto Slab',Georgia,serif;font-weight:600;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:color-mix(in srgb,var(--ink) 55%,transparent);}
.crm-cta-head{font-family:'Unbounded',system-ui,sans-serif;font-weight:600;font-size:clamp(17px,2vw,26px);line-height:1.25;margin-top:10px;max-width:24ch;}

/* ═══ Тизер «изнанка» на главной ═══ */
/* Не карточка проекта: своя работа не встаёт в один ряд с клиентскими,
   поэтому блок другой формы — широкий, со скриншотом слева. */
.inside-teaser{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(22px,3.4vw,48px);
  align-items:center;margin-top:clamp(34px,4.5vw,60px);padding:clamp(20px,2.6vw,32px);
  border:1px solid color-mix(in srgb,var(--ink) 14%,transparent);border-radius:14px;
  text-decoration:none;color:inherit;transition:border-color .3s ease,transform .3s ease;}
.inside-teaser:hover{border-color:color-mix(in srgb,var(--ink) 34%,transparent);transform:translateY(-2px);}
.inside-teaser img{width:100%;height:auto;border-radius:8px;display:block;
  border:1px solid color-mix(in srgb,var(--ink) 12%,transparent);transition:transform .4s ease;}
.inside-teaser:hover img{transform:scale(1.015);}
.it-kick{font-family:'Roboto Slab',Georgia,serif;font-weight:600;font-size:11.5px;letter-spacing:.2em;
  text-transform:uppercase;color:color-mix(in srgb,var(--ink) 52%,transparent);}
.it-head{font-family:'Unbounded',system-ui,sans-serif;font-weight:600;font-size:clamp(17px,1.9vw,24px);
  line-height:1.25;margin:10px 0 12px;max-width:22ch;}
.it-text{font-family:'Manrope',sans-serif;font-weight:300;font-size:14px;line-height:1.7;margin:0 0 16px;
  color:color-mix(in srgb,var(--ink) 70%,transparent);max-width:46ch;}
/* ═══ Блок контактов: колонка с текстом и кадром ═══ */
/* Форма высокая, а слева были только абзац и три иконки — низ секции
   пустовал. Кадр занимает остаток колонки и заканчивается ровно там же,
   где форма: обе колонки тянутся на общую высоту (align-items:stretch). */
.contacts-grid{align-items:stretch;}
.contacts-aside{display:flex;flex-direction:column;}
/* flex-basis именно 0, а не auto: при auto за основу берётся натуральная
   высота фото, и колонка раздувается выше формы вместо того, чтобы занять
   ровно остаток. min-height:0 разрешает сжатие ниже содержимого. */
.contacts-photo{flex:1 1 0;min-height:0;width:100%;object-fit:cover;display:block;
  margin-top:clamp(26px,3.4vw,40px);border-radius:12px;
  border:1px solid color-mix(in srgb,var(--ink) 12%,transparent);
  filter:grayscale(1) contrast(1.04);}
/* На узком экране колонки идут стопкой, и «до низа формы» тянуться некуда —
   кадру нужна собственная высота, иначе он схлопнется в полоску. */
@media(max-width:820px){.contacts-photo{flex:none;height:200px;}}

/* Кнопка внутри тизера: сам блок — ссылка, поэтому это span со стилями
   кнопки. Заливку рисуем при наведении на ВЕСЬ тизер: подводить курсор
   ровно к кнопке не нужно, кликабельна вся карточка. */
.it-btn{display:inline-flex;margin-top:2px;}
.inside-teaser:hover .it-btn{color:var(--bg);border-color:var(--ink);}
.inside-teaser:hover .it-btn::before{transform:scaleX(1);}
@media(max-width:820px){.inside-teaser{grid-template-columns:1fr;}}

/* Плашка статов на планшете и телефоне: auto-fit в инлайне даёт 3+1 —
   один показатель повисает в отдельном ряду. Раскладываем 2×2. !important —
   потому что grid-template-columns задан инлайн-стилем и иначе не перебить. */
@media(max-width:820px){.statbar{grid-template-columns:1fr 1fr !important;}}
@media(max-width:430px){.statbar{grid-template-columns:1fr !important;}}

/* ═══ Скриншоты интерфейса: сетка с подписями ═══ */
/* Ленту полотен во всю ширину читать невозможно — сетка по два кадра
   и короткая подпись под каждым: видно, что именно демонстрирует экран. */
.shotgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
  gap:clamp(20px,2.6vw,34px);margin:0 0 clamp(24px,3vw,36px);}
.shot{margin:0;display:flex;flex-direction:column;}
.shot img{width:100%;height:auto;border-radius:9px;display:block;
  border:1px solid color-mix(in srgb,var(--ink) 14%,transparent);
  box-shadow:0 18px 44px -30px rgba(0,0,0,.55);
  transition:transform .35s ease,box-shadow .35s ease;}
.shot:hover img{transform:translateY(-3px);box-shadow:0 26px 56px -30px rgba(0,0,0,.6);}
.shot figcaption{font-family:'Manrope',sans-serif;font-weight:300;font-size:13px;line-height:1.6;
  margin-top:12px;color:color-mix(in srgb,var(--ink) 62%,transparent);}
.shot figcaption b{font-family:'Roboto Slab',Georgia,serif;font-weight:700;font-size:11.5px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink);display:block;margin-bottom:5px;}
/* Ряд телефонных кадров: они вертикальные, поэтому колонки уже — иначе
   строка сетки вытягивается под их высоту и рядом образуется пустота. */
.shotgrid--phones{grid-template-columns:repeat(auto-fit,minmax(190px,1fr));max-width:760px;}
.shot--phone img{max-width:230px;margin:0 auto;}
@media(max-width:560px){
  .shotgrid--phones{grid-template-columns:repeat(2,1fr);}
  .shot--phone img{max-width:100%;}
}

/* ═══ Слайдер скриншотов ═══ */
/* Кадров панели много, и сеткой они превращаются в бесконечную простыню.
   Лента прокручивается нативно (свайп и инерция — бесплатно от браузера),
   scroll-snap доводит кадр до края, а стрелки и точки добавляет
   assets/js/slider.js. Без JS остаётся просто прокручиваемая лента. */
.shotslider{margin:0 0 clamp(24px,3vw,36px);--ss-per:2;--ss-gap:clamp(18px,2.4vw,30px);}
.ss-track{display:flex;gap:var(--ss-gap);overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none;
  /* Место под тень кадра: без отступов она срезается краем ленты. */
  padding:4px 2px 10px;margin:-4px -2px -10px;}
.ss-track::-webkit-scrollbar{display:none;}
.ss-track:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:10px;}
.ss-track>.shot{flex:0 0 calc((100% - (var(--ss-per) - 1) * var(--ss-gap)) / var(--ss-per));
  scroll-snap-align:start;}
/* Панель управления: точки слева, стрелки парой справа. Разнести
   стрелки по краям блока — значит гонять к ним курсор через весь экран. */
.ss-bar{display:flex;align-items:center;gap:10px;margin-top:clamp(14px,1.8vw,20px);}
.ss-dots{order:0;}
.ss-btn[data-dir="-1"]{order:1;}
.ss-btn[data-dir="1"]{order:2;}
.ss-bar.hidden{display:none;}
.ss-btn{flex:0 0 auto;width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;
  background:transparent;color:var(--ink);cursor:pointer;
  border:1px solid color-mix(in srgb,var(--ink) 22%,transparent);
  /* Срезанный угол — тот же техно-язык, что у кнопки «наверх» и меток. */
  clip-path:polygon(0 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%);
  transition:background .25s ease,color .25s ease,border-color .25s ease;}
.ss-btn svg{width:16px;height:16px;}
.ss-btn:hover{background:var(--ink);color:var(--bg);border-color:var(--ink);}
.ss-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.ss-dots{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-right:auto;}
.ss-dot{width:22px;height:3px;padding:0;border:none;cursor:pointer;background:color-mix(in srgb,var(--ink) 22%,transparent);
  transition:background .25s ease,transform .25s ease;}
.ss-dot:hover{background:color-mix(in srgb,var(--ink) 45%,transparent);}
.ss-dot.on{background:var(--accent);transform:scaleY(2);}
.ss-dot:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}
/* Кадров в ряду по три: экран панели читается и в таком размере, а
   подробности смотрят по клику — крупно, в отдельном окне. Мелкие кадры
   ещё и раньше включают листалку: она появляется ровно тогда, когда
   снимки перестают влезать. */
.shotslider{--ss-per:3;}
/* Телефонные кадры вертикальные — их влезает больше в ряд. */
.shotslider--phones{--ss-per:4;max-width:760px;}
.shotslider--phones .ss-track>.shot img{max-width:165px;margin:0 auto;}
@media(max-width:1100px){.shotslider{--ss-per:2;}}
@media(max-width:820px){.shotslider{--ss-per:1;}.shotslider--phones{--ss-per:3;}}
@media(max-width:560px){
  .shotslider--phones{--ss-per:2;}
  .shotslider--phones .ss-track>.shot img{max-width:100%;}
}
/* Кадр в ленте не приподнимаем по наведению: сдвиг внутри прокрутки
   выглядит как рывок ленты, а не как отклик карточки. Вместо этого —
   подсветка рамкой: видно, что кадр кликабельный. */
.ss-track>.shot:hover img{transform:none;box-shadow:0 18px 44px -30px rgba(0,0,0,.55);}
.shot img{transition:transform .35s ease,box-shadow .35s ease,border-color .25s ease;}
.shot img:hover,.shot img:focus-visible{border-color:var(--accent);}
.shot img:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}

/* ═══ Просмотр кадра во весь экран ═══ */
/* Кадры в ленте мелкие нарочно — разглядывают их здесь. Окно строит
   assets/js/lightbox.js; без JS остаётся обычная картинка. */
html.lb-lock{overflow:hidden;}
.lb{position:fixed;inset:0;z-index:120;display:none;place-items:center;padding:clamp(12px,2.5vw,28px);
  background:rgba(8,8,8,.9);}
.lb.on{display:grid;}
.lb-in{width:min(1280px,100%);display:flex;flex-direction:column;gap:14px;}
.lb-img{width:100%;max-height:72vh;object-fit:contain;display:block;border-radius:10px;background:#0e0e0e;}
/* Подпись и кнопки поверх тёмного фона — всегда светлые, независимо от темы. */
.lb-cap{font-family:'Manrope',sans-serif;font-weight:300;font-size:13.5px;line-height:1.6;
  color:rgba(255,255,255,.72);max-width:70ch;}
.lb-cap b{font-family:'Roboto Slab',Georgia,serif;font-weight:700;font-size:11.5px;letter-spacing:.06em;
  text-transform:uppercase;color:#fff;display:block;margin-bottom:5px;}
.lb-bar{display:flex;gap:10px;}
.lb-btn{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;
  background:transparent;color:#fff;cursor:pointer;border:1px solid rgba(255,255,255,.32);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%);
  transition:background .25s ease,color .25s ease,border-color .25s ease;}
.lb-btn svg{width:17px;height:17px;}
.lb-btn:hover{background:#fff;color:#111;border-color:#fff;}
.lb-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.lb-btn[hidden]{display:none;}
.lb-close{margin-left:auto;}
@media(max-width:560px){.lb-img{max-height:62vh;}}

/* ═══ Блог: хаб, рубрики, карточки ═══ */
/* Хлебные крошки: и человеку видно, где он, и поисковику — структура. */
.crumbs{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:0 clamp(20px,4vw,54px);
  margin-top:clamp(14px,2vw,22px);font-family:'Roboto Slab',Georgia,serif;font-weight:500;font-size:11.5px;
  letter-spacing:.1em;text-transform:uppercase;color:color-mix(in srgb,var(--ink) 45%,transparent);}
.crumbs a{color:inherit;text-decoration:none;transition:color .25s ease;}
.crumbs a:hover{color:var(--accent);}

/* Рубрики. Активная залита — по ней сразу видно, что список отфильтрован. */
.blog-tags{display:flex;flex-wrap:wrap;gap:10px;padding:0 clamp(20px,4vw,54px);margin-bottom:clamp(26px,3.4vw,40px);}
.blog-tags:empty{display:none;}
.btag{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:99px;text-decoration:none;
  border:1px solid color-mix(in srgb,var(--ink) 20%,transparent);color:color-mix(in srgb,var(--ink) 75%,transparent);
  font-family:'Roboto Slab',Georgia,serif;font-weight:600;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;
  transition:color .25s ease,border-color .25s ease,background .25s ease;}
.btag i{font-style:normal;font-size:10px;color:color-mix(in srgb,var(--ink) 45%,transparent);}
.btag:hover{border-color:var(--ink);color:var(--ink);}
.btag.on{background:var(--ink);border-color:var(--ink);color:var(--bg);}
.btag.on i{color:color-mix(in srgb,var(--bg) 70%,transparent);}

/* Лента статей: карточка = кадр + текст. Ширина колонки под чтение,
   а не под максимум карточек в ряд — список читают, а не сканируют. */
.bloglist{display:grid;gap:clamp(18px,2.4vw,28px);padding:0 clamp(20px,4vw,54px);max-width:1160px;margin:0 auto;}
.postcard{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:clamp(18px,2.6vw,32px);
  align-items:center;padding:clamp(16px,2vw,22px);border-radius:14px;
  border:1px solid color-mix(in srgb,var(--ink) 12%,transparent);
  transition:border-color .3s ease,transform .3s ease;}
.postcard:hover{border-color:color-mix(in srgb,var(--ink) 30%,transparent);transform:translateY(-2px);}
.postcard--text{grid-template-columns:1fr;}
.pc-shot img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block;border-radius:9px;
  border:1px solid color-mix(in srgb,var(--ink) 12%,transparent);}
.pc-meta{display:flex;flex-wrap:wrap;gap:8px 16px;font-family:'Roboto Slab',Georgia,serif;font-weight:600;
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:color-mix(in srgb,var(--ink) 48%,transparent);}
.pc-meta a{color:var(--accent);text-decoration:none;}
.pc-meta a:hover{text-decoration:underline;text-underline-offset:3px;}
.pc-title{font-family:'Unbounded',system-ui,sans-serif;font-weight:600;font-size:clamp(17px,1.9vw,23px);
  line-height:1.3;margin:12px 0 10px;}
.pc-title a{color:inherit;text-decoration:none;}
.postcard:hover .pc-title a{color:var(--accent);}
.pc-lead{font-family:'Manrope',sans-serif;font-weight:300;font-size:14.5px;line-height:1.7;margin:0;
  color:color-mix(in srgb,var(--ink) 72%,transparent);max-width:64ch;}
.pc-more{display:inline-flex;align-items:center;gap:7px;margin-top:14px;font-family:'Roboto Slab',Georgia,serif;
  font-weight:600;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);}
@media(max-width:760px){.postcard{grid-template-columns:1fr;}}

/* Пусто — честный блок вместо пустой страницы: что будет и куда пойти сейчас. */
.blog-empty{border:1px dashed color-mix(in srgb,var(--ink) 24%,transparent);border-radius:14px;
  padding:clamp(26px,4vw,44px);text-align:center;}
.be-kick{font-family:'Unbounded',system-ui,sans-serif;font-weight:600;font-size:clamp(16px,2vw,22px);}
.blog-empty p{font-family:'Manrope',sans-serif;font-weight:300;font-size:15px;line-height:1.75;
  margin:14px auto 22px;max-width:52ch;color:color-mix(in srgb,var(--ink) 70%,transparent);}
.be-links{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}

/* ═══ Статья ═══ */
/* Колонка под чтение: длинная строка утомляет быстрее мелкого шрифта. */
.post{max-width:760px;margin:0 auto;padding:clamp(18px,3vw,34px) clamp(20px,4vw,54px) 0;}
.post-head{margin-bottom:clamp(22px,3vw,34px);}
.post-meta{display:flex;flex-wrap:wrap;gap:8px 18px;font-family:'Roboto Slab',Georgia,serif;font-weight:600;
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:color-mix(in srgb,var(--ink) 48%,transparent);}
.post h1{font-family:'Unbounded',system-ui,sans-serif;font-weight:600;font-size:clamp(26px,4.2vw,46px);
  line-height:1.12;margin:16px 0 0;letter-spacing:.01em;}
.post-lead{font-family:'Manrope',sans-serif;font-weight:300;font-size:clamp(16px,1.6vw,19px);line-height:1.75;
  margin:18px 0 0;color:color-mix(in srgb,var(--ink) 80%,transparent);}
.post-cover img{width:100%;height:auto;display:block;border-radius:12px;
  border:1px solid color-mix(in srgb,var(--ink) 12%,transparent);}
.post-cover{margin:0 0 clamp(22px,3vw,34px);}
.post-body{font-family:'Manrope',sans-serif;font-weight:300;font-size:16px;line-height:1.85;
  color:color-mix(in srgb,var(--ink) 86%,transparent);}
.post-body p{margin:0 0 20px;}
.post-body h2{font-family:'Unbounded',system-ui,sans-serif;font-weight:600;font-size:clamp(19px,2.4vw,27px);
  line-height:1.25;margin:clamp(32px,4vw,46px) 0 16px;color:var(--ink);}
.post-list{list-style:none;padding:0;margin:0 0 20px;display:grid;gap:12px;}
.post-list li{position:relative;padding-left:26px;}
.post-list li::before{content:'';position:absolute;left:6px;top:.65em;width:6px;height:6px;background:var(--accent);}
.post-body blockquote{margin:clamp(24px,3vw,34px) 0;padding:0 0 0 22px;
  border-left:2px solid var(--accent);font-family:'Roboto Slab',Georgia,serif;font-weight:500;
  font-size:clamp(16px,1.7vw,19px);line-height:1.6;color:var(--ink);}
/* Врезка — мысль в сторону от основного текста: помечена фоном, а не курсивом. */
.post-note{margin:clamp(24px,3vw,34px) 0;padding:clamp(16px,2vw,22px);border-radius:12px;
  background:color-mix(in srgb,var(--ink) 5%,transparent);
  border:1px solid color-mix(in srgb,var(--ink) 10%,transparent);font-size:15px;line-height:1.75;}
.post-figure{margin:clamp(26px,3.4vw,40px) 0;}
.post-figure img{width:100%;height:auto;display:block;border-radius:10px;
  border:1px solid color-mix(in srgb,var(--ink) 12%,transparent);}
.post-figure figcaption{font-size:13px;line-height:1.6;margin-top:10px;
  color:color-mix(in srgb,var(--ink) 58%,transparent);}
.post-foot{display:flex;flex-wrap:wrap;gap:12px;margin:clamp(30px,4vw,48px) 0 0;
  padding-top:clamp(22px,3vw,32px);border-top:1px solid color-mix(in srgb,var(--ink) 12%,transparent);}
.related{padding:clamp(34px,4.5vw,60px) 0 0;}
.related-t{font-family:'Roboto Slab',Georgia,serif;font-weight:600;font-size:12px;letter-spacing:.2em;
  text-transform:uppercase;color:color-mix(in srgb,var(--ink) 52%,transparent);
  padding:0 clamp(20px,4vw,54px);max-width:1160px;margin:0 auto clamp(16px,2vw,22px);}

/* ═══ Блок «Из блога» на главной ═══ */
.blogsec-t{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;
  margin-bottom:clamp(22px,3vw,32px);}
.bs-kick{font-family:'Roboto Slab',Georgia,serif;font-weight:600;font-size:12px;letter-spacing:.2em;
  text-transform:uppercase;color:color-mix(in srgb,var(--ink) 52%,transparent);}
.bs-head{font-family:'Unbounded',system-ui,sans-serif;font-weight:600;font-size:clamp(18px,2.2vw,28px);
  line-height:1.25;margin-top:10px;max-width:24ch;}
/* Три анонса в ряд: заголовок + вводка, без обложек — на главной уже
   хватает картинок, и лишние кадры перетянули бы внимание с работ. */
.bteases{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:clamp(16px,2vw,26px);}
.btease{display:flex;flex-direction:column;gap:10px;padding:clamp(16px,2vw,22px);border-radius:12px;
  text-decoration:none;color:inherit;border:1px solid color-mix(in srgb,var(--ink) 12%,transparent);
  transition:border-color .3s ease,transform .3s ease;}
.btease:hover{border-color:color-mix(in srgb,var(--ink) 32%,transparent);transform:translateY(-2px);}
.bt-meta{font-family:'Roboto Slab',Georgia,serif;font-weight:600;font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:color-mix(in srgb,var(--ink) 48%,transparent);}
.bt-title{font-family:'Unbounded',system-ui,sans-serif;font-weight:600;font-size:16px;line-height:1.3;}
.btease:hover .bt-title{color:var(--accent);}
.bt-lead{font-family:'Manrope',sans-serif;font-weight:300;font-size:13.5px;line-height:1.65;
  color:color-mix(in srgb,var(--ink) 68%,transparent);
  /* Три строки максимум: разной длины вводки иначе делают карточки разной высоты. */
  display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}

/* ═══ Баннер cookie ═══ */
/* Не перекрывает контент целиком и не блокирует чтение: полоса снизу,
   уезжает после выбора. Тёмная в обеих темах — как герой и футер. */
.cookiebar{position:fixed;left:0;right:0;bottom:0;z-index:80;background:#0b0b0d;color:#f4eee3;
  border-top:1px solid rgba(255,255,255,.14);transform:translateY(105%);transition:transform .45s cubic-bezier(.45,0,.15,1);}
.cookiebar.on{transform:translateY(0);}
.cookiebar-in{max-width:1180px;margin:0 auto;padding:clamp(18px,2.4vw,26px) clamp(20px,4vw,54px);
  display:flex;gap:clamp(18px,3vw,44px);align-items:center;justify-content:space-between;flex-wrap:wrap;}
.cookiebar-text{max-width:70ch;}
.cookiebar-text strong{font-family:'Unbounded',system-ui,sans-serif;font-weight:600;font-size:13px;letter-spacing:.06em;text-transform:uppercase;display:block;margin-bottom:8px;}
.cookiebar-text p{font-family:'Manrope',sans-serif;font-weight:300;font-size:13px;line-height:1.6;margin:0 0 12px;color:rgba(244,238,227,.72);}
.cookiebar-text a{color:#fff;text-decoration:underline;text-underline-offset:3px;}
/* Баннер тёмный всегда, поэтому чекбокс внутри тоже светлый — независимо от темы */
.cookiebar .consent{color:rgba(244,238,227,.8);font-size:12.5px;}
.cookiebar .consent input{border-color:rgba(255,255,255,.45);}
.cookiebar .consent input:checked{background:#f4eee3;border-color:#f4eee3;}
.cookiebar .consent input:checked::before{border-color:#0b0b0d;}
.cookiebar-btns{display:flex;gap:10px;flex-wrap:wrap;flex:none;}
.cookiebar .btn{color:#f4eee3;border-color:rgba(255,255,255,.4);padding:12px 22px;font-size:12px;}
.cookiebar .btn::before{background:#f4eee3;}
.cookiebar .btn:hover{color:#0b0b0d;border-color:#f4eee3;}
@media(max-width:720px){
  .cookiebar-in{flex-direction:column;align-items:stretch;gap:16px;}
  .cookiebar-btns .btn{flex:1 1 0;justify-content:center;padding:12px 10px;}
}

/* Плавающий бейдж reCAPTCHA убран — вместо него текстовая пометка под формой.
   Это разрешённый Google вариант, но ТОЛЬКО вместе с упоминанием и ссылками
   на их Политику и Условия (см. .captcha-note), иначе нарушение правил. */
.grecaptcha-badge{visibility:hidden;}
.captcha-note{font-family:'Manrope',sans-serif;font-weight:300;font-size:11.5px;line-height:1.5;margin:0;color:color-mix(in srgb,var(--ink) 38%,transparent);}
.captcha-note a{color:inherit;text-decoration:underline;text-underline-offset:2px;}
.captcha-note a:hover{color:var(--ink);}

/* Мега-футер на телефоне — по реальной видимой высоте (см. assets/js/vvh.js),
   иначе копирайт уезжает под панель браузера. svh — запасной вариант. */
@media(max-width:720px){
  .mega-footer{min-height:100svh;min-height:var(--vvh,100svh);}
}

/* ═══ Пара кнопок под секцией ═══ */
/* На телефоне держим в ОДНУ строку: делим ширину поровну и ужимаем набор,
   иначе вторая кнопка переносится и колонка выглядит рыхло. */
.btnrow{display:flex;flex-wrap:wrap;gap:16px;}
@media(max-width:720px){
  .btnrow{flex-wrap:nowrap;gap:10px;}
  .btnrow .btn{flex:1 1 0;min-width:0;justify-content:center;padding:13px 10px;font-size:11px;letter-spacing:.04em;gap:7px;white-space:nowrap;}
}

/* ═══ Стрелки-иконки в ссылках (инлайн-SVG вместо «→» / «↗») ═══ */
/* «↗» на iOS показывался эмодзи (синяя плашка): из-за его высоты «Кейс» и
   «Сайт» стояли на разных уровнях, а пробел перед знаком давал большой зазор.
   inline-flex + gap держит обе ссылки пары одной высоты. */
.worklinks a,.hublinks a{display:inline-flex;align-items:center;gap:6px;}
/* letter-spacing вешает пустой отступ после последней буквы — снимаем */
.worklinks a>span,.hublinks a>span{margin-right:-.12em;}
.lnk-ico{width:13px;height:13px;flex:none;display:block;stroke-linecap:square;transition:transform .25s ease;}
.btn .lnk-ico{width:14px;height:14px;}
.worklinks a:hover .lnk-ico,.hublinks a:hover .lnk-ico,.btn:hover .lnk-ico{transform:translateX(2px);}

/* ═══ Лаконичные иконки контактов/соцсетей ═══ */
.iconrow{display:flex;gap:12px;flex-wrap:wrap;}
.iconbtn{width:46px;height:46px;border:1px solid color-mix(in srgb,var(--ink) 40%,transparent);border-radius:50%;display:inline-grid;place-items:center;color:var(--ink);flex:none;transition:background .25s ease,color .25s ease,border-color .25s ease,transform .25s ease;}
.iconbtn:hover{background:var(--ink);color:var(--bg);border-color:var(--ink);transform:translateY(-2px);}
.iconbtn svg{width:20px;height:20px;display:block;}

/* ═══ Одобренные отзывы на главной (рендерятся из data/reviews.json) ═══ */
.rv { margin: clamp(44px,6vw,84px) 0 0; padding-top: clamp(32px,4vw,52px); border-top: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); max-width: 920px; }
.rv + .rv { margin-top: clamp(32px,4vw,56px); }
.rv-cap { display: flex; align-items: center; gap: 12px; font-family: 'Roboto Slab', Georgia, serif; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: color-mix(in srgb, var(--ink) 50%, transparent); font-size: 11px; }
.rv-stars { display: inline-flex; align-items: center; gap: 3px; color: var(--ink); vertical-align: -2px; }
.rv-dim { display: inline-flex; gap: 3px; color: color-mix(in srgb, var(--ink) 22%, transparent); }
.rv-star { width: 13px; height: 13px; display: block; flex: none; }
.rv-text { font-family: 'Roboto Slab', Georgia, serif; font-weight: 500; font-size: clamp(22px,2.6vw,34px); line-height: 1.45; margin: 22px 0 0; }
.rv-who { font-family: 'Manrope', sans-serif; font-weight: 300; font-size: 13px; letter-spacing: .08em; color: color-mix(in srgb, var(--ink) 50%, transparent); margin-top: 22px; }

/* ═══ Звёзды рейтинга (форма отзыва) ═══ */
.stars{display:flex;gap:8px;}
.stars .star{background:none;border:none;padding:0;cursor:pointer;color:color-mix(in srgb,var(--ink) 28%,transparent);line-height:0;transition:color .15s ease,transform .15s ease;}
.stars .star:hover{transform:translateY(-1px);}
.stars .star svg{width:30px;height:30px;display:block;}
.stars .star.on{color:var(--ink);}

/* ═══ Гигантские фоновые слова секций (тема-зависимая насыщенность) ═══ */
.gw{color:color-mix(in srgb,var(--ink) 6%,transparent);}
:root[data-theme="light"] .gw{color:color-mix(in srgb,var(--brand) 26%,transparent);}

/* ═══ Кадр в секции «Обо мне» ═══ */
/* Высокий кадр (было 16/11) перевешивал текст: справа стояла картинка
   в полторы высоты абзацев. На десктопе делаем приземистым — низ кадра
   встаёт примерно вровень с колонкой текста. На узком экране колонка
   одна, там слишком широкая полоса читается как обрезок, поэтому кадр
   остаётся ближе к прежнему. */
.about-shot{aspect-ratio:16/10;}
@media (min-width:900px){ .about-shot{aspect-ratio:2/1;} }

/* ═══ Всегда-тёмные секции (герой/футер): держим тёмную палитру, чтобы кнопки/иконки оставались белыми в светлой теме ═══ */
.brutal-hero, .mega-footer { --bg: #0b0b0d; --ink: #f4eee3; --accent: #f4eee3; --accent-2: #f4eee3; --grad: linear-gradient(120deg,#f4eee3 0%,#f4eee3 100%); }

/* ═══════════ Мега-футер (общий для главной и кейсов) ═══════════ */
.mega-footer{position:relative;overflow:hidden;background:#0b0b0d;margin-top:clamp(48px,7vw,96px);min-height:100vh;display:flex;flex-direction:column;}
.mf-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;filter:grayscale(1) contrast(1.08) brightness(.6);}
.mf-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,11,13,.58),rgba(11,11,13,.4) 42%,rgba(11,11,13,.86));}
.mf-inner{position:relative;z-index:2;flex:1;display:flex;flex-direction:column;padding:clamp(44px,6vw,96px) clamp(20px,4vw,54px) clamp(22px,3vw,38px);color:#fff;}
.mf-top{display:flex;justify-content:space-between;gap:32px 48px;flex-wrap:wrap;padding-bottom:clamp(36px,6vw,72px);}
.mf-kick{font-family:'Roboto Slab',Georgia,serif;font-weight:600;letter-spacing:.2em;text-transform:uppercase;font-size:12px;color:rgba(255,255,255,.55);}
.mf-head{font-family:'Unbounded',system-ui,sans-serif;font-weight:400;font-size:clamp(26px,3.6vw,52px);line-height:1.05;text-transform:uppercase;margin:16px 0 24px;max-width:18ch;}
.mf-contacts{display:grid;gap:14px;align-content:start;}
.mf-contacts a{font-family:'Roboto Slab',Georgia,serif;font-weight:500;font-size:clamp(15px,1.4vw,18px);letter-spacing:.02em;text-decoration:none;color:#fff;display:flex;gap:16px;align-items:baseline;transition:color .25s ease;}
.mf-contacts a b{color:rgba(255,255,255,.42);font-weight:600;font-size:11px;letter-spacing:.2em;text-transform:uppercase;width:92px;flex:none;}
.mf-contacts a:hover{color:var(--accent);}
.mf-logo{font-family:'Unbounded',system-ui,sans-serif;font-weight:400;font-size:clamp(44px,12.6vw,190px);line-height:.8;text-transform:uppercase;text-align:center;white-space:nowrap;letter-spacing:.01em;transform:scaleY(1.12);transform-origin:center bottom;transition:opacity .2s;}
/* Логотип в подвале — ссылка на главную. Оборачиваем в <a>, а не меняем
   тег самого логотипа: так его стили (transform, центрирование) не трогаем. */
.mf-logo-link{display:block;text-decoration:none;color:inherit;}
.mf-logo-link:hover .mf-logo{opacity:.82;}
/* padding-right — место под кнопку «наверх»: она висит в правом нижнем
   углу экрана, и в самом низу страницы накрывала последний блок строки
   (на главной — «удалённо по всей стране», на остальных — правовые ссылки). */
.mf-bottom{display:flex;justify-content:space-between;gap:12px 30px;flex-wrap:wrap;padding-top:clamp(22px,3vw,36px);padding-right:clamp(62px,6vw,92px);border-top:1px solid rgba(255,255,255,.12);margin-top:clamp(26px,3vw,44px);font-family:'Manrope',sans-serif;font-weight:300;font-size:12px;letter-spacing:.06em;color:rgba(255,255,255,.5);}
/* Реквизиты самозанятого (требование модерации ЮKassa) — приглушённая
   строка под нижним рядом подвала. */
.mega-footer .mf-req{padding-top:10px;font-family:'Manrope',sans-serif;font-weight:300;font-size:11.5px;letter-spacing:.05em;color:rgba(255,255,255,.34);}
/* Логотип в шапке кабинета/авторизации — как заголовок героя: Unbounded,
   капслок, лёгкий трекинг. (Все страницы кабинета грузят этот файл.) */
.cab-top .brand, .auth .brand { text-transform: uppercase; letter-spacing: .05em; }

/* Навигация в подвале: без неё внутренние страницы были тупиками —
   уйти с них можно было только на главную через шапку.
   Белый цвет прописан ТОЛЬКО внутри .mega-footer: подвал всегда тёмный,
   а вот на светлой секции такой блок стал бы невидимым (уже поймали —
   при вставке он попал в контакты главной и пропал на кремовом фоне).
   Вне подвала блок унаследует обычный цвет текста и останется читаемым. */
.mf-nav{display:grid;gap:11px;align-content:start;}
.mf-nav-t{font-family:'Roboto Slab',Georgia,serif;font-weight:600;font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:color-mix(in srgb,var(--ink) 50%,transparent);margin-bottom:3px;}
.mf-nav a{font-family:'Roboto Slab',Georgia,serif;font-weight:500;font-size:clamp(14px,1.2vw,16px);
  letter-spacing:.02em;text-decoration:none;color:var(--ink);transition:color .25s ease;}
.mega-footer .mf-nav-t{color:rgba(255,255,255,.42);}
.mega-footer .mf-nav a{color:rgba(255,255,255,.82);}
.mf-nav a:hover{color:var(--accent);}
@media(max-width:720px){.mf-nav{gap:9px;}}