/* ═══════════ КАРКАС — общий стиль (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 { 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); }

/* ═══ Инлайн-элементы внутри редактируемых через панель текстов ═══
   Вынесены из 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);}
.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;}
.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);}
.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;}

/* ═══ Баннер 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 { letter-spacing: .12em; color: var(--ink); }
.rv-dim { color: color-mix(in srgb, var(--ink) 22%, transparent); }
.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);}

/* ═══ Всегда-тёмные секции (герой/футер): держим тёмную палитру, чтобы кнопки/иконки оставались белыми в светлой теме ═══ */
.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(.5);}
.mf-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,11,13,.72),rgba(11,11,13,.5) 42%,rgba(11,11,13,.9));}
.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;}
.mf-bottom{display:flex;justify-content:space-between;gap:12px 30px;flex-wrap:wrap;padding-top:clamp(22px,3vw,36px);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);}