/* ─────────────────────────────────────────────────────────────
   Значки плей AI — единый набор для всего сайта.
   Рисовано под стиль главной: контур 24×24, обводка 1.7,
   скруглённые концы, без заливки.

   Значки вставляются масками, поэтому цвет берётся из CSS —
   можно красить градиентом, можно приглушать. Разметку страниц
   трогать не нужно: правила цепляются к тем классам и ссылкам,
   которые на сайте уже есть.
   ───────────────────────────────────────────────────────────── */

:root{
  --zn-ember:#FF6A1A;
  --zn-amber:#FFB31A;
  --zn-grad:linear-gradient(135deg,#FF4A2A,#FF7A2A 45%,#FFC24A);
}

/* базовая болванка значка */
[class*="zn-"]::before,
.facts li::before,
.dir::before,
.go::after,
.btn::after{
  content:"";
  display:inline-block;
  background:var(--zn-grad);
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center;  mask-position:center;
  -webkit-mask-size:contain;     mask-size:contain;
  flex:none;
}

/* ── сами рисунки ─────────────────────────────────────────── */

/* геймпад — игры и VR */
.zn-igra::before,.dir[href="igry.html"]::before{-webkit-mask-image:var(--zn-igra);mask-image:var(--zn-igra)}
/* окно браузера с лупой — сайты и поиск */
.zn-sayt::before,.dir[href="sayty.html"]::before{-webkit-mask-image:var(--zn-sayt);mask-image:var(--zn-sayt)}
/* экран на стойке — витрины и залы */
.zn-ekran::before,.dir[href="video.html"]::before{-webkit-mask-image:var(--zn-ekran);mask-image:var(--zn-ekran)}
/* телефон — приложения */
.zn-prilozhenie::before,.dir[href="prilozheniya.html"]::before{-webkit-mask-image:var(--zn-prilozhenie);mask-image:var(--zn-prilozhenie)}
/* рупор — SMM и продвижение */
.zn-smm::before,.dir[href="smm.html"]::before{-webkit-mask-image:var(--zn-smm);mask-image:var(--zn-smm)}
/* фигурные скобки — разработка */
.zn-kod::before,.dir[href="razrabotka.html"]::before{-webkit-mask-image:var(--zn-kod);mask-image:var(--zn-kod)}
/* собеседник — ИИ-агенты */
.zn-agent::before,.dir[href="agenty.html"]::before{-webkit-mask-image:var(--zn-agent);mask-image:var(--zn-agent)}
/* папка — работы */
.zn-raboty::before,.dir[href="raboty.html"]::before{-webkit-mask-image:var(--zn-raboty);mask-image:var(--zn-raboty)}
/* искра-галочка — пункты списка */
.zn-galka::before,.facts li::before{-webkit-mask-image:var(--zn-galka);mask-image:var(--zn-galka)}
/* стрелка — кнопки и «подробнее» */
.zn-strelka::before,.go::after,.btn::after{-webkit-mask-image:var(--zn-strelka);mask-image:var(--zn-strelka)}
/* микрофон */
.zn-mikrofon::before{-webkit-mask-image:var(--zn-mikrofon);mask-image:var(--zn-mikrofon)}
/* конверт — заявка */
.zn-zayavka::before{-webkit-mask-image:var(--zn-zayavka);mask-image:var(--zn-zayavka)}
/* часы — сроки */
.zn-chasy::before{-webkit-mask-image:var(--zn-chasy);mask-image:var(--zn-chasy)}
/* щит — границы и защита */
.zn-shchit::before{-webkit-mask-image:var(--zn-shchit);mask-image:var(--zn-shchit)}

:root{
  --zn-igra:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='7.5' width='20' height='10' rx='4.5'/%3E%3Cline x1='7' y1='10.5' x2='7' y2='14.5'/%3E%3Cline x1='5' y1='12.5' x2='9' y2='12.5'/%3E%3Ccircle cx='16' cy='11.4' r='1.05'/%3E%3Ccircle cx='18.4' cy='13.8' r='1.05'/%3E%3C/svg%3E");

  --zn-sayt:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='3.5' width='19' height='15' rx='2.5'/%3E%3Cline x1='2.5' y1='8' x2='21.5' y2='8'/%3E%3Ccircle cx='5.4' cy='5.8' r='.55' fill='%23000' stroke='none'/%3E%3Ccircle cx='7.6' cy='5.8' r='.55' fill='%23000' stroke='none'/%3E%3Ccircle cx='11.5' cy='12.8' r='3.1'/%3E%3Cline x1='13.9' y1='15.2' x2='16.5' y2='17.8'/%3E%3C/svg%3E");

  --zn-ekran:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='12.5' rx='2'/%3E%3Cline x1='12' y1='15.5' x2='12' y2='19'/%3E%3Cline x1='8' y1='21' x2='16' y2='21'/%3E%3Cpath d='M9.4 6.6 L15 9.2 L9.4 11.8 Z'/%3E%3C/svg%3E");

  --zn-prilozhenie:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='2.5' width='12' height='19' rx='2.6'/%3E%3Cline x1='10.4' y1='5.2' x2='13.6' y2='5.2'/%3E%3Cline x1='10.6' y1='18.6' x2='13.4' y2='18.6'/%3E%3C/svg%3E");

  --zn-smm:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9.5 H7.5 L14.5 5 V19 L7.5 14.5 H4 Z'/%3E%3Cpath d='M17.6 9.4 C18.9 10.6 18.9 13.4 17.6 14.6'/%3E%3Cpath d='M19.9 7 C22.2 9.2 22.2 14.8 19.9 17'/%3E%3C/svg%3E");

  --zn-kod:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 3.5 C6.4 3.5 6.4 6.4 6.4 8.2 C6.4 10.2 4.6 10.3 3.4 10.3 M3.4 13.7 C4.6 13.7 6.4 13.8 6.4 15.8 C6.4 17.6 6.4 20.5 9 20.5'/%3E%3Cpath d='M15 3.5 C17.6 3.5 17.6 6.4 17.6 8.2 C17.6 10.2 19.4 10.3 20.6 10.3 M20.6 13.7 C19.4 13.7 17.6 13.8 17.6 15.8 C17.6 17.6 17.6 20.5 15 20.5'/%3E%3C/svg%3E");

  --zn-agent:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='7' width='16' height='11.5' rx='3.4'/%3E%3Cline x1='12' y1='3.2' x2='12' y2='7'/%3E%3Ccircle cx='12' cy='2.6' r='1.1'/%3E%3Ccircle cx='9' cy='12' r='1.15' fill='%23000' stroke='none'/%3E%3Ccircle cx='15' cy='12' r='1.15' fill='%23000' stroke='none'/%3E%3Cpath d='M9.6 15.4 C10.8 16.3 13.2 16.3 14.4 15.4'/%3E%3C/svg%3E");

  --zn-raboty:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='6.5' width='19' height='13' rx='2.4'/%3E%3Cpath d='M8.8 6.5 V5 C8.8 4 9.4 3.5 10.3 3.5 H13.7 C14.6 3.5 15.2 4 15.2 5 V6.5'/%3E%3Cline x1='2.5' y1='12' x2='21.5' y2='12'/%3E%3Cline x1='10.6' y1='12' x2='13.4' y2='12' stroke-width='2.6'/%3E%3C/svg%3E");

  --zn-galka:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4.5,12.6 9.6,17.5 19.5,6.5'/%3E%3C/svg%3E");

  --zn-strelka:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='4.5' y1='12' x2='18' y2='12'/%3E%3Cpolyline points='12.6,6.6 18,12 12.6,17.4'/%3E%3C/svg%3E");

  --zn-mikrofon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='2.6' width='6' height='11' rx='3'/%3E%3Cpath d='M5.6 11.4 C5.6 15 8.4 17.4 12 17.4 C15.6 17.4 18.4 15 18.4 11.4'/%3E%3Cline x1='12' y1='17.4' x2='12' y2='21'/%3E%3C/svg%3E");

  --zn-zayavka:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='5' width='19' height='14' rx='2.4'/%3E%3Cpolyline points='3.4,6.6 12,13 20.6,6.6'/%3E%3C/svg%3E");

  --zn-chasy:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.7'/%3E%3Cpolyline points='12,6.8 12,12 15.8,14'/%3E%3C/svg%3E");

  --zn-shchit:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.8 L19.5 5.8 V11.4 C19.5 16.1 16.3 19.6 12 21.2 C7.7 19.6 4.5 16.1 4.5 11.4 V5.8 Z'/%3E%3Cpolyline points='8.9,11.9 11.2,14.2 15.4,9.6'/%3E%3C/svg%3E");
}

/* ── как значки живут в вёрстке ───────────────────────────── */

/* пункты списка: галочка вместо точки */
.facts li{position:relative;padding-left:34px;list-style:none}
.facts li::before{position:absolute;left:4px;top:.32em;width:18px;height:18px}

/* карточки направлений: значок над заголовком */
.dir{position:relative}
.dir::before{width:34px;height:34px;margin-bottom:14px}
.dir h3{margin-top:0}

/* «Подробнее» — стрелка, которая подаётся вперёд при наведении */
.go{display:inline-flex;align-items:center;gap:8px}
.go::after{width:17px;height:17px;transition:transform .2s}
.dir:hover .go::after{transform:translateX(4px)}

/* кнопки: стрелка только у главной, у призрачной — без */
.btn{display:inline-flex;align-items:center;gap:9px}
.btn::after{width:17px;height:17px;background:currentColor;transition:transform .2s}
.btn:hover::after{transform:translateX(3px)}
.btn.ghost::after,.btn.head-cta::after{display:none}

/* шаги внедрения: номер остаётся первой колонкой сетки —
   меняем только его вид, не положение (иначе колонка пустеет
   и текст шага сжимается в столбик по одному слову) */
.steps .step::before{
  border-radius:11px;
  background:var(--zn-grad);
  color:#160A02;
  font-family:Unbounded,Onest,sans-serif;
  font-weight:700;
}

/* кнопки помощника */
.mic{display:inline-flex;align-items:center;gap:8px}
.mic .dot{
  width:15px;height:15px;border-radius:0;background:currentColor;
  -webkit-mask-image:var(--zn-mikrofon);mask-image:var(--zn-mikrofon);
  -webkit-mask-size:contain;mask-size:contain;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  animation:none;
}

@media (max-width:760px){
  .dir::before{width:26px;height:26px;margin-bottom:9px}
}

@media (prefers-reduced-motion:reduce){
  .btn::after,.go::after{transition:none}
}