/* История при прокрутке v8: кадры из Blender на холсте (R9) */
.film{position:relative;background:#101010;padding:0!important;border:0}
.film-stage{position:sticky;top:0;height:100svh;overflow:hidden;background:#101010}
.film-stage canvas,.film-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.film-stage picture{display:contents}
.film-scrim{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(16,16,16,.94) 0%,rgba(16,16,16,.82) 32%,rgba(16,16,16,0) 52%),
             linear-gradient(0deg,rgba(16,16,16,.8) 0%,rgba(16,16,16,0) 22%)}
.film-progress{position:absolute;right:18px;top:40%;height:20%;width:1px;background:#ffffff22}
.film-progress i{display:block;width:100%;height:100%;background:#ffac77;transform-origin:top;transform:scaleY(0)}
.film-stage + .film-step{margin-top:-100svh}
.film-step{position:relative;z-index:2;min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  padding:110px clamp(20px,5vw,72px) 100px;max-width:min(760px,52vw)}
.film-step .story-copy{opacity:0;transform:translateY(28px);transition:opacity .6s,transform .6s}
.film-step.on .story-copy{opacity:1;transform:none}
.film-count{opacity:0;transition:opacity .6s}
.film-step.on .film-count{opacity:1}
.film-count{position:absolute;left:clamp(20px,5vw,72px);bottom:34px;font:11px/1 var(--mono);letter-spacing:.08em;color:#c0bfbc;text-transform:uppercase}
@media (max-width:760px){
  /* кадр во всю ширину окна, высотой не больше 54 % экрана (лишнее подрезается снизу): под картинкой всегда остаётся место тексту,
     а на суженном окне шире телефона картинка не стоит узким квадратом посередине */
  .film{--sq:min(100vw,46svh)}   /* у этого сайта тексты шагов длинные: картинке — 46 % высоты, остальное тексту */
  .film-stage canvas,.film-poster{inset:auto;top:62px;left:0;width:100%;height:var(--sq);aspect-ratio:auto;object-fit:cover;object-position:50% 24%}
  .film-scrim{background:linear-gradient(180deg,rgba(16,16,16,0) 40%,rgba(16,16,16,.96) 56%)}
  .film-progress{display:none}
  .film-step{max-width:none;justify-content:flex-end;padding:0 22px 64px}
  .film-count{left:22px;bottom:24px;font-size:10px}
}
@media (prefers-reduced-motion:reduce){
  .film-stage canvas{display:none}
  .film-step .story-copy,.film-count{opacity:1;transform:none}
}

/* Сквозная нить: провод дорисовывается прокруткой через всю страницу до формы */
.thread-wrap{position:relative}
.thread{position:absolute;left:clamp(8px,1.8vw,26px);top:0;bottom:0;width:2px;pointer-events:none;z-index:3}
.thread::before{content:"";position:absolute;inset:0;background:#ffffff10}
.thread i{position:absolute;left:0;top:0;width:100%;height:100%;background:linear-gradient(#ee6018,#ffac77);
  transform-origin:top;transform:scaleY(var(--t,0));box-shadow:0 0 12px #ee601888}
.thread b{position:absolute;left:50%;top:calc(var(--t,0) * 100%);width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;
  background:#ffd2b0;box-shadow:0 0 10px 3px #ee6018,0 0 28px 8px #ee601866}
@media (max-width:760px){.thread{left:6px;width:1.5px}.thread b{width:9px;height:9px;margin:-4.5px 0 0 -4.5px}}

/* Детали системы у форматов работы */
.plan{position:relative}
.plan-part{position:absolute;right:-6px;top:-30px;width:clamp(78px,7vw,104px);height:auto;pointer-events:none;
  filter:drop-shadow(0 10px 22px rgba(0,0,0,.5));transition:transform .5s}
@media(hover:hover){.plan:hover .plan-part{transform:translateY(-6px) rotate(-3deg)}}
.plan .mono{padding-right:84px;display:block}

/* Финал: у формы система снова собрана */
.final-system{display:block;width:min(100%,520px);height:auto;margin-top:34px;filter:drop-shadow(0 20px 50px rgba(238,96,24,.18))}
@media (max-width:760px){.final-system{width:78%;margin:24px auto 0}}

/* 3D-разделы после истории (волна 1): тот же фильм, обычные заголовки сайта, текст на тёмной подложке */
.film-sec{border-top:1px solid var(--line)}
.film-sec .film-step{max-width:min(640px,48vw)}
.sec-copy{opacity:0;transform:translateY(28px);transition:opacity .6s,transform .6s;
  background:linear-gradient(180deg,rgba(16,16,16,.72),rgba(16,16,16,.55));-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  border:1px solid var(--line);border-radius:12px;padding:30px 30px 26px}
.film-step.on .sec-copy{opacity:1;transform:none}
.sec-copy h2{margin-bottom:0}
.sec-copy.rows{margin-top:0;border-top:1px solid var(--line)}
.sec-copy.rows .row:last-child{border-bottom:0}
.film-sec .row{grid-template-columns:44px 1fr!important;padding:20px 0}
.film-sec .row>p{grid-column:2!important}
.film-sec .row h3{margin-bottom:6px!important}
.film-sec .trio{margin-top:26px;display:block}
.film-sec .trio div{background:transparent;padding:22px 0 4px}
.film-sec .sec-copy>.trio:first-child{margin-top:0;border:0}
.film-sec .trio .mono{color:#ffac77;font-size:13px}
.film-sec .trio p{font-size:16.5px;color:#d2d0cc}
@media (max-width:760px){
  .film-sec .film-step{max-width:none}
  .sec-copy{padding:20px 18px 16px;border-radius:10px}
  .film-sec .row{padding:14px 0}
  .film-sec .row p{font-size:14px}
  .film-sec .trio p{font-size:15px}
}
@media (prefers-reduced-motion:reduce){.sec-copy{opacity:1;transform:none}}

/* У формы: живая сцена, прокрутка ведёт кадр */
.scrub{position:relative;aspect-ratio:1/1;border-radius:14px;overflow:hidden;background:#101010}
.scrub img,.scrub canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.final-system.scrub{filter:none;box-shadow:0 20px 60px rgba(238,96,24,.10)}
@media (prefers-reduced-motion:reduce){.scrub canvas{display:none}}

/* Шаг без текста: на нём путь одной заявки (кадры 114–145) */
.film-gap{min-height:120svh}

/* Текст шага стоит на месте, пока шаг на экране (проверка R9 №2: фразы не пропадают и не обрезаются) */
@media (min-width:761px){
  .film-step{display:block;padding-top:max(96px,20svh)}
  .film-step .story-copy,.film-step .sec-copy{position:sticky;top:max(96px,20svh)}
}

/* Финал истории: переход к разбору (текст — Codex, 28.09: «путь к заявке») */
.story-lead{margin-top:22px;font-size:clamp(19px,1.5vw,22px);line-height:1.4;color:#d2d0cc;max-width:30ch}
.story-price{margin-top:18px;font-size:clamp(24px,2.1vw,32px);line-height:1.2;letter-spacing:-.02em;color:#f2f1ee}
.story-price em{font-style:normal;color:#ffac77}
@media (max-width:760px){.story-lead{font-size:16px;margin-top:14px}.story-price{font-size:22px;margin-top:12px}}

/* Без текста (путь заявки) затемнение слева не нужно: оно гасило карточку заявки */
.film-scrim{transition:opacity .5s}
.film.bare .film-scrim{opacity:0}

/* ── Пересборка 29.09.2026: разделы — следующий момент пути заявки, не повтор истории (ЗАДАНИЕ пересборка v8, шаг 4) ── */
/* «Шесть болей»: фон — макро оборванного провода, затемнён под текст */
.break-bg .tex img{object-position:60% 42%}
.break-bg .tex::after,.tex-blueprint::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(16,16,16,.86) 0%,rgba(16,16,16,.62) 48%,rgba(16,16,16,.22) 100%),
             linear-gradient(180deg,#101010 0%,rgba(16,16,16,0) 18%,rgba(16,16,16,0) 80%,#101010 100%)}
.break-bg .rows .row{background:rgba(16,16,16,.35)}
/* «До / Работа / После»: три кадра разной крупности, картинка проявляется наездом */
.shots3{margin-top:52px}
.shots3 figure{margin:0;background:#151413;display:flex;flex-direction:column}
.shot3{aspect-ratio:4/3;overflow:hidden;background:#101010;border-bottom:1px solid var(--line)}
.shot3 img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.1);transition:transform 1.8s cubic-bezier(.2,.7,.2,1)}
.shots3 figure.vis .shot3 img{transform:scale(1)}
.shots3 figcaption{padding:26px 26px 30px}
.shots3 .mono{color:#ffac77!important}
@media (prefers-reduced-motion:reduce){.shot3 img{transform:none;transition:none}}
/* Форматы: своя деталь у каждой карточки, разбор за 2 900 крупнее */
@media(min-width:900px){.plan-main,.plan-wide{grid-column:span 2}}
.plan-main{padding:34px 30px}
.plan-main .price{font-size:clamp(34px,3.4vw,46px)}
.plan-main .plan-part{width:clamp(130px,12vw,176px);top:-48px;right:-4px}
.plan-main .mono{padding-right:150px}
.plan-wide .plan-part{width:clamp(96px,8vw,124px)}
/* Кейсы: цифра главного кейса в пол-экрана поверх стопки карточек */
@media(min-width:960px){.case.case-hero{grid-template-columns:1fr;gap:30px}}
.case-hero .big{position:relative;font-size:clamp(104px,24vw,360px);line-height:.86;padding:4vw 0 0}
.case-hero .case-object{position:absolute;left:clamp(90px,18vw,300px);top:44%;transform:translateY(-50%) rotate(-4deg);width:clamp(200px,30vw,420px);height:auto;margin:0;z-index:0;opacity:.9}
.case-hero .hero-num{position:relative;z-index:1;color:#f2f1ee;text-shadow:0 12px 50px rgba(0,0,0,.65)}
.case-hero .big small{position:relative;z-index:1}
/* «Как проверяю»: тот же провод в чертёжном режиме */
.tex-blueprint img{filter:none;object-position:70% 50%;animation-duration:18s}
@media (max-width:760px){.case-hero .case-object{left:auto;right:-10px;width:62vw}.plan-main .mono{padding-right:120px}}

/* Телефон: текст шага стоит под квадратом с предметом, пока шаг на экране, и не проезжает по предмету (R9, раздел 4) */
@media (max-width:760px){
  /* текст встаёт под картинку, как только шаг доходит до неё, и держится почти весь шаг; счётчик шага — строкой над заголовком
     (раньше он был прибит к низу шага и проезжал по приклеенному тексту) */
  .film-step{display:flex;flex-direction:column;justify-content:flex-start;padding:0 22px}
  .film-count{order:-1;position:sticky;display:block;left:auto;bottom:auto;top:calc(62px + var(--sq) + 16px);height:12px;margin:0}
  .film-step .story-copy{position:sticky;top:calc(62px + var(--sq) + 40px)}
}
/* «Шесть болей»: кадр обрыва — полосой в начале раздела, заголовок и строки ниже, на тёмном */
#tasks.break-bg{padding-top:calc(clamp(72px,9vw,128px) + 30vh)}
.break-bg .tex{bottom:auto;height:66vh}
.break-bg .tex img{object-position:56% 46%;opacity:.95}
.break-bg .tex::after{background:linear-gradient(90deg,rgba(16,16,16,.55) 0%,rgba(16,16,16,0) 45%),
  linear-gradient(180deg,#101010 0%,rgba(16,16,16,0) 12%,rgba(16,16,16,0) 58%,#101010 100%)}
@media (max-width:760px){#tasks.break-bg{padding-top:calc(72px + 22vh)}.break-bg .tex{height:44vh}.break-bg .tex img{object-position:62% 46%}}
.story-price em{white-space:nowrap}
/* Форматы, поэкранная приёмка 29.09: «Сайт под ключ» на всю строку (сетка 3 колонки), огонёк внутри карточки 2 900 ₽ заполняет её пустую часть */
@media(min-width:1180px){.plan-wide{grid-column:span 3}}
@media(min-width:900px){
  .plan-main .plan-part{top:auto;bottom:66px;right:30px;width:clamp(170px,17vw,250px)}
  .plan-main p{max-width:52ch}
}
/* «Как проверяю», поэкранная приёмка 29.09: чертёж — в правой половине раздела, метки узлов не ложатся под текст шагов */
@media (min-width:761px){
  .tex-blueprint{left:auto;right:0;width:52%}
  .tex-blueprint img{object-position:65% 50%}
  .tex-blueprint::after{background:linear-gradient(90deg,#101010 0%,rgba(16,16,16,.35) 30%,rgba(16,16,16,0) 55%),
    linear-gradient(180deg,#101010 0%,rgba(16,16,16,0) 15%,rgba(16,16,16,0) 85%,#101010 100%)}
}
/* Кейсы на телефоне, поэкранная приёмка 29.09: стопка карточек не выходит из блока цифры и не ложится на заголовок кейса */
@media (max-width:760px){
  .case-hero .big{padding-top:14vw;padding-bottom:4vw}
  .case-hero .case-object{left:auto;right:0;top:46%;width:40vw}
}
/* Поэкранная приёмка телефона 29.09: подписи под крупными цифрами кейсов не слипаются строками; чертёж под заголовком тише */
.big small{line-height:1.45}
@media (max-width:760px){.tex-blueprint img{opacity:.4;object-position:70% 60%}}
/* Проверка R9 №10, п. 3: на экранах выше 16:9 (1440×900) «cover» срезал края кадра — предметы у правого края обрезались.
   Кадр вписывается целиком; его фон #101010 совпадает с фоном страницы, поля сверху/снизу не видны. */
@media (min-width:761px){.film-stage canvas,.film-poster{object-fit:contain}}
/* Чертёж: край картинки растворяется маской, а не тёмной заливкой — без видимой вертикальной границы (снимки 5) */
@media (min-width:761px){
  .tex-blueprint::after{content:none}
  .tex-blueprint img{-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 45%),linear-gradient(180deg,transparent 0%,#000 14%,#000 86%,transparent 100%);
    -webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent 0%,#000 45%),linear-gradient(180deg,transparent 0%,#000 14%,#000 86%,transparent 100%);mask-composite:intersect}
}
/* Телефон: уходящий текст гаснет быстро и не успевает проехать по квадрату с предметом (проверка R9 №11, п. 7) */
@media (max-width:760px){.film-step .story-copy{transition:opacity .15s,transform .6s}.film-step.on .story-copy{transition:opacity .5s,transform .5s}}

/* ── Правки 02.10.2026 ── */
/* Форма: провод всей страницы приходит в НАСТОЯЩУЮ кнопку, заявка ложится в неё.
   Было: квадрат с нарисованной копией поля и кнопки рядом с настоящими — читался как дубль формы. */
.lead-wire{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;overflow:visible}
.lead-wire path{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.lead-wire .lw-base{stroke:rgba(255,255,255,.07)}
.lead-wire .lw-live{stroke:#ee6018;filter:drop-shadow(0 0 6px rgba(238,96,24,.55))}
.lead-spark{position:absolute;left:0;top:0;z-index:3;width:46px;height:32px;margin:-16px 0 0 -23px;border-radius:9px;background:#fff1e2;
  box-shadow:0 0 0 1px rgba(238,96,24,.25),0 0 22px rgba(238,96,24,.6);pointer-events:none;opacity:0;will-change:transform,opacity}
.lead-spark b{position:absolute;left:9px;height:4px;border-radius:2px;background:#ee6018}
.lead-spark b:first-child{top:9px;width:28px}
.lead-spark b:last-child{top:19px;width:19px}
#lead .btn{transition:background .45s,color .45s,box-shadow .45s,opacity .2s,border-color .2s}
#lead.lead-lit .btn{background:#ee6018;color:#111;box-shadow:0 0 0 1px rgba(238,96,24,.5),0 10px 44px rgba(238,96,24,.45)}
@media (prefers-reduced-motion:reduce){.lead-spark{display:none}}
/* телефон: провод идёт у самого края экрана — карточка меньше и висит справа от провода, не обрезается краем */
@media (max-width:760px){.lead-spark{width:32px;height:23px;margin:-11px 0 0 -5px;border-radius:7px}
  .lead-spark b{left:6px;height:3px}.lead-spark b:first-child{top:6px;width:20px}.lead-spark b:last-child{top:13px;width:13px}}
/* «Как проверяю»: чертёж виден целиком в правой половине, а не торчит обрезком из-за края.
   #method в селекторах — чтобы перебить общие правила .texbg .tex::after и .tex img из страницы. */
@media (min-width:761px){
  /* смешивание — на самом слое .tex: он отдельный слой наложения, картинка внутри него с фоном страницы не смешивается */
  #method .tex-blueprint{left:auto;right:0;width:50%;top:0;bottom:0;height:auto;mix-blend-mode:screen}
  #method .tex-blueprint::after{content:none}
  /* подложка под текст (.wrap::before) лежала на всю ширину и гасила чертёж на 60 % — оставляем её только под текстом слева */
  #method>.wrap::before{background:linear-gradient(90deg,rgba(23,23,26,.6) 0%,rgba(23,23,26,.6) 44%,rgba(23,23,26,0) 56%)}
  #method .tex-blueprint img{object-fit:contain;object-position:60% 46%;opacity:1;animation:none;
    /* фон кадра (#101010) темнее фона страницы — убираем его смешиванием, тонкие линии после уменьшения вдвое делаем ярче */
    filter:contrast(1.25) brightness(1.3);
    -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 14%,#000 94%,transparent 100%);
    mask-image:linear-gradient(90deg,transparent 0%,#000 14%,#000 94%,transparent 100%);
    -webkit-mask-composite:source-over;mask-composite:add}
}

/* Полоса прокрутки в цветах сайта (правка 04.10.2026) */
html{scrollbar-color:#ee6018 #17171a}
@supports not (scrollbar-color:auto){::-webkit-scrollbar{width:12px}::-webkit-scrollbar-track{background:#17171a}::-webkit-scrollbar-thumb{background:#ee6018;border-radius:8px;border:3px solid #17171a}}

/* ── Правка 04.10.2026 (ночь), замечания Эльхана ── */
/* тонкая полоска-индикатор справа от кадра не нужна */
.film-progress{display:none}
/* Последняя сцена: текст уходит вверх вместе с кадром. Раньше он оставался приклеенным, кадр уезжал под ним,
   и линия из кадра перечёркивала заголовок. Нижний отступ шага = высота экрана − место текста − его высота. */
.film-step:last-of-type{padding-bottom:max(0px,calc(80svh - 16rem))}
@media (max-width:760px){.film-step:last-of-type{padding-bottom:max(0px,calc(100svh - var(--sq) - 80px - 14rem))}}

/* Телефон и суженное окно: заголовки шагов истории не крупнее, чем помещается под картинкой на низком экране (360×640) */
@media (max-width:760px){
  .film .story-copy .story-h1,.film .story-copy h2{font-size:min(40px,5.2svh,10.4vw);line-height:1.06}
  .film .story-copy h2 span{font-size:min(22px,2.9svh);margin-top:12px}
  .film .story-copy .story-lead,.film .story-copy .story-price{font-size:min(16px,2.3svh)}
  .film .story-copy .story-cta{margin-top:12px}
}
/* последний шаг уходит вверх вместе с кадром — счётчик на нём не показываем, иначе он остаётся на месте и ложится на текст */
@media (max-width:760px){.film-step:last-of-type .film-count{display:none}}

/* Показ истории без рук (04.10.2026): кнопка в первой сцене сама прокручивает историю до последней сцены.
   Пока идёт показ, внизу экрана висит «Остановить»; любое действие человека возвращает управление. */
.film-play{display:inline-flex;align-items:center;gap:11px;margin-top:30px;padding:11px 20px 11px 12px;border:1px solid rgba(246,245,242,.3);border-radius:999px;
  background:rgba(16,16,16,.55);color:var(--ink);font:11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:border-color .25s,background .25s}
.film-play[hidden],.film-stop[hidden]{display:none}
.film-play i,.film-stop i{position:relative;flex:none;width:24px;height:24px;border-radius:50%;background:#ee6018}
.film-play i::after{content:"";position:absolute;left:9.5px;top:7px;border:5px solid transparent;border-left:8px solid #101010;border-right:0}
@media (hover:hover){.film-play:hover,.film-stop:hover{border-color:#ee6018;background:rgba(238,96,24,.14)}}
.film-stop{position:fixed;left:50%;bottom:24px;translate:-50% 0;z-index:60;display:inline-flex;align-items:center;gap:11px;padding:10px 18px 10px 11px;
  border:1px solid rgba(246,245,242,.3);border-radius:999px;background:rgba(16,16,16,.86);color:var(--ink);font:11px/1 var(--mono);letter-spacing:.08em;
  text-transform:uppercase;cursor:pointer;white-space:nowrap;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.film-stop i::before,.film-stop i::after{content:"";position:absolute;top:7px;width:3px;height:10px;background:#101010}
.film-stop i::before{left:8px}.film-stop i::after{left:13px}
.film-playing .film-play{visibility:hidden}
@media (max-width:760px){.film-play{margin-top:14px;padding:8px 15px 8px 9px;font-size:10px;gap:9px}
  .film-play i{width:20px;height:20px}.film-play i::after{left:7.5px;top:5.5px;border-width:4.5px;border-left-width:7px}
  .film-stop{left:16px;translate:none;bottom:16px;font-size:10px}}   /* слева: справа внизу стоит кнопка «Связаться» */
@media (prefers-reduced-motion:reduce){.film-play,.film-stop{display:none}}


/* ── Плотный фильм (R9 «Правки 12.10.2026», решение Эльхана): кадр на весь экран, стеклянные карточки текста,
   телефон — вертикальный кадр 720×1280 на весь экран, карточка у нижнего края по своей высоте (--ch из film.js). ── */
.film-stage canvas,.film-poster{object-fit:cover}
.film-scrim{background:linear-gradient(90deg,rgba(16,16,16,.5) 0%,rgba(16,16,16,.2) 34%,rgba(16,16,16,0) 50%)}
.film .story-copy{background:rgba(16,16,16,.5);-webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2);
  border:1px solid rgba(242,243,244,.12);border-radius:16px;padding:28px 30px 30px;box-shadow:0 20px 60px rgba(0,0,0,.35)}
@media (max-width:760px){
  .film{--sq:100svh}
  .film-stage canvas,.film-poster{inset:0;top:0;left:0;width:100%;height:100%;aspect-ratio:auto;object-fit:cover;object-position:50% 30%}
  .film-scrim{background:linear-gradient(180deg,rgba(16,16,16,0) 55%,rgba(16,16,16,.5) 100%)}
  .film-step{padding:0 14px}
  .film .story-copy{max-width:none;top:max(34svh,calc(100svh - var(--ch,20rem) - 78px));padding:20px 20px 22px;border-radius:14px}
  .film .story-copy,.film .film-step .story-copy{transform:none!important}   /* без сдвига при появлении: карточка стоит ровно у нижнего края */
  .film-step:last-of-type{padding-bottom:max(0px,calc(100svh - var(--ch,20rem) - 94px))}
}

/* 12.10.2026, плотный фильм: на телефоне карточка стоит у низа кадра и горит одна — отдельный счётчик шага прибит к верху и проезжал по карточке (приёмка 3D «счётчик на тексте»), убран */
@media (max-width:760px){.film .film-count{display:none!important}}