/* ============================================================
   modern.css — обновление дизайна (светлая тема) и мобильная версия
   Подключается последним и переопределяет main.css / mobile.css
   ============================================================ */

/* ---------- Скролл (невидимый) ---------- */
html {
	scrollbar-width: none;
	-ms-overflow-style: none;
}
::-webkit-scrollbar {
	width: 0;
	height: 0;
	background: transparent;
}

/* ---------- Базовая типографика ---------- */
.main-wrap {
	font-family: 'Open Sans', -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	color: #333030;
	font-size: 15px;
	-webkit-font-smoothing: antialiased;
}
.main-wrap .content h2 {
	font-weight: 700;
	font-size: 28px;
	letter-spacing: -0.3px;
}
.main-wrap .content .title {
	margin: 10px 0 25px;
}

/* ---------- Шапка ---------- */
.main-wrap header .navbar {
	background-color: #2F2C2C;
	border-bottom: 3px solid #CC252D;
	box-shadow: 0 2px 14px rgba(0, 0, 0, 0.25);
}
.main-wrap header #navbar {
	font-size: 16px;
}
.main-wrap header .navbar-header {
	padding: 17px 0;
}
.main-wrap header .navbar-brand img {
	width: 145px;
}
@media (min-width: 768px) {
	.main-wrap .content {
		margin-top: 78px;
	}
}
/* Подсветка кнопок всегда во всю высоту шапки, не зависит от mini-состояния */
@media (min-width: 768px) {
	.main-wrap header .navbar > .container {
		display: flex;
		align-items: stretch;
	}
	.main-wrap header #navbar.navbar-collapse.collapse {
		display: flex !important;
		align-items: stretch;
	}
	.main-wrap header #navbar ul {
		float: none;
		display: flex;
		align-items: stretch;
		margin-top: 0;
		margin-left: 60px;
	}
	.main-wrap header #navbar ul li {
		display: flex;
	}
	.main-wrap header #navbar ul li a {
		display: flex;
		align-items: center;
		padding-top: 0;
		padding-bottom: 0;
	}
}
.main-wrap header #navbar ul li a {
	color: #E8E6E6;
	background-color: transparent;
	transition: color 0.2s ease;
	outline: none;
}
.main-wrap header #navbar ul li a:focus,
.main-wrap header #navbar ul li a:active {
	outline: none;
	box-shadow: none;
}
.main-wrap header #navbar ul li a:hover {
	color: #CC252D;
}
.main-wrap header #navbar ul li.active a {
	color: #CC252D;
}

/* ---------- Слайдер ---------- */
.main-wrap .content .slider .carousel-inner {
	height: 500px;
	max-height: 520px;
	overflow: hidden;
}
/* Bootstrap 5 двигает слайды через transform — не анимируем all (это даёт обрыв) */
.main-wrap .content .slider .carousel-inner .carousel-item {
	transition: transform 0.6s ease-in-out;
	height: 100%;
	overflow: hidden;
}
.main-wrap .content .slider .carousel-inner .carousel-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	position: absolute;
	left: 0;
	top: 0;
}
/* Убираем старый BS3-эффект «уезжающей» подписи — из‑за него виден разрыв */
.main-wrap .content .slider .carousel-inner .carousel-item-next .carousel-caption,
.main-wrap .content .slider .carousel-inner .carousel-item-prev .carousel-caption {
	padding-left: 0;
	padding-right: 0;
	color: #423F3F;
}
.main-wrap .content .slider .carousel-inner .carousel-item .carousel-caption {
	font-size: 52px;
	font-weight: 300;
	background: rgba(255, 255, 255, 0.82);
	letter-spacing: -0.5px;
	transition: none;
}
.main-wrap .content .slider .carousel-control {
	z-index: 20;
}
.main-wrap .content .slider .carousel-indicators button {
	width: 5px;
	height: 5px;
	margin: 0 2px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.7);
	opacity: 1;
	transition: width 0.2s, height 0.2s, background 0.2s;
}
.main-wrap .content .slider .carousel-indicators button.active {
	width: 6px;
	height: 6px;
	background: #CC252D;
}

/* ---------- Блок «Мы предлагаем» ---------- */
.main-wrap .content .services ul li p {
	font-size: 15px;
	line-height: 1.7;
	color: #5F5C5C;
}
.main-wrap .content .services ul li p strong {
	font-size: 17px;
	margin-bottom: 4px;
}
.main-wrap .content .services hr {
	border-color: #EDEDEF;
}

/* ---------- Полоса «Подходы к проектам» ---------- */
.main-wrap .content .startup {
	background: #F7F7F8;
}
.main-wrap .content .startup ul li {
	font-size: 15px;
	color: #5F5C5C;
}

/* Кнопки: убираем градиенты старой темы */
.main-wrap .btn-danger {
	background-image: none;
	background-color: #CC252D;
	border: none;
	border-radius: 8px;
	padding: 10px 32px;
	font-weight: 600;
	text-shadow: none;
	box-shadow: 0 4px 12px rgba(204, 37, 45, 0.3);
	transition: background-color 0.2s, transform 0.15s, box-shadow 0.2s;
}
.main-wrap .btn-danger:hover,
.main-wrap .btn-danger:focus {
	background-image: none;
	background-color: #B01F26;
	transform: translateY(-1px);
	box-shadow: 0 6px 16px rgba(204, 37, 45, 0.35);
}

/* ---------- Подвал ---------- */
.main-wrap footer {
	background: #2F2C2C;
	border-top: 3px solid #CC252D;
	font-size: 18px;
	font-weight: 600;
	padding: 36px 0;
	line-height: 1.5;
}
.main-wrap footer img {
	width: 110px;
	margin-top: -8px;
	margin-right: 10px;
}
.main-wrap footer .copyright {
	font-size: 13px;
	margin-top: 16px;
	color: #9B9898;
}

/* ---------- Портфолио: карточки проектов ---------- */
.main-wrap .content .gallery > .row {
	display: flex;
	flex-wrap: wrap;
}
.main-wrap .content .gallery .item {
	background: #FFFFFF;
	border: 1px solid #ECECEE;
	border-radius: 12px;
	overflow: hidden;
	margin-bottom: 30px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
	transition: transform 0.2s, box-shadow 0.2s;
	padding-left: 0;
	padding-right: 0;
	margin-left: 10px;
	margin-right: 10px;
	width: calc(25% - 20px);
	float: none;
}
.main-wrap .content .gallery .item:hover {
	transform: translateY(-4px);
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
}
.main-wrap .content .gallery .item figure {
	height: 170px;
	margin: 0;
}
.main-wrap .content .gallery .item .caption {
	background: #FFFFFF;
	border-top: 3px solid #CC252D;
	padding: 14px 16px;
	font-weight: 600;
}
.main-wrap .content .gallery .item .caption .date {
	top: 14px;
	right: 16px;
	font-size: 12px;
}
.main-wrap .content .gallery .item .caption .detail,
.main-wrap .content .gallery .item .caption .detail,
.main-wrap .content .gallery .item div.caption .detail {
	font-size: 13px;
	line-height: 1.6;
	font-weight: 400;
	margin-top: 6px;
	color: #6B6969;
}

/* ---------- Услуги: карточки (markup Bootstrap 4 на Bootstrap 3) ---------- */
.main-wrap .content .gallery .header-title {
	margin: 30px auto 30px;
	font-size: 26px;
}
.main-wrap .content .gallery .card {
	height: auto;
	display: flex;
	flex-direction: column;
	background: #FFFFFF;
	border: 1px solid #ECECEE;
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
	width: calc(33.333% - 20px);
	margin: 0 10px 30px;
	padding: 0;
	float: none;
	transition: transform 0.2s, box-shadow 0.2s;
}
.main-wrap .content .gallery .card:hover {
	transform: translateY(-4px);
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
}
.main-wrap .content .gallery .card .card-body {
	background: #FFFFFF;
	padding: 22px 24px 10px;
	flex: 1 1 auto;
	height: auto;
}
.main-wrap .content .gallery .card .card-title {
	font-size: 18px;
	font-weight: 700;
	margin: 0 0 12px;
	color: #333030;
}
.main-wrap .content .gallery .card .card-text {
	font-size: 14px;
	line-height: 1.65;
	color: #5F5C5C;
	margin-bottom: 12px;
}
.main-wrap .content .gallery .card ul {
	padding-left: 20px;
	margin-bottom: 10px;
}
.main-wrap .content .gallery .card ul li {
	list-style: disc;
	font-size: 13px;
	line-height: 1.6;
	color: #6B6969;
	margin-bottom: 4px;
}
.main-wrap .content .gallery .card .card-footer {
	background: #FAFAFB;
	border-top: 1px solid #EFEFF1;
	padding: 14px 24px;
	text-align: right;
	margin-top: auto;
}
.main-wrap .content .gallery .card .card-footer p {
	margin: 0;
	font-size: 14px;
	font-weight: 700;
	color: #CC252D;
}

/* ---------- Страница «О нас» ---------- */
.main-wrap .content .main-arc .banner {
	background: #F7F7F8;
	border-bottom: 1px solid #ECECEE;
}
.main-wrap .content .main-arc {
	font-weight: 400;
	font-size: 15px;
}
.main-wrap .content .main-arc p {
	line-height: 1.7;
	margin-bottom: 18px;
}
.tech-badge {
	background-color: #F5F5F7;
	border: 1px solid #E7E7EA;
	font-family: inherit;
	font-size: 15px;
}
.tech-stack {
	margin-bottom: 45px;
}

/* ---------- Контакты ---------- */
.main-wrap .content .contact-main aside ul li {
	display: flex;
	align-items: center;
	gap: 14px;
	padding-left: 0;
	line-height: 1.6;
}
.main-wrap .content .contact-main aside ul li:before {
	position: static;
	flex: 0 0 30px;
	margin: 0;
}

/* ============================================================
   МОБИЛЬНАЯ ВЕРСИЯ
   ============================================================ */

/* --- Планшеты и меньше --- */
@media all and (max-width: 991px) {
	.main-wrap .content .gallery .card {
		width: calc(50% - 20px);
	}
	.main-wrap .content .gallery .item {
		width: calc(50% - 20px);
	}
	.main-wrap header #navbar ul li a {
		padding: 40px 14px;
	}
}

/* --- Схлопнутое меню (стандартный брейкпоинт Bootstrap 3) --- */
@media all and (max-width: 767px) {
	.main-wrap .content {
		margin-top: 60px;
	}
	/* Мобильный хедер: лого слева, гамбургер справа — жёстко у краёв */
	.main-wrap header .navbar {
		padding-left: 0;
		padding-right: 0;
	}
	.main-wrap header .navbar > .container {
		width: 100% !important;
		max-width: none !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
	.main-wrap header .navbar .container > .navbar-header,
	.main-wrap header .navbar-header {
		position: relative !important;
		display: block !important;
		float: none !important;
		width: 100% !important;
		max-width: none !important;
		height: 56px;
		margin: 0 !important;
		padding: 0 !important;
		text-align: left;
	}
	.main-wrap header .navbar-brand {
		position: absolute !important;
		left: 8px !important;
		top: 50% !important;
		right: auto !important;
		float: none !important;
		display: block !important;
		height: auto !important;
		padding: 0 !important;
		margin: 0 !important;
		-webkit-transform: translateY(-50%);
		transform: translateY(-50%);
	}
	.main-wrap header .navbar-brand img {
		display: block;
		max-width: 140px;
		width: 140px;
		margin: 0 !important;
	}
	.main-wrap header .navbar-toggle,
	.navbar-inverse .navbar-toggle {
		position: absolute !important;
		right: 8px !important;
		left: auto !important;
		top: 50% !important;
		float: none !important;
		display: flex !important;
		flex-direction: column;
		align-items: flex-end;
		justify-content: center;
		width: auto !important;
		min-width: 0;
		height: 44px;
		margin: 0 !important;
		padding: 0 !important;
		border: none !important;
		border-radius: 0;
		background: transparent !important;
		-webkit-transform: translateY(-50%);
		transform: translateY(-50%);
	}
	.navbar-inverse .navbar-toggle:hover,
	.navbar-inverse .navbar-toggle:focus {
		background: transparent !important;
	}
	.main-wrap header .navbar-toggle .icon-bar,
	.navbar-inverse .navbar-toggle .icon-bar {
		display: block;
		width: 28px;
		height: 3px;
		border-radius: 1px;
		background-color: #ffffff;
	}
	.main-wrap header .navbar-toggle .icon-bar + .icon-bar,
	.navbar-inverse .navbar-toggle .icon-bar + .icon-bar {
		margin-top: 6px;
	}
	/* выпадающее меню */
	.main-wrap header #navbar {
		background: #262424;
		border-top: 1px solid rgba(255, 255, 255, 0.08);
		max-height: none;
	}
	.main-wrap header #navbar ul {
		float: none;
		margin: 0;
		padding: 8px 0;
	}
	.main-wrap header #navbar ul li a {
		padding: 14px 24px;
		text-align: left;
		border-bottom: none;
		border-left: 4px solid transparent;
	}
	.main-wrap header #navbar ul li.active a {
		border-left-color: #CC252D;
		background: rgba(255, 255, 255, 0.05);
	}
	.main-wrap header #navbar ul li a:after {
		display: none;
	}
	#magic-line {
		display: none !important;
	}
	/* мини-версия шапки при скролле не нужна на мобильных */
	.main-wrap header .navbar.mini .navbar-brand img {
		width: 150px;
		margin: 0 !important;
	}

	/* слайдер */
	.main-wrap .content .slider .carousel-inner {
		height: auto;
		max-height: none;
	}
	.main-wrap .content .slider .carousel-inner .carousel-item {
		height: auto;
		overflow: visible;
	}
	.main-wrap .content .slider .carousel-inner .carousel-item img {
		position: relative;
		height: auto;
		object-fit: unset;
	}
	.main-wrap .content .slider .carousel-inner .carousel-item .carousel-caption {
		font-size: 22px;
		padding: 10px 12px;
		top: 30%;
	}

	/* «Мы предлагаем» */
	.main-wrap .content .services ul {
		padding-top: 25px;
	}
	.main-wrap .content .services ul li p {
		font-size: 14px;
		line-height: 1.65;
	}
	.main-wrap .content .services i {
		margin-bottom: 30px;
	}
	.main-wrap .content .services .illustration {
		height: 180px;
		margin-top: 10px;
	}
	.main-wrap .content .services .illustration .environment {
		background-size: contain;
	}

	/* «Подходы к проектам» — иконки по центру, без плюсов */
	.main-wrap .content .startup {
		padding: 45px 0;
	}
	.main-wrap .content .startup ul {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		gap: 10px;
		margin: 16px 0 0;
		padding: 0;
	}
	.main-wrap .content .startup ul.row {
		margin-left: 0;
		margin-right: 0;
	}
	.main-wrap .content .startup ul li {
		float: none;
		flex: 0 0 auto;
		width: 100%;
		max-width: 300px;
		margin: 0;
		padding: 0 12px !important;
		box-sizing: border-box;
		text-align: center;
	}
	.main-wrap .content .startup ul li:after {
		content: none;
		display: none;
	}
	.main-wrap .content .startup .approach-icon {
		margin-left: auto;
		margin-right: auto;
	}

	/* карточки услуг и проектов в одну колонку */
	.main-wrap .content .gallery .card,
	.main-wrap .content .gallery .item {
		width: calc(100% - 20px);
	}
	/* сброс старого правила mobile.css (.gallery .item > * { width:200px }),
	   которое сжимало иконку и подпись карточки проекта */
	.main-wrap .content .gallery .item > * {
		width: 100%;
		margin: 0;
	}
	.main-wrap .content .gallery .header-title {
		font-size: 20px;
		margin: 20px 10px;
	}
	.main-wrap .content .gallery > .row {
		margin: 0;
	}
	/* карточки услуг: текст на всю ширину блока + разворачивание длинного текста */
	.main-wrap .content .gallery .card .card-title,
	.main-wrap .content .gallery .card .card-text,
	.main-wrap .content .gallery .card ul {
		text-align: left;
	}
	.main-wrap .content .gallery .card .card-text {
		max-height: 6.6em;
		overflow: hidden;
		transition: max-height 0.25s ease;
	}
	.main-wrap .content .gallery .card .card-text.expanded {
		max-height: none;
	}
	.main-wrap .content .gallery .card .toggle-text {
		display: inline-block;
		margin: -4px 0 12px;
		font-size: 13px;
		font-weight: 700;
		color: #CC252D;
		cursor: pointer;
	}

	/* контакты: колонки в столбик */
	.main-wrap .content .contact-main {
		display: block;
		padding: 20px 0;
	}
	.main-wrap .content .contact-main aside {
		border-left: none;
		border-top: 1px solid #E3E3E6;
		margin-top: 20px;
		padding: 20px 0 0;
	}

	/* «О нас» */
	.main-wrap .content .main-arc .banner {
		padding: 30px 0 15px;
	}
	.main-wrap .content .main-arc .banner img {
		max-width: 200px;
	}

	/* подвал */
	.main-wrap footer {
		font-size: 15px;
		padding: 26px 15px;
	}
	.main-wrap footer img {
		display: block;
		margin: 0 auto 12px;
	}
}

@media all and (max-width: 600px) {
	.main-wrap .content {
		margin-top: 60px;
	}
	.main-wrap .content h2 {
		font-size: 22px;
	}
	.main-wrap .content .slider .carousel-inner .carousel-item .carousel-caption {
		font-size: 17px;
		top: 25%;
	}
	.main-wrap header .navbar-brand img,
	.main-wrap header .navbar.mini .navbar-brand img {
		max-width: 140px;
		width: 140px;
		margin: 0 !important;
	}
	.tech-badge {
		font-size: 13px;
		padding: 8px 14px;
		margin: 5px 4px;
	}
}

/* ============================================================
   ОБНОВЛЕНИЕ 2: подходы, о нас, футер, контакты, проекты
   ============================================================ */

/* ---------- «Подходы к проектам»: равномерная сетка ---------- */
.main-wrap .content .startup ul {
	display: flex;
	justify-content: center;
	gap: 36px;
	margin: 40px 0 0;
	padding: 0;
}
.main-wrap .content .startup ul li {
	float: none;
	width: 262px;
	flex: 0 0 262px;
	position: relative;
	padding-top: 0;
	padding-right: 0;
	background: none;
}
.main-wrap .content .startup .approach-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	margin: 0 auto 16px;
}
.main-wrap .content .startup .approach-icon svg {
	width: 56px;
	height: 56px;
}
@media all and (max-width: 1199px) {
	.main-wrap .content .startup ul {
		flex-wrap: wrap;
	}
	.main-wrap .content .startup ul li:after {
		content: "";
	}
}

/* ---------- «О нас»: список направлений ---------- */
.main-wrap .content .about-list {
	display: flex;
	flex-wrap: wrap;
	margin: 0 -10px 30px;
	padding: 0;
}
.main-wrap .content .about-list li {
	flex: 0 0 calc(50% - 20px);
	margin: 0 10px 16px;
	background: #FFFFFF;
	border: 1px solid #ECECEE;
	border-radius: 12px;
	padding: 16px 24px;
	display: flex;
	align-items: center;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.55;
	color: #444141;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
	transition: transform 0.2s, box-shadow 0.2s;
}
.main-wrap .content .about-list li:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08);
}
.main-wrap .content .about-list li:before {
	content: "";
	flex: 0 0 20px;
	width: 20px;
	height: 20px;
	margin-right: 14px;
	background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23CC252D" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5"/></svg>') no-repeat center / contain;
}
.main-wrap .content .about-list li span {
	flex: 1 1 auto;
	text-align: center;
}
.main-wrap .content .main-arc .text-center {
	text-align: center;
}

/* ---------- Футер ---------- */
.main-wrap footer {
	text-align: left;
	font-size: 14px;
	font-weight: 400;
	padding: 50px 0 0;
}
.main-wrap footer .footer-grid {
	display: flex;
	gap: 40px;
	padding-bottom: 34px;
}
.main-wrap footer .footer-col {
	flex: 1;
}
.main-wrap footer .footer-brand {
	flex: 1.6;
}
.main-wrap footer .footer-brand img {
	width: 180px;
	margin: 0 0 18px;
	display: block;
}
.main-wrap footer .footer-name {
	font-size: 16px;
	font-weight: 700;
	color: #FFFFFF;
	margin: 0 0 8px;
	line-height: 1.5;
}
.main-wrap footer .footer-sub {
	font-size: 13px;
	color: #A5A2A2;
	margin: 0;
	line-height: 1.6;
}
.main-wrap footer h5 {
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.8px;
	color: #FFFFFF;
	margin: 6px 0 16px;
}
.main-wrap footer .footer-col ul {
	margin: 0;
	padding: 0;
}
.main-wrap footer .footer-col ul li {
	margin-bottom: 10px;
	color: #B9B6B6;
	line-height: 1.6;
}
.main-wrap footer .footer-col ul li a {
	color: #B9B6B6;
	text-decoration: none;
	outline: none;
}
.main-wrap footer .footer-col ul li a:hover {
	color: #FFFFFF;
}
.main-wrap footer .footer-col ul li a:focus,
.main-wrap footer .footer-col ul li a:active {
	outline: none;
	box-shadow: none;
}
.main-wrap footer .copyright {
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	padding: 18px 0;
	margin-top: 0;
	font-size: 13px;
	text-align: center;
	color: #8B8888;
}

/* ---------- Контакты ---------- */
.main-wrap .content .contact-page {
	padding-top: 50px;
}
.main-wrap .content .contact-main {
	display: block;
	padding: 10px 0 30px;
}
.main-wrap .content .requisites-card {
	background: #FFFFFF;
	border: 1px solid #ECECEE;
	border-radius: 14px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
	padding: 26px 30px;
	box-sizing: border-box;
}
.main-wrap .content .requisites-card h4 {
	margin: 0 0 18px;
	line-height: 1.5;
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.main-wrap .content .requisites {
	margin: 0;
	padding: 0;
}
.main-wrap .content .requisites li {
	display: flex;
	padding: 12px 0;
	border-top: 1px solid #F1F1F3;
	font-size: 14px;
	line-height: 1.6;
}
.main-wrap .content .requisites li span {
	flex: 0 0 90px;
	font-weight: 700;
	color: #8A8787;
	text-transform: uppercase;
	font-size: 12px;
	letter-spacing: 0.5px;
	padding-top: 2px;
}
.main-wrap .content .requisites-card .contact-icons {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px 40px;
	margin: 22px 0 0;
	padding: 18px 0 0;
	border-top: 1px solid #F1F1F3;
}
.main-wrap .content .requisites-card .contact-icons li {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 4px 0;
	font-size: 14px;
	line-height: 1.6;
	text-align: center;
	white-space: nowrap;
	flex: 0 1 auto;
}
.main-wrap .content .requisites-card .contact-icons li:before {
	content: "";
	flex: 0 0 30px;
	width: 30px;
	height: 30px;
	border: 3px solid #727272;
	border-radius: 50%;
	background: url(../img/sprite-x.png) no-repeat transparent;
}
.main-wrap .content .requisites-card .contact-icons .icon-address:before {
	background-position: -13px -988px;
}
.main-wrap .content .requisites-card .contact-icons .icon-mail:before {
	background-position: -12px -1023px;
}
.main-wrap .content .requisites-card .contact-icons .icon-phone:before {
	background-position: -14px -1064px;
}
.main-wrap .content .requisites-card .contact-icons a {
	color: #333030;
}
.main-wrap .content .requisites-card .contact-icons a:hover {
	color: #CC252D;
	text-decoration: none;
}
.main-wrap .content .map-block {
	border-radius: 14px;
	overflow: hidden;
	border: 1px solid #ECECEE;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
	margin-bottom: 45px;
	line-height: 0;
}
.main-wrap .content .map-block iframe {
	border: 0;
	width: 100%;
}

/* ---------- Проекты: иконки ---------- */
.main-wrap .content .gallery .item {
	cursor: default;
}
.main-wrap .content .gallery .proj-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 170px;
	margin: 0;
	background: linear-gradient(180deg, #FAFAFB 0%, #F1F1F3 100%);
}
.main-wrap .content .gallery .item div.caption {
	background: #FFFFFF;
	border-top: 3px solid #CC252D;
	padding: 14px 16px;
	font-weight: 600;
	position: relative;
	display: block;
}
.main-wrap .content .gallery .item div.caption .date {
	position: absolute;
	top: 14px;
	right: 16px;
	font-size: 12px;
	color: #8A8787;
}
.main-wrap .content .gallery .item div.caption .detail {
	font-size: 13px;
	line-height: 1.6;
	font-weight: 400;
	margin-top: 6px;
	color: #6B6969;
}

/* ---------- Мобильные дополнения ---------- */
@media all and (max-width: 767px) {
	.main-wrap .content .about-list li {
		flex: 0 0 calc(100% - 20px);
	}
	.main-wrap footer {
		padding: 34px 0 0;
	}
	.main-wrap footer .footer-grid {
		flex-direction: column;
		gap: 26px;
		padding-bottom: 26px;
	}
	.main-wrap footer .footer-brand img {
		width: 150px;
	}
	.main-wrap .content .map-block iframe {
		height: 280px;
	}
	.main-wrap .content .requisites-card {
		padding: 20px;
		overflow: hidden;
	}
	.main-wrap .content .requisites li {
		flex-direction: column;
	}
	.main-wrap .content .requisites li span {
		flex: none;
		margin-bottom: 2px;
	}
	.main-wrap .content .requisites-card .contact-icons {
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
	}
	.main-wrap .content .requisites-card .contact-icons li {
		width: 100%;
		max-width: 100%;
		min-width: 0;
		box-sizing: border-box;
		overflow: hidden;
		justify-content: flex-start;
		text-align: left;
	}
	.main-wrap .content .requisites-card .contact-icons li > span,
	.main-wrap .content .requisites-card .contact-icons li > a {
		flex: 1 1 auto;
		min-width: 0;
		max-width: 100%;
		overflow: hidden;
	}
	/* Адрес переносится, не вылезает за блок */
	.main-wrap .content .requisites-card .contact-icons .icon-address {
		align-items: flex-start;
		white-space: normal;
	}
	.main-wrap .content .requisites-card .contact-icons .icon-address > span,
	.main-wrap .content .requisites-card .contact-icons .icon-address .marquee-outer,
	.main-wrap .content .requisites-card .contact-icons .icon-address .marquee-inner {
		white-space: normal !important;
		overflow: visible;
		overflow-wrap: anywhere;
		word-break: break-word;
		animation: none !important;
		transform: none !important;
	}
	.main-wrap .content .requisites-card h4 {
		text-overflow: clip;
		max-width: 100%;
	}

	/* Самоскролящийся текст: только в одну сторону, блюр справа гаснет на старте */
	.marquee-outer {
		display: block;
		overflow: hidden;
		text-align: left;
		-webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 28px), transparent 100%);
		mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 28px), transparent 100%);
		transition: -webkit-mask-image 0.2s ease, mask-image 0.2s ease;
	}
	.marquee-outer.marquee-at-start {
		-webkit-mask-image: none;
		mask-image: none;
	}
	.marquee-outer .marquee-inner {
		display: inline-block;
		white-space: nowrap;
		will-change: transform;
	}
	.marquee-outer.marquee .marquee-inner {
		animation: marquee-scroll var(--marquee-duration, 6s) linear infinite;
	}
	@keyframes marquee-scroll {
		0%, 14% {
			transform: translateX(0);
		}
		100% {
			transform: translateX(var(--marquee-distance, 0px));
		}
	}
}

/* ============================================================
   ОБНОВЛЕНИЕ 3: отступы, иконки, стрелки баннера
   ============================================================ */

/* «Мы предлагаем»: больше воздуха между пунктами */
.main-wrap .content .services ul li {
	margin-bottom: 40px;
}
.main-wrap .content .services ul li:last-child {
	margin-bottom: 0;
}

/* Стрелки баннера: тёмный градиент по краям (как раньше) */
.main-wrap .content .slider .carousel-control-prev,
.main-wrap .content .slider .carousel-control-next {
	width: 12%;
	opacity: 1;
	transition: opacity 0.2s ease;
}
.main-wrap .content .slider .carousel-control-prev {
	background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 100%);
}
.main-wrap .content .slider .carousel-control-next {
	background-image: linear-gradient(270deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 100%);
}
.main-wrap .content .slider .carousel-control-prev:hover,
.main-wrap .content .slider .carousel-control-next:hover {
	opacity: 1;
}
.main-wrap .content .slider .carousel-control-prev-icon,
.main-wrap .content .slider .carousel-control-next-icon {
	width: 2.4rem;
	height: 2.4rem;
}

/* Единый отступ заголовка галереи от шапки (Проекты, Услуги) — как на «О нас» */
.main-wrap .content .gallery > .title:first-child,
.main-wrap .content .gallery > .header-title:first-child {
	padding-top: 10px;
	margin: 0 auto 30px;
}

/* Логотип: SVG масштабируем по высоте (чёткость на любом экране) */
.main-wrap header .navbar-brand img {
	width: auto !important;
	height: 46px;
	max-width: none !important;
}
.main-wrap footer .footer-brand img {
	width: auto;
	height: 58px;
}
@media all and (max-width: 767px) {
	.main-wrap header .navbar-brand img {
		height: 40px;
	}
}

/* «О нас»: заголовок вместо логотипа-баннера */
.main-wrap .content .about-page {
	padding-top: 50px;
}
.main-wrap .content .about-page .title {
	margin-bottom: 30px;
}

/* Логотип по вертикали заподлицо с пунктами меню */
@media (min-width: 768px) {
	.main-wrap header .navbar-header {
		display: flex;
		align-items: center;
	}
}

/* ============================================================
   ОБНОВЛЕНИЕ 4: мобильные доработки
   ============================================================ */
.main-wrap .content .gallery .card .card-text {
	position: relative;
}

@media all and (max-width: 767px) {
	/* Слайдер: убрать стрелки и точки-индикаторы */
	.main-wrap .content .slider .carousel-control-prev,
	.main-wrap .content .slider .carousel-control-next,
	.main-wrap .content .slider .carousel-indicators {
		display: none !important;
	}

	/* «Подходы к проектам»: убрать растянутую высоту пунктов (было flex-basis 262px) */
	.main-wrap .content .startup ul {
		flex-direction: column;
		gap: 0;
		margin-top: 18px;
	}
	.main-wrap .content .startup ul li {
		flex: 0 0 auto;
		width: 100%;
		max-width: 300px;
		margin: 0 auto 24px;
	}
	.main-wrap .content .startup ul li:last-child {
		margin-bottom: 0;
	}

	/* Шапка: больше отступов у логотипа и гамбургера от краёв */
	.main-wrap header .navbar-brand {
		left: 18px !important;
	}
	.main-wrap header .navbar-toggler,
	.main-wrap header .navbar-toggle {
		right: 18px !important;
	}

	/* Заголовок галереи (Услуги/Проекты): боковые отступы от краёв экрана */
	.main-wrap .content .gallery > .title:first-child,
	.main-wrap .content .gallery > .header-title:first-child {
		padding-left: 18px;
		padding-right: 18px;
	}

	/* Услуги: затухание (fade) внизу обрезанного текста карточки */
	.main-wrap .content .gallery .card .card-text.truncated:not(.expanded)::after {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		height: 2.6em;
		background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #ffffff 92%);
		pointer-events: none;
	}
}

/* ============================================================
   ОБНОВЛЕНИЕ 5: иконки «Мы предлагаем» — единый SVG по центру
   ============================================================ */
.main-wrap .content .services i.svc-ic {
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	padding: 0;
}
.main-wrap .content .services i.svc-ic svg {
	width: 32px;
	height: 32px;
	stroke: #727272;
	fill: none;
	transition: stroke 0.2s ease;
}
.main-wrap .content .services li:hover i.svc-ic {
	transform: none;
	border-color: #CC252D;
}
.main-wrap .content .services li:hover i.svc-ic svg {
	stroke: #CC252D;
}

/* «Мы предлагаем»: центрируем двухколоночный блок (не растягивая на всю ширину) */
.main-wrap .content .services .row {
	max-width: 900px;
	margin-left: auto;
	margin-right: auto;
}

/* ============================================================
   ОБНОВЛЕНИЕ 6: «Мы предлагаем» — ровная сетка 3×2
   ============================================================ */
.main-wrap .content .services .offer-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 42px 30px;
	max-width: 1040px;
	margin: 48px auto;
	padding: 0;
}
.main-wrap .content .services .offer {
	display: flex;
	align-items: flex-start;
	gap: 18px;
}
.main-wrap .content .services .offer i.svc-ic {
	float: none;
	margin: 0;
	flex: 0 0 auto;
}
.main-wrap .content .services .offer-body strong {
	display: block;
	font-size: 17px;
	font-weight: 800;
	margin-bottom: 4px;
	color: #333030;
}
.main-wrap .content .services .offer-body p {
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
	color: #5F5C5C;
}
.main-wrap .content .services .offer:hover i.svc-ic {
	border-color: #CC252D;
}
.main-wrap .content .services .offer:hover i.svc-ic svg {
	stroke: #CC252D;
}
@media (max-width: 991px) {
	.main-wrap .content .services .offer-grid {
		grid-template-columns: repeat(2, 1fr);
		max-width: 720px;
	}
}
@media (max-width: 575px) {
	.main-wrap .content .services .offer-grid {
		grid-template-columns: 1fr;
		max-width: 360px;
		gap: 28px;
	}
}

/* ---------- Дополнения v5: h1, форма, виды ИТ-деятельности ---------- */
.main-wrap .content h1 {
	font-weight: 700;
	font-size: 28px;
	letter-spacing: -0.3px;
}
.main-wrap .content .about-page .about-intro {
	text-align: center;
	max-width: 760px;
	margin: 0 auto 25px;
}
.main-wrap .content .reg-note {
	color: #727272;
	max-width: 860px;
	margin: 0 auto 20px;
}
.privacy-page { max-width: 860px; margin: 0 auto; padding: 50px 0 65px; }
.privacy-page h2 { margin-top: 35px; font-size: 22px; scroll-margin-top: 90px; }
.privacy-page p, .privacy-page li { line-height: 1.6; }
.privacy-page ul { padding-left: 22px; }
.privacy-page ul li { list-style: disc; }


/* ---------- Облака на главной: плавный бесшовный цикл ----------
   Сдвиг фона ровно на ширину картинки (px) + linear вместо ease —
   без рывка на стыке цикла */
@keyframes movecloud-a { from { background-position: 0 0; } to { background-position: 1262px 0; } }
@keyframes movecloud-b { from { background-position: 0 0; } to { background-position: 1236px 0; } }
@keyframes movecloud-c { from { background-position: 0 0; } to { background-position: 847px 0; } }
@keyframes movecloud-d { from { background-position: 0 0; } to { background-position: 1032px 0; } }
.main-wrap .content .services .illustration .cloud-1.play { animation: movecloud-a 60s linear infinite; }
.main-wrap .content .services .illustration .cloud-2.play { animation: movecloud-b 75s linear infinite; }
.main-wrap .content .services .illustration .star-1.play { animation: movecloud-c 80s linear infinite; }
.main-wrap .content .services .illustration .star-2.play { animation: movecloud-d 90s linear infinite; }
@media (prefers-reduced-motion: reduce) {
	.main-wrap .content .services .illustration .cloud-1.play,
	.main-wrap .content .services .illustration .cloud-2.play,
	.main-wrap .content .services .illustration .star-1.play,
	.main-wrap .content .services .illustration .star-2.play { animation: none; }
}

/* ---------- «О нас»: виды деятельности в области ИТ ---------- */
.main-wrap .content .it-activities {
	max-width: 860px;
	margin: 0 auto 65px;
	padding: 0;
}
.main-wrap .content .it-activities li {
	position: relative;
	padding: 8px 0 8px 74px;
	line-height: 1.55;
	list-style: none;
}
.main-wrap .content .it-activities li > span {
	position: absolute;
	left: 0;
	top: 9px;
	width: 58px;
	text-align: center;
	background: #CC252D;
	color: #fff;
	border-radius: 6px;
	font-weight: 700;
	padding: 1px 0;
}