/* ==========================================================
   CINEMA LAYER — атмосфера видеопродакшена
   Подключается ПОСЛЕ styles.css, только дополняет.
   Кривая expo.out (0.16,1,0.3,1) — по рекомендации дизайн-системы.
   ========================================================== */

:root{
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --rail-w: 2px;

  /* АКЦЕНТ: холодный аквамарин, ближе к голубому и ярче прежнего */
  --accent: #1FBFDB !important;
  --accent-hover: #48D6EE !important;
  --accent-dim: rgba(31,191,219,.14) !important;
  --accent-dim-strong: rgba(31,191,219,.30) !important;
  --on-accent: #04222A !important;
  --ring: #1FBFDB !important;

  --glow: rgba(31,191,219,.10);
  --acc-rgb: 31,191,219;
}

/* Перекрываем янтарные значения, зашитые в разметку и старые правила */
.filmrail__fill{ background: linear-gradient(180deg, rgba(31,191,219,.15), var(--accent)) !important; box-shadow: 0 0 14px rgba(31,191,219,.5) !important; }
.filmrail__mark.is-passed{ background: var(--accent) !important; border-color: var(--accent) !important; box-shadow: 0 0 12px rgba(31,191,219,.65) !important; }
.ambient__blob--a{ background: radial-gradient(circle, rgba(31,191,219,.15), transparent 68%) !important; }
.spot.is-hot{ --glow: rgba(31,191,219,.17); }
.livelines path{ stroke: var(--accent); }
.camcta{ border-color: rgba(31,191,219,.45) !important; background: linear-gradient(160deg, rgba(8,34,32,.95), rgba(14,14,15,.94)) !important; }
.camcta:hover, .camcta:focus-visible{ border-color: rgba(31,191,219,.85) !important; box-shadow: 0 18px 50px rgba(0,0,0,.6), 0 0 26px rgba(31,191,219,.30) !important; }
.camcta__lens{ color: var(--accent); }
.agency-strip{ border-color: rgba(31,191,219,.32) !important; background: linear-gradient(100deg, rgba(31,191,219,.11), rgba(31,191,219,.02) 62%) !important; }
.agency-strip__tag{ background: var(--accent) !important; color: #04222A !important; }
.agency-strip__link{ color: var(--accent) !important; border-color: rgba(31,191,219,.45) !important; }
.anchor-nav a.is-active,
.anchor-nav a[aria-current="true"]{ color: var(--accent) !important; background: rgba(31,191,219,.11) !important; }
.anchor-nav::after{ background: linear-gradient(90deg, transparent, rgba(31,191,219,.30), transparent) !important; }
@keyframes navPulse{
  0%,100%{ box-shadow: 0 0 0 0 rgba(31,191,219,0), 0 0 10px rgba(31,191,219,.18); }
  50%    { box-shadow: 0 0 0 1px rgba(31,191,219,.24), 0 0 22px rgba(31,191,219,.36); }
}
@media (hover: hover){
  .work-card:hover, .case:hover, .price-tile:hover, .review:hover, .tile:hover{
    border-color: rgba(31,191,219,.36) !important;
    box-shadow: 0 18px 44px rgba(0,0,0,.5), 0 0 0 1px rgba(31,191,219,.14) inset !important;
  }
}

/* ---------- 1. Плотнее ритм: блоки перетекают, а не обрываются ---------- */
:root{ --section-py: 44px; }
@media (min-width:900px){
  :root{ --section-py: 84px; }
}

/* Убираем жёсткие линии между секциями — вместо них мягкое затухание */
.section{ border-top: none !important; }
.section::before{
  content:"";
  position:absolute; left:0; right:0; top:0; height:1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.10) 18%, rgba(255,255,255,.10) 82%, transparent);
  opacity:.7;
}
.section:first-of-type::before{ display:none; }

/* ---------- 1b. Навигация по разделам — крупнее и с живым светом ---------- */
.anchor-nav a{
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em;
  color: rgba(245,241,234,.72) !important;
  padding: 10px 14px !important;
  border-radius: 100px;
  position: relative;
  transition: color .3s var(--ease-expo), background .3s var(--ease-expo);
}
@media (min-width: 900px){
  .anchor-nav a{ font-size: 16px !important; padding: 11px 18px !important; }
}
.anchor-nav a:hover{
  color: var(--text) !important;
  background: rgba(255,255,255,.05);
}
/* активный раздел: янтарь + мягкая пульсация свечения */
.anchor-nav a.is-active,
.anchor-nav a[aria-current="true"],
.anchor-nav a[data-active="true"]{
  color: var(--accent) !important;
  background: rgba(31,191,219,.10);
  animation: navPulse 2.8s ease-in-out infinite;
}
@keyframes navPulse{
  0%,100%{ box-shadow: 0 0 0 0 rgba(31,191,219,.00), 0 0 10px rgba(31,191,219,.18); }
  50%    { box-shadow: 0 0 0 1px rgba(31,191,219,.22), 0 0 22px rgba(31,191,219,.34); }
}
/* Было две полосы (шапка + якорное меню) — объединили в одну: лого + разделы + CTA + бургер. */
.anchor-nav{
  position: fixed !important;
  top: 0 !important;
  left: 0; right: 0;
  z-index: 99;
  transform: none !important;
  background: linear-gradient(180deg, rgba(28,32,38,.68), rgba(12,14,17,.76)) !important;
  -webkit-backdrop-filter: blur(26px) saturate(180%);
          backdrop-filter: blur(26px) saturate(180%);
  border-top: none;
  border-bottom: 1px solid rgba(0,0,0,.4);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 -1px 0 rgba(255,255,255,.04),
    0 10px 34px rgba(0,0,0,.42);
  opacity: 1;              /* видна всегда — решение Романа */
  pointer-events: auto;
}
.anchor-nav__bar{
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
  display: flex;
  align-items: center;
  gap: 18px;
}
.anchor-nav__mark{
  flex: 0 0 auto;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
  color: var(--text);
}
.anchor-nav__inner{
  flex: 1 1 auto;
  min-width: 0;
  max-width: none;
  margin-inline: 0;
  padding-inline: 0;
  padding-block: 8px;
}
.anchor-nav__actions{
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Бургер: три полоски, средняя короче — читается как иконка меню */
.menu-toggle{
  flex: 0 0 auto;
  width: 38px; height: 38px;
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 5px;
  background: transparent; border: none; cursor: pointer;
  padding: 0;
}
.menu-toggle span{
  display: block; width: 20px; height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: transform .35s var(--ease-expo), opacity .35s var(--ease-expo), width .35s var(--ease-expo);
}
.menu-toggle span:nth-child(2){ width: 14px; align-self: flex-end; }
.menu-toggle[aria-expanded="true"] span:nth-child(1){ transform: translateY(7px) rotate(45deg); width: 20px; }
.menu-toggle[aria-expanded="true"] span:nth-child(2){ opacity: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* Полноэкранное меню — полный список разделов */
.fullscreen-menu{
  position: fixed; inset: 0; z-index: 200;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 40px;
  background: linear-gradient(160deg, rgba(14,16,19,.98), rgba(8,9,10,.99));
  -webkit-backdrop-filter: blur(30px);
          backdrop-filter: blur(30px);
  opacity: 0;
  transition: opacity .4s var(--ease-expo);
}
.fullscreen-menu[hidden]{ display: flex; pointer-events: none; }
.fullscreen-menu.is-open{ opacity: 1; pointer-events: auto; }
.fullscreen-menu__nav{
  display: flex; flex-direction: column; align-items: center;
  gap: 6px;
}
.fullscreen-menu__nav a{
  font-family: var(--font-display);
  font-size: clamp(26px, 5.4vw, 42px);
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--text);
  padding: 8px 18px;
  border-radius: 100px;
}
.fullscreen-menu__nav a:hover{ color: var(--accent); }

/* Кнопки в стекле */
.btn--ghost{
  background: rgba(255,255,255,.07) !important;
  -webkit-backdrop-filter: blur(16px) saturate(160%);
          backdrop-filter: blur(16px) saturate(160%);
  border-color: rgba(255,255,255,.16) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}
.chip, .pill{
  -webkit-backdrop-filter: blur(14px) saturate(150%);
          backdrop-filter: blur(14px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}

/* Контент не должен нырять под фиксированную навигацию (теперь одна полоса) */
main{ padding-top: 0; }
section[id]{ scroll-margin-top: 76px; }

.anchor-nav::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background: linear-gradient(90deg, transparent, rgba(31,191,219,.28), transparent);
}

/* Шапку убрали (объединили с якорным меню) - hero больше не должен
   резервировать место под две полосы, только под одну. */
.hero{ padding-top: 84px !important; }

/* ---------- 1b-1. Видео не на весь экран, со свечением по краям ---------- */
/* Окно видео уже экрана, по бокам — размытая заливка акцентом,
   как отсвет от экрана телевизора в тёмной комнате. */
.hero__media{
  --vid-w: 88%;
  overflow: hidden;
}
.hero__media::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(58% 70% at 8% 46%, rgba(var(--acc-rgb), .30), transparent 66%),
    radial-gradient(58% 70% at 92% 46%, rgba(var(--acc-rgb), .26), transparent 66%),
    radial-gradient(90% 60% at 50% 108%, rgba(var(--acc-rgb), .16), transparent 70%);
  filter: blur(48px);
}
.hero__video, .hero__poster-img{
  left: 50% !important; right: auto !important;
  width: var(--vid-w) !important;
  transform: translateX(-50%);
  z-index: 1;
  -webkit-mask-image:
    linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent),
    linear-gradient(180deg, #000 76%, transparent 99%);
  mask-image:
    linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent),
    linear-gradient(180deg, #000 76%, transparent 99%);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
.hero__scrim{ z-index: 2; }

@media (max-width: 1240px){ .hero__media{ --vid-w: 94%; } }
@media (max-width: 900px){
  .hero__media{ --vid-w: 100%; }
  .hero__video, .hero__poster-img{
    -webkit-mask-image: linear-gradient(180deg, #000 74%, transparent 99%);
            mask-image: linear-gradient(180deg, #000 74%, transparent 99%);
  }
  .hero__media::after{ filter: blur(60px); opacity: .7; }
}

/* ---------- 1b-1b. Градиентные полупрозрачные элементы + растекание ---------- */
/* Всё акцентное — не плоская заливка, а градиент со стеклом.
   При наведении из точки курсора расходится волна, как вода. */
.btn--primary, .agency-strip__tag, .work-card__category, .camcta{
  background-image: linear-gradient(135deg,
      rgba(var(--acc-rgb), .92) 0%,
      rgba(var(--acc-rgb), .70) 45%,
      rgba(90,150,230,.72) 100%) !important;
  background-color: transparent !important;
  -webkit-backdrop-filter: blur(12px) saturate(170%);
          backdrop-filter: blur(12px) saturate(170%);
  border: 1px solid rgba(255,255,255,.18) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 6px 22px rgba(var(--acc-rgb), .22);
}

/* Волна от курсора */
.btn, .pill, .anchor-nav a, .logo-chip, .chip, .contact-row, .fullscreen-menu__nav a{
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.btn::after, .pill::after, .anchor-nav a::after, .logo-chip::after,
.chip::after, .contact-row::after, .fullscreen-menu__nav a::after{
  content: "";
  position: absolute;
  left: var(--rx, 50%); top: var(--ry, 50%);
  width: 0; height: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--acc-rgb), .55), rgba(var(--acc-rgb), .06) 62%, transparent 72%);
  transform: translate(-50%, -50%);
  opacity: 0;
  pointer-events: none;
  z-index: -1;
  transition: width .62s var(--ease-expo), height .62s var(--ease-expo), opacity .5s var(--ease-expo);
}
@media (hover: hover){
  .btn:hover::after, .pill:hover::after, .anchor-nav a:hover::after, .logo-chip:hover::after,
  .chip:hover::after, .contact-row:hover::after, .fullscreen-menu__nav a:hover::after{
    width: 320px; height: 320px; opacity: 1;
  }
}
.btn > *, .pill > *, .anchor-nav a > *, .contact-row > *{ position: relative; z-index: 1; }

/* ---------- 1b-2. Читаемость текста поверх видео ---------- */
/* Кадр в hero бывает светлым (например, выставка еды) — текст тонул.
   Усиливаем затемнение снизу, где лежит вся типографика. */
.hero__scrim{
  background:
    linear-gradient(180deg,
      rgba(10,10,10,.55) 0%,
      rgba(10,10,10,.30) 26%,
      rgba(10,10,10,.72) 62%,
      rgba(10,10,10,.94) 88%,
      var(--bg) 100%),
    radial-gradient(120% 80% at 20% 80%, rgba(10,10,10,.60), transparent 70%) !important;
}
.hero__subtitle{ text-shadow: 0 2px 18px rgba(0,0,0,.7); }
.hero__lead{ text-shadow: 0 2px 14px rgba(0,0,0,.7); }

/* ---------- 1b-3. Имя в hero: мельче и деликатнее ---------- */
/* Имя контуром, как в прежних версиях, но небольшого размера */
.hero__name{
  font-size: clamp(28px, 4.4vw, 66px) !important;
  font-weight: 600 !important;
  letter-spacing: .10em !important;
  text-transform: uppercase;
  margin-bottom: 16px !important;
  -webkit-text-fill-color: transparent !important;
  -webkit-text-stroke: 1px rgba(245,241,234,.68) !important;
  color: transparent !important;
}
.hero__name .mask-title__line > span{
  -webkit-text-fill-color: transparent !important;
  -webkit-text-stroke: 1px rgba(245,241,234,.68) !important;
  color: transparent !important;
}

/* ---------- 1b-4. Стрелка «листайте вниз» ---------- */
.scrollhint{
  position: absolute; left: 50%; bottom: 26px; z-index: 4;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  color: rgba(245,241,234,.55);
  transition: opacity .5s var(--ease-expo), transform .5s var(--ease-expo), color .3s;
}
.scrollhint:hover{ color: var(--accent); }
.scrollhint.is-gone{ opacity: 0; transform: translate(-50%, 14px); pointer-events: none; }
.scrollhint__line{
  width: 1px; height: 40px;
  background: linear-gradient(180deg, transparent, rgba(245,241,234,.45));
}
.scrollhint svg{ animation: hintBob 2s var(--ease-expo) infinite; }
@keyframes hintBob{ 0%,100%{ transform: translateY(0); opacity:.6; } 50%{ transform: translateY(5px); opacity:1; } }
@media (max-width: 900px){ .scrollhint{ bottom: 14px; } .scrollhint__line{ height: 26px; } }
@media (prefers-reduced-motion: reduce){ .scrollhint svg{ animation: none; } }

/* ---------- 1b-5. Фото Романа по краям hero ---------- */
/* Вместо вырезания фона — растворение краёв маской. Выглядит дороже
   обтравки и не даёт рваного контура вокруг камеры и стедикама. */
.hero__side{
  position: absolute; bottom: 0; z-index: 1;
  height: min(78vh, 760px); width: auto;
  object-fit: contain; object-position: bottom;
  pointer-events: none; user-select: none;
  opacity: 0;
  filter: saturate(.85) contrast(1.05);
  transition: opacity 1.4s var(--ease-expo), transform 1.4s var(--ease-expo);
}
/* Фон вырезан заранее. Обе фигуры одинаковой высоты, чтобы композиция
   читалась симметрично, и слегка притемнены под общий холст. */
.hero__side{
  width: auto !important;
  filter: saturate(.72) contrast(1.05) brightness(.74) !important;
  -webkit-mask-image: linear-gradient(180deg, #000 74%, transparent 99%);
          mask-image: linear-gradient(180deg, #000 74%, transparent 99%);
}
/* Роман: правило менялось дважды - финал: слева +25%, справа +30% от предыдущего шага */
.hero__side--left{ height: min(56.9vh, 552px) !important; left: 0.5vw; bottom: 0; transform: translateX(-24px); }
.hero__side--right{ height: min(45.5vh, 442px) !important; right: 0.5vw; bottom: 0; transform: translateX(24px); }

.hero.is-ready .hero__side--left{ opacity: .92; transform: none; }
.hero.is-ready .hero__side--right{ opacity: .82; transform: none; }

/* Текст всегда поверх фото и слегка перекрывает его — как просил Роман */
.hero__content{ position: relative; z-index: 3; width: 100%; min-width: 0; box-sizing: border-box; }

/* На планшете правое фото убираем, левое оставляем поменьше */
@media (max-width: 1240px){
  .hero__side--right{ display: none; }
  .hero__side--left{ height: min(48.75vh, 455px) !important; left: -4vw; }
  .hero.is-ready .hero__side--left{ opacity: .5; }
}
@media (max-width: 900px){
  .hero__side{ display: none; }
}

/* ---------- 1b-5b. Заметный фон у ключевых секций ---------- */
/* Секции получают собственное свечение, чтобы страница не была плоской.
   Кроме первых двух (hero и клиенты) - у них уже свой фон/видео. */
#works, #cases, #how-it-works, #turnaround, #about, #reviews, #process, #duo, #agencies, #faq, #pricing, #contact{
  position: relative;
  isolation: isolate;
}
#works::after, #cases::after, #how-it-works::after, #turnaround::after, #about::after, #reviews::after, #process::after, #duo::after, #agencies::after, #faq::after, #pricing::after, #contact::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(80% 120% at 12% 0%, rgba(var(--acc-rgb), .13), transparent 62%),
    radial-gradient(70% 100% at 92% 100%, rgba(90,120,220,.10), transparent 66%),
    linear-gradient(180deg, rgba(255,255,255,.022), transparent 40%);
}
/* Блок сроков — главный оффер, свет сильнее остальных */
#turnaround::after{
  background:
    radial-gradient(70% 130% at 50% 0%, rgba(var(--acc-rgb), .22), transparent 60%),
    radial-gradient(60% 100% at 88% 96%, rgba(var(--acc-rgb), .12), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.03), transparent 46%);
}
#turnaround .section__title--turnaround{
  text-shadow: 0 0 42px rgba(var(--acc-rgb), .38);
}
/* Тот же приём мельче - на заголовках остальных секций со свечением */
#works .section__title, #cases .section__title, #about .section__title,
#reviews .section__title, #process .section__title, #duo .section__title,
#agencies .section__title, #faq .section__title, #contact .section__title{
  text-shadow: 0 0 30px rgba(var(--acc-rgb), .22);
}

/* ---------- 1b-5c. Два фото в блоке «Обо мне» ---------- */
.about__media{
  display: flex; flex-direction: column; gap: 14px;
  aspect-ratio: auto !important; height: auto !important;
}
.about__media img{
  width: 100%; height: auto;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.07);
  aspect-ratio: auto !important;
  object-fit: contain !important;
  object-position: center !important;
  max-height: none !important;
  background: rgba(255,255,255,.02);
}
/* Первое фото (голубая рубашка) - помельче и обрезано снизу на 10% */
.about__media img:first-child{
  max-width: 80%;
  align-self: center;
  aspect-ratio: 1200 / 1620 !important;   /* высота исходника * 0.9 - срез низа */
  object-fit: cover !important;
  object-position: top !important;
}
.about__media-second{
  max-width: 80%;
  align-self: center;
  border-radius: 14px;
  clip-path: inset(0 15% 0 5% round 14px);
}

/* ---------- 1b-6. Блок «Фото + видео в паре» ---------- */
.duo{ position: relative; overflow: hidden; }
/* Десктоп: фотограф справа, как было изначально. */
.duo__photo{
  position: absolute; right: -2vw; bottom: 8%; z-index: 0;
  height: min(80%, 560px); width: auto;
  object-fit: contain; object-position: bottom right;
  opacity: .42;
  filter: saturate(.75) contrast(1.04);
  pointer-events: none; user-select: none;
  -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent 97%);
          mask-image: linear-gradient(180deg, #000 60%, transparent 97%);
}
.duo__inner{ position: relative; z-index: 1; }

/* ---------- Фото Романа фоном за текстом - там, где на мобильном пусто ---------- */
/* На десктопе эти фото уже есть в hero сбоку - тут не дублируем. */
.hero__bgphoto{
  display: none;
  pointer-events: none; user-select: none;
}
.chat-block{ position: relative; overflow: hidden; }
.chat-block .container{ position: relative; z-index: 1; }
.chat-block__photo{
  display: none;
  pointer-events: none; user-select: none;
}
@media (max-width: 900px){
  .hero__bgphoto{
    display: block;
    position: absolute; left: 50%; bottom: 6%; z-index: 0;
    height: 138%; width: auto;
    transform: translateX(-50%);
    object-fit: contain; object-position: bottom center;
    opacity: .8;
    filter: saturate(.8) contrast(1.05) brightness(.62);
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 4%, #000 66%, transparent);
            mask-image: linear-gradient(180deg, transparent, #000 4%, #000 66%, transparent);
  }
  .chat-block__photo{
    display: block;
    position: absolute; left: 50%; bottom: 0; z-index: 0;
    height: 60%; width: auto;
    transform: translateX(-50%);
    object-fit: contain; object-position: bottom center;
    opacity: .3;
    filter: saturate(.7) contrast(1.02);
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 20%, #000 62%, transparent);
            mask-image: linear-gradient(180deg, transparent, #000 20%, #000 62%, transparent);
  }
}
.duo__body{ max-width: 660px; }
.duo__lead{ color: var(--text-secondary, #B6B1A7); font-size: 17px; }
.duo__list{ list-style: none; padding: 0; margin: 22px 0 26px; }
.duo__list li{
  position: relative; padding-left: 26px; margin-bottom: 11px;
  color: var(--text-secondary, #B6B1A7); font-size: 16px;
}
.duo__list li::before{
  content: ""; position: absolute; left: 0; top: 9px;
  width: 12px; height: 7px;
  border-left: 1.6px solid var(--accent); border-bottom: 1.6px solid var(--accent);
  transform: rotate(-45deg);
}
.duo__cta{ display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.duo__note{ font-size: 14px; color: var(--dim, #837E75); }

/* Лента работ фотографа — тянется мышью и свайпом */
.duo__gallery-label{
  margin: 34px 0 12px;
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--dim, #837E75);
}
.duo__gallery{
  display: flex; gap: 12px;
  overflow-x: auto; overflow-y: hidden;
  padding-bottom: 10px;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 2%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 2%, #000 94%, transparent);
}
.duo__gallery::-webkit-scrollbar{ display: none; }
.duo__gallery img{
  flex: 0 0 auto;
  height: 210px; width: auto;
  border-radius: 12px;
  object-fit: cover;
  scroll-snap-align: start;
  border: 1px solid rgba(255,255,255,.07);
  filter: saturate(.92);
  transition: transform .45s var(--ease-expo), filter .45s var(--ease-expo), border-color .45s var(--ease-expo);
}
@media (hover: hover){
  .duo__gallery img:hover{
    transform: translateY(-4px) scale(1.02);
    filter: saturate(1.05);
    border-color: rgba(var(--acc-rgb), .4);
  }
}
@media (max-width: 900px){
  .duo__gallery img{ height: 150px; }
}

@media (max-width: 900px){
  /* Мобильный: по центру за текстом, ярче - иначе совсем не видно */
  .duo__photo{
    left: 50%; right: auto; bottom: 0;
    height: 78%; opacity: .34;
    transform: translateX(-50%);
    object-position: bottom center;
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 16%, #000 60%, transparent);
            mask-image: linear-gradient(180deg, transparent, #000 16%, #000 60%, transparent);
  }
  .duo__body{ max-width: none; }
}

.duo-more{ padding-block: 8px 44px; }
@media (min-width: 900px){ .duo-more{ padding-block: 8px 64px; } }

/* ---------- Коллаж работ фотографа - едет сам, когда блок появляется в экране ---------- */
/* Один ряд, две копии стоят В СТРОКУ (flex на track), а не друг под другом -
   так лента едет бесшовно, а не выглядит двумя полосами. */
.photogallery{ overflow: hidden; padding-block: 4px 28px; }
.photogallery .eyebrow{ margin-bottom: 12px; }
.photogallery__track{
  display: flex;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.photogallery__row{
  display: flex;
  flex: 0 0 auto;
  gap: 10px;
  width: max-content;
  animation: photoScroll 46s linear infinite;
  animation-play-state: paused;
}
.photogallery.is-visible .photogallery__row{ animation-play-state: running; }
.photogallery__track:hover .photogallery__row{ animation-play-state: paused; }
@keyframes photoScroll{
  from{ transform: translateX(0); }
  to{ transform: translateX(-100%); }
}
.photogallery__row img{
  flex: 0 0 auto;
  height: 148px; width: auto;
  border-radius: 10px;
  object-fit: cover;
  border: 1px solid rgba(255,255,255,.07);
}
@media (max-width: 900px){
  .photogallery__row{ animation-duration: 30s; }
  .photogallery__row img{ height: 108px; }
}
@media (prefers-reduced-motion: reduce){
  .photogallery__row{ animation: none; }
}

/* ---------- 1c-000. Hero - весь блок текста по центру ---------- */
.hero__content{ text-align: center; }
.hero__name, .hero__subtitle{ text-align: center; }
.hero__lead{ margin-left: auto !important; margin-right: auto !important; }
.chips{ justify-content: center; }
.agency-strip{ margin-left: auto !important; margin-right: auto !important; }
.hero__ctas{ justify-content: center; }

/* ---------- 1c-00. Заголовки секций - по центру, как просил Роман ---------- */
.section > .container > .eyebrow,
.section > .container > .section__title,
.logos-block .eyebrow, .logos-block .section__title{
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
/* Заголовок «Сроки» - и текст под ним по центру, тоже по просьбе Романа */
#turnaround .container{ text-align: center; }
#turnaround .turnaround__body{ margin-inline: auto; }

/* ---------- 1c-0. Карточки работ - широкоэкранный кадр 16:9 (как в кино) ---------- */
.work-card__media{ aspect-ratio: 16/9 !important; }

/* ---------- 1c. Строка для агентств в первом экране ---------- */
.agency-strip{
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px;
  margin: 20px 0 4px;
  padding: 12px 16px 12px 12px;
  max-width: 660px;
  border: 1px solid rgba(31,191,219,.30);
  border-radius: 14px;
  background: linear-gradient(100deg, rgba(31,191,219,.10), rgba(31,191,219,.02) 62%);
  backdrop-filter: blur(8px);
  font-size: 16.5px; line-height: 1.48;
  color: rgba(245,241,234,.90);
}
.agency-strip__tag{
  flex: 0 0 auto;
  font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: #16110A; background: var(--accent);
  padding: 5px 10px; border-radius: 100px;
}
.agency-strip__text{ flex: 1 1 260px; font-size: 16.5px; line-height: 1.5; }
.agency-strip__link{
  flex: 0 0 auto;
  color: var(--accent); font-weight: 600; white-space: nowrap;
  border-bottom: 1px solid rgba(31,191,219,.45);
  transition: border-color .3s var(--ease-expo);
}
.agency-strip__link:hover{ border-color: var(--accent); }

@media (max-width: 600px){
  .agency-strip{ font-size: 13.5px; padding: 11px 13px; gap: 8px 10px; }
  .agency-strip__text{ flex-basis: 100%; }
}

/* ---------- 1d. Живые линии на фоне секций ---------- */
.livelines{
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none; overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 25%, #000 75%, transparent);
          mask-image: linear-gradient(180deg, transparent, #000 25%, #000 75%, transparent);
}
.livelines svg{ width: 100%; height: 100%; display: block; }
.livelines path{
  fill: none;
  stroke: var(--accent);
  stroke-linecap: round;
  animation: lineFlow var(--dur, 26s) linear infinite;
  animation-delay: var(--delay, 0s);
}
@keyframes lineFlow{
  from{ stroke-dashoffset: var(--len, 1200); }
  to  { stroke-dashoffset: calc(var(--len, 1200) * -1); }
}
.section:has(.livelines) > .container{ position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce){
  .livelines path{ animation: none; }
}

/* ---------- 1e. Лента с перетаскиванием ---------- */
.draggable{ cursor: grab; scroll-behavior: auto; }
.draggable.is-dragging{ cursor: grabbing; user-select: none; scroll-snap-type: none; }
.draggable.is-dragging *{ pointer-events: none; }

.draghint{
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 10px;
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--dim);
  opacity: 0; transform: translateY(4px);
  transition: opacity .5s var(--ease-expo), transform .5s var(--ease-expo);
}
.draghint.is-on{ opacity: 1; transform: none; }
@media (hover: none), (max-width: 900px){ .draghint{ display: none !important; } }

/* ---------- 2. Нить слева — только линия с точками, без плёнки ---------- */
.filmrail{
  position: fixed;
  left: 12px; top: 0; bottom: 0;
  width: 14px;
  z-index: 30;
  pointer-events: none;
  opacity: 0;
  transition: opacity .8s var(--ease-expo);
}
.filmrail.is-on{ opacity: .55; }


/* Плёнку убрали — она читалась как шум. Осталась только направляющая нить. */
.filmrail__strip{
  position:absolute; left:50%; top:0; bottom:0; width:1px;
  transform: translateX(-50%);
  background: rgba(255,255,255,.055);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent);
          mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent);
}
.filmrail__strip::after{ display:none; }
/* прогресс — заполняется янтарём по мере скролла */
.filmrail__fill{
  position:absolute; left:50%; top:0; width:var(--rail-w);
  transform: translateX(-50%);
  height:0;
  background: linear-gradient(180deg, rgba(31,191,219,.15), var(--accent));
  box-shadow: 0 0 14px rgba(31,191,219,.55);
  border-radius: 2px;
  transition: height .12s linear;
}
/* метки-кадры напротив каждой секции */
.filmrail__mark{
  position:absolute; left:50%; transform:translate(-50%,-50%);
  width:9px; height:9px; border-radius:50%;
  border:1px solid rgba(255,255,255,.22);
  background: var(--bg);
  transition: background .5s var(--ease-expo), border-color .5s var(--ease-expo), box-shadow .5s var(--ease-expo), transform .5s var(--ease-expo);
}
.filmrail__mark.is-passed{
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 12px rgba(31,191,219,.7);
  transform: translate(-50%,-50%) scale(1.15);
}

/* На телефоне киноленту не показываем: она налезает на текст,
   а каждый пиксель ширины на 390px важнее декора. */
@media (max-width: 900px){
  .filmrail{ display: none !important; }
}

/* ---------- 3. Амбиентный свет — медленно дышащие пятна ---------- */
.ambient{
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  overflow: hidden;
}
.ambient__blob{
  position:absolute; border-radius:50%;
  filter: blur(90px);
  opacity:.5;
  will-change: transform;
}
.ambient__blob--a{
  width:46vw; height:46vw; left:-10vw; top:6vh;
  background: radial-gradient(circle, rgba(31,191,219,.16), transparent 68%);
  animation: floatA 34s var(--ease-expo) infinite alternate;
}
.ambient__blob--b{
  width:38vw; height:38vw; right:-8vw; top:44vh;
  background: radial-gradient(circle, rgba(90,120,220,.13), transparent 68%);
  animation: floatB 42s var(--ease-expo) infinite alternate;
}
.ambient__blob--c{
  width:30vw; height:30vw; left:32vw; bottom:-6vh;
  background: radial-gradient(circle, rgba(232,217,197,.07), transparent 70%);
  animation: floatA 50s var(--ease-expo) infinite alternate-reverse;
}
@keyframes floatA{ from{ transform: translate3d(0,0,0) scale(1); } to{ transform: translate3d(6vw,8vh,0) scale(1.16); } }
@keyframes floatB{ from{ transform: translate3d(0,0,0) scale(1.1); } to{ transform: translate3d(-7vw,-6vh,0) scale(1); } }

/* контент всегда выше атмосферы */
body > header, body > main, body > footer{ position: relative; z-index: 2; }

@media (max-width: 900px){
  /* на телефоне оставляем одно пятно и без анимации — экономим батарею */
  .ambient__blob--b, .ambient__blob--c{ display:none; }
  .ambient__blob--a{ animation:none; opacity:.35; filter: blur(60px); }
}

/* ---------- 4. Курсор-фонарик ---------- */
.spot{
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  opacity: 0; transition: opacity .6s var(--ease-expo);
  background: radial-gradient(
    380px circle at var(--mx, 50%) var(--my, 50%),
    var(--glow), transparent 62%);
  mix-blend-mode: screen;
}
.spot.is-on{ opacity: 1; }
.spot.is-hot{ --glow: rgba(31,191,219,.16); }

@media (hover: none), (max-width: 900px){
  .spot{ display: none !important; }
}

/* подсветка края карточки под курсором — объём вместо плоскости */
@media (hover: hover){
  .work-card, .case, .price-tile, .review, .tile, .faq__item, .agencies__item, .risks__item{
    position: relative;
    transition: transform .45s var(--ease-expo), border-color .45s var(--ease-expo), box-shadow .45s var(--ease-expo);
  }
  .work-card:hover, .case:hover, .price-tile:hover, .review:hover, .tile:hover{
    transform: translateY(-4px);
    border-color: rgba(31,191,219,.34);
    box-shadow: 0 18px 44px rgba(0,0,0,.5), 0 0 0 1px rgba(31,191,219,.12) inset;
  }
  .btn:active, .logo-chip:active{ transform: scale(.97); }
}

/* ---------- 5. Появление текста частями ---------- */
/* Быстро: при резком скролле человек не должен ждать текст.
   Задержка каскада ограничена, длительность короткая. */
.w{
  display: inline-block;
  opacity: 0;
  transform: translateY(9px);
  transition:
    opacity .34s var(--ease-expo),
    transform .34s var(--ease-expo);
  transition-delay: var(--d, 0ms);
  will-change: transform, opacity;
}
.is-lit .w{ opacity: 1; transform: none; filter: none; }

/* после проигрывания снимаем will-change */
.is-done .w{ will-change: auto; }

/* ---------- 6. Меняющееся слово в первом экране ---------- */
.rotator{
  display:inline-grid;
  vertical-align: bottom;
  overflow: hidden;
  text-align: left;
}
.rotator__item{
  grid-area: 1 / 1;
  color: var(--accent);
  opacity: 0;
  transform: translateY(100%);
  transition: opacity .5s var(--ease-expo), transform .5s var(--ease-expo);
  white-space: nowrap;
}
.rotator__item.is-in{ opacity:1; transform:none; }
.rotator__item.is-out{ opacity:0; transform: translateY(-100%); }

/* ---------- 7. Мягкая склейка блоков ---------- */
.section + .section{ margin-top: -1px; }
.section > .container{ position: relative; z-index: 1; }

/* ---------- 7b. Камера-кнопка «Напиши мне» ---------- */
/* Заменяет прежнюю панель и липкую полосу — один элемент вместо двух. */
.popup[data-popup], .sticky-cta[data-sticky-cta]{ display: none !important; }

.camcta{
  position: fixed;
  right: 20px; bottom: 74px; /* выше индикатора таймкода, чтобы не перекрывались */
  z-index: 70;
  display: inline-flex; align-items: center; gap: 0;
  height: 60px; padding: 0 12px;
  border-radius: 100px;
  border: 1px solid rgba(31,191,219,.42);
  background: linear-gradient(160deg, rgba(28,22,12,.94), rgba(14,14,15,.94));
  backdrop-filter: blur(14px);
  box-shadow: 0 14px 40px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.04) inset;
  color: var(--text);
  text-decoration: none;
  overflow: hidden;
  opacity: 0; transform: translateY(28px) scale(.92);
  transition: opacity .6s var(--ease-expo), transform .6s var(--ease-expo),
              border-color .35s var(--ease-expo), box-shadow .35s var(--ease-expo);
}
.camcta.is-on{ opacity: 1; transform: none; animation: camPulse 2.6s ease-in-out infinite; }
@keyframes camPulse{
  0%,100%{ box-shadow: 0 14px 40px rgba(0,0,0,.55), 0 0 0 0 rgba(var(--acc-rgb), .38); }
  55%    { box-shadow: 0 14px 40px rgba(0,0,0,.55), 0 0 0 12px rgba(var(--acc-rgb), 0); }
}
.camcta:hover{ animation: none; }

.camcta__lens{
  flex: 0 0 auto; width: 36px; height: 36px;
  display: grid; place-items: center;
  color: var(--accent);
}
/* «запись» — мягко пульсирующая точка внутри объектива */
.camcta__rec{
  position: absolute; left: 25px; top: 16px;
  width: 7px; height: 7px; border-radius: 50%;
  background: #ff4d4d;
  box-shadow: 0 0 10px rgba(255,77,77,.85);
  animation: recBlink 2.2s ease-in-out infinite;
}
@keyframes recBlink{ 0%,100%{ opacity:.35; } 50%{ opacity:1; } }

.camcta__label{
  white-space: nowrap;
  font-size: 15px; font-weight: 600; letter-spacing: -.01em;
  max-width: 0; opacity: 0;
  transition: max-width .55s var(--ease-expo), opacity .4s var(--ease-expo), margin .55s var(--ease-expo);
}
.camcta:hover, .camcta:focus-visible{
  border-color: rgba(31,191,219,.8);
  box-shadow: 0 18px 50px rgba(0,0,0,.6), 0 0 26px rgba(31,191,219,.28);
}
.camcta:hover .camcta__label,
.camcta:focus-visible .camcta__label,
.camcta.is-open .camcta__label{
  max-width: 190px; opacity: 1; margin-inline: 8px 8px;
}

/* на телефоне подпись видна сразу — там нет наведения */
@media (hover: none), (max-width: 900px){
  .camcta{ height: 54px; right: 14px; bottom: 14px; }
  .camcta__label{ max-width: 190px; opacity: 1; margin-inline: 6px 10px; font-size: 14px; }
  .camcta__lens{ width: 32px; height: 32px; }
  .camcta__rec{ left: 21px; top: 13px; width: 6px; height: 6px; }
}

/* кнопка «включить звук», если браузер заглушил плеер */
.soundon{
  position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%);
  z-index: 5;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 20px; border-radius: 100px;
  border: 1px solid rgba(31,191,219,.5);
  background: rgba(14,14,15,.9); backdrop-filter: blur(10px);
  color: var(--text); font: inherit; font-size: 14px; font-weight: 600;
  cursor: pointer;
  animation: navPulse 2.4s ease-in-out infinite;
}

/* ==========================================================
   МОБИЛЬНЫЙ РЕДИЗАЙН — отдельные решения, а не сжатый десктоп
   70%+ трафика приходит из Telegram с телефона
   ========================================================== */
@media (max-width: 760px){

  /* --- Первый экран: компактнее, вся суть без прокрутки --- */
  .hero{ min-height: auto !important; padding-top: 84px !important; padding-bottom: 30px !important; }
  .hero__name{
    font-size: 21px !important;
    letter-spacing: .22em !important;
    -webkit-text-stroke-width: .7px !important;
    margin-bottom: 10px !important;
  }
  .hero__subtitle{ font-size: 25px !important; line-height: 1.15 !important; margin-bottom: 8px !important; }
  .hero__lead{ font-size: 15px !important; opacity: .72; }

  /* Чипы — одна лента со свайпом вместо трёх рядов */
  .chips{
    display: flex !important; flex-wrap: nowrap !important;
    overflow-x: auto; gap: 8px;
    margin-inline: -16px; padding-inline: 16px;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent);
            mask-image: linear-gradient(90deg, #000 88%, transparent);
  }
  .chips::-webkit-scrollbar{ display: none; }
  .chip{ flex: 0 0 auto; font-size: 12.5px !important; padding: 7px 13px !important; }

  /* Плашка агентствам — компактная карточка */
  .agency-strip{ margin: 16px 0 14px; padding: 12px 13px; font-size: 13px; }
  .agency-strip__link{ margin-left: auto; }

  /* Кнопки: главная во всю ширину, вторая — текстовой ссылкой */
  .hero__ctas{ flex-direction: column; align-items: stretch; gap: 10px; }
  .hero__ctas .btn--primary{ width: 100%; padding-block: 16px; font-size: 16px; }
  .hero__ctas .btn--ghost{
    width: 100%; background: transparent !important; border-color: rgba(255,255,255,.14) !important;
  }

  /* --- Ритм: короче, но с воздухом там, где смысл --- */
  :root{ --section-py: 40px; }
  .section__title{ font-size: clamp(26px, 8vw, 34px) !important; line-height: 1.06 !important; }
  .eyebrow{ font-size: 10.5px !important; margin-bottom: 12px !important; }

  /* --- Карточки: одна колонка, крупное превью --- */
  .cases-grid, .reviews-grid, .price-tiles, .tiles, .process__grid, .about__grid{
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .works-grid{ grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .work-card__title{ font-size: 13px !important; line-height: 1.25 !important; }


  /* --- Разделы работ: лента со свайпом --- */
  .filters{
    display: flex !important; flex-wrap: nowrap !important;
    overflow-x: auto; gap: 8px;
    margin-inline: -16px; padding: 0 16px 4px;
    scrollbar-width: none;
  }
  .filters::-webkit-scrollbar{ display: none; }
  .pill{ flex: 0 0 auto; font-size: 13px !important; padding: 9px 15px !important; }

  /* --- Сроки: главный оффер читается целиком --- */
  .section__title--turnaround{ font-size: clamp(27px, 8.6vw, 36px) !important; }
  #turnaround::after{
    background:
      radial-gradient(90% 60% at 50% 0%, rgba(var(--acc-rgb), .26), transparent 64%),
      linear-gradient(180deg, rgba(255,255,255,.03), transparent 40%) !important;
  }

  /* --- Фотограф: полупрозрачный силуэт за текстом, помельче на телефоне --- */
  .duo__photo{ height: 66%; opacity: .32; }
  .duo__gallery img{ height: 168px; }
  .duo__list li{ font-size: 15px; }

  /* --- Формы: пальцем попадать легко --- */
  .field input, .contact-form input{ min-height: 52px !important; font-size: 16px !important; }
  .btn{ min-height: 50px; }

  /* --- Камера-кнопка не должна закрывать контент --- */
  .camcta{ bottom: 16px !important; right: 12px !important; }
  .footer{ padding-bottom: 92px; }

  /* --- Тяжёлое отключаем --- */
  .livelines, .filmrail, .spot{ display: none !important; }
  .ambient__blob--a{ opacity: .28; }

  /* Такси - седьмой лого, на мобильном одиноко висит слева на новой строке - убираем,
     чтобы не занимал место (решение Романа). */
  .logo-grid .logo-cell:last-child{ display: none; }
}

/* Совсем узкие экраны */
@media (max-width: 380px){
  .hero__subtitle{ font-size: 22px !important; }
  .works-grid{ grid-template-columns: 1fr !important; }
}

/* ---------- 8. Уважение к настройке «меньше движения» ---------- */
@media (prefers-reduced-motion: reduce){
  .ambient__blob{ animation: none !important; }
  .spot{ display: none !important; }
  .w{ opacity:1 !important; transform:none !important; filter:none !important; transition:none !important; }
  .rotator__item{ transition: none !important; }
  .filmrail__fill{ transition: none !important; }
}