/*
	Theme Name: Cyber Brain
*/
/* =========================================================
   СТРАНИЦА ЗАПИСИ БЛОГА (/blog/post-slug)
   Общий фон и вертикальные отступы страницы
========================================================= */
.post {
	background-color: #050505;
	padding: 148px 0 115px 0;
	color: #F4F4F7;
	position: relative;
}
figure {margin:0;padding:0;}
a {color:#FFD700;}
/* =========================================================
   Контейнер статьи
   Центрирование и фиксированная ширина контента (760px)
========================================================= */
.post__container {
	max-width: 760px;
	margin: 0 auto;
	padding: 0 0px 0 16px;
}

/* =========================================================
   Блок автора (имя + регалии)
   Горизонтальное выравнивание элементов
========================================================= */
.post__author {
	display: flex;
	align-items: center;
	margin-bottom: 24px;
}

/* =========================================================
   Имя автора
   Берётся из профиля пользователя WordPress
========================================================= */
.post__author-name {
	font-family: Manrope, sans-serif;
	font-weight: 300;
	font-size: 16px;
	line-height: 24px;
	letter-spacing: 0;
	vertical-align: middle;
}

/* =========================================================
   Регалии автора (должность)
   Берутся из user meta (author_role)
========================================================= */
.post__author-role {
	font-family: Manrope, sans-serif;
	font-weight: 300;
	font-size: 16px;
	line-height: 24px;
	letter-spacing: 0;
	color: rgba(241, 245, 249, 0.5); /* #F1F5F980 */
	text-align: center;
}

/* =========================================================
   Заголовок статьи H1
   Основной заголовок страницы записи
========================================================= */
.post__title {
	font-family: Impact, sans-serif;
	font-weight: 400;
	font-size: 52px;
	line-height: 60px;
	letter-spacing: 0;
	margin-top: 40px;
}

/* =========================================================
   Контейнер контента статьи
   Отступ от заголовка до текста
========================================================= */
.post__content {
	margin-top: 56px;
}

/* =========================================================
   Заголовки второго уровня (H2) внутри статьи
   Используются в теле контента
========================================================= */
.post__content h2 {
	font-family: Impact, sans-serif;
	font-weight: 400;
	font-size: 32px;
	line-height: 40px;
	letter-spacing: 0;
	margin: 56px 0 20px;
}

/* =========================================================
   Обычный текст статьи (абзацы)
   Контент из редактора WordPress
========================================================= */
.post__content p {
	font-family: Manrope, sans-serif;
	font-weight: 300;
	font-size: 16px;
	line-height: 24px;
	letter-spacing: 0;
	margin: 12px 0 12px;
}

/* =========================================================
   Изображения внутри статьи
   Адаптивные, по ширине контента, со скруглением
========================================================= */
.post__content img {
	display: block;
	width: 100%;
	max-width: 760px;
	height: auto;
	margin: 32px auto;
	border-radius: 36px;
}

/* =========================================================
   Футер статьи
   Дата публикации под контентом
========================================================= */
.post__footer {
	margin-top: 56px;
	font-family: Manrope, sans-serif;
	font-weight: 300;
	font-size: 16px;
	line-height: 20px;
	color: #F1F5F980;
}
.post__author-comma {
	margin-right: 4px;
}

.post__cover {
	margin-top: 53px;
}

.post__cover-image {
	width: 100%;
	height: auto;
	border-radius: 36px;
	display: block;
	max-height: 380px;
}
/* =========================================================
   Списки в контенте статьи
   Пиксель-в-пиксель, без выхода за контейнер
========================================================= */

.post__content ul {
	list-style: none; /* отключаем нативный маркер */
	padding: 0;
	margin: 0 0 12px;
}
.post__content a {color:#FFD700;text-decoration:none;transition: .2s easy;}
.post__content a:hover {color:#FFD700;text-decoration:underline;transition: .2s easy;}

/* Элемент списка */
.post__content li {
	position: relative;
	font-family: Manrope, sans-serif;
	font-weight: 300;
	font-size: 16px;
	line-height: 24px;
	letter-spacing: 0;
	padding-left: 24px;
}

.post__content li::before {
	content: '•';
	position: absolute;
	left: 3px;
	top: 0;
	line-height: 24px;
}
.post__content li:last-child {
	margin-bottom: 0;
}
.post__content p + ul,
.post__content p + ol {
	margin-top: 0;
}

.post__content p:has(+ ul),
.post__content p:has(+ ol) {
	margin-bottom: 0;
}
/* =========================================================
   Отрывок записи (excerpt)
   Оформление как обычный абзац
========================================================= */

.post__excerpt p {
	font-family: Manrope, sans-serif;
	font-weight: 300;
	font-size: 16px;
	line-height: 24px;
	letter-spacing: 0;
	margin: 24px 0 0;
}
/* =========================================================
   Изображения в контенте
   Поведение 1 в 1 как в Figma
========================================================= */

.wp-block-image {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	overflow: hidden;
	margin: 32px 0;
	border-radius: 36px;
}

/* Само изображение */
.wp-block-image img {
	width: 100%;
	height: 100%;

	object-fit: cover;         /* ОБЯЗАТЕЛЬНО */
	display: block;
}
/* =========================================================
   Кнопка "Назад"
========================================================= */

.post-back {
	display: inline-flex;
	align-items: center;
	gap: 4px;

	width: 66px;
	height: 24px;

	text-decoration: none;
	cursor: pointer;
	opacity: 1;
}

/* Иконка стрелки */
.post-back__icon {
	width: 16px;
	height: 16px;
	display: block;
	flex-shrink: 0;
}

/* Текст кнопки */
.post-back__text {
	font-family: Manrope, sans-serif;
	font-weight: 300;
	font-size: 16px;
	line-height: 24px;
	letter-spacing: 0;
	color: #ffffff;
	white-space: nowrap;
	transition: .2s easy;
}
.post-back:hover {
	opacity: 0.7;
}
.post__back-wrap {
	position: absolute;
	top: 148px;
	left: calc(50% - 380px - 272px);
	width: auto;
	padding: 0;
	margin: 0;
}
@media (max-width: 1700px) {
	.post__back-wrap {
		left: calc(50% - 380px - 90px);
	}
}

@media (max-width: 1200px) {
	.post__back-wrap {
		left: calc(50% - 380px - 90px);
	}
}

@media (max-width: 992px) {
	.post__back-wrap {
		position: static;
		padding: 0 16px;
		margin-bottom: 16px;
	}
}
@media (max-width: 768px) {
	.post {padding: 105px 24px 0 9px;}
	.post__header {
		display: grid;
		grid-template-columns: 1fr;
	}

	.post__title {
		order: 1;
		font-size:36px;
		margin-top: 15px;
        line-height: 39px;
	}

	.post__excerpt {
		order: 2;
		
	}

	.post__cover {
		order: 3;
		margin-top: 33px;
	}
	.post__author {
		order: 4;
		margin-top: 33px;
	}
	.post__excerpt p {margin:18px 0 0;font-size: 15.9px;}
	.post__cover-image {border-radius: 24px;max-height: 170px;}
	.post__content {margin-top:0;}
	.post__content h2:first-of-type {margin-top: 23px;font-size: 36px;}
	.post__content h2:not(:first-of-type) {margin-top: 48px;font-size: 36px;}
	.wp-block-image {margin:0;border-radius: 24px;height:auto;}
	.post__content img {margin:0;}
}
/* =========================================================
   BLOG PAGE — ОСНОВНАЯ СТРУКТУРА
   ========================================================= */

.blog {
	background: #050505;
	padding: 155px 0;
}

.blog__container {
	max-width: 1320px;
	margin: 0 auto;
	padding: 0 0 0 8px;
	margin-top: 8px;
	box-sizing: border-box;
}

/* =========================================================
   ЗАГОЛОВОК СТРАНИЦЫ
   ========================================================= */

.blog__title {
	font-family: Impact;
	font-weight: 400;
	font-size: 52px;
	line-height: 60px;
	color: #F4F4F7;
	text-align: center;
	margin-bottom: 25px;
	letter-spacing: 0px;
    padding-left: 10px;
}

/* =========================================================
   ПОИСК ПО БЛОГУ (ИКОНКА СПРАВА)
   ========================================================= */

.blog-search {
	position: relative;
	width: 100%;
	margin-bottom: 20px;
}

.blog-search__input {
	width: 100%;
	height: 56px;
	padding: 0 44px 0 16px;
	background: #0E0E0E;
	border: 1px solid #262626;
	border-radius: 12px;

	font-family: Manrope;
	font-weight: 300;
	font-size: 16px;
	line-height: 24px;
	color: #F4F4F7;
}

.blog-search__input::placeholder {
	color: #F1F5F980;
}
.blog-search__input::-webkit-search-cancel-button {
	-webkit-appearance: none;
	display: none;
}

.blog-search__input::-webkit-search-decoration {
	-webkit-appearance: none;
}

.blog-search__input[type="search"] {
	appearance: textfield;
}

.blog-search__icon {
	position: absolute;
	right: 16px;
	top: 50%;
	transform: translateY(-50%) rotate(0deg);
	width: 20px;
	height: 20px;
	background: url('/wp-content/uploads/2025/12/icon-search-cyberbrain.svg') no-repeat center;
	background-size: contain;
	border: none;
	cursor: pointer;
	transition: transform 0.2s ease;
}

.blog-search__icon:hover {
	transform: translateY(-50%) rotate(90deg);
}

/* =========================================================
   ТАБЫ РУБРИК (CATEGORY)
   ВСЕГДА В ОДНУ ЛИНИЮ + SWIPE
   ========================================================= */

.blog-tabs {
	display: flex;
	gap: 12px;
	overflow-x: auto;
	white-space: nowrap;
	margin-bottom: 46px;
}

.blog-tabs::-webkit-scrollbar {
	display: none;
}

.blog-tabs__item {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 39px;
	padding: 0 15px 0 15px;

	border: 1px solid #262626;
	border-radius: 12px;

	font-family: Manrope;
	font-weight: 300;
	font-size: 16px;
	line-height: 24px;
	color: #F1F5F980;
	text-decoration: none;
transition: .2s;
	flex-shrink: 0;
}

.blog-tabs__item.is-active {
	color: #0B0B0B;
	border-color: #FFD700;
	background: #FFD700;
}

/* =========================================================
   FEATURED СТАТЬЯ
   ВЫСОТА 380px
   ========================================================= */

.blog-featured__item {
	display: grid;
	grid-template-columns: 536px 760px;
	gap: 24px;
	height: 380px;
	align-items: center;
	text-decoration: none;
	color: inherit;
}

.blog-featured__content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-right: 24px;
}

.blog-featured__category {
	font-family: Manrope;
	font-weight: 300;
	font-size: 14px;
	line-height: 20px;
	color: #F1F5F980;
	margin-bottom: 12px;
}

.blog-featured__title {
	font-family: Impact;
	font-weight: 400;
	font-size: 36px;
	line-height: 44px;
	color: #F4F4F7;
	margin-bottom: 16px;
	transition: .2s;
}

.blog-featured__meta {
	display: flex;
	gap: 8px;
	font-family: Manrope;
	font-weight: 300;
	font-size: 16px;
	line-height: 20px;
	color: #F1F5F980;
}

.blog-featured__image {
	display: flex;
	justify-content: flex-end;
}

.blog-featured__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 36px;
	max-height: 380px;
}

/* =========================================================
   РАЗДЕЛИТЕЛЬ
   ========================================================= */

.blog-divider {
	border: none;
	height: 1px;
	background: #262626;
	margin: 24px 0;
}

/* =========================================================
   СПИСОК ОСТАЛЬНЫХ СТАТЕЙ
   ВЫСОТА 208px + РАЗДЕЛИТЕЛИ
   ========================================================= */

.blog-list {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.blog-card {
	display: grid;
	grid-template-columns: 872px 424px;
	gap: 24px;
	height: 208px;
	position: relative;
	padding-bottom: 30px;
	margin-top: 24px;
}

.blog-card::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 1px;
	background: #262626;
}

.blog-card__content {
	display: flex;
	flex-direction: column;
	padding-right:24px;
	padding-bottom: 24px;
	margin-top:10px;
}

.blog-card__category {
	font-family: Manrope;
	font-weight: 300;
	font-size: 16px;
	line-height: 20px;
	color: #F1F5F980;
	margin-bottom: 12px;
	margin-top:12px;
}

.blog-card__title {
	font-family: Impact;
	font-weight: 400;
	font-size: 32px;
	line-height: 40px;
	color: #F4F4F7;
	margin-bottom: 12px;
}
.blog-card__title a {color:#fff;}
.blog-card__title a:hover {color:#FFD700;}
.blog-featured__title {color:#fff;}
.blog-featured__title:hover {color:#FFD700;}
.blog-tabs a:hover {border-color:#FFD700;}
.blog-card__meta {position: absolute;	left: 0;	bottom: 45px;	display: flex;	gap: 8px;	font-family: Manrope;	font-weight: 300;	font-size: 16px;	line-height: 20px;	color: #F1F5F980;}
.blog-card__image {	display: flex;	justify-content: flex-end;}
.blog-card__image img {	width: 100%;	height: 212px;	object-fit: cover;	border-radius: 36px;}
.blog-empty {margin: 80px 0;text-align: center;	font-family: Manrope;font-weight: 100;font-size: 16px;line-height: 24px;color: #F1F5F980;}
.blog-to-top {position: fixed;right: 24px;bottom: 24px;	z-index: 100;display: inline-flex;align-items: center;gap: 4px;padding: 16px;height: 56px;background: #0E0E0E;border: 1px solid #262626;border-radius: 44px;font-family: Manrope;font-weight: 300;font-size: 16px;line-height: 24px;color: #F4F4F7;cursor: pointer;opacity: 0;	visibility: hidden;	transform: translateY(12px);pointer-events: none;transition:	opacity 0.2s ease,transform 0.25s ease,visibility 0.25s ease;}
.blog-to-top__icon {width: 16px;height: 16px;}
.blog-to-top.is-visible {opacity: 1;visibility: visible;transform: translateY(0);pointer-events: auto;transition: .2s;}
.blog-to-top:hover {background: #141414;border-color: #FFD700;transition: .2s}
@media (max-width: 1319px) {
.blog__container {padding: 20px; }
	.blog-featured__item {
		grid-template-columns: 1fr 1fr;
	}

	.blog-card {
		grid-template-columns: 1fr 360px;
	}

	.blog-featured__image img,
	.blog-card__image img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
}
@media (max-width: 768px) {
	.blog {padding: 80px 0;}
	.blog-featured__item {grid-template-columns: 1fr;	height: auto;}
	.blog-card {grid-template-columns: 1fr;height: auto;}
	.blog-card__image {justify-content: center;}
	.blog-card__image img {height: 180px;}
	.blog__title {text-align: left;font-size:36px;padding-left: 0;margin-bottom: 12px;}
	.blog__container {padding:24px;margin-top: 4px;}
	.blog-tabs {margin-bottom: 32px;}
	.blog-featured, .blog-card {display: grid;grid-template-columns: 1fr;padding-bottom:48px;}
	.blog-featured__image, .blog-card__image {order: 1;}
	.blog-featured__content, .blog-card__content {order: 2;padding-bottom:0;}
	.blog-featured__image img, .blog-card__image img {border-radius: 24px;max-height: 170px;}
	.blog-featured__category, .blog-card__category {font-size:16px;line-height: 24px;}
	.blog-featured__title, .blog-card__title {line-height:40px;font-size:36px;}
	.blog-featured__meta, .blog-card__meta {font-size:16px;line-height:24px;position:static;}
	.blog-card::after {content: none;display: none;}
	.blog-divider {display: none;margin:0;}
	.blog-to-top {width: 56px;height: 56px;border-radius: 50%;padding: 0;display: flex;align-items: center;justify-content: center;position: fixed;left: 16px;bottom: 16px;right: auto;gap: 0;}
	.blog-to-top__text {display: none;}
	.blog-to-top__icon {width: 20px;height: 20px;}
}
/* =========================================================
   DEMO PAGE
========================================================= */

.demo {
	background: #050505;
	padding: 148px 0;
}

.demo__container {
	max-width: 1320px;
	margin: 0 auto;
	padding-left: 12px;
	position: relative;
}
.demo_form {background:#090A0B;border-radius:32px;border: 1px solid #FFFFFF0A;padding-top:48px;padding-bottom:48px;padding-right:48px;padding-left:48px;}
/* ---------------------------------------------------------
   КНОПКА НАЗАД
--------------------------------------------------------- */

.demo__back {
margin-bottom: 24px;
}

/* ---------------------------------------------------------
   ЗАГОЛОВОК
--------------------------------------------------------- */

.demo__title {
	font-family: Impact;
	font-weight: 400;
	font-size: 52px;
	line-height: 60px;
	color: #F4F4F7;
	text-align: center;
	margin-bottom: 16px;
}

/* ---------------------------------------------------------
   ПОДЗАГОЛОВОК
--------------------------------------------------------- */

.demo__subtitle {
	font-family: Manrope;
	font-weight: 300;
	font-size: 16px;
	line-height: 24px;
	color: #F1F5F980;
	text-align: center;
	max-width: 760px;
	margin: 0 auto 48px;
}

/* ---------------------------------------------------------
   КОНТЕНТ
--------------------------------------------------------- */

.demo__content {
	max-width: 1224px;
	margin: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	align-items: center;
}

/* ---------------------------------------------------------
   ФОРМА
--------------------------------------------------------- */

.demo-form {
	display: flex;
	flex-direction: column;
	gap: 16px;
	width: 436px;
}

.demo-form__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

.demo-form input,
.demo-form textarea {
	width: 100%;
	background: #0E0E0E;
	border: 1px solid #262626;
	border-radius: 12px;
	padding: 12px 19px;
	font-family: Manrope;
	font-weight: 300;
	font-size: 16px;
	line-height: 24px;
	color: #F4F4F7;
	height: 56px;
	transition: .2s;
}

.demo-form textarea {
	min-height: 112px;
	resize: none;
}

.demo-form input::placeholder,
.demo-form textarea::placeholder {
	color: #F1F5F980;
}

.demo-form__submit {
	margin-top: 8px;
	padding: 15px 0 17px 0;
	border-radius: 10px;
	background: #FFD700;
	color: #050505;
	font-family: Manrope;
	font-weight: 500;
	font-size: 16px;
	cursor: pointer;
	transition: .2s;
	line-height: 24px;
}
.demo-form__submit:hover {background: #5A4AEA;color:#F4F4F7;transition: .2s;}
.demo-form__submit:active {background: #352398;color:#F4F4F7;transition: .2s;}

/* ---------------------------------------------------------
   ПОЛИТИКА
--------------------------------------------------------- */

.demo-form__policy {
	font-family: Manrope;
	font-weight: 300;
	font-size: 16px;
	line-height: 24px;
	color: #F1F5F980;
	text-align:left;
}

.demo-form__policy a {
	color: #FFD700;
	text-decoration: none;
}
.demo-form__policy a:hover {
	text-decoration: underline;
}

/* ---------------------------------------------------------
   ИЗОБРАЖЕНИЕ
--------------------------------------------------------- */
.demo__image {width: 740px;padding: 0;margin: 0;}
.demo__image img {
	width: 100%;
	height: auto;
	border-radius: 10px;
	display: block;
}

/* Общий стиль при фокусе */
.demo-form input:focus,
.demo-form textarea:focus {
	outline: none;
	border-color: #FFD700;
	transition: .2s easy;
}

/* Для современных браузеров — только при реальном фокусе */
.demo-form input:focus-visible,
.demo-form textarea:focus-visible {
	outline: none;
	border-color: #FFD700;
	transition: .2s easy;
}
/* =========================================================
   STATUS ВНУТРИ ФОРМЫ
========================================================= */

.demo-form__status {
	margin-top: 16px;
	font-family: Manrope;
	font-size: 14px;
	line-height: 20px;
	text-align: center;
}

.demo-form__status.is-loading {
	color: #F1F5F9;
}

.demo-form__status.is-success {
	color: #4CAF50;
}

.demo-form__status.is-error {
	color: #FF4D4F;
}

/* =========================================================
   POPUP — ОБЩИЙ КОНТЕЙНЕР
========================================================= */

.demo-popup {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: none;
	align-items: center;
	justify-content: center;
}
.demo-popup.is-visible {
	display: flex;
	padding-top: 105px;
}
/* затемнение */
.demo-popup__overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.9);
}

/* =========================================================
   POPUP — КОНТЕНТ
========================================================= */

.demo-popup__content {
	position: relative;
	z-index: 1;

	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;

	background: #292C2F;
	width: 424px;
	height: 228px;
	text-align: center;
	color: #F4F4F7;
	border-radius: 24px;
}

/* =========================================================
   POPUP — СОСТОЯНИЯ
========================================================= */

.demo-popup__state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 16px;

	font-family: Manrope;
	font-size: 14px;
	line-height: 20px;
}

/* =========================================================
   POPUP — ИКОНКИ
========================================================= */

.demo-popup__icon {
	width: 54px;
	height: 54px;
	display: block;
}

.demo-popup__state {
	display: none;
	font-family: Manrope;
	font-size: 16px;
	line-height: 24px;
}
.demo-popup__loading {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 16px;
}

.demo-popup__spinner {
	width: 54px;
	height: 54px;
	background: url('https://slovaroid.qcrit.ru/wp-content/uploads/2025/12/loader.png') center / contain no-repeat;
	animation: demo-spin 1s linear infinite;
}

/* Анимация вращения */
@keyframes demo-spin {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}
@media (max-width: 768px) {
.demo {padding-top:105px;padding-bottom: 60px;}
.demo__container {box-sizing:border-box;padding-left:24px;padding-right: 10px;}
.demo_form {padding:0;background:none;border-radius:0;border:none;}
.demo__title {font-size:36px;line-height:40px;text-align:left;}
.demo__subtitle {text-align:left;margin-bottom: 36px;}
.demo__back {margin-bottom:28px;}
.demo-form__row {grid-template-columns: 1fr;gap: 16px;}
.demo__content {grid-template-columns: 1fr;}
.demo__image {order: 2;width: 100%;}
.demo-form {order: 1;width: auto;}
}
.demo-popup--form {
	display: none;
}

.demo-popup--form:not([hidden]) {
	display: flex;
}

.demo-popup__content--form {
	max-width: 100%;
	max-height: 100%;
	overflow-y: auto;
	padding: 0;
}
.demo-popup__content {width:auto;height:auto;background:none;}
.popup .demo__back {
	width: 100%;
	display: flex;
	justify-content: flex-start;
}

@media (max-width: 1322px) {
	.demo__image {width:100%;}
	}
@media (max-width: 768px) {.popup {padding-top:205px;}.popup .demo__back{padding: 24px;margin:0;padding-top:94px;}}
@media (max-width: 400px) {.popup {padding-top:345px;padding-bottom: 60px;}.demo-popup.is-visible{padding-top:0;}}
/* =========================================================
   POPUP STATES — OVERLAY MODE
========================================================= */

.demo-popup__content {
	position: relative; /* КЛЮЧЕВО */
}
.demo-popup__state {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	inset: 0;
	z-index: 10;
	display: none;
	align-items: center;
	justify-content: center;
	text-align: center;
	background: #292C2F;
	width: 424px;
	height: 228px;
	text-align: center;
	color: #F4F4F7;
	border-radius: 24px;
}

/* когда показываем */
.demo-popup__state[style*="display: flex"] {
	display: flex;
}
.demo-popup--form .demo-popup__content {
	position: relative;
}

.demo-popup--form .demo-popup__state {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);

	width: 424px;
	height: 228px;

	display: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 16px;

	background: #292C2F;
	border-radius: 24px;
	z-index: 10;
}
.popup__container {padding: 0 24px;}
.blog-loader {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin: 40px auto;
	font-size: 14px;
	color: #666;
}

.blog-loader[hidden] {
	display: none;
}

.blog-loader__spinner {
	width: 54px;
	height: 54px;
	background: url('https://slovaroid.qcrit.ru/wp-content/uploads/2025/12/loader.png') center / contain no-repeat;
	animation: blog-spin 1s linear infinite;
}

@keyframes blog-spin {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}
.demo-popup__close {
	position: absolute;
	top: -142px;
	right: -246px;
	width: 36px;
	height: 36px;
	border: none;
	background: transparent;
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
	color: #FFF;
	z-index: 999;
	transition: transform 0.2s ease;
	transform-origin: center;
}

.demo-popup__close:hover {
	transform: rotate(180deg);
}
.newoverlay {width:100%;background:black;}
.new-popup__close {
	position: absolute;
	top: -42px;
	right: -46px;
	width: 36px;
	height: 36px;
	border: none;
	background: transparent;
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
	color: #FFF;
	z-index: 999;
	transition: transform 0.2s ease;
	transform-origin: center;
}

.demo-popup__close:hover {
	transform: rotate(180deg);
}
.new-popup__close:hover {
	transform: rotate(180deg);
}
.demo-popup__state {
	position: absolute;
	inset: 0;
	z-index: 5;

	display: none;
	align-items: center;
	justify-content: center;
}
.page-404 {
	min-height: 80vh;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}

.page-404__container {
	max-width: 600px;
	padding-top: 196px;
    padding-bottom: 80px;
	margin-left: 17px;
}

.page-404__image img {
	width: 457.1777px;
	height: 246.2402px;
	opacity: 1;
	display: block;
	margin: 0 auto 32px;
}

.page-404__title {
	font-family: Impact, sans-serif;
	font-weight: 400;
	font-size: 52px;
	line-height: 60px;
	margin-bottom: 16px;
	margin-top: 48px;
}

.page-404__text {
	font-family: "Manrope", sans-serif;
	font-weight: 300;
	font-size: 18px;
	line-height: 28px;
	margin-bottom: 32px;
	margin-top: 24px;
}

.page-404__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 20px 24px;
	line-height: 24px;
	color: #fff;
	font-family: "Manrope", sans-serif;
	font-size: 16px;
	font-weight: 500;
	text-decoration: none;
	transition: background-color 0.2s ease, border-color 0.2s ease;
	border: 1px solid #F1F5F980;
	border-radius:12px;
	margin-top: 7px;
    margin-left: -1px;
}
.page-404__action {transition: transform 0.2s ease;}

.page-404__button:hover {
	background: #FFFFFF33;
}
.page-404__button:active {
	background: #FFFFFF0D;
	transition: transform 0.2s ease;
}
@media (max-width: 768px) {

	.page-404 {
		min-height: auto;
	}

	.page-404__container {
		padding-top: 191px;
		padding-bottom: 110px;
		margin-left: 0;
		max-width: 100%;
	}

	.page-404__image img {
		width: 100%;
		max-width: 222.11px;
		height: auto;
	}

	.page-404__title {
		font-size: 36px;
		line-height: 40px;
		margin-top: 28px;
		margin-left: -8px;
		padding: 0;
	}

	.page-404__text {
		font-size: 18px;
		line-height: 28px;
		margin-top: 18px;
	}

	.page-404__button {
		max-width: 280px;
		padding: 16px 24px;
	}
}
.contacts-page__container {
	max-width: 1320px;
	margin: 0 auto;
	padding: 163px 0 75px;
}

.contacts-page__title {
	font-family: Impact, sans-serif;
	font-weight: 400;
	font-size: 52px;
	line-height: 60px;
	text-align: center;
	margin-bottom: 50px;
	margin-left: 13px;
}

.contacts-page__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 36px;
	background: #090A0B;
	border: 1px solid #FFFFFF0A;
	padding:38px 28px 40px 40px;
	border-radius:36px;
	margin: 6px;
	margin-left: 6px;
}

/* Левая колонка */
.contacts-page__block {
	margin-bottom: 40px;
}

.contacts-page__label {
	display: block;
	font-family: Manrope, sans-serif;
	font-weight:600;
	font-size: 20px;
	margin-bottom: 10px;
	line-height:28px;
}

.contacts-page__value {
	font-family: Manrope, sans-serif;
	font-size: 16px;
	line-height: 24px;
	color: #fff;
	font-weight:300;
}

.contacts-page__socials {
	display: flex;
	gap: 13px;
	margin-top: auto;
	align-items: flex-end;
	transition: .2s;
}

.contacts-page__social {
	width: 58px;
	height: 58px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	border: 1px solid #FFFFFF0A;
	background: #141617;
	transition: .2s;
}

.contacts-page__social img,
.contacts-page__social svg {
	width: 24px;
	height: 24px;
	display: block;
}
.contacts-page__form .demo-form {
	width: 100%;
}
.contacts-page__info {width:684px;}
.contacts-page__address {margin-top: 10px;}
.contacts-page__label_ad {display: block;font-family: Manrope, sans-serif;font-weight: 600;font-size: 20px;margin-bottom: 12px;line-height: 28px;}
.contacts-page__value_ad {font-family: Manrope, sans-serif;font-size: 16px;line-height: 24px;color: #fff;font-weight:300;}
.contacts-page__info {
	display: flex;
	flex-direction: column;
	height: 100%;
}
.contacts-page__social:hover {
	border: 1px solid #FFD700;
}
.contacts-page__block a:hover {color:#FFD700;text-decoration:underline;}
.contacts-page__form {
	display: flex;
	flex-direction: column;
	grid-row: span 2;
}
@media (max-width: 1300px) {.contacts-page__info {width:50%;} }
@media (max-width: 768px) {
	.contacts-page__container {padding: 120px 19px 75px 19px;}
		.contacts-page__info {
		grid-row: 1;
		width: 100%;
		margin-top: 10px;
	}
	.contacts-page__block {margin-bottom: 15px;}
.contacts-page__grid {grid-template-columns: 1fr;
        border: none;
        background: none;
        margin: 6px;
        border-radius: 0;
        margin-top: 22px;
		padding: 0;
		gap: 0;}
	.contacts-page__form {
		grid-row: 2;
	}

	.contacts-page__socials {
		grid-row: 3;
	}

	.contacts-page__info {
		height: auto;
	}
	.contacts-page__socials {
		margin-top: 32px;
	}
	.contacts-page__title {
		font-size: 36px;
		line-height: 40px;
		text-align: left;
		margin-left: 6px;
		margin-bottom: 0;
	}

	.contacts-page__label,
	.contacts-page__label_ad {
		font-size: 20px;
		line-height: 28px;
		margin-bottom: 8px;
	}
.contacts-page__address {margin-top: 8px;}
	.contacts-page__value,
	.contacts-page__value_ad {
		font-size: 16px;
		line-height: 24px;
		margin-bottom: 34px;
	}

	.contacts-page__social {
		width: 52px;
		height: 52px;
	}

	.contacts-page__social img,
	.contacts-page__social svg {
		width: 22px;
		height: 22px;
	}

}
.btn-2:hover {
	background: rgba(255,255,255,.15) !important;
}

.btn-2:active {
	background: rgba(255,255,255,.05);
	color: rgba(241,245,249,.5);
	border: 1px solid rgba(241,245,249,.5);
}
.blog-loaderx {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: none;
	display: flex;
	align-items: center;
	justify-content: center;
}

.blog-loaderx[hidden] {
	display: none;
}

.blog-loaderx__overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.9);
}

.blog-loaderx__box {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 1;
	transform: translate(-50%, -50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 16px;
	width: 424px;
	height: 228px;
	background: #292C2F;
	color: #F4F4F7;
	border-radius: 24px;
	text-align: center;
	font-family: Manrope, sans-serif;
	font-size: 16px;
	line-height: 24px;
}

.blog-loaderx__spinner {
	width: 54px;
	height: 54px;
	background: url('https://slovaroid.qcrit.ru/wp-content/uploads/2025/12/loader.png') center / contain no-repeat;
	animation: blog-spin 1s linear infinite;
}

@keyframes blog-spin {
	from { transform: rotate(0deg); }
	to   { transform: rotate(360deg); }
}
/* =========================================================
   БАЗОВЫЙ ВИД ПУНКТОВ МЕНЮ
========================================================= */

.header .menu ul li a,
.header .menu ul li .menu-heading__title,
.header .menu ul li .js-submenu-toggle,
.SiteHeaderNavItem__link {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;

    padding: 31px 0;
    box-sizing: border-box;

    font-size: 16px;
    color: #F4F4F7;
    font-weight: 300;

    background: none;
    border: 0;
    cursor: pointer;

    transition: color .2s ease;
}


/* =========================================================
   ПОЛНОСТЬЮ ОТКЛЮЧАЕМ ВСЕ LEGACY-СТРЕЛКИ
========================================================= */

.header .menu ul li.menu-item-has-children::before,
.header .menu ul li.menu-item-has-children::after,
.header .menu ul li.menu-item-has-children > a::before,
.header .menu ul li.menu-item-has-children > a::after,
.header .menu ul li.menu-item-has-children > span::before,
.header .menu ul li.menu-item-has-children > span::after {
    content: none !important;
    background: none !important;
}


/* =========================================================
   STRIPE CARET (SVG)
========================================================= */

.SiteHeaderNavItem__link--hasCaret {
    display: inline-flex;
    align-items: center;
}

/* контейнер каретки */
.SiteHeaderNavItem__linkCaretContainer {
    display: inline-flex;
    align-items: center;
    margin-left: 10px;
	font-size: 0;
}

/* сами svg */
.SiteHeaderNavItem__linkCaret {
    display: block;
    color: currentColor;
    transition: transform .2s cubic-bezier(.4, 0, .2, 1);
	font-size: 7px;
}

/* убираем зазор между SVG */
.SiteHeaderNavItem__linkCaret--left {
    margin-right: -2px;
}

.SiteHeaderNavItem__linkCaret--right {
    margin-left: -2px;
}


/* =========================================================
   ИСХОДНОЕ СОСТОЯНИЕ
   визуально: ˅
========================================================= */

.SiteHeaderNavItem__linkCaret--left,
.SiteHeaderNavItem__linkCaret--right {
    transform: rotate(0deg);
}


/* =========================================================
   ОТКРЫТО (aria-expanded="true")
   эффект "парения" как у Stripe
========================================================= */

.SiteHeaderNavItem__link--hasCaret[aria-expanded="true"]
.SiteHeaderNavItem__linkCaret--left {
    transform: rotate(-90deg);
}

.SiteHeaderNavItem__link--hasCaret[aria-expanded="true"]
.SiteHeaderNavItem__linkCaret--right {
    transform: rotate(90deg);
}


/* =========================================================
   ЦВЕТ (hover + open)
========================================================= */

.SiteHeaderNavItem__link--hasCaret:hover,
.SiteHeaderNavItem__link--hasCaret[aria-expanded="true"] {
    color: gold;
}


/* =========================================================
   SUBMENU VISIBILITY
========================================================= */

.menu-item-has-children .submenu-box {
    max-height: 0;
    overflow: hidden;
    transition: max-height .2s ease;
}

.menu-item-has-children.is-open > .submenu-box {
    max-height: 1000px; /* с запасом */
}


/* =========================================================
   MOBILE MENU
========================================================= */

.mobmenu .block_box .wrapper_box .menu_box ul li a,
.mobmenu .block_box .wrapper_box .menu_box ul li .menu-heading__title,
.mobmenu .block_box .wrapper_box .menu_box ul li .js-submenu-toggle,
.mobmenu .SiteHeaderNavItem__link {
    width: 100%;
    display: flex;
    align-items: center;
    box-sizing: border-box;

    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    color: #F4F4F7;

    background: none;
    border: 0;
    cursor: pointer;
}
/* desktop */
.header .menu ul li.menu-item-has-children > .js-submenu-toggle,
.header .menu ul li.menu-item-has-children > .menu-heading__title {
    cursor: default !important;
}

/* mobile */
.mobmenu .menu-item-has-children > .js-submenu-toggle,
.mobmenu .menu-item-has-children > .menu-heading__title {
    cursor: default !important;
}

/* 2) текст и svg всегда берут цвет родителя */
.header .menu .SiteHeaderNavItem__label,
.mobmenu .SiteHeaderNavItem__label,
.header .menu .SiteHeaderNavItem__linkCaret,
.mobmenu .SiteHeaderNavItem__linkCaret {
  color: inherit;
}

.header .menu .SiteHeaderNavItem__linkCaret path,
.mobmenu .SiteHeaderNavItem__linkCaret path {
  fill: currentColor;
}

/* 3) DESKTOP: красим весь триггер при наведении на li */
@media (hover: hover) {
  .header .menu ul li.menu-item-has-children:hover > .SiteHeaderNavItem__link--hasCaret,
  .header .menu ul li.menu-item-has-children:hover > .menu-heading__title.SiteHeaderNavItem__link--hasCaret {
    color: gold !important;
  }
}

/* 4) MOBILE: красим при открытии */
.menu-item-has-children.is-open > .SiteHeaderNavItem__link--hasCaret,
.menu-item-has-children.is-open > .menu-heading__title.SiteHeaderNavItem__link--hasCaret {
  color: gold !important;
}
@media (hover: none) {
  .mobmenu .menu-item-has-children > .submenu-box { display: none; }
  .mobmenu .menu-item-has-children.is-open > .submenu-box { display: block; }
}
.mobmenu .submenu-box {
  height: 0;
  overflow: hidden;
  transition: height .2s ease;
}
.header .menu ul {margin-left:2px !important;}
.header .logo_block img {margin-left: 1px !important;}
.header {padding: 0 17px 0 28px !important;}
.header .btn_box .btn.login {max-width: 86px !important;}
#footer .container {
    padding: 0 31px !important;
}
#footer .wrapper_box .main_box .items_box {margin-top: 38px !important;}
#footer .wrapper_box {
    display: flex;
    justify-content: flex-start;
    gap: 15px;
}

#footer .main_box,
#footer .menu_box {
    flex: 1;
}
#footer .wrapper_box .main_box {min-width: 435px !important;}
#footer .wrapper_box > .menu_box:nth-of-type(2) {
    flex: 2 1 120px;
}
#footer .wrapper_box > .menu_box:nth-of-type(3) {
    flex: 0 0 265px;
}
#footer .wrapper_box > .menu_box:nth-of-type(4) {
    flex: 2 1 65px;
}
#footer .wrapper_box > .menu_box:nth-of-type(5) {
    flex: 0 0 185px;
}
#footer .wrapper_box .menu_box .menu ul li {margin-bottom:22px !important;}
@media (max-width: 1200px) {
#footer .wrapper_box .main_box {min-width: 100% !important;}
    #footer .wrapper_box {
        flex-wrap: wrap;
        gap: 32px;
    }

    #footer .main_box {
        flex: 0 0 100%;
        min-width: 0 !important;
    }

    #footer .menu_box {
        flex: 0 0 calc(50% - 16px);
        min-width: 0;
    }
}
@media (max-width: 768px) {

    #footer .container {
        padding: 0 24px !important;
    }

    #footer .wrapper_box {
        flex-direction: column;
        gap: 28px;
		row-gap: 0 !important;
		padding-bottom: 24px;
    }

    #footer .main_box,
    #footer .menu_box {
        flex: 0 0 100%;
        min-width: 0 !important;
    }

    #footer .wrapper_box .main_box .items_box {
        margin-top: 30px !important;
    }
	#footer .wrapper_box .foo_title {margin-bottom: 24px !important;margin-top: 50px;}
	#footer .wrapper_box > .menu_box:nth-of-type(2) {
    margin-top: 0px;}
	#footer .wrapper_box > .menu_box:nth-of-type(4) {margin-bottom:30px;}
	#footer .wrapper_box > .menu_box {margin-top: -24px;}
}
@media screen and (max-width: 1200px) {
    .header {height:72px;padding: 12px 18px 12px 12px !important;}
}
/* градиентная подложка */
.header::before {
    content: '';
    position: fixed;

    top: 0;
    left: 0;

    width: 100vw;
    height: 120px; /* зона затемнения */

    pointer-events: none;

    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.85) 0%,
        rgba(0, 0, 0, 0.6) 40%,
        rgba(0, 0, 0, 0.2) 70%,
        rgba(0, 0, 0, 0) 100%
    );

    z-index: -1;
}
.field {
	position: relative;
}
.field.is-error input {
	border-color: #EC221F;
}
.field.is-error textarea {
	border-color: #EC221F;
}
.field input + .field__error {
	top: 50%;
	transform: translateY(-50%);
}
.field textarea + .field__error {
	top: 12px;
	transform: none;
}
.field__error {
	position: absolute;
	right: 12px;
	color: #EC221F;
	font-size: 12px;
	line-height: 1.2;
	pointer-events: none;
	white-space: nowrap;
}
.demo-popup {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.demo-popup.is-visible {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}
/* =========================================================
   WORK SCHEME TEXT BLOCK
========================================================= */

.work-scheme-text__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	margin-top: 48px;
}
.work-scheme_item {
	background: #141617;
	border: 1px solid #FFFFFF0A;
	border-radius: 36px;

	display: flex;
	flex-direction: column;

	overflow: hidden; /* важно для скруглений */
}
.work-scheme-text__content {
	padding: 46px 46px 40px 46px;
	display: flex;
	flex-direction: column;
	gap: 24px;
}
.work-scheme-text__subtitle {
	font-weight: 600;
	font-size: 20px;
	line-height: 28px;
	color: #F4F4F7;
}
.work-scheme-text__desc {font-family: Manrope;
font-weight: 300;
font-size: 16px;
line-height: 24px;
margin-top:12px;
}


.work-scheme-text__footer {
	position: relative;
	background: #292C2F;
	max-height: 72px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: Manrope, sans-serif;
	font-weight: 600;
	font-size: 20px;
	line-height: 28px;
	color: #F4F4F7;
	text-align: center;
	padding-top: 20px;
    padding-bottom: 24px;
	flex-shrink: 0;
	margin-top: auto;
}
.work-scheme-text__image-wrap {
	position: relative;
	max-width: 496px;
	margin-top: 56px;
	margin-left: 28px;
}
.work-scheme-text__image {
	width: 100%;
	display: block;
}
.work-scheme-text__footer--gold {
	background: #FFD700;
	color: #141617;
}
/* уголок */
.work-scheme-text__image-wrap::after {
	content: "";
	position: absolute;

	bottom: -52px;
	left: 92%;

	transform: translateX(-50%) rotate(-45deg);

	width: 24px;
	height: 24px;

	background: #292C2F;
	z-index: 2;
}
.work-scheme_item:has(.work-scheme-text__footer--gold)
	.work-scheme-text__image-wrap::after {
	background: #292c2f00;
}
/* =========================================================
   WORK SCHEME TEXT BLOCK
========================================================= */

.work-scheme-text__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	margin-top: 48px;
}
.work-scheme_item {
	background: #141617;
	border: 1px solid #FFFFFF0A;
	border-radius: 36px;

	display: flex;
	flex-direction: column;

	overflow: hidden; /* важно для скруглений */
}
.work-scheme-text__content {
	padding: 46px 46px 40px 46px;
	display: flex;
	flex-direction: column;
	gap: 24px;
}
.work-scheme-text__subtitle {
	font-weight: 600;
	font-size: 20px;
	line-height: 28px;
	color: #F4F4F7;
}
.work-scheme-text__desc {font-family: Manrope;
font-weight: 300;
font-size: 16px;
line-height: 24px;
margin-top:12px;
}


.work-scheme-text__footer {
	position: relative;
	background: #292C2F;
	max-height: 72px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: Manrope, sans-serif;
	font-weight: 600;
	font-size: 20px;
	line-height: 28px;
	color: #F4F4F7;
	text-align: center;
	padding-top: 20px;
    padding-bottom: 24px;
}
.work-scheme-text__image-wrap {
	position: relative;
	max-width: 496px;
	margin-top: 56px;
	margin-left: 28px;
}
.work-scheme-text__image {
	width: 100%;
	display: block;
}
.work-scheme-text__footer--gold {
	background: #FFD700;
	color: #141617;
}
/* уголок */
.work-scheme-text__image-wrap::after {
	content: "";
	position: absolute;

	bottom: -52px;
	left: 92%;

	transform: translateX(-50%) rotate(-45deg);

	width: 24px;
	height: 24px;

	background: #292C2F;
	z-index: 2;
}
.work-scheme_item:has(.work-scheme-text__footer--gold)
	.work-scheme-text__image-wrap::after {
	background: #292c2f00;
}
@media (max-width: 768px) {

	.work-scheme-text__grid {
		grid-template-columns: 1fr;
		gap: 6px;
		margin-top: 32px;
	}

	.work-scheme_item {
		border-radius: 24px;
	}

	.work-scheme-text__content {
		padding: 26px 21px 36px;
		gap: 16px;
	}

	.work-scheme-text__subtitle {
		font-size: 20px;
		line-height: 28px;
	}

	.work-scheme-text__desc {
		font-size: 16px;
		line-height: 24px;
		margin-top: 16px;
	}

	.work-scheme-text__image-wrap {
		margin-top: 32px;
		margin-left: 0px;
		max-width:100%;
	}

	.work-scheme-text__footer {
		font-size: 20px;
		line-height: 28px;
		padding-top: 16px;
		padding-bottom: 20px;
		max-height:64px;
	}
	.work-scheme-text__image-wrap::after {bottom: -50px;}
}
@media (max-width: 390px) {.header {max-width: 382px;} .blog-loaderx__box{width: 342px;height: 204px;}}
.btn_box .btn {padding: 15px 0 17px 0!important;line-height: 24px !important;height: auto !important;}
.content .btn {padding: 15px 0 17px 0!important;line-height: 24px !important;height: auto !important;}
.btn-2 {padding: 15px 0 17px 0 !important;line-height: 24px !important;height: auto !important;}
.cta-block1 .btn {padding: 15px 0 17px 0 !important;line-height: 24px !important;height: auto !important;}
.header .btn_box .btn.cta {padding: 7px 20px 9px 20px !important;}
.section-benefits4 .wrapper_box .btn_box .btn {width:241px;}
.menu-disabled-tariffs {
    padding: 31px 0;
    display: inline-flex;
    align-items: center;

    color: rgba(241, 245, 249, .5) !important;
    cursor: default;
    pointer-events: none;
    user-select: none;
}
@media (max-width: 768px) {.menu-disabled-tariffs {width: 100%;
    display: block;
    box-sizing: border-box;
    padding: 20px 25px;
    font-size: 16px;
    color: #F4F4F7;
    font-weight: 600;
line-height: 1.2;}}
.main-container {position: relative !important;
    overflow: hidden !important;
    background-repeat: no-repea !importantt;
    background-size: cover !important;
    background-position: center bottom !important;
    max-height: 1184px !important;}
.blog-loaderx {
	display: none !important;
	pointer-events: none;
}