/* ============================================================
   КАК МЫ РАБОТАЕМ — ПРОЦЕСС
   По референсу `Референсы/gpt-image-2-codex-6a910a1c….png`.

   Пять шагов в ряд, между ними линия со стрелкой. Линия висит на
   самом шаге, а не отдельным элементом: тогда у последнего её просто
   нет, и не нужно ни лишней разметки, ни счёта в скрипте.

   Замер референса: синий там на тоне 226°, наш акцент — 228°.
   Совпало, пересчитывать цвет не пришлось. Поля 64px при кадре
   1672 — это 3.8%, ровно наш --gutter.
   ============================================================ */
.proc__head{ margin-bottom:clamp(30px, 3.4vw, 58px); }

.steps{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:clamp(14px, 1.4vw, 26px);
}

/* Пять шагов в ряд помещаются только на широком экране.
   На 390px каждый сжимался до 80 пикселей, но дальше сжиматься было
   некуда: длинные слова («Тестирование», «Стратегия и концепция») задают
   минимальную ширину сами. В сумме строка выходила 516 пикселей при
   экране 375 — и ВСЯ ГЛАВНАЯ ездила вбок на 141 пиксель. Именно этот
   блок, а не декоративные слои, как я думал сначала: замер показал,
   что у слоёв есть обрезающий предок, а у шагов его нет.
   Поймано и исправлено 03.09.2026. */
@media (max-width: 900px){
  .steps{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  /* Последний шаг в паре остаётся один — растягиваем на всю ширину,
     иначе рядом с ним висит пустая половина. */
  .steps > :last-child:nth-child(odd){ grid-column:1 / -1; }

  /* Линия со стрелкой к следующему шагу здесь теряет смысл: она тянется
     вправо, к соседу по строке, а на переносе строки сосед оказывается
     снизу — стрелка указывает в пустое поле. */
  .step__top::after,
  .step__top::before{ display:none; }
}
@media (max-width: 480px){
  .steps{ grid-template-columns:minmax(0, 1fr); }
}

.step{ position:relative; }

.step__top{
  position:relative;
  display:flex;
  align-items:center;
  gap:clamp(10px, .9vw, 16px);
  margin-bottom:clamp(14px, 1.5vw, 26px);
}

/* Кружок под иконкой — белый на фоне страницы, держится тенью, как
   карточки. Обводки нет: в референсе её тоже нет. */
.step__icon{
  display:grid;
  place-items:center;
  width:clamp(46px, 4vw, 68px);
  aspect-ratio:1;
  flex:none;
  border-radius:50%;
  background:var(--surface);
  box-shadow:var(--shadow-card);
  color:var(--accent-1);
}
.step__icon svg{
  width:44%;
  height:44%;
  fill:none;
  stroke:currentColor;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.step__num{
  font-family:var(--font);
  font-size:clamp(13px, .92vw, 15px);
  font-variant-numeric:tabular-nums;
  color:var(--fg-mute);
}

/* Линия к следующему шагу. Тянется от номера до кружка соседа,
   поэтому её длина не задаётся числом и не разъезжается на любой
   ширине. У последнего шага соседа нет — линию снимаем. */
.step__top::after{
  content:'';
  position:absolute;
  top:50%;
  left:calc(clamp(46px, 4vw, 68px) + clamp(10px, .9vw, 16px) + 3.4em);
  right:calc(-1 * clamp(14px, 1.4vw, 26px));
  height:1px;
  background:var(--line);
}
.step:last-child .step__top::after{ display:none; }

/* Стрелка на конце линии — два штриха, повёрнутых уголком */
.step__top::before{
  content:'';
  position:absolute;
  top:50%;
  right:calc(-1 * clamp(14px, 1.4vw, 26px));
  width:6px; height:6px;
  border-top:1px solid var(--line);
  border-right:1px solid var(--line);
  transform:translate(1px, -50%) rotate(45deg);
}
.step:last-child .step__top::before{ display:none; }

.step__name{
  margin:0 0 clamp(6px, .6vw, 11px);
  font-family:var(--font-display);
  font-weight:600;
  font-size:clamp(15px, 1.15vw, 20px);
  line-height:1.25;
}
.step__text{
  margin:0;
  font-size:clamp(13px, .95vw, 16px);
  line-height:1.5;
  color:var(--fg-lead);
}

/* ============================================================
   ТРИ КАРТОЧКИ: КЕЙСЫ, ОТЗЫВ, ЗАЯВКА
   Ширины сняты с референса: 556 / 462 / 484 при кадре 1672 —
   отсюда доли 1.14 / 1 / 1.04.
   ============================================================ */
.finale{
  display:grid;
  grid-template-columns:1.14fr 1fr 1.04fr;
  gap:clamp(14px, 1.3vw, 24px);
  margin-top:clamp(40px, 4.6vw, 82px);
}

/* Одна карточка вместо трёх (03.09.2026, после снятия выдуманных кейсов
   и отзыва). В сетке из трёх колонок одинокая карточка вжимается в левую
   треть и выглядит обломком. Здесь она занимает середину и получает
   ширину по содержимому, а не по остатку сетки. */
.finale--one{
  grid-template-columns:minmax(0, 620px);
  justify-content:center;
}

.fcard{
  display:flex;
  flex-direction:column;
  padding:clamp(22px, 2.1vw, 38px);
  background:var(--surface);
  border-radius:var(--r-card);
  box-shadow:var(--shadow-card);
}

.fcard__eyebrow{
  margin:0 0 clamp(10px, 1vw, 18px);
  font-size:clamp(12px, .76vw, 13px);
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--accent-1);
}
.fcard__title{
  margin:0 0 clamp(12px, 1.2vw, 22px);
  font-family:var(--font-display);
  font-weight:600;
  font-size:clamp(19px, 1.62vw, 28px);
  line-height:1.2;
  text-transform:uppercase;
}
.fcard__sub{
  margin:0 0 clamp(14px, 1.4vw, 26px);
  font-size:clamp(14px, 1.02vw, 18px);
  line-height:1.5;
  color:var(--fg-lead);
}
.fcard__text{
  margin:0 0 clamp(16px, 1.6vw, 30px);
  font-size:clamp(13px, .97vw, 16px);
  line-height:1.62;
  color:var(--fg-lead);
}

/* --- «Что вы узнаете» и «Связаться напрямую» (25.09.2026) --- */
.fcard__list{
  margin:0; padding:0; list-style:none;
  display:grid; gap:clamp(10px, .9vw, 14px);
}
.fcard__list li{
  position:relative; padding-left:26px;
  font-size:clamp(14px, 1vw, 17px); line-height:1.45; color:var(--fg-lead);
}
.fcard__list li::before{
  content:""; position:absolute; left:0; top:.5em;
  width:12px; height:2px; border-radius:2px; background:var(--accent-1);
}
.fcard__contacts{ display:grid; gap:10px; margin-top:auto; }
.fcard__contact{
  font-size:clamp(14px, 1vw, 17px); color:var(--fg);
  text-decoration:none; transition:color .2s var(--ease);
}
.fcard__contact--big{
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(20px, 1.6vw, 28px); font-variant-numeric:tabular-nums;
}
.fcard__contact:hover{ color:var(--accent-1); }

/* --- карточка кейсов --- */
.fcard__link{
  align-self:flex-start;
  margin-bottom:clamp(18px, 2vw, 36px);
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-size:clamp(13px, .88vw, 15px);
  color:var(--fg-lead);
  transition:color .2s var(--ease), gap .2s var(--ease);
}
.fcard__link:hover{ color:var(--accent-1); gap:13px; }
.fcard__link svg{ width:12px; height:12px; }

.figures{
  margin-top:auto;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:clamp(12px, 1.2vw, 22px);
}
.figure__val{
  display:block;
  font-family:var(--font-display);
  font-weight:600;
  font-size:clamp(24px, 2.05vw, 35px);
  line-height:1.05;
  color:var(--accent-1);
}
.figure__cap{
  display:block;
  margin-top:6px;
  font-size:clamp(14px, .82vw, 14px);
  line-height:1.35;
  color:var(--fg-mute);
}

/* --- карточка отзыва --- */
.quote{
  margin:0 0 auto;
  font-size:clamp(13px, .99vw, 16.5px);
  line-height:1.65;
  color:var(--fg-lead);
}
.author{
  display:flex;
  align-items:center;
  gap:clamp(10px, 1vw, 16px);
  margin-top:clamp(20px, 2.2vw, 38px);
}
.author__face{
  width:clamp(38px, 3.1vw, 52px);
  aspect-ratio:1;
  flex:none;
  border-radius:50%;
  background:var(--accent-wash);
  display:grid;
  place-items:center;
  font-family:var(--font-display);
  font-weight:600;
  font-size:clamp(14px, 1.1vw, 19px);
  color:var(--accent-1);
}
.author__name{
  margin:0;
  font-weight:600;
  font-size:clamp(13px, .95vw, 16px);
}
.author__role{
  margin:2px 0 0;
  font-size:clamp(14px, .82vw, 14px);
  color:var(--fg-mute);
}
.author__nav{
  margin-left:auto;
  display:flex;
  gap:8px;
}
.author__nav button{
  display:grid;
  place-items:center;
  width:clamp(32px, 2.5vw, 40px);
  aspect-ratio:1;
  border-radius:50%;
  border:1px solid var(--line);
  color:var(--fg-lead);
  transition:border-color .2s var(--ease), color .2s var(--ease);
}
.author__nav button:hover{ border-color:var(--accent-line); color:var(--accent-1); }
.author__nav svg{ width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }

/* --- карточка заявки --- */
.fcard--cta .btn{ align-self:flex-start; margin-top:auto; }