/* Start:/local/templates/direkt2026/assets/css/feedback_form.css?17860103196526*/
.feedback.feedback__direction {
	background: transparent;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, calc(50% - 28px));
	gap: 56px;
	align-items: start;
}
.feedback.feedback__direction h2 {
	font-size: var(--size-h1);
	margin: 0;
}
.feedback.feedback__direction .feedback_block:first-child,
.feedback.feedback__direction .feedback_block {
	max-width: unset;
}

.feedback__direction .feedback_descr {
	font-family: 'GeologicaThin';
	color: var(--color-light);
}
.feedback__direction .feedback_list {
	margin-left: 18px;
}
.feedback__direction .feedback_item {
	display: grid;
	grid-template-columns: 48px calc(100% - 48px);
	align-items: center;
	margin-top: 46px;
}
.feedback__direction .feedback_item:first-child {
	margin-top: 0;
}
.feedback__direction .feedback_item__icon {
	width: 34px;
	height: 34px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--color-link);
	border-radius: 9px;
}
.feedback__direction .feedback_item__info {
	color: var(--color-light);
	font-family: 'Geologica';
	font-size: 16px;
}
.feedback__direction .feedback_item__title {
	color: rgba(255, 255, 255, 0.8);
	font-family: 'GeologicaBold';
	font-size: 24px;
}
.feedback__direction .feedback_bottom {
	display: flex;
	gap: 12px;
	align-items: center;
	margin-top: 15px;
	margin-left: 8px;
}
.feedback__direction .feedback_bottom img {
	max-height: 82px;
}
.feedback__direction .feedback_bottom svg {
	max-height: 67px;
}
.feedback__direction .feedback_bottom__delimiter {
	min-height: 67px;
	height: 100%;
	width: 2px;
	background: var(--color-text);
	margin-left: -10px;
}
.feedback__direction svg + span {
	font-size: 32px;
	font-family: 'GeologicaRegular';
}
.feedback__direction svg + span + span {
	font-size: 96px;
	font-family: 'GeologicaRegular';
}
.feedback__direction .form-feedback {
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid var(--color-text);
	padding: 36px 27px;
	border-radius: var(--border-radius);
}
.feedback__direction .form-wrapper {
	margin-top: 23px;
}
.feedback__direction .flex .form-wrapper {
	width: calc(50% - 6px);
}

.feedback__direction .leadForm .form-wrapper label {
	margin-bottom: 7px;
	display: block;
}
.feedback__direction .leadForm .form-wrapper input,
.feedback__direction .leadForm .form-wrapper textarea {
	border: 1px solid rgba(255, 255, 255, 0.08);
	background: rgba(255, 255, 255, 0.05);
	padding: 11px 14px;
	width: 100%;
	border-radius: 20px;
	color: var(--color-text);
	font-family: 'Geologica';
	font-size: 20px;
}
.feedback__direction .leadForm .form-wrapper textarea {
	resize: none;
	height: 88px;
}
.feedback__direction .leadForm .btn {
	margin-top: 10px;
	font-family: 'GeologicaThin';
}
.feedback__direction label.checkbox__square {
	margin-top: 13px;
}
.formFeedback__message {
	display: none;
	font-size: 20px;
}

.feedback__direction span.error-message {
	font-size: 12px;
}

.form-wrapper .file-drop-area {
	display: flex;
	align-items: center;
	position: relative;
}
.feedback__direction .leadForm .file-drop-area .btn {
	margin: 0;
	padding: 15px 20px;
	font-size: 16px;
}
.file-msg {
    margin-left: 15px;
    font-size: 14px;
    color: #666;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.file-input {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0;
    cursor: pointer;
}

/* ---------- прикрепление резюме: подсказка и состояния ---------- */

/* Что можно приложить — видно до выбора файла, а не после отказа */
.file-hint {
    display: block;
    margin-top: 8px;
    font-size: 12px;
    line-height: 1.4;
    color: #83888D;
}

/* Файл выбран — подпись становится основным цветом текста */
.file-drop-area--filled .file-msg {
    color: var(--color-text);
}

/* Файл перетаскивают в зону */
.file-drop-area--over {
    outline: 1px dashed var(--color-accent, #483BF5);
    outline-offset: 6px;
    border-radius: 8px;
}

.file-drop-area--error .file-msg {
    color: #FF5A6E;
}

/* Крестик поверх невидимого input: у него z-index выше, чтобы клик по
   крестику снимал файл, а не открывал диалог выбора заново */
.file-reset {
    display: none;
    position: relative;
    z-index: 2;
    margin-left: 10px;
    padding: 0 6px;
    background: none;
    border: none;
    color: #83888D;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    transition: color .15s;
}
.file-reset:hover { color: #FF5A6E; }
.file-drop-area--filled .file-reset { display: inline-block; }

/* Подсветка поля, на которое сервер вернул ошибку */
.feedback__direction .leadForm .input-error,
.leadForm .input-error {
    border-color: #FF5A6E;
}

/* Сообщение об отказе показываем тем же блоком, что и успех */
.formFeedback__message--error {
    color: #FF5A6E;
    font-size: 16px;
}

/* Звёздочка обязательного поля: проставляется из main.js по атрибуту required */
.req-mark {
    color: #FF5A6E;
    font-weight: 400;
}

@media (max-width: 991px) {
	.feedback.feedback__direction {
		grid-template-columns: 100%;
		margin-top: 60px;
	}
	.feedback__direction .feedback_item {
		display: flex;
		gap: 15px;
	}
	.feedback__direction .feedback_item__info {
		text-align: left;
	}
	.feedback__direction .flex .form-wrapper {
		width: calc(50% - 6px);
	}
}
@media (max-width: 844px) {
	.feedback.feedback__direction h2 {
		font-size: 28px;
	}
	.feedback__direction .feedback_item__title {
		font-size: 18px;
	}
	.feedback .feedback_block:last-child {
		text-align: left;
	}
	.feedback__direction .leadForm .form-wrapper input, 
	.feedback__direction .leadForm .form-wrapper textarea,
	.feedback__direction .leadForm .selectNative, 
	.feedback__direction .leadForm .selectCustom-trigger {
		font-size: 16px;
	}
}
@media (max-width: 768px) {
	.feedback.feedback__direction .feedback_block:last-child {
		padding-top: 0;
	}
	.feedback.feedback__direction .form-feedback {
		padding: 0px 10px;
	}
	.feedback.feedback__direction .leadForm {
		padding: 20px 10px;
	}
}
@media (max-width: 475px) {
	.feedback.feedback__direction .leadForm > .flex {
		flex-direction: column;
	}
	.feedback.feedback__direction .flex .form-wrapper {
		width: 100%;
	}
}
/* End */


/* Start:/local/templates/direkt2026/assets/css/direction.css?178834586122027*/
.direction h2:not(.cases-item__title) {
	font-size: var(--size-h1);
}

.direction-title {
	font-family: 'GeologicaBold';
	font-size: var(--size-h1);
	margin-bottom: 42px;
}
.direction-descr {
	display: grid;
	grid-template-columns: repeat(2, calc(50% - 2.3vw));
	gap: 4.6vw;
	font-size: 18px;
	font-family: 'GeologicaThin';
}
.direction-descr + .directions-list {
	margin-top: 11vw;
	margin-bottom: 8.4vw;
}
.directions-list .info-content__footer-title {
	font-family: "GeologicaBold";
	font-size: 28px;
}
.directions-list__top img {
	max-height: 28px;
}
.directions-list__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
}


h2:has(+ .direction-text) {
	margin-bottom: 32px;
}
.direction-text {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--size-h1);
	font-size: 32px;
	font-family: 'GeologicaRegular';
	padding-bottom: 80px;
	margin-bottom: 80px;
	position: relative;
}
.direction-text.direction-text__line:after {
	content: "";
	width: 77%;
	height: 2px;
	display: block;
	background: var(--color-text);
	margin: 0 auto;
	position: absolute;
	bottom: 0;
}
.direction-text .btn {
	padding: 16px 57px;
	white-space: nowrap;
	font-family: 'GeologicaThin';
}

.direction-compare {
	background: rgba(132, 59, 245, 0.2);
	margin-bottom: 160px;
	border-radius: 24px;
}
.direction-compare__arrow {
	display: flex;
	gap: 12px;
	align-items: center;
	width: auto;
	height: auto;
	flex: 1 0;
}
.direction-compare__top:not(.active) .direction-compare__arrow svg {
	animation: slideArrow 2s infinite; 
}
.direction-compare__top:not(.active) .direction-compare__arrow svg.arrow.second-arrow {
	animation-delay: 0.35s;
}
.direction-compare__top:not(.active) .direction-compare__arrow svg.arrow.first-arrow {
	animation-delay: 0.7s;
}
/* Анимация проваливания и появления стрелок */
@keyframes slideArrow {
	0% {
		transform: translateX(0); /* Исходное положение */
		opacity: 1; /* Видимая стрелка */
	}
	40% {
		transform: translateX(100%); /* Проваливается вниз */
		opacity: 0; /* Исчезает */
	}
	60% {
		transform: translateX(-100%); /* Появляется сверху */
		opacity: 0; /* Ещё невидимая */
	}
	100% {
		transform: translateX(0); /* Возвращается в исходное положение */
		opacity: 1; /* Снова видимая */
	}
}

.direction-compare__top.active .direction-compare__arrow {
	justify-content: end;
}
.direction-compare__top.active .direction-compare__arrow svg {
	display: none;
}
.direction-compare__top.active .direction-compare__arrow svg.first-arrow {
	display: block;
	transform: rotate(-90deg);
}

.direction-compare__content {
	opacity: 0;
	height: 0;
	transition: all 0.5s ease;
}

.direction-compare__top h2 {
	margin: 0;
	line-height: 1.2;
	flex: none;
}
.direction-compare__top {
	display: flex;
	align-items: center;
	gap: 40px;
	cursor: pointer;
	padding: 15px 27px;
}
.direction-compare__top.active {
	justify-content: space-between;
}
.direction-compare__top.active + .direction-compare__content {
	opacity: 1;
	height: auto;
	padding-top: 35px;
	padding-bottom: 20px;
}

.direction-compare__item {
	text-align: center;
	display: grid;
	grid-template-columns: repeat(var(--count, 4), calc(100%/var(--count, 4) - ((32px * (var(--count, 4) - 1)) / var(--count, 4))));
	gap: 32px;
	align-items: center;
}
.direction-compare__item:not(.direction-compare__title) {
	cursor: pointer;
	border-radius: var(--border-radius);
	padding: 15px 8px;
	transition: all 0.5s ease;
}
.direction-compare__item:not(.direction-compare__title).active {
	background: rgba(132, 59, 245, 0.3);
}
.direction-compare__title {
	font-family: 'GeologicaBold';
	font-size: 28px;
	margin-bottom: 24px;
}
.icon-false {
	background: url("data:image/svg+xml,%3Csvg width='16' height='2' viewBox='0 0 16 2' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.000117242 1.48012V0.000116944H15.2501V1.48012H0.000117242Z' fill='white'/%3E%3C/svg%3E") no-repeat 0 0 transparent;
	display: block;
	width: 16px;
	height: 2px;
	margin: 0 auto;
}
.icon-true {
	background: url("data:image/svg+xml,%3Csvg width='15' height='16' viewBox='0 0 15 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.15998 15.3995C3.15998 15.2262 3.12665 15.1395 3.05998 15.1395L2.59998 15.3595C2.59998 15.2662 2.54665 15.1995 2.43998 15.1595L2.27998 15.1395C2.17331 15.1395 2.03998 15.1862 1.87998 15.2795C1.85331 15.2129 1.81998 15.1462 1.77998 15.0795C1.73998 15.0129 1.70665 14.9529 1.67998 14.8995C1.50665 14.5662 1.33331 14.1995 1.15998 13.7995C0.999981 13.3862 0.846647 12.9929 0.699981 12.6195C0.566647 12.2462 0.459981 11.9529 0.37998 11.7395C0.326647 11.5662 0.266647 11.3062 0.199981 10.9595C0.133314 10.6129 0.0666472 10.1729 -1.94758e-05 9.63953C0.146647 9.73286 0.259981 9.77953 0.339981 9.77953C0.433314 9.77953 0.519981 9.63953 0.59998 9.35953C0.639981 9.41286 0.713314 9.43953 0.819981 9.43953C0.899981 9.43953 0.959981 9.41286 0.999981 9.35953L1.31998 8.87953L1.67998 8.99953H1.69998C1.72665 8.99953 1.75331 8.9862 1.77998 8.95953C1.80665 8.93286 1.84665 8.9062 1.89998 8.87953C2.00665 8.81286 2.08665 8.77953 2.13998 8.77953L2.19998 8.79953C2.53331 8.95953 2.74665 9.25286 2.83998 9.67953C3.07998 10.6929 3.31998 11.1995 3.55998 11.1995C3.79998 11.1995 4.07998 10.9462 4.39998 10.4395C4.55998 10.1862 4.71998 9.89286 4.87998 9.55953C5.05331 9.2262 5.22665 8.85286 5.39998 8.43953C5.42665 8.59953 5.45331 8.67953 5.47998 8.67953C5.54665 8.67953 5.65998 8.51286 5.81998 8.17953C5.99331 7.8462 6.26665 7.3862 6.63998 6.79953C6.85331 6.43953 7.11998 6.03286 7.43998 5.57953C7.77331 5.1262 8.12665 4.65953 8.49998 4.17953C8.87331 3.69953 9.23331 3.2462 9.57998 2.81953C9.93998 2.39286 10.26 2.0262 10.54 1.71953C10.82 1.41286 11.0266 1.21286 11.16 1.11953C11.6666 0.772864 12.0666 0.439531 12.36 0.119531C12.3466 0.212864 12.3266 0.29953 12.3 0.379531C12.2866 0.446198 12.28 0.492864 12.28 0.51953C12.28 0.572864 12.3066 0.59953 12.36 0.59953L12.92 0.31953V0.399531C12.92 0.506198 12.9466 0.559531 13 0.559531C13.04 0.559531 13.12 0.499531 13.24 0.379531C13.36 0.259531 13.4266 0.172864 13.44 0.119531L13.4 0.399531L14.08 -0.000468969L13.92 0.359531C14.1333 0.212864 14.2866 0.13953 14.38 0.13953C14.4333 0.13953 14.4733 0.172864 14.5 0.23953C14.5266 0.292864 14.54 0.346197 14.54 0.399531C14.54 0.47953 14.5066 0.572864 14.44 0.679531C14.3733 0.786198 14.2866 0.912864 14.18 1.05953C14.1 1.1662 13.9666 1.3262 13.78 1.53953C13.6066 1.73953 13.34 2.03953 12.98 2.43953C12.62 2.8262 12.14 3.3662 11.54 4.05953C11.38 4.23286 11.1333 4.53953 10.8 4.97953C10.4666 5.4062 10.0866 5.9062 9.65998 6.47953C9.24665 7.03953 8.83331 7.6062 8.41998 8.17953C8.00665 8.75286 7.63998 9.27286 7.31998 9.73953C6.99998 10.1929 6.77331 10.5329 6.63998 10.7595L5.39998 12.8595C5.13331 13.3129 4.91331 13.6862 4.73998 13.9795C4.56665 14.2595 4.43331 14.4529 4.33998 14.5595C4.13998 14.7995 3.91998 15.0129 3.67998 15.1995L3.49998 15.0995L3.33998 15.1995L3.15998 15.3995Z' fill='white'/%3E%3C/svg%3E%0A") no-repeat 0 0 transparent;
	display: block;
	width: 15px;
	height: 16px;
	margin: 0 auto;
}


.info-element__direction ~ * {
	z-index: 2;
	position: relative;
}
.info-element__direction {
	position: relative;
	transition: all 0.5s ease;
	z-index: 1;
}
.info-element__direction img {
	transform: rotate(0.43deg);
	top: -80px;
}

.directions-list {
	z-index: 2;
	position: relative;
}
.directions-list:has( + .directions-dop) {
	margin-bottom: 80px;
}
.directions-dop {
	display: flex;
	gap: 32px;
	justify-content: space-between;
	margin-bottom: 160px;
}
.directions-dop__item {
	width: calc(50% - 16px);
}
.directions-dop__item button,
.directions-dop__item a {
	width: 100%;
	display: block;
	background: linear-gradient(180deg, var(--color-link) 0%, var(--color-main-bg) 100%);
	border-radius: 16px;
	font-size: 20px;
	line-height: 1;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--color-text);
}
.directions-dop__item button {
	cursor: default;
}
.directions-dop__item button,
.directions-dop__item a:hover {
	text-decoration: none;
	color: var(--color-text);
	background: var(--color-link);
}
.directions-dop__descr {
	margin-top: 32px;
	font-size: 18px;
	font-family: 'GeologicaThin';
}
.direction .cases {
	gap: 32px;
}
.direction .cases .cases-item__content {
	padding: 40px;
}
.direction .cases .cases-item__categories .btn {
	padding: 3px 19px;
}

.direction-possibilities {
	display: grid;
	grid-template-columns: repeat(3, calc(100%/3 - 15px));
	gap: 20px;
	margin: 80px 0 160px;
}
.direction-possibilities.direction-possibilities__4 {
	grid-template-columns: repeat(4, calc(25% - 15px));
	gap: 20px;
}
@media (min-width: 1440px) {
	.direction-possibilities.direction-possibilities__4 {
		grid-template-columns: repeat(4, calc(25% - 60px));
		gap: 80px;
	}
}
.direction-possibilities__item {
	font-size: 18px;
	display: flex;
	flex-direction: column;
	gap: 17px;
	border-radius: var(--border-radius);
	padding: 30px 49px 49px;
	border: 1px solid var(--color-text);
	height: 100%;
	justify-content: space-evenly;
	transition: all 0.5s ease;
}
.direction-possibilities__item.active {
	background: var(--color-link);
	border-color: var(--color-link);
}
.direction-possibilities.direction-possibilities__4 .direction-possibilities__item {
	padding: 20px;
}
.direction-possibilities__title {
	font-size: 28px;
	font-family: 'GeologicaBold';
}

.direction-why {
	display: grid;
	grid-template-columns: repeat(4, calc(25% - 26px));
	margin: 80px 0 160px;
	z-index: 1;
	position: relative;
	row-gap: 20px;
	column-gap: 35px;
}
.direction-why__item {
	text-align: center;
	border-radius: 10px;
	font-size: 20px;
	font-family: "GeologicaRegular";
	padding: 20px 20px 25px;
	display: flex;
	gap: 33px;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	border: 1.1px solid #9B53E3;
	height: 100%;
	transition: all 0.5s ease;
}
.direction-why__title {
	font-size: 30px;
	font-family: 'GeologicaBold';
}

@media (max-width: 1280px) {
	.direction-compare__title {
		font-size: 24px;
	}
	.direction-why__item {
		font-size: 18px;
	}
	.direction-why__title {
		font-size: 24px;
	}
}
@media (max-width: 1100px) {
	.direction-possibilities__item {
		padding: 15px 25px;
	}
	.direction-possibilities__title,
	.direction-why__title {
		font-size: 22px;
	}
	.direction-possibilities__item,
	.direction-why__item {
		font-size: 16px;
	}
	.direction-why {
		grid-template-columns: repeat(2, calc(50% - 17px));
	}
}
@media (max-width: 991px) {
	.wrapper .content {
		background-position-x: 55vw;
	}
	.direction .direction-prices__header {
		font-size: 23px;
	}
	.direction-compare__title {
		font-size: 20px;
	}
	.direction-why__item {
		gap: 15px;
	}
}
@media (max-width: 991px) and (min-width: 768px) {
	.direction-possibilities.direction-possibilities__4 .direction-possibilities__title {
		font-size: 20px;
	}
}
@media (max-width: 844px) {
	.direction-title {
		margin-bottom: 20px;
	}
	.direction-descr {
		font-size: 18px;
		gap: 20px;
		margin-bottom: 18vw;
	}
	.direction-descr + .directions-list {
		margin-top: 90px;
		margin-bottom: 80px;
	}
	.direction-steps .direction-steps__thumbs .direction-steps__number {
		width: 100%;
	}
	.direction-steps .direction-steps__slider .direction-steps__item {
		padding: 20px 20px 75px;
		height: initial;
	}
	.direction-steps .direction-steps__count {
		font-size: 70px;
	}
	.direction-steps .direction-steps__slider .direction-steps__name {
		font-size: 28px;
	}
	.direction-steps .direction-steps__slider .direction-steps__name span,
	.direction-steps .direction-steps__result {
		font-size: 16px;
	}
	.direction-steps .direction-steps__descr {
		gap: 20px;
		margin-top: 20px;
	}
	.direction-steps .direction-steps__text {
		font-size: 20px;
	}
	.direction-steps .direction-steps__list {
		font-size: 18px;
	}
	.direction-steps .direction-steps__inner .swiper-arrow {
		min-width: 50px;
		width: 50px;
		height: 50px;
	}
	.direction-steps .direction-steps__inner .swiper-arrow svg {
		width: 25px;
		height: 25px;
	}
	.direction-steps .swiper-arrow.swiper-button-next {
		right: 15px;
	}
	.direction-steps .swiper-arrow.swiper-button-prev {
		right: 75px;
	}
	.direction-steps .direction-steps__thumbs .swiper-wrapper::after, 
	.direction-steps .direction-steps__thumbs .direction-steps__item::after {
		top: 35%;
	}
	.direction-steps .direction-steps__slider {
		margin-top: 40px;
	}
	.direction .direction-steps {
		margin: 150px 0;
	}
	.direction .direction-text {
		font-size: 18px;
		padding-bottom: 40px;
		flex-direction: column;
		row-gap: 48px;
	}
	.direction-text.direction-text__line::after {
		width: 100%;
		height: 1px;
	}
	.direction .direction-text .btn {
		width: 100%;
	}
	.direction #direction-prices .direction-wrapper {
		grid-template-columns: 100%;
	}
	.direction .direction-prices__item {
		padding: 36px 27px;
	}
	.direction .direction-prices__header {
		font-size: 18px;
		margin-bottom: 20px;
	}
	.direction .direction-prices__item ul li {
		font-size: 20px;
	}
	.direction .direction-prices__value {
		margin-top: 24px;
		font-size: 28px;
		gap: 40px;
	}
	.direction .direction-prices__value .btn {
		font-size: 16px;
	}
	.direction .direction-compare__title {
		font-size: 18px;
		margin-bottom: 20px;
	}
	.direction .direction-compare__item {
		gap: 20px;
		margin-bottom: 10px;
		font-size: 16px;
		grid-template-columns: repeat(var(--count, 4), calc(100%/var(--count, 4) - ((20px * (var(--count, 4) - 1)) / var(--count, 4))));
	}
	.direction .direction-compare,
	.direction .reviews-list {
		margin-bottom: 150px;
	}
	.direction .reviews-list {
		gap: 20px;
		grid-template-columns: repeat(2, calc(50% - 10px));
	}
	.reviews-list .review-item {
		padding: 16px 22px;
	}
	.reviews-list .review-text {
		font-size: 16px;
		margin-top: 15px;
	}
	.direction h2:not(.cases-item__title) {
		margin: 25px 0;
	}
	.direction .direction-compare__top h2:not(.cases-item__title) {
		margin: 0;
	}
	.direction-steps .direction-steps__inner .swiper-arrow {
		bottom: 16px;
	}
	.direction .principles-list {
		margin-top: 20px;
		grid-template-columns: repeat(2, calc(50% - 8px));
		gap: 16px;
	}
	.direction .principles-item {
		padding: 16px;
		font-size: 14px;
	}
	.direction .principles-number {
		font-size: 40px;
	}
	.direction .principles-title {
		font-size: 18px;
	}
	.direction .direction-steps__text {
		margin-top: 20px;
		grid-template-columns: repeat(2, calc(50% - 8px));
		gap: 16px;
	}
	.direction .direction-info video {
		margin-top: -50px;
		margin-bottom: 15px;
	}
}
@media (max-width: 768px) {
	.direction .cases {
		gap: 20px;
	}
	.direction .cases .cases-item__categories .btn {
		font-size: 16px;
		padding: 4px 8px;
	}
	.direction-possibilities.direction-possibilities__4,
	.direction-possibilities {
		grid-template-columns: 100%;
		margin: 50px 0 100px;
	}
	.direction-possibilities__item {
		gap: 10px;
	}
	.direction-why {
		grid-template-columns: 100%;
		gap: 16px;
		padding: 0;
		margin: 50px 0 100px;
	}
	.direction-why__item {
		border-radius: 20px;
		padding: 20px;
	}
}
@media (max-width: 600px) {
	.direction .direction-descr {
		grid-template-columns: 100%;
	}
	.direction-steps__thumbs .direction-steps__item .direction-steps__circle {
		width: 60px;
		height: 60px;
	}
	.direction-steps .direction-steps__count {
		font-size: 60px;
	}
	.direction-steps__thumbs .direction-steps__item .direction-steps__name {
		font-size: 14px;
		text-align: center;
	}
	.direction-steps .direction-steps__slider .direction-steps__name {
		font-size: 24px;
	}
	.direction-steps .direction-steps__text	{
		font-size: 18px;
	}
	.direction-steps .direction-steps__list {
		font-size: 16px;
	}
	.direction-steps .direction-steps__descr {
		grid-template-columns: 100%;
	}
	.direction-steps .direction-steps__result {
		margin-top: 16px;
	}
	#direction-prices .direction-info {
		padding: 45px 10px 15px;
	}
	.direction-info .direction-info__item {
		margin-bottom: 16px;
	}
	.direction-info .direction-info__title {
		font-size: 18px;
	}
	.direction-info .direction-info__descr {
		font-size: 16px;
		margin-top: 12px;
	}
	.direction-compare .direction-compare__top h2 {
		font-size: 22px;
	}
	.direction-compare .direction-compare__top {
		gap: 20px;
		padding: 15px;
	}
	.direction-compare__top .direction-compare__arrow svg.arrow {
		width: 16px;
	}
	.direction .reviews-list {
		grid-template-columns: 100%;
	}
	.reviews-list .review-item {
		padding: 16px;
	}
	.review-item .review-bottom {
		gap: 15px;
	}
	.review-info .review-autor {
		font-size: 14px;
	}
	.review-logo svg {
		max-width: 35vw;
	}
	.directions-dop {
		flex-direction: column;
	}
	.directions-dop__item {
		width: 100%;
	}
	.direction .directions-dop,
	.direction .principles-list,
	.direction .direction-compare {
		margin-bottom: 80px;
	}
	.direction .principles-list {
		grid-template-columns: 100%;
	}
	.direction .principles-title {
		margin: 8px 0;
	}
	.direction .direction-steps__text {
		grid-template-columns: 100%;
	}
	.direction .direction-steps__text .direction-steps__text--item {
		height: auto;
		min-height: 130px;
	}
	.direction .direction-info video {
		margin-top: -5px;
		margin-bottom: 15px;
		width: calc(100% + 20px);
		margin-left: -10px;
	}
	.direction .direction-compare__item {
		padding: 10px;
	}
}
@media (max-width: 475px) {
	.direction-steps .direction-steps__thumbs {
		display: none;
	}
	.direction .direction-compare__item {
		grid-template-columns: 130px repeat(calc(var(--count, 4) - 1), 110px);
		padding: 0;
		gap: 0;
		margin: 0;
		font-size: 14px;
	}
	.direction .direction-compare .direction-compare__content {
		max-width: 100%;
		overflow-x: auto;
	}
	.direction .direction-compare .direction-compare__content .direction-compare__item > div {
		padding: 10px;
	}
	.direction .direction-compare .direction-compare__content .direction-compare__item > div:first-child {
		position: sticky;
		left: 0;
		z-index: 2;
		background: #201947;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.direction .direction-compare .direction-compare__content .direction-compare__item.active > div:first-child {
		background: rgba(132, 59, 245, 0.3);
	}
	.direction-compare__item:not(.direction-compare__title).active {
		width: max-content;
	}
	.direction .direction-prices__item ul li {
		font-size: 16px;
	}
}


.competencies-list {
	display: grid;
	grid-template-columns: repeat(3, calc(100%/3 - 21px));
	gap: 32px;
	margin: 80px 0 160px;
}
.competencies-item {
	padding: 32px 50px;
	display: flex;
	align-items: center;
	justify-content: start;
	gap: 2.34375vw;
	border-radius: calc(var(--border-radius)/2);
	font-size: 18px;
	height: 160px;
	border: 1px solid transparent;
	background: linear-gradient(var(--color-main-bg), var(--color-main-bg) 0) padding-box, 
				linear-gradient(127.99deg, var(--color-text) 20.47%, var(--color-gradient-end) 78.94%) border-box;
}
.competencies-info {
	max-width: 225px;
}
.competencies-title {
	font-size: 20px;
	font-family: "GeologicaRegular";
	line-height: 1;
	margin: 0;
}
.competencies-subtitle {
	margin-top: 1px;
}
.competencies-list__onlytext .competencies-item {
	font-size: 24px;
	justify-content: center;
}
@media (max-width: 1280px) {
	.competencies-item {
		word-break: break-word;
	}
}
@media (max-width: 1024px) {
	.competencies-item {
		gap: 10px;
		padding: 20px;
		font-size: 13px;
	}
	.competencies-icon svg {
		max-width: 60px;
		height: auto;
	}
	.competencies-title {
		font-size: 16px;
	}
}
@media (max-width: 844px) {
	.competencies-list {
		gap: 20px;
		grid-template-columns: repeat(2, calc(50% - 10px));
	}
	.competencies-item {
		flex-direction: column;
		padding: 10px;
		align-items: center;
		justify-content: center;
	}
	.competencies-title {
		font-size: 13px;
	}
	.competencies-icon svg {
		max-width: unset;
	}
	.competencies-info {
		text-align: center;
	}
	.competencies-subtitle {
		margin-top: 5px;
	}
}
@media (max-width: 768px) {
	 .competencies-item {
		height: auto;
		padding: 40px 10px;
	}
}
@media (max-width: 600px) {
	 .competencies-title {
		font-size: 12px;
	}
}
@media (max-width: 500px) {
	 .competencies-list {
		grid-template-columns: 100%;
	}
}

html[data-theme="light"] .direction-steps__slider .direction-steps__item {
	border-color: var(--color-text);
}
html[data-theme="light"] .swiper-arrow.swiper-button-disabled {
	background: var(--color-link);
}
html[data-theme="light"] #direction-prices:before {
	display: none;
}
html[data-theme="light"] .direction-prices__item ul li {
	border-color: var(--border-light-color);
}
html[data-theme="light"] .direction-prices__item.active,
html[data-theme="light"] .direction-prices__item.active .direction-prices__value .btn,
html[data-theme="light"] .review-item.active, 
html[data-theme="light"] .review-item:hover,
html[data-theme="light"] .video_block .title_web,
html[data-theme="light"] .direction-possibilities__item.active {
	color: var(--color-main-bg);
}
html[data-theme="light"] .direction-prices__item.active ul li,
html[data-theme="light"] .direction-prices__item.active .direction-prices__value .btn {
	border-color: var(--color-main-bg);
}
html[data-theme="light"] .direction-compare__item i,
html[data-theme="light"] .review-item:not(.active) .review-logo img,
html[data-theme="light"] .competencies-icon img {
	filter: brightness(0);
}
html[data-theme="light"] main .feedback {
	background: none;
}
html[data-theme="light"] .direction-prices__item.active .direction-prices__value .btn:hover,
html[data-theme="light"] .feedback__direction .feedback_descr,
html[data-theme="light"] .feedback__direction .feedback_item__title,
html[data-theme="light"] .feedback__direction .feedback_item__info {
	color: var(--color-text);
}
html[data-theme="light"] .feedback__direction .leadForm .form-wrapper input, 
html[data-theme="light"] .feedback__direction .leadForm .form-wrapper textarea {
	border-color: var(--border-light-color);
}
html[data-theme="light"] .feedback__direction .feedback_bottom svg {
	fill: var(--color-text) !important;
}
/* End */


/* Start:/products/erp/erp.css?178895528623498*/
:root {
    --sup-purple: var(--color-link, #843BF5);
    --sup-purple-light: #B15DFF;
    --sup-bg-panel: #0b131d;
    --sup-bg-deep: #060B20;
    --sup-text-muted: #b0b0b0;
    --sup-text-dim: #8c8c8c;
    --sup-radius: var(--border-radius, 16px);
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

a:not(.no-hover)::after,
.link:not(.no-hover)::after {
    display: none !important;
}

.container > h1 {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

img {
    max-width: 100%;
    height: auto;
}

.sup-main-container {
    width: min(100%, 1840px);
    max-width: 1840px;
    margin: 0 auto;
    font-family: "Geologica", "Inter", system-ui, sans-serif;
}

.sup-main-container * {
    box-sizing: border-box;
    overflow-wrap: break-word;
}

.sup-main-container section {
    position: relative;
    padding: 50px clamp(16px, 2.5vw, 48px);
}

.sup-main-container h1,
.sup-main-container h2,
.sup-main-container h3,
.sup-hero-heading {
    margin: 0;
    color: #fff;
    font-weight: 700;
}

.sup-main-container h2 {
    font-size: clamp(28px, 3.2vw, 60px);
    line-height: 1.15;
}

.sup-main-container h3 {
    font-size: clamp(20px, 1.8vw, 34px);
    line-height: 1.3;
    margin-bottom: 8px;
}

.sup-main-container p {
    margin: 0 0 20px;
    color: var(--sup-text-muted);
    font-size: clamp(16px, 1.35vw, 26px);
    line-height: 1.6;
}

/* --------------------------------------------------------------------------
   Breadcrumbs
   -------------------------------------------------------------------------- */

.sup-breadcrumbs {
    position: relative;
    z-index: 1;
    margin: -80px 0 34px;
    padding: 20px 10px 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.sup-breadcrumbs::-webkit-scrollbar {
    display: none;
}

.sup-breadcrumbs .bx-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
}

.sup-breadcrumbs .bx-breadcrumb-item {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    gap: 6px;
    margin-right: -8px;
    color: var(--sup-text-muted);
    font-size: 14px;
    line-height: 1.4;
}

.sup-breadcrumbs .bx-breadcrumb-item:not(:first-child) {
    margin-left: 22px;
}

.sup-breadcrumbs .bx-breadcrumb-item:not([id]) {
    margin-top: 2px !important;
    color: var(--sup-text-dim);
}

.sup-breadcrumbs .bx-breadcrumb-item i.fa-angle-right {
    color: var(--sup-text-dim);
    font-size: 12px;
}

.sup-breadcrumbs .bx-breadcrumb > div[style*="clear"] {
    display: none;
}

.sup-breadcrumbs .bx-breadcrumb-item a {
    display: inline-flex !important;
    align-items: center !important;
    color: var(--sup-text-muted) !important;
    font-weight: inherit !important;
    text-decoration: none !important;
    background: none !important;
    border-bottom: 0 !important;
    transition: color 0.2s ease;
}

.sup-breadcrumbs .bx-breadcrumb-item a::before,
.sup-breadcrumbs .bx-breadcrumb-item a::after {
    content: none !important;
    display: none !important;
}

.sup-breadcrumbs .bx-breadcrumb-item a:hover,
.sup-breadcrumbs .bx-breadcrumb-item a:focus-visible {
    color: var(--sup-purple) !important;
    text-decoration: none !important;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.sup-btn {
    display: inline-block;
    max-width: 100%;
    padding: 19px 42px;
    border: 1px solid transparent;
    border-radius: 50px;
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.2;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    transition: opacity 0.2s ease, transform 0.2s ease, background-color 0.2s ease;
}

.sup-btn-primary {
    background-color: var(--sup-purple);
}

.sup-btn-primary:hover,
.sup-btn-primary:focus-visible {
    opacity: 0.88;
}

.sup-btn-outline {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.35);
}

.sup-btn-outline:hover,
.sup-btn-outline:focus-visible {
    border-color: var(--sup-purple);
    color: var(--sup-purple);
}

.sup-btn-tariff {
    display: block;
    width: 100%;
    padding: 15px 20px;
    border-color: rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    font-size: 15px;
    text-align: center;
}

.sup-btn-tariff:hover,
.sup-btn-tariff:focus-visible {
    border-color: var(--sup-purple);
    background: var(--sup-purple);
    opacity: 1;
}

.sup-btn:focus-visible {
    outline: 2px solid var(--sup-purple-light);
    outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.sup-hero-plain {
    position: relative;
    overflow: hidden;
    padding: 40px clamp(16px, 3vw, 48px) 64px;
    color: #fff;
}

.sup-hero-blob::before {
    position: absolute;
    top: 0;
    right: 0;
    display: block;
    width: 37vw;
    height: 30vw;
    background: url("/include/info/section-gradient.svg") no-repeat right top / cover;
    content: "";
}

.sup-hero-plain .sup-hero-grid,
.sup-hero-plain .sup-hero-content,
.sup-hero-plain .sup-hub {
    position: relative;
    z-index: 1;
}

.sup-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 780px) minmax(0, 1fr);
    align-items: center;
    gap: 40px;
}

.sup-hero-heading {
    margin-bottom: 18px;
    font-size: clamp(30px, 4vw, 60px);
    line-height: 1.15;
}

.sup-hero-lead {
    margin-bottom: 30px;
    color: #d6d6de;
    font-size: clamp(17px, 1.45vw, 23px);
    font-weight: 500;
    line-height: 1.6;
}

.sup-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

/* --------------------------------------------------------------------------
   Radial integration scheme
   -------------------------------------------------------------------------- */

.sup-hub {
    position: relative;
    width: 100%;
    max-width: 620px;
    height: 360px;
    margin: 0 auto;
}

.sup-hub--about {
    height: 420px;
}

.sup-hub-center {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 190px;
    height: 150px;
    transform: translate(-50%, -50%);
    border: 2px solid #c765ff;
    border-radius: 22px;
    background: #0e1822;
    box-shadow:
        0 0 40px 8px rgba(196, 90, 255, 0.55),
        0 0 90px 26px rgba(150, 45, 255, 0.35),
        0 0 160px 60px rgba(100, 20, 220, 0.18);
    color: #fff;
}

.sup-hub-icon {
    width: 30%;
}

.small-hub-icon {
    width: 23% !important;
}

.sup-hub-node {
    position: absolute;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 24px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    background: var(--sup-bg-panel);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
    white-space: nowrap;
}

.sup-hub-node--top {
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

.sup-hub-node--left {
    top: 44%;
    left: -40px;
    transform: translateY(-50%);
}

.sup-hub-node--right {
    top: 43%;
    right: 0;
    transform: translateY(-50%);
}

.sup-hub-node--bl {
    bottom: 3%;
    left: 0%;
}

.sup-hub-node--br {
    right: 4%;
    bottom: 4%;
}

.sup-hub-node--bottom {
    bottom: -12%;
    left: 50%;
    transform: translateX(-50%);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
    white-space: normal;
}

.sup-hub-node--accent {
    border-color: var(--sup-purple);
    background: var(--sup-purple);
    box-shadow: 0 8px 24px rgba(132, 59, 245, 0.4);
}

.sup-hub-lines {
    position: absolute;
    z-index: 1;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.sup-hub-lines line {
    stroke: var(--sup-purple-light);
    stroke-width: 1.1;
    stroke-linecap: round;
    stroke-dasharray: 0.1 5;
    opacity: 0.85;
}

.sup-hub-ring {
    fill: none;
    stroke: var(--sup-purple-light);
    stroke-width: 1;
    stroke-linecap: round;
    stroke-dasharray: 0.1 5;
    opacity: 0.6;
}

.sup-hub-arrow-fill {
    fill: var(--sup-purple-light);
}

/* --------------------------------------------------------------------------
   Shared section layout
   -------------------------------------------------------------------------- */

.sup-section-header {
    margin: 0 auto 44px;
}

.sup-section-header h2 {
    margin-bottom: 16px;
}

.sup-section-flex {
    display: flex;
    align-items: center;
    gap: 50px;
}

.sup-section-flex > * {
    min-width: 0;
    flex: 1;
}

.sup-section-image {
    display: flex;
    align-items: center;
    justify-content: center;
}

.sup-about-lead {
    max-width: 900px;
    margin: 0 auto;
    font-size: 23px;
}

.sup-about-lead--start {
    max-width: none;
    margin: 0 0 24px;
}

.sup-feature-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.sup-feature-list li {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}

.sup-feature-list li:last-child {
    margin-bottom: 0;
}

.sup-feature-list li > img {
    flex: 0 0 50px;
    width: 50px !important;
    height: 50px !important;
}

.sup-feature-list span {
    color: #fff;
    font-size: 22px;
    font-weight: 500;
}

/* --------------------------------------------------------------------------
   What we synchronize
   -------------------------------------------------------------------------- */

.sup-sync-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    gap: 18px;
    width: 100%;
}

.sup-sync-card {
    min-width: 0;
    padding: 22px 24px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.1);
	cursor: pointer;
	transition: .3s all;
}

.sup-sync-card:hover {
	background: #843BF5;
}

.sup-sync-number {
    display: block;
    margin-bottom: 8px;
    font-family: "GeologicaBold", "Geologica", sans-serif;
    font-size: 30px;
}

.sup-sync-card h3 {
    margin-bottom: 6px;
    font-size: 22px;
}

.sup-sync-card p {
    margin: 0;
    font-size: 18px;
    line-height: 1.5;
}

/* --------------------------------------------------------------------------
   Systems
   -------------------------------------------------------------------------- */

.sup-systems-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px;
    width: 100%;
    align-items: stretch;
}

.sup-system-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: 100%;
    padding: 22px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: var(--sup-radius);
    background: rgba(255, 255, 255, 0.06);
}

.sup-system-card h3 {
    margin-bottom: 16px;
    font-size: 22px;
    text-align: center;
}

.sup-system-tags {
    flex-grow: 1;
    margin: 0 0 20px;
    padding: 0;
    list-style: none;
}

.sup-system-tags li {
    position: relative;
    margin-bottom: 8px;
    padding: 10px 12px;
    overflow: hidden;
    border-radius: 30px;
    background: #202a34;
    font-size: 18px;
    text-align: center;
}

.sup-system-tags li::before {
    position: absolute;
    z-index: 0;
    inset: 0;
    padding: 1.5px;
    border-radius: inherit;
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 1) 0%,
        rgba(255, 255, 255, 0.75) 30%,
        rgba(255, 255, 255, 0.5) 60%,
        rgba(255, 255, 255, 0.3) 100%
    );
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    mask-composite: exclude;
    content: "";
    pointer-events: none;
}

/* --------------------------------------------------------------------------
   Integration architecture
   -------------------------------------------------------------------------- */

.sup-arch-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
    width: 100%;
}

.sup-arch-card {
    min-width: 0;
    overflow: hidden;
    padding: 26px 22px;
    border: 1px solid var(--color-text);
    border-radius: var(--border-radius);
    background: rgba(255, 255, 255, 0.1);
    text-align: center;
}

.sup-arch-card h3 {
    margin-bottom: 20px;
    font-size: 23px;
}

.sup-arch-card p {
    margin: 20px 0 0;
    color: #fff;
    font-size: 18px;
}

.sup-arch-flow {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1.25fr) 28px minmax(0, 1fr);
    align-items: center;
    justify-items: center;
    width: 100%;
    max-width: 100%;
    gap: 6px;
}

.sup-arch-node {
    box-sizing: border-box;
    width: 100%;
    max-width: 150px;
    min-width: 0;
    padding: 18px 8px;
    border: 1px solid var(--sup-purple);
    border-radius: 20px;
    color: #fff;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    overflow-wrap: anywhere;
}

.sup-arch-icon {
    width: 100%;
    max-width: 128px;
    height: auto;
    padding: 18px 20px;
    object-fit: contain;
}

.sup-arch-word {
    width: 100%;
    padding: 18px 8px;
}

.sup-arch-line {
    width: 28px;
    height: 2px;
    max-width: 28px;
    flex-shrink: 0;
    background-image: linear-gradient(90deg, #fff 0%, var(--sup-purple) 100%);
    -webkit-mask-image: linear-gradient(90deg, #000 0 10px, transparent 10px 18px, #000 18px 28px);
    mask-image: linear-gradient(90deg, #000 0 5px, transparent 3px 18px, #000 18px 28px);
}

/* --------------------------------------------------------------------------
   Implementation timeline (Strict Single Line Alignment)
   -------------------------------------------------------------------------- */

.b24-steps-section {
    width: 100%;
    min-width: 0;
    overflow: hidden;
    padding: 56px clamp(16px, 3vw, 49px) 60px;
    border: 1px solid var(--sup-purple-light);
    border-radius: var(--border-radius);
    background: var(--sup-bg-deep);
}

.b24-timeline-container {
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin: 40px auto 0;
    min-height: 180px;
}

/* Сетка из 6 колонок для шагов */
.b24-timeline-steps {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
    width: 100%;
}

.b24-timeline-line,
.b24-timeline-progress {
    position: absolute;
    top: 40px; /* Строго по центру кружков (высота 80px / 2) */
    height: 2px;
    transform: translateY(-50%);
    z-index: 1;
}

.b24-timeline-line {
    left: calc(100% / 12);
    right: calc(100% / 12);
}

.b24-timeline-progress {
    left: calc(100% / 12);
    z-index: 2;
    width: 0;
    background: var(--sup-purple);
    transition: width 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.b24-step-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-width: 0;
    /* Убираем шахматный порядок, ставим все элементы одинаково (кружок сверху, текст снизу) */
    justify-content: flex-start;
}

.b24-step-node {
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    flex-shrink: 0;
    border-radius: 50%;
    background: url("/local/templates/direkt2026/assets/img/dir_level_bg.png") no-repeat center / cover;
    box-shadow: 0 0 15px rgba(132, 59, 245, 0.5);
    color: #fff;
    font-size: 32px;
    font-weight: 700;
}

.b24-step-content {
    width: 100%;
    max-width: 160px;
    padding: 0 4px;
    margin-top: 16px; /* Одинаковый отступ текста под каждым кружком */
}

.b24-step-content h3 {
    color: #fff;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.3;
}

.left-text > h3,
.right-text > h3 {
    padding: 0;
    text-align: center;
}

.left-text > h3 { text-align: left; margin-left: 19px; }
.right-text > h3 { text-align: right; margin-right: 19px; }

/* --------------------------------------------------------------------------
   Decorative section background
   -------------------------------------------------------------------------- */

.section-bg-img {
    position: absolute;
    z-index: -1;
    top: 0;
    right: 0;
    transform: scaleY(-1) rotate(180deg);
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media(max-width: 1440px) {
	.sup-arch-flow {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .sup-arch-node,
    .sup-arch-icon,
    .sup-arch-word {
        width: min(100%, 180px);
        max-width: 129px;
    }

    .sup-arch-icon {
        height: auto;
        padding: 16px 20px;
    }

    .sup-arch-line {
        width: 2px;
        height: 24px;
        max-width: none;
        background-image: linear-gradient(180deg, #fff 0%, var(--sup-purple) 100%);
        -webkit-mask-image: linear-gradient(180deg, #000 0 8px, transparent 8px 16px, #000 16px 24px);
        mask-image: linear-gradient(180deg, #000 0 8px, transparent 8px 16px, #000 16px 24px);
    }
	.sup-hero-grid > .sup-hub {
    	display: none;
  	}
}

@media (max-width: 1200px) {
	.sup-hub-node--br {
	  bottom: 7%;
	}
	.sup-hub-node--bl {
	  left: -4%;
	}
	.sup-hub-node--left {
	  top: 41%;
	}
	.sup-hub-node--right {
	  top: 40%;
	  right: -7%;
	}
    .b24-step-node {
        width: 68px;
        height: 68px;
        font-size: 26px;
    }
    .b24-timeline-line,
    .b24-timeline-progress {
        top: 34px; /* Половина нового размера кружка (68px) */
    }
    .b24-step-content h3 {
        font-size: 14px;
    }

}

@media (max-width: 960px) {

    .sup-breadcrumbs {
        margin-top: 0;
        padding-top: 12px;
        margin-bottom: 12px;
    }

    .sup-hero-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .sup-hero-grid > .sup-hub {
        display: none;
    }

    .sup-section-flex {
        flex-direction: column;
        align-items: stretch;
        gap: 30px;
    }

    .sup-section-image {
        width: 100%;
    }

    .sup-hub--about {
        max-width: 560px;
    }
}

@media (max-width: 844px) {
    header {
        margin: 0 0 40px !important;
        padding: 30px 0 !important;
    }
}

@media (max-width: 860px) {
    .sup-main-container section {
        padding: 32px 14px;
    }

    .sup-breadcrumbs {
        padding-inline: 0;
        margin-bottom: 4px;
    }

    .sup-breadcrumbs .bx-breadcrumb-item {
        font-size: 12px;
    }

    .sup-hero-plain {
        padding: 18px 14px 28px;
    }

    .sup-hero-grid {
        display: block;
    }

    .sup-hero-content {
        width: 100%;
    }

    .sup-hero-heading {
        font-size: clamp(28px, 8vw, 40px);
        line-height: 1.12;
    }

    .sup-hero-lead {
        font-size: 17px;
        line-height: 1.5;
    }

    .sup-hero-actions {
        flex-direction: column;
        width: 100%;
    }

    .sup-hero-actions .sup-btn {
        width: 100%;
        text-align: center;
        white-space: normal;
    }

    .sup-section-flex > * {
        width: 100%;
    }

    .sup-section-flex .sup-section-image {
        display: none;
    }

    .sup-feature-list li {
        align-items: flex-start;
        gap: 12px;
        margin-bottom: 16px;
    }

    .sup-feature-list li > img {
        flex-basis: 40px;
        width: 40px !important;
        height: 40px !important;
    }

    .sup-feature-list span {
        font-size: 17px;
        line-height: 1.4;
    }

    .sup-sync-grid,
    .sup-systems-grid,
    .sup-arch-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .sup-system-card h3,
    .sup-arch-card h3 {
        font-size: 20px;
        margin-left: 20px;
    }

    .sup-system-tags li {
        font-size: 16px;
    }

    .sup-arch-card {
        padding: 24px 16px;
    }

    /* Мобильный вертикальный вид таймлайна */
    .b24-steps-section {
        padding: 32px 14px 40px;
        border-radius: 16px;
    }

    .b24-steps-section .container {
        padding: 0;
    }

    .b24-timeline-container {
        height: auto;
        margin-top: 28px;
        padding-left: 48px;
    }

    .b24-timeline-line {
        top: 0;
        bottom: 0;
        left: 23px;
        right: auto;
        width: 2px;
        height: auto;
        transform: none;
        background: rgba(133, 59, 245, 0.25);
    }

    .b24-timeline-progress {
        display: none;
    }

    .b24-timeline-steps {
        display: flex;
        flex-direction: column;
        gap: 20px;
        height: auto;
    }

    .b24-step-item {
        position: relative;
        inset: auto;
        width: 100%;
        min-height: 60px;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        text-align: left;
        padding: 0;
    }

    .b24-step-node {
        position: absolute;
        top: 50%;
        left: -48px;
        transform: translateY(-50%);
        width: 48px;
        height: 48px;
        font-size: 18px;
    }

    .b24-step-content {
        width: 100%;
        max-width: none;
        margin: 0;
        padding-left: 12px;
    }

    .b24-step-content h3,
    .left-text > h3,
    .right-text > h3 {
        margin: 0;
        padding: 0;
        font-size: 15px;
        line-height: 1.35;
        text-align: left;
    }
}

@media (max-width: 480px) {
    .sup-main-container section {
        padding: 26px 12px;
    }

    .sup-hero-plain {
        padding: 16px 10px 24px;
    }

    .sup-main-container h2 {
        font-size: 26px;
        line-height: 1.18;
    }

    .sup-main-container h3 {
        font-size: 19px;
    }

    .sup-main-container p {
        font-size: 16px;
        line-height: 1.5;
    }

    .sup-hero-heading {
        font-size: 25px;
    }

    .sup-hero-lead {
        font-size: 16px;
    }

    .sup-btn {
        width: 100%;
        padding: 13px 16px;
        font-size: 13px;
    }

    .sup-arch-flow {
        gap: 6px;
    }

    .sup-arch-node,
    .sup-arch-icon,
    .sup-arch-word {
        max-width: 129px;
        font-size: 15px;
    }

    .b24-steps-section {
        padding-inline: 12px;
    }

    .b24-timeline-container {
        padding-left: 48px;
    }

    .b24-timeline-line {
        left: 23px;
    }

    .b24-step-node {
        left: -48px;
        width: 46px;
        height: 46px;
        font-size: 17px;
    }

    .b24-step-content h3,
    .left-text > h3,
    .right-text > h3 {
        font-size: 15px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sup-btn {
        transition: none;
    }
}
/* End */
/* /local/templates/direkt2026/assets/css/feedback_form.css?17860103196526 */
/* /local/templates/direkt2026/assets/css/direction.css?178834586122027 */
/* /products/erp/erp.css?178895528623498 */