/* Первый экран страниц услуг — в одном стиле с сервисами.
 *
 * Класс-модификатор hz-usluga-hero вешается на существующую секцию
 * (.audit-hero, .dor-hero, .education_main) и перекрашивает её в синий,
 * не трогая саму вёрстку: у каждой услуги она своя.
 *
 * ⚠️ Белый цвет заголовка задаётся ТОЛЬКО внутри этого класса.
 * Раньше правило было привязано к .audit-hero, и страницы услуг,
 * где фон остался светлым, получили белый заголовок на белом.
 */

.hz-usluga-hero {
	background: linear-gradient(140deg, #003d7a 0%, #005DAC 55%, #0071d6 100%) !important;
	position: relative;
	overflow: hidden;
	color: #fff;
}

/* Размытые круги — как на страницах сервисов, иначе синий блок плоский */
.hz-usluga-hero::before,
.hz-usluga-hero::after {
	content: "";
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
}
.hz-usluga-hero::before {
	top: -100px;
	right: -100px;
	width: 460px;
	height: 460px;
	background: rgba(255, 255, 255, .04);
}
.hz-usluga-hero::after {
	bottom: 60px;
	left: -140px;
	width: 320px;
	height: 320px;
	background: rgba(255, 255, 255, .03);
}
.hz-usluga-hero > .container {
	position: relative;
	z-index: 1;
}

/* Заголовок — белый. Тема красит h1 синим через -webkit-text-fill-color
   с !important, поэтому перебиваем тем же способом. */
.hz-usluga-hero h1,
.hz-usluga-hero h1 *,
.hz-usluga-hero .title,
.hz-usluga-hero .title * {
	color: #fff !important;
	-webkit-text-fill-color: #fff !important;
}

/* Подзаголовки всех трёх вёрсток */
.hz-usluga-hero .audit-hero__subtitle,
.hz-usluga-hero .dor-hero__subtitle,
.hz-usluga-hero .education_main-text,
.hz-usluga-hero .education_main-text p {
	color: rgba(255, 255, 255, .8) !important;
}
.hz-usluga-hero .audit-hero__subtitle span,
.hz-usluga-hero .dor-hero__subtitle span {
	color: #fff !important;
	-webkit-text-fill-color: #fff !important;
}

/* Плашки с преимуществами: были белые карточки на светлом,
   стали полупрозрачные на синем */
.hz-usluga-hero .audit-hero__badge,
.hz-usluga-hero .dor-hero__badge {
	background: rgba(255, 255, 255, .12) !important;
	border: 1px solid rgba(255, 255, 255, .24) !important;
	color: rgba(255, 255, 255, .92) !important;
	box-shadow: none !important;
}
.hz-usluga-hero .audit-hero__badge span,
.hz-usluga-hero .dor-hero__badge span {
	color: rgba(255, 255, 255, .92) !important;
	-webkit-text-fill-color: rgba(255, 255, 255, .92) !important;
}
.hz-usluga-hero .audit-hero__badge-number,
.hz-usluga-hero .dor-hero__badge-number {
	color: #fff !important;
	-webkit-text-fill-color: #fff !important;
	font-weight: 800;
}
/* Галочки внутри плашек нарисованы синим — на синем фоне пропадали */
.hz-usluga-hero .audit-hero__badge svg path,
.hz-usluga-hero .dor-hero__badge svg path {
	stroke: #fff !important;
}

/* Кнопка: была синяя на светлом, стала белая на синем */
.hz-usluga-hero .audit-hero__cta,
.hz-usluga-hero .dor-hero__cta,
.hz-usluga-hero .main_btn {
	background: #fff !important;
	color: #004A8A !important;
	-webkit-text-fill-color: #004A8A !important;
	border-color: #fff !important;
	box-shadow: 0 10px 28px rgba(0, 0, 0, .18) !important;
}
.hz-usluga-hero .audit-hero__cta:hover,
.hz-usluga-hero .dor-hero__cta:hover,
.hz-usluga-hero .main_btn:hover {
	background: #EAF2FF !important;
	color: #004A8A !important;
}
.hz-usluga-hero .audit-hero__cta svg path,
.hz-usluga-hero .dor-hero__cta svg path {
	stroke: #004A8A !important;
}

/* Подпись под фото автора */
.hz-usluga-hero .dor-hero__img-caption,
.hz-usluga-hero .audit-hero__img-caption {
	color: rgba(255, 255, 255, .85) !important;
}
.hz-usluga-hero .dor-hero__img-caption b,
.hz-usluga-hero .audit-hero__img-caption b {
	color: #fff !important;
	-webkit-text-fill-color: #fff !important;
}

/* Цифры и подписи под ними (счётчики опыта) */
.hz-usluga-hero .audit-hero__stat {
	background: rgba(255, 255, 255, .12) !important;
	border-color: rgba(255, 255, 255, .24) !important;
}
.hz-usluga-hero .audit-hero__stat-num {
	color: #fff !important;
	-webkit-text-fill-color: #fff !important;
}
.hz-usluga-hero .audit-hero__stat-label {
	color: rgba(255, 255, 255, .7) !important;
}

/* Списки-галочки на странице аудита-подобных услуг */
.hz-usluga-hero .audit-hero__checks li {
	color: rgba(255, 255, 255, .88) !important;
	border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.hz-usluga-hero .audit-hero__checks li::before {
	background: #fff !important;
	box-shadow: 0 0 10px rgba(255, 255, 255, .5) !important;
}

/* Найдено автопроверкой контраста: эти места оставались синими на синем.
   Подпись под фото автора — вложенный span со своим цветом,
   а текст на «Создании сайтов» красится отдельным правилом. */
.hz-usluga-hero .audit-hero__img-caption,
.hz-usluga-hero .audit-hero__img-caption *,
.hz-usluga-hero .dor-hero__img-caption,
.hz-usluga-hero .dor-hero__img-caption *,
.hz-usluga-hero .education_main-text,
.hz-usluga-hero .education_main-text * {
	color: rgba(255, 255, 255, .85) !important;
	-webkit-text-fill-color: rgba(255, 255, 255, .85) !important;
}
.hz-usluga-hero .audit-hero__img-caption b,
.hz-usluga-hero .dor-hero__img-caption b,
.hz-usluga-hero .education_main-text b,
.hz-usluga-hero .education_main-text strong {
	color: #fff !important;
	-webkit-text-fill-color: #fff !important;
}

/* ── Доработка после проверки владельцем ────────────────────────── */

/* 1. Кнопка на «Купить SEO-статьи»: свой класс, синяя на синем. */
.hz-usluga-hero .education_main-btn,
.hz-usluga-hero .btnTwo {
	background: #fff !important;
	color: #004A8A !important;
	-webkit-text-fill-color: #004A8A !important;
	border-color: #fff !important;
	box-shadow: 0 10px 28px rgba(0, 0, 0, .18) !important;
}
.hz-usluga-hero .education_main-btn:hover,
.hz-usluga-hero .btnTwo:hover {
	background: #EAF2FF !important;
	color: #004A8A !important;
}
/* Стрелка внутри кнопки — картинка, поэтому не цветом, а инверсией */
.hz-usluga-hero .education_main-btn::after,
.hz-usluga-hero .btnTwo::after {
	filter: brightness(0) saturate(100%) invert(19%) sepia(68%) saturate(2200%) hue-rotate(196deg) brightness(95%) contrast(101%);
}

/* 2. Кавычки перед текстом — тоже картинка, на синем пропадали.
      Инвертируем в белый и приглушаем, чтобы остались декором. */
.hz-usluga-hero .education_main-text::before,
.hz-usluga-hero .audit-hero__subtitle::before,
.hz-usluga-hero .dor-hero__subtitle::before {
	filter: brightness(0) invert(1) !important;
	opacity: .3 !important;
}

/* 3. Фото автора — на белой карточке.
      ⚠️ Белый фон даём САМОЙ КАРТИНКЕ, а не контейнеру: внутри контейнера
      лежит ещё и подпись, и на белом она становилась белым по белому. */
.hz-usluga-hero .audit-hero__img > img,
.hz-usluga-hero .dor-hero__img > img {
	background: #fff !important;
	border-radius: 24px !important;
	padding: 10px !important;
	box-shadow: 0 24px 60px rgba(0, 0, 0, .22) !important;
	box-sizing: border-box;
}
.hz-usluga-hero .audit-hero__img,
.hz-usluga-hero .dor-hero__img {
	background: transparent !important;
	box-shadow: none !important;
	padding: 0 !important;
}

/* 4. Подпись под фото: имя — белое и заметное, должность — светлая. */
.hz-usluga-hero .audit-hero__img-caption,
.hz-usluga-hero .dor-hero__img-caption {
	color: #fff !important;
	-webkit-text-fill-color: #fff !important;
	font-weight: 700;
}
.hz-usluga-hero .audit-hero__img-caption span,
.hz-usluga-hero .dor-hero__img-caption span {
	color: rgba(255, 255, 255, .82) !important;
	-webkit-text-fill-color: rgba(255, 255, 255, .82) !important;
	font-weight: 500;
}

/* ─── Первый экран курсов: факты, цена, кнопка (29.09.2026) ───────────
   Синий hero, поэтому всё белым. Цена раньше стояла в самом низу
   страницы, на 77% прокрутки. */
.edu-fakty{
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 26px 0 24px;
    padding: 0;
    list-style: none;
}
.edu-fakty li{
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 18px;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.24);
    border-radius: 12px;
}
.edu-fakty b{ font-size: 17px; font-weight: 800; color: #fff; }
.edu-fakty span{ font-size: 13.5px; color: rgba(255,255,255,.82); }
.edu-cena{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}
.edu-cena__staraya{
    font-size: 19px;
    color: rgba(255,255,255,.6);
    text-decoration: line-through;
}
.edu-cena__nov{
    font-size: 32px;
    font-weight: 800;
    color: #fff;
}
.edu-cena__btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 56px;
    padding: 0 30px;
    background: #fff;
    color: #004A8A !important;
    font-size: 16px;
    font-weight: 700;
    border-radius: 12px;
    text-decoration: none !important;
    box-shadow: 0 10px 28px rgba(0,0,0,.18);
    transition: background .18s, transform .18s;
}
.edu-cena__btn:hover{ background: #EAF2FF; transform: translateY(-2px); }
@media (max-width: 767.98px){
    .edu-fakty{ gap: 8px; margin: 20px 0 18px; }
    .edu-fakty li{ padding: 10px 14px; }
    .edu-fakty b{ font-size: 15.5px; }
    .edu-fakty span{ font-size: 12.5px; }
    .edu-cena{ gap: 12px; }
    .edu-cena__nov{ font-size: 27px; }
    .edu-cena__btn{ width: 100%; }
}

/* Мобильный: у .education_main-text из старой вёрстки был padding-top 60px —
   он отодвигал текст от заголовка на пустое место (29.09.2026). */
@media (max-width: 991.98px) {
	.hz-usluga-hero .education_main-text {
		padding-top: 0 !important;
	}
}



/* ═══ Первый экран страниц услуг. 02.10.2026 ═══
   Было: сплошная синяя заливка, белый текст, фото владельца в белой карточке —
   одно и то же на трёх страницах. Стало: под каждую услугу своя сцена-фотография
   во всю ширину, текст тёмным слева на светлой подложке, как на главной.
   Нарисованный на макете текст уходит под эту подложку. */
.hz-usluga-hero{
    position: relative !important;
    background: #F2F6FB !important;
    overflow: hidden !important;
    color: #11172D !important;
    padding: 0 !important;
    min-height: 0 !important;
}
.hz-usluga-hero::before,
.hz-usluga-hero::after{ display: none !important; }

.usluga-scena{
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
    width: 100%; height: 100%; object-fit: cover; object-position: right center;
    display: block; margin: 0;
}
/* подложка: слева глухая — под ней нарисованный на макете текст не виден */
.hz-usluga-hero > .container::before{
    content: ""; position: absolute; top: 0; bottom: 0; left: 50%;
    width: 100vw; transform: translateX(-50%); z-index: 1; pointer-events: none;
    background: linear-gradient(90deg,
        #F2F6FB 0%, #F2F6FB 42%, rgba(242,246,251,.92) 50%,
        rgba(242,246,251,.35) 60%, rgba(242,246,251,0) 70%);
}
.hz-usluga-hero > .container{ position: relative; z-index: 1; }
.hz-usluga-hero .audit-hero__inner,
.hz-usluga-hero .dor-hero__inner{ position: relative; z-index: 2; }
.hz-usluga-hero .audit-hero__content,
.hz-usluga-hero .dor-hero__content{ position: relative; z-index: 2; max-width: 640px; }

/* текст снова тёмный: раньше он был белым под синюю заливку */
.hz-usluga-hero h1,
.hz-usluga-hero h1 *,
.hz-usluga-hero .title{
    color: #004A8A !important; -webkit-text-fill-color: #004A8A !important;
}
.hz-usluga-hero .audit-hero__subtitle,
.hz-usluga-hero .dor-hero__subtitle,
.hz-usluga-hero .education_main-text{
    color: #44506E !important; -webkit-text-fill-color: #44506E !important;
}
.hz-usluga-hero .audit-hero__subtitle span,
.hz-usluga-hero .dor-hero__subtitle span{
    color: #11172D !important; -webkit-text-fill-color: #11172D !important;
}
/* плашки — белые карточки на светлом */
.hz-usluga-hero .audit-hero__badge,
.hz-usluga-hero .dor-hero__badge{
    background: #FFFFFF !important;
    border: 1px solid #DFE7F3 !important;
    color: #44506E !important;
    box-shadow: 0 4px 14px rgba(15,26,46,.06) !important;
}
.hz-usluga-hero .audit-hero__badge span,
.hz-usluga-hero .dor-hero__badge span{
    color: #44506E !important; -webkit-text-fill-color: #44506E !important;
}
.hz-usluga-hero .audit-hero__badge-number,
.hz-usluga-hero .dor-hero__badge-number{
    color: #004A8A !important; -webkit-text-fill-color: #004A8A !important; font-weight: 800;
}
.hz-usluga-hero .audit-hero__badge svg path,
.hz-usluga-hero .dor-hero__badge svg path{ stroke: #005DAC !important; }
/* главная кнопка снова синяя, вторая — белая с рамкой */
.hz-usluga-hero .audit-hero__cta,
.hz-usluga-hero .dor-hero__cta,
.hz-usluga-hero .education_main-btn,
.hz-usluga-hero .btnTwo{
    background: #005DAC !important;
    color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important;
    border-color: #005DAC !important;
    box-shadow: 0 10px 24px rgba(27,111,212,.26) !important;
}
.hz-usluga-hero .audit-hero__cta:hover,
.hz-usluga-hero .dor-hero__cta:hover,
.hz-usluga-hero .education_main-btn:hover,
.hz-usluga-hero .btnTwo:hover{ background: #004A8A !important; border-color: #004A8A !important; }
.hz-usluga-hero .audit-hero__cta svg path,
.hz-usluga-hero .dor-hero__cta svg path{ stroke: #FFFFFF !important; }
/* цифры-счётчики */
.hz-usluga-hero .audit-hero__stat,
.hz-usluga-hero .dor-hero__stat{
    background: #FFFFFF !important; border-color: #DFE7F3 !important;
}
.hz-usluga-hero .audit-hero__stat-num{ color: #004A8A !important; -webkit-text-fill-color: #004A8A !important; }
.hz-usluga-hero .audit-hero__stat-label{ color: #5D6584 !important; }
.hz-usluga-hero .audit-hero__checks li{ color: #44506E !important; border-bottom-color: #E3EAF5 !important; }
.hz-usluga-hero .audit-hero__checks li::before{ background: #005DAC !important; box-shadow: none !important; }
/* прежнее фото в белой карточке больше не нужно — его заменила сцена */
.hz-usluga-hero .audit-hero__img,
.hz-usluga-hero .dor-hero__img,
.hz-usluga-hero .audit-hero__img-caption,
.hz-usluga-hero .dor-hero__img-caption{ display: none !important; }

@media (max-width: 1100px){
    .hz-usluga-hero .audit-hero__content,
    .hz-usluga-hero .dor-hero__content{ max-width: 560px; }
    .hz-usluga-hero > .container::before{
        background: linear-gradient(90deg,
            #F2F6FB 0%, #F2F6FB 54%, rgba(242,246,251,.9) 64%,
            rgba(242,246,251,.3) 76%, rgba(242,246,251,0) 88%);
    }
}
@media (max-width: 767px){
    /* на телефоне сцена уходит в поток под текст: иначе человек не виден */
    .usluga-scena{
        position: static; height: auto; aspect-ratio: 16 / 10;
        object-position: 72% center; border-radius: 14px; margin: 0 0 20px;
    }
    .hz-usluga-hero > .container::before{ display: none; }
    .hz-usluga-hero .audit-hero__content,
    .hz-usluga-hero .dor-hero__content{ max-width: none; }
}



/* высота первого экрана: без неё секция сжималась под текст и сцена обрезалась */
.hz-usluga-hero{ min-height: 560px !important; display: flex !important; align-items: center !important; }
.hz-usluga-hero > .container{ width: 100%; padding-top: 48px !important; padding-bottom: 48px !important; }
@media (min-width: 1600px){ .hz-usluga-hero{ min-height: 620px !important; } }
@media (max-width: 991px){ .hz-usluga-hero{ min-height: 0 !important; display: block !important; } }
@media (max-width: 767px){
    .hz-usluga-hero > .container{ padding-top: 24px !important; padding-bottom: 28px !important; }
}



/* подложку вешаем на саму секцию: у контейнера есть отступы, и нарисованный
   на макете логотип оставался выше неё — просвечивал под настоящей шапкой */
.hz-usluga-hero > .container::before{ display: none !important; }
.hz-usluga-hero::after{
    display: block !important; content: "" !important;
    position: absolute !important; top: 0 !important; bottom: 0 !important;
    left: 0 !important; right: 0 !important; width: auto !important; height: auto !important;
    border-radius: 0 !important; z-index: 1 !important; pointer-events: none !important;
    background: linear-gradient(90deg,
        #F2F6FB 0%, #F2F6FB 42%, rgba(242,246,251,.92) 50%,
        rgba(242,246,251,.35) 60%, rgba(242,246,251,0) 70%) !important;
}
@media (max-width: 1100px){
    .hz-usluga-hero::after{
        background: linear-gradient(90deg,
            #F2F6FB 0%, #F2F6FB 54%, rgba(242,246,251,.9) 64%,
            rgba(242,246,251,.3) 76%, rgba(242,246,251,0) 88%) !important;
    }
}
@media (max-width: 767px){ .hz-usluga-hero::after{ display: none !important; } }



/* контейнер должен быть выше подложки: внутри него свой контекст наложения,
   и дети не могут подняться над ::after секции, пока сам контейнер ниже */
.hz-usluga-hero > .container{ z-index: 2 !important; }



/* на телефоне в кадр попадала левая часть макета с нарисованным текстом —
   выходил дубль: сверху картинка с надписями, ниже настоящий текст.
   Показываем только правую часть сцены, где человек и экраны */
@media (max-width: 767px){
    .usluga-scena{
        aspect-ratio: 4 / 3 !important;
        object-fit: cover !important;
        object-position: 88% center !important;
    }
}
@media (max-width: 420px){
    .usluga-scena{ aspect-ratio: 5 / 4 !important; object-position: 92% center !important; }
}



/* на телефоне показываем только правую половину сцены: левее начинается
   нарисованный на макете текст, и он попадал в кадр обрывками */
@media (max-width: 767px){
    .usluga-scena{
        aspect-ratio: 1 / 1 !important;
        object-position: 100% center !important;
    }
}
@media (max-width: 420px){
    .usluga-scena{ aspect-ratio: 1 / 1 !important; object-position: 100% center !important; }
}



/* Телефон: заголовок должен стоять НАД картинкой, а не под ней.
   Раскрываем обёртки через display:contents — тогда h1, подзаголовок, плашки
   и кнопки становятся прямыми детьми секции, и порядок задаётся order. */
@media (max-width: 767px){
    .hz-usluga-hero{ display: flex !important; flex-direction: column !important; }
    .hz-usluga-hero > .container{ display: contents !important; }
    .hz-usluga-hero .audit-hero__inner,
    .hz-usluga-hero .dor-hero__inner,
    .hz-usluga-hero .audit-hero__content,
    .hz-usluga-hero .dor-hero__content{ display: contents !important; }

    .hz-usluga-hero h1,
    .hz-usluga-hero .title{ order: 1 !important; margin: 18px 18px 12px !important; }
    .usluga-scena{ order: 2 !important; margin: 0 18px 18px !important; width: auto !important; }
    .hz-usluga-hero .audit-hero__subtitle,
    .hz-usluga-hero .dor-hero__subtitle{ order: 3 !important; margin: 0 18px 16px !important; }
    .hz-usluga-hero .audit-hero__badges,
    .hz-usluga-hero .dor-hero__badges,
    .hz-usluga-hero .audit-hero__stats{ order: 4 !important; margin: 0 18px 16px !important; }
    .hz-usluga-hero .audit-hero__checks{ order: 5 !important; margin: 0 18px 16px !important; }
    .hz-usluga-hero .audit-hero__cta,
    .hz-usluga-hero .dor-hero__cta,
    .hz-usluga-hero .education_main-btn,
    .hz-usluga-hero .btnTwo{ order: 6 !important; margin: 0 18px 10px !important; }
    .hz-usluga-hero .audit-hero__cta-note,
    .hz-usluga-hero .hero-cta-note{ order: 7 !important; margin: 0 18px 18px !important; }
}



/* Шапка на телефоне липкая (position:fixed, 56px). Мой padding:0 обнулил отступ,
   который раньше ставил скрипт темы, и заголовок уезжал под шапку.
   Возвращаем отступ с запасом на случай, если шапка станет выше. */
@media (max-width: 991px){
    .hz-usluga-hero{ padding-top: 72px !important; }
}
@media (max-width: 767px){
    .hz-usluga-hero{ padding-top: 68px !important; }
    .hz-usluga-hero h1,
    .hz-usluga-hero .title{ margin-top: 8px !important; }
}



/* Страницы курсов, создания сайтов и SEO-статей собраны на других классах
   (.education_main-*, .edu-fakty, .edu-cena) — прежние правила их не покрывали:
   текст растягивался на всю ширину поверх фотографии, плашки были прозрачными. */
.hz-usluga-hero .education_main-title,
.hz-usluga-hero .education_main-text,
.hz-usluga-hero .edu-fakty,
.hz-usluga-hero .edu-cena{
    max-width: 660px !important;
    position: relative; z-index: 2;
}
.hz-usluga-hero .education_main-title{
    color: #004A8A !important; -webkit-text-fill-color: #004A8A !important;
}
.hz-usluga-hero .education_main-text,
.hz-usluga-hero .education_main-text *{
    color: #44506E !important; -webkit-text-fill-color: #44506E !important;
}
.hz-usluga-hero .education_main-text span,
.hz-usluga-hero .education_main-text b{
    color: #11172D !important; -webkit-text-fill-color: #11172D !important;
}
/* факты курса — белые карточки, как плашки на остальных страницах */
.hz-usluga-hero .edu-fakty li{
    background: #FFFFFF !important;
    border: 1px solid #DFE7F3 !important;
    box-shadow: 0 4px 14px rgba(15,26,46,.06) !important;
}
.hz-usluga-hero .edu-fakty li b{ color: #004A8A !important; -webkit-text-fill-color: #004A8A !important; }
.hz-usluga-hero .edu-fakty li span{ color: #5D6584 !important; -webkit-text-fill-color: #5D6584 !important; }
/* цена */
.hz-usluga-hero .edu-cena__staraya{ color: #8A94A8 !important; -webkit-text-fill-color: #8A94A8 !important; }
.hz-usluga-hero .edu-cena__nov{ color: #004A8A !important; -webkit-text-fill-color: #004A8A !important; }
.hz-usluga-hero .edu-cena__btn,
.hz-usluga-hero .education_main-btn{
    background: #005DAC !important;
    color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important;
    border-color: #005DAC !important;
    box-shadow: 0 10px 24px rgba(27,111,212,.26) !important;
}
.hz-usluga-hero .edu-cena__btn:hover,
.hz-usluga-hero .education_main-btn:hover{ background: #004A8A !important; border-color: #004A8A !important; }

@media (max-width: 1100px){
    .hz-usluga-hero .education_main-title,
    .hz-usluga-hero .education_main-text,
    .hz-usluga-hero .edu-fakty,
    .hz-usluga-hero .edu-cena{ max-width: 560px !important; }
}
@media (max-width: 767px){
    .hz-usluga-hero .education_main-title{ order: 1 !important; margin: 8px 18px 12px !important; }
    .hz-usluga-hero .education_main-text{ order: 3 !important; margin: 0 18px 16px !important; }
    .hz-usluga-hero .edu-fakty{ order: 4 !important; margin: 0 18px 16px !important; }
    .hz-usluga-hero .edu-cena{ order: 5 !important; margin: 0 18px 18px !important; }
    .hz-usluga-hero .education_main-title,
    .hz-usluga-hero .education_main-text,
    .hz-usluga-hero .edu-fakty,
    .hz-usluga-hero .edu-cena{ max-width: none !important; }
}



/* Подложка кончалась раньше, чем текст, и он заезжал на фотографию.
   Расширяем светлую зону и жёстче ограничиваем ширину текстового блока. */
.hz-usluga-hero::after{
    background: linear-gradient(90deg,
        #F2F6FB 0%, #F2F6FB 50%, rgba(242,246,251,.94) 58%,
        rgba(242,246,251,.45) 68%, rgba(242,246,251,0) 78%) !important;
}
.hz-usluga-hero .audit-hero__content,
.hz-usluga-hero .dor-hero__content,
.hz-usluga-hero .education_main-title,
.hz-usluga-hero .education_main-text,
.hz-usluga-hero .edu-fakty,
.hz-usluga-hero .edu-cena{ max-width: 620px !important; }

/* первые слова абзаца были белыми — наследие синей заливки */
.hz-usluga-hero .education_main-text span,
.hz-usluga-hero .education_main-text b,
.hz-usluga-hero .education_main-text strong,
.hz-usluga-hero .audit-hero__subtitle span,
.hz-usluga-hero .dor-hero__subtitle span,
.hz-usluga-hero .audit-hero__subtitle b,
.hz-usluga-hero .dor-hero__subtitle b{
    color: #11172D !important; -webkit-text-fill-color: #11172D !important;
}
/* кнопка не должна растягиваться на всю колонку */
.hz-usluga-hero .education_main-btn,
.hz-usluga-hero .edu-cena__btn,
.hz-usluga-hero .audit-hero__cta,
.hz-usluga-hero .dor-hero__cta{ display: inline-flex !important; width: auto !important; }

@media (max-width: 1400px){
    .hz-usluga-hero .audit-hero__content,
    .hz-usluga-hero .dor-hero__content,
    .hz-usluga-hero .education_main-title,
    .hz-usluga-hero .education_main-text,
    .hz-usluga-hero .edu-fakty,
    .hz-usluga-hero .edu-cena{ max-width: 540px !important; }
    .hz-usluga-hero::after{
        background: linear-gradient(90deg,
            #F2F6FB 0%, #F2F6FB 56%, rgba(242,246,251,.94) 66%,
            rgba(242,246,251,.4) 76%, rgba(242,246,251,0) 88%) !important;
    }
}
@media (max-width: 767px){
    .hz-usluga-hero .audit-hero__content,
    .hz-usluga-hero .dor-hero__content,
    .hz-usluga-hero .education_main-title,
    .hz-usluga-hero .education_main-text,
    .hz-usluga-hero .edu-fakty,
    .hz-usluga-hero .edu-cena{ max-width: none !important; }
    .hz-usluga-hero .education_main-btn,
    .hz-usluga-hero .edu-cena__btn{ width: auto !important; }
}



/* баланс: текст в левой трети, фотография остаётся видна */
.hz-usluga-hero::after{
    background: linear-gradient(90deg,
        #F2F6FB 0%, #F2F6FB 44%, rgba(242,246,251,.9) 54%,
        rgba(242,246,251,.4) 64%, rgba(242,246,251,0) 74%) !important;
}
.hz-usluga-hero .audit-hero__content,
.hz-usluga-hero .dor-hero__content,
.hz-usluga-hero .education_main-title,
.hz-usluga-hero .education_main-text,
.hz-usluga-hero .edu-fakty,
.hz-usluga-hero .edu-cena{ max-width: 560px !important; }
@media (max-width: 1400px){
    .hz-usluga-hero::after{
        background: linear-gradient(90deg,
            #F2F6FB 0%, #F2F6FB 52%, rgba(242,246,251,.92) 62%,
            rgba(242,246,251,.4) 74%, rgba(242,246,251,0) 86%) !important;
    }
    .hz-usluga-hero .audit-hero__content,
    .hz-usluga-hero .dor-hero__content,
    .hz-usluga-hero .education_main-title,
    .hz-usluga-hero .education_main-text,
    .hz-usluga-hero .edu-fakty,
    .hz-usluga-hero .edu-cena{ max-width: 520px !important; }
}
@media (max-width: 767px){
    .hz-usluga-hero .audit-hero__content,
    .hz-usluga-hero .dor-hero__content,
    .hz-usluga-hero .education_main-title,
    .hz-usluga-hero .education_main-text,
    .hz-usluga-hero .edu-fakty,
    .hz-usluga-hero .edu-cena{ max-width: none !important; }
}



/* вуаль была растянута на полкадра и выбеливала человека.
   Теперь она плотная только под текстом и резко сходит на нет до фигуры */
.hz-usluga-hero::after{
    background: linear-gradient(90deg,
        #F2F6FB 0%, #F2F6FB 34%, rgba(242,246,251,.82) 42%,
        rgba(242,246,251,.25) 49%, rgba(242,246,251,0) 55%) !important;
}
@media (max-width: 1400px){
    .hz-usluga-hero::after{
        background: linear-gradient(90deg,
            #F2F6FB 0%, #F2F6FB 42%, rgba(242,246,251,.84) 50%,
            rgba(242,246,251,.28) 58%, rgba(242,246,251,0) 66%) !important;
    }
}
@media (max-width: 1100px){
    .hz-usluga-hero::after{
        background: linear-gradient(90deg,
            #F2F6FB 0%, #F2F6FB 50%, rgba(242,246,251,.86) 60%,
            rgba(242,246,251,.3) 70%, rgba(242,246,251,0) 80%) !important;
    }
}



/* картинка теперь без нарисованного текста — вуаль нужна только для читаемости */
.hz-usluga-hero::after{
    background: linear-gradient(90deg,
        #F2F6FB 0%, rgba(242,246,251,.96) 28%, rgba(242,246,251,.6) 38%,
        rgba(242,246,251,.15) 46%, rgba(242,246,251,0) 54%) !important;
}
.usluga-scena{ object-position: center center !important; }
@media (max-width: 1400px){
    .hz-usluga-hero::after{
        background: linear-gradient(90deg,
            #F2F6FB 0%, rgba(242,246,251,.96) 36%, rgba(242,246,251,.65) 48%,
            rgba(242,246,251,.18) 58%, rgba(242,246,251,0) 66%) !important;
    }
}
@media (max-width: 767px){
    .usluga-scena{ object-position: center center !important; aspect-ratio: 4 / 3 !important; }
}



/* Картинка шире блока и прижата вправо: нарисованный на макете текст уходит
   за левый край, масштаб человека остаётся как в исходнике. */
.hz-usluga-hero{ position: relative !important; }
.usluga-scena{
    position: absolute !important; top: 0 !important; bottom: 0 !important;
    right: 0 !important; left: auto !important;
    width: 72% !important; height: 100% !important;
    object-fit: cover !important; object-position: 78% center !important;
    z-index: 0 !important;
}
/* слева от фотографии — ровный фон, на нём текст */
.hz-usluga-hero::after{
    background: linear-gradient(90deg,
        #F2F6FB 0%, #F2F6FB 26%, rgba(242,246,251,.72) 33%,
        rgba(242,246,251,.12) 40%, rgba(242,246,251,0) 46%) !important;
}
@media (max-width: 1400px){
    .usluga-scena{ width: 62% !important; object-position: 82% center !important; }
    .hz-usluga-hero::after{
        background: linear-gradient(90deg,
            #F2F6FB 0%, #F2F6FB 32%, rgba(242,246,251,.75) 40%,
            rgba(242,246,251,.15) 48%, rgba(242,246,251,0) 55%) !important;
    }
}
@media (max-width: 1100px){
    .usluga-scena{ width: 54% !important; object-position: 86% center !important; }
}
@media (max-width: 767px){
    .usluga-scena{
        position: static !important; width: auto !important; height: auto !important;
        aspect-ratio: 4 / 3 !important; object-position: 82% center !important;
    }
}



/* Возврат к виду согласованных макетов: картинка на всю ширину блока,
   её левая часть (нарисованный текст) закрыта плотной подложкой до 44%. */
.usluga-scena{
    position: absolute !important; inset: 0 !important;
    width: 100% !important; height: 100% !important; left: 0 !important; right: 0 !important;
    object-fit: cover !important; object-position: center center !important; z-index: 0 !important;
}
.hz-usluga-hero::after{
    background: linear-gradient(90deg,
        #F2F6FB 0%, #F2F6FB 44%, rgba(242,246,251,.9) 52%,
        rgba(242,246,251,.4) 60%, rgba(242,246,251,0) 70%) !important;
}
.hz-usluga-hero{ min-height: 620px !important; }
/* граница с нижним блоком, иначе фон первого экрана сливается с карточками */
.hz-usluga-hero{ border-bottom: 1px solid #E3EAF5 !important; }

@media (max-width: 1400px){
    .hz-usluga-hero::after{
        background: linear-gradient(90deg,
            #F2F6FB 0%, #F2F6FB 50%, rgba(242,246,251,.9) 60%,
            rgba(242,246,251,.4) 70%, rgba(242,246,251,0) 80%) !important;
    }
}
@media (max-width: 767px){
    .usluga-scena{
        position: static !important; width: auto !important; height: auto !important;
        aspect-ratio: 16 / 10 !important; object-position: 86% center !important;
    }
}



/* Нарисованный на макетах текст доходит до 50–52% ширины — подложка должна быть
   сплошной до этой границы, иначе он просвечивает из-под настоящего текста. */
.hz-usluga-hero::after{
    background: linear-gradient(90deg,
        #F2F6FB 0%, #F2F6FB 52%, rgba(242,246,251,.75) 58%,
        rgba(242,246,251,.25) 63%, rgba(242,246,251,0) 68%) !important;
}
/* картинку сдвигаем вправо: так человек оказывается в видимой части,
   а не под подложкой */
.usluga-scena{ object-position: 72% center !important; }

@media (max-width: 1400px){
    .hz-usluga-hero::after{
        background: linear-gradient(90deg,
            #F2F6FB 0%, #F2F6FB 58%, rgba(242,246,251,.78) 66%,
            rgba(242,246,251,.25) 73%, rgba(242,246,251,0) 80%) !important;
    }
    .usluga-scena{ object-position: 78% center !important; }
}
@media (max-width: 767px){
    .usluga-scena{ object-position: 86% center !important; }
}



/* кадр сдвинут вправо: лицо выходит из-под вуали и остаётся чётким,
   нарисованный текст макета уходит влево под плотную часть подложки */
.usluga-scena{ object-position: 88% center !important; }
.hz-usluga-hero::after{
    background: linear-gradient(90deg,
        #F2F6FB 0%, #F2F6FB 46%, rgba(242,246,251,.6) 52%,
        rgba(242,246,251,.12) 57%, rgba(242,246,251,0) 62%) !important;
}
@media (max-width: 1400px){
    .usluga-scena{ object-position: 92% center !important; }
    .hz-usluga-hero::after{
        background: linear-gradient(90deg,
            #F2F6FB 0%, #F2F6FB 52%, rgba(242,246,251,.65) 59%,
            rgba(242,246,251,.15) 65%, rgba(242,246,251,0) 70%) !important;
    }
}
@media (max-width: 767px){ .usluga-scena{ object-position: 86% center !important; } }



/* На телефоне в кадр попадала левая часть макета с нарисованным текстом и кнопками.
   Берём только правую треть сцены — там человек и экраны, надписей нет. */
@media (max-width: 767px){
    .usluga-scena{
        aspect-ratio: 1 / 1 !important;
        object-fit: cover !important;
        object-position: 100% center !important;
    }
}
@media (max-width: 480px){
    .usluga-scena{ aspect-ratio: 4 / 5 !important; object-position: 100% center !important; }
}



/* мобильная картинка — отдельный кадр с человеком, обрезать её не нужно */
@media (max-width: 767px){
    .usluga-scena-pic{ display:block !important; order:2 !important; margin:0 18px 18px !important; }
    .usluga-scena{
        position: static !important; width: 100% !important; height: auto !important;
        aspect-ratio: auto !important; object-fit: contain !important;
        object-position: center !important; border-radius: 14px !important; margin: 0 !important;
    }
}

/* --- первый экран страницы партнёрства --- */
body.page-id-7699 .entry-header{display:none!important}
body.page-id-7699 .site-content .ast-container{padding-top:0!important}
.hz-reklama-hero{position:relative;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);width:100vw;max-width:100vw;background:#F2F6FB;padding:68px 0 56px;overflow:hidden;margin-bottom:48px}
.hz-reklama-hero .container{position:relative;z-index:2;max-width:1500px;margin:0 auto;padding:0 20px;box-sizing:border-box}
.hz-rh__content{position:relative;z-index:2;max-width:640px}
.hz-rh__content h1{font-size:44px;line-height:1.12;color:#004A8A;margin:0 0 18px;font-weight:800}
.hz-rh__sub{font-size:17px;line-height:1.6;color:#44506E;margin:0 0 26px;max-width:600px}
.hz-rh__sub b{color:#11172D}
.hz-rh__badges{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 28px}
.hz-rh__badge{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid #DFE7F3;border-radius:12px;padding:12px 16px;font-size:15px;color:#44506E;box-shadow:0 6px 18px rgba(15,26,46,.06)}
.hz-rh__badge b{color:#11172D}
.hz-rh__cta{display:inline-flex;align-items:center;gap:10px;background:#005DAC;color:#fff!important;-webkit-text-fill-color:#fff;border-radius:12px;padding:15px 28px;font-size:16px;font-weight:700;text-decoration:none;transition:background .2s}
.hz-rh__cta:hover{background:#004A8A;color:#fff!important}
@media (max-width:1100px){.hz-rh__content h1{font-size:36px}}
@media (max-width:767px){
.hz-reklama-hero{padding:18px 0 28px;margin-bottom:28px}
.hz-reklama-hero .usluga-scena{position:static;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;object-position:100% center;border-radius:14px;margin:0 0 20px}
.hz-reklama-hero::after{display:none}
.hz-rh__content h1{font-size:30px}
.hz-reklama-hero{display:flex;flex-direction:column}
.hz-reklama-hero .usluga-scena-pic{order:2}
.hz-reklama-hero .container{order:1;display:contents}
}

/* --- картинки первого экрана партнёрства --- */
.hz-reklama-hero .hz-rh__mob{display:none}
@media (max-width:767px){
.hz-reklama-hero .hz-rh__dsk{display:none}
.hz-reklama-hero .hz-rh__mob{display:block;position:static;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;object-position:100% center;border-radius:14px;margin:0 0 20px}
}

/* --- мобильный порядок партнёрства --- */
.hz-rh__cta{text-decoration:none!important}
@media (max-width:767px){
.hz-reklama-hero .container,.hz-reklama-hero .hz-rh__content{display:contents}
.hz-reklama-hero .hz-rh__content h1{order:1;padding:0 20px;margin-bottom:14px}
.hz-reklama-hero .hz-rh__dsk{display:none}
.hz-reklama-hero .hz-rh__mob{order:2;display:block;position:static;width:auto;height:auto;aspect-ratio:4/3;object-fit:cover;object-position:100% center;border-radius:14px;margin:0 20px 18px}
.hz-reklama-hero .hz-rh__sub{order:3;padding:0 20px;margin-bottom:18px}
.hz-reklama-hero .hz-rh__badges{order:4;padding:0 20px;margin-bottom:20px}
.hz-reklama-hero .hz-rh__cta{order:5;margin:0 20px;align-self:flex-start}
}

/* --- ширина блока партнёрства --- */
.entry-content > .hz-reklama-hero,.hz-reklama-hero{margin-left:calc(50% - 50vw)!important;margin-right:calc(50% - 50vw)!important;width:100vw!important;max-width:100vw!important}

/* --- поля у мобильной картинки партнёрства --- */
@media (max-width:767px){.hz-reklama-hero .hz-rh__mob{margin:0 20px 18px!important;width:calc(100% - 40px)!important}}

/* --- кадр прижат к правому краю: фигура и экран не режутся --- */
@media (min-width:768px){.hz-usluga-hero .usluga-scena{object-position:100% center!important}}

/* --- единый вид кнопки первого экрана --- */
.hz-usluga-hero .education_main-btn,.hz-usluga-hero .audit-hero__cta,.hz-usluga-hero .dor-hero__cta,.hz-usluga-hero .btnTwo,.hz-usluga-hero .main_btn,.hz-usluga-hero .edu-cena__btn,.hz-reklama-hero .hz-rh__cta{display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:10px!important;padding:16px 28px!important;height:auto!important;min-height:0!important;width:auto!important;max-width:none!important;font-size:16px!important;font-weight:700!important;line-height:1.2!important;border-radius:12px!important;text-decoration:none!important;box-sizing:border-box!important}
.hz-usluga-hero .arrow::after{filter:brightness(0) invert(1)!important;width:20px!important;height:20px!important;min-width:20px!important;margin:0!important;right:auto!important;left:auto!important;position:static!important;background-size:contain!important;background-repeat:no-repeat!important;background-position:center!important;flex:0 0 auto!important}
@media (max-width:767px){.hz-usluga-hero .education_main-btn,.hz-usluga-hero .audit-hero__cta,.hz-usluga-hero .dor-hero__cta,.hz-usluga-hero .btnTwo,.hz-usluga-hero .main_btn,.hz-reklama-hero .hz-rh__cta{padding:15px 22px!important;font-size:15px!important}}

/* заголовок первого экрана — фирменный синий */
html body .hz-usluga-hero h1,html body .hz-usluga-hero .title,html body .hz-reklama-hero h1{color:#005DAC!important;-webkit-text-fill-color:#005DAC!important}

/* ─────────────────────────────────────────────────────────────────────
   ИТОГ 02.10.2026 — подложка первого экрана услуг.
   Было две вуали поверх фотографии: .hz-usluga-hero::after и
   .hz-usluga-hero > .container::before. Накладываясь, они глушили
   снимок целиком — на /kursy-seo-optimizacii/ и /sozdanie-saitov/
   справа оставалось пустое светлое поле вместо фото.
   Вторую подложку выключаем, первую задаём один раз с градациями
   по ширине: текстовая колонка ограничена 560px, поэтому чем шире
   экран, тем меньшую долю она занимает и тем раньше вуаль сходит
   на нет. Проверено на 1280 / 1440 / 1920 / 2560.
   ───────────────────────────────────────────────────────────────── */
.hz-usluga-hero > .container::before { background: none !important; }

.hz-usluga-hero::after {
	background: linear-gradient(90deg, #F2F6FB 0%, #F2F6FB 46%,
		rgba(242,246,251,.85) 54%, rgba(242,246,251,.28) 63%,
		rgba(242,246,251,0) 72%) !important;
}
@media (min-width: 1200px) {
	.hz-usluga-hero::after {
		background: linear-gradient(90deg, #F2F6FB 0%, #F2F6FB 44%,
			rgba(242,246,251,.85) 52%, rgba(242,246,251,.26) 60%,
			rgba(242,246,251,0) 68%) !important;
	}
}
@media (min-width: 1600px) {
	.hz-usluga-hero::after {
		background: linear-gradient(90deg, #F2F6FB 0%, #F2F6FB 38%,
			rgba(242,246,251,.85) 46%, rgba(242,246,251,.24) 54%,
			rgba(242,246,251,0) 62%) !important;
	}
}
@media (min-width: 2000px) {
	.hz-usluga-hero::after {
		background: linear-gradient(90deg, #F2F6FB 0%, #F2F6FB 34%,
			rgba(242,246,251,.84) 42%, rgba(242,246,251,.22) 50%,
			rgba(242,246,251,0) 58%) !important;
	}
}