/* ══════════════════════════════════════════════════════════════
   Ищейка Кэт — лендинг v2 (композиция по референсу Flame HR)
   Токены: Inter Tight 400/600, цифры — та же гарнитура с tabular-nums
           ink #1A1A1A · paper #F8F6F0 (сливочный, с 06.09.2026) · accent — одна переменная
   Кривая: cubic-bezier(.22, 1, .36, 1)
   ══════════════════════════════════════════════════════════════ */

:root{
  --ink:#1A1A1A;
  --paper:#F8F6F0;
  --accent:#E2603C;          /* ← ЕДИНСТВЕННЫЙ акцент, ждём палитру клиента */
  --accent-soft:#FF8562;

  --on-dark:#FFFFFF;
  --line-dark:rgba(255,255,255,.24);
  --line-light:rgba(26,26,26,.18);

  --r-pill:999px;
  --r-card:28px;

  --ease:cubic-bezier(.22,1,.36,1);

  --wrap:1240px;
  --pad:40px;
  --sec:clamp(88px,10vw,150px);
  --card-h:min(calc(clamp(230px,22vw,290px) * 4 / 3),49vh,420px);

  --font:'Inter Tight','Inter','Segoe UI',system-ui,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}

html{
  color-scheme:only light;
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
  /* синий отпечаток нажатия на телефоне: у кнопок и ссылок есть своё состояние */
  -webkit-tap-highlight-color:transparent;
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font);
  font-size:16px;
  line-height:1.55;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
}

img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit;color:inherit}
h1,h2,h3,p,dl,dd,blockquote{margin:0}
ul{margin:0;padding:0;list-style:none}

.wrap{
  width:100%;
  max-width:var(--wrap);
  margin:0 auto;
  padding-inline:var(--pad);
}

.dark{background:var(--ink);color:var(--on-dark)}

/* ── Типографика ─────────────────────────────────────────── */

.display{
  font-size:clamp(3rem,8.2vw,8.4rem);
  line-height:.88;
  letter-spacing:-.045em;
  font-weight:400;
  text-wrap:balance;
  hyphens:none;
}

.h-giant{
  font-size:clamp(2.4rem,6.4vw,6rem);
  line-height:.92;
  letter-spacing:-.042em;
  font-weight:400;
  text-wrap:balance;
  hyphens:none;
}

.h-lead{
  font-size:clamp(1.5rem,3.1vw,2.9rem);
  line-height:1.12;
  letter-spacing:-.035em;
  font-weight:400;
  text-wrap:balance;
  hyphens:none;
}

.h-col{
  font-size:clamp(1.15rem,1.6vw,1.5rem);
  line-height:1.08;
  letter-spacing:-.028em;
  font-weight:400;
  text-wrap:balance;
  hyphens:none;
}

.micro{
  font-size:14px;
  line-height:1.5;
  letter-spacing:-.005em;
  opacity:.72;
  max-width:52ch;
  text-wrap:pretty;
}
.dark .micro{opacity:.68}

.num{
  font-size:13px;
  letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;
  color:var(--accent);
  display:block;
}

.mark{width:36px;height:36px;fill:currentColor;flex:none}
.mark--lg{width:clamp(52px,5.6vw,84px);height:auto;aspect-ratio:1}
.mark--accent{fill:var(--accent)}

/* ── Кнопки ──────────────────────────────────────────────── */

.btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:52px;
  padding:0 30px;
  border:0;
  border-radius:var(--r-pill);
  overflow:hidden;
  cursor:pointer;
  font-size:15px;
  letter-spacing:-.01em;
  isolation:isolate;
  background:transparent;
  text-align:center;
}
.btn__fill{
  position:absolute;inset:0;
  transform:scaleX(0);
  transform-origin:left;
  transition:transform 500ms var(--ease);
  z-index:-1;
}
.btn__label{position:relative;z-index:2;transition:color 320ms var(--ease)}
.btn:hover .btn__fill{transform:scaleX(1)}

.btn--solid{background:var(--accent);color:#fff}
.btn--solid .btn__fill{background:var(--ink)}
.btn--ghost{background:var(--paper);color:var(--ink)}
.btn--ghost .btn__fill{background:var(--ink)}
.btn--ghost:hover .btn__label{color:#fff}
.btn--wide{width:100%;min-height:60px}

.btn-round{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:52px;height:52px;
  flex:none;
  border-radius:var(--r-pill);
  overflow:hidden;
  isolation:isolate;
  background:var(--accent);
  color:#fff;
}
.btn-round__fill{
  position:absolute;inset:0;
  transform:scaleX(0);
  transform-origin:left;
  transition:transform 500ms var(--ease);
  background:var(--ink);
  z-index:-1;
}
.btn-round:hover .btn-round__fill{transform:scaleX(1)}
.btn-round svg{width:22px;height:22px;position:relative;z-index:2}
.btn-round .icon-down{transform:rotate(90deg)}
.btn-round--ink .btn-round__fill{background:var(--accent)}
.btn-round--ink{background:var(--ink)}

/* ── Служебное: видно только скринридеру и клавиатуре ────── */

/* подписи полей формы: в макете их нет, в дереве доступности есть */
.sr-only{
  position:absolute;
  width:1px;height:1px;
  margin:-1px;padding:0;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}

/* первый Tab уходил в середину первого экрана — теперь сначала эта ссылка */
.skip-link{
  position:fixed;
  top:10px;left:10px;
  z-index:100;
  padding:12px 20px;
  border-radius:var(--r-pill);
  background:var(--ink);
  color:var(--on-dark);
  font-size:14px;
  transform:translateY(-200%);
  transition:transform 260ms var(--ease);
}
.skip-link:focus-visible{transform:none;outline:2px solid var(--accent);outline-offset:3px}

/* ── Область нажатия ─────────────────────────────────────
   Пальцу нужно 44px, макету — прежний вид: растягиваем
   кликабельную зону псевдоэлементом, ничего не сдвигая */
.hero__nav a,.footer__ico,.line-link,#policy-open{position:relative}
.footer__ico::before,
.line-link::before,
#policy-open::before{
  content:"";
  position:absolute;
  top:50%;left:50%;
  width:max(100%,44px);
  height:max(100%,44px);
  transform:translate(-50%,-50%);
}
/* меню первого экрана: шаг строк 28px, поэтому зона по вертикали ровно
   в шаг — 44px здесь перехватывали бы клик у соседнего пункта */
.hero__nav a::before{
  content:"";
  position:absolute;
  top:50%;left:50%;
  width:max(100%,44px);
  height:28px;
  transform:translate(-50%,-50%);
}

/* ── Появление ───────────────────────────────────────────── */

.rise{opacity:0;transform:translateY(28px);filter:blur(14px)}
.rise.is-in{
  opacity:1;transform:none;filter:blur(0);
  transition:opacity 900ms var(--ease) var(--d,0ms),
             transform 900ms var(--ease) var(--d,0ms),
             filter 900ms var(--ease) var(--d,0ms);
}

/* Ячейки сетки не гасим целиком — иначе сквозь них до появления
   просвечивает фон таблицы серыми плашками. Едет только содержимое. */
.cell.rise,.cell.rise.is-in{opacity:1;transform:none;filter:none;transition:none}
.cell.rise > *{opacity:0;transform:translateY(28px);filter:blur(14px)}
.cell.rise.is-in > *{
  opacity:1;transform:none;filter:blur(0);
  transition:opacity 900ms var(--ease) var(--d,0ms),
             transform 900ms var(--ease) var(--d,0ms),
             filter 900ms var(--ease) var(--d,0ms);
}

/* ── Зерно ───────────────────────────────────────────────── */

.grain{
  position:absolute;inset:0;
  pointer-events:none;
  opacity:.06;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ══ 01 · HERO ═══════════════════════════════════════════ */

.hero{
  position:relative;
  min-height:100svh;
  display:flex;
  overflow:hidden;
  isolation:isolate;
  background:#F6EAE2;
  /* отступы сняты с flamehragency.ru: сверху 40, плашка 670×670 при вьюпорте 1440
     (у них это 46.5vw и жёсткие 670px на любом десктопе) */
  --hero-top:clamp(24px,4.4svh,40px);
  --hero-bottom:clamp(20px,2.8svh,30px);
}

.hero__bg,.contact__bg{position:absolute;inset:0;z-index:-2;overflow:hidden}

.blob{
  position:absolute;
  border-radius:50%;
  filter:blur(70px);
  transition:transform 1200ms var(--ease);
}
/* когда шейдер рисует фон, пятна полностью скрыты канвасом — снимаем их
   с композитора совсем: восемь слоёв blur(70px) стоили кадров впустую.
   Без WebGL класса is-gl нет и пятна остаются запасным слоем */
.is-gl .blob{display:none}
/* will-change только там, где пятна реально ведёт курсор */
.blob.is-live{will-change:transform}
.hero .blob--1{width:70vw;height:70vw;left:-14vw;top:-22vw;
  background:radial-gradient(circle at 40% 40%,#FFD8C2,#FFEDE2 62%,transparent 74%)}
.hero .blob--2{width:58vw;height:58vw;right:-8vw;top:-6vw;
  background:radial-gradient(circle at 50% 50%,var(--accent-soft),rgba(255,160,120,.5) 52%,transparent 72%)}
.hero .blob--5{width:78vw;height:34vw;right:-12vw;top:34%;border-radius:50%;
  transform:rotate(-9deg);
  background:radial-gradient(ellipse at 50% 50%,rgba(214,78,44,.5),rgba(255,150,110,.28) 46%,transparent 70%)}
.hero .blob--3{width:52vw;height:52vw;right:6vw;bottom:-20vw;
  background:radial-gradient(circle at 50% 50%,#FFC49A,rgba(255,224,200,.5) 58%,transparent 74%)}
.hero .blob--4{width:44vw;height:44vw;left:16vw;bottom:-18vw;
  background:radial-gradient(circle at 50% 50%,#F7B9A0,rgba(255,236,226,.6) 60%,transparent 76%)}

/* Живой градиент: канвас поверх пятен. Пятна остаются запасным слоем —
   если WebGL недоступен, канвас не включается и видно их. */
.bg-gl{
  position:absolute;inset:0;
  width:100%;height:100%;
  display:block;
  opacity:0;
  transition:opacity 900ms var(--ease);
}
.bg-gl.is-on{opacity:1}

/* Раскладка снята с flamehragency.ru: слева квадратная стеклянная карточка
   от верхней кромки, справа колонка — лого и меню сверху, заголовок и кнопки
   прижаты к низу экрана. Пропорции держим на сетке сайта (--wrap / --pad). */
.hero__inner{
  position:relative;
  width:100%;
  max-width:1600px;                 /* hero шире сетки сайта — как на референсе */
  margin:0 auto;
  padding:var(--hero-top) var(--pad) var(--hero-bottom);
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:stretch;
  gap:clamp(18px,1.4vw,24px);
}

.hero__side{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:clamp(24px,4vh,48px);
}

.hero__top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:24px;
}

.brand{display:inline-flex;align-items:center;gap:11px}
.brand__name{font-size:17px;letter-spacing:-.03em}

.hero__nav{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:3px;
  font-size:15px;
  letter-spacing:-.02em;
}
.hero__nav a{
  position:relative;
  padding:1px 0;
  transition:color 320ms var(--ease);
}
.hero__nav a::after{
  content:"";
  position:absolute;left:0;right:0;bottom:1px;
  height:1px;background:currentColor;
  transform:scaleX(0);
  transform-origin:right;
  transition:transform 420ms var(--ease);
}
.hero__nav a:hover::after{transform:scaleX(1)}

.hero__card{
  position:relative;
  align-self:start;
  justify-self:start;
  /* квадрат как на референсе: 46.5vw (на 1440 это ровно их 670px),
     но не выше свободной высоты экрана — у них на низких экранах плашка вылезает */
  width:min(clamp(420px,46.5vw,760px),calc(100svh - var(--hero-top) - var(--hero-bottom)));
  aspect-ratio:1/1;
  padding:clamp(28px,4vh,52px) clamp(24px,3vw,44px);
  border-radius:var(--r-card);
  /* прозрачность как на flamehragency: заливки нет, работает только размытие */
  background:rgba(248,246,240,.08);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 30px 60px -40px rgba(90,40,20,.5);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:clamp(12px,1.8vh,18px);
}
.hero__card-mark{
  width:clamp(38px,3.2vw,46px);
  height:auto;
  aspect-ratio:1;
  fill:var(--ink);
  margin-bottom:clamp(6px,1.2vh,14px);
}
.hero__card-name{font-size:clamp(24px,2vw,30px);letter-spacing:-.04em;line-height:1}
/* плашка почти прозрачная, под ней проходят оранжевые пятна — мелкому тексту нужен запас */
.hero__card-desc{font-size:13.5px;line-height:1.45;opacity:.82;letter-spacing:-.01em}
.hero__card .btn{margin-top:clamp(10px,2.2vh,24px);min-width:240px}

.hero__claim{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  /* заголовок и кнопки стоят в строку, пока помещаются: на узких десктопах
     сумма их минимальных ширин превышала колонку и кнопки уходили под обрез */
  flex-wrap:wrap;
  gap:clamp(24px,3vw,48px);
}
.hero__title{
  font-size:clamp(34px,3.2vw,48px);
  line-height:.92;
  letter-spacing:-.042em;
  font-weight:400;
  hyphens:none;
}
.hero__cta{display:flex;align-items:center;gap:12px;flex:0 1 auto;min-width:0}
/* ширина как на референсе, но пилюля обязана ужиматься, а не выдавливать соседей */
.hero__cta .btn--solid{width:clamp(220px,21vw,305px);max-width:100%;min-width:0;padding-inline:20px}
/* фон живой и местами доходит до тона акцента — тень держит пилюлю отдельно от него */
.hero__cta .btn--solid,
.hero__cta .btn-round{box-shadow:0 10px 30px rgba(120,52,24,.20)}

/* ══ 02 · МАНИФЕСТ ═══════════════════════════════════════ */

.manifest{padding:var(--sec) 0 clamp(60px,7vw,96px)}
.manifest__grid{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  column-gap:clamp(28px,5vw,80px);
  row-gap:0;                     /* иначе к отступу подзаголовка добавляется зазор строки */
  align-items:start;
}
.manifest .mark--lg{fill:var(--on-dark);margin-top:6px}
.h-lead{grid-column:2;text-align:right;max-width:22ch;margin-left:auto}
.manifest__note{grid-column:2;margin-left:auto;margin-top:clamp(40px,6vw,86px);text-align:left;max-width:46ch}

/* ══ 03 · УСЛУГИ ═════════════════════════════════════════ */

.services{
  padding:clamp(40px,5vw,70px) 0 var(--sec);
  /* карточки выезжают из-за левой кромки — обрезаем, чтобы не появлялась
     горизонтальная прокрутка. clip, а не hidden: не создаёт скролл-контейнер */
  overflow-x:clip;
}
.services .h-giant{margin-bottom:clamp(40px,6vw,86px)}

/* ── Услуги-гармошка ──────────────────────────────────────
   Механика снята с блока «Working Process» на evrone.com:
   закрытая карточка — только гигантская цифра, открытая раздаётся
   вширь, текст лежит в обёртке с overflow:hidden и своей фиксированной
   шириной, поэтому при схлопывании он не переверстывается.
   У них переход flex .4s, цифра 180px, активная — акцентом. */
.procs{
  display:flex;
  align-items:stretch;
  --proc-closed:14%;
  --proc-open:58%;
  --proc-pad:clamp(16px,1.9vw,28px);
  /* отступление от общей кривой проекта: на пути в ~500px её резкий старт
     (60% расстояния за первые 100 мс) читается как рывок. Здесь нужен
     симметричный разгон и такое же торможение */
  --proc-ease:cubic-bezier(.45,0,.15,1);
}

.proc{
  position:relative;
  display:flex;
  align-items:flex-start;
  flex:0 0 var(--proc-closed);
  min-width:0;
  overflow:hidden;
}
.proc.is-open{flex-basis:var(--proc-open)}

/* карточки помечены .rise, а его правило `.rise.is-in` перебивает transition
   целиком — раскрытие тогда происходит скачком. Поэтому переходы появления
   и раскрытия перечислены вместе, селектором той же силы, но ниже по файлу.
   Появление здесь на той же кривой, что и раскрытие: блок выезжает вбок,
   а не вверх, и резкий старт общей кривой на длинном пути читался бы рывком */
.procs .proc{
  transition:flex-basis 720ms var(--proc-ease),
             opacity 900ms var(--proc-ease) var(--d,0ms),
             transform 900ms var(--proc-ease) var(--d,0ms),
             filter 900ms var(--proc-ease) var(--d,0ms);
}

/* появление блока: карточки выезжают слева направо, первая — уже раскрытой.
   Общий .rise поднимает элемент снизу; здесь вместо этого сдвиг вбок */
.procs .proc.rise{transform:translateX(-72px)}
.procs .proc.rise.is-in{transform:none}

/* разделитель прочерчивается сверху вниз следом за колонкой — как в .col */
.proc::before{
  content:"";
  position:absolute;left:0;top:0;bottom:0;width:1px;
  background:var(--line-dark);
  transform:scaleY(0);
  transform-origin:top;
  transition:transform 620ms var(--ease) calc(var(--d,0ms) + 60ms);
}
.proc.is-in::before{transform:scaleY(1)}
.proc:first-child::before{display:none}

.proc__tab{
  flex:none;
  display:block;
  padding:0 var(--proc-pad);
  background:none;
  border:0;
  cursor:pointer;
  text-align:left;
  -webkit-tap-highlight-color:transparent;
}
.proc:first-child .proc__tab{padding-left:0}

.proc__num{
  display:block;
  font-size:clamp(56px,7.6vw,110px);
  line-height:.86;
  letter-spacing:-.05em;
  font-variant-numeric:tabular-nums;
  color:rgba(255,255,255,.26);
  transition:color 320ms var(--ease);
}
.proc.is-open .proc__num{color:var(--accent)}
@media (hover:hover){
  .proc:not(.is-open) .proc__tab:hover .proc__num{color:rgba(255,255,255,.55)}
}
.proc__tab:focus-visible{outline:2px solid var(--accent);outline-offset:6px;border-radius:6px}

.proc__reveal{
  flex:1 1 auto;
  min-width:0;
  overflow:hidden;
  padding-top:6px;
}
/* ширину текста считает скрипт: она равна той, что карточка получит в раскрытом
   виде, — иначе строки переверстались бы прямо во время разъезда. До первого
   замера работает запасное значение */
.proc__cont{
  width:var(--proc-text,clamp(280px,30vw,440px));
  display:flex;
  flex-direction:column;
  gap:14px;
  padding-right:var(--proc-pad);
  opacity:0;
  /* своего сдвига у текста нет: он едет вместе с цифрой, одним куском.
     Отдельный translateX поверх раскрытия читался как второе, рассинхронное движение */
  transition:opacity 220ms var(--ease);
}
/* у первой карточки таб без левого padding — текста помещается ровно на него больше */
.proc:first-child .proc__cont{width:calc(var(--proc-text,clamp(280px,30vw,440px)) + var(--proc-pad))}
/* раскрытие медленное и с задержкой, закрытие быстрое — асимметрия open/close.
   Задержка 260 мс — примерно середина разъезда: к этому моменту место под текст
   уже почти открылось, и он не проступает поверх соседней цифры */
.proc.is-open .proc__cont{
  opacity:1;
  transition:opacity 480ms var(--ease) 260ms;
}

/* ── Услуги листаются прокруткой ──────────────────────────
   Ширину карточек ведёт скрипт через flex-basis, непрерывно по ходу страницы:
   одна раздаётся, соседняя в это же время схлопывается. Собственный переход
   здесь выключен — плавность даёт сама прокрутка, а transition поверх неё
   давал бы запаздывание. Выезд карточек при появлении остаётся.
   Правила стоят ниже `.proc.is-open` и с лишним `.proc` в селекторе:
   при равной специфичности побеждал бы блок открытой карточки. */
.procs.is-scrolled .proc{transition-property:opacity,transform,filter}
.procs.is-scrolled .proc .proc__cont{
  /* текст догоняет в конце раскрытия: пока места мало, он всё равно обрезан
     правым краем, и показывать его половину незачем */
  opacity:calc((var(--open,0) - .55) * 2.2);
  transition:none;
}
.procs.is-scrolled .proc .proc__num{
  /* цифра разгорается вместе с раскрытием, а не переключается порогом */
  color:color-mix(in srgb,var(--accent) calc(var(--open,0) * 100%),rgba(255,255,255,.26));
  transition:none;
}
/* цифры в этом режиме ничего не делают — и не притворяются кнопками:
   ни руки-курсора, ни подсветки при наведении, ни рамки фокуса после клика */
.procs.is-scrolled .proc__tab{pointer-events:none}
.proc__cont .micro{max-width:none;text-wrap:pretty}
.proc__cont .spec{margin-top:6px;padding-top:0}
.proc__cont .spec dd{text-wrap:nowrap}

.cols{display:grid;gap:0}
.cols--3{grid-template-columns:repeat(3,minmax(0,1fr))}

.col{
  position:relative;
  padding:0 clamp(16px,1.9vw,28px);
  display:flex;
  flex-direction:column;
  gap:26px;
}
/* разделитель прочерчивается сверху вниз следом за колонкой */
.col::before{
  content:"";
  position:absolute;left:0;top:0;bottom:0;width:1px;
  background:var(--line-dark);
  transform:scaleY(0);
  transform-origin:top;
  transition:transform 620ms var(--ease) calc(var(--d,0ms) + 60ms);
}
.col.is-in::before{transform:scaleY(1)}
.col:first-child{padding-left:0}
.col:first-child::before{display:none}

.col__body{
  padding-top:10px;
  display:flex;
  flex-direction:column;
  gap:14px;
  flex:1;
}

.spec{margin-top:auto;padding-top:20px;display:grid;gap:9px;font-size:13px}
.spec div{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:baseline}
.spec dt{font-size:11.5px;opacity:.5;letter-spacing:-.005em}
.spec dd{margin:0;letter-spacing:-.02em;font-variant-numeric:tabular-nums;text-wrap:pretty}

/* ══ 04 · СЛОГАН ═════════════════════════════════════════ */

.why{padding:var(--sec) 0}
.guarantee{padding:var(--sec) 0}

.grid-table{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px;
  background:var(--line-light);
}
.cell{
  padding:clamp(24px,2.6vw,38px);
  background:var(--paper);
  display:flex;
  flex-direction:column;
  gap:12px;
  min-height:clamp(180px,17vw,238px);
}
.cell .micro{max-width:34ch;opacity:.66}
.cell--title{justify-content:flex-start;padding-top:clamp(20px,2vw,30px)}
.cell--title .h-giant{margin-left:-.04em}
.cell--mark{align-items:flex-start;justify-content:center}
.cell--mark .mark{width:clamp(52px,5.6vw,84px);height:auto;aspect-ratio:1}
.cell--cta{align-items:center;justify-content:center}
.cell--cta .btn{width:100%;max-width:280px}
/* примечание встаёт по верхней кромке контента — на одну линию с заголовком
   соседней ячейки слева, а не по центру своей высоты */
.cell--note{grid-column:2 / -1;min-height:0}

/* ══ 07 · ЭТАПЫ ══════════════════════════════════════════ */

.shutter{position:relative}
/* закреплённая секция должна помещаться в экран целиком — меряем её от высоты окна */
.shutter > section:first-of-type{
  position:sticky;top:0;z-index:0;
  padding-top:clamp(44px,7vh,110px);
  padding-bottom:clamp(30px,5vh,80px);
}
.shutter > section:first-of-type .h-giant{margin-bottom:clamp(22px,4vh,60px)}
.shutter > section:first-of-type .team__head{margin-bottom:clamp(20px,3.4vh,52px)}
.shutter > section:last-of-type{position:relative;z-index:1;background:var(--paper)}
/* распорка = ход ленты: пока она проходит, страница стоит, а лента листается вбок */
/* пока услуги залипли, тёмное поле держит весь экран, а содержимое стоит
   по центру: прижатый к верхней кромке блок читать неудобно, и раскрытие
   карточек начиналось раньше, чем блок доходил до середины экрана.
   Ниже 860px режим прокрутки выключен — там высота и отступы свои */
@media (min-width:861px){
  .shutter--procs > section:first-of-type{
    min-height:100svh;
    display:flex;
    align-items:center;
  }
  .shutter--procs > section:first-of-type > .wrap{width:100%}
  /* заголовок и карточки стояли впритык — разводим вдвое */
  .shutter--procs > section:first-of-type .h-giant{margin-bottom:clamp(44px,8vh,120px)}
}
.shutter__hold{height:60vh;pointer-events:none}

.steps{padding:clamp(40px,5vw,70px) 0 var(--sec)}
.steps .h-giant{margin-bottom:clamp(38px,5vw,72px)}


.steps__intro{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(20px,3vw,48px);
  max-width:min(100%,760px);
  margin-right:auto;
}
.steps__intro .micro{max-width:38ch}

/* лента шагов */
.rail{
  display:flex;
  overflow-x:auto;
  scroll-snap-type:x proximity;
  scroll-padding-left:max(var(--pad),calc((100vw - var(--wrap))/2 + var(--pad)));
  padding-left:max(var(--pad),calc((100vw - var(--wrap))/2 + var(--pad)));
  padding-right:var(--pad);
  scrollbar-width:none;
}
.rail::-webkit-scrollbar{display:none}

.steps__rail{margin:clamp(40px,5vw,72px) 0 0}
.pstep{
  flex:0 0 clamp(198px,18vw,244px);
  display:flex;flex-direction:column;justify-content:space-between;
  gap:clamp(36px,5vw,64px);
  min-height:var(--card-h);
  padding:0 clamp(16px,1.8vw,26px);
  border-left:1px solid var(--line-dark);
  scroll-snap-align:start;
}
.pstep:first-child{padding-left:0;border-left:0}
.pstep__num{
  font-size:clamp(58px,6.6vw,104px);
  line-height:.86;
  letter-spacing:-.05em;
  font-variant-numeric:tabular-nums;
}
.pstep__foot{display:flex;flex-direction:column;gap:9px}
.pstep__meta{font-size:12.5px;letter-spacing:-.01em;color:var(--accent)}
.pstep__text{font-size:14px;line-height:1.45;letter-spacing:-.01em;opacity:.78}

.pricing{padding:var(--sec) 0}
.pricing .h-giant{margin-bottom:clamp(24px,3vw,40px)}
.pricing__lead{
  max-width:52ch;
  margin-bottom:clamp(30px,4vw,58px);
}

.price{
  display:grid;
  grid-template-columns:clamp(56px,6vw,104px) minmax(0,1fr) minmax(0,1.45fr);
  gap:clamp(16px,3vw,48px);
  align-items:start;
  padding:clamp(24px,3vw,38px) 0;
  border-top:1px solid var(--line-light);
  transition:transform 460ms var(--ease),opacity 320ms var(--ease);
}
.price:last-child{border-bottom:1px solid var(--line-light)}
.price__arrow{display:block;color:var(--ink)}
.price__arrow svg{width:clamp(22px,2.2vw,30px);height:auto;transition:transform 460ms var(--ease)}
.price__head{display:flex;flex-direction:column;gap:10px}
.price__head .num{font-size:13px;letter-spacing:-.01em;color:var(--accent)}
.price__value{font-size:15px;line-height:1.4;letter-spacing:-.01em;opacity:.62;max-width:26ch}
.price__list{display:grid;gap:12px;font-size:14.5px;line-height:1.45;letter-spacing:-.01em}
.price__list li{display:grid;grid-template-columns:12px minmax(0,1fr);gap:11px;align-items:start}
.price__dash{width:12px;height:1.5px;margin-top:10px;background:var(--ink);border-radius:1px}
.price__list span{opacity:.78;max-width:52ch}

/* наведённая строка выезжает вправо, соседние приглушаются */
.prices:hover .price{opacity:.45}
.prices .price:hover{opacity:1;transform:translateX(clamp(8px,1.2vw,18px))}
.price:hover .price__arrow svg{transform:translateX(10px)}

/* на телефоне наведения нет — тот же отклик даёт прокрутка: пункт на уровне
   взгляда выезжает со стрелкой, остальные приглушены. Классы ставит скрипт
   только на тач-экранах и узких окнах, десктоп с мышью их не получает */
.prices.is-tracking .price.is-in{
  opacity:.45;
  transition:opacity 420ms var(--ease),transform 520ms var(--ease),filter 900ms var(--ease) var(--d,0ms);
}
.prices.is-tracking .price.is-in.is-active{opacity:1;transform:translateX(clamp(8px,1.2vw,18px))}
.prices.is-tracking .price.is-active .price__arrow svg{transform:translateX(10px)}

.pricing .btn--wide{margin-top:clamp(34px,4vw,56px)}

/* ══ ВОПРОСЫ ══════════════════════════════════════════════ */

.faq{padding:var(--sec) 0}
.faq__grid{
  display:grid;
  /* колонка вопросов уже заголовка: плюс-иконка подъезжает к тексту вопроса,
     правая кромка списка остаётся на месте. Зазор между колонками равен полю
     страницы справа от списка: (окно − контейнер)/2 + padding */
  grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:clamp(40px,calc((100vw - var(--wrap)) / 2 + var(--pad)),200px);
  align-items:start;
}
.faq__aside{position:sticky;top:var(--sec)}
.faq__note{margin-top:40px;max-width:32ch}

.qa{border-top:1px solid var(--line-light)}
.qa:first-child{border-top:0}
.qa:last-child{border-bottom:1px solid var(--line-light)}
.qa__q{
  display:flex;align-items:baseline;justify-content:space-between;gap:24px;
  padding:22px 0;
  cursor:pointer;
  list-style:none;
  font-size:clamp(16px,1.4vw,19px);
  line-height:1.25;
  letter-spacing:-.028em;
  text-wrap:balance;
}
.qa__q::-webkit-details-marker{display:none}
.qa__ico{
  flex:none;
  width:26px;height:26px;
  display:grid;place-items:center;
  color:var(--accent);
  transition:color 260ms var(--ease);
}
.qa__ico svg{width:18px;height:18px}
/* мышь — светлеет при наведении, тач — при нажатии (hover там залипает) */
@media (hover:hover){
  .qa__q:hover .qa__ico{color:var(--accent-soft)}
}
@media (hover:none){
  .qa__q:active .qa__ico{color:var(--accent-soft)}
}
.qa__a{padding:0 46px 24px 0;max-width:60ch;opacity:.7}

/* ══ 09 · КЕЙСЫ И НИШИ ═══════════════════════════════════ */

.proof{padding:0 0 var(--sec)}
.proof__head{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:clamp(20px,3vw,44px);
  align-items:start;
  margin-bottom:clamp(26px,3vw,44px);
}
.proof__head .display{grid-column:2;text-align:right}
.proof__head .mark{margin-top:10px}
.proof__lead{margin-left:auto;max-width:52ch;text-align:left}

.cases{
  position:relative;
  margin-top:clamp(44px,5vw,76px);
  --case-head:clamp(74px,8vh,94px);
}
/* хвост-распорка: Chromium держит sticky только внутри content-box
   родителя, поэтому padding-bottom здесь не работает */
.cases__tail{height:clamp(240px,62vh,660px)}

.case{
  position:sticky;
  top:calc(var(--case-gap,90px) + var(--i) * var(--case-head));
  /* именно height: раскрытие не должно менять поток,
     иначе позиции залипания уезжают на ходу */
  height:clamp(286px,33vh,372px);
  background:var(--paper);
  border-top:1px solid var(--line-light);
  padding-top:clamp(22px,2.6vw,34px);
}

.case__top{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,.7fr) minmax(0,1.6fr);
  gap:clamp(16px,3vw,48px);
  align-items:start;
}
.case__client{
  /* кегль общий с заголовками пунктов «Стоимости» (.h-col) */
  font-size:clamp(1.15rem,1.6vw,1.5rem);letter-spacing:-.03em;font-weight:400;
  transition:transform 620ms var(--ease);
}
.case__role{
  font-size:14px;letter-spacing:-.01em;color:var(--accent);
  transition:opacity 520ms var(--ease);
}
.case__text{
  max-width:52ch;margin-left:auto;   /* правая кромка — по «итогам» и лиду секции */
  opacity:.7;transition:opacity 520ms var(--ease);
}
.case:not(.is-open) .case__text{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
}

.case__body{
  display:grid;grid-template-rows:0fr;opacity:0;
  transition:grid-template-rows 640ms var(--ease),opacity 460ms var(--ease);
}
.case__body > div{overflow:hidden}
.case__inner{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,.7fr) minmax(0,1.6fr);
  gap:0 clamp(16px,3vw,48px);
  padding-top:clamp(18px,2.2vw,28px);
}
.case__list{grid-column:1 / span 2;display:flex;flex-direction:column;gap:6px}
.case__list li{
  font-size:14px;line-height:1.5;letter-spacing:-.005em;
  opacity:0;transform:translateY(12px);
  transition:opacity 560ms var(--ease) calc(var(--k) * 70ms),
             transform 560ms var(--ease) calc(var(--k) * 70ms);
}
.case__meta{
  grid-column:3;align-self:end;justify-self:end;
  font-size:13px;letter-spacing:-.01em;opacity:.45;
}

.case.is-open .case__body{grid-template-rows:1fr;opacity:1}
.case.is-open .case__list li{opacity:.72;transform:none}
.case.is-open .case__client{transform:translateX(clamp(4px,.6vw,10px))}
.case.is-past .case__text{opacity:.4}
.case.is-past .case__role{opacity:.55}

/* замер для телефона: скрипт на мгновение раскрывает все кейсы, чтобы взять
   высоту самого длинного, — переходы здесь сорвали бы замер */
.cases.is-measure .case{position:static;height:auto}
.cases.is-measure .case__body{grid-template-rows:1fr;transition:none}
.cases.is-measure .case .case__text{display:block;overflow:visible}

/* ══ 10 · ОТЗЫВЫ ═════════════════════════════════════════ */

.reviews{padding:var(--sec) 0}
.reviews .h-giant{margin-bottom:clamp(38px,5vw,72px)}
.quote{font-size:clamp(15px,1.25vw,17px);line-height:1.45;letter-spacing:-.02em;opacity:.9}
.author{margin-top:auto;padding-top:22px;font-size:15px;letter-spacing:-.02em;display:grid;gap:3px}
.author span{font-size:13px;opacity:.55}

/* ══ 11 · КОМАНДА ════════════════════════════════════════ */

.team{padding:var(--sec) 0}
.team__head{
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);
  gap:clamp(20px,4vw,60px);
  align-items:start;
  margin-bottom:clamp(36px,4vw,60px);
}
.team__lead{justify-self:end;max-width:36ch}

.team__rail{
  display:flex;
  gap:20px;
  overflow-x:auto;
  scroll-snap-type:x proximity;
  scroll-padding-left:max(var(--pad),calc((100vw - var(--wrap))/2 + var(--pad)));
  padding:4px max(var(--pad),calc((100vw - var(--wrap))/2 + var(--pad))) 22px;
  scrollbar-width:none;
}
.team__rail::-webkit-scrollbar{display:none}
.member{
  flex:0 0 clamp(230px,22vw,290px);
  scroll-snap-align:start;
  display:flex;flex-direction:column;gap:6px;
}
.member__photo{
  position:relative;
  aspect-ratio:3/4;
  max-height:var(--card-h);
  border-radius:var(--r-card);
  background:linear-gradient(160deg,#EFEAE6,#E2DAD4);
  margin-bottom:14px;
  overflow:hidden;
}
/* кадр ниже 3:4 бывает на низких экранах (--card-h режет по 49vh) — лицо держим выше центра */
.member__photo img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;object-position:50% 30%;
  display:block;
}
.member__name{font-size:clamp(17px,1.5vw,20px);letter-spacing:-.03em;font-weight:400}
.member .micro{opacity:.58}
.member--cta{
  justify-content:space-between;
  padding:26px;
  border-radius:var(--r-card);
  background:#F2EFEC;
  flex:0 0 clamp(230px,20vw,264px);
}
.member__cta-text{font-size:16px;line-height:1.3;letter-spacing:-.025em}

/* ══ 12 · ЗАЯВКА ═════════════════════════════════════════ */

.contact{
  position:relative;
  padding:var(--sec) 0;
  overflow:hidden;
  isolation:isolate;
  background:#F6EAE2;
}
.contact .blob--1{width:64vw;height:64vw;left:-16vw;top:-18vw;
  background:radial-gradient(circle at 50% 50%,#FFD8C2,#FFEDE2 60%,transparent 74%)}
.contact .blob--2{width:52vw;height:52vw;right:-10vw;top:-4vw;
  background:radial-gradient(circle at 50% 50%,var(--accent-soft),rgba(255,190,150,.4) 56%,transparent 72%)}
.contact .blob--3{width:46vw;height:46vw;left:22vw;bottom:-20vw;
  background:radial-gradient(circle at 50% 50%,#FFC49A,rgba(255,232,220,.55) 58%,transparent 75%)}

.contact__card{
  padding:clamp(34px,4vw,58px);
  border-radius:var(--r-card);
  /* прозрачность как у плашки главного экрана: заливки почти нет, работает размытие */
  background:rgba(248,246,240,.08);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 40px 80px -60px rgba(90,40,20,.5);
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.85fr);
  gap:clamp(24px,3vw,48px) clamp(28px,4vw,64px);
  align-items:start;
}
.contact__title{grid-column:1;font-size:clamp(2.6rem,5.6vw,5.2rem)}
.contact__side{grid-column:1;display:flex;flex-direction:column;gap:16px;max-width:44ch;height:100%}
.contact__note{margin-top:-4px}
.contact__foot{margin-top:auto;display:flex;flex-direction:column;gap:14px}
.contact__side .mark{fill:var(--ink)}

.contact__form{grid-column:2;grid-row:1 / span 2;display:grid;gap:12px;align-self:center;width:100%}
.input{
  width:100%;
  min-height:56px;
  padding:0 24px;
  border:0;
  border-radius:var(--r-pill);
  background:rgba(248,246,240,.86);
  font-size:15px;
  letter-spacing:-.015em;
  outline:none;
  transition:box-shadow 320ms var(--ease),background 320ms var(--ease);
}
.input::placeholder{color:rgba(26,26,26,.45)}

/* ловушка для спам-ботов: поле не видно и не попадает в порядок фокуса.
   display:none не годится — часть ботов пропускает скрытые так поля */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* строка под кнопкой отвечает за исход отправки */
.form__note--ok{opacity:1}
.form__note--error{opacity:1;color:var(--accent)}
.form__note--error a{text-decoration:underline;text-underline-offset:3px}
.is-sent .input,.is-sent .btn{pointer-events:none}

/* ── Кнопка заявки: отправка ─────────────────────────────
   Референс — «Submit Button» Колина Гарвена (Dribbble): пилюля сжимается
   в круг, по кругу бежит дуга, затем круг раскрывается обратно в пилюлю
   с галочкой. Цвета наши: круг в тон полей формы, дуга и итог — акцентом.
   Ширину в пикселях ведёт скрипт, здесь — слои и переходы.
   Отступление от общей кривой (как MOT-03 у гармошки): сжатие в круг
   разгоняется к концу, как на референсе, — иначе оно читается вялым */
.btn--send{
  justify-self:center;                 /* сжимается к центру, а не к левому краю */
  transition:background-color 280ms var(--ease);
}
/* надпись возвращается чуть позже, чем гаснет галочка, — они не накладываются */
.btn--send .btn__label{transition:color 320ms var(--ease),opacity 260ms var(--ease) 140ms}
.btn--send.is-sending{
  background:rgba(248,246,240,.86);
  cursor:default;
  transition:width 340ms cubic-bezier(.55,0,.75,.25),background-color 280ms var(--ease);
}
.btn--send.is-sending .btn__label,
.btn--send.is-done .btn__label{opacity:0;white-space:nowrap;transition:opacity 140ms var(--ease)}   /* в узком круге текст иначе переносился бы и растягивал кнопку по высоте */
.btn--send.is-sending .btn__fill,
.btn--send.is-done .btn__fill{transform:scaleX(0);transition:none}
.btn__ring,.btn__check{position:absolute;z-index:2;pointer-events:none;opacity:0}
.btn__ring{inset:0;width:100%;height:100%;transform:rotate(-90deg);transition:opacity 180ms var(--ease)}
.btn__track,.btn__arc{fill:none;stroke-width:3}
.btn__track{stroke:rgba(26,26,26,.14)}
.btn__arc{stroke:var(--accent);stroke-linecap:round;stroke-dasharray:176;stroke-dashoffset:176}
.btn--send.is-ring .btn__ring{opacity:1}
.btn__check{
  left:50%;top:50%;width:26px;height:26px;margin:-13px 0 0 -13px;
  fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;
  transform:scale(.6);
  transition:opacity 160ms var(--ease),transform 220ms var(--ease);   /* уход — сразу */
}
.btn--send.is-done{
  background:var(--accent);
  transition:width 380ms var(--ease),background-color 380ms var(--ease);
}
.btn--send.is-done .btn__check{
  opacity:1;transform:none;
  transition:opacity 220ms var(--ease) 140ms,transform 460ms var(--ease) 140ms;   /* появление — следом за раскрытием */
}
/* обводки нет ни в одном состоянии: фокус показываем только плотностью
   заливки — поле становится непрозрачным на полупрозрачном фоне */
.input:focus,.input:focus-visible{background:var(--paper);box-shadow:none;outline:none}
select.input{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' fill='none'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%231A1A1A' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 24px center;
  padding-right:52px;
}

/* свой список вариантов: та же плашка, что у полей, с отступом как между ними */
@supports (appearance: base-select) {
  select.input,
  select.input::picker(select){appearance:base-select}

  /* base-select делает поле флексом: текст ставим по центру, стрелку — своим элементом,
     иначе фоновая картинка не совпадает с оптическим центром строки */
  select.input{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding-right:24px;
    background-image:none;
  }
  select.input::picker-icon{
    display:block;
    width:14px;
    height:9px;
    flex:none;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' fill='none'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%231A1A1A' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain;
    color:transparent;
    transition:rotate 300ms var(--ease);
  }
  select.input:open::picker-icon{rotate:180deg}

  select.input::picker(select){
    position-area:block-end span-all;   /* открываем вниз, наверх — только если не влезает */
    position-try-fallbacks:flip-block;
    margin-block:12px;                  /* тот же зазор, что между полями, в обе стороны */
    padding:8px;
    border:0;
    border-radius:var(--r-card);
    background:var(--paper);            /* без прозрачности: поля под списком не просвечивают */
    box-shadow:0 24px 60px -30px rgba(90,40,20,.45);
    opacity:0;
    translate:0 -6px;
    transition:opacity 240ms var(--ease),translate 240ms var(--ease),overlay 240ms allow-discrete,display 240ms allow-discrete;
  }
  select.input:open::picker(select){opacity:1;translate:0 0}
  @starting-style{
    select.input:open::picker(select){opacity:0;translate:0 -6px}
  }

  select.input option{
    padding:12px 16px;
    border-radius:var(--r-pill);
    font-size:15px;
    letter-spacing:-.015em;
    background:transparent;
    transition:background 200ms var(--ease);
  }
  select.input option{outline:none}                /* при открытии список не подсвечивает первый пункт */
  select.input option:hover,
  select.input option:focus-visible{background:rgba(26,26,26,.06)}
  select.input option:active,
  select.input option:checked{background:var(--accent);color:#fff}
  select.input option:active-option:not(:checked):not(:hover){background:transparent}
  select.input option:disabled{display:none}   /* подсказка «Кто нужен» в списке не нужна */
  select.input option::checkmark{display:none}
}
.contact__form .btn{margin-top:6px}
.form__note{font-size:12px;color:rgba(26,26,26,.55);text-align:center;max-width:none}

/* подчёркивание стоит всегда, при наведении темнеет только текст */
.line-link{
  border:0;background:none;padding:0;
  font:inherit;color:inherit;
  border-bottom:1px solid currentColor;
  cursor:pointer;
  transition:color 320ms var(--ease);
}
.line-link:hover{color:rgba(26,26,26,.85)}

/* ══ 13 · ФУТЕР ══════════════════════════════════════════ */

.footer{padding:clamp(56px,6vw,84px) 0 26px;overflow:hidden}
.footer__top{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) auto auto minmax(0,1fr);
  gap:clamp(24px,4vw,60px);
  padding-bottom:clamp(40px,5vw,72px);
}
.footer__pitch{font-size:clamp(17px,1.7vw,21px);line-height:1.25;letter-spacing:-.03em;max-width:19ch;text-wrap:balance}
.footer__col{display:flex;flex-direction:column;gap:5px;font-size:14px}
.footer__col-title,
.dark .footer__col-title{opacity:1;margin-bottom:8px}   /* белые, сильнее общего .dark .micro */
.footer__col a{opacity:.72;transition:opacity 320ms var(--ease)}
.footer__col a:hover{opacity:1}
.footer__contacts{display:flex;gap:20px;justify-content:flex-end;align-items:flex-start}
/* обе иконки залитые и одного кегля — телеграм и трубка читаются одной парой */
.footer__ico{
  display:grid;place-items:center;
  width:28px;height:28px;
  color:var(--on-dark);
  transition:color 320ms var(--ease);
}
.footer__ico svg{width:24px;height:24px;fill:currentColor}
.footer__ico:hover{color:rgba(255,255,255,.5)}


.footer__word{
  position:relative;
  font-size:10vw;
  font-weight:700;
  line-height:.78;
  letter-spacing:-.055em;
  white-space:nowrap;
  margin:clamp(18px,2.4vw,40px) 0 6px;
  user-select:none;
}
.footer__word-text{display:inline-block}
.footer__paw{
  position:absolute;
  right:-.02em;
  top:.01em;
  width:.3em;
  height:auto;
  fill:var(--accent);
  transform:rotate(-12deg);
  pointer-events:none;
}
.footer__bottom{
  display:flex;justify-content:space-between;gap:20px;
  padding-top:20px;border-top:1px solid var(--line-dark);
}
.footer__bottom .micro{opacity:.5}
.footer__policy{
  border:0;background:none;padding:0;
  font-family:inherit;text-align:right;cursor:pointer;
  opacity:.5;transition:opacity 320ms var(--ease);
}
.footer__policy:hover{opacity:1}

/* ── Модальное окно ── */
.modal{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:var(--pad)}
.modal[hidden]{display:none}
.modal__scrim{position:absolute;inset:0;background:rgba(12,12,12,.62);backdrop-filter:blur(3px)}
.modal__box{
  position:relative;
  display:flex;
  flex-direction:column;
  width:min(100%,var(--wrap));           /* по границам сайта: та же ширина, что у .wrap */
  max-height:min(86vh,880px);
  overflow:hidden;                       /* скролл живёт в теле, углы плашки остаются скруглёнными */
  border-radius:var(--r-card);
  background:var(--paper);
  color:var(--ink);
}
/* шапка не уезжает при прокрутке документа */
.modal__head{
  flex:none;
  display:flex;align-items:start;justify-content:space-between;gap:20px;
  padding:clamp(26px,3vw,38px) 72px 20px clamp(24px,3vw,40px);   /* справа место под крестик */
  border-bottom:1px solid var(--line-light);
}
.modal__title{margin-bottom:6px}
.modal__date{opacity:.5}
.modal__body{
  flex:1 1 auto;
  overflow-y:auto;
  display:grid;gap:0;
  padding:0 clamp(24px,3vw,40px) clamp(26px,3vw,38px);
  scrollbar-width:thin;
  scrollbar-color:rgba(26,26,26,.22) transparent;
}
.modal__body .micro{opacity:.74;max-width:56ch}
.policy__intro{padding:22px 0 4px;opacity:.74}

.policy{
  display:grid;
  grid-template-columns:38px minmax(0,1fr);
  gap:8px clamp(12px,2vw,22px);
  padding:22px 0;
  border-top:1px solid var(--line-light);
}
.policy .num{grid-column:1;grid-row:1;font-size:13px;letter-spacing:-.01em;color:var(--accent);padding-top:2px}
.policy__title{grid-column:2;grid-row:1;font-size:16px;line-height:1.2;letter-spacing:-.028em;font-weight:400;margin:0}
.policy__text{grid-column:2;grid-row:2;display:grid;gap:10px}

/* на широкой плашке раздел раскладывается как строка «Стоимости»: номер / заголовок / текст */
@media (min-width:900px){
  .policy{grid-template-columns:clamp(48px,5vw,72px) minmax(0,1fr) minmax(0,1.7fr);gap:0 clamp(20px,3vw,48px);padding:26px 0}
  .policy__title{grid-column:2;grid-row:1;font-size:clamp(16px,1.4vw,19px)}
  .policy__text{grid-column:3;grid-row:1}
}
.policy__text a{border-bottom:1px solid rgba(26,26,26,.28);transition:border-color 320ms var(--ease)}
.policy__text a:hover{border-color:var(--accent)}

.modal__close{
  position:absolute;top:16px;right:16px;
  width:40px;height:40px;
  display:grid;place-items:center;
  border:0;border-radius:var(--r-pill);
  background:rgba(26,26,26,.06);color:var(--ink);
  cursor:pointer;transition:background 320ms var(--ease);
}
.modal__close:hover{background:rgba(26,26,26,.12)}
.modal__close svg{width:20px;height:20px}

/* ══ Адаптив ═════════════════════════════════════════════ */

@media (max-width:1080px){
  :root{--pad:28px}
  /* закрытым колонкам не хватает места под двузначную цифру — отдаём им больше */
  .procs{--proc-closed:16%;--proc-open:52%}
  .grid-table{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cell--note{grid-column:1 / -1}
  /* в две колонки последняя ячейка оставалась одна и рядом зияла
     серая клетка — фон сетки; тянем её на всю ширину */
  .cell--cta{grid-column:1 / -1}
  .footer__top{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:860px){
  .steps__intro{grid-template-columns:minmax(0,1fr);margin-left:0;max-width:100%}
  .faq__grid{grid-template-columns:minmax(0,1fr);gap:clamp(24px,4vw,40px)}
  .faq__aside{position:static}
  /* одна колонка: лого и меню сверху, карточка, заголовок с кнопками внизу.
     .hero__side раскрывается через display:contents, порядок задаёт order.
     Вертикальные отступы идут от высоты экрана: меню столбиком выше строки на ~90px,
     и с прежними фиксированными отступами кнопка на телефонах ниже 700px уходила под обрез */
  .hero__inner{
    display:flex;
    flex-direction:column;
    gap:0;
    padding-bottom:clamp(18px,3.4svh,36px);
  }
  .hero__side{display:contents}
  .hero__top{order:1;margin-bottom:clamp(18px,3.6svh,32px)}
  .hero__card{
    order:2;
    width:100%;
    aspect-ratio:auto;
    justify-self:stretch;
    margin-top:auto;          /* свободная высота делится пополам: плашка опускается к середине между меню и заголовком */
    padding:clamp(24px,4.2svh,38px) 28px clamp(22px,3.8svh,34px);
  }
  .hero__claim{
    order:3;
    flex-direction:column;
    align-items:flex-start;
    margin-top:auto;          /* прижимаем к низу экрана */
    padding-top:clamp(22px,4.2svh,38px);
    gap:clamp(18px,3.2svh,26px);
  }
  .hero__cta{flex-wrap:wrap}
  .hero__cta .btn--solid{width:auto}
  /* меню остаётся столбиком в правом верхнем углу, как на десктопе */

  /* 16px — порог, ниже которого iOS Safari приближает страницу, как только
     палец попадает в поле, и обратно её уже не отдаёт */
  .input{font-size:16px}
  .spec dt{font-size:12px}

  .manifest__grid{grid-template-columns:minmax(0,1fr)}
  /* в один столбец лапка стояла впритык к заголовку: поднимаем её на 28px,
     заголовок остаётся на месте — сумма отступов прежняя */
  .manifest .mark--lg{margin-top:-22px;margin-bottom:28px}
  .h-lead,.manifest__note{grid-column:1;text-align:left;margin-left:0;max-width:100%}


  .team__head{grid-template-columns:minmax(0,1fr)}
  .team__lead{justify-self:start}

  .proof__head{grid-template-columns:minmax(0,1fr)}
  .proof__head .display,.proof__head .mark{grid-column:1;text-align:left}
  .proof__lead{margin-left:0}

  .case__text{margin-left:0}
  /* стопка кейсов работает и на телефоне: высоту карточки и шаг стопки скрипт
     меряет по самому длинному кейсу. Если экран для стопки низковат, скрипт
     ставит .is-flat — и кейсы идут обычным списком, сразу раскрытыми */
  .case{height:var(--case-h,clamp(286px,33vh,372px))}
  .cases.is-flat .case{position:static;height:auto;padding-bottom:clamp(22px,4vw,32px)}
  .cases.is-flat .case:not(.is-open) .case__text{display:block;overflow:visible}
  .cases.is-flat .case__body{grid-template-rows:1fr;opacity:1}
  .cases.is-flat .case__list li{opacity:.72;transform:none}
  .cases.is-flat .cases__tail{display:none}

  .contact__card{grid-template-columns:minmax(0,1fr)}
  .contact__title,.contact__side,.contact__form{grid-column:1}
  .contact__form{grid-row:auto}

  .footer__word{font-size:13.5vw}

  /* услуги: гармошка разворачивается вниз, цифра остаётся корешком строки */
  .procs{flex-direction:column}
  .proc{flex:0 0 auto;flex-direction:column;align-items:stretch;overflow:visible}
  .proc.is-open{flex-basis:auto}
  .proc::before{left:0;right:0;top:0;bottom:auto;width:auto;height:1px;transform:scaleX(0);transform-origin:left}
  .proc.is-in::before{transform:scaleX(1)}
  .proc__tab{width:100%;padding:22px 0 0}
  .proc:first-child .proc__tab{padding-top:0}
  .proc__reveal{
    display:grid;
    grid-template-rows:0fr;
    padding-top:0;
    transition:grid-template-rows 620ms var(--proc-ease);
  }
  .proc.is-open .proc__reveal{grid-template-rows:1fr}
  .proc__cont{width:100%;min-width:0;overflow:hidden;padding-top:14px}
  /* и здесь раскрытие ведёт прокрутка: высоту задаёт скрипт долей fr,
     свой переход дал бы запаздывание. Текст проявляется вместе с высотой */
  .procs.is-scrolled .proc__reveal{transition:none}
  .procs.is-scrolled .proc .proc__cont{opacity:calc(var(--open,0) * 1.5 - .5)}
}

@media (max-width:640px){
  .pstep{flex:0 0 clamp(180px,64vw,220px)}
  .qa__a{padding-right:0}
  :root{--pad:20px}
  .cols--3{grid-template-columns:minmax(0,1fr)}
  /* в один столбец вертикальный разделитель ложится горизонтально —
     иначе не видно, где кончается один отзыв и начинается следующий */
  .cols--3 .col{padding:30px 0 0;margin-top:30px}
  .cols--3 .col::before{right:0;bottom:auto;width:auto;height:1px;transform:scaleX(0);transform-origin:left}
  .cols--3 .col.is-in::before{transform:scaleX(1)}
  .cols--3 .col:first-child{margin-top:0;padding-top:0}
  .grid-table{grid-template-columns:minmax(0,1fr)}
  .cell{min-height:0}
  .cell--mark{display:none}
  .case__top,.case__inner{grid-template-columns:minmax(0,1fr);gap:10px}
  .case__list,.case__meta{grid-column:1;justify-self:start}
  .case__meta{padding-top:8px}
  /* стрелка слева от пункта по центру его высоты, заголовок и список — колонкой справа */
  .price{grid-template-columns:22px minmax(0,1fr);gap:18px 22px}
  .price__arrow{grid-row:1 / span 2;align-self:center}
  .price__list{grid-column:2}
  .prices:hover .price{opacity:1}
  .prices .price:hover{transform:none}
  /* «Разделы» и «Услуги» стоят рядом, описание и контакты — на всю ширину */
  .footer__top{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer__pitch,.footer__contacts{grid-column:1 / -1}
  .footer__contacts{justify-content:flex-start}   /* иконки к левому краю, как остальные блоки */
}

@media (max-height:800px){
  .steps__rail{margin-top:clamp(28px,3.4vw,56px)}
  .pstep{gap:clamp(24px,3.4vw,44px)}
  .pstep__num{font-size:clamp(52px,5.4vw,84px)}
}

/* ── Первый экран на низких телефонах ──────────────────────
   Столбик меню, плашка, заголовок и кнопка вместе занимают ~626px.
   Ниже 660px кнопка «Подобрать ассистента» уходила под обрез, поэтому
   здесь ужимаются только отступы плашки и стыки между блоками —
   кегли и сам состав первого экрана те же. */
@media (max-width:860px) and (max-height:660px){
  .hero__inner{padding-bottom:12px}
  .hero__top{margin-bottom:10px}
  .hero__card{padding:14px 24px 12px;gap:8px}
  .hero__card-mark{width:30px;margin-bottom:4px}
  .hero__card .btn{margin-top:6px}
  .hero__claim{padding-top:14px;gap:12px}
}

/* Телефон лёжа: высоты 360–390px не хватает ни при каком ужатии — столбик
   из меню, плашки, заголовка и кнопки не помещается физически. Здесь
   возвращается раскладка десктопа: плашка слева, справа меню сверху
   и заголовок с кнопкой снизу. */
@media (max-width:1024px) and (max-height:520px) and (orientation:landscape){
  .hero__inner{
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
    align-items:stretch;
    gap:16px;
    padding-top:14px;
    padding-bottom:14px;
  }
  .hero__side{display:flex;flex-direction:column;justify-content:space-between;gap:12px}
  .hero__card{
    order:0;
    margin-top:0;
    justify-self:start;
    align-self:start;
    width:min(42vw,calc(100svh - 28px));
    aspect-ratio:1/1;
    padding:12px 18px;
    gap:6px;
  }
  .hero__card-mark{width:26px;margin-bottom:2px}
  .hero__card-name{font-size:20px}
  .hero__card-desc{font-size:12px}
  .hero__card .btn{margin-top:6px;min-width:0;padding-inline:20px}
  .hero__top{order:0;margin-bottom:0}
  .hero__claim{order:0;margin-top:0;padding-top:0;gap:10px}
  .hero__title{font-size:26px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rise,.cell.rise > *{opacity:1;transform:none;filter:none;transition:none}
  /* сброс сильнее правила выезда карточек услуг, иначе оно переживает reduce */
  .procs .proc.rise{transform:none}
  .blob{transition:none}
  .case{position:static;height:auto;padding-bottom:clamp(22px,4vw,32px)}
  .case:last-child{border-bottom:1px solid var(--line-light)}
  .case__text{margin-left:0}
  .case:not(.is-open) .case__text{display:block;overflow:visible}
  .case__body{grid-template-rows:1fr;opacity:1}
  .case__list li{opacity:.72;transform:none}
  .cases__tail{display:none}
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}