/* ═══════════════════════════════════════════════════════════════════
   TELFI 3.0 — стили сайта (Figma: telfi.pro 3.0)

   · акцент — оранжевый #EF8D1E, тёмные зоны — ink #070B14
   · заголовки — Unbounded, текст — Nunito Sans (локальные шрифты)
   · отступы резиновые: значения макета при 1440 × clamp() для меньших
     и больших десктопов; видео и картинки блока заявки не масштабируются
   · всё, что меняет состояние, меняет его анимацией
   ═══════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* ── Цвета (переменные макета) ── */
  --bg:          #ffffff;
  --bg-70:       rgba(255, 255, 255, .7);
  --zone:        #f3f3f3;
  --zone-2:      #e4e4e4;
  --ink:         #070b14;
  --ink-hover:   #382f28;
  --text:        #080d16;
  --text-3:      #535861;
  --text-4:      #83868c;
  --on-ink:      #f6f5f1;
  --card-dark:   #0f171f;          /* color/hero-bg */
  --band:        #0c1219;          /* #0f171f + 20% чёрного, как в макете */
  --accent:      #ef8d1e;
  --accent-hover:#ce740e;
  --light-hover: #d0cec8;
  --accent-tint: #ffedd8;
  --accent-deep: #722c00;
  --on-dark-cat: #dbd3c6;
  --lang-sep:    #cecece;
  --lang-off:    #8f8f8f;

  /* ── Радиусы ── */
  --r-pill:  999px;
  --r-card:  24px;
  --r-zone:  20px;
  --r-input: 14px;
  --r-modal: 28px;
  --r-hero:  32px;

  /* ── Тени ── */
  --sh-soft:  0 16px 32px -16px rgba(17, 22, 31, .14);
  --sh-lift:  0 32px 60px -20px rgba(17, 22, 31, .35);
  --sh-modal: 0 40px 80px -20px rgba(17, 22, 31, .3);

  /* ── Резиновые отступы: значение при 1440 = середина clamp ── */
  --px:        clamp(24px, 4.444vw, 112px);   /* 64  — поля страницы */
  --sec:       clamp(96px, 11.111vw, 220px);  /* 160 — между секциями */
  --hero-pb:   clamp(24px, 2.778vw, 56px);    /* 40  — низ хиро */
  --dark-pt:   clamp(56px, 5.972vw, 120px);   /* 86  */
  --dark-pb:   clamp(140px, 13.889vw, 260px); /* 200 */
  --dark-gap:  clamp(96px, 11.111vw, 220px);  /* 160 — до «Простого процесса» */
  --dark-r:    clamp(32px, 3.889vw, 72px);    /* 56  */
  --g40:       clamp(28px, 2.778vw, 52px);    /* 40  */
  --card-pad:  clamp(28px, 2.778vw, 48px);    /* 40  */
  --fan-lap:   clamp(88px, 9.375vw, 180px);   /* 135 — веер заходит на тёмный блок */
  --band-py:   clamp(56px, 5.972vw, 120px);   /* 86  */
  --band-px:   clamp(28px, 4.028vw, 80px);    /* 58  */

  /* ── Типографика ── */
  --f-display: 'Unbounded', sans-serif;
  --f-text:    'Nunito Sans', sans-serif;
  --h1:        clamp(40px, 4.028vw, 80px);    /* 58 */

  /* ── Motion ── */
  --e-out:   cubic-bezier(.16, 1, .3, 1);
  --e-inout: cubic-bezier(.65, 0, .35, 1);    /* «ease in and out» из ТЗ */

  /* ── Сцена: длина прокрутки видео и «перелистывания» (FLIP в v3.js) ── */
  --scene-d: 260vh;
  --flip-d:  145vh;
}

html { scroll-behavior: smooth; -webkit-tap-highlight-color: transparent; }   /* без синей подсветки при нажатии на телефоне */
html, body { overflow-x: clip; }

body {
  font-family: var(--f-text);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; border: none; background: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

.wrap { padding-left: var(--px); padding-right: var(--px); max-width: 1920px; margin: 0 auto; }

.h2 {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 40px;
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* Заголовок только для поиска и экранных дикторов — на странице не виден */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
address { font-style: normal; }


/* ═══════════════════════════════════════════════════
   КНОПКИ (Figma: Button 2)
   ═══════════════════════════════════════════════════ */
.b3 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 30px;
  border-radius: var(--r-pill);
  font-family: var(--f-text);
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
  white-space: nowrap;
  transition:
    background-color .3s var(--e-inout),
    color .3s var(--e-inout),
    box-shadow .3s var(--e-inout),
    transform .3s var(--e-out);
}
.b3:active { transform: scale(.97); }
.b3--s { padding: 12px 20px; font-size: 13px; }

.b3--ink     { background: var(--ink); color: var(--on-ink); }
@media (hover: hover) and (pointer: fine) {
.b3--ink:hover { background: var(--ink-hover); }
}

.b3--accent  { background: var(--accent); color: #fff; }
@media (hover: hover) and (pointer: fine) {
.b3--accent:hover { background: var(--accent-hover); }
}

.b3--light   { background: var(--on-ink); color: var(--text); }
@media (hover: hover) and (pointer: fine) {
.b3--light:hover { background: var(--light-hover); }
}

/* Обводка «внутрь», как в макете: размер кнопки не меняется */
.b3--outline { background: var(--bg); color: var(--text); box-shadow: inset 0 0 0 1.5px var(--ink); }
@media (hover: hover) and (pointer: fine) {
.b3--outline:hover { background: var(--ink); color: var(--on-ink); }
}

/* Тихая кнопка — без акцента, светло-серая (например, «Не принимать» в плашке cookie) */
.b3--quiet   { background: var(--zone); color: var(--text-3); }
@media (hover: hover) and (pointer: fine) {
.b3--quiet:hover { background: var(--zone-2); color: var(--text); }
}

.b3--hero    { width: 210px; height: 80px; padding: 12px 20px; font-size: 13px; }
.b3--block   { width: 100%; }
.b3--submit  { width: 320px; max-width: 100%; }
.b3:disabled { opacity: .7; cursor: default; }


/* ═══════════════════════════════════════════════════
   ШАПКА (Figma: Header 2)
   ═══════════════════════════════════════════════════ */
.hdr {
  position: fixed;
  top: 16px;
  left: var(--px);
  right: var(--px);
  max-width: calc(1920px - 2 * var(--px));
  margin: 0 auto;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px clamp(24px, 2.778vw, 48px);
  border-radius: var(--r-pill);
  background: var(--bg-70);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  transition: box-shadow .4s var(--e-inout), background-color .4s var(--e-inout), transform .6s var(--e-out);
}
.hdr.is-scrolled { box-shadow: var(--sh-soft); background: rgba(255, 255, 255, .82); }
/* Скролл вниз — шапка уезжает вверх, скролл вверх — возвращается */
.hdr.is-hidden:not(:focus-within) { transform: translateY(calc(-100% - 24px)); box-shadow: none; }

.hdr-logo, .ftr-logo {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--text);
  white-space: nowrap;
}
.hdr-brace { color: var(--accent); display: inline-block; transition: transform .4s var(--e-out); }
@media (hover: hover) and (pointer: fine) {
.hdr-logo:hover .hdr-brace:first-child, .ftr-logo:hover .hdr-brace:first-child { transform: translateX(-3px); }
.hdr-logo:hover .hdr-brace:last-child,  .ftr-logo:hover .hdr-brace:last-child  { transform: translateX(3px); }
}

.hdr-start { display: flex; align-items: center; gap: 12px; }
.hdr-nav { display: flex; gap: 24px; }
.hdr-nav-extra { display: none; }   /* язык и Telegram в выпадающем меню — только на узких экранах */

/* Бургер (Figma: 390/Header): три линии складываются в крестик */
.hdr-burger { display: none; position: relative; width: 24px; height: 24px; flex: none; }
.hdr-burger span {
  position: absolute;
  left: 3px;
  right: 3px;
  height: 2px;
  border-radius: 2px;
  background: var(--text);
  transition: transform .45s var(--e-out), opacity .25s var(--e-inout);
}
.hdr-burger span:nth-child(1) { top: 6px; }
.hdr-burger span:nth-child(2) { top: 11px; }
.hdr-burger span:nth-child(3) { top: 16px; }
.hdr.is-menu .hdr-burger span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.hdr.is-menu .hdr-burger span:nth-child(2) { opacity: 0; transform: scaleX(.2); }
.hdr.is-menu .hdr-burger span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }
.hdr-link {
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  color: var(--text);
  transition: color .3s var(--e-inout);
}
.hdr-link.is-active { color: var(--accent); }
@media (hover: hover) and (pointer: fine) {
.hdr-link:hover { color: var(--accent); }
}

.hdr-side { display: flex; align-items: center; gap: 14px; }

.lang { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 13px; line-height: 1; }
.lang-btn { color: var(--lang-off); font-weight: 700; transition: color .3s var(--e-inout); }
.lang-btn.active { color: var(--text); }
@media (hover: hover) and (pointer: fine) {
.lang-btn:hover { color: var(--text); }
}
.lang-sep { color: var(--lang-sep); }


/* ═══════════════════════════════════════════════════
   СЦЕНА: видео по скроллу, хиро и «О студии»
   ═══════════════════════════════════════════════════ */
/* Высота = экран + длина проигрывания видео + экран «перелистывания»:
   тёмный круг растёт снизу и заливает закреплённую сцену. */
.scene { position: relative; height: calc(100vh + var(--scene-d) + var(--flip-d)); height: calc(100svh + var(--scene-d) + var(--flip-d)); }
/* «Остановка» второго блока (STATION в v3.js): когда блок начинает
   проявляться, страница сама докручивает сюда и держит прокрутку,
   пока контент не появится целиком */
.scene .anchor {
  position: absolute;
  left: 0;
  top: calc(var(--scene-d) + 25vh);
  top: calc(var(--scene-d) + 25svh);
  width: 1px;
  height: 1px;
  scroll-margin-top: 0;
}

.scene-pin {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: var(--bg);
}

/* Круг перелистывания: шарик выглядывает из-под нижнего края, растёт
   и поднимается к 73% высоты, пока не зальёт экран (как в референсе).
   Живёт внутри закреплённой сцены — поэтому ничем не обрезается. */
.scene-circle {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: var(--ink);
  pointer-events: none;
  clip-path: circle(var(--c-r, 0px) at 50% var(--c-y, 110%));
  will-change: clip-path;
}

/* Видео — на всю высоту экрана, прижато к низу; по ширине не масштабируется */
.scene-media { position: absolute; inset: 0; }
.scene-video {
  position: absolute;
  bottom: 0;
  left: 50%;
  height: 100%;
  width: auto;
  max-width: none;
  transform: translateX(-50%);
}

/* ── Хиро ── */
.hero {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding: 0 var(--px) var(--hero-pb);
  pointer-events: none;
}
.hero > * { pointer-events: auto; }

.hero-main { display: flex; flex-direction: column; align-items: flex-start; gap: var(--g40); }

/* Белый текст в режиме «исключение»: на белом фоне — чёрный,
   поверх видео — инверсия, как в макете. */
.hero-title {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--h1);
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: #fff;
  mix-blend-mode: exclusion;
}
.hero-line { display: block; overflow: hidden; white-space: nowrap; padding-bottom: .04em; }
.hero-line > span { display: inline-block; }

.hero-side {
  width: 316px;
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(96px, 13.889vw, 260px);   /* 200 */
}
.hero-sub {
  width: 232px;
  font-weight: 500;
  font-size: 18px;
  line-height: 1.2;
  color: var(--text-3);
}

/* Скролл-анимация хиро: v3.js пишет --hy (сдвиг) и --ho (прозрачность) */
[data-hero-el] {
  transform: translate3d(0, var(--hy, 0px), 0);
  opacity: var(--ho, 1);
  will-change: transform, opacity;
}

/* ── Круглая кнопка (Figma: Round button) ── */
.round {
  position: relative;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  overflow: hidden;
  color: var(--text);
  box-shadow: inset 0 0 0 1px var(--ink);
  isolation: isolate;
  padding-top: 14px;                  /* надпись со стрелкой чуть ниже центра — визуально по середине круга */
  transition: color .45s var(--e-inout);
}
.round-fill {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--ink);
  transform: scale(0);
  transition: transform .55s var(--e-inout);
  z-index: -1;
}
.round-label { font-weight: 700; font-size: 15px; line-height: 1; }
.round-arrow {
  width: 26px;
  height: 24px;
  background: currentColor;
  -webkit-mask: url(/images/v3/ic-arrow.svg) center / contain no-repeat;
  mask: url(/images/v3/ic-arrow.svg) center / contain no-repeat;
  transition: transform .45s var(--e-out);
}
@media (hover: hover) and (pointer: fine) {
.round:hover { color: var(--on-ink); }
.round:hover .round-fill { transform: scale(1); }
.round:hover .round-arrow { transform: translate(3px, -3px); }
}

/* ── Второй блок: проявляется справа в конце видео (dissolve) ── */
.about {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(648px, calc(50% - var(--px)));
  transform: translateY(calc(-50% + var(--ay, 0px)));
  opacity: var(--ao, 1);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  pointer-events: none;
}
.about-title { width: 100%; }
.about-text {
  width: min(480px, 100%);
  margin-top: 32px;
  font-weight: 500;
  font-size: 18px;
  line-height: 1.2;
  color: var(--text-4);
}
/* Уходит быстро (прокрутили назад к хиро — блок не висит поверх него),
   появляется медленно и по очереди */
.about > * {
  opacity: 0;
  filter: blur(14px);
  transform: scale(1.03);
  transition: opacity .3s var(--e-inout), filter .3s var(--e-inout), transform .3s var(--e-inout);
}
.about.is-on { pointer-events: auto; }
.about.is-on > * {
  opacity: 1;
  filter: blur(0);
  transform: none;
  transition: opacity 1s var(--e-inout), filter 1s var(--e-inout), transform 1.2s var(--e-out);
}
.about.is-on > :nth-child(2) { transition-delay: .15s; }
.about.is-on > :nth-child(3) { transition-delay: .3s; }
/* Сюрикен под текстом — только на телефоне: проявляется последним и всё время вращается */
.about-star { display: none; width: 102px; height: 100px; margin-top: 32px; animation: shurikenSpin 7s linear infinite; }


/* ═══════════════════════════════════════════════════
   ТЁМНЫЙ БЛОК: услуги + процесс
   Идёт сразу за сценой: к этому моменту круг уже залил экран тем же
   цветом, поэтому переход бесшовный.
   ═══════════════════════════════════════════════════ */
.dark {
  position: relative;
  z-index: 2;
  /* Заходит на перелистывание: к полной заливке заголовок стоит примерно
     на 38% высоты экрана — без пустоты над ним. Блок обрезан тем же кругом,
     что и сцена (v3.js пересчитывает центр в координаты блока), поэтому
     контент виден только на тёмном; выезжает, когда его накрыл круг. */
  margin-top: calc(-62vh - var(--dark-pt));
  margin-top: calc(-62svh - var(--dark-pt));
  color: var(--on-ink);
  clip-path: circle(var(--r, 0px) at 50% var(--cy, 100%));
}
.dark.is-full { clip-path: none; }
.dark-bg {
  position: absolute;
  inset: 0;
  background: var(--ink);
  border-radius: 0 0 var(--dark-r) var(--dark-r);
}

.dark-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--dark-gap);
  padding-top: var(--dark-pt);
  padding-bottom: var(--dark-pb);
}

.dark-services { display: flex; flex-direction: column; gap: var(--g40); scroll-margin-top: var(--dark-pt); }  /* якорь = момент полной заливки */

.svc-head { display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.svc-title { width: 380px; flex: none; }
.svc-head-side { display: flex; align-items: center; gap: clamp(40px, 8.681vw, 160px); }  /* 125 */
.svc-intro { width: 397px; font-weight: 500; font-size: 18px; line-height: 1.2; opacity: .8; }

/* Сетка: первая строка 900 + остаток, вторая — три равные */
.svc-grid { display: flex; flex-wrap: wrap; gap: 16px; }
.svc-card {
  flex: 1 1 calc((100% - 32px) / 3);
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: var(--card-pad);
  border-radius: var(--r-card);
  background: var(--card-dark);
}
.svc-card--wide { flex: 0 0 calc((100% - 16px) * 900 / 1296); }
.svc-card--wide + .svc-card { flex: 1 1 0; }

.svc-card-top { display: flex; justify-content: space-between; align-items: flex-start; }
.svc-num { font-family: var(--f-display); font-size: 13px; line-height: 1.2; color: var(--text-4); }
.tag3 {
  padding: 6px 14px;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: #fff;
  font-weight: 800;
  font-size: 12px;
  line-height: 1;
  letter-spacing: .04em;
}
.svc-card-body { display: flex; flex-direction: column; gap: 14px; }
.svc-card-title {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--on-ink);
}
.svc-card-desc { font-size: 15px; line-height: 1.2; color: var(--text-4); }

/* Тексты выезжают с разных сторон, карточки кладутся «кирпичиками» */
[data-lit] {
  opacity: 0;
  transition: opacity .5s var(--e-inout) var(--d, 0s), transform .6s var(--e-inout) var(--d, 0s);
}
[data-lit="left"]  { transform: translateX(-90px); }
[data-lit="right"] { transform: translateX(90px); }
[data-lit].b3 { transition: opacity .5s var(--e-inout) var(--d, 0s), transform .6s var(--e-inout) var(--d, 0s), background-color .3s var(--e-inout), color .3s var(--e-inout); }

/* «Кирпичики»: карточки быстро поднимаются снизу и встают на место —
   сначала верхний ряд, затем достраивается нижний (порядок в --i) */
[data-brick] {
  opacity: 0;
  transform: translateY(36vh);
  transition:
    opacity .25s var(--e-inout) calc(var(--i) * .06s),
    transform .55s var(--e-inout) calc(var(--i) * .06s);
}
.dark.is-lit [data-lit],
.dark.is-bricks [data-brick] { opacity: 1; transform: none; }

/* ── Процесс ── */
.proc { display: flex; justify-content: space-between; align-items: flex-start; gap: 32px; scroll-margin-top: 120px; }
.proc-side { display: flex; flex-direction: column; align-items: flex-start; gap: var(--g40); width: 648px; max-width: 50%; }
.proc-steps {
  width: 648px;
  flex: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px 16px;
}
.step3 { display: flex; gap: 20px; align-items: flex-start; }
.step3-ic { width: 32px; height: 32px; flex: none; background: var(--ic) center / contain no-repeat; }
.step3-body { display: flex; flex-direction: column; gap: 10px; }
.step3-title {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--on-ink);
}
.step3-desc { font-size: 14px; line-height: 1.2; color: var(--text-4); }


/* ═══════════════════════════════════════════════════
   ПРОЕКТЫ — веер карточек (Figma: Case card homepage)
   ═══════════════════════════════════════════════════ */
.fan-sec { position: relative; z-index: 3; margin-top: calc(-1 * var(--fan-lap)); scroll-margin-top: 120px; }

.fan { position: relative; width: 100%; max-width: 1480px; margin: 0 auto; aspect-ratio: 1313 / 398; }

.fan-card {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 24.75%;                      /* 325 из 1313 */
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 6px;
  padding: 22px;
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--zone);
  box-shadow: 0 0 0 4px #fff;         /* обводка 4px снаружи */
  transform: translate(-50%, -50%) rotate(var(--rot));
  transition:
    transform .7s var(--e-inout),
    box-shadow .7s var(--e-inout),
    opacity .6s var(--e-inout);
  isolation: isolate;
}
.fan-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  transition: transform .9s var(--e-inout);
}
.fan-shade {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(1, 3, 9, .78), rgba(1, 3, 9, 0) 55%);
  transition: opacity .6s var(--e-inout);
}
.fan-title { font-family: var(--f-display); font-weight: 600; font-size: 17px; line-height: 1.15; color: var(--on-ink); }
.fan-cat { font-size: 13px; line-height: 1.2; color: var(--on-dark-cat); }

/* Появление: карточки вылетают снизу и раскладываются веером */
.fan:not(.is-in) .fan-card { opacity: 0; transform: translate(-50%, 10%) rotate(0deg) scale(.9); }
.fan.is-in:not(.is-ready) .fan-card { transition-delay: calc(var(--i) * .12s); }

/* Наведение: карточка выпрямляется, поднимается и выходит вперёд */
.fan-card:focus-visible {
  z-index: 5;
  transform: translate(-50%, -50%) translateY(-14px) rotate(0deg) scale(1.07);
  box-shadow: 0 0 0 4px #fff, var(--sh-lift);
  outline: none;
}
@media (hover: hover) and (pointer: fine) {
.fan-card:hover {
  z-index: 5;
  transform: translate(-50%, -50%) translateY(-14px) rotate(0deg) scale(1.07);
  box-shadow: 0 0 0 4px #fff, var(--sh-lift);
  outline: none;
}
}
.fan-card:focus-visible .fan-img { transform: scale(1.08); }
@media (hover: hover) and (pointer: fine) {
.fan-card:hover .fan-img { transform: scale(1.08); }
.fan-card:hover .fan-shade { opacity: .85; }
}

.fan-actions { display: flex; justify-content: center; margin-top: 24px; }


/* ═══════════════════════════════════════════════════
   FAQ
   ═══════════════════════════════════════════════════ */
.faq3 { padding-top: var(--sec); scroll-margin-top: 80px; }
.faq3-layout { display: flex; gap: 48px; align-items: flex-start; scroll-margin-top: 120px; }   /* якорь #faq: заголовок встаёт под шапкой */
.faq3-aside { width: 340px; flex: none; display: flex; flex-direction: column; gap: 20px; }
.faq3-intro { font-weight: 500; font-size: 19px; line-height: 1.2; color: var(--text-3); }
.faq3-list { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 12px; }

.qa {
  background: var(--zone);
  border-radius: var(--r-zone);
  padding: 24px 28px;
  transition:
    opacity .8s var(--e-inout) var(--d, 0s),
    transform .9s var(--e-out) var(--d, 0s);
}
/* всегда открыты: вопрос и ответ, без переключателя */
.qa-q {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.3;
  color: var(--text);
}
.qa-a { padding-top: 14px; font-size: 15px; line-height: 1.2; color: var(--text-3); }


/* ═══════════════════════════════════════════════════
   ЗАЯВКА (Figma: CTA band + Lead form)
   ═══════════════════════════════════════════════════ */
.cta3 { padding-top: var(--sec); scroll-margin-top: 110px; }
.cta3 .wrap { position: relative; }

.cta3-band {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--band-py) var(--band-px);
  border-radius: var(--r-hero);
  background: var(--band);
  color: var(--on-ink);
}
.cta3-title { width: min(648px, 100%); }
.cta3-sub { width: min(520px, 100%); margin: 20px 0 48px; font-size: 17px; line-height: 1.5; }
.cta3-form { width: min(648px, 100%); }

/* ── Форма ── */
.lead { display: flex; flex-direction: column; align-items: center; gap: 14px; transition: opacity .4s var(--e-inout); }
.lead-row { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.fld {
  width: 100%;
  height: 50px;
  padding: 16px 18px;
  border: none;
  border-radius: var(--r-input);
  background: var(--zone);
  color: var(--text);
  font-family: var(--f-text);
  font-weight: 500;
  font-size: 15px;
  line-height: 1;
  transition: background-color .3s var(--e-inout), box-shadow .3s var(--e-inout);
}
.fld::placeholder { color: var(--text-4); transition: color .3s var(--e-inout); }
@media (hover: hover) and (pointer: fine) {
.fld:hover { background: #ececec; }
}
.fld:focus { outline: none; background: var(--zone-2); }
.fld--area { height: 86px; resize: none; line-height: 1.2; }

.lead--dark .fld { background: rgba(243, 243, 243, .1); color: var(--on-ink); }
.lead--dark .fld::placeholder { color: var(--on-ink); }
@media (hover: hover) and (pointer: fine) {
.lead--dark .fld:hover { background: rgba(243, 243, 243, .14); }
}
.lead--dark .fld:focus { background: rgba(243, 243, 243, .2); }
.lead--dark .fld:focus::placeholder { color: rgba(246, 245, 241, .55); }

.lead-note { width: 100%; font-size: 12px; line-height: 1.2; text-align: center; color: var(--text-3); }
.lead--dark .lead-note { color: var(--on-ink); }
.lead-note a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color .3s var(--e-inout);
}
@media (hover: hover) and (pointer: fine) {
.lead-note a:hover { color: var(--accent-hover); }
}

/* ── Согласие на обработку данных: по умолчанию снято, без него форма не уходит ── */
.consent {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  cursor: pointer;
  font-size: 12px;
  line-height: 1.2;
  color: var(--text-3);
}
.lead--dark .consent { color: var(--on-ink); }
.consent-input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.consent-box {
  position: relative;
  width: 18px;
  height: 18px;
  flex: none;
  border-radius: 5px;
  box-shadow: inset 0 0 0 1.5px var(--text-4);
  transition: background-color .25s var(--e-inout), box-shadow .25s var(--e-inout);
}
.lead--dark .consent-box { box-shadow: inset 0 0 0 1.5px rgba(246, 245, 241, .5); }
@media (hover: hover) and (pointer: fine) {
.consent:hover .consent-box { box-shadow: inset 0 0 0 1.5px var(--text-3); }
.lead--dark .consent:hover .consent-box { box-shadow: inset 0 0 0 1.5px rgba(246, 245, 241, .85); }
}
.consent-box::after {
  content: '';
  position: absolute;
  left: 6px;
  top: 2.5px;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0);
  transition: transform .3s var(--e-out);
}
.consent-input:checked + .consent-box,
.lead--dark .consent-input:checked + .consent-box { background: var(--accent); box-shadow: inset 0 0 0 1.5px var(--accent); }
.consent-input:checked + .consent-box::after { transform: rotate(45deg) scale(1); }
.consent-input:focus-visible + .consent-box { outline: 2px solid var(--accent); outline-offset: 2px; }
.consent a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; transition: color .3s var(--e-inout); }
@media (hover: hover) and (pointer: fine) {
.consent a:hover { color: var(--accent-hover); }
}
.consent.is-error .consent-box,
.lead--dark .consent.is-error .consent-box { box-shadow: inset 0 0 0 1.5px #e5484d; }
.consent.is-error { animation: consentShake .45s var(--e-inout); }
@keyframes consentShake { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }

/* ── Успешная отправка ── */
.ok { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 32px 0; animation: okIn .6s var(--e-out) both; }
/* после отправки: плашка той же высоты, в ней по центру только сообщение */
.cta3-band.is-sent, .mdl-card.is-sent { display: flex; flex-direction: column; justify-content: center; align-items: center; }
.cta3-band.is-sent .cta3-title, .cta3-band.is-sent .cta3-sub { display: none; }
.cta3-band.is-sent .cta3-form, .mdl-card.is-sent .mdl-body { width: 100%; }
.is-sent .ok { padding: 0; }
.ok[hidden] { display: none; }
.lead[hidden] { display: none; }   /* иначе display: flex перебивает hidden — невидимая форма занимала место, и сообщение об успехе уезжало вниз */
.ok-icon {
  width: 56px; height: 56px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-tint);
  color: var(--accent-deep);
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 24px;
  margin-bottom: 20px;
  animation: okPop .7s var(--e-out) .1s both;
}
.ok-title { font-family: var(--f-display); font-weight: 600; font-size: 20px; line-height: 1.15; letter-spacing: -0.01em; margin-bottom: 8px; }
.ok-sub { font-size: 15px; line-height: 1.2; color: var(--text-3); }
.ok--dark .ok-sub { color: rgba(246, 245, 241, .7); }
@keyframes okIn  { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes okPop { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }

/* ── Нунчаки и катана: фиксированный размер, вылет по очереди ── */
.decor {
  position: absolute;
  z-index: 2;
  max-width: none;
  pointer-events: none;
  opacity: 0;
  transition: transform 1.1s var(--e-inout), opacity .8s var(--e-inout);
}
.decor--l {
  width: 493px; height: 493px;
  left: calc(var(--px) - 231px);
  top: -93px;
  transform: translate(-80%, -30%) rotate(-40deg);
  transition-delay: .25s;                 /* улетает вторым */
}
.decor--r {
  width: 717px; height: 717px;
  right: calc(var(--px) - 64px);
  bottom: -226px;
  transform: translate(85%, -6%) rotate(28deg);
  transition-delay: 0s;                   /* улетает первым */
}
.cta3.is-in .decor { opacity: 1; transform: none; }
.cta3.is-in .decor--l { transition-delay: 0s; }    /* влетает первым */
.cta3.is-in .decor--r { transition-delay: .3s; }   /* влетает вторым */


/* ═══════════════════════════════════════════════════
   ПОДВАЛ (Figma: Footer)
   ═══════════════════════════════════════════════════ */
.ftr { position: relative; z-index: 3; margin-top: var(--sec); background: var(--zone); padding: 0 var(--px) 24px; }  /* катана уходит под подвал */
.ftr-inner { max-width: 1792px; margin: 0 auto; display: flex; gap: 40px; padding: 56px 40px 24px; }
.ftr-brand { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.ftr-logo { line-height: 25px; }
.ftr-about { width: 320px; font-size: 14px; line-height: 1.65; color: var(--text-3); }
.ftr-col { flex: 0 1 227px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.ftr-title {
  margin-bottom: 4px;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-4);
}
.ftr-col a, .ftr-bottom a {
  font-size: 14px;
  line-height: 17px;
  color: var(--text-3);
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: color .3s var(--e-inout), background-size .4s var(--e-inout);
}
@media (hover: hover) and (pointer: fine) {
.ftr-col a:hover, .ftr-bottom a:hover { color: var(--text); background-size: 100% 1px; }
}
.ftr-bottom {
  max-width: 1792px;
  margin: 0 auto;           /* нижний отступ — паддингом подвала: margin «проваливался» белой полосой */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 28px;
  border-radius: var(--r-zone);
  background: var(--zone);
  font-size: 13px;
  line-height: 16px;
  color: var(--text-3);
}
.ftr-bottom a { font-size: 13px; line-height: 16px; }
.ftr-legal { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; }
/* «Настройки cookie» — выглядит как ссылки подвала */
.ftr-cookie {
  font-size: 13px;
  line-height: 16px;
  color: var(--text-3);
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: color .3s var(--e-inout), background-size .4s var(--e-inout);
}
@media (hover: hover) and (pointer: fine) {
.ftr-cookie:hover { color: var(--text); background-size: 100% 1px; }
}


/* ═══════════════════════════════════════════════════
   МОДАЛКА ЗАЯВКИ (Figma: Modal)
   ═══════════════════════════════════════════════════ */
.mdl {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  overflow-y: auto;
  opacity: 0;
  transition: opacity .35s var(--e-inout);
}
.mdl[hidden] { display: none; }
/* Затемнение под модалкой и просмотром медиа — с запасом за края экрана:
   у браузеров с прозрачными панелями (Safari, Telegram) страница видна и
   под ними, без запаса сверху и снизу оставались светлые полосы */
.mdl::before,
.lb3::before {
  content: '';
  position: fixed;
  left: 0;
  right: 0;
  top: -25vh;
  bottom: -25vh;
  z-index: -1;
  background: rgba(7, 11, 20, .6);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  pointer-events: none;
}
.mdl.is-open { opacity: 1; }

.mdl-card {
  position: relative;
  width: min(920px, 100%);
  margin: auto;
  padding: var(--band-py) var(--band-px);
  border-radius: var(--r-hero);
  background: var(--band);
  color: var(--on-ink);
  text-align: center;
  box-shadow: var(--sh-modal);
  transform: translateY(40px) scale(.96);
  transition: transform .6s var(--e-out);
}
.mdl.is-open .mdl-card { transform: none; }
.mdl-body { width: min(648px, 100%); margin: 0 auto; }

.mdl-close {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .2);
  color: var(--on-ink);
  font-size: 18px;
  line-height: 1;
  box-shadow: 0 1px 2px rgba(17, 22, 31, .05);
  transition: background-color .3s var(--e-inout), transform .45s var(--e-out);
}
@media (hover: hover) and (pointer: fine) {
.mdl-close:hover { background: rgba(255, 255, 255, .35); transform: rotate(90deg); }
}

.mdl-title { margin: 0 auto; }
.mdl-sub { margin: 20px auto 48px; font-size: 17px; line-height: 1.5; }
.mdl-body.is-done .mdl-title,
.mdl-body.is-done .mdl-sub { display: none; }


/* ═══════════════════════════════════════════════════
   ПОЯВЛЕНИЕ БЛОКОВ
   ═══════════════════════════════════════════════════ */
[data-reveal] {
  opacity: 0;
  transition: opacity .8s var(--e-inout) var(--d, 0s), transform .9s var(--e-out) var(--d, 0s);
}
[data-reveal="up"]    { transform: translateY(40px); }
[data-reveal="left"]  { transform: translateX(-70px); }
[data-reveal="right"] { transform: translateX(70px); }
[data-reveal="scale"] { transform: scale(.94); }
[data-reveal].is-in   { opacity: 1; transform: none; }
[data-reveal].b3      { transition: opacity .8s var(--e-inout) var(--d, 0s), transform .9s var(--e-out) var(--d, 0s), background-color .3s var(--e-inout), color .3s var(--e-inout); }

/* ── Интро первого экрана ── */
.hero-line > span { transform: translateY(105%); }
.is-loaded .hero-line > span { transform: none; transition: transform 1.1s var(--e-out); }
.is-loaded .hero-line:nth-child(2) > span { transition-delay: .12s; }
@keyframes introUp { from { opacity: 0; translate: 0 30px; } }
@keyframes introPop { from { opacity: 0; scale: .6; rotate: -30deg; } }
.is-loaded .b3--hero { animation: introUp .9s var(--e-out) .35s backwards; }
.is-loaded .hero-sub { animation: introUp .9s var(--e-out) .45s backwards; }
.is-loaded .round    { animation: introPop 1s var(--e-out) .55s backwards; }
.is-loaded .hdr      { animation: introUp .8s var(--e-out) .1s backwards; }
/* ── Лоадер (Figma: Loader) — шторка с сюрикеном, пока грузится видео ── */
.loader { display: none; }
.js .loader {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  transition: transform .9s var(--e-inout);
  will-change: transform;
}
.loader.is-done { transform: translateY(-100%); }
.loader-star {
  width: 164px;
  height: 164px;
  animation: shurikenIn .6s var(--e-out) both, shurikenSpin 1.6s linear infinite;
}
@keyframes shurikenSpin { to { rotate: 360deg; } }
@keyframes shurikenIn { from { opacity: 0; scale: .6; } }
html.is-loading { overflow: hidden; }
/* Остановка второго блока (v3.js → holdAtAbout): прокрутка пользователя
   недоступна, докрутку ведёт скрипт; место под полосу прокрутки сохраняется,
   чтобы страница не дёргалась по ширине */
html.is-holding { overflow: hidden; scroll-behavior: auto; }
html { scrollbar-gutter: stable; }


/* ═══════════════════════════════════════════════════
   КАРТОЧКИ УСЛУГ НА ГЛАВНОЙ — наведение и клик (ведёт к форме)
   Подъём — через translate, чтобы не спорить с «кирпичиками» (transform)
   ═══════════════════════════════════════════════════ */
.svc-card[data-brick] {
  cursor: pointer;
  transition:
    opacity .25s var(--e-inout) calc(var(--i) * .06s),
    transform .55s var(--e-inout) calc(var(--i) * .06s),
    translate .45s var(--e-out),
    background-color .4s var(--e-inout),
    box-shadow .45s var(--e-inout);
}
.svc-card:focus-visible {
  translate: 0 -6px;
  background: #16212c;
  box-shadow: 0 24px 48px -20px rgba(0, 0, 0, .55);
  outline: none;
}
@media (hover: hover) and (pointer: fine) {
.svc-card:hover {
  translate: 0 -6px;
  background: #16212c;
  box-shadow: 0 24px 48px -20px rgba(0, 0, 0, .55);
  outline: none;
}
}
.svc-num { transition: color .4s var(--e-inout); }
.svc-card:focus-visible .svc-num { color: var(--accent); }
@media (hover: hover) and (pointer: fine) {
.svc-card:hover .svc-num { color: var(--accent); }
}


/* ═══════════════════════════════════════════════════
   ПОРТФОЛИО (Figma: 1440 Portfolio — case / galery)
   ═══════════════════════════════════════════════════ */
.pf { padding-top: 105px; }                                  /* под плавающей шапкой: 16 + 73 + 16 */

.crumbs3 { display: flex; align-items: center; gap: 8px; font-size: 13px; line-height: 1.2; color: var(--text-4); }
.crumbs3 a { color: var(--text-4); transition: color .3s var(--e-inout); }
@media (hover: hover) and (pointer: fine) {
.crumbs3 a:hover { color: var(--accent); }
}
.crumbs3-current { color: var(--ink); }

/* Шапка страницы — тёмная плашка с сюрикеном */
.pf-head {
  margin-top: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  min-height: 180px;
  padding: 40px;
  border-radius: var(--r-hero);
  background: var(--ink);
  color: var(--on-ink);
  overflow: hidden;
}
.pf-title { white-space: nowrap; }
.pf-sub { width: 395px; font-weight: 500; font-size: 18px; line-height: 1.2; color: var(--text-4); }
/* плашка некликабельна — сюрикен статичный: без анимаций появления и наведения */
.pf-star { width: 102px; height: 100px; flex: none; }

/* Вкладки «Кейсы / Галерея» */
.pf-tabs { display: flex; justify-content: center; gap: 16px; margin-top: var(--g40); }
.pf-tab {
  width: 210px;
  height: 80px;
  border-radius: var(--r-pill);
  background: var(--on-ink);
  color: var(--text);
  font-weight: 700;
  font-size: 13px;
  line-height: 1;
  transition: background-color .35s var(--e-inout), color .35s var(--e-inout), transform .3s var(--e-out);
}
@media (hover: hover) and (pointer: fine) {
.pf-tab:hover { background: var(--light-hover); }
}
.pf-tab.is-active { background: var(--ink); color: var(--on-ink); cursor: default; }
.pf-tab:active { transform: scale(.97); }

.pf-views { margin-top: var(--g40); }
.pf-view { animation: pfViewIn .6s var(--e-out) both; }
.pf-view[hidden] { display: none; }
@keyframes pfViewIn { from { opacity: 0; transform: translateY(24px); } }

/* ── Сетка кейсов: блоки по пять — большая 2×2 и четыре маленьких ── */
.pc-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  grid-auto-flow: dense;
  gap: 16px;
  aspect-ratio: 1312 / 648;
}
.pc-row + .pc-row { margin-top: 16px; }
.pc--big { grid-column: 1 / span 2; grid-row: 1 / span 2; border-radius: var(--r-hero); }
.pc-row--flip .pc--big { grid-column: 3 / span 2; }
.pc-row--pair .pc--big + .pc--big { grid-column: 3 / span 2; }   /* ряд из двух — две большие */
.pc-row--even { grid-template-columns: repeat(var(--n), minmax(0, 1fr)); grid-auto-rows: auto; aspect-ratio: auto; }   /* ряд из трёх-четырёх — равные квадраты */
.pc-row--even .pc { aspect-ratio: 1; }

.pc {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 6px;
  padding: 22px;
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--zone);
  isolation: isolate;
  transition:
    opacity .8s var(--e-inout) var(--d, 0s),
    transform .9s var(--e-out) var(--d, 0s),
    translate .5s var(--e-out),
    box-shadow .5s var(--e-inout);
}
.pc-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: -2;
  transition: transform .9s var(--e-inout);
  -webkit-user-drag: none; user-select: none;
}
.pc-shade {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(1, 3, 9, .78), rgba(1, 3, 9, 0) 55%);
  transition: opacity .6s var(--e-inout);
}
.pc-title { font-family: var(--f-display); font-weight: 600; font-size: 17px; line-height: 1.15; color: var(--on-ink); }
.pc-cat { font-size: 13px; line-height: 1.2; color: var(--on-dark-cat); }
.pc:focus-visible { translate: 0 -8px; box-shadow: var(--sh-lift); outline: none; }
@media (hover: hover) and (pointer: fine) {
.pc:hover { translate: 0 -8px; box-shadow: var(--sh-lift); outline: none; }
}
.pc:focus-visible .pc-img { transform: scale(1.06); }
@media (hover: hover) and (pointer: fine) {
.pc:hover .pc-img { transform: scale(1.06); }
.pc:hover .pc-shade { opacity: .85; }
}

/* ── Галерея: колонки фиксированной ширины, фото в родных пропорциях ── */
.gal { display: flex; gap: 16px; align-items: flex-start; }
.gal:not(.is-ready) { display: block; columns: 3; column-gap: 16px; }   /* без JS — обычные колонки */
.gal:not(.is-ready) .gal-item { margin-bottom: 16px; break-inside: avoid; }
.gal-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.gal-item {
  display: block;
  width: 100%;
  aspect-ratio: var(--ar);
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--zone);
  cursor: zoom-in;
  transition:
    opacity .8s var(--e-inout) var(--d, 0s),
    transform .9s var(--e-out) var(--d, 0s),
    translate .45s var(--e-out),
    box-shadow .45s var(--e-inout);
}
.gal-item img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .8s var(--e-inout);
  -webkit-user-drag: none; user-select: none; pointer-events: none;
}
.gal-item:focus-visible { translate: 0 -6px; box-shadow: var(--sh-lift); outline: none; }
@media (hover: hover) and (pointer: fine) {
.gal-item:hover { translate: 0 -6px; box-shadow: var(--sh-lift); outline: none; }
.gal-item:hover img { transform: scale(1.04); }
}

/* ── Просмотр медиа (Figma: Media) ── */
.lb3 {
  position: fixed;
  inset: 0;
  z-index: 300;
  opacity: 0;
  transition: opacity .35s var(--e-inout);
  user-select: none;
}
.lb3[hidden] { display: none; }
.lb3.is-open { opacity: 1; }
/* Сцена во всю ширину между полями: иначе при left: 50% браузер ужимает
   её до половины экрана и широкие фото вписываются с полями */
.lb3-stage {
  position: absolute;
  top: 99px;
  bottom: 99px;
  left: var(--px);
  right: var(--px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.lb3-media {
  position: relative;
  height: 100%;
  max-width: 100%;
  border-radius: var(--r-zone);
  overflow: hidden;
  transform: scale(.96);
  opacity: 0;
  transition: transform .5s var(--e-out), opacity .35s var(--e-inout);
}
.lb3.is-open .lb3-media.is-shown { transform: none; opacity: 1; }
.lb3-media img,
.lb3-media video { display: block; height: 100%; width: auto; max-width: 100%; object-fit: contain; -webkit-user-drag: none; }
.lb3-media img { pointer-events: none; }
.lb3-media video { background: #000; }
/* прозрачный щит поверх фото: «Сохранить изображение» и перетаскивание недоступны;
   у видео щита нет — нужны кнопки плеера (скачивание в плеере отключено) */
.lb3-media:not(.is-video)::after { content: ''; position: absolute; inset: 0; }
.lb3-nav, .lb3-close {
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  flex: none;
  box-shadow: 0 1px 2px rgba(17, 22, 31, .05);
  transition: background-color .3s var(--e-inout), color .3s var(--e-inout), transform .3s var(--e-out), opacity .3s;
}
/* нижняя панель: стрелка · счётчик · стрелка — по центру экрана */
.lb3-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
.lb3-nav { width: 48px; height: 48px; background: var(--bg); color: var(--text); }
.lb3-nav svg { display: block; }
@media (hover: hover) and (pointer: fine) {
.lb3-nav:hover { background: var(--accent); color: #fff; }
}
.lb3-nav:active { transform: scale(.94); }
.lb3-nav[hidden] { visibility: hidden; }   /* одно медиа в наборе — стрелки не нужны, место сохраняем */
.lb3-close { position: absolute; top: 32px; right: 117px; width: 44px; height: 44px; background: rgba(255, 255, 255, .2); color: var(--on-ink); font-size: 18px; }
@media (hover: hover) and (pointer: fine) {
.lb3-close:hover { background: rgba(255, 255, 255, .35); transform: rotate(90deg); }
}
.lb3-count { min-width: 64px; text-align: center; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--on-ink); opacity: .85; }   /* ширина постоянная — стрелки не сдвигаются */


/* ═══════════════════════════════════════════════════
   ШАПКИ СТРАНИЦ: варианты тёмной плашки
   ═══════════════════════════════════════════════════ */
/* Название по центру между двумя сюрикенами (Услуги, Контакты) */
.pf-head--center .pf-title { flex: 1; text-align: center; }
/* Длинное название переносится (кейс, политика) */
.pf-title--wrap { white-space: normal; flex: 1 1 529px; max-width: 680px; }
.pf-head--case .pf-sub { flex: 0 1 395px; width: auto; }


/* ═══════════════════════════════════════════════════
   КЕЙС (Figma: 1440 - Case) — лента медиа
   Колонка фиксированной ширины, фото и видео без зазоров,
   высота каждого кадра — по его пропорциям
   ═══════════════════════════════════════════════════ */
.case3 {
  width: min(980px, 100%);
  margin: var(--g40) auto 0;
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--zone);
}
.case3-item {
  position: relative;
  display: block;
  width: 100%;
  cursor: zoom-in;
  overflow: hidden;
}
.case3-item img,
.case3-item video {
  width: 100%;
  height: auto;
  transition: transform .9s var(--e-inout), filter .6s var(--e-inout);
  -webkit-user-drag: none;
  user-select: none;
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
.case3-item:hover img, .case3-item:hover video { transform: scale(1.02); filter: brightness(.94); }
}
.case3-item:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; border-radius: 0; }
/* щит поверх кадра — «Сохранить» и перетаскивание недоступны */
.case3-item::after { content: ''; position: absolute; inset: 0; }


/* Оговорка к кейсу (например, VPN) — мелко, под плашкой с названием */
.case3-note { max-width: 980px; margin: 20px auto 0; padding: 14px 20px; border-radius: var(--r-zone); background: var(--zone); font-size: 13px; line-height: 1.4; color: var(--text-3); }

/* Приписка в самом конце кейса (например, о Meta) — мелко и приглушённо */
.case3-foot { max-width: 980px; margin: 16px auto 0; font-size: 12px; line-height: 1.35; color: var(--text-4); }

/* Несколько колонок медиа подряд (между ними — прототип) */
.case3-flow .case3 + .case3 { margin-top: var(--g40); }

/* ── Прототип: лента экранов, листается перетаскиванием (Figma: «Прототип») ── */
.proto3 {
  position: relative;
  margin-top: var(--g40);
  padding: 96px 0 24px;
  overflow: hidden;
}
.proto3-hint {
  position: absolute;
  top: 16px;
  right: var(--card-pad);
  display: flex;
  align-items: center;
  gap: 16px;
  font-weight: 500;
  font-size: 32px;
  line-height: 1;
  color: var(--proto-accent);
  transition: opacity .6s var(--e-inout);
}
/* три шеврона «‹‹‹» — волна справа налево: тяните влево */
.proto3-chevs { display: flex; }
.proto3-chevs i {
  width: 20px;
  height: 20px;
  margin-right: -4px;
  border-left: 3px solid currentColor;
  border-bottom: 3px solid currentColor;
  border-radius: 2px;
  transform: rotate(45deg);
  opacity: .3;
  animation: protoChev 1.5s var(--e-inout) infinite;
}
.proto3-chevs i:nth-child(3) { animation-delay: 0s; }
.proto3-chevs i:nth-child(2) { animation-delay: .18s; }
.proto3-chevs i:nth-child(1) { animation-delay: .36s; }
@keyframes protoChev { 0%, 100% { opacity: .3; } 40% { opacity: 1; } }
.proto3.is-used .proto3-chevs i { animation: none; opacity: 1; }
.proto3-track {
  display: flex;
  gap: 40px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  padding: 8px 0 8px 0;
  cursor: grab;
  -webkit-mask-image: linear-gradient(to right, #000 0, #000 82%, transparent 100%);
  mask-image: linear-gradient(to right, #000 0, #000 82%, transparent 100%);
}
.proto3-track::-webkit-scrollbar { display: none; }
.proto3-track.is-dragging { cursor: grabbing; }
.proto3-track:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 12px; }
.proto3-screen {
  flex: none;
  width: clamp(200px, 20.8vw, 300px);
  height: auto;
  aspect-ratio: 393 / 852;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

/* ── «Другие проекты» под кейсом ── */
.more3 { margin-top: var(--sec); }
.more3-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: var(--g40); }
.more3-grid .pc { aspect-ratio: 1; }
.more3-grid .pc:nth-child(2) { --d: .08s; }
.more3-grid .pc:nth-child(3) { --d: .16s; }
.more3-grid .pc:nth-child(4) { --d: .24s; }

/* ── Кнопка «Наверх» ── */
.totop {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 140;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--ink);
  color: var(--on-ink);
  box-shadow: 0 12px 28px -10px rgba(7, 11, 20, .45);
  opacity: 0;
  transform: translateY(16px) scale(.9);
  pointer-events: none;
  transition: opacity .35s var(--e-inout), transform .45s var(--e-out), background-color .3s var(--e-inout);
}
.totop.is-on { opacity: 1; transform: none; pointer-events: auto; }
@media (hover: hover) and (pointer: fine) {
.totop:hover { background: var(--accent); }
.totop:hover svg { transform: translateY(-2px); }
}
.totop svg { transition: transform .35s var(--e-out); }


/* ── Скелетоны: серый фон с бегущим белым переливом, пока грузится картинка ── */
img.sk,
.lb3-media.is-loading {
  background: linear-gradient(100deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, .75) 50%, rgba(255, 255, 255, 0) 70%) var(--zone-2);
  background-size: 200% 100%;
  animation: skShimmer 1.3s linear infinite;
  color: transparent;                       /* без alt-текста поверх скелетона */
}
.lb3-media.is-loading { background-color: rgba(255, 255, 255, .12); background-image: linear-gradient(100deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, .22) 50%, rgba(255, 255, 255, 0) 70%); }
@keyframes skShimmer { from { background-position: 150% 0; } to { background-position: -50% 0; } }
.sk-in { animation: skIn .5s var(--e-inout) both; }
@keyframes skIn { from { opacity: 0; } }


/* ═══════════════════════════════════════════════════
   УСЛУГИ (Figma: 1440 - Услуги, раскрытые — Services)
   ═══════════════════════════════════════════════════ */
.srv-list { display: flex; flex-direction: column; gap: 16px; margin-top: var(--g40); }

.srv {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 240px;
  align-items: start;
  gap: 32px;
  padding: 36px var(--card-pad);
  border-radius: var(--r-card);
  background: var(--zone);
  scroll-margin-top: 120px;
  /* все строки появляются сразу при загрузке, лесенкой — видно, что список длинный */
  animation: srvIn .8s var(--e-out) calc(.15s + var(--i, 0) * .08s) backwards;
  transition: box-shadow .45s var(--e-inout), background-color .45s var(--e-inout);
}
@keyframes srvIn { from { opacity: 0; transform: translateY(40px); } }
@media (hover: hover) and (pointer: fine) {
.srv:hover { box-shadow: var(--sh-soft); }
}
.srv--center { align-items: center; }
.srv.is-expandable { cursor: pointer; }                 /* вся карточка раскрывает состав */
.srv.is-expandable .srv-side { cursor: default; }
@media (hover: hover) and (pointer: fine) {
.srv.is-expandable:hover .srv-toggle { color: var(--accent); }
}
/* Переход по якорю из подвала: строка подсвечивается */
.srv.is-target { animation: srvIn .8s var(--e-out) calc(.15s + var(--i, 0) * .08s) backwards, srvTarget 1.8s var(--e-inout) 1s; }
@keyframes srvTarget { 30% { box-shadow: 0 0 0 2px var(--accent), var(--sh-soft); } }

.srv-num { padding-top: 6px; font-family: var(--f-display); font-weight: 600; font-size: 13px; line-height: 1.2; color: var(--text-4); transition: color .4s var(--e-inout); }
@media (hover: hover) and (pointer: fine) {
.srv:hover .srv-num { color: var(--accent); }
}
.srv-body { min-width: 0; }
.srv-title {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 26px;
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--text);
}
.srv-desc { max-width: 558px; margin-top: 16px; font-size: 15px; line-height: 1.2; color: #383128; }

/* Состав работ: раскрывается по высоте, пункты проявляются */
.srv-more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--e-inout); }
.srv-more > div { overflow: hidden; }
.srv.is-open .srv-more { grid-template-rows: 1fr; }
.srv-items {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px 0 0 22px;
  font-size: 16px;
  line-height: 1.2;
  color: var(--text-4);
}
.srv-items li { padding-left: 2px; }
.srv-items li::marker { color: var(--text-4); }
.srv-note { max-width: 558px; padding-top: 24px; font-size: 16px; line-height: 1.2; color: var(--text-4); }
.srv-items li, .srv-note { opacity: 0; transform: translateY(-8px); transition: opacity .35s var(--e-inout), transform .45s var(--e-inout); }
.srv.is-open .srv-items li, .srv.is-open .srv-note { opacity: 1; transform: none; transition-delay: calc(.08s + var(--k, 0) * .03s); }
.srv.is-open .srv-more > div { padding-bottom: 8px; }

.srv-toggle {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 4px;
  margin-top: 16px;
  font-size: 14px;
  line-height: 17px;
  color: var(--text-3);
  transition: color .3s var(--e-inout);
}
@media (hover: hover) and (pointer: fine) {
.srv-toggle:hover { color: var(--accent); }
}
.srv-chev { position: relative; width: 16px; height: 16px; transition: transform .45s var(--e-inout); }
.srv-chev::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 3px;
  width: 7px;
  height: 7px;
  border: solid currentColor;
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}
.srv.is-open .srv-chev { transform: rotate(180deg) translateY(-2px); }
.srv-toggle-less { display: none; }
.srv.is-open .srv-toggle-more { display: none; }
.srv.is-open .srv-toggle-less { display: inline; }

.srv-side { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.srv-price { font-family: var(--f-display); font-weight: 700; font-size: 30px; line-height: 31px; letter-spacing: -0.01em; color: var(--text); white-space: nowrap; }


/* ═══════════════════════════════════════════════════
   КОНТАКТЫ (Figma: 1440 - Контакты)
   ═══════════════════════════════════════════════════ */
.ct3 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: var(--g40); }
.ct3-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  min-height: 137px;
  padding: var(--card-pad);
  border-radius: var(--r-card);
  background: var(--zone);
  transition:
    opacity .8s var(--e-inout) var(--d, 0s),
    transform .9s var(--e-out) var(--d, 0s),
    translate .45s var(--e-out),
    box-shadow .45s var(--e-inout);
}
a.ct3-card:focus-visible { translate: 0 -6px; box-shadow: var(--sh-soft); outline: none; }
@media (hover: hover) and (pointer: fine) {
a.ct3-card:hover { translate: 0 -6px; box-shadow: var(--sh-soft); outline: none; }
}
.ct3-card--legal { gap: 12px; padding-top: 16px; padding-bottom: 16px; }
.ct3-value {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--text);
  overflow-wrap: anywhere;
  transition: color .3s var(--e-inout);
}
.ct3-value--lg { font-size: 22px; }
@media (hover: hover) and (pointer: fine) {
a.ct3-card:hover .ct3-value { color: var(--accent); }
}
.ct3-label { font-size: 15px; line-height: 1.2; color: var(--text-3); }


/* ═══════════════════════════════════════════════════
   СТУДИЯ (макета 3.0 нет — из компонентов дизайн-системы)
   ═══════════════════════════════════════════════════ */
.st3-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: var(--g40); }
.st3-stat { padding: 32px var(--card-pad); border-radius: var(--r-card); background: var(--zone); }
.st3-num { font-family: var(--f-display); font-weight: 600; font-size: 40px; line-height: 1.1; letter-spacing: -0.01em; color: var(--text); }
.st3-num span { font-size: 22px; }
.st3-label { margin-top: 10px; font-size: 15px; line-height: 1.2; color: var(--text-3); }

.st3-sec { margin-top: var(--sec); }
.st3-head { display: flex; align-items: center; justify-content: space-between; gap: 32px; margin-bottom: var(--g40); }
.st3-title { max-width: 648px; }
.st3-intro { width: 397px; font-weight: 500; font-size: 18px; line-height: 1.2; color: var(--text-3); }

.st3-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.st3-stack { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.st3-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: var(--card-pad);
  border-radius: var(--r-card);
  background: var(--zone);
  transition:
    opacity .8s var(--e-inout) var(--d, 0s),
    transform .9s var(--e-out) var(--d, 0s),
    box-shadow .45s var(--e-inout);
}
@media (hover: hover) and (pointer: fine) {
.st3-card:hover { box-shadow: var(--sh-soft); }
}
.st3-card-num { font-family: var(--f-display); font-weight: 600; font-size: 13px; line-height: 1.2; color: var(--text-4); transition: color .4s var(--e-inout); }
@media (hover: hover) and (pointer: fine) {
.st3-card:hover .st3-card-num { color: var(--accent); }
}
.st3-card-title { font-family: var(--f-display); font-weight: 600; font-size: 22px; line-height: 1.15; letter-spacing: -0.01em; text-transform: uppercase; color: var(--text); }
.st3-card-desc { font-size: 15px; line-height: 1.2; color: var(--text-3); }
.st3-stack .st3-card-title { font-size: 18px; overflow-wrap: anywhere; }   /* узкие карточки: «Инфраструктура» должна влезать */
.st3-list { display: flex; flex-direction: column; gap: 8px; list-style: none; font-size: 15px; line-height: 1.2; color: var(--text-3); }

.st3-dark { margin-top: var(--sec); padding: var(--band-py) var(--band-px); border-radius: var(--r-hero); background: var(--ink); color: var(--on-ink); }

.st3-legal { display: flex; gap: var(--g40); padding: var(--band-py) var(--band-px); border-radius: var(--r-hero); background: var(--zone); }
.st3-legal .st3-title { width: 380px; flex: none; }
.st3-legal-text { display: flex; flex-direction: column; gap: 14px; font-size: 17px; line-height: 1.5; color: var(--text-3); }


/* ═══════════════════════════════════════════════════
   ПОЛИТИКА — текст документа
   ═══════════════════════════════════════════════════ */
.doc3 { max-width: 860px; margin: var(--g40) auto 0; font-size: 16px; line-height: 1.6; color: var(--text-3); }
.doc3 h2 { margin: 40px 0 14px; font-family: var(--f-display); font-weight: 600; font-size: 20px; line-height: 1.2; letter-spacing: -0.01em; color: var(--text); }
.doc3 p + p { margin-top: 12px; }
.doc3 ul { margin: 12px 0; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; }
.doc3 strong { color: var(--text); font-weight: 700; }
.doc3 a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; transition: color .3s var(--e-inout); }
@media (hover: hover) and (pointer: fine) {
.doc3 a:hover { color: var(--accent-hover); }
}
.doc3 hr { height: 1px; margin: 32px 0; border: none; background: var(--zone-2); }
.doc3-note { font-size: 14px; }


/* ═══════════════════════════════════════════════════
   404
   ═══════════════════════════════════════════════════ */
.nf3-plate {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: clamp(56px, 6.944vw, 120px) 40px;
  border-radius: var(--r-hero);
  background: var(--ink);
  color: var(--on-ink);
}
.nf3-code {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(96px, 11.111vw, 180px);
  line-height: 1;
}
.nf3-star { width: .72em; height: auto; animation: shurikenSpin 4s linear infinite; }
.nf3-title { margin-top: 32px; }
.nf3-lead { max-width: 520px; margin-top: 16px; font-size: 17px; line-height: 1.5; color: var(--text-4); }
.nf3-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: var(--g40); }


/* ── Наши приложения: 4 колонки ──
   Квадрат: крупная иконка, под ней название и магазин — по центру.
   По умолчанию стоит прямо; при наведении поднимается и наклоняется —
   каждая карточка в свою сторону (--tilt). */
.apps3 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.app3 {
  position: relative;
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  border-radius: var(--r-card);
  background: var(--zone);
  box-shadow: 0 0 0 4px #fff;
  transition:
    opacity .8s var(--e-inout) var(--d, 0s),
    transform .9s var(--e-out) var(--d, 0s),
    rotate .6s var(--e-inout),
    translate .6s var(--e-inout),
    scale .6s var(--e-inout),
    box-shadow .6s var(--e-inout);
}
.app3:focus-visible {
  z-index: 2;
  rotate: var(--tilt);
  translate: 0 -12px;
  scale: 1.03;
  box-shadow: 0 0 0 4px #fff, var(--sh-lift);
  outline: none;
}
@media (hover: hover) and (pointer: fine) {
.app3:hover {
  z-index: 2;
  rotate: var(--tilt);
  translate: 0 -12px;
  scale: 1.03;
  box-shadow: 0 0 0 4px #fff, var(--sh-lift);
  outline: none;
}
}
.app3-icon { width: 64%; aspect-ratio: 1; flex: none; }
.app3-icon img {
  width: 100%;
  height: 100%;
  border-radius: 22%;
  background: var(--zone-2);
  box-shadow: 0 16px 32px -12px rgba(7, 11, 20, .35);
  transition: transform .6s var(--e-inout);
  -webkit-user-drag: none;
  user-select: none;
}
@media (hover: hover) and (pointer: fine) {
.app3:hover .app3-icon img { transform: scale(1.05); }
}
.app3-name {
  margin-top: 16px;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 17px;
  line-height: 1.2;
  color: var(--text);
}
.app3-store { margin-top: 4px; font-size: 12px; line-height: 1.2; color: var(--text-4); }

/* Пустая галерея (наполняется вручную через content/gallery.json) */
.pf-empty { padding: 80px 0; text-align: center; font-weight: 500; font-size: 18px; line-height: 1.2; color: var(--text-4); }


/* ═══════════════════════════════════════════════════
   УВЕДОМЛЕНИЕ О COOKIE — плашка внизу, один раз
   ═══════════════════════════════════════════════════ */
.ck {
  position: fixed;
  left: 50%;
  bottom: 16px;
  z-index: 150;                       /* под модалкой и просмотром медиа */
  width: min(760px, calc(100vw - 2 * var(--px)));   /* две кнопки + текст — шире, чтобы текст не сжимался в узкую колонку */
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 16px 16px 20px;
  border-radius: var(--r-card);
  background: var(--bg);
  box-shadow: 0 0 0 1px rgba(7, 11, 20, .06), var(--sh-lift);
  opacity: 0;
  transform: translate(-50%, calc(100% + 24px));
  transition: transform .6s var(--e-out), opacity .4s var(--e-inout);
}
.ck[hidden] { display: none; }
.ck.is-in { opacity: 1; transform: translate(-50%, 0); }
.ck-ico { flex: none; font-size: 32px; line-height: 1; }
.ck-body { flex: 1; min-width: 0; }
.ck-title { font-family: var(--f-display); font-weight: 600; font-size: 15px; line-height: 1.2; color: var(--text); }
.ck-text { margin-top: 4px; font-size: 13px; line-height: 1.35; color: var(--text-3); }
.ck-text a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; transition: color .3s var(--e-inout); }
@media (hover: hover) and (pointer: fine) {
.ck-text a:hover { color: var(--accent-hover); }
}
.ck-actions { flex: none; display: flex; gap: 8px; }
.ck-btn { flex: none; }


/* ═══════════════════════════════════════════════════
   ДО 1100px — планшет: меню прячется в бургер
   ═══════════════════════════════════════════════════ */
@media (max-width: 1100px) {
  .pf-head { flex-wrap: wrap; }
  .pf-sub { width: auto; flex: 1 1 320px; }
  .pf-star { margin-right: 0; }
  .lb3-close { right: 24px; top: 24px; }

  /* Шапка: бургер слева, меню — панелью под «пилюлей» */
  .hdr-burger { display: block; }
  .hdr-side .lang, .hdr-side .b3--outline { display: none; }
  .hdr.is-menu { box-shadow: var(--sh-soft); background: rgba(255, 255, 255, .92); }
  .hdr-nav {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    width: min(100%, 420px);
    flex-direction: column;
    gap: 0;
    padding: 10px;
    border-radius: var(--r-card);
    background: var(--bg);
    box-shadow: 0 0 0 1px rgba(7, 11, 20, .06), var(--sh-lift);
    transform-origin: 24px 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px) scale(.97);
    transition: opacity .3s var(--e-inout), transform .5s var(--e-out), visibility 0s linear .5s;
  }
  .hdr.is-menu .hdr-nav {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity .3s var(--e-inout), transform .5s var(--e-out), visibility 0s;
  }
  .hdr-nav .hdr-link {
    padding: 14px 14px;
    border-radius: var(--r-input);
    font-family: var(--f-display);
    font-weight: 600;
    font-size: 17px;
    line-height: 1.15;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    transition: color .3s var(--e-inout), background-color .3s var(--e-inout);
  }
  @media (hover: hover) and (pointer: fine) {
.hdr-nav .hdr-link:hover { background: var(--zone); }
}
  .hdr-nav-extra {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 6px;
    padding: 14px 4px 4px 14px;
    border-top: 1px solid var(--zone-2);
  }
  /* пункты меню выезжают лесенкой */
  .hdr-nav > * { opacity: 0; translate: 0 -6px; transition: opacity .3s var(--e-inout), translate .45s var(--e-out), color .3s var(--e-inout), background-color .3s var(--e-inout); }
  .hdr.is-menu .hdr-nav > * { opacity: 1; translate: none; }
  .hdr.is-menu .hdr-nav > :nth-child(1) { transition-delay: .04s; }
  .hdr.is-menu .hdr-nav > :nth-child(2) { transition-delay: .08s; }
  .hdr.is-menu .hdr-nav > :nth-child(3) { transition-delay: .12s; }
  .hdr.is-menu .hdr-nav > :nth-child(4) { transition-delay: .16s; }
  .hdr.is-menu .hdr-nav > :nth-child(5) { transition-delay: .2s; }
  .hdr.is-menu .hdr-nav > :nth-child(6) { transition-delay: .24s; }
  @media (hover: hover) and (pointer: fine) {
.hdr.is-menu .hdr-nav .hdr-link:hover { transition-delay: 0s; }
}

  .svc-head, .proc { flex-direction: column; align-items: flex-start; }
  .svc-title { width: auto; }
  .svc-head-side { width: 100%; justify-content: space-between; }
  .svc-intro { width: auto; max-width: 420px; }
  .proc-side, .proc-steps { width: 100%; max-width: none; }
  .faq3-layout { flex-direction: column; }
  .faq3-aside { width: 100%; }
  .ftr-inner { flex-wrap: wrap; padding-left: 0; padding-right: 0; }
  .ftr-brand { width: 100%; }
  .srv { grid-template-columns: 40px minmax(0, 1fr); }
  .srv-side { grid-column: 2; flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; }
  .ct3, .st3-stats, .st3-stack { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .st3-head, .st3-legal { flex-direction: column; align-items: flex-start; }
  .st3-intro, .st3-legal .st3-title { width: auto; max-width: 480px; }
  .st3-dark .proc-side { max-width: none; width: 100%; }
  .st3-dark .proc-steps { width: 100%; }
  .apps3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}


/* ═══════════════════════════════════════════════════
   ДО 760px — телефон (Figma: 390 - Home)
   Поля 16, между секциями 120, H2 24, H3 16, текст 16/14.
   Главная идёт обычным потоком: хиро с видео 608×607, второй блок
   с вращающимся сюрикеном, тёмный блок раскрывается куполом снизу,
   услуги листаются по горизонтали, веер проектов — 2×2.
   Остальные страницы — по той же логике.
   ═══════════════════════════════════════════════════ */
@media (max-width: 760px) {
  :root {
    --px: 16px;
    --sec: 120px;
    --g40: 24px;
    --card-pad: 24px;
    --dark-r: 32px;
  }

  .h2 { font-size: 24px; letter-spacing: -0.01em; }

  /* ── Шапка (390/Header) ── */
  .hdr { top: 12px; padding: 8px 8px 8px 16px; gap: 12px; }
  .hdr-logo { font-size: 16px; line-height: 1; }
  .hdr-nav { width: 100%; }
  .hdr-nav .hdr-link { font-size: 16px; padding: 13px 14px; }

  /* ── Хиро ── */
  .scene { height: auto; }
  .scene .anchor { display: none; }
  .scene-pin { position: relative; height: auto; overflow: visible; background: none; }
  .scene-circle { display: none; }
  /* видео — как в макете (меч не заходит под подзаголовок), низ растворяется в белом — обрез одежды
     не выглядывает из-за кнопки «Обсудить проект» */
  .scene-media {
    top: 109px;
    left: calc(75% - 93.5px - 304px - 2px);
    right: auto;
    bottom: auto;
    width: 608px;
    height: 607px;
    opacity: 1;
  }
  .scene-video { position: static; width: 100%; height: 100%; transform: none; object-fit: cover; }
  .scene-media {
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 90px), transparent calc(100% - 20px));
    mask-image: linear-gradient(to bottom, #000 calc(100% - 90px), transparent calc(100% - 20px));
  }

  .hero {
    position: relative;
    inset: auto;
    height: 735px;
    padding: 105px var(--px) 0;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
  }
  .hero-main, .hero-side { display: contents; }
  [data-hero-el] { transform: none; opacity: 1; }
  .hero-title { order: 1; margin-left: 1px; font-size: 34px; line-height: 1.05; }
  .hero-line { white-space: normal; }
  .hero-sub { order: 2; align-self: flex-end; width: 248px; margin-top: 24px; font-size: 14px; }
  .round { order: 3; align-self: flex-end; width: 123px; height: 123px; margin-top: 27px; padding: 24px; gap: 10px; }
  .round-label { text-align: center; }
  .b3--hero { order: 4; margin-top: auto; width: 100%; height: 47px; padding: 16px 30px; font-size: 15px; }

  /* ── Второй блок: в потоке, проявляется при прокрутке ── */
  .about {
    position: relative;
    top: auto;
    left: auto;
    width: auto;
    margin: 120px var(--px) 0;
    transform: none;
    opacity: 1;
  }
  .about-text { width: 100%; margin-top: 24px; font-size: 16px; }
  .about-star { display: block; margin-top: 24px; }

  /* ── Тёмный блок: купол снизу (v3.js), услуги каруселью ── */
  /* тёмный блок заходит вверх на второй блок на --dark-run: круг заливает
     весь экран, как на десктопе (v3.js → updateMobile); видно его только
     внутри круга, поэтому второй блок остаётся открытым, пока круг не дорос */
  .dark {
    --dark-run: 45vh;
    margin-top: calc(143px - var(--dark-run));
    padding-top: var(--dark-run);
  }
  @supports (height: 1svh) { .dark { --dark-run: 45svh; } }
  .dark-inner { gap: 120px; padding-top: 60px; padding-bottom: 120px; }
  .dark-services { gap: 24px; scroll-margin-top: 80px; }
  .svc-head, .svc-head-side { display: contents; }
  .svc-title { order: 1; }
  .svc-intro { order: 2; max-width: none; font-size: 16px; }
  .svc-grid { order: 3; }
  .svc-head-side .b3 { order: 4; width: 100%; }
  .svc-grid {
    flex-wrap: nowrap;
    gap: 8px;
    margin: 0 calc(-1 * var(--px));
    padding: 0 var(--px);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 var(--px);
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .svc-grid::-webkit-scrollbar { display: none; }
  .svc-grid { padding-bottom: 28px; margin-bottom: -28px; }   /* место под тень подсвеченной карточки */
  .svc-card, .svc-card--wide, .svc-card--wide + .svc-card { flex: 0 0 280px; min-height: 301px; padding: 40px; scroll-snap-align: start; }
  .svc-card-title { font-size: 16px; }
  .svc-card-desc { font-size: 14px; }
  /* «кирпичики» поднимаются из-под нижнего края ленты */
  [data-brick] { transform: translateY(105%); }
  .svc-card:focus-visible { translate: none; }
  /* карточка, на которую пролистали, — как при наведении на десктопе */
  .svc-card.is-current { background: #16212c; box-shadow: 0 24px 48px -20px rgba(0, 0, 0, .55); }
  .svc-card.is-current .svc-num { color: var(--accent); }
  @media (hover: hover) and (pointer: fine) {
.svc-card:hover { translate: none; }
}

  .proc { flex-direction: column; align-items: stretch; gap: 48px; scroll-margin-top: 80px; }   /* заголовок → пункты → кнопка: одинаковые отступы */
  .proc-side { display: contents; }
  .proc-title { order: 1; }                    /* по левому краю, как остальные заголовки мобилки */
  .proc-steps { order: 2; grid-template-columns: 1fr; gap: 24px; }
  .proc-side .b3 { order: 3; width: 100%; }
  .step3 { gap: 8px; }
  .step3-title { font-size: 16px; }
  .step3-desc { font-size: 14px; }

  /* ── Веер проектов 2×2 (Figma: Frame 5, 358×398) ── */
  .fan-sec { margin-top: -63px; scroll-margin-top: 80px; }
  .fan { aspect-ratio: 358 / 398; max-width: 430px; }
  .fan-card { width: 48.88%; padding: 16px; transform: translate(-50%, -50%) rotate(var(--mrot)); }
  .fan-card:nth-child(1) { left: 23.79%; top: 26.93%; --mrot: -6deg; }
  .fan-card:nth-child(2) { left: 24.44%; top: 74.25%; --mrot: 0deg; }
  .fan-card:nth-child(3) { left: 72.95%; top: 26.93%; --mrot: 15deg; }
  .fan-card:nth-child(4) { left: 72.95%; top: 74.42%; --mrot: -15deg; }
  .fan-card:focus-visible { transform: translate(-50%, -50%) rotate(var(--mrot)) scale(1.04); }
  @media (hover: hover) and (pointer: fine) {
.fan-card:hover { transform: translate(-50%, -50%) rotate(var(--mrot)) scale(1.04); }
}
  .fan-title { font-size: 14px; }
  .fan-cat { font-size: 11px; }
  .fan-actions .b3 { width: 100%; }

  /* ── FAQ ── */
  .faq3-layout { gap: 40px; scroll-margin-top: 80px; }
  .faq3-aside { gap: 24px; text-align: center; }
  .faq3-intro { font-size: 16px; }
  .qa-q { line-height: 1.15; }
  .qa-a { font-size: 14px; }

  /* ── Заявка ── */
  .cta3-band { padding: 16px; }
  .cta3-sub { margin: 32px 0; font-size: 16px; line-height: 1.2; }
  .lead { gap: 8px; }
  .lead-row { grid-template-columns: 1fr; gap: 8px; }
  .consent { margin-top: 6px; text-align: left; }
  .lead .b3--submit { margin-top: 6px; }
  .b3--submit { width: 100%; }
  .decor--l { width: 151px; height: 151px; left: -63px; top: -75px; transform: translate(-70%, -30%) rotate(-20deg); }
  .decor--r { width: 167px; height: 167px; right: 0; bottom: -86px; transform: translate(70%, 10%) rotate(20deg); }
  .cta3.is-in .decor--l { transform: rotate(17.87deg); }
  .cta3.is-in .decor--r { transform: none; }

  /* ── Подвал ── */
  .ftr { margin-top: 96px; }
  .ftr-inner { flex-wrap: wrap; column-gap: 24px; row-gap: 40px; padding: 56px 40px 24px; }
  .ftr-brand { width: 100%; flex: none; }
  .ftr-about { width: auto; }
  .ftr-col { flex: 0 0 auto; gap: 12px; }   /* по ширине пунктов: почта не рвётся; не влезли рядом — вторая колонка ниже */
  .ftr-bottom { flex-wrap: wrap; padding: 24px 28px; }

  /* ── Модалка, просмотр медиа, куки, «наверх» ── */
  .mdl { padding: 12px; }
  .mdl-card { padding: 56px 16px 20px; }
  .mdl-card.is-sent { padding-top: 20px; }   /* сообщение об успехе — ровно по центру карточки */
  .mdl-close { top: 12px; right: 12px; }
  .mdl-sub { margin: 24px auto 32px; font-size: 16px; line-height: 1.2; }
  .lb3-stage { top: 80px; bottom: 90px; }
  .lb3-bar { bottom: 20px; }
  .lb3-nav { width: 40px; height: 40px; }
  .lb3-close { top: 16px; right: 16px; }
  .ck { bottom: 10px; flex-wrap: wrap; gap: 12px; padding: 16px; }
  .ck-body { flex-basis: calc(100% - 48px); }
  .ck-actions { width: 100%; }
  .ck-btn { flex: 1 1 0; }
  .totop { right: 14px; bottom: 14px; width: 46px; height: 46px; }
  .ck:not([hidden]) ~ .totop { bottom: 210px; }

  /* ── Шапки страниц (тёмная плашка) ── */
  .pf { padding-top: 81px; }                                 /* 12 + 53 + 16 */
  .pf-head { flex-direction: column; align-items: flex-start; gap: 16px; min-height: 0; padding: 24px; }
  .pf-title { white-space: normal; }
  .pf-title--wrap { flex: none; }
  .pf-sub, .pf-head--case .pf-sub { width: auto; flex: none; font-size: 16px; }
  .pf-star { display: none; }
  .pf-head--center { align-items: center; text-align: center; }
  .pf-head--center .pf-title { flex: none; }

  /* ── Портфолио ── */
  .pf-tabs { gap: 8px; }
  .pf-tab { width: auto; flex: 1; height: 56px; padding: 0 8px; white-space: normal; line-height: 1.15; }
  .pc-row { grid-template-columns: 1fr 1fr; aspect-ratio: auto; grid-auto-rows: auto; gap: 8px; }
  .pc-row + .pc-row { margin-top: 8px; }
  .pc { aspect-ratio: 1; padding: 16px; }
  .pc--big, .pc-row--flip .pc--big, .pc-row--pair .pc--big + .pc--big { grid-column: 1 / -1; grid-row: auto; }
  /* большая карточка, затем два ряда маленьких — и так по кругу */
  .pc-row--even { grid-template-columns: 1fr 1fr; }
  .pc-row--even .pc:first-child { grid-column: 1 / -1; }
  .pc-row--even .pc:nth-child(4):last-child { grid-column: 1 / -1; }
  .pc-title { font-size: 14px; }
  .pc-cat { font-size: 11px; }
  .gal, .gal-col { gap: 8px; }
  .gal:not(.is-ready) { columns: 2; column-gap: 8px; }
  .gal-item { border-radius: var(--r-zone); }
  .apps3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .app3 { padding: 16px; }
  .app3-name { margin-top: 12px; font-size: 14px; }

  /* ── Кейс ── */
  .case3 { border-radius: var(--r-zone); }
  .case3-note { padding: 12px 16px; }
  .proto3 { padding-top: 72px; }
  .proto3-hint { font-size: 24px; right: 0; }
  .proto3-track { gap: 20px; }
  .more3-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }

  /* ── Услуги ── */
  .srv { grid-template-columns: 1fr; gap: 14px; padding: 24px; }
  .srv-num { padding-top: 0; }
  .srv-side { grid-column: auto; }
  .srv-title { font-size: 20px; }
  .srv-desc { font-size: 14px; }
  .srv-items, .srv-note { font-size: 14px; }
  .srv-price { font-size: 24px; line-height: 1.1; }

  /* ── Контакты, студия ── */
  .ct3, .st3-stats, .st3-grid, .st3-stack { grid-template-columns: 1fr; gap: 8px; }
  .ct3-card { min-height: 0; }
  .st3-dark, .st3-legal { padding: 32px 24px; }

  /* ── Политика, 404 ── */
  .doc3 { font-size: 15px; }
  .doc3 h2 { font-size: 18px; margin-top: 32px; }
  .nf3-plate { padding: 56px 24px; }
  .nf3-lead { font-size: 16px; }
  .nf3-actions .b3 { width: 100%; }
}

/* Телефон: наведения нет — карточки не «залипают» в поднятом состоянии */

/* ═══════════════════════════════════════════════════
   КАСАНИЕ НА ТЕЛЕФОНЕ: наведения нет (все :hover — только для мыши),
   вместо него — короткое «нажатие» у интерактивных элементов: карточки-
   ссылки, открытие медиа, раскрытие услуги, круглая кнопка
   ═══════════════════════════════════════════════════ */
@media (hover: none), (pointer: coarse) {
  .pc { transition: opacity .8s var(--e-inout) var(--d, 0s), transform .9s var(--e-out) var(--d, 0s), translate .5s var(--e-out), box-shadow .5s var(--e-inout), scale .25s var(--e-out); }
  .gal-item, a.ct3-card { transition: opacity .8s var(--e-inout) var(--d, 0s), transform .9s var(--e-out) var(--d, 0s), translate .45s var(--e-out), box-shadow .45s var(--e-inout), scale .25s var(--e-out); }
  .fan-card { transition: transform .7s var(--e-inout), box-shadow .7s var(--e-inout), opacity .6s var(--e-inout), scale .25s var(--e-out); }
  .svc-card[data-brick] { transition: opacity .25s var(--e-inout) calc(var(--i) * .06s), transform .55s var(--e-inout) calc(var(--i) * .06s), translate .45s var(--e-out), background-color .4s var(--e-inout), box-shadow .45s var(--e-inout), scale .25s var(--e-out); }
  .srv { transition: box-shadow .45s var(--e-inout), background-color .45s var(--e-inout), scale .25s var(--e-out); }
  .case3-item { transition: opacity .8s var(--e-inout) var(--d, 0s), transform .9s var(--e-out) var(--d, 0s), scale .25s var(--e-out); }
  .round { transition: color .45s var(--e-inout), scale .25s var(--e-out); }

  .pc:active, .gal-item:active, a.ct3-card:active, .fan-card:active, .svc-card:active, .round:active, .app3:active { scale: .97; }
  .srv.is-expandable:active, .case3-item:active { scale: .99; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal], [data-lit], [data-brick], .about > *, .fan-card, .decor, .hdr-nav, .hdr-nav > * { transition-duration: .01ms !important; transition-delay: 0s !important; }
  .hero-line > span { transform: none; }
  .is-loaded *, .srv, img.sk, .sk-in { animation: none !important; }
}