 <style>
/* ---------- Квиз ---------- */
.quiz-wrap{background:var(--card);border-radius:var(--r-lg);padding:46px;margin-top:44px;display:grid;grid-template-columns:260px 1fr;gap:44px;box-shadow:0 0 0 1px var(--line)}
.quiz-persona{text-align:center}
.quiz-persona .ph{min-height:0;width:128px;height:128px;border-radius:50%;padding:10px;margin:0 auto 16px}
.quiz-persona .ph .ph-ico{font-size:22px}
.quiz-persona .ph .ph-cap{font-size:10px;max-width:100px}
.quiz-persona b{display:block;font-size:17px;letter-spacing:-.02em}
.quiz-persona span{font-size:13.5px;color:var(--muted)}
.quiz-hint{margin-top:18px;background:var(--bg);border-radius:18px;padding:16px;font-size:13.5px;color:var(--muted);text-align:left;line-height:1.5}
.quiz-progress{height:6px;background:#24242a;border-radius:99px;margin-bottom:26px;overflow:hidden}
.quiz-bar{height:100%;width:16%;background:var(--accent);border-radius:99px;transition:width .3s ease}
.quiz-step-label{font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gray);margin-bottom:12px}
.quiz-q{font-weight:600;font-size:clamp(20px,2.1vw,26px);margin-bottom:24px;line-height:1.2;letter-spacing:-.025em}
.quiz-opts{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.quiz-opt{border:1.5px solid transparent;border-radius:18px;padding:18px 20px;background:#1b1b1f;font-size:15px;font-weight:500;color:var(--ink);text-align:left;transition:border-color .15s,background .15s,transform .15s}
.quiz-opt:hover{border-color:var(--accent-2);transform:translateY(-1px)}
.quiz-opt.sel{border-color:var(--accent);background:var(--peach)}
.quiz-nav{display:flex;gap:12px;margin-top:28px;align-items:center}
.quiz-back{background:none;border:none;color:var(--muted);font-weight:600;font-size:14.5px;padding:10px 6px}
.quiz-back:hover{color:var(--ink)}
.quiz-final .fields{display:grid;gap:12px;margin-bottom:16px}
</style> <section id="quiz" style="padding-top:0"> <div class="container"> <div class="eyebrow reveal">Расчёт за 40 секунд</div> <h2 class="reveal">Соберём план запуска под вашу нишу за 6 ответов</h2> <p class="sub reveal">Структура сайта, офер, канал трафика и вилка стоимости — пришлём в удобный мессенджер.</p> <div class="quiz-wrap reveal"> <div class="quiz-persona"> <div class="ph"><div class="ph-ico">👤</div><div class="ph-cap"><b>Фото</b>Дмитрий Корс</div></div> <b>Дмитрий Корс</b> <span>Сооснователь KORS, отвечает за проект</span> <div class="quiz-hint" id="quizHint">Каждый ответ сужает вилку стоимости — в конце пришлём точный расчёт и 2–3 примера решений под вашу задачу.</div> </div> <div class="quiz-body" id="quizBody"> <div class="quiz-progress"><div class="quiz-bar" id="quizBar"></div></div> <div class="quiz-step-label" id="quizLabel">Шаг 1 из 6</div> <div id="quizContent"></div> </div> </div> </div> </section> <script>
var quizData=[
  {q:'Для какого бизнеса нужен сайт?',hint:'От ниши зависит и структура, и канал трафика — предложим решение под ваш рынок, а не шаблон.',opts:['Производство','Услуги (b2b / b2c)','Товары, интернет-магазин','Эксперт, личный бренд']},
  {q:'Какая главная задача?',hint:'Кому-то нужен поток заявок, кому-то — доверие и имидж. От цели зависят акценты на странице.',opts:['Постоянный поток заявок','Имидж и доверие к компании','Запуск нового продукта','Всё сразу — и продажи, и имидж']},
  {q:'Сайт с нуля или уже есть?',hint:'Если сайт есть, но молчит, — разберём, почему, и посчитаем, что дешевле: докрутить или пересобрать.',opts:['С нуля — нужно всё','Есть, но не приносит заявок','Нужен редизайн и рост конверсии']},
  {q:'Откуда пойдёт трафик?',hint:'Под рекламу, SEO и соцсети сайты строятся по-разному. Если не уверены — подскажем.',opts:['Реклама в Яндекс Директе','SEO, органический трафик','Свои соцсети','Пока не знаю — подскажите']},
  {q:'Когда планируете запуск?',hint:'Если сроки жмут — уплотним график команды без потери качества.',opts:['Срочно, за 2–3 недели','В течение месяца','Через 1–2 месяца','Пока присматриваюсь']}
];
var quizState={step:0,answers:[]};
var qc=document.getElementById('quizContent'),qBar=document.getElementById('quizBar'),qLabel=document.getElementById('quizLabel'),qHint=document.getElementById('quizHint');
var TOTAL=quizData.length+1;
function renderQuiz(){
  var s=quizState.step;
  qBar.style.width=((s+1)/TOTAL*100)+'%';
  if(s<quizData.length){
    qLabel.textContent='Шаг '+(s+1)+' из '+TOTAL;
    qHint.textContent=quizData[s].hint;
    var html='<div class="quiz-q">'+quizData[s].q+'</div><div class="quiz-opts">';
    quizData[s].opts.forEach(function(o,i){
      var sel=quizState.answers[s]===i?' sel':'';
      html+='<button type="button" class="quiz-opt'+sel+'" data-i="'+i+'">'+o+'</button>';
    });
    html+='</div><div class="quiz-nav">'+(s>0?'<button type="button" class="quiz-back" id="qBack">← Назад</button>':'')+'</div>';
    qc.innerHTML=html;
    qc.querySelectorAll('.quiz-opt').forEach(function(b){
      b.addEventListener('click',function(){
        quizState.answers[s]=+b.dataset.i;
        quizState.step++;renderQuiz();
        qc.closest('.quiz-wrap').scrollIntoView({behavior:'smooth',block:'nearest'});
      });
    });
    var back=document.getElementById('qBack');
    if(back)back.addEventListener('click',function(){quizState.step--;renderQuiz()});
  }else{
    qLabel.textContent='Последний шаг';
    qHint.textContent='Пришлём расчёт и 2–3 примера решений под вашу задачу в течение пары часов в рабочее время.';
    qc.innerHTML=
      '<div class="quiz-q">Куда прислать план запуска и расчёт?</div>'+
      '<div class="quiz-final">'+
        '<div class="fields">'+
          '<div class="field"><input type="text" id="qName" placeholder="Ваше имя"></div>'+
          '<div class="field"><input type="tel" id="qPhone" placeholder="Телефон или @ник в Telegram"></div>'+
        '</div>'+
        '<div class="msgr-row" id="qMsgr">'+
          '<button type="button" class="msgr sel">Телефон</button>'+
          '<button type="button" class="msgr">Telegram</button>'+
          '<button type="button" class="msgr">WhatsApp</button>'+
          '<button type="button" class="msgr">MAX</button>'+
        '</div>'+
        '<label class="check"><input type="checkbox" id="qAgree" checked> Я принимаю условия <a href="https://korsprod.ru/policy" target="_blank" rel="noopener">политики конфиденциальности</a> и даю согласие на обработку персональных данных</label>'+
        '<div class="quiz-nav" style="margin-top:0">'+
          '<button type="button" class="quiz-back" id="qBack">← Назад</button>'+
          '<button type="button" class="btn btn-primary" id="qSubmit" style="flex:1">Получить план запуска</button>'+
        '</div>'+
        '<p class="form-note">⚙️ Форма-макет: перед публикацией подключить отправку (Telegram-бот / почта / CRM).</p>'+
      '</div>';
    document.getElementById('qMsgr').querySelectorAll('.msgr').forEach(function(b){
      b.addEventListener('click',function(){
        document.getElementById('qMsgr').querySelectorAll('.msgr').forEach(function(x){x.classList.remove('sel')});
        b.classList.add('sel');
      });
    });
    document.getElementById('qBack').addEventListener('click',function(){quizState.step--;renderQuiz()});
    document.getElementById('qSubmit').addEventListener('click',function(){
      var n=document.getElementById('qName'),p=document.getElementById('qPhone'),a=document.getElementById('qAgree');
      if(!n.value.trim()){n.focus();return}
      if(p.value.trim().length<5){p.focus();return}
      if(!a.checked){a.focus();return}
      qBar.style.width='100%';
      qLabel.textContent='Готово';
      qHint.textContent='Спасибо! Обычно отвечаем в течение 10 минут в рабочее время.';
      qc.innerHTML='<div class="quiz-done"><div class="big">🔥</div><h3>Заявка принята</h3><p>Свяжемся в выбранном мессенджере, зададим пару уточняющих вопросов и пришлём план запуска с вилкой стоимости.</p></div>';
    });
  }
}
renderQuiz();
</script>

 <style>
/* ---------- Финальная форма ---------- */
.final-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:center}
.final .ph{min-height:360px}
.final-form .fields{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:26px 0 16px}
.final-form .field input{background:var(--dark-2);border:1.5px solid var(--dark-3);color:#fff}
.final-form .field input::placeholder{color:#7a7f87}
.final-form .field input:focus{border-color:var(--accent)}
.final-form .msgr{background:var(--dark-2);border-color:var(--dark-3);color:#e8e9ea}
.final-form .msgr.sel{border-color:var(--accent);background:rgba(109,93,251,.16);color:#a99cff}
.final-form .check{color:var(--gray)}
.form-note{font-size:13px;color:var(--gray);margin-top:14px}
</style> <div class="section-dark final" id="final"> <section> <div class="container final-grid"> <div> <div class="ph ph-dark"><div class="ph-ico">👤</div><div class="ph-cap"><b>Сюда: фото</b>Дмитрий Корс, сооснователь KORS</div></div> </div> <div class="final-form"> <div class="eyebrow">Свяжемся в течение 10 минут</div> <h2>Обсудим ваш <span class="squig">проект<svg viewBox="0 0 300 24" preserveAspectRatio="none" aria-hidden="true"><path d="M4 14 C70 5 180 4 296 11"/><path d="M140 20 C200 13 255 12 293 16"/></svg></span>?</h2> <p class="sub">За 15–20 минут разберём нишу и текущую ситуацию, покажем, какая модель привлечения заявок сработает у вас, и назовём вилку стоимости.</p> <form id="leadForm" novalidate> <div class="fields"> <div class="field"><input type="text" name="name" placeholder="Ваше имя" required></div> <div class="field"><input type="tel" name="phone" placeholder="Телефон" required></div> </div> <div class="msgr-row" data-group="final"> <button type="button" class="msgr sel">Телефон</button> <button type="button" class="msgr">Telegram</button> <button type="button" class="msgr">WhatsApp</button> <button type="button" class="msgr">MAX</button> </div> <label class="check"><input type="checkbox" required checked> Я принимаю условия <a href="https://korsprod.ru/policy" target="_blank" rel="noopener">политики конфиденциальности</a> и даю согласие на обработку персональных данных</label> <button class="btn btn-primary btn-block" type="submit">Получить план запуска</button> <p class="form-note">⚙️ Форма-макет: перед публикацией подключить отправку (Telegram-бот / почта / CRM).</p> </form> <div class="quiz-done" id="formDone" style="display:none"> <div class="big">🔥</div> <h3 style="color:#fff">Заявка принята</h3> <p style="color:var(--gray)">Свяжемся в течение 10 минут в рабочее время и пришлём план запуска под вашу нишу.</p> </div> </div> </div> </section> </div> <script>
document.querySelectorAll('.msgr-row').forEach(function(row){
  row.querySelectorAll('.msgr').forEach(function(b){
    b.addEventListener('click',function(){
      row.querySelectorAll('.msgr').forEach(function(x){x.classList.remove('sel')});
      b.classList.add('sel');
    });
  });
});
var leadForm=document.getElementById('leadForm');
leadForm.addEventListener('submit',function(e){
  e.preventDefault();
  var name=leadForm.querySelector('[name=name]'),phone=leadForm.querySelector('[name=phone]');
  if(!name.value.trim()){name.focus();return}
  if(phone.value.replace(/\D/g,'').length<10){phone.focus();return}
  leadForm.style.display='none';
  document.getElementById('formDone').style.display='block';
});
</script>

 <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700;800&display=swap" rel="stylesheet"> <style>
:root{
  --bg:#0c0c0e;
  --card:#141416;
  --card-soft:#16161a;
  --dark:#141416;
  --dark-2:#1b1b1f;
  --dark-3:#24242a;
  --ink:#f5f3ef;
  --muted:#9a9a9a;
  --gray:#66645f;
  --line:#2a2a2e;
  --line-dark:rgba(255,255,255,.08);
  --accent:#6d5dfb;
  --accent-txt:#a99cff;
  --accent-2:#ff8562;
  --peach:rgba(109,93,251,.13);
  --green:#6d5dfb;
  --r-lg:44px;
  --r-md:28px;
  --r-sm:16px;
  --font:'Inter Tight',Arial,sans-serif;
  --container:1180px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font);
  font-size:17px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
.container{max-width:var(--container);margin:0 auto;padding:0 24px}
section{padding:92px 0}
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-size:12.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);margin-bottom:20px;
}
.eyebrow::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--accent)}
h1,h2,h3{font-weight:600;letter-spacing:-.03em;line-height:1.06}
h1{font-size:clamp(34px,5vw,64px);letter-spacing:-.035em}
h2{font-size:clamp(28px,3.6vw,46px);margin-bottom:18px}
h3{font-size:21px;line-height:1.2}
.sub{color:var(--muted);font-size:clamp(16px,1.5vw,19px);max-width:640px;letter-spacing:-.01em}
/* рисованное подчёркивание и обводка */
.squig{position:relative;display:inline-block;white-space:nowrap}
.squig svg{position:absolute;left:-2%;bottom:-.16em;width:104%;height:.34em;pointer-events:none}
.squig svg path{stroke:var(--accent-txt);stroke-width:6;fill:none;stroke-linecap:round}
.circled{position:relative;display:inline-block;padding:0 .08em}
.circled svg{position:absolute;left:-9%;top:-16%;width:118%;height:132%;pointer-events:none}
.circled svg path{stroke:var(--accent-txt);stroke-width:6;fill:none;stroke-linecap:round}
/* ---------- Кнопки ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:18px 32px;border-radius:999px;border:none;
  font-family:var(--font);font-size:16px;font-weight:600;letter-spacing:-.01em;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease;
}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{transform:translateY(-2px);background:#5b49f0;box-shadow:0 16px 34px rgba(109,93,251,.4)}
.btn-ghost{background:var(--card);color:var(--ink);box-shadow:0 0 0 1px var(--line)}
.btn-ghost:hover{transform:translateY(-2px);box-shadow:0 0 0 1px var(--accent),0 10px 26px rgba(109,93,251,.22)}
.btn-block{width:100%}
.btn:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
/* ---------- Плейсхолдеры фото/видео ---------- */
.ph{
  border:1.5px dashed rgba(109,93,251,.55);
  background:
    repeating-linear-gradient(-45deg,rgba(109,93,251,.07) 0 14px,transparent 14px 28px),
    var(--card);
  border-radius:var(--r-sm);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  color:var(--muted);text-align:center;padding:18px;min-height:140px;
}
.ph .ph-ico{font-size:26px;line-height:1}
.ph .ph-cap{font-size:13px;font-weight:500;max-width:260px;line-height:1.45}
.ph .ph-cap b{color:var(--accent-txt);display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:4px;font-weight:700}
.ph-dark{background:repeating-linear-gradient(-45deg,rgba(109,93,251,.07) 0 14px,transparent 14px 28px),var(--dark-2);border-color:rgba(109,93,251,.5);color:var(--muted)}
/* ---------- Бегущие строки ---------- */
.marquee{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:22px 0;overflow:hidden;background:var(--bg)}
.marquee-track{display:flex;gap:44px;width:max-content;animation:mq 30s linear infinite}
.marquee-track span{font-weight:600;font-size:15px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);display:flex;align-items:center;gap:44px;white-space:nowrap}
.marquee-track span::after{content:'';width:8px;height:8px;border-radius:50%;background:var(--accent)}
@keyframes mq{to{transform:translateX(-50%)}}
.marquee-accent{border:none;padding:10px 0 26px;background:transparent}
.marquee-accent .marquee-track{animation-duration:22s}
.marquee-accent span{font-size:clamp(22px,3vw,34px);font-weight:700;letter-spacing:-.02em;text-transform:none;color:var(--accent-txt)}
.marquee-accent span::after{background:var(--ink);opacity:.55}
/* ---------- Тёмные секции ---------- */
.section-dark{background:var(--dark);border-radius:var(--r-lg);margin:0 18px;color:#fff;position:relative;overflow:hidden}
.section-dark .eyebrow{color:var(--gray)}
.section-dark .sub{color:var(--gray)}
.ghost{position:absolute;top:26px;left:50%;transform:translateX(-50%);font-size:clamp(90px,15vw,220px);font-weight:700;letter-spacing:-.04em;color:#1c1c22;line-height:1;white-space:nowrap;pointer-events:none;user-select:none}
.section-dark .container{position:relative;z-index:1}
.sec-head-c{text-align:center;max-width:820px;margin:0 auto}
.sec-head-c .sub{margin:0 auto}
/* --- общие: плашки-заметки --- */
.draft-note{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);background:var(--peach);border-radius:999px;padding:10px 18px;margin-top:20px}
.section-dark .draft-note{background:rgba(109,93,251,.16);color:#a99cff}
/* --- общие: поля форм, мессенджеры, экран «заявка принята» --- */
.field input[type=text],.field input[type=tel]{width:100%;background:#1b1b1f;border:1.5px solid transparent;border-radius:18px;padding:17px 20px;color:var(--ink);font-family:var(--font);font-size:15.5px;transition:border-color .15s}
.field input:focus{border-color:var(--accent);outline:none}
.field input::placeholder{color:var(--gray)}
.msgr-row{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.msgr{border:1.5px solid var(--line);border-radius:999px;padding:12px 21px;background:var(--card);color:var(--ink);font-size:14px;font-weight:600;transition:border-color .15s,background .15s}
.msgr.sel{border-color:var(--accent);background:var(--peach);color:var(--accent-txt)}
.check{display:block;position:relative;padding-left:26px;font-size:13px;color:var(--muted);margin-bottom:20px;line-height:1.5}
.check input{position:absolute;left:0;top:3px;accent-color:var(--accent)}
.check a{text-decoration:underline}
.quiz-done{text-align:center;padding:30px 0}
.quiz-done .big{font-size:44px;margin-bottom:14px}
.quiz-done h3{font-size:26px;margin-bottom:10px}
.quiz-done p{color:var(--muted);max-width:420px;margin:0 auto}
/* ---------- Появление при прокрутке ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .6s ease,transform .6s ease}
.reveal.vis{opacity:1;transform:none}
</style> <script>
/* ---------- Появление блоков при прокрутке ----------
   ВАЖНО: блок стоит первым, поэтому запуск отложен до полной загрузки
   разметки — иначе секции ниже не будут найдены. */
var reduced=matchMedia('(prefers-reduced-motion: reduce)').matches;
function korsReveal(){
  var els=document.querySelectorAll('.reveal:not(.vis)');
  if(reduced){els.forEach(function(el){el.classList.add('vis')});return}
  var io=new IntersectionObserver(function(es){es.forEach(function(e){if(e.isIntersecting){e.target.classList.add('vis');io.unobserve(e.target)}})},{threshold:.12});
  els.forEach(function(el){io.observe(el)});
}
if(document.readyState==='loading'){document.addEventListener('DOMContentLoaded',korsReveal)}else{korsReveal()}
window.addEventListener('load',korsReveal);
</script>

 <style>
/* ---------- Header ---------- */
.header{position:fixed;top:0;left:0;right:0;z-index:90;padding:14px 0;transition:background .2s ease,box-shadow .2s ease}
.header.scrolled{background:rgba(12,12,14,.86);backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line)}
.header-in{display:flex;align-items:center;gap:22px}
.logo{font-weight:700;font-size:26px;letter-spacing:-.04em;line-height:1}
.logo span{color:var(--accent)}
.nav{display:flex;gap:4px;margin-left:6px}
.nav a{font-size:14.5px;font-weight:500;color:var(--ink);padding:10px 14px;border-radius:999px;transition:background .15s}
.nav a:hover{background:rgba(255,255,255,.06)}
.header-right{margin-left:auto;display:flex;align-items:center;gap:12px}
.header-phone{font-weight:600;font-size:16px;background:var(--card);border-radius:999px;padding:14px 22px;box-shadow:0 0 0 1px var(--line);letter-spacing:-.01em;transition:transform .15s}
.header-phone:hover{transform:translateY(-2px)}
.msg-ico{width:46px;height:46px;border-radius:50%;background:var(--card);box-shadow:0 0 0 1px var(--line);display:inline-flex;align-items:center;justify-content:center;font-size:17px;transition:transform .15s}
.msg-ico:hover{transform:translateY(-2px)}
.header .btn{padding:14px 24px;font-size:14.5px}
.burger{display:none;background:var(--accent);border:none;border-radius:50%;width:52px;height:52px;color:#fff;font-size:19px;box-shadow:0 6px 18px rgba(109,93,251,.4)}
.mobile-menu{display:none;position:fixed;inset:0;background:var(--bg);z-index:89;padding:110px 28px 28px;flex-direction:column;gap:8px}
.mobile-menu.open{display:flex}
.mobile-menu a{font-size:24px;font-weight:600;letter-spacing:-.02em;padding:10px 0}
.mobile-menu .btn{margin-top:14px;font-size:17px}
</style> <header class="header" id="header"> <div class="container header-in"> <a href="#" class="logo">kors<span>.</span></a> <nav class="nav"> <a href="#cases">Кейсы</a> <a href="#services">Услуги</a> <a href="#process">Процесс</a> <a href="#pricing">Тарифы</a> <a href="#faq">Вопросы</a> </nav> <div class="header-right"> <a class="msg-ico" href="https://t.me/korsprodsale" title="Telegram" aria-label="Telegram">✈️</a> <a class="msg-ico" href="https://wa.me/79158677996" title="WhatsApp" aria-label="WhatsApp">💬</a> <a class="header-phone" href="tel:+79158677996">+7 915 867-79-96</a> <a class="btn btn-primary" href="#quiz">Рассчитать стоимость</a> <button class="burger" id="burger" aria-label="Меню">☰</button> </div> </div> </header> <div class="mobile-menu" id="mobileMenu"> <a href="#cases">Кейсы</a> <a href="#services">Услуги</a> <a href="#process">Процесс</a> <a href="#pricing">Тарифы</a> <a href="#faq">Вопросы</a> <a href="tel:+79158677996">+7 915 867-79-96</a> <a class="btn btn-primary" href="#quiz">Рассчитать стоимость</a> </div> <script>
var header=document.getElementById('header');
addEventListener('scroll',function(){header.classList.toggle('scrolled',scrollY>10)});
var burger=document.getElementById('burger'),mm=document.getElementById('mobileMenu');
burger.addEventListener('click',function(){mm.classList.toggle('open');burger.textContent=mm.classList.contains('open')?'✕':'☰'});
mm.querySelectorAll('a').forEach(function(a){a.addEventListener('click',function(){mm.classList.remove('open');burger.textContent='☰'})});
</script>

 <style>
/* ---------- Подвал ---------- */
.footer{padding:60px 0 42px}
.footer-grid{display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap}
.footer .logo{font-size:28px}
.footer p,.footer a{font-size:14px;color:var(--muted)}
.footer a:hover{color:var(--ink)}
.footer-col{display:flex;flex-direction:column;gap:8px}
.footer-col b{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
.footer-bottom{margin-top:40px;padding-top:24px;border-top:1px solid var(--line);font-size:13px;color:var(--gray);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
</style> <footer class="footer"> <div class="container"> <div class="footer-grid"> <div class="footer-col"> <a href="#" class="logo">kors<span>.</span></a> <p>KORS — студия продающих сайтов и контента<br>для любого бизнеса: от производств до услуг.</p> </div> <div class="footer-col"> <b>Навигация</b> <a href="#cases">Кейсы</a> <a href="#services">Услуги</a> <a href="#process">Процесс</a> <a href="#pricing">Тарифы</a> </div> <div class="footer-col"> <b>Контакты</b> <a href="tel:+79158677996">+7 915 867-79-96</a> <a href="mailto:info@korsprod.ru">info@korsprod.ru</a> <a href="https://t.me/korsprodsale">Telegram — написать</a> <a href="https://t.me/KORSproduct">Telegram — канал</a> <a href="https://wa.me/79158677996">WhatsApp</a> </div> <div class="footer-col"> <b>Документы</b> <a href="https://korsprod.ru/policy">Политика конфиденциальности</a> <a href="https://korsprod.ru/user-agreement">Пользовательское соглашение</a> <p>ИП Кормышова Наталия Михайловна<br>ИНН 682801718806 · ОГРНИП 326680000032471</p> </div> </div> <div class="footer-bottom"> <span>© 2019–2026 KORS</span> <span>Москва · работаем по всей России</span> </div> </div> </footer>

 <style>
/* ---------- Header ---------- */
.header{position:fixed;top:0;left:0;right:0;z-index:90;padding:14px 0;transition:background .2s ease,box-shadow .2s ease}
.header.scrolled{background:rgba(12,12,14,.86);backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line)}
.header-in{display:flex;align-items:center;gap:22px}
.logo{font-weight:700;font-size:26px;letter-spacing:-.04em;line-height:1}
.logo span{color:var(--accent)}
.nav{display:flex;gap:4px;margin-left:6px}
.nav a{font-size:14.5px;font-weight:500;color:var(--ink);padding:10px 14px;border-radius:999px;transition:background .15s}
.nav a:hover{background:rgba(255,255,255,.06)}
.header-right{margin-left:auto;display:flex;align-items:center;gap:12px}
.header-phone{font-weight:600;font-size:16px;background:var(--card);border-radius:999px;padding:14px 22px;box-shadow:0 0 0 1px var(--line);letter-spacing:-.01em;transition:transform .15s}
.header-phone:hover{transform:translateY(-2px)}
.msg-ico{width:46px;height:46px;border-radius:50%;background:var(--card);box-shadow:0 0 0 1px var(--line);display:inline-flex;align-items:center;justify-content:center;font-size:17px;transition:transform .15s}
.msg-ico:hover{transform:translateY(-2px)}
.header .btn{padding:14px 24px;font-size:14.5px}
.burger{display:none;background:var(--accent);border:none;border-radius:50%;width:52px;height:52px;color:#fff;font-size:19px;box-shadow:0 6px 18px rgba(109,93,251,.4)}
.mobile-menu{display:none;position:fixed;inset:0;background:var(--bg);z-index:89;padding:110px 28px 28px;flex-direction:column;gap:8px}
.mobile-menu.open{display:flex}
.mobile-menu a{font-size:24px;font-weight:600;letter-spacing:-.02em;padding:10px 0}
.mobile-menu .btn{margin-top:14px;font-size:17px}
</style> <header class="header" id="header"> <div class="container header-in"> <a href="https://korsprod.ru" class="logo">kors<span>.</span></a> <nav class="nav"> <a href="#cases">Кейсы</a> <a href="#services">Услуги</a> <a href="#process">Процесс</a> <a href="#pricing">Тарифы</a> <a href="#faq">Вопросы</a> </nav> <div class="header-right"> <a class="msg-ico" href="https://t.me/korsprodsale" title="Telegram" aria-label="Telegram">✈️</a> <a class="msg-ico" href="https://wa.me/79158677996" title="WhatsApp" aria-label="WhatsApp">💬</a> <a class="header-phone" href="tel:+79158677996">+7 915 867-79-96</a> <a class="btn btn-primary" href="#quiz">Рассчитать стоимость</a> <button class="burger" id="burger" aria-label="Меню">☰</button> </div> </div> </header> <div class="mobile-menu" id="mobileMenu"> <a href="#cases">Кейсы</a> <a href="#services">Услуги</a> <a href="#process">Процесс</a> <a href="#pricing">Тарифы</a> <a href="#faq">Вопросы</a> <a href="tel:+79158677996">+7 915 867-79-96</a> <a class="btn btn-primary" href="#quiz">Рассчитать стоимость</a> </div> <script>
var header=document.getElementById('header');
addEventListener('scroll',function(){header.classList.toggle('scrolled',scrollY>10)});
var burger=document.getElementById('burger'),mm=document.getElementById('mobileMenu');
burger.addEventListener('click',function(){mm.classList.toggle('open');burger.textContent=mm.classList.contains('open')?'✕':'☰'});
mm.querySelectorAll('a').forEach(function(a){a.addEventListener('click',function(){mm.classList.remove('open');burger.textContent='☰'})});
</script>

 <style>
/* ---------- Подход ---------- */
.diff-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:44px}
.diff-card{background:var(--card);border-radius:var(--r-md);padding:32px;box-shadow:0 0 0 1px var(--line)}
.diff-card .n{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:var(--peach);color:#a99cff;font-weight:700;font-size:15px;margin-bottom:18px}
.diff-card h3{margin-bottom:10px}
.diff-card p{color:var(--muted);font-size:15px}
.diff-bonus{margin-top:16px;background:var(--peach);border:1px solid rgba(109,93,251,.3);border-radius:var(--r-md);padding:28px 32px;display:flex;gap:18px;align-items:flex-start}
.diff-bonus .ico{font-size:28px;line-height:1;margin-top:2px}
.diff-bonus b{display:block;margin-bottom:6px;font-size:18px;letter-spacing:-.02em}
.diff-bonus p{color:#b9b2e8;font-size:15px}
</style> <section style="padding-top:0"> <div class="container"> <div class="eyebrow reveal">Подход</div> <h2 class="reveal">Вы получаете не «страницу с кнопкой», а <span class="squig">упаковку бизнеса<svg viewBox="0 0 300 24" preserveAspectRatio="none" aria-hidden="true"><path d="M4 14 C70 5 180 4 296 11"/><path d="M140 20 C200 13 255 12 293 16"/></svg></span></h2> <p class="sub reveal">Дизайн — последний слой. Сначала достаём то, за что вам на самом деле платят клиенты.</p> <div class="diff-grid"> <div class="diff-card reveal"> <span class="n">01</span> <h3>Достаём сильные стороны</h3> <p>Двухчасовое интервью и 100+ вопросов о продукте, клиентах и сделках. Вытаскиваем то, что вы сами считаете «само собой разумеющимся», а для клиента это решающий аргумент.</p> </div> <div class="diff-card reveal"> <span class="n">02</span> <h3>Собираем это в оффер</h3> <p>Формулируем так, чтобы при сравнении с конкурентами выбор был очевиден. Конкретика вместо «высокого качества и индивидуального подхода».</p> </div> <div class="diff-card reveal"> <span class="n">03</span> <h3>Закрываем возражения</h3> <p>Изучаем страхи и сомнения вашей аудитории — и отвечаем на них прямо в структуре страницы, до звонка менеджера.</p> </div> </div> <div class="diff-bonus reveal"> <div class="ico">🗂️</div> <div> <b>Карта смыслов остаётся у вас навсегда</b> <p>Готовый документ с оффером, преимуществами и ответами на возражения. Используйте его в рекламных креативах, соцсетях, презентациях и обучении менеджеров по продажам.</p> </div> </div> <div class="diff-bonus reveal"> <div class="ico">📹</div> <div> <b>Контент вашего бизнеса — вместо стоков</b> <p>У KORS своя съёмочная команда: приезжаем к вам — в цех, шоурум, клинику или офис, — снимаем фото и видео и ставим их на сайт. Клиент видит реальный бизнес, а не картинки из фотобанка — доверие и конверсия растут.</p> </div> </div> </div> </section>

 <style>
/* ---------- Header ---------- */
.header{position:fixed;top:0;left:0;right:0;z-index:90;padding:14px 0;transition:background .2s ease,box-shadow .2s ease}
.header.scrolled{background:rgba(12,12,14,.86);backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line)}
.header-in{display:flex;align-items:center;gap:22px}
.logo{font-weight:700;font-size:26px;letter-spacing:-.04em;line-height:1}
.logo span{color:var(--accent)}
.nav{display:flex;gap:2px;margin-left:0}
.nav a{font-size:14.5px;font-weight:500;color:var(--ink);padding:10px 9px;border-radius:999px;transition:background .15s}
.nav a:hover{background:rgba(255,255,255,.06)}
.header-right{margin-left:auto;display:flex;align-items:center;gap:12px}
.header-phone{font-weight:600;font-size:16px;background:var(--card);border-radius:999px;padding:14px 22px;box-shadow:0 0 0 1px var(--line);letter-spacing:-.01em;transition:transform .15s}
.header-phone:hover{transform:translateY(-2px)}
.msg-ico{width:46px;height:46px;border-radius:50%;background:var(--card);box-shadow:0 0 0 1px var(--line);display:inline-flex;align-items:center;justify-content:center;font-size:17px;transition:transform .15s}
.msg-ico:hover{transform:translateY(-2px)}
.header .btn{padding:14px 24px;font-size:14.5px}
.burger{display:none;background:var(--accent);border:none;border-radius:50%;width:52px;height:52px;color:#fff;font-size:19px;box-shadow:0 6px 18px rgba(109,93,251,.4)}
.mobile-menu{display:none;position:fixed;inset:0;background:var(--bg);z-index:89;padding:110px 28px 28px;flex-direction:column;gap:8px}
.mobile-menu.open{display:flex}
.mobile-menu a{font-size:24px;font-weight:600;letter-spacing:-.02em;padding:10px 0}
.mobile-menu .btn{margin-top:14px;font-size:17px}
@media(max-width:1160px){.nav{display:none}.header-phone{display:none}.burger{display:block}}
</style> <header class="header" id="header"> <div class="container header-in"> <a href="https://korsprod.ru" class="logo">kors<span>.</span></a> <nav class="nav"> <a href="#cases">Кейсы</a> <a href="#services">Услуги</a> <a href="#process">Процесс</a> <a href="#pricing">Тарифы</a> <a href="#faq">Вопросы</a> <a href="https://korsprod.ru">Упаковка бизнеса ↗</a> </nav> <div class="header-right"> <a class="msg-ico" href="https://t.me/korsprodsale" title="Telegram" aria-label="Telegram">✈️</a> <a class="msg-ico" href="https://wa.me/79158677996" title="WhatsApp" aria-label="WhatsApp">💬</a> <a class="header-phone" href="tel:+79158677996">+7 915 867-79-96</a> <a class="btn btn-primary" href="#quiz">Рассчитать стоимость</a> <button class="burger" id="burger" aria-label="Меню">☰</button> </div> </div> </header> <div class="mobile-menu" id="mobileMenu"> <a href="#cases">Кейсы</a> <a href="#services">Услуги</a> <a href="#process">Процесс</a> <a href="#pricing">Тарифы</a> <a href="#faq">Вопросы</a> <a href="https://korsprod.ru">Упаковка бизнеса ↗</a> <a href="tel:+79158677996">+7 915 867-79-96</a> <a class="btn btn-primary" href="#quiz">Рассчитать стоимость</a> </div> <script>
var header=document.getElementById('header');
addEventListener('scroll',function(){header.classList.toggle('scrolled',scrollY>10)});
var burger=document.getElementById('burger'),mm=document.getElementById('mobileMenu');
burger.addEventListener('click',function(){mm.classList.toggle('open');burger.textContent=mm.classList.contains('open')?'✕':'☰'});
mm.querySelectorAll('a').forEach(function(a){a.addEventListener('click',function(){mm.classList.remove('open');burger.textContent='☰'})});
</script>

 <style>
/* ---------- Header ---------- */
.header{position:fixed;top:0;left:0;right:0;z-index:90;padding:14px 0;transition:background .2s ease,box-shadow .2s ease}
.header.scrolled{background:rgba(12,12,14,.86);backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line)}
.header-in{display:flex;align-items:center;gap:22px}
.logo{font-weight:700;font-size:26px;letter-spacing:-.04em;line-height:1}
.logo span{color:var(--accent)}
.nav{display:flex;gap:4px;margin-left:6px}
.nav a{font-size:14.5px;font-weight:500;color:var(--ink);padding:10px 14px;border-radius:999px;transition:background .15s}
.nav a:hover{background:rgba(255,255,255,.06)}
.header-right{margin-left:auto;display:flex;align-items:center;gap:12px}
.header-phone{font-weight:600;font-size:16px;background:var(--card);border-radius:999px;padding:14px 22px;box-shadow:0 0 0 1px var(--line);letter-spacing:-.01em;transition:transform .15s}
.header-phone:hover{transform:translateY(-2px)}
.msg-ico{width:46px;height:46px;border-radius:50%;background:var(--card);box-shadow:0 0 0 1px var(--line);display:inline-flex;align-items:center;justify-content:center;font-size:17px;transition:transform .15s}
.msg-ico:hover{transform:translateY(-2px)}
.header .btn{padding:14px 24px;font-size:14.5px}
.burger{display:none;background:var(--accent);border:none;border-radius:50%;width:52px;height:52px;color:#fff;font-size:19px;box-shadow:0 6px 18px rgba(109,93,251,.4)}
.mobile-menu{display:none;position:fixed;inset:0;background:var(--bg);z-index:89;padding:110px 28px 28px;flex-direction:column;gap:8px}
.mobile-menu.open{display:flex}
.mobile-menu a{font-size:24px;font-weight:600;letter-spacing:-.02em;padding:10px 0}
.mobile-menu .btn{margin-top:14px;font-size:17px}
</style> <header class="header" id="header"> <div class="container header-in"> <a href="https://korsprod.ru" class="logo">kors<span>.</span></a> <nav class="nav"> <a href="#cases">Кейсы</a> <a href="#services">Услуги</a> <a href="#pricing">Тарифы</a> <a href="#faq">Вопросы</a> <a href="https://korsprod.ru">Упаковка бизнеса ↗</a> </nav> <div class="header-right"> <a class="msg-ico" href="https://t.me/korsprodsale" title="Telegram" aria-label="Telegram">✈️</a> <a class="msg-ico" href="https://wa.me/79158677996" title="WhatsApp" aria-label="WhatsApp">💬</a> <a class="header-phone" href="tel:+79158677996">+7 915 867-79-96</a> <a class="btn btn-primary" href="#quiz">Рассчитать стоимость</a> <button class="burger" id="burger" aria-label="Меню">☰</button> </div> </div> </header> <div class="mobile-menu" id="mobileMenu"> <a href="#cases">Кейсы</a> <a href="#services">Услуги</a> <a href="#pricing">Тарифы</a> <a href="#faq">Вопросы</a> <a href="https://korsprod.ru">Упаковка бизнеса ↗</a> <a href="tel:+79158677996">+7 915 867-79-96</a> <a class="btn btn-primary" href="#quiz">Рассчитать стоимость</a> </div> <script>
var header=document.getElementById('header');
addEventListener('scroll',function(){header.classList.toggle('scrolled',scrollY>10)});
var burger=document.getElementById('burger'),mm=document.getElementById('mobileMenu');
burger.addEventListener('click',function(){mm.classList.toggle('open');burger.textContent=mm.classList.contains('open')?'✕':'☰'});
mm.querySelectorAll('a').forEach(function(a){a.addEventListener('click',function(){mm.classList.remove('open');burger.textContent='☰'})});
</script>

 <!--!ANNEXX!--><!--!ANX804-2!--!><!--![{"id":"anxcommentblock","data":""},{"id":"stop","data":"700"},{"id":"speed","data":"70"},{"id":"disablesafari","data":"false"},{"id":"width-checkbox","data":"0-479,480-639,640-959,960-1199,1200-20000"}]!--> <script> (() => { let arrWidth = "0-479,480-639,640-959,960-1199,1200-20000".split(/,\s|,/g).map(e => e.split('-').map(e => +e)); function checkWidth() { let windowWidth = navigator.maxTouchPoints ? window.outerWidth : window.innerWidth; return arrWidth.some(e => e[0] <= windowWidth && windowWidth <= e[1] ? true : false ); } if (checkWidth() && (!(false && /safari/i.test(navigator.userAgent) && !(/chrome/i.test(navigator.userAgent) && /intel/i.test(navigator.userAgent)) && /Macintosh/i.test(navigator.userAgent)))) { (function () { var defaultOptions = { frameRate : 150, animationTime : 400, stepSize : 100, pulseAlgorithm : true, pulseScale : 4, pulseNormalize : 1, accelerationDelta : 50, accelerationMax : 3, keyboardSupport : true, arrowScroll : 50, fixedBackground : true, excluded : '' }; var options = defaultOptions; var isExcluded = false; var isFrame = false; var direction = { x: 0, y: 0 }; var initDone = false; var root = document.documentElement; var activeElement; var observer; var refreshSize; var deltaBuffer = []; var deltaBufferTimer; var isMac = /^Mac/.test(navigator.platform); var key = { left: 37, up: 38, right: 39, down: 40, spacebar: 32, pageup: 33, pagedown: 34, end: 35, home: 36 }; var arrowKeys = { 37: 1, 38: 1, 39: 1, 40: 1 }; function initTest() { if (options.keyboardSupport) { addEvent('keydown', keydown); } } function init() { if (initDone || !document.body) return; initDone = true; var body = document.body; var html = document.documentElement; var windowHeight = window.innerHeight; var scrollHeight = body.scrollHeight; root = (document.compatMode.indexOf('CSS') >= 0) ? html : body; activeElement = body; initTest(); if (top != self) { isFrame = true; } else if (isOldSafari && scrollHeight > windowHeight && (body.offsetHeight <= windowHeight || html.offsetHeight <= windowHeight)) { var fullPageElem = document.createElement('div'); fullPageElem.style.cssText = 'position:absolute; z-index:-10000; ' + 'top:0; left:0; right:0; height:' + root.scrollHeight + 'px'; document.body.appendChild(fullPageElem); var pendingRefresh; refreshSize = function () { if (pendingRefresh) return; pendingRefresh = setTimeout(function () { if (isExcluded) return; fullPageElem.style.height = '0'; fullPageElem.style.height = root.scrollHeight + 'px'; pendingRefresh = null; }, 500); }; setTimeout(refreshSize, 10); addEvent('resize', refreshSize); var config = { attributes: true, childList: true, characterData: false }; observer = new MutationObserver(refreshSize); observer.observe(body, config); if (root.offsetHeight <= windowHeight) { var clearfix = document.createElement('div'); clearfix.style.clear = 'both'; body.appendChild(clearfix); } } if (!options.fixedBackground && !isExcluded) { body.style.backgroundAttachment = 'scroll'; html.style.backgroundAttachment = 'scroll'; } } function cleanup() { observer && observer.disconnect(); removeEvent(wheelEvent, wheel); removeEvent('mousedown', mousedown); removeEvent('keydown', keydown); removeEvent('resize', refreshSize); removeEvent('load', init); } var que = []; var pending = false; var lastScroll = Date.now(); function scrollArray(elem, left, top) { directionCheck(left, top); if (options.accelerationMax != 1) { var now = Date.now(); var elapsed = now - lastScroll; if (elapsed < options.accelerationDelta) { var factor = (1 + (50 / elapsed)) / 2; if (factor > 1) { factor = Math.min(factor, options.accelerationMax); left *= factor; top *= factor; } } lastScroll = Date.now(); } que.push({ x: left, y: top, lastX: (left < 0) ? 0.99 : -0.99, lastY: (top < 0) ? 0.99 : -0.99, start: Date.now() }); if (pending) { return; } var scrollRoot = getScrollRoot(); var isWindowScroll = (elem === scrollRoot || elem === document.body); if (elem.$scrollBehavior == null && isScrollBehaviorSmooth(elem)) { elem.$scrollBehavior = elem.style.scrollBehavior; elem.style.scrollBehavior = 'auto'; } var step = function (time) { var now = Date.now(); var scrollX = 0; var scrollY = 0; for (var i = 0; i < que.length; i++) { var item = que[i]; var elapsed = now - item.start; var finished = (elapsed >= options.animationTime); var position = (finished) ? 1 : elapsed / options.animationTime; if (options.pulseAlgorithm) { position = pulse(position); } var x = (item.x * position - item.lastX) >> 0; var y = (item.y * position - item.lastY) >> 0; scrollX += x; scrollY += y; item.lastX += x; item.lastY += y; if (finished) { que.splice(i, 1); i--; } } if (isWindowScroll) { window.scrollBy(scrollX, scrollY); } else { if (scrollX) elem.scrollLeft += scrollX; if (scrollY) elem.scrollTop += scrollY; } if (!left && !top) { que = []; } if (que.length) { requestFrame(step, elem, (1000 / options.frameRate + 1)); } else { pending = false; if (elem.$scrollBehavior != null) { elem.style.scrollBehavior = elem.$scrollBehavior; elem.$scrollBehavior = null; } } }; requestFrame(step, elem, 0); pending = true; } function wheel(event) { if (!initDone) { init(); } var target = event.target; if (event.defaultPrevented || event.ctrlKey) { return true; } if (isNodeName(activeElement, 'embed') || (isNodeName(target, 'embed') && /\.pdf/i.test(target.src)) || isNodeName(activeElement, 'object') || target.shadowRoot) { return true; } var deltaX = -event.wheelDeltaX || event.deltaX || 0; var deltaY = -event.wheelDeltaY || event.deltaY || 0; if (isMac) { if (event.wheelDeltaX && isDivisible(event.wheelDeltaX, 120)) { deltaX = -120 * (event.wheelDeltaX / Math.abs(event.wheelDeltaX)); } if (event.wheelDeltaY && isDivisible(event.wheelDeltaY, 120)) { deltaY = -120 * (event.wheelDeltaY / Math.abs(event.wheelDeltaY)); } } if (!deltaX && !deltaY) { deltaY = -event.wheelDelta || 0; } if (event.deltaMode === 1) { deltaX *= 40; deltaY *= 40; } var overflowing = overflowingAncestor(target); if (!overflowing) { if (isFrame && isChrome) { Object.defineProperty(event, "target", {value: window.frameElement}); return parent.wheel(event); } return true; } if (Math.abs(deltaX) > 1.2) { deltaX *= options.stepSize / 120; } if (Math.abs(deltaY) > 1.2) { deltaY *= options.stepSize / 120; } scrollArray(overflowing, deltaX, deltaY); event.preventDefault(); scheduleClearCache(); } function keydown(event) { var target = event.target; var modifier = event.ctrlKey || event.altKey || event.metaKey || (event.shiftKey && event.keyCode !== key.spacebar); if (!document.body.contains(activeElement)) { activeElement = document.activeElement; } var inputNodeNames = /^(textarea|select|embed|object)$/i; var buttonTypes = /^(button|submit|radio|checkbox|file|color|image)$/i; if ( event.defaultPrevented || inputNodeNames.test(target.nodeName) || isNodeName(target, 'input') && !buttonTypes.test(target.type) || isNodeName(activeElement, 'video') || isInsideYoutubeVideo(event) || target.isContentEditable || modifier ) { return true; } if ((isNodeName(target, 'button') || isNodeName(target, 'input') && buttonTypes.test(target.type)) && event.keyCode === key.spacebar) { return true; } if (isNodeName(target, 'input') && target.type == 'radio' && arrowKeys[event.keyCode]) { return true; } var shift, x = 0, y = 0; var overflowing = overflowingAncestor(activeElement); if (!overflowing) { return (isFrame && isChrome) ? parent.keydown(event) : true; } var clientHeight = overflowing.clientHeight; if (overflowing == document.body) { clientHeight = window.innerHeight; } switch (event.keyCode) { case key.up: y = -options.arrowScroll; break; case key.down: y = options.arrowScroll; break; case key.spacebar: shift = event.shiftKey ? 1 : -1; y = -shift * clientHeight * 0.9; break; case key.pageup: y = -clientHeight * 0.9; break; case key.pagedown: y = clientHeight * 0.9; break; case key.home: if (overflowing == document.body && document.scrollingElement) overflowing = document.scrollingElement; y = -overflowing.scrollTop; break; case key.end: var scroll = overflowing.scrollHeight - overflowing.scrollTop; var scrollRemaining = scroll - clientHeight; y = (scrollRemaining > 0) ? scrollRemaining + 10 : 0; break; case key.left: x = -options.arrowScroll; break; case key.right: x = options.arrowScroll; break; default: return true; } scrollArray(overflowing, x, y); event.preventDefault(); scheduleClearCache(); } function mousedown(event) { activeElement = event.target; } var uniqueID = (function () { var i = 0; return function (el) { return el.uniqueID || (el.uniqueID = i++); }; })(); var cacheX = {}; var cacheY = {}; var clearCacheTimer; var smoothBehaviorForElement = {}; function scheduleClearCache() { clearTimeout(clearCacheTimer); clearCacheTimer = setInterval(function () { cacheX = cacheY = smoothBehaviorForElement = {}; }, 1*1000); } function setCache(elems, overflowing, x) { var cache = x ? cacheX : cacheY; for (var i = elems.length; i--;) cache[uniqueID(elems[i])] = overflowing; return overflowing; } function getCache(el, x) { return (x ? cacheX : cacheY)[uniqueID(el)]; } function overflowingAncestor(el) { var elems = []; var body = document.body; var rootScrollHeight = root.scrollHeight; do { var cached = getCache(el, false); if (cached) { return setCache(elems, cached); } elems.push(el); if (rootScrollHeight === el.scrollHeight) { var topOverflowsNotHidden = overflowNotHidden(root) && overflowNotHidden(body); var isOverflowCSS = topOverflowsNotHidden || overflowAutoOrScroll(root); if (isFrame && isContentOverflowing(root) || !isFrame && isOverflowCSS) { return setCache(elems, getScrollRoot()); } } else if (isContentOverflowing(el) && overflowAutoOrScroll(el)) { return setCache(elems, el); } } while ((el = el.parentElement)); } function isContentOverflowing(el) { return (el.clientHeight + 10 < el.scrollHeight); } function overflowNotHidden(el) { var overflow = getComputedStyle(el, '').getPropertyValue('overflow-y'); return (overflow !== 'hidden'); } function overflowAutoOrScroll(el) { var overflow = getComputedStyle(el, '').getPropertyValue('overflow-y'); return (overflow === 'scroll' || overflow === 'auto'); } function isScrollBehaviorSmooth(el) { var id = uniqueID(el); if (smoothBehaviorForElement[id] == null) { var scrollBehavior = getComputedStyle(el, '')['scroll-behavior']; smoothBehaviorForElement[id] = ('smooth' == scrollBehavior); } return smoothBehaviorForElement[id]; } function addEvent(type, fn, arg) { window.addEventListener(type, fn, arg || false); } function removeEvent(type, fn, arg) { window.removeEventListener(type, fn, arg || false); } function isNodeName(el, tag) { return el && (el.nodeName||'').toLowerCase() === tag.toLowerCase(); } function directionCheck(x, y) { x = (x > 0) ? 1 : -1; y = (y > 0) ? 1 : -1; if (direction.x !== x || direction.y !== y) { direction.x = x; direction.y = y; que = []; lastScroll = 0; } } if (window.localStorage && localStorage.SS_deltaBuffer) { try { deltaBuffer = localStorage.SS_deltaBuffer.split(','); } catch (e) { } } function isTouchpad(deltaY) { if (!deltaY) return; if (!deltaBuffer.length) { deltaBuffer = [deltaY, deltaY, deltaY]; } deltaY = Math.abs(deltaY); deltaBuffer.push(deltaY); deltaBuffer.shift(); clearTimeout(deltaBufferTimer); deltaBufferTimer = setTimeout(function () { try { localStorage.SS_deltaBuffer = deltaBuffer.join(','); } catch (e) { } }, 1000); var dpiScaledWheelDelta = deltaY > 120 && allDeltasDivisableBy(deltaY); var tp = !allDeltasDivisableBy(120) && !allDeltasDivisableBy(100) && !dpiScaledWheelDelta; if (deltaY < 50) return true; return tp; } function isDivisible(n, divisor) { return (Math.floor(n / divisor) == n / divisor); } function allDeltasDivisableBy(divisor) { return (isDivisible(deltaBuffer[0], divisor) && isDivisible(deltaBuffer[1], divisor) && isDivisible(deltaBuffer[2], divisor)); } function isInsideYoutubeVideo(event) { var elem = event.target; var isControl = false; if (document.URL.indexOf ('www.youtube.com/watch') != -1) { do { isControl = (elem.classList && elem.classList.contains('html5-video-controls')); if (isControl) break; } while ((elem = elem.parentNode)); } return isControl; } var requestFrame = (function () { return (window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function (callback, element, delay) { window.setTimeout(callback, delay || (1000/60)); }); })(); var MutationObserver = (window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver); var getScrollRoot = (function() { var SCROLL_ROOT = document.scrollingElement; return function() { if (!SCROLL_ROOT) { var dummy = document.createElement('div'); dummy.style.cssText = 'height:10000px;width:1px;'; document.body.appendChild(dummy); var bodyScrollTop = document.body.scrollTop; var docElScrollTop = document.documentElement.scrollTop; window.scrollBy(0, 3); if (document.body.scrollTop != bodyScrollTop) (SCROLL_ROOT = document.body); else (SCROLL_ROOT = document.documentElement); window.scrollBy(0, -3); document.body.removeChild(dummy); } return SCROLL_ROOT; }; })(); function pulse_(x) { var val, start, expx; x = x * options.pulseScale; if (x < 1) { val = x - (1 - Math.exp(-x)); } else { start = Math.exp(-1); x -= 1; expx = 1 - Math.exp(-x); val = start + (expx * (1 - start)); } return val * options.pulseNormalize; } function pulse(x) { if (x >= 1) return 1; if (x <= 0) return 0; if (options.pulseNormalize == 1) { options.pulseNormalize /= pulse_(1); } return pulse_(x); } var userAgent = window.navigator.userAgent; var isEdge = /Edge/.test(userAgent); var isChrome = /chrome/i.test(userAgent) && !isEdge; var isSafari = /safari/i.test(userAgent) && !isChrome && !isEdge; var isMobile = /mobile/i.test(userAgent); var isIEWin7 = /Windows NT 6.1/i.test(userAgent) && /rv:11/i.test(userAgent); var isOldSafari = isSafari && (/Version\/8/i.test(userAgent) || /Version\/9/i.test(userAgent)) && !isChrome; var isEnabledForBrowser = (isChrome || isSafari || isIEWin7) && !isMobile; var supportsPassive = false; try { window.addEventListener("test", null, Object.defineProperty({}, 'passive', { get: function () { supportsPassive = true; } })); } catch(e) {} var wheelOpt = supportsPassive ? { passive: false } : false; var wheelEvent = 'onwheel' in document.createElement('div') ? 'wheel' : 'mousewheel'; if (wheelEvent && isEnabledForBrowser) { addEvent(wheelEvent, wheel, wheelOpt); addEvent('mousedown', mousedown); addEvent('load', init); } function SmoothScroll(optionsToSet) { for (var key in optionsToSet) if (defaultOptions.hasOwnProperty(key)) options[key] = optionsToSet[key]; } SmoothScroll.destroy = cleanup; if (window.SmoothScrollOptions) SmoothScroll(window.SmoothScrollOptions); if (typeof define === 'function' && define.amd) define(function() { return SmoothScroll; }); else if ('object' == typeof exports) module.exports = SmoothScroll; else window.SmoothScroll = SmoothScroll; })(); SmoothScroll({ animationTime: 700, stepSize: 70, accelerationDelta: 150, accelerationMax: 10, keyboardSupport: true, arrowScroll: 50, pulseAlgorithm: true, pulseScale: 5, pulseNormalize: 1, fixedBackground: true, touchpadSupport: true }); } })() </script>

 <!-- KORS · С ЧЕМ ПРИХОДЯТ · блок T123 · кадры плёнки --> <style>
/* прячем прежние версии этого блока (не удалять) */
#rec2501102751,#rec2502137351,#rec2503322411,#rec2503013571,#rec2504777411,#rec2516609201,#rec2671851901,#rec2671960201,#rec2648640701{display:none!important;}

/* ================= ДЕСКТОП ================= */
.ksit{--bg:#0C0C0E;--border:#2A2A2E;--text:#F5F3EF;--muted:#9A9A9A;--accent:#6D5DFB;background:var(--bg);color:var(--text);font-family:'Manrope',Arial,sans-serif;padding:84px 40px 92px;overflow:hidden}
.ksit *{box-sizing:border-box}
.ksit__wrap{max-width:1240px;margin:0 auto;position:relative}
.ksit__eyebrow{font-family:'Unbounded',sans-serif;font-size:12px;font-weight:600;letter-spacing:.14em;color:var(--accent);margin-bottom:16px;display:flex;align-items:center;gap:8px}
.ksit__eyebrow:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px rgba(109,93,251,.65)}
.ksit__title{font-family:'Unbounded',sans-serif;font-size:clamp(28px,3.6vw,46px);line-height:1.15;letter-spacing:-.02em;font-weight:700;max-width:820px;margin:0 0 44px}
.ksit__grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,auto);gap:18px}
.ksit__card{position:relative;min-height:172px;border:1px solid var(--border);border-radius:10px;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;transition:transform .28s ease,border-color .28s ease}
/* подложка под будущее фото: сейчас градиент, потом background-image одной строкой */
.ksit__shot{position:absolute;left:0;top:0;right:0;bottom:0;z-index:1;background-size:cover;background-position:center;background-repeat:no-repeat}
/* тонкая диагональная штриховка поверх кадра */
.ksit__card:before{content:"";position:absolute;left:0;top:0;right:0;bottom:0;z-index:2;pointer-events:none;background:repeating-linear-gradient(135deg,rgba(255,255,255,.055) 0 1px,rgba(255,255,255,0) 1px 7px)}
/* затемнение снизу, чтобы текст читался на любом кадре */
.ksit__card:after{content:"";position:absolute;left:0;right:0;bottom:0;height:64%;z-index:3;pointer-events:none;background:linear-gradient(to top,rgba(8,8,10,.9),rgba(8,8,10,0))}
.ksit__card:hover{transform:translateY(-3px);border-color:var(--accent)}
.ksit__tc{position:absolute;top:12px;left:12px;z-index:5;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,'Courier New',monospace;font-size:10px;line-height:1;letter-spacing:.08em;color:#EDEBE7;background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.1);border-radius:5px;padding:5px 8px;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.ksit__txt{position:relative;z-index:5;margin:0;padding:20px 20px 18px;font-size:16px;line-height:1.35;font-weight:700;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.8)}

/* кадры: пока градиенты, каждая карточка своим оттенком */
.ksit__card--1 .ksit__shot{/* здесь будет кадр производства */background-image:linear-gradient(152deg,#23232C 0%,#16161B 58%,#0F0F13 100%)}
.ksit__card--2 .ksit__shot{/* здесь будет кадр производства */background-image:linear-gradient(152deg,#1E202A 0%,#141519 58%,#0E0E12 100%)}
.ksit__card--3 .ksit__shot{/* здесь будет кадр производства */background-image:linear-gradient(152deg,#262029 0%,#171418 58%,#100F12 100%)}
.ksit__card--4 .ksit__shot{/* здесь будет кадр производства */background-image:linear-gradient(152deg,#1F242A 0%,#141719 58%,#0E1012 100%)}
.ksit__card--5 .ksit__shot{/* здесь будет кадр производства */background-image:linear-gradient(152deg,#242028 0%,#161418 58%,#0F0E11 100%)}
.ksit__card--6 .ksit__shot{/* здесь будет кадр производства */background-image:linear-gradient(152deg,#1D2229 0%,#131619 58%,#0D0F12 100%)}

/* ================= ПЛАНШЕТ ================= */
@media screen and (min-width:641px) and (max-width:960px){
.ksit{padding:68px 24px 76px}
.ksit__title{font-size:32px;margin:0 0 32px}
.ksit__grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(3,auto);gap:14px}
.ksit__card{min-height:158px}
.ksit__txt{font-size:15px;padding:18px 18px 16px}
}

/* ================= МОБИЛЬНАЯ ВЕРСИЯ · отдельная вёрстка, проверено на 390px ================= */
@media screen and (max-width:640px){
.ksit{padding:52px 16px 56px}
.ksit__wrap{max-width:100%}
.ksit__eyebrow{font-size:10px;letter-spacing:.12em;margin-bottom:11px;gap:7px}
.ksit__eyebrow:before{width:6px;height:6px}
.ksit__title{font-size:25px;line-height:1.18;max-width:100%;margin:0 0 20px}
.ksit__grid{display:grid;grid-template-columns:1fr;grid-template-rows:repeat(6,auto);gap:10px}
.ksit__card{min-height:132px;border-radius:10px}
.ksit__card:before{background:repeating-linear-gradient(135deg,rgba(255,255,255,.055) 0 1px,rgba(255,255,255,0) 1px 6px)}
.ksit__card:after{height:72%}
.ksit__card:hover{transform:none;border-color:var(--border)}
.ksit__tc{top:9px;left:9px;font-size:9px;padding:4px 6px;border-radius:4px;letter-spacing:.06em}
.ksit__txt{padding:14px 14px 13px;font-size:14px;line-height:1.3}
}
</style> <section class="ksit" aria-labelledby="ksit-title"> <div class="ksit__wrap"> <div class="ksit__eyebrow">С ЧЕМ ПРИХОДЯТ</div> <h2 class="ksit__title" id="ksit-title">Проблемы компаний, которые мы слышим</h2> <ul class="ksit__grid"> <li class="ksit__card ksit__card--1"><!-- /* здесь будет кадр производства */ --><span class="ksit__shot"></span><span class="ksit__tc">01 · ПЕРЕГОВОРЫ</span><p class="ksit__txt">На переговорах масштаб приходится объяснять на словах</p></li> <li class="ksit__card ksit__card--2"><!-- /* здесь будет кадр производства */ --><span class="ksit__shot"></span><span class="ksit__tc">02 · ПРОДАЖИ</span><p class="ksit__txt">Менеджерам нечего отправить, кроме прайса и старого PDF</p></li> <li class="ksit__card ksit__card--3"><!-- /* здесь будет кадр производства */ --><span class="ksit__shot"></span><span class="ksit__tc">03 · ВЫСТАВКА</span><p class="ksit__txt">Через месяц выставка, показать нечего</p></li> <li class="ksit__card ksit__card--4"><!-- /* здесь будет кадр производства */ --><span class="ksit__shot"></span><span class="ksit__tc">04 · ПРОИЗВОДСТВО</span><p class="ksit__txt">Нужно показать производство</p></li> <li class="ksit__card ksit__card--5"><!-- /* здесь будет кадр производства */ --><span class="ksit__shot"></span><span class="ksit__tc">05 · РОСТ</span><p class="ksit__txt">Компания выросла, а материалы остались прежними</p></li> <li class="ksit__card ksit__card--6"><!-- /* здесь будет кадр производства */ --><span class="ksit__shot"></span><span class="ksit__tc">06 · ЭКСПОРТ</span><p class="ksit__txt">Выходим на экспорт</p></li> </ul> </div> </section>

<!-- KORS · С ЧЕМ ПРИХОДЯТ · блок T123 · кадры плёнки --> <style>
/* прячем прежние версии этого блока (не удалять) */
#rec2501102751,#rec2502137351,#rec2503322411,#rec2503013571,#rec2504777411,#rec2516609201,#rec2671851901,#rec2671960201,#rec2648640701{display:none!important;}

/* ================= ДЕСКТОП ================= */
.ksit{--bg:#0C0C0E;--border:#2A2A2E;--text:#F5F3EF;--muted:#9A9A9A;--accent:#6D5DFB;background:var(--bg);color:var(--text);font-family:'Manrope',Arial,sans-serif;padding:84px 40px 92px;overflow:hidden}
.ksit *{box-sizing:border-box}
.ksit__wrap{max-width:1240px;margin:0 auto;position:relative}
.ksit__eyebrow{font-family:'Unbounded',sans-serif;font-size:12px;font-weight:600;letter-spacing:.14em;color:var(--accent);margin-bottom:16px;display:flex;align-items:center;gap:8px}
.ksit__eyebrow:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px rgba(109,93,251,.65)}
.ksit__title{font-family:'Unbounded',sans-serif;font-size:clamp(28px,3.6vw,46px);line-height:1.15;letter-spacing:-.02em;font-weight:700;max-width:820px;margin:0 0 44px}
.ksit__grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,auto);gap:18px}
.ksit__card{position:relative;min-height:172px;border:1px solid var(--border);border-radius:10px;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;transition:transform .28s ease,border-color .28s ease}
/* фото карточки лежит в переменной --shot, поверх него диагональное затемнение: сильнее в левом нижнем углу, слабее к верху и вправо */
.ksit__shot{position:absolute;left:0;top:0;right:0;bottom:0;z-index:1;background-color:#16161B;background-image:linear-gradient(to top right,rgba(16,14,24,.38) 0%,rgba(16,14,24,.26) 46%,rgba(16,14,24,.14) 100%),var(--shot);background-size:cover;background-position:center;background-repeat:no-repeat}
/* тонкая диагональная штриховка поверх кадра */
.ksit__card:before{content:"";position:absolute;left:0;top:0;right:0;bottom:0;z-index:2;pointer-events:none;background:repeating-linear-gradient(135deg,rgba(255,255,255,.10) 0 1px,rgba(255,255,255,0) 1px 7px)}
/* затемнение снизу, чтобы текст читался на любом кадре */
.ksit__card:after{content:"";position:absolute;left:0;right:0;bottom:0;height:64%;z-index:3;pointer-events:none;background:linear-gradient(to top,rgba(16,14,24,.58) 0%,rgba(16,14,24,.56) 25%,rgba(16,14,24,.50) 55%,rgba(16,14,24,.22) 80%,rgba(16,14,24,0) 100%)}
.ksit__card:hover{transform:translateY(-3px);border-color:var(--accent)}
.ksit__tc{position:absolute;top:12px;left:12px;z-index:5;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,'Courier New',monospace;font-size:10px;line-height:1;letter-spacing:.08em;color:#EDEBE7;background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.1);border-radius:5px;padding:5px 8px;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.ksit__txt{position:relative;z-index:5;margin:0;padding:20px 20px 18px;font-size:16px;line-height:1.35;font-weight:700;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.8)}

/* кадры: фото из медиатеки, по одной картинке на карточку */
.ksit__card--1 .ksit__shot{--shot:url('https://static.tildacdn.com/tild3439-3534-4564-b964-303836663866/peregovory1.jpg')}
.ksit__card--2 .ksit__shot{--shot:url('https://static.tildacdn.com/tild6339-3135-4362-b331-323834636362/prodazhy.jpg')}
.ksit__card--3 .ksit__shot{--shot:url('https://static.tildacdn.com/tild3566-3334-4234-b866-653333613733/vystovka.jpg')}
.ksit__card--4 .ksit__shot{--shot:url('https://static.tildacdn.com/tild3439-3737-4661-b433-396163663065/proizvodstvo.jpg')}
.ksit__card--5 .ksit__shot{--shot:url('https://static.tildacdn.com/tild3963-6331-4232-a439-316534646665/rost.jpg')}
.ksit__card--6 .ksit__shot{--shot:url('https://static.tildacdn.com/tild6131-6133-4161-b132-326130646337/export.jpg')}

/* ================= ПЛАНШЕТ ================= */
@media screen and (min-width:641px) and (max-width:960px){
.ksit{padding:68px 24px 76px}
.ksit__title{font-size:32px;margin:0 0 32px}
.ksit__grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(3,auto);gap:14px}
.ksit__card{min-height:158px}
.ksit__txt{font-size:15px;padding:18px 18px 16px}
}

/* ================= МОБИЛЬНАЯ ВЕРСИЯ · отдельная вёрстка, проверено на 390px ================= */
@media screen and (max-width:640px){
.ksit{padding:52px 16px 56px}
.ksit__wrap{max-width:100%}
.ksit__eyebrow{font-size:10px;letter-spacing:.12em;margin-bottom:11px;gap:7px}
.ksit__eyebrow:before{width:6px;height:6px}
.ksit__title{font-size:25px;line-height:1.18;max-width:100%;margin:0 0 20px}
.ksit__grid{display:grid;grid-template-columns:1fr;grid-template-rows:repeat(6,auto);gap:10px}
.ksit__card{min-height:132px;border-radius:10px}
.ksit__card:before{background:repeating-linear-gradient(135deg,rgba(255,255,255,.10) 0 1px,rgba(255,255,255,0) 1px 6px)}
.ksit__card:after{height:72%}
.ksit__card:hover{transform:none;border-color:var(--border)}
.ksit__tc{top:9px;left:9px;font-size:9px;padding:4px 6px;border-radius:4px;letter-spacing:.06em}
.ksit__txt{padding:14px 14px 13px;font-size:14px;line-height:1.3}
}
</style> <section class="ksit" aria-labelledby="ksit-title"> <div class="ksit__wrap"> <div class="ksit__eyebrow">С ЧЕМ ПРИХОДЯТ</div> <h2 class="ksit__title" id="ksit-title">Проблемы компаний, которые мы слышим</h2> <ul class="ksit__grid"> <li class="ksit__card ksit__card--1"><!-- фото: peregovory1.jpg --><span class="ksit__shot" role="img" aria-label="Переговоры с клиентом в переговорной с видом на производственный цех"></span><span class="ksit__tc">01 · ПЕРЕГОВОРЫ</span><p class="ksit__txt">На переговорах масштаб приходится объяснять на словах</p></li> <li class="ksit__card ksit__card--2"><!-- фото: prodazhy.jpg --><span class="ksit__shot" role="img" aria-label="Менеджер у стеклянной стены цеха, на столе печатный каталог продукции"></span><span class="ksit__tc">02 · ПРОДАЖИ</span><p class="ksit__txt">Менеджерам нечего отправить, кроме прайса и старого PDF</p></li> <li class="ksit__card ksit__card--3"><!-- фото: vystovka.jpg --><span class="ksit__shot" role="img" aria-label="Пустой выставочный стенд в павильоне перед открытием выставки"></span><span class="ksit__tc">03 · ВЫСТАВКА</span><p class="ksit__txt">Через месяц выставка, показать нечего</p></li> <li class="ksit__card ksit__card--4"><!-- фото: proizvodstvo.jpg --><span class="ksit__shot" role="img" aria-label="Общий вид действующего производственного цеха с линиями оборудования"></span><span class="ksit__tc">04 · ПРОИЗВОДСТВО</span><p class="ksit__txt">Нужно показать производство</p></li> <li class="ksit__card ksit__card--5"><!-- фото: rost.jpg --><span class="ksit__shot" role="img" aria-label="Руководитель разбирает устаревшие печатные материалы за рабочим столом"></span><span class="ksit__tc">05 · РОСТ</span><p class="ksit__txt">Компания выросла, а материалы остались прежними</p></li> <li class="ksit__card ksit__card--6"><!-- фото: export.jpg --><span class="ksit__shot" role="img" aria-label="Погрузка паллет с продукцией в контейнер для отправки на экспорт"></span><span class="ksit__tc">06 · ЭКСПОРТ</span><p class="ksit__txt">Выходим на экспорт</p></li> </ul> </div> </section>

<!-- KORS · БЕСПЛАТНЫЙ АУДИТ · блок T123 · окно видеозвонка с демонстрацией экрана --> <style>
/* ================= ДЕСКТОП ================= */
.kaud{--bg:#0C0C0E;--border:#2A2A2E;--text:#F5F3EF;--muted:#9A9A9A;--accent:#6D5DFB;background:var(--bg);color:var(--text);font-family:'Manrope',Arial,sans-serif;padding:84px 40px 92px;overflow:hidden}
.kaud *{box-sizing:border-box}
.kaud__wrap{max-width:1240px;margin:0 auto}

/* ----- окно видеозвонка ----- */
.kaud__win{border:1px solid var(--border);border-radius:16px;overflow:hidden;background:linear-gradient(160deg,#17171C,#111114);box-shadow:0 30px 70px rgba(0,0,0,.45)}
.kaud__bar{display:flex;align-items:center;gap:14px;padding:12px 16px;background:#101013;border-bottom:1px solid var(--border)}
.kaud__dots{display:flex;gap:6px;flex:0 0 auto}
.kaud__dots i{display:block;width:10px;height:10px;border-radius:50%;background:#4A4A52}
.kaud__barlabel{font-size:12px;letter-spacing:.02em;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kaud__rec{margin-left:auto;flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;font-family:'Unbounded',sans-serif;font-size:10px;font-weight:600;letter-spacing:.12em;color:#fff;background:#D2342B;border-radius:6px;padding:5px 9px;line-height:1}
.kaud__rec:before{content:"";width:6px;height:6px;border-radius:50%;background:#fff;animation:kaudBlink 1.5s infinite ease-in-out}
@keyframes kaudBlink{0%,100%{opacity:1}50%{opacity:.2}}

.kaud__body{display:grid;grid-template-columns:1.25fr .75fr;min-height:420px}

/* ----- левая колонка: демонстрация экрана ----- */
.kaud__share{position:relative;display:flex;align-items:center;justify-content:center;padding:40px;border-right:1px solid var(--border);background:radial-gradient(120% 120% at 50% 0%,#1C1C23 0%,#0D0D10 72%)}
/* светлый прямоугольник-документ 16:10 · позже вместо градиента ставим background-image одной строкой */
.kaud__doc{position:relative;width:100%;max-width:560px;aspect-ratio:16 / 10;border-radius:6px;box-shadow:0 22px 52px rgba(0,0,0,.62);background-size:cover;background-position:center;background-repeat:no-repeat;
/* здесь будет скриншот материалов клиента */
background-image:linear-gradient(180deg,#F8F6F2 0%,#EAE7E0 62%,#DEDAD2 100%)}
/* аккуратные "строки" макета, уйдут вместе с подстановкой фото */
.kaud__doc:before{content:"";position:absolute;left:8%;right:8%;top:74%;height:3px;border-radius:2px;background:rgba(12,12,14,.14)}
.kaud__doc:after{content:"";position:absolute;left:8%;width:44%;top:82%;height:3px;border-radius:2px;background:rgba(12,12,14,.1)}

/* рамки-пометки */
.kaud__note{position:absolute;border:2px solid var(--accent);border-radius:4px;box-shadow:0 0 0 3px rgba(109,93,251,.16);opacity:0;transform:scale(.94)}
.kaud__tag{position:absolute;left:-2px;bottom:100%;margin-bottom:6px;display:inline-block;background:var(--accent);color:#fff;font-family:'Manrope',Arial,sans-serif;font-size:10px;font-weight:600;line-height:1;letter-spacing:.01em;padding:5px 8px;border-radius:5px;white-space:nowrap}
.kaud__note--1{left:7%;top:13%;width:64%;height:18%}
.kaud__note--2{left:9%;top:47%;width:56%;height:22%}
.kaud--in .kaud__note{animation:kaudPop .5s cubic-bezier(.2,.7,.3,1) forwards}
.kaud--in .kaud__note--1{animation-delay:.5s}
.kaud--in .kaud__note--2{animation-delay:1.5s}
@keyframes kaudPop{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.kaud--in .kaud__note{animation:none;opacity:1;transform:none}.kaud__rec:before{animation:none}}

/* ----- правая колонка: участники ----- */
.kaud__people{display:flex;flex-direction:column;background:#101013}
.kaud__person{position:relative;flex:1 1 50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:24px;background-size:cover;background-position:center;background-repeat:no-repeat;
/* здесь будет фото */
background-image:linear-gradient(160deg,#1B1B21,#111115)}
.kaud__person--you{/* здесь будет фото */background-image:linear-gradient(160deg,#17171C,#0F0F12)}
.kaud__person + .kaud__person{border-top:1px solid var(--border)}
.kaud__ava{width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'Unbounded',sans-serif;font-size:22px;font-weight:600;color:#fff;background:linear-gradient(150deg,#6D5DFB,#4A3ED2);box-shadow:0 10px 26px rgba(109,93,251,.35)}
.kaud__person--you .kaud__ava{background:linear-gradient(150deg,#3B3B45,#22222A);color:#EDEBE7;box-shadow:0 10px 26px rgba(0,0,0,.4)}
.kaud__pname{font-size:13px;letter-spacing:.02em;color:var(--muted)}

/* ----- нижняя часть ----- */
.kaud__head{margin:0 0 30px}
.kaud__head .kaud__title{margin-bottom:0}
.kaud__info{padding:30px 0 0}
.kaud__eyebrow{font-family:'Unbounded',sans-serif;font-size:12px;font-weight:600;letter-spacing:.14em;color:var(--accent);margin-bottom:14px;display:flex;align-items:center;gap:8px}
.kaud__eyebrow:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px rgba(109,93,251,.65)}
.kaud__title{font-family:'Unbounded',sans-serif;font-size:clamp(26px,3.2vw,42px);line-height:1.15;letter-spacing:-.02em;font-weight:700;max-width:900px;margin:0 0 16px}
.kaud__lead{font-size:17px;line-height:1.55;color:#C9C7C2;max-width:780px;margin:0 0 34px}
.kaud__foot{display:flex;align-items:flex-end;justify-content:space-between;gap:40px}
.kaud__steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;flex:1 1 auto}
.kaud__steps li{border-top:1px solid var(--border);padding-top:14px}
.kaud__steps b{display:block;font-size:15px;font-weight:700;color:var(--text);margin-bottom:5px}
.kaud__steps i{display:block;font-style:normal;font-size:14px;line-height:1.4;color:var(--muted)}
.kaud__btn{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;background:var(--accent);color:#fff!important;text-decoration:none!important;font-family:'Manrope',Arial,sans-serif;font-size:16px;font-weight:700;line-height:1;padding:18px 30px;border-radius:40px;box-shadow:0 14px 34px rgba(109,93,251,.32);transition:transform .2s ease,box-shadow .2s ease}
.kaud__btn:hover{transform:translateY(-2px);box-shadow:0 18px 40px rgba(109,93,251,.42)}

/* ================= ПЛАНШЕТ ================= */
@media screen and (min-width:641px) and (max-width:1000px){
.kaud{padding:68px 24px 76px}
.kaud__body{grid-template-columns:1.15fr .85fr;min-height:340px}
.kaud__share{padding:26px}
.kaud__ava{width:52px;height:52px;font-size:18px}
.kaud__head{margin-bottom:26px}
.kaud__info{padding:26px 0 0}
.kaud__lead{font-size:16px;margin:0 0 26px}
.kaud__foot{display:block}
.kaud__steps{gap:16px}
.kaud__btn{margin-top:26px;width:100%}
}

/* ================= МОБИЛЬНАЯ ВЕРСИЯ · отдельная вёрстка, проверено на 390px ================= */
@media screen and (max-width:640px){
.kaud{padding:52px 16px 58px}
.kaud__wrap{max-width:100%}
.kaud__win{border-radius:12px;box-shadow:0 16px 34px rgba(0,0,0,.4)}
.kaud__bar{padding:9px 11px;gap:9px}
.kaud__dots{gap:5px}
.kaud__dots i{width:8px;height:8px}
.kaud__barlabel{font-size:10px}
.kaud__rec{font-size:8px;letter-spacing:.1em;padding:4px 7px;gap:5px;border-radius:5px}
.kaud__rec:before{width:5px;height:5px}
.kaud__body{display:block;min-height:0}
.kaud__share{display:block;padding:14px;border-right:0;border-bottom:1px solid var(--border)}
.kaud__doc{max-width:100%;border-radius:5px;box-shadow:0 12px 26px rgba(0,0,0,.55)}
.kaud__note{border-width:1.5px;box-shadow:0 0 0 2px rgba(109,93,251,.14);border-radius:3px}
.kaud__tag{font-size:8px;padding:3px 5px;border-radius:4px;margin-bottom:4px;left:-1.5px}
.kaud__note--1{left:6%;top:15%;width:70%;height:17%}
.kaud__note--2{left:8%;top:49%;width:64%;height:21%}
.kaud__people{display:flex;flex-direction:row;width:100%;height:120px}
.kaud__person{flex:1 1 50%;height:120px;padding:10px;gap:8px}
.kaud__person + .kaud__person{border-top:0;border-left:1px solid var(--border)}
.kaud__ava{width:42px;height:42px;font-size:16px;box-shadow:0 6px 16px rgba(109,93,251,.3)}
.kaud__pname{font-size:11px}
.kaud__head{margin-bottom:22px}
.kaud__info{padding:22px 0 0}
.kaud__eyebrow{font-size:10px;letter-spacing:.12em;margin-bottom:10px;gap:7px}
.kaud__eyebrow:before{width:6px;height:6px}
.kaud__title{font-size:25px;line-height:1.18;max-width:100%;margin:0 0 12px}
.kaud__lead{font-size:15px;line-height:1.5;max-width:100%;margin:0 0 22px}
.kaud__foot{display:block}
.kaud__steps{display:block;grid-template-columns:none;gap:0}
.kaud__steps li{padding-top:11px;margin-bottom:14px}
.kaud__steps b{font-size:14px;margin-bottom:4px}
.kaud__steps i{font-size:13px}
.kaud__btn{display:flex;width:100%;font-size:15px;padding:17px 20px;border-radius:34px;margin-top:6px}
.kaud__btn:hover{transform:none;box-shadow:0 14px 34px rgba(109,93,251,.32)}
}
</style> <noscript><style>.kaud__note{opacity:1!important;transform:none!important}</style></noscript> <section class="kaud" aria-labelledby="kaud-title"> <div class="kaud__wrap"> <div class="kaud__head"> <div class="kaud__eyebrow">БЕСПЛАТНЫЙ АУДИТ</div> <h2 class="kaud__title" id="kaud-title">Аудит ваших рекламных материалов и сайта бесплатно</h2> </div> <div class="kaud__win" aria-hidden="true"> <div class="kaud__bar"> <span class="kaud__dots"><i></i><i></i><i></i></span> <span class="kaud__barlabel">Аудит материалов · демонстрация экрана</span> <span class="kaud__rec">ЗАПИСЬ</span> </div> <div class="kaud__body"> <div class="kaud__share"> <div class="kaud__doc"><!-- /* здесь будет скриншот материалов клиента */ --> <div class="kaud__note kaud__note--1"><span class="kaud__tag">заголовок не про клиента</span></div> <div class="kaud__note kaud__note--2"><span class="kaud__tag">нет кадров производства</span></div> </div> </div> <div class="kaud__people"> <div class="kaud__person kaud__person--kors"><!-- /* здесь будет фото */ --><span class="kaud__ava">Д</span><span class="kaud__pname">KORS</span></div> <div class="kaud__person kaud__person--you"><!-- /* здесь будет фото */ --><span class="kaud__ava">В</span><span class="kaud__pname">вы</span></div> </div> </div> </div> <div class="kaud__info"> <p class="kaud__lead">Организуем звонок на 10-15 минут, где подробно расскажем, что можно улучшить. Звонок запишем, видео с рекомендациями останется у вас.</p> <div class="kaud__foot"> <ul class="kaud__steps"> <li><b>Пришлите материалы</b><i>сайт, презентация, каталог, видео</i></li> <li><b>Созвон 10-15 минут</b><i>проходим по вашим файлам</i></li> <li><b>Запись у вас</b><i>рекомендации в видео</i></li> </ul> <a class="kaud__btn" href="#popup:razbor">Получить бесплатный аудит</a> </div> </div> </div> </section> <script>
/* появление рамок-пометок: считаем видимость сами, IntersectionObserver только как ускоритель */
(function(){
  var tries = 0;
  function boot(){
    var sec = document.querySelector(".kaud");
    if(!sec){ tries++; if(tries < 80){ setTimeout(boot, 250); } return; }
    var shown = false;
    function on(){
      if(shown){ return; }
      shown = true;
      sec.classList.add("kaud--in");
      window.removeEventListener("scroll", check);
      window.removeEventListener("resize", check);
    }
    function check(){
      var r = sec.getBoundingClientRect();
      var vh = window.innerHeight || document.documentElement.clientHeight;
      if(r.top < vh * 0.9 && r.bottom > 0){ on(); }
    }
    window.addEventListener("scroll", check, false);
    window.addEventListener("resize", check, false);
    check();
    setTimeout(check, 800);
    setTimeout(check, 2500);
    try{
      if(typeof window.IntersectionObserver === "function"){
        var io = new window.IntersectionObserver(function(en){
          for(var k = 0; k < en.length; k++){ if(en[k].isIntersecting){ on(); io.disconnect(); break; } }
        }, { threshold: 0.15 });
        io.observe(sec);
      }
    }catch(e){}
  }
  if(document.readyState === "loading"){ document.addEventListener("DOMContentLoaded", boot); } else { boot(); }
})();
</script>

 <!-- KORS · С ЧЕМ ПРИХОДЯТ · блок T123 · кадры плёнки --> <style>
/* прячем прежние версии этого блока (не удалять) */
#rec2501102751,#rec2502137351,#rec2503322411,#rec2503013571,#rec2504777411,#rec2516609201,#rec2671851901,#rec2671960201,#rec2648640701{display:none!important;}

/* ================= ДЕСКТОП ================= */
.ksit{--bg:#0C0C0E;--border:#2A2A2E;--text:#F5F3EF;--muted:#9A9A9A;--accent:#6D5DFB;background:var(--bg);color:var(--text);font-family:'Manrope',Arial,sans-serif;padding:84px 40px 92px;overflow:hidden}
.ksit *{box-sizing:border-box}
.ksit__wrap{max-width:1240px;margin:0 auto;position:relative}
.ksit__eyebrow{font-family:'Unbounded',sans-serif;font-size:12px;font-weight:600;letter-spacing:.14em;color:var(--accent);margin-bottom:16px;display:flex;align-items:center;gap:8px}
.ksit__eyebrow:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px rgba(109,93,251,.65)}
.ksit__title{font-family:'Unbounded',sans-serif;font-size:clamp(28px,3.6vw,46px);line-height:1.15;letter-spacing:-.02em;font-weight:700;max-width:820px;margin:0 0 44px}
.ksit__grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,auto);gap:18px}
.ksit__card{position:relative;min-height:172px;border:1px solid var(--border);border-radius:10px;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;transition:transform .28s ease,border-color .28s ease}
/* фото карточки лежит в переменной --shot, поверх него диагональное затемнение: сильнее в левом нижнем углу, слабее к верху и вправо */
.ksit__shot{position:absolute;left:0;top:0;right:0;bottom:0;z-index:1;background-color:#16161B;background-image:linear-gradient(to top right,rgba(16,14,24,.38) 0%,rgba(16,14,24,.26) 46%,rgba(16,14,24,.14) 100%),var(--shot);background-size:cover;background-position:center;background-repeat:no-repeat}
/* тонкая диагональная штриховка поверх кадра */
.ksit__card:before{content:"";position:absolute;left:0;top:0;right:0;bottom:0;z-index:2;pointer-events:none;background:repeating-linear-gradient(135deg,rgba(255,255,255,.10) 0 1px,rgba(255,255,255,0) 1px 7px)}
/* затемнение снизу, чтобы текст читался на любом кадре */
.ksit__card:after{content:"";position:absolute;left:0;right:0;bottom:0;height:64%;z-index:3;pointer-events:none;background:linear-gradient(to top,rgba(16,14,24,.58) 0%,rgba(16,14,24,.56) 25%,rgba(16,14,24,.50) 55%,rgba(16,14,24,.22) 80%,rgba(16,14,24,0) 100%)}
.ksit__card:hover{transform:translateY(-3px);border-color:var(--accent)}
.ksit__tc{position:absolute;top:12px;left:12px;z-index:5;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,'Courier New',monospace;font-size:10px;line-height:1;letter-spacing:.08em;color:#EDEBE7;background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.1);border-radius:5px;padding:5px 8px;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.ksit__txt{position:relative;z-index:5;margin:0;padding:20px 20px 18px;font-size:16px;line-height:1.35;font-weight:700;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.8)}

/* кадры: фото из медиатеки, по одной картинке на карточку */
.ksit__card--1 .ksit__shot{--shot:url('https://static.tildacdn.com/tild3439-3534-4564-b964-303836663866/peregovory1.jpg')}
.ksit__card--2 .ksit__shot{--shot:url('https://static.tildacdn.com/tild6339-3135-4362-b331-323834636362/prodazhy.jpg')}
.ksit__card--3 .ksit__shot{--shot:url('https://static.tildacdn.com/tild3566-3334-4234-b866-653333613733/vystovka.jpg')}
.ksit__card--4 .ksit__shot{--shot:url('https://static.tildacdn.com/tild3439-3737-4661-b433-396163663065/proizvodstvo.jpg')}
.ksit__card--5 .ksit__shot{--shot:url('https://static.tildacdn.com/tild3963-6331-4232-a439-316534646665/rost.jpg')}
.ksit__card--6 .ksit__shot{--shot:url('https://static.tildacdn.com/tild6131-6133-4161-b132-326130646337/export.jpg')}

/* ================= ПЛАНШЕТ ================= */
@media screen and (min-width:641px) and (max-width:960px){
.ksit{padding:68px 24px 76px}
.ksit__title{font-size:32px;margin:0 0 32px}
.ksit__grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(3,auto);gap:14px}
.ksit__card{min-height:158px}
.ksit__txt{font-size:15px;padding:18px 18px 16px}
}

/* ================= МОБИЛЬНАЯ ВЕРСИЯ · отдельная вёрстка, проверено на 390px ================= */
@media screen and (max-width:640px){
.ksit{padding:52px 16px 56px}
.ksit__wrap{max-width:100%}
.ksit__eyebrow{font-size:10px;letter-spacing:.12em;margin-bottom:11px;gap:7px}
.ksit__eyebrow:before{width:6px;height:6px}
.ksit__title{font-size:25px;line-height:1.18;max-width:100%;margin:0 0 20px}
.ksit__grid{display:grid;grid-template-columns:1fr;grid-template-rows:repeat(6,auto);gap:10px}
.ksit__card{min-height:132px;border-radius:10px}
.ksit__card:before{background:repeating-linear-gradient(135deg,rgba(255,255,255,.10) 0 1px,rgba(255,255,255,0) 1px 6px)}
.ksit__card:after{height:72%}
.ksit__card:hover{transform:none;border-color:var(--border)}
.ksit__tc{top:9px;left:9px;font-size:9px;padding:4px 6px;border-radius:4px;letter-spacing:.06em}
.ksit__txt{padding:14px 14px 13px;font-size:14px;line-height:1.3}
}
</style> <section class="ksit" aria-labelledby="ksit-title"> <div class="ksit__wrap"> <div class="ksit__eyebrow">С ЧЕМ ПРИХОДЯТ</div> <h2 class="ksit__title" id="ksit-title">Проблемы компаний, которые мы слышим</h2> <ul class="ksit__grid"> <li class="ksit__card ksit__card--1"><!-- фото: peregovory1.jpg --><span class="ksit__shot" role="img" aria-label="Переговоры с клиентом в переговорной с видом на производственный цех"></span><span class="ksit__tc">01 · ПЕРЕГОВОРЫ</span><p class="ksit__txt">На переговорах масштаб приходится объяснять на словах</p></li> <li class="ksit__card ksit__card--2"><!-- фото: prodazhy.jpg --><span class="ksit__shot" role="img" aria-label="Менеджер у стеклянной стены цеха, на столе печатный каталог продукции"></span><span class="ksit__tc">02 · ПРОДАЖИ</span><p class="ksit__txt">Менеджерам нечего отправить, кроме прайса и старого PDF</p></li> <li class="ksit__card ksit__card--3"><!-- фото: vystovka.jpg --><span class="ksit__shot" role="img" aria-label="Пустой выставочный стенд в павильоне перед открытием выставки"></span><span class="ksit__tc">03 · ВЫСТАВКА</span><p class="ksit__txt">Через месяц выставка, показать нечего</p></li> <li class="ksit__card ksit__card--4"><!-- фото: proizvodstvo.jpg --><span class="ksit__shot" role="img" aria-label="Общий вид действующего производственного цеха с линиями оборудования"></span><span class="ksit__tc">04 · ПРОИЗВОДСТВО</span><p class="ksit__txt">Нужно показать производство</p></li> <li class="ksit__card ksit__card--5"><!-- фото: rost.jpg --><span class="ksit__shot" role="img" aria-label="Руководитель разбирает устаревшие печатные материалы за рабочим столом"></span><span class="ksit__tc">05 · РОСТ</span><p class="ksit__txt">Компания выросла, а материалы остались прежними</p></li> <li class="ksit__card ksit__card--6"><!-- фото: export.jpg --><span class="ksit__shot" role="img" aria-label="Погрузка паллет с продукцией в контейнер для отправки на экспорт"></span><span class="ksit__tc">06 · ЭКСПОРТ</span><p class="ksit__txt">Выходим на экспорт</p></li> </ul> </div> </section>

 <!-- KORS · БЕСПЛАТНЫЙ АУДИТ · блок T123 · окно видеозвонка с демонстрацией экрана --> <style>
/* ================= ДЕСКТОП ================= */
.kaud{--bg:#0C0C0E;--border:#2A2A2E;--text:#F5F3EF;--muted:#9A9A9A;--accent:#6D5DFB;background:var(--bg);color:var(--text);font-family:'Manrope',Arial,sans-serif;padding:84px 40px 92px;overflow:hidden}
.kaud *{box-sizing:border-box}
.kaud__wrap{max-width:1240px;margin:0 auto}

/* ----- окно видеозвонка ----- */
.kaud__win{border:1px solid var(--border);border-radius:16px;overflow:hidden;background:linear-gradient(160deg,#17171C,#111114);box-shadow:0 30px 70px rgba(0,0,0,.45)}
.kaud__bar{display:flex;align-items:center;gap:14px;padding:12px 16px;background:#101013;border-bottom:1px solid var(--border)}
.kaud__dots{display:flex;gap:6px;flex:0 0 auto}
.kaud__dots i{display:block;width:10px;height:10px;border-radius:50%;background:#4A4A52}
.kaud__barlabel{font-size:12px;letter-spacing:.02em;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kaud__rec{margin-left:auto;flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;font-family:'Unbounded',sans-serif;font-size:10px;font-weight:600;letter-spacing:.12em;color:#fff;background:#D2342B;border-radius:6px;padding:5px 9px;line-height:1}
.kaud__rec:before{content:"";width:6px;height:6px;border-radius:50%;background:#fff;animation:kaudBlink 1.5s infinite ease-in-out}
@keyframes kaudBlink{0%,100%{opacity:1}50%{opacity:.2}}

.kaud__body{display:grid;grid-template-columns:1.25fr .75fr;min-height:420px}

/* ----- левая колонка: демонстрация экрана ----- */
.kaud__share{position:relative;display:flex;align-items:center;justify-content:center;padding:40px;border-right:1px solid var(--border);background:radial-gradient(120% 120% at 50% 0%,#1C1C23 0%,#0D0D10 72%)}
/* светлый прямоугольник-документ 16:10 · позже вместо градиента ставим background-image одной строкой */
.kaud__doc{position:relative;width:100%;max-width:560px;aspect-ratio:16 / 10;border-radius:6px;box-shadow:0 22px 52px rgba(0,0,0,.62);background-size:cover;background-position:center;background-repeat:no-repeat;
/* здесь будет скриншот материалов клиента */
background-image:linear-gradient(180deg,#F8F6F2 0%,#EAE7E0 62%,#DEDAD2 100%)}
/* аккуратные "строки" макета, уйдут вместе с подстановкой фото */
.kaud__doc:before{content:"";position:absolute;left:8%;right:8%;top:74%;height:3px;border-radius:2px;background:rgba(12,12,14,.14)}
.kaud__doc:after{content:"";position:absolute;left:8%;width:44%;top:82%;height:3px;border-radius:2px;background:rgba(12,12,14,.1)}

/* рамки-пометки */
.kaud__note{position:absolute;border:2px solid var(--accent);border-radius:4px;box-shadow:0 0 0 3px rgba(109,93,251,.16);opacity:0;transform:scale(.94)}
.kaud__tag{position:absolute;left:-2px;bottom:100%;margin-bottom:6px;display:inline-block;background:var(--accent);color:#fff;font-family:'Manrope',Arial,sans-serif;font-size:10px;font-weight:600;line-height:1;letter-spacing:.01em;padding:5px 8px;border-radius:5px;white-space:nowrap}
.kaud__note--1{left:7%;top:13%;width:64%;height:18%}
.kaud__note--2{left:9%;top:47%;width:56%;height:22%}
.kaud--in .kaud__note{animation:kaudPop .5s cubic-bezier(.2,.7,.3,1) forwards}
.kaud--in .kaud__note--1{animation-delay:.5s}
.kaud--in .kaud__note--2{animation-delay:1.5s}
@keyframes kaudPop{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.kaud--in .kaud__note{animation:none;opacity:1;transform:none}.kaud__rec:before{animation:none}}

/* ----- правая колонка: участники ----- */
.kaud__people{display:flex;flex-direction:column;background:#101013}
.kaud__person{position:relative;flex:1 1 50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:24px;background-size:cover;background-position:center;background-repeat:no-repeat;
/* здесь будет фото */
background-image:linear-gradient(160deg,#1B1B21,#111115)}
.kaud__person--you{/* здесь будет фото */background-image:linear-gradient(160deg,#17171C,#0F0F12)}
.kaud__person + .kaud__person{border-top:1px solid var(--border)}
.kaud__ava{width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'Unbounded',sans-serif;font-size:22px;font-weight:600;color:#fff;background:linear-gradient(150deg,#6D5DFB,#4A3ED2);box-shadow:0 10px 26px rgba(109,93,251,.35)}
.kaud__person--you .kaud__ava{background:linear-gradient(150deg,#3B3B45,#22222A);color:#EDEBE7;box-shadow:0 10px 26px rgba(0,0,0,.4)}
.kaud__pname{font-size:13px;letter-spacing:.02em;color:var(--muted)}

/* ----- нижняя часть ----- */
.kaud__head{margin:0 0 30px}
.kaud__head .kaud__title{margin-bottom:0}
.kaud__info{padding:30px 0 0}
.kaud__eyebrow{font-family:'Unbounded',sans-serif;font-size:12px;font-weight:600;letter-spacing:.14em;color:var(--accent);margin-bottom:14px;display:flex;align-items:center;gap:8px}
.kaud__eyebrow:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px rgba(109,93,251,.65)}
.kaud__title{font-family:'Unbounded',sans-serif;font-size:clamp(26px,3.2vw,42px);line-height:1.15;letter-spacing:-.02em;font-weight:700;max-width:900px;margin:0 0 16px}
.kaud__lead{font-size:17px;line-height:1.55;color:#C9C7C2;max-width:780px;margin:0 0 34px}
.kaud__foot{display:flex;align-items:flex-end;justify-content:space-between;gap:40px}
.kaud__steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;flex:1 1 auto}
.kaud__steps li{border-top:1px solid var(--border);padding-top:14px}
.kaud__steps b{display:block;font-size:15px;font-weight:700;color:var(--text);margin-bottom:5px}
.kaud__steps i{display:block;font-style:normal;font-size:14px;line-height:1.4;color:var(--muted)}
.kaud__btn{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;background:var(--accent);color:#fff!important;text-decoration:none!important;font-family:'Manrope',Arial,sans-serif;font-size:16px;font-weight:700;line-height:1;padding:18px 30px;border-radius:40px;box-shadow:0 14px 34px rgba(109,93,251,.32);transition:transform .2s ease,box-shadow .2s ease}
.kaud__btn:hover{transform:translateY(-2px);box-shadow:0 18px 40px rgba(109,93,251,.42)}

/* ================= ПЛАНШЕТ ================= */
@media screen and (min-width:641px) and (max-width:1000px){
.kaud{padding:68px 24px 76px}
.kaud__body{grid-template-columns:1.15fr .85fr;min-height:340px}
.kaud__share{padding:26px}
.kaud__ava{width:52px;height:52px;font-size:18px}
.kaud__head{margin-bottom:26px}
.kaud__info{padding:26px 0 0}
.kaud__lead{font-size:16px;margin:0 0 26px}
.kaud__foot{display:block}
.kaud__steps{gap:16px}
.kaud__btn{margin-top:26px;width:100%}
}

/* ================= МОБИЛЬНАЯ ВЕРСИЯ · отдельная вёрстка, проверено на 390px ================= */
@media screen and (max-width:640px){
.kaud{padding:52px 16px 58px}
.kaud__wrap{max-width:100%}
.kaud__win{border-radius:12px;box-shadow:0 16px 34px rgba(0,0,0,.4)}
.kaud__bar{padding:9px 11px;gap:9px}
.kaud__dots{gap:5px}
.kaud__dots i{width:8px;height:8px}
.kaud__barlabel{font-size:10px}
.kaud__rec{font-size:8px;letter-spacing:.1em;padding:4px 7px;gap:5px;border-radius:5px}
.kaud__rec:before{width:5px;height:5px}
.kaud__body{display:block;min-height:0}
.kaud__share{display:block;padding:14px;border-right:0;border-bottom:1px solid var(--border)}
.kaud__doc{max-width:100%;border-radius:5px;box-shadow:0 12px 26px rgba(0,0,0,.55)}
.kaud__note{border-width:1.5px;box-shadow:0 0 0 2px rgba(109,93,251,.14);border-radius:3px}
.kaud__tag{font-size:8px;padding:3px 5px;border-radius:4px;margin-bottom:4px;left:-1.5px}
.kaud__note--1{left:6%;top:15%;width:70%;height:17%}
.kaud__note--2{left:8%;top:49%;width:64%;height:21%}
.kaud__people{display:flex;flex-direction:row;width:100%;height:120px}
.kaud__person{flex:1 1 50%;height:120px;padding:10px;gap:8px}
.kaud__person + .kaud__person{border-top:0;border-left:1px solid var(--border)}
.kaud__ava{width:42px;height:42px;font-size:16px;box-shadow:0 6px 16px rgba(109,93,251,.3)}
.kaud__pname{font-size:11px}
.kaud__head{margin-bottom:22px}
.kaud__info{padding:22px 0 0}
.kaud__eyebrow{font-size:10px;letter-spacing:.12em;margin-bottom:10px;gap:7px}
.kaud__eyebrow:before{width:6px;height:6px}
.kaud__title{font-size:25px;line-height:1.18;max-width:100%;margin:0 0 12px}
.kaud__lead{font-size:15px;line-height:1.5;max-width:100%;margin:0 0 22px}
.kaud__foot{display:block}
.kaud__steps{display:block;grid-template-columns:none;gap:0}
.kaud__steps li{padding-top:11px;margin-bottom:14px}
.kaud__steps b{font-size:14px;margin-bottom:4px}
.kaud__steps i{font-size:13px}
.kaud__btn{display:flex;width:100%;font-size:15px;padding:17px 20px;border-radius:34px;margin-top:6px}
.kaud__btn:hover{transform:none;box-shadow:0 14px 34px rgba(109,93,251,.32)}
}
</style> <noscript><style>.kaud__note{opacity:1!important;transform:none!important}</style></noscript> <section class="kaud" aria-labelledby="kaud-title"> <div class="kaud__wrap"> <div class="kaud__head"> <div class="kaud__eyebrow">БЕСПЛАТНЫЙ АУДИТ</div> <h2 class="kaud__title" id="kaud-title">Аудит ваших рекламных материалов и сайта бесплатно</h2> </div> <div class="kaud__win" aria-hidden="true"> <div class="kaud__bar"> <span class="kaud__dots"><i></i><i></i><i></i></span> <span class="kaud__barlabel">Аудит материалов · демонстрация экрана</span> <span class="kaud__rec">ЗАПИСЬ</span> </div> <div class="kaud__body"> <div class="kaud__share"> <div class="kaud__doc"><!-- /* здесь будет скриншот материалов клиента */ --> <div class="kaud__note kaud__note--1"><span class="kaud__tag">заголовок не про клиента</span></div> <div class="kaud__note kaud__note--2"><span class="kaud__tag">нет кадров производства</span></div> </div> </div> <div class="kaud__people"> <div class="kaud__person kaud__person--kors"><!-- /* здесь будет фото */ --><span class="kaud__ava">Д</span><span class="kaud__pname">KORS</span></div> <div class="kaud__person kaud__person--you"><!-- /* здесь будет фото */ --><span class="kaud__ava">В</span><span class="kaud__pname">вы</span></div> </div> </div> </div> <div class="kaud__info"> <p class="kaud__lead">Организуем звонок на 10-15 минут, где подробно расскажем, что можно улучшить. Звонок запишем, видео с рекомендациями останется у вас.</p> <div class="kaud__foot"> <ul class="kaud__steps"> <li><b>Пришлите материалы</b><i>сайт, презентация, каталог, видео</i></li> <li><b>Созвон 10-15 минут</b><i>проходим по вашим файлам</i></li> <li><b>Запись у вас</b><i>рекомендации в видео</i></li> </ul> <a class="kaud__btn" href="#popup:razbor">Получить бесплатный аудит</a> </div> </div> </div> </section> <script>
/* появление рамок-пометок: считаем видимость сами, IntersectionObserver только как ускоритель */
(function(){
  var tries = 0;
  function boot(){
    var sec = document.querySelector(".kaud");
    if(!sec){ tries++; if(tries < 80){ setTimeout(boot, 250); } return; }
    var shown = false;
    function on(){
      if(shown){ return; }
      shown = true;
      sec.classList.add("kaud--in");
      window.removeEventListener("scroll", check);
      window.removeEventListener("resize", check);
    }
    function check(){
      var r = sec.getBoundingClientRect();
      var vh = window.innerHeight || document.documentElement.clientHeight;
      if(r.top < vh * 0.9 && r.bottom > 0){ on(); }
    }
    window.addEventListener("scroll", check, false);
    window.addEventListener("resize", check, false);
    check();
    setTimeout(check, 800);
    setTimeout(check, 2500);
    try{
      if(typeof window.IntersectionObserver === "function"){
        var io = new window.IntersectionObserver(function(en){
          for(var k = 0; k < en.length; k++){ if(en[k].isIntersecting){ on(); io.disconnect(); break; } }
        }, { threshold: 0.15 });
        io.observe(sec);
      }
    }catch(e){}
  }
  if(document.readyState === "loading"){ document.addEventListener("DOMContentLoaded", boot); } else { boot(); }
})();
</script>

 <!-- KORS · БЕСПЛАТНЫЙ АУДИТ · блок T123 · окно видеозвонка с демонстрацией экрана --> <style>
/* ================= ДЕСКТОП ================= */
.kaud{--bg:#0C0C0E;--border:#2A2A2E;--text:#F5F3EF;--muted:#9A9A9A;--accent:#6D5DFB;background:var(--bg);color:var(--text);font-family:'Manrope',Arial,sans-serif;padding:84px 40px 92px;overflow:hidden}
.kaud *{box-sizing:border-box}
.kaud__wrap{max-width:1240px;margin:0 auto}

/* ----- окно видеозвонка ----- */
.kaud__win{border:1px solid var(--border);border-radius:16px;overflow:hidden;background:linear-gradient(160deg,#17171C,#111114);box-shadow:0 30px 70px rgba(0,0,0,.45)}
.kaud__bar{display:flex;align-items:center;gap:14px;padding:12px 16px;background:#101013;border-bottom:1px solid var(--border)}
.kaud__dots{display:flex;gap:6px;flex:0 0 auto}
.kaud__dots i{display:block;width:10px;height:10px;border-radius:50%;background:#4A4A52}
.kaud__barlabel{font-size:12px;letter-spacing:.02em;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kaud__rec{margin-left:auto;flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;font-family:'Unbounded',sans-serif;font-size:10px;font-weight:600;letter-spacing:.12em;color:#fff;background:#D2342B;border-radius:6px;padding:5px 9px;line-height:1}
.kaud__rec:before{content:"";width:6px;height:6px;border-radius:50%;background:#fff;animation:kaudBlink 1.5s infinite ease-in-out}
@keyframes kaudBlink{0%,100%{opacity:1}50%{opacity:.2}}

.kaud__body{display:grid;grid-template-columns:1.25fr .75fr;min-height:420px}

/* ----- левая колонка: демонстрация экрана ----- */
.kaud__share{position:relative;display:flex;align-items:center;justify-content:center;padding:40px;border-right:1px solid var(--border);background:radial-gradient(120% 120% at 50% 0%,#1C1C23 0%,#0D0D10 72%)}
/* слот документа 16:10 · внутри запись экрана с материалами клиента, кадр вписан целиком */
.kaud__doc{position:relative;width:100%;max-width:560px;aspect-ratio:16 / 10;border-radius:6px;box-shadow:0 22px 52px rgba(0,0,0,.62);background-size:contain;background-position:center;background-repeat:no-repeat;
/* файл: ekran_zapis-1200.jpg */
background-color:#100E18;background-image:url('https://static.tildacdn.com/tild6331-3833-4339-b038-303738643337/ekran_zapis-1200.jpg')}
/* аккуратные "строки" макета, уйдут вместе с подстановкой фото */
.kaud__doc:before{content:"";position:absolute;left:8%;right:8%;top:74%;height:3px;border-radius:2px;background:rgba(12,12,14,.14)}
.kaud__doc:after{content:"";position:absolute;left:8%;width:44%;top:82%;height:3px;border-radius:2px;background:rgba(12,12,14,.1)}
/* строки-заглушки макета выключены: в слоте теперь настоящая запись экрана */
.kaud__doc:before,.kaud__doc:after{display:none}

/* рамки-пометки */
.kaud__note{position:absolute;border:2px solid var(--accent);border-radius:4px;box-shadow:0 0 0 3px rgba(109,93,251,.16);opacity:0;transform:scale(.94)}
.kaud__tag{position:absolute;left:-2px;bottom:100%;margin-bottom:6px;display:inline-block;background:var(--accent);color:#fff;font-family:'Manrope',Arial,sans-serif;font-size:10px;font-weight:600;line-height:1;letter-spacing:.01em;padding:5px 8px;border-radius:5px;white-space:nowrap}
.kaud__note--1{left:7%;top:13%;width:64%;height:18%}
.kaud__note--2{left:9%;top:47%;width:56%;height:22%}
/* рамки-пометки выключены: такие же аннотации уже есть внутри самой записи экрана, подписи дублировались */
.kaud__note{display:none}
.kaud--in .kaud__note{animation:kaudPop .5s cubic-bezier(.2,.7,.3,1) forwards}
.kaud--in .kaud__note--1{animation-delay:.5s}
.kaud--in .kaud__note--2{animation-delay:1.5s}
@keyframes kaudPop{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.kaud--in .kaud__note{animation:none;opacity:1;transform:none}.kaud__rec:before{animation:none}}

/* ----- правая колонка: участники ----- */
.kaud__people{display:flex;flex-direction:column;background:#101013}
.kaud__person{position:relative;flex:1 1 50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:24px;background-size:cover;background-position:center;background-repeat:no-repeat;
/* кадр лежит в переменной --ph, поверх него лёгкий графитовый слой, чтобы подписи читались */
background-color:#141419;background-image:linear-gradient(to top,rgba(16,14,24,.30) 0%,rgba(16,14,24,.24) 55%,rgba(16,14,24,.18) 100%),var(--ph)}
/* участник со стороны KORS */
.kaud__person--kors{--ph:url('https://static.tildacdn.com/tild3638-6439-4366-a238-613761373163/prodavan-1200.jpg')}
/* участник со стороны клиента */
.kaud__person--you{--ph:url('https://static.tildacdn.com/tild3435-6335-4136-b239-343538316366/klient-1200.jpg')}
.kaud__person + .kaud__person{border-top:1px solid var(--border)}
.kaud__ava{width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'Unbounded',sans-serif;font-size:22px;font-weight:600;color:#fff;background:linear-gradient(150deg,#6D5DFB,#4A3ED2);box-shadow:0 10px 26px rgba(109,93,251,.35)}
.kaud__person--you .kaud__ava{background:linear-gradient(150deg,#3B3B45,#22222A);color:#EDEBE7;box-shadow:0 10px 26px rgba(0,0,0,.4)}
.kaud__pname{font-size:13px;letter-spacing:.02em;color:var(--muted)}

/* ----- нижняя часть ----- */
.kaud__head{margin:0 0 30px}
.kaud__head .kaud__title{margin-bottom:0}
.kaud__info{padding:30px 0 0}
.kaud__eyebrow{font-family:'Unbounded',sans-serif;font-size:12px;font-weight:600;letter-spacing:.14em;color:var(--accent);margin-bottom:14px;display:flex;align-items:center;gap:8px}
.kaud__eyebrow:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px rgba(109,93,251,.65)}
.kaud__title{font-family:'Unbounded',sans-serif;font-size:clamp(26px,3.2vw,42px);line-height:1.15;letter-spacing:-.02em;font-weight:700;max-width:900px;margin:0 0 16px}
.kaud__lead{font-size:17px;line-height:1.55;color:#C9C7C2;max-width:780px;margin:0 0 34px}
.kaud__foot{display:flex;align-items:flex-end;justify-content:space-between;gap:40px}
.kaud__steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;flex:1 1 auto}
.kaud__steps li{border-top:1px solid var(--border);padding-top:14px}
.kaud__steps b{display:block;font-size:15px;font-weight:700;color:var(--text);margin-bottom:5px}
.kaud__steps i{display:block;font-style:normal;font-size:14px;line-height:1.4;color:var(--muted)}
.kaud__btn{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;background:var(--accent);color:#fff!important;text-decoration:none!important;font-family:'Manrope',Arial,sans-serif;font-size:16px;font-weight:700;line-height:1;padding:18px 30px;border-radius:40px;box-shadow:0 14px 34px rgba(109,93,251,.32);transition:transform .2s ease,box-shadow .2s ease}
.kaud__btn:hover{transform:translateY(-2px);box-shadow:0 18px 40px rgba(109,93,251,.42)}

/* ================= ПЛАНШЕТ ================= */
@media screen and (min-width:641px) and (max-width:1000px){
.kaud{padding:68px 24px 76px}
.kaud__body{grid-template-columns:1.15fr .85fr;min-height:340px}
.kaud__share{padding:26px}
.kaud__ava{width:52px;height:52px;font-size:18px}
.kaud__head{margin-bottom:26px}
.kaud__info{padding:26px 0 0}
.kaud__lead{font-size:16px;margin:0 0 26px}
.kaud__foot{display:block}
.kaud__steps{gap:16px}
.kaud__btn{margin-top:26px;width:100%}
}

/* ================= МОБИЛЬНАЯ ВЕРСИЯ · отдельная вёрстка, проверено на 390px ================= */
@media screen and (max-width:640px){
.kaud{padding:52px 16px 58px}
.kaud__wrap{max-width:100%}
.kaud__win{border-radius:12px;box-shadow:0 16px 34px rgba(0,0,0,.4)}
.kaud__bar{padding:9px 11px;gap:9px}
.kaud__dots{gap:5px}
.kaud__dots i{width:8px;height:8px}
.kaud__barlabel{font-size:10px}
.kaud__rec{font-size:8px;letter-spacing:.1em;padding:4px 7px;gap:5px;border-radius:5px}
.kaud__rec:before{width:5px;height:5px}
.kaud__body{display:block;min-height:0}
.kaud__share{display:block;padding:14px;border-right:0;border-bottom:1px solid var(--border)}
.kaud__doc{max-width:100%;border-radius:5px;box-shadow:0 12px 26px rgba(0,0,0,.55);background-size:contain;background-position:center}
.kaud__note{border-width:1.5px;box-shadow:0 0 0 2px rgba(109,93,251,.14);border-radius:3px}
.kaud__tag{font-size:8px;padding:3px 5px;border-radius:4px;margin-bottom:4px;left:-1.5px}
.kaud__note--1{left:6%;top:15%;width:70%;height:17%}
.kaud__note--2{left:8%;top:49%;width:64%;height:21%}
.kaud__people{display:flex;flex-direction:row;width:100%;height:120px}
/* мобильные плитки: кадр по центру, слой чуть плотнее снизу, там подписи */
.kaud__person{flex:1 1 50%;height:120px;padding:10px;gap:8px;background-image:linear-gradient(to top,rgba(16,14,24,.30) 0%,rgba(16,14,24,.25) 55%,rgba(16,14,24,.20) 100%),var(--ph);background-position:center}
.kaud__person + .kaud__person{border-top:0;border-left:1px solid var(--border)}
.kaud__ava{width:42px;height:42px;font-size:16px;box-shadow:0 6px 16px rgba(109,93,251,.3)}
.kaud__pname{font-size:11px}
.kaud__head{margin-bottom:22px}
.kaud__info{padding:22px 0 0}
.kaud__eyebrow{font-size:10px;letter-spacing:.12em;margin-bottom:10px;gap:7px}
.kaud__eyebrow:before{width:6px;height:6px}
.kaud__title{font-size:25px;line-height:1.18;max-width:100%;margin:0 0 12px}
.kaud__lead{font-size:15px;line-height:1.5;max-width:100%;margin:0 0 22px}
.kaud__foot{display:block}
.kaud__steps{display:block;grid-template-columns:none;gap:0}
.kaud__steps li{padding-top:11px;margin-bottom:14px}
.kaud__steps b{font-size:14px;margin-bottom:4px}
.kaud__steps i{font-size:13px}
.kaud__btn{display:flex;width:100%;font-size:15px;padding:17px 20px;border-radius:34px;margin-top:6px}
.kaud__btn:hover{transform:none;box-shadow:0 14px 34px rgba(109,93,251,.32)}
}
</style> <noscript><style>.kaud__note{opacity:1!important;transform:none!important}</style></noscript> <section class="kaud" aria-labelledby="kaud-title"> <div class="kaud__wrap"> <div class="kaud__head"> <div class="kaud__eyebrow">БЕСПЛАТНЫЙ АУДИТ</div> <h2 class="kaud__title" id="kaud-title">Аудит ваших рекламных материалов и сайта бесплатно</h2> </div> <div class="kaud__win" aria-hidden="true"> <div class="kaud__bar"> <span class="kaud__dots"><i></i><i></i><i></i></span> <span class="kaud__barlabel">Аудит материалов · демонстрация экрана</span> <span class="kaud__rec">ЗАПИСЬ</span> </div> <div class="kaud__body"> <div class="kaud__share"> <div class="kaud__doc" role="img" aria-label="Запись экрана: разбор сайта производственной компании, пометками отмечены слабые места"><!-- фото: ekran_zapis-1200.jpg --> <div class="kaud__note kaud__note--1"><span class="kaud__tag">заголовок не про клиента</span></div> <div class="kaud__note kaud__note--2"><span class="kaud__tag">нет кадров производства</span></div> </div> </div> <div class="kaud__people"> <div class="kaud__person kaud__person--kors" role="img" aria-label="Продюсер KORS на видеозвонке разбирает материалы клиента"><!-- фото: prodavan-1200.jpg --><span class="kaud__ava">Д</span><span class="kaud__pname">KORS</span></div> <div class="kaud__person kaud__person--you" role="img" aria-label="Руководитель производственной компании на видеозвонке за рабочим столом"><!-- фото: klient-1200.jpg --><span class="kaud__ava">В</span><span class="kaud__pname">вы</span></div> </div> </div> </div> <div class="kaud__info"> <p class="kaud__lead">Организуем звонок на 10-15 минут, где подробно расскажем, что можно улучшить. Звонок запишем, видео с рекомендациями останется у вас.</p> <div class="kaud__foot"> <ul class="kaud__steps"> <li><b>Пришлите материалы</b><i>сайт, презентация, каталог, видео</i></li> <li><b>Созвон 10-15 минут</b><i>проходим по вашим файлам</i></li> <li><b>Запись у вас</b><i>рекомендации в видео</i></li> </ul> <a class="kaud__btn" href="#popup:razbor">Получить бесплатный аудит</a> </div> </div> </div> </section> <script>
/* появление рамок-пометок: считаем видимость сами, IntersectionObserver только как ускоритель */
(function(){
  var tries = 0;
  function boot(){
    var sec = document.querySelector(".kaud");
    if(!sec){ tries++; if(tries < 80){ setTimeout(boot, 250); } return; }
    var shown = false;
    function on(){
      if(shown){ return; }
      shown = true;
      sec.classList.add("kaud--in");
      window.removeEventListener("scroll", check);
      window.removeEventListener("resize", check);
    }
    function check(){
      var r = sec.getBoundingClientRect();
      var vh = window.innerHeight || document.documentElement.clientHeight;
      if(r.top < vh * 0.9 && r.bottom > 0){ on(); }
    }
    window.addEventListener("scroll", check, false);
    window.addEventListener("resize", check, false);
    check();
    setTimeout(check, 800);
    setTimeout(check, 2500);
    try{
      if(typeof window.IntersectionObserver === "function"){
        var io = new window.IntersectionObserver(function(en){
          for(var k = 0; k < en.length; k++){ if(en[k].isIntersecting){ on(); io.disconnect(); break; } }
        }, { threshold: 0.15 });
        io.observe(sec);
      }
    }catch(e){}
  }
  if(document.readyState === "loading"){ document.addEventListener("DOMContentLoaded", boot); } else { boot(); }
})();
</script>

 <!-- KORS · БЕСПЛАТНЫЙ АУДИТ · блок T123 · окно видеозвонка с демонстрацией экрана --> <style>
/* ================= ДЕСКТОП ================= */
.kaud{--bg:#0C0C0E;--border:#2A2A2E;--text:#F5F3EF;--muted:#9A9A9A;--accent:#6D5DFB;background:var(--bg);color:var(--text);font-family:'Manrope',Arial,sans-serif;padding:84px 40px 92px;overflow:hidden}
.kaud *{box-sizing:border-box}
.kaud__wrap{max-width:1240px;margin:0 auto}

/* ----- окно видеозвонка ----- */
.kaud__win{border:1px solid var(--border);border-radius:16px;overflow:hidden;background:linear-gradient(160deg,#17171C,#111114);box-shadow:0 30px 70px rgba(0,0,0,.45)}
.kaud__bar{display:flex;align-items:center;gap:14px;padding:12px 16px;background:#101013;border-bottom:1px solid var(--border)}
.kaud__dots{display:flex;gap:6px;flex:0 0 auto}
.kaud__dots i{display:block;width:10px;height:10px;border-radius:50%;background:#4A4A52}
.kaud__barlabel{font-size:12px;letter-spacing:.02em;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kaud__rec{margin-left:auto;flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;font-family:'Unbounded',sans-serif;font-size:10px;font-weight:600;letter-spacing:.12em;color:#fff;background:#D2342B;border-radius:6px;padding:5px 9px;line-height:1}
.kaud__rec:before{content:"";width:6px;height:6px;border-radius:50%;background:#fff;animation:kaudBlink 1.5s infinite ease-in-out}
@keyframes kaudBlink{0%,100%{opacity:1}50%{opacity:.2}}

.kaud__body{display:grid;grid-template-columns:2.161fr 1fr;min-height:0}

/* ----- левая колонка: демонстрация экрана ----- */
.kaud__share{position:relative;display:block;padding:0;border-right:1px solid var(--border);background:radial-gradient(120% 120% at 50% 0%,#1C1C23 0%,#0D0D10 72%)}
/* слот записи экрана: залит во всю ширину окна, пропорция слота равна пропорции кадра 1200x514, поэтому обрезки нет */
.kaud__doc{position:relative;width:100%;max-width:none;aspect-ratio:1200 / 514;border-radius:0;box-shadow:none;background-size:cover;background-position:center;background-repeat:no-repeat;
/* файл: ekran_zapis-1200.jpg */
background-color:#100E18;background-image:url('https://static.tildacdn.com/tild6331-3833-4339-b038-303738643337/ekran_zapis-1200.jpg')}
/* аккуратные "строки" макета, уйдут вместе с подстановкой фото */
.kaud__doc:before{content:"";position:absolute;left:8%;right:8%;top:74%;height:3px;border-radius:2px;background:rgba(12,12,14,.14)}
.kaud__doc:after{content:"";position:absolute;left:8%;width:44%;top:82%;height:3px;border-radius:2px;background:rgba(12,12,14,.1)}
/* строки-заглушки макета выключены: в слоте теперь настоящая запись экрана */
.kaud__doc:before,.kaud__doc:after{display:none}

/* рамки-пометки */
.kaud__note{position:absolute;border:2px solid var(--accent);border-radius:4px;box-shadow:0 0 0 3px rgba(109,93,251,.16);opacity:0;transform:scale(.94)}
.kaud__tag{position:absolute;left:-2px;bottom:100%;margin-bottom:6px;display:inline-block;background:var(--accent);color:#fff;font-family:'Manrope',Arial,sans-serif;font-size:10px;font-weight:600;line-height:1;letter-spacing:.01em;padding:5px 8px;border-radius:5px;white-space:nowrap}
.kaud__note--1{left:7%;top:13%;width:64%;height:18%}
.kaud__note--2{left:9%;top:47%;width:56%;height:22%}
/* рамки-пометки выключены: такие же аннотации уже есть внутри самой записи экрана, подписи дублировались */
.kaud__note{display:none}
.kaud--in .kaud__note{animation:kaudPop .5s cubic-bezier(.2,.7,.3,1) forwards}
.kaud--in .kaud__note--1{animation-delay:.5s}
.kaud--in .kaud__note--2{animation-delay:1.5s}
@keyframes kaudPop{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.kaud--in .kaud__note{animation:none;opacity:1;transform:none}.kaud__rec:before{animation:none}}

/* ----- правая колонка: участники ----- */
.kaud__people{display:flex;flex-direction:column;background:#101013}
.kaud__person{position:relative;flex:1 1 50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:24px;background-size:cover;background-position:center;background-repeat:no-repeat;
/* кадр лежит в переменной --ph, поверх него лёгкий графитовый слой, чтобы подписи читались */
background-color:#141419;background-image:linear-gradient(to top,rgba(16,14,24,.30) 0%,rgba(16,14,24,.24) 55%,rgba(16,14,24,.18) 100%),var(--ph)}
/* участник со стороны KORS */
.kaud__person--kors{--ph:url('https://static.tildacdn.com/tild3638-6439-4366-a238-613761373163/prodavan-1200.jpg')}
/* участник со стороны клиента */
.kaud__person--you{--ph:url('https://static.tildacdn.com/tild3435-6335-4136-b239-343538316366/klient-1200.jpg')}
.kaud__person + .kaud__person{border-top:1px solid var(--border)}
/* подписи роли поверх плиток: вверху справа, вместо круглых бейджей */
.kaud__role{position:absolute;top:12px;right:12px;font-family:'Manrope',Arial,sans-serif;font-size:12px;font-weight:700;line-height:1;letter-spacing:.01em;color:#fff;background:rgba(109,93,251,.94);border:1px solid transparent;border-radius:7px;padding:6px 10px;box-shadow:0 8px 20px rgba(0,0,0,.38)}
.kaud__person--you .kaud__role{background:rgba(20,18,26,.86);border:1px solid rgba(245,243,239,.24);color:#F5F3EF}
.kaud__pname{position:absolute;left:14px;bottom:12px;font-size:13px;letter-spacing:.02em;color:#EDEBE7;text-shadow:0 1px 8px rgba(0,0,0,.7)}

/* ----- нижняя часть ----- */
.kaud__head{margin:0 0 30px}
.kaud__head .kaud__title{margin-bottom:0}
.kaud__info{padding:30px 0 0}
.kaud__eyebrow{font-family:'Unbounded',sans-serif;font-size:12px;font-weight:600;letter-spacing:.14em;color:var(--accent);margin-bottom:14px;display:flex;align-items:center;gap:8px}
.kaud__eyebrow:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px rgba(109,93,251,.65)}
.kaud__title{font-family:'Unbounded',sans-serif;font-size:clamp(26px,3.2vw,42px);line-height:1.15;letter-spacing:-.02em;font-weight:700;max-width:900px;margin:0 0 16px}
.kaud__lead{font-size:17px;line-height:1.55;color:#C9C7C2;max-width:780px;margin:0 0 34px}
.kaud__foot{display:flex;align-items:flex-end;justify-content:space-between;gap:40px}
.kaud__steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;flex:1 1 auto}
.kaud__steps li{border-top:1px solid var(--border);padding-top:14px}
.kaud__steps b{display:block;font-size:15px;font-weight:700;color:var(--text);margin-bottom:5px}
.kaud__steps i{display:block;font-style:normal;font-size:14px;line-height:1.4;color:var(--muted)}
.kaud__btn{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;background:var(--accent);color:#fff!important;text-decoration:none!important;font-family:'Manrope',Arial,sans-serif;font-size:16px;font-weight:700;line-height:1;padding:18px 30px;border-radius:40px;box-shadow:0 14px 34px rgba(109,93,251,.32);transition:transform .2s ease,box-shadow .2s ease}
.kaud__btn:hover{transform:translateY(-2px);box-shadow:0 18px 40px rgba(109,93,251,.42)}

/* ================= ПЛАНШЕТ ================= */
@media screen and (min-width:641px) and (max-width:1000px){
.kaud{padding:68px 24px 76px}
.kaud__body{grid-template-columns:2.161fr 1fr;min-height:0}
.kaud__share{padding:0}
.kaud__role{top:10px;right:10px;font-size:11px;padding:5px 9px}
.kaud__head{margin-bottom:26px}
.kaud__info{padding:26px 0 0}
.kaud__lead{font-size:16px;margin:0 0 26px}
.kaud__foot{display:block}
.kaud__steps{gap:16px}
.kaud__btn{margin-top:26px;width:100%}
}

/* ================= МОБИЛЬНАЯ ВЕРСИЯ · отдельная вёрстка, проверено на 390px ================= */
@media screen and (max-width:640px){
.kaud{padding:52px 16px 58px}
.kaud__wrap{max-width:100%}
.kaud__win{border-radius:12px;box-shadow:0 16px 34px rgba(0,0,0,.4)}
.kaud__bar{padding:9px 11px;gap:9px}
.kaud__dots{gap:5px}
.kaud__dots i{width:8px;height:8px}
.kaud__barlabel{font-size:10px}
.kaud__rec{font-size:8px;letter-spacing:.1em;padding:4px 7px;gap:5px;border-radius:5px}
.kaud__rec:before{width:5px;height:5px}
.kaud__body{display:block;min-height:0}
.kaud__share{display:block;padding:0;border-right:0;border-bottom:1px solid var(--border)}
.kaud__doc{max-width:100%;border-radius:0;box-shadow:none;background-size:cover;background-position:center}
.kaud__note{border-width:1.5px;box-shadow:0 0 0 2px rgba(109,93,251,.14);border-radius:3px}
.kaud__tag{font-size:8px;padding:3px 5px;border-radius:4px;margin-bottom:4px;left:-1.5px}
.kaud__note--1{left:6%;top:15%;width:70%;height:17%}
.kaud__note--2{left:8%;top:49%;width:64%;height:21%}
.kaud__people{display:flex;flex-direction:row;width:100%;height:120px}
/* мобильные плитки: кадр по центру, слой чуть плотнее снизу, там подписи */
.kaud__person{flex:1 1 50%;height:120px;padding:10px;gap:8px;background-image:linear-gradient(to top,rgba(16,14,24,.30) 0%,rgba(16,14,24,.25) 55%,rgba(16,14,24,.20) 100%),var(--ph);background-position:center}
.kaud__person + .kaud__person{border-top:0;border-left:1px solid var(--border)}
.kaud__role{top:8px;right:8px;font-size:10px;padding:4px 8px;border-radius:6px}
.kaud__pname{font-size:11px;left:10px;bottom:9px}
.kaud__head{margin-bottom:22px}
.kaud__info{padding:22px 0 0}
.kaud__eyebrow{font-size:10px;letter-spacing:.12em;margin-bottom:10px;gap:7px}
.kaud__eyebrow:before{width:6px;height:6px}
.kaud__title{font-size:25px;line-height:1.18;max-width:100%;margin:0 0 12px}
.kaud__lead{font-size:15px;line-height:1.5;max-width:100%;margin:0 0 22px}
.kaud__foot{display:block}
.kaud__steps{display:block;grid-template-columns:none;gap:0}
.kaud__steps li{padding-top:11px;margin-bottom:14px}
.kaud__steps b{font-size:14px;margin-bottom:4px}
.kaud__steps i{font-size:13px}
.kaud__btn{display:flex;width:100%;font-size:15px;padding:17px 20px;border-radius:34px;margin-top:6px}
.kaud__btn:hover{transform:none;box-shadow:0 14px 34px rgba(109,93,251,.32)}
}
</style> <noscript><style>.kaud__note{opacity:1!important;transform:none!important}</style></noscript> <section class="kaud" aria-labelledby="kaud-title"> <div class="kaud__wrap"> <div class="kaud__head"> <div class="kaud__eyebrow">БЕСПЛАТНЫЙ АУДИТ</div> <h2 class="kaud__title" id="kaud-title">Аудит ваших рекламных материалов и сайта бесплатно</h2> </div> <div class="kaud__win" aria-hidden="true"> <div class="kaud__bar"> <span class="kaud__dots"><i></i><i></i><i></i></span> <span class="kaud__barlabel">Аудит материалов · демонстрация экрана</span> <span class="kaud__rec">ЗАПИСЬ</span> </div> <div class="kaud__body"> <div class="kaud__share"> <div class="kaud__doc" role="img" aria-label="Запись экрана: разбор сайта производственной компании, пометками отмечены слабые места"><!-- фото: ekran_zapis-1200.jpg --> <div class="kaud__note kaud__note--1"><span class="kaud__tag">заголовок не про клиента</span></div> <div class="kaud__note kaud__note--2"><span class="kaud__tag">нет кадров производства</span></div> </div> </div> <div class="kaud__people"> <div class="kaud__person kaud__person--kors" role="img" aria-label="Продюсер KORS на видеозвонке разбирает материалы клиента"><!-- фото: prodavan-1200.jpg --><span class="kaud__role">Продюсер</span><span class="kaud__pname">KORS</span></div> <div class="kaud__person kaud__person--you" role="img" aria-label="Руководитель производственной компании на видеозвонке за рабочим столом"><!-- фото: klient-1200.jpg --><span class="kaud__role">Клиент</span><span class="kaud__pname">вы</span></div> </div> </div> </div> <div class="kaud__info"> <p class="kaud__lead">Организуем звонок на 10-15 минут, где подробно расскажем, что можно улучшить. Звонок запишем, видео с рекомендациями останется у вас.</p> <div class="kaud__foot"> <ul class="kaud__steps"> <li><b>Пришлите материалы</b><i>сайт, презентация, каталог, видео</i></li> <li><b>Созвон 10-15 минут</b><i>проходим по вашим файлам</i></li> <li><b>Запись у вас</b><i>рекомендации в видео</i></li> </ul> <a class="kaud__btn" href="#popup:razbor">Получить бесплатный аудит</a> </div> </div> </div> </section> <script>
/* появление рамок-пометок: считаем видимость сами, IntersectionObserver только как ускоритель */
(function(){
  var tries = 0;
  function boot(){
    var sec = document.querySelector(".kaud");
    if(!sec){ tries++; if(tries < 80){ setTimeout(boot, 250); } return; }
    var shown = false;
    function on(){
      if(shown){ return; }
      shown = true;
      sec.classList.add("kaud--in");
      window.removeEventListener("scroll", check);
      window.removeEventListener("resize", check);
    }
    function check(){
      var r = sec.getBoundingClientRect();
      var vh = window.innerHeight || document.documentElement.clientHeight;
      if(r.top < vh * 0.9 && r.bottom > 0){ on(); }
    }
    window.addEventListener("scroll", check, false);
    window.addEventListener("resize", check, false);
    check();
    setTimeout(check, 800);
    setTimeout(check, 2500);
    try{
      if(typeof window.IntersectionObserver === "function"){
        var io = new window.IntersectionObserver(function(en){
          for(var k = 0; k < en.length; k++){ if(en[k].isIntersecting){ on(); io.disconnect(); break; } }
        }, { threshold: 0.15 });
        io.observe(sec);
      }
    }catch(e){}
  }
  if(document.readyState === "loading"){ document.addEventListener("DOMContentLoaded", boot); } else { boot(); }
})();
</script>

 <!-- KORS · БЕСПЛАТНЫЙ АУДИТ · блок T123 · окно видеозвонка с демонстрацией экрана --> <style>
/* ================= ДЕСКТОП ================= */
.kaud{--bg:#0C0C0E;--border:#2A2A2E;--text:#F5F3EF;--muted:#9A9A9A;--accent:#6D5DFB;background:var(--bg);color:var(--text);font-family:'Manrope',Arial,sans-serif;padding:84px 40px 92px;overflow:hidden}
.kaud *{box-sizing:border-box}
.kaud__wrap{max-width:1240px;margin:0 auto}

/* ----- окно видеозвонка ----- */
.kaud__win{border:1px solid var(--border);border-radius:16px;overflow:hidden;background:linear-gradient(160deg,#17171C,#111114);box-shadow:0 30px 70px rgba(0,0,0,.45)}
.kaud__bar{display:flex;align-items:center;gap:14px;padding:12px 16px;background:#101013;border-bottom:1px solid var(--border)}
.kaud__dots{display:flex;gap:6px;flex:0 0 auto}
.kaud__dots i{display:block;width:10px;height:10px;border-radius:50%;background:#4A4A52}
.kaud__barlabel{font-size:12px;letter-spacing:.02em;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kaud__rec{margin-left:auto;flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;font-family:'Unbounded',sans-serif;font-size:10px;font-weight:600;letter-spacing:.12em;color:#fff;background:#D2342B;border-radius:6px;padding:5px 9px;line-height:1}
.kaud__rec:before{content:"";width:6px;height:6px;border-radius:50%;background:#fff;animation:kaudBlink 1.5s infinite ease-in-out}
@keyframes kaudBlink{0%,100%{opacity:1}50%{opacity:.2}}

.kaud__body{display:grid;grid-template-columns:2.161fr 1fr;min-height:0}

/* ----- левая колонка: демонстрация экрана ----- */
.kaud__share{position:relative;display:block;padding:0;border-right:1px solid var(--border);background:radial-gradient(120% 120% at 50% 0%,#1C1C23 0%,#0D0D10 72%)}
/* слот записи экрана: залит во всю ширину окна, пропорция слота равна пропорции кадра 1200x514, поэтому обрезки нет */
.kaud__doc{position:relative;width:100%;max-width:none;aspect-ratio:1200 / 514;border-radius:0;box-shadow:none;background-size:cover;background-position:center;background-repeat:no-repeat;
/* файл: ekran_zapis-1200.jpg */
background-color:#100E18;background-image:url('https://static.tildacdn.com/tild6331-3833-4339-b038-303738643337/ekran_zapis-1200.jpg')}
/* аккуратные "строки" макета, уйдут вместе с подстановкой фото */
.kaud__doc:before{content:"";position:absolute;left:8%;right:8%;top:74%;height:3px;border-radius:2px;background:rgba(12,12,14,.14)}
.kaud__doc:after{content:"";position:absolute;left:8%;width:44%;top:82%;height:3px;border-radius:2px;background:rgba(12,12,14,.1)}
/* строки-заглушки макета выключены: в слоте теперь настоящая запись экрана */
.kaud__doc:before,.kaud__doc:after{display:none}

/* рамки-пометки */
.kaud__note{position:absolute;border:2px solid var(--accent);border-radius:4px;box-shadow:0 0 0 3px rgba(109,93,251,.16);opacity:0;transform:scale(.94)}
.kaud__tag{position:absolute;left:-2px;bottom:100%;margin-bottom:6px;display:inline-block;background:var(--accent);color:#fff;font-family:'Manrope',Arial,sans-serif;font-size:10px;font-weight:600;line-height:1;letter-spacing:.01em;padding:5px 8px;border-radius:5px;white-space:nowrap}
.kaud__note--1{left:7%;top:13%;width:64%;height:18%}
.kaud__note--2{left:9%;top:47%;width:56%;height:22%}
/* рамки-пометки выключены: такие же аннотации уже есть внутри самой записи экрана, подписи дублировались */
.kaud__note{display:none}
.kaud--in .kaud__note{animation:kaudPop .5s cubic-bezier(.2,.7,.3,1) forwards}
.kaud--in .kaud__note--1{animation-delay:.5s}
.kaud--in .kaud__note--2{animation-delay:1.5s}
@keyframes kaudPop{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.kaud--in .kaud__note{animation:none;opacity:1;transform:none}.kaud__rec:before{animation:none}}

/* ----- правая колонка: участники ----- */
.kaud__people{display:flex;flex-direction:column;background:#101013}
.kaud__person{position:relative;flex:1 1 50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:24px;background-size:cover;background-position:center;background-repeat:no-repeat;
/* кадр лежит в переменной --ph, поверх него лёгкий графитовый слой, чтобы подписи читались */
background-color:#141419;background-image:linear-gradient(to top,rgba(16,14,24,.30) 0%,rgba(16,14,24,.24) 55%,rgba(16,14,24,.18) 100%),var(--ph)}
/* участник со стороны KORS */
/* в кадре продюсера снизу впечатана подпись Aleksandr Volkov (Producer): кадр приближен на 6 процентов и посажен по верхнему краю, подпись уходит за обрез, лицо остаётся по центру */
.kaud__person--kors{--ph:url('https://static.tildacdn.com/tild3638-6439-4366-a238-613761373163/prodavan-1200.jpg');background-size:auto,auto 106%;background-position:center,center top}
/* участник со стороны клиента */
.kaud__person--you{--ph:url('https://static.tildacdn.com/tild3435-6335-4136-b239-343538316366/klient-1200.jpg')}
.kaud__person + .kaud__person{border-top:1px solid var(--border)}
/* подписи роли поверх плиток: вверху справа, вместо круглых бейджей */
.kaud__role{position:absolute;top:12px;right:12px;font-family:'Manrope',Arial,sans-serif;font-size:12px;font-weight:700;line-height:1;letter-spacing:.01em;color:#fff;background:rgba(109,93,251,.94);border:1px solid transparent;border-radius:7px;padding:6px 10px;box-shadow:0 8px 20px rgba(0,0,0,.38)}
.kaud__person--you .kaud__role{background:rgba(20,18,26,.86);border:1px solid rgba(245,243,239,.24);color:#F5F3EF}

/* ----- нижняя часть ----- */
.kaud__head{margin:0 0 30px}
.kaud__head .kaud__title{margin-bottom:0}
.kaud__info{padding:30px 0 0}
.kaud__eyebrow{font-family:'Unbounded',sans-serif;font-size:12px;font-weight:600;letter-spacing:.14em;color:var(--accent);margin-bottom:14px;display:flex;align-items:center;gap:8px}
.kaud__eyebrow:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px rgba(109,93,251,.65)}
.kaud__title{font-family:'Unbounded',sans-serif;font-size:clamp(26px,3.2vw,42px);line-height:1.15;letter-spacing:-.02em;font-weight:700;max-width:900px;margin:0 0 16px}
.kaud__lead{font-size:17px;line-height:1.55;color:#C9C7C2;max-width:780px;margin:0 0 34px}
.kaud__foot{display:flex;align-items:flex-end;justify-content:space-between;gap:40px}
.kaud__steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;flex:1 1 auto}
.kaud__steps li{border-top:1px solid var(--border);padding-top:14px}
.kaud__steps b{display:block;font-size:15px;font-weight:700;color:var(--text);margin-bottom:5px}
.kaud__steps i{display:block;font-style:normal;font-size:14px;line-height:1.4;color:var(--muted)}
.kaud__btn{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;background:var(--accent);color:#fff!important;text-decoration:none!important;font-family:'Manrope',Arial,sans-serif;font-size:16px;font-weight:700;line-height:1;padding:18px 30px;border-radius:40px;box-shadow:0 14px 34px rgba(109,93,251,.32);transition:transform .2s ease,box-shadow .2s ease}
.kaud__btn:hover{transform:translateY(-2px);box-shadow:0 18px 40px rgba(109,93,251,.42)}

/* ================= ПЛАНШЕТ ================= */
@media screen and (min-width:641px) and (max-width:1000px){
.kaud{padding:68px 24px 76px}
.kaud__body{grid-template-columns:2.161fr 1fr;min-height:0}
.kaud__share{padding:0}
.kaud__role{top:10px;right:10px;font-size:11px;padding:5px 9px}
.kaud__head{margin-bottom:26px}
.kaud__info{padding:26px 0 0}
.kaud__lead{font-size:16px;margin:0 0 26px}
.kaud__foot{display:block}
.kaud__steps{gap:16px}
.kaud__btn{margin-top:26px;width:100%}
}

/* ================= МОБИЛЬНАЯ ВЕРСИЯ · отдельная вёрстка, проверено на 390px ================= */
@media screen and (max-width:640px){
.kaud{padding:52px 16px 58px}
.kaud__wrap{max-width:100%}
.kaud__win{border-radius:12px;box-shadow:0 16px 34px rgba(0,0,0,.4)}
.kaud__bar{padding:9px 11px;gap:9px}
.kaud__dots{gap:5px}
.kaud__dots i{width:8px;height:8px}
.kaud__barlabel{font-size:10px}
.kaud__rec{font-size:8px;letter-spacing:.1em;padding:4px 7px;gap:5px;border-radius:5px}
.kaud__rec:before{width:5px;height:5px}
.kaud__body{display:block;min-height:0}
.kaud__share{display:block;padding:0;border-right:0;border-bottom:1px solid var(--border)}
.kaud__doc{max-width:100%;border-radius:0;box-shadow:none;background-size:cover;background-position:center}
.kaud__note{border-width:1.5px;box-shadow:0 0 0 2px rgba(109,93,251,.14);border-radius:3px}
.kaud__tag{font-size:8px;padding:3px 5px;border-radius:4px;margin-bottom:4px;left:-1.5px}
.kaud__note--1{left:6%;top:15%;width:70%;height:17%}
.kaud__note--2{left:8%;top:49%;width:64%;height:21%}
.kaud__people{display:flex;flex-direction:row;width:100%;height:120px}
/* мобильные плитки: кадр по центру, слой чуть плотнее снизу, там подписи */
.kaud__person{flex:1 1 50%;height:120px;padding:10px;gap:8px;background-image:linear-gradient(to top,rgba(16,14,24,.30) 0%,rgba(16,14,24,.25) 55%,rgba(16,14,24,.20) 100%),var(--ph);background-position:center}
/* на мобилке кадр продюсера остаётся cover: впечатанная подпись там уже уходит за обрез по горизонтали */
.kaud__person--kors{background-size:auto,cover}
.kaud__person + .kaud__person{border-top:0;border-left:1px solid var(--border)}
.kaud__role{top:8px;right:8px;font-size:10px;padding:4px 8px;border-radius:6px}
.kaud__head{margin-bottom:22px}
.kaud__info{padding:22px 0 0}
.kaud__eyebrow{font-size:10px;letter-spacing:.12em;margin-bottom:10px;gap:7px}
.kaud__eyebrow:before{width:6px;height:6px}
.kaud__title{font-size:25px;line-height:1.18;max-width:100%;margin:0 0 12px}
.kaud__lead{font-size:15px;line-height:1.5;max-width:100%;margin:0 0 22px}
.kaud__foot{display:block}
.kaud__steps{display:block;grid-template-columns:none;gap:0}
.kaud__steps li{padding-top:11px;margin-bottom:14px}
.kaud__steps b{font-size:14px;margin-bottom:4px}
.kaud__steps i{font-size:13px}
.kaud__btn{display:flex;width:100%;font-size:15px;padding:17px 20px;border-radius:34px;margin-top:6px}
.kaud__btn:hover{transform:none;box-shadow:0 14px 34px rgba(109,93,251,.32)}
}
</style> <noscript><style>.kaud__note{opacity:1!important;transform:none!important}</style></noscript> <section class="kaud" aria-labelledby="kaud-title"> <div class="kaud__wrap"> <div class="kaud__head"> <div class="kaud__eyebrow">БЕСПЛАТНЫЙ АУДИТ</div> <h2 class="kaud__title" id="kaud-title">Аудит ваших рекламных материалов и сайта бесплатно</h2> </div> <div class="kaud__win" aria-hidden="true"> <div class="kaud__bar"> <span class="kaud__dots"><i></i><i></i><i></i></span> <span class="kaud__barlabel">Аудит материалов · демонстрация экрана</span> <span class="kaud__rec">ЗАПИСЬ</span> </div> <div class="kaud__body"> <div class="kaud__share"> <div class="kaud__doc" role="img" aria-label="Запись экрана: разбор сайта производственной компании, пометками отмечены слабые места"><!-- фото: ekran_zapis-1200.jpg --> <div class="kaud__note kaud__note--1"><span class="kaud__tag">заголовок не про клиента</span></div> <div class="kaud__note kaud__note--2"><span class="kaud__tag">нет кадров производства</span></div> </div> </div> <div class="kaud__people"> <div class="kaud__person kaud__person--kors" role="img" aria-label="Продюсер KORS на видеозвонке разбирает материалы клиента"><!-- фото: prodavan-1200.jpg --><span class="kaud__role">Продюсер</span></div> <div class="kaud__person kaud__person--you" role="img" aria-label="Руководитель производственной компании на видеозвонке за рабочим столом"><!-- фото: klient-1200.jpg --><span class="kaud__role">Клиент</span></div> </div> </div> </div> <div class="kaud__info"> <p class="kaud__lead">Организуем звонок на 10-15 минут, где подробно расскажем, что можно улучшить. Звонок запишем, видео с рекомендациями останется у вас.</p> <div class="kaud__foot"> <ul class="kaud__steps"> <li><b>Пришлите материалы</b><i>сайт, презентация, каталог, видео</i></li> <li><b>Созвон 10-15 минут</b><i>проходим по вашим файлам</i></li> <li><b>Запись у вас</b><i>рекомендации в видео</i></li> </ul> <a class="kaud__btn" href="#popup:razbor">Получить бесплатный аудит</a> </div> </div> </div> </section> <script>
/* появление рамок-пометок: считаем видимость сами, IntersectionObserver только как ускоритель */
(function(){
  var tries = 0;
  function boot(){
    var sec = document.querySelector(".kaud");
    if(!sec){ tries++; if(tries < 80){ setTimeout(boot, 250); } return; }
    var shown = false;
    function on(){
      if(shown){ return; }
      shown = true;
      sec.classList.add("kaud--in");
      window.removeEventListener("scroll", check);
      window.removeEventListener("resize", check);
    }
    function check(){
      var r = sec.getBoundingClientRect();
      var vh = window.innerHeight || document.documentElement.clientHeight;
      if(r.top < vh * 0.9 && r.bottom > 0){ on(); }
    }
    window.addEventListener("scroll", check, false);
    window.addEventListener("resize", check, false);
    check();
    setTimeout(check, 800);
    setTimeout(check, 2500);
    try{
      if(typeof window.IntersectionObserver === "function"){
        var io = new window.IntersectionObserver(function(en){
          for(var k = 0; k < en.length; k++){ if(en[k].isIntersecting){ on(); io.disconnect(); break; } }
        }, { threshold: 0.15 });
        io.observe(sec);
      }
    }catch(e){}
  }
  if(document.readyState === "loading"){ document.addEventListener("DOMContentLoaded", boot); } else { boot(); }
})();
</script>

rec2667018101 ДЕСКТОП

 <!-- ===== KORS · 3 ПРОЕКТА ИЗ ОДНОЙ ЗАДАЧИ · ДЕСКТОП · блок T123. Только компьютер. ===== --> <div class="kcs"> <div class="kcs__head"> <div class="kcs__eyebrow">- КЕЙСЫ</div> <h2 class="kcs__title">Что изменилось у производителей после работы с нами и как они используют наши материалы в продажах.</h2> <div class="kcs__sub">С чем пришёл клиент, что сделали и какие материалы он получил.</div> </div> <div class="kcs__list" id="kcsList"></div> <div class="kcs__lb" id="kcsLb"><div class="kcs__lbbd"></div><div class="kcs__lbbox"><button class="kcs__lbx" id="kcsLbx">×</button><div class="kcs__lbframe"><iframe id="kcsLbIframe" allow="autoplay; fullscreen; encrypted-media; picture-in-picture" allowfullscreen></iframe></div></div></div> </div> <style>
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Unbounded:wght@400;600;700;800&display=swap');
.kcs{--bg:#0C0C0E;--raise:#141416;--card:#1B1B1F;--border:#2A2A2E;--text:#F5F3EF;--muted:#9A9A9A;--faint:#6a6a6e;--accent:#6D5DFB;--glow:rgba(109,93,251,.14);
  box-sizing:border-box;background:var(--bg);color:var(--text);font-family:'Manrope',Arial,sans-serif;-webkit-font-smoothing:antialiased;padding:84px 5vw 92px;}
.kcs *{box-sizing:border-box;margin:0;padding:0;}
.kcs__head{max-width:1240px;margin:0 auto 44px;}
.kcs__eyebrow{font-family:'Unbounded';font-size:12px;letter-spacing:.14em;color:var(--accent);margin-bottom:16px;}
.kcs__title{font-family:'Unbounded';font-weight:700;font-size:clamp(34px,4vw,60px);letter-spacing:-.02em;line-height:1.05;margin-bottom:16px;max-width:900px;}
.kcs__sub{color:var(--muted);font-size:18px;line-height:1.5;max-width:640px;}
.kcs__list{max-width:1240px;margin:0 auto;display:flex;flex-direction:column;gap:26px;}
.kcs__row{display:grid;grid-template-columns:46% 1fr;background:var(--raise);border:1px solid var(--border);border-radius:18px;overflow:hidden;}
.kcs__media{position:relative;overflow:hidden;background:#000;min-height:420px;}
.kcs__media iframe{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);min-width:100%;min-height:100%;width:auto;height:auto;aspect-ratio:16/9;border:none;pointer-events:none;}
.kcs__badge{position:absolute;top:18px;left:18px;z-index:2;background:rgba(0,0,0,.55);border:1px solid var(--border);color:var(--text);font-family:'Unbounded';font-size:10px;letter-spacing:.12em;padding:6px 12px;border-radius:6px;}
.kcs__body{padding:38px 40px;}
.kcs__name{font-family:'Unbounded';font-weight:700;font-size:26px;letter-spacing:-.01em;margin-bottom:8px;}
.kcs__tag{color:var(--faint);font-size:14px;margin-bottom:16px;}
.kcs__tags{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 16px;}
.kcs__chip{font-family:'Manrope',Arial,sans-serif;font-weight:600;font-size:9px;line-height:1;text-transform:uppercase;letter-spacing:.14em;color:rgba(255,255,255,.7);background:transparent;border:1px solid rgba(255,255,255,.22);border-radius:4px;padding:5px 8px;white-space:nowrap;}
.kcs__blk{margin-bottom:18px;}
.kcs__lbl{font-family:'Unbounded';font-size:11px;letter-spacing:.1em;color:var(--accent);margin-bottom:7px;}
.kcs__txt{color:var(--muted);font-size:15px;line-height:1.55;}
.kcs__txt b{color:var(--text);font-weight:600;}
.kcs__btns{display:flex;gap:11px;flex-wrap:wrap;margin-top:26px;}
.kcs__btn{display:inline-flex;align-items:center;gap:8px;font-family:'Manrope';font-weight:700;font-size:14px;padding:13px 20px;border-radius:9px;cursor:pointer;text-decoration:none;transition:.2s;border:1px solid var(--border);}
.kcs__btn svg{width:15px;height:15px;flex:none;}
.kcs__btn--full{background:var(--accent);color:#fff;border-color:var(--accent);}
.kcs__btn--full:hover{transform:translateY(-2px);box-shadow:0 10px 26px var(--glow);}
.kcs__btn--ghost{background:transparent;color:var(--text);}
.kcs__btn--ghost:hover{border-color:var(--accent);color:var(--accent);}
.kcs__soon{font-size:11px;color:var(--faint);margin-left:2px;}
/* оверлей полного видео */
.kcs__lb{position:fixed;inset:0;z-index:99999;display:none;align-items:center;justify-content:center;padding:40px;}
.kcs__lb.open{display:flex;}
.kcs__lbbd{position:absolute;inset:0;background:rgba(4,4,6,.9);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);}
.kcs__lbbox{position:relative;width:min(1100px,100%);}
.kcs__lbframe{position:relative;width:100%;aspect-ratio:16/9;background:#000;border-radius:12px;overflow:hidden;border:1px solid var(--border);}
.kcs__lbframe iframe{position:absolute;inset:0;width:100%;height:100%;border:none;}
.kcs__lbx{position:absolute;top:-46px;right:0;width:38px;height:38px;border-radius:9px;background:var(--raise);border:1px solid var(--border);color:var(--text);font-size:22px;line-height:1;cursor:pointer;}
.kcs__lbx:hover{border-color:var(--accent);color:var(--accent);}
@media (max-width:480px){ .kcs{display:none;} }

.kcs__title{max-width:1180px;font-size:clamp(30px,3.4vw,52px);line-height:1.12;text-wrap:balance}
.kcs__row{grid-template-columns:34% 1fr}
.kcs__media{min-height:620px}
.kcs__name{font-size:22px;line-height:1.25}
.kcs__txt{font-size:15px;line-height:1.62}
</style> <script>
(function(){
  var cases=[
  {
    "vid": "j8Pq4wWMNTPm6Js8UQiM1n",
    "alt": "Кейс Одоевские консервы: видео о пищевом производстве",
    "badge": "ВИДЕО / ФОТО",
    "name": "Одоевские консервы: от продуктовых роликов - к сайту RU/EN и материалам для выхода на рынок ОАЭ",
    "page": "/case-odoevskie",
    "tag": "Производитель фруктово-ягодных начинок. Начали с продуктовых роликов, после чего сотрудничество переросло в комплексную работу с материалами компании.",
    "tags": ["Видео","Фотосъёмка","Презентация","Фирменный стиль","Сайт"],
    "blocks": [
      [
        "",
        "Сайт RU/EN для работы с зарубежными партнёрами, презентация на русском и английском языках, разработка нового логотипа компании, подготовка материалов производства от А до Я."
      ],
      [
        "",
        "Создание материалов, которые помогают в развитии бизнеса за рубежом."
      ],
      [
        "",
        "Видео о заводе и продуктовых начинках, визитки, поздравления для партнёров, создание фирменных календарей, приглашения на выставки. В феврале планируем делать застройку стенда на выставке."
      ],
      [
        "РЕЗУЛЬТАТЫ",
        "- Новый сайт открыл переговоры в ОАЭ/MENA.<br>- Сделок стало больше.<br>- Все ключевые клиенты продолжили сотрудничество.<br>- Повысился трафик клиентов и уровень продаж новых продуктов."
      ]
    ]
  },
  {
    "vid": "iPcFsLF3eYfDYTauhcgjZj",
    "alt": "Кейс Вистекс: видео о заводе нетканых материалов",
    "full": "fv7FAnLfbLaDaNJLtSQ74H",
    "badge": "ВИДЕО",
    "name": "Вистекс: 8 направлений завода - в 3 минутах видео для коммерческих предложений",
    "page": "/case-vistex",
    "tag": "",
    "tags": ["Видео","Дизайн"],
    "blocks": [
      [
        "",
        "Задача: показать 8 разных направлений производства за 3 минуты видеоролика, благодаря которому клиент сразу поймёт, что производит завод."
      ],
      [
        "",
        "Менеджеры используют ролик в коммерческих предложениях и email-коммуникации, чтобы быстро показать направления производства."
      ],
      [
        "",
        "Создали дизайн email-письма для рассылок потенциальным клиентам с кликабельным функционалом и возможностью смотреть видео о предприятии прямо в email-сообщении."
      ],
      [
        "",
        "Стало проще объяснять продукты и направления предприятия. Увеличилась конверсия продаж."
      ]
    ]
  }
];
  var PLAY='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="5 3 19 12 5 21 5 3"/></svg>';
  var ARROW='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M13 5l7 7-7 7"/></svg>';
  var BG='?autoplay=true&muted=true&loop=true&controls=false&playsInline=true&background=true';
  var lb=document.getElementById('kcsLb'), lbf=document.getElementById('kcsLbIframe');
  function openLb(id){ lbf.src='https://kinescope.io/embed/'+id+'?autoplay=true'; lb.classList.add('open'); }
  function closeLb(){ lb.classList.remove('open'); lbf.src=''; }
  document.getElementById('kcsLbx').addEventListener('click',closeLb);
  lb.querySelector('.kcs__lbbd').addEventListener('click',closeLb);
  var list=document.getElementById('kcsList'); if(!list) return;
  cases.forEach(function(c){
    var row=document.createElement('div'); row.className='kcs__row';
    var blocksHtml=c.blocks.map(function(b){return '<div class="kcs__blk"><div class="kcs__lbl">'+b[0]+'</div><div class="kcs__txt">'+b[1]+'</div></div>';}).join('');
    var tagsHtml=(c.tags&&c.tags.length)?('<div class="kcs__tags">'+c.tags.map(function(t){return '<span class="kcs__chip">'+t+'</span>';}).join('')+'</div>'):'';
    row.innerHTML=
      '<div class="kcs__media"><iframe src="https://kinescope.io/embed/'+c.vid+BG+'" title="'+(c.alt||c.name)+'" aria-label="'+(c.alt||c.name)+'" allow="autoplay; fullscreen; encrypted-media; picture-in-picture"></iframe></div>'+
      '<div class="kcs__body"><div class="kcs__name">'+c.name+'</div>'+tagsHtml+'<div class="kcs__tag">'+c.tag+'</div>'+blocksHtml+
        '<div class="kcs__btns">'+
          '<button class="kcs__btn kcs__btn--full kcs-full">'+PLAY+'Смотреть полное видео</button>'+
          '<a class="kcs__btn kcs__btn--ghost kcs-soon" href="'+(c.page||'#')+'">Смотреть, как строился проект '+ARROW+'</a>'+
        '</div>'+
      '</div>';
    row.querySelector('.kcs-full').addEventListener('click',function(){ openLb(c.full||c.vid); });
    var soon=row.querySelector('.kcs-soon'); if(!c.page){ soon.addEventListener('click',function(e){ e.preventDefault(); }); }
    list.appendChild(row);
  });
})();
</script>

rec2667196001 МОБИЛКА

 <!-- ===== KORS · 3 ПРОЕКТА ИЗ ОДНОЙ ЗАДАЧИ · МОБИЛКА · блок T123. Только телефон. ===== --> <div class="kcm"> <div class="kcm__head"> <div class="kcm__eyebrow">- КЕЙСЫ</div> <h2 class="kcm__title">Что изменилось у производителей после работы с нами и как они используют наши материалы в продажах.</h2> <div class="kcm__sub">С чем пришёл клиент, что сделали и какие материалы он получил.</div> </div> <div class="kcm__list" id="kcmList"></div> <div class="kcm__lb" id="kcmLb"><div class="kcm__lbbd"></div><div class="kcm__lbbox"><button class="kcm__lbx" id="kcmLbx">×</button><div class="kcm__lbframe"><iframe id="kcmLbIframe" allow="autoplay; fullscreen; encrypted-media; picture-in-picture" allowfullscreen></iframe></div></div></div> </div> <style>
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Unbounded:wght@400;600;700;800&display=swap');
.kcm{--bg:#0C0C0E;--raise:#141416;--card:#1B1B1F;--border:#2A2A2E;--text:#F5F3EF;--muted:#9A9A9A;--faint:#6a6a6e;--accent:#6D5DFB;--glow:rgba(109,93,251,.14);
  box-sizing:border-box;background:var(--bg);color:var(--text);font-family:'Manrope',Arial,sans-serif;-webkit-font-smoothing:antialiased;padding:56px 20px 64px;}
.kcm *{box-sizing:border-box;margin:0;padding:0;}
.kcm__head{margin:0 auto 28px;}
.kcm__eyebrow{font-family:'Unbounded';font-size:11px;letter-spacing:.14em;color:var(--accent);margin-bottom:14px;}
.kcm__title{font-family:'Unbounded';font-weight:700;font-size:28px;letter-spacing:-.02em;line-height:1.1;margin-bottom:14px;}
.kcm__sub{color:var(--muted);font-size:15px;line-height:1.5;}
.kcm__list{display:flex;flex-direction:column;gap:20px;}
.kcm__row{background:var(--raise);border:1px solid var(--border);border-radius:16px;overflow:hidden;}
.kcm__media{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;background:#000;}
.kcm__media iframe{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);min-width:100%;min-height:100%;width:auto;height:auto;aspect-ratio:16/9;border:none;pointer-events:none;}
.kcm__badge{position:absolute;top:14px;left:14px;z-index:2;background:rgba(0,0,0,.55);border:1px solid var(--border);color:var(--text);font-family:'Unbounded';font-size:9.5px;letter-spacing:.12em;padding:5px 10px;border-radius:6px;}
.kcm__body{padding:20px 18px 22px;}
.kcm__name{font-family:'Unbounded';font-weight:700;font-size:20px;letter-spacing:-.01em;margin-bottom:6px;}
.kcm__tag{color:var(--faint);font-size:13px;margin-bottom:14px;}
.kcm__tags{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 13px;}
.kcm__chip{font-family:'Manrope',Arial,sans-serif;font-weight:600;font-size:8px;line-height:1;text-transform:uppercase;letter-spacing:.14em;color:rgba(255,255,255,.7);background:transparent;border:1px solid rgba(255,255,255,.22);border-radius:4px;padding:5px 8px;white-space:nowrap;}
.kcm__blk{margin-bottom:16px;}
.kcm__lbl{font-family:'Unbounded';font-size:10px;letter-spacing:.1em;color:var(--accent);margin-bottom:6px;}
.kcm__txt{color:var(--muted);font-size:14px;line-height:1.55;}
.kcm__txt b{color:var(--text);font-weight:600;}
.kcm__btns{display:flex;flex-direction:column;gap:10px;margin-top:22px;}
.kcm__btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:'Manrope';font-weight:700;font-size:14px;padding:14px 18px;border-radius:9px;cursor:pointer;text-decoration:none;border:1px solid var(--border);width:100%;}
.kcm__btn svg{width:15px;height:15px;flex:none;}
.kcm__btn--full{background:var(--accent);color:#fff;border-color:var(--accent);}
.kcm__btn--ghost{background:transparent;color:var(--text);}
.kcm__lb{position:fixed;inset:0;z-index:99999;display:none;align-items:center;justify-content:center;padding:16px;}
.kcm__lb.open{display:flex;}
.kcm__lbbd{position:absolute;inset:0;background:rgba(4,4,6,.92);}
.kcm__lbbox{position:relative;width:100%;}
.kcm__lbframe{position:relative;width:100%;aspect-ratio:16/9;background:#000;border-radius:12px;overflow:hidden;border:1px solid var(--border);}
.kcm__lbframe iframe{position:absolute;inset:0;width:100%;height:100%;border:none;}
.kcm__lbx{position:absolute;top:-44px;right:0;width:38px;height:38px;border-radius:9px;background:var(--raise);border:1px solid var(--border);color:var(--text);font-size:22px;line-height:1;cursor:pointer;}
@media (min-width:481px){ .kcm{display:none;} }

.kcm__title{font-size:clamp(23px,6.6vw,30px);line-height:1.16;text-wrap:balance;overflow-wrap:anywhere}
.kcm__name{font-size:18px;line-height:1.3;overflow-wrap:anywhere}
.kcm__txt{font-size:14px;line-height:1.62}
</style> <script>
(function(){
  var cases=[
  {
    "vid": "j8Pq4wWMNTPm6Js8UQiM1n",
    "alt": "Кейс Одоевские консервы: видео о пищевом производстве, мобильная версия",
    "badge": "ВИДЕО / ФОТО",
    "name": "Одоевские консервы: от продуктовых роликов - к сайту RU/EN и материалам для выхода на рынок ОАЭ",
    "page": "/case-odoevskie",
    "tag": "Производитель фруктово-ягодных начинок. Начали с продуктовых роликов, после чего сотрудничество переросло в комплексную работу с материалами компании.",
    "tags": ["Видео","Фотосъёмка","Презентация","Фирменный стиль","Сайт"],
    "blocks": [
      [
        "",
        "Сайт RU/EN для работы с зарубежными партнёрами, презентация на русском и английском языках, разработка нового логотипа компании, подготовка материалов производства от А до Я."
      ],
      [
        "",
        "Создание материалов, которые помогают в развитии бизнеса за рубежом."
      ],
      [
        "",
        "Видео о заводе и продуктовых начинках, визитки, поздравления для партнёров, создание фирменных календарей, приглашения на выставки. В феврале планируем делать застройку стенда на выставке."
      ],
      [
        "РЕЗУЛЬТАТЫ",
        "- Новый сайт открыл переговоры в ОАЭ/MENA.<br>- Сделок стало больше.<br>- Все ключевые клиенты продолжили сотрудничество.<br>- Повысился трафик клиентов и уровень продаж новых продуктов."
      ]
    ]
  },
  {
    "vid": "iPcFsLF3eYfDYTauhcgjZj",
    "alt": "Кейс Вистекс: видео о заводе нетканых материалов, мобильная версия",
    "full": "fv7FAnLfbLaDaNJLtSQ74H",
    "badge": "ВИДЕО",
    "name": "Вистекс: 8 направлений завода - в 3 минутах видео для коммерческих предложений",
    "page": "/case-vistex",
    "tag": "",
    "tags": ["Видео","Дизайн"],
    "blocks": [
      [
        "",
        "Задача: показать 8 разных направлений производства за 3 минуты видеоролика, благодаря которому клиент сразу поймёт, что производит завод."
      ],
      [
        "",
        "Менеджеры используют ролик в коммерческих предложениях и email-коммуникации, чтобы быстро показать направления производства."
      ],
      [
        "",
        "Создали дизайн email-письма для рассылок потенциальным клиентам с кликабельным функционалом и возможностью смотреть видео о предприятии прямо в email-сообщении."
      ],
      [
        "",
        "Стало проще объяснять продукты и направления предприятия. Увеличилась конверсия продаж."
      ]
    ]
  }
];
  var PLAY='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="5 3 19 12 5 21 5 3"/></svg>';
  var ARROW='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M13 5l7 7-7 7"/></svg>';
  var BG='?autoplay=true&muted=true&loop=true&controls=false&playsInline=true&background=true';
  var lb=document.getElementById('kcmLb'), lbf=document.getElementById('kcmLbIframe');
  function openLb(id){ lbf.src='https://kinescope.io/embed/'+id+'?autoplay=true'; lb.classList.add('open'); }
  function closeLb(){ lb.classList.remove('open'); lbf.src=''; }
  document.getElementById('kcmLbx').addEventListener('click',closeLb);
  lb.querySelector('.kcm__lbbd').addEventListener('click',closeLb);
  var list=document.getElementById('kcmList'); if(!list) return;
  cases.forEach(function(c){
    var row=document.createElement('div'); row.className='kcm__row';
    var blocksHtml=c.blocks.map(function(b){return '<div class="kcm__blk"><div class="kcm__lbl">'+b[0]+'</div><div class="kcm__txt">'+b[1]+'</div></div>';}).join('');
    var tagsHtml=(c.tags&&c.tags.length)?('<div class="kcm__tags">'+c.tags.map(function(t){return '<span class="kcm__chip">'+t+'</span>';}).join('')+'</div>'):'';
    row.innerHTML=
      '<div class="kcm__media"><iframe src="https://kinescope.io/embed/'+c.vid+BG+'" title="'+(c.alt||c.name)+'" aria-label="'+(c.alt||c.name)+'" allow="autoplay; fullscreen; encrypted-media; picture-in-picture"></iframe></div>'+
      '<div class="kcm__body"><div class="kcm__name">'+c.name+'</div>'+tagsHtml+'<div class="kcm__tag">'+c.tag+'</div>'+blocksHtml+
        '<div class="kcm__btns">'+
          '<button class="kcm__btn kcm__btn--full kcm-full">'+PLAY+'Смотреть полное видео</button>'+
          '<a class="kcm__btn kcm__btn--ghost kcm-soon" href="'+(c.page||'#')+'">Смотреть, как строился проект '+ARROW+'</a>'+
        '</div>'+
      '</div>';
    row.querySelector('.kcm-full').addEventListener('click',function(){ openLb(c.full||c.vid); });
    var soon=row.querySelector('.kcm-soon'); if(!c.page){ soon.addEventListener('click',function(e){ e.preventDefault(); }); }
    list.appendChild(row);
  });
})();
</script>

rec2663623901 ДЕСКТОП

 <!-- ===== KORS · НАШИ РАБОТЫ · ДЕСКТОП · блок T123. Показывать ТОЛЬКО на компьютере. ===== --> <div class="kgald"> <div class="kgald__head"> <div class="kgald__eyebrow">- НАШИ РАБОТЫ</div> <h2 class="kgald__title">460+ проектов: найдите свою отрасль.</h2> <div class="kgald__sub">Сфера, формат и срок по каждому проекту. Нажми «Смотреть полное видео» - откроется на весь экран.</div> </div> <div class="kgald__filter" id="kgaldFilter" aria-label="Фильтр работ по услугам"> <button type="button" class="kgald__fbtn is-active" data-f="all">Все</button> <button type="button" class="kgald__fbtn" data-f="video">Видео</button> <button type="button" class="kgald__fbtn" data-f="site">Сайты</button> <button type="button" class="kgald__fbtn" data-f="presentation">Презентации</button> <button type="button" class="kgald__fbtn" data-f="brand">Фирменный стиль</button> <button type="button" class="kgald__fbtn" data-f="ads">Реклама</button> </div> <div class="kgald__grid" id="kgaldTop"></div> <div class="kgald__hidden" id="kgaldHidden"><div class="kgald__grid" id="kgaldRest"></div></div> <div class="kgald__empty" id="kgaldEmpty">По этой услуге в подборке пока нет проектов.</div> <div class="kgald__morewrap"><button class="kgald__more" id="kgaldMore"><span class="kgald__mtext">Смотреть все работы</span> <span class="kgald__count">+4</span></button></div> <div class="kgald__lb" id="kgaldLb"><div class="kgald__lbbd"></div><div class="kgald__lbbox"><button class="kgald__lbx" id="kgaldLbx">×</button><div class="kgald__lbframe"><iframe id="kgaldLbIframe" allow="autoplay; fullscreen; encrypted-media; picture-in-picture" allowfullscreen></iframe></div></div></div> </div> <style>
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Unbounded:wght@400;600;700;800&display=swap');
.kgald{--bg:#0C0C0E;--raise:#141416;--card:#1B1B1F;--border:#2A2A2E;--text:#F5F3EF;--muted:#9A9A9A;--faint:#6a6a6e;--accent:#6D5DFB;--glow:rgba(109,93,251,.14);
  box-sizing:border-box;background:var(--bg);color:var(--text);font-family:'Manrope',Arial,sans-serif;-webkit-font-smoothing:antialiased;padding:80px 5vw 90px;}
.kgald *{box-sizing:border-box;margin:0;padding:0;}
.kgald__head{max-width:1240px;margin:0 auto 44px;text-align:center;}
.kgald__eyebrow{font-family:'Unbounded';font-size:12px;letter-spacing:.14em;color:var(--accent);margin-bottom:14px;}
.kgald__title{font-family:'Unbounded';font-weight:700;font-size:clamp(30px,3.4vw,48px);letter-spacing:-.02em;margin-bottom:14px;}
.kgald__sub{color:var(--muted);font-size:16px;line-height:1.5;max-width:560px;margin:0 auto;}
.kgald__grid{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.kgald__card{background:var(--raise);border:1px solid var(--border);border-radius:16px;overflow:hidden;transition:.25s;display:flex;flex-direction:column;}
.kgald__card:hover{border-color:rgba(109,93,251,.5);transform:translateY(-3px);box-shadow:0 16px 40px rgba(0,0,0,.4);}
.kgald__video{position:relative;width:100%;aspect-ratio:16/9;background:#000;}
.kgald__video iframe{position:absolute;inset:0;width:100%;height:100%;border:none;pointer-events:none;}
.kgald__body{padding:20px 20px 22px;display:flex;flex-direction:column;flex:1;}
.kgald__name{font-family:'Unbounded';font-weight:700;font-size:20px;margin-bottom:10px;letter-spacing:-.01em;}
.kgald__meta{display:flex;flex-direction:column;gap:6px;margin-bottom:18px;}
.kgald__row{font-size:14px;color:var(--muted);line-height:1.4;}
.kgald__row b{color:var(--text);font-weight:600;}
.kgald__full--nolink{cursor:default}
.kgald__full{margin-top:auto;display:inline-flex;align-items:center;gap:8px;align-self:flex-start;background:transparent;border:1px solid var(--border);color:var(--text);font-family:'Manrope';font-weight:700;font-size:14px;padding:12px 18px;border-radius:9px;cursor:pointer;transition:.2s;}
.kgald__full:hover{border-color:var(--accent);color:var(--accent);}
.kgald__full svg{width:15px;height:15px;flex:none;}
.kgald__hidden{max-width:1240px;margin:0 auto;max-height:0;overflow:hidden;opacity:0;transition:max-height .55s ease,opacity .4s ease,margin-top .4s ease;margin-top:0;}
.kgald__hidden.open{opacity:1;margin-top:22px;}
.kgald__morewrap{text-align:center;margin-top:40px;}
.kgald__more{display:inline-flex;align-items:center;gap:10px;background:var(--accent);color:#fff;font-family:'Manrope';font-weight:700;font-size:15px;padding:16px 30px;border-radius:9px;border:none;cursor:pointer;transition:.25s;}
.kgald__more:hover{transform:translateY(-2px);box-shadow:0 10px 30px var(--glow);}
.kgald__count{font-family:'Unbounded';font-size:12px;background:rgba(0,0,0,.18);padding:3px 8px;border-radius:20px;}
.kgald__more.is-open .kgald__count{display:none;}
.kgald__lb{position:fixed;inset:0;z-index:99999;display:none;align-items:center;justify-content:center;padding:40px;}
.kgald__lb.open{display:flex;}
.kgald__lbbd{position:absolute;inset:0;background:rgba(4,4,6,.9);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);}
.kgald__lbbox{position:relative;width:min(1100px,100%);}
.kgald__lbframe{position:relative;width:100%;aspect-ratio:16/9;background:#000;border-radius:12px;overflow:hidden;border:1px solid var(--border);}
.kgald__lbframe iframe{position:absolute;inset:0;width:100%;height:100%;border:none;}
.kgald__lbx{position:absolute;top:-46px;right:0;width:38px;height:38px;border-radius:9px;background:var(--raise);border:1px solid var(--border);color:var(--text);font-size:22px;line-height:1;cursor:pointer;}
.kgald__lbx:hover{border-color:var(--accent);color:var(--accent);}
.kgald__filter{max-width:1240px;margin:0 auto 26px;display:flex;flex-wrap:nowrap;gap:8px;justify-content:center;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;padding-bottom:2px;}
.kgald__filter::-webkit-scrollbar{display:none;}
.kgald__fbtn{flex:none;background:transparent;border:1px solid var(--border);color:var(--muted);font-family:'Manrope',Arial,sans-serif;font-weight:600;font-size:13px;padding:9px 16px;border-radius:20px;cursor:pointer;transition:.2s;white-space:nowrap;}
.kgald__fbtn:hover{border-color:rgba(109,93,251,.5);color:var(--text);}
.kgald__fbtn.is-active{background:var(--accent);border-color:var(--accent);color:#fff;}
.kgald__tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px;}
.kgald__tag{font-family:'Manrope',Arial,sans-serif;font-weight:600;font-size:9px;line-height:1;text-transform:uppercase;letter-spacing:.14em;color:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.22);border-radius:4px;padding:5px 8px;white-space:nowrap;}
.kgald__desc{font-size:12px;line-height:1.5;color:var(--muted);margin-bottom:14px;}
.kgald__card.is-off{opacity:0;transform:translateY(6px);}
.kgald__empty{max-width:1240px;margin:0 auto;text-align:center;color:var(--muted);font-size:15px;padding:34px 0;display:none;}
.kgald__empty.on{display:block;}
@media (max-width:900px){ .kgald__grid{grid-template-columns:repeat(2,1fr);} .kgald__filter{justify-content:flex-start;} }
@media (max-width:480px){ .kgald{display:none;} }
#rec2663623901 .kgald__count{color:#fff;background:rgba(0,0,0,.32);}
</style> <script>
(function(){
  var SLUG={'Видео':'video','Фотосъёмка':'photo','Сайт':'site','Презентация':'presentation','Фирменный стиль':'brand','Реклама':'ads','Дизайн':'design','Трансляция':'live','Продюсирование':'producing'};
  var works=[
    {id:'j8Pq4wWMNTPm6Js8UQiM1n', name:'Одоевские консервы', sphere:'FMCG, пищевое производство', format:'презентационное видео о продукции (B2B)', term:'7 дней', tags:['Видео','Фотосъёмка','Презентация','Фирменный стиль','Сайт'], desc:'Видео о заводе и продукции, фотосъёмка производства, презентация, логотип и фирменный стиль, сайт на русском и английском для работы с партнёрами в ОАЭ.', alt:'Съёмка пищевого производства Одоевские консервы'},
    {id:'iPcFsLF3eYfDYTauhcgjZj', full:'fv7FAnLfbLaDaNJLtSQ74H', name:'Вистекс', sphere:'производство, предприятие', format:'презентационный ролик', term:'15 дней', tags:['Видео','Дизайн'], desc:'Ролик о заводе: восемь направлений производства за три минуты. Дизайн email-письма со встроенным видео для коммерческих предложений.', alt:'Видео о производстве для завода Вистекс'},
    {id:'xgBCJrU3Fy9CtKDXR9R23S', name:'Инвойсбокс', sphere:'финансовые технологии (FinTech)', format:'презентационный ролик о компании', term:'6 дней', tags:['Видео','Реклама'], desc:'Серия роликов о платёжном сервисе: объяснили сложный финансовый продукт простым языком. Настроили рекламу в Яндексе.', alt:'Ролик о платёжном сервисе Инвойсбокс'},
    {id:'uqJ79iyVPcqN1ZtTtjnkAv', name:'GosObmen', sphere:'финансовые услуги', format:'рекламный ролик', term:'3 дня', tags:['Видео','Сайт','Дизайн'], desc:'Рекламные ролики, тексты и сайт. Собрали скрипт для отдела продаж.', alt:'Рекламный ролик и сайт для сервиса Гособмен'},
    {id:'gHMF2zBsAdSdbcEH9wSZKh', name:'Редакция ЭКСМО', sphere:'издательский бизнес', format:'съёмка трейлера по сюжету книги', term:'9 дней', tags:['Видео','Дизайн'], desc:'Трейлер книги и афиша для издательства.', alt:'Книжный трейлер для издательства Редакция ЭКСМО'},
    {id:'8YSeQnzXxmpkmo7uNNcLrF', name:'YouTube-шоу', sphere:'медиа', format:'съёмка выпусков', term:'14 дней', tags:['Видео','Продюсирование','Реклама'], desc:'Продюсирование и режиссура шоу: съёмка выпусков и рекламное сопровождение.', alt:'Съёмка выпусков YouTube-шоу'},
    {id:'wLtMKZCpf75eYEWMXPEPZY', name:'Рокстар', sphere:'медиа', format:'музыкальный клип', term:'12 дней', tags:['Видео','Дизайн'], desc:'Три клипа и обложки для музыкального проекта.', alt:'Музыкальные клипы для проекта Рокстар'},
    {id:'bZ8JyozhtKdSDiy5xjLoVr', name:'Ресторан Rumi / «ЗНАТЬ»', sphere:'ресторанный бизнес, мероприятия', format:'видео-отчёт о мероприятии', term:'2 дня', tags:['Видео','Трансляция','Презентация'], desc:'Съёмка мероприятий, прямая трансляция и презентации для ресторана.', alt:'Съёмка мероприятия и трансляция для ресторана Rumi'},
    {id:'uiVqp8dWpzNoBt2GweBLs9', name:'Новая Формация', sphere:'организация, бизнес', format:'презентационный ролик', term:'4 дня', tags:['Видео','Дизайн'], desc:'Презентационный ролик, афиша и ведение контента.', alt:'Презентационный ролик для проекта Новая Формация'},
    {id:'eCGHEdUFdSyEjCBXxcsUSC', name:'KORS Production', sphere:'создание контента', format:'актуальные работы', term:'2025-й год', tags:['Видео','Продюсирование'], desc:'Шоурил студии: съёмки на производствах и коммерческие проекты разных лет.', alt:'Актуальные работы студии KORS Production'}
  ];
  var FS='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="5 3 19 12 5 21 5 3"/></svg>';
  var lb=document.getElementById('kgaldLb'), lbf=document.getElementById('kgaldLbIframe');
  function openLb(id){ lbf.src='https://kinescope.io/embed/'+id+'?autoplay=true'; lb.classList.add('open'); }
  function closeLb(){ lb.classList.remove('open'); lbf.src=''; }
  document.getElementById('kgaldLbx').addEventListener('click',closeLb);
  lb.querySelector('.kgald__lbbd').addEventListener('click',closeLb);
  function makeCard(w, defer){
    var card=document.createElement('div'); card.className='kgald__card';
    card.setAttribute('data-tags',(w.tags||[]).map(function(t){return SLUG[t]||'';}).join(' '));
    var ttl=(w.alt||w.name).replace(/"/g,'"');
    var q='?autoplay=true&muted=true&loop=true&controls=false&playsInline=true&background=true';
    var ift= defer ? '<iframe data-src="https://kinescope.io/embed/'+w.id+q+'" title="'+ttl+'" aria-label="'+ttl+'" allow="autoplay; fullscreen; encrypted-media; picture-in-picture" allowfullscreen></iframe>'
                   : '<iframe loading="lazy" src="https://kinescope.io/embed/'+w.id+q+'" title="'+ttl+'" aria-label="'+ttl+'" allow="autoplay; fullscreen; encrypted-media; picture-in-picture" allowfullscreen></iframe>';
    var tagsHtml=(w.tags&&w.tags.length)?'<div class="kgald__tags">'+w.tags.map(function(t){return '<span class="kgald__tag">'+t+'</span>';}).join('')+'</div>':'';
    var descHtml=w.desc?'<p class="kgald__desc">'+w.desc+'</p>':'';
    card.innerHTML='<div class="kgald__video">'+ift+'</div><div class="kgald__body"><h3 class="kgald__name">'+w.name+'</h3>'+tagsHtml+descHtml+'<div class="kgald__meta"><div class="kgald__row"><b>Сфера:</b> '+w.sphere+'</div><div class="kgald__row"><b>Формат:</b> '+w.format+'</div><div class="kgald__row"><b>Срок:</b> '+w.term+'</div></div><button class="kgald__full'+(w.full?'':' kgald__full--nolink')+'" '+(w.full?'':'aria-disabled="true"')+'>'+FS+'Смотреть полное видео</button></div>';
    /* KORS: у карточек без поля full полной версии ролика пока нет. Кнопка остаётся видимой, но клик отключён, чтобы не открывался тот же короткий ролик. Как только появится ссылка, добавь в объект работы full:'ID_полного_ролика' - кнопка заработает сама, ничего больше менять не нужно. */
    if(w.full){ card.querySelector('.kgald__full').addEventListener('click',function(){ openLb(w.full); }); }
    return card;
  }
  var top=document.getElementById('kgaldTop'),rest=document.getElementById('kgaldRest'),box=document.getElementById('kgaldHidden'),more=document.getElementById('kgaldMore');
  if(!top||!rest||!box||!more)return;
  works.slice(0,6).forEach(function(w){top.appendChild(makeCard(w,false));});
  works.slice(6).forEach(function(w){rest.appendChild(makeCard(w,true));});
  var loaded=false, mt=more.querySelector('.kgald__mtext');
  more.addEventListener('click',function(){
    if(!box.classList.contains('open')){
      if(!loaded){rest.querySelectorAll('iframe[data-src]').forEach(function(f){f.src=f.getAttribute('data-src');});loaded=true;}
      box.classList.add('open'); box.style.maxHeight=box.scrollHeight+'px';
      setTimeout(function(){if(box.classList.contains('open'))box.style.maxHeight='none';},600);
      more.classList.add('is-open'); mt.textContent='Свернуть';
    }else{
      box.style.maxHeight=box.scrollHeight+'px';
      requestAnimationFrame(function(){box.style.maxHeight='0px';box.classList.remove('open');});
      more.classList.remove('is-open'); mt.textContent='Смотреть все работы';
    }
  });
  window.addEventListener('resize',function(){if(box.classList.contains('open'))box.style.maxHeight='none';});

  /* фильтр по услугам: чистый JS, отбор по data-tags */
  var fwrap=document.getElementById('kgaldFilter'), empty=document.getElementById('kgaldEmpty'), morewrap=more.parentNode;
  function loadRest(){ if(!loaded){ rest.querySelectorAll('iframe[data-src]').forEach(function(f){ f.src=f.getAttribute('data-src'); }); loaded=true; } }
  function setBox(open){
    if(open){ loadRest(); box.classList.add('open'); box.style.maxHeight='none'; }
    else { box.classList.remove('open'); box.style.maxHeight='0px'; }
  }
  if(fwrap){
    fwrap.addEventListener('click',function(e){
      var b=e.target.closest?e.target.closest('.kgald__fbtn'):null;
      if(!b) return;
      var f=b.getAttribute('data-f'), all=(f==='all'), shown=0, restShown=0;
      fwrap.querySelectorAll('.kgald__fbtn').forEach(function(x){ x.classList.toggle('is-active', x===b); });
      [top,rest].forEach(function(grid){
        grid.querySelectorAll('.kgald__card').forEach(function(c){
          var m = all || ((' '+(c.getAttribute('data-tags')||'')+' ').indexOf(' '+f+' ')>-1);
          if(m){
            shown++; if(grid===rest) restShown++;
            c.style.display='';
            void c.offsetWidth;
            c.classList.remove('is-off');
          } else {
            c.classList.add('is-off');
            setTimeout(function(){ if(c.classList.contains('is-off')) c.style.display='none'; },260);
          }
        });
      });
      if(all){
        setBox(false); morewrap.style.display='';
        more.classList.remove('is-open'); mt.textContent='Смотреть все работы';
      } else {
        setBox(restShown>0); morewrap.style.display='none';
      }
      if(empty) empty.classList.toggle('on', shown===0);
    });
  }
})();
</script>

rec2663636801 МОБИЛКА

 <!-- ===== KORS · НАШИ РАБОТЫ · МОБИЛКА · блок T123. Показывать ТОЛЬКО на телефоне. ===== --> <div class="kgalm"> <div class="kgalm__head"> <div class="kgalm__eyebrow">- НАШИ РАБОТЫ</div> <h2 class="kgalm__title">460+ проектов: найдите свою отрасль.</h2> <div class="kgalm__sub">Сфера, формат и срок по каждому проекту. «Смотреть полное видео» - на весь экран.</div> </div> <div class="kgalm__filter" id="kgalmFilter" aria-label="Фильтр работ по услугам"> <button type="button" class="kgalm__fbtn is-active" data-f="all">Все</button> <button type="button" class="kgalm__fbtn" data-f="video">Видео</button> <button type="button" class="kgalm__fbtn" data-f="site">Сайты</button> <button type="button" class="kgalm__fbtn" data-f="presentation">Презентации</button> <button type="button" class="kgalm__fbtn" data-f="brand">Фирменный стиль</button> <button type="button" class="kgalm__fbtn" data-f="ads">Реклама</button> </div> <div class="kgalm__col" id="kgalmTop"></div> <div class="kgalm__hidden" id="kgalmHidden"><div class="kgalm__col" id="kgalmRest"></div></div> <div class="kgalm__empty" id="kgalmEmpty">По этой услуге в подборке пока нет проектов.</div> <div class="kgalm__morewrap"><button class="kgalm__more" id="kgalmMore"><span class="kgalm__mtext">Смотреть ещё наши работы</span> <span class="kgalm__count">+7</span></button></div> <div class="kgalm__lb" id="kgalmLb"><div class="kgalm__lbbd"></div><div class="kgalm__lbbox"><button class="kgalm__lbx" id="kgalmLbx">×</button><div class="kgalm__lbframe"><iframe id="kgalmLbIframe" allow="autoplay; fullscreen; encrypted-media; picture-in-picture" allowfullscreen></iframe></div></div></div> </div> <style>
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Unbounded:wght@400;600;700;800&display=swap');
.kgalm{--bg:#0C0C0E;--raise:#141416;--card:#1B1B1F;--border:#2A2A2E;--text:#F5F3EF;--muted:#9A9A9A;--faint:#6a6a6e;--accent:#6D5DFB;--glow:rgba(109,93,251,.14);
  box-sizing:border-box;background:var(--bg);color:var(--text);font-family:'Manrope',Arial,sans-serif;-webkit-font-smoothing:antialiased;padding:56px 20px 64px;}
.kgalm *{box-sizing:border-box;margin:0;padding:0;}
.kgalm__head{margin:0 auto 30px;text-align:center;}
.kgalm__eyebrow{font-family:'Unbounded';font-size:11px;letter-spacing:.14em;color:var(--accent);margin-bottom:12px;}
.kgalm__title{font-family:'Unbounded';font-weight:700;font-size:26px;letter-spacing:-.02em;margin-bottom:12px;line-height:1.15;}
.kgalm__sub{color:var(--muted);font-size:14px;line-height:1.5;max-width:340px;margin:0 auto;}
.kgalm__col{display:flex;flex-direction:column;gap:18px;}
.kgalm__card{background:var(--raise);border:1px solid var(--border);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;}
.kgalm__video{position:relative;width:100%;aspect-ratio:16/9;background:#000;}
.kgalm__video iframe{position:absolute;inset:0;width:100%;height:100%;border:none;pointer-events:none;}
.kgalm__body{padding:18px 18px 20px;display:flex;flex-direction:column;}
.kgalm__name{font-family:'Unbounded';font-weight:700;font-size:18px;margin-bottom:9px;letter-spacing:-.01em;}
.kgalm__meta{display:flex;flex-direction:column;gap:5px;margin-bottom:16px;}
.kgalm__row{font-size:13px;color:var(--muted);line-height:1.4;}
.kgalm__row b{color:var(--text);font-weight:600;}
.kgalm__full--nolink{cursor:default}
.kgalm__full{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:transparent;border:1px solid var(--border);color:var(--text);font-family:'Manrope';font-weight:700;font-size:14px;padding:13px 18px;border-radius:9px;cursor:pointer;width:100%;}
.kgalm__full svg{width:15px;height:15px;flex:none;}
.kgalm__hidden{max-height:0;overflow:hidden;opacity:0;transition:max-height .55s ease,opacity .4s ease,margin-top .4s ease;margin-top:0;}
.kgalm__hidden.open{opacity:1;margin-top:18px;}
.kgalm__morewrap{margin-top:28px;}
.kgalm__more{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;background:var(--accent);color:#fff;font-family:'Manrope';font-weight:700;font-size:15px;padding:16px 24px;border-radius:9px;border:none;cursor:pointer;}
.kgalm__count{font-family:'Unbounded';font-size:12px;background:rgba(0,0,0,.18);padding:3px 8px;border-radius:20px;}
.kgalm__more.is-open .kgalm__count{display:none;}
.kgalm__lb{position:fixed;inset:0;z-index:99999;display:none;align-items:center;justify-content:center;padding:16px;}
.kgalm__lb.open{display:flex;}
.kgalm__lbbd{position:absolute;inset:0;background:rgba(4,4,6,.92);}
.kgalm__lbbox{position:relative;width:100%;}
.kgalm__lbframe{position:relative;width:100%;aspect-ratio:16/9;background:#000;border-radius:12px;overflow:hidden;border:1px solid var(--border);}
.kgalm__lbframe iframe{position:absolute;inset:0;width:100%;height:100%;border:none;}
.kgalm__lbx{position:absolute;top:-44px;right:0;width:38px;height:38px;border-radius:9px;background:var(--raise);border:1px solid var(--border);color:var(--text);font-size:22px;line-height:1;cursor:pointer;}
.kgalm__filter{display:flex;flex-wrap:nowrap;gap:8px;margin:0 -20px 22px;padding:0 20px 2px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;}
.kgalm__filter::-webkit-scrollbar{display:none;}
.kgalm__fbtn{flex:none;background:transparent;border:1px solid var(--border);color:var(--muted);font-family:'Manrope',Arial,sans-serif;font-weight:600;font-size:13px;padding:9px 15px;border-radius:20px;cursor:pointer;white-space:nowrap;transition:.2s;}
.kgalm__fbtn.is-active{background:var(--accent);border-color:var(--accent);color:#fff;}
.kgalm__tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:11px;}
.kgalm__tag{font-family:'Manrope',Arial,sans-serif;font-weight:600;font-size:8px;line-height:1;text-transform:uppercase;letter-spacing:.14em;color:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.22);border-radius:4px;padding:5px 8px;white-space:nowrap;}
.kgalm__desc{font-size:12px;line-height:1.5;color:var(--muted);margin-bottom:13px;}
.kgalm__card{transition:opacity .25s ease,transform .25s ease;}
.kgalm__card.is-off{opacity:0;transform:translateY(6px);}
.kgalm__empty{text-align:center;color:var(--muted);font-size:14px;padding:28px 0;display:none;}
.kgalm__empty.on{display:block;}
@media (min-width:481px){ .kgalm{display:none;} }
</style> <script>
(function(){
  var SLUG={'Видео':'video','Фотосъёмка':'photo','Сайт':'site','Презентация':'presentation','Фирменный стиль':'brand','Реклама':'ads','Дизайн':'design','Трансляция':'live','Продюсирование':'producing'};
  var works=[
    {id:'j8Pq4wWMNTPm6Js8UQiM1n', name:'Одоевские консервы', sphere:'FMCG, пищевое производство', format:'презентационное видео о продукции (B2B)', term:'7 дней', tags:['Видео','Фотосъёмка','Презентация','Фирменный стиль','Сайт'], desc:'Видео о заводе и продукции, фотосъёмка производства, презентация, логотип и фирменный стиль, сайт на русском и английском для работы с партнёрами в ОАЭ.', alt:'Съёмка пищевого производства Одоевские консервы, мобильная версия'},
    {id:'iPcFsLF3eYfDYTauhcgjZj', full:'fv7FAnLfbLaDaNJLtSQ74H', name:'Вистекс', sphere:'производство, предприятие', format:'презентационный ролик', term:'15 дней', tags:['Видео','Дизайн'], desc:'Ролик о заводе: восемь направлений производства за три минуты. Дизайн email-письма со встроенным видео для коммерческих предложений.', alt:'Видео о производстве для завода Вистекс, мобильная версия'},
    {id:'xgBCJrU3Fy9CtKDXR9R23S', name:'Инвойсбокс', sphere:'финансовые технологии (FinTech)', format:'презентационный ролик о компании', term:'6 дней', tags:['Видео','Реклама'], desc:'Серия роликов о платёжном сервисе: объяснили сложный финансовый продукт простым языком. Настроили рекламу в Яндексе.', alt:'Ролик о платёжном сервисе Инвойсбокс, мобильная версия'},
    {id:'uqJ79iyVPcqN1ZtTtjnkAv', name:'GosObmen', sphere:'финансовые услуги', format:'рекламный ролик', term:'3 дня', tags:['Видео','Сайт','Дизайн'], desc:'Рекламные ролики, тексты и сайт. Собрали скрипт для отдела продаж.', alt:'Рекламный ролик и сайт для сервиса Гособмен, мобильная версия'},
    {id:'gHMF2zBsAdSdbcEH9wSZKh', name:'Редакция ЭКСМО', sphere:'издательский бизнес', format:'съёмка трейлера по сюжету книги', term:'9 дней', tags:['Видео','Дизайн'], desc:'Трейлер книги и афиша для издательства.', alt:'Книжный трейлер для издательства Редакция ЭКСМО, мобильная версия'},
    {id:'8YSeQnzXxmpkmo7uNNcLrF', name:'YouTube-шоу', sphere:'медиа', format:'съёмка выпусков', term:'14 дней', tags:['Видео','Продюсирование','Реклама'], desc:'Продюсирование и режиссура шоу: съёмка выпусков и рекламное сопровождение.', alt:'Съёмка выпусков YouTube-шоу, мобильная версия'},
    {id:'wLtMKZCpf75eYEWMXPEPZY', name:'Рокстар', sphere:'медиа', format:'музыкальный клип', term:'12 дней', tags:['Видео','Дизайн'], desc:'Три клипа и обложки для музыкального проекта.', alt:'Музыкальные клипы для проекта Рокстар, мобильная версия'},
    {id:'bZ8JyozhtKdSDiy5xjLoVr', name:'Ресторан Rumi / «ЗНАТЬ»', sphere:'ресторанный бизнес, мероприятия', format:'видео-отчёт о мероприятии', term:'2 дня', tags:['Видео','Трансляция','Презентация'], desc:'Съёмка мероприятий, прямая трансляция и презентации для ресторана.', alt:'Съёмка мероприятия и трансляция для ресторана Rumi, мобильная версия'},
    {id:'uiVqp8dWpzNoBt2GweBLs9', name:'Новая Формация', sphere:'организация, бизнес', format:'презентационный ролик', term:'4 дня', tags:['Видео','Дизайн'], desc:'Презентационный ролик, афиша и ведение контента.', alt:'Презентационный ролик для проекта Новая Формация, мобильная версия'},
    {id:'eCGHEdUFdSyEjCBXxcsUSC', name:'KORS Production', sphere:'создание контента', format:'актуальные работы', term:'2025-й год', tags:['Видео','Продюсирование'], desc:'Шоурил студии: съёмки на производствах и коммерческие проекты разных лет.', alt:'Актуальные работы студии KORS Production, мобильная версия'}
  ];
  var FS='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="5 3 19 12 5 21 5 3"/></svg>';
  var lb=document.getElementById('kgalmLb'), lbf=document.getElementById('kgalmLbIframe');
  function openLb(id){ lbf.src='https://kinescope.io/embed/'+id+'?autoplay=true'; lb.classList.add('open'); }
  function closeLb(){ lb.classList.remove('open'); lbf.src=''; }
  document.getElementById('kgalmLbx').addEventListener('click',closeLb);
  lb.querySelector('.kgalm__lbbd').addEventListener('click',closeLb);
  function makeCard(w, defer){
    var card=document.createElement('div'); card.className='kgalm__card';
    card.setAttribute('data-tags',(w.tags||[]).map(function(t){return SLUG[t]||'';}).join(' '));
    var ttl=(w.alt||w.name).replace(/"/g,'"');
    var q='?autoplay=true&muted=true&loop=true&controls=false&playsInline=true&background=true';
    var ift= defer ? '<iframe data-src="https://kinescope.io/embed/'+w.id+q+'" title="'+ttl+'" aria-label="'+ttl+'" allow="autoplay; fullscreen; encrypted-media; picture-in-picture" allowfullscreen></iframe>'
                   : '<iframe loading="lazy" src="https://kinescope.io/embed/'+w.id+q+'" title="'+ttl+'" aria-label="'+ttl+'" allow="autoplay; fullscreen; encrypted-media; picture-in-picture" allowfullscreen></iframe>';
    var tagsHtml=(w.tags&&w.tags.length)?'<div class="kgalm__tags">'+w.tags.map(function(t){return '<span class="kgalm__tag">'+t+'</span>';}).join('')+'</div>':'';
    var descHtml=w.desc?'<p class="kgalm__desc">'+w.desc+'</p>':'';
    card.innerHTML='<div class="kgalm__video">'+ift+'</div><div class="kgalm__body"><h3 class="kgalm__name">'+w.name+'</h3>'+tagsHtml+descHtml+'<div class="kgalm__meta"><div class="kgalm__row"><b>Сфера:</b> '+w.sphere+'</div><div class="kgalm__row"><b>Формат:</b> '+w.format+'</div><div class="kgalm__row"><b>Срок:</b> '+w.term+'</div></div><button class="kgalm__full'+(w.full?'':' kgalm__full--nolink')+'" '+(w.full?'':'aria-disabled="true"')+'>'+FS+'Смотреть полное видео</button></div>';
    /* KORS: у карточек без поля full полной версии ролика пока нет. Кнопка остаётся видимой, но клик отключён, чтобы не открывался тот же короткий ролик. Как только появится ссылка, добавь в объект работы full:'ID_полного_ролика' - кнопка заработает сама, ничего больше менять не нужно. */
    if(w.full){ card.querySelector('.kgalm__full').addEventListener('click',function(){ openLb(w.full); }); }
    return card;
  }
  var top=document.getElementById('kgalmTop'),rest=document.getElementById('kgalmRest'),box=document.getElementById('kgalmHidden'),more=document.getElementById('kgalmMore');
  if(!top||!rest||!box||!more)return;
  works.slice(0,3).forEach(function(w){top.appendChild(makeCard(w,false));});
  works.slice(3).forEach(function(w){rest.appendChild(makeCard(w,true));});
  var loaded=false, mt=more.querySelector('.kgalm__mtext');
  more.addEventListener('click',function(){
    if(!box.classList.contains('open')){
      if(!loaded){rest.querySelectorAll('iframe[data-src]').forEach(function(f){f.src=f.getAttribute('data-src');});loaded=true;}
      box.classList.add('open'); box.style.maxHeight=box.scrollHeight+'px';
      setTimeout(function(){if(box.classList.contains('open'))box.style.maxHeight='none';},600);
      more.classList.add('is-open'); mt.textContent='Свернуть';
    }else{
      box.style.maxHeight=box.scrollHeight+'px';
      requestAnimationFrame(function(){box.style.maxHeight='0px';box.classList.remove('open');});
      more.classList.remove('is-open'); mt.textContent='Смотреть ещё наши работы';
    }
  });
  window.addEventListener('resize',function(){if(box.classList.contains('open'))box.style.maxHeight='none';});

  /* фильтр по услугам: чистый JS, отбор по data-tags */
  var fwrap=document.getElementById('kgalmFilter'), empty=document.getElementById('kgalmEmpty'), morewrap=more.parentNode;
  function loadRest(){ if(!loaded){ rest.querySelectorAll('iframe[data-src]').forEach(function(f){ f.src=f.getAttribute('data-src'); }); loaded=true; } }
  function setBox(open){
    if(open){ loadRest(); box.classList.add('open'); box.style.maxHeight='none'; }
    else { box.classList.remove('open'); box.style.maxHeight='0px'; }
  }
  if(fwrap){
    fwrap.addEventListener('click',function(e){
      var b=e.target.closest?e.target.closest('.kgalm__fbtn'):null;
      if(!b) return;
      var f=b.getAttribute('data-f'), all=(f==='all'), shown=0, restShown=0;
      fwrap.querySelectorAll('.kgalm__fbtn').forEach(function(x){ x.classList.toggle('is-active', x===b); });
      if(b.scrollIntoView) b.scrollIntoView({block:'nearest',inline:'nearest'});
      [top,rest].forEach(function(grid){
        grid.querySelectorAll('.kgalm__card').forEach(function(c){
          var m = all || ((' '+(c.getAttribute('data-tags')||'')+' ').indexOf(' '+f+' ')>-1);
          if(m){
            shown++; if(grid===rest) restShown++;
            c.style.display='';
            void c.offsetWidth;
            c.classList.remove('is-off');
          } else {
            c.classList.add('is-off');
            setTimeout(function(){ if(c.classList.contains('is-off')) c.style.display='none'; },260);
          }
        });
      });
      if(all){
        setBox(false); morewrap.style.display='';
        more.classList.remove('is-open'); mt.textContent='Смотреть ещё наши работы';
      } else {
        setBox(restShown>0); morewrap.style.display='none';
      }
      if(empty) empty.classList.toggle('on', shown===0);
    });
  }
})();
</script>

rec2667018101 ДЕСКТОП (9740 симв.)

<!-- ===== KORS · 3 ПРОЕКТА ИЗ ОДНОЙ ЗАДАЧИ · ДЕСКТОП · блок T123. Только компьютер. ===== -->
<div class="kcs">
  <div class="kcs__head">
    <div class="kcs__eyebrow">- КЕЙСЫ</div>
    <h2 class="kcs__title">Что изменилось у производителей после работы с нами и как они используют наши материалы в продажах.</h2>
    <div class="kcs__sub">С чем пришёл клиент, что сделали и какие материалы он получил.</div>
  </div>
  <div class="kcs__list" id="kcsList"></div>
  <div class="kcs__lb" id="kcsLb"><div class="kcs__lbbd"></div><div class="kcs__lbbox"><button class="kcs__lbx" id="kcsLbx">×</button><div class="kcs__lbframe"><iframe id="kcsLbIframe" allow="autoplay; fullscreen; encrypted-media; picture-in-picture" allowfullscreen></iframe></div></div></div>
</div>
<style>
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Unbounded:wght@400;600;700;800&display=swap');
.kcs{--bg:#0C0C0E;--raise:#141416;--card:#1B1B1F;--border:#2A2A2E;--text:#F5F3EF;--muted:#9A9A9A;--faint:#6a6a6e;--accent:#6D5DFB;--glow:rgba(109,93,251,.14);
  box-sizing:border-box;background:var(--bg);color:var(--text);font-family:'Manrope',Arial,sans-serif;-webkit-font-smoothing:antialiased;padding:84px 5vw 92px;}
.kcs *{box-sizing:border-box;margin:0;padding:0;}
.kcs__head{max-width:1240px;margin:0 auto 44px;}
.kcs__eyebrow{font-family:'Unbounded';font-size:12px;letter-spacing:.14em;color:var(--accent);margin-bottom:16px;}
.kcs__title{font-family:'Unbounded';font-weight:700;font-size:clamp(34px,4vw,60px);letter-spacing:-.02em;line-height:1.05;margin-bottom:16px;max-width:900px;}
.kcs__sub{color:var(--muted);font-size:18px;line-height:1.5;max-width:640px;}
.kcs__list{max-width:1240px;margin:0 auto;display:flex;flex-direction:column;gap:26px;}
.kcs__row{display:grid;grid-template-columns:46% 1fr;background:var(--raise);border:1px solid var(--border);border-radius:18px;overflow:hidden;}
.kcs__media{position:relative;overflow:hidden;background:#000;min-height:420px;}
.kcs__media iframe{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);min-width:100%;min-height:100%;width:auto;height:auto;aspect-ratio:16/9;border:none;pointer-events:none;}
.kcs__badge{position:absolute;top:18px;left:18px;z-index:2;background:rgba(0,0,0,.55);border:1px solid var(--border);color:var(--text);font-family:'Unbounded';font-size:10px;letter-spacing:.12em;padding:6px 12px;border-radius:6px;}
.kcs__body{padding:38px 40px;}
.kcs__name{font-family:'Unbounded';font-weight:700;font-size:26px;letter-spacing:-.01em;margin-bottom:8px;}
.kcs__tag{color:var(--faint);font-size:14px;margin-bottom:16px;}
.kcs__tags{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 16px;}
.kcs__chip{font-family:'Manrope',Arial,sans-serif;font-weight:600;font-size:9px;line-height:1;text-transform:uppercase;letter-spacing:.14em;color:rgba(255,255,255,.7);background:transparent;border:1px solid rgba(255,255,255,.22);border-radius:4px;padding:5px 8px;white-space:nowrap;}
.kcs__blk{margin-bottom:18px;}
.kcs__lbl{font-family:'Unbounded';font-size:11px;letter-spacing:.1em;color:var(--accent);margin-bottom:7px;}
.kcs__txt{color:var(--muted);font-size:15px;line-height:1.55;}
.kcs__txt b{color:var(--text);font-weight:600;}
.kcs__btns{display:flex;gap:11px;flex-wrap:wrap;margin-top:26px;}
.kcs__btn{display:inline-flex;align-items:center;gap:8px;font-family:'Manrope';font-weight:700;font-size:14px;padding:13px 20px;border-radius:9px;cursor:pointer;text-decoration:none;transition:.2s;border:1px solid var(--border);}
.kcs__btn svg{width:15px;height:15px;flex:none;}
.kcs__btn--full{background:var(--accent);color:#fff;border-color:var(--accent);}
.kcs__btn--full:hover{transform:translateY(-2px);box-shadow:0 10px 26px var(--glow);}
.kcs__btn--ghost{background:transparent;color:var(--text);}
.kcs__btn--ghost:hover{border-color:var(--accent);color:var(--accent);}
.kcs__soon{font-size:11px;color:var(--faint);margin-left:2px;}
/* оверлей полного видео */
.kcs__lb{position:fixed;inset:0;z-index:99999;display:none;align-items:center;justify-content:center;padding:40px;}
.kcs__lb.open{display:flex;}
.kcs__lbbd{position:absolute;inset:0;background:rgba(4,4,6,.9);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);}
.kcs__lbbox{position:relative;width:min(1100px,100%);}
.kcs__lbframe{position:relative;width:100%;aspect-ratio:16/9;background:#000;border-radius:12px;overflow:hidden;border:1px solid var(--border);}
.kcs__lbframe iframe{position:absolute;inset:0;width:100%;height:100%;border:none;}
.kcs__lbx{position:absolute;top:-46px;right:0;width:38px;height:38px;border-radius:9px;background:var(--raise);border:1px solid var(--border);color:var(--text);font-size:22px;line-height:1;cursor:pointer;}
.kcs__lbx:hover{border-color:var(--accent);color:var(--accent);}
@media (max-width:480px){ .kcs{display:none;} }

.kcs__title{max-width:1180px;font-size:clamp(30px,3.4vw,52px);line-height:1.12;text-wrap:balance}
.kcs__row{grid-template-columns:34% 1fr}
.kcs__media{min-height:620px}
.kcs__name{font-size:22px;line-height:1.25}
.kcs__txt{font-size:15px;line-height:1.62}
</style>
<script>
(function(){
  var cases=[
  {
    "vid": "pd95FJSRFhF27W4YX4ioJJ",
    "full": "3ZsxHkdEuHUubxSAQZDRyG",
    "alt": "Кейс Одоевские консервы: видео о пищевом производстве",
    "badge": "ВИДЕО / ФОТО",
    "name": "Одоевские консервы: от продуктовых роликов - к сайту RU/EN и материалам для выхода на рынок ОАЭ",
    "page": "/case-odoevskie",
    "tag": "Производитель фруктово-ягодных начинок. Начали с продуктовых роликов, после чего сотрудничество переросло в комплексную работу с материалами компании.",
    "tags": ["Видео","Фотосъёмка","Презентация","Фирменный стиль","Сайт"],
    "blocks": [
      [
        "",
        "Сайт RU/EN для работы с зарубежными партнёрами, презентация на русском и английском языках, разработка нового логотипа компании, подготовка материалов производства от А до Я."
      ],
      [
        "",
        "Создание материалов, которые помогают в развитии бизнеса за рубежом."
      ],
      [
        "",
        "Видео о заводе и продуктовых начинках, визитки, поздравления для партнёров, создание фирменных календарей, приглашения на выставки. В феврале планируем делать застройку стенда на выставке."
      ],
      [
        "РЕЗУЛЬТАТЫ",
        "- Новый сайт открыл переговоры в ОАЭ/MENA.<br>- Сделок стало больше.<br>- Все ключевые клиенты продолжили сотрудничество.<br>- Повысился трафик клиентов и уровень продаж новых продуктов."
      ]
    ]
  },
  {
    "vid": "iPcFsLF3eYfDYTauhcgjZj",
    "alt": "Кейс Вистекс: видео о заводе нетканых материалов",
    "full": "fv7FAnLfbLaDaNJLtSQ74H",
    "badge": "ВИДЕО",
    "name": "Вистекс: 8 направлений завода - в 3 минутах видео для коммерческих предложений",
    "page": "/case-vistex",
    "tag": "",
    "tags": ["Видео","Дизайн"],
    "blocks": [
      [
        "",
        "Задача: показать 8 разных направлений производства за 3 минуты видеоролика, благодаря которому клиент сразу поймёт, что производит завод."
      ],
      [
        "",
        "Менеджеры используют ролик в коммерческих предложениях и email-коммуникации, чтобы быстро показать направления производства."
      ],
      [
        "",
        "Создали дизайн email-письма для рассылок потенциальным клиентам с кликабельным функционалом и возможностью смотреть видео о предприятии прямо в email-сообщении."
      ],
      [
        "",
        "Стало проще объяснять продукты и направления предприятия. Увеличилась конверсия продаж."
      ]
    ]
  }
];
  var PLAY='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="5 3 19 12 5 21 5 3"/></svg>';
  var ARROW='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M13 5l7 7-7 7"/></svg>';
  var BG='?autoplay=true&muted=true&loop=true&controls=false&playsInline=true&background=true';
  var lb=document.getElementById('kcsLb'), lbf=document.getElementById('kcsLbIframe');
  function openLb(id){ lbf.src='https://kinescope.io/embed/'+id+'?autoplay=true'; lb.classList.add('open'); }
  function closeLb(){ lb.classList.remove('open'); lbf.src=''; }
  document.getElementById('kcsLbx').addEventListener('click',closeLb);
  lb.querySelector('.kcs__lbbd').addEventListener('click',closeLb);
  var list=document.getElementById('kcsList'); if(!list) return;
  cases.forEach(function(c){
    var row=document.createElement('div'); row.className='kcs__row';
    var blocksHtml=c.blocks.map(function(b){return '<div class="kcs__blk"><div class="kcs__lbl">'+b[0]+'</div><div class="kcs__txt">'+b[1]+'</div></div>';}).join('');
    var tagsHtml=(c.tags&&c.tags.length)?('<div class="kcs__tags">'+c.tags.map(function(t){return '<span class="kcs__chip">'+t+'</span>';}).join('')+'</div>'):'';
    row.innerHTML=
      '<div class="kcs__media"><iframe src="https://kinescope.io/embed/'+c.vid+BG+'" title="'+(c.alt||c.name)+'" aria-label="'+(c.alt||c.name)+'" allow="autoplay; fullscreen; encrypted-media; picture-in-picture"></iframe></div>'+
      '<div class="kcs__body"><div class="kcs__name">'+c.name+'</div>'+tagsHtml+'<div class="kcs__tag">'+c.tag+'</div>'+blocksHtml+
        '<div class="kcs__btns">'+
          '<button class="kcs__btn kcs__btn--full kcs-full">'+PLAY+'Смотреть полное видео</button>'+
          '<a class="kcs__btn kcs__btn--ghost kcs-soon" href="'+(c.page||'#')+'">Смотреть, как строился проект '+ARROW+'</a>'+
        '</div>'+
      '</div>';
    row.querySelector('.kcs-full').addEventListener('click',function(){ openLb(c.full||c.vid); });
    var soon=row.querySelector('.kcs-soon'); if(!c.page){ soon.addEventListener('click',function(e){ e.preventDefault(); }); }
    list.appendChild(row);
  });
})();
</script>

rec2667196001 МОБИЛЬНАЯ (9251 симв.)

<!-- ===== KORS · 3 ПРОЕКТА ИЗ ОДНОЙ ЗАДАЧИ · МОБИЛКА · блок T123. Только телефон. ===== -->
<div class="kcm">
  <div class="kcm__head">
    <div class="kcm__eyebrow">- КЕЙСЫ</div>
    <h2 class="kcm__title">Что изменилось у производителей после работы с нами и как они используют наши материалы в продажах.</h2>
    <div class="kcm__sub">С чем пришёл клиент, что сделали и какие материалы он получил.</div>
  </div>
  <div class="kcm__list" id="kcmList"></div>
  <div class="kcm__lb" id="kcmLb"><div class="kcm__lbbd"></div><div class="kcm__lbbox"><button class="kcm__lbx" id="kcmLbx">×</button><div class="kcm__lbframe"><iframe id="kcmLbIframe" allow="autoplay; fullscreen; encrypted-media; picture-in-picture" allowfullscreen></iframe></div></div></div>
</div>
<style>
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Unbounded:wght@400;600;700;800&display=swap');
.kcm{--bg:#0C0C0E;--raise:#141416;--card:#1B1B1F;--border:#2A2A2E;--text:#F5F3EF;--muted:#9A9A9A;--faint:#6a6a6e;--accent:#6D5DFB;--glow:rgba(109,93,251,.14);
  box-sizing:border-box;background:var(--bg);color:var(--text);font-family:'Manrope',Arial,sans-serif;-webkit-font-smoothing:antialiased;padding:56px 20px 64px;}
.kcm *{box-sizing:border-box;margin:0;padding:0;}
.kcm__head{margin:0 auto 28px;}
.kcm__eyebrow{font-family:'Unbounded';font-size:11px;letter-spacing:.14em;color:var(--accent);margin-bottom:14px;}
.kcm__title{font-family:'Unbounded';font-weight:700;font-size:28px;letter-spacing:-.02em;line-height:1.1;margin-bottom:14px;}
.kcm__sub{color:var(--muted);font-size:15px;line-height:1.5;}
.kcm__list{display:flex;flex-direction:column;gap:20px;}
.kcm__row{background:var(--raise);border:1px solid var(--border);border-radius:16px;overflow:hidden;}
.kcm__media{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;background:#000;}
.kcm__media iframe{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);min-width:100%;min-height:100%;width:auto;height:auto;aspect-ratio:16/9;border:none;pointer-events:none;}
.kcm__badge{position:absolute;top:14px;left:14px;z-index:2;background:rgba(0,0,0,.55);border:1px solid var(--border);color:var(--text);font-family:'Unbounded';font-size:9.5px;letter-spacing:.12em;padding:5px 10px;border-radius:6px;}
.kcm__body{padding:20px 18px 22px;}
.kcm__name{font-family:'Unbounded';font-weight:700;font-size:20px;letter-spacing:-.01em;margin-bottom:6px;}
.kcm__tag{color:var(--faint);font-size:13px;margin-bottom:14px;}
.kcm__tags{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 13px;}
.kcm__chip{font-family:'Manrope',Arial,sans-serif;font-weight:600;font-size:8px;line-height:1;text-transform:uppercase;letter-spacing:.14em;color:rgba(255,255,255,.7);background:transparent;border:1px solid rgba(255,255,255,.22);border-radius:4px;padding:5px 8px;white-space:nowrap;}
.kcm__blk{margin-bottom:16px;}
.kcm__lbl{font-family:'Unbounded';font-size:10px;letter-spacing:.1em;color:var(--accent);margin-bottom:6px;}
.kcm__txt{color:var(--muted);font-size:14px;line-height:1.55;}
.kcm__txt b{color:var(--text);font-weight:600;}
.kcm__btns{display:flex;flex-direction:column;gap:10px;margin-top:22px;}
.kcm__btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:'Manrope';font-weight:700;font-size:14px;padding:14px 18px;border-radius:9px;cursor:pointer;text-decoration:none;border:1px solid var(--border);width:100%;}
.kcm__btn svg{width:15px;height:15px;flex:none;}
.kcm__btn--full{background:var(--accent);color:#fff;border-color:var(--accent);}
.kcm__btn--ghost{background:transparent;color:var(--text);}
.kcm__lb{position:fixed;inset:0;z-index:99999;display:none;align-items:center;justify-content:center;padding:16px;}
.kcm__lb.open{display:flex;}
.kcm__lbbd{position:absolute;inset:0;background:rgba(4,4,6,.92);}
.kcm__lbbox{position:relative;width:100%;}
.kcm__lbframe{position:relative;width:100%;aspect-ratio:16/9;background:#000;border-radius:12px;overflow:hidden;border:1px solid var(--border);}
.kcm__lbframe iframe{position:absolute;inset:0;width:100%;height:100%;border:none;}
.kcm__lbx{position:absolute;top:-44px;right:0;width:38px;height:38px;border-radius:9px;background:var(--raise);border:1px solid var(--border);color:var(--text);font-size:22px;line-height:1;cursor:pointer;}
@media (min-width:481px){ .kcm{display:none;} }

.kcm__title{font-size:clamp(23px,6.6vw,30px);line-height:1.16;text-wrap:balance;overflow-wrap:anywhere}
.kcm__name{font-size:18px;line-height:1.3;overflow-wrap:anywhere}
.kcm__txt{font-size:14px;line-height:1.62}
</style>
<script>
(function(){
  var cases=[
  {
    "vid": "pd95FJSRFhF27W4YX4ioJJ",
    "full": "3ZsxHkdEuHUubxSAQZDRyG",
    "alt": "Кейс Одоевские консервы: видео о пищевом производстве, мобильная версия",
    "badge": "ВИДЕО / ФОТО",
    "name": "Одоевские консервы: от продуктовых роликов - к сайту RU/EN и материалам для выхода на рынок ОАЭ",
    "page": "/case-odoevskie",
    "tag": "Производитель фруктово-ягодных начинок. Начали с продуктовых роликов, после чего сотрудничество переросло в комплексную работу с материалами компании.",
    "tags": ["Видео","Фотосъёмка","Презентация","Фирменный стиль","Сайт"],
    "blocks": [
      [
        "",
        "Сайт RU/EN для работы с зарубежными партнёрами, презентация на русском и английском языках, разработка нового логотипа компании, подготовка материалов производства от А до Я."
      ],
      [
        "",
        "Создание материалов, которые помогают в развитии бизнеса за рубежом."
      ],
      [
        "",
        "Видео о заводе и продуктовых начинках, визитки, поздравления для партнёров, создание фирменных календарей, приглашения на выставки. В феврале планируем делать застройку стенда на выставке."
      ],
      [
        "РЕЗУЛЬТАТЫ",
        "- Новый сайт открыл переговоры в ОАЭ/MENA.<br>- Сделок стало больше.<br>- Все ключевые клиенты продолжили сотрудничество.<br>- Повысился трафик клиентов и уровень продаж новых продуктов."
      ]
    ]
  },
  {
    "vid": "iPcFsLF3eYfDYTauhcgjZj",
    "alt": "Кейс Вистекс: видео о заводе нетканых материалов, мобильная версия",
    "full": "fv7FAnLfbLaDaNJLtSQ74H",
    "badge": "ВИДЕО",
    "name": "Вистекс: 8 направлений завода - в 3 минутах видео для коммерческих предложений",
    "page": "/case-vistex",
    "tag": "",
    "tags": ["Видео","Дизайн"],
    "blocks": [
      [
        "",
        "Задача: показать 8 разных направлений производства за 3 минуты видеоролика, благодаря которому клиент сразу поймёт, что производит завод."
      ],
      [
        "",
        "Менеджеры используют ролик в коммерческих предложениях и email-коммуникации, чтобы быстро показать направления производства."
      ],
      [
        "",
        "Создали дизайн email-письма для рассылок потенциальным клиентам с кликабельным функционалом и возможностью смотреть видео о предприятии прямо в email-сообщении."
      ],
      [
        "",
        "Стало проще объяснять продукты и направления предприятия. Увеличилась конверсия продаж."
      ]
    ]
  }
];
  var PLAY='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="5 3 19 12 5 21 5 3"/></svg>';
  var ARROW='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M13 5l7 7-7 7"/></svg>';
  var BG='?autoplay=true&muted=true&loop=true&controls=false&playsInline=true&background=true';
  var lb=document.getElementById('kcmLb'), lbf=document.getElementById('kcmLbIframe');
  function openLb(id){ lbf.src='https://kinescope.io/embed/'+id+'?autoplay=true'; lb.classList.add('open'); }
  function closeLb(){ lb.classList.remove('open'); lbf.src=''; }
  document.getElementById('kcmLbx').addEventListener('click',closeLb);
  lb.querySelector('.kcm__lbbd').addEventListener('click',closeLb);
  var list=document.getElementById('kcmList'); if(!list) return;
  cases.forEach(function(c){
    var row=document.createElement('div'); row.className='kcm__row';
    var blocksHtml=c.blocks.map(function(b){return '<div class="kcm__blk"><div class="kcm__lbl">'+b[0]+'</div><div class="kcm__txt">'+b[1]+'</div></div>';}).join('');
    var tagsHtml=(c.tags&&c.tags.length)?('<div class="kcm__tags">'+c.tags.map(function(t){return '<span class="kcm__chip">'+t+'</span>';}).join('')+'</div>'):'';
    row.innerHTML=
      '<div class="kcm__media"><iframe src="https://kinescope.io/embed/'+c.vid+BG+'" title="'+(c.alt||c.name)+'" aria-label="'+(c.alt||c.name)+'" allow="autoplay; fullscreen; encrypted-media; picture-in-picture"></iframe></div>'+
      '<div class="kcm__body"><div class="kcm__name">'+c.name+'</div>'+tagsHtml+'<div class="kcm__tag">'+c.tag+'</div>'+blocksHtml+
        '<div class="kcm__btns">'+
          '<button class="kcm__btn kcm__btn--full kcm-full">'+PLAY+'Смотреть полное видео</button>'+
          '<a class="kcm__btn kcm__btn--ghost kcm-soon" href="'+(c.page||'#')+'">Смотреть, как строился проект '+ARROW+'</a>'+
        '</div>'+
      '</div>';
    row.querySelector('.kcm-full').addEventListener('click',function(){ openLb(c.full||c.vid); });
    var soon=row.querySelector('.kcm-soon'); if(!c.page){ soon.addEventListener('click',function(e){ e.preventDefault(); }); }
    list.appendChild(row);
  });
})();
</script>

rec2663623901 ДЕСКТОП (20713 симв.)

<!-- ===== KORS · НАШИ РАБОТЫ · ДЕСКТОП · блок T123. Показывать ТОЛЬКО на компьютере. ===== -->
<div class="kgald">
  <div class="kgald__head">
    <div class="kgald__eyebrow">- НАШИ РАБОТЫ</div>
    <h2 class="kgald__title">460+ проектов: найдите свою отрасль.</h2>
    <div class="kgald__sub">Сфера, формат и срок по каждому проекту. Нажми «Смотреть полное видео» - откроется на весь экран.</div>
  </div>
  <div class="kgald__filter" id="kgaldFilter" aria-label="Фильтр работ по услугам">
      <button type="button" class="kgald__fbtn is-active" data-f="all">Все</button>
      <button type="button" class="kgald__fbtn" data-f="video">Видео</button>
      <button type="button" class="kgald__fbtn" data-f="site">Сайты</button>
      <button type="button" class="kgald__fbtn" data-f="presentation">Презентации</button>
      <button type="button" class="kgald__fbtn" data-f="brand">Фирменный стиль</button>
      <button type="button" class="kgald__fbtn" data-f="ads">Реклама</button>
    </div>
    <div class="kgald__grid" id="kgaldTop"></div>
  <div class="kgald__hidden" id="kgaldHidden"><div class="kgald__grid" id="kgaldRest"></div></div>
  <div class="kgald__empty" id="kgaldEmpty">По этой услуге в подборке пока нет проектов.</div>
    <div class="kgald__morewrap"><button class="kgald__more" id="kgaldMore"><span class="kgald__mtext">Смотреть все работы</span> <span class="kgald__count">+19</span></button></div>
  <div class="kgald__lb" id="kgaldLb"><div class="kgald__lbbd"></div><div class="kgald__lbbox"><button class="kgald__lbx" id="kgaldLbx">×</button><div class="kgald__lbframe"><iframe id="kgaldLbIframe" allow="autoplay; fullscreen; encrypted-media; picture-in-picture" allowfullscreen></iframe></div></div></div>
</div>
<style>
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Unbounded:wght@400;600;700;800&display=swap');
.kgald{--bg:#0C0C0E;--raise:#141416;--card:#1B1B1F;--border:#2A2A2E;--text:#F5F3EF;--muted:#9A9A9A;--faint:#6a6a6e;--accent:#6D5DFB;--glow:rgba(109,93,251,.14);
  box-sizing:border-box;background:var(--bg);color:var(--text);font-family:'Manrope',Arial,sans-serif;-webkit-font-smoothing:antialiased;padding:80px 5vw 90px;}
.kgald *{box-sizing:border-box;margin:0;padding:0;}
.kgald__head{max-width:1240px;margin:0 auto 44px;text-align:center;}
.kgald__eyebrow{font-family:'Unbounded';font-size:12px;letter-spacing:.14em;color:var(--accent);margin-bottom:14px;}
.kgald__title{font-family:'Unbounded';font-weight:700;font-size:clamp(30px,3.4vw,48px);letter-spacing:-.02em;margin-bottom:14px;}
.kgald__sub{color:var(--muted);font-size:16px;line-height:1.5;max-width:560px;margin:0 auto;}
.kgald__grid{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.kgald__card{background:var(--raise);border:1px solid var(--border);border-radius:16px;overflow:hidden;transition:.25s;display:flex;flex-direction:column;}
.kgald__card:hover{border-color:rgba(109,93,251,.5);transform:translateY(-3px);box-shadow:0 16px 40px rgba(0,0,0,.4);}
.kgald__video{position:relative;width:100%;aspect-ratio:16/9;background:#000;}
.kgald__video iframe{position:absolute;inset:0;width:100%;height:100%;border:none;pointer-events:none;}
.kgald__body{padding:20px 20px 22px;display:flex;flex-direction:column;flex:1;}
.kgald__name{font-family:'Unbounded';font-weight:700;font-size:20px;margin-bottom:10px;letter-spacing:-.01em;}
.kgald__meta{display:flex;flex-direction:column;gap:6px;margin-bottom:18px;}
.kgald__row{font-size:14px;color:var(--muted);line-height:1.4;}
.kgald__row b{color:var(--text);font-weight:600;}
.kgald__full--nolink{cursor:default}
.kgald__full{margin-top:auto;display:inline-flex;align-items:center;gap:8px;align-self:flex-start;background:transparent;border:1px solid var(--border);color:var(--text);font-family:'Manrope';font-weight:700;font-size:14px;padding:12px 18px;border-radius:9px;cursor:pointer;transition:.2s;}
.kgald__full:hover{border-color:var(--accent);color:var(--accent);}
.kgald__full svg{width:15px;height:15px;flex:none;}
.kgald__hidden{max-width:1240px;margin:0 auto;max-height:0;overflow:hidden;opacity:0;transition:max-height .55s ease,opacity .4s ease,margin-top .4s ease;margin-top:0;}
.kgald__hidden.open{opacity:1;margin-top:22px;}
.kgald__morewrap{text-align:center;margin-top:40px;}
.kgald__more{display:inline-flex;align-items:center;gap:10px;background:var(--accent);color:#fff;font-family:'Manrope';font-weight:700;font-size:15px;padding:16px 30px;border-radius:9px;border:none;cursor:pointer;transition:.25s;}
.kgald__more:hover{transform:translateY(-2px);box-shadow:0 10px 30px var(--glow);}
.kgald__count{font-family:'Unbounded';font-size:12px;background:rgba(0,0,0,.18);padding:3px 8px;border-radius:20px;}
.kgald__more.is-open .kgald__count{display:none;}
.kgald__lb{position:fixed;inset:0;z-index:99999;display:none;align-items:center;justify-content:center;padding:40px;}
.kgald__lb.open{display:flex;}
.kgald__lbbd{position:absolute;inset:0;background:rgba(4,4,6,.9);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);}
.kgald__lbbox{position:relative;width:min(1100px,100%);}
.kgald__lbframe{position:relative;width:100%;aspect-ratio:16/9;background:#000;border-radius:12px;overflow:hidden;border:1px solid var(--border);}
.kgald__lbframe iframe{position:absolute;inset:0;width:100%;height:100%;border:none;}
.kgald__lbx{position:absolute;top:-46px;right:0;width:38px;height:38px;border-radius:9px;background:var(--raise);border:1px solid var(--border);color:var(--text);font-size:22px;line-height:1;cursor:pointer;}
.kgald__lbx:hover{border-color:var(--accent);color:var(--accent);}
.kgald__filter{max-width:1240px;margin:0 auto 26px;display:flex;flex-wrap:nowrap;gap:8px;justify-content:center;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;padding-bottom:2px;}
.kgald__filter::-webkit-scrollbar{display:none;}
.kgald__fbtn{flex:none;background:transparent;border:1px solid var(--border);color:var(--muted);font-family:'Manrope',Arial,sans-serif;font-weight:600;font-size:13px;padding:9px 16px;border-radius:20px;cursor:pointer;transition:.2s;white-space:nowrap;}
.kgald__fbtn:hover{border-color:rgba(109,93,251,.5);color:var(--text);}
.kgald__fbtn.is-active{background:var(--accent);border-color:var(--accent);color:#fff;}
.kgald__tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px;}
.kgald__tag{font-family:'Manrope',Arial,sans-serif;font-weight:600;font-size:9px;line-height:1;text-transform:uppercase;letter-spacing:.14em;color:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.22);border-radius:4px;padding:5px 8px;white-space:nowrap;}
.kgald__desc{font-size:12px;line-height:1.5;color:var(--muted);margin-bottom:14px;}
.kgald__card.is-off{opacity:0;transform:translateY(6px);}
.kgald__empty{max-width:1240px;margin:0 auto;text-align:center;color:var(--muted);font-size:15px;padding:34px 0;display:none;}
.kgald__empty.on{display:block;}
@media (max-width:900px){ .kgald__grid{grid-template-columns:repeat(2,1fr);} .kgald__filter{justify-content:flex-start;} }
@media (max-width:480px){ .kgald{display:none;} }
#rec2663623901 .kgald__count{color:#fff;background:rgba(0,0,0,.32);}
/* плашка собственного контента: отличает экспертные ролики KORS от клиентских работ */
.kgald__badge{position:absolute;z-index:3;top:10px;left:10px;font-family:'Manrope',Arial,sans-serif;font-size:10px;font-weight:700;line-height:1;letter-spacing:.02em;color:#fff;background:rgba(109,93,251,.94);border:1px solid rgba(255,255,255,.16);border-radius:6px;padding:6px 9px;box-shadow:0 6px 18px rgba(0,0,0,.4);pointer-events:none}
</style>
<script>
(function(){
  var SLUG={'Видео':'video','Фотосъёмка':'photo','Сайт':'site','Презентация':'presentation','Фирменный стиль':'brand','Реклама':'ads','Дизайн':'design','Трансляция':'live','Продюсирование':'producing'};
  var works=[
    {id:'pd95FJSRFhF27W4YX4ioJJ', full:'3ZsxHkdEuHUubxSAQZDRyG', name:'Одоевские консервы - фильм о заводе', tags:['Видео'], desc:'Показали производство изнутри: цеха, линии, контроль качества. Видео работает на сайте, в переговорах с сетями и на выставках.', alt:'Фильм о заводе Одоевские консервы: цеха, линии и контроль качества'},
    {id:'iPcFsLF3eYfDYTauhcgjZj', full:'fv7FAnLfbLaDaNJLtSQ74H', name:'Вистекс', sphere:'производство, предприятие', format:'презентационный ролик', term:'15 дней', tags:['Видео','Дизайн'], desc:'Ролик о заводе: восемь направлений производства за три минуты. Дизайн email-письма со встроенным видео для коммерческих предложений.', alt:'Видео о производстве для завода Вистекс'},
    {id:'xgBCJrU3Fy9CtKDXR9R23S', full:'0GfobL6RnAzhPeiopXjNHS', name:'Invoicebox - о компании', sphere:'финансовые технологии (FinTech)', format:'презентационный ролик о компании', term:'6 дней', tags:['Видео'], desc:'Имиджевый ролик о платёжном сервисе: чем занимается компания и какие задачи бизнеса закрывает.', alt:'Имиджевый ролик о платёжном сервисе Invoicebox'},
    {id:'sRSLqBbjkRWyn31BrY6iny', full:'mZiwnH9uZAdc15hhRsqPvB', name:'Одоевские консервы - термостабильные начинки', tags:['Видео'], desc:'Продуктовый ролик о линейке: как начинки ведут себя при выпечке и что это даёт производителю.', alt:'Продуктовый ролик о термостабильных начинках Одоевские консервы'},
    {id:'5zMvPKfeuDf9N7h7P8KuVe', full:'ePXSSA9qFiEgA5WYRdd4FP', name:'Алтай Серикбай - съёмки для личного бренда', tags:['Видео'], desc:'Снимаем контент для эксперта по личностному развитию: студийные выпуски, разговорные форматы, съёмки на ретритах. За время работы - больше десяти роликов.', alt:'Съёмки для личного бренда эксперта по личностному развитию Алтая Серикбая'},
    {id:'bKeihzPbnEbXZarkMcYQZj', full:'6ivtiXKAcQj4dVJN8H1YWs', name:'MediaLive - отчётный ролик с выставки', tags:['Видео','Реклама'], desc:'Сняли отчётное видео с отраслевого события. Организаторы используют его на сайте и в рекламе следующего сезона.', alt:'Отчётный ролик с отраслевой выставки для MediaLive'},
    {id:'6JcPdvqUchXCmzscbTqaos', full:'sRyZwPm3BS9CVspVi2sLx3', name:'Одоевские консервы - нетермостабильные начинки', tags:['Видео'], desc:'Второй ролик линейки: назначение, состав, применение в готовых изделиях.', alt:'Продуктовый ролик о нетермостабильных начинках Одоевские консервы'},
    {id:'35XkXms5VN3RLJcYsgWsnD', full:'2FXfjS6hYEvLkWNKUveoBx', name:'Invoicebox - оплата в белорусских рублях', tags:['Видео'], desc:'Объясняющий ролик о выходе платёжного сервиса на рынок Беларуси: как принимать оплату в белорусских рублях.', alt:'Ролик об оплате в белорусских рублях в платёжном сервисе Invoicebox'},
    {id:'8QbWRspZgkLTicEiQpp9su', full:'8QbWRspZgkLTicEiQpp9su', name:'STROBBS - промо зимней коллекции', tags:['Видео','Реклама'], desc:'Проморолик показа новой зимней коллекции российского бренда обуви и одежды.', alt:'Проморолик показа зимней коллекции бренда обуви и одежды STROBBS'},
    {id:'vNYi5w7HiQevkdBbPmQ3CR', full:'vNYi5w7HiQevkdBbPmQ3CR', name:'Ювелирный лофт GOLD - ролик о компании', tags:['Видео'], desc:'Рассказали о компании и о том, чем она занимается.', alt:'Ролик о компании для ювелирного лофта GOLD'},
    {id:'wLtMKZCpf75eYEWMXPEPZY', full:'7Kxs8xzVfCDLtyuG5puNN1', name:'Рокстар', sphere:'медиа', format:'музыкальный клип', term:'12 дней', tags:['Видео','Дизайн'], desc:'Три клипа и обложки для музыкального проекта.', alt:'Музыкальные клипы для проекта Рокстар'},
    {id:'88SCanh4aPU83UFBmThiVa', full:'mJqjXaKQBrdbvirxUTHLLh', name:'Rockstar - клип «На дне»', tags:['Видео'], desc:'Музыкальный клип для артиста.', alt:'Музыкальный клип На дне для артиста Rockstar'},
    {id:'qAV5wXg5oHKKcY6tbgysZd', full:'okapERMYWfdoGagPRmo7uC', name:'Rockstar - клип «Самая грустная песня»', tags:['Видео'], desc:'Первый клип, который мы сняли для артиста.', alt:'Музыкальный клип Самая грустная песня для артиста Rockstar'},
    {id:'7akHJzKdcoSrPiHtRbRBqk', full:'7akHJzKdcoSrPiHtRbRBqk', name:'Invoicebox - интернет-магазины за пару кликов', tags:['Видео'], desc:'Продуктовый ролик о конструкторе интернет-магазинов внутри сервиса.', alt:'Ролик о конструкторе интернет-магазинов в сервисе Invoicebox'},
    {id:'b66cpVCFFFVycfDvLFXFR3', full:'b66cpVCFFFVycfDvLFXFR3', name:'Invoicebox - как выставить счёт за пару кликов', tags:['Видео'], desc:'Видеоинструкция для пользователей сервиса: выставление счёта по шагам.', alt:'Видеоинструкция по выставлению счёта в сервисе Invoicebox'},
    {id:'uqJ79iyVPcqN1ZtTtjnkAv', name:'GosObmen', sphere:'финансовые услуги', format:'рекламный ролик', term:'3 дня', tags:['Видео','Сайт','Дизайн'], desc:'Рекламные ролики, тексты и сайт. Собрали скрипт для отдела продаж.', alt:'Рекламный ролик и сайт для сервиса Гособмен'},
    {id:'gHMF2zBsAdSdbcEH9wSZKh', name:'Редакция ЭКСМО', sphere:'издательский бизнес', format:'съёмка трейлера по сюжету книги', term:'9 дней', tags:['Видео','Дизайн'], desc:'Трейлер книги и афиша для издательства.', alt:'Книжный трейлер для издательства Редакция ЭКСМО'},
    {id:'8YSeQnzXxmpkmo7uNNcLrF', name:'YouTube-шоу', sphere:'медиа', format:'съёмка выпусков', term:'14 дней', tags:['Видео','Продюсирование','Реклама'], desc:'Продюсирование и режиссура шоу: съёмка выпусков и рекламное сопровождение.', alt:'Съёмка выпусков YouTube-шоу'},
    {id:'bZ8JyozhtKdSDiy5xjLoVr', name:'Ресторан Rumi / «ЗНАТЬ»', sphere:'ресторанный бизнес, мероприятия', format:'видео-отчёт о мероприятии', term:'2 дня', tags:['Видео','Трансляция','Презентация'], desc:'Съёмка мероприятий, прямая трансляция и презентации для ресторана.', alt:'Съёмка мероприятия и трансляция для ресторана Rumi'},
    {id:'uiVqp8dWpzNoBt2GweBLs9', name:'Новая Формация', sphere:'организация, бизнес', format:'презентационный ролик', term:'4 дня', tags:['Видео','Дизайн'], desc:'Презентационный ролик, афиша и ведение контента.', alt:'Презентационный ролик для проекта Новая Формация'},
    {id:'dsqVruz3QkCKQESGiTUsVR', full:'dsqVruz3QkCKQESGiTUsVR', name:'Твой продакшен тебя обманывает', tags:['Видео'], kors:true, alt:'Экспертное видео KORS: почему продакшен может обманывать заказчика'},
    {id:'uittTC7uyz9hv4HDirTBAG', full:'uittTC7uyz9hv4HDirTBAG', name:'Видео - это не украшение для бизнеса', tags:['Видео'], kors:true, alt:'Экспертное видео KORS о том, зачем бизнесу видео'},
    {id:'aG3Qkc4VfoCcgtJLz6ivbE', full:'aG3Qkc4VfoCcgtJLz6ivbE', name:'Как сэкономить на видеоролике', tags:['Видео'], kors:true, alt:'Экспертное видео KORS о том, как сэкономить на съёмке ролика'},
    {id:'4pzsMBSzheH3Sarx4UFHMd', full:'4pzsMBSzheH3Sarx4UFHMd', name:'Как сделать продающее видео', tags:['Видео'], kors:true, alt:'Экспертное видео KORS о том, как сделать продающее видео'},
    {id:'eCGHEdUFdSyEjCBXxcsUSC', name:'KORS Production', sphere:'создание контента', format:'актуальные работы', term:'2025-й год', tags:['Видео','Продюсирование'], desc:'Шоурил студии: съёмки на производствах и коммерческие проекты разных лет.', alt:'Актуальные работы студии KORS Production'}
  ];
  var FS='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="5 3 19 12 5 21 5 3"/></svg>';
  var lb=document.getElementById('kgaldLb'), lbf=document.getElementById('kgaldLbIframe');
  function openLb(id){ lbf.src='https://kinescope.io/embed/'+id+'?autoplay=true'; lb.classList.add('open'); }
  function closeLb(){ lb.classList.remove('open'); lbf.src=''; }
  document.getElementById('kgaldLbx').addEventListener('click',closeLb);
  lb.querySelector('.kgald__lbbd').addEventListener('click',closeLb);
  function makeCard(w, defer){
    var card=document.createElement('div'); card.className='kgald__card';
    card.setAttribute('data-tags',(w.tags||[]).map(function(t){return SLUG[t]||'';}).join(' '));
    var ttl=(w.alt||w.name).replace(/"/g,'&quot;');
    var q='?autoplay=true&muted=true&loop=true&controls=false&playsInline=true&background=true';
    var ift= defer ? '<iframe data-src="https://kinescope.io/embed/'+w.id+q+'" title="'+ttl+'" aria-label="'+ttl+'" allow="autoplay; fullscreen; encrypted-media; picture-in-picture" allowfullscreen></iframe>'
                   : '<iframe loading="lazy" src="https://kinescope.io/embed/'+w.id+q+'" title="'+ttl+'" aria-label="'+ttl+'" allow="autoplay; fullscreen; encrypted-media; picture-in-picture" allowfullscreen></iframe>';
    var tagsHtml=(w.tags&&w.tags.length)?'<div class="kgald__tags">'+w.tags.map(function(t){return '<span class="kgald__tag">'+t+'</span>';}).join('')+'</div>':'';
    var descHtml=w.desc?'<p class="kgald__desc">'+w.desc+'</p>':'';
    var metaHtml='';
    if(w.sphere||w.format||w.term){ metaHtml='<div class="kgald__meta">'+(w.sphere?'<div class="kgald__row"><b>Сфера:</b> '+w.sphere+'</div>':'')+(w.format?'<div class="kgald__row"><b>Формат:</b> '+w.format+'</div>':'')+(w.term?'<div class="kgald__row"><b>Срок:</b> '+w.term+'</div>':'')+'</div>'; }
    var korsHtml=w.kors?'<span class="kgald__badge">Экспертное видео KORS</span>':'';
    card.innerHTML='<div class="kgald__video">'+korsHtml+ift+'</div><div class="kgald__body"><h3 class="kgald__name">'+w.name+'</h3>'+tagsHtml+descHtml+metaHtml+'<button class="kgald__full'+(w.full?'':' kgald__full--nolink')+'" '+(w.full?'':'aria-disabled="true"')+'>'+FS+'Смотреть полное видео</button></div>';
    /* KORS: у карточек без поля full полной версии ролика пока нет. Кнопка остаётся видимой, но клик отключён, чтобы не открывался тот же короткий ролик. Как только появится ссылка, добавь в объект работы full:'ID_полного_ролика' - кнопка заработает сама, ничего больше менять не нужно. */
    if(w.full){ card.querySelector('.kgald__full').addEventListener('click',function(){ openLb(w.full); }); }
    return card;
  }
  var top=document.getElementById('kgaldTop'),rest=document.getElementById('kgaldRest'),box=document.getElementById('kgaldHidden'),more=document.getElementById('kgaldMore');
  if(!top||!rest||!box||!more)return;
  works.slice(0,6).forEach(function(w){top.appendChild(makeCard(w,false));});
  works.slice(6).forEach(function(w){rest.appendChild(makeCard(w,true));});
  var cntEl=more.querySelector('.kgald__count'); if(cntEl){ cntEl.textContent='+'+(works.length-6); }
  var loaded=false, mt=more.querySelector('.kgald__mtext');
  more.addEventListener('click',function(){
    if(!box.classList.contains('open')){
      if(!loaded){rest.querySelectorAll('iframe[data-src]').forEach(function(f){f.src=f.getAttribute('data-src');});loaded=true;}
      box.classList.add('open'); box.style.maxHeight=box.scrollHeight+'px';
      setTimeout(function(){if(box.classList.contains('open'))box.style.maxHeight='none';},600);
      more.classList.add('is-open'); mt.textContent='Свернуть';
    }else{
      box.style.maxHeight=box.scrollHeight+'px';
      requestAnimationFrame(function(){box.style.maxHeight='0px';box.classList.remove('open');});
      more.classList.remove('is-open'); mt.textContent='Смотреть все работы';
    }
  });
  window.addEventListener('resize',function(){if(box.classList.contains('open'))box.style.maxHeight='none';});

  /* фильтр по услугам: чистый JS, отбор по data-tags */
  var fwrap=document.getElementById('kgaldFilter'), empty=document.getElementById('kgaldEmpty'), morewrap=more.parentNode;
  function loadRest(){ if(!loaded){ rest.querySelectorAll('iframe[data-src]').forEach(function(f){ f.src=f.getAttribute('data-src'); }); loaded=true; } }
  function setBox(open){
    if(open){ loadRest(); box.classList.add('open'); box.style.maxHeight='none'; }
    else { box.classList.remove('open'); box.style.maxHeight='0px'; }
  }
  if(fwrap){
    fwrap.addEventListener('click',function(e){
      var b=e.target.closest?e.target.closest('.kgald__fbtn'):null;
      if(!b) return;
      var f=b.getAttribute('data-f'), all=(f==='all'), shown=0, restShown=0;
      fwrap.querySelectorAll('.kgald__fbtn').forEach(function(x){ x.classList.toggle('is-active', x===b); });
      [top,rest].forEach(function(grid){
        grid.querySelectorAll('.kgald__card').forEach(function(c){
          var m = all || ((' '+(c.getAttribute('data-tags')||'')+' ').indexOf(' '+f+' ')>-1);
          if(m){
            shown++; if(grid===rest) restShown++;
            c.style.display='';
            void c.offsetWidth;
            c.classList.remove('is-off');
          } else {
            c.classList.add('is-off');
            setTimeout(function(){ if(c.classList.contains('is-off')) c.style.display='none'; },260);
          }
        });
      });
      if(all){
        setBox(false); morewrap.style.display='';
        more.classList.remove('is-open'); mt.textContent='Смотреть все работы';
      } else {
        setBox(restShown>0); morewrap.style.display='none';
      }
      if(empty) empty.classList.toggle('on', shown===0);
    });
  }
})();
</script>

rec2663636801 МОБИЛЬНАЯ (20396 симв.)

<!-- ===== KORS · НАШИ РАБОТЫ · МОБИЛКА · блок T123. Показывать ТОЛЬКО на телефоне. ===== -->
<div class="kgalm">
  <div class="kgalm__head">
    <div class="kgalm__eyebrow">- НАШИ РАБОТЫ</div>
    <h2 class="kgalm__title">460+ проектов: найдите свою отрасль.</h2>
    <div class="kgalm__sub">Сфера, формат и срок по каждому проекту. «Смотреть полное видео» - на весь экран.</div>
  </div>
  <div class="kgalm__filter" id="kgalmFilter" aria-label="Фильтр работ по услугам">
    <button type="button" class="kgalm__fbtn is-active" data-f="all">Все</button>
    <button type="button" class="kgalm__fbtn" data-f="video">Видео</button>
    <button type="button" class="kgalm__fbtn" data-f="site">Сайты</button>
    <button type="button" class="kgalm__fbtn" data-f="presentation">Презентации</button>
    <button type="button" class="kgalm__fbtn" data-f="brand">Фирменный стиль</button>
    <button type="button" class="kgalm__fbtn" data-f="ads">Реклама</button>
  </div>
  <div class="kgalm__col" id="kgalmTop"></div>
  <div class="kgalm__hidden" id="kgalmHidden"><div class="kgalm__col" id="kgalmRest"></div></div>
  <div class="kgalm__empty" id="kgalmEmpty">По этой услуге в подборке пока нет проектов.</div>
  <div class="kgalm__morewrap"><button class="kgalm__more" id="kgalmMore"><span class="kgalm__mtext">Смотреть ещё наши работы</span> <span class="kgalm__count">+22</span></button></div>
  <div class="kgalm__lb" id="kgalmLb"><div class="kgalm__lbbd"></div><div class="kgalm__lbbox"><button class="kgalm__lbx" id="kgalmLbx">×</button><div class="kgalm__lbframe"><iframe id="kgalmLbIframe" allow="autoplay; fullscreen; encrypted-media; picture-in-picture" allowfullscreen></iframe></div></div></div>
</div>
<style>
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Unbounded:wght@400;600;700;800&display=swap');
.kgalm{--bg:#0C0C0E;--raise:#141416;--card:#1B1B1F;--border:#2A2A2E;--text:#F5F3EF;--muted:#9A9A9A;--faint:#6a6a6e;--accent:#6D5DFB;--glow:rgba(109,93,251,.14);
  box-sizing:border-box;background:var(--bg);color:var(--text);font-family:'Manrope',Arial,sans-serif;-webkit-font-smoothing:antialiased;padding:56px 20px 64px;}
.kgalm *{box-sizing:border-box;margin:0;padding:0;}
.kgalm__head{margin:0 auto 30px;text-align:center;}
.kgalm__eyebrow{font-family:'Unbounded';font-size:11px;letter-spacing:.14em;color:var(--accent);margin-bottom:12px;}
.kgalm__title{font-family:'Unbounded';font-weight:700;font-size:26px;letter-spacing:-.02em;margin-bottom:12px;line-height:1.15;}
.kgalm__sub{color:var(--muted);font-size:14px;line-height:1.5;max-width:340px;margin:0 auto;}
.kgalm__col{display:flex;flex-direction:column;gap:18px;}
.kgalm__card{background:var(--raise);border:1px solid var(--border);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;}
.kgalm__video{position:relative;width:100%;aspect-ratio:16/9;background:#000;}
.kgalm__video iframe{position:absolute;inset:0;width:100%;height:100%;border:none;pointer-events:none;}
.kgalm__body{padding:18px 18px 20px;display:flex;flex-direction:column;}
.kgalm__name{font-family:'Unbounded';font-weight:700;font-size:18px;margin-bottom:9px;letter-spacing:-.01em;}
.kgalm__meta{display:flex;flex-direction:column;gap:5px;margin-bottom:16px;}
.kgalm__row{font-size:13px;color:var(--muted);line-height:1.4;}
.kgalm__row b{color:var(--text);font-weight:600;}
.kgalm__full--nolink{cursor:default}
.kgalm__full{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:transparent;border:1px solid var(--border);color:var(--text);font-family:'Manrope';font-weight:700;font-size:14px;padding:13px 18px;border-radius:9px;cursor:pointer;width:100%;}
.kgalm__full svg{width:15px;height:15px;flex:none;}
.kgalm__hidden{max-height:0;overflow:hidden;opacity:0;transition:max-height .55s ease,opacity .4s ease,margin-top .4s ease;margin-top:0;}
.kgalm__hidden.open{opacity:1;margin-top:18px;}
.kgalm__morewrap{margin-top:28px;}
.kgalm__more{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;background:var(--accent);color:#fff;font-family:'Manrope';font-weight:700;font-size:15px;padding:16px 24px;border-radius:9px;border:none;cursor:pointer;}
.kgalm__count{font-family:'Unbounded';font-size:12px;background:rgba(0,0,0,.18);padding:3px 8px;border-radius:20px;}
.kgalm__more.is-open .kgalm__count{display:none;}
.kgalm__lb{position:fixed;inset:0;z-index:99999;display:none;align-items:center;justify-content:center;padding:16px;}
.kgalm__lb.open{display:flex;}
.kgalm__lbbd{position:absolute;inset:0;background:rgba(4,4,6,.92);}
.kgalm__lbbox{position:relative;width:100%;}
.kgalm__lbframe{position:relative;width:100%;aspect-ratio:16/9;background:#000;border-radius:12px;overflow:hidden;border:1px solid var(--border);}
.kgalm__lbframe iframe{position:absolute;inset:0;width:100%;height:100%;border:none;}
.kgalm__lbx{position:absolute;top:-44px;right:0;width:38px;height:38px;border-radius:9px;background:var(--raise);border:1px solid var(--border);color:var(--text);font-size:22px;line-height:1;cursor:pointer;}
.kgalm__filter{display:flex;flex-wrap:nowrap;gap:8px;margin:0 -20px 22px;padding:0 20px 2px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;}
.kgalm__filter::-webkit-scrollbar{display:none;}
.kgalm__fbtn{flex:none;background:transparent;border:1px solid var(--border);color:var(--muted);font-family:'Manrope',Arial,sans-serif;font-weight:600;font-size:13px;padding:9px 15px;border-radius:20px;cursor:pointer;white-space:nowrap;transition:.2s;}
.kgalm__fbtn.is-active{background:var(--accent);border-color:var(--accent);color:#fff;}
.kgalm__tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:11px;}
.kgalm__tag{font-family:'Manrope',Arial,sans-serif;font-weight:600;font-size:8px;line-height:1;text-transform:uppercase;letter-spacing:.14em;color:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.22);border-radius:4px;padding:5px 8px;white-space:nowrap;}
.kgalm__desc{font-size:12px;line-height:1.5;color:var(--muted);margin-bottom:13px;}
.kgalm__card{transition:opacity .25s ease,transform .25s ease;}
.kgalm__card.is-off{opacity:0;transform:translateY(6px);}
.kgalm__empty{text-align:center;color:var(--muted);font-size:14px;padding:28px 0;display:none;}
.kgalm__empty.on{display:block;}
@media (min-width:481px){ .kgalm{display:none;} }
/* плашка собственного контента: отличает экспертные ролики KORS от клиентских работ */
.kgalm__badge{position:absolute;z-index:3;top:8px;left:8px;font-family:'Manrope',Arial,sans-serif;font-size:9px;font-weight:700;line-height:1;letter-spacing:.02em;color:#fff;background:rgba(109,93,251,.94);border:1px solid rgba(255,255,255,.16);border-radius:6px;padding:5px 8px;box-shadow:0 5px 14px rgba(0,0,0,.4);pointer-events:none}
</style>
<script>
(function(){
  var SLUG={'Видео':'video','Фотосъёмка':'photo','Сайт':'site','Презентация':'presentation','Фирменный стиль':'brand','Реклама':'ads','Дизайн':'design','Трансляция':'live','Продюсирование':'producing'};
  var works=[
    {id:'pd95FJSRFhF27W4YX4ioJJ', full:'3ZsxHkdEuHUubxSAQZDRyG', name:'Одоевские консервы - фильм о заводе', tags:['Видео'], desc:'Показали производство изнутри: цеха, линии, контроль качества. Видео работает на сайте, в переговорах с сетями и на выставках.', alt:'Фильм о заводе Одоевские консервы: цеха, линии и контроль качества, мобильная версия'},
    {id:'iPcFsLF3eYfDYTauhcgjZj', full:'fv7FAnLfbLaDaNJLtSQ74H', name:'Вистекс', sphere:'производство, предприятие', format:'презентационный ролик', term:'15 дней', tags:['Видео','Дизайн'], desc:'Ролик о заводе: восемь направлений производства за три минуты. Дизайн email-письма со встроенным видео для коммерческих предложений.', alt:'Видео о производстве для завода Вистекс, мобильная версия'},
    {id:'xgBCJrU3Fy9CtKDXR9R23S', full:'0GfobL6RnAzhPeiopXjNHS', name:'Invoicebox - о компании', sphere:'финансовые технологии (FinTech)', format:'презентационный ролик о компании', term:'6 дней', tags:['Видео'], desc:'Имиджевый ролик о платёжном сервисе: чем занимается компания и какие задачи бизнеса закрывает.', alt:'Имиджевый ролик о платёжном сервисе Invoicebox, мобильная версия'},
    {id:'sRSLqBbjkRWyn31BrY6iny', full:'mZiwnH9uZAdc15hhRsqPvB', name:'Одоевские консервы - термостабильные начинки', tags:['Видео'], desc:'Продуктовый ролик о линейке: как начинки ведут себя при выпечке и что это даёт производителю.', alt:'Продуктовый ролик о термостабильных начинках Одоевские консервы, мобильная версия'},
    {id:'5zMvPKfeuDf9N7h7P8KuVe', full:'ePXSSA9qFiEgA5WYRdd4FP', name:'Алтай Серикбай - съёмки для личного бренда', tags:['Видео'], desc:'Снимаем контент для эксперта по личностному развитию: студийные выпуски, разговорные форматы, съёмки на ретритах. За время работы - больше десяти роликов.', alt:'Съёмки для личного бренда эксперта по личностному развитию Алтая Серикбая, мобильная версия'},
    {id:'bKeihzPbnEbXZarkMcYQZj', full:'6ivtiXKAcQj4dVJN8H1YWs', name:'MediaLive - отчётный ролик с выставки', tags:['Видео','Реклама'], desc:'Сняли отчётное видео с отраслевого события. Организаторы используют его на сайте и в рекламе следующего сезона.', alt:'Отчётный ролик с отраслевой выставки для MediaLive, мобильная версия'},
    {id:'6JcPdvqUchXCmzscbTqaos', full:'sRyZwPm3BS9CVspVi2sLx3', name:'Одоевские консервы - нетермостабильные начинки', tags:['Видео'], desc:'Второй ролик линейки: назначение, состав, применение в готовых изделиях.', alt:'Продуктовый ролик о нетермостабильных начинках Одоевские консервы, мобильная версия'},
    {id:'35XkXms5VN3RLJcYsgWsnD', full:'2FXfjS6hYEvLkWNKUveoBx', name:'Invoicebox - оплата в белорусских рублях', tags:['Видео'], desc:'Объясняющий ролик о выходе платёжного сервиса на рынок Беларуси: как принимать оплату в белорусских рублях.', alt:'Ролик об оплате в белорусских рублях в платёжном сервисе Invoicebox, мобильная версия'},
    {id:'8QbWRspZgkLTicEiQpp9su', full:'8QbWRspZgkLTicEiQpp9su', name:'STROBBS - промо зимней коллекции', tags:['Видео','Реклама'], desc:'Проморолик показа новой зимней коллекции российского бренда обуви и одежды.', alt:'Проморолик показа зимней коллекции бренда обуви и одежды STROBBS, мобильная версия'},
    {id:'vNYi5w7HiQevkdBbPmQ3CR', full:'vNYi5w7HiQevkdBbPmQ3CR', name:'Ювелирный лофт GOLD - ролик о компании', tags:['Видео'], desc:'Рассказали о компании и о том, чем она занимается.', alt:'Ролик о компании для ювелирного лофта GOLD, мобильная версия'},
    {id:'wLtMKZCpf75eYEWMXPEPZY', full:'7Kxs8xzVfCDLtyuG5puNN1', name:'Рокстар', sphere:'медиа', format:'музыкальный клип', term:'12 дней', tags:['Видео','Дизайн'], desc:'Три клипа и обложки для музыкального проекта.', alt:'Музыкальные клипы для проекта Рокстар, мобильная версия'},
    {id:'88SCanh4aPU83UFBmThiVa', full:'mJqjXaKQBrdbvirxUTHLLh', name:'Rockstar - клип «На дне»', tags:['Видео'], desc:'Музыкальный клип для артиста.', alt:'Музыкальный клип На дне для артиста Rockstar, мобильная версия'},
    {id:'qAV5wXg5oHKKcY6tbgysZd', full:'okapERMYWfdoGagPRmo7uC', name:'Rockstar - клип «Самая грустная песня»', tags:['Видео'], desc:'Первый клип, который мы сняли для артиста.', alt:'Музыкальный клип Самая грустная песня для артиста Rockstar, мобильная версия'},
    {id:'7akHJzKdcoSrPiHtRbRBqk', full:'7akHJzKdcoSrPiHtRbRBqk', name:'Invoicebox - интернет-магазины за пару кликов', tags:['Видео'], desc:'Продуктовый ролик о конструкторе интернет-магазинов внутри сервиса.', alt:'Ролик о конструкторе интернет-магазинов в сервисе Invoicebox, мобильная версия'},
    {id:'b66cpVCFFFVycfDvLFXFR3', full:'b66cpVCFFFVycfDvLFXFR3', name:'Invoicebox - как выставить счёт за пару кликов', tags:['Видео'], desc:'Видеоинструкция для пользователей сервиса: выставление счёта по шагам.', alt:'Видеоинструкция по выставлению счёта в сервисе Invoicebox, мобильная версия'},
    {id:'uqJ79iyVPcqN1ZtTtjnkAv', name:'GosObmen', sphere:'финансовые услуги', format:'рекламный ролик', term:'3 дня', tags:['Видео','Сайт','Дизайн'], desc:'Рекламные ролики, тексты и сайт. Собрали скрипт для отдела продаж.', alt:'Рекламный ролик и сайт для сервиса Гособмен, мобильная версия'},
    {id:'gHMF2zBsAdSdbcEH9wSZKh', name:'Редакция ЭКСМО', sphere:'издательский бизнес', format:'съёмка трейлера по сюжету книги', term:'9 дней', tags:['Видео','Дизайн'], desc:'Трейлер книги и афиша для издательства.', alt:'Книжный трейлер для издательства Редакция ЭКСМО, мобильная версия'},
    {id:'8YSeQnzXxmpkmo7uNNcLrF', name:'YouTube-шоу', sphere:'медиа', format:'съёмка выпусков', term:'14 дней', tags:['Видео','Продюсирование','Реклама'], desc:'Продюсирование и режиссура шоу: съёмка выпусков и рекламное сопровождение.', alt:'Съёмка выпусков YouTube-шоу, мобильная версия'},
    {id:'bZ8JyozhtKdSDiy5xjLoVr', name:'Ресторан Rumi / «ЗНАТЬ»', sphere:'ресторанный бизнес, мероприятия', format:'видео-отчёт о мероприятии', term:'2 дня', tags:['Видео','Трансляция','Презентация'], desc:'Съёмка мероприятий, прямая трансляция и презентации для ресторана.', alt:'Съёмка мероприятия и трансляция для ресторана Rumi, мобильная версия'},
    {id:'uiVqp8dWpzNoBt2GweBLs9', name:'Новая Формация', sphere:'организация, бизнес', format:'презентационный ролик', term:'4 дня', tags:['Видео','Дизайн'], desc:'Презентационный ролик, афиша и ведение контента.', alt:'Презентационный ролик для проекта Новая Формация, мобильная версия'},
    {id:'dsqVruz3QkCKQESGiTUsVR', full:'dsqVruz3QkCKQESGiTUsVR', name:'Твой продакшен тебя обманывает', tags:['Видео'], kors:true, alt:'Экспертное видео KORS: почему продакшен может обманывать заказчика, мобильная версия'},
    {id:'uittTC7uyz9hv4HDirTBAG', full:'uittTC7uyz9hv4HDirTBAG', name:'Видео - это не украшение для бизнеса', tags:['Видео'], kors:true, alt:'Экспертное видео KORS о том, зачем бизнесу видео, мобильная версия'},
    {id:'aG3Qkc4VfoCcgtJLz6ivbE', full:'aG3Qkc4VfoCcgtJLz6ivbE', name:'Как сэкономить на видеоролике', tags:['Видео'], kors:true, alt:'Экспертное видео KORS о том, как сэкономить на съёмке ролика, мобильная версия'},
    {id:'4pzsMBSzheH3Sarx4UFHMd', full:'4pzsMBSzheH3Sarx4UFHMd', name:'Как сделать продающее видео', tags:['Видео'], kors:true, alt:'Экспертное видео KORS о том, как сделать продающее видео, мобильная версия'},
    {id:'eCGHEdUFdSyEjCBXxcsUSC', name:'KORS Production', sphere:'создание контента', format:'актуальные работы', term:'2025-й год', tags:['Видео','Продюсирование'], desc:'Шоурил студии: съёмки на производствах и коммерческие проекты разных лет.', alt:'Актуальные работы студии KORS Production, мобильная версия'}
  ];
  var FS='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="5 3 19 12 5 21 5 3"/></svg>';
  var lb=document.getElementById('kgalmLb'), lbf=document.getElementById('kgalmLbIframe');
  function openLb(id){ lbf.src='https://kinescope.io/embed/'+id+'?autoplay=true'; lb.classList.add('open'); }
  function closeLb(){ lb.classList.remove('open'); lbf.src=''; }
  document.getElementById('kgalmLbx').addEventListener('click',closeLb);
  lb.querySelector('.kgalm__lbbd').addEventListener('click',closeLb);
  function makeCard(w, defer){
    var card=document.createElement('div'); card.className='kgalm__card';
    card.setAttribute('data-tags',(w.tags||[]).map(function(t){return SLUG[t]||'';}).join(' '));
    var ttl=(w.alt||w.name).replace(/"/g,'&quot;');
    var q='?autoplay=true&muted=true&loop=true&controls=false&playsInline=true&background=true';
    var ift= defer ? '<iframe data-src="https://kinescope.io/embed/'+w.id+q+'" title="'+ttl+'" aria-label="'+ttl+'" allow="autoplay; fullscreen; encrypted-media; picture-in-picture" allowfullscreen></iframe>'
                   : '<iframe loading="lazy" src="https://kinescope.io/embed/'+w.id+q+'" title="'+ttl+'" aria-label="'+ttl+'" allow="autoplay; fullscreen; encrypted-media; picture-in-picture" allowfullscreen></iframe>';
    var tagsHtml=(w.tags&&w.tags.length)?'<div class="kgalm__tags">'+w.tags.map(function(t){return '<span class="kgalm__tag">'+t+'</span>';}).join('')+'</div>':'';
    var descHtml=w.desc?'<p class="kgalm__desc">'+w.desc+'</p>':'';
    var metaHtml='';
    if(w.sphere||w.format||w.term){ metaHtml='<div class="kgalm__meta">'+(w.sphere?'<div class="kgalm__row"><b>Сфера:</b> '+w.sphere+'</div>':'')+(w.format?'<div class="kgalm__row"><b>Формат:</b> '+w.format+'</div>':'')+(w.term?'<div class="kgalm__row"><b>Срок:</b> '+w.term+'</div>':'')+'</div>'; }
    var korsHtml=w.kors?'<span class="kgalm__badge">Экспертное видео KORS</span>':'';
    card.innerHTML='<div class="kgalm__video">'+korsHtml+ift+'</div><div class="kgalm__body"><h3 class="kgalm__name">'+w.name+'</h3>'+tagsHtml+descHtml+metaHtml+'<button class="kgalm__full'+(w.full?'':' kgalm__full--nolink')+'" '+(w.full?'':'aria-disabled="true"')+'>'+FS+'Смотреть полное видео</button></div>';
    /* KORS: у карточек без поля full полной версии ролика пока нет. Кнопка остаётся видимой, но клик отключён, чтобы не открывался тот же короткий ролик. Как только появится ссылка, добавь в объект работы full:'ID_полного_ролика' - кнопка заработает сама, ничего больше менять не нужно. */
    if(w.full){ card.querySelector('.kgalm__full').addEventListener('click',function(){ openLb(w.full); }); }
    return card;
  }
  var top=document.getElementById('kgalmTop'),rest=document.getElementById('kgalmRest'),box=document.getElementById('kgalmHidden'),more=document.getElementById('kgalmMore');
  if(!top||!rest||!box||!more)return;
  works.slice(0,3).forEach(function(w){top.appendChild(makeCard(w,false));});
  works.slice(3).forEach(function(w){rest.appendChild(makeCard(w,true));});
  var cntEl=more.querySelector('.kgalm__count'); if(cntEl){ cntEl.textContent='+'+(works.length-3); }
  var loaded=false, mt=more.querySelector('.kgalm__mtext');
  more.addEventListener('click',function(){
    if(!box.classList.contains('open')){
      if(!loaded){rest.querySelectorAll('iframe[data-src]').forEach(function(f){f.src=f.getAttribute('data-src');});loaded=true;}
      box.classList.add('open'); box.style.maxHeight=box.scrollHeight+'px';
      setTimeout(function(){if(box.classList.contains('open'))box.style.maxHeight='none';},600);
      more.classList.add('is-open'); mt.textContent='Свернуть';
    }else{
      box.style.maxHeight=box.scrollHeight+'px';
      requestAnimationFrame(function(){box.style.maxHeight='0px';box.classList.remove('open');});
      more.classList.remove('is-open'); mt.textContent='Смотреть ещё наши работы';
    }
  });
  window.addEventListener('resize',function(){if(box.classList.contains('open'))box.style.maxHeight='none';});

  /* фильтр по услугам: чистый JS, отбор по data-tags */
  var fwrap=document.getElementById('kgalmFilter'), empty=document.getElementById('kgalmEmpty'), morewrap=more.parentNode;
  function loadRest(){ if(!loaded){ rest.querySelectorAll('iframe[data-src]').forEach(function(f){ f.src=f.getAttribute('data-src'); }); loaded=true; } }
  function setBox(open){
    if(open){ loadRest(); box.classList.add('open'); box.style.maxHeight='none'; }
    else { box.classList.remove('open'); box.style.maxHeight='0px'; }
  }
  if(fwrap){
    fwrap.addEventListener('click',function(e){
      var b=e.target.closest?e.target.closest('.kgalm__fbtn'):null;
      if(!b) return;
      var f=b.getAttribute('data-f'), all=(f==='all'), shown=0, restShown=0;
      fwrap.querySelectorAll('.kgalm__fbtn').forEach(function(x){ x.classList.toggle('is-active', x===b); });
      if(b.scrollIntoView) b.scrollIntoView({block:'nearest',inline:'nearest'});
      [top,rest].forEach(function(grid){
        grid.querySelectorAll('.kgalm__card').forEach(function(c){
          var m = all || ((' '+(c.getAttribute('data-tags')||'')+' ').indexOf(' '+f+' ')>-1);
          if(m){
            shown++; if(grid===rest) restShown++;
            c.style.display='';
            void c.offsetWidth;
            c.classList.remove('is-off');
          } else {
            c.classList.add('is-off');
            setTimeout(function(){ if(c.classList.contains('is-off')) c.style.display='none'; },260);
          }
        });
      });
      if(all){
        setBox(false); morewrap.style.display='';
        more.classList.remove('is-open'); mt.textContent='Смотреть ещё наши работы';
      } else {
        setBox(restShown>0); morewrap.style.display='none';
      }
      if(empty) empty.classList.toggle('on', shown===0);
    });
  }
})();
</script>

rec2663623901 ДЕСКТОП (22397 симв.)

<!-- ===== KORS · НАШИ РАБОТЫ · ДЕСКТОП · блок T123. Показывать ТОЛЬКО на компьютере. ===== -->
<div class="kgald">
  <div class="kgald__head">
    <div class="kgald__eyebrow">- НАШИ РАБОТЫ</div>
    <h2 class="kgald__title">460+ проектов: найдите свою отрасль.</h2>
    <div class="kgald__sub">Сфера, формат и срок по каждому проекту. Нажми «Смотреть полное видео» - откроется на весь экран.</div>
  </div>
  <div class="kgald__filter" id="kgaldFilter" aria-label="Фильтр работ по услугам">
      <button type="button" class="kgald__fbtn is-active" data-f="all">Все</button>
      <button type="button" class="kgald__fbtn" data-f="video">Видео</button>
      <button type="button" class="kgald__fbtn" data-f="site">Сайты</button>
      <button type="button" class="kgald__fbtn" data-f="presentation">Презентации</button>
      <button type="button" class="kgald__fbtn" data-f="brand">Фирменный стиль</button>
      <button type="button" class="kgald__fbtn" data-f="ads">Реклама</button>
    </div>
    <div class="kgald__grid" id="kgaldTop"></div>
  <div class="kgald__hidden" id="kgaldHidden"><div class="kgald__grid" id="kgaldRest"></div></div>
  <div class="kgald__empty" id="kgaldEmpty">По этой услуге в подборке пока нет проектов.</div>
    <div class="kgald__morewrap"><button class="kgald__more" id="kgaldMore"><span class="kgald__mtext">Смотреть все работы</span> <span class="kgald__count">+9</span></button></div>
    <div class="kgald__group" id="kgaldExpWrap">
    <div class="kgald__ghead">
      <div class="kgald__eyebrow">- ГОВОРИМ О ВИДЕО</div>
      <h3 class="kgald__gtitle">Экспертные ролики студии</h3>
      <div class="kgald__gsub">Наш собственный контент, не клиентские заказы: как устроен продакшен, из чего складывается цена и что делает видео рабочим инструментом.</div>
    </div>
    <div class="kgald__grid" id="kgaldExp"></div>
  </div>
  <div class="kgald__lb" id="kgaldLb"><div class="kgald__lbbd"></div><div class="kgald__lbbox"><button class="kgald__lbx" id="kgaldLbx">×</button><div class="kgald__lbframe"><iframe id="kgaldLbIframe" allow="autoplay; fullscreen; encrypted-media; picture-in-picture" allowfullscreen></iframe></div></div></div>
</div>
<style>
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Unbounded:wght@400;600;700;800&display=swap');
.kgald{--bg:#0C0C0E;--raise:#141416;--card:#1B1B1F;--border:#2A2A2E;--text:#F5F3EF;--muted:#9A9A9A;--faint:#6a6a6e;--accent:#6D5DFB;--glow:rgba(109,93,251,.14);
  box-sizing:border-box;background:var(--bg);color:var(--text);font-family:'Manrope',Arial,sans-serif;-webkit-font-smoothing:antialiased;padding:80px 5vw 90px;}
.kgald *{box-sizing:border-box;margin:0;padding:0;}
.kgald__head{max-width:1240px;margin:0 auto 44px;text-align:center;}
.kgald__eyebrow{font-family:'Unbounded';font-size:12px;letter-spacing:.14em;color:var(--accent);margin-bottom:14px;}
.kgald__title{font-family:'Unbounded';font-weight:700;font-size:clamp(30px,3.4vw,48px);letter-spacing:-.02em;margin-bottom:14px;}
.kgald__sub{color:var(--muted);font-size:16px;line-height:1.5;max-width:560px;margin:0 auto;}
.kgald__grid{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.kgald__card{background:var(--raise);border:1px solid var(--border);border-radius:16px;overflow:hidden;transition:.25s;display:flex;flex-direction:column;}
.kgald__card:hover{border-color:rgba(109,93,251,.5);transform:translateY(-3px);box-shadow:0 16px 40px rgba(0,0,0,.4);}
.kgald__video{position:relative;width:100%;aspect-ratio:16/9;background:#000;}
.kgald__video iframe{position:absolute;inset:0;width:100%;height:100%;border:none;pointer-events:none;}
.kgald__body{padding:20px 20px 22px;display:flex;flex-direction:column;flex:1;}
.kgald__name{font-family:'Unbounded';font-weight:700;font-size:20px;margin-bottom:10px;letter-spacing:-.01em;}
.kgald__meta{display:flex;flex-direction:column;gap:6px;margin-bottom:18px;}
.kgald__row{font-size:14px;color:var(--muted);line-height:1.4;}
.kgald__row b{color:var(--text);font-weight:600;}
.kgald__full--nolink{cursor:default}
.kgald__full{margin-top:auto;display:inline-flex;align-items:center;gap:8px;align-self:flex-start;background:transparent;border:1px solid var(--border);color:var(--text);font-family:'Manrope';font-weight:700;font-size:14px;padding:12px 18px;border-radius:9px;cursor:pointer;transition:.2s;}
.kgald__full:hover{border-color:var(--accent);color:var(--accent);}
.kgald__full svg{width:15px;height:15px;flex:none;}
.kgald__hidden{max-width:1240px;margin:0 auto;max-height:0;overflow:hidden;opacity:0;transition:max-height .55s ease,opacity .4s ease,margin-top .4s ease;margin-top:0;}
.kgald__hidden.open{opacity:1;margin-top:22px;}
.kgald__morewrap{text-align:center;margin-top:40px;}
.kgald__more{display:inline-flex;align-items:center;gap:10px;background:var(--accent);color:#fff;font-family:'Manrope';font-weight:700;font-size:15px;padding:16px 30px;border-radius:9px;border:none;cursor:pointer;transition:.25s;}
.kgald__more:hover{transform:translateY(-2px);box-shadow:0 10px 30px var(--glow);}
.kgald__count{font-family:'Unbounded';font-size:12px;background:rgba(0,0,0,.18);padding:3px 8px;border-radius:20px;}
.kgald__more.is-open .kgald__count{display:none;}
.kgald__lb{position:fixed;inset:0;z-index:99999;display:none;align-items:center;justify-content:center;padding:40px;}
.kgald__lb.open{display:flex;}
.kgald__lbbd{position:absolute;inset:0;background:rgba(4,4,6,.9);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);}
.kgald__lbbox{position:relative;width:min(1100px,100%);}
.kgald__lbframe{position:relative;width:100%;aspect-ratio:16/9;background:#000;border-radius:12px;overflow:hidden;border:1px solid var(--border);}
.kgald__lbframe iframe{position:absolute;inset:0;width:100%;height:100%;border:none;}
.kgald__lbx{position:absolute;top:-46px;right:0;width:38px;height:38px;border-radius:9px;background:var(--raise);border:1px solid var(--border);color:var(--text);font-size:22px;line-height:1;cursor:pointer;}
.kgald__lbx:hover{border-color:var(--accent);color:var(--accent);}
.kgald__filter{max-width:1240px;margin:0 auto 26px;display:flex;flex-wrap:nowrap;gap:8px;justify-content:center;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;padding-bottom:2px;}
.kgald__filter::-webkit-scrollbar{display:none;}
.kgald__fbtn{flex:none;background:transparent;border:1px solid var(--border);color:var(--muted);font-family:'Manrope',Arial,sans-serif;font-weight:600;font-size:13px;padding:9px 16px;border-radius:20px;cursor:pointer;transition:.2s;white-space:nowrap;}
.kgald__fbtn:hover{border-color:rgba(109,93,251,.5);color:var(--text);}
.kgald__fbtn.is-active{background:var(--accent);border-color:var(--accent);color:#fff;}
.kgald__tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px;}
.kgald__tag{font-family:'Manrope',Arial,sans-serif;font-weight:600;font-size:9px;line-height:1;text-transform:uppercase;letter-spacing:.14em;color:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.22);border-radius:4px;padding:5px 8px;white-space:nowrap;}
.kgald__desc{font-size:12px;line-height:1.5;color:var(--muted);margin-bottom:14px;}
.kgald__card.is-off{opacity:0;transform:translateY(6px);}
.kgald__empty{max-width:1240px;margin:0 auto;text-align:center;color:var(--muted);font-size:15px;padding:34px 0;display:none;}
.kgald__empty.on{display:block;}
@media (max-width:900px){ .kgald__grid{grid-template-columns:repeat(2,1fr);} .kgald__filter{justify-content:flex-start;} }
@media (max-width:480px){ .kgald{display:none;} }
#rec2663623901 .kgald__count{color:#fff;background:rgba(0,0,0,.32);}
/* KORS: экспертные ролики вынесены в отдельную группу со своим заголовком, поэтому плашка на карточке больше не нужна. */
.kgald__group{margin-top:88px;}
.kgald__ghead{max-width:1240px;margin:0 auto 34px;text-align:center;}
.kgald__gtitle{font-family:'Unbounded';font-weight:700;font-size:clamp(24px,2.4vw,34px);letter-spacing:-.02em;margin-bottom:12px;}
.kgald__gsub{color:var(--muted);font-size:15px;line-height:1.5;max-width:560px;margin:0 auto;}
</style>
<script>
(function(){
  var SLUG={'Видео':'video','Фотосъёмка':'photo','Сайт':'site','Презентация':'presentation','Фирменный стиль':'brand','Реклама':'ads','Дизайн':'design','Трансляция':'live','Продюсирование':'producing'};
  var works=[
    {id:'pd95FJSRFhF27W4YX4ioJJ', full:'3ZsxHkdEuHUubxSAQZDRyG', name:'Одоевские консервы - фильм о заводе', tags:['Видео','Фирменный стиль'], desc:'Показали производство изнутри: цеха, линии, контроль качества. Видео работает на сайте, в переговорах с сетями и на выставках.', alt:'Фильм о заводе Одоевские консервы: цеха, линии и контроль качества'},
    {id:'iPcFsLF3eYfDYTauhcgjZj', full:'fv7FAnLfbLaDaNJLtSQ74H', name:'Вистекс', sphere:'производство, предприятие', format:'презентационный ролик', term:'15 дней', tags:['Видео','Дизайн'], desc:'Ролик о заводе: восемь направлений производства за три минуты. Дизайн email-письма со встроенным видео для коммерческих предложений.', alt:'Видео о производстве для завода Вистекс'},
    {id:'xgBCJrU3Fy9CtKDXR9R23S', full:'0GfobL6RnAzhPeiopXjNHS', name:'Invoicebox - о компании', sphere:'финансовые технологии (FinTech)', format:'презентационный ролик о компании', term:'6 дней', tags:['Видео','Реклама'], desc:'Имиджевый ролик о платёжном сервисе: чем занимается компания и какие задачи бизнеса закрывает.', alt:'Имиджевый ролик о платёжном сервисе Invoicebox'},
    {id:'sRSLqBbjkRWyn31BrY6iny', full:'mZiwnH9uZAdc15hhRsqPvB', name:'Одоевские консервы - термостабильные начинки', tags:['Видео'], desc:'Продуктовый ролик о линейке: как начинки ведут себя при выпечке и что это даёт производителю.', alt:'Продуктовый ролик о термостабильных начинках Одоевские консервы'},
    {id:'5zMvPKfeuDf9N7h7P8KuVe', full:'ePXSSA9qFiEgA5WYRdd4FP', name:'Алтай Серикбай - съёмки для личного бренда', tags:['Видео'], desc:'Снимаем контент для эксперта по личностному развитию: студийные выпуски, разговорные форматы, съёмки на ретритах. За время работы - больше десяти роликов.', alt:'Съёмки для личного бренда эксперта по личностному развитию Алтая Серикбая'},
    {id:'bKeihzPbnEbXZarkMcYQZj', full:'6ivtiXKAcQj4dVJN8H1YWs', name:'MediaLive - отчётный ролик с выставки', tags:['Видео','Реклама'], desc:'Сняли отчётное видео с отраслевого события. Организаторы используют его на сайте и в рекламе следующего сезона.', alt:'Отчётный ролик с отраслевой выставки для MediaLive'},
    {id:'6JcPdvqUchXCmzscbTqaos', full:'sRyZwPm3BS9CVspVi2sLx3', name:'Одоевские консервы - нетермостабильные начинки', tags:['Видео'], desc:'Второй ролик линейки: назначение, состав, применение в готовых изделиях.', alt:'Продуктовый ролик о нетермостабильных начинках Одоевские консервы'},
    {id:'35XkXms5VN3RLJcYsgWsnD', full:'2FXfjS6hYEvLkWNKUveoBx', name:'Invoicebox - оплата в белорусских рублях', tags:['Видео'], desc:'Объясняющий ролик о выходе платёжного сервиса на рынок Беларуси: как принимать оплату в белорусских рублях.', alt:'Ролик об оплате в белорусских рублях в платёжном сервисе Invoicebox'},
    {id:'8QbWRspZgkLTicEiQpp9su', full:'8QbWRspZgkLTicEiQpp9su', name:'STROBBS - промо зимней коллекции', tags:['Видео','Реклама'], desc:'Проморолик показа новой зимней коллекции российского бренда обуви и одежды.', alt:'Проморолик показа зимней коллекции бренда обуви и одежды STROBBS'},
    {id:'vNYi5w7HiQevkdBbPmQ3CR', full:'vNYi5w7HiQevkdBbPmQ3CR', name:'Ювелирный лофт GOLD - ролик о компании', tags:['Видео'], desc:'Рассказали о компании и о том, чем она занимается.', alt:'Ролик о компании для ювелирного лофта GOLD'},
    {id:'wLtMKZCpf75eYEWMXPEPZY', full:'7Kxs8xzVfCDLtyuG5puNN1', name:'Рокстар', sphere:'медиа', format:'музыкальный клип', term:'12 дней', tags:['Видео','Дизайн'], desc:'Три клипа и обложки для музыкального проекта.', alt:'Музыкальные клипы для проекта Рокстар'},
    {id:'88SCanh4aPU83UFBmThiVa', full:'mJqjXaKQBrdbvirxUTHLLh', name:'Rockstar - клип «На дне»', tags:['Видео'], desc:'Музыкальный клип для артиста.', alt:'Музыкальный клип На дне для артиста Rockstar'},
    {id:'qAV5wXg5oHKKcY6tbgysZd', full:'okapERMYWfdoGagPRmo7uC', name:'Rockstar - клип «Самая грустная песня»', tags:['Видео'], desc:'Первый клип, который мы сняли для артиста.', alt:'Музыкальный клип Самая грустная песня для артиста Rockstar'},
    {id:'7akHJzKdcoSrPiHtRbRBqk', full:'7akHJzKdcoSrPiHtRbRBqk', name:'Invoicebox - интернет-магазины за пару кликов', tags:['Видео'], desc:'Продуктовый ролик о конструкторе интернет-магазинов внутри сервиса.', alt:'Ролик о конструкторе интернет-магазинов в сервисе Invoicebox'},
    {id:'b66cpVCFFFVycfDvLFXFR3', full:'b66cpVCFFFVycfDvLFXFR3', name:'Invoicebox - как выставить счёт за пару кликов', tags:['Видео'], desc:'Видеоинструкция для пользователей сервиса: выставление счёта по шагам.', alt:'Видеоинструкция по выставлению счёта в сервисе Invoicebox'},
    {id:'uqJ79iyVPcqN1ZtTtjnkAv', name:'GosObmen', sphere:'финансовые услуги', format:'рекламный ролик', term:'3 дня', tags:['Видео','Сайт','Дизайн'], desc:'Рекламные ролики, тексты и сайт. Собрали скрипт для отдела продаж.', alt:'Рекламный ролик и сайт для сервиса Гособмен'},
    {id:'gHMF2zBsAdSdbcEH9wSZKh', name:'Редакция ЭКСМО', sphere:'издательский бизнес', format:'съёмка трейлера по сюжету книги', term:'9 дней', tags:['Видео','Дизайн'], desc:'Трейлер книги и афиша для издательства.', alt:'Книжный трейлер для издательства Редакция ЭКСМО'},
    {id:'8YSeQnzXxmpkmo7uNNcLrF', name:'YouTube-шоу', sphere:'медиа', format:'съёмка выпусков', term:'14 дней', tags:['Видео','Продюсирование','Реклама'], desc:'Продюсирование и режиссура шоу: съёмка выпусков и рекламное сопровождение.', alt:'Съёмка выпусков YouTube-шоу'},
    {id:'bZ8JyozhtKdSDiy5xjLoVr', name:'Ресторан Rumi / «ЗНАТЬ»', sphere:'ресторанный бизнес, мероприятия', format:'видео-отчёт о мероприятии', term:'2 дня', tags:['Видео','Трансляция','Презентация'], desc:'Съёмка мероприятий, прямая трансляция и презентации для ресторана.', alt:'Съёмка мероприятия и трансляция для ресторана Rumi'},
    {id:'uiVqp8dWpzNoBt2GweBLs9', name:'Новая Формация', sphere:'организация, бизнес', format:'презентационный ролик', term:'4 дня', tags:['Видео','Дизайн'], desc:'Презентационный ролик, афиша и ведение контента.', alt:'Презентационный ролик для проекта Новая Формация'},
    {id:'dsqVruz3QkCKQESGiTUsVR', full:'dsqVruz3QkCKQESGiTUsVR', name:'Твой продакшен тебя обманывает', tags:['Видео'], kors:true, alt:'Экспертное видео KORS: почему продакшен может обманывать заказчика'},
    {id:'uittTC7uyz9hv4HDirTBAG', full:'uittTC7uyz9hv4HDirTBAG', name:'Видео - это не украшение для бизнеса', tags:['Видео'], kors:true, alt:'Экспертное видео KORS о том, зачем бизнесу видео'},
    {id:'aG3Qkc4VfoCcgtJLz6ivbE', full:'aG3Qkc4VfoCcgtJLz6ivbE', name:'Как сэкономить на видеоролике', tags:['Видео'], kors:true, alt:'Экспертное видео KORS о том, как сэкономить на съёмке ролика'},
    {id:'4pzsMBSzheH3Sarx4UFHMd', full:'4pzsMBSzheH3Sarx4UFHMd', name:'Как сделать продающее видео', tags:['Видео'], kors:true, alt:'Экспертное видео KORS о том, как сделать продающее видео'},
    {id:'eCGHEdUFdSyEjCBXxcsUSC', name:'KORS Production', sphere:'создание контента', format:'актуальные работы', term:'2025-й год', tags:['Видео','Продюсирование'], desc:'Шоурил студии: съёмки на производствах и коммерческие проекты разных лет.', alt:'Актуальные работы студии KORS Production'}
  ];
  var FS='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="5 3 19 12 5 21 5 3"/></svg>';
  var lb=document.getElementById('kgaldLb'), lbf=document.getElementById('kgaldLbIframe');
  function openLb(id){ lbf.src='https://kinescope.io/embed/'+id+'?autoplay=true'; lb.classList.add('open'); }
  function closeLb(){ lb.classList.remove('open'); lbf.src=''; }
  document.getElementById('kgaldLbx').addEventListener('click',closeLb);
  lb.querySelector('.kgald__lbbd').addEventListener('click',closeLb);
  function makeCard(w, defer){
    var card=document.createElement('div'); card.className='kgald__card';
    card.setAttribute('data-tags',(w.tags||[]).map(function(t){return SLUG[t]||'';}).join(' '));
    var ttl=(w.alt||w.name).replace(/"/g,'&quot;');
    var q='?autoplay=true&muted=true&loop=true&controls=false&playsInline=true&background=true';
    var ift= defer ? '<iframe data-src="https://kinescope.io/embed/'+w.id+q+'" title="'+ttl+'" aria-label="'+ttl+'" allow="autoplay; fullscreen; encrypted-media; picture-in-picture" allowfullscreen></iframe>'
                   : '<iframe loading="lazy" src="https://kinescope.io/embed/'+w.id+q+'" title="'+ttl+'" aria-label="'+ttl+'" allow="autoplay; fullscreen; encrypted-media; picture-in-picture" allowfullscreen></iframe>';
    var tagsHtml=(w.tags&&w.tags.length)?'<div class="kgald__tags">'+w.tags.map(function(t){return '<span class="kgald__tag">'+t+'</span>';}).join('')+'</div>':'';
    var descHtml=w.desc?'<p class="kgald__desc">'+w.desc+'</p>':'';
    var metaHtml='';
    if(w.sphere||w.format||w.term){ metaHtml='<div class="kgald__meta">'+(w.sphere?'<div class="kgald__row"><b>Сфера:</b> '+w.sphere+'</div>':'')+(w.format?'<div class="kgald__row"><b>Формат:</b> '+w.format+'</div>':'')+(w.term?'<div class="kgald__row"><b>Срок:</b> '+w.term+'</div>':'')+'</div>'; }
    card.innerHTML='<div class="kgald__video">'+ift+'</div><div class="kgald__body"><h3 class="kgald__name">'+w.name+'</h3>'+tagsHtml+descHtml+metaHtml+'<button class="kgald__full'+(w.full?'':' kgald__full--nolink')+'" '+(w.full?'':'aria-disabled="true"')+'>'+FS+'Смотреть полное видео</button></div>';
    /* KORS: у карточек без поля full полной версии ролика пока нет. Кнопка остаётся видимой, но клик отключён, чтобы не открывался тот же короткий ролик. Как только появится ссылка, добавь в объект работы full:'ID_полного_ролика' - кнопка заработает сама, ничего больше менять не нужно. */
    if(w.full){ card.querySelector('.kgald__full').addEventListener('click',function(){ openLb(w.full); }); }
    return card;
  }
  var top=document.getElementById('kgaldTop'),rest=document.getElementById('kgaldRest'),box=document.getElementById('kgaldHidden'),more=document.getElementById('kgaldMore');
  var exp=document.getElementById('kgaldExp'), expwrap=document.getElementById('kgaldExpWrap');
  if(!top||!rest||!box||!more)return;
  /* KORS: превью грузятся не пачкой. Плеер получает src только когда карточка подходит к видимой области (запас 300px). Пока карточка спрятана под кнопкой (max-height:0) или скрыта фильтром (display:none), она не пересекается с экраном и ролик не стартует. */
  var io=('IntersectionObserver' in window)?new IntersectionObserver(function(es,ob){
    es.forEach(function(e){
      if(!e.isIntersecting) return;
      var f=e.target.querySelector('iframe[data-src]');
      if(f){ f.src=f.getAttribute('data-src'); f.removeAttribute('data-src'); }
      ob.unobserve(e.target);
    });
  },{root:null,rootMargin:'300px 0px',threshold:0.01}):null;
  function watch(c){
    if(io){ io.observe(c); return; }
    var f=c.querySelector('iframe[data-src]');
    if(f){ f.src=f.getAttribute('data-src'); f.removeAttribute('data-src'); }
  }
  function put(grid,w){ var c=makeCard(w,true); grid.appendChild(c); watch(c); }
  /* KORS: порог показа - 12 карточек, остальные под кнопкой. Экспертные ролики студии идут отдельной группой ниже, флаг kors в данных теперь отвечает за группировку. */
  var TOPN=12;
  var main=works.filter(function(w){return !w.kors;});
  var expert=works.filter(function(w){return !!w.kors;});
  main.slice(0,TOPN).forEach(function(w){put(top,w);});
  main.slice(TOPN).forEach(function(w){put(rest,w);});
  if(exp){ expert.forEach(function(w){put(exp,w);}); }
  var cntEl=more.querySelector('.kgald__count'); if(cntEl){ cntEl.textContent='+'+Math.max(0,main.length-TOPN); }
  var loaded=false, mt=more.querySelector('.kgald__mtext');
  more.addEventListener('click',function(){
    if(!box.classList.contains('open')){
      box.classList.add('open'); box.style.maxHeight=box.scrollHeight+'px';
      setTimeout(function(){if(box.classList.contains('open'))box.style.maxHeight='none';},600);
      more.classList.add('is-open'); mt.textContent='Свернуть';
    }else{
      box.style.maxHeight=box.scrollHeight+'px';
      requestAnimationFrame(function(){box.style.maxHeight='0px';box.classList.remove('open');});
      more.classList.remove('is-open'); mt.textContent='Смотреть все работы';
    }
  });
  window.addEventListener('resize',function(){if(box.classList.contains('open'))box.style.maxHeight='none';});

  /* фильтр по услугам: чистый JS, отбор по data-tags */
  var fwrap=document.getElementById('kgaldFilter'), empty=document.getElementById('kgaldEmpty'), morewrap=more.parentNode;
  function loadRest(){ /* KORS: пачкой больше не грузим - src ставит IntersectionObserver по мере прокрутки. */ }
  function setBox(open){
    if(open){ loadRest(); box.classList.add('open'); box.style.maxHeight='none'; }
    else { box.classList.remove('open'); box.style.maxHeight='0px'; }
  }
  if(fwrap){
    fwrap.addEventListener('click',function(e){
      var b=e.target.closest?e.target.closest('.kgald__fbtn'):null;
      if(!b) return;
      var f=b.getAttribute('data-f'), all=(f==='all'), shown=0, restShown=0, expShown=0;
      fwrap.querySelectorAll('.kgald__fbtn').forEach(function(x){ x.classList.toggle('is-active', x===b); });
      [top,rest,exp].filter(Boolean).forEach(function(grid){
        grid.querySelectorAll('.kgald__card').forEach(function(c){
          var m = all || ((' '+(c.getAttribute('data-tags')||'')+' ').indexOf(' '+f+' ')>-1);
          if(m){
            shown++; if(grid===rest) restShown++; if(grid===exp) expShown++;
            c.style.display='';
            void c.offsetWidth;
            c.classList.remove('is-off');
          } else {
            c.classList.add('is-off');
            setTimeout(function(){ if(c.classList.contains('is-off')) c.style.display='none'; },260);
          }
        });
      });
      if(all){
        setBox(false); morewrap.style.display='';
        more.classList.remove('is-open'); mt.textContent='Смотреть все работы';
      } else {
        setBox(restShown>0); morewrap.style.display='none';
      }
      if(expwrap) expwrap.style.display=(expShown>0)?'':'none';
      if(empty) empty.classList.toggle('on', shown===0);
    });
  }
})();
</script>

rec2663636801 МОБИЛКА (22111 симв.)

<!-- ===== KORS · НАШИ РАБОТЫ · МОБИЛКА · блок T123. Показывать ТОЛЬКО на телефоне. ===== -->
<div class="kgalm">
  <div class="kgalm__head">
    <div class="kgalm__eyebrow">- НАШИ РАБОТЫ</div>
    <h2 class="kgalm__title">460+ проектов: найдите свою отрасль.</h2>
    <div class="kgalm__sub">Сфера, формат и срок по каждому проекту. «Смотреть полное видео» - на весь экран.</div>
  </div>
  <div class="kgalm__filter" id="kgalmFilter" aria-label="Фильтр работ по услугам">
    <button type="button" class="kgalm__fbtn is-active" data-f="all">Все</button>
    <button type="button" class="kgalm__fbtn" data-f="video">Видео</button>
    <button type="button" class="kgalm__fbtn" data-f="site">Сайты</button>
    <button type="button" class="kgalm__fbtn" data-f="presentation">Презентации</button>
    <button type="button" class="kgalm__fbtn" data-f="brand">Фирменный стиль</button>
    <button type="button" class="kgalm__fbtn" data-f="ads">Реклама</button>
  </div>
  <div class="kgalm__col" id="kgalmTop"></div>
  <div class="kgalm__hidden" id="kgalmHidden"><div class="kgalm__col" id="kgalmRest"></div></div>
  <div class="kgalm__empty" id="kgalmEmpty">По этой услуге в подборке пока нет проектов.</div>
  <div class="kgalm__morewrap"><button class="kgalm__more" id="kgalmMore"><span class="kgalm__mtext">Смотреть ещё наши работы</span> <span class="kgalm__count">+15</span></button></div>
    <div class="kgalm__group" id="kgalmExpWrap">
    <div class="kgalm__ghead">
      <div class="kgalm__eyebrow">- ГОВОРИМ О ВИДЕО</div>
      <h3 class="kgalm__gtitle">Экспертные ролики студии</h3>
      <div class="kgalm__gsub">Наш собственный контент, не клиентские заказы: как устроен продакшен, из чего складывается цена и что делает видео рабочим инструментом.</div>
    </div>
    <div class="kgalm__col" id="kgalmExp"></div>
  </div>
  <div class="kgalm__lb" id="kgalmLb"><div class="kgalm__lbbd"></div><div class="kgalm__lbbox"><button class="kgalm__lbx" id="kgalmLbx">×</button><div class="kgalm__lbframe"><iframe id="kgalmLbIframe" allow="autoplay; fullscreen; encrypted-media; picture-in-picture" allowfullscreen></iframe></div></div></div>
</div>
<style>
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Unbounded:wght@400;600;700;800&display=swap');
.kgalm{--bg:#0C0C0E;--raise:#141416;--card:#1B1B1F;--border:#2A2A2E;--text:#F5F3EF;--muted:#9A9A9A;--faint:#6a6a6e;--accent:#6D5DFB;--glow:rgba(109,93,251,.14);
  box-sizing:border-box;background:var(--bg);color:var(--text);font-family:'Manrope',Arial,sans-serif;-webkit-font-smoothing:antialiased;padding:56px 20px 64px;}
.kgalm *{box-sizing:border-box;margin:0;padding:0;}
.kgalm__head{margin:0 auto 30px;text-align:center;}
.kgalm__eyebrow{font-family:'Unbounded';font-size:11px;letter-spacing:.14em;color:var(--accent);margin-bottom:12px;}
.kgalm__title{font-family:'Unbounded';font-weight:700;font-size:26px;letter-spacing:-.02em;margin-bottom:12px;line-height:1.15;}
.kgalm__sub{color:var(--muted);font-size:14px;line-height:1.5;max-width:340px;margin:0 auto;}
.kgalm__col{display:flex;flex-direction:column;gap:18px;}
.kgalm__card{background:var(--raise);border:1px solid var(--border);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;}
.kgalm__video{position:relative;width:100%;aspect-ratio:16/9;background:#000;}
.kgalm__video iframe{position:absolute;inset:0;width:100%;height:100%;border:none;pointer-events:none;}
.kgalm__body{padding:18px 18px 20px;display:flex;flex-direction:column;}
.kgalm__name{font-family:'Unbounded';font-weight:700;font-size:18px;margin-bottom:9px;letter-spacing:-.01em;}
.kgalm__meta{display:flex;flex-direction:column;gap:5px;margin-bottom:16px;}
.kgalm__row{font-size:13px;color:var(--muted);line-height:1.4;}
.kgalm__row b{color:var(--text);font-weight:600;}
.kgalm__full--nolink{cursor:default}
.kgalm__full{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:transparent;border:1px solid var(--border);color:var(--text);font-family:'Manrope';font-weight:700;font-size:14px;padding:13px 18px;border-radius:9px;cursor:pointer;width:100%;}
.kgalm__full svg{width:15px;height:15px;flex:none;}
.kgalm__hidden{max-height:0;overflow:hidden;opacity:0;transition:max-height .55s ease,opacity .4s ease,margin-top .4s ease;margin-top:0;}
.kgalm__hidden.open{opacity:1;margin-top:18px;}
.kgalm__morewrap{margin-top:28px;}
.kgalm__more{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;background:var(--accent);color:#fff;font-family:'Manrope';font-weight:700;font-size:15px;padding:16px 24px;border-radius:9px;border:none;cursor:pointer;}
.kgalm__count{font-family:'Unbounded';font-size:12px;background:rgba(0,0,0,.18);padding:3px 8px;border-radius:20px;}
.kgalm__more.is-open .kgalm__count{display:none;}
.kgalm__lb{position:fixed;inset:0;z-index:99999;display:none;align-items:center;justify-content:center;padding:16px;}
.kgalm__lb.open{display:flex;}
.kgalm__lbbd{position:absolute;inset:0;background:rgba(4,4,6,.92);}
.kgalm__lbbox{position:relative;width:100%;}
.kgalm__lbframe{position:relative;width:100%;aspect-ratio:16/9;background:#000;border-radius:12px;overflow:hidden;border:1px solid var(--border);}
.kgalm__lbframe iframe{position:absolute;inset:0;width:100%;height:100%;border:none;}
.kgalm__lbx{position:absolute;top:-44px;right:0;width:38px;height:38px;border-radius:9px;background:var(--raise);border:1px solid var(--border);color:var(--text);font-size:22px;line-height:1;cursor:pointer;}
.kgalm__filter{display:flex;flex-wrap:nowrap;gap:8px;margin:0 -20px 22px;padding:0 20px 2px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;}
.kgalm__filter::-webkit-scrollbar{display:none;}
.kgalm__fbtn{flex:none;background:transparent;border:1px solid var(--border);color:var(--muted);font-family:'Manrope',Arial,sans-serif;font-weight:600;font-size:13px;padding:9px 15px;border-radius:20px;cursor:pointer;white-space:nowrap;transition:.2s;}
.kgalm__fbtn.is-active{background:var(--accent);border-color:var(--accent);color:#fff;}
.kgalm__tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:11px;}
.kgalm__tag{font-family:'Manrope',Arial,sans-serif;font-weight:600;font-size:8px;line-height:1;text-transform:uppercase;letter-spacing:.14em;color:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.22);border-radius:4px;padding:5px 8px;white-space:nowrap;}
.kgalm__desc{font-size:12px;line-height:1.5;color:var(--muted);margin-bottom:13px;}
.kgalm__card{transition:opacity .25s ease,transform .25s ease;}
.kgalm__card.is-off{opacity:0;transform:translateY(6px);}
.kgalm__empty{text-align:center;color:var(--muted);font-size:14px;padding:28px 0;display:none;}
.kgalm__empty.on{display:block;}
@media (min-width:481px){ .kgalm{display:none;} }
/* KORS: экспертные ролики вынесены в отдельную группу со своим заголовком, поэтому плашка на карточке больше не нужна. */
.kgalm__group{margin-top:54px;}
.kgalm__ghead{margin:0 auto 22px;text-align:center;}
.kgalm__gtitle{font-family:'Unbounded';font-weight:700;font-size:22px;letter-spacing:-.02em;margin-bottom:10px;line-height:1.2;}
.kgalm__gsub{color:var(--muted);font-size:13px;line-height:1.5;max-width:340px;margin:0 auto;}
</style>
<script>
(function(){
  var SLUG={'Видео':'video','Фотосъёмка':'photo','Сайт':'site','Презентация':'presentation','Фирменный стиль':'brand','Реклама':'ads','Дизайн':'design','Трансляция':'live','Продюсирование':'producing'};
  var works=[
    {id:'pd95FJSRFhF27W4YX4ioJJ', full:'3ZsxHkdEuHUubxSAQZDRyG', name:'Одоевские консервы - фильм о заводе', tags:['Видео','Фирменный стиль'], desc:'Показали производство изнутри: цеха, линии, контроль качества. Видео работает на сайте, в переговорах с сетями и на выставках.', alt:'Фильм о заводе Одоевские консервы: цеха, линии и контроль качества, мобильная версия'},
    {id:'iPcFsLF3eYfDYTauhcgjZj', full:'fv7FAnLfbLaDaNJLtSQ74H', name:'Вистекс', sphere:'производство, предприятие', format:'презентационный ролик', term:'15 дней', tags:['Видео','Дизайн'], desc:'Ролик о заводе: восемь направлений производства за три минуты. Дизайн email-письма со встроенным видео для коммерческих предложений.', alt:'Видео о производстве для завода Вистекс, мобильная версия'},
    {id:'xgBCJrU3Fy9CtKDXR9R23S', full:'0GfobL6RnAzhPeiopXjNHS', name:'Invoicebox - о компании', sphere:'финансовые технологии (FinTech)', format:'презентационный ролик о компании', term:'6 дней', tags:['Видео','Реклама'], desc:'Имиджевый ролик о платёжном сервисе: чем занимается компания и какие задачи бизнеса закрывает.', alt:'Имиджевый ролик о платёжном сервисе Invoicebox, мобильная версия'},
    {id:'sRSLqBbjkRWyn31BrY6iny', full:'mZiwnH9uZAdc15hhRsqPvB', name:'Одоевские консервы - термостабильные начинки', tags:['Видео'], desc:'Продуктовый ролик о линейке: как начинки ведут себя при выпечке и что это даёт производителю.', alt:'Продуктовый ролик о термостабильных начинках Одоевские консервы, мобильная версия'},
    {id:'5zMvPKfeuDf9N7h7P8KuVe', full:'ePXSSA9qFiEgA5WYRdd4FP', name:'Алтай Серикбай - съёмки для личного бренда', tags:['Видео'], desc:'Снимаем контент для эксперта по личностному развитию: студийные выпуски, разговорные форматы, съёмки на ретритах. За время работы - больше десяти роликов.', alt:'Съёмки для личного бренда эксперта по личностному развитию Алтая Серикбая, мобильная версия'},
    {id:'bKeihzPbnEbXZarkMcYQZj', full:'6ivtiXKAcQj4dVJN8H1YWs', name:'MediaLive - отчётный ролик с выставки', tags:['Видео','Реклама'], desc:'Сняли отчётное видео с отраслевого события. Организаторы используют его на сайте и в рекламе следующего сезона.', alt:'Отчётный ролик с отраслевой выставки для MediaLive, мобильная версия'},
    {id:'6JcPdvqUchXCmzscbTqaos', full:'sRyZwPm3BS9CVspVi2sLx3', name:'Одоевские консервы - нетермостабильные начинки', tags:['Видео'], desc:'Второй ролик линейки: назначение, состав, применение в готовых изделиях.', alt:'Продуктовый ролик о нетермостабильных начинках Одоевские консервы, мобильная версия'},
    {id:'35XkXms5VN3RLJcYsgWsnD', full:'2FXfjS6hYEvLkWNKUveoBx', name:'Invoicebox - оплата в белорусских рублях', tags:['Видео'], desc:'Объясняющий ролик о выходе платёжного сервиса на рынок Беларуси: как принимать оплату в белорусских рублях.', alt:'Ролик об оплате в белорусских рублях в платёжном сервисе Invoicebox, мобильная версия'},
    {id:'8QbWRspZgkLTicEiQpp9su', full:'8QbWRspZgkLTicEiQpp9su', name:'STROBBS - промо зимней коллекции', tags:['Видео','Реклама'], desc:'Проморолик показа новой зимней коллекции российского бренда обуви и одежды.', alt:'Проморолик показа зимней коллекции бренда обуви и одежды STROBBS, мобильная версия'},
    {id:'vNYi5w7HiQevkdBbPmQ3CR', full:'vNYi5w7HiQevkdBbPmQ3CR', name:'Ювелирный лофт GOLD - ролик о компании', tags:['Видео'], desc:'Рассказали о компании и о том, чем она занимается.', alt:'Ролик о компании для ювелирного лофта GOLD, мобильная версия'},
    {id:'wLtMKZCpf75eYEWMXPEPZY', full:'7Kxs8xzVfCDLtyuG5puNN1', name:'Рокстар', sphere:'медиа', format:'музыкальный клип', term:'12 дней', tags:['Видео','Дизайн'], desc:'Три клипа и обложки для музыкального проекта.', alt:'Музыкальные клипы для проекта Рокстар, мобильная версия'},
    {id:'88SCanh4aPU83UFBmThiVa', full:'mJqjXaKQBrdbvirxUTHLLh', name:'Rockstar - клип «На дне»', tags:['Видео'], desc:'Музыкальный клип для артиста.', alt:'Музыкальный клип На дне для артиста Rockstar, мобильная версия'},
    {id:'qAV5wXg5oHKKcY6tbgysZd', full:'okapERMYWfdoGagPRmo7uC', name:'Rockstar - клип «Самая грустная песня»', tags:['Видео'], desc:'Первый клип, который мы сняли для артиста.', alt:'Музыкальный клип Самая грустная песня для артиста Rockstar, мобильная версия'},
    {id:'7akHJzKdcoSrPiHtRbRBqk', full:'7akHJzKdcoSrPiHtRbRBqk', name:'Invoicebox - интернет-магазины за пару кликов', tags:['Видео'], desc:'Продуктовый ролик о конструкторе интернет-магазинов внутри сервиса.', alt:'Ролик о конструкторе интернет-магазинов в сервисе Invoicebox, мобильная версия'},
    {id:'b66cpVCFFFVycfDvLFXFR3', full:'b66cpVCFFFVycfDvLFXFR3', name:'Invoicebox - как выставить счёт за пару кликов', tags:['Видео'], desc:'Видеоинструкция для пользователей сервиса: выставление счёта по шагам.', alt:'Видеоинструкция по выставлению счёта в сервисе Invoicebox, мобильная версия'},
    {id:'uqJ79iyVPcqN1ZtTtjnkAv', name:'GosObmen', sphere:'финансовые услуги', format:'рекламный ролик', term:'3 дня', tags:['Видео','Сайт','Дизайн'], desc:'Рекламные ролики, тексты и сайт. Собрали скрипт для отдела продаж.', alt:'Рекламный ролик и сайт для сервиса Гособмен, мобильная версия'},
    {id:'gHMF2zBsAdSdbcEH9wSZKh', name:'Редакция ЭКСМО', sphere:'издательский бизнес', format:'съёмка трейлера по сюжету книги', term:'9 дней', tags:['Видео','Дизайн'], desc:'Трейлер книги и афиша для издательства.', alt:'Книжный трейлер для издательства Редакция ЭКСМО, мобильная версия'},
    {id:'8YSeQnzXxmpkmo7uNNcLrF', name:'YouTube-шоу', sphere:'медиа', format:'съёмка выпусков', term:'14 дней', tags:['Видео','Продюсирование','Реклама'], desc:'Продюсирование и режиссура шоу: съёмка выпусков и рекламное сопровождение.', alt:'Съёмка выпусков YouTube-шоу, мобильная версия'},
    {id:'bZ8JyozhtKdSDiy5xjLoVr', name:'Ресторан Rumi / «ЗНАТЬ»', sphere:'ресторанный бизнес, мероприятия', format:'видео-отчёт о мероприятии', term:'2 дня', tags:['Видео','Трансляция','Презентация'], desc:'Съёмка мероприятий, прямая трансляция и презентации для ресторана.', alt:'Съёмка мероприятия и трансляция для ресторана Rumi, мобильная версия'},
    {id:'uiVqp8dWpzNoBt2GweBLs9', name:'Новая Формация', sphere:'организация, бизнес', format:'презентационный ролик', term:'4 дня', tags:['Видео','Дизайн'], desc:'Презентационный ролик, афиша и ведение контента.', alt:'Презентационный ролик для проекта Новая Формация, мобильная версия'},
    {id:'dsqVruz3QkCKQESGiTUsVR', full:'dsqVruz3QkCKQESGiTUsVR', name:'Твой продакшен тебя обманывает', tags:['Видео'], kors:true, alt:'Экспертное видео KORS: почему продакшен может обманывать заказчика, мобильная версия'},
    {id:'uittTC7uyz9hv4HDirTBAG', full:'uittTC7uyz9hv4HDirTBAG', name:'Видео - это не украшение для бизнеса', tags:['Видео'], kors:true, alt:'Экспертное видео KORS о том, зачем бизнесу видео, мобильная версия'},
    {id:'aG3Qkc4VfoCcgtJLz6ivbE', full:'aG3Qkc4VfoCcgtJLz6ivbE', name:'Как сэкономить на видеоролике', tags:['Видео'], kors:true, alt:'Экспертное видео KORS о том, как сэкономить на съёмке ролика, мобильная версия'},
    {id:'4pzsMBSzheH3Sarx4UFHMd', full:'4pzsMBSzheH3Sarx4UFHMd', name:'Как сделать продающее видео', tags:['Видео'], kors:true, alt:'Экспертное видео KORS о том, как сделать продающее видео, мобильная версия'},
    {id:'eCGHEdUFdSyEjCBXxcsUSC', name:'KORS Production', sphere:'создание контента', format:'актуальные работы', term:'2025-й год', tags:['Видео','Продюсирование'], desc:'Шоурил студии: съёмки на производствах и коммерческие проекты разных лет.', alt:'Актуальные работы студии KORS Production, мобильная версия'}
  ];
  var FS='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="5 3 19 12 5 21 5 3"/></svg>';
  var lb=document.getElementById('kgalmLb'), lbf=document.getElementById('kgalmLbIframe');
  function openLb(id){ lbf.src='https://kinescope.io/embed/'+id+'?autoplay=true'; lb.classList.add('open'); }
  function closeLb(){ lb.classList.remove('open'); lbf.src=''; }
  document.getElementById('kgalmLbx').addEventListener('click',closeLb);
  lb.querySelector('.kgalm__lbbd').addEventListener('click',closeLb);
  function makeCard(w, defer){
    var card=document.createElement('div'); card.className='kgalm__card';
    card.setAttribute('data-tags',(w.tags||[]).map(function(t){return SLUG[t]||'';}).join(' '));
    var ttl=(w.alt||w.name).replace(/"/g,'&quot;');
    var q='?autoplay=true&muted=true&loop=true&controls=false&playsInline=true&background=true';
    var ift= defer ? '<iframe data-src="https://kinescope.io/embed/'+w.id+q+'" title="'+ttl+'" aria-label="'+ttl+'" allow="autoplay; fullscreen; encrypted-media; picture-in-picture" allowfullscreen></iframe>'
                   : '<iframe loading="lazy" src="https://kinescope.io/embed/'+w.id+q+'" title="'+ttl+'" aria-label="'+ttl+'" allow="autoplay; fullscreen; encrypted-media; picture-in-picture" allowfullscreen></iframe>';
    var tagsHtml=(w.tags&&w.tags.length)?'<div class="kgalm__tags">'+w.tags.map(function(t){return '<span class="kgalm__tag">'+t+'</span>';}).join('')+'</div>':'';
    var descHtml=w.desc?'<p class="kgalm__desc">'+w.desc+'</p>':'';
    var metaHtml='';
    if(w.sphere||w.format||w.term){ metaHtml='<div class="kgalm__meta">'+(w.sphere?'<div class="kgalm__row"><b>Сфера:</b> '+w.sphere+'</div>':'')+(w.format?'<div class="kgalm__row"><b>Формат:</b> '+w.format+'</div>':'')+(w.term?'<div class="kgalm__row"><b>Срок:</b> '+w.term+'</div>':'')+'</div>'; }
    card.innerHTML='<div class="kgalm__video">'+ift+'</div><div class="kgalm__body"><h3 class="kgalm__name">'+w.name+'</h3>'+tagsHtml+descHtml+metaHtml+'<button class="kgalm__full'+(w.full?'':' kgalm__full--nolink')+'" '+(w.full?'':'aria-disabled="true"')+'>'+FS+'Смотреть полное видео</button></div>';
    /* KORS: у карточек без поля full полной версии ролика пока нет. Кнопка остаётся видимой, но клик отключён, чтобы не открывался тот же короткий ролик. Как только появится ссылка, добавь в объект работы full:'ID_полного_ролика' - кнопка заработает сама, ничего больше менять не нужно. */
    if(w.full){ card.querySelector('.kgalm__full').addEventListener('click',function(){ openLb(w.full); }); }
    return card;
  }
  var top=document.getElementById('kgalmTop'),rest=document.getElementById('kgalmRest'),box=document.getElementById('kgalmHidden'),more=document.getElementById('kgalmMore');
  var exp=document.getElementById('kgalmExp'), expwrap=document.getElementById('kgalmExpWrap');
  if(!top||!rest||!box||!more)return;
  /* KORS: превью грузятся не пачкой. Плеер получает src только когда карточка подходит к видимой области (запас 250px). Пока карточка спрятана под кнопкой (max-height:0) или скрыта фильтром (display:none), она не пересекается с экраном и ролик не стартует. */
  var io=('IntersectionObserver' in window)?new IntersectionObserver(function(es,ob){
    es.forEach(function(e){
      if(!e.isIntersecting) return;
      var f=e.target.querySelector('iframe[data-src]');
      if(f){ f.src=f.getAttribute('data-src'); f.removeAttribute('data-src'); }
      ob.unobserve(e.target);
    });
  },{root:null,rootMargin:'250px 0px',threshold:0.01}):null;
  function watch(c){
    if(io){ io.observe(c); return; }
    var f=c.querySelector('iframe[data-src]');
    if(f){ f.src=f.getAttribute('data-src'); f.removeAttribute('data-src'); }
  }
  function put(grid,w){ var c=makeCard(w,true); grid.appendChild(c); watch(c); }
  /* KORS: порог показа на телефоне - 6 карточек (одна колонка, 12 было бы простынёй), остальные под кнопкой. Экспертные ролики студии идут отдельной группой ниже, флаг kors в данных теперь отвечает за группировку. */
  var TOPN=6;
  var main=works.filter(function(w){return !w.kors;});
  var expert=works.filter(function(w){return !!w.kors;});
  main.slice(0,TOPN).forEach(function(w){put(top,w);});
  main.slice(TOPN).forEach(function(w){put(rest,w);});
  if(exp){ expert.forEach(function(w){put(exp,w);}); }
  var cntEl=more.querySelector('.kgalm__count'); if(cntEl){ cntEl.textContent='+'+Math.max(0,main.length-TOPN); }
  var loaded=false, mt=more.querySelector('.kgalm__mtext');
  more.addEventListener('click',function(){
    if(!box.classList.contains('open')){
      box.classList.add('open'); box.style.maxHeight=box.scrollHeight+'px';
      setTimeout(function(){if(box.classList.contains('open'))box.style.maxHeight='none';},600);
      more.classList.add('is-open'); mt.textContent='Свернуть';
    }else{
      box.style.maxHeight=box.scrollHeight+'px';
      requestAnimationFrame(function(){box.style.maxHeight='0px';box.classList.remove('open');});
      more.classList.remove('is-open'); mt.textContent='Смотреть ещё наши работы';
    }
  });
  window.addEventListener('resize',function(){if(box.classList.contains('open'))box.style.maxHeight='none';});

  /* фильтр по услугам: чистый JS, отбор по data-tags */
  var fwrap=document.getElementById('kgalmFilter'), empty=document.getElementById('kgalmEmpty'), morewrap=more.parentNode;
  function loadRest(){ /* KORS: пачкой больше не грузим - src ставит IntersectionObserver по мере прокрутки. */ }
  function setBox(open){
    if(open){ loadRest(); box.classList.add('open'); box.style.maxHeight='none'; }
    else { box.classList.remove('open'); box.style.maxHeight='0px'; }
  }
  if(fwrap){
    fwrap.addEventListener('click',function(e){
      var b=e.target.closest?e.target.closest('.kgalm__fbtn'):null;
      if(!b) return;
      var f=b.getAttribute('data-f'), all=(f==='all'), shown=0, restShown=0, expShown=0;
      fwrap.querySelectorAll('.kgalm__fbtn').forEach(function(x){ x.classList.toggle('is-active', x===b); });
      if(b.scrollIntoView) b.scrollIntoView({block:'nearest',inline:'nearest'});
      [top,rest,exp].filter(Boolean).forEach(function(grid){
        grid.querySelectorAll('.kgalm__card').forEach(function(c){
          var m = all || ((' '+(c.getAttribute('data-tags')||'')+' ').indexOf(' '+f+' ')>-1);
          if(m){
            shown++; if(grid===rest) restShown++; if(grid===exp) expShown++;
            c.style.display='';
            void c.offsetWidth;
            c.classList.remove('is-off');
          } else {
            c.classList.add('is-off');
            setTimeout(function(){ if(c.classList.contains('is-off')) c.style.display='none'; },260);
          }
        });
      });
      if(all){
        setBox(false); morewrap.style.display='';
        more.classList.remove('is-open'); mt.textContent='Смотреть ещё наши работы';
      } else {
        setBox(restShown>0); morewrap.style.display='none';
      }
      if(expwrap) expwrap.style.display=(expShown>0)?'':'none';
      if(empty) empty.classList.toggle('on', shown===0);
    });
  }
})();
</script>

rec2663623901 ДЕСКТОП (22583 симв.)

<!-- ===== KORS · НАШИ РАБОТЫ · ДЕСКТОП · блок T123. Показывать ТОЛЬКО на компьютере. ===== -->
<div class="kgald">
  <div class="kgald__head">
    <div class="kgald__eyebrow">- НАШИ РАБОТЫ</div>
    <h2 class="kgald__title">460+ проектов: найдите свою отрасль.</h2>
    <div class="kgald__sub">Сфера, формат и срок по каждому проекту. Нажми «Смотреть полное видео» - откроется на весь экран.</div>
  </div>
  <div class="kgald__filter" id="kgaldFilter" aria-label="Фильтр работ по услугам">
      <button type="button" class="kgald__fbtn is-active" data-f="all">Все</button>
      <button type="button" class="kgald__fbtn" data-f="video">Видео</button>
      <button type="button" class="kgald__fbtn" data-f="site">Сайты</button>
      <button type="button" class="kgald__fbtn" data-f="presentation">Презентации</button>
      <button type="button" class="kgald__fbtn" data-f="brand">Фирменный стиль</button>
      <button type="button" class="kgald__fbtn" data-f="ads">Реклама</button>
    </div>
    <div class="kgald__grid" id="kgaldTop"></div>
  <div class="kgald__hidden" id="kgaldHidden"><div class="kgald__grid" id="kgaldRest"></div></div>
  <div class="kgald__empty" id="kgaldEmpty">По этой услуге в подборке пока нет проектов.</div>
    <div class="kgald__morewrap"><button class="kgald__more" id="kgaldMore"><span class="kgald__mtext">Смотреть все работы</span> <span class="kgald__count">+9</span></button></div>
    <div class="kgald__group" id="kgaldExpWrap">
    <div class="kgald__ghead">
      <div class="kgald__eyebrow">- ГОВОРИМ О ВИДЕО</div>
      <h3 class="kgald__gtitle">Экспертные ролики студии</h3>
      <div class="kgald__gsub">Наш собственный контент, не клиентские заказы: как устроен продакшен, из чего складывается цена и что делает видео рабочим инструментом.</div>
    </div>
    <div class="kgald__grid" id="kgaldExp"></div>
  </div>
  <div class="kgald__lb" id="kgaldLb"><div class="kgald__lbbd"></div><div class="kgald__lbbox"><button class="kgald__lbx" id="kgaldLbx">×</button><div class="kgald__lbframe"><iframe id="kgaldLbIframe" allow="autoplay; fullscreen; encrypted-media; picture-in-picture" allowfullscreen></iframe></div></div></div>
</div>
<style>
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Unbounded:wght@400;600;700;800&display=swap');
.kgald{--bg:#0C0C0E;--raise:#141416;--card:#1B1B1F;--border:#2A2A2E;--text:#F5F3EF;--muted:#9A9A9A;--faint:#6a6a6e;--accent:#6D5DFB;--glow:rgba(109,93,251,.14);
  box-sizing:border-box;background:var(--bg);color:var(--text);font-family:'Manrope',Arial,sans-serif;-webkit-font-smoothing:antialiased;padding:80px 5vw 90px;}
.kgald *{box-sizing:border-box;margin:0;padding:0;}
.kgald__head{max-width:1240px;margin:0 auto 44px;text-align:center;}
.kgald__eyebrow{font-family:'Unbounded';font-size:12px;letter-spacing:.14em;color:var(--accent);margin-bottom:14px;}
.kgald__title{font-family:'Unbounded';font-weight:700;font-size:clamp(30px,3.4vw,48px);letter-spacing:-.02em;margin-bottom:14px;}
.kgald__sub{color:var(--muted);font-size:16px;line-height:1.5;max-width:560px;margin:0 auto;}
.kgald__grid{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.kgald__card{background:var(--raise);border:1px solid var(--border);border-radius:16px;overflow:hidden;transition:.25s;display:flex;flex-direction:column;}
.kgald__card:hover{border-color:rgba(109,93,251,.5);transform:translateY(-3px);box-shadow:0 16px 40px rgba(0,0,0,.4);}
.kgald__video{position:relative;width:100%;aspect-ratio:16/9;background:#000;}
.kgald__video iframe{position:absolute;inset:0;width:100%;height:100%;border:none;pointer-events:none;}
.kgald__body{padding:20px 20px 22px;display:flex;flex-direction:column;flex:1;}
.kgald__name{font-family:'Unbounded';font-weight:700;font-size:20px;margin-bottom:10px;letter-spacing:-.01em;}
.kgald__meta{display:flex;flex-direction:column;gap:6px;margin-bottom:18px;}
.kgald__row{font-size:14px;color:var(--muted);line-height:1.4;}
.kgald__row b{color:var(--text);font-weight:600;}
.kgald__full--nolink{cursor:default}
.kgald__full{margin-top:auto;display:inline-flex;align-items:center;gap:8px;align-self:flex-start;background:transparent;border:1px solid var(--border);color:var(--text);font-family:'Manrope';font-weight:700;font-size:14px;padding:12px 18px;border-radius:9px;cursor:pointer;transition:.2s;}
.kgald__full:hover{border-color:var(--accent);color:var(--accent);}
.kgald__full svg{width:15px;height:15px;flex:none;}
.kgald__hidden{max-width:1240px;margin:0 auto;max-height:0;overflow:hidden;opacity:0;transition:max-height .55s ease,opacity .4s ease,margin-top .4s ease;margin-top:0;}
.kgald__hidden.open{opacity:1;margin-top:22px;}
.kgald__morewrap{text-align:center;margin-top:40px;}
.kgald__more{display:inline-flex;align-items:center;gap:10px;background:var(--accent);color:#fff;font-family:'Manrope';font-weight:700;font-size:15px;padding:16px 30px;border-radius:9px;border:none;cursor:pointer;transition:.25s;}
.kgald__more:hover{transform:translateY(-2px);box-shadow:0 10px 30px var(--glow);}
.kgald__count{font-family:'Unbounded';font-size:12px;background:rgba(0,0,0,.18);padding:3px 8px;border-radius:20px;}
.kgald__more.is-open .kgald__count{display:none;}
.kgald__lb{position:fixed;inset:0;z-index:99999;display:none;align-items:center;justify-content:center;padding:40px;}
.kgald__lb.open{display:flex;}
.kgald__lbbd{position:absolute;inset:0;background:rgba(4,4,6,.9);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);}
.kgald__lbbox{position:relative;width:min(1100px,100%);}
.kgald__lbframe{position:relative;width:100%;aspect-ratio:16/9;background:#000;border-radius:12px;overflow:hidden;border:1px solid var(--border);}
.kgald__lbframe iframe{position:absolute;inset:0;width:100%;height:100%;border:none;}
.kgald__lbx{position:absolute;top:-46px;right:0;width:38px;height:38px;border-radius:9px;background:var(--raise);border:1px solid var(--border);color:var(--text);font-size:22px;line-height:1;cursor:pointer;}
.kgald__lbx:hover{border-color:var(--accent);color:var(--accent);}
.kgald__filter{max-width:1240px;margin:0 auto 26px;display:flex;flex-wrap:nowrap;gap:8px;justify-content:center;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;padding-bottom:2px;}
.kgald__filter::-webkit-scrollbar{display:none;}
.kgald__fbtn{flex:none;background:transparent;border:1px solid var(--border);color:var(--muted);font-family:'Manrope',Arial,sans-serif;font-weight:600;font-size:13px;padding:9px 16px;border-radius:20px;cursor:pointer;transition:.2s;white-space:nowrap;}
.kgald__fbtn:hover{border-color:rgba(109,93,251,.5);color:var(--text);}
.kgald__fbtn.is-active{background:var(--accent);border-color:var(--accent);color:#fff;}
.kgald__tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px;}
.kgald__tag{font-family:'Manrope',Arial,sans-serif;font-weight:600;font-size:9px;line-height:1;text-transform:uppercase;letter-spacing:.14em;color:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.22);border-radius:4px;padding:5px 8px;white-space:nowrap;}
.kgald__desc{font-size:12px;line-height:1.5;color:var(--muted);margin-bottom:14px;}
.kgald__card.is-off{opacity:0;transform:translateY(6px);}
.kgald__empty{max-width:1240px;margin:0 auto;text-align:center;color:var(--muted);font-size:15px;padding:34px 0;display:none;}
.kgald__empty.on{display:block;}
@media (max-width:900px){ .kgald__grid{grid-template-columns:repeat(2,1fr);} .kgald__filter{justify-content:flex-start;} }
@media (max-width:480px){ .kgald{display:none;} }
#rec2663623901 .kgald__count{color:#fff;background:rgba(0,0,0,.32);}
/* KORS: экспертные ролики вынесены в отдельную группу со своим заголовком, поэтому плашка на карточке больше не нужна. */
.kgald__group{margin-top:88px;}
.kgald__ghead{max-width:1240px;margin:0 auto 34px;text-align:center;}
.kgald__gtitle{font-family:'Unbounded';font-weight:700;font-size:clamp(24px,2.4vw,34px);letter-spacing:-.02em;margin-bottom:12px;}
.kgald__gsub{color:var(--muted);font-size:15px;line-height:1.5;max-width:560px;margin:0 auto;}
</style>
<script>
(function(){
  var SLUG={'Видео':'video','Фотосъёмка':'photo','Сайт':'site','Презентация':'presentation','Фирменный стиль':'brand','Реклама':'ads','Дизайн':'design','Трансляция':'live','Продюсирование':'producing'};
  var works=[
    {id:'pd95FJSRFhF27W4YX4ioJJ', full:'3ZsxHkdEuHUubxSAQZDRyG', name:'Одоевские консервы - фильм о заводе', tags:['Видео','Фирменный стиль'], desc:'Показали производство изнутри: цеха, линии, контроль качества. Видео работает на сайте, в переговорах с сетями и на выставках.', alt:'Фильм о заводе Одоевские консервы: цеха, линии и контроль качества'},
    {id:'xgBCJrU3Fy9CtKDXR9R23S', full:'0GfobL6RnAzhPeiopXjNHS', name:'Invoicebox - о компании', sphere:'финансовые технологии (FinTech)', format:'презентационный ролик о компании', term:'6 дней', tags:['Видео','Реклама'], desc:'Имиджевый ролик о платёжном сервисе: чем занимается компания и какие задачи бизнеса закрывает.', alt:'Имиджевый ролик о платёжном сервисе Invoicebox'},
    {id:'iPcFsLF3eYfDYTauhcgjZj', full:'fv7FAnLfbLaDaNJLtSQ74H', name:'Вистекс', sphere:'производство, предприятие', format:'презентационный ролик', term:'15 дней', tags:['Видео','Дизайн'], desc:'Ролик о заводе: восемь направлений производства за три минуты. Дизайн email-письма со встроенным видео для коммерческих предложений.', alt:'Видео о производстве для завода Вистекс'},
    {id:'bZ8JyozhtKdSDiy5xjLoVr', full:'caSE37WujsGB6usgZewyUt', name:'Ресторан Rumi / «ЗНАТЬ»', sphere:'ресторанный бизнес, мероприятия', format:'видео-отчёт о мероприятии', term:'2 дня', tags:['Видео','Трансляция','Презентация'], desc:'Съёмка мероприятий, прямая трансляция и презентации для ресторана.', alt:'Съёмка мероприятия и трансляция для ресторана Rumi'},
    {id:'uiVqp8dWpzNoBt2GweBLs9', full:'vF4hbgW4Umo6U4dDNUFvwv', name:'Новая Формация', sphere:'организация, бизнес', format:'презентационный ролик', term:'4 дня', tags:['Видео','Дизайн'], desc:'Презентационный ролик, афиша и ведение контента.', alt:'Презентационный ролик для проекта Новая Формация'},
    {id:'gHMF2zBsAdSdbcEH9wSZKh', full:'kfd6wYQdCh72VpRPC74Mfs', name:'Редакция ЭКСМО', sphere:'издательский бизнес', format:'съёмка трейлера по сюжету книги', term:'9 дней', tags:['Видео','Дизайн'], desc:'Трейлер книги и афиша для издательства.', alt:'Книжный трейлер для издательства Редакция ЭКСМО'},
    {id:'sRSLqBbjkRWyn31BrY6iny', full:'mZiwnH9uZAdc15hhRsqPvB', name:'Одоевские консервы - термостабильные начинки', tags:['Видео'], desc:'Продуктовый ролик о линейке: как начинки ведут себя при выпечке и что это даёт производителю.', alt:'Продуктовый ролик о термостабильных начинках Одоевские консервы'},
    {id:'uqJ79iyVPcqN1ZtTtjnkAv', full:'gznTZhdFQeZEKZnidVaTbk', name:'GosObmen', sphere:'финансовые услуги', format:'рекламный ролик', term:'3 дня', tags:['Видео','Сайт','Дизайн'], desc:'Рекламные ролики, тексты и сайт. Собрали скрипт для отдела продаж.', alt:'Рекламный ролик и сайт для сервиса Гособмен'},
    {id:'35XkXms5VN3RLJcYsgWsnD', full:'2FXfjS6hYEvLkWNKUveoBx', name:'Invoicebox - оплата в белорусских рублях', tags:['Видео'], desc:'Объясняющий ролик о выходе платёжного сервиса на рынок Беларуси: как принимать оплату в белорусских рублях.', alt:'Ролик об оплате в белорусских рублях в платёжном сервисе Invoicebox'},
    {id:'5zMvPKfeuDf9N7h7P8KuVe', full:'ePXSSA9qFiEgA5WYRdd4FP', name:'Алтай Серикбай - съёмки для личного бренда', tags:['Видео'], desc:'Снимаем контент для эксперта по личностному развитию: студийные выпуски, разговорные форматы, съёмки на ретритах. За время работы - больше десяти роликов.', alt:'Съёмки для личного бренда эксперта по личностному развитию Алтая Серикбая'},
    {id:'bKeihzPbnEbXZarkMcYQZj', full:'6ivtiXKAcQj4dVJN8H1YWs', name:'MediaLive - отчётный ролик с выставки', tags:['Видео','Реклама'], desc:'Сняли отчётное видео с отраслевого события. Организаторы используют его на сайте и в рекламе следующего сезона.', alt:'Отчётный ролик с отраслевой выставки для MediaLive'},
    {id:'8QbWRspZgkLTicEiQpp9su', full:'8QbWRspZgkLTicEiQpp9su', name:'STROBBS - промо зимней коллекции', tags:['Видео','Реклама'], desc:'Проморолик показа новой зимней коллекции российского бренда обуви и одежды.', alt:'Проморолик показа зимней коллекции бренда обуви и одежды STROBBS'},
    {id:'88SCanh4aPU83UFBmThiVa', full:'mJqjXaKQBrdbvirxUTHLLh', name:'Rockstar - клип «На дне»', tags:['Видео'], desc:'Музыкальный клип для артиста.', alt:'Музыкальный клип На дне для артиста Rockstar'},
    {id:'wLtMKZCpf75eYEWMXPEPZY', full:'7Kxs8xzVfCDLtyuG5puNN1', name:'Рокстар', sphere:'медиа', format:'музыкальный клип', term:'12 дней', tags:['Видео','Дизайн'], desc:'Три клипа и обложки для музыкального проекта.', alt:'Музыкальные клипы для проекта Рокстар'},
    {id:'qAV5wXg5oHKKcY6tbgysZd', full:'okapERMYWfdoGagPRmo7uC', name:'Rockstar - клип «Самая грустная песня»', tags:['Видео'], desc:'Первый клип, который мы сняли для артиста.', alt:'Музыкальный клип Самая грустная песня для артиста Rockstar'},
    {id:'8YSeQnzXxmpkmo7uNNcLrF', full:'43yfJckoZggrVouaMMK4zt', name:'YouTube-шоу', sphere:'медиа', format:'съёмка выпусков', term:'14 дней', tags:['Видео','Продюсирование','Реклама'], desc:'Продюсирование и режиссура шоу: съёмка выпусков и рекламное сопровождение.', alt:'Съёмка выпусков YouTube-шоу'},
    {id:'vNYi5w7HiQevkdBbPmQ3CR', full:'vNYi5w7HiQevkdBbPmQ3CR', name:'Ювелирный лофт GOLD - ролик о компании', tags:['Видео'], desc:'Рассказали о компании и о том, чем она занимается.', alt:'Ролик о компании для ювелирного лофта GOLD'},
    {id:'6JcPdvqUchXCmzscbTqaos', full:'sRyZwPm3BS9CVspVi2sLx3', name:'Одоевские консервы - нетермостабильные начинки', tags:['Видео'], desc:'Второй ролик линейки: назначение, состав, применение в готовых изделиях.', alt:'Продуктовый ролик о нетермостабильных начинках Одоевские консервы'},
    {id:'7akHJzKdcoSrPiHtRbRBqk', full:'7akHJzKdcoSrPiHtRbRBqk', name:'Invoicebox - интернет-магазины за пару кликов', tags:['Видео'], desc:'Продуктовый ролик о конструкторе интернет-магазинов внутри сервиса.', alt:'Ролик о конструкторе интернет-магазинов в сервисе Invoicebox'},
    {id:'b66cpVCFFFVycfDvLFXFR3', full:'b66cpVCFFFVycfDvLFXFR3', name:'Invoicebox - как выставить счёт за пару кликов', tags:['Видео'], desc:'Видеоинструкция для пользователей сервиса: выставление счёта по шагам.', alt:'Видеоинструкция по выставлению счёта в сервисе Invoicebox'},
    {id:'eCGHEdUFdSyEjCBXxcsUSC', full:'geGWgessLoxkUKdQ4d4e1q', name:'KORS Production', sphere:'создание контента', format:'актуальные работы', term:'2025-й год', tags:['Видео','Продюсирование'], desc:'Шоурил студии: съёмки на производствах и коммерческие проекты разных лет.', alt:'Актуальные работы студии KORS Production'},
    {id:'dsqVruz3QkCKQESGiTUsVR', full:'dsqVruz3QkCKQESGiTUsVR', name:'Твой продакшен тебя обманывает', tags:['Видео'], kors:true, alt:'Экспертное видео KORS: почему продакшен может обманывать заказчика'},
    {id:'uittTC7uyz9hv4HDirTBAG', full:'uittTC7uyz9hv4HDirTBAG', name:'Видео - это не украшение для бизнеса', tags:['Видео'], kors:true, alt:'Экспертное видео KORS о том, зачем бизнесу видео'},
    {id:'aG3Qkc4VfoCcgtJLz6ivbE', full:'aG3Qkc4VfoCcgtJLz6ivbE', name:'Как сэкономить на видеоролике', tags:['Видео'], kors:true, alt:'Экспертное видео KORS о том, как сэкономить на съёмке ролика'},
    {id:'4pzsMBSzheH3Sarx4UFHMd', full:'4pzsMBSzheH3Sarx4UFHMd', name:'Как сделать продающее видео', tags:['Видео'], kors:true, alt:'Экспертное видео KORS о том, как сделать продающее видео'}
  ];
  var FS='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="5 3 19 12 5 21 5 3"/></svg>';
  var lb=document.getElementById('kgaldLb'), lbf=document.getElementById('kgaldLbIframe');
  function openLb(id){ lbf.src='https://kinescope.io/embed/'+id+'?autoplay=true'; lb.classList.add('open'); }
  function closeLb(){ lb.classList.remove('open'); lbf.src=''; }
  document.getElementById('kgaldLbx').addEventListener('click',closeLb);
  lb.querySelector('.kgald__lbbd').addEventListener('click',closeLb);
  function makeCard(w, defer){
    var card=document.createElement('div'); card.className='kgald__card';
    card.setAttribute('data-tags',(w.tags||[]).map(function(t){return SLUG[t]||'';}).join(' '));
    var ttl=(w.alt||w.name).replace(/"/g,'&quot;');
    var q='?autoplay=true&muted=true&loop=true&controls=false&playsInline=true&background=true';
    var ift= defer ? '<iframe data-src="https://kinescope.io/embed/'+w.id+q+'" title="'+ttl+'" aria-label="'+ttl+'" allow="autoplay; fullscreen; encrypted-media; picture-in-picture" allowfullscreen></iframe>'
                   : '<iframe loading="lazy" src="https://kinescope.io/embed/'+w.id+q+'" title="'+ttl+'" aria-label="'+ttl+'" allow="autoplay; fullscreen; encrypted-media; picture-in-picture" allowfullscreen></iframe>';
    var tagsHtml=(w.tags&&w.tags.length)?'<div class="kgald__tags">'+w.tags.map(function(t){return '<span class="kgald__tag">'+t+'</span>';}).join('')+'</div>':'';
    var descHtml=w.desc?'<p class="kgald__desc">'+w.desc+'</p>':'';
    var metaHtml='';
    if(w.sphere||w.format||w.term){ metaHtml='<div class="kgald__meta">'+(w.sphere?'<div class="kgald__row"><b>Сфера:</b> '+w.sphere+'</div>':'')+(w.format?'<div class="kgald__row"><b>Формат:</b> '+w.format+'</div>':'')+(w.term?'<div class="kgald__row"><b>Срок:</b> '+w.term+'</div>':'')+'</div>'; }
    card.innerHTML='<div class="kgald__video">'+ift+'</div><div class="kgald__body"><h3 class="kgald__name">'+w.name+'</h3>'+tagsHtml+descHtml+metaHtml+'<button class="kgald__full'+(w.full?'':' kgald__full--nolink')+'" '+(w.full?'':'aria-disabled="true"')+'>'+FS+'Смотреть полное видео</button></div>';
    /* KORS: у карточек без поля full полной версии ролика пока нет. Кнопка остаётся видимой, но клик отключён, чтобы не открывался тот же короткий ролик. Как только появится ссылка, добавь в объект работы full:'ID_полного_ролика' - кнопка заработает сама, ничего больше менять не нужно. */
    if(w.full){ card.querySelector('.kgald__full').addEventListener('click',function(){ openLb(w.full); }); }
    return card;
  }
  var top=document.getElementById('kgaldTop'),rest=document.getElementById('kgaldRest'),box=document.getElementById('kgaldHidden'),more=document.getElementById('kgaldMore');
  var exp=document.getElementById('kgaldExp'), expwrap=document.getElementById('kgaldExpWrap');
  if(!top||!rest||!box||!more)return;
  /* KORS: превью грузятся не пачкой. Плеер получает src только когда карточка подходит к видимой области (запас 300px). Пока карточка спрятана под кнопкой (max-height:0) или скрыта фильтром (display:none), она не пересекается с экраном и ролик не стартует. */
  var io=('IntersectionObserver' in window)?new IntersectionObserver(function(es,ob){
    es.forEach(function(e){
      if(!e.isIntersecting) return;
      var f=e.target.querySelector('iframe[data-src]');
      if(f){ f.src=f.getAttribute('data-src'); f.removeAttribute('data-src'); }
      ob.unobserve(e.target);
    });
  },{root:null,rootMargin:'300px 0px',threshold:0.01}):null;
  function watch(c){
    if(io){ io.observe(c); return; }
    var f=c.querySelector('iframe[data-src]');
    if(f){ f.src=f.getAttribute('data-src'); f.removeAttribute('data-src'); }
  }
  function put(grid,w){ var c=makeCard(w,true); grid.appendChild(c); watch(c); }
  /* KORS: порог показа - 12 карточек, остальные под кнопкой. Экспертные ролики студии идут отдельной группой ниже, флаг kors в данных теперь отвечает за группировку. */
  var TOPN=12;
  var main=works.filter(function(w){return !w.kors;});
  var expert=works.filter(function(w){return !!w.kors;});
  main.slice(0,TOPN).forEach(function(w){put(top,w);});
  main.slice(TOPN).forEach(function(w){put(rest,w);});
  if(exp){ expert.forEach(function(w){put(exp,w);}); }
  var cntEl=more.querySelector('.kgald__count'); if(cntEl){ cntEl.textContent='+'+Math.max(0,main.length-TOPN); }
  var loaded=false, mt=more.querySelector('.kgald__mtext');
  more.addEventListener('click',function(){
    if(!box.classList.contains('open')){
      box.classList.add('open'); box.style.maxHeight=box.scrollHeight+'px';
      setTimeout(function(){if(box.classList.contains('open'))box.style.maxHeight='none';},600);
      more.classList.add('is-open'); mt.textContent='Свернуть';
    }else{
      box.style.maxHeight=box.scrollHeight+'px';
      requestAnimationFrame(function(){box.style.maxHeight='0px';box.classList.remove('open');});
      more.classList.remove('is-open'); mt.textContent='Смотреть все работы';
    }
  });
  window.addEventListener('resize',function(){if(box.classList.contains('open'))box.style.maxHeight='none';});

  /* фильтр по услугам: чистый JS, отбор по data-tags */
  var fwrap=document.getElementById('kgaldFilter'), empty=document.getElementById('kgaldEmpty'), morewrap=more.parentNode;
  function loadRest(){ /* KORS: пачкой больше не грузим - src ставит IntersectionObserver по мере прокрутки. */ }
  function setBox(open){
    if(open){ loadRest(); box.classList.add('open'); box.style.maxHeight='none'; }
    else { box.classList.remove('open'); box.style.maxHeight='0px'; }
  }
  if(fwrap){
    fwrap.addEventListener('click',function(e){
      var b=e.target.closest?e.target.closest('.kgald__fbtn'):null;
      if(!b) return;
      var f=b.getAttribute('data-f'), all=(f==='all'), shown=0, restShown=0, expShown=0;
      fwrap.querySelectorAll('.kgald__fbtn').forEach(function(x){ x.classList.toggle('is-active', x===b); });
      [top,rest,exp].filter(Boolean).forEach(function(grid){
        grid.querySelectorAll('.kgald__card').forEach(function(c){
          var m = all || ((' '+(c.getAttribute('data-tags')||'')+' ').indexOf(' '+f+' ')>-1);
          if(m){
            shown++; if(grid===rest) restShown++; if(grid===exp) expShown++;
            c.style.display='';
            void c.offsetWidth;
            c.classList.remove('is-off');
          } else {
            c.classList.add('is-off');
            setTimeout(function(){ if(c.classList.contains('is-off')) c.style.display='none'; },260);
          }
        });
      });
      if(all){
        setBox(false); morewrap.style.display='';
        more.classList.remove('is-open'); mt.textContent='Смотреть все работы';
      } else {
        setBox(restShown>0); morewrap.style.display='none';
      }
      if(expwrap) expwrap.style.display=(expShown>0)?'':'none';
      if(empty) empty.classList.toggle('on', shown===0);
    });
  }
})();
</script>

rec2663636801 МОБИЛКА (22297 симв.)

<!-- ===== KORS · НАШИ РАБОТЫ · МОБИЛКА · блок T123. Показывать ТОЛЬКО на телефоне. ===== -->
<div class="kgalm">
  <div class="kgalm__head">
    <div class="kgalm__eyebrow">- НАШИ РАБОТЫ</div>
    <h2 class="kgalm__title">460+ проектов: найдите свою отрасль.</h2>
    <div class="kgalm__sub">Сфера, формат и срок по каждому проекту. «Смотреть полное видео» - на весь экран.</div>
  </div>
  <div class="kgalm__filter" id="kgalmFilter" aria-label="Фильтр работ по услугам">
    <button type="button" class="kgalm__fbtn is-active" data-f="all">Все</button>
    <button type="button" class="kgalm__fbtn" data-f="video">Видео</button>
    <button type="button" class="kgalm__fbtn" data-f="site">Сайты</button>
    <button type="button" class="kgalm__fbtn" data-f="presentation">Презентации</button>
    <button type="button" class="kgalm__fbtn" data-f="brand">Фирменный стиль</button>
    <button type="button" class="kgalm__fbtn" data-f="ads">Реклама</button>
  </div>
  <div class="kgalm__col" id="kgalmTop"></div>
  <div class="kgalm__hidden" id="kgalmHidden"><div class="kgalm__col" id="kgalmRest"></div></div>
  <div class="kgalm__empty" id="kgalmEmpty">По этой услуге в подборке пока нет проектов.</div>
  <div class="kgalm__morewrap"><button class="kgalm__more" id="kgalmMore"><span class="kgalm__mtext">Смотреть ещё наши работы</span> <span class="kgalm__count">+15</span></button></div>
    <div class="kgalm__group" id="kgalmExpWrap">
    <div class="kgalm__ghead">
      <div class="kgalm__eyebrow">- ГОВОРИМ О ВИДЕО</div>
      <h3 class="kgalm__gtitle">Экспертные ролики студии</h3>
      <div class="kgalm__gsub">Наш собственный контент, не клиентские заказы: как устроен продакшен, из чего складывается цена и что делает видео рабочим инструментом.</div>
    </div>
    <div class="kgalm__col" id="kgalmExp"></div>
  </div>
  <div class="kgalm__lb" id="kgalmLb"><div class="kgalm__lbbd"></div><div class="kgalm__lbbox"><button class="kgalm__lbx" id="kgalmLbx">×</button><div class="kgalm__lbframe"><iframe id="kgalmLbIframe" allow="autoplay; fullscreen; encrypted-media; picture-in-picture" allowfullscreen></iframe></div></div></div>
</div>
<style>
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Unbounded:wght@400;600;700;800&display=swap');
.kgalm{--bg:#0C0C0E;--raise:#141416;--card:#1B1B1F;--border:#2A2A2E;--text:#F5F3EF;--muted:#9A9A9A;--faint:#6a6a6e;--accent:#6D5DFB;--glow:rgba(109,93,251,.14);
  box-sizing:border-box;background:var(--bg);color:var(--text);font-family:'Manrope',Arial,sans-serif;-webkit-font-smoothing:antialiased;padding:56px 20px 64px;}
.kgalm *{box-sizing:border-box;margin:0;padding:0;}
.kgalm__head{margin:0 auto 30px;text-align:center;}
.kgalm__eyebrow{font-family:'Unbounded';font-size:11px;letter-spacing:.14em;color:var(--accent);margin-bottom:12px;}
.kgalm__title{font-family:'Unbounded';font-weight:700;font-size:26px;letter-spacing:-.02em;margin-bottom:12px;line-height:1.15;}
.kgalm__sub{color:var(--muted);font-size:14px;line-height:1.5;max-width:340px;margin:0 auto;}
.kgalm__col{display:flex;flex-direction:column;gap:18px;}
.kgalm__card{background:var(--raise);border:1px solid var(--border);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;}
.kgalm__video{position:relative;width:100%;aspect-ratio:16/9;background:#000;}
.kgalm__video iframe{position:absolute;inset:0;width:100%;height:100%;border:none;pointer-events:none;}
.kgalm__body{padding:18px 18px 20px;display:flex;flex-direction:column;}
.kgalm__name{font-family:'Unbounded';font-weight:700;font-size:18px;margin-bottom:9px;letter-spacing:-.01em;}
.kgalm__meta{display:flex;flex-direction:column;gap:5px;margin-bottom:16px;}
.kgalm__row{font-size:13px;color:var(--muted);line-height:1.4;}
.kgalm__row b{color:var(--text);font-weight:600;}
.kgalm__full--nolink{cursor:default}
.kgalm__full{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:transparent;border:1px solid var(--border);color:var(--text);font-family:'Manrope';font-weight:700;font-size:14px;padding:13px 18px;border-radius:9px;cursor:pointer;width:100%;}
.kgalm__full svg{width:15px;height:15px;flex:none;}
.kgalm__hidden{max-height:0;overflow:hidden;opacity:0;transition:max-height .55s ease,opacity .4s ease,margin-top .4s ease;margin-top:0;}
.kgalm__hidden.open{opacity:1;margin-top:18px;}
.kgalm__morewrap{margin-top:28px;}
.kgalm__more{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;background:var(--accent);color:#fff;font-family:'Manrope';font-weight:700;font-size:15px;padding:16px 24px;border-radius:9px;border:none;cursor:pointer;}
.kgalm__count{font-family:'Unbounded';font-size:12px;background:rgba(0,0,0,.18);padding:3px 8px;border-radius:20px;}
.kgalm__more.is-open .kgalm__count{display:none;}
.kgalm__lb{position:fixed;inset:0;z-index:99999;display:none;align-items:center;justify-content:center;padding:16px;}
.kgalm__lb.open{display:flex;}
.kgalm__lbbd{position:absolute;inset:0;background:rgba(4,4,6,.92);}
.kgalm__lbbox{position:relative;width:100%;}
.kgalm__lbframe{position:relative;width:100%;aspect-ratio:16/9;background:#000;border-radius:12px;overflow:hidden;border:1px solid var(--border);}
.kgalm__lbframe iframe{position:absolute;inset:0;width:100%;height:100%;border:none;}
.kgalm__lbx{position:absolute;top:-44px;right:0;width:38px;height:38px;border-radius:9px;background:var(--raise);border:1px solid var(--border);color:var(--text);font-size:22px;line-height:1;cursor:pointer;}
.kgalm__filter{display:flex;flex-wrap:nowrap;gap:8px;margin:0 -20px 22px;padding:0 20px 2px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;}
.kgalm__filter::-webkit-scrollbar{display:none;}
.kgalm__fbtn{flex:none;background:transparent;border:1px solid var(--border);color:var(--muted);font-family:'Manrope',Arial,sans-serif;font-weight:600;font-size:13px;padding:9px 15px;border-radius:20px;cursor:pointer;white-space:nowrap;transition:.2s;}
.kgalm__fbtn.is-active{background:var(--accent);border-color:var(--accent);color:#fff;}
.kgalm__tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:11px;}
.kgalm__tag{font-family:'Manrope',Arial,sans-serif;font-weight:600;font-size:8px;line-height:1;text-transform:uppercase;letter-spacing:.14em;color:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.22);border-radius:4px;padding:5px 8px;white-space:nowrap;}
.kgalm__desc{font-size:12px;line-height:1.5;color:var(--muted);margin-bottom:13px;}
.kgalm__card{transition:opacity .25s ease,transform .25s ease;}
.kgalm__card.is-off{opacity:0;transform:translateY(6px);}
.kgalm__empty{text-align:center;color:var(--muted);font-size:14px;padding:28px 0;display:none;}
.kgalm__empty.on{display:block;}
@media (min-width:481px){ .kgalm{display:none;} }
/* KORS: экспертные ролики вынесены в отдельную группу со своим заголовком, поэтому плашка на карточке больше не нужна. */
.kgalm__group{margin-top:54px;}
.kgalm__ghead{margin:0 auto 22px;text-align:center;}
.kgalm__gtitle{font-family:'Unbounded';font-weight:700;font-size:22px;letter-spacing:-.02em;margin-bottom:10px;line-height:1.2;}
.kgalm__gsub{color:var(--muted);font-size:13px;line-height:1.5;max-width:340px;margin:0 auto;}
</style>
<script>
(function(){
  var SLUG={'Видео':'video','Фотосъёмка':'photo','Сайт':'site','Презентация':'presentation','Фирменный стиль':'brand','Реклама':'ads','Дизайн':'design','Трансляция':'live','Продюсирование':'producing'};
  var works=[
    {id:'pd95FJSRFhF27W4YX4ioJJ', full:'3ZsxHkdEuHUubxSAQZDRyG', name:'Одоевские консервы - фильм о заводе', tags:['Видео','Фирменный стиль'], desc:'Показали производство изнутри: цеха, линии, контроль качества. Видео работает на сайте, в переговорах с сетями и на выставках.', alt:'Фильм о заводе Одоевские консервы: цеха, линии и контроль качества, мобильная версия'},
    {id:'xgBCJrU3Fy9CtKDXR9R23S', full:'0GfobL6RnAzhPeiopXjNHS', name:'Invoicebox - о компании', sphere:'финансовые технологии (FinTech)', format:'презентационный ролик о компании', term:'6 дней', tags:['Видео','Реклама'], desc:'Имиджевый ролик о платёжном сервисе: чем занимается компания и какие задачи бизнеса закрывает.', alt:'Имиджевый ролик о платёжном сервисе Invoicebox, мобильная версия'},
    {id:'iPcFsLF3eYfDYTauhcgjZj', full:'fv7FAnLfbLaDaNJLtSQ74H', name:'Вистекс', sphere:'производство, предприятие', format:'презентационный ролик', term:'15 дней', tags:['Видео','Дизайн'], desc:'Ролик о заводе: восемь направлений производства за три минуты. Дизайн email-письма со встроенным видео для коммерческих предложений.', alt:'Видео о производстве для завода Вистекс, мобильная версия'},
    {id:'bZ8JyozhtKdSDiy5xjLoVr', full:'caSE37WujsGB6usgZewyUt', name:'Ресторан Rumi / «ЗНАТЬ»', sphere:'ресторанный бизнес, мероприятия', format:'видео-отчёт о мероприятии', term:'2 дня', tags:['Видео','Трансляция','Презентация'], desc:'Съёмка мероприятий, прямая трансляция и презентации для ресторана.', alt:'Съёмка мероприятия и трансляция для ресторана Rumi, мобильная версия'},
    {id:'uiVqp8dWpzNoBt2GweBLs9', full:'vF4hbgW4Umo6U4dDNUFvwv', name:'Новая Формация', sphere:'организация, бизнес', format:'презентационный ролик', term:'4 дня', tags:['Видео','Дизайн'], desc:'Презентационный ролик, афиша и ведение контента.', alt:'Презентационный ролик для проекта Новая Формация, мобильная версия'},
    {id:'gHMF2zBsAdSdbcEH9wSZKh', full:'kfd6wYQdCh72VpRPC74Mfs', name:'Редакция ЭКСМО', sphere:'издательский бизнес', format:'съёмка трейлера по сюжету книги', term:'9 дней', tags:['Видео','Дизайн'], desc:'Трейлер книги и афиша для издательства.', alt:'Книжный трейлер для издательства Редакция ЭКСМО, мобильная версия'},
    {id:'sRSLqBbjkRWyn31BrY6iny', full:'mZiwnH9uZAdc15hhRsqPvB', name:'Одоевские консервы - термостабильные начинки', tags:['Видео'], desc:'Продуктовый ролик о линейке: как начинки ведут себя при выпечке и что это даёт производителю.', alt:'Продуктовый ролик о термостабильных начинках Одоевские консервы, мобильная версия'},
    {id:'uqJ79iyVPcqN1ZtTtjnkAv', full:'gznTZhdFQeZEKZnidVaTbk', name:'GosObmen', sphere:'финансовые услуги', format:'рекламный ролик', term:'3 дня', tags:['Видео','Сайт','Дизайн'], desc:'Рекламные ролики, тексты и сайт. Собрали скрипт для отдела продаж.', alt:'Рекламный ролик и сайт для сервиса Гособмен, мобильная версия'},
    {id:'35XkXms5VN3RLJcYsgWsnD', full:'2FXfjS6hYEvLkWNKUveoBx', name:'Invoicebox - оплата в белорусских рублях', tags:['Видео'], desc:'Объясняющий ролик о выходе платёжного сервиса на рынок Беларуси: как принимать оплату в белорусских рублях.', alt:'Ролик об оплате в белорусских рублях в платёжном сервисе Invoicebox, мобильная версия'},
    {id:'5zMvPKfeuDf9N7h7P8KuVe', full:'ePXSSA9qFiEgA5WYRdd4FP', name:'Алтай Серикбай - съёмки для личного бренда', tags:['Видео'], desc:'Снимаем контент для эксперта по личностному развитию: студийные выпуски, разговорные форматы, съёмки на ретритах. За время работы - больше десяти роликов.', alt:'Съёмки для личного бренда эксперта по личностному развитию Алтая Серикбая, мобильная версия'},
    {id:'bKeihzPbnEbXZarkMcYQZj', full:'6ivtiXKAcQj4dVJN8H1YWs', name:'MediaLive - отчётный ролик с выставки', tags:['Видео','Реклама'], desc:'Сняли отчётное видео с отраслевого события. Организаторы используют его на сайте и в рекламе следующего сезона.', alt:'Отчётный ролик с отраслевой выставки для MediaLive, мобильная версия'},
    {id:'8QbWRspZgkLTicEiQpp9su', full:'8QbWRspZgkLTicEiQpp9su', name:'STROBBS - промо зимней коллекции', tags:['Видео','Реклама'], desc:'Проморолик показа новой зимней коллекции российского бренда обуви и одежды.', alt:'Проморолик показа зимней коллекции бренда обуви и одежды STROBBS, мобильная версия'},
    {id:'88SCanh4aPU83UFBmThiVa', full:'mJqjXaKQBrdbvirxUTHLLh', name:'Rockstar - клип «На дне»', tags:['Видео'], desc:'Музыкальный клип для артиста.', alt:'Музыкальный клип На дне для артиста Rockstar, мобильная версия'},
    {id:'wLtMKZCpf75eYEWMXPEPZY', full:'7Kxs8xzVfCDLtyuG5puNN1', name:'Рокстар', sphere:'медиа', format:'музыкальный клип', term:'12 дней', tags:['Видео','Дизайн'], desc:'Три клипа и обложки для музыкального проекта.', alt:'Музыкальные клипы для проекта Рокстар, мобильная версия'},
    {id:'qAV5wXg5oHKKcY6tbgysZd', full:'okapERMYWfdoGagPRmo7uC', name:'Rockstar - клип «Самая грустная песня»', tags:['Видео'], desc:'Первый клип, который мы сняли для артиста.', alt:'Музыкальный клип Самая грустная песня для артиста Rockstar, мобильная версия'},
    {id:'8YSeQnzXxmpkmo7uNNcLrF', full:'43yfJckoZggrVouaMMK4zt', name:'YouTube-шоу', sphere:'медиа', format:'съёмка выпусков', term:'14 дней', tags:['Видео','Продюсирование','Реклама'], desc:'Продюсирование и режиссура шоу: съёмка выпусков и рекламное сопровождение.', alt:'Съёмка выпусков YouTube-шоу, мобильная версия'},
    {id:'vNYi5w7HiQevkdBbPmQ3CR', full:'vNYi5w7HiQevkdBbPmQ3CR', name:'Ювелирный лофт GOLD - ролик о компании', tags:['Видео'], desc:'Рассказали о компании и о том, чем она занимается.', alt:'Ролик о компании для ювелирного лофта GOLD, мобильная версия'},
    {id:'6JcPdvqUchXCmzscbTqaos', full:'sRyZwPm3BS9CVspVi2sLx3', name:'Одоевские консервы - нетермостабильные начинки', tags:['Видео'], desc:'Второй ролик линейки: назначение, состав, применение в готовых изделиях.', alt:'Продуктовый ролик о нетермостабильных начинках Одоевские консервы, мобильная версия'},
    {id:'7akHJzKdcoSrPiHtRbRBqk', full:'7akHJzKdcoSrPiHtRbRBqk', name:'Invoicebox - интернет-магазины за пару кликов', tags:['Видео'], desc:'Продуктовый ролик о конструкторе интернет-магазинов внутри сервиса.', alt:'Ролик о конструкторе интернет-магазинов в сервисе Invoicebox, мобильная версия'},
    {id:'b66cpVCFFFVycfDvLFXFR3', full:'b66cpVCFFFVycfDvLFXFR3', name:'Invoicebox - как выставить счёт за пару кликов', tags:['Видео'], desc:'Видеоинструкция для пользователей сервиса: выставление счёта по шагам.', alt:'Видеоинструкция по выставлению счёта в сервисе Invoicebox, мобильная версия'},
    {id:'eCGHEdUFdSyEjCBXxcsUSC', full:'geGWgessLoxkUKdQ4d4e1q', name:'KORS Production', sphere:'создание контента', format:'актуальные работы', term:'2025-й год', tags:['Видео','Продюсирование'], desc:'Шоурил студии: съёмки на производствах и коммерческие проекты разных лет.', alt:'Актуальные работы студии KORS Production, мобильная версия'},
    {id:'dsqVruz3QkCKQESGiTUsVR', full:'dsqVruz3QkCKQESGiTUsVR', name:'Твой продакшен тебя обманывает', tags:['Видео'], kors:true, alt:'Экспертное видео KORS: почему продакшен может обманывать заказчика, мобильная версия'},
    {id:'uittTC7uyz9hv4HDirTBAG', full:'uittTC7uyz9hv4HDirTBAG', name:'Видео - это не украшение для бизнеса', tags:['Видео'], kors:true, alt:'Экспертное видео KORS о том, зачем бизнесу видео, мобильная версия'},
    {id:'aG3Qkc4VfoCcgtJLz6ivbE', full:'aG3Qkc4VfoCcgtJLz6ivbE', name:'Как сэкономить на видеоролике', tags:['Видео'], kors:true, alt:'Экспертное видео KORS о том, как сэкономить на съёмке ролика, мобильная версия'},
    {id:'4pzsMBSzheH3Sarx4UFHMd', full:'4pzsMBSzheH3Sarx4UFHMd', name:'Как сделать продающее видео', tags:['Видео'], kors:true, alt:'Экспертное видео KORS о том, как сделать продающее видео, мобильная версия'}
  ];
  var FS='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="5 3 19 12 5 21 5 3"/></svg>';
  var lb=document.getElementById('kgalmLb'), lbf=document.getElementById('kgalmLbIframe');
  function openLb(id){ lbf.src='https://kinescope.io/embed/'+id+'?autoplay=true'; lb.classList.add('open'); }
  function closeLb(){ lb.classList.remove('open'); lbf.src=''; }
  document.getElementById('kgalmLbx').addEventListener('click',closeLb);
  lb.querySelector('.kgalm__lbbd').addEventListener('click',closeLb);
  function makeCard(w, defer){
    var card=document.createElement('div'); card.className='kgalm__card';
    card.setAttribute('data-tags',(w.tags||[]).map(function(t){return SLUG[t]||'';}).join(' '));
    var ttl=(w.alt||w.name).replace(/"/g,'&quot;');
    var q='?autoplay=true&muted=true&loop=true&controls=false&playsInline=true&background=true';
    var ift= defer ? '<iframe data-src="https://kinescope.io/embed/'+w.id+q+'" title="'+ttl+'" aria-label="'+ttl+'" allow="autoplay; fullscreen; encrypted-media; picture-in-picture" allowfullscreen></iframe>'
                   : '<iframe loading="lazy" src="https://kinescope.io/embed/'+w.id+q+'" title="'+ttl+'" aria-label="'+ttl+'" allow="autoplay; fullscreen; encrypted-media; picture-in-picture" allowfullscreen></iframe>';
    var tagsHtml=(w.tags&&w.tags.length)?'<div class="kgalm__tags">'+w.tags.map(function(t){return '<span class="kgalm__tag">'+t+'</span>';}).join('')+'</div>':'';
    var descHtml=w.desc?'<p class="kgalm__desc">'+w.desc+'</p>':'';
    var metaHtml='';
    if(w.sphere||w.format||w.term){ metaHtml='<div class="kgalm__meta">'+(w.sphere?'<div class="kgalm__row"><b>Сфера:</b> '+w.sphere+'</div>':'')+(w.format?'<div class="kgalm__row"><b>Формат:</b> '+w.format+'</div>':'')+(w.term?'<div class="kgalm__row"><b>Срок:</b> '+w.term+'</div>':'')+'</div>'; }
    card.innerHTML='<div class="kgalm__video">'+ift+'</div><div class="kgalm__body"><h3 class="kgalm__name">'+w.name+'</h3>'+tagsHtml+descHtml+metaHtml+'<button class="kgalm__full'+(w.full?'':' kgalm__full--nolink')+'" '+(w.full?'':'aria-disabled="true"')+'>'+FS+'Смотреть полное видео</button></div>';
    /* KORS: у карточек без поля full полной версии ролика пока нет. Кнопка остаётся видимой, но клик отключён, чтобы не открывался тот же короткий ролик. Как только появится ссылка, добавь в объект работы full:'ID_полного_ролика' - кнопка заработает сама, ничего больше менять не нужно. */
    if(w.full){ card.querySelector('.kgalm__full').addEventListener('click',function(){ openLb(w.full); }); }
    return card;
  }
  var top=document.getElementById('kgalmTop'),rest=document.getElementById('kgalmRest'),box=document.getElementById('kgalmHidden'),more=document.getElementById('kgalmMore');
  var exp=document.getElementById('kgalmExp'), expwrap=document.getElementById('kgalmExpWrap');
  if(!top||!rest||!box||!more)return;
  /* KORS: превью грузятся не пачкой. Плеер получает src только когда карточка подходит к видимой области (запас 250px). Пока карточка спрятана под кнопкой (max-height:0) или скрыта фильтром (display:none), она не пересекается с экраном и ролик не стартует. */
  var io=('IntersectionObserver' in window)?new IntersectionObserver(function(es,ob){
    es.forEach(function(e){
      if(!e.isIntersecting) return;
      var f=e.target.querySelector('iframe[data-src]');
      if(f){ f.src=f.getAttribute('data-src'); f.removeAttribute('data-src'); }
      ob.unobserve(e.target);
    });
  },{root:null,rootMargin:'250px 0px',threshold:0.01}):null;
  function watch(c){
    if(io){ io.observe(c); return; }
    var f=c.querySelector('iframe[data-src]');
    if(f){ f.src=f.getAttribute('data-src'); f.removeAttribute('data-src'); }
  }
  function put(grid,w){ var c=makeCard(w,true); grid.appendChild(c); watch(c); }
  /* KORS: порог показа на телефоне - 6 карточек (одна колонка, 12 было бы простынёй), остальные под кнопкой. Экспертные ролики студии идут отдельной группой ниже, флаг kors в данных теперь отвечает за группировку. */
  var TOPN=6;
  var main=works.filter(function(w){return !w.kors;});
  var expert=works.filter(function(w){return !!w.kors;});
  main.slice(0,TOPN).forEach(function(w){put(top,w);});
  main.slice(TOPN).forEach(function(w){put(rest,w);});
  if(exp){ expert.forEach(function(w){put(exp,w);}); }
  var cntEl=more.querySelector('.kgalm__count'); if(cntEl){ cntEl.textContent='+'+Math.max(0,main.length-TOPN); }
  var loaded=false, mt=more.querySelector('.kgalm__mtext');
  more.addEventListener('click',function(){
    if(!box.classList.contains('open')){
      box.classList.add('open'); box.style.maxHeight=box.scrollHeight+'px';
      setTimeout(function(){if(box.classList.contains('open'))box.style.maxHeight='none';},600);
      more.classList.add('is-open'); mt.textContent='Свернуть';
    }else{
      box.style.maxHeight=box.scrollHeight+'px';
      requestAnimationFrame(function(){box.style.maxHeight='0px';box.classList.remove('open');});
      more.classList.remove('is-open'); mt.textContent='Смотреть ещё наши работы';
    }
  });
  window.addEventListener('resize',function(){if(box.classList.contains('open'))box.style.maxHeight='none';});

  /* фильтр по услугам: чистый JS, отбор по data-tags */
  var fwrap=document.getElementById('kgalmFilter'), empty=document.getElementById('kgalmEmpty'), morewrap=more.parentNode;
  function loadRest(){ /* KORS: пачкой больше не грузим - src ставит IntersectionObserver по мере прокрутки. */ }
  function setBox(open){
    if(open){ loadRest(); box.classList.add('open'); box.style.maxHeight='none'; }
    else { box.classList.remove('open'); box.style.maxHeight='0px'; }
  }
  if(fwrap){
    fwrap.addEventListener('click',function(e){
      var b=e.target.closest?e.target.closest('.kgalm__fbtn'):null;
      if(!b) return;
      var f=b.getAttribute('data-f'), all=(f==='all'), shown=0, restShown=0, expShown=0;
      fwrap.querySelectorAll('.kgalm__fbtn').forEach(function(x){ x.classList.toggle('is-active', x===b); });
      if(b.scrollIntoView) b.scrollIntoView({block:'nearest',inline:'nearest'});
      [top,rest,exp].filter(Boolean).forEach(function(grid){
        grid.querySelectorAll('.kgalm__card').forEach(function(c){
          var m = all || ((' '+(c.getAttribute('data-tags')||'')+' ').indexOf(' '+f+' ')>-1);
          if(m){
            shown++; if(grid===rest) restShown++; if(grid===exp) expShown++;
            c.style.display='';
            void c.offsetWidth;
            c.classList.remove('is-off');
          } else {
            c.classList.add('is-off');
            setTimeout(function(){ if(c.classList.contains('is-off')) c.style.display='none'; },260);
          }
        });
      });
      if(all){
        setBox(false); morewrap.style.display='';
        more.classList.remove('is-open'); mt.textContent='Смотреть ещё наши работы';
      } else {
        setBox(restShown>0); morewrap.style.display='none';
      }
      if(expwrap) expwrap.style.display=(expShown>0)?'':'none';
      if(empty) empty.classList.toggle('on', shown===0);
    });
  }
})();
</script>

rec3164359801 · АУДИТ (фото клиента) (13470 симв.)

<!-- KORS · БЕСПЛАТНЫЙ АУДИТ · блок T123 · окно видеозвонка с демонстрацией экрана -->
<style>
/* ================= ДЕСКТОП ================= */
.kaud{--bg:#0C0C0E;--border:#2A2A2E;--text:#F5F3EF;--muted:#9A9A9A;--accent:#6D5DFB;background:var(--bg);color:var(--text);font-family:'Manrope',Arial,sans-serif;padding:84px 40px 92px;overflow:hidden}
.kaud *{box-sizing:border-box}
.kaud__wrap{max-width:1240px;margin:0 auto}

/* ----- окно видеозвонка ----- */
.kaud__win{border:1px solid var(--border);border-radius:16px;overflow:hidden;background:linear-gradient(160deg,#17171C,#111114);box-shadow:0 30px 70px rgba(0,0,0,.45)}
.kaud__bar{display:flex;align-items:center;gap:14px;padding:12px 16px;background:#101013;border-bottom:1px solid var(--border)}
.kaud__dots{display:flex;gap:6px;flex:0 0 auto}
.kaud__dots i{display:block;width:10px;height:10px;border-radius:50%;background:#4A4A52}
.kaud__barlabel{font-size:12px;letter-spacing:.02em;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kaud__rec{margin-left:auto;flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;font-family:'Unbounded',sans-serif;font-size:10px;font-weight:600;letter-spacing:.12em;color:#fff;background:#D2342B;border-radius:6px;padding:5px 9px;line-height:1}
.kaud__rec:before{content:"";width:6px;height:6px;border-radius:50%;background:#fff;animation:kaudBlink 1.5s infinite ease-in-out}
@keyframes kaudBlink{0%,100%{opacity:1}50%{opacity:.2}}

.kaud__body{display:grid;grid-template-columns:2.161fr 1fr;min-height:0}

/* ----- левая колонка: демонстрация экрана ----- */
.kaud__share{position:relative;display:block;padding:0;border-right:1px solid var(--border);background:radial-gradient(120% 120% at 50% 0%,#1C1C23 0%,#0D0D10 72%)}
/* слот записи экрана: залит во всю ширину окна, пропорция слота равна пропорции кадра 1200x514, поэтому обрезки нет */
.kaud__doc{position:relative;width:100%;max-width:none;aspect-ratio:1200 / 514;border-radius:0;box-shadow:none;background-size:cover;background-position:center;background-repeat:no-repeat;
/* файл: ekran_zapis_v2-1200.jpg */
background-color:#100E18;background-image:url('https://static.tildacdn.com/tild3231-6338-4130-a666-653466373037/ekran_zapis_v2-1200.jpg')}
/* аккуратные "строки" макета, уйдут вместе с подстановкой фото */
.kaud__doc:before{content:"";position:absolute;left:8%;right:8%;top:74%;height:3px;border-radius:2px;background:rgba(12,12,14,.14)}
.kaud__doc:after{content:"";position:absolute;left:8%;width:44%;top:82%;height:3px;border-radius:2px;background:rgba(12,12,14,.1)}
/* строки-заглушки макета выключены: в слоте теперь настоящая запись экрана */
.kaud__doc:before,.kaud__doc:after{display:none}

/* рамки-пометки */
.kaud__note{position:absolute;border:2px solid var(--accent);border-radius:4px;box-shadow:0 0 0 3px rgba(109,93,251,.16);opacity:0;transform:scale(.94)}
.kaud__tag{position:absolute;left:-2px;bottom:100%;margin-bottom:6px;display:inline-block;background:var(--accent);color:#fff;font-family:'Manrope',Arial,sans-serif;font-size:10px;font-weight:600;line-height:1;letter-spacing:.01em;padding:5px 8px;border-radius:5px;white-space:nowrap}
.kaud__note--1{left:7%;top:13%;width:64%;height:18%}
.kaud__note--2{left:9%;top:47%;width:56%;height:22%}
/* рамки-пометки выключены: такие же аннотации уже есть внутри самой записи экрана, подписи дублировались */
.kaud__note{display:none}
.kaud--in .kaud__note{animation:kaudPop .5s cubic-bezier(.2,.7,.3,1) forwards}
.kaud--in .kaud__note--1{animation-delay:.5s}
.kaud--in .kaud__note--2{animation-delay:1.5s}
@keyframes kaudPop{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.kaud--in .kaud__note{animation:none;opacity:1;transform:none}.kaud__rec:before{animation:none}}

/* ----- правая колонка: участники ----- */
.kaud__people{display:flex;flex-direction:column;background:#101013}
.kaud__person{position:relative;flex:1 1 50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:24px;background-size:cover;background-position:center;background-repeat:no-repeat;
/* кадр лежит в переменной --ph, поверх него лёгкий графитовый слой, чтобы подписи читались */
background-color:#141419;background-image:linear-gradient(to top,rgba(16,14,24,.30) 0%,rgba(16,14,24,.24) 55%,rgba(16,14,24,.18) 100%),var(--ph)}
/* участник со стороны KORS */
/* в кадре продюсера снизу впечатана подпись Aleksandr Volkov (Producer): кадр приближен на 6 процентов и посажен по верхнему краю, подпись уходит за обрез, лицо остаётся по центру */
.kaud__person--kors{--ph:url('https://static.tildacdn.com/tild3638-6439-4366-a238-613761373163/prodavan-1200.jpg');background-size:auto,auto 106%;background-position:center,center top}
/* участник со стороны клиента */
.kaud__person--you{--ph:url('https://static.tildacdn.com/tild3435-6335-4136-b239-343538316366/klient-1200.jpg')}
.kaud__person + .kaud__person{border-top:1px solid var(--border)}
/* подписи роли поверх плиток: вверху справа, вместо круглых бейджей */
.kaud__role{position:absolute;top:12px;right:12px;font-family:'Manrope',Arial,sans-serif;font-size:12px;font-weight:700;line-height:1;letter-spacing:.01em;color:#fff;background:rgba(109,93,251,.94);border:1px solid transparent;border-radius:7px;padding:6px 10px;box-shadow:0 8px 20px rgba(0,0,0,.38)}
.kaud__person--you .kaud__role{background:rgba(20,18,26,.86);border:1px solid rgba(245,243,239,.24);color:#F5F3EF}

/* ----- нижняя часть ----- */
.kaud__head{margin:0 0 30px}
.kaud__head .kaud__title{margin-bottom:0}
.kaud__info{padding:30px 0 0}
.kaud__eyebrow{font-family:'Unbounded',sans-serif;font-size:12px;font-weight:600;letter-spacing:.14em;color:var(--accent);margin-bottom:14px;display:flex;align-items:center;gap:8px}
.kaud__eyebrow:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px rgba(109,93,251,.65)}
.kaud__title{font-family:'Unbounded',sans-serif;font-size:clamp(26px,3.2vw,42px);line-height:1.15;letter-spacing:-.02em;font-weight:700;max-width:900px;margin:0 0 16px}
.kaud__lead{font-size:17px;line-height:1.55;color:#C9C7C2;max-width:780px;margin:0 0 34px}
.kaud__foot{display:flex;align-items:flex-end;justify-content:space-between;gap:40px}
.kaud__steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;flex:1 1 auto}
.kaud__steps li{border-top:1px solid var(--border);padding-top:14px}
.kaud__steps b{display:block;font-size:15px;font-weight:700;color:var(--text);margin-bottom:5px}
.kaud__steps i{display:block;font-style:normal;font-size:14px;line-height:1.4;color:var(--muted)}
.kaud__btn{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;background:var(--accent);color:#fff!important;text-decoration:none!important;font-family:'Manrope',Arial,sans-serif;font-size:16px;font-weight:700;line-height:1;padding:18px 30px;border-radius:40px;box-shadow:0 14px 34px rgba(109,93,251,.32);transition:transform .2s ease,box-shadow .2s ease}
.kaud__btn:hover{transform:translateY(-2px);box-shadow:0 18px 40px rgba(109,93,251,.42)}

/* ================= ПЛАНШЕТ ================= */
@media screen and (min-width:641px) and (max-width:1000px){
.kaud{padding:68px 24px 76px}
.kaud__body{grid-template-columns:2.161fr 1fr;min-height:0}
.kaud__share{padding:0}
.kaud__role{top:10px;right:10px;font-size:11px;padding:5px 9px}
.kaud__head{margin-bottom:26px}
.kaud__info{padding:26px 0 0}
.kaud__lead{font-size:16px;margin:0 0 26px}
.kaud__foot{display:block}
.kaud__steps{gap:16px}
.kaud__btn{margin-top:26px;width:100%}
}

/* ================= МОБИЛЬНАЯ ВЕРСИЯ · отдельная вёрстка, проверено на 390px ================= */
@media screen and (max-width:640px){
.kaud{padding:52px 16px 58px}
.kaud__wrap{max-width:100%}
.kaud__win{border-radius:12px;box-shadow:0 16px 34px rgba(0,0,0,.4)}
.kaud__bar{padding:9px 11px;gap:9px}
.kaud__dots{gap:5px}
.kaud__dots i{width:8px;height:8px}
.kaud__barlabel{font-size:10px}
.kaud__rec{font-size:8px;letter-spacing:.1em;padding:4px 7px;gap:5px;border-radius:5px}
.kaud__rec:before{width:5px;height:5px}
.kaud__body{display:block;min-height:0}
.kaud__share{display:block;padding:0;border-right:0;border-bottom:1px solid var(--border)}
.kaud__doc{max-width:100%;border-radius:0;box-shadow:none;background-size:cover;background-position:center}
.kaud__note{border-width:1.5px;box-shadow:0 0 0 2px rgba(109,93,251,.14);border-radius:3px}
.kaud__tag{font-size:8px;padding:3px 5px;border-radius:4px;margin-bottom:4px;left:-1.5px}
.kaud__note--1{left:6%;top:15%;width:70%;height:17%}
.kaud__note--2{left:8%;top:49%;width:64%;height:21%}
.kaud__people{display:flex;flex-direction:row;width:100%;height:120px}
/* мобильные плитки: кадр по центру, слой чуть плотнее снизу, там подписи */
.kaud__person{flex:1 1 50%;height:120px;padding:10px;gap:8px;background-image:linear-gradient(to top,rgba(16,14,24,.30) 0%,rgba(16,14,24,.25) 55%,rgba(16,14,24,.20) 100%),var(--ph);background-position:center}
/* на мобилке кадр продюсера остаётся cover: впечатанная подпись там уже уходит за обрез по горизонтали */
.kaud__person--kors{background-size:auto,cover}
.kaud__person + .kaud__person{border-top:0;border-left:1px solid var(--border)}
.kaud__role{top:8px;right:8px;font-size:10px;padding:4px 8px;border-radius:6px}
.kaud__head{margin-bottom:22px}
.kaud__info{padding:22px 0 0}
.kaud__eyebrow{font-size:10px;letter-spacing:.12em;margin-bottom:10px;gap:7px}
.kaud__eyebrow:before{width:6px;height:6px}
.kaud__title{font-size:25px;line-height:1.18;max-width:100%;margin:0 0 12px}
.kaud__lead{font-size:15px;line-height:1.5;max-width:100%;margin:0 0 22px}
.kaud__foot{display:block}
.kaud__steps{display:block;grid-template-columns:none;gap:0}
.kaud__steps li{padding-top:11px;margin-bottom:14px}
.kaud__steps b{font-size:14px;margin-bottom:4px}
.kaud__steps i{font-size:13px}
.kaud__btn{display:flex;width:100%;font-size:15px;padding:17px 20px;border-radius:34px;margin-top:6px}
.kaud__btn:hover{transform:none;box-shadow:0 14px 34px rgba(109,93,251,.32)}
}
</style>
<noscript><style>.kaud__note{opacity:1!important;transform:none!important}</style></noscript>

<section class="kaud" aria-labelledby="kaud-title">
<div class="kaud__wrap">

<div class="kaud__head">
<div class="kaud__eyebrow">БЕСПЛАТНЫЙ АУДИТ</div>
<h2 class="kaud__title" id="kaud-title">Аудит ваших рекламных материалов и сайта бесплатно</h2>
</div>

<div class="kaud__win" aria-hidden="true">
<div class="kaud__bar">
<span class="kaud__dots"><i></i><i></i><i></i></span>
<span class="kaud__barlabel">Аудит материалов · демонстрация экрана</span>
<span class="kaud__rec">ЗАПИСЬ</span>
</div>
<div class="kaud__body">
<div class="kaud__share">
<div class="kaud__doc" role="img" aria-label="Запись экрана: разбор сайта производственной компании, пометками отмечены слабые места"><!-- фото: ekran_zapis_v2-1200.jpg -->
<div class="kaud__note kaud__note--1"><span class="kaud__tag">заголовок не про клиента</span></div>
<div class="kaud__note kaud__note--2"><span class="kaud__tag">нет кадров производства</span></div>
</div>
</div>
<div class="kaud__people">
<div class="kaud__person kaud__person--kors" role="img" aria-label="Продюсер KORS на видеозвонке разбирает материалы клиента"><!-- фото: prodavan-1200.jpg --><span class="kaud__role">Продюсер</span></div>
<div class="kaud__person kaud__person--you" role="img" aria-label="Руководитель производственной компании на видеозвонке за рабочим столом"><!-- фото: klient-1200.jpg --><span class="kaud__role">Клиент</span></div>
</div>
</div>
</div>

<div class="kaud__info">
<p class="kaud__lead">Организуем звонок на 10-15 минут, где подробно расскажем, что можно улучшить. Звонок запишем, видео с рекомендациями останется у вас.</p>
<div class="kaud__foot">
<ul class="kaud__steps">
<li><b>Пришлите материалы</b><i>сайт, презентация, каталог, видео</i></li>
<li><b>Созвон 10-15 минут</b><i>проходим по вашим файлам</i></li>
<li><b>Запись у вас</b><i>рекомендации в видео</i></li>
</ul>
<a class="kaud__btn" href="#popup:razbor">Получить бесплатный аудит</a>
</div>
</div>

</div>
</section>

<script>
/* появление рамок-пометок: считаем видимость сами, IntersectionObserver только как ускоритель */
(function(){
  var tries = 0;
  function boot(){
    var sec = document.querySelector(".kaud");
    if(!sec){ tries++; if(tries < 80){ setTimeout(boot, 250); } return; }
    var shown = false;
    function on(){
      if(shown){ return; }
      shown = true;
      sec.classList.add("kaud--in");
      window.removeEventListener("scroll", check);
      window.removeEventListener("resize", check);
    }
    function check(){
      var r = sec.getBoundingClientRect();
      var vh = window.innerHeight || document.documentElement.clientHeight;
      if(r.top < vh * 0.9 && r.bottom > 0){ on(); }
    }
    window.addEventListener("scroll", check, false);
    window.addEventListener("resize", check, false);
    check();
    setTimeout(check, 800);
    setTimeout(check, 2500);
    try{
      if(typeof window.IntersectionObserver === "function"){
        var io = new window.IntersectionObserver(function(en){
          for(var k = 0; k < en.length; k++){ if(en[k].isIntersecting){ on(); io.disconnect(); break; } }
        }, { threshold: 0.15 });
        io.observe(sec);
      }
    }catch(e){}
  }
  if(document.readyState === "loading"){ document.addEventListener("DOMContentLoaded", boot); } else { boot(); }
})();
</script>

rec2627171701 · ЗА ПРОЕКТ ОТВЕЧАЕТ ОДИН ЧЕЛОВЕК (3130 симв.)

<style>
#rec2619268401{display:none!important;}
.ktm{background:#0C0C0E;padding:56px 0 64px;font-family:'Manrope',-apple-system,Arial,sans-serif;overflow:hidden}
.ktm *{box-sizing:border-box}
.ktm__head{padding:0 20px;margin-bottom:20px}
.ktm__eyebrow{display:inline-flex;align-items:center;gap:8px;color:#6D5DFB;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;margin-bottom:14px}
.ktm__eyebrow:before{content:"";width:22px;height:1px;background:#6D5DFB}
.ktm__title{font-family:'Unbounded',sans-serif;color:#F5F3EF;font-size:29px;line-height:1.12;font-weight:700;margin:0 0 12px}
.ktm__sub{color:#9C9A95;font-size:15px;line-height:1.5;margin:0}
.ktm__sub b{color:#6D5DFB;font-weight:600}
.ktm__founder{margin:0 20px 8px;background:#1B1B1F;border-left:3px solid #6D5DFB;border-radius:0 12px 12px 0;padding:18px 18px 20px}
.ktm__frole{color:#6D5DFB;font-size:12px;font-weight:600;margin:0 0 6px}
.ktm__fname{color:#F5F3EF;font-size:19px;font-weight:700;margin:0 0 6px}
.ktm__fdesc{color:#9C9A95;font-size:14px;line-height:1.5;margin:0 0 16px}
.ktm__btn{display:inline-block;background:#6D5DFB;color:#fff;font-weight:600;font-size:15px;text-decoration:none;padding:13px 22px;border-radius:8px;transition:background .2s}
.ktm__btn:active{background:#FF7238}
.ktm__mail{display:block;color:#9C9A95;font-size:13px;text-decoration:none;margin-top:12px}
.ktm__hint{color:#66645F;font-size:12px;padding:18px 20px 0;display:flex;align-items:center;gap:6px}
.ktm__hint:before{content:"";width:6px;height:6px;border-radius:50%;background:#6D5DFB}
.ktm__track{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding:14px 20px 8px;scrollbar-width:none}
.ktm__track::-webkit-scrollbar{display:none}
.ktm__card{position:relative;flex:0 0 76%;max-width:300px;aspect-ratio:4/5;border-radius:14px;overflow:hidden;scroll-snap-align:start;background:#1B1B1F}
.ktm__card img{width:100%;height:100%;object-fit:cover;display:block}
.ktm__grad{position:absolute;left:0;right:0;bottom:0;height:46%;background:linear-gradient(to top,rgba(12,12,14,.92),rgba(12,12,14,0))}
.ktm__info{position:absolute;left:16px;right:16px;bottom:16px}
.ktm__name{color:#F5F3EF;font-size:17px;font-weight:700;margin:0 0 4px}
.ktm__role{color:#9C9A95;font-size:13px;margin:0}

.ktm{max-width:1200px;margin:0 auto;padding:72px 24px}
.ktm__title{font-size:clamp(28px,4.2vw,54px);line-height:1.1;text-wrap:balance}
.ktm__founder{max-width:900px;margin-top:28px}
.ktm__fdesc{font-size:clamp(16px,1.7vw,20px);line-height:1.65}
@media(max-width:480px){.ktm{padding:52px 18px}.ktm__title{font-size:28px}.ktm__founder{margin-top:20px}}
</style>
<div class="ktm">
  <div class="ktm__head">
    <div class="ktm__eyebrow">Ответственный</div>
    <h2 class="ktm__title">За проект отвечает один человек. Вот он.</h2>
  </div>
  <div class="ktm__founder">
    <p class="ktm__fdesc">Дмитрий Корс - сооснователь KORS. Курирует производственные проекты и отвечает за результат со стороны студии. Под конкретную задачу подключаются нужные специалисты: продакшн, дизайн, разработка и маркетинг.</p>
  </div>
</div>

rec2643266601 · ОТЗЫВЫ / ПИСЬМА (5128 симв.)

<!-- BLOCK 12 — REVIEWS SLIDER -->
<!-- ЗАМЕНА КАРТИНОК: в каждой карточке .krv__card раскомментируйте <img> и вставьте ссылку в src. Плейсхолдер скроется. -->
<style>
#rec2643360801{display:none!important;}
.krv{background:#0C0C0E;padding:88px 0;font-family:'Manrope',-apple-system,Arial,sans-serif;overflow:hidden;position:relative}
.krv *{box-sizing:border-box}
.krv__wrap{max-width:1200px;margin:0 auto;padding:0 40px}
.krv__eyebrow{display:inline-flex;align-items:center;gap:10px;color:#6D5DFB;font-size:12px;font-weight:600;letter-spacing:2px;text-transform:uppercase;margin-bottom:20px}
.krv__eyebrow:before{content:"";width:32px;height:1px;background:#6D5DFB}
.krv__h2{font-family:'Unbounded',sans-serif;font-weight:700;color:#F5F3EF;font-size:56px;line-height:1.02;margin:0 0 18px}
.krv__sub{color:#9C9A95;font-size:18px;line-height:1.5;margin:0 0 40px;max-width:640px}
.krv__head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px}
.krv__nav{display:flex;gap:12px;flex-shrink:0;padding-bottom:6px}
.krv__arrow{width:52px;height:52px;border:1px solid #2A2A2E;background:#141416;border-radius:4px;color:#F5F3EF;font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.2s;line-height:1}
.krv__arrow:hover{border-color:#6D5DFB;color:#6D5DFB}
.krv__arrow:disabled{opacity:.3;cursor:default;border-color:#2A2A2E;color:#F5F3EF}
.krv__track{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:4px 40px 20px;margin:0 -40px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.krv__track::-webkit-scrollbar{display:none}
.krv__card{flex:0 0 calc((100% - 48px)/3);scroll-snap-align:start;aspect-ratio:3/4;background:#1B1B1F;border:1px solid #2A2A2E;border-radius:4px;position:relative;overflow:hidden}
.krv__card:before{content:"";position:absolute;inset:0;background:linear-gradient(160deg,rgba(109,93,251,.14),rgba(109,93,251,0) 42%);pointer-events:none}
.krv__ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;color:#66645F}
.krv__ph svg{width:40px;height:40px;opacity:.55}
.krv__ph span{font-size:13px;letter-spacing:.5px}
.krv__card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2}
@media(max-width:960px){
.krv{padding:64px 0}
.krv__wrap{padding:0 24px}
.krv__h2{font-size:38px}
.krv__sub{font-size:16px;margin-bottom:28px}
.krv__track{padding:4px 24px 20px;margin:0 -24px;gap:16px}
.krv__card{flex:0 0 calc((100% - 16px)/2)}
}
@media(max-width:480px){
.krv{padding:52px 0}
.krv__wrap{padding:0 18px}
.krv__h2{font-size:30px}
.krv__head{flex-direction:column;align-items:flex-start}
.krv__nav{display:none}
.krv__track{padding:4px 18px 16px;margin:0 -18px;gap:14px}
.krv__card{flex:0 0 78%}
}

.krv__h2{font-size:clamp(34px,4.2vw,56px);line-height:1.08;text-wrap:balance}
.krv__card--letter{aspect-ratio:3/4.2}
</style>
<section class="krv">
  <div class="krv__wrap">
    <div class="krv__head">
      <div>
        <div class="krv__eyebrow">Отзывы</div>
        <h2 class="krv__h2">Что говорят клиенты после сдачи проекта</h2>
        <p class="krv__sub">Отзывы клиентов и официальные письма</p>
      </div>
      <div class="krv__nav">
        <button class="krv__arrow" data-krv-prev aria-label="Назад">&#8249;</button>
        <button class="krv__arrow" data-krv-next aria-label="Вперёд">&#8250;</button>
      </div>
    </div>
  </div>
  <div class="krv__wrap" style="padding-right:0">
    <div class="krv__track" data-krv-track></div>
  </div>
</section>
<script>
(function(){
  var track=document.querySelector('[data-krv-track]');
  if(!track||track.dataset.krvInit)return; track.dataset.krvInit=1;
  var ICON='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>';
  var LETTER='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6"/><path d="M8 13h8M8 17h8M8 9h3"/></svg>';
  var html=''; for(var i=0;i<9;i++){
    html+='<div class="krv__card"><div class="krv__ph">'+ICON+'<span>Скриншот отзыва</span></div><!-- <img src="" alt="Отзыв"> --></div>';
  }
  for(var j=0;j<8;j++){
    html+='<div class="krv__card krv__card--letter"><div class="krv__ph">'+LETTER+'<span>Официальное письмо</span></div><!-- <img src="" alt="Официальное письмо"> --></div>';
  }
  track.innerHTML=html;
  var prev=document.querySelector('[data-krv-prev]'),next=document.querySelector('[data-krv-next]');
  function step(){var c=track.querySelector('.krv__card');return c?c.offsetWidth+24:300;}
  function upd(){if(!prev)return;prev.disabled=track.scrollLeft<8;next.disabled=track.scrollLeft+track.clientWidth>=track.scrollWidth-8;}
  if(prev)prev.addEventListener('click',function(){track.scrollLeft-=step();});
  if(next)next.addEventListener('click',function(){track.scrollLeft+=step();});
  track.addEventListener('scroll',upd); setTimeout(upd,60); window.addEventListener('resize',upd);
})();
</script>

rec2657244701 · КОНТАКТЫ / FINAL CTA (3796 симв.)

<!-- KORS BLOCK 16 - FINAL CTA (.kcta) -->
<style>
#rec2656402701{display:none!important;}
#rec2657244701{background:#0C0C0E;overflow:hidden;}
.kcta{--bg:#0C0C0E;--card:#1B1B1F;--border:#2A2A2E;--text:#F5F3EF;--muted:#9C9A95;--faint:#66645F;--accent:#6D5DFB;--hover:#FF7238;}
.kcta *{box-sizing:border-box;}
.kcta{max-width:1120px;margin:0 auto;padding:clamp(72px,9vw,120px) clamp(16px,4vw,40px);text-align:center;font-family:'Manrope',Arial,sans-serif;}
.kcta__eyebrow{display:inline-flex;align-items:center;gap:12px;color:var(--accent);font-family:'Manrope',Arial,sans-serif;font-weight:700;font-size:13px;letter-spacing:2.5px;text-transform:uppercase;margin:0 0 24px;}
.kcta__eyebrow span{display:inline-block;width:36px;height:2px;background:var(--accent);}
.kcta h2{font-family:'Unbounded',sans-serif;font-weight:700;font-size:clamp(34px,6vw,64px);line-height:1.05;letter-spacing:-1px;color:var(--text);margin:0 auto;max-width:900px;}
.kcta__sub{font:400 clamp(16px,2vw,19px)/1.6 'Manrope',Arial,sans-serif;color:var(--muted);margin:20px auto 0;max-width:620px;}
.kcta__btns{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin:44px auto 0;}
.kcta__btn{display:inline-flex;align-items:center;gap:10px;padding:16px 26px;border-radius:4px;font:600 16px/1 'Manrope',Arial,sans-serif;text-decoration:none;transition:.2s;white-space:nowrap;}
.kcta__btn .dot{width:8px;height:8px;border-radius:50%;background:var(--accent);flex:0 0 auto;}
.kcta__btn--primary{background:var(--accent);color:#fff;}
.kcta__btn--primary .dot{background:#0C0C0E;}
.kcta__btn--primary:hover{background:var(--hover);transform:translateY(-2px);}
.kcta__btn--ghost{background:var(--card);color:var(--text);border:1px solid var(--border);}
.kcta__btn--ghost:hover{border-color:var(--accent);transform:translateY(-2px);}
.kcta__contacts{margin:44px auto 0;color:var(--faint);font:500 15px/1.7 'Manrope',Arial,sans-serif;}
.kcta__contacts a{color:var(--faint);text-decoration:none;transition:.2s;}
.kcta__contacts a:hover{color:var(--muted);}
.kcta__contacts .sep{margin:0 14px;opacity:.5;}
@media(max-width:800px){
  .kcta{padding:56px 20px;}
  .kcta__btns{flex-direction:column;align-items:stretch;gap:12px;}
  .kcta__btn{width:100%;justify-content:center;padding:18px 20px;}
  .kcta__contacts .sep{display:block;height:6px;margin:0;overflow:hidden;color:transparent;}
}
#rec2657244701 .kcta__btn a[href^="tel:"],#rec2657244701 a.kcta__btn[href^="tel:"]{color:var(--text)!important;}

.kcta__sub{max-width:900px}
</style>
<div class="kcta">
  <div class="kcta__eyebrow"><span></span>Контакты</div>
  <h2>Расскажите о вашем производстве</h2>
  <p class="kcta__sub">Предложим, с чего начать - с видео, сайта или комплекта к выставке. Не готовы к разговору? Пришлите ссылку на текущий сайт и презентацию - коротко ответим, что мешает им продавать. Без созвонов и обязательств.</p>
  <div class="kcta__btns">
    <a class="kcta__btn kcta__btn--primary" href="https://t.me/korsprodsale" target="_blank" rel="noopener"><span class="dot"></span>Telegram</a>
    <a class="kcta__btn kcta__btn--ghost" href="https://max.ru/u/f9LHodD0cOJry8jfuI2u_X2FJWCLMC5S4I3JfDhcBC6iBjNcaUyKtbZ9Bto" target="_blank" rel="noopener"><span class="dot"></span>MAX</a>
    <a class="kcta__btn kcta__btn--ghost" href="https://wa.me/79158677996" target="_blank" rel="noopener"><span class="dot"></span>WhatsApp</a>
    <a class="kcta__btn kcta__btn--ghost" href="tel:+79158677996"><span class="dot"></span>Позвонить</a>
    <a class="kcta__btn kcta__btn--ghost" href="mailto:info@korsprod.ru"><span class="dot"></span>Email</a>
  </div>
  <div class="kcta__contacts"><a href="tel:+79158677996">+7 915 867-79-96</a><span class="sep">·</span><a href="mailto:info@korsprod.ru">info@korsprod.ru</a><span class="sep">·</span>Москва</div>
</div>

rec2643266601 · ОТЗЫВЫ / КАРУСЕЛЬ (5948 симв.)

<!-- BLOCK 12 — REVIEWS SLIDER -->
<!-- ЗАМЕНА КАРТИНОК: в каждой карточке .krv__card раскомментируйте <img> и вставьте ссылку в src. Плейсхолдер скроется. -->
<style>
#rec2643360801{display:none!important;}
.krv{background:#0C0C0E;padding:88px 0;font-family:'Manrope',-apple-system,Arial,sans-serif;overflow:hidden;position:relative}
.krv *{box-sizing:border-box}
.krv__wrap{max-width:1200px;margin:0 auto;padding:0 40px}
.krv__eyebrow{display:inline-flex;align-items:center;gap:10px;color:#6D5DFB;font-size:12px;font-weight:600;letter-spacing:2px;text-transform:uppercase;margin-bottom:20px}
.krv__eyebrow:before{content:"";width:32px;height:1px;background:#6D5DFB}
.krv__h2{font-family:'Unbounded',sans-serif;font-weight:700;color:#F5F3EF;font-size:56px;line-height:1.02;margin:0 0 18px}
.krv__sub{color:#9C9A95;font-size:18px;line-height:1.5;margin:0 0 40px;max-width:640px}
.krv__head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px}
.krv__nav{display:flex;gap:12px;flex-shrink:0;padding-bottom:6px}
.krv__arrow{width:52px;height:52px;border:1px solid #2A2A2E;background:#141416;border-radius:4px;color:#F5F3EF;font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.2s;line-height:1}
.krv__arrow:hover{border-color:#6D5DFB;color:#6D5DFB}
.krv__arrow:disabled{opacity:.3;cursor:default;border-color:#2A2A2E;color:#F5F3EF}
.krv__track{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:4px 40px 20px;margin:0 -40px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.krv__track::-webkit-scrollbar{display:none}
.krv__card{flex:0 0 calc((100% - 48px)/3);scroll-snap-align:start;aspect-ratio:3/4;background:#1B1B1F;border:1px solid #2A2A2E;border-radius:4px;position:relative;overflow:hidden}
.krv__card:before{content:"";position:absolute;inset:0;background:linear-gradient(160deg,rgba(109,93,251,.14),rgba(109,93,251,0) 42%);pointer-events:none}
.krv__ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;color:#66645F}
.krv__ph svg{width:40px;height:40px;opacity:.55}
.krv__ph span{font-size:13px;letter-spacing:.5px}
.krv__card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2}
@media(max-width:960px){
.krv{padding:64px 0}
.krv__wrap{padding:0 24px}
.krv__h2{font-size:38px}
.krv__sub{font-size:16px;margin-bottom:28px}
.krv__track{padding:4px 24px 20px;margin:0 -24px;gap:16px}
.krv__card{flex:0 0 calc((100% - 16px)/2)}
}
@media(max-width:480px){
.krv{padding:52px 0}
.krv__wrap{padding:0 18px}
.krv__h2{font-size:30px}
.krv__head{flex-direction:column;align-items:flex-start}
.krv__nav{display:none}
.krv__track{padding:4px 18px 16px;margin:0 -18px;gap:14px}
.krv__card{flex:0 0 78%}
}

.krv__h2{font-size:clamp(34px,4.2vw,56px);line-height:1.08;text-wrap:balance}
.krv__card--letter{aspect-ratio:3/4.2}
</style>
<section class="krv">
  <div class="krv__wrap">
    <div class="krv__head">
      <div>
        <div class="krv__eyebrow">Отзывы</div>
        <h2 class="krv__h2">Что говорят клиенты после сдачи проекта</h2>
        <p class="krv__sub">Отзывы клиентов и официальные письма</p>
      </div>
      <div class="krv__nav">
        <button class="krv__arrow" data-krv-prev aria-label="Назад">&#8249;</button>
        <button class="krv__arrow" data-krv-next aria-label="Вперёд">&#8250;</button>
      </div>
    </div>
  </div>
  <div class="krv__wrap" style="padding-right:0">
    <div class="krv__track" data-krv-track></div>
  </div>
</section>
<script>
(function(){
  var track=document.querySelector('[data-krv-track]');
  if(!track||track.dataset.krvInit)return; track.dataset.krvInit=1;
  var ICON='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>';
  var LETTER='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6"/><path d="M8 13h8M8 17h8M8 9h3"/></svg>';
  var html=''; for(var i=0;i<9;i++){
    html+='<div class="krv__card"><div class="krv__ph">'+ICON+'<span>Скриншот отзыва</span></div><!-- <img src="" alt="Отзыв"> --></div>';
  }
  var LETTERS=[
    {src:'https://static.tildacdn.com/tild3231-6563-4932-b139-373433306561/pismo-odoevskie-1200.jpg', alt:'Благодарственное письмо от ООО «МастерДжем» (Одоевские консервы) команде KORS Production за фото- и видеосъёмку производства и материалы для сайта и презентаций'},
    {src:'https://static.tildacdn.com/tild3461-6534-4530-b265-323334643764/pismo-invoicebox-120.jpg', alt:'Благодарственное письмо от ООО «Объединённый расчётный центр» команде KORS Production за видеоматериалы для платформы InvoiceBox'},
    {src:'https://static.tildacdn.com/tild3665-6165-4336-a262-666463636263/pismo-visteks-1200.jpg', alt:'Благодарственное письмо от ООО «Вистекс» за организацию и съёмку видеоматериалов о предприятии'}
  ];
  for(var j=0;j<8;j++){
    var L=LETTERS[j];
    html+='<div class="krv__card krv__card--letter">'+(L?'<img src="'+L.src+'" alt="'+L.alt+'" loading="lazy">':'<div class="krv__ph">'+LETTER+'<span>Официальное письмо</span></div><!-- <img src="" alt="Официальное письмо"> -->')+'</div>';
  }
  track.innerHTML=html;
  var prev=document.querySelector('[data-krv-prev]'),next=document.querySelector('[data-krv-next]');
  function step(){var c=track.querySelector('.krv__card');return c?c.offsetWidth+24:300;}
  function upd(){if(!prev)return;prev.disabled=track.scrollLeft<8;next.disabled=track.scrollLeft+track.clientWidth>=track.scrollWidth-8;}
  if(prev)prev.addEventListener('click',function(){track.scrollLeft-=step();});
  if(next)next.addEventListener('click',function(){track.scrollLeft+=step();});
  track.addEventListener('scroll',upd); setTimeout(upd,60); window.addEventListener('resize',upd);
})();
</script>

rec2654717001 · БЛОК ЗАЯВКИ (5530 симв.)

<!-- KORS FORM STYLING (.kform) - scoped to native Tilda Form #rec2654498001 -->
<style>
/* ===== Base dark theme ===== */
#rec2654498001{background:#0C0C0E !important;padding:clamp(40px,6vw,80px) 0 !important;overflow:hidden;}
#rec2654498001 .t-container{max-width:1120px;}
#rec2654498001 .t-col_8.t-prefix_2{margin-left:0 !important;max-width:1120px !important;width:100% !important;flex:0 0 100% !important;}

/* ===== 2-column split: form left, heading right ===== */
#rec2654498001 .t-form{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  grid-template-rows:auto;
  gap:0 56px;
  align-items:start;
  max-width:1120px;margin:0 auto;padding:0 clamp(16px,3vw,24px);
  box-sizing:border-box;
}
/* utility / hidden elements: keep them out of the visual grid */
#rec2654498001 .t-form > .js-formaction-services,
#rec2654498001 .t-form > .js-successbox,
#rec2654498001 .t-form > .t-form__errorbox-bottom{grid-column:1;grid-row:2;}
/* form inputs -> left column */
#rec2654498001 .t-form__inputsbox{grid-column:1;grid-row:1;margin:0;}
/* KORS heading -> right column, same row */
#rec2654498001 .kform-head{grid-column:2;grid-row:1;align-self:center;padding-top:4px;}

/* ===== KORS heading panel ===== */
#rec2654498001 .kform-eyebrow{display:flex;align-items:center;gap:12px;margin-bottom:18px;}
#rec2654498001 .kform-eyebrow span{width:30px;height:2px;background:#FF5C1F;display:block;}
#rec2654498001 .kform-eyebrow b{color:#FF5C1F;font:700 12px/1 'Manrope',Arial,sans-serif;letter-spacing:2.5px;text-transform:uppercase;}
#rec2654498001 .kform-title{font-family:'Unbounded',sans-serif;font-weight:700;font-size:clamp(28px,3.4vw,44px);line-height:1.07;letter-spacing:-.02em;color:#F5F3EF;margin:0 0 20px;}
#rec2654498001 .kform-sub{color:#9C9A95;font:400 17px/1.7 'Manrope',Arial,sans-serif;margin:0;max-width:440px;}

/* ===== Fields ===== */
#rec2654498001 .t-input-title{color:#9C9A95 !important;font:600 13px/1.3 'Manrope',Arial,sans-serif !important;letter-spacing:.3px;margin-bottom:8px !important;text-transform:none !important;}
#rec2654498001 .t-input,
#rec2654498001 .t-select,
#rec2654498001 textarea.t-input,
#rec2654498001 .t-input-phonemask__wrap{
  background:#141416 !important;border:1px solid #2A2A2E !important;border-radius:4px !important;
  color:#F5F3EF !important;font-family:'Manrope',Arial,sans-serif !important;font-size:16px !important;
  box-shadow:none !important;-webkit-text-fill-color:#F5F3EF;transition:border-color .2s,background .2s;
}
#rec2654498001 .t-input:focus,
#rec2654498001 .t-select:focus,
#rec2654498001 textarea.t-input:focus,
#rec2654498001 .t-input-phonemask__wrap:focus-within{border-color:#FF5C1F !important;background:#1B1B1F !important;}
#rec2654498001 .t-input::placeholder,
#rec2654498001 textarea.t-input::placeholder{color:#66645F !important;-webkit-text-fill-color:#66645F;opacity:1;}
#rec2654498001 .t-select{appearance:none;-webkit-appearance:none;}
#rec2654498001 .t-select option,
#rec2654498001 select option,
#rec2654498001 option{background:#F5F3EF !important;color:#0C0C0E !important;}
#rec2654498001 .t-input-phonemask__select,
#rec2654498001 .t-input.t-input-phonemask{background:transparent !important;border:none !important;color:#F5F3EF !important;-webkit-text-fill-color:#F5F3EF;}
#rec2654498001 .t-input-phonemask__wrap{display:flex;align-items:center;}

/* ===== Orange submit ===== */
#rec2654498001 .t-submit{
  background:#FF5C1F !important;color:#0C0C0E !important;border:none !important;border-radius:4px !important;
  font-family:'Unbounded',sans-serif !important;font-weight:600 !important;font-size:15px !important;letter-spacing:.2px;
  padding:18px 34px !important;width:100%;transition:background .2s;cursor:pointer;
}
#rec2654498001 .t-submit:hover{background:#FF7238 !important;}

/* consent text */
#rec2654498001 .t-descr_xxs,#rec2654498001 .t-form__errorbox-middle{color:#66645F !important;font-size:12px !important;}

/* hide native block header (we inject our own) */
#rec2654498001 .t-form__title,#rec2654498001 .t-title,#rec2654498001 .t-form__descr{display:none !important;}

/* ===== Mobile: single column, heading on top ===== */
@media(max-width:960px){
  #rec2654498001 .t-form{grid-template-columns:1fr;gap:32px 0;}
  #rec2654498001 .kform-head{grid-column:1 !important;grid-row:1 !important;}
  #rec2654498001 .t-form__inputsbox{grid-column:1 !important;grid-row:2 !important;}
  #rec2654498001 .t-form > .js-formaction-services,
  #rec2654498001 .t-form > .js-successbox,
  #rec2654498001 .t-form > .t-form__errorbox-bottom{grid-row:3;}
  #rec2654498001 .kform-sub{max-width:none;}
}
@media(max-width:480px){#rec2654498001 .kform-title{font-size:28px;}}
</style>

<script>
(function(){
  function build(){
    var rec=document.getElementById('rec2654498001');
    if(!rec) return;
    var form=rec.querySelector('.t-form');
    if(!form || form.querySelector('.kform-head')) return;
    var head=document.createElement('div');
    head.className='kform-head';
    head.innerHTML='<div class="kform-eyebrow"><span></span><b>Заявка</b></div>'+
      '<div class="kform-title">Расскажите о своём производстве - предложим формат работы</div>'+
      '<div class="kform-sub">Опишите задачу в двух-трёх предложениях. Предложим подходящий формат, сроки и предварительную стоимость.</div>';
    form.appendChild(head);
  }
  if(document.readyState!=='loading') build();
  document.addEventListener('DOMContentLoaded',build);
  window.addEventListener('load',build);
  setTimeout(build,400);setTimeout(build,1200);
})();
</script>

rec2663623901 · РАБОТЫ ДЕСКТОП (22299 симв.)

<!-- ===== KORS · НАШИ РАБОТЫ · ДЕСКТОП · блок T123. Показывать ТОЛЬКО на компьютере. ===== -->
<div class="kgald">
  <div class="kgald__head">
    <div class="kgald__eyebrow">- НАШИ РАБОТЫ</div>
    <h2 class="kgald__title">460+ проектов: найдите свою отрасль.</h2>
    <div class="kgald__sub">Сфера, формат и срок по каждому проекту. Нажми «Смотреть полное видео» - откроется на весь экран.</div>
  </div>
  <div class="kgald__filter" id="kgaldFilter" aria-label="Фильтр работ по услугам">
      <button type="button" class="kgald__fbtn is-active" data-f="all">Все</button>
      <button type="button" class="kgald__fbtn" data-f="video">Видео</button>
      <button type="button" class="kgald__fbtn" data-f="site">Сайты</button>
      <button type="button" class="kgald__fbtn" data-f="presentation">Презентации</button>
      <button type="button" class="kgald__fbtn" data-f="brand">Фирменный стиль</button>
      <button type="button" class="kgald__fbtn" data-f="ads">Реклама</button>
    </div>
    <div class="kgald__grid" id="kgaldTop"></div>
  <div class="kgald__hidden" id="kgaldHidden"><div class="kgald__grid" id="kgaldRest"></div></div>
  <div class="kgald__empty" id="kgaldEmpty">По этой услуге в подборке пока нет проектов.</div>
    <div class="kgald__morewrap"><button class="kgald__more" id="kgaldMore"><span class="kgald__mtext">Смотреть все работы</span> <span class="kgald__count">+9</span></button></div>
    <div class="kgald__group" id="kgaldExpWrap">
    <div class="kgald__ghead">
      <div class="kgald__eyebrow">- ГОВОРИМ О ВИДЕО</div>
      <h3 class="kgald__gtitle">Экспертные ролики студии</h3>
      <div class="kgald__gsub">Наш собственный контент, не клиентские заказы: как устроен продакшен, из чего складывается цена и что делает видео рабочим инструментом.</div>
    </div>
    <div class="kgald__grid" id="kgaldExp"></div>
  </div>
  <div class="kgald__lb" id="kgaldLb"><div class="kgald__lbbd"></div><div class="kgald__lbbox"><button class="kgald__lbx" id="kgaldLbx">×</button><div class="kgald__lbframe"><iframe id="kgaldLbIframe" allow="autoplay; fullscreen; encrypted-media; picture-in-picture" allowfullscreen></iframe></div></div></div>
</div>
<style>
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Unbounded:wght@400;600;700;800&display=swap');
.kgald{--bg:#0C0C0E;--raise:#141416;--card:#1B1B1F;--border:#2A2A2E;--text:#F5F3EF;--muted:#9A9A9A;--faint:#6a6a6e;--accent:#6D5DFB;--glow:rgba(109,93,251,.14);
  box-sizing:border-box;background:var(--bg);color:var(--text);font-family:'Manrope',Arial,sans-serif;-webkit-font-smoothing:antialiased;padding:80px 5vw 90px;}
.kgald *{box-sizing:border-box;margin:0;padding:0;}
.kgald__head{max-width:1240px;margin:0 auto 44px;text-align:center;}
.kgald__eyebrow{font-family:'Unbounded';font-size:12px;letter-spacing:.14em;color:var(--accent);margin-bottom:14px;}
.kgald__title{font-family:'Unbounded';font-weight:700;font-size:clamp(30px,3.4vw,48px);letter-spacing:-.02em;margin-bottom:14px;}
.kgald__sub{color:var(--muted);font-size:16px;line-height:1.5;max-width:560px;margin:0 auto;}
.kgald__grid{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.kgald__card{background:var(--raise);border:1px solid var(--border);border-radius:16px;overflow:hidden;transition:.25s;display:flex;flex-direction:column;}
.kgald__card:hover{border-color:rgba(109,93,251,.5);transform:translateY(-3px);box-shadow:0 16px 40px rgba(0,0,0,.4);}
.kgald__video{position:relative;width:100%;aspect-ratio:16/9;background:#000;}
.kgald__video iframe{position:absolute;inset:0;width:100%;height:100%;border:none;pointer-events:none;}
.kgald__body{padding:20px 20px 22px;display:flex;flex-direction:column;flex:1;}
.kgald__name{font-family:'Unbounded';font-weight:700;font-size:20px;margin-bottom:10px;letter-spacing:-.01em;}
.kgald__meta{display:flex;flex-direction:column;gap:6px;margin-bottom:18px;}
.kgald__row{font-size:14px;color:var(--muted);line-height:1.4;}
.kgald__row b{color:var(--text);font-weight:600;}
.kgald__full--nolink{cursor:default}
.kgald__full{margin-top:auto;display:inline-flex;align-items:center;gap:8px;align-self:flex-start;background:transparent;border:1px solid var(--border);color:var(--text);font-family:'Manrope';font-weight:700;font-size:14px;padding:12px 18px;border-radius:9px;cursor:pointer;transition:.2s;}
.kgald__full:hover{border-color:var(--accent);color:var(--accent);}
.kgald__full svg{width:15px;height:15px;flex:none;}
.kgald__hidden{max-width:1240px;margin:0 auto;max-height:0;overflow:hidden;opacity:0;transition:max-height .55s ease,opacity .4s ease,margin-top .4s ease;margin-top:0;}
.kgald__hidden.open{opacity:1;margin-top:22px;}
.kgald__morewrap{text-align:center;margin-top:40px;}
.kgald__more{display:inline-flex;align-items:center;gap:10px;background:var(--accent);color:#fff;font-family:'Manrope';font-weight:700;font-size:15px;padding:16px 30px;border-radius:9px;border:none;cursor:pointer;transition:.25s;}
.kgald__more:hover{transform:translateY(-2px);box-shadow:0 10px 30px var(--glow);}
.kgald__count{font-family:'Unbounded';font-size:12px;background:rgba(0,0,0,.18);padding:3px 8px;border-radius:20px;}
.kgald__more.is-open .kgald__count{display:none;}
.kgald__lb{position:fixed;inset:0;z-index:99999;display:none;align-items:center;justify-content:center;padding:40px;}
.kgald__lb.open{display:flex;}
.kgald__lbbd{position:absolute;inset:0;background:rgba(4,4,6,.9);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);}
.kgald__lbbox{position:relative;width:min(1100px,100%);}
.kgald__lbframe{position:relative;width:100%;aspect-ratio:16/9;background:#000;border-radius:12px;overflow:hidden;border:1px solid var(--border);}
.kgald__lbframe iframe{position:absolute;inset:0;width:100%;height:100%;border:none;}
.kgald__lbx{position:absolute;top:-46px;right:0;width:38px;height:38px;border-radius:9px;background:var(--raise);border:1px solid var(--border);color:var(--text);font-size:22px;line-height:1;cursor:pointer;}
.kgald__lbx:hover{border-color:var(--accent);color:var(--accent);}
.kgald__filter{max-width:1240px;margin:0 auto 26px;display:flex;flex-wrap:nowrap;gap:8px;justify-content:center;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;padding-bottom:2px;}
.kgald__filter::-webkit-scrollbar{display:none;}
.kgald__fbtn{flex:none;background:transparent;border:1px solid var(--border);color:var(--muted);font-family:'Manrope',Arial,sans-serif;font-weight:600;font-size:13px;padding:9px 16px;border-radius:20px;cursor:pointer;transition:.2s;white-space:nowrap;}
.kgald__fbtn:hover{border-color:rgba(109,93,251,.5);color:var(--text);}
.kgald__fbtn.is-active{background:var(--accent);border-color:var(--accent);color:#fff;}
.kgald__tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px;}
.kgald__tag{font-family:'Manrope',Arial,sans-serif;font-weight:600;font-size:9px;line-height:1;text-transform:uppercase;letter-spacing:.14em;color:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.22);border-radius:4px;padding:5px 8px;white-space:nowrap;}
.kgald__desc{font-size:12px;line-height:1.5;color:var(--muted);margin-bottom:14px;}
.kgald__card.is-off{opacity:0;transform:translateY(6px);}
.kgald__empty{max-width:1240px;margin:0 auto;text-align:center;color:var(--muted);font-size:15px;padding:34px 0;display:none;}
.kgald__empty.on{display:block;}
@media (max-width:900px){ .kgald__grid{grid-template-columns:repeat(2,1fr);} .kgald__filter{justify-content:flex-start;} }
@media (max-width:480px){ .kgald{display:none;} }
#rec2663623901 .kgald__count{color:#fff;background:rgba(0,0,0,.32);}
/* KORS: экспертные ролики вынесены в отдельную группу со своим заголовком, поэтому плашка на карточке больше не нужна. */
.kgald__group{margin-top:88px;}
.kgald__ghead{max-width:1240px;margin:0 auto 34px;text-align:center;}
.kgald__gtitle{font-family:'Unbounded';font-weight:700;font-size:clamp(24px,2.4vw,34px);letter-spacing:-.02em;margin-bottom:12px;}
.kgald__gsub{color:var(--muted);font-size:15px;line-height:1.5;max-width:560px;margin:0 auto;}
</style>
<script>
(function(){
  var SLUG={'Видео':'video','Фотосъёмка':'photo','Сайт':'site','Презентация':'presentation','Фирменный стиль':'brand','Реклама':'ads','Дизайн':'design','Трансляция':'live','Продюсирование':'producing'};
  var works=[
    {id:'pd95FJSRFhF27W4YX4ioJJ', full:'3ZsxHkdEuHUubxSAQZDRyG', name:'Одоевские консервы - фильм о заводе', tags:['Видео','Фирменный стиль'], desc:'Показали производство изнутри: цеха, линии, контроль качества. Видео работает на сайте, в переговорах с сетями и на выставках.', alt:'Фильм о заводе Одоевские консервы: цеха, линии и контроль качества'},
    {id:'xgBCJrU3Fy9CtKDXR9R23S', full:'0GfobL6RnAzhPeiopXjNHS', name:'Invoicebox - о компании', sphere:'финансовые технологии (FinTech)', format:'презентационный ролик о компании', term:'6 дней', tags:['Видео','Реклама'], desc:'Имиджевый ролик о платёжном сервисе: чем занимается компания и какие задачи бизнеса закрывает.', alt:'Имиджевый ролик о платёжном сервисе Invoicebox'},
    {id:'iPcFsLF3eYfDYTauhcgjZj', full:'fv7FAnLfbLaDaNJLtSQ74H', name:'Вистекс', sphere:'производство, предприятие', format:'презентационный ролик', term:'15 дней', tags:['Видео','Дизайн'], desc:'Ролик о заводе: восемь направлений производства за три минуты. Дизайн email-письма со встроенным видео для коммерческих предложений.', alt:'Видео о производстве для завода Вистекс'},
    {id:'bZ8JyozhtKdSDiy5xjLoVr', full:'caSE37WujsGB6usgZewyUt', name:'Ресторан Rumi / «ЗНАТЬ»', sphere:'ресторанный бизнес, мероприятия', format:'видео-отчёт о мероприятии', term:'2 дня', tags:['Видео','Трансляция','Презентация'], desc:'Съёмка мероприятий, прямая трансляция и презентации для ресторана.', alt:'Съёмка мероприятия и трансляция для ресторана Rumi'},
    {id:'uiVqp8dWpzNoBt2GweBLs9', full:'vF4hbgW4Umo6U4dDNUFvwv', name:'Новая Формация', sphere:'организация, бизнес', format:'презентационный ролик', term:'4 дня', tags:['Видео','Дизайн'], desc:'Презентационный ролик, афиша и ведение контента.', alt:'Презентационный ролик для проекта Новая Формация'},
    {id:'gHMF2zBsAdSdbcEH9wSZKh', full:'kfd6wYQdCh72VpRPC74Mfs', name:'Редакция ЭКСМО', sphere:'издательский бизнес', format:'съёмка трейлера по сюжету книги', term:'9 дней', tags:['Видео','Дизайн'], desc:'Трейлер книги и афиша для издательства.', alt:'Книжный трейлер для издательства Редакция ЭКСМО'},
    {id:'sRSLqBbjkRWyn31BrY6iny', full:'mZiwnH9uZAdc15hhRsqPvB', name:'Одоевские консервы - термостабильные начинки', tags:['Видео'], desc:'Продуктовый ролик о линейке: как начинки ведут себя при выпечке и что это даёт производителю.', alt:'Продуктовый ролик о термостабильных начинках Одоевские консервы'},
    {id:'uqJ79iyVPcqN1ZtTtjnkAv', full:'gznTZhdFQeZEKZnidVaTbk', name:'GosObmen', sphere:'финансовые услуги', format:'рекламный ролик', term:'3 дня', tags:['Видео','Сайт','Дизайн'], desc:'Рекламные ролики, тексты и сайт. Собрали скрипт для отдела продаж.', alt:'Рекламный ролик и сайт для сервиса Гособмен'},
    {id:'35XkXms5VN3RLJcYsgWsnD', full:'2FXfjS6hYEvLkWNKUveoBx', name:'Invoicebox - оплата в белорусских рублях', tags:['Видео'], desc:'Объясняющий ролик о выходе платёжного сервиса на рынок Беларуси: как принимать оплату в белорусских рублях.', alt:'Ролик об оплате в белорусских рублях в платёжном сервисе Invoicebox'},
    {id:'5zMvPKfeuDf9N7h7P8KuVe', full:'ePXSSA9qFiEgA5WYRdd4FP', name:'Алтай Серикбай - съёмки для личного бренда', tags:['Видео'], desc:'Снимаем контент для эксперта по личностному развитию: студийные выпуски, разговорные форматы, съёмки на ретритах. За время работы - больше десяти роликов.', alt:'Съёмки для личного бренда эксперта по личностному развитию Алтая Серикбая'},
    {id:'bKeihzPbnEbXZarkMcYQZj', full:'6ivtiXKAcQj4dVJN8H1YWs', name:'MediaLive - отчётный ролик с выставки', tags:['Видео','Реклама'], desc:'Сняли отчётное видео с отраслевого события. Организаторы используют его на сайте и в рекламе следующего сезона.', alt:'Отчётный ролик с отраслевой выставки для MediaLive'},
    {id:'8QbWRspZgkLTicEiQpp9su', full:'8QbWRspZgkLTicEiQpp9su', name:'STROBBS - промо зимней коллекции', tags:['Видео','Реклама'], desc:'Проморолик показа новой зимней коллекции российского бренда обуви и одежды.', alt:'Проморолик показа зимней коллекции бренда обуви и одежды STROBBS'},
    {id:'88SCanh4aPU83UFBmThiVa', full:'mJqjXaKQBrdbvirxUTHLLh', name:'Rockstar - клип «На дне»', tags:['Видео'], desc:'Музыкальный клип для артиста.', alt:'Музыкальный клип На дне для артиста Rockstar'},
    {id:'wLtMKZCpf75eYEWMXPEPZY', full:'7Kxs8xzVfCDLtyuG5puNN1', name:'Рокстар', sphere:'медиа', format:'музыкальный клип', term:'12 дней', tags:['Видео','Дизайн'], desc:'Три клипа и обложки для музыкального проекта.', alt:'Музыкальные клипы для проекта Рокстар'},
    {id:'qAV5wXg5oHKKcY6tbgysZd', full:'okapERMYWfdoGagPRmo7uC', name:'Rockstar - клип «Самая грустная песня»', tags:['Видео'], desc:'Первый клип, который мы сняли для артиста.', alt:'Музыкальный клип Самая грустная песня для артиста Rockstar'},
    {id:'vNYi5w7HiQevkdBbPmQ3CR', full:'vNYi5w7HiQevkdBbPmQ3CR', name:'Ювелирный лофт GOLD - ролик о компании', tags:['Видео'], desc:'Рассказали о компании и о том, чем она занимается.', alt:'Ролик о компании для ювелирного лофта GOLD'},
    {id:'6JcPdvqUchXCmzscbTqaos', full:'sRyZwPm3BS9CVspVi2sLx3', name:'Одоевские консервы - нетермостабильные начинки', tags:['Видео'], desc:'Второй ролик линейки: назначение, состав, применение в готовых изделиях.', alt:'Продуктовый ролик о нетермостабильных начинках Одоевские консервы'},
    {id:'8YSeQnzXxmpkmo7uNNcLrF', full:'43yfJckoZggrVouaMMK4zt', name:'YouTube-шоу', sphere:'медиа', format:'съёмка выпусков', term:'14 дней', tags:['Видео','Продюсирование','Реклама'], desc:'Продюсирование и режиссура шоу: съёмка выпусков и рекламное сопровождение.', alt:'Съёмка выпусков YouTube-шоу'},
    {id:'7akHJzKdcoSrPiHtRbRBqk', full:'7akHJzKdcoSrPiHtRbRBqk', name:'Invoicebox - интернет-магазины за пару кликов', tags:['Видео'], desc:'Продуктовый ролик о конструкторе интернет-магазинов внутри сервиса.', alt:'Ролик о конструкторе интернет-магазинов в сервисе Invoicebox'},
    {id:'b66cpVCFFFVycfDvLFXFR3', full:'b66cpVCFFFVycfDvLFXFR3', name:'Invoicebox - как выставить счёт за пару кликов', tags:['Видео'], desc:'Видеоинструкция для пользователей сервиса: выставление счёта по шагам.', alt:'Видеоинструкция по выставлению счёта в сервисе Invoicebox'},
    {id:'eCGHEdUFdSyEjCBXxcsUSC', full:'geGWgessLoxkUKdQ4d4e1q', name:'Шоурил KORS Production', sphere:'создание контента', format:'актуальные работы', term:'2025-й год', tags:['Видео','Продюсирование'], desc:'Шоурил студии: съёмки на производствах и коммерческие проекты разных лет.', alt:'Актуальные работы студии KORS Production'},
    {id:'dsqVruz3QkCKQESGiTUsVR', full:'dsqVruz3QkCKQESGiTUsVR', name:'Твой продакшен тебя обманывает', tags:['Видео'], kors:true, alt:'Экспертное видео KORS: почему продакшен может обманывать заказчика'},
    {id:'uittTC7uyz9hv4HDirTBAG', full:'uittTC7uyz9hv4HDirTBAG', name:'Видео - это не украшение для бизнеса', tags:['Видео'], kors:true, alt:'Экспертное видео KORS о том, зачем бизнесу видео'},
    {id:'aG3Qkc4VfoCcgtJLz6ivbE', full:'aG3Qkc4VfoCcgtJLz6ivbE', name:'Как сэкономить на видеоролике', tags:['Видео'], kors:true, alt:'Экспертное видео KORS о том, как сэкономить на съёмке ролика'},
    {id:'4pzsMBSzheH3Sarx4UFHMd', full:'4pzsMBSzheH3Sarx4UFHMd', name:'Как сделать продающее видео', tags:['Видео'], kors:true, alt:'Экспертное видео KORS о том, как сделать продающее видео'}
  ];
  var FS='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="5 3 19 12 5 21 5 3"/></svg>';
  var lb=document.getElementById('kgaldLb'), lbf=document.getElementById('kgaldLbIframe');
  function openLb(id){ lbf.src='https://kinescope.io/embed/'+id+'?autoplay=true'; lb.classList.add('open'); }
  function closeLb(){ lb.classList.remove('open'); lbf.src=''; }
  document.getElementById('kgaldLbx').addEventListener('click',closeLb);
  lb.querySelector('.kgald__lbbd').addEventListener('click',closeLb);
  function makeCard(w, defer){
    var card=document.createElement('div'); card.className='kgald__card';
    card.setAttribute('data-tags',(w.tags||[]).map(function(t){return SLUG[t]||'';}).join(' '));
    var ttl=(w.alt||w.name).replace(/"/g,'&quot;');
    var q='?autoplay=true&muted=true&loop=true&controls=false&playsInline=true&background=true';
    var ift= defer ? '<iframe data-src="https://kinescope.io/embed/'+w.id+q+'" title="'+ttl+'" aria-label="'+ttl+'" allow="autoplay; fullscreen; encrypted-media; picture-in-picture" allowfullscreen></iframe>'
                   : '<iframe loading="lazy" src="https://kinescope.io/embed/'+w.id+q+'" title="'+ttl+'" aria-label="'+ttl+'" allow="autoplay; fullscreen; encrypted-media; picture-in-picture" allowfullscreen></iframe>';
    var tagsHtml=(w.tags&&w.tags.length)?'<div class="kgald__tags">'+w.tags.map(function(t){return '<span class="kgald__tag">'+t+'</span>';}).join('')+'</div>':'';
    var descHtml=w.desc?'<p class="kgald__desc">'+w.desc+'</p>':'';
    var metaHtml='';
    if(w.sphere||w.format||w.term){ metaHtml='<div class="kgald__meta">'+(w.sphere?'<div class="kgald__row"><b>Сфера:</b> '+w.sphere+'</div>':'')+(w.format?'<div class="kgald__row"><b>Формат:</b> '+w.format+'</div>':'')+(w.term?'<div class="kgald__row"><b>Срок:</b> '+w.term+'</div>':'')+'</div>'; }
    card.innerHTML='<div class="kgald__video">'+ift+'</div><div class="kgald__body"><h3 class="kgald__name">'+w.name+'</h3>'+tagsHtml+descHtml+metaHtml+'<button class="kgald__full'+(w.full?'':' kgald__full--nolink')+'" '+(w.full?'':'aria-disabled="true"')+'>'+FS+'Смотреть полное видео</button></div>';
    if(w.full){ card.querySelector('.kgald__full').addEventListener('click',function(){ openLb(w.full); }); }
    return card;
  }
  var top=document.getElementById('kgaldTop'),rest=document.getElementById('kgaldRest'),box=document.getElementById('kgaldHidden'),more=document.getElementById('kgaldMore');
  var exp=document.getElementById('kgaldExp'), expwrap=document.getElementById('kgaldExpWrap');
  if(!top||!rest||!box||!more)return;
  /* KORS: превью грузятся не пачкой. Плеер получает src только когда карточка подходит к видимой области (запас 300px). Пока карточка спрятана под кнопкой (max-height:0) или скрыта фильтром (display:none), она не пересекается с экраном и ролик не стартует. */
  var io=('IntersectionObserver' in window)?new IntersectionObserver(function(es,ob){
    es.forEach(function(e){
      if(!e.isIntersecting) return;
      var f=e.target.querySelector('iframe[data-src]');
      if(f){ f.src=f.getAttribute('data-src'); f.removeAttribute('data-src'); }
      ob.unobserve(e.target);
    });
  },{root:null,rootMargin:'300px 0px',threshold:0.01}):null;
  function watch(c){
    if(io){ io.observe(c); return; }
    var f=c.querySelector('iframe[data-src]');
    if(f){ f.src=f.getAttribute('data-src'); f.removeAttribute('data-src'); }
  }
  function put(grid,w){ var c=makeCard(w,true); grid.appendChild(c); watch(c); }
  /* KORS: порог показа - 12 карточек, остальные под кнопкой. Экспертные ролики студии идут отдельной группой ниже, флаг kors в данных теперь отвечает за группировку. */
  var TOPN=12;
  var main=works.filter(function(w){return !w.kors;});
  var expert=works.filter(function(w){return !!w.kors;});
  main.slice(0,TOPN).forEach(function(w){put(top,w);});
  main.slice(TOPN).forEach(function(w){put(rest,w);});
  if(exp){ expert.forEach(function(w){put(exp,w);}); }
  var cntEl=more.querySelector('.kgald__count'); if(cntEl){ cntEl.textContent='+'+Math.max(0,main.length-TOPN); }
  var loaded=false, mt=more.querySelector('.kgald__mtext');
  more.addEventListener('click',function(){
    if(!box.classList.contains('open')){
      box.classList.add('open'); box.style.maxHeight=box.scrollHeight+'px';
      setTimeout(function(){if(box.classList.contains('open'))box.style.maxHeight='none';},600);
      more.classList.add('is-open'); mt.textContent='Свернуть';
    }else{
      box.style.maxHeight=box.scrollHeight+'px';
      requestAnimationFrame(function(){box.style.maxHeight='0px';box.classList.remove('open');});
      more.classList.remove('is-open'); mt.textContent='Смотреть все работы';
    }
  });
  window.addEventListener('resize',function(){if(box.classList.contains('open'))box.style.maxHeight='none';});

  /* фильтр по услугам: чистый JS, отбор по data-tags */
  var fwrap=document.getElementById('kgaldFilter'), empty=document.getElementById('kgaldEmpty'), morewrap=more.parentNode;
  function loadRest(){ /* KORS: пачкой больше не грузим - src ставит IntersectionObserver по мере прокрутки. */ }
  function setBox(open){
    if(open){ loadRest(); box.classList.add('open'); box.style.maxHeight='none'; }
    else { box.classList.remove('open'); box.style.maxHeight='0px'; }
  }
  if(fwrap){
    fwrap.addEventListener('click',function(e){
      var b=e.target.closest?e.target.closest('.kgald__fbtn'):null;
      if(!b) return;
      var f=b.getAttribute('data-f'), all=(f==='all'), shown=0, restShown=0, expShown=0;
      fwrap.querySelectorAll('.kgald__fbtn').forEach(function(x){ x.classList.toggle('is-active', x===b); });
      [top,rest,exp].filter(Boolean).forEach(function(grid){
        grid.querySelectorAll('.kgald__card').forEach(function(c){
          var m = all || ((' '+(c.getAttribute('data-tags')||'')+' ').indexOf(' '+f+' ')>-1);
          if(m){
            shown++; if(grid===rest) restShown++; if(grid===exp) expShown++;
            c.style.display='';
            void c.offsetWidth;
            c.classList.remove('is-off');
          } else {
            c.classList.add('is-off');
            setTimeout(function(){ if(c.classList.contains('is-off')) c.style.display='none'; },260);
          }
        });
      });
      if(all){
        setBox(false); morewrap.style.display='';
        more.classList.remove('is-open'); mt.textContent='Смотреть все работы';
      } else {
        setBox(restShown>0); morewrap.style.display='none';
      }
      if(expwrap) expwrap.style.display=(expShown>0)?'':'none';
      if(empty) empty.classList.toggle('on', shown===0);
    });
  }
})();
</script>

rec2663636801 · РАБОТЫ МОБИЛЬНАЯ (22013 симв.)

<!-- ===== KORS · НАШИ РАБОТЫ · МОБИЛКА · блок T123. Показывать ТОЛЬКО на телефоне. ===== -->
<div class="kgalm">
  <div class="kgalm__head">
    <div class="kgalm__eyebrow">- НАШИ РАБОТЫ</div>
    <h2 class="kgalm__title">460+ проектов: найдите свою отрасль.</h2>
    <div class="kgalm__sub">Сфера, формат и срок по каждому проекту. «Смотреть полное видео» - на весь экран.</div>
  </div>
  <div class="kgalm__filter" id="kgalmFilter" aria-label="Фильтр работ по услугам">
    <button type="button" class="kgalm__fbtn is-active" data-f="all">Все</button>
    <button type="button" class="kgalm__fbtn" data-f="video">Видео</button>
    <button type="button" class="kgalm__fbtn" data-f="site">Сайты</button>
    <button type="button" class="kgalm__fbtn" data-f="presentation">Презентации</button>
    <button type="button" class="kgalm__fbtn" data-f="brand">Фирменный стиль</button>
    <button type="button" class="kgalm__fbtn" data-f="ads">Реклама</button>
  </div>
  <div class="kgalm__col" id="kgalmTop"></div>
  <div class="kgalm__hidden" id="kgalmHidden"><div class="kgalm__col" id="kgalmRest"></div></div>
  <div class="kgalm__empty" id="kgalmEmpty">По этой услуге в подборке пока нет проектов.</div>
  <div class="kgalm__morewrap"><button class="kgalm__more" id="kgalmMore"><span class="kgalm__mtext">Смотреть ещё наши работы</span> <span class="kgalm__count">+15</span></button></div>
    <div class="kgalm__group" id="kgalmExpWrap">
    <div class="kgalm__ghead">
      <div class="kgalm__eyebrow">- ГОВОРИМ О ВИДЕО</div>
      <h3 class="kgalm__gtitle">Экспертные ролики студии</h3>
      <div class="kgalm__gsub">Наш собственный контент, не клиентские заказы: как устроен продакшен, из чего складывается цена и что делает видео рабочим инструментом.</div>
    </div>
    <div class="kgalm__col" id="kgalmExp"></div>
  </div>
  <div class="kgalm__lb" id="kgalmLb"><div class="kgalm__lbbd"></div><div class="kgalm__lbbox"><button class="kgalm__lbx" id="kgalmLbx">×</button><div class="kgalm__lbframe"><iframe id="kgalmLbIframe" allow="autoplay; fullscreen; encrypted-media; picture-in-picture" allowfullscreen></iframe></div></div></div>
</div>
<style>
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Unbounded:wght@400;600;700;800&display=swap');
.kgalm{--bg:#0C0C0E;--raise:#141416;--card:#1B1B1F;--border:#2A2A2E;--text:#F5F3EF;--muted:#9A9A9A;--faint:#6a6a6e;--accent:#6D5DFB;--glow:rgba(109,93,251,.14);
  box-sizing:border-box;background:var(--bg);color:var(--text);font-family:'Manrope',Arial,sans-serif;-webkit-font-smoothing:antialiased;padding:56px 20px 64px;}
.kgalm *{box-sizing:border-box;margin:0;padding:0;}
.kgalm__head{margin:0 auto 30px;text-align:center;}
.kgalm__eyebrow{font-family:'Unbounded';font-size:11px;letter-spacing:.14em;color:var(--accent);margin-bottom:12px;}
.kgalm__title{font-family:'Unbounded';font-weight:700;font-size:26px;letter-spacing:-.02em;margin-bottom:12px;line-height:1.15;}
.kgalm__sub{color:var(--muted);font-size:14px;line-height:1.5;max-width:340px;margin:0 auto;}
.kgalm__col{display:flex;flex-direction:column;gap:18px;}
.kgalm__card{background:var(--raise);border:1px solid var(--border);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;}
.kgalm__video{position:relative;width:100%;aspect-ratio:16/9;background:#000;}
.kgalm__video iframe{position:absolute;inset:0;width:100%;height:100%;border:none;pointer-events:none;}
.kgalm__body{padding:18px 18px 20px;display:flex;flex-direction:column;}
.kgalm__name{font-family:'Unbounded';font-weight:700;font-size:18px;margin-bottom:9px;letter-spacing:-.01em;}
.kgalm__meta{display:flex;flex-direction:column;gap:5px;margin-bottom:16px;}
.kgalm__row{font-size:13px;color:var(--muted);line-height:1.4;}
.kgalm__row b{color:var(--text);font-weight:600;}
.kgalm__full--nolink{cursor:default}
.kgalm__full{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:transparent;border:1px solid var(--border);color:var(--text);font-family:'Manrope';font-weight:700;font-size:14px;padding:13px 18px;border-radius:9px;cursor:pointer;width:100%;}
.kgalm__full svg{width:15px;height:15px;flex:none;}
.kgalm__hidden{max-height:0;overflow:hidden;opacity:0;transition:max-height .55s ease,opacity .4s ease,margin-top .4s ease;margin-top:0;}
.kgalm__hidden.open{opacity:1;margin-top:18px;}
.kgalm__morewrap{margin-top:28px;}
.kgalm__more{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;background:var(--accent);color:#fff;font-family:'Manrope';font-weight:700;font-size:15px;padding:16px 24px;border-radius:9px;border:none;cursor:pointer;}
.kgalm__count{font-family:'Unbounded';font-size:12px;background:rgba(0,0,0,.18);padding:3px 8px;border-radius:20px;}
.kgalm__more.is-open .kgalm__count{display:none;}
.kgalm__lb{position:fixed;inset:0;z-index:99999;display:none;align-items:center;justify-content:center;padding:16px;}
.kgalm__lb.open{display:flex;}
.kgalm__lbbd{position:absolute;inset:0;background:rgba(4,4,6,.92);}
.kgalm__lbbox{position:relative;width:100%;}
.kgalm__lbframe{position:relative;width:100%;aspect-ratio:16/9;background:#000;border-radius:12px;overflow:hidden;border:1px solid var(--border);}
.kgalm__lbframe iframe{position:absolute;inset:0;width:100%;height:100%;border:none;}
.kgalm__lbx{position:absolute;top:-44px;right:0;width:38px;height:38px;border-radius:9px;background:var(--raise);border:1px solid var(--border);color:var(--text);font-size:22px;line-height:1;cursor:pointer;}
.kgalm__filter{display:flex;flex-wrap:nowrap;gap:8px;margin:0 -20px 22px;padding:0 20px 2px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;}
.kgalm__filter::-webkit-scrollbar{display:none;}
.kgalm__fbtn{flex:none;background:transparent;border:1px solid var(--border);color:var(--muted);font-family:'Manrope',Arial,sans-serif;font-weight:600;font-size:13px;padding:9px 15px;border-radius:20px;cursor:pointer;white-space:nowrap;transition:.2s;}
.kgalm__fbtn.is-active{background:var(--accent);border-color:var(--accent);color:#fff;}
.kgalm__tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:11px;}
.kgalm__tag{font-family:'Manrope',Arial,sans-serif;font-weight:600;font-size:8px;line-height:1;text-transform:uppercase;letter-spacing:.14em;color:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.22);border-radius:4px;padding:5px 8px;white-space:nowrap;}
.kgalm__desc{font-size:12px;line-height:1.5;color:var(--muted);margin-bottom:13px;}
.kgalm__card{transition:opacity .25s ease,transform .25s ease;}
.kgalm__card.is-off{opacity:0;transform:translateY(6px);}
.kgalm__empty{text-align:center;color:var(--muted);font-size:14px;padding:28px 0;display:none;}
.kgalm__empty.on{display:block;}
@media (min-width:481px){ .kgalm{display:none;} }
/* KORS: экспертные ролики вынесены в отдельную группу со своим заголовком, поэтому плашка на карточке больше не нужна. */
.kgalm__group{margin-top:54px;}
.kgalm__ghead{margin:0 auto 22px;text-align:center;}
.kgalm__gtitle{font-family:'Unbounded';font-weight:700;font-size:22px;letter-spacing:-.02em;margin-bottom:10px;line-height:1.2;}
.kgalm__gsub{color:var(--muted);font-size:13px;line-height:1.5;max-width:340px;margin:0 auto;}
</style>
<script>
(function(){
  var SLUG={'Видео':'video','Фотосъёмка':'photo','Сайт':'site','Презентация':'presentation','Фирменный стиль':'brand','Реклама':'ads','Дизайн':'design','Трансляция':'live','Продюсирование':'producing'};
  var works=[
    {id:'pd95FJSRFhF27W4YX4ioJJ', full:'3ZsxHkdEuHUubxSAQZDRyG', name:'Одоевские консервы - фильм о заводе', tags:['Видео','Фирменный стиль'], desc:'Показали производство изнутри: цеха, линии, контроль качества. Видео работает на сайте, в переговорах с сетями и на выставках.', alt:'Фильм о заводе Одоевские консервы: цеха, линии и контроль качества, мобильная версия'},
    {id:'xgBCJrU3Fy9CtKDXR9R23S', full:'0GfobL6RnAzhPeiopXjNHS', name:'Invoicebox - о компании', sphere:'финансовые технологии (FinTech)', format:'презентационный ролик о компании', term:'6 дней', tags:['Видео','Реклама'], desc:'Имиджевый ролик о платёжном сервисе: чем занимается компания и какие задачи бизнеса закрывает.', alt:'Имиджевый ролик о платёжном сервисе Invoicebox, мобильная версия'},
    {id:'iPcFsLF3eYfDYTauhcgjZj', full:'fv7FAnLfbLaDaNJLtSQ74H', name:'Вистекс', sphere:'производство, предприятие', format:'презентационный ролик', term:'15 дней', tags:['Видео','Дизайн'], desc:'Ролик о заводе: восемь направлений производства за три минуты. Дизайн email-письма со встроенным видео для коммерческих предложений.', alt:'Видео о производстве для завода Вистекс, мобильная версия'},
    {id:'bZ8JyozhtKdSDiy5xjLoVr', full:'caSE37WujsGB6usgZewyUt', name:'Ресторан Rumi / «ЗНАТЬ»', sphere:'ресторанный бизнес, мероприятия', format:'видео-отчёт о мероприятии', term:'2 дня', tags:['Видео','Трансляция','Презентация'], desc:'Съёмка мероприятий, прямая трансляция и презентации для ресторана.', alt:'Съёмка мероприятия и трансляция для ресторана Rumi, мобильная версия'},
    {id:'uiVqp8dWpzNoBt2GweBLs9', full:'vF4hbgW4Umo6U4dDNUFvwv', name:'Новая Формация', sphere:'организация, бизнес', format:'презентационный ролик', term:'4 дня', tags:['Видео','Дизайн'], desc:'Презентационный ролик, афиша и ведение контента.', alt:'Презентационный ролик для проекта Новая Формация, мобильная версия'},
    {id:'gHMF2zBsAdSdbcEH9wSZKh', full:'kfd6wYQdCh72VpRPC74Mfs', name:'Редакция ЭКСМО', sphere:'издательский бизнес', format:'съёмка трейлера по сюжету книги', term:'9 дней', tags:['Видео','Дизайн'], desc:'Трейлер книги и афиша для издательства.', alt:'Книжный трейлер для издательства Редакция ЭКСМО, мобильная версия'},
    {id:'sRSLqBbjkRWyn31BrY6iny', full:'mZiwnH9uZAdc15hhRsqPvB', name:'Одоевские консервы - термостабильные начинки', tags:['Видео'], desc:'Продуктовый ролик о линейке: как начинки ведут себя при выпечке и что это даёт производителю.', alt:'Продуктовый ролик о термостабильных начинках Одоевские консервы, мобильная версия'},
    {id:'uqJ79iyVPcqN1ZtTtjnkAv', full:'gznTZhdFQeZEKZnidVaTbk', name:'GosObmen', sphere:'финансовые услуги', format:'рекламный ролик', term:'3 дня', tags:['Видео','Сайт','Дизайн'], desc:'Рекламные ролики, тексты и сайт. Собрали скрипт для отдела продаж.', alt:'Рекламный ролик и сайт для сервиса Гособмен, мобильная версия'},
    {id:'35XkXms5VN3RLJcYsgWsnD', full:'2FXfjS6hYEvLkWNKUveoBx', name:'Invoicebox - оплата в белорусских рублях', tags:['Видео'], desc:'Объясняющий ролик о выходе платёжного сервиса на рынок Беларуси: как принимать оплату в белорусских рублях.', alt:'Ролик об оплате в белорусских рублях в платёжном сервисе Invoicebox, мобильная версия'},
    {id:'5zMvPKfeuDf9N7h7P8KuVe', full:'ePXSSA9qFiEgA5WYRdd4FP', name:'Алтай Серикбай - съёмки для личного бренда', tags:['Видео'], desc:'Снимаем контент для эксперта по личностному развитию: студийные выпуски, разговорные форматы, съёмки на ретритах. За время работы - больше десяти роликов.', alt:'Съёмки для личного бренда эксперта по личностному развитию Алтая Серикбая, мобильная версия'},
    {id:'bKeihzPbnEbXZarkMcYQZj', full:'6ivtiXKAcQj4dVJN8H1YWs', name:'MediaLive - отчётный ролик с выставки', tags:['Видео','Реклама'], desc:'Сняли отчётное видео с отраслевого события. Организаторы используют его на сайте и в рекламе следующего сезона.', alt:'Отчётный ролик с отраслевой выставки для MediaLive, мобильная версия'},
    {id:'8QbWRspZgkLTicEiQpp9su', full:'8QbWRspZgkLTicEiQpp9su', name:'STROBBS - промо зимней коллекции', tags:['Видео','Реклама'], desc:'Проморолик показа новой зимней коллекции российского бренда обуви и одежды.', alt:'Проморолик показа зимней коллекции бренда обуви и одежды STROBBS, мобильная версия'},
    {id:'88SCanh4aPU83UFBmThiVa', full:'mJqjXaKQBrdbvirxUTHLLh', name:'Rockstar - клип «На дне»', tags:['Видео'], desc:'Музыкальный клип для артиста.', alt:'Музыкальный клип На дне для артиста Rockstar, мобильная версия'},
    {id:'wLtMKZCpf75eYEWMXPEPZY', full:'7Kxs8xzVfCDLtyuG5puNN1', name:'Рокстар', sphere:'медиа', format:'музыкальный клип', term:'12 дней', tags:['Видео','Дизайн'], desc:'Три клипа и обложки для музыкального проекта.', alt:'Музыкальные клипы для проекта Рокстар, мобильная версия'},
    {id:'qAV5wXg5oHKKcY6tbgysZd', full:'okapERMYWfdoGagPRmo7uC', name:'Rockstar - клип «Самая грустная песня»', tags:['Видео'], desc:'Первый клип, который мы сняли для артиста.', alt:'Музыкальный клип Самая грустная песня для артиста Rockstar, мобильная версия'},
    {id:'vNYi5w7HiQevkdBbPmQ3CR', full:'vNYi5w7HiQevkdBbPmQ3CR', name:'Ювелирный лофт GOLD - ролик о компании', tags:['Видео'], desc:'Рассказали о компании и о том, чем она занимается.', alt:'Ролик о компании для ювелирного лофта GOLD, мобильная версия'},
    {id:'6JcPdvqUchXCmzscbTqaos', full:'sRyZwPm3BS9CVspVi2sLx3', name:'Одоевские консервы - нетермостабильные начинки', tags:['Видео'], desc:'Второй ролик линейки: назначение, состав, применение в готовых изделиях.', alt:'Продуктовый ролик о нетермостабильных начинках Одоевские консервы, мобильная версия'},
    {id:'8YSeQnzXxmpkmo7uNNcLrF', full:'43yfJckoZggrVouaMMK4zt', name:'YouTube-шоу', sphere:'медиа', format:'съёмка выпусков', term:'14 дней', tags:['Видео','Продюсирование','Реклама'], desc:'Продюсирование и режиссура шоу: съёмка выпусков и рекламное сопровождение.', alt:'Съёмка выпусков YouTube-шоу, мобильная версия'},
    {id:'7akHJzKdcoSrPiHtRbRBqk', full:'7akHJzKdcoSrPiHtRbRBqk', name:'Invoicebox - интернет-магазины за пару кликов', tags:['Видео'], desc:'Продуктовый ролик о конструкторе интернет-магазинов внутри сервиса.', alt:'Ролик о конструкторе интернет-магазинов в сервисе Invoicebox, мобильная версия'},
    {id:'b66cpVCFFFVycfDvLFXFR3', full:'b66cpVCFFFVycfDvLFXFR3', name:'Invoicebox - как выставить счёт за пару кликов', tags:['Видео'], desc:'Видеоинструкция для пользователей сервиса: выставление счёта по шагам.', alt:'Видеоинструкция по выставлению счёта в сервисе Invoicebox, мобильная версия'},
    {id:'eCGHEdUFdSyEjCBXxcsUSC', full:'geGWgessLoxkUKdQ4d4e1q', name:'Шоурил KORS Production', sphere:'создание контента', format:'актуальные работы', term:'2025-й год', tags:['Видео','Продюсирование'], desc:'Шоурил студии: съёмки на производствах и коммерческие проекты разных лет.', alt:'Актуальные работы студии KORS Production, мобильная версия'},
    {id:'dsqVruz3QkCKQESGiTUsVR', full:'dsqVruz3QkCKQESGiTUsVR', name:'Твой продакшен тебя обманывает', tags:['Видео'], kors:true, alt:'Экспертное видео KORS: почему продакшен может обманывать заказчика, мобильная версия'},
    {id:'uittTC7uyz9hv4HDirTBAG', full:'uittTC7uyz9hv4HDirTBAG', name:'Видео - это не украшение для бизнеса', tags:['Видео'], kors:true, alt:'Экспертное видео KORS о том, зачем бизнесу видео, мобильная версия'},
    {id:'aG3Qkc4VfoCcgtJLz6ivbE', full:'aG3Qkc4VfoCcgtJLz6ivbE', name:'Как сэкономить на видеоролике', tags:['Видео'], kors:true, alt:'Экспертное видео KORS о том, как сэкономить на съёмке ролика, мобильная версия'},
    {id:'4pzsMBSzheH3Sarx4UFHMd', full:'4pzsMBSzheH3Sarx4UFHMd', name:'Как сделать продающее видео', tags:['Видео'], kors:true, alt:'Экспертное видео KORS о том, как сделать продающее видео, мобильная версия'}
  ];
  var FS='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="5 3 19 12 5 21 5 3"/></svg>';
  var lb=document.getElementById('kgalmLb'), lbf=document.getElementById('kgalmLbIframe');
  function openLb(id){ lbf.src='https://kinescope.io/embed/'+id+'?autoplay=true'; lb.classList.add('open'); }
  function closeLb(){ lb.classList.remove('open'); lbf.src=''; }
  document.getElementById('kgalmLbx').addEventListener('click',closeLb);
  lb.querySelector('.kgalm__lbbd').addEventListener('click',closeLb);
  function makeCard(w, defer){
    var card=document.createElement('div'); card.className='kgalm__card';
    card.setAttribute('data-tags',(w.tags||[]).map(function(t){return SLUG[t]||'';}).join(' '));
    var ttl=(w.alt||w.name).replace(/"/g,'&quot;');
    var q='?autoplay=true&muted=true&loop=true&controls=false&playsInline=true&background=true';
    var ift= defer ? '<iframe data-src="https://kinescope.io/embed/'+w.id+q+'" title="'+ttl+'" aria-label="'+ttl+'" allow="autoplay; fullscreen; encrypted-media; picture-in-picture" allowfullscreen></iframe>'
                   : '<iframe loading="lazy" src="https://kinescope.io/embed/'+w.id+q+'" title="'+ttl+'" aria-label="'+ttl+'" allow="autoplay; fullscreen; encrypted-media; picture-in-picture" allowfullscreen></iframe>';
    var tagsHtml=(w.tags&&w.tags.length)?'<div class="kgalm__tags">'+w.tags.map(function(t){return '<span class="kgalm__tag">'+t+'</span>';}).join('')+'</div>':'';
    var descHtml=w.desc?'<p class="kgalm__desc">'+w.desc+'</p>':'';
    var metaHtml='';
    if(w.sphere||w.format||w.term){ metaHtml='<div class="kgalm__meta">'+(w.sphere?'<div class="kgalm__row"><b>Сфера:</b> '+w.sphere+'</div>':'')+(w.format?'<div class="kgalm__row"><b>Формат:</b> '+w.format+'</div>':'')+(w.term?'<div class="kgalm__row"><b>Срок:</b> '+w.term+'</div>':'')+'</div>'; }
    card.innerHTML='<div class="kgalm__video">'+ift+'</div><div class="kgalm__body"><h3 class="kgalm__name">'+w.name+'</h3>'+tagsHtml+descHtml+metaHtml+'<button class="kgalm__full'+(w.full?'':' kgalm__full--nolink')+'" '+(w.full?'':'aria-disabled="true"')+'>'+FS+'Смотреть полное видео</button></div>';
    if(w.full){ card.querySelector('.kgalm__full').addEventListener('click',function(){ openLb(w.full); }); }
    return card;
  }
  var top=document.getElementById('kgalmTop'),rest=document.getElementById('kgalmRest'),box=document.getElementById('kgalmHidden'),more=document.getElementById('kgalmMore');
  var exp=document.getElementById('kgalmExp'), expwrap=document.getElementById('kgalmExpWrap');
  if(!top||!rest||!box||!more)return;
  /* KORS: превью грузятся не пачкой. Плеер получает src только когда карточка подходит к видимой области (запас 250px). Пока карточка спрятана под кнопкой (max-height:0) или скрыта фильтром (display:none), она не пересекается с экраном и ролик не стартует. */
  var io=('IntersectionObserver' in window)?new IntersectionObserver(function(es,ob){
    es.forEach(function(e){
      if(!e.isIntersecting) return;
      var f=e.target.querySelector('iframe[data-src]');
      if(f){ f.src=f.getAttribute('data-src'); f.removeAttribute('data-src'); }
      ob.unobserve(e.target);
    });
  },{root:null,rootMargin:'250px 0px',threshold:0.01}):null;
  function watch(c){
    if(io){ io.observe(c); return; }
    var f=c.querySelector('iframe[data-src]');
    if(f){ f.src=f.getAttribute('data-src'); f.removeAttribute('data-src'); }
  }
  function put(grid,w){ var c=makeCard(w,true); grid.appendChild(c); watch(c); }
  /* KORS: порог показа на телефоне - 6 карточек (одна колонка, 12 было бы простынёй), остальные под кнопкой. Экспертные ролики студии идут отдельной группой ниже, флаг kors в данных теперь отвечает за группировку. */
  var TOPN=6;
  var main=works.filter(function(w){return !w.kors;});
  var expert=works.filter(function(w){return !!w.kors;});
  main.slice(0,TOPN).forEach(function(w){put(top,w);});
  main.slice(TOPN).forEach(function(w){put(rest,w);});
  if(exp){ expert.forEach(function(w){put(exp,w);}); }
  var cntEl=more.querySelector('.kgalm__count'); if(cntEl){ cntEl.textContent='+'+Math.max(0,main.length-TOPN); }
  var loaded=false, mt=more.querySelector('.kgalm__mtext');
  more.addEventListener('click',function(){
    if(!box.classList.contains('open')){
      box.classList.add('open'); box.style.maxHeight=box.scrollHeight+'px';
      setTimeout(function(){if(box.classList.contains('open'))box.style.maxHeight='none';},600);
      more.classList.add('is-open'); mt.textContent='Свернуть';
    }else{
      box.style.maxHeight=box.scrollHeight+'px';
      requestAnimationFrame(function(){box.style.maxHeight='0px';box.classList.remove('open');});
      more.classList.remove('is-open'); mt.textContent='Смотреть ещё наши работы';
    }
  });
  window.addEventListener('resize',function(){if(box.classList.contains('open'))box.style.maxHeight='none';});

  /* фильтр по услугам: чистый JS, отбор по data-tags */
  var fwrap=document.getElementById('kgalmFilter'), empty=document.getElementById('kgalmEmpty'), morewrap=more.parentNode;
  function loadRest(){ /* KORS: пачкой больше не грузим - src ставит IntersectionObserver по мере прокрутки. */ }
  function setBox(open){
    if(open){ loadRest(); box.classList.add('open'); box.style.maxHeight='none'; }
    else { box.classList.remove('open'); box.style.maxHeight='0px'; }
  }
  if(fwrap){
    fwrap.addEventListener('click',function(e){
      var b=e.target.closest?e.target.closest('.kgalm__fbtn'):null;
      if(!b) return;
      var f=b.getAttribute('data-f'), all=(f==='all'), shown=0, restShown=0, expShown=0;
      fwrap.querySelectorAll('.kgalm__fbtn').forEach(function(x){ x.classList.toggle('is-active', x===b); });
      if(b.scrollIntoView) b.scrollIntoView({block:'nearest',inline:'nearest'});
      [top,rest,exp].filter(Boolean).forEach(function(grid){
        grid.querySelectorAll('.kgalm__card').forEach(function(c){
          var m = all || ((' '+(c.getAttribute('data-tags')||'')+' ').indexOf(' '+f+' ')>-1);
          if(m){
            shown++; if(grid===rest) restShown++; if(grid===exp) expShown++;
            c.style.display='';
            void c.offsetWidth;
            c.classList.remove('is-off');
          } else {
            c.classList.add('is-off');
            setTimeout(function(){ if(c.classList.contains('is-off')) c.style.display='none'; },260);
          }
        });
      });
      if(all){
        setBox(false); morewrap.style.display='';
        more.classList.remove('is-open'); mt.textContent='Смотреть ещё наши работы';
      } else {
        setBox(restShown>0); morewrap.style.display='none';
      }
      if(expwrap) expwrap.style.display=(expShown>0)?'':'none';
      if(empty) empty.classList.toggle('on', shown===0);
    });
  }
})();
</script>

rec2704386401 · ПОДВАЛ СКВОЗНОЙ (5198 симв.)

<!-- ===== KORS · ПОДВАЛ (сквозной) · блок T123. Один адаптивный блок. Поставить в самый низ. ===== -->
<div class="kfoot-wrap">
  <footer class="kfoot" id="ksfooter">
    <div class="kfoot__top">
      <div class="kfoot__brand">
        <a class="kfoot__logo" href="/">KORS</a>
        <div class="kfoot__slogan">KORS - студия для производственных компаний. Видео, сайты, презентации, фото и дизайн материалов для продаж.</div>
        <div class="kfoot__city">МОСКВА · РАБОТАЕМ С 2019 ГОДА</div>
      </div>
      <div class="kfoot__col">
        <div class="kfoot__h">Разделы</div>
        <a href="/#rec2649099901">Услуги</a>
        <a href="/photographers">Фотосъёмка</a>
        <a href="/sites">Создание сайтов</a>
        <a href="/#rec2667018101">Кейсы</a>
        <a href="/#rec2663623901">Работы</a>
      </div>
      <div class="kfoot__col">
        <div class="kfoot__h">Связаться</div>
        <a href="tel:+79158677996">+7 915 867-79-96</a>
        <a href="https://wa.me/79158677996" target="_blank" rel="noopener">WhatsApp</a>
        <a href="https://t.me/korsprodsale" target="_blank" rel="noopener">Telegram - личный</a>
        <a href="https://t.me/KORSproduct" target="_blank" rel="noopener">Telegram - канал</a>
        <a href="https://max.ru/u/f9LHodD0cOJry8jfuI2u_X2FJWCLMC5S4I3JfDhcBC6iBjNcaUyKtbZ9Bto" target="_blank" rel="noopener">MAX</a>
        <a href="mailto:info@korsprod.ru">info@korsprod.ru</a>
      </div>
      <div class="kfoot__cta">
        <div class="kfoot__ctah">Обсудим ваш проект?</div>
        <a class="kfoot__ctabtn" href="#popup:zayavka">Оставить заявку →</a>
      </div>
    </div>
    <div class="kfoot__bottom">
      <div class="kfoot__req">ИП Кормышова Наталия Михайловна · ИНН 682801718806 · ОГРНИП 326680000032471<br>Офис: 393251, Тамбовская обл., г. Рассказово, ул. Цыплухина, д. 80</div>
      <div class="kfoot__legal">
        <a href="https://korsprod.ru/policy" target="_blank" rel="noopener">Политика конфиденциальности</a>
        <a href="https://korsprod.ru/user-agreement" target="_blank" rel="noopener">Пользовательское соглашение</a>
      </div>
      <div class="kfoot__copy">© 2019–2026 KORS</div>
      <div class="kfoot__rights">Все права защищены. Любое использование либо копирование материалов или подборки материалов сайта, элементов дизайна и оформления допускается лишь с письменного разрешения правообладателя и только со ссылкой на источник.</div>
    </div>
  </footer>
</div>
<style>
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Unbounded:wght@400;600;700;800&display=swap');
.kfoot-wrap{--bg:#0C0C0E;--raise:#141416;--card:#1B1B1F;--border:#2A2A2E;--text:#F5F3EF;--muted:#9A9A9A;--faint:#6a6a6e;--accent:#6D5DFB;--glow:rgba(109,93,251,.14);box-sizing:border-box;}
.kfoot-wrap *{box-sizing:border-box;margin:0;padding:0;}
.kfoot{background:#08080A;color:var(--text);font-family:'Manrope',Arial,sans-serif;-webkit-font-smoothing:antialiased;padding:70px 5vw 34px;border-top:1px solid var(--border);}
.kfoot__top{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:1.6fr 1fr 1.2fr 1.2fr;gap:40px;padding-bottom:48px;border-bottom:1px solid var(--border);}
.kfoot__logo{font-family:'Unbounded';font-weight:800;font-size:34px;color:var(--text);text-decoration:none;letter-spacing:-.02em;display:inline-block;margin-bottom:16px;}
.kfoot__slogan{color:var(--muted);font-size:14px;line-height:1.6;max-width:360px;margin-bottom:16px;}
.kfoot__city{font-family:'Unbounded';font-size:11px;letter-spacing:.1em;color:var(--faint);}
.kfoot__h{font-family:'Unbounded';font-size:12px;letter-spacing:.08em;color:var(--faint);margin-bottom:16px;}
.kfoot__col{display:flex;flex-direction:column;gap:11px;}
.kfoot__col a{color:var(--muted);text-decoration:none;font-size:15px;transition:.2s;}
.kfoot__col a:hover{color:var(--accent);}
.kfoot__ctah{font-family:'Unbounded';font-weight:600;font-size:19px;line-height:1.3;margin-bottom:18px;}
.kfoot__ctabtn{display:inline-block;background:var(--accent);color:#fff;text-decoration:none;font-weight:700;font-size:15px;padding:14px 24px;border-radius:9px;transition:.2s;}
.kfoot__ctabtn:hover{transform:translateY(-2px);box-shadow:0 10px 26px var(--glow);}
.kfoot__bottom{max-width:1280px;margin:0 auto;padding-top:26px;display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;}
.kfoot__req{color:var(--faint);font-size:12.5px;line-height:1.5;}
.kfoot__legal{display:flex;gap:22px;flex-wrap:wrap;}
.kfoot__legal a{color:var(--muted);text-decoration:none;font-size:12.5px;transition:.2s;}
.kfoot__legal a:hover{color:var(--accent);}
.kfoot__copy{color:var(--faint);font-size:12.5px;}
.kfoot__rights{flex:0 0 100%;color:var(--faint);font-size:12.5px;line-height:1.5;}
@media (max-width:900px){ .kfoot__top{grid-template-columns:1fr 1fr;gap:32px;} .kfoot__brand{grid-column:1 / -1;} }
@media (max-width:560px){
  .kfoot{padding:52px 20px 30px;}
  .kfoot__top{grid-template-columns:1fr;gap:30px;}
  .kfoot__bottom{flex-direction:column;align-items:flex-start;gap:12px;}
}
/* фикс: Tilda красит tel: в чёрный - возвращаем цвет */
.kfoot-wrap a[href^="tel:"]{color:var(--muted)!important;}
</style>

rec2643266601 · ОТЗЫВЫ / ПИСЬМА (8031 симв.)

<!-- BLOCK 12 — REVIEWS SLIDER -->
<!-- ЗАМЕНА КАРТИНОК: в каждой карточке .krv__card раскомментируйте <img> и вставьте ссылку в src. Плейсхолдер скроется. -->
<style>
#rec2643360801{display:none!important;}
.krv{background:#0C0C0E;padding:88px 0;font-family:'Manrope',-apple-system,Arial,sans-serif;overflow:hidden;position:relative}
.krv *{box-sizing:border-box}
.krv__wrap{max-width:1200px;margin:0 auto;padding:0 40px}
.krv__card--letter img{cursor:zoom-in}
.krv__lb{position:fixed;inset:0;z-index:99999;display:none;align-items:center;justify-content:center;padding:40px}
.krv__lb.open{display:flex}
.krv__lbbd{position:absolute;inset:0;background:rgba(4,4,6,.9);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.krv__lbbox{position:relative;width:auto;max-width:min(900px,100%);display:flex;align-items:center;justify-content:center}
.krv__lbbox img{display:block;max-width:100%;max-height:calc(100vh - 140px);width:auto;height:auto;border-radius:12px;border:1px solid #2A2A2E;background:#141416}
.krv__lbx{position:absolute;top:-46px;right:0;width:38px;height:38px;border-radius:9px;background:#141416;border:1px solid #2A2A2E;color:#F5F3EF;font-size:22px;line-height:1;cursor:pointer;z-index:2}
.krv__lbx:hover{border-color:#6D5DFB;color:#6D5DFB}
@media(max-width:640px){.krv__lb{padding:64px 16px 16px}.krv__lbx{position:fixed;top:14px;right:14px}.krv__lbbox img{max-height:calc(100vh - 100px)}}
.krv__eyebrow{display:inline-flex;align-items:center;gap:10px;color:#6D5DFB;font-size:12px;font-weight:600;letter-spacing:2px;text-transform:uppercase;margin-bottom:20px}
.krv__eyebrow:before{content:"";width:32px;height:1px;background:#6D5DFB}
.krv__h2{font-family:'Unbounded',sans-serif;font-weight:700;color:#F5F3EF;font-size:56px;line-height:1.02;margin:0 0 18px}
.krv__sub{color:#9C9A95;font-size:18px;line-height:1.5;margin:0 0 40px;max-width:640px}
.krv__head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px}
.krv__nav{display:flex;gap:12px;flex-shrink:0;padding-bottom:6px}
.krv__arrow{width:52px;height:52px;border:1px solid #2A2A2E;background:#141416;border-radius:4px;color:#F5F3EF;font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.2s;line-height:1}
.krv__arrow:hover{border-color:#6D5DFB;color:#6D5DFB}
.krv__arrow:disabled{opacity:.3;cursor:default;border-color:#2A2A2E;color:#F5F3EF}
.krv__track{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:4px 40px 20px;margin:0 -40px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.krv__track::-webkit-scrollbar{display:none}
.krv__card{flex:0 0 calc((100% - 48px)/3);scroll-snap-align:start;aspect-ratio:3/4;background:#1B1B1F;border:1px solid #2A2A2E;border-radius:4px;position:relative;overflow:hidden}
.krv__card:before{content:"";position:absolute;inset:0;background:linear-gradient(160deg,rgba(109,93,251,.14),rgba(109,93,251,0) 42%);pointer-events:none}
.krv__ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;color:#66645F}
.krv__ph svg{width:40px;height:40px;opacity:.55}
.krv__ph span{font-size:13px;letter-spacing:.5px}
.krv__card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2}
@media(max-width:960px){
.krv{padding:64px 0}
.krv__wrap{padding:0 24px}
.krv__h2{font-size:38px}
.krv__sub{font-size:16px;margin-bottom:28px}
.krv__track{padding:4px 24px 20px;margin:0 -24px;gap:16px}
.krv__card{flex:0 0 calc((100% - 16px)/2)}
}
@media(max-width:480px){
.krv{padding:52px 0}
.krv__wrap{padding:0 18px}
.krv__h2{font-size:30px}
.krv__head{flex-direction:column;align-items:flex-start}
.krv__nav{display:none}
.krv__track{padding:4px 18px 16px;margin:0 -18px;gap:14px}
.krv__card{flex:0 0 78%}
}

.krv__h2{font-size:clamp(34px,4.2vw,56px);line-height:1.08;text-wrap:balance}
.krv__card--letter{aspect-ratio:3/4.2}
</style>
<section class="krv">
  <div class="krv__wrap">
    <div class="krv__head">
      <div>
        <div class="krv__eyebrow">Отзывы</div>
        <h2 class="krv__h2">Что говорят клиенты после сдачи проекта</h2>
        <p class="krv__sub">Отзывы клиентов и официальные письма</p>
      </div>
      <div class="krv__nav">
        <button class="krv__arrow" data-krv-prev aria-label="Назад">&#8249;</button>
        <button class="krv__arrow" data-krv-next aria-label="Вперёд">&#8250;</button>
      </div>
    </div>
  </div>
  <div class="krv__wrap" style="padding-right:0">
    <div class="krv__track" data-krv-track></div>
  </div>
</section>
<div class="krv__lb" id="krvLb"><div class="krv__lbbd"></div><div class="krv__lbbox"><button class="krv__lbx" id="krvLbx" aria-label="Закрыть">×</button><img id="krvLbImg" alt=""></div></div>
<script>
(function(){
  var track=document.querySelector('[data-krv-track]');
  if(!track||track.dataset.krvInit)return; track.dataset.krvInit=1;
  var ICON='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>';
  var LETTER='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6"/><path d="M8 13h8M8 17h8M8 9h3"/></svg>';
  var html='', hTail=''; for(var i=0;i<9;i++){
    hTail+='<div class="krv__card"><div class="krv__ph">'+ICON+'<span>Скриншот отзыва</span></div><!-- <img src="" alt="Отзыв"> --></div>';
  }
  var LETTERS=[
    {src:'https://static.tildacdn.com/tild3231-6563-4932-b139-373433306561/pismo-odoevskie-1200.jpg', alt:'Благодарственное письмо от ООО «МастерДжем» (Одоевские консервы) команде KORS Production за фото- и видеосъёмку производства и материалы для сайта и презентаций'},
    {src:'https://static.tildacdn.com/tild3461-6534-4530-b265-323334643764/pismo-invoicebox-120.jpg', alt:'Благодарственное письмо от ООО «Объединённый расчётный центр» команде KORS Production за видеоматериалы для платформы InvoiceBox'},
    {src:'https://static.tildacdn.com/tild3665-6165-4336-a262-666463636263/pismo-visteks-1200.jpg', alt:'Благодарственное письмо от ООО «Вистекс» за организацию и съёмку видеоматериалов о предприятии'}
  ];
  for(var j=0;j<8;j++){
    var L=LETTERS[j];
    var cardL='<div class="krv__card krv__card--letter">'+(L?'<img src="'+L.src+'" alt="'+L.alt+'" loading="lazy">':'<div class="krv__ph">'+LETTER+'<span>Официальное письмо</span></div><!-- <img src="" alt="Официальное письмо"> -->')+'</div>';
    if(L){html+=cardL;}else{hTail+=cardL;}
  }
  track.innerHTML=html+hTail;
  var prev=document.querySelector('[data-krv-prev]'),next=document.querySelector('[data-krv-next]');
  function step(){var c=track.querySelector('.krv__card');return c?c.offsetWidth+24:300;}
  function upd(){if(!prev)return;prev.disabled=track.scrollLeft<8;next.disabled=track.scrollLeft+track.clientWidth>=track.scrollWidth-8;}
  if(prev)prev.addEventListener('click',function(){track.scrollLeft-=step();});
  if(next)next.addEventListener('click',function(){track.scrollLeft+=step();});
  var lb=document.getElementById('krvLb'), lbi=document.getElementById('krvLbImg');
  function krvOpen(src,alt){ lbi.src=src; lbi.alt=alt||''; lb.classList.add('open'); }
  function krvClose(){ lb.classList.remove('open'); lbi.removeAttribute('src'); }
  document.getElementById('krvLbx').addEventListener('click',krvClose);
  lb.addEventListener('click',function(e){ if(e.target.id!=='krvLbImg') krvClose(); });
  document.addEventListener('keydown',function(e){ if((e.key==='Escape'||e.keyCode===27)&&lb.classList.contains('open'))krvClose(); });
  track.addEventListener('click',function(e){
    var c=e.target&&e.target.closest?e.target.closest('.krv__card--letter'):null;
    if(!c)return; var im=c.querySelector('img'); if(!im||!im.getAttribute('src'))return;
    krvOpen(im.getAttribute('src'), im.getAttribute('alt'));
  });
  track.addEventListener('scroll',upd); setTimeout(upd,60); window.addEventListener('resize',upd);
})();
</script>

rec2643266601 · ОТЗЫВЫ / ПИСЬМА (8106 симв.)

<!-- BLOCK 12 — REVIEWS SLIDER -->
<!-- ЗАМЕНА КАРТИНОК: в каждой карточке .krv__card раскомментируйте <img> и вставьте ссылку в src. Плейсхолдер скроется. -->
<style>
#rec2643360801{display:none!important;}
.krv{background:#0C0C0E;padding:88px 0;font-family:'Manrope',-apple-system,Arial,sans-serif;overflow:hidden;position:relative}
.krv *{box-sizing:border-box}
.krv__wrap{max-width:1200px;margin:0 auto;padding:0 40px}
.krv__card--letter img{cursor:zoom-in}
.krv__lb{position:fixed;inset:0;z-index:99999;display:none;align-items:center;justify-content:center;padding:40px}
.krv__lb.open{display:flex}
.krv__lbbd{position:absolute;inset:0;background:rgba(4,4,6,.9);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.krv__lbbox{position:relative;width:auto;max-width:min(900px,100%);display:flex;align-items:center;justify-content:center}
.krv__lbbox img{display:block;max-width:100%;max-height:calc(100vh - 140px);width:auto;height:auto;border-radius:12px;border:1px solid #2A2A2E;background:#141416}
.krv__lbx{position:absolute;top:-46px;right:0;width:38px;height:38px;border-radius:9px;background:#141416;border:1px solid #2A2A2E;color:#F5F3EF;font-size:22px;line-height:1;cursor:pointer;z-index:2}
.krv__lbx:hover{border-color:#6D5DFB;color:#6D5DFB}
@media(max-width:640px){.krv__lb{padding:64px 16px 16px}.krv__lbx{position:fixed;top:14px;right:14px}.krv__lbbox img{max-height:calc(100vh - 100px)}}
.krv__eyebrow{display:inline-flex;align-items:center;gap:10px;color:#6D5DFB;font-size:12px;font-weight:600;letter-spacing:2px;text-transform:uppercase;margin-bottom:20px}
.krv__eyebrow:before{content:"";width:32px;height:1px;background:#6D5DFB}
.krv__h2{font-family:'Unbounded',sans-serif;font-weight:700;color:#F5F3EF;font-size:56px;line-height:1.02;margin:0 0 18px}
.krv__sub{color:#9C9A95;font-size:18px;line-height:1.5;margin:0 0 40px;max-width:640px}
.krv__head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px}
.krv__nav{display:flex;gap:12px;flex-shrink:0;padding-bottom:6px}
.krv__arrow{width:52px;height:52px;border:1px solid #2A2A2E;background:#141416;border-radius:4px;color:#F5F3EF;font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.2s;line-height:1}
.krv__arrow:hover{border-color:#6D5DFB;color:#6D5DFB}
.krv__arrow:disabled{opacity:.3;cursor:default;border-color:#2A2A2E;color:#F5F3EF}
.krv__track{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scroll-padding-left:40px;padding:4px 40px 20px;margin:0 -40px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.krv__track::-webkit-scrollbar{display:none}
.krv__card{flex:0 0 calc((100% - 48px)/3);scroll-snap-align:start;aspect-ratio:3/4;background:#1B1B1F;border:1px solid #2A2A2E;border-radius:4px;position:relative;overflow:hidden}
.krv__card:before{content:"";position:absolute;inset:0;background:linear-gradient(160deg,rgba(109,93,251,.14),rgba(109,93,251,0) 42%);pointer-events:none}
.krv__ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;color:#66645F}
.krv__ph svg{width:40px;height:40px;opacity:.55}
.krv__ph span{font-size:13px;letter-spacing:.5px}
.krv__card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2}
@media(max-width:960px){
.krv{padding:64px 0}
.krv__wrap{padding:0 24px}
.krv__h2{font-size:38px}
.krv__sub{font-size:16px;margin-bottom:28px}
.krv__track{scroll-padding-left:24px;padding:4px 24px 20px;margin:0 -24px;gap:16px}
.krv__card{flex:0 0 calc((100% - 16px)/2)}
}
@media(max-width:480px){
.krv{padding:52px 0}
.krv__wrap{padding:0 18px}
.krv__h2{font-size:30px}
.krv__head{flex-direction:column;align-items:flex-start}
.krv__nav{display:none}
.krv__track{scroll-padding-left:18px;padding:4px 18px 16px;margin:0 -18px;gap:14px}
.krv__card{flex:0 0 78%}
}

.krv__h2{font-size:clamp(34px,4.2vw,56px);line-height:1.08;text-wrap:balance}
.krv__card--letter{aspect-ratio:3/4.2}
</style>
<section class="krv">
  <div class="krv__wrap">
    <div class="krv__head">
      <div>
        <div class="krv__eyebrow">Отзывы</div>
        <h2 class="krv__h2">Что говорят клиенты после сдачи проекта</h2>
        <p class="krv__sub">Отзывы клиентов и официальные письма</p>
      </div>
      <div class="krv__nav">
        <button class="krv__arrow" data-krv-prev aria-label="Назад">&#8249;</button>
        <button class="krv__arrow" data-krv-next aria-label="Вперёд">&#8250;</button>
      </div>
    </div>
  </div>
  <div class="krv__wrap" style="padding-right:0">
    <div class="krv__track" data-krv-track></div>
  </div>
</section>
<div class="krv__lb" id="krvLb"><div class="krv__lbbd"></div><div class="krv__lbbox"><button class="krv__lbx" id="krvLbx" aria-label="Закрыть">×</button><img id="krvLbImg" alt=""></div></div>
<script>
(function(){
  var track=document.querySelector('[data-krv-track]');
  if(!track||track.dataset.krvInit)return; track.dataset.krvInit=1;
  var ICON='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>';
  var LETTER='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6"/><path d="M8 13h8M8 17h8M8 9h3"/></svg>';
  var html='', hTail=''; for(var i=0;i<9;i++){
    hTail+='<div class="krv__card"><div class="krv__ph">'+ICON+'<span>Скриншот отзыва</span></div><!-- <img src="" alt="Отзыв"> --></div>';
  }
  var LETTERS=[
    {src:'https://static.tildacdn.com/tild3231-6563-4932-b139-373433306561/pismo-odoevskie-1200.jpg', alt:'Благодарственное письмо от ООО «МастерДжем» (Одоевские консервы) команде KORS Production за фото- и видеосъёмку производства и материалы для сайта и презентаций'},
    {src:'https://static.tildacdn.com/tild3461-6534-4530-b265-323334643764/pismo-invoicebox-120.jpg', alt:'Благодарственное письмо от ООО «Объединённый расчётный центр» команде KORS Production за видеоматериалы для платформы InvoiceBox'},
    {src:'https://static.tildacdn.com/tild3665-6165-4336-a262-666463636263/pismo-visteks-1200.jpg', alt:'Благодарственное письмо от ООО «Вистекс» за организацию и съёмку видеоматериалов о предприятии'}
  ];
  for(var j=0;j<8;j++){
    var L=LETTERS[j];
    var cardL='<div class="krv__card krv__card--letter">'+(L?'<img src="'+L.src+'" alt="'+L.alt+'" loading="lazy">':'<div class="krv__ph">'+LETTER+'<span>Официальное письмо</span></div><!-- <img src="" alt="Официальное письмо"> -->')+'</div>';
    if(L){html+=cardL;}else{hTail+=cardL;}
  }
  track.innerHTML=html+hTail;
  var prev=document.querySelector('[data-krv-prev]'),next=document.querySelector('[data-krv-next]');
  function step(){var c=track.querySelector('.krv__card');return c?c.offsetWidth+24:300;}
  function upd(){if(!prev)return;prev.disabled=track.scrollLeft<8;next.disabled=track.scrollLeft+track.clientWidth>=track.scrollWidth-8;}
  if(prev)prev.addEventListener('click',function(){track.scrollLeft-=step();});
  if(next)next.addEventListener('click',function(){track.scrollLeft+=step();});
  var lb=document.getElementById('krvLb'), lbi=document.getElementById('krvLbImg');
  function krvOpen(src,alt){ lbi.src=src; lbi.alt=alt||''; lb.classList.add('open'); }
  function krvClose(){ lb.classList.remove('open'); lbi.removeAttribute('src'); }
  document.getElementById('krvLbx').addEventListener('click',krvClose);
  lb.addEventListener('click',function(e){ if(e.target.id!=='krvLbImg') krvClose(); });
  document.addEventListener('keydown',function(e){ if((e.key==='Escape'||e.keyCode===27)&&lb.classList.contains('open'))krvClose(); });
  track.addEventListener('click',function(e){
    var c=e.target&&e.target.closest?e.target.closest('.krv__card--letter'):null;
    if(!c)return; var im=c.querySelector('img'); if(!im||!im.getAttribute('src'))return;
    krvOpen(im.getAttribute('src'), im.getAttribute('alt'));
  });
  track.addEventListener('scroll',upd); setTimeout(upd,60); window.addEventListener('resize',upd);
})();
</script>

rec2699474201 · КЕЙС ОДОЕВСКИЕ (22348 симв.)

<!-- ================================================================
     KORS · СТРАНИЦА-КЕЙС · ОДОЕВСКИЕ КОНСЕРВЫ
     ── ЗАПОЛНЕНИЕ ──────────────────────────────────────────────────
     Всё фото/видео вставляется В ОДНОМ МЕСТЕ - в списке ниже (KORS_CASE).
     • Картинки: вставь ссылку на изображение в кавычки. Пусто '' = заглушка.
       Где взять ссылку: загрузи фото в Tilda (Файл-менеджер сайта или любой
       блок «Изображение») и скопируй URL картинки; либо любой прямой URL.
     • Видео: впиши ID ролика Kinescope (часть после kinescope.io/… ). Пусто = заглушка.
     Больше нигде в коде править не нужно - слоты подтянутся сами.
     ================================================================ -->
<script>
window.KORS_CASE = {
  images: {
    cover:        '',   // большая обложка вверху (гориз. фото/визуал)
    firstShoot:   '',   // шаг 01 - кадр первой съёмки начинки
    presentation: '',   // шаг 02 - развороты печатной презентации
    factoryPhoto: '',   // шаг 03 - фото производства (если без видео)
    product1:     '',   // шаг 04 - фото продукции 1
    product2:     '',   // шаг 04 - фото продукции 2
    product3:     '',   // шаг 04 - фото цеха/процесса
    logoBefore:   '',   // шаг 05 - СТАРЫЙ логотип (до)
    logoAfter:    '',   // шаг 05 - НОВЫЙ логотип (после)
    brand1:       '',   // шаг 06 - визитки
    brand2:       '',   // шаг 06 - открытки
    brand3:       '',   // шаг 06 - др. носители
    siteShots:    ''    // шаг 07 - скриншоты сайта RU/EN
  },
  videos: {
    firstShoot:   '',                          // шаг 01 - видео первой съёмки (Kinescope ID)
    factory:      '',                          // шаг 03 - видео о заводе (Kinescope ID)
    main:         'j8Pq4wWMNTPm6Js8UQiM1n'     // блок «Видео проекта» (уже стоит наш ролик)
  }
};
</script>
<div class="kcp">
  <!-- ===== HERO ===== -->
  <header class="kcp__hero">
    <div class="kcp__hero-in">
      <a class="kcp__back" href="/">← Все проекты</a>
      <div class="kcp__eyebrow">КЕЙС · ПИЩЕВОЕ ПРОИЗВОДСТВО</div>
      <h1 class="kcp__title">Одоевские консервы</h1>
      <div class="kcp__tags"><span class="kcp__tag">Видео</span><span class="kcp__tag">Фотосъёмка</span><span class="kcp__tag">Презентация</span><span class="kcp__tag">Фирменный стиль</span><span class="kcp__tag">Сайт</span></div>
      <p class="kcp__lead">Как из одной видеосъёмки выросла полный комплект материалов - от роликов и фотосъёмки до нового логотипа, фирменного стиля и двуязычного сайта для выхода на рынок ОАЭ.</p>
      <div class="kcp__facts">
        <div class="kcp__fact"><span>Сфера</span><b>Пищевое производство · B2B</b></div>
        <div class="kcp__fact"><span>С чего начали</span><b>Видеосъёмка продукта</b></div>
        <div class="kcp__fact"><span>Где сейчас</span><b>Сайт RU/EN · выход на MENA</b></div>
        <div class="kcp__fact"><span>Формат</span><b>полный комплект материалов</b></div>
      </div>
    </div>
    <!-- ВСТАВИТЬ: большое обложечное фото/видео (завод, продукция или кадр со съёмки). Пока заглушка. -->
    <div class="kcp__cover kcp__ph" data-img="cover"><div class="kcp__ph-label">📷 Обложка: фото продукции / кадр со съёмки (16:9)</div></div>
  </header>
  <!-- ===== КТО КЛИЕНТ ===== -->
  <section class="kcp__sec">
    <div class="kcp__grid2">
      <div>
        <div class="kcp__kick">- О КОМПАНИИ</div>
        <h2 class="kcp__h2">Сильное производство, которое было не видно</h2>
      </div>
      <div class="kcp__prose">
        <p>«Одоевские консервы» - производитель из посёлка Одоев в Тульской области. Уже около пятнадцати лет компания выпускает термостабильные фруктово-ягодные начинки, повидло, джемы, конфитюры, пюре и наполнители для хлебопекарной, кондитерской и молочной промышленности.</p>
        <p>Это классический B2B: их продукт - ингредиент, который живёт <b>внутри</b> чужих изделий. Начинка в круассане, повидло в печенье, наполнитель в йогурте. Продукт качественный, производство серьёзное - но со стороны этого масштаба не было видно.</p>
        <p>Видео, сайт, презентация и фирменные материалы существовали разрозненно и не складывались в единую картину. Компанию нельзя было «показать» - только долго объяснять на словах.</p>
      </div>
    </div>
  </section>
  <!-- ===== ЗАДАЧА (акцентная плашка) ===== -->
  <section class="kcp__sec">
    <div class="kcp__callout">
      <div class="kcp__callout-k">ЗАДАЧА</div>
      <div class="kcp__callout-t">Показать масштаб и качество производства так, чтобы партнёр видел уровень компании за несколько минут - а не верил на слово.</div>
    </div>
  </section>
  <!-- ===== ТАЙМЛАЙН РАБОТЫ ===== -->
  <section class="kcp__sec">
    <div class="kcp__kick">- КАК ШЛА РАБОТА</div>
    <h2 class="kcp__h2">Из одной съёмки - в полный цикл</h2>
    <p class="kcp__sub">Сотрудничество началось с одного ролика и постепенно выросло в полный комплект материалов. Вот путь шаг за шагом.</p>
    <ol class="kcp__timeline">
      <li class="kcp__step">
        <div class="kcp__step-num">01</div>
        <div class="kcp__step-body">
          <h3>Первые видео на начинке</h3>
          <p>Начали с двух роликов о продукте. Сняли начинку «в деле» - текстуру, цвет, как она работает в готовом изделии. Это первое, что показывает потенциальному партнёру, что перед ним - качественный ингредиент.</p>
          <!-- ВСТАВИТЬ: сюда можно поставить одно из первых видео (Kinescope) или кадры со съёмки начинки -->
          <div class="kcp__ph kcp__ph--wide" data-video="firstShoot" data-img="firstShoot"><div class="kcp__ph-label">🎬 Видео/кадр первой съёмки начинки</div></div>
        </div>
      </li>
      <li class="kcp__step">
        <div class="kcp__step-num">02</div>
        <div class="kcp__step-body">
          <h3>Печатная презентация</h3>
          <p>Собрали продукт и производство в понятную структуру - презентацию для переговоров и выставок. Разложили ассортимент, преимущества и мощности так, чтобы менеджеру было легко показать компанию клиенту.</p>
          <div class="kcp__ph kcp__ph--wide" data-img="presentation"><div class="kcp__ph-label">📑 Развороты печатной презентации</div></div>
        </div>
      </li>
      <li class="kcp__step">
        <div class="kcp__step-num">03</div>
        <div class="kcp__step-body">
          <h3>Видео о заводе</h3>
          <p>Сняли само производство: масштаб цехов, оборудование, процессы. Именно это видео закрывает главный вопрос B2B-клиента - «а справятся ли по объёму и качеству». Масштаб теперь виден, а не описан словами.</p>
          <div class="kcp__ph kcp__ph--wide" data-video="factory" data-img="factoryPhoto"><div class="kcp__ph-label">🎬 Видео о заводе / кадры производства</div></div>
        </div>
      </li>
      <li class="kcp__step">
        <div class="kcp__step-num">04</div>
        <div class="kcp__step-body">
          <h3>Фотосъёмка для презентации и каталога</h3>
          <p>Сделали предметную и производственную фотосъёмку - продукция, упаковка, цеха. Единый визуальный ряд, который лёг в презентацию, каталог и дальнейшие материалы.</p>
          <div class="kcp__ph kcp__ph--grid">
            <div class="kcp__ph" data-img="product1"><div class="kcp__ph-label">📷 фото продукции 1</div></div>
            <div class="kcp__ph" data-img="product2"><div class="kcp__ph-label">📷 фото продукции 2</div></div>
            <div class="kcp__ph" data-img="product3"><div class="kcp__ph-label">📷 фото цеха / процесса</div></div>
          </div>
        </div>
      </li>
      <li class="kcp__step">
        <div class="kcp__step-num">05</div>
        <div class="kcp__step-body">
          <h3>Новый логотип: до / после</h3>
          <p>Обновили логотип - сохранили узнаваемость, но привели к современному виду, который одинаково хорошо работает на упаковке, в презентации и на сайте. Сравните сами:</p>
          <!-- ДО/ПОСЛЕ слайдер. ВСТАВИТЬ 2 картинки логотипа: старый и новый -->
          <div class="kcp__ba" id="kcpBA">
            <div class="kcp__ba-after kcp__ph" data-img="logoAfter" data-fit="contain"><div class="kcp__ph-label">✅ НОВЫЙ логотип (после)</div></div>
            <div class="kcp__ba-before kcp__ph" id="kcpBABefore" data-img="logoBefore" data-fit="contain"><div class="kcp__ph-label">◻️ СТАРЫЙ логотип (до)</div></div>
            <div class="kcp__ba-handle" id="kcpBAHandle"><span></span></div>
            <div class="kcp__ba-tag kcp__ba-tag--l">ДО</div>
            <div class="kcp__ba-tag kcp__ba-tag--r">ПОСЛЕ</div>
          </div>
          <div class="kcp__ba-hint">Потяните ползунок влево-вправо, чтобы сравнить</div>
        </div>
      </li>
      <li class="kcp__step">
        <div class="kcp__step-num">06</div>
        <div class="kcp__step-body">
          <h3>Фирменный стиль: открытки, визитки, носители</h3>
          <p>Оформили фирменные носители - визитки, открытки и другие материалы в единой стилистике. Компания получила узнаваемый облик, который работает на каждой точке контакта.</p>
          <div class="kcp__ph kcp__ph--grid">
            <div class="kcp__ph" data-img="brand1"><div class="kcp__ph-label">📷 визитки</div></div>
            <div class="kcp__ph" data-img="brand2"><div class="kcp__ph-label">📷 открытки</div></div>
            <div class="kcp__ph" data-img="brand3"><div class="kcp__ph-label">📷 др. носители</div></div>
          </div>
        </div>
      </li>
      <li class="kcp__step">
        <div class="kcp__step-num">07</div>
        <div class="kcp__step-body">
          <h3>Сайт на двух языках - выход на MENA</h3>
          <p>Разработали сайт в двух версиях - русской и английской. Английская версия сделана под рынок ОАЭ и региона MENA: теперь компания может представлять себя международным партнёрам на их языке, с тем же уровнем подачи, что и внутри страны.</p>
          <div class="kcp__ph kcp__ph--wide" data-img="siteShots"><div class="kcp__ph-label">💻 Скриншоты сайта (RU и EN)</div></div>
        </div>
      </li>
      <li class="kcp__step kcp__step--next">
        <div class="kcp__step-num">→</div>
        <div class="kcp__step-body">
          <h3>Что дальше</h3>
          <p>Следующий этап - застройка выставочного стенда (планируется на зиму). Сотрудничество продолжается: от продукта на экране - к тому, как компания выглядит вживую на выставке.</p>
        </div>
      </li>
    </ol>
  </section>
  <!-- ===== РЕЗУЛЬТАТ ===== -->
  <section class="kcp__sec">
    <div class="kcp__result">
      <div class="kcp__kick">- ЧТО ИЗМЕНИЛОСЬ</div>
      <h2 class="kcp__h2">Компанию теперь можно показать, а не пересказывать</h2>
      <div class="kcp__result-grid">
        <div class="kcp__rcard"><div class="kcp__rc-t">Единый комплект</div><p>Видео, фото, презентация, логотип, фирменный стиль и сайт - собраны в одну систему и работают вместе.</p></div>
        <div class="kcp__rcard"><div class="kcp__rc-t">Масштаб за минуты</div><p>Производство и уровень компании видно сразу - на переговорах, выставках и в презентации, без долгих объяснений.</p></div>
        <div class="kcp__rcard"><div class="kcp__rc-t">Выход за рубеж</div><p>Двуязычный сайт открыл дорогу к партнёрам в ОАЭ и регионе MENA.</p></div>
        <div class="kcp__rcard"><div class="kcp__rc-t">Долгое партнёрство</div><p>Сотрудничество выросло из одной видеосъёмки в постоянную работу над материалами компании.</p></div>
      </div>
    </div>
  </section>
  <!-- ===== ЧТО ВОШЛО (услуги) ===== -->
  <section class="kcp__sec">
    <div class="kcp__kick">- ЧТО ВОШЛО В КОМПЛЕКТ</div>
    <div class="kcp__chips">
      <span>Видеопродакшн</span><span>Съёмка производства</span><span>Фотосъёмка</span><span>Печатная презентация</span><span>Редизайн логотипа</span><span>Фирменный стиль</span><span>Визитки и открытки</span><span>Сайт RU</span><span>Сайт EN (MENA)</span>
    </div>
  </section>
  <!-- ===== ВИДЕО КЕЙСА ===== -->
  <section class="kcp__sec">
    <div class="kcp__kick">- СМОТРЕТЬ</div>
    <h2 class="kcp__h2">Видео проекта</h2>
    <div class="kcp__video">
      <iframe src="https://kinescope.io/embed/j8Pq4wWMNTPm6Js8UQiM1n" allow="autoplay; fullscreen; encrypted-media; picture-in-picture" allowfullscreen frameborder="0"></iframe>
    </div>
    <!-- ВСТАВИТЬ при желании: ещё видео (о заводе и т.д.) такими же блоками -->
  </section>
  <!-- ===== CTA ===== -->
  <section class="kcp__cta">
    <h2>Хотите так же показать своё производство?</h2>
    <p>Начнём с одного шага - а вырастем в полный цикл, если понравится результат.</p>
    <a class="kcp__cta-btn" href="#popup:zayavka">Обсудить проект →</a>
  </section>
</div>
<style>
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Unbounded:wght@400;600;700;800&display=swap');
.kcp{--bg:#0C0C0E;--raise:#141416;--card:#1B1B1F;--border:#2A2A2E;--soft:#242428;--text:#F5F3EF;--muted:#9A9A9A;--faint:#6a6a6e;--accent:#6D5DFB;--glow:rgba(109,93,251,.14);
  box-sizing:border-box;background:var(--bg);color:var(--text);font-family:'Manrope',Arial,sans-serif;-webkit-font-smoothing:antialiased;}
.kcp *{box-sizing:border-box;margin:0;padding:0;}
.kcp p{line-height:1.65;}
.kcp__eyebrow,.kcp__kick{font-family:'Unbounded';font-size:12px;letter-spacing:.14em;color:var(--accent);}
.kcp__h2{font-family:'Unbounded';font-weight:700;font-size:clamp(26px,3.2vw,42px);letter-spacing:-.02em;line-height:1.12;margin:14px 0 0;}
.kcp__sub{color:var(--muted);font-size:17px;line-height:1.6;max-width:640px;margin-top:14px;}
/* HERO */
.kcp__hero{padding:70px 6vw 0;max-width:1280px;margin:0 auto;}
.kcp__hero-in{max-width:900px;}
.kcp__back{display:inline-block;color:var(--muted);text-decoration:none;font-size:14px;font-weight:600;margin-bottom:34px;transition:.2s;}
.kcp__back:hover{color:var(--accent);}
.kcp__hero .kcp__eyebrow{margin-bottom:18px;}
.kcp__title{font-family:'Unbounded';font-weight:800;font-size:clamp(40px,7vw,88px);letter-spacing:-.03em;line-height:1;margin-bottom:24px;}
.kcp__lead{font-size:clamp(18px,2vw,22px);line-height:1.55;color:#d8d6d1;max-width:760px;}
.kcp__tags{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 18px;}
.kcp__tag{font-family:'Manrope',Arial,sans-serif;font-weight:600;font-size:9px;line-height:1;text-transform:uppercase;letter-spacing:.14em;color:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.22);border-radius:4px;padding:5px 8px;white-space:nowrap;}
@media (max-width:480px){ .kcp__tag{font-size:8px;padding:5px 7px;} .kcp__tags{gap:5px;margin-bottom:14px;} }
.kcp__facts{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:14px;overflow:hidden;margin-top:44px;}
.kcp__fact{background:var(--raise);padding:20px 22px;display:flex;flex-direction:column;gap:7px;}
.kcp__fact span{font-size:12px;color:var(--faint);text-transform:uppercase;letter-spacing:.06em;}
.kcp__fact b{font-family:'Unbounded';font-weight:600;font-size:14px;line-height:1.3;}
.kcp__cover{margin:48px auto 0;max-width:1280px;aspect-ratio:16/8;border-radius:20px;}
/* SECTIONS */
.kcp__sec{max-width:1080px;margin:0 auto;padding:64px 6vw;}
.kcp__grid2{display:grid;grid-template-columns:0.85fr 1.15fr;gap:48px;align-items:start;}
.kcp__prose p{color:#c9c7c2;font-size:17px;margin-bottom:16px;}
.kcp__prose p:last-child{margin-bottom:0;}
.kcp__prose b{color:var(--text);font-weight:600;}
/* CALLOUT */
.kcp__callout{background:linear-gradient(135deg,rgba(109,93,251,.10),rgba(109,93,251,.02));border:1px solid rgba(109,93,251,.3);border-radius:18px;padding:40px 44px;}
.kcp__callout-k{font-family:'Unbounded';font-size:12px;letter-spacing:.14em;color:var(--accent);margin-bottom:14px;}
.kcp__callout-t{font-family:'Unbounded';font-weight:600;font-size:clamp(20px,2.4vw,30px);line-height:1.35;letter-spacing:-.01em;}
/* TIMELINE */
.kcp__timeline{list-style:none;margin-top:44px;display:flex;flex-direction:column;gap:26px;}
.kcp__step{display:grid;grid-template-columns:88px 1fr;gap:26px;background:var(--raise);border:1px solid var(--border);border-radius:18px;padding:30px 32px;transition:.25s;}
.kcp__step:hover{border-color:rgba(109,93,251,.4);}
.kcp__step-num{font-family:'Unbounded';font-weight:700;font-size:34px;color:var(--accent);line-height:1;opacity:.85;}
.kcp__step-body h3{font-family:'Unbounded';font-weight:600;font-size:22px;letter-spacing:-.01em;margin-bottom:12px;}
.kcp__step-body p{color:#c4c2bd;font-size:16px;}
.kcp__step--next{background:transparent;border-style:dashed;}
.kcp__step--next .kcp__step-num{opacity:1;}
/* PLACEHOLDERS */
.kcp__ph{position:relative;background:repeating-linear-gradient(45deg,#141416,#141416 12px,#17171a 12px,#17171a 24px);border:2px dashed #38383e;border-radius:14px;min-height:150px;display:flex;align-items:center;justify-content:center;text-align:center;}
.kcp__ph-label{color:#8a8a90;font-size:13px;font-weight:600;line-height:1.5;padding:16px;}
.kcp__ph-label small{color:var(--faint);font-weight:500;}
.kcp__ph--wide{margin-top:18px;aspect-ratio:16/8;min-height:0;}
.kcp__ph--grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:18px;background:none;border:none;padding:0;}
.kcp__ph--grid .kcp__ph{aspect-ratio:4/3;min-height:0;}
.kcp__cover.kcp__ph{aspect-ratio:16/8;}
/* BEFORE/AFTER */
.kcp__ba{position:relative;margin-top:20px;aspect-ratio:16/9;border-radius:16px;overflow:hidden;border:1px solid var(--border);user-select:none;}
.kcp__ba-after,.kcp__ba-before{position:absolute;inset:0;border-radius:0;border:none;}
.kcp__ba-before{width:100%;clip-path:inset(0 50% 0 0);}
.kcp__ba-handle{position:absolute;top:0;bottom:0;left:50%;width:2px;background:var(--accent);cursor:ew-resize;transform:translateX(-1px);}
.kcp__ba-handle span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:40px;height:40px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(0,0,0,.4);}
.kcp__ba-handle span::before{content:'⟷';color:#000;font-size:18px;font-weight:700;}
.kcp__ba-tag{position:absolute;top:14px;font-family:'Unbounded';font-size:11px;letter-spacing:.1em;background:rgba(0,0,0,.6);padding:5px 11px;border-radius:6px;}
.kcp__ba-tag--l{left:14px;}
.kcp__ba-tag--r{right:14px;}
.kcp__ba-hint{text-align:center;color:var(--faint);font-size:13px;margin-top:12px;}
/* RESULT */
.kcp__result-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:34px;}
.kcp__rcard{background:var(--raise);border:1px solid var(--border);border-radius:16px;padding:26px 28px;}
.kcp__rc-t{font-family:'Unbounded';font-weight:600;font-size:18px;color:var(--accent);margin-bottom:10px;}
.kcp__rcard p{color:#c4c2bd;font-size:15px;}
/* CHIPS */
.kcp__chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;}
.kcp__chips span{font-family:'Manrope';font-weight:600;font-size:14px;color:var(--text);background:rgba(109,93,251,.08);border:1px solid rgba(109,93,251,.4);border-radius:8px;padding:10px 16px;}
/* VIDEO */
.kcp__video{margin-top:24px;aspect-ratio:16/9;border-radius:18px;overflow:hidden;border:1px solid var(--border);background:#000;}
.kcp__video iframe{width:100%;height:100%;border:none;}
/* CTA */
.kcp__cta{max-width:900px;margin:20px auto 0;padding:80px 6vw 96px;text-align:center;}
.kcp__cta h2{font-family:'Unbounded';font-weight:700;font-size:clamp(26px,3.4vw,42px);letter-spacing:-.02em;margin-bottom:16px;}
.kcp__cta p{color:var(--muted);font-size:18px;margin-bottom:30px;}
.kcp__cta-btn{display:inline-block;background:var(--accent);color:#fff;text-decoration:none;font-family:'Manrope';font-weight:700;font-size:16px;padding:18px 38px;border-radius:10px;transition:.25s;}
.kcp__cta-btn:hover{transform:translateY(-2px);box-shadow:0 14px 34px var(--glow);}
@media (max-width:820px){
  .kcp__facts{grid-template-columns:1fr 1fr;}
  .kcp__grid2{grid-template-columns:1fr;gap:20px;}
  .kcp__step{grid-template-columns:1fr;gap:14px;padding:24px 22px;}
  .kcp__step-num{font-size:28px;}
  .kcp__result-grid{grid-template-columns:1fr;}
  .kcp__ph--grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:480px){
  .kcp__hero{padding:48px 20px 0;}
  .kcp__sec{padding:48px 20px;}
  .kcp__facts{grid-template-columns:1fr;}
  .kcp__callout{padding:28px 24px;}
}
/* заполненные слоты (картинка/видео из конфига) */
.kcp [data-img].kcp--filled,.kcp [data-video].kcp--filled{background:none;border:none;}
.kcp [data-img] img,.kcp [data-video] img{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit;}
.kcp [data-fit="contain"] img{object-fit:contain;background:#0f0f11;padding:6%;}
.kcp [data-video].kcp--filled iframe{width:100%;height:100%;border:none;display:block;}
.kcp__ph.kcp--filled{padding:0;}
</style>
<script>
(function(){
  var C=window.KORS_CASE||{}; var IMG=C.images||{}, VID=C.videos||{};
  document.querySelectorAll('.kcp [data-video]').forEach(function(el){
    var id=VID[el.getAttribute('data-video')];
    if(id){ el.classList.add('kcp--filled'); el.innerHTML='<iframe src="https://kinescope.io/embed/'+id+'" allow="autoplay; fullscreen; encrypted-media; picture-in-picture" allowfullscreen frameborder="0"></iframe>'; el.removeAttribute('data-img'); }
  });
  document.querySelectorAll('.kcp [data-img]').forEach(function(el){
    var url=IMG[el.getAttribute('data-img')];
    if(url){ el.classList.add('kcp--filled'); el.innerHTML='<img src="'+url+'" alt="">'; }
  });
})();
(function(){
  // Слайдер до/после
  var ba=document.getElementById('kcpBA'); if(!ba) return;
  var before=document.getElementById('kcpBABefore');
  var handle=document.getElementById('kcpBAHandle');
  var dragging=false;
  function setPos(clientX){
    var r=ba.getBoundingClientRect();
    var x=Math.max(0,Math.min(clientX-r.left,r.width));
    var pct=(x/r.width)*100;
    before.style.clipPath='inset(0 '+(100-pct)+'% 0 0)';
    handle.style.left=pct+'%';
  }
  handle.addEventListener('mousedown',function(){dragging=true;});
  window.addEventListener('mouseup',function(){dragging=false;});
  window.addEventListener('mousemove',function(e){ if(dragging) setPos(e.clientX); });
  handle.addEventListener('touchstart',function(){dragging=true;},{passive:true});
  window.addEventListener('touchend',function(){dragging=false;});
  window.addEventListener('touchmove',function(e){ if(dragging&&e.touches[0]) setPos(e.touches[0].clientX); },{passive:true});
  ba.addEventListener('click',function(e){ setPos(e.clientX); });
})();
</script>

rec2699474201 · КЕЙС ОДОЕВСКИЕ (24649 симв.)

<!-- ================================================================
     KORS · СТРАНИЦА-КЕЙС · ОДОЕВСКИЕ КОНСЕРВЫ
     ── ЗАПОЛНЕНИЕ ──────────────────────────────────────────────────
     Всё фото/видео вставляется В ОДНОМ МЕСТЕ - в списке ниже (KORS_CASE).
     • Картинки: вставь ссылку на изображение в кавычки. Пусто '' = заглушка.
       Где взять ссылку: загрузи фото в Tilda (Файл-менеджер сайта или любой
       блок «Изображение») и скопируй URL картинки; либо любой прямой URL.
     • Видео: впиши ID ролика Kinescope (часть после kinescope.io/… ). Пусто = заглушка.
     Больше нигде в коде править не нужно - слоты подтянутся сами.
     ================================================================ -->
<script>
window.KORS_CASE = {
  images: {
    cover:        '',   // большая обложка вверху (гориз. фото/визуал)
    firstShoot:   '',   // шаг 01 - кадр первой съёмки начинки (если без видео)
    firstShoot2:  '',   // шаг 01 - кадр второй съёмки начинки (если без видео)
    presentation: '',   // шаг 02 - развороты печатной презентации
    factoryPhoto: '',   // шаг 03 - фото производства (если без видео)
    product1:     '',   // шаг 04 - фото продукции 1
    product2:     '',   // шаг 04 - фото продукции 2
    product3:     '',   // шаг 04 - фото цеха/процесса
    logoBefore:   '',   // шаг 05 - СТАРЫЙ логотип (до)
    logoAfter:    '',   // шаг 05 - НОВЫЙ логотип (после)
    brand1:       '',   // шаг 06 - визитки
    brand2:       '',   // шаг 06 - открытки
    brand3:       '',   // шаг 06 - др. носители
    siteShots:    ''    // шаг 07 - скриншоты сайта RU/EN
  },
  videos: {
    firstShoot:   'mZiwnH9uZAdc15hhRsqPvB',   // шаг 01 - ролик «Термостабильные начинки»
    firstShoot2:  'sRyZwPm3BS9CVspVi2sLx3',    // шаг 01 - ролик «Нетермостабильные начинки»
    factory:      '3ZsxHkdEuHUubxSAQZDRyG',    // шаг 03 - фильм о заводе, полная версия
    main:         'j8Pq4wWMNTPm6Js8UQiM1n'     // блок «Видео проекта»
  }
};
</script>
<div class="kcp">
  <!-- ===== HERO ===== -->
  <header class="kcp__hero">
    <div class="kcp__hero-in">
      <a class="kcp__back" href="/#rec2667018101">← Все проекты</a>
      <div class="kcp__eyebrow">КЕЙС · ПИЩЕВОЕ ПРОИЗВОДСТВО</div>
      <h1 class="kcp__title">Одоевские консервы</h1>
      <div class="kcp__tags"><span class="kcp__tag">Видео</span><span class="kcp__tag">Фотосъёмка</span><span class="kcp__tag">Презентация</span><span class="kcp__tag">Фирменный стиль</span><span class="kcp__tag">Сайт</span></div>
      <p class="kcp__lead">Как из одной видеосъёмки вырос полный комплект материалов - от роликов и фотосъёмки до нового логотипа, фирменного стиля и двуязычного сайта для выхода на рынок ОАЭ.</p>
      <div class="kcp__facts">
        <div class="kcp__fact"><span>Сфера</span><b>Пищевое производство · B2B</b></div>
        <div class="kcp__fact"><span>С чего начали</span><b>Видеосъёмка продукта</b></div>
        <div class="kcp__fact"><span>Где сейчас</span><b>Сайт RU/EN · выход на MENA</b></div>
        <div class="kcp__fact"><span>Формат</span><b>полный комплект материалов</b></div>
      </div>
    </div>
    <!-- ВСТАВИТЬ: большое обложечное фото/видео (завод, продукция или кадр со съёмки). Пока заглушка. -->
    <div class="kcp__cover kcp__ph" data-img="cover"><div class="kcp__ph-label">📷 Обложка: фото продукции / кадр со съёмки (16:9)</div></div>
  </header>
  <!-- ===== КТО КЛИЕНТ ===== -->
  <section class="kcp__sec">
    <div class="kcp__grid2">
      <div>
        <div class="kcp__kick">- О КОМПАНИИ</div>
        <h2 class="kcp__h2">Сильное производство, которое было не видно</h2>
      </div>
      <div class="kcp__prose">
        <p>«Одоевские консервы» - производитель из посёлка Одоев в Тульской области. Уже около пятнадцати лет компания выпускает термостабильные фруктово-ягодные начинки, повидло, джемы, конфитюры, пюре и наполнители для хлебопекарной, кондитерской и молочной промышленности.</p>
        <p>Это классический B2B: их продукт - ингредиент, который живёт <b>внутри</b> чужих изделий. Начинка в круассане, повидло в печенье, наполнитель в йогурте. Продукт качественный, производство серьёзное - но со стороны этого масштаба не было видно.</p>
        <p>Видео, сайт, презентация и фирменные материалы существовали разрозненно и не складывались в единую картину. Компанию нельзя было «показать» - только долго объяснять на словах.</p>
      </div>
    </div>
  </section>
  <!-- ===== ЗАДАЧА (акцентная плашка) ===== -->
  <section class="kcp__sec">
    <div class="kcp__callout">
      <div class="kcp__callout-k">ЗАДАЧА</div>
      <div class="kcp__callout-t">Показать масштаб и качество производства так, чтобы партнёр видел уровень компании за несколько минут - а не верил на слово.</div>
    </div>
  </section>
  <!-- ===== ТАЙМЛАЙН РАБОТЫ ===== -->
  <section class="kcp__sec">
    <div class="kcp__kick">- КАК ШЛА РАБОТА</div>
    <h2 class="kcp__h2">Из одной съёмки - в полный цикл</h2>
    <p class="kcp__sub">Сотрудничество началось с одного ролика и постепенно выросло в полный комплект материалов. Вот путь шаг за шагом.</p>
    <ol class="kcp__timeline">
      <li class="kcp__step">
        <div class="kcp__step-num">01</div>
        <div class="kcp__step-body">
          <h3>Первые видео на начинке</h3>
          <p>Начали с двух роликов о продукте. Сняли начинку «в деле» - текстуру, цвет, как она работает в готовом изделии. Это первое, что показывает потенциальному партнёру, что перед ним - качественный ингредиент.</p>
          <!-- Два ролика первой съёмки. ID берутся из KORS_CASE.videos (firstShoot / firstShoot2). -->
          <div class="kcp__vid2">
            <div class="kcp__ph" data-video="firstShoot" data-img="firstShoot"><div class="kcp__ph-label">🎬 Термостабильные начинки</div></div>
            <div class="kcp__ph" data-video="firstShoot2" data-img="firstShoot2"><div class="kcp__ph-label">🎬 Нетермостабильные начинки</div></div>
          </div>
        </div>
      </li>
      <li class="kcp__step">
        <div class="kcp__step-num">02</div>
        <div class="kcp__step-body">
          <h3>Печатная презентация</h3>
          <p>Собрали продукт и производство в понятную структуру - презентацию для переговоров и выставок. Разложили ассортимент, преимущества и мощности так, чтобы менеджеру было легко показать компанию клиенту.</p>
          <div class="kcp__ph kcp__ph--wide" data-img="presentation"><div class="kcp__ph-label">📑 Развороты печатной презентации</div></div>
        </div>
      </li>
      <li class="kcp__step">
        <div class="kcp__step-num">03</div>
        <div class="kcp__step-body">
          <h3>Видео о заводе</h3>
          <p>Сняли само производство: масштаб цехов, оборудование, процессы. Именно это видео закрывает главный вопрос B2B-клиента - «а справятся ли по объёму и качеству». Масштаб теперь виден, а не описан словами.</p>
          <div class="kcp__ph kcp__ph--wide" data-video="factory" data-img="factoryPhoto"><div class="kcp__ph-label">🎬 Видео о заводе / кадры производства</div></div>
        </div>
      </li>
      <li class="kcp__step">
        <div class="kcp__step-num">04</div>
        <div class="kcp__step-body">
          <h3>Фотосъёмка для презентации и каталога</h3>
          <p>Сделали предметную и производственную фотосъёмку - продукция, упаковка, цеха. Единый визуальный ряд, который лёг в презентацию, каталог и дальнейшие материалы.</p>
          <div class="kcp__ph kcp__ph--grid">
            <div class="kcp__ph" data-img="product1"><div class="kcp__ph-label">📷 фото продукции 1</div></div>
            <div class="kcp__ph" data-img="product2"><div class="kcp__ph-label">📷 фото продукции 2</div></div>
            <div class="kcp__ph" data-img="product3"><div class="kcp__ph-label">📷 фото цеха / процесса</div></div>
          </div>
        </div>
      </li>
      <li class="kcp__step">
        <div class="kcp__step-num">05</div>
        <div class="kcp__step-body">
          <h3>Новый логотип: до / после</h3>
          <p>Обновили логотип - сохранили узнаваемость, но привели к современному виду, который одинаково хорошо работает на упаковке, в презентации и на сайте. Сравните сами:</p>
          <!-- ДО/ПОСЛЕ слайдер. ВСТАВИТЬ 2 картинки логотипа: старый и новый -->
          <div class="kcp__ba" id="kcpBA">
            <div class="kcp__ba-after kcp__ph" data-img="logoAfter" data-fit="contain"><div class="kcp__ph-label">✅ НОВЫЙ логотип (после)</div></div>
            <div class="kcp__ba-before kcp__ph" id="kcpBABefore" data-img="logoBefore" data-fit="contain"><div class="kcp__ph-label">◻️ СТАРЫЙ логотип (до)</div></div>
            <div class="kcp__ba-handle" id="kcpBAHandle"><span></span></div>
            <div class="kcp__ba-tag kcp__ba-tag--l">ДО</div>
            <div class="kcp__ba-tag kcp__ba-tag--r">ПОСЛЕ</div>
          </div>
          <div class="kcp__ba-hint">Потяните ползунок влево-вправо, чтобы сравнить</div>
        </div>
      </li>
      <li class="kcp__step">
        <div class="kcp__step-num">06</div>
        <div class="kcp__step-body">
          <h3>Фирменный стиль: открытки, визитки, носители</h3>
          <p>Оформили фирменные носители - визитки, открытки и другие материалы в единой стилистике. Компания получила узнаваемый облик, который работает на каждой точке контакта.</p>
          <div class="kcp__ph kcp__ph--grid">
            <div class="kcp__ph" data-img="brand1"><div class="kcp__ph-label">📷 визитки</div></div>
            <div class="kcp__ph" data-img="brand2"><div class="kcp__ph-label">📷 открытки</div></div>
            <div class="kcp__ph" data-img="brand3"><div class="kcp__ph-label">📷 др. носители</div></div>
          </div>
        </div>
      </li>
      <li class="kcp__step">
        <div class="kcp__step-num">07</div>
        <div class="kcp__step-body">
          <h3>Сайт на двух языках - выход на MENA</h3>
          <p>Разработали сайт в двух версиях - русской и английской. Английская версия сделана под рынок ОАЭ и региона MENA: теперь компания может представлять себя международным партнёрам на их языке, с тем же уровнем подачи, что и внутри страны.</p>
          <div class="kcp__ph kcp__ph--wide" data-img="siteShots"><div class="kcp__ph-label">💻 Скриншоты сайта (RU и EN)</div></div>
        </div>
      </li>
      <li class="kcp__step kcp__step--next">
        <div class="kcp__step-num">→</div>
        <div class="kcp__step-body">
          <h3>Что дальше</h3>
          <p>Следующий этап - застройка выставочного стенда (планируется на зиму). Сотрудничество продолжается: от продукта на экране - к тому, как компания выглядит вживую на выставке.</p>
        </div>
      </li>
    </ol>
  </section>
  <!-- ===== РЕЗУЛЬТАТ ===== -->
  <section class="kcp__sec">
    <div class="kcp__result">
      <div class="kcp__kick">- ЧТО ИЗМЕНИЛОСЬ</div>
      <h2 class="kcp__h2">Компанию теперь можно показать, а не пересказывать</h2>
      <div class="kcp__result-grid">
        <div class="kcp__rcard"><div class="kcp__rc-t">Единый комплект</div><p>Видео, фото, презентация, логотип, фирменный стиль и сайт - собраны в одну систему и работают вместе.</p></div>
        <div class="kcp__rcard"><div class="kcp__rc-t">Масштаб за минуты</div><p>Производство и уровень компании видно сразу - на переговорах, выставках и в презентации, без долгих объяснений.</p></div>
        <div class="kcp__rcard"><div class="kcp__rc-t">Выход за рубеж</div><p>Двуязычный сайт открыл дорогу к партнёрам в ОАЭ и регионе MENA.</p></div>
        <div class="kcp__rcard"><div class="kcp__rc-t">Долгое партнёрство</div><p>Сотрудничество выросло из одной видеосъёмки в постоянную работу над материалами компании.</p></div>
      </div>
    </div>
  </section>
  <!-- ===== ЧТО ВОШЛО (услуги) ===== -->
  <section class="kcp__sec">
    <div class="kcp__kick">- ЧТО ВОШЛО В КОМПЛЕКТ</div>
    <div class="kcp__chips">
      <span>Видеопродакшн</span><span>Съёмка производства</span><span>Фотосъёмка</span><span>Печатная презентация</span><span>Редизайн логотипа</span><span>Фирменный стиль</span><span>Визитки и открытки</span><span>Сайт RU</span><span>Сайт EN (MENA)</span>
    </div>
  </section>
  <!-- ===== ВИДЕО КЕЙСА ===== -->
  <section class="kcp__sec">
    <div class="kcp__kick">- СМОТРЕТЬ</div>
    <h2 class="kcp__h2">Видео проекта</h2>
    <!-- ID ролика берётся из KORS_CASE.videos.main -->
    <div class="kcp__video" data-video="main"><div class="kcp__ph-label">🎬 Основной ролик проекта</div></div>
  </section>
  <!-- ===== ОТЗЫВ КЛИЕНТА ===== -->
  <section class="kcp__sec">
    <div class="kcp__kick">- ОТЗЫВ</div>
    <h2 class="kcp__h2">Благодарственное письмо</h2>
    <p class="kcp__sub">ООО «МастерДжем» - юридическое лицо «Одоевских консервов»</p>
    <div class="kcp__letter"><img src="https://static.tildacdn.com/tild3231-6563-4932-b139-373433306561/pismo-odoevskie-1200.jpg" alt="Благодарственное письмо от ООО «МастерДжем» (Одоевские консервы) команде KORS Production за фото- и видеосъёмку производства и материалы для сайта и презентаций" loading="lazy"></div>
  </section>
  <!-- ===== ДРУГИЕ КЕЙСЫ ===== -->
  <section class="kcp__sec">
    <div class="kcp__kick">- ЕЩЁ</div>
    <h2 class="kcp__h2">Другие кейсы</h2>
    <div class="kcp__more">
      <a class="kcp__more-card" href="/case-invoicebox"><span>Кейс</span><b>InvoiceBox</b><i>Видеоматериалы для платформы →</i></a>
      <a class="kcp__more-card" href="/case-vistex"><span>Кейс</span><b>Вистекс</b><i>Съёмка видео о предприятии →</i></a>
    </div>
  </section>
  <!-- ===== CTA ===== -->
  <section class="kcp__cta">
    <h2>Хотите так же показать своё производство?</h2>
    <p>Начнём с одного шага - а вырастем в полный цикл, если понравится результат.</p>
    <a class="kcp__cta-btn" href="#popup:zayavka">Обсудить проект →</a>
  </section>
</div>
<style>
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Unbounded:wght@400;600;700;800&display=swap');
.kcp{--bg:#0C0C0E;--raise:#141416;--card:#1B1B1F;--border:#2A2A2E;--soft:#242428;--text:#F5F3EF;--muted:#9A9A9A;--faint:#6a6a6e;--accent:#6D5DFB;--glow:rgba(109,93,251,.14);
  box-sizing:border-box;background:var(--bg);color:var(--text);font-family:'Manrope',Arial,sans-serif;-webkit-font-smoothing:antialiased;}
.kcp *{box-sizing:border-box;margin:0;padding:0;}
.kcp p{line-height:1.65;}
.kcp__eyebrow,.kcp__kick{font-family:'Unbounded';font-size:12px;letter-spacing:.14em;color:var(--accent);}
.kcp__h2{font-family:'Unbounded';font-weight:700;font-size:clamp(26px,3.2vw,42px);letter-spacing:-.02em;line-height:1.12;margin:14px 0 0;}
.kcp__sub{color:var(--muted);font-size:17px;line-height:1.6;max-width:640px;margin-top:14px;}
/* HERO */
.kcp__hero{padding:70px 6vw 0;max-width:1280px;margin:0 auto;}
.kcp__hero-in{max-width:900px;}
.kcp__back{display:inline-block;color:var(--muted);text-decoration:none;font-size:14px;font-weight:600;margin-bottom:34px;transition:.2s;}
.kcp__back:hover{color:var(--accent);}
.kcp__hero .kcp__eyebrow{margin-bottom:18px;}
.kcp__title{font-family:'Unbounded';font-weight:800;font-size:clamp(40px,7vw,88px);letter-spacing:-.03em;line-height:1;margin-bottom:24px;}
.kcp__lead{font-size:clamp(18px,2vw,22px);line-height:1.55;color:#d8d6d1;max-width:760px;}
.kcp__tags{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 18px;}
.kcp__tag{font-family:'Manrope',Arial,sans-serif;font-weight:600;font-size:9px;line-height:1;text-transform:uppercase;letter-spacing:.14em;color:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.22);border-radius:4px;padding:5px 8px;white-space:nowrap;}
@media (max-width:480px){ .kcp__tag{font-size:8px;padding:5px 7px;} .kcp__tags{gap:5px;margin-bottom:14px;} }
.kcp__facts{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:14px;overflow:hidden;margin-top:44px;}
.kcp__fact{background:var(--raise);padding:20px 22px;display:flex;flex-direction:column;gap:7px;}
.kcp__fact span{font-size:12px;color:var(--faint);text-transform:uppercase;letter-spacing:.06em;}
.kcp__fact b{font-family:'Unbounded';font-weight:600;font-size:14px;line-height:1.3;}
.kcp__cover{margin:48px auto 0;max-width:1280px;aspect-ratio:16/8;border-radius:20px;}
/* SECTIONS */
.kcp__sec{max-width:1080px;margin:0 auto;padding:64px 6vw;}
.kcp__grid2{display:grid;grid-template-columns:0.85fr 1.15fr;gap:48px;align-items:start;}
.kcp__prose p{color:#c9c7c2;font-size:17px;margin-bottom:16px;}
.kcp__prose p:last-child{margin-bottom:0;}
.kcp__prose b{color:var(--text);font-weight:600;}
/* CALLOUT */
.kcp__callout{background:linear-gradient(135deg,rgba(109,93,251,.10),rgba(109,93,251,.02));border:1px solid rgba(109,93,251,.3);border-radius:18px;padding:40px 44px;}
.kcp__callout-k{font-family:'Unbounded';font-size:12px;letter-spacing:.14em;color:var(--accent);margin-bottom:14px;}
.kcp__callout-t{font-family:'Unbounded';font-weight:600;font-size:clamp(20px,2.4vw,30px);line-height:1.35;letter-spacing:-.01em;}
/* TIMELINE */
.kcp__timeline{list-style:none;margin-top:44px;display:flex;flex-direction:column;gap:26px;}
.kcp__step{display:grid;grid-template-columns:88px 1fr;gap:26px;background:var(--raise);border:1px solid var(--border);border-radius:18px;padding:30px 32px;transition:.25s;}
.kcp__step:hover{border-color:rgba(109,93,251,.4);}
.kcp__step-num{font-family:'Unbounded';font-weight:700;font-size:34px;color:var(--accent);line-height:1;opacity:.85;}
.kcp__step-body h3{font-family:'Unbounded';font-weight:600;font-size:22px;letter-spacing:-.01em;margin-bottom:12px;}
.kcp__step-body p{color:#c4c2bd;font-size:16px;}
.kcp__step--next{background:transparent;border-style:dashed;}
.kcp__step--next .kcp__step-num{opacity:1;}
/* PLACEHOLDERS */
.kcp__ph{position:relative;background:repeating-linear-gradient(45deg,#141416,#141416 12px,#17171a 12px,#17171a 24px);border:2px dashed #38383e;border-radius:14px;min-height:150px;display:flex;align-items:center;justify-content:center;text-align:center;}
.kcp__ph-label{color:#8a8a90;font-size:13px;font-weight:600;line-height:1.5;padding:16px;}
.kcp__ph-label small{color:var(--faint);font-weight:500;}
.kcp__ph--wide{margin-top:18px;aspect-ratio:16/8;min-height:0;}
.kcp__ph--grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:18px;background:none;border:none;padding:0;}
.kcp__ph--grid .kcp__ph{aspect-ratio:4/3;min-height:0;}
.kcp__cover.kcp__ph{aspect-ratio:16/8;}
/* BEFORE/AFTER */
.kcp__ba{position:relative;margin-top:20px;aspect-ratio:16/9;border-radius:16px;overflow:hidden;border:1px solid var(--border);user-select:none;}
.kcp__ba-after,.kcp__ba-before{position:absolute;inset:0;border-radius:0;border:none;}
.kcp__ba-before{width:100%;clip-path:inset(0 50% 0 0);}
.kcp__ba-handle{position:absolute;top:0;bottom:0;left:50%;width:2px;background:var(--accent);cursor:ew-resize;transform:translateX(-1px);}
.kcp__ba-handle span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:40px;height:40px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(0,0,0,.4);}
.kcp__ba-handle span::before{content:'⟷';color:#000;font-size:18px;font-weight:700;}
.kcp__ba-tag{position:absolute;top:14px;font-family:'Unbounded';font-size:11px;letter-spacing:.1em;background:rgba(0,0,0,.6);padding:5px 11px;border-radius:6px;}
.kcp__ba-tag--l{left:14px;}
.kcp__ba-tag--r{right:14px;}
.kcp__ba-hint{text-align:center;color:var(--faint);font-size:13px;margin-top:12px;}
/* RESULT */
.kcp__result-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:34px;}
.kcp__rcard{background:var(--raise);border:1px solid var(--border);border-radius:16px;padding:26px 28px;}
.kcp__rc-t{font-family:'Unbounded';font-weight:600;font-size:18px;color:var(--accent);margin-bottom:10px;}
.kcp__rcard p{color:#c4c2bd;font-size:15px;}
/* CHIPS */
.kcp__chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;}
.kcp__chips span{font-family:'Manrope';font-weight:600;font-size:14px;color:var(--text);background:rgba(109,93,251,.08);border:1px solid rgba(109,93,251,.4);border-radius:8px;padding:10px 16px;}
/* VIDEO */
.kcp__video{margin-top:24px;aspect-ratio:16/9;border-radius:18px;overflow:hidden;border:1px solid var(--border);background:#000;}
.kcp__video iframe{width:100%;height:100%;border:none;}
/* CTA */
.kcp__vid2{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px;}
.kcp__vid2 .kcp__ph{aspect-ratio:16/9;min-height:0;margin-top:0;}
.kcp__letter{margin-top:26px;max-width:440px;}
.kcp__letter img{display:block;width:100%;height:auto;border-radius:14px;border:1px solid var(--border);}
.kcp__more{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:28px;}
.kcp__more-card{display:block;background:var(--raise);border:1px solid var(--border);border-radius:16px;padding:24px 26px;text-decoration:none;transition:.2s;}
.kcp__more-card:hover{border-color:var(--accent);}
.kcp__more-card span{display:block;font-size:12px;letter-spacing:2px;color:var(--accent);text-transform:uppercase;margin-bottom:10px;}
.kcp__more-card b{display:block;font-family:'Unbounded',sans-serif;font-weight:700;font-size:22px;line-height:1.2;color:var(--text);margin-bottom:8px;}
.kcp__more-card i{font-style:normal;font-size:15px;color:var(--muted);}
@media (max-width:640px){.kcp__vid2{grid-template-columns:1fr;}.kcp__more{grid-template-columns:1fr;}}
.kcp__cta{max-width:900px;margin:20px auto 0;padding:80px 6vw 96px;text-align:center;}
.kcp__cta h2{font-family:'Unbounded';font-weight:700;font-size:clamp(26px,3.4vw,42px);letter-spacing:-.02em;margin-bottom:16px;}
.kcp__cta p{color:var(--muted);font-size:18px;margin-bottom:30px;}
.kcp__cta-btn{display:inline-block;background:var(--accent);color:#fff;text-decoration:none;font-family:'Manrope';font-weight:700;font-size:16px;padding:18px 38px;border-radius:10px;transition:.25s;}
.kcp__cta-btn:hover{transform:translateY(-2px);box-shadow:0 14px 34px var(--glow);}
@media (max-width:820px){
  .kcp__facts{grid-template-columns:1fr 1fr;}
  .kcp__grid2{grid-template-columns:1fr;gap:20px;}
  .kcp__step{grid-template-columns:1fr;gap:14px;padding:24px 22px;}
  .kcp__step-num{font-size:28px;}
  .kcp__result-grid{grid-template-columns:1fr;}
  .kcp__ph--grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:480px){
  .kcp__hero{padding:48px 20px 0;}
  .kcp__sec{padding:48px 20px;}
  .kcp__facts{grid-template-columns:1fr;}
  .kcp__callout{padding:28px 24px;}
}
/* заполненные слоты (картинка/видео из конфига) */
.kcp [data-img].kcp--filled,.kcp [data-video].kcp--filled{background:none;border:none;}
.kcp [data-img] img,.kcp [data-video] img{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit;}
.kcp [data-fit="contain"] img{object-fit:contain;background:#0f0f11;padding:6%;}
.kcp [data-video].kcp--filled iframe{width:100%;height:100%;border:none;display:block;}
.kcp__ph.kcp--filled{padding:0;}
</style>
<script>
(function(){
  var C=window.KORS_CASE||{}; var IMG=C.images||{}, VID=C.videos||{};
  document.querySelectorAll('.kcp [data-video]').forEach(function(el){
    var id=VID[el.getAttribute('data-video')];
    if(id){ el.classList.add('kcp--filled'); el.innerHTML='<iframe src="https://kinescope.io/embed/'+id+'" allow="autoplay; fullscreen; encrypted-media; picture-in-picture" allowfullscreen frameborder="0"></iframe>'; el.removeAttribute('data-img'); }
  });
  document.querySelectorAll('.kcp [data-img]').forEach(function(el){
    var url=IMG[el.getAttribute('data-img')];
    if(url){ el.classList.add('kcp--filled'); el.innerHTML='<img src="'+url+'" alt="">'; }
  });
})();
(function(){
  // Слайдер до/после
  var ba=document.getElementById('kcpBA'); if(!ba) return;
  var before=document.getElementById('kcpBABefore');
  var handle=document.getElementById('kcpBAHandle');
  var dragging=false;
  function setPos(clientX){
    var r=ba.getBoundingClientRect();
    var x=Math.max(0,Math.min(clientX-r.left,r.width));
    var pct=(x/r.width)*100;
    before.style.clipPath='inset(0 '+(100-pct)+'% 0 0)';
    handle.style.left=pct+'%';
  }
  handle.addEventListener('mousedown',function(){dragging=true;});
  window.addEventListener('mouseup',function(){dragging=false;});
  window.addEventListener('mousemove',function(e){ if(dragging) setPos(e.clientX); });
  handle.addEventListener('touchstart',function(){dragging=true;},{passive:true});
  window.addEventListener('touchend',function(){dragging=false;});
  window.addEventListener('touchmove',function(e){ if(dragging&&e.touches[0]) setPos(e.touches[0].clientX); },{passive:true});
  ba.addEventListener('click',function(e){ setPos(e.clientX); });
})();
</script>

rec2699474201 · КЕЙС ОДОЕВСКИЕ (24649 симв.)

<!-- ================================================================
     KORS · СТРАНИЦА-КЕЙС · ОДОЕВСКИЕ КОНСЕРВЫ
     ── ЗАПОЛНЕНИЕ ──────────────────────────────────────────────────
     Всё фото/видео вставляется В ОДНОМ МЕСТЕ - в списке ниже (KORS_CASE).
     • Картинки: вставь ссылку на изображение в кавычки. Пусто '' = заглушка.
       Где взять ссылку: загрузи фото в Tilda (Файл-менеджер сайта или любой
       блок «Изображение») и скопируй URL картинки; либо любой прямой URL.
     • Видео: впиши ID ролика Kinescope (часть после kinescope.io/… ). Пусто = заглушка.
     Больше нигде в коде править не нужно - слоты подтянутся сами.
     ================================================================ -->
<script>
window.KORS_CASE = {
  images: {
    cover:        '',   // большая обложка вверху (гориз. фото/визуал)
    firstShoot:   '',   // шаг 01 - кадр первой съёмки начинки (если без видео)
    firstShoot2:  '',   // шаг 01 - кадр второй съёмки начинки (если без видео)
    presentation: '',   // шаг 02 - развороты печатной презентации
    factoryPhoto: '',   // шаг 03 - фото производства (если без видео)
    product1:     '',   // шаг 04 - фото продукции 1
    product2:     '',   // шаг 04 - фото продукции 2
    product3:     '',   // шаг 04 - фото цеха/процесса
    logoBefore:   '',   // шаг 05 - СТАРЫЙ логотип (до)
    logoAfter:    '',   // шаг 05 - НОВЫЙ логотип (после)
    brand1:       '',   // шаг 06 - визитки
    brand2:       '',   // шаг 06 - открытки
    brand3:       '',   // шаг 06 - др. носители
    siteShots:    ''    // шаг 07 - скриншоты сайта RU/EN
  },
  videos: {
    firstShoot:   'sRyZwPm3BS9CVspVi2sLx3',   // шаг 01 - ролик «Термостабильные начинки»
    firstShoot2:  'mZiwnH9uZAdc15hhRsqPvB',    // шаг 01 - ролик «Нетермостабильные начинки»
    factory:      '3ZsxHkdEuHUubxSAQZDRyG',    // шаг 03 - фильм о заводе, полная версия
    main:         'j8Pq4wWMNTPm6Js8UQiM1n'     // блок «Видео проекта»
  }
};
</script>
<div class="kcp">
  <!-- ===== HERO ===== -->
  <header class="kcp__hero">
    <div class="kcp__hero-in">
      <a class="kcp__back" href="/#rec2667018101">← Все проекты</a>
      <div class="kcp__eyebrow">КЕЙС · ПИЩЕВОЕ ПРОИЗВОДСТВО</div>
      <h1 class="kcp__title">Одоевские консервы</h1>
      <div class="kcp__tags"><span class="kcp__tag">Видео</span><span class="kcp__tag">Фотосъёмка</span><span class="kcp__tag">Презентация</span><span class="kcp__tag">Фирменный стиль</span><span class="kcp__tag">Сайт</span></div>
      <p class="kcp__lead">Как из одной видеосъёмки вырос полный комплект материалов - от роликов и фотосъёмки до нового логотипа, фирменного стиля и двуязычного сайта для выхода на рынок ОАЭ.</p>
      <div class="kcp__facts">
        <div class="kcp__fact"><span>Сфера</span><b>Пищевое производство · B2B</b></div>
        <div class="kcp__fact"><span>С чего начали</span><b>Видеосъёмка продукта</b></div>
        <div class="kcp__fact"><span>Где сейчас</span><b>Сайт RU/EN · выход на MENA</b></div>
        <div class="kcp__fact"><span>Формат</span><b>полный комплект материалов</b></div>
      </div>
    </div>
    <!-- ВСТАВИТЬ: большое обложечное фото/видео (завод, продукция или кадр со съёмки). Пока заглушка. -->
    <div class="kcp__cover kcp__ph" data-img="cover"><div class="kcp__ph-label">📷 Обложка: фото продукции / кадр со съёмки (16:9)</div></div>
  </header>
  <!-- ===== КТО КЛИЕНТ ===== -->
  <section class="kcp__sec">
    <div class="kcp__grid2">
      <div>
        <div class="kcp__kick">- О КОМПАНИИ</div>
        <h2 class="kcp__h2">Сильное производство, которое было не видно</h2>
      </div>
      <div class="kcp__prose">
        <p>«Одоевские консервы» - производитель из посёлка Одоев в Тульской области. Уже около пятнадцати лет компания выпускает термостабильные фруктово-ягодные начинки, повидло, джемы, конфитюры, пюре и наполнители для хлебопекарной, кондитерской и молочной промышленности.</p>
        <p>Это классический B2B: их продукт - ингредиент, который живёт <b>внутри</b> чужих изделий. Начинка в круассане, повидло в печенье, наполнитель в йогурте. Продукт качественный, производство серьёзное - но со стороны этого масштаба не было видно.</p>
        <p>Видео, сайт, презентация и фирменные материалы существовали разрозненно и не складывались в единую картину. Компанию нельзя было «показать» - только долго объяснять на словах.</p>
      </div>
    </div>
  </section>
  <!-- ===== ЗАДАЧА (акцентная плашка) ===== -->
  <section class="kcp__sec">
    <div class="kcp__callout">
      <div class="kcp__callout-k">ЗАДАЧА</div>
      <div class="kcp__callout-t">Показать масштаб и качество производства так, чтобы партнёр видел уровень компании за несколько минут - а не верил на слово.</div>
    </div>
  </section>
  <!-- ===== ТАЙМЛАЙН РАБОТЫ ===== -->
  <section class="kcp__sec">
    <div class="kcp__kick">- КАК ШЛА РАБОТА</div>
    <h2 class="kcp__h2">Из одной съёмки - в полный цикл</h2>
    <p class="kcp__sub">Сотрудничество началось с одного ролика и постепенно выросло в полный комплект материалов. Вот путь шаг за шагом.</p>
    <ol class="kcp__timeline">
      <li class="kcp__step">
        <div class="kcp__step-num">01</div>
        <div class="kcp__step-body">
          <h3>Первые видео на начинке</h3>
          <p>Начали с двух роликов о продукте. Сняли начинку «в деле» - текстуру, цвет, как она работает в готовом изделии. Это первое, что показывает потенциальному партнёру, что перед ним - качественный ингредиент.</p>
          <!-- Два ролика первой съёмки. ID берутся из KORS_CASE.videos (firstShoot / firstShoot2). -->
          <div class="kcp__vid2">
            <div class="kcp__ph" data-video="firstShoot" data-img="firstShoot"><div class="kcp__ph-label">🎬 Термостабильные начинки</div></div>
            <div class="kcp__ph" data-video="firstShoot2" data-img="firstShoot2"><div class="kcp__ph-label">🎬 Нетермостабильные начинки</div></div>
          </div>
        </div>
      </li>
      <li class="kcp__step">
        <div class="kcp__step-num">02</div>
        <div class="kcp__step-body">
          <h3>Печатная презентация</h3>
          <p>Собрали продукт и производство в понятную структуру - презентацию для переговоров и выставок. Разложили ассортимент, преимущества и мощности так, чтобы менеджеру было легко показать компанию клиенту.</p>
          <div class="kcp__ph kcp__ph--wide" data-img="presentation"><div class="kcp__ph-label">📑 Развороты печатной презентации</div></div>
        </div>
      </li>
      <li class="kcp__step">
        <div class="kcp__step-num">03</div>
        <div class="kcp__step-body">
          <h3>Видео о заводе</h3>
          <p>Сняли само производство: масштаб цехов, оборудование, процессы. Именно это видео закрывает главный вопрос B2B-клиента - «а справятся ли по объёму и качеству». Масштаб теперь виден, а не описан словами.</p>
          <div class="kcp__ph kcp__ph--wide" data-video="factory" data-img="factoryPhoto"><div class="kcp__ph-label">🎬 Видео о заводе / кадры производства</div></div>
        </div>
      </li>
      <li class="kcp__step">
        <div class="kcp__step-num">04</div>
        <div class="kcp__step-body">
          <h3>Фотосъёмка для презентации и каталога</h3>
          <p>Сделали предметную и производственную фотосъёмку - продукция, упаковка, цеха. Единый визуальный ряд, который лёг в презентацию, каталог и дальнейшие материалы.</p>
          <div class="kcp__ph kcp__ph--grid">
            <div class="kcp__ph" data-img="product1"><div class="kcp__ph-label">📷 фото продукции 1</div></div>
            <div class="kcp__ph" data-img="product2"><div class="kcp__ph-label">📷 фото продукции 2</div></div>
            <div class="kcp__ph" data-img="product3"><div class="kcp__ph-label">📷 фото цеха / процесса</div></div>
          </div>
        </div>
      </li>
      <li class="kcp__step">
        <div class="kcp__step-num">05</div>
        <div class="kcp__step-body">
          <h3>Новый логотип: до / после</h3>
          <p>Обновили логотип - сохранили узнаваемость, но привели к современному виду, который одинаково хорошо работает на упаковке, в презентации и на сайте. Сравните сами:</p>
          <!-- ДО/ПОСЛЕ слайдер. ВСТАВИТЬ 2 картинки логотипа: старый и новый -->
          <div class="kcp__ba" id="kcpBA">
            <div class="kcp__ba-after kcp__ph" data-img="logoAfter" data-fit="contain"><div class="kcp__ph-label">✅ НОВЫЙ логотип (после)</div></div>
            <div class="kcp__ba-before kcp__ph" id="kcpBABefore" data-img="logoBefore" data-fit="contain"><div class="kcp__ph-label">◻️ СТАРЫЙ логотип (до)</div></div>
            <div class="kcp__ba-handle" id="kcpBAHandle"><span></span></div>
            <div class="kcp__ba-tag kcp__ba-tag--l">ДО</div>
            <div class="kcp__ba-tag kcp__ba-tag--r">ПОСЛЕ</div>
          </div>
          <div class="kcp__ba-hint">Потяните ползунок влево-вправо, чтобы сравнить</div>
        </div>
      </li>
      <li class="kcp__step">
        <div class="kcp__step-num">06</div>
        <div class="kcp__step-body">
          <h3>Фирменный стиль: открытки, визитки, носители</h3>
          <p>Оформили фирменные носители - визитки, открытки и другие материалы в единой стилистике. Компания получила узнаваемый облик, который работает на каждой точке контакта.</p>
          <div class="kcp__ph kcp__ph--grid">
            <div class="kcp__ph" data-img="brand1"><div class="kcp__ph-label">📷 визитки</div></div>
            <div class="kcp__ph" data-img="brand2"><div class="kcp__ph-label">📷 открытки</div></div>
            <div class="kcp__ph" data-img="brand3"><div class="kcp__ph-label">📷 др. носители</div></div>
          </div>
        </div>
      </li>
      <li class="kcp__step">
        <div class="kcp__step-num">07</div>
        <div class="kcp__step-body">
          <h3>Сайт на двух языках - выход на MENA</h3>
          <p>Разработали сайт в двух версиях - русской и английской. Английская версия сделана под рынок ОАЭ и региона MENA: теперь компания может представлять себя международным партнёрам на их языке, с тем же уровнем подачи, что и внутри страны.</p>
          <div class="kcp__ph kcp__ph--wide" data-img="siteShots"><div class="kcp__ph-label">💻 Скриншоты сайта (RU и EN)</div></div>
        </div>
      </li>
      <li class="kcp__step kcp__step--next">
        <div class="kcp__step-num">→</div>
        <div class="kcp__step-body">
          <h3>Что дальше</h3>
          <p>Следующий этап - застройка выставочного стенда (планируется на зиму). Сотрудничество продолжается: от продукта на экране - к тому, как компания выглядит вживую на выставке.</p>
        </div>
      </li>
    </ol>
  </section>
  <!-- ===== РЕЗУЛЬТАТ ===== -->
  <section class="kcp__sec">
    <div class="kcp__result">
      <div class="kcp__kick">- ЧТО ИЗМЕНИЛОСЬ</div>
      <h2 class="kcp__h2">Компанию теперь можно показать, а не пересказывать</h2>
      <div class="kcp__result-grid">
        <div class="kcp__rcard"><div class="kcp__rc-t">Единый комплект</div><p>Видео, фото, презентация, логотип, фирменный стиль и сайт - собраны в одну систему и работают вместе.</p></div>
        <div class="kcp__rcard"><div class="kcp__rc-t">Масштаб за минуты</div><p>Производство и уровень компании видно сразу - на переговорах, выставках и в презентации, без долгих объяснений.</p></div>
        <div class="kcp__rcard"><div class="kcp__rc-t">Выход за рубеж</div><p>Двуязычный сайт открыл дорогу к партнёрам в ОАЭ и регионе MENA.</p></div>
        <div class="kcp__rcard"><div class="kcp__rc-t">Долгое партнёрство</div><p>Сотрудничество выросло из одной видеосъёмки в постоянную работу над материалами компании.</p></div>
      </div>
    </div>
  </section>
  <!-- ===== ЧТО ВОШЛО (услуги) ===== -->
  <section class="kcp__sec">
    <div class="kcp__kick">- ЧТО ВОШЛО В КОМПЛЕКТ</div>
    <div class="kcp__chips">
      <span>Видеопродакшн</span><span>Съёмка производства</span><span>Фотосъёмка</span><span>Печатная презентация</span><span>Редизайн логотипа</span><span>Фирменный стиль</span><span>Визитки и открытки</span><span>Сайт RU</span><span>Сайт EN (MENA)</span>
    </div>
  </section>
  <!-- ===== ВИДЕО КЕЙСА ===== -->
  <section class="kcp__sec">
    <div class="kcp__kick">- СМОТРЕТЬ</div>
    <h2 class="kcp__h2">Видео проекта</h2>
    <!-- ID ролика берётся из KORS_CASE.videos.main -->
    <div class="kcp__video" data-video="main"><div class="kcp__ph-label">🎬 Основной ролик проекта</div></div>
  </section>
  <!-- ===== ОТЗЫВ КЛИЕНТА ===== -->
  <section class="kcp__sec">
    <div class="kcp__kick">- ОТЗЫВ</div>
    <h2 class="kcp__h2">Благодарственное письмо</h2>
    <p class="kcp__sub">ООО «МастерДжем» - юридическое лицо «Одоевских консервов»</p>
    <div class="kcp__letter"><img src="https://static.tildacdn.com/tild3231-6563-4932-b139-373433306561/pismo-odoevskie-1200.jpg" alt="Благодарственное письмо от ООО «МастерДжем» (Одоевские консервы) команде KORS Production за фото- и видеосъёмку производства и материалы для сайта и презентаций" loading="lazy"></div>
  </section>
  <!-- ===== ДРУГИЕ КЕЙСЫ ===== -->
  <section class="kcp__sec">
    <div class="kcp__kick">- ЕЩЁ</div>
    <h2 class="kcp__h2">Другие кейсы</h2>
    <div class="kcp__more">
      <a class="kcp__more-card" href="/case-invoicebox"><span>Кейс</span><b>InvoiceBox</b><i>Видеоматериалы для платформы →</i></a>
      <a class="kcp__more-card" href="/case-vistex"><span>Кейс</span><b>Вистекс</b><i>Съёмка видео о предприятии →</i></a>
    </div>
  </section>
  <!-- ===== CTA ===== -->
  <section class="kcp__cta">
    <h2>Хотите так же показать своё производство?</h2>
    <p>Начнём с одного шага - а вырастем в полный цикл, если понравится результат.</p>
    <a class="kcp__cta-btn" href="#popup:zayavka">Обсудить проект →</a>
  </section>
</div>
<style>
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Unbounded:wght@400;600;700;800&display=swap');
.kcp{--bg:#0C0C0E;--raise:#141416;--card:#1B1B1F;--border:#2A2A2E;--soft:#242428;--text:#F5F3EF;--muted:#9A9A9A;--faint:#6a6a6e;--accent:#6D5DFB;--glow:rgba(109,93,251,.14);
  box-sizing:border-box;background:var(--bg);color:var(--text);font-family:'Manrope',Arial,sans-serif;-webkit-font-smoothing:antialiased;}
.kcp *{box-sizing:border-box;margin:0;padding:0;}
.kcp p{line-height:1.65;}
.kcp__eyebrow,.kcp__kick{font-family:'Unbounded';font-size:12px;letter-spacing:.14em;color:var(--accent);}
.kcp__h2{font-family:'Unbounded';font-weight:700;font-size:clamp(26px,3.2vw,42px);letter-spacing:-.02em;line-height:1.12;margin:14px 0 0;}
.kcp__sub{color:var(--muted);font-size:17px;line-height:1.6;max-width:640px;margin-top:14px;}
/* HERO */
.kcp__hero{padding:70px 6vw 0;max-width:1280px;margin:0 auto;}
.kcp__hero-in{max-width:900px;}
.kcp__back{display:inline-block;color:var(--muted);text-decoration:none;font-size:14px;font-weight:600;margin-bottom:34px;transition:.2s;}
.kcp__back:hover{color:var(--accent);}
.kcp__hero .kcp__eyebrow{margin-bottom:18px;}
.kcp__title{font-family:'Unbounded';font-weight:800;font-size:clamp(40px,7vw,88px);letter-spacing:-.03em;line-height:1;margin-bottom:24px;}
.kcp__lead{font-size:clamp(18px,2vw,22px);line-height:1.55;color:#d8d6d1;max-width:760px;}
.kcp__tags{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 18px;}
.kcp__tag{font-family:'Manrope',Arial,sans-serif;font-weight:600;font-size:9px;line-height:1;text-transform:uppercase;letter-spacing:.14em;color:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.22);border-radius:4px;padding:5px 8px;white-space:nowrap;}
@media (max-width:480px){ .kcp__tag{font-size:8px;padding:5px 7px;} .kcp__tags{gap:5px;margin-bottom:14px;} }
.kcp__facts{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:14px;overflow:hidden;margin-top:44px;}
.kcp__fact{background:var(--raise);padding:20px 22px;display:flex;flex-direction:column;gap:7px;}
.kcp__fact span{font-size:12px;color:var(--faint);text-transform:uppercase;letter-spacing:.06em;}
.kcp__fact b{font-family:'Unbounded';font-weight:600;font-size:14px;line-height:1.3;}
.kcp__cover{margin:48px auto 0;max-width:1280px;aspect-ratio:16/8;border-radius:20px;}
/* SECTIONS */
.kcp__sec{max-width:1080px;margin:0 auto;padding:64px 6vw;}
.kcp__grid2{display:grid;grid-template-columns:0.85fr 1.15fr;gap:48px;align-items:start;}
.kcp__prose p{color:#c9c7c2;font-size:17px;margin-bottom:16px;}
.kcp__prose p:last-child{margin-bottom:0;}
.kcp__prose b{color:var(--text);font-weight:600;}
/* CALLOUT */
.kcp__callout{background:linear-gradient(135deg,rgba(109,93,251,.10),rgba(109,93,251,.02));border:1px solid rgba(109,93,251,.3);border-radius:18px;padding:40px 44px;}
.kcp__callout-k{font-family:'Unbounded';font-size:12px;letter-spacing:.14em;color:var(--accent);margin-bottom:14px;}
.kcp__callout-t{font-family:'Unbounded';font-weight:600;font-size:clamp(20px,2.4vw,30px);line-height:1.35;letter-spacing:-.01em;}
/* TIMELINE */
.kcp__timeline{list-style:none;margin-top:44px;display:flex;flex-direction:column;gap:26px;}
.kcp__step{display:grid;grid-template-columns:88px 1fr;gap:26px;background:var(--raise);border:1px solid var(--border);border-radius:18px;padding:30px 32px;transition:.25s;}
.kcp__step:hover{border-color:rgba(109,93,251,.4);}
.kcp__step-num{font-family:'Unbounded';font-weight:700;font-size:34px;color:var(--accent);line-height:1;opacity:.85;}
.kcp__step-body h3{font-family:'Unbounded';font-weight:600;font-size:22px;letter-spacing:-.01em;margin-bottom:12px;}
.kcp__step-body p{color:#c4c2bd;font-size:16px;}
.kcp__step--next{background:transparent;border-style:dashed;}
.kcp__step--next .kcp__step-num{opacity:1;}
/* PLACEHOLDERS */
.kcp__ph{position:relative;background:repeating-linear-gradient(45deg,#141416,#141416 12px,#17171a 12px,#17171a 24px);border:2px dashed #38383e;border-radius:14px;min-height:150px;display:flex;align-items:center;justify-content:center;text-align:center;}
.kcp__ph-label{color:#8a8a90;font-size:13px;font-weight:600;line-height:1.5;padding:16px;}
.kcp__ph-label small{color:var(--faint);font-weight:500;}
.kcp__ph--wide{margin-top:18px;aspect-ratio:16/8;min-height:0;}
.kcp__ph--grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:18px;background:none;border:none;padding:0;}
.kcp__ph--grid .kcp__ph{aspect-ratio:4/3;min-height:0;}
.kcp__cover.kcp__ph{aspect-ratio:16/8;}
/* BEFORE/AFTER */
.kcp__ba{position:relative;margin-top:20px;aspect-ratio:16/9;border-radius:16px;overflow:hidden;border:1px solid var(--border);user-select:none;}
.kcp__ba-after,.kcp__ba-before{position:absolute;inset:0;border-radius:0;border:none;}
.kcp__ba-before{width:100%;clip-path:inset(0 50% 0 0);}
.kcp__ba-handle{position:absolute;top:0;bottom:0;left:50%;width:2px;background:var(--accent);cursor:ew-resize;transform:translateX(-1px);}
.kcp__ba-handle span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:40px;height:40px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(0,0,0,.4);}
.kcp__ba-handle span::before{content:'⟷';color:#000;font-size:18px;font-weight:700;}
.kcp__ba-tag{position:absolute;top:14px;font-family:'Unbounded';font-size:11px;letter-spacing:.1em;background:rgba(0,0,0,.6);padding:5px 11px;border-radius:6px;}
.kcp__ba-tag--l{left:14px;}
.kcp__ba-tag--r{right:14px;}
.kcp__ba-hint{text-align:center;color:var(--faint);font-size:13px;margin-top:12px;}
/* RESULT */
.kcp__result-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:34px;}
.kcp__rcard{background:var(--raise);border:1px solid var(--border);border-radius:16px;padding:26px 28px;}
.kcp__rc-t{font-family:'Unbounded';font-weight:600;font-size:18px;color:var(--accent);margin-bottom:10px;}
.kcp__rcard p{color:#c4c2bd;font-size:15px;}
/* CHIPS */
.kcp__chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;}
.kcp__chips span{font-family:'Manrope';font-weight:600;font-size:14px;color:var(--text);background:rgba(109,93,251,.08);border:1px solid rgba(109,93,251,.4);border-radius:8px;padding:10px 16px;}
/* VIDEO */
.kcp__video{margin-top:24px;aspect-ratio:16/9;border-radius:18px;overflow:hidden;border:1px solid var(--border);background:#000;}
.kcp__video iframe{width:100%;height:100%;border:none;}
/* CTA */
.kcp__vid2{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px;}
.kcp__vid2 .kcp__ph{aspect-ratio:16/9;min-height:0;margin-top:0;}
.kcp__letter{margin-top:26px;max-width:440px;}
.kcp__letter img{display:block;width:100%;height:auto;border-radius:14px;border:1px solid var(--border);}
.kcp__more{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:28px;}
.kcp__more-card{display:block;background:var(--raise);border:1px solid var(--border);border-radius:16px;padding:24px 26px;text-decoration:none;transition:.2s;}
.kcp__more-card:hover{border-color:var(--accent);}
.kcp__more-card span{display:block;font-size:12px;letter-spacing:2px;color:var(--accent);text-transform:uppercase;margin-bottom:10px;}
.kcp__more-card b{display:block;font-family:'Unbounded',sans-serif;font-weight:700;font-size:22px;line-height:1.2;color:var(--text);margin-bottom:8px;}
.kcp__more-card i{font-style:normal;font-size:15px;color:var(--muted);}
@media (max-width:640px){.kcp__vid2{grid-template-columns:1fr;}.kcp__more{grid-template-columns:1fr;}}
.kcp__cta{max-width:900px;margin:20px auto 0;padding:80px 6vw 96px;text-align:center;}
.kcp__cta h2{font-family:'Unbounded';font-weight:700;font-size:clamp(26px,3.4vw,42px);letter-spacing:-.02em;margin-bottom:16px;}
.kcp__cta p{color:var(--muted);font-size:18px;margin-bottom:30px;}
.kcp__cta-btn{display:inline-block;background:var(--accent);color:#fff;text-decoration:none;font-family:'Manrope';font-weight:700;font-size:16px;padding:18px 38px;border-radius:10px;transition:.25s;}
.kcp__cta-btn:hover{transform:translateY(-2px);box-shadow:0 14px 34px var(--glow);}
@media (max-width:820px){
  .kcp__facts{grid-template-columns:1fr 1fr;}
  .kcp__grid2{grid-template-columns:1fr;gap:20px;}
  .kcp__step{grid-template-columns:1fr;gap:14px;padding:24px 22px;}
  .kcp__step-num{font-size:28px;}
  .kcp__result-grid{grid-template-columns:1fr;}
  .kcp__ph--grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:480px){
  .kcp__hero{padding:48px 20px 0;}
  .kcp__sec{padding:48px 20px;}
  .kcp__facts{grid-template-columns:1fr;}
  .kcp__callout{padding:28px 24px;}
}
/* заполненные слоты (картинка/видео из конфига) */
.kcp [data-img].kcp--filled,.kcp [data-video].kcp--filled{background:none;border:none;}
.kcp [data-img] img,.kcp [data-video] img{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit;}
.kcp [data-fit="contain"] img{object-fit:contain;background:#0f0f11;padding:6%;}
.kcp [data-video].kcp--filled iframe{width:100%;height:100%;border:none;display:block;}
.kcp__ph.kcp--filled{padding:0;}
</style>
<script>
(function(){
  var C=window.KORS_CASE||{}; var IMG=C.images||{}, VID=C.videos||{};
  document.querySelectorAll('.kcp [data-video]').forEach(function(el){
    var id=VID[el.getAttribute('data-video')];
    if(id){ el.classList.add('kcp--filled'); el.innerHTML='<iframe src="https://kinescope.io/embed/'+id+'" allow="autoplay; fullscreen; encrypted-media; picture-in-picture" allowfullscreen frameborder="0"></iframe>'; el.removeAttribute('data-img'); }
  });
  document.querySelectorAll('.kcp [data-img]').forEach(function(el){
    var url=IMG[el.getAttribute('data-img')];
    if(url){ el.classList.add('kcp--filled'); el.innerHTML='<img src="'+url+'" alt="">'; }
  });
})();
(function(){
  // Слайдер до/после
  var ba=document.getElementById('kcpBA'); if(!ba) return;
  var before=document.getElementById('kcpBABefore');
  var handle=document.getElementById('kcpBAHandle');
  var dragging=false;
  function setPos(clientX){
    var r=ba.getBoundingClientRect();
    var x=Math.max(0,Math.min(clientX-r.left,r.width));
    var pct=(x/r.width)*100;
    before.style.clipPath='inset(0 '+(100-pct)+'% 0 0)';
    handle.style.left=pct+'%';
  }
  handle.addEventListener('mousedown',function(){dragging=true;});
  window.addEventListener('mouseup',function(){dragging=false;});
  window.addEventListener('mousemove',function(e){ if(dragging) setPos(e.clientX); });
  handle.addEventListener('touchstart',function(){dragging=true;},{passive:true});
  window.addEventListener('touchend',function(){dragging=false;});
  window.addEventListener('touchmove',function(e){ if(dragging&&e.touches[0]) setPos(e.touches[0].clientX); },{passive:true});
  ba.addEventListener('click',function(e){ setPos(e.clientX); });
})();
</script>

rec2699474201 · КЕЙС ОДОЕВСКИЕ (25380 симв.)

<!-- ================================================================
     KORS · СТРАНИЦА-КЕЙС · ОДОЕВСКИЕ КОНСЕРВЫ
     ── ЗАПОЛНЕНИЕ ──────────────────────────────────────────────────
     Всё фото/видео вставляется В ОДНОМ МЕСТЕ - в списке ниже (KORS_CASE).
     • Картинки: вставь ссылку на изображение в кавычки. Пусто '' = заглушка.
       Где взять ссылку: загрузи фото в Tilda (Файл-менеджер сайта или любой
       блок «Изображение») и скопируй URL картинки; либо любой прямой URL.
     • Видео: впиши ID ролика Kinescope (часть после kinescope.io/… ). Пусто = заглушка.
     Больше нигде в коде править не нужно - слоты подтянутся сами.
     ================================================================ -->
<script>
window.KORS_CASE = {
  images: {
    cover:        'https://static.tildacdn.com/tild6563-3237-4237-b738-393161643533/odoevskie-cover-zavo.jpg',   // большая обложка вверху (гориз. фото/визуал)
    firstShoot:   '',   // шаг 01 - кадр первой съёмки начинки (если без видео)
    firstShoot2:  '',   // шаг 01 - кадр второй съёмки начинки (если без видео)
    presentation: 'https://static.tildacdn.com/tild3266-6134-4634-a231-623537393735/odoevskie-presentati.jpg',   // шаг 02 - развороты печатной презентации
    factoryPhoto: '',   // шаг 03 - фото производства (если без видео)
    product1:     'https://static.tildacdn.com/tild3538-6336-4331-b630-393965653763/odoevskie-nachinki-1.jpg',   // шаг 04 - фото продукции 1
    product2:     'https://static.tildacdn.com/tild6462-3535-4432-b266-653436663333/odoevskie-kruasan-12.jpg',   // шаг 04 - фото продукции 2
    product3:     'https://static.tildacdn.com/tild6462-3131-4336-a237-366662616565/odoevskie-laboratori.jpg',   // шаг 04 - фото цеха/процесса
    logoBefore:   'https://static.tildacdn.com/tild6462-3439-4365-a261-333634373338/odoevskie-logo-do-12.jpg',   // шаг 05 - СТАРЫЙ логотип (до)
    logoAfter:    'https://static.tildacdn.com/tild6338-3131-4439-b966-623739303361/odoevskie-logo-posle.jpg',   // шаг 05 - НОВЫЙ логотип (после)
    brand1:       '',   // шаг 06 - визитки
    brand2:       '',   // шаг 06 - открытки
    brand3:       'https://static.tildacdn.com/tild6632-3465-4634-b861-393137323563/odoevskie-priglasite.jpg',   // шаг 06 - др. носители
    siteShots:    ''    // шаг 07 - скриншоты сайта RU/EN
  },
  videos: {
    firstShoot:   'sRyZwPm3BS9CVspVi2sLx3',   // шаг 01 - ролик «Термостабильные начинки»
    firstShoot2:  'mZiwnH9uZAdc15hhRsqPvB',    // шаг 01 - ролик «Нетермостабильные начинки»
    factory:      '3ZsxHkdEuHUubxSAQZDRyG',    // шаг 03 - фильм о заводе, полная версия
    main:         'j8Pq4wWMNTPm6Js8UQiM1n'     // блок «Видео проекта»
  }
};
</script>
<div class="kcp">
  <!-- ===== HERO ===== -->
  <header class="kcp__hero">
    <div class="kcp__hero-in">
      <a class="kcp__back" href="/#rec2667018101">← Все проекты</a>
      <div class="kcp__eyebrow">КЕЙС · ПИЩЕВОЕ ПРОИЗВОДСТВО</div>
      <h1 class="kcp__title">Одоевские консервы</h1>
      <div class="kcp__tags"><span class="kcp__tag">Видео</span><span class="kcp__tag">Фотосъёмка</span><span class="kcp__tag">Презентация</span><span class="kcp__tag">Фирменный стиль</span><span class="kcp__tag">Сайт</span></div>
      <p class="kcp__lead">Как из одной видеосъёмки вырос полный комплект материалов - от роликов и фотосъёмки до нового логотипа, фирменного стиля и двуязычного сайта для выхода на рынок ОАЭ.</p>
      <div class="kcp__facts">
        <div class="kcp__fact"><span>Сфера</span><b>Пищевое производство · B2B</b></div>
        <div class="kcp__fact"><span>С чего начали</span><b>Видеосъёмка продукта</b></div>
        <div class="kcp__fact"><span>Где сейчас</span><b>Сайт RU/EN · выход на MENA</b></div>
        <div class="kcp__fact"><span>Формат</span><b>полный комплект материалов</b></div>
      </div>
    </div>
    <!-- ВСТАВИТЬ: большое обложечное фото/видео (завод, продукция или кадр со съёмки). Пока заглушка. -->
    <div class="kcp__cover kcp__ph" data-img="cover"><div class="kcp__ph-label">📷 Обложка: фото продукции / кадр со съёмки (16:9)</div></div>
  </header>
  <!-- ===== КТО КЛИЕНТ ===== -->
  <section class="kcp__sec">
    <div class="kcp__grid2">
      <div>
        <div class="kcp__kick">- О КОМПАНИИ</div>
        <h2 class="kcp__h2">Сильное производство, которое было не видно</h2>
      </div>
      <div class="kcp__prose">
        <p>«Одоевские консервы» - производитель из посёлка Одоев в Тульской области. Уже около пятнадцати лет компания выпускает термостабильные фруктово-ягодные начинки, повидло, джемы, конфитюры, пюре и наполнители для хлебопекарной, кондитерской и молочной промышленности.</p>
        <p>Это классический B2B: их продукт - ингредиент, который живёт <b>внутри</b> чужих изделий. Начинка в круассане, повидло в печенье, наполнитель в йогурте. Продукт качественный, производство серьёзное - но со стороны этого масштаба не было видно.</p>
        <p>Видео, сайт, презентация и фирменные материалы существовали разрозненно и не складывались в единую картину. Компанию нельзя было «показать» - только долго объяснять на словах.</p>
      </div>
    </div>
  </section>
  <!-- ===== ЗАДАЧА (акцентная плашка) ===== -->
  <section class="kcp__sec">
    <div class="kcp__callout">
      <div class="kcp__callout-k">ЗАДАЧА</div>
      <div class="kcp__callout-t">Показать масштаб и качество производства так, чтобы партнёр видел уровень компании за несколько минут - а не верил на слово.</div>
    </div>
  </section>
  <!-- ===== ТАЙМЛАЙН РАБОТЫ ===== -->
  <section class="kcp__sec">
    <div class="kcp__kick">- КАК ШЛА РАБОТА</div>
    <h2 class="kcp__h2">Из одной съёмки - в полный цикл</h2>
    <p class="kcp__sub">Сотрудничество началось с одного ролика и постепенно выросло в полный комплект материалов. Вот путь шаг за шагом.</p>
    <ol class="kcp__timeline">
      <li class="kcp__step">
        <div class="kcp__step-num">01</div>
        <div class="kcp__step-body">
          <h3>Первые видео на начинке</h3>
          <p>Начали с двух роликов о продукте. Сняли начинку «в деле» - текстуру, цвет, как она работает в готовом изделии. Это первое, что показывает потенциальному партнёру, что перед ним - качественный ингредиент.</p>
          <!-- Два ролика первой съёмки. ID берутся из KORS_CASE.videos (firstShoot / firstShoot2). -->
          <div class="kcp__vid2">
            <div class="kcp__ph" data-video="firstShoot" data-img="firstShoot"><div class="kcp__ph-label">🎬 Термостабильные начинки</div></div>
            <div class="kcp__ph" data-video="firstShoot2" data-img="firstShoot2"><div class="kcp__ph-label">🎬 Нетермостабильные начинки</div></div>
          </div>
        </div>
      </li>
      <li class="kcp__step">
        <div class="kcp__step-num">02</div>
        <div class="kcp__step-body">
          <h3>Печатная презентация</h3>
          <p>Собрали продукт и производство в понятную структуру - презентацию для переговоров и выставок. Разложили ассортимент, преимущества и мощности так, чтобы менеджеру было легко показать компанию клиенту.</p>
          <div class="kcp__ph kcp__ph--wide" data-img="presentation"><div class="kcp__ph-label">📑 Развороты печатной презентации</div></div>
        </div>
      </li>
      <li class="kcp__step">
        <div class="kcp__step-num">03</div>
        <div class="kcp__step-body">
          <h3>Видео о заводе</h3>
          <p>Сняли само производство: масштаб цехов, оборудование, процессы. Именно это видео закрывает главный вопрос B2B-клиента - «а справятся ли по объёму и качеству». Масштаб теперь виден, а не описан словами.</p>
          <div class="kcp__ph kcp__ph--wide" data-video="factory" data-img="factoryPhoto"><div class="kcp__ph-label">🎬 Видео о заводе / кадры производства</div></div>
        </div>
      </li>
      <li class="kcp__step">
        <div class="kcp__step-num">04</div>
        <div class="kcp__step-body">
          <h3>Фотосъёмка для презентации и каталога</h3>
          <p>Сделали предметную и производственную фотосъёмку - продукция, упаковка, цеха. Единый визуальный ряд, который лёг в презентацию, каталог и дальнейшие материалы.</p>
          <div class="kcp__ph kcp__ph--grid">
            <div class="kcp__ph" data-img="product1"><div class="kcp__ph-label">📷 фото продукции 1</div></div>
            <div class="kcp__ph" data-img="product2"><div class="kcp__ph-label">📷 фото продукции 2</div></div>
            <div class="kcp__ph" data-img="product3"><div class="kcp__ph-label">📷 фото цеха / процесса</div></div>
          </div>
        </div>
      </li>
      <li class="kcp__step">
        <div class="kcp__step-num">05</div>
        <div class="kcp__step-body">
          <h3>Новый логотип: до / после</h3>
          <p>Обновили логотип - сохранили узнаваемость, но привели к современному виду, который одинаково хорошо работает на упаковке, в презентации и на сайте. Сравните сами:</p>
          <!-- ДО/ПОСЛЕ слайдер. ВСТАВИТЬ 2 картинки логотипа: старый и новый -->
          <div class="kcp__ba" id="kcpBA">
            <div class="kcp__ba-after kcp__ph" data-img="logoAfter" data-fit="contain"><div class="kcp__ph-label">✅ НОВЫЙ логотип (после)</div></div>
            <div class="kcp__ba-before kcp__ph" id="kcpBABefore" data-img="logoBefore" data-fit="contain"><div class="kcp__ph-label">◻️ СТАРЫЙ логотип (до)</div></div>
            <div class="kcp__ba-handle" id="kcpBAHandle"><span></span></div>
            <div class="kcp__ba-tag kcp__ba-tag--l">ДО</div>
            <div class="kcp__ba-tag kcp__ba-tag--r">ПОСЛЕ</div>
          </div>
          <div class="kcp__ba-hint">Потяните ползунок влево-вправо, чтобы сравнить</div>
        </div>
      </li>
      <li class="kcp__step">
        <div class="kcp__step-num">06</div>
        <div class="kcp__step-body">
          <h3>Фирменный стиль: открытки, визитки, носители</h3>
          <p>Оформили фирменные носители - визитки, открытки и другие материалы в единой стилистике. Компания получила узнаваемый облик, который работает на каждой точке контакта.</p>
          <div class="kcp__ph kcp__ph--grid">
            <div class="kcp__ph" data-img="brand1"><div class="kcp__ph-label">📷 визитки</div></div>
            <div class="kcp__ph" data-img="brand2"><div class="kcp__ph-label">📷 открытки</div></div>
            <div class="kcp__ph" data-img="brand3" data-fit="contain"><div class="kcp__ph-label">📷 др. носители</div></div>
          </div>
        </div>
      </li>
      <li class="kcp__step">
        <div class="kcp__step-num">07</div>
        <div class="kcp__step-body">
          <h3>Сайт на двух языках - выход на MENA</h3>
          <p>Разработали сайт в двух версиях - русской и английской. Английская версия сделана под рынок ОАЭ и региона MENA: теперь компания может представлять себя международным партнёрам на их языке, с тем же уровнем подачи, что и внутри страны.</p>
          <div class="kcp__ph kcp__ph--wide" data-img="siteShots"><div class="kcp__ph-label">💻 Скриншоты сайта (RU и EN)</div></div>
        </div>
      </li>
      <li class="kcp__step kcp__step--next">
        <div class="kcp__step-num">→</div>
        <div class="kcp__step-body">
          <h3>Что дальше</h3>
          <p>Следующий этап - застройка выставочного стенда (планируется на зиму). Сотрудничество продолжается: от продукта на экране - к тому, как компания выглядит вживую на выставке.</p>
        </div>
      </li>
    </ol>
  </section>
  <!-- ===== РЕЗУЛЬТАТ ===== -->
  <section class="kcp__sec">
    <div class="kcp__result">
      <div class="kcp__kick">- ЧТО ИЗМЕНИЛОСЬ</div>
      <h2 class="kcp__h2">Компанию теперь можно показать, а не пересказывать</h2>
      <div class="kcp__result-grid">
        <div class="kcp__rcard"><div class="kcp__rc-t">Единый комплект</div><p>Видео, фото, презентация, логотип, фирменный стиль и сайт - собраны в одну систему и работают вместе.</p></div>
        <div class="kcp__rcard"><div class="kcp__rc-t">Масштаб за минуты</div><p>Производство и уровень компании видно сразу - на переговорах, выставках и в презентации, без долгих объяснений.</p></div>
        <div class="kcp__rcard"><div class="kcp__rc-t">Выход за рубеж</div><p>Двуязычный сайт открыл дорогу к партнёрам в ОАЭ и регионе MENA.</p></div>
        <div class="kcp__rcard"><div class="kcp__rc-t">Долгое партнёрство</div><p>Сотрудничество выросло из одной видеосъёмки в постоянную работу над материалами компании.</p></div>
      </div>
    </div>
  </section>
  <!-- ===== ЧТО ВОШЛО (услуги) ===== -->
  <section class="kcp__sec">
    <div class="kcp__kick">- ЧТО ВОШЛО В КОМПЛЕКТ</div>
    <div class="kcp__chips">
      <span>Видеопродакшн</span><span>Съёмка производства</span><span>Фотосъёмка</span><span>Печатная презентация</span><span>Редизайн логотипа</span><span>Фирменный стиль</span><span>Визитки и открытки</span><span>Сайт RU</span><span>Сайт EN (MENA)</span>
    </div>
  </section>
  <!-- ===== ВИДЕО КЕЙСА ===== -->
  <section class="kcp__sec">
    <div class="kcp__kick">- СМОТРЕТЬ</div>
    <h2 class="kcp__h2">Видео проекта</h2>
    <!-- ID ролика берётся из KORS_CASE.videos.main -->
    <div class="kcp__video" data-video="main"><div class="kcp__ph-label">🎬 Основной ролик проекта</div></div>
  </section>
  <!-- ===== ОТЗЫВ КЛИЕНТА ===== -->
  <section class="kcp__sec">
    <div class="kcp__kick">- ОТЗЫВ</div>
    <h2 class="kcp__h2">Благодарственное письмо</h2>
    <p class="kcp__sub">ООО «МастерДжем» - юридическое лицо «Одоевских консервов»</p>
    <div class="kcp__letter"><img src="https://static.tildacdn.com/tild3231-6563-4932-b139-373433306561/pismo-odoevskie-1200.jpg" alt="Благодарственное письмо от ООО «МастерДжем» (Одоевские консервы) команде KORS Production за фото- и видеосъёмку производства и материалы для сайта и презентаций" loading="lazy"></div>
  </section>
  <!-- ===== ДРУГИЕ КЕЙСЫ ===== -->
  <section class="kcp__sec">
    <div class="kcp__kick">- ЕЩЁ</div>
    <h2 class="kcp__h2">Другие кейсы</h2>
    <div class="kcp__more">
      <a class="kcp__more-card" href="/case-invoicebox"><span>Кейс</span><b>InvoiceBox</b><i>Видеоматериалы для платформы →</i></a>
      <a class="kcp__more-card" href="/case-vistex"><span>Кейс</span><b>Вистекс</b><i>Съёмка видео о предприятии →</i></a>
    </div>
  </section>
  <!-- ===== CTA ===== -->
  <section class="kcp__cta">
    <h2>Хотите так же показать своё производство?</h2>
    <p>Начнём с одного шага - а вырастем в полный цикл, если понравится результат.</p>
    <a class="kcp__cta-btn" href="#popup:zayavka">Обсудить проект →</a>
  </section>
</div>
<style>
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Unbounded:wght@400;600;700;800&display=swap');
.kcp{--bg:#0C0C0E;--raise:#141416;--card:#1B1B1F;--border:#2A2A2E;--soft:#242428;--text:#F5F3EF;--muted:#9A9A9A;--faint:#6a6a6e;--accent:#6D5DFB;--glow:rgba(109,93,251,.14);
  box-sizing:border-box;background:var(--bg);color:var(--text);font-family:'Manrope',Arial,sans-serif;-webkit-font-smoothing:antialiased;}
.kcp *{box-sizing:border-box;margin:0;padding:0;}
.kcp p{line-height:1.65;}
.kcp__eyebrow,.kcp__kick{font-family:'Unbounded';font-size:12px;letter-spacing:.14em;color:var(--accent);}
.kcp__h2{font-family:'Unbounded';font-weight:700;font-size:clamp(26px,3.2vw,42px);letter-spacing:-.02em;line-height:1.12;margin:14px 0 0;}
.kcp__sub{color:var(--muted);font-size:17px;line-height:1.6;max-width:640px;margin-top:14px;}
/* HERO */
.kcp__hero{padding:70px 6vw 0;max-width:1280px;margin:0 auto;}
.kcp__hero-in{max-width:900px;}
.kcp__back{display:inline-block;color:var(--muted);text-decoration:none;font-size:14px;font-weight:600;margin-bottom:34px;transition:.2s;}
.kcp__back:hover{color:var(--accent);}
.kcp__hero .kcp__eyebrow{margin-bottom:18px;}
.kcp__title{font-family:'Unbounded';font-weight:800;font-size:clamp(40px,7vw,88px);letter-spacing:-.03em;line-height:1;margin-bottom:24px;}
.kcp__lead{font-size:clamp(18px,2vw,22px);line-height:1.55;color:#d8d6d1;max-width:760px;}
.kcp__tags{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 18px;}
.kcp__tag{font-family:'Manrope',Arial,sans-serif;font-weight:600;font-size:9px;line-height:1;text-transform:uppercase;letter-spacing:.14em;color:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.22);border-radius:4px;padding:5px 8px;white-space:nowrap;}
@media (max-width:480px){ .kcp__tag{font-size:8px;padding:5px 7px;} .kcp__tags{gap:5px;margin-bottom:14px;} }
.kcp__facts{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:14px;overflow:hidden;margin-top:44px;}
.kcp__fact{background:var(--raise);padding:20px 22px;display:flex;flex-direction:column;gap:7px;}
.kcp__fact span{font-size:12px;color:var(--faint);text-transform:uppercase;letter-spacing:.06em;}
.kcp__fact b{font-family:'Unbounded';font-weight:600;font-size:14px;line-height:1.3;}
.kcp__cover{margin:48px auto 0;max-width:1280px;aspect-ratio:16/8;border-radius:20px;}
/* SECTIONS */
.kcp__sec{max-width:1080px;margin:0 auto;padding:64px 6vw;}
.kcp__grid2{display:grid;grid-template-columns:0.85fr 1.15fr;gap:48px;align-items:start;}
.kcp__prose p{color:#c9c7c2;font-size:17px;margin-bottom:16px;}
.kcp__prose p:last-child{margin-bottom:0;}
.kcp__prose b{color:var(--text);font-weight:600;}
/* CALLOUT */
.kcp__callout{background:linear-gradient(135deg,rgba(109,93,251,.10),rgba(109,93,251,.02));border:1px solid rgba(109,93,251,.3);border-radius:18px;padding:40px 44px;}
.kcp__callout-k{font-family:'Unbounded';font-size:12px;letter-spacing:.14em;color:var(--accent);margin-bottom:14px;}
.kcp__callout-t{font-family:'Unbounded';font-weight:600;font-size:clamp(20px,2.4vw,30px);line-height:1.35;letter-spacing:-.01em;}
/* TIMELINE */
.kcp__timeline{list-style:none;margin-top:44px;display:flex;flex-direction:column;gap:26px;}
.kcp__step{display:grid;grid-template-columns:88px 1fr;gap:26px;background:var(--raise);border:1px solid var(--border);border-radius:18px;padding:30px 32px;transition:.25s;}
.kcp__step:hover{border-color:rgba(109,93,251,.4);}
.kcp__step-num{font-family:'Unbounded';font-weight:700;font-size:34px;color:var(--accent);line-height:1;opacity:.85;}
.kcp__step-body h3{font-family:'Unbounded';font-weight:600;font-size:22px;letter-spacing:-.01em;margin-bottom:12px;}
.kcp__step-body p{color:#c4c2bd;font-size:16px;}
.kcp__step--next{background:transparent;border-style:dashed;}
.kcp__step--next .kcp__step-num{opacity:1;}
/* PLACEHOLDERS */
.kcp__ph{position:relative;background:repeating-linear-gradient(45deg,#141416,#141416 12px,#17171a 12px,#17171a 24px);border:2px dashed #38383e;border-radius:14px;min-height:150px;display:flex;align-items:center;justify-content:center;text-align:center;}
.kcp__ph-label{color:#8a8a90;font-size:13px;font-weight:600;line-height:1.5;padding:16px;}
.kcp__ph-label small{color:var(--faint);font-weight:500;}
.kcp__ph--wide{margin-top:18px;aspect-ratio:16/8;min-height:0;}
.kcp__ph--grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:18px;background:none;border:none;padding:0;}
.kcp__ph--grid .kcp__ph{aspect-ratio:4/3;min-height:0;}
.kcp__cover.kcp__ph{aspect-ratio:16/8;}
/* BEFORE/AFTER */
.kcp__ba{position:relative;margin-top:20px;aspect-ratio:16/9;border-radius:16px;overflow:hidden;border:1px solid var(--border);user-select:none;}
.kcp__ba-after,.kcp__ba-before{position:absolute;inset:0;border-radius:0;border:none;}
.kcp__ba-before{width:100%;clip-path:inset(0 50% 0 0);}
.kcp__ba-handle{position:absolute;top:0;bottom:0;left:50%;width:2px;background:var(--accent);cursor:ew-resize;transform:translateX(-1px);}
.kcp__ba-handle span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:40px;height:40px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(0,0,0,.4);}
.kcp__ba-handle span::before{content:'⟷';color:#000;font-size:18px;font-weight:700;}
.kcp__ba-tag{position:absolute;top:14px;font-family:'Unbounded';font-size:11px;letter-spacing:.1em;background:rgba(0,0,0,.6);padding:5px 11px;border-radius:6px;}
.kcp__ba-tag--l{left:14px;}
.kcp__ba-tag--r{right:14px;}
.kcp__ba-hint{text-align:center;color:var(--faint);font-size:13px;margin-top:12px;}
/* RESULT */
.kcp__result-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:34px;}
.kcp__rcard{background:var(--raise);border:1px solid var(--border);border-radius:16px;padding:26px 28px;}
.kcp__rc-t{font-family:'Unbounded';font-weight:600;font-size:18px;color:var(--accent);margin-bottom:10px;}
.kcp__rcard p{color:#c4c2bd;font-size:15px;}
/* CHIPS */
.kcp__chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;}
.kcp__chips span{font-family:'Manrope';font-weight:600;font-size:14px;color:var(--text);background:rgba(109,93,251,.08);border:1px solid rgba(109,93,251,.4);border-radius:8px;padding:10px 16px;}
/* VIDEO */
.kcp__video{margin-top:24px;aspect-ratio:16/9;border-radius:18px;overflow:hidden;border:1px solid var(--border);background:#000;}
.kcp__video iframe{width:100%;height:100%;border:none;}
/* CTA */
.kcp__vid2{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px;}
.kcp__vid2 .kcp__ph{aspect-ratio:16/9;min-height:0;margin-top:0;}
.kcp__letter{margin-top:26px;max-width:440px;}
.kcp__letter img{display:block;width:100%;height:auto;border-radius:14px;border:1px solid var(--border);}
.kcp__more{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:28px;}
.kcp__more-card{display:block;background:var(--raise);border:1px solid var(--border);border-radius:16px;padding:24px 26px;text-decoration:none;transition:.2s;}
.kcp__more-card:hover{border-color:var(--accent);}
.kcp__more-card span{display:block;font-size:12px;letter-spacing:2px;color:var(--accent);text-transform:uppercase;margin-bottom:10px;}
.kcp__more-card b{display:block;font-family:'Unbounded',sans-serif;font-weight:700;font-size:22px;line-height:1.2;color:var(--text);margin-bottom:8px;}
.kcp__more-card i{font-style:normal;font-size:15px;color:var(--muted);}
@media (max-width:640px){.kcp__vid2{grid-template-columns:1fr;}.kcp__more{grid-template-columns:1fr;}}
.kcp__cta{max-width:900px;margin:20px auto 0;padding:80px 6vw 96px;text-align:center;}
.kcp__cta h2{font-family:'Unbounded';font-weight:700;font-size:clamp(26px,3.4vw,42px);letter-spacing:-.02em;margin-bottom:16px;}
.kcp__cta p{color:var(--muted);font-size:18px;margin-bottom:30px;}
.kcp__cta-btn{display:inline-block;background:var(--accent);color:#fff;text-decoration:none;font-family:'Manrope';font-weight:700;font-size:16px;padding:18px 38px;border-radius:10px;transition:.25s;}
.kcp__cta-btn:hover{transform:translateY(-2px);box-shadow:0 14px 34px var(--glow);}
@media (max-width:820px){
  .kcp__facts{grid-template-columns:1fr 1fr;}
  .kcp__grid2{grid-template-columns:1fr;gap:20px;}
  .kcp__step{grid-template-columns:1fr;gap:14px;padding:24px 22px;}
  .kcp__step-num{font-size:28px;}
  .kcp__result-grid{grid-template-columns:1fr;}
  .kcp__ph--grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:480px){
  .kcp__hero{padding:48px 20px 0;}
  .kcp__sec{padding:48px 20px;}
  .kcp__facts{grid-template-columns:1fr;}
  .kcp__callout{padding:28px 24px;}
}
/* заполненные слоты (картинка/видео из конфига) */
.kcp [data-img].kcp--filled,.kcp [data-video].kcp--filled{background:none;border:none;}
.kcp [data-img] img,.kcp [data-video] img{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit;}
.kcp [data-fit="contain"] img{object-fit:contain;background:#0f0f11;padding:6%;}
.kcp [data-video].kcp--filled iframe{width:100%;height:100%;border:none;display:block;}
.kcp__ph.kcp--filled{padding:0;}
</style>
<script>
(function(){
  var C=window.KORS_CASE||{}; var IMG=C.images||{}, VID=C.videos||{};
  document.querySelectorAll('.kcp [data-video]').forEach(function(el){
    var id=VID[el.getAttribute('data-video')];
    if(id){ el.classList.add('kcp--filled'); el.innerHTML='<iframe src="https://kinescope.io/embed/'+id+'" allow="autoplay; fullscreen; encrypted-media; picture-in-picture" allowfullscreen frameborder="0"></iframe>'; el.removeAttribute('data-img'); }
  });
  document.querySelectorAll('.kcp [data-img]').forEach(function(el){
    var url=IMG[el.getAttribute('data-img')];
    if(url){ el.classList.add('kcp--filled'); el.innerHTML='<img src="'+url+'" alt="">'; }
  });
})();
(function(){
  // Слайдер до/после
  var ba=document.getElementById('kcpBA'); if(!ba) return;
  var before=document.getElementById('kcpBABefore');
  var handle=document.getElementById('kcpBAHandle');
  var dragging=false;
  function setPos(clientX){
    var r=ba.getBoundingClientRect();
    var x=Math.max(0,Math.min(clientX-r.left,r.width));
    var pct=(x/r.width)*100;
    before.style.clipPath='inset(0 '+(100-pct)+'% 0 0)';
    handle.style.left=pct+'%';
  }
  handle.addEventListener('mousedown',function(){dragging=true;});
  window.addEventListener('mouseup',function(){dragging=false;});
  window.addEventListener('mousemove',function(e){ if(dragging) setPos(e.clientX); });
  handle.addEventListener('touchstart',function(){dragging=true;},{passive:true});
  window.addEventListener('touchend',function(){dragging=false;});
  window.addEventListener('touchmove',function(e){ if(dragging&&e.touches[0]) setPos(e.touches[0].clientX); },{passive:true});
  ba.addEventListener('click',function(e){ setPos(e.clientX); });
})();
</script>

rec2699474201 · КЕЙС ОДОЕВСКИЕ (25409 симв.)

<!-- ================================================================
     KORS · СТРАНИЦА-КЕЙС · ОДОЕВСКИЕ КОНСЕРВЫ
     ── ЗАПОЛНЕНИЕ ──────────────────────────────────────────────────
     Всё фото/видео вставляется В ОДНОМ МЕСТЕ - в списке ниже (KORS_CASE).
     • Картинки: вставь ссылку на изображение в кавычки. Пусто '' = заглушка.
       Где взять ссылку: загрузи фото в Tilda (Файл-менеджер сайта или любой
       блок «Изображение») и скопируй URL картинки; либо любой прямой URL.
     • Видео: впиши ID ролика Kinescope (часть после kinescope.io/… ). Пусто = заглушка.
     Больше нигде в коде править не нужно - слоты подтянутся сами.
     ================================================================ -->
<script>
window.KORS_CASE = {
  images: {
    cover:        'https://static.tildacdn.com/tild6563-3237-4237-b738-393161643533/odoevskie-cover-zavo.jpg',   // большая обложка вверху (гориз. фото/визуал)
    firstShoot:   '',   // шаг 01 - кадр первой съёмки начинки (если без видео)
    firstShoot2:  '',   // шаг 01 - кадр второй съёмки начинки (если без видео)
    presentation: 'https://static.tildacdn.com/tild3266-6134-4634-a231-623537393735/odoevskie-presentati.jpg',   // шаг 02 - развороты печатной презентации
    factoryPhoto: '',   // шаг 03 - фото производства (если без видео)
    product1:     'https://static.tildacdn.com/tild3538-6336-4331-b630-393965653763/odoevskie-nachinki-1.jpg',   // шаг 04 - фото продукции 1
    product2:     'https://static.tildacdn.com/tild6462-3535-4432-b266-653436663333/odoevskie-kruasan-12.jpg',   // шаг 04 - фото продукции 2
    product3:     'https://static.tildacdn.com/tild6462-3131-4336-a237-366662616565/odoevskie-laboratori.jpg',   // шаг 04 - фото цеха/процесса
    logoBefore:   'https://static.tildacdn.com/tild6462-3439-4365-a261-333634373338/odoevskie-logo-do-12.jpg',   // шаг 05 - СТАРЫЙ логотип (до)
    logoAfter:    'https://static.tildacdn.com/tild6338-3131-4439-b966-623739303361/odoevskie-logo-posle.jpg',   // шаг 05 - НОВЫЙ логотип (после)
    brand1:       '',   // шаг 06 - визитки
    brand2:       '',   // шаг 06 - открытки
    brand3:       'https://static.tildacdn.com/tild6632-3465-4634-b861-393137323563/odoevskie-priglasite.jpg',   // шаг 06 - др. носители
    siteShots:    ''    // шаг 07 - скриншоты сайта RU/EN
  },
  videos: {
    firstShoot:   'sRyZwPm3BS9CVspVi2sLx3',   // шаг 01 - ролик «Термостабильные начинки»
    firstShoot2:  'mZiwnH9uZAdc15hhRsqPvB',    // шаг 01 - ролик «Нетермостабильные начинки»
    factory:      '3ZsxHkdEuHUubxSAQZDRyG',    // шаг 03 - фильм о заводе, полная версия
    main:         'j8Pq4wWMNTPm6Js8UQiM1n'     // блок «Видео проекта»
  }
};
</script>
<div class="kcp">
  <!-- ===== HERO ===== -->
  <header class="kcp__hero">
    <div class="kcp__hero-in">
      <a class="kcp__back" href="/#rec2667018101">← Все проекты</a>
      <div class="kcp__eyebrow">КЕЙС · ПИЩЕВОЕ ПРОИЗВОДСТВО</div>
      <h1 class="kcp__title">Одоевские консервы</h1>
      <div class="kcp__tags"><span class="kcp__tag">Видео</span><span class="kcp__tag">Фотосъёмка</span><span class="kcp__tag">Презентация</span><span class="kcp__tag">Фирменный стиль</span><span class="kcp__tag">Сайт</span></div>
      <p class="kcp__lead">Как из одной видеосъёмки вырос полный комплект материалов - от роликов и фотосъёмки до нового логотипа, фирменного стиля и двуязычного сайта для выхода на рынок ОАЭ.</p>
      <div class="kcp__facts">
        <div class="kcp__fact"><span>Сфера</span><b>Пищевое производство · B2B</b></div>
        <div class="kcp__fact"><span>С чего начали</span><b>Видеосъёмка продукта</b></div>
        <div class="kcp__fact"><span>Где сейчас</span><b>Сайт RU/EN · выход на MENA</b></div>
        <div class="kcp__fact"><span>Формат</span><b>полный комплект материалов</b></div>
      </div>
    </div>
    <!-- ВСТАВИТЬ: большое обложечное фото/видео (завод, продукция или кадр со съёмки). Пока заглушка. -->
    <div class="kcp__cover kcp__ph" data-img="cover"><div class="kcp__ph-label">📷 Обложка: фото продукции / кадр со съёмки (16:9)</div></div>
  </header>
  <!-- ===== КТО КЛИЕНТ ===== -->
  <section class="kcp__sec">
    <div class="kcp__grid2">
      <div>
        <div class="kcp__kick">- О КОМПАНИИ</div>
        <h2 class="kcp__h2">Сильное производство, которое было не видно</h2>
      </div>
      <div class="kcp__prose">
        <p>«Одоевские консервы» - производитель из посёлка Одоев в Тульской области. Уже около пятнадцати лет компания выпускает термостабильные фруктово-ягодные начинки, повидло, джемы, конфитюры, пюре и наполнители для хлебопекарной, кондитерской и молочной промышленности.</p>
        <p>Это классический B2B: их продукт - ингредиент, который живёт <b>внутри</b> чужих изделий. Начинка в круассане, повидло в печенье, наполнитель в йогурте. Продукт качественный, производство серьёзное - но со стороны этого масштаба не было видно.</p>
        <p>Видео, сайт, презентация и фирменные материалы существовали разрозненно и не складывались в единую картину. Компанию нельзя было «показать» - только долго объяснять на словах.</p>
      </div>
    </div>
  </section>
  <!-- ===== ЗАДАЧА (акцентная плашка) ===== -->
  <section class="kcp__sec">
    <div class="kcp__callout">
      <div class="kcp__callout-k">ЗАДАЧА</div>
      <div class="kcp__callout-t">Показать масштаб и качество производства так, чтобы партнёр видел уровень компании за несколько минут - а не верил на слово.</div>
    </div>
  </section>
  <!-- ===== ТАЙМЛАЙН РАБОТЫ ===== -->
  <section class="kcp__sec">
    <div class="kcp__kick">- КАК ШЛА РАБОТА</div>
    <h2 class="kcp__h2">Из одной съёмки - в полный цикл</h2>
    <p class="kcp__sub">Сотрудничество началось с одного ролика и постепенно выросло в полный комплект материалов. Вот путь шаг за шагом.</p>
    <ol class="kcp__timeline">
      <li class="kcp__step">
        <div class="kcp__step-num">01</div>
        <div class="kcp__step-body">
          <h3>Первые видео на начинке</h3>
          <p>Начали с двух роликов о продукте. Сняли начинку «в деле» - текстуру, цвет, как она работает в готовом изделии. Это первое, что показывает потенциальному партнёру, что перед ним - качественный ингредиент.</p>
          <!-- Два ролика первой съёмки. ID берутся из KORS_CASE.videos (firstShoot / firstShoot2). -->
          <div class="kcp__vid2">
            <div class="kcp__ph" data-video="firstShoot" data-img="firstShoot"><div class="kcp__ph-label">🎬 Термостабильные начинки</div></div>
            <div class="kcp__ph" data-video="firstShoot2" data-img="firstShoot2"><div class="kcp__ph-label">🎬 Нетермостабильные начинки</div></div>
          </div>
        </div>
      </li>
      <li class="kcp__step">
        <div class="kcp__step-num">02</div>
        <div class="kcp__step-body">
          <h3>Печатная презентация</h3>
          <p>Собрали продукт и производство в понятную структуру - презентацию для переговоров и выставок. Разложили ассортимент, преимущества и мощности так, чтобы менеджеру было легко показать компанию клиенту.</p>
          <div class="kcp__ph kcp__ph--wide" data-img="presentation"><div class="kcp__ph-label">📑 Развороты печатной презентации</div></div>
        </div>
      </li>
      <li class="kcp__step">
        <div class="kcp__step-num">03</div>
        <div class="kcp__step-body">
          <h3>Видео о заводе</h3>
          <p>Сняли само производство: масштаб цехов, оборудование, процессы. Именно это видео закрывает главный вопрос B2B-клиента - «а справятся ли по объёму и качеству». Масштаб теперь виден, а не описан словами.</p>
          <div class="kcp__ph kcp__ph--wide" data-video="factory" data-img="factoryPhoto"><div class="kcp__ph-label">🎬 Видео о заводе / кадры производства</div></div>
        </div>
      </li>
      <li class="kcp__step">
        <div class="kcp__step-num">04</div>
        <div class="kcp__step-body">
          <h3>Фотосъёмка для презентации и каталога</h3>
          <p>Сделали предметную и производственную фотосъёмку - продукция, упаковка, цеха. Единый визуальный ряд, который лёг в презентацию, каталог и дальнейшие материалы.</p>
          <div class="kcp__ph kcp__ph--grid">
            <div class="kcp__ph" data-img="product1"><div class="kcp__ph-label">📷 фото продукции 1</div></div>
            <div class="kcp__ph" data-img="product2"><div class="kcp__ph-label">📷 фото продукции 2</div></div>
            <div class="kcp__ph" data-img="product3"><div class="kcp__ph-label">📷 фото цеха / процесса</div></div>
          </div>
        </div>
      </li>
      <li class="kcp__step">
        <div class="kcp__step-num">05</div>
        <div class="kcp__step-body">
          <h3>Новый логотип: до / после</h3>
          <p>Обновили логотип - сохранили узнаваемость, но привели к современному виду, который одинаково хорошо работает на упаковке, в презентации и на сайте. Сравните сами:</p>
          <!-- ДО/ПОСЛЕ слайдер. ВСТАВИТЬ 2 картинки логотипа: старый и новый -->
          <div class="kcp__ba" id="kcpBA">
            <div class="kcp__ba-after kcp__ph" data-img="logoAfter" data-fit="contain"><div class="kcp__ph-label">✅ НОВЫЙ логотип (после)</div></div>
            <div class="kcp__ba-before kcp__ph" id="kcpBABefore" data-img="logoBefore" data-fit="contain"><div class="kcp__ph-label">◻️ СТАРЫЙ логотип (до)</div></div>
            <div class="kcp__ba-handle" id="kcpBAHandle"><span></span></div>
            <div class="kcp__ba-tag kcp__ba-tag--l">ДО</div>
            <div class="kcp__ba-tag kcp__ba-tag--r">ПОСЛЕ</div>
          </div>
          <div class="kcp__ba-hint">Потяните ползунок влево-вправо, чтобы сравнить</div>
        </div>
      </li>
      <li class="kcp__step">
        <div class="kcp__step-num">06</div>
        <div class="kcp__step-body">
          <h3>Фирменный стиль: открытки, визитки, носители</h3>
          <p>Оформили фирменные носители - визитки, открытки и другие материалы в единой стилистике. Компания получила узнаваемый облик, который работает на каждой точке контакта.</p>
          <div class="kcp__ph kcp__ph--grid">
            <div class="kcp__ph" data-img="brand1"><div class="kcp__ph-label">📷 визитки</div></div>
            <div class="kcp__ph" data-img="brand2"><div class="kcp__ph-label">📷 открытки</div></div>
            <div class="kcp__ph" data-img="brand3" data-fit="contain"><div class="kcp__ph-label">📷 др. носители</div></div>
          </div>
        </div>
      </li>
      <li class="kcp__step">
        <div class="kcp__step-num">07</div>
        <div class="kcp__step-body">
          <h3>Два сайта: povidlo.su и povidlo.pro</h3>
          <p>Сделали не языковой переключатель, а два отдельных сайта. Русский - povidlo.su, под брендом «Одоевские консервы». Английский - povidlo.pro, под экспортным брендом POVIDLO: он собран под рынок ОАЭ и региона MENA, с отдельной структурой и своими акцентами.</p>
          <div class="kcp__ph kcp__ph--wide" data-img="siteShots"><div class="kcp__ph-label">💻 Скриншоты povidlo.su и povidlo.pro</div></div>
        </div>
      </li>
      <li class="kcp__step kcp__step--next">
        <div class="kcp__step-num">→</div>
        <div class="kcp__step-body">
          <h3>Что дальше</h3>
          <p>Следующий этап - застройка выставочного стенда (планируется на зиму). Сотрудничество продолжается: от продукта на экране - к тому, как компания выглядит вживую на выставке.</p>
        </div>
      </li>
    </ol>
  </section>
  <!-- ===== РЕЗУЛЬТАТ ===== -->
  <section class="kcp__sec">
    <div class="kcp__result">
      <div class="kcp__kick">- ЧТО ИЗМЕНИЛОСЬ</div>
      <h2 class="kcp__h2">Компанию теперь можно показать, а не пересказывать</h2>
      <div class="kcp__result-grid">
        <div class="kcp__rcard"><div class="kcp__rc-t">Единый комплект</div><p>Видео, фото, презентация, логотип, фирменный стиль и сайт - собраны в одну систему и работают вместе.</p></div>
        <div class="kcp__rcard"><div class="kcp__rc-t">Масштаб за минуты</div><p>Производство и уровень компании видно сразу - на переговорах, выставках и в презентации, без долгих объяснений.</p></div>
        <div class="kcp__rcard"><div class="kcp__rc-t">Выход за рубеж</div><p>Двуязычный сайт открыл дорогу к партнёрам в ОАЭ и регионе MENA.</p></div>
        <div class="kcp__rcard"><div class="kcp__rc-t">Долгое партнёрство</div><p>Сотрудничество выросло из одной видеосъёмки в постоянную работу над материалами компании.</p></div>
      </div>
    </div>
  </section>
  <!-- ===== ЧТО ВОШЛО (услуги) ===== -->
  <section class="kcp__sec">
    <div class="kcp__kick">- ЧТО ВОШЛО В КОМПЛЕКТ</div>
    <div class="kcp__chips">
      <span>Видеопродакшн</span><span>Съёмка производства</span><span>Фотосъёмка</span><span>Печатная презентация</span><span>Редизайн логотипа</span><span>Фирменный стиль</span><span>Визитки и открытки</span><span>Сайт RU</span><span>Сайт EN (MENA)</span>
    </div>
  </section>
  <!-- ===== ВИДЕО КЕЙСА ===== -->
  <section class="kcp__sec">
    <div class="kcp__kick">- СМОТРЕТЬ</div>
    <h2 class="kcp__h2">Видео проекта</h2>
    <!-- ID ролика берётся из KORS_CASE.videos.main -->
    <div class="kcp__video" data-video="main"><div class="kcp__ph-label">🎬 Основной ролик проекта</div></div>
  </section>
  <!-- ===== ОТЗЫВ КЛИЕНТА ===== -->
  <section class="kcp__sec">
    <div class="kcp__kick">- ОТЗЫВ</div>
    <h2 class="kcp__h2">Благодарственное письмо</h2>
    <p class="kcp__sub">ООО «МастерДжем» - юридическое лицо «Одоевских консервов»</p>
    <div class="kcp__letter"><img src="https://static.tildacdn.com/tild3231-6563-4932-b139-373433306561/pismo-odoevskie-1200.jpg" alt="Благодарственное письмо от ООО «МастерДжем» (Одоевские консервы) команде KORS Production за фото- и видеосъёмку производства и материалы для сайта и презентаций" loading="lazy"></div>
  </section>
  <!-- ===== ДРУГИЕ КЕЙСЫ ===== -->
  <section class="kcp__sec">
    <div class="kcp__kick">- ЕЩЁ</div>
    <h2 class="kcp__h2">Другие кейсы</h2>
    <div class="kcp__more">
      <a class="kcp__more-card" href="/case-invoicebox"><span>Кейс</span><b>InvoiceBox</b><i>Видеоматериалы для платформы →</i></a>
      <a class="kcp__more-card" href="/case-vistex"><span>Кейс</span><b>Вистекс</b><i>Съёмка видео о предприятии →</i></a>
    </div>
  </section>
  <!-- ===== CTA ===== -->
  <section class="kcp__cta">
    <h2>Хотите так же показать своё производство?</h2>
    <p>Начнём с одного шага - а вырастем в полный цикл, если понравится результат.</p>
    <a class="kcp__cta-btn" href="#popup:zayavka">Обсудить проект →</a>
  </section>
</div>
<style>
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Unbounded:wght@400;600;700;800&display=swap');
.kcp{--bg:#0C0C0E;--raise:#141416;--card:#1B1B1F;--border:#2A2A2E;--soft:#242428;--text:#F5F3EF;--muted:#9A9A9A;--faint:#6a6a6e;--accent:#6D5DFB;--glow:rgba(109,93,251,.14);
  box-sizing:border-box;background:var(--bg);color:var(--text);font-family:'Manrope',Arial,sans-serif;-webkit-font-smoothing:antialiased;}
.kcp *{box-sizing:border-box;margin:0;padding:0;}
.kcp p{line-height:1.65;}
.kcp__eyebrow,.kcp__kick{font-family:'Unbounded';font-size:12px;letter-spacing:.14em;color:var(--accent);}
.kcp__h2{font-family:'Unbounded';font-weight:700;font-size:clamp(26px,3.2vw,42px);letter-spacing:-.02em;line-height:1.12;margin:14px 0 0;}
.kcp__sub{color:var(--muted);font-size:17px;line-height:1.6;max-width:640px;margin-top:14px;}
/* HERO */
.kcp__hero{padding:70px 6vw 0;max-width:1280px;margin:0 auto;}
.kcp__hero-in{max-width:900px;}
.kcp__back{display:inline-block;color:var(--muted);text-decoration:none;font-size:14px;font-weight:600;margin-bottom:34px;transition:.2s;}
.kcp__back:hover{color:var(--accent);}
.kcp__hero .kcp__eyebrow{margin-bottom:18px;}
.kcp__title{font-family:'Unbounded';font-weight:800;font-size:clamp(40px,7vw,88px);letter-spacing:-.03em;line-height:1;margin-bottom:24px;}
.kcp__lead{font-size:clamp(18px,2vw,22px);line-height:1.55;color:#d8d6d1;max-width:760px;}
.kcp__tags{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 18px;}
.kcp__tag{font-family:'Manrope',Arial,sans-serif;font-weight:600;font-size:9px;line-height:1;text-transform:uppercase;letter-spacing:.14em;color:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.22);border-radius:4px;padding:5px 8px;white-space:nowrap;}
@media (max-width:480px){ .kcp__tag{font-size:8px;padding:5px 7px;} .kcp__tags{gap:5px;margin-bottom:14px;} }
.kcp__facts{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:14px;overflow:hidden;margin-top:44px;}
.kcp__fact{background:var(--raise);padding:20px 22px;display:flex;flex-direction:column;gap:7px;}
.kcp__fact span{font-size:12px;color:var(--faint);text-transform:uppercase;letter-spacing:.06em;}
.kcp__fact b{font-family:'Unbounded';font-weight:600;font-size:14px;line-height:1.3;}
.kcp__cover{margin:48px auto 0;max-width:1280px;aspect-ratio:16/8;border-radius:20px;}
/* SECTIONS */
.kcp__sec{max-width:1080px;margin:0 auto;padding:64px 6vw;}
.kcp__grid2{display:grid;grid-template-columns:0.85fr 1.15fr;gap:48px;align-items:start;}
.kcp__prose p{color:#c9c7c2;font-size:17px;margin-bottom:16px;}
.kcp__prose p:last-child{margin-bottom:0;}
.kcp__prose b{color:var(--text);font-weight:600;}
/* CALLOUT */
.kcp__callout{background:linear-gradient(135deg,rgba(109,93,251,.10),rgba(109,93,251,.02));border:1px solid rgba(109,93,251,.3);border-radius:18px;padding:40px 44px;}
.kcp__callout-k{font-family:'Unbounded';font-size:12px;letter-spacing:.14em;color:var(--accent);margin-bottom:14px;}
.kcp__callout-t{font-family:'Unbounded';font-weight:600;font-size:clamp(20px,2.4vw,30px);line-height:1.35;letter-spacing:-.01em;}
/* TIMELINE */
.kcp__timeline{list-style:none;margin-top:44px;display:flex;flex-direction:column;gap:26px;}
.kcp__step{display:grid;grid-template-columns:88px 1fr;gap:26px;background:var(--raise);border:1px solid var(--border);border-radius:18px;padding:30px 32px;transition:.25s;}
.kcp__step:hover{border-color:rgba(109,93,251,.4);}
.kcp__step-num{font-family:'Unbounded';font-weight:700;font-size:34px;color:var(--accent);line-height:1;opacity:.85;}
.kcp__step-body h3{font-family:'Unbounded';font-weight:600;font-size:22px;letter-spacing:-.01em;margin-bottom:12px;}
.kcp__step-body p{color:#c4c2bd;font-size:16px;}
.kcp__step--next{background:transparent;border-style:dashed;}
.kcp__step--next .kcp__step-num{opacity:1;}
/* PLACEHOLDERS */
.kcp__ph{position:relative;background:repeating-linear-gradient(45deg,#141416,#141416 12px,#17171a 12px,#17171a 24px);border:2px dashed #38383e;border-radius:14px;min-height:150px;display:flex;align-items:center;justify-content:center;text-align:center;}
.kcp__ph-label{color:#8a8a90;font-size:13px;font-weight:600;line-height:1.5;padding:16px;}
.kcp__ph-label small{color:var(--faint);font-weight:500;}
.kcp__ph--wide{margin-top:18px;aspect-ratio:16/8;min-height:0;}
.kcp__ph--grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:18px;background:none;border:none;padding:0;}
.kcp__ph--grid .kcp__ph{aspect-ratio:4/3;min-height:0;}
.kcp__cover.kcp__ph{aspect-ratio:16/8;}
/* BEFORE/AFTER */
.kcp__ba{position:relative;margin-top:20px;aspect-ratio:16/9;border-radius:16px;overflow:hidden;border:1px solid var(--border);user-select:none;}
.kcp__ba-after,.kcp__ba-before{position:absolute;inset:0;border-radius:0;border:none;}
.kcp__ba-before{width:100%;clip-path:inset(0 50% 0 0);}
.kcp__ba-handle{position:absolute;top:0;bottom:0;left:50%;width:2px;background:var(--accent);cursor:ew-resize;transform:translateX(-1px);}
.kcp__ba-handle span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:40px;height:40px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(0,0,0,.4);}
.kcp__ba-handle span::before{content:'⟷';color:#000;font-size:18px;font-weight:700;}
.kcp__ba-tag{position:absolute;top:14px;font-family:'Unbounded';font-size:11px;letter-spacing:.1em;background:rgba(0,0,0,.6);padding:5px 11px;border-radius:6px;}
.kcp__ba-tag--l{left:14px;}
.kcp__ba-tag--r{right:14px;}
.kcp__ba-hint{text-align:center;color:var(--faint);font-size:13px;margin-top:12px;}
/* RESULT */
.kcp__result-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:34px;}
.kcp__rcard{background:var(--raise);border:1px solid var(--border);border-radius:16px;padding:26px 28px;}
.kcp__rc-t{font-family:'Unbounded';font-weight:600;font-size:18px;color:var(--accent);margin-bottom:10px;}
.kcp__rcard p{color:#c4c2bd;font-size:15px;}
/* CHIPS */
.kcp__chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;}
.kcp__chips span{font-family:'Manrope';font-weight:600;font-size:14px;color:var(--text);background:rgba(109,93,251,.08);border:1px solid rgba(109,93,251,.4);border-radius:8px;padding:10px 16px;}
/* VIDEO */
.kcp__video{margin-top:24px;aspect-ratio:16/9;border-radius:18px;overflow:hidden;border:1px solid var(--border);background:#000;}
.kcp__video iframe{width:100%;height:100%;border:none;}
/* CTA */
.kcp__vid2{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px;}
.kcp__vid2 .kcp__ph{aspect-ratio:16/9;min-height:0;margin-top:0;}
.kcp__letter{margin-top:26px;max-width:440px;}
.kcp__letter img{display:block;width:100%;height:auto;border-radius:14px;border:1px solid var(--border);}
.kcp__more{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:28px;}
.kcp__more-card{display:block;background:var(--raise);border:1px solid var(--border);border-radius:16px;padding:24px 26px;text-decoration:none;transition:.2s;}
.kcp__more-card:hover{border-color:var(--accent);}
.kcp__more-card span{display:block;font-size:12px;letter-spacing:2px;color:var(--accent);text-transform:uppercase;margin-bottom:10px;}
.kcp__more-card b{display:block;font-family:'Unbounded',sans-serif;font-weight:700;font-size:22px;line-height:1.2;color:var(--text);margin-bottom:8px;}
.kcp__more-card i{font-style:normal;font-size:15px;color:var(--muted);}
@media (max-width:640px){.kcp__vid2{grid-template-columns:1fr;}.kcp__more{grid-template-columns:1fr;}}
.kcp__cta{max-width:900px;margin:20px auto 0;padding:80px 6vw 96px;text-align:center;}
.kcp__cta h2{font-family:'Unbounded';font-weight:700;font-size:clamp(26px,3.4vw,42px);letter-spacing:-.02em;margin-bottom:16px;}
.kcp__cta p{color:var(--muted);font-size:18px;margin-bottom:30px;}
.kcp__cta-btn{display:inline-block;background:var(--accent);color:#fff;text-decoration:none;font-family:'Manrope';font-weight:700;font-size:16px;padding:18px 38px;border-radius:10px;transition:.25s;}
.kcp__cta-btn:hover{transform:translateY(-2px);box-shadow:0 14px 34px var(--glow);}
@media (max-width:820px){
  .kcp__facts{grid-template-columns:1fr 1fr;}
  .kcp__grid2{grid-template-columns:1fr;gap:20px;}
  .kcp__step{grid-template-columns:1fr;gap:14px;padding:24px 22px;}
  .kcp__step-num{font-size:28px;}
  .kcp__result-grid{grid-template-columns:1fr;}
  .kcp__ph--grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:480px){
  .kcp__hero{padding:48px 20px 0;}
  .kcp__sec{padding:48px 20px;}
  .kcp__facts{grid-template-columns:1fr;}
  .kcp__callout{padding:28px 24px;}
}
/* заполненные слоты (картинка/видео из конфига) */
.kcp [data-img].kcp--filled,.kcp [data-video].kcp--filled{background:none;border:none;}
.kcp [data-img] img,.kcp [data-video] img{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit;}
.kcp [data-fit="contain"] img{object-fit:contain;background:#0f0f11;padding:6%;}
.kcp [data-video].kcp--filled iframe{width:100%;height:100%;border:none;display:block;}
.kcp__ph.kcp--filled{padding:0;}
</style>
<script>
(function(){
  var C=window.KORS_CASE||{}; var IMG=C.images||{}, VID=C.videos||{};
  document.querySelectorAll('.kcp [data-video]').forEach(function(el){
    var id=VID[el.getAttribute('data-video')];
    if(id){ el.classList.add('kcp--filled'); el.innerHTML='<iframe src="https://kinescope.io/embed/'+id+'" allow="autoplay; fullscreen; encrypted-media; picture-in-picture" allowfullscreen frameborder="0"></iframe>'; el.removeAttribute('data-img'); }
  });
  document.querySelectorAll('.kcp [data-img]').forEach(function(el){
    var url=IMG[el.getAttribute('data-img')];
    if(url){ el.classList.add('kcp--filled'); el.innerHTML='<img src="'+url+'" alt="">'; }
  });
})();
(function(){
  // Слайдер до/после
  var ba=document.getElementById('kcpBA'); if(!ba) return;
  var before=document.getElementById('kcpBABefore');
  var handle=document.getElementById('kcpBAHandle');
  var dragging=false;
  function setPos(clientX){
    var r=ba.getBoundingClientRect();
    var x=Math.max(0,Math.min(clientX-r.left,r.width));
    var pct=(x/r.width)*100;
    before.style.clipPath='inset(0 '+(100-pct)+'% 0 0)';
    handle.style.left=pct+'%';
  }
  handle.addEventListener('mousedown',function(){dragging=true;});
  window.addEventListener('mouseup',function(){dragging=false;});
  window.addEventListener('mousemove',function(e){ if(dragging) setPos(e.clientX); });
  handle.addEventListener('touchstart',function(){dragging=true;},{passive:true});
  window.addEventListener('touchend',function(){dragging=false;});
  window.addEventListener('touchmove',function(e){ if(dragging&&e.touches[0]) setPos(e.touches[0].clientX); },{passive:true});
  ba.addEventListener('click',function(e){ setPos(e.clientX); });
})();
</script>

rec2699474201 · КЕЙС ОДОЕВСКИЕ (25485 симв.)

<!-- ================================================================
     KORS · СТРАНИЦА-КЕЙС · ОДОЕВСКИЕ КОНСЕРВЫ
     ── ЗАПОЛНЕНИЕ ──────────────────────────────────────────────────
     Всё фото/видео вставляется В ОДНОМ МЕСТЕ - в списке ниже (KORS_CASE).
     • Картинки: вставь ссылку на изображение в кавычки. Пусто '' = заглушка.
       Где взять ссылку: загрузи фото в Tilda (Файл-менеджер сайта или любой
       блок «Изображение») и скопируй URL картинки; либо любой прямой URL.
     • Видео: впиши ID ролика Kinescope (часть после kinescope.io/… ). Пусто = заглушка.
     Больше нигде в коде править не нужно - слоты подтянутся сами.
     ================================================================ -->
<script>
window.KORS_CASE = {
  images: {
    cover:        'https://static.tildacdn.com/tild6563-3237-4237-b738-393161643533/odoevskie-cover-zavo.jpg',   // большая обложка вверху (гориз. фото/визуал)
    firstShoot:   '',   // шаг 01 - кадр первой съёмки начинки (если без видео)
    firstShoot2:  '',   // шаг 01 - кадр второй съёмки начинки (если без видео)
    presentation: 'https://static.tildacdn.com/tild3266-6134-4634-a231-623537393735/odoevskie-presentati.jpg',   // шаг 02 - развороты печатной презентации
    factoryPhoto: '',   // шаг 03 - фото производства (если без видео)
    product1:     'https://static.tildacdn.com/tild3538-6336-4331-b630-393965653763/odoevskie-nachinki-1.jpg',   // шаг 04 - фото продукции 1
    product2:     'https://static.tildacdn.com/tild6462-3535-4432-b266-653436663333/odoevskie-kruasan-12.jpg',   // шаг 04 - фото продукции 2
    product3:     'https://static.tildacdn.com/tild6462-3131-4336-a237-366662616565/odoevskie-laboratori.jpg',   // шаг 04 - фото цеха/процесса
    logoBefore:   'https://static.tildacdn.com/tild6462-3439-4365-a261-333634373338/odoevskie-logo-do-12.jpg',   // шаг 05 - СТАРЫЙ логотип (до)
    logoAfter:    'https://static.tildacdn.com/tild6338-3131-4439-b966-623739303361/odoevskie-logo-posle.jpg',   // шаг 05 - НОВЫЙ логотип (после)
    brand1:       '',   // шаг 06 - визитки
    brand2:       '',   // шаг 06 - открытки
    brand3:       'https://static.tildacdn.com/tild6632-3465-4634-b861-393137323563/odoevskie-priglasite.jpg',   // шаг 06 - др. носители
    siteShots:    ''    // шаг 07 - скриншоты povidlo.su и povidlo.pro
  },
  videos: {
    firstShoot:   'sRyZwPm3BS9CVspVi2sLx3',   // шаг 01 - ролик «Термостабильные начинки»
    firstShoot2:  'mZiwnH9uZAdc15hhRsqPvB',    // шаг 01 - ролик «Нетермостабильные начинки»
    factory:      '3ZsxHkdEuHUubxSAQZDRyG',    // шаг 03 - фильм о заводе, полная версия
    main:         'j8Pq4wWMNTPm6Js8UQiM1n'     // блок «Видео проекта»
  }
};
</script>
<div class="kcp">
  <!-- ===== HERO ===== -->
  <header class="kcp__hero">
    <div class="kcp__hero-in">
      <a class="kcp__back" href="/#rec2667018101">← Все проекты</a>
      <div class="kcp__eyebrow">КЕЙС · ПИЩЕВОЕ ПРОИЗВОДСТВО</div>
      <h1 class="kcp__title">Одоевские консервы</h1>
      <div class="kcp__tags"><span class="kcp__tag">Видео</span><span class="kcp__tag">Фотосъёмка</span><span class="kcp__tag">Презентация</span><span class="kcp__tag">Фирменный стиль</span><span class="kcp__tag">Сайт</span></div>
      <p class="kcp__lead">Как из одной видеосъёмки вырос полный комплект материалов - от роликов и фотосъёмки до нового логотипа, фирменного стиля и двух сайтов: русского и экспортного, под рынок ОАЭ.</p>
      <div class="kcp__facts">
        <div class="kcp__fact"><span>Сфера</span><b>Пищевое производство · B2B</b></div>
        <div class="kcp__fact"><span>С чего начали</span><b>Видеосъёмка продукта</b></div>
        <div class="kcp__fact"><span>Где сейчас</span><b>povidlo.su + povidlo.pro</b></div>
        <div class="kcp__fact"><span>Формат</span><b>полный комплект материалов</b></div>
      </div>
    </div>
    <!-- ВСТАВИТЬ: большое обложечное фото/видео (завод, продукция или кадр со съёмки). Пока заглушка. -->
    <div class="kcp__cover kcp__ph" data-img="cover"><div class="kcp__ph-label">📷 Обложка: фото продукции / кадр со съёмки (16:9)</div></div>
  </header>
  <!-- ===== КТО КЛИЕНТ ===== -->
  <section class="kcp__sec">
    <div class="kcp__grid2">
      <div>
        <div class="kcp__kick">- О КОМПАНИИ</div>
        <h2 class="kcp__h2">Сильное производство, которое было не видно</h2>
      </div>
      <div class="kcp__prose">
        <p>«Одоевские консервы» - производитель из посёлка Одоев в Тульской области. Уже более двадцати лет компания выпускает термостабильные фруктово-ягодные начинки, повидло, джемы, конфитюры, пюре и наполнители для хлебопекарной, кондитерской и молочной промышленности.</p>
        <p>Это классический B2B: их продукт - ингредиент, который живёт <b>внутри</b> чужих изделий. Начинка в круассане, повидло в печенье, наполнитель в йогурте. Продукт качественный, производство серьёзное - но со стороны этого масштаба не было видно.</p>
        <p>Видео, сайт, презентация и фирменные материалы существовали разрозненно и не складывались в единую картину. Компанию нельзя было «показать» - только долго объяснять на словах.</p>
      </div>
    </div>
  </section>
  <!-- ===== ЗАДАЧА (акцентная плашка) ===== -->
  <section class="kcp__sec">
    <div class="kcp__callout">
      <div class="kcp__callout-k">ЗАДАЧА</div>
      <div class="kcp__callout-t">Показать масштаб и качество производства так, чтобы партнёр видел уровень компании за несколько минут - а не верил на слово.</div>
    </div>
  </section>
  <!-- ===== ТАЙМЛАЙН РАБОТЫ ===== -->
  <section class="kcp__sec">
    <div class="kcp__kick">- КАК ШЛА РАБОТА</div>
    <h2 class="kcp__h2">Из одной съёмки - в полный цикл</h2>
    <p class="kcp__sub">Сотрудничество началось с одного ролика и постепенно выросло в полный комплект материалов. Вот путь шаг за шагом.</p>
    <ol class="kcp__timeline">
      <li class="kcp__step">
        <div class="kcp__step-num">01</div>
        <div class="kcp__step-body">
          <h3>Первые видео на начинке</h3>
          <p>Начали с двух роликов о продукте. Сняли начинку «в деле» - текстуру, цвет, как она работает в готовом изделии. Это первое, что показывает потенциальному партнёру, что перед ним - качественный ингредиент.</p>
          <!-- Два ролика первой съёмки. ID берутся из KORS_CASE.videos (firstShoot / firstShoot2). -->
          <div class="kcp__vid2">
            <div class="kcp__ph" data-video="firstShoot" data-img="firstShoot"><div class="kcp__ph-label">🎬 Термостабильные начинки</div></div>
            <div class="kcp__ph" data-video="firstShoot2" data-img="firstShoot2"><div class="kcp__ph-label">🎬 Нетермостабильные начинки</div></div>
          </div>
        </div>
      </li>
      <li class="kcp__step">
        <div class="kcp__step-num">02</div>
        <div class="kcp__step-body">
          <h3>Печатная презентация</h3>
          <p>Собрали продукт и производство в понятную структуру - презентацию для переговоров и выставок. Разложили ассортимент, преимущества и мощности так, чтобы менеджеру было легко показать компанию клиенту.</p>
          <div class="kcp__ph kcp__ph--wide" data-img="presentation"><div class="kcp__ph-label">📑 Развороты печатной презентации</div></div>
        </div>
      </li>
      <li class="kcp__step">
        <div class="kcp__step-num">03</div>
        <div class="kcp__step-body">
          <h3>Видео о заводе</h3>
          <p>Сняли само производство: масштаб цехов, оборудование, процессы. Именно это видео закрывает главный вопрос B2B-клиента - «а справятся ли по объёму и качеству». Масштаб теперь виден, а не описан словами.</p>
          <div class="kcp__ph kcp__ph--wide" data-video="factory" data-img="factoryPhoto"><div class="kcp__ph-label">🎬 Видео о заводе / кадры производства</div></div>
        </div>
      </li>
      <li class="kcp__step">
        <div class="kcp__step-num">04</div>
        <div class="kcp__step-body">
          <h3>Фотосъёмка для презентации и каталога</h3>
          <p>Сделали предметную и производственную фотосъёмку - продукция, упаковка, цеха. Единый визуальный ряд, который лёг в презентацию, каталог и дальнейшие материалы.</p>
          <div class="kcp__ph kcp__ph--grid">
            <div class="kcp__ph" data-img="product1"><div class="kcp__ph-label">📷 фото продукции 1</div></div>
            <div class="kcp__ph" data-img="product2"><div class="kcp__ph-label">📷 фото продукции 2</div></div>
            <div class="kcp__ph" data-img="product3"><div class="kcp__ph-label">📷 фото цеха / процесса</div></div>
          </div>
        </div>
      </li>
      <li class="kcp__step">
        <div class="kcp__step-num">05</div>
        <div class="kcp__step-body">
          <h3>Новый логотип: до / после</h3>
          <p>Обновили логотип - сохранили узнаваемость, но привели к современному виду, который одинаково хорошо работает на упаковке, в презентации и на сайте. Сравните сами:</p>
          <!-- ДО/ПОСЛЕ слайдер. ВСТАВИТЬ 2 картинки логотипа: старый и новый -->
          <div class="kcp__ba" id="kcpBA">
            <div class="kcp__ba-after kcp__ph" data-img="logoAfter" data-fit="contain"><div class="kcp__ph-label">✅ НОВЫЙ логотип (после)</div></div>
            <div class="kcp__ba-before kcp__ph" id="kcpBABefore" data-img="logoBefore" data-fit="contain"><div class="kcp__ph-label">◻️ СТАРЫЙ логотип (до)</div></div>
            <div class="kcp__ba-handle" id="kcpBAHandle"><span></span></div>
            <div class="kcp__ba-tag kcp__ba-tag--l">ДО</div>
            <div class="kcp__ba-tag kcp__ba-tag--r">ПОСЛЕ</div>
          </div>
          <div class="kcp__ba-hint">Потяните ползунок влево-вправо, чтобы сравнить</div>
        </div>
      </li>
      <li class="kcp__step">
        <div class="kcp__step-num">06</div>
        <div class="kcp__step-body">
          <h3>Фирменный стиль: открытки, визитки, носители</h3>
          <p>Оформили фирменные носители - визитки, открытки и другие материалы в единой стилистике. Компания получила узнаваемый облик, который работает на каждой точке контакта.</p>
          <div class="kcp__ph kcp__ph--grid">
            <div class="kcp__ph" data-img="brand1"><div class="kcp__ph-label">📷 визитки</div></div>
            <div class="kcp__ph" data-img="brand2"><div class="kcp__ph-label">📷 открытки</div></div>
            <div class="kcp__ph" data-img="brand3" data-fit="contain"><div class="kcp__ph-label">📷 др. носители</div></div>
          </div>
        </div>
      </li>
      <li class="kcp__step">
        <div class="kcp__step-num">07</div>
        <div class="kcp__step-body">
          <h3>Два сайта: povidlo.su и povidlo.pro</h3>
          <p>Сделали не языковой переключатель, а два отдельных сайта. Русский - povidlo.su, под брендом «Одоевские консервы». Английский - povidlo.pro, под экспортным брендом POVIDLO: он собран под рынок ОАЭ и региона MENA, с отдельной структурой и своими акцентами.</p>
          <div class="kcp__ph kcp__ph--wide" data-img="siteShots"><div class="kcp__ph-label">💻 Скриншоты povidlo.su и povidlo.pro</div></div>
        </div>
      </li>
      <li class="kcp__step kcp__step--next">
        <div class="kcp__step-num">→</div>
        <div class="kcp__step-body">
          <h3>Что дальше</h3>
          <p>Следующий этап - застройка выставочного стенда (планируется на зиму). Сотрудничество продолжается: от продукта на экране - к тому, как компания выглядит вживую на выставке.</p>
        </div>
      </li>
    </ol>
  </section>
  <!-- ===== РЕЗУЛЬТАТ ===== -->
  <section class="kcp__sec">
    <div class="kcp__result">
      <div class="kcp__kick">- ЧТО ИЗМЕНИЛОСЬ</div>
      <h2 class="kcp__h2">Компанию теперь можно показать, а не пересказывать</h2>
      <div class="kcp__result-grid">
        <div class="kcp__rcard"><div class="kcp__rc-t">Единый комплект</div><p>Видео, фото, презентация, логотип, фирменный стиль и сайт - собраны в одну систему и работают вместе.</p></div>
        <div class="kcp__rcard"><div class="kcp__rc-t">Масштаб за минуты</div><p>Производство и уровень компании видно сразу - на переговорах, выставках и в презентации, без долгих объяснений.</p></div>
        <div class="kcp__rcard"><div class="kcp__rc-t">Выход за рубеж</div><p>Экспорт и представительства в Грузии и ОАЭ. Англоязычный povidlo.pro - то, чем компания представляет себя в регионе MENA.</p></div>
        <div class="kcp__rcard"><div class="kcp__rc-t">Долгое партнёрство</div><p>Сотрудничество выросло из одной видеосъёмки в постоянную работу над материалами компании.</p></div>
      </div>
    </div>
  </section>
  <!-- ===== ЧТО ВОШЛО (услуги) ===== -->
  <section class="kcp__sec">
    <div class="kcp__kick">- ЧТО ВОШЛО В КОМПЛЕКТ</div>
    <div class="kcp__chips">
      <span>Видеопродакшн</span><span>Съёмка производства</span><span>Фотосъёмка</span><span>Печатная презентация</span><span>Редизайн логотипа</span><span>Фирменный стиль</span><span>Визитки и открытки</span><span>Сайт RU</span><span>Сайт EN (MENA)</span>
    </div>
  </section>
  <!-- ===== ВИДЕО КЕЙСА ===== -->
  <section class="kcp__sec">
    <div class="kcp__kick">- СМОТРЕТЬ</div>
    <h2 class="kcp__h2">Видео проекта</h2>
    <!-- ID ролика берётся из KORS_CASE.videos.main -->
    <div class="kcp__video" data-video="main"><div class="kcp__ph-label">🎬 Основной ролик проекта</div></div>
  </section>
  <!-- ===== ОТЗЫВ КЛИЕНТА ===== -->
  <section class="kcp__sec">
    <div class="kcp__kick">- ОТЗЫВ</div>
    <h2 class="kcp__h2">Благодарственное письмо</h2>
    <p class="kcp__sub">ООО «МастерДжем» - юридическое лицо «Одоевских консервов»</p>
    <div class="kcp__letter"><img src="https://static.tildacdn.com/tild3231-6563-4932-b139-373433306561/pismo-odoevskie-1200.jpg" alt="Благодарственное письмо от ООО «МастерДжем» (Одоевские консервы) команде KORS Production за фото- и видеосъёмку производства и материалы для сайта и презентаций" loading="lazy"></div>
  </section>
  <!-- ===== ДРУГИЕ КЕЙСЫ ===== -->
  <section class="kcp__sec">
    <div class="kcp__kick">- ЕЩЁ</div>
    <h2 class="kcp__h2">Другие кейсы</h2>
    <div class="kcp__more">
      <a class="kcp__more-card" href="/case-invoicebox"><span>Кейс</span><b>InvoiceBox</b><i>Видеоматериалы для платформы →</i></a>
      <a class="kcp__more-card" href="/case-vistex"><span>Кейс</span><b>Вистекс</b><i>Съёмка видео о предприятии →</i></a>
    </div>
  </section>
  <!-- ===== CTA ===== -->
  <section class="kcp__cta">
    <h2>Хотите так же показать своё производство?</h2>
    <p>Начнём с одного шага - а вырастем в полный цикл, если понравится результат.</p>
    <a class="kcp__cta-btn" href="#popup:zayavka">Обсудить проект →</a>
  </section>
</div>
<style>
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Unbounded:wght@400;600;700;800&display=swap');
.kcp{--bg:#0C0C0E;--raise:#141416;--card:#1B1B1F;--border:#2A2A2E;--soft:#242428;--text:#F5F3EF;--muted:#9A9A9A;--faint:#6a6a6e;--accent:#6D5DFB;--glow:rgba(109,93,251,.14);
  box-sizing:border-box;background:var(--bg);color:var(--text);font-family:'Manrope',Arial,sans-serif;-webkit-font-smoothing:antialiased;}
.kcp *{box-sizing:border-box;margin:0;padding:0;}
.kcp p{line-height:1.65;}
.kcp__eyebrow,.kcp__kick{font-family:'Unbounded';font-size:12px;letter-spacing:.14em;color:var(--accent);}
.kcp__h2{font-family:'Unbounded';font-weight:700;font-size:clamp(26px,3.2vw,42px);letter-spacing:-.02em;line-height:1.12;margin:14px 0 0;}
.kcp__sub{color:var(--muted);font-size:17px;line-height:1.6;max-width:640px;margin-top:14px;}
/* HERO */
.kcp__hero{padding:70px 6vw 0;max-width:1280px;margin:0 auto;}
.kcp__hero-in{max-width:900px;}
.kcp__back{display:inline-block;color:var(--muted);text-decoration:none;font-size:14px;font-weight:600;margin-bottom:34px;transition:.2s;}
.kcp__back:hover{color:var(--accent);}
.kcp__hero .kcp__eyebrow{margin-bottom:18px;}
.kcp__title{font-family:'Unbounded';font-weight:800;font-size:clamp(40px,7vw,88px);letter-spacing:-.03em;line-height:1;margin-bottom:24px;}
.kcp__lead{font-size:clamp(18px,2vw,22px);line-height:1.55;color:#d8d6d1;max-width:760px;}
.kcp__tags{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 18px;}
.kcp__tag{font-family:'Manrope',Arial,sans-serif;font-weight:600;font-size:9px;line-height:1;text-transform:uppercase;letter-spacing:.14em;color:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.22);border-radius:4px;padding:5px 8px;white-space:nowrap;}
@media (max-width:480px){ .kcp__tag{font-size:8px;padding:5px 7px;} .kcp__tags{gap:5px;margin-bottom:14px;} }
.kcp__facts{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:14px;overflow:hidden;margin-top:44px;}
.kcp__fact{background:var(--raise);padding:20px 22px;display:flex;flex-direction:column;gap:7px;}
.kcp__fact span{font-size:12px;color:var(--faint);text-transform:uppercase;letter-spacing:.06em;}
.kcp__fact b{font-family:'Unbounded';font-weight:600;font-size:14px;line-height:1.3;}
.kcp__cover{margin:48px auto 0;max-width:1280px;aspect-ratio:16/8;border-radius:20px;}
/* SECTIONS */
.kcp__sec{max-width:1080px;margin:0 auto;padding:64px 6vw;}
.kcp__grid2{display:grid;grid-template-columns:0.85fr 1.15fr;gap:48px;align-items:start;}
.kcp__prose p{color:#c9c7c2;font-size:17px;margin-bottom:16px;}
.kcp__prose p:last-child{margin-bottom:0;}
.kcp__prose b{color:var(--text);font-weight:600;}
/* CALLOUT */
.kcp__callout{background:linear-gradient(135deg,rgba(109,93,251,.10),rgba(109,93,251,.02));border:1px solid rgba(109,93,251,.3);border-radius:18px;padding:40px 44px;}
.kcp__callout-k{font-family:'Unbounded';font-size:12px;letter-spacing:.14em;color:var(--accent);margin-bottom:14px;}
.kcp__callout-t{font-family:'Unbounded';font-weight:600;font-size:clamp(20px,2.4vw,30px);line-height:1.35;letter-spacing:-.01em;}
/* TIMELINE */
.kcp__timeline{list-style:none;margin-top:44px;display:flex;flex-direction:column;gap:26px;}
.kcp__step{display:grid;grid-template-columns:88px 1fr;gap:26px;background:var(--raise);border:1px solid var(--border);border-radius:18px;padding:30px 32px;transition:.25s;}
.kcp__step:hover{border-color:rgba(109,93,251,.4);}
.kcp__step-num{font-family:'Unbounded';font-weight:700;font-size:34px;color:var(--accent);line-height:1;opacity:.85;}
.kcp__step-body h3{font-family:'Unbounded';font-weight:600;font-size:22px;letter-spacing:-.01em;margin-bottom:12px;}
.kcp__step-body p{color:#c4c2bd;font-size:16px;}
.kcp__step--next{background:transparent;border-style:dashed;}
.kcp__step--next .kcp__step-num{opacity:1;}
/* PLACEHOLDERS */
.kcp__ph{position:relative;background:repeating-linear-gradient(45deg,#141416,#141416 12px,#17171a 12px,#17171a 24px);border:2px dashed #38383e;border-radius:14px;min-height:150px;display:flex;align-items:center;justify-content:center;text-align:center;}
.kcp__ph-label{color:#8a8a90;font-size:13px;font-weight:600;line-height:1.5;padding:16px;}
.kcp__ph-label small{color:var(--faint);font-weight:500;}
.kcp__ph--wide{margin-top:18px;aspect-ratio:16/8;min-height:0;}
.kcp__ph--grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:18px;background:none;border:none;padding:0;}
.kcp__ph--grid .kcp__ph{aspect-ratio:4/3;min-height:0;}
.kcp__cover.kcp__ph{aspect-ratio:16/8;}
/* BEFORE/AFTER */
.kcp__ba{position:relative;margin-top:20px;aspect-ratio:16/9;border-radius:16px;overflow:hidden;border:1px solid var(--border);user-select:none;}
.kcp__ba-after,.kcp__ba-before{position:absolute;inset:0;border-radius:0;border:none;}
.kcp__ba-before{width:100%;clip-path:inset(0 50% 0 0);}
.kcp__ba-handle{position:absolute;top:0;bottom:0;left:50%;width:2px;background:var(--accent);cursor:ew-resize;transform:translateX(-1px);}
.kcp__ba-handle span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:40px;height:40px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(0,0,0,.4);}
.kcp__ba-handle span::before{content:'⟷';color:#000;font-size:18px;font-weight:700;}
.kcp__ba-tag{position:absolute;top:14px;font-family:'Unbounded';font-size:11px;letter-spacing:.1em;background:rgba(0,0,0,.6);padding:5px 11px;border-radius:6px;}
.kcp__ba-tag--l{left:14px;}
.kcp__ba-tag--r{right:14px;}
.kcp__ba-hint{text-align:center;color:var(--faint);font-size:13px;margin-top:12px;}
/* RESULT */
.kcp__result-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:34px;}
.kcp__rcard{background:var(--raise);border:1px solid var(--border);border-radius:16px;padding:26px 28px;}
.kcp__rc-t{font-family:'Unbounded';font-weight:600;font-size:18px;color:var(--accent);margin-bottom:10px;}
.kcp__rcard p{color:#c4c2bd;font-size:15px;}
/* CHIPS */
.kcp__chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;}
.kcp__chips span{font-family:'Manrope';font-weight:600;font-size:14px;color:var(--text);background:rgba(109,93,251,.08);border:1px solid rgba(109,93,251,.4);border-radius:8px;padding:10px 16px;}
/* VIDEO */
.kcp__video{margin-top:24px;aspect-ratio:16/9;border-radius:18px;overflow:hidden;border:1px solid var(--border);background:#000;}
.kcp__video iframe{width:100%;height:100%;border:none;}
/* CTA */
.kcp__vid2{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px;}
.kcp__vid2 .kcp__ph{aspect-ratio:16/9;min-height:0;margin-top:0;}
.kcp__letter{margin-top:26px;max-width:440px;}
.kcp__letter img{display:block;width:100%;height:auto;border-radius:14px;border:1px solid var(--border);}
.kcp__more{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:28px;}
.kcp__more-card{display:block;background:var(--raise);border:1px solid var(--border);border-radius:16px;padding:24px 26px;text-decoration:none;transition:.2s;}
.kcp__more-card:hover{border-color:var(--accent);}
.kcp__more-card span{display:block;font-size:12px;letter-spacing:2px;color:var(--accent);text-transform:uppercase;margin-bottom:10px;}
.kcp__more-card b{display:block;font-family:'Unbounded',sans-serif;font-weight:700;font-size:22px;line-height:1.2;color:var(--text);margin-bottom:8px;}
.kcp__more-card i{font-style:normal;font-size:15px;color:var(--muted);}
@media (max-width:640px){.kcp__vid2{grid-template-columns:1fr;}.kcp__more{grid-template-columns:1fr;}}
.kcp__cta{max-width:900px;margin:20px auto 0;padding:80px 6vw 96px;text-align:center;}
.kcp__cta h2{font-family:'Unbounded';font-weight:700;font-size:clamp(26px,3.4vw,42px);letter-spacing:-.02em;margin-bottom:16px;}
.kcp__cta p{color:var(--muted);font-size:18px;margin-bottom:30px;}
.kcp__cta-btn{display:inline-block;background:var(--accent);color:#fff;text-decoration:none;font-family:'Manrope';font-weight:700;font-size:16px;padding:18px 38px;border-radius:10px;transition:.25s;}
.kcp__cta-btn:hover{transform:translateY(-2px);box-shadow:0 14px 34px var(--glow);}
@media (max-width:820px){
  .kcp__facts{grid-template-columns:1fr 1fr;}
  .kcp__grid2{grid-template-columns:1fr;gap:20px;}
  .kcp__step{grid-template-columns:1fr;gap:14px;padding:24px 22px;}
  .kcp__step-num{font-size:28px;}
  .kcp__result-grid{grid-template-columns:1fr;}
  .kcp__ph--grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:480px){
  .kcp__hero{padding:48px 20px 0;}
  .kcp__sec{padding:48px 20px;}
  .kcp__facts{grid-template-columns:1fr;}
  .kcp__callout{padding:28px 24px;}
}
/* заполненные слоты (картинка/видео из конфига) */
.kcp [data-img].kcp--filled,.kcp [data-video].kcp--filled{background:none;border:none;}
.kcp [data-img] img,.kcp [data-video] img{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit;}
.kcp [data-fit="contain"] img{object-fit:contain;background:#0f0f11;padding:6%;}
.kcp [data-video].kcp--filled iframe{width:100%;height:100%;border:none;display:block;}
.kcp__ph.kcp--filled{padding:0;}
</style>
<script>
(function(){
  var C=window.KORS_CASE||{}; var IMG=C.images||{}, VID=C.videos||{};
  document.querySelectorAll('.kcp [data-video]').forEach(function(el){
    var id=VID[el.getAttribute('data-video')];
    if(id){ el.classList.add('kcp--filled'); el.innerHTML='<iframe src="https://kinescope.io/embed/'+id+'" allow="autoplay; fullscreen; encrypted-media; picture-in-picture" allowfullscreen frameborder="0"></iframe>'; el.removeAttribute('data-img'); }
  });
  document.querySelectorAll('.kcp [data-img]').forEach(function(el){
    var url=IMG[el.getAttribute('data-img')];
    if(url){ el.classList.add('kcp--filled'); el.innerHTML='<img src="'+url+'" alt="">'; }
  });
})();
(function(){
  // Слайдер до/после
  var ba=document.getElementById('kcpBA'); if(!ba) return;
  var before=document.getElementById('kcpBABefore');
  var handle=document.getElementById('kcpBAHandle');
  var dragging=false;
  function setPos(clientX){
    var r=ba.getBoundingClientRect();
    var x=Math.max(0,Math.min(clientX-r.left,r.width));
    var pct=(x/r.width)*100;
    before.style.clipPath='inset(0 '+(100-pct)+'% 0 0)';
    handle.style.left=pct+'%';
  }
  handle.addEventListener('mousedown',function(){dragging=true;});
  window.addEventListener('mouseup',function(){dragging=false;});
  window.addEventListener('mousemove',function(e){ if(dragging) setPos(e.clientX); });
  handle.addEventListener('touchstart',function(){dragging=true;},{passive:true});
  window.addEventListener('touchend',function(){dragging=false;});
  window.addEventListener('touchmove',function(e){ if(dragging&&e.touches[0]) setPos(e.touches[0].clientX); },{passive:true});
  ba.addEventListener('click',function(e){ setPos(e.clientX); });
})();
</script>

rec2699474201 · КЕЙС ОДОЕВСКИЕ (34536 симв.)

<!-- ================================================================
     KORS · СТРАНИЦА-КЕЙС · ОДОЕВСКИЕ КОНСЕРВЫ
     ── ЗАПОЛНЕНИЕ ──────────────────────────────────────────────────
     Всё фото/видео вставляется В ОДНОМ МЕСТЕ - в списке ниже (KORS_CASE).
     • Картинки: вставь ссылку на изображение в кавычки. Пусто '' = заглушка.
       Где взять ссылку: загрузи фото в Tilda (Файл-менеджер сайта или любой
       блок «Изображение») и скопируй URL картинки; либо любой прямой URL.
     • Видео: впиши ID ролика Kinescope (часть после kinescope.io/… ). Пусто = заглушка.
     Больше нигде в коде править не нужно - слоты подтянутся сами.
     ================================================================ -->
<script>
window.KORS_CASE = {
  images: {
    cover:        'https://static.tildacdn.com/tild6563-3237-4237-b738-393161643533/odoevskie-cover-zavo.jpg',   // большая обложка вверху (гориз. фото/визуал)
    firstShoot:   '',   // шаг 01 - кадр первой съёмки начинки (если без видео)
    firstShoot2:  '',   // шаг 01 - кадр второй съёмки начинки (если без видео)
presentation: '',   // шаг 02 - одиночная картинка-запасной вариант (используется, только если slides пуст)
    factoryPhoto: '',   // шаг 03 - фото производства (если без видео)
    product1:     'https://static.tildacdn.com/tild3538-6336-4331-b630-393965653763/odoevskie-nachinki-1.jpg',   // шаг 04 - фото продукции 1
    product2:     'https://static.tildacdn.com/tild6462-3535-4432-b266-653436663333/odoevskie-kruasan-12.jpg',   // шаг 04 - фото продукции 2
    product3:     'https://static.tildacdn.com/tild6462-3131-4336-a237-366662616565/odoevskie-laboratori.jpg',   // шаг 04 - фото цеха/процесса
    logoBefore:   'https://static.tildacdn.com/tild6462-3439-4365-a261-333634373338/odoevskie-logo-do-12.jpg',   // шаг 05 - СТАРЫЙ логотип (до)
    logoAfter:    'https://static.tildacdn.com/tild6338-3131-4439-b966-623739303361/odoevskie-logo-posle.jpg',   // шаг 05 - НОВЫЙ логотип (после)
    brand1:       '',   // шаг 06 - визитки
    brand2:       'https://static.tildacdn.com/tild6162-3336-4666-a338-323336396465/odoev-otkrytka-vesna.jpg',   // шаг 06 - открытки
    brand3:       'https://static.tildacdn.com/tild6632-3465-4634-b861-393137323563/odoevskie-priglasite.jpg',   // шаг 06 - др. носители
    siteShots:    ''    // шаг 07 - скриншоты povidlo.su и povidlo.pro
  },
  // Развороты печатной презентации для шага 02. Порядок = порядок в галерее.
  // Пусто - в слоте останется заглушка. Добавлять/убирать можно прямо здесь.
  slides: [
    'https://static.tildacdn.com/tild3839-6265-4534-b632-383934363939/odoev-pres-01.jpg',
    'https://static.tildacdn.com/tild6365-3736-4633-b638-623535336533/odoev-pres-02.jpg',
    'https://static.tildacdn.com/tild3861-3537-4062-b638-623737303666/odoev-pres-03.jpg',
    'https://static.tildacdn.com/tild3739-3733-4737-a439-373962306636/odoev-pres-04.jpg',
    'https://static.tildacdn.com/tild6131-3763-4633-a632-383430346635/odoev-pres-05.jpg',
    'https://static.tildacdn.com/tild6238-3563-4662-b936-343165656562/odoev-pres-06.jpg',
    'https://static.tildacdn.com/tild6330-3263-4431-b136-306366623031/odoev-pres-07.jpg',
    'https://static.tildacdn.com/tild3263-6531-4663-b630-316431303234/odoev-pres-08.jpg',
    'https://static.tildacdn.com/tild3032-6661-4835-b932-613834373837/odoev-pres-09.jpg',
    'https://static.tildacdn.com/tild6439-3366-4065-b763-343465383338/odoev-pres-10.jpg',
    'https://static.tildacdn.com/tild3431-3232-4331-a661-653335363963/odoev-pres-11.jpg',
    'https://static.tildacdn.com/tild3239-6231-4336-a531-363563343563/odoev-pres-12.jpg',
    'https://static.tildacdn.com/tild3231-6331-4262-b262-363063643633/odoev-pres-13.jpg',
    'https://static.tildacdn.com/tild6537-3532-4534-a166-623232326538/odoev-pres-14.jpg',
    'https://static.tildacdn.com/tild3763-3332-4665-b631-353963643534/odoev-pres-15.jpg',
    'https://static.tildacdn.com/tild3439-6161-4537-a531-633864306164/odoev-pres-16.jpg'
  ],
  videos: {
    firstShoot:   'sRyZwPm3BS9CVspVi2sLx3',   // шаг 01 - ролик «Термостабильные начинки»
    firstShoot2:  'mZiwnH9uZAdc15hhRsqPvB',    // шаг 01 - ролик «Нетермостабильные начинки»
    factory:      '3ZsxHkdEuHUubxSAQZDRyG',    // шаг 03 - фильм о заводе, полная версия
    main:         'j8Pq4wWMNTPm6Js8UQiM1n'     // блок «Видео проекта»
  }
};
</script>
<div class="kcp">
  <!-- ===== HERO ===== -->
  <header class="kcp__hero">
    <div class="kcp__hero-in">
      <a class="kcp__back" href="/#rec2667018101">← Все проекты</a>
      <div class="kcp__eyebrow">КЕЙС · ПИЩЕВОЕ ПРОИЗВОДСТВО</div>
      <h1 class="kcp__title">Одоевские консервы</h1>
      <div class="kcp__tags"><span class="kcp__tag">Видео</span><span class="kcp__tag">Фотосъёмка</span><span class="kcp__tag">Презентация</span><span class="kcp__tag">Фирменный стиль</span><span class="kcp__tag">Сайт</span></div>
      <p class="kcp__lead">Как из одной видеосъёмки вырос полный комплект материалов - от роликов и фотосъёмки до нового логотипа, фирменного стиля и двух сайтов: русского и экспортного, под рынок ОАЭ.</p>
      <div class="kcp__facts">
        <div class="kcp__fact"><span>Сфера</span><b>Пищевое производство · B2B</b></div>
        <div class="kcp__fact"><span>С чего начали</span><b>Видеосъёмка продукта</b></div>
        <div class="kcp__fact"><span>Где сейчас</span><b>povidlo.su + povidlo.pro</b></div>
        <div class="kcp__fact"><span>Формат</span><b>полный комплект материалов</b></div>
      </div>
    </div>
    <!-- ВСТАВИТЬ: большое обложечное фото/видео (завод, продукция или кадр со съёмки). Пока заглушка. -->
    <div class="kcp__cover kcp__ph" data-img="cover"><div class="kcp__ph-label">📷 Обложка: фото продукции / кадр со съёмки (16:9)</div></div>
  </header>
  <!-- ===== КТО КЛИЕНТ ===== -->
  <section class="kcp__sec">
    <div class="kcp__grid2">
      <div>
        <div class="kcp__kick">- О КОМПАНИИ</div>
        <h2 class="kcp__h2">Сильное производство, которое было не видно</h2>
      </div>
      <div class="kcp__prose">
        <p>«Одоевские консервы» - производитель из посёлка Одоев в Тульской области. Уже более двадцати лет компания выпускает термостабильные фруктово-ягодные начинки, повидло, джемы, конфитюры, пюре и наполнители для хлебопекарной, кондитерской и молочной промышленности.</p>
        <p>Это классический B2B: их продукт - ингредиент, который живёт <b>внутри</b> чужих изделий. Начинка в круассане, повидло в печенье, наполнитель в йогурте. Продукт качественный, производство серьёзное - но со стороны этого масштаба не было видно.</p>
        <p>Видео, сайт, презентация и фирменные материалы существовали разрозненно и не складывались в единую картину. Компанию нельзя было «показать» - только долго объяснять на словах.</p>
      </div>
    </div>
  </section>
  <!-- ===== ЗАДАЧА (акцентная плашка) ===== -->
  <section class="kcp__sec">
    <div class="kcp__callout">
      <div class="kcp__callout-k">ЗАДАЧА</div>
      <div class="kcp__callout-t">Показать масштаб и качество производства так, чтобы партнёр видел уровень компании за несколько минут - а не верил на слово.</div>
    </div>
  </section>
  <!-- ===== ТАЙМЛАЙН РАБОТЫ ===== -->
  <section class="kcp__sec">
    <div class="kcp__kick">- КАК ШЛА РАБОТА</div>
    <h2 class="kcp__h2">Из одной съёмки - в полный цикл</h2>
    <p class="kcp__sub">Сотрудничество началось с одного ролика и постепенно выросло в полный комплект материалов. Вот путь шаг за шагом.</p>
    <ol class="kcp__timeline">
      <li class="kcp__step">
        <div class="kcp__step-num">01</div>
        <div class="kcp__step-body">
          <h3>Первые видео на начинке</h3>
          <p>Начали с двух роликов о продукте. Сняли начинку «в деле» - текстуру, цвет, как она работает в готовом изделии. Это первое, что показывает потенциальному партнёру, что перед ним - качественный ингредиент.</p>
          <!-- Два ролика первой съёмки. ID берутся из KORS_CASE.videos (firstShoot / firstShoot2). -->
          <div class="kcp__vid2">
            <div class="kcp__ph" data-video="firstShoot" data-img="firstShoot"><div class="kcp__ph-label">🎬 Термостабильные начинки</div></div>
            <div class="kcp__ph" data-video="firstShoot2" data-img="firstShoot2"><div class="kcp__ph-label">🎬 Нетермостабильные начинки</div></div>
          </div>
        </div>
      </li>
      <li class="kcp__step">
        <div class="kcp__step-num">02</div>
        <div class="kcp__step-body">
          <h3>Печатная презентация</h3>
          <p>Собрали продукт и производство в понятную структуру - презентацию для переговоров и выставок. Разложили ассортимент, преимущества и мощности так, чтобы менеджеру было легко показать компанию клиенту.</p>
          <!-- Галерея разворотов: ссылки в KORS_CASE.slides. Клик по развороту открывает его на весь экран. -->
          <div class="kcp__gal" data-gallery></div>
          <div class="kcp__ph kcp__ph--wide" data-img="presentation"><div class="kcp__ph-label">📑 Развороты печатной презентации</div></div>
        </div>
      </li>
      <li class="kcp__step">
        <div class="kcp__step-num">03</div>
        <div class="kcp__step-body">
          <h3>Видео о заводе</h3>
          <p>Сняли само производство: масштаб цехов, оборудование, процессы. Именно это видео закрывает главный вопрос B2B-клиента - «а справятся ли по объёму и качеству». Масштаб теперь виден, а не описан словами.</p>
          <div class="kcp__ph kcp__ph--wide" data-video="factory" data-img="factoryPhoto"><div class="kcp__ph-label">🎬 Видео о заводе / кадры производства</div></div>
        </div>
      </li>
      <li class="kcp__step">
        <div class="kcp__step-num">04</div>
        <div class="kcp__step-body">
          <h3>Фотосъёмка для презентации и каталога</h3>
          <p>Сделали предметную и производственную фотосъёмку - продукция, упаковка, цеха. Единый визуальный ряд, который лёг в презентацию, каталог и дальнейшие материалы.</p>
          <div class="kcp__ph kcp__ph--grid">
            <div class="kcp__ph" data-img="product1"><div class="kcp__ph-label">📷 фото продукции 1</div></div>
            <div class="kcp__ph" data-img="product2"><div class="kcp__ph-label">📷 фото продукции 2</div></div>
            <div class="kcp__ph" data-img="product3"><div class="kcp__ph-label">📷 фото цеха / процесса</div></div>
          </div>
        </div>
      </li>
      <li class="kcp__step">
        <div class="kcp__step-num">05</div>
        <div class="kcp__step-body">
          <h3>Новый логотип: до / после</h3>
          <p>Обновили логотип - сохранили узнаваемость, но привели к современному виду, который одинаково хорошо работает на упаковке, в презентации и на сайте. Сравните сами:</p>
          <!-- ДО/ПОСЛЕ слайдер. ВСТАВИТЬ 2 картинки логотипа: старый и новый -->
          <div class="kcp__ba" id="kcpBA">
            <div class="kcp__ba-after kcp__ph" data-img="logoAfter" data-fit="contain"><div class="kcp__ph-label">✅ НОВЫЙ логотип (после)</div></div>
            <div class="kcp__ba-before kcp__ph" id="kcpBABefore" data-img="logoBefore" data-fit="contain"><div class="kcp__ph-label">◻️ СТАРЫЙ логотип (до)</div></div>
            <div class="kcp__ba-handle" id="kcpBAHandle"><span></span></div>
            <div class="kcp__ba-tag kcp__ba-tag--l">ДО</div>
            <div class="kcp__ba-tag kcp__ba-tag--r">ПОСЛЕ</div>
          </div>
          <div class="kcp__ba-hint">Потяните ползунок влево-вправо, чтобы сравнить</div>
        </div>
      </li>
      <li class="kcp__step">
        <div class="kcp__step-num">06</div>
        <div class="kcp__step-body">
          <h3>Фирменный стиль: открытки, визитки, носители</h3>
          <p>Оформили фирменные носители - визитки, открытки и другие материалы в единой стилистике. Компания получила узнаваемый облик, который работает на каждой точке контакта.</p>
          <div class="kcp__ph kcp__ph--grid">
            <div class="kcp__ph" data-img="brand1"><div class="kcp__ph-label">📷 визитки</div></div>
            <div class="kcp__ph" data-img="brand2" data-fit="contain"><div class="kcp__ph-label">📷 открытки</div></div>
            <div class="kcp__ph" data-img="brand3" data-fit="contain"><div class="kcp__ph-label">📷 др. носители</div></div>
          </div>
        </div>
      </li>
      <li class="kcp__step">
        <div class="kcp__step-num">07</div>
        <div class="kcp__step-body">
          <h3>Два сайта: povidlo.su и povidlo.pro</h3>
          <p>Сделали не языковой переключатель, а два отдельных сайта. Русский - povidlo.su, под брендом «Одоевские консервы». Английский - povidlo.pro, под экспортным брендом POVIDLO: он собран под рынок ОАЭ и региона MENA, с отдельной структурой и своими акцентами.</p>
          <div class="kcp__ph kcp__ph--wide" data-img="siteShots"><div class="kcp__ph-label">💻 Скриншоты povidlo.su и povidlo.pro</div></div>
        </div>
      </li>
      <li class="kcp__step kcp__step--next">
        <div class="kcp__step-num">→</div>
        <div class="kcp__step-body">
          <h3>Что дальше</h3>
          <p>Следующий этап - застройка выставочного стенда (планируется на зиму). Сотрудничество продолжается: от продукта на экране - к тому, как компания выглядит вживую на выставке.</p>
        </div>
      </li>
    </ol>
  </section>
  <!-- ===== РЕЗУЛЬТАТ ===== -->
  <section class="kcp__sec">
    <div class="kcp__result">
      <div class="kcp__kick">- ЧТО ИЗМЕНИЛОСЬ</div>
      <h2 class="kcp__h2">Компанию теперь можно показать, а не пересказывать</h2>
      <div class="kcp__result-grid">
        <div class="kcp__rcard"><div class="kcp__rc-t">Единый комплект</div><p>Видео, фото, презентация, логотип, фирменный стиль и сайт - собраны в одну систему и работают вместе.</p></div>
        <div class="kcp__rcard"><div class="kcp__rc-t">Масштаб за минуты</div><p>Производство и уровень компании видно сразу - на переговорах, выставках и в презентации, без долгих объяснений.</p></div>
        <div class="kcp__rcard"><div class="kcp__rc-t">Экспортное направление</div><p>Экспорт и представительства в Грузии и ОАЭ. Англоязычный povidlo.pro - то, чем компания представляет себя в регионе MENA.</p></div>
        <div class="kcp__rcard"><div class="kcp__rc-t">Долгое партнёрство</div><p>Сотрудничество выросло из одной видеосъёмки в постоянную работу над материалами компании.</p></div>
      </div>
    </div>
  </section>
  <!-- ===== ЧТО ВОШЛО (услуги) ===== -->
  <section class="kcp__sec">
    <div class="kcp__kick">- ЧТО ВОШЛО В КОМПЛЕКТ</div>
    <div class="kcp__chips">
      <span>Видеопродакшн</span><span>Съёмка производства</span><span>Фотосъёмка</span><span>Печатная презентация</span><span>Редизайн логотипа</span><span>Фирменный стиль</span><span>Визитки и открытки</span><span>Сайт RU</span><span>Сайт EN (MENA)</span>
    </div>
  </section>
  <!-- ===== ВИДЕО КЕЙСА ===== -->
  <section class="kcp__sec">
    <div class="kcp__kick">- СМОТРЕТЬ</div>
    <h2 class="kcp__h2">Видео проекта</h2>
    <!-- ID ролика берётся из KORS_CASE.videos.main -->
    <div class="kcp__video" data-video="main"><div class="kcp__ph-label">🎬 Основной ролик проекта</div></div>
  </section>
  <!-- ===== ОТЗЫВ КЛИЕНТА ===== -->
  <section class="kcp__sec">
    <div class="kcp__kick">- ОТЗЫВ</div>
    <h2 class="kcp__h2">Благодарственное письмо</h2>
    <p class="kcp__sub">ООО «МастерДжем» - юридическое лицо «Одоевских консервов»</p>
    <div class="kcp__letter"><img src="https://static.tildacdn.com/tild3231-6563-4932-b139-373433306561/pismo-odoevskie-1200.jpg" alt="Благодарственное письмо от ООО «МастерДжем» (Одоевские консервы) команде KORS Production за фото- и видеосъёмку производства и материалы для сайта и презентаций" loading="lazy"></div>
  </section>
  <!-- ===== ДРУГИЕ КЕЙСЫ ===== -->
  <section class="kcp__sec">
    <div class="kcp__kick">- ЕЩЁ</div>
    <h2 class="kcp__h2">Другие кейсы</h2>
    <div class="kcp__more">
      <a class="kcp__more-card" href="/case-invoicebox"><span>Кейс</span><b>InvoiceBox</b><i>Видеоматериалы для платформы →</i></a>
      <a class="kcp__more-card" href="/case-vistex"><span>Кейс</span><b>Вистекс</b><i>Съёмка видео о предприятии →</i></a>
    </div>
  </section>
  <!-- ===== CTA ===== -->
  <section class="kcp__cta">
    <h2>Хотите так же показать своё производство?</h2>
    <p>Начнём с одного шага - а вырастем в полный цикл, если понравится результат.</p>
    <a class="kcp__cta-btn" href="#popup:zayavka">Обсудить проект →</a>
  </section>
  <!-- Лайтбокс. Тот же, что для благодарственных писем на главной, плюс листание. -->
  <div class="kcp__lb" id="kcpLb" aria-hidden="true">
    <div class="kcp__lbbd"></div>
    <div class="kcp__lbbox">
      <button class="kcp__lbx" id="kcpLbx" aria-label="Закрыть">×</button>
      <button class="kcp__lbnav kcp__lbnav--prev" id="kcpLbPrev" aria-label="Предыдущий">&#8249;</button>
      <img id="kcpLbImg" alt="">
      <button class="kcp__lbnav kcp__lbnav--next" id="kcpLbNext" aria-label="Следующий">&#8250;</button>
      <div class="kcp__lbcount" id="kcpLbCount"></div>
    </div>
  </div>
</div>
<style>
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Unbounded:wght@400;600;700;800&display=swap');
.kcp{--bg:#0C0C0E;--raise:#141416;--card:#1B1B1F;--border:#2A2A2E;--soft:#242428;--text:#F5F3EF;--muted:#9A9A9A;--faint:#6a6a6e;--accent:#6D5DFB;--glow:rgba(109,93,251,.14);
  box-sizing:border-box;background:var(--bg);color:var(--text);font-family:'Manrope',Arial,sans-serif;-webkit-font-smoothing:antialiased;}
.kcp *{box-sizing:border-box;margin:0;padding:0;}
.kcp p{line-height:1.65;}
.kcp__eyebrow,.kcp__kick{font-family:'Unbounded';font-size:12px;letter-spacing:.14em;color:var(--accent);}
.kcp__h2{font-family:'Unbounded';font-weight:700;font-size:clamp(26px,3.2vw,42px);letter-spacing:-.02em;line-height:1.12;margin:14px 0 0;}
.kcp__sub{color:var(--muted);font-size:17px;line-height:1.6;max-width:640px;margin-top:14px;}
/* HERO */
.kcp__hero{padding:70px 6vw 0;max-width:1280px;margin:0 auto;}
.kcp__hero-in{max-width:900px;}
.kcp__back{display:inline-block;color:var(--muted);text-decoration:none;font-size:14px;font-weight:600;margin-bottom:34px;transition:.2s;}
.kcp__back:hover{color:var(--accent);}
.kcp__hero .kcp__eyebrow{margin-bottom:18px;}
.kcp__title{font-family:'Unbounded';font-weight:800;font-size:clamp(40px,7vw,88px);letter-spacing:-.03em;line-height:1;margin-bottom:24px;}
.kcp__lead{font-size:clamp(18px,2vw,22px);line-height:1.55;color:#d8d6d1;max-width:760px;}
.kcp__tags{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 18px;}
.kcp__tag{font-family:'Manrope',Arial,sans-serif;font-weight:600;font-size:9px;line-height:1;text-transform:uppercase;letter-spacing:.14em;color:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.22);border-radius:4px;padding:5px 8px;white-space:nowrap;}
@media (max-width:480px){ .kcp__tag{font-size:8px;padding:5px 7px;} .kcp__tags{gap:5px;margin-bottom:14px;} }
.kcp__facts{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:14px;overflow:hidden;margin-top:44px;}
.kcp__fact{background:var(--raise);padding:20px 22px;display:flex;flex-direction:column;gap:7px;}
.kcp__fact span{font-size:12px;color:var(--faint);text-transform:uppercase;letter-spacing:.06em;}
.kcp__fact b{font-family:'Unbounded';font-weight:600;font-size:14px;line-height:1.3;}
.kcp__cover{margin:48px auto 0;max-width:1280px;aspect-ratio:16/8;border-radius:20px;}
/* SECTIONS */
.kcp__sec{max-width:1080px;margin:0 auto;padding:64px 6vw;}
.kcp__grid2{display:grid;grid-template-columns:0.85fr 1.15fr;gap:48px;align-items:start;}
.kcp__prose p{color:#c9c7c2;font-size:17px;margin-bottom:16px;}
.kcp__prose p:last-child{margin-bottom:0;}
.kcp__prose b{color:var(--text);font-weight:600;}
/* CALLOUT */
.kcp__callout{background:linear-gradient(135deg,rgba(109,93,251,.10),rgba(109,93,251,.02));border:1px solid rgba(109,93,251,.3);border-radius:18px;padding:40px 44px;}
.kcp__callout-k{font-family:'Unbounded';font-size:12px;letter-spacing:.14em;color:var(--accent);margin-bottom:14px;}
.kcp__callout-t{font-family:'Unbounded';font-weight:600;font-size:clamp(20px,2.4vw,30px);line-height:1.35;letter-spacing:-.01em;}
/* TIMELINE */
.kcp__timeline{list-style:none;margin-top:44px;display:flex;flex-direction:column;gap:26px;}
.kcp__step{display:grid;grid-template-columns:88px 1fr;gap:26px;background:var(--raise);border:1px solid var(--border);border-radius:18px;padding:30px 32px;transition:.25s;}
.kcp__step:hover{border-color:rgba(109,93,251,.4);}
.kcp__step-num{font-family:'Unbounded';font-weight:700;font-size:34px;color:var(--accent);line-height:1;opacity:.85;}
.kcp__step-body h3{font-family:'Unbounded';font-weight:600;font-size:22px;letter-spacing:-.01em;margin-bottom:12px;}
.kcp__step-body p{color:#c4c2bd;font-size:16px;}
.kcp__step--next{background:transparent;border-style:dashed;}
.kcp__step--next .kcp__step-num{opacity:1;}
/* PLACEHOLDERS */
.kcp__ph{position:relative;background:repeating-linear-gradient(45deg,#141416,#141416 12px,#17171a 12px,#17171a 24px);border:2px dashed #38383e;border-radius:14px;min-height:150px;display:flex;align-items:center;justify-content:center;text-align:center;}
.kcp__ph-label{color:#8a8a90;font-size:13px;font-weight:600;line-height:1.5;padding:16px;}
.kcp__ph-label small{color:var(--faint);font-weight:500;}
.kcp__ph--wide{margin-top:18px;aspect-ratio:16/8;min-height:0;}
.kcp__ph--grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:18px;background:none;border:none;padding:0;}
.kcp__ph--grid .kcp__ph{aspect-ratio:4/3;min-height:0;}
.kcp__cover.kcp__ph{aspect-ratio:16/8;}
/* BEFORE/AFTER */
.kcp__ba{position:relative;margin-top:20px;aspect-ratio:16/9;border-radius:16px;overflow:hidden;border:1px solid var(--border);user-select:none;}
.kcp__ba-after,.kcp__ba-before{position:absolute;inset:0;border-radius:0;border:none;}
.kcp__ba-before{width:100%;clip-path:inset(0 50% 0 0);}
.kcp__ba-handle{position:absolute;top:0;bottom:0;left:50%;width:2px;background:var(--accent);cursor:ew-resize;transform:translateX(-1px);}
.kcp__ba-handle span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:40px;height:40px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(0,0,0,.4);}
.kcp__ba-handle span::before{content:'⟷';color:#000;font-size:18px;font-weight:700;}
.kcp__ba-tag{position:absolute;top:14px;font-family:'Unbounded';font-size:11px;letter-spacing:.1em;background:rgba(0,0,0,.6);padding:5px 11px;border-radius:6px;}
.kcp__ba-tag--l{left:14px;}
.kcp__ba-tag--r{right:14px;}
.kcp__ba-hint{text-align:center;color:var(--faint);font-size:13px;margin-top:12px;}
/* RESULT */
.kcp__result-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:34px;}
.kcp__rcard{background:var(--raise);border:1px solid var(--border);border-radius:16px;padding:26px 28px;}
.kcp__rc-t{font-family:'Unbounded';font-weight:600;font-size:18px;color:var(--accent);margin-bottom:10px;}
.kcp__rcard p{color:#c4c2bd;font-size:15px;}
/* CHIPS */
.kcp__chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;}
.kcp__chips span{font-family:'Manrope';font-weight:600;font-size:14px;color:var(--text);background:rgba(109,93,251,.08);border:1px solid rgba(109,93,251,.4);border-radius:8px;padding:10px 16px;}
/* VIDEO */
.kcp__video{margin-top:24px;aspect-ratio:16/9;border-radius:18px;overflow:hidden;border:1px solid var(--border);background:#000;}
.kcp__video iframe{width:100%;height:100%;border:none;}
/* CTA */
.kcp__vid2{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px;}
.kcp__vid2 .kcp__ph{aspect-ratio:16/9;min-height:0;margin-top:0;}
.kcp__letter{margin-top:26px;max-width:440px;}
.kcp__letter img{display:block;width:100%;height:auto;border-radius:14px;border:1px solid var(--border);}
.kcp__more{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:28px;}
.kcp__more-card{display:block;background:var(--raise);border:1px solid var(--border);border-radius:16px;padding:24px 26px;text-decoration:none;transition:.2s;}
.kcp__more-card:hover{border-color:var(--accent);}
.kcp__more-card span{display:block;font-size:12px;letter-spacing:2px;color:var(--accent);text-transform:uppercase;margin-bottom:10px;}
.kcp__more-card b{display:block;font-family:'Unbounded',sans-serif;font-weight:700;font-size:22px;line-height:1.2;color:var(--text);margin-bottom:8px;}
.kcp__more-card i{font-style:normal;font-size:15px;color:var(--muted);}
@media (max-width:640px){.kcp__vid2{grid-template-columns:1fr;}.kcp__more{grid-template-columns:1fr;}}
/* --- Галерея разворотов презентации --- */
.kcp__gal{margin-top:18px;}
.kcp__galhead{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:12px;}
.kcp__galcount{font-size:13px;color:var(--muted);letter-spacing:.4px;}
.kcp__galnav{display:flex;gap:8px;flex-shrink:0;}
.kcp__galarrow{width:40px;height:40px;border:1px solid var(--border);background:var(--raise);border-radius:4px;color:var(--text);font:20px/1 Arial,sans-serif;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.2s;padding:0;}
.kcp__galarrow:hover{border-color:var(--accent);color:var(--accent);}
.kcp__galarrow:disabled{opacity:.3;cursor:default;border-color:var(--border);color:var(--text);}
.kcp__galtrack{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:4px;}
.kcp__galtrack::-webkit-scrollbar{display:none;}
.kcp__galcard{flex:0 0 calc((100% - 24px)/3);scroll-snap-align:start;display:block;padding:0;margin:0;border:1px solid var(--border);background:var(--raise);border-radius:10px;overflow:hidden;cursor:zoom-in;aspect-ratio:1200/873;transition:.2s;font:inherit;}
.kcp__galcard:hover{border-color:var(--accent);}
.kcp__galcard img{width:100%;height:100%;object-fit:cover;display:block;}
/* --- Лайтбокс --- */
.kcp__lb{position:fixed;inset:0;z-index:99999;display:none;align-items:center;justify-content:center;padding:64px 40px;}
.kcp__lb.open{display:flex;}
.kcp__lbbd{position:absolute;inset:0;background:rgba(4,4,6,.9);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);}
.kcp__lbbox{position:relative;width:auto;max-width:min(1100px,100%);display:flex;align-items:center;justify-content:center;}
.kcp__lbbox img{display:block;max-width:100%;max-height:calc(100vh - 170px);width:auto;height:auto;border-radius:10px;background:#0f0f11;}
.kcp__lbx{position:absolute;top:-48px;right:0;width:38px;height:38px;border-radius:9px;background:var(--raise);border:1px solid var(--border);color:var(--text);font:20px/1 Arial,sans-serif;cursor:pointer;padding:0;}
.kcp__lbx:hover{border-color:var(--accent);color:var(--accent);}
.kcp__lbnav{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;background:rgba(20,20,22,.85);border:1px solid var(--border);color:var(--text);font:22px/1 Arial,sans-serif;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.2s;padding:0;}
.kcp__lbnav:hover{border-color:var(--accent);color:var(--accent);}
.kcp__lbnav--prev{left:10px;}
.kcp__lbnav--next{right:10px;}
.kcp__lbcount{position:absolute;bottom:-36px;left:50%;transform:translateX(-50%);font-size:13px;color:var(--muted);letter-spacing:.4px;white-space:nowrap;}
@media (max-width:820px){.kcp__galcard{flex:0 0 calc((100% - 12px)/2);}.kcp__lb{padding:60px 12px;}.kcp__lbnav{width:40px;height:40px;}}
@media (max-width:480px){.kcp__galcard{flex:0 0 82%;}.kcp__galnav{display:none;}.kcp__galhead{margin-bottom:10px;}}
.kcp__cta{max-width:900px;margin:20px auto 0;padding:80px 6vw 96px;text-align:center;}
.kcp__cta h2{font-family:'Unbounded';font-weight:700;font-size:clamp(26px,3.4vw,42px);letter-spacing:-.02em;margin-bottom:16px;}
.kcp__cta p{color:var(--muted);font-size:18px;margin-bottom:30px;}
.kcp__cta-btn{display:inline-block;background:var(--accent);color:#fff;text-decoration:none;font-family:'Manrope';font-weight:700;font-size:16px;padding:18px 38px;border-radius:10px;transition:.25s;}
.kcp__cta-btn:hover{transform:translateY(-2px);box-shadow:0 14px 34px var(--glow);}
@media (max-width:820px){
  .kcp__facts{grid-template-columns:1fr 1fr;}
  .kcp__grid2{grid-template-columns:1fr;gap:20px;}
  .kcp__step{grid-template-columns:1fr;gap:14px;padding:24px 22px;}
  .kcp__step-num{font-size:28px;}
  .kcp__result-grid{grid-template-columns:1fr;}
  .kcp__ph--grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:480px){
  .kcp__hero{padding:48px 20px 0;}
  .kcp__sec{padding:48px 20px;}
  .kcp__facts{grid-template-columns:1fr;}
  .kcp__callout{padding:28px 24px;}
}
/* заполненные слоты (картинка/видео из конфига) */
.kcp [data-img].kcp--filled,.kcp [data-video].kcp--filled{background:none;border:none;}
.kcp [data-img] img,.kcp [data-video] img{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit;}
.kcp [data-fit="contain"] img{object-fit:contain;background:#0f0f11;padding:6%;}
.kcp [data-video].kcp--filled iframe{width:100%;height:100%;border:none;display:block;}
.kcp__ph.kcp--filled{padding:0;}
</style>
<script>
(function(){
  var C=window.KORS_CASE||{}; var IMG=C.images||{}, VID=C.videos||{};
  document.querySelectorAll('.kcp [data-video]').forEach(function(el){
    var id=VID[el.getAttribute('data-video')];
    if(id){ el.classList.add('kcp--filled'); el.innerHTML='<iframe src="https://kinescope.io/embed/'+id+'" allow="autoplay; fullscreen; encrypted-media; picture-in-picture" allowfullscreen frameborder="0"></iframe>'; el.removeAttribute('data-img'); }
  });
  document.querySelectorAll('.kcp [data-img]').forEach(function(el){
    var url=IMG[el.getAttribute('data-img')];
    if(url){ el.classList.add('kcp--filled'); el.innerHTML='<img src="'+url+'" alt="">'; }
  });
})();
(function(){
  // Слайдер до/после
  var ba=document.getElementById('kcpBA'); if(!ba) return;
  var before=document.getElementById('kcpBABefore');
  var handle=document.getElementById('kcpBAHandle');
  var dragging=false;
  function setPos(clientX){
    var r=ba.getBoundingClientRect();
    var x=Math.max(0,Math.min(clientX-r.left,r.width));
    var pct=(x/r.width)*100;
    before.style.clipPath='inset(0 '+(100-pct)+'% 0 0)';
    handle.style.left=pct+'%';
  }
  handle.addEventListener('mousedown',function(){dragging=true;});
  window.addEventListener('mouseup',function(){dragging=false;});
  window.addEventListener('mousemove',function(e){ if(dragging) setPos(e.clientX); });
  handle.addEventListener('touchstart',function(){dragging=true;},{passive:true});
  window.addEventListener('touchend',function(){dragging=false;});
  window.addEventListener('touchmove',function(e){ if(dragging&&e.touches[0]) setPos(e.touches[0].clientX); },{passive:true});
  ba.addEventListener('click',function(e){ setPos(e.clientX); });
})();

(function(){
  var C=window.KORS_CASE||{}, SL=C.slides||[];
  var lb=document.getElementById('kcpLb'), lbi=document.getElementById('kcpLbImg'), lbc=document.getElementById('kcpLbCount');
  if(!lb||!lbi) return;
  var list=[], idx=0;
  function render(){ lbi.src=list[idx]; lbi.alt='Разворот '+(idx+1)+' из '+list.length; if(lbc) lbc.textContent=(idx+1)+' / '+list.length; }
  function open(arr,i){ list=arr; idx=i; lb.classList.add('open'); lb.setAttribute('aria-hidden','false'); document.documentElement.style.overflow='hidden'; render(); }
  function close(){ lb.classList.remove('open'); lb.setAttribute('aria-hidden','true'); document.documentElement.style.overflow=''; lbi.removeAttribute('src'); }
  function go(d){ if(list.length<2) return; idx=(idx+d+list.length)%list.length; render(); }
  window.kcpLightbox={open:open};
  var gal=document.querySelector('.kcp [data-gallery]');
  if(gal && SL.length){
    var ph=gal.parentNode.querySelector('[data-img="presentation"]');
    if(ph) ph.style.display='none';
    var h='<div class="kcp__galhead"><span class="kcp__galcount">'+SL.length+' разворотов - нажмите, чтобы рассмотреть</span><div class="kcp__galnav"><button class="kcp__galarrow" data-gprev aria-label="Назад">&#8249;</button><button class="kcp__galarrow" data-gnext aria-label="Вперёд">&#8250;</button></div></div><div class="kcp__galtrack">';
    for(var i=0;i<SL.length;i++){ h+='<button class="kcp__galcard" data-gi="'+i+'" aria-label="Разворот '+(i+1)+' из '+SL.length+'"><img src="'+SL[i]+'" alt="Разворот '+(i+1)+' печатной презентации «Одоевские консервы»" loading="lazy"></button>'; }
    gal.innerHTML=h+'</div>';
    var track=gal.querySelector('.kcp__galtrack'), gp=gal.querySelector('[data-gprev]'), gn=gal.querySelector('[data-gnext]');
    function step(){ var c=track.querySelector('.kcp__galcard'); return c?c.offsetWidth+12:320; }
    function upd(){ gp.disabled=track.scrollLeft<8; gn.disabled=track.scrollLeft+track.clientWidth>=track.scrollWidth-8; }
    gp.addEventListener('click',function(){ track.scrollLeft-=step(); });
    gn.addEventListener('click',function(){ track.scrollLeft+=step(); });
    track.addEventListener('scroll',upd); window.addEventListener('resize',upd); setTimeout(upd,80);
    track.addEventListener('click',function(e){ var b=e.target&&e.target.closest?e.target.closest('.kcp__galcard'):null; if(!b) return; open(SL, parseInt(b.getAttribute('data-gi'),10)||0); });
  }
  var x=document.getElementById('kcpLbx'); if(x) x.addEventListener('click',close);
  var pv=document.getElementById('kcpLbPrev'); if(pv) pv.addEventListener('click',function(e){ e.stopPropagation(); go(-1); });
  var nx=document.getElementById('kcpLbNext'); if(nx) nx.addEventListener('click',function(e){ e.stopPropagation(); go(1); });
  lb.addEventListener('click',function(e){ if(e.target===lbi) return; if(e.target&&e.target.closest&&e.target.closest('.kcp__lbnav,.kcp__lbx')) return; close(); });
  document.addEventListener('keydown',function(e){ if(!lb.classList.contains('open')) return; if(e.key==='Escape'||e.keyCode===27) close(); else if(e.key==='ArrowLeft'||e.keyCode===37) go(-1); else if(e.key==='ArrowRight'||e.keyCode===39) go(1); });
  var sx=0, sy=0;
  lb.addEventListener('touchstart',function(e){ if(!e.touches[0]) return; sx=e.touches[0].clientX; sy=e.touches[0].clientY; },{passive:true});
  lb.addEventListener('touchend',function(e){ var t=e.changedTouches&&e.changedTouches[0]; if(!t) return; var dx=t.clientX-sx, dy=t.clientY-sy; if(Math.abs(dx)>45&&Math.abs(dx)>Math.abs(dy)) go(dx<0?1:-1); },{passive:true});
})();
</script>

rec2699474201 (38200 симв.)

<!-- ================================================================
     KORS · СТРАНИЦА-КЕЙС · ОДОЕВСКИЕ КОНСЕРВЫ
     ── ЗАПОЛНЕНИЕ ──────────────────────────────────────────────────
     Всё фото/видео вставляется В ОДНОМ МЕСТЕ - в списке ниже (KORS_CASE).
     • Картинки: вставь ссылку на изображение в кавычки. Пусто '' = заглушка.
       Где взять ссылку: загрузи фото в Tilda (Файл-менеджер сайта или любой
       блок «Изображение») и скопируй URL картинки; либо любой прямой URL.
     • Видео: впиши ID ролика Kinescope (часть после kinescope.io/… ). Пусто = заглушка.
     Больше нигде в коде править не нужно - слоты подтянутся сами.
     ================================================================ -->
<script>
window.KORS_CASE = {
  images: {
    cover:        'https://static.tildacdn.com/tild6563-3237-4237-b738-393161643533/odoevskie-cover-zavo.jpg',   // большая обложка вверху (гориз. фото/визуал)
    firstShoot:   '',   // шаг 01 - кадр первой съёмки начинки (если без видео)
    firstShoot2:  '',   // шаг 01 - кадр второй съёмки начинки (если без видео)
presentation: '',   // шаг 02 - одиночная картинка-запасной вариант (используется, только если slides пуст)
    factoryPhoto: '',   // шаг 03 - фото производства (если без видео)
    product1:     'https://static.tildacdn.com/tild3538-6336-4331-b630-393965653763/odoevskie-nachinki-1.jpg',   // шаг 04 - фото продукции 1
    product2:     'https://static.tildacdn.com/tild6462-3535-4432-b266-653436663333/odoevskie-kruasan-12.jpg',   // шаг 04 - фото продукции 2
    product3:     'https://static.tildacdn.com/tild6462-3131-4336-a237-366662616565/odoevskie-laboratori.jpg',   // шаг 04 - фото цеха/процесса
    logoBefore:   'https://static.tildacdn.com/tild6462-3439-4365-a261-333634373338/odoevskie-logo-do-12.jpg',   // шаг 05 - СТАРЫЙ логотип (до)
    logoAfter:    'https://static.tildacdn.com/tild6338-3131-4439-b966-623739303361/odoevskie-logo-posle.jpg',   // шаг 05 - НОВЫЙ логотип (после)
    brand1:       '',   // шаг 06 - визитки
    brand2:       'https://static.tildacdn.com/tild6162-3336-4666-a338-323336396465/odoev-otkrytka-vesna.jpg',   // шаг 06 - открытки
    brand3:       'https://static.tildacdn.com/tild6632-3465-4634-b861-393137323563/odoevskie-priglasite.jpg',   // шаг 06 - др. носители
    siteShots:    ''    // шаг 07 - скриншоты povidlo.su и povidlo.pro
  },
  // Развороты печатной презентации для шага 02. Два комплекта, переключаются вкладками RU/EN.
  // Порядок = порядок в галерее. Пусто в slides - в слоте останется заглушка,
  // пусто в slidesEn - вкладка EN не показывается.
  slides: [
    'https://static.tildacdn.com/tild3839-6265-4534-b632-383934363939/odoev-pres-01.jpg',
    'https://static.tildacdn.com/tild6365-3736-4633-b638-623535336533/odoev-pres-02.jpg',
    'https://static.tildacdn.com/tild3861-3537-4062-b638-623737303666/odoev-pres-03.jpg',
    'https://static.tildacdn.com/tild3739-3733-4737-a439-373962306636/odoev-pres-04.jpg',
    'https://static.tildacdn.com/tild6131-3763-4633-a632-383430346635/odoev-pres-05.jpg',
    'https://static.tildacdn.com/tild6238-3563-4662-b936-343165656562/odoev-pres-06.jpg',
    'https://static.tildacdn.com/tild6330-3263-4431-b136-306366623031/odoev-pres-07.jpg',
    'https://static.tildacdn.com/tild3263-6531-4663-b630-316431303234/odoev-pres-08.jpg',
    'https://static.tildacdn.com/tild3032-6661-4835-b932-613834373837/odoev-pres-09.jpg',
    'https://static.tildacdn.com/tild6439-3366-4065-b763-343465383338/odoev-pres-10.jpg',
    'https://static.tildacdn.com/tild3431-3232-4331-a661-653335363963/odoev-pres-11.jpg',
    'https://static.tildacdn.com/tild3239-6231-4336-a531-363563343563/odoev-pres-12.jpg',
    'https://static.tildacdn.com/tild3231-6331-4262-b262-363063643633/odoev-pres-13.jpg',
    'https://static.tildacdn.com/tild6537-3532-4534-a166-623232326538/odoev-pres-14.jpg',
    'https://static.tildacdn.com/tild3763-3332-4665-b631-353963643534/odoev-pres-15.jpg',
    'https://static.tildacdn.com/tild3439-6161-4537-a531-633864306164/odoev-pres-16.jpg'
  ],
  slidesEn: [
    'https://static.tildacdn.com/tild6132-3033-4436-b735-343631343130/odoev-pres-en-01.jpg',
    'https://static.tildacdn.com/tild3832-3935-4631-b631-366464363039/odoev-pres-en-02.jpg',
    'https://static.tildacdn.com/tild3332-3761-4538-b430-333335363031/odoev-pres-en-03.jpg',
    'https://static.tildacdn.com/tild6566-3932-4236-b365-323064646265/odoev-pres-en-04.jpg',
    'https://static.tildacdn.com/tild3238-6164-4730-b662-366261353863/odoev-pres-en-05.jpg',
    'https://static.tildacdn.com/tild3939-3332-4437-a131-643238343734/odoev-pres-en-06.jpg',
    'https://static.tildacdn.com/tild6264-3134-4561-a333-646630626136/odoev-pres-en-07.jpg',
    'https://static.tildacdn.com/tild3463-6639-4532-b364-636338303939/odoev-pres-en-08.jpg',
    'https://static.tildacdn.com/tild6634-3632-4239-a463-363462323464/odoev-pres-en-09.jpg',
    'https://static.tildacdn.com/tild3434-3061-4432-b663-386464313137/odoev-pres-en-10.jpg',
    'https://static.tildacdn.com/tild6265-6534-4335-a130-306462656133/odoev-pres-en-11.jpg',
    'https://static.tildacdn.com/tild6332-6135-4762-a135-303166363439/odoev-pres-en-12.jpg',
    'https://static.tildacdn.com/tild3930-3535-4231-a436-326336303337/odoev-pres-en-13.jpg',
    'https://static.tildacdn.com/tild3335-3832-4730-b466-393065656433/odoev-pres-en-14.jpg',
    'https://static.tildacdn.com/tild3934-3966-4931-a466-613731333338/odoev-pres-en-15.jpg',
    'https://static.tildacdn.com/tild6465-3432-4361-b464-343863303862/odoev-pres-en-16.jpg'
  ],
  videos: {
    firstShoot:   'sRyZwPm3BS9CVspVi2sLx3',   // шаг 01 - ролик «Термостабильные начинки»
    firstShoot2:  'mZiwnH9uZAdc15hhRsqPvB',    // шаг 01 - ролик «Нетермостабильные начинки»
    factory:      '3ZsxHkdEuHUubxSAQZDRyG',    // шаг 03 - фильм о заводе, полная версия
    main:         'j8Pq4wWMNTPm6Js8UQiM1n'     // блок «Видео проекта»
  }
};
</script>
<div class="kcp">
  <!-- ===== HERO ===== -->
  <header class="kcp__hero">
    <div class="kcp__hero-in">
      <a class="kcp__back" href="/#rec2667018101">← Все проекты</a>
      <div class="kcp__eyebrow">КЕЙС · ПИЩЕВОЕ ПРОИЗВОДСТВО</div>
      <h1 class="kcp__title">Одоевские консервы</h1>
      <div class="kcp__tags"><span class="kcp__tag">Видео</span><span class="kcp__tag">Фотосъёмка</span><span class="kcp__tag">Презентация</span><span class="kcp__tag">Фирменный стиль</span><span class="kcp__tag">Сайт</span></div>
      <p class="kcp__lead">Как из одной видеосъёмки вырос полный комплект материалов - от роликов и фотосъёмки до нового логотипа, фирменного стиля и двух сайтов: русского и экспортного, под рынок ОАЭ.</p>
      <div class="kcp__facts">
        <div class="kcp__fact"><span>Сфера</span><b>Пищевое производство · B2B</b></div>
        <div class="kcp__fact"><span>С чего начали</span><b>Видеосъёмка продукта</b></div>
        <div class="kcp__fact"><span>Где сейчас</span><b>povidlo.su + povidlo.pro</b></div>
        <div class="kcp__fact"><span>Формат</span><b>полный комплект материалов</b></div>
      </div>
    </div>
    <!-- ВСТАВИТЬ: большое обложечное фото/видео (завод, продукция или кадр со съёмки). Пока заглушка. -->
    <div class="kcp__cover kcp__ph" data-img="cover"><div class="kcp__ph-label">📷 Обложка: фото продукции / кадр со съёмки (16:9)</div></div>
  </header>
  <!-- ===== КТО КЛИЕНТ ===== -->
  <section class="kcp__sec">
    <div class="kcp__grid2">
      <div>
        <div class="kcp__kick">- О КОМПАНИИ</div>
        <h2 class="kcp__h2">Сильное производство, которое было не видно</h2>
      </div>
      <div class="kcp__prose">
        <p>«Одоевские консервы» - производитель из посёлка Одоев в Тульской области. Уже более двадцати лет компания выпускает термостабильные фруктово-ягодные начинки, повидло, джемы, конфитюры, пюре и наполнители для хлебопекарной, кондитерской и молочной промышленности.</p>
        <p>Это классический B2B: их продукт - ингредиент, который живёт <b>внутри</b> чужих изделий. Начинка в круассане, повидло в печенье, наполнитель в йогурте. Продукт качественный, производство серьёзное - но со стороны этого масштаба не было видно.</p>
        <p>Видео, сайт, презентация и фирменные материалы существовали разрозненно и не складывались в единую картину. Компанию нельзя было «показать» - только долго объяснять на словах.</p>
      </div>
    </div>
  </section>
  <!-- ===== ЗАДАЧА (акцентная плашка) ===== -->
  <section class="kcp__sec">
    <div class="kcp__callout">
      <div class="kcp__callout-k">ЗАДАЧА</div>
      <div class="kcp__callout-t">Показать масштаб и качество производства так, чтобы партнёр видел уровень компании за несколько минут - а не верил на слово.</div>
    </div>
  </section>
  <!-- ===== ТАЙМЛАЙН РАБОТЫ ===== -->
  <section class="kcp__sec">
    <div class="kcp__kick">- КАК ШЛА РАБОТА</div>
    <h2 class="kcp__h2">Из одной съёмки - в полный цикл</h2>
    <p class="kcp__sub">Сотрудничество началось с одного ролика и постепенно выросло в полный комплект материалов. Вот путь шаг за шагом.</p>
    <ol class="kcp__timeline">
      <li class="kcp__step">
        <div class="kcp__step-num">01</div>
        <div class="kcp__step-body">
          <h3>Первые видео на начинке</h3>
          <p>Начали с двух роликов о продукте. Сняли начинку «в деле» - текстуру, цвет, как она работает в готовом изделии. Это первое, что показывает потенциальному партнёру, что перед ним - качественный ингредиент.</p>
          <!-- Два ролика первой съёмки. ID берутся из KORS_CASE.videos (firstShoot / firstShoot2). -->
          <div class="kcp__vid2">
            <div class="kcp__ph" data-video="firstShoot" data-img="firstShoot"><div class="kcp__ph-label">🎬 Термостабильные начинки</div></div>
            <div class="kcp__ph" data-video="firstShoot2" data-img="firstShoot2"><div class="kcp__ph-label">🎬 Нетермостабильные начинки</div></div>
          </div>
        </div>
      </li>
      <li class="kcp__step">
        <div class="kcp__step-num">02</div>
        <div class="kcp__step-body">
          <h3>Печатная презентация</h3>
          <p>Собрали продукт и производство в понятную структуру - презентацию для переговоров и выставок. Разложили ассортимент, преимущества и мощности так, чтобы менеджеру было легко показать компанию клиенту.</p>
          <!-- Галерея разворотов: ссылки в KORS_CASE.slides. Клик по развороту открывает его на весь экран. -->
          <div class="kcp__gal" data-gallery></div>
          <div class="kcp__ph kcp__ph--wide" data-img="presentation"><div class="kcp__ph-label">📑 Развороты печатной презентации</div></div>
        </div>
      </li>
      <li class="kcp__step">
        <div class="kcp__step-num">03</div>
        <div class="kcp__step-body">
          <h3>Видео о заводе</h3>
          <p>Сняли само производство: масштаб цехов, оборудование, процессы. Именно это видео закрывает главный вопрос B2B-клиента - «а справятся ли по объёму и качеству». Масштаб теперь виден, а не описан словами.</p>
          <div class="kcp__ph kcp__ph--wide" data-video="factory" data-img="factoryPhoto"><div class="kcp__ph-label">🎬 Видео о заводе / кадры производства</div></div>
        </div>
      </li>
      <li class="kcp__step">
        <div class="kcp__step-num">04</div>
        <div class="kcp__step-body">
          <h3>Фотосъёмка для презентации и каталога</h3>
          <p>Сделали предметную и производственную фотосъёмку - продукция, упаковка, цеха. Единый визуальный ряд, который лёг в презентацию, каталог и дальнейшие материалы.</p>
          <div class="kcp__ph kcp__ph--grid">
            <div class="kcp__ph" data-img="product1"><div class="kcp__ph-label">📷 фото продукции 1</div></div>
            <div class="kcp__ph" data-img="product2"><div class="kcp__ph-label">📷 фото продукции 2</div></div>
            <div class="kcp__ph" data-img="product3"><div class="kcp__ph-label">📷 фото цеха / процесса</div></div>
          </div>
        </div>
      </li>
      <li class="kcp__step">
        <div class="kcp__step-num">05</div>
        <div class="kcp__step-body">
          <h3>Новый логотип: до / после</h3>
          <p>Обновили логотип - сохранили узнаваемость, но привели к современному виду, который одинаково хорошо работает на упаковке, в презентации и на сайте. Сравните сами:</p>
          <!-- ДО/ПОСЛЕ слайдер. ВСТАВИТЬ 2 картинки логотипа: старый и новый -->
          <div class="kcp__ba" id="kcpBA">
            <div class="kcp__ba-after kcp__ph" data-img="logoAfter" data-fit="contain"><div class="kcp__ph-label">✅ НОВЫЙ логотип (после)</div></div>
            <div class="kcp__ba-before kcp__ph" id="kcpBABefore" data-img="logoBefore" data-fit="contain"><div class="kcp__ph-label">◻️ СТАРЫЙ логотип (до)</div></div>
            <div class="kcp__ba-handle" id="kcpBAHandle"><span></span></div>
            <div class="kcp__ba-tag kcp__ba-tag--l">ДО</div>
            <div class="kcp__ba-tag kcp__ba-tag--r">ПОСЛЕ</div>
          </div>
          <div class="kcp__ba-hint">Потяните ползунок влево-вправо, чтобы сравнить</div>
        </div>
      </li>
      <li class="kcp__step">
        <div class="kcp__step-num">06</div>
        <div class="kcp__step-body">
          <h3>Фирменный стиль: открытки, визитки, носители</h3>
          <p>Оформили фирменные носители - визитки, открытки и другие материалы в единой стилистике. Компания получила узнаваемый облик, который работает на каждой точке контакта.</p>
          <div class="kcp__ph kcp__ph--grid">
            <div class="kcp__ph" data-img="brand1"><div class="kcp__ph-label">📷 визитки</div></div>
            <div class="kcp__ph" data-img="brand2" data-fit="contain"><div class="kcp__ph-label">📷 открытки</div></div>
            <div class="kcp__ph" data-img="brand3" data-fit="contain"><div class="kcp__ph-label">📷 др. носители</div></div>
          </div>
        </div>
      </li>
      <li class="kcp__step">
        <div class="kcp__step-num">07</div>
        <div class="kcp__step-body">
          <h3>Два сайта: povidlo.su и povidlo.pro</h3>
          <p>Сделали не языковой переключатель, а два отдельных сайта. Русский - povidlo.su, под брендом «Одоевские консервы». Английский - povidlo.pro, под экспортным брендом POVIDLO: он собран под рынок ОАЭ и региона MENA, с отдельной структурой и своими акцентами.</p>
          <div class="kcp__ph kcp__ph--wide" data-img="siteShots"><div class="kcp__ph-label">💻 Скриншоты povidlo.su и povidlo.pro</div></div>
        </div>
      </li>
      <li class="kcp__step kcp__step--next">
        <div class="kcp__step-num">→</div>
        <div class="kcp__step-body">
          <h3>Что дальше</h3>
          <p>Следующий этап - застройка выставочного стенда (планируется на зиму). Сотрудничество продолжается: от продукта на экране - к тому, как компания выглядит вживую на выставке.</p>
        </div>
      </li>
    </ol>
  </section>
  <!-- ===== РЕЗУЛЬТАТ ===== -->
  <section class="kcp__sec">
    <div class="kcp__result">
      <div class="kcp__kick">- ЧТО ИЗМЕНИЛОСЬ</div>
      <h2 class="kcp__h2">Компанию теперь можно показать, а не пересказывать</h2>
      <div class="kcp__result-grid">
        <div class="kcp__rcard"><div class="kcp__rc-t">Единый комплект</div><p>Видео, фото, презентация, логотип, фирменный стиль и сайт - собраны в одну систему и работают вместе.</p></div>
        <div class="kcp__rcard"><div class="kcp__rc-t">Масштаб за минуты</div><p>Производство и уровень компании видно сразу - на переговорах, выставках и в презентации, без долгих объяснений.</p></div>
        <div class="kcp__rcard"><div class="kcp__rc-t">Экспортное направление</div><p>Экспорт и представительства в Грузии и ОАЭ. Англоязычный povidlo.pro - то, чем компания представляет себя в регионе MENA.</p></div>
        <div class="kcp__rcard"><div class="kcp__rc-t">Долгое партнёрство</div><p>Сотрудничество выросло из одной видеосъёмки в постоянную работу над материалами компании.</p></div>
      </div>
    </div>
  </section>
  <!-- ===== ЧТО ВОШЛО (услуги) ===== -->
  <section class="kcp__sec">
    <div class="kcp__kick">- ЧТО ВОШЛО В КОМПЛЕКТ</div>
    <div class="kcp__chips">
      <span>Видеопродакшн</span><span>Съёмка производства</span><span>Фотосъёмка</span><span>Печатная презентация</span><span>Редизайн логотипа</span><span>Фирменный стиль</span><span>Визитки и открытки</span><span>Сайт RU</span><span>Сайт EN (MENA)</span>
    </div>
  </section>
  <!-- ===== ВИДЕО КЕЙСА ===== -->
  <section class="kcp__sec">
    <div class="kcp__kick">- СМОТРЕТЬ</div>
    <h2 class="kcp__h2">Видео проекта</h2>
    <!-- ID ролика берётся из KORS_CASE.videos.main -->
    <div class="kcp__video" data-video="main"><div class="kcp__ph-label">🎬 Основной ролик проекта</div></div>
  </section>
  <!-- ===== ОТЗЫВ КЛИЕНТА ===== -->
  <section class="kcp__sec">
    <div class="kcp__kick">- ОТЗЫВ</div>
    <h2 class="kcp__h2">Благодарственное письмо</h2>
    <p class="kcp__sub">ООО «МастерДжем» - юридическое лицо «Одоевских консервов»</p>
    <div class="kcp__letter"><img src="https://static.tildacdn.com/tild3231-6563-4932-b139-373433306561/pismo-odoevskie-1200.jpg" alt="Благодарственное письмо от ООО «МастерДжем» (Одоевские консервы) команде KORS Production за фото- и видеосъёмку производства и материалы для сайта и презентаций" loading="lazy"></div>
  </section>
  <!-- ===== ДРУГИЕ КЕЙСЫ ===== -->
  <section class="kcp__sec">
    <div class="kcp__kick">- ЕЩЁ</div>
    <h2 class="kcp__h2">Другие кейсы</h2>
    <div class="kcp__more">
      <a class="kcp__more-card" href="/case-invoicebox"><span>Кейс</span><b>InvoiceBox</b><i>Видеоматериалы для платформы →</i></a>
      <a class="kcp__more-card" href="/case-vistex"><span>Кейс</span><b>Вистекс</b><i>Съёмка видео о предприятии →</i></a>
    </div>
  </section>
  <!-- ===== CTA ===== -->
  <section class="kcp__cta">
    <h2>Хотите так же показать своё производство?</h2>
    <p>Начнём с одного шага - а вырастем в полный цикл, если понравится результат.</p>
    <a class="kcp__cta-btn" href="#popup:zayavka">Обсудить проект →</a>
  </section>
  <!-- Лайтбокс. Тот же, что для благодарственных писем на главной, плюс листание. -->
  <div class="kcp__lb" id="kcpLb" aria-hidden="true">
    <div class="kcp__lbbd"></div>
    <div class="kcp__lbbox">
      <button class="kcp__lbx" id="kcpLbx" aria-label="Закрыть">×</button>
      <button class="kcp__lbnav kcp__lbnav--prev" id="kcpLbPrev" aria-label="Предыдущий">&#8249;</button>
      <img id="kcpLbImg" alt="">
      <button class="kcp__lbnav kcp__lbnav--next" id="kcpLbNext" aria-label="Следующий">&#8250;</button>
      <div class="kcp__lbcount" id="kcpLbCount"></div>
    </div>
  </div>
</div>
<style>
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Unbounded:wght@400;600;700;800&display=swap');
.kcp{--bg:#0C0C0E;--raise:#141416;--card:#1B1B1F;--border:#2A2A2E;--soft:#242428;--text:#F5F3EF;--muted:#9A9A9A;--faint:#6a6a6e;--accent:#6D5DFB;--glow:rgba(109,93,251,.14);
  box-sizing:border-box;background:var(--bg);color:var(--text);font-family:'Manrope',Arial,sans-serif;-webkit-font-smoothing:antialiased;}
.kcp *{box-sizing:border-box;margin:0;padding:0;}
.kcp p{line-height:1.65;}
.kcp__eyebrow,.kcp__kick{font-family:'Unbounded';font-size:12px;letter-spacing:.14em;color:var(--accent);}
.kcp__h2{font-family:'Unbounded';font-weight:700;font-size:clamp(26px,3.2vw,42px);letter-spacing:-.02em;line-height:1.12;margin:14px 0 0;}
.kcp__sub{color:var(--muted);font-size:17px;line-height:1.6;max-width:640px;margin-top:14px;}
/* HERO */
.kcp__hero{padding:70px 6vw 0;max-width:1280px;margin:0 auto;}
.kcp__hero-in{max-width:900px;}
.kcp__back{display:inline-block;color:var(--muted);text-decoration:none;font-size:14px;font-weight:600;margin-bottom:34px;transition:.2s;}
.kcp__back:hover{color:var(--accent);}
.kcp__hero .kcp__eyebrow{margin-bottom:18px;}
.kcp__title{font-family:'Unbounded';font-weight:800;font-size:clamp(40px,7vw,88px);letter-spacing:-.03em;line-height:1;margin-bottom:24px;}
.kcp__lead{font-size:clamp(18px,2vw,22px);line-height:1.55;color:#d8d6d1;max-width:760px;}
.kcp__tags{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 18px;}
.kcp__tag{font-family:'Manrope',Arial,sans-serif;font-weight:600;font-size:9px;line-height:1;text-transform:uppercase;letter-spacing:.14em;color:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.22);border-radius:4px;padding:5px 8px;white-space:nowrap;}
@media (max-width:480px){ .kcp__tag{font-size:8px;padding:5px 7px;} .kcp__tags{gap:5px;margin-bottom:14px;} }
.kcp__facts{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:14px;overflow:hidden;margin-top:44px;}
.kcp__fact{background:var(--raise);padding:20px 22px;display:flex;flex-direction:column;gap:7px;}
.kcp__fact span{font-size:12px;color:var(--faint);text-transform:uppercase;letter-spacing:.06em;}
.kcp__fact b{font-family:'Unbounded';font-weight:600;font-size:14px;line-height:1.3;}
.kcp__cover{margin:48px auto 0;max-width:1280px;aspect-ratio:16/8;border-radius:20px;}
/* SECTIONS */
.kcp__sec{max-width:1080px;margin:0 auto;padding:64px 6vw;}
.kcp__grid2{display:grid;grid-template-columns:0.85fr 1.15fr;gap:48px;align-items:start;}
.kcp__prose p{color:#c9c7c2;font-size:17px;margin-bottom:16px;}
.kcp__prose p:last-child{margin-bottom:0;}
.kcp__prose b{color:var(--text);font-weight:600;}
/* CALLOUT */
.kcp__callout{background:linear-gradient(135deg,rgba(109,93,251,.10),rgba(109,93,251,.02));border:1px solid rgba(109,93,251,.3);border-radius:18px;padding:40px 44px;}
.kcp__callout-k{font-family:'Unbounded';font-size:12px;letter-spacing:.14em;color:var(--accent);margin-bottom:14px;}
.kcp__callout-t{font-family:'Unbounded';font-weight:600;font-size:clamp(20px,2.4vw,30px);line-height:1.35;letter-spacing:-.01em;}
/* TIMELINE */
.kcp__timeline{list-style:none;margin-top:44px;display:flex;flex-direction:column;gap:26px;}
.kcp__step{display:grid;grid-template-columns:88px 1fr;gap:26px;background:var(--raise);border:1px solid var(--border);border-radius:18px;padding:30px 32px;transition:.25s;}
.kcp__step:hover{border-color:rgba(109,93,251,.4);}
.kcp__step-num{font-family:'Unbounded';font-weight:700;font-size:34px;color:var(--accent);line-height:1;opacity:.85;}
.kcp__step-body h3{font-family:'Unbounded';font-weight:600;font-size:22px;letter-spacing:-.01em;margin-bottom:12px;}
.kcp__step-body p{color:#c4c2bd;font-size:16px;}
.kcp__step--next{background:transparent;border-style:dashed;}
.kcp__step--next .kcp__step-num{opacity:1;}
/* PLACEHOLDERS */
.kcp__ph{position:relative;background:repeating-linear-gradient(45deg,#141416,#141416 12px,#17171a 12px,#17171a 24px);border:2px dashed #38383e;border-radius:14px;min-height:150px;display:flex;align-items:center;justify-content:center;text-align:center;}
.kcp__ph-label{color:#8a8a90;font-size:13px;font-weight:600;line-height:1.5;padding:16px;}
.kcp__ph-label small{color:var(--faint);font-weight:500;}
.kcp__ph--wide{margin-top:18px;aspect-ratio:16/8;min-height:0;}
.kcp__ph--grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:18px;background:none;border:none;padding:0;}
.kcp__ph--grid .kcp__ph{aspect-ratio:4/3;min-height:0;}
.kcp__cover.kcp__ph{aspect-ratio:16/8;}
/* BEFORE/AFTER */
.kcp__ba{position:relative;margin-top:20px;aspect-ratio:16/9;border-radius:16px;overflow:hidden;border:1px solid var(--border);user-select:none;}
.kcp__ba-after,.kcp__ba-before{position:absolute;inset:0;border-radius:0;border:none;}
.kcp__ba-before{width:100%;clip-path:inset(0 50% 0 0);}
.kcp__ba-handle{position:absolute;top:0;bottom:0;left:50%;width:2px;background:var(--accent);cursor:ew-resize;transform:translateX(-1px);}
.kcp__ba-handle span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:40px;height:40px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(0,0,0,.4);}
.kcp__ba-handle span::before{content:'⟷';color:#000;font-size:18px;font-weight:700;}
.kcp__ba-tag{position:absolute;top:14px;font-family:'Unbounded';font-size:11px;letter-spacing:.1em;background:rgba(0,0,0,.6);padding:5px 11px;border-radius:6px;}
.kcp__ba-tag--l{left:14px;}
.kcp__ba-tag--r{right:14px;}
.kcp__ba-hint{text-align:center;color:var(--faint);font-size:13px;margin-top:12px;}
/* RESULT */
.kcp__result-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:34px;}
.kcp__rcard{background:var(--raise);border:1px solid var(--border);border-radius:16px;padding:26px 28px;}
.kcp__rc-t{font-family:'Unbounded';font-weight:600;font-size:18px;color:var(--accent);margin-bottom:10px;}
.kcp__rcard p{color:#c4c2bd;font-size:15px;}
/* CHIPS */
.kcp__chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;}
.kcp__chips span{font-family:'Manrope';font-weight:600;font-size:14px;color:var(--text);background:rgba(109,93,251,.08);border:1px solid rgba(109,93,251,.4);border-radius:8px;padding:10px 16px;}
/* VIDEO */
.kcp__video{margin-top:24px;aspect-ratio:16/9;border-radius:18px;overflow:hidden;border:1px solid var(--border);background:#000;}
.kcp__video iframe{width:100%;height:100%;border:none;}
/* CTA */
.kcp__vid2{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px;}
.kcp__vid2 .kcp__ph{aspect-ratio:16/9;min-height:0;margin-top:0;}
.kcp__letter{margin-top:26px;max-width:440px;}
.kcp__letter img{display:block;width:100%;height:auto;border-radius:14px;border:1px solid var(--border);}
.kcp__more{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:28px;}
.kcp__more-card{display:block;background:var(--raise);border:1px solid var(--border);border-radius:16px;padding:24px 26px;text-decoration:none;transition:.2s;}
.kcp__more-card:hover{border-color:var(--accent);}
.kcp__more-card span{display:block;font-size:12px;letter-spacing:2px;color:var(--accent);text-transform:uppercase;margin-bottom:10px;}
.kcp__more-card b{display:block;font-family:'Unbounded',sans-serif;font-weight:700;font-size:22px;line-height:1.2;color:var(--text);margin-bottom:8px;}
.kcp__more-card i{font-style:normal;font-size:15px;color:var(--muted);}
@media (max-width:640px){.kcp__vid2{grid-template-columns:1fr;}.kcp__more{grid-template-columns:1fr;}}
/* --- Галерея разворотов презентации --- */
.kcp__gal{margin-top:18px;}
.kcp__galhead{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:12px;}
.kcp__galtabs{display:inline-flex;gap:4px;background:var(--soft);border:1px solid var(--border);border-radius:9px;padding:4px;}
.kcp__galtab{padding:7px 18px;border:none;background:none;color:var(--muted);font-family:'Manrope',Arial,sans-serif;font-weight:600;font-size:13px;line-height:1;letter-spacing:1.2px;border-radius:6px;cursor:pointer;transition:.2s;}
.kcp__galtab:hover{color:var(--text);}
.kcp__galtab.is-on{background:var(--accent);color:#fff;}
.kcp__galnote{margin-top:14px;font-size:13px;line-height:1.5;color:var(--muted);letter-spacing:.3px;}
.kcp__galnav{display:flex;gap:8px;flex-shrink:0;}
.kcp__galarrow{width:40px;height:40px;border:1px solid var(--border);background:var(--raise);border-radius:4px;color:var(--text);font:20px/1 Arial,sans-serif;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.2s;padding:0;}
.kcp__galarrow:hover{border-color:var(--accent);color:var(--accent);}
.kcp__galarrow:disabled{opacity:.3;cursor:default;border-color:var(--border);color:var(--text);}
.kcp__galtrack{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:4px;}
.kcp__galtrack::-webkit-scrollbar{display:none;}
.kcp__galcard{flex:0 0 calc((100% - 24px)/3);scroll-snap-align:start;display:block;padding:0;margin:0;border:1px solid var(--border);background:var(--raise);border-radius:10px;overflow:hidden;cursor:zoom-in;aspect-ratio:1200/873;transition:.2s;font:inherit;}
.kcp__galcard:hover{border-color:var(--accent);}
.kcp__galcard img{width:100%;height:100%;object-fit:cover;display:block;}
/* --- Лайтбокс --- */
.kcp__lb{position:fixed;inset:0;z-index:99999;display:none;align-items:center;justify-content:center;padding:64px 40px;}
.kcp__lb.open{display:flex;}
.kcp__lbbd{position:absolute;inset:0;background:rgba(4,4,6,.9);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);}
.kcp__lbbox{position:relative;width:auto;max-width:min(1100px,100%);display:flex;align-items:center;justify-content:center;}
.kcp__lbbox img{display:block;max-width:100%;max-height:calc(100vh - 170px);width:auto;height:auto;border-radius:10px;background:#0f0f11;}
.kcp__lbx{position:absolute;top:-48px;right:0;width:38px;height:38px;border-radius:9px;background:var(--raise);border:1px solid var(--border);color:var(--text);font:20px/1 Arial,sans-serif;cursor:pointer;padding:0;}
.kcp__lbx:hover{border-color:var(--accent);color:var(--accent);}
.kcp__lbnav{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;background:rgba(20,20,22,.85);border:1px solid var(--border);color:var(--text);font:22px/1 Arial,sans-serif;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.2s;padding:0;}
.kcp__lbnav:hover{border-color:var(--accent);color:var(--accent);}
.kcp__lbnav--prev{left:10px;}
.kcp__lbnav--next{right:10px;}
.kcp__lbcount{position:absolute;bottom:-36px;left:50%;transform:translateX(-50%);font-size:13px;color:var(--muted);letter-spacing:.4px;white-space:nowrap;}
@media (max-width:820px){.kcp__galcard{flex:0 0 calc((100% - 12px)/2);}.kcp__lb{padding:60px 12px;}.kcp__lbnav{width:40px;height:40px;}}
@media (max-width:480px){.kcp__galcard{flex:0 0 82%;}.kcp__galnav{display:none;}.kcp__galhead{margin-bottom:10px;}}
.kcp__cta{max-width:900px;margin:20px auto 0;padding:80px 6vw 96px;text-align:center;}
.kcp__cta h2{font-family:'Unbounded';font-weight:700;font-size:clamp(26px,3.4vw,42px);letter-spacing:-.02em;margin-bottom:16px;}
.kcp__cta p{color:var(--muted);font-size:18px;margin-bottom:30px;}
.kcp__cta-btn{display:inline-block;background:var(--accent);color:#fff;text-decoration:none;font-family:'Manrope';font-weight:700;font-size:16px;padding:18px 38px;border-radius:10px;transition:.25s;}
.kcp__cta-btn:hover{transform:translateY(-2px);box-shadow:0 14px 34px var(--glow);}
@media (max-width:820px){
  .kcp__facts{grid-template-columns:1fr 1fr;}
  .kcp__grid2{grid-template-columns:1fr;gap:20px;}
  .kcp__step{grid-template-columns:1fr;gap:14px;padding:24px 22px;}
  .kcp__step-num{font-size:28px;}
  .kcp__result-grid{grid-template-columns:1fr;}
  .kcp__ph--grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:480px){
  .kcp__hero{padding:48px 20px 0;}
  .kcp__sec{padding:48px 20px;}
  .kcp__facts{grid-template-columns:1fr;}
  .kcp__callout{padding:28px 24px;}
}
/* заполненные слоты (картинка/видео из конфига) */
.kcp [data-img].kcp--filled,.kcp [data-video].kcp--filled{background:none;border:none;}
.kcp [data-img] img,.kcp [data-video] img{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit;}
.kcp [data-fit="contain"] img{object-fit:contain;background:#0f0f11;padding:6%;}
.kcp [data-video].kcp--filled iframe{width:100%;height:100%;border:none;display:block;}
.kcp__ph.kcp--filled{padding:0;}
</style>
<script>
(function(){
  var C=window.KORS_CASE||{}; var IMG=C.images||{}, VID=C.videos||{};
  document.querySelectorAll('.kcp [data-video]').forEach(function(el){
    var id=VID[el.getAttribute('data-video')];
    if(id){ el.classList.add('kcp--filled'); el.innerHTML='<iframe src="https://kinescope.io/embed/'+id+'" allow="autoplay; fullscreen; encrypted-media; picture-in-picture" allowfullscreen frameborder="0"></iframe>'; el.removeAttribute('data-img'); }
  });
  document.querySelectorAll('.kcp [data-img]').forEach(function(el){
    var url=IMG[el.getAttribute('data-img')];
    if(url){ el.classList.add('kcp--filled'); el.innerHTML='<img src="'+url+'" alt="">'; }
  });
})();
(function(){
  // Слайдер до/после
  var ba=document.getElementById('kcpBA'); if(!ba) return;
  var before=document.getElementById('kcpBABefore');
  var handle=document.getElementById('kcpBAHandle');
  var dragging=false;
  function setPos(clientX){
    var r=ba.getBoundingClientRect();
    var x=Math.max(0,Math.min(clientX-r.left,r.width));
    var pct=(x/r.width)*100;
    before.style.clipPath='inset(0 '+(100-pct)+'% 0 0)';
    handle.style.left=pct+'%';
  }
  handle.addEventListener('mousedown',function(){dragging=true;});
  window.addEventListener('mouseup',function(){dragging=false;});
  window.addEventListener('mousemove',function(e){ if(dragging) setPos(e.clientX); });
  handle.addEventListener('touchstart',function(){dragging=true;},{passive:true});
  window.addEventListener('touchend',function(){dragging=false;});
  window.addEventListener('touchmove',function(e){ if(dragging&&e.touches[0]) setPos(e.touches[0].clientX); },{passive:true});
  ba.addEventListener('click',function(e){ setPos(e.clientX); });
})();

(function(){
  var C=window.KORS_CASE||{}, SL=C.slides||[];
  var lb=document.getElementById('kcpLb'), lbi=document.getElementById('kcpLbImg'), lbc=document.getElementById('kcpLbCount');
  if(!lb||!lbi) return;
  var list=[], idx=0;
  function render(){ lbi.src=list[idx]; lbi.alt='Разворот '+(idx+1)+' из '+list.length; if(lbc) lbc.textContent=(idx+1)+' / '+list.length; }
  function open(arr,i){ list=arr; idx=i; lb.classList.add('open'); lb.setAttribute('aria-hidden','false'); document.documentElement.style.overflow='hidden'; render(); }
  function close(){ lb.classList.remove('open'); lb.setAttribute('aria-hidden','true'); document.documentElement.style.overflow=''; lbi.removeAttribute('src'); }
  function go(d){ if(list.length<2) return; idx=(idx+d+list.length)%list.length; render(); }
  window.kcpLightbox={open:open};
  var gal=document.querySelector('.kcp [data-gallery]');
  var SETS=[{id:'ru',label:'RU',items:SL},{id:'en',label:'EN',items:C.slidesEn||[]}].filter(function(x){return x.items&&x.items.length;});
  if(gal && SETS.length){
    var ph=gal.parentNode.querySelector('[data-img="presentation"]');
    if(ph) ph.style.display='none';
    var tabs=SETS.length>1 ? '<div class="kcp__galtabs" role="tablist">'+SETS.map(function(s,i){return '<button class="kcp__galtab'+(i===0?' is-on':'')+'" data-lang="'+s.id+'" role="tab" aria-selected="'+(i===0)+'">'+s.label+'</button>';}).join('')+'</div>' : '<span></span>';
    gal.innerHTML='<div class="kcp__galhead">'+tabs+'<div class="kcp__galnav"><button class="kcp__galarrow" data-gprev aria-label="Назад">&#8249;</button><button class="kcp__galarrow" data-gnext aria-label="Вперёд">&#8250;</button></div></div><div class="kcp__galtrack"></div><div class="kcp__galnote"></div>';
    var track=gal.querySelector('.kcp__galtrack'), note=gal.querySelector('.kcp__galnote');
    var gp=gal.querySelector('[data-gprev]'), gn=gal.querySelector('[data-gnext]');
    var cur=SETS[0];
    function noteText(){
      var ru=SETS.filter(function(s){return s.id==='ru';})[0], en=SETS.filter(function(s){return s.id==='en';})[0];
      if(ru&&en) return (ru.items.length===en.items.length?'По '+ru.items.length+' разворотов в русской и английской версии':ru.items.length+' разворотов на русском и '+en.items.length+' на английском')+' - нажмите на разворот, чтобы рассмотреть';
      return cur.items.length+' разворотов - нажмите на разворот, чтобы рассмотреть';
    }
    function fill(){
      var h='';
      for(var i=0;i<cur.items.length;i++){ h+='<button class="kcp__galcard" data-gi="'+i+'" aria-label="Разворот '+(i+1)+' из '+cur.items.length+'"><img src="'+cur.items[i]+'" alt="Разворот '+(i+1)+' печатной презентации «Одоевские консервы»'+(cur.id==='en'?', английская версия':'')+'" loading="lazy"></button>'; }
      track.innerHTML=h; track.scrollLeft=0; note.textContent=noteText(); setTimeout(upd,60);
    }
    function step(){ var c=track.querySelector('.kcp__galcard'); return c?c.offsetWidth+12:320; }
    function upd(){ gp.disabled=track.scrollLeft<8; gn.disabled=track.scrollLeft+track.clientWidth>=track.scrollWidth-8; }
    gp.addEventListener('click',function(){ track.scrollLeft-=step(); });
    gn.addEventListener('click',function(){ track.scrollLeft+=step(); });
    track.addEventListener('scroll',upd); window.addEventListener('resize',upd);
    track.addEventListener('click',function(e){ var b=e.target&&e.target.closest?e.target.closest('.kcp__galcard'):null; if(!b) return; open(cur.items, parseInt(b.getAttribute('data-gi'),10)||0); });
    var tabEls=gal.querySelectorAll('.kcp__galtab');
    Array.prototype.forEach.call(tabEls,function(t){
      t.addEventListener('click',function(){
        var id=t.getAttribute('data-lang');
        var next=SETS.filter(function(s){return s.id===id;})[0];
        if(!next||next===cur) return;
        cur=next;
        Array.prototype.forEach.call(tabEls,function(o){ var on=o===t; o.classList.toggle('is-on',on); o.setAttribute('aria-selected',on); });
        fill();
      });
    });
    fill();
  }
  var x=document.getElementById('kcpLbx'); if(x) x.addEventListener('click',close);
  var pv=document.getElementById('kcpLbPrev'); if(pv) pv.addEventListener('click',function(e){ e.stopPropagation(); go(-1); });
  var nx=document.getElementById('kcpLbNext'); if(nx) nx.addEventListener('click',function(e){ e.stopPropagation(); go(1); });
  lb.addEventListener('click',function(e){ if(e.target===lbi) return; if(e.target&&e.target.closest&&e.target.closest('.kcp__lbnav,.kcp__lbx')) return; close(); });
  document.addEventListener('keydown',function(e){ if(!lb.classList.contains('open')) return; if(e.key==='Escape'||e.keyCode===27) close(); else if(e.key==='ArrowLeft'||e.keyCode===37) go(-1); else if(e.key==='ArrowRight'||e.keyCode===39) go(1); });
  var sx=0, sy=0;
  lb.addEventListener('touchstart',function(e){ if(!e.touches[0]) return; sx=e.touches[0].clientX; sy=e.touches[0].clientY; },{passive:true});
  lb.addEventListener('touchend',function(e){ var t=e.changedTouches&&e.changedTouches[0]; if(!t) return; var dx=t.clientX-sx, dy=t.clientY-sy; if(Math.abs(dx)>45&&Math.abs(dx)>Math.abs(dy)) go(dx<0?1:-1); },{passive:true});
})();
</script>

rec2699474201 (38446 симв.)

<!-- ================================================================
     KORS · СТРАНИЦА-КЕЙС · ОДОЕВСКИЕ КОНСЕРВЫ
     ── ЗАПОЛНЕНИЕ ──────────────────────────────────────────────────
     Всё фото/видео вставляется В ОДНОМ МЕСТЕ - в списке ниже (KORS_CASE).
     • Картинки: вставь ссылку на изображение в кавычки. Пусто '' = заглушка.
       Где взять ссылку: загрузи фото в Tilda (Файл-менеджер сайта или любой
       блок «Изображение») и скопируй URL картинки; либо любой прямой URL.
     • Видео: впиши ID ролика Kinescope (часть после kinescope.io/… ). Пусто = заглушка.
     Больше нигде в коде править не нужно - слоты подтянутся сами.
     ================================================================ -->
<script>
window.KORS_CASE = {
  images: {
    cover:        'https://static.tildacdn.com/tild6563-3237-4237-b738-393161643533/odoevskie-cover-zavo.jpg',   // большая обложка вверху (гориз. фото/визуал)
    firstShoot:   '',   // шаг 01 - кадр первой съёмки начинки (если без видео)
    firstShoot2:  '',   // шаг 01 - кадр второй съёмки начинки (если без видео)
presentation: '',   // шаг 02 - одиночная картинка-запасной вариант (используется, только если slides пуст)
    factoryPhoto: '',   // шаг 03 - фото производства (если без видео)
    product1:     'https://static.tildacdn.com/tild3538-6336-4331-b630-393965653763/odoevskie-nachinki-1.jpg',   // шаг 04 - фото продукции 1
    product2:     'https://static.tildacdn.com/tild6462-3535-4432-b266-653436663333/odoevskie-kruasan-12.jpg',   // шаг 04 - фото продукции 2
    product3:     'https://static.tildacdn.com/tild6462-3131-4336-a237-366662616565/odoevskie-laboratori.jpg',   // шаг 04 - фото цеха/процесса
    logoBefore:   'https://static.tildacdn.com/tild6462-3439-4365-a261-333634373338/odoevskie-logo-do-12.jpg',   // шаг 05 - СТАРЫЙ логотип (до)
    logoAfter:    'https://static.tildacdn.com/tild6338-3131-4439-b966-623739303361/odoevskie-logo-posle.jpg',   // шаг 05 - НОВЫЙ логотип (после)
    brand1:       '',   // шаг 06 - визитки
    brand2:       'https://static.tildacdn.com/tild6162-3336-4666-a338-323336396465/odoev-otkrytka-vesna.jpg',   // шаг 06 - открытки
    brand3:       'https://static.tildacdn.com/tild6632-3465-4634-b861-393137323563/odoevskie-priglasite.jpg',   // шаг 06 - др. носители
    siteShots:    ''    // шаг 07 - скриншоты povidlo.su и povidlo.pro
  },
  // Развороты печатной презентации для шага 02. Два комплекта, переключаются вкладками RU/EN.
  // Порядок = порядок в галерее. Пусто в slides - в слоте останется заглушка,
  // пусто в slidesEn - вкладка EN не показывается.
  slides: [
    'https://static.tildacdn.com/tild3839-6265-4534-b632-383934363939/odoev-pres-01.jpg',
    'https://static.tildacdn.com/tild6365-3736-4633-b638-623535336533/odoev-pres-02.jpg',
    'https://static.tildacdn.com/tild3861-3537-4062-b638-623737303666/odoev-pres-03.jpg',
    'https://static.tildacdn.com/tild3739-3733-4737-a439-373962306636/odoev-pres-04.jpg',
    'https://static.tildacdn.com/tild6131-3763-4633-a632-383430346635/odoev-pres-05.jpg',
    'https://static.tildacdn.com/tild6238-3563-4662-b936-343165656562/odoev-pres-06.jpg',
    'https://static.tildacdn.com/tild6330-3263-4431-b136-306366623031/odoev-pres-07.jpg',
    'https://static.tildacdn.com/tild3263-6531-4663-b630-316431303234/odoev-pres-08.jpg',
    'https://static.tildacdn.com/tild3032-6661-4835-b932-613834373837/odoev-pres-09.jpg',
    'https://static.tildacdn.com/tild6439-3366-4065-b763-343465383338/odoev-pres-10.jpg',
    'https://static.tildacdn.com/tild3431-3232-4331-a661-653335363963/odoev-pres-11.jpg',
    'https://static.tildacdn.com/tild3239-6231-4336-a531-363563343563/odoev-pres-12.jpg',
    'https://static.tildacdn.com/tild3231-6331-4262-b262-363063643633/odoev-pres-13.jpg',
    'https://static.tildacdn.com/tild6537-3532-4534-a166-623232326538/odoev-pres-14.jpg',
    'https://static.tildacdn.com/tild3763-3332-4665-b631-353963643534/odoev-pres-15.jpg',
    'https://static.tildacdn.com/tild3439-6161-4537-a531-633864306164/odoev-pres-16.jpg'
  ],
  slidesEn: [
    'https://static.tildacdn.com/tild6132-3033-4436-b735-343631343130/odoev-pres-en-01.jpg',
    'https://static.tildacdn.com/tild3832-3935-4631-b631-366464363039/odoev-pres-en-02.jpg',
    'https://static.tildacdn.com/tild3332-3761-4538-b430-333335363031/odoev-pres-en-03.jpg',
    'https://static.tildacdn.com/tild6566-3932-4236-b365-323064646265/odoev-pres-en-04.jpg',
    'https://static.tildacdn.com/tild3238-6164-4730-b662-366261353863/odoev-pres-en-05.jpg',
    'https://static.tildacdn.com/tild3939-3332-4437-a131-643238343734/odoev-pres-en-06.jpg',
    'https://static.tildacdn.com/tild6264-3134-4561-a333-646630626136/odoev-pres-en-07.jpg',
    'https://static.tildacdn.com/tild3463-6639-4532-b364-636338303939/odoev-pres-en-08.jpg',
    'https://static.tildacdn.com/tild6634-3632-4239-a463-363462323464/odoev-pres-en-09.jpg',
    'https://static.tildacdn.com/tild3434-3061-4432-b663-386464313137/odoev-pres-en-10.jpg',
    'https://static.tildacdn.com/tild6265-6534-4335-a130-306462656133/odoev-pres-en-11.jpg',
    'https://static.tildacdn.com/tild6332-6135-4762-a135-303166363439/odoev-pres-en-12.jpg',
    'https://static.tildacdn.com/tild3930-3535-4231-a436-326336303337/odoev-pres-en-13.jpg',
    'https://static.tildacdn.com/tild3335-3832-4730-b466-393065656433/odoev-pres-en-14.jpg',
    'https://static.tildacdn.com/tild3934-3966-4931-a466-613731333338/odoev-pres-en-15.jpg',
    'https://static.tildacdn.com/tild6465-3432-4361-b464-343863303862/odoev-pres-en-16.jpg'
  ],
  videos: {
    firstShoot:   'sRyZwPm3BS9CVspVi2sLx3',   // шаг 01 - ролик «Термостабильные начинки»
    firstShoot2:  'mZiwnH9uZAdc15hhRsqPvB',    // шаг 01 - ролик «Нетермостабильные начинки»
    factory:      '3ZsxHkdEuHUubxSAQZDRyG',    // шаг 03 - фильм о заводе, полная версия
    main:         'j8Pq4wWMNTPm6Js8UQiM1n'     // блок «Видео проекта»
  }
};
</script>
<div class="kcp">
  <!-- ===== HERO ===== -->
  <header class="kcp__hero">
    <div class="kcp__hero-in">
      <a class="kcp__back" href="/#rec2667018101">← Все проекты</a>
      <div class="kcp__eyebrow">КЕЙС · ПИЩЕВОЕ ПРОИЗВОДСТВО</div>
      <h1 class="kcp__title">Одоевские консервы</h1>
      <div class="kcp__tags"><span class="kcp__tag">Видео</span><span class="kcp__tag">Фотосъёмка</span><span class="kcp__tag">Презентация</span><span class="kcp__tag">Фирменный стиль</span><span class="kcp__tag">Сайт</span></div>
      <p class="kcp__lead">Как из одной видеосъёмки вырос полный комплект материалов - от роликов и фотосъёмки до нового логотипа, фирменного стиля и двух сайтов: русского и экспортного, под рынок ОАЭ.</p>
      <div class="kcp__facts">
        <div class="kcp__fact"><span>Сфера</span><b>Пищевое производство · B2B</b></div>
        <div class="kcp__fact"><span>С чего начали</span><b>Видеосъёмка продукта</b></div>
        <div class="kcp__fact"><span>Где сейчас</span><b>povidlo.su + povidlo.pro</b></div>
        <div class="kcp__fact"><span>Формат</span><b>полный комплект материалов</b></div>
      </div>
    </div>
    <!-- ВСТАВИТЬ: большое обложечное фото/видео (завод, продукция или кадр со съёмки). Пока заглушка. -->
    <div class="kcp__cover kcp__ph" data-img="cover"><div class="kcp__ph-label">📷 Обложка: фото продукции / кадр со съёмки (16:9)</div></div>
  </header>
  <!-- ===== КТО КЛИЕНТ ===== -->
  <section class="kcp__sec">
    <div class="kcp__grid2">
      <div>
        <div class="kcp__kick">- О КОМПАНИИ</div>
        <h2 class="kcp__h2">Сильное производство, которое было не видно</h2>
      </div>
      <div class="kcp__prose">
        <p>«Одоевские консервы» - производитель из посёлка Одоев в Тульской области. Уже более двадцати лет компания выпускает термостабильные фруктово-ягодные начинки, повидло, джемы, конфитюры, пюре и наполнители для хлебопекарной, кондитерской и молочной промышленности.</p>
        <p>Это классический B2B: их продукт - ингредиент, который живёт <b>внутри</b> чужих изделий. Начинка в круассане, повидло в печенье, наполнитель в йогурте. Продукт качественный, производство серьёзное - но со стороны этого масштаба не было видно.</p>
        <p>Видео, сайт, презентация и фирменные материалы существовали разрозненно и не складывались в единую картину. Компанию нельзя было «показать» - только долго объяснять на словах.</p>
      </div>
    </div>
  </section>
  <!-- ===== ЗАДАЧА (акцентная плашка) ===== -->
  <section class="kcp__sec">
    <div class="kcp__callout">
      <div class="kcp__callout-k">ЗАДАЧА</div>
      <div class="kcp__callout-t">Показать масштаб и качество производства так, чтобы партнёр видел уровень компании за несколько минут - а не верил на слово.</div>
    </div>
  </section>
  <!-- ===== ТАЙМЛАЙН РАБОТЫ ===== -->
  <section class="kcp__sec">
    <div class="kcp__kick">- КАК ШЛА РАБОТА</div>
    <h2 class="kcp__h2">Из одной съёмки - в полный цикл</h2>
    <p class="kcp__sub">Сотрудничество началось с одного ролика и постепенно выросло в полный комплект материалов. Вот путь шаг за шагом.</p>
    <ol class="kcp__timeline">
      <li class="kcp__step">
        <div class="kcp__step-num">01</div>
        <div class="kcp__step-body">
          <h3>Первые видео на начинке</h3>
          <p>Начали с двух роликов о продукте. Сняли начинку «в деле» - текстуру, цвет, как она работает в готовом изделии. Это первое, что показывает потенциальному партнёру, что перед ним - качественный ингредиент.</p>
          <!-- Два ролика первой съёмки. ID берутся из KORS_CASE.videos (firstShoot / firstShoot2). -->
          <div class="kcp__vid2">
            <div class="kcp__ph" data-video="firstShoot" data-img="firstShoot"><div class="kcp__ph-label">🎬 Термостабильные начинки</div></div>
            <div class="kcp__ph" data-video="firstShoot2" data-img="firstShoot2"><div class="kcp__ph-label">🎬 Нетермостабильные начинки</div></div>
          </div>
        </div>
      </li>
      <li class="kcp__step">
        <div class="kcp__step-num">02</div>
        <div class="kcp__step-body">
          <h3>Печатная презентация</h3>
          <p>Собрали продукт и производство в понятную структуру - презентацию для переговоров и выставок. Разложили ассортимент, преимущества и мощности так, чтобы менеджеру было легко показать компанию клиенту.</p>
          <!-- Галерея разворотов: ссылки в KORS_CASE.slides. Клик по развороту открывает его на весь экран. -->
          <div class="kcp__gal" data-gallery></div>
          <div class="kcp__ph kcp__ph--wide" data-img="presentation"><div class="kcp__ph-label">📑 Развороты печатной презентации</div></div>
        </div>
      </li>
      <li class="kcp__step">
        <div class="kcp__step-num">03</div>
        <div class="kcp__step-body">
          <h3>Видео о заводе</h3>
          <p>Сняли само производство: масштаб цехов, оборудование, процессы. Именно это видео закрывает главный вопрос B2B-клиента - «а справятся ли по объёму и качеству». Масштаб теперь виден, а не описан словами.</p>
          <div class="kcp__ph kcp__ph--wide" data-video="factory" data-img="factoryPhoto"><div class="kcp__ph-label">🎬 Видео о заводе / кадры производства</div></div>
        </div>
      </li>
      <li class="kcp__step">
        <div class="kcp__step-num">04</div>
        <div class="kcp__step-body">
          <h3>Фотосъёмка для презентации и каталога</h3>
          <p>Сделали предметную и производственную фотосъёмку - продукция, упаковка, цеха. Единый визуальный ряд, который лёг в презентацию, каталог и дальнейшие материалы.</p>
          <div class="kcp__ph kcp__ph--grid">
            <div class="kcp__ph" data-img="product1"><div class="kcp__ph-label">📷 фото продукции 1</div></div>
            <div class="kcp__ph" data-img="product2"><div class="kcp__ph-label">📷 фото продукции 2</div></div>
            <div class="kcp__ph" data-img="product3"><div class="kcp__ph-label">📷 фото цеха / процесса</div></div>
          </div>
        </div>
      </li>
      <li class="kcp__step">
        <div class="kcp__step-num">05</div>
        <div class="kcp__step-body">
          <h3>Новый логотип: до / после</h3>
          <p>Обновили логотип - сохранили узнаваемость, но привели к современному виду, который одинаково хорошо работает на упаковке, в презентации и на сайте. Сравните сами:</p>
          <!-- ДО/ПОСЛЕ слайдер. ВСТАВИТЬ 2 картинки логотипа: старый и новый -->
          <div class="kcp__ba" id="kcpBA">
            <div class="kcp__ba-after kcp__ph" data-img="logoAfter" data-fit="contain"><div class="kcp__ph-label">✅ НОВЫЙ логотип (после)</div></div>
            <div class="kcp__ba-before kcp__ph" id="kcpBABefore" data-img="logoBefore" data-fit="contain"><div class="kcp__ph-label">◻️ СТАРЫЙ логотип (до)</div></div>
            <div class="kcp__ba-handle" id="kcpBAHandle"><span></span></div>
            <div class="kcp__ba-tag kcp__ba-tag--l">ДО</div>
            <div class="kcp__ba-tag kcp__ba-tag--r">ПОСЛЕ</div>
          </div>
          <div class="kcp__ba-hint">Потяните ползунок влево-вправо, чтобы сравнить</div>
        </div>
      </li>
      <li class="kcp__step">
        <div class="kcp__step-num">06</div>
        <div class="kcp__step-body">
          <h3>Фирменный стиль: открытки, визитки, носители</h3>
          <p>Оформили фирменные носители - визитки, открытки и другие материалы в единой стилистике. Компания получила узнаваемый облик, который работает на каждой точке контакта.</p>
          <div class="kcp__ph kcp__ph--grid">
            <div class="kcp__ph" data-img="brand1"><div class="kcp__ph-label">📷 визитки</div></div>
            <div class="kcp__ph" data-img="brand2" data-fit="contain"><div class="kcp__ph-label">📷 открытки</div></div>
            <div class="kcp__ph" data-img="brand3" data-fit="contain"><div class="kcp__ph-label">📷 др. носители</div></div>
          </div>
        </div>
      </li>
      <li class="kcp__step">
        <div class="kcp__step-num">07</div>
        <div class="kcp__step-body">
          <h3>Два сайта: povidlo.su и povidlo.pro</h3>
          <p>Сделали не языковой переключатель, а два отдельных сайта. Русский - povidlo.su, под брендом «Одоевские консервы». Английский - povidlo.pro, под экспортным брендом POVIDLO: он собран под рынок ОАЭ и региона MENA, с отдельной структурой и своими акцентами.</p>
          <div class="kcp__ph kcp__ph--wide" data-img="siteShots"><div class="kcp__ph-label">💻 Скриншоты povidlo.su и povidlo.pro</div></div>
        </div>
      </li>
      <li class="kcp__step kcp__step--next">
        <div class="kcp__step-num">→</div>
        <div class="kcp__step-body">
          <h3>Что дальше</h3>
          <p>Следующий этап - застройка выставочного стенда (планируется на зиму). Сотрудничество продолжается: от продукта на экране - к тому, как компания выглядит вживую на выставке.</p>
        </div>
      </li>
    </ol>
  </section>
  <!-- ===== РЕЗУЛЬТАТ ===== -->
  <section class="kcp__sec">
    <div class="kcp__result">
      <div class="kcp__kick">- ЧТО ИЗМЕНИЛОСЬ</div>
      <h2 class="kcp__h2">Компанию теперь можно показать, а не пересказывать</h2>
      <div class="kcp__result-grid">
        <div class="kcp__rcard"><div class="kcp__rc-t">Единый комплект</div><p>Видео, фото, презентация, логотип, фирменный стиль и сайт - собраны в одну систему и работают вместе.</p></div>
        <div class="kcp__rcard"><div class="kcp__rc-t">Масштаб за минуты</div><p>Производство и уровень компании видно сразу - на переговорах, выставках и в презентации, без долгих объяснений.</p></div>
        <div class="kcp__rcard"><div class="kcp__rc-t">Экспортное направление</div><p>Экспорт и представительства в Грузии и ОАЭ. Англоязычный povidlo.pro - то, чем компания представляет себя в регионе MENA.</p></div>
        <div class="kcp__rcard"><div class="kcp__rc-t">Долгое партнёрство</div><p>Сотрудничество выросло из одной видеосъёмки в постоянную работу над материалами компании.</p></div>
      </div>
    </div>
  </section>
  <!-- ===== ЧТО ВОШЛО (услуги) ===== -->
  <section class="kcp__sec">
    <div class="kcp__kick">- ЧТО ВОШЛО В КОМПЛЕКТ</div>
    <div class="kcp__chips">
      <span>Видеопродакшн</span><span>Съёмка производства</span><span>Фотосъёмка</span><span>Печатная презентация</span><span>Редизайн логотипа</span><span>Фирменный стиль</span><span>Визитки и открытки</span><span>Сайт RU</span><span>Сайт EN (MENA)</span>
    </div>
  </section>
  <!-- ===== ВИДЕО КЕЙСА (СКРЫТ) ===== -->
  <!-- СЕКЦИЯ СКРЫТА 28.08.2026. Причина: на странице уже четыре ролика (два в шаге 01 и фильм о заводе в шаге 03).
       Разметка и ключ KORS_CASE.videos.main оставлены нетронутыми. Чтобы вернуть секцию, снимите этот комментарий.
       ID ролика подставляется из KORS_CASE.videos.main
  <section class="kcp__sec">
    <div class="kcp__kick">- СМОТРЕТЬ</div>
    <h2 class="kcp__h2">Видео проекта</h2>
    <div class="kcp__video" data-video="main"><div class="kcp__ph-label">🎬 Основной ролик проекта</div></div>
  </section>
  -->
  <!-- ===== ОТЗЫВ КЛИЕНТА ===== -->
  <section class="kcp__sec">
    <div class="kcp__kick">- ОТЗЫВ</div>
    <h2 class="kcp__h2">Благодарственное письмо</h2>
    <p class="kcp__sub">ООО «МастерДжем» - юридическое лицо «Одоевских консервов»</p>
    <div class="kcp__letter"><img src="https://static.tildacdn.com/tild3231-6563-4932-b139-373433306561/pismo-odoevskie-1200.jpg" alt="Благодарственное письмо от ООО «МастерДжем» (Одоевские консервы) команде KORS Production за фото- и видеосъёмку производства и материалы для сайта и презентаций" loading="lazy"></div>
  </section>
  <!-- ===== ДРУГИЕ КЕЙСЫ ===== -->
  <section class="kcp__sec">
    <div class="kcp__kick">- ЕЩЁ</div>
    <h2 class="kcp__h2">Другие кейсы</h2>
    <div class="kcp__more">
      <a class="kcp__more-card" href="/case-invoicebox"><span>Кейс</span><b>InvoiceBox</b><i>Видеоматериалы для платформы →</i></a>
      <a class="kcp__more-card" href="/case-vistex"><span>Кейс</span><b>Вистекс</b><i>Съёмка видео о предприятии →</i></a>
    </div>
  </section>
  <!-- ===== CTA ===== -->
  <section class="kcp__cta">
    <h2>Хотите так же показать своё производство?</h2>
    <p>Начнём с одного шага - а вырастем в полный цикл, если понравится результат.</p>
    <a class="kcp__cta-btn" href="#popup:zayavka">Обсудить проект →</a>
  </section>
  <!-- Лайтбокс. Тот же, что для благодарственных писем на главной, плюс листание. -->
  <div class="kcp__lb" id="kcpLb" aria-hidden="true">
    <div class="kcp__lbbd"></div>
    <div class="kcp__lbbox">
      <button class="kcp__lbx" id="kcpLbx" aria-label="Закрыть">×</button>
      <button class="kcp__lbnav kcp__lbnav--prev" id="kcpLbPrev" aria-label="Предыдущий">&#8249;</button>
      <img id="kcpLbImg" alt="">
      <button class="kcp__lbnav kcp__lbnav--next" id="kcpLbNext" aria-label="Следующий">&#8250;</button>
      <div class="kcp__lbcount" id="kcpLbCount"></div>
    </div>
  </div>
</div>
<style>
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Unbounded:wght@400;600;700;800&display=swap');
.kcp{--bg:#0C0C0E;--raise:#141416;--card:#1B1B1F;--border:#2A2A2E;--soft:#242428;--text:#F5F3EF;--muted:#9A9A9A;--faint:#6a6a6e;--accent:#6D5DFB;--glow:rgba(109,93,251,.14);
  box-sizing:border-box;background:var(--bg);color:var(--text);font-family:'Manrope',Arial,sans-serif;-webkit-font-smoothing:antialiased;}
.kcp *{box-sizing:border-box;margin:0;padding:0;}
.kcp p{line-height:1.65;}
.kcp__eyebrow,.kcp__kick{font-family:'Unbounded';font-size:12px;letter-spacing:.14em;color:var(--accent);}
.kcp__h2{font-family:'Unbounded';font-weight:700;font-size:clamp(26px,3.2vw,42px);letter-spacing:-.02em;line-height:1.12;margin:14px 0 0;}
.kcp__sub{color:var(--muted);font-size:17px;line-height:1.6;max-width:640px;margin-top:14px;}
/* HERO */
.kcp__hero{padding:70px 6vw 0;max-width:1280px;margin:0 auto;}
.kcp__hero-in{max-width:900px;}
.kcp__back{display:inline-block;color:var(--muted);text-decoration:none;font-size:14px;font-weight:600;margin-bottom:34px;transition:.2s;}
.kcp__back:hover{color:var(--accent);}
.kcp__hero .kcp__eyebrow{margin-bottom:18px;}
.kcp__title{font-family:'Unbounded';font-weight:800;font-size:clamp(40px,7vw,88px);letter-spacing:-.03em;line-height:1;margin-bottom:24px;}
.kcp__lead{font-size:clamp(18px,2vw,22px);line-height:1.55;color:#d8d6d1;max-width:760px;}
.kcp__tags{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 18px;}
.kcp__tag{font-family:'Manrope',Arial,sans-serif;font-weight:600;font-size:9px;line-height:1;text-transform:uppercase;letter-spacing:.14em;color:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.22);border-radius:4px;padding:5px 8px;white-space:nowrap;}
@media (max-width:480px){ .kcp__tag{font-size:8px;padding:5px 7px;} .kcp__tags{gap:5px;margin-bottom:14px;} }
.kcp__facts{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:14px;overflow:hidden;margin-top:44px;}
.kcp__fact{background:var(--raise);padding:20px 22px;display:flex;flex-direction:column;gap:7px;}
.kcp__fact span{font-size:12px;color:var(--faint);text-transform:uppercase;letter-spacing:.06em;}
.kcp__fact b{font-family:'Unbounded';font-weight:600;font-size:14px;line-height:1.3;}
.kcp__cover{margin:48px auto 0;max-width:1280px;aspect-ratio:16/8;border-radius:20px;}
/* SECTIONS */
.kcp__sec{max-width:1080px;margin:0 auto;padding:64px 6vw;}
.kcp__grid2{display:grid;grid-template-columns:0.85fr 1.15fr;gap:48px;align-items:start;}
.kcp__prose p{color:#c9c7c2;font-size:17px;margin-bottom:16px;}
.kcp__prose p:last-child{margin-bottom:0;}
.kcp__prose b{color:var(--text);font-weight:600;}
/* CALLOUT */
.kcp__callout{background:linear-gradient(135deg,rgba(109,93,251,.10),rgba(109,93,251,.02));border:1px solid rgba(109,93,251,.3);border-radius:18px;padding:40px 44px;}
.kcp__callout-k{font-family:'Unbounded';font-size:12px;letter-spacing:.14em;color:var(--accent);margin-bottom:14px;}
.kcp__callout-t{font-family:'Unbounded';font-weight:600;font-size:clamp(20px,2.4vw,30px);line-height:1.35;letter-spacing:-.01em;}
/* TIMELINE */
.kcp__timeline{list-style:none;margin-top:44px;display:flex;flex-direction:column;gap:26px;}
.kcp__step{display:grid;grid-template-columns:88px 1fr;gap:26px;background:var(--raise);border:1px solid var(--border);border-radius:18px;padding:30px 32px;transition:.25s;}
.kcp__step:hover{border-color:rgba(109,93,251,.4);}
.kcp__step-num{font-family:'Unbounded';font-weight:700;font-size:34px;color:var(--accent);line-height:1;opacity:.85;}
.kcp__step-body h3{font-family:'Unbounded';font-weight:600;font-size:22px;letter-spacing:-.01em;margin-bottom:12px;}
.kcp__step-body p{color:#c4c2bd;font-size:16px;}
.kcp__step--next{background:transparent;border-style:dashed;}
.kcp__step--next .kcp__step-num{opacity:1;}
/* PLACEHOLDERS */
.kcp__ph{position:relative;background:repeating-linear-gradient(45deg,#141416,#141416 12px,#17171a 12px,#17171a 24px);border:2px dashed #38383e;border-radius:14px;min-height:150px;display:flex;align-items:center;justify-content:center;text-align:center;}
.kcp__ph-label{color:#8a8a90;font-size:13px;font-weight:600;line-height:1.5;padding:16px;}
.kcp__ph-label small{color:var(--faint);font-weight:500;}
.kcp__ph--wide{margin-top:18px;aspect-ratio:16/8;min-height:0;}
.kcp__ph--grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:18px;background:none;border:none;padding:0;}
.kcp__ph--grid .kcp__ph{aspect-ratio:4/3;min-height:0;}
.kcp__cover.kcp__ph{aspect-ratio:16/8;}
/* BEFORE/AFTER */
.kcp__ba{position:relative;margin-top:20px;aspect-ratio:16/9;border-radius:16px;overflow:hidden;border:1px solid var(--border);user-select:none;}
.kcp__ba-after,.kcp__ba-before{position:absolute;inset:0;border-radius:0;border:none;}
.kcp__ba-before{width:100%;clip-path:inset(0 50% 0 0);}
.kcp__ba-handle{position:absolute;top:0;bottom:0;left:50%;width:2px;background:var(--accent);cursor:ew-resize;transform:translateX(-1px);}
.kcp__ba-handle span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:40px;height:40px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(0,0,0,.4);}
.kcp__ba-handle span::before{content:'⟷';color:#000;font-size:18px;font-weight:700;}
.kcp__ba-tag{position:absolute;top:14px;font-family:'Unbounded';font-size:11px;letter-spacing:.1em;background:rgba(0,0,0,.6);padding:5px 11px;border-radius:6px;}
.kcp__ba-tag--l{left:14px;}
.kcp__ba-tag--r{right:14px;}
.kcp__ba-hint{text-align:center;color:var(--faint);font-size:13px;margin-top:12px;}
/* RESULT */
.kcp__result-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:34px;}
.kcp__rcard{background:var(--raise);border:1px solid var(--border);border-radius:16px;padding:26px 28px;}
.kcp__rc-t{font-family:'Unbounded';font-weight:600;font-size:18px;color:var(--accent);margin-bottom:10px;}
.kcp__rcard p{color:#c4c2bd;font-size:15px;}
/* CHIPS */
.kcp__chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;}
.kcp__chips span{font-family:'Manrope';font-weight:600;font-size:14px;color:var(--text);background:rgba(109,93,251,.08);border:1px solid rgba(109,93,251,.4);border-radius:8px;padding:10px 16px;}
/* VIDEO */
.kcp__video{margin-top:24px;aspect-ratio:16/9;border-radius:18px;overflow:hidden;border:1px solid var(--border);background:#000;}
.kcp__video iframe{width:100%;height:100%;border:none;}
/* CTA */
.kcp__vid2{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px;}
.kcp__vid2 .kcp__ph{aspect-ratio:16/9;min-height:0;margin-top:0;}
.kcp__letter{margin-top:26px;max-width:440px;}
.kcp__letter img{display:block;width:100%;height:auto;border-radius:14px;border:1px solid var(--border);}
.kcp__more{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:28px;}
.kcp__more-card{display:block;background:var(--raise);border:1px solid var(--border);border-radius:16px;padding:24px 26px;text-decoration:none;transition:.2s;}
.kcp__more-card:hover{border-color:var(--accent);}
.kcp__more-card span{display:block;font-size:12px;letter-spacing:2px;color:var(--accent);text-transform:uppercase;margin-bottom:10px;}
.kcp__more-card b{display:block;font-family:'Unbounded',sans-serif;font-weight:700;font-size:22px;line-height:1.2;color:var(--text);margin-bottom:8px;}
.kcp__more-card i{font-style:normal;font-size:15px;color:var(--muted);}
@media (max-width:640px){.kcp__vid2{grid-template-columns:1fr;}.kcp__more{grid-template-columns:1fr;}}
/* --- Галерея разворотов презентации --- */
.kcp__gal{margin-top:18px;}
.kcp__galhead{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:12px;}
.kcp__galtabs{display:inline-flex;gap:4px;background:var(--soft);border:1px solid var(--border);border-radius:9px;padding:4px;}
.kcp__galtab{padding:7px 18px;border:none;background:none;color:var(--muted);font-family:'Manrope',Arial,sans-serif;font-weight:600;font-size:13px;line-height:1;letter-spacing:1.2px;border-radius:6px;cursor:pointer;transition:.2s;}
.kcp__galtab:hover{color:var(--text);}
.kcp__galtab.is-on{background:var(--accent);color:#fff;}
.kcp__galnote{margin-top:14px;font-size:13px;line-height:1.5;color:var(--muted);letter-spacing:.3px;}
.kcp__galnav{display:flex;gap:8px;flex-shrink:0;}
.kcp__galarrow{width:40px;height:40px;border:1px solid var(--border);background:var(--raise);border-radius:4px;color:var(--text);font:20px/1 Arial,sans-serif;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.2s;padding:0;}
.kcp__galarrow:hover{border-color:var(--accent);color:var(--accent);}
.kcp__galarrow:disabled{opacity:.3;cursor:default;border-color:var(--border);color:var(--text);}
.kcp__galtrack{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:4px;}
.kcp__galtrack::-webkit-scrollbar{display:none;}
.kcp__galcard{flex:0 0 calc((100% - 24px)/3);scroll-snap-align:start;display:block;padding:0;margin:0;border:1px solid var(--border);background:var(--raise);border-radius:10px;overflow:hidden;cursor:zoom-in;aspect-ratio:1200/873;transition:.2s;font:inherit;}
.kcp__galcard:hover{border-color:var(--accent);}
.kcp__galcard img{width:100%;height:100%;object-fit:cover;display:block;}
/* --- Лайтбокс --- */
.kcp__lb{position:fixed;inset:0;z-index:99999;display:none;align-items:center;justify-content:center;padding:64px 40px;}
.kcp__lb.open{display:flex;}
.kcp__lbbd{position:absolute;inset:0;background:rgba(4,4,6,.9);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);}
.kcp__lbbox{position:relative;width:auto;max-width:min(1100px,100%);display:flex;align-items:center;justify-content:center;}
.kcp__lbbox img{display:block;max-width:100%;max-height:calc(100vh - 170px);width:auto;height:auto;border-radius:10px;background:#0f0f11;}
.kcp__lbx{position:absolute;top:-48px;right:0;width:38px;height:38px;border-radius:9px;background:var(--raise);border:1px solid var(--border);color:var(--text);font:20px/1 Arial,sans-serif;cursor:pointer;padding:0;}
.kcp__lbx:hover{border-color:var(--accent);color:var(--accent);}
.kcp__lbnav{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;background:rgba(20,20,22,.85);border:1px solid var(--border);color:var(--text);font:22px/1 Arial,sans-serif;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.2s;padding:0;}
.kcp__lbnav:hover{border-color:var(--accent);color:var(--accent);}
.kcp__lbnav--prev{left:10px;}
.kcp__lbnav--next{right:10px;}
.kcp__lbcount{position:absolute;bottom:-36px;left:50%;transform:translateX(-50%);font-size:13px;color:var(--muted);letter-spacing:.4px;white-space:nowrap;}
@media (max-width:820px){.kcp__galcard{flex:0 0 calc((100% - 12px)/2);}.kcp__lb{padding:60px 12px;}.kcp__lbnav{width:40px;height:40px;}}
@media (max-width:480px){.kcp__galcard{flex:0 0 82%;}.kcp__galnav{display:none;}.kcp__galhead{margin-bottom:10px;}}
.kcp__cta{max-width:900px;margin:20px auto 0;padding:80px 6vw 96px;text-align:center;}
.kcp__cta h2{font-family:'Unbounded';font-weight:700;font-size:clamp(26px,3.4vw,42px);letter-spacing:-.02em;margin-bottom:16px;}
.kcp__cta p{color:var(--muted);font-size:18px;margin-bottom:30px;}
.kcp__cta-btn{display:inline-block;background:var(--accent);color:#fff;text-decoration:none;font-family:'Manrope';font-weight:700;font-size:16px;padding:18px 38px;border-radius:10px;transition:.25s;}
.kcp__cta-btn:hover{transform:translateY(-2px);box-shadow:0 14px 34px var(--glow);}
@media (max-width:820px){
  .kcp__facts{grid-template-columns:1fr 1fr;}
  .kcp__grid2{grid-template-columns:1fr;gap:20px;}
  .kcp__step{grid-template-columns:1fr;gap:14px;padding:24px 22px;}
  .kcp__step-num{font-size:28px;}
  .kcp__result-grid{grid-template-columns:1fr;}
  .kcp__ph--grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:480px){
  .kcp__hero{padding:48px 20px 0;}
  .kcp__sec{padding:48px 20px;}
  .kcp__facts{grid-template-columns:1fr;}
  .kcp__callout{padding:28px 24px;}
}
/* заполненные слоты (картинка/видео из конфига) */
.kcp [data-img].kcp--filled,.kcp [data-video].kcp--filled{background:none;border:none;}
.kcp [data-img] img,.kcp [data-video] img{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit;}
.kcp [data-fit="contain"] img{object-fit:contain;background:#0f0f11;padding:6%;}
.kcp [data-video].kcp--filled iframe{width:100%;height:100%;border:none;display:block;}
.kcp__ph.kcp--filled{padding:0;}
</style>
<script>
(function(){
  var C=window.KORS_CASE||{}; var IMG=C.images||{}, VID=C.videos||{};
  document.querySelectorAll('.kcp [data-video]').forEach(function(el){
    var id=VID[el.getAttribute('data-video')];
    if(id){ el.classList.add('kcp--filled'); el.innerHTML='<iframe src="https://kinescope.io/embed/'+id+'" allow="autoplay; fullscreen; encrypted-media; picture-in-picture" allowfullscreen frameborder="0"></iframe>'; el.removeAttribute('data-img'); }
  });
  document.querySelectorAll('.kcp [data-img]').forEach(function(el){
    var url=IMG[el.getAttribute('data-img')];
    if(url){ el.classList.add('kcp--filled'); el.innerHTML='<img src="'+url+'" alt="">'; }
  });
})();
(function(){
  // Слайдер до/после
  var ba=document.getElementById('kcpBA'); if(!ba) return;
  var before=document.getElementById('kcpBABefore');
  var handle=document.getElementById('kcpBAHandle');
  var dragging=false;
  function setPos(clientX){
    var r=ba.getBoundingClientRect();
    var x=Math.max(0,Math.min(clientX-r.left,r.width));
    var pct=(x/r.width)*100;
    before.style.clipPath='inset(0 '+(100-pct)+'% 0 0)';
    handle.style.left=pct+'%';
  }
  handle.addEventListener('mousedown',function(){dragging=true;});
  window.addEventListener('mouseup',function(){dragging=false;});
  window.addEventListener('mousemove',function(e){ if(dragging) setPos(e.clientX); });
  handle.addEventListener('touchstart',function(){dragging=true;},{passive:true});
  window.addEventListener('touchend',function(){dragging=false;});
  window.addEventListener('touchmove',function(e){ if(dragging&&e.touches[0]) setPos(e.touches[0].clientX); },{passive:true});
  ba.addEventListener('click',function(e){ setPos(e.clientX); });
})();

(function(){
  var C=window.KORS_CASE||{}, SL=C.slides||[];
  var lb=document.getElementById('kcpLb'), lbi=document.getElementById('kcpLbImg'), lbc=document.getElementById('kcpLbCount');
  if(!lb||!lbi) return;
  var list=[], idx=0;
  function render(){ lbi.src=list[idx]; lbi.alt='Разворот '+(idx+1)+' из '+list.length; if(lbc) lbc.textContent=(idx+1)+' / '+list.length; }
  function open(arr,i){ list=arr; idx=i; lb.classList.add('open'); lb.setAttribute('aria-hidden','false'); document.documentElement.style.overflow='hidden'; render(); }
  function close(){ lb.classList.remove('open'); lb.setAttribute('aria-hidden','true'); document.documentElement.style.overflow=''; lbi.removeAttribute('src'); }
  function go(d){ if(list.length<2) return; idx=(idx+d+list.length)%list.length; render(); }
  window.kcpLightbox={open:open};
  var gal=document.querySelector('.kcp [data-gallery]');
  var SETS=[{id:'ru',label:'RU',items:SL},{id:'en',label:'EN',items:C.slidesEn||[]}].filter(function(x){return x.items&&x.items.length;});
  if(gal && SETS.length){
    var ph=gal.parentNode.querySelector('[data-img="presentation"]');
    if(ph) ph.style.display='none';
    var tabs=SETS.length>1 ? '<div class="kcp__galtabs" role="tablist">'+SETS.map(function(s,i){return '<button class="kcp__galtab'+(i===0?' is-on':'')+'" data-lang="'+s.id+'" role="tab" aria-selected="'+(i===0)+'">'+s.label+'</button>';}).join('')+'</div>' : '<span></span>';
    gal.innerHTML='<div class="kcp__galhead">'+tabs+'<div class="kcp__galnav"><button class="kcp__galarrow" data-gprev aria-label="Назад">&#8249;</button><button class="kcp__galarrow" data-gnext aria-label="Вперёд">&#8250;</button></div></div><div class="kcp__galtrack"></div><div class="kcp__galnote"></div>';
    var track=gal.querySelector('.kcp__galtrack'), note=gal.querySelector('.kcp__galnote');
    var gp=gal.querySelector('[data-gprev]'), gn=gal.querySelector('[data-gnext]');
    var cur=SETS[0];
    function noteText(){
      var ru=SETS.filter(function(s){return s.id==='ru';})[0], en=SETS.filter(function(s){return s.id==='en';})[0];
      if(ru&&en) return (ru.items.length===en.items.length?'По '+ru.items.length+' разворотов в русской и английской версии':ru.items.length+' разворотов на русском и '+en.items.length+' на английском')+' - нажмите на разворот, чтобы рассмотреть';
      return cur.items.length+' разворотов - нажмите на разворот, чтобы рассмотреть';
    }
    function fill(){
      var h='';
      for(var i=0;i<cur.items.length;i++){ h+='<button class="kcp__galcard" data-gi="'+i+'" aria-label="Разворот '+(i+1)+' из '+cur.items.length+'"><img src="'+cur.items[i]+'" alt="Разворот '+(i+1)+' печатной презентации «Одоевские консервы»'+(cur.id==='en'?', английская версия':'')+'" loading="lazy"></button>'; }
      track.innerHTML=h; track.scrollLeft=0; note.textContent=noteText(); setTimeout(upd,60);
    }
    function step(){ var c=track.querySelector('.kcp__galcard'); return c?c.offsetWidth+12:320; }
    function upd(){ gp.disabled=track.scrollLeft<8; gn.disabled=track.scrollLeft+track.clientWidth>=track.scrollWidth-8; }
    gp.addEventListener('click',function(){ track.scrollLeft-=step(); });
    gn.addEventListener('click',function(){ track.scrollLeft+=step(); });
    track.addEventListener('scroll',upd); window.addEventListener('resize',upd);
    track.addEventListener('click',function(e){ var b=e.target&&e.target.closest?e.target.closest('.kcp__galcard'):null; if(!b) return; open(cur.items, parseInt(b.getAttribute('data-gi'),10)||0); });
    var tabEls=gal.querySelectorAll('.kcp__galtab');
    Array.prototype.forEach.call(tabEls,function(t){
      t.addEventListener('click',function(){
        var id=t.getAttribute('data-lang');
        var next=SETS.filter(function(s){return s.id===id;})[0];
        if(!next||next===cur) return;
        cur=next;
        Array.prototype.forEach.call(tabEls,function(o){ var on=o===t; o.classList.toggle('is-on',on); o.setAttribute('aria-selected',on); });
        fill();
      });
    });
    fill();
  }
  var x=document.getElementById('kcpLbx'); if(x) x.addEventListener('click',close);
  var pv=document.getElementById('kcpLbPrev'); if(pv) pv.addEventListener('click',function(e){ e.stopPropagation(); go(-1); });
  var nx=document.getElementById('kcpLbNext'); if(nx) nx.addEventListener('click',function(e){ e.stopPropagation(); go(1); });
  lb.addEventListener('click',function(e){ if(e.target===lbi) return; if(e.target&&e.target.closest&&e.target.closest('.kcp__lbnav,.kcp__lbx')) return; close(); });
  document.addEventListener('keydown',function(e){ if(!lb.classList.contains('open')) return; if(e.key==='Escape'||e.keyCode===27) close(); else if(e.key==='ArrowLeft'||e.keyCode===37) go(-1); else if(e.key==='ArrowRight'||e.keyCode===39) go(1); });
  var sx=0, sy=0;
  lb.addEventListener('touchstart',function(e){ if(!e.touches[0]) return; sx=e.touches[0].clientX; sy=e.touches[0].clientY; },{passive:true});
  lb.addEventListener('touchend',function(e){ var t=e.changedTouches&&e.changedTouches[0]; if(!t) return; var dx=t.clientX-sx, dy=t.clientY-sy; if(Math.abs(dx)>45&&Math.abs(dx)>Math.abs(dy)) go(dx<0?1:-1); },{passive:true});
})();
</script>

rec2699474201 (38446 симв.)

<!-- ================================================================
     KORS · СТРАНИЦА-КЕЙС · ОДОЕВСКИЕ КОНСЕРВЫ
     ── ЗАПОЛНЕНИЕ ──────────────────────────────────────────────────
     Всё фото/видео вставляется В ОДНОМ МЕСТЕ - в списке ниже (KORS_CASE).
     • Картинки: вставь ссылку на изображение в кавычки. Пусто '' = заглушка.
       Где взять ссылку: загрузи фото в Tilda (Файл-менеджер сайта или любой
       блок «Изображение») и скопируй URL картинки; либо любой прямой URL.
     • Видео: впиши ID ролика Kinescope (часть после kinescope.io/… ). Пусто = заглушка.
     Больше нигде в коде править не нужно - слоты подтянутся сами.
     ================================================================ -->
<script>
window.KORS_CASE = {
  images: {
    cover:        'https://static.tildacdn.com/tild3333-6632-4732-a464-653131373534/odoev-cover-b-film-f.jpg',   // большая обложка вверху (гориз. фото/визуал)
    firstShoot:   '',   // шаг 01 - кадр первой съёмки начинки (если без видео)
    firstShoot2:  '',   // шаг 01 - кадр второй съёмки начинки (если без видео)
presentation: '',   // шаг 02 - одиночная картинка-запасной вариант (используется, только если slides пуст)
    factoryPhoto: '',   // шаг 03 - фото производства (если без видео)
    product1:     'https://static.tildacdn.com/tild3538-6336-4331-b630-393965653763/odoevskie-nachinki-1.jpg',   // шаг 04 - фото продукции 1
    product2:     'https://static.tildacdn.com/tild6462-3535-4432-b266-653436663333/odoevskie-kruasan-12.jpg',   // шаг 04 - фото продукции 2
    product3:     'https://static.tildacdn.com/tild6462-3131-4336-a237-366662616565/odoevskie-laboratori.jpg',   // шаг 04 - фото цеха/процесса
    logoBefore:   'https://static.tildacdn.com/tild6462-3439-4365-a261-333634373338/odoevskie-logo-do-12.jpg',   // шаг 05 - СТАРЫЙ логотип (до)
    logoAfter:    'https://static.tildacdn.com/tild6338-3131-4439-b966-623739303361/odoevskie-logo-posle.jpg',   // шаг 05 - НОВЫЙ логотип (после)
    brand1:       '',   // шаг 06 - визитки
    brand2:       'https://static.tildacdn.com/tild6162-3336-4666-a338-323336396465/odoev-otkrytka-vesna.jpg',   // шаг 06 - открытки
    brand3:       'https://static.tildacdn.com/tild6632-3465-4634-b861-393137323563/odoevskie-priglasite.jpg',   // шаг 06 - др. носители
    siteShots:    ''    // шаг 07 - скриншоты povidlo.su и povidlo.pro
  },
  // Развороты печатной презентации для шага 02. Два комплекта, переключаются вкладками RU/EN.
  // Порядок = порядок в галерее. Пусто в slides - в слоте останется заглушка,
  // пусто в slidesEn - вкладка EN не показывается.
  slides: [
    'https://static.tildacdn.com/tild3839-6265-4534-b632-383934363939/odoev-pres-01.jpg',
    'https://static.tildacdn.com/tild6365-3736-4633-b638-623535336533/odoev-pres-02.jpg',
    'https://static.tildacdn.com/tild3861-3537-4062-b638-623737303666/odoev-pres-03.jpg',
    'https://static.tildacdn.com/tild3739-3733-4737-a439-373962306636/odoev-pres-04.jpg',
    'https://static.tildacdn.com/tild6131-3763-4633-a632-383430346635/odoev-pres-05.jpg',
    'https://static.tildacdn.com/tild6238-3563-4662-b936-343165656562/odoev-pres-06.jpg',
    'https://static.tildacdn.com/tild6330-3263-4431-b136-306366623031/odoev-pres-07.jpg',
    'https://static.tildacdn.com/tild3263-6531-4663-b630-316431303234/odoev-pres-08.jpg',
    'https://static.tildacdn.com/tild3032-6661-4835-b932-613834373837/odoev-pres-09.jpg',
    'https://static.tildacdn.com/tild6439-3366-4065-b763-343465383338/odoev-pres-10.jpg',
    'https://static.tildacdn.com/tild3431-3232-4331-a661-653335363963/odoev-pres-11.jpg',
    'https://static.tildacdn.com/tild3239-6231-4336-a531-363563343563/odoev-pres-12.jpg',
    'https://static.tildacdn.com/tild3231-6331-4262-b262-363063643633/odoev-pres-13.jpg',
    'https://static.tildacdn.com/tild6537-3532-4534-a166-623232326538/odoev-pres-14.jpg',
    'https://static.tildacdn.com/tild3763-3332-4665-b631-353963643534/odoev-pres-15.jpg',
    'https://static.tildacdn.com/tild3439-6161-4537-a531-633864306164/odoev-pres-16.jpg'
  ],
  slidesEn: [
    'https://static.tildacdn.com/tild6132-3033-4436-b735-343631343130/odoev-pres-en-01.jpg',
    'https://static.tildacdn.com/tild3832-3935-4631-b631-366464363039/odoev-pres-en-02.jpg',
    'https://static.tildacdn.com/tild3332-3761-4538-b430-333335363031/odoev-pres-en-03.jpg',
    'https://static.tildacdn.com/tild6566-3932-4236-b365-323064646265/odoev-pres-en-04.jpg',
    'https://static.tildacdn.com/tild3238-6164-4730-b662-366261353863/odoev-pres-en-05.jpg',
    'https://static.tildacdn.com/tild3939-3332-4437-a131-643238343734/odoev-pres-en-06.jpg',
    'https://static.tildacdn.com/tild6264-3134-4561-a333-646630626136/odoev-pres-en-07.jpg',
    'https://static.tildacdn.com/tild3463-6639-4532-b364-636338303939/odoev-pres-en-08.jpg',
    'https://static.tildacdn.com/tild6634-3632-4239-a463-363462323464/odoev-pres-en-09.jpg',
    'https://static.tildacdn.com/tild3434-3061-4432-b663-386464313137/odoev-pres-en-10.jpg',
    'https://static.tildacdn.com/tild6265-6534-4335-a130-306462656133/odoev-pres-en-11.jpg',
    'https://static.tildacdn.com/tild6332-6135-4762-a135-303166363439/odoev-pres-en-12.jpg',
    'https://static.tildacdn.com/tild3930-3535-4231-a436-326336303337/odoev-pres-en-13.jpg',
    'https://static.tildacdn.com/tild3335-3832-4730-b466-393065656433/odoev-pres-en-14.jpg',
    'https://static.tildacdn.com/tild3934-3966-4931-a466-613731333338/odoev-pres-en-15.jpg',
    'https://static.tildacdn.com/tild6465-3432-4361-b464-343863303862/odoev-pres-en-16.jpg'
  ],
  videos: {
    firstShoot:   'sRyZwPm3BS9CVspVi2sLx3',   // шаг 01 - ролик «Термостабильные начинки»
    firstShoot2:  'mZiwnH9uZAdc15hhRsqPvB',    // шаг 01 - ролик «Нетермостабильные начинки»
    factory:      '3ZsxHkdEuHUubxSAQZDRyG',    // шаг 03 - фильм о заводе, полная версия
    main:         'j8Pq4wWMNTPm6Js8UQiM1n'     // блок «Видео проекта»
  }
};
</script>
<div class="kcp">
  <!-- ===== HERO ===== -->
  <header class="kcp__hero">
    <div class="kcp__hero-in">
      <a class="kcp__back" href="/#rec2667018101">← Все проекты</a>
      <div class="kcp__eyebrow">КЕЙС · ПИЩЕВОЕ ПРОИЗВОДСТВО</div>
      <h1 class="kcp__title">Одоевские консервы</h1>
      <div class="kcp__tags"><span class="kcp__tag">Видео</span><span class="kcp__tag">Фотосъёмка</span><span class="kcp__tag">Презентация</span><span class="kcp__tag">Фирменный стиль</span><span class="kcp__tag">Сайт</span></div>
      <p class="kcp__lead">Как из одной видеосъёмки вырос полный комплект материалов - от роликов и фотосъёмки до нового логотипа, фирменного стиля и двух сайтов: русского и экспортного, под рынок ОАЭ.</p>
      <div class="kcp__facts">
        <div class="kcp__fact"><span>Сфера</span><b>Пищевое производство · B2B</b></div>
        <div class="kcp__fact"><span>С чего начали</span><b>Видеосъёмка продукта</b></div>
        <div class="kcp__fact"><span>Где сейчас</span><b>povidlo.su + povidlo.pro</b></div>
        <div class="kcp__fact"><span>Формат</span><b>полный комплект материалов</b></div>
      </div>
    </div>
    <!-- ВСТАВИТЬ: большое обложечное фото/видео (завод, продукция или кадр со съёмки). Пока заглушка. -->
    <div class="kcp__cover kcp__ph" data-img="cover"><div class="kcp__ph-label">📷 Обложка: фото продукции / кадр со съёмки (16:9)</div></div>
  </header>
  <!-- ===== КТО КЛИЕНТ ===== -->
  <section class="kcp__sec">
    <div class="kcp__grid2">
      <div>
        <div class="kcp__kick">- О КОМПАНИИ</div>
        <h2 class="kcp__h2">Сильное производство, которое было не видно</h2>
      </div>
      <div class="kcp__prose">
        <p>«Одоевские консервы» - производитель из посёлка Одоев в Тульской области. Уже более двадцати лет компания выпускает термостабильные фруктово-ягодные начинки, повидло, джемы, конфитюры, пюре и наполнители для хлебопекарной, кондитерской и молочной промышленности.</p>
        <p>Это классический B2B: их продукт - ингредиент, который живёт <b>внутри</b> чужих изделий. Начинка в круассане, повидло в печенье, наполнитель в йогурте. Продукт качественный, производство серьёзное - но со стороны этого масштаба не было видно.</p>
        <p>Видео, сайт, презентация и фирменные материалы существовали разрозненно и не складывались в единую картину. Компанию нельзя было «показать» - только долго объяснять на словах.</p>
      </div>
    </div>
  </section>
  <!-- ===== ЗАДАЧА (акцентная плашка) ===== -->
  <section class="kcp__sec">
    <div class="kcp__callout">
      <div class="kcp__callout-k">ЗАДАЧА</div>
      <div class="kcp__callout-t">Показать масштаб и качество производства так, чтобы партнёр видел уровень компании за несколько минут - а не верил на слово.</div>
    </div>
  </section>
  <!-- ===== ТАЙМЛАЙН РАБОТЫ ===== -->
  <section class="kcp__sec">
    <div class="kcp__kick">- КАК ШЛА РАБОТА</div>
    <h2 class="kcp__h2">Из одной съёмки - в полный цикл</h2>
    <p class="kcp__sub">Сотрудничество началось с одного ролика и постепенно выросло в полный комплект материалов. Вот путь шаг за шагом.</p>
    <ol class="kcp__timeline">
      <li class="kcp__step">
        <div class="kcp__step-num">01</div>
        <div class="kcp__step-body">
          <h3>Первые видео на начинке</h3>
          <p>Начали с двух роликов о продукте. Сняли начинку «в деле» - текстуру, цвет, как она работает в готовом изделии. Это первое, что показывает потенциальному партнёру, что перед ним - качественный ингредиент.</p>
          <!-- Два ролика первой съёмки. ID берутся из KORS_CASE.videos (firstShoot / firstShoot2). -->
          <div class="kcp__vid2">
            <div class="kcp__ph" data-video="firstShoot" data-img="firstShoot"><div class="kcp__ph-label">🎬 Термостабильные начинки</div></div>
            <div class="kcp__ph" data-video="firstShoot2" data-img="firstShoot2"><div class="kcp__ph-label">🎬 Нетермостабильные начинки</div></div>
          </div>
        </div>
      </li>
      <li class="kcp__step">
        <div class="kcp__step-num">02</div>
        <div class="kcp__step-body">
          <h3>Печатная презентация</h3>
          <p>Собрали продукт и производство в понятную структуру - презентацию для переговоров и выставок. Разложили ассортимент, преимущества и мощности так, чтобы менеджеру было легко показать компанию клиенту.</p>
          <!-- Галерея разворотов: ссылки в KORS_CASE.slides. Клик по развороту открывает его на весь экран. -->
          <div class="kcp__gal" data-gallery></div>
          <div class="kcp__ph kcp__ph--wide" data-img="presentation"><div class="kcp__ph-label">📑 Развороты печатной презентации</div></div>
        </div>
      </li>
      <li class="kcp__step">
        <div class="kcp__step-num">03</div>
        <div class="kcp__step-body">
          <h3>Видео о заводе</h3>
          <p>Сняли само производство: масштаб цехов, оборудование, процессы. Именно это видео закрывает главный вопрос B2B-клиента - «а справятся ли по объёму и качеству». Масштаб теперь виден, а не описан словами.</p>
          <div class="kcp__ph kcp__ph--wide" data-video="factory" data-img="factoryPhoto"><div class="kcp__ph-label">🎬 Видео о заводе / кадры производства</div></div>
        </div>
      </li>
      <li class="kcp__step">
        <div class="kcp__step-num">04</div>
        <div class="kcp__step-body">
          <h3>Фотосъёмка для презентации и каталога</h3>
          <p>Сделали предметную и производственную фотосъёмку - продукция, упаковка, цеха. Единый визуальный ряд, который лёг в презентацию, каталог и дальнейшие материалы.</p>
          <div class="kcp__ph kcp__ph--grid">
            <div class="kcp__ph" data-img="product1"><div class="kcp__ph-label">📷 фото продукции 1</div></div>
            <div class="kcp__ph" data-img="product2"><div class="kcp__ph-label">📷 фото продукции 2</div></div>
            <div class="kcp__ph" data-img="product3"><div class="kcp__ph-label">📷 фото цеха / процесса</div></div>
          </div>
        </div>
      </li>
      <li class="kcp__step">
        <div class="kcp__step-num">05</div>
        <div class="kcp__step-body">
          <h3>Новый логотип: до / после</h3>
          <p>Обновили логотип - сохранили узнаваемость, но привели к современному виду, который одинаково хорошо работает на упаковке, в презентации и на сайте. Сравните сами:</p>
          <!-- ДО/ПОСЛЕ слайдер. ВСТАВИТЬ 2 картинки логотипа: старый и новый -->
          <div class="kcp__ba" id="kcpBA">
            <div class="kcp__ba-after kcp__ph" data-img="logoAfter" data-fit="contain"><div class="kcp__ph-label">✅ НОВЫЙ логотип (после)</div></div>
            <div class="kcp__ba-before kcp__ph" id="kcpBABefore" data-img="logoBefore" data-fit="contain"><div class="kcp__ph-label">◻️ СТАРЫЙ логотип (до)</div></div>
            <div class="kcp__ba-handle" id="kcpBAHandle"><span></span></div>
            <div class="kcp__ba-tag kcp__ba-tag--l">ДО</div>
            <div class="kcp__ba-tag kcp__ba-tag--r">ПОСЛЕ</div>
          </div>
          <div class="kcp__ba-hint">Потяните ползунок влево-вправо, чтобы сравнить</div>
        </div>
      </li>
      <li class="kcp__step">
        <div class="kcp__step-num">06</div>
        <div class="kcp__step-body">
          <h3>Фирменный стиль: открытки, визитки, носители</h3>
          <p>Оформили фирменные носители - визитки, открытки и другие материалы в единой стилистике. Компания получила узнаваемый облик, который работает на каждой точке контакта.</p>
          <div class="kcp__ph kcp__ph--grid">
            <div class="kcp__ph" data-img="brand1"><div class="kcp__ph-label">📷 визитки</div></div>
            <div class="kcp__ph" data-img="brand2" data-fit="contain"><div class="kcp__ph-label">📷 открытки</div></div>
            <div class="kcp__ph" data-img="brand3" data-fit="contain"><div class="kcp__ph-label">📷 др. носители</div></div>
          </div>
        </div>
      </li>
      <li class="kcp__step">
        <div class="kcp__step-num">07</div>
        <div class="kcp__step-body">
          <h3>Два сайта: povidlo.su и povidlo.pro</h3>
          <p>Сделали не языковой переключатель, а два отдельных сайта. Русский - povidlo.su, под брендом «Одоевские консервы». Английский - povidlo.pro, под экспортным брендом POVIDLO: он собран под рынок ОАЭ и региона MENA, с отдельной структурой и своими акцентами.</p>
          <div class="kcp__ph kcp__ph--wide" data-img="siteShots"><div class="kcp__ph-label">💻 Скриншоты povidlo.su и povidlo.pro</div></div>
        </div>
      </li>
      <li class="kcp__step kcp__step--next">
        <div class="kcp__step-num">→</div>
        <div class="kcp__step-body">
          <h3>Что дальше</h3>
          <p>Следующий этап - застройка выставочного стенда (планируется на зиму). Сотрудничество продолжается: от продукта на экране - к тому, как компания выглядит вживую на выставке.</p>
        </div>
      </li>
    </ol>
  </section>
  <!-- ===== РЕЗУЛЬТАТ ===== -->
  <section class="kcp__sec">
    <div class="kcp__result">
      <div class="kcp__kick">- ЧТО ИЗМЕНИЛОСЬ</div>
      <h2 class="kcp__h2">Компанию теперь можно показать, а не пересказывать</h2>
      <div class="kcp__result-grid">
        <div class="kcp__rcard"><div class="kcp__rc-t">Единый комплект</div><p>Видео, фото, презентация, логотип, фирменный стиль и сайт - собраны в одну систему и работают вместе.</p></div>
        <div class="kcp__rcard"><div class="kcp__rc-t">Масштаб за минуты</div><p>Производство и уровень компании видно сразу - на переговорах, выставках и в презентации, без долгих объяснений.</p></div>
        <div class="kcp__rcard"><div class="kcp__rc-t">Экспортное направление</div><p>Экспорт и представительства в Грузии и ОАЭ. Англоязычный povidlo.pro - то, чем компания представляет себя в регионе MENA.</p></div>
        <div class="kcp__rcard"><div class="kcp__rc-t">Долгое партнёрство</div><p>Сотрудничество выросло из одной видеосъёмки в постоянную работу над материалами компании.</p></div>
      </div>
    </div>
  </section>
  <!-- ===== ЧТО ВОШЛО (услуги) ===== -->
  <section class="kcp__sec">
    <div class="kcp__kick">- ЧТО ВОШЛО В КОМПЛЕКТ</div>
    <div class="kcp__chips">
      <span>Видеопродакшн</span><span>Съёмка производства</span><span>Фотосъёмка</span><span>Печатная презентация</span><span>Редизайн логотипа</span><span>Фирменный стиль</span><span>Визитки и открытки</span><span>Сайт RU</span><span>Сайт EN (MENA)</span>
    </div>
  </section>
  <!-- ===== ВИДЕО КЕЙСА (СКРЫТ) ===== -->
  <!-- СЕКЦИЯ СКРЫТА 28.08.2026. Причина: на странице уже четыре ролика (два в шаге 01 и фильм о заводе в шаге 03).
       Разметка и ключ KORS_CASE.videos.main оставлены нетронутыми. Чтобы вернуть секцию, снимите этот комментарий.
       ID ролика подставляется из KORS_CASE.videos.main
  <section class="kcp__sec">
    <div class="kcp__kick">- СМОТРЕТЬ</div>
    <h2 class="kcp__h2">Видео проекта</h2>
    <div class="kcp__video" data-video="main"><div class="kcp__ph-label">🎬 Основной ролик проекта</div></div>
  </section>
  -->
  <!-- ===== ОТЗЫВ КЛИЕНТА ===== -->
  <section class="kcp__sec">
    <div class="kcp__kick">- ОТЗЫВ</div>
    <h2 class="kcp__h2">Благодарственное письмо</h2>
    <p class="kcp__sub">ООО «МастерДжем» - юридическое лицо «Одоевских консервов»</p>
    <div class="kcp__letter"><img src="https://static.tildacdn.com/tild3231-6563-4932-b139-373433306561/pismo-odoevskie-1200.jpg" alt="Благодарственное письмо от ООО «МастерДжем» (Одоевские консервы) команде KORS Production за фото- и видеосъёмку производства и материалы для сайта и презентаций" loading="lazy"></div>
  </section>
  <!-- ===== ДРУГИЕ КЕЙСЫ ===== -->
  <section class="kcp__sec">
    <div class="kcp__kick">- ЕЩЁ</div>
    <h2 class="kcp__h2">Другие кейсы</h2>
    <div class="kcp__more">
      <a class="kcp__more-card" href="/case-invoicebox"><span>Кейс</span><b>InvoiceBox</b><i>Видеоматериалы для платформы →</i></a>
      <a class="kcp__more-card" href="/case-vistex"><span>Кейс</span><b>Вистекс</b><i>Съёмка видео о предприятии →</i></a>
    </div>
  </section>
  <!-- ===== CTA ===== -->
  <section class="kcp__cta">
    <h2>Хотите так же показать своё производство?</h2>
    <p>Начнём с одного шага - а вырастем в полный цикл, если понравится результат.</p>
    <a class="kcp__cta-btn" href="#popup:zayavka">Обсудить проект →</a>
  </section>
  <!-- Лайтбокс. Тот же, что для благодарственных писем на главной, плюс листание. -->
  <div class="kcp__lb" id="kcpLb" aria-hidden="true">
    <div class="kcp__lbbd"></div>
    <div class="kcp__lbbox">
      <button class="kcp__lbx" id="kcpLbx" aria-label="Закрыть">×</button>
      <button class="kcp__lbnav kcp__lbnav--prev" id="kcpLbPrev" aria-label="Предыдущий">&#8249;</button>
      <img id="kcpLbImg" alt="">
      <button class="kcp__lbnav kcp__lbnav--next" id="kcpLbNext" aria-label="Следующий">&#8250;</button>
      <div class="kcp__lbcount" id="kcpLbCount"></div>
    </div>
  </div>
</div>
<style>
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Unbounded:wght@400;600;700;800&display=swap');
.kcp{--bg:#0C0C0E;--raise:#141416;--card:#1B1B1F;--border:#2A2A2E;--soft:#242428;--text:#F5F3EF;--muted:#9A9A9A;--faint:#6a6a6e;--accent:#6D5DFB;--glow:rgba(109,93,251,.14);
  box-sizing:border-box;background:var(--bg);color:var(--text);font-family:'Manrope',Arial,sans-serif;-webkit-font-smoothing:antialiased;}
.kcp *{box-sizing:border-box;margin:0;padding:0;}
.kcp p{line-height:1.65;}
.kcp__eyebrow,.kcp__kick{font-family:'Unbounded';font-size:12px;letter-spacing:.14em;color:var(--accent);}
.kcp__h2{font-family:'Unbounded';font-weight:700;font-size:clamp(26px,3.2vw,42px);letter-spacing:-.02em;line-height:1.12;margin:14px 0 0;}
.kcp__sub{color:var(--muted);font-size:17px;line-height:1.6;max-width:640px;margin-top:14px;}
/* HERO */
.kcp__hero{padding:70px 6vw 0;max-width:1280px;margin:0 auto;}
.kcp__hero-in{max-width:900px;}
.kcp__back{display:inline-block;color:var(--muted);text-decoration:none;font-size:14px;font-weight:600;margin-bottom:34px;transition:.2s;}
.kcp__back:hover{color:var(--accent);}
.kcp__hero .kcp__eyebrow{margin-bottom:18px;}
.kcp__title{font-family:'Unbounded';font-weight:800;font-size:clamp(40px,7vw,88px);letter-spacing:-.03em;line-height:1;margin-bottom:24px;}
.kcp__lead{font-size:clamp(18px,2vw,22px);line-height:1.55;color:#d8d6d1;max-width:760px;}
.kcp__tags{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 18px;}
.kcp__tag{font-family:'Manrope',Arial,sans-serif;font-weight:600;font-size:9px;line-height:1;text-transform:uppercase;letter-spacing:.14em;color:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.22);border-radius:4px;padding:5px 8px;white-space:nowrap;}
@media (max-width:480px){ .kcp__tag{font-size:8px;padding:5px 7px;} .kcp__tags{gap:5px;margin-bottom:14px;} }
.kcp__facts{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:14px;overflow:hidden;margin-top:44px;}
.kcp__fact{background:var(--raise);padding:20px 22px;display:flex;flex-direction:column;gap:7px;}
.kcp__fact span{font-size:12px;color:var(--faint);text-transform:uppercase;letter-spacing:.06em;}
.kcp__fact b{font-family:'Unbounded';font-weight:600;font-size:14px;line-height:1.3;}
.kcp__cover{margin:48px auto 0;max-width:1280px;aspect-ratio:16/8;border-radius:20px;}
/* SECTIONS */
.kcp__sec{max-width:1080px;margin:0 auto;padding:64px 6vw;}
.kcp__grid2{display:grid;grid-template-columns:0.85fr 1.15fr;gap:48px;align-items:start;}
.kcp__prose p{color:#c9c7c2;font-size:17px;margin-bottom:16px;}
.kcp__prose p:last-child{margin-bottom:0;}
.kcp__prose b{color:var(--text);font-weight:600;}
/* CALLOUT */
.kcp__callout{background:linear-gradient(135deg,rgba(109,93,251,.10),rgba(109,93,251,.02));border:1px solid rgba(109,93,251,.3);border-radius:18px;padding:40px 44px;}
.kcp__callout-k{font-family:'Unbounded';font-size:12px;letter-spacing:.14em;color:var(--accent);margin-bottom:14px;}
.kcp__callout-t{font-family:'Unbounded';font-weight:600;font-size:clamp(20px,2.4vw,30px);line-height:1.35;letter-spacing:-.01em;}
/* TIMELINE */
.kcp__timeline{list-style:none;margin-top:44px;display:flex;flex-direction:column;gap:26px;}
.kcp__step{display:grid;grid-template-columns:88px 1fr;gap:26px;background:var(--raise);border:1px solid var(--border);border-radius:18px;padding:30px 32px;transition:.25s;}
.kcp__step:hover{border-color:rgba(109,93,251,.4);}
.kcp__step-num{font-family:'Unbounded';font-weight:700;font-size:34px;color:var(--accent);line-height:1;opacity:.85;}
.kcp__step-body h3{font-family:'Unbounded';font-weight:600;font-size:22px;letter-spacing:-.01em;margin-bottom:12px;}
.kcp__step-body p{color:#c4c2bd;font-size:16px;}
.kcp__step--next{background:transparent;border-style:dashed;}
.kcp__step--next .kcp__step-num{opacity:1;}
/* PLACEHOLDERS */
.kcp__ph{position:relative;background:repeating-linear-gradient(45deg,#141416,#141416 12px,#17171a 12px,#17171a 24px);border:2px dashed #38383e;border-radius:14px;min-height:150px;display:flex;align-items:center;justify-content:center;text-align:center;}
.kcp__ph-label{color:#8a8a90;font-size:13px;font-weight:600;line-height:1.5;padding:16px;}
.kcp__ph-label small{color:var(--faint);font-weight:500;}
.kcp__ph--wide{margin-top:18px;aspect-ratio:16/8;min-height:0;}
.kcp__ph--grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:18px;background:none;border:none;padding:0;}
.kcp__ph--grid .kcp__ph{aspect-ratio:4/3;min-height:0;}
.kcp__cover.kcp__ph{aspect-ratio:16/8;}
/* BEFORE/AFTER */
.kcp__ba{position:relative;margin-top:20px;aspect-ratio:16/9;border-radius:16px;overflow:hidden;border:1px solid var(--border);user-select:none;}
.kcp__ba-after,.kcp__ba-before{position:absolute;inset:0;border-radius:0;border:none;}
.kcp__ba-before{width:100%;clip-path:inset(0 50% 0 0);}
.kcp__ba-handle{position:absolute;top:0;bottom:0;left:50%;width:2px;background:var(--accent);cursor:ew-resize;transform:translateX(-1px);}
.kcp__ba-handle span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:40px;height:40px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(0,0,0,.4);}
.kcp__ba-handle span::before{content:'⟷';color:#000;font-size:18px;font-weight:700;}
.kcp__ba-tag{position:absolute;top:14px;font-family:'Unbounded';font-size:11px;letter-spacing:.1em;background:rgba(0,0,0,.6);padding:5px 11px;border-radius:6px;}
.kcp__ba-tag--l{left:14px;}
.kcp__ba-tag--r{right:14px;}
.kcp__ba-hint{text-align:center;color:var(--faint);font-size:13px;margin-top:12px;}
/* RESULT */
.kcp__result-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:34px;}
.kcp__rcard{background:var(--raise);border:1px solid var(--border);border-radius:16px;padding:26px 28px;}
.kcp__rc-t{font-family:'Unbounded';font-weight:600;font-size:18px;color:var(--accent);margin-bottom:10px;}
.kcp__rcard p{color:#c4c2bd;font-size:15px;}
/* CHIPS */
.kcp__chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;}
.kcp__chips span{font-family:'Manrope';font-weight:600;font-size:14px;color:var(--text);background:rgba(109,93,251,.08);border:1px solid rgba(109,93,251,.4);border-radius:8px;padding:10px 16px;}
/* VIDEO */
.kcp__video{margin-top:24px;aspect-ratio:16/9;border-radius:18px;overflow:hidden;border:1px solid var(--border);background:#000;}
.kcp__video iframe{width:100%;height:100%;border:none;}
/* CTA */
.kcp__vid2{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px;}
.kcp__vid2 .kcp__ph{aspect-ratio:16/9;min-height:0;margin-top:0;}
.kcp__letter{margin-top:26px;max-width:440px;}
.kcp__letter img{display:block;width:100%;height:auto;border-radius:14px;border:1px solid var(--border);}
.kcp__more{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:28px;}
.kcp__more-card{display:block;background:var(--raise);border:1px solid var(--border);border-radius:16px;padding:24px 26px;text-decoration:none;transition:.2s;}
.kcp__more-card:hover{border-color:var(--accent);}
.kcp__more-card span{display:block;font-size:12px;letter-spacing:2px;color:var(--accent);text-transform:uppercase;margin-bottom:10px;}
.kcp__more-card b{display:block;font-family:'Unbounded',sans-serif;font-weight:700;font-size:22px;line-height:1.2;color:var(--text);margin-bottom:8px;}
.kcp__more-card i{font-style:normal;font-size:15px;color:var(--muted);}
@media (max-width:640px){.kcp__vid2{grid-template-columns:1fr;}.kcp__more{grid-template-columns:1fr;}}
/* --- Галерея разворотов презентации --- */
.kcp__gal{margin-top:18px;}
.kcp__galhead{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:12px;}
.kcp__galtabs{display:inline-flex;gap:4px;background:var(--soft);border:1px solid var(--border);border-radius:9px;padding:4px;}
.kcp__galtab{padding:7px 18px;border:none;background:none;color:var(--muted);font-family:'Manrope',Arial,sans-serif;font-weight:600;font-size:13px;line-height:1;letter-spacing:1.2px;border-radius:6px;cursor:pointer;transition:.2s;}
.kcp__galtab:hover{color:var(--text);}
.kcp__galtab.is-on{background:var(--accent);color:#fff;}
.kcp__galnote{margin-top:14px;font-size:13px;line-height:1.5;color:var(--muted);letter-spacing:.3px;}
.kcp__galnav{display:flex;gap:8px;flex-shrink:0;}
.kcp__galarrow{width:40px;height:40px;border:1px solid var(--border);background:var(--raise);border-radius:4px;color:var(--text);font:20px/1 Arial,sans-serif;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.2s;padding:0;}
.kcp__galarrow:hover{border-color:var(--accent);color:var(--accent);}
.kcp__galarrow:disabled{opacity:.3;cursor:default;border-color:var(--border);color:var(--text);}
.kcp__galtrack{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:4px;}
.kcp__galtrack::-webkit-scrollbar{display:none;}
.kcp__galcard{flex:0 0 calc((100% - 24px)/3);scroll-snap-align:start;display:block;padding:0;margin:0;border:1px solid var(--border);background:var(--raise);border-radius:10px;overflow:hidden;cursor:zoom-in;aspect-ratio:1200/873;transition:.2s;font:inherit;}
.kcp__galcard:hover{border-color:var(--accent);}
.kcp__galcard img{width:100%;height:100%;object-fit:cover;display:block;}
/* --- Лайтбокс --- */
.kcp__lb{position:fixed;inset:0;z-index:99999;display:none;align-items:center;justify-content:center;padding:64px 40px;}
.kcp__lb.open{display:flex;}
.kcp__lbbd{position:absolute;inset:0;background:rgba(4,4,6,.9);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);}
.kcp__lbbox{position:relative;width:auto;max-width:min(1100px,100%);display:flex;align-items:center;justify-content:center;}
.kcp__lbbox img{display:block;max-width:100%;max-height:calc(100vh - 170px);width:auto;height:auto;border-radius:10px;background:#0f0f11;}
.kcp__lbx{position:absolute;top:-48px;right:0;width:38px;height:38px;border-radius:9px;background:var(--raise);border:1px solid var(--border);color:var(--text);font:20px/1 Arial,sans-serif;cursor:pointer;padding:0;}
.kcp__lbx:hover{border-color:var(--accent);color:var(--accent);}
.kcp__lbnav{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;background:rgba(20,20,22,.85);border:1px solid var(--border);color:var(--text);font:22px/1 Arial,sans-serif;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.2s;padding:0;}
.kcp__lbnav:hover{border-color:var(--accent);color:var(--accent);}
.kcp__lbnav--prev{left:10px;}
.kcp__lbnav--next{right:10px;}
.kcp__lbcount{position:absolute;bottom:-36px;left:50%;transform:translateX(-50%);font-size:13px;color:var(--muted);letter-spacing:.4px;white-space:nowrap;}
@media (max-width:820px){.kcp__galcard{flex:0 0 calc((100% - 12px)/2);}.kcp__lb{padding:60px 12px;}.kcp__lbnav{width:40px;height:40px;}}
@media (max-width:480px){.kcp__galcard{flex:0 0 82%;}.kcp__galnav{display:none;}.kcp__galhead{margin-bottom:10px;}}
.kcp__cta{max-width:900px;margin:20px auto 0;padding:80px 6vw 96px;text-align:center;}
.kcp__cta h2{font-family:'Unbounded';font-weight:700;font-size:clamp(26px,3.4vw,42px);letter-spacing:-.02em;margin-bottom:16px;}
.kcp__cta p{color:var(--muted);font-size:18px;margin-bottom:30px;}
.kcp__cta-btn{display:inline-block;background:var(--accent);color:#fff;text-decoration:none;font-family:'Manrope';font-weight:700;font-size:16px;padding:18px 38px;border-radius:10px;transition:.25s;}
.kcp__cta-btn:hover{transform:translateY(-2px);box-shadow:0 14px 34px var(--glow);}
@media (max-width:820px){
  .kcp__facts{grid-template-columns:1fr 1fr;}
  .kcp__grid2{grid-template-columns:1fr;gap:20px;}
  .kcp__step{grid-template-columns:1fr;gap:14px;padding:24px 22px;}
  .kcp__step-num{font-size:28px;}
  .kcp__result-grid{grid-template-columns:1fr;}
  .kcp__ph--grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:480px){
  .kcp__hero{padding:48px 20px 0;}
  .kcp__sec{padding:48px 20px;}
  .kcp__facts{grid-template-columns:1fr;}
  .kcp__callout{padding:28px 24px;}
}
/* заполненные слоты (картинка/видео из конфига) */
.kcp [data-img].kcp--filled,.kcp [data-video].kcp--filled{background:none;border:none;}
.kcp [data-img] img,.kcp [data-video] img{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit;}
.kcp [data-fit="contain"] img{object-fit:contain;background:#0f0f11;padding:6%;}
.kcp [data-video].kcp--filled iframe{width:100%;height:100%;border:none;display:block;}
.kcp__ph.kcp--filled{padding:0;}
</style>
<script>
(function(){
  var C=window.KORS_CASE||{}; var IMG=C.images||{}, VID=C.videos||{};
  document.querySelectorAll('.kcp [data-video]').forEach(function(el){
    var id=VID[el.getAttribute('data-video')];
    if(id){ el.classList.add('kcp--filled'); el.innerHTML='<iframe src="https://kinescope.io/embed/'+id+'" allow="autoplay; fullscreen; encrypted-media; picture-in-picture" allowfullscreen frameborder="0"></iframe>'; el.removeAttribute('data-img'); }
  });
  document.querySelectorAll('.kcp [data-img]').forEach(function(el){
    var url=IMG[el.getAttribute('data-img')];
    if(url){ el.classList.add('kcp--filled'); el.innerHTML='<img src="'+url+'" alt="">'; }
  });
})();
(function(){
  // Слайдер до/после
  var ba=document.getElementById('kcpBA'); if(!ba) return;
  var before=document.getElementById('kcpBABefore');
  var handle=document.getElementById('kcpBAHandle');
  var dragging=false;
  function setPos(clientX){
    var r=ba.getBoundingClientRect();
    var x=Math.max(0,Math.min(clientX-r.left,r.width));
    var pct=(x/r.width)*100;
    before.style.clipPath='inset(0 '+(100-pct)+'% 0 0)';
    handle.style.left=pct+'%';
  }
  handle.addEventListener('mousedown',function(){dragging=true;});
  window.addEventListener('mouseup',function(){dragging=false;});
  window.addEventListener('mousemove',function(e){ if(dragging) setPos(e.clientX); });
  handle.addEventListener('touchstart',function(){dragging=true;},{passive:true});
  window.addEventListener('touchend',function(){dragging=false;});
  window.addEventListener('touchmove',function(e){ if(dragging&&e.touches[0]) setPos(e.touches[0].clientX); },{passive:true});
  ba.addEventListener('click',function(e){ setPos(e.clientX); });
})();

(function(){
  var C=window.KORS_CASE||{}, SL=C.slides||[];
  var lb=document.getElementById('kcpLb'), lbi=document.getElementById('kcpLbImg'), lbc=document.getElementById('kcpLbCount');
  if(!lb||!lbi) return;
  var list=[], idx=0;
  function render(){ lbi.src=list[idx]; lbi.alt='Разворот '+(idx+1)+' из '+list.length; if(lbc) lbc.textContent=(idx+1)+' / '+list.length; }
  function open(arr,i){ list=arr; idx=i; lb.classList.add('open'); lb.setAttribute('aria-hidden','false'); document.documentElement.style.overflow='hidden'; render(); }
  function close(){ lb.classList.remove('open'); lb.setAttribute('aria-hidden','true'); document.documentElement.style.overflow=''; lbi.removeAttribute('src'); }
  function go(d){ if(list.length<2) return; idx=(idx+d+list.length)%list.length; render(); }
  window.kcpLightbox={open:open};
  var gal=document.querySelector('.kcp [data-gallery]');
  var SETS=[{id:'ru',label:'RU',items:SL},{id:'en',label:'EN',items:C.slidesEn||[]}].filter(function(x){return x.items&&x.items.length;});
  if(gal && SETS.length){
    var ph=gal.parentNode.querySelector('[data-img="presentation"]');
    if(ph) ph.style.display='none';
    var tabs=SETS.length>1 ? '<div class="kcp__galtabs" role="tablist">'+SETS.map(function(s,i){return '<button class="kcp__galtab'+(i===0?' is-on':'')+'" data-lang="'+s.id+'" role="tab" aria-selected="'+(i===0)+'">'+s.label+'</button>';}).join('')+'</div>' : '<span></span>';
    gal.innerHTML='<div class="kcp__galhead">'+tabs+'<div class="kcp__galnav"><button class="kcp__galarrow" data-gprev aria-label="Назад">&#8249;</button><button class="kcp__galarrow" data-gnext aria-label="Вперёд">&#8250;</button></div></div><div class="kcp__galtrack"></div><div class="kcp__galnote"></div>';
    var track=gal.querySelector('.kcp__galtrack'), note=gal.querySelector('.kcp__galnote');
    var gp=gal.querySelector('[data-gprev]'), gn=gal.querySelector('[data-gnext]');
    var cur=SETS[0];
    function noteText(){
      var ru=SETS.filter(function(s){return s.id==='ru';})[0], en=SETS.filter(function(s){return s.id==='en';})[0];
      if(ru&&en) return (ru.items.length===en.items.length?'По '+ru.items.length+' разворотов в русской и английской версии':ru.items.length+' разворотов на русском и '+en.items.length+' на английском')+' - нажмите на разворот, чтобы рассмотреть';
      return cur.items.length+' разворотов - нажмите на разворот, чтобы рассмотреть';
    }
    function fill(){
      var h='';
      for(var i=0;i<cur.items.length;i++){ h+='<button class="kcp__galcard" data-gi="'+i+'" aria-label="Разворот '+(i+1)+' из '+cur.items.length+'"><img src="'+cur.items[i]+'" alt="Разворот '+(i+1)+' печатной презентации «Одоевские консервы»'+(cur.id==='en'?', английская версия':'')+'" loading="lazy"></button>'; }
      track.innerHTML=h; track.scrollLeft=0; note.textContent=noteText(); setTimeout(upd,60);
    }
    function step(){ var c=track.querySelector('.kcp__galcard'); return c?c.offsetWidth+12:320; }
    function upd(){ gp.disabled=track.scrollLeft<8; gn.disabled=track.scrollLeft+track.clientWidth>=track.scrollWidth-8; }
    gp.addEventListener('click',function(){ track.scrollLeft-=step(); });
    gn.addEventListener('click',function(){ track.scrollLeft+=step(); });
    track.addEventListener('scroll',upd); window.addEventListener('resize',upd);
    track.addEventListener('click',function(e){ var b=e.target&&e.target.closest?e.target.closest('.kcp__galcard'):null; if(!b) return; open(cur.items, parseInt(b.getAttribute('data-gi'),10)||0); });
    var tabEls=gal.querySelectorAll('.kcp__galtab');
    Array.prototype.forEach.call(tabEls,function(t){
      t.addEventListener('click',function(){
        var id=t.getAttribute('data-lang');
        var next=SETS.filter(function(s){return s.id===id;})[0];
        if(!next||next===cur) return;
        cur=next;
        Array.prototype.forEach.call(tabEls,function(o){ var on=o===t; o.classList.toggle('is-on',on); o.setAttribute('aria-selected',on); });
        fill();
      });
    });
    fill();
  }
  var x=document.getElementById('kcpLbx'); if(x) x.addEventListener('click',close);
  var pv=document.getElementById('kcpLbPrev'); if(pv) pv.addEventListener('click',function(e){ e.stopPropagation(); go(-1); });
  var nx=document.getElementById('kcpLbNext'); if(nx) nx.addEventListener('click',function(e){ e.stopPropagation(); go(1); });
  lb.addEventListener('click',function(e){ if(e.target===lbi) return; if(e.target&&e.target.closest&&e.target.closest('.kcp__lbnav,.kcp__lbx')) return; close(); });
  document.addEventListener('keydown',function(e){ if(!lb.classList.contains('open')) return; if(e.key==='Escape'||e.keyCode===27) close(); else if(e.key==='ArrowLeft'||e.keyCode===37) go(-1); else if(e.key==='ArrowRight'||e.keyCode===39) go(1); });
  var sx=0, sy=0;
  lb.addEventListener('touchstart',function(e){ if(!e.touches[0]) return; sx=e.touches[0].clientX; sy=e.touches[0].clientY; },{passive:true});
  lb.addEventListener('touchend',function(e){ var t=e.changedTouches&&e.changedTouches[0]; if(!t) return; var dx=t.clientX-sx, dy=t.clientY-sy; if(Math.abs(dx)>45&&Math.abs(dx)>Math.abs(dy)) go(dx<0?1:-1); },{passive:true});
})();
</script>

rec2699474201 (40714 симв.)

<!-- ================================================================
     KORS · СТРАНИЦА-КЕЙС · ОДОЕВСКИЕ КОНСЕРВЫ
     ── ЗАПОЛНЕНИЕ ──────────────────────────────────────────────────
     Всё фото/видео вставляется В ОДНОМ МЕСТЕ - в списке ниже (KORS_CASE).
     • Картинки: вставь ссылку на изображение в кавычки. Пусто '' = заглушка.
       Где взять ссылку: загрузи фото в Tilda (Файл-менеджер сайта или любой
       блок «Изображение») и скопируй URL картинки; либо любой прямой URL.
     • Видео: впиши ID ролика Kinescope (часть после kinescope.io/… ). Пусто = заглушка.
     Больше нигде в коде править не нужно - слоты подтянутся сами.
     ================================================================ -->
<script>
window.KORS_CASE = {
  images: {
    cover:        'https://static.tildacdn.com/tild3563-6163-4139-a463-386164356466/odoev-cover-film-128.jpg',   // большая обложка вверху (гориз. фото/визуал)
    firstShoot:   '',   // шаг 01 - кадр первой съёмки начинки (если без видео)
    firstShoot2:  '',   // шаг 01 - кадр второй съёмки начинки (если без видео)
presentation: '',   // шаг 02 - одиночная картинка-запасной вариант (используется, только если slides пуст)
    factoryPhoto: '',   // шаг 03 - фото производства (если без видео)
    product1:     'https://static.tildacdn.com/tild3538-6336-4331-b630-393965653763/odoevskie-nachinki-1.jpg',   // шаг 04 - фото продукции 1
    product2:     'https://static.tildacdn.com/tild6462-3535-4432-b266-653436663333/odoevskie-kruasan-12.jpg',   // шаг 04 - фото продукции 2
    product3:     'https://static.tildacdn.com/tild6462-3131-4336-a237-366662616565/odoevskie-laboratori.jpg',   // шаг 04 - фото цеха/процесса
    logoBefore:   'https://static.tildacdn.com/tild6462-3439-4365-a261-333634373338/odoevskie-logo-do-12.jpg',   // шаг 05 - СТАРЫЙ логотип (до)
    logoAfter:    'https://static.tildacdn.com/tild6338-3131-4439-b966-623739303361/odoevskie-logo-posle.jpg',   // шаг 05 - НОВЫЙ логотип (после)
    brand1:       '',   // шаг 06 - визитки
    brand2:       'https://static.tildacdn.com/tild6162-3336-4666-a338-323336396465/odoev-otkrytka-vesna.jpg',   // шаг 06 - открытки
    brand3:       'https://static.tildacdn.com/tild6632-3465-4634-b861-393137323563/odoevskie-priglasite.jpg',   // шаг 06 - др. носители
    siteShots:    ''    // шаг 07 - скриншоты povidlo.su и povidlo.pro
  },
  // Визитки для шага 06. Две карточки, открываются в том же лайтбоксе, что и развороты.
  // Пусто - используется одиночный слот images.brand1.
  cards: [
    'https://static.tildacdn.com/tild3261-6362-4033-a662-393031353131/odoev-vizitka-ivanov.jpg',
    'https://static.tildacdn.com/tild6232-3936-4463-a637-333436386635/odoev-vizitka-veklic.jpg'
  ],
  // Развороты печатной презентации для шага 02. Два комплекта, переключаются вкладками RU/EN.
  // Порядок = порядок в галерее. Пусто в slides - в слоте останется заглушка,
  // пусто в slidesEn - вкладка EN не показывается.
  slides: [
    'https://static.tildacdn.com/tild3839-6265-4534-b632-383934363939/odoev-pres-01.jpg',
    'https://static.tildacdn.com/tild6365-3736-4633-b638-623535336533/odoev-pres-02.jpg',
    'https://static.tildacdn.com/tild3861-3537-4062-b638-623737303666/odoev-pres-03.jpg',
    'https://static.tildacdn.com/tild3739-3733-4737-a439-373962306636/odoev-pres-04.jpg',
    'https://static.tildacdn.com/tild6131-3763-4633-a632-383430346635/odoev-pres-05.jpg',
    'https://static.tildacdn.com/tild6238-3563-4662-b936-343165656562/odoev-pres-06.jpg',
    'https://static.tildacdn.com/tild6330-3263-4431-b136-306366623031/odoev-pres-07.jpg',
    'https://static.tildacdn.com/tild3263-6531-4663-b630-316431303234/odoev-pres-08.jpg',
    'https://static.tildacdn.com/tild3032-6661-4835-b932-613834373837/odoev-pres-09.jpg',
    'https://static.tildacdn.com/tild6439-3366-4065-b763-343465383338/odoev-pres-10.jpg',
    'https://static.tildacdn.com/tild3431-3232-4331-a661-653335363963/odoev-pres-11.jpg',
    'https://static.tildacdn.com/tild3239-6231-4336-a531-363563343563/odoev-pres-12.jpg',
    'https://static.tildacdn.com/tild3231-6331-4262-b262-363063643633/odoev-pres-13.jpg',
    'https://static.tildacdn.com/tild6537-3532-4534-a166-623232326538/odoev-pres-14.jpg',
    'https://static.tildacdn.com/tild3763-3332-4665-b631-353963643534/odoev-pres-15.jpg',
    'https://static.tildacdn.com/tild3439-6161-4537-a531-633864306164/odoev-pres-16.jpg'
  ],
  slidesEn: [
    'https://static.tildacdn.com/tild6132-3033-4436-b735-343631343130/odoev-pres-en-01.jpg',
    'https://static.tildacdn.com/tild3832-3935-4631-b631-366464363039/odoev-pres-en-02.jpg',
    'https://static.tildacdn.com/tild3332-3761-4538-b430-333335363031/odoev-pres-en-03.jpg',
    'https://static.tildacdn.com/tild6566-3932-4236-b365-323064646265/odoev-pres-en-04.jpg',
    'https://static.tildacdn.com/tild3238-6164-4730-b662-366261353863/odoev-pres-en-05.jpg',
    'https://static.tildacdn.com/tild3939-3332-4437-a131-643238343734/odoev-pres-en-06.jpg',
    'https://static.tildacdn.com/tild6264-3134-4561-a333-646630626136/odoev-pres-en-07.jpg',
    'https://static.tildacdn.com/tild3463-6639-4532-b364-636338303939/odoev-pres-en-08.jpg',
    'https://static.tildacdn.com/tild6634-3632-4239-a463-363462323464/odoev-pres-en-09.jpg',
    'https://static.tildacdn.com/tild3434-3061-4432-b663-386464313137/odoev-pres-en-10.jpg',
    'https://static.tildacdn.com/tild6265-6534-4335-a130-306462656133/odoev-pres-en-11.jpg',
    'https://static.tildacdn.com/tild6332-6135-4762-a135-303166363439/odoev-pres-en-12.jpg',
    'https://static.tildacdn.com/tild3930-3535-4231-a436-326336303337/odoev-pres-en-13.jpg',
    'https://static.tildacdn.com/tild3335-3832-4730-b466-393065656433/odoev-pres-en-14.jpg',
    'https://static.tildacdn.com/tild3934-3966-4931-a466-613731333338/odoev-pres-en-15.jpg',
    'https://static.tildacdn.com/tild6465-3432-4361-b464-343863303862/odoev-pres-en-16.jpg'
  ],
  videos: {
    firstShoot:   'sRyZwPm3BS9CVspVi2sLx3',   // шаг 01 - ролик «Термостабильные начинки»
    firstShoot2:  'mZiwnH9uZAdc15hhRsqPvB',    // шаг 01 - ролик «Нетермостабильные начинки»
    factory:      '3ZsxHkdEuHUubxSAQZDRyG',    // шаг 03 - фильм о заводе, полная версия
    main:         'j8Pq4wWMNTPm6Js8UQiM1n'     // блок «Видео проекта»
  }
};
</script>
<div class="kcp">
  <!-- ===== HERO ===== -->
  <header class="kcp__hero">
    <div class="kcp__hero-in">
      <a class="kcp__back" href="/#rec2667018101">← Все проекты</a>
      <div class="kcp__eyebrow">КЕЙС · ПИЩЕВОЕ ПРОИЗВОДСТВО</div>
      <h1 class="kcp__title">Одоевские консервы</h1>
      <div class="kcp__tags"><span class="kcp__tag">Видео</span><span class="kcp__tag">Фотосъёмка</span><span class="kcp__tag">Презентация</span><span class="kcp__tag">Фирменный стиль</span><span class="kcp__tag">Сайт</span></div>
      <p class="kcp__lead">Как из одной видеосъёмки вырос полный комплект материалов - от роликов и фотосъёмки до нового логотипа, фирменного стиля и двух сайтов: русского и экспортного, под рынок ОАЭ.</p>
      <div class="kcp__facts">
        <div class="kcp__fact"><span>Сфера</span><b>Пищевое производство · B2B</b></div>
        <div class="kcp__fact"><span>С чего начали</span><b>Видеосъёмка продукта</b></div>
        <div class="kcp__fact"><span>Где сейчас</span><b>povidlo.su + povidlo.pro</b></div>
        <div class="kcp__fact"><span>Формат</span><b>полный комплект материалов</b></div>
      </div>
    </div>
    <!-- ВСТАВИТЬ: большое обложечное фото/видео (завод, продукция или кадр со съёмки). Пока заглушка. -->
    <div class="kcp__cover kcp__ph" data-img="cover"><div class="kcp__ph-label">📷 Обложка: фото продукции / кадр со съёмки (16:9)</div></div>
  </header>
  <!-- ===== КТО КЛИЕНТ ===== -->
  <section class="kcp__sec">
    <div class="kcp__grid2">
      <div>
        <div class="kcp__kick">- О КОМПАНИИ</div>
        <h2 class="kcp__h2">Сильное производство, которое было не видно</h2>
      </div>
      <div class="kcp__prose">
        <p>«Одоевские консервы» - производитель из посёлка Одоев в Тульской области. Уже более двадцати лет компания выпускает термостабильные фруктово-ягодные начинки, повидло, джемы, конфитюры, пюре и наполнители для хлебопекарной, кондитерской и молочной промышленности.</p>
        <p>Это классический B2B: их продукт - ингредиент, который живёт <b>внутри</b> чужих изделий. Начинка в круассане, повидло в печенье, наполнитель в йогурте. Продукт качественный, производство серьёзное - но со стороны этого масштаба не было видно.</p>
        <p>Видео, сайт, презентация и фирменные материалы существовали разрозненно и не складывались в единую картину. Компанию нельзя было «показать» - только долго объяснять на словах.</p>
      </div>
    </div>
  </section>
  <!-- ===== ЗАДАЧА (акцентная плашка) ===== -->
  <section class="kcp__sec">
    <div class="kcp__callout">
      <div class="kcp__callout-k">ЗАДАЧА</div>
      <div class="kcp__callout-t">Показать масштаб и качество производства так, чтобы партнёр видел уровень компании за несколько минут - а не верил на слово.</div>
    </div>
  </section>
  <!-- ===== ТАЙМЛАЙН РАБОТЫ ===== -->
  <section class="kcp__sec">
    <div class="kcp__kick">- КАК ШЛА РАБОТА</div>
    <h2 class="kcp__h2">Из одной съёмки - в полный цикл</h2>
    <p class="kcp__sub">Сотрудничество началось с одного ролика и постепенно выросло в полный комплект материалов. Вот путь шаг за шагом.</p>
    <ol class="kcp__timeline">
      <li class="kcp__step">
        <div class="kcp__step-num">01</div>
        <div class="kcp__step-body">
          <h3>Первые видео на начинке</h3>
          <p>Начали с двух роликов о продукте. Сняли начинку «в деле» - текстуру, цвет, как она работает в готовом изделии. Это первое, что показывает потенциальному партнёру, что перед ним - качественный ингредиент.</p>
          <!-- Два ролика первой съёмки. ID берутся из KORS_CASE.videos (firstShoot / firstShoot2). -->
          <div class="kcp__vid2">
            <div class="kcp__ph" data-video="firstShoot" data-img="firstShoot"><div class="kcp__ph-label">🎬 Термостабильные начинки</div></div>
            <div class="kcp__ph" data-video="firstShoot2" data-img="firstShoot2"><div class="kcp__ph-label">🎬 Нетермостабильные начинки</div></div>
          </div>
        </div>
      </li>
      <li class="kcp__step">
        <div class="kcp__step-num">02</div>
        <div class="kcp__step-body">
          <h3>Печатная презентация</h3>
          <p>Собрали продукт и производство в понятную структуру - презентацию для переговоров и выставок. Разложили ассортимент, преимущества и мощности так, чтобы менеджеру было легко показать компанию клиенту.</p>
          <!-- Галерея разворотов: ссылки в KORS_CASE.slides. Клик по развороту открывает его на весь экран. -->
          <div class="kcp__gal" data-gallery></div>
          <div class="kcp__ph kcp__ph--wide" data-img="presentation"><div class="kcp__ph-label">📑 Развороты печатной презентации</div></div>
        </div>
      </li>
      <li class="kcp__step">
        <div class="kcp__step-num">03</div>
        <div class="kcp__step-body">
          <h3>Видео о заводе</h3>
          <p>Сняли само производство: масштаб цехов, оборудование, процессы. Именно это видео закрывает главный вопрос B2B-клиента - «а справятся ли по объёму и качеству». Масштаб теперь виден, а не описан словами.</p>
          <div class="kcp__ph kcp__ph--wide" data-video="factory" data-img="factoryPhoto"><div class="kcp__ph-label">🎬 Видео о заводе / кадры производства</div></div>
        </div>
      </li>
      <li class="kcp__step">
        <div class="kcp__step-num">04</div>
        <div class="kcp__step-body">
          <h3>Фотосъёмка для презентации и каталога</h3>
          <p>Сделали предметную и производственную фотосъёмку - продукция, упаковка, цеха. Единый визуальный ряд, который лёг в презентацию, каталог и дальнейшие материалы.</p>
          <div class="kcp__ph kcp__ph--grid">
            <div class="kcp__ph" data-img="product1"><div class="kcp__ph-label">📷 фото продукции 1</div></div>
            <div class="kcp__ph" data-img="product2"><div class="kcp__ph-label">📷 фото продукции 2</div></div>
            <div class="kcp__ph" data-img="product3"><div class="kcp__ph-label">📷 фото цеха / процесса</div></div>
          </div>
        </div>
      </li>
      <li class="kcp__step">
        <div class="kcp__step-num">05</div>
        <div class="kcp__step-body">
          <h3>Новый логотип: до / после</h3>
          <p>Обновили логотип - сохранили узнаваемость, но привели к современному виду, который одинаково хорошо работает на упаковке, в презентации и на сайте. Сравните сами:</p>
          <!-- ДО/ПОСЛЕ слайдер. ВСТАВИТЬ 2 картинки логотипа: старый и новый -->
          <div class="kcp__ba" id="kcpBA">
            <div class="kcp__ba-after kcp__ph" data-img="logoAfter" data-fit="contain"><div class="kcp__ph-label">✅ НОВЫЙ логотип (после)</div></div>
            <div class="kcp__ba-before kcp__ph" id="kcpBABefore" data-img="logoBefore" data-fit="contain"><div class="kcp__ph-label">◻️ СТАРЫЙ логотип (до)</div></div>
            <div class="kcp__ba-handle" id="kcpBAHandle"><span></span></div>
            <div class="kcp__ba-tag kcp__ba-tag--l">ДО</div>
            <div class="kcp__ba-tag kcp__ba-tag--r">ПОСЛЕ</div>
          </div>
          <div class="kcp__ba-hint">Потяните ползунок влево-вправо, чтобы сравнить</div>
        </div>
      </li>
      <li class="kcp__step">
        <div class="kcp__step-num">06</div>
        <div class="kcp__step-body">
          <h3>Фирменный стиль: открытки, визитки, носители</h3>
          <p>Оформили фирменные носители - визитки, открытки и другие материалы в единой стилистике. Компания получила узнаваемый облик, который работает на каждой точке контакта.</p>
          <div class="kcp__cards" data-cards></div>
          <div class="kcp__ph kcp__ph--grid">
            <div class="kcp__ph" data-img="brand1"><div class="kcp__ph-label">📷 визитки</div></div>
            <div class="kcp__ph" data-img="brand2" data-fit="contain"><div class="kcp__ph-label">📷 открытки</div></div>
            <div class="kcp__ph" data-img="brand3" data-fit="contain"><div class="kcp__ph-label">📷 др. носители</div></div>
          </div>
        </div>
      </li>
      <li class="kcp__step">
        <div class="kcp__step-num">07</div>
        <div class="kcp__step-body">
          <h3>Два сайта: povidlo.su и povidlo.pro</h3>
          <p>Сделали не языковой переключатель, а два отдельных сайта. Русский - povidlo.su, под брендом «Одоевские консервы». Английский - povidlo.pro, под экспортным брендом POVIDLO: он собран под рынок ОАЭ и региона MENA, с отдельной структурой и своими акцентами.</p>
          <div class="kcp__ph kcp__ph--wide" data-img="siteShots"><div class="kcp__ph-label">💻 Скриншоты povidlo.su и povidlo.pro</div></div>
        </div>
      </li>
      <li class="kcp__step kcp__step--next">
        <div class="kcp__step-num">→</div>
        <div class="kcp__step-body">
          <h3>Что дальше</h3>
          <p>Следующий этап - застройка выставочного стенда (планируется на зиму). Сотрудничество продолжается: от продукта на экране - к тому, как компания выглядит вживую на выставке.</p>
        </div>
      </li>
    </ol>
  </section>
  <!-- ===== РЕЗУЛЬТАТ ===== -->
  <section class="kcp__sec">
    <div class="kcp__result">
      <div class="kcp__kick">- ЧТО ИЗМЕНИЛОСЬ</div>
      <h2 class="kcp__h2">Компанию теперь можно показать, а не пересказывать</h2>
      <div class="kcp__result-grid">
        <div class="kcp__rcard"><div class="kcp__rc-t">Единый комплект</div><p>Видео, фото, презентация, логотип, фирменный стиль и сайт - собраны в одну систему и работают вместе.</p></div>
        <div class="kcp__rcard"><div class="kcp__rc-t">Масштаб за минуты</div><p>Производство и уровень компании видно сразу - на переговорах, выставках и в презентации, без долгих объяснений.</p></div>
        <div class="kcp__rcard"><div class="kcp__rc-t">Экспортное направление</div><p>Экспорт и представительства в Грузии и ОАЭ. Англоязычный povidlo.pro - то, чем компания представляет себя в регионе MENA.</p></div>
        <div class="kcp__rcard"><div class="kcp__rc-t">Долгое партнёрство</div><p>Сотрудничество выросло из одной видеосъёмки в постоянную работу над материалами компании.</p></div>
      </div>
    </div>
  </section>
  <!-- ===== ЧТО ВОШЛО (услуги) ===== -->
  <section class="kcp__sec">
    <div class="kcp__kick">- ЧТО ВОШЛО В КОМПЛЕКТ</div>
    <div class="kcp__chips">
      <span>Видеопродакшн</span><span>Съёмка производства</span><span>Фотосъёмка</span><span>Печатная презентация</span><span>Редизайн логотипа</span><span>Фирменный стиль</span><span>Визитки и открытки</span><span>Сайт RU</span><span>Сайт EN (MENA)</span>
    </div>
  </section>
  <!-- ===== ВИДЕО КЕЙСА (СКРЫТ) ===== -->
  <!-- СЕКЦИЯ СКРЫТА 28.08.2026. Причина: на странице уже четыре ролика (два в шаге 01 и фильм о заводе в шаге 03).
       Разметка и ключ KORS_CASE.videos.main оставлены нетронутыми. Чтобы вернуть секцию, снимите этот комментарий.
       ID ролика подставляется из KORS_CASE.videos.main
  <section class="kcp__sec">
    <div class="kcp__kick">- СМОТРЕТЬ</div>
    <h2 class="kcp__h2">Видео проекта</h2>
    <div class="kcp__video" data-video="main"><div class="kcp__ph-label">🎬 Основной ролик проекта</div></div>
  </section>
  -->
  <!-- ===== ОТЗЫВ КЛИЕНТА ===== -->
  <section class="kcp__sec">
    <div class="kcp__kick">- ОТЗЫВ</div>
    <h2 class="kcp__h2">Благодарственное письмо</h2>
    <p class="kcp__sub">ООО «МастерДжем» - юридическое лицо «Одоевских консервов»</p>
    <div class="kcp__letter"><img src="https://static.tildacdn.com/tild3231-6563-4932-b139-373433306561/pismo-odoevskie-1200.jpg" alt="Благодарственное письмо от ООО «МастерДжем» (Одоевские консервы) команде KORS Production за фото- и видеосъёмку производства и материалы для сайта и презентаций" loading="lazy"></div>
  </section>
  <!-- ===== ДРУГИЕ КЕЙСЫ ===== -->
  <section class="kcp__sec">
    <div class="kcp__kick">- ЕЩЁ</div>
    <h2 class="kcp__h2">Другие кейсы</h2>
    <div class="kcp__more">
      <a class="kcp__more-card" href="/case-invoicebox"><span>Кейс</span><b>InvoiceBox</b><i>Видеоматериалы для платформы →</i></a>
      <a class="kcp__more-card" href="/case-vistex"><span>Кейс</span><b>Вистекс</b><i>Съёмка видео о предприятии →</i></a>
    </div>
  </section>
  <!-- ===== CTA ===== -->
  <section class="kcp__cta">
    <h2>Хотите так же показать своё производство?</h2>
    <p>Начнём с одного шага - а вырастем в полный цикл, если понравится результат.</p>
    <a class="kcp__cta-btn" href="#popup:zayavka">Обсудить проект →</a>
  </section>
  <!-- Лайтбокс. Тот же, что для благодарственных писем на главной, плюс листание. -->
  <div class="kcp__lb" id="kcpLb" aria-hidden="true">
    <div class="kcp__lbbd"></div>
    <div class="kcp__lbbox">
      <button class="kcp__lbx" id="kcpLbx" aria-label="Закрыть">×</button>
      <button class="kcp__lbnav kcp__lbnav--prev" id="kcpLbPrev" aria-label="Предыдущий">&#8249;</button>
      <img id="kcpLbImg" alt="">
      <button class="kcp__lbnav kcp__lbnav--next" id="kcpLbNext" aria-label="Следующий">&#8250;</button>
      <div class="kcp__lbcount" id="kcpLbCount"></div>
    </div>
  </div>
</div>
<style>
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Unbounded:wght@400;600;700;800&display=swap');
.kcp{--bg:#0C0C0E;--raise:#141416;--card:#1B1B1F;--border:#2A2A2E;--soft:#242428;--text:#F5F3EF;--muted:#9A9A9A;--faint:#6a6a6e;--accent:#6D5DFB;--glow:rgba(109,93,251,.14);
  box-sizing:border-box;background:var(--bg);color:var(--text);font-family:'Manrope',Arial,sans-serif;-webkit-font-smoothing:antialiased;}
.kcp *{box-sizing:border-box;margin:0;padding:0;}
.kcp p{line-height:1.65;}
.kcp__eyebrow,.kcp__kick{font-family:'Unbounded';font-size:12px;letter-spacing:.14em;color:var(--accent);}
.kcp__h2{font-family:'Unbounded';font-weight:700;font-size:clamp(26px,3.2vw,42px);letter-spacing:-.02em;line-height:1.12;margin:14px 0 0;}
.kcp__sub{color:var(--muted);font-size:17px;line-height:1.6;max-width:640px;margin-top:14px;}
/* HERO */
.kcp__hero{padding:70px 6vw 0;max-width:1280px;margin:0 auto;}
.kcp__hero-in{max-width:900px;}
.kcp__back{display:inline-block;color:var(--muted);text-decoration:none;font-size:14px;font-weight:600;margin-bottom:34px;transition:.2s;}
.kcp__back:hover{color:var(--accent);}
.kcp__hero .kcp__eyebrow{margin-bottom:18px;}
.kcp__title{font-family:'Unbounded';font-weight:800;font-size:clamp(40px,7vw,88px);letter-spacing:-.03em;line-height:1;margin-bottom:24px;}
.kcp__lead{font-size:clamp(18px,2vw,22px);line-height:1.55;color:#d8d6d1;max-width:760px;}
.kcp__tags{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 18px;}
.kcp__tag{font-family:'Manrope',Arial,sans-serif;font-weight:600;font-size:9px;line-height:1;text-transform:uppercase;letter-spacing:.14em;color:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.22);border-radius:4px;padding:5px 8px;white-space:nowrap;}
@media (max-width:480px){ .kcp__tag{font-size:8px;padding:5px 7px;} .kcp__tags{gap:5px;margin-bottom:14px;} }
.kcp__facts{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:14px;overflow:hidden;margin-top:44px;}
.kcp__fact{background:var(--raise);padding:20px 22px;display:flex;flex-direction:column;gap:7px;}
.kcp__fact span{font-size:12px;color:var(--faint);text-transform:uppercase;letter-spacing:.06em;}
.kcp__fact b{font-family:'Unbounded';font-weight:600;font-size:14px;line-height:1.3;}
.kcp__cover{margin:48px auto 0;max-width:1280px;aspect-ratio:16/8;border-radius:20px;}
/* SECTIONS */
.kcp__sec{max-width:1080px;margin:0 auto;padding:64px 6vw;}
.kcp__grid2{display:grid;grid-template-columns:0.85fr 1.15fr;gap:48px;align-items:start;}
.kcp__prose p{color:#c9c7c2;font-size:17px;margin-bottom:16px;}
.kcp__prose p:last-child{margin-bottom:0;}
.kcp__prose b{color:var(--text);font-weight:600;}
/* CALLOUT */
.kcp__callout{background:linear-gradient(135deg,rgba(109,93,251,.10),rgba(109,93,251,.02));border:1px solid rgba(109,93,251,.3);border-radius:18px;padding:40px 44px;}
.kcp__callout-k{font-family:'Unbounded';font-size:12px;letter-spacing:.14em;color:var(--accent);margin-bottom:14px;}
.kcp__callout-t{font-family:'Unbounded';font-weight:600;font-size:clamp(20px,2.4vw,30px);line-height:1.35;letter-spacing:-.01em;}
/* TIMELINE */
.kcp__timeline{list-style:none;margin-top:44px;display:flex;flex-direction:column;gap:26px;}
.kcp__step{display:grid;grid-template-columns:88px 1fr;gap:26px;background:var(--raise);border:1px solid var(--border);border-radius:18px;padding:30px 32px;transition:.25s;}
.kcp__step:hover{border-color:rgba(109,93,251,.4);}
.kcp__step-num{font-family:'Unbounded';font-weight:700;font-size:34px;color:var(--accent);line-height:1;opacity:.85;}
.kcp__step-body h3{font-family:'Unbounded';font-weight:600;font-size:22px;letter-spacing:-.01em;margin-bottom:12px;}
.kcp__step-body p{color:#c4c2bd;font-size:16px;}
.kcp__step--next{background:transparent;border-style:dashed;}
.kcp__step--next .kcp__step-num{opacity:1;}
/* PLACEHOLDERS */
.kcp__ph{position:relative;background:repeating-linear-gradient(45deg,#141416,#141416 12px,#17171a 12px,#17171a 24px);border:2px dashed #38383e;border-radius:14px;min-height:150px;display:flex;align-items:center;justify-content:center;text-align:center;}
.kcp__ph-label{color:#8a8a90;font-size:13px;font-weight:600;line-height:1.5;padding:16px;}
.kcp__ph-label small{color:var(--faint);font-weight:500;}
.kcp__ph--wide{margin-top:18px;aspect-ratio:16/8;min-height:0;}
.kcp__ph--grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:18px;background:none;border:none;padding:0;}
.kcp__ph--grid .kcp__ph{aspect-ratio:4/3;min-height:0;}
.kcp__cover.kcp__ph{aspect-ratio:16/8;}
/* BEFORE/AFTER */
.kcp__ba{position:relative;margin-top:20px;aspect-ratio:16/9;border-radius:16px;overflow:hidden;border:1px solid var(--border);user-select:none;}
.kcp__ba-after,.kcp__ba-before{position:absolute;inset:0;border-radius:0;border:none;}
.kcp__ba-before{width:100%;clip-path:inset(0 50% 0 0);}
.kcp__ba-handle{position:absolute;top:0;bottom:0;left:50%;width:2px;background:var(--accent);cursor:ew-resize;transform:translateX(-1px);}
.kcp__ba-handle span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:40px;height:40px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(0,0,0,.4);}
.kcp__ba-handle span::before{content:'⟷';color:#000;font-size:18px;font-weight:700;}
.kcp__ba-tag{position:absolute;top:14px;font-family:'Unbounded';font-size:11px;letter-spacing:.1em;background:rgba(0,0,0,.6);padding:5px 11px;border-radius:6px;}
.kcp__ba-tag--l{left:14px;}
.kcp__ba-tag--r{right:14px;}
.kcp__ba-hint{text-align:center;color:var(--faint);font-size:13px;margin-top:12px;}
/* RESULT */
.kcp__result-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:34px;}
.kcp__rcard{background:var(--raise);border:1px solid var(--border);border-radius:16px;padding:26px 28px;}
.kcp__rc-t{font-family:'Unbounded';font-weight:600;font-size:18px;color:var(--accent);margin-bottom:10px;}
.kcp__rcard p{color:#c4c2bd;font-size:15px;}
/* CHIPS */
.kcp__chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;}
.kcp__chips span{font-family:'Manrope';font-weight:600;font-size:14px;color:var(--text);background:rgba(109,93,251,.08);border:1px solid rgba(109,93,251,.4);border-radius:8px;padding:10px 16px;}
/* VIDEO */
.kcp__video{margin-top:24px;aspect-ratio:16/9;border-radius:18px;overflow:hidden;border:1px solid var(--border);background:#000;}
.kcp__video iframe{width:100%;height:100%;border:none;}
/* CTA */
.kcp__vid2{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px;}
.kcp__vid2 .kcp__ph{aspect-ratio:16/9;min-height:0;margin-top:0;}
.kcp__letter{margin-top:26px;max-width:440px;}
.kcp__letter img{display:block;width:100%;height:auto;border-radius:14px;border:1px solid var(--border);}
.kcp__more{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:28px;}
.kcp__more-card{display:block;background:var(--raise);border:1px solid var(--border);border-radius:16px;padding:24px 26px;text-decoration:none;transition:.2s;}
.kcp__more-card:hover{border-color:var(--accent);}
.kcp__more-card span{display:block;font-size:12px;letter-spacing:2px;color:var(--accent);text-transform:uppercase;margin-bottom:10px;}
.kcp__more-card b{display:block;font-family:'Unbounded',sans-serif;font-weight:700;font-size:22px;line-height:1.2;color:var(--text);margin-bottom:8px;}
.kcp__more-card i{font-style:normal;font-size:15px;color:var(--muted);}
@media (max-width:640px){.kcp__vid2{grid-template-columns:1fr;}.kcp__more{grid-template-columns:1fr;}}
/* --- Галерея разворотов презентации --- */
.kcp__gal{margin-top:18px;}
.kcp__galhead{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:12px;}
.kcp__galtabs{display:inline-flex;gap:4px;background:var(--soft);border:1px solid var(--border);border-radius:9px;padding:4px;}
.kcp__galtab{padding:7px 18px;border:none;background:none;color:var(--muted);font-family:'Manrope',Arial,sans-serif;font-weight:600;font-size:13px;line-height:1;letter-spacing:1.2px;border-radius:6px;cursor:pointer;transition:.2s;}
.kcp__galtab:hover{color:var(--text);}
.kcp__galtab.is-on{background:var(--accent);color:#fff;}
.kcp__galnote{margin-top:14px;font-size:13px;line-height:1.5;color:var(--muted);letter-spacing:.3px;}
.kcp__galnav{display:flex;gap:8px;flex-shrink:0;}
.kcp__galarrow{width:40px;height:40px;border:1px solid var(--border);background:var(--raise);border-radius:4px;color:var(--text);font:20px/1 Arial,sans-serif;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.2s;padding:0;}
.kcp__galarrow:hover{border-color:var(--accent);color:var(--accent);}
.kcp__galarrow:disabled{opacity:.3;cursor:default;border-color:var(--border);color:var(--text);}
.kcp__galtrack{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:4px;}
.kcp__galtrack::-webkit-scrollbar{display:none;}
.kcp__galcard{flex:0 0 calc((100% - 24px)/3);scroll-snap-align:start;display:block;padding:0;margin:0;border:1px solid var(--border);background:var(--raise);border-radius:10px;overflow:hidden;cursor:zoom-in;aspect-ratio:1200/873;transition:.2s;font:inherit;}
.kcp__galcard:hover{border-color:var(--accent);}
.kcp__galcard img{width:100%;height:100%;object-fit:cover;display:block;}
/* --- Лайтбокс --- */
.kcp__lb{position:fixed;inset:0;z-index:99999;display:none;align-items:center;justify-content:center;padding:64px 40px;}
.kcp__lb.open{display:flex;}
.kcp__lbbd{position:absolute;inset:0;background:rgba(4,4,6,.9);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);}
.kcp__lbbox{position:relative;width:auto;max-width:min(1100px,100%);display:flex;align-items:center;justify-content:center;}
.kcp__lbbox img{display:block;max-width:100%;max-height:calc(100vh - 170px);width:auto;height:auto;border-radius:10px;background:#0f0f11;}
.kcp__lbx{position:absolute;top:-48px;right:0;width:38px;height:38px;border-radius:9px;background:var(--raise);border:1px solid var(--border);color:var(--text);font:20px/1 Arial,sans-serif;cursor:pointer;padding:0;}
.kcp__lbx:hover{border-color:var(--accent);color:var(--accent);}
.kcp__lbnav{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;background:rgba(20,20,22,.85);border:1px solid var(--border);color:var(--text);font:22px/1 Arial,sans-serif;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.2s;padding:0;}
.kcp__lbnav:hover{border-color:var(--accent);color:var(--accent);}
.kcp__lbnav--prev{left:10px;}
.kcp__lbnav--next{right:10px;}
.kcp__lbcount{position:absolute;bottom:-36px;left:50%;transform:translateX(-50%);font-size:13px;color:var(--muted);letter-spacing:.4px;white-space:nowrap;}
@media (max-width:820px){.kcp__galcard{flex:0 0 calc((100% - 12px)/2);}.kcp__lb{padding:60px 12px;}.kcp__lbnav{width:40px;height:40px;}}
@media (max-width:480px){.kcp__galcard{flex:0 0 82%;}.kcp__galnav{display:none;}.kcp__galhead{margin-bottom:10px;}}
.kcp__cta{max-width:900px;margin:20px auto 0;padding:80px 6vw 96px;text-align:center;}
.kcp__cta h2{font-family:'Unbounded';font-weight:700;font-size:clamp(26px,3.4vw,42px);letter-spacing:-.02em;margin-bottom:16px;}
.kcp__cta p{color:var(--muted);font-size:18px;margin-bottom:30px;}
.kcp__cta-btn{display:inline-block;background:var(--accent);color:#fff;text-decoration:none;font-family:'Manrope';font-weight:700;font-size:16px;padding:18px 38px;border-radius:10px;transition:.25s;}
.kcp__cta-btn:hover{transform:translateY(-2px);box-shadow:0 14px 34px var(--glow);}
@media (max-width:820px){
  .kcp__facts{grid-template-columns:1fr 1fr;}
  .kcp__grid2{grid-template-columns:1fr;gap:20px;}
  .kcp__step{grid-template-columns:1fr;gap:14px;padding:24px 22px;}
  .kcp__step-num{font-size:28px;}
  .kcp__result-grid{grid-template-columns:1fr;}
  .kcp__ph--grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:480px){
  .kcp__hero{padding:48px 20px 0;}
  .kcp__sec{padding:48px 20px;}
  .kcp__facts{grid-template-columns:1fr;}
  .kcp__callout{padding:28px 24px;}
}
/* заполненные слоты (картинка/видео из конфига) */
.kcp [data-img].kcp--filled,.kcp [data-video].kcp--filled{background:none;border:none;}
.kcp [data-img] img,.kcp [data-video] img{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit;}
.kcp [data-fit="contain"] img{object-fit:contain;background:#0f0f11;padding:6%;}
.kcp [data-video].kcp--filled iframe{width:100%;height:100%;border:none;display:block;}
.kcp__ph.kcp--filled{padding:0;}
/* Визитки в шаге 06 - две карточки рядом, лайтбокс общий с галереей */
.kcp__cards{margin-top:18px}
.kcp__cardsrow{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.kcp__card{display:block;width:100%;padding:0;border:0;margin:0;background:#0f0f11;border-radius:14px;overflow:hidden;aspect-ratio:1680/952;cursor:zoom-in}
.kcp__card img{width:100%;height:100%;object-fit:cover;display:block}
.kcp__card:focus-visible{outline:2px solid #6D5DFB;outline-offset:3px}
.kcp__cardsnote{color:#9A9A9A;font-size:13px;line-height:1.5;margin-top:10px}
.kcp__ph--grid.is-two{grid-template-columns:repeat(2,1fr)}
@media (max-width:680px){.kcp__cardsrow{grid-template-columns:1fr}}
</style>
<script>
(function(){
  var C=window.KORS_CASE||{}; var IMG=C.images||{}, VID=C.videos||{};
  document.querySelectorAll('.kcp [data-video]').forEach(function(el){
    var id=VID[el.getAttribute('data-video')];
    if(id){ el.classList.add('kcp--filled'); el.innerHTML='<iframe src="https://kinescope.io/embed/'+id+'" allow="autoplay; fullscreen; encrypted-media; picture-in-picture" allowfullscreen frameborder="0"></iframe>'; el.removeAttribute('data-img'); }
  });
  document.querySelectorAll('.kcp [data-img]').forEach(function(el){
    var url=IMG[el.getAttribute('data-img')];
    if(url){ el.classList.add('kcp--filled'); el.innerHTML='<img src="'+url+'" alt="">'; }
  });
})();
(function(){
  // Слайдер до/после
  var ba=document.getElementById('kcpBA'); if(!ba) return;
  var before=document.getElementById('kcpBABefore');
  var handle=document.getElementById('kcpBAHandle');
  var dragging=false;
  function setPos(clientX){
    var r=ba.getBoundingClientRect();
    var x=Math.max(0,Math.min(clientX-r.left,r.width));
    var pct=(x/r.width)*100;
    before.style.clipPath='inset(0 '+(100-pct)+'% 0 0)';
    handle.style.left=pct+'%';
  }
  handle.addEventListener('mousedown',function(){dragging=true;});
  window.addEventListener('mouseup',function(){dragging=false;});
  window.addEventListener('mousemove',function(e){ if(dragging) setPos(e.clientX); });
  handle.addEventListener('touchstart',function(){dragging=true;},{passive:true});
  window.addEventListener('touchend',function(){dragging=false;});
  window.addEventListener('touchmove',function(e){ if(dragging&&e.touches[0]) setPos(e.touches[0].clientX); },{passive:true});
  ba.addEventListener('click',function(e){ setPos(e.clientX); });
})();

(function(){
  var C=window.KORS_CASE||{}, SL=C.slides||[];
  var lb=document.getElementById('kcpLb'), lbi=document.getElementById('kcpLbImg'), lbc=document.getElementById('kcpLbCount');
  if(!lb||!lbi) return;
  var list=[], idx=0, lbl='';
  function render(){ lbi.src=list[idx]; lbi.alt=(lbl||'Разворот')+' '+(idx+1)+' из '+list.length; if(lbc) lbc.textContent=(idx+1)+' / '+list.length; }
  function open(arr,i,l){ list=arr; idx=i; lbl=l||''; lb.classList.add('open'); lb.setAttribute('aria-hidden','false'); document.documentElement.style.overflow='hidden'; render(); }
  function close(){ lb.classList.remove('open'); lb.setAttribute('aria-hidden','true'); document.documentElement.style.overflow=''; lbi.removeAttribute('src'); }
  function go(d){ if(list.length<2) return; idx=(idx+d+list.length)%list.length; render(); }
  window.kcpLightbox={open:open};
  var gal=document.querySelector('.kcp [data-gallery]');
  var SETS=[{id:'ru',label:'RU',items:SL},{id:'en',label:'EN',items:C.slidesEn||[]}].filter(function(x){return x.items&&x.items.length;});
  if(gal && SETS.length){
    var ph=gal.parentNode.querySelector('[data-img="presentation"]');
    if(ph) ph.style.display='none';
    var tabs=SETS.length>1 ? '<div class="kcp__galtabs" role="tablist">'+SETS.map(function(s,i){return '<button class="kcp__galtab'+(i===0?' is-on':'')+'" data-lang="'+s.id+'" role="tab" aria-selected="'+(i===0)+'">'+s.label+'</button>';}).join('')+'</div>' : '<span></span>';
    gal.innerHTML='<div class="kcp__galhead">'+tabs+'<div class="kcp__galnav"><button class="kcp__galarrow" data-gprev aria-label="Назад">&#8249;</button><button class="kcp__galarrow" data-gnext aria-label="Вперёд">&#8250;</button></div></div><div class="kcp__galtrack"></div><div class="kcp__galnote"></div>';
    var track=gal.querySelector('.kcp__galtrack'), note=gal.querySelector('.kcp__galnote');
    var gp=gal.querySelector('[data-gprev]'), gn=gal.querySelector('[data-gnext]');
    var cur=SETS[0];
    function noteText(){
      var ru=SETS.filter(function(s){return s.id==='ru';})[0], en=SETS.filter(function(s){return s.id==='en';})[0];
      if(ru&&en) return (ru.items.length===en.items.length?'По '+ru.items.length+' разворотов в русской и английской версии':ru.items.length+' разворотов на русском и '+en.items.length+' на английском')+' - нажмите на разворот, чтобы рассмотреть';
      return cur.items.length+' разворотов - нажмите на разворот, чтобы рассмотреть';
    }
    function fill(){
      var h='';
      for(var i=0;i<cur.items.length;i++){ h+='<button class="kcp__galcard" data-gi="'+i+'" aria-label="Разворот '+(i+1)+' из '+cur.items.length+'"><img src="'+cur.items[i]+'" alt="Разворот '+(i+1)+' печатной презентации «Одоевские консервы»'+(cur.id==='en'?', английская версия':'')+'" loading="lazy"></button>'; }
      track.innerHTML=h; track.scrollLeft=0; note.textContent=noteText(); setTimeout(upd,60);
    }
    function step(){ var c=track.querySelector('.kcp__galcard'); return c?c.offsetWidth+12:320; }
    function upd(){ gp.disabled=track.scrollLeft<8; gn.disabled=track.scrollLeft+track.clientWidth>=track.scrollWidth-8; }
    gp.addEventListener('click',function(){ track.scrollLeft-=step(); });
    gn.addEventListener('click',function(){ track.scrollLeft+=step(); });
    track.addEventListener('scroll',upd); window.addEventListener('resize',upd);
    track.addEventListener('click',function(e){ var b=e.target&&e.target.closest?e.target.closest('.kcp__galcard'):null; if(!b) return; open(cur.items, parseInt(b.getAttribute('data-gi'),10)||0); });
    var tabEls=gal.querySelectorAll('.kcp__galtab');
    Array.prototype.forEach.call(tabEls,function(t){
      t.addEventListener('click',function(){
        var id=t.getAttribute('data-lang');
        var next=SETS.filter(function(s){return s.id===id;})[0];
        if(!next||next===cur) return;
        cur=next;
        Array.prototype.forEach.call(tabEls,function(o){ var on=o===t; o.classList.toggle('is-on',on); o.setAttribute('aria-selected',on); });
        fill();
      });
    });
    fill();
  }
  var x=document.getElementById('kcpLbx'); if(x) x.addEventListener('click',close);
  var pv=document.getElementById('kcpLbPrev'); if(pv) pv.addEventListener('click',function(e){ e.stopPropagation(); go(-1); });
  var nx=document.getElementById('kcpLbNext'); if(nx) nx.addEventListener('click',function(e){ e.stopPropagation(); go(1); });
  lb.addEventListener('click',function(e){ if(e.target===lbi) return; if(e.target&&e.target.closest&&e.target.closest('.kcp__lbnav,.kcp__lbx')) return; close(); });
  document.addEventListener('keydown',function(e){ if(!lb.classList.contains('open')) return; if(e.key==='Escape'||e.keyCode===27) close(); else if(e.key==='ArrowLeft'||e.keyCode===37) go(-1); else if(e.key==='ArrowRight'||e.keyCode===39) go(1); });
  var sx=0, sy=0;
  lb.addEventListener('touchstart',function(e){ if(!e.touches[0]) return; sx=e.touches[0].clientX; sy=e.touches[0].clientY; },{passive:true});
  lb.addEventListener('touchend',function(e){ var t=e.changedTouches&&e.changedTouches[0]; if(!t) return; var dx=t.clientX-sx, dy=t.clientY-sy; if(Math.abs(dx)>45&&Math.abs(dx)>Math.abs(dy)) go(dx<0?1:-1); },{passive:true});
})();

(function(){
  // Визитки шага 06: две карточки рядом, клик открывает общий лайтбокс.
  var C=window.KORS_CASE||{};
  var CARDS=(C.cards||[]).filter(Boolean);
  var box=document.querySelector('.kcp [data-cards]');
  if(!box) return;
  if(!CARDS.length){ box.style.display='none'; return; }
  var ph=document.querySelector('.kcp [data-img="brand1"]');
  if(ph){ ph.style.display='none'; if(ph.parentNode) ph.parentNode.classList.add('is-two'); }
  var ALT=['Визитка: владелец бизнеса','Визитка: менеджер по продажам'];
  var h='';
  for(var i=0;i<CARDS.length;i++){
    h+='<button type="button" class="kcp__card" data-i="'+i+'" aria-label="Открыть визитку '+(i+1)+' из '+CARDS.length+'"><img src="'+CARDS[i]+'" alt="'+(ALT[i]||'Визитка')+'" loading="lazy"></button>';
  }
  box.innerHTML='<div class="kcp__cardsrow">'+h+'</div><div class="kcp__cardsnote">Нажмите на визитку, чтобы рассмотреть</div>';
  box.addEventListener('click',function(e){
    var b=e.target&&e.target.closest?e.target.closest('.kcp__card'):null;
    if(!b) return;
    if(window.kcpLightbox) window.kcpLightbox.open(CARDS, parseInt(b.getAttribute('data-i'),10), 'Визитка');
  });
})();
</script>

rec2709724901 (17844 симв.)

<!-- ============================================================
     KORS · КЕЙС · INVOICEBOX
     Заполнение фото/видео — только в списке KORS_CASE ниже.
     Картинки: ссылка в кавычки ('' = заглушка). Видео: ID Kinescope.
     ============================================================ -->
<script>
window.KORS_CASE = {
  images: {
    cover:      '',   // обложка вверху
    aboutShot:  '',   // «О компании» - скрин сервиса/интерфейса
    info1:      '',   // ролик «как выставить счёт» - кадр (если без видео)
    info2:      '',   // ролик «для интернет-магазинов» - кадр
    mkt:        '',   // маркетинг - скрин рекламы/статистики
    grtCover:   '',   // GRT - обложка (арт/люкс)
    grt1:       '',   // GRT - пример
    siteSoon:   ''    // планы - макет лендингов
  },
  videos: {
    main:  'xgBCJrU3Fy9CtKDXR9R23S',  // главное видео о сервисе (стоит наш ролик)
    v2:    '',                        // второе видео (подробный разбор) - Kinescope ID
    info1: '',                        // короткий ролик «выставить счёт»
    info2: ''                         // короткий ролик «для интернет-магазинов»
  }
};
</script>

<div class="kcp">
<header class="kcp__hero">
    <div class="kcp__hero-in">
      <a class="kcp__back" href="/">← Все проекты</a>
      <div class="kcp__eyebrow">КЕЙС · ФИНТЕХ · ВИДЕО + МАРКЕТИНГ</div>
      <h1 class="kcp__title">InvoiceBox</h1>
      <p class="kcp__lead">Как объяснить сложный финтех простым языком - и почему клиент возвращался за видео, инфографикой и маркетингом, а затем доверил нам и свой второй бизнес.</p>
      <div class="kcp__facts">
        <div class="kcp__fact"><span>Сфера</span><b>Финтех · приём платежей (B2B)</b></div>
        <div class="kcp__fact"><span>С чего начали</span><b>Видео о сервисе</b></div>
        <div class="kcp__fact"><span>Где сейчас</span><b>Ведение маркетинга + 2-й бизнес</b></div>
        <div class="kcp__fact"><span>Формат</span><b>Видео · инфографика · реклама</b></div>
      </div>
    </div>
    <div class="kcp__cover kcp__ph" data-img="cover"><div class="kcp__ph-label">📷 Обложка: кадр из видео / интерфейс сервиса (16:9)</div></div>
  </header>
  <section class="kcp__sec">
    <div class="kcp__grid2">
      <div><div class="kcp__kick">- О КОМПАНИИ</div><h2 class="kcp__h2">Мощный сервис, который сложно объяснить</h2></div>
      <div class="kcp__prose">
        <p>InvoiceBox - сервис приёма онлайн-платежей и автоматизации выставления счетов для бизнеса. Компании выставляют и отправляют счета юридическим лицам за пару кликов, принимают оплату на сайте и подключают решения для интернет-магазинов.</p>
        <p>Продукт сильный, но у него есть особенность: <b>финтех сложно воспринимается</b>. Чтобы клиент подключился, ему нужно за секунды понять, что это за сервис и какая от него выгода. На словах и текстом это объяснять долго.</p>
      </div>
    </div>
  </section>
  <section class="kcp__sec">
    <div class="kcp__callout">
      <div class="kcp__callout-k">ЗАДАЧА</div>
      <div class="kcp__callout-t">Объяснить сложный финтех-продукт так, чтобы целевая аудитория поняла суть и выгоду за считанные секунды - и захотела подключиться.</div>
    </div>
  </section>
  <section class="kcp__sec">
    <div class="kcp__kick">- КАК ШЛА РАБОТА</div>
    <h2 class="kcp__h2">От одного ролика - к маркетингу и второму бизнесу</h2>
    <p class="kcp__sub">Всё началось с одного объясняющего видео. Дальше клиент возвращался снова и снова - за новыми форматами.</p>
    <ol class="kcp__timeline">
      <li class="kcp__step"><div class="kcp__step-num">01</div><div class="kcp__step-body">
        <h3>Видео о сервисе</h3>
        <p>Сняли первое видео: кто такие InvoiceBox, чем полезны и как это работает - коротко и понятно. Первый инструмент, который показывает продукт вместо долгих объяснений.</p>
        <div class="kcp__ph kcp__ph--wide" data-video="main"><div class="kcp__ph-label">🎬 Видео о сервисе (Kinescope)</div></div>
      </div></li>
      <li class="kcp__step"><div class="kcp__step-num">02</div><div class="kcp__step-body">
        <h3>Второе видео - глубже и проще</h3>
        <p>Клиент вернулся за вторым роликом. Здесь мы подробнее и ещё проще разобрали продукт - версия для сайта и презентаций, чтобы объяснять сервис новым клиентам.</p>
        <div class="kcp__ph kcp__ph--wide" data-video="v2"><div class="kcp__ph-label">🎬 Второе видео (подробный разбор)</div></div>
      </div></li>
      <li class="kcp__step"><div class="kcp__step-num">03</div><div class="kcp__step-body">
        <h3>Два коротких ролика с инфографикой</h3>
        <p>Дальше - два коротких ролика (~30 секунд) с инфографикой: «как выставить счёт на сервисе» и «решение для интернет-магазинов» (у клиента появился новый сервис). Простыми словами о сложном - точно под их аудиторию.</p>
        <div class="kcp__ph kcp__ph--grid">
          <div class="kcp__ph" data-video="info1" data-img="info1"><div class="kcp__ph-label">🎬 ролик «выставить счёт»</div></div>
          <div class="kcp__ph" data-video="info2" data-img="info2"><div class="kcp__ph-label">🎬 ролик «для интернет-магазинов»</div></div>
        </div>
      </div></li>
      <li class="kcp__step"><div class="kcp__step-num">04</div><div class="kcp__step-body">
        <h3>Ведение маркетинга</h3>
        <p>Перешли к системной работе: настроили и ведём рекламу InvoiceBox. Не разовый ролик, а постоянное продвижение сервиса.</p>
        <div class="kcp__ph kcp__ph--wide" data-img="mkt"><div class="kcp__ph-label">📊 маркетинг: скрин рекламы / результатов</div></div>
      </div></li>
      <li class="kcp__step kcp__chapter"><div class="kcp__step-num">GRT</div><div class="kcp__step-body">
        <h3>Второй бизнес клиента - GRT</h3>
        <p>Лучшее подтверждение доверия: клиент передал нам и свой второй бизнес - <b>GRT</b>. Это продажа предметов роскоши и искусства - картины, редкие вещи, чеки на миллионы. Другой продукт, другая аудитория, другой уровень.</p>
        <p>Здесь мы тоже настроили рекламу и ведём маркетинг уже около трёх месяцев - и продолжаем работать.</p>
        <div class="kcp__ph kcp__ph--wide" data-img="grtCover"><div class="kcp__ph-label">🖼 GRT: обложка / примеры (арт, люкс)</div></div>
      </div></li>
      <li class="kcp__step kcp__step--next"><div class="kcp__step-num">→</div><div class="kcp__step-body">
        <h3>Что дальше</h3>
        <p>Следующий этап - лендинги под каждый продукт: отдельная страница на каждый сервис, где сложный финтех объясняется максимально просто. Задача - чтобы любой человек понял, что это за сервис и как им удобно пользоваться.</p>
      </div></li>
    </ol>
  </section>
  <section class="kcp__sec">
    <div class="kcp__result">
      <div class="kcp__kick">- ЧТО ИЗМЕНИЛОСЬ</div>
      <h2 class="kcp__h2">Сложное стало понятным - и продающим</h2>
      <div class="kcp__result-grid">
        <div class="kcp__rcard"><div class="kcp__rc-t">Просто о сложном</div><p>Финтех-продукт объяснён так, что аудитория понимает суть и выгоду за секунды.</p></div>
        <div class="kcp__rcard"><div class="kcp__rc-t">Клиент возвращается</div><p>От одного видео - к серии роликов, инфографике и постоянному маркетингу.</p></div>
        <div class="kcp__rcard"><div class="kcp__rc-t">Доверие = 2-й бизнес</div><p>Клиент передал нам и второй бизнес (GRT) - премиальный сегмент.</p></div>
        <div class="kcp__rcard"><div class="kcp__rc-t">Постоянная работа</div><p>Не разовая задача, а ведение маркетинга по двум бизнесам.</p></div>
      </div>
    </div>
  </section>
  <section class="kcp__sec">
    <div class="kcp__kick">- ЧТО ВОШЛО В РАБОТУ</div>
    <div class="kcp__chips">
      <span>Видеопродакшн</span><span>Объясняющие ролики</span><span>Моушн / инфографика</span><span>Короткие ролики 30 сек</span><span>Маркетинг и реклама</span><span>Ведение проекта</span><span>Реклама GRT (люкс/арт)</span><span>Лендинги (в планах)</span>
    </div>
  </section>
  <section class="kcp__sec">
    <div class="kcp__kick">- СМОТРЕТЬ</div>
    <h2 class="kcp__h2">Видео проекта</h2>
    <div class="kcp__video"><iframe src="https://kinescope.io/embed/xgBCJrU3Fy9CtKDXR9R23S" allow="autoplay; fullscreen; encrypted-media; picture-in-picture" allowfullscreen frameborder="0"></iframe></div>
  </section>
  <section class="kcp__cta">
    <h2>Сложный продукт? Объясним просто.</h2>
    <p>Поможем показать ваш сервис так, чтобы клиент понял его за секунды.</p>
    <a class="kcp__cta-btn" href="#popup:zayavka">Обсудить проект →</a>
  </section>
</div>

<style>
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Unbounded:wght@400;600;700;800&display=swap');
.kcp{--bg:#0C0C0E;--raise:#141416;--card:#1B1B1F;--border:#2A2A2E;--soft:#242428;--text:#F5F3EF;--muted:#9A9A9A;--faint:#6a6a6e;--accent:#6D5DFB;--glow:rgba(109,93,251,.14);
  box-sizing:border-box;background:var(--bg);color:var(--text);font-family:'Manrope',Arial,sans-serif;-webkit-font-smoothing:antialiased;}
.kcp *{box-sizing:border-box;margin:0;padding:0;}
.kcp p{line-height:1.65;}
.kcp__eyebrow,.kcp__kick{font-family:'Unbounded';font-size:12px;letter-spacing:.14em;color:var(--accent);}
.kcp__h2{font-family:'Unbounded';font-weight:700;font-size:clamp(26px,3.2vw,42px);letter-spacing:-.02em;line-height:1.12;margin:14px 0 0;}
.kcp__sub{color:var(--muted);font-size:17px;line-height:1.6;max-width:640px;margin-top:14px;}
.kcp__hero{padding:70px 6vw 0;max-width:1280px;margin:0 auto;}
.kcp__hero-in{max-width:900px;}
.kcp__back{display:inline-block;color:var(--muted);text-decoration:none;font-size:14px;font-weight:600;margin-bottom:34px;transition:.2s;}
.kcp__back:hover{color:var(--accent);}
.kcp__hero .kcp__eyebrow{margin-bottom:18px;}
.kcp__title{font-family:'Unbounded';font-weight:800;font-size:clamp(40px,7vw,88px);letter-spacing:-.03em;line-height:1;margin-bottom:24px;}
.kcp__lead{font-size:clamp(18px,2vw,22px);line-height:1.55;color:#d8d6d1;max-width:760px;}
.kcp__facts{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:14px;overflow:hidden;margin-top:44px;}
.kcp__fact{background:var(--raise);padding:20px 22px;display:flex;flex-direction:column;gap:7px;}
.kcp__fact span{font-size:12px;color:var(--faint);text-transform:uppercase;letter-spacing:.06em;}
.kcp__fact b{font-family:'Unbounded';font-weight:600;font-size:14px;line-height:1.3;}
.kcp__cover{margin:48px auto 0;max-width:1280px;aspect-ratio:16/8;border-radius:20px;}
.kcp__sec{max-width:1080px;margin:0 auto;padding:64px 6vw;}
.kcp__grid2{display:grid;grid-template-columns:0.85fr 1.15fr;gap:48px;align-items:start;}
.kcp__prose p{color:#c9c7c2;font-size:17px;margin-bottom:16px;}
.kcp__prose p:last-child{margin-bottom:0;}
.kcp__prose b{color:var(--text);font-weight:600;}
.kcp__callout{background:linear-gradient(135deg,rgba(109,93,251,.10),rgba(109,93,251,.02));border:1px solid rgba(109,93,251,.3);border-radius:18px;padding:40px 44px;}
.kcp__callout-k{font-family:'Unbounded';font-size:12px;letter-spacing:.14em;color:var(--accent);margin-bottom:14px;}
.kcp__callout-t{font-family:'Unbounded';font-weight:600;font-size:clamp(20px,2.4vw,30px);line-height:1.35;letter-spacing:-.01em;}
.kcp__timeline{list-style:none;margin-top:44px;display:flex;flex-direction:column;gap:26px;}
.kcp__step{display:grid;grid-template-columns:88px 1fr;gap:26px;background:var(--raise);border:1px solid var(--border);border-radius:18px;padding:30px 32px;transition:.25s;}
.kcp__step:hover{border-color:rgba(109,93,251,.4);}
.kcp__step-num{font-family:'Unbounded';font-weight:700;font-size:34px;color:var(--accent);line-height:1;opacity:.85;}
.kcp__step-body h3{font-family:'Unbounded';font-weight:600;font-size:22px;letter-spacing:-.01em;margin-bottom:12px;}
.kcp__step-body p{color:#c4c2bd;font-size:16px;}
.kcp__step--next{background:transparent;border-style:dashed;}
.kcp__step--next .kcp__step-num{opacity:1;}
.kcp__ph{position:relative;background:repeating-linear-gradient(45deg,#141416,#141416 12px,#17171a 12px,#17171a 24px);border:2px dashed #38383e;border-radius:14px;min-height:150px;display:flex;align-items:center;justify-content:center;text-align:center;}
.kcp__ph-label{color:#8a8a90;font-size:13px;font-weight:600;line-height:1.5;padding:16px;}
.kcp__ph-label small{color:var(--faint);font-weight:500;}
.kcp__ph--wide{margin-top:18px;aspect-ratio:16/8;min-height:0;}
.kcp__ph--grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:18px;background:none;border:none;padding:0;}
.kcp__ph--grid .kcp__ph{aspect-ratio:4/3;min-height:0;}
.kcp__cover.kcp__ph{aspect-ratio:16/8;}
.kcp__ba{position:relative;margin-top:20px;aspect-ratio:16/9;border-radius:16px;overflow:hidden;border:1px solid var(--border);user-select:none;}
.kcp__ba-after,.kcp__ba-before{position:absolute;inset:0;border-radius:0;border:none;}
.kcp__ba-before{width:100%;clip-path:inset(0 50% 0 0);}
.kcp__ba-handle{position:absolute;top:0;bottom:0;left:50%;width:2px;background:var(--accent);cursor:ew-resize;transform:translateX(-1px);}
.kcp__ba-handle span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:40px;height:40px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(0,0,0,.4);}
.kcp__ba-handle span::before{content:'⟷';color:#000;font-size:18px;font-weight:700;}
.kcp__ba-tag{position:absolute;top:14px;font-family:'Unbounded';font-size:11px;letter-spacing:.1em;background:rgba(0,0,0,.6);padding:5px 11px;border-radius:6px;}
.kcp__ba-tag--l{left:14px;}
.kcp__ba-tag--r{right:14px;}
.kcp__ba-hint{text-align:center;color:var(--faint);font-size:13px;margin-top:12px;}
.kcp__result-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:34px;}
.kcp__rcard{background:var(--raise);border:1px solid var(--border);border-radius:16px;padding:26px 28px;}
.kcp__rc-t{font-family:'Unbounded';font-weight:600;font-size:18px;color:var(--accent);margin-bottom:10px;}
.kcp__rcard p{color:#c4c2bd;font-size:15px;}
.kcp__chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;}
.kcp__chips span{font-family:'Manrope';font-weight:600;font-size:14px;color:var(--text);background:rgba(109,93,251,.08);border:1px solid rgba(109,93,251,.4);border-radius:8px;padding:10px 16px;}
.kcp__video{margin-top:24px;aspect-ratio:16/9;border-radius:18px;overflow:hidden;border:1px solid var(--border);background:#000;}
.kcp__video iframe{width:100%;height:100%;border:none;}
.kcp__cta{max-width:900px;margin:20px auto 0;padding:80px 6vw 96px;text-align:center;}
.kcp__cta h2{font-family:'Unbounded';font-weight:700;font-size:clamp(26px,3.4vw,42px);letter-spacing:-.02em;margin-bottom:16px;}
.kcp__cta p{color:var(--muted);font-size:18px;margin-bottom:30px;}
.kcp__cta-btn{display:inline-block;background:var(--accent);color:#fff;text-decoration:none;font-family:'Manrope';font-weight:700;font-size:16px;padding:18px 38px;border-radius:10px;transition:.25s;}
.kcp__cta-btn:hover{transform:translateY(-2px);box-shadow:0 14px 34px var(--glow);}
@media (max-width:820px){
  .kcp__facts{grid-template-columns:1fr 1fr;}
  .kcp__grid2{grid-template-columns:1fr;gap:20px;}
  .kcp__step{grid-template-columns:1fr;gap:14px;padding:24px 22px;}
  .kcp__step-num{font-size:28px;}
  .kcp__result-grid{grid-template-columns:1fr;}
  .kcp__ph--grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:480px){
  .kcp__hero{padding:48px 20px 0;}
  .kcp__sec{padding:48px 20px;}
  .kcp__facts{grid-template-columns:1fr;}
  .kcp__callout{padding:28px 24px;}
}
.kcp [data-img].kcp--filled,.kcp [data-video].kcp--filled{background:none;border:none;}
.kcp [data-img] img,.kcp [data-video] img{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit;}
.kcp [data-fit="contain"] img{object-fit:contain;background:#0f0f11;padding:6%;}
.kcp [data-video].kcp--filled iframe{width:100%;height:100%;border:none;display:block;}
.kcp__ph.kcp--filled{padding:0;}
.kcp__chapter{background:linear-gradient(135deg,rgba(109,93,251,.10),rgba(109,93,251,.02))!important;border-color:rgba(109,93,251,.4)!important;}
.kcp__chapter .kcp__step-num{font-size:22px;}
</style>
<script>
(function(){
  var C=window.KORS_CASE||{}; var IMG=C.images||{}, VID=C.videos||{};
  document.querySelectorAll('.kcp [data-video]').forEach(function(el){
    var id=VID[el.getAttribute('data-video')];
    if(id){ el.classList.add('kcp--filled'); el.innerHTML='<iframe src="https://kinescope.io/embed/'+id+'" allow="autoplay; fullscreen; encrypted-media; picture-in-picture" allowfullscreen frameborder="0"></iframe>'; el.removeAttribute('data-img'); }
  });
  document.querySelectorAll('.kcp [data-img]').forEach(function(el){
    var url=IMG[el.getAttribute('data-img')];
    if(url){ el.classList.add('kcp--filled'); el.innerHTML='<img src="'+url+'" alt="">'; }
  });
})();
(function(){
  var ba=document.getElementById('kcpBA'); if(!ba) return;
  var before=document.getElementById('kcpBABefore');
  var handle=document.getElementById('kcpBAHandle');
  var dragging=false;
  function setPos(clientX){
    var r=ba.getBoundingClientRect();
    var x=Math.max(0,Math.min(clientX-r.left,r.width));
    var pct=(x/r.width)*100;
    before.style.clipPath='inset(0 '+(100-pct)+'% 0 0)';
    handle.style.left=pct+'%';
  }
  handle.addEventListener('mousedown',function(){dragging=true;});
  window.addEventListener('mouseup',function(){dragging=false;});
  window.addEventListener('mousemove',function(e){ if(dragging) setPos(e.clientX); });
  handle.addEventListener('touchstart',function(){dragging=true;},{passive:true});
  window.addEventListener('touchend',function(){dragging=false;});
  window.addEventListener('touchmove',function(e){ if(dragging&&e.touches[0]) setPos(e.touches[0].clientX); },{passive:true});
  ba.addEventListener('click',function(e){ setPos(e.clientX); });
})();
</script>

rec2709724901 (20040 симв.)

<!-- ============================================================
     KORS · КЕЙС · INVOICEBOX
     Заполнение фото/видео — только в списке KORS_CASE ниже.
     Картинки: ссылка в кавычки ('' = заглушка). Видео: ID Kinescope.
     ============================================================ -->
<script>
window.KORS_CASE = {
  images: {
    cover:      '',   // обложка вверху
    aboutShot:  '',   // «О компании» - скрин сервиса/интерфейса
    info1:      '',   // ролик «как выставить счёт» - кадр (если без видео)
    info2:      '',   // ролик «для интернет-магазинов» - кадр
    mkt:        '',   // маркетинг - скрин рекламы/статистики
    grtCover:   '',   // GRT - обложка (арт/люкс)
    grt1:       '',   // GRT - пример
    siteSoon:   ''    // планы - макет лендингов
  },
  videos: {
    main:  '2FXfjS6hYEvLkWNKUveoBx',  // шаг 01 - первое видео о сервисе, полная версия
    v2:    '0GfobL6RnAzhPeiopXjNHS',  // шаг 02 - второе видео, «Инвойсбокс 2»
    info1: 'b66cpVCFFFVycfDvLFXFR3',  // шаг 03 - короткий ролик «выставить счёт»
    info2: '7akHJzKdcoSrPiHtRbRBqk'   // шаг 03 - короткий ролик «для интернет-магазинов»
  }
};
</script>

<div class="kcp">
<header class="kcp__hero">
    <div class="kcp__hero-in">
      <a class="kcp__back" href="/#rec2667018101">← Все проекты</a>
      <div class="kcp__eyebrow">КЕЙС · ФИНТЕХ · ВИДЕО + МАРКЕТИНГ</div>
      <h1 class="kcp__title">Инвойсбокс</h1>
      <p class="kcp__lead">Как объяснить сложный финтех простым языком - и почему клиент возвращался за видео, инфографикой и маркетингом, а затем доверил нам и свой второй бизнес.</p>
      <div class="kcp__facts">
        <div class="kcp__fact"><span>Сфера</span><b>Финтех · приём платежей (B2B)</b></div>
        <div class="kcp__fact"><span>С чего начали</span><b>Видео о сервисе</b></div>
        <div class="kcp__fact"><span>Где сейчас</span><b>Ведение маркетинга + 2-й бизнес</b></div>
        <div class="kcp__fact"><span>Формат</span><b>Видео · инфографика · реклама</b></div>
      </div>
    </div>
    <div class="kcp__cover kcp__ph" data-img="cover"><div class="kcp__ph-label">📷 Обложка: кадр из видео / интерфейс сервиса (16:9)</div></div>
  </header>
  <section class="kcp__sec">
    <div class="kcp__grid2">
      <div><div class="kcp__kick">- О КОМПАНИИ</div><h2 class="kcp__h2">Мощный сервис, который сложно объяснить</h2></div>
      <div class="kcp__prose">
        <p>Инвойсбокс - сервис приёма онлайн-платежей и автоматизации выставления счетов для бизнеса. Компании выставляют и отправляют счета юридическим лицам за минуту, принимают оплату на сайте и подключают решения для интернет-магазинов.</p>
        <p>Продукт сильный, но у него есть особенность: <b>финтех сложно воспринимается</b>. Чтобы клиент подключился, ему нужно за секунды понять, что это за сервис и какая от него выгода. На словах и текстом это объяснять долго.</p>
      </div>
    </div>
  </section>
  <section class="kcp__sec">
    <div class="kcp__callout">
      <div class="kcp__callout-k">ЗАДАЧА</div>
      <div class="kcp__callout-t">Объяснить сложный финтех-продукт так, чтобы целевая аудитория поняла суть и выгоду за считанные секунды - и захотела подключиться.</div>
    </div>
  </section>
  <section class="kcp__sec">
    <div class="kcp__kick">- КАК ШЛА РАБОТА</div>
    <h2 class="kcp__h2">От одного ролика - к маркетингу и второму бизнесу</h2>
    <p class="kcp__sub">Всё началось с одного объясняющего видео. Дальше клиент возвращался снова и снова - за новыми форматами.</p>
    <ol class="kcp__timeline">
      <li class="kcp__step"><div class="kcp__step-num">01</div><div class="kcp__step-body">
        <h3>Видео о сервисе</h3>
        <p>Сняли первое видео: кто такие Инвойсбокс, чем полезны и как это работает - коротко и понятно. Первый инструмент, который показывает продукт вместо долгих объяснений.</p>
        <div class="kcp__ph kcp__ph--wide" data-video="main"><div class="kcp__ph-label">🎬 Видео о сервисе (Kinescope)</div></div>
      </div></li>
      <li class="kcp__step"><div class="kcp__step-num">02</div><div class="kcp__step-body">
        <h3>Второе видео - глубже и проще</h3>
        <p>Клиент вернулся за вторым роликом. Здесь мы подробнее и ещё проще разобрали продукт - версия для сайта и презентаций, чтобы объяснять сервис новым клиентам.</p>
        <div class="kcp__ph kcp__ph--wide" data-video="v2"><div class="kcp__ph-label">🎬 Второе видео (подробный разбор)</div></div>
      </div></li>
      <li class="kcp__step"><div class="kcp__step-num">03</div><div class="kcp__step-body">
        <h3>Два коротких ролика с инфографикой</h3>
        <p>Дальше - два коротких ролика (~30 секунд) с инфографикой: «как выставить счёт на сервисе» и «решение для интернет-магазинов» (у клиента появился новый сервис). Простыми словами о сложном - точно под их аудиторию.</p>
        <div class="kcp__ph kcp__ph--grid">
          <div class="kcp__ph" data-video="info1" data-img="info1"><div class="kcp__ph-label">🎬 ролик «выставить счёт»</div></div>
          <div class="kcp__ph" data-video="info2" data-img="info2"><div class="kcp__ph-label">🎬 ролик «для интернет-магазинов»</div></div>
        </div>
      </div></li>
      <li class="kcp__step"><div class="kcp__step-num">04</div><div class="kcp__step-body">
        <h3>Ведение маркетинга</h3>
        <p>Перешли к системной работе: настроили и ведём рекламу Инвойсбокс. Не разовый ролик, а постоянное продвижение сервиса.</p>
        <div class="kcp__ph kcp__ph--wide" data-img="mkt"><div class="kcp__ph-label">📊 маркетинг: скрин рекламы / результатов</div></div>
      </div></li>
      <li class="kcp__step kcp__chapter"><div class="kcp__step-num">GRT</div><div class="kcp__step-body">
        <h3>Второй бизнес клиента - GRT</h3>
        <p>Лучшее подтверждение доверия: клиент передал нам и свой второй бизнес - <b>GRT</b>. Это продажа предметов роскоши и искусства - картины, редкие вещи, чеки на миллионы. Другой продукт, другая аудитория, другой уровень.</p>
        <p>Здесь мы тоже настроили рекламу и ведём маркетинг - работа продолжается.</p>
        <div class="kcp__ph kcp__ph--wide" data-img="grtCover"><div class="kcp__ph-label">🖼 GRT: обложка / примеры (арт, люкс)</div></div>
      </div></li>
      <li class="kcp__step kcp__step--next"><div class="kcp__step-num">→</div><div class="kcp__step-body">
        <h3>Что дальше</h3>
        <p>Следующий этап - лендинги под каждый продукт: отдельная страница на каждый сервис, где сложный финтех объясняется максимально просто. Задача - чтобы любой человек понял, что это за сервис и как им удобно пользоваться.</p>
      </div></li>
    </ol>
  </section>
  <section class="kcp__sec">
    <div class="kcp__result">
      <div class="kcp__kick">- ЧТО ИЗМЕНИЛОСЬ</div>
      <h2 class="kcp__h2">Сложное стало понятным - и продающим</h2>
      <div class="kcp__result-grid">
        <div class="kcp__rcard"><div class="kcp__rc-t">Просто о сложном</div><p>Финтех-продукт объяснён так, что аудитория понимает суть и выгоду за секунды.</p></div>
        <div class="kcp__rcard"><div class="kcp__rc-t">Клиент возвращается</div><p>От одного видео - к серии роликов, инфографике и постоянному маркетингу.</p></div>
        <div class="kcp__rcard"><div class="kcp__rc-t">Доверие = 2-й бизнес</div><p>Клиент передал нам и второй бизнес (GRT) - премиальный сегмент.</p></div>
        <div class="kcp__rcard"><div class="kcp__rc-t">Постоянная работа</div><p>Не разовая задача, а ведение маркетинга по двум бизнесам.</p></div>
      </div>
    </div>
  </section>
  <section class="kcp__sec">
    <div class="kcp__kick">- ЧТО ВОШЛО В РАБОТУ</div>
    <div class="kcp__chips">
      <span>Видеопродакшн</span><span>Объясняющие ролики</span><span>Моушн / инфографика</span><span>Короткие ролики 30 сек</span><span>Маркетинг и реклама</span><span>Ведение проекта</span><span>Реклама GRT (люкс/арт)</span><span>Лендинги (в планах)</span>
    </div>
  </section>
  <!-- ===== ВИДЕО ПРОЕКТА (СКРЫТО) ===== -->
  <!-- СЕКЦИЯ СКРЫТА 28.08.2026. Причина: ролик xgBCJrU3Fy9CtKDXR9R23S дублировал шаг 01, а на странице и так четыре ролика.
       Разметка сохранена. Чтобы вернуть секцию, снимите этот комментарий.
  <section class="kcp__sec">
    <div class="kcp__kick">- СМОТРЕТЬ</div>
    <h2 class="kcp__h2">Видео проекта</h2>
    <div class="kcp__video"><iframe src="https://kinescope.io/embed/xgBCJrU3Fy9CtKDXR9R23S" allow="autoplay; fullscreen; encrypted-media; picture-in-picture" allowfullscreen frameborder="0"></iframe></div>
  </section>
  -->
  <!-- ===== ОТЗЫВ КЛИЕНТА ===== -->
  <section class="kcp__sec">
    <div class="kcp__kick">- ОТЗЫВ</div>
    <h2 class="kcp__h2">Благодарственное письмо</h2>
    <p class="kcp__sub">ООО «Объединённый расчётный центр» - юридическое лицо группы «Инвойсбокс»</p>
    <div class="kcp__letter"><img src="https://static.tildacdn.com/tild3461-6534-4530-b265-323334643764/pismo-invoicebox-120.jpg" alt="Благодарственное письмо от ООО «Объединённый расчётный центр» (Инвойсбокс) команде KORS Production за видеоролики и ведение маркетинга" loading="lazy"></div>
  </section>
  <!-- ===== ДРУГИЕ КЕЙСЫ ===== -->
  <section class="kcp__sec">
    <div class="kcp__kick">- ЕЩЁ</div>
    <h2 class="kcp__h2">Другие кейсы</h2>
    <div class="kcp__more">
      <a class="kcp__more-card" href="/case-odoevskie"><span>Кейс</span><b>Одоевские консервы</b><i>Видео, фирменный стиль и два сайта →</i></a>
      <a class="kcp__more-card" href="/case-vistex"><span>Кейс</span><b>Вистекс</b><i>Съёмка видео о предприятии →</i></a>
    </div>
  </section>
  <section class="kcp__cta">
    <h2>Сложный продукт? Объясним просто.</h2>
    <p>Поможем показать ваш сервис так, чтобы клиент понял его за секунды.</p>
    <a class="kcp__cta-btn" href="#popup:zayavka">Обсудить проект →</a>
  </section>
</div>

<style>
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Unbounded:wght@400;600;700;800&display=swap');
.kcp{--bg:#0C0C0E;--raise:#141416;--card:#1B1B1F;--border:#2A2A2E;--soft:#242428;--text:#F5F3EF;--muted:#9A9A9A;--faint:#6a6a6e;--accent:#6D5DFB;--glow:rgba(109,93,251,.14);
  box-sizing:border-box;background:var(--bg);color:var(--text);font-family:'Manrope',Arial,sans-serif;-webkit-font-smoothing:antialiased;}
.kcp *{box-sizing:border-box;margin:0;padding:0;}
.kcp p{line-height:1.65;}
.kcp__eyebrow,.kcp__kick{font-family:'Unbounded';font-size:12px;letter-spacing:.14em;color:var(--accent);}
.kcp__h2{font-family:'Unbounded';font-weight:700;font-size:clamp(26px,3.2vw,42px);letter-spacing:-.02em;line-height:1.12;margin:14px 0 0;}
.kcp__sub{color:var(--muted);font-size:17px;line-height:1.6;max-width:640px;margin-top:14px;}
.kcp__hero{padding:70px 6vw 0;max-width:1280px;margin:0 auto;}
.kcp__hero-in{max-width:900px;}
.kcp__back{display:inline-block;color:var(--muted);text-decoration:none;font-size:14px;font-weight:600;margin-bottom:34px;transition:.2s;}
.kcp__back:hover{color:var(--accent);}
.kcp__hero .kcp__eyebrow{margin-bottom:18px;}
.kcp__title{font-family:'Unbounded';font-weight:800;font-size:clamp(40px,7vw,88px);letter-spacing:-.03em;line-height:1;margin-bottom:24px;}
.kcp__lead{font-size:clamp(18px,2vw,22px);line-height:1.55;color:#d8d6d1;max-width:760px;}
.kcp__facts{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:14px;overflow:hidden;margin-top:44px;}
.kcp__fact{background:var(--raise);padding:20px 22px;display:flex;flex-direction:column;gap:7px;}
.kcp__fact span{font-size:12px;color:var(--faint);text-transform:uppercase;letter-spacing:.06em;}
.kcp__fact b{font-family:'Unbounded';font-weight:600;font-size:14px;line-height:1.3;}
.kcp__cover{margin:48px auto 0;max-width:1280px;aspect-ratio:16/8;border-radius:20px;}
.kcp__sec{max-width:1080px;margin:0 auto;padding:64px 6vw;}
.kcp__grid2{display:grid;grid-template-columns:0.85fr 1.15fr;gap:48px;align-items:start;}
.kcp__prose p{color:#c9c7c2;font-size:17px;margin-bottom:16px;}
.kcp__prose p:last-child{margin-bottom:0;}
.kcp__prose b{color:var(--text);font-weight:600;}
.kcp__callout{background:linear-gradient(135deg,rgba(109,93,251,.10),rgba(109,93,251,.02));border:1px solid rgba(109,93,251,.3);border-radius:18px;padding:40px 44px;}
.kcp__callout-k{font-family:'Unbounded';font-size:12px;letter-spacing:.14em;color:var(--accent);margin-bottom:14px;}
.kcp__callout-t{font-family:'Unbounded';font-weight:600;font-size:clamp(20px,2.4vw,30px);line-height:1.35;letter-spacing:-.01em;}
.kcp__timeline{list-style:none;margin-top:44px;display:flex;flex-direction:column;gap:26px;}
.kcp__step{display:grid;grid-template-columns:88px 1fr;gap:26px;background:var(--raise);border:1px solid var(--border);border-radius:18px;padding:30px 32px;transition:.25s;}
.kcp__step:hover{border-color:rgba(109,93,251,.4);}
.kcp__step-num{font-family:'Unbounded';font-weight:700;font-size:34px;color:var(--accent);line-height:1;opacity:.85;}
.kcp__step-body h3{font-family:'Unbounded';font-weight:600;font-size:22px;letter-spacing:-.01em;margin-bottom:12px;}
.kcp__step-body p{color:#c4c2bd;font-size:16px;}
.kcp__step--next{background:transparent;border-style:dashed;}
.kcp__step--next .kcp__step-num{opacity:1;}
.kcp__ph{position:relative;background:repeating-linear-gradient(45deg,#141416,#141416 12px,#17171a 12px,#17171a 24px);border:2px dashed #38383e;border-radius:14px;min-height:150px;display:flex;align-items:center;justify-content:center;text-align:center;}
.kcp__ph-label{color:#8a8a90;font-size:13px;font-weight:600;line-height:1.5;padding:16px;}
.kcp__ph-label small{color:var(--faint);font-weight:500;}
.kcp__ph--wide{margin-top:18px;aspect-ratio:16/8;min-height:0;}
.kcp__ph--grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:18px;background:none;border:none;padding:0;}
.kcp__ph--grid .kcp__ph{aspect-ratio:4/3;min-height:0;}
.kcp__cover.kcp__ph{aspect-ratio:16/8;}
.kcp__ba{position:relative;margin-top:20px;aspect-ratio:16/9;border-radius:16px;overflow:hidden;border:1px solid var(--border);user-select:none;}
.kcp__ba-after,.kcp__ba-before{position:absolute;inset:0;border-radius:0;border:none;}
.kcp__ba-before{width:100%;clip-path:inset(0 50% 0 0);}
.kcp__ba-handle{position:absolute;top:0;bottom:0;left:50%;width:2px;background:var(--accent);cursor:ew-resize;transform:translateX(-1px);}
.kcp__ba-handle span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:40px;height:40px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(0,0,0,.4);}
.kcp__ba-handle span::before{content:'⟷';color:#000;font-size:18px;font-weight:700;}
.kcp__ba-tag{position:absolute;top:14px;font-family:'Unbounded';font-size:11px;letter-spacing:.1em;background:rgba(0,0,0,.6);padding:5px 11px;border-radius:6px;}
.kcp__ba-tag--l{left:14px;}
.kcp__ba-tag--r{right:14px;}
.kcp__ba-hint{text-align:center;color:var(--faint);font-size:13px;margin-top:12px;}
.kcp__result-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:34px;}
.kcp__rcard{background:var(--raise);border:1px solid var(--border);border-radius:16px;padding:26px 28px;}
.kcp__rc-t{font-family:'Unbounded';font-weight:600;font-size:18px;color:var(--accent);margin-bottom:10px;}
.kcp__rcard p{color:#c4c2bd;font-size:15px;}
.kcp__chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;}
.kcp__chips span{font-family:'Manrope';font-weight:600;font-size:14px;color:var(--text);background:rgba(109,93,251,.08);border:1px solid rgba(109,93,251,.4);border-radius:8px;padding:10px 16px;}
.kcp__video{margin-top:24px;aspect-ratio:16/9;border-radius:18px;overflow:hidden;border:1px solid var(--border);background:#000;}
.kcp__video iframe{width:100%;height:100%;border:none;}
.kcp__cta{max-width:900px;margin:20px auto 0;padding:80px 6vw 96px;text-align:center;}
.kcp__cta h2{font-family:'Unbounded';font-weight:700;font-size:clamp(26px,3.4vw,42px);letter-spacing:-.02em;margin-bottom:16px;}
.kcp__cta p{color:var(--muted);font-size:18px;margin-bottom:30px;}
.kcp__cta-btn{display:inline-block;background:var(--accent);color:#fff;text-decoration:none;font-family:'Manrope';font-weight:700;font-size:16px;padding:18px 38px;border-radius:10px;transition:.25s;}
.kcp__cta-btn:hover{transform:translateY(-2px);box-shadow:0 14px 34px var(--glow);}
@media (max-width:820px){
  .kcp__facts{grid-template-columns:1fr 1fr;}
  .kcp__grid2{grid-template-columns:1fr;gap:20px;}
  .kcp__step{grid-template-columns:1fr;gap:14px;padding:24px 22px;}
  .kcp__step-num{font-size:28px;}
  .kcp__result-grid{grid-template-columns:1fr;}
  .kcp__ph--grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:480px){
  .kcp__hero{padding:48px 20px 0;}
  .kcp__sec{padding:48px 20px;}
  .kcp__facts{grid-template-columns:1fr;}
  .kcp__callout{padding:28px 24px;}
}
.kcp [data-img].kcp--filled,.kcp [data-video].kcp--filled{background:none;border:none;}
.kcp [data-img] img,.kcp [data-video] img{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit;}
.kcp [data-fit="contain"] img{object-fit:contain;background:#0f0f11;padding:6%;}
.kcp [data-video].kcp--filled iframe{width:100%;height:100%;border:none;display:block;}
.kcp__ph.kcp--filled{padding:0;}
.kcp__chapter{background:linear-gradient(135deg,rgba(109,93,251,.10),rgba(109,93,251,.02))!important;border-color:rgba(109,93,251,.4)!important;}
.kcp__chapter .kcp__step-num{font-size:22px;}
/* Благодарственное письмо и блок «Другие кейсы» */
.kcp__letter{margin-top:26px;max-width:440px}
.kcp__letter img{display:block;width:100%;height:auto;border-radius:14px;border:1px solid var(--border)}
.kcp__more{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:28px}
.kcp__more-card{display:block;background:var(--raise);border:1px solid var(--border);border-radius:16px;padding:24px 26px;text-decoration:none;transition:.2s}
.kcp__more-card:hover{border-color:var(--accent)}
.kcp__more-card span{display:block;font-size:12px;letter-spacing:2px;color:var(--accent);text-transform:uppercase;margin-bottom:10px}
.kcp__more-card b{display:block;font-family:'Unbounded',sans-serif;font-weight:700;font-size:22px;line-height:1.2;color:var(--text);margin-bottom:8px}
.kcp__more-card i{font-style:normal;font-size:15px;color:var(--muted)}
@media (max-width:640px){.kcp__more{grid-template-columns:1fr}}
</style>
<script>
(function(){
  var C=window.KORS_CASE||{}; var IMG=C.images||{}, VID=C.videos||{};
  document.querySelectorAll('.kcp [data-video]').forEach(function(el){
    var id=VID[el.getAttribute('data-video')];
    if(id){ el.classList.add('kcp--filled'); el.innerHTML='<iframe src="https://kinescope.io/embed/'+id+'" allow="autoplay; fullscreen; encrypted-media; picture-in-picture" allowfullscreen frameborder="0"></iframe>'; el.removeAttribute('data-img'); }
  });
  document.querySelectorAll('.kcp [data-img]').forEach(function(el){
    var url=IMG[el.getAttribute('data-img')];
    if(url){ el.classList.add('kcp--filled'); el.innerHTML='<img src="'+url+'" alt="">'; }
  });
})();
(function(){
  var ba=document.getElementById('kcpBA'); if(!ba) return;
  var before=document.getElementById('kcpBABefore');
  var handle=document.getElementById('kcpBAHandle');
  var dragging=false;
  function setPos(clientX){
    var r=ba.getBoundingClientRect();
    var x=Math.max(0,Math.min(clientX-r.left,r.width));
    var pct=(x/r.width)*100;
    before.style.clipPath='inset(0 '+(100-pct)+'% 0 0)';
    handle.style.left=pct+'%';
  }
  handle.addEventListener('mousedown',function(){dragging=true;});
  window.addEventListener('mouseup',function(){dragging=false;});
  window.addEventListener('mousemove',function(e){ if(dragging) setPos(e.clientX); });
  handle.addEventListener('touchstart',function(){dragging=true;},{passive:true});
  window.addEventListener('touchend',function(){dragging=false;});
  window.addEventListener('touchmove',function(e){ if(dragging&&e.touches[0]) setPos(e.touches[0].clientX); },{passive:true});
  ba.addEventListener('click',function(e){ setPos(e.clientX); });
})();
</script>

rec2709838401 (16993 симв.) — /case-vistex, 28.08.2026

<!-- ============================================================
     KORS · КЕЙС · ВИСТЕКС
     Заполнение фото/видео - только в списке KORS_CASE ниже.
     ============================================================ -->
<script>
window.KORS_CASE = {
  images: {
    cover:     '',   // обложка вверху (производство / полотна)
    email:     '',   // дизайн письма со встроенным видео (скрин)
    label1:    '',   // концепт этикетки/салфетки 1 (мультяшная стилистика)
    label2:    '',   // концепт этикетки/салфетки 2
    siteSoon:  ''    // макет сайта (в планах)
  },
  videos: {
    main:  'fv7FAnLfbLaDaNJLtSQ74H'   // главное видео о заводе (стоит наш ролик)
  }
};
</script>

<div class="kcp">
<header class="kcp__hero">
    <div class="kcp__hero-in">
      <a class="kcp__back" href="/">← Все проекты</a>
      <div class="kcp__eyebrow">КЕЙС · ПРОИЗВОДСТВО · ВИДЕО</div>
      <h1 class="kcp__title">Вистекс</h1>
      <div class="kcp__tags"><span class="kcp__tag">Видео</span><span class="kcp__tag">Дизайн</span></div>
      <p class="kcp__lead">Как уложить завод с восемью направлениями в трёхминутный ролик - и превратить его в инструмент, с которым менеджеры стали закрывать больше сделок.</p>
      <div class="kcp__facts">
        <div class="kcp__fact"><span>Сфера</span><b>Нетканые материалы · B2B</b></div>
        <div class="kcp__fact"><span>С чего начали</span><b>Видео о заводе</b></div>
        <div class="kcp__fact"><span>Результат</span><b>Больше заказов, выше конверсия</b></div>
        <div class="kcp__fact"><span>Дальше</span><b>Этикетки, салфетки, сайт</b></div>
      </div>
    </div>
    <div class="kcp__cover kcp__ph" data-img="cover"><div class="kcp__ph-label">📷 Обложка: производство / нетканые полотна (16:9)</div></div>
  </header>
  <section class="kcp__sec">
    <div class="kcp__grid2">
      <div><div class="kcp__kick">- О КОМПАНИИ</div><h2 class="kcp__h2">Большой завод с восемью направлениями</h2></div>
      <div class="kcp__prose">
        <p>«Вистекс» - один из крупнейших производителей нетканых полотен в европейской части России (работает с 1992 года, завод в Ногинском районе Подмосковья). Продукция закрывает сразу восемь направлений: геотекстиль, материалы для обуви и мебели, для автопрома, напольных покрытий, протирочных салфеток, фильтров и другие.</p>
        <p>Производство мощное и разнообразное - но именно в этом сложность: <b>рассказать клиенту про все направления и масштаб</b> коротко и понятно почти невозможно, если делать это на словах.</p>
      </div>
    </div>
  </section>
  <section class="kcp__sec">
    <div class="kcp__callout">
      <div class="kcp__callout-k">ЗАДАЧА</div>
      <div class="kcp__callout-t">За несколько минут показать масштаб завода и все направления так, чтобы клиент увидел: здесь закроют его задачу - какой бы она ни была.</div>
    </div>
  </section>
  <section class="kcp__sec">
    <div class="kcp__kick">- КАК ШЛА РАБОТА</div>
    <h2 class="kcp__h2">От ролика о заводе - к росту заказов</h2>
    <p class="kcp__sub">Начали с одного большого видео о производстве - и оно стало рабочим инструментом, который принёс заводу конкретный результат.</p>
    <ol class="kcp__timeline">
      <li class="kcp__step"><div class="kcp__step-num">01</div><div class="kcp__step-body">
        <h3>Видео о заводе: 8 направлений за 3 минуты</h3>
        <p>Сняли ключевой ролик о производстве: за три минуты показали все восемь направлений завода. Плотно, наглядно, без воды - уровень продакшена под стать масштабу компании.</p>
        <div class="kcp__ph kcp__ph--wide" data-video="main"><div class="kcp__ph-label">🎬 Видео о заводе (Kinescope)</div></div>
      </div></li>
      <li class="kcp__step"><div class="kcp__step-num">02</div><div class="kcp__step-body">
        <h3>Дизайн письма с встроенным видео</h3>
        <p>Ролик начали отправлять клиентам - и мы разработали дизайн email-письма со встроенным видео. Менеджеры стали рассылать компаниям коммерческие предложения прямо с этим письмом: сразу показывают завод, продукцию и объясняют, что Вистекс закроет их потребности.</p>
        <p>Результат простой и измеримый: <b>клиенты стали лучше понимать продукт, конверсия выросла, а завод получает больше заказов.</b></p>
        <div class="kcp__ph kcp__ph--wide" data-img="email"><div class="kcp__ph-label">✉️ дизайн письма со встроенным видео (скрин)</div></div>
      </div></li>
      <li class="kcp__step"><div class="kcp__step-num">03</div><div class="kcp__step-body">
        <h3>Дизайн этикеток и салфеток - концепты</h3>
        <p>Пошли дальше в брендинг потребительской продукции. Предложили заводу концепты дизайна этикеток и салфеток в фирменной мультяшной стилистике: уникальная графика, копирайтинг и описания - всё под ключ с нашей стороны.</p>
        <div class="kcp__ph kcp__ph--grid">
          <div class="kcp__ph" data-img="label1"><div class="kcp__ph-label">🎨 концепт этикетки/салфетки 1</div></div>
          <div class="kcp__ph" data-img="label2"><div class="kcp__ph-label">🎨 концепт этикетки/салфетки 2</div></div>
        </div>
      </div></li>
      <li class="kcp__step kcp__step--next"><div class="kcp__step-num">→</div><div class="kcp__step-body">
        <h3>Что дальше</h3>
        <p>Следующий этап - сайт завода: единая витрина всех направлений с той же понятной подачей, что и в видео.</p>
        <div class="kcp__ph kcp__ph--wide" data-img="siteSoon"><div class="kcp__ph-label">💻 макет сайта (появится)</div></div>
      </div></li>
    </ol>
  </section>
  <section class="kcp__sec">
    <div class="kcp__result">
      <div class="kcp__kick">- ЧТО ИЗМЕНИЛОСЬ</div>
      <h2 class="kcp__h2">Ролик и письмо, которые приносят заказы</h2>
      <div class="kcp__result-grid">
        <div class="kcp__rcard"><div class="kcp__rc-t">8 направлений за 3 минуты</div><p>Сложное многопрофильное производство укладывается в один понятный ролик.</p></div>
        <div class="kcp__rcard"><div class="kcp__rc-t">Продукт стали понимать</div><p>С письмом и видео клиенты сразу видят, что завод может закрыть их потребности.</p></div>
        <div class="kcp__rcard"><div class="kcp__rc-t">Выше конверсия, больше заказов</div><p>Менеджеры рассылают коммерческие предложения с письмом - и сделок стало больше.</p></div>
        <div class="kcp__rcard"><div class="kcp__rc-t">Развитие бренда</div><p>Концепты этикеток и салфеток, впереди - сайт завода.</p></div>
      </div>
    </div>
  </section>
  <section class="kcp__sec">
    <div class="kcp__kick">- ЧТО ВОШЛО В РАБОТУ</div>
    <div class="kcp__chips">
      <span>Видеопродакшн</span><span>Съёмка производства</span><span>Сценарий / 8 направлений</span><span>Email-дизайн</span><span>Видео в письме</span><span>Концепты этикеток и салфеток</span><span>Копирайтинг</span><span>Сайт (в планах)</span>
    </div>
  </section>
  <section class="kcp__sec">
    <div class="kcp__kick">- СМОТРЕТЬ</div>
    <h2 class="kcp__h2">Видео проекта</h2>
    <div class="kcp__video"><iframe src="https://kinescope.io/embed/fv7FAnLfbLaDaNJLtSQ74H" allow="autoplay; fullscreen; encrypted-media; picture-in-picture" allowfullscreen frameborder="0"></iframe></div>
  </section>
  <section class="kcp__cta">
    <h2>Сложное производство? Покажем за минуты.</h2>
    <p>Упакуем ваш завод в видео и материалы, которые приносят заказы.</p>
    <a class="kcp__cta-btn" href="#popup:zayavka">Обсудить проект →</a>
  </section>
</div>

<style>
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Unbounded:wght@400;600;700;800&display=swap');
.kcp{--bg:#0C0C0E;--raise:#141416;--card:#1B1B1F;--border:#2A2A2E;--soft:#242428;--text:#F5F3EF;--muted:#9A9A9A;--faint:#6a6a6e;--accent:#6D5DFB;--glow:rgba(109,93,251,.14);
  box-sizing:border-box;background:var(--bg);color:var(--text);font-family:'Manrope',Arial,sans-serif;-webkit-font-smoothing:antialiased;}
.kcp *{box-sizing:border-box;margin:0;padding:0;}
.kcp p{line-height:1.65;}
.kcp__eyebrow,.kcp__kick{font-family:'Unbounded';font-size:12px;letter-spacing:.14em;color:var(--accent);}
.kcp__h2{font-family:'Unbounded';font-weight:700;font-size:clamp(26px,3.2vw,42px);letter-spacing:-.02em;line-height:1.12;margin:14px 0 0;}
.kcp__sub{color:var(--muted);font-size:17px;line-height:1.6;max-width:640px;margin-top:14px;}
.kcp__hero{padding:70px 6vw 0;max-width:1280px;margin:0 auto;}
.kcp__hero-in{max-width:900px;}
.kcp__back{display:inline-block;color:var(--muted);text-decoration:none;font-size:14px;font-weight:600;margin-bottom:34px;transition:.2s;}
.kcp__back:hover{color:var(--accent);}
.kcp__hero .kcp__eyebrow{margin-bottom:18px;}
.kcp__title{font-family:'Unbounded';font-weight:800;font-size:clamp(40px,7vw,88px);letter-spacing:-.03em;line-height:1;margin-bottom:24px;}
.kcp__lead{font-size:clamp(18px,2vw,22px);line-height:1.55;color:#d8d6d1;max-width:760px;}
.kcp__tags{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 18px;}
.kcp__tag{font-family:'Manrope',Arial,sans-serif;font-weight:600;font-size:9px;line-height:1;text-transform:uppercase;letter-spacing:.14em;color:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.22);border-radius:4px;padding:5px 8px;white-space:nowrap;}
@media (max-width:480px){ .kcp__tag{font-size:8px;padding:5px 7px;} .kcp__tags{gap:5px;margin-bottom:14px;} }
.kcp__facts{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:14px;overflow:hidden;margin-top:44px;}
.kcp__fact{background:var(--raise);padding:20px 22px;display:flex;flex-direction:column;gap:7px;}
.kcp__fact span{font-size:12px;color:var(--faint);text-transform:uppercase;letter-spacing:.06em;}
.kcp__fact b{font-family:'Unbounded';font-weight:600;font-size:14px;line-height:1.3;}
.kcp__cover{margin:48px auto 0;max-width:1280px;aspect-ratio:16/8;border-radius:20px;}
.kcp__sec{max-width:1080px;margin:0 auto;padding:64px 6vw;}
.kcp__grid2{display:grid;grid-template-columns:0.85fr 1.15fr;gap:48px;align-items:start;}
.kcp__prose p{color:#c9c7c2;font-size:17px;margin-bottom:16px;}
.kcp__prose p:last-child{margin-bottom:0;}
.kcp__prose b{color:var(--text);font-weight:600;}
.kcp__callout{background:linear-gradient(135deg,rgba(109,93,251,.10),rgba(109,93,251,.02));border:1px solid rgba(109,93,251,.3);border-radius:18px;padding:40px 44px;}
.kcp__callout-k{font-family:'Unbounded';font-size:12px;letter-spacing:.14em;color:var(--accent);margin-bottom:14px;}
.kcp__callout-t{font-family:'Unbounded';font-weight:600;font-size:clamp(20px,2.4vw,30px);line-height:1.35;letter-spacing:-.01em;}
.kcp__timeline{list-style:none;margin-top:44px;display:flex;flex-direction:column;gap:26px;}
.kcp__step{display:grid;grid-template-columns:88px 1fr;gap:26px;background:var(--raise);border:1px solid var(--border);border-radius:18px;padding:30px 32px;transition:.25s;}
.kcp__step:hover{border-color:rgba(109,93,251,.4);}
.kcp__step-num{font-family:'Unbounded';font-weight:700;font-size:34px;color:var(--accent);line-height:1;opacity:.85;}
.kcp__step-body h3{font-family:'Unbounded';font-weight:600;font-size:22px;letter-spacing:-.01em;margin-bottom:12px;}
.kcp__step-body p{color:#c4c2bd;font-size:16px;}
.kcp__step--next{background:transparent;border-style:dashed;}
.kcp__step--next .kcp__step-num{opacity:1;}
.kcp__ph{position:relative;background:repeating-linear-gradient(45deg,#141416,#141416 12px,#17171a 12px,#17171a 24px);border:2px dashed #38383e;border-radius:14px;min-height:150px;display:flex;align-items:center;justify-content:center;text-align:center;}
.kcp__ph-label{color:#8a8a90;font-size:13px;font-weight:600;line-height:1.5;padding:16px;}
.kcp__ph-label small{color:var(--faint);font-weight:500;}
.kcp__ph--wide{margin-top:18px;aspect-ratio:16/8;min-height:0;}
.kcp__ph--grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:18px;background:none;border:none;padding:0;}
.kcp__ph--grid .kcp__ph{aspect-ratio:4/3;min-height:0;}
.kcp__cover.kcp__ph{aspect-ratio:16/8;}
.kcp__ba{position:relative;margin-top:20px;aspect-ratio:16/9;border-radius:16px;overflow:hidden;border:1px solid var(--border);user-select:none;}
.kcp__ba-after,.kcp__ba-before{position:absolute;inset:0;border-radius:0;border:none;}
.kcp__ba-before{width:100%;clip-path:inset(0 50% 0 0);}
.kcp__ba-handle{position:absolute;top:0;bottom:0;left:50%;width:2px;background:var(--accent);cursor:ew-resize;transform:translateX(-1px);}
.kcp__ba-handle span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:40px;height:40px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(0,0,0,.4);}
.kcp__ba-handle span::before{content:'⟷';color:#000;font-size:18px;font-weight:700;}
.kcp__ba-tag{position:absolute;top:14px;font-family:'Unbounded';font-size:11px;letter-spacing:.1em;background:rgba(0,0,0,.6);padding:5px 11px;border-radius:6px;}
.kcp__ba-tag--l{left:14px;}
.kcp__ba-tag--r{right:14px;}
.kcp__ba-hint{text-align:center;color:var(--faint);font-size:13px;margin-top:12px;}
.kcp__result-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:34px;}
.kcp__rcard{background:var(--raise);border:1px solid var(--border);border-radius:16px;padding:26px 28px;}
.kcp__rc-t{font-family:'Unbounded';font-weight:600;font-size:18px;color:var(--accent);margin-bottom:10px;}
.kcp__rcard p{color:#c4c2bd;font-size:15px;}
.kcp__chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;}
.kcp__chips span{font-family:'Manrope';font-weight:600;font-size:14px;color:var(--text);background:rgba(109,93,251,.08);border:1px solid rgba(109,93,251,.4);border-radius:8px;padding:10px 16px;}
.kcp__video{margin-top:24px;aspect-ratio:16/9;border-radius:18px;overflow:hidden;border:1px solid var(--border);background:#000;}
.kcp__video iframe{width:100%;height:100%;border:none;}
.kcp__cta{max-width:900px;margin:20px auto 0;padding:80px 6vw 96px;text-align:center;}
.kcp__cta h2{font-family:'Unbounded';font-weight:700;font-size:clamp(26px,3.4vw,42px);letter-spacing:-.02em;margin-bottom:16px;}
.kcp__cta p{color:var(--muted);font-size:18px;margin-bottom:30px;}
.kcp__cta-btn{display:inline-block;background:var(--accent);color:#fff;text-decoration:none;font-family:'Manrope';font-weight:700;font-size:16px;padding:18px 38px;border-radius:10px;transition:.25s;}
.kcp__cta-btn:hover{transform:translateY(-2px);box-shadow:0 14px 34px var(--glow);}
@media (max-width:820px){
  .kcp__facts{grid-template-columns:1fr 1fr;}
  .kcp__grid2{grid-template-columns:1fr;gap:20px;}
  .kcp__step{grid-template-columns:1fr;gap:14px;padding:24px 22px;}
  .kcp__step-num{font-size:28px;}
  .kcp__result-grid{grid-template-columns:1fr;}
  .kcp__ph--grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:480px){
  .kcp__hero{padding:48px 20px 0;}
  .kcp__sec{padding:48px 20px;}
  .kcp__facts{grid-template-columns:1fr;}
  .kcp__callout{padding:28px 24px;}
}
.kcp [data-img].kcp--filled,.kcp [data-video].kcp--filled{background:none;border:none;}
.kcp [data-img] img,.kcp [data-video] img{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit;}
.kcp [data-fit="contain"] img{object-fit:contain;background:#0f0f11;padding:6%;}
.kcp [data-video].kcp--filled iframe{width:100%;height:100%;border:none;display:block;}
.kcp__ph.kcp--filled{padding:0;}
</style>
<script>
(function(){
  var C=window.KORS_CASE||{}; var IMG=C.images||{}, VID=C.videos||{};
  document.querySelectorAll('.kcp [data-video]').forEach(function(el){
    var id=VID[el.getAttribute('data-video')];
    if(id){ el.classList.add('kcp--filled'); el.innerHTML='<iframe src="https://kinescope.io/embed/'+id+'" allow="autoplay; fullscreen; encrypted-media; picture-in-picture" allowfullscreen frameborder="0"></iframe>'; el.removeAttribute('data-img'); }
  });
  document.querySelectorAll('.kcp [data-img]').forEach(function(el){
    var url=IMG[el.getAttribute('data-img')];
    if(url){ el.classList.add('kcp--filled'); el.innerHTML='<img src="'+url+'" alt="">'; }
  });
})();
(function(){
  var ba=document.getElementById('kcpBA'); if(!ba) return;
  var before=document.getElementById('kcpBABefore');
  var handle=document.getElementById('kcpBAHandle');
  var dragging=false;
  function setPos(clientX){
    var r=ba.getBoundingClientRect();
    var x=Math.max(0,Math.min(clientX-r.left,r.width));
    var pct=(x/r.width)*100;
    before.style.clipPath='inset(0 '+(100-pct)+'% 0 0)';
    handle.style.left=pct+'%';
  }
  handle.addEventListener('mousedown',function(){dragging=true;});
  window.addEventListener('mouseup',function(){dragging=false;});
  window.addEventListener('mousemove',function(e){ if(dragging) setPos(e.clientX); });
  handle.addEventListener('touchstart',function(){dragging=true;},{passive:true});
  window.addEventListener('touchend',function(){dragging=false;});
  window.addEventListener('touchmove',function(e){ if(dragging&&e.touches[0]) setPos(e.touches[0].clientX); },{passive:true});
  ba.addEventListener('click',function(e){ setPos(e.clientX); });
})();
</script>

rec2709838401 (22258 симв.) — /case-vistex, до обложки и галереи салфеток

<!-- ============================================================
     KORS · КЕЙС · ВИСТЕКС
     Заполнение фото/видео - только в списке KORS_CASE ниже.
     ============================================================ -->
<script>
window.KORS_CASE = {
  images: {
    cover:     '',   // обложка вверху (производство / полотна)
    email:     '',   // дизайн письма со встроенным видео (скрин)
    label1:    '',   // концепт этикетки/салфетки 1 (мультяшная стилистика)
    label2:    '',   // концепт этикетки/салфетки 2
    siteSoon:  ''    // макет сайта (в планах)
  },
  videos: {
    main:  'fv7FAnLfbLaDaNJLtSQ74H'   // главное видео о заводе (стоит наш ролик)
  }
};
</script>

<div class="kcp">
<header class="kcp__hero">
    <div class="kcp__hero-in">
      <a class="kcp__back" href="/#rec2667018101">← Все проекты</a>
      <div class="kcp__eyebrow">КЕЙС · ПРОИЗВОДСТВО · ВИДЕО</div>
      <h1 class="kcp__title">Вистекс</h1>
      <div class="kcp__tags"><span class="kcp__tag">Видео</span><span class="kcp__tag">Дизайн</span></div>
      <p class="kcp__lead">Как уложить завод с восемью направлениями в трёхминутный ролик - и превратить его в рабочий инструмент отдела продаж.</p>
      <div class="kcp__facts">
        <div class="kcp__fact"><span>Сфера</span><b>Нетканые материалы · B2B</b></div>
        <div class="kcp__fact"><span>С чего начали</span><b>Видео о заводе</b></div>
        <div class="kcp__fact"><span>Результат</span><b>Ролик работает в продажах</b></div>
        <div class="kcp__fact"><span>Дальше</span><b>Этикетки, салфетки, сайт</b></div>
      </div>
    </div>
    <div class="kcp__cover kcp__ph" data-img="cover"><div class="kcp__ph-label">📷 Обложка: производство / нетканые полотна (2:1)</div></div>
  </header>
  <section class="kcp__sec">
    <div class="kcp__grid2">
      <div><div class="kcp__kick">- О КОМПАНИИ</div><h2 class="kcp__h2">Большой завод с восемью направлениями</h2></div>
      <div class="kcp__prose">
        <p>«Вистекс» - один из крупнейших производителей нетканых полотен в европейской части России (работает с 1992 года, завод в подмосковном Кудинове). Продукция закрывает сразу восемь направлений: геотекстиль, материалы для обуви и мебели, для автопрома, напольных покрытий, протирочных салфеток, фильтров и другие.</p>
        <p>Производство мощное и разнообразное - но именно в этом сложность: <b>рассказать клиенту про все направления и масштаб</b> коротко и понятно почти невозможно, если делать это на словах.</p>
      </div>
    </div>
  </section>
  <section class="kcp__sec">
    <div class="kcp__callout">
      <div class="kcp__callout-k">ЗАДАЧА</div>
      <div class="kcp__callout-t">За несколько минут показать масштаб завода и все направления так, чтобы клиент увидел: здесь закроют его задачу - какой бы она ни была.</div>
    </div>
  </section>
  <section class="kcp__sec">
    <div class="kcp__kick">- КАК ШЛА РАБОТА</div>
    <h2 class="kcp__h2">От ролика о заводе - к письму для продаж</h2>
    <p class="kcp__sub">Начали с одного большого видео о производстве - и оно стало рабочим инструментом, который принёс заводу конкретный результат.</p>
    <ol class="kcp__timeline">
      <li class="kcp__step"><div class="kcp__step-num">01</div><div class="kcp__step-body">
        <h3>Видео о заводе: 8 направлений за 3 минуты</h3>
        <p>Сняли ключевой ролик о производстве: за три минуты показали все восемь направлений завода. Плотно, наглядно, без воды - уровень продакшена под стать масштабу компании.</p>
        <div class="kcp__ph kcp__ph--wide" data-video="main"><div class="kcp__ph-label">🎬 Видео о заводе (Kinescope)</div></div>
      </div></li>
      <li class="kcp__step"><div class="kcp__step-num">02</div><div class="kcp__step-body">
        <h3>Дизайн письма со встроенным видео</h3>
        <p>Ролик начали отправлять клиентам - и мы собрали под него готовое HTML-письмо для рассылки коммерческих предложений. Внутри: логотип завода, короткий текст от менеджера по развитию, превью ролика с кнопкой воспроизведения и пометка, что коммерческое предложение приложено отдельным файлом.</p>
        <p>Что изменилось в работе: <b>коммерческие предложения уходят вместе с роликом, и продукт больше не приходится объяснять текстом - клиент сразу видит завод, линии и готовую продукцию.</b></p>
        <div class="kcp__ph kcp__ph--wide" data-img="email"><div class="kcp__ph-label">✉️ дизайн письма со встроенным видео (скрин)</div></div>
      </div></li>
      <li class="kcp__step"><div class="kcp__step-num">03</div><div class="kcp__step-body">
        <h3>Дизайн этикеток и салфеток - концепты</h3>
        <p>Пошли дальше в брендинг потребительской продукции. Предложили заводу концепты дизайна этикеток и салфеток в фирменной мультяшной стилистике: уникальная графика, копирайтинг и описания - всё под ключ с нашей стороны.</p>
        <div class="kcp__ph kcp__ph--grid">
          <div class="kcp__ph" data-img="label1"><div class="kcp__ph-label">🎨 концепт этикетки/салфетки 1</div></div>
          <div class="kcp__ph" data-img="label2"><div class="kcp__ph-label">🎨 концепт этикетки/салфетки 2</div></div>
        </div>
      </div></li>
      <li class="kcp__step kcp__step--next"><div class="kcp__step-num">→</div><div class="kcp__step-body">
        <h3>Что дальше</h3>
        <p>Следующий этап - сайт завода: единая витрина всех направлений с той же понятной подачей, что и в видео.</p>
        <!-- СЛОТ СКРЫТ 28.08.2026. Причина: макета сайта пока нет, заглушка оставляла пустое место. Ключ images.siteSoon в конфиге сохранён - чтобы вернуть слот, снимите этот комментарий.
        <div class="kcp__ph kcp__ph--wide" data-img="siteSoon"><div class="kcp__ph-label">макет сайта (появится)</div></div>
        -->
      </div></li>
    </ol>
  </section>
  <section class="kcp__sec">
    <div class="kcp__result">
      <div class="kcp__kick">- ЧТО ИЗМЕНИЛОСЬ</div>
      <h2 class="kcp__h2">Ролик и письмо, которые работают в продажах</h2>
      <div class="kcp__result-grid">
        <div class="kcp__rcard"><div class="kcp__rc-t">8 направлений за 3 минуты</div><p>Сложное многопрофильное производство укладывается в один понятный ролик.</p></div>
        <div class="kcp__rcard"><div class="kcp__rc-t">Продукт стали понимать</div><p>С письмом и видео клиенты сразу видят, что завод может закрыть их потребности.</p></div>
        <div class="kcp__rcard"><div class="kcp__rc-t">Продажи с видео в руках</div><p>Менеджеры отправляют коммерческие предложения вместе с роликом - завод показывают, а не пересказывают.</p></div>
        <div class="kcp__rcard"><div class="kcp__rc-t">Развитие бренда</div><p>Концепты этикеток и салфеток, впереди - сайт завода.</p></div>
      </div>
    </div>
  </section>
  <section class="kcp__sec">
    <div class="kcp__kick">- ЧТО ВОШЛО В РАБОТУ</div>
    <div class="kcp__chips">
      <span>Видеопродакшн</span><span>Съёмка производства</span><span>Сценарий / 8 направлений</span><span>Email-дизайн</span><span>Видео в письме</span><span>Концепты этикеток и салфеток</span><span>Копирайтинг</span><span>Сайт (в планах)</span>
    </div>
  </section>
  <!-- ===== ВИДЕО ПРОЕКТА (СКРЫТО) =====
     СЕКЦИЯ СКРЫТА 28.08.2026. Причина: тот же ролик уже стоит в шаге 01, на странице он дублировался.
     Разметка сохранена целиком. Чтобы вернуть секцию, снимите этот комментарий.
  <section class="kcp__sec">
    <div class="kcp__kick">- СМОТРЕТЬ</div>
    <h2 class="kcp__h2">Видео проекта</h2>
    <div class="kcp__video"><iframe src="https://kinescope.io/embed/fv7FAnLfbLaDaNJLtSQ74H" allow="autoplay; fullscreen; encrypted-media; picture-in-picture" allowfullscreen frameborder="0"></iframe></div>
  </section>
  -->
  <section class="kcp__sec">
    <div class="kcp__kick">- ОТЗЫВ</div>
    <h2 class="kcp__h2">Благодарственное письмо</h2>
    <p class="kcp__sub">ООО «Вистекс» - производитель нетканых полотен, завод в подмосковном Кудинове</p>
    <div class="kcp__letter"><img src="https://static.tildacdn.com/tild3665-6165-4336-a262-666463636263/pismo-visteks-1200.jpg" alt="Благодарственное письмо от ООО «Вистекс» команде KORS Production за фильм о производстве и дизайн материалов" loading="lazy"></div>
  </section>
  <section class="kcp__sec">
    <div class="kcp__kick">- ЕЩЁ</div>
    <h2 class="kcp__h2">Другие кейсы</h2>
    <div class="kcp__more">
      <a class="kcp__more-card" href="/case-odoevskie"><span>Кейс</span><b>Одоевские консервы</b><i>Съёмка производства и ребрендинг →</i></a>
      <a class="kcp__more-card" href="/case-invoicebox"><span>Кейс</span><b>Инвойсбокс</b><i>Видеоматериалы для платформы →</i></a>
    </div>
  </section>
  <section class="kcp__cta">
    <h2>Сложное производство? Покажем за минуты.</h2>
    <p>Упакуем ваш завод в видео и материалы, с которыми проще продавать.</p>
    <a class="kcp__cta-btn" href="#popup:zayavka">Обсудить проект →</a>
  </section>
</div>

<style>
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Unbounded:wght@400;600;700;800&display=swap');
.kcp{--bg:#0C0C0E;--raise:#141416;--card:#1B1B1F;--border:#2A2A2E;--soft:#242428;--text:#F5F3EF;--muted:#9A9A9A;--faint:#6a6a6e;--accent:#6D5DFB;--glow:rgba(109,93,251,.14);
  box-sizing:border-box;background:var(--bg);color:var(--text);font-family:'Manrope',Arial,sans-serif;-webkit-font-smoothing:antialiased;}
.kcp *{box-sizing:border-box;margin:0;padding:0;}
.kcp p{line-height:1.65;}
.kcp__eyebrow,.kcp__kick{font-family:'Unbounded';font-size:12px;letter-spacing:.14em;color:var(--accent);}
.kcp__h2{font-family:'Unbounded';font-weight:700;font-size:clamp(26px,3.2vw,42px);letter-spacing:-.02em;line-height:1.12;margin:14px 0 0;}
.kcp__sub{color:var(--muted);font-size:17px;line-height:1.6;max-width:640px;margin-top:14px;}
.kcp__hero{padding:70px 6vw 0;max-width:1280px;margin:0 auto;}
.kcp__hero-in{max-width:900px;}
.kcp__back{display:inline-block;color:var(--muted);text-decoration:none;font-size:14px;font-weight:600;margin-bottom:34px;transition:.2s;}
.kcp__back:hover{color:var(--accent);}
.kcp__hero .kcp__eyebrow{margin-bottom:18px;}
.kcp__title{font-family:'Unbounded';font-weight:800;font-size:clamp(40px,7vw,88px);letter-spacing:-.03em;line-height:1;margin-bottom:24px;}
.kcp__lead{font-size:clamp(18px,2vw,22px);line-height:1.55;color:#d8d6d1;max-width:760px;}
.kcp__tags{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 18px;}
.kcp__tag{font-family:'Manrope',Arial,sans-serif;font-weight:600;font-size:9px;line-height:1;text-transform:uppercase;letter-spacing:.14em;color:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.22);border-radius:4px;padding:5px 8px;white-space:nowrap;}
@media (max-width:480px){ .kcp__tag{font-size:8px;padding:5px 7px;} .kcp__tags{gap:5px;margin-bottom:14px;} }
.kcp__facts{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:14px;overflow:hidden;margin-top:44px;}
.kcp__fact{background:var(--raise);padding:20px 22px;display:flex;flex-direction:column;gap:7px;}
.kcp__fact span{font-size:12px;color:var(--faint);text-transform:uppercase;letter-spacing:.06em;}
.kcp__fact b{font-family:'Unbounded';font-weight:600;font-size:14px;line-height:1.3;}
.kcp__cover{margin:48px auto 0;max-width:1280px;aspect-ratio:16/8;border-radius:20px;}
.kcp__sec{max-width:1080px;margin:0 auto;padding:64px 6vw;}
.kcp__grid2{display:grid;grid-template-columns:0.85fr 1.15fr;gap:48px;align-items:start;}
.kcp__prose p{color:#c9c7c2;font-size:17px;margin-bottom:16px;}
.kcp__prose p:last-child{margin-bottom:0;}
.kcp__prose b{color:var(--text);font-weight:600;}
.kcp__callout{background:linear-gradient(135deg,rgba(109,93,251,.10),rgba(109,93,251,.02));border:1px solid rgba(109,93,251,.3);border-radius:18px;padding:40px 44px;}
.kcp__callout-k{font-family:'Unbounded';font-size:12px;letter-spacing:.14em;color:var(--accent);margin-bottom:14px;}
.kcp__callout-t{font-family:'Unbounded';font-weight:600;font-size:clamp(20px,2.4vw,30px);line-height:1.35;letter-spacing:-.01em;}
.kcp__timeline{list-style:none;margin-top:44px;display:flex;flex-direction:column;gap:26px;}
.kcp__step{display:grid;grid-template-columns:88px 1fr;gap:26px;background:var(--raise);border:1px solid var(--border);border-radius:18px;padding:30px 32px;transition:.25s;}
.kcp__step:hover{border-color:rgba(109,93,251,.4);}
.kcp__step-num{font-family:'Unbounded';font-weight:700;font-size:34px;color:var(--accent);line-height:1;opacity:.85;}
.kcp__step-body h3{font-family:'Unbounded';font-weight:600;font-size:22px;letter-spacing:-.01em;margin-bottom:12px;}
.kcp__step-body p{color:#c4c2bd;font-size:16px;}
.kcp__step--next{background:transparent;border-style:dashed;}
.kcp__step--next .kcp__step-num{opacity:1;}
.kcp__ph{position:relative;background:repeating-linear-gradient(45deg,#141416,#141416 12px,#17171a 12px,#17171a 24px);border:2px dashed #38383e;border-radius:14px;min-height:150px;display:flex;align-items:center;justify-content:center;text-align:center;}
.kcp__ph-label{color:#8a8a90;font-size:13px;font-weight:600;line-height:1.5;padding:16px;}
.kcp__ph-label small{color:var(--faint);font-weight:500;}
.kcp__ph--wide{margin-top:18px;aspect-ratio:16/8;min-height:0;}
.kcp__ph--grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:18px;background:none;border:none;padding:0;}
.kcp__ph--grid .kcp__ph{aspect-ratio:4/3;min-height:0;}
.kcp__cover.kcp__ph{aspect-ratio:16/8;}
.kcp__ba{position:relative;margin-top:20px;aspect-ratio:16/9;border-radius:16px;overflow:hidden;border:1px solid var(--border);user-select:none;}
.kcp__ba-after,.kcp__ba-before{position:absolute;inset:0;border-radius:0;border:none;}
.kcp__ba-before{width:100%;clip-path:inset(0 50% 0 0);}
.kcp__ba-handle{position:absolute;top:0;bottom:0;left:50%;width:2px;background:var(--accent);cursor:ew-resize;transform:translateX(-1px);}
.kcp__ba-handle span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:40px;height:40px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(0,0,0,.4);}
.kcp__ba-handle span::before{content:'⟷';color:#000;font-size:18px;font-weight:700;}
.kcp__ba-tag{position:absolute;top:14px;font-family:'Unbounded';font-size:11px;letter-spacing:.1em;background:rgba(0,0,0,.6);padding:5px 11px;border-radius:6px;}
.kcp__ba-tag--l{left:14px;}
.kcp__ba-tag--r{right:14px;}
.kcp__ba-hint{text-align:center;color:var(--faint);font-size:13px;margin-top:12px;}
.kcp__result-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:34px;}
.kcp__rcard{background:var(--raise);border:1px solid var(--border);border-radius:16px;padding:26px 28px;}
.kcp__rc-t{font-family:'Unbounded';font-weight:600;font-size:18px;color:var(--accent);margin-bottom:10px;}
.kcp__rcard p{color:#c4c2bd;font-size:15px;}
.kcp__chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;}
.kcp__chips span{font-family:'Manrope';font-weight:600;font-size:14px;color:var(--text);background:rgba(109,93,251,.08);border:1px solid rgba(109,93,251,.4);border-radius:8px;padding:10px 16px;}
.kcp__video{margin-top:24px;aspect-ratio:16/9;border-radius:18px;overflow:hidden;border:1px solid var(--border);background:#000;}
.kcp__video iframe{width:100%;height:100%;border:none;}
.kcp__cta{max-width:900px;margin:20px auto 0;padding:80px 6vw 96px;text-align:center;}
.kcp__cta h2{font-family:'Unbounded';font-weight:700;font-size:clamp(26px,3.4vw,42px);letter-spacing:-.02em;margin-bottom:16px;}
.kcp__cta p{color:var(--muted);font-size:18px;margin-bottom:30px;}
.kcp__cta-btn{display:inline-block;background:var(--accent);color:#fff;text-decoration:none;font-family:'Manrope';font-weight:700;font-size:16px;padding:18px 38px;border-radius:10px;transition:.25s;}
.kcp__cta-btn:hover{transform:translateY(-2px);box-shadow:0 14px 34px var(--glow);}
@media (max-width:820px){
  .kcp__facts{grid-template-columns:1fr 1fr;}
  .kcp__grid2{grid-template-columns:1fr;gap:20px;}
  .kcp__step{grid-template-columns:1fr;gap:14px;padding:24px 22px;}
  .kcp__step-num{font-size:28px;}
  .kcp__result-grid{grid-template-columns:1fr;}
  .kcp__ph--grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:480px){
  .kcp__hero{padding:48px 20px 0;}
  .kcp__sec{padding:48px 20px;}
  .kcp__facts{grid-template-columns:1fr;}
  .kcp__callout{padding:28px 24px;}
}
.kcp [data-img].kcp--filled,.kcp [data-video].kcp--filled{background:none;border:none;}
.kcp [data-img] img,.kcp [data-video] img{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit;}
.kcp [data-fit="contain"] img{object-fit:contain;background:#0f0f11;padding:6%;}
.kcp [data-video].kcp--filled iframe{width:100%;height:100%;border:none;display:block;}
.kcp__ph.kcp--filled{padding:0;}

.kcp__letter{margin-top:26px;max-width:440px;}
.kcp__letter img{display:block;width:100%;height:auto;border-radius:14px;border:1px solid var(--border);}
.kcp__more{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:28px;}
.kcp__more-card{display:block;background:var(--raise);border:1px solid var(--border);border-radius:16px;padding:24px 26px;text-decoration:none;transition:.2s;}
.kcp__more-card:hover{border-color:var(--accent);}
.kcp__more-card span{display:block;font-size:12px;letter-spacing:2px;color:var(--accent);text-transform:uppercase;margin-bottom:10px;}
.kcp__more-card b{display:block;font-family:Unbounded,sans-serif;font-weight:700;font-size:22px;line-height:1.2;color:var(--text);margin-bottom:8px;}
.kcp__more-card i{font-style:normal;font-size:15px;color:var(--muted);}
.kcp--filled img{cursor:zoom-in;}
.kcp__letter img{cursor:zoom-in;}
.kcp__lb{position:fixed;inset:0;z-index:99999;display:none;align-items:center;justify-content:center;padding:64px 40px;}
.kcp__lb.open{display:flex;}
.kcp__lbbd{position:absolute;inset:0;background:rgba(4,4,6,.9);backdrop-filter:blur(4px);}
.kcp__lbbox{position:relative;max-width:min(1100px,100%);display:flex;align-items:center;justify-content:center;}
.kcp__lbbox img{display:block;max-width:100%;max-height:calc(100vh - 170px);width:auto;height:auto;border-radius:10px;background:#0f0f11;}
.kcp__lbx{position:absolute;top:-48px;right:0;width:38px;height:38px;border-radius:9px;background:var(--raise);border:1px solid var(--border);color:var(--text);font:20px/1 Arial,sans-serif;cursor:pointer;padding:0;}
.kcp__lbx:hover{border-color:var(--accent);color:var(--accent);}
.kcp__lbnav{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;background:var(--raise);border:1px solid var(--border);color:var(--text);font:20px/1 Arial,sans-serif;cursor:pointer;padding:0;}
.kcp__lbnav.prev{left:-58px;}
.kcp__lbnav.next{right:-58px;}
.kcp__lbnav:hover{border-color:var(--accent);color:var(--accent);}
.kcp__lbcap{position:absolute;left:0;right:0;bottom:-38px;text-align:center;color:var(--muted);font-size:14px;}
@media (max-width:640px){.kcp__lb{padding:56px 14px;}.kcp__lbnav.prev{left:2px;}.kcp__lbnav.next{right:2px;}.kcp__more{grid-template-columns:1fr;}.kcp__letter{max-width:100%;}}
</style>
<script>
(function(){
  var C=window.KORS_CASE||{}; var IMG=C.images||{}, VID=C.videos||{};
  var ALT={cover:'Завод «Вистекс» - производство нетканых полотен, кадр из фильма KORS Production',email:'Дизайн письма со встроенным видео для рассылки коммерческих предложений завода «Вистекс»',label1:'Концепт дизайна этикетки для продукции завода «Вистекс»',label2:'Концепт дизайна протирочных салфеток для завода «Вистекс»',siteSoon:'Макет сайта завода «Вистекс»'};
  document.querySelectorAll('.kcp [data-video]').forEach(function(el){
    var id=VID[el.getAttribute('data-video')];
    if(id){ el.classList.add('kcp--filled'); el.innerHTML='<iframe src="https://kinescope.io/embed/'+id+'" allow="autoplay; fullscreen; encrypted-media; picture-in-picture" allowfullscreen frameborder="0"></iframe>'; el.removeAttribute('data-img'); }
  });
  document.querySelectorAll('.kcp [data-img]').forEach(function(el){
    var url=IMG[el.getAttribute('data-img')];
    if(url){ el.classList.add('kcp--filled'); el.innerHTML='<img src="'+url+'" alt="'+(ALT[el.getAttribute('data-img')]||'')+'" loading="lazy">'; }
  });
})();
</script>

<script>
(function(){
  var root=document.querySelector('.kcp'); if(!root) return;
  var lb=document.createElement('div'); lb.className='kcp__lb';
  lb.innerHTML='<div class="kcp__lbbd"></div><div class="kcp__lbbox"><button class="kcp__lbx" type="button" aria-label="Закрыть">×</button><button class="kcp__lbnav prev" type="button" aria-label="Предыдущий кадр">‹</button><img alt=""><button class="kcp__lbnav next" type="button" aria-label="Следующий кадр">›</button><div class="kcp__lbcap"></div></div>';
  document.body.appendChild(lb);
  var pic=lb.querySelector('.kcp__lbbox img'), cap=lb.querySelector('.kcp__lbcap');
  var prev=lb.querySelector('.prev'), next=lb.querySelector('.next');
  var list=[], idx=0;
  function collect(){ list=[].slice.call(root.querySelectorAll('.kcp--filled img, .kcp__letter img')); }
  function show(){ var el=list[idx]; if(!el) return; pic.src=el.currentSrc||el.src; pic.alt=el.alt||''; var multi=list.length>1; cap.textContent=multi?(idx+1)+' из '+list.length:''; prev.style.display=multi?'':'none'; next.style.display=multi?'':'none'; }
  function open(i){ idx=i; show(); lb.classList.add('open'); document.documentElement.style.overflow='hidden'; }
  function close(){ lb.classList.remove('open'); pic.src=''; document.documentElement.style.overflow=''; }
  function step(d){ if(!list.length) return; idx=(idx+d+list.length)%list.length; show(); }
  root.addEventListener('click',function(e){ var t=e.target; if(!t || t.tagName!=='IMG') return; if(!t.closest('.kcp--filled, .kcp__letter')) return; collect(); var i=list.indexOf(t); if(i<0) return; e.preventDefault(); open(i); });
  lb.querySelector('.kcp__lbbd').addEventListener('click',close);
  lb.querySelector('.kcp__lbx').addEventListener('click',close);
  prev.addEventListener('click',function(){ step(-1); });
  next.addEventListener('click',function(){ step(1); });
  document.addEventListener('keydown',function(e){ if(!lb.classList.contains('open')) return; if(e.key==='Escape') close(); else if(e.key==='ArrowLeft') step(-1); else if(e.key==='ArrowRight') step(1); });
})();
</script>

rec3237946401 — первый экран (2872 симв.)

<style>
/* ---------- Hero ---------- */
.hero{padding:168px 0 78px;position:relative}
.hero::before{content:'';position:absolute;top:-140px;right:-160px;width:620px;height:620px;background:radial-gradient(circle,rgba(109,93,251,.3),transparent 62%);filter:blur(10px);pointer-events:none}
.hero::after{content:'';position:absolute;bottom:-160px;left:-200px;width:520px;height:520px;background:radial-gradient(circle,rgba(109,93,251,.16),transparent 60%);pointer-events:none}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center;position:relative;z-index:1}
.hero .sub{margin:24px 0 34px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap}
.hero-trust{display:flex;gap:34px;margin-top:44px;flex-wrap:wrap}
.hero-trust div b{font-size:30px;font-weight:700;letter-spacing:-.03em;display:block;line-height:1.1}
.hero-trust div span{font-size:13.5px;color:var(--muted)}
.hero-collage{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:150px;gap:14px}
.hero-collage .ph{box-shadow:0 0 0 1px var(--line)}
.hero-collage .ph:first-child{grid-column:1/-1;grid-row:span 2;min-height:0}
.hero-note{margin-top:14px;font-size:13px;color:var(--gray)}
</style>
<section class="hero">
  <div class="container hero-grid">
    <div>
      <div class="eyebrow">KORS · продающие сайты для бизнеса</div>
      <h1>Сайты для бизнеса с <span class="squig">конверсией от 5%<svg viewBox="0 0 300 24" preserveAspectRatio="none" aria-hidden="true"><path d="M4 14 C70 5 180 4 296 11"/><path d="M140 20 C200 13 255 12 293 16"/></svg></span> — первые заявки через 21 день</h1>
      <p class="sub">Смыслы, тексты, дизайн, сборка и реклама — одной командой KORS. Плюс то, чего не даст обычная веб-студия: своя съёмочная команда — реальные фото и видео вашего бизнеса вместо стоковых картинок.</p>
      <div class="hero-cta">
        <a class="btn btn-primary" href="#quiz">Получить план запуска</a>
        <a class="btn btn-ghost" href="#cases">Смотреть кейсы</a>
      </div>
      <div class="hero-trust">
        <div><b>460+</b><span>проектов студии<br>с 2019 года</span></div>
        <div><b>30+</b><span>ниш — от производств и b2b<br>до услуг и ритейла</span></div>
        <div><b>6,4%</b><span>средняя конверсия<br>наших сайтов в заявку</span></div>
      </div>
    </div>
    <div>
      <div class="hero-collage">
        <div class="ph"><div class="ph-ico">🖥️</div><div class="ph-cap"><b>Сюда: скрин</b>главный экран лучшего сайта KORS</div></div>
        <div class="ph"><div class="ph-ico">📱</div><div class="ph-cap"><b>Сюда: фото</b>мобильная версия сайта</div></div>
        <div class="ph"><div class="ph-ico">🎬</div><div class="ph-cap"><b>Сюда: видео</b>шоурил KORS — уже есть на korsprod.ru</div></div>
      </div>
      <p class="hero-note">Плейсхолдеры: заменить на 3 реальных скрина/видео работ студии.</p>
    </div>
  </div>
</section>

rec3238063701 — результаты в цифрах (2827 симв.)

<style>
/* ---------- Stats ---------- */
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.stat{background:var(--card);border-radius:var(--r-md);padding:30px 28px;box-shadow:0 0 0 1px var(--line)}
.stat .stat-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.stat b{font-size:clamp(34px,3.4vw,48px);font-weight:700;letter-spacing:-.035em;line-height:1}
.stat span.lbl{font-size:14.5px;color:var(--muted);line-height:1.5;display:block}
.pill-up{background:var(--green);color:#fff;border-radius:999px;padding:5px 13px;font-weight:700;font-size:13.5px;letter-spacing:-.01em;white-space:nowrap}
.pill-soft{background:var(--peach);color:var(--accent-txt);border-radius:999px;padding:5px 13px;font-weight:700;font-size:13.5px;white-space:nowrap}
</style>
<section>
  <div class="container">
    <div class="eyebrow reveal">Что получают клиенты</div>
    <h2 class="reveal">Результаты в цифрах, а не в обещаниях</h2>
    <p class="sub reveal">Средние показатели по проектам студии за последние два года.</p>
    <div class="stats-grid" style="margin-top:44px">
      <div class="stat reveal"><div class="stat-top"><b data-count="4.6" data-prefix="×">×4,6</b><span class="pill-up">рост</span></div><span class="lbl">вырастает поток заявок после переупаковки сайта</span></div>
      <div class="stat reveal"><div class="stat-top"><b data-count="6.4" data-suffix="%">6,4%</b></div><span class="lbl">средняя конверсия сайтов студии в заявку</span></div>
      <div class="stat reveal"><div class="stat-top"><b data-count="48" data-prefix="−" data-suffix="%">−48%</b><span class="pill-up">к цене заявки</span></div><span class="lbl">настолько дешевле обходится заявка после запуска</span></div>
      <div class="stat reveal"><div class="stat-top"><b data-count="21">21</b><span class="pill-soft">день</span></div><span class="lbl">от старта работ до первых обращений</span></div>
    </div>
    <div class="draft-note reveal">✏️ Цифры черновые — заменим на реальную статистику студии</div>
  </div>
</section>
<script>
if(!reduced){
  var cIo=new IntersectionObserver(function(es){
    es.forEach(function(e){
      if(!e.isIntersecting)return;
      var el=e.target,target=parseFloat(el.dataset.count),pre=el.dataset.prefix||'',suf=el.dataset.suffix||'';
      var dec=(el.dataset.count.indexOf('.')>-1)?1:0,t0=null;
      function tick(t){
        if(!t0)t0=t;
        var k=Math.min((t-t0)/1100,1),v=(target*(0.2+0.8*k*k)).toFixed(dec).replace('.',',');
        if(k>=1)v=target.toFixed(dec).replace('.',',');
        el.textContent=pre+v+suf;
        if(k<1)requestAnimationFrame(tick);
      }
      requestAnimationFrame(tick);
      cIo.unobserve(el);
    });
  },{threshold:.5});
  document.querySelectorAll('[data-count]').forEach(function(el){cIo.observe(el)});
}
</script>

rec3238295901 — проблемы (2103 симв.)

<style>
/* ---------- Проблемы ---------- */
.pains-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:44px 16px;margin-top:64px}
.pain{position:relative;background:var(--card-soft);border-radius:0 var(--r-md) var(--r-md) var(--r-md);padding:32px;box-shadow:0 0 0 1px var(--line);transition:transform .2s}
.pain::before{content:'';position:absolute;top:-22px;left:0;width:46%;max-width:230px;height:24px;background:var(--card-soft);border-radius:14px 28px 0 0}
.pain:hover{transform:translateY(-4px);box-shadow:0 0 0 1px var(--accent)}
.pain .bolt{position:absolute;top:26px;right:26px;width:34px;height:34px}
.pain h3{font-size:24px;margin-bottom:12px;max-width:82%}
.pain p{color:var(--muted);font-size:15.5px;max-width:88%}
</style>
<section style="padding-top:0">
  <div class="container">
    <div class="eyebrow reveal">Проблемы</div>
    <h2 class="reveal">Знакомая ситуация? С этим к нам и приходят</h2>
    <div class="pains-grid">
      <div class="pain reveal"><svg class="bolt" viewBox="0 0 24 24" aria-hidden="true"><path d="M13.5 2 4.5 14h6l-2 8 9.5-12.5h-6z" fill="#a99cff"/></svg><h3>Сайт есть — заявок нет</h3><p>Люди заходят каждый день, листают и молча закрывают вкладку. Форма пустует неделями.</p></div>
      <div class="pain reveal"><svg class="bolt" viewBox="0 0 24 24" aria-hidden="true"><path d="M13.5 2 4.5 14h6l-2 8 9.5-12.5h-6z" fill="#a99cff"/></svg><h3>Реклама сжигает бюджет</h3><p>Клики идут, отчёты красивые, а на выходе — ноль продаж и вопрос «за что мы платим».</p></div>
      <div class="pain reveal"><svg class="bolt" viewBox="0 0 24 24" aria-hidden="true"><path d="M13.5 2 4.5 14h6l-2 8 9.5-12.5h-6z" fill="#a99cff"/></svg><h3>Сэкономили на фрилансере</h3><p>Сделали «недорого», а теперь второй год платите за правки — и всё равно не работает.</p></div>
      <div class="pain reveal"><svg class="bolt" viewBox="0 0 24 24" aria-hidden="true"><path d="M13.5 2 4.5 14h6l-2 8 9.5-12.5h-6z" fill="#a99cff"/></svg><h3>Летите вслепую</h3><p>Непонятно, откуда пришла заявка, сколько стоит клиент и что вообще нужно менять.</p></div>
    </div>
  </div>
</section>

rec3238347601 — кейсы (6463 симв.)

<style>
/* ---------- Кейсы ---------- */
.case{background:var(--dark-2);border-radius:32px;padding:38px;margin-top:26px;display:grid;grid-template-columns:1.08fr .92fr;gap:38px;align-items:center}
.case-tag{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#a99cff;background:rgba(109,93,251,.16);border-radius:999px;padding:8px 15px;margin-bottom:16px}
.case h3{font-size:clamp(21px,2.3vw,29px);line-height:1.15;margin-bottom:12px;letter-spacing:-.025em}
.case-task{color:var(--gray);font-size:15.5px;margin-bottom:26px}
.case-task b{color:#fff;font-weight:600}
.ba{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:stretch}
.ba-col{background:#0c0c0e;border-radius:20px;padding:20px}
.ba-col h4{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#66645f;margin-bottom:14px}
.ba-col.after{background:var(--dark-3)}
.ba-col.after h4{color:var(--gray)}
.ba-col ul{list-style:none}
.ba-col li{display:flex;justify-content:space-between;gap:12px;font-size:14px;padding:8px 0;border-top:1px solid var(--line-dark);color:var(--gray)}
.ba-col li:first-of-type{border-top:none}
.ba-col li b{font-weight:700;white-space:nowrap;color:#c8c6c1;letter-spacing:-.02em}
.ba-col.after li b{color:#fff;font-size:16px}
.ba-arrow{align-self:center;font-size:24px;color:var(--accent-txt)}
.case-delta{display:flex;gap:10px;margin-top:24px;flex-wrap:wrap}
.delta-pill{background:var(--green);color:#fff;border-radius:999px;padding:9px 18px;font-weight:700;font-size:15px;letter-spacing:-.01em}
.delta-pill small{display:block;font-size:10.5px;font-weight:600;opacity:.85;letter-spacing:.04em;text-transform:uppercase}
.case .ph{min-height:300px;height:100%}
</style>
<div class="section-dark" id="cases">
  <div class="ghost" aria-hidden="true">кейсы</div>
  <section>
  <div class="container">
    <div class="sec-head-c">
      <h2 class="reveal">Как выглядит <span class="circled">система<svg viewBox="0 0 320 116" preserveAspectRatio="none" aria-hidden="true"><path d="M28 62 C38 20 268 6 300 44 C328 78 250 106 152 105 C64 104 16 94 24 66"/></svg></span> привлечения заявок в реальных проектах</h2>
      <p class="sub reveal">Структура карточек готова — останется подставить ваши ниши, скрины и метрики.</p>
    </div>
    <div class="case reveal">
      <div>
        <span class="case-tag">Производство мебели · b2c</span>
        <h3>+814% заявок и −58% к стоимости обращения</h3>
        <p class="case-task"><b>Задача:</b> уйти от зависимости от сарафана и построить управляемый поток заявок с рекламы.</p>
        <div class="ba">
          <div class="ba-col"><h4>До</h4><ul>
            <li><span>Конверсия сайта</span><b>0,9%</b></li>
            <li><span>Заявок / мес.</span><b>7</b></li>
            <li><span>Стоимость заявки</span><b>3 900 ₽</b></li>
          </ul></div>
          <div class="ba-arrow">→</div>
          <div class="ba-col after"><h4>После</h4><ul>
            <li><span>Конверсия сайта</span><b>6,2%</b></li>
            <li><span>Заявок / мес.</span><b>64</b></li>
            <li><span>Стоимость заявки</span><b>1 620 ₽</b></li>
          </ul></div>
        </div>
        <div class="case-delta">
          <span class="delta-pill">+814% <small>заявок</small></span>
          <span class="delta-pill">−58% <small>цена заявки</small></span>
          <span class="delta-pill">×6,8 <small>конверсия</small></span>
        </div>
      </div>
      <div class="ph ph-dark"><div class="ph-ico">🖥️</div><div class="ph-cap"><b>Сюда: скрин</b>главный экран сайта из кейса №1</div></div>
    </div>
    <div class="case reveal">
      <div>
        <span class="case-tag">Сеть автосервисов · услуги</span>
        <h3>С 12 до 87 записей в месяц на том же рекламном бюджете</h3>
        <p class="case-task"><b>Задача:</b> сайт-визитка не объяснял, почему ехать именно сюда, а не к гаражному мастеру. Переупаковали смыслы и структуру.</p>
        <div class="ba">
          <div class="ba-col"><h4>До</h4><ul>
            <li><span>Конверсия сайта</span><b>1,4%</b></li>
            <li><span>Заявок / мес.</span><b>12</b></li>
            <li><span>Записей на сервис</span><b>8</b></li>
          </ul></div>
          <div class="ba-arrow">→</div>
          <div class="ba-col after"><h4>После</h4><ul>
            <li><span>Конверсия сайта</span><b>7,8%</b></li>
            <li><span>Заявок / мес.</span><b>87</b></li>
            <li><span>Записей на сервис</span><b>61</b></li>
          </ul></div>
        </div>
        <div class="case-delta">
          <span class="delta-pill">+625% <small>заявок</small></span>
          <span class="delta-pill">×5,6 <small>конверсия</small></span>
          <span class="delta-pill">×7,6 <small>записей</small></span>
        </div>
      </div>
      <div class="ph ph-dark"><div class="ph-ico">🖥️</div><div class="ph-cap"><b>Сюда: скрин</b>главный экран сайта из кейса №2</div></div>
    </div>
    <div class="case reveal">
      <div>
        <span class="case-tag">Оборудование · b2b</span>
        <h3>×4 к лидам при среднем чеке сделки от 2 млн ₽</h3>
        <p class="case-task"><b>Задача:</b> каталог не продавал — заявки уходили конкурентам с более понятной упаковкой оффера.</p>
        <div class="ba">
          <div class="ba-col"><h4>До</h4><ul>
            <li><span>Лидов / мес.</span><b>6</b></li>
            <li><span>Конверсия сайта</span><b>0,8%</b></li>
            <li><span>Бюджет на рекламу</span><b>240 т.₽</b></li>
          </ul></div>
          <div class="ba-arrow">→</div>
          <div class="ba-col after"><h4>После</h4><ul>
            <li><span>Лидов / мес.</span><b>25</b></li>
            <li><span>Конверсия сайта</span><b>4,7%</b></li>
            <li><span>Бюджет на рекламу</span><b>240 т.₽</b></li>
          </ul></div>
        </div>
        <div class="case-delta">
          <span class="delta-pill">×4,2 <small>лидов</small></span>
          <span class="delta-pill">×5,9 <small>конверсия</small></span>
          <span class="delta-pill" style="background:#3e4248">0 ₽ <small>рост бюджета</small></span>
        </div>
      </div>
      <div class="ph ph-dark"><div class="ph-ico">🖥️</div><div class="ph-cap"><b>Сюда: скрин</b>главный экран сайта из кейса №3</div></div>
    </div>
    <div style="text-align:center"><span class="draft-note reveal">✏️ Цифры и ниши черновые — подставим ваши кейсы</span></div>
  </div>
  </section>
</div>

rec3238523101 — процесс 6 шагов (5137 симв.)

<style>
/* ---------- Процесс ---------- */
.step{background:var(--card);border-radius:var(--r-md);padding:36px;margin-top:18px;display:grid;grid-template-columns:96px 1fr .9fr;gap:32px;align-items:start;box-shadow:0 0 0 1px var(--line)}
.step-num{font-weight:700;font-size:54px;line-height:1;color:var(--accent-txt);letter-spacing:-.04em}
.step h3{font-size:clamp(20px,2vw,26px);margin-bottom:12px}
.step p{color:var(--muted);font-size:15.5px}
.step .step-res{margin-top:16px;font-size:14.5px;color:var(--ink)}
.step .step-res b{color:var(--accent-txt);font-weight:700}
.step .ph{min-height:190px}
.vs{display:grid;grid-template-columns:1fr 1fr;gap:12px;min-height:190px}
.vs-col{border-radius:20px;padding:22px;background:#0c0c0e}
.vs-col.win{background:rgba(109,93,251,.14);border:1px solid rgba(109,93,251,.4);color:#fff}
.vs-col h4{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin-bottom:12px;color:var(--muted)}
.vs-col.win h4{color:#a99cff}
.vs-col li{list-style:none;font-size:13.5px;color:var(--muted);padding:5px 0;line-height:1.45}
.vs-col.win li{color:#e8e9ea}
</style>
<section id="process" style="padding-top:0">
  <div class="container">
    <div class="eyebrow reveal">Процесс</div>
    <h2 class="reveal">6 шагов от знакомства до потока заявок</h2>
    <p class="sub reveal">Ваше участие за весь проект — 2–4 часа: ответить на вопросы и принять этапы. Остальное делаем сами.</p>
    <div style="margin-top:44px">
      <div class="step reveal">
        <div class="step-num">01</div>
        <div>
          <h3>Погружение в бизнес</h3>
          <p>Начинаем не с «какие цвета нравятся», а с глубинного интервью на 2 часа: продукт, сделки, клиенты, цифры, сильные и слабые места.</p>
          <p class="step-res"><b>Итог:</b> понимаем, за что вам платят клиенты — и что покажем на сайте.</p>
        </div>
        <div class="step-media vs">
          <div class="vs-col">
            <h4>Обычный бриф</h4>
            <ul><li>— Какие цвета нравятся?</li><li>— Пришлёте примеры сайтов?</li><li>— Текст и ТЗ есть?</li></ul>
          </div>
          <div class="vs-col win">
            <h4>Интервью KORS</h4>
            <ul><li>— 100+ вопросов о бизнесе</li><li>— Разбор реальных сделок</li><li>— Упор на маркетинг</li></ul>
          </div>
        </div>
      </div>
      <div class="step reveal">
        <div class="step-num">02</div>
        <div>
          <h3>Анализ аудитории и конкурентов</h3>
          <p>Разбираем 8–10 конкурентов по ключевым критериям. Сегментируем аудиторию, выписываем страхи, желания и возражения по отзывам, форумам и картам.</p>
          <p class="step-res"><b>Итог:</b> документ со смыслами, на котором строится весь сайт.</p>
        </div>
        <div class="step-media ph"><div class="ph-ico">📊</div><div class="ph-cap"><b>Сюда: скрин</b>пример таблицы анализа конкурентов</div></div>
      </div>
      <div class="step reveal">
        <div class="step-num">03</div>
        <div>
          <h3>Структура и текст</h3>
          <p>Собираем прототип по блокам и пишем продающий текст: офер, заголовки, призывы, лид-магниты. Записываем видеопояснение логики каждого блока.</p>
          <p class="step-res"><b>Итог:</b> прототип, готовый к передаче в дизайн.</p>
        </div>
        <div class="step-media ph"><div class="ph-ico">📝</div><div class="ph-cap"><b>Сюда: скрин</b>фрагмент прототипа с текстами</div></div>
      </div>
      <div class="step reveal">
        <div class="step-num">04</div>
        <div>
          <h3>Дизайн</h3>
          <p>Готовим 2 варианта концепции на выбор: референсы, визуальный вектор, презентация решений — объясняем, что и почему работает на заявки, а не просто «красиво».</p>
          <p class="step-res"><b>Итог:</b> макет, который не стыдно показать партнёрам и инвесторам.</p>
        </div>
        <div class="step-media ph"><div class="ph-ico">🎨</div><div class="ph-cap"><b>Сюда: скрин</b>две дизайн-концепции рядом</div></div>
      </div>
      <div class="step reveal">
        <div class="step-num">05</div>
        <div>
          <h3>Сборка и запуск</h3>
          <p>Верстаем, адаптируем под мобильные, подключаем домен, формы, CRM и уведомления. Настраиваем Яндекс Метрику, Вебмастер и базовое SEO.</p>
          <p class="step-res"><b>Итог:</b> живой сайт, который принимает заявки без вашего участия.</p>
        </div>
        <div class="step-media ph"><div class="ph-ico">🚀</div><div class="ph-cap"><b>Сюда: гиф/видео</b>скролл готового сайта</div></div>
      </div>
      <div class="step reveal">
        <div class="step-num">06</div>
        <div>
          <h3>Трафик</h3>
          <p>Запускаем Яндекс Директ на собранные смыслы: объявления пишутся из той же карты, что и сайт. Ведём кампании и докручиваем по цифрам, а не по ощущениям.</p>
          <p class="step-res"><b>Итог:</b> управляемый поток целевых заявок — прогнозируемый и масштабируемый.</p>
        </div>
        <div class="step-media ph"><div class="ph-ico">📈</div><div class="ph-cap"><b>Сюда: скрин</b>кабинет Директа с метриками кампании</div></div>
      </div>
    </div>
  </div>
</section>

rec3238696801 — квиз (7921 симв.)

<style>
/* ---------- Квиз ---------- */
.quiz-wrap{background:var(--card);border-radius:var(--r-lg);padding:46px;margin-top:44px;display:grid;grid-template-columns:260px 1fr;gap:44px;box-shadow:0 0 0 1px var(--line)}
.quiz-persona{text-align:center}
.quiz-persona .ph{min-height:0;width:128px;height:128px;border-radius:50%;padding:10px;margin:0 auto 16px}
.quiz-persona .ph .ph-ico{font-size:22px}
.quiz-persona .ph .ph-cap{font-size:10px;max-width:100px}
.quiz-persona b{display:block;font-size:17px;letter-spacing:-.02em}
.quiz-persona span{font-size:13.5px;color:var(--muted)}
.quiz-hint{margin-top:18px;background:var(--bg);border-radius:18px;padding:16px;font-size:13.5px;color:var(--muted);text-align:left;line-height:1.5}
.quiz-progress{height:6px;background:#24242a;border-radius:99px;margin-bottom:26px;overflow:hidden}
.quiz-bar{height:100%;width:16%;background:var(--accent);border-radius:99px;transition:width .3s ease}
.quiz-step-label{font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gray);margin-bottom:12px}
.quiz-q{font-weight:600;font-size:clamp(20px,2.1vw,26px);margin-bottom:24px;line-height:1.2;letter-spacing:-.025em}
.quiz-opts{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.quiz-opt{border:1.5px solid transparent;border-radius:18px;padding:18px 20px;background:#1b1b1f;font-size:15px;font-weight:500;color:var(--ink);text-align:left;transition:border-color .15s,background .15s,transform .15s}
.quiz-opt:hover{border-color:var(--accent-2);transform:translateY(-1px)}
.quiz-opt.sel{border-color:var(--accent);background:var(--peach)}
.quiz-nav{display:flex;gap:12px;margin-top:28px;align-items:center}
.quiz-back{background:none;border:none;color:var(--muted);font-weight:600;font-size:14.5px;padding:10px 6px}
.quiz-back:hover{color:var(--ink)}
.quiz-final .fields{display:grid;gap:12px;margin-bottom:16px}
</style>
<section id="quiz" style="padding-top:0">
  <div class="container">
    <div class="eyebrow reveal">Расчёт за 40 секунд</div>
    <h2 class="reveal">Соберём план запуска под вашу нишу за 6 ответов</h2>
    <p class="sub reveal">Структура сайта, офер, канал трафика и вилка стоимости — пришлём в удобный мессенджер.</p>
    <div class="quiz-wrap reveal">
      <div class="quiz-persona">
        <div class="ph"><div class="ph-ico">👤</div><div class="ph-cap"><b>Фото</b>Дмитрий Корс</div></div>
        <b>Дмитрий Корс</b>
        <span>Сооснователь KORS, отвечает за проект</span>
        <div class="quiz-hint" id="quizHint">Каждый ответ сужает вилку стоимости — в конце пришлём точный расчёт и 2–3 примера решений под вашу задачу.</div>
      </div>
      <div class="quiz-body" id="quizBody">
        <div class="quiz-progress"><div class="quiz-bar" id="quizBar"></div></div>
        <div class="quiz-step-label" id="quizLabel">Шаг 1 из 6</div>
        <div id="quizContent"></div>
      </div>
    </div>
  </div>
</section>
<script>
var quizData=[
  {q:'Для какого бизнеса нужен сайт?',hint:'От ниши зависит и структура, и канал трафика — предложим решение под ваш рынок, а не шаблон.',opts:['Производство','Услуги (b2b / b2c)','Товары, интернет-магазин','Эксперт, личный бренд']},
  {q:'Какая главная задача?',hint:'Кому-то нужен поток заявок, кому-то — доверие и имидж. От цели зависят акценты на странице.',opts:['Постоянный поток заявок','Имидж и доверие к компании','Запуск нового продукта','Всё сразу — и продажи, и имидж']},
  {q:'Сайт с нуля или уже есть?',hint:'Если сайт есть, но молчит, — разберём, почему, и посчитаем, что дешевле: докрутить или пересобрать.',opts:['С нуля — нужно всё','Есть, но не приносит заявок','Нужен редизайн и рост конверсии']},
  {q:'Откуда пойдёт трафик?',hint:'Под рекламу, SEO и соцсети сайты строятся по-разному. Если не уверены — подскажем.',opts:['Реклама в Яндекс Директе','SEO, органический трафик','Свои соцсети','Пока не знаю — подскажите']},
  {q:'Когда планируете запуск?',hint:'Если сроки жмут — уплотним график команды без потери качества.',opts:['Срочно, за 2–3 недели','В течение месяца','Через 1–2 месяца','Пока присматриваюсь']}
];
var quizState={step:0,answers:[]};
var qc=document.getElementById('quizContent'),qBar=document.getElementById('quizBar'),qLabel=document.getElementById('quizLabel'),qHint=document.getElementById('quizHint');
var TOTAL=quizData.length+1;
function renderQuiz(){
  var s=quizState.step;
  qBar.style.width=((s+1)/TOTAL*100)+'%';
  if(s<quizData.length){
    qLabel.textContent='Шаг '+(s+1)+' из '+TOTAL;
    qHint.textContent=quizData[s].hint;
    var html='<div class="quiz-q">'+quizData[s].q+'</div><div class="quiz-opts">';
    quizData[s].opts.forEach(function(o,i){
      var sel=quizState.answers[s]===i?' sel':'';
      html+='<button type="button" class="quiz-opt'+sel+'" data-i="'+i+'">'+o+'</button>';
    });
    html+='</div><div class="quiz-nav">'+(s>0?'<button type="button" class="quiz-back" id="qBack">← Назад</button>':'')+'</div>';
    qc.innerHTML=html;
    qc.querySelectorAll('.quiz-opt').forEach(function(b){
      b.addEventListener('click',function(){
        quizState.answers[s]=+b.dataset.i;
        quizState.step++;renderQuiz();
        qc.closest('.quiz-wrap').scrollIntoView({behavior:'smooth',block:'nearest'});
      });
    });
    var back=document.getElementById('qBack');
    if(back)back.addEventListener('click',function(){quizState.step--;renderQuiz()});
  }else{
    qLabel.textContent='Последний шаг';
    qHint.textContent='Пришлём расчёт и 2–3 примера решений под вашу задачу в течение пары часов в рабочее время.';
    qc.innerHTML=
      '<div class="quiz-q">Куда прислать план запуска и расчёт?</div>'+
      '<div class="quiz-final">'+
        '<div class="fields">'+
          '<div class="field"><input type="text" id="qName" placeholder="Ваше имя"></div>'+
          '<div class="field"><input type="tel" id="qPhone" placeholder="Телефон или @ник в Telegram"></div>'+
        '</div>'+
        '<div class="msgr-row" id="qMsgr">'+
          '<button type="button" class="msgr sel">Телефон</button>'+
          '<button type="button" class="msgr">Telegram</button>'+
          '<button type="button" class="msgr">WhatsApp</button>'+
          '<button type="button" class="msgr">MAX</button>'+
        '</div>'+
        '<label class="check"><input type="checkbox" id="qAgree" checked> Я принимаю условия <a href="https://korsprod.ru/policy" target="_blank" rel="noopener">политики конфиденциальности</a> и даю согласие на обработку персональных данных</label>'+
        '<div class="quiz-nav" style="margin-top:0">'+
          '<button type="button" class="quiz-back" id="qBack">← Назад</button>'+
          '<button type="button" class="btn btn-primary" id="qSubmit" style="flex:1">Получить план запуска</button>'+
        '</div>'+
      '</div>';
    document.getElementById('qMsgr').querySelectorAll('.msgr').forEach(function(b){
      b.addEventListener('click',function(){
        document.getElementById('qMsgr').querySelectorAll('.msgr').forEach(function(x){x.classList.remove('sel')});
        b.classList.add('sel');
      });
    });
    document.getElementById('qBack').addEventListener('click',function(){quizState.step--;renderQuiz()});
    document.getElementById('qSubmit').addEventListener('click',function(){
      var n=document.getElementById('qName'),p=document.getElementById('qPhone'),a=document.getElementById('qAgree');
      if(!n.value.trim()){n.focus();return}
      if(p.value.trim().length<5){p.focus();return}
      if(!a.checked){a.focus();return}
      qBar.style.width='100%';
      qLabel.textContent='Готово';
      qHint.textContent='Спасибо! Обычно отвечаем в течение 10 минут в рабочее время.';
      qc.innerHTML='<div class="quiz-done"><div class="big">🔥</div><h3>Заявка принята</h3><p>Свяжемся в выбранном мессенджере, зададим пару уточняющих вопросов и пришлём план запуска с вилкой стоимости.</p></div>';
    });
  }
}
renderQuiz();
</script>

rec3239021501 — отзывы (2474 симв.)

<style>
/* ---------- Отзывы ---------- */
.rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:44px}
.rev{background:var(--card);border-radius:var(--r-md);padding:32px;display:flex;flex-direction:column;box-shadow:0 0 0 1px var(--line)}
.rev .rev-niche{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-txt);margin-bottom:16px}
.rev p{font-size:15px;flex:1;color:#e8e9ea}
.rev .rev-person{display:flex;gap:14px;align-items:center;margin-top:22px}
.rev .rev-person .ph{min-height:0;width:54px;height:54px;border-radius:50%;padding:0;flex-shrink:0}
.rev .rev-person .ph .ph-ico{font-size:18px}
.rev .rev-person b{display:block;font-size:15px}
.rev .rev-person span{font-size:13px;color:var(--muted)}
</style>
<section style="padding-top:0">
  <div class="container">
    <div class="eyebrow reveal">Отзывы</div>
    <h2 class="reveal">Что говорят после запуска</h2>
    <div class="rev-grid">
      <div class="rev reveal">
        <div class="rev-niche">Производство металлоконструкций</div>
        <p>«Раньше весь заказ шёл через знакомых. Сейчас с сайта стабильно 20+ обращений в месяц — два контракта закрыли уже в первый месяц после запуска».</p>
        <div class="rev-person">
          <div class="ph"><div class="ph-ico">📷</div></div>
          <div><b>Имя Фамилия</b><span>Владелец компании</span></div>
        </div>
      </div>
      <div class="rev reveal">
        <div class="rev-niche">Стоматологическая клиника</div>
        <p>«Переживала, что все сайты клиник одинаковые. Сделали так, что пациенты записываются ещё до звонка администратора — и сразу понимают, чем мы отличаемся».</p>
        <div class="rev-person">
          <div class="ph"><div class="ph-ico">📷</div></div>
          <div><b>Имя Фамилия</b><span>Управляющая клиникой</span></div>
        </div>
      </div>
      <div class="rev reveal">
        <div class="rev-niche">Монтаж инженерных систем</div>
        <p>«Понравилось, что не пришлось писать ТЗ — вопросы задавали сами и попали в точку с первого макета. Участие с моей стороны — часа три за весь проект».</p>
        <div class="rev-person">
          <div class="ph"><div class="ph-ico">📷</div></div>
          <div><b>Имя Фамилия</b><span>Руководитель компании</span></div>
        </div>
      </div>
    </div>
    <div class="draft-note reveal">✏️ Тексты отзывов черновые — заменим на реальные с фото и ссылками на людей</div>
  </div>
</section>

rec3239313501 — финальная форма (3485 симв.)

<style>
/* ---------- Финальная форма ---------- */
.final-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:center}
.final .ph{min-height:360px}
.final-form .fields{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:26px 0 16px}
.final-form .field input{background:var(--dark-2);border:1.5px solid var(--dark-3);color:#fff}
.final-form .field input::placeholder{color:#7a7f87}
.final-form .field input:focus{border-color:var(--accent)}
.final-form .msgr{background:var(--dark-2);border-color:var(--dark-3);color:#e8e9ea}
.final-form .msgr.sel{border-color:var(--accent);background:rgba(109,93,251,.16);color:#a99cff}
.final-form .check{color:var(--gray)}
.form-note{font-size:13px;color:var(--gray);margin-top:14px}
</style>
<div class="section-dark final" id="final">
  <section>
  <div class="container final-grid">
    <div>
      <div class="ph ph-dark"><div class="ph-ico">👤</div><div class="ph-cap"><b>Сюда: фото</b>Дмитрий Корс, сооснователь KORS</div></div>
    </div>
    <div class="final-form">
      <div class="eyebrow">Свяжемся в течение 10 минут</div>
      <h2>Обсудим ваш <span class="squig">проект<svg viewBox="0 0 300 24" preserveAspectRatio="none" aria-hidden="true"><path d="M4 14 C70 5 180 4 296 11"/><path d="M140 20 C200 13 255 12 293 16"/></svg></span>?</h2>
      <p class="sub">За 15–20 минут разберём нишу и текущую ситуацию, покажем, какая модель привлечения заявок сработает у вас, и назовём вилку стоимости.</p>
      <form id="leadForm" novalidate>
        <div class="fields">
          <div class="field"><input type="text" name="name" placeholder="Ваше имя" required></div>
          <div class="field"><input type="tel" name="phone" placeholder="Телефон" required></div>
        </div>
        <div class="msgr-row" data-group="final">
          <button type="button" class="msgr sel">Телефон</button>
          <button type="button" class="msgr">Telegram</button>
          <button type="button" class="msgr">WhatsApp</button>
          <button type="button" class="msgr">MAX</button>
        </div>
        <label class="check"><input type="checkbox" required checked> Я принимаю условия <a href="https://korsprod.ru/policy" target="_blank" rel="noopener">политики конфиденциальности</a> и даю согласие на обработку персональных данных</label>
        <button class="btn btn-primary btn-block" type="submit">Получить план запуска</button>
      </form>
      <div class="quiz-done" id="formDone" style="display:none">
        <div class="big">🔥</div>
        <h3 style="color:#fff">Заявка принята</h3>
        <p style="color:var(--gray)">Свяжемся в течение 10 минут в рабочее время и пришлём план запуска под вашу нишу.</p>
      </div>
    </div>
  </div>
  </section>
</div>
<script>
document.querySelectorAll('.msgr-row').forEach(function(row){
  row.querySelectorAll('.msgr').forEach(function(b){
    b.addEventListener('click',function(){
      row.querySelectorAll('.msgr').forEach(function(x){x.classList.remove('sel')});
      b.classList.add('sel');
    });
  });
});
var leadForm=document.getElementById('leadForm');
leadForm.addEventListener('submit',function(e){
  e.preventDefault();
  var name=leadForm.querySelector('[name=name]'),phone=leadForm.querySelector('[name=phone]');
  if(!name.value.trim()){name.focus();return}
  if(phone.value.replace(/\D/g,'').length<10){phone.focus();return}
  leadForm.style.display='none';
  document.getElementById('formDone').style.display='block';
});
</script>

Снимок «как было до отката». Четыре блока /sites в вычищенном виде на момент 28.08.2026, непосредственно перед тем, как по просьбе клиента временно вернули черновые цифры и выдуманные отзывы.

rec3237946401 — первый экран (H1 без обещаний + коллаж с картинками) (3569 симв.)

<style>
/* ---------- Hero ---------- */
.hero{padding:168px 0 78px;position:relative}
.hero::before{content:'';position:absolute;top:-140px;right:-160px;width:620px;height:620px;background:radial-gradient(circle,rgba(109,93,251,.3),transparent 62%);filter:blur(10px);pointer-events:none}
.hero::after{content:'';position:absolute;bottom:-160px;left:-200px;width:520px;height:520px;background:radial-gradient(circle,rgba(109,93,251,.16),transparent 60%);pointer-events:none}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center;position:relative;z-index:1}
.hero .sub{margin:24px 0 34px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap}
.hero-trust{display:flex;gap:34px;margin-top:44px;flex-wrap:wrap}
.hero-trust div b{font-size:30px;font-weight:700;letter-spacing:-.03em;display:block;line-height:1.1}
.hero-trust div span{font-size:13.5px;color:var(--muted)}
.hero-collage{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.hero-collage .shot{position:relative;overflow:hidden;border-radius:var(--r-sm);box-shadow:0 0 0 1px var(--line);background:#0f0f11}
.hero-collage .shot:first-child{grid-column:1/-1}
.hero-collage .shot:not(:first-child){aspect-ratio:16/9}
.hero-collage .shot img{display:block;width:100%;height:auto}
.hero-collage .shot:not(:first-child) img{height:100%;aspect-ratio:16/9;object-fit:cover;object-position:top center}
.hero-collage .shot iframe{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);min-width:100%;min-height:100%;width:auto;height:auto;aspect-ratio:16/9;border:none;pointer-events:none}
</style>
<section class="hero">
  <div class="container hero-grid">
    <div>
      <div class="eyebrow">KORS · продающие сайты для бизнеса</div>
      <h1>Сайты для бизнеса: смыслы, дизайн, сборка и реклама <span class="squig">одной командой<svg viewBox="0 0 300 24" preserveAspectRatio="none" aria-hidden="true"><path d="M4 14 C70 5 180 4 296 11"/><path d="M140 20 C200 13 255 12 293 16"/></svg></span></h1>
      <p class="sub">Смыслы, тексты, дизайн, сборка и реклама — одной командой KORS. Плюс то, чего не даст обычная веб-студия: своя съёмочная команда — реальные фото и видео вашего бизнеса вместо стоковых картинок.</p>
      <div class="hero-cta">
        <a class="btn btn-primary" href="#quiz">Получить план запуска</a>
        <a class="btn btn-ghost" href="#cases">Смотреть кейсы</a>
      </div>
      <div class="hero-trust">
        <div><b>460+</b><span>проектов студии<br>с 2019 года</span></div>
        <div><b>30+</b><span>ниш — от производств и b2b<br>до услуг и ритейла</span></div>
        <div><b>3</b><span>развёрнутых кейса<br>с материалами и письмами</span></div>
      </div>
    </div>
    <div>
      <div class="hero-collage">
        <div class="shot"><img src="https://static.tildacdn.com/tild3463-3561-4837-b438-333439316132/povidlo-su-01-hero.jpg" alt="Первый экран сайта povidlo.su, сделанного студией KORS для производителя фруктово-ягодных начинок" loading="lazy"></div>
        <div class="shot"><img src="https://static.tildacdn.com/tild3561-3836-4335-b431-323263383230/povidlo-pro-01-hero.jpg" alt="Первый экран англоязычной версии сайта povidlo.pro, сделанной для выхода на рынок MENA" loading="lazy"></div>
        <div class="shot"><iframe src="https://kinescope.io/embed/eCGHEdUFdSyEjCBXxcsUSC?autoplay=true&muted=true&loop=true&controls=false&playsInline=true&background=true" title="Шоурил работ студии KORS" aria-label="Шоурил работ студии KORS" allow="autoplay; encrypted-media"></iframe></div>
      </div>
    </div>
  </div>
</section>

rec3238063701 — «Что за нами стоит» - проверяемые факты (2714 симв.)

<style>
/* ---------- Stats ---------- */
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.stat{background:var(--card);border-radius:var(--r-md);padding:30px 28px;box-shadow:0 0 0 1px var(--line)}
.stat .stat-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.stat b{font-size:clamp(34px,3.4vw,48px);font-weight:700;letter-spacing:-.035em;line-height:1}
.stat span.lbl{font-size:14.5px;color:var(--muted);line-height:1.5;display:block}
.pill-up{background:var(--green);color:#fff;border-radius:999px;padding:5px 13px;font-weight:700;font-size:13.5px;letter-spacing:-.01em;white-space:nowrap}
.pill-soft{background:var(--peach);color:var(--accent-txt);border-radius:999px;padding:5px 13px;font-weight:700;font-size:13.5px;white-space:nowrap}
</style>
<section>
  <div class="container">
    <div class="eyebrow reveal">Что получают клиенты</div>
    <h2 class="reveal">Что за нами стоит</h2>
    <p class="sub reveal">Проверяемые факты о студии, а не усреднённые проценты.</p>
    <div class="stats-grid" style="margin-top:44px">
      <div class="stat reveal"><div class="stat-top"><b data-count="460" data-suffix="+">460+</b><span class="pill-soft">проектов</span></div><span class="lbl">выпущено студией с 2019 года</span></div>
      <div class="stat reveal"><div class="stat-top"><b data-count="30" data-suffix="+">30+</b><span class="pill-soft">ниш</span></div><span class="lbl">от производств и b2b до услуг и ритейла</span></div>
      <div class="stat reveal"><div class="stat-top"><b data-count="3">3</b><span class="pill-soft">кейса</span></div><span class="lbl">развёрнутых кейса на сайте - с материалами и письмами клиентов</span></div>
      <div class="stat reveal"><div class="stat-top"><b>своя</b><span class="pill-soft">команда</span></div><span class="lbl">съёмочная группа в штате - фото и видео вашего бизнеса вместо стоков</span></div>
    </div>
  </div>
</section>
<script>
if(!reduced){
  var cIo=new IntersectionObserver(function(es){
    es.forEach(function(e){
      if(!e.isIntersecting)return;
      var el=e.target,target=parseFloat(el.dataset.count),pre=el.dataset.prefix||'',suf=el.dataset.suffix||'';
      var dec=(el.dataset.count.indexOf('.')>-1)?1:0,t0=null;
      function tick(t){
        if(!t0)t0=t;
        var k=Math.min((t-t0)/1100,1),v=(target*(0.2+0.8*k*k)).toFixed(dec).replace('.',',');
        if(k>=1)v=target.toFixed(dec).replace('.',',');
        el.textContent=pre+v+suf;
        if(k<1)requestAnimationFrame(tick);
      }
      requestAnimationFrame(tick);
      cIo.unobserve(el);
    });
  },{threshold:.5});
  document.querySelectorAll('[data-count]').forEach(function(el){cIo.observe(el)});
}
</script>

rec3238347601 — кейсы - три настоящих (Одоевские, Инвойсбокс, Вистекс) (5196 симв.)

<style>
/* ---------- Кейсы ---------- */
.case{background:var(--dark-2);border-radius:32px;padding:38px;margin-top:26px;display:grid;grid-template-columns:1.08fr .92fr;gap:38px;align-items:center}
.case-tag{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#a99cff;background:rgba(109,93,251,.16);border-radius:999px;padding:8px 15px;margin-bottom:16px}
.case h3{font-size:clamp(21px,2.3vw,29px);line-height:1.15;margin-bottom:12px;letter-spacing:-.025em}
.case-task{color:var(--gray);font-size:15.5px;margin-bottom:26px}
.case-task b{color:#fff;font-weight:600}
.ba{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:stretch}
.ba-col{background:#0c0c0e;border-radius:20px;padding:20px}
.ba-col h4{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#66645f;margin-bottom:14px}
.ba-col.after{background:var(--dark-3)}
.ba-col.after h4{color:var(--gray)}
.ba-col ul{list-style:none}
.ba-col li{display:flex;justify-content:space-between;gap:12px;font-size:14px;padding:8px 0;border-top:1px solid var(--line-dark);color:var(--gray)}
.ba-col li:first-of-type{border-top:none}
.ba-col li b{font-weight:700;white-space:nowrap;color:#c8c6c1;letter-spacing:-.02em}
.ba-col.after li b{color:#fff;font-size:16px}
.ba-arrow{align-self:center;font-size:24px;color:var(--accent-txt)}
.case-delta{display:flex;gap:10px;margin-top:24px;flex-wrap:wrap}
.delta-pill{background:var(--green);color:#fff;border-radius:999px;padding:9px 18px;font-weight:700;font-size:15px;letter-spacing:-.01em}
.delta-pill small{display:block;font-size:10.5px;font-weight:600;opacity:.85;letter-spacing:.04em;text-transform:uppercase}
.case-shot{border-radius:20px;overflow:hidden;background:#0f0f11;border:1px solid var(--line-dark)}
.case-shot img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;object-position:center}
.case-links{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}
.case-links .btn{font-size:14px;padding:11px 20px}
</style>
<div class="section-dark" id="cases">
  <div class="ghost" aria-hidden="true">кейсы</div>
  <section>
  <div class="container">
    <div class="sec-head-c">
      <h2 class="reveal">Как выглядит <span class="circled">система<svg viewBox="0 0 320 116" preserveAspectRatio="none" aria-hidden="true"><path d="M28 62 C38 20 268 6 300 44 C328 78 250 106 152 105 C64 104 16 94 24 66"/></svg></span> привлечения заявок в реальных проектах</h2>
      <p class="sub reveal">Три проекта, которые можно открыть целиком: что делали, какие материалы получились и что говорят клиенты в письмах.</p>
    </div>
    <div class="case reveal">
      <div>
        <span class="case-tag">Пищевое производство · b2b</span>
        <h3>Одоевские консервы: сайты RU и EN для выхода на рынок MENA</h3>
        <p class="case-task">Начали с роликов о продукции, дальше - съёмка производства, новый логотип и презентации на двух языках. Собрали два сайта: povidlo.su для России и povidlo.pro на английском для экспорта.</p>
        <div class="case-links"><a class="btn btn-ghost" href="/case-odoevskie">Смотреть кейс →</a><a class="btn btn-ghost" href="https://povidlo.su" target="_blank" rel="noopener">povidlo.su</a><a class="btn btn-ghost" href="https://povidlo.pro" target="_blank" rel="noopener">povidlo.pro</a></div>
      </div>
      <div class="case-shot"><img src="https://static.tildacdn.com/tild3463-3561-4837-b438-333439316132/povidlo-su-01-hero.jpg" alt="Первый экран сайта povidlo.su, сделанного студией KORS для «Одоевских консервов»" loading="lazy"></div>
    </div>
    <div class="case reveal">
      <div>
        <span class="case-tag">Финтех · приём платежей · b2b</span>
        <h3>Инвойсбокс: от одного объясняющего ролика - к серии видео и ведению маркетинга</h3>
        <p class="case-task">Сервис приёма онлайн-платежей и автоматизации счетов. Сняли объясняющие ролики, сделали инфографику и короткие видео по отдельным продуктам, дальше - ведение рекламы и маркетинга. Лендинги в планах.</p>
        <div class="case-links"><a class="btn btn-ghost" href="/case-invoicebox">Смотреть кейс →</a></div>
      </div>
      <div class="case-shot"><img src="https://static.tildacdn.com/tild6235-3838-4235-b430-646665666232/ib-cover-a-city.jpg" alt="Кадр из промо-ролика для сервиса «Инвойсбокс», снятого студией KORS" loading="lazy"></div>
    </div>
    <div class="case reveal">
      <div>
        <span class="case-tag">Нетканые материалы · b2b</span>
        <h3>Вистекс: видео о заводе и письмо для коммерческих предложений</h3>
        <p class="case-task">Завод с восемью направлениями производства. Сняли трёхминутный фильм о предприятии и собрали HTML-письмо со встроенным видео, которым менеджеры рассылают коммерческие предложения. Сайт завода - следующий этап.</p>
        <div class="case-links"><a class="btn btn-ghost" href="/case-vistex">Смотреть кейс →</a></div>
      </div>
      <div class="case-shot"><img src="https://static.tildacdn.com/tild3664-3263-4134-a264-346265333031/vx-cover-a-zavod.jpg" alt="Завод «Вистекс», кадр из фильма о производстве, снятого студией KORS" loading="lazy"></div>
    </div>
  </div>
  </section>
</div>

rec3239021501 — отзывы - три благодарственных письма с лайтбоксом (5023 симв.)

<style>
/* ---------- Отзывы ---------- */
.rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:44px}
.rev{background:var(--card);border-radius:var(--r-md);padding:32px;display:flex;flex-direction:column;box-shadow:0 0 0 1px var(--line)}
.rev .rev-niche{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-txt);margin-bottom:16px}
.rev-shot{flex:1;display:block;width:100%;padding:0;margin:0;border:1px solid var(--line-dark);border-radius:14px;overflow:hidden;background:#0f0f11;cursor:zoom-in;transition:.2s;font:inherit}
.rev-shot:hover{border-color:var(--accent-txt)}
.rev-shot img{display:block;width:100%;height:auto;aspect-ratio:1200/1400;object-fit:cover;object-position:top center}
.rev-org{margin-top:20px}
.rev-org b{display:block;font-size:15px;letter-spacing:-.01em}
.rev-org span{display:block;margin-top:4px;font-size:13px;line-height:1.45;color:var(--muted)}
.rev-link{display:inline-block;margin-top:12px;font-size:13.5px;font-weight:600;color:var(--accent-txt);text-decoration:none}
.rev-link:hover{text-decoration:underline}
.rlb{position:fixed;inset:0;z-index:99999;display:none;align-items:center;justify-content:center;padding:56px 32px}
.rlb.open{display:flex}
.rlb-bd{position:absolute;inset:0;background:rgba(4,4,6,.92);backdrop-filter:blur(4px)}
.rlb-box{position:relative;max-width:min(760px,100%)}
.rlb-box img{display:block;max-width:100%;max-height:calc(100vh - 150px);width:auto;height:auto;border-radius:10px;background:#0f0f11}
.rlb-x{position:absolute;top:-46px;right:0;width:38px;height:38px;border-radius:9px;background:var(--card);border:1px solid var(--line);color:#fff;font:20px/1 Arial,sans-serif;cursor:pointer;padding:0}
.rlb-x:hover{border-color:var(--accent-txt)}
</style>
<section style="padding-top:0">
  <div class="container">
    <div class="eyebrow reveal">Отзывы</div>
    <h2 class="reveal">Благодарственные письма клиентов</h2>
    <p class="sub reveal">Официальные письма на бланках компаний. Нажмите на письмо, чтобы прочитать целиком.</p>
    <div class="rev-grid">
      <div class="rev reveal">
        <div class="rev-niche">Пищевое производство</div>
        <button class="rev-shot" type="button" aria-label="Открыть письмо от ООО «МастерДжем» на весь экран"><img src="https://static.tildacdn.com/tild3231-6563-4932-b139-373433306561/pismo-odoevskie-1200.jpg" alt="Благодарственное письмо от ООО «МастерДжем» («Одоевские консервы») студии KORS Production" loading="lazy"></button>
        <div class="rev-org"><b>ООО «МастерДжем»</b><span>Юридическое лицо «Одоевских консервов»</span><a class="rev-link" href="/case-odoevskie">Смотреть кейс →</a></div>
      </div>
      <div class="rev reveal">
        <div class="rev-niche">Финтех · приём платежей</div>
        <button class="rev-shot" type="button" aria-label="Открыть письмо от ООО «Объединённый расчётный центр» на весь экран"><img src="https://static.tildacdn.com/tild3461-6534-4530-b265-323334643764/pismo-invoicebox-120.jpg" alt="Благодарственное письмо от ООО «Объединённый расчётный центр» («Инвойсбокс») студии KORS Production" loading="lazy"></button>
        <div class="rev-org"><b>ООО «Объединённый расчётный центр»</b><span>Юридическое лицо группы «Инвойсбокс»</span><a class="rev-link" href="/case-invoicebox">Смотреть кейс →</a></div>
      </div>
      <div class="rev reveal">
        <div class="rev-niche">Нетканые материалы</div>
        <button class="rev-shot" type="button" aria-label="Открыть письмо от ООО «Вистекс» на весь экран"><img src="https://static.tildacdn.com/tild3665-6165-4336-a262-666463636263/pismo-visteks-1200.jpg" alt="Благодарственное письмо от ООО «Вистекс» студии KORS Production" loading="lazy"></button>
        <div class="rev-org"><b>ООО «Вистекс»</b><span>Производитель нетканых полотен, завод в Кудинове</span><a class="rev-link" href="/case-vistex">Смотреть кейс →</a></div>
      </div>
    </div>
  </div>
</section>
<script>
(function(){
  var grid=document.querySelector('.rev-grid'); if(!grid) return;
  var lb=document.createElement('div'); lb.className='rlb';
  lb.innerHTML='<div class="rlb-bd"></div><div class="rlb-box"><button class="rlb-x" type="button" aria-label="Закрыть">×</button><img alt=""></div>';
  document.body.appendChild(lb);
  var pic=lb.querySelector('.rlb-box img');
  function close(){ lb.classList.remove('open'); pic.src=''; document.documentElement.style.overflow=''; }
  grid.addEventListener('click',function(e){ var b=e.target&&e.target.closest?e.target.closest('.rev-shot'):null; if(!b) return; var im=b.querySelector('img'); if(!im) return; e.preventDefault(); pic.src=im.currentSrc||im.src; pic.alt=im.alt||''; lb.classList.add('open'); document.documentElement.style.overflow='hidden'; });
  lb.querySelector('.rlb-bd').addEventListener('click',close);
  lb.querySelector('.rlb-x').addEventListener('click',close);
  document.addEventListener('keydown',function(e){ if(e.key==='Escape'&&lb.classList.contains('open')) close(); });
})();
</script>

ГОТОВАЯ ЗАМЕНА. Это рабочая честная версия четырёх блоков /sites: H1 без обещаний по конверсии и срокам, блок «Что за нами стоит» на проверяемых фактах (460+ проектов, 30+ ниш, 3 кейса, своя съёмочная команда), три настоящих кейса со ссылками на /case-odoevskie, /case-invoicebox, /case-vistex и три благодарственных письма (МастерДжем, ОРЦ, Вистекс) с открытием на весь экран. НЕ УДАЛЯТЬ: этим нужно заменить черновые цифры и выдуманные отзывы, как только клиент даст отмашку.

rec3237946401 — первый экран (H1 без обещаний + коллаж с картинками) (3569 симв.)

<style>
/* ---------- Hero ---------- */
.hero{padding:168px 0 78px;position:relative}
.hero::before{content:'';position:absolute;top:-140px;right:-160px;width:620px;height:620px;background:radial-gradient(circle,rgba(109,93,251,.3),transparent 62%);filter:blur(10px);pointer-events:none}
.hero::after{content:'';position:absolute;bottom:-160px;left:-200px;width:520px;height:520px;background:radial-gradient(circle,rgba(109,93,251,.16),transparent 60%);pointer-events:none}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center;position:relative;z-index:1}
.hero .sub{margin:24px 0 34px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap}
.hero-trust{display:flex;gap:34px;margin-top:44px;flex-wrap:wrap}
.hero-trust div b{font-size:30px;font-weight:700;letter-spacing:-.03em;display:block;line-height:1.1}
.hero-trust div span{font-size:13.5px;color:var(--muted)}
.hero-collage{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.hero-collage .shot{position:relative;overflow:hidden;border-radius:var(--r-sm);box-shadow:0 0 0 1px var(--line);background:#0f0f11}
.hero-collage .shot:first-child{grid-column:1/-1}
.hero-collage .shot:not(:first-child){aspect-ratio:16/9}
.hero-collage .shot img{display:block;width:100%;height:auto}
.hero-collage .shot:not(:first-child) img{height:100%;aspect-ratio:16/9;object-fit:cover;object-position:top center}
.hero-collage .shot iframe{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);min-width:100%;min-height:100%;width:auto;height:auto;aspect-ratio:16/9;border:none;pointer-events:none}
</style>
<section class="hero">
  <div class="container hero-grid">
    <div>
      <div class="eyebrow">KORS · продающие сайты для бизнеса</div>
      <h1>Сайты для бизнеса: смыслы, дизайн, сборка и реклама <span class="squig">одной командой<svg viewBox="0 0 300 24" preserveAspectRatio="none" aria-hidden="true"><path d="M4 14 C70 5 180 4 296 11"/><path d="M140 20 C200 13 255 12 293 16"/></svg></span></h1>
      <p class="sub">Смыслы, тексты, дизайн, сборка и реклама — одной командой KORS. Плюс то, чего не даст обычная веб-студия: своя съёмочная команда — реальные фото и видео вашего бизнеса вместо стоковых картинок.</p>
      <div class="hero-cta">
        <a class="btn btn-primary" href="#quiz">Получить план запуска</a>
        <a class="btn btn-ghost" href="#cases">Смотреть кейсы</a>
      </div>
      <div class="hero-trust">
        <div><b>460+</b><span>проектов студии<br>с 2019 года</span></div>
        <div><b>30+</b><span>ниш — от производств и b2b<br>до услуг и ритейла</span></div>
        <div><b>3</b><span>развёрнутых кейса<br>с материалами и письмами</span></div>
      </div>
    </div>
    <div>
      <div class="hero-collage">
        <div class="shot"><img src="https://static.tildacdn.com/tild3463-3561-4837-b438-333439316132/povidlo-su-01-hero.jpg" alt="Первый экран сайта povidlo.su, сделанного студией KORS для производителя фруктово-ягодных начинок" loading="lazy"></div>
        <div class="shot"><img src="https://static.tildacdn.com/tild3561-3836-4335-b431-323263383230/povidlo-pro-01-hero.jpg" alt="Первый экран англоязычной версии сайта povidlo.pro, сделанной для выхода на рынок MENA" loading="lazy"></div>
        <div class="shot"><iframe src="https://kinescope.io/embed/eCGHEdUFdSyEjCBXxcsUSC?autoplay=true&muted=true&loop=true&controls=false&playsInline=true&background=true" title="Шоурил работ студии KORS" aria-label="Шоурил работ студии KORS" allow="autoplay; encrypted-media"></iframe></div>
      </div>
    </div>
  </div>
</section>

rec3238063701 — «Что за нами стоит» - проверяемые факты (2714 симв.)

<style>
/* ---------- Stats ---------- */
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.stat{background:var(--card);border-radius:var(--r-md);padding:30px 28px;box-shadow:0 0 0 1px var(--line)}
.stat .stat-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.stat b{font-size:clamp(34px,3.4vw,48px);font-weight:700;letter-spacing:-.035em;line-height:1}
.stat span.lbl{font-size:14.5px;color:var(--muted);line-height:1.5;display:block}
.pill-up{background:var(--green);color:#fff;border-radius:999px;padding:5px 13px;font-weight:700;font-size:13.5px;letter-spacing:-.01em;white-space:nowrap}
.pill-soft{background:var(--peach);color:var(--accent-txt);border-radius:999px;padding:5px 13px;font-weight:700;font-size:13.5px;white-space:nowrap}
</style>
<section>
  <div class="container">
    <div class="eyebrow reveal">Что получают клиенты</div>
    <h2 class="reveal">Что за нами стоит</h2>
    <p class="sub reveal">Проверяемые факты о студии, а не усреднённые проценты.</p>
    <div class="stats-grid" style="margin-top:44px">
      <div class="stat reveal"><div class="stat-top"><b data-count="460" data-suffix="+">460+</b><span class="pill-soft">проектов</span></div><span class="lbl">выпущено студией с 2019 года</span></div>
      <div class="stat reveal"><div class="stat-top"><b data-count="30" data-suffix="+">30+</b><span class="pill-soft">ниш</span></div><span class="lbl">от производств и b2b до услуг и ритейла</span></div>
      <div class="stat reveal"><div class="stat-top"><b data-count="3">3</b><span class="pill-soft">кейса</span></div><span class="lbl">развёрнутых кейса на сайте - с материалами и письмами клиентов</span></div>
      <div class="stat reveal"><div class="stat-top"><b>своя</b><span class="pill-soft">команда</span></div><span class="lbl">съёмочная группа в штате - фото и видео вашего бизнеса вместо стоков</span></div>
    </div>
  </div>
</section>
<script>
if(!reduced){
  var cIo=new IntersectionObserver(function(es){
    es.forEach(function(e){
      if(!e.isIntersecting)return;
      var el=e.target,target=parseFloat(el.dataset.count),pre=el.dataset.prefix||'',suf=el.dataset.suffix||'';
      var dec=(el.dataset.count.indexOf('.')>-1)?1:0,t0=null;
      function tick(t){
        if(!t0)t0=t;
        var k=Math.min((t-t0)/1100,1),v=(target*(0.2+0.8*k*k)).toFixed(dec).replace('.',',');
        if(k>=1)v=target.toFixed(dec).replace('.',',');
        el.textContent=pre+v+suf;
        if(k<1)requestAnimationFrame(tick);
      }
      requestAnimationFrame(tick);
      cIo.unobserve(el);
    });
  },{threshold:.5});
  document.querySelectorAll('[data-count]').forEach(function(el){cIo.observe(el)});
}
</script>

rec3238347601 — кейсы - три настоящих (Одоевские, Инвойсбокс, Вистекс) (5196 симв.)

<style>
/* ---------- Кейсы ---------- */
.case{background:var(--dark-2);border-radius:32px;padding:38px;margin-top:26px;display:grid;grid-template-columns:1.08fr .92fr;gap:38px;align-items:center}
.case-tag{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#a99cff;background:rgba(109,93,251,.16);border-radius:999px;padding:8px 15px;margin-bottom:16px}
.case h3{font-size:clamp(21px,2.3vw,29px);line-height:1.15;margin-bottom:12px;letter-spacing:-.025em}
.case-task{color:var(--gray);font-size:15.5px;margin-bottom:26px}
.case-task b{color:#fff;font-weight:600}
.ba{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:stretch}
.ba-col{background:#0c0c0e;border-radius:20px;padding:20px}
.ba-col h4{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#66645f;margin-bottom:14px}
.ba-col.after{background:var(--dark-3)}
.ba-col.after h4{color:var(--gray)}
.ba-col ul{list-style:none}
.ba-col li{display:flex;justify-content:space-between;gap:12px;font-size:14px;padding:8px 0;border-top:1px solid var(--line-dark);color:var(--gray)}
.ba-col li:first-of-type{border-top:none}
.ba-col li b{font-weight:700;white-space:nowrap;color:#c8c6c1;letter-spacing:-.02em}
.ba-col.after li b{color:#fff;font-size:16px}
.ba-arrow{align-self:center;font-size:24px;color:var(--accent-txt)}
.case-delta{display:flex;gap:10px;margin-top:24px;flex-wrap:wrap}
.delta-pill{background:var(--green);color:#fff;border-radius:999px;padding:9px 18px;font-weight:700;font-size:15px;letter-spacing:-.01em}
.delta-pill small{display:block;font-size:10.5px;font-weight:600;opacity:.85;letter-spacing:.04em;text-transform:uppercase}
.case-shot{border-radius:20px;overflow:hidden;background:#0f0f11;border:1px solid var(--line-dark)}
.case-shot img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;object-position:center}
.case-links{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}
.case-links .btn{font-size:14px;padding:11px 20px}
</style>
<div class="section-dark" id="cases">
  <div class="ghost" aria-hidden="true">кейсы</div>
  <section>
  <div class="container">
    <div class="sec-head-c">
      <h2 class="reveal">Как выглядит <span class="circled">система<svg viewBox="0 0 320 116" preserveAspectRatio="none" aria-hidden="true"><path d="M28 62 C38 20 268 6 300 44 C328 78 250 106 152 105 C64 104 16 94 24 66"/></svg></span> привлечения заявок в реальных проектах</h2>
      <p class="sub reveal">Три проекта, которые можно открыть целиком: что делали, какие материалы получились и что говорят клиенты в письмах.</p>
    </div>
    <div class="case reveal">
      <div>
        <span class="case-tag">Пищевое производство · b2b</span>
        <h3>Одоевские консервы: сайты RU и EN для выхода на рынок MENA</h3>
        <p class="case-task">Начали с роликов о продукции, дальше - съёмка производства, новый логотип и презентации на двух языках. Собрали два сайта: povidlo.su для России и povidlo.pro на английском для экспорта.</p>
        <div class="case-links"><a class="btn btn-ghost" href="/case-odoevskie">Смотреть кейс →</a><a class="btn btn-ghost" href="https://povidlo.su" target="_blank" rel="noopener">povidlo.su</a><a class="btn btn-ghost" href="https://povidlo.pro" target="_blank" rel="noopener">povidlo.pro</a></div>
      </div>
      <div class="case-shot"><img src="https://static.tildacdn.com/tild3463-3561-4837-b438-333439316132/povidlo-su-01-hero.jpg" alt="Первый экран сайта povidlo.su, сделанного студией KORS для «Одоевских консервов»" loading="lazy"></div>
    </div>
    <div class="case reveal">
      <div>
        <span class="case-tag">Финтех · приём платежей · b2b</span>
        <h3>Инвойсбокс: от одного объясняющего ролика - к серии видео и ведению маркетинга</h3>
        <p class="case-task">Сервис приёма онлайн-платежей и автоматизации счетов. Сняли объясняющие ролики, сделали инфографику и короткие видео по отдельным продуктам, дальше - ведение рекламы и маркетинга. Лендинги в планах.</p>
        <div class="case-links"><a class="btn btn-ghost" href="/case-invoicebox">Смотреть кейс →</a></div>
      </div>
      <div class="case-shot"><img src="https://static.tildacdn.com/tild6235-3838-4235-b430-646665666232/ib-cover-a-city.jpg" alt="Кадр из промо-ролика для сервиса «Инвойсбокс», снятого студией KORS" loading="lazy"></div>
    </div>
    <div class="case reveal">
      <div>
        <span class="case-tag">Нетканые материалы · b2b</span>
        <h3>Вистекс: видео о заводе и письмо для коммерческих предложений</h3>
        <p class="case-task">Завод с восемью направлениями производства. Сняли трёхминутный фильм о предприятии и собрали HTML-письмо со встроенным видео, которым менеджеры рассылают коммерческие предложения. Сайт завода - следующий этап.</p>
        <div class="case-links"><a class="btn btn-ghost" href="/case-vistex">Смотреть кейс →</a></div>
      </div>
      <div class="case-shot"><img src="https://static.tildacdn.com/tild3664-3263-4134-a264-346265333031/vx-cover-a-zavod.jpg" alt="Завод «Вистекс», кадр из фильма о производстве, снятого студией KORS" loading="lazy"></div>
    </div>
  </div>
  </section>
</div>

rec3239021501 — отзывы - три благодарственных письма с лайтбоксом (5023 симв.)

<style>
/* ---------- Отзывы ---------- */
.rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:44px}
.rev{background:var(--card);border-radius:var(--r-md);padding:32px;display:flex;flex-direction:column;box-shadow:0 0 0 1px var(--line)}
.rev .rev-niche{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-txt);margin-bottom:16px}
.rev-shot{flex:1;display:block;width:100%;padding:0;margin:0;border:1px solid var(--line-dark);border-radius:14px;overflow:hidden;background:#0f0f11;cursor:zoom-in;transition:.2s;font:inherit}
.rev-shot:hover{border-color:var(--accent-txt)}
.rev-shot img{display:block;width:100%;height:auto;aspect-ratio:1200/1400;object-fit:cover;object-position:top center}
.rev-org{margin-top:20px}
.rev-org b{display:block;font-size:15px;letter-spacing:-.01em}
.rev-org span{display:block;margin-top:4px;font-size:13px;line-height:1.45;color:var(--muted)}
.rev-link{display:inline-block;margin-top:12px;font-size:13.5px;font-weight:600;color:var(--accent-txt);text-decoration:none}
.rev-link:hover{text-decoration:underline}
.rlb{position:fixed;inset:0;z-index:99999;display:none;align-items:center;justify-content:center;padding:56px 32px}
.rlb.open{display:flex}
.rlb-bd{position:absolute;inset:0;background:rgba(4,4,6,.92);backdrop-filter:blur(4px)}
.rlb-box{position:relative;max-width:min(760px,100%)}
.rlb-box img{display:block;max-width:100%;max-height:calc(100vh - 150px);width:auto;height:auto;border-radius:10px;background:#0f0f11}
.rlb-x{position:absolute;top:-46px;right:0;width:38px;height:38px;border-radius:9px;background:var(--card);border:1px solid var(--line);color:#fff;font:20px/1 Arial,sans-serif;cursor:pointer;padding:0}
.rlb-x:hover{border-color:var(--accent-txt)}
</style>
<section style="padding-top:0">
  <div class="container">
    <div class="eyebrow reveal">Отзывы</div>
    <h2 class="reveal">Благодарственные письма клиентов</h2>
    <p class="sub reveal">Официальные письма на бланках компаний. Нажмите на письмо, чтобы прочитать целиком.</p>
    <div class="rev-grid">
      <div class="rev reveal">
        <div class="rev-niche">Пищевое производство</div>
        <button class="rev-shot" type="button" aria-label="Открыть письмо от ООО «МастерДжем» на весь экран"><img src="https://static.tildacdn.com/tild3231-6563-4932-b139-373433306561/pismo-odoevskie-1200.jpg" alt="Благодарственное письмо от ООО «МастерДжем» («Одоевские консервы») студии KORS Production" loading="lazy"></button>
        <div class="rev-org"><b>ООО «МастерДжем»</b><span>Юридическое лицо «Одоевских консервов»</span><a class="rev-link" href="/case-odoevskie">Смотреть кейс →</a></div>
      </div>
      <div class="rev reveal">
        <div class="rev-niche">Финтех · приём платежей</div>
        <button class="rev-shot" type="button" aria-label="Открыть письмо от ООО «Объединённый расчётный центр» на весь экран"><img src="https://static.tildacdn.com/tild3461-6534-4530-b265-323334643764/pismo-invoicebox-120.jpg" alt="Благодарственное письмо от ООО «Объединённый расчётный центр» («Инвойсбокс») студии KORS Production" loading="lazy"></button>
        <div class="rev-org"><b>ООО «Объединённый расчётный центр»</b><span>Юридическое лицо группы «Инвойсбокс»</span><a class="rev-link" href="/case-invoicebox">Смотреть кейс →</a></div>
      </div>
      <div class="rev reveal">
        <div class="rev-niche">Нетканые материалы</div>
        <button class="rev-shot" type="button" aria-label="Открыть письмо от ООО «Вистекс» на весь экран"><img src="https://static.tildacdn.com/tild3665-6165-4336-a262-666463636263/pismo-visteks-1200.jpg" alt="Благодарственное письмо от ООО «Вистекс» студии KORS Production" loading="lazy"></button>
        <div class="rev-org"><b>ООО «Вистекс»</b><span>Производитель нетканых полотен, завод в Кудинове</span><a class="rev-link" href="/case-vistex">Смотреть кейс →</a></div>
      </div>
    </div>
  </div>
</section>
<script>
(function(){
  var grid=document.querySelector('.rev-grid'); if(!grid) return;
  var lb=document.createElement('div'); lb.className='rlb';
  lb.innerHTML='<div class="rlb-bd"></div><div class="rlb-box"><button class="rlb-x" type="button" aria-label="Закрыть">×</button><img alt=""></div>';
  document.body.appendChild(lb);
  var pic=lb.querySelector('.rlb-box img');
  function close(){ lb.classList.remove('open'); pic.src=''; document.documentElement.style.overflow=''; }
  grid.addEventListener('click',function(e){ var b=e.target&&e.target.closest?e.target.closest('.rev-shot'):null; if(!b) return; var im=b.querySelector('img'); if(!im) return; e.preventDefault(); pic.src=im.currentSrc||im.src; pic.alt=im.alt||''; lb.classList.add('open'); document.documentElement.style.overflow='hidden'; });
  lb.querySelector('.rlb-bd').addEventListener('click',close);
  lb.querySelector('.rlb-x').addEventListener('click',close);
  document.addEventListener('keydown',function(e){ if(e.key==='Escape'&&lb.classList.contains('open')) close(); });
})();
</script>

rec2667018101 — главная, кейсы ДЕСКТОП (11975 симв.)

<!-- ===== KORS · 3 ПРОЕКТА ИЗ ОДНОЙ ЗАДАЧИ · ДЕСКТОП · блок T123. Только компьютер. ===== -->
<div class="kcs">
  <div class="kcs__head">
    <div class="kcs__eyebrow">- КЕЙСЫ</div>
    <h2 class="kcs__title">Что изменилось у производителей после работы с нами и как они используют наши материалы в продажах.</h2>
    <div class="kcs__sub">С чем пришёл клиент, что сделали и какие материалы он получил.</div>
  </div>
  <div class="kcs__list" id="kcsList"></div>
  <div class="kcs__lb" id="kcsLb"><div class="kcs__lbbd"></div><div class="kcs__lbbox"><button class="kcs__lbx" id="kcsLbx">×</button><div class="kcs__lbframe"><iframe id="kcsLbIframe" allow="autoplay; fullscreen; encrypted-media; picture-in-picture" allowfullscreen></iframe></div></div></div>
</div>
<style>
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Unbounded:wght@400;600;700;800&display=swap');
.kcs{--bg:#0C0C0E;--raise:#141416;--card:#1B1B1F;--border:#2A2A2E;--text:#F5F3EF;--muted:#9A9A9A;--faint:#6a6a6e;--accent:#6D5DFB;--glow:rgba(109,93,251,.14);
  box-sizing:border-box;background:var(--bg);color:var(--text);font-family:'Manrope',Arial,sans-serif;-webkit-font-smoothing:antialiased;padding:84px 5vw 92px;}
.kcs *{box-sizing:border-box;margin:0;padding:0;}
.kcs__head{max-width:1240px;margin:0 auto 44px;}
.kcs__eyebrow{font-family:'Unbounded';font-size:12px;letter-spacing:.14em;color:var(--accent);margin-bottom:16px;}
.kcs__title{font-family:'Unbounded';font-weight:700;font-size:clamp(34px,4vw,60px);letter-spacing:-.02em;line-height:1.05;margin-bottom:16px;max-width:900px;}
.kcs__sub{color:var(--muted);font-size:18px;line-height:1.5;max-width:640px;}
.kcs__list{max-width:1240px;margin:0 auto;display:flex;flex-direction:column;gap:26px;}
.kcs__row{display:grid;grid-template-columns:46% 1fr;background:var(--raise);border:1px solid var(--border);border-radius:18px;overflow:hidden;}
.kcs__media{position:relative;overflow:hidden;background:#000;min-height:420px;}
/* Карточка Инвойсбокса: в превью вшит субтитр. Кадр увеличен и прижат к верху, чтобы полоса с текстом ушла за границу. Снять, когда появится превью без субтитров. */
.kcs__media.kcs__media--crop iframe{top:0;transform:translate(-50%,0);min-height:118%;height:118%;}
.kcs__media iframe{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);min-width:100%;min-height:100%;width:auto;height:auto;aspect-ratio:16/9;border:none;pointer-events:none;}
.kcs__badge{position:absolute;top:18px;left:18px;z-index:2;background:rgba(0,0,0,.55);border:1px solid var(--border);color:var(--text);font-family:'Unbounded';font-size:10px;letter-spacing:.12em;padding:6px 12px;border-radius:6px;}
.kcs__body{padding:38px 40px;}
.kcs__name{font-family:'Unbounded';font-weight:700;font-size:26px;letter-spacing:-.01em;margin-bottom:8px;}
.kcs__tag{color:var(--faint);font-size:14px;margin-bottom:16px;}
.kcs__tags{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 16px;}
.kcs__chip{font-family:'Manrope',Arial,sans-serif;font-weight:600;font-size:9px;line-height:1;text-transform:uppercase;letter-spacing:.14em;color:rgba(255,255,255,.7);background:transparent;border:1px solid rgba(255,255,255,.22);border-radius:4px;padding:5px 8px;white-space:nowrap;}
.kcs__blk{margin-bottom:18px;}
.kcs__lbl{font-family:'Unbounded';font-size:11px;letter-spacing:.1em;color:var(--accent);margin-bottom:7px;}
.kcs__txt{color:var(--muted);font-size:15px;line-height:1.55;}
.kcs__txt b{color:var(--text);font-weight:600;}
.kcs__btns{display:flex;gap:11px;flex-wrap:wrap;margin-top:26px;}
.kcs__btn{display:inline-flex;align-items:center;gap:8px;font-family:'Manrope';font-weight:700;font-size:14px;padding:13px 20px;border-radius:9px;cursor:pointer;text-decoration:none;transition:.2s;border:1px solid var(--border);}
.kcs__btn svg{width:15px;height:15px;flex:none;}
.kcs__btn--full{background:var(--accent);color:#fff;border-color:var(--accent);}
.kcs__btn--full:hover{transform:translateY(-2px);box-shadow:0 10px 26px var(--glow);}
.kcs__btn--ghost{background:transparent;color:var(--text);}
.kcs__btn--ghost:hover{border-color:var(--accent);color:var(--accent);}
.kcs__soon{font-size:11px;color:var(--faint);margin-left:2px;}
/* оверлей полного видео */
.kcs__lb{position:fixed;inset:0;z-index:99999;display:none;align-items:center;justify-content:center;padding:40px;}
.kcs__lb.open{display:flex;}
.kcs__lbbd{position:absolute;inset:0;background:rgba(4,4,6,.9);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);}
.kcs__lbbox{position:relative;width:min(1100px,100%);}
.kcs__lbframe{position:relative;width:100%;aspect-ratio:16/9;background:#000;border-radius:12px;overflow:hidden;border:1px solid var(--border);}
.kcs__lbframe iframe{position:absolute;inset:0;width:100%;height:100%;border:none;}
.kcs__lbx{position:absolute;top:-46px;right:0;width:38px;height:38px;border-radius:9px;background:var(--raise);border:1px solid var(--border);color:var(--text);font-size:22px;line-height:1;cursor:pointer;}
.kcs__lbx:hover{border-color:var(--accent);color:var(--accent);}
@media (max-width:480px){ .kcs{display:none;} }

.kcs__title{max-width:1180px;font-size:clamp(30px,3.4vw,52px);line-height:1.12;text-wrap:balance}
.kcs__row{grid-template-columns:34% 1fr}
.kcs__media{min-height:620px}
.kcs__name{font-size:22px;line-height:1.25}
.kcs__txt{font-size:15px;line-height:1.62}
</style>
<script>
(function(){
  var cases=[
  {
    "vid": "pd95FJSRFhF27W4YX4ioJJ",
    "full": "3ZsxHkdEuHUubxSAQZDRyG",
    "alt": "Кейс Одоевские консервы: видео о пищевом производстве",
    "badge": "ВИДЕО / ФОТО",
    "name": "Одоевские консервы: от продуктовых роликов - к сайту RU/EN и материалам для выхода на рынок ОАЭ",
    "page": "/case-odoevskie",
    "tag": "Производитель фруктово-ягодных начинок. Начали с продуктовых роликов, после чего сотрудничество переросло в комплексную работу с материалами компании.",
    "tags": ["Видео","Фотосъёмка","Презентация","Фирменный стиль","Сайт"],
    "blocks": [
      [
        "",
        "Сайт RU/EN для работы с зарубежными партнёрами, презентация на русском и английском языках, разработка нового логотипа компании, подготовка материалов производства от А до Я."
      ],
      [
        "",
        "Создание материалов, которые помогают в развитии бизнеса за рубежом."
      ],
      [
        "",
        "Видео о заводе и продуктовых начинках, визитки, поздравления для партнёров, создание фирменных календарей, приглашения на выставки. В феврале планируем делать застройку стенда на выставке."
      ],
      [
        "РЕЗУЛЬТАТЫ",
        "- Новый сайт открыл переговоры в ОАЭ/MENA.<br>- Сделок стало больше.<br>- Все ключевые клиенты продолжили сотрудничество.<br>- Повысился трафик клиентов и уровень продаж новых продуктов."
      ]
    ]
  },
  {
    "vid": "35XkXms5VN3RLJcYsgWsnD",
    "full": "2FXfjS6hYEvLkWNKUveoBx",
    "alt": "Кейс Инвойсбокс: видео о сервисе приёма платежей",
    "badge": "ВИДЕО / МАРКЕТИНГ",
    "name": "Инвойсбокс: от одного объясняющего ролика - к серии видео, инфографике и ведению маркетинга",
    "page": "/case-invoicebox",
    "crop": true,
    "tag": "Сервис приёма онлайн-платежей и автоматизации счетов для бизнеса. Начали с одного объясняющего видео, дальше клиент возвращался за новыми форматами.",
    "tags": ["Видео","Моушн","Инфографика","Маркетинг"],
    "blocks": [
      [
        "",
        "Объясняющие ролики о сервисе: как выставить счёт юридическому лицу за минуту и как принимать оплату на сайте."
      ],
      [
        "",
        "Короткие ролики по отдельным продуктам - выставление счетов и решение для интернет-магазинов."
      ],
      [
        "",
        "Ведение маркетинга и рекламы: не разовая задача, а постоянная работа по проекту."
      ],
      [
        "РЕЗУЛЬТАТЫ",
        "- Сложный финтех-продукт объясняется за секунды.<br>- От одного ролика - к серии видео и инфографике.<br>- Клиент передал нам и свой второй бизнес (GRT)."
      ]
    ]
  },
  {
    "vid": "iPcFsLF3eYfDYTauhcgjZj",
    "alt": "Кейс Вистекс: видео о заводе нетканых материалов",
    "full": "fv7FAnLfbLaDaNJLtSQ74H",
    "badge": "ВИДЕО",
    "name": "Вистекс: 8 направлений завода - в 3 минутах видео для коммерческих предложений",
    "page": "/case-vistex",
    "tag": "",
    "tags": ["Видео","Дизайн"],
    "blocks": [
      [
        "",
        "Задача: показать 8 разных направлений производства за 3 минуты видеоролика, благодаря которому клиент сразу поймёт, что производит завод."
      ],
      [
        "",
        "Менеджеры используют ролик в коммерческих предложениях и email-коммуникации, чтобы быстро показать направления производства."
      ],
      [
        "",
        "Создали дизайн email-письма для рассылок потенциальным клиентам с кликабельным функционалом и возможностью смотреть видео о предприятии прямо в email-сообщении."
      ],
      [
        "",
        "Стало проще объяснять продукты и направления предприятия: менеджеры показывают завод роликом, а не пересказывают его текстом."
      ]
    ]
  }
];
  var PLAY='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="5 3 19 12 5 21 5 3"/></svg>';
  var ARROW='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M13 5l7 7-7 7"/></svg>';
  var BG='?autoplay=true&muted=true&loop=true&controls=false&playsInline=true&background=true';
  var lb=document.getElementById('kcsLb'), lbf=document.getElementById('kcsLbIframe');
  function openLb(id){ lbf.src='https://kinescope.io/embed/'+id+'?autoplay=true'; lb.classList.add('open'); }
  function closeLb(){ lb.classList.remove('open'); lbf.src=''; }
  document.getElementById('kcsLbx').addEventListener('click',closeLb);
  lb.querySelector('.kcs__lbbd').addEventListener('click',closeLb);
  var list=document.getElementById('kcsList'); if(!list) return;
  /* KORS: превью кейса получает src только когда строка подходит к экрану, а не сразу при загрузке страницы. */
  var kio=('IntersectionObserver' in window)?new IntersectionObserver(function(es,ob){
    es.forEach(function(e){
      if(!e.isIntersecting) return;
      var f=e.target.querySelector('iframe[data-src]');
      if(f){ f.src=f.getAttribute('data-src'); f.removeAttribute('data-src'); }
      ob.unobserve(e.target);
    });
  },{root:null,rootMargin:'300px 0px',threshold:0.01}):null;
  function kcsWatch(r){
    if(kio){ kio.observe(r); return; }
    var f=r.querySelector('iframe[data-src]');
    if(f){ f.src=f.getAttribute('data-src'); f.removeAttribute('data-src'); }
  }
  cases.forEach(function(c){
    var row=document.createElement('div'); row.className='kcs__row';
    var blocksHtml=c.blocks.map(function(b){return '<div class="kcs__blk"><div class="kcs__lbl">'+b[0]+'</div><div class="kcs__txt">'+b[1]+'</div></div>';}).join('');
    var tagsHtml=(c.tags&&c.tags.length)?('<div class="kcs__tags">'+c.tags.map(function(t){return '<span class="kcs__chip">'+t+'</span>';}).join('')+'</div>'):'';
    row.innerHTML=
      '<div class="kcs__media'+(c.crop?' kcs__media--crop':'')+'"><iframe data-src="https://kinescope.io/embed/'+c.vid+BG+'" title="'+(c.alt||c.name)+'" aria-label="'+(c.alt||c.name)+'" allow="autoplay; fullscreen; encrypted-media; picture-in-picture"></iframe></div>'+
      '<div class="kcs__body"><div class="kcs__name">'+c.name+'</div>'+tagsHtml+'<div class="kcs__tag">'+c.tag+'</div>'+blocksHtml+
        '<div class="kcs__btns">'+
          '<button class="kcs__btn kcs__btn--full kcs-full">'+PLAY+'Смотреть полное видео</button>'+
          '<a class="kcs__btn kcs__btn--ghost kcs-soon" href="'+(c.page||'#')+'">Смотреть, как строился проект '+ARROW+'</a>'+
        '</div>'+
      '</div>';
    row.querySelector('.kcs-full').addEventListener('click',function(){ openLb(c.full||c.vid); });
    var soon=row.querySelector('.kcs-soon'); if(!c.page){ soon.addEventListener('click',function(e){ e.preventDefault(); }); }
    list.appendChild(row); kcsWatch(row);
  });
})();
</script>

rec2667196001 — главная, кейсы МОБИЛКА (11443 симв.)

<!-- ===== KORS · 3 ПРОЕКТА ИЗ ОДНОЙ ЗАДАЧИ · МОБИЛКА · блок T123. Только телефон. ===== -->
<div class="kcm">
  <div class="kcm__head">
    <div class="kcm__eyebrow">- КЕЙСЫ</div>
    <h2 class="kcm__title">Что изменилось у производителей после работы с нами и как они используют наши материалы в продажах.</h2>
    <div class="kcm__sub">С чем пришёл клиент, что сделали и какие материалы он получил.</div>
  </div>
  <div class="kcm__list" id="kcmList"></div>
  <div class="kcm__lb" id="kcmLb"><div class="kcm__lbbd"></div><div class="kcm__lbbox"><button class="kcm__lbx" id="kcmLbx">×</button><div class="kcm__lbframe"><iframe id="kcmLbIframe" allow="autoplay; fullscreen; encrypted-media; picture-in-picture" allowfullscreen></iframe></div></div></div>
</div>
<style>
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Unbounded:wght@400;600;700;800&display=swap');
.kcm{--bg:#0C0C0E;--raise:#141416;--card:#1B1B1F;--border:#2A2A2E;--text:#F5F3EF;--muted:#9A9A9A;--faint:#6a6a6e;--accent:#6D5DFB;--glow:rgba(109,93,251,.14);
  box-sizing:border-box;background:var(--bg);color:var(--text);font-family:'Manrope',Arial,sans-serif;-webkit-font-smoothing:antialiased;padding:56px 20px 64px;}
.kcm *{box-sizing:border-box;margin:0;padding:0;}
.kcm__head{margin:0 auto 28px;}
.kcm__eyebrow{font-family:'Unbounded';font-size:11px;letter-spacing:.14em;color:var(--accent);margin-bottom:14px;}
.kcm__title{font-family:'Unbounded';font-weight:700;font-size:28px;letter-spacing:-.02em;line-height:1.1;margin-bottom:14px;}
.kcm__sub{color:var(--muted);font-size:15px;line-height:1.5;}
.kcm__list{display:flex;flex-direction:column;gap:20px;}
.kcm__row{background:var(--raise);border:1px solid var(--border);border-radius:16px;overflow:hidden;}
.kcm__media{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;background:#000;}
/* Карточка Инвойсбокса: в превью вшит субтитр. Кадр увеличен и прижат к верху. */
.kcm__media.kcm__media--crop{aspect-ratio:16/7.7;}
.kcm__media.kcm__media--crop iframe{top:0;transform:translate(-50%,0);}
.kcm__media iframe{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);min-width:100%;min-height:100%;width:auto;height:auto;aspect-ratio:16/9;border:none;pointer-events:none;}
.kcm__badge{position:absolute;top:14px;left:14px;z-index:2;background:rgba(0,0,0,.55);border:1px solid var(--border);color:var(--text);font-family:'Unbounded';font-size:9.5px;letter-spacing:.12em;padding:5px 10px;border-radius:6px;}
.kcm__body{padding:20px 18px 22px;}
.kcm__name{font-family:'Unbounded';font-weight:700;font-size:20px;letter-spacing:-.01em;margin-bottom:6px;}
.kcm__tag{color:var(--faint);font-size:13px;margin-bottom:14px;}
.kcm__tags{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 13px;}
.kcm__chip{font-family:'Manrope',Arial,sans-serif;font-weight:600;font-size:8px;line-height:1;text-transform:uppercase;letter-spacing:.14em;color:rgba(255,255,255,.7);background:transparent;border:1px solid rgba(255,255,255,.22);border-radius:4px;padding:5px 8px;white-space:nowrap;}
.kcm__blk{margin-bottom:16px;}
.kcm__lbl{font-family:'Unbounded';font-size:10px;letter-spacing:.1em;color:var(--accent);margin-bottom:6px;}
.kcm__txt{color:var(--muted);font-size:14px;line-height:1.55;}
.kcm__txt b{color:var(--text);font-weight:600;}
.kcm__btns{display:flex;flex-direction:column;gap:10px;margin-top:22px;}
.kcm__btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:'Manrope';font-weight:700;font-size:14px;padding:14px 18px;border-radius:9px;cursor:pointer;text-decoration:none;border:1px solid var(--border);width:100%;}
.kcm__btn svg{width:15px;height:15px;flex:none;}
.kcm__btn--full{background:var(--accent);color:#fff;border-color:var(--accent);}
.kcm__btn--ghost{background:transparent;color:var(--text);}
.kcm__lb{position:fixed;inset:0;z-index:99999;display:none;align-items:center;justify-content:center;padding:16px;}
.kcm__lb.open{display:flex;}
.kcm__lbbd{position:absolute;inset:0;background:rgba(4,4,6,.92);}
.kcm__lbbox{position:relative;width:100%;}
.kcm__lbframe{position:relative;width:100%;aspect-ratio:16/9;background:#000;border-radius:12px;overflow:hidden;border:1px solid var(--border);}
.kcm__lbframe iframe{position:absolute;inset:0;width:100%;height:100%;border:none;}
.kcm__lbx{position:absolute;top:-44px;right:0;width:38px;height:38px;border-radius:9px;background:var(--raise);border:1px solid var(--border);color:var(--text);font-size:22px;line-height:1;cursor:pointer;}
@media (min-width:481px){ .kcm{display:none;} }

.kcm__title{font-size:clamp(23px,6.6vw,30px);line-height:1.16;text-wrap:balance;overflow-wrap:anywhere}
.kcm__name{font-size:18px;line-height:1.3;overflow-wrap:anywhere}
.kcm__txt{font-size:14px;line-height:1.62}
</style>
<script>
(function(){
  var cases=[
  {
    "vid": "pd95FJSRFhF27W4YX4ioJJ",
    "full": "3ZsxHkdEuHUubxSAQZDRyG",
    "alt": "Кейс Одоевские консервы: видео о пищевом производстве, мобильная версия",
    "badge": "ВИДЕО / ФОТО",
    "name": "Одоевские консервы: от продуктовых роликов - к сайту RU/EN и материалам для выхода на рынок ОАЭ",
    "page": "/case-odoevskie",
    "tag": "Производитель фруктово-ягодных начинок. Начали с продуктовых роликов, после чего сотрудничество переросло в комплексную работу с материалами компании.",
    "tags": ["Видео","Фотосъёмка","Презентация","Фирменный стиль","Сайт"],
    "blocks": [
      [
        "",
        "Сайт RU/EN для работы с зарубежными партнёрами, презентация на русском и английском языках, разработка нового логотипа компании, подготовка материалов производства от А до Я."
      ],
      [
        "",
        "Создание материалов, которые помогают в развитии бизнеса за рубежом."
      ],
      [
        "",
        "Видео о заводе и продуктовых начинках, визитки, поздравления для партнёров, создание фирменных календарей, приглашения на выставки. В феврале планируем делать застройку стенда на выставке."
      ],
      [
        "РЕЗУЛЬТАТЫ",
        "- Новый сайт открыл переговоры в ОАЭ/MENA.<br>- Сделок стало больше.<br>- Все ключевые клиенты продолжили сотрудничество.<br>- Повысился трафик клиентов и уровень продаж новых продуктов."
      ]
    ]
  },
  {
    "vid": "35XkXms5VN3RLJcYsgWsnD",
    "full": "2FXfjS6hYEvLkWNKUveoBx",
    "alt": "Кейс Инвойсбокс: видео о сервисе приёма платежей, мобильная версия",
    "badge": "ВИДЕО / МАРКЕТИНГ",
    "name": "Инвойсбокс: от одного объясняющего ролика - к серии видео, инфографике и ведению маркетинга",
    "page": "/case-invoicebox",
    "crop": true,
    "tag": "Сервис приёма онлайн-платежей и автоматизации счетов для бизнеса. Начали с одного объясняющего видео, дальше клиент возвращался за новыми форматами.",
    "tags": ["Видео","Моушн","Инфографика","Маркетинг"],
    "blocks": [
      [
        "",
        "Объясняющие ролики о сервисе: как выставить счёт юридическому лицу за минуту и как принимать оплату на сайте."
      ],
      [
        "",
        "Короткие ролики по отдельным продуктам - выставление счетов и решение для интернет-магазинов."
      ],
      [
        "",
        "Ведение маркетинга и рекламы: не разовая задача, а постоянная работа по проекту."
      ],
      [
        "РЕЗУЛЬТАТЫ",
        "- Сложный финтех-продукт объясняется за секунды.<br>- От одного ролика - к серии видео и инфографике.<br>- Клиент передал нам и свой второй бизнес (GRT)."
      ]
    ]
  },
  {
    "vid": "iPcFsLF3eYfDYTauhcgjZj",
    "alt": "Кейс Вистекс: видео о заводе нетканых материалов, мобильная версия",
    "full": "fv7FAnLfbLaDaNJLtSQ74H",
    "badge": "ВИДЕО",
    "name": "Вистекс: 8 направлений завода - в 3 минутах видео для коммерческих предложений",
    "page": "/case-vistex",
    "tag": "",
    "tags": ["Видео","Дизайн"],
    "blocks": [
      [
        "",
        "Задача: показать 8 разных направлений производства за 3 минуты видеоролика, благодаря которому клиент сразу поймёт, что производит завод."
      ],
      [
        "",
        "Менеджеры используют ролик в коммерческих предложениях и email-коммуникации, чтобы быстро показать направления производства."
      ],
      [
        "",
        "Создали дизайн email-письма для рассылок потенциальным клиентам с кликабельным функционалом и возможностью смотреть видео о предприятии прямо в email-сообщении."
      ],
      [
        "",
        "Стало проще объяснять продукты и направления предприятия: менеджеры показывают завод роликом, а не пересказывают его текстом."
      ]
    ]
  }
];
  var PLAY='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="5 3 19 12 5 21 5 3"/></svg>';
  var ARROW='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M13 5l7 7-7 7"/></svg>';
  var BG='?autoplay=true&muted=true&loop=true&controls=false&playsInline=true&background=true';
  var lb=document.getElementById('kcmLb'), lbf=document.getElementById('kcmLbIframe');
  function openLb(id){ lbf.src='https://kinescope.io/embed/'+id+'?autoplay=true'; lb.classList.add('open'); }
  function closeLb(){ lb.classList.remove('open'); lbf.src=''; }
  document.getElementById('kcmLbx').addEventListener('click',closeLb);
  lb.querySelector('.kcm__lbbd').addEventListener('click',closeLb);
  var list=document.getElementById('kcmList'); if(!list) return;
  /* KORS: превью кейса получает src только когда строка подходит к экрану, а не сразу при загрузке страницы. */
  var kio=('IntersectionObserver' in window)?new IntersectionObserver(function(es,ob){
    es.forEach(function(e){
      if(!e.isIntersecting) return;
      var f=e.target.querySelector('iframe[data-src]');
      if(f){ f.src=f.getAttribute('data-src'); f.removeAttribute('data-src'); }
      ob.unobserve(e.target);
    });
  },{root:null,rootMargin:'250px 0px',threshold:0.01}):null;
  function kcmWatch(r){
    if(kio){ kio.observe(r); return; }
    var f=r.querySelector('iframe[data-src]');
    if(f){ f.src=f.getAttribute('data-src'); f.removeAttribute('data-src'); }
  }
  cases.forEach(function(c){
    var row=document.createElement('div'); row.className='kcm__row';
    var blocksHtml=c.blocks.map(function(b){return '<div class="kcm__blk"><div class="kcm__lbl">'+b[0]+'</div><div class="kcm__txt">'+b[1]+'</div></div>';}).join('');
    var tagsHtml=(c.tags&&c.tags.length)?('<div class="kcm__tags">'+c.tags.map(function(t){return '<span class="kcm__chip">'+t+'</span>';}).join('')+'</div>'):'';
    row.innerHTML=
      '<div class="kcm__media'+(c.crop?' kcm__media--crop':'')+'"><iframe data-src="https://kinescope.io/embed/'+c.vid+BG+'" title="'+(c.alt||c.name)+'" aria-label="'+(c.alt||c.name)+'" allow="autoplay; fullscreen; encrypted-media; picture-in-picture"></iframe></div>'+
      '<div class="kcm__body"><div class="kcm__name">'+c.name+'</div>'+tagsHtml+'<div class="kcm__tag">'+c.tag+'</div>'+blocksHtml+
        '<div class="kcm__btns">'+
          '<button class="kcm__btn kcm__btn--full kcm-full">'+PLAY+'Смотреть полное видео</button>'+
          '<a class="kcm__btn kcm__btn--ghost kcm-soon" href="'+(c.page||'#')+'">Смотреть, как строился проект '+ARROW+'</a>'+
        '</div>'+
      '</div>';
    row.querySelector('.kcm-full').addEventListener('click',function(){ openLb(c.full||c.vid); });
    var soon=row.querySelector('.kcm-soon'); if(!c.page){ soon.addEventListener('click',function(e){ e.preventDefault(); }); }
    list.appendChild(row); kcmWatch(row);
  });
})();
</script>

rec2704386401 — сквозной подвал (страница Footer 168456309) (5128 симв.)

<!-- ===== KORS · ПОДВАЛ (сквозной) · блок T123. Один адаптивный блок. Поставить в самый низ. ===== -->
<div class="kfoot-wrap">
  <footer class="kfoot" id="ksfooter">
    <div class="kfoot__top">
      <div class="kfoot__brand">
        <a class="kfoot__logo" href="/">KORS</a>
        <div class="kfoot__slogan">KORS - студия для производственных компаний. Видео, сайты, презентации, фото и дизайн материалов для продаж.</div>
        <div class="kfoot__city">МОСКВА · РАБОТАЕМ С 2019 ГОДА</div>
      </div>
      <div class="kfoot__col">
        <div class="kfoot__h">Разделы</div>
        <a href="/#rec2649099901">Услуги</a>
        <a href="/photographers">Фотосъёмка</a>
        <a href="/sites">Создание сайтов</a>
        <a href="/#rec2667018101">Кейсы</a>
        <a href="/#rec2663623901">Работы</a>
      </div>
      <div class="kfoot__col">
        <div class="kfoot__h">Связаться</div>
        <a href="tel:+79158677996">+7 915 867-79-96</a>
        <a href="https://wa.me/79158677996" target="_blank" rel="noopener">WhatsApp</a>
        <a href="https://t.me/korsprodsale" target="_blank" rel="noopener">Telegram - личный</a>
        <a href="https://t.me/KORSproduct" target="_blank" rel="noopener">Telegram - канал</a>
        <a href="https://max.ru/u/f9LHodD0cOJry8jfuI2u_X2FJWCLMC5S4I3JfDhcBC6iBjNcaUyKtbZ9Bto" target="_blank" rel="noopener">MAX</a>
        <a href="mailto:info@korsprod.ru">info@korsprod.ru</a>
      </div>
      <div class="kfoot__cta">
        <div class="kfoot__ctah">Обсудим ваш проект?</div>
        <a class="kfoot__ctabtn" href="#popup:zayavka">Оставить заявку →</a>
      </div>
    </div>
    <div class="kfoot__bottom">
      <div class="kfoot__req">ИП Кормышова Наталия Михайловна · ИНН 682801718806 · ОГРНИП 326680000032471</div>
      <div class="kfoot__legal">
        <a href="https://korsprod.ru/policy" target="_blank" rel="noopener">Политика конфиденциальности</a>
        <a href="https://korsprod.ru/user-agreement" target="_blank" rel="noopener">Пользовательское соглашение</a>
      </div>
      <div class="kfoot__copy">© 2019–2026 KORS</div>
      <div class="kfoot__rights">Все права защищены. Любое использование либо копирование материалов или подборки материалов сайта, элементов дизайна и оформления допускается лишь с письменного разрешения правообладателя и только со ссылкой на источник.</div>
    </div>
  </footer>
</div>
<style>
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Unbounded:wght@400;600;700;800&display=swap');
.kfoot-wrap{--bg:#0C0C0E;--raise:#141416;--card:#1B1B1F;--border:#2A2A2E;--text:#F5F3EF;--muted:#9A9A9A;--faint:#6a6a6e;--accent:#6D5DFB;--glow:rgba(109,93,251,.14);box-sizing:border-box;}
.kfoot-wrap *{box-sizing:border-box;margin:0;padding:0;}
.kfoot{background:#08080A;color:var(--text);font-family:'Manrope',Arial,sans-serif;-webkit-font-smoothing:antialiased;padding:70px 5vw 34px;border-top:1px solid var(--border);}
.kfoot__top{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:1.6fr 1fr 1.2fr 1.2fr;gap:40px;padding-bottom:48px;border-bottom:1px solid var(--border);}
.kfoot__logo{font-family:'Unbounded';font-weight:800;font-size:34px;color:var(--text);text-decoration:none;letter-spacing:-.02em;display:inline-block;margin-bottom:16px;}
.kfoot__slogan{color:var(--muted);font-size:14px;line-height:1.6;max-width:360px;margin-bottom:16px;}
.kfoot__city{font-family:'Unbounded';font-size:11px;letter-spacing:.1em;color:var(--faint);}
.kfoot__h{font-family:'Unbounded';font-size:12px;letter-spacing:.08em;color:var(--faint);margin-bottom:16px;}
.kfoot__col{display:flex;flex-direction:column;gap:11px;}
.kfoot__col a{color:var(--muted);text-decoration:none;font-size:15px;transition:.2s;}
.kfoot__col a:hover{color:var(--accent);}
.kfoot__ctah{font-family:'Unbounded';font-weight:600;font-size:19px;line-height:1.3;margin-bottom:18px;}
.kfoot__ctabtn{display:inline-block;background:var(--accent);color:#fff;text-decoration:none;font-weight:700;font-size:15px;padding:14px 24px;border-radius:9px;transition:.2s;}
.kfoot__ctabtn:hover{transform:translateY(-2px);box-shadow:0 10px 26px var(--glow);}
.kfoot__bottom{max-width:1280px;margin:0 auto;padding-top:26px;display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;}
.kfoot__req{color:var(--faint);font-size:12.5px;line-height:1.5;}
.kfoot__legal{display:flex;gap:22px;flex-wrap:wrap;}
.kfoot__legal a{color:var(--muted);text-decoration:none;font-size:12.5px;transition:.2s;}
.kfoot__legal a:hover{color:var(--accent);}
.kfoot__copy{color:var(--faint);font-size:12.5px;}
.kfoot__rights{flex:0 0 100%;color:var(--faint);font-size:12.5px;line-height:1.5;}
@media (max-width:900px){ .kfoot__top{grid-template-columns:1fr 1fr;gap:32px;} .kfoot__brand{grid-column:1 / -1;} }
@media (max-width:560px){
  .kfoot{padding:52px 20px 30px;}
  .kfoot__top{grid-template-columns:1fr;gap:30px;}
  .kfoot__bottom{flex-direction:column;align-items:flex-start;gap:12px;}
}
/* фикс: Tilda красит tel: в чёрный - возвращаем цвет */
.kfoot-wrap a[href^="tel:"]{color:var(--muted)!important;}
</style>

rec3239335801 — подвал /sites (2153 симв.)

<style>
/* ---------- Подвал ---------- */
.footer{padding:60px 0 42px}
.footer-grid{display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap}
.footer .logo{font-size:28px}
.footer p,.footer a{font-size:14px;color:var(--muted)}
.footer a:hover{color:var(--ink)}
.footer-col{display:flex;flex-direction:column;gap:8px}
.footer-col b{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
.footer-bottom{margin-top:40px;padding-top:24px;border-top:1px solid var(--line);font-size:13px;color:var(--gray);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
</style>
<footer class="footer">
  <div class="container">
    <div class="footer-grid">
      <div class="footer-col">
        <a href="https://korsprod.ru" class="logo">kors<span>.</span></a>
        <p>KORS — студия продающих сайтов и контента<br>для любого бизнеса: от производств до услуг.</p>
      </div>
      <div class="footer-col">
        <b>Студия KORS</b>
        <a href="https://korsprod.ru">Главная</a>
        <a href="https://korsprod.ru/photographers">Фотосъёмка</a>
        <a href="https://korsprod.ru/#rec2649099901">Услуги</a>
        <a href="https://korsprod.ru/#rec2663623901">Работы</a>
        <a href="https://korsprod.ru/#rec2667018101">Кейсы</a>
      </div>
      <div class="footer-col">
        <b>Контакты</b>
        <a href="tel:+79158677996">+7 915 867-79-96</a>
        <a href="mailto:info@korsprod.ru">info@korsprod.ru</a>
        <a href="https://t.me/korsprodsale">Telegram — написать</a>
        <a href="https://t.me/KORSproduct">Telegram — канал</a>
        <a href="https://wa.me/79158677996">WhatsApp</a>
      </div>
      <div class="footer-col">
        <b>Документы</b>
        <a href="https://korsprod.ru/policy">Политика конфиденциальности</a>
        <a href="https://korsprod.ru/user-agreement">Пользовательское соглашение</a>
        <p>ИП Кормышова Наталия Михайловна<br>ИНН 682801718806 · ОГРНИП 326680000032471</p>
      </div>
    </div>
    <div class="footer-bottom">
      <span>© 2019–2026 KORS</span>
      <span>Москва · работаем по всей России</span>
    </div>
  </div>
</footer>

BACKUP 2026-08-30 - до правок

rec3237946401 (3569 симв.) - /sites 201483509 - первый экран (hero)

<style>
/* ---------- Hero ---------- */
.hero{padding:168px 0 78px;position:relative}
.hero::before{content:'';position:absolute;top:-140px;right:-160px;width:620px;height:620px;background:radial-gradient(circle,rgba(109,93,251,.3),transparent 62%);filter:blur(10px);pointer-events:none}
.hero::after{content:'';position:absolute;bottom:-160px;left:-200px;width:520px;height:520px;background:radial-gradient(circle,rgba(109,93,251,.16),transparent 60%);pointer-events:none}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center;position:relative;z-index:1}
.hero .sub{margin:24px 0 34px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap}
.hero-trust{display:flex;gap:34px;margin-top:44px;flex-wrap:wrap}
.hero-trust div b{font-size:30px;font-weight:700;letter-spacing:-.03em;display:block;line-height:1.1}
.hero-trust div span{font-size:13.5px;color:var(--muted)}
.hero-collage{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.hero-collage .shot{position:relative;overflow:hidden;border-radius:var(--r-sm);box-shadow:0 0 0 1px var(--line);background:#0f0f11}
.hero-collage .shot:first-child{grid-column:1/-1}
.hero-collage .shot:not(:first-child){aspect-ratio:16/9}
.hero-collage .shot img{display:block;width:100%;height:auto}
.hero-collage .shot:not(:first-child) img{height:100%;aspect-ratio:16/9;object-fit:cover;object-position:top center}
.hero-collage .shot iframe{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);min-width:100%;min-height:100%;width:auto;height:auto;aspect-ratio:16/9;border:none;pointer-events:none}
</style>
<section class="hero">
  <div class="container hero-grid">
    <div>
      <div class="eyebrow">KORS · продающие сайты для бизнеса</div>
      <h1>Сайты для бизнеса с <span class="squig">конверсией от 5%<svg viewBox="0 0 300 24" preserveAspectRatio="none" aria-hidden="true"><path d="M4 14 C70 5 180 4 296 11"/><path d="M140 20 C200 13 255 12 293 16"/></svg></span> — первые заявки через 21 день</h1>
      <p class="sub">Смыслы, тексты, дизайн, сборка и реклама — одной командой KORS. Плюс то, чего не даст обычная веб-студия: своя съёмочная команда — реальные фото и видео вашего бизнеса вместо стоковых картинок.</p>
      <div class="hero-cta">
        <a class="btn btn-primary" href="#quiz">Получить план запуска</a>
        <a class="btn btn-ghost" href="#cases">Смотреть кейсы</a>
      </div>
      <div class="hero-trust">
        <div><b>460+</b><span>проектов студии<br>с 2019 года</span></div>
        <div><b>30+</b><span>ниш — от производств и b2b<br>до услуг и ритейла</span></div>
        <div><b>6,4%</b><span>средняя конверсия<br>наших сайтов в заявку</span></div>
      </div>
    </div>
    <div>
      <div class="hero-collage">
        <div class="shot"><img src="https://static.tildacdn.com/tild3463-3561-4837-b438-333439316132/povidlo-su-01-hero.jpg" alt="Первый экран сайта povidlo.su, сделанного студией KORS для производителя фруктово-ягодных начинок" loading="lazy"></div>
        <div class="shot"><img src="https://static.tildacdn.com/tild3561-3836-4335-b431-323263383230/povidlo-pro-01-hero.jpg" alt="Первый экран англоязычной версии сайта povidlo.pro, сделанной для выхода на рынок MENA" loading="lazy"></div>
        <div class="shot"><iframe src="https://kinescope.io/embed/eCGHEdUFdSyEjCBXxcsUSC?autoplay=true&muted=true&loop=true&controls=false&playsInline=true&background=true" title="Шоурил работ студии KORS" aria-label="Шоурил работ студии KORS" allow="autoplay; encrypted-media"></iframe></div>
      </div>
    </div>
  </div>
</section>

rec2699474201 (43541 симв.) - /case-odoevskie 168173409 - кейс целиком

<!-- ================================================================
     KORS · СТРАНИЦА-КЕЙС · ОДОЕВСКИЕ КОНСЕРВЫ
     ── ЗАПОЛНЕНИЕ ──────────────────────────────────────────────────
     Всё фото/видео вставляется В ОДНОМ МЕСТЕ - в списке ниже (KORS_CASE).
     • Картинки: вставь ссылку на изображение в кавычки. Пусто '' = заглушка.
       Где взять ссылку: загрузи фото в Tilda (Файл-менеджер сайта или любой
       блок «Изображение») и скопируй URL картинки; либо любой прямой URL.
     • Видео: впиши ID ролика Kinescope (часть после kinescope.io/… ). Пусто = заглушка.
     Больше нигде в коде править не нужно - слоты подтянутся сами.
     ================================================================ -->
<script>
window.KORS_CASE = {
  images: {
    cover:        'https://static.tildacdn.com/tild3563-6163-4139-a463-386164356466/odoev-cover-film-128.jpg',   // большая обложка вверху (гориз. фото/визуал)
    firstShoot:   '',   // шаг 01 - кадр первой съёмки начинки (если без видео)
    firstShoot2:  '',   // шаг 01 - кадр второй съёмки начинки (если без видео)
presentation: '',   // шаг 02 - одиночная картинка-запасной вариант (используется, только если slides пуст)
    factoryPhoto: '',   // шаг 03 - фото производства (если без видео)
    product1:     'https://static.tildacdn.com/tild3538-6336-4331-b630-393965653763/odoevskie-nachinki-1.jpg',   // шаг 04 - фото продукции 1
    product2:     'https://static.tildacdn.com/tild6462-3535-4432-b266-653436663333/odoevskie-kruasan-12.jpg',   // шаг 04 - фото продукции 2
    product3:     'https://static.tildacdn.com/tild6462-3131-4336-a237-366662616565/odoevskie-laboratori.jpg',   // шаг 04 - фото цеха/процесса
    logoBefore:   'https://static.tildacdn.com/tild6462-3439-4365-a261-333634373338/odoevskie-logo-do-12.jpg',   // шаг 05 - СТАРЫЙ логотип (до)
    logoAfter:    'https://static.tildacdn.com/tild6338-3131-4439-b966-623739303361/odoevskie-logo-posle.jpg',   // шаг 05 - НОВЫЙ логотип (после)
    brand1:       '',   // шаг 06 - визитки
    brand2:       'https://static.tildacdn.com/tild6162-3336-4666-a338-323336396465/odoev-otkrytka-vesna.jpg',   // шаг 06 - открытки
    brand3:       'https://static.tildacdn.com/tild6632-3465-4634-b861-393137323563/odoevskie-priglasite.jpg',   // шаг 06 - др. носители
    siteShots:    ''    // шаг 07 - скриншоты povidlo.su и povidlo.pro
  },
  // Скриншоты сайтов для шага 07. Вкладка RU - povidlo.su, вкладка EN - povidlo.pro.
  siteRu: [
    'https://static.tildacdn.com/tild3463-3561-4837-b438-333439316132/povidlo-su-01-hero.jpg',
    'https://static.tildacdn.com/tild6439-3335-4533-a436-656336633534/povidlo-su-02-kontro.jpg',
    'https://static.tildacdn.com/tild6336-3035-4463-b463-653463326363/povidlo-su-03-katalo.jpg',
    'https://static.tildacdn.com/tild6538-3937-4435-b339-336162656636/povidlo-su-04-menedz.jpg'
  ],
  siteEn: [
    'https://static.tildacdn.com/tild3561-3836-4335-b431-323263383230/povidlo-pro-01-hero.jpg',
    'https://static.tildacdn.com/tild6163-3731-4132-b166-613736353464/povidlo-pro-02-about.jpg',
    'https://static.tildacdn.com/tild3335-3935-4237-b938-386233613336/povidlo-pro-03-leadf.jpg'
  ],
  // Визитки для шага 06. Две карточки, открываются в том же лайтбоксе, что и развороты.
  // Пусто - используется одиночный слот images.brand1.
  cards: [
    'https://static.tildacdn.com/tild3261-6362-4033-a662-393031353131/odoev-vizitka-ivanov.jpg',
    'https://static.tildacdn.com/tild6232-3936-4463-a637-333436386635/odoev-vizitka-veklic.jpg'
  ],
  // Развороты печатной презентации для шага 02. Два комплекта, переключаются вкладками RU/EN.
  // Порядок = порядок в галерее. Пусто в slides - в слоте останется заглушка,
  // пусто в slidesEn - вкладка EN не показывается.
  slides: [
    'https://static.tildacdn.com/tild3839-6265-4534-b632-383934363939/odoev-pres-01.jpg',
    'https://static.tildacdn.com/tild6365-3736-4633-b638-623535336533/odoev-pres-02.jpg',
    'https://static.tildacdn.com/tild3861-3537-4062-b638-623737303666/odoev-pres-03.jpg',
    'https://static.tildacdn.com/tild3739-3733-4737-a439-373962306636/odoev-pres-04.jpg',
    'https://static.tildacdn.com/tild6131-3763-4633-a632-383430346635/odoev-pres-05.jpg',
    'https://static.tildacdn.com/tild6238-3563-4662-b936-343165656562/odoev-pres-06.jpg',
    'https://static.tildacdn.com/tild6330-3263-4431-b136-306366623031/odoev-pres-07.jpg',
    'https://static.tildacdn.com/tild3263-6531-4663-b630-316431303234/odoev-pres-08.jpg',
    'https://static.tildacdn.com/tild3032-6661-4835-b932-613834373837/odoev-pres-09.jpg',
    'https://static.tildacdn.com/tild6439-3366-4065-b763-343465383338/odoev-pres-10.jpg',
    'https://static.tildacdn.com/tild3431-3232-4331-a661-653335363963/odoev-pres-11.jpg',
    'https://static.tildacdn.com/tild3239-6231-4336-a531-363563343563/odoev-pres-12.jpg',
    'https://static.tildacdn.com/tild3231-6331-4262-b262-363063643633/odoev-pres-13.jpg',
    'https://static.tildacdn.com/tild6537-3532-4534-a166-623232326538/odoev-pres-14.jpg',
    'https://static.tildacdn.com/tild3763-3332-4665-b631-353963643534/odoev-pres-15.jpg',
    'https://static.tildacdn.com/tild3439-6161-4537-a531-633864306164/odoev-pres-16.jpg'
  ],
  slidesEn: [
    'https://static.tildacdn.com/tild6132-3033-4436-b735-343631343130/odoev-pres-en-01.jpg',
    'https://static.tildacdn.com/tild3832-3935-4631-b631-366464363039/odoev-pres-en-02.jpg',
    'https://static.tildacdn.com/tild3332-3761-4538-b430-333335363031/odoev-pres-en-03.jpg',
    'https://static.tildacdn.com/tild6566-3932-4236-b365-323064646265/odoev-pres-en-04.jpg',
    'https://static.tildacdn.com/tild3238-6164-4730-b662-366261353863/odoev-pres-en-05.jpg',
    'https://static.tildacdn.com/tild3939-3332-4437-a131-643238343734/odoev-pres-en-06.jpg',
    'https://static.tildacdn.com/tild6264-3134-4561-a333-646630626136/odoev-pres-en-07.jpg',
    'https://static.tildacdn.com/tild3463-6639-4532-b364-636338303939/odoev-pres-en-08.jpg',
    'https://static.tildacdn.com/tild6634-3632-4239-a463-363462323464/odoev-pres-en-09.jpg',
    'https://static.tildacdn.com/tild3434-3061-4432-b663-386464313137/odoev-pres-en-10.jpg',
    'https://static.tildacdn.com/tild6265-6534-4335-a130-306462656133/odoev-pres-en-11.jpg',
    'https://static.tildacdn.com/tild6332-6135-4762-a135-303166363439/odoev-pres-en-12.jpg',
    'https://static.tildacdn.com/tild3930-3535-4231-a436-326336303337/odoev-pres-en-13.jpg',
    'https://static.tildacdn.com/tild3335-3832-4730-b466-393065656433/odoev-pres-en-14.jpg',
    'https://static.tildacdn.com/tild3934-3966-4931-a466-613731333338/odoev-pres-en-15.jpg',
    'https://static.tildacdn.com/tild6465-3432-4361-b464-343863303862/odoev-pres-en-16.jpg'
  ],
  videos: {
    firstShoot:   'sRyZwPm3BS9CVspVi2sLx3',   // шаг 01 - ролик «Термостабильные начинки»
    firstShoot2:  'mZiwnH9uZAdc15hhRsqPvB',    // шаг 01 - ролик «Нетермостабильные начинки»
    factory:      '3ZsxHkdEuHUubxSAQZDRyG',    // шаг 03 - фильм о заводе, полная версия
    main:         'j8Pq4wWMNTPm6Js8UQiM1n'     // блок «Видео проекта»
  }
};
</script>
<div class="kcp">
  <!-- ===== HERO ===== -->
  <header class="kcp__hero">
    <div class="kcp__hero-in">
      <a class="kcp__back" href="/#rec2667018101">← Все проекты</a>
      <div class="kcp__eyebrow">КЕЙС · ПИЩЕВОЕ ПРОИЗВОДСТВО</div>
      <h1 class="kcp__title">Одоевские консервы</h1>
      <div class="kcp__tags"><span class="kcp__tag">Видео</span><span class="kcp__tag">Фотосъёмка</span><span class="kcp__tag">Презентация</span><span class="kcp__tag">Фирменный стиль</span><span class="kcp__tag">Сайт</span></div>
      <p class="kcp__lead">Как из одной видеосъёмки вырос полный комплект материалов - от роликов и фотосъёмки до нового логотипа, фирменного стиля и двух сайтов: русского и экспортного, под рынок ОАЭ.</p>
      <div class="kcp__facts">
        <div class="kcp__fact"><span>Сфера</span><b>Пищевое производство · B2B</b></div>
        <div class="kcp__fact"><span>С чего начали</span><b>Видеосъёмка продукта</b></div>
        <div class="kcp__fact"><span>Где сейчас</span><b>povidlo.su + povidlo.pro</b></div>
        <div class="kcp__fact"><span>Формат</span><b>полный комплект материалов</b></div>
      </div>
    </div>
    <!-- ВСТАВИТЬ: большое обложечное фото/видео (завод, продукция или кадр со съёмки). Пока заглушка. -->
    <div class="kcp__cover kcp__ph" data-img="cover"><div class="kcp__ph-label">📷 Обложка: фото продукции / кадр со съёмки (16:9)</div></div>
  </header>
  <!-- ===== КТО КЛИЕНТ ===== -->
  <section class="kcp__sec">
    <div class="kcp__grid2">
      <div>
        <div class="kcp__kick">- О КОМПАНИИ</div>
        <h2 class="kcp__h2">Сильное производство, которое было не видно</h2>
      </div>
      <div class="kcp__prose">
        <p>«Одоевские консервы» - производитель из посёлка Одоев в Тульской области. Уже более двадцати лет компания выпускает термостабильные фруктово-ягодные начинки, повидло, джемы, конфитюры, пюре и наполнители для хлебопекарной, кондитерской и молочной промышленности.</p>
        <p>Это классический B2B: их продукт - ингредиент, который живёт <b>внутри</b> чужих изделий. Начинка в круассане, повидло в печенье, наполнитель в йогурте. Продукт качественный, производство серьёзное - но со стороны этого масштаба не было видно.</p>
        <p>Видео, сайт, презентация и фирменные материалы существовали разрозненно и не складывались в единую картину. Компанию нельзя было «показать» - только долго объяснять на словах.</p>
      </div>
    </div>
  </section>
  <!-- ===== ЗАДАЧА (акцентная плашка) ===== -->
  <section class="kcp__sec">
    <div class="kcp__callout">
      <div class="kcp__callout-k">ЗАДАЧА</div>
      <div class="kcp__callout-t">Показать масштаб и качество производства так, чтобы партнёр видел уровень компании за несколько минут - а не верил на слово.</div>
    </div>
  </section>
  <!-- ===== ТАЙМЛАЙН РАБОТЫ ===== -->
  <section class="kcp__sec">
    <div class="kcp__kick">- КАК ШЛА РАБОТА</div>
    <h2 class="kcp__h2">Из одной съёмки - в полный цикл</h2>
    <p class="kcp__sub">Сотрудничество началось с одного ролика и постепенно выросло в полный комплект материалов. Вот путь шаг за шагом.</p>
    <ol class="kcp__timeline">
      <li class="kcp__step">
        <div class="kcp__step-num">01</div>
        <div class="kcp__step-body">
          <h3>Первые видео на начинке</h3>
          <p>Начали с двух роликов о продукте. Сняли начинку «в деле» - текстуру, цвет, как она работает в готовом изделии. Это первое, что показывает потенциальному партнёру, что перед ним - качественный ингредиент.</p>
          <!-- Два ролика первой съёмки. ID берутся из KORS_CASE.videos (firstShoot / firstShoot2). -->
          <div class="kcp__vid2">
            <div class="kcp__ph" data-video="firstShoot" data-img="firstShoot"><div class="kcp__ph-label">🎬 Термостабильные начинки</div></div>
            <div class="kcp__ph" data-video="firstShoot2" data-img="firstShoot2"><div class="kcp__ph-label">🎬 Нетермостабильные начинки</div></div>
          </div>
        </div>
      </li>
      <li class="kcp__step">
        <div class="kcp__step-num">02</div>
        <div class="kcp__step-body">
          <h3>Печатная презентация</h3>
          <p>Собрали продукт и производство в понятную структуру - презентацию для переговоров и выставок. Разложили ассортимент, преимущества и мощности так, чтобы менеджеру было легко показать компанию клиенту.</p>
          <!-- Галерея разворотов: ссылки в KORS_CASE.slides. Клик по развороту открывает его на весь экран. -->
          <div class="kcp__gal" data-gallery></div>
          <div class="kcp__ph kcp__ph--wide" data-img="presentation"><div class="kcp__ph-label">📑 Развороты печатной презентации</div></div>
        </div>
      </li>
      <li class="kcp__step">
        <div class="kcp__step-num">03</div>
        <div class="kcp__step-body">
          <h3>Видео о заводе</h3>
          <p>Сняли само производство: масштаб цехов, оборудование, процессы. Именно это видео закрывает главный вопрос B2B-клиента - «а справятся ли по объёму и качеству». Масштаб теперь виден, а не описан словами.</p>
          <div class="kcp__ph kcp__ph--wide" data-video="factory" data-img="factoryPhoto"><div class="kcp__ph-label">🎬 Видео о заводе / кадры производства</div></div>
        </div>
      </li>
      <li class="kcp__step">
        <div class="kcp__step-num">04</div>
        <div class="kcp__step-body">
          <h3>Фотосъёмка для презентации и каталога</h3>
          <p>Сделали предметную и производственную фотосъёмку - продукция, упаковка, цеха. Единый визуальный ряд, который лёг в презентацию, каталог и дальнейшие материалы.</p>
          <div class="kcp__ph kcp__ph--grid">
            <div class="kcp__ph" data-img="product1"><div class="kcp__ph-label">📷 фото продукции 1</div></div>
            <div class="kcp__ph" data-img="product2"><div class="kcp__ph-label">📷 фото продукции 2</div></div>
            <div class="kcp__ph" data-img="product3"><div class="kcp__ph-label">📷 фото цеха / процесса</div></div>
          </div>
        </div>
      </li>
      <li class="kcp__step">
        <div class="kcp__step-num">05</div>
        <div class="kcp__step-body">
          <h3>Новый логотип: до / после</h3>
          <p>Обновили логотип - сохранили узнаваемость, но привели к современному виду, который одинаково хорошо работает на упаковке, в презентации и на сайте. Сравните сами:</p>
          <!-- ДО/ПОСЛЕ слайдер. ВСТАВИТЬ 2 картинки логотипа: старый и новый -->
          <div class="kcp__ba" id="kcpBA">
            <div class="kcp__ba-after kcp__ph" data-img="logoAfter" data-fit="contain"><div class="kcp__ph-label">✅ НОВЫЙ логотип (после)</div></div>
            <div class="kcp__ba-before kcp__ph" id="kcpBABefore" data-img="logoBefore" data-fit="contain"><div class="kcp__ph-label">◻️ СТАРЫЙ логотип (до)</div></div>
            <div class="kcp__ba-handle" id="kcpBAHandle"><span></span></div>
            <div class="kcp__ba-tag kcp__ba-tag--l">ДО</div>
            <div class="kcp__ba-tag kcp__ba-tag--r">ПОСЛЕ</div>
          </div>
          <div class="kcp__ba-hint">Потяните ползунок влево-вправо, чтобы сравнить</div>
        </div>
      </li>
      <li class="kcp__step">
        <div class="kcp__step-num">06</div>
        <div class="kcp__step-body">
          <h3>Фирменный стиль: открытки, визитки, носители</h3>
          <p>Оформили фирменные носители - визитки, открытки и другие материалы в единой стилистике. Компания получила узнаваемый облик, который работает на каждой точке контакта.</p>
          <div class="kcp__cards" data-cards></div>
          <div class="kcp__ph kcp__ph--grid">
            <div class="kcp__ph" data-img="brand1"><div class="kcp__ph-label">📷 визитки</div></div>
            <div class="kcp__ph" data-img="brand2" data-fit="contain"><div class="kcp__ph-label">📷 открытки</div></div>
            <div class="kcp__ph" data-img="brand3" data-fit="contain"><div class="kcp__ph-label">📷 др. носители</div></div>
          </div>
        </div>
      </li>
      <li class="kcp__step">
        <div class="kcp__step-num">07</div>
        <div class="kcp__step-body">
          <h3>Два сайта: povidlo.su и povidlo.pro</h3>
          <p>Сделали не языковой переключатель, а два отдельных сайта. Русский - povidlo.su, под брендом «Одоевские консервы». Английский - povidlo.pro, под экспортным брендом POVIDLO: он собран под рынок ОАЭ и региона MENA, с отдельной структурой и своими акцентами.</p>
          <div class="kcp__gal kcp__gal--site" data-sitegal></div>
          <div class="kcp__sitebtns">
            <a class="kcp__sitebtn" href="https://povidlo.su" target="_blank" rel="noopener">Открыть povidlo.su</a>
            <a class="kcp__sitebtn kcp__sitebtn--ghost" href="https://povidlo.pro" target="_blank" rel="noopener">Открыть povidlo.pro</a>
          </div>
          <div class="kcp__ph kcp__ph--wide" data-img="siteShots"><div class="kcp__ph-label">💻 Скриншоты povidlo.su и povidlo.pro</div></div>
        </div>
      </li>
      <li class="kcp__step kcp__step--next">
        <div class="kcp__step-num">→</div>
        <div class="kcp__step-body">
          <h3>Что дальше</h3>
          <p>Следующий этап - застройка выставочного стенда (планируется на зиму). Сотрудничество продолжается: от продукта на экране - к тому, как компания выглядит вживую на выставке.</p>
        </div>
      </li>
    </ol>
  </section>
  <!-- ===== РЕЗУЛЬТАТ ===== -->
  <section class="kcp__sec">
    <div class="kcp__result">
      <div class="kcp__kick">- ЧТО ИЗМЕНИЛОСЬ</div>
      <h2 class="kcp__h2">Компанию теперь можно показать, а не пересказывать</h2>
      <div class="kcp__result-grid">
        <div class="kcp__rcard"><div class="kcp__rc-t">Единый комплект</div><p>Видео, фото, презентация, логотип, фирменный стиль и сайт - собраны в одну систему и работают вместе.</p></div>
        <div class="kcp__rcard"><div class="kcp__rc-t">Масштаб за минуты</div><p>Производство и уровень компании видно сразу - на переговорах, выставках и в презентации, без долгих объяснений.</p></div>
        <div class="kcp__rcard"><div class="kcp__rc-t">Экспортное направление</div><p>Экспорт и представительства в Грузии и ОАЭ. Англоязычный povidlo.pro - то, чем компания представляет себя в регионе MENA.</p></div>
        <div class="kcp__rcard"><div class="kcp__rc-t">Долгое партнёрство</div><p>Сотрудничество выросло из одной видеосъёмки в постоянную работу над материалами компании.</p></div>
      </div>
    </div>
  </section>
  <!-- ===== ЧТО ВОШЛО (услуги) ===== -->
  <section class="kcp__sec">
    <div class="kcp__kick">- ЧТО ВОШЛО В КОМПЛЕКТ</div>
    <div class="kcp__chips">
      <span>Видеопродакшн</span><span>Съёмка производства</span><span>Фотосъёмка</span><span>Печатная презентация</span><span>Редизайн логотипа</span><span>Фирменный стиль</span><span>Визитки и открытки</span><span>Сайт RU</span><span>Сайт EN (MENA)</span>
    </div>
  </section>
  <!-- ===== ВИДЕО КЕЙСА (СКРЫТ) ===== -->
  <!-- СЕКЦИЯ СКРЫТА 28.08.2026. Причина: на странице уже четыре ролика (два в шаге 01 и фильм о заводе в шаге 03).
       Разметка и ключ KORS_CASE.videos.main оставлены нетронутыми. Чтобы вернуть секцию, снимите этот комментарий.
       ID ролика подставляется из KORS_CASE.videos.main
  <section class="kcp__sec">
    <div class="kcp__kick">- СМОТРЕТЬ</div>
    <h2 class="kcp__h2">Видео проекта</h2>
    <div class="kcp__video" data-video="main"><div class="kcp__ph-label">🎬 Основной ролик проекта</div></div>
  </section>
  -->
  <!-- ===== ОТЗЫВ КЛИЕНТА ===== -->
  <section class="kcp__sec">
    <div class="kcp__kick">- ОТЗЫВ</div>
    <h2 class="kcp__h2">Благодарственное письмо</h2>
    <p class="kcp__sub">ООО «МастерДжем» - юридическое лицо «Одоевских консервов»</p>
    <div class="kcp__letter"><img src="https://static.tildacdn.com/tild3231-6563-4932-b139-373433306561/pismo-odoevskie-1200.jpg" alt="Благодарственное письмо от ООО «МастерДжем» (Одоевские консервы) команде KORS Production за фото- и видеосъёмку производства и материалы для сайта и презентаций" loading="lazy"></div>
  </section>
  <!-- ===== ДРУГИЕ КЕЙСЫ ===== -->
  <section class="kcp__sec">
    <div class="kcp__kick">- ЕЩЁ</div>
    <h2 class="kcp__h2">Другие кейсы</h2>
    <div class="kcp__more">
      <a class="kcp__more-card" href="/case-invoicebox"><span>Кейс</span><b>Инвойсбокс</b><i>Видеоматериалы для платформы →</i></a>
      <a class="kcp__more-card" href="/case-vistex"><span>Кейс</span><b>Вистекс</b><i>Съёмка видео о предприятии →</i></a>
    </div>
  </section>
  <!-- ===== CTA ===== -->
  <section class="kcp__cta">
    <h2>Хотите так же показать своё производство?</h2>
    <p>Начнём с одного шага - а вырастем в полный цикл, если понравится результат.</p>
    <a class="kcp__cta-btn" href="#popup:zayavka">Обсудить проект →</a>
  </section>
  <!-- Лайтбокс. Тот же, что для благодарственных писем на главной, плюс листание. -->
  <div class="kcp__lb" id="kcpLb" aria-hidden="true">
    <div class="kcp__lbbd"></div>
    <div class="kcp__lbbox">
      <button class="kcp__lbx" id="kcpLbx" aria-label="Закрыть">×</button>
      <button class="kcp__lbnav kcp__lbnav--prev" id="kcpLbPrev" aria-label="Предыдущий">&#8249;</button>
      <img id="kcpLbImg" alt="">
      <button class="kcp__lbnav kcp__lbnav--next" id="kcpLbNext" aria-label="Следующий">&#8250;</button>
      <div class="kcp__lbcount" id="kcpLbCount"></div>
    </div>
  </div>
</div>
<style>
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Unbounded:wght@400;600;700;800&display=swap');
.kcp{--bg:#0C0C0E;--raise:#141416;--card:#1B1B1F;--border:#2A2A2E;--soft:#242428;--text:#F5F3EF;--muted:#9A9A9A;--faint:#6a6a6e;--accent:#6D5DFB;--glow:rgba(109,93,251,.14);
  box-sizing:border-box;background:var(--bg);color:var(--text);font-family:'Manrope',Arial,sans-serif;-webkit-font-smoothing:antialiased;}
.kcp *{box-sizing:border-box;margin:0;padding:0;}
.kcp p{line-height:1.65;}
.kcp__eyebrow,.kcp__kick{font-family:'Unbounded';font-size:12px;letter-spacing:.14em;color:var(--accent);}
.kcp__h2{font-family:'Unbounded';font-weight:700;font-size:clamp(26px,3.2vw,42px);letter-spacing:-.02em;line-height:1.12;margin:14px 0 0;}
.kcp__sub{color:var(--muted);font-size:17px;line-height:1.6;max-width:640px;margin-top:14px;}
/* HERO */
.kcp__hero{padding:70px 6vw 0;max-width:1280px;margin:0 auto;}
.kcp__hero-in{max-width:900px;}
.kcp__back{display:inline-block;color:var(--muted);text-decoration:none;font-size:14px;font-weight:600;margin-bottom:34px;transition:.2s;}
.kcp__back:hover{color:var(--accent);}
.kcp__hero .kcp__eyebrow{margin-bottom:18px;}
.kcp__title{font-family:'Unbounded';font-weight:800;font-size:clamp(40px,7vw,88px);letter-spacing:-.03em;line-height:1;margin-bottom:24px;}
.kcp__lead{font-size:clamp(18px,2vw,22px);line-height:1.55;color:#d8d6d1;max-width:760px;}
.kcp__tags{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 18px;}
.kcp__tag{font-family:'Manrope',Arial,sans-serif;font-weight:600;font-size:9px;line-height:1;text-transform:uppercase;letter-spacing:.14em;color:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.22);border-radius:4px;padding:5px 8px;white-space:nowrap;}
@media (max-width:480px){ .kcp__tag{font-size:8px;padding:5px 7px;} .kcp__tags{gap:5px;margin-bottom:14px;} }
.kcp__facts{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:14px;overflow:hidden;margin-top:44px;}
.kcp__fact{background:var(--raise);padding:20px 22px;display:flex;flex-direction:column;gap:7px;}
.kcp__fact span{font-size:12px;color:var(--faint);text-transform:uppercase;letter-spacing:.06em;}
.kcp__fact b{font-family:'Unbounded';font-weight:600;font-size:14px;line-height:1.3;}
.kcp__cover{margin:48px auto 0;max-width:1280px;aspect-ratio:16/8;border-radius:20px;}
/* SECTIONS */
.kcp__sec{max-width:1080px;margin:0 auto;padding:64px 6vw;}
.kcp__grid2{display:grid;grid-template-columns:0.85fr 1.15fr;gap:48px;align-items:start;}
.kcp__prose p{color:#c9c7c2;font-size:17px;margin-bottom:16px;}
.kcp__prose p:last-child{margin-bottom:0;}
.kcp__prose b{color:var(--text);font-weight:600;}
/* CALLOUT */
.kcp__callout{background:linear-gradient(135deg,rgba(109,93,251,.10),rgba(109,93,251,.02));border:1px solid rgba(109,93,251,.3);border-radius:18px;padding:40px 44px;}
.kcp__callout-k{font-family:'Unbounded';font-size:12px;letter-spacing:.14em;color:var(--accent);margin-bottom:14px;}
.kcp__callout-t{font-family:'Unbounded';font-weight:600;font-size:clamp(20px,2.4vw,30px);line-height:1.35;letter-spacing:-.01em;}
/* TIMELINE */
.kcp__timeline{list-style:none;margin-top:44px;display:flex;flex-direction:column;gap:26px;}
.kcp__step{display:grid;grid-template-columns:88px 1fr;gap:26px;background:var(--raise);border:1px solid var(--border);border-radius:18px;padding:30px 32px;transition:.25s;}
.kcp__step:hover{border-color:rgba(109,93,251,.4);}
.kcp__step-num{font-family:'Unbounded';font-weight:700;font-size:34px;color:var(--accent);line-height:1;opacity:.85;}
.kcp__step-body h3{font-family:'Unbounded';font-weight:600;font-size:22px;letter-spacing:-.01em;margin-bottom:12px;}
.kcp__step-body p{color:#c4c2bd;font-size:16px;}
.kcp__step--next{background:transparent;border-style:dashed;}
.kcp__step--next .kcp__step-num{opacity:1;}
/* PLACEHOLDERS */
.kcp__ph{position:relative;background:repeating-linear-gradient(45deg,#141416,#141416 12px,#17171a 12px,#17171a 24px);border:2px dashed #38383e;border-radius:14px;min-height:150px;display:flex;align-items:center;justify-content:center;text-align:center;}
.kcp__ph-label{color:#8a8a90;font-size:13px;font-weight:600;line-height:1.5;padding:16px;}
.kcp__ph-label small{color:var(--faint);font-weight:500;}
.kcp__ph--wide{margin-top:18px;aspect-ratio:16/8;min-height:0;}
.kcp__ph--grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:18px;background:none;border:none;padding:0;}
.kcp__ph--grid .kcp__ph{aspect-ratio:4/3;min-height:0;}
.kcp__cover.kcp__ph{aspect-ratio:16/8;}
/* BEFORE/AFTER */
.kcp__ba{position:relative;margin-top:20px;aspect-ratio:16/9;border-radius:16px;overflow:hidden;border:1px solid var(--border);user-select:none;}
.kcp__ba-after,.kcp__ba-before{position:absolute;inset:0;border-radius:0;border:none;}
.kcp__ba-before{width:100%;clip-path:inset(0 50% 0 0);}
.kcp__ba-handle{position:absolute;top:0;bottom:0;left:50%;width:2px;background:var(--accent);cursor:ew-resize;transform:translateX(-1px);}
.kcp__ba-handle span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:40px;height:40px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(0,0,0,.4);}
.kcp__ba-handle span::before{content:'⟷';color:#000;font-size:18px;font-weight:700;}
.kcp__ba-tag{position:absolute;top:14px;font-family:'Unbounded';font-size:11px;letter-spacing:.1em;background:rgba(0,0,0,.6);padding:5px 11px;border-radius:6px;}
.kcp__ba-tag--l{left:14px;}
.kcp__ba-tag--r{right:14px;}
.kcp__ba-hint{text-align:center;color:var(--faint);font-size:13px;margin-top:12px;}
/* RESULT */
.kcp__result-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:34px;}
.kcp__rcard{background:var(--raise);border:1px solid var(--border);border-radius:16px;padding:26px 28px;}
.kcp__rc-t{font-family:'Unbounded';font-weight:600;font-size:18px;color:var(--accent);margin-bottom:10px;}
.kcp__rcard p{color:#c4c2bd;font-size:15px;}
/* CHIPS */
.kcp__chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;}
.kcp__chips span{font-family:'Manrope';font-weight:600;font-size:14px;color:var(--text);background:rgba(109,93,251,.08);border:1px solid rgba(109,93,251,.4);border-radius:8px;padding:10px 16px;}
/* VIDEO */
.kcp__video{margin-top:24px;aspect-ratio:16/9;border-radius:18px;overflow:hidden;border:1px solid var(--border);background:#000;}
.kcp__video iframe{width:100%;height:100%;border:none;}
/* CTA */
.kcp__vid2{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px;}
.kcp__vid2 .kcp__ph{aspect-ratio:16/9;min-height:0;margin-top:0;}
.kcp__letter{margin-top:26px;max-width:440px;}
.kcp__letter img{display:block;width:100%;height:auto;border-radius:14px;border:1px solid var(--border);}
.kcp__more{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:28px;}
.kcp__more-card{display:block;background:var(--raise);border:1px solid var(--border);border-radius:16px;padding:24px 26px;text-decoration:none;transition:.2s;}
.kcp__more-card:hover{border-color:var(--accent);}
.kcp__more-card span{display:block;font-size:12px;letter-spacing:2px;color:var(--accent);text-transform:uppercase;margin-bottom:10px;}
.kcp__more-card b{display:block;font-family:'Unbounded',sans-serif;font-weight:700;font-size:22px;line-height:1.2;color:var(--text);margin-bottom:8px;}
.kcp__more-card i{font-style:normal;font-size:15px;color:var(--muted);}
@media (max-width:640px){.kcp__vid2{grid-template-columns:1fr;}.kcp__more{grid-template-columns:1fr;}}
/* --- Галерея разворотов презентации --- */
.kcp__gal{margin-top:18px;}
.kcp__galhead{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:12px;}
.kcp__galtabs{display:inline-flex;gap:4px;background:var(--soft);border:1px solid var(--border);border-radius:9px;padding:4px;}
.kcp__galtab{padding:7px 18px;border:none;background:none;color:var(--muted);font-family:'Manrope',Arial,sans-serif;font-weight:600;font-size:13px;line-height:1;letter-spacing:1.2px;border-radius:6px;cursor:pointer;transition:.2s;}
.kcp__galtab:hover{color:var(--text);}
.kcp__galtab.is-on{background:var(--accent);color:#fff;}
.kcp__galnote{margin-top:14px;font-size:13px;line-height:1.5;color:var(--muted);letter-spacing:.3px;}
.kcp__galnav{display:flex;gap:8px;flex-shrink:0;}
.kcp__galarrow{width:40px;height:40px;border:1px solid var(--border);background:var(--raise);border-radius:4px;color:var(--text);font:20px/1 Arial,sans-serif;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.2s;padding:0;}
.kcp__galarrow:hover{border-color:var(--accent);color:var(--accent);}
.kcp__galarrow:disabled{opacity:.3;cursor:default;border-color:var(--border);color:var(--text);}
.kcp__galtrack{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:4px;}
.kcp__galtrack::-webkit-scrollbar{display:none;}
.kcp__galcard{flex:0 0 calc((100% - 24px)/3);scroll-snap-align:start;display:block;padding:0;margin:0;border:1px solid var(--border);background:var(--raise);border-radius:10px;overflow:hidden;cursor:zoom-in;aspect-ratio:1200/873;transition:.2s;font:inherit;}
.kcp__galcard:hover{border-color:var(--accent);}
.kcp__galcard img{width:100%;height:100%;object-fit:cover;display:block;}
/* --- Лайтбокс --- */
.kcp__lb{position:fixed;inset:0;z-index:99999;display:none;align-items:center;justify-content:center;padding:64px 40px;}
.kcp__lb.open{display:flex;}
.kcp__lbbd{position:absolute;inset:0;background:rgba(4,4,6,.9);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);}
.kcp__lbbox{position:relative;width:auto;max-width:min(1100px,100%);display:flex;align-items:center;justify-content:center;}
.kcp__lbbox img{display:block;max-width:100%;max-height:calc(100vh - 170px);width:auto;height:auto;border-radius:10px;background:#0f0f11;}
.kcp__lbx{position:absolute;top:-48px;right:0;width:38px;height:38px;border-radius:9px;background:var(--raise);border:1px solid var(--border);color:var(--text);font:20px/1 Arial,sans-serif;cursor:pointer;padding:0;}
.kcp__lbx:hover{border-color:var(--accent);color:var(--accent);}
.kcp__lbnav{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;background:rgba(20,20,22,.85);border:1px solid var(--border);color:var(--text);font:22px/1 Arial,sans-serif;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.2s;padding:0;}
.kcp__lbnav:hover{border-color:var(--accent);color:var(--accent);}
.kcp__lbnav--prev{left:10px;}
.kcp__lbnav--next{right:10px;}
.kcp__lbcount{position:absolute;bottom:-36px;left:50%;transform:translateX(-50%);font-size:13px;color:var(--muted);letter-spacing:.4px;white-space:nowrap;}
@media (max-width:820px){.kcp__galcard{flex:0 0 calc((100% - 12px)/2);}.kcp__lb{padding:60px 12px;}.kcp__lbnav{width:40px;height:40px;}}
@media (max-width:480px){.kcp__galcard{flex:0 0 82%;}.kcp__galnav{display:none;}.kcp__galhead{margin-bottom:10px;}}
.kcp__cta{max-width:900px;margin:20px auto 0;padding:80px 6vw 96px;text-align:center;}
.kcp__cta h2{font-family:'Unbounded';font-weight:700;font-size:clamp(26px,3.4vw,42px);letter-spacing:-.02em;margin-bottom:16px;}
.kcp__cta p{color:var(--muted);font-size:18px;margin-bottom:30px;}
.kcp__cta-btn{display:inline-block;background:var(--accent);color:#fff;text-decoration:none;font-family:'Manrope';font-weight:700;font-size:16px;padding:18px 38px;border-radius:10px;transition:.25s;}
.kcp__cta-btn:hover{transform:translateY(-2px);box-shadow:0 14px 34px var(--glow);}
@media (max-width:820px){
  .kcp__facts{grid-template-columns:1fr 1fr;}
  .kcp__grid2{grid-template-columns:1fr;gap:20px;}
  .kcp__step{grid-template-columns:1fr;gap:14px;padding:24px 22px;}
  .kcp__step-num{font-size:28px;}
  .kcp__result-grid{grid-template-columns:1fr;}
  .kcp__ph--grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:480px){
  .kcp__hero{padding:48px 20px 0;}
  .kcp__sec{padding:48px 20px;}
  .kcp__facts{grid-template-columns:1fr;}
  .kcp__callout{padding:28px 24px;}
}
/* заполненные слоты (картинка/видео из конфига) */
.kcp [data-img].kcp--filled,.kcp [data-video].kcp--filled{background:none;border:none;}
.kcp [data-img] img,.kcp [data-video] img{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit;}
.kcp [data-fit="contain"] img{object-fit:contain;background:#0f0f11;padding:6%;}
.kcp [data-video].kcp--filled iframe{width:100%;height:100%;border:none;display:block;}
.kcp__ph.kcp--filled{padding:0;}
/* Визитки в шаге 06 - две карточки рядом, лайтбокс общий с галереей */
.kcp__cards{margin-top:18px}
.kcp__cardsrow{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.kcp__card{display:block;width:100%;padding:0;border:0;margin:0;background:#0f0f11;border-radius:14px;overflow:hidden;aspect-ratio:1680/952;cursor:zoom-in}
.kcp__card img{width:100%;height:100%;object-fit:cover;display:block}
.kcp__card:focus-visible{outline:2px solid #6D5DFB;outline-offset:3px}
.kcp__cardsnote{color:#9A9A9A;font-size:13px;line-height:1.5;margin-top:10px}
.kcp__ph--grid.is-two{grid-template-columns:repeat(2,1fr)}
@media (max-width:680px){.kcp__cardsrow{grid-template-columns:1fr}}
/* Галерея скриншотов сайтов в шаге 07 */
.kcp__gal--site .kcp__galcard{flex:0 0 calc((100% - 12px)/2);aspect-ratio:16/9;background:#0f0f11}
.kcp__gal--site .kcp__galcard img{object-fit:contain}
.kcp__sitebtns{display:flex;flex-wrap:wrap;gap:12px;margin-top:16px}
.kcp__sitebtn{display:inline-block;background:var(--accent);color:#fff;text-decoration:none;font-family:'Manrope';font-weight:700;font-size:15px;line-height:1.2;padding:13px 24px;border-radius:10px;transition:.25s}
.kcp__sitebtn:hover{transform:translateY(-2px);box-shadow:0 12px 28px var(--glow)}
.kcp__sitebtn--ghost{background:transparent;color:var(--text);border:1px solid var(--border)}
.kcp__sitebtn--ghost:hover{border-color:var(--accent);box-shadow:none}
@media (max-width:480px){.kcp__gal--site .kcp__galcard{flex:0 0 88%}.kcp__sitebtn{flex:1 1 100%;text-align:center}}
</style>
<script>
(function(){
  var C=window.KORS_CASE||{}; var IMG=C.images||{}, VID=C.videos||{};
  document.querySelectorAll('.kcp [data-video]').forEach(function(el){
    var id=VID[el.getAttribute('data-video')];
    if(id){ el.classList.add('kcp--filled'); el.innerHTML='<iframe src="https://kinescope.io/embed/'+id+'" allow="autoplay; fullscreen; encrypted-media; picture-in-picture" allowfullscreen frameborder="0"></iframe>'; el.removeAttribute('data-img'); }
  });
  document.querySelectorAll('.kcp [data-img]').forEach(function(el){
    var url=IMG[el.getAttribute('data-img')];
    if(url){ el.classList.add('kcp--filled'); el.innerHTML='<img src="'+url+'" alt="">'; }
  });
})();
(function(){
  // Слайдер до/после
  var ba=document.getElementById('kcpBA'); if(!ba) return;
  var before=document.getElementById('kcpBABefore');
  var handle=document.getElementById('kcpBAHandle');
  var dragging=false;
  function setPos(clientX){
    var r=ba.getBoundingClientRect();
    var x=Math.max(0,Math.min(clientX-r.left,r.width));
    var pct=(x/r.width)*100;
    before.style.clipPath='inset(0 '+(100-pct)+'% 0 0)';
    handle.style.left=pct+'%';
  }
  handle.addEventListener('mousedown',function(){dragging=true;});
  window.addEventListener('mouseup',function(){dragging=false;});
  window.addEventListener('mousemove',function(e){ if(dragging) setPos(e.clientX); });
  handle.addEventListener('touchstart',function(){dragging=true;},{passive:true});
  window.addEventListener('touchend',function(){dragging=false;});
  window.addEventListener('touchmove',function(e){ if(dragging&&e.touches[0]) setPos(e.touches[0].clientX); },{passive:true});
  ba.addEventListener('click',function(e){ setPos(e.clientX); });
})();

(function(){
  var C=window.KORS_CASE||{}, SL=C.slides||[];
  var lb=document.getElementById('kcpLb'), lbi=document.getElementById('kcpLbImg'), lbc=document.getElementById('kcpLbCount');
  if(!lb||!lbi) return;
  var list=[], idx=0, lbl='';
  function render(){ lbi.src=list[idx]; lbi.alt=(lbl||'Разворот')+' '+(idx+1)+' из '+list.length; if(lbc) lbc.textContent=(idx+1)+' / '+list.length; }
  function open(arr,i,l){ list=arr; idx=i; lbl=l||''; lb.classList.add('open'); lb.setAttribute('aria-hidden','false'); document.documentElement.style.overflow='hidden'; render(); }
  function close(){ lb.classList.remove('open'); lb.setAttribute('aria-hidden','true'); document.documentElement.style.overflow=''; lbi.removeAttribute('src'); }
  function go(d){ if(list.length<2) return; idx=(idx+d+list.length)%list.length; render(); }
  window.kcpLightbox={open:open};
  function noteSlides(SETS, cur){
    var ru=SETS.filter(function(s){return s.id==='ru';})[0], en=SETS.filter(function(s){return s.id==='en';})[0];
    if(ru&&en) return (ru.items.length===en.items.length?'По '+ru.items.length+' разворотов в русской и английской версии':ru.items.length+' разворотов на русском и '+en.items.length+' на английском')+' - нажмите на разворот, чтобы рассмотреть';
    return cur.items.length+' разворотов - нажмите на разворот, чтобы рассмотреть';
  }
  function altSlide(i,n,cur){ return 'Разворот '+(i+1)+' печатной презентации «Одоевские консервы»'+(cur.id==='en'?', английская версия':''); }
  function noteSites(SETS, cur){
    return 'Вкладка RU - povidlo.su под брендом «Одоевские консервы», вкладка EN - povidlo.pro под экспортным брендом POVIDLO для рынка MENA. Нажмите на кадр, чтобы рассмотреть';
  }
  function altSite(i,n,cur){ return 'Экран '+(i+1)+' из '+n+' сайта '+(cur.id==='en'?'povidlo.pro':'povidlo.su'); }

  function makeGallery(gal, SETS, noteFn, altFn, label, fbSel){
    if(!gal || !SETS.length) return;
    if(fbSel){ var ph=gal.parentNode.querySelector(fbSel); if(ph) ph.style.display='none'; }
    var tabs=SETS.length>1 ? '<div class="kcp__galtabs" role="tablist">'+SETS.map(function(s,i){return '<button class="kcp__galtab'+(i===0?' is-on':'')+'" data-lang="'+s.id+'" role="tab" aria-selected="'+(i===0)+'">'+s.label+'</button>';}).join('')+'</div>' : '<span></span>';
    gal.innerHTML='<div class="kcp__galhead">'+tabs+'<div class="kcp__galnav"><button class="kcp__galarrow" data-gprev aria-label="Назад">&#8249;</button><button class="kcp__galarrow" data-gnext aria-label="Вперёд">&#8250;</button></div></div><div class="kcp__galtrack"></div><div class="kcp__galnote"></div>';
    var track=gal.querySelector('.kcp__galtrack'), note=gal.querySelector('.kcp__galnote');
    var gp=gal.querySelector('[data-gprev]'), gn=gal.querySelector('[data-gnext]');
    var cur=SETS[0];
    function fill(){
      var h='';
      for(var i=0;i<cur.items.length;i++){ h+='<button class="kcp__galcard" data-gi="'+i+'" aria-label="'+label+' '+(i+1)+' из '+cur.items.length+'"><img src="'+cur.items[i]+'" alt="'+altFn(i,cur.items.length,cur)+'" loading="lazy"></button>'; }
      track.innerHTML=h; track.scrollLeft=0; note.textContent=noteFn(SETS,cur); setTimeout(upd,60);
    }
    function step(){ var c=track.querySelector('.kcp__galcard'); return c?c.offsetWidth+12:320; }
    function upd(){ gp.disabled=track.scrollLeft<8; gn.disabled=track.scrollLeft+track.clientWidth>=track.scrollWidth-8; }
    gp.addEventListener('click',function(){ track.scrollLeft-=step(); });
    gn.addEventListener('click',function(){ track.scrollLeft+=step(); });
    track.addEventListener('scroll',upd); window.addEventListener('resize',upd);
    track.addEventListener('click',function(e){ var b=e.target&&e.target.closest?e.target.closest('.kcp__galcard'):null; if(!b) return; open(cur.items, parseInt(b.getAttribute('data-gi'),10)||0, label); });
    var tabEls=gal.querySelectorAll('.kcp__galtab');
    Array.prototype.forEach.call(tabEls,function(t){
      t.addEventListener('click',function(){
        var id=t.getAttribute('data-lang');
        var next=SETS.filter(function(s){return s.id===id;})[0];
        if(!next||next===cur) return;
        cur=next;
        Array.prototype.forEach.call(tabEls,function(o){ var on=o===t; o.classList.toggle('is-on',on); o.setAttribute('aria-selected',on); });
        fill();
      });
    });
    fill();
  }

  makeGallery(document.querySelector('.kcp [data-gallery]'),
    [{id:'ru',label:'RU',items:SL},{id:'en',label:'EN',items:C.slidesEn||[]}].filter(function(x){return x.items&&x.items.length;}),
    noteSlides, altSlide, 'Разворот', '[data-img="presentation"]');

  makeGallery(document.querySelector('.kcp [data-sitegal]'),
    [{id:'ru',label:'RU',items:C.siteRu||[]},{id:'en',label:'EN',items:C.siteEn||[]}].filter(function(x){return x.items&&x.items.length;}),
    noteSites, altSite, 'Скриншот', '[data-img="siteShots"]');
  var x=document.getElementById('kcpLbx'); if(x) x.addEventListener('click',close);
  var pv=document.getElementById('kcpLbPrev'); if(pv) pv.addEventListener('click',function(e){ e.stopPropagation(); go(-1); });
  var nx=document.getElementById('kcpLbNext'); if(nx) nx.addEventListener('click',function(e){ e.stopPropagation(); go(1); });
  lb.addEventListener('click',function(e){ if(e.target===lbi) return; if(e.target&&e.target.closest&&e.target.closest('.kcp__lbnav,.kcp__lbx')) return; close(); });
  document.addEventListener('keydown',function(e){ if(!lb.classList.contains('open')) return; if(e.key==='Escape'||e.keyCode===27) close(); else if(e.key==='ArrowLeft'||e.keyCode===37) go(-1); else if(e.key==='ArrowRight'||e.keyCode===39) go(1); });
  var sx=0, sy=0;
  lb.addEventListener('touchstart',function(e){ if(!e.touches[0]) return; sx=e.touches[0].clientX; sy=e.touches[0].clientY; },{passive:true});
  lb.addEventListener('touchend',function(e){ var t=e.changedTouches&&e.changedTouches[0]; if(!t) return; var dx=t.clientX-sx, dy=t.clientY-sy; if(Math.abs(dx)>45&&Math.abs(dx)>Math.abs(dy)) go(dx<0?1:-1); },{passive:true});
})();

(function(){
  // Визитки шага 06: две карточки рядом, клик открывает общий лайтбокс.
  var C=window.KORS_CASE||{};
  var CARDS=(C.cards||[]).filter(Boolean);
  var box=document.querySelector('.kcp [data-cards]');
  if(!box) return;
  if(!CARDS.length){ box.style.display='none'; return; }
  var ph=document.querySelector('.kcp [data-img="brand1"]');
  if(ph){ ph.style.display='none'; if(ph.parentNode) ph.parentNode.classList.add('is-two'); }
  var ALT=['Визитка: владелец бизнеса','Визитка: менеджер по продажам'];
  var h='';
  for(var i=0;i<CARDS.length;i++){
    h+='<button type="button" class="kcp__card" data-i="'+i+'" aria-label="Открыть визитку '+(i+1)+' из '+CARDS.length+'"><img src="'+CARDS[i]+'" alt="'+(ALT[i]||'Визитка')+'" loading="lazy"></button>';
  }
  box.innerHTML='<div class="kcp__cardsrow">'+h+'</div><div class="kcp__cardsnote">Нажмите на визитку, чтобы рассмотреть</div>';
  box.addEventListener('click',function(e){
    var b=e.target&&e.target.closest?e.target.closest('.kcp__card'):null;
    if(!b) return;
    if(window.kcpLightbox) window.kcpLightbox.open(CARDS, parseInt(b.getAttribute('data-i'),10), 'Визитка');
  });
})();
</script>

rec2709838401 (28269 симв.) - /case-vistex 168797509 - кейс целиком

<!-- ============================================================
     KORS · КЕЙС · ВИСТЕКС
     Заполнение фото/видео - только в списке KORS_CASE ниже.
     ============================================================ -->
<script>
window.KORS_CASE = {
  images: {
    cover:     'https://static.tildacdn.com/tild3664-3263-4134-a264-346265333031/vx-cover-a-zavod.jpg',   // обложка вверху 2:1, стоп-кадр из фильма о заводе
    email:     '',   // дизайн письма со встроенным видео (скрин)
    label1:    '',   // концепт этикетки/салфетки 1 (мультяшная стилистика)
    label2:    '',   // концепт этикетки/салфетки 2
    siteSoon:  ''    // макет сайта (в планах) - слот скрыт в разметке
  },
  // Концепты упаковки салфеток. Если массив пуст, шаг 03 показывает два одиночных слота label1/label2.
  labels: [
    'https://static.tildacdn.com/tild3961-3833-4932-a163-313038643335/vx-salfetki-pylesos.jpg',
    'https://static.tildacdn.com/tild3134-3133-4266-a566-636434663239/vx-salfetki-enot.jpg',
    'https://static.tildacdn.com/tild6361-3032-4439-b530-376236353062/vx-salfetki-pyatna.jpg',
    'https://static.tildacdn.com/tild3330-3533-4134-b432-373062633630/vx-salfetki-kuhnya.jpg'
  ],
  videos: {
    main:  'fv7FAnLfbLaDaNJLtSQ74H'   // главное видео о заводе (стоит наш ролик)
  }
};
</script>

<div class="kcp">
<header class="kcp__hero">
    <div class="kcp__hero-in">
      <a class="kcp__back" href="/#rec2667018101">← Все проекты</a>
      <div class="kcp__eyebrow">КЕЙС · ПРОИЗВОДСТВО · ВИДЕО</div>
      <h1 class="kcp__title">Вистекс</h1>
      <div class="kcp__tags"><span class="kcp__tag">Видео</span><span class="kcp__tag">Дизайн</span></div>
      <p class="kcp__lead">Как уложить завод с восемью направлениями в трёхминутный ролик - и превратить его в рабочий инструмент отдела продаж.</p>
      <div class="kcp__facts">
        <div class="kcp__fact"><span>Сфера</span><b>Нетканые материалы · B2B</b></div>
        <div class="kcp__fact"><span>С чего начали</span><b>Видео о заводе</b></div>
        <div class="kcp__fact"><span>Результат</span><b>Ролик работает в продажах</b></div>
        <div class="kcp__fact"><span>Дальше</span><b>Этикетки, салфетки, сайт</b></div>
      </div>
    </div>
    <div class="kcp__cover kcp__ph" data-img="cover"><div class="kcp__ph-label">📷 Обложка: производство / нетканые полотна (2:1)</div></div>
  </header>
  <section class="kcp__sec">
    <div class="kcp__grid2">
      <div><div class="kcp__kick">- О КОМПАНИИ</div><h2 class="kcp__h2">Большой завод с восемью направлениями</h2></div>
      <div class="kcp__prose">
        <p>«Вистекс» - один из крупнейших производителей нетканых полотен в европейской части России (работает с 1992 года, завод в подмосковном Кудинове). Продукция закрывает сразу восемь направлений: геотекстиль, материалы для обуви и мебели, для автопрома, напольных покрытий, протирочных салфеток, фильтров и другие.</p>
        <p>Производство мощное и разнообразное - но именно в этом сложность: <b>рассказать клиенту про все направления и масштаб</b> коротко и понятно почти невозможно, если делать это на словах.</p>
      </div>
    </div>
  </section>
  <section class="kcp__sec">
    <div class="kcp__callout">
      <div class="kcp__callout-k">ЗАДАЧА</div>
      <div class="kcp__callout-t">За несколько минут показать масштаб завода и все направления так, чтобы клиент увидел: здесь закроют его задачу - какой бы она ни была.</div>
    </div>
  </section>
  <section class="kcp__sec">
    <div class="kcp__kick">- КАК ШЛА РАБОТА</div>
    <h2 class="kcp__h2">От ролика о заводе - к письму для продаж</h2>
    <p class="kcp__sub">Начали с одного большого видео о производстве - и оно стало рабочим инструментом, который принёс заводу конкретный результат.</p>
    <ol class="kcp__timeline">
      <li class="kcp__step"><div class="kcp__step-num">01</div><div class="kcp__step-body">
        <h3>Видео о заводе: 8 направлений за 3 минуты</h3>
        <p>Сняли ключевой ролик о производстве: за три минуты показали все восемь направлений завода. Плотно, наглядно, без воды - уровень продакшена под стать масштабу компании.</p>
        <div class="kcp__ph kcp__ph--wide" data-video="main"><div class="kcp__ph-label">🎬 Видео о заводе (Kinescope)</div></div>
      </div></li>
      <li class="kcp__step"><div class="kcp__step-num">02</div><div class="kcp__step-body">
        <h3>Дизайн письма со встроенным видео</h3>
        <p>Ролик начали отправлять клиентам - и мы собрали под него готовое HTML-письмо для рассылки коммерческих предложений. Внутри: логотип завода, короткий текст от менеджера по развитию, превью ролика с кнопкой воспроизведения и пометка, что коммерческое предложение приложено отдельным файлом.</p>
        <p>Что изменилось в работе: <b>коммерческие предложения уходят вместе с роликом, и продукт больше не приходится объяснять текстом - клиент сразу видит завод, линии и готовую продукцию.</b></p>
        <div class="kcp__ph kcp__ph--wide" data-img="email"><div class="kcp__ph-label">✉️ дизайн письма со встроенным видео (скрин)</div></div>
      </div></li>
      <li class="kcp__step"><div class="kcp__step-num">03</div><div class="kcp__step-body">
        <h3>Дизайн этикеток и салфеток - концепты</h3>
        <p>Пошли дальше в брендинг потребительской продукции. Предложили заводу концепты дизайна этикеток и салфеток в фирменной мультяшной стилистике: уникальная графика, копирайтинг и описания - всё под ключ с нашей стороны.</p>
        <div class="kcp__gal kcp__gal--pack" data-labelgal></div>
        <div class="kcp__ph kcp__ph--grid">
          <div class="kcp__ph" data-img="label1"><div class="kcp__ph-label">🎨 концепт этикетки/салфетки 1</div></div>
          <div class="kcp__ph" data-img="label2"><div class="kcp__ph-label">🎨 концепт этикетки/салфетки 2</div></div>
        </div>
      </div></li>
      <li class="kcp__step kcp__step--next"><div class="kcp__step-num">→</div><div class="kcp__step-body">
        <h3>Что дальше</h3>
        <p>Следующий этап - сайт завода: единая витрина всех направлений с той же понятной подачей, что и в видео.</p>
        <!-- СЛОТ СКРЫТ 28.08.2026. Причина: макета сайта пока нет, заглушка оставляла пустое место. Ключ images.siteSoon в конфиге сохранён - чтобы вернуть слот, снимите этот комментарий.
        <div class="kcp__ph kcp__ph--wide" data-img="siteSoon"><div class="kcp__ph-label">макет сайта (появится)</div></div>
        -->
      </div></li>
    </ol>
  </section>
  <section class="kcp__sec">
    <div class="kcp__result">
      <div class="kcp__kick">- ЧТО ИЗМЕНИЛОСЬ</div>
      <h2 class="kcp__h2">Ролик и письмо, которые работают в продажах</h2>
      <div class="kcp__result-grid">
        <div class="kcp__rcard"><div class="kcp__rc-t">8 направлений за 3 минуты</div><p>Сложное многопрофильное производство укладывается в один понятный ролик.</p></div>
        <div class="kcp__rcard"><div class="kcp__rc-t">Продукт стали понимать</div><p>С письмом и видео клиенты сразу видят, что завод может закрыть их потребности.</p></div>
        <div class="kcp__rcard"><div class="kcp__rc-t">Продажи с видео в руках</div><p>Менеджеры отправляют коммерческие предложения вместе с роликом - завод показывают, а не пересказывают.</p></div>
        <div class="kcp__rcard"><div class="kcp__rc-t">Развитие бренда</div><p>Концепты этикеток и салфеток, впереди - сайт завода.</p></div>
      </div>
    </div>
  </section>
  <section class="kcp__sec">
    <div class="kcp__kick">- ЧТО ВОШЛО В РАБОТУ</div>
    <div class="kcp__chips">
      <span>Видеопродакшн</span><span>Съёмка производства</span><span>Сценарий / 8 направлений</span><span>Email-дизайн</span><span>Видео в письме</span><span>Концепты этикеток и салфеток</span><span>Копирайтинг</span><span>Сайт (в планах)</span>
    </div>
  </section>
  <!-- ===== ВИДЕО ПРОЕКТА (СКРЫТО) =====
     СЕКЦИЯ СКРЫТА 28.08.2026. Причина: тот же ролик уже стоит в шаге 01, на странице он дублировался.
     Разметка сохранена целиком. Чтобы вернуть секцию, снимите этот комментарий.
  <section class="kcp__sec">
    <div class="kcp__kick">- СМОТРЕТЬ</div>
    <h2 class="kcp__h2">Видео проекта</h2>
    <div class="kcp__video"><iframe src="https://kinescope.io/embed/fv7FAnLfbLaDaNJLtSQ74H" allow="autoplay; fullscreen; encrypted-media; picture-in-picture" allowfullscreen frameborder="0"></iframe></div>
  </section>
  -->
  <section class="kcp__sec">
    <div class="kcp__kick">- ОТЗЫВ</div>
    <h2 class="kcp__h2">Благодарственное письмо</h2>
    <p class="kcp__sub">ООО «Вистекс» - производитель нетканых полотен, завод в подмосковном Кудинове</p>
    <div class="kcp__letter"><img src="https://static.tildacdn.com/tild3665-6165-4336-a262-666463636263/pismo-visteks-1200.jpg" alt="Благодарственное письмо от ООО «Вистекс» команде KORS Production за фильм о производстве и дизайн материалов" loading="lazy"></div>
  </section>
  <section class="kcp__sec">
    <div class="kcp__kick">- ЕЩЁ</div>
    <h2 class="kcp__h2">Другие кейсы</h2>
    <div class="kcp__more">
      <a class="kcp__more-card" href="/case-odoevskie"><span>Кейс</span><b>Одоевские консервы</b><i>Съёмка производства и ребрендинг →</i></a>
      <a class="kcp__more-card" href="/case-invoicebox"><span>Кейс</span><b>Инвойсбокс</b><i>Видеоматериалы для платформы →</i></a>
    </div>
  </section>
  <section class="kcp__cta">
    <h2>Сложное производство? Покажем за минуты.</h2>
    <p>Упакуем ваш завод в видео и материалы, с которыми проще продавать.</p>
    <a class="kcp__cta-btn" href="#popup:zayavka">Обсудить проект →</a>
  </section>
</div>

<style>
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Unbounded:wght@400;600;700;800&display=swap');
.kcp{--bg:#0C0C0E;--raise:#141416;--card:#1B1B1F;--border:#2A2A2E;--soft:#242428;--text:#F5F3EF;--muted:#9A9A9A;--faint:#6a6a6e;--accent:#6D5DFB;--glow:rgba(109,93,251,.14);
  box-sizing:border-box;background:var(--bg);color:var(--text);font-family:'Manrope',Arial,sans-serif;-webkit-font-smoothing:antialiased;}
.kcp *{box-sizing:border-box;margin:0;padding:0;}
.kcp p{line-height:1.65;}
.kcp__eyebrow,.kcp__kick{font-family:'Unbounded';font-size:12px;letter-spacing:.14em;color:var(--accent);}
.kcp__h2{font-family:'Unbounded';font-weight:700;font-size:clamp(26px,3.2vw,42px);letter-spacing:-.02em;line-height:1.12;margin:14px 0 0;}
.kcp__sub{color:var(--muted);font-size:17px;line-height:1.6;max-width:640px;margin-top:14px;}
.kcp__hero{padding:70px 6vw 0;max-width:1280px;margin:0 auto;}
.kcp__hero-in{max-width:900px;}
.kcp__back{display:inline-block;color:var(--muted);text-decoration:none;font-size:14px;font-weight:600;margin-bottom:34px;transition:.2s;}
.kcp__back:hover{color:var(--accent);}
.kcp__hero .kcp__eyebrow{margin-bottom:18px;}
.kcp__title{font-family:'Unbounded';font-weight:800;font-size:clamp(40px,7vw,88px);letter-spacing:-.03em;line-height:1;margin-bottom:24px;}
.kcp__lead{font-size:clamp(18px,2vw,22px);line-height:1.55;color:#d8d6d1;max-width:760px;}
.kcp__tags{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 18px;}
.kcp__tag{font-family:'Manrope',Arial,sans-serif;font-weight:600;font-size:9px;line-height:1;text-transform:uppercase;letter-spacing:.14em;color:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.22);border-radius:4px;padding:5px 8px;white-space:nowrap;}
@media (max-width:480px){ .kcp__tag{font-size:8px;padding:5px 7px;} .kcp__tags{gap:5px;margin-bottom:14px;} }
.kcp__facts{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:14px;overflow:hidden;margin-top:44px;}
.kcp__fact{background:var(--raise);padding:20px 22px;display:flex;flex-direction:column;gap:7px;}
.kcp__fact span{font-size:12px;color:var(--faint);text-transform:uppercase;letter-spacing:.06em;}
.kcp__fact b{font-family:'Unbounded';font-weight:600;font-size:14px;line-height:1.3;}
.kcp__cover{margin:48px auto 0;max-width:1280px;aspect-ratio:16/8;border-radius:20px;}
.kcp__sec{max-width:1080px;margin:0 auto;padding:64px 6vw;}
.kcp__grid2{display:grid;grid-template-columns:0.85fr 1.15fr;gap:48px;align-items:start;}
.kcp__prose p{color:#c9c7c2;font-size:17px;margin-bottom:16px;}
.kcp__prose p:last-child{margin-bottom:0;}
.kcp__prose b{color:var(--text);font-weight:600;}
.kcp__callout{background:linear-gradient(135deg,rgba(109,93,251,.10),rgba(109,93,251,.02));border:1px solid rgba(109,93,251,.3);border-radius:18px;padding:40px 44px;}
.kcp__callout-k{font-family:'Unbounded';font-size:12px;letter-spacing:.14em;color:var(--accent);margin-bottom:14px;}
.kcp__callout-t{font-family:'Unbounded';font-weight:600;font-size:clamp(20px,2.4vw,30px);line-height:1.35;letter-spacing:-.01em;}
.kcp__timeline{list-style:none;margin-top:44px;display:flex;flex-direction:column;gap:26px;}
.kcp__step{display:grid;grid-template-columns:88px 1fr;gap:26px;background:var(--raise);border:1px solid var(--border);border-radius:18px;padding:30px 32px;transition:.25s;}
.kcp__step:hover{border-color:rgba(109,93,251,.4);}
.kcp__step-num{font-family:'Unbounded';font-weight:700;font-size:34px;color:var(--accent);line-height:1;opacity:.85;}
.kcp__step-body h3{font-family:'Unbounded';font-weight:600;font-size:22px;letter-spacing:-.01em;margin-bottom:12px;}
.kcp__step-body p{color:#c4c2bd;font-size:16px;}
.kcp__step--next{background:transparent;border-style:dashed;}
.kcp__step--next .kcp__step-num{opacity:1;}
.kcp__ph{position:relative;background:repeating-linear-gradient(45deg,#141416,#141416 12px,#17171a 12px,#17171a 24px);border:2px dashed #38383e;border-radius:14px;min-height:150px;display:flex;align-items:center;justify-content:center;text-align:center;}
.kcp__ph-label{color:#8a8a90;font-size:13px;font-weight:600;line-height:1.5;padding:16px;}
.kcp__ph-label small{color:var(--faint);font-weight:500;}
.kcp__ph--wide{margin-top:18px;aspect-ratio:16/8;min-height:0;}
.kcp__ph--grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:18px;background:none;border:none;padding:0;}
.kcp__ph--grid .kcp__ph{aspect-ratio:4/3;min-height:0;}
.kcp__cover.kcp__ph{aspect-ratio:16/8;}
.kcp__ba{position:relative;margin-top:20px;aspect-ratio:16/9;border-radius:16px;overflow:hidden;border:1px solid var(--border);user-select:none;}
.kcp__ba-after,.kcp__ba-before{position:absolute;inset:0;border-radius:0;border:none;}
.kcp__ba-before{width:100%;clip-path:inset(0 50% 0 0);}
.kcp__ba-handle{position:absolute;top:0;bottom:0;left:50%;width:2px;background:var(--accent);cursor:ew-resize;transform:translateX(-1px);}
.kcp__ba-handle span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:40px;height:40px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(0,0,0,.4);}
.kcp__ba-handle span::before{content:'⟷';color:#000;font-size:18px;font-weight:700;}
.kcp__ba-tag{position:absolute;top:14px;font-family:'Unbounded';font-size:11px;letter-spacing:.1em;background:rgba(0,0,0,.6);padding:5px 11px;border-radius:6px;}
.kcp__ba-tag--l{left:14px;}
.kcp__ba-tag--r{right:14px;}
.kcp__ba-hint{text-align:center;color:var(--faint);font-size:13px;margin-top:12px;}
.kcp__result-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:34px;}
.kcp__rcard{background:var(--raise);border:1px solid var(--border);border-radius:16px;padding:26px 28px;}
.kcp__rc-t{font-family:'Unbounded';font-weight:600;font-size:18px;color:var(--accent);margin-bottom:10px;}
.kcp__rcard p{color:#c4c2bd;font-size:15px;}
.kcp__chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;}
.kcp__chips span{font-family:'Manrope';font-weight:600;font-size:14px;color:var(--text);background:rgba(109,93,251,.08);border:1px solid rgba(109,93,251,.4);border-radius:8px;padding:10px 16px;}
.kcp__video{margin-top:24px;aspect-ratio:16/9;border-radius:18px;overflow:hidden;border:1px solid var(--border);background:#000;}
.kcp__video iframe{width:100%;height:100%;border:none;}
.kcp__cta{max-width:900px;margin:20px auto 0;padding:80px 6vw 96px;text-align:center;}
.kcp__cta h2{font-family:'Unbounded';font-weight:700;font-size:clamp(26px,3.4vw,42px);letter-spacing:-.02em;margin-bottom:16px;}
.kcp__cta p{color:var(--muted);font-size:18px;margin-bottom:30px;}
.kcp__cta-btn{display:inline-block;background:var(--accent);color:#fff;text-decoration:none;font-family:'Manrope';font-weight:700;font-size:16px;padding:18px 38px;border-radius:10px;transition:.25s;}
.kcp__cta-btn:hover{transform:translateY(-2px);box-shadow:0 14px 34px var(--glow);}
@media (max-width:820px){
  .kcp__facts{grid-template-columns:1fr 1fr;}
  .kcp__grid2{grid-template-columns:1fr;gap:20px;}
  .kcp__step{grid-template-columns:1fr;gap:14px;padding:24px 22px;}
  .kcp__step-num{font-size:28px;}
  .kcp__result-grid{grid-template-columns:1fr;}
  .kcp__ph--grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:480px){
  .kcp__hero{padding:48px 20px 0;}
  .kcp__sec{padding:48px 20px;}
  .kcp__facts{grid-template-columns:1fr;}
  .kcp__callout{padding:28px 24px;}
}
.kcp [data-img].kcp--filled,.kcp [data-video].kcp--filled{background:none;border:none;}
.kcp [data-img] img,.kcp [data-video] img{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit;}
.kcp [data-fit="contain"] img{object-fit:contain;background:#0f0f11;padding:6%;}
.kcp [data-video].kcp--filled iframe{width:100%;height:100%;border:none;display:block;}
.kcp__ph.kcp--filled{padding:0;}

.kcp__letter{margin-top:26px;max-width:440px;}
.kcp__letter img{display:block;width:100%;height:auto;border-radius:14px;border:1px solid var(--border);}
.kcp__more{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:28px;}
.kcp__more-card{display:block;background:var(--raise);border:1px solid var(--border);border-radius:16px;padding:24px 26px;text-decoration:none;transition:.2s;}
.kcp__more-card:hover{border-color:var(--accent);}
.kcp__more-card span{display:block;font-size:12px;letter-spacing:2px;color:var(--accent);text-transform:uppercase;margin-bottom:10px;}
.kcp__more-card b{display:block;font-family:Unbounded,sans-serif;font-weight:700;font-size:22px;line-height:1.2;color:var(--text);margin-bottom:8px;}
.kcp__more-card i{font-style:normal;font-size:15px;color:var(--muted);}
.kcp--filled img{cursor:zoom-in;}
.kcp__letter img{cursor:zoom-in;}
.kcp__lb{position:fixed;inset:0;z-index:99999;display:none;align-items:center;justify-content:center;padding:64px 40px;}
.kcp__lb.open{display:flex;}
.kcp__lbbd{position:absolute;inset:0;background:rgba(4,4,6,.9);backdrop-filter:blur(4px);}
.kcp__lbbox{position:relative;max-width:min(1100px,100%);display:flex;align-items:center;justify-content:center;}
.kcp__lbbox img{display:block;max-width:100%;max-height:calc(100vh - 170px);width:auto;height:auto;border-radius:10px;background:#0f0f11;}
.kcp__lbx{position:absolute;top:-48px;right:0;width:38px;height:38px;border-radius:9px;background:var(--raise);border:1px solid var(--border);color:var(--text);font:20px/1 Arial,sans-serif;cursor:pointer;padding:0;}
.kcp__lbx:hover{border-color:var(--accent);color:var(--accent);}
.kcp__lbnav{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;background:var(--raise);border:1px solid var(--border);color:var(--text);font:20px/1 Arial,sans-serif;cursor:pointer;padding:0;}
.kcp__lbnav.prev{left:-58px;}
.kcp__lbnav.next{right:-58px;}
.kcp__lbnav:hover{border-color:var(--accent);color:var(--accent);}
.kcp__lbcap{position:absolute;left:0;right:0;bottom:-38px;text-align:center;color:var(--muted);font-size:14px;}
@media (max-width:640px){.kcp__lb{padding:56px 14px;}.kcp__lbnav.prev{left:2px;}.kcp__lbnav.next{right:2px;}.kcp__more{grid-template-columns:1fr;}.kcp__letter{max-width:100%;}}

.kcp__gal{margin-top:18px;}
.kcp__galhead{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:12px;}
.kcp__galtabs{display:inline-flex;gap:4px;background:var(--soft);border:1px solid var(--border);border-radius:9px;padding:4px;}
.kcp__galtab{padding:7px 18px;border:none;background:none;color:var(--muted);font-family:'Manrope',Arial,sans-serif;font-weight:600;font-size:13px;line-height:1;letter-spacing:1.2px;border-radius:6px;cursor:pointer;transition:.2s;}
.kcp__galtab:hover{color:var(--text);}
.kcp__galtab.is-on{background:var(--accent);color:#fff;}
.kcp__galnote{margin-top:14px;font-size:13px;line-height:1.5;color:var(--muted);letter-spacing:.3px;}
.kcp__galnav{display:flex;gap:8px;flex-shrink:0;}
.kcp__galarrow{width:40px;height:40px;border:1px solid var(--border);background:var(--raise);border-radius:4px;color:var(--text);font:20px/1 Arial,sans-serif;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.2s;padding:0;}
.kcp__galarrow:hover{border-color:var(--accent);color:var(--accent);}
.kcp__galarrow:disabled{opacity:.3;cursor:default;border-color:var(--border);color:var(--text);}
.kcp__galtrack{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:4px;}
.kcp__galtrack::-webkit-scrollbar{display:none;}
.kcp__galcard{flex:0 0 calc((100% - 24px)/3);scroll-snap-align:start;display:block;padding:0;margin:0;border:1px solid var(--border);background:#0f0f11;border-radius:10px;overflow:hidden;cursor:zoom-in;aspect-ratio:3/4;transition:.2s;font:inherit;}
.kcp__galcard:hover{border-color:var(--accent);}
.kcp__galcard img{width:100%;height:100%;object-fit:contain;display:block;}
@media (max-width:820px){.kcp__galcard{flex:0 0 calc((100% - 12px)/2);}}
@media (max-width:480px){.kcp__galcard{flex:0 0 76%;}.kcp__galnav{display:none;}.kcp__galhead{margin-bottom:10px;}}
</style>
<script>
(function(){
  var C=window.KORS_CASE||{}; var IMG=C.images||{}, VID=C.videos||{};
  var ALT={cover:'Завод «Вистекс» - производство нетканых полотен, кадр из фильма KORS Production',email:'Дизайн письма со встроенным видео для рассылки коммерческих предложений завода «Вистекс»',label1:'Концепт дизайна этикетки для продукции завода «Вистекс»',label2:'Концепт дизайна протирочных салфеток для завода «Вистекс»',siteSoon:'Макет сайта завода «Вистекс»'};
  document.querySelectorAll('.kcp [data-video]').forEach(function(el){
    var id=VID[el.getAttribute('data-video')];
    if(id){ el.classList.add('kcp--filled'); el.innerHTML='<iframe src="https://kinescope.io/embed/'+id+'" allow="autoplay; fullscreen; encrypted-media; picture-in-picture" allowfullscreen frameborder="0"></iframe>'; el.removeAttribute('data-img'); }
  });
  document.querySelectorAll('.kcp [data-img]').forEach(function(el){
    var url=IMG[el.getAttribute('data-img')];
    if(url){ el.classList.add('kcp--filled'); el.innerHTML='<img src="'+url+'" alt="'+(ALT[el.getAttribute('data-img')]||'')+'" loading="lazy">'; }
  });
})();
</script>

<script>
(function(){
  var root=document.querySelector('.kcp'); if(!root) return;
  var lb=document.createElement('div'); lb.className='kcp__lb';
  lb.innerHTML='<div class="kcp__lbbd"></div><div class="kcp__lbbox"><button class="kcp__lbx" type="button" aria-label="Закрыть">×</button><button class="kcp__lbnav prev" type="button" aria-label="Предыдущий кадр">‹</button><img alt=""><button class="kcp__lbnav next" type="button" aria-label="Следующий кадр">›</button><div class="kcp__lbcap"></div></div>';
  document.body.appendChild(lb);
  var pic=lb.querySelector('.kcp__lbbox img'), cap=lb.querySelector('.kcp__lbcap');
  var prev=lb.querySelector('.prev'), next=lb.querySelector('.next');
  var list=[], idx=0;
  function norm(el){ return {src: el.currentSrc||el.src, alt: el.alt||''}; }
  function collect(){ list=[].slice.call(root.querySelectorAll('.kcp--filled img, .kcp__letter img')).map(norm); }
  function show(){ var it=list[idx]; if(!it) return; pic.src=it.src; pic.alt=it.alt||''; var multi=list.length>1; cap.textContent=multi?(idx+1)+' из '+list.length:''; prev.style.display=multi?'':'none'; next.style.display=multi?'':'none'; }
  function open(i){ idx=i; show(); lb.classList.add('open'); document.documentElement.style.overflow='hidden'; }
  function close(){ lb.classList.remove('open'); pic.src=''; document.documentElement.style.overflow=''; }
  function step(d){ if(!list.length) return; idx=(idx+d+list.length)%list.length; show(); }
  root.addEventListener('click',function(e){ var t=e.target; if(!t || t.tagName!=='IMG') return; if(!t.closest('.kcp--filled, .kcp__letter')) return; var els=[].slice.call(root.querySelectorAll('.kcp--filled img, .kcp__letter img')); var i=els.indexOf(t); if(i<0) return; e.preventDefault(); collect(); open(i); });
  window.kcpLightbox={ open:function(arr,i,lbl){ if(!arr||!arr.length) return; list=arr.map(function(u,k){ return {src:u, alt:(lbl||'Кадр')+' '+(k+1)+' из '+arr.length}; }); open(i||0); } };
  lb.querySelector('.kcp__lbbd').addEventListener('click',close);
  lb.querySelector('.kcp__lbx').addEventListener('click',close);
  prev.addEventListener('click',function(){ step(-1); });
  next.addEventListener('click',function(){ step(1); });
  document.addEventListener('keydown',function(e){ if(!lb.classList.contains('open')) return; if(e.key==='Escape') close(); else if(e.key==='ArrowLeft') step(-1); else if(e.key==='ArrowRight') step(1); });
})();
</script>

<script>
(function(){
  var C=window.KORS_CASE||{};
  var ALT=['Концепт упаковки протирочных салфеток «ПылеSOS» для завода «Вистекс»: коты-супергерои на синей этикетке','Концепт упаковки вискозных салфеток «Вистекс» 30х40 см: енот в лабораторном халате на синей этикетке','Концепт упаковки вискозных салфеток «Вистекс» 30х40 см: салфетка-супергерой против пятен на фиолетовой этикетке','Концепт упаковки вискозных салфеток «Вистекс» 30х40 см: салфетки-персонажи на кухне на синей этикетке'];
  function makeGallery(gal, SETS, noteFn, altFn, label, fbSel){
    if(!gal || !SETS.length) return;
    if(fbSel){ var ph=gal.parentNode.querySelector(fbSel); if(ph) ph.style.display='none'; }
    var tabs=SETS.length>1 ? '<div class="kcp__galtabs" role="tablist">'+SETS.map(function(s,i){return '<button class="kcp__galtab'+(i===0?' is-on':'')+'" data-lang="'+s.id+'" role="tab" aria-selected="'+(i===0)+'">'+s.label+'</button>';}).join('')+'</div>' : '<span></span>';
    gal.innerHTML='<div class="kcp__galhead">'+tabs+'<div class="kcp__galnav"><button class="kcp__galarrow" type="button" data-gprev aria-label="Назад">&#8249;</button><button class="kcp__galarrow" type="button" data-gnext aria-label="Вперёд">&#8250;</button></div></div><div class="kcp__galtrack"></div><div class="kcp__galnote"></div>';
    var track=gal.querySelector('.kcp__galtrack'), note=gal.querySelector('.kcp__galnote');
    var gp=gal.querySelector('[data-gprev]'), gn=gal.querySelector('[data-gnext]');
    var cur=SETS[0];
    function fill(){
      var h='';
      for(var i=0;i<cur.items.length;i++){ h+='<button class="kcp__galcard" type="button" data-gi="'+i+'" aria-label="'+label+' '+(i+1)+' из '+cur.items.length+'"><img src="'+cur.items[i]+'" alt="'+altFn(i,cur.items.length,cur)+'" loading="lazy"></button>'; }
      track.innerHTML=h; track.scrollLeft=0; note.textContent=noteFn(SETS,cur); setTimeout(upd,60);
    }
    function step(){ var c=track.querySelector('.kcp__galcard'); return c?c.offsetWidth+12:320; }
    function upd(){ gp.disabled=track.scrollLeft<8; gn.disabled=track.scrollLeft+track.clientWidth>=track.scrollWidth-8; }
    gp.addEventListener('click',function(){ track.scrollLeft-=step(); });
    gn.addEventListener('click',function(){ track.scrollLeft+=step(); });
    track.addEventListener('scroll',upd); window.addEventListener('resize',upd);
    track.addEventListener('click',function(e){ var b=e.target&&e.target.closest?e.target.closest('.kcp__galcard'):null; if(!b) return; if(window.kcpLightbox) window.kcpLightbox.open(cur.items, parseInt(b.getAttribute('data-gi'),10)||0, label); });
    fill();
  }
  makeGallery(document.querySelector('.kcp [data-labelgal]'),
    [{id:'pack',label:'Упаковка',items:C.labels||[]}].filter(function(x){return x.items&&x.items.length;}),
    function(){ return 'Концепты упаковки протирочных салфеток. Нажмите на кадр, чтобы рассмотреть'; },
    function(i){ return ALT[i]||('Концепт упаковки салфеток «Вистекс» '+(i+1)); },
    'Концепт', '.kcp__ph--grid');
})();
</script>

rec2709724901 (20132 симв.) - /case-invoicebox 168789009 - кейс целиком

<!-- ============================================================
     KORS · КЕЙС · INVOICEBOX
     Заполнение фото/видео — только в списке KORS_CASE ниже.
     Картинки: ссылка в кавычки ('' = заглушка). Видео: ID Kinescope.
     ============================================================ -->
<script>
window.KORS_CASE = {
  images: {
    cover:      'https://static.tildacdn.com/tild6235-3838-4235-b430-646665666232/ib-cover-a-city.jpg',   // обложка вверху - кадр из второго ролика, Москва-Сити
    aboutShot:  '',   // «О компании» - скрин сервиса/интерфейса
    info1:      '',   // ролик «как выставить счёт» - кадр (если без видео)
    info2:      '',   // ролик «для интернет-магазинов» - кадр
    mkt:        '',   // маркетинг - скрин рекламы/статистики
    grtCover:   '',   // GRT - обложка (арт/люкс)
    grt1:       '',   // GRT - пример
    siteSoon:   ''    // планы - макет лендингов
  },
  videos: {
    main:  '2FXfjS6hYEvLkWNKUveoBx',  // шаг 01 - первое видео о сервисе, полная версия
    v2:    '0GfobL6RnAzhPeiopXjNHS',  // шаг 02 - второе видео, «Инвойсбокс 2»
    info1: 'b66cpVCFFFVycfDvLFXFR3',  // шаг 03 - короткий ролик «выставить счёт»
    info2: '7akHJzKdcoSrPiHtRbRBqk'   // шаг 03 - короткий ролик «для интернет-магазинов»
  }
};
</script>

<div class="kcp">
<header class="kcp__hero">
    <div class="kcp__hero-in">
      <a class="kcp__back" href="/#rec2667018101">← Все проекты</a>
      <div class="kcp__eyebrow">КЕЙС · ФИНТЕХ · ВИДЕО + МАРКЕТИНГ</div>
      <h1 class="kcp__title">Инвойсбокс</h1>
      <p class="kcp__lead">Как объяснить сложный финтех простым языком - и почему клиент возвращался за видео, инфографикой и маркетингом, а затем доверил нам и свой второй бизнес.</p>
      <div class="kcp__facts">
        <div class="kcp__fact"><span>Сфера</span><b>Финтех · приём платежей (B2B)</b></div>
        <div class="kcp__fact"><span>С чего начали</span><b>Видео о сервисе</b></div>
        <div class="kcp__fact"><span>Где сейчас</span><b>Ведение маркетинга + 2-й бизнес</b></div>
        <div class="kcp__fact"><span>Формат</span><b>Видео · инфографика · реклама</b></div>
      </div>
    </div>
    <div class="kcp__cover kcp__ph" data-img="cover"><div class="kcp__ph-label">📷 Обложка: кадр из видео / интерфейс сервиса (16:9)</div></div>
  </header>
  <section class="kcp__sec">
    <div class="kcp__grid2">
      <div><div class="kcp__kick">- О КОМПАНИИ</div><h2 class="kcp__h2">Мощный сервис, который сложно объяснить</h2></div>
      <div class="kcp__prose">
        <p>Инвойсбокс - сервис приёма онлайн-платежей и автоматизации выставления счетов для бизнеса. Компании выставляют и отправляют счета юридическим лицам за минуту, принимают оплату на сайте и подключают решения для интернет-магазинов.</p>
        <p>Продукт сильный, но у него есть особенность: <b>финтех сложно воспринимается</b>. Чтобы клиент подключился, ему нужно за секунды понять, что это за сервис и какая от него выгода. На словах и текстом это объяснять долго.</p>
      </div>
    </div>
  </section>
  <section class="kcp__sec">
    <div class="kcp__callout">
      <div class="kcp__callout-k">ЗАДАЧА</div>
      <div class="kcp__callout-t">Объяснить сложный финтех-продукт так, чтобы целевая аудитория поняла суть и выгоду за считанные секунды - и захотела подключиться.</div>
    </div>
  </section>
  <section class="kcp__sec">
    <div class="kcp__kick">- КАК ШЛА РАБОТА</div>
    <h2 class="kcp__h2">От одного ролика - к маркетингу и второму бизнесу</h2>
    <p class="kcp__sub">Всё началось с одного объясняющего видео. Дальше клиент возвращался снова и снова - за новыми форматами.</p>
    <ol class="kcp__timeline">
      <li class="kcp__step"><div class="kcp__step-num">01</div><div class="kcp__step-body">
        <h3>Видео о сервисе</h3>
        <p>Сняли первое видео: кто такие Инвойсбокс, чем полезны и как это работает - коротко и понятно. Первый инструмент, который показывает продукт вместо долгих объяснений.</p>
        <div class="kcp__ph kcp__ph--wide" data-video="main"><div class="kcp__ph-label">🎬 Видео о сервисе (Kinescope)</div></div>
      </div></li>
      <li class="kcp__step"><div class="kcp__step-num">02</div><div class="kcp__step-body">
        <h3>Второе видео - глубже и проще</h3>
        <p>Клиент вернулся за вторым роликом. Здесь мы подробнее и ещё проще разобрали продукт - версия для сайта и презентаций, чтобы объяснять сервис новым клиентам.</p>
        <div class="kcp__ph kcp__ph--wide" data-video="v2"><div class="kcp__ph-label">🎬 Второе видео (подробный разбор)</div></div>
      </div></li>
      <li class="kcp__step"><div class="kcp__step-num">03</div><div class="kcp__step-body">
        <h3>Два коротких ролика</h3>
        <p>Дальше - два коротких ролика (~30 секунд): «как выставить счёт на сервисе» и «решение для интернет-магазинов» (у клиента появился новый сервис). Простыми словами о сложном - точно под их аудиторию.</p>
        <div class="kcp__ph kcp__ph--grid">
          <div class="kcp__ph" data-video="info1" data-img="info1"><div class="kcp__ph-label">🎬 ролик «выставить счёт»</div></div>
          <div class="kcp__ph" data-video="info2" data-img="info2"><div class="kcp__ph-label">🎬 ролик «для интернет-магазинов»</div></div>
        </div>
      </div></li>
      <li class="kcp__step"><div class="kcp__step-num">04</div><div class="kcp__step-body">
        <h3>Ведение маркетинга</h3>
        <p>Перешли к системной работе: настроили и ведём рекламу Инвойсбокс. Не разовый ролик, а постоянное продвижение сервиса.</p>
        <div class="kcp__ph kcp__ph--wide" data-img="mkt"><div class="kcp__ph-label">📊 маркетинг: скрин рекламы / результатов</div></div>
      </div></li>
      <li class="kcp__step kcp__chapter"><div class="kcp__step-num">GRT</div><div class="kcp__step-body">
        <h3>Второй бизнес клиента - GRT</h3>
        <p>Лучшее подтверждение доверия: клиент передал нам и свой второй бизнес - <b>GRT</b>. Это продажа предметов роскоши и искусства - картины, редкие вещи, чеки на миллионы. Другой продукт, другая аудитория, другой уровень.</p>
        <p>Здесь мы тоже настроили рекламу и ведём маркетинг - работа продолжается.</p>
        <div class="kcp__ph kcp__ph--wide" data-img="grtCover"><div class="kcp__ph-label">🖼 GRT: обложка / примеры (арт, люкс)</div></div>
      </div></li>
      <li class="kcp__step kcp__step--next"><div class="kcp__step-num">→</div><div class="kcp__step-body">
        <h3>Что дальше</h3>
        <p>Следующий этап - лендинги под каждый продукт: отдельная страница на каждый сервис, где сложный финтех объясняется максимально просто. Задача - чтобы любой человек понял, что это за сервис и как им удобно пользоваться.</p>
      </div></li>
    </ol>
  </section>
  <section class="kcp__sec">
    <div class="kcp__result">
      <div class="kcp__kick">- ЧТО ИЗМЕНИЛОСЬ</div>
      <h2 class="kcp__h2">Сложное стало понятным - и продающим</h2>
      <div class="kcp__result-grid">
        <div class="kcp__rcard"><div class="kcp__rc-t">Просто о сложном</div><p>Финтех-продукт объяснён так, что аудитория понимает суть и выгоду за секунды.</p></div>
        <div class="kcp__rcard"><div class="kcp__rc-t">Клиент возвращается</div><p>От одного видео - к серии роликов, инфографике и постоянному маркетингу.</p></div>
        <div class="kcp__rcard"><div class="kcp__rc-t">Доверие = 2-й бизнес</div><p>Клиент передал нам и второй бизнес (GRT) - премиальный сегмент.</p></div>
        <div class="kcp__rcard"><div class="kcp__rc-t">Постоянная работа</div><p>Не разовая задача, а ведение маркетинга по двум бизнесам.</p></div>
      </div>
    </div>
  </section>
  <section class="kcp__sec">
    <div class="kcp__kick">- ЧТО ВОШЛО В РАБОТУ</div>
    <div class="kcp__chips">
      <span>Видеопродакшн</span><span>Объясняющие ролики</span><span>Моушн / инфографика</span><span>Короткие ролики 30 сек</span><span>Маркетинг и реклама</span><span>Ведение проекта</span><span>Реклама GRT (люкс/арт)</span><span>Лендинги (в планах)</span>
    </div>
  </section>
  <!-- ===== ВИДЕО ПРОЕКТА (СКРЫТО) ===== -->
  <!-- СЕКЦИЯ СКРЫТА 28.08.2026. Причина: ролик xgBCJrU3Fy9CtKDXR9R23S дублировал шаг 01, а на странице и так четыре ролика.
       Разметка сохранена. Чтобы вернуть секцию, снимите этот комментарий.
  <section class="kcp__sec">
    <div class="kcp__kick">- СМОТРЕТЬ</div>
    <h2 class="kcp__h2">Видео проекта</h2>
    <div class="kcp__video"><iframe src="https://kinescope.io/embed/xgBCJrU3Fy9CtKDXR9R23S" allow="autoplay; fullscreen; encrypted-media; picture-in-picture" allowfullscreen frameborder="0"></iframe></div>
  </section>
  -->
  <!-- ===== ОТЗЫВ КЛИЕНТА ===== -->
  <section class="kcp__sec">
    <div class="kcp__kick">- ОТЗЫВ</div>
    <h2 class="kcp__h2">Благодарственное письмо</h2>
    <p class="kcp__sub">ООО «Объединённый расчётный центр» - юридическое лицо группы «Инвойсбокс»</p>
    <div class="kcp__letter"><img src="https://static.tildacdn.com/tild3461-6534-4530-b265-323334643764/pismo-invoicebox-120.jpg" alt="Благодарственное письмо от ООО «Объединённый расчётный центр» (Инвойсбокс) команде KORS Production за видеоролики и ведение маркетинга" loading="lazy"></div>
  </section>
  <!-- ===== ДРУГИЕ КЕЙСЫ ===== -->
  <section class="kcp__sec">
    <div class="kcp__kick">- ЕЩЁ</div>
    <h2 class="kcp__h2">Другие кейсы</h2>
    <div class="kcp__more">
      <a class="kcp__more-card" href="/case-odoevskie"><span>Кейс</span><b>Одоевские консервы</b><i>Видео, фирменный стиль и два сайта →</i></a>
      <a class="kcp__more-card" href="/case-vistex"><span>Кейс</span><b>Вистекс</b><i>Съёмка видео о предприятии →</i></a>
    </div>
  </section>
  <section class="kcp__cta">
    <h2>Сложный продукт? Объясним просто.</h2>
    <p>Поможем показать ваш сервис так, чтобы клиент понял его за секунды.</p>
    <a class="kcp__cta-btn" href="#popup:zayavka">Обсудить проект →</a>
  </section>
</div>

<style>
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Unbounded:wght@400;600;700;800&display=swap');
.kcp{--bg:#0C0C0E;--raise:#141416;--card:#1B1B1F;--border:#2A2A2E;--soft:#242428;--text:#F5F3EF;--muted:#9A9A9A;--faint:#6a6a6e;--accent:#6D5DFB;--glow:rgba(109,93,251,.14);
  box-sizing:border-box;background:var(--bg);color:var(--text);font-family:'Manrope',Arial,sans-serif;-webkit-font-smoothing:antialiased;}
.kcp *{box-sizing:border-box;margin:0;padding:0;}
.kcp p{line-height:1.65;}
.kcp__eyebrow,.kcp__kick{font-family:'Unbounded';font-size:12px;letter-spacing:.14em;color:var(--accent);}
.kcp__h2{font-family:'Unbounded';font-weight:700;font-size:clamp(26px,3.2vw,42px);letter-spacing:-.02em;line-height:1.12;margin:14px 0 0;}
.kcp__sub{color:var(--muted);font-size:17px;line-height:1.6;max-width:640px;margin-top:14px;}
.kcp__hero{padding:70px 6vw 0;max-width:1280px;margin:0 auto;}
.kcp__hero-in{max-width:900px;}
.kcp__back{display:inline-block;color:var(--muted);text-decoration:none;font-size:14px;font-weight:600;margin-bottom:34px;transition:.2s;}
.kcp__back:hover{color:var(--accent);}
.kcp__hero .kcp__eyebrow{margin-bottom:18px;}
.kcp__title{font-family:'Unbounded';font-weight:800;font-size:clamp(40px,7vw,88px);letter-spacing:-.03em;line-height:1;margin-bottom:24px;}
.kcp__lead{font-size:clamp(18px,2vw,22px);line-height:1.55;color:#d8d6d1;max-width:760px;}
.kcp__facts{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:14px;overflow:hidden;margin-top:44px;}
.kcp__fact{background:var(--raise);padding:20px 22px;display:flex;flex-direction:column;gap:7px;}
.kcp__fact span{font-size:12px;color:var(--faint);text-transform:uppercase;letter-spacing:.06em;}
.kcp__fact b{font-family:'Unbounded';font-weight:600;font-size:14px;line-height:1.3;}
.kcp__cover{margin:48px auto 0;max-width:1280px;aspect-ratio:16/8;border-radius:20px;}
.kcp__sec{max-width:1080px;margin:0 auto;padding:64px 6vw;}
.kcp__grid2{display:grid;grid-template-columns:0.85fr 1.15fr;gap:48px;align-items:start;}
.kcp__prose p{color:#c9c7c2;font-size:17px;margin-bottom:16px;}
.kcp__prose p:last-child{margin-bottom:0;}
.kcp__prose b{color:var(--text);font-weight:600;}
.kcp__callout{background:linear-gradient(135deg,rgba(109,93,251,.10),rgba(109,93,251,.02));border:1px solid rgba(109,93,251,.3);border-radius:18px;padding:40px 44px;}
.kcp__callout-k{font-family:'Unbounded';font-size:12px;letter-spacing:.14em;color:var(--accent);margin-bottom:14px;}
.kcp__callout-t{font-family:'Unbounded';font-weight:600;font-size:clamp(20px,2.4vw,30px);line-height:1.35;letter-spacing:-.01em;}
.kcp__timeline{list-style:none;margin-top:44px;display:flex;flex-direction:column;gap:26px;}
.kcp__step{display:grid;grid-template-columns:88px 1fr;gap:26px;background:var(--raise);border:1px solid var(--border);border-radius:18px;padding:30px 32px;transition:.25s;}
.kcp__step:hover{border-color:rgba(109,93,251,.4);}
.kcp__step-num{font-family:'Unbounded';font-weight:700;font-size:34px;color:var(--accent);line-height:1;opacity:.85;}
.kcp__step-body h3{font-family:'Unbounded';font-weight:600;font-size:22px;letter-spacing:-.01em;margin-bottom:12px;}
.kcp__step-body p{color:#c4c2bd;font-size:16px;}
.kcp__step--next{background:transparent;border-style:dashed;}
.kcp__step--next .kcp__step-num{opacity:1;}
.kcp__ph{position:relative;background:repeating-linear-gradient(45deg,#141416,#141416 12px,#17171a 12px,#17171a 24px);border:2px dashed #38383e;border-radius:14px;min-height:150px;display:flex;align-items:center;justify-content:center;text-align:center;}
.kcp__ph-label{color:#8a8a90;font-size:13px;font-weight:600;line-height:1.5;padding:16px;}
.kcp__ph-label small{color:var(--faint);font-weight:500;}
.kcp__ph--wide{margin-top:18px;aspect-ratio:16/8;min-height:0;}
.kcp__ph--grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:18px;background:none;border:none;padding:0;}
.kcp__ph--grid .kcp__ph{aspect-ratio:4/3;min-height:0;}
.kcp__cover.kcp__ph{aspect-ratio:16/8;}
.kcp__ba{position:relative;margin-top:20px;aspect-ratio:16/9;border-radius:16px;overflow:hidden;border:1px solid var(--border);user-select:none;}
.kcp__ba-after,.kcp__ba-before{position:absolute;inset:0;border-radius:0;border:none;}
.kcp__ba-before{width:100%;clip-path:inset(0 50% 0 0);}
.kcp__ba-handle{position:absolute;top:0;bottom:0;left:50%;width:2px;background:var(--accent);cursor:ew-resize;transform:translateX(-1px);}
.kcp__ba-handle span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:40px;height:40px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(0,0,0,.4);}
.kcp__ba-handle span::before{content:'⟷';color:#000;font-size:18px;font-weight:700;}
.kcp__ba-tag{position:absolute;top:14px;font-family:'Unbounded';font-size:11px;letter-spacing:.1em;background:rgba(0,0,0,.6);padding:5px 11px;border-radius:6px;}
.kcp__ba-tag--l{left:14px;}
.kcp__ba-tag--r{right:14px;}
.kcp__ba-hint{text-align:center;color:var(--faint);font-size:13px;margin-top:12px;}
.kcp__result-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:34px;}
.kcp__rcard{background:var(--raise);border:1px solid var(--border);border-radius:16px;padding:26px 28px;}
.kcp__rc-t{font-family:'Unbounded';font-weight:600;font-size:18px;color:var(--accent);margin-bottom:10px;}
.kcp__rcard p{color:#c4c2bd;font-size:15px;}
.kcp__chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;}
.kcp__chips span{font-family:'Manrope';font-weight:600;font-size:14px;color:var(--text);background:rgba(109,93,251,.08);border:1px solid rgba(109,93,251,.4);border-radius:8px;padding:10px 16px;}
.kcp__video{margin-top:24px;aspect-ratio:16/9;border-radius:18px;overflow:hidden;border:1px solid var(--border);background:#000;}
.kcp__video iframe{width:100%;height:100%;border:none;}
.kcp__cta{max-width:900px;margin:20px auto 0;padding:80px 6vw 96px;text-align:center;}
.kcp__cta h2{font-family:'Unbounded';font-weight:700;font-size:clamp(26px,3.4vw,42px);letter-spacing:-.02em;margin-bottom:16px;}
.kcp__cta p{color:var(--muted);font-size:18px;margin-bottom:30px;}
.kcp__cta-btn{display:inline-block;background:var(--accent);color:#fff;text-decoration:none;font-family:'Manrope';font-weight:700;font-size:16px;padding:18px 38px;border-radius:10px;transition:.25s;}
.kcp__cta-btn:hover{transform:translateY(-2px);box-shadow:0 14px 34px var(--glow);}
@media (max-width:820px){
  .kcp__facts{grid-template-columns:1fr 1fr;}
  .kcp__grid2{grid-template-columns:1fr;gap:20px;}
  .kcp__step{grid-template-columns:1fr;gap:14px;padding:24px 22px;}
  .kcp__step-num{font-size:28px;}
  .kcp__result-grid{grid-template-columns:1fr;}
  .kcp__ph--grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:480px){
  .kcp__hero{padding:48px 20px 0;}
  .kcp__sec{padding:48px 20px;}
  .kcp__facts{grid-template-columns:1fr;}
  .kcp__callout{padding:28px 24px;}
}
.kcp [data-img].kcp--filled,.kcp [data-video].kcp--filled{background:none;border:none;}
.kcp [data-img] img,.kcp [data-video] img{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit;}
.kcp [data-fit="contain"] img{object-fit:contain;background:#0f0f11;padding:6%;}
.kcp [data-video].kcp--filled iframe{width:100%;height:100%;border:none;display:block;}
.kcp__ph.kcp--filled{padding:0;}
.kcp__chapter{background:linear-gradient(135deg,rgba(109,93,251,.10),rgba(109,93,251,.02))!important;border-color:rgba(109,93,251,.4)!important;}
.kcp__chapter .kcp__step-num{font-size:22px;}
/* Благодарственное письмо и блок «Другие кейсы» */
.kcp__letter{margin-top:26px;max-width:440px}
.kcp__letter img{display:block;width:100%;height:auto;border-radius:14px;border:1px solid var(--border)}
.kcp__more{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:28px}
.kcp__more-card{display:block;background:var(--raise);border:1px solid var(--border);border-radius:16px;padding:24px 26px;text-decoration:none;transition:.2s}
.kcp__more-card:hover{border-color:var(--accent)}
.kcp__more-card span{display:block;font-size:12px;letter-spacing:2px;color:var(--accent);text-transform:uppercase;margin-bottom:10px}
.kcp__more-card b{display:block;font-family:'Unbounded',sans-serif;font-weight:700;font-size:22px;line-height:1.2;color:var(--text);margin-bottom:8px}
.kcp__more-card i{font-style:normal;font-size:15px;color:var(--muted)}
@media (max-width:640px){.kcp__more{grid-template-columns:1fr}}
</style>
<script>
(function(){
  var C=window.KORS_CASE||{}; var IMG=C.images||{}, VID=C.videos||{};
  document.querySelectorAll('.kcp [data-video]').forEach(function(el){
    var id=VID[el.getAttribute('data-video')];
    if(id){ el.classList.add('kcp--filled'); el.innerHTML='<iframe src="https://kinescope.io/embed/'+id+'" allow="autoplay; fullscreen; encrypted-media; picture-in-picture" allowfullscreen frameborder="0"></iframe>'; el.removeAttribute('data-img'); }
  });
  document.querySelectorAll('.kcp [data-img]').forEach(function(el){
    var url=IMG[el.getAttribute('data-img')];
    if(url){ el.classList.add('kcp--filled'); el.innerHTML='<img src="'+url+'" alt="">'; }
  });
})();
(function(){
  var ba=document.getElementById('kcpBA'); if(!ba) return;
  var before=document.getElementById('kcpBABefore');
  var handle=document.getElementById('kcpBAHandle');
  var dragging=false;
  function setPos(clientX){
    var r=ba.getBoundingClientRect();
    var x=Math.max(0,Math.min(clientX-r.left,r.width));
    var pct=(x/r.width)*100;
    before.style.clipPath='inset(0 '+(100-pct)+'% 0 0)';
    handle.style.left=pct+'%';
  }
  handle.addEventListener('mousedown',function(){dragging=true;});
  window.addEventListener('mouseup',function(){dragging=false;});
  window.addEventListener('mousemove',function(e){ if(dragging) setPos(e.clientX); });
  handle.addEventListener('touchstart',function(){dragging=true;},{passive:true});
  window.addEventListener('touchend',function(){dragging=false;});
  window.addEventListener('touchmove',function(e){ if(dragging&&e.touches[0]) setPos(e.touches[0].clientX); },{passive:true});
  ba.addEventListener('click',function(e){ setPos(e.clientX); });
})();
</script>

BACKUP 2026-08-30 №2 - до AI-иллюстраций, галереи Одоевских и правок текста

rec3238523101 (4631 симв.) - /sites 201483509 - блок «Процесс»

<style>
/* ---------- Процесс ---------- */
.step{background:var(--card);border-radius:var(--r-md);padding:36px;margin-top:18px;display:grid;grid-template-columns:96px 1fr .9fr;gap:32px;align-items:start;box-shadow:0 0 0 1px var(--line)}
.step-num{font-weight:700;font-size:54px;line-height:1;color:var(--accent-txt);letter-spacing:-.04em}
.step h3{font-size:clamp(20px,2vw,26px);margin-bottom:12px}
.step p{color:var(--muted);font-size:15.5px}
.step .step-res{margin-top:16px;font-size:14.5px;color:var(--ink)}
.step .step-res b{color:var(--accent-txt);font-weight:700}
.step > div:last-child:not(.step-media){grid-column:2 / -1}
/* Слоты step-media скрыты 28.08.2026: скриншотов процесса пока нет, блок остаётся текстовым.
   Чтобы вернуть - вставьте <div class="step-media ph">…</div> обратно в нужный шаг. */
.vs{display:grid;grid-template-columns:1fr 1fr;gap:12px;min-height:190px}
.vs-col{border-radius:20px;padding:22px;background:#0c0c0e}
.vs-col.win{background:rgba(109,93,251,.14);border:1px solid rgba(109,93,251,.4);color:#fff}
.vs-col h4{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin-bottom:12px;color:var(--muted)}
.vs-col.win h4{color:#a99cff}
.vs-col li{list-style:none;font-size:13.5px;color:var(--muted);padding:5px 0;line-height:1.45}
.vs-col.win li{color:#e8e9ea}
</style>
<section id="process" style="padding-top:0">
  <div class="container">
    <div class="eyebrow reveal">Процесс</div>
    <h2 class="reveal">6 шагов от знакомства до потока заявок</h2>
    <p class="sub reveal">Ваше участие за весь проект — 2–4 часа: ответить на вопросы и принять этапы. Остальное делаем сами.</p>
    <div style="margin-top:44px">
      <div class="step reveal">
        <div class="step-num">01</div>
        <div>
          <h3>Погружение в бизнес</h3>
          <p>Начинаем не с «какие цвета нравятся», а с глубинного интервью на 2 часа: продукт, сделки, клиенты, цифры, сильные и слабые места.</p>
          <p class="step-res"><b>Итог:</b> понимаем, за что вам платят клиенты — и что покажем на сайте.</p>
        </div>
        <div class="step-media vs">
          <div class="vs-col">
            <h4>Обычный бриф</h4>
            <ul><li>— Какие цвета нравятся?</li><li>— Пришлёте примеры сайтов?</li><li>— Текст и ТЗ есть?</li></ul>
          </div>
          <div class="vs-col win">
            <h4>Интервью KORS</h4>
            <ul><li>— 100+ вопросов о бизнесе</li><li>— Разбор реальных сделок</li><li>— Упор на маркетинг</li></ul>
          </div>
        </div>
      </div>
      <div class="step reveal">
        <div class="step-num">02</div>
        <div>
          <h3>Анализ аудитории и конкурентов</h3>
          <p>Разбираем 8–10 конкурентов по ключевым критериям. Сегментируем аудиторию, выписываем страхи, желания и возражения по отзывам, форумам и картам.</p>
          <p class="step-res"><b>Итог:</b> документ со смыслами, на котором строится весь сайт.</p>
        </div>
      </div>
      <div class="step reveal">
        <div class="step-num">03</div>
        <div>
          <h3>Структура и текст</h3>
          <p>Собираем прототип по блокам и пишем продающий текст: офер, заголовки, призывы, лид-магниты. Записываем видеопояснение логики каждого блока.</p>
          <p class="step-res"><b>Итог:</b> прототип, готовый к передаче в дизайн.</p>
        </div>
      </div>
      <div class="step reveal">
        <div class="step-num">04</div>
        <div>
          <h3>Дизайн</h3>
          <p>Готовим 2 варианта концепции на выбор: референсы, визуальный вектор, презентация решений — объясняем, что и почему работает на заявки, а не просто «красиво».</p>
          <p class="step-res"><b>Итог:</b> макет, который не стыдно показать партнёрам и инвесторам.</p>
        </div>
      </div>
      <div class="step reveal">
        <div class="step-num">05</div>
        <div>
          <h3>Сборка и запуск</h3>
          <p>Верстаем, адаптируем под мобильные, подключаем домен, формы, CRM и уведомления. Настраиваем Яндекс Метрику, Вебмастер и базовое SEO.</p>
          <p class="step-res"><b>Итог:</b> живой сайт, который принимает заявки без вашего участия.</p>
        </div>
      </div>
      <div class="step reveal">
        <div class="step-num">06</div>
        <div>
          <h3>Трафик</h3>
          <p>Запускаем Яндекс Директ на собранные смыслы: объявления пишутся из той же карты, что и сайт. Ведём кампании и докручиваем по цифрам, а не по ощущениям.</p>
          <p class="step-res"><b>Итог:</b> управляемый поток целевых заявок — прогнозируемый и масштабируемый.</p>
        </div>
      </div>
    </div>
  </div>
</section>

rec2699474201 (44305 симв.) - /case-odoevskie 168173409 - кейс целиком

<!-- ================================================================
     KORS · СТРАНИЦА-КЕЙС · ОДОЕВСКИЕ КОНСЕРВЫ
     ── ЗАПОЛНЕНИЕ ──────────────────────────────────────────────────
     Всё фото/видео вставляется В ОДНОМ МЕСТЕ - в списке ниже (KORS_CASE).
     • Картинки: вставь ссылку на изображение в кавычки. Пусто '' = заглушка.
       Где взять ссылку: загрузи фото в Tilda (Файл-менеджер сайта или любой
       блок «Изображение») и скопируй URL картинки; либо любой прямой URL.
     • Видео: впиши ID ролика Kinescope (часть после kinescope.io/… ). Пусто = заглушка.
     Больше нигде в коде править не нужно - слоты подтянутся сами.
     ================================================================ -->
<script>
window.KORS_CASE = {
  images: {
    cover:        'https://static.tildacdn.com/tild3563-6163-4139-a463-386164356466/odoev-cover-film-128.jpg',   // большая обложка вверху (гориз. фото/визуал)
    firstShoot:   '',   // шаг 01 - кадр первой съёмки начинки (если без видео)
    firstShoot2:  '',   // шаг 01 - кадр второй съёмки начинки (если без видео)
presentation: '',   // шаг 02 - одиночная картинка-запасной вариант (используется, только если slides пуст)
    factoryPhoto: '',   // шаг 03 - фото производства (если без видео)
    product1:     'https://static.tildacdn.com/tild3538-6336-4331-b630-393965653763/odoevskie-nachinki-1.jpg',   // шаг 04 - фото продукции 1
    product2:     'https://static.tildacdn.com/tild6462-3535-4432-b266-653436663333/odoevskie-kruasan-12.jpg',   // шаг 04 - фото продукции 2
    product3:     'https://static.tildacdn.com/tild6462-3131-4336-a237-366662616565/odoevskie-laboratori.jpg',   // шаг 04 - фото цеха/процесса
    logoBefore:   'https://static.tildacdn.com/tild6462-3439-4365-a261-333634373338/odoevskie-logo-do-12.jpg',   // шаг 05 - СТАРЫЙ логотип (до)
    logoAfter:    'https://static.tildacdn.com/tild6338-3131-4439-b966-623739303361/odoevskie-logo-posle.jpg',   // шаг 05 - НОВЫЙ логотип (после)
    brand1:       '',   // шаг 06 - визитки
    brand2:       'https://static.tildacdn.com/tild6162-3336-4666-a338-323336396465/odoev-otkrytka-vesna.jpg',   // шаг 06 - открытки
    brand3:       'https://static.tildacdn.com/tild6632-3465-4634-b861-393137323563/odoevskie-priglasite.jpg',   // шаг 06 - др. носители
    siteShots:    ''    // шаг 07 - скриншоты povidlo.su и povidlo.pro
  },
  // Скриншоты сайтов для шага 07. Вкладка RU - povidlo.su, вкладка EN - povidlo.pro.
  siteRu: [
    'https://static.tildacdn.com/tild3463-3561-4837-b438-333439316132/povidlo-su-01-hero.jpg',
    'https://static.tildacdn.com/tild6439-3335-4533-a436-656336633534/povidlo-su-02-kontro.jpg',
    'https://static.tildacdn.com/tild6336-3035-4463-b463-653463326363/povidlo-su-03-katalo.jpg',
    'https://static.tildacdn.com/tild6538-3937-4435-b339-336162656636/povidlo-su-04-menedz.jpg'
  ],
  siteEn: [
    'https://static.tildacdn.com/tild3561-3836-4335-b431-323263383230/povidlo-pro-01-hero.jpg',
    'https://static.tildacdn.com/tild6163-3731-4132-b166-613736353464/povidlo-pro-02-about.jpg',
    'https://static.tildacdn.com/tild3335-3935-4237-b938-386233613336/povidlo-pro-03-leadf.jpg'
  ],
  // Визитки для шага 06. Две карточки, открываются в том же лайтбоксе, что и развороты.
  // Пусто - используется одиночный слот images.brand1.
  cards: [
    'https://static.tildacdn.com/tild3261-6362-4033-a662-393031353131/odoev-vizitka-ivanov.jpg',
    'https://static.tildacdn.com/tild6232-3936-4463-a637-333436386635/odoev-vizitka-veklic.jpg'
  ],
  // Развороты печатной презентации для шага 02. Два комплекта, переключаются вкладками RU/EN.
  // Порядок = порядок в галерее. Пусто в slides - в слоте останется заглушка,
  // пусто в slidesEn - вкладка EN не показывается.
  slides: [
    'https://static.tildacdn.com/tild3839-6265-4534-b632-383934363939/odoev-pres-01.jpg',
    'https://static.tildacdn.com/tild6365-3736-4633-b638-623535336533/odoev-pres-02.jpg',
    'https://static.tildacdn.com/tild3861-3537-4062-b638-623737303666/odoev-pres-03.jpg',
    'https://static.tildacdn.com/tild3739-3733-4737-a439-373962306636/odoev-pres-04.jpg',
    'https://static.tildacdn.com/tild6131-3763-4633-a632-383430346635/odoev-pres-05.jpg',
    'https://static.tildacdn.com/tild6238-3563-4662-b936-343165656562/odoev-pres-06.jpg',
    'https://static.tildacdn.com/tild6330-3263-4431-b136-306366623031/odoev-pres-07.jpg',
    'https://static.tildacdn.com/tild3263-6531-4663-b630-316431303234/odoev-pres-08.jpg',
    'https://static.tildacdn.com/tild3032-6661-4835-b932-613834373837/odoev-pres-09.jpg',
    'https://static.tildacdn.com/tild6439-3366-4065-b763-343465383338/odoev-pres-10.jpg',
    'https://static.tildacdn.com/tild3431-3232-4331-a661-653335363963/odoev-pres-11.jpg',
    'https://static.tildacdn.com/tild3239-6231-4336-a531-363563343563/odoev-pres-12.jpg',
    'https://static.tildacdn.com/tild3231-6331-4262-b262-363063643633/odoev-pres-13.jpg',
    'https://static.tildacdn.com/tild6537-3532-4534-a166-623232326538/odoev-pres-14.jpg',
    'https://static.tildacdn.com/tild3763-3332-4665-b631-353963643534/odoev-pres-15.jpg',
    'https://static.tildacdn.com/tild3439-6161-4537-a531-633864306164/odoev-pres-16.jpg'
  ],
  slidesEn: [
    'https://static.tildacdn.com/tild6132-3033-4436-b735-343631343130/odoev-pres-en-01.jpg',
    'https://static.tildacdn.com/tild3832-3935-4631-b631-366464363039/odoev-pres-en-02.jpg',
    'https://static.tildacdn.com/tild3332-3761-4538-b430-333335363031/odoev-pres-en-03.jpg',
    'https://static.tildacdn.com/tild6566-3932-4236-b365-323064646265/odoev-pres-en-04.jpg',
    'https://static.tildacdn.com/tild3238-6164-4730-b662-366261353863/odoev-pres-en-05.jpg',
    'https://static.tildacdn.com/tild3939-3332-4437-a131-643238343734/odoev-pres-en-06.jpg',
    'https://static.tildacdn.com/tild6264-3134-4561-a333-646630626136/odoev-pres-en-07.jpg',
    'https://static.tildacdn.com/tild3463-6639-4532-b364-636338303939/odoev-pres-en-08.jpg',
    'https://static.tildacdn.com/tild6634-3632-4239-a463-363462323464/odoev-pres-en-09.jpg',
    'https://static.tildacdn.com/tild3434-3061-4432-b663-386464313137/odoev-pres-en-10.jpg',
    'https://static.tildacdn.com/tild6265-6534-4335-a130-306462656133/odoev-pres-en-11.jpg',
    'https://static.tildacdn.com/tild6332-6135-4762-a135-303166363439/odoev-pres-en-12.jpg',
    'https://static.tildacdn.com/tild3930-3535-4231-a436-326336303337/odoev-pres-en-13.jpg',
    'https://static.tildacdn.com/tild3335-3832-4730-b466-393065656433/odoev-pres-en-14.jpg',
    'https://static.tildacdn.com/tild3934-3966-4931-a466-613731333338/odoev-pres-en-15.jpg',
    'https://static.tildacdn.com/tild6465-3432-4361-b464-343863303862/odoev-pres-en-16.jpg'
  ],
  videos: {
    firstShoot:   'sRyZwPm3BS9CVspVi2sLx3',   // шаг 01 - ролик «Термостабильные начинки»
    firstShoot2:  'mZiwnH9uZAdc15hhRsqPvB',    // шаг 01 - ролик «Нетермостабильные начинки»
    factory:      '3ZsxHkdEuHUubxSAQZDRyG',    // шаг 03 - фильм о заводе, полная версия
    main:         'j8Pq4wWMNTPm6Js8UQiM1n'     // блок «Видео проекта»
  }
};
</script>
<div class="kcp">
  <!-- ===== HERO ===== -->
  <header class="kcp__hero">
    <div class="kcp__hero-in">
      <a class="kcp__back" href="/#rec2667018101">← Все проекты</a>
      <div class="kcp__eyebrow">КЕЙС · ПИЩЕВОЕ ПРОИЗВОДСТВО</div>
      <h1 class="kcp__title">Одоевские консервы</h1>
      <div class="kcp__tags"><span class="kcp__tag">Видео</span><span class="kcp__tag">Фотосъёмка</span><span class="kcp__tag">Презентация</span><span class="kcp__tag">Фирменный стиль</span><span class="kcp__tag">Сайт</span></div>
      <p class="kcp__lead">Завод с 200+ рецептур, десятью направлениями продукции и поставками в четыре страны рассказывал о себе разрозненно. Собрали всё в одну систему: видео, фотосъёмка, презентация, логотип, фирменный стиль и два сайта - русский и английский.</p>
      <div class="kcp__facts">
        <div class="kcp__fact"><span>Сфера</span><b>Пищевое производство · B2B</b></div>
        <div class="kcp__fact"><span>С чего начали</span><b>Видеосъёмка продукта</b></div>
        <div class="kcp__fact"><span>Где сейчас</span><b>povidlo.su + povidlo.pro</b></div>
        <div class="kcp__fact"><span>Масштаб</span><b>200+ рецептур · 10 направлений</b></div>
      </div>
    </div>
    <!-- ВСТАВИТЬ: большое обложечное фото/видео (завод, продукция или кадр со съёмки). Пока заглушка. -->
    <div class="kcp__cover kcp__ph" data-img="cover"><div class="kcp__ph-label">📷 Обложка: фото продукции / кадр со съёмки (16:9)</div></div>
  </header>
  <!-- ===== КТО КЛИЕНТ ===== -->
  <section class="kcp__sec">
    <div class="kcp__grid2">
      <div>
        <div class="kcp__kick">- О КОМПАНИИ</div>
        <h2 class="kcp__h2">Сильное производство, которое было не видно</h2>
      </div>
      <div class="kcp__prose">
        <p>«Одоевские консервы» - производитель из посёлка Одоев в Тульской области. Уже более двадцати лет компания выпускает термостабильные фруктово-ягодные начинки, повидло, джемы, конфитюры, пюре и наполнители для хлебопекарной, кондитерской и молочной промышленности: больше 200 рецептур, десять направлений продукции, поставки в четыре страны.</p>
        <p>Это классический B2B: их продукт - ингредиент, который живёт <b>внутри</b> чужих изделий. Начинка в круассане, повидло в печенье, наполнитель в йогурте. Продукт качественный, производство серьёзное - но со стороны этого масштаба не было видно.</p>
        <p>При этом информация о заводе жила по разным местам: ассортимент - в прайсе, производственные возможности - в голове у менеджера, контроль качества и география поставок не были описаны нигде. Видео, сайт, презентация и фирменные материалы не складывались в единую картину: компанию нельзя было «показать» - только долго объяснять на словах.</p>
      </div>
    </div>
  </section>
  <!-- ===== ЗАДАЧА (акцентная плашка) ===== -->
  <section class="kcp__sec">
    <div class="kcp__callout">
      <div class="kcp__callout-k">ЗАДАЧА</div>
      <div class="kcp__callout-t">Задача была не в красивом корпоративном сайте. Нужно было собрать разрозненную информацию о заводе - ассортимент, производственные возможности, масштаб, контроль качества, географию поставок - в одну систему, по которой партнёр за несколько минут понимает, с кем имеет дело.</div>
    </div>
  </section>
  <!-- ===== ТАЙМЛАЙН РАБОТЫ ===== -->
  <section class="kcp__sec">
    <div class="kcp__kick">- КАК ШЛА РАБОТА</div>
    <h2 class="kcp__h2">Из одной съёмки - в полный цикл</h2>
    <p class="kcp__sub">Сотрудничество началось с одного ролика и постепенно выросло в полный комплект материалов. Вот путь шаг за шагом.</p>
    <ol class="kcp__timeline">
      <li class="kcp__step">
        <div class="kcp__step-num">01</div>
        <div class="kcp__step-body">
          <h3>Первые видео на начинке</h3>
          <p>Начали с двух роликов о продукте. Сняли начинку «в деле» - текстуру, цвет, как она работает в готовом изделии. Это первое, что показывает потенциальному партнёру, что перед ним - качественный ингредиент.</p>
          <!-- Два ролика первой съёмки. ID берутся из KORS_CASE.videos (firstShoot / firstShoot2). -->
          <div class="kcp__vid2">
            <div class="kcp__ph" data-video="firstShoot" data-img="firstShoot"><div class="kcp__ph-label">🎬 Термостабильные начинки</div></div>
            <div class="kcp__ph" data-video="firstShoot2" data-img="firstShoot2"><div class="kcp__ph-label">🎬 Нетермостабильные начинки</div></div>
          </div>
        </div>
      </li>
      <li class="kcp__step">
        <div class="kcp__step-num">02</div>
        <div class="kcp__step-body">
          <h3>Печатная презентация</h3>
          <p>Собрали продукт и производство в понятную структуру - презентацию для переговоров и выставок. Разложили ассортимент, преимущества и мощности так, чтобы менеджеру было легко показать компанию клиенту.</p>
          <!-- Галерея разворотов: ссылки в KORS_CASE.slides. Клик по развороту открывает его на весь экран. -->
          <div class="kcp__gal" data-gallery></div>
          <div class="kcp__ph kcp__ph--wide" data-img="presentation"><div class="kcp__ph-label">📑 Развороты печатной презентации</div></div>
        </div>
      </li>
      <li class="kcp__step">
        <div class="kcp__step-num">03</div>
        <div class="kcp__step-body">
          <h3>Видео о заводе</h3>
          <p>Сняли само производство: масштаб цехов, оборудование, процессы. Именно это видео закрывает главный вопрос B2B-клиента - «а справятся ли по объёму и качеству». Масштаб теперь виден, а не описан словами.</p>
          <div class="kcp__ph kcp__ph--wide" data-video="factory" data-img="factoryPhoto"><div class="kcp__ph-label">🎬 Видео о заводе / кадры производства</div></div>
        </div>
      </li>
      <li class="kcp__step">
        <div class="kcp__step-num">04</div>
        <div class="kcp__step-body">
          <h3>Фотосъёмка для презентации и каталога</h3>
          <p>Сделали предметную и производственную фотосъёмку - продукция, упаковка, цеха. Единый визуальный ряд, который лёг в презентацию, каталог и дальнейшие материалы.</p>
          <div class="kcp__ph kcp__ph--grid">
            <div class="kcp__ph" data-img="product1"><div class="kcp__ph-label">📷 фото продукции 1</div></div>
            <div class="kcp__ph" data-img="product2"><div class="kcp__ph-label">📷 фото продукции 2</div></div>
            <div class="kcp__ph" data-img="product3"><div class="kcp__ph-label">📷 фото цеха / процесса</div></div>
          </div>
        </div>
      </li>
      <li class="kcp__step">
        <div class="kcp__step-num">05</div>
        <div class="kcp__step-body">
          <h3>Новый логотип: до / после</h3>
          <p>Обновили логотип - сохранили узнаваемость, но привели к современному виду, который одинаково хорошо работает на упаковке, в презентации и на сайте. Сравните сами:</p>
          <!-- ДО/ПОСЛЕ слайдер. ВСТАВИТЬ 2 картинки логотипа: старый и новый -->
          <div class="kcp__ba" id="kcpBA">
            <div class="kcp__ba-after kcp__ph" data-img="logoAfter" data-fit="contain"><div class="kcp__ph-label">✅ НОВЫЙ логотип (после)</div></div>
            <div class="kcp__ba-before kcp__ph" id="kcpBABefore" data-img="logoBefore" data-fit="contain"><div class="kcp__ph-label">◻️ СТАРЫЙ логотип (до)</div></div>
            <div class="kcp__ba-handle" id="kcpBAHandle"><span></span></div>
            <div class="kcp__ba-tag kcp__ba-tag--l">ДО</div>
            <div class="kcp__ba-tag kcp__ba-tag--r">ПОСЛЕ</div>
          </div>
          <div class="kcp__ba-hint">Потяните ползунок влево-вправо, чтобы сравнить</div>
        </div>
      </li>
      <li class="kcp__step">
        <div class="kcp__step-num">06</div>
        <div class="kcp__step-body">
          <h3>Фирменный стиль: открытки, визитки, носители</h3>
          <p>Оформили фирменные носители - визитки, открытки и другие материалы в единой стилистике. Компания получила узнаваемый облик, который работает на каждой точке контакта.</p>
          <div class="kcp__cards" data-cards></div>
          <div class="kcp__ph kcp__ph--grid">
            <div class="kcp__ph" data-img="brand1"><div class="kcp__ph-label">📷 визитки</div></div>
            <div class="kcp__ph" data-img="brand2" data-fit="contain"><div class="kcp__ph-label">📷 открытки</div></div>
            <div class="kcp__ph" data-img="brand3" data-fit="contain"><div class="kcp__ph-label">📷 др. носители</div></div>
          </div>
        </div>
      </li>
      <li class="kcp__step">
        <div class="kcp__step-num">07</div>
        <div class="kcp__step-body">
          <h3>Два сайта: povidlo.su и povidlo.pro</h3>
          <p>Сделали не языковой переключатель, а два отдельных сайта. Русский - povidlo.su, под брендом «Одоевские консервы». Английский - povidlo.pro, под экспортным брендом POVIDLO: отдельная структура и своя подача, адаптированная под зарубежных партнёров.</p>
          <p>Каждый из них работает сразу в трёх ролях: корпоративный сайт, каталог продукции и презентация для отдела продаж. Внутри - десять направлений продукции, производственные возможности, контроль качества и география поставок. Менеджеру достаточно дать ссылку вместо пересказа.</p>
          <div class="kcp__gal kcp__gal--site" data-sitegal></div>
          <div class="kcp__sitebtns">
            <a class="kcp__sitebtn" href="https://povidlo.su" target="_blank" rel="noopener">Открыть povidlo.su</a>
            <a class="kcp__sitebtn kcp__sitebtn--ghost" href="https://povidlo.pro" target="_blank" rel="noopener">Открыть povidlo.pro</a>
          </div>
          <div class="kcp__ph kcp__ph--wide" data-img="siteShots"><div class="kcp__ph-label">💻 Скриншоты povidlo.su и povidlo.pro</div></div>
        </div>
      </li>
      <li class="kcp__step kcp__step--next">
        <div class="kcp__step-num">→</div>
        <div class="kcp__step-body">
          <h3>Что дальше</h3>
          <p>Следующий этап - застройка выставочного стенда (планируется на зиму). Сотрудничество продолжается: от продукта на экране - к тому, как компания выглядит вживую на выставке.</p>
        </div>
      </li>
    </ol>
  </section>
  <!-- ===== РЕЗУЛЬТАТ ===== -->
  <section class="kcp__sec">
    <div class="kcp__result">
      <div class="kcp__kick">- ЧТО ИЗМЕНИЛОСЬ</div>
      <h2 class="kcp__h2">Компанию теперь можно показать, а не пересказывать</h2>
      <div class="kcp__result-grid">
        <div class="kcp__rcard"><div class="kcp__rc-t">Единый комплект</div><p>Видео, фото, презентация, логотип, фирменный стиль и сайт - собраны в одну систему и работают вместе.</p></div>
        <div class="kcp__rcard"><div class="kcp__rc-t">Масштаб виден сразу</div><p>Ассортимент, производство и контроль качества показаны на месте - на переговорах, выставках и в презентации, без долгих объяснений.</p></div>
        <div class="kcp__rcard"><div class="kcp__rc-t">Экспортное направление</div><p>Экспорт и представительства в Грузии и ОАЭ. Англоязычный povidlo.pro - то, чем компания представляет себя в регионе MENA.</p></div>
        <div class="kcp__rcard"><div class="kcp__rc-t">Долгое партнёрство</div><p>Сотрудничество выросло из одной видеосъёмки в постоянную работу над материалами компании.</p></div>
      </div>
    </div>
  </section>
  <!-- ===== ЧТО ВОШЛО (услуги) ===== -->
  <section class="kcp__sec">
    <div class="kcp__kick">- ЧТО ВОШЛО В КОМПЛЕКТ</div>
    <div class="kcp__chips">
      <span>Видеопродакшн</span><span>Съёмка производства</span><span>Фотосъёмка</span><span>Печатная презентация</span><span>Редизайн логотипа</span><span>Фирменный стиль</span><span>Визитки и открытки</span><span>Сайт RU</span><span>Сайт EN (MENA)</span>
    </div>
  </section>
  <!-- ===== ВИДЕО КЕЙСА (СКРЫТ) ===== -->
  <!-- СЕКЦИЯ СКРЫТА 28.08.2026. Причина: на странице уже четыре ролика (два в шаге 01 и фильм о заводе в шаге 03).
       Разметка и ключ KORS_CASE.videos.main оставлены нетронутыми. Чтобы вернуть секцию, снимите этот комментарий.
       ID ролика подставляется из KORS_CASE.videos.main
  <section class="kcp__sec">
    <div class="kcp__kick">- СМОТРЕТЬ</div>
    <h2 class="kcp__h2">Видео проекта</h2>
    <div class="kcp__video" data-video="main"><div class="kcp__ph-label">🎬 Основной ролик проекта</div></div>
  </section>
  -->
  <!-- ===== ОТЗЫВ КЛИЕНТА ===== -->
  <section class="kcp__sec">
    <div class="kcp__kick">- ОТЗЫВ</div>
    <h2 class="kcp__h2">Благодарственное письмо</h2>
    <p class="kcp__sub">ООО «МастерДжем» - юридическое лицо «Одоевских консервов»</p>
    <div class="kcp__letter"><img src="https://static.tildacdn.com/tild3231-6563-4932-b139-373433306561/pismo-odoevskie-1200.jpg" alt="Благодарственное письмо от ООО «МастерДжем» (Одоевские консервы) команде KORS Production за фото- и видеосъёмку производства и материалы для сайта и презентаций" loading="lazy"></div>
  </section>
  <!-- ===== ДРУГИЕ КЕЙСЫ ===== -->
  <section class="kcp__sec">
    <div class="kcp__kick">- ЕЩЁ</div>
    <h2 class="kcp__h2">Другие кейсы</h2>
    <div class="kcp__more">
      <a class="kcp__more-card" href="/case-invoicebox"><span>Кейс</span><b>Инвойсбокс</b><i>Видеоматериалы для платформы →</i></a>
      <a class="kcp__more-card" href="/case-vistex"><span>Кейс</span><b>Вистекс</b><i>Съёмка видео о предприятии →</i></a>
    </div>
  </section>
  <!-- ===== CTA ===== -->
  <section class="kcp__cta">
    <h2>Хотите так же показать своё производство?</h2>
    <p>Начнём с одного шага - а вырастем в полный цикл, если понравится результат.</p>
    <a class="kcp__cta-btn" href="#popup:zayavka">Обсудить проект →</a>
  </section>
  <!-- Лайтбокс. Тот же, что для благодарственных писем на главной, плюс листание. -->
  <div class="kcp__lb" id="kcpLb" aria-hidden="true">
    <div class="kcp__lbbd"></div>
    <div class="kcp__lbbox">
      <button class="kcp__lbx" id="kcpLbx" aria-label="Закрыть">×</button>
      <button class="kcp__lbnav kcp__lbnav--prev" id="kcpLbPrev" aria-label="Предыдущий">&#8249;</button>
      <img id="kcpLbImg" alt="">
      <button class="kcp__lbnav kcp__lbnav--next" id="kcpLbNext" aria-label="Следующий">&#8250;</button>
      <div class="kcp__lbcount" id="kcpLbCount"></div>
    </div>
  </div>
</div>
<style>
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Unbounded:wght@400;600;700;800&display=swap');
.kcp{--bg:#0C0C0E;--raise:#141416;--card:#1B1B1F;--border:#2A2A2E;--soft:#242428;--text:#F5F3EF;--muted:#9A9A9A;--faint:#6a6a6e;--accent:#6D5DFB;--glow:rgba(109,93,251,.14);
  box-sizing:border-box;background:var(--bg);color:var(--text);font-family:'Manrope',Arial,sans-serif;-webkit-font-smoothing:antialiased;}
.kcp *{box-sizing:border-box;margin:0;padding:0;}
.kcp p{line-height:1.65;}
.kcp__eyebrow,.kcp__kick{font-family:'Unbounded';font-size:12px;letter-spacing:.14em;color:var(--accent);}
.kcp__h2{font-family:'Unbounded';font-weight:700;font-size:clamp(26px,3.2vw,42px);letter-spacing:-.02em;line-height:1.12;margin:14px 0 0;}
.kcp__sub{color:var(--muted);font-size:17px;line-height:1.6;max-width:640px;margin-top:14px;}
/* HERO */
.kcp__hero{padding:70px 6vw 0;max-width:1280px;margin:0 auto;}
.kcp__hero-in{max-width:900px;}
.kcp__back{display:inline-block;color:var(--muted);text-decoration:none;font-size:14px;font-weight:600;margin-bottom:34px;transition:.2s;}
.kcp__back:hover{color:var(--accent);}
.kcp__hero .kcp__eyebrow{margin-bottom:18px;}
.kcp__title{font-family:'Unbounded';font-weight:800;font-size:clamp(40px,7vw,88px);letter-spacing:-.03em;line-height:1;margin-bottom:24px;}
.kcp__lead{font-size:clamp(18px,2vw,22px);line-height:1.55;color:#d8d6d1;max-width:760px;}
.kcp__tags{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 18px;}
.kcp__tag{font-family:'Manrope',Arial,sans-serif;font-weight:600;font-size:9px;line-height:1;text-transform:uppercase;letter-spacing:.14em;color:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.22);border-radius:4px;padding:5px 8px;white-space:nowrap;}
@media (max-width:480px){ .kcp__tag{font-size:8px;padding:5px 7px;} .kcp__tags{gap:5px;margin-bottom:14px;} }
.kcp__facts{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:14px;overflow:hidden;margin-top:44px;}
.kcp__fact{background:var(--raise);padding:20px 22px;display:flex;flex-direction:column;gap:7px;}
.kcp__fact span{font-size:12px;color:var(--faint);text-transform:uppercase;letter-spacing:.06em;}
.kcp__fact b{font-family:'Unbounded';font-weight:600;font-size:14px;line-height:1.3;}
.kcp__cover{margin:48px auto 0;max-width:1280px;aspect-ratio:16/8;border-radius:20px;}
/* SECTIONS */
.kcp__sec{max-width:1080px;margin:0 auto;padding:64px 6vw;}
.kcp__grid2{display:grid;grid-template-columns:0.85fr 1.15fr;gap:48px;align-items:start;}
.kcp__prose p{color:#c9c7c2;font-size:17px;margin-bottom:16px;}
.kcp__prose p:last-child{margin-bottom:0;}
.kcp__prose b{color:var(--text);font-weight:600;}
/* CALLOUT */
.kcp__callout{background:linear-gradient(135deg,rgba(109,93,251,.10),rgba(109,93,251,.02));border:1px solid rgba(109,93,251,.3);border-radius:18px;padding:40px 44px;}
.kcp__callout-k{font-family:'Unbounded';font-size:12px;letter-spacing:.14em;color:var(--accent);margin-bottom:14px;}
.kcp__callout-t{font-family:'Unbounded';font-weight:600;font-size:clamp(20px,2.4vw,30px);line-height:1.35;letter-spacing:-.01em;}
/* TIMELINE */
.kcp__timeline{list-style:none;margin-top:44px;display:flex;flex-direction:column;gap:26px;}
.kcp__step{display:grid;grid-template-columns:88px 1fr;gap:26px;background:var(--raise);border:1px solid var(--border);border-radius:18px;padding:30px 32px;transition:.25s;}
.kcp__step:hover{border-color:rgba(109,93,251,.4);}
.kcp__step-num{font-family:'Unbounded';font-weight:700;font-size:34px;color:var(--accent);line-height:1;opacity:.85;}
.kcp__step-body h3{font-family:'Unbounded';font-weight:600;font-size:22px;letter-spacing:-.01em;margin-bottom:12px;}
.kcp__step-body p{color:#c4c2bd;font-size:16px;}
.kcp__step--next{background:transparent;border-style:dashed;}
.kcp__step--next .kcp__step-num{opacity:1;}
/* PLACEHOLDERS */
.kcp__ph{position:relative;background:repeating-linear-gradient(45deg,#141416,#141416 12px,#17171a 12px,#17171a 24px);border:2px dashed #38383e;border-radius:14px;min-height:150px;display:flex;align-items:center;justify-content:center;text-align:center;}
.kcp__ph-label{color:#8a8a90;font-size:13px;font-weight:600;line-height:1.5;padding:16px;}
.kcp__ph-label small{color:var(--faint);font-weight:500;}
.kcp__ph--wide{margin-top:18px;aspect-ratio:16/8;min-height:0;}
.kcp__ph--grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:18px;background:none;border:none;padding:0;}
.kcp__ph--grid .kcp__ph{aspect-ratio:4/3;min-height:0;}
.kcp__cover.kcp__ph{aspect-ratio:16/8;}
/* BEFORE/AFTER */
.kcp__ba{position:relative;margin-top:20px;aspect-ratio:16/9;border-radius:16px;overflow:hidden;border:1px solid var(--border);user-select:none;}
.kcp__ba-after,.kcp__ba-before{position:absolute;inset:0;border-radius:0;border:none;}
.kcp__ba-before{width:100%;clip-path:inset(0 50% 0 0);}
.kcp__ba-handle{position:absolute;top:0;bottom:0;left:50%;width:2px;background:var(--accent);cursor:ew-resize;transform:translateX(-1px);}
.kcp__ba-handle span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:40px;height:40px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(0,0,0,.4);}
.kcp__ba-handle span::before{content:'⟷';color:#000;font-size:18px;font-weight:700;}
.kcp__ba-tag{position:absolute;top:14px;font-family:'Unbounded';font-size:11px;letter-spacing:.1em;background:rgba(0,0,0,.6);padding:5px 11px;border-radius:6px;}
.kcp__ba-tag--l{left:14px;}
.kcp__ba-tag--r{right:14px;}
.kcp__ba-hint{text-align:center;color:var(--faint);font-size:13px;margin-top:12px;}
/* RESULT */
.kcp__result-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:34px;}
.kcp__rcard{background:var(--raise);border:1px solid var(--border);border-radius:16px;padding:26px 28px;}
.kcp__rc-t{font-family:'Unbounded';font-weight:600;font-size:18px;color:var(--accent);margin-bottom:10px;}
.kcp__rcard p{color:#c4c2bd;font-size:15px;}
/* CHIPS */
.kcp__chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;}
.kcp__chips span{font-family:'Manrope';font-weight:600;font-size:14px;color:var(--text);background:rgba(109,93,251,.08);border:1px solid rgba(109,93,251,.4);border-radius:8px;padding:10px 16px;}
/* VIDEO */
.kcp__video{margin-top:24px;aspect-ratio:16/9;border-radius:18px;overflow:hidden;border:1px solid var(--border);background:#000;}
.kcp__video iframe{width:100%;height:100%;border:none;}
/* CTA */
.kcp__vid2{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px;}
.kcp__vid2 .kcp__ph{aspect-ratio:16/9;min-height:0;margin-top:0;}
.kcp__letter{margin-top:26px;max-width:440px;}
.kcp__letter img{display:block;width:100%;height:auto;border-radius:14px;border:1px solid var(--border);}
.kcp__more{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:28px;}
.kcp__more-card{display:block;background:var(--raise);border:1px solid var(--border);border-radius:16px;padding:24px 26px;text-decoration:none;transition:.2s;}
.kcp__more-card:hover{border-color:var(--accent);}
.kcp__more-card span{display:block;font-size:12px;letter-spacing:2px;color:var(--accent);text-transform:uppercase;margin-bottom:10px;}
.kcp__more-card b{display:block;font-family:'Unbounded',sans-serif;font-weight:700;font-size:22px;line-height:1.2;color:var(--text);margin-bottom:8px;}
.kcp__more-card i{font-style:normal;font-size:15px;color:var(--muted);}
@media (max-width:640px){.kcp__vid2{grid-template-columns:1fr;}.kcp__more{grid-template-columns:1fr;}}
/* --- Галерея разворотов презентации --- */
.kcp__gal{margin-top:18px;}
.kcp__galhead{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:12px;}
.kcp__galtabs{display:inline-flex;gap:4px;background:var(--soft);border:1px solid var(--border);border-radius:9px;padding:4px;}
.kcp__galtab{padding:7px 18px;border:none;background:none;color:var(--muted);font-family:'Manrope',Arial,sans-serif;font-weight:600;font-size:13px;line-height:1;letter-spacing:1.2px;border-radius:6px;cursor:pointer;transition:.2s;}
.kcp__galtab:hover{color:var(--text);}
.kcp__galtab.is-on{background:var(--accent);color:#fff;}
.kcp__galnote{margin-top:14px;font-size:13px;line-height:1.5;color:var(--muted);letter-spacing:.3px;}
.kcp__galnav{display:flex;gap:8px;flex-shrink:0;}
.kcp__galarrow{width:40px;height:40px;border:1px solid var(--border);background:var(--raise);border-radius:4px;color:var(--text);font:20px/1 Arial,sans-serif;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.2s;padding:0;}
.kcp__galarrow:hover{border-color:var(--accent);color:var(--accent);}
.kcp__galarrow:disabled{opacity:.3;cursor:default;border-color:var(--border);color:var(--text);}
.kcp__galtrack{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:4px;}
.kcp__galtrack::-webkit-scrollbar{display:none;}
.kcp__galcard{flex:0 0 calc((100% - 24px)/3);scroll-snap-align:start;display:block;padding:0;margin:0;border:1px solid var(--border);background:var(--raise);border-radius:10px;overflow:hidden;cursor:zoom-in;aspect-ratio:1200/873;transition:.2s;font:inherit;}
.kcp__galcard:hover{border-color:var(--accent);}
.kcp__galcard img{width:100%;height:100%;object-fit:cover;display:block;}
/* --- Лайтбокс --- */
.kcp__lb{position:fixed;inset:0;z-index:99999;display:none;align-items:center;justify-content:center;padding:64px 40px;}
.kcp__lb.open{display:flex;}
.kcp__lbbd{position:absolute;inset:0;background:rgba(4,4,6,.9);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);}
.kcp__lbbox{position:relative;width:auto;max-width:min(1100px,100%);display:flex;align-items:center;justify-content:center;}
.kcp__lbbox img{display:block;max-width:100%;max-height:calc(100vh - 170px);width:auto;height:auto;border-radius:10px;background:#0f0f11;}
.kcp__lbx{position:absolute;top:-48px;right:0;width:38px;height:38px;border-radius:9px;background:var(--raise);border:1px solid var(--border);color:var(--text);font:20px/1 Arial,sans-serif;cursor:pointer;padding:0;}
.kcp__lbx:hover{border-color:var(--accent);color:var(--accent);}
.kcp__lbnav{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;background:rgba(20,20,22,.85);border:1px solid var(--border);color:var(--text);font:22px/1 Arial,sans-serif;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.2s;padding:0;}
.kcp__lbnav:hover{border-color:var(--accent);color:var(--accent);}
.kcp__lbnav--prev{left:10px;}
.kcp__lbnav--next{right:10px;}
.kcp__lbcount{position:absolute;bottom:-36px;left:50%;transform:translateX(-50%);font-size:13px;color:var(--muted);letter-spacing:.4px;white-space:nowrap;}
@media (max-width:820px){.kcp__galcard{flex:0 0 calc((100% - 12px)/2);}.kcp__lb{padding:60px 12px;}.kcp__lbnav{width:40px;height:40px;}}
@media (max-width:480px){.kcp__galcard{flex:0 0 82%;}.kcp__galnav{display:none;}.kcp__galhead{margin-bottom:10px;}}
.kcp__cta{max-width:900px;margin:20px auto 0;padding:80px 6vw 96px;text-align:center;}
.kcp__cta h2{font-family:'Unbounded';font-weight:700;font-size:clamp(26px,3.4vw,42px);letter-spacing:-.02em;margin-bottom:16px;}
.kcp__cta p{color:var(--muted);font-size:18px;margin-bottom:30px;}
.kcp__cta-btn{display:inline-block;background:var(--accent);color:#fff;text-decoration:none;font-family:'Manrope';font-weight:700;font-size:16px;padding:18px 38px;border-radius:10px;transition:.25s;}
.kcp__cta-btn:hover{transform:translateY(-2px);box-shadow:0 14px 34px var(--glow);}
@media (max-width:820px){
  .kcp__facts{grid-template-columns:1fr 1fr;}
  .kcp__grid2{grid-template-columns:1fr;gap:20px;}
  .kcp__step{grid-template-columns:1fr;gap:14px;padding:24px 22px;}
  .kcp__step-num{font-size:28px;}
  .kcp__result-grid{grid-template-columns:1fr;}
  .kcp__ph--grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:480px){
  .kcp__hero{padding:48px 20px 0;}
  .kcp__sec{padding:48px 20px;}
  .kcp__facts{grid-template-columns:1fr;}
  .kcp__callout{padding:28px 24px;}
}
/* заполненные слоты (картинка/видео из конфига) */
.kcp [data-img].kcp--filled,.kcp [data-video].kcp--filled{background:none;border:none;}
.kcp [data-img] img,.kcp [data-video] img{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit;}
.kcp [data-fit="contain"] img{object-fit:contain;background:#0f0f11;padding:6%;}
.kcp [data-video].kcp--filled iframe{width:100%;height:100%;border:none;display:block;}
.kcp__ph.kcp--filled{padding:0;}
/* Визитки в шаге 06 - две карточки рядом, лайтбокс общий с галереей */
.kcp__cards{margin-top:18px}
.kcp__cardsrow{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.kcp__card{display:block;width:100%;padding:0;border:0;margin:0;background:#0f0f11;border-radius:14px;overflow:hidden;aspect-ratio:1680/952;cursor:zoom-in}
.kcp__card img{width:100%;height:100%;object-fit:cover;display:block}
.kcp__card:focus-visible{outline:2px solid #6D5DFB;outline-offset:3px}
.kcp__cardsnote{color:#9A9A9A;font-size:13px;line-height:1.5;margin-top:10px}
.kcp__ph--grid.is-two{grid-template-columns:repeat(2,1fr)}
@media (max-width:680px){.kcp__cardsrow{grid-template-columns:1fr}}
/* Галерея скриншотов сайтов в шаге 07 */
.kcp__gal--site .kcp__galcard{flex:0 0 calc((100% - 12px)/2);aspect-ratio:16/9;background:#0f0f11}
.kcp__gal--site .kcp__galcard img{object-fit:contain}
.kcp__sitebtns{display:flex;flex-wrap:wrap;gap:12px;margin-top:16px}
.kcp__sitebtn{display:inline-block;background:var(--accent);color:#fff;text-decoration:none;font-family:'Manrope';font-weight:700;font-size:15px;line-height:1.2;padding:13px 24px;border-radius:10px;transition:.25s}
.kcp__sitebtn:hover{transform:translateY(-2px);box-shadow:0 12px 28px var(--glow)}
.kcp__sitebtn--ghost{background:transparent;color:var(--text);border:1px solid var(--border)}
.kcp__sitebtn--ghost:hover{border-color:var(--accent);box-shadow:none}
@media (max-width:480px){.kcp__gal--site .kcp__galcard{flex:0 0 88%}.kcp__sitebtn{flex:1 1 100%;text-align:center}}
</style>
<script>
(function(){
  var C=window.KORS_CASE||{}; var IMG=C.images||{}, VID=C.videos||{};
  document.querySelectorAll('.kcp [data-video]').forEach(function(el){
    var id=VID[el.getAttribute('data-video')];
    if(id){ el.classList.add('kcp--filled'); el.innerHTML='<iframe src="https://kinescope.io/embed/'+id+'" allow="autoplay; fullscreen; encrypted-media; picture-in-picture" allowfullscreen frameborder="0"></iframe>'; el.removeAttribute('data-img'); }
  });
  document.querySelectorAll('.kcp [data-img]').forEach(function(el){
    var url=IMG[el.getAttribute('data-img')];
    if(url){ el.classList.add('kcp--filled'); el.innerHTML='<img src="'+url+'" alt="">'; }
  });
})();
(function(){
  // Слайдер до/после
  var ba=document.getElementById('kcpBA'); if(!ba) return;
  var before=document.getElementById('kcpBABefore');
  var handle=document.getElementById('kcpBAHandle');
  var dragging=false;
  function setPos(clientX){
    var r=ba.getBoundingClientRect();
    var x=Math.max(0,Math.min(clientX-r.left,r.width));
    var pct=(x/r.width)*100;
    before.style.clipPath='inset(0 '+(100-pct)+'% 0 0)';
    handle.style.left=pct+'%';
  }
  handle.addEventListener('mousedown',function(){dragging=true;});
  window.addEventListener('mouseup',function(){dragging=false;});
  window.addEventListener('mousemove',function(e){ if(dragging) setPos(e.clientX); });
  handle.addEventListener('touchstart',function(){dragging=true;},{passive:true});
  window.addEventListener('touchend',function(){dragging=false;});
  window.addEventListener('touchmove',function(e){ if(dragging&&e.touches[0]) setPos(e.touches[0].clientX); },{passive:true});
  ba.addEventListener('click',function(e){ setPos(e.clientX); });
})();

(function(){
  var C=window.KORS_CASE||{}, SL=C.slides||[];
  var lb=document.getElementById('kcpLb'), lbi=document.getElementById('kcpLbImg'), lbc=document.getElementById('kcpLbCount');
  if(!lb||!lbi) return;
  var list=[], idx=0, lbl='';
  function render(){ lbi.src=list[idx]; lbi.alt=(lbl||'Разворот')+' '+(idx+1)+' из '+list.length; if(lbc) lbc.textContent=(idx+1)+' / '+list.length; }
  function open(arr,i,l){ list=arr; idx=i; lbl=l||''; lb.classList.add('open'); lb.setAttribute('aria-hidden','false'); document.documentElement.style.overflow='hidden'; render(); }
  function close(){ lb.classList.remove('open'); lb.setAttribute('aria-hidden','true'); document.documentElement.style.overflow=''; lbi.removeAttribute('src'); }
  function go(d){ if(list.length<2) return; idx=(idx+d+list.length)%list.length; render(); }
  window.kcpLightbox={open:open};
  function noteSlides(SETS, cur){
    var ru=SETS.filter(function(s){return s.id==='ru';})[0], en=SETS.filter(function(s){return s.id==='en';})[0];
    if(ru&&en) return (ru.items.length===en.items.length?'По '+ru.items.length+' разворотов в русской и английской версии':ru.items.length+' разворотов на русском и '+en.items.length+' на английском')+' - нажмите на разворот, чтобы рассмотреть';
    return cur.items.length+' разворотов - нажмите на разворот, чтобы рассмотреть';
  }
  function altSlide(i,n,cur){ return 'Разворот '+(i+1)+' печатной презентации «Одоевские консервы»'+(cur.id==='en'?', английская версия':''); }
  function noteSites(SETS, cur){
    return 'Вкладка RU - povidlo.su под брендом «Одоевские консервы», вкладка EN - povidlo.pro под экспортным брендом POVIDLO для рынка MENA. Нажмите на кадр, чтобы рассмотреть';
  }
  function altSite(i,n,cur){ return 'Экран '+(i+1)+' из '+n+' сайта '+(cur.id==='en'?'povidlo.pro':'povidlo.su'); }

  function makeGallery(gal, SETS, noteFn, altFn, label, fbSel){
    if(!gal || !SETS.length) return;
    if(fbSel){ var ph=gal.parentNode.querySelector(fbSel); if(ph) ph.style.display='none'; }
    var tabs=SETS.length>1 ? '<div class="kcp__galtabs" role="tablist">'+SETS.map(function(s,i){return '<button class="kcp__galtab'+(i===0?' is-on':'')+'" data-lang="'+s.id+'" role="tab" aria-selected="'+(i===0)+'">'+s.label+'</button>';}).join('')+'</div>' : '<span></span>';
    gal.innerHTML='<div class="kcp__galhead">'+tabs+'<div class="kcp__galnav"><button class="kcp__galarrow" data-gprev aria-label="Назад">&#8249;</button><button class="kcp__galarrow" data-gnext aria-label="Вперёд">&#8250;</button></div></div><div class="kcp__galtrack"></div><div class="kcp__galnote"></div>';
    var track=gal.querySelector('.kcp__galtrack'), note=gal.querySelector('.kcp__galnote');
    var gp=gal.querySelector('[data-gprev]'), gn=gal.querySelector('[data-gnext]');
    var cur=SETS[0];
    function fill(){
      var h='';
      for(var i=0;i<cur.items.length;i++){ h+='<button class="kcp__galcard" data-gi="'+i+'" aria-label="'+label+' '+(i+1)+' из '+cur.items.length+'"><img src="'+cur.items[i]+'" alt="'+altFn(i,cur.items.length,cur)+'" loading="lazy"></button>'; }
      track.innerHTML=h; track.scrollLeft=0; note.textContent=noteFn(SETS,cur); setTimeout(upd,60);
    }
    function step(){ var c=track.querySelector('.kcp__galcard'); return c?c.offsetWidth+12:320; }
    function upd(){ gp.disabled=track.scrollLeft<8; gn.disabled=track.scrollLeft+track.clientWidth>=track.scrollWidth-8; }
    gp.addEventListener('click',function(){ track.scrollLeft-=step(); });
    gn.addEventListener('click',function(){ track.scrollLeft+=step(); });
    track.addEventListener('scroll',upd); window.addEventListener('resize',upd);
    track.addEventListener('click',function(e){ var b=e.target&&e.target.closest?e.target.closest('.kcp__galcard'):null; if(!b) return; open(cur.items, parseInt(b.getAttribute('data-gi'),10)||0, label); });
    var tabEls=gal.querySelectorAll('.kcp__galtab');
    Array.prototype.forEach.call(tabEls,function(t){
      t.addEventListener('click',function(){
        var id=t.getAttribute('data-lang');
        var next=SETS.filter(function(s){return s.id===id;})[0];
        if(!next||next===cur) return;
        cur=next;
        Array.prototype.forEach.call(tabEls,function(o){ var on=o===t; o.classList.toggle('is-on',on); o.setAttribute('aria-selected',on); });
        fill();
      });
    });
    fill();
  }

  makeGallery(document.querySelector('.kcp [data-gallery]'),
    [{id:'ru',label:'RU',items:SL},{id:'en',label:'EN',items:C.slidesEn||[]}].filter(function(x){return x.items&&x.items.length;}),
    noteSlides, altSlide, 'Разворот', '[data-img="presentation"]');

  makeGallery(document.querySelector('.kcp [data-sitegal]'),
    [{id:'ru',label:'RU',items:C.siteRu||[]},{id:'en',label:'EN',items:C.siteEn||[]}].filter(function(x){return x.items&&x.items.length;}),
    noteSites, altSite, 'Скриншот', '[data-img="siteShots"]');
  var x=document.getElementById('kcpLbx'); if(x) x.addEventListener('click',close);
  var pv=document.getElementById('kcpLbPrev'); if(pv) pv.addEventListener('click',function(e){ e.stopPropagation(); go(-1); });
  var nx=document.getElementById('kcpLbNext'); if(nx) nx.addEventListener('click',function(e){ e.stopPropagation(); go(1); });
  lb.addEventListener('click',function(e){ if(e.target===lbi) return; if(e.target&&e.target.closest&&e.target.closest('.kcp__lbnav,.kcp__lbx')) return; close(); });
  document.addEventListener('keydown',function(e){ if(!lb.classList.contains('open')) return; if(e.key==='Escape'||e.keyCode===27) close(); else if(e.key==='ArrowLeft'||e.keyCode===37) go(-1); else if(e.key==='ArrowRight'||e.keyCode===39) go(1); });
  var sx=0, sy=0;
  lb.addEventListener('touchstart',function(e){ if(!e.touches[0]) return; sx=e.touches[0].clientX; sy=e.touches[0].clientY; },{passive:true});
  lb.addEventListener('touchend',function(e){ var t=e.changedTouches&&e.changedTouches[0]; if(!t) return; var dx=t.clientX-sx, dy=t.clientY-sy; if(Math.abs(dx)>45&&Math.abs(dx)>Math.abs(dy)) go(dx<0?1:-1); },{passive:true});
})();

(function(){
  // Визитки шага 06: две карточки рядом, клик открывает общий лайтбокс.
  var C=window.KORS_CASE||{};
  var CARDS=(C.cards||[]).filter(Boolean);
  var box=document.querySelector('.kcp [data-cards]');
  if(!box) return;
  if(!CARDS.length){ box.style.display='none'; return; }
  var ph=document.querySelector('.kcp [data-img="brand1"]');
  if(ph){ ph.style.display='none'; if(ph.parentNode) ph.parentNode.classList.add('is-two'); }
  var ALT=['Визитка: владелец бизнеса','Визитка: менеджер по продажам'];
  var h='';
  for(var i=0;i<CARDS.length;i++){
    h+='<button type="button" class="kcp__card" data-i="'+i+'" aria-label="Открыть визитку '+(i+1)+' из '+CARDS.length+'"><img src="'+CARDS[i]+'" alt="'+(ALT[i]||'Визитка')+'" loading="lazy"></button>';
  }
  box.innerHTML='<div class="kcp__cardsrow">'+h+'</div><div class="kcp__cardsnote">Нажмите на визитку, чтобы рассмотреть</div>';
  box.addEventListener('click',function(e){
    var b=e.target&&e.target.closest?e.target.closest('.kcp__card'):null;
    if(!b) return;
    if(window.kcpLightbox) window.kcpLightbox.open(CARDS, parseInt(b.getAttribute('data-i'),10), 'Визитка');
  });
})();
</script>

rec2709724901 (20404 симв.) - /case-invoicebox 168789009 - кейс целиком

<!-- ============================================================
     KORS · КЕЙС · INVOICEBOX
     Заполнение фото/видео — только в списке KORS_CASE ниже.
     Картинки: ссылка в кавычки ('' = заглушка). Видео: ID Kinescope.
     ============================================================ -->
<script>
window.KORS_CASE = {
  images: {
    cover:      'https://static.tildacdn.com/tild6235-3838-4235-b430-646665666232/ib-cover-a-city.jpg',   // обложка вверху - кадр из второго ролика, Москва-Сити
    aboutShot:  '',   // «О компании» - скрин сервиса/интерфейса
    info1:      '',   // ролик «как выставить счёт» - кадр (если без видео)
    info2:      '',   // ролик «для интернет-магазинов» - кадр
    mkt:        '',   // маркетинг - скрин рекламы/статистики
    grtCover:   '',   // GRT - обложка (арт/люкс)
    grt1:       '',   // GRT - пример
    siteSoon:   ''    // планы - макет лендингов
  },
  videos: {
    main:  '2FXfjS6hYEvLkWNKUveoBx',  // шаг 01 - первое видео о сервисе, полная версия
    v2:    '0GfobL6RnAzhPeiopXjNHS',  // шаг 02 - второе видео, «Инвойсбокс 2»
    info1: 'b66cpVCFFFVycfDvLFXFR3',  // шаг 03 - короткий ролик «выставить счёт»
    info2: '7akHJzKdcoSrPiHtRbRBqk'   // шаг 03 - короткий ролик «для интернет-магазинов»
  }
};
</script>

<div class="kcp">
<header class="kcp__hero">
    <div class="kcp__hero-in">
      <a class="kcp__back" href="/#rec2667018101">← Все проекты</a>
      <div class="kcp__eyebrow">КЕЙС · ФИНТЕХ · ВИДЕО + МАРКЕТИНГ</div>
      <h1 class="kcp__title">Инвойсбокс</h1>
      <p class="kcp__lead">Как объяснить сложный финтех простым языком - и почему клиент возвращался за видео, инфографикой и маркетингом, а затем доверил нам и свой второй бизнес.</p>
      <div class="kcp__facts">
        <div class="kcp__fact"><span>Сфера</span><b>Финтех · приём платежей (B2B)</b></div>
        <div class="kcp__fact"><span>С чего начали</span><b>Видео о сервисе</b></div>
        <div class="kcp__fact"><span>Где сейчас</span><b>Подготовка к продвижению + 2-й бизнес</b></div>
        <div class="kcp__fact"><span>Формат</span><b>Видео · инфографика · реклама</b></div>
      </div>
    </div>
    <div class="kcp__cover kcp__ph" data-img="cover"><div class="kcp__ph-label">📷 Обложка: кадр из видео / интерфейс сервиса (16:9)</div></div>
  </header>
  <section class="kcp__sec">
    <div class="kcp__grid2">
      <div><div class="kcp__kick">- О КОМПАНИИ</div><h2 class="kcp__h2">Мощный сервис, который сложно объяснить</h2></div>
      <div class="kcp__prose">
        <p>Инвойсбокс - сервис приёма онлайн-платежей и автоматизации выставления счетов для бизнеса. Компании выставляют и отправляют счета юридическим лицам за минуту, принимают оплату на сайте и подключают решения для интернет-магазинов.</p>
        <p>Продукт сильный, но у него есть особенность: <b>финтех сложно воспринимается</b>. Чтобы клиент подключился, ему нужно за секунды понять, что это за сервис и какая от него выгода. На словах и текстом это объяснять долго.</p>
      </div>
    </div>
  </section>
  <section class="kcp__sec">
    <div class="kcp__callout">
      <div class="kcp__callout-k">ЗАДАЧА</div>
      <div class="kcp__callout-t">Объяснить сложный финтех-продукт так, чтобы целевая аудитория поняла суть и выгоду за считанные секунды - и захотела подключиться.</div>
    </div>
  </section>
  <section class="kcp__sec">
    <div class="kcp__kick">- КАК ШЛА РАБОТА</div>
    <h2 class="kcp__h2">От одного ролика - к маркетингу и второму бизнесу</h2>
    <p class="kcp__sub">Всё началось с одного объясняющего видео. Дальше клиент возвращался снова и снова - за новыми форматами.</p>
    <ol class="kcp__timeline">
      <li class="kcp__step"><div class="kcp__step-num">01</div><div class="kcp__step-body">
        <h3>Видео о сервисе</h3>
        <p>Сняли первое видео: кто такие Инвойсбокс, чем полезны и как это работает - коротко и понятно. Первый инструмент, который показывает продукт вместо долгих объяснений.</p>
        <div class="kcp__ph kcp__ph--wide" data-video="main"><div class="kcp__ph-label">🎬 Видео о сервисе (Kinescope)</div></div>
      </div></li>
      <li class="kcp__step"><div class="kcp__step-num">02</div><div class="kcp__step-body">
        <h3>Второе видео - глубже и проще</h3>
        <p>Клиент вернулся за вторым роликом. Здесь мы подробнее и ещё проще разобрали продукт - версия для сайта и презентаций, чтобы объяснять сервис новым клиентам.</p>
        <div class="kcp__ph kcp__ph--wide" data-video="v2"><div class="kcp__ph-label">🎬 Второе видео (подробный разбор)</div></div>
      </div></li>
      <li class="kcp__step"><div class="kcp__step-num">03</div><div class="kcp__step-body">
        <h3>Два коротких ролика</h3>
        <p>Дальше - два коротких ролика (~30 секунд): «как выставить счёт на сервисе» и «решение для интернет-магазинов» (у клиента появился новый сервис). Простыми словами о сложном - точно под их аудиторию.</p>
        <div class="kcp__ph kcp__ph--grid">
          <div class="kcp__ph" data-video="info1" data-img="info1"><div class="kcp__ph-label">🎬 ролик «выставить счёт»</div></div>
          <div class="kcp__ph" data-video="info2" data-img="info2"><div class="kcp__ph-label">🎬 ролик «для интернет-магазинов»</div></div>
        </div>
      </div></li>
      <li class="kcp__step"><div class="kcp__step-num">04</div><div class="kcp__step-body">
        <h3>Подготовка к продвижению</h3>
        <p>Структуру подготовили под рекламный трафик: настроили точки конверсии, предусмотрели посадочные сценарии под разные запросы и собрали аналитику, чтобы видеть, что работает.</p>
        <!-- СЛОТ СКРЫТ 30.08.2026. Причина: картинки под этот шаг пока нет, заглушка оставляла пустое место. Ключ images.mkt в конфиге сохранён - чтобы вернуть слот, снимите этот комментарий.
        <div class="kcp__ph kcp__ph--wide" data-img="mkt"><div class="kcp__ph-label">📊 маркетинг: скрин рекламы / результатов</div></div>
        -->
      </div></li>
      <li class="kcp__step kcp__chapter"><div class="kcp__step-num">GRT</div><div class="kcp__step-body">
        <h3>Второй бизнес клиента - GRT</h3>
        <p>Лучшее подтверждение доверия: клиент передал нам и свой второй бизнес - <b>GRT</b>. Это продажа предметов роскоши и искусства - картины, редкие вещи, чеки на миллионы. Другой продукт, другая аудитория, другой уровень.</p>
        <p>Здесь мы тоже настроили рекламу и ведём маркетинг - работа продолжается.</p>
        <div class="kcp__ph kcp__ph--wide" data-img="grtCover"><div class="kcp__ph-label">🖼 GRT: обложка / примеры (арт, люкс)</div></div>
      </div></li>
      <li class="kcp__step kcp__step--next"><div class="kcp__step-num">→</div><div class="kcp__step-body">
        <h3>Что дальше</h3>
        <p>Следующий этап - лендинги под каждый продукт: отдельная страница на каждый сервис, где сложный финтех объясняется максимально просто. Задача - чтобы любой человек понял, что это за сервис и как им удобно пользоваться.</p>
      </div></li>
    </ol>
  </section>
  <section class="kcp__sec">
    <div class="kcp__result">
      <div class="kcp__kick">- ЧТО ИЗМЕНИЛОСЬ</div>
      <h2 class="kcp__h2">Сложное стало понятным - и продающим</h2>
      <div class="kcp__result-grid">
        <div class="kcp__rcard"><div class="kcp__rc-t">Просто о сложном</div><p>Финтех-продукт объяснён так, что аудитория понимает суть и выгоду за секунды.</p></div>
        <div class="kcp__rcard"><div class="kcp__rc-t">Клиент возвращается</div><p>От одного видео - к серии роликов, инфографике и постоянному маркетингу.</p></div>
        <div class="kcp__rcard"><div class="kcp__rc-t">Доверие = 2-й бизнес</div><p>Клиент передал нам и второй бизнес (GRT) - премиальный сегмент.</p></div>
        <div class="kcp__rcard"><div class="kcp__rc-t">Постоянная работа</div><p>Не разовая задача, а ведение маркетинга по двум бизнесам.</p></div>
      </div>
    </div>
  </section>
  <section class="kcp__sec">
    <div class="kcp__kick">- ЧТО ВОШЛО В РАБОТУ</div>
    <div class="kcp__chips">
      <span>Видеопродакшн</span><span>Объясняющие ролики</span><span>Моушн / инфографика</span><span>Короткие ролики 30 сек</span><span>Маркетинг и реклама</span><span>Ведение проекта</span><span>Реклама GRT (люкс/арт)</span><span>Лендинги (в планах)</span>
    </div>
  </section>
  <!-- ===== ВИДЕО ПРОЕКТА (СКРЫТО) ===== -->
  <!-- СЕКЦИЯ СКРЫТА 28.08.2026. Причина: ролик xgBCJrU3Fy9CtKDXR9R23S дублировал шаг 01, а на странице и так четыре ролика.
       Разметка сохранена. Чтобы вернуть секцию, снимите этот комментарий.
  <section class="kcp__sec">
    <div class="kcp__kick">- СМОТРЕТЬ</div>
    <h2 class="kcp__h2">Видео проекта</h2>
    <div class="kcp__video"><iframe src="https://kinescope.io/embed/xgBCJrU3Fy9CtKDXR9R23S" allow="autoplay; fullscreen; encrypted-media; picture-in-picture" allowfullscreen frameborder="0"></iframe></div>
  </section>
  -->
  <!-- ===== ОТЗЫВ КЛИЕНТА ===== -->
  <section class="kcp__sec">
    <div class="kcp__kick">- ОТЗЫВ</div>
    <h2 class="kcp__h2">Благодарственное письмо</h2>
    <p class="kcp__sub">ООО «Объединённый расчётный центр» - юридическое лицо группы «Инвойсбокс»</p>
    <div class="kcp__letter"><img src="https://static.tildacdn.com/tild3461-6534-4530-b265-323334643764/pismo-invoicebox-120.jpg" alt="Благодарственное письмо от ООО «Объединённый расчётный центр» (Инвойсбокс) команде KORS Production за видеоролики и ведение маркетинга" loading="lazy"></div>
  </section>
  <!-- ===== ДРУГИЕ КЕЙСЫ ===== -->
  <section class="kcp__sec">
    <div class="kcp__kick">- ЕЩЁ</div>
    <h2 class="kcp__h2">Другие кейсы</h2>
    <div class="kcp__more">
      <a class="kcp__more-card" href="/case-odoevskie"><span>Кейс</span><b>Одоевские консервы</b><i>Видео, фирменный стиль и два сайта →</i></a>
      <a class="kcp__more-card" href="/case-vistex"><span>Кейс</span><b>Вистекс</b><i>Съёмка видео о предприятии →</i></a>
    </div>
  </section>
  <section class="kcp__cta">
    <h2>Сложный продукт? Объясним просто.</h2>
    <p>Поможем показать ваш сервис так, чтобы клиент понял его за секунды.</p>
    <a class="kcp__cta-btn" href="#popup:zayavka">Обсудить проект →</a>
  </section>
</div>

<style>
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Unbounded:wght@400;600;700;800&display=swap');
.kcp{--bg:#0C0C0E;--raise:#141416;--card:#1B1B1F;--border:#2A2A2E;--soft:#242428;--text:#F5F3EF;--muted:#9A9A9A;--faint:#6a6a6e;--accent:#6D5DFB;--glow:rgba(109,93,251,.14);
  box-sizing:border-box;background:var(--bg);color:var(--text);font-family:'Manrope',Arial,sans-serif;-webkit-font-smoothing:antialiased;}
.kcp *{box-sizing:border-box;margin:0;padding:0;}
.kcp p{line-height:1.65;}
.kcp__eyebrow,.kcp__kick{font-family:'Unbounded';font-size:12px;letter-spacing:.14em;color:var(--accent);}
.kcp__h2{font-family:'Unbounded';font-weight:700;font-size:clamp(26px,3.2vw,42px);letter-spacing:-.02em;line-height:1.12;margin:14px 0 0;}
.kcp__sub{color:var(--muted);font-size:17px;line-height:1.6;max-width:640px;margin-top:14px;}
.kcp__hero{padding:70px 6vw 0;max-width:1280px;margin:0 auto;}
.kcp__hero-in{max-width:900px;}
.kcp__back{display:inline-block;color:var(--muted);text-decoration:none;font-size:14px;font-weight:600;margin-bottom:34px;transition:.2s;}
.kcp__back:hover{color:var(--accent);}
.kcp__hero .kcp__eyebrow{margin-bottom:18px;}
.kcp__title{font-family:'Unbounded';font-weight:800;font-size:clamp(40px,7vw,88px);letter-spacing:-.03em;line-height:1;margin-bottom:24px;}
.kcp__lead{font-size:clamp(18px,2vw,22px);line-height:1.55;color:#d8d6d1;max-width:760px;}
.kcp__facts{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:14px;overflow:hidden;margin-top:44px;}
.kcp__fact{background:var(--raise);padding:20px 22px;display:flex;flex-direction:column;gap:7px;}
.kcp__fact span{font-size:12px;color:var(--faint);text-transform:uppercase;letter-spacing:.06em;}
.kcp__fact b{font-family:'Unbounded';font-weight:600;font-size:14px;line-height:1.3;}
.kcp__cover{margin:48px auto 0;max-width:1280px;aspect-ratio:16/8;border-radius:20px;}
.kcp__sec{max-width:1080px;margin:0 auto;padding:64px 6vw;}
.kcp__grid2{display:grid;grid-template-columns:0.85fr 1.15fr;gap:48px;align-items:start;}
.kcp__prose p{color:#c9c7c2;font-size:17px;margin-bottom:16px;}
.kcp__prose p:last-child{margin-bottom:0;}
.kcp__prose b{color:var(--text);font-weight:600;}
.kcp__callout{background:linear-gradient(135deg,rgba(109,93,251,.10),rgba(109,93,251,.02));border:1px solid rgba(109,93,251,.3);border-radius:18px;padding:40px 44px;}
.kcp__callout-k{font-family:'Unbounded';font-size:12px;letter-spacing:.14em;color:var(--accent);margin-bottom:14px;}
.kcp__callout-t{font-family:'Unbounded';font-weight:600;font-size:clamp(20px,2.4vw,30px);line-height:1.35;letter-spacing:-.01em;}
.kcp__timeline{list-style:none;margin-top:44px;display:flex;flex-direction:column;gap:26px;}
.kcp__step{display:grid;grid-template-columns:88px 1fr;gap:26px;background:var(--raise);border:1px solid var(--border);border-radius:18px;padding:30px 32px;transition:.25s;}
.kcp__step:hover{border-color:rgba(109,93,251,.4);}
.kcp__step-num{font-family:'Unbounded';font-weight:700;font-size:34px;color:var(--accent);line-height:1;opacity:.85;}
.kcp__step-body h3{font-family:'Unbounded';font-weight:600;font-size:22px;letter-spacing:-.01em;margin-bottom:12px;}
.kcp__step-body p{color:#c4c2bd;font-size:16px;}
.kcp__step--next{background:transparent;border-style:dashed;}
.kcp__step--next .kcp__step-num{opacity:1;}
.kcp__ph{position:relative;background:repeating-linear-gradient(45deg,#141416,#141416 12px,#17171a 12px,#17171a 24px);border:2px dashed #38383e;border-radius:14px;min-height:150px;display:flex;align-items:center;justify-content:center;text-align:center;}
.kcp__ph-label{color:#8a8a90;font-size:13px;font-weight:600;line-height:1.5;padding:16px;}
.kcp__ph-label small{color:var(--faint);font-weight:500;}
.kcp__ph--wide{margin-top:18px;aspect-ratio:16/8;min-height:0;}
.kcp__ph--grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:18px;background:none;border:none;padding:0;}
.kcp__ph--grid .kcp__ph{aspect-ratio:4/3;min-height:0;}
.kcp__cover.kcp__ph{aspect-ratio:16/8;}
.kcp__ba{position:relative;margin-top:20px;aspect-ratio:16/9;border-radius:16px;overflow:hidden;border:1px solid var(--border);user-select:none;}
.kcp__ba-after,.kcp__ba-before{position:absolute;inset:0;border-radius:0;border:none;}
.kcp__ba-before{width:100%;clip-path:inset(0 50% 0 0);}
.kcp__ba-handle{position:absolute;top:0;bottom:0;left:50%;width:2px;background:var(--accent);cursor:ew-resize;transform:translateX(-1px);}
.kcp__ba-handle span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:40px;height:40px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(0,0,0,.4);}
.kcp__ba-handle span::before{content:'⟷';color:#000;font-size:18px;font-weight:700;}
.kcp__ba-tag{position:absolute;top:14px;font-family:'Unbounded';font-size:11px;letter-spacing:.1em;background:rgba(0,0,0,.6);padding:5px 11px;border-radius:6px;}
.kcp__ba-tag--l{left:14px;}
.kcp__ba-tag--r{right:14px;}
.kcp__ba-hint{text-align:center;color:var(--faint);font-size:13px;margin-top:12px;}
.kcp__result-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:34px;}
.kcp__rcard{background:var(--raise);border:1px solid var(--border);border-radius:16px;padding:26px 28px;}
.kcp__rc-t{font-family:'Unbounded';font-weight:600;font-size:18px;color:var(--accent);margin-bottom:10px;}
.kcp__rcard p{color:#c4c2bd;font-size:15px;}
.kcp__chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;}
.kcp__chips span{font-family:'Manrope';font-weight:600;font-size:14px;color:var(--text);background:rgba(109,93,251,.08);border:1px solid rgba(109,93,251,.4);border-radius:8px;padding:10px 16px;}
.kcp__video{margin-top:24px;aspect-ratio:16/9;border-radius:18px;overflow:hidden;border:1px solid var(--border);background:#000;}
.kcp__video iframe{width:100%;height:100%;border:none;}
.kcp__cta{max-width:900px;margin:20px auto 0;padding:80px 6vw 96px;text-align:center;}
.kcp__cta h2{font-family:'Unbounded';font-weight:700;font-size:clamp(26px,3.4vw,42px);letter-spacing:-.02em;margin-bottom:16px;}
.kcp__cta p{color:var(--muted);font-size:18px;margin-bottom:30px;}
.kcp__cta-btn{display:inline-block;background:var(--accent);color:#fff;text-decoration:none;font-family:'Manrope';font-weight:700;font-size:16px;padding:18px 38px;border-radius:10px;transition:.25s;}
.kcp__cta-btn:hover{transform:translateY(-2px);box-shadow:0 14px 34px var(--glow);}
@media (max-width:820px){
  .kcp__facts{grid-template-columns:1fr 1fr;}
  .kcp__grid2{grid-template-columns:1fr;gap:20px;}
  .kcp__step{grid-template-columns:1fr;gap:14px;padding:24px 22px;}
  .kcp__step-num{font-size:28px;}
  .kcp__result-grid{grid-template-columns:1fr;}
  .kcp__ph--grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:480px){
  .kcp__hero{padding:48px 20px 0;}
  .kcp__sec{padding:48px 20px;}
  .kcp__facts{grid-template-columns:1fr;}
  .kcp__callout{padding:28px 24px;}
}
.kcp [data-img].kcp--filled,.kcp [data-video].kcp--filled{background:none;border:none;}
.kcp [data-img] img,.kcp [data-video] img{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit;}
.kcp [data-fit="contain"] img{object-fit:contain;background:#0f0f11;padding:6%;}
.kcp [data-video].kcp--filled iframe{width:100%;height:100%;border:none;display:block;}
.kcp__ph.kcp--filled{padding:0;}
.kcp__chapter{background:linear-gradient(135deg,rgba(109,93,251,.10),rgba(109,93,251,.02))!important;border-color:rgba(109,93,251,.4)!important;}
.kcp__chapter .kcp__step-num{font-size:22px;}
/* Благодарственное письмо и блок «Другие кейсы» */
.kcp__letter{margin-top:26px;max-width:440px}
.kcp__letter img{display:block;width:100%;height:auto;border-radius:14px;border:1px solid var(--border)}
.kcp__more{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:28px}
.kcp__more-card{display:block;background:var(--raise);border:1px solid var(--border);border-radius:16px;padding:24px 26px;text-decoration:none;transition:.2s}
.kcp__more-card:hover{border-color:var(--accent)}
.kcp__more-card span{display:block;font-size:12px;letter-spacing:2px;color:var(--accent);text-transform:uppercase;margin-bottom:10px}
.kcp__more-card b{display:block;font-family:'Unbounded',sans-serif;font-weight:700;font-size:22px;line-height:1.2;color:var(--text);margin-bottom:8px}
.kcp__more-card i{font-style:normal;font-size:15px;color:var(--muted)}
@media (max-width:640px){.kcp__more{grid-template-columns:1fr}}
</style>
<script>
(function(){
  var C=window.KORS_CASE||{}; var IMG=C.images||{}, VID=C.videos||{};
  document.querySelectorAll('.kcp [data-video]').forEach(function(el){
    var id=VID[el.getAttribute('data-video')];
    if(id){ el.classList.add('kcp--filled'); el.innerHTML='<iframe src="https://kinescope.io/embed/'+id+'" allow="autoplay; fullscreen; encrypted-media; picture-in-picture" allowfullscreen frameborder="0"></iframe>'; el.removeAttribute('data-img'); }
  });
  document.querySelectorAll('.kcp [data-img]').forEach(function(el){
    var url=IMG[el.getAttribute('data-img')];
    if(url){ el.classList.add('kcp--filled'); el.innerHTML='<img src="'+url+'" alt="">'; }
  });
})();
(function(){
  var ba=document.getElementById('kcpBA'); if(!ba) return;
  var before=document.getElementById('kcpBABefore');
  var handle=document.getElementById('kcpBAHandle');
  var dragging=false;
  function setPos(clientX){
    var r=ba.getBoundingClientRect();
    var x=Math.max(0,Math.min(clientX-r.left,r.width));
    var pct=(x/r.width)*100;
    before.style.clipPath='inset(0 '+(100-pct)+'% 0 0)';
    handle.style.left=pct+'%';
  }
  handle.addEventListener('mousedown',function(){dragging=true;});
  window.addEventListener('mouseup',function(){dragging=false;});
  window.addEventListener('mousemove',function(e){ if(dragging) setPos(e.clientX); });
  handle.addEventListener('touchstart',function(){dragging=true;},{passive:true});
  window.addEventListener('touchend',function(){dragging=false;});
  window.addEventListener('touchmove',function(e){ if(dragging&&e.touches[0]) setPos(e.touches[0].clientX); },{passive:true});
  ba.addEventListener('click',function(e){ setPos(e.clientX); });
})();
</script>

BACKUP 2026-08-30 №3

rec2699474201 (44946 симв.) - /case-odoevskie 168173409 - кейс целиком

<!-- ================================================================
     KORS · СТРАНИЦА-КЕЙС · ОДОЕВСКИЕ КОНСЕРВЫ
     ── ЗАПОЛНЕНИЕ ──────────────────────────────────────────────────
     Всё фото/видео вставляется В ОДНОМ МЕСТЕ - в списке ниже (KORS_CASE).
     • Картинки: вставь ссылку на изображение в кавычки. Пусто '' = заглушка.
       Где взять ссылку: загрузи фото в Tilda (Файл-менеджер сайта или любой
       блок «Изображение») и скопируй URL картинки; либо любой прямой URL.
     • Видео: впиши ID ролика Kinescope (часть после kinescope.io/… ). Пусто = заглушка.
     Больше нигде в коде править не нужно - слоты подтянутся сами.
     ================================================================ -->
<script>
window.KORS_CASE = {
  images: {
    cover:        'https://static.tildacdn.com/tild3563-6163-4139-a463-386164356466/odoev-cover-film-128.jpg',   // большая обложка вверху (гориз. фото/визуал)
    firstShoot:   '',   // шаг 01 - кадр первой съёмки начинки (если без видео)
    firstShoot2:  '',   // шаг 01 - кадр второй съёмки начинки (если без видео)
presentation: '',   // шаг 02 - одиночная картинка-запасной вариант (используется, только если slides пуст)
    factoryPhoto: '',   // шаг 03 - фото производства (если без видео)
    product1:     'https://static.tildacdn.com/tild3538-6336-4331-b630-393965653763/odoevskie-nachinki-1.jpg',   // шаг 04 - фото продукции 1
    product2:     'https://static.tildacdn.com/tild6462-3535-4432-b266-653436663333/odoevskie-kruasan-12.jpg',   // шаг 04 - фото продукции 2
    product3:     'https://static.tildacdn.com/tild6462-3131-4336-a237-366662616565/odoevskie-laboratori.jpg',   // шаг 04 - фото цеха/процесса
    logoBefore:   'https://static.tildacdn.com/tild6462-3439-4365-a261-333634373338/odoevskie-logo-do-12.jpg',   // шаг 05 - СТАРЫЙ логотип (до)
    logoAfter:    'https://static.tildacdn.com/tild6338-3131-4439-b966-623739303361/odoevskie-logo-posle.jpg',   // шаг 05 - НОВЫЙ логотип (после)
    brand1:       '',   // шаг 06 - визитки
    brand2:       'https://static.tildacdn.com/tild6162-3336-4666-a338-323336396465/odoev-otkrytka-vesna.jpg',   // шаг 06 - открытки
    brand3:       'https://static.tildacdn.com/tild6632-3465-4634-b861-393137323563/odoevskie-priglasite.jpg',   // шаг 06 - др. носители
    siteShots:    ''    // шаг 07 - скриншоты povidlo.su и povidlo.pro
  },
  // Скриншоты сайтов для шага 07. Вкладка RU - povidlo.su, вкладка EN - povidlo.pro.
  siteRu: [
    'https://static.tildacdn.com/tild3463-3561-4837-b438-333439316132/povidlo-su-01-hero.jpg',
    'https://static.tildacdn.com/tild6439-3335-4533-a436-656336633534/povidlo-su-02-kontro.jpg',
    'https://static.tildacdn.com/tild6336-3035-4463-b463-653463326363/povidlo-su-03-katalo.jpg',
    'https://static.tildacdn.com/tild6538-3937-4435-b339-336162656636/povidlo-su-04-menedz.jpg'
  ],
  siteEn: [
    'https://static.tildacdn.com/tild3561-3836-4335-b431-323263383230/povidlo-pro-01-hero.jpg',
    'https://static.tildacdn.com/tild6163-3731-4132-b166-613736353464/povidlo-pro-02-about.jpg',
    'https://static.tildacdn.com/tild3335-3935-4237-b938-386233613336/povidlo-pro-03-leadf.jpg'
  ],
  // Визитки для шага 06. Две карточки, открываются в том же лайтбоксе, что и развороты.
  // Пусто - используется одиночный слот images.brand1.
  cards: [
    'https://static.tildacdn.com/tild3261-6362-4033-a662-393031353131/odoev-vizitka-ivanov.jpg',
    'https://static.tildacdn.com/tild6232-3936-4463-a637-333436386635/odoev-vizitka-veklic.jpg'
  ],
  // Развороты печатной презентации для шага 02. Два комплекта, переключаются вкладками RU/EN.
  // Порядок = порядок в галерее. Пусто в slides - в слоте останется заглушка,
  // пусто в slidesEn - вкладка EN не показывается.
  slides: [
    'https://static.tildacdn.com/tild3839-6265-4534-b632-383934363939/odoev-pres-01.jpg',
    'https://static.tildacdn.com/tild6365-3736-4633-b638-623535336533/odoev-pres-02.jpg',
    'https://static.tildacdn.com/tild3861-3537-4062-b638-623737303666/odoev-pres-03.jpg',
    'https://static.tildacdn.com/tild3739-3733-4737-a439-373962306636/odoev-pres-04.jpg',
    'https://static.tildacdn.com/tild6131-3763-4633-a632-383430346635/odoev-pres-05.jpg',
    'https://static.tildacdn.com/tild6238-3563-4662-b936-343165656562/odoev-pres-06.jpg',
    'https://static.tildacdn.com/tild6330-3263-4431-b136-306366623031/odoev-pres-07.jpg',
    'https://static.tildacdn.com/tild3263-6531-4663-b630-316431303234/odoev-pres-08.jpg',
    'https://static.tildacdn.com/tild3032-6661-4835-b932-613834373837/odoev-pres-09.jpg',
    'https://static.tildacdn.com/tild6439-3366-4065-b763-343465383338/odoev-pres-10.jpg',
    'https://static.tildacdn.com/tild3431-3232-4331-a661-653335363963/odoev-pres-11.jpg',
    'https://static.tildacdn.com/tild3239-6231-4336-a531-363563343563/odoev-pres-12.jpg',
    'https://static.tildacdn.com/tild3231-6331-4262-b262-363063643633/odoev-pres-13.jpg',
    'https://static.tildacdn.com/tild6537-3532-4534-a166-623232326538/odoev-pres-14.jpg',
    'https://static.tildacdn.com/tild3763-3332-4665-b631-353963643534/odoev-pres-15.jpg',
    'https://static.tildacdn.com/tild3439-6161-4537-a531-633864306164/odoev-pres-16.jpg'
  ],
  slidesEn: [
    'https://static.tildacdn.com/tild6132-3033-4436-b735-343631343130/odoev-pres-en-01.jpg',
    'https://static.tildacdn.com/tild3832-3935-4631-b631-366464363039/odoev-pres-en-02.jpg',
    'https://static.tildacdn.com/tild3332-3761-4538-b430-333335363031/odoev-pres-en-03.jpg',
    'https://static.tildacdn.com/tild6566-3932-4236-b365-323064646265/odoev-pres-en-04.jpg',
    'https://static.tildacdn.com/tild3238-6164-4730-b662-366261353863/odoev-pres-en-05.jpg',
    'https://static.tildacdn.com/tild3939-3332-4437-a131-643238343734/odoev-pres-en-06.jpg',
    'https://static.tildacdn.com/tild6264-3134-4561-a333-646630626136/odoev-pres-en-07.jpg',
    'https://static.tildacdn.com/tild3463-6639-4532-b364-636338303939/odoev-pres-en-08.jpg',
    'https://static.tildacdn.com/tild6634-3632-4239-a463-363462323464/odoev-pres-en-09.jpg',
    'https://static.tildacdn.com/tild3434-3061-4432-b663-386464313137/odoev-pres-en-10.jpg',
    'https://static.tildacdn.com/tild6265-6534-4335-a130-306462656133/odoev-pres-en-11.jpg',
    'https://static.tildacdn.com/tild6332-6135-4762-a135-303166363439/odoev-pres-en-12.jpg',
    'https://static.tildacdn.com/tild3930-3535-4231-a436-326336303337/odoev-pres-en-13.jpg',
    'https://static.tildacdn.com/tild3335-3832-4730-b466-393065656433/odoev-pres-en-14.jpg',
    'https://static.tildacdn.com/tild3934-3966-4931-a466-613731333338/odoev-pres-en-15.jpg',
    'https://static.tildacdn.com/tild6465-3432-4361-b464-343863303862/odoev-pres-en-16.jpg'
  ],
  videos: {
    firstShoot:   'sRyZwPm3BS9CVspVi2sLx3',   // шаг 01 - ролик «Термостабильные начинки»
    firstShoot2:  'mZiwnH9uZAdc15hhRsqPvB',    // шаг 01 - ролик «Нетермостабильные начинки»
    factory:      '3ZsxHkdEuHUubxSAQZDRyG',    // шаг 03 - фильм о заводе, полная версия
    main:         'j8Pq4wWMNTPm6Js8UQiM1n'     // блок «Видео проекта»
  }
};
</script>
<div class="kcp">
  <!-- ===== HERO ===== -->
  <header class="kcp__hero">
    <div class="kcp__hero-in">
      <a class="kcp__back" href="/#rec2667018101">← Все проекты</a>
      <div class="kcp__eyebrow">КЕЙС · ПИЩЕВОЕ ПРОИЗВОДСТВО</div>
      <h1 class="kcp__title">Одоевские консервы</h1>
      <div class="kcp__tags"><span class="kcp__tag">Видео</span><span class="kcp__tag">Фотосъёмка</span><span class="kcp__tag">Презентация</span><span class="kcp__tag">Фирменный стиль</span><span class="kcp__tag">Сайт</span></div>
      <p class="kcp__lead">Завод с 200+ рецептур, десятью направлениями продукции и поставками в четыре страны рассказывал о себе разрозненно. Собрали всё в одну систему: видео, фотосъёмка, презентация, логотип, фирменный стиль и два сайта - русский и английский.</p>
      <div class="kcp__facts">
        <div class="kcp__fact"><span>Сфера</span><b>Пищевое производство · B2B</b></div>
        <div class="kcp__fact"><span>С чего начали</span><b>Видеосъёмка продукта</b></div>
        <div class="kcp__fact"><span>Где сейчас</span><b>povidlo.su + povidlo.pro</b></div>
        <div class="kcp__fact"><span>Масштаб</span><b>200+ рецептур · 10 направлений</b></div>
      </div>
    </div>
    <!-- ВСТАВИТЬ: большое обложечное фото/видео (завод, продукция или кадр со съёмки). Пока заглушка. -->
    <div class="kcp__cover kcp__ph" data-img="cover"><div class="kcp__ph-label">📷 Обложка: фото продукции / кадр со съёмки (16:9)</div></div>
  </header>
  <!-- ===== КТО КЛИЕНТ ===== -->
  <section class="kcp__sec">
    <div class="kcp__grid2">
      <div>
        <div class="kcp__kick">- О КОМПАНИИ</div>
        <h2 class="kcp__h2">Сильное производство, которое было не видно</h2>
      </div>
      <div class="kcp__prose">
        <p>«Одоевские консервы» - производитель из посёлка Одоев в Тульской области. Уже более двадцати лет компания выпускает термостабильные фруктово-ягодные начинки, повидло, джемы, конфитюры, пюре и наполнители для хлебопекарной, кондитерской и молочной промышленности: больше 200 рецептур, десять направлений продукции, поставки в четыре страны.</p>
        <p>Это классический B2B: их продукт - ингредиент, который живёт <b>внутри</b> чужих изделий. Начинка в круассане, повидло в печенье, наполнитель в йогурте. Продукт качественный, производство серьёзное - но со стороны этого масштаба не было видно.</p>
        <p>При этом информация о заводе жила по разным местам: ассортимент - в прайсе, производственные возможности - в голове у менеджера, контроль качества и география поставок не были описаны нигде. Видео, сайт, презентация и фирменные материалы не складывались в единую картину: компанию нельзя было «показать» - только долго объяснять на словах.</p>
      </div>
    </div>
  </section>
  <!-- ===== ЗАДАЧА (акцентная плашка) ===== -->
  <section class="kcp__sec">
    <div class="kcp__callout">
      <div class="kcp__callout-k">ЗАДАЧА</div>
      <div class="kcp__callout-t">Задача была не в красивом сайте, а в том, чтобы собрать разрозненную информацию о заводе в одну систему - и партнёр за несколько минут понимал, с кем имеет дело.</div>
    </div>
  </section>
  <!-- ===== ТАЙМЛАЙН РАБОТЫ ===== -->
  <section class="kcp__sec">
    <div class="kcp__kick">- КАК ШЛА РАБОТА</div>
    <h2 class="kcp__h2">Из одной съёмки - в полный цикл</h2>
    <p class="kcp__sub">Сотрудничество началось с одного ролика и постепенно выросло в полный комплект материалов. Вот путь шаг за шагом.</p>
    <ol class="kcp__timeline">
      <li class="kcp__step">
        <div class="kcp__step-num">01</div>
        <div class="kcp__step-body">
          <h3>Первые видео на начинке</h3>
          <p>Начали с двух роликов о продукте. Сняли начинку «в деле» - текстуру, цвет, как она работает в готовом изделии. Это первое, что показывает потенциальному партнёру, что перед ним - качественный ингредиент.</p>
          <!-- Два ролика первой съёмки. ID берутся из KORS_CASE.videos (firstShoot / firstShoot2). -->
          <div class="kcp__vid2">
            <div class="kcp__ph" data-video="firstShoot" data-img="firstShoot"><div class="kcp__ph-label">🎬 Термостабильные начинки</div></div>
            <div class="kcp__ph" data-video="firstShoot2" data-img="firstShoot2"><div class="kcp__ph-label">🎬 Нетермостабильные начинки</div></div>
          </div>
        </div>
      </li>
      <li class="kcp__step">
        <div class="kcp__step-num">02</div>
        <div class="kcp__step-body">
          <h3>Печатная презентация</h3>
          <p>Собрали продукт и производство в понятную структуру - презентацию для переговоров и выставок. Разложили ассортимент, преимущества и мощности так, чтобы менеджеру было легко показать компанию клиенту.</p>
          <!-- Галерея разворотов: ссылки в KORS_CASE.slides. Клик по развороту открывает его на весь экран. -->
          <div class="kcp__gal" data-gallery></div>
          <div class="kcp__ph kcp__ph--wide" data-img="presentation"><div class="kcp__ph-label">📑 Развороты печатной презентации</div></div>
        </div>
      </li>
      <li class="kcp__step">
        <div class="kcp__step-num">03</div>
        <div class="kcp__step-body">
          <h3>Видео о заводе</h3>
          <p>Сняли само производство: масштаб цехов, оборудование, процессы. Именно это видео закрывает главный вопрос B2B-клиента - «а справятся ли по объёму и качеству». Масштаб теперь виден, а не описан словами.</p>
          <div class="kcp__ph kcp__ph--wide" data-video="factory" data-img="factoryPhoto"><div class="kcp__ph-label">🎬 Видео о заводе / кадры производства</div></div>
        </div>
      </li>
      <li class="kcp__step">
        <div class="kcp__step-num">04</div>
        <div class="kcp__step-body">
          <h3>Фотосъёмка для презентации и каталога</h3>
          <p>Сделали предметную и производственную фотосъёмку - продукция, упаковка, цеха. Единый визуальный ряд, который лёг в презентацию, каталог и дальнейшие материалы.</p>
          <div class="kcp__gal kcp__gal--photo" data-photogal></div>
          <div class="kcp__ph kcp__ph--grid">
            <div class="kcp__ph" data-img="product1"><div class="kcp__ph-label">📷 фото продукции 1</div></div>
            <div class="kcp__ph" data-img="product2"><div class="kcp__ph-label">📷 фото продукции 2</div></div>
            <div class="kcp__ph" data-img="product3"><div class="kcp__ph-label">📷 фото цеха / процесса</div></div>
          </div>
        </div>
      </li>
      <li class="kcp__step">
        <div class="kcp__step-num">05</div>
        <div class="kcp__step-body">
          <h3>Новый логотип: до / после</h3>
          <p>Обновили логотип - сохранили узнаваемость, но привели к современному виду, который одинаково хорошо работает на упаковке, в презентации и на сайте. Сравните сами:</p>
          <!-- ДО/ПОСЛЕ слайдер. ВСТАВИТЬ 2 картинки логотипа: старый и новый -->
          <div class="kcp__ba" id="kcpBA">
            <div class="kcp__ba-after kcp__ph" data-img="logoAfter" data-fit="contain"><div class="kcp__ph-label">✅ НОВЫЙ логотип (после)</div></div>
            <div class="kcp__ba-before kcp__ph" id="kcpBABefore" data-img="logoBefore" data-fit="contain"><div class="kcp__ph-label">◻️ СТАРЫЙ логотип (до)</div></div>
            <div class="kcp__ba-handle" id="kcpBAHandle"><span></span></div>
            <div class="kcp__ba-tag kcp__ba-tag--l">ДО</div>
            <div class="kcp__ba-tag kcp__ba-tag--r">ПОСЛЕ</div>
          </div>
          <div class="kcp__ba-hint">Потяните ползунок влево-вправо, чтобы сравнить</div>
        </div>
      </li>
      <li class="kcp__step">
        <div class="kcp__step-num">06</div>
        <div class="kcp__step-body">
          <h3>Фирменный стиль: открытки, визитки, носители</h3>
          <p>Оформили фирменные носители - визитки, открытки и другие материалы в единой стилистике. Компания получила узнаваемый облик, который работает на каждой точке контакта.</p>
          <div class="kcp__cards" data-cards></div>
          <div class="kcp__ph kcp__ph--grid">
            <div class="kcp__ph" data-img="brand1"><div class="kcp__ph-label">📷 визитки</div></div>
            <div class="kcp__ph" data-img="brand2" data-fit="contain"><div class="kcp__ph-label">📷 открытки</div></div>
            <div class="kcp__ph" data-img="brand3" data-fit="contain"><div class="kcp__ph-label">📷 др. носители</div></div>
          </div>
        </div>
      </li>
      <li class="kcp__step">
        <div class="kcp__step-num">07</div>
        <div class="kcp__step-body">
          <h3>Два сайта: povidlo.su и povidlo.pro</h3>
          <p>Сделали не языковой переключатель, а два отдельных сайта. Русский - povidlo.su, под брендом «Одоевские консервы». Английский - povidlo.pro, под экспортным брендом POVIDLO: отдельная структура и своя подача, адаптированная под зарубежных партнёров.</p>
          <p>Каждый из них работает сразу в трёх ролях: корпоративный сайт, каталог продукции и презентация для отдела продаж. Внутри - десять направлений продукции, производственные возможности, контроль качества и география поставок. Менеджеру достаточно дать ссылку вместо пересказа.</p>
          <div class="kcp__gal kcp__gal--site" data-sitegal></div>
          <div class="kcp__sitebtns">
            <a class="kcp__sitebtn" href="https://povidlo.su" target="_blank" rel="noopener">Открыть povidlo.su</a>
            <a class="kcp__sitebtn kcp__sitebtn--ghost" href="https://povidlo.pro" target="_blank" rel="noopener">Открыть povidlo.pro</a>
          </div>
          <div class="kcp__ph kcp__ph--wide" data-img="siteShots"><div class="kcp__ph-label">💻 Скриншоты povidlo.su и povidlo.pro</div></div>
        </div>
      </li>
      <li class="kcp__step kcp__step--next">
        <div class="kcp__step-num">→</div>
        <div class="kcp__step-body">
          <h3>Что дальше</h3>
          <p>Следующий этап - застройка выставочного стенда (планируется на зиму). Сотрудничество продолжается: от продукта на экране - к тому, как компания выглядит вживую на выставке.</p>
        </div>
      </li>
    </ol>
  </section>
  <!-- ===== РЕЗУЛЬТАТ ===== -->
  <section class="kcp__sec">
    <div class="kcp__result">
      <div class="kcp__kick">- ЧТО ИЗМЕНИЛОСЬ</div>
      <h2 class="kcp__h2">Компанию теперь можно показать, а не пересказывать</h2>
      <div class="kcp__result-grid">
        <div class="kcp__rcard"><div class="kcp__rc-t">Единый комплект</div><p>Видео, фото, презентация, логотип, фирменный стиль и сайт - собраны в одну систему и работают вместе.</p></div>
        <div class="kcp__rcard"><div class="kcp__rc-t">Масштаб виден сразу</div><p>Ассортимент, производство и контроль качества показаны на месте - на переговорах, выставках и в презентации, без долгих объяснений.</p></div>
        <div class="kcp__rcard"><div class="kcp__rc-t">Экспортное направление</div><p>Экспорт и представительства в Грузии и ОАЭ. Англоязычный povidlo.pro - то, чем компания представляет себя в регионе MENA.</p></div>
        <div class="kcp__rcard"><div class="kcp__rc-t">Долгое партнёрство</div><p>Сотрудничество выросло из одной видеосъёмки в постоянную работу над материалами компании.</p></div>
      </div>
    </div>
  </section>
  <!-- ===== ЧТО ВОШЛО (услуги) ===== -->
  <section class="kcp__sec">
    <div class="kcp__kick">- ЧТО ВОШЛО В КОМПЛЕКТ</div>
    <div class="kcp__chips">
      <span>Видеопродакшн</span><span>Съёмка производства</span><span>Фотосъёмка</span><span>Печатная презентация</span><span>Редизайн логотипа</span><span>Фирменный стиль</span><span>Визитки и открытки</span><span>Сайт RU</span><span>Сайт EN (MENA)</span>
    </div>
  </section>
  <!-- ===== ВИДЕО КЕЙСА (СКРЫТ) ===== -->
  <!-- СЕКЦИЯ СКРЫТА 28.08.2026. Причина: на странице уже четыре ролика (два в шаге 01 и фильм о заводе в шаге 03).
       Разметка и ключ KORS_CASE.videos.main оставлены нетронутыми. Чтобы вернуть секцию, снимите этот комментарий.
       ID ролика подставляется из KORS_CASE.videos.main
  <section class="kcp__sec">
    <div class="kcp__kick">- СМОТРЕТЬ</div>
    <h2 class="kcp__h2">Видео проекта</h2>
    <div class="kcp__video" data-video="main"><div class="kcp__ph-label">🎬 Основной ролик проекта</div></div>
  </section>
  -->
  <!-- ===== ОТЗЫВ КЛИЕНТА ===== -->
  <section class="kcp__sec">
    <div class="kcp__kick">- ОТЗЫВ</div>
    <h2 class="kcp__h2">Благодарственное письмо</h2>
    <p class="kcp__sub">ООО «МастерДжем» - юридическое лицо «Одоевских консервов»</p>
    <div class="kcp__letter"><img src="https://static.tildacdn.com/tild3231-6563-4932-b139-373433306561/pismo-odoevskie-1200.jpg" alt="Благодарственное письмо от ООО «МастерДжем» (Одоевские консервы) команде KORS Production за фото- и видеосъёмку производства и материалы для сайта и презентаций" loading="lazy"></div>
  </section>
  <!-- ===== ДРУГИЕ КЕЙСЫ ===== -->
  <section class="kcp__sec">
    <div class="kcp__kick">- ЕЩЁ</div>
    <h2 class="kcp__h2">Другие кейсы</h2>
    <div class="kcp__more">
      <a class="kcp__more-card" href="/case-invoicebox"><span>Кейс</span><b>Инвойсбокс</b><i>Видеоматериалы для платформы →</i></a>
      <a class="kcp__more-card" href="/case-vistex"><span>Кейс</span><b>Вистекс</b><i>Съёмка видео о предприятии →</i></a>
    </div>
  </section>
  <!-- ===== CTA ===== -->
  <section class="kcp__cta">
    <h2>Хотите так же показать своё производство?</h2>
    <p>Начнём с одного шага - а вырастем в полный цикл, если понравится результат.</p>
    <a class="kcp__cta-btn" href="#popup:zayavka">Обсудить проект →</a>
  </section>
  <!-- Лайтбокс. Тот же, что для благодарственных писем на главной, плюс листание. -->
  <div class="kcp__lb" id="kcpLb" aria-hidden="true">
    <div class="kcp__lbbd"></div>
    <div class="kcp__lbbox">
      <button class="kcp__lbx" id="kcpLbx" aria-label="Закрыть">×</button>
      <button class="kcp__lbnav kcp__lbnav--prev" id="kcpLbPrev" aria-label="Предыдущий">&#8249;</button>
      <img id="kcpLbImg" alt="">
      <button class="kcp__lbnav kcp__lbnav--next" id="kcpLbNext" aria-label="Следующий">&#8250;</button>
      <div class="kcp__lbcount" id="kcpLbCount"></div>
    </div>
  </div>
</div>
<style>
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Unbounded:wght@400;600;700;800&display=swap');
.kcp{--bg:#0C0C0E;--raise:#141416;--card:#1B1B1F;--border:#2A2A2E;--soft:#242428;--text:#F5F3EF;--muted:#9A9A9A;--faint:#6a6a6e;--accent:#6D5DFB;--glow:rgba(109,93,251,.14);
  box-sizing:border-box;background:var(--bg);color:var(--text);font-family:'Manrope',Arial,sans-serif;-webkit-font-smoothing:antialiased;}
.kcp *{box-sizing:border-box;margin:0;padding:0;}
.kcp p{line-height:1.65;}
.kcp__eyebrow,.kcp__kick{font-family:'Unbounded';font-size:12px;letter-spacing:.14em;color:var(--accent);}
.kcp__h2{font-family:'Unbounded';font-weight:700;font-size:clamp(26px,3.2vw,42px);letter-spacing:-.02em;line-height:1.12;margin:14px 0 0;}
.kcp__sub{color:var(--muted);font-size:17px;line-height:1.6;max-width:640px;margin-top:14px;}
/* HERO */
.kcp__hero{padding:70px 6vw 0;max-width:1280px;margin:0 auto;}
.kcp__hero-in{max-width:900px;}
.kcp__back{display:inline-block;color:var(--muted);text-decoration:none;font-size:14px;font-weight:600;margin-bottom:34px;transition:.2s;}
.kcp__back:hover{color:var(--accent);}
.kcp__hero .kcp__eyebrow{margin-bottom:18px;}
.kcp__title{font-family:'Unbounded';font-weight:800;font-size:clamp(40px,7vw,88px);letter-spacing:-.03em;line-height:1;margin-bottom:24px;}
.kcp__lead{font-size:clamp(18px,2vw,22px);line-height:1.55;color:#d8d6d1;max-width:760px;}
.kcp__tags{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 18px;}
.kcp__tag{font-family:'Manrope',Arial,sans-serif;font-weight:600;font-size:9px;line-height:1;text-transform:uppercase;letter-spacing:.14em;color:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.22);border-radius:4px;padding:5px 8px;white-space:nowrap;}
@media (max-width:480px){ .kcp__tag{font-size:8px;padding:5px 7px;} .kcp__tags{gap:5px;margin-bottom:14px;} }
.kcp__facts{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:14px;overflow:hidden;margin-top:44px;}
.kcp__fact{background:var(--raise);padding:20px 22px;display:flex;flex-direction:column;gap:7px;}
.kcp__fact span{font-size:12px;color:var(--faint);text-transform:uppercase;letter-spacing:.06em;}
.kcp__fact b{font-family:'Unbounded';font-weight:600;font-size:14px;line-height:1.3;}
.kcp__cover{margin:48px auto 0;max-width:1280px;aspect-ratio:16/8;border-radius:20px;}
/* SECTIONS */
.kcp__sec{max-width:1080px;margin:0 auto;padding:64px 6vw;}
.kcp__grid2{display:grid;grid-template-columns:0.85fr 1.15fr;gap:48px;align-items:start;}
.kcp__prose p{color:#c9c7c2;font-size:17px;margin-bottom:16px;}
.kcp__prose p:last-child{margin-bottom:0;}
.kcp__prose b{color:var(--text);font-weight:600;}
/* CALLOUT */
.kcp__callout{background:linear-gradient(135deg,rgba(109,93,251,.10),rgba(109,93,251,.02));border:1px solid rgba(109,93,251,.3);border-radius:18px;padding:40px 44px;}
.kcp__callout-k{font-family:'Unbounded';font-size:12px;letter-spacing:.14em;color:var(--accent);margin-bottom:14px;}
.kcp__callout-t{font-family:'Unbounded';font-weight:600;font-size:clamp(20px,2.4vw,30px);line-height:1.35;letter-spacing:-.01em;}
/* TIMELINE */
.kcp__timeline{list-style:none;margin-top:44px;display:flex;flex-direction:column;gap:26px;}
.kcp__step{display:grid;grid-template-columns:88px 1fr;gap:26px;background:var(--raise);border:1px solid var(--border);border-radius:18px;padding:30px 32px;transition:.25s;}
.kcp__step:hover{border-color:rgba(109,93,251,.4);}
.kcp__step-num{font-family:'Unbounded';font-weight:700;font-size:34px;color:var(--accent);line-height:1;opacity:.85;}
.kcp__step-body h3{font-family:'Unbounded';font-weight:600;font-size:22px;letter-spacing:-.01em;margin-bottom:12px;}
.kcp__step-body p{color:#c4c2bd;font-size:16px;}
.kcp__step--next{background:transparent;border-style:dashed;}
.kcp__step--next .kcp__step-num{opacity:1;}
/* PLACEHOLDERS */
.kcp__ph{position:relative;background:repeating-linear-gradient(45deg,#141416,#141416 12px,#17171a 12px,#17171a 24px);border:2px dashed #38383e;border-radius:14px;min-height:150px;display:flex;align-items:center;justify-content:center;text-align:center;}
.kcp__ph-label{color:#8a8a90;font-size:13px;font-weight:600;line-height:1.5;padding:16px;}
.kcp__ph-label small{color:var(--faint);font-weight:500;}
.kcp__ph--wide{margin-top:18px;aspect-ratio:16/8;min-height:0;}
.kcp__ph--grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:18px;background:none;border:none;padding:0;}
.kcp__ph--grid .kcp__ph{aspect-ratio:4/3;min-height:0;}
.kcp__cover.kcp__ph{aspect-ratio:16/8;}
/* BEFORE/AFTER */
.kcp__ba{position:relative;margin-top:20px;aspect-ratio:16/9;border-radius:16px;overflow:hidden;border:1px solid var(--border);user-select:none;}
.kcp__ba-after,.kcp__ba-before{position:absolute;inset:0;border-radius:0;border:none;}
.kcp__ba-before{width:100%;clip-path:inset(0 50% 0 0);}
.kcp__ba-handle{position:absolute;top:0;bottom:0;left:50%;width:2px;background:var(--accent);cursor:ew-resize;transform:translateX(-1px);}
.kcp__ba-handle span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:40px;height:40px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(0,0,0,.4);}
.kcp__ba-handle span::before{content:'⟷';color:#000;font-size:18px;font-weight:700;}
.kcp__ba-tag{position:absolute;top:14px;font-family:'Unbounded';font-size:11px;letter-spacing:.1em;background:rgba(0,0,0,.6);padding:5px 11px;border-radius:6px;}
.kcp__ba-tag--l{left:14px;}
.kcp__ba-tag--r{right:14px;}
.kcp__ba-hint{text-align:center;color:var(--faint);font-size:13px;margin-top:12px;}
/* RESULT */
.kcp__result-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:34px;}
.kcp__rcard{background:var(--raise);border:1px solid var(--border);border-radius:16px;padding:26px 28px;}
.kcp__rc-t{font-family:'Unbounded';font-weight:600;font-size:18px;color:var(--accent);margin-bottom:10px;}
.kcp__rcard p{color:#c4c2bd;font-size:15px;}
/* CHIPS */
.kcp__chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;}
.kcp__chips span{font-family:'Manrope';font-weight:600;font-size:14px;color:var(--text);background:rgba(109,93,251,.08);border:1px solid rgba(109,93,251,.4);border-radius:8px;padding:10px 16px;}
/* VIDEO */
.kcp__video{margin-top:24px;aspect-ratio:16/9;border-radius:18px;overflow:hidden;border:1px solid var(--border);background:#000;}
.kcp__video iframe{width:100%;height:100%;border:none;}
/* CTA */
.kcp__vid2{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px;}
.kcp__vid2 .kcp__ph{aspect-ratio:16/9;min-height:0;margin-top:0;}
.kcp__letter{margin-top:26px;max-width:440px;}
.kcp__letter img{display:block;width:100%;height:auto;border-radius:14px;border:1px solid var(--border);}
.kcp__more{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:28px;}
.kcp__more-card{display:block;background:var(--raise);border:1px solid var(--border);border-radius:16px;padding:24px 26px;text-decoration:none;transition:.2s;}
.kcp__more-card:hover{border-color:var(--accent);}
.kcp__more-card span{display:block;font-size:12px;letter-spacing:2px;color:var(--accent);text-transform:uppercase;margin-bottom:10px;}
.kcp__more-card b{display:block;font-family:'Unbounded',sans-serif;font-weight:700;font-size:22px;line-height:1.2;color:var(--text);margin-bottom:8px;}
.kcp__more-card i{font-style:normal;font-size:15px;color:var(--muted);}
@media (max-width:640px){.kcp__vid2{grid-template-columns:1fr;}.kcp__more{grid-template-columns:1fr;}}
/* --- Галерея разворотов презентации --- */
.kcp__gal{margin-top:18px;}
.kcp__galhead{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:12px;}
.kcp__galtabs{display:inline-flex;gap:4px;background:var(--soft);border:1px solid var(--border);border-radius:9px;padding:4px;}
.kcp__galtab{padding:7px 18px;border:none;background:none;color:var(--muted);font-family:'Manrope',Arial,sans-serif;font-weight:600;font-size:13px;line-height:1;letter-spacing:1.2px;border-radius:6px;cursor:pointer;transition:.2s;}
.kcp__galtab:hover{color:var(--text);}
.kcp__galtab.is-on{background:var(--accent);color:#fff;}
.kcp__galnote{margin-top:14px;font-size:13px;line-height:1.5;color:var(--muted);letter-spacing:.3px;}
.kcp__galnav{display:flex;gap:8px;flex-shrink:0;}
.kcp__galarrow{width:40px;height:40px;border:1px solid var(--border);background:var(--raise);border-radius:4px;color:var(--text);font:20px/1 Arial,sans-serif;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.2s;padding:0;}
.kcp__galarrow:hover{border-color:var(--accent);color:var(--accent);}
.kcp__galarrow:disabled{opacity:.3;cursor:default;border-color:var(--border);color:var(--text);}
.kcp__galtrack{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:4px;}
.kcp__galtrack::-webkit-scrollbar{display:none;}
.kcp__galcard{flex:0 0 calc((100% - 24px)/3);scroll-snap-align:start;display:block;padding:0;margin:0;border:1px solid var(--border);background:var(--raise);border-radius:10px;overflow:hidden;cursor:zoom-in;aspect-ratio:1200/873;transition:.2s;font:inherit;}
.kcp__galcard:hover{border-color:var(--accent);}
.kcp__galcard img{width:100%;height:100%;object-fit:cover;display:block;}
/* --- Лайтбокс --- */
.kcp__lb{position:fixed;inset:0;z-index:99999;display:none;align-items:center;justify-content:center;padding:64px 40px;}
.kcp__lb.open{display:flex;}
.kcp__lbbd{position:absolute;inset:0;background:rgba(4,4,6,.9);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);}
.kcp__lbbox{position:relative;width:auto;max-width:min(1100px,100%);display:flex;align-items:center;justify-content:center;}
.kcp__lbbox img{display:block;max-width:100%;max-height:calc(100vh - 170px);width:auto;height:auto;border-radius:10px;background:#0f0f11;}
.kcp__lbx{position:absolute;top:-48px;right:0;width:38px;height:38px;border-radius:9px;background:var(--raise);border:1px solid var(--border);color:var(--text);font:20px/1 Arial,sans-serif;cursor:pointer;padding:0;}
.kcp__lbx:hover{border-color:var(--accent);color:var(--accent);}
.kcp__lbnav{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;background:rgba(20,20,22,.85);border:1px solid var(--border);color:var(--text);font:22px/1 Arial,sans-serif;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.2s;padding:0;}
.kcp__lbnav:hover{border-color:var(--accent);color:var(--accent);}
.kcp__lbnav--prev{left:10px;}
.kcp__lbnav--next{right:10px;}
.kcp__lbcount{position:absolute;bottom:-36px;left:50%;transform:translateX(-50%);font-size:13px;color:var(--muted);letter-spacing:.4px;white-space:nowrap;}
@media (max-width:820px){.kcp__galcard{flex:0 0 calc((100% - 12px)/2);}.kcp__lb{padding:60px 12px;}.kcp__lbnav{width:40px;height:40px;}}
@media (max-width:480px){.kcp__galcard{flex:0 0 82%;}.kcp__galnav{display:none;}.kcp__galhead{margin-bottom:10px;}}
.kcp__cta{max-width:900px;margin:20px auto 0;padding:80px 6vw 96px;text-align:center;}
.kcp__cta h2{font-family:'Unbounded';font-weight:700;font-size:clamp(26px,3.4vw,42px);letter-spacing:-.02em;margin-bottom:16px;}
.kcp__cta p{color:var(--muted);font-size:18px;margin-bottom:30px;}
.kcp__cta-btn{display:inline-block;background:var(--accent);color:#fff;text-decoration:none;font-family:'Manrope';font-weight:700;font-size:16px;padding:18px 38px;border-radius:10px;transition:.25s;}
.kcp__cta-btn:hover{transform:translateY(-2px);box-shadow:0 14px 34px var(--glow);}
@media (max-width:820px){
  .kcp__facts{grid-template-columns:1fr 1fr;}
  .kcp__grid2{grid-template-columns:1fr;gap:20px;}
  .kcp__step{grid-template-columns:1fr;gap:14px;padding:24px 22px;}
  .kcp__step-num{font-size:28px;}
  .kcp__result-grid{grid-template-columns:1fr;}
  .kcp__ph--grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:480px){
  .kcp__hero{padding:48px 20px 0;}
  .kcp__sec{padding:48px 20px;}
  .kcp__facts{grid-template-columns:1fr;}
  .kcp__callout{padding:28px 24px;}
}
/* заполненные слоты (картинка/видео из конфига) */
.kcp [data-img].kcp--filled,.kcp [data-video].kcp--filled{background:none;border:none;}
.kcp [data-img] img,.kcp [data-video] img{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit;}
.kcp [data-fit="contain"] img{object-fit:contain;background:#0f0f11;padding:6%;}
.kcp [data-video].kcp--filled iframe{width:100%;height:100%;border:none;display:block;}
.kcp__ph.kcp--filled{padding:0;}
/* Визитки в шаге 06 - две карточки рядом, лайтбокс общий с галереей */
.kcp__cards{margin-top:18px}
.kcp__cardsrow{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.kcp__card{display:block;width:100%;padding:0;border:0;margin:0;background:#0f0f11;border-radius:14px;overflow:hidden;aspect-ratio:1680/952;cursor:zoom-in}
.kcp__card img{width:100%;height:100%;object-fit:cover;display:block}
.kcp__card:focus-visible{outline:2px solid #6D5DFB;outline-offset:3px}
.kcp__cardsnote{color:#9A9A9A;font-size:13px;line-height:1.5;margin-top:10px}
.kcp__ph--grid.is-two{grid-template-columns:repeat(2,1fr)}
@media (max-width:680px){.kcp__cardsrow{grid-template-columns:1fr}}
/* Галерея кадров фотосъёмки в шаге 04 */
.kcp__gal--photo .kcp__galcard{aspect-ratio:4/3}
/* Галерея скриншотов сайтов в шаге 07 */
.kcp__gal--site .kcp__galcard{flex:0 0 calc((100% - 12px)/2);aspect-ratio:16/9;background:#0f0f11}
.kcp__gal--site .kcp__galcard img{object-fit:contain}
.kcp__sitebtns{display:flex;flex-wrap:wrap;gap:12px;margin-top:16px}
.kcp__sitebtn{display:inline-block;background:var(--accent);color:#fff;text-decoration:none;font-family:'Manrope';font-weight:700;font-size:15px;line-height:1.2;padding:13px 24px;border-radius:10px;transition:.25s}
.kcp__sitebtn:hover{transform:translateY(-2px);box-shadow:0 12px 28px var(--glow)}
.kcp__sitebtn--ghost{background:transparent;color:var(--text);border:1px solid var(--border)}
.kcp__sitebtn--ghost:hover{border-color:var(--accent);box-shadow:none}
@media (max-width:480px){.kcp__gal--site .kcp__galcard{flex:0 0 88%}.kcp__sitebtn{flex:1 1 100%;text-align:center}}
</style>
<script>
(function(){
  var C=window.KORS_CASE||{}; var IMG=C.images||{}, VID=C.videos||{};
  document.querySelectorAll('.kcp [data-video]').forEach(function(el){
    var id=VID[el.getAttribute('data-video')];
    if(id){ el.classList.add('kcp--filled'); el.innerHTML='<iframe src="https://kinescope.io/embed/'+id+'" allow="autoplay; fullscreen; encrypted-media; picture-in-picture" allowfullscreen frameborder="0"></iframe>'; el.removeAttribute('data-img'); }
  });
  document.querySelectorAll('.kcp [data-img]').forEach(function(el){
    var url=IMG[el.getAttribute('data-img')];
    if(url){ el.classList.add('kcp--filled'); el.innerHTML='<img src="'+url+'" alt="">'; }
  });
})();
(function(){
  // Слайдер до/после
  var ba=document.getElementById('kcpBA'); if(!ba) return;
  var before=document.getElementById('kcpBABefore');
  var handle=document.getElementById('kcpBAHandle');
  var dragging=false;
  function setPos(clientX){
    var r=ba.getBoundingClientRect();
    var x=Math.max(0,Math.min(clientX-r.left,r.width));
    var pct=(x/r.width)*100;
    before.style.clipPath='inset(0 '+(100-pct)+'% 0 0)';
    handle.style.left=pct+'%';
  }
  handle.addEventListener('mousedown',function(){dragging=true;});
  window.addEventListener('mouseup',function(){dragging=false;});
  window.addEventListener('mousemove',function(e){ if(dragging) setPos(e.clientX); });
  handle.addEventListener('touchstart',function(){dragging=true;},{passive:true});
  window.addEventListener('touchend',function(){dragging=false;});
  window.addEventListener('touchmove',function(e){ if(dragging&&e.touches[0]) setPos(e.touches[0].clientX); },{passive:true});
  ba.addEventListener('click',function(e){ setPos(e.clientX); });
})();

(function(){
  var C=window.KORS_CASE||{}, SL=C.slides||[];
  var lb=document.getElementById('kcpLb'), lbi=document.getElementById('kcpLbImg'), lbc=document.getElementById('kcpLbCount');
  if(!lb||!lbi) return;
  var list=[], idx=0, lbl='';
  function render(){ lbi.src=list[idx]; lbi.alt=(lbl||'Разворот')+' '+(idx+1)+' из '+list.length; if(lbc) lbc.textContent=(idx+1)+' / '+list.length; }
  function open(arr,i,l){ list=arr; idx=i; lbl=l||''; lb.classList.add('open'); lb.setAttribute('aria-hidden','false'); document.documentElement.style.overflow='hidden'; render(); }
  function close(){ lb.classList.remove('open'); lb.setAttribute('aria-hidden','true'); document.documentElement.style.overflow=''; lbi.removeAttribute('src'); }
  function go(d){ if(list.length<2) return; idx=(idx+d+list.length)%list.length; render(); }
  window.kcpLightbox={open:open};
  function noteSlides(SETS, cur){
    var ru=SETS.filter(function(s){return s.id==='ru';})[0], en=SETS.filter(function(s){return s.id==='en';})[0];
    if(ru&&en) return (ru.items.length===en.items.length?'По '+ru.items.length+' разворотов в русской и английской версии':ru.items.length+' разворотов на русском и '+en.items.length+' на английском')+' - нажмите на разворот, чтобы рассмотреть';
    return cur.items.length+' разворотов - нажмите на разворот, чтобы рассмотреть';
  }
  function altSlide(i,n,cur){ return 'Разворот '+(i+1)+' печатной презентации «Одоевские консервы»'+(cur.id==='en'?', английская версия':''); }
  function notePhoto(SETS, cur){
    return cur.items.length+' кадра со съёмки - продукция, упаковка и производство. Нажмите на кадр, чтобы рассмотреть';
  }
  function altPhoto(i,n,cur){ return 'Кадр '+(i+1)+' из '+n+' с фотосъёмки для «Одоевских консервов»: продукция, упаковка и производство'; }
  function noteSites(SETS, cur){
    return 'Вкладка RU - povidlo.su под брендом «Одоевские консервы», вкладка EN - povidlo.pro под экспортным брендом POVIDLO для рынка MENA. Нажмите на кадр, чтобы рассмотреть';
  }
  function altSite(i,n,cur){ return 'Экран '+(i+1)+' из '+n+' сайта '+(cur.id==='en'?'povidlo.pro':'povidlo.su'); }

  function makeGallery(gal, SETS, noteFn, altFn, label, fbSel){
    if(!gal || !SETS.length) return;
    if(fbSel){ var ph=gal.parentNode.querySelector(fbSel); if(ph) ph.style.display='none'; }
    var tabs=SETS.length>1 ? '<div class="kcp__galtabs" role="tablist">'+SETS.map(function(s,i){return '<button class="kcp__galtab'+(i===0?' is-on':'')+'" data-lang="'+s.id+'" role="tab" aria-selected="'+(i===0)+'">'+s.label+'</button>';}).join('')+'</div>' : '<span></span>';
    gal.innerHTML='<div class="kcp__galhead">'+tabs+'<div class="kcp__galnav"><button class="kcp__galarrow" data-gprev aria-label="Назад">&#8249;</button><button class="kcp__galarrow" data-gnext aria-label="Вперёд">&#8250;</button></div></div><div class="kcp__galtrack"></div><div class="kcp__galnote"></div>';
    var track=gal.querySelector('.kcp__galtrack'), note=gal.querySelector('.kcp__galnote');
    var gp=gal.querySelector('[data-gprev]'), gn=gal.querySelector('[data-gnext]');
    var cur=SETS[0];
    function fill(){
      var h='';
      for(var i=0;i<cur.items.length;i++){ h+='<button class="kcp__galcard" data-gi="'+i+'" aria-label="'+label+' '+(i+1)+' из '+cur.items.length+'"><img src="'+cur.items[i]+'" alt="'+altFn(i,cur.items.length,cur)+'" loading="lazy"></button>'; }
      track.innerHTML=h; track.scrollLeft=0; note.textContent=noteFn(SETS,cur); setTimeout(upd,60);
    }
    function step(){ var c=track.querySelector('.kcp__galcard'); return c?c.offsetWidth+12:320; }
    function upd(){ gp.disabled=track.scrollLeft<8; gn.disabled=track.scrollLeft+track.clientWidth>=track.scrollWidth-8; }
    gp.addEventListener('click',function(){ track.scrollLeft-=step(); });
    gn.addEventListener('click',function(){ track.scrollLeft+=step(); });
    track.addEventListener('scroll',upd); window.addEventListener('resize',upd);
    track.addEventListener('click',function(e){ var b=e.target&&e.target.closest?e.target.closest('.kcp__galcard'):null; if(!b) return; open(cur.items, parseInt(b.getAttribute('data-gi'),10)||0, label); });
    var tabEls=gal.querySelectorAll('.kcp__galtab');
    Array.prototype.forEach.call(tabEls,function(t){
      t.addEventListener('click',function(){
        var id=t.getAttribute('data-lang');
        var next=SETS.filter(function(s){return s.id===id;})[0];
        if(!next||next===cur) return;
        cur=next;
        Array.prototype.forEach.call(tabEls,function(o){ var on=o===t; o.classList.toggle('is-on',on); o.setAttribute('aria-selected',on); });
        fill();
      });
    });
    fill();
  }

  makeGallery(document.querySelector('.kcp [data-gallery]'),
    [{id:'ru',label:'RU',items:SL},{id:'en',label:'EN',items:C.slidesEn||[]}].filter(function(x){return x.items&&x.items.length;}),
    noteSlides, altSlide, 'Разворот', '[data-img="presentation"]');

  var PH = [C.images.product1, C.images.product2, C.images.product3].filter(Boolean);
  makeGallery(document.querySelector('.kcp [data-photogal]'),
    [{id:'ph',label:'Съёмка',items:PH}].filter(function(x){return x.items&&x.items.length;}),
    notePhoto, altPhoto, 'Кадр', '.kcp__ph--grid');

  makeGallery(document.querySelector('.kcp [data-sitegal]'),
    [{id:'ru',label:'RU',items:C.siteRu||[]},{id:'en',label:'EN',items:C.siteEn||[]}].filter(function(x){return x.items&&x.items.length;}),
    noteSites, altSite, 'Скриншот', '[data-img="siteShots"]');
  var x=document.getElementById('kcpLbx'); if(x) x.addEventListener('click',close);
  var pv=document.getElementById('kcpLbPrev'); if(pv) pv.addEventListener('click',function(e){ e.stopPropagation(); go(-1); });
  var nx=document.getElementById('kcpLbNext'); if(nx) nx.addEventListener('click',function(e){ e.stopPropagation(); go(1); });
  lb.addEventListener('click',function(e){ if(e.target===lbi) return; if(e.target&&e.target.closest&&e.target.closest('.kcp__lbnav,.kcp__lbx')) return; close(); });
  document.addEventListener('keydown',function(e){ if(!lb.classList.contains('open')) return; if(e.key==='Escape'||e.keyCode===27) close(); else if(e.key==='ArrowLeft'||e.keyCode===37) go(-1); else if(e.key==='ArrowRight'||e.keyCode===39) go(1); });
  var sx=0, sy=0;
  lb.addEventListener('touchstart',function(e){ if(!e.touches[0]) return; sx=e.touches[0].clientX; sy=e.touches[0].clientY; },{passive:true});
  lb.addEventListener('touchend',function(e){ var t=e.changedTouches&&e.changedTouches[0]; if(!t) return; var dx=t.clientX-sx, dy=t.clientY-sy; if(Math.abs(dx)>45&&Math.abs(dx)>Math.abs(dy)) go(dx<0?1:-1); },{passive:true});
})();

(function(){
  // Визитки шага 06: две карточки рядом, клик открывает общий лайтбокс.
  var C=window.KORS_CASE||{};
  var CARDS=(C.cards||[]).filter(Boolean);
  var box=document.querySelector('.kcp [data-cards]');
  if(!box) return;
  if(!CARDS.length){ box.style.display='none'; return; }
  var ph=document.querySelector('.kcp [data-img="brand1"]');
  if(ph){ ph.style.display='none'; if(ph.parentNode) ph.parentNode.classList.add('is-two'); }
  var ALT=['Визитка: владелец бизнеса','Визитка: менеджер по продажам'];
  var h='';
  for(var i=0;i<CARDS.length;i++){
    h+='<button type="button" class="kcp__card" data-i="'+i+'" aria-label="Открыть визитку '+(i+1)+' из '+CARDS.length+'"><img src="'+CARDS[i]+'" alt="'+(ALT[i]||'Визитка')+'" loading="lazy"></button>';
  }
  box.innerHTML='<div class="kcp__cardsrow">'+h+'</div><div class="kcp__cardsnote">Нажмите на визитку, чтобы рассмотреть</div>';
  box.addEventListener('click',function(e){
    var b=e.target&&e.target.closest?e.target.closest('.kcp__card'):null;
    if(!b) return;
    if(window.kcpLightbox) window.kcpLightbox.open(CARDS, parseInt(b.getAttribute('data-i'),10), 'Визитка');
  });
})();
</script>

rec2709724901 (20422 симв.) - /case-invoicebox 168789009 - кейс целиком

<!-- ============================================================
     KORS · КЕЙС · INVOICEBOX
     Заполнение фото/видео — только в списке KORS_CASE ниже.
     Картинки: ссылка в кавычки ('' = заглушка). Видео: ID Kinescope.
     ============================================================ -->
<script>
window.KORS_CASE = {
  images: {
    cover:      'https://static.tildacdn.com/tild6235-3838-4235-b430-646665666232/ib-cover-a-city.jpg',   // обложка вверху - кадр из второго ролика, Москва-Сити
    aboutShot:  '',   // «О компании» - скрин сервиса/интерфейса
    info1:      '',   // ролик «как выставить счёт» - кадр (если без видео)
    info2:      '',   // ролик «для интернет-магазинов» - кадр
    mkt:        '',   // маркетинг - скрин рекламы/статистики
    grtCover:   '',   // GRT - обложка (арт/люкс)
    grt1:       '',   // GRT - пример
    siteSoon:   ''    // планы - макет лендингов
  },
  videos: {
    main:  '2FXfjS6hYEvLkWNKUveoBx',  // шаг 01 - первое видео о сервисе, полная версия
    v2:    '0GfobL6RnAzhPeiopXjNHS',  // шаг 02 - второе видео, «Инвойсбокс 2»
    info1: 'b66cpVCFFFVycfDvLFXFR3',  // шаг 03 - короткий ролик «выставить счёт»
    info2: '7akHJzKdcoSrPiHtRbRBqk'   // шаг 03 - короткий ролик «для интернет-магазинов»
  }
};
</script>

<div class="kcp">
<header class="kcp__hero">
    <div class="kcp__hero-in">
      <a class="kcp__back" href="/#rec2667018101">← Все проекты</a>
      <div class="kcp__eyebrow">КЕЙС · ФИНТЕХ · ВИДЕО + МАРКЕТИНГ</div>
      <h1 class="kcp__title">Инвойсбокс</h1>
      <p class="kcp__lead">Как объяснить сложный финтех простым языком - и почему клиент возвращался за видео, инфографикой и маркетингом, а затем доверил нам и свой второй бизнес.</p>
      <div class="kcp__facts">
        <div class="kcp__fact"><span>Сфера</span><b>Финтех · приём платежей (B2B)</b></div>
        <div class="kcp__fact"><span>С чего начали</span><b>Видео о сервисе</b></div>
        <div class="kcp__fact"><span>Где сейчас</span><b>Подготовка к продвижению + 2-й бизнес</b></div>
        <div class="kcp__fact"><span>Формат</span><b>Видео · инфографика · реклама</b></div>
      </div>
    </div>
    <div class="kcp__cover kcp__ph" data-img="cover"><div class="kcp__ph-label">📷 Обложка: кадр из видео / интерфейс сервиса (16:9)</div></div>
  </header>
  <section class="kcp__sec">
    <div class="kcp__grid2">
      <div><div class="kcp__kick">- О КОМПАНИИ</div><h2 class="kcp__h2">Мощный сервис, который сложно объяснить</h2></div>
      <div class="kcp__prose">
        <p>Инвойсбокс - сервис приёма онлайн-платежей и автоматизации выставления счетов для бизнеса. Компании выставляют и отправляют счета юридическим лицам за минуту, принимают оплату на сайте и подключают решения для интернет-магазинов.</p>
        <p>Продукт сильный, но у него есть особенность: <b>финтех сложно воспринимается</b>. Чтобы клиент подключился, ему нужно за секунды понять, что это за сервис и какая от него выгода. На словах и текстом это объяснять долго.</p>
      </div>
    </div>
  </section>
  <section class="kcp__sec">
    <div class="kcp__callout">
      <div class="kcp__callout-k">ЗАДАЧА</div>
      <div class="kcp__callout-t">Объяснить сложный финтех-продукт так, чтобы целевая аудитория поняла суть и выгоду за считанные секунды - и захотела подключиться.</div>
    </div>
  </section>
  <section class="kcp__sec">
    <div class="kcp__kick">- КАК ШЛА РАБОТА</div>
    <h2 class="kcp__h2">От одного ролика - к маркетингу и второму бизнесу</h2>
    <p class="kcp__sub">Всё началось с одного объясняющего видео. Дальше клиент возвращался снова и снова - за новыми форматами.</p>
    <ol class="kcp__timeline">
      <li class="kcp__step"><div class="kcp__step-num">01</div><div class="kcp__step-body">
        <h3>Видео о сервисе</h3>
        <p>Сняли первое видео: кто такие Инвойсбокс, чем полезны и как это работает - коротко и понятно. Первый инструмент, который показывает продукт вместо долгих объяснений.</p>
        <div class="kcp__ph kcp__ph--wide" data-video="main"><div class="kcp__ph-label">🎬 Видео о сервисе (Kinescope)</div></div>
      </div></li>
      <li class="kcp__step"><div class="kcp__step-num">02</div><div class="kcp__step-body">
        <h3>Второе видео - глубже и проще</h3>
        <p>Клиент вернулся за вторым роликом. Здесь мы подробнее и ещё проще разобрали продукт - версия для сайта и презентаций, чтобы объяснять сервис новым клиентам.</p>
        <div class="kcp__ph kcp__ph--wide" data-video="v2"><div class="kcp__ph-label">🎬 Второе видео (подробный разбор)</div></div>
      </div></li>
      <li class="kcp__step"><div class="kcp__step-num">03</div><div class="kcp__step-body">
        <h3>Два коротких ролика</h3>
        <p>Дальше - два коротких ролика (~30 секунд): «как выставить счёт на сервисе» и «решение для интернет-магазинов» (у клиента появился новый сервис). Простыми словами о сложном - точно под их аудиторию.</p>
        <div class="kcp__ph kcp__ph--grid">
          <div class="kcp__ph" data-video="info1" data-img="info1"><div class="kcp__ph-label">🎬 ролик «выставить счёт»</div></div>
          <div class="kcp__ph" data-video="info2" data-img="info2"><div class="kcp__ph-label">🎬 ролик «для интернет-магазинов»</div></div>
        </div>
      </div></li>
      <li class="kcp__step"><div class="kcp__step-num">04</div><div class="kcp__step-body">
        <h3>Подготовка к продвижению</h3>
        <p>Структуру подготовили под рекламный трафик: настроили точки конверсии, предусмотрели посадочные сценарии под разные запросы и собрали аналитику, чтобы видеть, что работает.</p>
        <!-- СЛОТ СКРЫТ 30.08.2026. Причина: картинки под этот шаг пока нет, заглушка оставляла пустое место. Ключ images.mkt в конфиге сохранён - чтобы вернуть слот, снимите этот комментарий.
        <div class="kcp__ph kcp__ph--wide" data-img="mkt"><div class="kcp__ph-label">📊 маркетинг: скрин рекламы / результатов</div></div>
        -->
      </div></li>
      <li class="kcp__step kcp__chapter"><div class="kcp__step-num">GRT</div><div class="kcp__step-body">
        <h3>Второй бизнес клиента - GRT</h3>
        <p>Лучшее подтверждение доверия: клиент передал нам и свой второй бизнес - <b>GRT</b>. Это продажа предметов роскоши и искусства - картины, редкие вещи, чеки на миллионы. Другой продукт, другая аудитория, другой уровень.</p>
        <p>Здесь мы тоже настроили рекламу и ведём маркетинг - работа продолжается.</p>
        <div class="kcp__ph kcp__ph--wide" data-img="grtCover"><div class="kcp__ph-label">🖼 GRT: обложка / примеры (арт, люкс)</div></div>
      </div></li>
      <li class="kcp__step kcp__step--next"><div class="kcp__step-num">→</div><div class="kcp__step-body">
        <h3>Что дальше</h3>
        <p>Следующий этап - лендинги под каждый продукт: отдельная страница на каждый сервис, где сложный финтех объясняется максимально просто. Задача - чтобы любой человек понял, что это за сервис и как им удобно пользоваться.</p>
      </div></li>
    </ol>
  </section>
  <section class="kcp__sec">
    <div class="kcp__result">
      <div class="kcp__kick">- ЧТО ИЗМЕНИЛОСЬ</div>
      <h2 class="kcp__h2">Сложное стало понятным - и продающим</h2>
      <div class="kcp__result-grid">
        <div class="kcp__rcard"><div class="kcp__rc-t">Просто о сложном</div><p>Финтех-продукт объяснён так, что аудитория понимает суть и выгоду за секунды.</p></div>
        <div class="kcp__rcard"><div class="kcp__rc-t">Клиент возвращается</div><p>От одного видео - к серии роликов и инфографике, дальше - подготовка к продвижению.</p></div>
        <div class="kcp__rcard"><div class="kcp__rc-t">Доверие = 2-й бизнес</div><p>Клиент передал нам и второй бизнес (GRT) - премиальный сегмент.</p></div>
        <div class="kcp__rcard"><div class="kcp__rc-t">Постоянная работа</div><p>Не разовая задача, а постоянная работа по двум бизнесам клиента.</p></div>
      </div>
    </div>
  </section>
  <section class="kcp__sec">
    <div class="kcp__kick">- ЧТО ВОШЛО В РАБОТУ</div>
    <div class="kcp__chips">
      <span>Видеопродакшн</span><span>Объясняющие ролики</span><span>Моушн / инфографика</span><span>Короткие ролики 30 сек</span><span>Маркетинг и реклама</span><span>Ведение проекта</span><span>Реклама GRT (люкс/арт)</span><span>Лендинги (в планах)</span>
    </div>
  </section>
  <!-- ===== ВИДЕО ПРОЕКТА (СКРЫТО) ===== -->
  <!-- СЕКЦИЯ СКРЫТА 28.08.2026. Причина: ролик xgBCJrU3Fy9CtKDXR9R23S дублировал шаг 01, а на странице и так четыре ролика.
       Разметка сохранена. Чтобы вернуть секцию, снимите этот комментарий.
  <section class="kcp__sec">
    <div class="kcp__kick">- СМОТРЕТЬ</div>
    <h2 class="kcp__h2">Видео проекта</h2>
    <div class="kcp__video"><iframe src="https://kinescope.io/embed/xgBCJrU3Fy9CtKDXR9R23S" allow="autoplay; fullscreen; encrypted-media; picture-in-picture" allowfullscreen frameborder="0"></iframe></div>
  </section>
  -->
  <!-- ===== ОТЗЫВ КЛИЕНТА ===== -->
  <section class="kcp__sec">
    <div class="kcp__kick">- ОТЗЫВ</div>
    <h2 class="kcp__h2">Благодарственное письмо</h2>
    <p class="kcp__sub">ООО «Объединённый расчётный центр» - юридическое лицо группы «Инвойсбокс»</p>
    <div class="kcp__letter"><img src="https://static.tildacdn.com/tild3461-6534-4530-b265-323334643764/pismo-invoicebox-120.jpg" alt="Благодарственное письмо от ООО «Объединённый расчётный центр» (Инвойсбокс) команде KORS Production за видеоролики и ведение маркетинга" loading="lazy"></div>
  </section>
  <!-- ===== ДРУГИЕ КЕЙСЫ ===== -->
  <section class="kcp__sec">
    <div class="kcp__kick">- ЕЩЁ</div>
    <h2 class="kcp__h2">Другие кейсы</h2>
    <div class="kcp__more">
      <a class="kcp__more-card" href="/case-odoevskie"><span>Кейс</span><b>Одоевские консервы</b><i>Видео, фирменный стиль и два сайта →</i></a>
      <a class="kcp__more-card" href="/case-vistex"><span>Кейс</span><b>Вистекс</b><i>Съёмка видео о предприятии →</i></a>
    </div>
  </section>
  <section class="kcp__cta">
    <h2>Сложный продукт? Объясним просто.</h2>
    <p>Поможем показать ваш сервис так, чтобы клиент понял его за секунды.</p>
    <a class="kcp__cta-btn" href="#popup:zayavka">Обсудить проект →</a>
  </section>
</div>

<style>
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Unbounded:wght@400;600;700;800&display=swap');
.kcp{--bg:#0C0C0E;--raise:#141416;--card:#1B1B1F;--border:#2A2A2E;--soft:#242428;--text:#F5F3EF;--muted:#9A9A9A;--faint:#6a6a6e;--accent:#6D5DFB;--glow:rgba(109,93,251,.14);
  box-sizing:border-box;background:var(--bg);color:var(--text);font-family:'Manrope',Arial,sans-serif;-webkit-font-smoothing:antialiased;}
.kcp *{box-sizing:border-box;margin:0;padding:0;}
.kcp p{line-height:1.65;}
.kcp__eyebrow,.kcp__kick{font-family:'Unbounded';font-size:12px;letter-spacing:.14em;color:var(--accent);}
.kcp__h2{font-family:'Unbounded';font-weight:700;font-size:clamp(26px,3.2vw,42px);letter-spacing:-.02em;line-height:1.12;margin:14px 0 0;}
.kcp__sub{color:var(--muted);font-size:17px;line-height:1.6;max-width:640px;margin-top:14px;}
.kcp__hero{padding:70px 6vw 0;max-width:1280px;margin:0 auto;}
.kcp__hero-in{max-width:900px;}
.kcp__back{display:inline-block;color:var(--muted);text-decoration:none;font-size:14px;font-weight:600;margin-bottom:34px;transition:.2s;}
.kcp__back:hover{color:var(--accent);}
.kcp__hero .kcp__eyebrow{margin-bottom:18px;}
.kcp__title{font-family:'Unbounded';font-weight:800;font-size:clamp(40px,7vw,88px);letter-spacing:-.03em;line-height:1;margin-bottom:24px;}
.kcp__lead{font-size:clamp(18px,2vw,22px);line-height:1.55;color:#d8d6d1;max-width:760px;}
.kcp__facts{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:14px;overflow:hidden;margin-top:44px;}
.kcp__fact{background:var(--raise);padding:20px 22px;display:flex;flex-direction:column;gap:7px;}
.kcp__fact span{font-size:12px;color:var(--faint);text-transform:uppercase;letter-spacing:.06em;}
.kcp__fact b{font-family:'Unbounded';font-weight:600;font-size:14px;line-height:1.3;}
.kcp__cover{margin:48px auto 0;max-width:1280px;aspect-ratio:16/8;border-radius:20px;}
.kcp__sec{max-width:1080px;margin:0 auto;padding:64px 6vw;}
.kcp__grid2{display:grid;grid-template-columns:0.85fr 1.15fr;gap:48px;align-items:start;}
.kcp__prose p{color:#c9c7c2;font-size:17px;margin-bottom:16px;}
.kcp__prose p:last-child{margin-bottom:0;}
.kcp__prose b{color:var(--text);font-weight:600;}
.kcp__callout{background:linear-gradient(135deg,rgba(109,93,251,.10),rgba(109,93,251,.02));border:1px solid rgba(109,93,251,.3);border-radius:18px;padding:40px 44px;}
.kcp__callout-k{font-family:'Unbounded';font-size:12px;letter-spacing:.14em;color:var(--accent);margin-bottom:14px;}
.kcp__callout-t{font-family:'Unbounded';font-weight:600;font-size:clamp(20px,2.4vw,30px);line-height:1.35;letter-spacing:-.01em;}
.kcp__timeline{list-style:none;margin-top:44px;display:flex;flex-direction:column;gap:26px;}
.kcp__step{display:grid;grid-template-columns:88px 1fr;gap:26px;background:var(--raise);border:1px solid var(--border);border-radius:18px;padding:30px 32px;transition:.25s;}
.kcp__step:hover{border-color:rgba(109,93,251,.4);}
.kcp__step-num{font-family:'Unbounded';font-weight:700;font-size:34px;color:var(--accent);line-height:1;opacity:.85;}
.kcp__step-body h3{font-family:'Unbounded';font-weight:600;font-size:22px;letter-spacing:-.01em;margin-bottom:12px;}
.kcp__step-body p{color:#c4c2bd;font-size:16px;}
.kcp__step--next{background:transparent;border-style:dashed;}
.kcp__step--next .kcp__step-num{opacity:1;}
.kcp__ph{position:relative;background:repeating-linear-gradient(45deg,#141416,#141416 12px,#17171a 12px,#17171a 24px);border:2px dashed #38383e;border-radius:14px;min-height:150px;display:flex;align-items:center;justify-content:center;text-align:center;}
.kcp__ph-label{color:#8a8a90;font-size:13px;font-weight:600;line-height:1.5;padding:16px;}
.kcp__ph-label small{color:var(--faint);font-weight:500;}
.kcp__ph--wide{margin-top:18px;aspect-ratio:16/8;min-height:0;}
.kcp__ph--grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:18px;background:none;border:none;padding:0;}
.kcp__ph--grid .kcp__ph{aspect-ratio:4/3;min-height:0;}
.kcp__cover.kcp__ph{aspect-ratio:16/8;}
.kcp__ba{position:relative;margin-top:20px;aspect-ratio:16/9;border-radius:16px;overflow:hidden;border:1px solid var(--border);user-select:none;}
.kcp__ba-after,.kcp__ba-before{position:absolute;inset:0;border-radius:0;border:none;}
.kcp__ba-before{width:100%;clip-path:inset(0 50% 0 0);}
.kcp__ba-handle{position:absolute;top:0;bottom:0;left:50%;width:2px;background:var(--accent);cursor:ew-resize;transform:translateX(-1px);}
.kcp__ba-handle span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:40px;height:40px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(0,0,0,.4);}
.kcp__ba-handle span::before{content:'⟷';color:#000;font-size:18px;font-weight:700;}
.kcp__ba-tag{position:absolute;top:14px;font-family:'Unbounded';font-size:11px;letter-spacing:.1em;background:rgba(0,0,0,.6);padding:5px 11px;border-radius:6px;}
.kcp__ba-tag--l{left:14px;}
.kcp__ba-tag--r{right:14px;}
.kcp__ba-hint{text-align:center;color:var(--faint);font-size:13px;margin-top:12px;}
.kcp__result-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:34px;}
.kcp__rcard{background:var(--raise);border:1px solid var(--border);border-radius:16px;padding:26px 28px;}
.kcp__rc-t{font-family:'Unbounded';font-weight:600;font-size:18px;color:var(--accent);margin-bottom:10px;}
.kcp__rcard p{color:#c4c2bd;font-size:15px;}
.kcp__chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;}
.kcp__chips span{font-family:'Manrope';font-weight:600;font-size:14px;color:var(--text);background:rgba(109,93,251,.08);border:1px solid rgba(109,93,251,.4);border-radius:8px;padding:10px 16px;}
.kcp__video{margin-top:24px;aspect-ratio:16/9;border-radius:18px;overflow:hidden;border:1px solid var(--border);background:#000;}
.kcp__video iframe{width:100%;height:100%;border:none;}
.kcp__cta{max-width:900px;margin:20px auto 0;padding:80px 6vw 96px;text-align:center;}
.kcp__cta h2{font-family:'Unbounded';font-weight:700;font-size:clamp(26px,3.4vw,42px);letter-spacing:-.02em;margin-bottom:16px;}
.kcp__cta p{color:var(--muted);font-size:18px;margin-bottom:30px;}
.kcp__cta-btn{display:inline-block;background:var(--accent);color:#fff;text-decoration:none;font-family:'Manrope';font-weight:700;font-size:16px;padding:18px 38px;border-radius:10px;transition:.25s;}
.kcp__cta-btn:hover{transform:translateY(-2px);box-shadow:0 14px 34px var(--glow);}
@media (max-width:820px){
  .kcp__facts{grid-template-columns:1fr 1fr;}
  .kcp__grid2{grid-template-columns:1fr;gap:20px;}
  .kcp__step{grid-template-columns:1fr;gap:14px;padding:24px 22px;}
  .kcp__step-num{font-size:28px;}
  .kcp__result-grid{grid-template-columns:1fr;}
  .kcp__ph--grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:480px){
  .kcp__hero{padding:48px 20px 0;}
  .kcp__sec{padding:48px 20px;}
  .kcp__facts{grid-template-columns:1fr;}
  .kcp__callout{padding:28px 24px;}
}
.kcp [data-img].kcp--filled,.kcp [data-video].kcp--filled{background:none;border:none;}
.kcp [data-img] img,.kcp [data-video] img{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit;}
.kcp [data-fit="contain"] img{object-fit:contain;background:#0f0f11;padding:6%;}
.kcp [data-video].kcp--filled iframe{width:100%;height:100%;border:none;display:block;}
.kcp__ph.kcp--filled{padding:0;}
.kcp__chapter{background:linear-gradient(135deg,rgba(109,93,251,.10),rgba(109,93,251,.02))!important;border-color:rgba(109,93,251,.4)!important;}
.kcp__chapter .kcp__step-num{font-size:22px;}
/* Благодарственное письмо и блок «Другие кейсы» */
.kcp__letter{margin-top:26px;max-width:440px}
.kcp__letter img{display:block;width:100%;height:auto;border-radius:14px;border:1px solid var(--border)}
.kcp__more{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:28px}
.kcp__more-card{display:block;background:var(--raise);border:1px solid var(--border);border-radius:16px;padding:24px 26px;text-decoration:none;transition:.2s}
.kcp__more-card:hover{border-color:var(--accent)}
.kcp__more-card span{display:block;font-size:12px;letter-spacing:2px;color:var(--accent);text-transform:uppercase;margin-bottom:10px}
.kcp__more-card b{display:block;font-family:'Unbounded',sans-serif;font-weight:700;font-size:22px;line-height:1.2;color:var(--text);margin-bottom:8px}
.kcp__more-card i{font-style:normal;font-size:15px;color:var(--muted)}
@media (max-width:640px){.kcp__more{grid-template-columns:1fr}}
</style>
<script>
(function(){
  var C=window.KORS_CASE||{}; var IMG=C.images||{}, VID=C.videos||{};
  document.querySelectorAll('.kcp [data-video]').forEach(function(el){
    var id=VID[el.getAttribute('data-video')];
    if(id){ el.classList.add('kcp--filled'); el.innerHTML='<iframe src="https://kinescope.io/embed/'+id+'" allow="autoplay; fullscreen; encrypted-media; picture-in-picture" allowfullscreen frameborder="0"></iframe>'; el.removeAttribute('data-img'); }
  });
  document.querySelectorAll('.kcp [data-img]').forEach(function(el){
    var url=IMG[el.getAttribute('data-img')];
    if(url){ el.classList.add('kcp--filled'); el.innerHTML='<img src="'+url+'" alt="">'; }
  });
})();
(function(){
  var ba=document.getElementById('kcpBA'); if(!ba) return;
  var before=document.getElementById('kcpBABefore');
  var handle=document.getElementById('kcpBAHandle');
  var dragging=false;
  function setPos(clientX){
    var r=ba.getBoundingClientRect();
    var x=Math.max(0,Math.min(clientX-r.left,r.width));
    var pct=(x/r.width)*100;
    before.style.clipPath='inset(0 '+(100-pct)+'% 0 0)';
    handle.style.left=pct+'%';
  }
  handle.addEventListener('mousedown',function(){dragging=true;});
  window.addEventListener('mouseup',function(){dragging=false;});
  window.addEventListener('mousemove',function(e){ if(dragging) setPos(e.clientX); });
  handle.addEventListener('touchstart',function(){dragging=true;},{passive:true});
  window.addEventListener('touchend',function(){dragging=false;});
  window.addEventListener('touchmove',function(e){ if(dragging&&e.touches[0]) setPos(e.touches[0].clientX); },{passive:true});
  ba.addEventListener('click',function(e){ setPos(e.clientX); });
})();
</script>

rec2709838401 (28285 симв.) - /case-vistex 168797509 - кейс целиком

<!-- ============================================================
     KORS · КЕЙС · ВИСТЕКС
     Заполнение фото/видео - только в списке KORS_CASE ниже.
     ============================================================ -->
<script>
window.KORS_CASE = {
  images: {
    cover:     'https://static.tildacdn.com/tild3664-3263-4134-a264-346265333031/vx-cover-a-zavod.jpg',   // обложка вверху 2:1, стоп-кадр из фильма о заводе
    email:     '',   // дизайн письма со встроенным видео (скрин)
    label1:    '',   // концепт этикетки/салфетки 1 (мультяшная стилистика)
    label2:    '',   // концепт этикетки/салфетки 2
    siteSoon:  ''    // макет сайта (в планах) - слот скрыт в разметке
  },
  // Концепты упаковки салфеток. Если массив пуст, шаг 03 показывает два одиночных слота label1/label2.
  labels: [
    'https://static.tildacdn.com/tild3961-3833-4932-a163-313038643335/vx-salfetki-pylesos.jpg',
    'https://static.tildacdn.com/tild3134-3133-4266-a566-636434663239/vx-salfetki-enot.jpg',
    'https://static.tildacdn.com/tild6361-3032-4439-b530-376236353062/vx-salfetki-pyatna.jpg',
    'https://static.tildacdn.com/tild3330-3533-4134-b432-373062633630/vx-salfetki-kuhnya.jpg'
  ],
  videos: {
    main:  'fv7FAnLfbLaDaNJLtSQ74H'   // главное видео о заводе (стоит наш ролик)
  }
};
</script>

<div class="kcp">
<header class="kcp__hero">
    <div class="kcp__hero-in">
      <a class="kcp__back" href="/#rec2667018101">← Все проекты</a>
      <div class="kcp__eyebrow">КЕЙС · ПРОИЗВОДСТВО · ВИДЕО</div>
      <h1 class="kcp__title">Вистекс</h1>
      <div class="kcp__tags"><span class="kcp__tag">Видео</span><span class="kcp__tag">Дизайн</span></div>
      <p class="kcp__lead">Как уложить многопрофильное производство в трёхминутный ролик - и превратить его в рабочий инструмент отдела продаж.</p>
      <div class="kcp__facts">
        <div class="kcp__fact"><span>Сфера</span><b>Нетканые материалы · B2B</b></div>
        <div class="kcp__fact"><span>С чего начали</span><b>Видео о заводе</b></div>
        <div class="kcp__fact"><span>Результат</span><b>Ролик работает в продажах</b></div>
        <div class="kcp__fact"><span>Дальше</span><b>Этикетки, салфетки, сайт</b></div>
      </div>
    </div>
    <div class="kcp__cover kcp__ph" data-img="cover"><div class="kcp__ph-label">📷 Обложка: производство / нетканые полотна (2:1)</div></div>
  </header>
  <section class="kcp__sec">
    <div class="kcp__grid2">
      <div><div class="kcp__kick">- О КОМПАНИИ</div><h2 class="kcp__h2">Большой завод и продукция для разных отраслей</h2></div>
      <div class="kcp__prose">
        <p>«Вистекс» - один из крупнейших производителей нетканых полотен в европейской части России (работает с 1992 года, завод в подмосковном Кудинове). Продукция идёт в разные отрасли промышленности: геотекстиль, материалы для обуви и мебели, для автопрома, напольных покрытий, протирочных салфеток, фильтров и другие.</p>
        <p>Производство мощное и разнообразное - но именно в этом сложность: <b>рассказать клиенту про все направления и масштаб</b> коротко и понятно почти невозможно, если делать это на словах.</p>
      </div>
    </div>
  </section>
  <section class="kcp__sec">
    <div class="kcp__callout">
      <div class="kcp__callout-k">ЗАДАЧА</div>
      <div class="kcp__callout-t">За несколько минут показать масштаб завода и все направления так, чтобы клиент увидел: здесь закроют его задачу - какой бы она ни была.</div>
    </div>
  </section>
  <section class="kcp__sec">
    <div class="kcp__kick">- КАК ШЛА РАБОТА</div>
    <h2 class="kcp__h2">От ролика о заводе - к письму для продаж</h2>
    <p class="kcp__sub">Начали с одного большого видео о производстве - и оно стало рабочим инструментом, который принёс заводу конкретный результат.</p>
    <ol class="kcp__timeline">
      <li class="kcp__step"><div class="kcp__step-num">01</div><div class="kcp__step-body">
        <h3>Видео о заводе: производство за 3 минуты</h3>
        <p>Сняли ключевой ролик о производстве: за три минуты показали производство и линейку продукции завода. Плотно, наглядно, без воды - уровень продакшена под стать масштабу компании.</p>
        <div class="kcp__ph kcp__ph--wide" data-video="main"><div class="kcp__ph-label">🎬 Видео о заводе (Kinescope)</div></div>
      </div></li>
      <li class="kcp__step"><div class="kcp__step-num">02</div><div class="kcp__step-body">
        <h3>Дизайн письма со встроенным видео</h3>
        <p>Ролик начали отправлять клиентам - и мы собрали под него готовое HTML-письмо для рассылки коммерческих предложений. Внутри: логотип завода, короткий текст от менеджера по развитию, превью ролика с кнопкой воспроизведения и пометка, что коммерческое предложение приложено отдельным файлом.</p>
        <p>Что изменилось в работе: <b>коммерческие предложения уходят вместе с роликом, и продукт больше не приходится объяснять текстом - клиент сразу видит завод, линии и готовую продукцию.</b></p>
        <div class="kcp__ph kcp__ph--wide" data-img="email"><div class="kcp__ph-label">✉️ дизайн письма со встроенным видео (скрин)</div></div>
      </div></li>
      <li class="kcp__step"><div class="kcp__step-num">03</div><div class="kcp__step-body">
        <h3>Дизайн этикеток и салфеток - концепты</h3>
        <p>Пошли дальше в брендинг потребительской продукции. Предложили заводу концепты дизайна этикеток и салфеток в фирменной мультяшной стилистике: нарисовали графику, написали тексты и описания - всё под ключ с нашей стороны.</p>
        <div class="kcp__gal kcp__gal--pack" data-labelgal></div>
        <div class="kcp__ph kcp__ph--grid">
          <div class="kcp__ph" data-img="label1"><div class="kcp__ph-label">🎨 концепт этикетки/салфетки 1</div></div>
          <div class="kcp__ph" data-img="label2"><div class="kcp__ph-label">🎨 концепт этикетки/салфетки 2</div></div>
        </div>
      </div></li>
      <li class="kcp__step kcp__step--next"><div class="kcp__step-num">→</div><div class="kcp__step-body">
        <h3>Что дальше</h3>
        <p>Следующий этап - сайт завода: единая витрина всех направлений с той же понятной подачей, что и в видео.</p>
        <!-- СЛОТ СКРЫТ 28.08.2026. Причина: макета сайта пока нет, заглушка оставляла пустое место. Ключ images.siteSoon в конфиге сохранён - чтобы вернуть слот, снимите этот комментарий.
        <div class="kcp__ph kcp__ph--wide" data-img="siteSoon"><div class="kcp__ph-label">макет сайта (появится)</div></div>
        -->
      </div></li>
    </ol>
  </section>
  <section class="kcp__sec">
    <div class="kcp__result">
      <div class="kcp__kick">- ЧТО ИЗМЕНИЛОСЬ</div>
      <h2 class="kcp__h2">Ролик и письмо, которые работают в продажах</h2>
      <div class="kcp__result-grid">
        <div class="kcp__rcard"><div class="kcp__rc-t">Всё производство за 3 минуты</div><p>Сложное многопрофильное производство укладывается в один понятный ролик.</p></div>
        <div class="kcp__rcard"><div class="kcp__rc-t">Продукт стали понимать</div><p>С письмом и видео клиенты сразу видят, что завод может закрыть их потребности.</p></div>
        <div class="kcp__rcard"><div class="kcp__rc-t">Продажи с видео в руках</div><p>Менеджеры отправляют коммерческие предложения вместе с роликом - завод показывают, а не пересказывают.</p></div>
        <div class="kcp__rcard"><div class="kcp__rc-t">Развитие бренда</div><p>Концепты этикеток и салфеток, впереди - сайт завода.</p></div>
      </div>
    </div>
  </section>
  <section class="kcp__sec">
    <div class="kcp__kick">- ЧТО ВОШЛО В РАБОТУ</div>
    <div class="kcp__chips">
      <span>Видеопродакшн</span><span>Съёмка производства</span><span>Сценарий ролика</span><span>Email-дизайн</span><span>Видео в письме</span><span>Концепты этикеток и салфеток</span><span>Копирайтинг</span><span>Сайт (в планах)</span>
    </div>
  </section>
  <!-- ===== ВИДЕО ПРОЕКТА (СКРЫТО) =====
     СЕКЦИЯ СКРЫТА 28.08.2026. Причина: тот же ролик уже стоит в шаге 01, на странице он дублировался.
     Разметка сохранена целиком. Чтобы вернуть секцию, снимите этот комментарий.
  <section class="kcp__sec">
    <div class="kcp__kick">- СМОТРЕТЬ</div>
    <h2 class="kcp__h2">Видео проекта</h2>
    <div class="kcp__video"><iframe src="https://kinescope.io/embed/fv7FAnLfbLaDaNJLtSQ74H" allow="autoplay; fullscreen; encrypted-media; picture-in-picture" allowfullscreen frameborder="0"></iframe></div>
  </section>
  -->
  <section class="kcp__sec">
    <div class="kcp__kick">- ОТЗЫВ</div>
    <h2 class="kcp__h2">Благодарственное письмо</h2>
    <p class="kcp__sub">ООО «Вистекс» - производитель нетканых полотен, завод в подмосковном Кудинове</p>
    <div class="kcp__letter"><img src="https://static.tildacdn.com/tild3665-6165-4336-a262-666463636263/pismo-visteks-1200.jpg" alt="Благодарственное письмо от ООО «Вистекс» команде KORS Production за фильм о производстве и дизайн материалов" loading="lazy"></div>
  </section>
  <section class="kcp__sec">
    <div class="kcp__kick">- ЕЩЁ</div>
    <h2 class="kcp__h2">Другие кейсы</h2>
    <div class="kcp__more">
      <a class="kcp__more-card" href="/case-odoevskie"><span>Кейс</span><b>Одоевские консервы</b><i>Съёмка производства и ребрендинг →</i></a>
      <a class="kcp__more-card" href="/case-invoicebox"><span>Кейс</span><b>Инвойсбокс</b><i>Видеоматериалы для платформы →</i></a>
    </div>
  </section>
  <section class="kcp__cta">
    <h2>Сложное производство? Покажем за минуты.</h2>
    <p>Упакуем ваш завод в видео и материалы, с которыми проще продавать.</p>
    <a class="kcp__cta-btn" href="#popup:zayavka">Обсудить проект →</a>
  </section>
</div>

<style>
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Unbounded:wght@400;600;700;800&display=swap');
.kcp{--bg:#0C0C0E;--raise:#141416;--card:#1B1B1F;--border:#2A2A2E;--soft:#242428;--text:#F5F3EF;--muted:#9A9A9A;--faint:#6a6a6e;--accent:#6D5DFB;--glow:rgba(109,93,251,.14);
  box-sizing:border-box;background:var(--bg);color:var(--text);font-family:'Manrope',Arial,sans-serif;-webkit-font-smoothing:antialiased;}
.kcp *{box-sizing:border-box;margin:0;padding:0;}
.kcp p{line-height:1.65;}
.kcp__eyebrow,.kcp__kick{font-family:'Unbounded';font-size:12px;letter-spacing:.14em;color:var(--accent);}
.kcp__h2{font-family:'Unbounded';font-weight:700;font-size:clamp(26px,3.2vw,42px);letter-spacing:-.02em;line-height:1.12;margin:14px 0 0;}
.kcp__sub{color:var(--muted);font-size:17px;line-height:1.6;max-width:640px;margin-top:14px;}
.kcp__hero{padding:70px 6vw 0;max-width:1280px;margin:0 auto;}
.kcp__hero-in{max-width:900px;}
.kcp__back{display:inline-block;color:var(--muted);text-decoration:none;font-size:14px;font-weight:600;margin-bottom:34px;transition:.2s;}
.kcp__back:hover{color:var(--accent);}
.kcp__hero .kcp__eyebrow{margin-bottom:18px;}
.kcp__title{font-family:'Unbounded';font-weight:800;font-size:clamp(40px,7vw,88px);letter-spacing:-.03em;line-height:1;margin-bottom:24px;}
.kcp__lead{font-size:clamp(18px,2vw,22px);line-height:1.55;color:#d8d6d1;max-width:760px;}
.kcp__tags{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 18px;}
.kcp__tag{font-family:'Manrope',Arial,sans-serif;font-weight:600;font-size:9px;line-height:1;text-transform:uppercase;letter-spacing:.14em;color:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.22);border-radius:4px;padding:5px 8px;white-space:nowrap;}
@media (max-width:480px){ .kcp__tag{font-size:8px;padding:5px 7px;} .kcp__tags{gap:5px;margin-bottom:14px;} }
.kcp__facts{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:14px;overflow:hidden;margin-top:44px;}
.kcp__fact{background:var(--raise);padding:20px 22px;display:flex;flex-direction:column;gap:7px;}
.kcp__fact span{font-size:12px;color:var(--faint);text-transform:uppercase;letter-spacing:.06em;}
.kcp__fact b{font-family:'Unbounded';font-weight:600;font-size:14px;line-height:1.3;}
.kcp__cover{margin:48px auto 0;max-width:1280px;aspect-ratio:16/8;border-radius:20px;}
.kcp__sec{max-width:1080px;margin:0 auto;padding:64px 6vw;}
.kcp__grid2{display:grid;grid-template-columns:0.85fr 1.15fr;gap:48px;align-items:start;}
.kcp__prose p{color:#c9c7c2;font-size:17px;margin-bottom:16px;}
.kcp__prose p:last-child{margin-bottom:0;}
.kcp__prose b{color:var(--text);font-weight:600;}
.kcp__callout{background:linear-gradient(135deg,rgba(109,93,251,.10),rgba(109,93,251,.02));border:1px solid rgba(109,93,251,.3);border-radius:18px;padding:40px 44px;}
.kcp__callout-k{font-family:'Unbounded';font-size:12px;letter-spacing:.14em;color:var(--accent);margin-bottom:14px;}
.kcp__callout-t{font-family:'Unbounded';font-weight:600;font-size:clamp(20px,2.4vw,30px);line-height:1.35;letter-spacing:-.01em;}
.kcp__timeline{list-style:none;margin-top:44px;display:flex;flex-direction:column;gap:26px;}
.kcp__step{display:grid;grid-template-columns:88px 1fr;gap:26px;background:var(--raise);border:1px solid var(--border);border-radius:18px;padding:30px 32px;transition:.25s;}
.kcp__step:hover{border-color:rgba(109,93,251,.4);}
.kcp__step-num{font-family:'Unbounded';font-weight:700;font-size:34px;color:var(--accent);line-height:1;opacity:.85;}
.kcp__step-body h3{font-family:'Unbounded';font-weight:600;font-size:22px;letter-spacing:-.01em;margin-bottom:12px;}
.kcp__step-body p{color:#c4c2bd;font-size:16px;}
.kcp__step--next{background:transparent;border-style:dashed;}
.kcp__step--next .kcp__step-num{opacity:1;}
.kcp__ph{position:relative;background:repeating-linear-gradient(45deg,#141416,#141416 12px,#17171a 12px,#17171a 24px);border:2px dashed #38383e;border-radius:14px;min-height:150px;display:flex;align-items:center;justify-content:center;text-align:center;}
.kcp__ph-label{color:#8a8a90;font-size:13px;font-weight:600;line-height:1.5;padding:16px;}
.kcp__ph-label small{color:var(--faint);font-weight:500;}
.kcp__ph--wide{margin-top:18px;aspect-ratio:16/8;min-height:0;}
.kcp__ph--grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:18px;background:none;border:none;padding:0;}
.kcp__ph--grid .kcp__ph{aspect-ratio:4/3;min-height:0;}
.kcp__cover.kcp__ph{aspect-ratio:16/8;}
.kcp__ba{position:relative;margin-top:20px;aspect-ratio:16/9;border-radius:16px;overflow:hidden;border:1px solid var(--border);user-select:none;}
.kcp__ba-after,.kcp__ba-before{position:absolute;inset:0;border-radius:0;border:none;}
.kcp__ba-before{width:100%;clip-path:inset(0 50% 0 0);}
.kcp__ba-handle{position:absolute;top:0;bottom:0;left:50%;width:2px;background:var(--accent);cursor:ew-resize;transform:translateX(-1px);}
.kcp__ba-handle span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:40px;height:40px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(0,0,0,.4);}
.kcp__ba-handle span::before{content:'⟷';color:#000;font-size:18px;font-weight:700;}
.kcp__ba-tag{position:absolute;top:14px;font-family:'Unbounded';font-size:11px;letter-spacing:.1em;background:rgba(0,0,0,.6);padding:5px 11px;border-radius:6px;}
.kcp__ba-tag--l{left:14px;}
.kcp__ba-tag--r{right:14px;}
.kcp__ba-hint{text-align:center;color:var(--faint);font-size:13px;margin-top:12px;}
.kcp__result-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:34px;}
.kcp__rcard{background:var(--raise);border:1px solid var(--border);border-radius:16px;padding:26px 28px;}
.kcp__rc-t{font-family:'Unbounded';font-weight:600;font-size:18px;color:var(--accent);margin-bottom:10px;}
.kcp__rcard p{color:#c4c2bd;font-size:15px;}
.kcp__chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;}
.kcp__chips span{font-family:'Manrope';font-weight:600;font-size:14px;color:var(--text);background:rgba(109,93,251,.08);border:1px solid rgba(109,93,251,.4);border-radius:8px;padding:10px 16px;}
.kcp__video{margin-top:24px;aspect-ratio:16/9;border-radius:18px;overflow:hidden;border:1px solid var(--border);background:#000;}
.kcp__video iframe{width:100%;height:100%;border:none;}
.kcp__cta{max-width:900px;margin:20px auto 0;padding:80px 6vw 96px;text-align:center;}
.kcp__cta h2{font-family:'Unbounded';font-weight:700;font-size:clamp(26px,3.4vw,42px);letter-spacing:-.02em;margin-bottom:16px;}
.kcp__cta p{color:var(--muted);font-size:18px;margin-bottom:30px;}
.kcp__cta-btn{display:inline-block;background:var(--accent);color:#fff;text-decoration:none;font-family:'Manrope';font-weight:700;font-size:16px;padding:18px 38px;border-radius:10px;transition:.25s;}
.kcp__cta-btn:hover{transform:translateY(-2px);box-shadow:0 14px 34px var(--glow);}
@media (max-width:820px){
  .kcp__facts{grid-template-columns:1fr 1fr;}
  .kcp__grid2{grid-template-columns:1fr;gap:20px;}
  .kcp__step{grid-template-columns:1fr;gap:14px;padding:24px 22px;}
  .kcp__step-num{font-size:28px;}
  .kcp__result-grid{grid-template-columns:1fr;}
  .kcp__ph--grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:480px){
  .kcp__hero{padding:48px 20px 0;}
  .kcp__sec{padding:48px 20px;}
  .kcp__facts{grid-template-columns:1fr;}
  .kcp__callout{padding:28px 24px;}
}
.kcp [data-img].kcp--filled,.kcp [data-video].kcp--filled{background:none;border:none;}
.kcp [data-img] img,.kcp [data-video] img{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit;}
.kcp [data-fit="contain"] img{object-fit:contain;background:#0f0f11;padding:6%;}
.kcp [data-video].kcp--filled iframe{width:100%;height:100%;border:none;display:block;}
.kcp__ph.kcp--filled{padding:0;}

.kcp__letter{margin-top:26px;max-width:440px;}
.kcp__letter img{display:block;width:100%;height:auto;border-radius:14px;border:1px solid var(--border);}
.kcp__more{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:28px;}
.kcp__more-card{display:block;background:var(--raise);border:1px solid var(--border);border-radius:16px;padding:24px 26px;text-decoration:none;transition:.2s;}
.kcp__more-card:hover{border-color:var(--accent);}
.kcp__more-card span{display:block;font-size:12px;letter-spacing:2px;color:var(--accent);text-transform:uppercase;margin-bottom:10px;}
.kcp__more-card b{display:block;font-family:Unbounded,sans-serif;font-weight:700;font-size:22px;line-height:1.2;color:var(--text);margin-bottom:8px;}
.kcp__more-card i{font-style:normal;font-size:15px;color:var(--muted);}
.kcp--filled img{cursor:zoom-in;}
.kcp__letter img{cursor:zoom-in;}
.kcp__lb{position:fixed;inset:0;z-index:99999;display:none;align-items:center;justify-content:center;padding:64px 40px;}
.kcp__lb.open{display:flex;}
.kcp__lbbd{position:absolute;inset:0;background:rgba(4,4,6,.9);backdrop-filter:blur(4px);}
.kcp__lbbox{position:relative;max-width:min(1100px,100%);display:flex;align-items:center;justify-content:center;}
.kcp__lbbox img{display:block;max-width:100%;max-height:calc(100vh - 170px);width:auto;height:auto;border-radius:10px;background:#0f0f11;}
.kcp__lbx{position:absolute;top:-48px;right:0;width:38px;height:38px;border-radius:9px;background:var(--raise);border:1px solid var(--border);color:var(--text);font:20px/1 Arial,sans-serif;cursor:pointer;padding:0;}
.kcp__lbx:hover{border-color:var(--accent);color:var(--accent);}
.kcp__lbnav{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;background:var(--raise);border:1px solid var(--border);color:var(--text);font:20px/1 Arial,sans-serif;cursor:pointer;padding:0;}
.kcp__lbnav.prev{left:-58px;}
.kcp__lbnav.next{right:-58px;}
.kcp__lbnav:hover{border-color:var(--accent);color:var(--accent);}
.kcp__lbcap{position:absolute;left:0;right:0;bottom:-38px;text-align:center;color:var(--muted);font-size:14px;}
@media (max-width:640px){.kcp__lb{padding:56px 14px;}.kcp__lbnav.prev{left:2px;}.kcp__lbnav.next{right:2px;}.kcp__more{grid-template-columns:1fr;}.kcp__letter{max-width:100%;}}

.kcp__gal{margin-top:18px;}
.kcp__galhead{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:12px;}
.kcp__galtabs{display:inline-flex;gap:4px;background:var(--soft);border:1px solid var(--border);border-radius:9px;padding:4px;}
.kcp__galtab{padding:7px 18px;border:none;background:none;color:var(--muted);font-family:'Manrope',Arial,sans-serif;font-weight:600;font-size:13px;line-height:1;letter-spacing:1.2px;border-radius:6px;cursor:pointer;transition:.2s;}
.kcp__galtab:hover{color:var(--text);}
.kcp__galtab.is-on{background:var(--accent);color:#fff;}
.kcp__galnote{margin-top:14px;font-size:13px;line-height:1.5;color:var(--muted);letter-spacing:.3px;}
.kcp__galnav{display:flex;gap:8px;flex-shrink:0;}
.kcp__galarrow{width:40px;height:40px;border:1px solid var(--border);background:var(--raise);border-radius:4px;color:var(--text);font:20px/1 Arial,sans-serif;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.2s;padding:0;}
.kcp__galarrow:hover{border-color:var(--accent);color:var(--accent);}
.kcp__galarrow:disabled{opacity:.3;cursor:default;border-color:var(--border);color:var(--text);}
.kcp__galtrack{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:4px;}
.kcp__galtrack::-webkit-scrollbar{display:none;}
.kcp__galcard{flex:0 0 calc((100% - 24px)/3);scroll-snap-align:start;display:block;padding:0;margin:0;border:1px solid var(--border);background:#0f0f11;border-radius:10px;overflow:hidden;cursor:zoom-in;aspect-ratio:3/4;transition:.2s;font:inherit;}
.kcp__galcard:hover{border-color:var(--accent);}
.kcp__galcard img{width:100%;height:100%;object-fit:contain;display:block;}
@media (max-width:820px){.kcp__galcard{flex:0 0 calc((100% - 12px)/2);}}
@media (max-width:480px){.kcp__galcard{flex:0 0 76%;}.kcp__galnav{display:none;}.kcp__galhead{margin-bottom:10px;}}
</style>
<script>
(function(){
  var C=window.KORS_CASE||{}; var IMG=C.images||{}, VID=C.videos||{};
  var ALT={cover:'Завод «Вистекс» - производство нетканых полотен, кадр из фильма KORS Production',email:'Дизайн письма со встроенным видео для рассылки коммерческих предложений завода «Вистекс»',label1:'Концепт дизайна этикетки для продукции завода «Вистекс»',label2:'Концепт дизайна протирочных салфеток для завода «Вистекс»',siteSoon:'Макет сайта завода «Вистекс»'};
  document.querySelectorAll('.kcp [data-video]').forEach(function(el){
    var id=VID[el.getAttribute('data-video')];
    if(id){ el.classList.add('kcp--filled'); el.innerHTML='<iframe src="https://kinescope.io/embed/'+id+'" allow="autoplay; fullscreen; encrypted-media; picture-in-picture" allowfullscreen frameborder="0"></iframe>'; el.removeAttribute('data-img'); }
  });
  document.querySelectorAll('.kcp [data-img]').forEach(function(el){
    var url=IMG[el.getAttribute('data-img')];
    if(url){ el.classList.add('kcp--filled'); el.innerHTML='<img src="'+url+'" alt="'+(ALT[el.getAttribute('data-img')]||'')+'" loading="lazy">'; }
  });
})();
</script>

<script>
(function(){
  var root=document.querySelector('.kcp'); if(!root) return;
  var lb=document.createElement('div'); lb.className='kcp__lb';
  lb.innerHTML='<div class="kcp__lbbd"></div><div class="kcp__lbbox"><button class="kcp__lbx" type="button" aria-label="Закрыть">×</button><button class="kcp__lbnav prev" type="button" aria-label="Предыдущий кадр">‹</button><img alt=""><button class="kcp__lbnav next" type="button" aria-label="Следующий кадр">›</button><div class="kcp__lbcap"></div></div>';
  document.body.appendChild(lb);
  var pic=lb.querySelector('.kcp__lbbox img'), cap=lb.querySelector('.kcp__lbcap');
  var prev=lb.querySelector('.prev'), next=lb.querySelector('.next');
  var list=[], idx=0;
  function norm(el){ return {src: el.currentSrc||el.src, alt: el.alt||''}; }
  function collect(){ list=[].slice.call(root.querySelectorAll('.kcp--filled img, .kcp__letter img')).map(norm); }
  function show(){ var it=list[idx]; if(!it) return; pic.src=it.src; pic.alt=it.alt||''; var multi=list.length>1; cap.textContent=multi?(idx+1)+' из '+list.length:''; prev.style.display=multi?'':'none'; next.style.display=multi?'':'none'; }
  function open(i){ idx=i; show(); lb.classList.add('open'); document.documentElement.style.overflow='hidden'; }
  function close(){ lb.classList.remove('open'); pic.src=''; document.documentElement.style.overflow=''; }
  function step(d){ if(!list.length) return; idx=(idx+d+list.length)%list.length; show(); }
  root.addEventListener('click',function(e){ var t=e.target; if(!t || t.tagName!=='IMG') return; if(!t.closest('.kcp--filled, .kcp__letter')) return; var els=[].slice.call(root.querySelectorAll('.kcp--filled img, .kcp__letter img')); var i=els.indexOf(t); if(i<0) return; e.preventDefault(); collect(); open(i); });
  window.kcpLightbox={ open:function(arr,i,lbl){ if(!arr||!arr.length) return; list=arr.map(function(u,k){ return {src:u, alt:(lbl||'Кадр')+' '+(k+1)+' из '+arr.length}; }); open(i||0); } };
  lb.querySelector('.kcp__lbbd').addEventListener('click',close);
  lb.querySelector('.kcp__lbx').addEventListener('click',close);
  prev.addEventListener('click',function(){ step(-1); });
  next.addEventListener('click',function(){ step(1); });
  document.addEventListener('keydown',function(e){ if(!lb.classList.contains('open')) return; if(e.key==='Escape') close(); else if(e.key==='ArrowLeft') step(-1); else if(e.key==='ArrowRight') step(1); });
})();
</script>

<script>
(function(){
  var C=window.KORS_CASE||{};
  var ALT=['Концепт упаковки протирочных салфеток «ПылеSOS» для завода «Вистекс»: коты-супергерои на синей этикетке','Концепт упаковки вискозных салфеток «Вистекс» 30х40 см: енот в лабораторном халате на синей этикетке','Концепт упаковки вискозных салфеток «Вистекс» 30х40 см: салфетка-супергерой против пятен на фиолетовой этикетке','Концепт упаковки вискозных салфеток «Вистекс» 30х40 см: салфетки-персонажи на кухне на синей этикетке'];
  function makeGallery(gal, SETS, noteFn, altFn, label, fbSel){
    if(!gal || !SETS.length) return;
    if(fbSel){ var ph=gal.parentNode.querySelector(fbSel); if(ph) ph.style.display='none'; }
    var tabs=SETS.length>1 ? '<div class="kcp__galtabs" role="tablist">'+SETS.map(function(s,i){return '<button class="kcp__galtab'+(i===0?' is-on':'')+'" data-lang="'+s.id+'" role="tab" aria-selected="'+(i===0)+'">'+s.label+'</button>';}).join('')+'</div>' : '<span></span>';
    gal.innerHTML='<div class="kcp__galhead">'+tabs+'<div class="kcp__galnav"><button class="kcp__galarrow" type="button" data-gprev aria-label="Назад">&#8249;</button><button class="kcp__galarrow" type="button" data-gnext aria-label="Вперёд">&#8250;</button></div></div><div class="kcp__galtrack"></div><div class="kcp__galnote"></div>';
    var track=gal.querySelector('.kcp__galtrack'), note=gal.querySelector('.kcp__galnote');
    var gp=gal.querySelector('[data-gprev]'), gn=gal.querySelector('[data-gnext]');
    var cur=SETS[0];
    function fill(){
      var h='';
      for(var i=0;i<cur.items.length;i++){ h+='<button class="kcp__galcard" type="button" data-gi="'+i+'" aria-label="'+label+' '+(i+1)+' из '+cur.items.length+'"><img src="'+cur.items[i]+'" alt="'+altFn(i,cur.items.length,cur)+'" loading="lazy"></button>'; }
      track.innerHTML=h; track.scrollLeft=0; note.textContent=noteFn(SETS,cur); setTimeout(upd,60);
    }
    function step(){ var c=track.querySelector('.kcp__galcard'); return c?c.offsetWidth+12:320; }
    function upd(){ gp.disabled=track.scrollLeft<8; gn.disabled=track.scrollLeft+track.clientWidth>=track.scrollWidth-8; }
    gp.addEventListener('click',function(){ track.scrollLeft-=step(); });
    gn.addEventListener('click',function(){ track.scrollLeft+=step(); });
    track.addEventListener('scroll',upd); window.addEventListener('resize',upd);
    track.addEventListener('click',function(e){ var b=e.target&&e.target.closest?e.target.closest('.kcp__galcard'):null; if(!b) return; if(window.kcpLightbox) window.kcpLightbox.open(cur.items, parseInt(b.getAttribute('data-gi'),10)||0, label); });
    fill();
  }
  makeGallery(document.querySelector('.kcp [data-labelgal]'),
    [{id:'pack',label:'Упаковка',items:C.labels||[]}].filter(function(x){return x.items&&x.items.length;}),
    function(){ return 'Концепты упаковки протирочных салфеток. Нажмите на кадр, чтобы рассмотреть'; },
    function(i){ return ALT[i]||('Концепт упаковки салфеток «Вистекс» '+(i+1)); },
    'Концепт', '.kcp__ph--grid');
})();
</script>

BACKUP 2026-08-30 №4

rec3238523101 (5984 симв.) - /sites 201483509 - блок «Процесс»

<style>
/* ---------- Процесс ---------- */
.step{background:var(--card);border-radius:var(--r-md);padding:36px;margin-top:18px;display:grid;grid-template-columns:96px 1fr .9fr;gap:32px;align-items:start;box-shadow:0 0 0 1px var(--line)}
.step-num{font-weight:700;font-size:54px;line-height:1;color:var(--accent-txt);letter-spacing:-.04em}
.step h3{font-size:clamp(20px,2vw,26px);margin-bottom:12px}
.step p{color:var(--muted);font-size:15.5px}
.step .step-res{margin-top:16px;font-size:14.5px;color:var(--ink)}
.step .step-res b{color:var(--accent-txt);font-weight:700}
.step > div:last-child:not(.step-media){grid-column:2 / -1}
/* Слоты step-media вернули 30.08.2026: шаги 02-05 с иллюстрациями, шаг 06 (Трафик) пока без картинки. */
.step-media{align-self:start}
.step-shot{display:block;width:100%;height:auto;border-radius:14px;box-shadow:0 0 0 1px var(--line);background:#0f0f11}
.vs{display:grid;grid-template-columns:1fr 1fr;gap:12px;min-height:190px}
.vs-col{border-radius:20px;padding:22px;background:#0c0c0e}
.vs-col.win{background:rgba(109,93,251,.14);border:1px solid rgba(109,93,251,.4);color:#fff}
.vs-col h4{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin-bottom:12px;color:var(--muted)}
.vs-col.win h4{color:#a99cff}
.vs-col li{list-style:none;font-size:13.5px;color:var(--muted);padding:5px 0;line-height:1.45}
.vs-col.win li{color:#e8e9ea}
</style>
<section id="process" style="padding-top:0">
  <div class="container">
    <div class="eyebrow reveal">Процесс</div>
    <h2 class="reveal">6 шагов от знакомства до потока заявок</h2>
    <p class="sub reveal">Ваше участие за весь проект — 2–4 часа: ответить на вопросы и принять этапы. Остальное делаем сами.</p>
    <div style="margin-top:44px">
      <div class="step reveal">
        <div class="step-num">01</div>
        <div>
          <h3>Погружение в бизнес</h3>
          <p>Начинаем не с «какие цвета нравятся», а с глубинного интервью на 2 часа: продукт, сделки, клиенты, цифры, сильные и слабые места.</p>
          <p class="step-res"><b>Итог:</b> понимаем, за что вам платят клиенты — и что покажем на сайте.</p>
        </div>
        <div class="step-media vs">
          <div class="vs-col">
            <h4>Обычный бриф</h4>
            <ul><li>— Какие цвета нравятся?</li><li>— Пришлёте примеры сайтов?</li><li>— Текст и ТЗ есть?</li></ul>
          </div>
          <div class="vs-col win">
            <h4>Интервью KORS</h4>
            <ul><li>— 100+ вопросов о бизнесе</li><li>— Разбор реальных сделок</li><li>— Упор на маркетинг</li></ul>
          </div>
        </div>
      </div>
      <div class="step reveal">
        <div class="step-num">02</div>
        <div>
          <h3>Анализ аудитории и конкурентов</h3>
          <p>Разбираем 8–10 конкурентов по ключевым критериям. Сегментируем аудиторию, выписываем страхи, желания и возражения по отзывам, форумам и картам.</p>
          <p class="step-res"><b>Итог:</b> документ со смыслами, на котором строится весь сайт.</p>
        </div>
        <div class="step-media"><img class="step-shot" src="https://static.tildacdn.com/tild3838-3862-4163-b863-643363666532/proc-analiz.jpg" alt="Таблица анализа конкурентов: участники рынка построчно, офферы, цены и выводы по каждому" loading="lazy"></div>
      </div>
      <div class="step reveal">
        <div class="step-num">03</div>
        <div>
          <h3>Структура и текст</h3>
          <p>Собираем прототип по блокам и пишем продающий текст: офер, заголовки, призывы, лид-магниты. Записываем видеопояснение логики каждого блока.</p>
          <p class="step-res"><b>Итог:</b> прототип, готовый к передаче в дизайн.</p>
        </div>
        <div class="step-media"><img class="step-shot" src="https://static.tildacdn.com/tild3433-3133-4536-a334-303935323536/proc-struktura.jpg" alt="Прототип лендинга в рабочем интерфейсе: блоки страницы разложены по экранам" loading="lazy"></div>
      </div>
      <div class="step reveal">
        <div class="step-num">04</div>
        <div>
          <h3>Дизайн</h3>
          <p>Готовим 2 варианта концепции на выбор: референсы, визуальный вектор, презентация решений — объясняем, что и почему работает на заявки, а не просто «красиво».</p>
          <p class="step-res"><b>Итог:</b> макет, который не стыдно показать партнёрам и инвесторам.</p>
        </div>
        <div class="step-media"><img class="step-shot" src="https://static.tildacdn.com/tild3732-3732-4230-a630-363761373135/proc-dizayn.jpg" alt="Две концепции первого экрана для одного проекта, подготовленные на выбор" loading="lazy"></div>
      </div>
      <div class="step reveal">
        <div class="step-num">05</div>
        <div>
          <h3>Сборка и запуск</h3>
          <p>Верстаем, адаптируем под мобильные, подключаем домен, формы, CRM и уведомления. Настраиваем Яндекс Метрику, Вебмастер и базовое SEO.</p>
          <p class="step-res"><b>Итог:</b> живой сайт, который принимает заявки без вашего участия.</p>
        </div>
        <div class="step-media"><img class="step-shot" src="https://static.tildacdn.com/tild6333-3433-4939-a637-366161323538/proc-zapusk.jpg" alt="Готовый сайт в окне браузера: первый экран и блоки страницы при прокрутке" loading="lazy"></div>
      </div>
      <div class="step reveal">
        <div class="step-num">06</div>
        <div>
          <h3>Трафик</h3>
          <p>Запускаем Яндекс Директ на собранные смыслы: объявления пишутся из той же карты, что и сайт. Ведём кампании и докручиваем по цифрам, а не по ощущениям.</p>
          <p class="step-res"><b>Итог:</b> управляемый поток целевых заявок — прогнозируемый и масштабируемый.</p>
        </div>
        <!-- СЛОТ СКРЫТ 30.08.2026. Причина: картинки под шаг «Трафик» пока нет, заглушка оставляла пустое место. Чтобы вернуть слот, снимите комментарий и подставьте ссылку в src.
        <div class="step-media"><img class="step-shot" src="" alt="" loading="lazy"></div>
        -->
      </div>
    </div>
  </div>
</section>

rec2709724901 (21254 симв.) - /case-invoicebox 168789009 - кейс целиком

<!-- ============================================================
     KORS · КЕЙС · INVOICEBOX
     Заполнение фото/видео — только в списке KORS_CASE ниже.
     Картинки: ссылка в кавычки ('' = заглушка). Видео: ID Kinescope.
     ============================================================ -->
<script>
window.KORS_CASE = {
  images: {
    cover:      'https://static.tildacdn.com/tild6235-3838-4235-b430-646665666232/ib-cover-a-city.jpg',   // обложка вверху - кадр из второго ролика, Москва-Сити
    aboutShot:  '',   // «О компании» - скрин сервиса/интерфейса
    info1:      '',   // ролик «как выставить счёт» - кадр (если без видео)
    info2:      '',   // ролик «для интернет-магазинов» - кадр
    mkt:        '',   // маркетинг - скрин рекламы/статистики
    grtCover:   'https://static.tildacdn.com/tild6266-3832-4334-b066-303434623230/grt-site.jpg',   // GIARTI - первый экран сайта
    grt1:       '',   // GRT - пример
    siteSoon:   ''    // планы - макет лендингов
  },
  videos: {
    main:  '2FXfjS6hYEvLkWNKUveoBx',  // шаг 01 - первое видео о сервисе, полная версия
    v2:    '0GfobL6RnAzhPeiopXjNHS',  // шаг 02 - второе видео, «Инвойсбокс 2»
    info1: 'b66cpVCFFFVycfDvLFXFR3',  // шаг 03 - короткий ролик «выставить счёт»
    info2: '7akHJzKdcoSrPiHtRbRBqk'   // шаг 03 - короткий ролик «для интернет-магазинов»
  }
};
</script>

<div class="kcp">
<header class="kcp__hero">
    <div class="kcp__hero-in">
      <a class="kcp__back" href="/#rec2667018101">← Все проекты</a>
      <div class="kcp__eyebrow">КЕЙС · ФИНТЕХ · ВИДЕО + МАРКЕТИНГ</div>
      <h1 class="kcp__title">Инвойсбокс</h1>
      <p class="kcp__lead">Как объяснить сложный финтех простым языком - и почему клиент возвращался за видео, инфографикой и маркетингом, а затем доверил нам и свой второй бизнес.</p>
      <div class="kcp__facts">
        <div class="kcp__fact"><span>Сфера</span><b>Финтех · приём платежей (B2B)</b></div>
        <div class="kcp__fact"><span>С чего начали</span><b>Видео о сервисе</b></div>
        <div class="kcp__fact"><span>Где сейчас</span><b>Подготовка к продвижению + 2-й бизнес</b></div>
        <div class="kcp__fact"><span>Формат</span><b>Видео · инфографика · реклама</b></div>
      </div>
    </div>
    <div class="kcp__cover kcp__ph" data-img="cover"><div class="kcp__ph-label">📷 Обложка: кадр из видео / интерфейс сервиса (16:9)</div></div>
  </header>
  <section class="kcp__sec">
    <div class="kcp__grid2">
      <div><div class="kcp__kick">- О КОМПАНИИ</div><h2 class="kcp__h2">Мощный сервис, который сложно объяснить</h2></div>
      <div class="kcp__prose">
        <p>Инвойсбокс - сервис приёма онлайн-платежей и автоматизации выставления счетов для бизнеса. Компании выставляют и отправляют счета юридическим лицам за минуту, принимают оплату на сайте и подключают решения для интернет-магазинов.</p>
        <p>Продукт сильный, но у него есть особенность: <b>финтех сложно воспринимается</b>. Чтобы клиент подключился, ему нужно за секунды понять, что это за сервис и какая от него выгода. На словах и текстом это объяснять долго.</p>
      </div>
    </div>
  </section>
  <section class="kcp__sec">
    <div class="kcp__callout">
      <div class="kcp__callout-k">ЗАДАЧА</div>
      <div class="kcp__callout-t">Объяснить сложный финтех-продукт так, чтобы целевая аудитория поняла суть и выгоду за считанные секунды - и захотела подключиться.</div>
    </div>
  </section>
  <section class="kcp__sec">
    <div class="kcp__kick">- КАК ШЛА РАБОТА</div>
    <h2 class="kcp__h2">От одного ролика - к маркетингу и второму бизнесу</h2>
    <p class="kcp__sub">Всё началось с одного объясняющего видео. Дальше клиент возвращался снова и снова - за новыми форматами.</p>
    <ol class="kcp__timeline">
      <li class="kcp__step"><div class="kcp__step-num">01</div><div class="kcp__step-body">
        <h3>Видео о сервисе</h3>
        <p>Сняли первое видео: кто такие Инвойсбокс, чем полезны и как это работает - коротко и понятно. Первый инструмент, который показывает продукт вместо долгих объяснений.</p>
        <div class="kcp__ph kcp__ph--wide" data-video="main"><div class="kcp__ph-label">🎬 Видео о сервисе (Kinescope)</div></div>
      </div></li>
      <li class="kcp__step"><div class="kcp__step-num">02</div><div class="kcp__step-body">
        <h3>Второе видео - глубже и проще</h3>
        <p>Клиент вернулся за вторым роликом. Здесь мы подробнее и ещё проще разобрали продукт - версия для сайта и презентаций, чтобы объяснять сервис новым клиентам.</p>
        <div class="kcp__ph kcp__ph--wide" data-video="v2"><div class="kcp__ph-label">🎬 Второе видео (подробный разбор)</div></div>
      </div></li>
      <li class="kcp__step"><div class="kcp__step-num">03</div><div class="kcp__step-body">
        <h3>Два коротких ролика</h3>
        <p>Дальше - два коротких ролика (~30 секунд): «как выставить счёт на сервисе» и «решение для интернет-магазинов» (у клиента появился новый сервис). Простыми словами о сложном - точно под их аудиторию.</p>
        <div class="kcp__ph kcp__ph--grid">
          <div class="kcp__ph" data-video="info1" data-img="info1"><div class="kcp__ph-label">🎬 ролик «выставить счёт»</div></div>
          <div class="kcp__ph" data-video="info2" data-img="info2"><div class="kcp__ph-label">🎬 ролик «для интернет-магазинов»</div></div>
        </div>
      </div></li>
      <li class="kcp__step"><div class="kcp__step-num">04</div><div class="kcp__step-body">
        <h3>Подготовка к продвижению</h3>
        <p>Структуру подготовили под рекламный трафик: настроили точки конверсии, предусмотрели посадочные сценарии под разные запросы и собрали аналитику, чтобы видеть, что работает.</p>
        <!-- СЛОТ СКРЫТ 30.08.2026. Причина: картинки под этот шаг пока нет, заглушка оставляла пустое место. Ключ images.mkt в конфиге сохранён - чтобы вернуть слот, снимите этот комментарий.
        <div class="kcp__ph kcp__ph--wide" data-img="mkt"><div class="kcp__ph-label">📊 маркетинг: скрин рекламы / результатов</div></div>
        -->
      </div></li>
      <li class="kcp__step kcp__chapter"><div class="kcp__step-num">GRT</div><div class="kcp__step-body">
        <h3>Второй бизнес клиента - GIARTI</h3>
        <p>Лучшее подтверждение доверия: клиент передал нам и свой второй бизнес - <b>GIARTI</b>. Это онлайн-галерея высокохудожественных изделий ручной работы от мастеров из России и других стран: вазы, скульптура, янтарь, ювелирные изделия, художественное литьё. В каталоге есть отдельные разделы для мастеров и для дизайнеров, доставка с гарантией, а каждое изделие проверяют перед отправкой покупателю.</p>
        <p>Другой продукт и другая аудитория, но схема та же: разбираемся в товаре, готовим структуру под рекламный трафик и ведём кампании. Работа продолжается - о результатах расскажем, когда наберётся показательный период.</p>
        <p><a class="kcp__link" href="https://giarti.com" target="_blank" rel="noopener">giarti.com</a></p>
        <div class="kcp__ph kcp__ph--site" data-img="grtCover"><div class="kcp__ph-label">🖼 GIARTI: первый экран сайта</div></div>
      </div></li>
      <li class="kcp__step kcp__step--next"><div class="kcp__step-num">→</div><div class="kcp__step-body">
        <h3>Что дальше</h3>
        <p>Следующий этап - лендинги под каждый продукт: отдельная страница на каждый сервис, где сложный финтех объясняется максимально просто. Задача - чтобы любой человек понял, что это за сервис и как им удобно пользоваться.</p>
      </div></li>
    </ol>
  </section>
  <section class="kcp__sec">
    <div class="kcp__result">
      <div class="kcp__kick">- ЧТО ИЗМЕНИЛОСЬ</div>
      <h2 class="kcp__h2">Сложное стало понятным - и продающим</h2>
      <div class="kcp__result-grid">
        <div class="kcp__rcard"><div class="kcp__rc-t">Просто о сложном</div><p>Финтех-продукт объяснён так, что аудитория понимает суть и выгоду за секунды.</p></div>
        <div class="kcp__rcard"><div class="kcp__rc-t">Клиент возвращается</div><p>От одного видео - к серии роликов и инфографике, дальше - подготовка к продвижению.</p></div>
        <div class="kcp__rcard"><div class="kcp__rc-t">Доверие = 2-й бизнес</div><p>Клиент передал нам и второй бизнес - онлайн-галерею изделий ручной работы GIARTI.</p></div>
        <div class="kcp__rcard"><div class="kcp__rc-t">Постоянная работа</div><p>Не разовая задача, а постоянная работа по двум бизнесам клиента.</p></div>
      </div>
    </div>
  </section>
  <section class="kcp__sec">
    <div class="kcp__kick">- ЧТО ВОШЛО В РАБОТУ</div>
    <div class="kcp__chips">
      <span>Видеопродакшн</span><span>Объясняющие ролики</span><span>Моушн / инфографика</span><span>Короткие ролики 30 сек</span><span>Маркетинг и реклама</span><span>Ведение проекта</span><span>Реклама GIARTI</span><span>Лендинги (в планах)</span>
    </div>
  </section>
  <!-- ===== ВИДЕО ПРОЕКТА (СКРЫТО) ===== -->
  <!-- СЕКЦИЯ СКРЫТА 28.08.2026. Причина: ролик xgBCJrU3Fy9CtKDXR9R23S дублировал шаг 01, а на странице и так четыре ролика.
       Разметка сохранена. Чтобы вернуть секцию, снимите этот комментарий.
  <section class="kcp__sec">
    <div class="kcp__kick">- СМОТРЕТЬ</div>
    <h2 class="kcp__h2">Видео проекта</h2>
    <div class="kcp__video"><iframe src="https://kinescope.io/embed/xgBCJrU3Fy9CtKDXR9R23S" allow="autoplay; fullscreen; encrypted-media; picture-in-picture" allowfullscreen frameborder="0"></iframe></div>
  </section>
  -->
  <!-- ===== ОТЗЫВ КЛИЕНТА ===== -->
  <section class="kcp__sec">
    <div class="kcp__kick">- ОТЗЫВ</div>
    <h2 class="kcp__h2">Благодарственное письмо</h2>
    <p class="kcp__sub">ООО «Объединённый расчётный центр» - юридическое лицо группы «Инвойсбокс»</p>
    <div class="kcp__letter"><img src="https://static.tildacdn.com/tild3461-6534-4530-b265-323334643764/pismo-invoicebox-120.jpg" alt="Благодарственное письмо от ООО «Объединённый расчётный центр» (Инвойсбокс) команде KORS Production за видеоролики и ведение маркетинга" loading="lazy"></div>
  </section>
  <!-- ===== ДРУГИЕ КЕЙСЫ ===== -->
  <section class="kcp__sec">
    <div class="kcp__kick">- ЕЩЁ</div>
    <h2 class="kcp__h2">Другие кейсы</h2>
    <div class="kcp__more">
      <a class="kcp__more-card" href="/case-odoevskie"><span>Кейс</span><b>Одоевские консервы</b><i>Видео, фирменный стиль и два сайта →</i></a>
      <a class="kcp__more-card" href="/case-vistex"><span>Кейс</span><b>Вистекс</b><i>Съёмка видео о предприятии →</i></a>
    </div>
  </section>
  <section class="kcp__cta">
    <h2>Сложный продукт? Объясним просто.</h2>
    <p>Поможем показать ваш сервис так, чтобы клиент понял его за секунды.</p>
    <a class="kcp__cta-btn" href="#popup:zayavka">Обсудить проект →</a>
  </section>
</div>

<style>
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Unbounded:wght@400;600;700;800&display=swap');
.kcp{--bg:#0C0C0E;--raise:#141416;--card:#1B1B1F;--border:#2A2A2E;--soft:#242428;--text:#F5F3EF;--muted:#9A9A9A;--faint:#6a6a6e;--accent:#6D5DFB;--glow:rgba(109,93,251,.14);
  box-sizing:border-box;background:var(--bg);color:var(--text);font-family:'Manrope',Arial,sans-serif;-webkit-font-smoothing:antialiased;}
.kcp *{box-sizing:border-box;margin:0;padding:0;}
.kcp p{line-height:1.65;}
.kcp__eyebrow,.kcp__kick{font-family:'Unbounded';font-size:12px;letter-spacing:.14em;color:var(--accent);}
.kcp__h2{font-family:'Unbounded';font-weight:700;font-size:clamp(26px,3.2vw,42px);letter-spacing:-.02em;line-height:1.12;margin:14px 0 0;}
.kcp__sub{color:var(--muted);font-size:17px;line-height:1.6;max-width:640px;margin-top:14px;}
.kcp__hero{padding:70px 6vw 0;max-width:1280px;margin:0 auto;}
.kcp__hero-in{max-width:900px;}
.kcp__back{display:inline-block;color:var(--muted);text-decoration:none;font-size:14px;font-weight:600;margin-bottom:34px;transition:.2s;}
.kcp__back:hover{color:var(--accent);}
.kcp__hero .kcp__eyebrow{margin-bottom:18px;}
.kcp__title{font-family:'Unbounded';font-weight:800;font-size:clamp(40px,7vw,88px);letter-spacing:-.03em;line-height:1;margin-bottom:24px;}
.kcp__lead{font-size:clamp(18px,2vw,22px);line-height:1.55;color:#d8d6d1;max-width:760px;}
.kcp__facts{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:14px;overflow:hidden;margin-top:44px;}
.kcp__fact{background:var(--raise);padding:20px 22px;display:flex;flex-direction:column;gap:7px;}
.kcp__fact span{font-size:12px;color:var(--faint);text-transform:uppercase;letter-spacing:.06em;}
.kcp__fact b{font-family:'Unbounded';font-weight:600;font-size:14px;line-height:1.3;}
.kcp__cover{margin:48px auto 0;max-width:1280px;aspect-ratio:16/8;border-radius:20px;}
.kcp__sec{max-width:1080px;margin:0 auto;padding:64px 6vw;}
.kcp__grid2{display:grid;grid-template-columns:0.85fr 1.15fr;gap:48px;align-items:start;}
.kcp__prose p{color:#c9c7c2;font-size:17px;margin-bottom:16px;}
.kcp__prose p:last-child{margin-bottom:0;}
.kcp__prose b{color:var(--text);font-weight:600;}
.kcp__callout{background:linear-gradient(135deg,rgba(109,93,251,.10),rgba(109,93,251,.02));border:1px solid rgba(109,93,251,.3);border-radius:18px;padding:40px 44px;}
.kcp__callout-k{font-family:'Unbounded';font-size:12px;letter-spacing:.14em;color:var(--accent);margin-bottom:14px;}
.kcp__callout-t{font-family:'Unbounded';font-weight:600;font-size:clamp(20px,2.4vw,30px);line-height:1.35;letter-spacing:-.01em;}
.kcp__timeline{list-style:none;margin-top:44px;display:flex;flex-direction:column;gap:26px;}
.kcp__step{display:grid;grid-template-columns:88px 1fr;gap:26px;background:var(--raise);border:1px solid var(--border);border-radius:18px;padding:30px 32px;transition:.25s;}
.kcp__step:hover{border-color:rgba(109,93,251,.4);}
.kcp__step-num{font-family:'Unbounded';font-weight:700;font-size:34px;color:var(--accent);line-height:1;opacity:.85;}
.kcp__step-body h3{font-family:'Unbounded';font-weight:600;font-size:22px;letter-spacing:-.01em;margin-bottom:12px;}
.kcp__step-body p{color:#c4c2bd;font-size:16px;}
.kcp__step--next{background:transparent;border-style:dashed;}
.kcp__step--next .kcp__step-num{opacity:1;}
.kcp__ph{position:relative;background:repeating-linear-gradient(45deg,#141416,#141416 12px,#17171a 12px,#17171a 24px);border:2px dashed #38383e;border-radius:14px;min-height:150px;display:flex;align-items:center;justify-content:center;text-align:center;}
.kcp__ph-label{color:#8a8a90;font-size:13px;font-weight:600;line-height:1.5;padding:16px;}
.kcp__ph-label small{color:var(--faint);font-weight:500;}
.kcp__ph--wide{margin-top:18px;aspect-ratio:16/8;min-height:0;}
.kcp__ph--site{margin-top:18px;aspect-ratio:1200/681;min-height:0;}
.kcp__link{color:#A99CFF;text-decoration:underline;text-underline-offset:3px;}
.kcp__link:hover{color:#F5F3EF;}
.kcp__ph--grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:18px;background:none;border:none;padding:0;}
.kcp__ph--grid .kcp__ph{aspect-ratio:4/3;min-height:0;}
.kcp__cover.kcp__ph{aspect-ratio:16/8;}
.kcp__ba{position:relative;margin-top:20px;aspect-ratio:16/9;border-radius:16px;overflow:hidden;border:1px solid var(--border);user-select:none;}
.kcp__ba-after,.kcp__ba-before{position:absolute;inset:0;border-radius:0;border:none;}
.kcp__ba-before{width:100%;clip-path:inset(0 50% 0 0);}
.kcp__ba-handle{position:absolute;top:0;bottom:0;left:50%;width:2px;background:var(--accent);cursor:ew-resize;transform:translateX(-1px);}
.kcp__ba-handle span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:40px;height:40px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(0,0,0,.4);}
.kcp__ba-handle span::before{content:'⟷';color:#000;font-size:18px;font-weight:700;}
.kcp__ba-tag{position:absolute;top:14px;font-family:'Unbounded';font-size:11px;letter-spacing:.1em;background:rgba(0,0,0,.6);padding:5px 11px;border-radius:6px;}
.kcp__ba-tag--l{left:14px;}
.kcp__ba-tag--r{right:14px;}
.kcp__ba-hint{text-align:center;color:var(--faint);font-size:13px;margin-top:12px;}
.kcp__result-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:34px;}
.kcp__rcard{background:var(--raise);border:1px solid var(--border);border-radius:16px;padding:26px 28px;}
.kcp__rc-t{font-family:'Unbounded';font-weight:600;font-size:18px;color:var(--accent);margin-bottom:10px;}
.kcp__rcard p{color:#c4c2bd;font-size:15px;}
.kcp__chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;}
.kcp__chips span{font-family:'Manrope';font-weight:600;font-size:14px;color:var(--text);background:rgba(109,93,251,.08);border:1px solid rgba(109,93,251,.4);border-radius:8px;padding:10px 16px;}
.kcp__video{margin-top:24px;aspect-ratio:16/9;border-radius:18px;overflow:hidden;border:1px solid var(--border);background:#000;}
.kcp__video iframe{width:100%;height:100%;border:none;}
.kcp__cta{max-width:900px;margin:20px auto 0;padding:80px 6vw 96px;text-align:center;}
.kcp__cta h2{font-family:'Unbounded';font-weight:700;font-size:clamp(26px,3.4vw,42px);letter-spacing:-.02em;margin-bottom:16px;}
.kcp__cta p{color:var(--muted);font-size:18px;margin-bottom:30px;}
.kcp__cta-btn{display:inline-block;background:var(--accent);color:#fff;text-decoration:none;font-family:'Manrope';font-weight:700;font-size:16px;padding:18px 38px;border-radius:10px;transition:.25s;}
.kcp__cta-btn:hover{transform:translateY(-2px);box-shadow:0 14px 34px var(--glow);}
@media (max-width:820px){
  .kcp__facts{grid-template-columns:1fr 1fr;}
  .kcp__grid2{grid-template-columns:1fr;gap:20px;}
  .kcp__step{grid-template-columns:1fr;gap:14px;padding:24px 22px;}
  .kcp__step-num{font-size:28px;}
  .kcp__result-grid{grid-template-columns:1fr;}
  .kcp__ph--grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:480px){
  .kcp__hero{padding:48px 20px 0;}
  .kcp__sec{padding:48px 20px;}
  .kcp__facts{grid-template-columns:1fr;}
  .kcp__callout{padding:28px 24px;}
}
.kcp [data-img].kcp--filled,.kcp [data-video].kcp--filled{background:none;border:none;}
.kcp [data-img] img,.kcp [data-video] img{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit;}
.kcp [data-fit="contain"] img{object-fit:contain;background:#0f0f11;padding:6%;}
.kcp [data-video].kcp--filled iframe{width:100%;height:100%;border:none;display:block;}
.kcp__ph.kcp--filled{padding:0;}
.kcp__chapter{background:linear-gradient(135deg,rgba(109,93,251,.10),rgba(109,93,251,.02))!important;border-color:rgba(109,93,251,.4)!important;}
.kcp__chapter .kcp__step-num{font-size:22px;}
/* Благодарственное письмо и блок «Другие кейсы» */
.kcp__letter{margin-top:26px;max-width:440px}
.kcp__letter img{display:block;width:100%;height:auto;border-radius:14px;border:1px solid var(--border)}
.kcp__more{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:28px}
.kcp__more-card{display:block;background:var(--raise);border:1px solid var(--border);border-radius:16px;padding:24px 26px;text-decoration:none;transition:.2s}
.kcp__more-card:hover{border-color:var(--accent)}
.kcp__more-card span{display:block;font-size:12px;letter-spacing:2px;color:var(--accent);text-transform:uppercase;margin-bottom:10px}
.kcp__more-card b{display:block;font-family:'Unbounded',sans-serif;font-weight:700;font-size:22px;line-height:1.2;color:var(--text);margin-bottom:8px}
.kcp__more-card i{font-style:normal;font-size:15px;color:var(--muted)}
@media (max-width:640px){.kcp__more{grid-template-columns:1fr}}
</style>
<script>
(function(){
  var C=window.KORS_CASE||{}; var IMG=C.images||{}, VID=C.videos||{};
  document.querySelectorAll('.kcp [data-video]').forEach(function(el){
    var id=VID[el.getAttribute('data-video')];
    if(id){ el.classList.add('kcp--filled'); el.innerHTML='<iframe src="https://kinescope.io/embed/'+id+'" allow="autoplay; fullscreen; encrypted-media; picture-in-picture" allowfullscreen frameborder="0"></iframe>'; el.removeAttribute('data-img'); }
  });
  document.querySelectorAll('.kcp [data-img]').forEach(function(el){
    var ALT_IB={grtCover:'Первый экран сайта GIARTI - онлайн-галереи изделий ручной работы'};
    var url=IMG[el.getAttribute('data-img')];
    if(url){ el.classList.add('kcp--filled'); el.innerHTML='<img src="'+url+'" alt="'+(ALT_IB[el.getAttribute('data-img')]||'')+'">'; }
  });
})();
(function(){
  var ba=document.getElementById('kcpBA'); if(!ba) return;
  var before=document.getElementById('kcpBABefore');
  var handle=document.getElementById('kcpBAHandle');
  var dragging=false;
  function setPos(clientX){
    var r=ba.getBoundingClientRect();
    var x=Math.max(0,Math.min(clientX-r.left,r.width));
    var pct=(x/r.width)*100;
    before.style.clipPath='inset(0 '+(100-pct)+'% 0 0)';
    handle.style.left=pct+'%';
  }
  handle.addEventListener('mousedown',function(){dragging=true;});
  window.addEventListener('mouseup',function(){dragging=false;});
  window.addEventListener('mousemove',function(e){ if(dragging) setPos(e.clientX); });
  handle.addEventListener('touchstart',function(){dragging=true;},{passive:true});
  window.addEventListener('touchend',function(){dragging=false;});
  window.addEventListener('touchmove',function(e){ if(dragging&&e.touches[0]) setPos(e.touches[0].clientX); },{passive:true});
  ba.addEventListener('click',function(e){ setPos(e.clientX); });
})();
</script>

BACKUP 2026-08-30 №5

rec2709724901 (21423 симв.) - /case-invoicebox 168789009 - кейс целиком

<!-- ============================================================
     KORS · КЕЙС · INVOICEBOX
     Заполнение фото/видео — только в списке KORS_CASE ниже.
     Картинки: ссылка в кавычки ('' = заглушка). Видео: ID Kinescope.
     ============================================================ -->
<script>
window.KORS_CASE = {
  images: {
    cover:      'https://static.tildacdn.com/tild6235-3838-4235-b430-646665666232/ib-cover-a-city.jpg',   // обложка вверху - кадр из второго ролика, Москва-Сити
    aboutShot:  '',   // «О компании» - скрин сервиса/интерфейса
    info1:      '',   // ролик «как выставить счёт» - кадр (если без видео)
    info2:      '',   // ролик «для интернет-магазинов» - кадр
    mkt:        'https://static.tildacdn.com/tild3464-6437-4161-b731-353565616265/ib-ads.jpg',   // рекламный кабинет проекта (данные скрыты)
    grtCover:   'https://static.tildacdn.com/tild6266-3832-4334-b066-303434623230/grt-site.jpg',   // GIARTI - первый экран сайта
    grt1:       '',   // GRT - пример
    siteSoon:   ''    // планы - макет лендингов
  },
  videos: {
    main:  '2FXfjS6hYEvLkWNKUveoBx',  // шаг 01 - первое видео о сервисе, полная версия
    v2:    '0GfobL6RnAzhPeiopXjNHS',  // шаг 02 - второе видео, «Инвойсбокс 2»
    info1: 'b66cpVCFFFVycfDvLFXFR3',  // шаг 03 - короткий ролик «выставить счёт»
    info2: '7akHJzKdcoSrPiHtRbRBqk'   // шаг 03 - короткий ролик «для интернет-магазинов»
  }
};
</script>

<div class="kcp">
<header class="kcp__hero">
    <div class="kcp__hero-in">
      <a class="kcp__back" href="/#rec2667018101">← Все проекты</a>
      <div class="kcp__eyebrow">КЕЙС · ФИНТЕХ · ВИДЕО + МАРКЕТИНГ</div>
      <h1 class="kcp__title">Инвойсбокс</h1>
      <p class="kcp__lead">Как объяснить сложный финтех простым языком - и почему клиент возвращался за видео, инфографикой и маркетингом, а затем доверил нам и свой второй бизнес.</p>
      <div class="kcp__facts">
        <div class="kcp__fact"><span>Сфера</span><b>Финтех · приём платежей (B2B)</b></div>
        <div class="kcp__fact"><span>С чего начали</span><b>Видео о сервисе</b></div>
        <div class="kcp__fact"><span>Где сейчас</span><b>Подготовка к продвижению + 2-й бизнес</b></div>
        <div class="kcp__fact"><span>Формат</span><b>Видео · инфографика · реклама</b></div>
      </div>
    </div>
    <div class="kcp__cover kcp__ph" data-img="cover"><div class="kcp__ph-label">📷 Обложка: кадр из видео / интерфейс сервиса (16:9)</div></div>
  </header>
  <section class="kcp__sec">
    <div class="kcp__grid2">
      <div><div class="kcp__kick">- О КОМПАНИИ</div><h2 class="kcp__h2">Мощный сервис, который сложно объяснить</h2></div>
      <div class="kcp__prose">
        <p>Инвойсбокс - сервис приёма онлайн-платежей и автоматизации выставления счетов для бизнеса. Компании выставляют и отправляют счета юридическим лицам за минуту, принимают оплату на сайте и подключают решения для интернет-магазинов.</p>
        <p>Продукт сильный, но у него есть особенность: <b>финтех сложно воспринимается</b>. Чтобы клиент подключился, ему нужно за секунды понять, что это за сервис и какая от него выгода. На словах и текстом это объяснять долго.</p>
      </div>
    </div>
  </section>
  <section class="kcp__sec">
    <div class="kcp__callout">
      <div class="kcp__callout-k">ЗАДАЧА</div>
      <div class="kcp__callout-t">Объяснить сложный финтех-продукт так, чтобы целевая аудитория поняла суть и выгоду за считанные секунды - и захотела подключиться.</div>
    </div>
  </section>
  <section class="kcp__sec">
    <div class="kcp__kick">- КАК ШЛА РАБОТА</div>
    <h2 class="kcp__h2">От одного ролика - к маркетингу и второму бизнесу</h2>
    <p class="kcp__sub">Всё началось с одного объясняющего видео. Дальше клиент возвращался снова и снова - за новыми форматами.</p>
    <ol class="kcp__timeline">
      <li class="kcp__step"><div class="kcp__step-num">01</div><div class="kcp__step-body">
        <h3>Видео о сервисе</h3>
        <p>Сняли первое видео: кто такие Инвойсбокс, чем полезны и как это работает - коротко и понятно. Первый инструмент, который показывает продукт вместо долгих объяснений.</p>
        <div class="kcp__ph kcp__ph--wide" data-video="main"><div class="kcp__ph-label">🎬 Видео о сервисе (Kinescope)</div></div>
      </div></li>
      <li class="kcp__step"><div class="kcp__step-num">02</div><div class="kcp__step-body">
        <h3>Второе видео - глубже и проще</h3>
        <p>Клиент вернулся за вторым роликом. Здесь мы подробнее и ещё проще разобрали продукт - версия для сайта и презентаций, чтобы объяснять сервис новым клиентам.</p>
        <div class="kcp__ph kcp__ph--wide" data-video="v2"><div class="kcp__ph-label">🎬 Второе видео (подробный разбор)</div></div>
      </div></li>
      <li class="kcp__step"><div class="kcp__step-num">03</div><div class="kcp__step-body">
        <h3>Два коротких ролика</h3>
        <p>Дальше - два коротких ролика (~30 секунд): «как выставить счёт на сервисе» и «решение для интернет-магазинов» (у клиента появился новый сервис). Простыми словами о сложном - точно под их аудиторию.</p>
        <div class="kcp__ph kcp__ph--grid">
          <div class="kcp__ph" data-video="info1" data-img="info1"><div class="kcp__ph-label">🎬 ролик «выставить счёт»</div></div>
          <div class="kcp__ph" data-video="info2" data-img="info2"><div class="kcp__ph-label">🎬 ролик «для интернет-магазинов»</div></div>
        </div>
      </div></li>
      <li class="kcp__step"><div class="kcp__step-num">04</div><div class="kcp__step-body">
        <h3>Подготовка к продвижению</h3>
        <p>Структуру подготовили под рекламный трафик: настроили точки конверсии, предусмотрели посадочные сценарии под разные запросы и собрали аналитику, чтобы видеть, что работает.</p>
        <div class="kcp__ph kcp__ph--ads" data-img="mkt"><div class="kcp__ph-label">📊 рекламный кабинет проекта</div></div>
      </div></li>
      <li class="kcp__step kcp__chapter"><div class="kcp__step-num kcp__step-num--brand">GIARTI</div><div class="kcp__step-body">
        <h3>Второй бизнес клиента - GIARTI</h3>
        <p>Лучшее подтверждение доверия: клиент передал нам и свой второй бизнес - <b>GIARTI</b>. Это онлайн-галерея высокохудожественных изделий ручной работы от мастеров из России и других стран: вазы, скульптура, янтарь, ювелирные изделия, художественное литьё. В каталоге есть отдельные разделы для мастеров и для дизайнеров, доставка с гарантией, а каждое изделие проверяют перед отправкой покупателю.</p>
        <p>Другой продукт и другая аудитория, но схема та же: разбираемся в товаре, готовим структуру под рекламный трафик и ведём кампании. Работа продолжается - о результатах расскажем, когда наберётся показательный период.</p>
        <p><a class="kcp__link" href="https://giarti.com" target="_blank" rel="noopener">giarti.com</a></p>
        <div class="kcp__ph kcp__ph--site" data-img="grtCover"><div class="kcp__ph-label">🖼 GIARTI: первый экран сайта</div></div>
      </div></li>
      <li class="kcp__step kcp__step--next"><div class="kcp__step-num">→</div><div class="kcp__step-body">
        <h3>Что дальше</h3>
        <p>Следующий этап - лендинги под каждый продукт: отдельная страница на каждый сервис, где сложный финтех объясняется максимально просто. Задача - чтобы любой человек понял, что это за сервис и как им удобно пользоваться.</p>
      </div></li>
    </ol>
  </section>
  <section class="kcp__sec">
    <div class="kcp__result">
      <div class="kcp__kick">- ЧТО ИЗМЕНИЛОСЬ</div>
      <h2 class="kcp__h2">Сложное стало понятным - и продающим</h2>
      <div class="kcp__result-grid">
        <div class="kcp__rcard"><div class="kcp__rc-t">Просто о сложном</div><p>Финтех-продукт объяснён так, что аудитория понимает суть и выгоду за секунды.</p></div>
        <div class="kcp__rcard"><div class="kcp__rc-t">Клиент возвращается</div><p>От одного видео - к серии роликов и инфографике, дальше - подготовка к продвижению.</p></div>
        <div class="kcp__rcard"><div class="kcp__rc-t">Доверие = 2-й бизнес</div><p>Клиент передал нам и второй бизнес - онлайн-галерею изделий ручной работы GIARTI.</p></div>
        <div class="kcp__rcard"><div class="kcp__rc-t">Постоянная работа</div><p>Не разовая задача, а постоянная работа по двум бизнесам клиента.</p></div>
      </div>
    </div>
  </section>
  <section class="kcp__sec">
    <div class="kcp__kick">- ЧТО ВОШЛО В РАБОТУ</div>
    <div class="kcp__chips">
      <span>Видеопродакшн</span><span>Объясняющие ролики</span><span>Моушн / инфографика</span><span>Короткие ролики 30 сек</span><span>Маркетинг и реклама</span><span>Ведение проекта</span><span>Реклама GIARTI</span><span>Лендинги (в планах)</span>
    </div>
  </section>
  <!-- ===== ВИДЕО ПРОЕКТА (СКРЫТО) ===== -->
  <!-- СЕКЦИЯ СКРЫТА 28.08.2026. Причина: ролик xgBCJrU3Fy9CtKDXR9R23S дублировал шаг 01, а на странице и так четыре ролика.
       Разметка сохранена. Чтобы вернуть секцию, снимите этот комментарий.
  <section class="kcp__sec">
    <div class="kcp__kick">- СМОТРЕТЬ</div>
    <h2 class="kcp__h2">Видео проекта</h2>
    <div class="kcp__video"><iframe src="https://kinescope.io/embed/xgBCJrU3Fy9CtKDXR9R23S" allow="autoplay; fullscreen; encrypted-media; picture-in-picture" allowfullscreen frameborder="0"></iframe></div>
  </section>
  -->
  <!-- ===== ОТЗЫВ КЛИЕНТА ===== -->
  <section class="kcp__sec">
    <div class="kcp__kick">- ОТЗЫВ</div>
    <h2 class="kcp__h2">Благодарственное письмо</h2>
    <p class="kcp__sub">ООО «Объединённый расчётный центр» - юридическое лицо группы «Инвойсбокс»</p>
    <div class="kcp__letter"><img src="https://static.tildacdn.com/tild3461-6534-4530-b265-323334643764/pismo-invoicebox-120.jpg" alt="Благодарственное письмо от ООО «Объединённый расчётный центр» (Инвойсбокс) команде KORS Production за видеоролики и ведение маркетинга" loading="lazy"></div>
  </section>
  <!-- ===== ДРУГИЕ КЕЙСЫ ===== -->
  <section class="kcp__sec">
    <div class="kcp__kick">- ЕЩЁ</div>
    <h2 class="kcp__h2">Другие кейсы</h2>
    <div class="kcp__more">
      <a class="kcp__more-card" href="/case-odoevskie"><span>Кейс</span><b>Одоевские консервы</b><i>Видео, фирменный стиль и два сайта →</i></a>
      <a class="kcp__more-card" href="/case-vistex"><span>Кейс</span><b>Вистекс</b><i>Съёмка видео о предприятии →</i></a>
    </div>
  </section>
  <section class="kcp__cta">
    <h2>Сложный продукт? Объясним просто.</h2>
    <p>Поможем показать ваш сервис так, чтобы клиент понял его за секунды.</p>
    <a class="kcp__cta-btn" href="#popup:zayavka">Обсудить проект →</a>
  </section>
</div>

<style>
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Unbounded:wght@400;600;700;800&display=swap');
.kcp{--bg:#0C0C0E;--raise:#141416;--card:#1B1B1F;--border:#2A2A2E;--soft:#242428;--text:#F5F3EF;--muted:#9A9A9A;--faint:#6a6a6e;--accent:#6D5DFB;--glow:rgba(109,93,251,.14);
  box-sizing:border-box;background:var(--bg);color:var(--text);font-family:'Manrope',Arial,sans-serif;-webkit-font-smoothing:antialiased;}
.kcp *{box-sizing:border-box;margin:0;padding:0;}
.kcp p{line-height:1.65;}
.kcp__eyebrow,.kcp__kick{font-family:'Unbounded';font-size:12px;letter-spacing:.14em;color:var(--accent);}
.kcp__h2{font-family:'Unbounded';font-weight:700;font-size:clamp(26px,3.2vw,42px);letter-spacing:-.02em;line-height:1.12;margin:14px 0 0;}
.kcp__sub{color:var(--muted);font-size:17px;line-height:1.6;max-width:640px;margin-top:14px;}
.kcp__hero{padding:70px 6vw 0;max-width:1280px;margin:0 auto;}
.kcp__hero-in{max-width:900px;}
.kcp__back{display:inline-block;color:var(--muted);text-decoration:none;font-size:14px;font-weight:600;margin-bottom:34px;transition:.2s;}
.kcp__back:hover{color:var(--accent);}
.kcp__hero .kcp__eyebrow{margin-bottom:18px;}
.kcp__title{font-family:'Unbounded';font-weight:800;font-size:clamp(40px,7vw,88px);letter-spacing:-.03em;line-height:1;margin-bottom:24px;}
.kcp__lead{font-size:clamp(18px,2vw,22px);line-height:1.55;color:#d8d6d1;max-width:760px;}
.kcp__facts{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:14px;overflow:hidden;margin-top:44px;}
.kcp__fact{background:var(--raise);padding:20px 22px;display:flex;flex-direction:column;gap:7px;}
.kcp__fact span{font-size:12px;color:var(--faint);text-transform:uppercase;letter-spacing:.06em;}
.kcp__fact b{font-family:'Unbounded';font-weight:600;font-size:14px;line-height:1.3;}
.kcp__cover{margin:48px auto 0;max-width:1280px;aspect-ratio:16/8;border-radius:20px;}
.kcp__sec{max-width:1080px;margin:0 auto;padding:64px 6vw;}
.kcp__grid2{display:grid;grid-template-columns:0.85fr 1.15fr;gap:48px;align-items:start;}
.kcp__prose p{color:#c9c7c2;font-size:17px;margin-bottom:16px;}
.kcp__prose p:last-child{margin-bottom:0;}
.kcp__prose b{color:var(--text);font-weight:600;}
.kcp__callout{background:linear-gradient(135deg,rgba(109,93,251,.10),rgba(109,93,251,.02));border:1px solid rgba(109,93,251,.3);border-radius:18px;padding:40px 44px;}
.kcp__callout-k{font-family:'Unbounded';font-size:12px;letter-spacing:.14em;color:var(--accent);margin-bottom:14px;}
.kcp__callout-t{font-family:'Unbounded';font-weight:600;font-size:clamp(20px,2.4vw,30px);line-height:1.35;letter-spacing:-.01em;}
.kcp__timeline{list-style:none;margin-top:44px;display:flex;flex-direction:column;gap:26px;}
.kcp__step{display:grid;grid-template-columns:88px 1fr;gap:26px;background:var(--raise);border:1px solid var(--border);border-radius:18px;padding:30px 32px;transition:.25s;}
.kcp__step:hover{border-color:rgba(109,93,251,.4);}
.kcp__step-num{font-family:'Unbounded';font-weight:700;font-size:34px;color:var(--accent);line-height:1;opacity:.85;}
.kcp__step-body h3{font-family:'Unbounded';font-weight:600;font-size:22px;letter-spacing:-.01em;margin-bottom:12px;}
.kcp__step-body p{color:#c4c2bd;font-size:16px;}
.kcp__step--next{background:transparent;border-style:dashed;}
.kcp__step--next .kcp__step-num{opacity:1;}
.kcp__ph{position:relative;background:repeating-linear-gradient(45deg,#141416,#141416 12px,#17171a 12px,#17171a 24px);border:2px dashed #38383e;border-radius:14px;min-height:150px;display:flex;align-items:center;justify-content:center;text-align:center;}
.kcp__ph-label{color:#8a8a90;font-size:13px;font-weight:600;line-height:1.5;padding:16px;}
.kcp__ph-label small{color:var(--faint);font-weight:500;}
.kcp__ph--wide{margin-top:18px;aspect-ratio:16/8;min-height:0;}
.kcp__ph--site{margin-top:18px;aspect-ratio:1200/681;min-height:0;}
.kcp__ph--ads{margin-top:18px;aspect-ratio:1200/607;min-height:0;}
.kcp__step-num--brand{font-size:17px!important;letter-spacing:.02em;padding-top:5px;}
.kcp__link{color:#A99CFF;text-decoration:underline;text-underline-offset:3px;}
.kcp__link:hover{color:#F5F3EF;}
.kcp__ph--grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:18px;background:none;border:none;padding:0;}
.kcp__ph--grid .kcp__ph{aspect-ratio:4/3;min-height:0;}
.kcp__cover.kcp__ph{aspect-ratio:16/8;}
.kcp__ba{position:relative;margin-top:20px;aspect-ratio:16/9;border-radius:16px;overflow:hidden;border:1px solid var(--border);user-select:none;}
.kcp__ba-after,.kcp__ba-before{position:absolute;inset:0;border-radius:0;border:none;}
.kcp__ba-before{width:100%;clip-path:inset(0 50% 0 0);}
.kcp__ba-handle{position:absolute;top:0;bottom:0;left:50%;width:2px;background:var(--accent);cursor:ew-resize;transform:translateX(-1px);}
.kcp__ba-handle span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:40px;height:40px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(0,0,0,.4);}
.kcp__ba-handle span::before{content:'⟷';color:#000;font-size:18px;font-weight:700;}
.kcp__ba-tag{position:absolute;top:14px;font-family:'Unbounded';font-size:11px;letter-spacing:.1em;background:rgba(0,0,0,.6);padding:5px 11px;border-radius:6px;}
.kcp__ba-tag--l{left:14px;}
.kcp__ba-tag--r{right:14px;}
.kcp__ba-hint{text-align:center;color:var(--faint);font-size:13px;margin-top:12px;}
.kcp__result-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:34px;}
.kcp__rcard{background:var(--raise);border:1px solid var(--border);border-radius:16px;padding:26px 28px;}
.kcp__rc-t{font-family:'Unbounded';font-weight:600;font-size:18px;color:var(--accent);margin-bottom:10px;}
.kcp__rcard p{color:#c4c2bd;font-size:15px;}
.kcp__chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;}
.kcp__chips span{font-family:'Manrope';font-weight:600;font-size:14px;color:var(--text);background:rgba(109,93,251,.08);border:1px solid rgba(109,93,251,.4);border-radius:8px;padding:10px 16px;}
.kcp__video{margin-top:24px;aspect-ratio:16/9;border-radius:18px;overflow:hidden;border:1px solid var(--border);background:#000;}
.kcp__video iframe{width:100%;height:100%;border:none;}
.kcp__cta{max-width:900px;margin:20px auto 0;padding:80px 6vw 96px;text-align:center;}
.kcp__cta h2{font-family:'Unbounded';font-weight:700;font-size:clamp(26px,3.4vw,42px);letter-spacing:-.02em;margin-bottom:16px;}
.kcp__cta p{color:var(--muted);font-size:18px;margin-bottom:30px;}
.kcp__cta-btn{display:inline-block;background:var(--accent);color:#fff;text-decoration:none;font-family:'Manrope';font-weight:700;font-size:16px;padding:18px 38px;border-radius:10px;transition:.25s;}
.kcp__cta-btn:hover{transform:translateY(-2px);box-shadow:0 14px 34px var(--glow);}
@media (max-width:820px){
  .kcp__facts{grid-template-columns:1fr 1fr;}
  .kcp__grid2{grid-template-columns:1fr;gap:20px;}
  .kcp__step{grid-template-columns:1fr;gap:14px;padding:24px 22px;}
  .kcp__step-num{font-size:28px;}
  .kcp__result-grid{grid-template-columns:1fr;}
  .kcp__ph--grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:480px){
  .kcp__hero{padding:48px 20px 0;}
  .kcp__sec{padding:48px 20px;}
  .kcp__facts{grid-template-columns:1fr;}
  .kcp__callout{padding:28px 24px;}
}
.kcp [data-img].kcp--filled,.kcp [data-video].kcp--filled{background:none;border:none;}
.kcp [data-img] img,.kcp [data-video] img{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit;}
.kcp [data-fit="contain"] img{object-fit:contain;background:#0f0f11;padding:6%;}
.kcp [data-video].kcp--filled iframe{width:100%;height:100%;border:none;display:block;}
.kcp__ph.kcp--filled{padding:0;}
.kcp__chapter{background:linear-gradient(135deg,rgba(109,93,251,.10),rgba(109,93,251,.02))!important;border-color:rgba(109,93,251,.4)!important;}
.kcp__chapter .kcp__step-num{font-size:22px;}
/* Благодарственное письмо и блок «Другие кейсы» */
.kcp__letter{margin-top:26px;max-width:440px}
.kcp__letter img{display:block;width:100%;height:auto;border-radius:14px;border:1px solid var(--border)}
.kcp__more{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:28px}
.kcp__more-card{display:block;background:var(--raise);border:1px solid var(--border);border-radius:16px;padding:24px 26px;text-decoration:none;transition:.2s}
.kcp__more-card:hover{border-color:var(--accent)}
.kcp__more-card span{display:block;font-size:12px;letter-spacing:2px;color:var(--accent);text-transform:uppercase;margin-bottom:10px}
.kcp__more-card b{display:block;font-family:'Unbounded',sans-serif;font-weight:700;font-size:22px;line-height:1.2;color:var(--text);margin-bottom:8px}
.kcp__more-card i{font-style:normal;font-size:15px;color:var(--muted)}
@media (max-width:640px){.kcp__more{grid-template-columns:1fr}}
</style>
<script>
(function(){
  var C=window.KORS_CASE||{}; var IMG=C.images||{}, VID=C.videos||{};
  document.querySelectorAll('.kcp [data-video]').forEach(function(el){
    var id=VID[el.getAttribute('data-video')];
    if(id){ el.classList.add('kcp--filled'); el.innerHTML='<iframe src="https://kinescope.io/embed/'+id+'" allow="autoplay; fullscreen; encrypted-media; picture-in-picture" allowfullscreen frameborder="0"></iframe>'; el.removeAttribute('data-img'); }
  });
  document.querySelectorAll('.kcp [data-img]').forEach(function(el){
    var ALT_IB={grtCover:'Первый экран сайта GIARTI - онлайн-галереи изделий ручной работы',mkt:'Рекламный кабинет проекта в Яндекс Директе: список кампаний со статусами и площадками, показатели и названия кампаний скрыты'};
    var url=IMG[el.getAttribute('data-img')];
    if(url){ el.classList.add('kcp--filled'); el.innerHTML='<img src="'+url+'" alt="'+(ALT_IB[el.getAttribute('data-img')]||'')+'">'; }
  });
})();
(function(){
  var ba=document.getElementById('kcpBA'); if(!ba) return;
  var before=document.getElementById('kcpBABefore');
  var handle=document.getElementById('kcpBAHandle');
  var dragging=false;
  function setPos(clientX){
    var r=ba.getBoundingClientRect();
    var x=Math.max(0,Math.min(clientX-r.left,r.width));
    var pct=(x/r.width)*100;
    before.style.clipPath='inset(0 '+(100-pct)+'% 0 0)';
    handle.style.left=pct+'%';
  }
  handle.addEventListener('mousedown',function(){dragging=true;});
  window.addEventListener('mouseup',function(){dragging=false;});
  window.addEventListener('mousemove',function(e){ if(dragging) setPos(e.clientX); });
  handle.addEventListener('touchstart',function(){dragging=true;},{passive:true});
  window.addEventListener('touchend',function(){dragging=false;});
  window.addEventListener('touchmove',function(e){ if(dragging&&e.touches[0]) setPos(e.touches[0].clientX); },{passive:true});
  ba.addEventListener('click',function(e){ setPos(e.clientX); });
})();
</script>

BACKUP 2026-08-30 №6

rec3238523101 (5966 симв.) - /sites 201483509 - блок «Процесс»

<style>
/* ---------- Процесс ---------- */
.step{background:var(--card);border-radius:var(--r-md);padding:36px;margin-top:18px;display:grid;grid-template-columns:96px 1fr .9fr;gap:32px;align-items:start;box-shadow:0 0 0 1px var(--line)}
.step-num{font-weight:700;font-size:54px;line-height:1;color:var(--accent-txt);letter-spacing:-.04em}
.step h3{font-size:clamp(20px,2vw,26px);margin-bottom:12px}
.step p{color:var(--muted);font-size:15.5px}
.step .step-res{margin-top:16px;font-size:14.5px;color:var(--ink)}
.step .step-res b{color:var(--accent-txt);font-weight:700}
.step > div:last-child:not(.step-media){grid-column:2 / -1}
/* Слоты step-media вернули 30.08.2026: во всех шести шагах есть иллюстрация. */
.step-media{align-self:start}
.step-shot{display:block;width:100%;height:auto;border-radius:14px;box-shadow:0 0 0 1px var(--line);background:#0f0f11}
.vs{display:grid;grid-template-columns:1fr 1fr;gap:12px;min-height:190px}
.vs-col{border-radius:20px;padding:22px;background:#0c0c0e}
.vs-col.win{background:rgba(109,93,251,.14);border:1px solid rgba(109,93,251,.4);color:#fff}
.vs-col h4{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin-bottom:12px;color:var(--muted)}
.vs-col.win h4{color:#a99cff}
.vs-col li{list-style:none;font-size:13.5px;color:var(--muted);padding:5px 0;line-height:1.45}
.vs-col.win li{color:#e8e9ea}
</style>
<section id="process" style="padding-top:0">
  <div class="container">
    <div class="eyebrow reveal">Процесс</div>
    <h2 class="reveal">6 шагов от знакомства до потока заявок</h2>
    <p class="sub reveal">Ваше участие за весь проект — 2–4 часа: ответить на вопросы и принять этапы. Остальное делаем сами.</p>
    <div style="margin-top:44px">
      <div class="step reveal">
        <div class="step-num">01</div>
        <div>
          <h3>Погружение в бизнес</h3>
          <p>Начинаем не с «какие цвета нравятся», а с глубинного интервью на 2 часа: продукт, сделки, клиенты, цифры, сильные и слабые места.</p>
          <p class="step-res"><b>Итог:</b> понимаем, за что вам платят клиенты — и что покажем на сайте.</p>
        </div>
        <div class="step-media vs">
          <div class="vs-col">
            <h4>Обычный бриф</h4>
            <ul><li>— Какие цвета нравятся?</li><li>— Пришлёте примеры сайтов?</li><li>— Текст и ТЗ есть?</li></ul>
          </div>
          <div class="vs-col win">
            <h4>Интервью KORS</h4>
            <ul><li>— 100+ вопросов о бизнесе</li><li>— Разбор реальных сделок</li><li>— Упор на маркетинг</li></ul>
          </div>
        </div>
      </div>
      <div class="step reveal">
        <div class="step-num">02</div>
        <div>
          <h3>Анализ аудитории и конкурентов</h3>
          <p>Разбираем 8–10 конкурентов по ключевым критериям. Сегментируем аудиторию, выписываем страхи, желания и возражения по отзывам, форумам и картам.</p>
          <p class="step-res"><b>Итог:</b> документ со смыслами, на котором строится весь сайт.</p>
        </div>
        <div class="step-media"><img class="step-shot" src="https://static.tildacdn.com/tild3838-3862-4163-b863-643363666532/proc-analiz.jpg" alt="Таблица анализа конкурентов: участники рынка построчно, офферы, цены и выводы по каждому" loading="lazy"></div>
      </div>
      <div class="step reveal">
        <div class="step-num">03</div>
        <div>
          <h3>Структура и текст</h3>
          <p>Собираем прототип по блокам и пишем продающий текст: офер, заголовки, призывы, лид-магниты. Записываем видеопояснение логики каждого блока.</p>
          <p class="step-res"><b>Итог:</b> прототип, готовый к передаче в дизайн.</p>
        </div>
        <div class="step-media"><img class="step-shot" src="https://static.tildacdn.com/tild3433-3133-4536-a334-303935323536/proc-struktura.jpg" alt="Прототип лендинга в рабочем интерфейсе: блоки страницы разложены по экранам" loading="lazy"></div>
      </div>
      <div class="step reveal">
        <div class="step-num">04</div>
        <div>
          <h3>Дизайн</h3>
          <p>Готовим 2 варианта концепции на выбор: референсы, визуальный вектор, презентация решений — объясняем, что и почему работает на заявки, а не просто «красиво».</p>
          <p class="step-res"><b>Итог:</b> макет, который не стыдно показать партнёрам и инвесторам.</p>
        </div>
        <div class="step-media"><img class="step-shot" src="https://static.tildacdn.com/tild3732-3732-4230-a630-363761373135/proc-dizayn.jpg" alt="Две концепции первого экрана для одного проекта, подготовленные на выбор" loading="lazy"></div>
      </div>
      <div class="step reveal">
        <div class="step-num">05</div>
        <div>
          <h3>Сборка и запуск</h3>
          <p>Верстаем, адаптируем под мобильные, подключаем домен, формы, CRM и уведомления. Настраиваем Яндекс Метрику, Вебмастер и базовое SEO.</p>
          <p class="step-res"><b>Итог:</b> живой сайт, который принимает заявки без вашего участия.</p>
        </div>
        <div class="step-media"><img class="step-shot" src="https://static.tildacdn.com/tild6333-3433-4939-a637-366161323538/proc-zapusk.jpg" alt="Готовый сайт в окне браузера: первый экран и блоки страницы при прокрутке" loading="lazy"></div>
      </div>
      <div class="step reveal">
        <div class="step-num">06</div>
        <div>
          <h3>Трафик</h3>
          <p>Запускаем Яндекс Директ на собранные смыслы: объявления пишутся из той же карты, что и сайт. Ведём кампании и докручиваем по цифрам, а не по ощущениям.</p>
          <p class="step-res"><b>Итог:</b> управляемый поток целевых заявок — прогнозируемый и масштабируемый.</p>
        </div>
        <div class="step-media"><img class="step-shot" src="https://static.tildacdn.com/tild3237-6530-4234-b331-666230356664/grt-ads.jpg" alt="Список кампаний в рекламном кабинете Яндекс Директа: статусы, площадки и даты запуска; показатели и названия кампаний скрыты" loading="lazy"></div>
      </div>
    </div>
  </div>
</section>

rec2699474201 (45710 симв.) - /case-odoevskie 168173409

<!-- ================================================================
     KORS · СТРАНИЦА-КЕЙС · ОДОЕВСКИЕ КОНСЕРВЫ
     ── ЗАПОЛНЕНИЕ ──────────────────────────────────────────────────
     Всё фото/видео вставляется В ОДНОМ МЕСТЕ - в списке ниже (KORS_CASE).
     • Картинки: вставь ссылку на изображение в кавычки. Пусто '' = заглушка.
       Где взять ссылку: загрузи фото в Tilda (Файл-менеджер сайта или любой
       блок «Изображение») и скопируй URL картинки; либо любой прямой URL.
     • Видео: впиши ID ролика Kinescope (часть после kinescope.io/… ). Пусто = заглушка.
     Больше нигде в коде править не нужно - слоты подтянутся сами.
     ================================================================ -->
<script>
window.KORS_CASE = {
  images: {
    cover:        'https://static.tildacdn.com/tild3563-6163-4139-a463-386164356466/odoev-cover-film-128.jpg',   // большая обложка вверху (гориз. фото/визуал)
    firstShoot:   '',   // шаг 01 - кадр первой съёмки начинки (если без видео)
    firstShoot2:  '',   // шаг 01 - кадр второй съёмки начинки (если без видео)
presentation: '',   // шаг 02 - одиночная картинка-запасной вариант (используется, только если slides пуст)
    factoryPhoto: '',   // шаг 03 - фото производства (если без видео)
    product1:     'https://static.tildacdn.com/tild3538-6336-4331-b630-393965653763/odoevskie-nachinki-1.jpg',   // шаг 04 - фото продукции 1
    product2:     'https://static.tildacdn.com/tild6462-3535-4432-b266-653436663333/odoevskie-kruasan-12.jpg',   // шаг 04 - фото продукции 2
    product3:     'https://static.tildacdn.com/tild6462-3131-4336-a237-366662616565/odoevskie-laboratori.jpg',   // шаг 04 - фото цеха/процесса
    photo4:       'https://static.tildacdn.com/tild6264-3139-4539-b061-323332633033/od-kotel.jpg',   // шаг 04 - галерея, кадр 4
    photo5:       'https://static.tildacdn.com/tild3663-3134-4337-a635-303939303938/od-varenye.jpg',   // шаг 04 - галерея, кадр 5
    photo6:       'https://static.tildacdn.com/tild6435-6536-4036-b765-626461393263/od-sklad.jpg',   // шаг 04 - галерея, кадр 6
    logoBefore:   'https://static.tildacdn.com/tild6462-3439-4365-a261-333634373338/odoevskie-logo-do-12.jpg',   // шаг 05 - СТАРЫЙ логотип (до)
    logoAfter:    'https://static.tildacdn.com/tild6338-3131-4439-b966-623739303361/odoevskie-logo-posle.jpg',   // шаг 05 - НОВЫЙ логотип (после)
    brand1:       '',   // шаг 06 - визитки
    brand2:       'https://static.tildacdn.com/tild6162-3336-4666-a338-323336396465/odoev-otkrytka-vesna.jpg',   // шаг 06 - открытки
    brand3:       'https://static.tildacdn.com/tild6632-3465-4634-b861-393137323563/odoevskie-priglasite.jpg',   // шаг 06 - др. носители
    siteShots:    ''    // шаг 07 - скриншоты povidlo.su и povidlo.pro
  },
  // Скриншоты сайтов для шага 07. Вкладка RU - povidlo.su, вкладка EN - povidlo.pro.
  siteRu: [
    'https://static.tildacdn.com/tild3463-3561-4837-b438-333439316132/povidlo-su-01-hero.jpg',
    'https://static.tildacdn.com/tild6439-3335-4533-a436-656336633534/povidlo-su-02-kontro.jpg',
    'https://static.tildacdn.com/tild6336-3035-4463-b463-653463326363/povidlo-su-03-katalo.jpg',
    'https://static.tildacdn.com/tild6538-3937-4435-b339-336162656636/povidlo-su-04-menedz.jpg'
  ],
  siteEn: [
    'https://static.tildacdn.com/tild3561-3836-4335-b431-323263383230/povidlo-pro-01-hero.jpg',
    'https://static.tildacdn.com/tild6163-3731-4132-b166-613736353464/povidlo-pro-02-about.jpg',
    'https://static.tildacdn.com/tild3335-3935-4237-b938-386233613336/povidlo-pro-03-leadf.jpg'
  ],
  // Визитки для шага 06. Две карточки, открываются в том же лайтбоксе, что и развороты.
  // Пусто - используется одиночный слот images.brand1.
  cards: [
    'https://static.tildacdn.com/tild3261-6362-4033-a662-393031353131/odoev-vizitka-ivanov.jpg',
    'https://static.tildacdn.com/tild6232-3936-4463-a637-333436386635/odoev-vizitka-veklic.jpg'
  ],
  // Развороты печатной презентации для шага 02. Два комплекта, переключаются вкладками RU/EN.
  // Порядок = порядок в галерее. Пусто в slides - в слоте останется заглушка,
  // пусто в slidesEn - вкладка EN не показывается.
  slides: [
    'https://static.tildacdn.com/tild3839-6265-4534-b632-383934363939/odoev-pres-01.jpg',
    'https://static.tildacdn.com/tild6365-3736-4633-b638-623535336533/odoev-pres-02.jpg',
    'https://static.tildacdn.com/tild3861-3537-4062-b638-623737303666/odoev-pres-03.jpg',
    'https://static.tildacdn.com/tild3739-3733-4737-a439-373962306636/odoev-pres-04.jpg',
    'https://static.tildacdn.com/tild6131-3763-4633-a632-383430346635/odoev-pres-05.jpg',
    'https://static.tildacdn.com/tild6238-3563-4662-b936-343165656562/odoev-pres-06.jpg',
    'https://static.tildacdn.com/tild6330-3263-4431-b136-306366623031/odoev-pres-07.jpg',
    'https://static.tildacdn.com/tild3263-6531-4663-b630-316431303234/odoev-pres-08.jpg',
    'https://static.tildacdn.com/tild3032-6661-4835-b932-613834373837/odoev-pres-09.jpg',
    'https://static.tildacdn.com/tild6439-3366-4065-b763-343465383338/odoev-pres-10.jpg',
    'https://static.tildacdn.com/tild3431-3232-4331-a661-653335363963/odoev-pres-11.jpg',
    'https://static.tildacdn.com/tild3239-6231-4336-a531-363563343563/odoev-pres-12.jpg',
    'https://static.tildacdn.com/tild3231-6331-4262-b262-363063643633/odoev-pres-13.jpg',
    'https://static.tildacdn.com/tild6537-3532-4534-a166-623232326538/odoev-pres-14.jpg',
    'https://static.tildacdn.com/tild3763-3332-4665-b631-353963643534/odoev-pres-15.jpg',
    'https://static.tildacdn.com/tild3439-6161-4537-a531-633864306164/odoev-pres-16.jpg'
  ],
  slidesEn: [
    'https://static.tildacdn.com/tild6132-3033-4436-b735-343631343130/odoev-pres-en-01.jpg',
    'https://static.tildacdn.com/tild3832-3935-4631-b631-366464363039/odoev-pres-en-02.jpg',
    'https://static.tildacdn.com/tild3332-3761-4538-b430-333335363031/odoev-pres-en-03.jpg',
    'https://static.tildacdn.com/tild6566-3932-4236-b365-323064646265/odoev-pres-en-04.jpg',
    'https://static.tildacdn.com/tild3238-6164-4730-b662-366261353863/odoev-pres-en-05.jpg',
    'https://static.tildacdn.com/tild3939-3332-4437-a131-643238343734/odoev-pres-en-06.jpg',
    'https://static.tildacdn.com/tild6264-3134-4561-a333-646630626136/odoev-pres-en-07.jpg',
    'https://static.tildacdn.com/tild3463-6639-4532-b364-636338303939/odoev-pres-en-08.jpg',
    'https://static.tildacdn.com/tild6634-3632-4239-a463-363462323464/odoev-pres-en-09.jpg',
    'https://static.tildacdn.com/tild3434-3061-4432-b663-386464313137/odoev-pres-en-10.jpg',
    'https://static.tildacdn.com/tild6265-6534-4335-a130-306462656133/odoev-pres-en-11.jpg',
    'https://static.tildacdn.com/tild6332-6135-4762-a135-303166363439/odoev-pres-en-12.jpg',
    'https://static.tildacdn.com/tild3930-3535-4231-a436-326336303337/odoev-pres-en-13.jpg',
    'https://static.tildacdn.com/tild3335-3832-4730-b466-393065656433/odoev-pres-en-14.jpg',
    'https://static.tildacdn.com/tild3934-3966-4931-a466-613731333338/odoev-pres-en-15.jpg',
    'https://static.tildacdn.com/tild6465-3432-4361-b464-343863303862/odoev-pres-en-16.jpg'
  ],
  videos: {
    firstShoot:   'sRyZwPm3BS9CVspVi2sLx3',   // шаг 01 - ролик «Термостабильные начинки»
    firstShoot2:  'mZiwnH9uZAdc15hhRsqPvB',    // шаг 01 - ролик «Нетермостабильные начинки»
    factory:      '3ZsxHkdEuHUubxSAQZDRyG',    // шаг 03 - фильм о заводе, полная версия
    main:         'j8Pq4wWMNTPm6Js8UQiM1n'     // блок «Видео проекта»
  }
};
</script>
<div class="kcp">
  <!-- ===== HERO ===== -->
  <header class="kcp__hero">
    <div class="kcp__hero-in">
      <a class="kcp__back" href="/#rec2667018101">← Все проекты</a>
      <div class="kcp__eyebrow">КЕЙС · ПИЩЕВОЕ ПРОИЗВОДСТВО</div>
      <h1 class="kcp__title">Одоевские консервы</h1>
      <div class="kcp__tags"><span class="kcp__tag">Видео</span><span class="kcp__tag">Фотосъёмка</span><span class="kcp__tag">Презентация</span><span class="kcp__tag">Фирменный стиль</span><span class="kcp__tag">Сайт</span></div>
      <p class="kcp__lead">Завод с 200+ рецептур, десятью направлениями продукции и поставками в четыре страны рассказывал о себе разрозненно. Собрали всё в одну систему: видео, фотосъёмка, презентация, логотип, фирменный стиль и два сайта - русский и английский.</p>
      <div class="kcp__facts">
        <div class="kcp__fact"><span>Сфера</span><b>Пищевое производство · B2B</b></div>
        <div class="kcp__fact"><span>С чего начали</span><b>Видеосъёмка продукта</b></div>
        <div class="kcp__fact"><span>Где сейчас</span><b>povidlo.su + povidlo.pro</b></div>
        <div class="kcp__fact"><span>Масштаб</span><b>200+ рецептур · 10 направлений</b></div>
      </div>
    </div>
    <!-- ВСТАВИТЬ: большое обложечное фото/видео (завод, продукция или кадр со съёмки). Пока заглушка. -->
    <div class="kcp__cover kcp__ph" data-img="cover"><div class="kcp__ph-label">📷 Обложка: фото продукции / кадр со съёмки (16:9)</div></div>
  </header>
  <!-- ===== КТО КЛИЕНТ ===== -->
  <section class="kcp__sec">
    <div class="kcp__grid2">
      <div>
        <div class="kcp__kick">- О КОМПАНИИ</div>
        <h2 class="kcp__h2">Сильное производство, которое было не видно</h2>
      </div>
      <div class="kcp__prose">
        <p>«Одоевские консервы» - производитель из посёлка Одоев в Тульской области. Уже более двадцати лет компания выпускает термостабильные фруктово-ягодные начинки, повидло, джемы, конфитюры, пюре и наполнители для хлебопекарной, кондитерской и молочной промышленности: больше 200 рецептур, десять направлений продукции, поставки в четыре страны.</p>
        <p>Это классический B2B: их продукт - ингредиент, который живёт <b>внутри</b> чужих изделий. Начинка в круассане, повидло в печенье, наполнитель в йогурте. Продукт качественный, производство серьёзное - но со стороны этого масштаба не было видно.</p>
        <p>При этом информация о заводе жила по разным местам: ассортимент - в прайсе, производственные возможности - в голове у менеджера, контроль качества и география поставок не были описаны нигде. Видео, сайт, презентация и фирменные материалы не складывались в единую картину: компанию нельзя было «показать» - только долго объяснять на словах.</p>
      </div>
    </div>
  </section>
  <!-- ===== ЗАДАЧА (акцентная плашка) ===== -->
  <section class="kcp__sec">
    <div class="kcp__callout">
      <div class="kcp__callout-k">ЗАДАЧА</div>
      <div class="kcp__callout-t">Задача была не в красивом сайте, а в том, чтобы собрать разрозненную информацию о заводе в одну систему - и партнёр за несколько минут понимал, с кем имеет дело.</div>
    </div>
  </section>
  <!-- ===== ТАЙМЛАЙН РАБОТЫ ===== -->
  <section class="kcp__sec">
    <div class="kcp__kick">- КАК ШЛА РАБОТА</div>
    <h2 class="kcp__h2">Из одной съёмки - в полный цикл</h2>
    <p class="kcp__sub">Сотрудничество началось с одного ролика и постепенно выросло в полный комплект материалов. Вот путь шаг за шагом.</p>
    <ol class="kcp__timeline">
      <li class="kcp__step">
        <div class="kcp__step-num">01</div>
        <div class="kcp__step-body">
          <h3>Первые видео на начинке</h3>
          <p>Начали с двух роликов о продукте. Сняли начинку «в деле» - текстуру, цвет, как она работает в готовом изделии. Это первое, что показывает потенциальному партнёру, что перед ним - качественный ингредиент.</p>
          <!-- Два ролика первой съёмки. ID берутся из KORS_CASE.videos (firstShoot / firstShoot2). -->
          <div class="kcp__vid2">
            <div class="kcp__ph" data-video="firstShoot" data-img="firstShoot"><div class="kcp__ph-label">🎬 Термостабильные начинки</div></div>
            <div class="kcp__ph" data-video="firstShoot2" data-img="firstShoot2"><div class="kcp__ph-label">🎬 Нетермостабильные начинки</div></div>
          </div>
        </div>
      </li>
      <li class="kcp__step">
        <div class="kcp__step-num">02</div>
        <div class="kcp__step-body">
          <h3>Печатная презентация</h3>
          <p>Собрали продукт и производство в понятную структуру - презентацию для переговоров и выставок. Разложили ассортимент, преимущества и мощности так, чтобы менеджеру было легко показать компанию клиенту.</p>
          <!-- Галерея разворотов: ссылки в KORS_CASE.slides. Клик по развороту открывает его на весь экран. -->
          <div class="kcp__gal" data-gallery></div>
          <div class="kcp__ph kcp__ph--wide" data-img="presentation"><div class="kcp__ph-label">📑 Развороты печатной презентации</div></div>
        </div>
      </li>
      <li class="kcp__step">
        <div class="kcp__step-num">03</div>
        <div class="kcp__step-body">
          <h3>Видео о заводе</h3>
          <p>Сняли само производство: масштаб цехов, оборудование, процессы. Именно это видео закрывает главный вопрос B2B-клиента - «а справятся ли по объёму и качеству». Масштаб теперь виден, а не описан словами.</p>
          <div class="kcp__ph kcp__ph--wide" data-video="factory" data-img="factoryPhoto"><div class="kcp__ph-label">🎬 Видео о заводе / кадры производства</div></div>
        </div>
      </li>
      <li class="kcp__step">
        <div class="kcp__step-num">04</div>
        <div class="kcp__step-body">
          <h3>Фотосъёмка для презентации и каталога</h3>
          <p>Сделали предметную и производственную фотосъёмку - продукция, упаковка, цеха. Единый визуальный ряд, который лёг в презентацию, каталог и дальнейшие материалы.</p>
          <div class="kcp__gal kcp__gal--photo" data-photogal></div>
          <div class="kcp__ph kcp__ph--grid">
            <div class="kcp__ph" data-img="product1"><div class="kcp__ph-label">📷 фото продукции 1</div></div>
            <div class="kcp__ph" data-img="product2"><div class="kcp__ph-label">📷 фото продукции 2</div></div>
            <div class="kcp__ph" data-img="product3"><div class="kcp__ph-label">📷 фото цеха / процесса</div></div>
          </div>
        </div>
      </li>
      <li class="kcp__step">
        <div class="kcp__step-num">05</div>
        <div class="kcp__step-body">
          <h3>Новый логотип: до / после</h3>
          <p>Обновили логотип - сохранили узнаваемость, но привели к современному виду, который одинаково хорошо работает на упаковке, в презентации и на сайте. Сравните сами:</p>
          <!-- ДО/ПОСЛЕ слайдер. ВСТАВИТЬ 2 картинки логотипа: старый и новый -->
          <div class="kcp__ba" id="kcpBA">
            <div class="kcp__ba-after kcp__ph" data-img="logoAfter" data-fit="contain"><div class="kcp__ph-label">✅ НОВЫЙ логотип (после)</div></div>
            <div class="kcp__ba-before kcp__ph" id="kcpBABefore" data-img="logoBefore" data-fit="contain"><div class="kcp__ph-label">◻️ СТАРЫЙ логотип (до)</div></div>
            <div class="kcp__ba-handle" id="kcpBAHandle"><span></span></div>
            <div class="kcp__ba-tag kcp__ba-tag--l">ДО</div>
            <div class="kcp__ba-tag kcp__ba-tag--r">ПОСЛЕ</div>
          </div>
          <div class="kcp__ba-hint">Потяните ползунок влево-вправо, чтобы сравнить</div>
        </div>
      </li>
      <li class="kcp__step">
        <div class="kcp__step-num">06</div>
        <div class="kcp__step-body">
          <h3>Фирменный стиль: открытки, визитки, носители</h3>
          <p>Оформили фирменные носители - визитки, открытки и другие материалы в единой стилистике. Компания получила узнаваемый облик, который работает на каждой точке контакта.</p>
          <div class="kcp__cards" data-cards></div>
          <div class="kcp__ph kcp__ph--grid">
            <div class="kcp__ph" data-img="brand1"><div class="kcp__ph-label">📷 визитки</div></div>
            <div class="kcp__ph" data-img="brand2" data-fit="contain"><div class="kcp__ph-label">📷 открытки</div></div>
            <div class="kcp__ph" data-img="brand3" data-fit="contain"><div class="kcp__ph-label">📷 др. носители</div></div>
          </div>
        </div>
      </li>
      <li class="kcp__step">
        <div class="kcp__step-num">07</div>
        <div class="kcp__step-body">
          <h3>Два сайта: povidlo.su и povidlo.pro</h3>
          <p>Сделали не языковой переключатель, а два отдельных сайта. Русский - povidlo.su, под брендом «Одоевские консервы». Английский - povidlo.pro, под экспортным брендом POVIDLO: отдельная структура и своя подача, адаптированная под зарубежных партнёров.</p>
          <p>Каждый из них работает сразу в трёх ролях: корпоративный сайт, каталог продукции и презентация для отдела продаж. Внутри - десять направлений продукции, производственные возможности, контроль качества и география поставок. Менеджеру достаточно дать ссылку вместо пересказа.</p>
          <div class="kcp__gal kcp__gal--site" data-sitegal></div>
          <div class="kcp__sitebtns">
            <a class="kcp__sitebtn" href="https://povidlo.su" target="_blank" rel="noopener">Открыть povidlo.su</a>
            <a class="kcp__sitebtn kcp__sitebtn--ghost" href="https://povidlo.pro" target="_blank" rel="noopener">Открыть povidlo.pro</a>
          </div>
          <div class="kcp__ph kcp__ph--wide" data-img="siteShots"><div class="kcp__ph-label">💻 Скриншоты povidlo.su и povidlo.pro</div></div>
        </div>
      </li>
      <li class="kcp__step kcp__step--next">
        <div class="kcp__step-num">→</div>
        <div class="kcp__step-body">
          <h3>Что дальше</h3>
          <p>Следующий этап - застройка выставочного стенда (планируется на зиму). Сотрудничество продолжается: от продукта на экране - к тому, как компания выглядит вживую на выставке.</p>
        </div>
      </li>
    </ol>
  </section>
  <!-- ===== РЕЗУЛЬТАТ ===== -->
  <section class="kcp__sec">
    <div class="kcp__result">
      <div class="kcp__kick">- ЧТО ИЗМЕНИЛОСЬ</div>
      <h2 class="kcp__h2">Компанию теперь можно показать, а не пересказывать</h2>
      <div class="kcp__result-grid">
        <div class="kcp__rcard"><div class="kcp__rc-t">Единый комплект</div><p>Видео, фото, презентация, логотип, фирменный стиль и сайт - собраны в одну систему и работают вместе.</p></div>
        <div class="kcp__rcard"><div class="kcp__rc-t">Масштаб виден сразу</div><p>Ассортимент, производство и контроль качества показаны на месте - на переговорах, выставках и в презентации, без долгих объяснений.</p></div>
        <div class="kcp__rcard"><div class="kcp__rc-t">Экспортное направление</div><p>Экспорт и представительства в Грузии и ОАЭ. Англоязычный povidlo.pro - то, чем компания представляет себя в регионе MENA.</p></div>
        <div class="kcp__rcard"><div class="kcp__rc-t">Долгое партнёрство</div><p>Сотрудничество выросло из одной видеосъёмки в постоянную работу над материалами компании.</p></div>
      </div>
    </div>
  </section>
  <!-- ===== ЧТО ВОШЛО (услуги) ===== -->
  <section class="kcp__sec">
    <div class="kcp__kick">- ЧТО ВОШЛО В КОМПЛЕКТ</div>
    <div class="kcp__chips">
      <span>Видеопродакшн</span><span>Съёмка производства</span><span>Фотосъёмка</span><span>Печатная презентация</span><span>Редизайн логотипа</span><span>Фирменный стиль</span><span>Визитки и открытки</span><span>Сайт RU</span><span>Сайт EN (MENA)</span>
    </div>
  </section>
  <!-- ===== ВИДЕО КЕЙСА (СКРЫТ) ===== -->
  <!-- СЕКЦИЯ СКРЫТА 28.08.2026. Причина: на странице уже четыре ролика (два в шаге 01 и фильм о заводе в шаге 03).
       Разметка и ключ KORS_CASE.videos.main оставлены нетронутыми. Чтобы вернуть секцию, снимите этот комментарий.
       ID ролика подставляется из KORS_CASE.videos.main
  <section class="kcp__sec">
    <div class="kcp__kick">- СМОТРЕТЬ</div>
    <h2 class="kcp__h2">Видео проекта</h2>
    <div class="kcp__video" data-video="main"><div class="kcp__ph-label">🎬 Основной ролик проекта</div></div>
  </section>
  -->
  <!-- ===== ОТЗЫВ КЛИЕНТА ===== -->
  <section class="kcp__sec">
    <div class="kcp__kick">- ОТЗЫВ</div>
    <h2 class="kcp__h2">Благодарственное письмо</h2>
    <p class="kcp__sub">ООО «МастерДжем» - юридическое лицо «Одоевских консервов»</p>
    <div class="kcp__letter"><img src="https://static.tildacdn.com/tild3231-6563-4932-b139-373433306561/pismo-odoevskie-1200.jpg" alt="Благодарственное письмо от ООО «МастерДжем» (Одоевские консервы) команде KORS Production за фото- и видеосъёмку производства и материалы для сайта и презентаций" loading="lazy"></div>
  </section>
  <!-- ===== ДРУГИЕ КЕЙСЫ ===== -->
  <section class="kcp__sec">
    <div class="kcp__kick">- ЕЩЁ</div>
    <h2 class="kcp__h2">Другие кейсы</h2>
    <div class="kcp__more">
      <a class="kcp__more-card" href="/case-invoicebox"><span>Кейс</span><b>Инвойсбокс</b><i>Видеоматериалы для платформы →</i></a>
      <a class="kcp__more-card" href="/case-vistex"><span>Кейс</span><b>Вистекс</b><i>Съёмка видео о предприятии →</i></a>
    </div>
  </section>
  <!-- ===== CTA ===== -->
  <section class="kcp__cta">
    <h2>Хотите так же показать своё производство?</h2>
    <p>Начнём с одного шага - а вырастем в полный цикл, если понравится результат.</p>
    <a class="kcp__cta-btn" href="#popup:zayavka">Обсудить проект →</a>
  </section>
  <!-- Лайтбокс. Тот же, что для благодарственных писем на главной, плюс листание. -->
  <div class="kcp__lb" id="kcpLb" aria-hidden="true">
    <div class="kcp__lbbd"></div>
    <div class="kcp__lbbox">
      <button class="kcp__lbx" id="kcpLbx" aria-label="Закрыть">×</button>
      <button class="kcp__lbnav kcp__lbnav--prev" id="kcpLbPrev" aria-label="Предыдущий">&#8249;</button>
      <img id="kcpLbImg" alt="">
      <button class="kcp__lbnav kcp__lbnav--next" id="kcpLbNext" aria-label="Следующий">&#8250;</button>
      <div class="kcp__lbcount" id="kcpLbCount"></div>
    </div>
  </div>
</div>
<style>
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Unbounded:wght@400;600;700;800&display=swap');
.kcp{--bg:#0C0C0E;--raise:#141416;--card:#1B1B1F;--border:#2A2A2E;--soft:#242428;--text:#F5F3EF;--muted:#9A9A9A;--faint:#6a6a6e;--accent:#6D5DFB;--glow:rgba(109,93,251,.14);
  box-sizing:border-box;background:var(--bg);color:var(--text);font-family:'Manrope',Arial,sans-serif;-webkit-font-smoothing:antialiased;}
.kcp *{box-sizing:border-box;margin:0;padding:0;}
.kcp p{line-height:1.65;}
.kcp__eyebrow,.kcp__kick{font-family:'Unbounded';font-size:12px;letter-spacing:.14em;color:var(--accent);}
.kcp__h2{font-family:'Unbounded';font-weight:700;font-size:clamp(26px,3.2vw,42px);letter-spacing:-.02em;line-height:1.12;margin:14px 0 0;}
.kcp__sub{color:var(--muted);font-size:17px;line-height:1.6;max-width:640px;margin-top:14px;}
/* HERO */
.kcp__hero{padding:70px 6vw 0;max-width:1280px;margin:0 auto;}
.kcp__hero-in{max-width:900px;}
.kcp__back{display:inline-block;color:var(--muted);text-decoration:none;font-size:14px;font-weight:600;margin-bottom:34px;transition:.2s;}
.kcp__back:hover{color:var(--accent);}
.kcp__hero .kcp__eyebrow{margin-bottom:18px;}
.kcp__title{font-family:'Unbounded';font-weight:800;font-size:clamp(40px,7vw,88px);letter-spacing:-.03em;line-height:1;margin-bottom:24px;}
.kcp__lead{font-size:clamp(18px,2vw,22px);line-height:1.55;color:#d8d6d1;max-width:760px;}
.kcp__tags{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 18px;}
.kcp__tag{font-family:'Manrope',Arial,sans-serif;font-weight:600;font-size:9px;line-height:1;text-transform:uppercase;letter-spacing:.14em;color:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.22);border-radius:4px;padding:5px 8px;white-space:nowrap;}
@media (max-width:480px){ .kcp__tag{font-size:8px;padding:5px 7px;} .kcp__tags{gap:5px;margin-bottom:14px;} }
.kcp__facts{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:14px;overflow:hidden;margin-top:44px;}
.kcp__fact{background:var(--raise);padding:20px 22px;display:flex;flex-direction:column;gap:7px;}
.kcp__fact span{font-size:12px;color:var(--faint);text-transform:uppercase;letter-spacing:.06em;}
.kcp__fact b{font-family:'Unbounded';font-weight:600;font-size:14px;line-height:1.3;}
.kcp__cover{margin:48px auto 0;max-width:1280px;aspect-ratio:16/8;border-radius:20px;}
/* SECTIONS */
.kcp__sec{max-width:1080px;margin:0 auto;padding:64px 6vw;}
.kcp__grid2{display:grid;grid-template-columns:0.85fr 1.15fr;gap:48px;align-items:start;}
.kcp__prose p{color:#c9c7c2;font-size:17px;margin-bottom:16px;}
.kcp__prose p:last-child{margin-bottom:0;}
.kcp__prose b{color:var(--text);font-weight:600;}
/* CALLOUT */
.kcp__callout{background:linear-gradient(135deg,rgba(109,93,251,.10),rgba(109,93,251,.02));border:1px solid rgba(109,93,251,.3);border-radius:18px;padding:40px 44px;}
.kcp__callout-k{font-family:'Unbounded';font-size:12px;letter-spacing:.14em;color:var(--accent);margin-bottom:14px;}
.kcp__callout-t{font-family:'Unbounded';font-weight:600;font-size:clamp(20px,2.4vw,30px);line-height:1.35;letter-spacing:-.01em;}
/* TIMELINE */
.kcp__timeline{list-style:none;margin-top:44px;display:flex;flex-direction:column;gap:26px;}
.kcp__step{display:grid;grid-template-columns:88px 1fr;gap:26px;background:var(--raise);border:1px solid var(--border);border-radius:18px;padding:30px 32px;transition:.25s;}
.kcp__step:hover{border-color:rgba(109,93,251,.4);}
.kcp__step-num{font-family:'Unbounded';font-weight:700;font-size:34px;color:var(--accent);line-height:1;opacity:.85;}
.kcp__step-body h3{font-family:'Unbounded';font-weight:600;font-size:22px;letter-spacing:-.01em;margin-bottom:12px;}
.kcp__step-body p{color:#c4c2bd;font-size:16px;}
.kcp__step--next{background:transparent;border-style:dashed;}
.kcp__step--next .kcp__step-num{opacity:1;}
/* PLACEHOLDERS */
.kcp__ph{position:relative;background:repeating-linear-gradient(45deg,#141416,#141416 12px,#17171a 12px,#17171a 24px);border:2px dashed #38383e;border-radius:14px;min-height:150px;display:flex;align-items:center;justify-content:center;text-align:center;}
.kcp__ph-label{color:#8a8a90;font-size:13px;font-weight:600;line-height:1.5;padding:16px;}
.kcp__ph-label small{color:var(--faint);font-weight:500;}
.kcp__ph--wide{margin-top:18px;aspect-ratio:16/8;min-height:0;}
.kcp__ph--grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:18px;background:none;border:none;padding:0;}
.kcp__ph--grid .kcp__ph{aspect-ratio:4/3;min-height:0;}
.kcp__cover.kcp__ph{aspect-ratio:16/8;}
/* BEFORE/AFTER */
.kcp__ba{position:relative;margin-top:20px;aspect-ratio:16/9;border-radius:16px;overflow:hidden;border:1px solid var(--border);user-select:none;}
.kcp__ba-after,.kcp__ba-before{position:absolute;inset:0;border-radius:0;border:none;}
.kcp__ba-before{width:100%;clip-path:inset(0 50% 0 0);}
.kcp__ba-handle{position:absolute;top:0;bottom:0;left:50%;width:2px;background:var(--accent);cursor:ew-resize;transform:translateX(-1px);}
.kcp__ba-handle span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:40px;height:40px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(0,0,0,.4);}
.kcp__ba-handle span::before{content:'⟷';color:#000;font-size:18px;font-weight:700;}
.kcp__ba-tag{position:absolute;top:14px;font-family:'Unbounded';font-size:11px;letter-spacing:.1em;background:rgba(0,0,0,.6);padding:5px 11px;border-radius:6px;}
.kcp__ba-tag--l{left:14px;}
.kcp__ba-tag--r{right:14px;}
.kcp__ba-hint{text-align:center;color:var(--faint);font-size:13px;margin-top:12px;}
/* RESULT */
.kcp__result-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:34px;}
.kcp__rcard{background:var(--raise);border:1px solid var(--border);border-radius:16px;padding:26px 28px;}
.kcp__rc-t{font-family:'Unbounded';font-weight:600;font-size:18px;color:var(--accent);margin-bottom:10px;}
.kcp__rcard p{color:#c4c2bd;font-size:15px;}
/* CHIPS */
.kcp__chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;}
.kcp__chips span{font-family:'Manrope';font-weight:600;font-size:14px;color:var(--text);background:rgba(109,93,251,.08);border:1px solid rgba(109,93,251,.4);border-radius:8px;padding:10px 16px;}
/* VIDEO */
.kcp__video{margin-top:24px;aspect-ratio:16/9;border-radius:18px;overflow:hidden;border:1px solid var(--border);background:#000;}
.kcp__video iframe{width:100%;height:100%;border:none;}
/* CTA */
.kcp__vid2{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px;}
.kcp__vid2 .kcp__ph{aspect-ratio:16/9;min-height:0;margin-top:0;}
.kcp__letter{margin-top:26px;max-width:440px;}
.kcp__letter img{display:block;width:100%;height:auto;border-radius:14px;border:1px solid var(--border);}
.kcp__more{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:28px;}
.kcp__more-card{display:block;background:var(--raise);border:1px solid var(--border);border-radius:16px;padding:24px 26px;text-decoration:none;transition:.2s;}
.kcp__more-card:hover{border-color:var(--accent);}
.kcp__more-card span{display:block;font-size:12px;letter-spacing:2px;color:var(--accent);text-transform:uppercase;margin-bottom:10px;}
.kcp__more-card b{display:block;font-family:'Unbounded',sans-serif;font-weight:700;font-size:22px;line-height:1.2;color:var(--text);margin-bottom:8px;}
.kcp__more-card i{font-style:normal;font-size:15px;color:var(--muted);}
@media (max-width:640px){.kcp__vid2{grid-template-columns:1fr;}.kcp__more{grid-template-columns:1fr;}}
/* --- Галерея разворотов презентации --- */
.kcp__gal{margin-top:18px;}
.kcp__galhead{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:12px;}
.kcp__galtabs{display:inline-flex;gap:4px;background:var(--soft);border:1px solid var(--border);border-radius:9px;padding:4px;}
.kcp__galtab{padding:7px 18px;border:none;background:none;color:var(--muted);font-family:'Manrope',Arial,sans-serif;font-weight:600;font-size:13px;line-height:1;letter-spacing:1.2px;border-radius:6px;cursor:pointer;transition:.2s;}
.kcp__galtab:hover{color:var(--text);}
.kcp__galtab.is-on{background:var(--accent);color:#fff;}
.kcp__galnote{margin-top:14px;font-size:13px;line-height:1.5;color:var(--muted);letter-spacing:.3px;}
.kcp__galnav{display:flex;gap:8px;flex-shrink:0;}
.kcp__galarrow{width:40px;height:40px;border:1px solid var(--border);background:var(--raise);border-radius:4px;color:var(--text);font:20px/1 Arial,sans-serif;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.2s;padding:0;}
.kcp__galarrow:hover{border-color:var(--accent);color:var(--accent);}
.kcp__galarrow:disabled{opacity:.3;cursor:default;border-color:var(--border);color:var(--text);}
.kcp__galtrack{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:4px;}
.kcp__galtrack::-webkit-scrollbar{display:none;}
.kcp__galcard{flex:0 0 calc((100% - 24px)/3);scroll-snap-align:start;display:block;padding:0;margin:0;border:1px solid var(--border);background:var(--raise);border-radius:10px;overflow:hidden;cursor:zoom-in;aspect-ratio:1200/873;transition:.2s;font:inherit;}
.kcp__galcard:hover{border-color:var(--accent);}
.kcp__galcard img{width:100%;height:100%;object-fit:cover;display:block;}
/* --- Лайтбокс --- */
.kcp__lb{position:fixed;inset:0;z-index:99999;display:none;align-items:center;justify-content:center;padding:64px 40px;}
.kcp__lb.open{display:flex;}
.kcp__lbbd{position:absolute;inset:0;background:rgba(4,4,6,.9);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);}
.kcp__lbbox{position:relative;width:auto;max-width:min(1100px,100%);display:flex;align-items:center;justify-content:center;}
.kcp__lbbox img{display:block;max-width:100%;max-height:calc(100vh - 170px);width:auto;height:auto;border-radius:10px;background:#0f0f11;}
.kcp__lbx{position:absolute;top:-48px;right:0;width:38px;height:38px;border-radius:9px;background:var(--raise);border:1px solid var(--border);color:var(--text);font:20px/1 Arial,sans-serif;cursor:pointer;padding:0;}
.kcp__lbx:hover{border-color:var(--accent);color:var(--accent);}
.kcp__lbnav{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;background:rgba(20,20,22,.85);border:1px solid var(--border);color:var(--text);font:22px/1 Arial,sans-serif;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.2s;padding:0;}
.kcp__lbnav:hover{border-color:var(--accent);color:var(--accent);}
.kcp__lbnav--prev{left:10px;}
.kcp__lbnav--next{right:10px;}
.kcp__lbcount{position:absolute;bottom:-36px;left:50%;transform:translateX(-50%);font-size:13px;color:var(--muted);letter-spacing:.4px;white-space:nowrap;}
@media (max-width:820px){.kcp__galcard{flex:0 0 calc((100% - 12px)/2);}.kcp__lb{padding:60px 12px;}.kcp__lbnav{width:40px;height:40px;}}
@media (max-width:480px){.kcp__galcard{flex:0 0 82%;}.kcp__galnav{display:none;}.kcp__galhead{margin-bottom:10px;}}
.kcp__cta{max-width:900px;margin:20px auto 0;padding:80px 6vw 96px;text-align:center;}
.kcp__cta h2{font-family:'Unbounded';font-weight:700;font-size:clamp(26px,3.4vw,42px);letter-spacing:-.02em;margin-bottom:16px;}
.kcp__cta p{color:var(--muted);font-size:18px;margin-bottom:30px;}
.kcp__cta-btn{display:inline-block;background:var(--accent);color:#fff;text-decoration:none;font-family:'Manrope';font-weight:700;font-size:16px;padding:18px 38px;border-radius:10px;transition:.25s;}
.kcp__cta-btn:hover{transform:translateY(-2px);box-shadow:0 14px 34px var(--glow);}
@media (max-width:820px){
  .kcp__facts{grid-template-columns:1fr 1fr;}
  .kcp__grid2{grid-template-columns:1fr;gap:20px;}
  .kcp__step{grid-template-columns:1fr;gap:14px;padding:24px 22px;}
  .kcp__step-num{font-size:28px;}
  .kcp__result-grid{grid-template-columns:1fr;}
  .kcp__ph--grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:480px){
  .kcp__hero{padding:48px 20px 0;}
  .kcp__sec{padding:48px 20px;}
  .kcp__facts{grid-template-columns:1fr;}
  .kcp__callout{padding:28px 24px;}
}
/* заполненные слоты (картинка/видео из конфига) */
.kcp [data-img].kcp--filled,.kcp [data-video].kcp--filled{background:none;border:none;}
.kcp [data-img] img,.kcp [data-video] img{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit;}
.kcp [data-fit="contain"] img{object-fit:contain;background:#0f0f11;padding:6%;}
.kcp [data-video].kcp--filled iframe{width:100%;height:100%;border:none;display:block;}
.kcp__ph.kcp--filled{padding:0;}
/* Визитки в шаге 06 - две карточки рядом, лайтбокс общий с галереей */
.kcp__cards{margin-top:18px}
.kcp__cardsrow{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.kcp__card{display:block;width:100%;padding:0;border:0;margin:0;background:#0f0f11;border-radius:14px;overflow:hidden;aspect-ratio:1680/952;cursor:zoom-in}
.kcp__card img{width:100%;height:100%;object-fit:cover;display:block}
.kcp__card:focus-visible{outline:2px solid #6D5DFB;outline-offset:3px}
.kcp__cardsnote{color:#9A9A9A;font-size:13px;line-height:1.5;margin-top:10px}
.kcp__ph--grid.is-two{grid-template-columns:repeat(2,1fr)}
@media (max-width:680px){.kcp__cardsrow{grid-template-columns:1fr}}
/* Галерея кадров фотосъёмки в шаге 04 */
.kcp__gal--photo .kcp__galcard{aspect-ratio:4/3}
/* Галерея скриншотов сайтов в шаге 07 */
.kcp__gal--site .kcp__galcard{flex:0 0 calc((100% - 12px)/2);aspect-ratio:16/9;background:#0f0f11}
.kcp__gal--site .kcp__galcard img{object-fit:contain}
.kcp__sitebtns{display:flex;flex-wrap:wrap;gap:12px;margin-top:16px}
.kcp__sitebtn{display:inline-block;background:var(--accent);color:#fff;text-decoration:none;font-family:'Manrope';font-weight:700;font-size:15px;line-height:1.2;padding:13px 24px;border-radius:10px;transition:.25s}
.kcp__sitebtn:hover{transform:translateY(-2px);box-shadow:0 12px 28px var(--glow)}
.kcp__sitebtn--ghost{background:transparent;color:var(--text);border:1px solid var(--border)}
.kcp__sitebtn--ghost:hover{border-color:var(--accent);box-shadow:none}
@media (max-width:480px){.kcp__gal--site .kcp__galcard{flex:0 0 88%}.kcp__sitebtn{flex:1 1 100%;text-align:center}}
</style>
<script>
(function(){
  var C=window.KORS_CASE||{}; var IMG=C.images||{}, VID=C.videos||{};
  document.querySelectorAll('.kcp [data-video]').forEach(function(el){
    var id=VID[el.getAttribute('data-video')];
    if(id){ el.classList.add('kcp--filled'); el.innerHTML='<iframe src="https://kinescope.io/embed/'+id+'" allow="autoplay; fullscreen; encrypted-media; picture-in-picture" allowfullscreen frameborder="0"></iframe>'; el.removeAttribute('data-img'); }
  });
  document.querySelectorAll('.kcp [data-img]').forEach(function(el){
    var url=IMG[el.getAttribute('data-img')];
    if(url){ el.classList.add('kcp--filled'); el.innerHTML='<img src="'+url+'" alt="">'; }
  });
})();
(function(){
  // Слайдер до/после
  var ba=document.getElementById('kcpBA'); if(!ba) return;
  var before=document.getElementById('kcpBABefore');
  var handle=document.getElementById('kcpBAHandle');
  var dragging=false;
  function setPos(clientX){
    var r=ba.getBoundingClientRect();
    var x=Math.max(0,Math.min(clientX-r.left,r.width));
    var pct=(x/r.width)*100;
    before.style.clipPath='inset(0 '+(100-pct)+'% 0 0)';
    handle.style.left=pct+'%';
  }
  handle.addEventListener('mousedown',function(){dragging=true;});
  window.addEventListener('mouseup',function(){dragging=false;});
  window.addEventListener('mousemove',function(e){ if(dragging) setPos(e.clientX); });
  handle.addEventListener('touchstart',function(){dragging=true;},{passive:true});
  window.addEventListener('touchend',function(){dragging=false;});
  window.addEventListener('touchmove',function(e){ if(dragging&&e.touches[0]) setPos(e.touches[0].clientX); },{passive:true});
  ba.addEventListener('click',function(e){ setPos(e.clientX); });
})();

(function(){
  var C=window.KORS_CASE||{}, SL=C.slides||[];
  var lb=document.getElementById('kcpLb'), lbi=document.getElementById('kcpLbImg'), lbc=document.getElementById('kcpLbCount');
  if(!lb||!lbi) return;
  var list=[], idx=0, lbl='';
  function render(){ lbi.src=list[idx]; lbi.alt=(lbl||'Разворот')+' '+(idx+1)+' из '+list.length; if(lbc) lbc.textContent=(idx+1)+' / '+list.length; }
  function open(arr,i,l){ list=arr; idx=i; lbl=l||''; lb.classList.add('open'); lb.setAttribute('aria-hidden','false'); document.documentElement.style.overflow='hidden'; render(); }
  function close(){ lb.classList.remove('open'); lb.setAttribute('aria-hidden','true'); document.documentElement.style.overflow=''; lbi.removeAttribute('src'); }
  function go(d){ if(list.length<2) return; idx=(idx+d+list.length)%list.length; render(); }
  window.kcpLightbox={open:open};
  function noteSlides(SETS, cur){
    var ru=SETS.filter(function(s){return s.id==='ru';})[0], en=SETS.filter(function(s){return s.id==='en';})[0];
    if(ru&&en) return (ru.items.length===en.items.length?'По '+ru.items.length+' разворотов в русской и английской версии':ru.items.length+' разворотов на русском и '+en.items.length+' на английском')+' - нажмите на разворот, чтобы рассмотреть';
    return cur.items.length+' разворотов - нажмите на разворот, чтобы рассмотреть';
  }
  function altSlide(i,n,cur){ return 'Разворот '+(i+1)+' печатной презентации «Одоевские консервы»'+(cur.id==='en'?', английская версия':''); }
  var PH_ALT = [
    'Фруктово-ягодные начинки разных вкусов, выложенные в ряд',
    'Круассаны в разрезе с фруктовой начинкой на деревянной доске',
    'Сотрудница лаборатории изучает образцы продукции под микроскопом',
    'Варочный котёл с ягодной массой, рядом работники в спецодежде',
    'Ягодное варенье в стеклянной посуде, вокруг свежие ягоды и яблоки',
    'Складские стеллажи с паллетами готовой продукции'
  ];
  function notePhoto(SETS, cur){
    return 'Продукция, упаковка и производство. Нажмите на кадр, чтобы рассмотреть';
  }
  function altPhoto(i,n,cur){ return PH_ALT[i] || ('Кадр '+(i+1)+' из '+n); }
  function noteSites(SETS, cur){
    return 'Вкладка RU - povidlo.su под брендом «Одоевские консервы», вкладка EN - povidlo.pro под экспортным брендом POVIDLO для рынка MENA. Нажмите на кадр, чтобы рассмотреть';
  }
  function altSite(i,n,cur){ return 'Экран '+(i+1)+' из '+n+' сайта '+(cur.id==='en'?'povidlo.pro':'povidlo.su'); }

  function makeGallery(gal, SETS, noteFn, altFn, label, fbSel){
    if(!gal || !SETS.length) return;
    if(fbSel){ var ph=gal.parentNode.querySelector(fbSel); if(ph) ph.style.display='none'; }
    var tabs=SETS.length>1 ? '<div class="kcp__galtabs" role="tablist">'+SETS.map(function(s,i){return '<button class="kcp__galtab'+(i===0?' is-on':'')+'" data-lang="'+s.id+'" role="tab" aria-selected="'+(i===0)+'">'+s.label+'</button>';}).join('')+'</div>' : '<span></span>';
    gal.innerHTML='<div class="kcp__galhead">'+tabs+'<div class="kcp__galnav"><button class="kcp__galarrow" data-gprev aria-label="Назад">&#8249;</button><button class="kcp__galarrow" data-gnext aria-label="Вперёд">&#8250;</button></div></div><div class="kcp__galtrack"></div><div class="kcp__galnote"></div>';
    var track=gal.querySelector('.kcp__galtrack'), note=gal.querySelector('.kcp__galnote');
    var gp=gal.querySelector('[data-gprev]'), gn=gal.querySelector('[data-gnext]');
    var cur=SETS[0];
    function fill(){
      var h='';
      for(var i=0;i<cur.items.length;i++){ h+='<button class="kcp__galcard" data-gi="'+i+'" aria-label="'+label+' '+(i+1)+' из '+cur.items.length+'"><img src="'+cur.items[i]+'" alt="'+altFn(i,cur.items.length,cur)+'" loading="lazy"></button>'; }
      track.innerHTML=h; track.scrollLeft=0; note.textContent=noteFn(SETS,cur); setTimeout(upd,60);
    }
    function step(){ var c=track.querySelector('.kcp__galcard'); return c?c.offsetWidth+12:320; }
    function upd(){ gp.disabled=track.scrollLeft<8; gn.disabled=track.scrollLeft+track.clientWidth>=track.scrollWidth-8; }
    gp.addEventListener('click',function(){ track.scrollLeft-=step(); });
    gn.addEventListener('click',function(){ track.scrollLeft+=step(); });
    track.addEventListener('scroll',upd); window.addEventListener('resize',upd);
    track.addEventListener('click',function(e){ var b=e.target&&e.target.closest?e.target.closest('.kcp__galcard'):null; if(!b) return; open(cur.items, parseInt(b.getAttribute('data-gi'),10)||0, label); });
    var tabEls=gal.querySelectorAll('.kcp__galtab');
    Array.prototype.forEach.call(tabEls,function(t){
      t.addEventListener('click',function(){
        var id=t.getAttribute('data-lang');
        var next=SETS.filter(function(s){return s.id===id;})[0];
        if(!next||next===cur) return;
        cur=next;
        Array.prototype.forEach.call(tabEls,function(o){ var on=o===t; o.classList.toggle('is-on',on); o.setAttribute('aria-selected',on); });
        fill();
      });
    });
    fill();
  }

  makeGallery(document.querySelector('.kcp [data-gallery]'),
    [{id:'ru',label:'RU',items:SL},{id:'en',label:'EN',items:C.slidesEn||[]}].filter(function(x){return x.items&&x.items.length;}),
    noteSlides, altSlide, 'Разворот', '[data-img="presentation"]');

  var PH = [C.images.product1, C.images.product2, C.images.product3, C.images.photo4, C.images.photo5, C.images.photo6].filter(Boolean);
  makeGallery(document.querySelector('.kcp [data-photogal]'),
    [{id:'ph',label:'Съёмка',items:PH}].filter(function(x){return x.items&&x.items.length;}),
    notePhoto, altPhoto, 'Кадр', '.kcp__ph--grid');

  makeGallery(document.querySelector('.kcp [data-sitegal]'),
    [{id:'ru',label:'RU',items:C.siteRu||[]},{id:'en',label:'EN',items:C.siteEn||[]}].filter(function(x){return x.items&&x.items.length;}),
    noteSites, altSite, 'Скриншот', '[data-img="siteShots"]');
  var x=document.getElementById('kcpLbx'); if(x) x.addEventListener('click',close);
  var pv=document.getElementById('kcpLbPrev'); if(pv) pv.addEventListener('click',function(e){ e.stopPropagation(); go(-1); });
  var nx=document.getElementById('kcpLbNext'); if(nx) nx.addEventListener('click',function(e){ e.stopPropagation(); go(1); });
  lb.addEventListener('click',function(e){ if(e.target===lbi) return; if(e.target&&e.target.closest&&e.target.closest('.kcp__lbnav,.kcp__lbx')) return; close(); });
  document.addEventListener('keydown',function(e){ if(!lb.classList.contains('open')) return; if(e.key==='Escape'||e.keyCode===27) close(); else if(e.key==='ArrowLeft'||e.keyCode===37) go(-1); else if(e.key==='ArrowRight'||e.keyCode===39) go(1); });
  var sx=0, sy=0;
  lb.addEventListener('touchstart',function(e){ if(!e.touches[0]) return; sx=e.touches[0].clientX; sy=e.touches[0].clientY; },{passive:true});
  lb.addEventListener('touchend',function(e){ var t=e.changedTouches&&e.changedTouches[0]; if(!t) return; var dx=t.clientX-sx, dy=t.clientY-sy; if(Math.abs(dx)>45&&Math.abs(dx)>Math.abs(dy)) go(dx<0?1:-1); },{passive:true});
})();

(function(){
  // Визитки шага 06: две карточки рядом, клик открывает общий лайтбокс.
  var C=window.KORS_CASE||{};
  var CARDS=(C.cards||[]).filter(Boolean);
  var box=document.querySelector('.kcp [data-cards]');
  if(!box) return;
  if(!CARDS.length){ box.style.display='none'; return; }
  var ph=document.querySelector('.kcp [data-img="brand1"]');
  if(ph){ ph.style.display='none'; if(ph.parentNode) ph.parentNode.classList.add('is-two'); }
  var ALT=['Визитка: владелец бизнеса','Визитка: менеджер по продажам'];
  var h='';
  for(var i=0;i<CARDS.length;i++){
    h+='<button type="button" class="kcp__card" data-i="'+i+'" aria-label="Открыть визитку '+(i+1)+' из '+CARDS.length+'"><img src="'+CARDS[i]+'" alt="'+(ALT[i]||'Визитка')+'" loading="lazy"></button>';
  }
  box.innerHTML='<div class="kcp__cardsrow">'+h+'</div><div class="kcp__cardsnote">Нажмите на визитку, чтобы рассмотреть</div>';
  box.addEventListener('click',function(e){
    var b=e.target&&e.target.closest?e.target.closest('.kcp__card'):null;
    if(!b) return;
    if(window.kcpLightbox) window.kcpLightbox.open(CARDS, parseInt(b.getAttribute('data-i'),10), 'Визитка');
  });
})();
</script>

rec2709838401 (28505 симв.) - /case-vistex 168797509

<!-- ============================================================
     KORS · КЕЙС · ВИСТЕКС
     Заполнение фото/видео - только в списке KORS_CASE ниже.
     ============================================================ -->
<script>
window.KORS_CASE = {
  images: {
    cover:     'https://static.tildacdn.com/tild3664-3263-4134-a264-346265333031/vx-cover-a-zavod.jpg',   // обложка вверху 2:1, стоп-кадр из фильма о заводе
    email:     'https://static.tildacdn.com/tild3132-6165-4266-a461-656338346239/vx-email.jpg',   // дизайн письма со встроенным видео (скрин)
    label1:    '',   // концепт этикетки/салфетки 1 (мультяшная стилистика)
    label2:    '',   // концепт этикетки/салфетки 2
    siteSoon:  ''    // макет сайта (в планах) - слот скрыт в разметке
  },
  // Концепты упаковки салфеток. Если массив пуст, шаг 03 показывает два одиночных слота label1/label2.
  labels: [
    'https://static.tildacdn.com/tild3961-3833-4932-a163-313038643335/vx-salfetki-pylesos.jpg',
    'https://static.tildacdn.com/tild3134-3133-4266-a566-636434663239/vx-salfetki-enot.jpg',
    'https://static.tildacdn.com/tild6361-3032-4439-b530-376236353062/vx-salfetki-pyatna.jpg',
    'https://static.tildacdn.com/tild3330-3533-4134-b432-373062633630/vx-salfetki-kuhnya.jpg'
  ],
  videos: {
    main:  'fv7FAnLfbLaDaNJLtSQ74H'   // главное видео о заводе (стоит наш ролик)
  }
};
</script>

<div class="kcp">
<header class="kcp__hero">
    <div class="kcp__hero-in">
      <a class="kcp__back" href="/#rec2667018101">← Все проекты</a>
      <div class="kcp__eyebrow">КЕЙС · ПРОИЗВОДСТВО · ВИДЕО</div>
      <h1 class="kcp__title">Вистекс</h1>
      <div class="kcp__tags"><span class="kcp__tag">Видео</span><span class="kcp__tag">Дизайн</span></div>
      <p class="kcp__lead">Как уложить многопрофильное производство в трёхминутный ролик - и превратить его в рабочий инструмент отдела продаж.</p>
      <div class="kcp__facts">
        <div class="kcp__fact"><span>Сфера</span><b>Нетканые материалы · B2B</b></div>
        <div class="kcp__fact"><span>С чего начали</span><b>Видео о заводе</b></div>
        <div class="kcp__fact"><span>Результат</span><b>Ролик работает в продажах</b></div>
        <div class="kcp__fact"><span>Дальше</span><b>Этикетки, салфетки, сайт</b></div>
      </div>
    </div>
    <div class="kcp__cover kcp__ph" data-img="cover"><div class="kcp__ph-label">📷 Обложка: производство / нетканые полотна (2:1)</div></div>
  </header>
  <section class="kcp__sec">
    <div class="kcp__grid2">
      <div><div class="kcp__kick">- О КОМПАНИИ</div><h2 class="kcp__h2">Большой завод и продукция для разных отраслей</h2></div>
      <div class="kcp__prose">
        <p>«Вистекс» - один из крупнейших производителей нетканых полотен в европейской части России (работает с 1992 года, завод в подмосковном Кудинове). Продукция идёт в разные отрасли промышленности: геотекстиль, материалы для обуви и мебели, для автопрома, напольных покрытий, протирочных салфеток, фильтров и другие.</p>
        <p>Производство мощное и разнообразное - но именно в этом сложность: <b>рассказать клиенту про все направления и масштаб</b> коротко и понятно почти невозможно, если делать это на словах.</p>
      </div>
    </div>
  </section>
  <section class="kcp__sec">
    <div class="kcp__callout">
      <div class="kcp__callout-k">ЗАДАЧА</div>
      <div class="kcp__callout-t">За несколько минут показать масштаб завода и все направления так, чтобы клиент увидел: здесь закроют его задачу - какой бы она ни была.</div>
    </div>
  </section>
  <section class="kcp__sec">
    <div class="kcp__kick">- КАК ШЛА РАБОТА</div>
    <h2 class="kcp__h2">От ролика о заводе - к письму для продаж</h2>
    <p class="kcp__sub">Начали с одного большого видео о производстве - и оно стало рабочим инструментом, который принёс заводу конкретный результат.</p>
    <ol class="kcp__timeline">
      <li class="kcp__step"><div class="kcp__step-num">01</div><div class="kcp__step-body">
        <h3>Видео о заводе: производство за 3 минуты</h3>
        <p>Сняли ключевой ролик о производстве: за три минуты показали производство и линейку продукции завода. Плотно, наглядно, без воды - уровень продакшена под стать масштабу компании.</p>
        <div class="kcp__ph kcp__ph--wide" data-video="main"><div class="kcp__ph-label">🎬 Видео о заводе (Kinescope)</div></div>
      </div></li>
      <li class="kcp__step"><div class="kcp__step-num">02</div><div class="kcp__step-body">
        <h3>Дизайн письма со встроенным видео</h3>
        <p>Ролик начали отправлять клиентам - и мы собрали под него готовое HTML-письмо для рассылки коммерческих предложений. Внутри: логотип завода, короткий текст от менеджера по развитию, превью ролика с кнопкой воспроизведения и пометка, что коммерческое предложение приложено отдельным файлом.</p>
        <p>Что изменилось в работе: <b>коммерческие предложения уходят вместе с роликом, и продукт больше не приходится объяснять текстом - клиент сразу видит завод, линии и готовую продукцию.</b></p>
        <div class="kcp__ph kcp__ph--mail" data-img="email"><div class="kcp__ph-label">✉️ дизайн письма со встроенным видео (скрин)</div></div>
      </div></li>
      <li class="kcp__step"><div class="kcp__step-num">03</div><div class="kcp__step-body">
        <h3>Дизайн этикеток и салфеток - концепты</h3>
        <p>Пошли дальше в брендинг потребительской продукции. Предложили заводу концепты дизайна этикеток и салфеток в фирменной мультяшной стилистике: нарисовали графику, написали тексты и описания - всё под ключ с нашей стороны.</p>
        <div class="kcp__gal kcp__gal--pack" data-labelgal></div>
        <div class="kcp__ph kcp__ph--grid">
          <div class="kcp__ph" data-img="label1"><div class="kcp__ph-label">🎨 концепт этикетки/салфетки 1</div></div>
          <div class="kcp__ph" data-img="label2"><div class="kcp__ph-label">🎨 концепт этикетки/салфетки 2</div></div>
        </div>
      </div></li>
      <li class="kcp__step kcp__step--next"><div class="kcp__step-num">→</div><div class="kcp__step-body">
        <h3>Что дальше</h3>
        <p>Следующий этап - сайт завода: единая витрина всех направлений с той же понятной подачей, что и в видео.</p>
        <!-- СЛОТ СКРЫТ 28.08.2026. Причина: макета сайта пока нет, заглушка оставляла пустое место. Ключ images.siteSoon в конфиге сохранён - чтобы вернуть слот, снимите этот комментарий.
        <div class="kcp__ph kcp__ph--wide" data-img="siteSoon"><div class="kcp__ph-label">макет сайта (появится)</div></div>
        -->
      </div></li>
    </ol>
  </section>
  <section class="kcp__sec">
    <div class="kcp__result">
      <div class="kcp__kick">- ЧТО ИЗМЕНИЛОСЬ</div>
      <h2 class="kcp__h2">Ролик и письмо, которые работают в продажах</h2>
      <div class="kcp__result-grid">
        <div class="kcp__rcard"><div class="kcp__rc-t">Всё производство за 3 минуты</div><p>Сложное многопрофильное производство укладывается в один понятный ролик.</p></div>
        <div class="kcp__rcard"><div class="kcp__rc-t">Продукт стали понимать</div><p>С письмом и видео клиенты сразу видят, что завод может закрыть их потребности.</p></div>
        <div class="kcp__rcard"><div class="kcp__rc-t">Продажи с видео в руках</div><p>Менеджеры отправляют коммерческие предложения вместе с роликом - завод показывают, а не пересказывают.</p></div>
        <div class="kcp__rcard"><div class="kcp__rc-t">Развитие бренда</div><p>Концепты этикеток и салфеток, впереди - сайт завода.</p></div>
      </div>
    </div>
  </section>
  <section class="kcp__sec">
    <div class="kcp__kick">- ЧТО ВОШЛО В РАБОТУ</div>
    <div class="kcp__chips">
      <span>Видеопродакшн</span><span>Съёмка производства</span><span>Сценарий ролика</span><span>Email-дизайн</span><span>Видео в письме</span><span>Концепты этикеток и салфеток</span><span>Копирайтинг</span><span>Сайт (в планах)</span>
    </div>
  </section>
  <!-- ===== ВИДЕО ПРОЕКТА (СКРЫТО) =====
     СЕКЦИЯ СКРЫТА 28.08.2026. Причина: тот же ролик уже стоит в шаге 01, на странице он дублировался.
     Разметка сохранена целиком. Чтобы вернуть секцию, снимите этот комментарий.
  <section class="kcp__sec">
    <div class="kcp__kick">- СМОТРЕТЬ</div>
    <h2 class="kcp__h2">Видео проекта</h2>
    <div class="kcp__video"><iframe src="https://kinescope.io/embed/fv7FAnLfbLaDaNJLtSQ74H" allow="autoplay; fullscreen; encrypted-media; picture-in-picture" allowfullscreen frameborder="0"></iframe></div>
  </section>
  -->
  <section class="kcp__sec">
    <div class="kcp__kick">- ОТЗЫВ</div>
    <h2 class="kcp__h2">Благодарственное письмо</h2>
    <p class="kcp__sub">ООО «Вистекс» - производитель нетканых полотен, завод в подмосковном Кудинове</p>
    <div class="kcp__letter"><img src="https://static.tildacdn.com/tild3665-6165-4336-a262-666463636263/pismo-visteks-1200.jpg" alt="Благодарственное письмо от ООО «Вистекс» команде KORS Production за фильм о производстве и дизайн материалов" loading="lazy"></div>
  </section>
  <section class="kcp__sec">
    <div class="kcp__kick">- ЕЩЁ</div>
    <h2 class="kcp__h2">Другие кейсы</h2>
    <div class="kcp__more">
      <a class="kcp__more-card" href="/case-odoevskie"><span>Кейс</span><b>Одоевские консервы</b><i>Съёмка производства и ребрендинг →</i></a>
      <a class="kcp__more-card" href="/case-invoicebox"><span>Кейс</span><b>Инвойсбокс</b><i>Видеоматериалы для платформы →</i></a>
    </div>
  </section>
  <section class="kcp__cta">
    <h2>Сложное производство? Покажем за минуты.</h2>
    <p>Упакуем ваш завод в видео и материалы, с которыми проще продавать.</p>
    <a class="kcp__cta-btn" href="#popup:zayavka">Обсудить проект →</a>
  </section>
</div>

<style>
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Unbounded:wght@400;600;700;800&display=swap');
.kcp{--bg:#0C0C0E;--raise:#141416;--card:#1B1B1F;--border:#2A2A2E;--soft:#242428;--text:#F5F3EF;--muted:#9A9A9A;--faint:#6a6a6e;--accent:#6D5DFB;--glow:rgba(109,93,251,.14);
  box-sizing:border-box;background:var(--bg);color:var(--text);font-family:'Manrope',Arial,sans-serif;-webkit-font-smoothing:antialiased;}
.kcp *{box-sizing:border-box;margin:0;padding:0;}
.kcp p{line-height:1.65;}
.kcp__eyebrow,.kcp__kick{font-family:'Unbounded';font-size:12px;letter-spacing:.14em;color:var(--accent);}
.kcp__h2{font-family:'Unbounded';font-weight:700;font-size:clamp(26px,3.2vw,42px);letter-spacing:-.02em;line-height:1.12;margin:14px 0 0;}
.kcp__sub{color:var(--muted);font-size:17px;line-height:1.6;max-width:640px;margin-top:14px;}
.kcp__hero{padding:70px 6vw 0;max-width:1280px;margin:0 auto;}
.kcp__hero-in{max-width:900px;}
.kcp__back{display:inline-block;color:var(--muted);text-decoration:none;font-size:14px;font-weight:600;margin-bottom:34px;transition:.2s;}
.kcp__back:hover{color:var(--accent);}
.kcp__hero .kcp__eyebrow{margin-bottom:18px;}
.kcp__title{font-family:'Unbounded';font-weight:800;font-size:clamp(40px,7vw,88px);letter-spacing:-.03em;line-height:1;margin-bottom:24px;}
.kcp__lead{font-size:clamp(18px,2vw,22px);line-height:1.55;color:#d8d6d1;max-width:760px;}
.kcp__tags{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 18px;}
.kcp__tag{font-family:'Manrope',Arial,sans-serif;font-weight:600;font-size:9px;line-height:1;text-transform:uppercase;letter-spacing:.14em;color:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.22);border-radius:4px;padding:5px 8px;white-space:nowrap;}
@media (max-width:480px){ .kcp__tag{font-size:8px;padding:5px 7px;} .kcp__tags{gap:5px;margin-bottom:14px;} }
.kcp__facts{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:14px;overflow:hidden;margin-top:44px;}
.kcp__fact{background:var(--raise);padding:20px 22px;display:flex;flex-direction:column;gap:7px;}
.kcp__fact span{font-size:12px;color:var(--faint);text-transform:uppercase;letter-spacing:.06em;}
.kcp__fact b{font-family:'Unbounded';font-weight:600;font-size:14px;line-height:1.3;}
.kcp__cover{margin:48px auto 0;max-width:1280px;aspect-ratio:16/8;border-radius:20px;}
.kcp__sec{max-width:1080px;margin:0 auto;padding:64px 6vw;}
.kcp__grid2{display:grid;grid-template-columns:0.85fr 1.15fr;gap:48px;align-items:start;}
.kcp__prose p{color:#c9c7c2;font-size:17px;margin-bottom:16px;}
.kcp__prose p:last-child{margin-bottom:0;}
.kcp__prose b{color:var(--text);font-weight:600;}
.kcp__callout{background:linear-gradient(135deg,rgba(109,93,251,.10),rgba(109,93,251,.02));border:1px solid rgba(109,93,251,.3);border-radius:18px;padding:40px 44px;}
.kcp__callout-k{font-family:'Unbounded';font-size:12px;letter-spacing:.14em;color:var(--accent);margin-bottom:14px;}
.kcp__callout-t{font-family:'Unbounded';font-weight:600;font-size:clamp(20px,2.4vw,30px);line-height:1.35;letter-spacing:-.01em;}
.kcp__timeline{list-style:none;margin-top:44px;display:flex;flex-direction:column;gap:26px;}
.kcp__step{display:grid;grid-template-columns:88px 1fr;gap:26px;background:var(--raise);border:1px solid var(--border);border-radius:18px;padding:30px 32px;transition:.25s;}
.kcp__step:hover{border-color:rgba(109,93,251,.4);}
.kcp__step-num{font-family:'Unbounded';font-weight:700;font-size:34px;color:var(--accent);line-height:1;opacity:.85;}
.kcp__step-body h3{font-family:'Unbounded';font-weight:600;font-size:22px;letter-spacing:-.01em;margin-bottom:12px;}
.kcp__step-body p{color:#c4c2bd;font-size:16px;}
.kcp__step--next{background:transparent;border-style:dashed;}
.kcp__step--next .kcp__step-num{opacity:1;}
.kcp__ph{position:relative;background:repeating-linear-gradient(45deg,#141416,#141416 12px,#17171a 12px,#17171a 24px);border:2px dashed #38383e;border-radius:14px;min-height:150px;display:flex;align-items:center;justify-content:center;text-align:center;}
.kcp__ph-label{color:#8a8a90;font-size:13px;font-weight:600;line-height:1.5;padding:16px;}
.kcp__ph-label small{color:var(--faint);font-weight:500;}
.kcp__ph--wide{margin-top:18px;aspect-ratio:16/8;min-height:0;}
.kcp__ph--mail{margin:18px auto 0;aspect-ratio:1200/1078;min-height:0;max-width:620px;}
.kcp__ph--grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:18px;background:none;border:none;padding:0;}
.kcp__ph--grid .kcp__ph{aspect-ratio:4/3;min-height:0;}
.kcp__cover.kcp__ph{aspect-ratio:16/8;}
.kcp__ba{position:relative;margin-top:20px;aspect-ratio:16/9;border-radius:16px;overflow:hidden;border:1px solid var(--border);user-select:none;}
.kcp__ba-after,.kcp__ba-before{position:absolute;inset:0;border-radius:0;border:none;}
.kcp__ba-before{width:100%;clip-path:inset(0 50% 0 0);}
.kcp__ba-handle{position:absolute;top:0;bottom:0;left:50%;width:2px;background:var(--accent);cursor:ew-resize;transform:translateX(-1px);}
.kcp__ba-handle span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:40px;height:40px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(0,0,0,.4);}
.kcp__ba-handle span::before{content:'⟷';color:#000;font-size:18px;font-weight:700;}
.kcp__ba-tag{position:absolute;top:14px;font-family:'Unbounded';font-size:11px;letter-spacing:.1em;background:rgba(0,0,0,.6);padding:5px 11px;border-radius:6px;}
.kcp__ba-tag--l{left:14px;}
.kcp__ba-tag--r{right:14px;}
.kcp__ba-hint{text-align:center;color:var(--faint);font-size:13px;margin-top:12px;}
.kcp__result-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:34px;}
.kcp__rcard{background:var(--raise);border:1px solid var(--border);border-radius:16px;padding:26px 28px;}
.kcp__rc-t{font-family:'Unbounded';font-weight:600;font-size:18px;color:var(--accent);margin-bottom:10px;}
.kcp__rcard p{color:#c4c2bd;font-size:15px;}
.kcp__chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;}
.kcp__chips span{font-family:'Manrope';font-weight:600;font-size:14px;color:var(--text);background:rgba(109,93,251,.08);border:1px solid rgba(109,93,251,.4);border-radius:8px;padding:10px 16px;}
.kcp__video{margin-top:24px;aspect-ratio:16/9;border-radius:18px;overflow:hidden;border:1px solid var(--border);background:#000;}
.kcp__video iframe{width:100%;height:100%;border:none;}
.kcp__cta{max-width:900px;margin:20px auto 0;padding:80px 6vw 96px;text-align:center;}
.kcp__cta h2{font-family:'Unbounded';font-weight:700;font-size:clamp(26px,3.4vw,42px);letter-spacing:-.02em;margin-bottom:16px;}
.kcp__cta p{color:var(--muted);font-size:18px;margin-bottom:30px;}
.kcp__cta-btn{display:inline-block;background:var(--accent);color:#fff;text-decoration:none;font-family:'Manrope';font-weight:700;font-size:16px;padding:18px 38px;border-radius:10px;transition:.25s;}
.kcp__cta-btn:hover{transform:translateY(-2px);box-shadow:0 14px 34px var(--glow);}
@media (max-width:820px){
  .kcp__facts{grid-template-columns:1fr 1fr;}
  .kcp__grid2{grid-template-columns:1fr;gap:20px;}
  .kcp__step{grid-template-columns:1fr;gap:14px;padding:24px 22px;}
  .kcp__step-num{font-size:28px;}
  .kcp__result-grid{grid-template-columns:1fr;}
  .kcp__ph--grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:480px){
  .kcp__hero{padding:48px 20px 0;}
  .kcp__sec{padding:48px 20px;}
  .kcp__facts{grid-template-columns:1fr;}
  .kcp__callout{padding:28px 24px;}
}
.kcp [data-img].kcp--filled,.kcp [data-video].kcp--filled{background:none;border:none;}
.kcp [data-img] img,.kcp [data-video] img{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit;}
.kcp [data-fit="contain"] img{object-fit:contain;background:#0f0f11;padding:6%;}
.kcp [data-video].kcp--filled iframe{width:100%;height:100%;border:none;display:block;}
.kcp__ph.kcp--filled{padding:0;}

.kcp__letter{margin-top:26px;max-width:440px;}
.kcp__letter img{display:block;width:100%;height:auto;border-radius:14px;border:1px solid var(--border);}
.kcp__more{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:28px;}
.kcp__more-card{display:block;background:var(--raise);border:1px solid var(--border);border-radius:16px;padding:24px 26px;text-decoration:none;transition:.2s;}
.kcp__more-card:hover{border-color:var(--accent);}
.kcp__more-card span{display:block;font-size:12px;letter-spacing:2px;color:var(--accent);text-transform:uppercase;margin-bottom:10px;}
.kcp__more-card b{display:block;font-family:Unbounded,sans-serif;font-weight:700;font-size:22px;line-height:1.2;color:var(--text);margin-bottom:8px;}
.kcp__more-card i{font-style:normal;font-size:15px;color:var(--muted);}
.kcp--filled img{cursor:zoom-in;}
.kcp__letter img{cursor:zoom-in;}
.kcp__lb{position:fixed;inset:0;z-index:99999;display:none;align-items:center;justify-content:center;padding:64px 40px;}
.kcp__lb.open{display:flex;}
.kcp__lbbd{position:absolute;inset:0;background:rgba(4,4,6,.9);backdrop-filter:blur(4px);}
.kcp__lbbox{position:relative;max-width:min(1100px,100%);display:flex;align-items:center;justify-content:center;}
.kcp__lbbox img{display:block;max-width:100%;max-height:calc(100vh - 170px);width:auto;height:auto;border-radius:10px;background:#0f0f11;}
.kcp__lbx{position:absolute;top:-48px;right:0;width:38px;height:38px;border-radius:9px;background:var(--raise);border:1px solid var(--border);color:var(--text);font:20px/1 Arial,sans-serif;cursor:pointer;padding:0;}
.kcp__lbx:hover{border-color:var(--accent);color:var(--accent);}
.kcp__lbnav{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;background:var(--raise);border:1px solid var(--border);color:var(--text);font:20px/1 Arial,sans-serif;cursor:pointer;padding:0;}
.kcp__lbnav.prev{left:-58px;}
.kcp__lbnav.next{right:-58px;}
.kcp__lbnav:hover{border-color:var(--accent);color:var(--accent);}
.kcp__lbcap{position:absolute;left:0;right:0;bottom:-38px;text-align:center;color:var(--muted);font-size:14px;}
@media (max-width:640px){.kcp__lb{padding:56px 14px;}.kcp__lbnav.prev{left:2px;}.kcp__lbnav.next{right:2px;}.kcp__more{grid-template-columns:1fr;}.kcp__letter{max-width:100%;}}

.kcp__gal{margin-top:18px;}
.kcp__galhead{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:12px;}
.kcp__galtabs{display:inline-flex;gap:4px;background:var(--soft);border:1px solid var(--border);border-radius:9px;padding:4px;}
.kcp__galtab{padding:7px 18px;border:none;background:none;color:var(--muted);font-family:'Manrope',Arial,sans-serif;font-weight:600;font-size:13px;line-height:1;letter-spacing:1.2px;border-radius:6px;cursor:pointer;transition:.2s;}
.kcp__galtab:hover{color:var(--text);}
.kcp__galtab.is-on{background:var(--accent);color:#fff;}
.kcp__galnote{margin-top:14px;font-size:13px;line-height:1.5;color:var(--muted);letter-spacing:.3px;}
.kcp__galnav{display:flex;gap:8px;flex-shrink:0;}
.kcp__galarrow{width:40px;height:40px;border:1px solid var(--border);background:var(--raise);border-radius:4px;color:var(--text);font:20px/1 Arial,sans-serif;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.2s;padding:0;}
.kcp__galarrow:hover{border-color:var(--accent);color:var(--accent);}
.kcp__galarrow:disabled{opacity:.3;cursor:default;border-color:var(--border);color:var(--text);}
.kcp__galtrack{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:4px;}
.kcp__galtrack::-webkit-scrollbar{display:none;}
.kcp__galcard{flex:0 0 calc((100% - 24px)/3);scroll-snap-align:start;display:block;padding:0;margin:0;border:1px solid var(--border);background:#0f0f11;border-radius:10px;overflow:hidden;cursor:zoom-in;aspect-ratio:3/4;transition:.2s;font:inherit;}
.kcp__galcard:hover{border-color:var(--accent);}
.kcp__galcard img{width:100%;height:100%;object-fit:contain;display:block;}
@media (max-width:820px){.kcp__galcard{flex:0 0 calc((100% - 12px)/2);}}
@media (max-width:480px){.kcp__galcard{flex:0 0 76%;}.kcp__galnav{display:none;}.kcp__galhead{margin-bottom:10px;}}
</style>
<script>
(function(){
  var C=window.KORS_CASE||{}; var IMG=C.images||{}, VID=C.videos||{};
  var ALT={cover:'Завод «Вистекс» - производство нетканых полотен, кадр из фильма KORS Production',email:'Письмо для рассылки коммерческих предложений завода «Вистекс»: логотип, короткий текст и превью ролика о производстве с кнопкой воспроизведения',label1:'Концепт дизайна этикетки для продукции завода «Вистекс»',label2:'Концепт дизайна протирочных салфеток для завода «Вистекс»',siteSoon:'Макет сайта завода «Вистекс»'};
  document.querySelectorAll('.kcp [data-video]').forEach(function(el){
    var id=VID[el.getAttribute('data-video')];
    if(id){ el.classList.add('kcp--filled'); el.innerHTML='<iframe src="https://kinescope.io/embed/'+id+'" allow="autoplay; fullscreen; encrypted-media; picture-in-picture" allowfullscreen frameborder="0"></iframe>'; el.removeAttribute('data-img'); }
  });
  document.querySelectorAll('.kcp [data-img]').forEach(function(el){
    var url=IMG[el.getAttribute('data-img')];
    if(url){ el.classList.add('kcp--filled'); el.innerHTML='<img src="'+url+'" alt="'+(ALT[el.getAttribute('data-img')]||'')+'" loading="lazy">'; }
  });
})();
</script>

<script>
(function(){
  var root=document.querySelector('.kcp'); if(!root) return;
  var lb=document.createElement('div'); lb.className='kcp__lb';
  lb.innerHTML='<div class="kcp__lbbd"></div><div class="kcp__lbbox"><button class="kcp__lbx" type="button" aria-label="Закрыть">×</button><button class="kcp__lbnav prev" type="button" aria-label="Предыдущий кадр">‹</button><img alt=""><button class="kcp__lbnav next" type="button" aria-label="Следующий кадр">›</button><div class="kcp__lbcap"></div></div>';
  document.body.appendChild(lb);
  var pic=lb.querySelector('.kcp__lbbox img'), cap=lb.querySelector('.kcp__lbcap');
  var prev=lb.querySelector('.prev'), next=lb.querySelector('.next');
  var list=[], idx=0;
  function norm(el){ return {src: el.currentSrc||el.src, alt: el.alt||''}; }
  function collect(){ list=[].slice.call(root.querySelectorAll('.kcp--filled img, .kcp__letter img')).map(norm); }
  function show(){ var it=list[idx]; if(!it) return; pic.src=it.src; pic.alt=it.alt||''; var multi=list.length>1; cap.textContent=multi?(idx+1)+' из '+list.length:''; prev.style.display=multi?'':'none'; next.style.display=multi?'':'none'; }
  function open(i){ idx=i; show(); lb.classList.add('open'); document.documentElement.style.overflow='hidden'; }
  function close(){ lb.classList.remove('open'); pic.src=''; document.documentElement.style.overflow=''; }
  function step(d){ if(!list.length) return; idx=(idx+d+list.length)%list.length; show(); }
  root.addEventListener('click',function(e){ var t=e.target; if(!t || t.tagName!=='IMG') return; if(!t.closest('.kcp--filled, .kcp__letter')) return; var els=[].slice.call(root.querySelectorAll('.kcp--filled img, .kcp__letter img')); var i=els.indexOf(t); if(i<0) return; e.preventDefault(); collect(); open(i); });
  window.kcpLightbox={ open:function(arr,i,lbl){ if(!arr||!arr.length) return; list=arr.map(function(u,k){ return {src:u, alt:(lbl||'Кадр')+' '+(k+1)+' из '+arr.length}; }); open(i||0); } };
  lb.querySelector('.kcp__lbbd').addEventListener('click',close);
  lb.querySelector('.kcp__lbx').addEventListener('click',close);
  prev.addEventListener('click',function(){ step(-1); });
  next.addEventListener('click',function(){ step(1); });
  document.addEventListener('keydown',function(e){ if(!lb.classList.contains('open')) return; if(e.key==='Escape') close(); else if(e.key==='ArrowLeft') step(-1); else if(e.key==='ArrowRight') step(1); });
})();
</script>

<script>
(function(){
  var C=window.KORS_CASE||{};
  var ALT=['Концепт упаковки протирочных салфеток «ПылеSOS» для завода «Вистекс»: коты-супергерои на синей этикетке','Концепт упаковки вискозных салфеток «Вистекс» 30х40 см: енот в лабораторном халате на синей этикетке','Концепт упаковки вискозных салфеток «Вистекс» 30х40 см: салфетка-супергерой против пятен на фиолетовой этикетке','Концепт упаковки вискозных салфеток «Вистекс» 30х40 см: салфетки-персонажи на кухне на синей этикетке'];
  function makeGallery(gal, SETS, noteFn, altFn, label, fbSel){
    if(!gal || !SETS.length) return;
    if(fbSel){ var ph=gal.parentNode.querySelector(fbSel); if(ph) ph.style.display='none'; }
    var tabs=SETS.length>1 ? '<div class="kcp__galtabs" role="tablist">'+SETS.map(function(s,i){return '<button class="kcp__galtab'+(i===0?' is-on':'')+'" data-lang="'+s.id+'" role="tab" aria-selected="'+(i===0)+'">'+s.label+'</button>';}).join('')+'</div>' : '<span></span>';
    gal.innerHTML='<div class="kcp__galhead">'+tabs+'<div class="kcp__galnav"><button class="kcp__galarrow" type="button" data-gprev aria-label="Назад">&#8249;</button><button class="kcp__galarrow" type="button" data-gnext aria-label="Вперёд">&#8250;</button></div></div><div class="kcp__galtrack"></div><div class="kcp__galnote"></div>';
    var track=gal.querySelector('.kcp__galtrack'), note=gal.querySelector('.kcp__galnote');
    var gp=gal.querySelector('[data-gprev]'), gn=gal.querySelector('[data-gnext]');
    var cur=SETS[0];
    function fill(){
      var h='';
      for(var i=0;i<cur.items.length;i++){ h+='<button class="kcp__galcard" type="button" data-gi="'+i+'" aria-label="'+label+' '+(i+1)+' из '+cur.items.length+'"><img src="'+cur.items[i]+'" alt="'+altFn(i,cur.items.length,cur)+'" loading="lazy"></button>'; }
      track.innerHTML=h; track.scrollLeft=0; note.textContent=noteFn(SETS,cur); setTimeout(upd,60);
    }
    function step(){ var c=track.querySelector('.kcp__galcard'); return c?c.offsetWidth+12:320; }
    function upd(){ gp.disabled=track.scrollLeft<8; gn.disabled=track.scrollLeft+track.clientWidth>=track.scrollWidth-8; }
    gp.addEventListener('click',function(){ track.scrollLeft-=step(); });
    gn.addEventListener('click',function(){ track.scrollLeft+=step(); });
    track.addEventListener('scroll',upd); window.addEventListener('resize',upd);
    track.addEventListener('click',function(e){ var b=e.target&&e.target.closest?e.target.closest('.kcp__galcard'):null; if(!b) return; if(window.kcpLightbox) window.kcpLightbox.open(cur.items, parseInt(b.getAttribute('data-gi'),10)||0, label); });
    fill();
  }
  makeGallery(document.querySelector('.kcp [data-labelgal]'),
    [{id:'pack',label:'Упаковка',items:C.labels||[]}].filter(function(x){return x.items&&x.items.length;}),
    function(){ return 'Концепты упаковки протирочных салфеток. Нажмите на кадр, чтобы рассмотреть'; },
    function(i){ return ALT[i]||('Концепт упаковки салфеток «Вистекс» '+(i+1)); },
    'Концепт', '.kcp__ph--grid');
})();
</script>

rec2709724901 (21538 симв.) - /case-invoicebox 168789009

<!-- ============================================================
     KORS · КЕЙС · INVOICEBOX
     Заполнение фото/видео — только в списке KORS_CASE ниже.
     Картинки: ссылка в кавычки ('' = заглушка). Видео: ID Kinescope.
     ============================================================ -->
<script>
window.KORS_CASE = {
  images: {
    cover:      'https://static.tildacdn.com/tild6235-3838-4235-b430-646665666232/ib-cover-a-city.jpg',   // обложка вверху - кадр из второго ролика, Москва-Сити
    aboutShot:  '',   // «О компании» - скрин сервиса/интерфейса
    info1:      '',   // ролик «как выставить счёт» - кадр (если без видео)
    info2:      '',   // ролик «для интернет-магазинов» - кадр
    mkt:        'https://static.tildacdn.com/tild3464-6437-4161-b731-353565616265/ib-ads.jpg',   // рекламный кабинет проекта (данные скрыты)
    grtCover:   'https://static.tildacdn.com/tild6266-3832-4334-b066-303434623230/grt-site.jpg',   // GIARTI - первый экран сайта
    grt1:       '',   // GRT - пример
    siteSoon:   ''    // планы - макет лендингов
  },
  videos: {
    main:  '2FXfjS6hYEvLkWNKUveoBx',  // шаг 01 - первое видео о сервисе, полная версия
    v2:    '0GfobL6RnAzhPeiopXjNHS',  // шаг 02 - второе видео, «Инвойсбокс 2»
    info1: 'b66cpVCFFFVycfDvLFXFR3',  // шаг 03 - короткий ролик «выставить счёт»
    info2: '7akHJzKdcoSrPiHtRbRBqk'   // шаг 03 - короткий ролик «для интернет-магазинов»
  }
};
</script>

<div class="kcp">
<header class="kcp__hero">
    <div class="kcp__hero-in">
      <a class="kcp__back" href="/#rec2667018101">← Все проекты</a>
      <div class="kcp__eyebrow">КЕЙС · ФИНТЕХ · ВИДЕО + МАРКЕТИНГ</div>
      <h1 class="kcp__title">Инвойсбокс</h1>
      <p class="kcp__lead">Как объяснить сложный финтех простым языком - и почему клиент возвращался за видео, инфографикой и маркетингом, а затем доверил нам и свой второй бизнес.</p>
      <div class="kcp__facts">
        <div class="kcp__fact"><span>Сфера</span><b>Финтех · приём платежей (B2B)</b></div>
        <div class="kcp__fact"><span>С чего начали</span><b>Видео о сервисе</b></div>
        <div class="kcp__fact"><span>Где сейчас</span><b>Продвижение + 2-й бизнес</b></div>
        <div class="kcp__fact"><span>Формат</span><b>Видео · инфографика · реклама</b></div>
      </div>
    </div>
    <div class="kcp__cover kcp__ph" data-img="cover"><div class="kcp__ph-label">📷 Обложка: кадр из видео / интерфейс сервиса (16:9)</div></div>
  </header>
  <section class="kcp__sec">
    <div class="kcp__grid2">
      <div><div class="kcp__kick">- О КОМПАНИИ</div><h2 class="kcp__h2">Мощный сервис, который сложно объяснить</h2></div>
      <div class="kcp__prose">
        <p>Инвойсбокс - сервис приёма онлайн-платежей и автоматизации выставления счетов для бизнеса. Компании выставляют и отправляют счета юридическим лицам за минуту, принимают оплату на сайте и подключают решения для интернет-магазинов.</p>
        <p>Продукт сильный, но у него есть особенность: <b>финтех сложно воспринимается</b>. Чтобы клиент подключился, ему нужно за секунды понять, что это за сервис и какая от него выгода. На словах и текстом это объяснять долго.</p>
      </div>
    </div>
  </section>
  <section class="kcp__sec">
    <div class="kcp__callout">
      <div class="kcp__callout-k">ЗАДАЧА</div>
      <div class="kcp__callout-t">Объяснить сложный финтех-продукт так, чтобы целевая аудитория поняла суть и выгоду за считанные секунды - и захотела подключиться.</div>
    </div>
  </section>
  <section class="kcp__sec">
    <div class="kcp__kick">- КАК ШЛА РАБОТА</div>
    <h2 class="kcp__h2">От одного ролика - к маркетингу и второму бизнесу</h2>
    <p class="kcp__sub">Всё началось с одного объясняющего видео. Дальше клиент возвращался снова и снова - за новыми форматами.</p>
    <ol class="kcp__timeline">
      <li class="kcp__step"><div class="kcp__step-num">01</div><div class="kcp__step-body">
        <h3>Видео о сервисе</h3>
        <p>Сняли первое видео: кто такие Инвойсбокс, чем полезны и как это работает - коротко и понятно. Первый инструмент, который показывает продукт вместо долгих объяснений.</p>
        <div class="kcp__ph kcp__ph--wide" data-video="main"><div class="kcp__ph-label">🎬 Видео о сервисе (Kinescope)</div></div>
      </div></li>
      <li class="kcp__step"><div class="kcp__step-num">02</div><div class="kcp__step-body">
        <h3>Второе видео - глубже и проще</h3>
        <p>Клиент вернулся за вторым роликом. Здесь мы подробнее и ещё проще разобрали продукт - версия для сайта и презентаций, чтобы объяснять сервис новым клиентам.</p>
        <div class="kcp__ph kcp__ph--wide" data-video="v2"><div class="kcp__ph-label">🎬 Второе видео (подробный разбор)</div></div>
      </div></li>
      <li class="kcp__step"><div class="kcp__step-num">03</div><div class="kcp__step-body">
        <h3>Два коротких ролика</h3>
        <p>Дальше - два коротких ролика (~30 секунд): «как выставить счёт на сервисе» и «решение для интернет-магазинов» (у клиента появился новый сервис). Простыми словами о сложном - точно под их аудиторию.</p>
        <div class="kcp__ph kcp__ph--grid">
          <div class="kcp__ph" data-video="info1" data-img="info1"><div class="kcp__ph-label">🎬 ролик «выставить счёт»</div></div>
          <div class="kcp__ph" data-video="info2" data-img="info2"><div class="kcp__ph-label">🎬 ролик «для интернет-магазинов»</div></div>
        </div>
      </div></li>
      <li class="kcp__step"><div class="kcp__step-num">04</div><div class="kcp__step-body">
        <h3>Подготовка и запуск продвижения</h3>
        <p>Структуру подготовили под рекламный трафик: настроили точки конверсии, предусмотрели посадочные сценарии под разные запросы и собрали аналитику, чтобы видеть, что работает.</p>
        <p>Кампании запущены и работают, мы их ведём. О результатах расскажем, когда наберётся показательный период.</p>
        <div class="kcp__ph kcp__ph--ads" data-img="mkt"><div class="kcp__ph-label">📊 рекламный кабинет проекта</div></div>
      </div></li>
      <li class="kcp__step kcp__chapter"><div class="kcp__step-num kcp__step-num--brand">GIARTI</div><div class="kcp__step-body">
        <h3>Второй бизнес клиента - GIARTI</h3>
        <p>Лучшее подтверждение доверия: клиент передал нам и свой второй бизнес - <b>GIARTI</b>. Это онлайн-галерея высокохудожественных изделий ручной работы от мастеров из России и других стран: вазы, скульптура, янтарь, ювелирные изделия, художественное литьё. В каталоге есть отдельные разделы для мастеров и для дизайнеров, доставка с гарантией, а каждое изделие проверяют перед отправкой покупателю.</p>
        <p>Другой продукт и другая аудитория, но схема та же: разбираемся в товаре, готовим структуру под рекламный трафик и ведём кампании. Работа продолжается - о результатах расскажем, когда наберётся показательный период.</p>
        <p><a class="kcp__link" href="https://giarti.com" target="_blank" rel="noopener">giarti.com</a></p>
        <div class="kcp__ph kcp__ph--site" data-img="grtCover"><div class="kcp__ph-label">🖼 GIARTI: первый экран сайта</div></div>
      </div></li>
      <li class="kcp__step kcp__step--next"><div class="kcp__step-num">→</div><div class="kcp__step-body">
        <h3>Что дальше</h3>
        <p>Следующий этап - лендинги под каждый продукт: отдельная страница на каждый сервис, где сложный финтех объясняется максимально просто. Задача - чтобы любой человек понял, что это за сервис и как им удобно пользоваться.</p>
      </div></li>
    </ol>
  </section>
  <section class="kcp__sec">
    <div class="kcp__result">
      <div class="kcp__kick">- ЧТО ИЗМЕНИЛОСЬ</div>
      <h2 class="kcp__h2">Сложное стало понятным - и продающим</h2>
      <div class="kcp__result-grid">
        <div class="kcp__rcard"><div class="kcp__rc-t">Просто о сложном</div><p>Финтех-продукт объяснён так, что аудитория понимает суть и выгоду за секунды.</p></div>
        <div class="kcp__rcard"><div class="kcp__rc-t">Клиент возвращается</div><p>От одного видео - к серии роликов и инфографике, дальше - подготовка к продвижению.</p></div>
        <div class="kcp__rcard"><div class="kcp__rc-t">Доверие = 2-й бизнес</div><p>Клиент передал нам и второй бизнес - онлайн-галерею изделий ручной работы GIARTI.</p></div>
        <div class="kcp__rcard"><div class="kcp__rc-t">Постоянная работа</div><p>Не разовая задача, а постоянная работа по двум бизнесам клиента.</p></div>
      </div>
    </div>
  </section>
  <section class="kcp__sec">
    <div class="kcp__kick">- ЧТО ВОШЛО В РАБОТУ</div>
    <div class="kcp__chips">
      <span>Видеопродакшн</span><span>Объясняющие ролики</span><span>Моушн / инфографика</span><span>Короткие ролики 30 сек</span><span>Маркетинг и реклама</span><span>Ведение проекта</span><span>Реклама GIARTI</span><span>Лендинги (в планах)</span>
    </div>
  </section>
  <!-- ===== ВИДЕО ПРОЕКТА (СКРЫТО) ===== -->
  <!-- СЕКЦИЯ СКРЫТА 28.08.2026. Причина: ролик xgBCJrU3Fy9CtKDXR9R23S дублировал шаг 01, а на странице и так четыре ролика.
       Разметка сохранена. Чтобы вернуть секцию, снимите этот комментарий.
  <section class="kcp__sec">
    <div class="kcp__kick">- СМОТРЕТЬ</div>
    <h2 class="kcp__h2">Видео проекта</h2>
    <div class="kcp__video"><iframe src="https://kinescope.io/embed/xgBCJrU3Fy9CtKDXR9R23S" allow="autoplay; fullscreen; encrypted-media; picture-in-picture" allowfullscreen frameborder="0"></iframe></div>
  </section>
  -->
  <!-- ===== ОТЗЫВ КЛИЕНТА ===== -->
  <section class="kcp__sec">
    <div class="kcp__kick">- ОТЗЫВ</div>
    <h2 class="kcp__h2">Благодарственное письмо</h2>
    <p class="kcp__sub">ООО «Объединённый расчётный центр» - юридическое лицо группы «Инвойсбокс»</p>
    <div class="kcp__letter"><img src="https://static.tildacdn.com/tild3461-6534-4530-b265-323334643764/pismo-invoicebox-120.jpg" alt="Благодарственное письмо от ООО «Объединённый расчётный центр» (Инвойсбокс) команде KORS Production за видеоролики и ведение маркетинга" loading="lazy"></div>
  </section>
  <!-- ===== ДРУГИЕ КЕЙСЫ ===== -->
  <section class="kcp__sec">
    <div class="kcp__kick">- ЕЩЁ</div>
    <h2 class="kcp__h2">Другие кейсы</h2>
    <div class="kcp__more">
      <a class="kcp__more-card" href="/case-odoevskie"><span>Кейс</span><b>Одоевские консервы</b><i>Видео, фирменный стиль и два сайта →</i></a>
      <a class="kcp__more-card" href="/case-vistex"><span>Кейс</span><b>Вистекс</b><i>Съёмка видео о предприятии →</i></a>
    </div>
  </section>
  <section class="kcp__cta">
    <h2>Сложный продукт? Объясним просто.</h2>
    <p>Поможем показать ваш сервис так, чтобы клиент понял его за секунды.</p>
    <a class="kcp__cta-btn" href="#popup:zayavka">Обсудить проект →</a>
  </section>
</div>

<style>
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Unbounded:wght@400;600;700;800&display=swap');
.kcp{--bg:#0C0C0E;--raise:#141416;--card:#1B1B1F;--border:#2A2A2E;--soft:#242428;--text:#F5F3EF;--muted:#9A9A9A;--faint:#6a6a6e;--accent:#6D5DFB;--glow:rgba(109,93,251,.14);
  box-sizing:border-box;background:var(--bg);color:var(--text);font-family:'Manrope',Arial,sans-serif;-webkit-font-smoothing:antialiased;}
.kcp *{box-sizing:border-box;margin:0;padding:0;}
.kcp p{line-height:1.65;}
.kcp__eyebrow,.kcp__kick{font-family:'Unbounded';font-size:12px;letter-spacing:.14em;color:var(--accent);}
.kcp__h2{font-family:'Unbounded';font-weight:700;font-size:clamp(26px,3.2vw,42px);letter-spacing:-.02em;line-height:1.12;margin:14px 0 0;}
.kcp__sub{color:var(--muted);font-size:17px;line-height:1.6;max-width:640px;margin-top:14px;}
.kcp__hero{padding:70px 6vw 0;max-width:1280px;margin:0 auto;}
.kcp__hero-in{max-width:900px;}
.kcp__back{display:inline-block;color:var(--muted);text-decoration:none;font-size:14px;font-weight:600;margin-bottom:34px;transition:.2s;}
.kcp__back:hover{color:var(--accent);}
.kcp__hero .kcp__eyebrow{margin-bottom:18px;}
.kcp__title{font-family:'Unbounded';font-weight:800;font-size:clamp(40px,7vw,88px);letter-spacing:-.03em;line-height:1;margin-bottom:24px;}
.kcp__lead{font-size:clamp(18px,2vw,22px);line-height:1.55;color:#d8d6d1;max-width:760px;}
.kcp__facts{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:14px;overflow:hidden;margin-top:44px;}
.kcp__fact{background:var(--raise);padding:20px 22px;display:flex;flex-direction:column;gap:7px;}
.kcp__fact span{font-size:12px;color:var(--faint);text-transform:uppercase;letter-spacing:.06em;}
.kcp__fact b{font-family:'Unbounded';font-weight:600;font-size:14px;line-height:1.3;}
.kcp__cover{margin:48px auto 0;max-width:1280px;aspect-ratio:16/8;border-radius:20px;}
.kcp__sec{max-width:1080px;margin:0 auto;padding:64px 6vw;}
.kcp__grid2{display:grid;grid-template-columns:0.85fr 1.15fr;gap:48px;align-items:start;}
.kcp__prose p{color:#c9c7c2;font-size:17px;margin-bottom:16px;}
.kcp__prose p:last-child{margin-bottom:0;}
.kcp__prose b{color:var(--text);font-weight:600;}
.kcp__callout{background:linear-gradient(135deg,rgba(109,93,251,.10),rgba(109,93,251,.02));border:1px solid rgba(109,93,251,.3);border-radius:18px;padding:40px 44px;}
.kcp__callout-k{font-family:'Unbounded';font-size:12px;letter-spacing:.14em;color:var(--accent);margin-bottom:14px;}
.kcp__callout-t{font-family:'Unbounded';font-weight:600;font-size:clamp(20px,2.4vw,30px);line-height:1.35;letter-spacing:-.01em;}
.kcp__timeline{list-style:none;margin-top:44px;display:flex;flex-direction:column;gap:26px;}
.kcp__step{display:grid;grid-template-columns:88px 1fr;gap:26px;background:var(--raise);border:1px solid var(--border);border-radius:18px;padding:30px 32px;transition:.25s;}
.kcp__step:hover{border-color:rgba(109,93,251,.4);}
.kcp__step-num{font-family:'Unbounded';font-weight:700;font-size:34px;color:var(--accent);line-height:1;opacity:.85;}
.kcp__step-body h3{font-family:'Unbounded';font-weight:600;font-size:22px;letter-spacing:-.01em;margin-bottom:12px;}
.kcp__step-body p{color:#c4c2bd;font-size:16px;}
.kcp__step--next{background:transparent;border-style:dashed;}
.kcp__step--next .kcp__step-num{opacity:1;}
.kcp__ph{position:relative;background:repeating-linear-gradient(45deg,#141416,#141416 12px,#17171a 12px,#17171a 24px);border:2px dashed #38383e;border-radius:14px;min-height:150px;display:flex;align-items:center;justify-content:center;text-align:center;}
.kcp__ph-label{color:#8a8a90;font-size:13px;font-weight:600;line-height:1.5;padding:16px;}
.kcp__ph-label small{color:var(--faint);font-weight:500;}
.kcp__ph--wide{margin-top:18px;aspect-ratio:16/8;min-height:0;}
.kcp__ph--site{margin-top:18px;aspect-ratio:1200/681;min-height:0;}
.kcp__ph--ads{margin-top:18px;aspect-ratio:1200/607;min-height:0;}
.kcp__step-num--brand{font-size:17px!important;letter-spacing:.02em;padding-top:5px;}
.kcp__link{color:#A99CFF;text-decoration:underline;text-underline-offset:3px;}
.kcp__link:hover{color:#F5F3EF;}
.kcp__ph--grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:18px;background:none;border:none;padding:0;}
.kcp__ph--grid .kcp__ph{aspect-ratio:4/3;min-height:0;}
.kcp__cover.kcp__ph{aspect-ratio:16/8;}
.kcp__ba{position:relative;margin-top:20px;aspect-ratio:16/9;border-radius:16px;overflow:hidden;border:1px solid var(--border);user-select:none;}
.kcp__ba-after,.kcp__ba-before{position:absolute;inset:0;border-radius:0;border:none;}
.kcp__ba-before{width:100%;clip-path:inset(0 50% 0 0);}
.kcp__ba-handle{position:absolute;top:0;bottom:0;left:50%;width:2px;background:var(--accent);cursor:ew-resize;transform:translateX(-1px);}
.kcp__ba-handle span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:40px;height:40px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(0,0,0,.4);}
.kcp__ba-handle span::before{content:'⟷';color:#000;font-size:18px;font-weight:700;}
.kcp__ba-tag{position:absolute;top:14px;font-family:'Unbounded';font-size:11px;letter-spacing:.1em;background:rgba(0,0,0,.6);padding:5px 11px;border-radius:6px;}
.kcp__ba-tag--l{left:14px;}
.kcp__ba-tag--r{right:14px;}
.kcp__ba-hint{text-align:center;color:var(--faint);font-size:13px;margin-top:12px;}
.kcp__result-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:34px;}
.kcp__rcard{background:var(--raise);border:1px solid var(--border);border-radius:16px;padding:26px 28px;}
.kcp__rc-t{font-family:'Unbounded';font-weight:600;font-size:18px;color:var(--accent);margin-bottom:10px;}
.kcp__rcard p{color:#c4c2bd;font-size:15px;}
.kcp__chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;}
.kcp__chips span{font-family:'Manrope';font-weight:600;font-size:14px;color:var(--text);background:rgba(109,93,251,.08);border:1px solid rgba(109,93,251,.4);border-radius:8px;padding:10px 16px;}
.kcp__video{margin-top:24px;aspect-ratio:16/9;border-radius:18px;overflow:hidden;border:1px solid var(--border);background:#000;}
.kcp__video iframe{width:100%;height:100%;border:none;}
.kcp__cta{max-width:900px;margin:20px auto 0;padding:80px 6vw 96px;text-align:center;}
.kcp__cta h2{font-family:'Unbounded';font-weight:700;font-size:clamp(26px,3.4vw,42px);letter-spacing:-.02em;margin-bottom:16px;}
.kcp__cta p{color:var(--muted);font-size:18px;margin-bottom:30px;}
.kcp__cta-btn{display:inline-block;background:var(--accent);color:#fff;text-decoration:none;font-family:'Manrope';font-weight:700;font-size:16px;padding:18px 38px;border-radius:10px;transition:.25s;}
.kcp__cta-btn:hover{transform:translateY(-2px);box-shadow:0 14px 34px var(--glow);}
@media (max-width:820px){
  .kcp__facts{grid-template-columns:1fr 1fr;}
  .kcp__grid2{grid-template-columns:1fr;gap:20px;}
  .kcp__step{grid-template-columns:1fr;gap:14px;padding:24px 22px;}
  .kcp__step-num{font-size:28px;}
  .kcp__result-grid{grid-template-columns:1fr;}
  .kcp__ph--grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:480px){
  .kcp__hero{padding:48px 20px 0;}
  .kcp__sec{padding:48px 20px;}
  .kcp__facts{grid-template-columns:1fr;}
  .kcp__callout{padding:28px 24px;}
}
.kcp [data-img].kcp--filled,.kcp [data-video].kcp--filled{background:none;border:none;}
.kcp [data-img] img,.kcp [data-video] img{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit;}
.kcp [data-fit="contain"] img{object-fit:contain;background:#0f0f11;padding:6%;}
.kcp [data-video].kcp--filled iframe{width:100%;height:100%;border:none;display:block;}
.kcp__ph.kcp--filled{padding:0;}
.kcp__chapter{background:linear-gradient(135deg,rgba(109,93,251,.10),rgba(109,93,251,.02))!important;border-color:rgba(109,93,251,.4)!important;}
.kcp__chapter .kcp__step-num{font-size:22px;}
/* Благодарственное письмо и блок «Другие кейсы» */
.kcp__letter{margin-top:26px;max-width:440px}
.kcp__letter img{display:block;width:100%;height:auto;border-radius:14px;border:1px solid var(--border)}
.kcp__more{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:28px}
.kcp__more-card{display:block;background:var(--raise);border:1px solid var(--border);border-radius:16px;padding:24px 26px;text-decoration:none;transition:.2s}
.kcp__more-card:hover{border-color:var(--accent)}
.kcp__more-card span{display:block;font-size:12px;letter-spacing:2px;color:var(--accent);text-transform:uppercase;margin-bottom:10px}
.kcp__more-card b{display:block;font-family:'Unbounded',sans-serif;font-weight:700;font-size:22px;line-height:1.2;color:var(--text);margin-bottom:8px}
.kcp__more-card i{font-style:normal;font-size:15px;color:var(--muted)}
@media (max-width:640px){.kcp__more{grid-template-columns:1fr}}
</style>
<script>
(function(){
  var C=window.KORS_CASE||{}; var IMG=C.images||{}, VID=C.videos||{};
  document.querySelectorAll('.kcp [data-video]').forEach(function(el){
    var id=VID[el.getAttribute('data-video')];
    if(id){ el.classList.add('kcp--filled'); el.innerHTML='<iframe src="https://kinescope.io/embed/'+id+'" allow="autoplay; fullscreen; encrypted-media; picture-in-picture" allowfullscreen frameborder="0"></iframe>'; el.removeAttribute('data-img'); }
  });
  document.querySelectorAll('.kcp [data-img]').forEach(function(el){
    var ALT_IB={grtCover:'Первый экран сайта GIARTI - онлайн-галереи изделий ручной работы',mkt:'Рекламный кабинет проекта в Яндекс Директе: список кампаний со статусами и площадками, показатели и названия кампаний скрыты'};
    var url=IMG[el.getAttribute('data-img')];
    if(url){ el.classList.add('kcp--filled'); el.innerHTML='<img src="'+url+'" alt="'+(ALT_IB[el.getAttribute('data-img')]||'')+'">'; }
  });
})();
(function(){
  var ba=document.getElementById('kcpBA'); if(!ba) return;
  var before=document.getElementById('kcpBABefore');
  var handle=document.getElementById('kcpBAHandle');
  var dragging=false;
  function setPos(clientX){
    var r=ba.getBoundingClientRect();
    var x=Math.max(0,Math.min(clientX-r.left,r.width));
    var pct=(x/r.width)*100;
    before.style.clipPath='inset(0 '+(100-pct)+'% 0 0)';
    handle.style.left=pct+'%';
  }
  handle.addEventListener('mousedown',function(){dragging=true;});
  window.addEventListener('mouseup',function(){dragging=false;});
  window.addEventListener('mousemove',function(e){ if(dragging) setPos(e.clientX); });
  handle.addEventListener('touchstart',function(){dragging=true;},{passive:true});
  window.addEventListener('touchend',function(){dragging=false;});
  window.addEventListener('touchmove',function(e){ if(dragging&&e.touches[0]) setPos(e.touches[0].clientX); },{passive:true});
  ba.addEventListener('click',function(e){ setPos(e.clientX); });
})();
</script>

BACKUP 2026-08-30 №7

rec2704539501 (6790 симв.) - Footer 168456309 - плавающий виджет связи

<!-- ===== KORS · ПЛАВАЮЩИЙ ВИДЖЕТ СВЯЗИ (внизу справа, всегда виден) · блок T123 ===== -->
<div class="kfab-wrap">
  <div class="kfab__panel" id="kfabPanel">
    <div class="kfab__head">
      <div class="kfab__title">Звоните - ответим на все вопросы</div>
      <div class="kfab__desc">Подскажем по услугам, срокам и стоимости.</div>
    </div>
    <a class="kfab__item" href="tel:+79158677996"><span class="kfab__ic kfab__ic--call"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z"/></svg></span><span class="kfab__tx"><b>Позвонить</b><span>+7 915 867-79-96</span></span></a>
    <a class="kfab__item" href="https://wa.me/79158677996" target="_blank" rel="noopener"><span class="kfab__ic kfab__ic--wa">WA</span><span class="kfab__tx"><b>WhatsApp</b><span>написать в мессенджер</span></span></a>
    <a class="kfab__item" href="https://t.me/korsprodsale" target="_blank" rel="noopener"><span class="kfab__ic kfab__ic--tg">TG</span><span class="kfab__tx"><b>Telegram</b><span>@korsprodsale</span></span></a>
    <a class="kfab__item" href="https://max.ru/u/f9LHodD0cOJry8jfuI2u_X2FJWCLMC5S4I3JfDhcBC6iBjNcaUyKtbZ9Bto" target="_blank" rel="noopener"><span class="kfab__ic kfab__ic--max">MAX</span><span class="kfab__tx"><b>MAX</b><span>мессенджер MAX</span></span></a>
    <a class="kfab__item kfab__item--form" href="#popup:zayavka"><span class="kfab__ic kfab__ic--form">→</span><span class="kfab__tx"><b>Оставить заявку</b><span>заполнить форму</span></span></a>
  </div>
  <button class="kfab__btn" id="kfabBtn" aria-label="Связаться с нами">
    <svg class="kfab__open" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"/></svg>
    <svg class="kfab__close" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2.4" stroke-linecap="round"><path d="M18 6 6 18M6 6l12 12"/></svg>
  </button>
</div>
<style>
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Unbounded:wght@400;600;700;800&display=swap');
.kfab-wrap{--bg:#0C0C0E;--raise:#141416;--card:#1B1B1F;--border:#2A2A2E;--text:#F5F3EF;--muted:#9A9A9A;--faint:#6a6a6e;--accent:#6D5DFB;--glow:rgba(109,93,251,.14);
  position:fixed;right:22px;bottom:22px;z-index:9500;font-family:'Manrope',Arial,sans-serif;box-sizing:border-box;}
.kfab-wrap *{box-sizing:border-box;margin:0;padding:0;}
.kfab__btn{position:relative;width:62px;height:62px;border-radius:50%;background:var(--accent);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 30px rgba(109,93,251,.4);margin-left:auto;transition:transform .2s;animation:kfabPulse 2.6s infinite;}
.kfab__btn:hover{transform:scale(1.06);}
.kfab__btn svg{width:27px;height:27px;position:absolute;transition:opacity .2s,transform .2s;}
.kfab__close{opacity:0;transform:rotate(-45deg);}
.kfab-wrap.open .kfab__open{opacity:0;transform:rotate(45deg);}
.kfab-wrap.open .kfab__close{opacity:1;transform:rotate(0);}
.kfab-wrap.open .kfab__btn{animation:none;}
@keyframes kfabPulse{0%{box-shadow:0 10px 30px rgba(109,93,251,.4),0 0 0 0 rgba(109,93,251,.45);}70%{box-shadow:0 10px 30px rgba(109,93,251,.4),0 0 0 16px rgba(109,93,251,0);}100%{box-shadow:0 10px 30px rgba(109,93,251,.4),0 0 0 0 rgba(109,93,251,0);}}
.kfab__panel{position:absolute;right:0;bottom:74px;width:300px;background:var(--raise);border:1px solid var(--border);border-radius:16px;padding:16px;
  box-shadow:0 20px 50px rgba(0,0,0,.5);opacity:0;transform:translateY(12px) scale(.98);transform-origin:bottom right;pointer-events:none;transition:.25s cubic-bezier(.2,.8,.2,1);}
.kfab-wrap.open .kfab__panel{opacity:1;transform:translateY(0) scale(1);pointer-events:auto;}
.kfab__head{padding:4px 4px 14px;border-bottom:1px solid var(--border);margin-bottom:12px;}
.kfab__title{font-family:'Unbounded';font-weight:600;font-size:15px;line-height:1.3;color:var(--text);margin-bottom:6px;}
.kfab__desc{font-size:12.5px;color:var(--muted);line-height:1.45;}
.kfab__item{display:flex;align-items:center;gap:12px;padding:10px 10px;border-radius:11px;text-decoration:none;color:var(--text);transition:.18s;}
.kfab__item:hover{background:var(--card);}
.kfab__ic{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-family:'Unbounded';font-size:12px;font-weight:700;flex:none;background:rgba(109,93,251,.14);color:var(--accent);}
.kfab__ic--call svg{width:18px;height:18px;}
.kfab__tx{display:flex;flex-direction:column;}
.kfab__tx b{font-size:14px;font-weight:700;}
.kfab__tx span{font-size:12px;color:var(--faint);}
.kfab__item--form{margin-top:6px;background:var(--accent);}
.kfab__item--form:hover{background:var(--accent);filter:brightness(1.05);}
.kfab__item--form .kfab__ic{background:rgba(0,0,0,.18);color:#000;}
.kfab__item--form .kfab__tx b,.kfab__item--form .kfab__tx span{color:#000;}
@media (max-width:560px){
  .kfab-wrap{right:16px;bottom:16px;}
  .kfab__btn{width:56px;height:56px;}
  .kfab__panel{width:min(84vw,300px);bottom:68px;}
}
/* фикс: Tilda красит tel: в чёрный - возвращаем цвет */
.kfab-wrap a[href^="tel:"]{color:var(--text)!important;}
</style>
<script>
(function(){
  var wrap=document.querySelector('.kfab-wrap'); if(!wrap) return;
  var btn=document.getElementById('kfabBtn');
  btn.addEventListener('click',function(e){ e.stopPropagation(); wrap.classList.toggle('open'); });
  document.addEventListener('click',function(e){ if(!wrap.contains(e.target)) wrap.classList.remove('open'); });
  wrap.querySelectorAll('.kfab__item').forEach(function(a){ a.addEventListener('click',function(){ setTimeout(function(){wrap.classList.remove('open');},60); }); });
})();
</script>

<!-- ===== KORS · ПОПАП-ФОРМА ЗАЯВКИ · перекраска акцента в индиго #6D5DFB ===== -->
<style>
#rec2704488601 .t-submit{background:#6D5DFB !important;color:#fff !important;}
#rec2704488601 .t-submit:hover{background:#5B4CE0 !important;}
#rec2704488601 .t-radio__indicator{border-color:#6D5DFB !important;}
#rec2704488601 .t-radio__indicator::after{background:#6D5DFB !important;}
#rec2704488601 .t-radio__control:checked ~ .t-radio__indicator,
#rec2704488601 .t-radio__control:checked + .t-radio__indicator{background:#6D5DFB !important;border-color:#6D5DFB !important;}
</style>

rec2704215601 (6897 симв.) - Header 168449709 - шапка и мобильное меню

<!-- ===== KORS · ШАПКА-МЕНЮ · блок T123. Один адаптивный блок (бургер на мобилке). Поставить в самый верх. ===== -->
<div class="khh-wrap">
  <header class="khh" id="khh">
    <div class="khh__inner">
      <a class="khh__logo" href="/">KORS</a>
      <nav class="khh__nav">
        <a href="/#rec2649099901">Услуги</a>
        <a href="/photographers">Фотосъёмка</a>
        <a href="/sites">Создание сайтов</a>
        <a href="/#rec2667018101">Кейсы</a>
        <a href="/#rec2663623901">Работы</a>
        <a href="/#ksfooter">Контакты</a>
      </nav>
      <a class="khh__cta" href="#popup:zayavka">Обсудить проект</a>
      <button class="khh__burger" id="khhBurger" aria-label="Меню"><span></span><span></span><span></span></button>
    </div>
  </header>
  <div class="khh__panel" id="khhPanel">
    <nav class="khh__mnav">
      <a href="/#rec2649099901">Услуги</a>
      <a href="/photographers">Фотосъёмка</a>
      <a href="/sites">Создание сайтов</a>
      <a href="/#rec2667018101">Кейсы</a>
      <a href="/#rec2663623901">Работы</a>
      <a href="/#ksfooter">Контакты</a>
    </nav>
    <a class="khh__mcta" href="#popup:zayavka">Обсудить проект</a>
    <div class="khh__mpills">
      <a class="khh__pill" href="https://t.me/korsprodsale" target="_blank" rel="noopener"><i></i>Telegram</a>
      <a class="khh__pill" href="https://wa.me/79158677996" target="_blank" rel="noopener"><i></i>WhatsApp</a>
      <a class="khh__pill" href="https://max.ru/u/f9LHodD0cOJry8jfuI2u_X2FJWCLMC5S4I3JfDhcBC6iBjNcaUyKtbZ9Bto" target="_blank" rel="noopener"><i></i>MAX</a>
      <a class="khh__pill" href="tel:+79158677996"><i></i>Позвонить</a>
    </div>
  </div>
</div>
<style>
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Unbounded:wght@400;600;700;800&display=swap');
.khh-wrap{--bg:#0C0C0E;--raise:#141416;--card:#1B1B1F;--border:#2A2A2E;--text:#F5F3EF;--muted:#9A9A9A;--faint:#6a6a6e;--accent:#6D5DFB;--glow:rgba(109,93,251,.14);box-sizing:border-box;}
.khh-wrap *{box-sizing:border-box;margin:0;padding:0;}
.khh{position:fixed;top:0;left:0;right:0;z-index:9000;transform:translateY(-100%);transition:transform .35s cubic-bezier(.2,.8,.2,1),background .3s,border-color .3s;
  background:rgba(10,10,12,.72);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid transparent;font-family:'Manrope',Arial,sans-serif;}
.khh.show{transform:translateY(0);border-bottom-color:var(--border);}
.khh__inner{max-width:1280px;margin:0 auto;height:64px;padding:0 5vw;display:flex;align-items:center;justify-content:space-between;gap:20px;}
.khh__logo{font-family:'Unbounded';font-weight:800;font-size:24px;color:var(--text);text-decoration:none;letter-spacing:-.02em;flex:none;}
.khh__nav{display:flex;align-items:center;gap:28px;}
.khh__nav a{color:var(--muted);text-decoration:none;font-size:15px;font-weight:600;transition:.2s;white-space:nowrap;}
.khh__nav a:hover{color:var(--text);}
.khh__cta{flex:none;background:var(--accent);color:#fff;text-decoration:none;font-weight:700;font-size:14px;padding:11px 20px;border-radius:8px;transition:.2s;white-space:nowrap;}
.khh__cta:hover{transform:translateY(-1px);box-shadow:0 8px 22px var(--glow);}
.khh__burger{display:none;flex-direction:column;gap:5px;width:40px;height:40px;background:transparent;border:none;cursor:pointer;align-items:center;justify-content:center;}
.khh__burger span{display:block;width:22px;height:2px;background:var(--text);transition:.25s;}
.khh__burger.active span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.khh__burger.active span:nth-child(2){opacity:0;}
.khh__burger.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
.khh__panel{position:fixed;top:64px;left:0;right:0;z-index:8999;background:rgba(8,8,10,.98);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--border);
  padding:22px 5vw 28px;transform:translateY(-12px);opacity:0;pointer-events:none;transition:.3s;display:none;}
.khh__panel.open{opacity:1;transform:translateY(0);pointer-events:auto;}
.khh__mnav{display:flex;flex-direction:column;gap:2px;}
.khh__mnav a{color:var(--text);text-decoration:none;font-family:'Unbounded';font-weight:600;font-size:20px;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.05);}
.khh__mcta{display:block;text-align:center;background:var(--accent);color:#fff;text-decoration:none;font-weight:700;font-size:16px;padding:15px;border-radius:9px;margin:20px 0 16px;}
.khh__mpills{display:flex;gap:8px;flex-wrap:wrap;}
.khh__pill{display:inline-flex;align-items:center;gap:7px;padding:10px 14px;border:1px solid var(--border);border-radius:9px;color:var(--text);font-size:13px;font-weight:600;text-decoration:none;}
.khh__pill i{width:7px;height:7px;border-radius:50%;background:var(--accent);}
@media (max-width:760px){
  .khh__nav,.khh__cta{display:none;}
  .khh__burger{display:flex;}
  .khh__panel{display:block;}
}
/* фикс: Tilda красит tel: в чёрный — возвращаем цвет */
.khh-wrap a[href^="tel:"]{color:var(--text)!important;}
</style>
<script>
(function(){
  var wrap=document.querySelector('.khh-wrap'); if(!wrap) return;
  var bar=document.getElementById('khh');
  var burger=document.getElementById('khhBurger');
  var panel=document.getElementById('khhPanel');
  var HEADER=64;
  function isHome(){ var p=location.pathname; return p==='/'||p===''||/\/index/i.test(p); }
  function onScroll(){
    if(!isHome()){ bar.classList.add('show'); return; }
    var y=window.scrollY||document.documentElement.scrollTop;
    if(y>window.innerHeight*0.75){ bar.classList.add('show'); }
    else { bar.classList.remove('show'); closePanel(); }
  }
  window.addEventListener('scroll',onScroll,{passive:true});
  onScroll();
  function openPanel(){ panel.classList.add('open'); burger.classList.add('active'); }
  function closePanel(){ panel.classList.remove('open'); burger.classList.remove('active'); }
  burger.addEventListener('click',function(){ panel.classList.contains('open')?closePanel():openPanel(); });
  document.addEventListener('click',function(e){
    var a=e.target.closest('a[href^="/#"]');
    if(!a) return;
    var id=(a.getAttribute('href')||'').replace('/#','');
    if(isHome()){
      var el=document.getElementById(id);
      if(el && el.offsetParent===null){
        var block=el.closest('.t-rec')||el;
        var sib=block.nextElementSibling;
        while(sib && sib.offsetHeight===0) sib=sib.nextElementSibling;
        if(!sib){ sib=block.previousElementSibling; while(sib && sib.offsetHeight===0) sib=sib.previousElementSibling; }
        if(sib) el=sib;
      }
      if(el){ e.preventDefault(); var y=el.getBoundingClientRect().top+window.scrollY-HEADER-6; window.scrollTo({top:y,behavior:'smooth'}); }
      closePanel();
    } else {
      closePanel();
    }
  });
  window.addEventListener('resize',function(){ /* noop */ });
})();
</script>

rec3237881801 (3498 симв.) - /sites 201483509 - шапка лендинга

<style>
/* ---------- Header ---------- */
.header{position:fixed;top:0;left:0;right:0;z-index:90;padding:14px 0;transition:background .2s ease,box-shadow .2s ease}
.header.scrolled{background:rgba(12,12,14,.86);backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line)}
.header-in{display:flex;align-items:center;gap:22px}
.logo{font-weight:700;font-size:26px;letter-spacing:-.04em;line-height:1}
.logo span{color:var(--accent)}
.nav{display:flex;gap:4px;margin-left:6px}
.nav a{font-size:14.5px;font-weight:500;color:var(--ink);padding:10px 14px;border-radius:999px;transition:background .15s}
.nav a:hover{background:rgba(255,255,255,.06)}
.header-right{margin-left:auto;display:flex;align-items:center;gap:12px}
.header-phone{font-weight:600;font-size:16px;background:var(--card);border-radius:999px;padding:14px 22px;box-shadow:0 0 0 1px var(--line);letter-spacing:-.01em;transition:transform .15s}
.header-phone:hover{transform:translateY(-2px)}
.msg-ico{width:46px;height:46px;border-radius:50%;background:var(--card);box-shadow:0 0 0 1px var(--line);display:inline-flex;align-items:center;justify-content:center;font-size:17px;transition:transform .15s}
.msg-ico:hover{transform:translateY(-2px)}
.header .btn{padding:14px 24px;font-size:14.5px}
.burger{display:none;background:var(--accent);border:none;border-radius:50%;width:52px;height:52px;color:#fff;font-size:19px;box-shadow:0 6px 18px rgba(109,93,251,.4)}
.mobile-menu{display:none;position:fixed;inset:0;background:var(--bg);z-index:89;padding:110px 28px 28px;flex-direction:column;gap:8px}
.mobile-menu.open{display:flex}
.mobile-menu a{font-size:24px;font-weight:600;letter-spacing:-.02em;padding:10px 0}
.mobile-menu .btn{margin-top:14px;font-size:17px}
@media (max-width:1179px){.header-phone{display:none}}
</style>
<header class="header" id="header">
  <div class="container header-in">
    <a href="https://korsprod.ru" class="logo">kors<span>.</span></a>
    <nav class="nav">
      <a href="#cases">Кейсы</a>
      <a href="#services">Услуги</a>
      <a href="#pricing">Тарифы</a>
      <a href="#faq">Вопросы</a>
      <a href="https://korsprod.ru">Упаковка бизнеса ↗</a>
    </nav>
    <div class="header-right">
      <a class="msg-ico" href="https://t.me/korsprodsale" title="Telegram" aria-label="Telegram">✈️</a>
      <a class="msg-ico" href="https://wa.me/79158677996" title="WhatsApp" aria-label="WhatsApp">💬</a>
      <a class="header-phone" href="tel:+79158677996">+7 915 867-79-96</a>
      <a class="btn btn-primary" href="#quiz">Рассчитать стоимость</a>
      <button class="burger" id="burger" aria-label="Меню">☰</button>
    </div>
  </div>
</header>
<div class="mobile-menu" id="mobileMenu">
  <a href="#cases">Кейсы</a>
  <a href="#services">Услуги</a>
  <a href="#pricing">Тарифы</a>
  <a href="#faq">Вопросы</a>
  <a href="https://korsprod.ru">Упаковка бизнеса ↗</a>
  <a href="tel:+79158677996">+7 915 867-79-96</a>
  <a class="btn btn-primary" href="#quiz">Рассчитать стоимость</a>
</div>
<script>
var header=document.getElementById('header');
addEventListener('scroll',function(){header.classList.toggle('scrolled',scrollY>10)});
var burger=document.getElementById('burger'),mm=document.getElementById('mobileMenu');
burger.addEventListener('click',function(){mm.classList.toggle('open');burger.textContent=mm.classList.contains('open')?'✕':'☰'});
mm.querySelectorAll('a').forEach(function(a){a.addEventListener('click',function(){mm.classList.remove('open');burger.textContent='☰'})});
</script>

rec3239335801 (2630 симв.) - /sites 201483509 - подвал лендинга

<style>
/* ---------- Подвал ---------- */
.footer{padding:60px 0 42px}
.footer-grid{display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap}
.footer .logo{font-size:28px}
.footer p,.footer a{font-size:14px;color:var(--muted)}
.footer a:hover{color:var(--ink)}
.footer-col{display:flex;flex-direction:column;gap:8px}
.footer-col b{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
.footer-bottom{margin-top:40px;padding-top:24px;border-top:1px solid var(--line);font-size:13px;color:var(--gray);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
</style>
<footer class="footer">
  <div class="container">
    <div class="footer-grid">
      <div class="footer-col">
        <a href="https://korsprod.ru" class="logo">kors<span>.</span></a>
        <p>KORS — студия продающих сайтов и контента<br>для любого бизнеса: от производств до услуг.</p>
      </div>
      <div class="footer-col">
        <b>Студия KORS</b>
        <a href="https://korsprod.ru">Главная</a>
        <a href="https://korsprod.ru/photographers">Фотосъёмка</a>
        <a href="https://korsprod.ru/#rec2649099901">Услуги</a>
        <a href="https://korsprod.ru/#rec2663623901">Работы</a>
        <a href="https://korsprod.ru/#rec2667018101">Кейсы</a>
      </div>
      <div class="footer-col">
        <b>Контакты</b>
        <a href="tel:+79158677996">+7 915 867-79-96</a>
        <a href="mailto:info@korsprod.ru">info@korsprod.ru</a>
        <a href="https://t.me/korsprodsale">Telegram — написать</a>
        <a href="https://t.me/KORSproduct">Telegram — канал</a>
        <a href="https://wa.me/79158677996">WhatsApp</a>
      </div>
      <div class="footer-col">
        <b>Документы</b>
        <a href="https://korsprod.ru/policy">Политика конфиденциальности</a>
        <a href="https://korsprod.ru/user-agreement">Пользовательское соглашение</a>
        <p>ИП Кормышова Наталия Михайловна<br>ИНН 682801718806 · ОГРНИП 326680000032471</p>
      </div>
    </div>
    <div class="footer-bottom">
      <span>© 2019–<span data-kyear>2026</span> KORS</span>
      <span>Москва · работаем по всей России</span>
    </div>
  </div>
</footer>
<script>
(function(){
  /* Год в копирайте подставляется автоматически по местному времени посетителя.
     Начальный год 2019 зафиксирован в разметке. Если скрипт не отработает,
     в разметке остаётся год, записанный руками, - пустоты и NaN не будет. */
  var y = new Date().getFullYear();
  if(!y || isNaN(y)) return;
  var els = document.querySelectorAll('[data-kyear]');
  for(var i=0;i<els.length;i++){ els[i].textContent = y; }
})();
</script>

rec3238696801 (7956 симв.) - /sites 201483509 - квиз

<style>
/* ---------- Квиз ---------- */
.quiz-wrap{background:var(--card);border-radius:var(--r-lg);padding:46px;margin-top:44px;display:grid;grid-template-columns:260px 1fr;gap:44px;box-shadow:0 0 0 1px var(--line)}
.quiz-persona{text-align:center}
.quiz-avatar{display:block;width:128px;height:128px;border-radius:50%;object-fit:cover;object-position:center 22%;margin:0 auto 16px;border:1px solid var(--line)}
.quiz-persona b{display:block;font-size:17px;letter-spacing:-.02em}
.quiz-persona span{font-size:13.5px;color:var(--muted)}
.quiz-hint{margin-top:18px;background:var(--bg);border-radius:18px;padding:16px;font-size:13.5px;color:var(--muted);text-align:left;line-height:1.5}
.quiz-progress{height:6px;background:#24242a;border-radius:99px;margin-bottom:26px;overflow:hidden}
.quiz-bar{height:100%;width:16%;background:var(--accent);border-radius:99px;transition:width .3s ease}
.quiz-step-label{font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gray);margin-bottom:12px}
.quiz-q{font-weight:600;font-size:clamp(20px,2.1vw,26px);margin-bottom:24px;line-height:1.2;letter-spacing:-.025em}
.quiz-opts{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.quiz-opt{border:1.5px solid transparent;border-radius:18px;padding:18px 20px;background:#1b1b1f;font-size:15px;font-weight:500;color:var(--ink);text-align:left;transition:border-color .15s,background .15s,transform .15s}
.quiz-opt:hover{border-color:var(--accent-2);transform:translateY(-1px)}
.quiz-opt.sel{border-color:var(--accent);background:var(--peach)}
.quiz-nav{display:flex;gap:12px;margin-top:28px;align-items:center}
.quiz-back{background:none;border:none;color:var(--muted);font-weight:600;font-size:14.5px;padding:10px 6px}
.quiz-back:hover{color:var(--ink)}
.quiz-final .fields{display:grid;gap:12px;margin-bottom:16px}
</style>
<section id="quiz" style="padding-top:0">
  <div class="container">
    <div class="eyebrow reveal">Расчёт за 40 секунд</div>
    <h2 class="reveal">Соберём план запуска под вашу нишу за 6 ответов</h2>
    <p class="sub reveal">Структура сайта, офер, канал трафика и вилка стоимости — пришлём в удобный мессенджер.</p>
    <div class="quiz-wrap reveal">
      <div class="quiz-persona">
        <img class="quiz-avatar" src="https://static.tildacdn.com/tild3034-3837-4330-b664-346332656439/dmitriy-kors-1000.jpg" alt="Дмитрий Корс, сооснователь студии KORS" loading="lazy">
        <b>Дмитрий Корс</b>
        <span>Сооснователь KORS, отвечает за проект</span>
        <div class="quiz-hint" id="quizHint">Каждый ответ сужает вилку стоимости — в конце пришлём точный расчёт и 2–3 примера решений под вашу задачу.</div>
      </div>
      <div class="quiz-body" id="quizBody">
        <div class="quiz-progress"><div class="quiz-bar" id="quizBar"></div></div>
        <div class="quiz-step-label" id="quizLabel">Шаг 1 из 6</div>
        <div id="quizContent"></div>
      </div>
    </div>
  </div>
</section>
<script>
var quizData=[
  {q:'Для какого бизнеса нужен сайт?',hint:'От ниши зависит и структура, и канал трафика — предложим решение под ваш рынок, а не шаблон.',opts:['Производство','Услуги (b2b / b2c)','Товары, интернет-магазин','Эксперт, личный бренд']},
  {q:'Какая главная задача?',hint:'Кому-то нужен поток заявок, кому-то — доверие и имидж. От цели зависят акценты на странице.',opts:['Постоянный поток заявок','Имидж и доверие к компании','Запуск нового продукта','Всё сразу — и продажи, и имидж']},
  {q:'Сайт с нуля или уже есть?',hint:'Если сайт есть, но молчит, — разберём, почему, и посчитаем, что дешевле: докрутить или пересобрать.',opts:['С нуля — нужно всё','Есть, но не приносит заявок','Нужен редизайн и рост конверсии']},
  {q:'Откуда пойдёт трафик?',hint:'Под рекламу, SEO и соцсети сайты строятся по-разному. Если не уверены — подскажем.',opts:['Реклама в Яндекс Директе','SEO, органический трафик','Свои соцсети','Пока не знаю — подскажите']},
  {q:'Когда планируете запуск?',hint:'Если сроки жмут — уплотним график команды без потери качества.',opts:['Срочно, за 2–3 недели','В течение месяца','Через 1–2 месяца','Пока присматриваюсь']}
];
var quizState={step:0,answers:[]};
var qc=document.getElementById('quizContent'),qBar=document.getElementById('quizBar'),qLabel=document.getElementById('quizLabel'),qHint=document.getElementById('quizHint');
var TOTAL=quizData.length+1;
function renderQuiz(){
  var s=quizState.step;
  qBar.style.width=((s+1)/TOTAL*100)+'%';
  if(s<quizData.length){
    qLabel.textContent='Шаг '+(s+1)+' из '+TOTAL;
    qHint.textContent=quizData[s].hint;
    var html='<div class="quiz-q">'+quizData[s].q+'</div><div class="quiz-opts">';
    quizData[s].opts.forEach(function(o,i){
      var sel=quizState.answers[s]===i?' sel':'';
      html+='<button type="button" class="quiz-opt'+sel+'" data-i="'+i+'">'+o+'</button>';
    });
    html+='</div><div class="quiz-nav">'+(s>0?'<button type="button" class="quiz-back" id="qBack">← Назад</button>':'')+'</div>';
    qc.innerHTML=html;
    qc.querySelectorAll('.quiz-opt').forEach(function(b){
      b.addEventListener('click',function(){
        quizState.answers[s]=+b.dataset.i;
        quizState.step++;renderQuiz();
        qc.closest('.quiz-wrap').scrollIntoView({behavior:'smooth',block:'nearest'});
      });
    });
    var back=document.getElementById('qBack');
    if(back)back.addEventListener('click',function(){quizState.step--;renderQuiz()});
  }else{
    qLabel.textContent='Последний шаг';
    qHint.textContent='Пришлём расчёт и 2–3 примера решений под вашу задачу в течение пары часов в рабочее время.';
    qc.innerHTML=
      '<div class="quiz-q">Куда прислать план запуска и расчёт?</div>'+
      '<div class="quiz-final">'+
        '<div class="fields">'+
          '<div class="field"><input type="text" id="qName" placeholder="Ваше имя"></div>'+
          '<div class="field"><input type="tel" id="qPhone" placeholder="Телефон или @ник в Telegram"></div>'+
        '</div>'+
        '<div class="msgr-row" id="qMsgr">'+
          '<button type="button" class="msgr sel">Телефон</button>'+
          '<button type="button" class="msgr">Telegram</button>'+
          '<button type="button" class="msgr">WhatsApp</button>'+
          '<button type="button" class="msgr">MAX</button>'+
        '</div>'+
        '<label class="check"><input type="checkbox" id="qAgree" checked> Я принимаю условия <a href="https://korsprod.ru/policy" target="_blank" rel="noopener">политики конфиденциальности</a> и даю согласие на обработку персональных данных</label>'+
        '<div class="quiz-nav" style="margin-top:0">'+
          '<button type="button" class="quiz-back" id="qBack">← Назад</button>'+
          '<button type="button" class="btn btn-primary" id="qSubmit" style="flex:1">Получить план запуска</button>'+
        '</div>'+
      '</div>';
    document.getElementById('qMsgr').querySelectorAll('.msgr').forEach(function(b){
      b.addEventListener('click',function(){
        document.getElementById('qMsgr').querySelectorAll('.msgr').forEach(function(x){x.classList.remove('sel')});
        b.classList.add('sel');
      });
    });
    document.getElementById('qBack').addEventListener('click',function(){quizState.step--;renderQuiz()});
    document.getElementById('qSubmit').addEventListener('click',function(){
      var n=document.getElementById('qName'),p=document.getElementById('qPhone'),a=document.getElementById('qAgree');
      if(!n.value.trim()){n.focus();return}
      if(p.value.trim().length<5){p.focus();return}
      if(!a.checked){a.focus();return}
      qBar.style.width='100%';
      qLabel.textContent='Готово';
      qHint.textContent='Спасибо! Обычно отвечаем в течение 10 минут в рабочее время.';
      qc.innerHTML='<div class="quiz-done"><div class="big">🔥</div><h3>Заявка принята</h3><p>Свяжемся в выбранном мессенджере, зададим пару уточняющих вопросов и пришлём план запуска с вилкой стоимости.</p></div>';
    });
  }
}
renderQuiz();
</script>

rec3239313501 (4184 симв.) - /sites 201483509 - финальная форма

<style>
/* ---------- Финальная форма ---------- */
.final-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:center}
.final-person{margin:0;max-width:320px}
.final-person img{display:block;width:100%;height:auto;aspect-ratio:2/3;object-fit:cover;object-position:center 20%;border-radius:var(--r-md);border:1px solid var(--dark-3)}
.final-person figcaption{margin-top:18px}
.final-person figcaption b{display:block;font-size:18px;letter-spacing:-.02em}
.final-person figcaption span{display:block;margin-top:5px;font-size:14px;line-height:1.5;color:var(--gray)}
@media (max-width:1020px){.final-person{max-width:240px;margin:0 auto}}
.final-form .fields{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:26px 0 16px}
.final-form .field input{background:var(--dark-2);border:1.5px solid var(--dark-3);color:#fff}
.final-form .field input::placeholder{color:#7a7f87}
.final-form .field input:focus{border-color:var(--accent)}
.final-form .msgr{background:var(--dark-2);border-color:var(--dark-3);color:#e8e9ea}
.final-form .msgr.sel{border-color:var(--accent);background:rgba(109,93,251,.16);color:#a99cff}
.final-form .check{color:var(--gray)}
.form-note{font-size:13px;color:var(--gray);margin-top:14px}
</style>
<div class="section-dark final" id="final">
  <section>
  <div class="container final-grid">
    <div>
      <figure class="final-person">
        <img src="https://static.tildacdn.com/tild3034-3837-4330-b664-346332656439/dmitriy-kors-1000.jpg" alt="Дмитрий Корс, сооснователь студии KORS Production" loading="lazy">
        <figcaption><b>Дмитрий Корс</b><span>Сооснователь KORS. Проведёт разбор и ответит на вопросы</span></figcaption>
      </figure>
    </div>
    <div class="final-form">
      <div class="eyebrow">Свяжемся в течение 10 минут</div>
      <h2>Обсудим ваш <span class="squig">проект<svg viewBox="0 0 300 24" preserveAspectRatio="none" aria-hidden="true"><path d="M4 14 C70 5 180 4 296 11"/><path d="M140 20 C200 13 255 12 293 16"/></svg></span>?</h2>
      <p class="sub">За 15–20 минут разберём нишу и текущую ситуацию, покажем, какая модель привлечения заявок сработает у вас, и назовём вилку стоимости.</p>
      <form id="leadForm" novalidate>
        <div class="fields">
          <div class="field"><input type="text" name="name" placeholder="Ваше имя" required></div>
          <div class="field"><input type="tel" name="phone" placeholder="Телефон" required></div>
        </div>
        <div class="msgr-row" data-group="final">
          <button type="button" class="msgr sel">Телефон</button>
          <button type="button" class="msgr">Telegram</button>
          <button type="button" class="msgr">WhatsApp</button>
          <button type="button" class="msgr">MAX</button>
        </div>
        <label class="check"><input type="checkbox" required checked> Я принимаю условия <a href="https://korsprod.ru/policy" target="_blank" rel="noopener">политики конфиденциальности</a> и даю согласие на обработку персональных данных</label>
        <button class="btn btn-primary btn-block" type="submit">Получить план запуска</button>
      </form>
      <div class="quiz-done" id="formDone" style="display:none">
        <div class="big">🔥</div>
        <h3 style="color:#fff">Заявка принята</h3>
        <p style="color:var(--gray)">Свяжемся в течение 10 минут в рабочее время и пришлём план запуска под вашу нишу.</p>
      </div>
    </div>
  </div>
  </section>
</div>
<script>
document.querySelectorAll('.msgr-row').forEach(function(row){
  row.querySelectorAll('.msgr').forEach(function(b){
    b.addEventListener('click',function(){
      row.querySelectorAll('.msgr').forEach(function(x){x.classList.remove('sel')});
      b.classList.add('sel');
    });
  });
});
var leadForm=document.getElementById('leadForm');
leadForm.addEventListener('submit',function(e){
  e.preventDefault();
  var name=leadForm.querySelector('[name=name]'),phone=leadForm.querySelector('[name=phone]');
  if(!name.value.trim()){name.focus();return}
  if(phone.value.replace(/\D/g,'').length<10){phone.focus();return}
  leadForm.style.display='none';
  document.getElementById('formDone').style.display='block';
});
</script>

rec2784692501 - /spasibo (173413709), 4242 симв.

<!-- KORS — THANK YOU / СТРАНИЦА БЛАГОДАРНОСТИ (.kty) -->
<style>
#allrecords .kty-wrap{background:#0C0C0E;overflow:hidden;}
.kty{--bg:#0C0C0E;--text:#F5F3EF;--muted:#9C9A95;--faint:#66645F;--accent:#6D5DFB;--hover:#8A7BFF;--border:#2A2A2E;--card:#1B1B1F;}
.kty *{box-sizing:border-box;}
.kty{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--bg);color:var(--text);font-family:'Manrope',-apple-system,Arial,sans-serif;padding:40px 20px;position:relative;overflow:hidden;}
.kty__glow{position:absolute;top:-160px;left:50%;transform:translateX(-50%);width:620px;height:620px;pointer-events:none;background:radial-gradient(circle at 50% 50%,rgba(109,93,251,.22) 0%,rgba(109,93,251,0) 68%);}
.kty__in{position:relative;z-index:1;max-width:640px;width:100%;text-align:center;}
.kty__badge{display:inline-flex;align-items:center;justify-content:center;width:84px;height:84px;border-radius:50%;background:rgba(109,93,251,.12);border:1px solid rgba(109,93,251,.4);margin:0 auto 28px;}
.kty__badge svg{width:40px;height:40px;stroke:var(--accent);}
.kty__eyebrow{display:inline-flex;align-items:center;gap:10px;color:var(--accent);font-size:12px;font-weight:600;letter-spacing:2.5px;text-transform:uppercase;margin-bottom:18px;}
.kty__eyebrow span{width:30px;height:1px;background:var(--accent);}
.kty h1{font-family:'Unbounded',sans-serif;font-weight:700;font-size:clamp(30px,6vw,52px);line-height:1.06;margin:0 0 18px;}
.kty p{font-size:clamp(16px,2vw,19px);line-height:1.6;color:var(--muted);margin:0 auto 34px;max-width:520px;}
.kty__btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}
.kty__btn{display:inline-flex;align-items:center;gap:8px;padding:16px 30px;border-radius:6px;font-size:15px;font-weight:600;text-decoration:none;transition:.2s;}
.kty__btn--p{background:var(--accent);color:#fff;}
.kty__btn--p:hover{background:var(--hover);}
.kty__btn--s{background:transparent;color:var(--text);border:1px solid var(--border);}
.kty__btn--s:hover{border-color:var(--accent);color:var(--accent);}
.kty__note{margin-top:30px;font-size:13.5px;color:var(--faint);}
.kty__note b{color:var(--muted);font-weight:600;}
.kty__contacts{margin-top:26px;display:flex;gap:22px;justify-content:center;flex-wrap:wrap;}
.kty__contacts a{color:var(--muted);font-size:14px;text-decoration:none;transition:.2s;}
.kty__contacts a:hover{color:var(--accent);}
@media(max-width:480px){.kty__btn{width:100%;justify-content:center;}}
</style>

<div class="kty-wrap"><div class="kty">
  <div class="kty__glow"></div>
  <div class="kty__in">
    <div class="kty__badge"><svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5"/></svg></div>
    <div class="kty__eyebrow"><span></span>KORS · СТУДИЯ ДЛЯ ПРОИЗВОДСТВЕННЫХ КОМПАНИЙ</div>
    <h1>Спасибо! Заявка отправлена</h1>
    <p>Мы получили вашу заявку и уже её изучаем. Свяжемся с вами в ближайшее время, чтобы обсудить задачу и предложить формат работы. Обычно отвечаем в течение рабочего дня.</p>
    <div class="kty__btns">
      <a class="kty__btn kty__btn--p" href="/">Вернуться на сайт</a>
      <a class="kty__btn kty__btn--s" href="https://t.me/korsprodsale" target="_blank" rel="noopener">Написать в Telegram</a>
    </div>
    <div class="kty__contacts">
      <a href="tel:+79158677996">+7 915 867-79-96</a>
      <a href="mailto:info@korsprod.ru">info@korsprod.ru</a>
    </div>
    <div class="kty__note">Автоматический возврат на главную через <b><span id="ktySec">15</span> сек.</b></div>
  </div>
</div></div>

<script>
(function(){
  try{
    if(typeof ym!=='undefined' && window.Ya && Ya._metrika && Ya._metrika.counters && Ya._metrika.counters[0]){
      ym(Ya._metrika.counters[0].id,'reachGoal','zayavka_thanks');
    }
  }catch(e){}
  try{ if(typeof gtag==='function'){ gtag('event','generate_lead',{event_category:'form',event_label:'thanks_page'}); } }catch(e){}
  try{ if(typeof dataLayer!=='undefined'){ dataLayer.push({event:'form_submit_success',page:'thanks'}); } }catch(e){}
  var n=15,el=document.getElementById('ktySec');
  var t=setInterval(function(){ n--; if(el)el.textContent=n; if(n<=0){ clearInterval(t); window.location.href='/'; } },1000);
})();
</script>

rec3237881801 - шапка /sites (168456309 нет, страница 201483509) ДО удаления иконки почты (4499 симв.)

<style>
/* ---------- Header ---------- */
.header{position:fixed;top:0;left:0;right:0;z-index:90;padding:14px 0;transition:background .2s ease,box-shadow .2s ease}
.header.scrolled{background:rgba(12,12,14,.86);backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line)}
.header-in{display:flex;align-items:center;gap:22px}
.logo{font-weight:700;font-size:26px;letter-spacing:-.04em;line-height:1}
.logo span{color:var(--accent)}
.nav{display:flex;gap:4px;margin-left:6px}
.nav a{font-size:14.5px;font-weight:500;color:var(--ink);padding:10px 14px;border-radius:999px;transition:background .15s}
.nav a:hover{background:rgba(255,255,255,.06)}
.header-right{margin-left:auto;display:flex;align-items:center;gap:12px}
.header-phone{font-weight:600;font-size:16px;background:var(--card);border-radius:999px;padding:14px 22px;box-shadow:0 0 0 1px var(--line);letter-spacing:-.01em;transition:transform .15s}
.header-phone:hover{transform:translateY(-2px)}
.msg-ico{width:46px;height:46px;border-radius:50%;background:var(--card);box-shadow:0 0 0 1px var(--line);display:inline-flex;align-items:center;justify-content:center;font-size:17px;transition:transform .15s}
.msg-ico:hover{transform:translateY(-2px)}
.msg-ico--tx{font-family:'Unbounded',Arial,sans-serif;font-weight:700;font-size:15px;color:var(--ink)}
.mm-chan{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.mobile-menu .mm-chan a{font-size:15px;font-weight:600;padding:11px 18px;background:var(--card);border-radius:999px;box-shadow:0 0 0 1px var(--line)}
.header .btn{padding:14px 24px;font-size:14.5px}
.burger{display:none;background:var(--accent);border:none;border-radius:50%;width:52px;height:52px;color:#fff;font-size:19px;box-shadow:0 6px 18px rgba(109,93,251,.4)}
.mobile-menu{display:none;position:fixed;inset:0;background:var(--bg);z-index:89;padding:110px 28px 28px;flex-direction:column;gap:8px}
.mobile-menu.open{display:flex}
.mobile-menu a{font-size:24px;font-weight:600;letter-spacing:-.02em;padding:10px 0}
.mobile-menu .btn{margin-top:14px;font-size:17px}
@media (max-width:1179px){.header-phone{display:none}}
</style>
<header class="header" id="header">
  <div class="container header-in">
    <a href="https://korsprod.ru" class="logo">kors<span>.</span></a>
    <nav class="nav">
      <a href="#cases">Кейсы</a>
      <a href="#services">Услуги</a>
      <a href="#pricing">Тарифы</a>
      <a href="#faq">Вопросы</a>
      <a href="https://korsprod.ru">Упаковка бизнеса ↗</a>
    </nav>
    <div class="header-right">
      <a class="msg-ico" href="https://t.me/korsprodsale" title="Telegram" aria-label="Telegram">✈️</a>
      <a class="msg-ico" href="https://wa.me/79158677996" title="WhatsApp" aria-label="WhatsApp">💬</a>
      <a class="msg-ico msg-ico--tx" href="https://max.ru/u/f9LHodD0cOJry8jfuI2u_X2FJWCLMC5S4I3JfDhcBC6iBjNcaUyKtbZ9Bto" target="_blank" rel="noopener" title="MAX" aria-label="MAX">M</a>
      <a class="msg-ico msg-ico--tx" href="mailto:info@korsprod.ru" title="Почта" aria-label="Написать на почту">@</a>
      <a class="header-phone" href="tel:+79158677996">+7 915 867-79-96</a>
      <a class="btn btn-primary" href="#quiz">Рассчитать стоимость</a>
      <button class="burger" id="burger" aria-label="Меню">☰</button>
    </div>
  </div>
</header>
<div class="mobile-menu" id="mobileMenu">
  <a href="#cases">Кейсы</a>
  <a href="#services">Услуги</a>
  <a href="#pricing">Тарифы</a>
  <a href="#faq">Вопросы</a>
  <a href="https://korsprod.ru">Упаковка бизнеса ↗</a>
  <a href="tel:+79158677996">+7 915 867-79-96</a>
  <a class="btn btn-primary" href="#quiz">Рассчитать стоимость</a>
  <div class="mm-chan">
    <a href="https://t.me/korsprodsale" target="_blank" rel="noopener">Telegram</a>
    <a href="https://wa.me/79158677996" target="_blank" rel="noopener">WhatsApp</a>
    <a href="https://max.ru/u/f9LHodD0cOJry8jfuI2u_X2FJWCLMC5S4I3JfDhcBC6iBjNcaUyKtbZ9Bto" target="_blank" rel="noopener">MAX</a>
    <a href="mailto:info@korsprod.ru">Почта</a>
  </div>
</div>
<script>
var header=document.getElementById('header');
addEventListener('scroll',function(){header.classList.toggle('scrolled',scrollY>10)});
var burger=document.getElementById('burger'),mm=document.getElementById('mobileMenu');
burger.addEventListener('click',function(){mm.classList.toggle('open');burger.textContent=mm.classList.contains('open')?'✕':'☰'});
mm.querySelectorAll('a').forEach(function(a){a.addEventListener('click',function(){mm.classList.remove('open');burger.textContent='☰'})});
</script>

rec2704539501 - плавающий виджет (168456309) ДО исключения формы /photographers (8303 симв.)

<!-- ===== KORS · ПЛАВАЮЩИЙ ВИДЖЕТ СВЯЗИ (внизу справа, всегда виден) · блок T123 ===== -->
<div class="kfab-wrap">
  <div class="kfab__panel" id="kfabPanel">
    <div class="kfab__head">
      <div class="kfab__title">Звоните - ответим на все вопросы</div>
      <div class="kfab__desc">Подскажем по услугам, срокам и стоимости.</div>
    </div>
    <a class="kfab__item" href="tel:+79158677996"><span class="kfab__ic kfab__ic--call"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z"/></svg></span><span class="kfab__tx"><b>Позвонить</b><span>+7 915 867-79-96</span></span></a>
    <a class="kfab__item" href="https://wa.me/79158677996" target="_blank" rel="noopener"><span class="kfab__ic kfab__ic--wa">WA</span><span class="kfab__tx"><b>WhatsApp</b><span>написать в мессенджер</span></span></a>
    <a class="kfab__item" href="https://t.me/korsprodsale" target="_blank" rel="noopener"><span class="kfab__ic kfab__ic--tg">TG</span><span class="kfab__tx"><b>Telegram</b><span>@korsprodsale</span></span></a>
    <a class="kfab__item" href="https://max.ru/u/f9LHodD0cOJry8jfuI2u_X2FJWCLMC5S4I3JfDhcBC6iBjNcaUyKtbZ9Bto" target="_blank" rel="noopener"><span class="kfab__ic kfab__ic--max">MAX</span><span class="kfab__tx"><b>MAX</b><span>мессенджер MAX</span></span></a>
    <a class="kfab__item" href="mailto:info@korsprod.ru"><span class="kfab__ic kfab__ic--mail">@</span><span class="kfab__tx"><b>Почта</b><span>info@korsprod.ru</span></span></a>
    <a class="kfab__item kfab__item--form" href="#popup:zayavka"><span class="kfab__ic kfab__ic--form">→</span><span class="kfab__tx"><b>Оставить заявку</b><span>заполнить форму</span></span></a>
  </div>
  <button class="kfab__btn" id="kfabBtn" aria-label="Связаться с нами">
    <svg class="kfab__open" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"/></svg>
    <svg class="kfab__close" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2.4" stroke-linecap="round"><path d="M18 6 6 18M6 6l12 12"/></svg>
  </button>
</div>
<style>
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Unbounded:wght@400;600;700;800&display=swap');
.kfab-wrap{--bg:#0C0C0E;--raise:#141416;--card:#1B1B1F;--border:#2A2A2E;--text:#F5F3EF;--muted:#9A9A9A;--faint:#6a6a6e;--accent:#6D5DFB;--glow:rgba(109,93,251,.14);
  position:fixed;right:22px;bottom:22px;z-index:9500;font-family:'Manrope',Arial,sans-serif;box-sizing:border-box;}
.kfab-wrap *{box-sizing:border-box;margin:0;padding:0;}
.kfab__btn{position:relative;width:62px;height:62px;border-radius:50%;background:var(--accent);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 30px rgba(109,93,251,.4);margin-left:auto;transition:transform .2s;animation:kfabPulse 2.6s infinite;}
.kfab__btn:hover{transform:scale(1.06);}
.kfab__btn svg{width:27px;height:27px;position:absolute;transition:opacity .2s,transform .2s;}
.kfab__close{opacity:0;transform:rotate(-45deg);}
.kfab-wrap.open .kfab__open{opacity:0;transform:rotate(45deg);}
.kfab-wrap.open .kfab__close{opacity:1;transform:rotate(0);}
.kfab-wrap.open .kfab__btn{animation:none;}
@keyframes kfabPulse{0%{box-shadow:0 10px 30px rgba(109,93,251,.4),0 0 0 0 rgba(109,93,251,.45);}70%{box-shadow:0 10px 30px rgba(109,93,251,.4),0 0 0 16px rgba(109,93,251,0);}100%{box-shadow:0 10px 30px rgba(109,93,251,.4),0 0 0 0 rgba(109,93,251,0);}}
.kfab__panel{position:absolute;right:0;bottom:74px;width:300px;background:var(--raise);border:1px solid var(--border);border-radius:16px;padding:16px;
  box-shadow:0 20px 50px rgba(0,0,0,.5);opacity:0;transform:translateY(12px) scale(.98);transform-origin:bottom right;pointer-events:none;transition:.25s cubic-bezier(.2,.8,.2,1);}
.kfab-wrap.open .kfab__panel{opacity:1;transform:translateY(0) scale(1);pointer-events:auto;}
.kfab__head{padding:4px 4px 14px;border-bottom:1px solid var(--border);margin-bottom:12px;}
.kfab__title{font-family:'Unbounded';font-weight:600;font-size:15px;line-height:1.3;color:var(--text);margin-bottom:6px;}
.kfab__desc{font-size:12.5px;color:var(--muted);line-height:1.45;}
.kfab__item{display:flex;align-items:center;gap:12px;padding:10px 10px;border-radius:11px;text-decoration:none;color:var(--text);transition:.18s;}
.kfab__item:hover{background:var(--card);}
.kfab__ic{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-family:'Unbounded';font-size:12px;font-weight:700;flex:none;background:rgba(109,93,251,.14);color:var(--accent);}
.kfab__ic--call svg{width:18px;height:18px;}
.kfab__tx{display:flex;flex-direction:column;}
.kfab__tx b{font-size:14px;font-weight:700;}
.kfab__tx span{font-size:12px;color:var(--faint);}
.kfab__item--form{margin-top:6px;background:var(--accent);}
.kfab__item--form:hover{background:var(--accent);filter:brightness(1.05);}
.kfab__item--form .kfab__ic{background:rgba(0,0,0,.18);color:#000;}
.kfab__item--form .kfab__tx b,.kfab__item--form .kfab__tx span{color:#000;}
@media (max-width:560px){
  .kfab-wrap{right:16px;bottom:16px;}
  .kfab__btn{width:56px;height:56px;}
  .kfab__panel{width:min(84vw,300px);bottom:68px;}
}
/* фикс: Tilda красит tel: в чёрный - возвращаем цвет */
.kfab-wrap a[href^="tel:"]{color:var(--text)!important;}
</style>
<script>
(function(){
  var wrap=document.querySelector('.kfab-wrap'); if(!wrap) return;
  var btn=document.getElementById('kfabBtn');
  btn.addEventListener('click',function(e){ e.stopPropagation(); wrap.classList.toggle('open'); });
  document.addEventListener('click',function(e){ if(!wrap.contains(e.target)) wrap.classList.remove('open'); });
  wrap.querySelectorAll('.kfab__item').forEach(function(a){ a.addEventListener('click',function(){ setTimeout(function(){wrap.classList.remove('open');},60); }); });
})();
</script>

<!-- ===== KORS · ПОПАП-ФОРМА ЗАЯВКИ · перекраска акцента в индиго #6D5DFB ===== -->
<style>
#rec2704488601 .t-submit{background:#6D5DFB !important;color:#fff !important;}
#rec2704488601 .t-submit:hover{background:#5B4CE0 !important;}
#rec2704488601 .t-radio__indicator{border-color:#6D5DFB !important;}
#rec2704488601 .t-radio__indicator::after{background:#6D5DFB !important;}
#rec2704488601 .t-radio__control:checked ~ .t-radio__indicator,
#rec2704488601 .t-radio__control:checked + .t-radio__indicator{background:#6D5DFB !important;border-color:#6D5DFB !important;}
</style>
<script>
/* Строка «Не любите формы» под каждой видимой формой Тильды на странице:
   попап «Обсудить проект», попап «Разбор материалов», форма на /photographers.
   Ставится один раз на форму, скрытые формы-мосты и баннер cookie пропускаем. */
(function(){
  var MAIL = "sales@korsprod.ru";
  function note(){
    var forms = document.querySelectorAll(".t-form");
    for(var i = 0; i < forms.length; i++){
      var f = forms[i];
      if(f.getAttribute("data-kmailnote")) continue;
      if(f.closest("#rec3177014801")) continue;
      if(!f.classList.contains("js-form-proccess")) continue;
      if(f.querySelectorAll("input:not([type=hidden]), textarea").length < 2) continue;
      f.setAttribute("data-kmailnote", "1");
      var d = document.createElement("div");
      d.className = "kmailnote";
      d.innerHTML = 'Не любите формы - напишите на <a href="mailto:' + MAIL + '">' + MAIL + '</a>';
      f.appendChild(d);
    }
  }
  note();
  document.addEventListener("click", function(){ setTimeout(note, 400); });
  setTimeout(note, 1500);
  setTimeout(note, 4000);
})();
</script>
<style>
.kmailnote{margin-top:14px;text-align:center;font:400 14px/1.5 'Manrope',Arial,sans-serif;color:#9A9A9A;}
.kmailnote a{color:#A99CFF;text-decoration:underline;text-underline-offset:3px;}
.kmailnote a:hover{color:#F5F3EF;}
</style>

rec3235536501 - поле text подписи под формой /photographers ДО замены info@ на sales@ (327 симв.)

Не передаём файлы третьим лицам. Если у вас NDA, подпишем до отправки.<br>Файл больше лимита пришлите на info@korsprod.ru или в Telegram @korsprodsale.<br>Нажимая кнопку, я соглашаюсь с <a href="/policy" target="_blank" rel="noreferrer noopener">политикой конфиденциальности</a> и даю согласие на обработку персональных данных.

rec1645479931 - нативный блок T188 (круглые иконки соцсетей) на /photographers. Не удаляется, а отключается через панель блока. Ссылки в нём были: tel:79158677996, https://wa.me/79158677996, https://t.me/korsproduction. Для отката - включить блок обратно и отключить новый HTML-блок.

rec2662784501 - главная, hero десктоп (156037446) (14766 симв.)

<!-- ===== KORS HERO · ДЕСКТОП · блок T123 (HTML-код). Показывать ТОЛЬКО на компьютере. ===== -->
<div class="khd">
<div class="khd__vid"><iframe class="khd__kv" src="https://kinescope.io/embed/vcDamsVPzsEPAgvishqMMn?autoplay=true&muted=true&loop=true&controls=false&playsInline=true&background=true" allow="autoplay; fullscreen; encrypted-media; picture-in-picture" frameborder="0"></iframe></div>
<div class="khd__shade" aria-hidden="true"></div>
<div class="khd__dim"></div>
<div class="khd__corners">
<div class="khd__corner khd__corner--l"><span class="khd__reccombo"><span class="khd__recdot" aria-hidden="true"></span><b class="khd__rectxt">REC</b><span class="khd__tm">00:00:00</span></span><span class="khd__cdiv" aria-hidden="true"></span><span class="khd__ctext">СТУДИЯ ДЛЯ ПРОИЗВОДСТВЕННЫХ КОМПАНИЙ</span></div>
<div class="khd__corner khd__corner--r">ОФИС В МОСКВЕ · РАБОТАЕМ ПО ВСЕЙ РОССИИ С 2019 ГОДА</div>
</div>
<div class="khd__in">
<h1 class="khd__headline"><span class="khd__headline-line khd__headline-line--main">Показываем производство и компании через создание <span class="khd__hl-accent">видео, сайта, презентаций</span> и других материалов.</span></h1>
<p class="khd__lead">Можно начать с одной задачи или собрать всё необходимое к выставке, экспорту или запуску продукта.</p>
<div class="khd__btns"><a class="khd__btn khd__btn--p" href="#rec2619108701">Открыть калькулятор цен</a></div>
<div class="khd__pills"><a class="pill" href="https://t.me/korsprodsale" target="_blank" rel="noopener"><i></i>Telegram</a><a class="pill" href="https://max.ru/u/f9LHodD0cOJry8jfuI2u_X2FJWCLMC5S4I3JfDhcBC6iBjNcaUyKtbZ9Bto" target="_blank" rel="noopener"><i></i>MAX</a><a class="pill" href="https://wa.me/79158677996" target="_blank" rel="noopener"><i></i>WhatsApp</a><a class="pill" href="tel:+79158677996"><i></i>Позвонить</a></div>
</div>
<!-- блок 460+ и «нам доверяют» стоят вплотную и читаются как один нижний блок -->
<div class="khd__bottom">
<div class="khd__proof-panel">
<div class="khd__proof-main"><strong>460+</strong><span>проектов</span></div>
<div class="khd__proof-points">
<span><i></i>Снимаем на действующих производствах</span>
<span><i></i>Клиенты возвращаются со следующими задачами</span>
<span><i></i>Смета и дата сдачи фиксируются до старта</span>
</div>
</div>
<div class="khd__mq"><span class="lab">НАМ ДОВЕРЯЮТ</span><div class="track"><div class="mqt"></div></div></div>
</div>
<div class="khd__sheet"></div>
</div>
<style>
#rec2501675451{display:none!important;}
#rec2662784501{padding-top:0!important;}
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Unbounded:wght@400;600;700;800&display=swap');
.khd{--bg:#0C0C0E;--raise:#141416;--card:#1B1B1F;--border:#2A2A2E;--soft:#242428;--text:#F5F3EF;--muted:#9A9A9A;--faint:#6a6a6e;--accent:#6D5DFB;--glow:rgba(109,93,251,.14);--poster:url('https://edge-dallas-1.kinescopecdn.net/a3074074-1875-40f9-995e-bccec6743573/posters/b69727e6-91ed-4da7-88cd-04b74ca93544/poster_lg/143685af-babb-4e82-9fa5-f9a59b8bad62.jpg');
position:relative;overflow:hidden;box-sizing:border-box;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:96px 36px 160px;background:var(--bg)}
.khd *{box-sizing:border-box;margin:0;padding:0}
.khd a[href^="tel:"]{color:var(--muted)!important}
.khd__vid{position:absolute;inset:0;overflow:hidden;background:var(--poster) center/cover;z-index:0}
.khd__kv{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);min-width:100%;min-height:100%;width:auto;height:auto;aspect-ratio:16/9;border:none;pointer-events:none}
.khd__shade{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(12,12,14,.50) 0%,rgba(12,12,14,.62) 50%,rgba(12,12,14,.88) 100%)}
.khd__dim{position:absolute;inset:0;z-index:1;background:radial-gradient(1100px 620px at 50% 12%,rgba(109,93,251,.10),transparent 60%),linear-gradient(180deg,rgba(10,10,12,.72),rgba(10,10,12,.9))}
.khd__corners{position:absolute;top:26px;left:36px;right:36px;z-index:3;display:flex;align-items:flex-start;justify-content:space-between;gap:18px;flex-wrap:wrap}
.khd__corner{font-family:'Unbounded',sans-serif;font-size:clamp(10.5px,0.95vw,12px);letter-spacing:.13em;line-height:1.5;color:#c9c7d6;text-transform:uppercase;display:flex;align-items:center;gap:10px}
.khd__corner--r{text-align:right}
.khd__reccombo{display:inline-flex;align-items:center;gap:7px;color:#F5F3EF}
.khd__recdot{width:7px;height:7px;border-radius:50%;background:#FF5252;box-shadow:0 0 10px rgba(255,82,82,.65);animation:khdPulse 1.8s ease-in-out infinite}
.khd__rectxt{font-weight:700;letter-spacing:.14em}
.khd__tm{font-variant-numeric:tabular-nums;letter-spacing:.02em;color:#c9c7d6;font-weight:600}
.khd__cdiv{width:1px;height:10px;background:rgba(255,255,255,.2)}
@keyframes khdPulse{0%,100%{opacity:1}50%{opacity:.32}}
@media(prefers-reduced-motion:reduce){.khd__recdot{animation:none}}
.khd__in{position:relative;z-index:3;width:min(1180px,100%);display:flex;flex-direction:column;align-items:center;text-align:center}
.khd__headline{width:100%;font-family:'Unbounded',sans-serif;letter-spacing:-.035em;text-shadow:0 2px 24px rgba(0,0,0,.58)}
.khd__headline-line{display:block;margin-inline:auto;text-wrap:balance}
.khd__headline-line--main{max-width:1120px;font-size:clamp(40px,3.3vw,50px);line-height:1.14;font-weight:800;color:var(--text)}
.khd__hl-accent{color:#d8d5ff}
.khd__lead{max-width:760px;margin-top:22px;color:#c4c2be;font:500 16px/1.55 'Manrope',Arial,sans-serif;text-wrap:balance;text-shadow:0 2px 18px rgba(0,0,0,.55)}
.khd__btns{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:clamp(26px,2.6vw,32px)}
.khd__btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:16px 30px;border-radius:10px;font:700 15px/1 'Manrope',Arial,sans-serif;text-decoration:none;cursor:pointer;border:none;transition:.25s}
.khd__btn--p{background:var(--accent);color:#fff;box-shadow:0 10px 30px rgba(109,93,251,.28)}
.khd__btn--p:hover{transform:translateY(-2px);box-shadow:0 14px 38px rgba(109,93,251,.4)}
.khd__pills{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin-top:16px}
.khd__pills .pill{display:inline-flex;align-items:center;gap:8px;padding:10px 15px;border:1px solid var(--border);border-radius:9px;color:var(--muted);font:600 13px/1 'Manrope',Arial,sans-serif;text-decoration:none;background:rgba(20,20,22,.4);transition:.2s}
.khd__pills .pill:hover{border-color:var(--accent);color:#e8e7ff}
.khd__pills .pill i{width:6px;height:6px;border-radius:50%;background:var(--accent);flex:none}
.khd__bottom{position:absolute;left:0;right:0;bottom:0;z-index:4;display:flex;flex-direction:column;align-items:center}
.khd__proof-panel{width:min(1080px,calc(100% - 72px));display:grid;grid-template-columns:230px 1fr;align-items:stretch;margin:0 auto;border:1px solid rgba(255,255,255,.12);border-bottom:none;border-radius:16px 16px 0 0;background:linear-gradient(180deg,rgba(21,21,25,.88),rgba(11,11,14,.78));box-shadow:0 18px 46px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.04);overflow:hidden;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.khd__proof-main{display:flex;align-items:center;justify-content:center;gap:14px;padding:18px 22px;background:linear-gradient(135deg,rgba(109,93,251,.25),rgba(109,93,251,.06));border-right:1px solid rgba(255,255,255,.1)}
.khd__proof-main strong{font-family:'Unbounded',sans-serif;font-size:40px;line-height:1;font-weight:800;color:#fff;letter-spacing:-.04em}
.khd__proof-main span{max-width:130px;text-align:left;color:#c7c3e2;font:700 11px/1.35 'Manrope',Arial,sans-serif;letter-spacing:.08em;text-transform:uppercase}
.khd__proof-points{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:center}
.khd__proof-points span{min-height:74px;display:flex;align-items:center;gap:10px;padding:16px 18px;color:#d7d5d0;font:600 12.5px/1.4 'Manrope',Arial,sans-serif;text-align:left;border-right:1px solid rgba(255,255,255,.08)}
.khd__proof-points span:last-child{border-right:0}
.khd__proof-points i{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 12px rgba(109,93,251,.65);flex:none}
.khd__offer-chips{width:min(1080px,100%);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:clamp(26px,3vw,34px)}
.khd__offer-chips span{min-height:60px;display:flex;align-items:center;justify-content:center;gap:11px;padding:14px 18px;border:1px solid rgba(109,93,251,.42);border-radius:13px;background:linear-gradient(180deg,rgba(109,93,251,.16),rgba(20,20,24,.72));box-shadow:inset 0 1px 0 rgba(255,255,255,.06);color:#F5F3EF;font:700 15px/1.3 'Manrope',Arial,sans-serif;text-align:center;opacity:0;transform:translateY(16px);transition:opacity .5s ease,transform .5s ease}
.khd__offer-chips span.khd-in{opacity:1;transform:none}
.khd__offer-chips span:nth-child(1){transition-delay:.05s}
.khd__offer-chips span:nth-child(2){transition-delay:.14s}
.khd__offer-chips span:nth-child(3){transition-delay:.23s}
.khd__offer-chips i{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 14px rgba(109,93,251,.7);flex:none}
@media(prefers-reduced-motion:reduce){.khd__offer-chips span{transition:none;opacity:1;transform:none}}
.khd__mq{position:relative;width:100%;z-index:4;overflow:hidden;height:52px;display:flex;align-items:center;border-top:1px solid rgba(255,255,255,.08);background:rgba(8,8,10,.55)}
.khd__mq .lab{flex:none;font-family:'Unbounded',sans-serif;font-size:10px;letter-spacing:.12em;color:var(--faint);padding:0 16px;height:100%;display:flex;align-items:center;background:rgba(8,8,10,.9);z-index:2}
.khd__mq .track{position:relative;flex:1;overflow:hidden;height:100%;-webkit-mask-image:linear-gradient(90deg,#000 90%,transparent);mask-image:linear-gradient(90deg,#000 90%,transparent)}
.khd__mq .mqt{position:absolute;top:50%;transform:translateY(-50%);display:flex;gap:42px;width:max-content;animation:khdMq 28s linear infinite}
.khd__mq .mqt b{font-family:'Unbounded',sans-serif;font-size:16px;color:#9a9893;font-weight:600;white-space:nowrap}
@keyframes khdMq{to{transform:translate(-50%,-50%)}}
/* короткие экраны: ужимаем вертикальные отступы, чтобы первый экран помещался целиком */
@media screen and (max-height:860px){
.khd{padding:64px 36px 140px}
.khd__lead{margin-top:18px}
.khd__btns{margin-top:24px}
.khd__pills{margin-top:13px}
.khd__proof-main{padding:14px 20px}
.khd__proof-main strong{font-size:34px}
.khd__proof-points span{min-height:64px;padding:13px 16px}
.khd__mq{height:46px}
}
@media screen and (max-height:720px){
.khd{padding:44px 36px 122px}
.khd__corners{top:16px}
.khd__headline-line--main{font-size:clamp(34px,2.7vw,42px)}
.khd__lead{margin-top:14px;font-size:15px}
.khd__btns{margin-top:18px}
.khd__btn{padding:14px 26px}
.khd__pills{margin-top:10px}
.khd__pills .pill{padding:8px 13px}
.khd__proof-main{padding:11px 18px}
.khd__proof-main strong{font-size:30px}
.khd__proof-points span{min-height:54px;padding:10px 15px;font-size:12px}
.khd__mq{height:42px}
}
/* низкие окна: мессенджеры дублируют плавающий виджет связи, прячем ради видимости плашки и бегущей строки */
@media screen and (max-height:800px){
.khd__pills{display:none}
}
@media(max-width:980px){.khd{padding:110px 24px 252px}.khd__offer-chips{grid-template-columns:1fr}.khd__proof-panel{grid-template-columns:190px 1fr}.khd__proof-points{grid-template-columns:1fr}.khd__proof-points span{min-height:unset;padding:12px 16px;border-right:0;border-bottom:1px solid rgba(255,255,255,.07)}.khd__proof-points span:last-child{border-bottom:0}.khd__corners{position:static;margin-bottom:22px;flex-direction:column;align-items:flex-start;gap:8px}.khd__corner--r{text-align:left}}
@media(max-width:480px){.khd{display:none}}
</style>
<script>
(function(){
var wrap=document.querySelector('.khd'); if(!wrap) return;
function fmt(s){function p(n){return (n<10?'0':'')+n;}var h=Math.floor(s/3600),m=Math.floor(s%3600/60),x=s%60;return p(h)+':'+p(m)+':'+p(x);}
var t0=Date.now();
function tick(){var s=Math.floor((Date.now()-t0)/1000);wrap.querySelectorAll('.khd__tm').forEach(function(el){el.textContent=fmt(s);});}
tick(); setInterval(tick,1000);
var words=['сайты','видео','презентации','фотосъёмку','фирменный стиль'];
wrap.querySelectorAll('.khd__rot').forEach(function(el){var i=0;setInterval(function(){i=(i+1)%words.length;el.style.opacity='0';el.style.transform='translateY(8px)';setTimeout(function(){el.textContent=words[i];el.style.opacity='1';el.style.transform='translateY(0)';},200);},1500);});
var logos=['Одоевские консервы','InvoiceBox','Вистекс','Водоходъ','ALFA-BANK','Wildberries','Яндекс Драйв','ЭКСМО','Rumi'];
wrap.querySelectorAll('.khd__mq .mqt').forEach(function(t){var h=logos.map(function(l){return '<b>'+l+'</b>';}).join('');t.innerHTML=h+h;});
var sheetHTML='<div class="khsheet-bd khd-close"></div><div class="khsheet-card">'
+'<div class="khsheet-h"><b>Связаться сразу</b><button class="khsheet-x khd-close">×</button></div>'
+'<a class="khci main" href="#popup:zayavka"><span class="ic">→</span><span class="tx"><b>Оставить заявку</b><span>ответим и предложим формат работы</span></span></a>'
+'<a class="khci" href="tel:+79158677996"><span class="ic">тел</span><span class="tx"><b>Позвонить</b><span>+7 915 867-79-96</span></span></a>'
+'<a class="khci" href="https://wa.me/79158677996" target="_blank" rel="noopener"><span class="ic">WA</span><span class="tx"><b>WhatsApp</b><span>написать в мессенджер</span></span></a>'
+'<a class="khci" href="https://t.me/korsprodsale" target="_blank" rel="noopener"><span class="ic">TG</span><span class="tx"><b>Telegram</b><span>@korsprodsale</span></span></a>'
+'<a class="khci" href="https://max.ru/u/f9LHodD0cOJry8jfuI2u_X2FJWCLMC5S4I3JfDhcBC6iBjNcaUyKtbZ9Bto" target="_blank" rel="noopener"><span class="ic">MAX</span><span class="tx"><b>MAX</b><span>мессенджер MAX</span></span></a>'
+'<a class="khci" href="mailto:info@korsprod.ru"><span class="ic">@</span><span class="tx"><b>Почта</b><span>info@korsprod.ru</span></span></a>'
+'</div>';
wrap.querySelectorAll('.khd__sheet').forEach(function(s){s.innerHTML=sheetHTML;});
wrap.querySelectorAll('.khd-open').forEach(function(b){b.addEventListener('click',function(e){e.preventDefault();var sh=wrap.querySelector('.khd__sheet');if(sh)sh.classList.add('open');});});
wrap.addEventListener('click',function(e){if(e.target.classList.contains('khd-close')){var sh=wrap.querySelector('.khd__sheet');if(sh)sh.classList.remove('open');}});
var chips=wrap.querySelectorAll('.khd__offer-chips span');
requestAnimationFrame(function(){requestAnimationFrame(function(){chips.forEach(function(c){c.classList.add('khd-in');});});});
})();
</script>

rec2663286001 - главная, hero мобильный (156037446) (15172 симв.)

<!-- ===== KORS HERO · МОБИЛКА · блок T123 (HTML-код). Показывать ТОЛЬКО на телефоне. ===== -->
<div class="khm">
<div class="khm__vid"><iframe class="khm__kv" src="https://kinescope.io/embed/jC3unVq9iM2iw4GoQFMiyA?autoplay=true&muted=true&loop=true&controls=false&playsInline=true&background=true" allow="autoplay; fullscreen; encrypted-media; picture-in-picture" frameborder="0"></iframe></div>
<div class="khm__shade" aria-hidden="true"></div>
<div class="khm__dim"></div>
<div class="khm__in">
<!-- верхняя строка: REC с таймером слева, студия справа -->
<div class="khm__corners">
<div class="khm__corner khm__corner--l"><span class="khm__reccombo"><span class="khm__recdot" aria-hidden="true"></span><b class="khm__rectxt">REC</b><span class="khm__tm">00:00:00</span></span></div>
<div class="khm__corner khm__corner--r"><span class="khm__ctext">СТУДИЯ ДЛЯ ПРОИЗВОДСТВЕННЫХ КОМПАНИЙ</span></div>
</div>
<!-- заголовок: четыре строки, кегль подбирается скриптом под ширину -->
<h1 class="khm__headline">
<span class="khm__hl1 fit" data-max="18" data-pad="26">Показываем производство и компании</span>
<span class="khm__hl2 fit" data-max="27">через создание</span>
<span class="khm__hl2 khm__hl-accent fit" data-max="27">видео, сайта, презентаций</span>
<span class="khm__hl2 fit" data-max="27">и других материалов.</span>
</h1>
<p class="khm__lead">Можно начать с одной задачи или собрать всё необходимое к выставке, экспорту или запуску продукта.</p>
<div class="khm__geo fit" data-max="8.5" data-min="6">ОФИС В МОСКВЕ · РАБОТАЕМ ПО ВСЕЙ РОССИИ С 2019 ГОДА</div>
<div class="khm__btns"><a class="khm__btn khm__btn--p" href="#rec2619108701">Открыть калькулятор цен</a></div>
<div class="khm__pills"><a class="pill" href="https://t.me/korsprodsale" target="_blank" rel="noopener"><i></i>Telegram</a><a class="pill" href="https://max.ru/u/f9LHodD0cOJry8jfuI2u_X2FJWCLMC5S4I3JfDhcBC6iBjNcaUyKtbZ9Bto" target="_blank" rel="noopener"><i></i>MAX</a><a class="pill" href="https://wa.me/79158677996" target="_blank" rel="noopener"><i></i>WhatsApp</a><a class="pill" href="tel:+79158677996"><i></i>Позвонить</a></div>
</div>
<!-- блок 460+ и «нам доверяют» стоят вплотную и читаются как один нижний блок -->
<div class="khm__bottom">
<div class="khm__proof-panel">
<div class="khm__proof-main"><strong>460+</strong><span>проектов</span></div>
<div class="khm__proof-points">
<span><i></i>Снимаем на действующих производствах</span>
<span><i></i>Клиенты возвращаются со следующими задачами</span>
<span><i></i>Смета и дата сдачи фиксируются до старта</span>
</div>
</div>
<div class="khm__mq"><span class="lab">НАМ ДОВЕРЯЮТ</span><div class="track"><div class="mqt"></div></div></div>
</div>
<div class="khm__sheet"></div>
</div>
<style>
@media (min-width:481px){.khm{display:none}}
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Unbounded:wght@400;600;700;800&display=swap');
.khm{--bg:#0C0C0E;--card:#1B1B1F;--border:#2A2A2E;--text:#F5F3EF;--muted:#9A9A9A;--faint:#6a6a6e;--accent:#6D5DFB;--poster:url('https://edge-dallas-1.kinescopecdn.net/a3074074-1875-40f9-995e-bccec6743573/posters/cc5f5690-a7d8-43d4-8fc2-49c7d64e8027/poster_lg/019fbf27-f1ba-7cdc-b192-4e06c741872e.jpg');
position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:0;text-align:center;background:var(--bg)}
.khm *{box-sizing:border-box;margin:0;padding:0}
.khm a[href^="tel:"]{color:var(--muted)!important}
.khm__vid{position:absolute;inset:0;overflow:hidden;background:var(--poster) center/cover;z-index:0}
.khm__kv{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);min-width:100%;min-height:100%;width:auto;height:auto;aspect-ratio:16/9;border:none;pointer-events:none}
.khm__shade{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(12,12,14,.55) 0%,rgba(12,12,14,.7) 55%,rgba(12,12,14,.92) 100%)}
.khm__dim{position:absolute;inset:0;z-index:1;background:radial-gradient(700px 420px at 50% 6%,rgba(109,93,251,.12),transparent 60%),linear-gradient(180deg,rgba(10,10,12,.72),rgba(10,10,12,.92))}
.khm__in{position:relative;z-index:3;width:100%;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;align-items:center;padding:calc(24px + env(safe-area-inset-top)) 20px calc(24px + env(safe-area-inset-bottom))}
.khm__corners{width:100%;display:flex;flex-direction:row;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:0}
.khm__geo{width:100%;max-width:360px;font-family:'Unbounded',sans-serif;font-size:8.5px;letter-spacing:.05em;line-height:1.45;color:#8b8996;text-transform:uppercase;text-align:center;white-space:nowrap;margin:auto 0 13px;padding-top:22px}
.khm__corner{font-family:'Unbounded',sans-serif;font-size:clamp(8.5px,2.3vw,10px);letter-spacing:.05em;line-height:1.45;color:#c9c7d6;text-transform:uppercase;display:flex;align-items:center;gap:7px}
.khm__corner--l{flex:0 0 auto;justify-content:flex-start;text-align:left;white-space:nowrap}
.khm__corner--r{flex:0 1 auto;max-width:160px;justify-content:flex-end;text-align:right;white-space:normal}
.khm__reccombo{display:inline-flex;align-items:center;gap:6px;color:#F5F3EF}
.khm__recdot{width:7px;height:7px;border-radius:50%;background:#FF5252;box-shadow:0 0 10px rgba(255,82,82,.65);animation:khmPulse 1.8s ease-in-out infinite}
.khm__rectxt{font-weight:700;letter-spacing:.12em}
.khm__tm{font-variant-numeric:tabular-nums;color:#c9c7d6;font-weight:600}
.khm__cdiv{width:1px;height:10px;background:rgba(255,255,255,.2)}
@keyframes khmPulse{0%,100%{opacity:1}50%{opacity:.32}}
@media(prefers-reduced-motion:reduce){.khm__recdot{animation:none}}
.khm__headline{width:100%;margin-top:auto;display:flex;flex-direction:column;align-items:center;text-align:center;text-shadow:0 2px 20px rgba(0,0,0,.6)}
.khm__hl1{display:inline-block;max-width:100%;white-space:nowrap;font-family:'Manrope',Arial,sans-serif;font-weight:700;font-size:15px;letter-spacing:.02em;line-height:1.2;text-transform:uppercase;color:#efeee9;background:rgba(109,93,251,.15);border:1px solid rgba(109,93,251,.4);border-radius:999px;padding:9px 12px;margin-bottom:15px}
.khm__hl2{display:block;white-space:nowrap;font-family:'Unbounded',sans-serif;font-weight:800;font-size:27px;letter-spacing:-.03em;line-height:1.16;color:#efeee9;margin-bottom:3px}
.khm__hl2:last-child{margin-bottom:0}
.khm__hl-accent{color:#a99dff}
.khm__lead{width:100%;max-width:360px;margin-top:16px;color:#c4c2be;font:500 13px/1.55 'Manrope',Arial,sans-serif;text-align:center;text-wrap:balance;text-shadow:0 2px 18px rgba(0,0,0,.56)}
.khm__btns{width:100%;max-width:360px;display:flex;flex-direction:column;gap:10px;margin-top:0;padding-top:0}
.khm__btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:17px;border-radius:12px;font:700 15px/1 'Manrope',Arial,sans-serif;text-decoration:none;border:none;cursor:pointer}
.khm__btn--p{background:var(--accent);color:#fff;box-shadow:0 10px 26px rgba(109,93,251,.3)}
.khm__pills{width:100%;max-width:360px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:14px}
.khm__pills .pill{display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:9px 10px;border:1px solid var(--border);border-radius:9px;color:var(--muted);font:600 13px/1 'Manrope',Arial,sans-serif;text-decoration:none;background:rgba(20,20,22,.42)}
.khm__pills .pill i{width:6px;height:6px;border-radius:50%;background:var(--accent);flex:none}
.khm__bottom{position:relative;width:100%;z-index:4;display:flex;flex-direction:column;align-items:center}
.khm__proof-panel{width:calc(100% - 24px);max-width:400px;margin:0 auto;border:1px solid rgba(255,255,255,.12);border-bottom:none;border-radius:14px 14px 0 0;background:linear-gradient(180deg,rgba(21,21,25,.9),rgba(10,10,13,.82));box-shadow:0 18px 44px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.04);overflow:hidden;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.khm__proof-main{display:flex;align-items:center;justify-content:center;gap:12px;padding:16px 18px;background:linear-gradient(135deg,rgba(109,93,251,.25),rgba(109,93,251,.06));border-bottom:1px solid rgba(255,255,255,.1)}
.khm__proof-main strong{font-family:'Unbounded',sans-serif;font-size:40px;line-height:1;font-weight:800;color:#fff;letter-spacing:-.04em}
.khm__proof-main span{max-width:130px;text-align:left;color:#c7c3e2;font:700 11px/1.35 'Manrope',Arial,sans-serif;letter-spacing:.08em;text-transform:uppercase}
.khm__proof-points{display:grid;grid-template-columns:1fr}
.khm__proof-points span{display:flex;align-items:center;gap:11px;min-height:48px;padding:12px 16px;color:#d7d5d0;font:600 12px/1.4 'Manrope',Arial,sans-serif;text-align:left;border-bottom:1px solid rgba(255,255,255,.07)}
.khm__proof-points span:last-child{border-bottom:0}
.khm__proof-points i{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 12px rgba(109,93,251,.65);flex:none}
.khm__offer-chips{width:100%;max-width:400px;display:grid;grid-template-columns:1fr;gap:10px;margin-top:22px}
.khm__offer-chips span{min-height:52px;display:flex;align-items:center;justify-content:center;gap:10px;padding:12px 14px;border:1px solid rgba(109,93,251,.5);border-radius:12px;background:linear-gradient(180deg,rgba(109,93,251,.2),rgba(18,18,22,.78));box-shadow:inset 0 1px 0 rgba(255,255,255,.06);color:#F5F3EF;font:700 14px/1.3 'Manrope',Arial,sans-serif;text-align:center;opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
.khm__offer-chips span.khm-in{opacity:1;transform:none}
.khm__offer-chips span:nth-child(1){transition-delay:.05s}
.khm__offer-chips span:nth-child(2){transition-delay:.14s}
.khm__offer-chips span:nth-child(3){transition-delay:.23s}
.khm__offer-chips i{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 13px rgba(109,93,251,.72);flex:none}
@media(prefers-reduced-motion:reduce){.khm__offer-chips span{transition:none;opacity:1;transform:none}}
/* контактная шторка не используется: без своего CSS она занимала 113px пустоты под логотипами */
.khm__sheet{display:none}
.khm__sheet.open{display:block}
.khm__mq{position:relative;width:100%;z-index:4;overflow:hidden;height:48px;display:flex;align-items:center;border-top:1px solid rgba(255,255,255,.08);background:rgba(8,8,10,.6)}
.khm__mq .lab{flex:none;font-family:'Unbounded',sans-serif;font-size:9.5px;letter-spacing:.1em;color:var(--faint);padding:0 12px;height:100%;display:flex;align-items:center;background:rgba(8,8,10,.92);z-index:2}
.khm__mq .track{position:relative;flex:1;overflow:hidden;height:100%;-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}
.khm__mq .mqt{position:absolute;top:50%;transform:translateY(-50%);display:flex;gap:30px;width:max-content;animation:khmMq 24s linear infinite}
.khm__mq .mqt b{font-family:'Unbounded',sans-serif;font-size:14px;color:#9a9893;font-weight:600;white-space:nowrap}
@keyframes khmMq{to{transform:translate(-50%,-50%)}}
@media(max-width:360px){.khm__in{padding-left:14px;padding-right:14px}.khm__offer-chips span{font-size:13px}}
</style>
<script>
(function(){
var wrap=document.querySelector('.khm'); if(!wrap) return;
function fmt(s){function p(n){return (n<10?'0':'')+n;}var h=Math.floor(s/3600),m=Math.floor(s%3600/60),x=s%60;return p(h)+':'+p(m)+':'+p(x);}
var t0=Date.now();
function tick(){var s=Math.floor((Date.now()-t0)/1000);wrap.querySelectorAll('.khm__tm').forEach(function(el){el.textContent=fmt(s);});}
tick(); setInterval(tick,1000);
var words=['сайты','видео','презентации','фотосъёмку','фирменный стиль'];
wrap.querySelectorAll('.khm__rot').forEach(function(el){var i=0;setInterval(function(){i=(i+1)%words.length;el.style.opacity='0';el.style.transform='translateY(8px)';setTimeout(function(){el.textContent=words[i];el.style.opacity='1';el.style.transform='translateY(0)';},200);},1500);});
var logos=['Одоевские консервы','InvoiceBox','Вистекс','Водоходъ','ALFA-BANK','Wildberries','Яндекс Драйв','ЭКСМО','Rumi'];
wrap.querySelectorAll('.khm__mq .mqt').forEach(function(t){var h=logos.map(function(l){return '<b>'+l+'</b>';}).join('');t.innerHTML=h+h;});
var sheetHTML='<div class="khsheet-bd khm-close"></div><div class="khsheet-card">'
+'<div class="khsheet-h"><b>Связаться сразу</b><button class="khsheet-x khm-close">×</button></div>'
+'<a class="khci main" href="#popup:zayavka"><span class="ic">→</span><span class="tx"><b>Оставить заявку</b><span>ответим и предложим формат работы</span></span></a>'
+'<a class="khci" href="tel:+79158677996"><span class="ic">тел</span><span class="tx"><b>Позвонить</b><span>+7 915 867-79-96</span></span></a>'
+'<a class="khci" href="https://wa.me/79158677996" target="_blank" rel="noopener"><span class="ic">WA</span><span class="tx"><b>WhatsApp</b><span>написать в мессенджер</span></span></a>'
+'<a class="khci" href="https://t.me/korsprodsale" target="_blank" rel="noopener"><span class="ic">TG</span><span class="tx"><b>Telegram</b><span>@korsprodsale</span></span></a>'
+'<a class="khci" href="https://max.ru/u/f9LHodD0cOJry8jfuI2u_X2FJWCLMC5S4I3JfDhcBC6iBjNcaUyKtbZ9Bto" target="_blank" rel="noopener"><span class="ic">MAX</span><span class="tx"><b>MAX</b><span>мессенджер MAX</span></span></a>'
+'<a class="khci" href="mailto:info@korsprod.ru"><span class="ic">@</span><span class="tx"><b>Почта</b><span>info@korsprod.ru</span></span></a>'
+'</div>';
wrap.querySelectorAll('.khm__sheet').forEach(function(s){s.innerHTML=sheetHTML;});
wrap.querySelectorAll('.khm-open').forEach(function(b){b.addEventListener('click',function(e){e.preventDefault();var sh=wrap.querySelector('.khm__sheet');if(sh)sh.classList.add('open');});});
wrap.addEventListener('click',function(e){if(e.target.classList.contains('khm-close')){var sh=wrap.querySelector('.khm__sheet');if(sh)sh.classList.remove('open');}});
var chips=wrap.querySelectorAll('.khm__offer-chips span');
requestAnimationFrame(function(){requestAnimationFrame(function(){chips.forEach(function(c){c.classList.add('khm-in');});});});

/* автоподгонка кеглей заголовка: строки всегда встают по ширине контейнера */
function khmFit(el){
var max=parseFloat(el.getAttribute('data-max'))||24;
var min=parseFloat(el.getAttribute('data-min'))||9;
var pad=parseFloat(el.getAttribute('data-pad'))||0;
var ps=window.getComputedStyle(el.parentElement);
var avail=el.parentElement.clientWidth-parseFloat(ps.paddingLeft)-parseFloat(ps.paddingRight)-pad;
if(avail<=0) return;
var s=max,guard=0;
el.style.fontSize=s+'px';
function width(){var r=document.createRange();r.selectNodeContents(el);return r.getBoundingClientRect().width;}
while(width()>avail && s>min && guard<200){s-=0.5;el.style.fontSize=s+'px';guard++;}
}
function khmFitAll(){wrap.querySelectorAll('.fit').forEach(function(el){khmFit(el);});}
khmFitAll();
if(document.fonts && document.fonts.ready){document.fonts.ready.then(khmFitAll);}else{window.addEventListener('load',khmFitAll);}
window.addEventListener('resize',khmFitAll);
window.addEventListener('orientationchange',khmFitAll);
setTimeout(khmFitAll,1200);
})();
</script>

rec3237946401 - /sites, hero с коллажем (201483509) (3887 симв.)

<style>
/* ---------- Hero ---------- */
.hero{padding:168px 0 78px;position:relative}
.hero::before{content:'';position:absolute;top:-140px;right:-160px;width:620px;height:620px;background:radial-gradient(circle,rgba(109,93,251,.3),transparent 62%);filter:blur(10px);pointer-events:none}
.hero::after{content:'';position:absolute;bottom:-160px;left:-200px;width:520px;height:520px;background:radial-gradient(circle,rgba(109,93,251,.16),transparent 60%);pointer-events:none}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center;position:relative;z-index:1}
.hero .sub{margin:24px 0 34px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap}
.hero-trust{display:flex;gap:34px;margin-top:44px;flex-wrap:wrap}
.hero-trust div b{font-size:30px;font-weight:700;letter-spacing:-.03em;display:block;line-height:1.1}
.hero-trust div span{font-size:13.5px;color:var(--muted)}
.hero-collage{display:grid;grid-template-columns:1fr .46fr;gap:14px}
.hero-collage .shot{position:relative;overflow:hidden;border-radius:var(--r-sm);box-shadow:0 0 0 1px var(--line);background:#0f0f11}
.hero-collage .shot--desk{grid-column:1;grid-row:1}
.hero-collage .shot--mob{grid-column:2;grid-row:1/3}
.hero-collage .shot--vid{grid-column:1;grid-row:2;aspect-ratio:16/9}
.hero-collage .shot img{display:block;width:100%;height:auto}
.hero-collage .shot--mob img{width:100%;height:100%;object-fit:cover;object-position:top center}
.hero-collage .shot iframe{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);min-width:100%;min-height:100%;width:auto;height:auto;aspect-ratio:16/9;border:none;pointer-events:none}
@media (max-width:600px){
.hero-collage{grid-template-columns:1fr 1fr}
.hero-collage .shot--desk{grid-column:1/-1;grid-row:1}
.hero-collage .shot--mob{grid-column:1;grid-row:2;aspect-ratio:3/4}
.hero-collage .shot--vid{grid-column:2;grid-row:2;align-self:center}
}
</style>
<section class="hero">
  <div class="container hero-grid">
    <div>
      <div class="eyebrow">KORS · продающие сайты для бизнеса</div>
      <h1>Сайты для бизнеса с <span class="squig">конверсией от 5%<svg viewBox="0 0 300 24" preserveAspectRatio="none" aria-hidden="true"><path d="M4 14 C70 5 180 4 296 11"/><path d="M140 20 C200 13 255 12 293 16"/></svg></span> — первые заявки через 21 день</h1>
      <p class="sub">Смыслы, тексты, дизайн, сборка и реклама — одной командой KORS. Плюс то, чего не даст обычная веб-студия: своя съёмочная команда — реальные фото и видео вашего бизнеса вместо стоковых картинок.</p>
      <div class="hero-cta">
        <a class="btn btn-primary" href="#quiz">Получить план запуска</a>
        <a class="btn btn-ghost" href="#cases">Смотреть кейсы</a>
      </div>
      <div class="hero-trust">
        <div><b>460+</b><span>проектов студии<br>с 2019 года</span></div>
        <div><b>30+</b><span>ниш — от производств и b2b<br>до услуг и ритейла</span></div>
        <div><b>6,4%</b><span>средняя конверсия<br>наших сайтов в заявку</span></div>
      </div>
    </div>
    <div>
      <div class="hero-collage">
        <div class="shot shot--desk"><img src="https://static.tildacdn.com/tild3463-3561-4837-b438-333439316132/povidlo-su-01-hero.jpg" alt="Первый экран сайта povidlo.su, сделанного студией KORS для производителя фруктово-ягодных начинок" loading="lazy"></div>
        <div class="shot shot--mob"><img src="https://static.tildacdn.com/tild3331-6135-4830-a633-623063326539/photo_52333078068474.jpg" alt="Мобильная версия сайта povidlo.su, сделанного студией KORS" loading="lazy"></div>
        <div class="shot shot--vid"><iframe src="https://kinescope.io/embed/eCGHEdUFdSyEjCBXxcsUSC?autoplay=true&muted=true&loop=true&controls=false&playsInline=true&background=true" title="Шоурил работ студии KORS" aria-label="Шоурил работ студии KORS" allow="autoplay; encrypted-media"></iframe></div>
      </div>
    </div>
  </div>
</section>

rec2704215601 - сквозная шапка + мобильное меню (168449709) (6972 симв.)

<!-- ===== KORS · ШАПКА-МЕНЮ · блок T123. Один адаптивный блок (бургер на мобилке). Поставить в самый верх. ===== -->
<div class="khh-wrap">
  <header class="khh" id="khh">
    <div class="khh__inner">
      <a class="khh__logo" href="/">KORS</a>
      <nav class="khh__nav">
        <a href="/#rec2649099901">Услуги</a>
        <a href="/photographers">Фотосъёмка</a>
        <a href="/sites">Создание сайтов</a>
        <a href="/#rec2667018101">Кейсы</a>
        <a href="/#rec2663623901">Работы</a>
        <a href="/#ksfooter">Контакты</a>
      </nav>
      <a class="khh__cta" href="#popup:zayavka">Обсудить проект</a>
      <button class="khh__burger" id="khhBurger" aria-label="Меню"><span></span><span></span><span></span></button>
    </div>
  </header>
  <div class="khh__panel" id="khhPanel">
    <nav class="khh__mnav">
      <a href="/#rec2649099901">Услуги</a>
      <a href="/photographers">Фотосъёмка</a>
      <a href="/sites">Создание сайтов</a>
      <a href="/#rec2667018101">Кейсы</a>
      <a href="/#rec2663623901">Работы</a>
      <a href="/#ksfooter">Контакты</a>
    </nav>
    <a class="khh__mcta" href="#popup:zayavka">Обсудить проект</a>
    <div class="khh__mpills">
      <a class="khh__pill" href="https://t.me/korsprodsale" target="_blank" rel="noopener"><i></i>Telegram</a>
      <a class="khh__pill" href="https://wa.me/79158677996" target="_blank" rel="noopener"><i></i>WhatsApp</a>
      <a class="khh__pill" href="https://max.ru/u/f9LHodD0cOJry8jfuI2u_X2FJWCLMC5S4I3JfDhcBC6iBjNcaUyKtbZ9Bto" target="_blank" rel="noopener"><i></i>MAX</a>
      <a class="khh__pill" href="tel:+79158677996"><i></i>Позвонить</a>
      <a class="khh__pill" href="mailto:info@korsprod.ru"><i></i>Почта</a>
    </div>
  </div>
</div>
<style>
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Unbounded:wght@400;600;700;800&display=swap');
.khh-wrap{--bg:#0C0C0E;--raise:#141416;--card:#1B1B1F;--border:#2A2A2E;--text:#F5F3EF;--muted:#9A9A9A;--faint:#6a6a6e;--accent:#6D5DFB;--glow:rgba(109,93,251,.14);box-sizing:border-box;}
.khh-wrap *{box-sizing:border-box;margin:0;padding:0;}
.khh{position:fixed;top:0;left:0;right:0;z-index:9000;transform:translateY(-100%);transition:transform .35s cubic-bezier(.2,.8,.2,1),background .3s,border-color .3s;
  background:rgba(10,10,12,.72);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid transparent;font-family:'Manrope',Arial,sans-serif;}
.khh.show{transform:translateY(0);border-bottom-color:var(--border);}
.khh__inner{max-width:1280px;margin:0 auto;height:64px;padding:0 5vw;display:flex;align-items:center;justify-content:space-between;gap:20px;}
.khh__logo{font-family:'Unbounded';font-weight:800;font-size:24px;color:var(--text);text-decoration:none;letter-spacing:-.02em;flex:none;}
.khh__nav{display:flex;align-items:center;gap:28px;}
.khh__nav a{color:var(--muted);text-decoration:none;font-size:15px;font-weight:600;transition:.2s;white-space:nowrap;}
.khh__nav a:hover{color:var(--text);}
.khh__cta{flex:none;background:var(--accent);color:#fff;text-decoration:none;font-weight:700;font-size:14px;padding:11px 20px;border-radius:8px;transition:.2s;white-space:nowrap;}
.khh__cta:hover{transform:translateY(-1px);box-shadow:0 8px 22px var(--glow);}
.khh__burger{display:none;flex-direction:column;gap:5px;width:40px;height:40px;background:transparent;border:none;cursor:pointer;align-items:center;justify-content:center;}
.khh__burger span{display:block;width:22px;height:2px;background:var(--text);transition:.25s;}
.khh__burger.active span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.khh__burger.active span:nth-child(2){opacity:0;}
.khh__burger.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
.khh__panel{position:fixed;top:64px;left:0;right:0;z-index:8999;background:rgba(8,8,10,.98);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--border);
  padding:22px 5vw 28px;transform:translateY(-12px);opacity:0;pointer-events:none;transition:.3s;display:none;}
.khh__panel.open{opacity:1;transform:translateY(0);pointer-events:auto;}
.khh__mnav{display:flex;flex-direction:column;gap:2px;}
.khh__mnav a{color:var(--text);text-decoration:none;font-family:'Unbounded';font-weight:600;font-size:20px;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.05);}
.khh__mcta{display:block;text-align:center;background:var(--accent);color:#fff;text-decoration:none;font-weight:700;font-size:16px;padding:15px;border-radius:9px;margin:20px 0 16px;}
.khh__mpills{display:flex;gap:8px;flex-wrap:wrap;}
.khh__pill{display:inline-flex;align-items:center;gap:7px;padding:10px 14px;border:1px solid var(--border);border-radius:9px;color:var(--text);font-size:13px;font-weight:600;text-decoration:none;}
.khh__pill i{width:7px;height:7px;border-radius:50%;background:var(--accent);}
@media (max-width:760px){
  .khh__nav,.khh__cta{display:none;}
  .khh__burger{display:flex;}
  .khh__panel{display:block;}
}
/* фикс: Tilda красит tel: в чёрный — возвращаем цвет */
.khh-wrap a[href^="tel:"]{color:var(--text)!important;}
</style>
<script>
(function(){
  var wrap=document.querySelector('.khh-wrap'); if(!wrap) return;
  var bar=document.getElementById('khh');
  var burger=document.getElementById('khhBurger');
  var panel=document.getElementById('khhPanel');
  var HEADER=64;
  function isHome(){ var p=location.pathname; return p==='/'||p===''||/\/index/i.test(p); }
  function onScroll(){
    if(!isHome()){ bar.classList.add('show'); return; }
    var y=window.scrollY||document.documentElement.scrollTop;
    if(y>window.innerHeight*0.75){ bar.classList.add('show'); }
    else { bar.classList.remove('show'); closePanel(); }
  }
  window.addEventListener('scroll',onScroll,{passive:true});
  onScroll();
  function openPanel(){ panel.classList.add('open'); burger.classList.add('active'); }
  function closePanel(){ panel.classList.remove('open'); burger.classList.remove('active'); }
  burger.addEventListener('click',function(){ panel.classList.contains('open')?closePanel():openPanel(); });
  document.addEventListener('click',function(e){
    var a=e.target.closest('a[href^="/#"]');
    if(!a) return;
    var id=(a.getAttribute('href')||'').replace('/#','');
    if(isHome()){
      var el=document.getElementById(id);
      if(el && el.offsetParent===null){
        var block=el.closest('.t-rec')||el;
        var sib=block.nextElementSibling;
        while(sib && sib.offsetHeight===0) sib=sib.nextElementSibling;
        if(!sib){ sib=block.previousElementSibling; while(sib && sib.offsetHeight===0) sib=sib.previousElementSibling; }
        if(sib) el=sib;
      }
      if(el){ e.preventDefault(); var y=el.getBoundingClientRect().top+window.scrollY-HEADER-6; window.scrollTo({top:y,behavior:'smooth'}); }
      closePanel();
    } else {
      closePanel();
    }
  });
  window.addEventListener('resize',function(){ /* noop */ });
})();
</script>

rec2704386401 - сквозной подвал (168456309) (5605 симв.)

<!-- ===== KORS · ПОДВАЛ (сквозной) · блок T123. Один адаптивный блок. Поставить в самый низ. ===== -->
<div class="kfoot-wrap">
  <footer class="kfoot" id="ksfooter">
    <div class="kfoot__top">
      <div class="kfoot__brand">
        <a class="kfoot__logo" href="/">KORS</a>
        <div class="kfoot__slogan">KORS - студия для производственных компаний. Видео, сайты, презентации, фото и дизайн материалов для продаж.</div>
        <div class="kfoot__city">МОСКВА · РАБОТАЕМ С 2019 ГОДА</div>
      </div>
      <div class="kfoot__col">
        <div class="kfoot__h">Разделы</div>
        <a href="/#rec2649099901">Услуги</a>
        <a href="/photographers">Фотосъёмка</a>
        <a href="/sites">Создание сайтов</a>
        <a href="/#rec2667018101">Кейсы</a>
        <a href="/#rec2663623901">Работы</a>
      </div>
      <div class="kfoot__col">
        <div class="kfoot__h">Связаться</div>
        <a href="tel:+79158677996">+7 915 867-79-96</a>
        <a href="https://wa.me/79158677996" target="_blank" rel="noopener">WhatsApp</a>
        <a href="https://t.me/korsprodsale" target="_blank" rel="noopener">Telegram - личный</a>
        <a href="https://t.me/KORSproduct" target="_blank" rel="noopener">Telegram - канал</a>
        <a href="https://max.ru/u/f9LHodD0cOJry8jfuI2u_X2FJWCLMC5S4I3JfDhcBC6iBjNcaUyKtbZ9Bto" target="_blank" rel="noopener">MAX</a>
        <a href="mailto:info@korsprod.ru">info@korsprod.ru</a>
      </div>
      <div class="kfoot__cta">
        <div class="kfoot__ctah">Обсудим ваш проект?</div>
        <a class="kfoot__ctabtn" href="#popup:zayavka">Оставить заявку →</a>
      </div>
    </div>
    <div class="kfoot__bottom">
      <div class="kfoot__req">ИП Кормышова Наталия Михайловна · ИНН 682801718806 · ОГРНИП 326680000032471</div>
      <div class="kfoot__legal">
        <a href="https://korsprod.ru/policy" target="_blank" rel="noopener">Политика конфиденциальности</a>
        <a href="https://korsprod.ru/user-agreement" target="_blank" rel="noopener">Пользовательское соглашение</a>
      </div>
      <div class="kfoot__copy">© 2019–<span data-kyear>2026</span> KORS</div>
      <div class="kfoot__rights">Все права защищены. Любое использование либо копирование материалов или подборки материалов сайта, элементов дизайна и оформления допускается лишь с письменного разрешения правообладателя и только со ссылкой на источник.</div>
    </div>
  </footer>
</div>
<style>
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Unbounded:wght@400;600;700;800&display=swap');
.kfoot-wrap{--bg:#0C0C0E;--raise:#141416;--card:#1B1B1F;--border:#2A2A2E;--text:#F5F3EF;--muted:#9A9A9A;--faint:#6a6a6e;--accent:#6D5DFB;--glow:rgba(109,93,251,.14);box-sizing:border-box;}
.kfoot-wrap *{box-sizing:border-box;margin:0;padding:0;}
.kfoot{background:#08080A;color:var(--text);font-family:'Manrope',Arial,sans-serif;-webkit-font-smoothing:antialiased;padding:70px 5vw 34px;border-top:1px solid var(--border);}
.kfoot__top{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:1.6fr 1fr 1.2fr 1.2fr;gap:40px;padding-bottom:48px;border-bottom:1px solid var(--border);}
.kfoot__logo{font-family:'Unbounded';font-weight:800;font-size:34px;color:var(--text);text-decoration:none;letter-spacing:-.02em;display:inline-block;margin-bottom:16px;}
.kfoot__slogan{color:var(--muted);font-size:14px;line-height:1.6;max-width:360px;margin-bottom:16px;}
.kfoot__city{font-family:'Unbounded';font-size:11px;letter-spacing:.1em;color:var(--faint);}
.kfoot__h{font-family:'Unbounded';font-size:12px;letter-spacing:.08em;color:var(--faint);margin-bottom:16px;}
.kfoot__col{display:flex;flex-direction:column;gap:11px;}
.kfoot__col a{color:var(--muted);text-decoration:none;font-size:15px;transition:.2s;}
.kfoot__col a:hover{color:var(--accent);}
.kfoot__ctah{font-family:'Unbounded';font-weight:600;font-size:19px;line-height:1.3;margin-bottom:18px;}
.kfoot__ctabtn{display:inline-block;background:var(--accent);color:#fff;text-decoration:none;font-weight:700;font-size:15px;padding:14px 24px;border-radius:9px;transition:.2s;}
.kfoot__ctabtn:hover{transform:translateY(-2px);box-shadow:0 10px 26px var(--glow);}
.kfoot__bottom{max-width:1280px;margin:0 auto;padding-top:26px;display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;}
.kfoot__req{color:var(--faint);font-size:12.5px;line-height:1.5;}
.kfoot__legal{display:flex;gap:22px;flex-wrap:wrap;}
.kfoot__legal a{color:var(--muted);text-decoration:none;font-size:12.5px;transition:.2s;}
.kfoot__legal a:hover{color:var(--accent);}
.kfoot__copy{color:var(--faint);font-size:12.5px;}
.kfoot__rights{flex:0 0 100%;color:var(--faint);font-size:12.5px;line-height:1.5;}
@media (max-width:900px){ .kfoot__top{grid-template-columns:1fr 1fr;gap:32px;} .kfoot__brand{grid-column:1 / -1;} }
@media (max-width:560px){
  .kfoot{padding:52px 20px 30px;}
  .kfoot__top{grid-template-columns:1fr;gap:30px;}
  .kfoot__bottom{flex-direction:column;align-items:flex-start;gap:12px;}
}
/* фикс: Tilda красит tel: в чёрный - возвращаем цвет */
.kfoot-wrap a[href^="tel:"]{color:var(--muted)!important;}
</style>
<script>
(function(){
  /* Год в копирайте подставляется автоматически по местному времени посетителя.
     Начальный год 2019 зафиксирован в разметке. Если скрипт не отработает,
     в разметке остаётся год, записанный руками, - пустоты и NaN не будет. */
  var y = new Date().getFullYear();
  if(!y || isNaN(y)) return;
  var els = document.querySelectorAll('[data-kyear]');
  for(var i=0;i<els.length;i++){ els[i].textContent = y; }
})();
</script>

rec3237881801 - шапка лендинга /sites (201483509) (4380 симв.)

<style>
/* ---------- Header ---------- */
.header{position:fixed;top:0;left:0;right:0;z-index:90;padding:14px 0;transition:background .2s ease,box-shadow .2s ease}
.header.scrolled{background:rgba(12,12,14,.86);backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line)}
.header-in{display:flex;align-items:center;gap:22px}
.logo{font-weight:700;font-size:26px;letter-spacing:-.04em;line-height:1}
.logo span{color:var(--accent)}
.nav{display:flex;gap:4px;margin-left:6px}
.nav a{font-size:14.5px;font-weight:500;color:var(--ink);padding:10px 14px;border-radius:999px;transition:background .15s}
.nav a:hover{background:rgba(255,255,255,.06)}
.header-right{margin-left:auto;display:flex;align-items:center;gap:12px}
.header-phone{font-weight:600;font-size:16px;background:var(--card);border-radius:999px;padding:14px 22px;box-shadow:0 0 0 1px var(--line);letter-spacing:-.01em;transition:transform .15s}
.header-phone:hover{transform:translateY(-2px)}
.msg-ico{width:46px;height:46px;border-radius:50%;background:var(--card);box-shadow:0 0 0 1px var(--line);display:inline-flex;align-items:center;justify-content:center;font-size:17px;transition:transform .15s}
.msg-ico:hover{transform:translateY(-2px)}
.msg-ico--tx{font-family:'Unbounded',Arial,sans-serif;font-weight:700;font-size:15px;color:var(--ink)}
.mm-chan{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.mobile-menu .mm-chan a{font-size:15px;font-weight:600;padding:11px 18px;background:var(--card);border-radius:999px;box-shadow:0 0 0 1px var(--line)}
.header .btn{padding:14px 24px;font-size:14.5px}
.burger{display:none;background:var(--accent);border:none;border-radius:50%;width:52px;height:52px;color:#fff;font-size:19px;box-shadow:0 6px 18px rgba(109,93,251,.4)}
.mobile-menu{display:none;position:fixed;inset:0;background:var(--bg);z-index:89;padding:110px 28px 28px;flex-direction:column;gap:8px}
.mobile-menu.open{display:flex}
.mobile-menu a{font-size:24px;font-weight:600;letter-spacing:-.02em;padding:10px 0}
.mobile-menu .btn{margin-top:14px;font-size:17px}
@media (max-width:1179px){.header-phone{display:none}}
</style>
<header class="header" id="header">
  <div class="container header-in">
    <a href="https://korsprod.ru" class="logo">kors<span>.</span></a>
    <nav class="nav">
      <a href="#cases">Кейсы</a>
      <a href="#services">Услуги</a>
      <a href="#pricing">Тарифы</a>
      <a href="#faq">Вопросы</a>
      <a href="https://korsprod.ru">Упаковка бизнеса ↗</a>
    </nav>
    <div class="header-right">
      <a class="msg-ico" href="https://t.me/korsprodsale" title="Telegram" aria-label="Telegram">✈️</a>
      <a class="msg-ico" href="https://wa.me/79158677996" title="WhatsApp" aria-label="WhatsApp">💬</a>
      <a class="msg-ico msg-ico--tx" href="https://max.ru/u/f9LHodD0cOJry8jfuI2u_X2FJWCLMC5S4I3JfDhcBC6iBjNcaUyKtbZ9Bto" target="_blank" rel="noopener" title="MAX" aria-label="MAX">M</a>
      <a class="header-phone" href="tel:+79158677996">+7 915 867-79-96</a>
      <a class="btn btn-primary" href="#quiz">Рассчитать стоимость</a>
      <button class="burger" id="burger" aria-label="Меню">☰</button>
    </div>
  </div>
</header>
<div class="mobile-menu" id="mobileMenu">
  <a href="#cases">Кейсы</a>
  <a href="#services">Услуги</a>
  <a href="#pricing">Тарифы</a>
  <a href="#faq">Вопросы</a>
  <a href="https://korsprod.ru">Упаковка бизнеса ↗</a>
  <a href="tel:+79158677996">+7 915 867-79-96</a>
  <a class="btn btn-primary" href="#quiz">Рассчитать стоимость</a>
  <div class="mm-chan">
    <a href="https://t.me/korsprodsale" target="_blank" rel="noopener">Telegram</a>
    <a href="https://wa.me/79158677996" target="_blank" rel="noopener">WhatsApp</a>
    <a href="https://max.ru/u/f9LHodD0cOJry8jfuI2u_X2FJWCLMC5S4I3JfDhcBC6iBjNcaUyKtbZ9Bto" target="_blank" rel="noopener">MAX</a>
    <a href="mailto:info@korsprod.ru">Почта</a>
  </div>
</div>
<script>
var header=document.getElementById('header');
addEventListener('scroll',function(){header.classList.toggle('scrolled',scrollY>10)});
var burger=document.getElementById('burger'),mm=document.getElementById('mobileMenu');
burger.addEventListener('click',function(){mm.classList.toggle('open');burger.textContent=mm.classList.contains('open')?'✕':'☰'});
mm.querySelectorAll('a').forEach(function(a){a.addEventListener('click',function(){mm.classList.remove('open');burger.textContent='☰'})});
</script>

rec2704215601 - сквозная шапка (168449709), вариант с круглой иконкой (8139 симв.)

<!-- ===== KORS · ШАПКА-МЕНЮ · блок T123. Один адаптивный блок (бургер на мобилке). Поставить в самый верх. ===== -->
<div class="khh-wrap">
  <header class="khh" id="khh">
    <div class="khh__inner">
      <a class="khh__logo" href="/">KORS</a>
      <nav class="khh__nav">
        <a href="/#rec2649099901">Услуги</a>
        <a href="/photographers">Фотосъёмка</a>
        <a href="/sites">Создание сайтов</a>
        <a href="/#rec2667018101">Кейсы</a>
        <a href="/#rec2663623901">Работы</a>
        <a href="/#ksfooter">Контакты</a>
      </nav>
      <a class="khh__doc" href="https://drive.google.com/file/d/1HF-3fD3Hym_H-FWr307pvuUo4tu84fJu/view?usp=sharing" target="_blank" rel="noopener" title="Презентация студии (PDF)" aria-label="Открыть презентацию студии в формате PDF"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z"/><path d="M14 3v5h5"/><path d="M9 13h6"/><path d="M9 17h4"/></svg></a>
      <a class="khh__cta" href="#popup:zayavka">Обсудить проект</a>
      <button class="khh__burger" id="khhBurger" aria-label="Меню"><span></span><span></span><span></span></button>
    </div>
  </header>
  <div class="khh__panel" id="khhPanel">
    <nav class="khh__mnav">
      <a href="/#rec2649099901">Услуги</a>
      <a href="/photographers">Фотосъёмка</a>
      <a href="/sites">Создание сайтов</a>
      <a href="/#rec2667018101">Кейсы</a>
      <a href="/#rec2663623901">Работы</a>
      <a href="/#ksfooter">Контакты</a>
      <a href="https://drive.google.com/file/d/1HF-3fD3Hym_H-FWr307pvuUo4tu84fJu/view?usp=sharing" target="_blank" rel="noopener">Презентация студии (PDF)</a>
    </nav>
    <a class="khh__mcta" href="#popup:zayavka">Обсудить проект</a>
    <div class="khh__mpills">
      <a class="khh__pill" href="https://t.me/korsprodsale" target="_blank" rel="noopener"><i></i>Telegram</a>
      <a class="khh__pill" href="https://wa.me/79158677996" target="_blank" rel="noopener"><i></i>WhatsApp</a>
      <a class="khh__pill" href="https://max.ru/u/f9LHodD0cOJry8jfuI2u_X2FJWCLMC5S4I3JfDhcBC6iBjNcaUyKtbZ9Bto" target="_blank" rel="noopener"><i></i>MAX</a>
      <a class="khh__pill" href="tel:+79158677996"><i></i>Позвонить</a>
      <a class="khh__pill" href="mailto:info@korsprod.ru"><i></i>Почта</a>
    </div>
  </div>
</div>
<style>
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Unbounded:wght@400;600;700;800&display=swap');
.khh-wrap{--bg:#0C0C0E;--raise:#141416;--card:#1B1B1F;--border:#2A2A2E;--text:#F5F3EF;--muted:#9A9A9A;--faint:#6a6a6e;--accent:#6D5DFB;--glow:rgba(109,93,251,.14);box-sizing:border-box;}
.khh-wrap *{box-sizing:border-box;margin:0;padding:0;}
.khh{position:fixed;top:0;left:0;right:0;z-index:9000;transform:translateY(-100%);transition:transform .35s cubic-bezier(.2,.8,.2,1),background .3s,border-color .3s;
  background:rgba(10,10,12,.72);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid transparent;font-family:'Manrope',Arial,sans-serif;}
.khh.show{transform:translateY(0);border-bottom-color:var(--border);}
.khh__inner{max-width:1280px;margin:0 auto;height:64px;padding:0 5vw;display:flex;align-items:center;justify-content:space-between;gap:20px;}
.khh__logo{font-family:'Unbounded';font-weight:800;font-size:24px;color:var(--text);text-decoration:none;letter-spacing:-.02em;flex:none;}
.khh__nav{display:flex;align-items:center;gap:28px;}
.khh__nav a{color:var(--muted);text-decoration:none;font-size:15px;font-weight:600;transition:.2s;white-space:nowrap;}
.khh__nav a:hover{color:var(--text);}
.khh__doc{flex:none;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;border:1px solid var(--border);color:var(--muted);text-decoration:none;transition:.2s;}
.khh__doc svg{width:19px;height:19px;display:block;}
.khh__doc:hover{border-color:var(--accent);color:var(--accent);}
/* ниже 1000px шапке уже тесно: иконку прячем, презентация остаётся в подвале и в мобильном меню */
@media (max-width:999px){.khh__doc{display:none;}}
.khh__cta{flex:none;background:var(--accent);color:#fff;text-decoration:none;font-weight:700;font-size:14px;padding:11px 20px;border-radius:8px;transition:.2s;white-space:nowrap;}
.khh__cta:hover{transform:translateY(-1px);box-shadow:0 8px 22px var(--glow);}
.khh__burger{display:none;flex-direction:column;gap:5px;width:40px;height:40px;background:transparent;border:none;cursor:pointer;align-items:center;justify-content:center;}
.khh__burger span{display:block;width:22px;height:2px;background:var(--text);transition:.25s;}
.khh__burger.active span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.khh__burger.active span:nth-child(2){opacity:0;}
.khh__burger.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
.khh__panel{position:fixed;top:64px;left:0;right:0;z-index:8999;background:rgba(8,8,10,.98);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--border);
  padding:22px 5vw 28px;transform:translateY(-12px);opacity:0;pointer-events:none;transition:.3s;display:none;}
.khh__panel.open{opacity:1;transform:translateY(0);pointer-events:auto;}
.khh__mnav{display:flex;flex-direction:column;gap:2px;}
.khh__mnav a{color:var(--text);text-decoration:none;font-family:'Unbounded';font-weight:600;font-size:20px;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.05);}
.khh__mcta{display:block;text-align:center;background:var(--accent);color:#fff;text-decoration:none;font-weight:700;font-size:16px;padding:15px;border-radius:9px;margin:20px 0 16px;}
.khh__mpills{display:flex;gap:8px;flex-wrap:wrap;}
.khh__pill{display:inline-flex;align-items:center;gap:7px;padding:10px 14px;border:1px solid var(--border);border-radius:9px;color:var(--text);font-size:13px;font-weight:600;text-decoration:none;}
.khh__pill i{width:7px;height:7px;border-radius:50%;background:var(--accent);}
@media (max-width:760px){
  .khh__nav,.khh__cta,.khh__doc{display:none;}
  .khh__burger{display:flex;}
  .khh__panel{display:block;}
}
/* фикс: Tilda красит tel: в чёрный — возвращаем цвет */
.khh-wrap a[href^="tel:"]{color:var(--text)!important;}
</style>
<script>
(function(){
  var wrap=document.querySelector('.khh-wrap'); if(!wrap) return;
  var bar=document.getElementById('khh');
  var burger=document.getElementById('khhBurger');
  var panel=document.getElementById('khhPanel');
  var HEADER=64;
  function isHome(){ var p=location.pathname; return p==='/'||p===''||/\/index/i.test(p); }
  function onScroll(){
    if(!isHome()){ bar.classList.add('show'); return; }
    var y=window.scrollY||document.documentElement.scrollTop;
    if(y>window.innerHeight*0.75){ bar.classList.add('show'); }
    else { bar.classList.remove('show'); closePanel(); }
  }
  window.addEventListener('scroll',onScroll,{passive:true});
  onScroll();
  function openPanel(){ panel.classList.add('open'); burger.classList.add('active'); }
  function closePanel(){ panel.classList.remove('open'); burger.classList.remove('active'); }
  burger.addEventListener('click',function(){ panel.classList.contains('open')?closePanel():openPanel(); });
  document.addEventListener('click',function(e){
    var a=e.target.closest('a[href^="/#"]');
    if(!a) return;
    var id=(a.getAttribute('href')||'').replace('/#','');
    if(isHome()){
      var el=document.getElementById(id);
      if(el && el.offsetParent===null){
        var block=el.closest('.t-rec')||el;
        var sib=block.nextElementSibling;
        while(sib && sib.offsetHeight===0) sib=sib.nextElementSibling;
        if(!sib){ sib=block.previousElementSibling; while(sib && sib.offsetHeight===0) sib=sib.previousElementSibling; }
        if(sib) el=sib;
      }
      if(el){ e.preventDefault(); var y=el.getBoundingClientRect().top+window.scrollY-HEADER-6; window.scrollTo({top:y,behavior:'smooth'}); }
      closePanel();
    } else {
      closePanel();
    }
  });
  window.addEventListener('resize',function(){ /* noop */ });
})();
</script>

rec3237881801 - шапка /sites (201483509), вариант с круглой иконкой (5138 симв.)

<style>
/* ---------- Header ---------- */
.header{position:fixed;top:0;left:0;right:0;z-index:90;padding:14px 0;transition:background .2s ease,box-shadow .2s ease}
.header.scrolled{background:rgba(12,12,14,.86);backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line)}
.header-in{display:flex;align-items:center;gap:22px}
.logo{font-weight:700;font-size:26px;letter-spacing:-.04em;line-height:1}
.logo span{color:var(--accent)}
.nav{display:flex;gap:4px;margin-left:6px}
.nav a{font-size:14.5px;font-weight:500;color:var(--ink);padding:10px 14px;border-radius:999px;transition:background .15s}
.nav a:hover{background:rgba(255,255,255,.06)}
.header-right{margin-left:auto;display:flex;align-items:center;gap:12px}
.header-phone{font-weight:600;font-size:16px;background:var(--card);border-radius:999px;padding:14px 22px;box-shadow:0 0 0 1px var(--line);letter-spacing:-.01em;transition:transform .15s}
.header-phone:hover{transform:translateY(-2px)}
.msg-ico{width:46px;height:46px;border-radius:50%;background:var(--card);box-shadow:0 0 0 1px var(--line);display:inline-flex;align-items:center;justify-content:center;font-size:17px;transition:transform .15s}
.msg-ico:hover{transform:translateY(-2px)}
.msg-ico--tx{font-family:'Unbounded',Arial,sans-serif;font-weight:700;font-size:15px;color:var(--ink)}
.msg-ico--doc svg{width:20px;height:20px;display:block;color:var(--ink)}
.mm-chan{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.mobile-menu .mm-chan a{font-size:15px;font-weight:600;padding:11px 18px;background:var(--card);border-radius:999px;box-shadow:0 0 0 1px var(--line)}
.header .btn{padding:14px 24px;font-size:14.5px}
.burger{display:none;background:var(--accent);border:none;border-radius:50%;width:52px;height:52px;color:#fff;font-size:19px;box-shadow:0 6px 18px rgba(109,93,251,.4)}
.mobile-menu{display:none;position:fixed;inset:0;background:var(--bg);z-index:89;padding:110px 28px 28px;flex-direction:column;gap:8px}
.mobile-menu.open{display:flex}
.mobile-menu a{font-size:24px;font-weight:600;letter-spacing:-.02em;padding:10px 0}
.mobile-menu .btn{margin-top:14px;font-size:17px}
@media (max-width:1179px){.header-phone{display:none}}
</style>
<header class="header" id="header">
  <div class="container header-in">
    <a href="https://korsprod.ru" class="logo">kors<span>.</span></a>
    <nav class="nav">
      <a href="#cases">Кейсы</a>
      <a href="#services">Услуги</a>
      <a href="#pricing">Тарифы</a>
      <a href="#faq">Вопросы</a>
      <a href="https://korsprod.ru">Упаковка бизнеса ↗</a>
    </nav>
    <div class="header-right">
      <a class="msg-ico" href="https://t.me/korsprodsale" title="Telegram" aria-label="Telegram">✈️</a>
      <a class="msg-ico" href="https://wa.me/79158677996" title="WhatsApp" aria-label="WhatsApp">💬</a>
      <a class="msg-ico msg-ico--tx" href="https://max.ru/u/f9LHodD0cOJry8jfuI2u_X2FJWCLMC5S4I3JfDhcBC6iBjNcaUyKtbZ9Bto" target="_blank" rel="noopener" title="MAX" aria-label="MAX">M</a>
      <a class="msg-ico msg-ico--doc" href="https://drive.google.com/file/d/1HF-3fD3Hym_H-FWr307pvuUo4tu84fJu/view?usp=sharing" target="_blank" rel="noopener" title="Презентация студии (PDF)" aria-label="Открыть презентацию студии в формате PDF"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z"/><path d="M14 3v5h5"/><path d="M9 13h6"/><path d="M9 17h4"/></svg></a>
      <a class="header-phone" href="tel:+79158677996">+7 915 867-79-96</a>
      <a class="btn btn-primary" href="#quiz">Рассчитать стоимость</a>
      <button class="burger" id="burger" aria-label="Меню">☰</button>
    </div>
  </div>
</header>
<div class="mobile-menu" id="mobileMenu">
  <a href="#cases">Кейсы</a>
  <a href="#services">Услуги</a>
  <a href="#pricing">Тарифы</a>
  <a href="#faq">Вопросы</a>
  <a href="https://korsprod.ru">Упаковка бизнеса ↗</a>
  <a href="https://drive.google.com/file/d/1HF-3fD3Hym_H-FWr307pvuUo4tu84fJu/view?usp=sharing" target="_blank" rel="noopener">Презентация студии (PDF)</a>
  <a href="tel:+79158677996">+7 915 867-79-96</a>
  <a class="btn btn-primary" href="#quiz">Рассчитать стоимость</a>
  <div class="mm-chan">
    <a href="https://t.me/korsprodsale" target="_blank" rel="noopener">Telegram</a>
    <a href="https://wa.me/79158677996" target="_blank" rel="noopener">WhatsApp</a>
    <a href="https://max.ru/u/f9LHodD0cOJry8jfuI2u_X2FJWCLMC5S4I3JfDhcBC6iBjNcaUyKtbZ9Bto" target="_blank" rel="noopener">MAX</a>
    <a href="mailto:info@korsprod.ru">Почта</a>
  </div>
</div>
<script>
var header=document.getElementById('header');
addEventListener('scroll',function(){header.classList.toggle('scrolled',scrollY>10)});
var burger=document.getElementById('burger'),mm=document.getElementById('mobileMenu');
burger.addEventListener('click',function(){mm.classList.toggle('open');burger.textContent=mm.classList.contains('open')?'✕':'☰'});
mm.querySelectorAll('a').forEach(function(a){a.addEventListener('click',function(){mm.classList.remove('open');burger.textContent='☰'})});
</script>

#14 - 2026-08-31 - rec2662784501 (главная, hero desktop + инжектор постеров) ДО перевода постеров на CDN Tilda

Копия исходника блока перед заменой ссылок на постеры kinescope.io на карту KORS_POSTERS с картинками на static.tildacdn.com. Длина 16097 символов.

<!-- ===== KORS HERO · ДЕСКТОП · блок T123 (HTML-код). Показывать ТОЛЬКО на компьютере. ===== -->
<div class="khd">
<div class="khd__vid"><iframe class="khd__kv" src="https://kinescope.io/embed/vcDamsVPzsEPAgvishqMMn?autoplay=true&muted=true&loop=true&controls=false&playsInline=true&background=true" allow="autoplay; fullscreen; encrypted-media; picture-in-picture" frameborder="0"></iframe></div>
<div class="khd__shade" aria-hidden="true"></div>
<div class="khd__dim"></div>
<div class="khd__corners">
<div class="khd__corner khd__corner--l"><span class="khd__reccombo"><span class="khd__recdot" aria-hidden="true"></span><b class="khd__rectxt">REC</b><span class="khd__tm">00:00:00</span></span><span class="khd__cdiv" aria-hidden="true"></span><span class="khd__ctext">СТУДИЯ ДЛЯ ПРОИЗВОДСТВЕННЫХ КОМПАНИЙ</span></div>
<div class="khd__corner khd__corner--r">ОФИС В МОСКВЕ · РАБОТАЕМ ПО ВСЕЙ РОССИИ С 2019 ГОДА</div>
</div>
<div class="khd__in">
<h1 class="khd__headline"><span class="khd__headline-line khd__headline-line--main">Показываем производство и компании через создание <span class="khd__hl-accent">видео, сайта, презентаций</span> и других материалов.</span></h1>
<p class="khd__lead">Можно начать с одной задачи или собрать всё необходимое к выставке, экспорту или запуску продукта.</p>
<div class="khd__btns"><a class="khd__btn khd__btn--p" href="#rec2619108701">Открыть калькулятор цен</a></div>
<div class="khd__pills"><a class="pill" href="https://t.me/korsprodsale" target="_blank" rel="noopener"><i></i>Telegram</a><a class="pill" href="https://max.ru/u/f9LHodD0cOJry8jfuI2u_X2FJWCLMC5S4I3JfDhcBC6iBjNcaUyKtbZ9Bto" target="_blank" rel="noopener"><i></i>MAX</a><a class="pill" href="https://wa.me/79158677996" target="_blank" rel="noopener"><i></i>WhatsApp</a><a class="pill" href="tel:+79158677996"><i></i>Позвонить</a></div>
</div>
<!-- блок 460+ и «нам доверяют» стоят вплотную и читаются как один нижний блок -->
<div class="khd__bottom">
<div class="khd__proof-panel">
<div class="khd__proof-main"><strong>460+</strong><span>проектов</span></div>
<div class="khd__proof-points">
<span><i></i>Снимаем на действующих производствах</span>
<span><i></i>Клиенты возвращаются со следующими задачами</span>
<span><i></i>Смета и дата сдачи фиксируются до старта</span>
</div>
</div>
<div class="khd__mq"><span class="lab">НАМ ДОВЕРЯЮТ</span><div class="track"><div class="mqt"></div></div></div>
</div>
<div class="khd__sheet"></div>
</div>
<style>
#rec2501675451{display:none!important;}
#rec2662784501{padding-top:0!important;}
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Unbounded:wght@400;600;700;800&display=swap');
.khd{--bg:#0C0C0E;--raise:#141416;--card:#1B1B1F;--border:#2A2A2E;--soft:#242428;--text:#F5F3EF;--muted:#9A9A9A;--faint:#6a6a6e;--accent:#6D5DFB;--glow:rgba(109,93,251,.14);--poster:url('https://static.tildacdn.com/tild6561-6639-4936-b061-393734646164/poster-home-desk.jpg');
position:relative;overflow:hidden;box-sizing:border-box;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:96px 36px 160px;background:var(--bg)}
.khd *{box-sizing:border-box;margin:0;padding:0}
.khd a[href^="tel:"]{color:var(--muted)!important}
.khd__vid{position:absolute;inset:0;overflow:hidden;background:var(--poster) center/cover;z-index:0}
.khd__kv{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);min-width:100%;min-height:100%;width:auto;height:auto;aspect-ratio:16/9;border:none;pointer-events:none}
.khd__shade{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(12,12,14,.50) 0%,rgba(12,12,14,.62) 50%,rgba(12,12,14,.88) 100%)}
.khd__dim{position:absolute;inset:0;z-index:1;background:radial-gradient(1100px 620px at 50% 12%,rgba(109,93,251,.10),transparent 60%),linear-gradient(180deg,rgba(10,10,12,.72),rgba(10,10,12,.9))}
.khd__corners{position:absolute;top:26px;left:36px;right:36px;z-index:3;display:flex;align-items:flex-start;justify-content:space-between;gap:18px;flex-wrap:wrap}
.khd__corner{font-family:'Unbounded',sans-serif;font-size:clamp(10.5px,0.95vw,12px);letter-spacing:.13em;line-height:1.5;color:#c9c7d6;text-transform:uppercase;display:flex;align-items:center;gap:10px}
.khd__corner--r{text-align:right}
.khd__reccombo{display:inline-flex;align-items:center;gap:7px;color:#F5F3EF}
.khd__recdot{width:7px;height:7px;border-radius:50%;background:#FF5252;box-shadow:0 0 10px rgba(255,82,82,.65);animation:khdPulse 1.8s ease-in-out infinite}
.khd__rectxt{font-weight:700;letter-spacing:.14em}
.khd__tm{font-variant-numeric:tabular-nums;letter-spacing:.02em;color:#c9c7d6;font-weight:600}
.khd__cdiv{width:1px;height:10px;background:rgba(255,255,255,.2)}
@keyframes khdPulse{0%,100%{opacity:1}50%{opacity:.32}}
@media(prefers-reduced-motion:reduce){.khd__recdot{animation:none}}
.khd__in{position:relative;z-index:3;width:min(1180px,100%);display:flex;flex-direction:column;align-items:center;text-align:center}
.khd__headline{width:100%;font-family:'Unbounded',sans-serif;letter-spacing:-.035em;text-shadow:0 2px 24px rgba(0,0,0,.58)}
.khd__headline-line{display:block;margin-inline:auto;text-wrap:balance}
.khd__headline-line--main{max-width:1120px;font-size:clamp(40px,3.3vw,50px);line-height:1.14;font-weight:800;color:var(--text)}
.khd__hl-accent{color:#d8d5ff}
.khd__lead{max-width:760px;margin-top:22px;color:#c4c2be;font:500 16px/1.55 'Manrope',Arial,sans-serif;text-wrap:balance;text-shadow:0 2px 18px rgba(0,0,0,.55)}
.khd__btns{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:clamp(26px,2.6vw,32px)}
.khd__btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:16px 30px;border-radius:10px;font:700 15px/1 'Manrope',Arial,sans-serif;text-decoration:none;cursor:pointer;border:none;transition:.25s}
.khd__btn--p{background:var(--accent);color:#fff;box-shadow:0 10px 30px rgba(109,93,251,.28)}
.khd__btn--p:hover{transform:translateY(-2px);box-shadow:0 14px 38px rgba(109,93,251,.4)}
.khd__pills{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin-top:16px}
.khd__pills .pill{display:inline-flex;align-items:center;gap:8px;padding:10px 15px;border:1px solid var(--border);border-radius:9px;color:var(--muted);font:600 13px/1 'Manrope',Arial,sans-serif;text-decoration:none;background:rgba(20,20,22,.4);transition:.2s}
.khd__pills .pill:hover{border-color:var(--accent);color:#e8e7ff}
.khd__pills .pill i{width:6px;height:6px;border-radius:50%;background:var(--accent);flex:none}
.khd__bottom{position:absolute;left:0;right:0;bottom:0;z-index:4;display:flex;flex-direction:column;align-items:center}
.khd__proof-panel{width:min(1080px,calc(100% - 72px));display:grid;grid-template-columns:230px 1fr;align-items:stretch;margin:0 auto;border:1px solid rgba(255,255,255,.12);border-bottom:none;border-radius:16px 16px 0 0;background:linear-gradient(180deg,rgba(21,21,25,.88),rgba(11,11,14,.78));box-shadow:0 18px 46px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.04);overflow:hidden;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.khd__proof-main{display:flex;align-items:center;justify-content:center;gap:14px;padding:18px 22px;background:linear-gradient(135deg,rgba(109,93,251,.25),rgba(109,93,251,.06));border-right:1px solid rgba(255,255,255,.1)}
.khd__proof-main strong{font-family:'Unbounded',sans-serif;font-size:40px;line-height:1;font-weight:800;color:#fff;letter-spacing:-.04em}
.khd__proof-main span{max-width:130px;text-align:left;color:#c7c3e2;font:700 11px/1.35 'Manrope',Arial,sans-serif;letter-spacing:.08em;text-transform:uppercase}
.khd__proof-points{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:center}
.khd__proof-points span{min-height:74px;display:flex;align-items:center;gap:10px;padding:16px 18px;color:#d7d5d0;font:600 12.5px/1.4 'Manrope',Arial,sans-serif;text-align:left;border-right:1px solid rgba(255,255,255,.08)}
.khd__proof-points span:last-child{border-right:0}
.khd__proof-points i{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 12px rgba(109,93,251,.65);flex:none}
.khd__offer-chips{width:min(1080px,100%);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:clamp(26px,3vw,34px)}
.khd__offer-chips span{min-height:60px;display:flex;align-items:center;justify-content:center;gap:11px;padding:14px 18px;border:1px solid rgba(109,93,251,.42);border-radius:13px;background:linear-gradient(180deg,rgba(109,93,251,.16),rgba(20,20,24,.72));box-shadow:inset 0 1px 0 rgba(255,255,255,.06);color:#F5F3EF;font:700 15px/1.3 'Manrope',Arial,sans-serif;text-align:center;opacity:0;transform:translateY(16px);transition:opacity .5s ease,transform .5s ease}
.khd__offer-chips span.khd-in{opacity:1;transform:none}
.khd__offer-chips span:nth-child(1){transition-delay:.05s}
.khd__offer-chips span:nth-child(2){transition-delay:.14s}
.khd__offer-chips span:nth-child(3){transition-delay:.23s}
.khd__offer-chips i{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 14px rgba(109,93,251,.7);flex:none}
@media(prefers-reduced-motion:reduce){.khd__offer-chips span{transition:none;opacity:1;transform:none}}
.khd__mq{position:relative;width:100%;z-index:4;overflow:hidden;height:52px;display:flex;align-items:center;border-top:1px solid rgba(255,255,255,.08);background:rgba(8,8,10,.55)}
.khd__mq .lab{flex:none;font-family:'Unbounded',sans-serif;font-size:10px;letter-spacing:.12em;color:var(--faint);padding:0 16px;height:100%;display:flex;align-items:center;background:rgba(8,8,10,.9);z-index:2}
.khd__mq .track{position:relative;flex:1;overflow:hidden;height:100%;-webkit-mask-image:linear-gradient(90deg,#000 90%,transparent);mask-image:linear-gradient(90deg,#000 90%,transparent)}
.khd__mq .mqt{position:absolute;top:50%;transform:translateY(-50%);display:flex;gap:42px;width:max-content;animation:khdMq 28s linear infinite}
.khd__mq .mqt b{font-family:'Unbounded',sans-serif;font-size:16px;color:#9a9893;font-weight:600;white-space:nowrap}
@keyframes khdMq{to{transform:translate(-50%,-50%)}}
/* короткие экраны: ужимаем вертикальные отступы, чтобы первый экран помещался целиком */
@media screen and (max-height:860px){
.khd{padding:64px 36px 140px}
.khd__lead{margin-top:18px}
.khd__btns{margin-top:24px}
.khd__pills{margin-top:13px}
.khd__proof-main{padding:14px 20px}
.khd__proof-main strong{font-size:34px}
.khd__proof-points span{min-height:64px;padding:13px 16px}
.khd__mq{height:46px}
}
@media screen and (max-height:720px){
.khd{padding:44px 36px 122px}
.khd__corners{top:16px}
.khd__headline-line--main{font-size:clamp(34px,2.7vw,42px)}
.khd__lead{margin-top:14px;font-size:15px}
.khd__btns{margin-top:18px}
.khd__btn{padding:14px 26px}
.khd__pills{margin-top:10px}
.khd__pills .pill{padding:8px 13px}
.khd__proof-main{padding:11px 18px}
.khd__proof-main strong{font-size:30px}
.khd__proof-points span{min-height:54px;padding:10px 15px;font-size:12px}
.khd__mq{height:42px}
}
/* низкие окна: мессенджеры дублируют плавающий виджет связи, прячем ради видимости плашки и бегущей строки */
@media screen and (max-height:800px){
.khd__pills{display:none}
}
@media(max-width:980px){.khd{padding:110px 24px 252px}.khd__offer-chips{grid-template-columns:1fr}.khd__proof-panel{grid-template-columns:190px 1fr}.khd__proof-points{grid-template-columns:1fr}.khd__proof-points span{min-height:unset;padding:12px 16px;border-right:0;border-bottom:1px solid rgba(255,255,255,.07)}.khd__proof-points span:last-child{border-bottom:0}.khd__corners{position:static;margin-bottom:22px;flex-direction:column;align-items:flex-start;gap:8px}.khd__corner--r{text-align:left}}
@media(max-width:480px){.khd{display:none}}
</style>
<script>
(function(){
var wrap=document.querySelector('.khd'); if(!wrap) return;
function fmt(s){function p(n){return (n<10?'0':'')+n;}var h=Math.floor(s/3600),m=Math.floor(s%3600/60),x=s%60;return p(h)+':'+p(m)+':'+p(x);}
var t0=Date.now();
function tick(){var s=Math.floor((Date.now()-t0)/1000);wrap.querySelectorAll('.khd__tm').forEach(function(el){el.textContent=fmt(s);});}
tick(); setInterval(tick,1000);
var words=['сайты','видео','презентации','фотосъёмку','фирменный стиль'];
wrap.querySelectorAll('.khd__rot').forEach(function(el){var i=0;setInterval(function(){i=(i+1)%words.length;el.style.opacity='0';el.style.transform='translateY(8px)';setTimeout(function(){el.textContent=words[i];el.style.opacity='1';el.style.transform='translateY(0)';},200);},1500);});
var logos=['Одоевские консервы','InvoiceBox','Вистекс','Водоходъ','ALFA-BANK','Wildberries','Яндекс Драйв','ЭКСМО','Rumi'];
wrap.querySelectorAll('.khd__mq .mqt').forEach(function(t){var h=logos.map(function(l){return '<b>'+l+'</b>';}).join('');t.innerHTML=h+h;});
var sheetHTML='<div class="khsheet-bd khd-close"></div><div class="khsheet-card">'
+'<div class="khsheet-h"><b>Связаться сразу</b><button class="khsheet-x khd-close">×</button></div>'
+'<a class="khci main" href="#popup:zayavka"><span class="ic">→</span><span class="tx"><b>Оставить заявку</b><span>ответим и предложим формат работы</span></span></a>'
+'<a class="khci" href="tel:+79158677996"><span class="ic">тел</span><span class="tx"><b>Позвонить</b><span>+7 915 867-79-96</span></span></a>'
+'<a class="khci" href="https://wa.me/79158677996" target="_blank" rel="noopener"><span class="ic">WA</span><span class="tx"><b>WhatsApp</b><span>написать в мессенджер</span></span></a>'
+'<a class="khci" href="https://t.me/korsprodsale" target="_blank" rel="noopener"><span class="ic">TG</span><span class="tx"><b>Telegram</b><span>@korsprodsale</span></span></a>'
+'<a class="khci" href="https://max.ru/u/f9LHodD0cOJry8jfuI2u_X2FJWCLMC5S4I3JfDhcBC6iBjNcaUyKtbZ9Bto" target="_blank" rel="noopener"><span class="ic">MAX</span><span class="tx"><b>MAX</b><span>мессенджер MAX</span></span></a>'
+'<a class="khci" href="mailto:info@korsprod.ru"><span class="ic">@</span><span class="tx"><b>Почта</b><span>info@korsprod.ru</span></span></a>'
+'</div>';
wrap.querySelectorAll('.khd__sheet').forEach(function(s){s.innerHTML=sheetHTML;});
wrap.querySelectorAll('.khd-open').forEach(function(b){b.addEventListener('click',function(e){e.preventDefault();var sh=wrap.querySelector('.khd__sheet');if(sh)sh.classList.add('open');});});
wrap.addEventListener('click',function(e){if(e.target.classList.contains('khd-close')){var sh=wrap.querySelector('.khd__sheet');if(sh)sh.classList.remove('open');}});
var chips=wrap.querySelectorAll('.khd__offer-chips span');
requestAnimationFrame(function(){requestAnimationFrame(function(){chips.forEach(function(c){c.classList.add('khd-in');});});});
})();
</script>

<script>
/* KORS - постер под ролик Kinescope.
   Если плеер не загрузился (сбой Кинескопа, блокировка, медленная сеть),
   в слоте остаётся кадр из ролика, а не пустое место.
   Постер кладётся фоном контейнера, iframe лежит поверх.
   Слоты, у которых фон уже задан своим постером, не трогаем. */
(function(){
  function put(f){
    var box = f.parentElement;
    if(!box || box.getAttribute("data-kposter")) return;
    var src = f.getAttribute("src") || f.getAttribute("data-src") || "";
    var id = (src.match(/embed\/([A-Za-z0-9]+)/) || [])[1];
    if(!id) return;
    box.setAttribute("data-kposter", "1");
    if(getComputedStyle(box).backgroundImage !== "none") return;
    box.style.backgroundColor = "#141416";
    box.style.backgroundImage = "url(https://kinescope.io/" + id + "/poster.jpg)";
    box.style.backgroundSize = "cover";
    box.style.backgroundPosition = "center";
    box.style.backgroundRepeat = "no-repeat";
  }
  function scan(){
    var f = document.querySelectorAll('iframe[src*="kinescope"], iframe[data-src*="kinescope"]');
    for(var i = 0; i < f.length; i++) put(f[i]);
  }
  scan();
  setTimeout(scan, 1000); setTimeout(scan, 3000); setTimeout(scan, 8000);
  if(window.MutationObserver){
    var mo = new MutationObserver(scan);
    mo.observe(document.documentElement, {childList:true, subtree:true});
    setTimeout(function(){ mo.disconnect(); }, 30000);
  }
})();
</script>

#15 - 2026-08-31 - блоки кейсов ДО перевода постеров на CDN Tilda

Копии исходников трёх блоков кейсов перед добавлением карты KORS_POSTERS.

rec2699474201 - кейс Одоевские (48862 символов)

<!-- ================================================================
     KORS · СТРАНИЦА-КЕЙС · ОДОЕВСКИЕ КОНСЕРВЫ
     ── ЗАПОЛНЕНИЕ ──────────────────────────────────────────────────
     Всё фото/видео вставляется В ОДНОМ МЕСТЕ - в списке ниже (KORS_CASE).
     • Картинки: вставь ссылку на изображение в кавычки. Пусто '' = заглушка.
       Где взять ссылку: загрузи фото в Tilda (Файл-менеджер сайта или любой
       блок «Изображение») и скопируй URL картинки; либо любой прямой URL.
     • Видео: впиши ID ролика Kinescope (часть после kinescope.io/… ). Пусто = заглушка.
     Больше нигде в коде править не нужно - слоты подтянутся сами.
     ================================================================ -->
<script>
window.KORS_CASE = {
  images: {
    cover:        'https://static.tildacdn.com/tild3563-6163-4139-a463-386164356466/odoev-cover-film-128.jpg',   // большая обложка вверху (гориз. фото/визуал)
    firstShoot:   '',   // шаг 01 - кадр первой съёмки начинки (если без видео)
    firstShoot2:  '',   // шаг 01 - кадр второй съёмки начинки (если без видео)
presentation: '',   // шаг 02 - одиночная картинка-запасной вариант (используется, только если slides пуст)
    factoryPhoto: '',   // шаг 03 - фото производства (если без видео)
    product1:     'https://static.tildacdn.com/tild3538-6336-4331-b630-393965653763/odoevskie-nachinki-1.jpg',   // шаг 04 - фото продукции 1
    product2:     'https://static.tildacdn.com/tild6462-3535-4432-b266-653436663333/odoevskie-kruasan-12.jpg',   // шаг 04 - фото продукции 2
    product3:     'https://static.tildacdn.com/tild6462-3131-4336-a237-366662616565/odoevskie-laboratori.jpg',   // шаг 04 - фото цеха/процесса
    photo4:       'https://static.tildacdn.com/tild6264-3139-4539-b061-323332633033/od-kotel.jpg',   // шаг 04 - галерея, кадр 4
    photo5:       'https://static.tildacdn.com/tild3663-3134-4337-a635-303939303938/od-varenye.jpg',   // шаг 04 - галерея, кадр 5
    photo6:       'https://static.tildacdn.com/tild6435-6536-4036-b765-626461393263/od-sklad.jpg',   // шаг 04 - галерея, кадр 6
    logoBefore:   'https://static.tildacdn.com/tild6462-3439-4365-a261-333634373338/odoevskie-logo-do-12.jpg',   // шаг 05 - СТАРЫЙ логотип (до)
    logoAfter:    'https://static.tildacdn.com/tild6338-3131-4439-b966-623739303361/odoevskie-logo-posle.jpg',   // шаг 05 - НОВЫЙ логотип (после)
    brand1:       '',   // шаг 06 - визитки
    brand2:       'https://static.tildacdn.com/tild6162-3336-4666-a338-323336396465/odoev-otkrytka-vesna.jpg',   // шаг 06 - открытки
    brand3:       'https://static.tildacdn.com/tild6632-3465-4634-b861-393137323563/odoevskie-priglasite.jpg',   // шаг 06 - др. носители
    siteShots:    ''    // шаг 07 - скриншоты povidlo.su и povidlo.pro
  },
  // Скриншоты сайтов для шага 07. Вкладка RU - povidlo.su, вкладка EN - povidlo.pro.
  siteRu: [
    'https://static.tildacdn.com/tild3463-3561-4837-b438-333439316132/povidlo-su-01-hero.jpg',
    'https://static.tildacdn.com/tild6439-3335-4533-a436-656336633534/povidlo-su-02-kontro.jpg',
    'https://static.tildacdn.com/tild6336-3035-4463-b463-653463326363/povidlo-su-03-katalo.jpg',
    'https://static.tildacdn.com/tild6538-3937-4435-b339-336162656636/povidlo-su-04-menedz.jpg'
  ],
  siteEn: [
    'https://static.tildacdn.com/tild3561-3836-4335-b431-323263383230/povidlo-pro-01-hero.jpg',
    'https://static.tildacdn.com/tild6163-3731-4132-b166-613736353464/povidlo-pro-02-about.jpg',
    'https://static.tildacdn.com/tild3335-3935-4237-b938-386233613336/povidlo-pro-03-leadf.jpg'
  ],
  // Визитки для шага 06. Две карточки, открываются в том же лайтбоксе, что и развороты.
  // Пусто - используется одиночный слот images.brand1.
  cards: [
    'https://static.tildacdn.com/tild3261-6362-4033-a662-393031353131/odoev-vizitka-ivanov.jpg',
    'https://static.tildacdn.com/tild6232-3936-4463-a637-333436386635/odoev-vizitka-veklic.jpg'
  ],
  // Развороты печатной презентации для шага 02. Два комплекта, переключаются вкладками RU/EN.
  // Порядок = порядок в галерее. Пусто в slides - в слоте останется заглушка,
  // пусто в slidesEn - вкладка EN не показывается.
  slides: [
    'https://static.tildacdn.com/tild3839-6265-4534-b632-383934363939/odoev-pres-01.jpg',
    'https://static.tildacdn.com/tild6365-3736-4633-b638-623535336533/odoev-pres-02.jpg',
    'https://static.tildacdn.com/tild3861-3537-4062-b638-623737303666/odoev-pres-03.jpg',
    'https://static.tildacdn.com/tild3739-3733-4737-a439-373962306636/odoev-pres-04.jpg',
    'https://static.tildacdn.com/tild6131-3763-4633-a632-383430346635/odoev-pres-05.jpg',
    'https://static.tildacdn.com/tild6238-3563-4662-b936-343165656562/odoev-pres-06.jpg',
    'https://static.tildacdn.com/tild6330-3263-4431-b136-306366623031/odoev-pres-07.jpg',
    'https://static.tildacdn.com/tild3263-6531-4663-b630-316431303234/odoev-pres-08.jpg',
    'https://static.tildacdn.com/tild3032-6661-4835-b932-613834373837/odoev-pres-09.jpg',
    'https://static.tildacdn.com/tild6439-3366-4065-b763-343465383338/odoev-pres-10.jpg',
    'https://static.tildacdn.com/tild3431-3232-4331-a661-653335363963/odoev-pres-11.jpg',
    'https://static.tildacdn.com/tild3239-6231-4336-a531-363563343563/odoev-pres-12.jpg',
    'https://static.tildacdn.com/tild3231-6331-4262-b262-363063643633/odoev-pres-13.jpg',
    'https://static.tildacdn.com/tild6537-3532-4534-a166-623232326538/odoev-pres-14.jpg',
    'https://static.tildacdn.com/tild3763-3332-4665-b631-353963643534/odoev-pres-15.jpg',
    'https://static.tildacdn.com/tild3439-6161-4537-a531-633864306164/odoev-pres-16.jpg'
  ],
  slidesEn: [
    'https://static.tildacdn.com/tild6132-3033-4436-b735-343631343130/odoev-pres-en-01.jpg',
    'https://static.tildacdn.com/tild3832-3935-4631-b631-366464363039/odoev-pres-en-02.jpg',
    'https://static.tildacdn.com/tild3332-3761-4538-b430-333335363031/odoev-pres-en-03.jpg',
    'https://static.tildacdn.com/tild6566-3932-4236-b365-323064646265/odoev-pres-en-04.jpg',
    'https://static.tildacdn.com/tild3238-6164-4730-b662-366261353863/odoev-pres-en-05.jpg',
    'https://static.tildacdn.com/tild3939-3332-4437-a131-643238343734/odoev-pres-en-06.jpg',
    'https://static.tildacdn.com/tild6264-3134-4561-a333-646630626136/odoev-pres-en-07.jpg',
    'https://static.tildacdn.com/tild3463-6639-4532-b364-636338303939/odoev-pres-en-08.jpg',
    'https://static.tildacdn.com/tild6634-3632-4239-a463-363462323464/odoev-pres-en-09.jpg',
    'https://static.tildacdn.com/tild3434-3061-4432-b663-386464313137/odoev-pres-en-10.jpg',
    'https://static.tildacdn.com/tild6265-6534-4335-a130-306462656133/odoev-pres-en-11.jpg',
    'https://static.tildacdn.com/tild6332-6135-4762-a135-303166363439/odoev-pres-en-12.jpg',
    'https://static.tildacdn.com/tild3930-3535-4231-a436-326336303337/odoev-pres-en-13.jpg',
    'https://static.tildacdn.com/tild3335-3832-4730-b466-393065656433/odoev-pres-en-14.jpg',
    'https://static.tildacdn.com/tild3934-3966-4931-a466-613731333338/odoev-pres-en-15.jpg',
    'https://static.tildacdn.com/tild6465-3432-4361-b464-343863303862/odoev-pres-en-16.jpg'
  ],
  videos: {
    firstShoot:   'sRyZwPm3BS9CVspVi2sLx3',   // шаг 01 - ролик «Термостабильные начинки»
    firstShoot2:  'mZiwnH9uZAdc15hhRsqPvB',    // шаг 01 - ролик «Нетермостабильные начинки»
    factory:      '3ZsxHkdEuHUubxSAQZDRyG',    // шаг 03 - фильм о заводе, полная версия
    main:         'j8Pq4wWMNTPm6Js8UQiM1n'     // блок «Видео проекта»
  }
};
</script>
<div class="kcp">
  <!-- ===== HERO ===== -->
  <header class="kcp__hero">
    <div class="kcp__hero-in">
      <a class="kcp__back" href="/#rec2667018101">← Все проекты</a>
      <div class="kcp__eyebrow">КЕЙС · ПИЩЕВОЕ ПРОИЗВОДСТВО</div>
      <h1 class="kcp__title">Одоевские консервы</h1>
      <div class="kcp__tags"><span class="kcp__tag">Видео</span><span class="kcp__tag">Фотосъёмка</span><span class="kcp__tag">Презентация</span><span class="kcp__tag">Фирменный стиль</span><span class="kcp__tag">Сайт</span></div>
      <p class="kcp__lead">Завод с 200+ рецептур, десятью направлениями продукции и поставками в четыре страны рассказывал о себе разрозненно. Собрали всё в одну систему: видео, фотосъёмка, презентация, логотип, фирменный стиль и два сайта - русский и английский.</p>
      <div class="kcp__facts">
        <div class="kcp__fact"><span>Сфера</span><b>Пищевое производство · B2B</b></div>
        <div class="kcp__fact"><span>С чего начали</span><b>Видеосъёмка продукта</b></div>
        <div class="kcp__fact"><span>Где сейчас</span><b>povidlo.su + povidlo.pro</b></div>
        <div class="kcp__fact"><span>Масштаб</span><b>200+ рецептур · 10 направлений</b></div>
      </div>
    </div>
    <!-- ВСТАВИТЬ: большое обложечное фото/видео (завод, продукция или кадр со съёмки). Пока заглушка. -->
    <div class="kcp__cover kcp__ph" data-img="cover"><div class="kcp__ph-label">📷 Обложка: фото продукции / кадр со съёмки (16:9)</div></div>
  </header>
  <!-- ===== КТО КЛИЕНТ ===== -->
  <section class="kcp__sec">
    <div class="kcp__grid2">
      <div>
        <div class="kcp__kick">- О КОМПАНИИ</div>
        <h2 class="kcp__h2">Сильное производство, которое было не видно</h2>
      </div>
      <div class="kcp__prose">
        <p>«Одоевские консервы» - производитель из посёлка Одоев в Тульской области. Уже более двадцати лет компания выпускает термостабильные фруктово-ягодные начинки, повидло, джемы, конфитюры, пюре и наполнители для хлебопекарной, кондитерской и молочной промышленности: больше 200 рецептур, десять направлений продукции, поставки в четыре страны.</p>
        <p>Это классический B2B: их продукт - ингредиент, который живёт <b>внутри</b> чужих изделий. Начинка в круассане, повидло в печенье, наполнитель в йогурте. Продукт качественный, производство серьёзное - но со стороны этого масштаба не было видно.</p>
        <p>При этом информация о заводе жила по разным местам: ассортимент - в прайсе, производственные возможности - в голове у менеджера, контроль качества и география поставок не были описаны нигде. Видео, сайт, презентация и фирменные материалы не складывались в единую картину: компанию нельзя было «показать» - только долго объяснять на словах.</p>
      </div>
    </div>
  </section>
  <!-- ===== ЗАДАЧА (акцентная плашка) ===== -->
  <section class="kcp__sec">
    <div class="kcp__callout">
      <div class="kcp__callout-k">ЗАДАЧА</div>
      <div class="kcp__callout-t">Задача была не в красивом сайте, а в том, чтобы собрать разрозненную информацию о заводе в одну систему - и партнёр за несколько минут понимал, с кем имеет дело.</div>
    </div>
  </section>
  <!-- ===== ТАЙМЛАЙН РАБОТЫ ===== -->
  <section class="kcp__sec">
    <div class="kcp__kick">- КАК ШЛА РАБОТА</div>
    <h2 class="kcp__h2">Из одной съёмки - в полный цикл</h2>
    <p class="kcp__sub">Сотрудничество началось с одного ролика и постепенно выросло в полный комплект материалов. Вот путь шаг за шагом.</p>
    <ol class="kcp__timeline">
      <li class="kcp__step">
        <div class="kcp__step-num">01</div>
        <div class="kcp__step-body">
          <h3>Первые видео на начинке</h3>
          <p>Начали с двух роликов о продукте. Сняли начинку «в деле» - текстуру, цвет, как она работает в готовом изделии. Это первое, что показывает потенциальному партнёру, что перед ним - качественный ингредиент.</p>
          <!-- Два ролика первой съёмки. ID берутся из KORS_CASE.videos (firstShoot / firstShoot2). -->
          <div class="kcp__vid2">
            <div class="kcp__ph" data-video="firstShoot" data-img="firstShoot"><div class="kcp__ph-label">🎬 Термостабильные начинки</div></div>
            <div class="kcp__ph" data-video="firstShoot2" data-img="firstShoot2"><div class="kcp__ph-label">🎬 Нетермостабильные начинки</div></div>
          </div>
        </div>
      </li>
      <li class="kcp__step">
        <div class="kcp__step-num">02</div>
        <div class="kcp__step-body">
          <h3>Печатная презентация</h3>
          <p>Собрали продукт и производство в понятную структуру - презентацию для переговоров и выставок. Разложили ассортимент, преимущества и мощности так, чтобы менеджеру было легко показать компанию клиенту.</p>
          <!-- Галерея разворотов: ссылки в KORS_CASE.slides. Клик по развороту открывает его на весь экран. -->
          <div class="kcp__gal" data-gallery></div>
          <div class="kcp__ph kcp__ph--wide" data-img="presentation"><div class="kcp__ph-label">📑 Развороты печатной презентации</div></div>
        </div>
      </li>
      <li class="kcp__step">
        <div class="kcp__step-num">03</div>
        <div class="kcp__step-body">
          <h3>Видео о заводе</h3>
          <p>Сняли само производство: масштаб цехов, оборудование, процессы. Именно это видео закрывает главный вопрос B2B-клиента - «а справятся ли по объёму и качеству». Масштаб теперь виден, а не описан словами.</p>
          <div class="kcp__ph kcp__ph--wide" data-video="factory" data-img="factoryPhoto"><div class="kcp__ph-label">🎬 Видео о заводе / кадры производства</div></div>
        </div>
      </li>
      <li class="kcp__step">
        <div class="kcp__step-num">04</div>
        <div class="kcp__step-body">
          <h3>Фотосъёмка для презентации и каталога</h3>
          <p>Сделали предметную и производственную фотосъёмку - продукция, упаковка, цеха. Единый визуальный ряд, который лёг в презентацию, каталог и дальнейшие материалы.</p>
          <div class="kcp__gal kcp__gal--photo" data-photogal></div>
          <div class="kcp__ph kcp__ph--grid">
            <div class="kcp__ph" data-img="product1"><div class="kcp__ph-label">📷 фото продукции 1</div></div>
            <div class="kcp__ph" data-img="product2"><div class="kcp__ph-label">📷 фото продукции 2</div></div>
            <div class="kcp__ph" data-img="product3"><div class="kcp__ph-label">📷 фото цеха / процесса</div></div>
          </div>
        </div>
      </li>
      <li class="kcp__step">
        <div class="kcp__step-num">05</div>
        <div class="kcp__step-body">
          <h3>Новый логотип: до / после</h3>
          <p>Обновили логотип - сохранили узнаваемость, но привели к современному виду, который одинаково хорошо работает на упаковке, в презентации и на сайте. Сравните сами:</p>
          <!-- ДО/ПОСЛЕ слайдер. ВСТАВИТЬ 2 картинки логотипа: старый и новый -->
          <div class="kcp__ba" id="kcpBA">
            <div class="kcp__ba-after kcp__ph" data-img="logoAfter" data-fit="contain"><div class="kcp__ph-label">✅ НОВЫЙ логотип (после)</div></div>
            <div class="kcp__ba-before kcp__ph" id="kcpBABefore" data-img="logoBefore" data-fit="contain"><div class="kcp__ph-label">◻️ СТАРЫЙ логотип (до)</div></div>
            <div class="kcp__ba-handle" id="kcpBAHandle"><span></span></div>
            <div class="kcp__ba-tag kcp__ba-tag--l">ДО</div>
            <div class="kcp__ba-tag kcp__ba-tag--r">ПОСЛЕ</div>
          </div>
          <div class="kcp__ba-hint">Потяните ползунок влево-вправо, чтобы сравнить</div>
        </div>
      </li>
      <li class="kcp__step">
        <div class="kcp__step-num">06</div>
        <div class="kcp__step-body">
          <h3>Фирменный стиль: открытки, визитки, носители</h3>
          <p>Оформили фирменные носители - визитки, открытки и другие материалы в единой стилистике. Компания получила узнаваемый облик, который работает на каждой точке контакта.</p>
          <div class="kcp__cards" data-cards></div>
          <div class="kcp__ph kcp__ph--grid">
            <div class="kcp__ph" data-img="brand1"><div class="kcp__ph-label">📷 визитки</div></div>
            <div class="kcp__ph" data-img="brand2" data-fit="contain"><div class="kcp__ph-label">📷 открытки</div></div>
            <div class="kcp__ph" data-img="brand3" data-fit="contain"><div class="kcp__ph-label">📷 др. носители</div></div>
          </div>
        </div>
      </li>
      <li class="kcp__step">
        <div class="kcp__step-num">07</div>
        <div class="kcp__step-body">
          <h3>Два сайта: povidlo.su и povidlo.pro</h3>
          <p>Сделали не языковой переключатель, а два отдельных сайта. Русский - povidlo.su, под брендом «Одоевские консервы». Английский - povidlo.pro, под экспортным брендом POVIDLO: отдельная структура и своя подача, адаптированная под зарубежных партнёров.</p>
          <p>Каждый из них работает сразу в трёх ролях: корпоративный сайт, каталог продукции и презентация для отдела продаж. Внутри - десять направлений продукции, производственные возможности, контроль качества и география поставок. Менеджеру достаточно дать ссылку вместо пересказа.</p>
          <div class="kcp__gal kcp__gal--site" data-sitegal></div>
          <div class="kcp__sitebtns">
            <a class="kcp__sitebtn" href="https://povidlo.su" target="_blank" rel="noopener">Открыть povidlo.su</a>
            <a class="kcp__sitebtn kcp__sitebtn--ghost" href="https://povidlo.pro" target="_blank" rel="noopener">Открыть povidlo.pro</a>
          </div>
          <div class="kcp__ph kcp__ph--wide" data-img="siteShots"><div class="kcp__ph-label">💻 Скриншоты povidlo.su и povidlo.pro</div></div>
        </div>
      </li>
      <li class="kcp__step kcp__step--next">
        <div class="kcp__step-num">→</div>
        <div class="kcp__step-body">
          <h3>Что дальше</h3>
          <p>Следующий этап - застройка выставочного стенда (планируется на зиму). Сотрудничество продолжается: от продукта на экране - к тому, как компания выглядит вживую на выставке.</p>
        </div>
      </li>
    </ol>
  </section>
  <!-- ===== РЕЗУЛЬТАТ ===== -->
  <section class="kcp__sec">
    <div class="kcp__result">
      <div class="kcp__kick">- ЧТО ИЗМЕНИЛОСЬ</div>
      <h2 class="kcp__h2">Компанию теперь можно показать, а не пересказывать</h2>
      <div class="kcp__result-grid">
        <div class="kcp__rcard"><div class="kcp__rc-t">Единый комплект</div><p>Видео, фото, презентация, логотип, фирменный стиль и сайт - собраны в одну систему и работают вместе.</p></div>
        <div class="kcp__rcard"><div class="kcp__rc-t">Масштаб виден сразу</div><p>Ассортимент, производство и контроль качества показаны на месте - на переговорах, выставках и в презентации, без долгих объяснений.</p></div>
        <div class="kcp__rcard"><div class="kcp__rc-t">Экспортное направление</div><p>Экспорт и представительства в Грузии и ОАЭ. Англоязычный povidlo.pro - то, чем компания представляет себя в регионе MENA.</p></div>
        <div class="kcp__rcard"><div class="kcp__rc-t">Долгое партнёрство</div><p>Сотрудничество выросло из одной видеосъёмки в постоянную работу над материалами компании.</p></div>
      </div>
    </div>
  </section>
  <!-- ===== ЧТО ВОШЛО (услуги) ===== -->
  <section class="kcp__sec">
    <div class="kcp__kick">- ЧТО ВОШЛО В КОМПЛЕКТ</div>
    <div class="kcp__chips">
      <span>Видеопродакшн</span><span>Съёмка производства</span><span>Фотосъёмка</span><span>Печатная презентация</span><span>Редизайн логотипа</span><span>Фирменный стиль</span><span>Визитки и открытки</span><span>Сайт RU</span><span>Сайт EN (MENA)</span>
    </div>
  </section>
  <!-- ===== ВИДЕО КЕЙСА (СКРЫТ) ===== -->
  <!-- СЕКЦИЯ СКРЫТА 28.08.2026. Причина: на странице уже четыре ролика (два в шаге 01 и фильм о заводе в шаге 03).
       Разметка и ключ KORS_CASE.videos.main оставлены нетронутыми. Чтобы вернуть секцию, снимите этот комментарий.
       ID ролика подставляется из KORS_CASE.videos.main
  <section class="kcp__sec">
    <div class="kcp__kick">- СМОТРЕТЬ</div>
    <h2 class="kcp__h2">Видео проекта</h2>
    <div class="kcp__video" data-video="main"><div class="kcp__ph-label">🎬 Основной ролик проекта</div></div>
  </section>
  -->
  <!-- ===== ОТЗЫВ КЛИЕНТА ===== -->
  <section class="kcp__sec">
    <div class="kcp__kick">- ОТЗЫВ</div>
    <h2 class="kcp__h2">Благодарственное письмо</h2>
    <p class="kcp__sub">ООО «МастерДжем» - юридическое лицо «Одоевских консервов»</p>
    <div class="kcp__letter"><img src="https://static.tildacdn.com/tild3231-6563-4932-b139-373433306561/pismo-odoevskie-1200.jpg" alt="Благодарственное письмо от ООО «МастерДжем» (Одоевские консервы) команде KORS Production за фото- и видеосъёмку производства и материалы для сайта и презентаций" loading="lazy"></div>
  </section>
  <!-- ===== ДРУГИЕ КЕЙСЫ ===== -->
  <section class="kcp__sec">
    <div class="kcp__kick">- ЕЩЁ</div>
    <h2 class="kcp__h2">Другие кейсы</h2>
    <div class="kcp__more">
      <a class="kcp__more-card" href="/case-invoicebox"><span>Кейс</span><b>Инвойсбокс</b><i>Видеоматериалы для платформы →</i></a>
      <a class="kcp__more-card" href="/case-vistex"><span>Кейс</span><b>Вистекс</b><i>Съёмка видео о предприятии →</i></a>
    </div>
  </section>
  <!-- ===== CTA ===== -->
  <section class="kcp__cta">
    <h2>Хотите так же показать своё производство?</h2>
    <p>Начнём с одного шага - а вырастем в полный цикл, если понравится результат.</p>
    <a class="kcp__cta-btn" href="#popup:zayavka">Обсудить проект →</a>
  </section>
  <!-- Лайтбокс. Тот же, что для благодарственных писем на главной, плюс листание. -->
  <div class="kcp__lb" id="kcpLb" aria-hidden="true">
    <div class="kcp__lbbd"></div>
    <div class="kcp__lbbox">
      <button class="kcp__lbx" id="kcpLbx" aria-label="Закрыть">×</button>
      <button class="kcp__lbnav kcp__lbnav--prev" id="kcpLbPrev" aria-label="Предыдущий">&#8249;</button>
      <img id="kcpLbImg" alt="">
      <button class="kcp__lbnav kcp__lbnav--next" id="kcpLbNext" aria-label="Следующий">&#8250;</button>
      <div class="kcp__lbcount" id="kcpLbCount"></div>
    </div>
  </div>
</div>
<style>
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Unbounded:wght@400;600;700;800&display=swap');
.kcp{--bg:#0C0C0E;--raise:#141416;--card:#1B1B1F;--border:#2A2A2E;--soft:#242428;--text:#F5F3EF;--muted:#9A9A9A;--faint:#6a6a6e;--accent:#6D5DFB;--glow:rgba(109,93,251,.14);
  box-sizing:border-box;background:var(--bg);color:var(--text);font-family:'Manrope',Arial,sans-serif;-webkit-font-smoothing:antialiased;}
.kcp *{box-sizing:border-box;margin:0;padding:0;}
.kcp p{line-height:1.65;}
.kcp__eyebrow,.kcp__kick{font-family:'Unbounded';font-size:12px;letter-spacing:.14em;color:var(--accent);}
.kcp__h2{font-family:'Unbounded';font-weight:700;font-size:clamp(26px,3.2vw,42px);letter-spacing:-.02em;line-height:1.12;margin:14px 0 0;}
.kcp__sub{color:var(--muted);font-size:17px;line-height:1.6;max-width:640px;margin-top:14px;}
/* HERO */
.kcp__hero{padding:70px 6vw 0;max-width:1280px;margin:0 auto;}
.kcp__hero-in{max-width:900px;}
.kcp__back{display:inline-block;color:var(--muted);text-decoration:none;font-size:14px;font-weight:600;margin-bottom:34px;transition:.2s;}
.kcp__back:hover{color:var(--accent);}
.kcp__hero .kcp__eyebrow{margin-bottom:18px;}
.kcp__title{font-family:'Unbounded';font-weight:800;font-size:clamp(40px,7vw,88px);letter-spacing:-.03em;line-height:1;margin-bottom:24px;}
.kcp__lead{font-size:clamp(18px,2vw,22px);line-height:1.55;color:#d8d6d1;max-width:760px;}
.kcp__tags{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 18px;}
.kcp__tag{font-family:'Manrope',Arial,sans-serif;font-weight:600;font-size:9px;line-height:1;text-transform:uppercase;letter-spacing:.14em;color:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.22);border-radius:4px;padding:5px 8px;white-space:nowrap;}
@media (max-width:480px){ .kcp__tag{font-size:8px;padding:5px 7px;} .kcp__tags{gap:5px;margin-bottom:14px;} }
.kcp__facts{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:14px;overflow:hidden;margin-top:44px;}
.kcp__fact{background:var(--raise);padding:20px 22px;display:flex;flex-direction:column;gap:7px;}
.kcp__fact span{font-size:12px;color:var(--faint);text-transform:uppercase;letter-spacing:.06em;}
.kcp__fact b{font-family:'Unbounded';font-weight:600;font-size:14px;line-height:1.3;}
.kcp__cover{margin:48px auto 0;max-width:1280px;aspect-ratio:16/8;border-radius:20px;}
/* SECTIONS */
.kcp__sec{max-width:1080px;margin:0 auto;padding:64px 6vw;}
.kcp__grid2{display:grid;grid-template-columns:0.85fr 1.15fr;gap:48px;align-items:start;}
.kcp__prose p{color:#c9c7c2;font-size:17px;margin-bottom:16px;}
.kcp__prose p:last-child{margin-bottom:0;}
.kcp__prose b{color:var(--text);font-weight:600;}
/* CALLOUT */
.kcp__callout{background:linear-gradient(135deg,rgba(109,93,251,.10),rgba(109,93,251,.02));border:1px solid rgba(109,93,251,.3);border-radius:18px;padding:40px 44px;}
.kcp__callout-k{font-family:'Unbounded';font-size:12px;letter-spacing:.14em;color:var(--accent);margin-bottom:14px;}
.kcp__callout-t{font-family:'Unbounded';font-weight:600;font-size:clamp(20px,2.4vw,30px);line-height:1.35;letter-spacing:-.01em;}
/* TIMELINE */
.kcp__timeline{list-style:none;margin-top:44px;display:flex;flex-direction:column;gap:26px;}
.kcp__step{display:grid;grid-template-columns:88px 1fr;gap:26px;background:var(--raise);border:1px solid var(--border);border-radius:18px;padding:30px 32px;transition:.25s;}
.kcp__step:hover{border-color:rgba(109,93,251,.4);}
.kcp__step-num{font-family:'Unbounded';font-weight:700;font-size:34px;color:var(--accent);line-height:1;opacity:.85;}
.kcp__step-body h3{font-family:'Unbounded';font-weight:600;font-size:22px;letter-spacing:-.01em;margin-bottom:12px;}
.kcp__step-body p{color:#c4c2bd;font-size:16px;}
.kcp__step--next{background:transparent;border-style:dashed;}
.kcp__step--next .kcp__step-num{opacity:1;}
/* PLACEHOLDERS */
.kcp__ph{position:relative;background:repeating-linear-gradient(45deg,#141416,#141416 12px,#17171a 12px,#17171a 24px);border:2px dashed #38383e;border-radius:14px;min-height:150px;display:flex;align-items:center;justify-content:center;text-align:center;}
.kcp__ph-label{color:#8a8a90;font-size:13px;font-weight:600;line-height:1.5;padding:16px;}
.kcp__ph-label small{color:var(--faint);font-weight:500;}
.kcp__ph--wide{margin-top:18px;aspect-ratio:16/8;min-height:0;}
.kcp__ph--grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:18px;background:none;border:none;padding:0;}
.kcp__ph--grid .kcp__ph{aspect-ratio:4/3;min-height:0;}
.kcp__cover.kcp__ph{aspect-ratio:16/8;}
/* BEFORE/AFTER */
.kcp__ba{position:relative;margin-top:20px;aspect-ratio:16/9;border-radius:16px;overflow:hidden;border:1px solid var(--border);user-select:none;}
.kcp__ba-after,.kcp__ba-before{position:absolute;inset:0;border-radius:0;border:none;}
.kcp__ba-before{width:100%;clip-path:inset(0 50% 0 0);}
.kcp__ba-handle{position:absolute;top:0;bottom:0;left:50%;width:2px;background:var(--accent);cursor:ew-resize;transform:translateX(-1px);}
.kcp__ba-handle span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:40px;height:40px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(0,0,0,.4);}
.kcp__ba-handle span::before{content:'⟷';color:#000;font-size:18px;font-weight:700;}
.kcp__ba-tag{position:absolute;top:14px;font-family:'Unbounded';font-size:11px;letter-spacing:.1em;background:rgba(0,0,0,.6);padding:5px 11px;border-radius:6px;}
.kcp__ba-tag--l{left:14px;}
.kcp__ba-tag--r{right:14px;}
.kcp__ba-hint{text-align:center;color:var(--faint);font-size:13px;margin-top:12px;}
/* RESULT */
.kcp__result-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:34px;}
.kcp__rcard{background:var(--raise);border:1px solid var(--border);border-radius:16px;padding:26px 28px;}
.kcp__rc-t{font-family:'Unbounded';font-weight:600;font-size:18px;color:var(--accent);margin-bottom:10px;}
.kcp__rcard p{color:#c4c2bd;font-size:15px;}
/* CHIPS */
.kcp__chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;}
.kcp__chips span{font-family:'Manrope';font-weight:600;font-size:14px;color:var(--text);background:rgba(109,93,251,.08);border:1px solid rgba(109,93,251,.4);border-radius:8px;padding:10px 16px;}
/* VIDEO */
.kcp__video{margin-top:24px;aspect-ratio:16/9;border-radius:18px;overflow:hidden;border:1px solid var(--border);background:#000;}
.kcp__video iframe{width:100%;height:100%;border:none;}
/* CTA */
.kcp__vid2{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px;}
.kcp__vid2 .kcp__ph{aspect-ratio:16/9;min-height:0;margin-top:0;}
.kcp__letter{margin-top:26px;max-width:440px;}
.kcp__letter img{display:block;width:100%;height:auto;border-radius:14px;border:1px solid var(--border);}
.kcp__more{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:28px;}
.kcp__more-card{display:block;background:var(--raise);border:1px solid var(--border);border-radius:16px;padding:24px 26px;text-decoration:none;transition:.2s;}
.kcp__more-card:hover{border-color:var(--accent);}
.kcp__more-card span{display:block;font-size:12px;letter-spacing:2px;color:var(--accent);text-transform:uppercase;margin-bottom:10px;}
.kcp__more-card b{display:block;font-family:'Unbounded',sans-serif;font-weight:700;font-size:22px;line-height:1.2;color:var(--text);margin-bottom:8px;}
.kcp__more-card i{font-style:normal;font-size:15px;color:var(--muted);}
@media (max-width:640px){.kcp__vid2{grid-template-columns:1fr;}.kcp__more{grid-template-columns:1fr;}}
/* --- Галерея разворотов презентации --- */
.kcp__gal{margin-top:18px;}
.kcp__galhead{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:12px;}
.kcp__galtabs{display:inline-flex;gap:4px;background:var(--soft);border:1px solid var(--border);border-radius:9px;padding:4px;}
.kcp__galtab{padding:7px 18px;border:none;background:none;color:var(--muted);font-family:'Manrope',Arial,sans-serif;font-weight:600;font-size:13px;line-height:1;letter-spacing:1.2px;border-radius:6px;cursor:pointer;transition:.2s;}
.kcp__galtab:hover{color:var(--text);}
.kcp__galtab.is-on{background:var(--accent);color:#fff;}
.kcp__galnote{margin-top:14px;font-size:13px;line-height:1.5;color:var(--muted);letter-spacing:.3px;}
.kcp__galnav{display:flex;gap:8px;flex-shrink:0;}
.kcp__galarrow{width:40px;height:40px;border:1px solid var(--border);background:var(--raise);border-radius:4px;color:var(--text);font:20px/1 Arial,sans-serif;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.2s;padding:0;}
.kcp__galarrow:hover{border-color:var(--accent);color:var(--accent);}
.kcp__galarrow:disabled{opacity:.3;cursor:default;border-color:var(--border);color:var(--text);}
.kcp__galtrack{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:4px;}
.kcp__galtrack::-webkit-scrollbar{display:none;}
.kcp__galcard{flex:0 0 calc((100% - 24px)/3);scroll-snap-align:start;display:block;padding:0;margin:0;border:1px solid var(--border);background:var(--raise);border-radius:10px;overflow:hidden;cursor:zoom-in;aspect-ratio:1200/873;transition:.2s;font:inherit;}
.kcp__galcard:hover{border-color:var(--accent);}
.kcp__galcard img{width:100%;height:100%;object-fit:cover;display:block;}
/* --- Лайтбокс --- */
.kcp__lb{position:fixed;inset:0;z-index:99999;display:none;align-items:center;justify-content:center;padding:64px 40px;}
.kcp__lb.open{display:flex;}
.kcp__lbbd{position:absolute;inset:0;background:rgba(4,4,6,.9);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);}
.kcp__lbbox{position:relative;width:auto;max-width:min(1100px,100%);display:flex;align-items:center;justify-content:center;}
.kcp__lbbox img{display:block;max-width:100%;max-height:calc(100vh - 170px);width:auto;height:auto;border-radius:10px;background:#0f0f11;}
.kcp__lbx{position:absolute;top:-48px;right:0;width:38px;height:38px;border-radius:9px;background:var(--raise);border:1px solid var(--border);color:var(--text);font:20px/1 Arial,sans-serif;cursor:pointer;padding:0;}
.kcp__lbx:hover{border-color:var(--accent);color:var(--accent);}
.kcp__lbnav{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;background:rgba(20,20,22,.85);border:1px solid var(--border);color:var(--text);font:22px/1 Arial,sans-serif;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.2s;padding:0;}
.kcp__lbnav:hover{border-color:var(--accent);color:var(--accent);}
.kcp__lbnav--prev{left:10px;}
.kcp__lbnav--next{right:10px;}
.kcp__lbcount{position:absolute;bottom:-36px;left:50%;transform:translateX(-50%);font-size:13px;color:var(--muted);letter-spacing:.4px;white-space:nowrap;}
@media (max-width:820px){.kcp__galcard{flex:0 0 calc((100% - 12px)/2);}.kcp__lb{padding:60px 12px;}.kcp__lbnav{width:40px;height:40px;}}
@media (max-width:480px){.kcp__galcard{flex:0 0 82%;}.kcp__galnav{display:none;}.kcp__galhead{margin-bottom:10px;}}
.kcp__cta{max-width:900px;margin:20px auto 0;padding:80px 6vw 96px;text-align:center;}
.kcp__cta h2{font-family:'Unbounded';font-weight:700;font-size:clamp(26px,3.4vw,42px);letter-spacing:-.02em;margin-bottom:16px;}
.kcp__cta p{color:var(--muted);font-size:18px;margin-bottom:30px;}
.kcp__cta-btn{display:inline-block;background:var(--accent);color:#fff;text-decoration:none;font-family:'Manrope';font-weight:700;font-size:16px;padding:18px 38px;border-radius:10px;transition:.25s;}
.kcp__cta-btn:hover{transform:translateY(-2px);box-shadow:0 14px 34px var(--glow);}
@media (max-width:820px){
  .kcp__facts{grid-template-columns:1fr 1fr;}
  .kcp__grid2{grid-template-columns:1fr;gap:20px;}
  .kcp__step{grid-template-columns:1fr;gap:14px;padding:24px 22px;}
  .kcp__step-num{font-size:28px;}
  .kcp__result-grid{grid-template-columns:1fr;}
  .kcp__ph--grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:480px){
  .kcp__hero{padding:48px 20px 0;}
  .kcp__sec{padding:48px 20px;}
  .kcp__facts{grid-template-columns:1fr;}
  .kcp__callout{padding:28px 24px;}
}
/* заполненные слоты (картинка/видео из конфига) */
.kcp [data-img].kcp--filled,.kcp [data-video].kcp--filled{background:none;border:none;}
.kcp [data-img] img,.kcp [data-video] img{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit;}
.kcp [data-fit="contain"] img{object-fit:contain;background:#0f0f11;padding:6%;}
.kcp [data-video].kcp--filled iframe{width:100%;height:100%;border:none;display:block;}
.kcp__ph.kcp--filled{padding:0;}
/* Визитки в шаге 06 - две карточки рядом, лайтбокс общий с галереей */
.kcp__cards{margin-top:18px}
.kcp__cardsrow{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.kcp__card{display:block;width:100%;padding:0;border:0;margin:0;background:#0f0f11;border-radius:14px;overflow:hidden;aspect-ratio:1680/952;cursor:zoom-in}
.kcp__card img{width:100%;height:100%;object-fit:cover;display:block}
.kcp__card:focus-visible{outline:2px solid #6D5DFB;outline-offset:3px}
.kcp__cardsnote{color:#9A9A9A;font-size:13px;line-height:1.5;margin-top:10px}
.kcp__ph--grid.is-two{grid-template-columns:repeat(2,1fr)}
@media (max-width:680px){.kcp__cardsrow{grid-template-columns:1fr}}
/* Галерея кадров фотосъёмки в шаге 04 */
.kcp__gal--photo .kcp__galcard{aspect-ratio:4/3}
/* Галерея скриншотов сайтов в шаге 07 */
.kcp__gal--site .kcp__galcard{flex:0 0 calc((100% - 12px)/2);aspect-ratio:16/9;background:#0f0f11}
.kcp__gal--site .kcp__galcard img{object-fit:contain}
.kcp__sitebtns{display:flex;flex-wrap:wrap;gap:12px;margin-top:16px}
.kcp__sitebtn{display:inline-block;background:var(--accent);color:#fff;text-decoration:none;font-family:'Manrope';font-weight:700;font-size:15px;line-height:1.2;padding:13px 24px;border-radius:10px;transition:.25s}
.kcp__sitebtn:hover{transform:translateY(-2px);box-shadow:0 12px 28px var(--glow)}
.kcp__sitebtn--ghost{background:transparent;color:var(--text);border:1px solid var(--border)}
.kcp__sitebtn--ghost:hover{border-color:var(--accent);box-shadow:none}
@media (max-width:480px){.kcp__gal--site .kcp__galcard{flex:0 0 88%}.kcp__sitebtn{flex:1 1 100%;text-align:center}}
</style>
<script>
(function(){
  var C=window.KORS_CASE||{}; var IMG=C.images||{}, VID=C.videos||{};
  document.querySelectorAll('.kcp [data-video]').forEach(function(el){
    var id=VID[el.getAttribute('data-video')];
    if(id){ el.classList.add('kcp--filled'); el.innerHTML='<iframe src="https://kinescope.io/embed/'+id+'" allow="autoplay; fullscreen; encrypted-media; picture-in-picture" allowfullscreen frameborder="0"></iframe>'; el.removeAttribute('data-img'); }
  });
  document.querySelectorAll('.kcp [data-img]').forEach(function(el){
    var url=IMG[el.getAttribute('data-img')];
    if(url){ el.classList.add('kcp--filled'); el.innerHTML='<img src="'+url+'" alt="">'; }
  });
})();
(function(){
  // Слайдер до/после
  var ba=document.getElementById('kcpBA'); if(!ba) return;
  var before=document.getElementById('kcpBABefore');
  var handle=document.getElementById('kcpBAHandle');
  var dragging=false;
  function setPos(clientX){
    var r=ba.getBoundingClientRect();
    var x=Math.max(0,Math.min(clientX-r.left,r.width));
    var pct=(x/r.width)*100;
    before.style.clipPath='inset(0 '+(100-pct)+'% 0 0)';
    handle.style.left=pct+'%';
  }
  handle.addEventListener('mousedown',function(){dragging=true;});
  window.addEventListener('mouseup',function(){dragging=false;});
  window.addEventListener('mousemove',function(e){ if(dragging) setPos(e.clientX); });
  handle.addEventListener('touchstart',function(){dragging=true;},{passive:true});
  window.addEventListener('touchend',function(){dragging=false;});
  window.addEventListener('touchmove',function(e){ if(dragging&&e.touches[0]) setPos(e.touches[0].clientX); },{passive:true});
  ba.addEventListener('click',function(e){ setPos(e.clientX); });
})();

(function(){
  var C=window.KORS_CASE||{}, SL=C.slides||[];
  var lb=document.getElementById('kcpLb'), lbi=document.getElementById('kcpLbImg'), lbc=document.getElementById('kcpLbCount');
  if(!lb||!lbi) return;
  var list=[], idx=0, lbl='';
  function render(){ lbi.src=list[idx]; lbi.alt=(lbl||'Разворот')+' '+(idx+1)+' из '+list.length; if(lbc) lbc.textContent=(idx+1)+' / '+list.length; }
  function open(arr,i,l){ list=arr; idx=i; lbl=l||''; lb.classList.add('open'); lb.setAttribute('aria-hidden','false'); document.documentElement.style.overflow='hidden'; render(); }
  function close(){ lb.classList.remove('open'); lb.setAttribute('aria-hidden','true'); document.documentElement.style.overflow=''; lbi.removeAttribute('src'); }
  function go(d){ if(list.length<2) return; idx=(idx+d+list.length)%list.length; render(); }
  window.kcpLightbox={open:open};
  function noteSlides(SETS, cur){
    var ru=SETS.filter(function(s){return s.id==='ru';})[0], en=SETS.filter(function(s){return s.id==='en';})[0];
    if(ru&&en) return (ru.items.length===en.items.length?'По '+ru.items.length+' разворотов в русской и английской версии':ru.items.length+' разворотов на русском и '+en.items.length+' на английском')+' - нажмите на разворот, чтобы рассмотреть';
    return cur.items.length+' разворотов - нажмите на разворот, чтобы рассмотреть';
  }
  function altSlide(i,n,cur){ return 'Разворот '+(i+1)+' печатной презентации «Одоевские консервы»'+(cur.id==='en'?', английская версия':''); }
  var PH_ALT = [
    'Фруктово-ягодные начинки разных вкусов, выложенные в ряд',
    'Круассаны в разрезе с фруктовой начинкой на деревянной доске',
    'Сотрудница лаборатории изучает образцы продукции под микроскопом',
    'Варочный котёл с ягодной массой, рядом работники в спецодежде',
    'Ягодное варенье в стеклянной посуде, вокруг свежие ягоды и яблоки',
    'Складские стеллажи с паллетами готовой продукции'
  ];
  function notePhoto(SETS, cur){
    return 'Продукция, упаковка и производство. Нажмите на кадр, чтобы рассмотреть';
  }
  function altPhoto(i,n,cur){ return PH_ALT[i] || ('Кадр '+(i+1)+' из '+n); }
  function noteSites(SETS, cur){
    return 'Вкладка RU - povidlo.su под брендом «Одоевские консервы», вкладка EN - povidlo.pro под экспортным брендом POVIDLO для рынка MENA. Нажмите на кадр, чтобы рассмотреть';
  }
  function altSite(i,n,cur){ return 'Экран '+(i+1)+' из '+n+' сайта '+(cur.id==='en'?'povidlo.pro':'povidlo.su'); }

  function makeGallery(gal, SETS, noteFn, altFn, label, fbSel){
    if(!gal || !SETS.length) return;
    if(fbSel){ var ph=gal.parentNode.querySelector(fbSel); if(ph) ph.style.display='none'; }
    var tabs=SETS.length>1 ? '<div class="kcp__galtabs" role="tablist">'+SETS.map(function(s,i){return '<button class="kcp__galtab'+(i===0?' is-on':'')+'" data-lang="'+s.id+'" role="tab" aria-selected="'+(i===0)+'">'+s.label+'</button>';}).join('')+'</div>' : '<span></span>';
    gal.innerHTML='<div class="kcp__galhead">'+tabs+'<div class="kcp__galnav"><button class="kcp__galarrow" data-gprev aria-label="Назад">&#8249;</button><button class="kcp__galarrow" data-gnext aria-label="Вперёд">&#8250;</button></div></div><div class="kcp__galtrack"></div><div class="kcp__galnote"></div>';
    var track=gal.querySelector('.kcp__galtrack'), note=gal.querySelector('.kcp__galnote');
    var gp=gal.querySelector('[data-gprev]'), gn=gal.querySelector('[data-gnext]');
    var cur=SETS[0];
    function fill(){
      var h='';
      for(var i=0;i<cur.items.length;i++){ h+='<button class="kcp__galcard" data-gi="'+i+'" aria-label="'+label+' '+(i+1)+' из '+cur.items.length+'"><img src="'+cur.items[i]+'" alt="'+altFn(i,cur.items.length,cur)+'" loading="lazy"></button>'; }
      track.innerHTML=h; track.scrollLeft=0; note.textContent=noteFn(SETS,cur); setTimeout(upd,60);
    }
    function step(){ var c=track.querySelector('.kcp__galcard'); return c?c.offsetWidth+12:320; }
    function upd(){ gp.disabled=track.scrollLeft<8; gn.disabled=track.scrollLeft+track.clientWidth>=track.scrollWidth-8; }
    gp.addEventListener('click',function(){ track.scrollLeft-=step(); });
    gn.addEventListener('click',function(){ track.scrollLeft+=step(); });
    track.addEventListener('scroll',upd); window.addEventListener('resize',upd);
    track.addEventListener('click',function(e){ var b=e.target&&e.target.closest?e.target.closest('.kcp__galcard'):null; if(!b) return; open(cur.items, parseInt(b.getAttribute('data-gi'),10)||0, label); });
    var tabEls=gal.querySelectorAll('.kcp__galtab');
    Array.prototype.forEach.call(tabEls,function(t){
      t.addEventListener('click',function(){
        var id=t.getAttribute('data-lang');
        var next=SETS.filter(function(s){return s.id===id;})[0];
        if(!next||next===cur) return;
        cur=next;
        Array.prototype.forEach.call(tabEls,function(o){ var on=o===t; o.classList.toggle('is-on',on); o.setAttribute('aria-selected',on); });
        fill();
      });
    });
    fill();
  }

  makeGallery(document.querySelector('.kcp [data-gallery]'),
    [{id:'ru',label:'RU',items:SL},{id:'en',label:'EN',items:C.slidesEn||[]}].filter(function(x){return x.items&&x.items.length;}),
    noteSlides, altSlide, 'Разворот', '[data-img="presentation"]');

  var PH = [C.images.product1, C.images.product2, C.images.product3, C.images.photo4, C.images.photo5, C.images.photo6].filter(Boolean);
  makeGallery(document.querySelector('.kcp [data-photogal]'),
    [{id:'ph',label:'Съёмка',items:PH}].filter(function(x){return x.items&&x.items.length;}),
    notePhoto, altPhoto, 'Кадр', '.kcp__ph--grid');

  makeGallery(document.querySelector('.kcp [data-sitegal]'),
    [{id:'ru',label:'RU',items:C.siteRu||[]},{id:'en',label:'EN',items:C.siteEn||[]}].filter(function(x){return x.items&&x.items.length;}),
    noteSites, altSite, 'Скриншот', '[data-img="siteShots"]');
  var x=document.getElementById('kcpLbx'); if(x) x.addEventListener('click',close);
  var pv=document.getElementById('kcpLbPrev'); if(pv) pv.addEventListener('click',function(e){ e.stopPropagation(); go(-1); });
  var nx=document.getElementById('kcpLbNext'); if(nx) nx.addEventListener('click',function(e){ e.stopPropagation(); go(1); });
  lb.addEventListener('click',function(e){ if(e.target===lbi) return; if(e.target&&e.target.closest&&e.target.closest('.kcp__lbnav,.kcp__lbx')) return; close(); });
  document.addEventListener('keydown',function(e){ if(!lb.classList.contains('open')) return; if(e.key==='Escape'||e.keyCode===27) close(); else if(e.key==='ArrowLeft'||e.keyCode===37) go(-1); else if(e.key==='ArrowRight'||e.keyCode===39) go(1); });
  var sx=0, sy=0;
  lb.addEventListener('touchstart',function(e){ if(!e.touches[0]) return; sx=e.touches[0].clientX; sy=e.touches[0].clientY; },{passive:true});
  lb.addEventListener('touchend',function(e){ var t=e.changedTouches&&e.changedTouches[0]; if(!t) return; var dx=t.clientX-sx, dy=t.clientY-sy; if(Math.abs(dx)>45&&Math.abs(dx)>Math.abs(dy)) go(dx<0?1:-1); },{passive:true});
})();

(function(){
  // Визитки шага 06: две карточки рядом, клик открывает общий лайтбокс.
  var C=window.KORS_CASE||{};
  var CARDS=(C.cards||[]).filter(Boolean);
  var box=document.querySelector('.kcp [data-cards]');
  if(!box) return;
  if(!CARDS.length){ box.style.display='none'; return; }
  var ph=document.querySelector('.kcp [data-img="brand1"]');
  if(ph){ ph.style.display='none'; if(ph.parentNode) ph.parentNode.classList.add('is-two'); }
  var ALT=['Визитка: владелец бизнеса','Визитка: менеджер по продажам'];
  var h='';
  for(var i=0;i<CARDS.length;i++){
    h+='<button type="button" class="kcp__card" data-i="'+i+'" aria-label="Открыть визитку '+(i+1)+' из '+CARDS.length+'"><img src="'+CARDS[i]+'" alt="'+(ALT[i]||'Визитка')+'" loading="lazy"></button>';
  }
  box.innerHTML='<div class="kcp__cardsrow">'+h+'</div><div class="kcp__cardsnote">Нажмите на визитку, чтобы рассмотреть</div>';
  box.addEventListener('click',function(e){
    var b=e.target&&e.target.closest?e.target.closest('.kcp__card'):null;
    if(!b) return;
    if(window.kcpLightbox) window.kcpLightbox.open(CARDS, parseInt(b.getAttribute('data-i'),10), 'Визитка');
  });
})();
</script>
<script>
/* Сторож картинок.
   Иногда запрос картинки к CDN зависает: ответа нет, ошибки нет, элемент img остаётся
   пустым навсегда, а слот с заданными пропорциями держит пустое место во весь экран.
   Переназначить src такому элементу бесполезно - он уже мёртвый; помогает только
   НОВЫЙ элемент img. Поэтому раз в 10 с (до трёх попыток) создаём свежую картинку
   и подменяем ею зависшую, когда та загрузится.
   Слот прячем только если сервер явно ответил ошибкой: медленную картинку прятать
   нельзя, она может прийти позже. Пока вкладка в фоне, отсчёт не ведём - там браузер
   тормозит загрузку сам, и это не повод считать картинку потерянной. */
(function(){
  function ready(im){ return im && im.complete && im.naturalWidth > 0; }
  function watch(box){
    var first = box.querySelector("img");
    if(!first) return;
    first.addEventListener("error", function(){ box.style.display = "none"; });
    var tries = 0;
    function tick(){
      var cur = box.querySelector("img");
      if(ready(cur) || tries >= 3) return;
      if(document.hidden){ setTimeout(tick, 5000); return; }
      tries++;
      var url = ((cur && cur.getAttribute("src")) || "").split("?")[0];
      if(url){
        var fresh = new Image();
        fresh.alt = (cur && cur.alt) || "";
        fresh.onload = function(){ if(cur && cur.parentNode === box && !ready(cur)) box.replaceChild(fresh, cur); };
        fresh.onerror = function(){ box.style.display = "none"; };
        fresh.src = url + "?kr=" + Date.now();
      }
      setTimeout(tick, 10000);
    }
    setTimeout(tick, 5000);
  }
  var slots = document.querySelectorAll(".kcp [data-img], .step-media");
  for(var i = 0; i < slots.length; i++){ watch(slots[i]); }
})();
</script>


<script>
/* KORS - постер под ролик Kinescope.
   Если плеер не загрузился (сбой Кинескопа, блокировка, медленная сеть),
   в слоте остаётся кадр из ролика, а не пустое место.
   Постер кладётся фоном контейнера, iframe лежит поверх.
   Слоты, у которых фон уже задан своим постером, не трогаем. */
(function(){
  function put(f){
    var box = f.parentElement;
    if(!box || box.getAttribute("data-kposter")) return;
    var src = f.getAttribute("src") || f.getAttribute("data-src") || "";
    var id = (src.match(/embed\/([A-Za-z0-9]+)/) || [])[1];
    if(!id) return;
    box.setAttribute("data-kposter", "1");
    if(getComputedStyle(box).backgroundImage !== "none") return;
    box.style.backgroundColor = "#141416";
    box.style.backgroundImage = "url(https://kinescope.io/" + id + "/poster.jpg)";
    box.style.backgroundSize = "cover";
    box.style.backgroundPosition = "center";
    box.style.backgroundRepeat = "no-repeat";
  }
  function scan(){
    var f = document.querySelectorAll('iframe[src*="kinescope"], iframe[data-src*="kinescope"]');
    for(var i = 0; i < f.length; i++) put(f[i]);
  }
  scan();
  setTimeout(scan, 1000); setTimeout(scan, 3000); setTimeout(scan, 8000);
  if(window.MutationObserver){
    var mo = new MutationObserver(scan);
    mo.observe(document.documentElement, {childList:true, subtree:true});
    setTimeout(function(){ mo.disconnect(); }, 30000);
  }
})();
</script>

rec2709724901 - кейс InvoiceBox (24690 символов)

<!-- ============================================================
     KORS · КЕЙС · INVOICEBOX
     Заполнение фото/видео — только в списке KORS_CASE ниже.
     Картинки: ссылка в кавычки ('' = заглушка). Видео: ID Kinescope.
     ============================================================ -->
<script>
window.KORS_CASE = {
  images: {
    cover:      'https://static.tildacdn.com/tild6235-3838-4235-b430-646665666232/ib-cover-a-city.jpg',   // обложка вверху - кадр из второго ролика, Москва-Сити
    aboutShot:  '',   // «О компании» - скрин сервиса/интерфейса
    info1:      '',   // ролик «как выставить счёт» - кадр (если без видео)
    info2:      '',   // ролик «для интернет-магазинов» - кадр
    mkt:        'https://static.tildacdn.com/tild3464-6437-4161-b731-353565616265/ib-ads.jpg',   // рекламный кабинет проекта (данные скрыты)
    grtCover:   'https://static.tildacdn.com/tild6266-3832-4334-b066-303434623230/grt-site.jpg',   // GIARTI - первый экран сайта
    grt1:       '',   // GRT - пример
    siteSoon:   ''    // планы - макет лендингов
  },
  videos: {
    main:  '2FXfjS6hYEvLkWNKUveoBx',  // шаг 01 - первое видео о сервисе, полная версия
    v2:    '0GfobL6RnAzhPeiopXjNHS',  // шаг 02 - второе видео, «Инвойсбокс 2»
    info1: 'b66cpVCFFFVycfDvLFXFR3',  // шаг 03 - короткий ролик «выставить счёт»
    info2: '7akHJzKdcoSrPiHtRbRBqk'   // шаг 03 - короткий ролик «для интернет-магазинов»
  }
};
</script>

<div class="kcp">
<header class="kcp__hero">
    <div class="kcp__hero-in">
      <a class="kcp__back" href="/#rec2667018101">← Все проекты</a>
      <div class="kcp__eyebrow">КЕЙС · ФИНТЕХ · ВИДЕО + МАРКЕТИНГ</div>
      <h1 class="kcp__title">Инвойсбокс</h1>
      <p class="kcp__lead">Как объяснить сложный финтех простым языком - и почему клиент возвращался за видео, инфографикой и маркетингом, а затем доверил нам и свой второй бизнес.</p>
      <div class="kcp__facts">
        <div class="kcp__fact"><span>Сфера</span><b>Финтех · приём платежей (B2B)</b></div>
        <div class="kcp__fact"><span>С чего начали</span><b>Видео о сервисе</b></div>
        <div class="kcp__fact"><span>Где сейчас</span><b>Продвижение + 2-й бизнес</b></div>
        <div class="kcp__fact"><span>Формат</span><b>Видео · инфографика · реклама</b></div>
      </div>
    </div>
    <div class="kcp__cover kcp__ph" data-img="cover"><div class="kcp__ph-label">📷 Обложка: кадр из видео / интерфейс сервиса (16:9)</div></div>
  </header>
  <section class="kcp__sec">
    <div class="kcp__grid2">
      <div><div class="kcp__kick">- О КОМПАНИИ</div><h2 class="kcp__h2">Мощный сервис, который сложно объяснить</h2></div>
      <div class="kcp__prose">
        <p>Инвойсбокс - сервис приёма онлайн-платежей и автоматизации выставления счетов для бизнеса. Компании выставляют и отправляют счета юридическим лицам за минуту, принимают оплату на сайте и подключают решения для интернет-магазинов.</p>
        <p>Продукт сильный, но у него есть особенность: <b>финтех сложно воспринимается</b>. Чтобы клиент подключился, ему нужно за секунды понять, что это за сервис и какая от него выгода. На словах и текстом это объяснять долго.</p>
      </div>
    </div>
  </section>
  <section class="kcp__sec">
    <div class="kcp__callout">
      <div class="kcp__callout-k">ЗАДАЧА</div>
      <div class="kcp__callout-t">Объяснить сложный финтех-продукт так, чтобы целевая аудитория поняла суть и выгоду за считанные секунды - и захотела подключиться.</div>
    </div>
  </section>
  <section class="kcp__sec">
    <div class="kcp__kick">- КАК ШЛА РАБОТА</div>
    <h2 class="kcp__h2">От одного ролика - к маркетингу и второму бизнесу</h2>
    <p class="kcp__sub">Всё началось с одного объясняющего видео. Дальше клиент возвращался снова и снова - за новыми форматами.</p>
    <ol class="kcp__timeline">
      <li class="kcp__step"><div class="kcp__step-num">01</div><div class="kcp__step-body">
        <h3>Видео о сервисе</h3>
        <p>Сняли первое видео: кто такие Инвойсбокс, чем полезны и как это работает - коротко и понятно. Первый инструмент, который показывает продукт вместо долгих объяснений.</p>
        <div class="kcp__ph kcp__ph--wide" data-video="main"><div class="kcp__ph-label">🎬 Видео о сервисе (Kinescope)</div></div>
      </div></li>
      <li class="kcp__step"><div class="kcp__step-num">02</div><div class="kcp__step-body">
        <h3>Второе видео - глубже и проще</h3>
        <p>Клиент вернулся за вторым роликом. Здесь мы подробнее и ещё проще разобрали продукт - версия для сайта и презентаций, чтобы объяснять сервис новым клиентам.</p>
        <div class="kcp__ph kcp__ph--wide" data-video="v2"><div class="kcp__ph-label">🎬 Второе видео (подробный разбор)</div></div>
      </div></li>
      <li class="kcp__step"><div class="kcp__step-num">03</div><div class="kcp__step-body">
        <h3>Два коротких ролика</h3>
        <p>Дальше - два коротких ролика (~30 секунд): «как выставить счёт на сервисе» и «решение для интернет-магазинов» (у клиента появился новый сервис). Простыми словами о сложном - точно под их аудиторию.</p>
        <div class="kcp__ph kcp__ph--grid">
          <div class="kcp__ph" data-video="info1" data-img="info1"><div class="kcp__ph-label">🎬 ролик «выставить счёт»</div></div>
          <div class="kcp__ph" data-video="info2" data-img="info2"><div class="kcp__ph-label">🎬 ролик «для интернет-магазинов»</div></div>
        </div>
      </div></li>
      <li class="kcp__step"><div class="kcp__step-num">04</div><div class="kcp__step-body">
        <h3>Подготовка и запуск продвижения</h3>
        <p>Структуру подготовили под рекламный трафик: настроили точки конверсии, предусмотрели посадочные сценарии под разные запросы и собрали аналитику, чтобы видеть, что работает.</p>
        <p>Кампании запущены и работают, мы их ведём. О результатах расскажем, когда наберётся показательный период.</p>
        <div class="kcp__ph kcp__ph--ads" data-img="mkt"><div class="kcp__ph-label">📊 рекламный кабинет проекта</div></div>
      </div></li>
      <li class="kcp__step kcp__chapter"><div class="kcp__step-num kcp__step-num--brand">GIARTI</div><div class="kcp__step-body">
        <h3>Второй бизнес клиента - GIARTI</h3>
        <p>Лучшее подтверждение доверия: клиент передал нам и свой второй бизнес - <b>GIARTI</b>. Это онлайн-галерея высокохудожественных изделий ручной работы от мастеров из России и других стран: вазы, скульптура, янтарь, ювелирные изделия, художественное литьё. В каталоге есть отдельные разделы для мастеров и для дизайнеров, доставка с гарантией, а каждое изделие проверяют перед отправкой покупателю.</p>
        <p>Другой продукт и другая аудитория, но схема та же: разбираемся в товаре, готовим структуру под рекламный трафик и ведём кампании. Работа продолжается - о результатах расскажем, когда наберётся показательный период.</p>
        <p><a class="kcp__link" href="https://giarti.com" target="_blank" rel="noopener">giarti.com</a></p>
        <div class="kcp__ph kcp__ph--site" data-img="grtCover"><div class="kcp__ph-label">🖼 GIARTI: первый экран сайта</div></div>
      </div></li>
      <li class="kcp__step kcp__step--next"><div class="kcp__step-num">→</div><div class="kcp__step-body">
        <h3>Что дальше</h3>
        <p>Следующий этап - лендинги под каждый продукт: отдельная страница на каждый сервис, где сложный финтех объясняется максимально просто. Задача - чтобы любой человек понял, что это за сервис и как им удобно пользоваться.</p>
      </div></li>
    </ol>
  </section>
  <section class="kcp__sec">
    <div class="kcp__result">
      <div class="kcp__kick">- ЧТО ИЗМЕНИЛОСЬ</div>
      <h2 class="kcp__h2">Сложное стало понятным - и продающим</h2>
      <div class="kcp__result-grid">
        <div class="kcp__rcard"><div class="kcp__rc-t">Просто о сложном</div><p>Финтех-продукт объяснён так, что аудитория понимает суть и выгоду за секунды.</p></div>
        <div class="kcp__rcard"><div class="kcp__rc-t">Клиент возвращается</div><p>От одного видео - к серии роликов и инфографике, дальше - подготовка к продвижению.</p></div>
        <div class="kcp__rcard"><div class="kcp__rc-t">Доверие = 2-й бизнес</div><p>Клиент передал нам и второй бизнес - онлайн-галерею изделий ручной работы GIARTI.</p></div>
        <div class="kcp__rcard"><div class="kcp__rc-t">Постоянная работа</div><p>Не разовая задача, а постоянная работа по двум бизнесам клиента.</p></div>
      </div>
    </div>
  </section>
  <section class="kcp__sec">
    <div class="kcp__kick">- ЧТО ВОШЛО В РАБОТУ</div>
    <div class="kcp__chips">
      <span>Видеопродакшн</span><span>Объясняющие ролики</span><span>Моушн / инфографика</span><span>Короткие ролики 30 сек</span><span>Маркетинг и реклама</span><span>Ведение проекта</span><span>Реклама GIARTI</span><span>Лендинги (в планах)</span>
    </div>
  </section>
  <!-- ===== ВИДЕО ПРОЕКТА (СКРЫТО) ===== -->
  <!-- СЕКЦИЯ СКРЫТА 28.08.2026. Причина: ролик xgBCJrU3Fy9CtKDXR9R23S дублировал шаг 01, а на странице и так четыре ролика.
       Разметка сохранена. Чтобы вернуть секцию, снимите этот комментарий.
  <section class="kcp__sec">
    <div class="kcp__kick">- СМОТРЕТЬ</div>
    <h2 class="kcp__h2">Видео проекта</h2>
    <div class="kcp__video"><iframe src="https://kinescope.io/embed/xgBCJrU3Fy9CtKDXR9R23S" allow="autoplay; fullscreen; encrypted-media; picture-in-picture" allowfullscreen frameborder="0"></iframe></div>
  </section>
  -->
  <!-- ===== ОТЗЫВ КЛИЕНТА ===== -->
  <section class="kcp__sec">
    <div class="kcp__kick">- ОТЗЫВ</div>
    <h2 class="kcp__h2">Благодарственное письмо</h2>
    <p class="kcp__sub">ООО «Объединённый расчётный центр» - юридическое лицо группы «Инвойсбокс»</p>
    <div class="kcp__letter"><img src="https://static.tildacdn.com/tild3461-6534-4530-b265-323334643764/pismo-invoicebox-120.jpg" alt="Благодарственное письмо от ООО «Объединённый расчётный центр» (Инвойсбокс) команде KORS Production за видеоролики и ведение маркетинга" loading="lazy"></div>
  </section>
  <!-- ===== ДРУГИЕ КЕЙСЫ ===== -->
  <section class="kcp__sec">
    <div class="kcp__kick">- ЕЩЁ</div>
    <h2 class="kcp__h2">Другие кейсы</h2>
    <div class="kcp__more">
      <a class="kcp__more-card" href="/case-odoevskie"><span>Кейс</span><b>Одоевские консервы</b><i>Видео, фирменный стиль и два сайта →</i></a>
      <a class="kcp__more-card" href="/case-vistex"><span>Кейс</span><b>Вистекс</b><i>Съёмка видео о предприятии →</i></a>
    </div>
  </section>
  <section class="kcp__cta">
    <h2>Сложный продукт? Объясним просто.</h2>
    <p>Поможем показать ваш сервис так, чтобы клиент понял его за секунды.</p>
    <a class="kcp__cta-btn" href="#popup:zayavka">Обсудить проект →</a>
  </section>
</div>

<style>
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Unbounded:wght@400;600;700;800&display=swap');
.kcp{--bg:#0C0C0E;--raise:#141416;--card:#1B1B1F;--border:#2A2A2E;--soft:#242428;--text:#F5F3EF;--muted:#9A9A9A;--faint:#6a6a6e;--accent:#6D5DFB;--glow:rgba(109,93,251,.14);
  box-sizing:border-box;background:var(--bg);color:var(--text);font-family:'Manrope',Arial,sans-serif;-webkit-font-smoothing:antialiased;}
.kcp *{box-sizing:border-box;margin:0;padding:0;}
.kcp p{line-height:1.65;}
.kcp__eyebrow,.kcp__kick{font-family:'Unbounded';font-size:12px;letter-spacing:.14em;color:var(--accent);}
.kcp__h2{font-family:'Unbounded';font-weight:700;font-size:clamp(26px,3.2vw,42px);letter-spacing:-.02em;line-height:1.12;margin:14px 0 0;}
.kcp__sub{color:var(--muted);font-size:17px;line-height:1.6;max-width:640px;margin-top:14px;}
.kcp__hero{padding:70px 6vw 0;max-width:1280px;margin:0 auto;}
.kcp__hero-in{max-width:900px;}
.kcp__back{display:inline-block;color:var(--muted);text-decoration:none;font-size:14px;font-weight:600;margin-bottom:34px;transition:.2s;}
.kcp__back:hover{color:var(--accent);}
.kcp__hero .kcp__eyebrow{margin-bottom:18px;}
.kcp__title{font-family:'Unbounded';font-weight:800;font-size:clamp(40px,7vw,88px);letter-spacing:-.03em;line-height:1;margin-bottom:24px;}
.kcp__lead{font-size:clamp(18px,2vw,22px);line-height:1.55;color:#d8d6d1;max-width:760px;}
.kcp__facts{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:14px;overflow:hidden;margin-top:44px;}
.kcp__fact{background:var(--raise);padding:20px 22px;display:flex;flex-direction:column;gap:7px;}
.kcp__fact span{font-size:12px;color:var(--faint);text-transform:uppercase;letter-spacing:.06em;}
.kcp__fact b{font-family:'Unbounded';font-weight:600;font-size:14px;line-height:1.3;}
.kcp__cover{margin:48px auto 0;max-width:1280px;aspect-ratio:16/8;border-radius:20px;}
.kcp__sec{max-width:1080px;margin:0 auto;padding:64px 6vw;}
.kcp__grid2{display:grid;grid-template-columns:0.85fr 1.15fr;gap:48px;align-items:start;}
.kcp__prose p{color:#c9c7c2;font-size:17px;margin-bottom:16px;}
.kcp__prose p:last-child{margin-bottom:0;}
.kcp__prose b{color:var(--text);font-weight:600;}
.kcp__callout{background:linear-gradient(135deg,rgba(109,93,251,.10),rgba(109,93,251,.02));border:1px solid rgba(109,93,251,.3);border-radius:18px;padding:40px 44px;}
.kcp__callout-k{font-family:'Unbounded';font-size:12px;letter-spacing:.14em;color:var(--accent);margin-bottom:14px;}
.kcp__callout-t{font-family:'Unbounded';font-weight:600;font-size:clamp(20px,2.4vw,30px);line-height:1.35;letter-spacing:-.01em;}
.kcp__timeline{list-style:none;margin-top:44px;display:flex;flex-direction:column;gap:26px;}
.kcp__step{display:grid;grid-template-columns:88px 1fr;gap:26px;background:var(--raise);border:1px solid var(--border);border-radius:18px;padding:30px 32px;transition:.25s;}
.kcp__step:hover{border-color:rgba(109,93,251,.4);}
.kcp__step-num{font-family:'Unbounded';font-weight:700;font-size:34px;color:var(--accent);line-height:1;opacity:.85;}
.kcp__step-body h3{font-family:'Unbounded';font-weight:600;font-size:22px;letter-spacing:-.01em;margin-bottom:12px;}
.kcp__step-body p{color:#c4c2bd;font-size:16px;}
.kcp__step--next{background:transparent;border-style:dashed;}
.kcp__step--next .kcp__step-num{opacity:1;}
.kcp__ph{position:relative;background:repeating-linear-gradient(45deg,#141416,#141416 12px,#17171a 12px,#17171a 24px);border:2px dashed #38383e;border-radius:14px;min-height:150px;display:flex;align-items:center;justify-content:center;text-align:center;}
.kcp__ph-label{color:#8a8a90;font-size:13px;font-weight:600;line-height:1.5;padding:16px;}
.kcp__ph-label small{color:var(--faint);font-weight:500;}
.kcp__ph--wide{margin-top:18px;aspect-ratio:16/8;min-height:0;}
.kcp__ph--site{margin-top:18px;aspect-ratio:1200/681;min-height:0;}
.kcp__ph--ads{margin-top:18px;aspect-ratio:1200/607;min-height:0;}
.kcp__step-num--brand{font-size:17px!important;letter-spacing:.02em;padding-top:5px;}
.kcp__link{color:#A99CFF;text-decoration:underline;text-underline-offset:3px;}
.kcp__link:hover{color:#F5F3EF;}
.kcp__ph--grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:18px;background:none;border:none;padding:0;}
.kcp__ph--grid .kcp__ph{aspect-ratio:4/3;min-height:0;}
.kcp__cover.kcp__ph{aspect-ratio:16/8;}
.kcp__ba{position:relative;margin-top:20px;aspect-ratio:16/9;border-radius:16px;overflow:hidden;border:1px solid var(--border);user-select:none;}
.kcp__ba-after,.kcp__ba-before{position:absolute;inset:0;border-radius:0;border:none;}
.kcp__ba-before{width:100%;clip-path:inset(0 50% 0 0);}
.kcp__ba-handle{position:absolute;top:0;bottom:0;left:50%;width:2px;background:var(--accent);cursor:ew-resize;transform:translateX(-1px);}
.kcp__ba-handle span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:40px;height:40px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(0,0,0,.4);}
.kcp__ba-handle span::before{content:'⟷';color:#000;font-size:18px;font-weight:700;}
.kcp__ba-tag{position:absolute;top:14px;font-family:'Unbounded';font-size:11px;letter-spacing:.1em;background:rgba(0,0,0,.6);padding:5px 11px;border-radius:6px;}
.kcp__ba-tag--l{left:14px;}
.kcp__ba-tag--r{right:14px;}
.kcp__ba-hint{text-align:center;color:var(--faint);font-size:13px;margin-top:12px;}
.kcp__result-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:34px;}
.kcp__rcard{background:var(--raise);border:1px solid var(--border);border-radius:16px;padding:26px 28px;}
.kcp__rc-t{font-family:'Unbounded';font-weight:600;font-size:18px;color:var(--accent);margin-bottom:10px;}
.kcp__rcard p{color:#c4c2bd;font-size:15px;}
.kcp__chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;}
.kcp__chips span{font-family:'Manrope';font-weight:600;font-size:14px;color:var(--text);background:rgba(109,93,251,.08);border:1px solid rgba(109,93,251,.4);border-radius:8px;padding:10px 16px;}
.kcp__video{margin-top:24px;aspect-ratio:16/9;border-radius:18px;overflow:hidden;border:1px solid var(--border);background:#000;}
.kcp__video iframe{width:100%;height:100%;border:none;}
.kcp__cta{max-width:900px;margin:20px auto 0;padding:80px 6vw 96px;text-align:center;}
.kcp__cta h2{font-family:'Unbounded';font-weight:700;font-size:clamp(26px,3.4vw,42px);letter-spacing:-.02em;margin-bottom:16px;}
.kcp__cta p{color:var(--muted);font-size:18px;margin-bottom:30px;}
.kcp__cta-btn{display:inline-block;background:var(--accent);color:#fff;text-decoration:none;font-family:'Manrope';font-weight:700;font-size:16px;padding:18px 38px;border-radius:10px;transition:.25s;}
.kcp__cta-btn:hover{transform:translateY(-2px);box-shadow:0 14px 34px var(--glow);}
@media (max-width:820px){
  .kcp__facts{grid-template-columns:1fr 1fr;}
  .kcp__grid2{grid-template-columns:1fr;gap:20px;}
  .kcp__step{grid-template-columns:1fr;gap:14px;padding:24px 22px;}
  .kcp__step-num{font-size:28px;}
  .kcp__result-grid{grid-template-columns:1fr;}
  .kcp__ph--grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:480px){
  .kcp__hero{padding:48px 20px 0;}
  .kcp__sec{padding:48px 20px;}
  .kcp__facts{grid-template-columns:1fr;}
  .kcp__callout{padding:28px 24px;}
}
.kcp [data-img].kcp--filled,.kcp [data-video].kcp--filled{background:none;border:none;}
.kcp [data-img] img,.kcp [data-video] img{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit;}
.kcp [data-fit="contain"] img{object-fit:contain;background:#0f0f11;padding:6%;}
.kcp [data-video].kcp--filled iframe{width:100%;height:100%;border:none;display:block;}
.kcp__ph.kcp--filled{padding:0;}
.kcp__chapter{background:linear-gradient(135deg,rgba(109,93,251,.10),rgba(109,93,251,.02))!important;border-color:rgba(109,93,251,.4)!important;}
.kcp__chapter .kcp__step-num{font-size:22px;}
/* Благодарственное письмо и блок «Другие кейсы» */
.kcp__letter{margin-top:26px;max-width:440px}
.kcp__letter img{display:block;width:100%;height:auto;border-radius:14px;border:1px solid var(--border)}
.kcp__more{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:28px}
.kcp__more-card{display:block;background:var(--raise);border:1px solid var(--border);border-radius:16px;padding:24px 26px;text-decoration:none;transition:.2s}
.kcp__more-card:hover{border-color:var(--accent)}
.kcp__more-card span{display:block;font-size:12px;letter-spacing:2px;color:var(--accent);text-transform:uppercase;margin-bottom:10px}
.kcp__more-card b{display:block;font-family:'Unbounded',sans-serif;font-weight:700;font-size:22px;line-height:1.2;color:var(--text);margin-bottom:8px}
.kcp__more-card i{font-style:normal;font-size:15px;color:var(--muted)}
@media (max-width:640px){.kcp__more{grid-template-columns:1fr}}
</style>
<script>
(function(){
  var C=window.KORS_CASE||{}; var IMG=C.images||{}, VID=C.videos||{};
  document.querySelectorAll('.kcp [data-video]').forEach(function(el){
    var id=VID[el.getAttribute('data-video')];
    if(id){ el.classList.add('kcp--filled'); el.innerHTML='<iframe src="https://kinescope.io/embed/'+id+'" allow="autoplay; fullscreen; encrypted-media; picture-in-picture" allowfullscreen frameborder="0"></iframe>'; el.removeAttribute('data-img'); }
  });
  document.querySelectorAll('.kcp [data-img]').forEach(function(el){
    var ALT_IB={grtCover:'Первый экран сайта GIARTI - онлайн-галереи изделий ручной работы',mkt:'Рекламный кабинет проекта в Яндекс Директе: список кампаний со статусами и площадками, показатели и названия кампаний скрыты'};
    var url=IMG[el.getAttribute('data-img')];
    if(url){ el.classList.add('kcp--filled'); el.innerHTML='<img src="'+url+'" alt="'+(ALT_IB[el.getAttribute('data-img')]||'')+'">'; }
  });
})();
(function(){
  var ba=document.getElementById('kcpBA'); if(!ba) return;
  var before=document.getElementById('kcpBABefore');
  var handle=document.getElementById('kcpBAHandle');
  var dragging=false;
  function setPos(clientX){
    var r=ba.getBoundingClientRect();
    var x=Math.max(0,Math.min(clientX-r.left,r.width));
    var pct=(x/r.width)*100;
    before.style.clipPath='inset(0 '+(100-pct)+'% 0 0)';
    handle.style.left=pct+'%';
  }
  handle.addEventListener('mousedown',function(){dragging=true;});
  window.addEventListener('mouseup',function(){dragging=false;});
  window.addEventListener('mousemove',function(e){ if(dragging) setPos(e.clientX); });
  handle.addEventListener('touchstart',function(){dragging=true;},{passive:true});
  window.addEventListener('touchend',function(){dragging=false;});
  window.addEventListener('touchmove',function(e){ if(dragging&&e.touches[0]) setPos(e.touches[0].clientX); },{passive:true});
  ba.addEventListener('click',function(e){ setPos(e.clientX); });
})();
</script>

<script>
/* Сторож картинок.
   Иногда запрос картинки к CDN зависает: ответа нет, ошибки нет, элемент img остаётся
   пустым навсегда, а слот с заданными пропорциями держит пустое место во весь экран.
   Переназначить src такому элементу бесполезно - он уже мёртвый; помогает только
   НОВЫЙ элемент img. Поэтому раз в 10 с (до трёх попыток) создаём свежую картинку
   и подменяем ею зависшую, когда та загрузится.
   Слот прячем только если сервер явно ответил ошибкой: медленную картинку прятать
   нельзя, она может прийти позже. Пока вкладка в фоне, отсчёт не ведём - там браузер
   тормозит загрузку сам, и это не повод считать картинку потерянной. */
(function(){
  function ready(im){ return im && im.complete && im.naturalWidth > 0; }
  function watch(box){
    var first = box.querySelector("img");
    if(!first) return;
    first.addEventListener("error", function(){ box.style.display = "none"; });
    var tries = 0;
    function tick(){
      var cur = box.querySelector("img");
      if(ready(cur) || tries >= 3) return;
      if(document.hidden){ setTimeout(tick, 5000); return; }
      tries++;
      var url = ((cur && cur.getAttribute("src")) || "").split("?")[0];
      if(url){
        var fresh = new Image();
        fresh.alt = (cur && cur.alt) || "";
        fresh.onload = function(){ if(cur && cur.parentNode === box && !ready(cur)) box.replaceChild(fresh, cur); };
        fresh.onerror = function(){ box.style.display = "none"; };
        fresh.src = url + "?kr=" + Date.now();
      }
      setTimeout(tick, 10000);
    }
    setTimeout(tick, 5000);
  }
  var slots = document.querySelectorAll(".kcp [data-img], .step-media");
  for(var i = 0; i < slots.length; i++){ watch(slots[i]); }
})();
</script>


<script>
/* KORS - постер под ролик Kinescope.
   Если плеер не загрузился (сбой Кинескопа, блокировка, медленная сеть),
   в слоте остаётся кадр из ролика, а не пустое место.
   Постер кладётся фоном контейнера, iframe лежит поверх.
   Слоты, у которых фон уже задан своим постером, не трогаем. */
(function(){
  function put(f){
    var box = f.parentElement;
    if(!box || box.getAttribute("data-kposter")) return;
    var src = f.getAttribute("src") || f.getAttribute("data-src") || "";
    var id = (src.match(/embed\/([A-Za-z0-9]+)/) || [])[1];
    if(!id) return;
    box.setAttribute("data-kposter", "1");
    if(getComputedStyle(box).backgroundImage !== "none") return;
    box.style.backgroundColor = "#141416";
    box.style.backgroundImage = "url(https://kinescope.io/" + id + "/poster.jpg)";
    box.style.backgroundSize = "cover";
    box.style.backgroundPosition = "center";
    box.style.backgroundRepeat = "no-repeat";
  }
  function scan(){
    var f = document.querySelectorAll('iframe[src*="kinescope"], iframe[data-src*="kinescope"]');
    for(var i = 0; i < f.length; i++) put(f[i]);
  }
  scan();
  setTimeout(scan, 1000); setTimeout(scan, 3000); setTimeout(scan, 8000);
  if(window.MutationObserver){
    var mo = new MutationObserver(scan);
    mo.observe(document.documentElement, {childList:true, subtree:true});
    setTimeout(function(){ mo.disconnect(); }, 30000);
  }
})();
</script>

rec2709838401 - кейс Вистекс (31657 символов)

<!-- ============================================================
     KORS · КЕЙС · ВИСТЕКС
     Заполнение фото/видео - только в списке KORS_CASE ниже.
     ============================================================ -->
<script>
window.KORS_CASE = {
  images: {
    cover:     'https://static.tildacdn.com/tild3664-3263-4134-a264-346265333031/vx-cover-a-zavod.jpg',   // обложка вверху 2:1, стоп-кадр из фильма о заводе
    email:     'https://static.tildacdn.com/tild3132-6165-4266-a461-656338346239/vx-email.jpg',   // дизайн письма со встроенным видео (скрин)
    label1:    '',   // концепт этикетки/салфетки 1 (мультяшная стилистика)
    label2:    '',   // концепт этикетки/салфетки 2
    siteSoon:  ''    // макет сайта (в планах) - слот скрыт в разметке
  },
  // Концепты упаковки салфеток. Если массив пуст, шаг 03 показывает два одиночных слота label1/label2.
  labels: [
    'https://static.tildacdn.com/tild3961-3833-4932-a163-313038643335/vx-salfetki-pylesos.jpg',
    'https://static.tildacdn.com/tild3134-3133-4266-a566-636434663239/vx-salfetki-enot.jpg',
    'https://static.tildacdn.com/tild6361-3032-4439-b530-376236353062/vx-salfetki-pyatna.jpg',
    'https://static.tildacdn.com/tild3330-3533-4134-b432-373062633630/vx-salfetki-kuhnya.jpg'
  ],
  videos: {
    main:  'fv7FAnLfbLaDaNJLtSQ74H'   // главное видео о заводе (стоит наш ролик)
  }
};
</script>

<div class="kcp">
<header class="kcp__hero">
    <div class="kcp__hero-in">
      <a class="kcp__back" href="/#rec2667018101">← Все проекты</a>
      <div class="kcp__eyebrow">КЕЙС · ПРОИЗВОДСТВО · ВИДЕО</div>
      <h1 class="kcp__title">Вистекс</h1>
      <div class="kcp__tags"><span class="kcp__tag">Видео</span><span class="kcp__tag">Дизайн</span></div>
      <p class="kcp__lead">Как уложить многопрофильное производство в трёхминутный ролик - и превратить его в рабочий инструмент отдела продаж.</p>
      <div class="kcp__facts">
        <div class="kcp__fact"><span>Сфера</span><b>Нетканые материалы · B2B</b></div>
        <div class="kcp__fact"><span>С чего начали</span><b>Видео о заводе</b></div>
        <div class="kcp__fact"><span>Результат</span><b>Ролик работает в продажах</b></div>
        <div class="kcp__fact"><span>Дальше</span><b>Этикетки, салфетки, сайт</b></div>
      </div>
    </div>
    <div class="kcp__cover kcp__ph" data-img="cover"><div class="kcp__ph-label">📷 Обложка: производство / нетканые полотна (2:1)</div></div>
  </header>
  <section class="kcp__sec">
    <div class="kcp__grid2">
      <div><div class="kcp__kick">- О КОМПАНИИ</div><h2 class="kcp__h2">Большой завод и продукция для разных отраслей</h2></div>
      <div class="kcp__prose">
        <p>«Вистекс» - один из крупнейших производителей нетканых полотен в европейской части России (работает с 1992 года, завод в подмосковном Кудинове). Продукция идёт в разные отрасли промышленности: геотекстиль, материалы для обуви и мебели, для автопрома, напольных покрытий, протирочных салфеток, фильтров и другие.</p>
        <p>Производство мощное и разнообразное - но именно в этом сложность: <b>рассказать клиенту про все направления и масштаб</b> коротко и понятно почти невозможно, если делать это на словах.</p>
      </div>
    </div>
  </section>
  <section class="kcp__sec">
    <div class="kcp__callout">
      <div class="kcp__callout-k">ЗАДАЧА</div>
      <div class="kcp__callout-t">За несколько минут показать масштаб завода и все направления так, чтобы клиент увидел: здесь закроют его задачу - какой бы она ни была.</div>
    </div>
  </section>
  <section class="kcp__sec">
    <div class="kcp__kick">- КАК ШЛА РАБОТА</div>
    <h2 class="kcp__h2">От ролика о заводе - к письму для продаж</h2>
    <p class="kcp__sub">Начали с одного большого видео о производстве - и оно стало рабочим инструментом, который принёс заводу конкретный результат.</p>
    <ol class="kcp__timeline">
      <li class="kcp__step"><div class="kcp__step-num">01</div><div class="kcp__step-body">
        <h3>Видео о заводе: производство за 3 минуты</h3>
        <p>Сняли ключевой ролик о производстве: за три минуты показали производство и линейку продукции завода. Плотно, наглядно, без воды - уровень продакшена под стать масштабу компании.</p>
        <div class="kcp__ph kcp__ph--wide" data-video="main"><div class="kcp__ph-label">🎬 Видео о заводе (Kinescope)</div></div>
      </div></li>
      <li class="kcp__step"><div class="kcp__step-num">02</div><div class="kcp__step-body">
        <h3>Дизайн письма со встроенным видео</h3>
        <p>Ролик начали отправлять клиентам - и мы собрали под него готовое HTML-письмо для рассылки коммерческих предложений. Внутри: логотип завода, короткий текст от менеджера по развитию, превью ролика с кнопкой воспроизведения и пометка, что коммерческое предложение приложено отдельным файлом.</p>
        <p>Что изменилось в работе: <b>коммерческие предложения уходят вместе с роликом, и продукт больше не приходится объяснять текстом - клиент сразу видит завод, линии и готовую продукцию.</b></p>
        <div class="kcp__ph kcp__ph--mail" data-img="email"><div class="kcp__ph-label">✉️ дизайн письма со встроенным видео (скрин)</div></div>
      </div></li>
      <li class="kcp__step"><div class="kcp__step-num">03</div><div class="kcp__step-body">
        <h3>Дизайн этикеток и салфеток - концепты</h3>
        <p>Пошли дальше в брендинг потребительской продукции. Предложили заводу концепты дизайна этикеток и салфеток в фирменной мультяшной стилистике: нарисовали графику, написали тексты и описания - всё под ключ с нашей стороны.</p>
        <div class="kcp__gal kcp__gal--pack" data-labelgal></div>
        <div class="kcp__ph kcp__ph--grid">
          <div class="kcp__ph" data-img="label1"><div class="kcp__ph-label">🎨 концепт этикетки/салфетки 1</div></div>
          <div class="kcp__ph" data-img="label2"><div class="kcp__ph-label">🎨 концепт этикетки/салфетки 2</div></div>
        </div>
      </div></li>
      <li class="kcp__step kcp__step--next"><div class="kcp__step-num">→</div><div class="kcp__step-body">
        <h3>Что дальше</h3>
        <p>Следующий этап - сайт завода: единая витрина всех направлений с той же понятной подачей, что и в видео.</p>
        <!-- СЛОТ СКРЫТ 28.08.2026. Причина: макета сайта пока нет, заглушка оставляла пустое место. Ключ images.siteSoon в конфиге сохранён - чтобы вернуть слот, снимите этот комментарий.
        <div class="kcp__ph kcp__ph--wide" data-img="siteSoon"><div class="kcp__ph-label">макет сайта (появится)</div></div>
        -->
      </div></li>
    </ol>
  </section>
  <section class="kcp__sec">
    <div class="kcp__result">
      <div class="kcp__kick">- ЧТО ИЗМЕНИЛОСЬ</div>
      <h2 class="kcp__h2">Ролик и письмо, которые работают в продажах</h2>
      <div class="kcp__result-grid">
        <div class="kcp__rcard"><div class="kcp__rc-t">Всё производство за 3 минуты</div><p>Сложное многопрофильное производство укладывается в один понятный ролик.</p></div>
        <div class="kcp__rcard"><div class="kcp__rc-t">Продукт стали понимать</div><p>С письмом и видео клиенты сразу видят, что завод может закрыть их потребности.</p></div>
        <div class="kcp__rcard"><div class="kcp__rc-t">Продажи с видео в руках</div><p>Менеджеры отправляют коммерческие предложения вместе с роликом - завод показывают, а не пересказывают.</p></div>
        <div class="kcp__rcard"><div class="kcp__rc-t">Развитие бренда</div><p>Концепты этикеток и салфеток, впереди - сайт завода.</p></div>
      </div>
    </div>
  </section>
  <section class="kcp__sec">
    <div class="kcp__kick">- ЧТО ВОШЛО В РАБОТУ</div>
    <div class="kcp__chips">
      <span>Видеопродакшн</span><span>Съёмка производства</span><span>Сценарий ролика</span><span>Email-дизайн</span><span>Видео в письме</span><span>Концепты этикеток и салфеток</span><span>Копирайтинг</span><span>Сайт (в планах)</span>
    </div>
  </section>
  <!-- ===== ВИДЕО ПРОЕКТА (СКРЫТО) =====
     СЕКЦИЯ СКРЫТА 28.08.2026. Причина: тот же ролик уже стоит в шаге 01, на странице он дублировался.
     Разметка сохранена целиком. Чтобы вернуть секцию, снимите этот комментарий.
  <section class="kcp__sec">
    <div class="kcp__kick">- СМОТРЕТЬ</div>
    <h2 class="kcp__h2">Видео проекта</h2>
    <div class="kcp__video"><iframe src="https://kinescope.io/embed/fv7FAnLfbLaDaNJLtSQ74H" allow="autoplay; fullscreen; encrypted-media; picture-in-picture" allowfullscreen frameborder="0"></iframe></div>
  </section>
  -->
  <section class="kcp__sec">
    <div class="kcp__kick">- ОТЗЫВ</div>
    <h2 class="kcp__h2">Благодарственное письмо</h2>
    <p class="kcp__sub">ООО «Вистекс» - производитель нетканых полотен, завод в подмосковном Кудинове</p>
    <div class="kcp__letter"><img src="https://static.tildacdn.com/tild3665-6165-4336-a262-666463636263/pismo-visteks-1200.jpg" alt="Благодарственное письмо от ООО «Вистекс» команде KORS Production за фильм о производстве и дизайн материалов" loading="lazy"></div>
  </section>
  <section class="kcp__sec">
    <div class="kcp__kick">- ЕЩЁ</div>
    <h2 class="kcp__h2">Другие кейсы</h2>
    <div class="kcp__more">
      <a class="kcp__more-card" href="/case-odoevskie"><span>Кейс</span><b>Одоевские консервы</b><i>Съёмка производства и ребрендинг →</i></a>
      <a class="kcp__more-card" href="/case-invoicebox"><span>Кейс</span><b>Инвойсбокс</b><i>Видеоматериалы для платформы →</i></a>
    </div>
  </section>
  <section class="kcp__cta">
    <h2>Сложное производство? Покажем за минуты.</h2>
    <p>Упакуем ваш завод в видео и материалы, с которыми проще продавать.</p>
    <a class="kcp__cta-btn" href="#popup:zayavka">Обсудить проект →</a>
  </section>
</div>

<style>
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Unbounded:wght@400;600;700;800&display=swap');
.kcp{--bg:#0C0C0E;--raise:#141416;--card:#1B1B1F;--border:#2A2A2E;--soft:#242428;--text:#F5F3EF;--muted:#9A9A9A;--faint:#6a6a6e;--accent:#6D5DFB;--glow:rgba(109,93,251,.14);
  box-sizing:border-box;background:var(--bg);color:var(--text);font-family:'Manrope',Arial,sans-serif;-webkit-font-smoothing:antialiased;}
.kcp *{box-sizing:border-box;margin:0;padding:0;}
.kcp p{line-height:1.65;}
.kcp__eyebrow,.kcp__kick{font-family:'Unbounded';font-size:12px;letter-spacing:.14em;color:var(--accent);}
.kcp__h2{font-family:'Unbounded';font-weight:700;font-size:clamp(26px,3.2vw,42px);letter-spacing:-.02em;line-height:1.12;margin:14px 0 0;}
.kcp__sub{color:var(--muted);font-size:17px;line-height:1.6;max-width:640px;margin-top:14px;}
.kcp__hero{padding:70px 6vw 0;max-width:1280px;margin:0 auto;}
.kcp__hero-in{max-width:900px;}
.kcp__back{display:inline-block;color:var(--muted);text-decoration:none;font-size:14px;font-weight:600;margin-bottom:34px;transition:.2s;}
.kcp__back:hover{color:var(--accent);}
.kcp__hero .kcp__eyebrow{margin-bottom:18px;}
.kcp__title{font-family:'Unbounded';font-weight:800;font-size:clamp(40px,7vw,88px);letter-spacing:-.03em;line-height:1;margin-bottom:24px;}
.kcp__lead{font-size:clamp(18px,2vw,22px);line-height:1.55;color:#d8d6d1;max-width:760px;}
.kcp__tags{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 18px;}
.kcp__tag{font-family:'Manrope',Arial,sans-serif;font-weight:600;font-size:9px;line-height:1;text-transform:uppercase;letter-spacing:.14em;color:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.22);border-radius:4px;padding:5px 8px;white-space:nowrap;}
@media (max-width:480px){ .kcp__tag{font-size:8px;padding:5px 7px;} .kcp__tags{gap:5px;margin-bottom:14px;} }
.kcp__facts{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:14px;overflow:hidden;margin-top:44px;}
.kcp__fact{background:var(--raise);padding:20px 22px;display:flex;flex-direction:column;gap:7px;}
.kcp__fact span{font-size:12px;color:var(--faint);text-transform:uppercase;letter-spacing:.06em;}
.kcp__fact b{font-family:'Unbounded';font-weight:600;font-size:14px;line-height:1.3;}
.kcp__cover{margin:48px auto 0;max-width:1280px;aspect-ratio:16/8;border-radius:20px;}
.kcp__sec{max-width:1080px;margin:0 auto;padding:64px 6vw;}
.kcp__grid2{display:grid;grid-template-columns:0.85fr 1.15fr;gap:48px;align-items:start;}
.kcp__prose p{color:#c9c7c2;font-size:17px;margin-bottom:16px;}
.kcp__prose p:last-child{margin-bottom:0;}
.kcp__prose b{color:var(--text);font-weight:600;}
.kcp__callout{background:linear-gradient(135deg,rgba(109,93,251,.10),rgba(109,93,251,.02));border:1px solid rgba(109,93,251,.3);border-radius:18px;padding:40px 44px;}
.kcp__callout-k{font-family:'Unbounded';font-size:12px;letter-spacing:.14em;color:var(--accent);margin-bottom:14px;}
.kcp__callout-t{font-family:'Unbounded';font-weight:600;font-size:clamp(20px,2.4vw,30px);line-height:1.35;letter-spacing:-.01em;}
.kcp__timeline{list-style:none;margin-top:44px;display:flex;flex-direction:column;gap:26px;}
.kcp__step{display:grid;grid-template-columns:88px 1fr;gap:26px;background:var(--raise);border:1px solid var(--border);border-radius:18px;padding:30px 32px;transition:.25s;}
.kcp__step:hover{border-color:rgba(109,93,251,.4);}
.kcp__step-num{font-family:'Unbounded';font-weight:700;font-size:34px;color:var(--accent);line-height:1;opacity:.85;}
.kcp__step-body h3{font-family:'Unbounded';font-weight:600;font-size:22px;letter-spacing:-.01em;margin-bottom:12px;}
.kcp__step-body p{color:#c4c2bd;font-size:16px;}
.kcp__step--next{background:transparent;border-style:dashed;}
.kcp__step--next .kcp__step-num{opacity:1;}
.kcp__ph{position:relative;background:repeating-linear-gradient(45deg,#141416,#141416 12px,#17171a 12px,#17171a 24px);border:2px dashed #38383e;border-radius:14px;min-height:150px;display:flex;align-items:center;justify-content:center;text-align:center;}
.kcp__ph-label{color:#8a8a90;font-size:13px;font-weight:600;line-height:1.5;padding:16px;}
.kcp__ph-label small{color:var(--faint);font-weight:500;}
.kcp__ph--wide{margin-top:18px;aspect-ratio:16/8;min-height:0;}
.kcp__ph--mail{margin:18px auto 0;aspect-ratio:1200/1078;min-height:0;max-width:620px;}
.kcp__ph--grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:18px;background:none;border:none;padding:0;}
.kcp__ph--grid .kcp__ph{aspect-ratio:4/3;min-height:0;}
.kcp__cover.kcp__ph{aspect-ratio:16/8;}
.kcp__ba{position:relative;margin-top:20px;aspect-ratio:16/9;border-radius:16px;overflow:hidden;border:1px solid var(--border);user-select:none;}
.kcp__ba-after,.kcp__ba-before{position:absolute;inset:0;border-radius:0;border:none;}
.kcp__ba-before{width:100%;clip-path:inset(0 50% 0 0);}
.kcp__ba-handle{position:absolute;top:0;bottom:0;left:50%;width:2px;background:var(--accent);cursor:ew-resize;transform:translateX(-1px);}
.kcp__ba-handle span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:40px;height:40px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(0,0,0,.4);}
.kcp__ba-handle span::before{content:'⟷';color:#000;font-size:18px;font-weight:700;}
.kcp__ba-tag{position:absolute;top:14px;font-family:'Unbounded';font-size:11px;letter-spacing:.1em;background:rgba(0,0,0,.6);padding:5px 11px;border-radius:6px;}
.kcp__ba-tag--l{left:14px;}
.kcp__ba-tag--r{right:14px;}
.kcp__ba-hint{text-align:center;color:var(--faint);font-size:13px;margin-top:12px;}
.kcp__result-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:34px;}
.kcp__rcard{background:var(--raise);border:1px solid var(--border);border-radius:16px;padding:26px 28px;}
.kcp__rc-t{font-family:'Unbounded';font-weight:600;font-size:18px;color:var(--accent);margin-bottom:10px;}
.kcp__rcard p{color:#c4c2bd;font-size:15px;}
.kcp__chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;}
.kcp__chips span{font-family:'Manrope';font-weight:600;font-size:14px;color:var(--text);background:rgba(109,93,251,.08);border:1px solid rgba(109,93,251,.4);border-radius:8px;padding:10px 16px;}
.kcp__video{margin-top:24px;aspect-ratio:16/9;border-radius:18px;overflow:hidden;border:1px solid var(--border);background:#000;}
.kcp__video iframe{width:100%;height:100%;border:none;}
.kcp__cta{max-width:900px;margin:20px auto 0;padding:80px 6vw 96px;text-align:center;}
.kcp__cta h2{font-family:'Unbounded';font-weight:700;font-size:clamp(26px,3.4vw,42px);letter-spacing:-.02em;margin-bottom:16px;}
.kcp__cta p{color:var(--muted);font-size:18px;margin-bottom:30px;}
.kcp__cta-btn{display:inline-block;background:var(--accent);color:#fff;text-decoration:none;font-family:'Manrope';font-weight:700;font-size:16px;padding:18px 38px;border-radius:10px;transition:.25s;}
.kcp__cta-btn:hover{transform:translateY(-2px);box-shadow:0 14px 34px var(--glow);}
@media (max-width:820px){
  .kcp__facts{grid-template-columns:1fr 1fr;}
  .kcp__grid2{grid-template-columns:1fr;gap:20px;}
  .kcp__step{grid-template-columns:1fr;gap:14px;padding:24px 22px;}
  .kcp__step-num{font-size:28px;}
  .kcp__result-grid{grid-template-columns:1fr;}
  .kcp__ph--grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:480px){
  .kcp__hero{padding:48px 20px 0;}
  .kcp__sec{padding:48px 20px;}
  .kcp__facts{grid-template-columns:1fr;}
  .kcp__callout{padding:28px 24px;}
}
.kcp [data-img].kcp--filled,.kcp [data-video].kcp--filled{background:none;border:none;}
.kcp [data-img] img,.kcp [data-video] img{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit;}
.kcp [data-fit="contain"] img{object-fit:contain;background:#0f0f11;padding:6%;}
.kcp [data-video].kcp--filled iframe{width:100%;height:100%;border:none;display:block;}
.kcp__ph.kcp--filled{padding:0;}

.kcp__letter{margin-top:26px;max-width:440px;}
.kcp__letter img{display:block;width:100%;height:auto;border-radius:14px;border:1px solid var(--border);}
.kcp__more{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:28px;}
.kcp__more-card{display:block;background:var(--raise);border:1px solid var(--border);border-radius:16px;padding:24px 26px;text-decoration:none;transition:.2s;}
.kcp__more-card:hover{border-color:var(--accent);}
.kcp__more-card span{display:block;font-size:12px;letter-spacing:2px;color:var(--accent);text-transform:uppercase;margin-bottom:10px;}
.kcp__more-card b{display:block;font-family:Unbounded,sans-serif;font-weight:700;font-size:22px;line-height:1.2;color:var(--text);margin-bottom:8px;}
.kcp__more-card i{font-style:normal;font-size:15px;color:var(--muted);}
.kcp--filled img{cursor:zoom-in;}
.kcp__letter img{cursor:zoom-in;}
.kcp__lb{position:fixed;inset:0;z-index:99999;display:none;align-items:center;justify-content:center;padding:64px 40px;}
.kcp__lb.open{display:flex;}
.kcp__lbbd{position:absolute;inset:0;background:rgba(4,4,6,.9);backdrop-filter:blur(4px);}
.kcp__lbbox{position:relative;max-width:min(1100px,100%);display:flex;align-items:center;justify-content:center;}
.kcp__lbbox img{display:block;max-width:100%;max-height:calc(100vh - 170px);width:auto;height:auto;border-radius:10px;background:#0f0f11;}
.kcp__lbx{position:absolute;top:-48px;right:0;width:38px;height:38px;border-radius:9px;background:var(--raise);border:1px solid var(--border);color:var(--text);font:20px/1 Arial,sans-serif;cursor:pointer;padding:0;}
.kcp__lbx:hover{border-color:var(--accent);color:var(--accent);}
.kcp__lbnav{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;background:var(--raise);border:1px solid var(--border);color:var(--text);font:20px/1 Arial,sans-serif;cursor:pointer;padding:0;}
.kcp__lbnav.prev{left:-58px;}
.kcp__lbnav.next{right:-58px;}
.kcp__lbnav:hover{border-color:var(--accent);color:var(--accent);}
.kcp__lbcap{position:absolute;left:0;right:0;bottom:-38px;text-align:center;color:var(--muted);font-size:14px;}
@media (max-width:640px){.kcp__lb{padding:56px 14px;}.kcp__lbnav.prev{left:2px;}.kcp__lbnav.next{right:2px;}.kcp__more{grid-template-columns:1fr;}.kcp__letter{max-width:100%;}}

.kcp__gal{margin-top:18px;}
.kcp__galhead{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:12px;}
.kcp__galtabs{display:inline-flex;gap:4px;background:var(--soft);border:1px solid var(--border);border-radius:9px;padding:4px;}
.kcp__galtab{padding:7px 18px;border:none;background:none;color:var(--muted);font-family:'Manrope',Arial,sans-serif;font-weight:600;font-size:13px;line-height:1;letter-spacing:1.2px;border-radius:6px;cursor:pointer;transition:.2s;}
.kcp__galtab:hover{color:var(--text);}
.kcp__galtab.is-on{background:var(--accent);color:#fff;}
.kcp__galnote{margin-top:14px;font-size:13px;line-height:1.5;color:var(--muted);letter-spacing:.3px;}
.kcp__galnav{display:flex;gap:8px;flex-shrink:0;}
.kcp__galarrow{width:40px;height:40px;border:1px solid var(--border);background:var(--raise);border-radius:4px;color:var(--text);font:20px/1 Arial,sans-serif;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.2s;padding:0;}
.kcp__galarrow:hover{border-color:var(--accent);color:var(--accent);}
.kcp__galarrow:disabled{opacity:.3;cursor:default;border-color:var(--border);color:var(--text);}
.kcp__galtrack{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:4px;}
.kcp__galtrack::-webkit-scrollbar{display:none;}
.kcp__galcard{flex:0 0 calc((100% - 24px)/3);scroll-snap-align:start;display:block;padding:0;margin:0;border:1px solid var(--border);background:#0f0f11;border-radius:10px;overflow:hidden;cursor:zoom-in;aspect-ratio:3/4;transition:.2s;font:inherit;}
.kcp__galcard:hover{border-color:var(--accent);}
.kcp__galcard img{width:100%;height:100%;object-fit:contain;display:block;}
@media (max-width:820px){.kcp__galcard{flex:0 0 calc((100% - 12px)/2);}}
@media (max-width:480px){.kcp__galcard{flex:0 0 76%;}.kcp__galnav{display:none;}.kcp__galhead{margin-bottom:10px;}}
</style>
<script>
(function(){
  var C=window.KORS_CASE||{}; var IMG=C.images||{}, VID=C.videos||{};
  var ALT={cover:'Завод «Вистекс» - производство нетканых полотен, кадр из фильма KORS Production',email:'Письмо для рассылки коммерческих предложений завода «Вистекс»: логотип, короткий текст и превью ролика о производстве с кнопкой воспроизведения',label1:'Концепт дизайна этикетки для продукции завода «Вистекс»',label2:'Концепт дизайна протирочных салфеток для завода «Вистекс»',siteSoon:'Макет сайта завода «Вистекс»'};
  document.querySelectorAll('.kcp [data-video]').forEach(function(el){
    var id=VID[el.getAttribute('data-video')];
    if(id){ el.classList.add('kcp--filled'); el.innerHTML='<iframe src="https://kinescope.io/embed/'+id+'" allow="autoplay; fullscreen; encrypted-media; picture-in-picture" allowfullscreen frameborder="0"></iframe>'; el.removeAttribute('data-img'); }
  });
  document.querySelectorAll('.kcp [data-img]').forEach(function(el){
    var url=IMG[el.getAttribute('data-img')];
    if(url){ el.classList.add('kcp--filled'); el.innerHTML='<img src="'+url+'" alt="'+(ALT[el.getAttribute('data-img')]||'')+'" loading="lazy">'; }
  });
})();
</script>

<script>
(function(){
  var root=document.querySelector('.kcp'); if(!root) return;
  var lb=document.createElement('div'); lb.className='kcp__lb';
  lb.innerHTML='<div class="kcp__lbbd"></div><div class="kcp__lbbox"><button class="kcp__lbx" type="button" aria-label="Закрыть">×</button><button class="kcp__lbnav prev" type="button" aria-label="Предыдущий кадр">‹</button><img alt=""><button class="kcp__lbnav next" type="button" aria-label="Следующий кадр">›</button><div class="kcp__lbcap"></div></div>';
  document.body.appendChild(lb);
  var pic=lb.querySelector('.kcp__lbbox img'), cap=lb.querySelector('.kcp__lbcap');
  var prev=lb.querySelector('.prev'), next=lb.querySelector('.next');
  var list=[], idx=0;
  function norm(el){ return {src: el.currentSrc||el.src, alt: el.alt||''}; }
  function collect(){ list=[].slice.call(root.querySelectorAll('.kcp--filled img, .kcp__letter img')).map(norm); }
  function show(){ var it=list[idx]; if(!it) return; pic.src=it.src; pic.alt=it.alt||''; var multi=list.length>1; cap.textContent=multi?(idx+1)+' из '+list.length:''; prev.style.display=multi?'':'none'; next.style.display=multi?'':'none'; }
  function open(i){ idx=i; show(); lb.classList.add('open'); document.documentElement.style.overflow='hidden'; }
  function close(){ lb.classList.remove('open'); pic.src=''; document.documentElement.style.overflow=''; }
  function step(d){ if(!list.length) return; idx=(idx+d+list.length)%list.length; show(); }
  root.addEventListener('click',function(e){ var t=e.target; if(!t || t.tagName!=='IMG') return; if(!t.closest('.kcp--filled, .kcp__letter')) return; var els=[].slice.call(root.querySelectorAll('.kcp--filled img, .kcp__letter img')); var i=els.indexOf(t); if(i<0) return; e.preventDefault(); collect(); open(i); });
  window.kcpLightbox={ open:function(arr,i,lbl){ if(!arr||!arr.length) return; list=arr.map(function(u,k){ return {src:u, alt:(lbl||'Кадр')+' '+(k+1)+' из '+arr.length}; }); open(i||0); } };
  lb.querySelector('.kcp__lbbd').addEventListener('click',close);
  lb.querySelector('.kcp__lbx').addEventListener('click',close);
  prev.addEventListener('click',function(){ step(-1); });
  next.addEventListener('click',function(){ step(1); });
  document.addEventListener('keydown',function(e){ if(!lb.classList.contains('open')) return; if(e.key==='Escape') close(); else if(e.key==='ArrowLeft') step(-1); else if(e.key==='ArrowRight') step(1); });
})();
</script>

<script>
(function(){
  var C=window.KORS_CASE||{};
  var ALT=['Концепт упаковки протирочных салфеток «ПылеSOS» для завода «Вистекс»: коты-супергерои на синей этикетке','Концепт упаковки вискозных салфеток «Вистекс» 30х40 см: енот в лабораторном халате на синей этикетке','Концепт упаковки вискозных салфеток «Вистекс» 30х40 см: салфетка-супергерой против пятен на фиолетовой этикетке','Концепт упаковки вискозных салфеток «Вистекс» 30х40 см: салфетки-персонажи на кухне на синей этикетке'];
  function makeGallery(gal, SETS, noteFn, altFn, label, fbSel){
    if(!gal || !SETS.length) return;
    if(fbSel){ var ph=gal.parentNode.querySelector(fbSel); if(ph) ph.style.display='none'; }
    var tabs=SETS.length>1 ? '<div class="kcp__galtabs" role="tablist">'+SETS.map(function(s,i){return '<button class="kcp__galtab'+(i===0?' is-on':'')+'" data-lang="'+s.id+'" role="tab" aria-selected="'+(i===0)+'">'+s.label+'</button>';}).join('')+'</div>' : '<span></span>';
    gal.innerHTML='<div class="kcp__galhead">'+tabs+'<div class="kcp__galnav"><button class="kcp__galarrow" type="button" data-gprev aria-label="Назад">&#8249;</button><button class="kcp__galarrow" type="button" data-gnext aria-label="Вперёд">&#8250;</button></div></div><div class="kcp__galtrack"></div><div class="kcp__galnote"></div>';
    var track=gal.querySelector('.kcp__galtrack'), note=gal.querySelector('.kcp__galnote');
    var gp=gal.querySelector('[data-gprev]'), gn=gal.querySelector('[data-gnext]');
    var cur=SETS[0];
    function fill(){
      var h='';
      for(var i=0;i<cur.items.length;i++){ h+='<button class="kcp__galcard" type="button" data-gi="'+i+'" aria-label="'+label+' '+(i+1)+' из '+cur.items.length+'"><img src="'+cur.items[i]+'" alt="'+altFn(i,cur.items.length,cur)+'" loading="lazy"></button>'; }
      track.innerHTML=h; track.scrollLeft=0; note.textContent=noteFn(SETS,cur); setTimeout(upd,60);
    }
    function step(){ var c=track.querySelector('.kcp__galcard'); return c?c.offsetWidth+12:320; }
    function upd(){ gp.disabled=track.scrollLeft<8; gn.disabled=track.scrollLeft+track.clientWidth>=track.scrollWidth-8; }
    gp.addEventListener('click',function(){ track.scrollLeft-=step(); });
    gn.addEventListener('click',function(){ track.scrollLeft+=step(); });
    track.addEventListener('scroll',upd); window.addEventListener('resize',upd);
    track.addEventListener('click',function(e){ var b=e.target&&e.target.closest?e.target.closest('.kcp__galcard'):null; if(!b) return; if(window.kcpLightbox) window.kcpLightbox.open(cur.items, parseInt(b.getAttribute('data-gi'),10)||0, label); });
    fill();
  }
  makeGallery(document.querySelector('.kcp [data-labelgal]'),
    [{id:'pack',label:'Упаковка',items:C.labels||[]}].filter(function(x){return x.items&&x.items.length;}),
    function(){ return 'Концепты упаковки протирочных салфеток. Нажмите на кадр, чтобы рассмотреть'; },
    function(i){ return ALT[i]||('Концепт упаковки салфеток «Вистекс» '+(i+1)); },
    'Концепт', '.kcp__ph--grid');
})();
</script>

<script>
/* Сторож картинок.
   Иногда запрос картинки к CDN зависает: ответа нет, ошибки нет, элемент img остаётся
   пустым навсегда, а слот с заданными пропорциями держит пустое место во весь экран.
   Переназначить src такому элементу бесполезно - он уже мёртвый; помогает только
   НОВЫЙ элемент img. Поэтому раз в 10 с (до трёх попыток) создаём свежую картинку
   и подменяем ею зависшую, когда та загрузится.
   Слот прячем только если сервер явно ответил ошибкой: медленную картинку прятать
   нельзя, она может прийти позже. Пока вкладка в фоне, отсчёт не ведём - там браузер
   тормозит загрузку сам, и это не повод считать картинку потерянной. */
(function(){
  function ready(im){ return im && im.complete && im.naturalWidth > 0; }
  function watch(box){
    var first = box.querySelector("img");
    if(!first) return;
    first.addEventListener("error", function(){ box.style.display = "none"; });
    var tries = 0;
    function tick(){
      var cur = box.querySelector("img");
      if(ready(cur) || tries >= 3) return;
      if(document.hidden){ setTimeout(tick, 5000); return; }
      tries++;
      var url = ((cur && cur.getAttribute("src")) || "").split("?")[0];
      if(url){
        var fresh = new Image();
        fresh.alt = (cur && cur.alt) || "";
        fresh.onload = function(){ if(cur && cur.parentNode === box && !ready(cur)) box.replaceChild(fresh, cur); };
        fresh.onerror = function(){ box.style.display = "none"; };
        fresh.src = url + "?kr=" + Date.now();
      }
      setTimeout(tick, 10000);
    }
    setTimeout(tick, 5000);
  }
  var slots = document.querySelectorAll(".kcp [data-img], .step-media");
  for(var i = 0; i < slots.length; i++){ watch(slots[i]); }
})();
</script>


<script>
/* KORS - постер под ролик Kinescope.
   Если плеер не загрузился (сбой Кинескопа, блокировка, медленная сеть),
   в слоте остаётся кадр из ролика, а не пустое место.
   Постер кладётся фоном контейнера, iframe лежит поверх.
   Слоты, у которых фон уже задан своим постером, не трогаем. */
(function(){
  function put(f){
    var box = f.parentElement;
    if(!box || box.getAttribute("data-kposter")) return;
    var src = f.getAttribute("src") || f.getAttribute("data-src") || "";
    var id = (src.match(/embed\/([A-Za-z0-9]+)/) || [])[1];
    if(!id) return;
    box.setAttribute("data-kposter", "1");
    if(getComputedStyle(box).backgroundImage !== "none") return;
    box.style.backgroundColor = "#141416";
    box.style.backgroundImage = "url(https://kinescope.io/" + id + "/poster.jpg)";
    box.style.backgroundSize = "cover";
    box.style.backgroundPosition = "center";
    box.style.backgroundRepeat = "no-repeat";
  }
  function scan(){
    var f = document.querySelectorAll('iframe[src*="kinescope"], iframe[data-src*="kinescope"]');
    for(var i = 0; i < f.length; i++) put(f[i]);
  }
  scan();
  setTimeout(scan, 1000); setTimeout(scan, 3000); setTimeout(scan, 8000);
  if(window.MutationObserver){
    var mo = new MutationObserver(scan);
    mo.observe(document.documentElement, {childList:true, subtree:true});
    setTimeout(function(){ mo.disconnect(); }, 30000);
  }
})();
</script>

#16 - 2026-08-31 - галерея работ главной (desktop 2663623901 + mobile 2663636801) ДО добавления трёх экспертных роликов

Копии перед добавлением роликов: Как правильно писать нам правки, Как подготовиться до старта проекта, Подготовка к съёмочному дню.

rec2663623901 (22434 символов)

<!-- ===== KORS · НАШИ РАБОТЫ · ДЕСКТОП · блок T123. Показывать ТОЛЬКО на компьютере. ===== -->
<div class="kgald">
  <div class="kgald__head">
    <div class="kgald__eyebrow">- НАШИ РАБОТЫ</div>
    <h2 class="kgald__title">460+ проектов: найдите свою отрасль.</h2>
    <div class="kgald__sub">Сфера, формат и срок по каждому проекту. Нажми «Смотреть полное видео» - откроется на весь экран.</div>
  </div>
  <div class="kgald__filter" id="kgaldFilter" aria-label="Фильтр работ по услугам">
      <button type="button" class="kgald__fbtn is-active" data-f="all">Все</button>
      <button type="button" class="kgald__fbtn" data-f="video">Видео</button>
      <button type="button" class="kgald__fbtn" data-f="site">Сайты</button>
      <button type="button" class="kgald__fbtn" data-f="presentation">Презентации</button>
      <button type="button" class="kgald__fbtn" data-f="brand">Фирменный стиль</button>
      <button type="button" class="kgald__fbtn" data-f="ads">Реклама</button>
    </div>
    <div class="kgald__grid" id="kgaldTop"></div>
  <div class="kgald__hidden" id="kgaldHidden"><div class="kgald__grid" id="kgaldRest"></div></div>
  <div class="kgald__empty" id="kgaldEmpty">По этой услуге в подборке пока нет проектов.</div>
    <div class="kgald__morewrap"><button class="kgald__more" id="kgaldMore"><span class="kgald__mtext">Смотреть все работы</span> <span class="kgald__count">+9</span></button></div>
    <div class="kgald__group" id="kgaldExpWrap">
    <div class="kgald__ghead">
      <div class="kgald__eyebrow">- ГОВОРИМ О ВИДЕО</div>
      <h3 class="kgald__gtitle">Экспертные ролики студии</h3>
      <div class="kgald__gsub">Наш собственный контент, не клиентские заказы: как устроен продакшен, из чего складывается цена и что делает видео рабочим инструментом.</div>
    </div>
    <div class="kgald__grid" id="kgaldExp"></div>
  </div>
  <div class="kgald__lb" id="kgaldLb"><div class="kgald__lbbd"></div><div class="kgald__lbbox"><button class="kgald__lbx" id="kgaldLbx">×</button><div class="kgald__lbframe"><iframe id="kgaldLbIframe" allow="autoplay; fullscreen; encrypted-media; picture-in-picture" allowfullscreen></iframe></div></div></div>
</div>
<style>
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Unbounded:wght@400;600;700;800&display=swap');
.kgald{--bg:#0C0C0E;--raise:#141416;--card:#1B1B1F;--border:#2A2A2E;--text:#F5F3EF;--muted:#9A9A9A;--faint:#6a6a6e;--accent:#6D5DFB;--glow:rgba(109,93,251,.14);
  box-sizing:border-box;background:var(--bg);color:var(--text);font-family:'Manrope',Arial,sans-serif;-webkit-font-smoothing:antialiased;padding:80px 5vw 90px;}
.kgald *{box-sizing:border-box;margin:0;padding:0;}
.kgald__head{max-width:1240px;margin:0 auto 44px;text-align:center;}
.kgald__eyebrow{font-family:'Unbounded';font-size:12px;letter-spacing:.14em;color:var(--accent);margin-bottom:14px;}
.kgald__title{font-family:'Unbounded';font-weight:700;font-size:clamp(30px,3.4vw,48px);letter-spacing:-.02em;margin-bottom:14px;}
.kgald__sub{color:var(--muted);font-size:16px;line-height:1.5;max-width:560px;margin:0 auto;}
.kgald__grid{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.kgald__card{background:var(--raise);border:1px solid var(--border);border-radius:16px;overflow:hidden;transition:.25s;display:flex;flex-direction:column;}
.kgald__card:hover{border-color:rgba(109,93,251,.5);transform:translateY(-3px);box-shadow:0 16px 40px rgba(0,0,0,.4);}
.kgald__video{position:relative;width:100%;aspect-ratio:16/9;background:#000;}
.kgald__video iframe{position:absolute;inset:0;width:100%;height:100%;border:none;pointer-events:none;}
.kgald__body{padding:20px 20px 22px;display:flex;flex-direction:column;flex:1;}
.kgald__name{font-family:'Unbounded';font-weight:700;font-size:20px;margin-bottom:10px;letter-spacing:-.01em;}
.kgald__meta{display:flex;flex-direction:column;gap:6px;margin-bottom:18px;}
.kgald__row{font-size:14px;color:var(--muted);line-height:1.4;}
.kgald__row b{color:var(--text);font-weight:600;}
.kgald__full--nolink{cursor:default}
.kgald__full{margin-top:auto;display:inline-flex;align-items:center;gap:8px;align-self:flex-start;background:transparent;border:1px solid var(--border);color:var(--text);font-family:'Manrope';font-weight:700;font-size:14px;padding:12px 18px;border-radius:9px;cursor:pointer;transition:.2s;}
.kgald__full:hover{border-color:var(--accent);color:var(--accent);}
.kgald__full svg{width:15px;height:15px;flex:none;}
.kgald__hidden{max-width:1240px;margin:0 auto;max-height:0;overflow:hidden;opacity:0;transition:max-height .55s ease,opacity .4s ease,margin-top .4s ease;margin-top:0;}
.kgald__hidden.open{opacity:1;margin-top:22px;}
.kgald__morewrap{text-align:center;margin-top:40px;}
.kgald__more{display:inline-flex;align-items:center;gap:10px;background:var(--accent);color:#fff;font-family:'Manrope';font-weight:700;font-size:15px;padding:16px 30px;border-radius:9px;border:none;cursor:pointer;transition:.25s;}
.kgald__more:hover{transform:translateY(-2px);box-shadow:0 10px 30px var(--glow);}
.kgald__count{font-family:'Unbounded';font-size:12px;background:rgba(0,0,0,.18);padding:3px 8px;border-radius:20px;}
.kgald__more.is-open .kgald__count{display:none;}
.kgald__lb{position:fixed;inset:0;z-index:99999;display:none;align-items:center;justify-content:center;padding:40px;}
.kgald__lb.open{display:flex;}
.kgald__lbbd{position:absolute;inset:0;background:rgba(4,4,6,.9);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);}
.kgald__lbbox{position:relative;width:min(1100px,100%);}
.kgald__lbframe{position:relative;width:100%;aspect-ratio:16/9;background:#000;border-radius:12px;overflow:hidden;border:1px solid var(--border);}
.kgald__lbframe iframe{position:absolute;inset:0;width:100%;height:100%;border:none;}
.kgald__lbx{position:absolute;top:-46px;right:0;width:38px;height:38px;border-radius:9px;background:var(--raise);border:1px solid var(--border);color:var(--text);font-size:22px;line-height:1;cursor:pointer;}
.kgald__lbx:hover{border-color:var(--accent);color:var(--accent);}
.kgald__filter{max-width:1240px;margin:0 auto 26px;display:flex;flex-wrap:nowrap;gap:8px;justify-content:center;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;padding-bottom:2px;}
.kgald__filter::-webkit-scrollbar{display:none;}
.kgald__fbtn{flex:none;background:transparent;border:1px solid var(--border);color:var(--muted);font-family:'Manrope',Arial,sans-serif;font-weight:600;font-size:13px;padding:9px 16px;border-radius:20px;cursor:pointer;transition:.2s;white-space:nowrap;}
.kgald__fbtn:hover{border-color:rgba(109,93,251,.5);color:var(--text);}
.kgald__fbtn.is-active{background:var(--accent);border-color:var(--accent);color:#fff;}
.kgald__tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px;}
.kgald__tag{font-family:'Manrope',Arial,sans-serif;font-weight:600;font-size:9px;line-height:1;text-transform:uppercase;letter-spacing:.14em;color:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.22);border-radius:4px;padding:5px 8px;white-space:nowrap;}
.kgald__desc{font-size:12px;line-height:1.5;color:var(--muted);margin-bottom:14px;}
.kgald__card.is-off{opacity:0;transform:translateY(6px);}
.kgald__empty{max-width:1240px;margin:0 auto;text-align:center;color:var(--muted);font-size:15px;padding:34px 0;display:none;}
.kgald__empty.on{display:block;}
@media (max-width:900px){ .kgald__grid{grid-template-columns:repeat(2,1fr);} .kgald__filter{justify-content:flex-start;} }
@media (max-width:480px){ .kgald{display:none;} }
#rec2663623901 .kgald__count{color:#fff;background:rgba(0,0,0,.32);}
/* KORS: экспертные ролики вынесены в отдельную группу со своим заголовком, поэтому плашка на карточке больше не нужна. */
.kgald__group{margin-top:88px;}
.kgald__ghead{max-width:1240px;margin:0 auto 34px;text-align:center;}
.kgald__gtitle{font-family:'Unbounded';font-weight:700;font-size:clamp(24px,2.4vw,34px);letter-spacing:-.02em;margin-bottom:12px;}
.kgald__gsub{color:var(--muted);font-size:15px;line-height:1.5;max-width:560px;margin:0 auto;}
</style>
<script>
(function(){
  var SLUG={'Видео':'video','Фотосъёмка':'photo','Сайт':'site','Презентация':'presentation','Фирменный стиль':'brand','Реклама':'ads','Дизайн':'design','Трансляция':'live','Продюсирование':'producing'};
  var works=[
    {id:'pd95FJSRFhF27W4YX4ioJJ', full:'3ZsxHkdEuHUubxSAQZDRyG', name:'Одоевские консервы - фильм о заводе', tags:['Видео','Фирменный стиль'], desc:'Показали производство изнутри: цеха, линии, контроль качества. Видео работает на сайте, в переговорах с сетями и на выставках.', alt:'Фильм о заводе Одоевские консервы: цеха, линии и контроль качества'},
    {id:'xgBCJrU3Fy9CtKDXR9R23S', full:'0GfobL6RnAzhPeiopXjNHS', name:'Invoicebox - о компании', sphere:'финансовые технологии (FinTech)', format:'презентационный ролик о компании', term:'6 дней', tags:['Видео','Реклама'], desc:'Имиджевый ролик о платёжном сервисе: чем занимается компания и какие задачи бизнеса закрывает.', alt:'Имиджевый ролик о платёжном сервисе Invoicebox'},
    {id:'iPcFsLF3eYfDYTauhcgjZj', full:'fv7FAnLfbLaDaNJLtSQ74H', name:'Вистекс', sphere:'производство, предприятие', format:'презентационный ролик', term:'15 дней', tags:['Видео','Дизайн'], desc:'Ролик о заводе: восемь направлений производства за три минуты. Дизайн email-письма со встроенным видео для коммерческих предложений.', alt:'Видео о производстве для завода Вистекс'},
    {id:'bZ8JyozhtKdSDiy5xjLoVr', full:'caSE37WujsGB6usgZewyUt', name:'Ресторан Rumi / «ЗНАТЬ»', sphere:'ресторанный бизнес, мероприятия', format:'видео-отчёт о мероприятии', term:'2 дня', tags:['Видео','Трансляция','Презентация'], desc:'Съёмка мероприятий, прямая трансляция и презентации для ресторана.', alt:'Съёмка мероприятия и трансляция для ресторана Rumi'},
    {id:'uiVqp8dWpzNoBt2GweBLs9', full:'vF4hbgW4Umo6U4dDNUFvwv', name:'Новая Формация', sphere:'организация, бизнес', format:'презентационный ролик', term:'4 дня', tags:['Видео','Дизайн'], desc:'Презентационный ролик, афиша и ведение контента.', alt:'Презентационный ролик для проекта Новая Формация'},
    {id:'gHMF2zBsAdSdbcEH9wSZKh', full:'kfd6wYQdCh72VpRPC74Mfs', name:'Редакция ЭКСМО', sphere:'издательский бизнес', format:'съёмка трейлера по сюжету книги', term:'9 дней', tags:['Видео','Дизайн'], desc:'Трейлер книги и афиша для издательства.', alt:'Книжный трейлер для издательства Редакция ЭКСМО'},
    {id:'sRSLqBbjkRWyn31BrY6iny', full:'mZiwnH9uZAdc15hhRsqPvB', name:'Одоевские консервы - термостабильные начинки', tags:['Видео'], desc:'Продуктовый ролик о линейке: как начинки ведут себя при выпечке и что это даёт производителю.', alt:'Продуктовый ролик о термостабильных начинках Одоевские консервы'},
    {id:'uqJ79iyVPcqN1ZtTtjnkAv', full:'gznTZhdFQeZEKZnidVaTbk', name:'GosObmen', sphere:'финансовые услуги', format:'рекламный ролик', term:'3 дня', tags:['Видео','Сайт','Дизайн'], desc:'Рекламные ролики, тексты и сайт. Собрали скрипт для отдела продаж.', alt:'Рекламный ролик и сайт для сервиса Гособмен'},
    {id:'35XkXms5VN3RLJcYsgWsnD', full:'2FXfjS6hYEvLkWNKUveoBx', name:'Invoicebox - оплата в белорусских рублях', tags:['Видео'], desc:'Объясняющий ролик о выходе платёжного сервиса на рынок Беларуси: как принимать оплату в белорусских рублях.', alt:'Ролик об оплате в белорусских рублях в платёжном сервисе Invoicebox'},
    {id:'5zMvPKfeuDf9N7h7P8KuVe', full:'ePXSSA9qFiEgA5WYRdd4FP', name:'Алтай Серикбай - съёмки для личного бренда', tags:['Видео'], desc:'Снимаем контент для эксперта по личностному развитию: студийные выпуски, разговорные форматы, съёмки на ретритах. За время работы - больше десяти роликов.', alt:'Съёмки для личного бренда эксперта по личностному развитию Алтая Серикбая'},
    {id:'bKeihzPbnEbXZarkMcYQZj', full:'6ivtiXKAcQj4dVJN8H1YWs', name:'MediaLive - отчётный ролик с выставки', tags:['Видео','Реклама'], desc:'Сняли отчётное видео с отраслевого события. Организаторы используют его на сайте и в рекламе следующего сезона.', alt:'Отчётный ролик с отраслевой выставки для MediaLive'},
    {id:'8QbWRspZgkLTicEiQpp9su', full:'8QbWRspZgkLTicEiQpp9su', name:'STROBBS - промо зимней коллекции', tags:['Видео','Реклама'], desc:'Проморолик показа новой зимней коллекции российского бренда обуви и одежды.', alt:'Проморолик показа зимней коллекции бренда обуви и одежды STROBBS'},
    {id:'88SCanh4aPU83UFBmThiVa', full:'mJqjXaKQBrdbvirxUTHLLh', name:'Rockstar - клип «На дне»', tags:['Видео'], desc:'Музыкальный клип для артиста.', alt:'Музыкальный клип На дне для артиста Rockstar'},
    {id:'wLtMKZCpf75eYEWMXPEPZY', full:'7Kxs8xzVfCDLtyuG5puNN1', name:'Рокстар', sphere:'медиа', format:'музыкальный клип', term:'12 дней', tags:['Видео','Дизайн'], desc:'Три клипа и обложки для музыкального проекта.', alt:'Музыкальные клипы для проекта Рокстар'},
    {id:'qAV5wXg5oHKKcY6tbgysZd', full:'okapERMYWfdoGagPRmo7uC', name:'Rockstar - клип «Самая грустная песня»', tags:['Видео'], desc:'Первый клип, который мы сняли для артиста.', alt:'Музыкальный клип Самая грустная песня для артиста Rockstar'},
    {id:'vNYi5w7HiQevkdBbPmQ3CR', full:'vNYi5w7HiQevkdBbPmQ3CR', name:'Ювелирный лофт GOLD - ролик о компании', tags:['Видео'], desc:'Рассказали о компании и о том, чем она занимается.', alt:'Ролик о компании для ювелирного лофта GOLD'},
    {id:'6JcPdvqUchXCmzscbTqaos', full:'sRyZwPm3BS9CVspVi2sLx3', name:'Одоевские консервы - нетермостабильные начинки', tags:['Видео'], desc:'Второй ролик линейки: назначение, состав, применение в готовых изделиях.', alt:'Продуктовый ролик о нетермостабильных начинках Одоевские консервы'},
    {id:'8YSeQnzXxmpkmo7uNNcLrF', full:'43yfJckoZggrVouaMMK4zt', name:'YouTube-шоу', sphere:'медиа', format:'съёмка выпусков', term:'14 дней', tags:['Видео','Продюсирование','Реклама'], desc:'Продюсирование и режиссура шоу: съёмка выпусков и рекламное сопровождение.', alt:'Съёмка выпусков YouTube-шоу'},
    {id:'7akHJzKdcoSrPiHtRbRBqk', full:'7akHJzKdcoSrPiHtRbRBqk', name:'Invoicebox - интернет-магазины за пару кликов', tags:['Видео'], desc:'Продуктовый ролик о конструкторе интернет-магазинов внутри сервиса.', alt:'Ролик о конструкторе интернет-магазинов в сервисе Invoicebox'},
    {id:'b66cpVCFFFVycfDvLFXFR3', full:'b66cpVCFFFVycfDvLFXFR3', name:'Invoicebox - как выставить счёт за пару кликов', tags:['Видео'], desc:'Видеоинструкция для пользователей сервиса: выставление счёта по шагам.', alt:'Видеоинструкция по выставлению счёта в сервисе Invoicebox'},
    {id:'eCGHEdUFdSyEjCBXxcsUSC', full:'geGWgessLoxkUKdQ4d4e1q', name:'Шоурил KORS Production', sphere:'создание контента', format:'актуальные работы', term:'2025-й год', tags:['Видео','Продюсирование'], desc:'Шоурил студии: съёмки на производствах и коммерческие проекты разных лет.', alt:'Актуальные работы студии KORS Production'},
    {id:'dsqVruz3QkCKQESGiTUsVR', full:'dsqVruz3QkCKQESGiTUsVR', name:'Твой продакшен тебя обманывает', tags:['Видео'], kors:true, alt:'Экспертное видео KORS: почему продакшен может обманывать заказчика'},
    {id:'uittTC7uyz9hv4HDirTBAG', full:'uittTC7uyz9hv4HDirTBAG', name:'Видео - это не украшение для бизнеса', tags:['Видео'], kors:true, alt:'Экспертное видео KORS о том, зачем бизнесу видео'},
    {id:'aG3Qkc4VfoCcgtJLz6ivbE', full:'aG3Qkc4VfoCcgtJLz6ivbE', name:'Как сэкономить на видеоролике', tags:['Видео'], kors:true, alt:'Экспертное видео KORS о том, как сэкономить на съёмке ролика'},
    {id:'4pzsMBSzheH3Sarx4UFHMd', full:'4pzsMBSzheH3Sarx4UFHMd', name:'Как сделать продающее видео', tags:['Видео'], kors:true, alt:'Экспертное видео KORS о том, как сделать продающее видео'}
  ];
  var FS='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="5 3 19 12 5 21 5 3"/></svg>';
  var lb=document.getElementById('kgaldLb'), lbf=document.getElementById('kgaldLbIframe');
  function openLb(id){ lbf.src='https://kinescope.io/embed/'+id+'?autoplay=true'; lb.classList.add('open'); }
  function closeLb(){ lb.classList.remove('open'); lbf.src=''; }
  document.getElementById('kgaldLbx').addEventListener('click',closeLb);
  lb.querySelector('.kgald__lbbd').addEventListener('click',closeLb);
  document.addEventListener('keydown',function(e){ if((e.key==='Escape'||e.keyCode===27)&&lb.classList.contains('open'))closeLb(); });
  function makeCard(w, defer){
    var card=document.createElement('div'); card.className='kgald__card';
    card.setAttribute('data-tags',(w.tags||[]).map(function(t){return SLUG[t]||'';}).join(' '));
    var ttl=(w.alt||w.name).replace(/"/g,'&quot;');
    var q='?autoplay=true&muted=true&loop=true&controls=false&playsInline=true&background=true';
    var ift= defer ? '<iframe data-src="https://kinescope.io/embed/'+w.id+q+'" title="'+ttl+'" aria-label="'+ttl+'" allow="autoplay; fullscreen; encrypted-media; picture-in-picture" allowfullscreen></iframe>'
                   : '<iframe loading="lazy" src="https://kinescope.io/embed/'+w.id+q+'" title="'+ttl+'" aria-label="'+ttl+'" allow="autoplay; fullscreen; encrypted-media; picture-in-picture" allowfullscreen></iframe>';
    var tagsHtml=(w.tags&&w.tags.length)?'<div class="kgald__tags">'+w.tags.map(function(t){return '<span class="kgald__tag">'+t+'</span>';}).join('')+'</div>':'';
    var descHtml=w.desc?'<p class="kgald__desc">'+w.desc+'</p>':'';
    var metaHtml='';
    if(w.sphere||w.format||w.term){ metaHtml='<div class="kgald__meta">'+(w.sphere?'<div class="kgald__row"><b>Сфера:</b> '+w.sphere+'</div>':'')+(w.format?'<div class="kgald__row"><b>Формат:</b> '+w.format+'</div>':'')+(w.term?'<div class="kgald__row"><b>Срок:</b> '+w.term+'</div>':'')+'</div>'; }
    card.innerHTML='<div class="kgald__video">'+ift+'</div><div class="kgald__body"><h3 class="kgald__name">'+w.name+'</h3>'+tagsHtml+descHtml+metaHtml+'<button class="kgald__full'+(w.full?'':' kgald__full--nolink')+'" '+(w.full?'':'aria-disabled="true"')+'>'+FS+'Смотреть полное видео</button></div>';
    if(w.full){ card.querySelector('.kgald__full').addEventListener('click',function(){ openLb(w.full); }); }
    return card;
  }
  var top=document.getElementById('kgaldTop'),rest=document.getElementById('kgaldRest'),box=document.getElementById('kgaldHidden'),more=document.getElementById('kgaldMore');
  var exp=document.getElementById('kgaldExp'), expwrap=document.getElementById('kgaldExpWrap');
  if(!top||!rest||!box||!more)return;
  /* KORS: превью грузятся не пачкой. Плеер получает src только когда карточка подходит к видимой области (запас 300px). Пока карточка спрятана под кнопкой (max-height:0) или скрыта фильтром (display:none), она не пересекается с экраном и ролик не стартует. */
  var io=('IntersectionObserver' in window)?new IntersectionObserver(function(es,ob){
    es.forEach(function(e){
      if(!e.isIntersecting) return;
      var f=e.target.querySelector('iframe[data-src]');
      if(f){ f.src=f.getAttribute('data-src'); f.removeAttribute('data-src'); }
      ob.unobserve(e.target);
    });
  },{root:null,rootMargin:'300px 0px',threshold:0.01}):null;
  function watch(c){
    if(io){ io.observe(c); return; }
    var f=c.querySelector('iframe[data-src]');
    if(f){ f.src=f.getAttribute('data-src'); f.removeAttribute('data-src'); }
  }
  function put(grid,w){ var c=makeCard(w,true); grid.appendChild(c); watch(c); }
  /* KORS: порог показа - 12 карточек, остальные под кнопкой. Экспертные ролики студии идут отдельной группой ниже, флаг kors в данных теперь отвечает за группировку. */
  var TOPN=12;
  var main=works.filter(function(w){return !w.kors;});
  var expert=works.filter(function(w){return !!w.kors;});
  main.slice(0,TOPN).forEach(function(w){put(top,w);});
  main.slice(TOPN).forEach(function(w){put(rest,w);});
  if(exp){ expert.forEach(function(w){put(exp,w);}); }
  var cntEl=more.querySelector('.kgald__count'); if(cntEl){ cntEl.textContent='+'+Math.max(0,main.length-TOPN); }
  var loaded=false, mt=more.querySelector('.kgald__mtext');
  more.addEventListener('click',function(){
    if(!box.classList.contains('open')){
      box.classList.add('open'); box.style.maxHeight=box.scrollHeight+'px';
      setTimeout(function(){if(box.classList.contains('open'))box.style.maxHeight='none';},600);
      more.classList.add('is-open'); mt.textContent='Свернуть';
    }else{
      box.style.maxHeight=box.scrollHeight+'px';
      requestAnimationFrame(function(){box.style.maxHeight='0px';box.classList.remove('open');});
      more.classList.remove('is-open'); mt.textContent='Смотреть все работы';
    }
  });
  window.addEventListener('resize',function(){if(box.classList.contains('open'))box.style.maxHeight='none';});

  /* фильтр по услугам: чистый JS, отбор по data-tags */
  var fwrap=document.getElementById('kgaldFilter'), empty=document.getElementById('kgaldEmpty'), morewrap=more.parentNode;
  function loadRest(){ /* KORS: пачкой больше не грузим - src ставит IntersectionObserver по мере прокрутки. */ }
  function setBox(open){
    if(open){ loadRest(); box.classList.add('open'); box.style.maxHeight='none'; }
    else { box.classList.remove('open'); box.style.maxHeight='0px'; }
  }
  if(fwrap){
    fwrap.addEventListener('click',function(e){
      var b=e.target.closest?e.target.closest('.kgald__fbtn'):null;
      if(!b) return;
      var f=b.getAttribute('data-f'), all=(f==='all'), shown=0, restShown=0, expShown=0;
      fwrap.querySelectorAll('.kgald__fbtn').forEach(function(x){ x.classList.toggle('is-active', x===b); });
      [top,rest,exp].filter(Boolean).forEach(function(grid){
        grid.querySelectorAll('.kgald__card').forEach(function(c){
          var m = all || ((' '+(c.getAttribute('data-tags')||'')+' ').indexOf(' '+f+' ')>-1);
          if(m){
            shown++; if(grid===rest) restShown++; if(grid===exp) expShown++;
            c.style.display='';
            void c.offsetWidth;
            c.classList.remove('is-off');
          } else {
            c.classList.add('is-off');
            setTimeout(function(){ if(c.classList.contains('is-off')) c.style.display='none'; },260);
          }
        });
      });
      if(all){
        setBox(false); morewrap.style.display='';
        more.classList.remove('is-open'); mt.textContent='Смотреть все работы';
      } else {
        setBox(restShown>0); morewrap.style.display='none';
      }
      if(expwrap) expwrap.style.display=(expShown>0)?'':'none';
      if(empty) empty.classList.toggle('on', shown===0);
    });
  }
})();
</script>

rec2663636801 (22148 символов)

<!-- ===== KORS · НАШИ РАБОТЫ · МОБИЛКА · блок T123. Показывать ТОЛЬКО на телефоне. ===== -->
<div class="kgalm">
  <div class="kgalm__head">
    <div class="kgalm__eyebrow">- НАШИ РАБОТЫ</div>
    <h2 class="kgalm__title">460+ проектов: найдите свою отрасль.</h2>
    <div class="kgalm__sub">Сфера, формат и срок по каждому проекту. «Смотреть полное видео» - на весь экран.</div>
  </div>
  <div class="kgalm__filter" id="kgalmFilter" aria-label="Фильтр работ по услугам">
    <button type="button" class="kgalm__fbtn is-active" data-f="all">Все</button>
    <button type="button" class="kgalm__fbtn" data-f="video">Видео</button>
    <button type="button" class="kgalm__fbtn" data-f="site">Сайты</button>
    <button type="button" class="kgalm__fbtn" data-f="presentation">Презентации</button>
    <button type="button" class="kgalm__fbtn" data-f="brand">Фирменный стиль</button>
    <button type="button" class="kgalm__fbtn" data-f="ads">Реклама</button>
  </div>
  <div class="kgalm__col" id="kgalmTop"></div>
  <div class="kgalm__hidden" id="kgalmHidden"><div class="kgalm__col" id="kgalmRest"></div></div>
  <div class="kgalm__empty" id="kgalmEmpty">По этой услуге в подборке пока нет проектов.</div>
  <div class="kgalm__morewrap"><button class="kgalm__more" id="kgalmMore"><span class="kgalm__mtext">Смотреть ещё наши работы</span> <span class="kgalm__count">+15</span></button></div>
    <div class="kgalm__group" id="kgalmExpWrap">
    <div class="kgalm__ghead">
      <div class="kgalm__eyebrow">- ГОВОРИМ О ВИДЕО</div>
      <h3 class="kgalm__gtitle">Экспертные ролики студии</h3>
      <div class="kgalm__gsub">Наш собственный контент, не клиентские заказы: как устроен продакшен, из чего складывается цена и что делает видео рабочим инструментом.</div>
    </div>
    <div class="kgalm__col" id="kgalmExp"></div>
  </div>
  <div class="kgalm__lb" id="kgalmLb"><div class="kgalm__lbbd"></div><div class="kgalm__lbbox"><button class="kgalm__lbx" id="kgalmLbx">×</button><div class="kgalm__lbframe"><iframe id="kgalmLbIframe" allow="autoplay; fullscreen; encrypted-media; picture-in-picture" allowfullscreen></iframe></div></div></div>
</div>
<style>
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Unbounded:wght@400;600;700;800&display=swap');
.kgalm{--bg:#0C0C0E;--raise:#141416;--card:#1B1B1F;--border:#2A2A2E;--text:#F5F3EF;--muted:#9A9A9A;--faint:#6a6a6e;--accent:#6D5DFB;--glow:rgba(109,93,251,.14);
  box-sizing:border-box;background:var(--bg);color:var(--text);font-family:'Manrope',Arial,sans-serif;-webkit-font-smoothing:antialiased;padding:56px 20px 64px;}
.kgalm *{box-sizing:border-box;margin:0;padding:0;}
.kgalm__head{margin:0 auto 30px;text-align:center;}
.kgalm__eyebrow{font-family:'Unbounded';font-size:11px;letter-spacing:.14em;color:var(--accent);margin-bottom:12px;}
.kgalm__title{font-family:'Unbounded';font-weight:700;font-size:26px;letter-spacing:-.02em;margin-bottom:12px;line-height:1.15;}
.kgalm__sub{color:var(--muted);font-size:14px;line-height:1.5;max-width:340px;margin:0 auto;}
.kgalm__col{display:flex;flex-direction:column;gap:18px;}
.kgalm__card{background:var(--raise);border:1px solid var(--border);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;}
.kgalm__video{position:relative;width:100%;aspect-ratio:16/9;background:#000;}
.kgalm__video iframe{position:absolute;inset:0;width:100%;height:100%;border:none;pointer-events:none;}
.kgalm__body{padding:18px 18px 20px;display:flex;flex-direction:column;}
.kgalm__name{font-family:'Unbounded';font-weight:700;font-size:18px;margin-bottom:9px;letter-spacing:-.01em;}
.kgalm__meta{display:flex;flex-direction:column;gap:5px;margin-bottom:16px;}
.kgalm__row{font-size:13px;color:var(--muted);line-height:1.4;}
.kgalm__row b{color:var(--text);font-weight:600;}
.kgalm__full--nolink{cursor:default}
.kgalm__full{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:transparent;border:1px solid var(--border);color:var(--text);font-family:'Manrope';font-weight:700;font-size:14px;padding:13px 18px;border-radius:9px;cursor:pointer;width:100%;}
.kgalm__full svg{width:15px;height:15px;flex:none;}
.kgalm__hidden{max-height:0;overflow:hidden;opacity:0;transition:max-height .55s ease,opacity .4s ease,margin-top .4s ease;margin-top:0;}
.kgalm__hidden.open{opacity:1;margin-top:18px;}
.kgalm__morewrap{margin-top:28px;}
.kgalm__more{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;background:var(--accent);color:#fff;font-family:'Manrope';font-weight:700;font-size:15px;padding:16px 24px;border-radius:9px;border:none;cursor:pointer;}
.kgalm__count{font-family:'Unbounded';font-size:12px;background:rgba(0,0,0,.18);padding:3px 8px;border-radius:20px;}
.kgalm__more.is-open .kgalm__count{display:none;}
.kgalm__lb{position:fixed;inset:0;z-index:99999;display:none;align-items:center;justify-content:center;padding:16px;}
.kgalm__lb.open{display:flex;}
.kgalm__lbbd{position:absolute;inset:0;background:rgba(4,4,6,.92);}
.kgalm__lbbox{position:relative;width:100%;}
.kgalm__lbframe{position:relative;width:100%;aspect-ratio:16/9;background:#000;border-radius:12px;overflow:hidden;border:1px solid var(--border);}
.kgalm__lbframe iframe{position:absolute;inset:0;width:100%;height:100%;border:none;}
.kgalm__lbx{position:absolute;top:-44px;right:0;width:38px;height:38px;border-radius:9px;background:var(--raise);border:1px solid var(--border);color:var(--text);font-size:22px;line-height:1;cursor:pointer;}
.kgalm__filter{display:flex;flex-wrap:nowrap;gap:8px;margin:0 -20px 22px;padding:0 20px 2px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;}
.kgalm__filter::-webkit-scrollbar{display:none;}
.kgalm__fbtn{flex:none;background:transparent;border:1px solid var(--border);color:var(--muted);font-family:'Manrope',Arial,sans-serif;font-weight:600;font-size:13px;padding:9px 15px;border-radius:20px;cursor:pointer;white-space:nowrap;transition:.2s;}
.kgalm__fbtn.is-active{background:var(--accent);border-color:var(--accent);color:#fff;}
.kgalm__tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:11px;}
.kgalm__tag{font-family:'Manrope',Arial,sans-serif;font-weight:600;font-size:8px;line-height:1;text-transform:uppercase;letter-spacing:.14em;color:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.22);border-radius:4px;padding:5px 8px;white-space:nowrap;}
.kgalm__desc{font-size:12px;line-height:1.5;color:var(--muted);margin-bottom:13px;}
.kgalm__card{transition:opacity .25s ease,transform .25s ease;}
.kgalm__card.is-off{opacity:0;transform:translateY(6px);}
.kgalm__empty{text-align:center;color:var(--muted);font-size:14px;padding:28px 0;display:none;}
.kgalm__empty.on{display:block;}
@media (min-width:481px){ .kgalm{display:none;} }
/* KORS: экспертные ролики вынесены в отдельную группу со своим заголовком, поэтому плашка на карточке больше не нужна. */
.kgalm__group{margin-top:54px;}
.kgalm__ghead{margin:0 auto 22px;text-align:center;}
.kgalm__gtitle{font-family:'Unbounded';font-weight:700;font-size:22px;letter-spacing:-.02em;margin-bottom:10px;line-height:1.2;}
.kgalm__gsub{color:var(--muted);font-size:13px;line-height:1.5;max-width:340px;margin:0 auto;}
</style>
<script>
(function(){
  var SLUG={'Видео':'video','Фотосъёмка':'photo','Сайт':'site','Презентация':'presentation','Фирменный стиль':'brand','Реклама':'ads','Дизайн':'design','Трансляция':'live','Продюсирование':'producing'};
  var works=[
    {id:'pd95FJSRFhF27W4YX4ioJJ', full:'3ZsxHkdEuHUubxSAQZDRyG', name:'Одоевские консервы - фильм о заводе', tags:['Видео','Фирменный стиль'], desc:'Показали производство изнутри: цеха, линии, контроль качества. Видео работает на сайте, в переговорах с сетями и на выставках.', alt:'Фильм о заводе Одоевские консервы: цеха, линии и контроль качества, мобильная версия'},
    {id:'xgBCJrU3Fy9CtKDXR9R23S', full:'0GfobL6RnAzhPeiopXjNHS', name:'Invoicebox - о компании', sphere:'финансовые технологии (FinTech)', format:'презентационный ролик о компании', term:'6 дней', tags:['Видео','Реклама'], desc:'Имиджевый ролик о платёжном сервисе: чем занимается компания и какие задачи бизнеса закрывает.', alt:'Имиджевый ролик о платёжном сервисе Invoicebox, мобильная версия'},
    {id:'iPcFsLF3eYfDYTauhcgjZj', full:'fv7FAnLfbLaDaNJLtSQ74H', name:'Вистекс', sphere:'производство, предприятие', format:'презентационный ролик', term:'15 дней', tags:['Видео','Дизайн'], desc:'Ролик о заводе: восемь направлений производства за три минуты. Дизайн email-письма со встроенным видео для коммерческих предложений.', alt:'Видео о производстве для завода Вистекс, мобильная версия'},
    {id:'bZ8JyozhtKdSDiy5xjLoVr', full:'caSE37WujsGB6usgZewyUt', name:'Ресторан Rumi / «ЗНАТЬ»', sphere:'ресторанный бизнес, мероприятия', format:'видео-отчёт о мероприятии', term:'2 дня', tags:['Видео','Трансляция','Презентация'], desc:'Съёмка мероприятий, прямая трансляция и презентации для ресторана.', alt:'Съёмка мероприятия и трансляция для ресторана Rumi, мобильная версия'},
    {id:'uiVqp8dWpzNoBt2GweBLs9', full:'vF4hbgW4Umo6U4dDNUFvwv', name:'Новая Формация', sphere:'организация, бизнес', format:'презентационный ролик', term:'4 дня', tags:['Видео','Дизайн'], desc:'Презентационный ролик, афиша и ведение контента.', alt:'Презентационный ролик для проекта Новая Формация, мобильная версия'},
    {id:'gHMF2zBsAdSdbcEH9wSZKh', full:'kfd6wYQdCh72VpRPC74Mfs', name:'Редакция ЭКСМО', sphere:'издательский бизнес', format:'съёмка трейлера по сюжету книги', term:'9 дней', tags:['Видео','Дизайн'], desc:'Трейлер книги и афиша для издательства.', alt:'Книжный трейлер для издательства Редакция ЭКСМО, мобильная версия'},
    {id:'sRSLqBbjkRWyn31BrY6iny', full:'mZiwnH9uZAdc15hhRsqPvB', name:'Одоевские консервы - термостабильные начинки', tags:['Видео'], desc:'Продуктовый ролик о линейке: как начинки ведут себя при выпечке и что это даёт производителю.', alt:'Продуктовый ролик о термостабильных начинках Одоевские консервы, мобильная версия'},
    {id:'uqJ79iyVPcqN1ZtTtjnkAv', full:'gznTZhdFQeZEKZnidVaTbk', name:'GosObmen', sphere:'финансовые услуги', format:'рекламный ролик', term:'3 дня', tags:['Видео','Сайт','Дизайн'], desc:'Рекламные ролики, тексты и сайт. Собрали скрипт для отдела продаж.', alt:'Рекламный ролик и сайт для сервиса Гособмен, мобильная версия'},
    {id:'35XkXms5VN3RLJcYsgWsnD', full:'2FXfjS6hYEvLkWNKUveoBx', name:'Invoicebox - оплата в белорусских рублях', tags:['Видео'], desc:'Объясняющий ролик о выходе платёжного сервиса на рынок Беларуси: как принимать оплату в белорусских рублях.', alt:'Ролик об оплате в белорусских рублях в платёжном сервисе Invoicebox, мобильная версия'},
    {id:'5zMvPKfeuDf9N7h7P8KuVe', full:'ePXSSA9qFiEgA5WYRdd4FP', name:'Алтай Серикбай - съёмки для личного бренда', tags:['Видео'], desc:'Снимаем контент для эксперта по личностному развитию: студийные выпуски, разговорные форматы, съёмки на ретритах. За время работы - больше десяти роликов.', alt:'Съёмки для личного бренда эксперта по личностному развитию Алтая Серикбая, мобильная версия'},
    {id:'bKeihzPbnEbXZarkMcYQZj', full:'6ivtiXKAcQj4dVJN8H1YWs', name:'MediaLive - отчётный ролик с выставки', tags:['Видео','Реклама'], desc:'Сняли отчётное видео с отраслевого события. Организаторы используют его на сайте и в рекламе следующего сезона.', alt:'Отчётный ролик с отраслевой выставки для MediaLive, мобильная версия'},
    {id:'8QbWRspZgkLTicEiQpp9su', full:'8QbWRspZgkLTicEiQpp9su', name:'STROBBS - промо зимней коллекции', tags:['Видео','Реклама'], desc:'Проморолик показа новой зимней коллекции российского бренда обуви и одежды.', alt:'Проморолик показа зимней коллекции бренда обуви и одежды STROBBS, мобильная версия'},
    {id:'88SCanh4aPU83UFBmThiVa', full:'mJqjXaKQBrdbvirxUTHLLh', name:'Rockstar - клип «На дне»', tags:['Видео'], desc:'Музыкальный клип для артиста.', alt:'Музыкальный клип На дне для артиста Rockstar, мобильная версия'},
    {id:'wLtMKZCpf75eYEWMXPEPZY', full:'7Kxs8xzVfCDLtyuG5puNN1', name:'Рокстар', sphere:'медиа', format:'музыкальный клип', term:'12 дней', tags:['Видео','Дизайн'], desc:'Три клипа и обложки для музыкального проекта.', alt:'Музыкальные клипы для проекта Рокстар, мобильная версия'},
    {id:'qAV5wXg5oHKKcY6tbgysZd', full:'okapERMYWfdoGagPRmo7uC', name:'Rockstar - клип «Самая грустная песня»', tags:['Видео'], desc:'Первый клип, который мы сняли для артиста.', alt:'Музыкальный клип Самая грустная песня для артиста Rockstar, мобильная версия'},
    {id:'vNYi5w7HiQevkdBbPmQ3CR', full:'vNYi5w7HiQevkdBbPmQ3CR', name:'Ювелирный лофт GOLD - ролик о компании', tags:['Видео'], desc:'Рассказали о компании и о том, чем она занимается.', alt:'Ролик о компании для ювелирного лофта GOLD, мобильная версия'},
    {id:'6JcPdvqUchXCmzscbTqaos', full:'sRyZwPm3BS9CVspVi2sLx3', name:'Одоевские консервы - нетермостабильные начинки', tags:['Видео'], desc:'Второй ролик линейки: назначение, состав, применение в готовых изделиях.', alt:'Продуктовый ролик о нетермостабильных начинках Одоевские консервы, мобильная версия'},
    {id:'8YSeQnzXxmpkmo7uNNcLrF', full:'43yfJckoZggrVouaMMK4zt', name:'YouTube-шоу', sphere:'медиа', format:'съёмка выпусков', term:'14 дней', tags:['Видео','Продюсирование','Реклама'], desc:'Продюсирование и режиссура шоу: съёмка выпусков и рекламное сопровождение.', alt:'Съёмка выпусков YouTube-шоу, мобильная версия'},
    {id:'7akHJzKdcoSrPiHtRbRBqk', full:'7akHJzKdcoSrPiHtRbRBqk', name:'Invoicebox - интернет-магазины за пару кликов', tags:['Видео'], desc:'Продуктовый ролик о конструкторе интернет-магазинов внутри сервиса.', alt:'Ролик о конструкторе интернет-магазинов в сервисе Invoicebox, мобильная версия'},
    {id:'b66cpVCFFFVycfDvLFXFR3', full:'b66cpVCFFFVycfDvLFXFR3', name:'Invoicebox - как выставить счёт за пару кликов', tags:['Видео'], desc:'Видеоинструкция для пользователей сервиса: выставление счёта по шагам.', alt:'Видеоинструкция по выставлению счёта в сервисе Invoicebox, мобильная версия'},
    {id:'eCGHEdUFdSyEjCBXxcsUSC', full:'geGWgessLoxkUKdQ4d4e1q', name:'Шоурил KORS Production', sphere:'создание контента', format:'актуальные работы', term:'2025-й год', tags:['Видео','Продюсирование'], desc:'Шоурил студии: съёмки на производствах и коммерческие проекты разных лет.', alt:'Актуальные работы студии KORS Production, мобильная версия'},
    {id:'dsqVruz3QkCKQESGiTUsVR', full:'dsqVruz3QkCKQESGiTUsVR', name:'Твой продакшен тебя обманывает', tags:['Видео'], kors:true, alt:'Экспертное видео KORS: почему продакшен может обманывать заказчика, мобильная версия'},
    {id:'uittTC7uyz9hv4HDirTBAG', full:'uittTC7uyz9hv4HDirTBAG', name:'Видео - это не украшение для бизнеса', tags:['Видео'], kors:true, alt:'Экспертное видео KORS о том, зачем бизнесу видео, мобильная версия'},
    {id:'aG3Qkc4VfoCcgtJLz6ivbE', full:'aG3Qkc4VfoCcgtJLz6ivbE', name:'Как сэкономить на видеоролике', tags:['Видео'], kors:true, alt:'Экспертное видео KORS о том, как сэкономить на съёмке ролика, мобильная версия'},
    {id:'4pzsMBSzheH3Sarx4UFHMd', full:'4pzsMBSzheH3Sarx4UFHMd', name:'Как сделать продающее видео', tags:['Видео'], kors:true, alt:'Экспертное видео KORS о том, как сделать продающее видео, мобильная версия'}
  ];
  var FS='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="5 3 19 12 5 21 5 3"/></svg>';
  var lb=document.getElementById('kgalmLb'), lbf=document.getElementById('kgalmLbIframe');
  function openLb(id){ lbf.src='https://kinescope.io/embed/'+id+'?autoplay=true'; lb.classList.add('open'); }
  function closeLb(){ lb.classList.remove('open'); lbf.src=''; }
  document.getElementById('kgalmLbx').addEventListener('click',closeLb);
  lb.querySelector('.kgalm__lbbd').addEventListener('click',closeLb);
  document.addEventListener('keydown',function(e){ if((e.key==='Escape'||e.keyCode===27)&&lb.classList.contains('open'))closeLb(); });
  function makeCard(w, defer){
    var card=document.createElement('div'); card.className='kgalm__card';
    card.setAttribute('data-tags',(w.tags||[]).map(function(t){return SLUG[t]||'';}).join(' '));
    var ttl=(w.alt||w.name).replace(/"/g,'&quot;');
    var q='?autoplay=true&muted=true&loop=true&controls=false&playsInline=true&background=true';
    var ift= defer ? '<iframe data-src="https://kinescope.io/embed/'+w.id+q+'" title="'+ttl+'" aria-label="'+ttl+'" allow="autoplay; fullscreen; encrypted-media; picture-in-picture" allowfullscreen></iframe>'
                   : '<iframe loading="lazy" src="https://kinescope.io/embed/'+w.id+q+'" title="'+ttl+'" aria-label="'+ttl+'" allow="autoplay; fullscreen; encrypted-media; picture-in-picture" allowfullscreen></iframe>';
    var tagsHtml=(w.tags&&w.tags.length)?'<div class="kgalm__tags">'+w.tags.map(function(t){return '<span class="kgalm__tag">'+t+'</span>';}).join('')+'</div>':'';
    var descHtml=w.desc?'<p class="kgalm__desc">'+w.desc+'</p>':'';
    var metaHtml='';
    if(w.sphere||w.format||w.term){ metaHtml='<div class="kgalm__meta">'+(w.sphere?'<div class="kgalm__row"><b>Сфера:</b> '+w.sphere+'</div>':'')+(w.format?'<div class="kgalm__row"><b>Формат:</b> '+w.format+'</div>':'')+(w.term?'<div class="kgalm__row"><b>Срок:</b> '+w.term+'</div>':'')+'</div>'; }
    card.innerHTML='<div class="kgalm__video">'+ift+'</div><div class="kgalm__body"><h3 class="kgalm__name">'+w.name+'</h3>'+tagsHtml+descHtml+metaHtml+'<button class="kgalm__full'+(w.full?'':' kgalm__full--nolink')+'" '+(w.full?'':'aria-disabled="true"')+'>'+FS+'Смотреть полное видео</button></div>';
    if(w.full){ card.querySelector('.kgalm__full').addEventListener('click',function(){ openLb(w.full); }); }
    return card;
  }
  var top=document.getElementById('kgalmTop'),rest=document.getElementById('kgalmRest'),box=document.getElementById('kgalmHidden'),more=document.getElementById('kgalmMore');
  var exp=document.getElementById('kgalmExp'), expwrap=document.getElementById('kgalmExpWrap');
  if(!top||!rest||!box||!more)return;
  /* KORS: превью грузятся не пачкой. Плеер получает src только когда карточка подходит к видимой области (запас 250px). Пока карточка спрятана под кнопкой (max-height:0) или скрыта фильтром (display:none), она не пересекается с экраном и ролик не стартует. */
  var io=('IntersectionObserver' in window)?new IntersectionObserver(function(es,ob){
    es.forEach(function(e){
      if(!e.isIntersecting) return;
      var f=e.target.querySelector('iframe[data-src]');
      if(f){ f.src=f.getAttribute('data-src'); f.removeAttribute('data-src'); }
      ob.unobserve(e.target);
    });
  },{root:null,rootMargin:'250px 0px',threshold:0.01}):null;
  function watch(c){
    if(io){ io.observe(c); return; }
    var f=c.querySelector('iframe[data-src]');
    if(f){ f.src=f.getAttribute('data-src'); f.removeAttribute('data-src'); }
  }
  function put(grid,w){ var c=makeCard(w,true); grid.appendChild(c); watch(c); }
  /* KORS: порог показа на телефоне - 6 карточек (одна колонка, 12 было бы простынёй), остальные под кнопкой. Экспертные ролики студии идут отдельной группой ниже, флаг kors в данных теперь отвечает за группировку. */
  var TOPN=6;
  var main=works.filter(function(w){return !w.kors;});
  var expert=works.filter(function(w){return !!w.kors;});
  main.slice(0,TOPN).forEach(function(w){put(top,w);});
  main.slice(TOPN).forEach(function(w){put(rest,w);});
  if(exp){ expert.forEach(function(w){put(exp,w);}); }
  var cntEl=more.querySelector('.kgalm__count'); if(cntEl){ cntEl.textContent='+'+Math.max(0,main.length-TOPN); }
  var loaded=false, mt=more.querySelector('.kgalm__mtext');
  more.addEventListener('click',function(){
    if(!box.classList.contains('open')){
      box.classList.add('open'); box.style.maxHeight=box.scrollHeight+'px';
      setTimeout(function(){if(box.classList.contains('open'))box.style.maxHeight='none';},600);
      more.classList.add('is-open'); mt.textContent='Свернуть';
    }else{
      box.style.maxHeight=box.scrollHeight+'px';
      requestAnimationFrame(function(){box.style.maxHeight='0px';box.classList.remove('open');});
      more.classList.remove('is-open'); mt.textContent='Смотреть ещё наши работы';
    }
  });
  window.addEventListener('resize',function(){if(box.classList.contains('open'))box.style.maxHeight='none';});

  /* фильтр по услугам: чистый JS, отбор по data-tags */
  var fwrap=document.getElementById('kgalmFilter'), empty=document.getElementById('kgalmEmpty'), morewrap=more.parentNode;
  function loadRest(){ /* KORS: пачкой больше не грузим - src ставит IntersectionObserver по мере прокрутки. */ }
  function setBox(open){
    if(open){ loadRest(); box.classList.add('open'); box.style.maxHeight='none'; }
    else { box.classList.remove('open'); box.style.maxHeight='0px'; }
  }
  if(fwrap){
    fwrap.addEventListener('click',function(e){
      var b=e.target.closest?e.target.closest('.kgalm__fbtn'):null;
      if(!b) return;
      var f=b.getAttribute('data-f'), all=(f==='all'), shown=0, restShown=0, expShown=0;
      fwrap.querySelectorAll('.kgalm__fbtn').forEach(function(x){ x.classList.toggle('is-active', x===b); });
      if(b.scrollIntoView) b.scrollIntoView({block:'nearest',inline:'nearest'});
      [top,rest,exp].filter(Boolean).forEach(function(grid){
        grid.querySelectorAll('.kgalm__card').forEach(function(c){
          var m = all || ((' '+(c.getAttribute('data-tags')||'')+' ').indexOf(' '+f+' ')>-1);
          if(m){
            shown++; if(grid===rest) restShown++; if(grid===exp) expShown++;
            c.style.display='';
            void c.offsetWidth;
            c.classList.remove('is-off');
          } else {
            c.classList.add('is-off');
            setTimeout(function(){ if(c.classList.contains('is-off')) c.style.display='none'; },260);
          }
        });
      });
      if(all){
        setBox(false); morewrap.style.display='';
        more.classList.remove('is-open'); mt.textContent='Смотреть ещё наши работы';
      } else {
        setBox(restShown>0); morewrap.style.display='none';
      }
      if(expwrap) expwrap.style.display=(expShown>0)?'':'none';
      if(empty) empty.classList.toggle('on', shown===0);
    });
  }
})();
</script>

#17 - 2026-08-31 - шапка /sites rec3237881801 ДО замены номера на кнопку «Позвонить»

Копия исходника. Длина 5895 символов.

<style>
/* ---------- Header ---------- */
.header{position:fixed;top:0;left:0;right:0;z-index:90;padding:14px 0;transition:background .2s ease,box-shadow .2s ease}
.header.scrolled{background:rgba(12,12,14,.86);backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line)}
.header-in{display:flex;align-items:center;gap:18px}
.logo{font-weight:700;font-size:26px;letter-spacing:-.04em;line-height:1}
.logo span{color:var(--accent)}
.nav{display:flex;gap:4px;margin-left:6px}
.nav a{font-size:14.5px;font-weight:500;color:var(--ink);padding:10px 12px;border-radius:999px;transition:background .15s}
.nav a:hover{background:rgba(255,255,255,.06)}
.header-right{margin-left:auto;display:flex;align-items:center;gap:10px}
.header-phone{font-weight:600;font-size:16px;background:var(--card);border-radius:999px;padding:14px 22px;box-shadow:0 0 0 1px var(--line);letter-spacing:-.01em;transition:transform .15s}
.header-phone:hover{transform:translateY(-2px)}
.msg-ico{width:46px;height:46px;border-radius:50%;background:var(--card);box-shadow:0 0 0 1px var(--line);display:inline-flex;align-items:center;justify-content:center;font-size:17px;transition:transform .15s}
.msg-ico:hover{transform:translateY(-2px)}
.msg-ico--tx{font-family:'Unbounded',Arial,sans-serif;font-weight:700;font-size:15px;color:var(--ink)}
.msg-ico--doc{width:auto;height:auto;border-radius:8px;padding:9px 12px;gap:8px;background:transparent;box-shadow:0 0 0 1px var(--line);font-family:'Manrope',Arial,sans-serif;font-weight:600;font-size:13px;color:var(--muted);white-space:nowrap}
.msg-ico--doc svg{width:16px;height:16px;flex:none;display:block}
.msg-ico--doc:hover{transform:none;box-shadow:0 0 0 1px var(--accent);color:var(--accent)}
/* Ширина шапки лендинга ограничена общим .container (1180px), места на подписанную
   презентацию не хватало. Освободили его тремя круглыми иконками мессенджеров:
   TG / WA / MAX остаются в мобильном меню и в подвале страницы.
   Телефон и «Рассчитать стоимость» не трогаем - они важнее. */
.header-right .msg-ico:not(.msg-ico--doc){display:none}
@media (max-width:1179px){.msg-ico--doc{display:none}}
.mm-chan{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.mobile-menu .mm-chan a{font-size:15px;font-weight:600;padding:11px 18px;background:var(--card);border-radius:999px;box-shadow:0 0 0 1px var(--line)}
.header .btn{padding:14px 24px;font-size:14.5px}
.burger{display:none;background:var(--accent);border:none;border-radius:50%;width:52px;height:52px;color:#fff;font-size:19px;box-shadow:0 6px 18px rgba(109,93,251,.4)}
.mobile-menu{display:none;position:fixed;inset:0;background:var(--bg);z-index:89;padding:110px 28px 28px;flex-direction:column;gap:8px}
.mobile-menu.open{display:flex}
.mobile-menu a{font-size:24px;font-weight:600;letter-spacing:-.02em;padding:10px 0}
.mobile-menu .btn{margin-top:14px;font-size:17px}
@media (max-width:1179px){.header-phone{display:none}}
</style>
<header class="header" id="header">
  <div class="container header-in">
    <a href="https://korsprod.ru" class="logo">kors<span>.</span></a>
    <nav class="nav">
      <a href="#cases">Кейсы</a>
      <a href="#services">Услуги</a>
      <a href="#pricing">Тарифы</a>
      <a href="#faq">Вопросы</a>
      <a href="https://korsprod.ru">Упаковка бизнеса ↗</a>
    </nav>
    <div class="header-right">
      <a class="msg-ico" href="https://t.me/korsprodsale" title="Telegram" aria-label="Telegram">✈️</a>
      <a class="msg-ico" href="https://wa.me/79158677996" title="WhatsApp" aria-label="WhatsApp">💬</a>
      <a class="msg-ico msg-ico--tx" href="https://max.ru/u/f9LHodD0cOJry8jfuI2u_X2FJWCLMC5S4I3JfDhcBC6iBjNcaUyKtbZ9Bto" target="_blank" rel="noopener" title="MAX" aria-label="MAX">M</a>
      <a class="msg-ico msg-ico--doc" href="https://drive.google.com/file/d/1HF-3fD3Hym_H-FWr307pvuUo4tu84fJu/view?usp=sharing" target="_blank" rel="noopener" title="Презентация студии (PDF)" aria-label="Открыть презентацию студии в формате PDF"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z"/><path d="M14 3v5h5"/><path d="M9 13h6"/><path d="M9 17h4"/></svg><span>Презентация</span></a>
      <a class="header-phone" href="tel:+79158677996">+7 915 867-79-96</a>
      <a class="btn btn-primary" href="#quiz">Рассчитать стоимость</a>
      <button class="burger" id="burger" aria-label="Меню">☰</button>
    </div>
  </div>
</header>
<div class="mobile-menu" id="mobileMenu">
  <a href="#cases">Кейсы</a>
  <a href="#services">Услуги</a>
  <a href="#pricing">Тарифы</a>
  <a href="#faq">Вопросы</a>
  <a href="https://korsprod.ru">Упаковка бизнеса ↗</a>
  <a href="https://drive.google.com/file/d/1HF-3fD3Hym_H-FWr307pvuUo4tu84fJu/view?usp=sharing" target="_blank" rel="noopener">Презентация студии (PDF)</a>
  <a href="tel:+79158677996">+7 915 867-79-96</a>
  <a class="btn btn-primary" href="#quiz">Рассчитать стоимость</a>
  <div class="mm-chan">
    <a href="https://t.me/korsprodsale" target="_blank" rel="noopener">Telegram</a>
    <a href="https://wa.me/79158677996" target="_blank" rel="noopener">WhatsApp</a>
    <a href="https://max.ru/u/f9LHodD0cOJry8jfuI2u_X2FJWCLMC5S4I3JfDhcBC6iBjNcaUyKtbZ9Bto" target="_blank" rel="noopener">MAX</a>
    <a href="mailto:info@korsprod.ru">Почта</a>
  </div>
</div>
<script>
var header=document.getElementById('header');
addEventListener('scroll',function(){header.classList.toggle('scrolled',scrollY>10)});
var burger=document.getElementById('burger'),mm=document.getElementById('mobileMenu');
burger.addEventListener('click',function(){mm.classList.toggle('open');burger.textContent=mm.classList.contains('open')?'✕':'☰'});
mm.querySelectorAll('a').forEach(function(a){a.addEventListener('click',function(){mm.classList.remove('open');burger.textContent='☰'})});
</script>

rec2699474201 - /case-odoevskie, шаги (168173409) (47445 симв.)

<!-- ================================================================
     KORS · СТРАНИЦА-КЕЙС · ОДОЕВСКИЕ КОНСЕРВЫ
     ── ЗАПОЛНЕНИЕ ──────────────────────────────────────────────────
     Всё фото/видео вставляется В ОДНОМ МЕСТЕ - в списке ниже (KORS_CASE).
     • Картинки: вставь ссылку на изображение в кавычки. Пусто '' = заглушка.
       Где взять ссылку: загрузи фото в Tilda (Файл-менеджер сайта или любой
       блок «Изображение») и скопируй URL картинки; либо любой прямой URL.
     • Видео: впиши ID ролика Kinescope (часть после kinescope.io/… ). Пусто = заглушка.
     Больше нигде в коде править не нужно - слоты подтянутся сами.
     ================================================================ -->
<script>
window.KORS_CASE = {
  images: {
    cover:        'https://static.tildacdn.com/tild3563-6163-4139-a463-386164356466/odoev-cover-film-128.jpg',   // большая обложка вверху (гориз. фото/визуал)
    firstShoot:   '',   // шаг 01 - кадр первой съёмки начинки (если без видео)
    firstShoot2:  '',   // шаг 01 - кадр второй съёмки начинки (если без видео)
presentation: '',   // шаг 02 - одиночная картинка-запасной вариант (используется, только если slides пуст)
    factoryPhoto: '',   // шаг 03 - фото производства (если без видео)
    product1:     'https://static.tildacdn.com/tild3538-6336-4331-b630-393965653763/odoevskie-nachinki-1.jpg',   // шаг 04 - фото продукции 1
    product2:     'https://static.tildacdn.com/tild6462-3535-4432-b266-653436663333/odoevskie-kruasan-12.jpg',   // шаг 04 - фото продукции 2
    product3:     'https://static.tildacdn.com/tild6462-3131-4336-a237-366662616565/odoevskie-laboratori.jpg',   // шаг 04 - фото цеха/процесса
    photo4:       'https://static.tildacdn.com/tild6264-3139-4539-b061-323332633033/od-kotel.jpg',   // шаг 04 - галерея, кадр 4
    photo5:       'https://static.tildacdn.com/tild3663-3134-4337-a635-303939303938/od-varenye.jpg',   // шаг 04 - галерея, кадр 5
    photo6:       'https://static.tildacdn.com/tild6435-6536-4036-b765-626461393263/od-sklad.jpg',   // шаг 04 - галерея, кадр 6
    logoBefore:   'https://static.tildacdn.com/tild6462-3439-4365-a261-333634373338/odoevskie-logo-do-12.jpg',   // шаг 05 - СТАРЫЙ логотип (до)
    logoAfter:    'https://static.tildacdn.com/tild6338-3131-4439-b966-623739303361/odoevskie-logo-posle.jpg',   // шаг 05 - НОВЫЙ логотип (после)
    brand1:       '',   // шаг 06 - визитки
    brand2:       'https://static.tildacdn.com/tild6162-3336-4666-a338-323336396465/odoev-otkrytka-vesna.jpg',   // шаг 06 - открытки
    brand3:       'https://static.tildacdn.com/tild6632-3465-4634-b861-393137323563/odoevskie-priglasite.jpg',   // шаг 06 - др. носители
    siteShots:    ''    // шаг 07 - скриншоты povidlo.su и povidlo.pro
  },
  // Скриншоты сайтов для шага 07. Вкладка RU - povidlo.su, вкладка EN - povidlo.pro.
  siteRu: [
    'https://static.tildacdn.com/tild3463-3561-4837-b438-333439316132/povidlo-su-01-hero.jpg',
    'https://static.tildacdn.com/tild6439-3335-4533-a436-656336633534/povidlo-su-02-kontro.jpg',
    'https://static.tildacdn.com/tild6336-3035-4463-b463-653463326363/povidlo-su-03-katalo.jpg',
    'https://static.tildacdn.com/tild6538-3937-4435-b339-336162656636/povidlo-su-04-menedz.jpg'
  ],
  siteEn: [
    'https://static.tildacdn.com/tild3561-3836-4335-b431-323263383230/povidlo-pro-01-hero.jpg',
    'https://static.tildacdn.com/tild6163-3731-4132-b166-613736353464/povidlo-pro-02-about.jpg',
    'https://static.tildacdn.com/tild3335-3935-4237-b938-386233613336/povidlo-pro-03-leadf.jpg'
  ],
  // Визитки для шага 06. Две карточки, открываются в том же лайтбоксе, что и развороты.
  // Пусто - используется одиночный слот images.brand1.
  cards: [
    'https://static.tildacdn.com/tild3261-6362-4033-a662-393031353131/odoev-vizitka-ivanov.jpg',
    'https://static.tildacdn.com/tild6232-3936-4463-a637-333436386635/odoev-vizitka-veklic.jpg'
  ],
  // Развороты печатной презентации для шага 02. Два комплекта, переключаются вкладками RU/EN.
  // Порядок = порядок в галерее. Пусто в slides - в слоте останется заглушка,
  // пусто в slidesEn - вкладка EN не показывается.
  slides: [
    'https://static.tildacdn.com/tild3839-6265-4534-b632-383934363939/odoev-pres-01.jpg',
    'https://static.tildacdn.com/tild6365-3736-4633-b638-623535336533/odoev-pres-02.jpg',
    'https://static.tildacdn.com/tild3861-3537-4062-b638-623737303666/odoev-pres-03.jpg',
    'https://static.tildacdn.com/tild3739-3733-4737-a439-373962306636/odoev-pres-04.jpg',
    'https://static.tildacdn.com/tild6131-3763-4633-a632-383430346635/odoev-pres-05.jpg',
    'https://static.tildacdn.com/tild6238-3563-4662-b936-343165656562/odoev-pres-06.jpg',
    'https://static.tildacdn.com/tild6330-3263-4431-b136-306366623031/odoev-pres-07.jpg',
    'https://static.tildacdn.com/tild3263-6531-4663-b630-316431303234/odoev-pres-08.jpg',
    'https://static.tildacdn.com/tild3032-6661-4835-b932-613834373837/odoev-pres-09.jpg',
    'https://static.tildacdn.com/tild6439-3366-4065-b763-343465383338/odoev-pres-10.jpg',
    'https://static.tildacdn.com/tild3431-3232-4331-a661-653335363963/odoev-pres-11.jpg',
    'https://static.tildacdn.com/tild3239-6231-4336-a531-363563343563/odoev-pres-12.jpg',
    'https://static.tildacdn.com/tild3231-6331-4262-b262-363063643633/odoev-pres-13.jpg',
    'https://static.tildacdn.com/tild6537-3532-4534-a166-623232326538/odoev-pres-14.jpg',
    'https://static.tildacdn.com/tild3763-3332-4665-b631-353963643534/odoev-pres-15.jpg',
    'https://static.tildacdn.com/tild3439-6161-4537-a531-633864306164/odoev-pres-16.jpg'
  ],
  slidesEn: [
    'https://static.tildacdn.com/tild6132-3033-4436-b735-343631343130/odoev-pres-en-01.jpg',
    'https://static.tildacdn.com/tild3832-3935-4631-b631-366464363039/odoev-pres-en-02.jpg',
    'https://static.tildacdn.com/tild3332-3761-4538-b430-333335363031/odoev-pres-en-03.jpg',
    'https://static.tildacdn.com/tild6566-3932-4236-b365-323064646265/odoev-pres-en-04.jpg',
    'https://static.tildacdn.com/tild3238-6164-4730-b662-366261353863/odoev-pres-en-05.jpg',
    'https://static.tildacdn.com/tild3939-3332-4437-a131-643238343734/odoev-pres-en-06.jpg',
    'https://static.tildacdn.com/tild6264-3134-4561-a333-646630626136/odoev-pres-en-07.jpg',
    'https://static.tildacdn.com/tild3463-6639-4532-b364-636338303939/odoev-pres-en-08.jpg',
    'https://static.tildacdn.com/tild6634-3632-4239-a463-363462323464/odoev-pres-en-09.jpg',
    'https://static.tildacdn.com/tild3434-3061-4432-b663-386464313137/odoev-pres-en-10.jpg',
    'https://static.tildacdn.com/tild6265-6534-4335-a130-306462656133/odoev-pres-en-11.jpg',
    'https://static.tildacdn.com/tild6332-6135-4762-a135-303166363439/odoev-pres-en-12.jpg',
    'https://static.tildacdn.com/tild3930-3535-4231-a436-326336303337/odoev-pres-en-13.jpg',
    'https://static.tildacdn.com/tild3335-3832-4730-b466-393065656433/odoev-pres-en-14.jpg',
    'https://static.tildacdn.com/tild3934-3966-4931-a466-613731333338/odoev-pres-en-15.jpg',
    'https://static.tildacdn.com/tild6465-3432-4361-b464-343863303862/odoev-pres-en-16.jpg'
  ],
  videos: {
    firstShoot:   'sRyZwPm3BS9CVspVi2sLx3',   // шаг 01 - ролик «Термостабильные начинки»
    firstShoot2:  'mZiwnH9uZAdc15hhRsqPvB',    // шаг 01 - ролик «Нетермостабильные начинки»
    factory:      '3ZsxHkdEuHUubxSAQZDRyG',    // шаг 03 - фильм о заводе, полная версия
    main:         'j8Pq4wWMNTPm6Js8UQiM1n'     // блок «Видео проекта»
  }
};
</script>
<div class="kcp">
  <!-- ===== HERO ===== -->
  <header class="kcp__hero">
    <div class="kcp__hero-in">
      <a class="kcp__back" href="/#rec2667018101">← Все проекты</a>
      <div class="kcp__eyebrow">КЕЙС · ПИЩЕВОЕ ПРОИЗВОДСТВО</div>
      <h1 class="kcp__title">Одоевские консервы</h1>
      <div class="kcp__tags"><span class="kcp__tag">Видео</span><span class="kcp__tag">Фотосъёмка</span><span class="kcp__tag">Презентация</span><span class="kcp__tag">Фирменный стиль</span><span class="kcp__tag">Сайт</span></div>
      <p class="kcp__lead">Завод с 200+ рецептур, десятью направлениями продукции и поставками в четыре страны рассказывал о себе разрозненно. Собрали всё в одну систему: видео, фотосъёмка, презентация, логотип, фирменный стиль и два сайта - русский и английский.</p>
      <div class="kcp__facts">
        <div class="kcp__fact"><span>Сфера</span><b>Пищевое производство · B2B</b></div>
        <div class="kcp__fact"><span>С чего начали</span><b>Видеосъёмка продукта</b></div>
        <div class="kcp__fact"><span>Где сейчас</span><b>povidlo.su + povidlo.pro</b></div>
        <div class="kcp__fact"><span>Масштаб</span><b>200+ рецептур · 10 направлений</b></div>
      </div>
    </div>
    <!-- ВСТАВИТЬ: большое обложечное фото/видео (завод, продукция или кадр со съёмки). Пока заглушка. -->
    <div class="kcp__cover kcp__ph" data-img="cover"><div class="kcp__ph-label">📷 Обложка: фото продукции / кадр со съёмки (16:9)</div></div>
  </header>
  <!-- ===== КТО КЛИЕНТ ===== -->
  <section class="kcp__sec">
    <div class="kcp__grid2">
      <div>
        <div class="kcp__kick">- О КОМПАНИИ</div>
        <h2 class="kcp__h2">Сильное производство, которое было не видно</h2>
      </div>
      <div class="kcp__prose">
        <p>«Одоевские консервы» - производитель из посёлка Одоев в Тульской области. Уже более двадцати лет компания выпускает термостабильные фруктово-ягодные начинки, повидло, джемы, конфитюры, пюре и наполнители для хлебопекарной, кондитерской и молочной промышленности: больше 200 рецептур, десять направлений продукции, поставки в четыре страны.</p>
        <p>Это классический B2B: их продукт - ингредиент, который живёт <b>внутри</b> чужих изделий. Начинка в круассане, повидло в печенье, наполнитель в йогурте. Продукт качественный, производство серьёзное - но со стороны этого масштаба не было видно.</p>
        <p>При этом информация о заводе жила по разным местам: ассортимент - в прайсе, производственные возможности - в голове у менеджера, контроль качества и география поставок не были описаны нигде. Видео, сайт, презентация и фирменные материалы не складывались в единую картину: компанию нельзя было «показать» - только долго объяснять на словах.</p>
      </div>
    </div>
  </section>
  <!-- ===== ЗАДАЧА (акцентная плашка) ===== -->
  <section class="kcp__sec">
    <div class="kcp__callout">
      <div class="kcp__callout-k">ЗАДАЧА</div>
      <div class="kcp__callout-t">Задача была не в красивом сайте, а в том, чтобы собрать разрозненную информацию о заводе в одну систему - и партнёр за несколько минут понимал, с кем имеет дело.</div>
    </div>
  </section>
  <!-- ===== ТАЙМЛАЙН РАБОТЫ ===== -->
  <section class="kcp__sec">
    <div class="kcp__kick">- КАК ШЛА РАБОТА</div>
    <h2 class="kcp__h2">Из одной съёмки - в полный цикл</h2>
    <p class="kcp__sub">Сотрудничество началось с одного ролика и постепенно выросло в полный комплект материалов. Вот путь шаг за шагом.</p>
    <ol class="kcp__timeline">
      <li class="kcp__step">
        <div class="kcp__step-num">01</div>
        <div class="kcp__step-body">
          <h3>Первые видео на начинке</h3>
          <p>Начали с двух роликов о продукте. Сняли начинку «в деле» - текстуру, цвет, как она работает в готовом изделии. Это первое, что показывает потенциальному партнёру, что перед ним - качественный ингредиент.</p>
          <!-- Два ролика первой съёмки. ID берутся из KORS_CASE.videos (firstShoot / firstShoot2). -->
          <div class="kcp__vid2">
            <div class="kcp__ph" data-video="firstShoot" data-img="firstShoot"><div class="kcp__ph-label">🎬 Термостабильные начинки</div></div>
            <div class="kcp__ph" data-video="firstShoot2" data-img="firstShoot2"><div class="kcp__ph-label">🎬 Нетермостабильные начинки</div></div>
          </div>
        </div>
      </li>
      <li class="kcp__step">
        <div class="kcp__step-num">02</div>
        <div class="kcp__step-body">
          <h3>Печатная презентация</h3>
          <p>Собрали продукт и производство в понятную структуру - презентацию для переговоров и выставок. Разложили ассортимент, преимущества и мощности так, чтобы менеджеру было легко показать компанию клиенту.</p>
          <!-- Галерея разворотов: ссылки в KORS_CASE.slides. Клик по развороту открывает его на весь экран. -->
          <div class="kcp__gal" data-gallery></div>
          <div class="kcp__ph kcp__ph--wide" data-img="presentation"><div class="kcp__ph-label">📑 Развороты печатной презентации</div></div>
        </div>
      </li>
      <li class="kcp__step">
        <div class="kcp__step-num">03</div>
        <div class="kcp__step-body">
          <h3>Видео о заводе</h3>
          <p>Сняли само производство: масштаб цехов, оборудование, процессы. Именно это видео закрывает главный вопрос B2B-клиента - «а справятся ли по объёму и качеству». Масштаб теперь виден, а не описан словами.</p>
          <div class="kcp__ph kcp__ph--wide" data-video="factory" data-img="factoryPhoto"><div class="kcp__ph-label">🎬 Видео о заводе / кадры производства</div></div>
        </div>
      </li>
      <li class="kcp__step">
        <div class="kcp__step-num">04</div>
        <div class="kcp__step-body">
          <h3>Фотосъёмка для презентации и каталога</h3>
          <p>Сделали предметную и производственную фотосъёмку - продукция, упаковка, цеха. Единый визуальный ряд, который лёг в презентацию, каталог и дальнейшие материалы.</p>
          <div class="kcp__gal kcp__gal--photo" data-photogal></div>
          <div class="kcp__ph kcp__ph--grid">
            <div class="kcp__ph" data-img="product1"><div class="kcp__ph-label">📷 фото продукции 1</div></div>
            <div class="kcp__ph" data-img="product2"><div class="kcp__ph-label">📷 фото продукции 2</div></div>
            <div class="kcp__ph" data-img="product3"><div class="kcp__ph-label">📷 фото цеха / процесса</div></div>
          </div>
        </div>
      </li>
      <li class="kcp__step">
        <div class="kcp__step-num">05</div>
        <div class="kcp__step-body">
          <h3>Новый логотип: до / после</h3>
          <p>Обновили логотип - сохранили узнаваемость, но привели к современному виду, который одинаково хорошо работает на упаковке, в презентации и на сайте. Сравните сами:</p>
          <!-- ДО/ПОСЛЕ слайдер. ВСТАВИТЬ 2 картинки логотипа: старый и новый -->
          <div class="kcp__ba" id="kcpBA">
            <div class="kcp__ba-after kcp__ph" data-img="logoAfter" data-fit="contain"><div class="kcp__ph-label">✅ НОВЫЙ логотип (после)</div></div>
            <div class="kcp__ba-before kcp__ph" id="kcpBABefore" data-img="logoBefore" data-fit="contain"><div class="kcp__ph-label">◻️ СТАРЫЙ логотип (до)</div></div>
            <div class="kcp__ba-handle" id="kcpBAHandle"><span></span></div>
            <div class="kcp__ba-tag kcp__ba-tag--l">ДО</div>
            <div class="kcp__ba-tag kcp__ba-tag--r">ПОСЛЕ</div>
          </div>
          <div class="kcp__ba-hint">Потяните ползунок влево-вправо, чтобы сравнить</div>
        </div>
      </li>
      <li class="kcp__step">
        <div class="kcp__step-num">06</div>
        <div class="kcp__step-body">
          <h3>Фирменный стиль: открытки, визитки, носители</h3>
          <p>Оформили фирменные носители - визитки, открытки и другие материалы в единой стилистике. Компания получила узнаваемый облик, который работает на каждой точке контакта.</p>
          <div class="kcp__cards" data-cards></div>
          <div class="kcp__ph kcp__ph--grid">
            <div class="kcp__ph" data-img="brand1"><div class="kcp__ph-label">📷 визитки</div></div>
            <div class="kcp__ph" data-img="brand2" data-fit="contain"><div class="kcp__ph-label">📷 открытки</div></div>
            <div class="kcp__ph" data-img="brand3" data-fit="contain"><div class="kcp__ph-label">📷 др. носители</div></div>
          </div>
        </div>
      </li>
      <li class="kcp__step">
        <div class="kcp__step-num">07</div>
        <div class="kcp__step-body">
          <h3>Два сайта: povidlo.su и povidlo.pro</h3>
          <p>Сделали не языковой переключатель, а два отдельных сайта. Русский - povidlo.su, под брендом «Одоевские консервы». Английский - povidlo.pro, под экспортным брендом POVIDLO: отдельная структура и своя подача, адаптированная под зарубежных партнёров.</p>
          <p>Каждый из них работает сразу в трёх ролях: корпоративный сайт, каталог продукции и презентация для отдела продаж. Внутри - десять направлений продукции, производственные возможности, контроль качества и география поставок. Менеджеру достаточно дать ссылку вместо пересказа.</p>
          <div class="kcp__gal kcp__gal--site" data-sitegal></div>
          <div class="kcp__sitebtns">
            <a class="kcp__sitebtn" href="https://povidlo.su" target="_blank" rel="noopener">Открыть povidlo.su</a>
            <a class="kcp__sitebtn kcp__sitebtn--ghost" href="https://povidlo.pro" target="_blank" rel="noopener">Открыть povidlo.pro</a>
          </div>
          <div class="kcp__ph kcp__ph--wide" data-img="siteShots"><div class="kcp__ph-label">💻 Скриншоты povidlo.su и povidlo.pro</div></div>
        </div>
      </li>
      <li class="kcp__step kcp__step--next">
        <div class="kcp__step-num">→</div>
        <div class="kcp__step-body">
          <h3>Что дальше</h3>
          <p>Следующий этап - застройка выставочного стенда (планируется на зиму). Сотрудничество продолжается: от продукта на экране - к тому, как компания выглядит вживую на выставке.</p>
        </div>
      </li>
    </ol>
  </section>
  <!-- ===== РЕЗУЛЬТАТ ===== -->
  <section class="kcp__sec">
    <div class="kcp__result">
      <div class="kcp__kick">- ЧТО ИЗМЕНИЛОСЬ</div>
      <h2 class="kcp__h2">Компанию теперь можно показать, а не пересказывать</h2>
      <div class="kcp__result-grid">
        <div class="kcp__rcard"><div class="kcp__rc-t">Единый комплект</div><p>Видео, фото, презентация, логотип, фирменный стиль и сайт - собраны в одну систему и работают вместе.</p></div>
        <div class="kcp__rcard"><div class="kcp__rc-t">Масштаб виден сразу</div><p>Ассортимент, производство и контроль качества показаны на месте - на переговорах, выставках и в презентации, без долгих объяснений.</p></div>
        <div class="kcp__rcard"><div class="kcp__rc-t">Экспортное направление</div><p>Экспорт и представительства в Грузии и ОАЭ. Англоязычный povidlo.pro - то, чем компания представляет себя в регионе MENA.</p></div>
        <div class="kcp__rcard"><div class="kcp__rc-t">Долгое партнёрство</div><p>Сотрудничество выросло из одной видеосъёмки в постоянную работу над материалами компании.</p></div>
      </div>
    </div>
  </section>
  <!-- ===== ЧТО ВОШЛО (услуги) ===== -->
  <section class="kcp__sec">
    <div class="kcp__kick">- ЧТО ВОШЛО В КОМПЛЕКТ</div>
    <div class="kcp__chips">
      <span>Видеопродакшн</span><span>Съёмка производства</span><span>Фотосъёмка</span><span>Печатная презентация</span><span>Редизайн логотипа</span><span>Фирменный стиль</span><span>Визитки и открытки</span><span>Сайт RU</span><span>Сайт EN (MENA)</span>
    </div>
  </section>
  <!-- ===== ВИДЕО КЕЙСА (СКРЫТ) ===== -->
  <!-- СЕКЦИЯ СКРЫТА 28.08.2026. Причина: на странице уже четыре ролика (два в шаге 01 и фильм о заводе в шаге 03).
       Разметка и ключ KORS_CASE.videos.main оставлены нетронутыми. Чтобы вернуть секцию, снимите этот комментарий.
       ID ролика подставляется из KORS_CASE.videos.main
  <section class="kcp__sec">
    <div class="kcp__kick">- СМОТРЕТЬ</div>
    <h2 class="kcp__h2">Видео проекта</h2>
    <div class="kcp__video" data-video="main"><div class="kcp__ph-label">🎬 Основной ролик проекта</div></div>
  </section>
  -->
  <!-- ===== ОТЗЫВ КЛИЕНТА ===== -->
  <section class="kcp__sec">
    <div class="kcp__kick">- ОТЗЫВ</div>
    <h2 class="kcp__h2">Благодарственное письмо</h2>
    <p class="kcp__sub">ООО «МастерДжем» - юридическое лицо «Одоевских консервов»</p>
    <div class="kcp__letter"><img src="https://static.tildacdn.com/tild3231-6563-4932-b139-373433306561/pismo-odoevskie-1200.jpg" alt="Благодарственное письмо от ООО «МастерДжем» (Одоевские консервы) команде KORS Production за фото- и видеосъёмку производства и материалы для сайта и презентаций" loading="lazy"></div>
  </section>
  <!-- ===== ДРУГИЕ КЕЙСЫ ===== -->
  <section class="kcp__sec">
    <div class="kcp__kick">- ЕЩЁ</div>
    <h2 class="kcp__h2">Другие кейсы</h2>
    <div class="kcp__more">
      <a class="kcp__more-card" href="/case-invoicebox"><span>Кейс</span><b>Инвойсбокс</b><i>Видеоматериалы для платформы →</i></a>
      <a class="kcp__more-card" href="/case-vistex"><span>Кейс</span><b>Вистекс</b><i>Съёмка видео о предприятии →</i></a>
    </div>
  </section>
  <!-- ===== CTA ===== -->
  <section class="kcp__cta">
    <h2>Хотите так же показать своё производство?</h2>
    <p>Начнём с одного шага - а вырастем в полный цикл, если понравится результат.</p>
    <a class="kcp__cta-btn" href="#popup:zayavka">Обсудить проект →</a>
  </section>
  <!-- Лайтбокс. Тот же, что для благодарственных писем на главной, плюс листание. -->
  <div class="kcp__lb" id="kcpLb" aria-hidden="true">
    <div class="kcp__lbbd"></div>
    <div class="kcp__lbbox">
      <button class="kcp__lbx" id="kcpLbx" aria-label="Закрыть">×</button>
      <button class="kcp__lbnav kcp__lbnav--prev" id="kcpLbPrev" aria-label="Предыдущий">&#8249;</button>
      <img id="kcpLbImg" alt="">
      <button class="kcp__lbnav kcp__lbnav--next" id="kcpLbNext" aria-label="Следующий">&#8250;</button>
      <div class="kcp__lbcount" id="kcpLbCount"></div>
    </div>
  </div>
</div>
<style>
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Unbounded:wght@400;600;700;800&display=swap');
.kcp{--bg:#0C0C0E;--raise:#141416;--card:#1B1B1F;--border:#2A2A2E;--soft:#242428;--text:#F5F3EF;--muted:#9A9A9A;--faint:#6a6a6e;--accent:#6D5DFB;--glow:rgba(109,93,251,.14);
  box-sizing:border-box;background:var(--bg);color:var(--text);font-family:'Manrope',Arial,sans-serif;-webkit-font-smoothing:antialiased;}
.kcp *{box-sizing:border-box;margin:0;padding:0;}
.kcp p{line-height:1.65;}
.kcp__eyebrow,.kcp__kick{font-family:'Unbounded';font-size:12px;letter-spacing:.14em;color:var(--accent);}
.kcp__h2{font-family:'Unbounded';font-weight:700;font-size:clamp(26px,3.2vw,42px);letter-spacing:-.02em;line-height:1.12;margin:14px 0 0;}
.kcp__sub{color:var(--muted);font-size:17px;line-height:1.6;max-width:640px;margin-top:14px;}
/* HERO */
.kcp__hero{padding:70px 6vw 0;max-width:1280px;margin:0 auto;}
.kcp__hero-in{max-width:900px;}
.kcp__back{display:inline-block;color:var(--muted);text-decoration:none;font-size:14px;font-weight:600;margin-bottom:34px;transition:.2s;}
.kcp__back:hover{color:var(--accent);}
.kcp__hero .kcp__eyebrow{margin-bottom:18px;}
.kcp__title{font-family:'Unbounded';font-weight:800;font-size:clamp(40px,7vw,88px);letter-spacing:-.03em;line-height:1;margin-bottom:24px;}
.kcp__lead{font-size:clamp(18px,2vw,22px);line-height:1.55;color:#d8d6d1;max-width:760px;}
.kcp__tags{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 18px;}
.kcp__tag{font-family:'Manrope',Arial,sans-serif;font-weight:600;font-size:9px;line-height:1;text-transform:uppercase;letter-spacing:.14em;color:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.22);border-radius:4px;padding:5px 8px;white-space:nowrap;}
@media (max-width:480px){ .kcp__tag{font-size:8px;padding:5px 7px;} .kcp__tags{gap:5px;margin-bottom:14px;} }
.kcp__facts{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:14px;overflow:hidden;margin-top:44px;}
.kcp__fact{background:var(--raise);padding:20px 22px;display:flex;flex-direction:column;gap:7px;}
.kcp__fact span{font-size:12px;color:var(--faint);text-transform:uppercase;letter-spacing:.06em;}
.kcp__fact b{font-family:'Unbounded';font-weight:600;font-size:14px;line-height:1.3;}
.kcp__cover{margin:48px auto 0;max-width:1280px;aspect-ratio:16/8;border-radius:20px;}
/* SECTIONS */
.kcp__sec{max-width:1080px;margin:0 auto;padding:64px 6vw;}
.kcp__grid2{display:grid;grid-template-columns:0.85fr 1.15fr;gap:48px;align-items:start;}
.kcp__prose p{color:#c9c7c2;font-size:17px;margin-bottom:16px;}
.kcp__prose p:last-child{margin-bottom:0;}
.kcp__prose b{color:var(--text);font-weight:600;}
/* CALLOUT */
.kcp__callout{background:linear-gradient(135deg,rgba(109,93,251,.10),rgba(109,93,251,.02));border:1px solid rgba(109,93,251,.3);border-radius:18px;padding:40px 44px;}
.kcp__callout-k{font-family:'Unbounded';font-size:12px;letter-spacing:.14em;color:var(--accent);margin-bottom:14px;}
.kcp__callout-t{font-family:'Unbounded';font-weight:600;font-size:clamp(20px,2.4vw,30px);line-height:1.35;letter-spacing:-.01em;}
/* TIMELINE */
.kcp__timeline{list-style:none;margin-top:44px;display:flex;flex-direction:column;gap:26px;}
.kcp__step{display:grid;grid-template-columns:88px 1fr;gap:26px;background:var(--raise);border:1px solid var(--border);border-radius:18px;padding:30px 32px;transition:.25s;}
.kcp__step:hover{border-color:rgba(109,93,251,.4);}
.kcp__step-num{font-family:'Unbounded';font-weight:700;font-size:34px;color:var(--accent);line-height:1;opacity:.85;}
.kcp__step-body h3{font-family:'Unbounded';font-weight:600;font-size:22px;letter-spacing:-.01em;margin-bottom:12px;}
.kcp__step-body p{color:#c4c2bd;font-size:16px;}
.kcp__step--next{background:transparent;border-style:dashed;}
.kcp__step--next .kcp__step-num{opacity:1;}
/* PLACEHOLDERS */
.kcp__ph{position:relative;background:repeating-linear-gradient(45deg,#141416,#141416 12px,#17171a 12px,#17171a 24px);border:2px dashed #38383e;border-radius:14px;min-height:150px;display:flex;align-items:center;justify-content:center;text-align:center;}
.kcp__ph-label{color:#8a8a90;font-size:13px;font-weight:600;line-height:1.5;padding:16px;}
.kcp__ph-label small{color:var(--faint);font-weight:500;}
.kcp__ph--wide{margin-top:18px;aspect-ratio:16/8;min-height:0;}
.kcp__ph--grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:18px;background:none;border:none;padding:0;}
.kcp__ph--grid .kcp__ph{aspect-ratio:4/3;min-height:0;}
.kcp__cover.kcp__ph{aspect-ratio:16/8;}
/* BEFORE/AFTER */
.kcp__ba{position:relative;margin-top:20px;aspect-ratio:16/9;border-radius:16px;overflow:hidden;border:1px solid var(--border);user-select:none;}
.kcp__ba-after,.kcp__ba-before{position:absolute;inset:0;border-radius:0;border:none;}
.kcp__ba-before{width:100%;clip-path:inset(0 50% 0 0);}
.kcp__ba-handle{position:absolute;top:0;bottom:0;left:50%;width:2px;background:var(--accent);cursor:ew-resize;transform:translateX(-1px);}
.kcp__ba-handle span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:40px;height:40px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(0,0,0,.4);}
.kcp__ba-handle span::before{content:'⟷';color:#000;font-size:18px;font-weight:700;}
.kcp__ba-tag{position:absolute;top:14px;font-family:'Unbounded';font-size:11px;letter-spacing:.1em;background:rgba(0,0,0,.6);padding:5px 11px;border-radius:6px;}
.kcp__ba-tag--l{left:14px;}
.kcp__ba-tag--r{right:14px;}
.kcp__ba-hint{text-align:center;color:var(--faint);font-size:13px;margin-top:12px;}
/* RESULT */
.kcp__result-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:34px;}
.kcp__rcard{background:var(--raise);border:1px solid var(--border);border-radius:16px;padding:26px 28px;}
.kcp__rc-t{font-family:'Unbounded';font-weight:600;font-size:18px;color:var(--accent);margin-bottom:10px;}
.kcp__rcard p{color:#c4c2bd;font-size:15px;}
/* CHIPS */
.kcp__chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;}
.kcp__chips span{font-family:'Manrope';font-weight:600;font-size:14px;color:var(--text);background:rgba(109,93,251,.08);border:1px solid rgba(109,93,251,.4);border-radius:8px;padding:10px 16px;}
/* VIDEO */
.kcp__video{margin-top:24px;aspect-ratio:16/9;border-radius:18px;overflow:hidden;border:1px solid var(--border);background:#000;}
.kcp__video iframe{width:100%;height:100%;border:none;}
/* CTA */
.kcp__vid2{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px;}
.kcp__vid2 .kcp__ph{aspect-ratio:16/9;min-height:0;margin-top:0;}
.kcp__letter{margin-top:26px;max-width:440px;}
.kcp__letter img{display:block;width:100%;height:auto;border-radius:14px;border:1px solid var(--border);}
.kcp__more{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:28px;}
.kcp__more-card{display:block;background:var(--raise);border:1px solid var(--border);border-radius:16px;padding:24px 26px;text-decoration:none;transition:.2s;}
.kcp__more-card:hover{border-color:var(--accent);}
.kcp__more-card span{display:block;font-size:12px;letter-spacing:2px;color:var(--accent);text-transform:uppercase;margin-bottom:10px;}
.kcp__more-card b{display:block;font-family:'Unbounded',sans-serif;font-weight:700;font-size:22px;line-height:1.2;color:var(--text);margin-bottom:8px;}
.kcp__more-card i{font-style:normal;font-size:15px;color:var(--muted);}
@media (max-width:640px){.kcp__vid2{grid-template-columns:1fr;}.kcp__more{grid-template-columns:1fr;}}
/* --- Галерея разворотов презентации --- */
.kcp__gal{margin-top:18px;}
.kcp__galhead{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:12px;}
.kcp__galtabs{display:inline-flex;gap:4px;background:var(--soft);border:1px solid var(--border);border-radius:9px;padding:4px;}
.kcp__galtab{padding:7px 18px;border:none;background:none;color:var(--muted);font-family:'Manrope',Arial,sans-serif;font-weight:600;font-size:13px;line-height:1;letter-spacing:1.2px;border-radius:6px;cursor:pointer;transition:.2s;}
.kcp__galtab:hover{color:var(--text);}
.kcp__galtab.is-on{background:var(--accent);color:#fff;}
.kcp__galnote{margin-top:14px;font-size:13px;line-height:1.5;color:var(--muted);letter-spacing:.3px;}
.kcp__galnav{display:flex;gap:8px;flex-shrink:0;}
.kcp__galarrow{width:40px;height:40px;border:1px solid var(--border);background:var(--raise);border-radius:4px;color:var(--text);font:20px/1 Arial,sans-serif;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.2s;padding:0;}
.kcp__galarrow:hover{border-color:var(--accent);color:var(--accent);}
.kcp__galarrow:disabled{opacity:.3;cursor:default;border-color:var(--border);color:var(--text);}
.kcp__galtrack{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:4px;}
.kcp__galtrack::-webkit-scrollbar{display:none;}
.kcp__galcard{flex:0 0 calc((100% - 24px)/3);scroll-snap-align:start;display:block;padding:0;margin:0;border:1px solid var(--border);background:var(--raise);border-radius:10px;overflow:hidden;cursor:zoom-in;aspect-ratio:1200/873;transition:.2s;font:inherit;}
.kcp__galcard:hover{border-color:var(--accent);}
.kcp__galcard img{width:100%;height:100%;object-fit:cover;display:block;}
/* --- Лайтбокс --- */
.kcp__lb{position:fixed;inset:0;z-index:99999;display:none;align-items:center;justify-content:center;padding:64px 40px;}
.kcp__lb.open{display:flex;}
.kcp__lbbd{position:absolute;inset:0;background:rgba(4,4,6,.9);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);}
.kcp__lbbox{position:relative;width:auto;max-width:min(1100px,100%);display:flex;align-items:center;justify-content:center;}
.kcp__lbbox img{display:block;max-width:100%;max-height:calc(100vh - 170px);width:auto;height:auto;border-radius:10px;background:#0f0f11;}
.kcp__lbx{position:absolute;top:-48px;right:0;width:38px;height:38px;border-radius:9px;background:var(--raise);border:1px solid var(--border);color:var(--text);font:20px/1 Arial,sans-serif;cursor:pointer;padding:0;}
.kcp__lbx:hover{border-color:var(--accent);color:var(--accent);}
.kcp__lbnav{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;background:rgba(20,20,22,.85);border:1px solid var(--border);color:var(--text);font:22px/1 Arial,sans-serif;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.2s;padding:0;}
.kcp__lbnav:hover{border-color:var(--accent);color:var(--accent);}
.kcp__lbnav--prev{left:10px;}
.kcp__lbnav--next{right:10px;}
.kcp__lbcount{position:absolute;bottom:-36px;left:50%;transform:translateX(-50%);font-size:13px;color:var(--muted);letter-spacing:.4px;white-space:nowrap;}
@media (max-width:820px){.kcp__galcard{flex:0 0 calc((100% - 12px)/2);}.kcp__lb{padding:60px 12px;}.kcp__lbnav{width:40px;height:40px;}}
@media (max-width:480px){.kcp__galcard{flex:0 0 82%;}.kcp__galnav{display:none;}.kcp__galhead{margin-bottom:10px;}}
.kcp__cta{max-width:900px;margin:20px auto 0;padding:80px 6vw 96px;text-align:center;}
.kcp__cta h2{font-family:'Unbounded';font-weight:700;font-size:clamp(26px,3.4vw,42px);letter-spacing:-.02em;margin-bottom:16px;}
.kcp__cta p{color:var(--muted);font-size:18px;margin-bottom:30px;}
.kcp__cta-btn{display:inline-block;background:var(--accent);color:#fff;text-decoration:none;font-family:'Manrope';font-weight:700;font-size:16px;padding:18px 38px;border-radius:10px;transition:.25s;}
.kcp__cta-btn:hover{transform:translateY(-2px);box-shadow:0 14px 34px var(--glow);}
@media (max-width:820px){
  .kcp__facts{grid-template-columns:1fr 1fr;}
  .kcp__grid2{grid-template-columns:1fr;gap:20px;}
  .kcp__step{grid-template-columns:1fr;gap:14px;padding:24px 22px;}
  .kcp__step-num{font-size:28px;}
  .kcp__result-grid{grid-template-columns:1fr;}
  .kcp__ph--grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:480px){
  .kcp__hero{padding:48px 20px 0;}
  .kcp__sec{padding:48px 20px;}
  .kcp__facts{grid-template-columns:1fr;}
  .kcp__callout{padding:28px 24px;}
}
/* заполненные слоты (картинка/видео из конфига) */
.kcp [data-img].kcp--filled,.kcp [data-video].kcp--filled{background:none;border:none;}
.kcp [data-img] img,.kcp [data-video] img{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit;}
.kcp [data-fit="contain"] img{object-fit:contain;background:#0f0f11;padding:6%;}
.kcp [data-video].kcp--filled iframe{width:100%;height:100%;border:none;display:block;}
.kcp__ph.kcp--filled{padding:0;}
/* Визитки в шаге 06 - две карточки рядом, лайтбокс общий с галереей */
.kcp__cards{margin-top:18px}
.kcp__cardsrow{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.kcp__card{display:block;width:100%;padding:0;border:0;margin:0;background:#0f0f11;border-radius:14px;overflow:hidden;aspect-ratio:1680/952;cursor:zoom-in}
.kcp__card img{width:100%;height:100%;object-fit:cover;display:block}
.kcp__card:focus-visible{outline:2px solid #6D5DFB;outline-offset:3px}
.kcp__cardsnote{color:#9A9A9A;font-size:13px;line-height:1.5;margin-top:10px}
.kcp__ph--grid.is-two{grid-template-columns:repeat(2,1fr)}
@media (max-width:680px){.kcp__cardsrow{grid-template-columns:1fr}}
/* Галерея кадров фотосъёмки в шаге 04 */
.kcp__gal--photo .kcp__galcard{aspect-ratio:4/3}
/* Галерея скриншотов сайтов в шаге 07 */
.kcp__gal--site .kcp__galcard{flex:0 0 calc((100% - 12px)/2);aspect-ratio:16/9;background:#0f0f11}
.kcp__gal--site .kcp__galcard img{object-fit:contain}
.kcp__sitebtns{display:flex;flex-wrap:wrap;gap:12px;margin-top:16px}
.kcp__sitebtn{display:inline-block;background:var(--accent);color:#fff;text-decoration:none;font-family:'Manrope';font-weight:700;font-size:15px;line-height:1.2;padding:13px 24px;border-radius:10px;transition:.25s}
.kcp__sitebtn:hover{transform:translateY(-2px);box-shadow:0 12px 28px var(--glow)}
.kcp__sitebtn--ghost{background:transparent;color:var(--text);border:1px solid var(--border)}
.kcp__sitebtn--ghost:hover{border-color:var(--accent);box-shadow:none}
@media (max-width:480px){.kcp__gal--site .kcp__galcard{flex:0 0 88%}.kcp__sitebtn{flex:1 1 100%;text-align:center}}
</style>
<script>
(function(){
  var C=window.KORS_CASE||{}; var IMG=C.images||{}, VID=C.videos||{};
  document.querySelectorAll('.kcp [data-video]').forEach(function(el){
    var id=VID[el.getAttribute('data-video')];
    if(id){ el.classList.add('kcp--filled'); el.innerHTML='<iframe src="https://kinescope.io/embed/'+id+'" allow="autoplay; fullscreen; encrypted-media; picture-in-picture" allowfullscreen frameborder="0"></iframe>'; el.removeAttribute('data-img'); }
  });
  document.querySelectorAll('.kcp [data-img]').forEach(function(el){
    var url=IMG[el.getAttribute('data-img')];
    if(url){ el.classList.add('kcp--filled'); el.innerHTML='<img src="'+url+'" alt="">'; }
  });
})();
(function(){
  // Слайдер до/после
  var ba=document.getElementById('kcpBA'); if(!ba) return;
  var before=document.getElementById('kcpBABefore');
  var handle=document.getElementById('kcpBAHandle');
  var dragging=false;
  function setPos(clientX){
    var r=ba.getBoundingClientRect();
    var x=Math.max(0,Math.min(clientX-r.left,r.width));
    var pct=(x/r.width)*100;
    before.style.clipPath='inset(0 '+(100-pct)+'% 0 0)';
    handle.style.left=pct+'%';
  }
  handle.addEventListener('mousedown',function(){dragging=true;});
  window.addEventListener('mouseup',function(){dragging=false;});
  window.addEventListener('mousemove',function(e){ if(dragging) setPos(e.clientX); });
  handle.addEventListener('touchstart',function(){dragging=true;},{passive:true});
  window.addEventListener('touchend',function(){dragging=false;});
  window.addEventListener('touchmove',function(e){ if(dragging&&e.touches[0]) setPos(e.touches[0].clientX); },{passive:true});
  ba.addEventListener('click',function(e){ setPos(e.clientX); });
})();

(function(){
  var C=window.KORS_CASE||{}, SL=C.slides||[];
  var lb=document.getElementById('kcpLb'), lbi=document.getElementById('kcpLbImg'), lbc=document.getElementById('kcpLbCount');
  if(!lb||!lbi) return;
  var list=[], idx=0, lbl='';
  function render(){ lbi.src=list[idx]; lbi.alt=(lbl||'Разворот')+' '+(idx+1)+' из '+list.length; if(lbc) lbc.textContent=(idx+1)+' / '+list.length; }
  function open(arr,i,l){ list=arr; idx=i; lbl=l||''; lb.classList.add('open'); lb.setAttribute('aria-hidden','false'); document.documentElement.style.overflow='hidden'; render(); }
  function close(){ lb.classList.remove('open'); lb.setAttribute('aria-hidden','true'); document.documentElement.style.overflow=''; lbi.removeAttribute('src'); }
  function go(d){ if(list.length<2) return; idx=(idx+d+list.length)%list.length; render(); }
  window.kcpLightbox={open:open};
  function noteSlides(SETS, cur){
    var ru=SETS.filter(function(s){return s.id==='ru';})[0], en=SETS.filter(function(s){return s.id==='en';})[0];
    if(ru&&en) return (ru.items.length===en.items.length?'По '+ru.items.length+' разворотов в русской и английской версии':ru.items.length+' разворотов на русском и '+en.items.length+' на английском')+' - нажмите на разворот, чтобы рассмотреть';
    return cur.items.length+' разворотов - нажмите на разворот, чтобы рассмотреть';
  }
  function altSlide(i,n,cur){ return 'Разворот '+(i+1)+' печатной презентации «Одоевские консервы»'+(cur.id==='en'?', английская версия':''); }
  var PH_ALT = [
    'Фруктово-ягодные начинки разных вкусов, выложенные в ряд',
    'Круассаны в разрезе с фруктовой начинкой на деревянной доске',
    'Сотрудница лаборатории изучает образцы продукции под микроскопом',
    'Варочный котёл с ягодной массой, рядом работники в спецодежде',
    'Ягодное варенье в стеклянной посуде, вокруг свежие ягоды и яблоки',
    'Складские стеллажи с паллетами готовой продукции'
  ];
  function notePhoto(SETS, cur){
    return 'Продукция, упаковка и производство. Нажмите на кадр, чтобы рассмотреть';
  }
  function altPhoto(i,n,cur){ return PH_ALT[i] || ('Кадр '+(i+1)+' из '+n); }
  function noteSites(SETS, cur){
    return 'Вкладка RU - povidlo.su под брендом «Одоевские консервы», вкладка EN - povidlo.pro под экспортным брендом POVIDLO для рынка MENA. Нажмите на кадр, чтобы рассмотреть';
  }
  function altSite(i,n,cur){ return 'Экран '+(i+1)+' из '+n+' сайта '+(cur.id==='en'?'povidlo.pro':'povidlo.su'); }

  function makeGallery(gal, SETS, noteFn, altFn, label, fbSel){
    if(!gal || !SETS.length) return;
    if(fbSel){ var ph=gal.parentNode.querySelector(fbSel); if(ph) ph.style.display='none'; }
    var tabs=SETS.length>1 ? '<div class="kcp__galtabs" role="tablist">'+SETS.map(function(s,i){return '<button class="kcp__galtab'+(i===0?' is-on':'')+'" data-lang="'+s.id+'" role="tab" aria-selected="'+(i===0)+'">'+s.label+'</button>';}).join('')+'</div>' : '<span></span>';
    gal.innerHTML='<div class="kcp__galhead">'+tabs+'<div class="kcp__galnav"><button class="kcp__galarrow" data-gprev aria-label="Назад">&#8249;</button><button class="kcp__galarrow" data-gnext aria-label="Вперёд">&#8250;</button></div></div><div class="kcp__galtrack"></div><div class="kcp__galnote"></div>';
    var track=gal.querySelector('.kcp__galtrack'), note=gal.querySelector('.kcp__galnote');
    var gp=gal.querySelector('[data-gprev]'), gn=gal.querySelector('[data-gnext]');
    var cur=SETS[0];
    function fill(){
      var h='';
      for(var i=0;i<cur.items.length;i++){ h+='<button class="kcp__galcard" data-gi="'+i+'" aria-label="'+label+' '+(i+1)+' из '+cur.items.length+'"><img src="'+cur.items[i]+'" alt="'+altFn(i,cur.items.length,cur)+'" loading="lazy"></button>'; }
      track.innerHTML=h; track.scrollLeft=0; note.textContent=noteFn(SETS,cur); setTimeout(upd,60);
    }
    function step(){ var c=track.querySelector('.kcp__galcard'); return c?c.offsetWidth+12:320; }
    function upd(){ gp.disabled=track.scrollLeft<8; gn.disabled=track.scrollLeft+track.clientWidth>=track.scrollWidth-8; }
    gp.addEventListener('click',function(){ track.scrollLeft-=step(); });
    gn.addEventListener('click',function(){ track.scrollLeft+=step(); });
    track.addEventListener('scroll',upd); window.addEventListener('resize',upd);
    track.addEventListener('click',function(e){ var b=e.target&&e.target.closest?e.target.closest('.kcp__galcard'):null; if(!b) return; open(cur.items, parseInt(b.getAttribute('data-gi'),10)||0, label); });
    var tabEls=gal.querySelectorAll('.kcp__galtab');
    Array.prototype.forEach.call(tabEls,function(t){
      t.addEventListener('click',function(){
        var id=t.getAttribute('data-lang');
        var next=SETS.filter(function(s){return s.id===id;})[0];
        if(!next||next===cur) return;
        cur=next;
        Array.prototype.forEach.call(tabEls,function(o){ var on=o===t; o.classList.toggle('is-on',on); o.setAttribute('aria-selected',on); });
        fill();
      });
    });
    fill();
  }

  makeGallery(document.querySelector('.kcp [data-gallery]'),
    [{id:'ru',label:'RU',items:SL},{id:'en',label:'EN',items:C.slidesEn||[]}].filter(function(x){return x.items&&x.items.length;}),
    noteSlides, altSlide, 'Разворот', '[data-img="presentation"]');

  var PH = [C.images.product1, C.images.product2, C.images.product3, C.images.photo4, C.images.photo5, C.images.photo6].filter(Boolean);
  makeGallery(document.querySelector('.kcp [data-photogal]'),
    [{id:'ph',label:'Съёмка',items:PH}].filter(function(x){return x.items&&x.items.length;}),
    notePhoto, altPhoto, 'Кадр', '.kcp__ph--grid');

  makeGallery(document.querySelector('.kcp [data-sitegal]'),
    [{id:'ru',label:'RU',items:C.siteRu||[]},{id:'en',label:'EN',items:C.siteEn||[]}].filter(function(x){return x.items&&x.items.length;}),
    noteSites, altSite, 'Скриншот', '[data-img="siteShots"]');
  var x=document.getElementById('kcpLbx'); if(x) x.addEventListener('click',close);
  var pv=document.getElementById('kcpLbPrev'); if(pv) pv.addEventListener('click',function(e){ e.stopPropagation(); go(-1); });
  var nx=document.getElementById('kcpLbNext'); if(nx) nx.addEventListener('click',function(e){ e.stopPropagation(); go(1); });
  lb.addEventListener('click',function(e){ if(e.target===lbi) return; if(e.target&&e.target.closest&&e.target.closest('.kcp__lbnav,.kcp__lbx')) return; close(); });
  document.addEventListener('keydown',function(e){ if(!lb.classList.contains('open')) return; if(e.key==='Escape'||e.keyCode===27) close(); else if(e.key==='ArrowLeft'||e.keyCode===37) go(-1); else if(e.key==='ArrowRight'||e.keyCode===39) go(1); });
  var sx=0, sy=0;
  lb.addEventListener('touchstart',function(e){ if(!e.touches[0]) return; sx=e.touches[0].clientX; sy=e.touches[0].clientY; },{passive:true});
  lb.addEventListener('touchend',function(e){ var t=e.changedTouches&&e.changedTouches[0]; if(!t) return; var dx=t.clientX-sx, dy=t.clientY-sy; if(Math.abs(dx)>45&&Math.abs(dx)>Math.abs(dy)) go(dx<0?1:-1); },{passive:true});
})();

(function(){
  // Визитки шага 06: две карточки рядом, клик открывает общий лайтбокс.
  var C=window.KORS_CASE||{};
  var CARDS=(C.cards||[]).filter(Boolean);
  var box=document.querySelector('.kcp [data-cards]');
  if(!box) return;
  if(!CARDS.length){ box.style.display='none'; return; }
  var ph=document.querySelector('.kcp [data-img="brand1"]');
  if(ph){ ph.style.display='none'; if(ph.parentNode) ph.parentNode.classList.add('is-two'); }
  var ALT=['Визитка: владелец бизнеса','Визитка: менеджер по продажам'];
  var h='';
  for(var i=0;i<CARDS.length;i++){
    h+='<button type="button" class="kcp__card" data-i="'+i+'" aria-label="Открыть визитку '+(i+1)+' из '+CARDS.length+'"><img src="'+CARDS[i]+'" alt="'+(ALT[i]||'Визитка')+'" loading="lazy"></button>';
  }
  box.innerHTML='<div class="kcp__cardsrow">'+h+'</div><div class="kcp__cardsnote">Нажмите на визитку, чтобы рассмотреть</div>';
  box.addEventListener('click',function(e){
    var b=e.target&&e.target.closest?e.target.closest('.kcp__card'):null;
    if(!b) return;
    if(window.kcpLightbox) window.kcpLightbox.open(CARDS, parseInt(b.getAttribute('data-i'),10), 'Визитка');
  });
})();
</script>
<script>
/* Сторож картинок.
   Иногда запрос картинки к CDN зависает: ответа нет, ошибки нет, элемент img остаётся
   пустым навсегда, а слот с заданными пропорциями держит пустое место во весь экран.
   Переназначить src такому элементу бесполезно - он уже мёртвый; помогает только
   НОВЫЙ элемент img. Поэтому раз в 10 с (до трёх попыток) создаём свежую картинку
   и подменяем ею зависшую, когда та загрузится.
   Слот прячем только если сервер явно ответил ошибкой: медленную картинку прятать
   нельзя, она может прийти позже. Пока вкладка в фоне, отсчёт не ведём - там браузер
   тормозит загрузку сам, и это не повод считать картинку потерянной. */
(function(){
  function ready(im){ return im && im.complete && im.naturalWidth > 0; }
  function watch(box){
    var first = box.querySelector("img");
    if(!first) return;
    first.addEventListener("error", function(){ box.style.display = "none"; });
    var tries = 0;
    function tick(){
      var cur = box.querySelector("img");
      if(ready(cur) || tries >= 3) return;
      if(document.hidden){ setTimeout(tick, 5000); return; }
      tries++;
      var url = ((cur && cur.getAttribute("src")) || "").split("?")[0];
      if(url){
        var fresh = new Image();
        fresh.alt = (cur && cur.alt) || "";
        fresh.onload = function(){ if(cur && cur.parentNode === box && !ready(cur)) box.replaceChild(fresh, cur); };
        fresh.onerror = function(){ box.style.display = "none"; };
        fresh.src = url + "?kr=" + Date.now();
      }
      setTimeout(tick, 10000);
    }
    setTimeout(tick, 5000);
  }
  var slots = document.querySelectorAll(".kcp [data-img], .step-media");
  for(var i = 0; i < slots.length; i++){ watch(slots[i]); }
})();
</script>

rec2709724901 - /case-invoicebox, шаги (168789009) (23273 симв.)

<!-- ============================================================
     KORS · КЕЙС · INVOICEBOX
     Заполнение фото/видео — только в списке KORS_CASE ниже.
     Картинки: ссылка в кавычки ('' = заглушка). Видео: ID Kinescope.
     ============================================================ -->
<script>
window.KORS_CASE = {
  images: {
    cover:      'https://static.tildacdn.com/tild6235-3838-4235-b430-646665666232/ib-cover-a-city.jpg',   // обложка вверху - кадр из второго ролика, Москва-Сити
    aboutShot:  '',   // «О компании» - скрин сервиса/интерфейса
    info1:      '',   // ролик «как выставить счёт» - кадр (если без видео)
    info2:      '',   // ролик «для интернет-магазинов» - кадр
    mkt:        'https://static.tildacdn.com/tild3464-6437-4161-b731-353565616265/ib-ads.jpg',   // рекламный кабинет проекта (данные скрыты)
    grtCover:   'https://static.tildacdn.com/tild6266-3832-4334-b066-303434623230/grt-site.jpg',   // GIARTI - первый экран сайта
    grt1:       '',   // GRT - пример
    siteSoon:   ''    // планы - макет лендингов
  },
  videos: {
    main:  '2FXfjS6hYEvLkWNKUveoBx',  // шаг 01 - первое видео о сервисе, полная версия
    v2:    '0GfobL6RnAzhPeiopXjNHS',  // шаг 02 - второе видео, «Инвойсбокс 2»
    info1: 'b66cpVCFFFVycfDvLFXFR3',  // шаг 03 - короткий ролик «выставить счёт»
    info2: '7akHJzKdcoSrPiHtRbRBqk'   // шаг 03 - короткий ролик «для интернет-магазинов»
  }
};
</script>

<div class="kcp">
<header class="kcp__hero">
    <div class="kcp__hero-in">
      <a class="kcp__back" href="/#rec2667018101">← Все проекты</a>
      <div class="kcp__eyebrow">КЕЙС · ФИНТЕХ · ВИДЕО + МАРКЕТИНГ</div>
      <h1 class="kcp__title">Инвойсбокс</h1>
      <p class="kcp__lead">Как объяснить сложный финтех простым языком - и почему клиент возвращался за видео, инфографикой и маркетингом, а затем доверил нам и свой второй бизнес.</p>
      <div class="kcp__facts">
        <div class="kcp__fact"><span>Сфера</span><b>Финтех · приём платежей (B2B)</b></div>
        <div class="kcp__fact"><span>С чего начали</span><b>Видео о сервисе</b></div>
        <div class="kcp__fact"><span>Где сейчас</span><b>Продвижение + 2-й бизнес</b></div>
        <div class="kcp__fact"><span>Формат</span><b>Видео · инфографика · реклама</b></div>
      </div>
    </div>
    <div class="kcp__cover kcp__ph" data-img="cover"><div class="kcp__ph-label">📷 Обложка: кадр из видео / интерфейс сервиса (16:9)</div></div>
  </header>
  <section class="kcp__sec">
    <div class="kcp__grid2">
      <div><div class="kcp__kick">- О КОМПАНИИ</div><h2 class="kcp__h2">Мощный сервис, который сложно объяснить</h2></div>
      <div class="kcp__prose">
        <p>Инвойсбокс - сервис приёма онлайн-платежей и автоматизации выставления счетов для бизнеса. Компании выставляют и отправляют счета юридическим лицам за минуту, принимают оплату на сайте и подключают решения для интернет-магазинов.</p>
        <p>Продукт сильный, но у него есть особенность: <b>финтех сложно воспринимается</b>. Чтобы клиент подключился, ему нужно за секунды понять, что это за сервис и какая от него выгода. На словах и текстом это объяснять долго.</p>
      </div>
    </div>
  </section>
  <section class="kcp__sec">
    <div class="kcp__callout">
      <div class="kcp__callout-k">ЗАДАЧА</div>
      <div class="kcp__callout-t">Объяснить сложный финтех-продукт так, чтобы целевая аудитория поняла суть и выгоду за считанные секунды - и захотела подключиться.</div>
    </div>
  </section>
  <section class="kcp__sec">
    <div class="kcp__kick">- КАК ШЛА РАБОТА</div>
    <h2 class="kcp__h2">От одного ролика - к маркетингу и второму бизнесу</h2>
    <p class="kcp__sub">Всё началось с одного объясняющего видео. Дальше клиент возвращался снова и снова - за новыми форматами.</p>
    <ol class="kcp__timeline">
      <li class="kcp__step"><div class="kcp__step-num">01</div><div class="kcp__step-body">
        <h3>Видео о сервисе</h3>
        <p>Сняли первое видео: кто такие Инвойсбокс, чем полезны и как это работает - коротко и понятно. Первый инструмент, который показывает продукт вместо долгих объяснений.</p>
        <div class="kcp__ph kcp__ph--wide" data-video="main"><div class="kcp__ph-label">🎬 Видео о сервисе (Kinescope)</div></div>
      </div></li>
      <li class="kcp__step"><div class="kcp__step-num">02</div><div class="kcp__step-body">
        <h3>Второе видео - глубже и проще</h3>
        <p>Клиент вернулся за вторым роликом. Здесь мы подробнее и ещё проще разобрали продукт - версия для сайта и презентаций, чтобы объяснять сервис новым клиентам.</p>
        <div class="kcp__ph kcp__ph--wide" data-video="v2"><div class="kcp__ph-label">🎬 Второе видео (подробный разбор)</div></div>
      </div></li>
      <li class="kcp__step"><div class="kcp__step-num">03</div><div class="kcp__step-body">
        <h3>Два коротких ролика</h3>
        <p>Дальше - два коротких ролика (~30 секунд): «как выставить счёт на сервисе» и «решение для интернет-магазинов» (у клиента появился новый сервис). Простыми словами о сложном - точно под их аудиторию.</p>
        <div class="kcp__ph kcp__ph--grid">
          <div class="kcp__ph" data-video="info1" data-img="info1"><div class="kcp__ph-label">🎬 ролик «выставить счёт»</div></div>
          <div class="kcp__ph" data-video="info2" data-img="info2"><div class="kcp__ph-label">🎬 ролик «для интернет-магазинов»</div></div>
        </div>
      </div></li>
      <li class="kcp__step"><div class="kcp__step-num">04</div><div class="kcp__step-body">
        <h3>Подготовка и запуск продвижения</h3>
        <p>Структуру подготовили под рекламный трафик: настроили точки конверсии, предусмотрели посадочные сценарии под разные запросы и собрали аналитику, чтобы видеть, что работает.</p>
        <p>Кампании запущены и работают, мы их ведём. О результатах расскажем, когда наберётся показательный период.</p>
        <div class="kcp__ph kcp__ph--ads" data-img="mkt"><div class="kcp__ph-label">📊 рекламный кабинет проекта</div></div>
      </div></li>
      <li class="kcp__step kcp__chapter"><div class="kcp__step-num kcp__step-num--brand">GIARTI</div><div class="kcp__step-body">
        <h3>Второй бизнес клиента - GIARTI</h3>
        <p>Лучшее подтверждение доверия: клиент передал нам и свой второй бизнес - <b>GIARTI</b>. Это онлайн-галерея высокохудожественных изделий ручной работы от мастеров из России и других стран: вазы, скульптура, янтарь, ювелирные изделия, художественное литьё. В каталоге есть отдельные разделы для мастеров и для дизайнеров, доставка с гарантией, а каждое изделие проверяют перед отправкой покупателю.</p>
        <p>Другой продукт и другая аудитория, но схема та же: разбираемся в товаре, готовим структуру под рекламный трафик и ведём кампании. Работа продолжается - о результатах расскажем, когда наберётся показательный период.</p>
        <p><a class="kcp__link" href="https://giarti.com" target="_blank" rel="noopener">giarti.com</a></p>
        <div class="kcp__ph kcp__ph--site" data-img="grtCover"><div class="kcp__ph-label">🖼 GIARTI: первый экран сайта</div></div>
      </div></li>
      <li class="kcp__step kcp__step--next"><div class="kcp__step-num">→</div><div class="kcp__step-body">
        <h3>Что дальше</h3>
        <p>Следующий этап - лендинги под каждый продукт: отдельная страница на каждый сервис, где сложный финтех объясняется максимально просто. Задача - чтобы любой человек понял, что это за сервис и как им удобно пользоваться.</p>
      </div></li>
    </ol>
  </section>
  <section class="kcp__sec">
    <div class="kcp__result">
      <div class="kcp__kick">- ЧТО ИЗМЕНИЛОСЬ</div>
      <h2 class="kcp__h2">Сложное стало понятным - и продающим</h2>
      <div class="kcp__result-grid">
        <div class="kcp__rcard"><div class="kcp__rc-t">Просто о сложном</div><p>Финтех-продукт объяснён так, что аудитория понимает суть и выгоду за секунды.</p></div>
        <div class="kcp__rcard"><div class="kcp__rc-t">Клиент возвращается</div><p>От одного видео - к серии роликов и инфографике, дальше - подготовка к продвижению.</p></div>
        <div class="kcp__rcard"><div class="kcp__rc-t">Доверие = 2-й бизнес</div><p>Клиент передал нам и второй бизнес - онлайн-галерею изделий ручной работы GIARTI.</p></div>
        <div class="kcp__rcard"><div class="kcp__rc-t">Постоянная работа</div><p>Не разовая задача, а постоянная работа по двум бизнесам клиента.</p></div>
      </div>
    </div>
  </section>
  <section class="kcp__sec">
    <div class="kcp__kick">- ЧТО ВОШЛО В РАБОТУ</div>
    <div class="kcp__chips">
      <span>Видеопродакшн</span><span>Объясняющие ролики</span><span>Моушн / инфографика</span><span>Короткие ролики 30 сек</span><span>Маркетинг и реклама</span><span>Ведение проекта</span><span>Реклама GIARTI</span><span>Лендинги (в планах)</span>
    </div>
  </section>
  <!-- ===== ВИДЕО ПРОЕКТА (СКРЫТО) ===== -->
  <!-- СЕКЦИЯ СКРЫТА 28.08.2026. Причина: ролик xgBCJrU3Fy9CtKDXR9R23S дублировал шаг 01, а на странице и так четыре ролика.
       Разметка сохранена. Чтобы вернуть секцию, снимите этот комментарий.
  <section class="kcp__sec">
    <div class="kcp__kick">- СМОТРЕТЬ</div>
    <h2 class="kcp__h2">Видео проекта</h2>
    <div class="kcp__video"><iframe src="https://kinescope.io/embed/xgBCJrU3Fy9CtKDXR9R23S" allow="autoplay; fullscreen; encrypted-media; picture-in-picture" allowfullscreen frameborder="0"></iframe></div>
  </section>
  -->
  <!-- ===== ОТЗЫВ КЛИЕНТА ===== -->
  <section class="kcp__sec">
    <div class="kcp__kick">- ОТЗЫВ</div>
    <h2 class="kcp__h2">Благодарственное письмо</h2>
    <p class="kcp__sub">ООО «Объединённый расчётный центр» - юридическое лицо группы «Инвойсбокс»</p>
    <div class="kcp__letter"><img src="https://static.tildacdn.com/tild3461-6534-4530-b265-323334643764/pismo-invoicebox-120.jpg" alt="Благодарственное письмо от ООО «Объединённый расчётный центр» (Инвойсбокс) команде KORS Production за видеоролики и ведение маркетинга" loading="lazy"></div>
  </section>
  <!-- ===== ДРУГИЕ КЕЙСЫ ===== -->
  <section class="kcp__sec">
    <div class="kcp__kick">- ЕЩЁ</div>
    <h2 class="kcp__h2">Другие кейсы</h2>
    <div class="kcp__more">
      <a class="kcp__more-card" href="/case-odoevskie"><span>Кейс</span><b>Одоевские консервы</b><i>Видео, фирменный стиль и два сайта →</i></a>
      <a class="kcp__more-card" href="/case-vistex"><span>Кейс</span><b>Вистекс</b><i>Съёмка видео о предприятии →</i></a>
    </div>
  </section>
  <section class="kcp__cta">
    <h2>Сложный продукт? Объясним просто.</h2>
    <p>Поможем показать ваш сервис так, чтобы клиент понял его за секунды.</p>
    <a class="kcp__cta-btn" href="#popup:zayavka">Обсудить проект →</a>
  </section>
</div>

<style>
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Unbounded:wght@400;600;700;800&display=swap');
.kcp{--bg:#0C0C0E;--raise:#141416;--card:#1B1B1F;--border:#2A2A2E;--soft:#242428;--text:#F5F3EF;--muted:#9A9A9A;--faint:#6a6a6e;--accent:#6D5DFB;--glow:rgba(109,93,251,.14);
  box-sizing:border-box;background:var(--bg);color:var(--text);font-family:'Manrope',Arial,sans-serif;-webkit-font-smoothing:antialiased;}
.kcp *{box-sizing:border-box;margin:0;padding:0;}
.kcp p{line-height:1.65;}
.kcp__eyebrow,.kcp__kick{font-family:'Unbounded';font-size:12px;letter-spacing:.14em;color:var(--accent);}
.kcp__h2{font-family:'Unbounded';font-weight:700;font-size:clamp(26px,3.2vw,42px);letter-spacing:-.02em;line-height:1.12;margin:14px 0 0;}
.kcp__sub{color:var(--muted);font-size:17px;line-height:1.6;max-width:640px;margin-top:14px;}
.kcp__hero{padding:70px 6vw 0;max-width:1280px;margin:0 auto;}
.kcp__hero-in{max-width:900px;}
.kcp__back{display:inline-block;color:var(--muted);text-decoration:none;font-size:14px;font-weight:600;margin-bottom:34px;transition:.2s;}
.kcp__back:hover{color:var(--accent);}
.kcp__hero .kcp__eyebrow{margin-bottom:18px;}
.kcp__title{font-family:'Unbounded';font-weight:800;font-size:clamp(40px,7vw,88px);letter-spacing:-.03em;line-height:1;margin-bottom:24px;}
.kcp__lead{font-size:clamp(18px,2vw,22px);line-height:1.55;color:#d8d6d1;max-width:760px;}
.kcp__facts{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:14px;overflow:hidden;margin-top:44px;}
.kcp__fact{background:var(--raise);padding:20px 22px;display:flex;flex-direction:column;gap:7px;}
.kcp__fact span{font-size:12px;color:var(--faint);text-transform:uppercase;letter-spacing:.06em;}
.kcp__fact b{font-family:'Unbounded';font-weight:600;font-size:14px;line-height:1.3;}
.kcp__cover{margin:48px auto 0;max-width:1280px;aspect-ratio:16/8;border-radius:20px;}
.kcp__sec{max-width:1080px;margin:0 auto;padding:64px 6vw;}
.kcp__grid2{display:grid;grid-template-columns:0.85fr 1.15fr;gap:48px;align-items:start;}
.kcp__prose p{color:#c9c7c2;font-size:17px;margin-bottom:16px;}
.kcp__prose p:last-child{margin-bottom:0;}
.kcp__prose b{color:var(--text);font-weight:600;}
.kcp__callout{background:linear-gradient(135deg,rgba(109,93,251,.10),rgba(109,93,251,.02));border:1px solid rgba(109,93,251,.3);border-radius:18px;padding:40px 44px;}
.kcp__callout-k{font-family:'Unbounded';font-size:12px;letter-spacing:.14em;color:var(--accent);margin-bottom:14px;}
.kcp__callout-t{font-family:'Unbounded';font-weight:600;font-size:clamp(20px,2.4vw,30px);line-height:1.35;letter-spacing:-.01em;}
.kcp__timeline{list-style:none;margin-top:44px;display:flex;flex-direction:column;gap:26px;}
.kcp__step{display:grid;grid-template-columns:88px 1fr;gap:26px;background:var(--raise);border:1px solid var(--border);border-radius:18px;padding:30px 32px;transition:.25s;}
.kcp__step:hover{border-color:rgba(109,93,251,.4);}
.kcp__step-num{font-family:'Unbounded';font-weight:700;font-size:34px;color:var(--accent);line-height:1;opacity:.85;}
.kcp__step-body h3{font-family:'Unbounded';font-weight:600;font-size:22px;letter-spacing:-.01em;margin-bottom:12px;}
.kcp__step-body p{color:#c4c2bd;font-size:16px;}
.kcp__step--next{background:transparent;border-style:dashed;}
.kcp__step--next .kcp__step-num{opacity:1;}
.kcp__ph{position:relative;background:repeating-linear-gradient(45deg,#141416,#141416 12px,#17171a 12px,#17171a 24px);border:2px dashed #38383e;border-radius:14px;min-height:150px;display:flex;align-items:center;justify-content:center;text-align:center;}
.kcp__ph-label{color:#8a8a90;font-size:13px;font-weight:600;line-height:1.5;padding:16px;}
.kcp__ph-label small{color:var(--faint);font-weight:500;}
.kcp__ph--wide{margin-top:18px;aspect-ratio:16/8;min-height:0;}
.kcp__ph--site{margin-top:18px;aspect-ratio:1200/681;min-height:0;}
.kcp__ph--ads{margin-top:18px;aspect-ratio:1200/607;min-height:0;}
.kcp__step-num--brand{font-size:17px!important;letter-spacing:.02em;padding-top:5px;}
.kcp__link{color:#A99CFF;text-decoration:underline;text-underline-offset:3px;}
.kcp__link:hover{color:#F5F3EF;}
.kcp__ph--grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:18px;background:none;border:none;padding:0;}
.kcp__ph--grid .kcp__ph{aspect-ratio:4/3;min-height:0;}
.kcp__cover.kcp__ph{aspect-ratio:16/8;}
.kcp__ba{position:relative;margin-top:20px;aspect-ratio:16/9;border-radius:16px;overflow:hidden;border:1px solid var(--border);user-select:none;}
.kcp__ba-after,.kcp__ba-before{position:absolute;inset:0;border-radius:0;border:none;}
.kcp__ba-before{width:100%;clip-path:inset(0 50% 0 0);}
.kcp__ba-handle{position:absolute;top:0;bottom:0;left:50%;width:2px;background:var(--accent);cursor:ew-resize;transform:translateX(-1px);}
.kcp__ba-handle span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:40px;height:40px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(0,0,0,.4);}
.kcp__ba-handle span::before{content:'⟷';color:#000;font-size:18px;font-weight:700;}
.kcp__ba-tag{position:absolute;top:14px;font-family:'Unbounded';font-size:11px;letter-spacing:.1em;background:rgba(0,0,0,.6);padding:5px 11px;border-radius:6px;}
.kcp__ba-tag--l{left:14px;}
.kcp__ba-tag--r{right:14px;}
.kcp__ba-hint{text-align:center;color:var(--faint);font-size:13px;margin-top:12px;}
.kcp__result-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:34px;}
.kcp__rcard{background:var(--raise);border:1px solid var(--border);border-radius:16px;padding:26px 28px;}
.kcp__rc-t{font-family:'Unbounded';font-weight:600;font-size:18px;color:var(--accent);margin-bottom:10px;}
.kcp__rcard p{color:#c4c2bd;font-size:15px;}
.kcp__chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;}
.kcp__chips span{font-family:'Manrope';font-weight:600;font-size:14px;color:var(--text);background:rgba(109,93,251,.08);border:1px solid rgba(109,93,251,.4);border-radius:8px;padding:10px 16px;}
.kcp__video{margin-top:24px;aspect-ratio:16/9;border-radius:18px;overflow:hidden;border:1px solid var(--border);background:#000;}
.kcp__video iframe{width:100%;height:100%;border:none;}
.kcp__cta{max-width:900px;margin:20px auto 0;padding:80px 6vw 96px;text-align:center;}
.kcp__cta h2{font-family:'Unbounded';font-weight:700;font-size:clamp(26px,3.4vw,42px);letter-spacing:-.02em;margin-bottom:16px;}
.kcp__cta p{color:var(--muted);font-size:18px;margin-bottom:30px;}
.kcp__cta-btn{display:inline-block;background:var(--accent);color:#fff;text-decoration:none;font-family:'Manrope';font-weight:700;font-size:16px;padding:18px 38px;border-radius:10px;transition:.25s;}
.kcp__cta-btn:hover{transform:translateY(-2px);box-shadow:0 14px 34px var(--glow);}
@media (max-width:820px){
  .kcp__facts{grid-template-columns:1fr 1fr;}
  .kcp__grid2{grid-template-columns:1fr;gap:20px;}
  .kcp__step{grid-template-columns:1fr;gap:14px;padding:24px 22px;}
  .kcp__step-num{font-size:28px;}
  .kcp__result-grid{grid-template-columns:1fr;}
  .kcp__ph--grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:480px){
  .kcp__hero{padding:48px 20px 0;}
  .kcp__sec{padding:48px 20px;}
  .kcp__facts{grid-template-columns:1fr;}
  .kcp__callout{padding:28px 24px;}
}
.kcp [data-img].kcp--filled,.kcp [data-video].kcp--filled{background:none;border:none;}
.kcp [data-img] img,.kcp [data-video] img{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit;}
.kcp [data-fit="contain"] img{object-fit:contain;background:#0f0f11;padding:6%;}
.kcp [data-video].kcp--filled iframe{width:100%;height:100%;border:none;display:block;}
.kcp__ph.kcp--filled{padding:0;}
.kcp__chapter{background:linear-gradient(135deg,rgba(109,93,251,.10),rgba(109,93,251,.02))!important;border-color:rgba(109,93,251,.4)!important;}
.kcp__chapter .kcp__step-num{font-size:22px;}
/* Благодарственное письмо и блок «Другие кейсы» */
.kcp__letter{margin-top:26px;max-width:440px}
.kcp__letter img{display:block;width:100%;height:auto;border-radius:14px;border:1px solid var(--border)}
.kcp__more{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:28px}
.kcp__more-card{display:block;background:var(--raise);border:1px solid var(--border);border-radius:16px;padding:24px 26px;text-decoration:none;transition:.2s}
.kcp__more-card:hover{border-color:var(--accent)}
.kcp__more-card span{display:block;font-size:12px;letter-spacing:2px;color:var(--accent);text-transform:uppercase;margin-bottom:10px}
.kcp__more-card b{display:block;font-family:'Unbounded',sans-serif;font-weight:700;font-size:22px;line-height:1.2;color:var(--text);margin-bottom:8px}
.kcp__more-card i{font-style:normal;font-size:15px;color:var(--muted)}
@media (max-width:640px){.kcp__more{grid-template-columns:1fr}}
</style>
<script>
(function(){
  var C=window.KORS_CASE||{}; var IMG=C.images||{}, VID=C.videos||{};
  document.querySelectorAll('.kcp [data-video]').forEach(function(el){
    var id=VID[el.getAttribute('data-video')];
    if(id){ el.classList.add('kcp--filled'); el.innerHTML='<iframe src="https://kinescope.io/embed/'+id+'" allow="autoplay; fullscreen; encrypted-media; picture-in-picture" allowfullscreen frameborder="0"></iframe>'; el.removeAttribute('data-img'); }
  });
  document.querySelectorAll('.kcp [data-img]').forEach(function(el){
    var ALT_IB={grtCover:'Первый экран сайта GIARTI - онлайн-галереи изделий ручной работы',mkt:'Рекламный кабинет проекта в Яндекс Директе: список кампаний со статусами и площадками, показатели и названия кампаний скрыты'};
    var url=IMG[el.getAttribute('data-img')];
    if(url){ el.classList.add('kcp--filled'); el.innerHTML='<img src="'+url+'" alt="'+(ALT_IB[el.getAttribute('data-img')]||'')+'">'; }
  });
})();
(function(){
  var ba=document.getElementById('kcpBA'); if(!ba) return;
  var before=document.getElementById('kcpBABefore');
  var handle=document.getElementById('kcpBAHandle');
  var dragging=false;
  function setPos(clientX){
    var r=ba.getBoundingClientRect();
    var x=Math.max(0,Math.min(clientX-r.left,r.width));
    var pct=(x/r.width)*100;
    before.style.clipPath='inset(0 '+(100-pct)+'% 0 0)';
    handle.style.left=pct+'%';
  }
  handle.addEventListener('mousedown',function(){dragging=true;});
  window.addEventListener('mouseup',function(){dragging=false;});
  window.addEventListener('mousemove',function(e){ if(dragging) setPos(e.clientX); });
  handle.addEventListener('touchstart',function(){dragging=true;},{passive:true});
  window.addEventListener('touchend',function(){dragging=false;});
  window.addEventListener('touchmove',function(e){ if(dragging&&e.touches[0]) setPos(e.touches[0].clientX); },{passive:true});
  ba.addEventListener('click',function(e){ setPos(e.clientX); });
})();
</script>

<script>
/* Сторож картинок.
   Иногда запрос картинки к CDN зависает: ответа нет, ошибки нет, элемент img остаётся
   пустым навсегда, а слот с заданными пропорциями держит пустое место во весь экран.
   Переназначить src такому элементу бесполезно - он уже мёртвый; помогает только
   НОВЫЙ элемент img. Поэтому раз в 10 с (до трёх попыток) создаём свежую картинку
   и подменяем ею зависшую, когда та загрузится.
   Слот прячем только если сервер явно ответил ошибкой: медленную картинку прятать
   нельзя, она может прийти позже. Пока вкладка в фоне, отсчёт не ведём - там браузер
   тормозит загрузку сам, и это не повод считать картинку потерянной. */
(function(){
  function ready(im){ return im && im.complete && im.naturalWidth > 0; }
  function watch(box){
    var first = box.querySelector("img");
    if(!first) return;
    first.addEventListener("error", function(){ box.style.display = "none"; });
    var tries = 0;
    function tick(){
      var cur = box.querySelector("img");
      if(ready(cur) || tries >= 3) return;
      if(document.hidden){ setTimeout(tick, 5000); return; }
      tries++;
      var url = ((cur && cur.getAttribute("src")) || "").split("?")[0];
      if(url){
        var fresh = new Image();
        fresh.alt = (cur && cur.alt) || "";
        fresh.onload = function(){ if(cur && cur.parentNode === box && !ready(cur)) box.replaceChild(fresh, cur); };
        fresh.onerror = function(){ box.style.display = "none"; };
        fresh.src = url + "?kr=" + Date.now();
      }
      setTimeout(tick, 10000);
    }
    setTimeout(tick, 5000);
  }
  var slots = document.querySelectorAll(".kcp [data-img], .step-media");
  for(var i = 0; i < slots.length; i++){ watch(slots[i]); }
})();
</script>

rec2709838401 - /case-vistex, шаги (168797509) (30240 симв.)

<!-- ============================================================
     KORS · КЕЙС · ВИСТЕКС
     Заполнение фото/видео - только в списке KORS_CASE ниже.
     ============================================================ -->
<script>
window.KORS_CASE = {
  images: {
    cover:     'https://static.tildacdn.com/tild3664-3263-4134-a264-346265333031/vx-cover-a-zavod.jpg',   // обложка вверху 2:1, стоп-кадр из фильма о заводе
    email:     'https://static.tildacdn.com/tild3132-6165-4266-a461-656338346239/vx-email.jpg',   // дизайн письма со встроенным видео (скрин)
    label1:    '',   // концепт этикетки/салфетки 1 (мультяшная стилистика)
    label2:    '',   // концепт этикетки/салфетки 2
    siteSoon:  ''    // макет сайта (в планах) - слот скрыт в разметке
  },
  // Концепты упаковки салфеток. Если массив пуст, шаг 03 показывает два одиночных слота label1/label2.
  labels: [
    'https://static.tildacdn.com/tild3961-3833-4932-a163-313038643335/vx-salfetki-pylesos.jpg',
    'https://static.tildacdn.com/tild3134-3133-4266-a566-636434663239/vx-salfetki-enot.jpg',
    'https://static.tildacdn.com/tild6361-3032-4439-b530-376236353062/vx-salfetki-pyatna.jpg',
    'https://static.tildacdn.com/tild3330-3533-4134-b432-373062633630/vx-salfetki-kuhnya.jpg'
  ],
  videos: {
    main:  'fv7FAnLfbLaDaNJLtSQ74H'   // главное видео о заводе (стоит наш ролик)
  }
};
</script>

<div class="kcp">
<header class="kcp__hero">
    <div class="kcp__hero-in">
      <a class="kcp__back" href="/#rec2667018101">← Все проекты</a>
      <div class="kcp__eyebrow">КЕЙС · ПРОИЗВОДСТВО · ВИДЕО</div>
      <h1 class="kcp__title">Вистекс</h1>
      <div class="kcp__tags"><span class="kcp__tag">Видео</span><span class="kcp__tag">Дизайн</span></div>
      <p class="kcp__lead">Как уложить многопрофильное производство в трёхминутный ролик - и превратить его в рабочий инструмент отдела продаж.</p>
      <div class="kcp__facts">
        <div class="kcp__fact"><span>Сфера</span><b>Нетканые материалы · B2B</b></div>
        <div class="kcp__fact"><span>С чего начали</span><b>Видео о заводе</b></div>
        <div class="kcp__fact"><span>Результат</span><b>Ролик работает в продажах</b></div>
        <div class="kcp__fact"><span>Дальше</span><b>Этикетки, салфетки, сайт</b></div>
      </div>
    </div>
    <div class="kcp__cover kcp__ph" data-img="cover"><div class="kcp__ph-label">📷 Обложка: производство / нетканые полотна (2:1)</div></div>
  </header>
  <section class="kcp__sec">
    <div class="kcp__grid2">
      <div><div class="kcp__kick">- О КОМПАНИИ</div><h2 class="kcp__h2">Большой завод и продукция для разных отраслей</h2></div>
      <div class="kcp__prose">
        <p>«Вистекс» - один из крупнейших производителей нетканых полотен в европейской части России (работает с 1992 года, завод в подмосковном Кудинове). Продукция идёт в разные отрасли промышленности: геотекстиль, материалы для обуви и мебели, для автопрома, напольных покрытий, протирочных салфеток, фильтров и другие.</p>
        <p>Производство мощное и разнообразное - но именно в этом сложность: <b>рассказать клиенту про все направления и масштаб</b> коротко и понятно почти невозможно, если делать это на словах.</p>
      </div>
    </div>
  </section>
  <section class="kcp__sec">
    <div class="kcp__callout">
      <div class="kcp__callout-k">ЗАДАЧА</div>
      <div class="kcp__callout-t">За несколько минут показать масштаб завода и все направления так, чтобы клиент увидел: здесь закроют его задачу - какой бы она ни была.</div>
    </div>
  </section>
  <section class="kcp__sec">
    <div class="kcp__kick">- КАК ШЛА РАБОТА</div>
    <h2 class="kcp__h2">От ролика о заводе - к письму для продаж</h2>
    <p class="kcp__sub">Начали с одного большого видео о производстве - и оно стало рабочим инструментом, который принёс заводу конкретный результат.</p>
    <ol class="kcp__timeline">
      <li class="kcp__step"><div class="kcp__step-num">01</div><div class="kcp__step-body">
        <h3>Видео о заводе: производство за 3 минуты</h3>
        <p>Сняли ключевой ролик о производстве: за три минуты показали производство и линейку продукции завода. Плотно, наглядно, без воды - уровень продакшена под стать масштабу компании.</p>
        <div class="kcp__ph kcp__ph--wide" data-video="main"><div class="kcp__ph-label">🎬 Видео о заводе (Kinescope)</div></div>
      </div></li>
      <li class="kcp__step"><div class="kcp__step-num">02</div><div class="kcp__step-body">
        <h3>Дизайн письма со встроенным видео</h3>
        <p>Ролик начали отправлять клиентам - и мы собрали под него готовое HTML-письмо для рассылки коммерческих предложений. Внутри: логотип завода, короткий текст от менеджера по развитию, превью ролика с кнопкой воспроизведения и пометка, что коммерческое предложение приложено отдельным файлом.</p>
        <p>Что изменилось в работе: <b>коммерческие предложения уходят вместе с роликом, и продукт больше не приходится объяснять текстом - клиент сразу видит завод, линии и готовую продукцию.</b></p>
        <div class="kcp__ph kcp__ph--mail" data-img="email"><div class="kcp__ph-label">✉️ дизайн письма со встроенным видео (скрин)</div></div>
      </div></li>
      <li class="kcp__step"><div class="kcp__step-num">03</div><div class="kcp__step-body">
        <h3>Дизайн этикеток и салфеток - концепты</h3>
        <p>Пошли дальше в брендинг потребительской продукции. Предложили заводу концепты дизайна этикеток и салфеток в фирменной мультяшной стилистике: нарисовали графику, написали тексты и описания - всё под ключ с нашей стороны.</p>
        <div class="kcp__gal kcp__gal--pack" data-labelgal></div>
        <div class="kcp__ph kcp__ph--grid">
          <div class="kcp__ph" data-img="label1"><div class="kcp__ph-label">🎨 концепт этикетки/салфетки 1</div></div>
          <div class="kcp__ph" data-img="label2"><div class="kcp__ph-label">🎨 концепт этикетки/салфетки 2</div></div>
        </div>
      </div></li>
      <li class="kcp__step kcp__step--next"><div class="kcp__step-num">→</div><div class="kcp__step-body">
        <h3>Что дальше</h3>
        <p>Следующий этап - сайт завода: единая витрина всех направлений с той же понятной подачей, что и в видео.</p>
        <!-- СЛОТ СКРЫТ 28.08.2026. Причина: макета сайта пока нет, заглушка оставляла пустое место. Ключ images.siteSoon в конфиге сохранён - чтобы вернуть слот, снимите этот комментарий.
        <div class="kcp__ph kcp__ph--wide" data-img="siteSoon"><div class="kcp__ph-label">макет сайта (появится)</div></div>
        -->
      </div></li>
    </ol>
  </section>
  <section class="kcp__sec">
    <div class="kcp__result">
      <div class="kcp__kick">- ЧТО ИЗМЕНИЛОСЬ</div>
      <h2 class="kcp__h2">Ролик и письмо, которые работают в продажах</h2>
      <div class="kcp__result-grid">
        <div class="kcp__rcard"><div class="kcp__rc-t">Всё производство за 3 минуты</div><p>Сложное многопрофильное производство укладывается в один понятный ролик.</p></div>
        <div class="kcp__rcard"><div class="kcp__rc-t">Продукт стали понимать</div><p>С письмом и видео клиенты сразу видят, что завод может закрыть их потребности.</p></div>
        <div class="kcp__rcard"><div class="kcp__rc-t">Продажи с видео в руках</div><p>Менеджеры отправляют коммерческие предложения вместе с роликом - завод показывают, а не пересказывают.</p></div>
        <div class="kcp__rcard"><div class="kcp__rc-t">Развитие бренда</div><p>Концепты этикеток и салфеток, впереди - сайт завода.</p></div>
      </div>
    </div>
  </section>
  <section class="kcp__sec">
    <div class="kcp__kick">- ЧТО ВОШЛО В РАБОТУ</div>
    <div class="kcp__chips">
      <span>Видеопродакшн</span><span>Съёмка производства</span><span>Сценарий ролика</span><span>Email-дизайн</span><span>Видео в письме</span><span>Концепты этикеток и салфеток</span><span>Копирайтинг</span><span>Сайт (в планах)</span>
    </div>
  </section>
  <!-- ===== ВИДЕО ПРОЕКТА (СКРЫТО) =====
     СЕКЦИЯ СКРЫТА 28.08.2026. Причина: тот же ролик уже стоит в шаге 01, на странице он дублировался.
     Разметка сохранена целиком. Чтобы вернуть секцию, снимите этот комментарий.
  <section class="kcp__sec">
    <div class="kcp__kick">- СМОТРЕТЬ</div>
    <h2 class="kcp__h2">Видео проекта</h2>
    <div class="kcp__video"><iframe src="https://kinescope.io/embed/fv7FAnLfbLaDaNJLtSQ74H" allow="autoplay; fullscreen; encrypted-media; picture-in-picture" allowfullscreen frameborder="0"></iframe></div>
  </section>
  -->
  <section class="kcp__sec">
    <div class="kcp__kick">- ОТЗЫВ</div>
    <h2 class="kcp__h2">Благодарственное письмо</h2>
    <p class="kcp__sub">ООО «Вистекс» - производитель нетканых полотен, завод в подмосковном Кудинове</p>
    <div class="kcp__letter"><img src="https://static.tildacdn.com/tild3665-6165-4336-a262-666463636263/pismo-visteks-1200.jpg" alt="Благодарственное письмо от ООО «Вистекс» команде KORS Production за фильм о производстве и дизайн материалов" loading="lazy"></div>
  </section>
  <section class="kcp__sec">
    <div class="kcp__kick">- ЕЩЁ</div>
    <h2 class="kcp__h2">Другие кейсы</h2>
    <div class="kcp__more">
      <a class="kcp__more-card" href="/case-odoevskie"><span>Кейс</span><b>Одоевские консервы</b><i>Съёмка производства и ребрендинг →</i></a>
      <a class="kcp__more-card" href="/case-invoicebox"><span>Кейс</span><b>Инвойсбокс</b><i>Видеоматериалы для платформы →</i></a>
    </div>
  </section>
  <section class="kcp__cta">
    <h2>Сложное производство? Покажем за минуты.</h2>
    <p>Упакуем ваш завод в видео и материалы, с которыми проще продавать.</p>
    <a class="kcp__cta-btn" href="#popup:zayavka">Обсудить проект →</a>
  </section>
</div>

<style>
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Unbounded:wght@400;600;700;800&display=swap');
.kcp{--bg:#0C0C0E;--raise:#141416;--card:#1B1B1F;--border:#2A2A2E;--soft:#242428;--text:#F5F3EF;--muted:#9A9A9A;--faint:#6a6a6e;--accent:#6D5DFB;--glow:rgba(109,93,251,.14);
  box-sizing:border-box;background:var(--bg);color:var(--text);font-family:'Manrope',Arial,sans-serif;-webkit-font-smoothing:antialiased;}
.kcp *{box-sizing:border-box;margin:0;padding:0;}
.kcp p{line-height:1.65;}
.kcp__eyebrow,.kcp__kick{font-family:'Unbounded';font-size:12px;letter-spacing:.14em;color:var(--accent);}
.kcp__h2{font-family:'Unbounded';font-weight:700;font-size:clamp(26px,3.2vw,42px);letter-spacing:-.02em;line-height:1.12;margin:14px 0 0;}
.kcp__sub{color:var(--muted);font-size:17px;line-height:1.6;max-width:640px;margin-top:14px;}
.kcp__hero{padding:70px 6vw 0;max-width:1280px;margin:0 auto;}
.kcp__hero-in{max-width:900px;}
.kcp__back{display:inline-block;color:var(--muted);text-decoration:none;font-size:14px;font-weight:600;margin-bottom:34px;transition:.2s;}
.kcp__back:hover{color:var(--accent);}
.kcp__hero .kcp__eyebrow{margin-bottom:18px;}
.kcp__title{font-family:'Unbounded';font-weight:800;font-size:clamp(40px,7vw,88px);letter-spacing:-.03em;line-height:1;margin-bottom:24px;}
.kcp__lead{font-size:clamp(18px,2vw,22px);line-height:1.55;color:#d8d6d1;max-width:760px;}
.kcp__tags{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 18px;}
.kcp__tag{font-family:'Manrope',Arial,sans-serif;font-weight:600;font-size:9px;line-height:1;text-transform:uppercase;letter-spacing:.14em;color:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.22);border-radius:4px;padding:5px 8px;white-space:nowrap;}
@media (max-width:480px){ .kcp__tag{font-size:8px;padding:5px 7px;} .kcp__tags{gap:5px;margin-bottom:14px;} }
.kcp__facts{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:14px;overflow:hidden;margin-top:44px;}
.kcp__fact{background:var(--raise);padding:20px 22px;display:flex;flex-direction:column;gap:7px;}
.kcp__fact span{font-size:12px;color:var(--faint);text-transform:uppercase;letter-spacing:.06em;}
.kcp__fact b{font-family:'Unbounded';font-weight:600;font-size:14px;line-height:1.3;}
.kcp__cover{margin:48px auto 0;max-width:1280px;aspect-ratio:16/8;border-radius:20px;}
.kcp__sec{max-width:1080px;margin:0 auto;padding:64px 6vw;}
.kcp__grid2{display:grid;grid-template-columns:0.85fr 1.15fr;gap:48px;align-items:start;}
.kcp__prose p{color:#c9c7c2;font-size:17px;margin-bottom:16px;}
.kcp__prose p:last-child{margin-bottom:0;}
.kcp__prose b{color:var(--text);font-weight:600;}
.kcp__callout{background:linear-gradient(135deg,rgba(109,93,251,.10),rgba(109,93,251,.02));border:1px solid rgba(109,93,251,.3);border-radius:18px;padding:40px 44px;}
.kcp__callout-k{font-family:'Unbounded';font-size:12px;letter-spacing:.14em;color:var(--accent);margin-bottom:14px;}
.kcp__callout-t{font-family:'Unbounded';font-weight:600;font-size:clamp(20px,2.4vw,30px);line-height:1.35;letter-spacing:-.01em;}
.kcp__timeline{list-style:none;margin-top:44px;display:flex;flex-direction:column;gap:26px;}
.kcp__step{display:grid;grid-template-columns:88px 1fr;gap:26px;background:var(--raise);border:1px solid var(--border);border-radius:18px;padding:30px 32px;transition:.25s;}
.kcp__step:hover{border-color:rgba(109,93,251,.4);}
.kcp__step-num{font-family:'Unbounded';font-weight:700;font-size:34px;color:var(--accent);line-height:1;opacity:.85;}
.kcp__step-body h3{font-family:'Unbounded';font-weight:600;font-size:22px;letter-spacing:-.01em;margin-bottom:12px;}
.kcp__step-body p{color:#c4c2bd;font-size:16px;}
.kcp__step--next{background:transparent;border-style:dashed;}
.kcp__step--next .kcp__step-num{opacity:1;}
.kcp__ph{position:relative;background:repeating-linear-gradient(45deg,#141416,#141416 12px,#17171a 12px,#17171a 24px);border:2px dashed #38383e;border-radius:14px;min-height:150px;display:flex;align-items:center;justify-content:center;text-align:center;}
.kcp__ph-label{color:#8a8a90;font-size:13px;font-weight:600;line-height:1.5;padding:16px;}
.kcp__ph-label small{color:var(--faint);font-weight:500;}
.kcp__ph--wide{margin-top:18px;aspect-ratio:16/8;min-height:0;}
.kcp__ph--mail{margin:18px auto 0;aspect-ratio:1200/1078;min-height:0;max-width:620px;}
.kcp__ph--grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:18px;background:none;border:none;padding:0;}
.kcp__ph--grid .kcp__ph{aspect-ratio:4/3;min-height:0;}
.kcp__cover.kcp__ph{aspect-ratio:16/8;}
.kcp__ba{position:relative;margin-top:20px;aspect-ratio:16/9;border-radius:16px;overflow:hidden;border:1px solid var(--border);user-select:none;}
.kcp__ba-after,.kcp__ba-before{position:absolute;inset:0;border-radius:0;border:none;}
.kcp__ba-before{width:100%;clip-path:inset(0 50% 0 0);}
.kcp__ba-handle{position:absolute;top:0;bottom:0;left:50%;width:2px;background:var(--accent);cursor:ew-resize;transform:translateX(-1px);}
.kcp__ba-handle span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:40px;height:40px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(0,0,0,.4);}
.kcp__ba-handle span::before{content:'⟷';color:#000;font-size:18px;font-weight:700;}
.kcp__ba-tag{position:absolute;top:14px;font-family:'Unbounded';font-size:11px;letter-spacing:.1em;background:rgba(0,0,0,.6);padding:5px 11px;border-radius:6px;}
.kcp__ba-tag--l{left:14px;}
.kcp__ba-tag--r{right:14px;}
.kcp__ba-hint{text-align:center;color:var(--faint);font-size:13px;margin-top:12px;}
.kcp__result-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:34px;}
.kcp__rcard{background:var(--raise);border:1px solid var(--border);border-radius:16px;padding:26px 28px;}
.kcp__rc-t{font-family:'Unbounded';font-weight:600;font-size:18px;color:var(--accent);margin-bottom:10px;}
.kcp__rcard p{color:#c4c2bd;font-size:15px;}
.kcp__chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;}
.kcp__chips span{font-family:'Manrope';font-weight:600;font-size:14px;color:var(--text);background:rgba(109,93,251,.08);border:1px solid rgba(109,93,251,.4);border-radius:8px;padding:10px 16px;}
.kcp__video{margin-top:24px;aspect-ratio:16/9;border-radius:18px;overflow:hidden;border:1px solid var(--border);background:#000;}
.kcp__video iframe{width:100%;height:100%;border:none;}
.kcp__cta{max-width:900px;margin:20px auto 0;padding:80px 6vw 96px;text-align:center;}
.kcp__cta h2{font-family:'Unbounded';font-weight:700;font-size:clamp(26px,3.4vw,42px);letter-spacing:-.02em;margin-bottom:16px;}
.kcp__cta p{color:var(--muted);font-size:18px;margin-bottom:30px;}
.kcp__cta-btn{display:inline-block;background:var(--accent);color:#fff;text-decoration:none;font-family:'Manrope';font-weight:700;font-size:16px;padding:18px 38px;border-radius:10px;transition:.25s;}
.kcp__cta-btn:hover{transform:translateY(-2px);box-shadow:0 14px 34px var(--glow);}
@media (max-width:820px){
  .kcp__facts{grid-template-columns:1fr 1fr;}
  .kcp__grid2{grid-template-columns:1fr;gap:20px;}
  .kcp__step{grid-template-columns:1fr;gap:14px;padding:24px 22px;}
  .kcp__step-num{font-size:28px;}
  .kcp__result-grid{grid-template-columns:1fr;}
  .kcp__ph--grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:480px){
  .kcp__hero{padding:48px 20px 0;}
  .kcp__sec{padding:48px 20px;}
  .kcp__facts{grid-template-columns:1fr;}
  .kcp__callout{padding:28px 24px;}
}
.kcp [data-img].kcp--filled,.kcp [data-video].kcp--filled{background:none;border:none;}
.kcp [data-img] img,.kcp [data-video] img{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit;}
.kcp [data-fit="contain"] img{object-fit:contain;background:#0f0f11;padding:6%;}
.kcp [data-video].kcp--filled iframe{width:100%;height:100%;border:none;display:block;}
.kcp__ph.kcp--filled{padding:0;}

.kcp__letter{margin-top:26px;max-width:440px;}
.kcp__letter img{display:block;width:100%;height:auto;border-radius:14px;border:1px solid var(--border);}
.kcp__more{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:28px;}
.kcp__more-card{display:block;background:var(--raise);border:1px solid var(--border);border-radius:16px;padding:24px 26px;text-decoration:none;transition:.2s;}
.kcp__more-card:hover{border-color:var(--accent);}
.kcp__more-card span{display:block;font-size:12px;letter-spacing:2px;color:var(--accent);text-transform:uppercase;margin-bottom:10px;}
.kcp__more-card b{display:block;font-family:Unbounded,sans-serif;font-weight:700;font-size:22px;line-height:1.2;color:var(--text);margin-bottom:8px;}
.kcp__more-card i{font-style:normal;font-size:15px;color:var(--muted);}
.kcp--filled img{cursor:zoom-in;}
.kcp__letter img{cursor:zoom-in;}
.kcp__lb{position:fixed;inset:0;z-index:99999;display:none;align-items:center;justify-content:center;padding:64px 40px;}
.kcp__lb.open{display:flex;}
.kcp__lbbd{position:absolute;inset:0;background:rgba(4,4,6,.9);backdrop-filter:blur(4px);}
.kcp__lbbox{position:relative;max-width:min(1100px,100%);display:flex;align-items:center;justify-content:center;}
.kcp__lbbox img{display:block;max-width:100%;max-height:calc(100vh - 170px);width:auto;height:auto;border-radius:10px;background:#0f0f11;}
.kcp__lbx{position:absolute;top:-48px;right:0;width:38px;height:38px;border-radius:9px;background:var(--raise);border:1px solid var(--border);color:var(--text);font:20px/1 Arial,sans-serif;cursor:pointer;padding:0;}
.kcp__lbx:hover{border-color:var(--accent);color:var(--accent);}
.kcp__lbnav{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;background:var(--raise);border:1px solid var(--border);color:var(--text);font:20px/1 Arial,sans-serif;cursor:pointer;padding:0;}
.kcp__lbnav.prev{left:-58px;}
.kcp__lbnav.next{right:-58px;}
.kcp__lbnav:hover{border-color:var(--accent);color:var(--accent);}
.kcp__lbcap{position:absolute;left:0;right:0;bottom:-38px;text-align:center;color:var(--muted);font-size:14px;}
@media (max-width:640px){.kcp__lb{padding:56px 14px;}.kcp__lbnav.prev{left:2px;}.kcp__lbnav.next{right:2px;}.kcp__more{grid-template-columns:1fr;}.kcp__letter{max-width:100%;}}

.kcp__gal{margin-top:18px;}
.kcp__galhead{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:12px;}
.kcp__galtabs{display:inline-flex;gap:4px;background:var(--soft);border:1px solid var(--border);border-radius:9px;padding:4px;}
.kcp__galtab{padding:7px 18px;border:none;background:none;color:var(--muted);font-family:'Manrope',Arial,sans-serif;font-weight:600;font-size:13px;line-height:1;letter-spacing:1.2px;border-radius:6px;cursor:pointer;transition:.2s;}
.kcp__galtab:hover{color:var(--text);}
.kcp__galtab.is-on{background:var(--accent);color:#fff;}
.kcp__galnote{margin-top:14px;font-size:13px;line-height:1.5;color:var(--muted);letter-spacing:.3px;}
.kcp__galnav{display:flex;gap:8px;flex-shrink:0;}
.kcp__galarrow{width:40px;height:40px;border:1px solid var(--border);background:var(--raise);border-radius:4px;color:var(--text);font:20px/1 Arial,sans-serif;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.2s;padding:0;}
.kcp__galarrow:hover{border-color:var(--accent);color:var(--accent);}
.kcp__galarrow:disabled{opacity:.3;cursor:default;border-color:var(--border);color:var(--text);}
.kcp__galtrack{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:4px;}
.kcp__galtrack::-webkit-scrollbar{display:none;}
.kcp__galcard{flex:0 0 calc((100% - 24px)/3);scroll-snap-align:start;display:block;padding:0;margin:0;border:1px solid var(--border);background:#0f0f11;border-radius:10px;overflow:hidden;cursor:zoom-in;aspect-ratio:3/4;transition:.2s;font:inherit;}
.kcp__galcard:hover{border-color:var(--accent);}
.kcp__galcard img{width:100%;height:100%;object-fit:contain;display:block;}
@media (max-width:820px){.kcp__galcard{flex:0 0 calc((100% - 12px)/2);}}
@media (max-width:480px){.kcp__galcard{flex:0 0 76%;}.kcp__galnav{display:none;}.kcp__galhead{margin-bottom:10px;}}
</style>
<script>
(function(){
  var C=window.KORS_CASE||{}; var IMG=C.images||{}, VID=C.videos||{};
  var ALT={cover:'Завод «Вистекс» - производство нетканых полотен, кадр из фильма KORS Production',email:'Письмо для рассылки коммерческих предложений завода «Вистекс»: логотип, короткий текст и превью ролика о производстве с кнопкой воспроизведения',label1:'Концепт дизайна этикетки для продукции завода «Вистекс»',label2:'Концепт дизайна протирочных салфеток для завода «Вистекс»',siteSoon:'Макет сайта завода «Вистекс»'};
  document.querySelectorAll('.kcp [data-video]').forEach(function(el){
    var id=VID[el.getAttribute('data-video')];
    if(id){ el.classList.add('kcp--filled'); el.innerHTML='<iframe src="https://kinescope.io/embed/'+id+'" allow="autoplay; fullscreen; encrypted-media; picture-in-picture" allowfullscreen frameborder="0"></iframe>'; el.removeAttribute('data-img'); }
  });
  document.querySelectorAll('.kcp [data-img]').forEach(function(el){
    var url=IMG[el.getAttribute('data-img')];
    if(url){ el.classList.add('kcp--filled'); el.innerHTML='<img src="'+url+'" alt="'+(ALT[el.getAttribute('data-img')]||'')+'" loading="lazy">'; }
  });
})();
</script>

<script>
(function(){
  var root=document.querySelector('.kcp'); if(!root) return;
  var lb=document.createElement('div'); lb.className='kcp__lb';
  lb.innerHTML='<div class="kcp__lbbd"></div><div class="kcp__lbbox"><button class="kcp__lbx" type="button" aria-label="Закрыть">×</button><button class="kcp__lbnav prev" type="button" aria-label="Предыдущий кадр">‹</button><img alt=""><button class="kcp__lbnav next" type="button" aria-label="Следующий кадр">›</button><div class="kcp__lbcap"></div></div>';
  document.body.appendChild(lb);
  var pic=lb.querySelector('.kcp__lbbox img'), cap=lb.querySelector('.kcp__lbcap');
  var prev=lb.querySelector('.prev'), next=lb.querySelector('.next');
  var list=[], idx=0;
  function norm(el){ return {src: el.currentSrc||el.src, alt: el.alt||''}; }
  function collect(){ list=[].slice.call(root.querySelectorAll('.kcp--filled img, .kcp__letter img')).map(norm); }
  function show(){ var it=list[idx]; if(!it) return; pic.src=it.src; pic.alt=it.alt||''; var multi=list.length>1; cap.textContent=multi?(idx+1)+' из '+list.length:''; prev.style.display=multi?'':'none'; next.style.display=multi?'':'none'; }
  function open(i){ idx=i; show(); lb.classList.add('open'); document.documentElement.style.overflow='hidden'; }
  function close(){ lb.classList.remove('open'); pic.src=''; document.documentElement.style.overflow=''; }
  function step(d){ if(!list.length) return; idx=(idx+d+list.length)%list.length; show(); }
  root.addEventListener('click',function(e){ var t=e.target; if(!t || t.tagName!=='IMG') return; if(!t.closest('.kcp--filled, .kcp__letter')) return; var els=[].slice.call(root.querySelectorAll('.kcp--filled img, .kcp__letter img')); var i=els.indexOf(t); if(i<0) return; e.preventDefault(); collect(); open(i); });
  window.kcpLightbox={ open:function(arr,i,lbl){ if(!arr||!arr.length) return; list=arr.map(function(u,k){ return {src:u, alt:(lbl||'Кадр')+' '+(k+1)+' из '+arr.length}; }); open(i||0); } };
  lb.querySelector('.kcp__lbbd').addEventListener('click',close);
  lb.querySelector('.kcp__lbx').addEventListener('click',close);
  prev.addEventListener('click',function(){ step(-1); });
  next.addEventListener('click',function(){ step(1); });
  document.addEventListener('keydown',function(e){ if(!lb.classList.contains('open')) return; if(e.key==='Escape') close(); else if(e.key==='ArrowLeft') step(-1); else if(e.key==='ArrowRight') step(1); });
})();
</script>

<script>
(function(){
  var C=window.KORS_CASE||{};
  var ALT=['Концепт упаковки протирочных салфеток «ПылеSOS» для завода «Вистекс»: коты-супергерои на синей этикетке','Концепт упаковки вискозных салфеток «Вистекс» 30х40 см: енот в лабораторном халате на синей этикетке','Концепт упаковки вискозных салфеток «Вистекс» 30х40 см: салфетка-супергерой против пятен на фиолетовой этикетке','Концепт упаковки вискозных салфеток «Вистекс» 30х40 см: салфетки-персонажи на кухне на синей этикетке'];
  function makeGallery(gal, SETS, noteFn, altFn, label, fbSel){
    if(!gal || !SETS.length) return;
    if(fbSel){ var ph=gal.parentNode.querySelector(fbSel); if(ph) ph.style.display='none'; }
    var tabs=SETS.length>1 ? '<div class="kcp__galtabs" role="tablist">'+SETS.map(function(s,i){return '<button class="kcp__galtab'+(i===0?' is-on':'')+'" data-lang="'+s.id+'" role="tab" aria-selected="'+(i===0)+'">'+s.label+'</button>';}).join('')+'</div>' : '<span></span>';
    gal.innerHTML='<div class="kcp__galhead">'+tabs+'<div class="kcp__galnav"><button class="kcp__galarrow" type="button" data-gprev aria-label="Назад">&#8249;</button><button class="kcp__galarrow" type="button" data-gnext aria-label="Вперёд">&#8250;</button></div></div><div class="kcp__galtrack"></div><div class="kcp__galnote"></div>';
    var track=gal.querySelector('.kcp__galtrack'), note=gal.querySelector('.kcp__galnote');
    var gp=gal.querySelector('[data-gprev]'), gn=gal.querySelector('[data-gnext]');
    var cur=SETS[0];
    function fill(){
      var h='';
      for(var i=0;i<cur.items.length;i++){ h+='<button class="kcp__galcard" type="button" data-gi="'+i+'" aria-label="'+label+' '+(i+1)+' из '+cur.items.length+'"><img src="'+cur.items[i]+'" alt="'+altFn(i,cur.items.length,cur)+'" loading="lazy"></button>'; }
      track.innerHTML=h; track.scrollLeft=0; note.textContent=noteFn(SETS,cur); setTimeout(upd,60);
    }
    function step(){ var c=track.querySelector('.kcp__galcard'); return c?c.offsetWidth+12:320; }
    function upd(){ gp.disabled=track.scrollLeft<8; gn.disabled=track.scrollLeft+track.clientWidth>=track.scrollWidth-8; }
    gp.addEventListener('click',function(){ track.scrollLeft-=step(); });
    gn.addEventListener('click',function(){ track.scrollLeft+=step(); });
    track.addEventListener('scroll',upd); window.addEventListener('resize',upd);
    track.addEventListener('click',function(e){ var b=e.target&&e.target.closest?e.target.closest('.kcp__galcard'):null; if(!b) return; if(window.kcpLightbox) window.kcpLightbox.open(cur.items, parseInt(b.getAttribute('data-gi'),10)||0, label); });
    fill();
  }
  makeGallery(document.querySelector('.kcp [data-labelgal]'),
    [{id:'pack',label:'Упаковка',items:C.labels||[]}].filter(function(x){return x.items&&x.items.length;}),
    function(){ return 'Концепты упаковки протирочных салфеток. Нажмите на кадр, чтобы рассмотреть'; },
    function(i){ return ALT[i]||('Концепт упаковки салфеток «Вистекс» '+(i+1)); },
    'Концепт', '.kcp__ph--grid');
})();
</script>

<script>
/* Сторож картинок.
   Иногда запрос картинки к CDN зависает: ответа нет, ошибки нет, элемент img остаётся
   пустым навсегда, а слот с заданными пропорциями держит пустое место во весь экран.
   Переназначить src такому элементу бесполезно - он уже мёртвый; помогает только
   НОВЫЙ элемент img. Поэтому раз в 10 с (до трёх попыток) создаём свежую картинку
   и подменяем ею зависшую, когда та загрузится.
   Слот прячем только если сервер явно ответил ошибкой: медленную картинку прятать
   нельзя, она может прийти позже. Пока вкладка в фоне, отсчёт не ведём - там браузер
   тормозит загрузку сам, и это не повод считать картинку потерянной. */
(function(){
  function ready(im){ return im && im.complete && im.naturalWidth > 0; }
  function watch(box){
    var first = box.querySelector("img");
    if(!first) return;
    first.addEventListener("error", function(){ box.style.display = "none"; });
    var tries = 0;
    function tick(){
      var cur = box.querySelector("img");
      if(ready(cur) || tries >= 3) return;
      if(document.hidden){ setTimeout(tick, 5000); return; }
      tries++;
      var url = ((cur && cur.getAttribute("src")) || "").split("?")[0];
      if(url){
        var fresh = new Image();
        fresh.alt = (cur && cur.alt) || "";
        fresh.onload = function(){ if(cur && cur.parentNode === box && !ready(cur)) box.replaceChild(fresh, cur); };
        fresh.onerror = function(){ box.style.display = "none"; };
        fresh.src = url + "?kr=" + Date.now();
      }
      setTimeout(tick, 10000);
    }
    setTimeout(tick, 5000);
  }
  var slots = document.querySelectorAll(".kcp [data-img], .step-media");
  for(var i = 0; i < slots.length; i++){ watch(slots[i]); }
})();
</script>

rec2667018101 — главная, кейсы ДЕСКТОП, до подрезки превью Инвойсбокса (11655 симв.)

<!-- ===== KORS · 3 ПРОЕКТА ИЗ ОДНОЙ ЗАДАЧИ · ДЕСКТОП · блок T123. Только компьютер. ===== -->
<div class="kcs">
  <div class="kcs__head">
    <div class="kcs__eyebrow">- КЕЙСЫ</div>
    <h2 class="kcs__title">Что изменилось у производителей после работы с нами и как они используют наши материалы в продажах.</h2>
    <div class="kcs__sub">С чем пришёл клиент, что сделали и какие материалы он получил.</div>
  </div>
  <div class="kcs__list" id="kcsList"></div>
  <div class="kcs__lb" id="kcsLb"><div class="kcs__lbbd"></div><div class="kcs__lbbox"><button class="kcs__lbx" id="kcsLbx">×</button><div class="kcs__lbframe"><iframe id="kcsLbIframe" allow="autoplay; fullscreen; encrypted-media; picture-in-picture" allowfullscreen></iframe></div></div></div>
</div>
<style>
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Unbounded:wght@400;600;700;800&display=swap');
.kcs{--bg:#0C0C0E;--raise:#141416;--card:#1B1B1F;--border:#2A2A2E;--text:#F5F3EF;--muted:#9A9A9A;--faint:#6a6a6e;--accent:#6D5DFB;--glow:rgba(109,93,251,.14);
  box-sizing:border-box;background:var(--bg);color:var(--text);font-family:'Manrope',Arial,sans-serif;-webkit-font-smoothing:antialiased;padding:84px 5vw 92px;}
.kcs *{box-sizing:border-box;margin:0;padding:0;}
.kcs__head{max-width:1240px;margin:0 auto 44px;}
.kcs__eyebrow{font-family:'Unbounded';font-size:12px;letter-spacing:.14em;color:var(--accent);margin-bottom:16px;}
.kcs__title{font-family:'Unbounded';font-weight:700;font-size:clamp(34px,4vw,60px);letter-spacing:-.02em;line-height:1.05;margin-bottom:16px;max-width:900px;}
.kcs__sub{color:var(--muted);font-size:18px;line-height:1.5;max-width:640px;}
.kcs__list{max-width:1240px;margin:0 auto;display:flex;flex-direction:column;gap:26px;}
.kcs__row{display:grid;grid-template-columns:46% 1fr;background:var(--raise);border:1px solid var(--border);border-radius:18px;overflow:hidden;}
.kcs__media{position:relative;overflow:hidden;background:#000;min-height:420px;}
.kcs__media iframe{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);min-width:100%;min-height:100%;width:auto;height:auto;aspect-ratio:16/9;border:none;pointer-events:none;}
.kcs__badge{position:absolute;top:18px;left:18px;z-index:2;background:rgba(0,0,0,.55);border:1px solid var(--border);color:var(--text);font-family:'Unbounded';font-size:10px;letter-spacing:.12em;padding:6px 12px;border-radius:6px;}
.kcs__body{padding:38px 40px;}
.kcs__name{font-family:'Unbounded';font-weight:700;font-size:26px;letter-spacing:-.01em;margin-bottom:8px;}
.kcs__tag{color:var(--faint);font-size:14px;margin-bottom:16px;}
.kcs__tags{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 16px;}
.kcs__chip{font-family:'Manrope',Arial,sans-serif;font-weight:600;font-size:9px;line-height:1;text-transform:uppercase;letter-spacing:.14em;color:rgba(255,255,255,.7);background:transparent;border:1px solid rgba(255,255,255,.22);border-radius:4px;padding:5px 8px;white-space:nowrap;}
.kcs__blk{margin-bottom:18px;}
.kcs__lbl{font-family:'Unbounded';font-size:11px;letter-spacing:.1em;color:var(--accent);margin-bottom:7px;}
.kcs__txt{color:var(--muted);font-size:15px;line-height:1.55;}
.kcs__txt b{color:var(--text);font-weight:600;}
.kcs__btns{display:flex;gap:11px;flex-wrap:wrap;margin-top:26px;}
.kcs__btn{display:inline-flex;align-items:center;gap:8px;font-family:'Manrope';font-weight:700;font-size:14px;padding:13px 20px;border-radius:9px;cursor:pointer;text-decoration:none;transition:.2s;border:1px solid var(--border);}
.kcs__btn svg{width:15px;height:15px;flex:none;}
.kcs__btn--full{background:var(--accent);color:#fff;border-color:var(--accent);}
.kcs__btn--full:hover{transform:translateY(-2px);box-shadow:0 10px 26px var(--glow);}
.kcs__btn--ghost{background:transparent;color:var(--text);}
.kcs__btn--ghost:hover{border-color:var(--accent);color:var(--accent);}
.kcs__soon{font-size:11px;color:var(--faint);margin-left:2px;}
/* оверлей полного видео */
.kcs__lb{position:fixed;inset:0;z-index:99999;display:none;align-items:center;justify-content:center;padding:40px;}
.kcs__lb.open{display:flex;}
.kcs__lbbd{position:absolute;inset:0;background:rgba(4,4,6,.9);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);}
.kcs__lbbox{position:relative;width:min(1100px,100%);}
.kcs__lbframe{position:relative;width:100%;aspect-ratio:16/9;background:#000;border-radius:12px;overflow:hidden;border:1px solid var(--border);}
.kcs__lbframe iframe{position:absolute;inset:0;width:100%;height:100%;border:none;}
.kcs__lbx{position:absolute;top:-46px;right:0;width:38px;height:38px;border-radius:9px;background:var(--raise);border:1px solid var(--border);color:var(--text);font-size:22px;line-height:1;cursor:pointer;}
.kcs__lbx:hover{border-color:var(--accent);color:var(--accent);}
@media (max-width:480px){ .kcs{display:none;} }

.kcs__title{max-width:1180px;font-size:clamp(30px,3.4vw,52px);line-height:1.12;text-wrap:balance}
.kcs__row{grid-template-columns:34% 1fr}
.kcs__media{min-height:620px}
.kcs__name{font-size:22px;line-height:1.25}
.kcs__txt{font-size:15px;line-height:1.62}
</style>
<script>
(function(){
  var cases=[
  {
    "vid": "pd95FJSRFhF27W4YX4ioJJ",
    "full": "3ZsxHkdEuHUubxSAQZDRyG",
    "alt": "Кейс Одоевские консервы: видео о пищевом производстве",
    "badge": "ВИДЕО / ФОТО",
    "name": "Одоевские консервы: от продуктовых роликов - к сайту RU/EN и материалам для выхода на рынок ОАЭ",
    "page": "/case-odoevskie",
    "tag": "Производитель фруктово-ягодных начинок. Начали с продуктовых роликов, после чего сотрудничество переросло в комплексную работу с материалами компании.",
    "tags": ["Видео","Фотосъёмка","Презентация","Фирменный стиль","Сайт"],
    "blocks": [
      [
        "",
        "Сайт RU/EN для работы с зарубежными партнёрами, презентация на русском и английском языках, разработка нового логотипа компании, подготовка материалов производства от А до Я."
      ],
      [
        "",
        "Создание материалов, которые помогают в развитии бизнеса за рубежом."
      ],
      [
        "",
        "Видео о заводе и продуктовых начинках, визитки, поздравления для партнёров, создание фирменных календарей, приглашения на выставки. В феврале планируем делать застройку стенда на выставке."
      ],
      [
        "РЕЗУЛЬТАТЫ",
        "- Новый сайт открыл переговоры в ОАЭ/MENA.<br>- Сделок стало больше.<br>- Все ключевые клиенты продолжили сотрудничество.<br>- Повысился трафик клиентов и уровень продаж новых продуктов."
      ]
    ]
  },
  {
    "vid": "35XkXms5VN3RLJcYsgWsnD",
    "full": "2FXfjS6hYEvLkWNKUveoBx",
    "alt": "Кейс Инвойсбокс: видео о сервисе приёма платежей",
    "badge": "ВИДЕО / МАРКЕТИНГ",
    "name": "Инвойсбокс: от одного объясняющего ролика - к серии видео, инфографике и ведению маркетинга",
    "page": "/case-invoicebox",
    "tag": "Сервис приёма онлайн-платежей и автоматизации счетов для бизнеса. Начали с одного объясняющего видео, дальше клиент возвращался за новыми форматами.",
    "tags": ["Видео","Моушн","Инфографика","Маркетинг"],
    "blocks": [
      [
        "",
        "Объясняющие ролики о сервисе: как выставить счёт юридическому лицу за минуту и как принимать оплату на сайте."
      ],
      [
        "",
        "Короткие ролики по отдельным продуктам - выставление счетов и решение для интернет-магазинов."
      ],
      [
        "",
        "Ведение маркетинга и рекламы: не разовая задача, а постоянная работа по проекту."
      ],
      [
        "РЕЗУЛЬТАТЫ",
        "- Сложный финтех-продукт объясняется за секунды.<br>- От одного ролика - к серии видео и инфографике.<br>- Клиент передал нам и свой второй бизнес (GRT)."
      ]
    ]
  },
  {
    "vid": "iPcFsLF3eYfDYTauhcgjZj",
    "alt": "Кейс Вистекс: видео о заводе нетканых материалов",
    "full": "fv7FAnLfbLaDaNJLtSQ74H",
    "badge": "ВИДЕО",
    "name": "Вистекс: 8 направлений завода - в 3 минутах видео для коммерческих предложений",
    "page": "/case-vistex",
    "tag": "",
    "tags": ["Видео","Дизайн"],
    "blocks": [
      [
        "",
        "Задача: показать 8 разных направлений производства за 3 минуты видеоролика, благодаря которому клиент сразу поймёт, что производит завод."
      ],
      [
        "",
        "Менеджеры используют ролик в коммерческих предложениях и email-коммуникации, чтобы быстро показать направления производства."
      ],
      [
        "",
        "Создали дизайн email-письма для рассылок потенциальным клиентам с кликабельным функционалом и возможностью смотреть видео о предприятии прямо в email-сообщении."
      ],
      [
        "",
        "Стало проще объяснять продукты и направления предприятия: менеджеры показывают завод роликом, а не пересказывают его текстом."
      ]
    ]
  }
];
  var PLAY='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="5 3 19 12 5 21 5 3"/></svg>';
  var ARROW='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M13 5l7 7-7 7"/></svg>';
  var BG='?autoplay=true&muted=true&loop=true&controls=false&playsInline=true&background=true';
  var lb=document.getElementById('kcsLb'), lbf=document.getElementById('kcsLbIframe');
  function openLb(id){ lbf.src='https://kinescope.io/embed/'+id+'?autoplay=true'; lb.classList.add('open'); }
  function closeLb(){ lb.classList.remove('open'); lbf.src=''; }
  document.getElementById('kcsLbx').addEventListener('click',closeLb);
  lb.querySelector('.kcs__lbbd').addEventListener('click',closeLb);
  var list=document.getElementById('kcsList'); if(!list) return;
  /* KORS: превью кейса получает src только когда строка подходит к экрану, а не сразу при загрузке страницы. */
  var kio=('IntersectionObserver' in window)?new IntersectionObserver(function(es,ob){
    es.forEach(function(e){
      if(!e.isIntersecting) return;
      var f=e.target.querySelector('iframe[data-src]');
      if(f){ f.src=f.getAttribute('data-src'); f.removeAttribute('data-src'); }
      ob.unobserve(e.target);
    });
  },{root:null,rootMargin:'300px 0px',threshold:0.01}):null;
  function kcsWatch(r){
    if(kio){ kio.observe(r); return; }
    var f=r.querySelector('iframe[data-src]');
    if(f){ f.src=f.getAttribute('data-src'); f.removeAttribute('data-src'); }
  }
  cases.forEach(function(c){
    var row=document.createElement('div'); row.className='kcs__row';
    var blocksHtml=c.blocks.map(function(b){return '<div class="kcs__blk"><div class="kcs__lbl">'+b[0]+'</div><div class="kcs__txt">'+b[1]+'</div></div>';}).join('');
    var tagsHtml=(c.tags&&c.tags.length)?('<div class="kcs__tags">'+c.tags.map(function(t){return '<span class="kcs__chip">'+t+'</span>';}).join('')+'</div>'):'';
    row.innerHTML=
      '<div class="kcs__media"><iframe data-src="https://kinescope.io/embed/'+c.vid+BG+'" title="'+(c.alt||c.name)+'" aria-label="'+(c.alt||c.name)+'" allow="autoplay; fullscreen; encrypted-media; picture-in-picture"></iframe></div>'+
      '<div class="kcs__body"><div class="kcs__name">'+c.name+'</div>'+tagsHtml+'<div class="kcs__tag">'+c.tag+'</div>'+blocksHtml+
        '<div class="kcs__btns">'+
          '<button class="kcs__btn kcs__btn--full kcs-full">'+PLAY+'Смотреть полное видео</button>'+
          '<a class="kcs__btn kcs__btn--ghost kcs-soon" href="'+(c.page||'#')+'">Смотреть, как строился проект '+ARROW+'</a>'+
        '</div>'+
      '</div>';
    row.querySelector('.kcs-full').addEventListener('click',function(){ openLb(c.full||c.vid); });
    var soon=row.querySelector('.kcs-soon'); if(!c.page){ soon.addEventListener('click',function(e){ e.preventDefault(); }); }
    list.appendChild(row); kcsWatch(row);
  });
})();
</script>

rec2667196001 — главная, кейсы МОБИЛКА, до подрезки превью Инвойсбокса (11184 симв.)

<!-- ===== KORS · 3 ПРОЕКТА ИЗ ОДНОЙ ЗАДАЧИ · МОБИЛКА · блок T123. Только телефон. ===== -->
<div class="kcm">
  <div class="kcm__head">
    <div class="kcm__eyebrow">- КЕЙСЫ</div>
    <h2 class="kcm__title">Что изменилось у производителей после работы с нами и как они используют наши материалы в продажах.</h2>
    <div class="kcm__sub">С чем пришёл клиент, что сделали и какие материалы он получил.</div>
  </div>
  <div class="kcm__list" id="kcmList"></div>
  <div class="kcm__lb" id="kcmLb"><div class="kcm__lbbd"></div><div class="kcm__lbbox"><button class="kcm__lbx" id="kcmLbx">×</button><div class="kcm__lbframe"><iframe id="kcmLbIframe" allow="autoplay; fullscreen; encrypted-media; picture-in-picture" allowfullscreen></iframe></div></div></div>
</div>
<style>
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Unbounded:wght@400;600;700;800&display=swap');
.kcm{--bg:#0C0C0E;--raise:#141416;--card:#1B1B1F;--border:#2A2A2E;--text:#F5F3EF;--muted:#9A9A9A;--faint:#6a6a6e;--accent:#6D5DFB;--glow:rgba(109,93,251,.14);
  box-sizing:border-box;background:var(--bg);color:var(--text);font-family:'Manrope',Arial,sans-serif;-webkit-font-smoothing:antialiased;padding:56px 20px 64px;}
.kcm *{box-sizing:border-box;margin:0;padding:0;}
.kcm__head{margin:0 auto 28px;}
.kcm__eyebrow{font-family:'Unbounded';font-size:11px;letter-spacing:.14em;color:var(--accent);margin-bottom:14px;}
.kcm__title{font-family:'Unbounded';font-weight:700;font-size:28px;letter-spacing:-.02em;line-height:1.1;margin-bottom:14px;}
.kcm__sub{color:var(--muted);font-size:15px;line-height:1.5;}
.kcm__list{display:flex;flex-direction:column;gap:20px;}
.kcm__row{background:var(--raise);border:1px solid var(--border);border-radius:16px;overflow:hidden;}
.kcm__media{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;background:#000;}
.kcm__media iframe{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);min-width:100%;min-height:100%;width:auto;height:auto;aspect-ratio:16/9;border:none;pointer-events:none;}
.kcm__badge{position:absolute;top:14px;left:14px;z-index:2;background:rgba(0,0,0,.55);border:1px solid var(--border);color:var(--text);font-family:'Unbounded';font-size:9.5px;letter-spacing:.12em;padding:5px 10px;border-radius:6px;}
.kcm__body{padding:20px 18px 22px;}
.kcm__name{font-family:'Unbounded';font-weight:700;font-size:20px;letter-spacing:-.01em;margin-bottom:6px;}
.kcm__tag{color:var(--faint);font-size:13px;margin-bottom:14px;}
.kcm__tags{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 13px;}
.kcm__chip{font-family:'Manrope',Arial,sans-serif;font-weight:600;font-size:8px;line-height:1;text-transform:uppercase;letter-spacing:.14em;color:rgba(255,255,255,.7);background:transparent;border:1px solid rgba(255,255,255,.22);border-radius:4px;padding:5px 8px;white-space:nowrap;}
.kcm__blk{margin-bottom:16px;}
.kcm__lbl{font-family:'Unbounded';font-size:10px;letter-spacing:.1em;color:var(--accent);margin-bottom:6px;}
.kcm__txt{color:var(--muted);font-size:14px;line-height:1.55;}
.kcm__txt b{color:var(--text);font-weight:600;}
.kcm__btns{display:flex;flex-direction:column;gap:10px;margin-top:22px;}
.kcm__btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:'Manrope';font-weight:700;font-size:14px;padding:14px 18px;border-radius:9px;cursor:pointer;text-decoration:none;border:1px solid var(--border);width:100%;}
.kcm__btn svg{width:15px;height:15px;flex:none;}
.kcm__btn--full{background:var(--accent);color:#fff;border-color:var(--accent);}
.kcm__btn--ghost{background:transparent;color:var(--text);}
.kcm__lb{position:fixed;inset:0;z-index:99999;display:none;align-items:center;justify-content:center;padding:16px;}
.kcm__lb.open{display:flex;}
.kcm__lbbd{position:absolute;inset:0;background:rgba(4,4,6,.92);}
.kcm__lbbox{position:relative;width:100%;}
.kcm__lbframe{position:relative;width:100%;aspect-ratio:16/9;background:#000;border-radius:12px;overflow:hidden;border:1px solid var(--border);}
.kcm__lbframe iframe{position:absolute;inset:0;width:100%;height:100%;border:none;}
.kcm__lbx{position:absolute;top:-44px;right:0;width:38px;height:38px;border-radius:9px;background:var(--raise);border:1px solid var(--border);color:var(--text);font-size:22px;line-height:1;cursor:pointer;}
@media (min-width:481px){ .kcm{display:none;} }

.kcm__title{font-size:clamp(23px,6.6vw,30px);line-height:1.16;text-wrap:balance;overflow-wrap:anywhere}
.kcm__name{font-size:18px;line-height:1.3;overflow-wrap:anywhere}
.kcm__txt{font-size:14px;line-height:1.62}
</style>
<script>
(function(){
  var cases=[
  {
    "vid": "pd95FJSRFhF27W4YX4ioJJ",
    "full": "3ZsxHkdEuHUubxSAQZDRyG",
    "alt": "Кейс Одоевские консервы: видео о пищевом производстве, мобильная версия",
    "badge": "ВИДЕО / ФОТО",
    "name": "Одоевские консервы: от продуктовых роликов - к сайту RU/EN и материалам для выхода на рынок ОАЭ",
    "page": "/case-odoevskie",
    "tag": "Производитель фруктово-ягодных начинок. Начали с продуктовых роликов, после чего сотрудничество переросло в комплексную работу с материалами компании.",
    "tags": ["Видео","Фотосъёмка","Презентация","Фирменный стиль","Сайт"],
    "blocks": [
      [
        "",
        "Сайт RU/EN для работы с зарубежными партнёрами, презентация на русском и английском языках, разработка нового логотипа компании, подготовка материалов производства от А до Я."
      ],
      [
        "",
        "Создание материалов, которые помогают в развитии бизнеса за рубежом."
      ],
      [
        "",
        "Видео о заводе и продуктовых начинках, визитки, поздравления для партнёров, создание фирменных календарей, приглашения на выставки. В феврале планируем делать застройку стенда на выставке."
      ],
      [
        "РЕЗУЛЬТАТЫ",
        "- Новый сайт открыл переговоры в ОАЭ/MENA.<br>- Сделок стало больше.<br>- Все ключевые клиенты продолжили сотрудничество.<br>- Повысился трафик клиентов и уровень продаж новых продуктов."
      ]
    ]
  },
  {
    "vid": "35XkXms5VN3RLJcYsgWsnD",
    "full": "2FXfjS6hYEvLkWNKUveoBx",
    "alt": "Кейс Инвойсбокс: видео о сервисе приёма платежей, мобильная версия",
    "badge": "ВИДЕО / МАРКЕТИНГ",
    "name": "Инвойсбокс: от одного объясняющего ролика - к серии видео, инфографике и ведению маркетинга",
    "page": "/case-invoicebox",
    "tag": "Сервис приёма онлайн-платежей и автоматизации счетов для бизнеса. Начали с одного объясняющего видео, дальше клиент возвращался за новыми форматами.",
    "tags": ["Видео","Моушн","Инфографика","Маркетинг"],
    "blocks": [
      [
        "",
        "Объясняющие ролики о сервисе: как выставить счёт юридическому лицу за минуту и как принимать оплату на сайте."
      ],
      [
        "",
        "Короткие ролики по отдельным продуктам - выставление счетов и решение для интернет-магазинов."
      ],
      [
        "",
        "Ведение маркетинга и рекламы: не разовая задача, а постоянная работа по проекту."
      ],
      [
        "РЕЗУЛЬТАТЫ",
        "- Сложный финтех-продукт объясняется за секунды.<br>- От одного ролика - к серии видео и инфографике.<br>- Клиент передал нам и свой второй бизнес (GRT)."
      ]
    ]
  },
  {
    "vid": "iPcFsLF3eYfDYTauhcgjZj",
    "alt": "Кейс Вистекс: видео о заводе нетканых материалов, мобильная версия",
    "full": "fv7FAnLfbLaDaNJLtSQ74H",
    "badge": "ВИДЕО",
    "name": "Вистекс: 8 направлений завода - в 3 минутах видео для коммерческих предложений",
    "page": "/case-vistex",
    "tag": "",
    "tags": ["Видео","Дизайн"],
    "blocks": [
      [
        "",
        "Задача: показать 8 разных направлений производства за 3 минуты видеоролика, благодаря которому клиент сразу поймёт, что производит завод."
      ],
      [
        "",
        "Менеджеры используют ролик в коммерческих предложениях и email-коммуникации, чтобы быстро показать направления производства."
      ],
      [
        "",
        "Создали дизайн email-письма для рассылок потенциальным клиентам с кликабельным функционалом и возможностью смотреть видео о предприятии прямо в email-сообщении."
      ],
      [
        "",
        "Стало проще объяснять продукты и направления предприятия: менеджеры показывают завод роликом, а не пересказывают его текстом."
      ]
    ]
  }
];
  var PLAY='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="5 3 19 12 5 21 5 3"/></svg>';
  var ARROW='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M13 5l7 7-7 7"/></svg>';
  var BG='?autoplay=true&muted=true&loop=true&controls=false&playsInline=true&background=true';
  var lb=document.getElementById('kcmLb'), lbf=document.getElementById('kcmLbIframe');
  function openLb(id){ lbf.src='https://kinescope.io/embed/'+id+'?autoplay=true'; lb.classList.add('open'); }
  function closeLb(){ lb.classList.remove('open'); lbf.src=''; }
  document.getElementById('kcmLbx').addEventListener('click',closeLb);
  lb.querySelector('.kcm__lbbd').addEventListener('click',closeLb);
  var list=document.getElementById('kcmList'); if(!list) return;
  /* KORS: превью кейса получает src только когда строка подходит к экрану, а не сразу при загрузке страницы. */
  var kio=('IntersectionObserver' in window)?new IntersectionObserver(function(es,ob){
    es.forEach(function(e){
      if(!e.isIntersecting) return;
      var f=e.target.querySelector('iframe[data-src]');
      if(f){ f.src=f.getAttribute('data-src'); f.removeAttribute('data-src'); }
      ob.unobserve(e.target);
    });
  },{root:null,rootMargin:'250px 0px',threshold:0.01}):null;
  function kcmWatch(r){
    if(kio){ kio.observe(r); return; }
    var f=r.querySelector('iframe[data-src]');
    if(f){ f.src=f.getAttribute('data-src'); f.removeAttribute('data-src'); }
  }
  cases.forEach(function(c){
    var row=document.createElement('div'); row.className='kcm__row';
    var blocksHtml=c.blocks.map(function(b){return '<div class="kcm__blk"><div class="kcm__lbl">'+b[0]+'</div><div class="kcm__txt">'+b[1]+'</div></div>';}).join('');
    var tagsHtml=(c.tags&&c.tags.length)?('<div class="kcm__tags">'+c.tags.map(function(t){return '<span class="kcm__chip">'+t+'</span>';}).join('')+'</div>'):'';
    row.innerHTML=
      '<div class="kcm__media"><iframe data-src="https://kinescope.io/embed/'+c.vid+BG+'" title="'+(c.alt||c.name)+'" aria-label="'+(c.alt||c.name)+'" allow="autoplay; fullscreen; encrypted-media; picture-in-picture"></iframe></div>'+
      '<div class="kcm__body"><div class="kcm__name">'+c.name+'</div>'+tagsHtml+'<div class="kcm__tag">'+c.tag+'</div>'+blocksHtml+
        '<div class="kcm__btns">'+
          '<button class="kcm__btn kcm__btn--full kcm-full">'+PLAY+'Смотреть полное видео</button>'+
          '<a class="kcm__btn kcm__btn--ghost kcm-soon" href="'+(c.page||'#')+'">Смотреть, как строился проект '+ARROW+'</a>'+
        '</div>'+
      '</div>';
    row.querySelector('.kcm-full').addEventListener('click',function(){ openLb(c.full||c.vid); });
    var soon=row.querySelector('.kcm-soon'); if(!c.page){ soon.addEventListener('click',function(e){ e.preventDefault(); }); }
    list.appendChild(row); kcmWatch(row);
  });
})();
</script>

rec2667018101 — главная, блок кейсов ДЕСКТОП, до добавления Инвойсбокса (10451 симв.)

<!-- ===== KORS · 3 ПРОЕКТА ИЗ ОДНОЙ ЗАДАЧИ · ДЕСКТОП · блок T123. Только компьютер. ===== -->
<div class="kcs">
  <div class="kcs__head">
    <div class="kcs__eyebrow">- КЕЙСЫ</div>
    <h2 class="kcs__title">Что изменилось у производителей после работы с нами и как они используют наши материалы в продажах.</h2>
    <div class="kcs__sub">С чем пришёл клиент, что сделали и какие материалы он получил.</div>
  </div>
  <div class="kcs__list" id="kcsList"></div>
  <div class="kcs__lb" id="kcsLb"><div class="kcs__lbbd"></div><div class="kcs__lbbox"><button class="kcs__lbx" id="kcsLbx">×</button><div class="kcs__lbframe"><iframe id="kcsLbIframe" allow="autoplay; fullscreen; encrypted-media; picture-in-picture" allowfullscreen></iframe></div></div></div>
</div>
<style>
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Unbounded:wght@400;600;700;800&display=swap');
.kcs{--bg:#0C0C0E;--raise:#141416;--card:#1B1B1F;--border:#2A2A2E;--text:#F5F3EF;--muted:#9A9A9A;--faint:#6a6a6e;--accent:#6D5DFB;--glow:rgba(109,93,251,.14);
  box-sizing:border-box;background:var(--bg);color:var(--text);font-family:'Manrope',Arial,sans-serif;-webkit-font-smoothing:antialiased;padding:84px 5vw 92px;}
.kcs *{box-sizing:border-box;margin:0;padding:0;}
.kcs__head{max-width:1240px;margin:0 auto 44px;}
.kcs__eyebrow{font-family:'Unbounded';font-size:12px;letter-spacing:.14em;color:var(--accent);margin-bottom:16px;}
.kcs__title{font-family:'Unbounded';font-weight:700;font-size:clamp(34px,4vw,60px);letter-spacing:-.02em;line-height:1.05;margin-bottom:16px;max-width:900px;}
.kcs__sub{color:var(--muted);font-size:18px;line-height:1.5;max-width:640px;}
.kcs__list{max-width:1240px;margin:0 auto;display:flex;flex-direction:column;gap:26px;}
.kcs__row{display:grid;grid-template-columns:46% 1fr;background:var(--raise);border:1px solid var(--border);border-radius:18px;overflow:hidden;}
.kcs__media{position:relative;overflow:hidden;background:#000;min-height:420px;}
.kcs__media iframe{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);min-width:100%;min-height:100%;width:auto;height:auto;aspect-ratio:16/9;border:none;pointer-events:none;}
.kcs__badge{position:absolute;top:18px;left:18px;z-index:2;background:rgba(0,0,0,.55);border:1px solid var(--border);color:var(--text);font-family:'Unbounded';font-size:10px;letter-spacing:.12em;padding:6px 12px;border-radius:6px;}
.kcs__body{padding:38px 40px;}
.kcs__name{font-family:'Unbounded';font-weight:700;font-size:26px;letter-spacing:-.01em;margin-bottom:8px;}
.kcs__tag{color:var(--faint);font-size:14px;margin-bottom:16px;}
.kcs__tags{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 16px;}
.kcs__chip{font-family:'Manrope',Arial,sans-serif;font-weight:600;font-size:9px;line-height:1;text-transform:uppercase;letter-spacing:.14em;color:rgba(255,255,255,.7);background:transparent;border:1px solid rgba(255,255,255,.22);border-radius:4px;padding:5px 8px;white-space:nowrap;}
.kcs__blk{margin-bottom:18px;}
.kcs__lbl{font-family:'Unbounded';font-size:11px;letter-spacing:.1em;color:var(--accent);margin-bottom:7px;}
.kcs__txt{color:var(--muted);font-size:15px;line-height:1.55;}
.kcs__txt b{color:var(--text);font-weight:600;}
.kcs__btns{display:flex;gap:11px;flex-wrap:wrap;margin-top:26px;}
.kcs__btn{display:inline-flex;align-items:center;gap:8px;font-family:'Manrope';font-weight:700;font-size:14px;padding:13px 20px;border-radius:9px;cursor:pointer;text-decoration:none;transition:.2s;border:1px solid var(--border);}
.kcs__btn svg{width:15px;height:15px;flex:none;}
.kcs__btn--full{background:var(--accent);color:#fff;border-color:var(--accent);}
.kcs__btn--full:hover{transform:translateY(-2px);box-shadow:0 10px 26px var(--glow);}
.kcs__btn--ghost{background:transparent;color:var(--text);}
.kcs__btn--ghost:hover{border-color:var(--accent);color:var(--accent);}
.kcs__soon{font-size:11px;color:var(--faint);margin-left:2px;}
/* оверлей полного видео */
.kcs__lb{position:fixed;inset:0;z-index:99999;display:none;align-items:center;justify-content:center;padding:40px;}
.kcs__lb.open{display:flex;}
.kcs__lbbd{position:absolute;inset:0;background:rgba(4,4,6,.9);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);}
.kcs__lbbox{position:relative;width:min(1100px,100%);}
.kcs__lbframe{position:relative;width:100%;aspect-ratio:16/9;background:#000;border-radius:12px;overflow:hidden;border:1px solid var(--border);}
.kcs__lbframe iframe{position:absolute;inset:0;width:100%;height:100%;border:none;}
.kcs__lbx{position:absolute;top:-46px;right:0;width:38px;height:38px;border-radius:9px;background:var(--raise);border:1px solid var(--border);color:var(--text);font-size:22px;line-height:1;cursor:pointer;}
.kcs__lbx:hover{border-color:var(--accent);color:var(--accent);}
@media (max-width:480px){ .kcs{display:none;} }

.kcs__title{max-width:1180px;font-size:clamp(30px,3.4vw,52px);line-height:1.12;text-wrap:balance}
.kcs__row{grid-template-columns:34% 1fr}
.kcs__media{min-height:620px}
.kcs__name{font-size:22px;line-height:1.25}
.kcs__txt{font-size:15px;line-height:1.62}
</style>
<script>
(function(){
  var cases=[
  {
    "vid": "pd95FJSRFhF27W4YX4ioJJ",
    "full": "3ZsxHkdEuHUubxSAQZDRyG",
    "alt": "Кейс Одоевские консервы: видео о пищевом производстве",
    "badge": "ВИДЕО / ФОТО",
    "name": "Одоевские консервы: от продуктовых роликов - к сайту RU/EN и материалам для выхода на рынок ОАЭ",
    "page": "/case-odoevskie",
    "tag": "Производитель фруктово-ягодных начинок. Начали с продуктовых роликов, после чего сотрудничество переросло в комплексную работу с материалами компании.",
    "tags": ["Видео","Фотосъёмка","Презентация","Фирменный стиль","Сайт"],
    "blocks": [
      [
        "",
        "Сайт RU/EN для работы с зарубежными партнёрами, презентация на русском и английском языках, разработка нового логотипа компании, подготовка материалов производства от А до Я."
      ],
      [
        "",
        "Создание материалов, которые помогают в развитии бизнеса за рубежом."
      ],
      [
        "",
        "Видео о заводе и продуктовых начинках, визитки, поздравления для партнёров, создание фирменных календарей, приглашения на выставки. В феврале планируем делать застройку стенда на выставке."
      ],
      [
        "РЕЗУЛЬТАТЫ",
        "- Новый сайт открыл переговоры в ОАЭ/MENA.<br>- Сделок стало больше.<br>- Все ключевые клиенты продолжили сотрудничество.<br>- Повысился трафик клиентов и уровень продаж новых продуктов."
      ]
    ]
  },
  {
    "vid": "iPcFsLF3eYfDYTauhcgjZj",
    "alt": "Кейс Вистекс: видео о заводе нетканых материалов",
    "full": "fv7FAnLfbLaDaNJLtSQ74H",
    "badge": "ВИДЕО",
    "name": "Вистекс: 8 направлений завода - в 3 минутах видео для коммерческих предложений",
    "page": "/case-vistex",
    "tag": "",
    "tags": ["Видео","Дизайн"],
    "blocks": [
      [
        "",
        "Задача: показать 8 разных направлений производства за 3 минуты видеоролика, благодаря которому клиент сразу поймёт, что производит завод."
      ],
      [
        "",
        "Менеджеры используют ролик в коммерческих предложениях и email-коммуникации, чтобы быстро показать направления производства."
      ],
      [
        "",
        "Создали дизайн email-письма для рассылок потенциальным клиентам с кликабельным функционалом и возможностью смотреть видео о предприятии прямо в email-сообщении."
      ],
      [
        "",
        "Стало проще объяснять продукты и направления предприятия. Увеличилась конверсия продаж."
      ]
    ]
  }
];
  var PLAY='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="5 3 19 12 5 21 5 3"/></svg>';
  var ARROW='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M13 5l7 7-7 7"/></svg>';
  var BG='?autoplay=true&muted=true&loop=true&controls=false&playsInline=true&background=true';
  var lb=document.getElementById('kcsLb'), lbf=document.getElementById('kcsLbIframe');
  function openLb(id){ lbf.src='https://kinescope.io/embed/'+id+'?autoplay=true'; lb.classList.add('open'); }
  function closeLb(){ lb.classList.remove('open'); lbf.src=''; }
  document.getElementById('kcsLbx').addEventListener('click',closeLb);
  lb.querySelector('.kcs__lbbd').addEventListener('click',closeLb);
  var list=document.getElementById('kcsList'); if(!list) return;
  /* KORS: превью кейса получает src только когда строка подходит к экрану, а не сразу при загрузке страницы. */
  var kio=('IntersectionObserver' in window)?new IntersectionObserver(function(es,ob){
    es.forEach(function(e){
      if(!e.isIntersecting) return;
      var f=e.target.querySelector('iframe[data-src]');
      if(f){ f.src=f.getAttribute('data-src'); f.removeAttribute('data-src'); }
      ob.unobserve(e.target);
    });
  },{root:null,rootMargin:'300px 0px',threshold:0.01}):null;
  function kcsWatch(r){
    if(kio){ kio.observe(r); return; }
    var f=r.querySelector('iframe[data-src]');
    if(f){ f.src=f.getAttribute('data-src'); f.removeAttribute('data-src'); }
  }
  cases.forEach(function(c){
    var row=document.createElement('div'); row.className='kcs__row';
    var blocksHtml=c.blocks.map(function(b){return '<div class="kcs__blk"><div class="kcs__lbl">'+b[0]+'</div><div class="kcs__txt">'+b[1]+'</div></div>';}).join('');
    var tagsHtml=(c.tags&&c.tags.length)?('<div class="kcs__tags">'+c.tags.map(function(t){return '<span class="kcs__chip">'+t+'</span>';}).join('')+'</div>'):'';
    row.innerHTML=
      '<div class="kcs__media"><iframe data-src="https://kinescope.io/embed/'+c.vid+BG+'" title="'+(c.alt||c.name)+'" aria-label="'+(c.alt||c.name)+'" allow="autoplay; fullscreen; encrypted-media; picture-in-picture"></iframe></div>'+
      '<div class="kcs__body"><div class="kcs__name">'+c.name+'</div>'+tagsHtml+'<div class="kcs__tag">'+c.tag+'</div>'+blocksHtml+
        '<div class="kcs__btns">'+
          '<button class="kcs__btn kcs__btn--full kcs-full">'+PLAY+'Смотреть полное видео</button>'+
          '<a class="kcs__btn kcs__btn--ghost kcs-soon" href="'+(c.page||'#')+'">Смотреть, как строился проект '+ARROW+'</a>'+
        '</div>'+
      '</div>';
    row.querySelector('.kcs-full').addEventListener('click',function(){ openLb(c.full||c.vid); });
    var soon=row.querySelector('.kcs-soon'); if(!c.page){ soon.addEventListener('click',function(e){ e.preventDefault(); }); }
    list.appendChild(row); kcsWatch(row);
  });
})();
</script>

rec2667196001 — главная, блок кейсов МОБИЛКА, до добавления Инвойсбокса (9962 симв.)

<!-- ===== KORS · 3 ПРОЕКТА ИЗ ОДНОЙ ЗАДАЧИ · МОБИЛКА · блок T123. Только телефон. ===== -->
<div class="kcm">
  <div class="kcm__head">
    <div class="kcm__eyebrow">- КЕЙСЫ</div>
    <h2 class="kcm__title">Что изменилось у производителей после работы с нами и как они используют наши материалы в продажах.</h2>
    <div class="kcm__sub">С чем пришёл клиент, что сделали и какие материалы он получил.</div>
  </div>
  <div class="kcm__list" id="kcmList"></div>
  <div class="kcm__lb" id="kcmLb"><div class="kcm__lbbd"></div><div class="kcm__lbbox"><button class="kcm__lbx" id="kcmLbx">×</button><div class="kcm__lbframe"><iframe id="kcmLbIframe" allow="autoplay; fullscreen; encrypted-media; picture-in-picture" allowfullscreen></iframe></div></div></div>
</div>
<style>
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Unbounded:wght@400;600;700;800&display=swap');
.kcm{--bg:#0C0C0E;--raise:#141416;--card:#1B1B1F;--border:#2A2A2E;--text:#F5F3EF;--muted:#9A9A9A;--faint:#6a6a6e;--accent:#6D5DFB;--glow:rgba(109,93,251,.14);
  box-sizing:border-box;background:var(--bg);color:var(--text);font-family:'Manrope',Arial,sans-serif;-webkit-font-smoothing:antialiased;padding:56px 20px 64px;}
.kcm *{box-sizing:border-box;margin:0;padding:0;}
.kcm__head{margin:0 auto 28px;}
.kcm__eyebrow{font-family:'Unbounded';font-size:11px;letter-spacing:.14em;color:var(--accent);margin-bottom:14px;}
.kcm__title{font-family:'Unbounded';font-weight:700;font-size:28px;letter-spacing:-.02em;line-height:1.1;margin-bottom:14px;}
.kcm__sub{color:var(--muted);font-size:15px;line-height:1.5;}
.kcm__list{display:flex;flex-direction:column;gap:20px;}
.kcm__row{background:var(--raise);border:1px solid var(--border);border-radius:16px;overflow:hidden;}
.kcm__media{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;background:#000;}
.kcm__media iframe{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);min-width:100%;min-height:100%;width:auto;height:auto;aspect-ratio:16/9;border:none;pointer-events:none;}
.kcm__badge{position:absolute;top:14px;left:14px;z-index:2;background:rgba(0,0,0,.55);border:1px solid var(--border);color:var(--text);font-family:'Unbounded';font-size:9.5px;letter-spacing:.12em;padding:5px 10px;border-radius:6px;}
.kcm__body{padding:20px 18px 22px;}
.kcm__name{font-family:'Unbounded';font-weight:700;font-size:20px;letter-spacing:-.01em;margin-bottom:6px;}
.kcm__tag{color:var(--faint);font-size:13px;margin-bottom:14px;}
.kcm__tags{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 13px;}
.kcm__chip{font-family:'Manrope',Arial,sans-serif;font-weight:600;font-size:8px;line-height:1;text-transform:uppercase;letter-spacing:.14em;color:rgba(255,255,255,.7);background:transparent;border:1px solid rgba(255,255,255,.22);border-radius:4px;padding:5px 8px;white-space:nowrap;}
.kcm__blk{margin-bottom:16px;}
.kcm__lbl{font-family:'Unbounded';font-size:10px;letter-spacing:.1em;color:var(--accent);margin-bottom:6px;}
.kcm__txt{color:var(--muted);font-size:14px;line-height:1.55;}
.kcm__txt b{color:var(--text);font-weight:600;}
.kcm__btns{display:flex;flex-direction:column;gap:10px;margin-top:22px;}
.kcm__btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:'Manrope';font-weight:700;font-size:14px;padding:14px 18px;border-radius:9px;cursor:pointer;text-decoration:none;border:1px solid var(--border);width:100%;}
.kcm__btn svg{width:15px;height:15px;flex:none;}
.kcm__btn--full{background:var(--accent);color:#fff;border-color:var(--accent);}
.kcm__btn--ghost{background:transparent;color:var(--text);}
.kcm__lb{position:fixed;inset:0;z-index:99999;display:none;align-items:center;justify-content:center;padding:16px;}
.kcm__lb.open{display:flex;}
.kcm__lbbd{position:absolute;inset:0;background:rgba(4,4,6,.92);}
.kcm__lbbox{position:relative;width:100%;}
.kcm__lbframe{position:relative;width:100%;aspect-ratio:16/9;background:#000;border-radius:12px;overflow:hidden;border:1px solid var(--border);}
.kcm__lbframe iframe{position:absolute;inset:0;width:100%;height:100%;border:none;}
.kcm__lbx{position:absolute;top:-44px;right:0;width:38px;height:38px;border-radius:9px;background:var(--raise);border:1px solid var(--border);color:var(--text);font-size:22px;line-height:1;cursor:pointer;}
@media (min-width:481px){ .kcm{display:none;} }

.kcm__title{font-size:clamp(23px,6.6vw,30px);line-height:1.16;text-wrap:balance;overflow-wrap:anywhere}
.kcm__name{font-size:18px;line-height:1.3;overflow-wrap:anywhere}
.kcm__txt{font-size:14px;line-height:1.62}
</style>
<script>
(function(){
  var cases=[
  {
    "vid": "pd95FJSRFhF27W4YX4ioJJ",
    "full": "3ZsxHkdEuHUubxSAQZDRyG",
    "alt": "Кейс Одоевские консервы: видео о пищевом производстве, мобильная версия",
    "badge": "ВИДЕО / ФОТО",
    "name": "Одоевские консервы: от продуктовых роликов - к сайту RU/EN и материалам для выхода на рынок ОАЭ",
    "page": "/case-odoevskie",
    "tag": "Производитель фруктово-ягодных начинок. Начали с продуктовых роликов, после чего сотрудничество переросло в комплексную работу с материалами компании.",
    "tags": ["Видео","Фотосъёмка","Презентация","Фирменный стиль","Сайт"],
    "blocks": [
      [
        "",
        "Сайт RU/EN для работы с зарубежными партнёрами, презентация на русском и английском языках, разработка нового логотипа компании, подготовка материалов производства от А до Я."
      ],
      [
        "",
        "Создание материалов, которые помогают в развитии бизнеса за рубежом."
      ],
      [
        "",
        "Видео о заводе и продуктовых начинках, визитки, поздравления для партнёров, создание фирменных календарей, приглашения на выставки. В феврале планируем делать застройку стенда на выставке."
      ],
      [
        "РЕЗУЛЬТАТЫ",
        "- Новый сайт открыл переговоры в ОАЭ/MENA.<br>- Сделок стало больше.<br>- Все ключевые клиенты продолжили сотрудничество.<br>- Повысился трафик клиентов и уровень продаж новых продуктов."
      ]
    ]
  },
  {
    "vid": "iPcFsLF3eYfDYTauhcgjZj",
    "alt": "Кейс Вистекс: видео о заводе нетканых материалов, мобильная версия",
    "full": "fv7FAnLfbLaDaNJLtSQ74H",
    "badge": "ВИДЕО",
    "name": "Вистекс: 8 направлений завода - в 3 минутах видео для коммерческих предложений",
    "page": "/case-vistex",
    "tag": "",
    "tags": ["Видео","Дизайн"],
    "blocks": [
      [
        "",
        "Задача: показать 8 разных направлений производства за 3 минуты видеоролика, благодаря которому клиент сразу поймёт, что производит завод."
      ],
      [
        "",
        "Менеджеры используют ролик в коммерческих предложениях и email-коммуникации, чтобы быстро показать направления производства."
      ],
      [
        "",
        "Создали дизайн email-письма для рассылок потенциальным клиентам с кликабельным функционалом и возможностью смотреть видео о предприятии прямо в email-сообщении."
      ],
      [
        "",
        "Стало проще объяснять продукты и направления предприятия. Увеличилась конверсия продаж."
      ]
    ]
  }
];
  var PLAY='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="5 3 19 12 5 21 5 3"/></svg>';
  var ARROW='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M13 5l7 7-7 7"/></svg>';
  var BG='?autoplay=true&muted=true&loop=true&controls=false&playsInline=true&background=true';
  var lb=document.getElementById('kcmLb'), lbf=document.getElementById('kcmLbIframe');
  function openLb(id){ lbf.src='https://kinescope.io/embed/'+id+'?autoplay=true'; lb.classList.add('open'); }
  function closeLb(){ lb.classList.remove('open'); lbf.src=''; }
  document.getElementById('kcmLbx').addEventListener('click',closeLb);
  lb.querySelector('.kcm__lbbd').addEventListener('click',closeLb);
  var list=document.getElementById('kcmList'); if(!list) return;
  /* KORS: превью кейса получает src только когда строка подходит к экрану, а не сразу при загрузке страницы. */
  var kio=('IntersectionObserver' in window)?new IntersectionObserver(function(es,ob){
    es.forEach(function(e){
      if(!e.isIntersecting) return;
      var f=e.target.querySelector('iframe[data-src]');
      if(f){ f.src=f.getAttribute('data-src'); f.removeAttribute('data-src'); }
      ob.unobserve(e.target);
    });
  },{root:null,rootMargin:'250px 0px',threshold:0.01}):null;
  function kcmWatch(r){
    if(kio){ kio.observe(r); return; }
    var f=r.querySelector('iframe[data-src]');
    if(f){ f.src=f.getAttribute('data-src'); f.removeAttribute('data-src'); }
  }
  cases.forEach(function(c){
    var row=document.createElement('div'); row.className='kcm__row';
    var blocksHtml=c.blocks.map(function(b){return '<div class="kcm__blk"><div class="kcm__lbl">'+b[0]+'</div><div class="kcm__txt">'+b[1]+'</div></div>';}).join('');
    var tagsHtml=(c.tags&&c.tags.length)?('<div class="kcm__tags">'+c.tags.map(function(t){return '<span class="kcm__chip">'+t+'</span>';}).join('')+'</div>'):'';
    row.innerHTML=
      '<div class="kcm__media"><iframe data-src="https://kinescope.io/embed/'+c.vid+BG+'" title="'+(c.alt||c.name)+'" aria-label="'+(c.alt||c.name)+'" allow="autoplay; fullscreen; encrypted-media; picture-in-picture"></iframe></div>'+
      '<div class="kcm__body"><div class="kcm__name">'+c.name+'</div>'+tagsHtml+'<div class="kcm__tag">'+c.tag+'</div>'+blocksHtml+
        '<div class="kcm__btns">'+
          '<button class="kcm__btn kcm__btn--full kcm-full">'+PLAY+'Смотреть полное видео</button>'+
          '<a class="kcm__btn kcm__btn--ghost kcm-soon" href="'+(c.page||'#')+'">Смотреть, как строился проект '+ARROW+'</a>'+
        '</div>'+
      '</div>';
    row.querySelector('.kcm-full').addEventListener('click',function(){ openLb(c.full||c.vid); });
    var soon=row.querySelector('.kcm-soon'); if(!c.page){ soon.addEventListener('click',function(e){ e.preventDefault(); }); }
    list.appendChild(row); kcmWatch(row);
  });
})();
</script>

rec2699474201 — /case-odoevskie, до правки названия Инвойсбокса (43541 симв.)

<!-- ================================================================
     KORS · СТРАНИЦА-КЕЙС · ОДОЕВСКИЕ КОНСЕРВЫ
     ── ЗАПОЛНЕНИЕ ──────────────────────────────────────────────────
     Всё фото/видео вставляется В ОДНОМ МЕСТЕ - в списке ниже (KORS_CASE).
     • Картинки: вставь ссылку на изображение в кавычки. Пусто '' = заглушка.
       Где взять ссылку: загрузи фото в Tilda (Файл-менеджер сайта или любой
       блок «Изображение») и скопируй URL картинки; либо любой прямой URL.
     • Видео: впиши ID ролика Kinescope (часть после kinescope.io/… ). Пусто = заглушка.
     Больше нигде в коде править не нужно - слоты подтянутся сами.
     ================================================================ -->
<script>
window.KORS_CASE = {
  images: {
    cover:        'https://static.tildacdn.com/tild3563-6163-4139-a463-386164356466/odoev-cover-film-128.jpg',   // большая обложка вверху (гориз. фото/визуал)
    firstShoot:   '',   // шаг 01 - кадр первой съёмки начинки (если без видео)
    firstShoot2:  '',   // шаг 01 - кадр второй съёмки начинки (если без видео)
presentation: '',   // шаг 02 - одиночная картинка-запасной вариант (используется, только если slides пуст)
    factoryPhoto: '',   // шаг 03 - фото производства (если без видео)
    product1:     'https://static.tildacdn.com/tild3538-6336-4331-b630-393965653763/odoevskie-nachinki-1.jpg',   // шаг 04 - фото продукции 1
    product2:     'https://static.tildacdn.com/tild6462-3535-4432-b266-653436663333/odoevskie-kruasan-12.jpg',   // шаг 04 - фото продукции 2
    product3:     'https://static.tildacdn.com/tild6462-3131-4336-a237-366662616565/odoevskie-laboratori.jpg',   // шаг 04 - фото цеха/процесса
    logoBefore:   'https://static.tildacdn.com/tild6462-3439-4365-a261-333634373338/odoevskie-logo-do-12.jpg',   // шаг 05 - СТАРЫЙ логотип (до)
    logoAfter:    'https://static.tildacdn.com/tild6338-3131-4439-b966-623739303361/odoevskie-logo-posle.jpg',   // шаг 05 - НОВЫЙ логотип (после)
    brand1:       '',   // шаг 06 - визитки
    brand2:       'https://static.tildacdn.com/tild6162-3336-4666-a338-323336396465/odoev-otkrytka-vesna.jpg',   // шаг 06 - открытки
    brand3:       'https://static.tildacdn.com/tild6632-3465-4634-b861-393137323563/odoevskie-priglasite.jpg',   // шаг 06 - др. носители
    siteShots:    ''    // шаг 07 - скриншоты povidlo.su и povidlo.pro
  },
  // Скриншоты сайтов для шага 07. Вкладка RU - povidlo.su, вкладка EN - povidlo.pro.
  siteRu: [
    'https://static.tildacdn.com/tild3463-3561-4837-b438-333439316132/povidlo-su-01-hero.jpg',
    'https://static.tildacdn.com/tild6439-3335-4533-a436-656336633534/povidlo-su-02-kontro.jpg',
    'https://static.tildacdn.com/tild6336-3035-4463-b463-653463326363/povidlo-su-03-katalo.jpg',
    'https://static.tildacdn.com/tild6538-3937-4435-b339-336162656636/povidlo-su-04-menedz.jpg'
  ],
  siteEn: [
    'https://static.tildacdn.com/tild3561-3836-4335-b431-323263383230/povidlo-pro-01-hero.jpg',
    'https://static.tildacdn.com/tild6163-3731-4132-b166-613736353464/povidlo-pro-02-about.jpg',
    'https://static.tildacdn.com/tild3335-3935-4237-b938-386233613336/povidlo-pro-03-leadf.jpg'
  ],
  // Визитки для шага 06. Две карточки, открываются в том же лайтбоксе, что и развороты.
  // Пусто - используется одиночный слот images.brand1.
  cards: [
    'https://static.tildacdn.com/tild3261-6362-4033-a662-393031353131/odoev-vizitka-ivanov.jpg',
    'https://static.tildacdn.com/tild6232-3936-4463-a637-333436386635/odoev-vizitka-veklic.jpg'
  ],
  // Развороты печатной презентации для шага 02. Два комплекта, переключаются вкладками RU/EN.
  // Порядок = порядок в галерее. Пусто в slides - в слоте останется заглушка,
  // пусто в slidesEn - вкладка EN не показывается.
  slides: [
    'https://static.tildacdn.com/tild3839-6265-4534-b632-383934363939/odoev-pres-01.jpg',
    'https://static.tildacdn.com/tild6365-3736-4633-b638-623535336533/odoev-pres-02.jpg',
    'https://static.tildacdn.com/tild3861-3537-4062-b638-623737303666/odoev-pres-03.jpg',
    'https://static.tildacdn.com/tild3739-3733-4737-a439-373962306636/odoev-pres-04.jpg',
    'https://static.tildacdn.com/tild6131-3763-4633-a632-383430346635/odoev-pres-05.jpg',
    'https://static.tildacdn.com/tild6238-3563-4662-b936-343165656562/odoev-pres-06.jpg',
    'https://static.tildacdn.com/tild6330-3263-4431-b136-306366623031/odoev-pres-07.jpg',
    'https://static.tildacdn.com/tild3263-6531-4663-b630-316431303234/odoev-pres-08.jpg',
    'https://static.tildacdn.com/tild3032-6661-4835-b932-613834373837/odoev-pres-09.jpg',
    'https://static.tildacdn.com/tild6439-3366-4065-b763-343465383338/odoev-pres-10.jpg',
    'https://static.tildacdn.com/tild3431-3232-4331-a661-653335363963/odoev-pres-11.jpg',
    'https://static.tildacdn.com/tild3239-6231-4336-a531-363563343563/odoev-pres-12.jpg',
    'https://static.tildacdn.com/tild3231-6331-4262-b262-363063643633/odoev-pres-13.jpg',
    'https://static.tildacdn.com/tild6537-3532-4534-a166-623232326538/odoev-pres-14.jpg',
    'https://static.tildacdn.com/tild3763-3332-4665-b631-353963643534/odoev-pres-15.jpg',
    'https://static.tildacdn.com/tild3439-6161-4537-a531-633864306164/odoev-pres-16.jpg'
  ],
  slidesEn: [
    'https://static.tildacdn.com/tild6132-3033-4436-b735-343631343130/odoev-pres-en-01.jpg',
    'https://static.tildacdn.com/tild3832-3935-4631-b631-366464363039/odoev-pres-en-02.jpg',
    'https://static.tildacdn.com/tild3332-3761-4538-b430-333335363031/odoev-pres-en-03.jpg',
    'https://static.tildacdn.com/tild6566-3932-4236-b365-323064646265/odoev-pres-en-04.jpg',
    'https://static.tildacdn.com/tild3238-6164-4730-b662-366261353863/odoev-pres-en-05.jpg',
    'https://static.tildacdn.com/tild3939-3332-4437-a131-643238343734/odoev-pres-en-06.jpg',
    'https://static.tildacdn.com/tild6264-3134-4561-a333-646630626136/odoev-pres-en-07.jpg',
    'https://static.tildacdn.com/tild3463-6639-4532-b364-636338303939/odoev-pres-en-08.jpg',
    'https://static.tildacdn.com/tild6634-3632-4239-a463-363462323464/odoev-pres-en-09.jpg',
    'https://static.tildacdn.com/tild3434-3061-4432-b663-386464313137/odoev-pres-en-10.jpg',
    'https://static.tildacdn.com/tild6265-6534-4335-a130-306462656133/odoev-pres-en-11.jpg',
    'https://static.tildacdn.com/tild6332-6135-4762-a135-303166363439/odoev-pres-en-12.jpg',
    'https://static.tildacdn.com/tild3930-3535-4231-a436-326336303337/odoev-pres-en-13.jpg',
    'https://static.tildacdn.com/tild3335-3832-4730-b466-393065656433/odoev-pres-en-14.jpg',
    'https://static.tildacdn.com/tild3934-3966-4931-a466-613731333338/odoev-pres-en-15.jpg',
    'https://static.tildacdn.com/tild6465-3432-4361-b464-343863303862/odoev-pres-en-16.jpg'
  ],
  videos: {
    firstShoot:   'sRyZwPm3BS9CVspVi2sLx3',   // шаг 01 - ролик «Термостабильные начинки»
    firstShoot2:  'mZiwnH9uZAdc15hhRsqPvB',    // шаг 01 - ролик «Нетермостабильные начинки»
    factory:      '3ZsxHkdEuHUubxSAQZDRyG',    // шаг 03 - фильм о заводе, полная версия
    main:         'j8Pq4wWMNTPm6Js8UQiM1n'     // блок «Видео проекта»
  }
};
</script>
<div class="kcp">
  <!-- ===== HERO ===== -->
  <header class="kcp__hero">
    <div class="kcp__hero-in">
      <a class="kcp__back" href="/#rec2667018101">← Все проекты</a>
      <div class="kcp__eyebrow">КЕЙС · ПИЩЕВОЕ ПРОИЗВОДСТВО</div>
      <h1 class="kcp__title">Одоевские консервы</h1>
      <div class="kcp__tags"><span class="kcp__tag">Видео</span><span class="kcp__tag">Фотосъёмка</span><span class="kcp__tag">Презентация</span><span class="kcp__tag">Фирменный стиль</span><span class="kcp__tag">Сайт</span></div>
      <p class="kcp__lead">Как из одной видеосъёмки вырос полный комплект материалов - от роликов и фотосъёмки до нового логотипа, фирменного стиля и двух сайтов: русского и экспортного, под рынок ОАЭ.</p>
      <div class="kcp__facts">
        <div class="kcp__fact"><span>Сфера</span><b>Пищевое производство · B2B</b></div>
        <div class="kcp__fact"><span>С чего начали</span><b>Видеосъёмка продукта</b></div>
        <div class="kcp__fact"><span>Где сейчас</span><b>povidlo.su + povidlo.pro</b></div>
        <div class="kcp__fact"><span>Формат</span><b>полный комплект материалов</b></div>
      </div>
    </div>
    <!-- ВСТАВИТЬ: большое обложечное фото/видео (завод, продукция или кадр со съёмки). Пока заглушка. -->
    <div class="kcp__cover kcp__ph" data-img="cover"><div class="kcp__ph-label">📷 Обложка: фото продукции / кадр со съёмки (16:9)</div></div>
  </header>
  <!-- ===== КТО КЛИЕНТ ===== -->
  <section class="kcp__sec">
    <div class="kcp__grid2">
      <div>
        <div class="kcp__kick">- О КОМПАНИИ</div>
        <h2 class="kcp__h2">Сильное производство, которое было не видно</h2>
      </div>
      <div class="kcp__prose">
        <p>«Одоевские консервы» - производитель из посёлка Одоев в Тульской области. Уже более двадцати лет компания выпускает термостабильные фруктово-ягодные начинки, повидло, джемы, конфитюры, пюре и наполнители для хлебопекарной, кондитерской и молочной промышленности.</p>
        <p>Это классический B2B: их продукт - ингредиент, который живёт <b>внутри</b> чужих изделий. Начинка в круассане, повидло в печенье, наполнитель в йогурте. Продукт качественный, производство серьёзное - но со стороны этого масштаба не было видно.</p>
        <p>Видео, сайт, презентация и фирменные материалы существовали разрозненно и не складывались в единую картину. Компанию нельзя было «показать» - только долго объяснять на словах.</p>
      </div>
    </div>
  </section>
  <!-- ===== ЗАДАЧА (акцентная плашка) ===== -->
  <section class="kcp__sec">
    <div class="kcp__callout">
      <div class="kcp__callout-k">ЗАДАЧА</div>
      <div class="kcp__callout-t">Показать масштаб и качество производства так, чтобы партнёр видел уровень компании за несколько минут - а не верил на слово.</div>
    </div>
  </section>
  <!-- ===== ТАЙМЛАЙН РАБОТЫ ===== -->
  <section class="kcp__sec">
    <div class="kcp__kick">- КАК ШЛА РАБОТА</div>
    <h2 class="kcp__h2">Из одной съёмки - в полный цикл</h2>
    <p class="kcp__sub">Сотрудничество началось с одного ролика и постепенно выросло в полный комплект материалов. Вот путь шаг за шагом.</p>
    <ol class="kcp__timeline">
      <li class="kcp__step">
        <div class="kcp__step-num">01</div>
        <div class="kcp__step-body">
          <h3>Первые видео на начинке</h3>
          <p>Начали с двух роликов о продукте. Сняли начинку «в деле» - текстуру, цвет, как она работает в готовом изделии. Это первое, что показывает потенциальному партнёру, что перед ним - качественный ингредиент.</p>
          <!-- Два ролика первой съёмки. ID берутся из KORS_CASE.videos (firstShoot / firstShoot2). -->
          <div class="kcp__vid2">
            <div class="kcp__ph" data-video="firstShoot" data-img="firstShoot"><div class="kcp__ph-label">🎬 Термостабильные начинки</div></div>
            <div class="kcp__ph" data-video="firstShoot2" data-img="firstShoot2"><div class="kcp__ph-label">🎬 Нетермостабильные начинки</div></div>
          </div>
        </div>
      </li>
      <li class="kcp__step">
        <div class="kcp__step-num">02</div>
        <div class="kcp__step-body">
          <h3>Печатная презентация</h3>
          <p>Собрали продукт и производство в понятную структуру - презентацию для переговоров и выставок. Разложили ассортимент, преимущества и мощности так, чтобы менеджеру было легко показать компанию клиенту.</p>
          <!-- Галерея разворотов: ссылки в KORS_CASE.slides. Клик по развороту открывает его на весь экран. -->
          <div class="kcp__gal" data-gallery></div>
          <div class="kcp__ph kcp__ph--wide" data-img="presentation"><div class="kcp__ph-label">📑 Развороты печатной презентации</div></div>
        </div>
      </li>
      <li class="kcp__step">
        <div class="kcp__step-num">03</div>
        <div class="kcp__step-body">
          <h3>Видео о заводе</h3>
          <p>Сняли само производство: масштаб цехов, оборудование, процессы. Именно это видео закрывает главный вопрос B2B-клиента - «а справятся ли по объёму и качеству». Масштаб теперь виден, а не описан словами.</p>
          <div class="kcp__ph kcp__ph--wide" data-video="factory" data-img="factoryPhoto"><div class="kcp__ph-label">🎬 Видео о заводе / кадры производства</div></div>
        </div>
      </li>
      <li class="kcp__step">
        <div class="kcp__step-num">04</div>
        <div class="kcp__step-body">
          <h3>Фотосъёмка для презентации и каталога</h3>
          <p>Сделали предметную и производственную фотосъёмку - продукция, упаковка, цеха. Единый визуальный ряд, который лёг в презентацию, каталог и дальнейшие материалы.</p>
          <div class="kcp__ph kcp__ph--grid">
            <div class="kcp__ph" data-img="product1"><div class="kcp__ph-label">📷 фото продукции 1</div></div>
            <div class="kcp__ph" data-img="product2"><div class="kcp__ph-label">📷 фото продукции 2</div></div>
            <div class="kcp__ph" data-img="product3"><div class="kcp__ph-label">📷 фото цеха / процесса</div></div>
          </div>
        </div>
      </li>
      <li class="kcp__step">
        <div class="kcp__step-num">05</div>
        <div class="kcp__step-body">
          <h3>Новый логотип: до / после</h3>
          <p>Обновили логотип - сохранили узнаваемость, но привели к современному виду, который одинаково хорошо работает на упаковке, в презентации и на сайте. Сравните сами:</p>
          <!-- ДО/ПОСЛЕ слайдер. ВСТАВИТЬ 2 картинки логотипа: старый и новый -->
          <div class="kcp__ba" id="kcpBA">
            <div class="kcp__ba-after kcp__ph" data-img="logoAfter" data-fit="contain"><div class="kcp__ph-label">✅ НОВЫЙ логотип (после)</div></div>
            <div class="kcp__ba-before kcp__ph" id="kcpBABefore" data-img="logoBefore" data-fit="contain"><div class="kcp__ph-label">◻️ СТАРЫЙ логотип (до)</div></div>
            <div class="kcp__ba-handle" id="kcpBAHandle"><span></span></div>
            <div class="kcp__ba-tag kcp__ba-tag--l">ДО</div>
            <div class="kcp__ba-tag kcp__ba-tag--r">ПОСЛЕ</div>
          </div>
          <div class="kcp__ba-hint">Потяните ползунок влево-вправо, чтобы сравнить</div>
        </div>
      </li>
      <li class="kcp__step">
        <div class="kcp__step-num">06</div>
        <div class="kcp__step-body">
          <h3>Фирменный стиль: открытки, визитки, носители</h3>
          <p>Оформили фирменные носители - визитки, открытки и другие материалы в единой стилистике. Компания получила узнаваемый облик, который работает на каждой точке контакта.</p>
          <div class="kcp__cards" data-cards></div>
          <div class="kcp__ph kcp__ph--grid">
            <div class="kcp__ph" data-img="brand1"><div class="kcp__ph-label">📷 визитки</div></div>
            <div class="kcp__ph" data-img="brand2" data-fit="contain"><div class="kcp__ph-label">📷 открытки</div></div>
            <div class="kcp__ph" data-img="brand3" data-fit="contain"><div class="kcp__ph-label">📷 др. носители</div></div>
          </div>
        </div>
      </li>
      <li class="kcp__step">
        <div class="kcp__step-num">07</div>
        <div class="kcp__step-body">
          <h3>Два сайта: povidlo.su и povidlo.pro</h3>
          <p>Сделали не языковой переключатель, а два отдельных сайта. Русский - povidlo.su, под брендом «Одоевские консервы». Английский - povidlo.pro, под экспортным брендом POVIDLO: он собран под рынок ОАЭ и региона MENA, с отдельной структурой и своими акцентами.</p>
          <div class="kcp__gal kcp__gal--site" data-sitegal></div>
          <div class="kcp__sitebtns">
            <a class="kcp__sitebtn" href="https://povidlo.su" target="_blank" rel="noopener">Открыть povidlo.su</a>
            <a class="kcp__sitebtn kcp__sitebtn--ghost" href="https://povidlo.pro" target="_blank" rel="noopener">Открыть povidlo.pro</a>
          </div>
          <div class="kcp__ph kcp__ph--wide" data-img="siteShots"><div class="kcp__ph-label">💻 Скриншоты povidlo.su и povidlo.pro</div></div>
        </div>
      </li>
      <li class="kcp__step kcp__step--next">
        <div class="kcp__step-num">→</div>
        <div class="kcp__step-body">
          <h3>Что дальше</h3>
          <p>Следующий этап - застройка выставочного стенда (планируется на зиму). Сотрудничество продолжается: от продукта на экране - к тому, как компания выглядит вживую на выставке.</p>
        </div>
      </li>
    </ol>
  </section>
  <!-- ===== РЕЗУЛЬТАТ ===== -->
  <section class="kcp__sec">
    <div class="kcp__result">
      <div class="kcp__kick">- ЧТО ИЗМЕНИЛОСЬ</div>
      <h2 class="kcp__h2">Компанию теперь можно показать, а не пересказывать</h2>
      <div class="kcp__result-grid">
        <div class="kcp__rcard"><div class="kcp__rc-t">Единый комплект</div><p>Видео, фото, презентация, логотип, фирменный стиль и сайт - собраны в одну систему и работают вместе.</p></div>
        <div class="kcp__rcard"><div class="kcp__rc-t">Масштаб за минуты</div><p>Производство и уровень компании видно сразу - на переговорах, выставках и в презентации, без долгих объяснений.</p></div>
        <div class="kcp__rcard"><div class="kcp__rc-t">Экспортное направление</div><p>Экспорт и представительства в Грузии и ОАЭ. Англоязычный povidlo.pro - то, чем компания представляет себя в регионе MENA.</p></div>
        <div class="kcp__rcard"><div class="kcp__rc-t">Долгое партнёрство</div><p>Сотрудничество выросло из одной видеосъёмки в постоянную работу над материалами компании.</p></div>
      </div>
    </div>
  </section>
  <!-- ===== ЧТО ВОШЛО (услуги) ===== -->
  <section class="kcp__sec">
    <div class="kcp__kick">- ЧТО ВОШЛО В КОМПЛЕКТ</div>
    <div class="kcp__chips">
      <span>Видеопродакшн</span><span>Съёмка производства</span><span>Фотосъёмка</span><span>Печатная презентация</span><span>Редизайн логотипа</span><span>Фирменный стиль</span><span>Визитки и открытки</span><span>Сайт RU</span><span>Сайт EN (MENA)</span>
    </div>
  </section>
  <!-- ===== ВИДЕО КЕЙСА (СКРЫТ) ===== -->
  <!-- СЕКЦИЯ СКРЫТА 28.08.2026. Причина: на странице уже четыре ролика (два в шаге 01 и фильм о заводе в шаге 03).
       Разметка и ключ KORS_CASE.videos.main оставлены нетронутыми. Чтобы вернуть секцию, снимите этот комментарий.
       ID ролика подставляется из KORS_CASE.videos.main
  <section class="kcp__sec">
    <div class="kcp__kick">- СМОТРЕТЬ</div>
    <h2 class="kcp__h2">Видео проекта</h2>
    <div class="kcp__video" data-video="main"><div class="kcp__ph-label">🎬 Основной ролик проекта</div></div>
  </section>
  -->
  <!-- ===== ОТЗЫВ КЛИЕНТА ===== -->
  <section class="kcp__sec">
    <div class="kcp__kick">- ОТЗЫВ</div>
    <h2 class="kcp__h2">Благодарственное письмо</h2>
    <p class="kcp__sub">ООО «МастерДжем» - юридическое лицо «Одоевских консервов»</p>
    <div class="kcp__letter"><img src="https://static.tildacdn.com/tild3231-6563-4932-b139-373433306561/pismo-odoevskie-1200.jpg" alt="Благодарственное письмо от ООО «МастерДжем» (Одоевские консервы) команде KORS Production за фото- и видеосъёмку производства и материалы для сайта и презентаций" loading="lazy"></div>
  </section>
  <!-- ===== ДРУГИЕ КЕЙСЫ ===== -->
  <section class="kcp__sec">
    <div class="kcp__kick">- ЕЩЁ</div>
    <h2 class="kcp__h2">Другие кейсы</h2>
    <div class="kcp__more">
      <a class="kcp__more-card" href="/case-invoicebox"><span>Кейс</span><b>InvoiceBox</b><i>Видеоматериалы для платформы →</i></a>
      <a class="kcp__more-card" href="/case-vistex"><span>Кейс</span><b>Вистекс</b><i>Съёмка видео о предприятии →</i></a>
    </div>
  </section>
  <!-- ===== CTA ===== -->
  <section class="kcp__cta">
    <h2>Хотите так же показать своё производство?</h2>
    <p>Начнём с одного шага - а вырастем в полный цикл, если понравится результат.</p>
    <a class="kcp__cta-btn" href="#popup:zayavka">Обсудить проект →</a>
  </section>
  <!-- Лайтбокс. Тот же, что для благодарственных писем на главной, плюс листание. -->
  <div class="kcp__lb" id="kcpLb" aria-hidden="true">
    <div class="kcp__lbbd"></div>
    <div class="kcp__lbbox">
      <button class="kcp__lbx" id="kcpLbx" aria-label="Закрыть">×</button>
      <button class="kcp__lbnav kcp__lbnav--prev" id="kcpLbPrev" aria-label="Предыдущий">&#8249;</button>
      <img id="kcpLbImg" alt="">
      <button class="kcp__lbnav kcp__lbnav--next" id="kcpLbNext" aria-label="Следующий">&#8250;</button>
      <div class="kcp__lbcount" id="kcpLbCount"></div>
    </div>
  </div>
</div>
<style>
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Unbounded:wght@400;600;700;800&display=swap');
.kcp{--bg:#0C0C0E;--raise:#141416;--card:#1B1B1F;--border:#2A2A2E;--soft:#242428;--text:#F5F3EF;--muted:#9A9A9A;--faint:#6a6a6e;--accent:#6D5DFB;--glow:rgba(109,93,251,.14);
  box-sizing:border-box;background:var(--bg);color:var(--text);font-family:'Manrope',Arial,sans-serif;-webkit-font-smoothing:antialiased;}
.kcp *{box-sizing:border-box;margin:0;padding:0;}
.kcp p{line-height:1.65;}
.kcp__eyebrow,.kcp__kick{font-family:'Unbounded';font-size:12px;letter-spacing:.14em;color:var(--accent);}
.kcp__h2{font-family:'Unbounded';font-weight:700;font-size:clamp(26px,3.2vw,42px);letter-spacing:-.02em;line-height:1.12;margin:14px 0 0;}
.kcp__sub{color:var(--muted);font-size:17px;line-height:1.6;max-width:640px;margin-top:14px;}
/* HERO */
.kcp__hero{padding:70px 6vw 0;max-width:1280px;margin:0 auto;}
.kcp__hero-in{max-width:900px;}
.kcp__back{display:inline-block;color:var(--muted);text-decoration:none;font-size:14px;font-weight:600;margin-bottom:34px;transition:.2s;}
.kcp__back:hover{color:var(--accent);}
.kcp__hero .kcp__eyebrow{margin-bottom:18px;}
.kcp__title{font-family:'Unbounded';font-weight:800;font-size:clamp(40px,7vw,88px);letter-spacing:-.03em;line-height:1;margin-bottom:24px;}
.kcp__lead{font-size:clamp(18px,2vw,22px);line-height:1.55;color:#d8d6d1;max-width:760px;}
.kcp__tags{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 18px;}
.kcp__tag{font-family:'Manrope',Arial,sans-serif;font-weight:600;font-size:9px;line-height:1;text-transform:uppercase;letter-spacing:.14em;color:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.22);border-radius:4px;padding:5px 8px;white-space:nowrap;}
@media (max-width:480px){ .kcp__tag{font-size:8px;padding:5px 7px;} .kcp__tags{gap:5px;margin-bottom:14px;} }
.kcp__facts{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:14px;overflow:hidden;margin-top:44px;}
.kcp__fact{background:var(--raise);padding:20px 22px;display:flex;flex-direction:column;gap:7px;}
.kcp__fact span{font-size:12px;color:var(--faint);text-transform:uppercase;letter-spacing:.06em;}
.kcp__fact b{font-family:'Unbounded';font-weight:600;font-size:14px;line-height:1.3;}
.kcp__cover{margin:48px auto 0;max-width:1280px;aspect-ratio:16/8;border-radius:20px;}
/* SECTIONS */
.kcp__sec{max-width:1080px;margin:0 auto;padding:64px 6vw;}
.kcp__grid2{display:grid;grid-template-columns:0.85fr 1.15fr;gap:48px;align-items:start;}
.kcp__prose p{color:#c9c7c2;font-size:17px;margin-bottom:16px;}
.kcp__prose p:last-child{margin-bottom:0;}
.kcp__prose b{color:var(--text);font-weight:600;}
/* CALLOUT */
.kcp__callout{background:linear-gradient(135deg,rgba(109,93,251,.10),rgba(109,93,251,.02));border:1px solid rgba(109,93,251,.3);border-radius:18px;padding:40px 44px;}
.kcp__callout-k{font-family:'Unbounded';font-size:12px;letter-spacing:.14em;color:var(--accent);margin-bottom:14px;}
.kcp__callout-t{font-family:'Unbounded';font-weight:600;font-size:clamp(20px,2.4vw,30px);line-height:1.35;letter-spacing:-.01em;}
/* TIMELINE */
.kcp__timeline{list-style:none;margin-top:44px;display:flex;flex-direction:column;gap:26px;}
.kcp__step{display:grid;grid-template-columns:88px 1fr;gap:26px;background:var(--raise);border:1px solid var(--border);border-radius:18px;padding:30px 32px;transition:.25s;}
.kcp__step:hover{border-color:rgba(109,93,251,.4);}
.kcp__step-num{font-family:'Unbounded';font-weight:700;font-size:34px;color:var(--accent);line-height:1;opacity:.85;}
.kcp__step-body h3{font-family:'Unbounded';font-weight:600;font-size:22px;letter-spacing:-.01em;margin-bottom:12px;}
.kcp__step-body p{color:#c4c2bd;font-size:16px;}
.kcp__step--next{background:transparent;border-style:dashed;}
.kcp__step--next .kcp__step-num{opacity:1;}
/* PLACEHOLDERS */
.kcp__ph{position:relative;background:repeating-linear-gradient(45deg,#141416,#141416 12px,#17171a 12px,#17171a 24px);border:2px dashed #38383e;border-radius:14px;min-height:150px;display:flex;align-items:center;justify-content:center;text-align:center;}
.kcp__ph-label{color:#8a8a90;font-size:13px;font-weight:600;line-height:1.5;padding:16px;}
.kcp__ph-label small{color:var(--faint);font-weight:500;}
.kcp__ph--wide{margin-top:18px;aspect-ratio:16/8;min-height:0;}
.kcp__ph--grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:18px;background:none;border:none;padding:0;}
.kcp__ph--grid .kcp__ph{aspect-ratio:4/3;min-height:0;}
.kcp__cover.kcp__ph{aspect-ratio:16/8;}
/* BEFORE/AFTER */
.kcp__ba{position:relative;margin-top:20px;aspect-ratio:16/9;border-radius:16px;overflow:hidden;border:1px solid var(--border);user-select:none;}
.kcp__ba-after,.kcp__ba-before{position:absolute;inset:0;border-radius:0;border:none;}
.kcp__ba-before{width:100%;clip-path:inset(0 50% 0 0);}
.kcp__ba-handle{position:absolute;top:0;bottom:0;left:50%;width:2px;background:var(--accent);cursor:ew-resize;transform:translateX(-1px);}
.kcp__ba-handle span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:40px;height:40px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(0,0,0,.4);}
.kcp__ba-handle span::before{content:'⟷';color:#000;font-size:18px;font-weight:700;}
.kcp__ba-tag{position:absolute;top:14px;font-family:'Unbounded';font-size:11px;letter-spacing:.1em;background:rgba(0,0,0,.6);padding:5px 11px;border-radius:6px;}
.kcp__ba-tag--l{left:14px;}
.kcp__ba-tag--r{right:14px;}
.kcp__ba-hint{text-align:center;color:var(--faint);font-size:13px;margin-top:12px;}
/* RESULT */
.kcp__result-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:34px;}
.kcp__rcard{background:var(--raise);border:1px solid var(--border);border-radius:16px;padding:26px 28px;}
.kcp__rc-t{font-family:'Unbounded';font-weight:600;font-size:18px;color:var(--accent);margin-bottom:10px;}
.kcp__rcard p{color:#c4c2bd;font-size:15px;}
/* CHIPS */
.kcp__chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;}
.kcp__chips span{font-family:'Manrope';font-weight:600;font-size:14px;color:var(--text);background:rgba(109,93,251,.08);border:1px solid rgba(109,93,251,.4);border-radius:8px;padding:10px 16px;}
/* VIDEO */
.kcp__video{margin-top:24px;aspect-ratio:16/9;border-radius:18px;overflow:hidden;border:1px solid var(--border);background:#000;}
.kcp__video iframe{width:100%;height:100%;border:none;}
/* CTA */
.kcp__vid2{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px;}
.kcp__vid2 .kcp__ph{aspect-ratio:16/9;min-height:0;margin-top:0;}
.kcp__letter{margin-top:26px;max-width:440px;}
.kcp__letter img{display:block;width:100%;height:auto;border-radius:14px;border:1px solid var(--border);}
.kcp__more{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:28px;}
.kcp__more-card{display:block;background:var(--raise);border:1px solid var(--border);border-radius:16px;padding:24px 26px;text-decoration:none;transition:.2s;}
.kcp__more-card:hover{border-color:var(--accent);}
.kcp__more-card span{display:block;font-size:12px;letter-spacing:2px;color:var(--accent);text-transform:uppercase;margin-bottom:10px;}
.kcp__more-card b{display:block;font-family:'Unbounded',sans-serif;font-weight:700;font-size:22px;line-height:1.2;color:var(--text);margin-bottom:8px;}
.kcp__more-card i{font-style:normal;font-size:15px;color:var(--muted);}
@media (max-width:640px){.kcp__vid2{grid-template-columns:1fr;}.kcp__more{grid-template-columns:1fr;}}
/* --- Галерея разворотов презентации --- */
.kcp__gal{margin-top:18px;}
.kcp__galhead{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:12px;}
.kcp__galtabs{display:inline-flex;gap:4px;background:var(--soft);border:1px solid var(--border);border-radius:9px;padding:4px;}
.kcp__galtab{padding:7px 18px;border:none;background:none;color:var(--muted);font-family:'Manrope',Arial,sans-serif;font-weight:600;font-size:13px;line-height:1;letter-spacing:1.2px;border-radius:6px;cursor:pointer;transition:.2s;}
.kcp__galtab:hover{color:var(--text);}
.kcp__galtab.is-on{background:var(--accent);color:#fff;}
.kcp__galnote{margin-top:14px;font-size:13px;line-height:1.5;color:var(--muted);letter-spacing:.3px;}
.kcp__galnav{display:flex;gap:8px;flex-shrink:0;}
.kcp__galarrow{width:40px;height:40px;border:1px solid var(--border);background:var(--raise);border-radius:4px;color:var(--text);font:20px/1 Arial,sans-serif;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.2s;padding:0;}
.kcp__galarrow:hover{border-color:var(--accent);color:var(--accent);}
.kcp__galarrow:disabled{opacity:.3;cursor:default;border-color:var(--border);color:var(--text);}
.kcp__galtrack{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:4px;}
.kcp__galtrack::-webkit-scrollbar{display:none;}
.kcp__galcard{flex:0 0 calc((100% - 24px)/3);scroll-snap-align:start;display:block;padding:0;margin:0;border:1px solid var(--border);background:var(--raise);border-radius:10px;overflow:hidden;cursor:zoom-in;aspect-ratio:1200/873;transition:.2s;font:inherit;}
.kcp__galcard:hover{border-color:var(--accent);}
.kcp__galcard img{width:100%;height:100%;object-fit:cover;display:block;}
/* --- Лайтбокс --- */
.kcp__lb{position:fixed;inset:0;z-index:99999;display:none;align-items:center;justify-content:center;padding:64px 40px;}
.kcp__lb.open{display:flex;}
.kcp__lbbd{position:absolute;inset:0;background:rgba(4,4,6,.9);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);}
.kcp__lbbox{position:relative;width:auto;max-width:min(1100px,100%);display:flex;align-items:center;justify-content:center;}
.kcp__lbbox img{display:block;max-width:100%;max-height:calc(100vh - 170px);width:auto;height:auto;border-radius:10px;background:#0f0f11;}
.kcp__lbx{position:absolute;top:-48px;right:0;width:38px;height:38px;border-radius:9px;background:var(--raise);border:1px solid var(--border);color:var(--text);font:20px/1 Arial,sans-serif;cursor:pointer;padding:0;}
.kcp__lbx:hover{border-color:var(--accent);color:var(--accent);}
.kcp__lbnav{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;background:rgba(20,20,22,.85);border:1px solid var(--border);color:var(--text);font:22px/1 Arial,sans-serif;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.2s;padding:0;}
.kcp__lbnav:hover{border-color:var(--accent);color:var(--accent);}
.kcp__lbnav--prev{left:10px;}
.kcp__lbnav--next{right:10px;}
.kcp__lbcount{position:absolute;bottom:-36px;left:50%;transform:translateX(-50%);font-size:13px;color:var(--muted);letter-spacing:.4px;white-space:nowrap;}
@media (max-width:820px){.kcp__galcard{flex:0 0 calc((100% - 12px)/2);}.kcp__lb{padding:60px 12px;}.kcp__lbnav{width:40px;height:40px;}}
@media (max-width:480px){.kcp__galcard{flex:0 0 82%;}.kcp__galnav{display:none;}.kcp__galhead{margin-bottom:10px;}}
.kcp__cta{max-width:900px;margin:20px auto 0;padding:80px 6vw 96px;text-align:center;}
.kcp__cta h2{font-family:'Unbounded';font-weight:700;font-size:clamp(26px,3.4vw,42px);letter-spacing:-.02em;margin-bottom:16px;}
.kcp__cta p{color:var(--muted);font-size:18px;margin-bottom:30px;}
.kcp__cta-btn{display:inline-block;background:var(--accent);color:#fff;text-decoration:none;font-family:'Manrope';font-weight:700;font-size:16px;padding:18px 38px;border-radius:10px;transition:.25s;}
.kcp__cta-btn:hover{transform:translateY(-2px);box-shadow:0 14px 34px var(--glow);}
@media (max-width:820px){
  .kcp__facts{grid-template-columns:1fr 1fr;}
  .kcp__grid2{grid-template-columns:1fr;gap:20px;}
  .kcp__step{grid-template-columns:1fr;gap:14px;padding:24px 22px;}
  .kcp__step-num{font-size:28px;}
  .kcp__result-grid{grid-template-columns:1fr;}
  .kcp__ph--grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:480px){
  .kcp__hero{padding:48px 20px 0;}
  .kcp__sec{padding:48px 20px;}
  .kcp__facts{grid-template-columns:1fr;}
  .kcp__callout{padding:28px 24px;}
}
/* заполненные слоты (картинка/видео из конфига) */
.kcp [data-img].kcp--filled,.kcp [data-video].kcp--filled{background:none;border:none;}
.kcp [data-img] img,.kcp [data-video] img{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit;}
.kcp [data-fit="contain"] img{object-fit:contain;background:#0f0f11;padding:6%;}
.kcp [data-video].kcp--filled iframe{width:100%;height:100%;border:none;display:block;}
.kcp__ph.kcp--filled{padding:0;}
/* Визитки в шаге 06 - две карточки рядом, лайтбокс общий с галереей */
.kcp__cards{margin-top:18px}
.kcp__cardsrow{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.kcp__card{display:block;width:100%;padding:0;border:0;margin:0;background:#0f0f11;border-radius:14px;overflow:hidden;aspect-ratio:1680/952;cursor:zoom-in}
.kcp__card img{width:100%;height:100%;object-fit:cover;display:block}
.kcp__card:focus-visible{outline:2px solid #6D5DFB;outline-offset:3px}
.kcp__cardsnote{color:#9A9A9A;font-size:13px;line-height:1.5;margin-top:10px}
.kcp__ph--grid.is-two{grid-template-columns:repeat(2,1fr)}
@media (max-width:680px){.kcp__cardsrow{grid-template-columns:1fr}}
/* Галерея скриншотов сайтов в шаге 07 */
.kcp__gal--site .kcp__galcard{flex:0 0 calc((100% - 12px)/2);aspect-ratio:16/9;background:#0f0f11}
.kcp__gal--site .kcp__galcard img{object-fit:contain}
.kcp__sitebtns{display:flex;flex-wrap:wrap;gap:12px;margin-top:16px}
.kcp__sitebtn{display:inline-block;background:var(--accent);color:#fff;text-decoration:none;font-family:'Manrope';font-weight:700;font-size:15px;line-height:1.2;padding:13px 24px;border-radius:10px;transition:.25s}
.kcp__sitebtn:hover{transform:translateY(-2px);box-shadow:0 12px 28px var(--glow)}
.kcp__sitebtn--ghost{background:transparent;color:var(--text);border:1px solid var(--border)}
.kcp__sitebtn--ghost:hover{border-color:var(--accent);box-shadow:none}
@media (max-width:480px){.kcp__gal--site .kcp__galcard{flex:0 0 88%}.kcp__sitebtn{flex:1 1 100%;text-align:center}}
</style>
<script>
(function(){
  var C=window.KORS_CASE||{}; var IMG=C.images||{}, VID=C.videos||{};
  document.querySelectorAll('.kcp [data-video]').forEach(function(el){
    var id=VID[el.getAttribute('data-video')];
    if(id){ el.classList.add('kcp--filled'); el.innerHTML='<iframe src="https://kinescope.io/embed/'+id+'" allow="autoplay; fullscreen; encrypted-media; picture-in-picture" allowfullscreen frameborder="0"></iframe>'; el.removeAttribute('data-img'); }
  });
  document.querySelectorAll('.kcp [data-img]').forEach(function(el){
    var url=IMG[el.getAttribute('data-img')];
    if(url){ el.classList.add('kcp--filled'); el.innerHTML='<img src="'+url+'" alt="">'; }
  });
})();
(function(){
  // Слайдер до/после
  var ba=document.getElementById('kcpBA'); if(!ba) return;
  var before=document.getElementById('kcpBABefore');
  var handle=document.getElementById('kcpBAHandle');
  var dragging=false;
  function setPos(clientX){
    var r=ba.getBoundingClientRect();
    var x=Math.max(0,Math.min(clientX-r.left,r.width));
    var pct=(x/r.width)*100;
    before.style.clipPath='inset(0 '+(100-pct)+'% 0 0)';
    handle.style.left=pct+'%';
  }
  handle.addEventListener('mousedown',function(){dragging=true;});
  window.addEventListener('mouseup',function(){dragging=false;});
  window.addEventListener('mousemove',function(e){ if(dragging) setPos(e.clientX); });
  handle.addEventListener('touchstart',function(){dragging=true;},{passive:true});
  window.addEventListener('touchend',function(){dragging=false;});
  window.addEventListener('touchmove',function(e){ if(dragging&&e.touches[0]) setPos(e.touches[0].clientX); },{passive:true});
  ba.addEventListener('click',function(e){ setPos(e.clientX); });
})();

(function(){
  var C=window.KORS_CASE||{}, SL=C.slides||[];
  var lb=document.getElementById('kcpLb'), lbi=document.getElementById('kcpLbImg'), lbc=document.getElementById('kcpLbCount');
  if(!lb||!lbi) return;
  var list=[], idx=0, lbl='';
  function render(){ lbi.src=list[idx]; lbi.alt=(lbl||'Разворот')+' '+(idx+1)+' из '+list.length; if(lbc) lbc.textContent=(idx+1)+' / '+list.length; }
  function open(arr,i,l){ list=arr; idx=i; lbl=l||''; lb.classList.add('open'); lb.setAttribute('aria-hidden','false'); document.documentElement.style.overflow='hidden'; render(); }
  function close(){ lb.classList.remove('open'); lb.setAttribute('aria-hidden','true'); document.documentElement.style.overflow=''; lbi.removeAttribute('src'); }
  function go(d){ if(list.length<2) return; idx=(idx+d+list.length)%list.length; render(); }
  window.kcpLightbox={open:open};
  function noteSlides(SETS, cur){
    var ru=SETS.filter(function(s){return s.id==='ru';})[0], en=SETS.filter(function(s){return s.id==='en';})[0];
    if(ru&&en) return (ru.items.length===en.items.length?'По '+ru.items.length+' разворотов в русской и английской версии':ru.items.length+' разворотов на русском и '+en.items.length+' на английском')+' - нажмите на разворот, чтобы рассмотреть';
    return cur.items.length+' разворотов - нажмите на разворот, чтобы рассмотреть';
  }
  function altSlide(i,n,cur){ return 'Разворот '+(i+1)+' печатной презентации «Одоевские консервы»'+(cur.id==='en'?', английская версия':''); }
  function noteSites(SETS, cur){
    return 'Вкладка RU - povidlo.su под брендом «Одоевские консервы», вкладка EN - povidlo.pro под экспортным брендом POVIDLO для рынка MENA. Нажмите на кадр, чтобы рассмотреть';
  }
  function altSite(i,n,cur){ return 'Экран '+(i+1)+' из '+n+' сайта '+(cur.id==='en'?'povidlo.pro':'povidlo.su'); }

  function makeGallery(gal, SETS, noteFn, altFn, label, fbSel){
    if(!gal || !SETS.length) return;
    if(fbSel){ var ph=gal.parentNode.querySelector(fbSel); if(ph) ph.style.display='none'; }
    var tabs=SETS.length>1 ? '<div class="kcp__galtabs" role="tablist">'+SETS.map(function(s,i){return '<button class="kcp__galtab'+(i===0?' is-on':'')+'" data-lang="'+s.id+'" role="tab" aria-selected="'+(i===0)+'">'+s.label+'</button>';}).join('')+'</div>' : '<span></span>';
    gal.innerHTML='<div class="kcp__galhead">'+tabs+'<div class="kcp__galnav"><button class="kcp__galarrow" data-gprev aria-label="Назад">&#8249;</button><button class="kcp__galarrow" data-gnext aria-label="Вперёд">&#8250;</button></div></div><div class="kcp__galtrack"></div><div class="kcp__galnote"></div>';
    var track=gal.querySelector('.kcp__galtrack'), note=gal.querySelector('.kcp__galnote');
    var gp=gal.querySelector('[data-gprev]'), gn=gal.querySelector('[data-gnext]');
    var cur=SETS[0];
    function fill(){
      var h='';
      for(var i=0;i<cur.items.length;i++){ h+='<button class="kcp__galcard" data-gi="'+i+'" aria-label="'+label+' '+(i+1)+' из '+cur.items.length+'"><img src="'+cur.items[i]+'" alt="'+altFn(i,cur.items.length,cur)+'" loading="lazy"></button>'; }
      track.innerHTML=h; track.scrollLeft=0; note.textContent=noteFn(SETS,cur); setTimeout(upd,60);
    }
    function step(){ var c=track.querySelector('.kcp__galcard'); return c?c.offsetWidth+12:320; }
    function upd(){ gp.disabled=track.scrollLeft<8; gn.disabled=track.scrollLeft+track.clientWidth>=track.scrollWidth-8; }
    gp.addEventListener('click',function(){ track.scrollLeft-=step(); });
    gn.addEventListener('click',function(){ track.scrollLeft+=step(); });
    track.addEventListener('scroll',upd); window.addEventListener('resize',upd);
    track.addEventListener('click',function(e){ var b=e.target&&e.target.closest?e.target.closest('.kcp__galcard'):null; if(!b) return; open(cur.items, parseInt(b.getAttribute('data-gi'),10)||0, label); });
    var tabEls=gal.querySelectorAll('.kcp__galtab');
    Array.prototype.forEach.call(tabEls,function(t){
      t.addEventListener('click',function(){
        var id=t.getAttribute('data-lang');
        var next=SETS.filter(function(s){return s.id===id;})[0];
        if(!next||next===cur) return;
        cur=next;
        Array.prototype.forEach.call(tabEls,function(o){ var on=o===t; o.classList.toggle('is-on',on); o.setAttribute('aria-selected',on); });
        fill();
      });
    });
    fill();
  }

  makeGallery(document.querySelector('.kcp [data-gallery]'),
    [{id:'ru',label:'RU',items:SL},{id:'en',label:'EN',items:C.slidesEn||[]}].filter(function(x){return x.items&&x.items.length;}),
    noteSlides, altSlide, 'Разворот', '[data-img="presentation"]');

  makeGallery(document.querySelector('.kcp [data-sitegal]'),
    [{id:'ru',label:'RU',items:C.siteRu||[]},{id:'en',label:'EN',items:C.siteEn||[]}].filter(function(x){return x.items&&x.items.length;}),
    noteSites, altSite, 'Скриншот', '[data-img="siteShots"]');
  var x=document.getElementById('kcpLbx'); if(x) x.addEventListener('click',close);
  var pv=document.getElementById('kcpLbPrev'); if(pv) pv.addEventListener('click',function(e){ e.stopPropagation(); go(-1); });
  var nx=document.getElementById('kcpLbNext'); if(nx) nx.addEventListener('click',function(e){ e.stopPropagation(); go(1); });
  lb.addEventListener('click',function(e){ if(e.target===lbi) return; if(e.target&&e.target.closest&&e.target.closest('.kcp__lbnav,.kcp__lbx')) return; close(); });
  document.addEventListener('keydown',function(e){ if(!lb.classList.contains('open')) return; if(e.key==='Escape'||e.keyCode===27) close(); else if(e.key==='ArrowLeft'||e.keyCode===37) go(-1); else if(e.key==='ArrowRight'||e.keyCode===39) go(1); });
  var sx=0, sy=0;
  lb.addEventListener('touchstart',function(e){ if(!e.touches[0]) return; sx=e.touches[0].clientX; sy=e.touches[0].clientY; },{passive:true});
  lb.addEventListener('touchend',function(e){ var t=e.changedTouches&&e.changedTouches[0]; if(!t) return; var dx=t.clientX-sx, dy=t.clientY-sy; if(Math.abs(dx)>45&&Math.abs(dx)>Math.abs(dy)) go(dx<0?1:-1); },{passive:true});
})();

(function(){
  // Визитки шага 06: две карточки рядом, клик открывает общий лайтбокс.
  var C=window.KORS_CASE||{};
  var CARDS=(C.cards||[]).filter(Boolean);
  var box=document.querySelector('.kcp [data-cards]');
  if(!box) return;
  if(!CARDS.length){ box.style.display='none'; return; }
  var ph=document.querySelector('.kcp [data-img="brand1"]');
  if(ph){ ph.style.display='none'; if(ph.parentNode) ph.parentNode.classList.add('is-two'); }
  var ALT=['Визитка: владелец бизнеса','Визитка: менеджер по продажам'];
  var h='';
  for(var i=0;i<CARDS.length;i++){
    h+='<button type="button" class="kcp__card" data-i="'+i+'" aria-label="Открыть визитку '+(i+1)+' из '+CARDS.length+'"><img src="'+CARDS[i]+'" alt="'+(ALT[i]||'Визитка')+'" loading="lazy"></button>';
  }
  box.innerHTML='<div class="kcp__cardsrow">'+h+'</div><div class="kcp__cardsnote">Нажмите на визитку, чтобы рассмотреть</div>';
  box.addEventListener('click',function(e){
    var b=e.target&&e.target.closest?e.target.closest('.kcp__card'):null;
    if(!b) return;
    if(window.kcpLightbox) window.kcpLightbox.open(CARDS, parseInt(b.getAttribute('data-i'),10), 'Визитка');
  });
})();
</script>

rec3239313501 — /sites, финальная форма, до правки валидации телефона (4533 симв.)

<style>
/* ---------- Финальная форма ---------- */
.final-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:center}
.final-person{margin:0;max-width:320px}
.final-person img{display:block;width:100%;height:auto;aspect-ratio:2/3;object-fit:cover;object-position:center 20%;border-radius:var(--r-md);border:1px solid var(--dark-3)}
.final-person figcaption{margin-top:18px}
.final-person figcaption b{display:block;font-size:18px;letter-spacing:-.02em}
.final-person figcaption span{display:block;margin-top:5px;font-size:14px;line-height:1.5;color:var(--gray)}
@media (max-width:1020px){.final-person{max-width:240px;margin:0 auto}}
.final-form .fields{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:26px 0 16px}
.final-form .field input{background:var(--dark-2);border:1.5px solid var(--dark-3);color:#fff}
.final-form .field input::placeholder{color:#7a7f87}
.final-form .field input:focus{border-color:var(--accent)}
.final-form .msgr{background:var(--dark-2);border-color:var(--dark-3);color:#e8e9ea}
.final-form .msgr.sel{border-color:var(--accent);background:rgba(109,93,251,.16);color:#a99cff}
.final-form .check{color:var(--gray)}
.form-note{font-size:13px;color:var(--gray);margin-top:14px}
.kmailnote{margin-top:14px;text-align:center;font:400 14px/1.5 Manrope,Arial,sans-serif;color:var(--muted)}
.kmailnote a{color:#A99CFF;text-decoration:underline;text-underline-offset:3px}
.kmailnote a:hover{color:var(--ink)}
</style>
<div class="section-dark final" id="final">
  <section>
  <div class="container final-grid">
    <div>
      <figure class="final-person">
        <img src="https://static.tildacdn.com/tild3034-3837-4330-b664-346332656439/dmitriy-kors-1000.jpg" alt="Дмитрий Корс, сооснователь студии KORS Production" loading="lazy">
        <figcaption><b>Дмитрий Корс</b><span>Сооснователь KORS. Проведёт разбор и ответит на вопросы</span></figcaption>
      </figure>
    </div>
    <div class="final-form">
      <div class="eyebrow">Свяжемся в течение 10 минут</div>
      <h2>Обсудим ваш <span class="squig">проект<svg viewBox="0 0 300 24" preserveAspectRatio="none" aria-hidden="true"><path d="M4 14 C70 5 180 4 296 11"/><path d="M140 20 C200 13 255 12 293 16"/></svg></span>?</h2>
      <p class="sub">За 15–20 минут разберём нишу и текущую ситуацию, покажем, какая модель привлечения заявок сработает у вас, и назовём вилку стоимости.</p>
      <form id="leadForm" novalidate>
        <div class="fields">
          <div class="field"><input type="text" name="name" placeholder="Ваше имя" required></div>
          <div class="field"><input type="tel" name="phone" placeholder="Телефон" required></div>
        </div>
        <div class="msgr-row" data-group="final">
          <button type="button" class="msgr sel">Телефон</button>
          <button type="button" class="msgr">Telegram</button>
          <button type="button" class="msgr">WhatsApp</button>
          <button type="button" class="msgr">MAX</button>
        </div>
        <label class="check"><input type="checkbox" required checked> Я принимаю условия <a href="https://korsprod.ru/policy" target="_blank" rel="noopener">политики конфиденциальности</a> и даю согласие на обработку персональных данных</label>
        <button class="btn btn-primary btn-block" type="submit">Получить план запуска</button>
        <div class="kmailnote">Не любите формы - напишите на <a href="mailto:sales@korsprod.ru">sales@korsprod.ru</a></div>
      </form>
      <div class="quiz-done" id="formDone" style="display:none">
        <div class="big">🔥</div>
        <h3 style="color:#fff">Заявка принята</h3>
        <p style="color:var(--gray)">Свяжемся в течение 10 минут в рабочее время и пришлём план запуска под вашу нишу.</p>
      </div>
    </div>
  </div>
  </section>
</div>
<script>
document.querySelectorAll('.msgr-row').forEach(function(row){
  row.querySelectorAll('.msgr').forEach(function(b){
    b.addEventListener('click',function(){
      row.querySelectorAll('.msgr').forEach(function(x){x.classList.remove('sel')});
      b.classList.add('sel');
    });
  });
});
var leadForm=document.getElementById('leadForm');
leadForm.addEventListener('submit',function(e){
  e.preventDefault();
  var name=leadForm.querySelector('[name=name]'),phone=leadForm.querySelector('[name=phone]');
  if(!name.value.trim()){name.focus();return}
  if(phone.value.replace(/\D/g,'').length<10){phone.focus();return}
  leadForm.style.display='none';
  document.getElementById('formDone').style.display='block';
});
</script>

rec3242425201 — /sites, мостик отправки форм, до правки валидации (3004 симв.)

<style>
/* ---------- Отправка форм: мост к штатным блокам-приёмщикам ---------- */
#rec3242306301,#rec3242356401{position:absolute!important;left:-9999px!important;top:0!important;width:1px!important;height:1px!important;overflow:hidden!important;opacity:0!important;pointer-events:none!important;z-index:-1!important}
</style>
<script>
(function(){
  var REC_QUIZ='3242306301',REC_FINAL='3242356401';
  function bridge(rid){var r=document.getElementById('rec'+rid);return r?r.querySelector('form'):null}
  function setF(f,k,v){var el=f.querySelector('[name="'+k+'"]');if(el){el.value=v;return true}return false}
  function fire(f){
    var b=f.querySelector('.t-submit')||f.querySelector('button[type="submit"]')||f.querySelector('input[type="submit"]');
    if(b){b.click();return true}
    if(window.jQuery){window.jQuery(f).trigger('submit');return true}
    return false;
  }
  function pick(row){if(!row)return '';var b=row.querySelector('.msgr.sel');return b?b.textContent.trim():''}
  function unlock(el){if(el)setTimeout(function(){el.disabled=false},10000)}
  function quizAnswers(){
    try{
      if(!window.quizData||!window.quizState)return '';
      return window.quizData.map(function(q,i){
        var a=window.quizState.answers[i];
        return (i+1)+'. '+q.q+' '+(typeof a==='number'?q.opts[a]:'(нет ответа)');
      }).join('\n');
    }catch(e){return ''}
  }
  /* Квиз (блок 10): перехватываем клик до штатного обработчика блока */
  document.addEventListener('click',function(e){
    var t=(e.target&&e.target.closest)?e.target.closest('#qSubmit'):null;
    if(!t)return;
    var f=bridge(REC_QUIZ);if(!f)return;
    var n=document.getElementById('qName'),p=document.getElementById('qPhone'),a=document.getElementById('qAgree');
    if(!n||!p)return;
    e.preventDefault();e.stopPropagation();
    if(!n.value.trim()){n.focus();return}
    if(p.value.trim().length<5){p.focus();return}
    if(a&&!a.checked){a.focus();return}
    if(t.disabled)return;t.disabled=true;unlock(t);
    setF(f,'Имя',n.value.trim());
    setF(f,'Телефон',p.value.trim());
    setF(f,'Мессенджер',pick(document.getElementById('qMsgr')));
    setF(f,'Ответы квиза',quizAnswers());
    fire(f);
  },true);
  /* Финальная форма (блок 17) */
  document.addEventListener('submit',function(e){
    var lf=e.target;
    if(!lf||lf.id!=='leadForm')return;
    var f=bridge(REC_FINAL);if(!f)return;
    var n=lf.querySelector('[name="name"]'),p=lf.querySelector('[name="phone"]'),c=lf.querySelector('.check input');
    if(!n||!p)return;
    e.preventDefault();e.stopPropagation();
    if(!n.value.trim()){n.focus();return}
    if(p.value.replace(/\D/g,'').length<10){p.focus();return}
    if(c&&!c.checked){c.focus();return}
    var b=lf.querySelector('button[type="submit"]');
    if(b){if(b.disabled)return;b.disabled=true;unlock(b)}
    setF(f,'Имя',n.value.trim());
    setF(f,'Телефон',p.value.trim());
    setF(f,'Мессенджер',pick(lf.querySelector('.msgr-row')));
    fire(f);
  },true);
})();
</script>

rec2619108701 — главная, калькулятор, до метки источника попапа (22797 симв.)

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>KORS - калькулятор стоимости</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Unbounded:wght@400;600;700&display=swap');
.kcalc *{box-sizing:border-box;margin:0;padding:0;}
.kcalc{box-sizing:border-box;overflow-x:hidden;max-width:100vw;--bg:#0C0C0E;--raise:#141416;--card:#1B1B1F;--border:#2A2A2E;--border-soft:#242428;--text:#F5F3EF;--muted:#9A9A9A;--faint:#6a6a6e;--accent:#6D5DFB;--glow:rgba(109,93,251,.12);background:var(--bg);color:var(--text);font-family:'Manrope',Arial,sans-serif;padding:clamp(40px,6vw,80px) clamp(14px,3vw,24px);position:relative;overflow:hidden;width:100%;max-width:100%;container-type:inline-size;}
.kcalc__bg{position:absolute;inset:0;background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.014) 0,rgba(255,255,255,.014) 1px,transparent 1px,transparent 9px);pointer-events:none;}
.kcalc__wrap{max-width:1120px;margin:0 auto;position:relative;z-index:1;width:100%;}
.kcalc__eyebrow{display:flex;align-items:center;gap:14px;margin-bottom:22px;}
.kcalc__eyebrow span{width:34px;height:2px;background:var(--accent);display:block;}
.kcalc__eyebrow b{color:var(--accent);font-size:13px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;}
.kcalc h2{font-family:'Unbounded',sans-serif;font-weight:700;font-size:clamp(30px,5vw,54px);line-height:1.05;letter-spacing:-.02em;margin-bottom:20px;}
.kcalc__sub{color:var(--muted);font-size:clamp(16px,2vw,20px);line-height:1.5;max-width:660px;margin-bottom:44px;}
.kcalc__tabs{display:flex;flex-wrap:nowrap;gap:8px;margin-bottom:14px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:4px;}
.kcalc__tabs::-webkit-scrollbar{display:none;}
.kcalc__tab{flex:0 0 auto;background:var(--card);border:1px solid var(--border);border-radius:4px;color:var(--muted);font-family:'Manrope';font-size:14.5px;font-weight:600;padding:12px 18px;cursor:pointer;transition:.16s;white-space:nowrap;}
.kcalc__tab:hover{color:var(--text);border-color:#3a3a40;}
.kcalc__tab.is-active{background:var(--accent);border-color:var(--accent);color:#fff;}
.kcalc__box{background:var(--raise);border:1px solid var(--border-soft);border-radius:8px;padding:40px;}
@container(max-width:600px){.kcalc__box{padding:24px 18px;}}
@media(max-width:600px){.kcalc__box{padding:24px 18px;}}
.kcalc__view{display:none;}
.kcalc__view.is-active{display:block;animation:kfade .2s ease;}
@keyframes kfade{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}
.krow{margin-bottom:26px;}
.krow__label{font-size:14px;color:var(--muted);margin-bottom:12px;font-weight:600;}
.krow__label i{color:var(--faint);font-style:normal;font-weight:500;}
.kopts{display:flex;flex-wrap:wrap;gap:10px;}
.kopt{padding:11px 17px;border:1px solid var(--border);border-radius:4px;font-size:14px;color:var(--muted);background:transparent;cursor:pointer;transition:.16s;font-family:'Manrope';font-weight:500;}
.kopt:hover{border-color:var(--muted);color:var(--text);}
.kopt.is-on{border-color:var(--accent);background:var(--glow);color:var(--text);}
.kopt b{color:var(--accent);font-weight:700;}
.kcheck{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;}
@container(max-width:700px){.kcheck{grid-template-columns:1fr;}}
@media(max-width:700px){.kcheck{grid-template-columns:1fr;}}
.kchk{display:flex;align-items:center;gap:13px;background:var(--card);border:1px solid var(--border);border-radius:4px;padding:15px 16px;cursor:pointer;transition:.16s;}
.kchk:hover{border-color:#3a3a40;}
.kchk.is-on{border-color:var(--accent);}
.kchk__box{width:19px;height:19px;border-radius:3px;border:1.5px solid var(--border);flex:0 0 auto;position:relative;transition:.16s;}
.kchk.is-on .kchk__box{background:var(--accent);border-color:var(--accent);}
.kchk.is-on .kchk__box::after{content:"";position:absolute;left:6px;top:2px;width:4px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);}
.kchk__n{font-size:14.5px;font-weight:500;flex:1;}
.kchk__p{color:var(--muted);font-size:13.5px;font-weight:600;white-space:nowrap;}
/* packages at bottom */
.kpacks{margin-top:38px;padding-top:32px;border-top:1px solid var(--border-soft);}
.kpacks__lbl{font-size:12.5px;color:var(--faint);text-transform:uppercase;letter-spacing:.09em;margin-bottom:5px;}
.kpacks__hint{font-size:13.5px;color:var(--muted);margin-bottom:18px;}
.kpacks__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
@container(max-width:820px){.kpacks__grid{grid-template-columns:1fr;}}
@media(max-width:820px){.kpacks__grid{grid-template-columns:1fr;}}
.kpack{border:1px solid var(--border);border-radius:6px;background:var(--card);padding:22px 20px;cursor:pointer;transition:.16s;display:flex;flex-direction:column;}
.kpack:hover{border-color:var(--accent);}
.kpack__name{font-family:'Unbounded';font-weight:600;font-size:17px;margin-bottom:7px;color:#F5F3EF;}
.kpack__price{color:var(--accent);font-weight:700;font-size:19px;margin-bottom:14px;}
.kpack__price small{color:var(--muted);font-weight:500;font-size:13px;}
.kpack__inc b{color:var(--faint);font-weight:600;text-transform:uppercase;letter-spacing:.06em;font-size:10.5px;display:block;margin-bottom:5px;}
.kpack__inc{color:var(--muted);font-size:12.5px;line-height:1.55;flex:1;}
.kpack__pick{margin-top:15px;font-size:12.5px;color:var(--accent);font-weight:700;}
.kres{border-top:1px solid var(--border-soft);margin-top:10px;padding-top:28px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:22px;}
.kres__lbl{font-size:12.5px;color:var(--faint);text-transform:uppercase;letter-spacing:.09em;margin-bottom:7px;}
.kres__val{font-family:'Unbounded';font-weight:700;font-size:clamp(24px,3.4vw,34px);color:var(--accent);font-variant-numeric:tabular-nums;line-height:1.1;}
.kres__val small{color:var(--muted);font-weight:500;font-size:15px;font-family:'Manrope';}
.kres__cta{background:var(--accent);color:#fff;border:none;border-radius:5px;font-family:'Manrope';font-size:16px;font-weight:700;padding:18px 34px;cursor:pointer;transition:.16s;}
.kres__cta:hover{background:#ff6f38;transform:translateY(-1px);}
.kdisc{margin-top:18px;font-size:12.5px;color:var(--faint);line-height:1.5;}
.klead{display:none;margin-top:24px;background:var(--card);border:1px solid var(--border);border-radius:6px;padding:26px;}
.klead.is-open{display:block;animation:kfade .2s ease;}
.klead h3{font-family:'Unbounded';font-weight:600;font-size:21px;margin-bottom:8px;}
.klead p{color:var(--muted);font-size:14.5px;margin-bottom:18px;line-height:1.5;}
.klead__row{display:flex;gap:12px;flex-wrap:wrap;}
.klead input{flex:1;min-width:190px;background:var(--bg);border:1px solid var(--border);border-radius:4px;color:var(--text);font-family:'Manrope';font-size:16px;padding:14px 17px;}
.klead input:focus{outline:none;border-color:var(--accent);}
.klead__send{background:var(--accent);color:#fff;border:none;border-radius:4px;font-weight:700;font-size:16px;padding:14px 28px;cursor:pointer;white-space:nowrap;}
.klead__note{color:var(--faint);font-size:12.5px;margin-top:13px;}
</style>
</head>
<body style="background:#0C0C0E;">
<div class="kcalc">
  <div class="kcalc__bg"></div>
  <div class="kcalc__wrap">
    <div class="kcalc__eyebrow"><span></span><b>Калькулятор</b></div>
    <h2>Соберите комплект материалов и узнайте ориентир стоимости до разговора с нами.</h2>
    <p class="kcalc__sub">Соберите проект как конструктор - включайте только то, что нужно, лишнее отключайте. Цена сложится сама. Внизу - готовые пакеты, если проще начать с них. Это ориентир: точную смету пришлём после короткого разговора о задаче.</p>
    <div class="kcalc__tabs" id="kTabs"></div>
    <div class="kcalc__box">
      <div id="kPanel"></div>
      <div class="kres">
        <div>
          <div class="kres__lbl">Ориентир по вашему выбору</div>
          <div class="kres__val" id="kTotal">-</div>
        </div>
        <button class="kres__cta" id="kCta">Получить точный расчёт</button>
      </div>
      <div class="kdisc">Цены ориентировочные, диапазон «от - до» зависит от деталей задачи. Итоговая стоимость фиксируется в договоре.</div>
      <div class="klead" id="kLead">
        <h3>Пришлём точную смету</h3>
        <p>Оставьте имя и контакт - вернёмся с точным расчётом по вашему выбору.</p>
        <div class="klead__row">
          <input type="text" id="kName" placeholder="Ваше имя">
          <input type="text" id="kContact" placeholder="Телефон или мессенджер">
          <button class="klead__send" id="kSend">Отправить заявку</button>
        </div>
        <div class="klead__note">Нажимая «Отправить», вы соглашаетесь на обработку данных. Заявка уйдёт на info@korsprod.ru.</div>
      </div>
    </div>
  </div>
</div>
<script>
(function(){
  var DATA={
    video:{name:'Видео',base:[80000,120000],rows:[
      {l:'Сложность ролика',t:'radio',o:[['Просто и быстро',0,0],['Несколько локаций',70000,110000],['Постановка, сложный свет',150000,230000]]},
      {l:'Хронометраж',t:'radio',o:[['До 1 минуты',0,0],['1–3 минуты',40000,60000],['Больше 3 минут',90000,140000]]},
      {l:'Операторов на площадке',t:'radio',o:[['Один',0,0],['Два и больше',20000,35000]]},
      {l:'Съёмка с дрона',t:'radio',o:[['Не нужна',0,0],['Нужна',15000,25000]]},
      {l:'Трансфер и логистика',t:'radio',o:[['Не нужен',0,0],['По Москве',8000,12000],['Выезд в регион',30000,60000]]},
      {l:'В кадре',t:'radio',o:[['Свои сотрудники',0,0],['Профессиональная модель',25000,40000],['Несколько актёров',55000,90000]]},
      {l:'Графика и анимация',t:'radio',o:[['Не нужна',0,0],['Титры и 2D-графика',15000,30000],['3D-графика',55000,90000]]},
      {l:'Дополнительно',t:'multi',o:[['Нейросети (AI-сцены)',25000,40000],['Диктор / озвучка',10000,15000],['Субтитры',5000,8000],['Вертикальная версия для соцсетей',12000,20000],['Съёмка reels / shorts',50000,80000]]}
    ],presets:[
      {name:'Промо для соцсетей',sel:{0:0,1:0,2:0,3:0,4:0,5:0,6:1,7:[2,3]}},
      {name:'Корпоративный фильм',sel:{0:1,1:1,2:1,3:0,4:1,5:1,6:1,7:[1]}},
      {name:'Имиджевый ролик под ключ',sel:{0:2,1:1,2:1,3:1,4:1,5:2,6:2,7:[0,1,3]}}
    ]},
    site:{name:'Сайт',base:[40000,60000],rows:[
      {l:'Тип сайта',t:'radio',o:[['Лендинг, 1 страница',0,0],['Многостраничный сайт',60000,100000],['Интернет-магазин',140000,240000]]},
      {l:'Объём',t:'radio',o:[['До 5 блоков',0,0],['6–12 блоков',25000,40000],['Больше 12',55000,90000]]},
      {l:'Дизайн',t:'radio',o:[['Готовый шаблон',0,0],['Индивидуальный дизайн',45000,80000]]},
      {l:'Тексты и копирайтинг',t:'radio',o:[['Свои тексты',0,0],['Пишем мы',20000,35000]]},
      {l:'Дополнительно',t:'multi',o:[['Подключение CRM',30000,50000],['Аналитика и цели',15000,25000],['Базовое SEO',40000,70000],['Мультиязычность',35000,60000],['Анимации и интерактив',25000,45000],['Онлайн-оплата',30000,50000]]}
    ],presets:[
      {name:'Лендинг для запуска',sel:{0:0,1:1,2:1,3:1,4:[1]}},
      {name:'Корпоративный сайт',sel:{0:1,1:2,2:1,3:1,4:[0,1,2]}}
    ]},
    pres:{name:'Презентация',base:[20000,30000],rows:[
      {l:'Объём',t:'radio',o:[['До 10 слайдов',0,0],['12–16 слайдов',25000,40000],['20+ слайдов',55000,85000]]},
      {l:'Контент',t:'radio',o:[['Оформление по готовому тексту',0,0],['Структура + тексты',20000,35000]]},
      {l:'Дополнительно',t:'multi',o:[['Сложная инфографика',15000,25000],['Анимация слайдов',20000,35000],['Редактируемый PPTX',12000,18000],['Версия для печати',10000,15000],['Перевод на английский',18000,28000]]}
    ],presets:[
      {name:'Экспресс-презентация',sel:{0:0,1:0,2:[]}},
      {name:'Инвест-презентация',sel:{0:1,1:1,2:[0,1]}}
    ]},
    market:{name:'Маркетинг',base:[20000,30000],mo:1,rows:[
      {l:'Реклама (Яндекс Директ)',t:'radio',o:[['Не нужна',0,0],['Только настройка',30000,45000],['Настройка + 1 месяц ведения',55000,80000],['Настройка + 3 месяца ведения',110000,160000]]},
      {l:'Стратегия и планирование',t:'radio',o:[['Не нужна',0,0],['Медиаплан и воронка',35000,55000],['Маркетинговая стратегия под ключ',120000,220000]]},
      {l:'Исследование рынка',t:'radio',o:[['Не нужно',0,0],['Анализ конкурентов',30000,50000],['Полное исследование рынка и ЦА',90000,160000]]},
      {l:'Позиционирование и бренд',t:'radio',o:[['Не нужно',0,0],['УТП и офферы',25000,40000],['Платформа бренда',110000,190000]]},
      {l:'Соцсети (SMM)',t:'radio',o:[['Не нужны',0,0],['Ведение 1 соцсети / мес',35000,55000],['Комплексный SMM / мес',70000,110000]]},
      {l:'Дополнительно',t:'multi',o:[['Колл-трекинг',10000,15000],['Связка с CRM',25000,40000],['Сквозная аналитика',40000,70000],['Настройка Метрики и целей',15000,25000],['Антифрод-защита',10000,15000],['Медийная реклама в РСЯ',30000,50000],['Таргет в соцсетях',25000,45000],['Контент-план и посты',30000,50000]]}
    ],presets:[
      {name:'Тест ниши',sel:{0:1,1:0,2:0,3:0,4:0,5:[]}},
      {name:'Запуск с аналитикой',sel:{0:2,1:1,2:1,3:1,4:0,5:[0,1,3]}},
      {name:'Комплексный маркетинг',sel:{0:3,1:2,2:2,3:2,4:2,5:[1,2,6,7]}}
    ]},
    design:{name:'Дизайн',base:[0,0],rows:[
      {l:'Логотип',t:'radio',o:[['Не нужен',0,0],['Логотип',40000,70000],['Логотип со знаком',70000,120000]]},
      {l:'Фирменный стиль',t:'radio',o:[['Не нужен',0,0],['Базовый',50000,90000],['Расширенный',90000,150000]]},
      {l:'Брендбук',t:'radio',o:[['Не нужен',0,0],['Нужен',130000,220000]]},
      {l:'Носители',t:'multi',o:[['Визитки и бланки',15000,25000],['Дизайн соцсетей',25000,40000],['Упаковка / этикетка',35000,60000],['Презентация-шаблон',30000,50000],['Гайдлайн',40000,70000]]},
      {l:'Дополнительно',t:'multi',o:[['Анимация логотипа',20000,35000],['Дизайнерское письмо',15000,25000],['Нейро-визуалы',25000,40000]]}
    ],presets:[
      {name:'Только логотип',sel:{0:1,1:0,2:0,3:[],4:[]}},
      {name:'Фирменный стиль',sel:{0:1,1:1,2:0,3:[0,1],4:[]}},
      {name:'Полный брендинг',sel:{0:2,1:2,2:1,3:[0,1,4],4:[0]}}
    ]},
    photo:{name:'Фотосъёмка',base:[15000,25000],rows:[
      {l:'Тип съёмки',t:'radio',o:[['Предметная / продукт',0,0],['Команда и портреты',15000,25000],['Производство / интерьеры',25000,40000]]},
      {l:'Объём',t:'radio',o:[['Полдня, до 20 кадров',0,0],['День, до 60 кадров',35000,55000],['Две смены',85000,130000]]},
      {l:'Обработка',t:'radio',o:[['Базовая',0,0],['Углублённая ретушь',15000,25000]]},
      {l:'Трансфер и логистика',t:'radio',o:[['Не нужен',0,0],['По Москве',8000,12000],['Выезд в регион',30000,60000]]},
      {l:'Дополнительно',t:'multi',o:[['Модель / актёр',20000,35000],['Предметная 3D-съёмка',30000,50000],['Аренда студии',12000,20000],['Визажист / стилист',15000,25000]]}
    ],presets:[
      {name:'Продукт для маркетплейса',sel:{0:0,1:1,2:1,3:0,4:[1]}},
      {name:'Съёмка компании',sel:{0:1,1:1,2:0,3:1,4:[3]}}
    ]},
    extra:{name:'Доп. услуги',base:[0,0],checklist:1,rows:[
      {l:'Отметьте нужное',t:'multi',o:[
        ['Копирайтинг и тексты для сайта',20000,35000],['Дизайнерское письмо (email-шаблон)',15000,25000],
        ['Нейро-контент (AI-визуалы, аватары)',25000,40000],['Настройка CRM',30000,50000],
        ['SEO-базовая оптимизация',40000,70000],['Съёмка reels / shorts',50000,80000],
        ['Озвучка диктором',10000,15000],['Субтитры и перевод',5000,10000],
        ['Анимация логотипа',20000,35000],['Хостинг, домен и техподдержка (год)',25000,40000]
      ]}
    ]}
  };
  var order=['video','site','pres','market','design','photo','extra'];
  var state={};
  order.forEach(function(k){state[k]={};DATA[k].rows.forEach(function(r,ri){state[k][ri]=(r.t==='radio'?0:{});});});
  var current='video';
  var tabsEl=document.getElementById('kTabs'),panelEl=document.getElementById('kPanel'),totalEl=document.getElementById('kTotal');
  function fmt(n){return n.toLocaleString('ru-RU');}

  function calcFor(k,st){
    var d=DATA[k],mn=d.base[0],mx=d.base[1];
    d.rows.forEach(function(r,ri){
      if(r.t==='radio'){var o=r.o[st[ri]];mn+=o[1];mx+=o[2];}
      else{Object.keys(st[ri]).forEach(function(oi){if(st[ri][oi]){mn+=r.o[+oi][1];mx+=r.o[+oi][2];}});}
    });
    return [mn,mx];
  }
  function stateFromPreset(k,sel){
    var st={};
    DATA[k].rows.forEach(function(r,ri){
      if(r.t==='radio'){st[ri]=(sel[ri]!==undefined?sel[ri]:0);}
      else{st[ri]={};(sel[ri]||[]).forEach(function(oi){st[ri][oi]=true;});}
    });
    return st;
  }
  // состав пакета мелким текстом
  function includedText(k,sel){
    var d=DATA[k],st=stateFromPreset(k,sel),parts=[];
    d.rows.forEach(function(r,ri){
      if(r.t==='radio'){var oi=st[ri],o=r.o[oi];if(!(oi===0&&/^Не /.test(o[0])))parts.push(o[0]);}
      else{Object.keys(st[ri]).forEach(function(oi){if(st[ri][oi])parts.push(r.o[+oi][0]);});}
    });
    return parts.join(' · ');
  }

  order.forEach(function(k){
    var b=document.createElement('button');
    b.className='kcalc__tab'+(k===current?' is-active':'');
    b.textContent=DATA[k].name;b.onclick=function(){switchTab(k);};
    tabsEl.appendChild(b);
  });

  order.forEach(function(k){
    var d=DATA[k],v=document.createElement('div');
    v.className='kcalc__view'+(k===current?' is-active':'');v.dataset.k=k;
    var html='';
    // конструктор (строки)
    d.rows.forEach(function(r,ri){
      if(k==='extra'){
        html+='<div class="kcheck">';
        r.o.forEach(function(o,oi){html+='<div class="kchk" data-r="'+ri+'" data-o="'+oi+'"><div class="kchk__box"></div><div class="kchk__n">'+o[0]+'</div><div class="kchk__p">от '+fmt(o[1])+' ₽</div></div>';});
        html+='</div>';
      } else {
        html+='<div class="krow"><div class="krow__label">'+r.l+(r.t==='multi'?' <i>(можно несколько)</i>':'')+'</div><div class="kopts">';
        r.o.forEach(function(o,oi){
          var on=r.t==='radio'?(state[k][ri]===oi):!!state[k][ri][oi];
          var plus=o[1]>0?' <b>+'+fmt(o[1])+' ₽</b>':'';
          html+='<button class="kopt'+(on?' is-on':'')+'" data-r="'+ri+'" data-o="'+oi+'" data-t="'+r.t+'">'+o[0]+plus+'</button>';
        });
        html+='</div></div>';
      }
    });
    // готовые пакеты внизу
    if(d.presets&&d.presets.length){
      html+='<div class="kpacks"><div class="kpacks__lbl">Готовые пакеты</div><div class="kpacks__hint">Нажмите - заполнит конструктор выше, дальше можно докрутить под себя.</div><div class="kpacks__grid">';
      d.presets.forEach(function(p,pi){
        var pr=calcFor(k,stateFromPreset(k,p.sel));
        html+='<button class="kpack" data-preset="'+pi+'">'+
              '<div class="kpack__name">'+p.name+'</div>'+
              '<div class="kpack__price">от '+fmt(pr[0])+' <small>₽'+(d.mo?' / мес':'')+'</small></div>'+
              '<div class="kpack__inc"><b>Включено</b>'+includedText(k,p.sel)+'</div>'+
              '<div class="kpack__pick">Выбрать пакет →</div></button>';
      });
      html+='</div></div>';
    }
    v.innerHTML=html;panelEl.appendChild(v);

    v.querySelectorAll('.kpack').forEach(function(el){
      el.onclick=function(){var p=d.presets[+el.dataset.preset];state[k]=stateFromPreset(k,p.sel);rerender(k);recalc();
        panelEl.querySelector('.kcalc__view[data-k="'+k+'"]').scrollIntoView({behavior:'smooth',block:'start'});};
    });
    bindView(v,k);
  });

  function bindView(v,k){
    v.querySelectorAll('.kopt').forEach(function(el){
      el.onclick=function(){
        var ri=+el.dataset.r,oi=+el.dataset.o,t=el.dataset.t;
        if(t==='radio'){state[k][ri]=oi;v.querySelectorAll('.kopt[data-r="'+ri+'"]').forEach(function(x){x.classList.remove('is-on');});el.classList.add('is-on');}
        else{state[k][ri][oi]=!state[k][ri][oi];el.classList.toggle('is-on',state[k][ri][oi]);}
        recalc();
      };
    });
    v.querySelectorAll('.kchk').forEach(function(el){
      el.onclick=function(){var ri=+el.dataset.r,oi=+el.dataset.o;state[k][ri][oi]=!state[k][ri][oi];el.classList.toggle('is-on',state[k][ri][oi]);recalc();};
    });
  }
  function rerender(k){
    var v=panelEl.querySelector('.kcalc__view[data-k="'+k+'"]');
    v.querySelectorAll('.kopt').forEach(function(el){var ri=+el.dataset.r,oi=+el.dataset.o,t=el.dataset.t;el.classList.toggle('is-on',t==='radio'?(state[k][ri]===oi):!!state[k][ri][oi]);});
    v.querySelectorAll('.kchk').forEach(function(el){var ri=+el.dataset.r,oi=+el.dataset.o;el.classList.toggle('is-on',!!state[k][ri][oi]);});
  }
  function switchTab(k){
    current=k;
    tabsEl.querySelectorAll('.kcalc__tab').forEach(function(b,i){b.classList.toggle('is-active',order[i]===k);});
    panelEl.querySelectorAll('.kcalc__view').forEach(function(v){v.classList.toggle('is-active',v.dataset.k===k);});
    recalc();
  }
  function recalc(){
    var d=DATA[current],r=calcFor(current,state[current]);
    if(r[0]===0&&r[1]===0){totalEl.innerHTML='<span style="color:var(--faint);font-size:20px">выберите параметры</span>';return;}
    totalEl.innerHTML='от '+fmt(r[0])+' до '+fmt(r[1])+' <small>₽'+(d.mo?' / мес':'')+'</small>';
  }
  var lead=document.getElementById('kLead');
  document.getElementById('kCta').onclick=function(){lead.classList.add('is-open');lead.scrollIntoView({behavior:'smooth',block:'nearest'});};
  document.getElementById('kSend').onclick=function(){
    var name=document.getElementById('kName').value.trim(),contact=document.getElementById('kContact').value.trim();
    if(!name||!contact){alert('Заполните имя и контакт');return;}
    var d=DATA[current],s=state[current],lines=['Заявка с калькулятора KORS','Направление: '+d.name];
    d.rows.forEach(function(r,ri){
      if(r.t==='radio'){var oi=s[ri];if(r.o[oi][1]>0||ri===0)lines.push(r.l+': '+r.o[oi][0]);}
      else{var pk=[];Object.keys(s[ri]).forEach(function(oi){if(s[ri][oi])pk.push(r.o[+oi][0]);});if(pk.length)lines.push(r.l+': '+pk.join(', '));}
    });
    lines.push('Ориентир: '+totalEl.textContent.replace(/\s+/g,' ').trim());
    lines.push('','Имя: '+name,'Контакт: '+contact);
    var body=encodeURIComponent(lines.join('\n')),subj=encodeURIComponent('Заявка с калькулятора - '+d.name);
    window.location.href='mailto:info@korsprod.ru?subject='+subj+'&body='+body;
  };
  recalc();
})();
</script>
</body>
</html>
<script>
/* KORS_CTA_POPUP_OVERRIDE */
(function(){
  function openPopup(){
    var a=document.createElement('a');
    a.href='#popup:zayavka';
    a.style.display='none';
    document.body.appendChild(a);
    a.click();
    setTimeout(function(){ a.parentNode&&a.parentNode.removeChild(a); },50);
  }
  function bind(){
    var b=document.getElementById('kCta');
    if(!b){ setTimeout(bind,300); return; }
    b.addEventListener('click',function(e){ e.preventDefault(); e.stopPropagation(); openPopup(); }, true);
  }
  if(document.readyState==='loading'){document.addEventListener('DOMContentLoaded',bind);}else{bind();}
})();
</script>

rec3188192801 — сквозной подвал, триггеры попапа аудита (14255 симв.)

<!-- ===== KORS · ПОПАП «РАЗБОР МАТЕРИАЛОВ» · оформление + триггеры (попап rec3187170901) ===== -->
<a href="#popup:razbor" class="krz-open" aria-hidden="true" tabindex="-1" style="display:none!important"></a>

<style>
/* ---------- контейнер и сетка: одна колонка по умолчанию, две на широком экране ---------- */
#rec3187170901 .t-popup__container{max-width:900px!important;width:calc(100% - 40px)!important;background:#111114!important;border:1px solid #2A2A2E!important;border-radius:20px!important;padding:44px 44px 38px!important;}
#rec3187170901 .t702__wrapper{display:grid!important;grid-template-columns:1fr;grid-template-rows:auto auto auto;row-gap:20px;align-items:start;}
#rec3187170901 .t702__text-wrapper{grid-column:1;grid-row:1;text-align:left!important;}
#rec3187170901 .t-form{grid-column:1;grid-row:2;}
#rec3187170901 .t702__form-bottom-text{grid-column:1;grid-row:3;text-align:left!important;margin:0!important;}
/* две колонки, когда есть место: текст слева, форма справа */
@media screen and (min-width:861px){
#rec3187170901 .t702__wrapper{grid-template-columns:.92fr 1.08fr;grid-template-rows:auto auto;column-gap:44px;row-gap:14px;}
#rec3187170901 .t702__text-wrapper{grid-column:1;grid-row:1 / span 2;align-self:center;}
#rec3187170901 .t-form{grid-column:2;grid-row:1;}
#rec3187170901 .t702__form-bottom-text{grid-column:2;grid-row:2;}
}

/* ---------- заголовок (надзаголовок убран: заголовок сам про бесплатный аудит) ---------- */
#rec3187170901 .t702__title{font-family:'Unbounded',sans-serif!important;font-weight:700!important;font-size:clamp(20px,1.7vw,27px)!important;line-height:1.26!important;color:#F5F3EF!important;margin:0 0 10px!important;}
#rec3187170901 .t702__title:before{content:none!important;display:none!important;}

/* ---------- одна строка под заголовком ---------- */
#rec3187170901 .t702__descr{font-family:'Manrope',Arial,sans-serif!important;font-size:15px!important;line-height:1.6!important;color:#9A9A9A!important;margin:0!important;}
#rec3187170901 .t702__descr p{margin:0;}
#rec3187170901 .t702__descr b,#rec3187170901 .t702__descr strong{color:#F5F3EF;font-weight:600;}

/* ---------- форма ---------- */
#rec3187170901 .t-form__inputsbox{margin:0!important;}
#rec3187170901 .t-input-group{margin-bottom:14px!important;padding:0!important;}
#rec3187170901 .t-input-title{font-family:'Manrope',Arial,sans-serif!important;font-size:13px!important;font-weight:500!important;color:#9A9A9A!important;margin-bottom:7px!important;text-align:left!important;}
#rec3187170901 .t-input{background:#17171A!important;border:1px solid #2A2A2E!important;border-radius:10px!important;color:#F5F3EF!important;font-family:'Manrope',Arial,sans-serif!important;font-size:15px!important;height:50px!important;padding:0 16px!important;box-shadow:none!important;}
#rec3187170901 textarea.t-input{height:auto!important;min-height:94px!important;padding:14px 16px!important;resize:vertical;}
#rec3187170901 .t-input:focus{border-color:#6D5DFB!important;outline:none!important;}
#rec3187170901 .t-input::placeholder{color:#66645F!important;}
#rec3187170901 .t-submit{background:#6D5DFB!important;color:#fff!important;border:none!important;border-radius:10px!important;height:54px!important;width:100%!important;font-family:'Manrope',Arial,sans-serif!important;font-size:16px!important;font-weight:600!important;transition:background .2s;}
#rec3187170901 .t-submit:hover{background:#8A7BFF!important;}
#rec3187170901 .t702__form-bottom-text{font-family:'Manrope',Arial,sans-serif!important;font-size:12px!important;line-height:1.6!important;color:#66645F!important;}
#rec3187170901 .t702__form-bottom-text a{color:#9A8CFF!important;}
#rec3187170901 .t-popup__close-wrapper rect{fill:#F5F3EF!important;}

/* ---------- попап на мобильном ---------- */
@media screen and (max-width:640px){
#rec3187170901 .t-popup__container{padding:52px 18px 26px!important;border-radius:16px!important;width:calc(100% - 20px)!important;}
#rec3187170901 .t702__wrapper{row-gap:18px;}
#rec3187170901 .t702__title{font-size:21px!important;margin:0 0 8px!important;padding-top:2px!important;}
#rec3187170901 .t702__descr{font-size:14px!important;line-height:1.55!important;}
}

/* ---------- COOKIE-БАННЕР: сдвиг от виджета мессенджеров на мобильном ---------- */
@media screen and (max-width:640px){
  html body #rec3177014801 .t972:not(.t972_widgetview){left:12px!important;right:12px!important;width:auto!important;bottom:84px!important;border-radius:16px!important;max-height:calc(100vh - 96px)!important;overflow-y:auto!important;}
  html body #rec3177014801 .t972__settings{height:auto!important;max-height:calc(100vh - 96px)!important;}
  html body #rec3177014801 .t972__settings-body{height:auto!important;flex:0 1 auto!important;}
}

/* ---------- COOKIE-БАННЕР: ссылка на политику в акцентном цвете ---------- */
html body #rec3177014801 .t972__text a{color:#6D5DFB!important;text-decoration:underline!important;text-underline-offset:2px!important;}
html body #rec3177014801 .t972__text a:hover{opacity:.8!important;}

/* ---------- COOKIE-БАННЕР: кнопка "Сохранить настройки" на всю ширину на мобильном ---------- */
@media screen and (max-width:640px){
  html body #rec3177014801 .t972__settings-footer{width:100%!important;}
  html body #rec3177014801 .t972__confirm-btn{width:100%!important;max-width:100%!important;display:block!important;}
  html body #rec3177014801 .t972__confirm-btn .t-btnflex__text{width:100%!important;}
}
/* ---------- COOKIE-БАННЕР: компактный вид (CSS-переопределение, настройки блока T972 не тронуты) ---------- */
/* ширина панели только на десктопе, чтобы не спорить с мобильным правилом выше */
@media screen and (min-width:641px){
  html body #rec3177014801 .t972:not(.t972_widgetview){width:420px!important;max-width:calc(100vw - 40px)!important;}
}
/* сама панель: полупрозрачный тёмный фон с размытием, тонкая светлая рамка, радиус 12px */
html body #rec3177014801 .t972__banner{background:rgba(14,14,17,.82)!important;-webkit-backdrop-filter:blur(14px) saturate(120%)!important;backdrop-filter:blur(14px) saturate(120%)!important;border:1px solid rgba(245,243,239,.12)!important;border-radius:12px!important;padding:14px 16px 14px!important;box-shadow:0 16px 40px rgba(0,0,0,.45)!important;}
/* заголовок в свёрнутом виде скрыт, в окне «Настроить» он остаётся */
html body #rec3177014801 .t972__banner .t972__title{display:none!important;}
/* короткий текст */
html body #rec3177014801 .t972__banner .t972__text{font-size:12px!important;line-height:1.5!important;margin:0 0 12px!important;color:#C9C7C2!important;}
/* компактные кнопки */
html body #rec3177014801 .t972__banner .t972__buttons{margin:0!important;}
html body #rec3177014801 .t972__banner .t972__buttons-wrap{gap:8px!important;}
html body #rec3177014801 .t972__banner .t-btnflex{font-size:11px!important;line-height:1.1!important;height:auto!important;min-height:0!important;padding:9px 13px!important;border-radius:7px!important;}
html body #rec3177014801 .t972__banner .t-btnflex .t-btnflex__text{font-size:11px!important;line-height:1.1!important;}
html body #rec3177014801 .t972__banner .t972__settings-btn{font-size:11px!important;}
html body #rec3177014801 .t972__banner .t972__settings-btn .t-btntext__text{font-size:11px!important;}
/* полный текст, перенесённый в окно «Настроить» */
html body #rec3177014801 .t972__settings .kors-c-full{margin-top:10px;}
html body #rec3177014801 .t972__settings a{color:#6D5DFB!important;text-decoration:underline!important;text-underline-offset:2px!important;}
/* «Настроить» выравниваем по левому краю кнопок */
html body #rec3177014801 .t972__banner .t972__settings-btn{margin-left:0!important;}
/* окно «Настроить» в том же стиле, что компактная панель */
html body #rec3177014801 .t972__settings{background:rgba(14,14,17,.9)!important;-webkit-backdrop-filter:blur(14px) saturate(120%)!important;backdrop-filter:blur(14px) saturate(120%)!important;border:1px solid rgba(245,243,239,.12)!important;border-radius:12px!important;}

/* ---------- ЮРИДИЧЕСКИЕ СТРАНИЦЫ (.kdoc на /policy и /user-agreement): контент во всю ширину на мобильном, без горизонтального выезда ---------- */
@media screen and (max-width:640px){
  html body .kdoc{width:100%!important;max-width:100%!important;box-sizing:border-box!important;padding-left:16px!important;padding-right:16px!important;margin-left:0!important;margin-right:0!important;}
  html body .kdoc,html body .kdoc *{overflow-wrap:anywhere!important;word-break:break-word!important;}
  html body .kdoc img,html body .kdoc pre{max-width:100%!important;height:auto!important;}
  html body .kdoc table{display:block!important;width:100%!important;max-width:100%!important;overflow-x:auto!important;}
}
/* прелоадер строго по центру экрана */
html body .kload{left:0!important;right:0!important;width:100%!important;max-width:100%!important;}
</style>

<script>
(function(){
  var REC = "3187170901";           /* блок попапа BF502N */
  var COOKIE_REC = "3177014801";    /* блок cookie-баннера T972 */
  var SKEY = "kors_razbor_shown";   /* показан в этой сессии */
  var LKEY = "kors_lead_sent";      /* заявка уже отправлена */
  var done = false, pending = false;

  function ss(k, v){ try{ if(v === undefined) return sessionStorage.getItem(k); sessionStorage.setItem(k, v); }catch(e){} return null; }
  function ls(k, v){ try{ if(v === undefined) return localStorage.getItem(k); localStorage.setItem(k, v); }catch(e){} return null; }

  var isMobile = (window.innerWidth <= 640) || /Android|iPhone|iPad|iPod|Mobi/i.test(navigator.userAgent);
  var path = location.pathname.replace(/\/+$/, "");
  var isThanks = (path === "/spasibo" || path === "/thanks");
  /* юридические страницы: попап не показываем, LKEY при этом не ставим */
  var isLegal = (path === "/policy" || path === "/user-agreement");
  if(isThanks) ls(LKEY, "1");

  /* запоминаем, что посетитель уже отправил заявку */
  document.addEventListener("submit", function(e){
    var t = e.target;
    if(t && t.classList && t.classList.contains("t-form")) ls(LKEY, "1");
  }, true);

  /* виден ли cookie-баннер */
  function bannerVisible(){
    if(document.cookie.indexOf("t_cookiesConsentGiven") === -1) return true;
    var rec = document.getElementById("rec" + COOKIE_REC);
    if(!rec) return false;
    var box = rec.querySelector(".t972") || rec;
    var cs = window.getComputedStyle(box);
    if(cs.display === "none" || cs.visibility === "hidden") return false;
    return box.getBoundingClientRect().height > 0;
  }
  /* открыт ли другой попап или посетитель уже в форме */
  function somethingOpen(){
    if(document.body.classList.contains("t-body_popupshowed")) return true;
    if(document.querySelector(".t-popup.t-popup_show")) return true;
    var a = document.activeElement;
    if(a && a.classList && a.classList.contains("t-input")) return true;
    return false;
  }
  function allowed(){
    if(done || isThanks || isLegal) return false;
    if(ls(LKEY) === "1") return false;
    if(ss(SKEY) === "1") return false;
    if(bannerVisible()) return false;
    if(somethingOpen()) return false;
    return true;
  }
  function show(){
    if(!allowed()) return;
    done = true;
    ss(SKEY, "1");
    var a = document.querySelector("a.krz-open");
    if(a){ a.click(); }
    else if(typeof window.t702_showPopup === "function"){ window.t702_showPopup(REC); }
    cleanup();
  }
  function request(){ pending = true; show(); }

  /* 1) время на странице: 45 сек, на мобильном 60 сек */
  var timer = setTimeout(request, isMobile ? 60000 : 45000);

  /* 2) прокрутка 45% */
  function onScroll(){
    var doc = document.documentElement;
    var h = (doc.scrollHeight || 0) - window.innerHeight;
    if(h <= 0) return;
    var y = window.pageYOffset || doc.scrollTop || 0;
    if((y / h) >= 0.45) request();
  }
  window.addEventListener("scroll", onScroll, {passive:true});

  /* 3) exit-intent, только десктоп */
  function onOut(e){
    if(isMobile) return;
    if(e.clientY <= 0 && !e.relatedTarget && !e.toElement) request();
  }
  if(!isMobile) document.addEventListener("mouseout", onOut, false);

  /* если триггер сработал, но был виден cookie-баннер, пробуем снова */
  var retry = setInterval(function(){ if(pending) show(); }, 1500);

  function cleanup(){
    clearTimeout(timer);
    clearInterval(retry);
    window.removeEventListener("scroll", onScroll);
    document.removeEventListener("mouseout", onOut, false);
  }
})();
</script>

<!-- ===== KORS · COOKIE-БАННЕР: компактный текст в свёрнутом виде, полный текст переносим в окно «Настроить» ===== -->
<script>
(function(){
  var REC = "3177014801";
  var SHORT = "Мы используем cookie для работы сайта и аналитики. ";
  var LINKTEXT = "Политика";
  var tries = 0;

  function compact(){
    var root = document.getElementById("rec" + REC);
    if(!root){ return false; }
    var banner = root.querySelector(".t972__banner");
    if(!banner){ return false; }
    var textEl = banner.querySelector(".t972__text");
    if(!textEl){ return false; }
    if(textEl.getAttribute("data-kors-compact") === "1"){ return true; }

    var link = textEl.querySelector("a");
    var href = link ? (link.getAttribute("href") || "/policy") : "/policy";

    /* полный текст остаётся в окне «Настроить» */
    var box = root.querySelector(".t972__settings .t972__settings-text");
    if(box && !box.querySelector(".kors-c-full")){
      var full = document.createElement("div");
      full.className = "kors-c-full";
      full.innerHTML = textEl.innerHTML;
      box.appendChild(full);
    }

    /* короткий текст в свёрнутом баннере */
    textEl.textContent = SHORT;
    var a = document.createElement("a");
    a.setAttribute("href", href);
    a.textContent = LINKTEXT;
    textEl.appendChild(a);
    textEl.setAttribute("data-kors-compact", "1");

    /* «Принять все» -> «Принять» */
    var acc = banner.querySelector(".t972__accept-btn .t-btnflex__text");
    if(acc){ acc.textContent = "Принять"; }
    return true;
  }

  function tick(){
    var ok = false;
    try{ ok = compact(); }catch(e){}
    tries++;
    if(!ok && tries < 60){ setTimeout(tick, 250); }
  }
  if(document.readyState === "loading"){ document.addEventListener("DOMContentLoaded", tick); } else { tick(); }
})();
</script>

rec2663623901 — главная, НАШИ РАБОТЫ · десктоп (23257 симв.)

<!-- ===== KORS · НАШИ РАБОТЫ · ДЕСКТОП · блок T123. Показывать ТОЛЬКО на компьютере. ===== -->
<div class="kgald">
  <div class="kgald__head">
    <div class="kgald__eyebrow">- НАШИ РАБОТЫ</div>
    <h2 class="kgald__title">460+ проектов: найдите свою отрасль.</h2>
    <div class="kgald__sub">Сфера, формат и срок по каждому проекту. Нажми «Смотреть полное видео» - откроется на весь экран.</div>
  </div>
  <div class="kgald__filter" id="kgaldFilter" aria-label="Фильтр работ по услугам">
      <button type="button" class="kgald__fbtn is-active" data-f="all">Все</button>
      <button type="button" class="kgald__fbtn" data-f="video">Видео</button>
      <button type="button" class="kgald__fbtn" data-f="site">Сайты</button>
      <button type="button" class="kgald__fbtn" data-f="presentation">Презентации</button>
      <button type="button" class="kgald__fbtn" data-f="brand">Фирменный стиль</button>
      <button type="button" class="kgald__fbtn" data-f="ads">Реклама</button>
    </div>
    <div class="kgald__grid" id="kgaldTop"></div>
  <div class="kgald__hidden" id="kgaldHidden"><div class="kgald__grid" id="kgaldRest"></div></div>
  <div class="kgald__empty" id="kgaldEmpty">По этой услуге в подборке пока нет проектов.</div>
    <div class="kgald__morewrap"><button class="kgald__more" id="kgaldMore"><span class="kgald__mtext">Смотреть все работы</span> <span class="kgald__count">+9</span></button></div>
    <div class="kgald__group" id="kgaldExpWrap">
    <div class="kgald__ghead">
      <div class="kgald__eyebrow">- ГОВОРИМ О ВИДЕО</div>
      <h3 class="kgald__gtitle">Экспертные ролики студии</h3>
      <div class="kgald__gsub">Наш собственный контент, не клиентские заказы: как устроен продакшен, из чего складывается цена и что делает видео рабочим инструментом.</div>
    </div>
    <div class="kgald__grid" id="kgaldExp"></div>
  </div>
  <div class="kgald__lb" id="kgaldLb"><div class="kgald__lbbd"></div><div class="kgald__lbbox"><button class="kgald__lbx" id="kgaldLbx">×</button><div class="kgald__lbframe"><iframe id="kgaldLbIframe" allow="autoplay; fullscreen; encrypted-media; picture-in-picture" allowfullscreen></iframe></div></div></div>
</div>
<style>
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Unbounded:wght@400;600;700;800&display=swap');
.kgald{--bg:#0C0C0E;--raise:#141416;--card:#1B1B1F;--border:#2A2A2E;--text:#F5F3EF;--muted:#9A9A9A;--faint:#6a6a6e;--accent:#6D5DFB;--glow:rgba(109,93,251,.14);
  box-sizing:border-box;background:var(--bg);color:var(--text);font-family:'Manrope',Arial,sans-serif;-webkit-font-smoothing:antialiased;padding:80px 5vw 90px;}
.kgald *{box-sizing:border-box;margin:0;padding:0;}
.kgald__head{max-width:1240px;margin:0 auto 44px;text-align:center;}
.kgald__eyebrow{font-family:'Unbounded';font-size:12px;letter-spacing:.14em;color:var(--accent);margin-bottom:14px;}
.kgald__title{font-family:'Unbounded';font-weight:700;font-size:clamp(30px,3.4vw,48px);letter-spacing:-.02em;margin-bottom:14px;}
.kgald__sub{color:var(--muted);font-size:16px;line-height:1.5;max-width:560px;margin:0 auto;}
.kgald__grid{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.kgald__card{background:var(--raise);border:1px solid var(--border);border-radius:16px;overflow:hidden;transition:.25s;display:flex;flex-direction:column;}
.kgald__card:hover{border-color:rgba(109,93,251,.5);transform:translateY(-3px);box-shadow:0 16px 40px rgba(0,0,0,.4);}
.kgald__video{position:relative;width:100%;aspect-ratio:16/9;background:#000;}
.kgald__video iframe{position:absolute;inset:0;width:100%;height:100%;border:none;pointer-events:none;}
.kgald__body{padding:20px 20px 22px;display:flex;flex-direction:column;flex:1;}
.kgald__name{font-family:'Unbounded';font-weight:700;font-size:20px;margin-bottom:10px;letter-spacing:-.01em;}
.kgald__meta{display:flex;flex-direction:column;gap:6px;margin-bottom:18px;}
.kgald__row{font-size:14px;color:var(--muted);line-height:1.4;}
.kgald__row b{color:var(--text);font-weight:600;}
.kgald__full--nolink{cursor:default}
.kgald__full{margin-top:auto;display:inline-flex;align-items:center;gap:8px;align-self:flex-start;background:transparent;border:1px solid var(--border);color:var(--text);font-family:'Manrope';font-weight:700;font-size:14px;padding:12px 18px;border-radius:9px;cursor:pointer;transition:.2s;}
.kgald__full:hover{border-color:var(--accent);color:var(--accent);}
.kgald__full svg{width:15px;height:15px;flex:none;}
.kgald__hidden{max-width:1240px;margin:0 auto;max-height:0;overflow:hidden;opacity:0;transition:max-height .55s ease,opacity .4s ease,margin-top .4s ease;margin-top:0;}
.kgald__hidden.open{opacity:1;margin-top:22px;}
.kgald__morewrap{text-align:center;margin-top:40px;}
.kgald__more{display:inline-flex;align-items:center;gap:10px;background:var(--accent);color:#fff;font-family:'Manrope';font-weight:700;font-size:15px;padding:16px 30px;border-radius:9px;border:none;cursor:pointer;transition:.25s;}
.kgald__more:hover{transform:translateY(-2px);box-shadow:0 10px 30px var(--glow);}
.kgald__count{font-family:'Unbounded';font-size:12px;background:rgba(0,0,0,.18);padding:3px 8px;border-radius:20px;}
.kgald__more.is-open .kgald__count{display:none;}
.kgald__lb{position:fixed;inset:0;z-index:99999;display:none;align-items:center;justify-content:center;padding:40px;}
.kgald__lb.open{display:flex;}
.kgald__lbbd{position:absolute;inset:0;background:rgba(4,4,6,.9);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);}
.kgald__lbbox{position:relative;width:min(1100px,100%);}
.kgald__lbframe{position:relative;width:100%;aspect-ratio:16/9;background:#000;border-radius:12px;overflow:hidden;border:1px solid var(--border);}
.kgald__lbframe iframe{position:absolute;inset:0;width:100%;height:100%;border:none;}
.kgald__lbx{position:absolute;top:-46px;right:0;width:38px;height:38px;border-radius:9px;background:var(--raise);border:1px solid var(--border);color:var(--text);font-size:22px;line-height:1;cursor:pointer;}
.kgald__lbx:hover{border-color:var(--accent);color:var(--accent);}
.kgald__filter{max-width:1240px;margin:0 auto 26px;display:flex;flex-wrap:nowrap;gap:8px;justify-content:center;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;padding-bottom:2px;}
.kgald__filter::-webkit-scrollbar{display:none;}
.kgald__fbtn{flex:none;background:transparent;border:1px solid var(--border);color:var(--muted);font-family:'Manrope',Arial,sans-serif;font-weight:600;font-size:13px;padding:9px 16px;border-radius:20px;cursor:pointer;transition:.2s;white-space:nowrap;}
.kgald__fbtn:hover{border-color:rgba(109,93,251,.5);color:var(--text);}
.kgald__fbtn.is-active{background:var(--accent);border-color:var(--accent);color:#fff;}
.kgald__tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px;}
.kgald__tag{font-family:'Manrope',Arial,sans-serif;font-weight:600;font-size:9px;line-height:1;text-transform:uppercase;letter-spacing:.14em;color:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.22);border-radius:4px;padding:5px 8px;white-space:nowrap;}
.kgald__desc{font-size:12px;line-height:1.5;color:var(--muted);margin-bottom:14px;}
.kgald__card.is-off{opacity:0;transform:translateY(6px);}
.kgald__empty{max-width:1240px;margin:0 auto;text-align:center;color:var(--muted);font-size:15px;padding:34px 0;display:none;}
.kgald__empty.on{display:block;}
@media (max-width:900px){ .kgald__grid{grid-template-columns:repeat(2,1fr);} .kgald__filter{justify-content:flex-start;} }
@media (max-width:480px){ .kgald{display:none;} }
#rec2663623901 .kgald__count{color:#fff;background:rgba(0,0,0,.32);}
/* KORS: экспертные ролики вынесены в отдельную группу со своим заголовком, поэтому плашка на карточке больше не нужна. */
.kgald__group{margin-top:88px;}
.kgald__ghead{max-width:1240px;margin:0 auto 34px;text-align:center;}
.kgald__gtitle{font-family:'Unbounded';font-weight:700;font-size:clamp(24px,2.4vw,34px);letter-spacing:-.02em;margin-bottom:12px;}
.kgald__gsub{color:var(--muted);font-size:15px;line-height:1.5;max-width:560px;margin:0 auto;}
</style>
<script>
(function(){
  var SLUG={'Видео':'video','Фотосъёмка':'photo','Сайт':'site','Презентация':'presentation','Фирменный стиль':'brand','Реклама':'ads','Дизайн':'design','Трансляция':'live','Продюсирование':'producing'};
  var works=[
    {id:'pd95FJSRFhF27W4YX4ioJJ', full:'3ZsxHkdEuHUubxSAQZDRyG', name:'Одоевские консервы - фильм о заводе', tags:['Видео','Фирменный стиль'], desc:'Показали производство изнутри: цеха, линии, контроль качества. Видео работает на сайте, в переговорах с сетями и на выставках.', alt:'Фильм о заводе Одоевские консервы: цеха, линии и контроль качества'},
    {id:'xgBCJrU3Fy9CtKDXR9R23S', full:'0GfobL6RnAzhPeiopXjNHS', name:'Invoicebox - о компании', sphere:'финансовые технологии (FinTech)', format:'презентационный ролик о компании', term:'6 дней', tags:['Видео','Реклама'], desc:'Имиджевый ролик о платёжном сервисе: чем занимается компания и какие задачи бизнеса закрывает.', alt:'Имиджевый ролик о платёжном сервисе Invoicebox'},
    {id:'iPcFsLF3eYfDYTauhcgjZj', full:'fv7FAnLfbLaDaNJLtSQ74H', name:'Вистекс', sphere:'производство, предприятие', format:'презентационный ролик', term:'15 дней', tags:['Видео','Дизайн'], desc:'Ролик о заводе: восемь направлений производства за три минуты. Дизайн email-письма со встроенным видео для коммерческих предложений.', alt:'Видео о производстве для завода Вистекс'},
    {id:'bZ8JyozhtKdSDiy5xjLoVr', full:'caSE37WujsGB6usgZewyUt', name:'Ресторан Rumi / «ЗНАТЬ»', sphere:'ресторанный бизнес, мероприятия', format:'видео-отчёт о мероприятии', term:'2 дня', tags:['Видео','Трансляция','Презентация'], desc:'Съёмка мероприятий, прямая трансляция и презентации для ресторана.', alt:'Съёмка мероприятия и трансляция для ресторана Rumi'},
    {id:'uiVqp8dWpzNoBt2GweBLs9', full:'vF4hbgW4Umo6U4dDNUFvwv', name:'Новая Формация', sphere:'организация, бизнес', format:'презентационный ролик', term:'4 дня', tags:['Видео','Дизайн'], desc:'Презентационный ролик, афиша и ведение контента.', alt:'Презентационный ролик для проекта Новая Формация'},
    {id:'gHMF2zBsAdSdbcEH9wSZKh', full:'kfd6wYQdCh72VpRPC74Mfs', name:'Редакция ЭКСМО', sphere:'издательский бизнес', format:'съёмка трейлера по сюжету книги', term:'9 дней', tags:['Видео','Дизайн'], desc:'Трейлер книги и афиша для издательства.', alt:'Книжный трейлер для издательства Редакция ЭКСМО'},
    {id:'sRSLqBbjkRWyn31BrY6iny', full:'mZiwnH9uZAdc15hhRsqPvB', name:'Одоевские консервы - термостабильные начинки', tags:['Видео'], desc:'Продуктовый ролик о линейке: как начинки ведут себя при выпечке и что это даёт производителю.', alt:'Продуктовый ролик о термостабильных начинках Одоевские консервы'},
    {id:'uqJ79iyVPcqN1ZtTtjnkAv', full:'gznTZhdFQeZEKZnidVaTbk', name:'GosObmen', sphere:'финансовые услуги', format:'рекламный ролик', term:'3 дня', tags:['Видео','Сайт','Дизайн'], desc:'Рекламные ролики, тексты и сайт. Собрали скрипт для отдела продаж.', alt:'Рекламный ролик и сайт для сервиса Гособмен'},
    {id:'35XkXms5VN3RLJcYsgWsnD', full:'2FXfjS6hYEvLkWNKUveoBx', name:'Invoicebox - оплата в белорусских рублях', tags:['Видео'], desc:'Объясняющий ролик о выходе платёжного сервиса на рынок Беларуси: как принимать оплату в белорусских рублях.', alt:'Ролик об оплате в белорусских рублях в платёжном сервисе Invoicebox'},
    {id:'5zMvPKfeuDf9N7h7P8KuVe', full:'ePXSSA9qFiEgA5WYRdd4FP', name:'Алтай Серикбай - съёмки для личного бренда', tags:['Видео'], desc:'Снимаем контент для эксперта по личностному развитию: студийные выпуски, разговорные форматы, съёмки на ретритах. За время работы - больше десяти роликов.', alt:'Съёмки для личного бренда эксперта по личностному развитию Алтая Серикбая'},
    {id:'bKeihzPbnEbXZarkMcYQZj', full:'6ivtiXKAcQj4dVJN8H1YWs', name:'MediaLive - отчётный ролик с выставки', tags:['Видео','Реклама'], desc:'Сняли отчётное видео с отраслевого события. Организаторы используют его на сайте и в рекламе следующего сезона.', alt:'Отчётный ролик с отраслевой выставки для MediaLive'},
    {id:'8QbWRspZgkLTicEiQpp9su', full:'8QbWRspZgkLTicEiQpp9su', name:'STROBBS - промо зимней коллекции', tags:['Видео','Реклама'], desc:'Проморолик показа новой зимней коллекции российского бренда обуви и одежды.', alt:'Проморолик показа зимней коллекции бренда обуви и одежды STROBBS'},
    {id:'88SCanh4aPU83UFBmThiVa', full:'mJqjXaKQBrdbvirxUTHLLh', name:'Rockstar - клип «На дне»', tags:['Видео'], desc:'Музыкальный клип для артиста.', alt:'Музыкальный клип На дне для артиста Rockstar'},
    {id:'wLtMKZCpf75eYEWMXPEPZY', full:'7Kxs8xzVfCDLtyuG5puNN1', name:'Рокстар', sphere:'медиа', format:'музыкальный клип', term:'12 дней', tags:['Видео','Дизайн'], desc:'Три клипа и обложки для музыкального проекта.', alt:'Музыкальные клипы для проекта Рокстар'},
    {id:'qAV5wXg5oHKKcY6tbgysZd', full:'okapERMYWfdoGagPRmo7uC', name:'Rockstar - клип «Самая грустная песня»', tags:['Видео'], desc:'Первый клип, который мы сняли для артиста.', alt:'Музыкальный клип Самая грустная песня для артиста Rockstar'},
    {id:'vNYi5w7HiQevkdBbPmQ3CR', full:'vNYi5w7HiQevkdBbPmQ3CR', name:'Ювелирный лофт GOLD - ролик о компании', tags:['Видео'], desc:'Рассказали о компании и о том, чем она занимается.', alt:'Ролик о компании для ювелирного лофта GOLD'},
    {id:'6JcPdvqUchXCmzscbTqaos', full:'sRyZwPm3BS9CVspVi2sLx3', name:'Одоевские консервы - нетермостабильные начинки', tags:['Видео'], desc:'Второй ролик линейки: назначение, состав, применение в готовых изделиях.', alt:'Продуктовый ролик о нетермостабильных начинках Одоевские консервы'},
    {id:'8YSeQnzXxmpkmo7uNNcLrF', full:'43yfJckoZggrVouaMMK4zt', name:'YouTube-шоу', sphere:'медиа', format:'съёмка выпусков', term:'14 дней', tags:['Видео','Продюсирование','Реклама'], desc:'Продюсирование и режиссура шоу: съёмка выпусков и рекламное сопровождение.', alt:'Съёмка выпусков YouTube-шоу'},
    {id:'7akHJzKdcoSrPiHtRbRBqk', full:'7akHJzKdcoSrPiHtRbRBqk', name:'Invoicebox - интернет-магазины за пару кликов', tags:['Видео'], desc:'Продуктовый ролик о конструкторе интернет-магазинов внутри сервиса.', alt:'Ролик о конструкторе интернет-магазинов в сервисе Invoicebox'},
    {id:'b66cpVCFFFVycfDvLFXFR3', full:'b66cpVCFFFVycfDvLFXFR3', name:'Invoicebox - как выставить счёт за пару кликов', tags:['Видео'], desc:'Видеоинструкция для пользователей сервиса: выставление счёта по шагам.', alt:'Видеоинструкция по выставлению счёта в сервисе Invoicebox'},
    {id:'eCGHEdUFdSyEjCBXxcsUSC', full:'geGWgessLoxkUKdQ4d4e1q', name:'Шоурил KORS Production', sphere:'создание контента', format:'актуальные работы', term:'2025-й год', tags:['Видео','Продюсирование'], desc:'Шоурил студии: съёмки на производствах и коммерческие проекты разных лет.', alt:'Актуальные работы студии KORS Production'},
    {id:'dsqVruz3QkCKQESGiTUsVR', full:'dsqVruz3QkCKQESGiTUsVR', name:'Твой продакшен тебя обманывает', tags:['Видео'], kors:true, alt:'Экспертное видео KORS: почему продакшен может обманывать заказчика'},
    {id:'uittTC7uyz9hv4HDirTBAG', full:'uittTC7uyz9hv4HDirTBAG', name:'Видео - это не украшение для бизнеса', tags:['Видео'], kors:true, alt:'Экспертное видео KORS о том, зачем бизнесу видео'},
    {id:'aG3Qkc4VfoCcgtJLz6ivbE', full:'aG3Qkc4VfoCcgtJLz6ivbE', name:'Как сэкономить на видеоролике', tags:['Видео'], kors:true, alt:'Экспертное видео KORS о том, как сэкономить на съёмке ролика'},
    {id:'4pzsMBSzheH3Sarx4UFHMd', full:'4pzsMBSzheH3Sarx4UFHMd', name:'Как сделать продающее видео', tags:['Видео'], kors:true, alt:'Экспертное видео KORS о том, как сделать продающее видео'},
    {id:'kkQyUoC94bPxEGxq9UmMzj', full:'kkQyUoC94bPxEGxq9UmMzj', name:'Как правильно писать нам правки', tags:['Видео'], kors:true, desc:'Как формулировать правки, чтобы их внесли быстро и с первого раза.', alt:'Экспертное видео KORS о том, как правильно присылать правки по проекту'},
    {id:'5r45VM9UQsJWhAAh8w9zQK', full:'5r45VM9UQsJWhAAh8w9zQK', name:'Как подготовиться до старта проекта', tags:['Видео'], kors:true, desc:'Что собрать и решить до старта, чтобы проект пошёл без задержек.', alt:'Экспертное видео KORS о подготовке к старту проекта'},
    {id:'5JNE6gLppoDPJxPXRiLFV8', full:'5JNE6gLppoDPJxPXRiLFV8', name:'Подготовка к съёмочному дню', tags:['Видео'], kors:true, desc:'Как подготовить площадку и людей, чтобы съёмочный день прошёл по плану.', alt:'Экспертное видео KORS о подготовке к съёмочному дню'}
  ];
  var FS='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="5 3 19 12 5 21 5 3"/></svg>';
  var lb=document.getElementById('kgaldLb'), lbf=document.getElementById('kgaldLbIframe');
  function openLb(id){ lbf.src='https://kinescope.io/embed/'+id+'?autoplay=true'; lb.classList.add('open'); }
  function closeLb(){ lb.classList.remove('open'); lbf.src=''; }
  document.getElementById('kgaldLbx').addEventListener('click',closeLb);
  lb.querySelector('.kgald__lbbd').addEventListener('click',closeLb);
  document.addEventListener('keydown',function(e){ if((e.key==='Escape'||e.keyCode===27)&&lb.classList.contains('open'))closeLb(); });
  function makeCard(w, defer){
    var card=document.createElement('div'); card.className='kgald__card';
    card.setAttribute('data-tags',(w.tags||[]).map(function(t){return SLUG[t]||'';}).join(' '));
    var ttl=(w.alt||w.name).replace(/"/g,'&quot;');
    var q='?autoplay=true&muted=true&loop=true&controls=false&playsInline=true&background=true';
    var ift= defer ? '<iframe data-src="https://kinescope.io/embed/'+w.id+q+'" title="'+ttl+'" aria-label="'+ttl+'" allow="autoplay; fullscreen; encrypted-media; picture-in-picture" allowfullscreen></iframe>'
                   : '<iframe loading="lazy" src="https://kinescope.io/embed/'+w.id+q+'" title="'+ttl+'" aria-label="'+ttl+'" allow="autoplay; fullscreen; encrypted-media; picture-in-picture" allowfullscreen></iframe>';
    var tagsHtml=(w.tags&&w.tags.length)?'<div class="kgald__tags">'+w.tags.map(function(t){return '<span class="kgald__tag">'+t+'</span>';}).join('')+'</div>':'';
    var descHtml=w.desc?'<p class="kgald__desc">'+w.desc+'</p>':'';
    var metaHtml='';
    if(w.sphere||w.format||w.term){ metaHtml='<div class="kgald__meta">'+(w.sphere?'<div class="kgald__row"><b>Сфера:</b> '+w.sphere+'</div>':'')+(w.format?'<div class="kgald__row"><b>Формат:</b> '+w.format+'</div>':'')+(w.term?'<div class="kgald__row"><b>Срок:</b> '+w.term+'</div>':'')+'</div>'; }
    card.innerHTML='<div class="kgald__video">'+ift+'</div><div class="kgald__body"><h3 class="kgald__name">'+w.name+'</h3>'+tagsHtml+descHtml+metaHtml+'<button class="kgald__full'+(w.full?'':' kgald__full--nolink')+'" '+(w.full?'':'aria-disabled="true"')+'>'+FS+'Смотреть полное видео</button></div>';
    if(w.full){ card.querySelector('.kgald__full').addEventListener('click',function(){ openLb(w.full); }); }
    return card;
  }
  var top=document.getElementById('kgaldTop'),rest=document.getElementById('kgaldRest'),box=document.getElementById('kgaldHidden'),more=document.getElementById('kgaldMore');
  var exp=document.getElementById('kgaldExp'), expwrap=document.getElementById('kgaldExpWrap');
  if(!top||!rest||!box||!more)return;
  /* KORS: превью грузятся не пачкой. Плеер получает src только когда карточка подходит к видимой области (запас 300px). Пока карточка спрятана под кнопкой (max-height:0) или скрыта фильтром (display:none), она не пересекается с экраном и ролик не стартует. */
  var io=('IntersectionObserver' in window)?new IntersectionObserver(function(es,ob){
    es.forEach(function(e){
      if(!e.isIntersecting) return;
      var f=e.target.querySelector('iframe[data-src]');
      if(f){ f.src=f.getAttribute('data-src'); f.removeAttribute('data-src'); }
      ob.unobserve(e.target);
    });
  },{root:null,rootMargin:'300px 0px',threshold:0.01}):null;
  function watch(c){
    if(io){ io.observe(c); return; }
    var f=c.querySelector('iframe[data-src]');
    if(f){ f.src=f.getAttribute('data-src'); f.removeAttribute('data-src'); }
  }
  function put(grid,w){ var c=makeCard(w,true); grid.appendChild(c); watch(c); }
  /* KORS: порог показа - 12 карточек, остальные под кнопкой. Экспертные ролики студии идут отдельной группой ниже, флаг kors в данных теперь отвечает за группировку. */
  var TOPN=12;
  var main=works.filter(function(w){return !w.kors;});
  var expert=works.filter(function(w){return !!w.kors;});
  main.slice(0,TOPN).forEach(function(w){put(top,w);});
  main.slice(TOPN).forEach(function(w){put(rest,w);});
  if(exp){ expert.forEach(function(w){put(exp,w);}); }
  var cntEl=more.querySelector('.kgald__count'); if(cntEl){ cntEl.textContent='+'+Math.max(0,main.length-TOPN); }
  var loaded=false, mt=more.querySelector('.kgald__mtext');
  more.addEventListener('click',function(){
    if(!box.classList.contains('open')){
      box.classList.add('open'); box.style.maxHeight=box.scrollHeight+'px';
      setTimeout(function(){if(box.classList.contains('open'))box.style.maxHeight='none';},600);
      more.classList.add('is-open'); mt.textContent='Свернуть';
    }else{
      box.style.maxHeight=box.scrollHeight+'px';
      requestAnimationFrame(function(){box.style.maxHeight='0px';box.classList.remove('open');});
      more.classList.remove('is-open'); mt.textContent='Смотреть все работы';
    }
  });
  window.addEventListener('resize',function(){if(box.classList.contains('open'))box.style.maxHeight='none';});

  /* фильтр по услугам: чистый JS, отбор по data-tags */
  var fwrap=document.getElementById('kgaldFilter'), empty=document.getElementById('kgaldEmpty'), morewrap=more.parentNode;
  function loadRest(){ /* KORS: пачкой больше не грузим - src ставит IntersectionObserver по мере прокрутки. */ }
  function setBox(open){
    if(open){ loadRest(); box.classList.add('open'); box.style.maxHeight='none'; }
    else { box.classList.remove('open'); box.style.maxHeight='0px'; }
  }
  if(fwrap){
    fwrap.addEventListener('click',function(e){
      var b=e.target.closest?e.target.closest('.kgald__fbtn'):null;
      if(!b) return;
      var f=b.getAttribute('data-f'), all=(f==='all'), shown=0, restShown=0, expShown=0;
      fwrap.querySelectorAll('.kgald__fbtn').forEach(function(x){ x.classList.toggle('is-active', x===b); });
      [top,rest,exp].filter(Boolean).forEach(function(grid){
        grid.querySelectorAll('.kgald__card').forEach(function(c){
          var m = all || ((' '+(c.getAttribute('data-tags')||'')+' ').indexOf(' '+f+' ')>-1);
          if(m){
            shown++; if(grid===rest) restShown++; if(grid===exp) expShown++;
            c.style.display='';
            void c.offsetWidth;
            c.classList.remove('is-off');
          } else {
            c.classList.add('is-off');
            setTimeout(function(){ if(c.classList.contains('is-off')) c.style.display='none'; },260);
          }
        });
      });
      if(all){
        setBox(false); morewrap.style.display='';
        more.classList.remove('is-open'); mt.textContent='Смотреть все работы';
      } else {
        setBox(restShown>0); morewrap.style.display='none';
      }
      if(expwrap) expwrap.style.display=(expShown>0)?'':'none';
      if(empty) empty.classList.toggle('on', shown===0);
    });
  }
})();
</script>

rec2663636801 — главная, НАШИ РАБОТЫ · мобилка (23025 симв.)

<!-- ===== KORS · НАШИ РАБОТЫ · МОБИЛКА · блок T123. Показывать ТОЛЬКО на телефоне. ===== -->
<div class="kgalm">
  <div class="kgalm__head">
    <div class="kgalm__eyebrow">- НАШИ РАБОТЫ</div>
    <h2 class="kgalm__title">460+ проектов: найдите свою отрасль.</h2>
    <div class="kgalm__sub">Сфера, формат и срок по каждому проекту. «Смотреть полное видео» - на весь экран.</div>
  </div>
  <div class="kgalm__filter" id="kgalmFilter" aria-label="Фильтр работ по услугам">
    <button type="button" class="kgalm__fbtn is-active" data-f="all">Все</button>
    <button type="button" class="kgalm__fbtn" data-f="video">Видео</button>
    <button type="button" class="kgalm__fbtn" data-f="site">Сайты</button>
    <button type="button" class="kgalm__fbtn" data-f="presentation">Презентации</button>
    <button type="button" class="kgalm__fbtn" data-f="brand">Фирменный стиль</button>
    <button type="button" class="kgalm__fbtn" data-f="ads">Реклама</button>
  </div>
  <div class="kgalm__col" id="kgalmTop"></div>
  <div class="kgalm__hidden" id="kgalmHidden"><div class="kgalm__col" id="kgalmRest"></div></div>
  <div class="kgalm__empty" id="kgalmEmpty">По этой услуге в подборке пока нет проектов.</div>
  <div class="kgalm__morewrap"><button class="kgalm__more" id="kgalmMore"><span class="kgalm__mtext">Смотреть ещё наши работы</span> <span class="kgalm__count">+15</span></button></div>
    <div class="kgalm__group" id="kgalmExpWrap">
    <div class="kgalm__ghead">
      <div class="kgalm__eyebrow">- ГОВОРИМ О ВИДЕО</div>
      <h3 class="kgalm__gtitle">Экспертные ролики студии</h3>
      <div class="kgalm__gsub">Наш собственный контент, не клиентские заказы: как устроен продакшен, из чего складывается цена и что делает видео рабочим инструментом.</div>
    </div>
    <div class="kgalm__col" id="kgalmExp"></div>
  </div>
  <div class="kgalm__lb" id="kgalmLb"><div class="kgalm__lbbd"></div><div class="kgalm__lbbox"><button class="kgalm__lbx" id="kgalmLbx">×</button><div class="kgalm__lbframe"><iframe id="kgalmLbIframe" allow="autoplay; fullscreen; encrypted-media; picture-in-picture" allowfullscreen></iframe></div></div></div>
</div>
<style>
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Unbounded:wght@400;600;700;800&display=swap');
.kgalm{--bg:#0C0C0E;--raise:#141416;--card:#1B1B1F;--border:#2A2A2E;--text:#F5F3EF;--muted:#9A9A9A;--faint:#6a6a6e;--accent:#6D5DFB;--glow:rgba(109,93,251,.14);
  box-sizing:border-box;background:var(--bg);color:var(--text);font-family:'Manrope',Arial,sans-serif;-webkit-font-smoothing:antialiased;padding:56px 20px 64px;}
.kgalm *{box-sizing:border-box;margin:0;padding:0;}
.kgalm__head{margin:0 auto 30px;text-align:center;}
.kgalm__eyebrow{font-family:'Unbounded';font-size:11px;letter-spacing:.14em;color:var(--accent);margin-bottom:12px;}
.kgalm__title{font-family:'Unbounded';font-weight:700;font-size:26px;letter-spacing:-.02em;margin-bottom:12px;line-height:1.15;}
.kgalm__sub{color:var(--muted);font-size:14px;line-height:1.5;max-width:340px;margin:0 auto;}
.kgalm__col{display:flex;flex-direction:column;gap:18px;}
.kgalm__card{background:var(--raise);border:1px solid var(--border);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;}
.kgalm__video{position:relative;width:100%;aspect-ratio:16/9;background:#000;}
.kgalm__video iframe{position:absolute;inset:0;width:100%;height:100%;border:none;pointer-events:none;}
.kgalm__body{padding:18px 18px 20px;display:flex;flex-direction:column;}
.kgalm__name{font-family:'Unbounded';font-weight:700;font-size:18px;margin-bottom:9px;letter-spacing:-.01em;}
.kgalm__meta{display:flex;flex-direction:column;gap:5px;margin-bottom:16px;}
.kgalm__row{font-size:13px;color:var(--muted);line-height:1.4;}
.kgalm__row b{color:var(--text);font-weight:600;}
.kgalm__full--nolink{cursor:default}
.kgalm__full{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:transparent;border:1px solid var(--border);color:var(--text);font-family:'Manrope';font-weight:700;font-size:14px;padding:13px 18px;border-radius:9px;cursor:pointer;width:100%;}
.kgalm__full svg{width:15px;height:15px;flex:none;}
.kgalm__hidden{max-height:0;overflow:hidden;opacity:0;transition:max-height .55s ease,opacity .4s ease,margin-top .4s ease;margin-top:0;}
.kgalm__hidden.open{opacity:1;margin-top:18px;}
.kgalm__morewrap{margin-top:28px;}
.kgalm__more{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;background:var(--accent);color:#fff;font-family:'Manrope';font-weight:700;font-size:15px;padding:16px 24px;border-radius:9px;border:none;cursor:pointer;}
.kgalm__count{font-family:'Unbounded';font-size:12px;background:rgba(0,0,0,.18);padding:3px 8px;border-radius:20px;}
.kgalm__more.is-open .kgalm__count{display:none;}
.kgalm__lb{position:fixed;inset:0;z-index:99999;display:none;align-items:center;justify-content:center;padding:16px;}
.kgalm__lb.open{display:flex;}
.kgalm__lbbd{position:absolute;inset:0;background:rgba(4,4,6,.92);}
.kgalm__lbbox{position:relative;width:100%;}
.kgalm__lbframe{position:relative;width:100%;aspect-ratio:16/9;background:#000;border-radius:12px;overflow:hidden;border:1px solid var(--border);}
.kgalm__lbframe iframe{position:absolute;inset:0;width:100%;height:100%;border:none;}
.kgalm__lbx{position:absolute;top:-44px;right:0;width:38px;height:38px;border-radius:9px;background:var(--raise);border:1px solid var(--border);color:var(--text);font-size:22px;line-height:1;cursor:pointer;}
.kgalm__filter{display:flex;flex-wrap:nowrap;gap:8px;margin:0 -20px 22px;padding:0 20px 2px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;}
.kgalm__filter::-webkit-scrollbar{display:none;}
.kgalm__fbtn{flex:none;background:transparent;border:1px solid var(--border);color:var(--muted);font-family:'Manrope',Arial,sans-serif;font-weight:600;font-size:13px;padding:9px 15px;border-radius:20px;cursor:pointer;white-space:nowrap;transition:.2s;}
.kgalm__fbtn.is-active{background:var(--accent);border-color:var(--accent);color:#fff;}
.kgalm__tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:11px;}
.kgalm__tag{font-family:'Manrope',Arial,sans-serif;font-weight:600;font-size:8px;line-height:1;text-transform:uppercase;letter-spacing:.14em;color:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.22);border-radius:4px;padding:5px 8px;white-space:nowrap;}
.kgalm__desc{font-size:12px;line-height:1.5;color:var(--muted);margin-bottom:13px;}
.kgalm__card{transition:opacity .25s ease,transform .25s ease;}
.kgalm__card.is-off{opacity:0;transform:translateY(6px);}
.kgalm__empty{text-align:center;color:var(--muted);font-size:14px;padding:28px 0;display:none;}
.kgalm__empty.on{display:block;}
@media (min-width:481px){ .kgalm{display:none;} }
/* KORS: экспертные ролики вынесены в отдельную группу со своим заголовком, поэтому плашка на карточке больше не нужна. */
.kgalm__group{margin-top:54px;}
.kgalm__ghead{margin:0 auto 22px;text-align:center;}
.kgalm__gtitle{font-family:'Unbounded';font-weight:700;font-size:22px;letter-spacing:-.02em;margin-bottom:10px;line-height:1.2;}
.kgalm__gsub{color:var(--muted);font-size:13px;line-height:1.5;max-width:340px;margin:0 auto;}
</style>
<script>
(function(){
  var SLUG={'Видео':'video','Фотосъёмка':'photo','Сайт':'site','Презентация':'presentation','Фирменный стиль':'brand','Реклама':'ads','Дизайн':'design','Трансляция':'live','Продюсирование':'producing'};
  var works=[
    {id:'pd95FJSRFhF27W4YX4ioJJ', full:'3ZsxHkdEuHUubxSAQZDRyG', name:'Одоевские консервы - фильм о заводе', tags:['Видео','Фирменный стиль'], desc:'Показали производство изнутри: цеха, линии, контроль качества. Видео работает на сайте, в переговорах с сетями и на выставках.', alt:'Фильм о заводе Одоевские консервы: цеха, линии и контроль качества, мобильная версия'},
    {id:'xgBCJrU3Fy9CtKDXR9R23S', full:'0GfobL6RnAzhPeiopXjNHS', name:'Invoicebox - о компании', sphere:'финансовые технологии (FinTech)', format:'презентационный ролик о компании', term:'6 дней', tags:['Видео','Реклама'], desc:'Имиджевый ролик о платёжном сервисе: чем занимается компания и какие задачи бизнеса закрывает.', alt:'Имиджевый ролик о платёжном сервисе Invoicebox, мобильная версия'},
    {id:'iPcFsLF3eYfDYTauhcgjZj', full:'fv7FAnLfbLaDaNJLtSQ74H', name:'Вистекс', sphere:'производство, предприятие', format:'презентационный ролик', term:'15 дней', tags:['Видео','Дизайн'], desc:'Ролик о заводе: восемь направлений производства за три минуты. Дизайн email-письма со встроенным видео для коммерческих предложений.', alt:'Видео о производстве для завода Вистекс, мобильная версия'},
    {id:'bZ8JyozhtKdSDiy5xjLoVr', full:'caSE37WujsGB6usgZewyUt', name:'Ресторан Rumi / «ЗНАТЬ»', sphere:'ресторанный бизнес, мероприятия', format:'видео-отчёт о мероприятии', term:'2 дня', tags:['Видео','Трансляция','Презентация'], desc:'Съёмка мероприятий, прямая трансляция и презентации для ресторана.', alt:'Съёмка мероприятия и трансляция для ресторана Rumi, мобильная версия'},
    {id:'uiVqp8dWpzNoBt2GweBLs9', full:'vF4hbgW4Umo6U4dDNUFvwv', name:'Новая Формация', sphere:'организация, бизнес', format:'презентационный ролик', term:'4 дня', tags:['Видео','Дизайн'], desc:'Презентационный ролик, афиша и ведение контента.', alt:'Презентационный ролик для проекта Новая Формация, мобильная версия'},
    {id:'gHMF2zBsAdSdbcEH9wSZKh', full:'kfd6wYQdCh72VpRPC74Mfs', name:'Редакция ЭКСМО', sphere:'издательский бизнес', format:'съёмка трейлера по сюжету книги', term:'9 дней', tags:['Видео','Дизайн'], desc:'Трейлер книги и афиша для издательства.', alt:'Книжный трейлер для издательства Редакция ЭКСМО, мобильная версия'},
    {id:'sRSLqBbjkRWyn31BrY6iny', full:'mZiwnH9uZAdc15hhRsqPvB', name:'Одоевские консервы - термостабильные начинки', tags:['Видео'], desc:'Продуктовый ролик о линейке: как начинки ведут себя при выпечке и что это даёт производителю.', alt:'Продуктовый ролик о термостабильных начинках Одоевские консервы, мобильная версия'},
    {id:'uqJ79iyVPcqN1ZtTtjnkAv', full:'gznTZhdFQeZEKZnidVaTbk', name:'GosObmen', sphere:'финансовые услуги', format:'рекламный ролик', term:'3 дня', tags:['Видео','Сайт','Дизайн'], desc:'Рекламные ролики, тексты и сайт. Собрали скрипт для отдела продаж.', alt:'Рекламный ролик и сайт для сервиса Гособмен, мобильная версия'},
    {id:'35XkXms5VN3RLJcYsgWsnD', full:'2FXfjS6hYEvLkWNKUveoBx', name:'Invoicebox - оплата в белорусских рублях', tags:['Видео'], desc:'Объясняющий ролик о выходе платёжного сервиса на рынок Беларуси: как принимать оплату в белорусских рублях.', alt:'Ролик об оплате в белорусских рублях в платёжном сервисе Invoicebox, мобильная версия'},
    {id:'5zMvPKfeuDf9N7h7P8KuVe', full:'ePXSSA9qFiEgA5WYRdd4FP', name:'Алтай Серикбай - съёмки для личного бренда', tags:['Видео'], desc:'Снимаем контент для эксперта по личностному развитию: студийные выпуски, разговорные форматы, съёмки на ретритах. За время работы - больше десяти роликов.', alt:'Съёмки для личного бренда эксперта по личностному развитию Алтая Серикбая, мобильная версия'},
    {id:'bKeihzPbnEbXZarkMcYQZj', full:'6ivtiXKAcQj4dVJN8H1YWs', name:'MediaLive - отчётный ролик с выставки', tags:['Видео','Реклама'], desc:'Сняли отчётное видео с отраслевого события. Организаторы используют его на сайте и в рекламе следующего сезона.', alt:'Отчётный ролик с отраслевой выставки для MediaLive, мобильная версия'},
    {id:'8QbWRspZgkLTicEiQpp9su', full:'8QbWRspZgkLTicEiQpp9su', name:'STROBBS - промо зимней коллекции', tags:['Видео','Реклама'], desc:'Проморолик показа новой зимней коллекции российского бренда обуви и одежды.', alt:'Проморолик показа зимней коллекции бренда обуви и одежды STROBBS, мобильная версия'},
    {id:'88SCanh4aPU83UFBmThiVa', full:'mJqjXaKQBrdbvirxUTHLLh', name:'Rockstar - клип «На дне»', tags:['Видео'], desc:'Музыкальный клип для артиста.', alt:'Музыкальный клип На дне для артиста Rockstar, мобильная версия'},
    {id:'wLtMKZCpf75eYEWMXPEPZY', full:'7Kxs8xzVfCDLtyuG5puNN1', name:'Рокстар', sphere:'медиа', format:'музыкальный клип', term:'12 дней', tags:['Видео','Дизайн'], desc:'Три клипа и обложки для музыкального проекта.', alt:'Музыкальные клипы для проекта Рокстар, мобильная версия'},
    {id:'qAV5wXg5oHKKcY6tbgysZd', full:'okapERMYWfdoGagPRmo7uC', name:'Rockstar - клип «Самая грустная песня»', tags:['Видео'], desc:'Первый клип, который мы сняли для артиста.', alt:'Музыкальный клип Самая грустная песня для артиста Rockstar, мобильная версия'},
    {id:'vNYi5w7HiQevkdBbPmQ3CR', full:'vNYi5w7HiQevkdBbPmQ3CR', name:'Ювелирный лофт GOLD - ролик о компании', tags:['Видео'], desc:'Рассказали о компании и о том, чем она занимается.', alt:'Ролик о компании для ювелирного лофта GOLD, мобильная версия'},
    {id:'6JcPdvqUchXCmzscbTqaos', full:'sRyZwPm3BS9CVspVi2sLx3', name:'Одоевские консервы - нетермостабильные начинки', tags:['Видео'], desc:'Второй ролик линейки: назначение, состав, применение в готовых изделиях.', alt:'Продуктовый ролик о нетермостабильных начинках Одоевские консервы, мобильная версия'},
    {id:'8YSeQnzXxmpkmo7uNNcLrF', full:'43yfJckoZggrVouaMMK4zt', name:'YouTube-шоу', sphere:'медиа', format:'съёмка выпусков', term:'14 дней', tags:['Видео','Продюсирование','Реклама'], desc:'Продюсирование и режиссура шоу: съёмка выпусков и рекламное сопровождение.', alt:'Съёмка выпусков YouTube-шоу, мобильная версия'},
    {id:'7akHJzKdcoSrPiHtRbRBqk', full:'7akHJzKdcoSrPiHtRbRBqk', name:'Invoicebox - интернет-магазины за пару кликов', tags:['Видео'], desc:'Продуктовый ролик о конструкторе интернет-магазинов внутри сервиса.', alt:'Ролик о конструкторе интернет-магазинов в сервисе Invoicebox, мобильная версия'},
    {id:'b66cpVCFFFVycfDvLFXFR3', full:'b66cpVCFFFVycfDvLFXFR3', name:'Invoicebox - как выставить счёт за пару кликов', tags:['Видео'], desc:'Видеоинструкция для пользователей сервиса: выставление счёта по шагам.', alt:'Видеоинструкция по выставлению счёта в сервисе Invoicebox, мобильная версия'},
    {id:'eCGHEdUFdSyEjCBXxcsUSC', full:'geGWgessLoxkUKdQ4d4e1q', name:'Шоурил KORS Production', sphere:'создание контента', format:'актуальные работы', term:'2025-й год', tags:['Видео','Продюсирование'], desc:'Шоурил студии: съёмки на производствах и коммерческие проекты разных лет.', alt:'Актуальные работы студии KORS Production, мобильная версия'},
    {id:'dsqVruz3QkCKQESGiTUsVR', full:'dsqVruz3QkCKQESGiTUsVR', name:'Твой продакшен тебя обманывает', tags:['Видео'], kors:true, alt:'Экспертное видео KORS: почему продакшен может обманывать заказчика, мобильная версия'},
    {id:'uittTC7uyz9hv4HDirTBAG', full:'uittTC7uyz9hv4HDirTBAG', name:'Видео - это не украшение для бизнеса', tags:['Видео'], kors:true, alt:'Экспертное видео KORS о том, зачем бизнесу видео, мобильная версия'},
    {id:'aG3Qkc4VfoCcgtJLz6ivbE', full:'aG3Qkc4VfoCcgtJLz6ivbE', name:'Как сэкономить на видеоролике', tags:['Видео'], kors:true, alt:'Экспертное видео KORS о том, как сэкономить на съёмке ролика, мобильная версия'},
    {id:'4pzsMBSzheH3Sarx4UFHMd', full:'4pzsMBSzheH3Sarx4UFHMd', name:'Как сделать продающее видео', tags:['Видео'], kors:true, alt:'Экспертное видео KORS о том, как сделать продающее видео, мобильная версия'},
    {id:'kkQyUoC94bPxEGxq9UmMzj', full:'kkQyUoC94bPxEGxq9UmMzj', name:'Как правильно писать нам правки', tags:['Видео'], kors:true, desc:'Как формулировать правки, чтобы их внесли быстро и с первого раза.', alt:'Экспертное видео KORS о том, как правильно присылать правки по проекту, мобильная версия'},
    {id:'5r45VM9UQsJWhAAh8w9zQK', full:'5r45VM9UQsJWhAAh8w9zQK', name:'Как подготовиться до старта проекта', tags:['Видео'], kors:true, desc:'Что собрать и решить до старта, чтобы проект пошёл без задержек.', alt:'Экспертное видео KORS о подготовке к старту проекта, мобильная версия'},
    {id:'5JNE6gLppoDPJxPXRiLFV8', full:'5JNE6gLppoDPJxPXRiLFV8', name:'Подготовка к съёмочному дню', tags:['Видео'], kors:true, desc:'Как подготовить площадку и людей, чтобы съёмочный день прошёл по плану.', alt:'Экспертное видео KORS о подготовке к съёмочному дню, мобильная версия'}
  ];
  var FS='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="5 3 19 12 5 21 5 3"/></svg>';
  var lb=document.getElementById('kgalmLb'), lbf=document.getElementById('kgalmLbIframe');
  function openLb(id){ lbf.src='https://kinescope.io/embed/'+id+'?autoplay=true'; lb.classList.add('open'); }
  function closeLb(){ lb.classList.remove('open'); lbf.src=''; }
  document.getElementById('kgalmLbx').addEventListener('click',closeLb);
  lb.querySelector('.kgalm__lbbd').addEventListener('click',closeLb);
  document.addEventListener('keydown',function(e){ if((e.key==='Escape'||e.keyCode===27)&&lb.classList.contains('open'))closeLb(); });
  function makeCard(w, defer){
    var card=document.createElement('div'); card.className='kgalm__card';
    card.setAttribute('data-tags',(w.tags||[]).map(function(t){return SLUG[t]||'';}).join(' '));
    var ttl=(w.alt||w.name).replace(/"/g,'&quot;');
    var q='?autoplay=true&muted=true&loop=true&controls=false&playsInline=true&background=true';
    var ift= defer ? '<iframe data-src="https://kinescope.io/embed/'+w.id+q+'" title="'+ttl+'" aria-label="'+ttl+'" allow="autoplay; fullscreen; encrypted-media; picture-in-picture" allowfullscreen></iframe>'
                   : '<iframe loading="lazy" src="https://kinescope.io/embed/'+w.id+q+'" title="'+ttl+'" aria-label="'+ttl+'" allow="autoplay; fullscreen; encrypted-media; picture-in-picture" allowfullscreen></iframe>';
    var tagsHtml=(w.tags&&w.tags.length)?'<div class="kgalm__tags">'+w.tags.map(function(t){return '<span class="kgalm__tag">'+t+'</span>';}).join('')+'</div>':'';
    var descHtml=w.desc?'<p class="kgalm__desc">'+w.desc+'</p>':'';
    var metaHtml='';
    if(w.sphere||w.format||w.term){ metaHtml='<div class="kgalm__meta">'+(w.sphere?'<div class="kgalm__row"><b>Сфера:</b> '+w.sphere+'</div>':'')+(w.format?'<div class="kgalm__row"><b>Формат:</b> '+w.format+'</div>':'')+(w.term?'<div class="kgalm__row"><b>Срок:</b> '+w.term+'</div>':'')+'</div>'; }
    card.innerHTML='<div class="kgalm__video">'+ift+'</div><div class="kgalm__body"><h3 class="kgalm__name">'+w.name+'</h3>'+tagsHtml+descHtml+metaHtml+'<button class="kgalm__full'+(w.full?'':' kgalm__full--nolink')+'" '+(w.full?'':'aria-disabled="true"')+'>'+FS+'Смотреть полное видео</button></div>';
    if(w.full){ card.querySelector('.kgalm__full').addEventListener('click',function(){ openLb(w.full); }); }
    return card;
  }
  var top=document.getElementById('kgalmTop'),rest=document.getElementById('kgalmRest'),box=document.getElementById('kgalmHidden'),more=document.getElementById('kgalmMore');
  var exp=document.getElementById('kgalmExp'), expwrap=document.getElementById('kgalmExpWrap');
  if(!top||!rest||!box||!more)return;
  /* KORS: превью грузятся не пачкой. Плеер получает src только когда карточка подходит к видимой области (запас 250px). Пока карточка спрятана под кнопкой (max-height:0) или скрыта фильтром (display:none), она не пересекается с экраном и ролик не стартует. */
  var io=('IntersectionObserver' in window)?new IntersectionObserver(function(es,ob){
    es.forEach(function(e){
      if(!e.isIntersecting) return;
      var f=e.target.querySelector('iframe[data-src]');
      if(f){ f.src=f.getAttribute('data-src'); f.removeAttribute('data-src'); }
      ob.unobserve(e.target);
    });
  },{root:null,rootMargin:'250px 0px',threshold:0.01}):null;
  function watch(c){
    if(io){ io.observe(c); return; }
    var f=c.querySelector('iframe[data-src]');
    if(f){ f.src=f.getAttribute('data-src'); f.removeAttribute('data-src'); }
  }
  function put(grid,w){ var c=makeCard(w,true); grid.appendChild(c); watch(c); }
  /* KORS: порог показа на телефоне - 6 карточек (одна колонка, 12 было бы простынёй), остальные под кнопкой. Экспертные ролики студии идут отдельной группой ниже, флаг kors в данных теперь отвечает за группировку. */
  var TOPN=6;
  var main=works.filter(function(w){return !w.kors;});
  var expert=works.filter(function(w){return !!w.kors;});
  main.slice(0,TOPN).forEach(function(w){put(top,w);});
  main.slice(TOPN).forEach(function(w){put(rest,w);});
  if(exp){ expert.forEach(function(w){put(exp,w);}); }
  var cntEl=more.querySelector('.kgalm__count'); if(cntEl){ cntEl.textContent='+'+Math.max(0,main.length-TOPN); }
  var loaded=false, mt=more.querySelector('.kgalm__mtext');
  more.addEventListener('click',function(){
    if(!box.classList.contains('open')){
      box.classList.add('open'); box.style.maxHeight=box.scrollHeight+'px';
      setTimeout(function(){if(box.classList.contains('open'))box.style.maxHeight='none';},600);
      more.classList.add('is-open'); mt.textContent='Свернуть';
    }else{
      box.style.maxHeight=box.scrollHeight+'px';
      requestAnimationFrame(function(){box.style.maxHeight='0px';box.classList.remove('open');});
      more.classList.remove('is-open'); mt.textContent='Смотреть ещё наши работы';
    }
  });
  window.addEventListener('resize',function(){if(box.classList.contains('open'))box.style.maxHeight='none';});

  /* фильтр по услугам: чистый JS, отбор по data-tags */
  var fwrap=document.getElementById('kgalmFilter'), empty=document.getElementById('kgalmEmpty'), morewrap=more.parentNode;
  function loadRest(){ /* KORS: пачкой больше не грузим - src ставит IntersectionObserver по мере прокрутки. */ }
  function setBox(open){
    if(open){ loadRest(); box.classList.add('open'); box.style.maxHeight='none'; }
    else { box.classList.remove('open'); box.style.maxHeight='0px'; }
  }
  if(fwrap){
    fwrap.addEventListener('click',function(e){
      var b=e.target.closest?e.target.closest('.kgalm__fbtn'):null;
      if(!b) return;
      var f=b.getAttribute('data-f'), all=(f==='all'), shown=0, restShown=0, expShown=0;
      fwrap.querySelectorAll('.kgalm__fbtn').forEach(function(x){ x.classList.toggle('is-active', x===b); });
      if(b.scrollIntoView) b.scrollIntoView({block:'nearest',inline:'nearest'});
      [top,rest,exp].filter(Boolean).forEach(function(grid){
        grid.querySelectorAll('.kgalm__card').forEach(function(c){
          var m = all || ((' '+(c.getAttribute('data-tags')||'')+' ').indexOf(' '+f+' ')>-1);
          if(m){
            shown++; if(grid===rest) restShown++; if(grid===exp) expShown++;
            c.style.display='';
            void c.offsetWidth;
            c.classList.remove('is-off');
          } else {
            c.classList.add('is-off');
            setTimeout(function(){ if(c.classList.contains('is-off')) c.style.display='none'; },260);
          }
        });
      });
      if(all){
        setBox(false); morewrap.style.display='';
        more.classList.remove('is-open'); mt.textContent='Смотреть ещё наши работы';
      } else {
        setBox(restShown>0); morewrap.style.display='none';
      }
      if(expwrap) expwrap.style.display=(expShown>0)?'':'none';
      if(empty) empty.classList.toggle('on', shown===0);
    });
  }
})();
</script>

rec3238696801 — /sites, квиз (CSS) (8308 симв.)

<style>
/* ---------- Квиз ---------- */
.quiz-wrap{background:var(--card);border-radius:var(--r-lg);padding:46px;margin-top:44px;display:grid;grid-template-columns:260px 1fr;gap:44px;box-shadow:0 0 0 1px var(--line)}
.quiz-persona{text-align:center}
.quiz-avatar{display:block;width:128px;height:128px;border-radius:50%;object-fit:cover;object-position:center 22%;margin:0 auto 16px;border:1px solid var(--line)}
.quiz-persona b{display:block;font-size:17px;letter-spacing:-.02em}
.quiz-persona span{font-size:13.5px;color:var(--muted)}
.quiz-hint{margin-top:18px;background:var(--bg);border-radius:18px;padding:16px;font-size:13.5px;color:var(--muted);text-align:left;line-height:1.5}
.quiz-progress{height:6px;background:#24242a;border-radius:99px;margin-bottom:26px;overflow:hidden}
.quiz-bar{height:100%;width:16%;background:var(--accent);border-radius:99px;transition:width .3s ease}
.quiz-step-label{font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gray);margin-bottom:12px}
.quiz-q{font-weight:600;font-size:clamp(20px,2.1vw,26px);margin-bottom:24px;line-height:1.2;letter-spacing:-.025em}
.quiz-opts{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.quiz-opt{border:1.5px solid transparent;border-radius:18px;padding:18px 20px;background:#1b1b1f;font-size:15px;font-weight:500;color:var(--ink);text-align:left;transition:border-color .15s,background .15s,transform .15s}
.quiz-opt:hover{border-color:var(--accent-2);transform:translateY(-1px)}
.quiz-opt.sel{border-color:var(--accent);background:var(--peach)}
.quiz-nav{display:flex;gap:12px;margin-top:28px;align-items:center}
.quiz-back{background:none;border:none;color:var(--muted);font-weight:600;font-size:14.5px;padding:10px 6px}
.quiz-back:hover{color:var(--ink)}
.quiz-final .fields{display:grid;gap:12px;margin-bottom:16px}
.kmailnote{margin-top:14px;text-align:center;font:400 14px/1.5 Manrope,Arial,sans-serif;color:var(--muted)}
.kmailnote a{color:#A99CFF;text-decoration:underline;text-underline-offset:3px}
.kmailnote a:hover{color:var(--ink)}
</style>
<section id="quiz" style="padding-top:0">
  <div class="container">
    <div class="eyebrow reveal">Расчёт за 40 секунд</div>
    <h2 class="reveal">Соберём план запуска под вашу нишу за 6 ответов</h2>
    <p class="sub reveal">Структура сайта, офер, канал трафика и вилка стоимости — пришлём в удобный мессенджер.</p>
    <div class="quiz-wrap reveal">
      <div class="quiz-persona">
        <img class="quiz-avatar" src="https://static.tildacdn.com/tild3034-3837-4330-b664-346332656439/dmitriy-kors-1000.jpg" alt="Дмитрий Корс, сооснователь студии KORS" loading="lazy">
        <b>Дмитрий Корс</b>
        <span>Сооснователь KORS, отвечает за проект</span>
        <div class="quiz-hint" id="quizHint">Каждый ответ сужает вилку стоимости — в конце пришлём точный расчёт и 2–3 примера решений под вашу задачу.</div>
      </div>
      <div class="quiz-body" id="quizBody">
        <div class="quiz-progress"><div class="quiz-bar" id="quizBar"></div></div>
        <div class="quiz-step-label" id="quizLabel">Шаг 1 из 6</div>
        <div id="quizContent"></div>
      </div>
    </div>
  </div>
</section>
<script>
var quizData=[
  {q:'Для какого бизнеса нужен сайт?',hint:'От ниши зависит и структура, и канал трафика — предложим решение под ваш рынок, а не шаблон.',opts:['Производство','Услуги (b2b / b2c)','Товары, интернет-магазин','Эксперт, личный бренд']},
  {q:'Какая главная задача?',hint:'Кому-то нужен поток заявок, кому-то — доверие и имидж. От цели зависят акценты на странице.',opts:['Постоянный поток заявок','Имидж и доверие к компании','Запуск нового продукта','Всё сразу — и продажи, и имидж']},
  {q:'Сайт с нуля или уже есть?',hint:'Если сайт есть, но молчит, — разберём, почему, и посчитаем, что дешевле: докрутить или пересобрать.',opts:['С нуля — нужно всё','Есть, но не приносит заявок','Нужен редизайн и рост конверсии']},
  {q:'Откуда пойдёт трафик?',hint:'Под рекламу, SEO и соцсети сайты строятся по-разному. Если не уверены — подскажем.',opts:['Реклама в Яндекс Директе','SEO, органический трафик','Свои соцсети','Пока не знаю — подскажите']},
  {q:'Когда планируете запуск?',hint:'Если сроки жмут — уплотним график команды без потери качества.',opts:['Срочно, за 2–3 недели','В течение месяца','Через 1–2 месяца','Пока присматриваюсь']}
];
var quizState={step:0,answers:[]};
var qc=document.getElementById('quizContent'),qBar=document.getElementById('quizBar'),qLabel=document.getElementById('quizLabel'),qHint=document.getElementById('quizHint');
var TOTAL=quizData.length+1;
function renderQuiz(){
  var s=quizState.step;
  qBar.style.width=((s+1)/TOTAL*100)+'%';
  if(s<quizData.length){
    qLabel.textContent='Шаг '+(s+1)+' из '+TOTAL;
    qHint.textContent=quizData[s].hint;
    var html='<div class="quiz-q">'+quizData[s].q+'</div><div class="quiz-opts">';
    quizData[s].opts.forEach(function(o,i){
      var sel=quizState.answers[s]===i?' sel':'';
      html+='<button type="button" class="quiz-opt'+sel+'" data-i="'+i+'">'+o+'</button>';
    });
    html+='</div><div class="quiz-nav">'+(s>0?'<button type="button" class="quiz-back" id="qBack">← Назад</button>':'')+'</div>';
    qc.innerHTML=html;
    qc.querySelectorAll('.quiz-opt').forEach(function(b){
      b.addEventListener('click',function(){
        quizState.answers[s]=+b.dataset.i;
        quizState.step++;renderQuiz();
        qc.closest('.quiz-wrap').scrollIntoView({behavior:'smooth',block:'nearest'});
      });
    });
    var back=document.getElementById('qBack');
    if(back)back.addEventListener('click',function(){quizState.step--;renderQuiz()});
  }else{
    qLabel.textContent='Последний шаг';
    qHint.textContent='Пришлём расчёт и 2–3 примера решений под вашу задачу в течение пары часов в рабочее время.';
    qc.innerHTML=
      '<div class="quiz-q">Куда прислать план запуска и расчёт?</div>'+
      '<div class="quiz-final">'+
        '<div class="fields">'+
          '<div class="field"><input type="text" id="qName" placeholder="Ваше имя"></div>'+
          '<div class="field"><input type="tel" id="qPhone" placeholder="Телефон или @ник в Telegram"></div>'+
        '</div>'+
        '<div class="msgr-row" id="qMsgr">'+
          '<button type="button" class="msgr sel">Телефон</button>'+
          '<button type="button" class="msgr">Telegram</button>'+
          '<button type="button" class="msgr">WhatsApp</button>'+
          '<button type="button" class="msgr">MAX</button>'+
        '</div>'+
        '<label class="check"><input type="checkbox" id="qAgree" checked> Я принимаю условия <a href="https://korsprod.ru/policy" target="_blank" rel="noopener">политики конфиденциальности</a> и даю согласие на обработку персональных данных</label>'+
        '<div class="quiz-nav" style="margin-top:0">'+
          '<button type="button" class="quiz-back" id="qBack">← Назад</button>'+
          '<button type="button" class="btn btn-primary" id="qSubmit" style="flex:1">Получить план запуска</button>'+
        '</div>'+
        '<div class="kmailnote">Не любите формы - напишите на <a href="mailto:sales@korsprod.ru">sales@korsprod.ru</a></div>'+
      '</div>';
    document.getElementById('qMsgr').querySelectorAll('.msgr').forEach(function(b){
      b.addEventListener('click',function(){
        document.getElementById('qMsgr').querySelectorAll('.msgr').forEach(function(x){x.classList.remove('sel')});
        b.classList.add('sel');
      });
    });
    document.getElementById('qBack').addEventListener('click',function(){quizState.step--;renderQuiz()});
    document.getElementById('qSubmit').addEventListener('click',function(){
      var n=document.getElementById('qName'),p=document.getElementById('qPhone'),a=document.getElementById('qAgree');
      if(!n.value.trim()){n.focus();return}
      if(p.value.trim().length<5){p.focus();return}
      if(!a.checked){a.focus();return}
      qBar.style.width='100%';
      qLabel.textContent='Готово';
      qHint.textContent='Спасибо! Обычно отвечаем в течение 10 минут в рабочее время.';
      qc.innerHTML='<div class="quiz-done"><div class="big">🔥</div><h3>Заявка принята</h3><p>Свяжемся в выбранном мессенджере, зададим пару уточняющих вопросов и пришлём план запуска с вилкой стоимости.</p></div>';
    });
  }
}
renderQuiz();
</script>

site head code — прелоадер (Настройки сайта, Вставка кода в HEAD) (3338 симв.)

<script src="https://cdn.postnikovmd.com/tilda@1.4/mods.min.js"></script>

<!-- KORS PRELOADER -->
<style> @import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@800&display=swap'); html{background:#0C0C0E !important;} html.kload-on #allrecords,html.kload-on .t-records,html.kload-on .t-body{visibility:hidden !important;} html.kload-done #allrecords,html.kload-done .t-records,html.kload-done .t-body{visibility:visible !important;} html.kload-on .kload,html.kload-on .kload *{visibility:visible !important;} .kload{position:fixed;inset:0;z-index:99999;background:#0C0C0E;visibility:visible;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;font-family:'Unbounded',Arial,sans-serif;transition:opacity .55s ease,visibility .55s ease;} .kload::before{content:"";position:absolute;inset:0;background:radial-gradient(600px 420px at 50% 42%,rgba(109,93,251,.16),transparent 62%);pointer-events:none;} .kload__rec{position:relative;display:flex;align-items:center;gap:9px;font-size:12px;letter-spacing:.18em;color:#9A9A9A;} .kload__rec i{width:10px;height:10px;border-radius:50%;background:#FF3B30;box-shadow:0 0 12px rgba(255,59,48,.8);animation:kBlink 1s steps(1) infinite;} .kload__logo{position:relative;font-weight:800;font-size:clamp(54px,11vw,120px);letter-spacing:-.02em;color:#F5F3EF;opacity:1;text-shadow:0 4px 40px rgba(109,93,251,.4);animation:kPulse 1.6s ease-in-out infinite;} .kload__bar{position:relative;width:220px;max-width:60vw;height:2px;background:#26262b;border-radius:2px;overflow:hidden;} .kload__bar::before{content:"";position:absolute;left:0;top:0;height:100%;width:32%;background:linear-gradient(90deg,#6D5DFB,#8A7BFF);opacity:.55;} .kload__bar::after{content:"";position:absolute;left:0;top:0;height:100%;width:35%;background:linear-gradient(90deg,transparent,#6D5DFB,#8A7BFF,transparent);box-shadow:0 0 10px rgba(109,93,251,.5);animation:kSlide 1.1s ease-in-out infinite;} .kload--out{opacity:0;visibility:hidden;pointer-events:none;} @keyframes kPulse{0%,100%{text-shadow:0 4px 40px rgba(109,93,251,.35);}50%{text-shadow:0 4px 60px rgba(109,93,251,.75);}} @keyframes kSlide{0%{transform:translateX(-120%)}100%{transform:translateX(340%)}}  @keyframes kBlink{50%{opacity:.25}} </style>
<script> (function(){ document.documentElement.classList.add('kload-on');   var HTML='<div class="kload__rec"><i></i>REC \u00b7 KORS PRODUCTION</div><div class="kload__logo">KORS</div><div class="kload__bar"></div>';   var d=document.createElement('div'); d.className='kload'; d.setAttribute('aria-hidden','true'); d.innerHTML=HTML;   function mount(){ if(document.body){ document.body.insertBefore(d, document.body.firstChild); } }   if(document.body){ mount(); } else { document.addEventListener('DOMContentLoaded', mount); }   var start=Date.now(), gone=false;   function hide(){ if(gone) return; gone=true; var wait=Math.max(0, 1500-(Date.now()-start)); setTimeout(function(){ document.documentElement.classList.remove('kload-on'); document.documentElement.classList.add('kload-done'); d.classList.add('kload--out'); setTimeout(function(){ if(d.parentNode) d.parentNode.removeChild(d); }, 650); }, wait); }   if(document.readyState==='complete'){ hide(); } else { window.addEventListener('load', hide); }   setTimeout(hide, 5000); })(); </script>
<!-- /KORS PRELOADER -->

rec2627171701 — главная, блок с фото Дмитрия (4027 симв.)

<style>
#rec2619268401{display:none!important;}
.ktm{background:#0C0C0E;padding:56px 0 64px;font-family:'Manrope',-apple-system,Arial,sans-serif;overflow:hidden}
.ktm *{box-sizing:border-box}
.ktm__head{padding:0 20px;margin-bottom:20px}
.ktm__eyebrow{display:inline-flex;align-items:center;gap:8px;color:#6D5DFB;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;margin-bottom:14px}
.ktm__eyebrow:before{content:"";width:22px;height:1px;background:#6D5DFB}
.ktm__title{font-family:'Unbounded',sans-serif;color:#F5F3EF;font-size:29px;line-height:1.12;font-weight:700;margin:0 0 12px}
.ktm__sub{color:#9C9A95;font-size:15px;line-height:1.5;margin:0}
.ktm__sub b{color:#6D5DFB;font-weight:600}
.ktm__founder{margin:0 20px 8px;background:#1B1B1F;border-left:3px solid #6D5DFB;border-radius:0 12px 12px 0;padding:18px 18px 20px}
.ktm__frole{color:#6D5DFB;font-size:12px;font-weight:600;margin:0 0 6px}
.ktm__fname{color:#F5F3EF;font-size:19px;font-weight:700;margin:0 0 6px}
.ktm__fdesc{color:#9C9A95;font-size:14px;line-height:1.5;margin:0 0 16px}
.ktm__btn{display:inline-block;background:#6D5DFB;color:#fff;font-weight:600;font-size:15px;text-decoration:none;padding:13px 22px;border-radius:8px;transition:background .2s}
.ktm__btn:active{background:#FF7238}
.ktm__mail{display:block;color:#9C9A95;font-size:13px;text-decoration:none;margin-top:12px}
.ktm__hint{color:#66645F;font-size:12px;padding:18px 20px 0;display:flex;align-items:center;gap:6px}
.ktm__hint:before{content:"";width:6px;height:6px;border-radius:50%;background:#6D5DFB}
.ktm__track{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding:14px 20px 8px;scrollbar-width:none}
.ktm__track::-webkit-scrollbar{display:none}
.ktm__card{position:relative;flex:0 0 76%;max-width:300px;aspect-ratio:4/5;border-radius:14px;overflow:hidden;scroll-snap-align:start;background:#1B1B1F}
.ktm__card img{width:100%;height:100%;object-fit:cover;display:block}
.ktm__grad{position:absolute;left:0;right:0;bottom:0;height:46%;background:linear-gradient(to top,rgba(12,12,14,.92),rgba(12,12,14,0))}
.ktm__info{position:absolute;left:16px;right:16px;bottom:16px}
.ktm__name{color:#F5F3EF;font-size:17px;font-weight:700;margin:0 0 4px}
.ktm__role{color:#9C9A95;font-size:13px;margin:0}

.ktm{max-width:1200px;margin:0 auto;padding:72px 24px}
.ktm__title{font-size:clamp(28px,4.2vw,54px);line-height:1.1;text-wrap:balance}
.ktm__founder{max-width:900px;margin-top:28px}
.ktm__fdesc{font-size:clamp(16px,1.7vw,20px);line-height:1.65}
@media(max-width:480px){.ktm{padding:52px 18px}.ktm__title{font-size:28px}.ktm__founder{margin-top:20px}}

/* KORS: слот фото ответственного. Рамка взята из задела карусели команды: .ktm__card, 4/5, object-fit cover. */
.ktm__fwrap{display:flex;gap:24px;align-items:flex-start}
.ktm__fwrap .ktm__card{flex:0 0 260px;width:260px;max-width:300px}
.ktm__fwrap .ktm__card img{object-position:center 22%}
.ktm__fwrap .ktm__fdesc{margin:0}
.ktm__shade{position:absolute;inset:0;background:linear-gradient(to top,rgba(12,12,14,.26),rgba(12,12,14,.04));pointer-events:none}
@media(max-width:640px){.ktm__fwrap{flex-direction:column;gap:18px}.ktm__fwrap .ktm__card{flex:0 0 auto;width:100%;max-width:260px}}
</style>
<div class="ktm">
  <div class="ktm__head">
    <div class="ktm__eyebrow">Ответственный</div>
    <h2 class="ktm__title">За проект отвечает один человек. Вот он.</h2>
  </div>
  <div class="ktm__founder">
    <div class="ktm__fwrap">
      <div class="ktm__card"><img src="https://static.tildacdn.com/tild3034-3837-4330-b664-346332656439/dmitriy-kors-1000.jpg" alt="Дмитрий Корс, сооснователь KORS Production, в студии на фоне логотипа студии" loading="lazy"><div class="ktm__shade"></div></div>
      <p class="ktm__fdesc">Дмитрий Корс - сооснователь KORS. Курирует производственные проекты и отвечает за результат со стороны студии. Под конкретную задачу подключаются нужные специалисты: продакшн, дизайн, разработка и маркетинг.</p>
    </div>
  </div>
</div>

rec3239313501 — /sites, финальная форма (5251 симв.)

<style>
/* ---------- Финальная форма ---------- */
.final-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:center}
.final-person{margin:0;max-width:320px}
.final-person img{display:block;width:100%;height:auto;aspect-ratio:2/3;object-fit:cover;object-position:center 20%;border-radius:var(--r-md);border:1px solid var(--dark-3)}
.final-person figcaption{margin-top:18px}
.final-person figcaption b{display:block;font-size:18px;letter-spacing:-.02em}
.final-person figcaption span{display:block;margin-top:5px;font-size:14px;line-height:1.5;color:var(--gray)}
@media (max-width:1020px){.final-person{max-width:240px;margin:0 auto}}
.final-form .fields{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:26px 0 16px}
.final-form .field input{background:var(--dark-2);border:1.5px solid var(--dark-3);color:#fff}
.final-form .field input::placeholder{color:#7a7f87}
.final-form .field input:focus{border-color:var(--accent)}
.final-form .msgr{background:var(--dark-2);border-color:var(--dark-3);color:#e8e9ea}
.final-form .msgr.sel{border-color:var(--accent);background:rgba(109,93,251,.16);color:#a99cff}
.final-form .check{color:var(--gray)}
.form-note{font-size:13px;color:var(--gray);margin-top:14px}
.kmailnote{margin-top:14px;text-align:center;font:400 14px/1.5 Manrope,Arial,sans-serif;color:var(--muted)}
.kmailnote a{color:#A99CFF;text-decoration:underline;text-underline-offset:3px}
.kmailnote a:hover{color:var(--ink)}
.final-form .field-err{margin-top:6px;font-size:13px;line-height:1.4;color:#ff6b6b}
.final-form .field input.has-err{border-color:#ff6b6b}
</style>
<div class="section-dark final" id="final">
  <section>
  <div class="container final-grid">
    <div>
      <figure class="final-person">
        <img src="https://static.tildacdn.com/tild3034-3837-4330-b664-346332656439/dmitriy-kors-1000.jpg" alt="Дмитрий Корс, сооснователь студии KORS Production" loading="lazy">
        <figcaption><b>Дмитрий Корс</b><span>Сооснователь KORS. Проведёт разбор и ответит на вопросы</span></figcaption>
      </figure>
    </div>
    <div class="final-form">
      <div class="eyebrow">Свяжемся в течение 10 минут</div>
      <h2>Обсудим ваш <span class="squig">проект<svg viewBox="0 0 300 24" preserveAspectRatio="none" aria-hidden="true"><path d="M4 14 C70 5 180 4 296 11"/><path d="M140 20 C200 13 255 12 293 16"/></svg></span>?</h2>
      <p class="sub">За 15–20 минут разберём нишу и текущую ситуацию, покажем, какая модель привлечения заявок сработает у вас, и назовём вилку стоимости.</p>
      <form id="leadForm" novalidate>
        <div class="fields">
          <div class="field"><input type="text" name="name" placeholder="Ваше имя" required></div>
          <div class="field"><input type="text" name="phone" placeholder="Телефон или @ник в Telegram" required></div>
        </div>
        <div class="msgr-row" data-group="final">
          <button type="button" class="msgr sel">Телефон</button>
          <button type="button" class="msgr">Telegram</button>
          <button type="button" class="msgr">WhatsApp</button>
          <button type="button" class="msgr">MAX</button>
        </div>
        <label class="check"><input type="checkbox" required checked> Я принимаю условия <a href="https://korsprod.ru/policy" target="_blank" rel="noopener">политики конфиденциальности</a> и даю согласие на обработку персональных данных</label>
        <button class="btn btn-primary btn-block" type="submit">Получить план запуска</button>
        <div class="kmailnote">Не любите формы - напишите на <a href="mailto:sales@korsprod.ru">sales@korsprod.ru</a></div>
      </form>
      <div class="quiz-done" id="formDone" style="display:none">
        <div class="big">🔥</div>
        <h3 style="color:#fff">Заявка принята</h3>
        <p style="color:var(--gray)">Свяжемся в течение 10 минут в рабочее время и пришлём план запуска под вашу нишу.</p>
      </div>
    </div>
  </div>
  </section>
</div>
<script>
document.querySelectorAll('.msgr-row').forEach(function(row){
  row.querySelectorAll('.msgr').forEach(function(b){
    b.addEventListener('click',function(){
      row.querySelectorAll('.msgr').forEach(function(x){x.classList.remove('sel')});
      b.classList.add('sel');
    });
  });
});
var leadForm=document.getElementById('leadForm');
function kfErr(el,msg){var f=el.parentNode;var e=f.querySelector('.field-err');if(!e){e=document.createElement('div');e.className='field-err';f.appendChild(e);}e.textContent=msg;el.classList.add('has-err');el.focus();}
function kfClear(fm){var a=fm.querySelectorAll('.field-err');for(var i=0;i<a.length;i++){a[i].textContent='';}var b=fm.querySelectorAll('.has-err');for(var j=0;j<b.length;j++){b[j].classList.remove('has-err');}}
leadForm.addEventListener('submit',function(e){
  e.preventDefault();
  var name=leadForm.querySelector('[name=name]'),phone=leadForm.querySelector('[name=phone]');
  kfClear(leadForm);
if(!name.value.trim()){kfErr(name,'Укажите, как к вам обращаться');return}
  var kfRaw=phone.value.trim();
if(kfRaw.replace(/\D/g,'').length<10&&kfRaw.length<4){kfErr(phone,'Укажите телефон или @ник в Telegram');return}
  leadForm.style.display='none';
  document.getElementById('formDone').style.display='block';
});
</script>

rec1650788061 — /photographers, Дмитрий, поле descr (182 симв.)

<div style="font-size: 22px;" data-customstyle="yes"><span style="color: rgb(109, 93, 251);">Фотограф</span><br /><span style="color: rgb(109, 93, 251);">KORS production</span></div>

rec1651109421 — /photographers, Евгений, поле descr (182 симв.)

<div style="font-size: 22px;" data-customstyle="yes"><span style="color: rgb(109, 93, 251);">Фотограф</span><br /><span style="color: rgb(109, 93, 251);">KORS production</span></div>

rec1645657721 — /photographers, Денис, поле descr (182 симв.)

<div style="font-size: 22px;" data-customstyle="yes"><span style="color: rgb(109, 93, 251);">Фотограф</span><br /><span style="color: rgb(109, 93, 251);">KORS production</span></div>

rec3188192801 — сквозной подвал: триггеры и CSS попапа аудита (15693 симв.)

<!-- ===== KORS · ПОПАП «РАЗБОР МАТЕРИАЛОВ» · оформление + триггеры (попап rec3187170901) ===== -->
<a href="#popup:razbor" class="krz-open" aria-hidden="true" tabindex="-1" style="display:none!important"></a>

<style>
/* ---------- контейнер и сетка: одна колонка по умолчанию, две на широком экране ---------- */
#rec3187170901 .t-popup__container{max-width:900px!important;width:calc(100% - 40px)!important;background:#111114!important;border:1px solid #2A2A2E!important;border-radius:20px!important;padding:44px 44px 38px!important;}
#rec3187170901 .t702__wrapper{display:grid!important;grid-template-columns:1fr;grid-template-rows:auto auto auto;row-gap:20px;align-items:start;}
#rec3187170901 .t702__text-wrapper{grid-column:1;grid-row:1;text-align:left!important;}
#rec3187170901 .t-form{grid-column:1;grid-row:2;}
#rec3187170901 .t702__form-bottom-text{grid-column:1;grid-row:3;text-align:left!important;margin:0!important;}
/* две колонки, когда есть место: текст слева, форма справа */
@media screen and (min-width:861px){
#rec3187170901 .t702__wrapper{grid-template-columns:.92fr 1.08fr;grid-template-rows:auto auto;column-gap:44px;row-gap:14px;}
#rec3187170901 .t702__text-wrapper{grid-column:1;grid-row:1 / span 2;align-self:center;}
#rec3187170901 .t-form{grid-column:2;grid-row:1;}
#rec3187170901 .t702__form-bottom-text{grid-column:2;grid-row:2;}
}

/* ---------- заголовок (надзаголовок убран: заголовок сам про бесплатный аудит) ---------- */
#rec3187170901 .t702__title{font-family:'Unbounded',sans-serif!important;font-weight:700!important;font-size:clamp(20px,1.7vw,27px)!important;line-height:1.26!important;color:#F5F3EF!important;margin:0 0 10px!important;}
#rec3187170901 .t702__title:before{content:none!important;display:none!important;}

/* ---------- одна строка под заголовком ---------- */
#rec3187170901 .t702__descr{font-family:'Manrope',Arial,sans-serif!important;font-size:15px!important;line-height:1.6!important;color:#9A9A9A!important;margin:0!important;}
#rec3187170901 .t702__descr p{margin:0;}
#rec3187170901 .t702__descr b,#rec3187170901 .t702__descr strong{color:#F5F3EF;font-weight:600;}

/* ---------- форма ---------- */
#rec3187170901 .t-form__inputsbox{margin:0!important;}
#rec3187170901 .t-input-group{margin-bottom:14px!important;padding:0!important;}
#rec3187170901 .t-input-title{font-family:'Manrope',Arial,sans-serif!important;font-size:13px!important;font-weight:500!important;color:#9A9A9A!important;margin-bottom:7px!important;text-align:left!important;}
#rec3187170901 .t-input{background:#17171A!important;border:1px solid #2A2A2E!important;border-radius:10px!important;color:#F5F3EF!important;font-family:'Manrope',Arial,sans-serif!important;font-size:15px!important;height:50px!important;padding:0 16px!important;box-shadow:none!important;}
#rec3187170901 textarea.t-input{height:auto!important;min-height:94px!important;padding:14px 16px!important;resize:vertical;}
#rec3187170901 .t-input:focus{border-color:#6D5DFB!important;outline:none!important;}
#rec3187170901 .t-input::placeholder{color:#66645F!important;}
#rec3187170901 .t-submit{background:#6D5DFB!important;color:#fff!important;border:none!important;border-radius:10px!important;height:54px!important;width:100%!important;font-family:'Manrope',Arial,sans-serif!important;font-size:16px!important;font-weight:600!important;transition:background .2s;}
#rec3187170901 .t-submit:hover{background:#8A7BFF!important;}
#rec3187170901 .t702__form-bottom-text{font-family:'Manrope',Arial,sans-serif!important;font-size:12px!important;line-height:1.6!important;color:#66645F!important;}
#rec3187170901 .t702__form-bottom-text a{color:#9A8CFF!important;}
#rec3187170901 .t-popup__close-wrapper rect{fill:#F5F3EF!important;}

/* ---------- попап на мобильном ---------- */
@media screen and (max-width:640px){
#rec3187170901 .t-popup__container{padding:52px 18px 26px!important;border-radius:16px!important;width:calc(100% - 20px)!important;}
#rec3187170901 .t702__wrapper{row-gap:18px;}
#rec3187170901 .t702__title{font-size:21px!important;margin:0 0 8px!important;padding-top:2px!important;}
#rec3187170901 .t702__descr{font-size:14px!important;line-height:1.55!important;}
}

/* ---------- COOKIE-БАННЕР: сдвиг от виджета мессенджеров на мобильном ---------- */
@media screen and (max-width:640px){
  html body #rec3177014801 .t972:not(.t972_widgetview){left:12px!important;right:12px!important;width:auto!important;bottom:84px!important;border-radius:16px!important;max-height:calc(100vh - 96px)!important;overflow-y:auto!important;}
  html body #rec3177014801 .t972__settings{height:auto!important;max-height:calc(100vh - 96px)!important;}
  html body #rec3177014801 .t972__settings-body{height:auto!important;flex:0 1 auto!important;}
}

/* ---------- COOKIE-БАННЕР: ссылка на политику в акцентном цвете ---------- */
html body #rec3177014801 .t972__text a{color:#6D5DFB!important;text-decoration:underline!important;text-underline-offset:2px!important;}
html body #rec3177014801 .t972__text a:hover{opacity:.8!important;}

/* ---------- COOKIE-БАННЕР: кнопка "Сохранить настройки" на всю ширину на мобильном ---------- */
@media screen and (max-width:640px){
  html body #rec3177014801 .t972__settings-footer{width:100%!important;}
  html body #rec3177014801 .t972__confirm-btn{width:100%!important;max-width:100%!important;display:block!important;}
  html body #rec3177014801 .t972__confirm-btn .t-btnflex__text{width:100%!important;}
}
/* ---------- COOKIE-БАННЕР: компактный вид (CSS-переопределение, настройки блока T972 не тронуты) ---------- */
/* ширина панели только на десктопе, чтобы не спорить с мобильным правилом выше */
@media screen and (min-width:641px){
  html body #rec3177014801 .t972:not(.t972_widgetview){width:420px!important;max-width:calc(100vw - 40px)!important;}
}
/* сама панель: полупрозрачный тёмный фон с размытием, тонкая светлая рамка, радиус 12px */
html body #rec3177014801 .t972__banner{background:rgba(14,14,17,.82)!important;-webkit-backdrop-filter:blur(14px) saturate(120%)!important;backdrop-filter:blur(14px) saturate(120%)!important;border:1px solid rgba(245,243,239,.12)!important;border-radius:12px!important;padding:14px 16px 14px!important;box-shadow:0 16px 40px rgba(0,0,0,.45)!important;}
/* заголовок в свёрнутом виде скрыт, в окне «Настроить» он остаётся */
html body #rec3177014801 .t972__banner .t972__title{display:none!important;}
/* короткий текст */
html body #rec3177014801 .t972__banner .t972__text{font-size:12px!important;line-height:1.5!important;margin:0 0 12px!important;color:#C9C7C2!important;}
/* компактные кнопки */
html body #rec3177014801 .t972__banner .t972__buttons{margin:0!important;}
html body #rec3177014801 .t972__banner .t972__buttons-wrap{gap:8px!important;}
html body #rec3177014801 .t972__banner .t-btnflex{font-size:11px!important;line-height:1.1!important;height:auto!important;min-height:0!important;padding:9px 13px!important;border-radius:7px!important;}
html body #rec3177014801 .t972__banner .t-btnflex .t-btnflex__text{font-size:11px!important;line-height:1.1!important;}
html body #rec3177014801 .t972__banner .t972__settings-btn{font-size:11px!important;}
html body #rec3177014801 .t972__banner .t972__settings-btn .t-btntext__text{font-size:11px!important;}
/* полный текст, перенесённый в окно «Настроить» */
html body #rec3177014801 .t972__settings .kors-c-full{margin-top:10px;}
html body #rec3177014801 .t972__settings a{color:#6D5DFB!important;text-decoration:underline!important;text-underline-offset:2px!important;}
/* «Настроить» выравниваем по левому краю кнопок */
html body #rec3177014801 .t972__banner .t972__settings-btn{margin-left:0!important;}
/* окно «Настроить» в том же стиле, что компактная панель */
html body #rec3177014801 .t972__settings{background:rgba(14,14,17,.9)!important;-webkit-backdrop-filter:blur(14px) saturate(120%)!important;backdrop-filter:blur(14px) saturate(120%)!important;border:1px solid rgba(245,243,239,.12)!important;border-radius:12px!important;}

/* ---------- ЮРИДИЧЕСКИЕ СТРАНИЦЫ (.kdoc на /policy и /user-agreement): контент во всю ширину на мобильном, без горизонтального выезда ---------- */
@media screen and (max-width:640px){
  html body .kdoc{width:100%!important;max-width:100%!important;box-sizing:border-box!important;padding-left:16px!important;padding-right:16px!important;margin-left:0!important;margin-right:0!important;}
  html body .kdoc,html body .kdoc *{overflow-wrap:anywhere!important;word-break:break-word!important;}
  html body .kdoc img,html body .kdoc pre{max-width:100%!important;height:auto!important;}
  html body .kdoc table{display:block!important;width:100%!important;max-width:100%!important;overflow-x:auto!important;}
}
/* прелоадер строго по центру экрана */
html body .kload{left:0!important;right:0!important;width:100%!important;max-width:100%!important;}
</style>

<script>
(function(){
  var REC = "3187170901";           /* блок попапа BF502N */
  var COOKIE_REC = "3177014801";    /* блок cookie-баннера T972 */
  var SKEY = "kors_razbor_shown";   /* показан в этой сессии */
  var LKEY = "kors_lead_sent";      /* заявка уже отправлена */
  var done = false, pending = false;

  function ss(k, v){ try{ if(v === undefined) return sessionStorage.getItem(k); sessionStorage.setItem(k, v); }catch(e){} return null; }
  function ls(k, v){ try{ if(v === undefined) return localStorage.getItem(k); localStorage.setItem(k, v); }catch(e){} return null; }

  var isMobile = (window.innerWidth <= 640) || /Android|iPhone|iPad|iPod|Mobi/i.test(navigator.userAgent);
  var path = location.pathname.replace(/\/+$/, "");
  var isThanks = (path === "/spasibo" || path === "/thanks");
  /* юридические страницы: попап не показываем, LKEY при этом не ставим */
  var isLegal = (path === "/policy" || path === "/user-agreement");
  if(isThanks) ls(LKEY, "1");

  /* запоминаем, что посетитель уже отправил заявку */
  document.addEventListener("submit", function(e){
    var t = e.target;
    if(t && t.classList && t.classList.contains("t-form")) ls(LKEY, "1");
  }, true);

  /* виден ли cookie-баннер */
  function bannerVisible(){
    if(document.cookie.indexOf("t_cookiesConsentGiven") === -1) return true;
    var rec = document.getElementById("rec" + COOKIE_REC);
    if(!rec) return false;
    var box = rec.querySelector(".t972") || rec;
    var cs = window.getComputedStyle(box);
    if(cs.display === "none" || cs.visibility === "hidden") return false;
    return box.getBoundingClientRect().height > 0;
  }
  /* открыт ли другой попап или посетитель уже в форме */
  function somethingOpen(){
    if(document.body.classList.contains("t-body_popupshowed")) return true;
    if(document.querySelector(".t-popup.t-popup_show")) return true;
    var a = document.activeElement;
    if(a && a.classList && a.classList.contains("t-input")) return true;
    return false;
  }
  /* KORS · защита от ложного показа: якорный прыжок и блок калькулятора · 01.09.2026 */
  var KRZG = (function(){
    var jumpUntil = 0, real = 0, wanted = false;
    function cy(){ return window.pageYOffset || document.documentElement.scrollTop || 0; }
    var prevY = cy();
    window.addEventListener('scroll', function(){
      var c = cy(), d = Math.abs(c - prevY); prevY = c;
      if(d > 400){ jumpUntil = Date.now() + 2000; return; }
      real += d;
    }, true);
    document.addEventListener('click', function(e){
      var a = (e.target && e.target.closest) ? e.target.closest('a[href*="#"]') : null;
      if(a) jumpUntil = Date.now() + 2500;
    }, true);
    window.addEventListener('hashchange', function(){ jumpUntil = Date.now() + 2500; });
    function inCalc(){
      var c = document.getElementById('rec2619108701');
      if(!c) return false;
      var r = c.getBoundingClientRect();
      return r.bottom > 0 && r.top < (window.innerHeight || 0);
    }
    setInterval(function(){
      if(!wanted) return;
      if(Date.now() < jumpUntil || inCalc()) return;
      wanted = false;
      try { request(); } catch(err){}
    }, 1500);
    return {
      hold: function(){
        var b = (Date.now() < jumpUntil) || inCalc();
        if(b) wanted = true;
        return b;
      },
      scrolled: function(){ return real >= 600; }
    };
  })();

  function allowed(){
    if(done || isThanks || isLegal) return false;
    if(ls(LKEY) === "1") return false;
    if(ss(SKEY) === "1") return false;
    if(bannerVisible()) return false;
    if(somethingOpen()) return false;
    if(KRZG.hold()) return false;
    return true;
  }
  function show(){
    if(!allowed()) return;
    done = true;
    ss(SKEY, "1");
    var a = document.querySelector("a.krz-open");
    if(a){ a.click(); }
    else if(typeof window.t702_showPopup === "function"){ window.t702_showPopup(REC); }
    cleanup();
  }
  function request(){ pending = true; show(); }

  /* 1) время на странице: 45 сек, на мобильном 60 сек */
  var timer = setTimeout(request, isMobile ? 60000 : 45000);

  /* 2) прокрутка 45% */
  function onScroll(){
    if(!KRZG.scrolled()) return;
    var doc = document.documentElement;
    var h = (doc.scrollHeight || 0) - window.innerHeight;
    if(h <= 0) return;
    var y = window.pageYOffset || doc.scrollTop || 0;
    if((y / h) >= 0.45) request();
  }
  window.addEventListener("scroll", onScroll, {passive:true});

  /* 3) exit-intent, только десктоп */
  function onOut(e){
    if(isMobile) return;
    if(e.clientY <= 0 && !e.relatedTarget && !e.toElement) request();
  }
  if(!isMobile) document.addEventListener("mouseout", onOut, false);

  /* если триггер сработал, но был виден cookie-баннер, пробуем снова */
  var retry = setInterval(function(){ if(pending) show(); }, 1500);

  function cleanup(){
    clearTimeout(timer);
    clearInterval(retry);
    window.removeEventListener("scroll", onScroll);
    document.removeEventListener("mouseout", onOut, false);
  }
})();
</script>

<!-- ===== KORS · COOKIE-БАННЕР: компактный текст в свёрнутом виде, полный текст переносим в окно «Настроить» ===== -->
<script>
(function(){
  var REC = "3177014801";
  var SHORT = "Мы используем cookie для работы сайта и аналитики. ";
  var LINKTEXT = "Политика";
  var tries = 0;

  function compact(){
    var root = document.getElementById("rec" + REC);
    if(!root){ return false; }
    var banner = root.querySelector(".t972__banner");
    if(!banner){ return false; }
    var textEl = banner.querySelector(".t972__text");
    if(!textEl){ return false; }
    if(textEl.getAttribute("data-kors-compact") === "1"){ return true; }

    var link = textEl.querySelector("a");
    var href = link ? (link.getAttribute("href") || "/policy") : "/policy";

    /* полный текст остаётся в окне «Настроить» */
    var box = root.querySelector(".t972__settings .t972__settings-text");
    if(box && !box.querySelector(".kors-c-full")){
      var full = document.createElement("div");
      full.className = "kors-c-full";
      full.innerHTML = textEl.innerHTML;
      box.appendChild(full);
    }

    /* короткий текст в свёрнутом баннере */
    textEl.textContent = SHORT;
    var a = document.createElement("a");
    a.setAttribute("href", href);
    a.textContent = LINKTEXT;
    textEl.appendChild(a);
    textEl.setAttribute("data-kors-compact", "1");

    /* «Принять все» -> «Принять» */
    var acc = banner.querySelector(".t972__accept-btn .t-btnflex__text");
    if(acc){ acc.textContent = "Принять"; }
    return true;
  }

  function tick(){
    var ok = false;
    try{ ok = compact(); }catch(e){}
    tries++;
    if(!ok && tries < 60){ setTimeout(tick, 250); }
  }
  if(document.readyState === "loading"){ document.addEventListener("DOMContentLoaded", tick); } else { tick(); }
})();
</script>

BACKUP rec2663286001 · главная · до замены h1 на div · 01.09.2026 · 15085 симв.
<!-- ===== KORS HERO · МОБИЛКА · блок T123 (HTML-код). Показывать ТОЛЬКО на телефоне. ===== -->
<div class="khm">
<div class="khm__vid"><iframe class="khm__kv" src="https://kinescope.io/embed/jC3unVq9iM2iw4GoQFMiyA?autoplay=true&muted=true&loop=true&controls=false&playsInline=true&background=true" allow="autoplay; fullscreen; encrypted-media; picture-in-picture" frameborder="0"></iframe></div>
<div class="khm__shade" aria-hidden="true"></div>
<div class="khm__dim"></div>
<div class="khm__in">
<!-- верхняя строка: REC с таймером слева, студия справа -->
<div class="khm__corners">
<div class="khm__corner khm__corner--l"><span class="khm__reccombo"><span class="khm__recdot" aria-hidden="true"></span><b class="khm__rectxt">REC</b><span class="khm__tm">00:00:00</span></span></div>
<div class="khm__corner khm__corner--r"><span class="khm__ctext">СТУДИЯ ДЛЯ ПРОИЗВОДСТВЕННЫХ КОМПАНИЙ</span></div>
</div>
<!-- заголовок: четыре строки, кегль подбирается скриптом под ширину -->
<h1 class="khm__headline">
<span class="khm__hl1 fit" data-max="18" data-pad="26">Показываем производство и компании</span>
<span class="khm__hl2 fit" data-max="27">через создание</span>
<span class="khm__hl2 khm__hl-accent fit" data-max="27">видео, сайта, презентаций</span>
<span class="khm__hl2 fit" data-max="27">и других материалов.</span>
</h1>
<p class="khm__lead">Можно начать с одной задачи или собрать всё необходимое к выставке, экспорту или запуску продукта.</p>
<div class="khm__geo fit" data-max="8.5" data-min="6">ОФИС В МОСКВЕ · РАБОТАЕМ ПО ВСЕЙ РОССИИ С 2019 ГОДА</div>
<div class="khm__btns"><a class="khm__btn khm__btn--p" href="#rec2619108701">Открыть калькулятор цен</a></div>
<div class="khm__pills"><a class="pill" href="https://t.me/korsprodsale" target="_blank" rel="noopener"><i></i>Telegram</a><a class="pill" href="https://max.ru/u/f9LHodD0cOJry8jfuI2u_X2FJWCLMC5S4I3JfDhcBC6iBjNcaUyKtbZ9Bto" target="_blank" rel="noopener"><i></i>MAX</a><a class="pill" href="https://wa.me/79158677996" target="_blank" rel="noopener"><i></i>WhatsApp</a><a class="pill" href="tel:+79158677996"><i></i>Позвонить</a></div>
</div>
<!-- блок 460+ и «нам доверяют» стоят вплотную и читаются как один нижний блок -->
<div class="khm__bottom">
<div class="khm__proof-panel">
<div class="khm__proof-main"><strong>460+</strong><span>проектов</span></div>
<div class="khm__proof-points">
<span><i></i>Снимаем на действующих производствах</span>
<span><i></i>Клиенты возвращаются со следующими задачами</span>
<span><i></i>Смета и дата сдачи фиксируются до старта</span>
</div>
</div>
<div class="khm__mq"><span class="lab">НАМ ДОВЕРЯЮТ</span><div class="track"><div class="mqt"></div></div></div>
</div>
<div class="khm__sheet"></div>
</div>
<style>
@media (min-width:481px){.khm{display:none}}
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Unbounded:wght@400;600;700;800&display=swap');
.khm{--bg:#0C0C0E;--card:#1B1B1F;--border:#2A2A2E;--text:#F5F3EF;--muted:#9A9A9A;--faint:#6a6a6e;--accent:#6D5DFB;--poster:url('https://static.tildacdn.com/tild6363-6535-4664-b332-386263663637/poster-home-mob.jpg');
position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:0;text-align:center;background:var(--bg)}
.khm *{box-sizing:border-box;margin:0;padding:0}
.khm a[href^="tel:"]{color:var(--muted)!important}
.khm__vid{position:absolute;inset:0;overflow:hidden;background:var(--poster) center/cover;z-index:0}
.khm__kv{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);min-width:100%;min-height:100%;width:auto;height:auto;aspect-ratio:16/9;border:none;pointer-events:none}
.khm__shade{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(12,12,14,.55) 0%,rgba(12,12,14,.7) 55%,rgba(12,12,14,.92) 100%)}
.khm__dim{position:absolute;inset:0;z-index:1;background:radial-gradient(700px 420px at 50% 6%,rgba(109,93,251,.12),transparent 60%),linear-gradient(180deg,rgba(10,10,12,.72),rgba(10,10,12,.92))}
.khm__in{position:relative;z-index:3;width:100%;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;align-items:center;padding:calc(24px + env(safe-area-inset-top)) 20px calc(24px + env(safe-area-inset-bottom))}
.khm__corners{width:100%;display:flex;flex-direction:row;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:0}
.khm__geo{width:100%;max-width:360px;font-family:'Unbounded',sans-serif;font-size:8.5px;letter-spacing:.05em;line-height:1.45;color:#8b8996;text-transform:uppercase;text-align:center;white-space:nowrap;margin:auto 0 13px;padding-top:22px}
.khm__corner{font-family:'Unbounded',sans-serif;font-size:clamp(8.5px,2.3vw,10px);letter-spacing:.05em;line-height:1.45;color:#c9c7d6;text-transform:uppercase;display:flex;align-items:center;gap:7px}
.khm__corner--l{flex:0 0 auto;justify-content:flex-start;text-align:left;white-space:nowrap}
.khm__corner--r{flex:0 1 auto;max-width:160px;justify-content:flex-end;text-align:right;white-space:normal}
.khm__reccombo{display:inline-flex;align-items:center;gap:6px;color:#F5F3EF}
.khm__recdot{width:7px;height:7px;border-radius:50%;background:#FF5252;box-shadow:0 0 10px rgba(255,82,82,.65);animation:khmPulse 1.8s ease-in-out infinite}
.khm__rectxt{font-weight:700;letter-spacing:.12em}
.khm__tm{font-variant-numeric:tabular-nums;color:#c9c7d6;font-weight:600}
.khm__cdiv{width:1px;height:10px;background:rgba(255,255,255,.2)}
@keyframes khmPulse{0%,100%{opacity:1}50%{opacity:.32}}
@media(prefers-reduced-motion:reduce){.khm__recdot{animation:none}}
.khm__headline{width:100%;margin-top:auto;display:flex;flex-direction:column;align-items:center;text-align:center;text-shadow:0 2px 20px rgba(0,0,0,.6)}
.khm__hl1{display:inline-block;max-width:100%;white-space:nowrap;font-family:'Manrope',Arial,sans-serif;font-weight:700;font-size:15px;letter-spacing:.02em;line-height:1.2;text-transform:uppercase;color:#efeee9;background:rgba(109,93,251,.15);border:1px solid rgba(109,93,251,.4);border-radius:999px;padding:9px 12px;margin-bottom:15px}
.khm__hl2{display:block;white-space:nowrap;font-family:'Unbounded',sans-serif;font-weight:800;font-size:27px;letter-spacing:-.03em;line-height:1.16;color:#efeee9;margin-bottom:3px}
.khm__hl2:last-child{margin-bottom:0}
.khm__hl-accent{color:#a99dff}
.khm__lead{width:100%;max-width:360px;margin-top:16px;color:#c4c2be;font:500 13px/1.55 'Manrope',Arial,sans-serif;text-align:center;text-wrap:balance;text-shadow:0 2px 18px rgba(0,0,0,.56)}
.khm__btns{width:100%;max-width:360px;display:flex;flex-direction:column;gap:10px;margin-top:0;padding-top:0}
.khm__btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:17px;border-radius:12px;font:700 15px/1 'Manrope',Arial,sans-serif;text-decoration:none;border:none;cursor:pointer}
.khm__btn--p{background:var(--accent);color:#fff;box-shadow:0 10px 26px rgba(109,93,251,.3)}
.khm__pills{width:100%;max-width:360px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:14px}
.khm__pills .pill{display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:9px 10px;border:1px solid var(--border);border-radius:9px;color:var(--muted);font:600 13px/1 'Manrope',Arial,sans-serif;text-decoration:none;background:rgba(20,20,22,.42)}
.khm__pills .pill i{width:6px;height:6px;border-radius:50%;background:var(--accent);flex:none}
.khm__bottom{position:relative;width:100%;z-index:4;display:flex;flex-direction:column;align-items:center}
.khm__proof-panel{width:calc(100% - 24px);max-width:400px;margin:0 auto;border:1px solid rgba(255,255,255,.12);border-bottom:none;border-radius:14px 14px 0 0;background:linear-gradient(180deg,rgba(21,21,25,.9),rgba(10,10,13,.82));box-shadow:0 18px 44px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.04);overflow:hidden;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.khm__proof-main{display:flex;align-items:center;justify-content:center;gap:12px;padding:16px 18px;background:linear-gradient(135deg,rgba(109,93,251,.25),rgba(109,93,251,.06));border-bottom:1px solid rgba(255,255,255,.1)}
.khm__proof-main strong{font-family:'Unbounded',sans-serif;font-size:40px;line-height:1;font-weight:800;color:#fff;letter-spacing:-.04em}
.khm__proof-main span{max-width:130px;text-align:left;color:#c7c3e2;font:700 11px/1.35 'Manrope',Arial,sans-serif;letter-spacing:.08em;text-transform:uppercase}
.khm__proof-points{display:grid;grid-template-columns:1fr}
.khm__proof-points span{display:flex;align-items:center;gap:11px;min-height:48px;padding:12px 16px;color:#d7d5d0;font:600 12px/1.4 'Manrope',Arial,sans-serif;text-align:left;border-bottom:1px solid rgba(255,255,255,.07)}
.khm__proof-points span:last-child{border-bottom:0}
.khm__proof-points i{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 12px rgba(109,93,251,.65);flex:none}
.khm__offer-chips{width:100%;max-width:400px;display:grid;grid-template-columns:1fr;gap:10px;margin-top:22px}
.khm__offer-chips span{min-height:52px;display:flex;align-items:center;justify-content:center;gap:10px;padding:12px 14px;border:1px solid rgba(109,93,251,.5);border-radius:12px;background:linear-gradient(180deg,rgba(109,93,251,.2),rgba(18,18,22,.78));box-shadow:inset 0 1px 0 rgba(255,255,255,.06);color:#F5F3EF;font:700 14px/1.3 'Manrope',Arial,sans-serif;text-align:center;opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
.khm__offer-chips span.khm-in{opacity:1;transform:none}
.khm__offer-chips span:nth-child(1){transition-delay:.05s}
.khm__offer-chips span:nth-child(2){transition-delay:.14s}
.khm__offer-chips span:nth-child(3){transition-delay:.23s}
.khm__offer-chips i{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 13px rgba(109,93,251,.72);flex:none}
@media(prefers-reduced-motion:reduce){.khm__offer-chips span{transition:none;opacity:1;transform:none}}
/* контактная шторка не используется: без своего CSS она занимала 113px пустоты под логотипами */
.khm__sheet{display:none}
.khm__sheet.open{display:block}
.khm__mq{position:relative;width:100%;z-index:4;overflow:hidden;height:48px;display:flex;align-items:center;border-top:1px solid rgba(255,255,255,.08);background:rgba(8,8,10,.6)}
.khm__mq .lab{flex:none;font-family:'Unbounded',sans-serif;font-size:9.5px;letter-spacing:.1em;color:var(--faint);padding:0 12px;height:100%;display:flex;align-items:center;background:rgba(8,8,10,.92);z-index:2}
.khm__mq .track{position:relative;flex:1;overflow:hidden;height:100%;-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}
.khm__mq .mqt{position:absolute;top:50%;transform:translateY(-50%);display:flex;gap:30px;width:max-content;animation:khmMq 24s linear infinite}
.khm__mq .mqt b{font-family:'Unbounded',sans-serif;font-size:14px;color:#9a9893;font-weight:600;white-space:nowrap}
@keyframes khmMq{to{transform:translate(-50%,-50%)}}
@media(max-width:360px){.khm__in{padding-left:14px;padding-right:14px}.khm__offer-chips span{font-size:13px}}
</style>
<script>
(function(){
var wrap=document.querySelector('.khm'); if(!wrap) return;
function fmt(s){function p(n){return (n<10?'0':'')+n;}var h=Math.floor(s/3600),m=Math.floor(s%3600/60),x=s%60;return p(h)+':'+p(m)+':'+p(x);}
var t0=Date.now();
function tick(){var s=Math.floor((Date.now()-t0)/1000);wrap.querySelectorAll('.khm__tm').forEach(function(el){el.textContent=fmt(s);});}
tick(); setInterval(tick,1000);
var words=['сайты','видео','презентации','фотосъёмку','фирменный стиль'];
wrap.querySelectorAll('.khm__rot').forEach(function(el){var i=0;setInterval(function(){i=(i+1)%words.length;el.style.opacity='0';el.style.transform='translateY(8px)';setTimeout(function(){el.textContent=words[i];el.style.opacity='1';el.style.transform='translateY(0)';},200);},1500);});
var logos=['Одоевские консервы','InvoiceBox','Вистекс','Водоходъ','ALFA-BANK','Wildberries','Яндекс Драйв','ЭКСМО','Rumi'];
wrap.querySelectorAll('.khm__mq .mqt').forEach(function(t){var h=logos.map(function(l){return '<b>'+l+'</b>';}).join('');t.innerHTML=h+h;});
var sheetHTML='<div class="khsheet-bd khm-close"></div><div class="khsheet-card">'
+'<div class="khsheet-h"><b>Связаться сразу</b><button class="khsheet-x khm-close">×</button></div>'
+'<a class="khci main" href="#popup:zayavka"><span class="ic">→</span><span class="tx"><b>Оставить заявку</b><span>ответим и предложим формат работы</span></span></a>'
+'<a class="khci" href="tel:+79158677996"><span class="ic">тел</span><span class="tx"><b>Позвонить</b><span>+7 915 867-79-96</span></span></a>'
+'<a class="khci" href="https://wa.me/79158677996" target="_blank" rel="noopener"><span class="ic">WA</span><span class="tx"><b>WhatsApp</b><span>написать в мессенджер</span></span></a>'
+'<a class="khci" href="https://t.me/korsprodsale" target="_blank" rel="noopener"><span class="ic">TG</span><span class="tx"><b>Telegram</b><span>@korsprodsale</span></span></a>'
+'<a class="khci" href="https://max.ru/u/f9LHodD0cOJry8jfuI2u_X2FJWCLMC5S4I3JfDhcBC6iBjNcaUyKtbZ9Bto" target="_blank" rel="noopener"><span class="ic">MAX</span><span class="tx"><b>MAX</b><span>мессенджер MAX</span></span></a>'
+'<a class="khci" href="mailto:info@korsprod.ru"><span class="ic">@</span><span class="tx"><b>Почта</b><span>info@korsprod.ru</span></span></a>'
+'</div>';
wrap.querySelectorAll('.khm__sheet').forEach(function(s){s.innerHTML=sheetHTML;});
wrap.querySelectorAll('.khm-open').forEach(function(b){b.addEventListener('click',function(e){e.preventDefault();var sh=wrap.querySelector('.khm__sheet');if(sh)sh.classList.add('open');});});
wrap.addEventListener('click',function(e){if(e.target.classList.contains('khm-close')){var sh=wrap.querySelector('.khm__sheet');if(sh)sh.classList.remove('open');}});
var chips=wrap.querySelectorAll('.khm__offer-chips span');
requestAnimationFrame(function(){requestAnimationFrame(function(){chips.forEach(function(c){c.classList.add('khm-in');});});});

/* автоподгонка кеглей заголовка: строки всегда встают по ширине контейнера */
function khmFit(el){
var max=parseFloat(el.getAttribute('data-max'))||24;
var min=parseFloat(el.getAttribute('data-min'))||9;
var pad=parseFloat(el.getAttribute('data-pad'))||0;
var ps=window.getComputedStyle(el.parentElement);
var avail=el.parentElement.clientWidth-parseFloat(ps.paddingLeft)-parseFloat(ps.paddingRight)-pad;
if(avail<=0) return;
var s=max,guard=0;
el.style.fontSize=s+'px';
function width(){var r=document.createRange();r.selectNodeContents(el);return r.getBoundingClientRect().width;}
while(width()>avail && s>min && guard<200){s-=0.5;el.style.fontSize=s+'px';guard++;}
}
function khmFitAll(){wrap.querySelectorAll('.fit').forEach(function(el){khmFit(el);});}
khmFitAll();
if(document.fonts && document.fonts.ready){document.fonts.ready.then(khmFitAll);}else{window.addEventListener('load',khmFitAll);}
window.addEventListener('resize',khmFitAll);
window.addEventListener('orientationchange',khmFitAll);
setTimeout(khmFitAll,1200);
})();
</script>

BACKUP rec2663286001 · главная · до замены h1 на div · 01.09.2026 · 15085 симв.
<!-- ===== KORS HERO · МОБИЛКА · блок T123 (HTML-код). Показывать ТОЛЬКО на телефоне. ===== -->
<div class="khm">
<div class="khm__vid"><iframe class="khm__kv" src="https://kinescope.io/embed/jC3unVq9iM2iw4GoQFMiyA?autoplay=true&muted=true&loop=true&controls=false&playsInline=true&background=true" allow="autoplay; fullscreen; encrypted-media; picture-in-picture" frameborder="0"></iframe></div>
<div class="khm__shade" aria-hidden="true"></div>
<div class="khm__dim"></div>
<div class="khm__in">
<!-- верхняя строка: REC с таймером слева, студия справа -->
<div class="khm__corners">
<div class="khm__corner khm__corner--l"><span class="khm__reccombo"><span class="khm__recdot" aria-hidden="true"></span><b class="khm__rectxt">REC</b><span class="khm__tm">00:00:00</span></span></div>
<div class="khm__corner khm__corner--r"><span class="khm__ctext">СТУДИЯ ДЛЯ ПРОИЗВОДСТВЕННЫХ КОМПАНИЙ</span></div>
</div>
<!-- заголовок: четыре строки, кегль подбирается скриптом под ширину -->
<h1 class="khm__headline">
<span class="khm__hl1 fit" data-max="18" data-pad="26">Показываем производство и компании</span>
<span class="khm__hl2 fit" data-max="27">через создание</span>
<span class="khm__hl2 khm__hl-accent fit" data-max="27">видео, сайта, презентаций</span>
<span class="khm__hl2 fit" data-max="27">и других материалов.</span>
</h1>
<p class="khm__lead">Можно начать с одной задачи или собрать всё необходимое к выставке, экспорту или запуску продукта.</p>
<div class="khm__geo fit" data-max="8.5" data-min="6">ОФИС В МОСКВЕ · РАБОТАЕМ ПО ВСЕЙ РОССИИ С 2019 ГОДА</div>
<div class="khm__btns"><a class="khm__btn khm__btn--p" href="#rec2619108701">Открыть калькулятор цен</a></div>
<div class="khm__pills"><a class="pill" href="https://t.me/korsprodsale" target="_blank" rel="noopener"><i></i>Telegram</a><a class="pill" href="https://max.ru/u/f9LHodD0cOJry8jfuI2u_X2FJWCLMC5S4I3JfDhcBC6iBjNcaUyKtbZ9Bto" target="_blank" rel="noopener"><i></i>MAX</a><a class="pill" href="https://wa.me/79158677996" target="_blank" rel="noopener"><i></i>WhatsApp</a><a class="pill" href="tel:+79158677996"><i></i>Позвонить</a></div>
</div>
<!-- блок 460+ и «нам доверяют» стоят вплотную и читаются как один нижний блок -->
<div class="khm__bottom">
<div class="khm__proof-panel">
<div class="khm__proof-main"><strong>460+</strong><span>проектов</span></div>
<div class="khm__proof-points">
<span><i></i>Снимаем на действующих производствах</span>
<span><i></i>Клиенты возвращаются со следующими задачами</span>
<span><i></i>Смета и дата сдачи фиксируются до старта</span>
</div>
</div>
<div class="khm__mq"><span class="lab">НАМ ДОВЕРЯЮТ</span><div class="track"><div class="mqt"></div></div></div>
</div>
<div class="khm__sheet"></div>
</div>
<style>
@media (min-width:481px){.khm{display:none}}
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Unbounded:wght@400;600;700;800&display=swap');
.khm{--bg:#0C0C0E;--card:#1B1B1F;--border:#2A2A2E;--text:#F5F3EF;--muted:#9A9A9A;--faint:#6a6a6e;--accent:#6D5DFB;--poster:url('https://static.tildacdn.com/tild6363-6535-4664-b332-386263663637/poster-home-mob.jpg');
position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:0;text-align:center;background:var(--bg)}
.khm *{box-sizing:border-box;margin:0;padding:0}
.khm a[href^="tel:"]{color:var(--muted)!important}
.khm__vid{position:absolute;inset:0;overflow:hidden;background:var(--poster) center/cover;z-index:0}
.khm__kv{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);min-width:100%;min-height:100%;width:auto;height:auto;aspect-ratio:16/9;border:none;pointer-events:none}
.khm__shade{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(12,12,14,.55) 0%,rgba(12,12,14,.7) 55%,rgba(12,12,14,.92) 100%)}
.khm__dim{position:absolute;inset:0;z-index:1;background:radial-gradient(700px 420px at 50% 6%,rgba(109,93,251,.12),transparent 60%),linear-gradient(180deg,rgba(10,10,12,.72),rgba(10,10,12,.92))}
.khm__in{position:relative;z-index:3;width:100%;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;align-items:center;padding:calc(24px + env(safe-area-inset-top)) 20px calc(24px + env(safe-area-inset-bottom))}
.khm__corners{width:100%;display:flex;flex-direction:row;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:0}
.khm__geo{width:100%;max-width:360px;font-family:'Unbounded',sans-serif;font-size:8.5px;letter-spacing:.05em;line-height:1.45;color:#8b8996;text-transform:uppercase;text-align:center;white-space:nowrap;margin:auto 0 13px;padding-top:22px}
.khm__corner{font-family:'Unbounded',sans-serif;font-size:clamp(8.5px,2.3vw,10px);letter-spacing:.05em;line-height:1.45;color:#c9c7d6;text-transform:uppercase;display:flex;align-items:center;gap:7px}
.khm__corner--l{flex:0 0 auto;justify-content:flex-start;text-align:left;white-space:nowrap}
.khm__corner--r{flex:0 1 auto;max-width:160px;justify-content:flex-end;text-align:right;white-space:normal}
.khm__reccombo{display:inline-flex;align-items:center;gap:6px;color:#F5F3EF}
.khm__recdot{width:7px;height:7px;border-radius:50%;background:#FF5252;box-shadow:0 0 10px rgba(255,82,82,.65);animation:khmPulse 1.8s ease-in-out infinite}
.khm__rectxt{font-weight:700;letter-spacing:.12em}
.khm__tm{font-variant-numeric:tabular-nums;color:#c9c7d6;font-weight:600}
.khm__cdiv{width:1px;height:10px;background:rgba(255,255,255,.2)}
@keyframes khmPulse{0%,100%{opacity:1}50%{opacity:.32}}
@media(prefers-reduced-motion:reduce){.khm__recdot{animation:none}}
.khm__headline{width:100%;margin-top:auto;display:flex;flex-direction:column;align-items:center;text-align:center;text-shadow:0 2px 20px rgba(0,0,0,.6)}
.khm__hl1{display:inline-block;max-width:100%;white-space:nowrap;font-family:'Manrope',Arial,sans-serif;font-weight:700;font-size:15px;letter-spacing:.02em;line-height:1.2;text-transform:uppercase;color:#efeee9;background:rgba(109,93,251,.15);border:1px solid rgba(109,93,251,.4);border-radius:999px;padding:9px 12px;margin-bottom:15px}
.khm__hl2{display:block;white-space:nowrap;font-family:'Unbounded',sans-serif;font-weight:800;font-size:27px;letter-spacing:-.03em;line-height:1.16;color:#efeee9;margin-bottom:3px}
.khm__hl2:last-child{margin-bottom:0}
.khm__hl-accent{color:#a99dff}
.khm__lead{width:100%;max-width:360px;margin-top:16px;color:#c4c2be;font:500 13px/1.55 'Manrope',Arial,sans-serif;text-align:center;text-wrap:balance;text-shadow:0 2px 18px rgba(0,0,0,.56)}
.khm__btns{width:100%;max-width:360px;display:flex;flex-direction:column;gap:10px;margin-top:0;padding-top:0}
.khm__btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:17px;border-radius:12px;font:700 15px/1 'Manrope',Arial,sans-serif;text-decoration:none;border:none;cursor:pointer}
.khm__btn--p{background:var(--accent);color:#fff;box-shadow:0 10px 26px rgba(109,93,251,.3)}
.khm__pills{width:100%;max-width:360px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:14px}
.khm__pills .pill{display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:9px 10px;border:1px solid var(--border);border-radius:9px;color:var(--muted);font:600 13px/1 'Manrope',Arial,sans-serif;text-decoration:none;background:rgba(20,20,22,.42)}
.khm__pills .pill i{width:6px;height:6px;border-radius:50%;background:var(--accent);flex:none}
.khm__bottom{position:relative;width:100%;z-index:4;display:flex;flex-direction:column;align-items:center}
.khm__proof-panel{width:calc(100% - 24px);max-width:400px;margin:0 auto;border:1px solid rgba(255,255,255,.12);border-bottom:none;border-radius:14px 14px 0 0;background:linear-gradient(180deg,rgba(21,21,25,.9),rgba(10,10,13,.82));box-shadow:0 18px 44px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.04);overflow:hidden;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.khm__proof-main{display:flex;align-items:center;justify-content:center;gap:12px;padding:16px 18px;background:linear-gradient(135deg,rgba(109,93,251,.25),rgba(109,93,251,.06));border-bottom:1px solid rgba(255,255,255,.1)}
.khm__proof-main strong{font-family:'Unbounded',sans-serif;font-size:40px;line-height:1;font-weight:800;color:#fff;letter-spacing:-.04em}
.khm__proof-main span{max-width:130px;text-align:left;color:#c7c3e2;font:700 11px/1.35 'Manrope',Arial,sans-serif;letter-spacing:.08em;text-transform:uppercase}
.khm__proof-points{display:grid;grid-template-columns:1fr}
.khm__proof-points span{display:flex;align-items:center;gap:11px;min-height:48px;padding:12px 16px;color:#d7d5d0;font:600 12px/1.4 'Manrope',Arial,sans-serif;text-align:left;border-bottom:1px solid rgba(255,255,255,.07)}
.khm__proof-points span:last-child{border-bottom:0}
.khm__proof-points i{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 12px rgba(109,93,251,.65);flex:none}
.khm__offer-chips{width:100%;max-width:400px;display:grid;grid-template-columns:1fr;gap:10px;margin-top:22px}
.khm__offer-chips span{min-height:52px;display:flex;align-items:center;justify-content:center;gap:10px;padding:12px 14px;border:1px solid rgba(109,93,251,.5);border-radius:12px;background:linear-gradient(180deg,rgba(109,93,251,.2),rgba(18,18,22,.78));box-shadow:inset 0 1px 0 rgba(255,255,255,.06);color:#F5F3EF;font:700 14px/1.3 'Manrope',Arial,sans-serif;text-align:center;opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
.khm__offer-chips span.khm-in{opacity:1;transform:none}
.khm__offer-chips span:nth-child(1){transition-delay:.05s}
.khm__offer-chips span:nth-child(2){transition-delay:.14s}
.khm__offer-chips span:nth-child(3){transition-delay:.23s}
.khm__offer-chips i{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 13px rgba(109,93,251,.72);flex:none}
@media(prefers-reduced-motion:reduce){.khm__offer-chips span{transition:none;opacity:1;transform:none}}
/* контактная шторка не используется: без своего CSS она занимала 113px пустоты под логотипами */
.khm__sheet{display:none}
.khm__sheet.open{display:block}
.khm__mq{position:relative;width:100%;z-index:4;overflow:hidden;height:48px;display:flex;align-items:center;border-top:1px solid rgba(255,255,255,.08);background:rgba(8,8,10,.6)}
.khm__mq .lab{flex:none;font-family:'Unbounded',sans-serif;font-size:9.5px;letter-spacing:.1em;color:var(--faint);padding:0 12px;height:100%;display:flex;align-items:center;background:rgba(8,8,10,.92);z-index:2}
.khm__mq .track{position:relative;flex:1;overflow:hidden;height:100%;-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}
.khm__mq .mqt{position:absolute;top:50%;transform:translateY(-50%);display:flex;gap:30px;width:max-content;animation:khmMq 24s linear infinite}
.khm__mq .mqt b{font-family:'Unbounded',sans-serif;font-size:14px;color:#9a9893;font-weight:600;white-space:nowrap}
@keyframes khmMq{to{transform:translate(-50%,-50%)}}
@media(max-width:360px){.khm__in{padding-left:14px;padding-right:14px}.khm__offer-chips span{font-size:13px}}
</style>
<script>
(function(){
var wrap=document.querySelector('.khm'); if(!wrap) return;
function fmt(s){function p(n){return (n<10?'0':'')+n;}var h=Math.floor(s/3600),m=Math.floor(s%3600/60),x=s%60;return p(h)+':'+p(m)+':'+p(x);}
var t0=Date.now();
function tick(){var s=Math.floor((Date.now()-t0)/1000);wrap.querySelectorAll('.khm__tm').forEach(function(el){el.textContent=fmt(s);});}
tick(); setInterval(tick,1000);
var words=['сайты','видео','презентации','фотосъёмку','фирменный стиль'];
wrap.querySelectorAll('.khm__rot').forEach(function(el){var i=0;setInterval(function(){i=(i+1)%words.length;el.style.opacity='0';el.style.transform='translateY(8px)';setTimeout(function(){el.textContent=words[i];el.style.opacity='1';el.style.transform='translateY(0)';},200);},1500);});
var logos=['Одоевские консервы','InvoiceBox','Вистекс','Водоходъ','ALFA-BANK','Wildberries','Яндекс Драйв','ЭКСМО','Rumi'];
wrap.querySelectorAll('.khm__mq .mqt').forEach(function(t){var h=logos.map(function(l){return '<b>'+l+'</b>';}).join('');t.innerHTML=h+h;});
var sheetHTML='<div class="khsheet-bd khm-close"></div><div class="khsheet-card">'
+'<div class="khsheet-h"><b>Связаться сразу</b><button class="khsheet-x khm-close">×</button></div>'
+'<a class="khci main" href="#popup:zayavka"><span class="ic">→</span><span class="tx"><b>Оставить заявку</b><span>ответим и предложим формат работы</span></span></a>'
+'<a class="khci" href="tel:+79158677996"><span class="ic">тел</span><span class="tx"><b>Позвонить</b><span>+7 915 867-79-96</span></span></a>'
+'<a class="khci" href="https://wa.me/79158677996" target="_blank" rel="noopener"><span class="ic">WA</span><span class="tx"><b>WhatsApp</b><span>написать в мессенджер</span></span></a>'
+'<a class="khci" href="https://t.me/korsprodsale" target="_blank" rel="noopener"><span class="ic">TG</span><span class="tx"><b>Telegram</b><span>@korsprodsale</span></span></a>'
+'<a class="khci" href="https://max.ru/u/f9LHodD0cOJry8jfuI2u_X2FJWCLMC5S4I3JfDhcBC6iBjNcaUyKtbZ9Bto" target="_blank" rel="noopener"><span class="ic">MAX</span><span class="tx"><b>MAX</b><span>мессенджер MAX</span></span></a>'
+'<a class="khci" href="mailto:info@korsprod.ru"><span class="ic">@</span><span class="tx"><b>Почта</b><span>info@korsprod.ru</span></span></a>'
+'</div>';
wrap.querySelectorAll('.khm__sheet').forEach(function(s){s.innerHTML=sheetHTML;});
wrap.querySelectorAll('.khm-open').forEach(function(b){b.addEventListener('click',function(e){e.preventDefault();var sh=wrap.querySelector('.khm__sheet');if(sh)sh.classList.add('open');});});
wrap.addEventListener('click',function(e){if(e.target.classList.contains('khm-close')){var sh=wrap.querySelector('.khm__sheet');if(sh)sh.classList.remove('open');}});
var chips=wrap.querySelectorAll('.khm__offer-chips span');
requestAnimationFrame(function(){requestAnimationFrame(function(){chips.forEach(function(c){c.classList.add('khm-in');});});});

/* автоподгонка кеглей заголовка: строки всегда встают по ширине контейнера */
function khmFit(el){
var max=parseFloat(el.getAttribute('data-max'))||24;
var min=parseFloat(el.getAttribute('data-min'))||9;
var pad=parseFloat(el.getAttribute('data-pad'))||0;
var ps=window.getComputedStyle(el.parentElement);
var avail=el.parentElement.clientWidth-parseFloat(ps.paddingLeft)-parseFloat(ps.paddingRight)-pad;
if(avail<=0) return;
var s=max,guard=0;
el.style.fontSize=s+'px';
function width(){var r=document.createRange();r.selectNodeContents(el);return r.getBoundingClientRect().width;}
while(width()>avail && s>min && guard<200){s-=0.5;el.style.fontSize=s+'px';guard++;}
}
function khmFitAll(){wrap.querySelectorAll('.fit').forEach(function(el){khmFit(el);});}
khmFitAll();
if(document.fonts && document.fonts.ready){document.fonts.ready.then(khmFitAll);}else{window.addEventListener('load',khmFitAll);}
window.addEventListener('resize',khmFitAll);
window.addEventListener('orientationchange',khmFitAll);
setTimeout(khmFitAll,1200);
})();
</script>

BACKUP rec2704386401 · сквозной подвал · до добавления ссылок на кейсы · 02.09.2026 · 5766 симв.
<!-- ===== KORS · ПОДВАЛ (сквозной) · блок T123. Один адаптивный блок. Поставить в самый низ. ===== -->
<div class="kfoot-wrap">
  <footer class="kfoot" id="ksfooter">
    <div class="kfoot__top">
      <div class="kfoot__brand">
        <a class="kfoot__logo" href="/">KORS</a>
        <div class="kfoot__slogan">KORS - студия для производственных компаний. Видео, сайты, презентации, фото и дизайн материалов для продаж.</div>
        <div class="kfoot__city">МОСКВА · РАБОТАЕМ С 2019 ГОДА</div>
      </div>
      <div class="kfoot__col">
        <div class="kfoot__h">Разделы</div>
        <a href="/#rec2649099901">Услуги</a>
        <a href="/photographers">Фотосъёмка</a>
        <a href="/sites">Создание сайтов</a>
        <a href="/#rec2667018101">Кейсы</a>
        <a href="/#rec2663623901">Работы</a>
        <a href="https://drive.google.com/file/d/1HF-3fD3Hym_H-FWr307pvuUo4tu84fJu/view?usp=sharing" target="_blank" rel="noopener">Презентация студии (PDF)</a>
      </div>
      <div class="kfoot__col">
        <div class="kfoot__h">Связаться</div>
        <a href="tel:+79158677996">+7 915 867-79-96</a>
        <a href="https://wa.me/79158677996" target="_blank" rel="noopener">WhatsApp</a>
        <a href="https://t.me/korsprodsale" target="_blank" rel="noopener">Telegram - личный</a>
        <a href="https://t.me/KORSproduct" target="_blank" rel="noopener">Telegram - канал</a>
        <a href="https://max.ru/u/f9LHodD0cOJry8jfuI2u_X2FJWCLMC5S4I3JfDhcBC6iBjNcaUyKtbZ9Bto" target="_blank" rel="noopener">MAX</a>
        <a href="mailto:info@korsprod.ru">info@korsprod.ru</a>
      </div>
      <div class="kfoot__cta">
        <div class="kfoot__ctah">Обсудим ваш проект?</div>
        <a class="kfoot__ctabtn" href="#popup:zayavka">Оставить заявку →</a>
      </div>
    </div>
    <div class="kfoot__bottom">
      <div class="kfoot__req">ИП Кормышова Наталия Михайловна · ИНН 682801718806 · ОГРНИП 326680000032471</div>
      <div class="kfoot__legal">
        <a href="https://korsprod.ru/policy" target="_blank" rel="noopener">Политика конфиденциальности</a>
        <a href="https://korsprod.ru/user-agreement" target="_blank" rel="noopener">Пользовательское соглашение</a>
      </div>
      <div class="kfoot__copy">© 2019–<span data-kyear>2026</span> KORS</div>
      <div class="kfoot__rights">Все права защищены. Любое использование либо копирование материалов или подборки материалов сайта, элементов дизайна и оформления допускается лишь с письменного разрешения правообладателя и только со ссылкой на источник.</div>
    </div>
  </footer>
</div>
<style>
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Unbounded:wght@400;600;700;800&display=swap');
.kfoot-wrap{--bg:#0C0C0E;--raise:#141416;--card:#1B1B1F;--border:#2A2A2E;--text:#F5F3EF;--muted:#9A9A9A;--faint:#6a6a6e;--accent:#6D5DFB;--glow:rgba(109,93,251,.14);box-sizing:border-box;}
.kfoot-wrap *{box-sizing:border-box;margin:0;padding:0;}
.kfoot{background:#08080A;color:var(--text);font-family:'Manrope',Arial,sans-serif;-webkit-font-smoothing:antialiased;padding:70px 5vw 34px;border-top:1px solid var(--border);}
.kfoot__top{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:1.6fr 1fr 1.2fr 1.2fr;gap:40px;padding-bottom:48px;border-bottom:1px solid var(--border);}
.kfoot__logo{font-family:'Unbounded';font-weight:800;font-size:34px;color:var(--text);text-decoration:none;letter-spacing:-.02em;display:inline-block;margin-bottom:16px;}
.kfoot__slogan{color:var(--muted);font-size:14px;line-height:1.6;max-width:360px;margin-bottom:16px;}
.kfoot__city{font-family:'Unbounded';font-size:11px;letter-spacing:.1em;color:var(--faint);}
.kfoot__h{font-family:'Unbounded';font-size:12px;letter-spacing:.08em;color:var(--faint);margin-bottom:16px;}
.kfoot__col{display:flex;flex-direction:column;gap:11px;}
.kfoot__col a{color:var(--muted);text-decoration:none;font-size:15px;transition:.2s;}
.kfoot__col a:hover{color:var(--accent);}
.kfoot__ctah{font-family:'Unbounded';font-weight:600;font-size:19px;line-height:1.3;margin-bottom:18px;}
.kfoot__ctabtn{display:inline-block;background:var(--accent);color:#fff;text-decoration:none;font-weight:700;font-size:15px;padding:14px 24px;border-radius:9px;transition:.2s;}
.kfoot__ctabtn:hover{transform:translateY(-2px);box-shadow:0 10px 26px var(--glow);}
.kfoot__bottom{max-width:1280px;margin:0 auto;padding-top:26px;display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;}
.kfoot__req{color:var(--faint);font-size:12.5px;line-height:1.5;}
.kfoot__legal{display:flex;gap:22px;flex-wrap:wrap;}
.kfoot__legal a{color:var(--muted);text-decoration:none;font-size:12.5px;transition:.2s;}
.kfoot__legal a:hover{color:var(--accent);}
.kfoot__copy{color:var(--faint);font-size:12.5px;}
.kfoot__rights{flex:0 0 100%;color:var(--faint);font-size:12.5px;line-height:1.5;}
@media (max-width:900px){ .kfoot__top{grid-template-columns:1fr 1fr;gap:32px;} .kfoot__brand{grid-column:1 / -1;} }
@media (max-width:560px){
  .kfoot{padding:52px 20px 30px;}
  .kfoot__top{grid-template-columns:1fr;gap:30px;}
  .kfoot__bottom{flex-direction:column;align-items:flex-start;gap:12px;}
}
/* фикс: Tilda красит tel: в чёрный - возвращаем цвет */
.kfoot-wrap a[href^="tel:"]{color:var(--muted)!important;}
</style>
<script>
(function(){
  /* Год в копирайте подставляется автоматически по местному времени посетителя.
     Начальный год 2019 зафиксирован в разметке. Если скрипт не отработает,
     в разметке остаётся год, записанный руками, - пустоты и NaN не будет. */
  var y = new Date().getFullYear();
  if(!y || isNaN(y)) return;
  var els = document.querySelectorAll('[data-kyear]');
  for(var i=0;i<els.length;i++){ els[i].textContent = y; }
})();
</script> 

BACKUP rec2704539501 · виджет связи · до замены sales@ на info@ · 02.09.2026 · 11963 симв.
<!-- ===== KORS · ПЛАВАЮЩИЙ ВИДЖЕТ СВЯЗИ (внизу справа, всегда виден) · блок T123 ===== -->
<div class="kfab-wrap">
  <div class="kfab__panel" id="kfabPanel">
    <div class="kfab__head">
      <div class="kfab__title">Звоните - ответим на все вопросы</div>
      <div class="kfab__desc">Подскажем по услугам, срокам и стоимости.</div>
    </div>
    <a class="kfab__item" href="tel:+79158677996"><span class="kfab__ic kfab__ic--call"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z"/></svg></span><span class="kfab__tx"><b>Позвонить</b><span>+7 915 867-79-96</span></span></a>
    <a class="kfab__item" href="https://wa.me/79158677996" target="_blank" rel="noopener"><span class="kfab__ic kfab__ic--wa">WA</span><span class="kfab__tx"><b>WhatsApp</b><span>написать в мессенджер</span></span></a>
    <a class="kfab__item" href="https://t.me/korsprodsale" target="_blank" rel="noopener"><span class="kfab__ic kfab__ic--tg">TG</span><span class="kfab__tx"><b>Telegram</b><span>@korsprodsale</span></span></a>
    <a class="kfab__item" href="https://max.ru/u/f9LHodD0cOJry8jfuI2u_X2FJWCLMC5S4I3JfDhcBC6iBjNcaUyKtbZ9Bto" target="_blank" rel="noopener"><span class="kfab__ic kfab__ic--max">MAX</span><span class="kfab__tx"><b>MAX</b><span>мессенджер MAX</span></span></a>
    <a class="kfab__item" href="mailto:info@korsprod.ru"><span class="kfab__ic kfab__ic--mail">@</span><span class="kfab__tx"><b>Почта</b><span>info@korsprod.ru</span></span></a>
    <a class="kfab__item kfab__item--form" href="#popup:zayavka"><span class="kfab__ic kfab__ic--form">→</span><span class="kfab__tx"><b>Оставить заявку</b><span>заполнить форму</span></span></a>
  </div>
  <button class="kfab__btn" id="kfabBtn" aria-label="Связаться с нами">
    <svg class="kfab__open" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"/></svg>
    <svg class="kfab__close" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2.4" stroke-linecap="round"><path d="M18 6 6 18M6 6l12 12"/></svg>
  </button>
</div>
<style>
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Unbounded:wght@400;600;700;800&display=swap');
.kfab-wrap{--bg:#0C0C0E;--raise:#141416;--card:#1B1B1F;--border:#2A2A2E;--text:#F5F3EF;--muted:#9A9A9A;--faint:#6a6a6e;--accent:#6D5DFB;--glow:rgba(109,93,251,.14);
  position:fixed;right:22px;bottom:22px;z-index:9500;font-family:'Manrope',Arial,sans-serif;box-sizing:border-box;}
.kfab-wrap *{box-sizing:border-box;margin:0;padding:0;}
.kfab__btn{position:relative;width:62px;height:62px;border-radius:50%;background:var(--accent);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 30px rgba(109,93,251,.4);margin-left:auto;transition:transform .2s;animation:kfabPulse 2.6s infinite;}
.kfab__btn:hover{transform:scale(1.06);}
.kfab__btn svg{width:27px;height:27px;position:absolute;transition:opacity .2s,transform .2s;}
.kfab__close{opacity:0;transform:rotate(-45deg);}
.kfab-wrap.open .kfab__open{opacity:0;transform:rotate(45deg);}
.kfab-wrap.open .kfab__close{opacity:1;transform:rotate(0);}
.kfab-wrap.open .kfab__btn{animation:none;}
@keyframes kfabPulse{0%{box-shadow:0 10px 30px rgba(109,93,251,.4),0 0 0 0 rgba(109,93,251,.45);}70%{box-shadow:0 10px 30px rgba(109,93,251,.4),0 0 0 16px rgba(109,93,251,0);}100%{box-shadow:0 10px 30px rgba(109,93,251,.4),0 0 0 0 rgba(109,93,251,0);}}
.kfab__panel{position:absolute;right:0;bottom:74px;width:300px;background:var(--raise);border:1px solid var(--border);border-radius:16px;padding:16px;
  box-shadow:0 20px 50px rgba(0,0,0,.5);opacity:0;transform:translateY(12px) scale(.98);transform-origin:bottom right;pointer-events:none;transition:.25s cubic-bezier(.2,.8,.2,1);}
.kfab-wrap.open .kfab__panel{opacity:1;transform:translateY(0) scale(1);pointer-events:auto;}
.kfab__head{padding:4px 4px 14px;border-bottom:1px solid var(--border);margin-bottom:12px;}
.kfab__title{font-family:'Unbounded';font-weight:600;font-size:15px;line-height:1.3;color:var(--text);margin-bottom:6px;}
.kfab__desc{font-size:12.5px;color:var(--muted);line-height:1.45;}
.kfab__item{display:flex;align-items:center;gap:12px;padding:10px 10px;border-radius:11px;text-decoration:none;color:var(--text);transition:.18s;}
.kfab__item:hover{background:var(--card);}
.kfab__ic{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-family:'Unbounded';font-size:12px;font-weight:700;flex:none;background:rgba(109,93,251,.14);color:var(--accent);}
.kfab__ic--call svg{width:18px;height:18px;}
.kfab__tx{display:flex;flex-direction:column;}
.kfab__tx b{font-size:14px;font-weight:700;}
.kfab__tx span{font-size:12px;color:var(--faint);}
.kfab__item--form{margin-top:6px;background:var(--accent);}
.kfab__item--form:hover{background:var(--accent);filter:brightness(1.05);}
.kfab__item--form .kfab__ic{background:rgba(0,0,0,.18);color:#000;}
.kfab__item--form .kfab__tx b,.kfab__item--form .kfab__tx span{color:#000;}
@media (max-width:560px){
  .kfab-wrap{right:16px;bottom:16px;}
  .kfab__btn{width:56px;height:56px;}
  .kfab__panel{width:min(84vw,300px);bottom:68px;}
}
/* фикс: Tilda красит tel: в чёрный - возвращаем цвет */
.kfab-wrap a[href^="tel:"]{color:var(--text)!important;}
</style>
<script>
(function(){
  var wrap=document.querySelector('.kfab-wrap'); if(!wrap) return;
  var btn=document.getElementById('kfabBtn');
  btn.addEventListener('click',function(e){ e.stopPropagation(); wrap.classList.toggle('open'); });
  document.addEventListener('click',function(e){ if(!wrap.contains(e.target)) wrap.classList.remove('open'); });
  wrap.querySelectorAll('.kfab__item').forEach(function(a){ a.addEventListener('click',function(){ setTimeout(function(){wrap.classList.remove('open');},60); }); });
})();
</script>

<!-- ===== KORS · ПОПАП-ФОРМА ЗАЯВКИ · перекраска акцента в индиго #6D5DFB ===== -->
<style>
#rec2704488601 .t-submit{background:#6D5DFB !important;color:#fff !important;}
#rec2704488601 .t-submit:hover{background:#5B4CE0 !important;}
#rec2704488601 .t-radio__indicator{border-color:#6D5DFB !important;}
#rec2704488601 .t-radio__indicator::after{background:#6D5DFB !important;}
#rec2704488601 .t-radio__control:checked ~ .t-radio__indicator,
#rec2704488601 .t-radio__control:checked + .t-radio__indicator{background:#6D5DFB !important;border-color:#6D5DFB !important;}
</style>
<script>
/* Строка «Не любите формы» под каждой видимой формой Тильды на странице:
   попап «Обсудить проект», попап «Разбор материалов», форма на /photographers.
   Ставится один раз на форму, скрытые формы-мосты и баннер cookie пропускаем. */
(function(){
  var MAIL = "sales@korsprod.ru";
  function note(){
    var forms = document.querySelectorAll(".t-form");
    for(var i = 0; i < forms.length; i++){
      var f = forms[i];
      if(f.getAttribute("data-kmailnote")) continue;
      if(f.closest("#rec3177014801")) continue;
      /* форма на /photographers - там своя подпись с sales@ в тексте блока */
      if(f.closest("#rec3235536501")) continue;
      if(!f.classList.contains("js-form-proccess")) continue;
      if(f.querySelectorAll("input:not([type=hidden]), textarea").length < 2) continue;
      f.setAttribute("data-kmailnote", "1");
      var d = document.createElement("div");
      d.className = "kmailnote";
      d.innerHTML = 'Не любите формы - напишите на <a href="mailto:' + MAIL + '">' + MAIL + '</a>';
      f.appendChild(d);
    }
  }
  note();
  document.addEventListener("click", function(){ setTimeout(note, 400); });
  setTimeout(note, 1500);
  setTimeout(note, 4000);
})();
</script>
<style>
.kmailnote{margin-top:14px;text-align:center;font:400 14px/1.5 'Manrope',Arial,sans-serif;color:#9A9A9A;}
.kmailnote a{color:#A99CFF;text-decoration:underline;text-underline-offset:3px;}
.kmailnote a:hover{color:#F5F3EF;}
</style>


<!-- KORS · ПОПАП ЗАЯВКИ rec2704488601 · компактная раскладка · только CSS, разметка и скрипты не тронуты -->
<style>
/* шире контейнер, меньше воздуха */
@media screen and (min-width:960px){
  #rec2704488601 .t-popup__container{max-width:880px !important;}
}
#rec2704488601 .t702__wrapper{padding-top:24px !important;padding-bottom:24px !important;}
#rec2704488601 .t702__text-wrapper{margin-bottom:12px !important;}
#rec2704488601 .t-form__inputsbox .t-input-group{margin-bottom:14px !important;}
#rec2704488601 .t-form__submit{margin-top:4px !important;}
#rec2704488601 .t-input-group_ta textarea, #rec2704488601 textarea.t-input{height:96px !important;min-height:96px !important;}

/* способ связи - плашки в строку с переносом */
#rec2704488601 .t-input-group_rd .t-radio__wrapper{display:flex !important;flex-wrap:wrap;gap:8px;}
#rec2704488601 .t-input-group_rd .t-radio__wrapper label{margin:0 !important;width:auto !important;padding:7px 14px 7px 12px;border:1.5px solid #2A2A2E;border-radius:99px;background:#141416;display:inline-flex;align-items:center;gap:8px;cursor:pointer;}
#rec2704488601 .t-input-group_rd .t-radio__wrapper label:has(input:checked){border-color:#6D5DFB;background:rgba(109,93,251,.12);}

/* две колонки на десктопе */
@media screen and (min-width:640px){
  #rec2704488601 .t-form__inputsbox{display:grid;grid-template-columns:1fr 1fr;column-gap:24px;align-items:start;}
  #rec2704488601 .t-input-group_ph{grid-column:1;grid-row:1;}
  #rec2704488601 .t-input-group_in{grid-column:1;grid-row:2;}
  #rec2704488601 .t-input-group_rd{grid-column:1;grid-row:3;}
  #rec2704488601 .t-input-group_em{grid-column:2;grid-row:1;}
  #rec2704488601 .t-input-group_ta{grid-column:2;grid-row:2 / span 2;}
  #rec2704488601 .t-form__errorbox-middle{grid-column:1 / -1;}
  #rec2704488601 .t-form__submit{grid-column:1 / -1;}
}

/* мобильный - одна колонка, плотнее */
@media screen and (max-width:639px){
  #rec2704488601 .t-popup__container{padding-top:34px !important;} /* отступ под крестик */
  #rec2704488601 .t702__wrapper{padding-top:14px !important;padding-bottom:16px !important;}
  #rec2704488601 .t-form__inputsbox .t-input-group{margin-bottom:12px !important;}
  #rec2704488601 .t-input-group_ta textarea, #rec2704488601 textarea.t-input{height:84px !important;min-height:84px !important;}
}
</style>

<!-- KORS · ПОПАП АУДИТА · мобильные микроотступы v4 -->
<style>
@media screen and (max-width:640px){
  #rec3187170901 .t-form__submit{margin-top:8px !important;}
  #rec3187170901 .t702__form-bottom-text{line-height:1.35 !important;}
  #rec3187170901 .t702__form-bottom-text > *{margin:0 0 3px 0 !important;}
  #rec3187170901 .t-input-group_uw .t-input-subtitle{font-size:10.5px !important;line-height:1.3 !important;}
  #rec3187170901 .t702__descr{line-height:1.35 !important;}
  #rec3187170901 .t-popup__container{padding-top:30px !important;padding-bottom:10px !important;}
  #rec3187170901 .t702__wrapper{padding-top:8px !important;padding-bottom:8px !important;}
}
</style>

<style>
/* KORS · ПОПАП АУДИТА · фикс остаточной прокрутки на мобиле (перебиваем inline min-height Tilda) */
@media screen and (max-width:640px){
  #rec3187170901 .t-popup__container{min-height:0 !important;padding-top:52px !important;padding-bottom:6px !important;}
  #rec3187170901 .t702__wrapper{padding-top:4px !important;padding-bottom:4px !important;}
  #rec3187170901 textarea.t-input{height:64px !important;}
  #rec3187170901 .t702__form-bottom-text{font-size:10px !important;line-height:1.3 !important;}
}
</style>

BACKUP rec3238696801 · /sites · до замены sales@ на info@ · 8306 симв.
<style>
/* ---------- Квиз ---------- */
.quiz-wrap{background:var(--card);border-radius:var(--r-lg);padding:46px;margin-top:44px;display:grid;grid-template-columns:260px 1fr;gap:44px;box-shadow:0 0 0 1px var(--line)}
.quiz-persona{text-align:center}
.quiz-avatar{display:block;width:128px;height:128px;border-radius:50%;object-fit:cover;object-position:center 22%;margin:0 auto 16px;border:1px solid var(--line)}
.quiz-persona b{display:block;font-size:17px;letter-spacing:-.02em}
.quiz-persona span{font-size:13.5px;color:var(--muted)}
.quiz-hint{margin-top:18px;background:var(--bg);border-radius:18px;padding:16px;font-size:13.5px;color:var(--muted);text-align:left;line-height:1.5}
.quiz-progress{height:6px;background:#24242a;border-radius:99px;margin-bottom:26px;overflow:hidden}
.quiz-bar{height:100%;width:16%;background:var(--accent);border-radius:99px;transition:width .3s ease}
.quiz-step-label{font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gray);margin-bottom:12px}
.quiz-q{font-weight:600;font-size:clamp(20px,2.1vw,26px);margin-bottom:24px;line-height:1.2;letter-spacing:-.025em}
.quiz-opts{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.quiz-opt{border:1.5px solid transparent;border-radius:18px;padding:18px 20px;background:#1b1b1f;font-size:15px;font-weight:500;color:var(--ink);text-align:left;transition:border-color .15s,background .15s,transform .15s}
.quiz-opt:hover{border-color:var(--accent);transform:translateY(-1px)}
.quiz-opt.sel{border-color:var(--accent);background:var(--peach)}
.quiz-nav{display:flex;gap:12px;margin-top:28px;align-items:center}
.quiz-back{background:none;border:none;color:var(--muted);font-weight:600;font-size:14.5px;padding:10px 6px}
.quiz-back:hover{color:var(--ink)}
.quiz-final .fields{display:grid;gap:12px;margin-bottom:16px}
.kmailnote{margin-top:14px;text-align:center;font:400 14px/1.5 Manrope,Arial,sans-serif;color:var(--muted)}
.kmailnote a{color:#A99CFF;text-decoration:underline;text-underline-offset:3px}
.kmailnote a:hover{color:var(--ink)}
</style>
<section id="quiz" style="padding-top:0">
  <div class="container">
    <div class="eyebrow reveal">Расчёт за 40 секунд</div>
    <h2 class="reveal">Соберём план запуска под вашу нишу за 6 ответов</h2>
    <p class="sub reveal">Структура сайта, офер, канал трафика и вилка стоимости — пришлём в удобный мессенджер.</p>
    <div class="quiz-wrap reveal">
      <div class="quiz-persona">
        <img class="quiz-avatar" src="https://static.tildacdn.com/tild3034-3837-4330-b664-346332656439/dmitriy-kors-1000.jpg" alt="Дмитрий Корс, сооснователь студии KORS" loading="lazy">
        <b>Дмитрий Корс</b>
        <span>Сооснователь KORS, отвечает за проект</span>
        <div class="quiz-hint" id="quizHint">Каждый ответ сужает вилку стоимости — в конце пришлём точный расчёт и 2–3 примера решений под вашу задачу.</div>
      </div>
      <div class="quiz-body" id="quizBody">
        <div class="quiz-progress"><div class="quiz-bar" id="quizBar"></div></div>
        <div class="quiz-step-label" id="quizLabel">Шаг 1 из 6</div>
        <div id="quizContent"></div>
      </div>
    </div>
  </div>
</section>
<script>
var quizData=[
  {q:'Для какого бизнеса нужен сайт?',hint:'От ниши зависит и структура, и канал трафика — предложим решение под ваш рынок, а не шаблон.',opts:['Производство','Услуги (b2b / b2c)','Товары, интернет-магазин','Эксперт, личный бренд']},
  {q:'Какая главная задача?',hint:'Кому-то нужен поток заявок, кому-то — доверие и имидж. От цели зависят акценты на странице.',opts:['Постоянный поток заявок','Имидж и доверие к компании','Запуск нового продукта','Всё сразу — и продажи, и имидж']},
  {q:'Сайт с нуля или уже есть?',hint:'Если сайт есть, но молчит, — разберём, почему, и посчитаем, что дешевле: докрутить или пересобрать.',opts:['С нуля — нужно всё','Есть, но не приносит заявок','Нужен редизайн и рост конверсии']},
  {q:'Откуда пойдёт трафик?',hint:'Под рекламу, SEO и соцсети сайты строятся по-разному. Если не уверены — подскажем.',opts:['Реклама в Яндекс Директе','SEO, органический трафик','Свои соцсети','Пока не знаю — подскажите']},
  {q:'Когда планируете запуск?',hint:'Если сроки жмут — уплотним график команды без потери качества.',opts:['Срочно, за 2–3 недели','В течение месяца','Через 1–2 месяца','Пока присматриваюсь']}
];
var quizState={step:0,answers:[]};
var qc=document.getElementById('quizContent'),qBar=document.getElementById('quizBar'),qLabel=document.getElementById('quizLabel'),qHint=document.getElementById('quizHint');
var TOTAL=quizData.length+1;
function renderQuiz(){
  var s=quizState.step;
  qBar.style.width=((s+1)/TOTAL*100)+'%';
  if(s<quizData.length){
    qLabel.textContent='Шаг '+(s+1)+' из '+TOTAL;
    qHint.textContent=quizData[s].hint;
    var html='<div class="quiz-q">'+quizData[s].q+'</div><div class="quiz-opts">';
    quizData[s].opts.forEach(function(o,i){
      var sel=quizState.answers[s]===i?' sel':'';
      html+='<button type="button" class="quiz-opt'+sel+'" data-i="'+i+'">'+o+'</button>';
    });
    html+='</div><div class="quiz-nav">'+(s>0?'<button type="button" class="quiz-back" id="qBack">← Назад</button>':'')+'</div>';
    qc.innerHTML=html;
    qc.querySelectorAll('.quiz-opt').forEach(function(b){
      b.addEventListener('click',function(){
        quizState.answers[s]=+b.dataset.i;
        quizState.step++;renderQuiz();
        qc.closest('.quiz-wrap').scrollIntoView({behavior:'smooth',block:'nearest'});
      });
    });
    var back=document.getElementById('qBack');
    if(back)back.addEventListener('click',function(){quizState.step--;renderQuiz()});
  }else{
    qLabel.textContent='Последний шаг';
    qHint.textContent='Пришлём расчёт и 2–3 примера решений под вашу задачу в течение пары часов в рабочее время.';
    qc.innerHTML=
      '<div class="quiz-q">Куда прислать план запуска и расчёт?</div>'+
      '<div class="quiz-final">'+
        '<div class="fields">'+
          '<div class="field"><input type="text" id="qName" placeholder="Ваше имя"></div>'+
          '<div class="field"><input type="tel" id="qPhone" placeholder="Телефон или @ник в Telegram"></div>'+
        '</div>'+
        '<div class="msgr-row" id="qMsgr">'+
          '<button type="button" class="msgr sel">Телефон</button>'+
          '<button type="button" class="msgr">Telegram</button>'+
          '<button type="button" class="msgr">WhatsApp</button>'+
          '<button type="button" class="msgr">MAX</button>'+
        '</div>'+
        '<label class="check"><input type="checkbox" id="qAgree" checked> Я принимаю условия <a href="https://korsprod.ru/policy" target="_blank" rel="noopener">политики конфиденциальности</a> и даю согласие на обработку персональных данных</label>'+
        '<div class="quiz-nav" style="margin-top:0">'+
          '<button type="button" class="quiz-back" id="qBack">← Назад</button>'+
          '<button type="button" class="btn btn-primary" id="qSubmit" style="flex:1">Получить план запуска</button>'+
        '</div>'+
        '<div class="kmailnote">Не любите формы - напишите на <a href="mailto:sales@korsprod.ru">sales@korsprod.ru</a></div>'+
      '</div>';
    document.getElementById('qMsgr').querySelectorAll('.msgr').forEach(function(b){
      b.addEventListener('click',function(){
        document.getElementById('qMsgr').querySelectorAll('.msgr').forEach(function(x){x.classList.remove('sel')});
        b.classList.add('sel');
      });
    });
    document.getElementById('qBack').addEventListener('click',function(){quizState.step--;renderQuiz()});
    document.getElementById('qSubmit').addEventListener('click',function(){
      var n=document.getElementById('qName'),p=document.getElementById('qPhone'),a=document.getElementById('qAgree');
      if(!n.value.trim()){n.focus();return}
      if(p.value.trim().length<5){p.focus();return}
      if(!a.checked){a.focus();return}
      qBar.style.width='100%';
      qLabel.textContent='Готово';
      qHint.textContent='Спасибо! Обычно отвечаем в течение 10 минут в рабочее время.';
      qc.innerHTML='<div class="quiz-done"><div class="big">🔥</div><h3>Заявка принята</h3><p>Свяжемся в выбранном мессенджере, зададим пару уточняющих вопросов и пришлём план запуска с вилкой стоимости.</p></div>';
    });
  }
}
renderQuiz();
</script>BACKUP rec3239313501 · /sites · до замены sales@ на info@ · 5240 симв.
<style>
/* ---------- Финальная форма ---------- */
.final-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:center}
.final-person{margin:0;max-width:320px}
.final-person img{display:block;width:100%;height:auto;aspect-ratio:2/3;object-fit:cover;object-position:center 20%;border-radius:var(--r-md);border:1px solid var(--dark-3)}
.final-person figcaption{margin-top:18px}
.final-person figcaption b{display:block;font-size:18px;letter-spacing:-.02em}
.final-person figcaption span{display:block;margin-top:5px;font-size:14px;line-height:1.5;color:var(--gray)}
@media (max-width:1020px){.final-person{max-width:240px;margin:0 auto}}
.final-form .fields{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:26px 0 16px}
.final-form .field input{background:var(--dark-2);border:1.5px solid var(--dark-3);color:#fff}
.final-form .field input::placeholder{color:#7a7f87}
.final-form .field input:focus{border-color:var(--accent)}
.final-form .msgr{background:var(--dark-2);border-color:var(--dark-3);color:#e8e9ea}
.final-form .msgr.sel{border-color:var(--accent);background:rgba(109,93,251,.16);color:#a99cff}
.final-form .check{color:var(--gray)}
.form-note{font-size:13px;color:var(--gray);margin-top:14px}
.kmailnote{margin-top:14px;text-align:center;font:400 14px/1.5 Manrope,Arial,sans-serif;color:var(--muted)}
.kmailnote a{color:#A99CFF;text-decoration:underline;text-underline-offset:3px}
.kmailnote a:hover{color:var(--ink)}
.final-form .field-err{margin-top:6px;font-size:13px;line-height:1.4;color:#ff6b6b}
.final-form .field input.has-err{border-color:#ff6b6b}
</style>
<div class="section-dark final" id="final">
  <section>
  <div class="container final-grid">
    <div>
      <figure class="final-person">
        <img src="https://static.tildacdn.com/tild3034-3837-4330-b664-346332656439/dmitriy-kors-1000.jpg" alt="Дмитрий Корс, сооснователь студии KORS" loading="lazy">
        <figcaption><b>Дмитрий Корс</b><span>Сооснователь KORS. Проведёт разбор и ответит на вопросы</span></figcaption>
      </figure>
    </div>
    <div class="final-form">
      <div class="eyebrow">Свяжемся в течение 10 минут</div>
      <h2>Обсудим ваш <span class="squig">проект<svg viewBox="0 0 300 24" preserveAspectRatio="none" aria-hidden="true"><path d="M4 14 C70 5 180 4 296 11"/><path d="M140 20 C200 13 255 12 293 16"/></svg></span>?</h2>
      <p class="sub">За 15–20 минут разберём нишу и текущую ситуацию, покажем, какая модель привлечения заявок сработает у вас, и назовём вилку стоимости.</p>
      <form id="leadForm" novalidate>
        <div class="fields">
          <div class="field"><input type="text" name="name" placeholder="Ваше имя" required></div>
          <div class="field"><input type="text" name="phone" placeholder="Телефон или @ник в Telegram" required></div>
        </div>
        <div class="msgr-row" data-group="final">
          <button type="button" class="msgr sel">Телефон</button>
          <button type="button" class="msgr">Telegram</button>
          <button type="button" class="msgr">WhatsApp</button>
          <button type="button" class="msgr">MAX</button>
        </div>
        <label class="check"><input type="checkbox" required checked> Я принимаю условия <a href="https://korsprod.ru/policy" target="_blank" rel="noopener">политики конфиденциальности</a> и даю согласие на обработку персональных данных</label>
        <button class="btn btn-primary btn-block" type="submit">Получить план запуска</button>
        <div class="kmailnote">Не любите формы - напишите на <a href="mailto:sales@korsprod.ru">sales@korsprod.ru</a></div>
      </form>
      <div class="quiz-done" id="formDone" style="display:none">
        <div class="big">🔥</div>
        <h3 style="color:#fff">Заявка принята</h3>
        <p style="color:var(--gray)">Свяжемся в течение 10 минут в рабочее время и пришлём план запуска под вашу нишу.</p>
      </div>
    </div>
  </div>
  </section>
</div>
<script>
document.querySelectorAll('.msgr-row').forEach(function(row){
  row.querySelectorAll('.msgr').forEach(function(b){
    b.addEventListener('click',function(){
      row.querySelectorAll('.msgr').forEach(function(x){x.classList.remove('sel')});
      b.classList.add('sel');
    });
  });
});
var leadForm=document.getElementById('leadForm');
function kfErr(el,msg){var f=el.parentNode;var e=f.querySelector('.field-err');if(!e){e=document.createElement('div');e.className='field-err';f.appendChild(e);}e.textContent=msg;el.classList.add('has-err');el.focus();}
function kfClear(fm){var a=fm.querySelectorAll('.field-err');for(var i=0;i<a.length;i++){a[i].textContent='';}var b=fm.querySelectorAll('.has-err');for(var j=0;j<b.length;j++){b[j].classList.remove('has-err');}}
leadForm.addEventListener('submit',function(e){
  e.preventDefault();
  var name=leadForm.querySelector('[name=name]'),phone=leadForm.querySelector('[name=phone]');
  kfClear(leadForm);
if(!name.value.trim()){kfErr(name,'Укажите, как к вам обращаться');return}
  var kfRaw=phone.value.trim();
if(kfRaw.replace(/\D/g,'').length<10&&kfRaw.length<4){kfErr(phone,'Укажите телефон или @ник в Telegram');return}
  leadForm.style.display='none';
  document.getElementById('formDone').style.display='block';
});
</script>

BACKUP rec3451959601 · /photographers · до фикса цвета tel-ссылки · 1486 симв.
<!-- KORS - /photographers - каналы связи.
     Заменяет нативный блок T188 rec1645479931 (круглые иконки): в нём не было MAX и почты,
     телефон стоял без плюса, телеграм вёл на неверный аккаунт korsproduction.
     Старый блок отключён, не удалён. -->
<style>
#rec3451959601{background:#0C0C0E;}
.kch{padding:0 20px 56px;background:#0C0C0E;}
.kch__in{max-width:1200px;margin:0 auto;display:flex;flex-wrap:wrap;gap:12px;justify-content:center;}
.kch__it{display:inline-flex;align-items:center;gap:10px;padding:14px 22px;border-radius:999px;background:#1B1B1F;border:1px solid #2A2A2E;color:#F5F3EF;font:600 15px/1.2 'Manrope',Arial,sans-serif;text-decoration:none;transition:.2s;}
.kch__it:hover{border-color:#6D5DFB;color:#A99CFF;}
.kch__it i{width:7px;height:7px;border-radius:50%;background:#6D5DFB;flex:none;}
@media(max-width:560px){.kch{padding:0 16px 44px;}.kch__it{padding:12px 18px;font-size:14px;}}
</style>
<div class="kch"><div class="kch__in">
  <a class="kch__it" href="https://t.me/korsprodsale" target="_blank" rel="noopener"><i></i>Telegram</a>
  <a class="kch__it" href="https://wa.me/79158677996" target="_blank" rel="noopener"><i></i>WhatsApp</a>
  <a class="kch__it" href="https://max.ru/u/f9LHodD0cOJry8jfuI2u_X2FJWCLMC5S4I3JfDhcBC6iBjNcaUyKtbZ9Bto" target="_blank" rel="noopener"><i></i>MAX</a>
  <a class="kch__it" href="tel:+79158677996"><i></i>+7 915 867-79-96</a>
  <a class="kch__it" href="mailto:info@korsprod.ru"><i></i>info@korsprod.ru</a>
</div></div>

BACKUP rec3238380801 · /sites · до офер→оффер · 2226 симв.
<style>
/* ---------- Услуги ---------- */
.serv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:44px}
.serv{background:var(--card);border-radius:var(--r-md);padding:34px;display:flex;flex-direction:column;box-shadow:0 0 0 1px var(--line);transition:transform .2s}
.serv:hover{transform:translateY(-4px);box-shadow:0 0 0 1px var(--accent)}
.serv h3{margin-bottom:12px;font-size:23px}
.serv p{color:var(--muted);font-size:15px;flex:1}
.serv .serv-link{margin-top:22px;font-weight:700;font-size:15px;color:var(--accent-txt)}
.chips{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.chips a{background:var(--card);border-radius:999px;padding:15px 24px;font-size:15px;font-weight:500;box-shadow:0 0 0 1px var(--line);transition:transform .15s,color .15s}
.chips a:hover{transform:translateY(-2px);color:var(--accent-txt)}
</style>
<section id="services">
  <div class="container">
    <div class="eyebrow reveal">Услуги</div>
    <h2 class="reveal">Что делаем</h2>
    <div class="serv-grid">
      <div class="serv reveal">
        <h3>Продающий лендинг</h3>
        <p>Одностраничник под одну услугу или продукт. Заточен под Яндекс Директ, соцсети и SEO-трафик: офер, структура, формы захвата.</p>
        <a class="serv-link" href="#quiz">Рассчитать стоимость →</a>
      </div>
      <div class="serv reveal">
        <h3>Многостраничный сайт</h3>
        <p>Для компаний с несколькими направлениями: страницы под каждую услугу, каталог, навигация, база под SEO-продвижение.</p>
        <a class="serv-link" href="#quiz">Рассчитать стоимость →</a>
      </div>
      <div class="serv reveal">
        <h3>Редизайн и докрутка</h3>
        <p>Если сайт уже есть, но молчит: аудит, новая структура, усиление офера и текстов, обновление дизайна — без пересборки с нуля.</p>
        <a class="serv-link" href="#quiz">Получить аудит →</a>
      </div>
    </div>
    <div class="chips reveal">
      <a href="#quiz">Сделать сайт с нуля</a>
      <a href="#quiz">Сайт к выставке</a>
      <a href="#quiz">Протестировать нишу</a>
      <a href="#quiz">Написать тексты для сайта</a>
      <a href="#quiz">Обновить старый сайт</a>
      <a href="#quiz">Запустить рекламу</a>
    </div>
  </div>
</section>BACKUP rec3238523101 · /sites · до офер→оффер · 7701 симв.
<style>
/* ---------- Процесс ---------- */
.step{background:var(--card);border-radius:var(--r-md);padding:36px;margin-top:18px;display:grid;grid-template-columns:96px 1fr .9fr;gap:32px;align-items:start;box-shadow:0 0 0 1px var(--line)}
.step-num{font-weight:700;font-size:54px;line-height:1;color:var(--accent-txt);letter-spacing:-.04em}
.step h3{font-size:clamp(20px,2vw,26px);margin-bottom:12px}
.step p{color:var(--muted);font-size:15.5px}
.step .step-res{margin-top:16px;font-size:14.5px;color:var(--ink)}
.step .step-res b{color:var(--accent-txt);font-weight:700}
.step > div:last-child:not(.step-media){grid-column:2 / -1}
/* Слоты step-media вернули 30.08.2026: во всех шести шагах есть иллюстрация. */
.step-media{align-self:start}
.step-shot{display:block;width:100%;height:auto;border-radius:14px;box-shadow:0 0 0 1px var(--line);background:#0f0f11}
.vs{display:grid;grid-template-columns:1fr 1fr;gap:12px;min-height:190px}
.vs-col{border-radius:20px;padding:22px;background:#0c0c0e}
.vs-col.win{background:rgba(109,93,251,.14);border:1px solid rgba(109,93,251,.4);color:#fff}
.vs-col h4{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin-bottom:12px;color:var(--muted)}
.vs-col.win h4{color:#a99cff}
.vs-col li{list-style:none;font-size:13.5px;color:var(--muted);padding:5px 0;line-height:1.45}
.vs-col.win li{color:#e8e9ea}
</style>
<section id="process" style="padding-top:0">
  <div class="container">
    <div class="eyebrow reveal">Процесс</div>
    <h2 class="reveal">6 шагов от знакомства до потока заявок</h2>
    <p class="sub reveal">Ваше участие за весь проект — 2–4 часа: ответить на вопросы и принять этапы. Остальное делаем сами.</p>
    <div style="margin-top:44px">
      <div class="step reveal">
        <div class="step-num">01</div>
        <div>
          <h3>Погружение в бизнес</h3>
          <p>Начинаем не с «какие цвета нравятся», а с глубинного интервью на 2 часа: продукт, сделки, клиенты, цифры, сильные и слабые места.</p>
          <p class="step-res"><b>Итог:</b> понимаем, за что вам платят клиенты — и что покажем на сайте.</p>
        </div>
        <div class="step-media vs">
          <div class="vs-col">
            <h4>Обычный бриф</h4>
            <ul><li>— Какие цвета нравятся?</li><li>— Пришлёте примеры сайтов?</li><li>— Текст и ТЗ есть?</li></ul>
          </div>
          <div class="vs-col win">
            <h4>Интервью KORS</h4>
            <ul><li>— 100+ вопросов о бизнесе</li><li>— Разбор реальных сделок</li><li>— Упор на маркетинг</li></ul>
          </div>
        </div>
      </div>
      <div class="step reveal">
        <div class="step-num">02</div>
        <div>
          <h3>Анализ аудитории и конкурентов</h3>
          <p>Разбираем 8–10 конкурентов по ключевым критериям. Сегментируем аудиторию, выписываем страхи, желания и возражения по отзывам, форумам и картам.</p>
          <p class="step-res"><b>Итог:</b> документ со смыслами, на котором строится весь сайт.</p>
        </div>
        <div class="step-media"><img class="step-shot" src="https://static.tildacdn.com/tild3838-3862-4163-b863-643363666532/proc-analiz.jpg" alt="Таблица анализа конкурентов: участники рынка построчно, офферы, цены и выводы по каждому" loading="lazy"></div>
      </div>
      <div class="step reveal">
        <div class="step-num">03</div>
        <div>
          <h3>Структура и текст</h3>
          <p>Собираем прототип по блокам и пишем продающий текст: офер, заголовки, призывы, лид-магниты. Записываем видеопояснение логики каждого блока.</p>
          <p class="step-res"><b>Итог:</b> прототип, готовый к передаче в дизайн.</p>
        </div>
        <div class="step-media"><img class="step-shot" src="https://static.tildacdn.com/tild3433-3133-4536-a334-303935323536/proc-struktura.jpg" alt="Прототип лендинга в рабочем интерфейсе: блоки страницы разложены по экранам" loading="lazy"></div>
      </div>
      <div class="step reveal">
        <div class="step-num">04</div>
        <div>
          <h3>Дизайн</h3>
          <p>Готовим 2 варианта концепции на выбор: референсы, визуальный вектор, презентация решений — объясняем, что и почему работает на заявки, а не просто «красиво».</p>
          <p class="step-res"><b>Итог:</b> макет, который не стыдно показать партнёрам и инвесторам.</p>
        </div>
        <div class="step-media"><img class="step-shot" src="https://static.tildacdn.com/tild3732-3732-4230-a630-363761373135/proc-dizayn.jpg" alt="Две концепции первого экрана для одного проекта, подготовленные на выбор" loading="lazy"></div>
      </div>
      <div class="step reveal">
        <div class="step-num">05</div>
        <div>
          <h3>Сборка и запуск</h3>
          <p>Верстаем, адаптируем под мобильные, подключаем домен, формы, CRM и уведомления. Настраиваем Яндекс Метрику, Вебмастер и базовое SEO.</p>
          <p class="step-res"><b>Итог:</b> живой сайт, который принимает заявки без вашего участия.</p>
        </div>
        <div class="step-media"><img class="step-shot" src="https://static.tildacdn.com/tild6333-3433-4939-a637-366161323538/proc-zapusk.jpg" alt="Готовый сайт в окне браузера: первый экран и блоки страницы при прокрутке" loading="lazy"></div>
      </div>
      <div class="step reveal">
        <div class="step-num">06</div>
        <div>
          <h3>Трафик</h3>
          <p>Запускаем Яндекс Директ на собранные смыслы: объявления пишутся из той же карты, что и сайт. Ведём кампании и докручиваем по цифрам, а не по ощущениям.</p>
          <p class="step-res"><b>Итог:</b> управляемый поток целевых заявок — прогнозируемый и масштабируемый.</p>
        </div>
        <div class="step-media"><img class="step-shot" src="https://static.tildacdn.com/tild3237-6530-4234-b331-666230356664/grt-ads.jpg" alt="Список кампаний в рекламном кабинете Яндекс Директа: статусы, площадки и даты запуска; показатели и названия кампаний скрыты" loading="lazy"></div>
      </div>
    </div>
  </div>
</section>
<script>
/* Сторож картинок.
   Иногда запрос картинки к CDN зависает: ответа нет, ошибки нет, элемент img остаётся
   пустым навсегда, а слот с заданными пропорциями держит пустое место во весь экран.
   Переназначить src такому элементу бесполезно - он уже мёртвый; помогает только
   НОВЫЙ элемент img. Поэтому раз в 10 с (до трёх попыток) создаём свежую картинку
   и подменяем ею зависшую, когда та загрузится.
   Слот прячем только если сервер явно ответил ошибкой: медленную картинку прятать
   нельзя, она может прийти позже. Пока вкладка в фоне, отсчёт не ведём - там браузер
   тормозит загрузку сам, и это не повод считать картинку потерянной. */
(function(){
  function ready(im){ return im && im.complete && im.naturalWidth > 0; }
  function watch(box){
    var first = box.querySelector("img");
    if(!first) return;
    first.addEventListener("error", function(){ box.style.display = "none"; });
    var tries = 0;
    function tick(){
      var cur = box.querySelector("img");
      if(ready(cur) || tries >= 3) return;
      if(document.hidden){ setTimeout(tick, 5000); return; }
      tries++;
      var url = ((cur && cur.getAttribute("src")) || "").split("?")[0];
      if(url){
        var fresh = new Image();
        fresh.alt = (cur && cur.alt) || "";
        fresh.onload = function(){ if(cur && cur.parentNode === box && !ready(cur)) box.replaceChild(fresh, cur); };
        fresh.onerror = function(){ box.style.display = "none"; };
        fresh.src = url + "?kr=" + Date.now();
      }
      setTimeout(tick, 10000);
    }
    setTimeout(tick, 5000);
  }
  var slots = document.querySelectorAll(".kcp [data-img], .step-media");
  for(var i = 0; i < slots.length; i++){ watch(slots[i]); }
})();
</script> BACKUP rec3238696801 · /sites · до офер→оффер · 8304 симв.
<style>
/* ---------- Квиз ---------- */
.quiz-wrap{background:var(--card);border-radius:var(--r-lg);padding:46px;margin-top:44px;display:grid;grid-template-columns:260px 1fr;gap:44px;box-shadow:0 0 0 1px var(--line)}
.quiz-persona{text-align:center}
.quiz-avatar{display:block;width:128px;height:128px;border-radius:50%;object-fit:cover;object-position:center 22%;margin:0 auto 16px;border:1px solid var(--line)}
.quiz-persona b{display:block;font-size:17px;letter-spacing:-.02em}
.quiz-persona span{font-size:13.5px;color:var(--muted)}
.quiz-hint{margin-top:18px;background:var(--bg);border-radius:18px;padding:16px;font-size:13.5px;color:var(--muted);text-align:left;line-height:1.5}
.quiz-progress{height:6px;background:#24242a;border-radius:99px;margin-bottom:26px;overflow:hidden}
.quiz-bar{height:100%;width:16%;background:var(--accent);border-radius:99px;transition:width .3s ease}
.quiz-step-label{font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gray);margin-bottom:12px}
.quiz-q{font-weight:600;font-size:clamp(20px,2.1vw,26px);margin-bottom:24px;line-height:1.2;letter-spacing:-.025em}
.quiz-opts{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.quiz-opt{border:1.5px solid transparent;border-radius:18px;padding:18px 20px;background:#1b1b1f;font-size:15px;font-weight:500;color:var(--ink);text-align:left;transition:border-color .15s,background .15s,transform .15s}
.quiz-opt:hover{border-color:var(--accent);transform:translateY(-1px)}
.quiz-opt.sel{border-color:var(--accent);background:var(--peach)}
.quiz-nav{display:flex;gap:12px;margin-top:28px;align-items:center}
.quiz-back{background:none;border:none;color:var(--muted);font-weight:600;font-size:14.5px;padding:10px 6px}
.quiz-back:hover{color:var(--ink)}
.quiz-final .fields{display:grid;gap:12px;margin-bottom:16px}
.kmailnote{margin-top:14px;text-align:center;font:400 14px/1.5 Manrope,Arial,sans-serif;color:var(--muted)}
.kmailnote a{color:#A99CFF;text-decoration:underline;text-underline-offset:3px}
.kmailnote a:hover{color:var(--ink)}
</style>
<section id="quiz" style="padding-top:0">
  <div class="container">
    <div class="eyebrow reveal">Расчёт за 40 секунд</div>
    <h2 class="reveal">Соберём план запуска под вашу нишу за 6 ответов</h2>
    <p class="sub reveal">Структура сайта, офер, канал трафика и вилка стоимости — пришлём в удобный мессенджер.</p>
    <div class="quiz-wrap reveal">
      <div class="quiz-persona">
        <img class="quiz-avatar" src="https://static.tildacdn.com/tild3034-3837-4330-b664-346332656439/dmitriy-kors-1000.jpg" alt="Дмитрий Корс, сооснователь студии KORS" loading="lazy">
        <b>Дмитрий Корс</b>
        <span>Сооснователь KORS, отвечает за проект</span>
        <div class="quiz-hint" id="quizHint">Каждый ответ сужает вилку стоимости — в конце пришлём точный расчёт и 2–3 примера решений под вашу задачу.</div>
      </div>
      <div class="quiz-body" id="quizBody">
        <div class="quiz-progress"><div class="quiz-bar" id="quizBar"></div></div>
        <div class="quiz-step-label" id="quizLabel">Шаг 1 из 6</div>
        <div id="quizContent"></div>
      </div>
    </div>
  </div>
</section>
<script>
var quizData=[
  {q:'Для какого бизнеса нужен сайт?',hint:'От ниши зависит и структура, и канал трафика — предложим решение под ваш рынок, а не шаблон.',opts:['Производство','Услуги (b2b / b2c)','Товары, интернет-магазин','Эксперт, личный бренд']},
  {q:'Какая главная задача?',hint:'Кому-то нужен поток заявок, кому-то — доверие и имидж. От цели зависят акценты на странице.',opts:['Постоянный поток заявок','Имидж и доверие к компании','Запуск нового продукта','Всё сразу — и продажи, и имидж']},
  {q:'Сайт с нуля или уже есть?',hint:'Если сайт есть, но молчит, — разберём, почему, и посчитаем, что дешевле: докрутить или пересобрать.',opts:['С нуля — нужно всё','Есть, но не приносит заявок','Нужен редизайн и рост конверсии']},
  {q:'Откуда пойдёт трафик?',hint:'Под рекламу, SEO и соцсети сайты строятся по-разному. Если не уверены — подскажем.',opts:['Реклама в Яндекс Директе','SEO, органический трафик','Свои соцсети','Пока не знаю — подскажите']},
  {q:'Когда планируете запуск?',hint:'Если сроки жмут — уплотним график команды без потери качества.',opts:['Срочно, за 2–3 недели','В течение месяца','Через 1–2 месяца','Пока присматриваюсь']}
];
var quizState={step:0,answers:[]};
var qc=document.getElementById('quizContent'),qBar=document.getElementById('quizBar'),qLabel=document.getElementById('quizLabel'),qHint=document.getElementById('quizHint');
var TOTAL=quizData.length+1;
function renderQuiz(){
  var s=quizState.step;
  qBar.style.width=((s+1)/TOTAL*100)+'%';
  if(s<quizData.length){
    qLabel.textContent='Шаг '+(s+1)+' из '+TOTAL;
    qHint.textContent=quizData[s].hint;
    var html='<div class="quiz-q">'+quizData[s].q+'</div><div class="quiz-opts">';
    quizData[s].opts.forEach(function(o,i){
      var sel=quizState.answers[s]===i?' sel':'';
      html+='<button type="button" class="quiz-opt'+sel+'" data-i="'+i+'">'+o+'</button>';
    });
    html+='</div><div class="quiz-nav">'+(s>0?'<button type="button" class="quiz-back" id="qBack">← Назад</button>':'')+'</div>';
    qc.innerHTML=html;
    qc.querySelectorAll('.quiz-opt').forEach(function(b){
      b.addEventListener('click',function(){
        quizState.answers[s]=+b.dataset.i;
        quizState.step++;renderQuiz();
        qc.closest('.quiz-wrap').scrollIntoView({behavior:'smooth',block:'nearest'});
      });
    });
    var back=document.getElementById('qBack');
    if(back)back.addEventListener('click',function(){quizState.step--;renderQuiz()});
  }else{
    qLabel.textContent='Последний шаг';
    qHint.textContent='Пришлём расчёт и 2–3 примера решений под вашу задачу в течение пары часов в рабочее время.';
    qc.innerHTML=
      '<div class="quiz-q">Куда прислать план запуска и расчёт?</div>'+
      '<div class="quiz-final">'+
        '<div class="fields">'+
          '<div class="field"><input type="text" id="qName" placeholder="Ваше имя"></div>'+
          '<div class="field"><input type="tel" id="qPhone" placeholder="Телефон или @ник в Telegram"></div>'+
        '</div>'+
        '<div class="msgr-row" id="qMsgr">'+
          '<button type="button" class="msgr sel">Телефон</button>'+
          '<button type="button" class="msgr">Telegram</button>'+
          '<button type="button" class="msgr">WhatsApp</button>'+
          '<button type="button" class="msgr">MAX</button>'+
        '</div>'+
        '<label class="check"><input type="checkbox" id="qAgree" checked> Я принимаю условия <a href="https://korsprod.ru/policy" target="_blank" rel="noopener">политики конфиденциальности</a> и даю согласие на обработку персональных данных</label>'+
        '<div class="quiz-nav" style="margin-top:0">'+
          '<button type="button" class="quiz-back" id="qBack">← Назад</button>'+
          '<button type="button" class="btn btn-primary" id="qSubmit" style="flex:1">Получить план запуска</button>'+
        '</div>'+
        '<div class="kmailnote">Не любите формы - напишите на <a href="mailto:info@korsprod.ru">info@korsprod.ru</a></div>'+
      '</div>';
    document.getElementById('qMsgr').querySelectorAll('.msgr').forEach(function(b){
      b.addEventListener('click',function(){
        document.getElementById('qMsgr').querySelectorAll('.msgr').forEach(function(x){x.classList.remove('sel')});
        b.classList.add('sel');
      });
    });
    document.getElementById('qBack').addEventListener('click',function(){quizState.step--;renderQuiz()});
    document.getElementById('qSubmit').addEventListener('click',function(){
      var n=document.getElementById('qName'),p=document.getElementById('qPhone'),a=document.getElementById('qAgree');
      if(!n.value.trim()){n.focus();return}
      if(p.value.trim().length<5){p.focus();return}
      if(!a.checked){a.focus();return}
      qBar.style.width='100%';
      qLabel.textContent='Готово';
      qHint.textContent='Спасибо! Обычно отвечаем в течение 10 минут в рабочее время.';
      qc.innerHTML='<div class="quiz-done"><div class="big">🔥</div><h3>Заявка принята</h3><p>Свяжемся в выбранном мессенджере, зададим пару уточняющих вопросов и пришлём план запуска с вилкой стоимости.</p></div>';
    });
  }
}
renderQuiz();
</script>

BACKUP rec3164359801 · главная · блок аудита · 13718 симв.
<!-- KORS · БЕСПЛАТНЫЙ АУДИТ · блок T123 · окно видеозвонка с демонстрацией экрана -->
<style>
/* ================= ДЕСКТОП ================= */
.kaud{--bg:#0C0C0E;--border:#2A2A2E;--text:#F5F3EF;--muted:#9A9A9A;--accent:#6D5DFB;background:var(--bg);color:var(--text);font-family:'Manrope',Arial,sans-serif;padding:84px 40px 92px;overflow:hidden}
.kaud *{box-sizing:border-box}
.kaud__wrap{max-width:1240px;margin:0 auto}

/* ----- окно видеозвонка ----- */
.kaud__win{border:1px solid var(--border);border-radius:16px;overflow:hidden;background:linear-gradient(160deg,#17171C,#111114);box-shadow:0 30px 70px rgba(0,0,0,.45)}
.kaud__bar{display:flex;align-items:center;gap:14px;padding:12px 16px;background:#101013;border-bottom:1px solid var(--border)}
.kaud__dots{display:flex;gap:6px;flex:0 0 auto}
.kaud__dots i{display:block;width:10px;height:10px;border-radius:50%;background:#4A4A52}
.kaud__barlabel{font-size:12px;letter-spacing:.02em;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kaud__rec{margin-left:auto;flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;font-family:'Unbounded',sans-serif;font-size:10px;font-weight:600;letter-spacing:.12em;color:#fff;background:#D2342B;border-radius:6px;padding:5px 9px;line-height:1}
.kaud__rec:before{content:"";width:6px;height:6px;border-radius:50%;background:#fff;animation:kaudBlink 1.5s infinite ease-in-out}
@keyframes kaudBlink{0%,100%{opacity:1}50%{opacity:.2}}

.kaud__body{display:grid;grid-template-columns:2.161fr 1fr;min-height:0}

/* ----- левая колонка: демонстрация экрана ----- */
.kaud__share{position:relative;display:block;padding:0;border-right:1px solid var(--border);background:radial-gradient(120% 120% at 50% 0%,#1C1C23 0%,#0D0D10 72%)}
/* слот записи экрана: залит во всю ширину окна, пропорция слота равна пропорции кадра 1200x514, поэтому обрезки нет */
.kaud__doc{position:relative;width:100%;max-width:none;aspect-ratio:1200 / 514;border-radius:0;box-shadow:none;background-size:cover;background-position:center;background-repeat:no-repeat;
/* файл: ekran_zapis_v2-1200.jpg */
background-color:#100E18;background-image:url('https://static.tildacdn.com/tild3231-6338-4130-a666-653466373037/ekran_zapis_v2-1200.jpg')}
/* аккуратные "строки" макета, уйдут вместе с подстановкой фото */
.kaud__doc:before{content:"";position:absolute;left:8%;right:8%;top:74%;height:3px;border-radius:2px;background:rgba(12,12,14,.14)}
.kaud__doc:after{content:"";position:absolute;left:8%;width:44%;top:82%;height:3px;border-radius:2px;background:rgba(12,12,14,.1)}
/* строки-заглушки макета выключены: в слоте теперь настоящая запись экрана */
.kaud__doc:before,.kaud__doc:after{display:none}

/* рамки-пометки */
.kaud__note{position:absolute;border:2px solid var(--accent);border-radius:4px;box-shadow:0 0 0 3px rgba(109,93,251,.16);opacity:0;transform:scale(.94)}
.kaud__tag{position:absolute;left:-2px;bottom:100%;margin-bottom:6px;display:inline-block;background:var(--accent);color:#fff;font-family:'Manrope',Arial,sans-serif;font-size:10px;font-weight:600;line-height:1;letter-spacing:.01em;padding:5px 8px;border-radius:5px;white-space:nowrap}
.kaud__note--1{left:7%;top:13%;width:64%;height:18%}
.kaud__note--2{left:9%;top:47%;width:56%;height:22%}
/* рамки-пометки выключены: такие же аннотации уже есть внутри самой записи экрана, подписи дублировались */
.kaud__note{display:none}
.kaud--in .kaud__note{animation:kaudPop .5s cubic-bezier(.2,.7,.3,1) forwards}
.kaud--in .kaud__note--1{animation-delay:.5s}
.kaud--in .kaud__note--2{animation-delay:1.5s}
@keyframes kaudPop{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.kaud--in .kaud__note{animation:none;opacity:1;transform:none}.kaud__rec:before{animation:none}}

/* ----- правая колонка: участники ----- */
.kaud__people{display:flex;flex-direction:column;background:#101013}
.kaud__person{position:relative;flex:1 1 50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:24px;background-size:cover;background-position:center;background-repeat:no-repeat;
/* кадр лежит в переменной --ph, поверх него лёгкий графитовый слой, чтобы подписи читались */
background-color:#141419;background-image:linear-gradient(to top,rgba(16,14,24,.30) 0%,rgba(16,14,24,.24) 55%,rgba(16,14,24,.18) 100%),var(--ph)}
/* участник со стороны KORS */
/* в кадре продюсера снизу впечатана подпись Aleksandr Volkov (Producer): кадр приближен на 6 процентов и посажен по верхнему краю, подпись уходит за обрез, лицо остаётся по центру */
.kaud__person--kors{--ph:url('https://static.tildacdn.com/tild3638-6439-4366-a238-613761373163/prodavan-1200.jpg');background-size:auto,auto 106%;background-position:center,center top}
/* участник со стороны клиента */
.kaud__person--you{--ph:url('https://static.tildacdn.com/tild3435-6335-4136-b239-343538316366/klient-1200.jpg')}
/* KORS: кадр клиента отражён по горизонтали средствами CSS, сам файл не пересохранялся. Подпись внутри слота отражаем обратно, чтобы текст читался нормально. */
.kaud__person--you{transform:scaleX(-1)}
.kaud__person--you > *{transform:scaleX(-1)}
.kaud__person + .kaud__person{border-top:1px solid var(--border)}
/* подписи роли поверх плиток: вверху справа, вместо круглых бейджей */
.kaud__role{position:absolute;top:12px;right:12px;font-family:'Manrope',Arial,sans-serif;font-size:12px;font-weight:700;line-height:1;letter-spacing:.01em;color:#fff;background:rgba(109,93,251,.94);border:1px solid transparent;border-radius:7px;padding:6px 10px;box-shadow:0 8px 20px rgba(0,0,0,.38)}
.kaud__person--you .kaud__role{background:rgba(20,18,26,.86);border:1px solid rgba(245,243,239,.24);color:#F5F3EF}

/* ----- нижняя часть ----- */
.kaud__head{margin:0 0 30px}
.kaud__head .kaud__title{margin-bottom:0}
.kaud__info{padding:30px 0 0}
.kaud__eyebrow{font-family:'Unbounded',sans-serif;font-size:12px;font-weight:600;letter-spacing:.14em;color:var(--accent);margin-bottom:14px;display:flex;align-items:center;gap:8px}
.kaud__eyebrow:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px rgba(109,93,251,.65)}
.kaud__title{font-family:'Unbounded',sans-serif;font-size:clamp(26px,3.2vw,42px);line-height:1.15;letter-spacing:-.02em;font-weight:700;max-width:900px;margin:0 0 16px}
.kaud__lead{font-size:17px;line-height:1.55;color:#C9C7C2;max-width:780px;margin:0 0 34px}
.kaud__foot{display:flex;align-items:flex-end;justify-content:space-between;gap:40px}
.kaud__steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;flex:1 1 auto}
.kaud__steps li{border-top:1px solid var(--border);padding-top:14px}
.kaud__steps b{display:block;font-size:15px;font-weight:700;color:var(--text);margin-bottom:5px}
.kaud__steps i{display:block;font-style:normal;font-size:14px;line-height:1.4;color:var(--muted)}
.kaud__btn{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;background:var(--accent);color:#fff!important;text-decoration:none!important;font-family:'Manrope',Arial,sans-serif;font-size:16px;font-weight:700;line-height:1;padding:18px 30px;border-radius:40px;box-shadow:0 14px 34px rgba(109,93,251,.32);transition:transform .2s ease,box-shadow .2s ease}
.kaud__btn:hover{transform:translateY(-2px);box-shadow:0 18px 40px rgba(109,93,251,.42)}

/* ================= ПЛАНШЕТ ================= */
@media screen and (min-width:641px) and (max-width:1000px){
.kaud{padding:68px 24px 76px}
.kaud__body{grid-template-columns:2.161fr 1fr;min-height:0}
.kaud__share{padding:0}
.kaud__role{top:10px;right:10px;font-size:11px;padding:5px 9px}
.kaud__head{margin-bottom:26px}
.kaud__info{padding:26px 0 0}
.kaud__lead{font-size:16px;margin:0 0 26px}
.kaud__foot{display:block}
.kaud__steps{gap:16px}
.kaud__btn{margin-top:26px;width:100%}
}

/* ================= МОБИЛЬНАЯ ВЕРСИЯ · отдельная вёрстка, проверено на 390px ================= */
@media screen and (max-width:640px){
.kaud{padding:52px 16px 58px}
.kaud__wrap{max-width:100%}
.kaud__win{border-radius:12px;box-shadow:0 16px 34px rgba(0,0,0,.4)}
.kaud__bar{padding:9px 11px;gap:9px}
.kaud__dots{gap:5px}
.kaud__dots i{width:8px;height:8px}
.kaud__barlabel{font-size:10px}
.kaud__rec{font-size:8px;letter-spacing:.1em;padding:4px 7px;gap:5px;border-radius:5px}
.kaud__rec:before{width:5px;height:5px}
.kaud__body{display:block;min-height:0}
.kaud__share{display:block;padding:0;border-right:0;border-bottom:1px solid var(--border)}
.kaud__doc{max-width:100%;border-radius:0;box-shadow:none;background-size:cover;background-position:center}
.kaud__note{border-width:1.5px;box-shadow:0 0 0 2px rgba(109,93,251,.14);border-radius:3px}
.kaud__tag{font-size:8px;padding:3px 5px;border-radius:4px;margin-bottom:4px;left:-1.5px}
.kaud__note--1{left:6%;top:15%;width:70%;height:17%}
.kaud__note--2{left:8%;top:49%;width:64%;height:21%}
.kaud__people{display:flex;flex-direction:row;width:100%;height:120px}
/* мобильные плитки: кадр по центру, слой чуть плотнее снизу, там подписи */
.kaud__person{flex:1 1 50%;height:120px;padding:10px;gap:8px;background-image:linear-gradient(to top,rgba(16,14,24,.30) 0%,rgba(16,14,24,.25) 55%,rgba(16,14,24,.20) 100%),var(--ph);background-position:center}
/* на мобилке кадр продюсера остаётся cover: впечатанная подпись там уже уходит за обрез по горизонтали */
.kaud__person--kors{background-size:auto,cover}
.kaud__person + .kaud__person{border-top:0;border-left:1px solid var(--border)}
.kaud__role{top:8px;right:8px;font-size:10px;padding:4px 8px;border-radius:6px}
.kaud__head{margin-bottom:22px}
.kaud__info{padding:22px 0 0}
.kaud__eyebrow{font-size:10px;letter-spacing:.12em;margin-bottom:10px;gap:7px}
.kaud__eyebrow:before{width:6px;height:6px}
.kaud__title{font-size:25px;line-height:1.18;max-width:100%;margin:0 0 12px}
.kaud__lead{font-size:15px;line-height:1.5;max-width:100%;margin:0 0 22px}
.kaud__foot{display:block}
.kaud__steps{display:block;grid-template-columns:none;gap:0}
.kaud__steps li{padding-top:11px;margin-bottom:14px}
.kaud__steps b{font-size:14px;margin-bottom:4px}
.kaud__steps i{font-size:13px}
.kaud__btn{display:flex;width:100%;font-size:15px;padding:17px 20px;border-radius:34px;margin-top:6px}
.kaud__btn:hover{transform:none;box-shadow:0 14px 34px rgba(109,93,251,.32)}
}
</style>
<noscript><style>.kaud__note{opacity:1!important;transform:none!important}</style></noscript>

<section class="kaud" aria-labelledby="kaud-title">
<div class="kaud__wrap">

<div class="kaud__head">
<div class="kaud__eyebrow">БЕСПЛАТНЫЙ АУДИТ</div>
<h2 class="kaud__title" id="kaud-title">Аудит ваших рекламных материалов и сайта бесплатно</h2>
</div>

<div class="kaud__win" aria-hidden="true">
<div class="kaud__bar">
<span class="kaud__dots"><i></i><i></i><i></i></span>
<span class="kaud__barlabel">Аудит материалов · демонстрация экрана</span>
<span class="kaud__rec">ЗАПИСЬ</span>
</div>
<div class="kaud__body">
<div class="kaud__share">
<div class="kaud__doc" role="img" aria-label="Запись экрана: разбор сайта производственной компании, пометками отмечены слабые места"><!-- фото: ekran_zapis_v2-1200.jpg -->
<div class="kaud__note kaud__note--1"><span class="kaud__tag">заголовок не про клиента</span></div>
<div class="kaud__note kaud__note--2"><span class="kaud__tag">нет кадров производства</span></div>
</div>
</div>
<div class="kaud__people">
<div class="kaud__person kaud__person--kors" role="img" aria-label="Продюсер KORS на видеозвонке разбирает материалы клиента"><!-- фото: prodavan-1200.jpg --><span class="kaud__role">Продюсер</span></div>
<div class="kaud__person kaud__person--you" role="img" aria-label="Руководитель производственной компании на видеозвонке за рабочим столом"><!-- фото: klient-1200.jpg --><span class="kaud__role">Клиент</span></div>
</div>
</div>
</div>

<div class="kaud__info">
<p class="kaud__lead">Организуем звонок на 10-15 минут, где подробно расскажем, что можно улучшить. Звонок запишем, видео с рекомендациями останется у вас.</p>
<div class="kaud__foot">
<ul class="kaud__steps">
<li><b>Пришлите материалы</b><i>сайт, презентация, каталог, видео</i></li>
<li><b>Созвон 10-15 минут</b><i>проходим по вашим файлам</i></li>
<li><b>Запись у вас</b><i>рекомендации в видео</i></li>
</ul>
<a class="kaud__btn" href="#popup:razbor">Получить бесплатный аудит</a>
</div>
</div>

</div>
</section>

<script>
/* появление рамок-пометок: считаем видимость сами, IntersectionObserver только как ускоритель */
(function(){
  var tries = 0;
  function boot(){
    var sec = document.querySelector(".kaud");
    if(!sec){ tries++; if(tries < 80){ setTimeout(boot, 250); } return; }
    var shown = false;
    function on(){
      if(shown){ return; }
      shown = true;
      sec.classList.add("kaud--in");
      window.removeEventListener("scroll", check);
      window.removeEventListener("resize", check);
    }
    function check(){
      var r = sec.getBoundingClientRect();
      var vh = window.innerHeight || document.documentElement.clientHeight;
      if(r.top < vh * 0.9 && r.bottom > 0){ on(); }
    }
    window.addEventListener("scroll", check, false);
    window.addEventListener("resize", check, false);
    check();
    setTimeout(check, 800);
    setTimeout(check, 2500);
    try{
      if(typeof window.IntersectionObserver === "function"){
        var io = new window.IntersectionObserver(function(en){
          for(var k = 0; k < en.length; k++){ if(en[k].isIntersecting){ on(); io.disconnect(); break; } }
        }, { threshold: 0.15 });
        io.observe(sec);
      }
    }catch(e){}
  }
  if(document.readyState === "loading"){ document.addEventListener("DOMContentLoaded", boot); } else { boot(); }
})();
</script>

BACKUP rec2663623901 · главная · НАШИ РАБОТЫ · десктоп · 24693 симв.
<!-- ===== KORS · НАШИ РАБОТЫ · ДЕСКТОП · блок T123. Показывать ТОЛЬКО на компьютере. ===== -->
<div class="kgald">
  <div class="kgald__head">
    <div class="kgald__eyebrow">- НАШИ РАБОТЫ</div>
    <h2 class="kgald__title">460+ проектов: найдите свою отрасль.</h2>
    <div class="kgald__sub">Сфера, формат и срок по каждому проекту. Нажмите «Смотреть полное видео» - откроется на весь экран.</div>
  </div>
  
    <div class="kgald__grid" id="kgaldTop"></div>
  <div class="kgald__hidden" id="kgaldHidden"><div class="kgald__grid" id="kgaldRest"></div></div>
  <div class="kgald__empty" id="kgaldEmpty">По этой услуге в подборке пока нет проектов.</div>
    <div class="kgald__morewrap"><button class="kgald__more" id="kgaldMore"><span class="kgald__mtext">Смотреть все работы</span> <span class="kgald__count">+9</span></button></div>
    <div class="kgald__group" id="kgaldExpWrap">
    <div class="kgald__ghead">
      <div class="kgald__eyebrow">- ГОВОРИМ О ВИДЕО</div>
      <h3 class="kgald__gtitle">Экспертные ролики студии</h3>
      <div class="kgald__gsub">Наш собственный контент, не клиентские заказы: как устроен продакшен, из чего складывается цена и что делает видео рабочим инструментом.</div>
    </div>
    <div class="kgald__grid" id="kgaldExp"></div>
  </div>
  <div class="kgald__lb" id="kgaldLb"><div class="kgald__lbbd"></div><div class="kgald__lbbox"><button class="kgald__lbx" id="kgaldLbx">×</button><div class="kgald__lbframe"><iframe id="kgaldLbIframe" allow="autoplay; fullscreen; encrypted-media; picture-in-picture" allowfullscreen></iframe></div></div></div>
</div>
<style>
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Unbounded:wght@400;600;700;800&display=swap');
.kgald{--bg:#0C0C0E;--raise:#141416;--card:#1B1B1F;--border:#2A2A2E;--text:#F5F3EF;--muted:#9A9A9A;--faint:#6a6a6e;--accent:#6D5DFB;--glow:rgba(109,93,251,.14);
  box-sizing:border-box;background:var(--bg);color:var(--text);font-family:'Manrope',Arial,sans-serif;-webkit-font-smoothing:antialiased;padding:80px 5vw 90px;}
.kgald *{box-sizing:border-box;margin:0;padding:0;}
.kgald__head{max-width:1240px;margin:0 auto 44px;text-align:center;}
.kgald__eyebrow{font-family:'Unbounded';font-size:12px;letter-spacing:.14em;color:var(--accent);margin-bottom:14px;}
.kgald__title{font-family:'Unbounded';font-weight:700;font-size:clamp(30px,3.4vw,48px);letter-spacing:-.02em;margin-bottom:14px;}
.kgald__sub{color:var(--muted);font-size:16px;line-height:1.5;max-width:560px;margin:0 auto;}
.kgald__grid{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.kgald__card{background:var(--raise);border:1px solid var(--border);border-radius:16px;overflow:hidden;transition:.25s;display:flex;flex-direction:column;}
.kgald__card:hover{border-color:rgba(109,93,251,.5);transform:translateY(-3px);box-shadow:0 16px 40px rgba(0,0,0,.4);}
.kgald__video{position:relative;width:100%;aspect-ratio:16/9;background:#000;}
.kgald__video iframe{position:absolute;inset:0;width:100%;height:100%;border:none;pointer-events:none;}
.kgald__body{padding:20px 20px 22px;display:flex;flex-direction:column;flex:1;}
.kgald__name{font-family:'Unbounded';font-weight:700;font-size:20px;margin-bottom:10px;letter-spacing:-.01em;}
.kgald__meta{display:flex;flex-direction:column;gap:6px;margin-bottom:18px;}
.kgald__row{font-size:14px;color:var(--muted);line-height:1.4;}
.kgald__row b{color:var(--text);font-weight:600;}
.kgald__full--nolink{cursor:default}
.kgald__full{margin-top:auto;display:inline-flex;align-items:center;gap:8px;align-self:flex-start;background:transparent;border:1px solid var(--border);color:var(--text);font-family:'Manrope';font-weight:700;font-size:14px;padding:12px 18px;border-radius:9px;cursor:pointer;transition:.2s;}
.kgald__full:hover{border-color:var(--accent);color:var(--accent);}
.kgald__full svg{width:15px;height:15px;flex:none;}
.kgald__hidden{max-width:1240px;margin:0 auto;max-height:0;overflow:hidden;opacity:0;transition:max-height .55s ease,opacity .4s ease,margin-top .4s ease;margin-top:0;}
.kgald__hidden.open{opacity:1;margin-top:22px;}
.kgald__morewrap{text-align:center;margin-top:40px;}
.kgald__more{display:inline-flex;align-items:center;gap:10px;background:var(--accent);color:#fff;font-family:'Manrope';font-weight:700;font-size:15px;padding:16px 30px;border-radius:9px;border:none;cursor:pointer;transition:.25s;}
.kgald__more:hover{transform:translateY(-2px);box-shadow:0 10px 30px var(--glow);}
.kgald__count{font-family:'Unbounded';font-size:12px;background:rgba(0,0,0,.18);padding:3px 8px;border-radius:20px;}
.kgald__more.is-open .kgald__count{display:none;}
.kgald__lb{position:fixed;inset:0;z-index:99999;display:none;align-items:center;justify-content:center;padding:40px;}
.kgald__lb.open{display:flex;}
.kgald__lbbd{position:absolute;inset:0;background:rgba(4,4,6,.9);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);}
.kgald__lbbox{position:relative;width:min(1100px,100%);}
.kgald__lbframe{position:relative;width:100%;aspect-ratio:16/9;background:#000;border-radius:12px;overflow:hidden;border:1px solid var(--border);}
.kgald__lbframe iframe{position:absolute;inset:0;width:100%;height:100%;border:none;}
.kgald__lbx{position:absolute;top:-46px;right:0;width:38px;height:38px;border-radius:9px;background:var(--raise);border:1px solid var(--border);color:var(--text);font-size:22px;line-height:1;cursor:pointer;}
.kgald__lbx:hover{border-color:var(--accent);color:var(--accent);}
.kgald__filter{max-width:1240px;margin:0 auto 26px;display:flex;flex-wrap:nowrap;gap:8px;justify-content:center;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;padding-bottom:2px;}
.kgald__filter::-webkit-scrollbar{display:none;}
.kgald__fbtn{flex:none;background:transparent;border:1px solid var(--border);color:var(--muted);font-family:'Manrope',Arial,sans-serif;font-weight:600;font-size:13px;padding:9px 16px;border-radius:20px;cursor:pointer;transition:.2s;white-space:nowrap;}
.kgald__fbtn:hover{border-color:rgba(109,93,251,.5);color:var(--text);}
.kgald__fbtn.is-active{background:var(--accent);border-color:var(--accent);color:#fff;}
.kgald__tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px;}
.kgald__tag{font-family:'Manrope',Arial,sans-serif;font-weight:600;font-size:9px;line-height:1;text-transform:uppercase;letter-spacing:.14em;color:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.22);border-radius:4px;padding:5px 8px;white-space:nowrap;}
.kgald__desc{font-size:12px;line-height:1.5;color:var(--muted);margin-bottom:14px;}
.kgald__card.is-off{opacity:0;transform:translateY(6px);}
.kgald__empty{max-width:1240px;margin:0 auto;text-align:center;color:var(--muted);font-size:15px;padding:34px 0;display:none;}
.kgald__empty.on{display:block;}
@media (max-width:900px){ .kgald__grid{grid-template-columns:repeat(2,1fr);} .kgald__filter{justify-content:flex-start;} }
@media (max-width:480px){ .kgald{display:none;} }
#rec2663623901 .kgald__count{color:#fff;background:rgba(0,0,0,.32);}
/* KORS: экспертные ролики вынесены в отдельную группу со своим заголовком, поэтому плашка на карточке больше не нужна. */
.kgald__group{margin-top:88px;}
.kgald__ghead{max-width:1240px;margin:0 auto 34px;text-align:center;}
.kgald__gtitle{font-family:'Unbounded';font-weight:700;font-size:clamp(24px,2.4vw,34px);letter-spacing:-.02em;margin-bottom:12px;}
.kgald__gsub{color:var(--muted);font-size:15px;line-height:1.5;max-width:560px;margin:0 auto;}
</style>
<script>
(function(){
  var SLUG={'Видео':'video','Фотосъёмка':'photo','Сайт':'site','Презентация':'presentation','Фирменный стиль':'brand','Реклама':'ads','Дизайн':'design','Трансляция':'live','Продюсирование':'producing'};
  var works=[
    {id:'pd95FJSRFhF27W4YX4ioJJ', full:'3ZsxHkdEuHUubxSAQZDRyG', name:'Одоевские консервы - фильм о заводе', tags:['Видео','Фирменный стиль'], desc:'Показали производство изнутри: цеха, линии, контроль качества. Видео работает на сайте, в переговорах с сетями и на выставках.', alt:'Фильм о заводе Одоевские консервы: цеха, линии и контроль качества'},
    {id:'xgBCJrU3Fy9CtKDXR9R23S', full:'0GfobL6RnAzhPeiopXjNHS', name:'Invoicebox - о компании', sphere:'финансовые технологии (FinTech)', format:'презентационный ролик о компании', term:'6 дней', tags:['Видео','Реклама'], desc:'Имиджевый ролик о платёжном сервисе: чем занимается компания и какие задачи бизнеса закрывает.', alt:'Имиджевый ролик о платёжном сервисе Invoicebox'},
    {id:'iPcFsLF3eYfDYTauhcgjZj', full:'fv7FAnLfbLaDaNJLtSQ74H', name:'Вистекс', sphere:'производство, предприятие', format:'презентационный ролик', term:'15 дней', tags:['Видео','Дизайн'], desc:'Ролик о заводе: восемь направлений производства за три минуты. Дизайн email-письма со встроенным видео для коммерческих предложений.', alt:'Видео о производстве для завода Вистекс'},
    {id:'bZ8JyozhtKdSDiy5xjLoVr', full:'caSE37WujsGB6usgZewyUt', name:'Ресторан Rumi / «ЗНАТЬ»', sphere:'ресторанный бизнес, мероприятия', format:'видео-отчёт о мероприятии', term:'2 дня', tags:['Видео','Трансляция','Презентация'], desc:'Съёмка мероприятий, прямая трансляция и презентации для ресторана.', alt:'Съёмка мероприятия и трансляция для ресторана Rumi'},
    {id:'uiVqp8dWpzNoBt2GweBLs9', full:'vF4hbgW4Umo6U4dDNUFvwv', name:'Новая Формация', sphere:'организация, бизнес', format:'презентационный ролик', term:'4 дня', tags:['Видео','Дизайн'], desc:'Презентационный ролик, афиша и ведение контента.', alt:'Презентационный ролик для проекта Новая Формация'},
    {id:'gHMF2zBsAdSdbcEH9wSZKh', full:'kfd6wYQdCh72VpRPC74Mfs', name:'Редакция ЭКСМО', sphere:'издательский бизнес', format:'съёмка трейлера по сюжету книги', term:'9 дней', tags:['Видео','Дизайн'], desc:'Трейлер книги и афиша для издательства.', alt:'Книжный трейлер для издательства Редакция ЭКСМО'},
    {id:'sRSLqBbjkRWyn31BrY6iny', full:'mZiwnH9uZAdc15hhRsqPvB', name:'Одоевские консервы - термостабильные начинки', tags:['Видео'], desc:'Продуктовый ролик о линейке: как начинки ведут себя при выпечке и что это даёт производителю.', alt:'Продуктовый ролик о термостабильных начинках Одоевские консервы'},
    {id:'uqJ79iyVPcqN1ZtTtjnkAv', full:'gznTZhdFQeZEKZnidVaTbk', name:'GosObmen', sphere:'финансовые услуги', format:'рекламный ролик', term:'3 дня', tags:['Видео','Сайт','Дизайн'], desc:'Рекламные ролики, тексты и сайт. Собрали скрипт для отдела продаж.', alt:'Рекламный ролик и сайт для сервиса Гособмен'},
    {id:'35XkXms5VN3RLJcYsgWsnD', full:'2FXfjS6hYEvLkWNKUveoBx', name:'Invoicebox - оплата в белорусских рублях', tags:['Видео'], desc:'Объясняющий ролик о выходе платёжного сервиса на рынок Беларуси: как принимать оплату в белорусских рублях.', alt:'Ролик об оплате в белорусских рублях в платёжном сервисе Invoicebox'},
    {id:'5zMvPKfeuDf9N7h7P8KuVe', full:'ePXSSA9qFiEgA5WYRdd4FP', name:'Алтай Серикбай - съёмки для личного бренда', tags:['Видео'], desc:'Снимаем контент для эксперта по личностному развитию: студийные выпуски, разговорные форматы, съёмки на ретритах. За время работы - больше десяти роликов.', alt:'Съёмки для личного бренда эксперта по личностному развитию Алтая Серикбая'},
    {id:'bKeihzPbnEbXZarkMcYQZj', full:'6ivtiXKAcQj4dVJN8H1YWs', name:'MediaLive - отчётный ролик с выставки', tags:['Видео','Реклама'], desc:'Сняли отчётное видео с отраслевого события. Организаторы используют его на сайте и в рекламе следующего сезона.', alt:'Отчётный ролик с отраслевой выставки для MediaLive'},
    {id:'8QbWRspZgkLTicEiQpp9su', full:'8QbWRspZgkLTicEiQpp9su', name:'STROBBS - промо зимней коллекции', tags:['Видео','Реклама'], desc:'Проморолик показа новой зимней коллекции российского бренда обуви и одежды.', alt:'Проморолик показа зимней коллекции бренда обуви и одежды STROBBS'},
    {id:'88SCanh4aPU83UFBmThiVa', full:'mJqjXaKQBrdbvirxUTHLLh', name:'Rockstar - клип «На дне»', tags:['Видео'], desc:'Музыкальный клип для артиста.', alt:'Музыкальный клип На дне для артиста Rockstar'},
    {id:'wLtMKZCpf75eYEWMXPEPZY', full:'7Kxs8xzVfCDLtyuG5puNN1', name:'Рокстар', sphere:'медиа', format:'музыкальный клип', term:'12 дней', tags:['Видео','Дизайн'], desc:'Три клипа и обложки для музыкального проекта.', alt:'Музыкальные клипы для проекта Рокстар'},
    {id:'qAV5wXg5oHKKcY6tbgysZd', full:'okapERMYWfdoGagPRmo7uC', name:'Rockstar - клип «Самая грустная песня»', tags:['Видео'], desc:'Первый клип, который мы сняли для артиста.', alt:'Музыкальный клип Самая грустная песня для артиста Rockstar'},
    {id:'vNYi5w7HiQevkdBbPmQ3CR', full:'vNYi5w7HiQevkdBbPmQ3CR', name:'Ювелирный лофт GOLD - ролик о компании', tags:['Видео'], desc:'Рассказали о компании и о том, чем она занимается.', alt:'Ролик о компании для ювелирного лофта GOLD'},
    {id:'6JcPdvqUchXCmzscbTqaos', full:'sRyZwPm3BS9CVspVi2sLx3', name:'Одоевские консервы - нетермостабильные начинки', tags:['Видео'], desc:'Второй ролик линейки: назначение, состав, применение в готовых изделиях.', alt:'Продуктовый ролик о нетермостабильных начинках Одоевские консервы'},
    {id:'8YSeQnzXxmpkmo7uNNcLrF', full:'43yfJckoZggrVouaMMK4zt', name:'YouTube-шоу', sphere:'медиа', format:'съёмка выпусков', term:'14 дней', tags:['Видео','Продюсирование','Реклама'], desc:'Продюсирование и режиссура шоу: съёмка выпусков и рекламное сопровождение.', alt:'Съёмка выпусков YouTube-шоу'},
    {id:'7akHJzKdcoSrPiHtRbRBqk', full:'7akHJzKdcoSrPiHtRbRBqk', name:'Invoicebox - интернет-магазины за пару кликов', tags:['Видео'], desc:'Продуктовый ролик о конструкторе интернет-магазинов внутри сервиса.', alt:'Ролик о конструкторе интернет-магазинов в сервисе Invoicebox'},
    {id:'b66cpVCFFFVycfDvLFXFR3', full:'b66cpVCFFFVycfDvLFXFR3', name:'Invoicebox - как выставить счёт за пару кликов', tags:['Видео'], desc:'Видеоинструкция для пользователей сервиса: выставление счёта по шагам.', alt:'Видеоинструкция по выставлению счёта в сервисе Invoicebox'},
    {id:'eCGHEdUFdSyEjCBXxcsUSC', full:'geGWgessLoxkUKdQ4d4e1q', name:'Шоурил KORS Production', sphere:'создание контента', format:'актуальные работы', term:'2025-й год', tags:['Видео','Продюсирование'], desc:'Шоурил студии: съёмки на производствах и коммерческие проекты разных лет.', alt:'Актуальные работы студии KORS Production'},
    {id:'dsqVruz3QkCKQESGiTUsVR', full:'dsqVruz3QkCKQESGiTUsVR', name:'Ваш продакшен вас обманывает', tags:['Видео'], kors:true, alt:'Экспертное видео KORS: почему продакшен может обманывать заказчика'},
    {id:'uittTC7uyz9hv4HDirTBAG', full:'uittTC7uyz9hv4HDirTBAG', name:'Видео - это не украшение для бизнеса', tags:['Видео'], kors:true, alt:'Экспертное видео KORS о том, зачем бизнесу видео'},
    {id:'aG3Qkc4VfoCcgtJLz6ivbE', full:'aG3Qkc4VfoCcgtJLz6ivbE', name:'Как сэкономить на видеоролике', tags:['Видео'], kors:true, alt:'Экспертное видео KORS о том, как сэкономить на съёмке ролика'},
    {id:'4pzsMBSzheH3Sarx4UFHMd', full:'4pzsMBSzheH3Sarx4UFHMd', name:'Как сделать продающее видео', tags:['Видео'], kors:true, alt:'Экспертное видео KORS о том, как сделать продающее видео'},
    {id:'kkQyUoC94bPxEGxq9UmMzj', full:'kkQyUoC94bPxEGxq9UmMzj', name:'Как правильно писать нам правки', tags:['Видео'], kors:true, desc:'Как формулировать правки, чтобы их внесли быстро и с первого раза.', alt:'Экспертное видео KORS о том, как правильно присылать правки по проекту'},
    {id:'5r45VM9UQsJWhAAh8w9zQK', full:'5r45VM9UQsJWhAAh8w9zQK', name:'Как подготовиться до старта проекта', tags:['Видео'], kors:true, desc:'Что собрать и решить до старта, чтобы проект пошёл без задержек.', alt:'Экспертное видео KORS о подготовке к старту проекта'},
    {id:'5JNE6gLppoDPJxPXRiLFV8', full:'5JNE6gLppoDPJxPXRiLFV8', name:'Подготовка к съёмочному дню', tags:['Видео'], kors:true, desc:'Как подготовить площадку и людей, чтобы съёмочный день прошёл по плану.', alt:'Экспертное видео KORS о подготовке к съёмочному дню'}
  ];
  var FS='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="5 3 19 12 5 21 5 3"/></svg>';
  var lb=document.getElementById('kgaldLb'), lbf=document.getElementById('kgaldLbIframe');
  function openLb(id){ lbf.src='https://kinescope.io/embed/'+id+'?autoplay=true'; lb.classList.add('open'); }
  function closeLb(){ lb.classList.remove('open'); lbf.src=''; }
  document.getElementById('kgaldLbx').addEventListener('click',closeLb);
  lb.querySelector('.kgald__lbbd').addEventListener('click',closeLb);
  document.addEventListener('keydown',function(e){ if((e.key==='Escape'||e.keyCode===27)&&lb.classList.contains('open'))closeLb(); });
  function makeCard(w, defer){
    var card=document.createElement('div'); card.className='kgald__card';
    card.setAttribute('data-tags',(w.tags||[]).map(function(t){return SLUG[t]||'';}).join(' '));
    var ttl=(w.alt||w.name).replace(/"/g,'&quot;');
    var q='?autoplay=true&muted=true&loop=true&controls=false&playsInline=true&background=true';
    var ift= defer ? '<iframe data-src="https://kinescope.io/embed/'+w.id+q+'" title="'+ttl+'" aria-label="'+ttl+'" allow="autoplay; fullscreen; encrypted-media; picture-in-picture" allowfullscreen></iframe>'
                   : '<iframe loading="lazy" src="https://kinescope.io/embed/'+w.id+q+'" title="'+ttl+'" aria-label="'+ttl+'" allow="autoplay; fullscreen; encrypted-media; picture-in-picture" allowfullscreen></iframe>';
    var tagsHtml=(w.tags&&w.tags.length)?'<div class="kgald__tags">'+w.tags.map(function(t){return '<span class="kgald__tag">'+t+'</span>';}).join('')+'</div>':'';
    var descHtml=w.desc?'<p class="kgald__desc">'+w.desc+'</p>':'';
    var metaHtml='';
    if(w.sphere||w.format||w.term){ metaHtml='<div class="kgald__meta">'+(w.sphere?'<div class="kgald__row"><b>Сфера:</b> '+w.sphere+'</div>':'')+(w.format?'<div class="kgald__row"><b>Формат:</b> '+w.format+'</div>':'')+(w.term?'<div class="kgald__row"><b>Срок:</b> '+w.term+'</div>':'')+'</div>'; }
    card.innerHTML='<div class="kgald__video">'+ift+'</div><div class="kgald__body"><h3 class="kgald__name">'+w.name+'</h3>'+tagsHtml+descHtml+metaHtml+'<button class="kgald__full'+(w.full?'':' kgald__full--nolink')+'" '+(w.full?'':'aria-disabled="true"')+'>'+FS+'Смотреть полное видео</button></div>';
    if(w.full){ card.querySelector('.kgald__full').addEventListener('click',function(){ openLb(w.full); }); }
    return card;
  }
  var top=document.getElementById('kgaldTop'),rest=document.getElementById('kgaldRest'),box=document.getElementById('kgaldHidden'),more=document.getElementById('kgaldMore');
  var exp=document.getElementById('kgaldExp'), expwrap=document.getElementById('kgaldExpWrap');
  if(!top||!rest||!box||!more)return;
  /* KORS: превью грузятся не пачкой. Плеер получает src только когда карточка подходит к видимой области (запас 300px). Пока карточка спрятана под кнопкой (max-height:0) или скрыта фильтром (display:none), она не пересекается с экраном и ролик не стартует. */
  var io=('IntersectionObserver' in window)?new IntersectionObserver(function(es,ob){
    es.forEach(function(e){
      if(!e.isIntersecting) return;
      var f=e.target.querySelector('iframe[data-src]');
      if(f){ f.src=f.getAttribute('data-src'); f.removeAttribute('data-src'); }
      ob.unobserve(e.target);
    });
  },{root:null,rootMargin:'300px 0px',threshold:0.01}):null;
  function watch(c){
    if(io){ io.observe(c); return; }
    var f=c.querySelector('iframe[data-src]');
    if(f){ f.src=f.getAttribute('data-src'); f.removeAttribute('data-src'); }
  }
  function put(grid,w){ var c=makeCard(w,true); grid.appendChild(c); watch(c); }
  /* KORS: порог показа - 12 карточек, остальные под кнопкой. Экспертные ролики студии идут отдельной группой ниже, флаг kors в данных теперь отвечает за группировку. */
  var TOPN=12;
  var main=works.filter(function(w){return !w.kors;});
  var expert=works.filter(function(w){return !!w.kors;});
  main.slice(0,TOPN).forEach(function(w){put(top,w);});
  main.slice(TOPN).forEach(function(w){put(rest,w);});
  if(exp){ expert.forEach(function(w){put(exp,w);}); }
  var cntEl=more.querySelector('.kgald__count'); if(cntEl){ cntEl.textContent='+'+Math.max(0,main.length-TOPN); }
  var loaded=false, mt=more.querySelector('.kgald__mtext');
  more.addEventListener('click',function(){
    if(!box.classList.contains('open')){
      box.classList.add('open'); box.style.maxHeight=box.scrollHeight+'px';
      setTimeout(function(){if(box.classList.contains('open'))box.style.maxHeight='none';},600);
      more.classList.add('is-open'); mt.textContent='Свернуть';
    }else{
      box.style.maxHeight=box.scrollHeight+'px';
      requestAnimationFrame(function(){box.style.maxHeight='0px';box.classList.remove('open');});
      more.classList.remove('is-open'); mt.textContent='Смотреть все работы';
    }
  });
  window.addEventListener('resize',function(){if(box.classList.contains('open'))box.style.maxHeight='none';});

  /* фильтр по услугам: чистый JS, отбор по data-tags */
  var fwrap=document.getElementById('kgaldFilter'), empty=document.getElementById('kgaldEmpty'), morewrap=more.parentNode;
  function loadRest(){ /* KORS: пачкой больше не грузим - src ставит IntersectionObserver по мере прокрутки. */ }
  function setBox(open){
    if(open){ loadRest(); box.classList.add('open'); box.style.maxHeight='none'; }
    else { box.classList.remove('open'); box.style.maxHeight='0px'; }
  }
  if(fwrap){
    fwrap.addEventListener('click',function(e){
      var b=e.target.closest?e.target.closest('.kgald__fbtn'):null;
      if(!b) return;
      var f=b.getAttribute('data-f'), all=(f==='all'), shown=0, restShown=0, expShown=0;
      fwrap.querySelectorAll('.kgald__fbtn').forEach(function(x){ x.classList.toggle('is-active', x===b); });
      [top,rest,exp].filter(Boolean).forEach(function(grid){
        grid.querySelectorAll('.kgald__card').forEach(function(c){
          var m = all || ((' '+(c.getAttribute('data-tags')||'')+' ').indexOf(' '+f+' ')>-1);
          if(m){
            shown++; if(grid===rest) restShown++; if(grid===exp) expShown++;
            c.style.display='';
            void c.offsetWidth;
            c.classList.remove('is-off');
          } else {
            c.classList.add('is-off');
            setTimeout(function(){ if(c.classList.contains('is-off')) c.style.display='none'; },260);
          }
        });
      });
      if(all){
        setBox(false); morewrap.style.display='';
        more.classList.remove('is-open'); mt.textContent='Смотреть все работы';
      } else {
        setBox(restShown>0); morewrap.style.display='none';
      }
      if(expwrap) expwrap.style.display=(expShown>0)?'':'none';
      if(empty) empty.classList.toggle('on', shown===0);
    });
  }
})();
</script>
<script>
/* KORS · экспертные ролики: первые N, остальные под кнопкой · 01.09.2026 */
(function(){
  var N = 3;
  function init(){
    var grid = document.getElementById('kgaldExp');
    var wrap = document.getElementById('kgaldExpWrap');
    if(!grid || !wrap) return false;
    var cards = grid.querySelectorAll('.kgald__card');
    if(!cards.length) return false;
    if(document.getElementById('kgaldExpMore')) return true;
    if(cards.length <= N) return true;
    var hidden = document.createElement('div');
    hidden.className = 'kgald__hidden';
    hidden.id = 'kgaldExpHidden';
    var inner = document.createElement('div');
    inner.className = 'kgald__grid';
    hidden.appendChild(inner);
    for(var i = N; i < cards.length; i++){ inner.appendChild(cards[i]); }
    grid.parentNode.insertBefore(hidden, grid.nextSibling);
    var mw = document.createElement('div');
    mw.className = 'kgald__morewrap';
    var btn = document.createElement('button');
    btn.type = 'button';
    btn.className = 'kgald__more';
    btn.id = 'kgaldExpMore';
    btn.innerHTML = '<span class="kgald__mtext">Смотреть все ролики</span> <span class="kgald__count">+' + (cards.length - N) + '</span>';
    mw.appendChild(btn);
    hidden.parentNode.insertBefore(mw, hidden.nextSibling);
    var txt = btn.querySelector('.kgald__mtext');
    var cnt = btn.querySelector('.kgald__count');
    function fit(){ if(hidden.classList.contains('open')){ hidden.style.maxHeight = (inner.scrollHeight + 40) + 'px'; } }
    window.addEventListener('resize', fit);
    btn.addEventListener('click', function(){
      var open = hidden.classList.toggle('open');
      txt.textContent = open ? 'Свернуть' : 'Смотреть все ролики';
      cnt.style.display = open ? 'none' : '';
      if(open){ fit(); } else { hidden.style.maxHeight = ''; wrap.scrollIntoView({block:'start', behavior:'smooth'}); }
    });
    return true;
  }
  var tries = 0;
  (function poll(){ if(init()) return; if(++tries < 80) setTimeout(poll, 250); })();
})();
</script>

BACKUP rec2663636801 · главная · НАШИ РАБОТЫ · мобилка · 24472 симв.
<!-- ===== KORS · НАШИ РАБОТЫ · МОБИЛКА · блок T123. Показывать ТОЛЬКО на телефоне. ===== -->
<div class="kgalm">
  <div class="kgalm__head">
    <div class="kgalm__eyebrow">- НАШИ РАБОТЫ</div>
    <h2 class="kgalm__title">460+ проектов: найдите свою отрасль.</h2>
    <div class="kgalm__sub">Сфера, формат и срок по каждому проекту. «Смотреть полное видео» - на весь экран.</div>
  </div>
  
  <div class="kgalm__col" id="kgalmTop"></div>
  <div class="kgalm__hidden" id="kgalmHidden"><div class="kgalm__col" id="kgalmRest"></div></div>
  <div class="kgalm__empty" id="kgalmEmpty">По этой услуге в подборке пока нет проектов.</div>
  <div class="kgalm__morewrap"><button class="kgalm__more" id="kgalmMore"><span class="kgalm__mtext">Смотреть ещё наши работы</span> <span class="kgalm__count">+15</span></button></div>
    <div class="kgalm__group" id="kgalmExpWrap">
    <div class="kgalm__ghead">
      <div class="kgalm__eyebrow">- ГОВОРИМ О ВИДЕО</div>
      <h3 class="kgalm__gtitle">Экспертные ролики студии</h3>
      <div class="kgalm__gsub">Наш собственный контент, не клиентские заказы: как устроен продакшен, из чего складывается цена и что делает видео рабочим инструментом.</div>
    </div>
    <div class="kgalm__col" id="kgalmExp"></div>
  </div>
  <div class="kgalm__lb" id="kgalmLb"><div class="kgalm__lbbd"></div><div class="kgalm__lbbox"><button class="kgalm__lbx" id="kgalmLbx">×</button><div class="kgalm__lbframe"><iframe id="kgalmLbIframe" allow="autoplay; fullscreen; encrypted-media; picture-in-picture" allowfullscreen></iframe></div></div></div>
</div>
<style>
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Unbounded:wght@400;600;700;800&display=swap');
.kgalm{--bg:#0C0C0E;--raise:#141416;--card:#1B1B1F;--border:#2A2A2E;--text:#F5F3EF;--muted:#9A9A9A;--faint:#6a6a6e;--accent:#6D5DFB;--glow:rgba(109,93,251,.14);
  box-sizing:border-box;background:var(--bg);color:var(--text);font-family:'Manrope',Arial,sans-serif;-webkit-font-smoothing:antialiased;padding:56px 20px 64px;}
.kgalm *{box-sizing:border-box;margin:0;padding:0;}
.kgalm__head{margin:0 auto 30px;text-align:center;}
.kgalm__eyebrow{font-family:'Unbounded';font-size:11px;letter-spacing:.14em;color:var(--accent);margin-bottom:12px;}
.kgalm__title{font-family:'Unbounded';font-weight:700;font-size:26px;letter-spacing:-.02em;margin-bottom:12px;line-height:1.15;}
.kgalm__sub{color:var(--muted);font-size:14px;line-height:1.5;max-width:340px;margin:0 auto;}
.kgalm__col{display:flex;flex-direction:column;gap:18px;}
.kgalm__card{background:var(--raise);border:1px solid var(--border);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;}
.kgalm__video{position:relative;width:100%;aspect-ratio:16/9;background:#000;}
.kgalm__video iframe{position:absolute;inset:0;width:100%;height:100%;border:none;pointer-events:none;}
.kgalm__body{padding:18px 18px 20px;display:flex;flex-direction:column;}
.kgalm__name{font-family:'Unbounded';font-weight:700;font-size:18px;margin-bottom:9px;letter-spacing:-.01em;}
.kgalm__meta{display:flex;flex-direction:column;gap:5px;margin-bottom:16px;}
.kgalm__row{font-size:13px;color:var(--muted);line-height:1.4;}
.kgalm__row b{color:var(--text);font-weight:600;}
.kgalm__full--nolink{cursor:default}
.kgalm__full{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:transparent;border:1px solid var(--border);color:var(--text);font-family:'Manrope';font-weight:700;font-size:14px;padding:13px 18px;border-radius:9px;cursor:pointer;width:100%;}
.kgalm__full svg{width:15px;height:15px;flex:none;}
.kgalm__hidden{max-height:0;overflow:hidden;opacity:0;transition:max-height .55s ease,opacity .4s ease,margin-top .4s ease;margin-top:0;}
.kgalm__hidden.open{opacity:1;margin-top:18px;}
.kgalm__morewrap{margin-top:28px;}
.kgalm__more{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;background:var(--accent);color:#fff;font-family:'Manrope';font-weight:700;font-size:15px;padding:16px 24px;border-radius:9px;border:none;cursor:pointer;}
.kgalm__count{font-family:'Unbounded';font-size:12px;background:rgba(0,0,0,.18);padding:3px 8px;border-radius:20px;}
.kgalm__more.is-open .kgalm__count{display:none;}
.kgalm__lb{position:fixed;inset:0;z-index:99999;display:none;align-items:center;justify-content:center;padding:16px;}
.kgalm__lb.open{display:flex;}
.kgalm__lbbd{position:absolute;inset:0;background:rgba(4,4,6,.92);}
.kgalm__lbbox{position:relative;width:100%;}
.kgalm__lbframe{position:relative;width:100%;aspect-ratio:16/9;background:#000;border-radius:12px;overflow:hidden;border:1px solid var(--border);}
.kgalm__lbframe iframe{position:absolute;inset:0;width:100%;height:100%;border:none;}
.kgalm__lbx{position:absolute;top:-44px;right:0;width:38px;height:38px;border-radius:9px;background:var(--raise);border:1px solid var(--border);color:var(--text);font-size:22px;line-height:1;cursor:pointer;}
.kgalm__filter{display:flex;flex-wrap:nowrap;gap:8px;margin:0 -20px 22px;padding:0 20px 2px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;}
.kgalm__filter::-webkit-scrollbar{display:none;}
.kgalm__fbtn{flex:none;background:transparent;border:1px solid var(--border);color:var(--muted);font-family:'Manrope',Arial,sans-serif;font-weight:600;font-size:13px;padding:9px 15px;border-radius:20px;cursor:pointer;white-space:nowrap;transition:.2s;}
.kgalm__fbtn.is-active{background:var(--accent);border-color:var(--accent);color:#fff;}
.kgalm__tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:11px;}
.kgalm__tag{font-family:'Manrope',Arial,sans-serif;font-weight:600;font-size:8px;line-height:1;text-transform:uppercase;letter-spacing:.14em;color:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.22);border-radius:4px;padding:5px 8px;white-space:nowrap;}
.kgalm__desc{font-size:12px;line-height:1.5;color:var(--muted);margin-bottom:13px;}
.kgalm__card{transition:opacity .25s ease,transform .25s ease;}
.kgalm__card.is-off{opacity:0;transform:translateY(6px);}
.kgalm__empty{text-align:center;color:var(--muted);font-size:14px;padding:28px 0;display:none;}
.kgalm__empty.on{display:block;}
@media (min-width:481px){ .kgalm{display:none;} }
/* KORS: экспертные ролики вынесены в отдельную группу со своим заголовком, поэтому плашка на карточке больше не нужна. */
.kgalm__group{margin-top:54px;}
.kgalm__ghead{margin:0 auto 22px;text-align:center;}
.kgalm__gtitle{font-family:'Unbounded';font-weight:700;font-size:22px;letter-spacing:-.02em;margin-bottom:10px;line-height:1.2;}
.kgalm__gsub{color:var(--muted);font-size:13px;line-height:1.5;max-width:340px;margin:0 auto;}
</style>
<script>
(function(){
  var SLUG={'Видео':'video','Фотосъёмка':'photo','Сайт':'site','Презентация':'presentation','Фирменный стиль':'brand','Реклама':'ads','Дизайн':'design','Трансляция':'live','Продюсирование':'producing'};
  var works=[
    {id:'pd95FJSRFhF27W4YX4ioJJ', full:'3ZsxHkdEuHUubxSAQZDRyG', name:'Одоевские консервы - фильм о заводе', tags:['Видео','Фирменный стиль'], desc:'Показали производство изнутри: цеха, линии, контроль качества. Видео работает на сайте, в переговорах с сетями и на выставках.', alt:'Фильм о заводе Одоевские консервы: цеха, линии и контроль качества, мобильная версия'},
    {id:'xgBCJrU3Fy9CtKDXR9R23S', full:'0GfobL6RnAzhPeiopXjNHS', name:'Invoicebox - о компании', sphere:'финансовые технологии (FinTech)', format:'презентационный ролик о компании', term:'6 дней', tags:['Видео','Реклама'], desc:'Имиджевый ролик о платёжном сервисе: чем занимается компания и какие задачи бизнеса закрывает.', alt:'Имиджевый ролик о платёжном сервисе Invoicebox, мобильная версия'},
    {id:'iPcFsLF3eYfDYTauhcgjZj', full:'fv7FAnLfbLaDaNJLtSQ74H', name:'Вистекс', sphere:'производство, предприятие', format:'презентационный ролик', term:'15 дней', tags:['Видео','Дизайн'], desc:'Ролик о заводе: восемь направлений производства за три минуты. Дизайн email-письма со встроенным видео для коммерческих предложений.', alt:'Видео о производстве для завода Вистекс, мобильная версия'},
    {id:'bZ8JyozhtKdSDiy5xjLoVr', full:'caSE37WujsGB6usgZewyUt', name:'Ресторан Rumi / «ЗНАТЬ»', sphere:'ресторанный бизнес, мероприятия', format:'видео-отчёт о мероприятии', term:'2 дня', tags:['Видео','Трансляция','Презентация'], desc:'Съёмка мероприятий, прямая трансляция и презентации для ресторана.', alt:'Съёмка мероприятия и трансляция для ресторана Rumi, мобильная версия'},
    {id:'uiVqp8dWpzNoBt2GweBLs9', full:'vF4hbgW4Umo6U4dDNUFvwv', name:'Новая Формация', sphere:'организация, бизнес', format:'презентационный ролик', term:'4 дня', tags:['Видео','Дизайн'], desc:'Презентационный ролик, афиша и ведение контента.', alt:'Презентационный ролик для проекта Новая Формация, мобильная версия'},
    {id:'gHMF2zBsAdSdbcEH9wSZKh', full:'kfd6wYQdCh72VpRPC74Mfs', name:'Редакция ЭКСМО', sphere:'издательский бизнес', format:'съёмка трейлера по сюжету книги', term:'9 дней', tags:['Видео','Дизайн'], desc:'Трейлер книги и афиша для издательства.', alt:'Книжный трейлер для издательства Редакция ЭКСМО, мобильная версия'},
    {id:'sRSLqBbjkRWyn31BrY6iny', full:'mZiwnH9uZAdc15hhRsqPvB', name:'Одоевские консервы - термостабильные начинки', tags:['Видео'], desc:'Продуктовый ролик о линейке: как начинки ведут себя при выпечке и что это даёт производителю.', alt:'Продуктовый ролик о термостабильных начинках Одоевские консервы, мобильная версия'},
    {id:'uqJ79iyVPcqN1ZtTtjnkAv', full:'gznTZhdFQeZEKZnidVaTbk', name:'GosObmen', sphere:'финансовые услуги', format:'рекламный ролик', term:'3 дня', tags:['Видео','Сайт','Дизайн'], desc:'Рекламные ролики, тексты и сайт. Собрали скрипт для отдела продаж.', alt:'Рекламный ролик и сайт для сервиса Гособмен, мобильная версия'},
    {id:'35XkXms5VN3RLJcYsgWsnD', full:'2FXfjS6hYEvLkWNKUveoBx', name:'Invoicebox - оплата в белорусских рублях', tags:['Видео'], desc:'Объясняющий ролик о выходе платёжного сервиса на рынок Беларуси: как принимать оплату в белорусских рублях.', alt:'Ролик об оплате в белорусских рублях в платёжном сервисе Invoicebox, мобильная версия'},
    {id:'5zMvPKfeuDf9N7h7P8KuVe', full:'ePXSSA9qFiEgA5WYRdd4FP', name:'Алтай Серикбай - съёмки для личного бренда', tags:['Видео'], desc:'Снимаем контент для эксперта по личностному развитию: студийные выпуски, разговорные форматы, съёмки на ретритах. За время работы - больше десяти роликов.', alt:'Съёмки для личного бренда эксперта по личностному развитию Алтая Серикбая, мобильная версия'},
    {id:'bKeihzPbnEbXZarkMcYQZj', full:'6ivtiXKAcQj4dVJN8H1YWs', name:'MediaLive - отчётный ролик с выставки', tags:['Видео','Реклама'], desc:'Сняли отчётное видео с отраслевого события. Организаторы используют его на сайте и в рекламе следующего сезона.', alt:'Отчётный ролик с отраслевой выставки для MediaLive, мобильная версия'},
    {id:'8QbWRspZgkLTicEiQpp9su', full:'8QbWRspZgkLTicEiQpp9su', name:'STROBBS - промо зимней коллекции', tags:['Видео','Реклама'], desc:'Проморолик показа новой зимней коллекции российского бренда обуви и одежды.', alt:'Проморолик показа зимней коллекции бренда обуви и одежды STROBBS, мобильная версия'},
    {id:'88SCanh4aPU83UFBmThiVa', full:'mJqjXaKQBrdbvirxUTHLLh', name:'Rockstar - клип «На дне»', tags:['Видео'], desc:'Музыкальный клип для артиста.', alt:'Музыкальный клип На дне для артиста Rockstar, мобильная версия'},
    {id:'wLtMKZCpf75eYEWMXPEPZY', full:'7Kxs8xzVfCDLtyuG5puNN1', name:'Рокстар', sphere:'медиа', format:'музыкальный клип', term:'12 дней', tags:['Видео','Дизайн'], desc:'Три клипа и обложки для музыкального проекта.', alt:'Музыкальные клипы для проекта Рокстар, мобильная версия'},
    {id:'qAV5wXg5oHKKcY6tbgysZd', full:'okapERMYWfdoGagPRmo7uC', name:'Rockstar - клип «Самая грустная песня»', tags:['Видео'], desc:'Первый клип, который мы сняли для артиста.', alt:'Музыкальный клип Самая грустная песня для артиста Rockstar, мобильная версия'},
    {id:'vNYi5w7HiQevkdBbPmQ3CR', full:'vNYi5w7HiQevkdBbPmQ3CR', name:'Ювелирный лофт GOLD - ролик о компании', tags:['Видео'], desc:'Рассказали о компании и о том, чем она занимается.', alt:'Ролик о компании для ювелирного лофта GOLD, мобильная версия'},
    {id:'6JcPdvqUchXCmzscbTqaos', full:'sRyZwPm3BS9CVspVi2sLx3', name:'Одоевские консервы - нетермостабильные начинки', tags:['Видео'], desc:'Второй ролик линейки: назначение, состав, применение в готовых изделиях.', alt:'Продуктовый ролик о нетермостабильных начинках Одоевские консервы, мобильная версия'},
    {id:'8YSeQnzXxmpkmo7uNNcLrF', full:'43yfJckoZggrVouaMMK4zt', name:'YouTube-шоу', sphere:'медиа', format:'съёмка выпусков', term:'14 дней', tags:['Видео','Продюсирование','Реклама'], desc:'Продюсирование и режиссура шоу: съёмка выпусков и рекламное сопровождение.', alt:'Съёмка выпусков YouTube-шоу, мобильная версия'},
    {id:'7akHJzKdcoSrPiHtRbRBqk', full:'7akHJzKdcoSrPiHtRbRBqk', name:'Invoicebox - интернет-магазины за пару кликов', tags:['Видео'], desc:'Продуктовый ролик о конструкторе интернет-магазинов внутри сервиса.', alt:'Ролик о конструкторе интернет-магазинов в сервисе Invoicebox, мобильная версия'},
    {id:'b66cpVCFFFVycfDvLFXFR3', full:'b66cpVCFFFVycfDvLFXFR3', name:'Invoicebox - как выставить счёт за пару кликов', tags:['Видео'], desc:'Видеоинструкция для пользователей сервиса: выставление счёта по шагам.', alt:'Видеоинструкция по выставлению счёта в сервисе Invoicebox, мобильная версия'},
    {id:'eCGHEdUFdSyEjCBXxcsUSC', full:'geGWgessLoxkUKdQ4d4e1q', name:'Шоурил KORS Production', sphere:'создание контента', format:'актуальные работы', term:'2025-й год', tags:['Видео','Продюсирование'], desc:'Шоурил студии: съёмки на производствах и коммерческие проекты разных лет.', alt:'Актуальные работы студии KORS Production, мобильная версия'},
    {id:'dsqVruz3QkCKQESGiTUsVR', full:'dsqVruz3QkCKQESGiTUsVR', name:'Ваш продакшен вас обманывает', tags:['Видео'], kors:true, alt:'Экспертное видео KORS: почему продакшен может обманывать заказчика, мобильная версия'},
    {id:'uittTC7uyz9hv4HDirTBAG', full:'uittTC7uyz9hv4HDirTBAG', name:'Видео - это не украшение для бизнеса', tags:['Видео'], kors:true, alt:'Экспертное видео KORS о том, зачем бизнесу видео, мобильная версия'},
    {id:'aG3Qkc4VfoCcgtJLz6ivbE', full:'aG3Qkc4VfoCcgtJLz6ivbE', name:'Как сэкономить на видеоролике', tags:['Видео'], kors:true, alt:'Экспертное видео KORS о том, как сэкономить на съёмке ролика, мобильная версия'},
    {id:'4pzsMBSzheH3Sarx4UFHMd', full:'4pzsMBSzheH3Sarx4UFHMd', name:'Как сделать продающее видео', tags:['Видео'], kors:true, alt:'Экспертное видео KORS о том, как сделать продающее видео, мобильная версия'},
    {id:'kkQyUoC94bPxEGxq9UmMzj', full:'kkQyUoC94bPxEGxq9UmMzj', name:'Как правильно писать нам правки', tags:['Видео'], kors:true, desc:'Как формулировать правки, чтобы их внесли быстро и с первого раза.', alt:'Экспертное видео KORS о том, как правильно присылать правки по проекту, мобильная версия'},
    {id:'5r45VM9UQsJWhAAh8w9zQK', full:'5r45VM9UQsJWhAAh8w9zQK', name:'Как подготовиться до старта проекта', tags:['Видео'], kors:true, desc:'Что собрать и решить до старта, чтобы проект пошёл без задержек.', alt:'Экспертное видео KORS о подготовке к старту проекта, мобильная версия'},
    {id:'5JNE6gLppoDPJxPXRiLFV8', full:'5JNE6gLppoDPJxPXRiLFV8', name:'Подготовка к съёмочному дню', tags:['Видео'], kors:true, desc:'Как подготовить площадку и людей, чтобы съёмочный день прошёл по плану.', alt:'Экспертное видео KORS о подготовке к съёмочному дню, мобильная версия'}
  ];
  var FS='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="5 3 19 12 5 21 5 3"/></svg>';
  var lb=document.getElementById('kgalmLb'), lbf=document.getElementById('kgalmLbIframe');
  function openLb(id){ lbf.src='https://kinescope.io/embed/'+id+'?autoplay=true'; lb.classList.add('open'); }
  function closeLb(){ lb.classList.remove('open'); lbf.src=''; }
  document.getElementById('kgalmLbx').addEventListener('click',closeLb);
  lb.querySelector('.kgalm__lbbd').addEventListener('click',closeLb);
  document.addEventListener('keydown',function(e){ if((e.key==='Escape'||e.keyCode===27)&&lb.classList.contains('open'))closeLb(); });
  function makeCard(w, defer){
    var card=document.createElement('div'); card.className='kgalm__card';
    card.setAttribute('data-tags',(w.tags||[]).map(function(t){return SLUG[t]||'';}).join(' '));
    var ttl=(w.alt||w.name).replace(/"/g,'&quot;');
    var q='?autoplay=true&muted=true&loop=true&controls=false&playsInline=true&background=true';
    var ift= defer ? '<iframe data-src="https://kinescope.io/embed/'+w.id+q+'" title="'+ttl+'" aria-label="'+ttl+'" allow="autoplay; fullscreen; encrypted-media; picture-in-picture" allowfullscreen></iframe>'
                   : '<iframe loading="lazy" src="https://kinescope.io/embed/'+w.id+q+'" title="'+ttl+'" aria-label="'+ttl+'" allow="autoplay; fullscreen; encrypted-media; picture-in-picture" allowfullscreen></iframe>';
    var tagsHtml=(w.tags&&w.tags.length)?'<div class="kgalm__tags">'+w.tags.map(function(t){return '<span class="kgalm__tag">'+t+'</span>';}).join('')+'</div>':'';
    var descHtml=w.desc?'<p class="kgalm__desc">'+w.desc+'</p>':'';
    var metaHtml='';
    if(w.sphere||w.format||w.term){ metaHtml='<div class="kgalm__meta">'+(w.sphere?'<div class="kgalm__row"><b>Сфера:</b> '+w.sphere+'</div>':'')+(w.format?'<div class="kgalm__row"><b>Формат:</b> '+w.format+'</div>':'')+(w.term?'<div class="kgalm__row"><b>Срок:</b> '+w.term+'</div>':'')+'</div>'; }
    card.innerHTML='<div class="kgalm__video">'+ift+'</div><div class="kgalm__body"><h3 class="kgalm__name">'+w.name+'</h3>'+tagsHtml+descHtml+metaHtml+'<button class="kgalm__full'+(w.full?'':' kgalm__full--nolink')+'" '+(w.full?'':'aria-disabled="true"')+'>'+FS+'Смотреть полное видео</button></div>';
    if(w.full){ card.querySelector('.kgalm__full').addEventListener('click',function(){ openLb(w.full); }); }
    return card;
  }
  var top=document.getElementById('kgalmTop'),rest=document.getElementById('kgalmRest'),box=document.getElementById('kgalmHidden'),more=document.getElementById('kgalmMore');
  var exp=document.getElementById('kgalmExp'), expwrap=document.getElementById('kgalmExpWrap');
  if(!top||!rest||!box||!more)return;
  /* KORS: превью грузятся не пачкой. Плеер получает src только когда карточка подходит к видимой области (запас 250px). Пока карточка спрятана под кнопкой (max-height:0) или скрыта фильтром (display:none), она не пересекается с экраном и ролик не стартует. */
  var io=('IntersectionObserver' in window)?new IntersectionObserver(function(es,ob){
    es.forEach(function(e){
      if(!e.isIntersecting) return;
      var f=e.target.querySelector('iframe[data-src]');
      if(f){ f.src=f.getAttribute('data-src'); f.removeAttribute('data-src'); }
      ob.unobserve(e.target);
    });
  },{root:null,rootMargin:'250px 0px',threshold:0.01}):null;
  function watch(c){
    if(io){ io.observe(c); return; }
    var f=c.querySelector('iframe[data-src]');
    if(f){ f.src=f.getAttribute('data-src'); f.removeAttribute('data-src'); }
  }
  function put(grid,w){ var c=makeCard(w,true); grid.appendChild(c); watch(c); }
  /* KORS: порог показа на телефоне - 6 карточек (одна колонка, 12 было бы простынёй), остальные под кнопкой. Экспертные ролики студии идут отдельной группой ниже, флаг kors в данных теперь отвечает за группировку. */
  var TOPN=6;
  var main=works.filter(function(w){return !w.kors;});
  var expert=works.filter(function(w){return !!w.kors;});
  main.slice(0,TOPN).forEach(function(w){put(top,w);});
  main.slice(TOPN).forEach(function(w){put(rest,w);});
  if(exp){ expert.forEach(function(w){put(exp,w);}); }
  var cntEl=more.querySelector('.kgalm__count'); if(cntEl){ cntEl.textContent='+'+Math.max(0,main.length-TOPN); }
  var loaded=false, mt=more.querySelector('.kgalm__mtext');
  more.addEventListener('click',function(){
    if(!box.classList.contains('open')){
      box.classList.add('open'); box.style.maxHeight=box.scrollHeight+'px';
      setTimeout(function(){if(box.classList.contains('open'))box.style.maxHeight='none';},600);
      more.classList.add('is-open'); mt.textContent='Свернуть';
    }else{
      box.style.maxHeight=box.scrollHeight+'px';
      requestAnimationFrame(function(){box.style.maxHeight='0px';box.classList.remove('open');});
      more.classList.remove('is-open'); mt.textContent='Смотреть ещё наши работы';
    }
  });
  window.addEventListener('resize',function(){if(box.classList.contains('open'))box.style.maxHeight='none';});

  /* фильтр по услугам: чистый JS, отбор по data-tags */
  var fwrap=document.getElementById('kgalmFilter'), empty=document.getElementById('kgalmEmpty'), morewrap=more.parentNode;
  function loadRest(){ /* KORS: пачкой больше не грузим - src ставит IntersectionObserver по мере прокрутки. */ }
  function setBox(open){
    if(open){ loadRest(); box.classList.add('open'); box.style.maxHeight='none'; }
    else { box.classList.remove('open'); box.style.maxHeight='0px'; }
  }
  if(fwrap){
    fwrap.addEventListener('click',function(e){
      var b=e.target.closest?e.target.closest('.kgalm__fbtn'):null;
      if(!b) return;
      var f=b.getAttribute('data-f'), all=(f==='all'), shown=0, restShown=0, expShown=0;
      fwrap.querySelectorAll('.kgalm__fbtn').forEach(function(x){ x.classList.toggle('is-active', x===b); });
      if(b.scrollIntoView) b.scrollIntoView({block:'nearest',inline:'nearest'});
      [top,rest,exp].filter(Boolean).forEach(function(grid){
        grid.querySelectorAll('.kgalm__card').forEach(function(c){
          var m = all || ((' '+(c.getAttribute('data-tags')||'')+' ').indexOf(' '+f+' ')>-1);
          if(m){
            shown++; if(grid===rest) restShown++; if(grid===exp) expShown++;
            c.style.display='';
            void c.offsetWidth;
            c.classList.remove('is-off');
          } else {
            c.classList.add('is-off');
            setTimeout(function(){ if(c.classList.contains('is-off')) c.style.display='none'; },260);
          }
        });
      });
      if(all){
        setBox(false); morewrap.style.display='';
        more.classList.remove('is-open'); mt.textContent='Смотреть ещё наши работы';
      } else {
        setBox(restShown>0); morewrap.style.display='none';
      }
      if(expwrap) expwrap.style.display=(expShown>0)?'':'none';
      if(empty) empty.classList.toggle('on', shown===0);
    });
  }
})();
</script>
<script>
/* KORS · экспертные ролики: первые N, остальные под кнопкой · 01.09.2026 */
(function(){
  var N = 2;
  function init(){
    var grid = document.getElementById('kgalmExp');
    var wrap = document.getElementById('kgalmExpWrap');
    if(!grid || !wrap) return false;
    var cards = grid.querySelectorAll('.kgalm__card');
    if(!cards.length) return false;
    if(document.getElementById('kgalmExpMore')) return true;
    if(cards.length <= N) return true;
    var hidden = document.createElement('div');
    hidden.className = 'kgalm__hidden';
    hidden.id = 'kgalmExpHidden';
    var inner = document.createElement('div');
    inner.className = 'kgalm__col';
    hidden.appendChild(inner);
    for(var i = N; i < cards.length; i++){ inner.appendChild(cards[i]); }
    grid.parentNode.insertBefore(hidden, grid.nextSibling);
    var mw = document.createElement('div');
    mw.className = 'kgalm__morewrap';
    var btn = document.createElement('button');
    btn.type = 'button';
    btn.className = 'kgalm__more';
    btn.id = 'kgalmExpMore';
    btn.innerHTML = '<span class="kgalm__mtext">Смотреть все ролики</span> <span class="kgalm__count">+' + (cards.length - N) + '</span>';
    mw.appendChild(btn);
    hidden.parentNode.insertBefore(mw, hidden.nextSibling);
    var txt = btn.querySelector('.kgalm__mtext');
    var cnt = btn.querySelector('.kgalm__count');
    function fit(){ if(hidden.classList.contains('open')){ hidden.style.maxHeight = (inner.scrollHeight + 40) + 'px'; } }
    window.addEventListener('resize', fit);
    btn.addEventListener('click', function(){
      var open = hidden.classList.toggle('open');
      txt.textContent = open ? 'Свернуть' : 'Смотреть все ролики';
      cnt.style.display = open ? 'none' : '';
      if(open){ fit(); } else { hidden.style.maxHeight = ''; wrap.scrollIntoView({block:'start', behavior:'smooth'}); }
    });
    return true;
  }
  var tries = 0;
  (function poll(){ if(init()) return; if(++tries < 80) setTimeout(poll, 250); })();
})();
</script>

BACKUP rec2662784501 · главная · HERO десктоп + карта постеров POSTERS · 20111 симв.
<!-- ===== KORS HERO · ДЕСКТОП · блок T123 (HTML-код). Показывать ТОЛЬКО на компьютере. ===== -->
<div class="khd">
<div class="khd__vid"><iframe class="khd__kv" src="https://kinescope.io/embed/vcDamsVPzsEPAgvishqMMn?autoplay=true&muted=true&loop=true&controls=false&playsInline=true&background=true" allow="autoplay; fullscreen; encrypted-media; picture-in-picture" frameborder="0"></iframe></div>
<div class="khd__shade" aria-hidden="true"></div>
<div class="khd__dim"></div>
<div class="khd__corners">
<div class="khd__corner khd__corner--l"><span class="khd__reccombo"><span class="khd__recdot" aria-hidden="true"></span><b class="khd__rectxt">REC</b><span class="khd__tm">00:00:00</span></span><span class="khd__cdiv" aria-hidden="true"></span><span class="khd__ctext">СТУДИЯ ДЛЯ ПРОИЗВОДСТВЕННЫХ КОМПАНИЙ</span></div>
<div class="khd__corner khd__corner--r">ОФИС В МОСКВЕ · РАБОТАЕМ ПО ВСЕЙ РОССИИ С 2019 ГОДА</div>
</div>
<div class="khd__in">
<h1 class="khd__headline"><span class="khd__headline-line khd__headline-line--main">Показываем производство и компании через создание <span class="khd__hl-accent">видео, сайта, презентаций</span> и других материалов.</span></h1>
<p class="khd__lead">Можно начать с одной задачи или собрать всё необходимое к выставке, экспорту или запуску продукта.</p>
<div class="khd__btns"><a class="khd__btn khd__btn--p" href="#rec2619108701">Открыть калькулятор цен</a></div>
<div class="khd__pills"><a class="pill" href="https://t.me/korsprodsale" target="_blank" rel="noopener"><i></i>Telegram</a><a class="pill" href="https://max.ru/u/f9LHodD0cOJry8jfuI2u_X2FJWCLMC5S4I3JfDhcBC6iBjNcaUyKtbZ9Bto" target="_blank" rel="noopener"><i></i>MAX</a><a class="pill" href="https://wa.me/79158677996" target="_blank" rel="noopener"><i></i>WhatsApp</a><a class="pill" href="tel:+79158677996"><i></i>Позвонить</a></div>
</div>
<!-- блок 460+ и «нам доверяют» стоят вплотную и читаются как один нижний блок -->
<div class="khd__bottom">
<div class="khd__proof-panel">
<div class="khd__proof-main"><strong>460+</strong><span>проектов</span></div>
<div class="khd__proof-points">
<span><i></i>Снимаем на действующих производствах</span>
<span><i></i>Клиенты возвращаются со следующими задачами</span>
<span><i></i>Смета и дата сдачи фиксируются до старта</span>
</div>
</div>
<div class="khd__mq"><span class="lab">НАМ ДОВЕРЯЮТ</span><div class="track"><div class="mqt"></div></div></div>
</div>
<div class="khd__sheet"></div>
</div>
<style>
#rec2501675451{display:none!important;}
#rec2662784501{padding-top:0!important;}
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Unbounded:wght@400;600;700;800&display=swap');
.khd{--bg:#0C0C0E;--raise:#141416;--card:#1B1B1F;--border:#2A2A2E;--soft:#242428;--text:#F5F3EF;--muted:#9A9A9A;--faint:#6a6a6e;--accent:#6D5DFB;--glow:rgba(109,93,251,.14);--poster:url('https://static.tildacdn.com/tild6561-6639-4936-b061-393734646164/poster-home-desk.jpg');
position:relative;overflow:hidden;box-sizing:border-box;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:96px 36px 160px;background:var(--bg)}
.khd *{box-sizing:border-box;margin:0;padding:0}
.khd a[href^="tel:"]{color:var(--muted)!important}
.khd__vid{position:absolute;inset:0;overflow:hidden;background:var(--poster) center/cover;z-index:0}
.khd__kv{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);min-width:100%;min-height:100%;width:auto;height:auto;aspect-ratio:16/9;border:none;pointer-events:none}
.khd__shade{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(12,12,14,.50) 0%,rgba(12,12,14,.62) 50%,rgba(12,12,14,.88) 100%)}
.khd__dim{position:absolute;inset:0;z-index:1;background:radial-gradient(1100px 620px at 50% 12%,rgba(109,93,251,.10),transparent 60%),linear-gradient(180deg,rgba(10,10,12,.72),rgba(10,10,12,.9))}
.khd__corners{position:absolute;top:26px;left:36px;right:36px;z-index:3;display:flex;align-items:flex-start;justify-content:space-between;gap:18px;flex-wrap:wrap}
.khd__corner{font-family:'Unbounded',sans-serif;font-size:clamp(10.5px,0.95vw,12px);letter-spacing:.13em;line-height:1.5;color:#c9c7d6;text-transform:uppercase;display:flex;align-items:center;gap:10px}
.khd__corner--r{text-align:right}
.khd__reccombo{display:inline-flex;align-items:center;gap:7px;color:#F5F3EF}
.khd__recdot{width:7px;height:7px;border-radius:50%;background:#FF5252;box-shadow:0 0 10px rgba(255,82,82,.65);animation:khdPulse 1.8s ease-in-out infinite}
.khd__rectxt{font-weight:700;letter-spacing:.14em}
.khd__tm{font-variant-numeric:tabular-nums;letter-spacing:.02em;color:#c9c7d6;font-weight:600}
.khd__cdiv{width:1px;height:10px;background:rgba(255,255,255,.2)}
@keyframes khdPulse{0%,100%{opacity:1}50%{opacity:.32}}
@media(prefers-reduced-motion:reduce){.khd__recdot{animation:none}}
.khd__in{position:relative;z-index:3;width:min(1180px,100%);display:flex;flex-direction:column;align-items:center;text-align:center}
.khd__headline{width:100%;font-family:'Unbounded',sans-serif;letter-spacing:-.035em;text-shadow:0 2px 24px rgba(0,0,0,.58)}
.khd__headline-line{display:block;margin-inline:auto;text-wrap:balance}
.khd__headline-line--main{max-width:1120px;font-size:clamp(40px,3.3vw,50px);line-height:1.14;font-weight:800;color:var(--text)}
.khd__hl-accent{color:#d8d5ff}
.khd__lead{max-width:760px;margin-top:22px;color:#c4c2be;font:500 16px/1.55 'Manrope',Arial,sans-serif;text-wrap:balance;text-shadow:0 2px 18px rgba(0,0,0,.55)}
.khd__btns{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:clamp(26px,2.6vw,32px)}
.khd__btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:16px 30px;border-radius:10px;font:700 15px/1 'Manrope',Arial,sans-serif;text-decoration:none;cursor:pointer;border:none;transition:.25s}
.khd__btn--p{background:var(--accent);color:#fff;box-shadow:0 10px 30px rgba(109,93,251,.28)}
.khd__btn--p:hover{transform:translateY(-2px);box-shadow:0 14px 38px rgba(109,93,251,.4)}
.khd__pills{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin-top:16px}
.khd__pills .pill{display:inline-flex;align-items:center;gap:8px;padding:10px 15px;border:1px solid var(--border);border-radius:9px;color:var(--muted);font:600 13px/1 'Manrope',Arial,sans-serif;text-decoration:none;background:rgba(20,20,22,.4);transition:.2s}
.khd__pills .pill:hover{border-color:var(--accent);color:#e8e7ff}
.khd__pills .pill i{width:6px;height:6px;border-radius:50%;background:var(--accent);flex:none}
.khd__bottom{position:absolute;left:0;right:0;bottom:0;z-index:4;display:flex;flex-direction:column;align-items:center}
.khd__proof-panel{width:min(1080px,calc(100% - 72px));display:grid;grid-template-columns:230px 1fr;align-items:stretch;margin:0 auto;border:1px solid rgba(255,255,255,.12);border-bottom:none;border-radius:16px 16px 0 0;background:linear-gradient(180deg,rgba(21,21,25,.88),rgba(11,11,14,.78));box-shadow:0 18px 46px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.04);overflow:hidden;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.khd__proof-main{display:flex;align-items:center;justify-content:center;gap:14px;padding:18px 22px;background:linear-gradient(135deg,rgba(109,93,251,.25),rgba(109,93,251,.06));border-right:1px solid rgba(255,255,255,.1)}
.khd__proof-main strong{font-family:'Unbounded',sans-serif;font-size:40px;line-height:1;font-weight:800;color:#fff;letter-spacing:-.04em}
.khd__proof-main span{max-width:130px;text-align:left;color:#c7c3e2;font:700 11px/1.35 'Manrope',Arial,sans-serif;letter-spacing:.08em;text-transform:uppercase}
.khd__proof-points{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:center}
.khd__proof-points span{min-height:74px;display:flex;align-items:center;gap:10px;padding:16px 18px;color:#d7d5d0;font:600 12.5px/1.4 'Manrope',Arial,sans-serif;text-align:left;border-right:1px solid rgba(255,255,255,.08)}
.khd__proof-points span:last-child{border-right:0}
.khd__proof-points i{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 12px rgba(109,93,251,.65);flex:none}
.khd__offer-chips{width:min(1080px,100%);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:clamp(26px,3vw,34px)}
.khd__offer-chips span{min-height:60px;display:flex;align-items:center;justify-content:center;gap:11px;padding:14px 18px;border:1px solid rgba(109,93,251,.42);border-radius:13px;background:linear-gradient(180deg,rgba(109,93,251,.16),rgba(20,20,24,.72));box-shadow:inset 0 1px 0 rgba(255,255,255,.06);color:#F5F3EF;font:700 15px/1.3 'Manrope',Arial,sans-serif;text-align:center;opacity:0;transform:translateY(16px);transition:opacity .5s ease,transform .5s ease}
.khd__offer-chips span.khd-in{opacity:1;transform:none}
.khd__offer-chips span:nth-child(1){transition-delay:.05s}
.khd__offer-chips span:nth-child(2){transition-delay:.14s}
.khd__offer-chips span:nth-child(3){transition-delay:.23s}
.khd__offer-chips i{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 14px rgba(109,93,251,.7);flex:none}
@media(prefers-reduced-motion:reduce){.khd__offer-chips span{transition:none;opacity:1;transform:none}}
.khd__mq{position:relative;width:100%;z-index:4;overflow:hidden;height:52px;display:flex;align-items:center;border-top:1px solid rgba(255,255,255,.08);background:rgba(8,8,10,.55)}
.khd__mq .lab{flex:none;font-family:'Unbounded',sans-serif;font-size:10px;letter-spacing:.12em;color:var(--faint);padding:0 16px;height:100%;display:flex;align-items:center;background:rgba(8,8,10,.9);z-index:2}
.khd__mq .track{position:relative;flex:1;overflow:hidden;height:100%;-webkit-mask-image:linear-gradient(90deg,#000 90%,transparent);mask-image:linear-gradient(90deg,#000 90%,transparent)}
.khd__mq .mqt{position:absolute;top:50%;transform:translateY(-50%);display:flex;gap:42px;width:max-content;animation:khdMq 28s linear infinite}
.khd__mq .mqt b{font-family:'Unbounded',sans-serif;font-size:16px;color:#9a9893;font-weight:600;white-space:nowrap}
@keyframes khdMq{to{transform:translate(-50%,-50%)}}
/* короткие экраны: ужимаем вертикальные отступы, чтобы первый экран помещался целиком */
@media screen and (max-height:860px){
.khd{padding:64px 36px 140px}
.khd__lead{margin-top:18px}
.khd__btns{margin-top:24px}
.khd__pills{margin-top:13px}
.khd__proof-main{padding:14px 20px}
.khd__proof-main strong{font-size:34px}
.khd__proof-points span{min-height:64px;padding:13px 16px}
.khd__mq{height:46px}
}
@media screen and (max-height:720px){
.khd{padding:44px 36px 122px}
.khd__corners{top:16px}
.khd__headline-line--main{font-size:clamp(34px,2.7vw,42px)}
.khd__lead{margin-top:14px;font-size:15px}
.khd__btns{margin-top:18px}
.khd__btn{padding:14px 26px}
.khd__pills{margin-top:10px}
.khd__pills .pill{padding:8px 13px}
.khd__proof-main{padding:11px 18px}
.khd__proof-main strong{font-size:30px}
.khd__proof-points span{min-height:54px;padding:10px 15px;font-size:12px}
.khd__mq{height:42px}
}
/* низкие окна: мессенджеры дублируют плавающий виджет связи, прячем ради видимости плашки и бегущей строки */
@media screen and (max-height:800px){
.khd__pills{display:none}
}
@media(max-width:980px){.khd{padding:110px 24px 252px}.khd__offer-chips{grid-template-columns:1fr}.khd__proof-panel{grid-template-columns:190px 1fr}.khd__proof-points{grid-template-columns:1fr}.khd__proof-points span{min-height:unset;padding:12px 16px;border-right:0;border-bottom:1px solid rgba(255,255,255,.07)}.khd__proof-points span:last-child{border-bottom:0}.khd__corners{position:static;margin-bottom:22px;flex-direction:column;align-items:flex-start;gap:8px}.khd__corner--r{text-align:left}}
@media(max-width:480px){.khd{display:none}}
</style>
<script>
(function(){
var wrap=document.querySelector('.khd'); if(!wrap) return;
function fmt(s){function p(n){return (n<10?'0':'')+n;}var h=Math.floor(s/3600),m=Math.floor(s%3600/60),x=s%60;return p(h)+':'+p(m)+':'+p(x);}
var t0=Date.now();
function tick(){var s=Math.floor((Date.now()-t0)/1000);wrap.querySelectorAll('.khd__tm').forEach(function(el){el.textContent=fmt(s);});}
tick(); setInterval(tick,1000);
var words=['сайты','видео','презентации','фотосъёмку','фирменный стиль'];
wrap.querySelectorAll('.khd__rot').forEach(function(el){var i=0;setInterval(function(){i=(i+1)%words.length;el.style.opacity='0';el.style.transform='translateY(8px)';setTimeout(function(){el.textContent=words[i];el.style.opacity='1';el.style.transform='translateY(0)';},200);},1500);});
var logos=['Одоевские консервы','InvoiceBox','Вистекс','Водоходъ','ALFA-BANK','Wildberries','Яндекс Драйв','ЭКСМО','Rumi'];
wrap.querySelectorAll('.khd__mq .mqt').forEach(function(t){var h=logos.map(function(l){return '<b>'+l+'</b>';}).join('');t.innerHTML=h+h;});
var sheetHTML='<div class="khsheet-bd khd-close"></div><div class="khsheet-card">'
+'<div class="khsheet-h"><b>Связаться сразу</b><button class="khsheet-x khd-close">×</button></div>'
+'<a class="khci main" href="#popup:zayavka"><span class="ic">→</span><span class="tx"><b>Оставить заявку</b><span>ответим и предложим формат работы</span></span></a>'
+'<a class="khci" href="tel:+79158677996"><span class="ic">тел</span><span class="tx"><b>Позвонить</b><span>+7 915 867-79-96</span></span></a>'
+'<a class="khci" href="https://wa.me/79158677996" target="_blank" rel="noopener"><span class="ic">WA</span><span class="tx"><b>WhatsApp</b><span>написать в мессенджер</span></span></a>'
+'<a class="khci" href="https://t.me/korsprodsale" target="_blank" rel="noopener"><span class="ic">TG</span><span class="tx"><b>Telegram</b><span>@korsprodsale</span></span></a>'
+'<a class="khci" href="https://max.ru/u/f9LHodD0cOJry8jfuI2u_X2FJWCLMC5S4I3JfDhcBC6iBjNcaUyKtbZ9Bto" target="_blank" rel="noopener"><span class="ic">MAX</span><span class="tx"><b>MAX</b><span>мессенджер MAX</span></span></a>'
+'<a class="khci" href="mailto:info@korsprod.ru"><span class="ic">@</span><span class="tx"><b>Почта</b><span>info@korsprod.ru</span></span></a>'
+'</div>';
wrap.querySelectorAll('.khd__sheet').forEach(function(s){s.innerHTML=sheetHTML;});
wrap.querySelectorAll('.khd-open').forEach(function(b){b.addEventListener('click',function(e){e.preventDefault();var sh=wrap.querySelector('.khd__sheet');if(sh)sh.classList.add('open');});});
wrap.addEventListener('click',function(e){if(e.target.classList.contains('khd-close')){var sh=wrap.querySelector('.khd__sheet');if(sh)sh.classList.remove('open');}});
var chips=wrap.querySelectorAll('.khd__offer-chips span');
requestAnimationFrame(function(){requestAnimationFrame(function(){chips.forEach(function(c){c.classList.add('khd-in');});});});
})();
</script>

<script>
/* KORS - постер под ролик Kinescope.
   Если плеер не загрузился (сбой Кинескопа, блокировка, медленная сеть),
   в слоте остаётся кадр из ролика, а не пустое место.
   Постер кладётся фоном контейнера, iframe лежит поверх.
   Слоты, у которых фон уже задан своим постером, не трогаем. */
(function(){
  /* Постеры перезалиты на CDN Tilda (1200px, JPEG 80): если kinescope недоступен,
     заглушка всё равно покажется - иначе фолбэк грузился бы с того же хоста, что и упал.
     Нет ID в карте - откат на постер kinescope. */
  var POSTERS = {
    "eCGHEdUFdSyEjCBXxcsUSC": "https://static.tildacdn.com/tild3934-6365-4637-b337-356336336665/kposter-eCGHEdUFdSyE.jpg",
    "vcDamsVPzsEPAgvishqMMn": "https://static.tildacdn.com/tild3931-6235-4634-b335-333861663361/kposter-vcDamsVPzsEP.jpg",
    "pd95FJSRFhF27W4YX4ioJJ": "https://static.tildacdn.com/tild6336-3536-4436-b063-633933646532/kposter-pd95FJSRFhF2.jpg",
    "35XkXms5VN3RLJcYsgWsnD": "https://static.tildacdn.com/tild3537-3966-4964-b133-353661383062/kposter-35XkXms5VN3R.jpg",
    "iPcFsLF3eYfDYTauhcgjZj": "https://static.tildacdn.com/tild6361-6466-4032-b662-306163383064/kposter-iPcFsLF3eYfD.jpg",
    "xgBCJrU3Fy9CtKDXR9R23S": "https://static.tildacdn.com/tild3830-3937-4238-a666-663631326636/kposter-xgBCJrU3Fy9C.jpg",
    "jC3unVq9iM2iw4GoQFMiyA": "https://static.tildacdn.com/tild3636-6433-4661-b636-396662643039/kposter-jC3unVq9iM2i.jpg",
    "bZ8JyozhtKdSDiy5xjLoVr": "https://static.tildacdn.com/tild3561-3564-4131-b633-643539636232/kposter-bZ8JyozhtKdS.jpg",
    "uiVqp8dWpzNoBt2GweBLs9": "https://static.tildacdn.com/tild3833-3163-4564-a264-623064643161/kposter-uiVqp8dWpzNo.jpg",
    "gHMF2zBsAdSdbcEH9wSZKh": "https://static.tildacdn.com/tild3761-3639-4665-a437-323166376361/kposter-gHMF2zBsAdSd.jpg",
    "sRSLqBbjkRWyn31BrY6iny": "https://static.tildacdn.com/tild6566-6436-4037-a536-343761343433/kposter-sRSLqBbjkRWy.jpg",
    "uqJ79iyVPcqN1ZtTtjnkAv": "https://static.tildacdn.com/tild6466-6465-4162-b336-346638626664/kposter-uqJ79iyVPcqN.jpg",
    "5zMvPKfeuDf9N7h7P8KuVe": "https://static.tildacdn.com/tild3531-3662-4630-a437-313536356461/kposter-5zMvPKfeuDf9.jpg",
    "bKeihzPbnEbXZarkMcYQZj": "https://static.tildacdn.com/tild3132-3932-4035-b834-613463353035/kposter-bKeihzPbnEbX.jpg",
    "8QbWRspZgkLTicEiQpp9su": "https://static.tildacdn.com/tild3332-3437-4966-b533-336231303433/kposter-8QbWRspZgkLT.jpg",
    "88SCanh4aPU83UFBmThiVa": "https://static.tildacdn.com/tild6132-3936-4831-a130-643730633531/kposter-88SCanh4aPU8.jpg",
    "wLtMKZCpf75eYEWMXPEPZY": "https://static.tildacdn.com/tild3038-3334-4931-b366-313938383831/kposter-wLtMKZCpf75e.jpg",
    "qAV5wXg5oHKKcY6tbgysZd": "https://static.tildacdn.com/tild6631-3337-4234-b432-343939343437/kposter-qAV5wXg5oHKK.jpg",
    "vNYi5w7HiQevkdBbPmQ3CR": "https://static.tildacdn.com/tild3061-3462-4234-b635-363261623533/kposter-vNYi5w7HiQev.jpg",
    "6JcPdvqUchXCmzscbTqaos": "https://static.tildacdn.com/tild3666-3131-4039-b036-353366313136/kposter-6JcPdvqUchXC.jpg",
    "8YSeQnzXxmpkmo7uNNcLrF": "https://static.tildacdn.com/tild6563-3566-4634-b665-636530636437/kposter-8YSeQnzXxmpk.jpg",
    "7akHJzKdcoSrPiHtRbRBqk": "https://static.tildacdn.com/tild3462-6238-4563-b136-633938363632/kposter-7akHJzKdcoSr.jpg",
    "b66cpVCFFFVycfDvLFXFR3": "https://static.tildacdn.com/tild6364-6161-4163-a163-356233396535/kposter-b66cpVCFFFVy.jpg",
    "dsqVruz3QkCKQESGiTUsVR": "https://static.tildacdn.com/tild6661-3433-4161-b166-633765636366/kposter-dsqVruz3QkCK.jpg",
    "uittTC7uyz9hv4HDirTBAG": "https://static.tildacdn.com/tild6366-3331-4730-b166-666434643836/kposter-uittTC7uyz9h.jpg",
    "aG3Qkc4VfoCcgtJLz6ivbE": "https://static.tildacdn.com/tild3030-6362-4533-b033-636163383164/kposter-aG3Qkc4VfoCc.jpg",
    "4pzsMBSzheH3Sarx4UFHMd": "https://static.tildacdn.com/tild6131-3933-4137-b066-316538623861/kposter-4pzsMBSzheH3.jpg",
    "kkQyUoC94bPxEGxq9UmMzj": "https://static.tildacdn.com/tild3465-6330-4536-b235-653933346332/kposter-kkQyUoC94bPx.jpg",
    "5r45VM9UQsJWhAAh8w9zQK": "https://static.tildacdn.com/tild3738-3665-4662-a466-646666316338/kposter-5r45VM9UQsJW.jpg",
    "5JNE6gLppoDPJxPXRiLFV8": "https://static.tildacdn.com/tild6133-3064-4234-b765-393765663539/kposter-5JNE6gLppoDP.jpg"
  };
  function posterUrl(id){ return POSTERS[id] || ("https://kinescope.io/" + id + "/poster.jpg"); }
  function put(f){
    var box = f.parentElement;
    if(!box || box.getAttribute("data-kposter")) return;
    var src = f.getAttribute("src") || f.getAttribute("data-src") || "";
    var id = (src.match(/embed\/([A-Za-z0-9]+)/) || [])[1];
    if(!id) return;
    box.setAttribute("data-kposter", "1");
    if(getComputedStyle(box).backgroundImage !== "none") return;
    box.style.backgroundColor = "#141416";
    box.style.backgroundImage = "url(" + posterUrl(id) + ")";
    box.style.backgroundSize = "cover";
    box.style.backgroundPosition = "center";
    box.style.backgroundRepeat = "no-repeat";
  }
  function scan(){
    var f = document.querySelectorAll('iframe[src*="kinescope"], iframe[data-src*="kinescope"]');
    for(var i = 0; i < f.length; i++) put(f[i]);
  }
  scan();
  setTimeout(scan, 1000); setTimeout(scan, 3000); setTimeout(scan, 8000);
  if(window.MutationObserver){
    var mo = new MutationObserver(scan);
    mo.observe(document.documentElement, {childList:true, subtree:true});
    setTimeout(function(){ mo.disconnect(); }, 30000);
  }
})();
</script>

BACKUP · сборник ранних копий блоков (15 шт.), перенесено из localStorage 04.09.2026
rec1645479821 · ключ kors_bak_1645479821 · 189 симв.
<script src="https://cdn.postnikovmd.com/tilda@1.4/mods.min.js"></script>
<!--flip.js Эффект переворота карточек. https://postnikovmd.com/mods/flip-->
<script>flip.init(".uc-flip")</script>rec2784692501 · ключ kors_bak_2784692501 · 4444 симв.
<!-- KORS — THANK YOU / СТРАНИЦА БЛАГОДАРНОСТИ (.kty) -->
<style>
#allrecords .kty-wrap{background:#0C0C0E;overflow:hidden;}
.kty{--bg:#0C0C0E;--text:#F5F3EF;--muted:#9C9A95;--faint:#66645F;--accent:#6D5DFB;--hover:#8A7BFF;--border:#2A2A2E;--card:#1B1B1F;}
.kty *{box-sizing:border-box;}
.kty{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--bg);color:var(--text);font-family:'Manrope',-apple-system,Arial,sans-serif;padding:40px 20px;position:relative;overflow:hidden;}
.kty__glow{position:absolute;top:-160px;left:50%;transform:translateX(-50%);width:620px;height:620px;pointer-events:none;background:radial-gradient(circle at 50% 50%,rgba(109,93,251,.22) 0%,rgba(109,93,251,0) 68%);}
.kty__in{position:relative;z-index:1;max-width:640px;width:100%;text-align:center;}
.kty__badge{display:inline-flex;align-items:center;justify-content:center;width:84px;height:84px;border-radius:50%;background:rgba(109,93,251,.12);border:1px solid rgba(109,93,251,.4);margin:0 auto 28px;}
.kty__badge svg{width:40px;height:40px;stroke:var(--accent);}
.kty__eyebrow{display:inline-flex;align-items:center;gap:10px;color:var(--accent);font-size:12px;font-weight:600;letter-spacing:2.5px;text-transform:uppercase;margin-bottom:18px;}
.kty__eyebrow span{width:30px;height:1px;background:var(--accent);}
.kty h1{font-family:'Unbounded',sans-serif;font-weight:700;font-size:clamp(30px,6vw,52px);line-height:1.06;margin:0 0 18px;}
.kty p{font-size:clamp(16px,2vw,19px);line-height:1.6;color:var(--muted);margin:0 auto 34px;max-width:520px;}
.kty__btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}
.kty__btn{display:inline-flex;align-items:center;gap:8px;padding:16px 30px;border-radius:6px;font-size:15px;font-weight:600;text-decoration:none;transition:.2s;}
.kty__btn--p{background:var(--accent);color:#fff;}
.kty__btn--p:hover{background:var(--hover);}
.kty__btn--s{background:transparent;color:var(--text);border:1px solid var(--border);}
.kty__btn--s:hover{border-color:var(--accent);color:var(--accent);}
.kty__note{margin-top:30px;font-size:13.5px;color:var(--faint);}
.kty__note b{color:var(--muted);font-weight:600;}
.kty__contacts{margin-top:26px;display:flex;gap:22px;justify-content:center;flex-wrap:wrap;}
.kty__contacts a{color:var(--muted);font-size:14px;text-decoration:none;transition:.2s;}
.kty__contacts a:hover{color:var(--accent);}
@media(max-width:480px){.kty__btn{width:100%;justify-content:center;}}
</style>

<div class="kty-wrap"><div class="kty">
  <div class="kty__glow"></div>
  <div class="kty__in">
    <div class="kty__badge"><svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5"/></svg></div>
    <div class="kty__eyebrow"><span></span>KORS · СТУДИЯ ПОЛНОГО ЦИКЛА</div>
    <h1>Спасибо! Заявка отправлена</h1>
    <p>Мы получили вашу заявку и уже её изучаем. Свяжемся с вами в ближайшее время, чтобы обсудить задачу и предложить формат работы. Обычно отвечаем в течение рабочего дня.</p>
    <div class="kty__btns">
      <a class="kty__btn kty__btn--p" href="/">Вернуться на сайт</a>
      <a class="kty__btn kty__btn--s" href="https://t.me/korsprodsale" target="_blank" rel="noopener">Написать в Telegram</a>
    </div>
    <div class="kty__contacts">
      <a href="tel:+79158677996">+7 915 867-79-96</a>
      <a href="mailto:info@korsprod.ru">info@korsprod.ru</a>
      <a href="https://wa.me/79158677996" target="_blank" rel="noopener">WhatsApp</a>
      <a href="https://max.ru/u/f9LHodD0cOJry8jfuI2u_X2FJWCLMC5S4I3JfDhcBC6iBjNcaUyKtbZ9Bto" target="_blank" rel="noopener">MAX</a>
    </div>
    <div class="kty__note">Автоматический возврат на главную через <b><span id="ktySec">15</span> сек.</b></div>
  </div>
</div></div>

<script>
(function(){
  try{
    if(typeof ym!=='undefined' && window.Ya && Ya._metrika && Ya._metrika.counters && Ya._metrika.counters[0]){
      ym(Ya._metrika.counters[0].id,'reachGoal','zayavka_thanks');
    }
  }catch(e){}
  try{ if(typeof gtag==='function'){ gtag('event','generate_lead',{event_category:'form',event_label:'thanks_page'}); } }catch(e){}
  try{ if(typeof dataLayer!=='undefined'){ dataLayer.push({event:'form_submit_success',page:'thanks'}); } }catch(e){}
  var n=15,el=document.getElementById('ktySec');
  var t=setInterval(function(){ n--; if(el)el.textContent=n; if(n<=0){ clearInterval(t); window.location.href='/'; } },1000);
})();
</script>rec3164359801 · блок аудита (есть отдельный блок выше) · ключ kors_bak_3164359801 · 13718 симв.
<!-- KORS · БЕСПЛАТНЫЙ АУДИТ · блок T123 · окно видеозвонка с демонстрацией экрана -->
<style>
/* ================= ДЕСКТОП ================= */
.kaud{--bg:#0C0C0E;--border:#2A2A2E;--text:#F5F3EF;--muted:#9A9A9A;--accent:#6D5DFB;background:var(--bg);color:var(--text);font-family:'Manrope',Arial,sans-serif;padding:84px 40px 92px;overflow:hidden}
.kaud *{box-sizing:border-box}
.kaud__wrap{max-width:1240px;margin:0 auto}

/* ----- окно видеозвонка ----- */
.kaud__win{border:1px solid var(--border);border-radius:16px;overflow:hidden;background:linear-gradient(160deg,#17171C,#111114);box-shadow:0 30px 70px rgba(0,0,0,.45)}
.kaud__bar{display:flex;align-items:center;gap:14px;padding:12px 16px;background:#101013;border-bottom:1px solid var(--border)}
.kaud__dots{display:flex;gap:6px;flex:0 0 auto}
.kaud__dots i{display:block;width:10px;height:10px;border-radius:50%;background:#4A4A52}
.kaud__barlabel{font-size:12px;letter-spacing:.02em;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kaud__rec{margin-left:auto;flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;font-family:'Unbounded',sans-serif;font-size:10px;font-weight:600;letter-spacing:.12em;color:#fff;background:#D2342B;border-radius:6px;padding:5px 9px;line-height:1}
.kaud__rec:before{content:"";width:6px;height:6px;border-radius:50%;background:#fff;animation:kaudBlink 1.5s infinite ease-in-out}
@keyframes kaudBlink{0%,100%{opacity:1}50%{opacity:.2}}

.kaud__body{display:grid;grid-template-columns:2.161fr 1fr;min-height:0}

/* ----- левая колонка: демонстрация экрана ----- */
.kaud__share{position:relative;display:block;padding:0;border-right:1px solid var(--border);background:radial-gradient(120% 120% at 50% 0%,#1C1C23 0%,#0D0D10 72%)}
/* слот записи экрана: залит во всю ширину окна, пропорция слота равна пропорции кадра 1200x514, поэтому обрезки нет */
.kaud__doc{position:relative;width:100%;max-width:none;aspect-ratio:1200 / 514;border-radius:0;box-shadow:none;background-size:cover;background-position:center;background-repeat:no-repeat;
/* файл: ekran_zapis_v2-1200.jpg */
background-color:#100E18;background-image:url('https://static.tildacdn.com/tild3231-6338-4130-a666-653466373037/ekran_zapis_v2-1200.jpg')}
/* аккуратные "строки" макета, уйдут вместе с подстановкой фото */
.kaud__doc:before{content:"";position:absolute;left:8%;right:8%;top:74%;height:3px;border-radius:2px;background:rgba(12,12,14,.14)}
.kaud__doc:after{content:"";position:absolute;left:8%;width:44%;top:82%;height:3px;border-radius:2px;background:rgba(12,12,14,.1)}
/* строки-заглушки макета выключены: в слоте теперь настоящая запись экрана */
.kaud__doc:before,.kaud__doc:after{display:none}

/* рамки-пометки */
.kaud__note{position:absolute;border:2px solid var(--accent);border-radius:4px;box-shadow:0 0 0 3px rgba(109,93,251,.16);opacity:0;transform:scale(.94)}
.kaud__tag{position:absolute;left:-2px;bottom:100%;margin-bottom:6px;display:inline-block;background:var(--accent);color:#fff;font-family:'Manrope',Arial,sans-serif;font-size:10px;font-weight:600;line-height:1;letter-spacing:.01em;padding:5px 8px;border-radius:5px;white-space:nowrap}
.kaud__note--1{left:7%;top:13%;width:64%;height:18%}
.kaud__note--2{left:9%;top:47%;width:56%;height:22%}
/* рамки-пометки выключены: такие же аннотации уже есть внутри самой записи экрана, подписи дублировались */
.kaud__note{display:none}
.kaud--in .kaud__note{animation:kaudPop .5s cubic-bezier(.2,.7,.3,1) forwards}
.kaud--in .kaud__note--1{animation-delay:.5s}
.kaud--in .kaud__note--2{animation-delay:1.5s}
@keyframes kaudPop{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.kaud--in .kaud__note{animation:none;opacity:1;transform:none}.kaud__rec:before{animation:none}}

/* ----- правая колонка: участники ----- */
.kaud__people{display:flex;flex-direction:column;background:#101013}
.kaud__person{position:relative;flex:1 1 50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:24px;background-size:cover;background-position:center;background-repeat:no-repeat;
/* кадр лежит в переменной --ph, поверх него лёгкий графитовый слой, чтобы подписи читались */
background-color:#141419;background-image:linear-gradient(to top,rgba(16,14,24,.30) 0%,rgba(16,14,24,.24) 55%,rgba(16,14,24,.18) 100%),var(--ph)}
/* участник со стороны KORS */
/* в кадре продюсера снизу впечатана подпись Aleksandr Volkov (Producer): кадр приближен на 6 процентов и посажен по верхнему краю, подпись уходит за обрез, лицо остаётся по центру */
.kaud__person--kors{--ph:url('https://static.tildacdn.com/tild3638-6439-4366-a238-613761373163/prodavan-1200.jpg');background-size:auto,auto 106%;background-position:center,center top}
/* участник со стороны клиента */
.kaud__person--you{--ph:url('https://static.tildacdn.com/tild3435-6335-4136-b239-343538316366/klient-1200.jpg')}
/* KORS: кадр клиента отражён по горизонтали средствами CSS, сам файл не пересохранялся. Подпись внутри слота отражаем обратно, чтобы текст читался нормально. */
.kaud__person--you{transform:scaleX(-1)}
.kaud__person--you > *{transform:scaleX(-1)}
.kaud__person + .kaud__person{border-top:1px solid var(--border)}
/* подписи роли поверх плиток: вверху справа, вместо круглых бейджей */
.kaud__role{position:absolute;top:12px;right:12px;font-family:'Manrope',Arial,sans-serif;font-size:12px;font-weight:700;line-height:1;letter-spacing:.01em;color:#fff;background:rgba(109,93,251,.94);border:1px solid transparent;border-radius:7px;padding:6px 10px;box-shadow:0 8px 20px rgba(0,0,0,.38)}
.kaud__person--you .kaud__role{background:rgba(20,18,26,.86);border:1px solid rgba(245,243,239,.24);color:#F5F3EF}

/* ----- нижняя часть ----- */
.kaud__head{margin:0 0 30px}
.kaud__head .kaud__title{margin-bottom:0}
.kaud__info{padding:30px 0 0}
.kaud__eyebrow{font-family:'Unbounded',sans-serif;font-size:12px;font-weight:600;letter-spacing:.14em;color:var(--accent);margin-bottom:14px;display:flex;align-items:center;gap:8px}
.kaud__eyebrow:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px rgba(109,93,251,.65)}
.kaud__title{font-family:'Unbounded',sans-serif;font-size:clamp(26px,3.2vw,42px);line-height:1.15;letter-spacing:-.02em;font-weight:700;max-width:900px;margin:0 0 16px}
.kaud__lead{font-size:17px;line-height:1.55;color:#C9C7C2;max-width:780px;margin:0 0 34px}
.kaud__foot{display:flex;align-items:flex-end;justify-content:space-between;gap:40px}
.kaud__steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;flex:1 1 auto}
.kaud__steps li{border-top:1px solid var(--border);padding-top:14px}
.kaud__steps b{display:block;font-size:15px;font-weight:700;color:var(--text);margin-bottom:5px}
.kaud__steps i{display:block;font-style:normal;font-size:14px;line-height:1.4;color:var(--muted)}
.kaud__btn{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;background:var(--accent);color:#fff!important;text-decoration:none!important;font-family:'Manrope',Arial,sans-serif;font-size:16px;font-weight:700;line-height:1;padding:18px 30px;border-radius:40px;box-shadow:0 14px 34px rgba(109,93,251,.32);transition:transform .2s ease,box-shadow .2s ease}
.kaud__btn:hover{transform:translateY(-2px);box-shadow:0 18px 40px rgba(109,93,251,.42)}

/* ================= ПЛАНШЕТ ================= */
@media screen and (min-width:641px) and (max-width:1000px){
.kaud{padding:68px 24px 76px}
.kaud__body{grid-template-columns:2.161fr 1fr;min-height:0}
.kaud__share{padding:0}
.kaud__role{top:10px;right:10px;font-size:11px;padding:5px 9px}
.kaud__head{margin-bottom:26px}
.kaud__info{padding:26px 0 0}
.kaud__lead{font-size:16px;margin:0 0 26px}
.kaud__foot{display:block}
.kaud__steps{gap:16px}
.kaud__btn{margin-top:26px;width:100%}
}

/* ================= МОБИЛЬНАЯ ВЕРСИЯ · отдельная вёрстка, проверено на 390px ================= */
@media screen and (max-width:640px){
.kaud{padding:52px 16px 58px}
.kaud__wrap{max-width:100%}
.kaud__win{border-radius:12px;box-shadow:0 16px 34px rgba(0,0,0,.4)}
.kaud__bar{padding:9px 11px;gap:9px}
.kaud__dots{gap:5px}
.kaud__dots i{width:8px;height:8px}
.kaud__barlabel{font-size:10px}
.kaud__rec{font-size:8px;letter-spacing:.1em;padding:4px 7px;gap:5px;border-radius:5px}
.kaud__rec:before{width:5px;height:5px}
.kaud__body{display:block;min-height:0}
.kaud__share{display:block;padding:0;border-right:0;border-bottom:1px solid var(--border)}
.kaud__doc{max-width:100%;border-radius:0;box-shadow:none;background-size:cover;background-position:center}
.kaud__note{border-width:1.5px;box-shadow:0 0 0 2px rgba(109,93,251,.14);border-radius:3px}
.kaud__tag{font-size:8px;padding:3px 5px;border-radius:4px;margin-bottom:4px;left:-1.5px}
.kaud__note--1{left:6%;top:15%;width:70%;height:17%}
.kaud__note--2{left:8%;top:49%;width:64%;height:21%}
.kaud__people{display:flex;flex-direction:row;width:100%;height:120px}
/* мобильные плитки: кадр по центру, слой чуть плотнее снизу, там подписи */
.kaud__person{flex:1 1 50%;height:120px;padding:10px;gap:8px;background-image:linear-gradient(to top,rgba(16,14,24,.30) 0%,rgba(16,14,24,.25) 55%,rgba(16,14,24,.20) 100%),var(--ph);background-position:center}
/* на мобилке кадр продюсера остаётся cover: впечатанная подпись там уже уходит за обрез по горизонтали */
.kaud__person--kors{background-size:auto,cover}
.kaud__person + .kaud__person{border-top:0;border-left:1px solid var(--border)}
.kaud__role{top:8px;right:8px;font-size:10px;padding:4px 8px;border-radius:6px}
.kaud__head{margin-bottom:22px}
.kaud__info{padding:22px 0 0}
.kaud__eyebrow{font-size:10px;letter-spacing:.12em;margin-bottom:10px;gap:7px}
.kaud__eyebrow:before{width:6px;height:6px}
.kaud__title{font-size:25px;line-height:1.18;max-width:100%;margin:0 0 12px}
.kaud__lead{font-size:15px;line-height:1.5;max-width:100%;margin:0 0 22px}
.kaud__foot{display:block}
.kaud__steps{display:block;grid-template-columns:none;gap:0}
.kaud__steps li{padding-top:11px;margin-bottom:14px}
.kaud__steps b{font-size:14px;margin-bottom:4px}
.kaud__steps i{font-size:13px}
.kaud__btn{display:flex;width:100%;font-size:15px;padding:17px 20px;border-radius:34px;margin-top:6px}
.kaud__btn:hover{transform:none;box-shadow:0 14px 34px rgba(109,93,251,.32)}
}
</style>
<noscript><style>.kaud__note{opacity:1!important;transform:none!important}</style></noscript>

<section class="kaud" aria-labelledby="kaud-title">
<div class="kaud__wrap">

<div class="kaud__head">
<div class="kaud__eyebrow">БЕСПЛАТНЫЙ АУДИТ</div>
<h2 class="kaud__title" id="kaud-title">Аудит ваших рекламных материалов и сайта бесплатно</h2>
</div>

<div class="kaud__win" aria-hidden="true">
<div class="kaud__bar">
<span class="kaud__dots"><i></i><i></i><i></i></span>
<span class="kaud__barlabel">Аудит материалов · демонстрация экрана</span>
<span class="kaud__rec">ЗАПИСЬ</span>
</div>
<div class="kaud__body">
<div class="kaud__share">
<div class="kaud__doc" role="img" aria-label="Запись экрана: разбор сайта производственной компании, пометками отмечены слабые места"><!-- фото: ekran_zapis_v2-1200.jpg -->
<div class="kaud__note kaud__note--1"><span class="kaud__tag">заголовок не про клиента</span></div>
<div class="kaud__note kaud__note--2"><span class="kaud__tag">нет кадров производства</span></div>
</div>
</div>
<div class="kaud__people">
<div class="kaud__person kaud__person--kors" role="img" aria-label="Продюсер KORS на видеозвонке разбирает материалы клиента"><!-- фото: prodavan-1200.jpg --><span class="kaud__role">Продюсер</span></div>
<div class="kaud__person kaud__person--you" role="img" aria-label="Руководитель производственной компании на видеозвонке за рабочим столом"><!-- фото: klient-1200.jpg --><span class="kaud__role">Клиент</span></div>
</div>
</div>
</div>

<div class="kaud__info">
<p class="kaud__lead">Организуем звонок на 10-15 минут, где подробно расскажем, что можно улучшить. Звонок запишем, видео с рекомендациями останется у вас.</p>
<div class="kaud__foot">
<ul class="kaud__steps">
<li><b>Пришлите материалы</b><i>сайт, презентация, каталог, видео</i></li>
<li><b>Созвон 10-15 минут</b><i>проходим по вашим файлам</i></li>
<li><b>Запись у вас</b><i>рекомендации в видео</i></li>
</ul>
<a class="kaud__btn" href="#popup:razbor">Получить бесплатный аудит</a>
</div>
</div>

</div>
</section>

<script>
/* появление рамок-пометок: считаем видимость сами, IntersectionObserver только как ускоритель */
(function(){
  var tries = 0;
  function boot(){
    var sec = document.querySelector(".kaud");
    if(!sec){ tries++; if(tries < 80){ setTimeout(boot, 250); } return; }
    var shown = false;
    function on(){
      if(shown){ return; }
      shown = true;
      sec.classList.add("kaud--in");
      window.removeEventListener("scroll", check);
      window.removeEventListener("resize", check);
    }
    function check(){
      var r = sec.getBoundingClientRect();
      var vh = window.innerHeight || document.documentElement.clientHeight;
      if(r.top < vh * 0.9 && r.bottom > 0){ on(); }
    }
    window.addEventListener("scroll", check, false);
    window.addEventListener("resize", check, false);
    check();
    setTimeout(check, 800);
    setTimeout(check, 2500);
    try{
      if(typeof window.IntersectionObserver === "function"){
        var io = new window.IntersectionObserver(function(en){
          for(var k = 0; k < en.length; k++){ if(en[k].isIntersecting){ on(); io.disconnect(); break; } }
        }, { threshold: 0.15 });
        io.observe(sec);
      }
    }catch(e){}
  }
  if(document.readyState === "loading"){ document.addEventListener("DOMContentLoaded", boot); } else { boot(); }
})();
</script>rec3188192801 · ключ kors_bak_3188192801 · 20077 симв.
<!-- ===== KORS · ПОПАП «РАЗБОР МАТЕРИАЛОВ» · оформление + триггеры (попап rec3187170901) ===== -->
<a href="#popup:razbor" class="krz-open" aria-hidden="true" tabindex="-1" style="display:none!important"></a>

<style>
/* ---------- контейнер и сетка: одна колонка по умолчанию, две на широком экране ---------- */
#rec3187170901 .t-popup__container{max-width:900px!important;width:calc(100% - 40px)!important;background:#111114!important;border:1px solid #2A2A2E!important;border-radius:20px!important;padding:44px 44px 38px!important;}
#rec3187170901 .t702__wrapper{display:grid!important;grid-template-columns:1fr;grid-template-rows:auto auto auto;row-gap:20px;align-items:start;}
#rec3187170901 .t702__text-wrapper{grid-column:1;grid-row:1;text-align:left!important;}
#rec3187170901 .t-form{grid-column:1;grid-row:2;}
#rec3187170901 .t702__form-bottom-text{grid-column:1;grid-row:3;text-align:left!important;margin:0!important;}
/* две колонки, когда есть место: текст слева, форма справа */
@media screen and (min-width:861px){
#rec3187170901 .t702__wrapper{grid-template-columns:.92fr 1.08fr;grid-template-rows:auto auto;column-gap:44px;row-gap:14px;}
#rec3187170901 .t702__text-wrapper{grid-column:1;grid-row:1 / span 2;align-self:center;}
#rec3187170901 .t-form{grid-column:2;grid-row:1;}
#rec3187170901 .t702__form-bottom-text{grid-column:2;grid-row:2;}
}

/* ---------- заголовок (надзаголовок убран: заголовок сам про бесплатный аудит) ---------- */
#rec3187170901 .t702__title{font-family:'Unbounded',sans-serif!important;font-weight:700!important;font-size:clamp(20px,1.7vw,27px)!important;line-height:1.26!important;color:#F5F3EF!important;margin:0 0 10px!important;}
#rec3187170901 .t702__title:before{content:none!important;display:none!important;}

/* ---------- одна строка под заголовком ---------- */
#rec3187170901 .t702__descr{font-family:'Manrope',Arial,sans-serif!important;font-size:15px!important;line-height:1.6!important;color:#9A9A9A!important;margin:0!important;}
#rec3187170901 .t702__descr p{margin:0;}
#rec3187170901 .t702__descr b,#rec3187170901 .t702__descr strong{color:#F5F3EF;font-weight:600;}

/* ---------- форма ---------- */
#rec3187170901 .t-form__inputsbox{margin:0!important;}
#rec3187170901 .t-input-group{margin-bottom:14px!important;padding:0!important;}
#rec3187170901 .t-input-title{font-family:'Manrope',Arial,sans-serif!important;font-size:13px!important;font-weight:500!important;color:#9A9A9A!important;margin-bottom:7px!important;text-align:left!important;}
#rec3187170901 .t-input{background:#17171A!important;border:1px solid #2A2A2E!important;border-radius:10px!important;color:#F5F3EF!important;font-family:'Manrope',Arial,sans-serif!important;font-size:15px!important;height:50px!important;padding:0 16px!important;box-shadow:none!important;}
#rec3187170901 textarea.t-input{height:auto!important;min-height:94px!important;padding:14px 16px!important;resize:vertical;}
#rec3187170901 .t-input:focus{border-color:#6D5DFB!important;outline:none!important;}
#rec3187170901 .t-input::placeholder{color:#66645F!important;}
#rec3187170901 .t-submit{background:#6D5DFB!important;color:#fff!important;border:none!important;border-radius:10px!important;height:54px!important;width:100%!important;font-family:'Manrope',Arial,sans-serif!important;font-size:16px!important;font-weight:600!important;transition:background .2s;}
#rec3187170901 .t-submit:hover{background:#8A7BFF!important;}
#rec3187170901 .t702__form-bottom-text{font-family:'Manrope',Arial,sans-serif!important;font-size:12px!important;line-height:1.6!important;color:#66645F!important;}
#rec3187170901 .t702__form-bottom-text a{color:#9A8CFF!important;}
#rec3187170901 .t-popup__close-wrapper rect{fill:#F5F3EF!important;}

/* ---------- попап на мобильном ---------- */
@media screen and (max-width:640px){
#rec3187170901 .t-popup__container{padding:52px 18px 26px!important;border-radius:16px!important;width:calc(100% - 20px)!important;}
#rec3187170901 .t702__wrapper{row-gap:18px;}
#rec3187170901 .t702__title{font-size:21px!important;margin:0 0 8px!important;padding-top:2px!important;}
#rec3187170901 .t702__descr{font-size:14px!important;line-height:1.55!important;}
}

/* ---------- COOKIE-БАННЕР: сдвиг от виджета мессенджеров на мобильном ---------- */
@media screen and (max-width:640px){
  html body #rec3177014801 .t972:not(.t972_widgetview){left:12px!important;right:12px!important;width:auto!important;bottom:84px!important;border-radius:16px!important;max-height:calc(100vh - 96px)!important;overflow-y:auto!important;}
  html body #rec3177014801 .t972__settings{height:auto!important;max-height:calc(100vh - 96px)!important;}
  html body #rec3177014801 .t972__settings-body{height:auto!important;flex:0 1 auto!important;}
}

/* ---------- COOKIE-БАННЕР: ссылка на политику в акцентном цвете ---------- */
html body #rec3177014801 .t972__text a{color:#6D5DFB!important;text-decoration:underline!important;text-underline-offset:2px!important;}
html body #rec3177014801 .t972__text a:hover{opacity:.8!important;}

/* ---------- COOKIE-БАННЕР: кнопка "Сохранить настройки" на всю ширину на мобильном ---------- */
@media screen and (max-width:640px){
  html body #rec3177014801 .t972__settings-footer{width:100%!important;}
  html body #rec3177014801 .t972__confirm-btn{width:100%!important;max-width:100%!important;display:block!important;}
  html body #rec3177014801 .t972__confirm-btn .t-btnflex__text{width:100%!important;}
}
/* ---------- COOKIE-БАННЕР: компактный вид (CSS-переопределение, настройки блока T972 не тронуты) ---------- */
/* ширина панели только на десктопе, чтобы не спорить с мобильным правилом выше */
@media screen and (min-width:641px){
  html body #rec3177014801 .t972:not(.t972_widgetview){width:420px!important;max-width:calc(100vw - 40px)!important;}
}
/* сама панель: полупрозрачный тёмный фон с размытием, тонкая светлая рамка, радиус 12px */
html body #rec3177014801 .t972__banner{background:rgba(14,14,17,.82)!important;-webkit-backdrop-filter:blur(14px) saturate(120%)!important;backdrop-filter:blur(14px) saturate(120%)!important;border:1px solid rgba(245,243,239,.12)!important;border-radius:12px!important;padding:14px 16px 14px!important;box-shadow:0 16px 40px rgba(0,0,0,.45)!important;}
/* заголовок в свёрнутом виде скрыт, в окне «Настроить» он остаётся */
html body #rec3177014801 .t972__banner .t972__title{display:none!important;}
/* короткий текст */
html body #rec3177014801 .t972__banner .t972__text{font-size:12px!important;line-height:1.5!important;margin:0 0 12px!important;color:#C9C7C2!important;}
/* компактные кнопки */
html body #rec3177014801 .t972__banner .t972__buttons{margin:0!important;}
html body #rec3177014801 .t972__banner .t972__buttons-wrap{gap:8px!important;}
html body #rec3177014801 .t972__banner .t-btnflex{font-size:11px!important;line-height:1.1!important;height:auto!important;min-height:0!important;padding:9px 13px!important;border-radius:7px!important;}
html body #rec3177014801 .t972__banner .t-btnflex .t-btnflex__text{font-size:11px!important;line-height:1.1!important;}
html body #rec3177014801 .t972__banner .t972__settings-btn{font-size:11px!important;}
html body #rec3177014801 .t972__banner .t972__settings-btn .t-btntext__text{font-size:11px!important;}
/* полный текст, перенесённый в окно «Настроить» */
html body #rec3177014801 .t972__settings .kors-c-full{margin-top:10px;}
html body #rec3177014801 .t972__settings a{color:#6D5DFB!important;text-decoration:underline!important;text-underline-offset:2px!important;}
/* «Настроить» выравниваем по левому краю кнопок */
html body #rec3177014801 .t972__banner .t972__settings-btn{margin-left:0!important;}
/* окно «Настроить» в том же стиле, что компактная панель */
html body #rec3177014801 .t972__settings{background:rgba(14,14,17,.9)!important;-webkit-backdrop-filter:blur(14px) saturate(120%)!important;backdrop-filter:blur(14px) saturate(120%)!important;border:1px solid rgba(245,243,239,.12)!important;border-radius:12px!important;}

/* ---------- ЮРИДИЧЕСКИЕ СТРАНИЦЫ (.kdoc на /policy и /user-agreement): контент во всю ширину на мобильном, без горизонтального выезда ---------- */
@media screen and (max-width:640px){
  html body .kdoc{width:100%!important;max-width:100%!important;box-sizing:border-box!important;padding-left:16px!important;padding-right:16px!important;margin-left:0!important;margin-right:0!important;}
  html body .kdoc,html body .kdoc *{overflow-wrap:anywhere!important;word-break:break-word!important;}
  html body .kdoc img,html body .kdoc pre{max-width:100%!important;height:auto!important;}
  html body .kdoc table{display:block!important;width:100%!important;max-width:100%!important;overflow-x:auto!important;}
}
/* прелоадер строго по центру экрана */
html body .kload{left:0!important;right:0!important;width:100%!important;max-width:100%!important;}
</style>

<script>
(function(){
  var REC = "3187170901";           /* блок попапа BF502N */
  var COOKIE_REC = "3177014801";    /* блок cookie-баннера T972 */
  var SKEY = "kors_razbor_shown";   /* показан в этой сессии */
  var LKEY = "kors_lead_sent";      /* заявка уже отправлена */
  var done = false, pending = false;

  function ss(k, v){ try{ if(v === undefined) return sessionStorage.getItem(k); sessionStorage.setItem(k, v); }catch(e){} return null; }
  function ls(k, v){ try{ if(v === undefined) return localStorage.getItem(k); localStorage.setItem(k, v); }catch(e){} return null; }

  var isMobile = (window.innerWidth <= 640) || /Android|iPhone|iPad|iPod|Mobi/i.test(navigator.userAgent);
  var path = location.pathname.replace(/\/+$/, "");
  var isThanks = (path === "/spasibo" || path === "/thanks");
  /* юридические страницы: попап не показываем, LKEY при этом не ставим */
  var isLegal = (path === "/policy" || path === "/user-agreement");
  if(isThanks) ls(LKEY, "1");

  /* запоминаем, что посетитель уже отправил заявку */
  document.addEventListener("submit", function(e){
    var t = e.target;
    if(t && t.classList && t.classList.contains("t-form")) ls(LKEY, "1");
  }, true);

  /* виден ли cookie-баннер */
  function bannerVisible(){
    if(document.cookie.indexOf("t_cookiesConsentGiven") === -1) return true;
    var rec = document.getElementById("rec" + COOKIE_REC);
    if(!rec) return false;
    var box = rec.querySelector(".t972") || rec;
    var cs = window.getComputedStyle(box);
    if(cs.display === "none" || cs.visibility === "hidden") return false;
    return box.getBoundingClientRect().height > 0;
  }
  /* открыт ли другой попап или посетитель уже в форме */
  function somethingOpen(){
    if(document.body.classList.contains("t-body_popupshowed")) return true;
    if(document.querySelector(".t-popup.t-popup_show")) return true;
    var a = document.activeElement;
    if(a && a.classList && a.classList.contains("t-input")) return true;
    return false;
  }
  /* KORS · защита от ложного показа: якорный прыжок и блок калькулятора · 01.09.2026 */
  var KRZG = (function(){
    var jumpUntil = 0, real = 0, wanted = false;
    function cy(){ return window.pageYOffset || document.documentElement.scrollTop || 0; }
    var prevY = cy();
    window.addEventListener('scroll', function(){
      var c = cy(), d = Math.abs(c - prevY); prevY = c;
      if(d > 400){ jumpUntil = Date.now() + 2000; return; }
      real += d;
    }, true);
    document.addEventListener('click', function(e){
      var a = (e.target && e.target.closest) ? e.target.closest('a[href*="#"]') : null;
      if(a) jumpUntil = Date.now() + 2500;
    }, true);
    window.addEventListener('hashchange', function(){ jumpUntil = Date.now() + 2500; });
    function inCalc(){
      var c = document.getElementById('rec2619108701');
      if(!c) return false;
      var r = c.getBoundingClientRect();
      return r.bottom > 0 && r.top < (window.innerHeight || 0);
    }
    setInterval(function(){
      if(!wanted) return;
      if(Date.now() < jumpUntil || inCalc()) return;
      wanted = false;
      try { request(); } catch(err){}
    }, 1500);
    return {
      hold: function(){
        var b = (Date.now() < jumpUntil) || inCalc();
        if(b) wanted = true;
        return b;
      },
      scrolled: function(){ return real >= 600; }
    };
  })();

  function allowed(){
    if(done || isThanks || isLegal) return false;
    if(ls(LKEY) === "1") return false;
    if(ss(SKEY) === "1") return false;
    if(bannerVisible()) return false;
    if(somethingOpen()) return false;
    if(KRZG.hold()) return false;
    return true;
  }
  function show(){
    if(!allowed()) return;
    done = true;
    ss(SKEY, "1");
    var a = document.querySelector("a.krz-open");
    if(a){ a.click(); }
    else if(typeof window.t702_showPopup === "function"){ window.t702_showPopup(REC); }
    cleanup();
  }
  function request(){ pending = true; show(); }

  /* 1) время на странице: 45 сек, на мобильном 60 сек */
  var timer = setTimeout(request, isMobile ? 60000 : 45000);

  /* 2) прокрутка 45% */
  function onScroll(){
    if(!KRZG.scrolled()) return;
    var doc = document.documentElement;
    var h = (doc.scrollHeight || 0) - window.innerHeight;
    if(h <= 0) return;
    var y = window.pageYOffset || doc.scrollTop || 0;
    if((y / h) >= 0.45) request();
  }
  window.addEventListener("scroll", onScroll, {passive:true});

  /* 3) exit-intent, только десктоп */
  function onOut(e){
    if(isMobile) return;
    if(e.clientY <= 0 && !e.relatedTarget && !e.toElement) request();
  }
  if(!isMobile) document.addEventListener("mouseout", onOut, false);

  /* если триггер сработал, но был виден cookie-баннер, пробуем снова */
  var retry = setInterval(function(){ if(pending) show(); }, 1500);

  function cleanup(){
    clearTimeout(timer);
    clearInterval(retry);
    window.removeEventListener("scroll", onScroll);
    document.removeEventListener("mouseout", onOut, false);
  }
})();
</script>

<!-- ===== KORS · COOKIE-БАННЕР: компактный текст в свёрнутом виде, полный текст переносим в окно «Настроить» ===== -->
<script>
(function(){
  var REC = "3177014801";
  var SHORT = "Мы используем cookie для работы сайта и аналитики. ";
  var LINKTEXT = "Политика";
  var tries = 0;

  function compact(){
    var root = document.getElementById("rec" + REC);
    if(!root){ return false; }
    var banner = root.querySelector(".t972__banner");
    if(!banner){ return false; }
    var textEl = banner.querySelector(".t972__text");
    if(!textEl){ return false; }
    if(textEl.getAttribute("data-kors-compact") === "1"){ return true; }

    var link = textEl.querySelector("a");
    var href = link ? (link.getAttribute("href") || "/policy") : "/policy";

    /* полный текст остаётся в окне «Настроить» */
    var box = root.querySelector(".t972__settings .t972__settings-text");
    if(box && !box.querySelector(".kors-c-full")){
      var full = document.createElement("div");
      full.className = "kors-c-full";
      full.innerHTML = textEl.innerHTML;
      box.appendChild(full);
    }

    /* короткий текст в свёрнутом баннере */
    textEl.textContent = SHORT;
    var a = document.createElement("a");
    a.setAttribute("href", href);
    a.textContent = LINKTEXT;
    textEl.appendChild(a);
    textEl.setAttribute("data-kors-compact", "1");

    /* «Принять все» -> «Принять» */
    var acc = banner.querySelector(".t972__accept-btn .t-btnflex__text");
    if(acc){ acc.textContent = "Принять"; }
    return true;
  }

  function tick(){
    var ok = false;
    try{ ok = compact(); }catch(e){}
    tries++;
    if(!ok && tries < 60){ setTimeout(tick, 250); }
  }
  if(document.readyState === "loading"){ document.addEventListener("DOMContentLoaded", tick); } else { tick(); }
})();
</script>

<!-- KORS · ПОПАП АУДИТА rec3187170901 · компактная раскладка v2 · только CSS, разметка/скрипты/загрузчик не тронуты -->
<style>
#rec3187170901 .t-form__inputsbox .t-input-group{margin-bottom:12px !important;}
#rec3187170901 .t-input-group_ta textarea{height:88px !important;min-height:88px !important;}
#rec3187170901 .t-input-group_uw .t-input-subtitle{font-size:11px !important;line-height:1.35 !important;margin-top:2px !important;}
#rec3187170901 .t702__form-bottom-text{font-size:11px !important;line-height:1.4 !important;}

@media screen and (min-width:861px){
  #rec3187170901 .t-popup__container{max-width:960px !important;padding-top:24px !important;padding-bottom:18px !important;}
  #rec3187170901 .t702__wrapper{grid-template-columns:1fr !important;grid-template-rows:auto auto auto !important;padding-top:20px !important;padding-bottom:16px !important;}
  #rec3187170901 .t702__text-wrapper{grid-column:1 !important;grid-row:1 !important;margin-bottom:14px !important;text-align:left !important;}
  #rec3187170901 .t-form{grid-column:1 !important;grid-row:2 !important;}
  #rec3187170901 .t702__form-bottom-text{grid-column:1 !important;grid-row:3 !important;margin-top:10px !important;}
  #rec3187170901 .t-form__inputsbox{display:grid;grid-template-columns:1fr 1fr;column-gap:24px;align-items:start;}
  #rec3187170901 .t-input-group_nm{grid-column:1;grid-row:1;}
  #rec3187170901 .t-form__inputsbox > .t-input-group:nth-child(2){grid-column:1;grid-row:2;}
  #rec3187170901 .t-form__inputsbox > .t-input-group:nth-child(3){grid-column:1;grid-row:3;}
  #rec3187170901 .t-form__inputsbox > .t-input-group:nth-child(6){grid-column:1;grid-row:4;}
  #rec3187170901 .t-input-group_ta{grid-column:2;grid-row:1 / span 2;}
  #rec3187170901 .t-input-group_uw{grid-column:2;grid-row:3 / span 2;}
  #rec3187170901 .t-form__errorbox-middle{grid-column:1 / -1;}
  #rec3187170901 .t-form__submit{grid-column:1 / -1;margin-top:4px;}
}

@media screen and (max-width:640px){
  #rec3187170901 .t-popup__container{padding-top:34px !important;padding-bottom:14px !important;}
  #rec3187170901 .t702__wrapper{padding-top:12px !important;padding-bottom:12px !important;}
  #rec3187170901 .t702__text-wrapper{margin-bottom:10px !important;}
  #rec3187170901 .t-form__inputsbox .t-input-group{margin-bottom:10px !important;}
  #rec3187170901 .t-input-group input.t-input{height:44px !important;}
  #rec3187170901 .t-input-group_ta textarea{height:80px !important;min-height:80px !important;}
  #rec3187170901 .t-form__inputsbox{display:grid;grid-template-columns:1fr 1fr;column-gap:10px;align-items:start;}
  #rec3187170901 .t-input-group_nm{grid-column:1;grid-row:1;}
  #rec3187170901 .t-form__inputsbox > .t-input-group:nth-child(2){grid-column:2;grid-row:1;}
  #rec3187170901 .t-form__inputsbox > .t-input-group:nth-child(3){grid-column:1;grid-row:2;}
  #rec3187170901 .t-form__inputsbox > .t-input-group:nth-child(6){grid-column:2;grid-row:2;}
  #rec3187170901 .t-input-group_ta{grid-column:1 / -1;grid-row:3;}
  #rec3187170901 .t-input-group_uw{grid-column:1 / -1;grid-row:4;}
  #rec3187170901 .t-form__errorbox-middle{grid-column:1 / -1;}
  #rec3187170901 .t-form__submit{grid-column:1 / -1;}
}
</style>

<!-- KORS · ПОПАП АУДИТА · доужимка мобильной версии v3 -->
<style>
@media screen and (max-width:640px){
  #rec3187170901 .t-popup__container{padding-left:12px !important;padding-right:12px !important;width:calc(100% - 16px) !important;}
  #rec3187170901 .t702__wrapper{padding-left:8px !important;padding-right:8px !important;}
  #rec3187170901 .t702__title{font-size:19px !important;}
  #rec3187170901 .t702__descr{font-size:13px !important;line-height:1.45 !important;}
  #rec3187170901 .t-submit{height:48px !important;min-height:48px !important;padding-top:0 !important;padding-bottom:0 !important;}
  #rec3187170901 .t-form__inputsbox .t-input-group{margin-bottom:8px !important;}
  #rec3187170901 .t-input-group_uw{display:grid !important;grid-template-columns:1fr auto;column-gap:10px;align-items:center;}
  #rec3187170901 .t-input-group_uw .t-input-title{grid-column:1;grid-row:1;margin:0 !important;}
  #rec3187170901 .t-input-group_uw .t-input-block{grid-column:2;grid-row:1;}
  #rec3187170901 .t-input-group_uw .t-input-subtitle{grid-column:1 / -1;grid-row:2;margin-top:4px !important;}
  #rec3187170901 .t-input-group_uw .t-input-error{grid-column:1 / -1;}
}
</style>rec3237946401 · /sites · первый экран · ключ kors_bak_3237946401_20260904 · 5492 симв.
<style>
/* ---------- Hero ---------- */
.hero{padding:168px 0 78px;position:relative}
.hero::before{content:'';position:absolute;top:-140px;right:-160px;width:620px;height:620px;background:radial-gradient(circle,rgba(109,93,251,.3),transparent 62%);filter:blur(10px);pointer-events:none}
.hero::after{content:'';position:absolute;bottom:-160px;left:-200px;width:520px;height:520px;background:radial-gradient(circle,rgba(109,93,251,.16),transparent 60%);pointer-events:none}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center;position:relative;z-index:1}
.hero .sub{margin:24px 0 34px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap}
.hero-trust{display:flex;gap:34px;margin-top:44px;flex-wrap:wrap}
.hero-trust div b{font-size:30px;font-weight:700;letter-spacing:-.03em;display:block;line-height:1.1}
.hero-trust div span{font-size:13.5px;color:var(--muted)}
.hero-collage{display:grid;grid-template-columns:1fr .46fr;gap:14px}
.hero-collage .shot{position:relative;overflow:hidden;border-radius:var(--r-sm);box-shadow:0 0 0 1px var(--line);background:#0f0f11}
.hero-collage .shot--desk{grid-column:1;grid-row:1}
.hero-collage .shot--mob{grid-column:2;grid-row:1/3}
.hero-collage .shot--vid{grid-column:1;grid-row:2;aspect-ratio:16/9;background-image:url('https://static.tildacdn.com/tild6434-3831-4836-a437-306638313566/poster-sites-hero.jpg');background-size:cover;background-position:center;background-repeat:no-repeat}
.hero-collage .shot img{display:block;width:100%;height:auto}
.hero-collage .shot--mob img{width:100%;height:100%;object-fit:cover;object-position:top center}
.hero-collage .shot iframe{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);min-width:100%;min-height:100%;width:auto;height:auto;aspect-ratio:16/9;border:none;pointer-events:none}
@media (max-width:600px){
.hero-collage{grid-template-columns:1fr 1fr}
.hero-collage .shot--desk{grid-column:1/-1;grid-row:1}
.hero-collage .shot--mob{grid-column:1;grid-row:2;aspect-ratio:3/4}
.hero-collage .shot--vid{grid-column:2;grid-row:2;align-self:center}
}
</style>
<section class="hero">
  <div class="container hero-grid">
    <div>
      <div class="eyebrow">KORS · продающие сайты для бизнеса</div>
      <h1>Сайты для бизнеса с <span class="squig">конверсией от 5%<svg viewBox="0 0 300 24" preserveAspectRatio="none" aria-hidden="true"><path d="M4 14 C70 5 180 4 296 11"/><path d="M140 20 C200 13 255 12 293 16"/></svg></span> — первые заявки через 21 день</h1>
      <p class="sub">Смыслы, тексты, дизайн, сборка и реклама — одной командой KORS. Плюс то, чего не даст обычная веб-студия: своя съёмочная команда — реальные фото и видео вашего бизнеса вместо стоковых картинок.</p>
      <div class="hero-cta">
        <a class="btn btn-primary" href="#quiz">Получить план запуска</a>
        <a class="btn btn-ghost" href="#cases">Смотреть кейсы</a>
      </div>
      <div class="hero-trust">
        <div><b>460+</b><span>проектов студии<br>с 2019 года</span></div>
        <div><b>30+</b><span>ниш — от производств и b2b<br>до услуг и ритейла</span></div>
        <div><b>6,4%</b><span>средняя конверсия<br>наших сайтов в заявку</span></div>
      </div>
    </div>
    <div>
      <div class="hero-collage">
        <div class="shot shot--desk"><img src="https://static.tildacdn.com/tild3463-3561-4837-b438-333439316132/povidlo-su-01-hero.jpg" alt="Первый экран сайта povidlo.su, сделанного студией KORS для производителя фруктово-ягодных начинок" loading="lazy"></div>
        <div class="shot shot--mob"><img src="https://static.tildacdn.com/tild3331-6135-4830-a633-623063326539/photo_52333078068474.jpg" alt="Мобильная версия сайта povidlo.su, сделанного студией KORS" loading="lazy"></div>
        <div class="shot shot--vid"><iframe src="https://kinescope.io/embed/eCGHEdUFdSyEjCBXxcsUSC?autoplay=true&muted=true&loop=true&controls=false&playsInline=true&background=true" title="Шоурил работ студии KORS" aria-label="Шоурил работ студии KORS" allow="autoplay; encrypted-media"></iframe></div>
      </div>
    </div>
  </div>
</section>

<script>
/* KORS - постер под ролик Kinescope.
   Если плеер не загрузился (сбой Кинескопа, блокировка, медленная сеть),
   в слоте остаётся кадр из ролика, а не пустое место.
   Постер кладётся фоном контейнера, iframe лежит поверх.
   Слоты, у которых фон уже задан своим постером, не трогаем. */
(function(){
  function put(f){
    var box = f.parentElement;
    if(!box || box.getAttribute("data-kposter")) return;
    var src = f.getAttribute("src") || f.getAttribute("data-src") || "";
    var id = (src.match(/embed\/([A-Za-z0-9]+)/) || [])[1];
    if(!id) return;
    box.setAttribute("data-kposter", "1");
    if(getComputedStyle(box).backgroundImage !== "none") return;
    box.style.backgroundColor = "#141416";
    box.style.backgroundImage = "url(https://kinescope.io/" + id + "/poster.jpg)";
    box.style.backgroundSize = "cover";
    box.style.backgroundPosition = "center";
    box.style.backgroundRepeat = "no-repeat";
  }
  function scan(){
    var f = document.querySelectorAll('iframe[src*="kinescope"], iframe[data-src*="kinescope"]');
    for(var i = 0; i < f.length; i++) put(f[i]);
  }
  scan();
  setTimeout(scan, 1000); setTimeout(scan, 3000); setTimeout(scan, 8000);
  if(window.MutationObserver){
    var mo = new MutationObserver(scan);
    mo.observe(document.documentElement, {childList:true, subtree:true});
    setTimeout(function(){ mo.disconnect(); }, 30000);
  }
})();
</script>rec3238063701 · /sites · Результаты в цифрах · ключ kors_bak_3238063701_20260904 · 2827 симв.
<style>
/* ---------- Stats ---------- */
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.stat{background:var(--card);border-radius:var(--r-md);padding:30px 28px;box-shadow:0 0 0 1px var(--line)}
.stat .stat-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.stat b{font-size:clamp(34px,3.4vw,48px);font-weight:700;letter-spacing:-.035em;line-height:1}
.stat span.lbl{font-size:14.5px;color:var(--muted);line-height:1.5;display:block}
.pill-up{background:var(--green);color:#fff;border-radius:999px;padding:5px 13px;font-weight:700;font-size:13.5px;letter-spacing:-.01em;white-space:nowrap}
.pill-soft{background:var(--peach);color:var(--accent-txt);border-radius:999px;padding:5px 13px;font-weight:700;font-size:13.5px;white-space:nowrap}
</style>
<section>
  <div class="container">
    <div class="eyebrow reveal">Что получают клиенты</div>
    <h2 class="reveal">Результаты в цифрах, а не в обещаниях</h2>
    <p class="sub reveal">Средние показатели по проектам студии за последние два года.</p>
    <div class="stats-grid" style="margin-top:44px">
      <div class="stat reveal"><div class="stat-top"><b data-count="4.6" data-prefix="×">×4,6</b><span class="pill-up">рост</span></div><span class="lbl">вырастает поток заявок после переупаковки сайта</span></div>
      <div class="stat reveal"><div class="stat-top"><b data-count="6.4" data-suffix="%">6,4%</b></div><span class="lbl">средняя конверсия сайтов студии в заявку</span></div>
      <div class="stat reveal"><div class="stat-top"><b data-count="48" data-prefix="−" data-suffix="%">−48%</b><span class="pill-up">к цене заявки</span></div><span class="lbl">настолько дешевле обходится заявка после запуска</span></div>
      <div class="stat reveal"><div class="stat-top"><b data-count="21">21</b><span class="pill-soft">день</span></div><span class="lbl">от старта работ до первых обращений</span></div>
    </div>
    <div class="draft-note reveal">✏️ Цифры черновые — заменим на реальную статистику студии</div>
  </div>
</section>
<script>
if(!reduced){
  var cIo=new IntersectionObserver(function(es){
    es.forEach(function(e){
      if(!e.isIntersecting)return;
      var el=e.target,target=parseFloat(el.dataset.count),pre=el.dataset.prefix||'',suf=el.dataset.suffix||'';
      var dec=(el.dataset.count.indexOf('.')>-1)?1:0,t0=null;
      function tick(t){
        if(!t0)t0=t;
        var k=Math.min((t-t0)/1100,1),v=(target*(0.2+0.8*k*k)).toFixed(dec).replace('.',',');
        if(k>=1)v=target.toFixed(dec).replace('.',',');
        el.textContent=pre+v+suf;
        if(k<1)requestAnimationFrame(tick);
      }
      requestAnimationFrame(tick);
      cIo.unobserve(el);
    });
  },{threshold:.5});
  document.querySelectorAll('[data-count]').forEach(function(el){cIo.observe(el)});
}
</script>rec3238295901 · /sites · ключ kors_bak_3238295901 · 2812 симв.
<style>
/* ---------- Проблемы ---------- */
.pains-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:44px 16px;margin-top:64px}
.pain{position:relative;background:var(--card-soft);border-radius:0 var(--r-md) var(--r-md) var(--r-md);padding:32px;box-shadow:0 0 0 1px var(--line);transition:transform .2s}
.pain::before{content:'';position:absolute;top:-22px;left:0;width:46%;max-width:230px;height:24px;background:var(--card-soft);border-radius:14px 28px 0 0}
.pain:hover{transform:translateY(-4px);box-shadow:0 0 0 1px var(--accent)}
.pain .bolt{position:absolute;top:26px;right:26px;width:34px;height:34px}
.pain h3{font-size:24px;margin-bottom:12px;max-width:82%}
.pain p{color:var(--muted);font-size:15.5px;max-width:88%}
.pain-shot{margin:40px 0 0}
.pain-shot img{display:block;width:100%;height:auto;border-radius:var(--r-sm);border:1px solid var(--line)}
.pain-shot figcaption{margin-top:12px;font-size:13.5px;line-height:1.55;color:var(--muted);max-width:680px}
</style>
<section style="padding-top:0">
  <div class="container">
    <div class="eyebrow reveal">Проблемы</div>
    <h2 class="reveal">Знакомая ситуация? С этим к нам и приходят</h2>
    <div class="pains-grid">
      <div class="pain reveal"><svg class="bolt" viewBox="0 0 24 24" aria-hidden="true"><path d="M13.5 2 4.5 14h6l-2 8 9.5-12.5h-6z" fill="#a99cff"/></svg><h3>Сайт есть — заявок нет</h3><p>Люди заходят каждый день, листают и молча закрывают вкладку. Форма пустует неделями.</p></div>
      <div class="pain reveal"><svg class="bolt" viewBox="0 0 24 24" aria-hidden="true"><path d="M13.5 2 4.5 14h6l-2 8 9.5-12.5h-6z" fill="#a99cff"/></svg><h3>Реклама сжигает бюджет</h3><p>Клики идут, отчёты красивые, а на выходе — ноль продаж и вопрос «за что мы платим».</p></div>
      <div class="pain reveal"><svg class="bolt" viewBox="0 0 24 24" aria-hidden="true"><path d="M13.5 2 4.5 14h6l-2 8 9.5-12.5h-6z" fill="#a99cff"/></svg><h3>Сэкономили на фрилансере</h3><p>Сделали «недорого», а теперь второй год платите за правки — и всё равно не работает.</p></div>
      <div class="pain reveal"><svg class="bolt" viewBox="0 0 24 24" aria-hidden="true"><path d="M13.5 2 4.5 14h6l-2 8 9.5-12.5h-6z" fill="#a99cff"/></svg><h3>Летите вслепую</h3><p>Непонятно, откуда пришла заявка, сколько стоит клиент и что вообще нужно менять.</p></div>
    </div>
    <figure class="pain-shot reveal">
      <img src="https://static.tildacdn.com/tild3662-3830-4234-b239-323033663935/skrin-v-2.jpg" alt="Разбор типового сайта производителя: заголовок не про клиента, слабый оффер, нет доказательств, непонятно чем компания отличается" loading="lazy">
      <figcaption>Так выглядит типовой сайт производителя, когда мы разбираем его на аудите: заголовок не про клиента, слабый оффер, нет доказательств.</figcaption>
    </figure>
  </div>
</section>rec3238347601 · /sites · Кейсы (ранняя копия) · ключ kors_bak_3238347601 · 6463 симв.
<style>
/* ---------- Кейсы ---------- */
.case{background:var(--dark-2);border-radius:32px;padding:38px;margin-top:26px;display:grid;grid-template-columns:1.08fr .92fr;gap:38px;align-items:center}
.case-tag{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#a99cff;background:rgba(109,93,251,.16);border-radius:999px;padding:8px 15px;margin-bottom:16px}
.case h3{font-size:clamp(21px,2.3vw,29px);line-height:1.15;margin-bottom:12px;letter-spacing:-.025em}
.case-task{color:var(--gray);font-size:15.5px;margin-bottom:26px}
.case-task b{color:#fff;font-weight:600}
.ba{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:stretch}
.ba-col{background:#0c0c0e;border-radius:20px;padding:20px}
.ba-col h4{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#66645f;margin-bottom:14px}
.ba-col.after{background:var(--dark-3)}
.ba-col.after h4{color:var(--gray)}
.ba-col ul{list-style:none}
.ba-col li{display:flex;justify-content:space-between;gap:12px;font-size:14px;padding:8px 0;border-top:1px solid var(--line-dark);color:var(--gray)}
.ba-col li:first-of-type{border-top:none}
.ba-col li b{font-weight:700;white-space:nowrap;color:#c8c6c1;letter-spacing:-.02em}
.ba-col.after li b{color:#fff;font-size:16px}
.ba-arrow{align-self:center;font-size:24px;color:var(--accent-txt)}
.case-delta{display:flex;gap:10px;margin-top:24px;flex-wrap:wrap}
.delta-pill{background:var(--green);color:#fff;border-radius:999px;padding:9px 18px;font-weight:700;font-size:15px;letter-spacing:-.01em}
.delta-pill small{display:block;font-size:10.5px;font-weight:600;opacity:.85;letter-spacing:.04em;text-transform:uppercase}
.case .ph{min-height:300px;height:100%}
</style>
<div class="section-dark" id="cases">
  <div class="ghost" aria-hidden="true">кейсы</div>
  <section>
  <div class="container">
    <div class="sec-head-c">
      <h2 class="reveal">Как выглядит <span class="circled">система<svg viewBox="0 0 320 116" preserveAspectRatio="none" aria-hidden="true"><path d="M28 62 C38 20 268 6 300 44 C328 78 250 106 152 105 C64 104 16 94 24 66"/></svg></span> привлечения заявок в реальных проектах</h2>
      <p class="sub reveal">Структура карточек готова — останется подставить ваши ниши, скрины и метрики.</p>
    </div>
    <div class="case reveal">
      <div>
        <span class="case-tag">Производство мебели · b2c</span>
        <h3>+814% заявок и −58% к стоимости обращения</h3>
        <p class="case-task"><b>Задача:</b> уйти от зависимости от сарафана и построить управляемый поток заявок с рекламы.</p>
        <div class="ba">
          <div class="ba-col"><h4>До</h4><ul>
            <li><span>Конверсия сайта</span><b>0,9%</b></li>
            <li><span>Заявок / мес.</span><b>7</b></li>
            <li><span>Стоимость заявки</span><b>3 900 ₽</b></li>
          </ul></div>
          <div class="ba-arrow">→</div>
          <div class="ba-col after"><h4>После</h4><ul>
            <li><span>Конверсия сайта</span><b>6,2%</b></li>
            <li><span>Заявок / мес.</span><b>64</b></li>
            <li><span>Стоимость заявки</span><b>1 620 ₽</b></li>
          </ul></div>
        </div>
        <div class="case-delta">
          <span class="delta-pill">+814% <small>заявок</small></span>
          <span class="delta-pill">−58% <small>цена заявки</small></span>
          <span class="delta-pill">×6,8 <small>конверсия</small></span>
        </div>
      </div>
      <div class="ph ph-dark"><div class="ph-ico">🖥️</div><div class="ph-cap"><b>Сюда: скрин</b>главный экран сайта из кейса №1</div></div>
    </div>
    <div class="case reveal">
      <div>
        <span class="case-tag">Сеть автосервисов · услуги</span>
        <h3>С 12 до 87 записей в месяц на том же рекламном бюджете</h3>
        <p class="case-task"><b>Задача:</b> сайт-визитка не объяснял, почему ехать именно сюда, а не к гаражному мастеру. Переупаковали смыслы и структуру.</p>
        <div class="ba">
          <div class="ba-col"><h4>До</h4><ul>
            <li><span>Конверсия сайта</span><b>1,4%</b></li>
            <li><span>Заявок / мес.</span><b>12</b></li>
            <li><span>Записей на сервис</span><b>8</b></li>
          </ul></div>
          <div class="ba-arrow">→</div>
          <div class="ba-col after"><h4>После</h4><ul>
            <li><span>Конверсия сайта</span><b>7,8%</b></li>
            <li><span>Заявок / мес.</span><b>87</b></li>
            <li><span>Записей на сервис</span><b>61</b></li>
          </ul></div>
        </div>
        <div class="case-delta">
          <span class="delta-pill">+625% <small>заявок</small></span>
          <span class="delta-pill">×5,6 <small>конверсия</small></span>
          <span class="delta-pill">×7,6 <small>записей</small></span>
        </div>
      </div>
      <div class="ph ph-dark"><div class="ph-ico">🖥️</div><div class="ph-cap"><b>Сюда: скрин</b>главный экран сайта из кейса №2</div></div>
    </div>
    <div class="case reveal">
      <div>
        <span class="case-tag">Оборудование · b2b</span>
        <h3>×4 к лидам при среднем чеке сделки от 2 млн ₽</h3>
        <p class="case-task"><b>Задача:</b> каталог не продавал — заявки уходили конкурентам с более понятной упаковкой оффера.</p>
        <div class="ba">
          <div class="ba-col"><h4>До</h4><ul>
            <li><span>Лидов / мес.</span><b>6</b></li>
            <li><span>Конверсия сайта</span><b>0,8%</b></li>
            <li><span>Бюджет на рекламу</span><b>240 т.₽</b></li>
          </ul></div>
          <div class="ba-arrow">→</div>
          <div class="ba-col after"><h4>После</h4><ul>
            <li><span>Лидов / мес.</span><b>25</b></li>
            <li><span>Конверсия сайта</span><b>4,7%</b></li>
            <li><span>Бюджет на рекламу</span><b>240 т.₽</b></li>
          </ul></div>
        </div>
        <div class="case-delta">
          <span class="delta-pill">×4,2 <small>лидов</small></span>
          <span class="delta-pill">×5,9 <small>конверсия</small></span>
          <span class="delta-pill" style="background:#3e4248">0 ₽ <small>рост бюджета</small></span>
        </div>
      </div>
      <div class="ph ph-dark"><div class="ph-ico">🖥️</div><div class="ph-cap"><b>Сюда: скрин</b>главный экран сайта из кейса №3</div></div>
    </div>
    <div style="text-align:center"><span class="draft-note reveal">✏️ Цифры и ниши черновые — подставим ваши кейсы</span></div>
  </div>
  </section>
</div>rec3238347601 · /sites · Кейсы · ключ kors_bak_3238347601_20260904 · 6151 симв.
<style>
/* ---------- Кейсы ---------- */
.case{background:var(--dark-2);border-radius:32px;padding:38px;margin-top:26px;display:grid;grid-template-columns:1.08fr .92fr;gap:38px;align-items:center}
.case-tag{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#a99cff;background:rgba(109,93,251,.16);border-radius:999px;padding:8px 15px;margin-bottom:16px}
.case h3{font-size:clamp(21px,2.3vw,29px);line-height:1.15;margin-bottom:12px;letter-spacing:-.025em}
.case-task{color:var(--gray);font-size:15.5px;margin-bottom:26px}
.case-task b{color:#fff;font-weight:600}
.ba{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:stretch}
.ba-col{background:#0c0c0e;border-radius:20px;padding:20px}
.ba-col h4{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#66645f;margin-bottom:14px}
.ba-col.after{background:var(--dark-3)}
.ba-col.after h4{color:var(--gray)}
.ba-col ul{list-style:none}
.ba-col li{display:flex;justify-content:space-between;gap:12px;font-size:14px;padding:8px 0;border-top:1px solid var(--line-dark);color:var(--gray)}
.ba-col li:first-of-type{border-top:none}
.ba-col li b{font-weight:700;white-space:nowrap;color:#c8c6c1;letter-spacing:-.02em}
.ba-col.after li b{color:#fff;font-size:16px}
.ba-arrow{align-self:center;font-size:24px;color:var(--accent-txt)}
.case-delta{display:flex;gap:10px;margin-top:24px;flex-wrap:wrap}
.delta-pill{background:var(--green);color:#fff;border-radius:999px;padding:9px 18px;font-weight:700;font-size:15px;letter-spacing:-.01em}
.delta-pill small{display:block;font-size:10.5px;font-weight:600;opacity:.85;letter-spacing:.04em;text-transform:uppercase}
.case .ph{min-height:300px;height:100%}
</style>
<div class="section-dark" id="cases">
  <div class="ghost" aria-hidden="true">кейсы</div>
  <section>
  <div class="container">
    <div class="sec-head-c">
      <h2 class="reveal">Как выглядит <span class="circled">система<svg viewBox="0 0 320 116" preserveAspectRatio="none" aria-hidden="true"><path d="M28 62 C38 20 268 6 300 44 C328 78 250 106 152 105 C64 104 16 94 24 66"/></svg></span> привлечения заявок в реальных проектах</h2>
      <p class="sub reveal">Структура карточек готова — останется подставить ваши ниши, скрины и метрики.</p>
    </div>
    <div class="case reveal">
      <div>
        <span class="case-tag">Производство мебели · b2c</span>
        <h3>+814% заявок и −58% к стоимости обращения</h3>
        <p class="case-task"><b>Задача:</b> уйти от зависимости от сарафана и построить управляемый поток заявок с рекламы.</p>
        <div class="ba">
          <div class="ba-col"><h4>До</h4><ul>
            <li><span>Конверсия сайта</span><b>0,9%</b></li>
            <li><span>Заявок / мес.</span><b>7</b></li>
            <li><span>Стоимость заявки</span><b>3 900 ₽</b></li>
          </ul></div>
          <div class="ba-arrow">→</div>
          <div class="ba-col after"><h4>После</h4><ul>
            <li><span>Конверсия сайта</span><b>6,2%</b></li>
            <li><span>Заявок / мес.</span><b>64</b></li>
            <li><span>Стоимость заявки</span><b>1 620 ₽</b></li>
          </ul></div>
        </div>
        <div class="case-delta">
          <span class="delta-pill">+814% <small>заявок</small></span>
          <span class="delta-pill">−58% <small>цена заявки</small></span>
          <span class="delta-pill">×6,8 <small>конверсия</small></span>
        </div>
      </div>
      <div class="ph ph-dark"></div>
    </div>
    <div class="case reveal">
      <div>
        <span class="case-tag">Сеть автосервисов · услуги</span>
        <h3>С 12 до 87 записей в месяц на том же рекламном бюджете</h3>
        <p class="case-task"><b>Задача:</b> сайт-визитка не объяснял, почему ехать именно сюда, а не к гаражному мастеру. Переупаковали смыслы и структуру.</p>
        <div class="ba">
          <div class="ba-col"><h4>До</h4><ul>
            <li><span>Конверсия сайта</span><b>1,4%</b></li>
            <li><span>Заявок / мес.</span><b>12</b></li>
            <li><span>Записей на сервис</span><b>8</b></li>
          </ul></div>
          <div class="ba-arrow">→</div>
          <div class="ba-col after"><h4>После</h4><ul>
            <li><span>Конверсия сайта</span><b>7,8%</b></li>
            <li><span>Заявок / мес.</span><b>87</b></li>
            <li><span>Записей на сервис</span><b>61</b></li>
          </ul></div>
        </div>
        <div class="case-delta">
          <span class="delta-pill">+625% <small>заявок</small></span>
          <span class="delta-pill">×5,6 <small>конверсия</small></span>
          <span class="delta-pill">×7,6 <small>записей</small></span>
        </div>
      </div>
      <div class="ph ph-dark"></div>
    </div>
    <div class="case reveal">
      <div>
        <span class="case-tag">Оборудование · b2b</span>
        <h3>×4 к лидам при среднем чеке сделки от 2 млн ₽</h3>
        <p class="case-task"><b>Задача:</b> каталог не продавал — заявки уходили конкурентам с более понятной упаковкой оффера.</p>
        <div class="ba">
          <div class="ba-col"><h4>До</h4><ul>
            <li><span>Лидов / мес.</span><b>6</b></li>
            <li><span>Конверсия сайта</span><b>0,8%</b></li>
            <li><span>Бюджет на рекламу</span><b>240 т.₽</b></li>
          </ul></div>
          <div class="ba-arrow">→</div>
          <div class="ba-col after"><h4>После</h4><ul>
            <li><span>Лидов / мес.</span><b>25</b></li>
            <li><span>Конверсия сайта</span><b>4,7%</b></li>
            <li><span>Бюджет на рекламу</span><b>240 т.₽</b></li>
          </ul></div>
        </div>
        <div class="case-delta">
          <span class="delta-pill">×4,2 <small>лидов</small></span>
          <span class="delta-pill">×5,9 <small>конверсия</small></span>
          <span class="delta-pill" style="background:#3e4248">0 ₽ <small>рост бюджета</small></span>
        </div>
      </div>
      <div class="ph ph-dark"></div>
    </div>
    <div style="text-align:center"><span class="draft-note reveal">✏️ Цифры и ниши черновые — подставим ваши кейсы</span></div>
  </div>
  </section>
</div>rec3238347601 · /sites · Кейсы (до лайтбокса) · ключ kors_bak_3238347601_lb · 6883 симв.
<style>
/* ---------- Кейсы ---------- */
.case{background:var(--dark-2);border-radius:32px;padding:38px;margin-top:26px;display:grid;grid-template-columns:1.08fr .92fr;gap:38px;align-items:center}
.case-tag{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#a99cff;background:rgba(109,93,251,.16);border-radius:999px;padding:8px 15px;margin-bottom:16px}
.case h3{font-size:clamp(21px,2.3vw,29px);line-height:1.15;margin-bottom:12px;letter-spacing:-.025em}
.case-task{color:var(--gray);font-size:15.5px;margin-bottom:26px}
.case-task b{color:#fff;font-weight:600}
.ba{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:stretch}
.ba-col{background:#0c0c0e;border-radius:20px;padding:20px}
.ba-col h4{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#66645f;margin-bottom:14px}
.ba-col.after{background:var(--dark-3)}
.ba-col.after h4{color:var(--gray)}
.ba-col ul{list-style:none}
.ba-col li{display:flex;justify-content:space-between;gap:12px;font-size:14px;padding:8px 0;border-top:1px solid var(--line-dark);color:var(--gray)}
.ba-col li:first-of-type{border-top:none}
.ba-col li b{font-weight:700;white-space:nowrap;color:#c8c6c1;letter-spacing:-.02em}
.ba-col.after li b{color:#fff;font-size:16px}
.ba-arrow{align-self:center;font-size:24px;color:var(--accent-txt)}
.case-delta{display:flex;gap:10px;margin-top:24px;flex-wrap:wrap}
.delta-pill{background:var(--green);color:#fff;border-radius:999px;padding:9px 18px;font-weight:700;font-size:15px;letter-spacing:-.01em}
.delta-pill small{display:block;font-size:10.5px;font-weight:600;opacity:.85;letter-spacing:.04em;text-transform:uppercase}
.case .ph{min-height:300px;height:100%}
.case .ph.case-shot{border:none!important;background:#0c0c0e!important;padding:0!important;overflow:hidden!important;position:relative}
.case .ph.case-shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
</style>
<div class="section-dark" id="cases">
  <div class="ghost" aria-hidden="true">кейсы</div>
  <section>
  <div class="container">
    <div class="sec-head-c">
      <h2 class="reveal">Как выглядит <span class="circled">система<svg viewBox="0 0 320 116" preserveAspectRatio="none" aria-hidden="true"><path d="M28 62 C38 20 268 6 300 44 C328 78 250 106 152 105 C64 104 16 94 24 66"/></svg></span> привлечения заявок в реальных проектах</h2>
      <p class="sub reveal">Структура карточек готова — останется подставить ваши ниши, скрины и метрики.</p>
    </div>
    <div class="case reveal">
      <div>
        <span class="case-tag">Производство мебели · b2c</span>
        <h3>+814% заявок и −58% к стоимости обращения</h3>
        <p class="case-task"><b>Задача:</b> уйти от зависимости от сарафана и построить управляемый поток заявок с рекламы.</p>
        <div class="ba">
          <div class="ba-col"><h4>До</h4><ul>
            <li><span>Конверсия сайта</span><b>0,9%</b></li>
            <li><span>Заявок / мес.</span><b>7</b></li>
            <li><span>Стоимость заявки</span><b>3 900 ₽</b></li>
          </ul></div>
          <div class="ba-arrow">→</div>
          <div class="ba-col after"><h4>После</h4><ul>
            <li><span>Конверсия сайта</span><b>6,2%</b></li>
            <li><span>Заявок / мес.</span><b>64</b></li>
            <li><span>Стоимость заявки</span><b>1 620 ₽</b></li>
          </ul></div>
        </div>
        <div class="case-delta">
          <span class="delta-pill">+814% <small>заявок</small></span>
          <span class="delta-pill">−58% <small>цена заявки</small></span>
          <span class="delta-pill">×6,8 <small>конверсия</small></span>
        </div>
      </div>
      <div class="ph ph-dark case-shot"><img src="https://static.tildacdn.com/tild6537-3365-4961-a163-333336663265/kors_mebel_1200.jpg" alt="Главный экран сайта магазина мебели: каталог и новые коллекции" loading="lazy"></div>
    </div>
    <div class="case reveal">
      <div>
        <span class="case-tag">Сеть автосервисов · услуги</span>
        <h3>С 12 до 87 записей в месяц на том же рекламном бюджете</h3>
        <p class="case-task"><b>Задача:</b> сайт-визитка не объяснял, почему ехать именно сюда, а не к гаражному мастеру. Переупаковали смыслы и структуру.</p>
        <div class="ba">
          <div class="ba-col"><h4>До</h4><ul>
            <li><span>Конверсия сайта</span><b>1,4%</b></li>
            <li><span>Заявок / мес.</span><b>12</b></li>
            <li><span>Записей на сервис</span><b>8</b></li>
          </ul></div>
          <div class="ba-arrow">→</div>
          <div class="ba-col after"><h4>После</h4><ul>
            <li><span>Конверсия сайта</span><b>7,8%</b></li>
            <li><span>Заявок / мес.</span><b>87</b></li>
            <li><span>Записей на сервис</span><b>61</b></li>
          </ul></div>
        </div>
        <div class="case-delta">
          <span class="delta-pill">+625% <small>заявок</small></span>
          <span class="delta-pill">×5,6 <small>конверсия</small></span>
          <span class="delta-pill">×7,6 <small>записей</small></span>
        </div>
      </div>
      <div class="ph ph-dark case-shot"><img src="https://static.tildacdn.com/tild3439-6266-4338-b432-643431613562/kors_auto_1200.jpg" alt="Главный экран сайта сети автосервисов: запись на сервис и услуги" loading="lazy"></div>
    </div>
    <div class="case reveal">
      <div>
        <span class="case-tag">Оборудование · b2b</span>
        <h3>×4 к лидам при среднем чеке сделки от 2 млн ₽</h3>
        <p class="case-task"><b>Задача:</b> каталог не продавал — заявки уходили конкурентам с более понятной упаковкой оффера.</p>
        <div class="ba">
          <div class="ba-col"><h4>До</h4><ul>
            <li><span>Лидов / мес.</span><b>6</b></li>
            <li><span>Конверсия сайта</span><b>0,8%</b></li>
            <li><span>Бюджет на рекламу</span><b>240 т.₽</b></li>
          </ul></div>
          <div class="ba-arrow">→</div>
          <div class="ba-col after"><h4>После</h4><ul>
            <li><span>Лидов / мес.</span><b>25</b></li>
            <li><span>Конверсия сайта</span><b>4,7%</b></li>
            <li><span>Бюджет на рекламу</span><b>240 т.₽</b></li>
          </ul></div>
        </div>
        <div class="case-delta">
          <span class="delta-pill">×4,2 <small>лидов</small></span>
          <span class="delta-pill">×5,9 <small>конверсия</small></span>
          <span class="delta-pill" style="background:#3e4248">0 ₽ <small>рост бюджета</small></span>
        </div>
      </div>
      <div class="ph ph-dark case-shot"><img src="https://static.tildacdn.com/tild6530-3563-4332-a666-613035373438/kors_oborud_1200.jpg" alt="Главный экран сайта производителя промышленного оборудования: каталог станков" loading="lazy"></div>
    </div>
    
  </div>
  </section>
</div>rec3238380801 · /sites · ключ kors_bak_3238380801 · 2226 симв.
<style>
/* ---------- Услуги ---------- */
.serv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:44px}
.serv{background:var(--card);border-radius:var(--r-md);padding:34px;display:flex;flex-direction:column;box-shadow:0 0 0 1px var(--line);transition:transform .2s}
.serv:hover{transform:translateY(-4px);box-shadow:0 0 0 1px var(--accent)}
.serv h3{margin-bottom:12px;font-size:23px}
.serv p{color:var(--muted);font-size:15px;flex:1}
.serv .serv-link{margin-top:22px;font-weight:700;font-size:15px;color:var(--accent-txt)}
.chips{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.chips a{background:var(--card);border-radius:999px;padding:15px 24px;font-size:15px;font-weight:500;box-shadow:0 0 0 1px var(--line);transition:transform .15s,color .15s}
.chips a:hover{transform:translateY(-2px);color:var(--accent-txt)}
</style>
<section id="services">
  <div class="container">
    <div class="eyebrow reveal">Услуги</div>
    <h2 class="reveal">Что делаем</h2>
    <div class="serv-grid">
      <div class="serv reveal">
        <h3>Продающий лендинг</h3>
        <p>Одностраничник под одну услугу или продукт. Заточен под Яндекс Директ, соцсети и SEO-трафик: офер, структура, формы захвата.</p>
        <a class="serv-link" href="#quiz">Рассчитать стоимость →</a>
      </div>
      <div class="serv reveal">
        <h3>Многостраничный сайт</h3>
        <p>Для компаний с несколькими направлениями: страницы под каждую услугу, каталог, навигация, база под SEO-продвижение.</p>
        <a class="serv-link" href="#quiz">Рассчитать стоимость →</a>
      </div>
      <div class="serv reveal">
        <h3>Редизайн и докрутка</h3>
        <p>Если сайт уже есть, но молчит: аудит, новая структура, усиление офера и текстов, обновление дизайна — без пересборки с нуля.</p>
        <a class="serv-link" href="#quiz">Получить аудит →</a>
      </div>
    </div>
    <div class="chips reveal">
      <a href="#quiz">Сделать сайт с нуля</a>
      <a href="#quiz">Сайт к выставке</a>
      <a href="#quiz">Протестировать нишу</a>
      <a href="#quiz">Написать тексты для сайта</a>
      <a href="#quiz">Обновить старый сайт</a>
      <a href="#quiz">Запустить рекламу</a>
    </div>
  </div>
</section>rec3238523101 · /sites · ключ kors_bak_3238523101 · 7701 симв.
<style>
/* ---------- Процесс ---------- */
.step{background:var(--card);border-radius:var(--r-md);padding:36px;margin-top:18px;display:grid;grid-template-columns:96px 1fr .9fr;gap:32px;align-items:start;box-shadow:0 0 0 1px var(--line)}
.step-num{font-weight:700;font-size:54px;line-height:1;color:var(--accent-txt);letter-spacing:-.04em}
.step h3{font-size:clamp(20px,2vw,26px);margin-bottom:12px}
.step p{color:var(--muted);font-size:15.5px}
.step .step-res{margin-top:16px;font-size:14.5px;color:var(--ink)}
.step .step-res b{color:var(--accent-txt);font-weight:700}
.step > div:last-child:not(.step-media){grid-column:2 / -1}
/* Слоты step-media вернули 30.08.2026: во всех шести шагах есть иллюстрация. */
.step-media{align-self:start}
.step-shot{display:block;width:100%;height:auto;border-radius:14px;box-shadow:0 0 0 1px var(--line);background:#0f0f11}
.vs{display:grid;grid-template-columns:1fr 1fr;gap:12px;min-height:190px}
.vs-col{border-radius:20px;padding:22px;background:#0c0c0e}
.vs-col.win{background:rgba(109,93,251,.14);border:1px solid rgba(109,93,251,.4);color:#fff}
.vs-col h4{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin-bottom:12px;color:var(--muted)}
.vs-col.win h4{color:#a99cff}
.vs-col li{list-style:none;font-size:13.5px;color:var(--muted);padding:5px 0;line-height:1.45}
.vs-col.win li{color:#e8e9ea}
</style>
<section id="process" style="padding-top:0">
  <div class="container">
    <div class="eyebrow reveal">Процесс</div>
    <h2 class="reveal">6 шагов от знакомства до потока заявок</h2>
    <p class="sub reveal">Ваше участие за весь проект — 2–4 часа: ответить на вопросы и принять этапы. Остальное делаем сами.</p>
    <div style="margin-top:44px">
      <div class="step reveal">
        <div class="step-num">01</div>
        <div>
          <h3>Погружение в бизнес</h3>
          <p>Начинаем не с «какие цвета нравятся», а с глубинного интервью на 2 часа: продукт, сделки, клиенты, цифры, сильные и слабые места.</p>
          <p class="step-res"><b>Итог:</b> понимаем, за что вам платят клиенты — и что покажем на сайте.</p>
        </div>
        <div class="step-media vs">
          <div class="vs-col">
            <h4>Обычный бриф</h4>
            <ul><li>— Какие цвета нравятся?</li><li>— Пришлёте примеры сайтов?</li><li>— Текст и ТЗ есть?</li></ul>
          </div>
          <div class="vs-col win">
            <h4>Интервью KORS</h4>
            <ul><li>— 100+ вопросов о бизнесе</li><li>— Разбор реальных сделок</li><li>— Упор на маркетинг</li></ul>
          </div>
        </div>
      </div>
      <div class="step reveal">
        <div class="step-num">02</div>
        <div>
          <h3>Анализ аудитории и конкурентов</h3>
          <p>Разбираем 8–10 конкурентов по ключевым критериям. Сегментируем аудиторию, выписываем страхи, желания и возражения по отзывам, форумам и картам.</p>
          <p class="step-res"><b>Итог:</b> документ со смыслами, на котором строится весь сайт.</p>
        </div>
        <div class="step-media"><img class="step-shot" src="https://static.tildacdn.com/tild3838-3862-4163-b863-643363666532/proc-analiz.jpg" alt="Таблица анализа конкурентов: участники рынка построчно, офферы, цены и выводы по каждому" loading="lazy"></div>
      </div>
      <div class="step reveal">
        <div class="step-num">03</div>
        <div>
          <h3>Структура и текст</h3>
          <p>Собираем прототип по блокам и пишем продающий текст: офер, заголовки, призывы, лид-магниты. Записываем видеопояснение логики каждого блока.</p>
          <p class="step-res"><b>Итог:</b> прототип, готовый к передаче в дизайн.</p>
        </div>
        <div class="step-media"><img class="step-shot" src="https://static.tildacdn.com/tild3433-3133-4536-a334-303935323536/proc-struktura.jpg" alt="Прототип лендинга в рабочем интерфейсе: блоки страницы разложены по экранам" loading="lazy"></div>
      </div>
      <div class="step reveal">
        <div class="step-num">04</div>
        <div>
          <h3>Дизайн</h3>
          <p>Готовим 2 варианта концепции на выбор: референсы, визуальный вектор, презентация решений — объясняем, что и почему работает на заявки, а не просто «красиво».</p>
          <p class="step-res"><b>Итог:</b> макет, который не стыдно показать партнёрам и инвесторам.</p>
        </div>
        <div class="step-media"><img class="step-shot" src="https://static.tildacdn.com/tild3732-3732-4230-a630-363761373135/proc-dizayn.jpg" alt="Две концепции первого экрана для одного проекта, подготовленные на выбор" loading="lazy"></div>
      </div>
      <div class="step reveal">
        <div class="step-num">05</div>
        <div>
          <h3>Сборка и запуск</h3>
          <p>Верстаем, адаптируем под мобильные, подключаем домен, формы, CRM и уведомления. Настраиваем Яндекс Метрику, Вебмастер и базовое SEO.</p>
          <p class="step-res"><b>Итог:</b> живой сайт, который принимает заявки без вашего участия.</p>
        </div>
        <div class="step-media"><img class="step-shot" src="https://static.tildacdn.com/tild6333-3433-4939-a637-366161323538/proc-zapusk.jpg" alt="Готовый сайт в окне браузера: первый экран и блоки страницы при прокрутке" loading="lazy"></div>
      </div>
      <div class="step reveal">
        <div class="step-num">06</div>
        <div>
          <h3>Трафик</h3>
          <p>Запускаем Яндекс Директ на собранные смыслы: объявления пишутся из той же карты, что и сайт. Ведём кампании и докручиваем по цифрам, а не по ощущениям.</p>
          <p class="step-res"><b>Итог:</b> управляемый поток целевых заявок — прогнозируемый и масштабируемый.</p>
        </div>
        <div class="step-media"><img class="step-shot" src="https://static.tildacdn.com/tild3237-6530-4234-b331-666230356664/grt-ads.jpg" alt="Список кампаний в рекламном кабинете Яндекс Директа: статусы, площадки и даты запуска; показатели и названия кампаний скрыты" loading="lazy"></div>
      </div>
    </div>
  </div>
</section>
<script>
/* Сторож картинок.
   Иногда запрос картинки к CDN зависает: ответа нет, ошибки нет, элемент img остаётся
   пустым навсегда, а слот с заданными пропорциями держит пустое место во весь экран.
   Переназначить src такому элементу бесполезно - он уже мёртвый; помогает только
   НОВЫЙ элемент img. Поэтому раз в 10 с (до трёх попыток) создаём свежую картинку
   и подменяем ею зависшую, когда та загрузится.
   Слот прячем только если сервер явно ответил ошибкой: медленную картинку прятать
   нельзя, она может прийти позже. Пока вкладка в фоне, отсчёт не ведём - там браузер
   тормозит загрузку сам, и это не повод считать картинку потерянной. */
(function(){
  function ready(im){ return im && im.complete && im.naturalWidth > 0; }
  function watch(box){
    var first = box.querySelector("img");
    if(!first) return;
    first.addEventListener("error", function(){ box.style.display = "none"; });
    var tries = 0;
    function tick(){
      var cur = box.querySelector("img");
      if(ready(cur) || tries >= 3) return;
      if(document.hidden){ setTimeout(tick, 5000); return; }
      tries++;
      var url = ((cur && cur.getAttribute("src")) || "").split("?")[0];
      if(url){
        var fresh = new Image();
        fresh.alt = (cur && cur.alt) || "";
        fresh.onload = function(){ if(cur && cur.parentNode === box && !ready(cur)) box.replaceChild(fresh, cur); };
        fresh.onerror = function(){ box.style.display = "none"; };
        fresh.src = url + "?kr=" + Date.now();
      }
      setTimeout(tick, 10000);
    }
    setTimeout(tick, 5000);
  }
  var slots = document.querySelectorAll(".kcp [data-img], .step-media");
  for(var i = 0; i < slots.length; i++){ watch(slots[i]); }
})();
</script>
rec3238696801 · /sites · ключ kors_bak_3238696801 · 8304 симв.
<style>
/* ---------- Квиз ---------- */
.quiz-wrap{background:var(--card);border-radius:var(--r-lg);padding:46px;margin-top:44px;display:grid;grid-template-columns:260px 1fr;gap:44px;box-shadow:0 0 0 1px var(--line)}
.quiz-persona{text-align:center}
.quiz-avatar{display:block;width:128px;height:128px;border-radius:50%;object-fit:cover;object-position:center 22%;margin:0 auto 16px;border:1px solid var(--line)}
.quiz-persona b{display:block;font-size:17px;letter-spacing:-.02em}
.quiz-persona span{font-size:13.5px;color:var(--muted)}
.quiz-hint{margin-top:18px;background:var(--bg);border-radius:18px;padding:16px;font-size:13.5px;color:var(--muted);text-align:left;line-height:1.5}
.quiz-progress{height:6px;background:#24242a;border-radius:99px;margin-bottom:26px;overflow:hidden}
.quiz-bar{height:100%;width:16%;background:var(--accent);border-radius:99px;transition:width .3s ease}
.quiz-step-label{font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gray);margin-bottom:12px}
.quiz-q{font-weight:600;font-size:clamp(20px,2.1vw,26px);margin-bottom:24px;line-height:1.2;letter-spacing:-.025em}
.quiz-opts{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.quiz-opt{border:1.5px solid transparent;border-radius:18px;padding:18px 20px;background:#1b1b1f;font-size:15px;font-weight:500;color:var(--ink);text-align:left;transition:border-color .15s,background .15s,transform .15s}
.quiz-opt:hover{border-color:var(--accent);transform:translateY(-1px)}
.quiz-opt.sel{border-color:var(--accent);background:var(--peach)}
.quiz-nav{display:flex;gap:12px;margin-top:28px;align-items:center}
.quiz-back{background:none;border:none;color:var(--muted);font-weight:600;font-size:14.5px;padding:10px 6px}
.quiz-back:hover{color:var(--ink)}
.quiz-final .fields{display:grid;gap:12px;margin-bottom:16px}
.kmailnote{margin-top:14px;text-align:center;font:400 14px/1.5 Manrope,Arial,sans-serif;color:var(--muted)}
.kmailnote a{color:#A99CFF;text-decoration:underline;text-underline-offset:3px}
.kmailnote a:hover{color:var(--ink)}
</style>
<section id="quiz" style="padding-top:0">
  <div class="container">
    <div class="eyebrow reveal">Расчёт за 40 секунд</div>
    <h2 class="reveal">Соберём план запуска под вашу нишу за 6 ответов</h2>
    <p class="sub reveal">Структура сайта, офер, канал трафика и вилка стоимости — пришлём в удобный мессенджер.</p>
    <div class="quiz-wrap reveal">
      <div class="quiz-persona">
        <img class="quiz-avatar" src="https://static.tildacdn.com/tild3034-3837-4330-b664-346332656439/dmitriy-kors-1000.jpg" alt="Дмитрий Корс, сооснователь студии KORS" loading="lazy">
        <b>Дмитрий Корс</b>
        <span>Сооснователь KORS, отвечает за проект</span>
        <div class="quiz-hint" id="quizHint">Каждый ответ сужает вилку стоимости — в конце пришлём точный расчёт и 2–3 примера решений под вашу задачу.</div>
      </div>
      <div class="quiz-body" id="quizBody">
        <div class="quiz-progress"><div class="quiz-bar" id="quizBar"></div></div>
        <div class="quiz-step-label" id="quizLabel">Шаг 1 из 6</div>
        <div id="quizContent"></div>
      </div>
    </div>
  </div>
</section>
<script>
var quizData=[
  {q:'Для какого бизнеса нужен сайт?',hint:'От ниши зависит и структура, и канал трафика — предложим решение под ваш рынок, а не шаблон.',opts:['Производство','Услуги (b2b / b2c)','Товары, интернет-магазин','Эксперт, личный бренд']},
  {q:'Какая главная задача?',hint:'Кому-то нужен поток заявок, кому-то — доверие и имидж. От цели зависят акценты на странице.',opts:['Постоянный поток заявок','Имидж и доверие к компании','Запуск нового продукта','Всё сразу — и продажи, и имидж']},
  {q:'Сайт с нуля или уже есть?',hint:'Если сайт есть, но молчит, — разберём, почему, и посчитаем, что дешевле: докрутить или пересобрать.',opts:['С нуля — нужно всё','Есть, но не приносит заявок','Нужен редизайн и рост конверсии']},
  {q:'Откуда пойдёт трафик?',hint:'Под рекламу, SEO и соцсети сайты строятся по-разному. Если не уверены — подскажем.',opts:['Реклама в Яндекс Директе','SEO, органический трафик','Свои соцсети','Пока не знаю — подскажите']},
  {q:'Когда планируете запуск?',hint:'Если сроки жмут — уплотним график команды без потери качества.',opts:['Срочно, за 2–3 недели','В течение месяца','Через 1–2 месяца','Пока присматриваюсь']}
];
var quizState={step:0,answers:[]};
var qc=document.getElementById('quizContent'),qBar=document.getElementById('quizBar'),qLabel=document.getElementById('quizLabel'),qHint=document.getElementById('quizHint');
var TOTAL=quizData.length+1;
function renderQuiz(){
  var s=quizState.step;
  qBar.style.width=((s+1)/TOTAL*100)+'%';
  if(s<quizData.length){
    qLabel.textContent='Шаг '+(s+1)+' из '+TOTAL;
    qHint.textContent=quizData[s].hint;
    var html='<div class="quiz-q">'+quizData[s].q+'</div><div class="quiz-opts">';
    quizData[s].opts.forEach(function(o,i){
      var sel=quizState.answers[s]===i?' sel':'';
      html+='<button type="button" class="quiz-opt'+sel+'" data-i="'+i+'">'+o+'</button>';
    });
    html+='</div><div class="quiz-nav">'+(s>0?'<button type="button" class="quiz-back" id="qBack">← Назад</button>':'')+'</div>';
    qc.innerHTML=html;
    qc.querySelectorAll('.quiz-opt').forEach(function(b){
      b.addEventListener('click',function(){
        quizState.answers[s]=+b.dataset.i;
        quizState.step++;renderQuiz();
        qc.closest('.quiz-wrap').scrollIntoView({behavior:'smooth',block:'nearest'});
      });
    });
    var back=document.getElementById('qBack');
    if(back)back.addEventListener('click',function(){quizState.step--;renderQuiz()});
  }else{
    qLabel.textContent='Последний шаг';
    qHint.textContent='Пришлём расчёт и 2–3 примера решений под вашу задачу в течение пары часов в рабочее время.';
    qc.innerHTML=
      '<div class="quiz-q">Куда прислать план запуска и расчёт?</div>'+
      '<div class="quiz-final">'+
        '<div class="fields">'+
          '<div class="field"><input type="text" id="qName" placeholder="Ваше имя"></div>'+
          '<div class="field"><input type="tel" id="qPhone" placeholder="Телефон или @ник в Telegram"></div>'+
        '</div>'+
        '<div class="msgr-row" id="qMsgr">'+
          '<button type="button" class="msgr sel">Телефон</button>'+
          '<button type="button" class="msgr">Telegram</button>'+
          '<button type="button" class="msgr">WhatsApp</button>'+
          '<button type="button" class="msgr">MAX</button>'+
        '</div>'+
        '<label class="check"><input type="checkbox" id="qAgree" checked> Я принимаю условия <a href="https://korsprod.ru/policy" target="_blank" rel="noopener">политики конфиденциальности</a> и даю согласие на обработку персональных данных</label>'+
        '<div class="quiz-nav" style="margin-top:0">'+
          '<button type="button" class="quiz-back" id="qBack">← Назад</button>'+
          '<button type="button" class="btn btn-primary" id="qSubmit" style="flex:1">Получить план запуска</button>'+
        '</div>'+
        '<div class="kmailnote">Не любите формы - напишите на <a href="mailto:info@korsprod.ru">info@korsprod.ru</a></div>'+
      '</div>';
    document.getElementById('qMsgr').querySelectorAll('.msgr').forEach(function(b){
      b.addEventListener('click',function(){
        document.getElementById('qMsgr').querySelectorAll('.msgr').forEach(function(x){x.classList.remove('sel')});
        b.classList.add('sel');
      });
    });
    document.getElementById('qBack').addEventListener('click',function(){quizState.step--;renderQuiz()});
    document.getElementById('qSubmit').addEventListener('click',function(){
      var n=document.getElementById('qName'),p=document.getElementById('qPhone'),a=document.getElementById('qAgree');
      if(!n.value.trim()){n.focus();return}
      if(p.value.trim().length<5){p.focus();return}
      if(!a.checked){a.focus();return}
      qBar.style.width='100%';
      qLabel.textContent='Готово';
      qHint.textContent='Спасибо! Обычно отвечаем в течение 10 минут в рабочее время.';
      qc.innerHTML='<div class="quiz-done"><div class="big">🔥</div><h3>Заявка принята</h3><p>Свяжемся в выбранном мессенджере, зададим пару уточняющих вопросов и пришлём план запуска с вилкой стоимости.</p></div>';
    });
  }
}
renderQuiz();
</script>rec3239021501 · /sites · Отзывы · ключ kors_bak_3239021501_20260904 · 2474 симв.
<style>
/* ---------- Отзывы ---------- */
.rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:44px}
.rev{background:var(--card);border-radius:var(--r-md);padding:32px;display:flex;flex-direction:column;box-shadow:0 0 0 1px var(--line)}
.rev .rev-niche{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-txt);margin-bottom:16px}
.rev p{font-size:15px;flex:1;color:#e8e9ea}
.rev .rev-person{display:flex;gap:14px;align-items:center;margin-top:22px}
.rev .rev-person .ph{min-height:0;width:54px;height:54px;border-radius:50%;padding:0;flex-shrink:0}
.rev .rev-person .ph .ph-ico{font-size:18px}
.rev .rev-person b{display:block;font-size:15px}
.rev .rev-person span{font-size:13px;color:var(--muted)}
</style>
<section style="padding-top:0">
  <div class="container">
    <div class="eyebrow reveal">Отзывы</div>
    <h2 class="reveal">Что говорят после запуска</h2>
    <div class="rev-grid">
      <div class="rev reveal">
        <div class="rev-niche">Производство металлоконструкций</div>
        <p>«Раньше весь заказ шёл через знакомых. Сейчас с сайта стабильно 20+ обращений в месяц — два контракта закрыли уже в первый месяц после запуска».</p>
        <div class="rev-person">
          <div class="ph"><div class="ph-ico">📷</div></div>
          <div><b>Имя Фамилия</b><span>Владелец компании</span></div>
        </div>
      </div>
      <div class="rev reveal">
        <div class="rev-niche">Стоматологическая клиника</div>
        <p>«Переживала, что все сайты клиник одинаковые. Сделали так, что пациенты записываются ещё до звонка администратора — и сразу понимают, чем мы отличаемся».</p>
        <div class="rev-person">
          <div class="ph"><div class="ph-ico">📷</div></div>
          <div><b>Имя Фамилия</b><span>Управляющая клиникой</span></div>
        </div>
      </div>
      <div class="rev reveal">
        <div class="rev-niche">Монтаж инженерных систем</div>
        <p>«Понравилось, что не пришлось писать ТЗ — вопросы задавали сами и попали в точку с первого макета. Участие с моей стороны — часа три за весь проект».</p>
        <div class="rev-person">
          <div class="ph"><div class="ph-ico">📷</div></div>
          <div><b>Имя Фамилия</b><span>Руководитель компании</span></div>
        </div>
      </div>
    </div>
    <div class="draft-note reveal">✏️ Тексты отзывов черновые — заменим на реальные с фото и ссылками на людей</div>
  </div>
</section>HEAD-код проекта · ключ kors_bak_headcode · 3422 симв.
<meta name="google-site-verification" content="lgYL_cDWd49o6_oQNIrQ4GiXihrni2KqwHTy8riRg5E" />
<script src="https://cdn.postnikovmd.com/tilda@1.4/mods.min.js"></script>

<!-- KORS PRELOADER -->
<style> @import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@800&display=swap'); html{background:#0C0C0E !important;} html.kload-on #allrecords,html.kload-on .t-records,html.kload-on .t-body{visibility:hidden !important;} html.kload-done #allrecords,html.kload-done .t-records,html.kload-done .t-body{visibility:visible !important;} html.kload-on .kload,html.kload-on .kload *{visibility:visible !important;} .kload{position:fixed;inset:0;z-index:99999;background:#0C0C0E;visibility:visible;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;font-family:'Unbounded',Arial,sans-serif;transition:opacity .55s ease,visibility .55s ease;} .kload::before{content:"";position:absolute;inset:0;background:radial-gradient(600px 420px at 50% 42%,rgba(109,93,251,.16),transparent 62%);pointer-events:none;} .kload__rec{position:relative;display:flex;align-items:center;gap:9px;font-size:12px;letter-spacing:.18em;color:#9A9A9A;} .kload__rec i{width:10px;height:10px;border-radius:50%;background:#FF3B30;box-shadow:0 0 12px rgba(255,59,48,.8);animation:kBlink 1s steps(1) infinite;} .kload__logo{position:relative;font-weight:800;font-size:clamp(54px,11vw,120px);letter-spacing:-.02em;color:#F5F3EF;opacity:1;text-shadow:0 4px 40px rgba(109,93,251,.4);animation:kPulse 1.6s ease-in-out infinite;} .kload__bar{position:relative;width:220px;max-width:60vw;height:2px;background:#26262b;border-radius:2px;overflow:hidden;} .kload__bar::before{content:"";position:absolute;left:0;top:0;height:100%;width:32%;background:linear-gradient(90deg,#6D5DFB,#8A7BFF);opacity:.55;} .kload__bar::after{content:"";position:absolute;left:0;top:0;height:100%;width:35%;background:linear-gradient(90deg,transparent,#6D5DFB,#8A7BFF,transparent);box-shadow:0 0 10px rgba(109,93,251,.5);animation:kSlide 1.1s ease-in-out infinite;} .kload--out{opacity:0;visibility:hidden;pointer-events:none;} @keyframes kPulse{0%,100%{text-shadow:0 4px 40px rgba(109,93,251,.35);}50%{text-shadow:0 4px 60px rgba(109,93,251,.75);}} @keyframes kSlide{0%{transform:translateX(-120%)}100%{transform:translateX(340%)}}  @keyframes kBlink{50%{opacity:.25}} </style>
<script> (function(){ document.documentElement.classList.add('kload-on');   var HTML='<div class="kload__rec"><i></i>REC \u00b7 KORS</div><div class="kload__logo">KORS</div><div class="kload__bar"></div>';   var d=document.createElement('div'); d.className='kload'; d.setAttribute('aria-hidden','true'); d.innerHTML=HTML;   function mount(){ if(document.body){ document.body.insertBefore(d, document.body.firstChild); } }   if(document.body){ mount(); } else { document.addEventListener('DOMContentLoaded', mount); }   var start=Date.now(), gone=false;   function hide(){ if(gone) return; gone=true; var wait=Math.max(0, 1500-(Date.now()-start)); setTimeout(function(){ document.documentElement.classList.remove('kload-on'); document.documentElement.classList.add('kload-done'); d.classList.add('kload--out'); setTimeout(function(){ if(d.parentNode) d.parentNode.removeChild(d); }, 650); }, wait); }   if(document.readyState==='complete'){ hide(); } else { window.addEventListener('load', hide); }   setTimeout(hide, 5000); })(); </script>
<!-- /KORS PRELOADER -->

Бесплатный аудит материалов

Пришлите ссылку или файл. Созвонимся на 10-15 минут и пришлём запись с рекомендациями.

Не передаём файлы третьим лицам. Если у вас NDA, подпишем до отправки.
Файл больше лимита пришлите на info@korsprod.ru или в Telegram @korsprodsale.
Нажимая кнопку, я соглашаюсь с политикой конфиденциальности и даю согласие на обработку персональных данных.

KORS · СТУДИЯ ПОЛНОГО ЦИКЛА

Спасибо! Заявка отправлена

Мы получили вашу заявку и уже её изучаем. Свяжемся с вами в ближайшее время, чтобы обсудить задачу и предложить формат работы. Обычно отвечаем в течение рабочего дня.

Вернуться на сайт Написать в Telegram

+7 915 867-79-96 info@korsprod.ru WhatsApp MAX

Автоматический возврат на главную через 15 сек.