/* ==========================================================================
   ÉTAT — выразительные компоненты: герой с лучом, бегущие строки,
   манифест, процесс, конструктор, курсор. Подключается на всех страницах поверх app.css.
   ========================================================================== */

/* --- прогресс прокрутки и курсор ----------------------------------------- */

.progress-line {
  position: fixed;
  inset: 0 0 auto;
  height: 2px;
  z-index: 95;
  pointer-events: none;
}
.progress-line i {
  display: block;
  height: 100%;
  background: var(--paper);
  mix-blend-mode: difference;
  transform: scaleX(0);
  transform-origin: 0 50%;
}

/* Свой курсор только там, где есть мышь. */
.cursor { display: none; }

@media (hover: hover) and (pointer: fine) {
  html.has-cursor .cursor {
    display: grid;
    place-items: center;
    position: fixed;
    left: 0; top: 0;
    z-index: 300;
    width: 12px; height: 12px;
    margin: -6px 0 0 -6px;
    border-radius: 50%;
    background: var(--paper);
    mix-blend-mode: difference;
    pointer-events: none;
    transition: width .45s var(--ease), height .45s var(--ease), margin .45s var(--ease), opacity .3s;
    will-change: transform;
  }
  html.has-cursor .cursor.is-hover {
    width: 86px; height: 86px;
    margin: -43px 0 0 -43px;
  }
  html.has-cursor .cursor.is-hidden { opacity: 0; }

  .cursor__label {
    font-family: var(--mono);
    font-size: .62rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--black);
    opacity: 0;
    transform: scale(.6);
    transition: opacity .3s, transform .45s var(--ease);
    white-space: nowrap;
  }
  .cursor.is-hover .cursor__label { opacity: 1; transform: none; }
}

/* --- герой ---------------------------------------------------------------- */

.hx {
  --mx: 50%;
  --my: 45%;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: calc(var(--header-h) + 40px) 0 clamp(40px, 6vw, 72px);
  background: var(--black);
  color: var(--paper);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.hx__glow {
  position: absolute;
  width: 120vmax; height: 120vmax;
  left: 50%; top: 40%;
  translate: -50% -50%;
  background: radial-gradient(circle, rgba(255,255,255,.1) 0%, rgba(255,255,255,.025) 34%, transparent 62%);
  pointer-events: none;
  animation: drift 22s var(--ease-io) infinite alternate;
  z-index: -1;
}

/* Сетка проявляется только вокруг курсора — как луч фонарика. */
.hx__grid {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.13) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.13) 1px, transparent 1px);
  background-size: 72px 72px;
  background-position: center;
  -webkit-mask-image: radial-gradient(circle 300px at var(--mx) var(--my), #000 0%, transparent 100%);
          mask-image: radial-gradient(circle 300px at var(--mx) var(--my), #000 0%, transparent 100%);
  opacity: .9;
}
.hx__grid::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle 220px at var(--mx) var(--my), rgba(255,255,255,.09), transparent 70%);
}

/* Плёночное зерно — убирает «цифровую» стерильность чёрного. */
.hx__grain {
  position: absolute;
  inset: -50%;
  z-index: -1;
  pointer-events: none;
  opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1s steps(6) infinite;
}

@keyframes grain {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(-4%, 3%); }
  40%  { transform: translate(3%, -5%); }
  60%  { transform: translate(-6%, -2%); }
  80%  { transform: translate(5%, 4%); }
  100% { transform: translate(0, 0); }
}

.hx__inner { position: relative; }

.hx__top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 24px;
  padding-bottom: 22px;
  margin-bottom: clamp(20px, 3vw, 40px);
  border-bottom: 1px solid var(--line-dark);
}
.hx__index { color: rgba(255,255,255,.7); }

.hx__title { margin-bottom: clamp(28px, 3.4vw, 48px); }
.hx__title .display {
  display: block;
  font-size: clamp(3.4rem, 13.5vw, 13rem);
  line-height: .9;
  letter-spacing: -.055em;
  /* место под выносные элементы «д» и «у» — маска их не обрежет */
  padding-bottom: .08em;
  margin-bottom: -.08em;
}
.hx__indent { padding-left: clamp(0px, 9vw, 1.35em); }
.hx__dot { color: var(--grey-2); }

/* Слово-ротатор: все варианты в одной ячейке сетки, ширина — по самому длинному. */
.hx__rotator {
  display: inline-grid;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: .08em;
  margin-bottom: -.08em;
}
.hx__rotator > span {
  grid-area: 1 / 1;
  transform: translateY(110%);
  will-change: transform;
}
.hx__rotator > span.is-active { transform: none; }

.hx__bottom {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 32px 48px;
  align-items: end;
}
.hx__bottom .lead { max-width: 46ch; }
.hx__actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* Круглый бейдж с текстом по окружности. */
.orbit {
  position: absolute;
  right: max(24px, calc((100vw - 1320px) / 2));
  top: 40%;
  width: clamp(110px, 11vw, 150px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  color: var(--paper);
  z-index: 2;
}
.orbit__ring {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  animation: spin 18s linear infinite;
}
.orbit__ring text {
  fill: currentColor;
  font-family: var(--mono);
  font-size: 12.4px;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.orbit__arrow {
  width: 46%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid var(--line-dark);
  display: grid;
  place-items: center;
  font-size: 1.2rem;
  transition: background .5s var(--ease), color .5s var(--ease), transform .6s var(--ease);
}
.orbit:hover .orbit__arrow { background: var(--paper); color: var(--black); transform: scale(1.08); }
.orbit:hover .orbit__ring { animation-duration: 6s; }

@keyframes spin { to { transform: rotate(360deg); } }

/* --- двойная бегущая строка ----------------------------------------------- */

.mq {
  background: var(--black);
  color: var(--paper);
  border-block: 1px solid var(--line-dark);
  padding: clamp(18px, 2.4vw, 32px) 0;
  overflow: hidden;
  display: grid;
  gap: clamp(6px, 1vw, 14px);
}
.mq__row { will-change: transform; }
.mq .marquee__item {
  font-size: clamp(1.8rem, 5.4vw, 5rem);
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: 1.05;
}
.mq__row--outline .marquee__item {
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,.55);
}
.mq__row--outline .marquee__item::after { background: rgba(255,255,255,.55); }
.mq [data-skew] { will-change: transform; }

/* --- манифест ------------------------------------------------------------- */

.manifest .eyebrow { display: block; margin-bottom: clamp(26px, 3vw, 44px); }

.manifest__text {
  font-size: clamp(1.9rem, 4.6vw, 4.4rem);
  line-height: 1.08;
  letter-spacing: -.035em;
  font-weight: 640;
  max-width: 22ch;
  max-width: none;
}
.mw { display: inline-block; margin-right: .22em; }
.mw--accent {
  font-style: italic;
  font-weight: 500;
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  letter-spacing: -.02em;
}

/* Пока JS не подхватил — текст читается полностью. */
html.js-words .mw { opacity: .14; }
html.no-motion .mw { opacity: 1 !important; }

.manifest__foot {
  margin-top: clamp(36px, 4.6vw, 64px);
  padding-top: 26px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: end;
  gap: 20px 40px;
}
.manifest__foot .body-text { max-width: 54ch; }

/* --- направления ---------------------------------------------------------- */

.dirs-section__head { padding-bottom: clamp(36px, 4.6vw, 64px); }
.dirs-section__head .eyebrow { display: block; margin-bottom: 20px; }

.dirs-section .dir { cursor: pointer; }
.dirs-section .dir::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--fg);
  transform: scaleY(0);
  transform-origin: 50% 100%;
  transition: transform .7s var(--ease);
  z-index: 0;
}
.dirs-section .dir__inner { position: relative; z-index: 1; transition: color .5s var(--ease); }
.dirs-section .dir:hover { background: var(--bg); }
.dirs-section .dir:hover::before { transform: scaleY(1); }
.dirs-section .dir:hover .dir__inner { color: var(--bg); }
.dirs-section .dir:hover .dir__desc,
.dirs-section .dir:hover .dir__num { color: color-mix(in srgb, var(--bg) 70%, transparent); }
.dirs-section .dir:hover .tag { border-color: color-mix(in srgb, var(--bg) 35%, transparent); color: color-mix(in srgb, var(--bg) 80%, transparent); }
.dirs-section .dir:hover .dir__go { background: var(--bg); color: var(--fg); border-color: var(--bg); }

/* Превью направления, которое летит за курсором. */
.dir-preview {
  position: fixed;
  left: 0; top: 0;
  z-index: 70;
  width: clamp(240px, 22vw, 340px);
  aspect-ratio: 4 / 3;
  border-radius: 18px;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.6);
  background: var(--ink-2);
  box-shadow: 0 30px 80px rgba(0,0,0,.35);
  display: none;
}
@media (hover: hover) and (pointer: fine) { .dir-preview { display: block; } }

.dir-preview__img {
  position: absolute;
  inset: 0;
  clip-path: inset(100% 0 0 0);
  transition: clip-path .6s var(--ease);
}
.dir-preview__img.is-active { clip-path: inset(0 0 0 0); z-index: 1; }
.dir-preview__img img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.15); transition: transform 1.2s var(--ease); }
.dir-preview__img.is-active img { transform: scale(1); }
.dir-preview__cap {
  position: absolute;
  left: 12px; bottom: 12px;
  padding: 6px 11px;
  border-radius: 980px;
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #fff;
  font-family: var(--mono);
  font-size: .64rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* --- процесс -------------------------------------------------------------- */

.process {
  background: var(--black);
  color: var(--paper);
  --fg: var(--paper);
  --bg: var(--black);
  --muted: var(--grey);
  --line: var(--line-dark);
}
.process__pin {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(28px, 4vw, 56px);
  padding: calc(var(--header-h) + 24px) 0 40px;
  overflow: hidden;
}

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

.process__counter {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: clamp(1rem, 1.4vw, 1.3rem);
  color: var(--grey);
}
.process__counter [data-process-current] { color: var(--paper); }
.process__counter i { width: 44px; height: 1px; background: var(--line-dark); }

.process__viewport { overflow: visible; }

.process__track {
  display: flex;
  gap: clamp(16px, 2vw, 28px);
  padding-inline: max(24px, calc((100vw - 1320px) / 2));
  width: max-content;
  will-change: transform;
}

.process__step {
  width: clamp(280px, 34vw, 480px);
  min-height: clamp(340px, 46vh, 460px);
  flex: none;
  border: 1px solid var(--line-dark);
  border-radius: 26px;
  padding: clamp(24px, 2.6vw, 38px);
  background: linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.015) 60%);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

.process__num {
  font-size: clamp(4.5rem, 9vw, 8rem);
  font-weight: 700;
  letter-spacing: -.06em;
  line-height: .8;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,.35);
}
.process__title {
  margin-top: auto;
  padding-top: 28px;
  font-size: clamp(1.6rem, 2.6vw, 2.3rem);
  font-weight: 660;
  letter-spacing: -.03em;
  line-height: 1.05;
}
.process__text { margin-top: 12px; color: var(--grey); line-height: 1.55; font-size: .98rem; }
.process__list { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 7px; }
.process__list li {
  font-size: .76rem;
  padding: 5px 11px;
  border-radius: 980px;
  border: 1px solid var(--line-dark);
  color: rgba(255,255,255,.75);
}

.process__step--cta {
  background: var(--paper);
  color: var(--black);
  justify-content: space-between;
  border-color: var(--paper);
}
.process__step--cta .process__title { margin-top: 0; padding-top: 0; font-size: clamp(2rem, 3.6vw, 3.2rem); }
.process__step--cta .btn { --btn-bg: var(--black); --btn-fg: var(--paper); align-self: flex-start; }

.process__bar { height: 1px; background: var(--line-dark); overflow: hidden; }
.process__bar i { display: block; height: 100%; background: var(--paper); transform: scaleX(0); transform-origin: 0 50%; }

/* Без горизонтального скролла — обычная лента, которую можно листать пальцем. */
.process:not(.is-pinned) .process__viewport {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.process:not(.is-pinned) .process__viewport::-webkit-scrollbar { display: none; }
.process:not(.is-pinned) .process__step { scroll-snap-align: start; scroll-margin-left: 16px; }
.process:not(.is-pinned) .process__bar,
.process:not(.is-pinned) .process__counter { display: none; }

/* --- команда -------------------------------------------------------------- */

.team__grid {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: end;
}

.outline-list { border-top: 1px solid var(--line); }
.outline-list li { border-bottom: 1px solid var(--line); padding: clamp(14px, 1.8vw, 22px) 0; }

/* Контурный текст, который заливается слева направо при наведении. */
.outline-list__t {
  position: relative;
  display: inline-block;
  font-size: clamp(1.5rem, 3.3vw, 3rem);
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: 1.05;
  color: transparent;
  -webkit-text-stroke: 1px var(--fg);
}
.outline-list__t::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  color: var(--fg);
  -webkit-text-stroke: 0;
  clip-path: inset(0 100% 0 0);
  transition: clip-path .9s var(--ease);
}
.outline-list li:hover .outline-list__t::after,
.outline-list li.is-lit .outline-list__t::after { clip-path: inset(0 0 0 0); }

/* --- популярное: карточки с фото и наклоном ------------------------------- */

.pcards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
  gap: 18px;
  perspective: 1200px;
}

.pcard {
  display: flex;
  flex-direction: column;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--card);
  transform-style: preserve-3d;
  transition: border-color .5s, background .5s;
  will-change: transform;
}
.pcard:hover { border-color: rgba(255,255,255,.3); background: var(--card-hover); }

.pcard__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--ink-2);
}
.pcard__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.05);
  transform: scale(1.04);
  transition: transform 1.2s var(--ease), filter .8s;
}
.pcard:hover .pcard__media img { transform: scale(1.12); }
.pcard__cat {
  position: absolute;
  left: 14px; top: 14px;
  padding: 6px 11px;
  border-radius: 980px;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-family: var(--mono);
  font-size: .64rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #fff;
}
.pcard__body { padding: 22px 22px 20px; display: flex; flex-direction: column; gap: 18px; flex: 1; }
.pcard__title { font-size: 1.35rem; font-weight: 620; letter-spacing: -.025em; line-height: 1.15; }
.pcard__foot { margin-top: auto; display: flex; justify-content: space-between; align-items: center; }
.pcard__go {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid var(--line);
  display: grid; place-items: center;
  transition: background .5s var(--ease), color .5s var(--ease), transform .6s var(--ease);
}
.pcard:hover .pcard__go { background: var(--fg); color: var(--bg); transform: rotate(-45deg); }

/* --- конструктор ---------------------------------------------------------- */

.configurator__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}

.goals { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 34px; }

.goal {
  position: relative;
  padding: 13px 22px 13px 44px;
  border-radius: 980px;
  border: 1px solid var(--line);
  font-size: .97rem;
  letter-spacing: -.01em;
  color: var(--fg);
  transition: background .45s var(--ease), color .45s, border-color .45s, transform .5s var(--ease);
}
.goal::before {
  content: "";
  position: absolute;
  left: 16px; top: 50%;
  width: 16px; height: 16px;
  margin-top: -8px;
  border-radius: 50%;
  border: 1px solid currentColor;
  opacity: .5;
  transition: background .3s, opacity .3s;
}
.goal::after {
  content: "";
  position: absolute;
  left: 21px; top: 50%;
  width: 6px; height: 3px;
  margin-top: -3px;
  border-left: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg) scale(0);
  transition: transform .4s var(--ease);
}
.goal:hover { border-color: color-mix(in srgb, var(--fg) 40%, transparent); }
.goal:active { transform: scale(.97); }
.goal[aria-pressed="true"] { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.goal[aria-pressed="true"]::before { opacity: 1; }
.goal[aria-pressed="true"]::after { transform: rotate(-45deg) scale(1); }

.plan {
  position: sticky;
  top: calc(var(--header-h) + 24px);
  background: var(--black);
  color: var(--paper);
  border-radius: 28px;
  padding: clamp(24px, 2.6vw, 36px);
  min-height: 420px;
  display: flex;
  flex-direction: column;
  --line: var(--line-dark);
  --muted: var(--grey);
}
.plan__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 18px; border-bottom: 1px solid var(--line-dark); }
.plan__count { font-size: 1.05rem; }
.plan__count [data-plan-count] { font-size: 2.2rem; font-weight: 600; letter-spacing: -.04em; margin-right: 4px; }

.plan__list { counter-reset: plan; flex: 1; }
.plan__list li {
  counter-increment: plan;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: baseline;
  padding: 14px 0;
  border-bottom: 1px solid var(--line-dark);
}
.plan__list li::before { content: counter(plan, decimal-leading-zero); font-family: var(--mono); font-size: .74rem; color: var(--grey); }
.plan__list a { font-weight: 560; letter-spacing: -.015em; transition: opacity .3s; }
.plan__list a:hover { opacity: .7; }
.plan__list small { display: block; margin-top: 3px; color: var(--grey); font-size: .78rem; }
.plan__list .mono-num { color: var(--grey); font-size: .74rem; white-space: nowrap; }

.plan__empty[hidden] { display: none; }
.plan__empty { flex: 1; display: grid; place-items: center; text-align: center; color: var(--grey); padding: 40px 10px; max-width: 30ch; margin-inline: auto; }

.plan__foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-top: 22px; flex-wrap: wrap; }
.plan__steps { color: var(--grey); font-size: .8rem; }
.plan .btn { --btn-bg: var(--paper); --btn-fg: var(--black); }
.plan .btn:disabled { opacity: .3; cursor: not-allowed; }

/* Подсветка формы после переноса подборки. */
.picker.is-flash label { transition: background .35s, color .35s, border-color .35s, box-shadow .6s; }
.picker.is-flash input:checked + label { box-shadow: 0 0 0 4px rgba(255,255,255,.25); }

/* --- финал ---------------------------------------------------------------- */

.final__big {
  font-size: clamp(3.4rem, 14vw, 13.5rem);
  font-weight: 700;
  letter-spacing: -.06em;
  line-height: .88;
}
.final__big > span { display: block; }
.final__big > span:last-child { padding-left: clamp(0px, 14vw, 2.4em); color: transparent; -webkit-text-stroke: 1px var(--fg); }
.final__big .reveal-line > span { padding-bottom: .06em; }

.final--short .final__big { font-size: clamp(3rem, 11vw, 10rem); }
.final__row {
  margin-top: clamp(32px, 4vw, 56px);
  padding-top: 28px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 24px 40px;
}
.final__row .lead { max-width: 52ch; }

/* ==========================================================================
   Внутренние страницы
   ========================================================================== */

/* Герой внутренних страниц — та же сцена, но ниже ростом. */
.hx--page {
  min-height: min(92svh, 860px);
  padding-top: calc(var(--header-h) + clamp(64px, 9vw, 120px));
}
.hx--page .hx__title .display { font-size: clamp(3rem, 11vw, 10.5rem); }
.hx--center { justify-content: center; }
.hx--center .hx__title { margin-top: 18px; }
.hx__aside { max-width: 44ch; color: rgba(255,255,255,.62); }

/* Название услуги бывает длинным — размер меньше и с переносами. */
.hx--svc { min-height: min(88svh, 820px); }
.hx__title--svc > .reveal-line > span {
  font-size: clamp(2.5rem, 7.4vw, 7rem);
  font-weight: 700;
  line-height: .96;
  letter-spacing: -.05em;
  max-width: 16ch;
  padding-bottom: .08em;
}
.hx--svc .hx__bottom { align-items: end; }
.hx--svc .svc-hero__meta { margin-top: 20px; }
.hx--svc .tag { border-color: var(--line-dark); color: rgba(255,255,255,.7); }

/* --- каталог -------------------------------------------------------------- */

.chip sup { font-size: .62em; margin-left: 2px; opacity: .6; vertical-align: super; }
.search__count:not(:empty) {
  font-size: .72rem;
  padding: 2px 8px;
  border-radius: 980px;
  background: var(--fg);
  color: var(--bg);
}

.cat-block--fx { padding-top: clamp(56px, 7vw, 110px); }

.cat-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) clamp(180px, 24vw, 340px);
  gap: clamp(20px, 3vw, 48px);
  align-items: end;
  padding-bottom: 28px;
  margin-bottom: 28px;
  border-bottom: 1px solid var(--line);
}
.cat-head__num {
  font-size: clamp(4rem, 9vw, 8.5rem);
  font-weight: 700;
  letter-spacing: -.06em;
  line-height: .8;
  color: transparent;
  -webkit-text-stroke: 1px color-mix(in srgb, var(--fg) 45%, transparent);
}
.cat-head__text .body-text { margin-top: 12px; max-width: 52ch; }
.cat-head__img {
  aspect-ratio: 16 / 10;
  border-radius: 18px;
  overflow: hidden;
  background: var(--paper-3);
}
.cat-head__img img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); transition: transform 1.2s var(--ease); }
.cat-block--fx:hover .cat-head__img img { transform: scale(1.06); }

/* Карточка услуги: при наведении заливается снизу. */
.card--fx { position: relative; overflow: hidden; isolation: isolate; }
.card--fx::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--fg);
  transform: translateY(101%);
  transition: transform .7s var(--ease);
}
.card--fx > * { transition: color .5s var(--ease); }
.card--fx:hover { transform: translateY(-4px); border-color: var(--fg); }
.card--fx:hover::before { transform: none; }
.card--fx:hover .card__title { color: var(--bg); }
.card--fx:hover .card__text,
.card--fx:hover .card__cat,
.card--fx:hover .card__steps { color: color-mix(in srgb, var(--bg) 65%, transparent); }
.card__top { display: flex; justify-content: space-between; align-items: center; }
.card__go {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid var(--line);
  display: grid; place-items: center;
  font-size: .9rem;
  transition: transform .6s var(--ease), background .5s, color .5s, border-color .5s;
}
.card--fx:hover .card__go { background: var(--bg); color: var(--fg); border-color: var(--bg); transform: rotate(-45deg); }

/* --- страница услуги ------------------------------------------------------ */

.svc-cover { background: linear-gradient(var(--black) 50%, var(--paper) 50%); }
.svc-figure--fx { margin: 0 auto; width: var(--shell); }

.svc-about { display: grid; grid-template-columns: minmax(0, .4fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); }
.svc-about__text { font-size: clamp(1.1rem, 1.6vw, 1.4rem); line-height: 1.5; color: var(--fg); letter-spacing: -.01em; }

.svc-stages {
  margin-top: clamp(72px, 9vw, 140px);
  display: grid;
  grid-template-columns: minmax(0, .4fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: start;
}
.svc-stages__aside { position: sticky; top: calc(var(--header-h) + 32px); display: flex; flex-direction: column; align-items: flex-start; }
.svc-stages__counter {
  margin-top: 28px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1.1rem;
  color: var(--muted);
}
.svc-stages__counter [data-stage-current] { color: var(--fg); font-size: 2.2rem; font-weight: 600; letter-spacing: -.04em; }
.svc-stages__counter i { width: 90px; height: 1px; background: var(--line); position: relative; overflow: hidden; }
.svc-stages__counter b { position: absolute; inset: 0; background: var(--fg); transform-origin: 0 50%; transform: scaleX(0); transition: transform .6s var(--ease); }

.svc-stages__list { border-top: 1px solid var(--line); }
.sstage {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: clamp(12px, 2vw, 28px);
  padding: clamp(28px, 3.4vw, 44px) 0;
  border-bottom: 1px solid var(--line);
  opacity: .32;
  transition: opacity .6s var(--ease);
}
.sstage.is-current { opacity: 1; }
html.no-motion .sstage { opacity: 1; }
.sstage__num {
  font-size: clamp(2.2rem, 3.6vw, 3.4rem);
  font-weight: 700;
  letter-spacing: -.05em;
  line-height: .9;
  color: transparent;
  -webkit-text-stroke: 1px var(--fg);
  transition: color .6s var(--ease);
}
.sstage.is-current .sstage__num { color: var(--fg); }

.svc-result .eyebrow { display: block; margin-bottom: clamp(26px, 3vw, 44px); }
.svc-result__text {
  font-size: clamp(1.7rem, 3.8vw, 3.6rem);
  line-height: 1.1;
  letter-spacing: -.035em;
  font-weight: 620;
}

.gallery--fx figure { border-radius: 24px; }

.final__big--svc { font-size: clamp(3rem, 12vw, 11rem); }

/* --- агентство ------------------------------------------------------------ */

.aud {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 26px;
  overflow: hidden;
}
.aud__item {
  background: var(--bg);
  padding: clamp(26px, 3vw, 40px);
  min-height: 300px;
  display: flex;
  flex-direction: column;
  transition: background .6s var(--ease), color .6s var(--ease);
}
.aud__num { color: var(--muted); font-size: .8rem; }
.aud__title { margin-top: auto; font-size: clamp(1.4rem, 2.2vw, 2rem); font-weight: 650; letter-spacing: -.03em; line-height: 1.05; }
.aud__text { margin-top: 12px; color: var(--muted); font-size: .97rem; line-height: 1.5; transition: color .6s; }
.aud__item:hover { background: var(--paper); color: var(--black); }
.aud__item:hover .aud__text, .aud__item:hover .aud__num { color: var(--grey-2); }

/* --- контакты ------------------------------------------------------------- */

.channels { margin-top: clamp(24px, 3vw, 40px); border-top: 1px solid var(--line); }
.channel { position: relative; border-bottom: 1px solid var(--line); overflow: hidden; }
.channel__link {
  position: relative;
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr) 54px;
  align-items: center;
  gap: 20px;
  padding: clamp(20px, 2.8vw, 36px) 0;
  z-index: 1;
}
.channel::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--fg);
  transform: scaleY(0);
  transform-origin: 50% 100%;
  transition: transform .7s var(--ease);
}
.channel:hover::before { transform: scaleY(1); }
.channel__label { font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); padding-left: 4px; transition: color .5s; }
.channel__value {
  font-size: clamp(1.6rem, 4.6vw, 4.2rem);
  font-weight: 680;
  letter-spacing: -.045em;
  line-height: 1;
  transition: color .5s var(--ease), transform .7s var(--ease);
  overflow-wrap: anywhere;
}
.channel__go {
  justify-self: end;
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 1px solid var(--line);
  display: grid; place-items: center;
  transition: transform .6s var(--ease), background .5s, color .5s, border-color .5s;
}
.channel:hover .channel__value { color: var(--bg); transform: translateX(12px); }
.channel:hover .channel__label { color: color-mix(in srgb, var(--bg) 60%, transparent); }
.channel:hover .channel__go { background: var(--bg); color: var(--fg); border-color: var(--bg); transform: rotate(-45deg); }

.channel__copy {
  position: absolute;
  right: 70px; top: 50%;
  z-index: 2;
  transform: translateY(-50%);
  padding: 7px 13px;
  border-radius: 980px;
  border: 1px solid var(--line);
  font-family: var(--mono);
  font-size: .64rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: 0;
  transition: opacity .4s, color .4s, border-color .4s;
}
.channel:hover .channel__copy, .channel__copy:focus-visible { opacity: 1; color: var(--bg); border-color: color-mix(in srgb, var(--bg) 40%, transparent); }
@media (hover: none) { .channel__copy { opacity: 1; position: static; transform: none; margin: 0 0 16px 4px; } }

.howto { margin-top: 32px; display: grid; gap: 0; border-top: 1px solid var(--line); }
.howto li { display: flex; gap: 16px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--line); color: var(--fg); }
.howto .mono-num { color: var(--muted); font-size: .78rem; }

.toast {
  position: fixed;
  left: 50%; bottom: 28px;
  z-index: 250;
  transform: translate(-50%, 140%);
  padding: 13px 20px;
  border-radius: 980px;
  background: var(--paper);
  color: var(--black);
  font-size: .9rem;
  box-shadow: 0 20px 50px rgba(0,0,0,.3);
  transition: transform .6s var(--ease);
  pointer-events: none;
}
.toast:empty { display: none; }
.toast.is-shown { transform: translate(-50%, 0); }

/* ==========================================================================
   Портфолио
   ========================================================================== */

.works {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(48px, 6vw, 96px) clamp(24px, 3vw, 48px);
  margin-top: clamp(28px, 3.4vw, 48px);
}
.work[hidden] { display: none; }

.work { display: block; color: var(--fg); }

/* Скриншот в рамке браузера и телефон с мобильной версией поверх. */
.work__media {
  position: relative;
  display: block;
  padding: 0 11% 7% 0;
}
.work__frame {
  display: block;
  border-radius: 16px;
  overflow: hidden;
  background: var(--ink-2);
  border: 1px solid var(--line);
  box-shadow: 0 30px 70px -30px rgba(0,0,0,.45);
  transition: transform .9s var(--ease), box-shadow .9s var(--ease);
}
.work__bar {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  background: #18181a;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.work__bar i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.22); flex: none; }
.work__url {
  margin: 0 auto;
  padding: 3px 14px;
  border-radius: 980px;
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.6);
  font-family: var(--mono);
  font-size: .64rem;
  letter-spacing: .06em;
  transform: translateX(-14px);
}
.work__frame img {
  display: block;
  width: 100%;
  height: auto; /* иначе атрибут height="1000" перебивает aspect-ratio */
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top;
  transition: transform 1.4s var(--ease);
}
.work__phone {
  position: absolute;
  right: 0; bottom: 0;
  width: 21%;
  border-radius: 18px;
  overflow: hidden;
  border: 4px solid #0d0d0e;
  background: #0d0d0e;
  box-shadow: 0 24px 50px -16px rgba(0,0,0,.55);
  transition: transform .9s var(--ease);
}
.work__phone img { display: block; width: 100%; height: auto; aspect-ratio: 480 / 1039; object-fit: cover; object-position: top; }

.work:hover .work__frame { transform: translateY(-6px); box-shadow: 0 40px 90px -30px rgba(0,0,0,.55); }
.work:hover .work__frame img { transform: scale(1.035); }
.work:hover .work__phone { transform: translateY(-18px) rotate(-3deg); }

.work__info {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 4px 16px;
  align-items: baseline;
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.work__num { color: var(--muted); font-size: .78rem; }
.work__title { display: block; font-size: clamp(1.3rem, 2vw, 1.75rem); font-weight: 650; letter-spacing: -.03em; line-height: 1.1; }
.work__about { display: block; margin-top: 6px; color: var(--muted); font-size: .95rem; }
.work__go {
  font-family: var(--mono);
  font-size: .74rem;
  letter-spacing: .04em;
  color: var(--muted);
  white-space: nowrap;
  transition: color .4s;
}
.work__go span { display: inline-block; transition: transform .5s var(--ease); }
.work:hover .work__go { color: var(--fg); }
.work:hover .work__go span { transform: translate(3px, -3px); }

.filters--works { margin-top: 0; }

@media (max-width: 860px) {
  .works { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .work__info { grid-template-columns: minmax(0, 1fr); }
  .work__num { display: none; }
  .work__go { margin-top: 6px; }
}

/* --- адаптив -------------------------------------------------------------- */

@media (max-width: 1024px) {
  .cat-head { grid-template-columns: auto minmax(0, 1fr); }
  .cat-head__img { display: none; }
  .svc-about, .svc-stages { grid-template-columns: 1fr; }
  .svc-stages__aside { position: static; }
}

@media (max-width: 768px) {
  .cat-head { grid-template-columns: 1fr; gap: 12px; }
  .sstage { grid-template-columns: 1fr; gap: 10px; }
  .channel__link { grid-template-columns: minmax(0, 1fr) 44px; gap: 6px 14px; }
  .channel__label { grid-column: 1 / -1; }
  .channel__go { width: 40px; height: 40px; }
}

@media (max-width: 1024px) {
  .hx__bottom { grid-template-columns: 1fr; }
  .team__grid, .configurator__grid { grid-template-columns: 1fr; }
  .plan { position: static; min-height: 0; }
  .orbit { top: auto; bottom: 28px; }
  .hx__bottom { padding-right: clamp(0px, 18vw, 150px); }
}

@media (max-width: 768px) {
  .hx__indent { padding-left: 0; }
  .orbit { display: none; }
  .hx__bottom { padding-right: 0; }
  .process__head { flex-direction: column; align-items: start; }
  .process__step { width: min(84vw, 380px); }
  .process__pin { min-height: 0; padding-block: 72px; }
}

@media (prefers-reduced-motion: reduce) {
  .hx__grain, .hx__glow, .orbit__ring { animation: none; }
}