/* ============================ Секции ============================ */

/* =================== 1. Шапка =================== */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-header);
  height: var(--header-h);
  color: var(--fg);
  transition: transform .7s var(--ease-out), color .3s;
}
.header__bg {
  position: absolute;
  inset: 0;
  background: rgb(var(--bg-rgb) / .74);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
          backdrop-filter: blur(16px) saturate(1.3);
  border-bottom: 1px solid var(--line);
  opacity: 0;
  transition: opacity .4s;
}
.header.is-solid .header__bg { opacity: 1; }
.header.is-hidden { transform: translateY(-101%); }
.header__inner {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 24px;
}
.header__logo { width: clamp(120px, 9.4vw, 156px); flex: none; padding-block: 10px; }
.header__nav { display: flex; gap: clamp(20px, 2.4vw, 44px); margin-inline: auto; }
.nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 500;
  padding-block: 10px;
}
.nav-link::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--grad-brand);
  scale: 0;
  margin-left: -15px;
  transition: scale .45s var(--ease-out), margin .45s var(--ease-out);
}
.nav-link.is-active::before { scale: 1; margin-left: 0; }
.header__right { display: flex; align-items: center; gap: clamp(16px, 2vw, 28px); }
.header__phone { font-size: 15px; font-weight: 600; white-space: nowrap; }
.burger {
  display: none;
  position: relative;
  width: 48px;
  height: 48px;
  margin-right: -10px;
  border-radius: 50%;
}
.burger span {
  position: absolute;
  left: 13px;
  right: 13px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform .5s var(--ease-out), top .5s var(--ease-out);
}
.burger span:nth-child(1) { top: 19px; }
.burger span:nth-child(2) { top: 27px; }
.menu-open .burger span:nth-child(1) { top: 23px; transform: rotate(45deg); }
.menu-open .burger span:nth-child(2) { top: 23px; transform: rotate(-45deg); }
.menu-open .header { color: var(--c-white); transform: none; }
.menu-open .header__bg { opacity: 0; }

@media (max-width: 1023px) {
  .header__nav, .header__right { display: none; }
  .burger { display: block; margin-left: auto; }
}

/* Мобильное меню: раскрывается кругом из точки бургера */
.menu {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-header) - 1);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: calc(var(--header-h) + 24px) var(--gutter) max(28px, env(safe-area-inset-bottom));
  background: var(--c-black);
  color: var(--c-white);
  clip-path: circle(0px at var(--mx, 100%) var(--my, 0%));
  visibility: hidden;
  overflow-y: auto;
}
.menu__nav { display: grid; gap: 4px; }
.menu__link {
  display: block;
  overflow: hidden;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(38px, 11vw, 84px);
  line-height: 1.12;
  letter-spacing: -0.02em;
}
.menu__link span { display: block; }
.menu__bottom { display: grid; gap: 20px; padding-top: 32px; }
.menu__phone { font-family: var(--font-display); font-weight: 300; font-size: clamp(24px, 6.6vw, 40px); letter-spacing: -0.02em; }
.menu__bottom .btn { width: 100%; }

/* =================== 2. Hero =================== */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  padding-top: calc(var(--header-h) + clamp(20px, 6vh, 72px));
  padding-bottom: clamp(28px, 6vh, 64px);
  overflow: clip;
}
.hero__canvas, .hero__fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.hero__fallback { display: none; overflow: hidden; }
.no-webgl .hero__fallback { display: block; }
.hero__fallback i {
  position: absolute;
  border-radius: 50%;
  filter: blur(2px);
  background: radial-gradient(circle at 65% 70%, var(--c-lemon) 0%, var(--c-lime) 40%, var(--c-turquoise) 100%);
  animation: glow-drift 14s ease-in-out infinite alternate;
}
.hero__fallback i:nth-child(1) { width: 38vw; height: 38vw; right: 8vw; top: 18vh; }
.hero__fallback i:nth-child(2) { width: 12vw; height: 12vw; right: 40vw; top: 58vh; animation-duration: 9s; }
.hero__fallback i:nth-child(3) { width: 6vw; height: 6vw; right: 6vw; top: 12vh; animation-duration: 11s; }

.hero__inner {
  position: relative;               /* без z-index: иначе difference-режим не увидит canvas */
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(28px, 5vh, 56px);
}
.hero__top { display: grid; gap: clamp(18px, 3.2vh, 36px); }
.hero__eyebrow { color: var(--fg); }

.hero__title-wrap {
  mix-blend-mode: difference;       /* там, где клякса перекрывает заголовок, текст меняет цвет */
  color: #fff;                      /* белый в difference = чёрный на белом фоне */
  will-change: transform;
  transform-origin: 30% 50%;
}
.hero__title {
  font-family: var(--font-display);
  font-size: calc(var(--fs-h1) * var(--h1-fit, 1));
  line-height: var(--lh-h1);
  letter-spacing: var(--tr-h1);
  font-weight: 800;
}
.hero__stage { display: grid; }
.hero__variant {
  grid-area: 1 / 1;
  visibility: hidden;
  padding-bottom: .08em;
}
.hero__variant.is-active, .hero__variant.is-leaving { visibility: visible; }
.hero__word { display: inline-block; white-space: nowrap; }
.hero__ch {
  display: inline-block;
  backface-visibility: hidden;
  will-change: transform, opacity;
  /* Экструзия в градиенте бренда. Цвета инвертированы, потому что заголовок в режиме difference:
     на белом фоне они видны как бирюзовый → лайм. */
  text-shadow:
    .006em .01em 0 rgb(143 25 64),
    .012em .02em 0 rgb(132 20 72),
    .018em .03em 0 rgb(121 15 80),
    .024em .04em 0 rgb(110 10 88),
    .030em .05em 0 rgb(99 5 97),
    .036em .06em 0 rgb(89 0 105);
}
.hero__bottom {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  row-gap: 28px;
  align-items: end;
}
.hero__desc {
  grid-column: 1 / span 5;
  max-width: 36em;
  font-size: clamp(15px, .3vw + 13px, 17px);
  line-height: 1.55;
}
.hero__actions {
  grid-column: 8 / span 5;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 12px;
}
.hero__scroll {
  position: absolute;
  left: 50%;
  bottom: clamp(20px, 4vh, 40px);
  width: 1px;
  height: 56px;
  background: var(--line);
  overflow: hidden;
  translate: -50% 0;
}
.hero__scroll::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--fg);
  animation: scroll-hint 2.2s var(--ease-in-out) infinite;
}
@keyframes scroll-hint {
  0% { transform: translateY(-100%); }
  60%, 100% { transform: translateY(100%); }
}
@media (max-width: 1023px) {
  .hero__desc { grid-column: 1 / span 8; }
  .hero__actions { grid-column: 1 / -1; justify-content: flex-start; }
  .hero__scroll { display: none; }
}
@media (max-width: 767px) {
  .hero__desc { grid-column: 1 / -1; }
  .hero__actions .btn { flex: 1 1 auto; }
}

/* =================== 3. Шоурил =================== */
.showreel { position: relative; }
.showreel__stage {
  position: relative;
  height: 100vh;
  overflow: hidden;
}
.showreel__frame {
  --it: 24vh;
  --il: 28vw;
  --r: 24px;
  position: absolute;
  inset: 0;
  clip-path: inset(var(--it) var(--il) var(--it) var(--il) round var(--r));
  -webkit-clip-path: inset(var(--it) var(--il) var(--it) var(--il) round var(--r));
  background: #1A1A1A;
  will-change: clip-path;
}
.showreel__media {
  position: absolute;
  inset: 0;
  transform: scale(1.18);
  will-change: transform;
}
.showreel__media video, .showreel__media .ph { width: 100%; height: 100%; object-fit: cover; }
.showreel__media .ph { background: #1A1A1A; }
.showreel__media .ph__label { color: rgb(255 255 255 / .5); font-size: 13px; }
.showreel__tag {
  position: absolute;
  z-index: 2;
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: rgb(255 255 255 / .75);
  pointer-events: none;
}
.showreel__tag--tl { top: calc(var(--it) + 22px); left: calc(var(--il) + 24px); }
.showreel__tag--br { bottom: calc(var(--it) + 22px); right: calc(var(--il) + 24px); text-align: right; }
.showreel__play {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 50%;
  width: 88px;
  height: 88px;
  translate: -50% -50%;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--c-black);
  background: var(--grad-brand);
  font-size: 13px;
  font-weight: 600;
  opacity: 0;
  transition: opacity .3s;
}
.showreel__play:focus-visible { opacity: 1; }
@media (hover: none), (pointer: coarse) {
  .showreel__play { opacity: 1; }
}
/* мобильная/планшетная версия — без pin: просто карточка 16:9 */
@media (max-width: 1023px) {
  .showreel { padding-inline: var(--gutter); }
  .showreel__stage { height: auto; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; }
  .showreel__frame { --it: 0px !important; --il: 0px !important; --r: 0px; }
  .showreel__tag--tl { top: 14px; left: 16px; }
  .showreel__tag--br { bottom: 14px; right: 16px; max-width: 60%; }
}

/* =================== 4. Преимущества =================== */
.stats { padding-bottom: calc(var(--section-y) * .75); }
.stats__eyebrow { margin-bottom: clamp(40px, 5vw, 80px); }
.stats__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.stat {
  position: relative;
  padding-inline: clamp(14px, 2vw, 36px);
  min-width: 0;
}
.stat:first-child { padding-left: 0; }
.stat:first-child .stat__div { display: none; }   /* разделители — только между колонками */
.stat__div {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--line);
  transform-origin: 50% 0;
}
.stat__head {
  display: flex;
  align-items: flex-start;
  gap: .08em;
  font-size: var(--stat-fs, var(--fs-stat));
}
.stat__arrow {
  width: .2em;
  height: .2em;
  margin-top: .26em;
  margin-left: 0;
  flex: none;
  overflow: visible;
}
.stat__arrow path { stroke: url(#am-grad); stroke-width: 3; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.stat__num {
  font-family: var(--font-display);
  font-weight: 800;              /* как номера шагов в «Как мы работаем» */
  line-height: .9;
  letter-spacing: -0.05em;
  white-space: nowrap;
}
.stat__small {
  font-family: var(--font-text);
  font-weight: 500;
  font-size: .19em;
  letter-spacing: 0;
  vertical-align: .22em;
  margin-inline: .12em .3em;
}
.stat__small--after { margin-inline: .35em 0; vertical-align: baseline; }
.stat__label {
  margin-top: clamp(14px, 1.4vw, 24px);
  max-width: 17em;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .1em;
  line-height: 1.45;
  text-transform: uppercase;
  color: var(--muted);
}
@media (max-width: 1023px) {
  .stats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 56px; }
  .stat:nth-child(odd) { padding-left: 0; }
  .stat:nth-child(odd) .stat__div { display: none; }
}
@media (max-width: 559px) {
  .stats__grid { grid-template-columns: 1fr; row-gap: 0; }
  .stat { padding: 28px 0; border-top: 1px solid var(--line); }
  .stat:last-child { border-bottom: 1px solid var(--line); }
  .stat .stat__div { display: none; }
}

/* =================== 5. Кейсы =================== */
.cases { overflow: clip; }
.cases__tabs-wrap { position: relative; margin-bottom: clamp(56px, 7vw, 120px); }
.cases__tabs {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.tab {
  position: relative;
  z-index: 1;
  height: 48px;
  padding: 0 22px;
  border-radius: var(--pill);
  border: 1px solid var(--line);
  font-size: 14.5px;
  font-weight: 500;
  white-space: nowrap;
  transition: color .35s, border-color .35s;
}
.tab:hover { border-color: rgb(var(--fg-rgb) / .5); }
.tab[aria-selected="true"] { color: var(--c-black); border-color: transparent; }
.cases__pill {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
  height: 48px;
  width: 100px;
  border-radius: var(--pill);
  background: var(--grad-brand-live);
  background-size: 300% 100%;
  animation: grad-flow 4s linear infinite;
  pointer-events: none;
}
.cases__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  row-gap: clamp(56px, 6vw, 110px);
  align-items: start;
}
.case {
  grid-column: var(--col);
  margin-top: var(--mt, 0);
  perspective: 1200px;
}
.case__link { display: block; transform-style: preserve-3d; will-change: transform; }
.case__cover { position: relative; }
.case__cover .media__inner { transition: transform 1s var(--ease-out); }
.case__link:hover .case__cover .media__zoom { transform: scale(1.05); }
.media__zoom { width: 100%; height: 100%; transition: transform 1.1s var(--ease-out); }
.media__zoom > img, .media__zoom > .ph { width: 100%; height: 100%; object-fit: cover; }
.case__tags {
  position: absolute;
  z-index: 2;
  top: 16px;
  left: 16px;
  right: 16px;
}
.case__tags .chip { height: 30px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; font-weight: 600; }
.case__link:hover .case__tags .chip { transform: translateX(6px); }
.case__link:hover .case__tags .chip:nth-child(2) { transform: translateX(10px); }
.case__body { padding-top: 20px; display: grid; gap: 8px; }
.case__title { font-weight: 500; }
.case__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-small);
  color: var(--muted);
}
.case__meta .icon { width: 14px; height: 14px; }
.case__go { display: inline-flex; align-items: center; gap: 4px; color: var(--fg); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.cases__note { margin-top: 48px; }
@media (max-width: 767px) {
  .cases__tabs-wrap { margin-inline: calc(var(--gutter) * -1); }
  .cases__tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-inline: var(--gutter);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .cases__tabs::-webkit-scrollbar { display: none; }
  .cases__grid { grid-template-columns: 1fr; row-gap: 48px; }
  .case { grid-column: 1 / -1 !important; margin-top: 0 !important; width: 88%; }
  .case:nth-child(even) { margin-left: auto; }
  .case:nth-child(3n) { width: 94%; }
}

/* =================== 6. Услуги =================== */
.services { color: var(--fg); }
.services__stage {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  align-items: center;
}
.services__media {
  grid-column: 1 / span 5;
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  max-height: calc(100vh - var(--header-h) - 120px);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--ph);
}
.services__layer { position: absolute; inset: 0; }
.services__layer .ph, .services__layer img { width: 100%; height: 100%; object-fit: cover; }
.services__layer .ph { background: #1A1A1A; }
.services__layer .ph__label { color: rgb(255 255 255 / .55); }
.services__wipe { position: absolute; inset: 0; background: var(--grad-brand); }
.services__num-big {
  position: absolute;
  z-index: 3;
  right: 20px;
  bottom: 12px;
  font-family: var(--font-display);
  font-weight: 200;
  font-size: clamp(56px, 7vw, 120px);
  line-height: 1;
  letter-spacing: -0.05em;
  color: rgb(255 255 255 / .9);
  pointer-events: none;
  mix-blend-mode: difference;
}
.services__list {
  grid-column: 7 / span 6;
  position: relative;
  padding-left: clamp(24px, 2.4vw, 40px);
}
.services__progress {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--line);
  border-radius: 2px;
  overflow: hidden;
}
.services__progress i {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--c-turquoise), var(--c-lime));
  transform-origin: 50% 0;
  transform: scaleY(0);
}
.services__counter {
  display: block;
  margin-bottom: 18px;
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--tr-eyebrow);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.svc { border-top: 1px solid var(--line); }
.svc:last-child { border-bottom: 1px solid var(--line); }
.svc__head {
  display: flex;
  align-items: baseline;
  gap: clamp(16px, 2vw, 32px);
  width: 100%;
  padding: clamp(14px, 1.6vh, 22px) 0;
  text-align: left;
  color: rgb(var(--fg-rgb) / .36);
  transition: color .45s var(--ease-out);
}
.svc__head:hover { color: rgb(var(--fg-rgb) / .7); }
.svc.is-active .svc__head { color: var(--fg); }
.svc__num {
  flex: none;
  min-width: 2.2em;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .08em;
  font-variant-numeric: tabular-nums;
}
.svc__title {
  font-size: calc(var(--fs-h3) * .92);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.svc__body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .7s var(--ease-out);
}
.svc.is-active .svc__body { grid-template-rows: 1fr; }
.svc__inner { overflow: hidden; min-height: 0; }
.svc__content {
  display: grid;
  gap: 20px;
  padding: 0 0 clamp(20px, 2.6vh, 32px) calc(2.2em * 13 / 16 + clamp(16px, 2vw, 32px));
}
.svc__text { color: var(--muted); max-width: 36em; }
.svc__media-m { display: none; }
@media (min-width: 1024px) and (max-height: 760px) {
  .svc__content { gap: 14px; }
  .svc__text { font-size: 15px; }
}
@media (max-width: 1023px) {
  .services__media { display: none; }
  .services__list { grid-column: 1 / -1; padding-left: 0; }
  .services__progress, .services__counter { display: none; }
  .svc__content { padding-left: 0; }
  .svc__media-m { display: block; aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden; }
  .svc__media-m .ph { height: 100%; background: #1A1A1A; }
  .svc__media-m .ph__label { color: rgb(255 255 255 / .55); }
  .svc__head { padding: 20px 0; }
}

/* =================== 7. Клиенты =================== */
.clients { overflow: clip; }
.marquee {
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.marquee + .marquee { margin-top: clamp(28px, 3vw, 48px); }
.marquee__track {
  display: flex;
  align-items: center;
  width: max-content;
  gap: clamp(56px, 6.4vw, 120px);
  padding-block: 10px;
  will-change: transform;
}
.client {
  flex: none;
  display: flex;
  align-items: center;
  height: calc(var(--h) * 1px * var(--k, 1));
}
.client img {
  height: 100%;
  width: auto;
  max-width: none;
  filter: brightness(0);
  opacity: .42;
  transition: opacity .45s var(--ease-out);
}
.marquees:hover .client img { opacity: .2; }
.marquees .client:hover img { opacity: 1; }
@media (max-width: 767px) {
  .client { --k: .64; }
}

/* =================== 8. Как мы работаем =================== */
.process__stage { position: relative; }
.timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  column-gap: var(--col-gap);
  padding-top: 2px;
}
.timeline__line, .timeline__fill {
  position: absolute;
  left: 0;
  right: 0;
  top: 10px;
  height: 2px;
  border-radius: 2px;
}
.timeline__line { background: var(--line); }
.timeline__fill {
  background: var(--grad-brand);
  transform-origin: 0 50%;
  transform: scaleX(0);
}
.step { position: relative; padding-right: 8px; }
.step__dot {
  position: relative;
  z-index: 1;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid rgb(var(--fg-rgb) / .28);
  background: var(--bg);
  transition: border-color .4s, background .4s, box-shadow .6s var(--ease-out), transform .6s var(--ease-out);
}
.step.is-on .step__dot {
  border-color: transparent;
  background: var(--grad-brand);
  box-shadow: 0 0 0 7px rgb(166 255 150 / .14), 0 0 24px rgb(112 230 191 / .5);
  transform: scale(1.1);
}
.step__num {
  margin-top: clamp(28px, 3.4vw, 56px);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(56px, 6vw, 112px);
  line-height: .9;
  letter-spacing: -0.05em;
  color: rgb(var(--fg-rgb) / .14);
  background: var(--grad-brand);
  -webkit-background-clip: text;
          background-clip: text;
  background-size: 0% 100%;
  background-repeat: no-repeat;
  transition: background-size 1s var(--ease-out), color .6s;
}
.step.is-on .step__num { background-size: 100% 100%; color: transparent; }
.step__title { margin-top: 22px; font-size: clamp(18px, 1.35vw, 24px); font-weight: 600; line-height: 1.2; }
.step__text { margin-top: 12px; font-size: 15px; line-height: 1.5; color: var(--muted); max-width: 22em; }
@media (max-width: 1023px) {
  .timeline { grid-template-columns: 1fr; row-gap: 44px; padding-left: 44px; }
  .timeline__line, .timeline__fill { left: 10px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; }
  .timeline__fill { transform-origin: 50% 0; transform: scaleY(0); }
  .step__dot { position: absolute; left: -44px; top: 4px; }
  .step__num { margin-top: 0; font-size: clamp(48px, 13vw, 72px); }
  .step__title { margin-top: 12px; }
}

/* =================== 9. FAQ =================== */
.faq__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  row-gap: 48px;
  align-items: start;
}
.faq__head {
  grid-column: 1 / span 6;        /* 6 колонок: слово «вопросы» при кегле H2 занимает ≈ 5.6em */
  position: sticky;
  top: calc(var(--header-h) + 32px);
  display: grid;
  gap: clamp(18px, 2vw, 28px);
  min-width: 0;
}
.faq__list { grid-column: 7 / span 6; }
.faq__item { position: relative; border-top: 1px solid var(--line); }
.faq__item:last-child { border-bottom: 1px solid var(--line); }
.faq__item::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  height: 2px;
  background: var(--grad-brand);
  transform-origin: 0 50%;
  transform: scaleX(0);
  transition: transform .8s var(--ease-out);
}
.faq__item.is-open::before { transform: scaleX(1); }
.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  padding: clamp(22px, 2.2vw, 32px) 0;
  text-align: left;
  font-size: clamp(18px, 1.5vw, 25px);
  font-weight: 600;
  line-height: 1.25;
}
.faq__icon {
  position: relative;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line);
  transition: transform .6s var(--ease-out), background-color .3s, border-color .3s;
}
.faq__icon::before, .faq__icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 1.5px;
  margin: -.75px 0 0 -7px;
  background: currentColor;
}
.faq__icon::after { transform: rotate(90deg); }
.faq__q:hover .faq__icon { border-color: var(--fg); }
.faq__item.is-open .faq__icon { transform: rotate(45deg); background: var(--grad-brand); border-color: transparent; color: var(--c-black); }
.faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .6s var(--ease-out);
}
.faq__item.is-open .faq__a { grid-template-rows: 1fr; }
.faq__a > div { overflow: hidden; min-height: 0; }
.faq__a p { padding: 0 68px clamp(24px, 2.4vw, 34px) 0; color: var(--muted); max-width: 44em; }
@media (max-width: 1023px) {
  .faq__head { grid-column: 1 / -1; position: relative; top: 0; }
  .faq__list { grid-column: 1 / -1; }
  .faq__a p { padding-right: 0; }
}

/* =================== 10. Форма =================== */
.contacts-wrap { padding: 0; }
.contacts {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  background: var(--c-lime);
  color: var(--c-black);
  --fg: #0A0A0A;
  --fg-rgb: 10 10 10;
  --muted: rgb(10 10 10 / .62);
  --line: rgb(10 10 10 / .16);
}
.contacts__canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.contacts__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  row-gap: 56px;
}
.contacts__intro { grid-column: 1 / span 5; display: grid; align-content: start; gap: 28px; min-width: 0; }
.contacts__title { font-size: clamp(36px, 5.2vw, 100px); }
.contacts__lead { color: rgb(10 10 10 / .72); max-width: 30em; }
.contacts__call { display: grid; gap: 6px; margin-top: 12px; }
.contacts__call-label { font-size: var(--fs-small); color: rgb(10 10 10 / .62); }
.contacts__phone {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(26px, 2.6vw, 44px);
  letter-spacing: -0.02em;
  width: fit-content;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat;
  transition: background-size .6s var(--ease-out);
}
.contacts__phone:hover { background-size: 100% 1.5px; }
.contacts__form-wrap { grid-column: 7 / span 6; position: relative; }

.form { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 16px; }
.form__full { grid-column: 1 / -1; }
.field { position: relative; display: grid; gap: 8px; align-content: start; }
.field__label { font-size: 13px; font-weight: 600; }
.input {
  width: 100%;
  height: 58px;
  padding: 0 18px;
  border-radius: 16px;
  border: 1.5px solid transparent;
  background:
    linear-gradient(rgb(255 255 255 / .58), rgb(255 255 255 / .58)) padding-box,
    linear-gradient(rgb(10 10 10 / .1), rgb(10 10 10 / .1)) border-box;
  font-size: 16px;
  color: var(--c-black);
  transition: background .3s, box-shadow .3s;
  -webkit-appearance: none;
  appearance: none;
}
.input::placeholder { color: rgb(10 10 10 / .42); }
.input:hover { background: linear-gradient(rgb(255 255 255 / .7), rgb(255 255 255 / .7)) padding-box, linear-gradient(rgb(10 10 10 / .22), rgb(10 10 10 / .22)) border-box; }
.input:focus, .input:focus-visible {
  outline: none;
  border-radius: 16px;
  background:
    linear-gradient(rgb(255 255 255 / .92), rgb(255 255 255 / .92)) padding-box,
    linear-gradient(110deg, #0A0A0A 0%, var(--c-turquoise) 55%, var(--c-lime) 100%) border-box;
  box-shadow: 0 10px 30px -12px rgb(10 10 10 / .35);
}
textarea.input { height: 132px; padding-top: 16px; resize: vertical; line-height: 1.45; }
select.input {
  padding-right: 48px;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%230A0A0A' stroke-width='1.6'><path d='M2 5l5 5 5-5'/></svg>"),
    linear-gradient(rgb(255 255 255 / .58), rgb(255 255 255 / .58)),
    linear-gradient(rgb(10 10 10 / .1), rgb(10 10 10 / .1));
  background-repeat: no-repeat;
  background-position: right 20px center, 0 0, 0 0;
  background-origin: border-box, padding-box, border-box;
  background-clip: border-box, padding-box, border-box;
  cursor: pointer;
}
.field.is-invalid .input {
  background:
    linear-gradient(rgb(255 255 255 / .75), rgb(255 255 255 / .75)) padding-box,
    linear-gradient(#B3261E, #B3261E) border-box;
}
.field__error {
  min-height: 0;
  font-size: 13px;
  font-weight: 500;
  color: #9E1C14;
}
.field__error:empty { display: none; }

.check-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.check-chip { position: relative; }
.check-chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.check-chip span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 18px;
  border-radius: var(--pill);
  background: rgb(255 255 255 / .5);
  border: 1px solid rgb(10 10 10 / .12);
  font-size: 14px;
  font-weight: 500;
  transition: background .3s, color .3s, border-color .3s, transform .4s var(--ease-out);
  pointer-events: none;
}
.check-chip span::before {
  content: "";
  width: 0;
  height: 8px;
  border-radius: 50%;
  background: var(--grad-brand);
  transition: width .35s var(--ease-out), margin .35s var(--ease-out);
  margin-left: -8px;
}
.check-chip:hover span { border-color: rgb(10 10 10 / .4); }
.check-chip input:checked + span { background: var(--c-black); color: var(--c-white); border-color: transparent; }
.check-chip input:checked + span::before { width: 8px; margin-left: 0; }
.check-chip input:focus-visible + span { outline: 2px solid var(--c-black); outline-offset: 3px; }

.consent { display: flex; gap: 14px; align-items: flex-start; font-size: 14px; line-height: 1.45; cursor: pointer; }
.consent input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.consent__box {
  flex: none;
  width: 24px;
  height: 24px;
  margin-top: -1px;
  border-radius: 7px;
  border: 1.5px solid rgb(10 10 10 / .5);
  background: rgb(255 255 255 / .6);
  display: grid;
  place-items: center;
  transition: background .3s, border-color .3s;
}
.consent__box svg { width: 14px; height: 14px; opacity: 0; transform: scale(.5); transition: opacity .25s, transform .4s var(--ease-out); color: var(--c-white); }
.consent input:checked + .consent__box { background: var(--c-black); border-color: var(--c-black); }
.consent input:checked + .consent__box svg { opacity: 1; transform: none; }
.consent input:focus-visible + .consent__box { outline: 2px solid var(--c-black); outline-offset: 3px; }
.consent a { text-decoration: underline; text-underline-offset: 3px; }
.field.is-invalid .consent__box { border-color: #B3261E; }

.form__submit { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 6px; }
.form__submit .btn { --btn-bg: var(--c-black); --btn-fg: var(--c-white); min-width: 230px; }
.form__req { font-size: 13px; color: rgb(10 10 10 / .6); }
.form__status { grid-column: 1 / -1; font-size: 15px; font-weight: 500; }
.form__status:empty { display: none; }
.form__status.is-error { padding: 14px 18px; border-radius: 14px; background: rgb(255 255 255 / .6); color: #9E1C14; }
.form__status a { text-decoration: underline; }
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }

.success {
  display: grid;
  align-content: center;
  gap: 20px;
  min-height: 100%;
  padding: clamp(24px, 3vw, 48px);
  border-radius: 28px;
  background: rgb(255 255 255 / .55);
}
.success__icon { width: 72px; height: 72px; border-radius: 50%; background: var(--c-black); color: var(--c-lime); display: grid; place-items: center; }
.success__icon svg { width: 30px; height: 30px; }
.success__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(26px, 2.6vw, 42px); line-height: 1.05; letter-spacing: -0.02em; }
@media (max-width: 1023px) {
  .contacts__intro, .contacts__form-wrap { grid-column: 1 / -1; }
}
@media (max-width: 599px) {
  .form { grid-template-columns: 1fr; }
  .form__submit .btn { width: 100%; }
}

/* =================== 11. Подвал «из-под сайта» =================== */
.footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  color: var(--c-white);
  background: var(--c-black);
  overflow: hidden;
}
.footer.is-static { position: relative; }
.footer__inner { position: relative; padding-top: clamp(64px, 8vw, 128px); will-change: transform; }
.footer__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  row-gap: 48px;
}
.footer__cta { grid-column: 1 / span 6; display: grid; gap: 18px; align-content: start; }
.footer__label {
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: rgb(255 255 255 / .5);
}
.footer__phone-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
.footer__phone {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(32px, 4.2vw, 80px);
  line-height: 1;
  letter-spacing: -0.035em;
  white-space: nowrap;
}
.copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 18px;
  border-radius: var(--pill);
  border: 1px solid rgb(255 255 255 / .28);
  font-size: 13px;
  font-weight: 600;
  transition: background .3s, color .3s, border-color .3s;
}
.copy-btn:hover { background: var(--c-white); color: var(--c-black); }
.copy-btn.is-done { background: var(--grad-brand); color: var(--c-black); border-color: transparent; }
.footer__email { font-size: 16px; color: rgb(255 255 255 / .75); }
.footer__col { display: grid; gap: 14px; align-content: start; }
.footer__col--sections { grid-column: 8 / span 2; }
.footer__col--services { grid-column: 10 / span 3; }
.footer__col ul { display: grid; gap: 6px; }
.footer__col a, .footer__col button { font-size: 15px; font-weight: 500; color: rgb(255 255 255 / .86); text-align: left; transition: color .3s; }
.footer__col a:hover, .footer__col button:hover { color: var(--c-lime); }

.footer__giant {
  display: flex;
  justify-content: space-between;
  margin-top: clamp(40px, 6vw, 110px);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--giant-fs, 17vw);
  line-height: .78;
  letter-spacing: -0.02em;
  user-select: none;
  color: var(--c-white);
}
.footer__giant span {
  display: inline-block;
  font-variation-settings: "wght" var(--w, 800);
  transform: translateY(var(--ty, 0)) scaleY(var(--sy, 1));
  transform-origin: 50% 100%;
  will-change: transform;
}
.footer__giant span:nth-child(odd) { color: var(--c-white); }
.footer__bottom {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 24px;
  margin-top: clamp(28px, 3vw, 48px);
  padding-block: 22px max(22px, env(safe-area-inset-bottom));
  font-size: 13px;
  color: rgb(255 255 255 / .55);
}
.footer__bottom::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--c-turquoise), var(--c-lime), transparent 95%);
}
.footer__bottom a:hover { color: var(--c-white); }
@media (max-width: 1023px) {
  .footer__cta { grid-column: 1 / -1; }
  .footer__col--sections { grid-column: 1 / span 6; }
  .footer__col--services { grid-column: 7 / span 6; }
}
@media (max-width: 559px) {
  .footer__col--sections, .footer__col--services { grid-column: 1 / -1; }
}

/* =================== Политика конфиденциальности =================== */
.privacy { min-height: 100vh; padding-top: calc(var(--header-h) + var(--section-y) * .6); }
.privacy__inner { display: grid; gap: clamp(24px, 3vw, 44px); max-width: 1100px; }
.privacy__title { font-size: clamp(40px, 6.4vw, 112px); }
.privacy__text { font-size: clamp(17px, 1.3vw, 21px); color: var(--muted); }
.privacy .drop { right: 2vw; top: -16vh; width: clamp(110px, 14vw, 260px); }
.privacy { padding-bottom: var(--section-y); }

/* Текст страниц, которые собирает админка: политика, кейсы, свои страницы */
.doc__body { max-width: 820px; font-size: var(--fs-body); line-height: 1.6; }
.doc__body > * + * { margin-top: 1em; }
.doc__body h2 { font-family: var(--font-display); font-size: clamp(24px, 2.4vw, 40px); line-height: 1.1; letter-spacing: -0.02em; margin-top: 1.6em; }
.doc__body h3 { font-family: var(--font-display); font-size: clamp(19px, 1.6vw, 26px); line-height: 1.2; margin-top: 1.4em; }
.doc__body h4 { font-weight: 700; margin-top: 1.2em; }
.doc__body > :first-child { margin-top: 0; }
.doc__body ul { list-style: disc; padding-left: 1.3em; }
.doc__body ol { list-style: decimal; padding-left: 1.3em; }
.doc__body li + li { margin-top: .4em; }
.doc__body a { color: inherit; text-decoration: underline; text-decoration-color: var(--c-turquoise); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.doc__body blockquote { padding-left: 1em; border-left: 3px solid var(--c-turquoise); font-size: 1.15em; }
.doc__body .doc__note { padding: 18px 22px; border-radius: var(--radius); background: var(--ph); }
.doc__body img { display: block; max-width: 100%; height: auto; border-radius: var(--radius); }
.doc__body figcaption { font-size: var(--fs-small); color: var(--muted); margin-top: .6em; }
.doc__body table { border-collapse: collapse; width: 100%; font-size: .9em; }
.doc__body th, .doc__body td { border-bottom: 1px solid var(--line); padding: .6em .8em .6em 0; text-align: left; vertical-align: top; }
.doc__body hr { border: 0; border-top: 1px solid var(--line); margin: 2em 0; }
.doc__cover { aspect-ratio: 16 / 9; max-width: 1100px; }

/* =================== Reduced motion =================== */
@media (prefers-reduced-motion: reduce) {
  .drop__float, .glow, .hero__scroll::after { animation: none; }
}

/* Услуги: закреплённая сцена центрируется по высоте экрана */
@media (min-width: 1024px) {
  .services__pin { min-height: 100vh; display: flex; align-items: center; }
  .services__pin > .container { width: 100%; }
  .services .sec-head { margin-bottom: 0; }
}

/* Капли у заголовков на мобильном — в правом верхнем углу, чтобы не перекрывать текст */
@media (max-width: 767px) {
  .sec-head .drop, .faq__head .drop {
    left: auto !important;
    right: 0 !important;
    top: -64px !important;
    width: 46px !important;
  }
}

/* prefers-reduced-motion: без pin-сценариев шоурил — обычная карточка 16:9 */
.no-motion .showreel { padding-inline: var(--gutter); }
.no-motion .showreel__stage { height: auto; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; }
.no-motion .showreel__frame { --it: 0px !important; --il: 0px !important; --r: 0px; }
.no-motion .showreel__media { transform: none; }
.no-motion .showreel__tag--tl { top: 18px; left: 20px; }
.no-motion .showreel__tag--br { bottom: 18px; right: 20px; }

/* Как мы работаем: закреплённая сцена должна целиком помещаться по высоте */
@media (min-width: 1024px) {
  .process .h2 { font-size: min(var(--fs-h2), 10.5vh); }
  .process .sec-head { margin-bottom: clamp(32px, 6vh, 96px); }
  .process .step__num { font-size: min(clamp(56px, 6vw, 112px), 11vh); }
  .process .step__num { margin-top: clamp(20px, 3.4vh, 56px); }
}

/* разделитель тысяч в «Преимуществах» */
.stat__gap { margin-left: .14em; letter-spacing: 0; }

@media (max-width: 767px) {
  .privacy .drop { display: none; }
}