/* Milodia — лендинг. Токены сверху, компоненты ниже. Ничего не красим мимо токенов. */

/* Сайт всегда светлый. Тёмной темы нет намеренно: подарочный оффер должен
   читаться как тёплый подарок, а не как студия. Две тёмные полосы ниже
   (реакции и финальный CTA) — это приём вёрстки, а не тема. */

:root{
  color-scheme:light;

  --bg:#F9FBFE;
  --surface:#FFFFFF;
  --ink:#0E1A33;
  --ink-soft:#545D6B;
  --ink-faint:#616A78;
  --rule:#DCE6F1;

  --accent:#1E3A6E;
  --accent-hover:#142B55;
  --on-accent:#FFFFFF;
  --accent-soft:#CFE8FC;

  --tint:#DFF1FF;

  --band:#0B1733;
  --on-band:#EEF4FB;
  --on-band-soft:#A9B9D0;
  --accent-on-band:#E9C77E;
  --accent-on-band-hover:#F4DCA3;

  --shadow:0 1px 2px rgba(15,28,58,.05), 0 12px 32px -12px rgba(15,28,58,.18);

  /* Пара: рукописный акцент + тяжёлый гротеск. Текст — нейтральный Onest. */
  --script:"Great Vibes","Snell Roundhand","Segoe Script",cursive;
  --display:"Montserrat","Helvetica Neue",Arial,sans-serif;
  --body:"Onest","Helvetica Neue",-apple-system,BlinkMacSystemFont,Arial,sans-serif;

  --wrap:1120px;
  --gutter:clamp(20px,5vw,40px);
  --r:14px;
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
[id]{scroll-margin-top:84px}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--body);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

img,video{max-width:100%;display:block}
a{color:inherit}

.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gutter)}
.band{padding-block:clamp(56px,9vw,104px)}
.band--tint{background:var(--tint)}
.band--dark{background:var(--band);color:var(--on-band)}

/* ---------- типографика ---------- */
h1,h2,h3{font-family:var(--display);font-weight:800;letter-spacing:-.02em;text-wrap:balance;margin:0}
h1{font-size:clamp(38px,6.2vw,68px);line-height:1.04}
h2{font-size:clamp(27px,4vw,42px);line-height:1.12}
h3{font-size:clamp(19px,2.1vw,23px);line-height:1.25}
p{margin:0}
.eyebrow{
  font-family:var(--body);font-size:12px;font-weight:600;
  letter-spacing:.15em;text-transform:uppercase;color:var(--accent);
}
.lede{font-size:clamp(17px,1.9vw,20px);line-height:1.55;color:var(--ink-soft);max-width:60ch}
.band--dark .lede{color:var(--on-band-soft)}
/* Заголовок секции и подпись под ним - по центру. Внутренности блоков
   (карточки, шаги, ответы FAQ) остаются по левому краю: центрированный
   абзац в три строки читается хуже левого. */
.section-head{display:flex;flex-direction:column;gap:14px;
  margin:0 auto clamp(32px,4vw,52px);max-width:62ch;
  text-align:center;align-items:center}

/* ---------- кнопки ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--body);font-size:16px;font-weight:600;line-height:1;
  padding:17px 30px;border-radius:100px;border:1px solid transparent;
  text-decoration:none;cursor:pointer;
  transition:background-color .18s ease,color .18s ease,transform .18s ease;
}
.btn--primary{background:var(--accent);color:var(--on-accent)}
.btn--primary:hover{background:var(--accent-hover);transform:translateY(-1px)}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--rule)}
.btn--ghost:hover{border-color:var(--accent);color:var(--accent)}
.band--dark .btn--ghost{color:var(--on-band);border-color:rgba(255,255,255,.22)}
.band--dark .btn--ghost:hover{border-color:var(--accent-on-band);color:var(--accent-on-band)}
.band--dark .btn--primary,.total .btn--primary{background:var(--accent-on-band);color:var(--band);box-shadow:0 3px 0 0 rgba(0,0,0,.34)}
.band--dark .btn--primary:hover,.total .btn--primary:hover{box-shadow:0 5px 0 0 rgba(0,0,0,.34)}
.band--dark .btn--primary:active,.total .btn--primary:active{box-shadow:0 0 0 0 rgba(0,0,0,.34)}
.band--dark .btn--primary:hover,.total .btn--primary:hover{background:var(--accent-on-band-hover)}
.band--dark .eyebrow{color:var(--accent-on-band)}
.band--dark a:focus-visible,.band--dark button:focus-visible{outline-color:var(--accent-on-band)}
.btn--sm{padding:11px 20px;font-size:14px}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}

/* ---------- шапка ---------- */
.hdr{
  position:sticky;top:0;z-index:50;
  background:color-mix(in srgb,var(--tint) 92%,transparent);
  backdrop-filter:saturate(1.4) blur(12px);
  border-bottom:1px solid var(--rule);
}
.hdr__in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:28px;height:68px}
.logo{justify-self:start;font-family:var(--script);font-size:30px;font-weight:400;letter-spacing:.01em;text-decoration:none;color:var(--accent);line-height:1}
.hdr__nav{display:none;gap:26px;justify-self:center}
.hdr__nav a{font-size:15px;text-decoration:none;color:var(--ink-soft)}
.hdr__nav a:hover{color:var(--accent)}
.hdr__right{justify-self:end;display:flex;align-items:center;gap:14px}
.lang{display:flex;gap:2px;font-size:13px;font-weight:600}
.lang a{padding:6px 9px;border-radius:8px;text-decoration:none;color:var(--ink-faint)}
.lang a[aria-current="true"]{background:var(--accent-soft);color:var(--accent)}
@media (min-width:900px){ .hdr__nav{display:flex} }

/* ---------- герой ---------- */
.hero{padding-block:clamp(48px,7vw,90px) clamp(44px,6vw,76px)}
@media (min-width:1180px){ .hero{max-width:1260px} }
.hero__grid{display:grid;gap:clamp(32px,5vw,56px);align-items:center}
.hero__copy{display:flex;flex-direction:column;gap:22px;align-items:flex-start}
.hero__cta{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.hero__note{font-size:14px;color:var(--ink-faint)}
@media (min-width:900px){ .hero__grid{grid-template-columns:1fr 1fr} }
@media (min-width:1180px){ .hero__grid{grid-template-columns:.86fr 1.14fr} }

.frame{
  position:relative;aspect-ratio:16/10;border-radius:var(--r);overflow:hidden;
  background:var(--tint);border:1px solid var(--rule);box-shadow:var(--shadow);
  display:grid;place-items:center;
}
.frame--v{aspect-ratio:9/16}
.frame__ph{
  display:flex;flex-direction:column;align-items:center;gap:10px;
  color:var(--ink-faint);font-size:14px;text-align:center;padding:20px;
}
.frame__ph svg{opacity:.5}

/* ---------- доверие ---------- */
/* Тёплая подложка (решение Артура 28.08.2026). Была кремовой - того же
   цвета, что герой сверху и «Як це працює» снизу: три экрана подряд
   одним цветом, полоса тонула. Теперь она того же тёплого тона, что
   «Приклади» и «Приводи» ниже, и страница читается ритмом
   кремовый → тёплый → кремовый. */

/* ---------- сетки ---------- */
.grid-2{display:grid;gap:clamp(18px,2.4vw,26px)}
.grid-3{display:grid;gap:clamp(18px,2.4vw,26px)}
.grid-4{display:grid;gap:clamp(18px,2.4vw,26px)}
@media (min-width:700px){ .grid-2{grid-template-columns:repeat(2,1fr)} .grid-3{grid-template-columns:repeat(3,1fr)} .grid-4{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1000px){ .grid-4{grid-template-columns:repeat(4,1fr)} }

.step{display:flex;flex-direction:column;gap:10px}
/* Номер шага - крупная акцентная цифра, а не мелкая подпись.
   Она же метка порядка: четыре таких числа читаются как маршрут. */
.step__n{
  font-family:var(--display);font-size:clamp(32px,3.6vw,44px);font-weight:800;
  letter-spacing:-.03em;line-height:.95;
  color:var(--accent);border-top:2px solid var(--accent);padding-top:14px;
}
.step__d{font-size:15.5px;color:var(--ink-soft);line-height:1.55}

.card{
  background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);
  padding:26px;display:flex;flex-direction:column;gap:9px;
}
.card__d{font-size:15.5px;color:var(--ink-soft);line-height:1.55}

.react__cap{margin-top:12px;font-size:14px;color:var(--on-band-soft)}
.band--dark .frame{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12)}
.band--dark .frame__ph{color:var(--on-band-soft)}

/* ---------- цена: только тарифы, список «що входить» убран 27.08.2026 ---------- */
.incl{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.incl li{display:flex;gap:13px;align-items:flex-start;padding:13px 0;border-bottom:1px solid var(--rule);font-size:16px}
.incl li:first-child{border-top:1px solid var(--rule)}
.incl svg{flex:0 0 19px;margin-top:3px;color:var(--accent)}

/* ---------- faq ---------- */
.faq{display:flex;flex-direction:column;max-width:74ch;margin-inline:auto}
.faq details{border-bottom:1px solid var(--rule)}
.faq details:first-child{border-top:1px solid var(--rule)}
.faq summary{
  list-style:none;cursor:pointer;padding:20px 40px 20px 0;position:relative;
  font-size:17.5px;font-weight:500;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:6px;top:50%;width:11px;height:11px;
  border-right:1.8px solid var(--accent);border-bottom:1.8px solid var(--accent);
  transform:translateY(-70%) rotate(45deg);transition:transform .2s ease;
}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq p{padding:0 0 22px;color:var(--ink-soft);font-size:16px;line-height:1.6;max-width:66ch}

/* ---------- финал ---------- */
.final{display:flex;flex-direction:column;align-items:center;text-align:center;gap:20px}
.final .lede{text-align:center}

/* ---------- подвал ---------- */
.ftr{border-top:1px solid var(--rule);padding-block:44px;background:var(--bg)}
.ftr__in{display:flex;flex-wrap:wrap;gap:26px;align-items:flex-start;justify-content:space-between}
.ftr__brand{display:flex;flex-direction:column;gap:6px}
.ftr__tag{font-size:14px;color:var(--ink-soft)}
.ftr__links{display:flex;flex-wrap:wrap;gap:20px;font-size:14px}
.ftr__links a{color:var(--ink-soft);text-decoration:none}
.ftr__links a:hover{color:var(--accent)}
.ftr__rights{width:100%;font-size:13px;color:var(--ink-faint);padding-top:22px;border-top:1px solid var(--rule)}

/* ---------- карточка-ссылка (поводы) ---------- */
.card--link{
  text-decoration:none;color:inherit;position:relative;
  transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease;
}
.card--link:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:var(--shadow)}
.card__go{
  margin-top:6px;font-size:20px;line-height:1;color:var(--accent);
  transition:transform .18s ease;
}
.card--link:hover .card__go{transform:translateX(4px)}

/* ---------- бриф ---------- */
.brief{padding-block:clamp(36px,5vw,64px) clamp(56px,7vw,90px);display:flex;flex-direction:column;gap:clamp(34px,4.5vw,56px)}
.brief__head{display:flex;flex-direction:column;gap:14px;max-width:62ch}
.brief__step{display:flex;flex-direction:column;gap:14px}
.brief__step h2{font-size:clamp(24px,3.2vw,34px)}

.picks{display:grid;gap:12px}
@media (min-width:640px){ .picks{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1000px){ .picks{grid-template-columns:repeat(3,1fr)} }
.picks--row{grid-template-columns:repeat(2,1fr)}
@media (min-width:640px){ .picks--row{grid-template-columns:repeat(2,minmax(0,240px))} }

.pick{position:relative;display:block;cursor:pointer}
.pick input{position:absolute;opacity:0;width:0;height:0}
.pick__box{
  display:flex;flex-direction:column;gap:7px;height:100%;
  background:var(--surface);border:1.5px solid var(--rule);border-radius:var(--r);
  padding:18px;transition:border-color .16s ease,background-color .16s ease;
}
.pick input:checked + .pick__box{border-color:var(--accent);background:var(--accent-soft)}
.pick input:focus-visible + .pick__box{outline:2px solid var(--accent);outline-offset:3px}
.pick__thumb{
  display:grid;place-items:center;aspect-ratio:16/10;border-radius:9px;
  background:var(--tint);color:var(--ink-faint);margin-bottom:3px;
}
.pick input:checked + .pick__box .pick__thumb{background:var(--surface);color:var(--accent)}
.pick__name{font-family:var(--display);font-size:18px;font-weight:700;line-height:1.2}
.pick__desc{font-size:14px;color:var(--ink-soft);line-height:1.45}
.pick--sm .pick__box{flex-direction:row;align-items:baseline;justify-content:space-between;gap:12px;padding:15px 18px}
.pick--sm .pick__name{font-size:18px}
.pick--sm .pick__desc{font-size:14px;font-weight:600;color:var(--accent)}

.opts{display:flex;flex-direction:column;gap:0}
.opt{display:flex;align-items:center;gap:13px;padding:14px 0;border-bottom:1px solid var(--rule);cursor:pointer}
.opt:first-child{border-top:1px solid var(--rule)}
.opt input{appearance:none;flex:0 0 21px;height:21px;border:1.5px solid var(--rule);border-radius:6px;background:var(--surface);cursor:pointer;position:relative}
.opt input:checked{border-color:var(--accent);background:var(--accent)}
.opt input:checked::after{content:"";position:absolute;left:6.5px;top:3px;width:5px;height:10px;border-right:2px solid var(--on-accent);border-bottom:2px solid var(--on-accent);transform:rotate(42deg)}
.opt input:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.opt__l{flex:1;font-size:16px}
.opt__p{font-family:var(--body);font-weight:600;font-size:15px;color:var(--accent);white-space:nowrap}
/* Счётчик героев: «минус - число - плюс». В стрелки нативного number на
   телефоне не попасть, а поле мельче 16px заставляло Safari зумить экран
   при фокусе - отсюда и кнопки, и размер шрифта. */
.stepr{display:inline-flex;align-items:center;gap:3px;flex:0 0 auto}
.stepr__b{
  width:38px;height:38px;flex:0 0 38px;
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--body);font-size:19px;font-weight:600;line-height:1;
  color:var(--accent);background:var(--surface);
  border:1.5px solid var(--rule);border-radius:9px;cursor:pointer;
  transition:border-color .18s ease;
}
.stepr__b:hover{border-color:var(--accent)}
.stepr__b:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.opt__n{width:46px;padding:7px 4px;text-align:center;border:1.5px solid var(--rule);border-radius:8px;background:var(--surface);color:var(--ink);font-family:var(--body);font-size:16px}
.opt--in .stepr__b{opacity:.55;pointer-events:none}
/* На узком экране счётчик рядом с подписью сплющивал её в четыре строки.
   Уводим его на вторую строку, с отступом под текст: галочка и цена
   остаются наверху, счётчик - под ними. */
@media (max-width:620px){
  .opt--n{flex-wrap:wrap;row-gap:12px}
  .opt--n .opt__p{margin-left:auto}
  .opt--n .stepr{order:3;flex:1 1 100%;margin-left:34px}
}

/* Кнопки-варианты в брифе: на телефоне тыкнуть быстрее, чем печатать.
   Цель нажатия 44px по высоте - меньше пальцем не попасть. */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:4px}
.chip{
  font:inherit;font-size:15px;line-height:1.2;min-height:44px;padding:11px 16px;
  border:1.5px solid var(--rule);border-radius:100px;background:var(--surface);
  color:var(--ink);cursor:pointer;transition:border-color .15s ease,background .15s ease;
}
.chip:hover{border-color:var(--accent)}
.chip--on{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.chip:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.flds{display:flex;flex-direction:column;gap:16px}
@media (min-width:760px){ .flds{display:grid;grid-template-columns:repeat(2,1fr);gap:18px} }
.fld{display:flex;flex-direction:column;gap:6px}
.fld label{font-size:14px;font-weight:600;color:var(--ink)}
.fld textarea{
  font-family:var(--body);font-size:16px;line-height:1.5;color:var(--ink);
  background:var(--surface);border:1.5px solid var(--rule);border-radius:10px;
  padding:12px 14px;resize:vertical;min-height:64px;
}
.fld textarea::placeholder{color:var(--ink-faint)}
.fld textarea:focus{outline:none;border-color:var(--accent)}

.total{
  position:sticky;bottom:0;z-index:20;
  display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;
  background:var(--band);color:var(--on-band);
  border-radius:var(--r);padding:18px 22px;box-shadow:var(--shadow);
}
.total__l{font-size:14px;color:var(--on-band-soft)}
.total__v{font-family:var(--display);font-size:31px;font-weight:800;line-height:1;letter-spacing:-.02em;margin-left:auto}
.total__v small{font-size:15px;font-family:var(--body);color:var(--on-band-soft);margin-left:5px}
.brief__send{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.brief__send .hero__note{width:100%}

/* ---------- показ превращения: фото → герой ---------- */
/* Приём, который в нише объясняет продукт быстрее текста: слева настоящее фото,
   справа нарисованный по нему герой, между ними рисованная стрелка. */
.show{
  position:relative;
  display:grid;grid-template-columns:1fr 1fr;align-items:center;
  gap:clamp(12px,4.6vw,78px);
}
.shot{position:relative;z-index:1;margin:0;display:flex;flex-direction:column;gap:9px}
.shot img{width:100%;border-radius:10px;aspect-ratio:4/5;object-fit:cover}
.shot__ph{
  display:grid;place-items:center;aspect-ratio:4/5;border-radius:10px;
  background:var(--tint);color:var(--ink-faint);
}
.shot__cap{font-size:13px;color:var(--ink-faint);text-align:center}
.shot--photo{
  background:var(--surface);border-radius:12px;padding:10px 10px 4px;
  box-shadow:var(--shadow);transform:rotate(-2.5deg);
}
.shot--photo .shot__cap{padding-bottom:6px}
.shot--toon{
  background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);
  padding:10px 10px 4px;box-shadow:var(--shadow);transform:rotate(1.5deg);
}
.shot--toon .shot__ph{background:var(--accent-soft);color:var(--accent)}
.show__arrow{
  position:absolute;left:50%;top:46%;z-index:3;
  width:clamp(52px,5.4vw,82px);height:auto;color:var(--accent);
  transform:translate(-50%,-50%);
}
.show__note{
  grid-column:1/-1;margin-top:14px;text-align:center;
  font-size:14px;color:var(--ink-faint);max-width:46ch;justify-self:center;
}
@media (max-width:560px){
  .show{grid-template-columns:1fr;justify-items:center;gap:66px}
  .shot{width:min(72%,250px)}
  .show__arrow{width:74px;top:50%;transform:translate(-50%,-50%) rotate(62deg)}
  .show__note{margin-top:14px}
}

/* ---------- катушка: монтаж вместо пары «фото → герой» ----------
   Пара показывает механику, но одну. Нарезка из готовых работ показывает
   разнообразие, а это и есть оффер: двух одинаковых фильмов не бывает.
   16:9 вместо вертикальной пары - на телефоне кадр занимает вдвое меньше
   высоты, и кнопки остаются на первом экране. */
.show--reel{display:block}
.reel{
  position:relative;aspect-ratio:16/9;overflow:hidden;
  border-radius:var(--r);border:1px solid var(--rule);
  background:var(--tint);box-shadow:var(--shadow);
}
.reel__m{width:100%;height:100%;object-fit:cover;display:block}
.reel__tag{
  position:absolute;left:12px;bottom:12px;z-index:2;
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 11px;border-radius:999px;
  background:rgba(11,23,51,.6);color:var(--on-band);
  font-size:11px;letter-spacing:.02em;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.reel__tag::before{
  content:"";width:5px;height:5px;border-radius:50%;
  background:var(--accent-on-band);flex:none;animation:reel-dot 1.8s ease-in-out infinite;
}
@keyframes reel-dot{0%,100%{opacity:1}50%{opacity:.28}}
.show--reel .show__note{margin-top:16px;max-width:52ch}
@media (prefers-reduced-motion:reduce){
  .reel__tag::before{animation:none}
}
/* на телефоне плашка перекрывала пол-кадра - ужимаем, но не прячем:
   она объясняет, что это реальные работы, а не рекламная картинка */
@media (max-width:560px){
  .reel__tag{left:9px;bottom:9px;padding:5px 10px;font-size:11px}
}

/* ---------- врезанная катушка: приём с сайта конкурента ----------
   Видео не лежит в карточке, а врезано в страницу: рамки нет, края
   растворены цветом фона. Кадр читается крупнее, чем есть, и первый
   экран перестаёт быть парой «текст слева, картинка справа».
   Поверх - полароид с настоящим фото и стрелка в мультфильм: пара
   «фото → герой» ушла из героя, а объяснять продукт без слов надо. */
.reel--free{background:none;border:0;box-shadow:none;border-radius:0;overflow:visible}
.reel--free .reel__m{
  border-radius:0;
  /* внутренняя тень только красила поверх видео - тёмный низ кадра всё равно
     давал горизонтальную линию. Маска уводит края в прозрачность по-настоящему,
     снизу сильнее: там у монтажа земля и тени */
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0, #000 7%, #000 80%, transparent 100%),
    linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:
    linear-gradient(to bottom, transparent 0, #000 7%, #000 80%, transparent 100%),
    linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
  mask-composite:intersect;
}
.reel--free .reel__tag{left:3%;right:auto;bottom:7%}

/* крупный первый экран: больше воздуха и шире колонка под кадр */
.v-reel .hero{padding-block:clamp(46px,6vw,86px) clamp(38px,4.4vw,60px)}
@media (min-width:900px){
  /* доля под кадр увеличена 02.09.2026: на десктопе видео - главный
     аргумент первого экрана, а текст рядом читается и в узкой колонке */
  .v-reel .hero__grid{grid-template-columns:.74fr 1.26fr}
  /* на 1280 две кнопки в ряд не помещались и падали в столбик:
     столбик из двух пилюль читается как две разные секции, а не как выбор */
  .v-reel .hero__btns{gap:10px}
  .v-reel .hero__btns .btn{padding-inline:14px;font-size:15px;white-space:nowrap}
  /* 3:2 вместо 16:9 - кадр выше, первый экран крупнее; бока подрезает
     object-fit, а сюжет во всех склейках по центру */
  .v-reel .reel--free{aspect-ratio:3/2;margin-block:-16px}
}
@media (min-width:1180px){
  .v-reel .hero__grid{grid-template-columns:.72fr 1.28fr}
  /* кадр съедает правое поле секции. Считать через 50vw нельзя:
     50% берётся от своего родителя, а не от .wrap - кадр уезжает за
     экран и появляется горизонтальная прокрутка. */
  .v-reel .reel--free{margin-right:calc(var(--gutter) * -1)}
}
@media (max-width:560px){
  .reel--free .reel__tag{left:2.5%;right:auto;bottom:6%;font-size:9px;padding:3px 8px;gap:5px}
  /* Great Vibes с длинным росчерком: геометрически лого по центру, а
     выглядит смещённым вправо. Двигаем на оптический центр шапки. */
  .hdr__in .logo{transform:translateX(-5px)}
}

/* ---------- шапка на дубле: лого акцентом, кнопка иконкой ---------- */
/* Шапка на тёплом песочном вместо кремового: полоса сверху перестаёт
   сливаться с героем и читается как отдельный элемент. Тот же тон, что
   у светлых полос по странице, - нового цвета в палитру не заводим. */


/* иконка живёт в разметке всегда, но показывается только тут */
.hdr__cta-i{display:none}
@media (max-width:640px){
  /* Три элемента в 375 px: пилюля на 95 px весила больше логотипа и тянула
     глаз вправо. Иконка отдаёт эти пиксели шапке, подпись остаётся в
     aria-label и в кнопке героя прямо под ней. */
  /* перебиваем правило шапки .hdr__right .btn--sm: оно держит min-height 40
     и боковые поля ради размера тапа. Кружок делаем 38, а площадь
     нажатия возвращаем невидимым запасом через ::after - палец
     по-прежнему попадает по 46 px. */
  .hdr .hdr__right .hdr__cta{
    position:relative;padding:0;width:38px;height:38px;min-height:38px;
    border-radius:50%;justify-content:center;gap:0;
  }
  /* без офсетной тени: на круглой иконке она читается как грязь под ней */
  .hdr .hdr__right .hdr__cta{box-shadow:none}
  .hdr .hdr__right .hdr__cta:hover{box-shadow:none;transform:none}
  .hdr .hdr__right .hdr__cta:active{box-shadow:none;transform:scale(.94)}
  .hdr .hdr__right .hdr__cta::after{content:"";position:absolute;inset:-4px;border-radius:50%}
  /* кружок мельче, а перо внутри крупнее: иначе значок тонет в заливке.
     flex:none обязателен - кнопка это flex-контейнер, и без него перо
     сплющивало по ширине до восьми пикселей. */
  .hdr__cta-i{display:block;width:21px;height:21px;flex:none}
  .hdr__cta-t{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}

/* кнопка с физическим нажатием: тень снизу, на наведении разъезжается,
   на клике схлопывается и кнопка уходит вниз */
.btn--primary{
  box-shadow:0 3px 0 0 var(--accent-hover), 0 12px 24px -14px rgba(15,28,58,.55);
  transition:background-color .18s ease, transform .12s ease, box-shadow .12s ease;
}
.btn--primary:hover{
  box-shadow:0 5px 0 0 var(--accent-hover), 0 18px 30px -16px rgba(15,28,58,.6);
}
.btn--primary:active{transform:translateY(3px);box-shadow:0 0 0 0 var(--accent-hover)}
.btn--ghost{
  box-shadow:0 3px 0 0 var(--rule);
  transition:border-color .18s ease, color .18s ease, transform .12s ease, box-shadow .12s ease;
}
.btn--ghost:hover{box-shadow:0 5px 0 0 var(--rule);transform:translateY(-1px)}
.btn--ghost:active{transform:translateY(3px);box-shadow:0 0 0 0 var(--rule)}
@media (prefers-reduced-motion:reduce){
  .btn--primary,.btn--ghost{transition:background-color .18s ease}
  .btn--primary:hover,.btn--ghost:hover{transform:none}
}

.hero__btns{display:flex;flex-wrap:wrap;gap:10px}

/* ---------- тарифы ---------- */
.tiers{display:grid;gap:clamp(26px,3.4vw,36px)}
@media (min-width:840px){
  /* auto-fit вместо жёстких трёх колонок: тарифов стало два, и при
     repeat(3,1fr) третья колонка оставалась пустой - карточки липли
     к левому краю. Теперь ряд центрируется под любое их число,
     а верхняя граница ширины держит карточку читаемой на широком экране. */
  .tiers{grid-template-columns:repeat(auto-fit,minmax(280px,390px));justify-content:center}
  /* Подпись «для кого» у одних форматов в строку, у других в две -
     из-за этого полка цены съезжала. Держим две строки у всех. */
  .tier__for{min-height:45px}
}
.tier{
  position:relative;background:var(--surface);border:1px solid var(--rule);
  border-radius:var(--r);padding:26px 24px;display:flex;flex-direction:column;gap:6px;
}
.tier--pop{border-color:var(--accent);box-shadow:var(--shadow)}
.tier__badge{
  position:absolute;top:-11px;left:24px;
  background:var(--accent);color:var(--on-accent);border-radius:100px;
  padding:5px 13px;font-size:12px;font-weight:600;letter-spacing:.03em;
}
.tier__name{font-size:22px}
.tier__len{font-size:14px;color:var(--ink-faint)}
.tier__for{font-size:15px;color:var(--ink-soft);margin:2px 0 0}
/* Строка цены - общая полка у трёх карточек: одна высота и центр, чтобы
   состав ниже начинался на одном уровне независимо от длины подписи. */
.tier__price{
  font-family:var(--display);font-size:34px;font-weight:800;line-height:1.05;
  letter-spacing:-.03em;color:var(--accent);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;min-height:82px;margin:10px 0 2px;
}
.tier__price small{font-size:20px}
/* Вариант «считаем персонально»: это фраза, а не сумма - набирается текстом,
   иначе тянет на себя всё внимание карточки и ломает ритм. */
.tier__price--q{font-family:var(--body);font-size:19px;font-weight:600;line-height:1.3;letter-spacing:-.01em}
.tier__price--q small{
  display:block;margin-top:8px;font-size:13px;font-weight:400;
  line-height:1.35;color:var(--ink-faint);letter-spacing:0;
}
.tier__incl{margin-top:12px}
.tier__incl li{font-size:15px;padding:11px 0}
.tier__cta{margin-top:auto;padding-top:17px;padding-bottom:17px;min-height:56px}
.tier__incl{margin-bottom:20px}

/* Итог брифа без сумм: та же полка, но фразой - как в карточках тарифов. */
.total--q{align-items:center}
.total__q{
  font-family:var(--body);font-size:18px;font-weight:600;line-height:1.3;
  color:var(--accent);text-align:right;display:flex;flex-direction:column;gap:5px;
}
.total__q small{font-size:13px;font-weight:400;color:var(--ink-faint)}
@media (max-width:559px){ .total__q{text-align:left;font-size:17px} }

/* ---------- врезка в статье ----------
   Не баннер: та же ширина, что у текста, и тот же кегль. Заметна одной
   линией слева и подложкой, а не рамкой во весь экран. */
.art__ping{
  margin:34px 0;padding:18px 22px;border-left:3px solid var(--accent);
  border-radius:0 var(--r) var(--r) 0;background:var(--tint);
  display:flex;flex-direction:column;gap:6px;
}
.art__ping-t{margin:0;font-weight:600;font-size:17px}
.art__ping-a{
  font-size:15px;color:var(--accent);text-decoration:none;
  border-bottom:1px solid currentColor;align-self:flex-start;padding-bottom:1px;
}
.art__ping-a:hover{color:var(--ink)}
/* Запасной канал рядом с кнопкой заявки: холодному читателю написать
   в мессенджер проще, чем заполнить три поля. */
.lead__chat{white-space:nowrap}
@media (max-width:559px){
  .art__ping{padding:15px 17px;margin:28px 0}
  .lead__chat{width:100%}
}

/* ---------- отзывы ---------- */
.rev{
  margin:0;background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);
  padding:26px;display:flex;flex-direction:column;gap:14px;
}
.rev__q{margin:0;font-size:16px;line-height:1.55;color:var(--ink)}
.rev__a{font-size:14px;font-weight:600;display:flex;flex-direction:column;gap:2px}
.rev__m{font-weight:400;color:var(--ink-faint)}

/* ---------- парный заголовок: рукописная строка + тяжёлый капс ---------- */
.h1--pair{display:flex;flex-direction:column;gap:2px}
.h1__script{
  font-family:var(--script);font-weight:400;letter-spacing:0;
  /* у каллиграфических пробел узкий, а росчерки лезут за строку — раздвигаем */
  word-spacing:.06em;
  font-size:clamp(46px,7.8vw,92px);line-height:1.14;color:var(--accent);
  padding-bottom:.04em;
}
.h1__bold{
  font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(27px,4.4vw,50px);line-height:1.02;letter-spacing:-.02em;
}
.band--dark .h1__script{color:var(--accent-on-band)}

/* ---------- оживление превращения ---------- */
/* Цикл 5 с: фото → линия → раскрывается остриё → пауза → мягкое затухание.
   Было 7 с - на первом экране это читалось как «ничего не происходит»:
   человек успевал отвести глаза до того, как стрелка дорисуется.
   Уходит через прозрачность, а не обратной перемоткой: стирание с конца
   выглядит дёргано. Глобальное prefers-reduced-motion гасит это само. */
.show--live .shot--photo{animation:shot-photo 5s ease-in-out infinite}
.show--live .shot--toon{animation:shot-toon 5s ease-in-out infinite}
.show--live .show__arrow{animation:arrow-fade 5s ease-in-out infinite}
.show--live .show__line{
  stroke-dasharray:1;stroke-dashoffset:1;
  animation:arrow-draw 5s ease-in-out infinite;
}
.show--live .show__tip{
  stroke-dasharray:1;stroke-dashoffset:1;
  animation:arrow-point 5s ease-in-out infinite;
}

@keyframes shot-photo{
  0%,10%{transform:rotate(-2.5deg) scale(1)}
  48%,86%{transform:rotate(-2.5deg) scale(.965)}
  100%{transform:rotate(-2.5deg) scale(1)}
}
@keyframes shot-toon{
  0%,34%{opacity:.42;transform:rotate(1.5deg) scale(.955)}
  56%,86%{opacity:1;transform:rotate(1.5deg) scale(1)}
  100%{opacity:.42;transform:rotate(1.5deg) scale(.955)}
}
@keyframes arrow-draw{
  0%,10%{stroke-dashoffset:1}
  36%,100%{stroke-dashoffset:0}
}
@keyframes arrow-point{           /* оба крыла раскрываются разом и быстро */
  0%,36%{stroke-dashoffset:1}
  44%,100%{stroke-dashoffset:0}
}
@keyframes arrow-fade{
  /* Начало и конец обязаны совпадать, иначе на стыке цикла стрелка
     мигает: прозрачность прыгает с 0 обратно на 1 в тот же кадр, когда
     линия сбрасывается в исходное. Гасим до нуля и держим ноль через
     стык, а проявляем уже вместе с прорисовкой. */
  0%,6%{opacity:0}
  16%,86%{opacity:1}
  95%,100%{opacity:0}
}

/* ---------- плашка срочности ---------- */
.hol{
  display:inline-flex;align-items:flex-start;gap:9px;
  margin-top:4px;padding:11px 16px;border-radius:100px;
  background:var(--accent-soft);color:var(--accent);
  font-size:14px;font-weight:600;line-height:1.4;
}
.hol::before{
  content:"";flex:0 0 8px;height:8px;margin-top:.42em;border-radius:50%;
  background:var(--accent);
}
.hol[hidden]{display:none}

/* ---------- реальные медиа в кадрах ---------- */
.frame__m{width:100%;height:100%;object-fit:cover;display:block}
/* Лента примеров: на телефоне показываем постер, ролик не поднимаем вовсе -
   восемнадцать одновременных видео iOS не тянет, часть карточек оставалась
   пустой. С 701 px наоборот: постер прячем, играет ролик. */
.frame__m--still{display:none}

.pick__thumb--m{padding:0;overflow:hidden;background:var(--tint)}
.pick__thumb--m img,.pick__thumb--m video{
  width:100%;height:100%;object-fit:cover;display:block;border-radius:9px;
}
.shot img{width:100%;border-radius:10px;aspect-ratio:4/5;object-fit:cover}

/* ---------- диктовка ---------- */
.voice__time{
  font-family:var(--display);font-weight:800;font-size:19px;
  color:var(--accent);min-width:52px;
}
.voice__play{height:40px;max-width:320px;flex:1 1 240px}
.voice__hint{font-size:14px;color:var(--ink-faint);line-height:1.5;max-width:62ch}

/* ---------- блоки вопросов ---------- */
.qgroup{display:flex;flex-direction:column;gap:16px}
.qgroup + .qgroup{margin-top:clamp(26px,3.4vw,40px)}
.qgroup__head{display:flex;flex-direction:column;gap:5px}
.qgroup__head h3{font-size:clamp(18px,2vw,21px)}
.qgroup__head p{font-size:14.5px;color:var(--ink-faint);line-height:1.5;max-width:60ch}

/* ---------- финал с картинкой ---------- */
.final--art{
  display:grid;gap:clamp(28px,4vw,52px);align-items:center;
  text-align:center;
}
.final--art .lede{text-align:center}
.final__copy{display:flex;flex-direction:column;gap:20px;align-items:center}
.final__frame{
  border-radius:var(--r);overflow:hidden;
  box-shadow:0 18px 48px -18px rgba(0,0,0,.55);
}
.final__m{width:100%;aspect-ratio:16/10;object-fit:cover;display:block}
@media (min-width:900px){ .final--art{grid-template-columns:1fr 1.05fr} }

/* ---------- форма заявки ---------- */
.lead{display:flex;flex-direction:column;gap:20px;max-width:900px}
.lead__row{display:grid;gap:16px}
@media (min-width:760px){
  .lead__row{grid-template-columns:1fr 1fr 1.2fr}
  .lead__row--2{grid-template-columns:1fr 1fr}
}
.lead input,.lead select{
  font-family:var(--body);font-size:16px;color:var(--ink);
  background:var(--surface);border:1.5px solid var(--rule);border-radius:10px;
  padding:13px 14px;width:100%;
}
.lead select{appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--accent) 50%),linear-gradient(135deg,var(--accent) 50%,transparent 50%);
  background-position:calc(100% - 19px) 22px,calc(100% - 13px) 22px;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:38px;
}
.lead input::placeholder{color:var(--ink-faint)}
.lead input:focus,.lead select:focus{outline:none;border-color:var(--accent)}
.lead__send{display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.lead__note{font-size:15px;font-weight:600;color:var(--accent)}
.lead__privacy{font-size:13px;color:var(--ink-faint);line-height:1.5;max-width:62ch}
.lead__brief{font-size:15px;color:var(--ink-soft)}
.lead__brief a{color:var(--accent);font-weight:600}

/* кнопка стоит в одном ряду с полями и выравнивается по их низу */
.lead__btn{align-self:end;height:52px}

/* ---------- телефон (02.09.2026, одно поле - 14.09.2026) ----------
   Телефон отдельным полем - потому что по нему звонят и пишут в WhatsApp,
   а с ником так не выйдет. Код страны больше не отдельная ячейка: «+380 »
   стоит в начале того же поля, и своих правил полю не нужно - оно берёт
   общий вид .fld input. */

/* Раскладку формы тут не трогаем: ниже она сознательно сведена в одну
   колонку 520px по центру - «взгляд идёт сверху вниз одной дорожкой и
   упирается в кнопку». Четвёртое поле в этот столбик встаёт само. */

/* ═══════════════════════════════════════════════════════════════════════
   Правки 27.08.2026
   ═══════════════════════════════════════════════════════════════════════ */

/* ---------- первый экран: заголовок собран, а не рассыпан ----------
   Было: рукописная строка ломалась на «Не річ,» / «а момент» с зазором
   в целую строку, а капс уходил в три рваные строки — блок занимал
   почти весь экран, и кнопки уезжали под сгиб. Лечим тремя вещами:
   строки переносим по смыслу (balance), зазор между парой убираем,
   капсу даём чуть больше воздуха между строк, но меньше кегль. */
.h1--pair{gap:0}
.h1__script,.h1__bold{text-wrap:balance}
@media (min-width:900px){
  .h1__script{font-size:clamp(52px,5.6vw,76px);line-height:1.02}
  /* капс ставим на оптическую линию рукописной строки: у Great Vibes
     крупный левый вынос, из-за него «ЯКИЙ» казался сдвинутым вправо */
  .h1__bold{font-size:clamp(30px,3.1vw,42px);line-height:1.12;margin-top:.18em}
  .hero__copy{gap:18px}
}
@media (min-width:1180px){
  /* колонка текста была уже колонки с картинками — от этого капс и рвался */
  .hero__grid{grid-template-columns:1fr 1fr}
}

/* подпись под кнопками — по центру относительно самих кнопок.
   .hero__cta сжат по ширине кнопок (родитель с align-items:flex-start),
   поэтому stretch даёт ровно их ширину, а не всю колонку. */
.hero__cta .hero__note,.hero__cta .hol{align-self:stretch;text-align:center;max-width:100%}

/* ---------- поводы: восемь карточек, клик ведёт в форму ---------- */
.grid-occ{display:grid;gap:clamp(14px,1.8vw,20px);grid-template-columns:1fr}
@media (min-width:560px){ .grid-occ{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1000px){ .grid-occ{grid-template-columns:repeat(4,1fr)} }
/* карточка стала <button>: сбрасываем всё, что браузер даёт кнопке */
button.card--link{
  font:inherit;text-align:left;background:var(--surface);cursor:pointer;
  appearance:none;width:100%;padding:22px;gap:7px;
}
.grid-occ .card h3{font-size:19px}
.grid-occ .card__d{font-size:14.5px}
button.card--link:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ---------- форма заявки: три поля, кнопка под ними ---------- */
.lead__row{grid-template-columns:1fr}
@media (min-width:760px){
  .lead__row{grid-template-columns:1fr 1.2fr 1.4fr}
  .lead__row--2{grid-template-columns:1fr 1fr}
}
.lead__btn{align-self:start;height:52px;justify-self:start}

/* ---------- бриф: поля друг под другом ----------
   Две колонки экономили высоту, но ломали порядок чтения: рядом с полем
   «з чого все почалося» стояло «два-три моменти», и человек отвечал
   вперемешку. Теперь строго один вопрос за другим. */
.flds{display:flex;flex-direction:column;gap:18px}
@media (min-width:760px){ .flds{display:flex;grid-template-columns:none;gap:20px} }
.flds .fld{max-width:62ch}

/* ---------- диктовка под вопросом ---------- */
.vq{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:2px}
.vq__btn{
  font:inherit;display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  background:none;border:1.5px solid var(--rule);border-radius:999px;
  padding:7px 14px;font-size:14px;color:var(--ink-soft);
  transition:border-color .18s ease,color .18s ease;
}
.vq__btn:hover{border-color:var(--accent);color:var(--accent)}
.vq__btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.vq__btn[disabled]{opacity:.45;cursor:not-allowed}
.vq--on .vq__btn{border-color:var(--accent);color:var(--accent)}
.vq--done .vq__btn{border-color:var(--accent)}
.vq__time{
  font-family:var(--body);font-variant-numeric:tabular-nums;font-size:14px;
  font-weight:600;color:var(--accent);
}
.vq__play{height:34px;max-width:260px;flex:1 1 200px}
.vq__save,.vq__share{
  font-size:14px;font-weight:600;color:var(--accent);text-decoration:underline;
  text-underline-offset:3px;cursor:pointer;
}
.vq__share{font-family:var(--body);background:none;border:0;padding:0}

/* ---------- надбавка, уже входящая в формат ---------- */
.opt--in{opacity:.55;cursor:default}
.opt--in .opt__p{visibility:hidden}

/* ---------- отзывы с аватарами ---------- */
.rev__a{flex-direction:row;align-items:center;gap:12px}
.rev__who{display:flex;flex-direction:column;gap:2px}
.rev__face{
  flex:0 0 44px;width:44px;height:44px;border-radius:50%;object-fit:cover;
  background:var(--tint);
}
.rev__face--ph{
  display:grid;place-items:center;font-family:var(--display);font-weight:700;
  font-size:18px;color:var(--accent);
}

/* ---------- выбор формата в брифе ----------
   Строчная раскладка .pick--sm тут не годится: «З озвучкою 1690 ₴ · 90 с»
   на телефоне ломалось на три строки, и название рвалось посередине.
   Название сверху, цена и длина отдельной строкой под ним. */
.picks--tiers{grid-template-columns:1fr}
@media (min-width:560px){
  .picks--tiers{grid-template-columns:repeat(auto-fit,minmax(230px,340px));justify-content:center}
}
.pick--tier .pick__box{
  flex-direction:column;align-items:flex-start;gap:4px;padding:16px 18px;
}
.pick--tier .pick__name{font-size:19px}
.pick--tier .pick__desc{
  font-size:15px;font-weight:600;color:var(--accent);white-space:nowrap;
  font-variant-numeric:tabular-nums;
}

/* ═══════════════════════════════════════════════════════════════════════
   Масштаб первого экрана и примеров (27.08.2026, вторая итерация)
   Первый экран был мелким для своей задачи: заголовок ужат, фотографии
   превращения - главный аргумент продукта - занимали меньше половины
   ширины. Расширяем контейнер и поднимаем кегль, но так, чтобы
   рукописная строка гарантированно осталась в ОДНУ строку.
   ═══════════════════════════════════════════════════════════════════════ */
@media (min-width:900px){
  .hero{max-width:1320px;padding-block:clamp(56px,6.4vw,96px) clamp(48px,5.4vw,80px)}
  /* воздуха между колонками столько же, сколько по краям страницы:
     первая версия этой правки съела поля, и экран стал тесным */
  .hero__grid{grid-template-columns:.97fr 1.03fr;gap:clamp(48px,5.2vw,84px)}
  .hero__copy{gap:26px}

  /* Кегль подобран замером по САМОЙ ДЛИННОЙ из локалей: русское
     «Не вещь, а момент» на 10% шире украинского «Не річ, а момент»,
     и на первой версии (5.3vw) оно ломалось на две строки ровно на 2 px.
     4.7vw даёт запас около 10% на всех ширинах от 900 и выше. */
  .h1__script{font-size:clamp(46px,4.7vw,68px);line-height:1.0}
  .h1__bold{font-size:clamp(32px,3.35vw,46px);line-height:1.12;margin-top:.34em}
  .hero .lede{font-size:clamp(18px,1.35vw,20px);max-width:50ch}
}
@media (min-width:1180px){
  .hero__grid{grid-template-columns:.93fr 1.07fr}
  /* зазор между кадрами узкий намеренно: стрелка всё равно лежит поверх них,
     а лишние пиксели тут отнимаются у самих фотографий */
  .show{gap:clamp(14px,2.2vw,30px)}
}

/* карточки превращения крупнее: подпись и рамка масштабируются вместе */
@media (min-width:900px){
  .shot--photo,.shot--toon{padding:14px 14px 6px;border-radius:16px}
  .shot__cap{font-size:14px}
  .show{gap:clamp(16px,3.4vw,58px)}
  .show__arrow{width:clamp(64px,5.8vw,96px)}
  .show__note{font-size:15px;margin-top:20px;max-width:52ch}
}

/* ---------- примеры работ крупнее ----------
   Три ролика в контейнере 1120 давали кадр ~355 px - меньше, чем карточка
   товара в каталоге. Секции с видео даём свою ширину. */
@media (min-width:1000px){
  #examples > .wrap{max-width:1300px}
}
@media (min-width:1180px){
  #examples > .wrap{max-width:1320px}
}

/* ---------- форма заявки: столбик по центру ----------
   Три поля в ряд читались как таблица, а не как разговор. Ставим их
   друг под другом узкой колонкой по центру - взгляд идёт сверху вниз
   одной дорожкой и упирается в кнопку. Заголовок секции центрируем
   вместе с формой, иначе центрированная форма под левым заголовком
   выглядит как сбой вёрстки. */
.lead{max-width:520px;margin-inline:auto;align-items:stretch}
.lead__row{grid-template-columns:1fr;gap:14px}
@media (min-width:760px){
  .lead__row{grid-template-columns:1fr}
  .lead__row--2{grid-template-columns:1fr 1fr}
}
.lead__btn{justify-self:stretch;align-self:stretch;width:100%;margin-top:24px}
/* Ловушка для ботов:человек её не видит и не поймает табом, робот заполняет. */
.trap{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}

/* Карточка формата без цены: на месте цифры был воздух, состав съезжал
   вверх и карточки разъезжались по высоте. Держим отступ вручную. */
.tier--nop .tier__len{margin-top:6px}
.tier--nop .tier__incl{margin-top:14px}
.lead__note,.lead__privacy,.lead__brief{text-align:center;margin-inline:auto}

/* ═══════════════════════════════════════════════════════════════════════
   Бриф по центру (27.08.2026)
   Раньше бриф был единственной страницей по левому краю - как рабочая
   форма. Решение Артура: центрировать и его, чтобы обе страницы читались
   одинаково. Центрируем заголовки, подписи и сами колонки контента.
   Слева намеренно остаются: подписи над полями (подпись должна начинаться
   там же, где поле) и строки надбавок - это список с ценами справа,
   по центру он перестаёт сканироваться.
   ═══════════════════════════════════════════════════════════════════════ */
.brief__head{text-align:center;align-items:center;margin-inline:auto}
.brief__step{align-items:center;text-align:center}
.brief__step > h2,.brief__step > .lede,.brief__step > .voice__hint{margin-inline:auto}

/* колонки контента внутри шага возвращают себе левое чтение,
   но сами стоят по центру страницы */
.brief__step > .picks,
.brief__step > .opts,
.brief__step > .flds,
.brief__step .qgroup{width:100%;text-align:left}
.brief__step > .opts{max-width:62ch;margin-inline:auto}
.flds .fld{margin-inline:auto;width:100%}
.qgroup__head{text-align:center;align-items:center}
.qgroup__head p{margin-inline:auto}

/* итог и кнопки - по центру */
.brief__send{justify-content:center}
.brief__send .hero__note{text-align:center}

/* ---------- финал с картинкой: кнопка по центру текстовой колонки ----------
   Заголовок и подпись тут по левому краю (рядом картинка, и рваный правый
   край читается лучше центрованного), а кнопка прижималась к левому краю
   и висела в углу блока. Ставим её по центру колонки. */

/* ---------- срок в брифе: две карточки по центру ----------
   Дорожки тут фиксированные (240px), а не 1fr, поэтому сетка тянулась
   на всю ширину, а сами карточки жались к левому краю под центрованным
   заголовком. Центрируем дорожки, а не текст внутри них. */
.picks--row{justify-content:center}

/* ---------- шапка и подвал по ширине страницы ----------
   Меню центрировано точно (сетка 1fr auto 1fr), но сама шапка оставалась
   на старых 1120 px, когда первый экран и примеры выросли до 1320.
   Логотип оказывался на 100 px правее текста героя, и вся шапка читалась
   как вложенная в страницу, а не как её рамка. Ведём по самой широкой
   секции - тогда логотип встаёт на одну линию с заголовком героя. */
@media (min-width:900px){
  .hdr__in,.ftr__in{max-width:1320px}
}

/* ═══════════════════════════════════════════════════════════════════════
   Мобильный пакет (27.08.2026)
   Страница была 15.4 экрана, меню на телефоне не существовало вовсе.
   ═══════════════════════════════════════════════════════════════════════ */

/* ---------- бургер и панель меню ---------- */
.burger{
  display:inline-flex;flex-direction:column;justify-content:center;gap:5px;
  width:44px;height:44px;padding:0 10px;margin-right:-8px;
  background:none;border:0;cursor:pointer;
}
.burger span{
  display:block;height:2px;border-radius:2px;background:var(--ink);
  transition:transform .2s ease,opacity .2s ease;
}
.burger:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:8px}
[aria-expanded="true"].burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
[aria-expanded="true"].burger span:nth-child(2){opacity:0}
[aria-expanded="true"].burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.menu{
  position:absolute;left:0;right:0;top:100%;
  background:var(--tint);border-bottom:1px solid var(--rule);
  box-shadow:0 22px 40px -26px rgba(11,23,51,.5);
  padding:8px var(--gutter) 22px;
  display:flex;flex-direction:column;gap:18px;
  max-height:calc(100dvh - 68px);overflow-y:auto;
}
.menu[hidden]{display:none}
.menu__nav{display:flex;flex-direction:column}
/* строки меню - крупная зона нажатия, 54px вместо прежних 19-22 у ссылок */
.menu__nav a{
  display:block;padding:15px 2px;min-height:54px;
  font-size:18px;text-decoration:none;color:var(--ink);
  border-bottom:1px solid var(--rule);
}
.menu__nav a:active{color:var(--accent)}
.menu__foot{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.menu__cta{flex:1 1 180px;justify-content:center}
.lang--menu a{padding:12px 14px;font-size:15px}
@media (min-width:900px){
  .burger,.menu{display:none}
}
/* переключатель языка живёт либо в шапке, либо в панели - но не в обоих */
@media (max-width:899px){
  .lang--hdr{display:none}
}
@media (min-width:900px){
  .lang--menu{display:none}
}

/* ---------- кнопка в мессенджер над формой (02.09.2026) ----------
   Часть людей не станет заполнять поля - им быстрее спросить словами.
   Такой человек уходил без заявки, хотя был готов говорить. Кнопка стоит
   до формы и оформлена тише неё: основной путь всё-таки заявка. */
.tgfirst{
  display:flex;flex-direction:column;align-items:stretch;gap:10px;
  margin:6px auto 0;max-width:520px;text-align:center;
}
/* «або» с линейками по бокам: без них два блока кнопок читаются как
   один список, и запасной путь выглядит равным основному */
.tgfirst__or{
  display:flex;align-items:center;gap:10px;
  font-size:13px;color:#8FA2BE;text-transform:lowercase;margin:2px 0;
}
.tgfirst__or::before,.tgfirst__or::after{
  content:"";flex:1;height:1px;background:rgba(238,244,251,.2);
}
.tgfirst__btn{display:inline-flex;align-items:center;gap:9px;background:none;color:var(--on-band)}
/* селектор с .band--dark: иначе рамку перебивает общее правило
   .band--dark .btn--ghost с прозрачностью .22 - на тёмном фоне это
   контраст 2:1, кнопку почти не видно */
.band--dark .tgfirst__btn{border:1.5px solid rgba(238,244,251,.62)}
.band--dark .tgfirst__btn:hover{border-color:var(--on-band);background:rgba(238,244,251,.08)}
.tgfirst__btn svg{width:19px;height:19px;flex:none}
.tgfirst__btn:hover{border-color:var(--on-band);background:rgba(238,244,251,.08)}
.tgfirst__hint{font-size:13px;color:#A9B9D0;line-height:1.5;max-width:46ch;margin-inline:auto}
/* кнопка во всю ширину формы: она под ней, и обрубок по центру
   выглядел бы случайным */
.tgfirst__btn{width:100%;justify-content:center}

/* ---------- стара ціна поруч із новою (02.09.2026) ----------
   Ставим сбоку от новой, а не над ней: сверху она читается как заголовок
   цены, и глаз цепляется сначала за перечёркнутое число. */
.tier__was{
  /* order:-1 поднимает старую цену над новой, не трогая порядок в разметке:
     для скринридера сначала звучит цена, которую платить */
  order:-1;color:var(--ink-faint);font-size:17px;font-weight:500;
  text-decoration-thickness:1.5px;margin:0 0 2px;white-space:nowrap;
}
@media (max-width:560px){ .tier__was{font-size:16px} }

/* ---------- форма на телефоне: плотнее (02.09.2026) ----------
   Полей стало четыре плюс чипы и две кнопки - блок вырос почти на два
   экрана. Ужимаем всё, что можно ужать без потери попадания пальцем:
   высота полей 52 -> 46, зазоры между полями 16 -> 11, чипы мельче. */
@media (max-width:560px){
  .lead{gap:14px}
  .lead__row{gap:11px}
  .fld{gap:4px}
  .fld label,.fld__lbl{font-size:13px}
  .lead input{padding:11px 12px;font-size:16px}   /* 16px обязателен: меньше - iOS зумит страницу */
  .mchips{gap:6px}
  .mchips .mchip span{padding:8px 12px;font-size:13.5px;gap:6px}
  .mchips .mchip span svg{width:15px;height:15px}
  .lead__btn{height:48px;margin-top:2px}
  .tgfirst{gap:7px;margin-top:2px}
  .tgfirst__or{margin:0}
  .tgfirst__btn{padding:12px 16px}
  .tgfirst__hint{font-size:12.5px}
  .lead__privacy{font-size:12px;line-height:1.45}
  .cf__sub{margin-bottom:16px}
}

/* ---------- выбор мессенджера чипами (02.09.2026) ----------
   Класс называется mchip, а не chip: .chip в проекте уже занят плашками
   контактов - белый фон, высота 96px, вертикальная раскладка. Мои чипы
   унаследовали их вид, и полоса поехала. */
   Раньше тут было поле «нік у месенджері». Ник нужно вспомнить и
   скопировать - это работа, которую человек делает неохотно. Галочка
   не требует ничего, а нам достаточно: пишем всё равно по номеру. */
.fld__lbl{font-size:14px;font-weight:600;color:inherit}
.mchips{display:flex;flex-wrap:wrap;gap:9px}
.mchips .mchip{position:relative;margin:0}
.mchips .mchip input{position:absolute;opacity:0;width:0;height:0}
.mchips .mchip span{
  display:inline-flex;align-items:center;gap:8px;padding:10px 15px;border-radius:100px;
  /* цвет задаём явно: чип - это <label> внутри .fld, а там подписи полей
     тёмные (var(--ink)), и на тёмной полосе текст сливался с фоном
     полностью - контраст выходил 1:1 */
  color:var(--on-band);
  border:1.5px solid rgba(238,244,251,.5);font-size:14.5px;cursor:pointer;
  transition:background .15s ease,border-color .15s ease;user-select:none;
}
.mchips .mchip span svg{width:17px;height:17px;flex:none}
.mchips .mchip span:hover{border-color:rgba(238,244,251,.6)}
.mchips .mchip input:checked + span{
  background:var(--on-band);color:var(--band);border-color:var(--on-band);font-weight:600;
}
.mchips .mchip input:focus-visible + span{outline:2px solid var(--accent-2,#E9C77E);outline-offset:2px}
/* Размеры чипов на телефоне заданы ниже, в блоке «форма плотнее»:
   там же и остальные поля. Отдельное правило на увеличение убрано -
   оно спорило с требованием компактности и побеждало по порядку. */

/* ---------- снимок «до» поверх нарезки (02.09.2026) ----------
   Нарезка показывает разнообразие, но не объясняет, откуда берутся герои.
   Настоящее фото в углу со стрелкой к результату отвечает на это за
   секунду. Снимок намеренно маленький: место принадлежит результату. */
.pola{
  position:absolute;left:2.5%;top:5%;width:min(19%,148px);margin:0;
  background:#fff;padding:7px 7px 0;border-radius:6px;
  box-shadow:0 14px 34px rgba(11,23,51,.28);
  transform:rotate(-4deg);z-index:2;
}
/* исходники «до» вертикальные (4:5) - режем их в 4:3 значит срезать
   людям головы; держим родную пропорцию */
.pola img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:3px}
.pola figcaption{
  font-size:clamp(10px,1.05vw,13px);color:#4B5E78;text-align:center;
  padding:5px 2px 7px;letter-spacing:.01em;
}
.pola__arrow{
  /* привязана к самому снимку, а не к кадру: проценты от кадра уводили
     её внутрь полароида */
  position:absolute;left:-14%;top:97%;
  width:clamp(38px,5vw,68px);height:auto;color:var(--accent);
  pointer-events:none;opacity:.92;transform:rotate(-6deg);
}
/* на узком экране снимок съедал бы половину кадра - делаем компактнее
   и уводим стрелку ближе к нему */
@media (max-width:899px){
  /* на узком экране снимок в 36% закрывал половину кадра, а стрелка
     вылезала за него и наезжала на заголовок */
  .pola{width:17%;left:3.5%;top:5%;padding:3px 3px 0}
  .pola figcaption{font-size:7px;padding:2px 1px 3px}
  .pola__arrow{left:4%;top:96%;width:22px}
}

/* ---------- реакции: лента со свайпом вместо башни ----------
   Три вертикальных кадра 350x622 подряд занимали 2137 px - два с половиной
   экрана на втором же экране сайта. Кладём в горизонтальную ленту: видно
   край следующего кадра, значит понятно, что листается. */
@media (max-width:699px){
  .reacts__row{
    grid-auto-flow:column;grid-auto-columns:74%;grid-template-columns:none;
    overflow-x:auto;overscroll-behavior-x:contain;
  /* pan-y обязателен: без него лента забирает себе и вертикальный свайп,
     и страница под пальцем перестаёт прокручиваться */
  touch-action:pan-x pan-y;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    gap:12px;padding-inline:var(--gutter);margin-inline:calc(var(--gutter) * -1);
    scrollbar-width:none;
  }
  .reacts__row::-webkit-scrollbar{display:none}
  }

/* ---------- реакции в один ряд на широких экранах (02.09.2026) ----------
   Шесть кадров в сетке по три давали два ряда и высокую полосу. В один ряд
   секция читается как лента моментов, а не как каталог. Кадры вертикальные,
   поэтому колонок ровно столько, сколько карточек - иначе они растянутся. */
/* Лента кадров во всю ширину экрана, без просветов между ними: шесть
   кадров, поделённые на ширину, давали карточку 161 px - лица есть,
   эмоции не видно. Здесь кадр крупный, а полоса читается как единый
   киноряд, а не как галерея плиток. Прокрутка зациклена скриптом. */
.reacts__row{
  grid-auto-flow:column;grid-auto-columns:clamp(230px,26vw,380px);
  grid-template-columns:none;gap:0;
  overflow-x:auto;overscroll-behavior-x:contain;
  /* без scroll-snap: он подтягивает позицию после нашего перескока
     через границу набора, и кольцо начинает дёргаться */
  width:100vw;margin-inline:calc(50% - 50vw);padding-inline:0;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.reacts__row::-webkit-scrollbar{display:none}
.reacts__row > *{scroll-snap-align:center}
/* кадры стыкуются вплотную: скругление и рамка тут только разбивали бы ряд */
.reacts__row .frame{border-radius:0;border:0;box-shadow:none}
/* кнопка запуска поверх кадра - воспроизведение по клику, а не само */
.reacts__row .frame{cursor:pointer}
.rplay{
  position:absolute;inset:0;display:grid;place-items:center;border:0;padding:0;
  background:rgba(6,13,36,.28);cursor:pointer;transition:background .18s ease;
}
.rplay:hover{background:rgba(6,13,36,.14)}
.rplay span{
  width:54px;height:54px;border-radius:50%;background:rgba(255,255,255,.92);
  display:grid;place-items:center;box-shadow:0 6px 18px rgba(0,0,0,.28);
}
.rplay span::after{
  content:"";width:0;height:0;margin-left:4px;
  border-left:16px solid var(--band);border-top:10px solid transparent;
  border-bottom:10px solid transparent;
}
.rplay[hidden]{display:none}

/* ---------- поводы: две колонки, без описаний ----------
   Восемь карточек по 155 px в столбик - 1350 px. На телефоне от карточки
   нужна только сама подпись: описание раскрывается в переписке. */
@media (max-width:559px){
  .grid-occ{grid-template-columns:repeat(2,1fr);gap:10px}
  .grid-occ .card__d{display:none}
  .grid-occ button.card--link{padding:16px 14px;gap:8px;min-height:96px;
    justify-content:space-between}
  .grid-occ .card h3{font-size:17px;line-height:1.2}
  .grid-occ .card__go{margin-top:0}
}

/* ---------- полоса доверия: 2x2 вместо столбика ---------- */
@media (min-width:360px) and (max-width:659px){
  }

/* ---------- герой на телефоне ---------- */
@media (max-width:560px){
  /* кнопки на всю колонку: были 234 и 227 - разной ширины и обе влево,
     при том что подпись под ними по центру */
  .hero__cta{align-self:stretch;width:100%}
  .hero__btns{flex-direction:column;align-items:stretch;width:100%}
  .hero__btns .btn{width:100%}

  /* два кадра превращения рядом, а не друг под другом: было 859 px */
  .show{grid-template-columns:1fr 1fr;gap:10px;justify-items:stretch}
  .shot{width:auto}
  .show__arrow{width:54px;top:44%;transform:translate(-50%,-50%) rotate(0deg)}
  .show__note{margin-top:16px}
  .shot--photo,.shot--toon{padding:8px 8px 3px}
  .shot__cap{font-size:12px}
}

/* ---------- зоны нажатия до нормы 44 px ---------- */
@media (max-width:899px){
  /* кнопка компактнее, зона нажатия остаётся ≥40px */
  .hdr__right .btn--sm{min-height:40px;padding-inline:14px;font-size:13.5px}
  .logo{padding-block:7px}
  .lead__brief a{display:inline-block;padding:12px 4px}
  .ftr__links a{display:inline-block;padding:11px 0}
  .vq__btn{min-height:44px;padding:10px 16px}
  /* кнопки сборки брифа: были 295 и 200 и переносились неровным рядом */
  .brief__send{flex-direction:column;align-items:stretch;width:100%}
  .brief__send .btn{width:100%}
  /* капс с разрядкой на 12 px читается на пределе */
  .eyebrow{font-size:12.5px;letter-spacing:.1em}
}

/* ---------- шаги в две колонки ----------
   Четыре шага в столбик давали 700 px, в половину ширины - 738 на весь блок
   вместе с заголовком, карточка 169x221.
   ГАРАНТИИ так НЕ кладём: там текст длиннее, в 169 px карточка вытягивается
   до 382 - узкая колонка с рваными переносами. Экономия 190 px того не стоит,
   350x231 в один столбец читается лучше. */
@media (min-width:380px) and (max-width:699px){
  #how .grid-4{grid-template-columns:repeat(2,1fr);gap:12px}
  #how .step__d{font-size:14px;line-height:1.45}
}

/* ---------- тарифы плотнее на телефоне ----------
   Три карточки занимали 1370 px. Режем внутренние отступы и строки состава,
   ничего не убирая: человек должен видеть все три формата целиком. */
@media (max-width:559px){
  .tier{padding:20px 18px}
  .tier__incl li{padding:9px 0;font-size:14.5px}
  .tier__price{font-size:30px;min-height:72px}
  .tier__price--q{font-size:18px}
}

/* поле количества героев: 36x21 - слишком мелко для пальца.
   Сам чекбокс 21x21 не в счёт: у него кликабельна вся строка-label. */
@media (max-width:899px){
  .opt__n{width:52px;min-height:44px;padding:10px 4px}
  .stepr__b{width:44px;height:44px;flex-basis:44px}
  /* Safari зумит экран при фокусе в поле мельче 16px. Держим планку на всех
     полях разом, чтобы новое поле однажды снова не утащило страницу в зум. */
  input,select,textarea{font-size:16px}
}

/* ═══════════════════════════════════════════════════════════════════════
   Правки 27.08.2026, вечер
   ═══════════════════════════════════════════════════════════════════════ */

/* ---------- шапка на телефоне: бургер слева, лого по центру, кнопка справа ----------
   `display:contents` у правой группы распускает её детей в саму сетку шапки,
   и каждый встаёт в свою колонку - без дублирования разметки. */
@media (max-width:899px){
  /* колонки ОБЯЗАТЕЛЬНО 1fr auto 1fr: при `44px 1fr auto` боковые получаются
     разной ширины (бургер 44 против кнопки 105), и лого уезжает влево на 30 px.
     Здесь же обе крайние равны по определению - середина ровно по центру. */
  .hdr__in{grid-template-columns:1fr auto 1fr;gap:10px}
  .hdr__right{display:contents}
  /* grid-row обязателен: бургер стоит в разметке ПОСЛЕ кнопки, и без явной
     строки автоплейсмент уносит его на второй ряд - курсор сетки уже прошёл
     первую колонку. Поймано скриншотом, замер ширин этого не показывал. */
  /* иконка бургера прижата к краю контента, как кнопка справа: зона нажатия
     сохраняется отрицательным полем наружу */
  .burger{grid-column:1;grid-row:1;justify-self:start;margin:0 0 0 -10px;padding-inline:10px}
  .logo{grid-column:2;grid-row:1;justify-self:center}
  .hdr__right .btn--sm{grid-column:3;grid-row:1;justify-self:end}
}

/* ---------- первый экран: мультик сразу под подписью ----------
   На телефоне кадры уезжали под кнопки, и человек читал абзац раньше,
   чем видел, о чём он. Распускаем текстовую колонку в сетку и раздаём
   порядок: подпись -> мультик -> заголовок -> текст -> кнопки
   (решение Артура 02.09.2026: видео идёт первым, оно и есть аргумент).
   Порядок в разметке не меняется - для скринридера и клавиатуры всё
   как было. Планшеты сюда же: двухколоночной сетка становится только
   с 900px, до неё видео точно так же уезжало вниз. */
@media (max-width:899px){
  .hero__copy{display:contents}
  .hero__grid{gap:18px;justify-items:center;text-align:center}
  .hero .eyebrow{order:1}
  .hero__art{order:2;margin-block:2px 6px;width:100%}
  .hero .h1--pair{order:3;align-items:center}
  .hero .lede{order:4}
  .hero__cta{order:5;align-items:center}
  .hero__btns{justify-content:center}
  /* подпись под кадрами убрана: между картинками и абзацем она становится
     третьим текстом подряд и ломает связку «заголовок - кадры - текст» */
  .show__note{display:none}
}

/* ---------- контакты: плашки каналов ---------- */
.chips{display:grid;gap:10px;grid-template-columns:repeat(2,1fr)}
/* семь плашек в три колонки - три ряда вместо четырёх, минус ~200 px */
@media (min-width:360px){ .chips{grid-template-columns:repeat(3,1fr)} }
@media (min-width:620px){ .chips{grid-template-columns:repeat(4,1fr)} }
@media (min-width:900px){ .chips{grid-template-columns:repeat(7,1fr)} }
.chip{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;min-height:96px;padding:16px 10px;
  background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);
  text-decoration:none;color:var(--ink);
  transition:border-color .16s ease,transform .16s ease,box-shadow .16s ease;
}
.chip svg{width:26px;height:26px;color:var(--accent)}
.chip__l{font-size:14px;font-weight:600;line-height:1.2}
a.chip:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:var(--shadow)}
a.chip:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
/* канала ещё нет - плашка на месте, но видно, что она не работает */
.chip--off{opacity:.5;cursor:default}
.chip--off svg{color:var(--ink-faint)}
.chip__soon{
  font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);
}

/* ---------- узкая внутренняя страница (контакты) ---------- */
.page-narrow{
  padding-block:clamp(36px,5vw,64px) clamp(56px,7vw,90px);
  display:flex;flex-direction:column;gap:clamp(28px,4vw,44px);
  max-width:900px;
}
.page-head{
  display:flex;flex-direction:column;gap:14px;
  text-align:center;align-items:center;margin-inline:auto;max-width:56ch;
}
.page-head h1{font-size:clamp(30px,4.4vw,46px);line-height:1.08;text-wrap:balance}
.page-back{text-align:center;font-size:15px}
.page-back a{color:var(--accent);font-weight:600;display:inline-block;padding:12px 4px}

/* ---------- лента примеров ---------- */
/* Трек = набор + клон; сдвиг с -50% до 0 - непрерывный ход слева направо. */
.exmarq{overflow:hidden}
.exmarq__track{
  display:flex;width:max-content;
  animation:exm-flow var(--exm-d,48s) linear infinite;
}
/* Пауза по наведению - только там, где наведение вообще существует.
   На тач-экране :hover залипает после первого касания, и лента замирает
   навсегда: человек тронул экран, чтобы прокрутить страницу, - и всё. */
@media (hover:hover) and (pointer:fine){
  .exmarq:hover .exmarq__track{animation-play-state:paused}
}
.exmarq__set{display:flex}
.exm__card{
  flex:0 0 clamp(270px,34vw,440px);
  margin-right:clamp(16px,2vw,26px);
}
.exm__card .frame{box-shadow:var(--shadow)}
@keyframes exm-flow{
  from{transform:translateX(-50%)}
  to{transform:translateX(0)}
}

/* заметка в форме: своя строка на всю ширину */
.fld--note{max-width:640px}

/* ---------- статьи блога ---------- */
.art{max-width:760px;padding-block:clamp(32px,5vw,56px) clamp(56px,7vw,90px)}
.art h1{font-size:clamp(30px,4.6vw,44px);line-height:1.12;margin-bottom:10px}
.art__crumbs{font-size:13.5px;color:var(--ink-faint);margin-bottom:18px}
.art__crumbs a{color:var(--ink-faint);text-decoration:none}
.art__crumbs a:hover{color:var(--accent)}
.art__updated{font-size:13.5px;color:var(--ink-faint);margin-bottom:22px}
.art__lead{font-size:clamp(17px,1.9vw,19px);line-height:1.6;color:var(--ink-soft);margin-bottom:8px}
.art h2{font-size:clamp(22px,2.8vw,28px);margin:clamp(30px,4vw,44px) 0 6px}
.art > p{margin:12px 0;line-height:1.65;color:var(--ink-soft)}
.art__item{margin:22px 0;padding:18px 20px;background:var(--surface);
  border:1px solid var(--rule);border-radius:var(--r)}
.art__item h3{display:flex;align-items:baseline;gap:10px;font-size:18px;margin-bottom:6px;flex-wrap:wrap}
.art__n{
  flex:0 0 auto;font-size:13px;font-weight:700;color:var(--accent);
  background:var(--accent-soft);border-radius:100px;padding:2px 9px;
}
.art__price{margin-left:auto;font-size:13.5px;font-weight:600;color:var(--accent);white-space:nowrap}
.art__item p{font-size:15.5px;line-height:1.6;color:var(--ink-soft)}
.art__go{color:var(--accent);font-weight:600}
.art .faq{max-width:none}
.art__related{margin-top:clamp(36px,5vw,56px)}
.art__related h2{margin-top:0}
.art__index{margin-top:26px}

/* ---------- заявка объединена с финальным экраном ----------
   Тёмный фон, эмоциональный заголовок финала, форма и картинка рядом.
   Отдельный финальный экран убран - было два прощания подряд. */
/* Телефон читает секцию сверху вниз в порядке разметки: заголовок,
   кадр, подпись, форма. Кадр между обещанием и объяснением, а не над
   заголовком - первым экраном должно быть слово, а не картинка.
   На десктопе кадр уезжает в правую колонку через области: порядок
   тегов остаётся мобильным, раскладку задаёт сетка. */
.contact-final{display:grid;gap:14px clamp(28px,4vw,52px)}
.contact-final .cf__h,
.contact-final .cf__sub{max-width:62ch;margin-inline:auto;text-align:center}
.contact-final .final__frame{margin-block:10px}
.contact-final .lead{margin-top:clamp(16px,2.4vw,26px)}
@media (min-width:900px){
  .contact-final{
    grid-template-columns:1.1fr .9fr;
    grid-template-areas:"head art" "sub art" "form art";
    align-items:start;
  }
  .contact-final .cf__h{grid-area:head}
  .contact-final .cf__sub{grid-area:sub}
  .contact-final .lead{grid-area:form}
  .contact-final .final__frame{grid-area:art;align-self:center;margin-block:0}
}
/* На большом экране кадр был заметно мельче формы рядом. Даём финалу
   более широкий контейнер, чем у остальных секций, и перевес колонке с
   картинкой: форма сохраняет свою ширину, растёт только кадр. */
@media (min-width:1180px){
  .contact-final{max-width:1260px;grid-template-columns:1fr 1.05fr}
}
.band--dark .lead label{color:var(--on-band)}
.band--dark .lead__privacy{color:var(--on-band-soft)}
.band--dark .lead__note{color:var(--accent-on-band)}
.band--dark .lead__brief{color:var(--on-band-soft)}
.band--dark .lead__brief a{color:var(--accent-on-band)}
.band--dark .lead input{border-color:transparent}

/* ---------- лента примеров на касании ----------
   Зона JS-транспорта (MARQ_JS): портрет до 700px плюс тач-устройства до
   1000px - iPhone в альбоме это 736-956 CSS px, и десктопная CSS-лента там
   так же мертва (слой шире предела текстуры), а 18 видео разом iOS не
   декодирует. Все три правила живут в ОДНОМ медиа-блоке и совпадают со
   строкой MQ в MARQ_JS - иначе между брейкпоинтами остаются щели, где
   видны и постер, и видео сразу.
   Постер здесь обычным потоком, не абсолютом: абсолют внутри grid-рамки
   с place-items:center давал коробку нужного размера, но картинка в ней
   не рисовалась. Выше зоны постер прячет базовое .frame__m--still. */
@media (max-width:700px), (hover:none) and (pointer:coarse) and (max-width:1000px){
  .exm__card .frame__m--live{display:none}
  .exm__card .frame__m--still{display:block}
  .exmarq__track{animation:none}
  /* ролик живой карточки ложится ПОВЕРХ постера: пока кадры не декодированы,
     виден постер (и у самого video стоит тот же poster) - ни чёрных ящиков,
     ни мигания; отказал декодер - остался постер */
  .exm__card .frame__m--live.is-on{
    display:block;position:absolute;inset:0;
    width:100%;height:100%;object-fit:cover;
  }
}

/* ── Бриф-квиз ─────────────────────────────────────────────────────────
   Один экран - один вопрос. Шаги лежат в разметке все сразу и скрыты
   атрибутом hidden: так собранный текст и записи доступны отправке,
   какой бы шаг ни был открыт. */
.brief--qz{gap:clamp(20px,3vw,30px);min-height:70vh}
.qz{display:flex;flex-direction:column;gap:16px;max-width:64ch}
.qz[hidden]{display:none}
.qz h2{font-size:clamp(24px,3.4vw,36px);line-height:1.15}
.qz--intro h1{font-size:clamp(30px,4.6vw,46px)}
.qz__tag{font-size:12.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
         color:var(--accent)}
.qz__req{color:var(--accent);margin-left:.15em}
/* полоска прогресса: тонкая, без цифр внутри - цифры отдельной строкой */
.qz__bar{height:4px;background:var(--rule);border-radius:100px;overflow:hidden}
.qz__fill{display:block;height:100%;width:0;background:var(--accent);
          border-radius:100px;transition:width .28s ease}
.qz__count{font-size:13px;color:var(--ink-faint);margin-top:-6px;
           font-variant-numeric:tabular-nums}
.qz__nav{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:4px}
.qz__nav .btn{min-width:132px;justify-content:center}
/* пропуск - справа и тише остальных: это выход, а не действие */
.qz__skip{margin-left:auto;min-width:0;border-color:transparent;color:var(--ink-faint)}
.qz__skip:hover{color:var(--accent)}
.qz__hint{min-height:1.2em;color:var(--accent);font-size:14px}
.qz .fld label{display:none}          /* вопрос уже стоит заголовком шага */
.qz .fld textarea{font-size:17px;min-height:120px}
/* итог перед отправкой: что человек ответил, микрофон - что надиктовал */
.qz__sum{display:flex;flex-direction:column;gap:10px;padding:16px 18px;
         background:var(--tint);border-radius:14px}
.qz__row{display:flex;flex-direction:column;gap:2px;font-size:14.5px}
.qz__row b{font-family:var(--display);font-size:15px}
.qz__row span{color:var(--ink-soft);white-space:pre-wrap}
@media (max-width:520px){
  .qz__nav .btn{flex:1;min-width:0}
  .qz__skip{flex:0 0 100%;margin-left:0;order:3}
}
/* блок «дошлите фото» - появляется только после успешной отправки брифа */
.qz__tg{display:flex;flex-direction:column;gap:14px;padding:18px 20px;margin-top:6px;
        background:var(--accent-soft);border-radius:16px}
.qz__tg[hidden]{display:none}
.qz__tg .lede{font-size:15.5px;margin:0}
.btn--tg{align-self:flex-start;gap:8px}
.btn--tg svg{width:20px;height:20px;flex:none}
@media (max-width:520px){.btn--tg{align-self:stretch;justify-content:center}}

/* ═══════════════════════════════════════════════════════════════════════
   07.09.2026. Первый экран шире, шаги с кадрами, полка доказательств под
   реакциями и строка доплат под тарифами. Правки собраны блоком в конце:
   так видно, что добавлено поверх исходной вёрстки, и откат сводится
   к вырезанию блока.
   ═══════════════════════════════════════════════════════════════════════ */

/* --- первый экран: секция шире, прибавка уходит тексту -----------------
   На 1440+ по краям оставалось пустое поле, а колонка копирайта была
   так узка, что две кнопки первого экрана падали в столбик. Расширяем
   контейнер и одновременно двигаем пропорцию в пользу текста: кадр
   остаётся примерно той же ширины в пикселях, какой был. */
@media (min-width:1440px){
  .hero{max-width:1500px}
  .hero__grid{grid-template-columns:1fr 1fr}
  /* доли подобраны замером: при этой ширине секции кадр выходит той же
     ширины в пикселях, что и на старых 1320 - вся прибавка ушла тексту */
  .v-reel .hero__grid{grid-template-columns:.84fr 1.16fr}
  .hero .lede{max-width:46ch}
}
@media (min-width:1700px){
  .hero{max-width:1580px}
  .v-reel .hero__grid{grid-template-columns:.92fr 1.08fr}
}

/* --- плашка срока поверх нарезки ---------------------------------------
   Жёлтая, а не фирменная бордовая: поверх кадра она обязана читаться
   как стикер-обещание, а не как ещё одна кнопка. Верхний правый угол -
   единственный свободный: слева снизу тег работ, слева сверху полароид. */
.reel__ready{
  position:absolute;right:14px;top:14px;z-index:2;
  padding:8px 15px;border-radius:999px;
  background:#FFD43B;color:#12203D;
  font-family:var(--display);font-weight:700;font-size:13.5px;
  letter-spacing:.01em;white-space:nowrap;
  box-shadow:0 2px 12px rgba(11,23,51,.24);
}
@media (max-width:560px){
  .reel__ready{right:8px;top:8px;padding:5px 11px;font-size:11.5px}
}

/* --- шаги с кадрами ----------------------------------------------------
   Четыре колонки текста подряд пролистывали. Кадр показывает, что человек
   получит на этом шаге, - особенно на втором, где обещан бесплатный эскиз.
   Линейка над номером переехала на строку целиком: раньше она обрывалась
   по ширине цифры, а теперь рядом с ней стоит метка времени. */
.step__img{
  width:100%;aspect-ratio:4/3;object-fit:cover;
  border-radius:var(--r);background:var(--tint);
}
.step__head{
  display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 10px;
  border-top:2px solid var(--accent);padding-top:12px;
}
.step__n{border-top:none;padding-top:0}
.step__m{
  font-size:11.5px;letter-spacing:.04em;text-transform:uppercase;
  color:var(--ink-faint);text-align:right;margin-left:auto;
}
@media (max-width:700px){
  .step__m{font-size:11px;letter-spacing:.03em}
}

/* --- полка доказательств под реакциями ---------------------------------
   Только подтверждённые числа. Средней оценки и доли «без правок» тут нет
   намеренно: выдуманная цифра рядом с настоящими обесценивает обе. */
.pf{
  margin-top:clamp(26px,3.2vw,40px);
  display:flex;flex-wrap:wrap;align-items:center;
  /* 42px не хватало ровно трёх пикселей: четыре цифры и две кнопки в
     сумме 809 px при 974 px внутренней ширины, а зазоров пять */
  gap:clamp(16px,2.2vw,32px);
  padding:clamp(18px,2.4vw,26px) clamp(20px,3vw,32px);
  border-radius:var(--r);
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
}
.pf__i{display:flex;flex-direction:column;gap:3px}
.pf__k{
  font-family:var(--display);font-weight:800;line-height:1;
  font-size:clamp(24px,2.6vw,32px);color:var(--on-band);
}
.pf__v{font-size:13.5px;color:var(--on-band-soft)}
.pf__socs{display:flex;gap:10px;margin-left:auto;flex-wrap:wrap}
.pf__soc{padding-inline:20px}
@media (max-width:700px){
  .pf{gap:16px 26px}
  .pf__socs{margin-left:0;width:100%}
  .pf__soc{flex:1 1 auto;justify-content:center}
}

/* --- строка доплат под тарифами ----------------------------------------
   Подзаголовок блока обещает назвать, что двигает сумму. Без этой строки
   обещание висело в воздухе, и человек шёл спрашивать в чат ровно то,
   что мог прочитать. */
/* класс .addon, а не .chip: последний в проекте уже дважды занят - плашками
   брифа и карточками поводов, и мои строки наследовали их сетку */
.addons{
  display:flex;flex-wrap:wrap;justify-content:center;gap:10px;
  margin-top:clamp(20px,2.6vw,30px);
}
.addon{
  display:inline-flex;align-items:center;gap:9px;
  padding:9px 17px;border-radius:999px;
  background:var(--surface);border:1px solid var(--rule);
  font-size:14px;line-height:1.2;color:var(--ink-soft);white-space:nowrap;
}
.addon__v{font-family:var(--display);font-weight:700;color:var(--ink)}
@media (max-width:560px){
  .addons{gap:8px}
  .addon{padding:8px 13px;font-size:13px;gap:7px}
}

/* --- реакции: шапка в две колонки и подписи под кадрами (07.09.2026) ----
   Шапка секции по умолчанию центрирована и узкая. Здесь пояснение длинное,
   и в центральной колонке оно давало четыре строки под заголовком. В две
   колонки заголовок остаётся крупным якорем слева, а пояснение читается
   рядом, а не под ним. */
@media (min-width:900px){
  .section-head--split{
    display:grid;grid-template-columns:1fr 1fr;
    align-items:start;gap:clamp(28px,4vw,64px);
    max-width:none;text-align:left;
  }
  .section-head--split h2{margin:0}
  .section-head--split .lede{margin:0;max-width:46ch}
}

/* Подписи требуют, чтобы кадры перестали быть сплошным киноряд-полотном:
   иначе непонятно, к какому кадру относится текст. Просвет даём падингом
   самой карточки, а НЕ grid-gap: кольцо ленты перескакивает на
   scrollWidth/2, а при gap между 12 карточками их одиннадцать, и половина
   ряда перестаёт совпадать с периодом - шов начинает дёргаться. */
/* просвет слева, а не справа: лента стоит на scrollLeft=1, и с правым
   падингом первый кадр и его подпись упирались в край экрана. Падинг
   одинаковый у всех карточек, поэтому период кольца (scrollWidth/2)
   остаётся точным - в отличие от grid-gap, которых на 12 карточек 11. */
.reacts__row > *{padding-left:clamp(14px,1.7vw,26px)}
.reacts__row .frame{border-radius:var(--r)}
/* min-height у обеих строк и у самой подписи: ленту читают по горизонтали,
   и рваный низ у соседних карточек виден сильнее, чем лишний воздух.
   Строка имени держит высоту, даже когда имени нет. */
.rc{
  display:flex;flex-direction:column;gap:5px;
  padding:14px 0 0;min-height:86px;
}
.rc__name{
  font-size:14px;font-weight:600;line-height:1.35;
  color:var(--on-band);min-height:1.35em;
}
.rc__meta{font-size:13px;line-height:1.45;color:var(--on-band-soft)}
@media (max-width:699px){
  /* на телефоне лента живёт в своих полях .wrap - падинг там лишний */
  .reacts__row > *{padding-left:0}
  .rc{padding-top:10px;min-height:0}
}

/* метка «відео клієнта» поверх кадра реакции; кадр в ленте - position:relative
   через .frame, поэтому метка ложится в его угол, а не в угол карточки */
.reacts__row > *{position:relative}
.rc__badge{
  position:absolute;left:12px;top:12px;z-index:3;
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 11px;border-radius:999px;
  background:rgba(6,13,36,.62);color:var(--on-band);
  font-size:11px;letter-spacing:.05em;text-transform:uppercase;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.rc__badge::before{
  content:"";width:5px;height:5px;border-radius:50%;flex:none;
  background:#E0574F;
}
.rc__name{letter-spacing:-.01em}
@media (max-width:560px){
  .rc__badge{left:8px;top:8px;padding:4px 9px;font-size:10px}
}


/* ---------- бриф v2 (07.09.2026): четыре шага и контакт ----------
   Поля контакта и даты, подписи у двойных экранов, бейдж формата и
   состояние «отправлено». Собрано блоком, чтобы откат был вырезанием. */
.qz .fld--lbl label{display:block}
.fld input[type=text],.fld input[type=date],.fld input[type=email],.fld input[type=tel]{
  font-family:var(--body);font-size:17px;line-height:1.4;color:var(--ink);background:var(--surface);
  border:1.5px solid var(--rule);border-radius:10px;padding:12px 14px;min-height:50px;width:100%;
}
.fld input::placeholder{color:var(--ink-faint)}
.fld input:focus{outline:none;border-color:var(--accent)}
.fld__hint{font-size:13px;color:var(--ink-faint);line-height:1.4}
.qz .fld textarea.ta--short{min-height:56px}
.pick__badge{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.qz__priv{font-size:13px;color:var(--ink-faint);line-height:1.5}
.qz__priv a{color:inherit}
.qz--last .total{position:static}
.qz--sent .flds,.qz--sent .qz__sum,.qz--sent .total,.qz--sent .brief__send,.qz--sent .qz__priv,
.qz--sent .lede--c,.qz--sent .h--c{display:none}
.qz__tg h2{font-size:clamp(22px,3vw,30px)}
.qz__tg .lede:empty{display:none}


/* ---------- бриф v3 (07.09.2026): три экрана, шаги, кнопки ---------- */
.brief--v3{gap:clamp(18px,3vw,28px)}
.qz__steps{display:flex;gap:10px;list-style:none;margin:0;padding:0;max-width:64ch}
.qz__steps li{flex:1;display:flex;flex-direction:column;gap:7px;font-size:12px;font-weight:600;
              letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint)}
.qz__steps li b{display:block;height:4px;border-radius:100px;background:var(--rule);transition:background .25s ease}
.qz__steps li.is-done b,.qz__steps li.is-on b{background:var(--accent)}
.qz__steps li.is-on{color:var(--accent)}
.brief--v3 .qz{gap:14px}
.brief--v3 .qz .eyebrow{margin-bottom:-4px}
.brief--v3 .flds--one{display:flex;flex-direction:column;gap:18px}
.brief--v3 .qz .fld textarea{min-height:96px}
.brief--v3 .fld--date input[type=date]{max-width:260px}
.brief--v3 .qz__nav{display:flex;align-items:center;gap:10px;max-width:64ch;margin-top:6px}
.brief--v3 .qz__spacer{flex:1}
.brief--v3 .qz__nav .btn{min-width:150px;justify-content:center}
.brief--v3 .qz__nav[hidden]{display:none}
.brief--v3 .qz__sum{margin-top:4px}
.brief--v3 .qz__sum[hidden]{display:none}
.qz__sumh{display:block;font-family:var(--display);font-size:14px;margin-bottom:6px}
.brief--v3 .hero__note{max-width:64ch}
.brief--v3 .hero__note[hidden]{display:none}
.qz--sent .eyebrow.h--c{display:none}
@media (max-width:620px){
  .brief--v3 .qz__nav{position:sticky;bottom:0;z-index:20;padding:10px 0 12px;background:var(--bg);
                      box-shadow:0 -12px 16px -12px rgba(0,0,0,.12)}
  .brief--v3 .qz__nav .btn{min-width:0;flex:1}
  .brief--v3 .qz__steps li{font-size:11px}
}


/* ---------- бриф v3: расположение и мобильная версия ---------- */
.brief--v3 .qz h1{font-size:clamp(26px,4.4vw,40px);line-height:1.12}
.brief--v3 .qz h2{font-size:clamp(23px,3.2vw,32px)}
.brief--v3 .qz .lede{margin:0;max-width:60ch}
.brief--v3 .fld--lbl label{font-size:14.5px;margin-bottom:2px}
.brief--v3 .chips{gap:8px}
.brief--v3 .chip{padding:10px 15px;font-size:15px}
.brief--v3 .fld input[type=text]{max-width:520px}
.brief--v3 .vq{margin-top:6px}
.qz__tglink{margin:2px 0 0;font-size:14px}
.qz__tglink a{display:inline-flex;align-items:center;gap:7px;color:var(--ink-soft);text-decoration:none;
              border-bottom:1px solid transparent}
.qz__tglink a:hover{color:var(--accent);border-color:var(--accent)}
.qz__tglink svg{width:18px;height:18px;flex:none}
.qz__tgbtns{display:flex;flex-wrap:wrap;gap:10px}
.qz__tgbtns .btn{gap:8px}
.qz__tgbtns .btn[hidden]{display:none}
@media (max-width:620px){
  .brief{padding-block:22px 40px}
  .brief--v3 .qz h1{font-size:clamp(25px,7.2vw,30px)}
  .brief--v3 .qz h2{font-size:clamp(22px,6.4vw,27px)}
  .brief--v3 .qz .lede{font-size:15.5px}
  .brief--v3 .flds--one{gap:16px}
  .brief--v3 .chip{padding:10px 13px;font-size:14.5px;min-height:42px}
  .brief--v3 .fld input[type=text],.brief--v3 .fld input[type=date]{max-width:none;font-size:16px}
  .brief--v3 .qz .fld textarea{font-size:16px;min-height:88px}
  .brief--v3 .fld--date input[type=date]{max-width:none}
  .brief--v3 .qz__nav{padding-bottom:calc(12px + env(safe-area-inset-bottom))}
  .qz__tgbtns .btn{flex:1 1 100%;justify-content:center}
}

.brief--v3 .qz__nav.is-first #qzback{display:none}


/* ---------- бриф v3: чипы, кнопки, состояние «отправлено» ---------- */
.brief--v3 .chips{align-items:flex-start}
.brief--v3 .chips .chip,.brief--v3 .chips .chip:hover{
  min-height:44px;height:auto;padding:10px 15px;font-size:15px;line-height:1.2;
  border-radius:100px;width:auto;flex:0 0 auto;text-align:center;
}
.brief--v3 .chips .chip--on,.brief--v3 .chips .chip--on:hover{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.brief--v3 .qz--sent .flds--one,.brief--v3 .qz--sent .qz__sum,.brief--v3 .qz--sent .hero__note,
.brief--v3 .qz--sent .qz__priv,.brief--v3 .qz--sent .qz__tglink,.brief--v3 .qz--sent .lede--c,
.brief--v3 .qz--sent .h--c{display:none}
@media (max-width:620px){
  .brief--v3 .qz__nav #qzback{flex:0 0 auto;min-width:0;padding-inline:20px}
  .brief--v3 .qz__nav #qznext,.brief--v3 .qz__nav #send{flex:1 1 auto;min-width:0}
  .brief--v3 .chips .chip{padding:10px 13px;font-size:14.5px;min-height:42px}
}


/* ---------- бриф v3: «Інше», «Пропустити», кнопка Telegram ---------- */
.brief--v3 .chips .chip--other{border-style:dashed;color:var(--ink-soft)}
.brief--v3 .chips .chip--other.chip--on{border-style:solid}
.brief--v3 .fld .fld__other{margin-top:8px;max-width:520px}
.brief--v3 .fld .fld__other[hidden]{display:none}
.brief--v3 .qz__nav .qz__skip{min-width:0;border-color:transparent;color:var(--ink-faint);margin-left:0}
.brief--v3 .qz__nav .qz__skip:hover{color:var(--accent)}
.brief--v3 .qz__nav .qz__skip[hidden]{display:none}
.btn--tgblue,.btn--tgblue:hover{background:#229ED9;border-color:#229ED9;color:#fff;box-shadow:0 6px 0 #167CB0;gap:8px}
.btn--tgblue:hover{background:#1E90C8}
.btn--tgblue svg{width:20px;height:20px;flex:none;color:#fff}
.qz__tgask{display:flex;flex-direction:column;gap:8px;align-items:flex-start;margin-top:2px}
.qz__tgask-l{font-size:14px;color:var(--ink-soft)}
.brief--v3 .qz--sent .qz__tgask{display:none}
@media (max-width:620px){
  .brief--v3 .qz__nav .qz__skip{flex:0 0 auto;padding-inline:12px}
  .qz__tgask .btn{align-self:stretch;justify-content:center}
}

.brief--v3 .chips .chip--other.chip--on,.brief--v3 .chips .chip--other.chip--on:hover{color:var(--on-accent);border-style:solid;background:var(--accent)}


/* ---------- бриф v4: калькулятор (формат, герои, допы, сумма) ---------- */
.brief--v3 .picks--calc{display:grid;grid-template-columns:1fr;gap:12px;max-width:640px}
@media (min-width:640px){ .brief--v3 .picks--calc{grid-template-columns:1fr 1fr} }
.brief--v3 .pick--calc .pick__box{gap:6px;height:100%}
.pick__feats{display:flex;flex-direction:column;gap:3px;margin-top:6px}
.pick__li{font-size:13.5px;color:var(--ink-soft);line-height:1.35;padding-left:14px;position:relative}
.pick__li::before{content:"";position:absolute;left:0;top:.55em;width:6px;height:6px;border-radius:50%;background:var(--accent)}
.heroes{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.heroes .stepr{display:inline-flex;align-items:center;gap:6px}
.heroes .opt__n{width:52px;font-size:17px;font-weight:600}
.heroes__x{font-size:14.5px;font-weight:600;color:var(--accent)}
.brief--v3 .opts--calc{max-width:640px}
.brief--v3 .opt--calc .opt__p--inc{color:var(--ink-faint);font-weight:500}
.brief--v3 .total--calc{position:static;max-width:640px;margin-top:4px;flex-wrap:wrap}
.brief--v3 .total--calc .total__note{flex:1 1 100%;font-size:13px;color:var(--on-band-soft);line-height:1.45}
@media (max-width:620px){
  .brief--v3 .picks--calc{gap:10px}
  .brief--v3 .total--calc{padding:16px 18px}
}


/* бриф v4: строки допов - это label внутри .fld, возвращаем им flex */
.brief--v3 .qz .fld--lbl label.opt--calc{display:flex;align-items:center;gap:13px;font-size:16px;font-weight:400;
  color:var(--ink);margin:0;padding:13px 0;border-bottom:1px solid var(--rule);cursor:pointer}
.brief--v3 .qz .fld--lbl label.opt--calc:first-child{border-top:1px solid var(--rule)}
.brief--v3 .opt--calc input{appearance:none;-webkit-appearance:none;flex:0 0 22px;width:22px;height:22px;
  border:1.5px solid var(--rule);border-radius:6px;background:var(--surface);cursor:pointer;position:relative;margin:0}
.brief--v3 .opt--calc input:checked{border-color:var(--accent);background:var(--accent)}
.brief--v3 .opt--calc input:checked::after{content:"";position:absolute;left:7px;top:3px;width:5px;height:11px;
  border-right:2px solid var(--on-accent);border-bottom:2px solid var(--on-accent);transform:rotate(42deg)}
.brief--v3 .opt--calc .opt__l{flex:1;font-size:16px}
.brief--v3 .opt--calc .opt__p{font-weight:600;font-size:15px;color:var(--accent);white-space:nowrap}
.brief--v3 .opt--calc .opt__p--inc{color:var(--ink-faint);font-weight:500}
.brief--v3 .pick--calc{display:flex}
.brief--v3 .pick--calc .pick__box{flex:1;height:auto}
.brief--v3 .total--calc .total__v{margin-left:auto}

/* бриф v5: рекомендация в скобках у вопроса о длительности, бейджи тарифов */
.fld__rec{font-weight:500;color:var(--accent)}
.brief--v3 .pick__badge[hidden]{display:none}
.brief--v3 .pick--calc .pick__badge:empty{display:none}

/* бриф v5: тест одной колонкой по центру страницы */
.brief--v3{max-width:780px;margin-inline:auto;padding-inline:clamp(16px,3vw,28px)}
.brief--v3 .qz,.brief--v3 .qz__steps,.brief--v3 .qz__nav{max-width:none;width:100%}
.brief--v3 .qz .lede{max-width:none}
.brief--v3 .fld input[type=text]{max-width:none}
.brief--v3 .picks--calc,.brief--v3 .opts--calc,.brief--v3 .total--calc{max-width:none}
.brief--v3 .qz__sum{max-width:none}
.brief--v3 .picks--calc{align-items:stretch;justify-content:stretch}
.brief--v3 .picks--calc .pick--calc{display:flex;height:100%;max-width:none}
.brief--v3 .picks--calc .pick--calc .pick__box{flex:1 1 auto;height:auto}


/* ===== палитра: золото + синий + голубой ===== */
/* Кнопки золотые везде - и на светлом, и на тёмных полосах. Текст на золоте
   синий: белый на золоте не читается. */
.btn--primary,
.band--dark .btn--primary,.total .btn--primary{
  background:linear-gradient(180deg,#F7E0A6 0%,#E9C274 46%,#CE9A47 100%);
  color:#0F1C3A;
  box-shadow:0 3px 0 0 #A06B2A, 0 12px 24px -14px rgba(160,107,42,.65);
}
.btn--primary:hover,
.band--dark .btn--primary:hover,.total .btn--primary:hover{
  background:linear-gradient(180deg,#FAE8BA 0%,#EFCB83 46%,#D6A553 100%);
  box-shadow:0 5px 0 0 #A06B2A, 0 18px 30px -16px rgba(160,107,42,.7);
}
.btn--primary:active,
.band--dark .btn--primary:active,.total .btn--primary:active{box-shadow:0 0 0 0 #A06B2A}
/* Тёмные полосы - как фон логотипа: синий с мягким свечением в центре */
.band--dark{background:radial-gradient(120% 90% at 50% 30%,#1D3251 0%,#0B1733 58%,#07102A 100%)}


/* ===== золотые кнопки ===== */
/* Два слоя фона: сверху узкий блик, снизу сама золотая заливка. Блик стоит
   за краем кнопки и проходит по ней только у трёх кнопок заказа (ниже).
   Псевдоэлементы не берём: у круглой кнопки ::after уже занят невидимой
   зоной нажатия, а overflow:hidden её бы обрезал. */
.btn--primary,
.band--dark .btn--primary,.total .btn--primary,
.band--dark .btn--primary:hover,.total .btn--primary:hover{
  background-image:
    linear-gradient(115deg,transparent 38%,rgba(255,250,232,.75) 50%,transparent 62%),
    linear-gradient(180deg,#F7E0A6 0%,#E9C274 46%,#CE9A47 100%);
  background-size:300% 100%,100% 100%;
  background-repeat:no-repeat;
  /* заливка тянется под рамку: иначе градиент повторялся в 1px рамке
     и срезал кружок сверху и снизу тёмной полоской */
  background-origin:border-box;
  border-color:transparent;
  background-position:105% 0,0 0;
}
.btn--primary:hover,
.band--dark .btn--primary:hover,.total .btn--primary:hover{
  background-image:
    linear-gradient(115deg,transparent 38%,rgba(255,250,232,.75) 50%,transparent 62%),
    linear-gradient(180deg,#FAE8BA 0%,#EFCB83 46%,#D6A553 100%);
}
@keyframes mlShine{
  0%{background-position:105% 0,0 0}
  42%,100%{background-position:-5% 0,0 0}
}
/* Переливаются ровно три кнопки заказа: в первом экране, в тарифе «Історія»
   и в финальной форме. Остальное золото стоит спокойно (решение Артура). */
.hero__btns .btn--primary,.tier__cta.btn--primary,.lead__btn{animation:mlShine 4.8s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){
  .hero__btns .btn--primary,.tier__cta.btn--primary,.lead__btn{animation:none}
}

/* Кружок с самолётиком на телефоне: ровный золотой круг с лёгким объёмом */
@media (max-width:640px){
  .hdr .hdr__right .hdr__cta,
  .hdr .hdr__right .hdr__cta:hover{
    box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 2px 8px -2px rgba(160,107,42,.55);
  }
}

/* Цены золотые, без блика: сверху светлее, снизу глубже, как буквы
   в логотипе. Зачёркнутая старая цена остаётся серой. */
.tier__price > span,.total__v{
  background-image:linear-gradient(180deg,#D9AB52 0%,#B7832F 52%,#8C5E1B 100%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}
/* на тёмной плашке итога в брифе золото светлое */
.total__v{background-image:linear-gradient(180deg,#F7E0A6 0%,#E9C274 55%,#CE9A47 100%)}
.total__v small{-webkit-text-fill-color:var(--on-band-soft)}

/* ===== шапка тёмно-синяя, как фон логотипа ===== */
.hdr{
  background:color-mix(in srgb,var(--band) 95%,transparent);
  border-bottom:1px solid rgba(233,199,126,.18);
}
.hdr__nav a{color:var(--on-band-soft)}
.hdr__nav a:hover{color:var(--accent-on-band)}
.hdr .lang a{color:var(--on-band-soft)}
.hdr .lang a[aria-current="true"]{background:rgba(233,199,126,.14);color:var(--accent-on-band)}
.hdr .burger span{background:var(--on-band)}
.hdr a:focus-visible,.hdr button:focus-visible{outline-color:var(--accent-on-band)}
/* выпадающее меню на телефоне - того же синего, продолжение шапки */
.menu{background:var(--band);border-bottom-color:rgba(233,199,126,.18)}
.menu__nav a{color:var(--on-band);border-bottom-color:rgba(255,255,255,.09)}
.menu__nav a:active{color:var(--accent-on-band)}

/* ===== логотип по центру шапки ===== */
.hdr__in{height:76px}
.logo--img,.hdr__in .logo--img{display:block;line-height:0;padding:0;transform:none;border-radius:8px}
.logo--img img{display:block;height:56px;width:auto}
.hdr .logo--img{grid-column:2;grid-row:1;justify-self:center}
@media (min-width:1180px){
  /* меню уходит влево, логотип в середину, язык и кнопка справа */
  .hdr__nav{display:flex;grid-column:1;grid-row:1;justify-self:start;gap:24px}
  .hdr__right{grid-column:3;grid-row:1}
}
/* до 1180 меню в строку рядом с логотипом не помещается - бургер */
@media (max-width:1179px){
  .hdr__nav{display:none}
  .hdr__in{grid-template-columns:1fr auto 1fr;gap:10px}
  .hdr__right{display:contents}
  .burger{display:inline-flex;grid-column:1;grid-row:1;justify-self:start;margin:0 0 0 -10px;padding-inline:10px}
  .menu:not([hidden]){display:flex}
  .hdr__right .btn--sm{grid-column:3;grid-row:1;justify-self:end}
  .lang--hdr{display:none}
  .lang--menu{display:flex}
  .menu{max-height:calc(100dvh - 76px)}
}
@media (max-width:899px){
  .hdr__in{height:68px}
  .logo--img img{height:46px}
  .menu{max-height:calc(100dvh - 68px)}
}
@media (max-width:374px){
  .logo--img img{height:40px}
}

/* ===== плашка эскиза под первым экраном (вместо ряда обещаний) ===== */
.sketchbar{background:var(--tint);border-block:1px solid var(--rule);padding-block:22px}
.sketchbar__in{display:flex;align-items:center;justify-content:space-between;gap:18px 40px;flex-wrap:wrap}
.sketchbar__lead{display:flex;align-items:center;gap:18px;flex:1 1 440px;min-width:0}
/* золотая наклейка «0 ₴» чуть наискось - как стикер с ценой, а не как ещё одна кнопка */
.sketchbar__ico{
  flex:none;display:flex;align-items:center;justify-content:center;width:62px;height:48px;border-radius:9px;
  background:linear-gradient(180deg,#F7E0A6 0%,#E9C274 46%,#CE9A47 100%);
  color:#0F1C3A;transform:rotate(-6deg);box-shadow:0 3px 0 #A06B2A;
  font-family:var(--display);font-weight:800;font-size:21px;line-height:1;letter-spacing:-.01em;white-space:nowrap;
}
.sketchbar__t{font-family:var(--display);font-weight:800;font-size:clamp(17px,1.8vw,21px);line-height:1.25;letter-spacing:-.01em;color:var(--ink);text-wrap:balance}
.sketchbar__d{margin-top:4px;font-size:15px;line-height:1.45;color:var(--ink-soft);text-wrap:balance}
.sketchbar__steps{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:10px;flex:none}
.sketchbar__steps li{display:flex;align-items:center;gap:9px;font-size:16px;color:var(--ink);white-space:nowrap}
.sketchbar__steps li+li::before{content:"\2192";color:var(--ink-faint);font-size:17px;margin:0 4px 0 0}
.sketchbar__n{
  flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
  background:var(--accent);color:#fff;font-size:14px;font-weight:700;line-height:1;
}
@media (max-width:640px){
  .sketchbar{padding-block:18px 20px}
  .sketchbar__lead{flex-basis:100%;gap:14px;align-items:flex-start}
  .sketchbar__ico{width:52px;height:40px;margin-top:3px;font-size:18px}
  .sketchbar__t{font-size:17px}
  .sketchbar__d{font-size:14.5px}
  /* три шага в три колонки: номер сверху, подпись под ним, стрелка между */
  .sketchbar__steps{width:100%;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
  .sketchbar__steps li{position:relative;flex-direction:column;gap:6px;text-align:center;white-space:normal;font-size:14px;line-height:1.3}
  .sketchbar__steps li+li::before{position:absolute;left:-4px;top:4px;transform:translateX(-50%);margin:0}
}

/* ===== «Чому така ціна»: команда фильма, тёмная полоса после тарифов ===== */
.team__grid{list-style:none;margin:0;padding:0;display:grid;gap:14px;grid-template-columns:repeat(2,1fr)}
@media (min-width:900px){ .team__grid{grid-template-columns:repeat(3,1fr);gap:18px} }
.team__i{
  display:flex;flex-direction:column;gap:6px;padding:22px 22px 24px;border-radius:var(--r);
  background:rgba(255,255,255,.04);border:1px solid rgba(233,199,126,.2);
}
/* золотой контур вокруг иконки - та же нота, что у кнопок и логотипа */
.team__ico{
  display:grid;place-items:center;width:46px;height:46px;border-radius:50%;margin-bottom:8px;
  color:var(--accent-on-band);border:1.5px solid rgba(233,199,126,.55);
  background:radial-gradient(circle at 50% 35%,rgba(233,199,126,.16),transparent 70%);
}
.team__t{font-size:19px;line-height:1.25;color:var(--on-band)}
.team__d{font-size:15px;line-height:1.5;color:var(--on-band-soft)}
/* на телефоне две колонки: шесть карточек в столбик - это лишний экран прокрутки */
@media (max-width:559px){
  .team__grid{gap:10px}
  .team__i{padding:16px 14px 18px;gap:4px}
  .team__ico{width:40px;height:40px;margin-bottom:6px}
  .team__ico svg{width:21px;height:21px}
  .team__t{font-size:16px}
  .team__d{font-size:13.5px;line-height:1.45}
}


/* ═══════════════════════════════════════════════════════════════════════
   Редизайн 2 (решения Артура 11.09.2026): тёмный первый экран как логотип,
   ритм фонов, заголовки в одну строку, тарифы - золотые билеты
   ═══════════════════════════════════════════════════════════════════════ */

/* ===== шапка: меню в строку не должно переноситься ===== */
/* в русской версии пункты длиннее, и на 1180-1360 «Как это работает» падал
   на две строки. На этом отрезке шрифт на пиксель меньше и промежутки уже. */
.hdr__nav a{white-space:nowrap}
@media (min-width:1180px) and (max-width:1399px){ .hdr__nav{gap:14px} .hdr__nav a{font-size:14px} }

/* ===== Тёмный первый экран: продолжение шапки, заголовок как в логотипе ===== */
.hero{
  /* свечение гаснет точно к левому краю блока (радиус = отступ центра), дальше
     ровный синий: иначе на широком экране у края была видна полоса другого тона */
  background:radial-gradient(34% 64% at 34% 42%,rgba(38,64,104,.9) 0%,rgba(29,50,81,.45) 52%,rgba(11,23,51,0) 100%),#0B1733;
  box-shadow:0 0 0 100vmax #0B1733;clip-path:inset(0 -100vmax);color:var(--on-band);
}
.hero .eyebrow{color:var(--accent-on-band)}
.hero .h1__script{color:#F3EAD8}
.hero .h1__bold{
  text-wrap:balance;
  background:linear-gradient(180deg,#FCEBB9 0%,#EBC676 42%,#C8913C 78%,#E4B865 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 2px 10px rgba(233,194,116,.25));
}
/* короткая вторая строка («ваша родина») - крупно, как надпись в логотипе;
   длинные строки страниц поводов остаются обычного размера и переносятся */
.hero .h1--bs .h1__bold{font-size:clamp(36px,5.6vw,62px);letter-spacing:.01em}
.hero .lede{color:#B9C6D8}
.hero .hero__note,.hero .show__note{color:#8FA2BE}
.hero .btn--ghost{background:transparent;color:var(--on-band);border-color:rgba(255,255,255,.28);box-shadow:0 3px 0 0 rgba(255,255,255,.12)}
.hero .btn--ghost:hover{border-color:var(--accent-on-band);color:var(--accent-on-band)}
.hero .pola__arrow{color:var(--accent-on-band)}
.hero .hol{background:rgba(233,199,126,.14);color:var(--accent-on-band)}
.hero .hol::before{background:var(--accent-on-band)}
/* стикер срока был лимонным - единственный цвет вне палитры; кремовый читается
   как стикер и не спорит с золотыми кнопками */
.reel__ready{background:#FFF4DC;color:#0F1C3A;box-shadow:0 2px 12px rgba(0,0,0,.28)}
/* телефон: надпись над заголовком в две строки по центру */
@media (max-width:640px){
  .hero .eyebrow{display:block;max-width:19em;margin-inline:auto;text-align:center;text-wrap:balance}
}

/* ===== Ритм фонов: тёмное только в трёх опорных местах (экран, цена, форма) ===== */
#reactions{background:var(--bg);color:var(--ink)}
#reactions .lede,#reactions .rc__meta,#reactions .pf__v{color:var(--ink-soft)}
#reactions .rc__name{color:var(--ink)}
#reactions .frame{background:var(--tint);border-color:var(--rule)}
#reactions .pf{background:var(--surface);border:1px solid var(--rule);box-shadow:var(--shadow)}
#reactions .pf__k{color:var(--accent)}
/* соцсети тихими ссылками: кнопки уводили с сайта посреди воронки */
#reactions .pf__soc{background:none;border:0;box-shadow:none;color:var(--ink-soft);padding:8px 6px;font-weight:600;text-decoration:underline;text-underline-offset:3px}
#how{background:var(--tint)}
#examples{background:var(--bg)}
#examples + #price{background:var(--tint)}

/* №5: короткая вторая строка («ВАША РОДИНА») в одну строку и на телефоне, и на компьютере */
.hero .h1--bs .h1__bold{white-space:nowrap;font-size:clamp(30px,calc((100vw - 48px) / 9.2),46px)}
@media (min-width:900px){ .hero .h1--bs .h1__bold{font-size:clamp(30px,3.6vw,60px)} }
/* компьютер: «Мультфільм, де головні герої» в одну строку - размер от ширины колонки текста */
@media (min-width:900px){
  .hero__copy{container-type:inline-size}
  .h1--sl .h1__script{white-space:nowrap;font-size:3.1vw;font-size:min(84px,calc(100cqw / 9.9))}
  :lang(ru) .h1--sl .h1__script{font-size:2.9vw;font-size:min(84px,calc(100cqw / 10.8))}
}

/* ===== тарифы: билеты в кино («Золотий квиток») ===== */
/* ===== общий каркас билета: шапка-корешок, линия отрыва с вырезами ===== */
#price{--sec:var(--bg)}
#examples + #price{--sec:var(--tint)}
.tier{--pad:28px;border-radius:16px;padding:0 var(--pad) 30px;overflow:visible}
@media (max-width:559px){ .tier{--pad:20px} }
/* шапка билета */
.tier::before{content:"MILODIA  ·  КВИТОК";display:block;margin:0 calc(-1 * var(--pad)) 22px;padding:13px var(--pad) 12px;
  border-radius:15px 15px 0 0;font:700 10.5px/1 var(--body);letter-spacing:.3em;text-align:center}
:lang(ru) .tier::before{content:"MILODIA  ·  БИЛЕТ"}
/* линия отрыва перед ценой + полукруглые вырезы по краям */
.tier__price{position:relative;margin:18px calc(-1 * var(--pad)) 2px;padding:22px var(--pad) 6px;border-top:2px dashed}
.tier__price::before,.tier__price::after{content:"";position:absolute;top:-14px;width:26px;height:26px;border-radius:50%;background:var(--sec);border:1.5px solid}
.tier__price::before{left:-14px;clip-path:inset(0 0 0 50%)}
.tier__price::after{right:-14px;clip-path:inset(0 50% 0 0)}
.tier__badge{z-index:2}
.tier__name{font-size:26px}
/* K1 «Золотий квиток»: «Історія» - билет из золотой фольги, «Момент» - слоновая кость с синей шапкой */
.tier{background:linear-gradient(180deg,#FFFDF8,#FBF5EA);border:1.5px solid #E3D2AE;color:var(--ink);
  box-shadow:0 26px 50px -30px rgba(15,28,58,.45),0 2px 6px rgba(15,28,58,.06)}
.tier::before{background:#0F1C3A;color:#EBC676}
.tier__price{border-top-color:#D9C49A}
.tier__price::before,.tier__price::after{border-color:#E3D2AE}
.tier .incl svg{color:#B7832F}
.tier__incl li,.tier .incl li:first-child{border-color:rgba(183,131,47,.22)}
.tier:not(.tier--pop) .tier__cta{border:1.5px solid #0F1C3A;color:#0F1C3A}
.tier--pop{background:linear-gradient(160deg,#FFF7E2 0%,#F6DEA4 38%,#FBEBC4 58%,#EBC676 100%);border-color:#C8923E;
  box-shadow:0 34px 64px -30px rgba(140,94,27,.8),inset 0 0 0 5px rgba(255,255,255,.35),inset 0 0 0 6px rgba(160,107,42,.35)}
@media (min-width:840px){ .tier--pop{transform:translateY(-14px) rotate(-.8deg)} }
.tier--pop::before{background:linear-gradient(180deg,#14264A,#0B1733);color:#F3D58E}
.tier--pop .tier__price{border-top-color:rgba(120,82,24,.5)}
.tier--pop .tier__price::before,.tier--pop .tier__price::after{border-color:#C8923E}
.tier--pop .tier__price > span{background-image:none;-webkit-text-fill-color:#0F1C3A;color:#0F1C3A}
.tier--pop .tier__len,.tier--pop .tier__for{color:#6B5530}
.tier--pop .tier__was{color:#8C7650}
.tier--pop .tier__incl li,.tier--pop .incl li:first-child{border-color:rgba(120,82,24,.22)}
.tier--pop .incl svg{color:#0F1C3A}
.tier--pop .tier__badge{top:52px;right:20px;left:auto;background:transparent;color:#0F1C3A;border:1.5px solid #0F1C3A;border-radius:6px;
  font-weight:800;letter-spacing:.1em;text-transform:uppercase;font-size:10px;padding:5px 9px;transform:rotate(-8deg);box-shadow:none;opacity:.85}
.tier--pop .tier__cta.btn--primary{background-image:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.28) 50%,transparent 62%),linear-gradient(180deg,#1D3251,#0B1733);
  color:#F3D58E;box-shadow:0 3px 0 0 #050B1C,0 12px 24px -14px rgba(11,23,51,.8)}
.addon{background:#FFFDF8;border:1px dashed #D9C49A}
.addon__v{color:#9C6B22}

/* ===== правки 11.09.2026, вечер ===== */
/* заголовок реакций в две строки: колонке заголовка даём больше места */
@media (min-width:900px){
  .reacts .section-head--split{grid-template-columns:minmax(0,1.7fr) minmax(240px,1fr)}
  .reacts .section-head--split h2{text-wrap:balance}
}
/* метка «Відео клієнта» - на самом кадре: у карточки слева просвет, и метка
   на left:12px висела наполовину мимо видео */
@media (min-width:700px){ .rc__badge{left:calc(clamp(14px,1.7vw,26px) + 12px)} }
/* порядок блоков: ... цена - «Чому така ціна» - статьи блога - форма - вопросы.
   Светлые блоки между тёмными - голубые, вопросы после формы - тоже голубые,
   чтобы не сливаться с подвалом */
#ideas{background:var(--tint)}
#examples + #price + #ideas{background:var(--bg)}
#faq{background:var(--tint)}

/* ===== правки 11.09.2026, ночь ===== */
/* лента реакций на телефоне: просвет между кадрами. Отступом карточки, а не
   gap сетки - так период кольца (scrollWidth/2) остаётся точным */
@media (max-width:699px){
  .reacts__row > *{padding-left:12px}
  .rc__badge{left:22px}
}
@media (max-width:560px){ .rc__badge{left:20px} }
/* шаг 1 - настоящее фото (портретное): держим лица в кадре при обрезке */
.step__img--photo{object-position:50% 30%}
/* мессенджеры в форме заявки - в один ряд на телефоне */
@media (max-width:700px){
  .lead .mchips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
  .lead .mchips .mchip span{width:100%;justify-content:center;padding:10px 6px;font-size:14px;gap:6px;white-space:nowrap}
}

/* плашка эскиза на телефоне - «Картка» (решение Артура 11.09.2026, ночь) */
/* цифры под реакциями на телефоне - «Темна» (решение Артура) */
#reactions .pf__soc[href*="instagram"]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='3' y='3' width='18' height='18' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Ccircle cx='17.5' cy='6.5' r='1' fill='black' stroke='none'/%3E%3C/svg%3E")}
#reactions .pf__soc[href*="tiktok"]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15.5 3c.3 2.3 1.7 3.9 4 4.1v3.2c-1.5.1-2.8-.4-4-1.2v5.8c0 3.3-2.5 5.6-5.6 5.6S4.3 18 4.3 15c0-3.3 2.9-5.6 6.3-5.1v3.3c-1.5-.4-3 .6-3 2 0 1.2.9 2.1 2.2 2.1 1.4 0 2.3-.9 2.3-2.5V3h3.4z'/%3E%3C/svg%3E")}
/* A «Картка з лінією кроків»: белая карточка по центру, наклейка сверху, шаги связаны пунктиром */
@media (max-width:640px){
  .sketchbar{padding-block:26px}
  .sketchbar__in{display:block;background:#fff;border:1px solid #E6D3A8;border-radius:20px;padding:30px 18px 22px;text-align:center;
    box-shadow:0 18px 40px -26px rgba(15,28,58,.45);position:relative;margin-top:14px}
  .sketchbar__lead{display:block}
  .sketchbar__ico{position:absolute;top:-20px;left:50%;transform:translateX(-50%) rotate(-5deg);width:60px;height:42px;margin:0;font-size:19px}
  .sketchbar__t{font-size:19px;margin-top:6px}
  .sketchbar__d{font-size:14.5px;margin:6px auto 0;max-width:30ch}
  .sketchbar__steps{position:relative;margin-top:22px;display:grid;grid-template-columns:repeat(3,1fr);gap:0}
  .sketchbar__steps::before{content:"";position:absolute;top:15px;left:16.6%;right:16.6%;border-top:2px dotted #C8923E}
  .sketchbar__steps li{position:relative;flex-direction:column;gap:8px;font-size:13.5px;font-weight:600;white-space:normal;line-height:1.25}
  .sketchbar__steps li+li::before{display:none}
  .sketchbar__n{position:relative;z-index:1;width:32px;height:32px;background:#0F1C3A;color:#EBC676;box-shadow:0 0 0 5px #fff}
}

@media (max-width:640px){ .sketchbar__in{margin-inline:16px;width:auto} }
/* B «Золоті цифри на темному»: тёмная карточка, цифры золотом, соцсети - две кнопки-пилюли в ряд */
@media (max-width:700px){
  #reactions .pf{display:grid;grid-template-columns:repeat(3,1fr);gap:0;padding:22px 8px 18px;text-align:center;
    background:radial-gradient(120% 90% at 50% 0%,#1D3251 0%,#0B1733 70%);border:1px solid rgba(214,165,83,.5);box-shadow:0 22px 44px -26px rgba(11,23,51,.7)}
  #reactions .pf__i{padding:0 6px;gap:5px}
  #reactions .pf__i + .pf__i{border-left:1px solid rgba(233,194,116,.22)}
  #reactions .pf__k{font-size:27px;background:linear-gradient(180deg,#FCEBB9 0%,#EBC676 45%,#C8913C 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
  #reactions .pf__v{font-size:11.5px;line-height:1.3;color:#A9B9D0}
  #reactions .pf__socs{grid-column:1 / -1;display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:18px 6px 0;width:auto}
  #reactions .pf__soc{text-decoration:none;justify-content:center;gap:8px;color:#EEF4FB;border:1px solid rgba(255,255,255,.25);border-radius:999px;padding:10px 12px;font-size:14px;display:inline-flex;align-items:center}
  #reactions .pf__soc::before{content:"";width:18px;height:18px;background:#EBC676;-webkit-mask:var(--ico) no-repeat center/contain;mask:var(--ico) no-repeat center/contain}
}

/* ═══════════════════════════════════════════════════════════════════════
   Остальные страницы в новом стиле (11.09.2026): блог, статьи, бриф,
   контакты, оферта, 404, подвал
   ═══════════════════════════════════════════════════════════════════════ */

/* ---- тёмная шапка страницы: тот же синий и та же подсветка, что у первого экрана ---- */
.pband{
  background:radial-gradient(40% 90% at 30% 35%,rgba(38,64,104,.85) 0%,rgba(29,50,81,.4) 55%,rgba(11,23,51,0) 100%),#0B1733;
  color:var(--on-band);border-bottom:1px solid rgba(233,194,116,.22);
}
.pband__in{max-width:760px;padding-block:clamp(38px,6vw,72px) clamp(34px,5vw,60px)}
.pband__in--wide{max-width:var(--wrap)}
.pband__in--c{text-align:center}
.pband .eyebrow{color:var(--accent-on-band)}
.pband h1{color:#fff;font-size:clamp(30px,4.6vw,50px);line-height:1.1;margin-top:10px;text-wrap:balance}
.pband__lead{margin-top:14px;font-size:clamp(16px,1.6vw,19px);line-height:1.55;color:#B9C6D8;max-width:60ch}
.pband__in--c .pband__lead{margin-inline:auto}
.pband .art__crumbs{margin-bottom:6px;color:#8FA2BE}
.pband .art__crumbs a{color:#EBC676}
.pband .art__crumbs a:hover{color:#FAE8BA}
.pband .art__updated{margin:14px 0 0;color:#8FA2BE}
.pband + .art{padding-top:clamp(28px,4vw,46px)}
.pband + .page-narrow{padding-top:clamp(30px,4vw,48px)}

/* ---- статьи и юридические страницы: золотая черта над подзаголовками ---- */
.art h2{position:relative;padding-top:16px}
.art h2::before{content:"";position:absolute;left:0;top:0;width:44px;height:3px;border-radius:3px;
  background:linear-gradient(90deg,#CE9A47,#F2D48E 55%,#CE9A47)}
.art__item{border:1px solid var(--rule);border-left:3px solid #D6A553;border-radius:14px;box-shadow:0 14px 34px -28px rgba(15,28,58,.5)}
.art__n{background:#0F1C3A;color:#EBC676}
.art__price{color:#9C6B22}
.art__go{color:#9C6B22}
.art__ping{border-left-color:#D6A553}

/* ---- блог: карточки на всю ширину, три колонки ---- */
.art--index{max-width:var(--wrap)}
.art__index{display:grid;gap:18px;grid-template-columns:1fr;margin-top:0}
@media (min-width:640px){ .art__index{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1000px){ .art__index{grid-template-columns:repeat(3,1fr);gap:22px} }
.art__index .card--link{background:#fff;border:1px solid var(--rule);border-radius:18px;padding:24px 22px 22px;
  box-shadow:0 14px 34px -30px rgba(15,28,58,.5);transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease}
.art__index .card--link:hover{border-color:#D6A553;transform:translateY(-3px);box-shadow:0 22px 44px -28px rgba(15,28,58,.55)}
.art__index .card--link h3{font-size:clamp(18px,1.6vw,20px);line-height:1.28}

/* ---- бриф: белая карточка поверх тёмной полосы, прогресс золотой ---- */
.pband--deco{height:clamp(150px,17vw,210px)}
main.brief--qz{position:relative;z-index:1;max-width:820px;margin-top:calc(-1 * clamp(110px,13vw,160px));margin-bottom:clamp(40px,6vw,72px);
  background:#fff;border:1px solid var(--rule);border-radius:24px;box-shadow:0 34px 70px -40px rgba(11,23,51,.55);
  padding:clamp(24px,3.4vw,40px) clamp(18px,3.6vw,44px) clamp(28px,4vw,44px);min-height:0}
@media (max-width:640px){ main.brief--qz{margin-inline:12px;width:auto;border-radius:20px} }
.qz__steps li.is-done b,.qz__steps li.is-on b{background:linear-gradient(90deg,#CE9A47,#F2D48E 60%,#E9C274)}
.qz__steps li.is-on{color:#9C6B22}

/* ---- подвал: тёмный, с золотым логотипом ---- */
.ftr{background:#081229;border-top:1px solid rgba(233,194,116,.28);color:var(--on-band)}
.ftr__home{display:inline-block;line-height:0}
.ftr__logo{height:44px;width:auto;display:block}
.ftr__tag{color:#A9B9D0}
.ftr__links a{color:#B9C6D8}
.ftr__links a:hover{color:#EBC676}
.ftr__rights{color:#8FA2BE;border-top-color:rgba(255,255,255,.08)}

/* ---- 404: фирменный тёмный экран ---- */
body.nf{min-height:100vh;margin:0;display:grid;place-items:center;text-align:center;color:var(--on-band);
  background:radial-gradient(60% 60% at 50% 40%,rgba(38,64,104,.9) 0%,rgba(11,23,51,0) 100%),#0B1733}
.nf__in{padding:40px 22px}
.nf__logo{height:64px;width:auto;margin:0 auto 30px;display:block}
.nf__code{font-family:var(--display);font-weight:800;font-size:clamp(64px,14vw,120px);line-height:1;letter-spacing:.02em;
  background:linear-gradient(180deg,#FCEBB9 0%,#EBC676 45%,#C8913C 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.nf h1{color:#fff;font-size:clamp(24px,4vw,34px);margin-top:10px}
.nf__lead{margin-top:10px;color:#B9C6D8}
.nf__btns{margin-top:28px;display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.nf .btn--ghost{background:transparent;color:var(--on-band);border-color:rgba(255,255,255,.3);box-shadow:0 3px 0 0 rgba(255,255,255,.1)}