/* LMX Performance — main stylesheet */

/* ============================================================
   LMX PERFORMANCE — MONOCHROME MOCKUP (v2)
   White bg. Body = pure black. Headings = dark gray.
   Color exception: .case-bg only.
   ============================================================ */

:root{
  --ink:        #000000;   /* body text */
  --heading:    #1a1a1a;   /* headings — subtle hierarchy step */
  --ink-70:     #4d4d4d;
  --ink-45:     #7a7a7a;
  --line:       #e2e2e2;
  --line-soft:  #ececec;
  --paper:      #ffffff;
  --paper-off:  #fafafa;
  --code-bg:    #f0f0f0;
  --code-dim:   #a8a8a8;
  --code-bright:#1a1a1a;
  --max: 1360px;
  --gut: clamp(20px, 4vw, 64px);
  /* раунд 22 — единый отступ «дивайдер → заголовок» = «заголовок → контент».
     Было ~92px сверху на десктопе (52 padding + 40 margin), стало в 1.75 раза
     меньше: 52px десктоп / 30px мобайл ◄◄◄ правь здесь */
  --title-gap: clamp(30px, 4.6vw, 52px);
  /* отдельная тема для блока "как мы работаем" (бегущий лог) — намеренно
     НЕ переиспользует --code-* (те держат .term-divider неизменным).
     Логика: главный текст (лейблы БРИФ/КОНЦЕПЦИЯ/…) — максимальный
     контраст, второстепенный (номер шага + описание) — тот же цвет чуть
     бледнее, ровно как --code-bright/opacity у .case-client/.case-tag. */
  --steps-bg:    #eeeeee;
  --steps-label: #141414;
  --steps-sub:   rgba(20,20,20,.62);
  /* раунд 23 — «лесенка»: чётные шаги (2, 4) чуть темнее ◄◄◄ */
  --steps-bg-alt:#e6e6e6;
  /* раунд 24 — цвет кнопок: на светлой теме тёмно-серый, не чёрный ◄◄◄ */
  --btn-bg:     #161616;
}

html[data-theme="dark"]{
  --ink:        #ffffff;
  --heading:    #f2f2f2;
  --ink-70:     #c7c7c7;
  --ink-45:     #8f8f8f;
  --line:       #333333;
  --line-soft:  #2a2a2a;
  --paper:      #161616;
  --paper-off:  #1e1e1e;
  --code-bg:    #222222; /* раунд 24 — дивайдер чуть светлее фона, как на светлой теме */
  --code-dim:   #6e6e6e;
  --code-bright:#e6e6e6;
  --steps-bg:    #202020;
  --steps-label: #ffffff;
  --steps-sub:   rgba(255,255,255,.75);
  --steps-bg-alt:#1a1a1a;
  --btn-bg:     #ffffff;
}

*{ margin:0; padding:0; box-sizing:border-box; }
/* раунд 23 — место под скроллбар зарезервировано всегда: в конце загрузки
   (когда снимается overflow:hidden и появляется скроллбар) экран загрузки
   и страница больше не дёргаются влево */
html{ scroll-behavior:smooth; scrollbar-gutter:stable; }

body{
  font-family:'Raleway', -apple-system, sans-serif;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  line-height:1.4;
  transition:background .3s ease, color .3s ease;
  overflow-x:hidden;
}

a{ color:inherit; text-decoration:none; }

ul{ list-style:none; }
img{ max-width:100%; display:block; }

.wrap{
  max-width:var(--max);
  margin:0 auto;
  padding:0 var(--gut);
}

a:focus-visible, button:focus-visible{
  outline:2px solid var(--ink);
  outline-offset:4px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; transition-duration:0.001ms !important; }
}

/* ============================== NAV ============================== */

.nav{
  padding: 22px 0;
  /* раунд 18 — тонкий разделитель под шапкой */
  border-bottom: 1px solid var(--line-soft);
}
.nav .wrap{
  display:flex;
  /* раунд 19 — ссылки прижаты к логотипу, не у краёв контейнера */
  justify-content:center;
  align-items:center;
  gap:clamp(24px, 4vw, 56px);
}
/* левые 2 ссылки */
.nav-links-left{
  display:flex;
  justify-content:flex-end;
  gap:clamp(20px, 3vw, 40px);
  font-size:17.5px;
  font-weight:500;
}
/* правые 2 ссылки */
.nav-links-right{
  display:flex;
  justify-content:flex-start;
  gap:clamp(20px, 3vw, 40px);
  font-size:17.5px;
  font-weight:500;
}
.nav-links-left a,
.nav-links-right a{
  display:inline-flex;
  align-items:center;
  position:relative;
  /* раунд 18 — чуть светлее серого, чтобы читалось увереннее */
  opacity:.82;
  transition:opacity .2s ease;
}
.nav-links-left a:hover,
.nav-links-left a:focus-visible,
.nav-links-right a:hover,
.nav-links-right a:focus-visible{
  opacity:1;
}
/* старый .nav-links — оставляем для product.css (у продуктовых страниц
   своя версия навигации без деления на left/right) */
.nav-links{
  display:flex;
  justify-content:flex-end;
  gap:clamp(20px, 3vw, 40px);
  font-size:17.5px;
  font-weight:500;
  grid-column:2;
}
.nav-links a{
  display:inline-flex;
  align-items:center;
  position:relative;
  opacity:.82;
  transition:opacity .2s ease;
}
.nav-links a:hover,
.nav-links a:focus-visible{
  opacity:1;
}
/* лого по центру flex-ряда */
.nav-logo{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.nav-logo img{
  height:33px; /* десктоп = мобайл (33px) ◄◄◄ */
  width:auto;
  display:block;
}

.nav-toggle{
  display:none;
  margin-left:auto;
  /* размер кнопки-бургера не меняем (раунд 16) — растёт только логотип */
  width:26px; height:20px;
  border:none;
  background:none;
  cursor:pointer;
  position:relative;
  padding:0;
  transition:transform .15s ease;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
  content:'';
  position:absolute;
  left:0; right:0;
  height:1.5px;
  background:var(--ink);
}
.nav-toggle span{ top:9px; }
.nav-toggle span::before{ top:-9px; }
.nav-toggle span::after{ top:9px; }
/* раунд 16 — превращение полосок в крестик убрано по прямой просьбе:
   иконка всегда остаётся тремя полосками, независимо от того, открыто ли
   меню. Вместо этого при нажатии сама кнопка слегка "проседает" и
   возвращается обратно (transition на .nav-toggle выше). */
.nav-toggle:active{
  transform:scale(.82);
}

/* ============================== TERMINAL DIVIDER ============================== */

.term-divider{
  background:var(--code-bg);
  transition:background .3s ease;
  overflow:hidden;
  /* высота 16px, одинаковая на всех страницах, шрифт 12px не трогаем ◄◄◄ */
  height:16px;
  /* раунд 22 — если дивайдер попадает на дробную координату (напр.
     701.1px после блока с vw-размерами), браузер округляет фон и текст
     по-разному и текст «съезжает» на пиксель. site.js (раздел 5b)
     подтягивает каждый дивайдер к целому пикселю через transform. */
}
/* дивайдер-низ мобильного меню — виден только при открытом меню */
.nav-menu-divider{ display:none; }
.term-inner{
  display:flex;
  align-items:center;
  height:100%;
  line-height:16px; /* строка текста = высоте дивайдера, центр точный ◄◄◄ */
  white-space:nowrap;
  font-family:'JetBrains Mono', monospace;
  font-size:12px;
  letter-spacing:0.02em;
  color:var(--code-dim);
  padding:0 var(--gut);
  overflow:hidden;
  position:relative;
}
/* .term-run оборачивает текст и курсор вместе, чтобы они двигались как
   единое целое — курсор всегда на одной ширине с текстом, поэтому при
   сдвиге строки (translateX) курсор упирается ровно в правый отступ,
   зеркальный левому, и никогда не вылезает за край вкладки/экрана. */
.term-run{
  display:inline-flex;
  align-items:center;
  will-change:transform;
}
.term-text{
  display:inline-block;
  white-space:nowrap;
}
.term-text .hi{ color:var(--code-bright); font-weight:500; }
.term-cur{
  display:inline-block;
  flex-shrink:0;
  width:8px; height:1em;
  background:var(--code-bright);
  margin-left:2px;
  vertical-align:middle;
  animation:blink 1.3s step-end infinite;
}

@keyframes blink{
  0%,100%{ opacity:1; }
  50%     { opacity:0; }
}

/* ============================== SECTION HEADS ============================== */

.section{
  padding: clamp(56px, 9vw, 104px) 0;
}
/* раунд 22 — от дивайдера до заголовка = от заголовка до контента
   (оба = --title-gap, см. :root) */
.term-divider + .section{
  padding-top: var(--title-gap);
}
.section-title{
  font-size:clamp(24px, 3.2vw, 36px);
  font-weight:800;
  letter-spacing:-0.02em;
  color:var(--heading);
  margin-top:0;
  margin-bottom:var(--title-gap);
}
/* раунд 23 — в «Наши работы», «Как мы работаем?» и «Все работы» от
   заголовка до фильтров/шагов в 2 раза меньше. «Что мы делаем?» не
   трогаем — там воздух держат картинки. ◄◄◄ */
#cases .section-title,
#process .section-title,
#worksArchive .section-title,
#worksArchive ~ .section-other-products .section-title{ margin-bottom:calc(var(--title-gap) / 2); }

/* ============================== SERVICES ============================== */

#services .grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:16px;
}
#services .card{
  background:transparent;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  cursor:pointer;
  text-decoration:none;
}

.svc-visual{
  position:relative;
  /* раунд 24 — ещё −20%: было 80%, теперь 64% ширины карточки ◄◄◄ */
  width:64%;
  margin:0 auto;
  aspect-ratio:4/3;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:clamp(16px, 3vw, 26px);
}
.svc-visual svg{
  width:100%;
  height:100%;
  color:var(--ink-45);
}
/* PNG перекрывает SVG полностью; background:var(--paper) не даёт пробою фона */
.svc-photo{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  background:var(--paper);
  border-radius:12px;
}

.svc-info{
  padding:clamp(16px, 2.2vw, 20px) 4px 0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
}
.svc-name{
  font-size:24px; /* ◄◄◄ единый размер названий карточек: svc / other / plan */
  font-weight:800;
  letter-spacing:-0.01em;
  color:var(--heading);
}
/* раунд 13 — название теперь ЗАФИКСИРОВАНО и не участвует в ховер-анимации
   (пользователь отметил: должна двигаться только цена, рядом со стрелкой).
   Цена + стрелка вынесены в отдельный ряд .svc-price-row ниже — МЕНЯТЬ
   ОБЩУЮ РАСКЛАДКУ КАРТОЧКИ (имя сверху / цена+стрелка снизу) — здесь,
   в .svc-info выше. */
.svc-price-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  /* раунд 15 — стрелка (.svc-arrow, 22px) всегда занимает своё место в
     раскладке этого ряда, поэтому его "центр" всегда смещён от истинного
     центра карточки на половину зарезервированного места — (22px+8px
     отступ)/2 = 15px. Сдвигаем весь ряд на эти же 15px вправо, чтобы В
     ПОКОЕ по центру карточки стояла именно цена, без учёта стрелки. */
  transform:translateX(15px);
  transition:transform .3s ease;
}
.card:hover .svc-price-row,
.card:focus-within .svc-price-row{
  /* при наведении компенсация отменяется — ряд возвращается к своему
     естественному (уже центрированному) положению, из-за чего цена
     визуально уходит влево, а справа проявляется стрелка, и вся связка
     цена+стрелка в этот момент центрирована как единое целое */
  transform:translateX(0);
}
.svc-price{
  font-family:'JetBrains Mono', monospace;
  font-size:15px;
  color:var(--heading);
  font-weight:500;
  letter-spacing:-0.01em;
}
.svc-price b{
  color:var(--heading);
  font-weight:700;
}

/* раунд 12 — кнопка "Подробнее" убрана (была перебором вместе с уже
   кликабельной целиком карточкой) — вместо неё приём а-ля Apple. Раунд 13 —
   уточнено по просьбе пользователя: сдвигается и "открывает" стрелку теперь
   только ЦЕНА (.svc-price выше), а не имя целиком — стрелка появляется
   сразу справа от цены, а не у правого края карточки. МЕНЯТЬ РАЗМЕР
   СТРЕЛКИ — width/height ниже (пользователь просил оставить как есть).
   Стрелка всегда занимает своё место в разметке (ряд с ценой не "прыгает"
   по ширине), меняются только opacity/transform. */
.svc-arrow{
  width:22px;
  height:22px;
  color:var(--ink);
  opacity:0;
  transform:translateX(-8px);
  transition:opacity .3s ease, transform .3s ease;
  flex-shrink:0;
}
.svc-arrow svg{ width:100%; height:100%; }
.card:hover .svc-arrow,
.card:focus-within .svc-arrow{
  opacity:1;
  transform:translateX(0);
}

/* ============================== PRELOADER ============================== */

/* ============================== PRELOADER ============================== */

#preloader{
  position:fixed;
  inset:0;
  z-index:9999;
  background:var(--paper);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:32px; /* ◄◄◄ от текста до логотипа */
  transition:opacity .6s ease;
}
#preloader.fade-out{
  opacity:0;
  pointer-events:none;
}

/* square code block — 1/3 of viewport width, equal height */
.pre-terminal{
  /* раунд 23 — ширина ровно по строкам (24 символа моноширинного шрифта),
     блок центрирован над логотипом ◄◄◄ */
  width:calc(24ch + 8px);
  /* раунд 22 — высота по тексту (было квадрат), чтобы логотип стоял
     сразу под строками, а не после пустого места */
  height:auto;
  display:flex;
  flex-direction:column;
  justify-content:center;
  font-family:'JetBrains Mono', monospace;
  font-size:clamp(10px, 1vw, 13px); /* ◄◄◄ */
  line-height:1.75;
  color:var(--ink-45);
  overflow:hidden;
  padding:0 4px;
}
.pre-terminal .pre-line{
  display:block;
  white-space:pre; /* сохраняем отступы в строках */
  overflow:hidden;
  width:0;
  opacity:0;
  animation:typeIn .22s steps(30, end) forwards;
}
.pre-terminal .pre-line.hi{ color:var(--ink); }
.pre-terminal .pre-line.lo{ color:var(--line); }

@keyframes typeIn{
  0%  { width:0; opacity:1; }
  100%{ width:100%; opacity:1; }
}

.pre-line:nth-child(1){ animation-delay:.08s; }
.pre-line:nth-child(2){ animation-delay:.28s; }
.pre-line:nth-child(3){ animation-delay:.46s; }
.pre-line:nth-child(4){ animation-delay:.62s; }
.pre-line:nth-child(5){ animation-delay:.78s; }
.pre-line:nth-child(6){ animation-delay:.92s; }
.pre-line:nth-child(7){ animation-delay:1.06s; }
.pre-line:nth-child(8){ animation-delay:1.18s; }
.pre-line:nth-child(9){ animation-delay:1.30s; }
.pre-line:nth-child(10){ animation-delay:1.40s; }
.pre-line:nth-child(11){ animation-delay:1.50s; }
.pre-line:nth-child(12){ animation-delay:1.58s; }

/* раунд 22 — логотип по центру под текстом, размер = логотип в шапке */
.pre-logo{
  height:33px;   /* ◄◄◄ = .nav-logo img (33px везде) */
  width:auto;
  display:block;
  opacity:0;
  animation:fadeUp .4s ease forwards;
  animation-delay:1.75s;
}

@keyframes fadeUp{
  from{ opacity:0; transform:translateY(6px); }
  to  { opacity:1; transform:translateY(0); }
}

@media (max-width:768px){
  .pre-terminal{
    width:calc(24ch + 8px);
    height:auto;
    font-size:clamp(10px, 3vw, 12px); /* ◄◄◄ */
  }
  .pre-logo{ height:33px; } /* ◄◄◄ = .nav-logo img на мобиле */
}

/* ============================== CASE STUDIES ============================== */

/* сам ряд фильтров пробивает .wrap и тянется на всю ширину вьюпорта —
   иначе скролл упирается в правый край центрированного контейнера
   вместо настоящего края экрана/вкладки, как и должно быть у слайдера */
.filters-wrap{
  position:relative;
  margin-bottom:clamp(24px, 4vw, 36px);
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
}
.filters-wrap::before,
.filters-wrap::after{
  content:'';
  position:absolute;
  left:0;
  right:0;
  height:1px;
  background:var(--line-soft);
  z-index:1;
  pointer-events:none;
}
.filters-wrap::before{ top:0; }
.filters-wrap::after{ bottom:0; }

/* внутренние отступы повторяют --gut страницы (с поправкой на то, что
   контейнер шире max-width), поэтому первая плашка стоит вровень с
   остальным контентом, а последняя докручивается с тем же отступом
   справа — вместо жёсткого обреза по краю .wrap */
.filters{
  display:flex;
  flex-wrap:nowrap;
  overflow-x:auto;
  gap:10px;
  padding:10px max(var(--gut), calc((100vw - var(--max)) / 2 + var(--gut)));
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.filters::-webkit-scrollbar{ display:none; }
.filter-btn{
  flex:0 0 auto;
  white-space:nowrap;
  padding:12px 22px;
  border:1px solid var(--line);
  border-radius:999px;
  font-size:16px;
  font-weight:500;
  color:var(--ink-45);
  background:transparent;
  cursor:pointer;
  font-family:inherit;
  transition:background .2s ease, border-color .2s ease, color .2s ease;
}
.filter-btn:hover{ border-color:var(--ink-45); color:var(--ink); }
/* раунд 21 — белый 85% = #d9d9d9, в тон с выбранной карточкой тарифа */
.filter-btn.active{
  background:#d9d9d9;
  border-color:#d9d9d9;
  color:#1a1a1a;
}
/* раунд 24 — инверсия по теме: на светлой теме выбранный фильтр тёмно-серый
   (цвет фона тёмной темы) с белым текстом; на тёмной остаётся светлым ◄◄◄ */
html:not([data-theme="dark"]) .filter-btn.active{
  background:#161616;
  border-color:#161616;
  color:#ffffff;
}

.case-card.is-hidden{ display:none; }

/* --- «Все работы» — последняя плашка, стилизована как кейс-карточка --- */
.case-all{
  /* чёрная плашка всегда, без hover-цвета — вместо этого темнеет оверлей */
  position:relative;
  overflow:hidden;
}
.case-all::before{
  content:'';
  position:absolute;
  inset:0;
  background:#111111;
  transition:background .35s ease;
}
.case-all:hover::before{ background:#000000; }
/* текст поверх — обычный .case-meta/.case-client/.case-tag уже стилизован */

#cases .grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1px;
  /* серая подложка всей плитки: если перед «Все работы» остаются пустые
     ячейки (фильтр, неполный ряд), они видны как некликабельная серая
     подложка — общий прямоугольник сетки сохраняется */
  background:var(--line);
  border:1px solid var(--line);
}
/* раунд 22 — «Все работы» всегда в последней колонке последнего ряда
   (справа снизу), даже если перед ней пустые ячейки. Работает и при 3,
   и при 2 колонках. */
#cases .grid .case-all{ grid-column:-2 / -1; }
.case-card{
  position:relative;
  aspect-ratio:4/3;
  overflow:hidden;
  display:flex;
  align-items:flex-end;
  padding:18px;
  background:var(--paper);
  transition:transform .25s ease, box-shadow .25s ease;
}
/* лёгкий отрыв карточки из общей плитки при наведении/тапе — совсем
   небольшой подъём с мягкой тенью, просто чтобы было видно, что карточка
   кликабельна, без сильного эффекта */
.case-card:hover{
  transform:translateY(-5px);
  box-shadow:0 14px 28px rgba(0,0,0,.16);
  z-index:3;
}
/* стрелка в правом верхнем углу. Скрыта по умолчанию, проявляется вместе
   с ховером карточки. Раунд 11 — mix-blend-mode:difference убран (см.
   комментарий у .case-card::before ниже, тот же баг, что решался в
   раунде 8 для case-template.html — difference даёт непредсказуемый
   (не всегда белый) оттенок на полноцветном фоне). */
.case-arrow{
  position:absolute;
  top:16px;
  right:16px;
  z-index:2;
  width:39px;
  height:39px;
  color:#fff;
  opacity:0;
  transform:translate(-4px, 4px);
  transition:opacity .25s ease, transform .25s ease;
  pointer-events:none;
}
.case-arrow svg{ width:100%; height:100%; }
.case-card:hover .case-arrow{
  opacity:0.9;
  transform:translate(0,0);
}
.case-card .case-bg{
  position:absolute;
  inset:0;
  background:var(--bcolor, #999);
  /* раунд 24 — без затемнения: плитки светлее, оттенок задаёт сам цвет
     (--bcolor подобраны лесенкой: первая светлее, последняя темнее) ◄◄◄ */
  filter:grayscale(1);
  opacity:1;
  transition:filter .5s ease, opacity .5s ease;
}
.case-card:hover .case-bg{
  filter:grayscale(0);
  opacity:1;
}
/* фото кейса: <span class="case-bg"><img src="..." alt=""></span> —
   так же обесцвечено без наведения и проявляется в цвете при ховере
   (фильтр висит на .case-bg и действует и на картинку) */
.case-card .case-bg img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
/* раунд 11 — текст/стрелка карточки раньше держали контраст через
   mix-blend-mode:difference по обесцвеченному (grayscale) фону, но при
   наведении фон раскрывается в полный цвет (.case-bg:hover выше), и
   difference на насыщенном цвете давал непредсказуемый, не всегда белый
   оттенок текста (тот же самый эффект уже решался в раунде 8 для
   case-template.html — там же и решение: честная затемняющая плёнка
   снизу карточки вместо блендинга). .case-all не участвует — там уже
   сплошная тёмная плашка (.case-all::before).
   Раунд 13 — плёнка сделана светлее и компактнее по прямой просьбе.
   ПРАВИТЬ САМОСТОЯТЕЛЬНО МОЖНО ЗДЕСЬ, меняя два числа в градиенте ниже:
   - первый % (сейчас 45%) — с какой высоты карточки сверху начинается
     затемнение (больше % = меньше площадь тени снизу);
   - последнее число в rgba(0,0,0,.42) — максимальная непрозрачность внизу
     карточки (меньше число = светлее). Было 35% / .55 до этого раунда. */
.case-card:not(.case-all)::before{
  content:'';
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.42) 100%);
  pointer-events:none;
}
.case-meta{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.case-client{
  font-size:clamp(14px, 3.5vw, 26px);
  font-weight:700;
  color:#fff;
}
.case-tag{
  font-size:clamp(9px, 1.6vw, 14px);
  font-weight:600;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:#fff;
  opacity:0.75;
}

/* --- /works.html archive: same case-card look, roomier 2-col grid with a description line --- */
#worksGrid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
}
/* раунд 9 — пропорция карточек строго как на главной (4:3, не 16:10),
   сетка остаётся в 2 колонки на любой ширине (см. медиа-запрос ниже —
   мобильный оверрайд в 1 колонку убран), карточки просто пропорционально
   растут/сжимаются вместе с шириной вкладки */
#worksGrid .case-card{
  aspect-ratio:4/3;
  padding:clamp(16px, 3vw, 26px);
}
/* раунд 11 — текст описания убран из разметки works.html («перегружает,
   пусть заходят на страницу кейса и смотрят»), правило оставлено на
   случай, если понадобится где-то ещё; mix-blend-mode убран по той же
   причине, что у .case-client/.case-tag/.case-arrow выше */
.case-desc{
  font-size:clamp(12px, 1.6vw, 15px);
  font-weight:500;
  line-height:1.4;
  max-width:42ch;
  color:#fff;
  opacity:0.75;
  margin-top:4px;
}

.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:15px 30px;
  border:1px solid var(--btn-bg);
  background:var(--btn-bg);
  color:var(--paper);
  font-size:14px;
  font-weight:600;
  letter-spacing:0.01em;
  border-radius:999px;
  transition:background .25s ease, color .25s ease;
}
.btn:hover{ background:var(--paper); color:var(--ink); }
.btn svg{ width:14px; height:14px; }

/* раунд 25 — карточки кейсов сразу в цвете (без обесцвечивания),
   тег (Сайт/Бот/Дизайн) вынесен в левый верхний угол, название клиента
   опущено ближе к низу. Плёнка: лёгкая сверху (под тег) + основная снизу
   (под название). ПРАВИТЬ ЗДЕСЬ: --pad — отступ от краёв карточки,
   числа в градиенте — сила затемнения снизу (до .33). ◄◄◄ */
.case-card{ --pad:18px; padding:var(--pad) var(--pad) calc(var(--pad) * .75); }
#worksGrid .case-card{ --pad:clamp(16px, 3vw, 26px); padding:var(--pad) var(--pad) calc(var(--pad) * .75); }
.case-card .case-bg,
.case-card:hover .case-bg{ filter:none; }
.case-card:not(.case-all)::before{
  /* мягкая плёнка только в нижней части, под названием; много точек —
     плавный переход без видимых «ступенек» */
  background:linear-gradient(180deg,
      rgba(0,0,0,0) 58%, rgba(0,0,0,.015) 63%, rgba(0,0,0,.04) 68%,
      rgba(0,0,0,.08) 73%, rgba(0,0,0,.13) 78%, rgba(0,0,0,.19) 84%,
      rgba(0,0,0,.25) 90%, rgba(0,0,0,.3) 95%, rgba(0,0,0,.33) 100%);
}
.case-card:not(.case-all) .case-client{ text-shadow:0 1px 14px rgba(0,0,0,.28); }
.case-card:not(.case-all) .case-meta{ position:static; }
/* теги — пилюли: тёмно-серые (как фон сайта в тёмной теме), белый текст.
   Их может быть несколько (Сайт + Бот и т.п.) — лежат в .case-tags */
.case-card .case-tags{
  position:absolute; z-index:2;
  top:var(--pad); left:var(--pad); right:calc(var(--pad) + 40px);
  display:flex; flex-wrap:wrap; gap:6px;
}
.case-card .case-tag{
  display:inline-flex; align-items:center;
  height:22px; padding:0 10px; /* текст по центру по вертикали (flex) */
  opacity:1;
  background:#161616; color:#fff;
  font-family:'Raleway', sans-serif; font-weight:700;
  font-size:12px; letter-spacing:0; text-transform:none;
  border-radius:999px; line-height:1; text-shadow:none;
}
/* «Все работы»: та же пилюля, но светлее — карточка сама тёмная */
.case-all .case-meta{ position:static; }
.case-all .case-client{ position:relative; z-index:2; }
.case-card.case-all .case-tag{ background:rgba(255,255,255,.14); }
@media(max-width:768px){
  .case-card .case-tags{ top:calc(var(--pad) - 5px); left:calc(var(--pad) - 5px); gap:4px; }
  .case-card .case-tag{ height:20px; padding:0 8px; font-size:11px; }
  .case-card{ padding-bottom:calc(var(--pad) * .75 - 5px); }
  #worksGrid .case-card{ padding-bottom:calc(var(--pad) * .75 - 5px); }
}
.case-card:not(.case-all) .case-client{ position:relative; z-index:2; }
.case-arrow{ top:calc(var(--pad, 18px) - 6px); right:calc(var(--pad, 18px) - 6px); }

/* ============================== HOW WE WORK ============================== */

/* «бегущий лог» — построчная консольная подача вместо линии с точками.
   Своя тема (--steps-*), НЕ var(--code-*) — те держат .term-divider
   неизменным. Логика цвета как в карточках "наши работы"
   (.case-client/.case-tag): лейбл — максимальный контраст (белый на
   тёмной теме / почти чёрный на светлой), номер и описание — тот же
   цвет чуть бледнее (opacity). Раскрытие по клику убрано по прямой
   просьбе («слишком много мешанины») — просто статичный список строк,
   только с ховером (заливка светло-серым + тёмный текст, не по теме,
   захардкожено — видно и на телефоне при тапе). */
.steps{
  background:var(--steps-bg);
  border-radius:12px;
  overflow:hidden;
  transition:background .3s ease;
}
/* раунд 13 — ссылки/ховер/стрелка (раунд 12) убраны обратно по прямой
   просьбе: «слишком много движений» на странице. Строки снова просто
   статичный список — без интерактива и без анимаций на ховере. */
/* раунд 20 — шаги переделаны: цифра в скобках убрана,
   вместо неё большая декоративная цифра во всю высоту карточки слева.
   Раскладка: .step = grid(авто-цифра | 1fr-контент), цифра через ::before
   с content:attr(data-num), Raleway bold, серая ~70% насыщенности.
   .step-content — правая колонка, flex-column: лейбл + описание. */
.step{
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:stretch;
  gap:0;
  padding:0;
  border-bottom:1px solid var(--line);
  position:relative;
  overflow:hidden;
  min-height:80px;
}
.step:last-child{ border-bottom:none; }
/* раунд 23 — шаги 2 и 4 на тон темнее: 1 светлый, 2 темнее, 3 светлый… */
.step:nth-child(even){ background:var(--steps-bg-alt); }
/* большая декоративная цифра — левая колонка */
.step::before{
  content:attr(data-num);
  font-family:'JetBrains Mono', monospace;
  /* раунд 21: на широком экране −20% от 90px=72px, на узком десктопе +15% от 52px≈60px.
     clamp(60px, 7.5vw, 72px) даёт плавный рост от 60px до 72px в диапазоне ~800–960px+ */
  font-size:clamp(60px, 7.5vw, 72px);
  font-weight:700;
  line-height:1;
  /* белый, opacity 0.7 — по просьбе раунд 21 */
  /* сплошной цвет вместо полупрозрачного: rgba поверх чередующегося фона
     (#eeeeee / #e6e6e6) давал разный оттенок у цифр — теперь все пять
     одного цвета ◄◄◄ */
  color:#a7a7a7; /* тёмно-серые цифры на светлой теме ◄◄◄ */
  padding:0 clamp(16px, 2.5vw, 32px);
  display:flex;
  align-items:center;
  justify-content:center;
  align-self:center;
  flex-shrink:0;
  user-select:none;
  pointer-events:none;
  letter-spacing:-0.04em;
  transition:color .3s ease;
}
html[data-theme="dark"] .step::before{
  color:#bcbcbc; /* сплошной цвет, тот же принцип ◄◄◄ */
}
/* правая колонка: заголовок + описание */
.step-content{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:6px;
  padding:clamp(16px, 2.2vw, 24px) clamp(16px, 2.5vw, 32px) clamp(16px, 2.2vw, 24px) 0;
}
.step-label{
  flex-shrink:0;
  font-family:'JetBrains Mono', monospace;
  font-size:14px;
  font-weight:600;
  letter-spacing:.04em;
  color:var(--steps-label);
  transition:color .2s ease;
}
.step-desc{
  font-family:'Raleway', -apple-system, sans-serif;
  font-size:14.5px;
  color:var(--steps-sub);
  line-height:1.55;
  transition:color .2s ease;
}
/* .step-tag больше не используется, правило оставлено для совместимости */
.step-tag{ display:none; }

/* ============================== DISCUSS PROJECT ============================== */

.discuss{
  background:var(--paper);
  padding:clamp(48px, 7vw, 72px) 0;
}
/* раунд 10 — только на главной, между «Как мы работаем» и «Готовы
   обсудить проект», отступ уменьшен в 1.5 раза. Через соседний селектор
   #process + .discuss, чтобы не задеть .discuss на страницах продуктов
   (там уже своя правка — .discuss-close, раунд 9). */
#process{ padding-bottom: clamp(37px, 6vw, 69px); }
#process + .discuss{ padding-top: clamp(32px, 4.7vw, 48px); }
.discuss-card{
  /* раунд 21 — обводка убрана, остались только угловые галочки */
  border:none;
  border-radius:16px;
  /* раунд 23 — подложка внутри уголков = фон блока «Как мы работаем?» */
  background:var(--steps-bg);
  transition:background .3s ease;
  padding:clamp(40px, 5.5vw, 64px) clamp(28px, 4vw, 56px);
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:32px;
  position:relative;
}
/* top-left corner accent */
.discuss-card::before{
  content:'';
  position:absolute;
  top:-3px; left:-3px;
  width:36px; height:36px;           /* ◄◄◄ corner size */
  border-top:3px solid var(--ink);   /* ◄◄◄ corner thickness */
  border-left:3px solid var(--ink);
  border-radius:16px 0 0 0;
  pointer-events:none;
}
/* bottom-right corner accent */
.discuss-card::after{
  content:'';
  position:absolute;
  bottom:-3px; right:-3px;
  width:36px; height:36px;
  border-bottom:3px solid var(--ink);
  border-right:3px solid var(--ink);
  border-radius:0 0 16px 0;
  pointer-events:none;
}
.discuss-title{
  font-size:clamp(24px, 3.2vw, 36px); /* = .section-title */
  font-weight:800;
  letter-spacing:-0.02em;
  color:var(--heading);
  max-width:22ch;
}
.discuss-links{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.discuss-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:0;
  padding:15px 28px; /* = «Подробнее» ◄◄◄ */
  border:1px solid var(--btn-bg);
  border-radius:999px;
  font-size:16px;
  font-weight:600;
  font-family:'Raleway', -apple-system, sans-serif;
  background:var(--btn-bg);
  color:var(--paper);
  cursor:pointer;
  /* без width:fit-content — .discuss-links это column-flex со
     align-items:stretch по умолчанию, поэтому все кнопки сами
     тянутся до ширины самой широкой (см. правку "одинаковая ширина") */
  transition:background .2s ease, border-color .2s ease, color .2s ease, opacity .2s ease;
}
.discuss-link:hover{ background:var(--paper); color:var(--ink); transform:translateY(-2px); }
.discuss-link svg{ width:15px; height:15px; flex-shrink:0; }

/* ============================== LEAD MODAL (Оставить заявку) ============================== */

body.lead-modal-open{ overflow:hidden; }

.lead-modal{
  position:fixed;
  inset:0;
  z-index:1000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  visibility:hidden;
  opacity:0;
  transition:opacity .25s ease, visibility 0s linear .25s;
}
.lead-modal.open{
  visibility:visible;
  opacity:1;
  transition:opacity .25s ease, visibility 0s linear;
}
.lead-modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.55);
  cursor:pointer;
}
.lead-modal-box{
  position:relative;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:20px;
  padding:clamp(28px, 4vw, 44px);
  max-width:440px;
  width:100%;
  max-height:88vh;
  overflow-y:auto;
  transform:translateY(12px) scale(.98);
  transition:transform .25s ease;
}
/* на тёмной теме фон формы почти чёрный (var(--paper)) — обычный
   var(--line) слишком тусклый, край едва заметен на чёрном фоне,
   поэтому здесь обводка чуть светлее, чтобы форма всё-таки читалась */
html[data-theme="dark"] .lead-modal-box{ border-color:rgba(255,255,255,.16); }
.lead-modal.open .lead-modal-box{ transform:translateY(0) scale(1); }
.lead-modal-close{
  position:absolute;
  top:14px; right:14px;
  width:32px; height:32px;
  border:none;
  background:none;
  font-size:22px;
  line-height:1;
  color:var(--ink-45);
  cursor:pointer;
  transition:color .2s ease;
}
.lead-modal-close:hover{ color:var(--ink); }
.lead-modal-title{
  font-size:clamp(20px, 2.6vw, 26px);
  font-weight:800;
  letter-spacing:-.02em;
  color:var(--heading);
  margin-bottom:8px;
  padding-right:24px;
}
.lead-modal-sub{
  font-size:14px;
  color:var(--ink-45);
  line-height:1.5;
  margin-bottom:24px;
}
.lead-field{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-bottom:16px;
  font-size:13px;
  font-weight:600;
  color:var(--ink-70);
}
.lead-field input,
.lead-field textarea{
  font-family:'Raleway', -apple-system, sans-serif;
  font-size:14px;
  font-weight:500;
  color:var(--ink);
  border:1px solid var(--line);
  border-radius:10px;
  padding:11px 14px;
  background:var(--paper);
  resize:vertical;
  transition:border-color .2s ease;
}
.lead-field input:focus,
.lead-field textarea:focus{ outline:none; border-color:var(--ink); }
.lead-check{
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-size:12.5px;
  line-height:1.5;
  color:var(--ink-45);
  margin-bottom:22px;
  cursor:pointer;
}
.lead-check input{
  margin-top:3px;
  flex-shrink:0;
  width:15px; height:15px;
  accent-color:var(--ink);
  cursor:pointer;
}
.lead-check a{ color:var(--ink-70); border-bottom:1px solid var(--line); }
.lead-check a:hover{ color:var(--ink); }
.lead-honey{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
.lead-submit{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:100%;
  padding:14px 26px;
  border:1px solid var(--btn-bg);
  border-radius:999px;
  background:var(--btn-bg);
  color:var(--paper);
  font-family:'Raleway', -apple-system, sans-serif;
  font-size:16px;
  font-weight:600;
  letter-spacing:.02em;
  cursor:pointer;
  transition:background .2s ease, color .2s ease, opacity .2s ease;
}
.lead-submit:hover{ background:var(--paper); color:var(--ink); }
.lead-submit:disabled{ opacity:.5; cursor:default; }
.lead-status{
  margin-top:14px;
  font-size:13px;
  line-height:1.5;
  color:var(--ink-70);
  min-height:1em;
  text-align:center;
}
.lead-status.err{ color:#c0392b; }
.lead-status.ok{ color:#1a7a3e; }

@media(max-width:480px){
  .lead-modal{ padding:12px; }
  .lead-modal-box{ border-radius:16px; padding:28px 20px; }
}

/* ============================== FOOTER ============================== */

.footer{
  padding: clamp(24px,4vw,36px) 0 clamp(36px,6vw,48px);
}
.footer-line{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:14px;
  /* раунд 16 — текст сделан жирнее по просьбе пользователя (было 400) */
  font-weight:700;
  color:var(--ink);
  margin-bottom:22px;
}
.footer-logo{
  height:20px;
  width:auto;
  display:block;
  flex-shrink:0;
  /* раунд 17 — на мобиле когда текст переносится на 2 строки,
     логотип увеличивается в 1.75× пропорционально (20px → 35px) */
}
.footer-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:20px;
}
.footer-links{
  display:flex;
  gap:26px;
  flex-wrap:wrap;
  font-size:13px;
  color:var(--ink-70);
}
.footer-links a:hover{ color:var(--ink); }

.footer-social{
  display:flex;
  gap:14px;
}
.footer-social a{
  width:34px; height:34px;
  border:1px solid var(--line);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:border-color .25s ease, transform .25s ease;
}
.footer-social a:hover{ border-color:var(--ink); transform:translateY(-2px); }
.footer-social svg{ width:15px; height:15px; }

/* Tablet ~1024px */
@media (max-width: 1024px){
  #services .grid{ grid-template-columns:repeat(3,1fr); }
  #cases .grid{ grid-template-columns:repeat(3,1fr); }
}

/* Small tablet / large mobile ~768px */
@media (max-width: 768px){
  /* на мобиле левые/правые ссылки скрываем, показываем бургер */
  .nav-links-left{ display:none; }
  .nav-links-right{ display:none; }
  /* дропдаун: оба списка в одном потоке через .nav.nav-open */
  .nav.nav-open .nav-links-left,
  .nav.nav-open .nav-links-right{
    display:flex; flex-direction:column;
    gap:16px;
  }
  /* общий дроп-контейнер: оба ul абсолютны, но правый идёт вплотную под левым через display:contents + pseudo */
  .nav.nav-open::after{
    content:'';
    position:absolute; top:100%; left:0; right:0;
    background:var(--paper); border-bottom:1px solid var(--line);
    z-index:18;
  }
  .nav.nav-open .nav-links-left{
    position:absolute; top:100%; left:0; right:0;
    background:var(--paper);
    padding:20px var(--gut) 8px;
    z-index:22;
  }
  .nav.nav-open .nav-links-right{
    position:absolute; top:100%; left:0; right:0;
    background:var(--paper);
    padding:0 var(--gut) 28px;
    z-index:20;
    /* раунд 22 — смещение вниз на высоту левого блока: padding-top 20 +
       2 строки по 24px + 2 gap по 16px (раньше считалось с одним gap,
       и правый список наезжал на левый — «Продукты/Кейсы» пропадали) */
    padding-top:calc(20px + 24px * 2 + 16px * 2);
  }
  .nav.nav-open .nav-links-left a,
  .nav.nav-open .nav-links-right a{ line-height:24px; }
  /* раунд 22 — нижняя граница меню = дивайдер с бегущей строкой
     (элемент создаёт site.js, top считается там же) */
  .nav.nav-open .nav-menu-divider{ display:block; position:absolute; left:0; right:0; z-index:24; }

  .nav-links{ display:none; }
  .nav-toggle{ display:flex; align-items:center; justify-content:center; }
  /* раунд 22 — на мобиле лого по центру, бургер прижат вправо (absolute,
     чтобы не сдвигал лого с центра) ◄◄◄ */
  .nav .wrap{ justify-content:center; gap:0; position:relative; }
  .nav-logo{ justify-content:center; flex-shrink:0; }
  .nav-toggle{ position:absolute; right:var(--gut); top:50%; margin-top:-10px; margin-left:0; }
  .nav-logo img{ height:33px; } /* раунд 23 — −10% (было 37px) ◄◄◄ */

  .nav-links.mobile-open{
    display:flex;
    position:absolute;
    top:100%; left:0; right:0;
    flex-direction:column;
    background:var(--paper);
    border-bottom:1px solid var(--line);
    padding:20px var(--gut) 28px;
    gap:16px;
    z-index:20;
  }
  /* мобильное меню — показываем оба блока ссылок в колонку */
  .nav-links-left.mobile-open,
  .nav-links-right.mobile-open{
    display:flex;
    flex-direction:column;
  }
  .nav{ position:relative; }

  #cases .grid{ grid-template-columns:repeat(2,1fr); }
  /* раунд 9 — #worksGrid сознательно НЕ переопределяется здесь: по
     прямой просьбе сетка works.html остаётся 2 колонки и пропорция 4:3
     на любой ширине экрана, карточки просто уменьшаются вместе с ней */

  /* втроём в ряд Бот/Сайт/Дизайн не помещаются, а 2+1 смотрится странно —
     на мобильной ширине карточки идут одна под другой, вид карточки не
     меняется (иконка сверху, текст по центру), просто во всю ширину */
  #services .grid{
    grid-template-columns:1fr;
    gap:28px;
  }
  .step{
    /* grid сохраняется, только цифра чуть меньше */
    min-height:64px;
  }
  .step::before{
    font-size:clamp(38px, 13vw, 60px);
    /* раунд 21 — левый padding = правому (симметрия вокруг цифры) */
    padding:0 clamp(12px, 4vw, 20px);
  }
  .step-content{
    /* раунд 21 — левый отступ контента от цифры = правому padding цифры */
    padding:14px clamp(12px, 4vw, 20px) 14px clamp(12px, 4vw, 20px);
  }

  /* раунд 21 — иконки мобиль: было 75%, −10% → ~67.5% */
  .svc-visual{
    width:40%; /* раунд 24 — 40% ширины карточки на мобиле ◄◄◄ */
    margin:0 auto;
  }
}

/* Стек «Готовы обсудить проект» — центрируем контент, только когда
   заголовок и кнопки уже перестроились друг под другом (flex-wrap).
   В широком (нестековом) расположении всё остаётся как есть —
   ширина стыка измерена эмпирически: 682px ещё стек, 684px уже нет. */
@media (max-width: 682px){
  .discuss-card{
    flex-direction:column;
    align-items:center;
    text-align:center;
  }
  .discuss-title{ max-width:none; }
}

/* ============================== OTHER PRODUCTS (works.html + shared) ============================== */

.section-other-products{ padding-bottom:clamp(16px, 4vw, 40px); border-bottom:none; }

.other-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
}
.other-grid-3{
  grid-template-columns:repeat(3, 1fr);
}
/* раунд 22 — плашки «Продукты» один в один как «Другие продукты» на
   страницах услуг (product.css): текст по центру, ховер #ebebeb */
.other-card{
  position:relative;
  background:var(--paper);
  padding:clamp(28px, 4vw, 48px);
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:8px;
  transition:background .2s ease, color .2s ease;
  text-decoration:none;
}
.other-card .case-arrow{
  position:absolute;
  top:16px;
  right:16px;
  z-index:2;
  width:39px;
  height:39px;
  color:#1a1a1a;
  opacity:0;
  transform:translate(-4px, 4px);
  transition:opacity .25s ease, transform .25s ease;
  pointer-events:none;
}
.other-card .case-arrow svg{ width:100%; height:100%; }
.other-card:hover{ background:#ebebeb; }
.other-card:hover .other-name{ color:#1a1a1a; }
.other-card:hover .other-hint{ color:rgba(0,0,0,.55); }
.other-card:hover .case-arrow{
  opacity:0.9;
  transform:translate(0,0);
}
.other-name{
  font-size:24px; /* = .svc-name / .plan-name */
  font-weight:800;
  letter-spacing:-0.02em;
  color:var(--heading);
  transition:color .2s ease;
}
.other-hint{
  font-family:'JetBrains Mono', monospace;
  font-size:15px; /* = .svc-price */
  font-weight:500;
  letter-spacing:-.01em;
  color:var(--ink-45);
  transition:color .2s ease;
}

/* раунд 24 — инверсия на светлой теме: при наведении плитка тёмно-серая
   (цвет фона тёмной темы), текст и стрелка белые. На тёмной теме остаётся
   светлая плитка с тёмным текстом ◄◄◄ */
html:not([data-theme="dark"]) .other-card:hover{ background:#161616; }
html:not([data-theme="dark"]) .other-card:hover .other-name{ color:#ffffff; }
html:not([data-theme="dark"]) .other-card:hover .other-hint{ color:rgba(255,255,255,.6); }
html:not([data-theme="dark"]) .other-card:hover .case-arrow{ color:#ffffff; }


/* блок «Продукты» + «Готовы обсудить проект» сближены, как на страницах
   услуг (product.css, .discuss-close) */
.discuss-close{ padding-top:clamp(16px, 4vw, 40px); }

@media(max-width:640px){
  .other-grid-3{ grid-template-columns:1fr; }
  .other-grid{ grid-template-columns:1fr; }
}

/* Mobile ~480px */
@media (max-width: 480px){

  /* раунд 17 — логотип в футере ×1.75 когда текст переносится на 2 строки */
  .footer-logo{ height:35px; }

  .footer-row{ flex-direction:column; align-items:flex-start; }
  /* раунд 13 — порядок 2×2 изменён по прямой просьбе: Контакты / Оферта
     сверху, Политика / Соглашение снизу (было: Политика/Контакты сверху,
     Соглашение/Оферта снизу). Визуальный порядок через order — DOM-порядок
     для табуляции не трогаем. li:nth-child — 1=Политика, 2=Соглашение,
     3=Оферта, 4=Контакты (см. разметку подвала). */
  .footer-links{ display:grid; grid-template-columns:1fr 1fr; gap:10px 24px; width:100%; }
  .footer-links li:nth-child(1){ order:3; }
  .footer-links li:nth-child(2){ order:4; }
  .footer-links li:nth-child(3){ order:2; }
  .footer-links li:nth-child(4){ order:1; }
}

/* ============================== COOKIE ==============================
   Уведомление о cookie — одно на все страницы (разметку вставляет
   assets/js/site.js, раздел 9). Одинаковый блок есть в styles.css и
   product.css. Строгая карточка в цветах сайта: сверху полоска-терминал
   как у дивайдеров, ниже официальный текст и кнопка как у «Подробнее». */
.cookie{
  position:fixed;
  /* раунд 25 — по центру по горизонтали, внизу экрана ◄◄◄ */
  left:50%;
  bottom:clamp(16px, 2.5vw, 32px);
  z-index:900;                     /* ниже модалки заявки (1000) */
  width:min(500px, calc(100vw - 32px)); /* ширина карточки ◄◄◄ */
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 14px 32px rgba(0,0,0,.12);
  opacity:0;
  transform:translate(-50%, 12px);
  pointer-events:none;
  transition:opacity .3s ease, transform .3s ease;
}
.cookie.show{ opacity:1; transform:translate(-50%, 0); pointer-events:auto; }
.cookie-head{
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  height:24px; padding:0 16px;
  background:var(--code-bg);
  font-family:'JetBrains Mono', monospace; font-size:11px; letter-spacing:.02em;
  color:var(--code-dim); white-space:nowrap; overflow:hidden;
}
.cookie-head b{ font-weight:500; color:var(--code-bright); }
/* раунд 25 — кнопка «Принять» под текстом, по центру */
.cookie-body{
  display:flex; flex-direction:column; align-items:center; gap:16px;
  padding:18px 18px 20px;
}
.cookie-text{
  font-family:'Raleway', -apple-system, sans-serif;
  font-size:13px; line-height:1.6; color:var(--ink-70);
}
.cookie-text a{ color:var(--ink); border-bottom:1px solid var(--line); transition:border-color .2s; }
.cookie-text a:hover{ border-color:var(--ink); }
.cookie-accept{
  flex-shrink:0;
  padding:12px 28px;
  border:1px solid var(--btn-bg); border-radius:999px;
  background:var(--btn-bg); color:var(--paper);
  font-family:'Raleway', -apple-system, sans-serif;
  font-size:13px; font-weight:600; letter-spacing:.02em;
  cursor:pointer;
  transition:background .25s ease, color .25s ease;
}
.cookie-accept:hover{ background:var(--paper); color:var(--ink); }
@media(max-width:480px){
  .cookie-body{ gap:14px; }
}
@media(prefers-reduced-motion:reduce){ .cookie{ transition:none; } }

/* раунд 25 — реквизиты исполнителя в самом низу подвала (ст. 9 ЗоЗПП) ◄◄◄ */
.footer-legal{ margin-top:18px; font-size:13px; font-weight:500; line-height:1.6; color:var(--ink-45); } /* = .doc-meta на правовых страницах */
/* цифры «официального» вида: ровные (lining) и одинаковой ширины — как в шапке
   правовых страниц; у Raleway по умолчанию цифры «старого стиля», разной высоты */
.footer-legal{ font-variant-numeric:lining-nums tabular-nums; }
.footer-legal strong{ font-weight:inherit; color:inherit; }

/* раунд 26 — фон «Готовы обсудить проект?»: мелкая сетка, натянутая на
   рельеф (выпуклости и впадины) — объёмная поверхность в плоском рисунке.
   Файлы assets/backgrounds/mesh-light.svg / mesh-dark.svg (сгенерированы скриптом,
   прозрачность линий — в атрибуте stroke внутри файла) ◄◄◄ */

/* раунд 27 — навигация в шапке тем же шрифтом, что пилюли кейсов:
   Raleway 600, полный контраст (без полупрозрачности), ховер — лёгкое
   приглушение. Цвет — var(--ink) (тёмно-серый на светлой теме,
   светлый на тёмной) ◄◄◄ */
.nav-links-left a,
.nav-links-right a,
.nav-links a{ font-weight:600; opacity:1; color:var(--ink); letter-spacing:0; }
.nav-links-left a:hover,
.nav-links-right a:hover,
.nav-links a:hover,
.nav-links-left a:focus-visible,
.nav-links-right a:focus-visible,
.nav-links a:focus-visible{ opacity:.6; }

/* раунд 27 — фильтр кейсов той же жирности, что навигация (600), цвет прежний */
.filter-btn{ font-weight:600; }

/* раунд 28 — пустой раздел в архиве работ (works.html): текст + кнопка
   заказа, вместо пустой сетки ◄◄◄ */
.works-empty{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:24px;
  min-height:clamp(260px, 32vw, 420px); padding:40px 24px; text-align:center;
  border:1px solid var(--line); background:var(--paper-off, var(--paper));
}
.works-empty[hidden]{ display:none; }
.works-empty-text{ font-size:clamp(22px, 3vw, 32px); font-weight:800; letter-spacing:-.02em; color:var(--heading); }
.works-empty-btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:15px 28px; border:1px solid var(--btn-bg); border-radius:999px;
  font-family:'Raleway', -apple-system, sans-serif; font-size:16px; font-weight:600; letter-spacing:.02em;
  background:var(--btn-bg); color:var(--paper); cursor:pointer;
  transition:background .2s ease, color .2s ease, transform .2s ease;
}
.works-empty-btn:hover{ background:var(--paper); color:var(--ink); transform:translateY(-2px); }
#worksGrid[hidden]{ display:none; }
/* высота пустого блока = высоте одного ряда карточек архива
   (2 карточки 4:3 в ряд → весь ряд 8:3), чтобы при переключении
   фильтра ничего не прыгало ◄◄◄ */
.works-empty{ min-height:0; aspect-ratio:8 / 3; padding:16px; box-sizing:border-box; }
@media(max-width:768px){
  .works-empty{ gap:12px; padding:12px; }
  .works-empty-text{ font-size:16px; }
  .works-empty-btn{ padding:10px 18px; font-size:14px; }
}
/* раунд 30 — последняя плитка архива «Расширим портфолио?» с кнопкой
   заказа. Размер = карточке (4:3); если в ряду она осталась одна —
   растягивается на весь ряд (класс .is-wide из site.js) ◄◄◄ */
.works-more{
  aspect-ratio:4 / 3; box-sizing:border-box; padding:16px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:20px;
  text-align:center; background:var(--paper-off, var(--paper));
}
.works-more.is-wide{ grid-column:1 / -1; aspect-ratio:8 / 3; }
.works-more[hidden]{ display:none; }
@media(max-width:768px){
  .works-more{ gap:10px; padding:10px; }
  .works-more .works-empty-text{ font-size:15px; }
  .works-more .works-empty-btn{ padding:9px 14px; font-size:12.5px; }
}
@media(max-width:768px){ .case-card .case-tags{ right:8px; flex-wrap:nowrap; } }

/* раунд 31 — короткий первый экран на главной: заголовок (тот же размер,
   что .hero-title на страницах услуг) + одна строка пояснения ◄◄◄ */
.home-hero{ padding:clamp(48px, 9vw, 96px) 0 clamp(44px, 8vw, 88px); }
.home-hero-title{ font-size:clamp(34px, 6vw, 76px); font-weight:800; letter-spacing:-.03em; line-height:1.02; color:var(--heading); }
.home-hero-sub{ margin-top:clamp(18px, 2.8vw, 28px); font-size:clamp(15px, 1.7vw, 20px); font-weight:500; color:var(--ink-70); line-height:1.65; max-width:48ch; }
@media(max-width:768px){ .home-hero{ padding-top:clamp(28px, 8vw, 40px); } .home-hero-title br{ display:none; } }

/* раунд 32 — пилюли и стрелка на карточках кейсов цвета фона сайта
   (на светлой теме белые с тёмным текстом), стрелка — в такой же
   круглой «пилюле», чтобы читалась на светлых картинках ◄◄◄ */
.case-card .case-tag{ background:var(--paper); color:var(--ink); }
.case-card.case-all .case-tag{ background:rgba(255,255,255,.14); color:#fff; }
/* стрелка на карточках кейсов (кроме тёмной «Все работы») — цвет фона
   тёмной темы, чтобы читалась на светлых картинках; стиль прежний ◄◄◄ */
.case-card:not(.case-all) .case-arrow{ color:#161616; }

/* раунд 32 — заголовок первого экрана: чуть свободнее буквы и строки,
   подзаголовок с «печатающимся» словом (site.js, раздел «Ротатор») ◄◄◄ */
.home-hero-title{ letter-spacing:-.015em; line-height:1.08; }
.hero-rotator{
  font-family:'JetBrains Mono', monospace; font-weight:700; color:var(--heading);
  white-space:nowrap;
}
.hero-rotator-cur{
  display:inline-block; width:.55em; height:1.05em; margin-left:2px; vertical-align:-.15em;
  background:var(--heading); animation:heroCur 1s steps(1) infinite;
}
@keyframes heroCur{ 50%{ opacity:0; } }
@media (prefers-reduced-motion:reduce){ .hero-rotator-cur{ animation:none; } }
/* белые пилюли и стрелка на белых картинках — мягкая тень, чтобы не терялись */
.case-card:not(.case-all) .case-tag{ box-shadow:0 1px 8px rgba(0,0,0,.14); }

/* раунд 33 — заголовки на ступень тоньше (800 → 700): первый экран,
   заголовки разделов, названия продуктов, «Готовы обсудить проект?» ◄◄◄ */
.home-hero-title, .section-title, .svc-name, .discuss-title{ font-weight:700; }

/* раунд 34 — заголовок первого экрана размером с заголовки разделов,
   подзаголовок — размером обычного текста; шаги «Как мы работаем?» —
   тем же шрифтом, что описание (моноширинный остаётся в дивайдерах) ◄◄◄ */
.home-hero-title{ font-size:clamp(24px, 3.2vw, 36px); letter-spacing:-.02em; line-height:1.15; }
.home-hero-sub{ font-size:16px; line-height:1.7; margin-top:16px; }
.home-hero{ padding:clamp(40px, 7vw, 72px) 0 clamp(36px, 6vw, 64px); }
.step-label{ font-family:'Raleway', -apple-system, sans-serif; font-size:16px; font-weight:700; letter-spacing:0; }

/* ===== раунд 35 — единая шкала размеров шрифта =====
   36px — заголовки (первый экран, разделы)
   24px — названия карточек: продукты, кейсы, шаги «Как мы работаем?»
   16px — основной текст: подзаголовок, описания шагов, навигация ◄◄◄ */
.home-hero-title, .home-hero-sub{ max-width:none; }
.case-client{ font-size:clamp(16px, 3.5vw, 24px); }
.step-label{ font-size:clamp(18px, 2.2vw, 24px); letter-spacing:-.01em; }
.step-desc{ font-size:16px; line-height:1.6; }
.step-content{ gap:8px; }
.nav-links-left, .nav-links-right, .nav-links{ font-size:16px; }
.case-client{ font-size:clamp(14px, 3.5vw, 24px); }
.case-card .case-tag{ white-space:nowrap; }

/* ===== раунд 36 — шапка: логотип слева, навигация справа; ниже на
   10% (десктоп) и 15% (телефон), бургер справа ◄◄◄ */
.nav{ padding:18px 0; }
.nav .wrap{ justify-content:flex-start; gap:clamp(20px, 3vw, 40px); }
.nav-logo{ order:-1; margin-right:auto; }
@media(max-width:768px){
  .nav{ padding:16px 0; }
  .nav .wrap{ justify-content:flex-start; }
  .nav-logo{ justify-content:flex-start; margin-right:0; }
}

/* раунд 36 — первый экран снова крупный (как было до раунда 34): это
   заголовок страницы, ему можно быть больше заголовков разделов ◄◄◄ */
.home-hero-title{ font-size:clamp(34px, 6vw, 76px); font-weight:700; letter-spacing:-.015em; line-height:1.08; max-width:none; }
.home-hero-sub{ font-size:clamp(16px, 1.6vw, 19px); line-height:1.65; max-width:52ch; margin-top:clamp(18px, 2.6vw, 26px); }
.home-hero{ padding:clamp(48px, 9vw, 96px) 0 clamp(44px, 8vw, 88px); }

/* раунд 37 — кнопка на первом экране главной: по центру текстового
   блока, шириной как на телефоне (~350px); над ней подсказка ◄◄◄ */
.home-hero-text{ display:flex; flex-direction:column; align-items:flex-start; max-width:52ch; }
.home-hero-hint{ margin-top:20px; font-size:15px; line-height:1.6; color:var(--ink-45); }
.home-hero-cta{
  align-self:center; width:min(100%, 350px); margin-top:clamp(24px, 3vw, 32px);
  display:inline-flex; align-items:center; justify-content:center;
  padding:15px 28px; border:1px solid var(--btn-bg); border-radius:999px;
  font-family:'Raleway', -apple-system, sans-serif; font-size:16px; font-weight:600; letter-spacing:.02em;
  color:var(--paper); background:var(--btn-bg); cursor:pointer;
  transition:background .25s ease, color .25s ease, transform .2s ease;
}
.home-hero-cta:hover{ background:var(--paper); color:var(--ink); transform:translateY(-2px); }
@media(max-width:768px){ .home-hero-text{ max-width:none; } .home-hero-cta{ width:100%; } }

/* раунд 38 — «Продукты» на телефоне: три карточки в ряд, всё на ~20%
   меньше, чтобы влезло ◄◄◄ */
@media(max-width:768px){
  #services .grid{ grid-template-columns:repeat(3, 1fr); gap:10px; }
  #services .svc-visual{ width:72%; }
  #services .svc-name{ font-size:19px; }
  #services .svc-price{ font-size:12px; white-space:nowrap; }
  #services .svc-info{ gap:4px; }
}
@media(max-width:768px){
  #services .svc-visual{ padding:0; }
  #services .card{ min-width:0; }
}

/* ===== раунд 39 — первый экран по референсу: всё по центру, бейдж над
   заголовком, снизу «веер» из карточек кейсов, обрезанный низом блока ◄◄◄ */
.home-hero.is-centered{ padding-bottom:0; overflow:hidden; }
.home-hero.is-centered .wrap{ display:flex; flex-direction:column; align-items:center; text-align:center; }
.home-hero.is-centered .home-hero-text{ align-items:center; max-width:60ch; }
.home-hero.is-centered .home-hero-sub{ max-width:60ch; }
.hero-badge{
  display:inline-flex; align-items:center; gap:8px; margin-bottom:clamp(18px, 2.6vw, 26px);
  padding:7px 14px; border-radius:999px; border:1px solid var(--line);
  font-size:14px; font-weight:600; color:var(--ink-70);
}
.hero-badge i{ width:7px; height:7px; border-radius:50%; background:#2bb673; box-shadow:0 0 0 4px rgba(43,182,115,.15); }
.hero-fan{
  display:flex; justify-content:center; align-items:flex-start;
  height:clamp(230px, 25vw, 340px); margin-top:clamp(40px, 6vw, 72px);
  padding-top:24px; overflow:hidden;
}
.fan-card{
  position:relative; flex:0 0 auto; display:block;
  width:clamp(150px, 16vw, 220px); aspect-ratio:3 / 4; margin:0 -16px;
  border-radius:18px; overflow:hidden; background:var(--paper-off, #eee);
  transform:translateY(var(--y)) rotate(var(--r)); transform-origin:50% 100%;
  box-shadow:0 18px 40px rgba(0,0,0,.18); z-index:var(--z);
  transition:transform .35s ease, box-shadow .35s ease;
}
.fan-card.is-main{ width:clamp(170px, 19vw, 260px); }
.fan-card:hover{ transform:translateY(calc(var(--y) - 16px)) rotate(var(--r)); box-shadow:0 26px 50px rgba(0,0,0,.24); z-index:10; }
.fan-card img{ width:100%; height:100%; object-fit:cover; display:block; }
.fan-card::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.35) 100%); pointer-events:none; }
.fan-tags{ position:absolute; z-index:2; top:12px; left:12px; display:flex; gap:5px; }
.fan-tag{
  display:inline-flex; align-items:center; height:22px; padding:0 9px; border-radius:999px;
  background:var(--paper); color:var(--ink); font-size:12px; font-weight:700; white-space:nowrap;
  box-shadow:0 1px 8px rgba(0,0,0,.14);
}
.fan-name{ position:absolute; z-index:2; left:14px; right:14px; bottom:14px; text-align:left; font-size:clamp(15px, 1.5vw, 19px); font-weight:700; color:#fff; text-shadow:0 1px 14px rgba(0,0,0,.3); }
@media(max-width:768px){
  .home-hero.is-centered .home-hero-text{ max-width:none; }
  .hero-fan{ height:220px; margin-top:36px; }
  .fan-card{ width:130px; margin:0 -14px; }
  .fan-card.is-main{ width:150px; }
  .fan-card:first-child, .fan-card:last-child{ display:none; }
  .fan-tag{ height:19px; padding:0 7px; font-size:10.5px; }
  .fan-name{ font-size:14px; left:10px; bottom:10px; }
  .fan-tags{ top:9px; left:9px; gap:4px; }
}

/* раунд 39 — стрелка на карточках кейсов на телефоне: меньше, верхний
   край рисунка стрелки на одной линии с верхом пилюль, отступ справа =
   отступу сверху. Сама стрелка в svg начинается с 7/24 размера, поэтому
   сдвигаем контейнер на эту долю ◄◄◄ */
@media(max-width:768px){
  .case-card .case-arrow{
    width:26px; height:26px;
    top:calc(var(--pad) - 5px - 26px * 7 / 24);
    right:calc(var(--pad) - 5px - 26px * 7 / 24);
  }
  /* «Как мы работаем?»: отступ от края до цифры = от цифры до текста */
  .step-content{ padding-left:0 !important; }
}
/* веер: видно названия карточек, меньше перекрытие */
.hero-fan{ height:clamp(300px, 29vw, 420px); }
.fan-card{ margin:0 -8px; }
@media(max-width:768px){ .hero-fan{ height:250px; } .fan-card{ margin:0 -10px; } }

/* ===== раунд 40 — веер возможностей вместо карточек кейсов: монохромные
   карточки с линейными иконками, нижняя часть уходит под дивайдер ◄◄◄ */
.skills-fan{ height:clamp(190px, 18vw, 250px); margin-top:clamp(44px, 6vw, 72px); padding-top:30px; }
.skill-card{
  position:relative; flex:0 0 auto;
  width:clamp(120px, 12vw, 170px); aspect-ratio:3 / 4; margin:0 -6px;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:14px;
  padding:clamp(18px, 2vw, 28px) 12px 0;
  border-radius:18px; background:var(--paper); border:1px solid var(--line);
  color:var(--heading);
  transform:translateY(var(--y)) rotate(var(--r)); transform-origin:50% 100%;
  box-shadow:0 14px 34px rgba(0,0,0,.08); z-index:var(--z);
  transition:transform .35s ease, box-shadow .35s ease;
}
.skill-card.is-main{ width:clamp(140px, 14vw, 195px); }
.skill-card:hover{ transform:translateY(calc(var(--y) - 14px)) rotate(var(--r)); box-shadow:0 22px 44px rgba(0,0,0,.14); z-index:10; }
.skill-card svg{ width:52%; height:auto; }
.skill-name{ font-size:clamp(13px, 1.1vw, 16px); font-weight:700; line-height:1.25; text-align:center; }
@media(max-width:768px){
  .skills-fan{ height:170px; margin-top:36px; }
  .skill-card{ width:104px; margin:0 -8px; gap:10px; padding-top:16px; }
  .skill-card.is-main{ width:118px; }
  .skill-card:nth-child(1), .skill-card:nth-child(7){ display:none; }
  .skill-name{ font-size:12px; }
}

/* ===== раунд 41 — первый экран без плашки и веера; блок обычной высоты.
   Все основные кнопки одной ширины: «Обсудить проект», «Подробнее»
   и кнопки в «Готовы обсудить проект?» — 224px ◄◄◄ */
.home-hero.is-centered{ padding-bottom:clamp(44px, 8vw, 88px); }
.discuss-link, .home-hero-cta{ width:224px; box-sizing:border-box; }
.home-hero-cta{ align-self:center; }
@media(max-width:768px){ .home-hero-cta{ width:224px; } }
#discuss{ scroll-margin-top:24px; }

/* ===== раунд 43 — первый экран главной в той же раскладке, что шапка
   страниц услуг: слева заголовок и текст, справа логотип, под ними кнопка
   по центру. На телефоне: заголовок, текст, логотип по центру, кнопка.
   Размеры на десктопе подгоняет site.js (fitHero) ◄◄◄ */
.home-hero{ padding:clamp(56px, 10vw, 96px) 0 clamp(48px, 8vw, 80px); }
.home-hero .wrap{ container-type:inline-size; }
.home-hero .hero-inner{
  display:grid; grid-template-columns:auto 1fr;
  grid-template-areas:"title visual" "sub visual" "cta cta";
  align-items:start;
}
.home-hero .hero-text{ display:contents; }
.home-hero .hero-title{ grid-area:title; font-size:clamp(34px, 6vw, 76px); font-weight:700; letter-spacing:-.015em; line-height:1.08; color:var(--heading); }
.home-hero .hero-sub{ grid-area:sub; margin-top:clamp(18px, 2.8vw, 28px); font-size:clamp(16px, 1.6vw, 19px); font-weight:500; line-height:1.65; color:var(--ink-70); }
.home-hero .hero-visual{ grid-area:visual; align-self:center; justify-self:center; display:flex; align-items:center; justify-content:center; }
.home-hero .hero-visual img{ width:100%; height:100%; object-fit:contain; }
.home-hero .hero-cta{
  grid-area:cta; justify-self:center; width:224px; box-sizing:border-box; margin-top:clamp(32px, 4vw, 52px);
  display:inline-flex; align-items:center; justify-content:center;
  padding:15px 28px; border:1px solid var(--btn-bg); border-radius:999px;
  font-family:'Raleway', -apple-system, sans-serif; font-size:16px; font-weight:600; letter-spacing:.02em;
  color:var(--paper); background:var(--btn-bg);
  transition:background .25s ease, color .25s ease, transform .2s ease;
}
.home-hero .hero-cta:hover{ background:var(--paper); color:var(--ink); transform:translateY(-2px); }
@media(max-width:768px){
  .home-hero{ padding-top:clamp(28px, 8vw, 40px); }
  .home-hero .hero-inner{ grid-template-columns:1fr; grid-template-areas:"title" "sub" "visual" "cta"; }
  .home-hero .hero-title{ justify-self:start; }
  .home-hero .hero-sub{ justify-self:start; margin-top:16px; }
  .home-hero .hero-visual{ width:calc(100cqi * 0.4); aspect-ratio:4 / 3; margin:clamp(28px, 9vw, 44px) auto 0; }
  .home-hero .hero-cta{ margin-top:clamp(28px, 9vw, 44px); }
}
@media(max-width:768px){ .home-hero .hero-title br{ display:none; } }

/* ===== раунд 44 — первый экран главной: заголовок и текст слева (текст
   ровно по ширине заголовка), под ними кнопка по центру блока; на фоне —
   волнистые ленты кода (canvas, только оформление) ◄◄◄ */
.home-hero.is-code{ position:relative; overflow:hidden; padding:clamp(64px, 11vw, 120px) 0 clamp(56px, 9vw, 104px); }
.code-bg{ position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; user-select:none; }
.home-hero.is-code .wrap{ position:relative; z-index:1; }
.home-hero-box{ display:inline-grid; justify-items:start; }
.home-hero.is-code .home-hero-title{ font-size:clamp(34px, 5.6vw, 76px); font-weight:700; letter-spacing:-.015em; line-height:1.08; white-space:nowrap; max-width:none; color:var(--heading); }
.home-hero.is-code .home-hero-sub{ width:0; min-width:100%; max-width:none; margin-top:clamp(18px, 2.8vw, 28px); font-size:clamp(16px, 1.6vw, 19px); line-height:1.65; color:var(--ink-70); }
.home-hero-btn{
  justify-self:center; width:224px; box-sizing:border-box; margin-top:clamp(32px, 4vw, 52px);
  display:inline-flex; align-items:center; justify-content:center;
  padding:15px 28px; border:1px solid var(--btn-bg); border-radius:999px;
  font-family:'Raleway', -apple-system, sans-serif; font-size:16px; font-weight:600; letter-spacing:.02em;
  color:var(--paper); background:var(--btn-bg);
  transition:background .25s ease, color .25s ease, transform .2s ease;
}
.home-hero-btn:hover{ background:var(--paper); color:var(--ink); transform:translateY(-2px); }
@media(max-width:768px){
  .home-hero.is-code{ padding:clamp(28px, 8vw, 40px) 0 clamp(44px, 12vw, 64px); }
  .home-hero-box{ display:grid; }
  .home-hero.is-code .home-hero-title{ white-space:normal; }
  .home-hero.is-code .home-hero-title br{ display:none; }
  .home-hero.is-code .home-hero-sub{ width:auto; margin-top:16px; }
}

/* раунд 45 — бегущие строки на дивайдерах — только оформление: их нельзя
   выделить и скопировать, скринридеры их пропускают (aria-hidden в site.js) */
.term-divider, .term-divider *{ -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
.term-text [data-t]::before{ content:attr(data-t); }

/* раунд 46 — «Посмотреть результат» на телефоне = «Подробнее» в шапках
   услуг: 224px, по центру ◄◄◄ */
@media(max-width:768px){
  .case-about .case-result{ display:flex; justify-content:center; text-align:center; white-space:nowrap; width:224px; padding-left:16px; padding-right:16px; box-sizing:border-box; margin-left:auto; margin-right:auto; }
}

/* раунд 47 — иконки «Продуктов» не обрезаются скруглением: radius 12px
   срезал углы рисунка, когда отступы вокруг иконки были маленькими ◄◄◄ */
.svc-photo{ border-radius:0; }

/* раунд 47 — прелоадер: блок строк шириной по самой длинной строке
   (а не 24ch — на телефоне ch считался по запасному шрифту и строки
   обрезались справа); печать строки — через clip-path, а не width ◄◄◄ */
.pre-terminal{ width:max-content; max-width:calc(100vw - 32px); }
.pre-terminal .pre-line{ width:auto; clip-path:inset(0 100% 0 0); animation-name:typeInClip; }
@keyframes typeInClip{
  0%  { clip-path:inset(0 100% 0 0); opacity:1; }
  100%{ clip-path:inset(0 0 0 0); opacity:1; }
}
@media (max-width:768px){ .pre-terminal{ width:max-content; } }

/* раунд 48 — «Принять» на всю ширину баннера на телефоне ◄◄◄ */
@media(max-width:768px){ .cookie-accept{ align-self:stretch; } .cookie-text{ hyphens:none; } }

/* ===== раунд 49 — подвал. Десктоп: Контакты · Публичная оферта · Согласие ·
   Политика в одну строку. Телефон: 1-я строка — оферта слева, контакты
   справа; 2-я — согласие; 3-я — политика. Реквизиты внизу по центру
   в две строки: ИП / ОГРНИП и ИНН через пробел ◄◄◄ */
.footer-links li{ order:0 !important; }
.footer-legal{ display:flex; flex-direction:column; align-items:center; gap:2px; text-align:center; margin-top:28px; }
.footer-legal span{ display:block; }
@media(max-width:768px){
  .footer-links{ display:grid !important; grid-template-columns:1fr auto; gap:12px 24px; width:100%; }
  .footer-links .fl-oferta{ grid-column:1; grid-row:1; }
  .footer-links .fl-contacts{ grid-column:2; grid-row:1; justify-self:end; }
  .footer-links .fl-consent{ grid-column:1 / -1; grid-row:2; }
  .footer-links .fl-privacy{ grid-column:1 / -1; grid-row:3; }
}

/* раунд 50 — «Принять» на всю ширину и на компьютере */
.cookie-accept{ align-self:stretch; }

/* ===== раунд 52 — подвал: без реквизитов; шрифт ссылок и подписи = пункты
   навигации в шапке (16px, 600), логотип = логотип в шапке (33px).
   Телефон: «Публичная оферта» и рядом «Контакты» в первой строке ◄◄◄ */
.footer-line{ font-size:16px; font-weight:600; color:var(--ink); gap:12px; }
.footer-logo{ height:33px !important; width:auto; }
.footer-links{ font-size:16px; }
.footer-links a{ font-size:16px; font-weight:600; color:var(--ink); opacity:1; }
.footer-links a:hover{ opacity:.6; }
@media(max-width:768px){
  .footer-links{ grid-template-columns:auto auto 1fr !important; gap:14px 24px !important; }
  .footer-links .fl-oferta{ grid-column:1; grid-row:1; }
  .footer-links .fl-contacts{ grid-column:2; grid-row:1; justify-self:start; }
  .footer-links .fl-consent, .footer-links .fl-privacy{ grid-column:1 / -1; }
}

/* ===== раунд 53 — бургер-меню: пункты по центру, каждый — полоса на всю
   ширину высотой 52px с чередующейся заливкой, как строки «Как мы
   работаем?»; одинаковые отступы сверху и снизу, без лишнего воздуха
   до дивайдера ◄◄◄ */
@media(max-width:768px){
  .nav.nav-open .nav-links-left,
  .nav.nav-open .nav-links-right{
    padding:0 !important; gap:0 !important; align-items:stretch;
    left:0; right:0;
  }
  .nav.nav-open .nav-links-left{ top:100%; }
  .nav.nav-open .nav-links-right{ top:calc(100% + 104px); }
  .nav.nav-open .nav-links-left li,
  .nav.nav-open .nav-links-right li{ width:100%; }
  .nav.nav-open .nav-links-left a,
  .nav.nav-open .nav-links-right a{
    display:flex; align-items:center; justify-content:center;
    height:52px; line-height:1; width:100%;
  }
  .nav.nav-open .nav-links-left li:nth-child(1) a,
  .nav.nav-open .nav-links-right li:nth-child(1) a{ background:var(--steps-bg); }
  .nav.nav-open .nav-links-left li:nth-child(2) a,
  .nav.nav-open .nav-links-right li:nth-child(2) a{ background:var(--steps-bg-alt); }
  .nav.nav-open::after{ border-bottom:none; }
}
/* раунд 54 — меню выпадает строго из-под шапки (ниже её нижней границы);
   заливка: Продукты и Процесс — серая, Кейсы и Контакты — цвет фона ◄◄◄ */
@media(max-width:768px){
  .nav.nav-open .nav-links-left{ top:calc(100% + 17px); }
  .nav.nav-open .nav-links-right{ top:calc(100% + 17px + 104px); }
  .nav.nav-open .nav-links-left li:nth-child(1) a,
  .nav.nav-open .nav-links-right li:nth-child(1) a{ background:var(--steps-bg-alt); }
  .nav.nav-open .nav-links-left li:nth-child(2) a,
  .nav.nav-open .nav-links-right li:nth-child(2) a{ background:var(--paper); }
}

/* раунд 60: длинные значения характеристик на мобильном не прыгают вправо */
@media (max-width:768px){ .case-fact-value{ text-align:left !important; } }

/* ============================== раунд 61: ФОРМА ЗАЯВКИ В СТИЛЕ КУКИ-БАННЕРА ============================== */
.lead-modal-backdrop{ background:rgba(0,0,0,.4); }
.lead-modal-box{ max-width:400px; padding:0; border:1px solid var(--line); border-radius:12px; overflow:hidden auto; box-shadow:0 14px 32px rgba(0,0,0,.12); }
html[data-theme="dark"] .lead-modal-box{ border-color:rgba(255,255,255,.16); }
.lead-head{ display:flex; justify-content:space-between; align-items:center; gap:12px; height:24px; padding:0 44px 0 16px; background:var(--code-bg); font-family:'JetBrains Mono', monospace; font-size:11px; letter-spacing:.02em; color:var(--code-dim); white-space:nowrap; overflow:hidden; }
.lead-head b{ font-weight:500; color:var(--code-bright); }
.lead-modal-close{ top:0; right:8px; width:24px; height:24px; display:flex; align-items:center; justify-content:center; padding:0; color:var(--code-dim); }
.lead-modal-close svg{ width:14px; height:14px; }
.lead-modal-close:hover{ color:var(--code-bright); }
.lead-body{ padding:22px 20px 20px; }
.lead-modal-title{ font-size:24px; font-weight:700; letter-spacing:-.01em; line-height:1.3; margin:0 0 6px; padding:0; }
.lead-modal-sub{ font-size:14px; line-height:1.6; color:var(--ink-70); margin:0 0 18px; }
.lead-form{ display:flex; flex-direction:column; gap:10px; }
.lead-input{ width:100%; font-family:'Raleway', -apple-system, sans-serif; font-size:16px; font-weight:500; color:var(--ink); background:var(--paper); border:1px solid var(--line); border-radius:10px; padding:11px 14px; resize:none; transition:border-color .2s ease; }
.lead-input::placeholder{ color:var(--ink-45); }
.lead-input:focus{ outline:none; border-color:var(--ink); }
.lead-check{ margin:6px 0 6px; font-size:12.5px; line-height:1.5; color:var(--ink-45); }
.lead-submit{ font-size:16px; padding:13px 26px; }
.lead-status{ margin-top:2px; font-size:13px; }
.lead-status:empty{ display:none; }
@media(max-width:480px){ .lead-modal{ padding:16px; } .lead-modal-box{ border-radius:12px; padding:0; } .lead-body{ padding:20px 18px 18px; } }

/* ============================== раунд 61: ЕДИНАЯ ШКАЛА ШРИФТОВ (как на главной) ==============================
   заголовок секции 36/700 · название карточки 24/700 · текст 16/400 (1.6)
   моно-значения 15/500 · кнопки и ссылки 16/600 · цена тарифа одна на всех карточках */
body .plan-desc, body .work-desc{ font-size:16px; line-height:1.6; }
body .case-copy{ line-height:1.6; }
body .spec-label, body .case-fact-label{ font-size:16px; font-weight:400; }
body .spec-value, body .case-fact-value{ font-size:15px; font-weight:500; }
body .plan-name, body .work-name, body .other-name{ font-weight:700; }
body .section-title, body .discuss-title{ font-weight:700; }
body .hero-title, body .case-hero-title{ font-weight:700; }
body .plan-price, body .work-price{ font-size:clamp(23px, 3.2vw, 34px); }
@media (max-width:768px){
  body .plan-name, body .work-name, body .other-name{ font-size:20px; }
}

/* ============================== раунд 63: ХОВЕР КАРТОЧЕК «ПРОДУКТЫ» КАК У КЕЙСОВ ==============================
   стрелка вынесена из ряда с ценой в правый верхний угол карточки (верх = верх картинки),
   при наведении картинка, название и цена чуть увеличиваются */
#services .card{ position:relative; }
.svc-price-row, .card:hover .svc-price-row, .card:focus-within .svc-price-row{ transform:none; gap:0; }
#services .svc-visual{ transition:transform .3s ease; transform-origin:50% 100%; }
#services .svc-info{ transition:transform .3s ease; transform-origin:50% 0; }
#services .svc-arrow{
  position:absolute; top:0; right:0; z-index:2;
  width:32px; height:32px; color:var(--ink);
  opacity:0; transform:translate(-4px, 4px);
  transition:opacity .25s ease, transform .25s ease;
  pointer-events:none;
}
@media (hover:hover){
  #services .card:hover .svc-visual{ transform:scale(1.05); }
  #services .card:hover .svc-info{ transform:scale(1.05); }
  #services .card:hover .svc-arrow,
  #services .card:focus-visible .svc-arrow{ opacity:.9; transform:translate(0,0); }
}
@media (hover:none){ #services .svc-arrow{ display:none; } }
/* стрелка как на карточках кейсов (39px); рисунок стрелки начинается с 7/24 размера —
   сдвигаем так, чтобы её верх совпал с верхом картинки */
#services .svc-arrow{ width:39px; height:39px; top:calc(-39px * 7 / 24); right:calc(-39px * 7 / 24 + 8px); }
/* раунд 64 — амплитуда ховера как у подъёма кейсов (~5px), стрелка того же размера,
   что у кейсов на каждой ширине; у бота и дизайна рисунок уже — стрелка ближе к нему */
@media (hover:hover){
  #services .card:hover .svc-visual,
  #services .card:hover .svc-info{ transform:scale(1.025); }
}
#services a[href="service-bot.html"] .svc-arrow,
#services a[href="service-design.html"] .svc-arrow{ right:calc(-39px * 7 / 24 + 28px); }
@media (max-width:768px){
  #services .svc-arrow,
  #services a[href="service-bot.html"] .svc-arrow,
  #services a[href="service-design.html"] .svc-arrow{ width:26px; height:26px; top:calc(-26px * 7 / 24); right:calc(-26px * 7 / 24 + 8px); }
  #services a[href="service-web.html"] .svc-arrow{ right:calc(-26px * 7 / 24 - 2px); }
}
/* раунд 65 — у бота на десктопе стрелка ещё на 5px левее */
@media (min-width:769px){ #services a[href="service-bot.html"] .svc-arrow{ right:calc(-39px * 7 / 24 + 38px); } }

/* ============================== SEO / доступность ==============================
   .sr-only — текст виден поисковикам и скринридерам, но не на экране
   (используется для H1 главной страницы) */
.sr-only{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}

/* раунд 66 — имя клиента в шапке кейса как декор: выводится через ::before,
   не выделяется и не копируется (для скринридеров — aria-label на h1) */
.case-hero-title [data-t]::before{ content:attr(data-t); }
.case-hero-title, .case-hero-title *{ -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }

/* раунд 67 — стрелки в «Другие продукты» по той же логике размера и места, что у карточек кейсов на главной:
   десктоп 39px, 12px от края; ≤768px — 26px, верх рисунка стрелки на 13px от верха и правого края */
body .other-card .case-arrow{ width:39px; height:39px; top:12px; right:12px; }
@media (max-width:768px){
  body .other-card .case-arrow{ width:26px; height:26px; top:calc(13px - 26px * 7 / 24); right:calc(13px - 26px * 7 / 24); }
}

/* раунд 68 — «Продукты» на телефоне: при нажатии тот же ховер, что на плашках кейсов
   (лёгкое увеличение + стрелка), как и на десктопе */
@media (hover:none){
  #services .svc-arrow{ display:block; }
  #services .card:hover .svc-visual,
  #services .card:active .svc-visual,
  #services .card:hover .svc-info,
  #services .card:active .svc-info{ transform:scale(1.025); }
  #services .card:hover .svc-arrow,
  #services .card:active .svc-arrow{ opacity:.9; transform:translate(0,0); }
}

/* ============================== раунд 69: «Все работы» с папкой, в цвет темы ==============================
   светлая тема — светло-серая плашка, чёрная папка, тёмный текст, пилюля как у кейсов;
   тёмная тема — как было (почти чёрная плашка), белая папка */
.case-card.case-all .case-all-bg{ background:transparent; z-index:0; }
.case-card.case-all .case-all-bg img{ object-fit:contain; transition:transform .5s ease; }
.case-card.case-all:hover .case-all-bg img{ transform:scale(1.03); }
html:not([data-theme="dark"]) .case-all::before{ background:#f0f0f0; }
html:not([data-theme="dark"]) .case-all:hover::before{ background:#e8e8e8; }
html:not([data-theme="dark"]) .case-card.case-all .case-client{ color:#161616; text-shadow:none; }
html:not([data-theme="dark"]) .case-card.case-all .case-tag{ background:#ffffff; color:#161616; box-shadow:0 1px 8px rgba(0,0,0,.10); }
html:not([data-theme="dark"]) .case-card.case-all .case-arrow{ color:#161616; }
/* на телефоне пилюля «Полный архив проектов» широкая — папка чуть меньше и ниже, чтобы не задевать её */
@media (max-width:768px){ .case-card.case-all .case-all-bg img{ transform:translateY(4%) scale(.8); } .case-card.case-all:hover .case-all-bg img{ transform:translateY(4%) scale(.82); } }

/* ============================== раунд 70: «КАК МЫ РАБОТАЕМ?» — ЭТАПЫ-ПОЛОСКИ ==============================
   пять полосок как в сторис: активная и пройденные залиты сразу (без «ползущей» анимации),
   этап сам переключается раз в несколько секунд (site.js, раздел ЭТАПЫ), можно нажать на любой.
   Все описания лежат в одной ячейке грида — высота блока = самое длинное описание, ничего не прыгает. */
.proc-tabs{ display:grid; grid-template-columns:repeat(5,1fr); gap:8px; }
.proc-tab{ display:block; text-align:left; background:none; border:0; padding:0 0 4px; margin:0; cursor:pointer; font:inherit; color:inherit; -webkit-tap-highlight-color:transparent; }
.proc-bar{ display:block; height:3px; border-radius:3px; background:var(--line); transition:background .25s ease; }
.proc-tab.is-done .proc-bar, .proc-tab.is-on .proc-bar{ background:var(--btn-bg); }
.proc-name{ display:flex; align-items:center; gap:8px; margin-top:14px; font-family:'Raleway', -apple-system, sans-serif; font-size:16px; font-weight:600; color:var(--ink-45); transition:color .25s ease; }
.proc-badge{ display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; width:20px; height:20px; border-radius:999px; background:var(--line); color:var(--ink-45); font-family:'JetBrains Mono', monospace; font-size:11px; font-weight:700; line-height:1; transition:background .25s ease, color .25s ease; }
.proc-tab.is-done .proc-name, .proc-tab.is-on .proc-name{ color:var(--heading); }
.proc-tab.is-done .proc-badge, .proc-tab.is-on .proc-badge{ background:var(--btn-bg); color:var(--paper); }
.proc-tab:focus-visible{ outline:2px solid var(--ink); outline-offset:4px; border-radius:4px; }
.proc-panes{ display:grid; margin-top:32px; }
.proc-pane{ grid-area:1 / 1; visibility:hidden; opacity:0; transition:opacity .25s ease, visibility 0s linear .25s; }
.proc-pane.is-on{ visibility:visible; opacity:1; transition:opacity .25s ease; }
.proc-title{ font-family:'Raleway', -apple-system, sans-serif; font-size:24px; font-weight:700; letter-spacing:-.01em; line-height:1.3; color:var(--heading); margin:0 0 8px; }
.proc-desc{ font-size:16px; line-height:1.6; color:var(--ink-70); margin:0; max-width:60ch; }
@media (max-width:768px){
  .proc-tabs{ gap:6px; }
  .proc-tab-label{ display:none; }
  .proc-name{ margin-top:12px; }
  .proc-panes{ margin-top:24px; }
  .proc-title{ font-size:20px; }
}
/* раунд 71 — описание этапа на всю ширину на десктопе; на телефоне кружки с номерами по центру под своими полосками */
.proc-desc{ max-width:none; }
@media (max-width:768px){
  .proc-name{ justify-content:center; }
}
/* раунд 72 — картинка «Все работы» теперь сама скомпонована под карточку (как обложки кейсов):
   показываем её так же, как остальные — во всю карточку, без своего масштаба и сдвигов */
.case-card.case-all .case-all-bg img,
.case-card.case-all:hover .case-all-bg img{ object-fit:cover; transform:none !important; transition:none; }

/* раунд 73 — «Готовы обсудить проект?»: серая подложка без mesh; вопрос сверху,
   три кнопки под ним в ряд, всё по центру — меньше пустого места на широком экране */
body .discuss-card{ background-image:none; background-color:var(--steps-bg, #eeeeee); flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:28px; padding:clamp(36px, 4.5vw, 56px) clamp(24px, 4vw, 56px); }
html[data-theme="dark"] body .discuss-card{ background-image:none; }
body .discuss-title{ max-width:none; }
body .discuss-links{ flex-direction:row; flex-wrap:wrap; justify-content:center; gap:12px; }
@media (max-width:768px){ body .discuss-links{ flex-direction:column; align-items:center; } }

/* раунд 74 — «Готовы обсудить проект?» на телефоне: в один ряд круглая кнопка Telegram,
   «Оставить заявку» по центру и круглая кнопка почты (нажатие копирует адрес, site.js) */
.discuss-link .dl-ico{ display:none; width:22px; height:22px; }
@media (max-width:768px){
  body .discuss-links{ flex-direction:row; flex-wrap:nowrap; align-items:center; justify-content:center; gap:10px; width:100%; }
  body .discuss-link.dl-tg{ order:1; }
  body .discuss-link.dl-lead{ order:2; flex:0 1 224px; width:auto; min-width:0; }
  body .discuss-link.dl-mail{ order:3; }
  body .discuss-link.dl-tg, body .discuss-link.dl-mail{ width:52px; height:52px; padding:0; flex:0 0 52px; border-radius:50%; }
  body .discuss-link.dl-tg .dl-text, body .discuss-link.dl-mail .dl-text{ display:none; }
  body .discuss-link.dl-tg .dl-ico, body .discuss-link.dl-mail .dl-ico{ display:block; }
  body .discuss-link.dl-lead{ height:52px; padding:0 20px; white-space:nowrap; }
}
.copy-toast{ position:fixed; left:50%; bottom:24px; z-index:1100; transform:translate(-50%, 12px); opacity:0; pointer-events:none;
  padding:12px 20px; border-radius:999px; background:var(--btn-bg); color:var(--paper);
  font-family:"Raleway", -apple-system, sans-serif; font-size:14px; font-weight:600; white-space:nowrap;
  box-shadow:0 10px 24px rgba(0,0,0,.18); transition:opacity .25s ease, transform .25s ease; }
.copy-toast.show{ opacity:1; transform:translate(-50%, 0); }

/* раунд 77 — «Продукты» на главной: ховер (лёгкое увеличение) остаётся, стрелки убраны */
#services .svc-arrow{ display:none !important; }