:root {
	/* Единая цветовая система сайта (premium agency / IT studio):
	   холодный лавандово-белый фон + один фиолетово-синий акцент везде. */
	--primary-color: #5b4bee;
	--primary-color-rgb: 91, 75, 238;
	--primary-color-2: #7567f5;
	--primary-gradient: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-color-2) 100%);
	/* Отдельный градиент именно для ТЕКСТА (background-clip: text) —
	   чуть другие стопы, чем у --primary-gradient (который для сплошных
	   заливок кнопок/панелей), три точки дают более плавный переход на
	   крупных буквах. Один класс на весь сайт — .gradient-text ниже —
	   вместо отдельного background у каждого акцентного слова. */
	--gradient-text: linear-gradient(135deg, #5146e5 0%, #6b5cf0 45%, #8175f7 100%);
	--primary-tint: #eef0ff;
	--bg: #f7f8ff;
	--ink: #111111;
	--ink-muted: #626978;
	--hairline: #e8e9f2;
	--secondary-color: #20c997;
	--dark-color: #111216;
	--light-color: #f8f9fa;
	/* Единый контейнер для всего сайта — 1440px + фиксированные боковые
	   поля (не тянется во всю ширину даже на очень широких мониторах).
	   Раньше здесь стояло 1840px намеренно, чтобы не трогать откалиброванную
	   в пикселях геометрию hero (эллипс/девушка) — но по прямому и
	   развёрнутому ТЗ "весь сайт на одной сетке, включая Hero" геометрия
	   hero пересчитана как % от новой (более узкой) колонки — пропорции
	   (голова/ноги относительно эллипса) от ширины колонки не зависят,
	   поменяется только абсолютный масштаб. */
	--page-max-width: 1440px;
	--page-gutter: 40px;
	--project-header-offset: 88px;
}

@media (max-width: 767.98px) {
	:root {
		--page-gutter: 20px;
	}
}

@media (max-width: 480px) {
	:root {
		--page-gutter: 16px;
	}
}

html {
	/* Горизонтальный скролл гасим на html, а не на body классическим
	   overflow-x:hidden: если overflow-x:hidden висит на body, у
	   Safari/Chrome ломается расчёт containing block для position: sticky
	   внутри body, и sticky-хедер дрожит/дёргается при скролле. */
	overflow-x: hidden;
}

body {
	font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
	background-color: var(--bg);
	color: var(--ink);
	padding-top: 0;
	/* overflow-x: clip, а не hidden — clip не создаёт scroll-контейнер
	   (в отличие от hidden/auto/scroll), поэтому НЕ ломает position: sticky,
	   но всё равно физически обрезает секции, которые бleedят за пределы
	   viewport (декоративные .blob, отрицательные margin у Bootstrap .row
	   с гаттерами) — второй, более надёжный рубеж поверх html{overflow-x},
	   который на реальных мобильных браузерах не всегда достаточен сам по себе. */
	overflow-x: clip;
}

/* Единый вертикальный ритм между крупными секциями — "много воздуха" по
   ТЗ, но без исходных 90-160px: соседние секции складывают свои
   padding-bottom/padding-top друг с другом (у каждой ведь есть оба), и
   90-160+90-160 на стыке давало голый разрыв до 320px — на практике
   слишком много. clamp(56px, 6vw, 96px) — воздух в сумме до ~190px на
   стыке, заметно просторнее дефолтных 48px Bootstrap, но без разрыва.
   !important обязателен: py-5 — Bootstrap-утилита, у неё самой стоит
   !important, ничем другим её не перебить. Только на <section>, чтобы не
   задеть py-5 на карточках/модалках внутри секций. */
section.py-5 {
	padding-top: clamp(56px, 6vw, 96px) !important;
	padding-bottom: clamp(56px, 6vw, 96px) !important;
}

/* У hero сверху — sticky-хедер, а не предыдущая секция: тот же большой
   отступ здесь читался как голая пустая полоса под хедером, а не как
   воздух между блоками. Компактно сверху; снизу тоже урезали — колонка
   .hero-visual (740px, под геометрию эллипса/девушки) уже сама по себе
   заметно выше текстовой колонки, и общий крупный padding-bottom поверх
   этой и так пустой нижней части + padding-top у #services суммарно
   давали неоправданно длинный голый разрыв перед "Наши услуги". */
.home-hero.py-5 {
	padding-top: clamp(32px, 4vw, 56px) !important;
	padding-bottom: clamp(32px, 4vw, 56px) !important;
}

/* Та же логика для верха #services: секция сразу после hero, у которого
   и так уже есть "воздух" в виде пустой нижней части высокой .hero-visual
   — полный клэмп сверху здесь тоже суммировался в слишком длинный разрыв. */
#services.py-5 {
	padding-top: clamp(48px, 6vw, 90px) !important;
}

/* Якорные ссылки в шапке (#services, #contact и т.д.) без этого утыкают
   секцию прямо под sticky-хедер (#site-header-root, ~74px) — заголовок
   секции оказывается частично под хедером. Раньше было незаметно из-за
   мелкого шрифта заголовков, теперь на новом крупном .section-title видно
   отчётливо, особенно на #contact с непрозрачной панелью. */
section[id] {
	scroll-margin-top: 90px;
}

h1, h2, h3, h4, h5, h6, .section-title {
	font-weight: 700;
	letter-spacing: -0.04em;
}

.hand-note {
	font-family: 'Bad Script', cursive;
	color: var(--primary-color);
}

/* Плоские декоративные "шары" градиентом — фирменный приём макета,
   используем позади хиро/крупных блоков вместо пустого фона. */
.blob {
	position: absolute;
	border-radius: 50%;
	background: radial-gradient(circle at 30% 30%, #c9cffc, #eef0fe 70%);
	filter: blur(10px);
	pointer-events: none;
	z-index: 0;
}

.services-grid {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 16px;
}

.service-tile {
	background: #fff;
	border-radius: 18px;
	padding: 20px 18px;
	box-shadow: 0 16px 34px -26px rgba(11, 11, 18, 0.2);
}

.service-tile__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 12px;
	margin-bottom: 14px;
	font-size: 18px;
}

.service-tile__icon--blue { background: #e3e9fe; color: #3b5bfb; }
.service-tile__icon--green { background: #dff7f1; color: #0fa895; }
.service-tile__icon--purple { background: #eae5fe; color: #6c4cf1; }
.service-tile__icon--pink { background: #fde7ee; color: #f0508a; }

.service-tile__title {
	font-weight: 700;
	font-size: 13.5px;
	margin-bottom: 6px;
}

.service-tile__desc {
	font-size: 11.5px;
	line-height: 1.4;
	color: var(--ink-muted);
}

@media (max-width: 992px) {
	.services-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 14px;
	}
}

@media (max-width: 576px) {
	.services-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.section-hairline {
	background-color: #fff;
	border-top: 1px solid var(--hairline);
}

.stack-card {
	box-shadow: none !important;
	border: 1px solid var(--hairline) !important;
}

.stack-card .bi {
	color: var(--primary-color);
}

.section-heading {
	margin-bottom: 40px;
}

.section-heading--center {
	text-align: center;
}

.section-heading__eyebrow {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--primary-color);
	margin-bottom: 8px;
}

.section-heading .section-title {
	margin-bottom: 0;
}

/* Плашки-пилюли для кнопок-ссылок карточек (вместо голого текста со
   стрелкой — по итогам ревью макета голая "→" выглядела дёшево). */
.pill-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--primary-tint);
	color: var(--primary-color);
	font-weight: 700;
	font-size: 12px;
	padding: 8px 14px;
	border-radius: 100px;
}

/* Единый акцент вместо дефолтного синего Bootstrap на кнопках. */
.btn-primary {
	--bs-btn-bg: var(--primary-color);
	--bs-btn-border-color: var(--primary-color);
	--bs-btn-hover-bg: #4038c9;
	--bs-btn-hover-border-color: #4038c9;
	--bs-btn-active-bg: #4038c9;
	--bs-btn-active-border-color: #4038c9;
	--bs-btn-disabled-bg: var(--primary-color);
	--bs-btn-disabled-border-color: var(--primary-color);
	--bs-btn-focus-shadow-rgb: var(--primary-color-rgb);
	background-image: var(--primary-gradient);
	border: none;
	transition: transform 0.25s ease, filter 0.25s ease, box-shadow 0.25s ease;
}

.btn-primary:hover,
.btn-primary:focus-visible {
	transform: translateY(-2px);
}

.btn-outline-secondary {
	--bs-btn-color: #69707d;
	--bs-btn-border-color: #858b98;
	--bs-btn-hover-color: #69707d;
	--bs-btn-hover-bg: transparent;
	--bs-btn-hover-border-color: #69707d;
	transition: transform 0.25s ease, border-color 0.25s ease;
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus-visible {
	transform: translateY(-2px);
}

.btn.btn-lg {
	border-radius: 8px;
}

#site-header-root {
	position: sticky;
	top: 0;
	z-index: 1030;
	background: #fff;
}

#site-header-root > header {
	/* Safe area держим внутри самого хедера, чтобы не гулял sticky-top. */
	padding-top: env(safe-area-inset-top, 0px);
}

.container,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-xxl {
	max-width: var(--page-max-width);
	padding-left: var(--page-gutter);
	padding-right: var(--page-gutter);
}

body.project-page {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

body.project-page main {
	flex: 1 0 auto;
}

.site-brand {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
}

.site-logo {
	display: block;
	width: auto;
	height: 38px;
}

.site-header {
	display: flex;
	flex-direction: column;
}

.site-header__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
}

.site-header__desktop-nav {
	flex: 1 1 auto;
}

.site-header__desktop-nav .nav {
	justify-content: center;
}

.site-header .nav-link {
	position: relative;
	transition:
		color 0.2s ease,
		opacity 0.2s ease;
}

.site-header .nav-link::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: -8px;
	height: 2px;
	border-radius: 999px;
	background: var(--primary-color);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.2s ease;
}

.site-header .nav-link:hover,
.site-header .nav-link:focus-visible {
	color: var(--primary-color) !important;
}

.site-header .nav-link:hover::after,
.site-header .nav-link:focus-visible::after {
	transform: scaleX(1);
}

.site-header__actions {
	display: flex;
	align-items: center;
	gap: 12px;
	flex: 0 0 auto;
	flex-wrap: nowrap;
	min-width: 0;
}

.site-header__cta {
	background: var(--primary-gradient);
	color: #fff;
	font-weight: 700;
	font-size: 14px;
	padding: 10px 20px;
	border-radius: 100px;
	border: none;
	white-space: nowrap;
}

.site-header__cta:hover,
.site-header__cta:focus-visible {
	color: #fff;
	filter: brightness(1.05);
}

.site-phone {
	white-space: nowrap;
	line-height: 1;
	flex: 0 1 auto;
}

.site-header__icon-btn {
	width: 42px;
	height: 42px;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
}

.site-header__toggle {
	width: 46px;
	margin-left: 4px;
	border-radius: 12px;
	border: 1px solid rgba(var(--primary-color-rgb), 0.24);
	background: var(--primary-tint);
	color: var(--primary-color);
}

.site-header__toggle:hover,
.site-header__toggle:focus-visible {
	border-color: rgba(var(--primary-color-rgb), 0.4);
	background: #e2e3f9;
	color: #4038c9;
}

.site-header__toggle .bi {
	line-height: 1;
	font-size: 1.05rem;
}

.site-header.is-menu-open .site-header__toggle {
	border-color: rgba(var(--primary-color-rgb), 0.6);
	background: #d8daf6;
	color: #4038c9;
	box-shadow: 0 8px 18px rgba(var(--primary-color-rgb), 0.16);
}

.site-header__mobile-nav {
	margin-top: 12px;
	padding-top: 8px;
	border-top: 1px solid rgba(33, 37, 41, 0.08);
}

.site-header__mobile-nav[hidden] {
	display: none !important;
}

.site-header__mobile-nav .nav-link {
	font-weight: 500;
}

.site-header__mobile-nav .nav-link::after {
	bottom: -2px;
}

.navbar {
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.hero-section {
	background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
	color: white;
	padding: 100px 0;
	border-radius: 0 0 30px 30px;
	margin-bottom: 50px;
}

.portfolio-color {
	color: #414141 !important;
}

.portfolio-item {

	transition: transform 0.3s ease, box-shadow 0.3s ease;
	border-radius: 15px;
	overflow: hidden;
	margin-bottom: 30px;
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
	background: white;
	cursor: pointer;
}

.portfolio-item:hover {
	transform: translateY(-5px);
	box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
}

@media (min-width: 992px) {
	.portfolio-img {
		max-width: 460px;
	}
}

@media (min-width: 1200px) {
	.portfolio-img {
		max-width: 550px;
	}
}

@media (min-width: 1400px) {
	.portfolio-img {
		max-width: 650px;
	}
}

/* @media (max-width: 1199px) {
	.portfolio-img {
		max-width: 700px;
	}
}

@media (max-width: 999px) {
	.portfolio-img {
		max-width: 500px;
	}
} */


.portfolio-content {
	padding: 20px;
}

.badge-custom {
	background-color: var(--primary-color);
	border-radius: 20px;
	padding: 5px 12px;
	font-weight: 500;
}

.section-title {
	position: relative;
	margin-bottom: 40px;
	font-weight: 700;
	font-size: clamp(36px, 3.5vw, 56px);
	line-height: 1.05;
	letter-spacing: -0.045em;
}

.btn-custom {
	background-color: var(--primary-color);
	color: white;
	border-radius: 30px;
	padding: 10px 25px;
	border: none;
	transition: all 0.3s ease;
}

.btn-custom:hover {
	background-color: #5a32a8;
	transform: translateY(-2px);
	color: white;
}

.social-icon {
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background-color: var(--primary-color);
	color: white;
	border-radius: 50%;
	margin-right: 10px;
	transition: all 0.3s ease;
}

.social-icon:hover {
	transform: translateY(-3px);
	background-color: var(--secondary-color);
}

footer {
	background-color: var(--dark-color);
	color: white;
	padding: 60px 0 30px;
	margin-top: 80px;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}

footer .row > * {
	min-width: 0;
}

.site-footer__legal-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0.625rem 1rem;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.04);
	font-weight: 500;
	color: rgba(255, 255, 255, 0.88) !important;
	transition:
		background-color 0.2s ease,
		border-color 0.2s ease,
		color 0.2s ease,
		opacity 0.2s ease;
}

.site-footer__legal-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	min-height: 100%;
	min-width: 0;
}

.site-footer__legal-link:hover,
.site-footer__legal-link:focus-visible {
	color: #ffffff !important;
	background: rgba(255, 255, 255, 0.1);
	border-color: rgba(255, 255, 255, 0.22);
	opacity: 1;
}

.legal-page {
	position: relative;
}

.legal-page__card {
	position: relative;
	background: #ffffff;
	border: 1px solid rgba(15, 23, 42, 0.08);
	border-radius: 32px;
	box-shadow: 0 24px 60px rgba(15, 23, 42, 0.08);
	padding: clamp(1.5rem, 2vw, 2.5rem);
	overflow: hidden;
}

.legal-page__card::before {
	content: '';
	position: absolute;
	inset: 0 0 auto 0;
	height: 180px;
	background:
		radial-gradient(circle at top left, rgba(13, 110, 253, 0.18), transparent 38%),
		linear-gradient(180deg, rgba(15, 23, 42, 0.03), rgba(15, 23, 42, 0));
	pointer-events: none;
}

.legal-page__hero,
.legal-page__content {
	position: relative;
	z-index: 1;
}

.legal-page__hero {
	max-width: 820px;
}

.legal-page__eyebrow {
	display: inline-flex;
	align-items: center;
	padding: 0.45rem 0.9rem;
	margin-bottom: 1rem;
	border-radius: 999px;
	background: rgba(13, 110, 253, 0.08);
	color: #295fca;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.legal-page__content {
	color: #4a556f;
	line-height: 1.75;
}

.legal-page__lead {
	max-width: 720px;
	margin: 0;
	font-size: 1.02rem;
	line-height: 1.75;
	color: #52607a;
}

.legal-page__divider {
	position: relative;
	z-index: 1;
	height: 1px;
	margin: 1.75rem 0 2rem;
	background: linear-gradient(90deg, rgba(13, 110, 253, 0.2), rgba(15, 23, 42, 0.06));
}

.legal-page__title,
.legal-page__content h2,
.legal-page__content h3,
.legal-page__content h4 {
	color: #15213b;
	font-weight: 700;
	line-height: 1.2;
}

.legal-page__title {
	margin-bottom: 1.5rem;
	font-size: clamp(2rem, 3vw, 2.75rem);
}

.legal-page__content h2,
.legal-page__content h3,
.legal-page__content h4 {
	margin-top: 2rem;
	margin-bottom: 1rem;
	font-size: clamp(1.25rem, 2vw, 1.5rem);
}

.legal-page__content p,
.legal-page__content ul,
.legal-page__content ol {
	margin-bottom: 1rem;
}

.legal-page__content ul,
.legal-page__content ol {
	padding-left: 1.5rem;
}

.legal-page__content a {
	color: var(--primary-color);
	word-break: break-word;
}

.legal-modal .modal-dialog {
	width: min(960px, calc(100vw - 1rem));
	max-width: calc(100vw - 1rem);
	margin: 0.5rem auto;
}

.legal-modal .modal-content {
	border: 0;
	border-radius: 28px;
	box-shadow: 0 28px 70px rgba(15, 23, 42, 0.2);
}

.legal-modal .modal-header {
	padding: 1.25rem 1.25rem 0;
}

.legal-modal .modal-body {
	padding: 1rem 1.25rem 1.25rem;
	max-height: calc(100dvh - 5.5rem);
	overflow-y: auto;
}

.legal-modal__description {
	max-width: 52rem;
	line-height: 1.6;
}

.legal-modal__state {
	margin-bottom: 1rem;
	color: #667085;
}

.legal-modal__loading {
	font-size: 0.95rem;
	line-height: 1.5;
}

.legal-modal__content {
	padding-right: 0.125rem;
}

.testimonial-card {
	border-radius: 15px;
	overflow: hidden;
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
	margin-bottom: 30px;
}

.skill-bar {
	height: 10px;
	border-radius: 5px;
	margin-bottom: 20px;
	background-color: #e9ecef;
}

.skill-progress {
	height: 100%;
	border-radius: 5px;
	background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
}

/* Анимации */
@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.fade-in {
	animation: fadeIn 1s ease forwards;
}

/* Адаптивность */
@media (max-width: 768px) {
	.hero-section {
		margin-bottom: 40px;
		padding: 60px 0;
		border-radius: 0 0 20px 20px;
	}

	.display-4 {
		font-size: 2.5rem;
	}

	.site-footer__legal-link {
		min-height: auto;
		width: 100%;
	}

	.site-footer__legal-links {
		margin-top: 1rem;
		gap: 0.65rem;
		align-items: stretch;
	}

	.legal-page__card {
		border-radius: 24px;
		padding: 1.5rem 1.25rem;
	}

	.legal-page__divider {
		margin: 1.5rem 0;
	}

	.legal-modal .modal-dialog {
		width: calc(100vw - 0.75rem);
		max-width: calc(100vw - 0.75rem);
		margin: 0.375rem auto;
	}

	.legal-modal .modal-content {
		border-radius: 22px;
	}

	.legal-modal .modal-header {
		padding: 1rem 1rem 0;
	}

	.legal-modal .modal-body {
		padding: 0.875rem 1rem 1rem;
		max-height: calc(100dvh - 4.5rem);
	}

	.legal-modal__description,
	.legal-modal__loading {
		font-size: 0.92rem;
		line-height: 1.5;
	}
}

@media (max-width: 991.98px) {
	.site-header__row {
		gap: 8px;
	}

	.site-logo {
		height: 28px;
	}

	.site-header__actions {
		gap: 6px;
	}

	.site-phone {
		font-size: clamp(0.72rem, 2.8vw, 0.92rem);
	}

	.site-header__icon-btn {
		width: 34px;
		height: 34px;
		font-size: 0.9rem;
	}

	.site-header__toggle {
		width: 40px;
		border-radius: 10px;
	}
}

@media (max-width: 420px) {
	.site-logo {
		height: 24px;
	}

	.site-header__row {
		gap: 6px;
	}

	.site-header__actions {
		gap: 4px;
	}

	.site-phone {
		font-size: 0.68rem;
		letter-spacing: -0.01em;
	}

	.site-header__icon-btn {
		width: 30px;
		height: 30px;
		font-size: 0.82rem;
	}

	.site-header__toggle {
		width: 36px;
		border-radius: 9px;
	}

	.site-header__social--envelope {
		display: none;
	}
}

@media (max-width: 360px) {
	.site-logo {
		height: 22px;
	}

	.site-header__row {
		gap: 4px;
	}

	.site-header__actions {
		gap: 3px;
	}

	.site-phone {
		font-size: 0.64rem;
	}
}

/* grid-auto-flow: row (не dense) — порядок карточек в разметке специально
   подобран под bento-композицию (featured в начале каждого ряда из 4);
   dense переупаковывал бы карточки по факту заполнения и мог сдвинуть их
   с задуманных мест. */
.projects-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	align-items: stretch;
	gap: 24px;
}

/* Услуги используют ту же карточку, что и портфолио, но в 4 колонки —
   решений 8, ровно 2 ряда. */
.services-grid-4col {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1199.98px) {
	.services-grid-4col {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 576px) {
	.services-grid-4col {
		grid-template-columns: 1fr;
	}
}

/* Фото сверху, текст под ним на белом — вместо подписи поверх скрина
   (той нужен был градиент-подложка, тут он не нужен вообще). */
.project-card {
	position: relative;
	display: flex;
	flex-direction: column;
	border-radius: 28px;
	overflow: hidden;
	background: #fff;
	border: 1px solid var(--hairline);
	text-decoration: none;
	color: inherit;
	transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

.project-card:hover {
	border-color: #d5d2ff;
	box-shadow: 0 15px 40px rgba(30, 30, 80, 0.05);
	transform: translateY(-5px);
}

/* В карусели (услуги/отзывы) .col растягивается по высоте строки
   (align-items: stretch), а сама карточка — нет, если явно не сказать.
   Из-за этого при разной длине описания карточки были разной высоты. */
.col > .project-card {
	height: 100%;
}

.project-card--md,
.project-card--lg {
	grid-column: span 2;
}

.project-card--sm {
	grid-column: span 1;
}

.project-card__media {
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--primary-tint);
}

/* Карточка на 1 колонку — квадратное фото (не обрезанное вширь 16:10,
   которое на узкой span-1 карточке смотрелось вытянутым); на 2 колонки
   (featured, ниже) фото остаётся полноразмерным широким. */
.project-card--sm .project-card__media {
	aspect-ratio: 1 / 1;
}

.project-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 320ms ease;
}

.project-card:hover .project-img {
	transform: scale(1.03);
}

.project-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 24px 28px 28px;
}

.project-title {
	font-size: 22px;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--ink);
	margin-bottom: 8px;
}

.project-desc {
	font-size: 15px;
	line-height: 1.55;
	color: var(--ink-muted);
	margin-bottom: 16px;
	flex: 1;
}

/* Featured-карточка портфолио (bento-композиция, 2 колонки из 4): раньше
   ещё и увеличивала заголовок/паддинги и добавляла лейбл "Выделенный
   проект" — из-за этого её заголовок начинался заметно ниже, чем у
   соседних обычных карточек в том же ряду (разный уровень базовой линии
   текста). Единственное, что теперь делает её "крупной" — сама ширина
   (span 2) и более широкое изображение; типографика и паддинги body —
   те же токены, что у обычной карточки, поэтому заголовки во всех
   карточках одного ряда стартуют на одном уровне. */
.project-card--featured .project-card__media {
	aspect-ratio: 21 / 10;
}

/* При активном фильтре («Сайты»/«Веб-приложения»/«Десктоп») часть карточек
   скрывается — исходный порядок featured(2)+1+1 / 1+featured(2)+1 был
   рассчитан на ПОЛНЫЙ набор из 6+ карточек, а на произвольном подмножестве
   те же span:2 у featured-карточек ломали ровные ряды по 4 (то 2 в ряд, то
   3). На отфильтрованном виде это уже не bento-подборка, а обычный список
   результатов — все карточки временно становятся span:1 с квадратным фото,
   как и остальные обычные. .js-portfolio-filters переключает класс
   .is-filtered на root через bindFilters(). */
.projects-grid.is-filtered .project-card--lg,
.projects-grid.is-filtered .project-card--md {
	grid-column: span 1;
}

/* Единственное, что ещё отличало featured от обычной — широкое фото
   (21:10); при фильтре возвращаем и его к общему квадрату 1:1, раз
   карточка временно стала span:1 как все. Заголовок/паддинги/описание
   уже совпадают с обычной карточкой по умолчанию — переопределять нечего. */
.projects-grid.is-filtered .project-card--featured .project-card__media {
	aspect-ratio: 1 / 1;
}

.project-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 14px;
}

.project-tag {
	font-size: 11px;
	line-height: 1;
	font-weight: 600;
	padding: 5px 10px;
	border-radius: 999px;
	background: var(--primary-tint);
	color: var(--primary-color);
}

.project-card .pill-link {
	align-self: flex-start;
}

@media (max-width: 992px) {
	.projects-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.project-card--md,
	.project-card--lg {
		grid-column: span 2;
	}

	.project-card--sm {
		grid-column: span 1;
	}

}

@media (max-width: 576px) {
	.hero-visual {
        margin-bottom: 40px;
    }

	.projects-grid {
		grid-template-columns: repeat(1, 1fr);
		gap: 18px;
	}

	.project-card--md,
	.project-card--lg,
	.project-card--sm {
		grid-column: span 1;
	}

	/* Паддинги/шрифт body уже совпадают с обычной карточкой (стандартизация,
	   см. базовое .project-card--featured) — на мобилке (одна колонка,
	   выравнивать не с чем) оставляем только чуть другое соотношение фото. */
	.project-card--featured .project-card__media {
		aspect-ratio: 16 / 10;
	}
}

.project-screen-caption {
	padding: 1.25rem 1.25rem 1.4rem;
}

.project-screen-caption p {
	line-height: 1.55;
}
.card-hover {
	transition:
		transform 0.25s ease,
		box-shadow 0.25s ease,
		background-color 0.25s ease;
	cursor: pointer;
}

.card-hover:hover {
	transform: translateY(-6px);
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12);
}

.services-section {
	overflow: hidden;
}

.services-carousel-wrap {
	position: relative;
	overflow: hidden;
	padding: 18px 20px 30px;
	touch-action: pan-y;
}

.services-carousel {
	--services-gap: 24px;
	--services-card-width: 340px;
	display: flex;
	align-items: stretch;
	flex-wrap: nowrap;
	gap: var(--services-gap);
	width: max-content;
	margin: 0;
	will-change: transform;
}

.services-carousel--reviews {
	--services-card-width: 400px;
}

.services-carousel--reviews .review-card {
	height: 100%;
}

.services-carousel-wrap.is-desktop {
	cursor: grab;
	user-select: none;
}

.services-carousel-wrap.is-desktop.is-dragging {
	cursor: grabbing;
}

.project-empty-state {
	max-width: 960px;
	margin: 0 auto;
	padding: clamp(48px, 8vw, 96px) 0 clamp(24px, 4vw, 48px);
}

.project-empty-state__title {
	font-size: clamp(2rem, 4vw, 3.8rem);
	letter-spacing: -0.04em;
	color: #1c1d21;
	line-height: 1.04;
}

.project-empty-state__text {
	font-size: clamp(1rem, 1.8vw, 1.4rem);
	max-width: 720px;
	margin-left: auto;
	margin-right: auto;
}

body.project-page--empty main {
	padding-top: 1.5rem !important;
	padding-bottom: 1.5rem !important;
}

body.project-page--empty main > .container {
	display: block;
}

.related-project__eyebrow {
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #6f42c1;
	margin-bottom: 4px;
}

.related-project__card {
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 18px;
	border-radius: 20px;
	background: #fff;
	border: 1px solid rgba(33, 37, 41, 0.08);
	text-decoration: none;
	color: inherit;
	transition:
		border-color 0.2s ease,
		box-shadow 0.2s ease,
		transform 0.2s ease;
}

.related-project__card:hover {
	border-color: rgba(111, 66, 193, 0.3);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
	transform: translateY(-2px);
}

.related-project__img {
	width: 140px;
	height: 100px;
	object-fit: cover;
	border-radius: 14px;
	flex: 0 0 auto;
}

.related-project__body {
	flex: 1 1 auto;
	min-width: 0;
}

.related-project__title {
	font-size: 18px;
	font-weight: 700;
}

.related-project__desc {
	margin: 4px 0 0;
	color: #6c757d;
	font-size: 14px;
}

.related-project__arrow {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	border-radius: 999px;
	background: rgba(111, 66, 193, 0.08);
	color: #6f42c1;
	display: grid;
	place-items: center;
	transition: transform 0.2s ease;
}

.related-project__card:hover .related-project__arrow {
	transform: translateX(4px);
}

@media (max-width: 576px) {
	.related-project__card {
		flex-wrap: wrap;
	}

	.related-project__img {
		width: 100%;
		height: 160px;
	}
}

.project-contact-fab {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 1020;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 20px;
	border: none;
	border-radius: 999px;
	background: #6f42c1;
	color: #fff;
	font-weight: 600;
	font-size: 15px;
	box-shadow: 0 10px 30px rgba(111, 66, 193, 0.35);
	transition:
		transform 0.2s ease,
		box-shadow 0.2s ease,
		background-color 0.2s ease;
	/* На случай выемки/home-indicator снизу экрана на телефонах. */
	margin-bottom: env(safe-area-inset-bottom, 0px);
}

.project-contact-fab:hover {
	background: #5f36a6;
	box-shadow: 0 14px 36px rgba(111, 66, 193, 0.45);
	transform: translateY(-2px);
}

.project-contact-fab .bi {
	font-size: 18px;
}

@media (max-width: 576px) {
	.project-contact-fab {
		right: 16px;
		bottom: 16px;
		padding: 14px;
	}

	.project-contact-fab__label {
		/* На мобильном оставляем только иконку — так кнопка не спорит
		   с плавающей клавиатурой/нижней панелью браузера за место. */
		display: none;
	}
}

.services-carousel > .col {
	flex: 0 0 var(--services-card-width);
	width: var(--services-card-width);
	padding: 0;
}

.services-carousel .card {
	min-height: 230px;
	border-radius: 28px !important;
	background: #eceff3 !important;
}

.services-card {
	color: inherit;
}

.services-card:hover .services-card__marker,
.services-card:focus-visible .services-card__marker {
	transform: translateY(-2px) scale(1.04);
}

.services-card__marker {
	display: inline-flex;
	width: 34px;
	height: 34px;
	border-radius: 6px;
	background: var(--primary-color);
	flex: 0 0 auto;
	transition: transform 0.2s ease;
}

.services-carousel .card-body {
	padding: 30px !important;
}

.services-carousel .text-secondary {
	color: #7a8696 !important;
}

/* Общая "плашка со статистикой" — используется в хиро портфолио и отзывов. */
.stat-card {
	display: flex;
	gap: 26px;
	background: #fff;
	border-radius: 20px;
	padding: 20px 26px;
	box-shadow: 0 20px 45px -25px rgba(11, 11, 18, 0.22);
	flex: 0 0 auto;
}

.stat-card__value {
	font-weight: 800;
	font-size: 20px;
}

.stat-card__label {
	font-size: 11px;
	color: var(--ink-muted);
}

/* ---- Портфолио: шапка секции с плашкой статистики ---- */
.portfolio-hero {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 32px;
	margin-bottom: 28px;
}

.portfolio-hero__lead {
	font-size: 15px;
	line-height: 1.6;
	color: var(--ink-muted);
	max-width: 480px;
	margin: 10px 0 14px;
}

.portfolio-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 28px;
}

.filter-pill {
	background: #fff;
	border: 1px solid var(--hairline);
	font-family: inherit;
	font-weight: 600;
	font-size: 13px;
	padding: 9px 20px;
	border-radius: 100px;
	color: var(--ink-muted);
	cursor: pointer;
	transition: border-color 0.2s ease, color 0.2s ease;
}

.filter-pill:hover {
	border-color: rgba(var(--primary-color-rgb), 0.4);
	color: var(--ink);
}

.filter-pill--active {
	background: var(--primary-gradient);
	color: #fff;
	font-weight: 700;
	border-color: transparent;
}

/* ---- Отзывы: та же шапка + статичная сетка карточек вместо карусели ---- */
.reviews-hero {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 32px;
	margin-bottom: 36px;
}

.reviews-hero__lead {
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--ink-muted);
	margin: 10px 0 0;
	max-width: 420px;
}

.reviews-hero__note {
	margin-top: 36px;
	font-size: 18px;
	transform: rotate(-3deg);
}

.reviews-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
	margin-bottom: 40px;
}

.review-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--hairline);
	border-radius: 20px;
	padding: 30px;
	box-shadow: 0 15px 40px rgba(30, 30, 80, 0.05);
	transition: border-color 0.3s ease, transform 0.3s ease;
}

.review-card:hover {
	border-color: #d5d2ff;
	transform: translateY(-4px);
}

.review-card__header {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 14px;
}

.review-card__avatar {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--primary-gradient);
	color: #fff;
	font-weight: 700;
	font-size: 15px;
}

.review-card__name {
	font-weight: 700;
	font-size: 16px;
	color: var(--ink);
}

.review-card__role {
	font-size: 14px;
	color: var(--ink-muted);
}

.review-card__stars {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 14px;
}

.review-card__stars .bi-star-fill {
	color: #fcae34;
}

.review-card__stars .bi-star {
	color: #e2e2ea;
}

.review-card__rating {
	font-weight: 700;
	font-size: 12.5px;
	color: var(--ink-muted);
}

.review-card__text {
	font-size: 17px;
	line-height: 1.6;
	color: var(--ink);
	margin-bottom: 16px;
	flex: 1;
}

.review-card .pill-link {
	align-self: flex-start;
}

.reviews-cta {
	position: relative;
	background: #fff;
	border-radius: 24px;
	padding: 36px 44px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	box-shadow: 0 20px 45px -25px rgba(11, 11, 18, 0.2);
	overflow: hidden;
}

.reviews-cta__left {
	display: flex;
	align-items: center;
	gap: 20px;
	position: relative;
	z-index: 1;
}

.reviews-cta__icon {
	width: 52px;
	height: 52px;
	border-radius: 16px;
	background: var(--primary-tint);
	color: var(--primary-color);
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
}

.reviews-cta__eyebrow {
	font-size: 12.5px;
	color: var(--ink-muted);
	font-weight: 600;
	margin-bottom: 4px;
}

.reviews-cta__title {
	font-size: 24px;
	font-weight: 800;
	margin: 0;
}

.reviews-cta__right {
	display: flex;
	align-items: center;
	gap: 24px;
	position: relative;
	z-index: 1;
}

@media (max-width: 991.98px) {
	.portfolio-hero,
	.reviews-hero {
		flex-direction: column;
	}

	.reviews-hero__note {
		margin-top: 0;
	}

	.reviews-grid {
		grid-template-columns: 1fr;
	}

	.reviews-cta {
		flex-direction: column;
		align-items: flex-start;
		gap: 20px;
	}

	.reviews-cta__right {
		flex-direction: column;
		align-items: flex-start;
		gap: 14px;
	}
}

.solution-page main {
	position: relative;
	overflow: hidden;
	background:
		radial-gradient(circle at top right, rgba(13, 110, 253, 0.1), transparent 30%),
		linear-gradient(180deg, #f8fafc 0%, #ffffff 34%, #f7f9fc 100%);
}

.solution-page main::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(148, 163, 184, 0.08) 1px, transparent 1px),
		linear-gradient(90deg, rgba(148, 163, 184, 0.08) 1px, transparent 1px);
	background-size: 28px 28px;
	opacity: 0.35;
	mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.3), transparent 80%);
	pointer-events: none;
}

.solution-page main > .container {
	position: relative;
	z-index: 1;
}

.solution-hero__content {
	display: grid;
	gap: 1.5rem;
}

.solution-hero__eyebrow,
.solution-section__eyebrow {
	display: inline-flex;
	align-items: center;
	width: fit-content;
	padding: 0.45rem 0.9rem;
	border-radius: 999px;
	background: rgba(13, 110, 253, 0.08);
	color: #295fca;
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.solution-hero__title {
	margin: 0;
	font-size: clamp(2rem, 4vw, 3.4rem);
	line-height: 1.02;
	letter-spacing: -0.04em;
	color: #182033;
}

.solution-hero__text {
	margin: 0;
	max-width: 36rem;
	font-size: 1.05rem;
	line-height: 1.75;
	color: #5b667a;
}

.solution-hero__highlights {
	display: grid;
	gap: 0.75rem;
	max-width: 40rem;
}

.solution-hero__highlight {
	display: block;
	padding: 0.9rem 1rem;
	border: 1px solid rgba(15, 23, 42, 0.08);
	border-radius: 18px;
	background: rgba(255, 255, 255, 0.78);
	backdrop-filter: blur(12px);
}

.solution-hero__highlight-text {
	font-size: 0.96rem;
	font-weight: 600;
	line-height: 1.5;
	color: #1f2937;
}

.solution-hero__media,
.solution-section__media {
	position: relative;
	overflow: hidden;
	border: 1px solid rgba(15, 23, 42, 0.08);
	border-radius: 28px;
	background:
		radial-gradient(circle at top right, rgba(13, 110, 253, 0.16), transparent 32%),
		#eef2f7;
	box-shadow: 0 20px 44px rgba(15, 23, 42, 0.1);
}

.solution-hero__media {
	min-height: 100%;
}

.solution-hero__badge {
	position: absolute;
	left: 1.25rem;
	right: auto;
	bottom: 1.25rem;
	display: grid;
	gap: 0.3rem;
	min-width: min(260px, calc(100% - 2.5rem));
	padding: 1rem 1.05rem;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 20px;
	background: rgba(15, 23, 42, 0.76);
	backdrop-filter: blur(16px);
	box-shadow: 0 20px 40px rgba(15, 23, 42, 0.22);
	color: #fff;
}

.solution-hero__badge-label {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.66);
}

.solution-hero__badge-value {
	font-size: 1.4rem;
	line-height: 1;
	letter-spacing: -0.03em;
}

.solution-hero__badge-text {
	font-size: 0.9rem;
	line-height: 1.45;
	color: rgba(255, 255, 255, 0.76);
}

.solution-hero__image,
.solution-section__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.solution-hero__image {
	aspect-ratio: 16 / 9;
}

.solution-section {
	margin-top: clamp(2.5rem, 5vw, 4.5rem);
}

.solution-section__card {
	display: grid;
	gap: 1.25rem;
	padding: clamp(1.75rem, 2.4vw, 2.5rem);
	border: 1px solid rgba(15, 23, 42, 0.1);
	border-radius: 24px;
	background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
	box-shadow: 0 16px 36px rgba(15, 23, 42, 0.07);
}

.solution-section__meta {
	display: flex;
	align-items: center;
	gap: 0.9rem;
}

.solution-section__index {
	flex: 0 0 auto;
	font-size: 0.76rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: #667085;
}

.solution-section__rule {
	display: block;
	flex: 1 1 auto;
	height: 1px;
	background: linear-gradient(90deg, rgba(15, 23, 42, 0.18), rgba(15, 23, 42, 0));
}

.solution-section__title {
	margin: 0;
	max-width: 26rem;
	font-size: clamp(1.5rem, 2vw, 2.1rem);
	line-height: 1.08;
	letter-spacing: -0.03em;
	color: #111827;
}

.solution-section__text {
	margin: 0;
	font-size: 1rem;
	line-height: 1.78;
	color: #4b5565;
}

.solution-section__image {
	aspect-ratio: 16 / 9;
}

.solution-section--contrast .solution-section__card {
	background: linear-gradient(180deg, #f5f8fc 0%, #eef3f8 100%);
	border-color: rgba(15, 23, 42, 0.08);
}

.solution-section--contrast .solution-section__media {
	background:
		radial-gradient(circle at top right, rgba(17, 24, 39, 0.12), transparent 32%),
		#e9edf4;
}

.partner-program-page main {
	position: relative;
	overflow: hidden;
	background:
		radial-gradient(circle at top left, rgba(13, 110, 253, 0.08), transparent 28%),
		linear-gradient(180deg, #f8fafc 0%, #ffffff 38%, #f7f9fc 100%);
}

.partner-program-page main::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(148, 163, 184, 0.07) 1px, transparent 1px),
		linear-gradient(90deg, rgba(148, 163, 184, 0.07) 1px, transparent 1px);
	background-size: 30px 30px;
	opacity: 0.3;
	mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.28), transparent 82%);
	pointer-events: none;
}

.partner-program-page main > .container {
	position: relative;
	z-index: 1;
}

.partner-program-block + .partner-program-block {
	margin-top: clamp(3rem, 5vw, 5rem);
}

.partner-program-hero {
	padding: clamp(1.5rem, 3vw, 3rem);
	border: 1px solid rgba(15, 23, 42, 0.08);
	border-radius: 32px;
	background: rgba(255, 255, 255, 0.9);
	box-shadow: 0 24px 60px rgba(15, 23, 42, 0.08);
	backdrop-filter: blur(14px);
}

.partner-program-hero__content {
	display: grid;
	gap: 1.25rem;
	height: 100%;
}

.partner-program-hero__eyebrow {
	display: inline-flex;
	width: fit-content;
	align-items: center;
	padding: 0.5rem 0.95rem;
	border-radius: 999px;
	background: rgba(13, 110, 253, 0.08);
	color: #295fca;
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.partner-program-hero__title {
	margin: 0;
	max-width: 13ch;
	font-size: clamp(2.3rem, 4vw, 4.2rem);
	line-height: 0.98;
	letter-spacing: -0.05em;
	color: #162033;
}

.partner-program-hero__description {
	max-width: 42rem;
	margin: 0;
	font-size: 1.05rem;
	line-height: 1.8;
	color: #556176;
}

.partner-program-hero__highlights {
	display: grid;
	gap: 0.85rem;
	padding: 0;
	margin: 0;
	list-style: none;
}

.partner-program-hero__highlight {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: start;
	gap: 0.85rem;
	padding: 0.95rem 1rem;
	border: 1px solid rgba(15, 23, 42, 0.08);
	border-radius: 18px;
	background: #ffffff;
}

.partner-program-hero__highlight-mark {
	width: 10px;
	height: 10px;
	margin-top: 0.45rem;
	border-radius: 999px;
	background: #0d6efd;
	box-shadow: 0 0 0 6px rgba(13, 110, 253, 0.12);
}

.partner-program-hero__panel {
	display: grid;
	gap: 1.1rem;
	height: 100%;
	padding: clamp(1.5rem, 2.5vw, 2.2rem);
	border-radius: 28px;
	background:
		radial-gradient(circle at top right, rgba(96, 165, 250, 0.24), transparent 28%),
		linear-gradient(165deg, #0f172a 0%, #16213a 100%);
	color: #fff;
	box-shadow: 0 24px 60px rgba(15, 23, 42, 0.18);
}

.partner-program-hero__panel-label {
	margin: 0;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.72);
}

.partner-program-hero__facts {
	display: grid;
	gap: 0.9rem;
}

.partner-program-hero__fact {
	display: grid;
	gap: 0.25rem;
	padding: 0.95rem 1rem;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 18px;
	background: rgba(255, 255, 255, 0.06);
}

.partner-program-hero__fact-label {
	font-size: 0.74rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.64);
}

.partner-program-hero__fact-value {
	font-size: 1rem;
	line-height: 1.55;
	font-weight: 600;
	color: #fff;
}

.partner-program-section__head {
	display: grid;
	gap: 0.8rem;
	max-width: 54rem;
	margin-bottom: 1.5rem;
}

.partner-program-section__title {
	margin: 0;
	font-size: clamp(1.8rem, 3vw, 2.65rem);
	line-height: 1.05;
	letter-spacing: -0.04em;
	color: #162033;
}

.partner-program-section__description {
	margin: 0;
	font-size: 1rem;
	line-height: 1.75;
	color: #5d687c;
}

.partner-program-card,
.partner-program-step {
	height: 100%;
	padding: 1.35rem 1.25rem;
	border: 1px solid rgba(15, 23, 42, 0.08);
	border-radius: 22px;
	background: rgba(255, 255, 255, 0.92);
	box-shadow: 0 18px 42px rgba(15, 23, 42, 0.06);
}

.partner-program-card {
	display: grid;
	align-content: start;
	gap: 0.95rem;
}

.partner-program-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 14px;
	background: rgba(13, 110, 253, 0.1);
	color: #0d6efd;
	font-size: 1.2rem;
}

.partner-program-card__value {
	display: inline-flex;
	width: fit-content;
	align-items: center;
	padding: 0.4rem 0.7rem;
	border-radius: 999px;
	background: rgba(15, 23, 42, 0.06);
	color: #243247;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.partner-program-card__title,
.partner-program-step__title {
	margin: 0;
	font-size: 1.2rem;
	line-height: 1.2;
	color: #162033;
}

.partner-program-card__text,
.partner-program-step__text {
	margin: 0;
	font-size: 0.97rem;
	line-height: 1.72;
	color: #5d687c;
}

.partner-program-step {
	display: grid;
	gap: 0.85rem;
	background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

.partner-program-step__index {
	display: inline-flex;
	width: fit-content;
	align-items: center;
	padding: 0.35rem 0.6rem;
	border-radius: 999px;
	background: rgba(13, 110, 253, 0.08);
	color: #295fca;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.partner-program-cta__inner {
	display: grid;
	gap: 1.25rem;
	padding: clamp(1.75rem, 3vw, 2.6rem);
	border-radius: 30px;
	background:
		radial-gradient(circle at top right, rgba(96, 165, 250, 0.24), transparent 30%),
		linear-gradient(165deg, #0f172a 0%, #172554 100%);
	color: #fff;
	box-shadow: 0 28px 70px rgba(15, 23, 42, 0.18);
}

.partner-program-cta__title {
	margin: 0 0 0.75rem;
	font-size: clamp(1.8rem, 3vw, 2.8rem);
	line-height: 1.02;
	letter-spacing: -0.04em;
}

.partner-program-cta__description {
	max-width: 50rem;
	margin: 0;
	font-size: 1rem;
	line-height: 1.8;
	color: rgba(255, 255, 255, 0.78);
}

@media (max-width: 1199.98px) {
	.partner-program-hero__title {
		max-width: none;
	}
}

@media (max-width: 991.98px) {
	.partner-program-hero,
	.partner-program-hero__panel,
	.partner-program-cta__inner {
		border-radius: 24px;
	}

	.partner-program-hero__highlight {
		padding: 0.85rem 0.9rem;
	}

	.partner-program-card,
	.partner-program-step {
		border-radius: 20px;
	}
}

/* =========================================
   FIX HORIZONTAL SCROLL — MOBILE
   ========================================= */

@media (max-width: 575.98px) {
}

@media (max-width: 991.98px) {
	.services-carousel-wrap {
		overflow-x: auto;
		overflow-y: hidden;
		padding: 18px 18px 18px;
		touch-action: auto;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior-x: contain;
		scrollbar-width: none;
	}

	.services-carousel {
		width: max-content;
		transform: none !important;
	}

	.services-carousel > .col {
		width: min(320px, calc(100vw - 56px));
		flex-basis: min(320px, calc(100vw - 56px));
	}

	.services-carousel-wrap::-webkit-scrollbar {
		display: none;
	}

	.solution-hero__media,
	.solution-section__media {
		border-radius: 24px;
	}

	.solution-hero__highlight {
		padding: 0.8rem 0.9rem;
		border-radius: 16px;
	}

	.solution-hero__badge {
		position: static;
		min-width: 0;
		margin: 1rem;
	}

	.solution-section__card {
		padding: 1.5rem;
		border-radius: 20px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.services-carousel-wrap {
		overflow-x: auto;
	}

	.services-carousel {
		transform: none !important;
	}
}

.gallery-overlay {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: none;
	background: rgba(0, 0, 0, 0.86);
	padding: 24px;
}

.gallery-overlay.is-open {
	display: grid;
	place-items: center;
}

.gallery-overlay__box {
	position: relative;
	width: min(1100px, 100%);
	height: min(80vh, 720px);
	display: grid;
	place-items: center;
}

.gallery-overlay__img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	border-radius: 18px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.45);
	opacity: 1;
	transform: scale(1);
	transition:
		opacity 180ms ease,
		transform 180ms ease;
}

.gallery-overlay__img.is-switching {
	opacity: 0;
	transform: scale(0.98);
}

@media (prefers-reduced-motion: reduce) {
	.gallery-overlay__img {
		transition: none;
	}
}

.gallery-overlay__btn {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 44px;
	height: 44px;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.28);
	background: rgba(255, 255, 255, 0.14);
	color: #fff;
	display: grid;
	place-items: center;
	cursor: pointer;
	user-select: none;
}

.gallery-overlay__btn:hover {
	background: rgba(255, 255, 255, 0.22);
}

.gallery-overlay__btn--prev {
	left: -56px;
}

.gallery-overlay__btn--next {
	right: -56px;
}

.gallery-overlay__close {
	position: absolute;
	top: -56px;
	right: 0;
	width: 44px;
	height: 44px;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.28);
	background: rgba(255, 255, 255, 0.14);
	color: #fff;
	display: grid;
	place-items: center;
	cursor: pointer;
}

.gallery-overlay__counter {
	position: absolute;
	bottom: -42px;
	left: 0;
	right: 0;
	text-align: center;
	color: rgba(255, 255, 255, 0.8);
	font-size: 14px;
}

@media (max-width: 992px) {
	.gallery-overlay__btn--prev {
		left: 8px;
	}
	.gallery-overlay__btn--next {
		right: 8px;
	}
	.gallery-overlay__close {
		top: 8px;
		right: 8px;
	}
	.gallery-overlay__counter {
		bottom: 12px;
	}
	.gallery-overlay__box {
		height: 85vh;
	}
}

.contact-request__intro {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: clamp(28px, 4vw, 40px);
	border-radius: 32px;
	background: var(--primary-gradient);
	color: #fff;
	overflow: hidden;
}

.contact-request {
	width: 100%;
	margin-inline: 0;
	--bs-gutter-x: clamp(0.875rem, 1.5vw, 2rem);
}

.contact-request > [class*='col-'] {
	min-width: 0;
}

.contact-request__intro::after {
	content: '';
	position: absolute;
	right: -72px;
	bottom: -72px;
	width: 220px;
	height: 220px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.08);
}

.contact-request__eyebrow {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	padding: 0.45rem 0.9rem;
	margin-bottom: 1rem;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.12);
	font-size: 0.86rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.contact-request__intro h2,
.contact-request__lead {
	text-shadow: 0 2px 12px rgba(15, 23, 42, 0.6);
}

.contact-request__lead {
	position: relative;
	z-index: 1;
	max-width: 34rem;
	font-size: 1.05rem;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.82);
}

.contact-request__stat {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: auto;
	padding-top: 2rem;
}

.contact-request__stat-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	flex: 0 0 auto;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.14);
	backdrop-filter: blur(10px);
	font-size: 1.1rem;
}

.contact-request__stat-label {
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.65);
}

.contact-request__stat-value {
	font-size: 1rem;
	font-weight: 600;
}

.contact-request__points {
	position: relative;
	z-index: 1;
	display: grid;
	gap: 14px;
	margin-top: 2rem;
}

.contact-request__point {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 14px 16px;
	border-radius: 18px;
	background: rgba(255, 255, 255, 0.08);
	backdrop-filter: blur(10px);
}

.contact-request__point .bi {
	font-size: 1.1rem;
	line-height: 1;
	color: #8ec5ff;
}

/* Фоновые фото-панели: hero, "Нам доверяют", блок обратной связи.
   Везде один приём — тонированный градиент поверх фото, чтобы текст
   оставался читаемым, а не сплошная нетронутая картинка за текстом. */

/* .home-hero без position:relative был position:static — overflow:hidden
   на секции в этом случае НЕ клипает абсолютно позиционированный .blob
   (его containing block уходит выше, к body/html), и декоративный круг
   реально уширял document.scrollWidth за пределы viewport. У #reviews и
   #contact уже стоит position:relative, поэтому там .blob клипался
   нормально, а у hero — нет, отсюда и горизонтальный скролл именно на
   узких мобильных экранах. overflow:hidden оставляем безусловным (не
   только в мобильном медиа-запросе) — так секция сама гасит свой blob на
   любой ширине, а не только полагается на html{overflow-x:hidden}. */
.home-hero {
	position: relative;
	overflow: hidden;
}

/* Вертикальное выравнивание ряда задаётся в разметке классом
   align-items-start (Bootstrap-утилита, !important) — .hero-visual теперь
   высокая (под геометрию эллипса/девушки), и center вместо start раньше
   утягивал текстовую колонку вниз, к середине этой высоты. */

.hero-copy {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.hero-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	align-self: flex-start;
	padding: 0.5rem 1rem;
	margin-bottom: 1.25rem;
	border-radius: 999px;
	background: var(--primary-tint);
	color: var(--primary-color);
	font-size: 0.86rem;
	font-weight: 700;
}

.hero-badge__dot {
	width: 7px;
	height: 7px;
	border-radius: 999px;
	background: var(--primary-color);
	flex: 0 0 auto;
}

/* Заголовок hero — Inter Bold, единая гарнитура со всем сайтом (раньше
   была отдельная Montserrat — по новому ТЗ вся типографика на Inter).
   font-size: !important нет — .hero-copy h1 специфичнее .display-5/.lh-1
   из Bootstrap, поэтому просто перебивает их своими значениями без хаков.
   clamp-максимум чуть ниже, чем в ТЗ (76px) — на 76px "боты и приложения"
   переставало помещаться в одну строку и ломало заданную раскладку в 3
   строки; подобрал по факту, а не слепо по цифре. */
.hero-copy h1 {
	font-family: 'Inter', sans-serif;
	font-weight: 700;
	font-size: clamp(32px, 4vw, 68px);
	line-height: 0.98;
	letter-spacing: -0.055em;
	color: var(--ink);
}

/* Единый класс градиентного текста для всего сайта — акцентные слова в
   заголовках, а не сплошная заливка. Используется и напрямую (.gradient-text),
   и через модификаторы вроде .hero-copy__accent (те же стопы + свои
   text-transform/font-weight поверх). */
.gradient-text {
	background: var(--gradient-text);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}

.hero-copy__accent {
	background: var(--gradient-text);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
	font-weight: 700;
	text-transform: uppercase;
}

.hero-stats {
	display: flex;
	flex-wrap: wrap;
	gap: 28px;
	margin-top: 0.5rem;
}

.hero-stat {
	display: flex;
	align-items: center;
	gap: 12px;
}

.hero-stat__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	flex: 0 0 auto;
	border-radius: 14px;
	background: var(--primary-tint);
	color: var(--primary-color);
	font-size: 1.1rem;
}

.hero-stat__value {
	font-weight: 700;
	font-size: 1.5rem;
	line-height: 1.2;
	background: var(--gradient-text);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}

.hero-stat__label {
	font-size: 0.85rem;
	color: #6c757d;
}

/* Эллипс и фигура позиционируются абсолютно (не flex/центрирование) и не
   привязаны к центру .hero-visual — соотношения сняты с эталонного макета:
   эллипс прижат к левому краю колонки, а не к центру; девушка сидит на
   горизонтальном центре ЭЛЛИПСА (а не колонки), с чётким смещением вверх
   от центра эллипса. См. .hero-visual__person ниже — величины подобраны
   так, чтобы голова была выше эллипса примерно на 54% его высоты, а
   ботинки — ниже примерно на 41% его высоты (пропорция с референса). */
.hero-visual {
	position: relative;
	/* Ниже, чем раньше (было 740px): при старой высоте даже увеличенная
	   до 720px девушка не дотягивалась до нижнего края секции и не
	   обрезалась — весь смысл эффекта "уходит за границу hero" терялся. */
	min-height: 360px;
	/* Увеличен (было min(64%, 583px)) — девушка стала крупнее (scale на
	   .hero-visual__person), и прежний эллипс на её фоне выглядел мелким;
	   теперь он заметно шире и как бы "обволакивает" фигуру сзади. */
	--ellipse-w: min(78%, 820px);
}

/* aspect-ratio (не отдельная height) — чтобы эллипс оставался широким
   овалом, а не превращался в почти-круг на узких desktop-колонках
   (992-1400px), где 64% ширины колонки меньше 583px, а высота раньше
   была жёстко зафиксирована в px. */
.hero-visual__ellipse {
	position: absolute;
	left: 0;
	/* Ниже центра (было 50%) — просили сместить вниз. */
	top: 58%;
	transform: translateY(-50%) rotate(-8deg);
	z-index: 0;
	width: var(--ellipse-w);
	/* Обратно вытянутое, но не так сильно, как в самом начале (было
	   720/440 ≈ 1.64, потом переборщили в круглое 720/640 ≈ 1.13) —
	   средний вариант, явно овал, не круг. */
	aspect-ratio: 590 / 520;
	border-radius: 50%;
	background: radial-gradient(ellipse at 35% 30%, #c9cffc, #eef0fe 72%);
}

.hero-visual__note {
	position: absolute;
	left: 2%;
	top: 0;
	z-index: 2;
	font-size: 19px;
	line-height: 1.25;
	transform: rotate(-4deg);
}

/* Фото — поверх эллипса (z-index выше). Горизонтально центрирована на
   центре ЭЛЛИПСА (calc от --ellipse-w), не на центре колонки — иначе
   фигура "плывёт" при широких viewport.
   Вертикально теперь привязана к ВЕРХУ .hero-visual (top: 0), а не к
   центру эллипса: лицо и волосы всегда остаются на постоянном месте у
   верхней границы, а увеличенная высота "уезжает" вниз. Внизу её
   обрезает уже существующий overflow: hidden на .home-hero (см. выше) —
   макет специально просит именно физическую обрезку по нижней границе
   секции, а не просто визуальный заход за эллипс, как было раньше. */
.hero-visual__person {
	position: absolute;
	left: calc(var(--ellipse-w) / 2);
	top: 0;
	/* У самого PNG вокруг фигуры прозрачные поля (эффект "glow"), поэтому
	   одной высоты блока было мало — обрезка приходилась на пустое
	   прозрачное поле и визуально не была заметна. scale() от верхнего
	   края (transform-origin) "приближает" реальную картинку, а не рамку
	   вокруг неё — лицо остаётся на месте, низ уходит дальше за границу. */
	transform: translateX(-50%) scale(1.25);
	transform-origin: top center;
	z-index: 2;
	display: block;
	width: auto;
	height: 720px;
	max-width: 500px;
	object-fit: contain;
	object-position: top;
}

@media (max-width: 991.98px) {
	.hero-visual {
		min-height: 420px;
		margin-top: 24px;
		--ellipse-w: min(78%, 340px);
	}

	.hero-visual__person {
		height: min(90%, 380px);
		max-width: 254px;
		/* transform не переопределяем — наследует translateX(-50%) scale(1.25)
		   + transform-origin: top center из базового правила. Раньше здесь
		   стояла старая формула translate(-50%, calc(-50% - 13px)) для
		   центрирования по эллипсу — с тех пор как .hero-visual__person
		   стал top:0 (привязка к верху, не к центру), этот старый transform
		   утягивал картинку выше контейнера, и оставались видны только ноги. */
	}

	.hero-visual__note {
		font-size: 16px;
	}
}

/* Секция "Почему мы" (#about-us) — текст слева (~35%) + сетка 2×2
   компактных карточек-преимуществ справа, вместо центрированного
   заголовка с одним длинным абзацем. Цвета/радиусы/тени — те же токены и
   тот же язык, что у остальных карточек сайта (project-card/review-card),
   просто компактнее — это не отдельная витрина, а часть одной композиции. */
.why-us {
	position: relative;
	overflow: hidden;
}

.why-us__blob {
	opacity: 0.6;
}

.why-us__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 28px;
}

.why-us-layout {
	display: grid;
	grid-template-columns: minmax(0, 35%) minmax(0, 1fr);
	gap: 56px;
	align-items: center;
}

.why-us-copy__text {
	font-size: 16px;
	line-height: 1.6;
	color: var(--ink-muted);
	margin-bottom: 28px;
	max-width: 440px;
}

.why-us-copy__cta {
	white-space: nowrap;
}

.why-us-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
}

.why-us-card {
	background: #fff;
	border: 1px solid var(--hairline);
	border-radius: 20px;
	padding: 24px;
	box-shadow: 0 15px 40px rgba(30, 30, 80, 0.05);
	transition: border-color 0.3s ease, transform 0.3s ease;
}

.why-us-card:hover {
	border-color: #d5d2ff;
	transform: translateY(-4px);
}

.why-us-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 14px;
	background: var(--primary-tint);
	color: var(--primary-color);
	font-size: 19px;
	margin-bottom: 16px;
}

.why-us-card__title {
	font-size: 17px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--ink);
	margin-bottom: 6px;
}

.why-us-card__text {
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--ink-muted);
	margin: 0;
}

@media (max-width: 991.98px) {
	.why-us-layout {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.why-us-copy__text {
		max-width: none;
	}
}

@media (max-width: 575.98px) {
	.why-us-grid {
		grid-template-columns: 1fr;
	}

	.why-us-copy__cta {
		width: 100%;
	}
}

.trust-photo {
	aspect-ratio: 4 / 3;
	object-fit: cover;
	object-position: center 15%;
}

.trust-logos {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	gap: 14px;
}

.trust-logo {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 10px 20px 10px 10px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.88);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.6);
	box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
	font-weight: 700;
	font-size: 15px;
	letter-spacing: -0.01em;
	color: #1c1d21;
	transition:
		transform 0.2s ease,
		box-shadow 0.2s ease;
}

.trust-logo:hover {
	transform: translateY(-2px);
	box-shadow: 0 14px 32px rgba(15, 23, 42, 0.14);
}

.trust-logo i {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 999px;
	font-size: 13px;
	color: #fff;
	background: var(--primary-color);
	flex: 0 0 auto;
}

@media (max-width: 576px) {
	.trust-logo {
		padding: 8px 16px 8px 8px;
		font-size: 13px;
	}

	.trust-logo i {
		width: 26px;
		height: 26px;
		font-size: 11px;
	}
}

/* Секция "Обратная связь" — единственная акцентная (не белая/лавандовая)
   секция сайта, по ТЗ: сплошная фиолетовая градиентная панель, скругление
   32px, весь текст внутри белый/полупрозрачно-белый. */
.contact-panel {
	position: relative;
	background: var(--primary-gradient);
	border-radius: 32px;
	padding: clamp(20px, 3vw, 32px);
	overflow: hidden;
	color: #fff;
}

.contact-panel .section-title {
	color: #fff;
}

/* На фиолетовой панели градиентный текст (те же фиолетовые тона) был бы
   не виден — здесь акцент даём просто белым, без background-clip. */
.gradient-text-invert {
	color: #fff;
}

.contact-layout {
	display: grid;
	grid-template-columns: 0.85fr 1.15fr;
	gap: 24px;
	/* stretch, а не start: раньше левая колонка (фото+карточки) была
	   короче правой (форма) на добрую сотню px и просто повисала в верху
	   панели — снизу оставался пустой фиолетовый хвост. Теперь .contact-info
	   растягивается на всю высоту формы и сама равномерно распределяет
	   этот запас (см. gap+space-between ниже) вместо одной некрасивой
	   дыры внизу. */
	align-items: stretch;
	position: relative;
	z-index: 1;
}

.contact-info {
	display: flex;
	flex-direction: column;
	height: 100%;
	gap: 14px;
	/* space-between растягивал зазоры между фото/карточками на всю высоту
	   формы — после того как форма справа стала компактнее, это выглядело
	   как карточки "расползлись" друг от друга. Прижимаем к верху, сразу
	   под фото, без разгона по всей высоте колонки. */
	justify-content: flex-start;
}

.contact-info__photo {
	border-radius: 24px;
	overflow: hidden;
}

.contact-info__photo img {
	display: block;
	width: 100%;
	/* Было 180px — с justify-content:flex-start в .contact-info под
	   карточками оставался пустой хвост высотой ~186px (колонка слева
	   короче формы справа). Увеличиваем именно фото, а не отступы. */
	height: 360px;
	object-fit: cover;
	/* Было 15% под портрет-крупным-планом (trust-portrait.jpg) — у
	   contact-wave.jpg человек в полный рост в приседе, лицо ниже и
	   левее центра кадра. */
	object-position: 42% 24%;
}

.contact-info__card {
	background: #fff;
	border-radius: 16px;
	padding: 12px 16px;
	display: flex;
	align-items: center;
	gap: 14px;
	box-shadow: 0 12px 28px -22px rgba(11, 11, 18, 0.2);
}

.contact-info__icon {
	width: 42px;
	height: 42px;
	border-radius: 12px;
	background: #e3e9fe;
	color: #3b5bfb;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	font-size: 17px;
}

.contact-info__icon--green {
	background: #dff7f1;
	color: #0fa895;
}

.contact-info__icon--purple {
	background: #eae5fe;
	color: #6c4cf1;
}

.contact-info__value {
	font-weight: 700;
	font-size: 14px;
	/* Без явного цвета текст наследовал белый от .contact-panel (color:#fff)
	   и был невидим на белой карточке .contact-info__card — виден только
	   при выделении. */
	color: var(--ink);
}

.contact-info__label {
	font-size: 11.5px;
	color: var(--ink-muted);
}

.contact-info__social {
	display: flex;
	gap: 10px;
}

.contact-info__social-btn {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 8px 20px -14px rgba(11, 11, 18, 0.4);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--primary-color);
}

@media (max-width: 991.98px) {
	.contact-layout {
		grid-template-columns: 1fr;
		/* stretch нужен только пока обе колонки реально стоят рядом
		   (desktop) — как только грид схлопывается в 1 колонку, .contact-info
		   и форма превращаются в два отдельных блока друг под другом, и
		   height:100% на .contact-info начинал тянуться на высоту формы,
		   раздувая всю секцию. */
		align-items: start;
	}

	.contact-info {
		height: auto;
	}
}

.contact-form-card {
	padding: clamp(24px, 3vw, 36px);
	border: 1px solid rgba(15, 23, 42, 0.08);
	border-radius: 32px;
	background: #fff;
	box-shadow: 0 24px 60px rgba(15, 23, 42, 0.08);
}

.contact-form__header {
	margin-bottom: 1.5rem;
}

.contact-form__title {
	margin: 0 0 0.5rem;
	font-size: clamp(1.45rem, 2vw, 1.8rem);
	font-weight: 700;
	color: #101828;
}

.contact-form__description {
	margin: 0;
	color: #667085;
	line-height: 1.7;
}

.contact-form__label {
	margin-bottom: 0.45rem;
	font-weight: 600;
	color: #344054;
}

.contact-form__field {
	position: relative;
	min-width: 0;
}

.contact-form__control {
	min-height: 58px;
	padding: 0.95rem 1rem;
	border: 1px solid #d0d5dd;
	border-radius: 18px;
	background: #f8fafc;
	box-shadow: none;
}

.contact-form__control:focus {
	border-color: rgba(13, 110, 253, 0.5);
	background: #fff;
	box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.12);
}

.contact-form__control::placeholder {
	/* Bootstrap по умолчанию красит placeholder в rgba(33,37,41,.75) —
	   это почти чёрный и на глаз не отличить от реально введённого текста. */
	color: #98a2b3;
	opacity: 1;
}

.contact-form__control--textarea {
	min-height: 136px;
	resize: vertical;
}

/* Поля хранят ошибки абсолютно, чтобы обычное состояние формы не раздувалось по высоте. */
.contact-form .invalid-feedback {
	position: absolute;
	left: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
	right: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
	top: calc(100% + 1px);
	bottom: auto;
	display: block;
	margin-top: 0;
	font-size: 0.82rem;
	line-height: 1.25;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.contact-form.was-validated .contact-form__control:invalid ~ .invalid-feedback {
	opacity: 1;
	visibility: visible;
}

.contact-form.was-validated .contact-form__field:has(.contact-form__control:invalid) {
	z-index: 2;
	padding-bottom: 0.2rem;
}

.contact-form__footer {
	display: grid;
	gap: 12px;
	margin-top: 1.25rem;
}

.contact-form__agreement {
	display: grid;
	gap: 0.45rem;
	padding: 0.9rem 1rem;
	border: 1px solid #d0d5dd;
	border-radius: 18px;
	background: #f8fafc;
}

.contact-form__agreement-check {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	min-width: 0;
	margin: 0;
}

.contact-form__checkbox {
	flex: 0 0 auto;
	width: 1.1rem;
	height: 1.1rem;
	margin: 0.15rem 0 0;
	border-color: #98a2b3;
}

.contact-form__agreement-label {
	margin: 0;
	font-size: 0.93rem;
	line-height: 1.6;
	color: #475467;
}

.contact-form__legal-link {
	color: #295fca;
	font-weight: 600;
	text-decoration: none;
}

.contact-form__legal-link:hover,
.contact-form__legal-link:focus-visible {
	text-decoration: underline;
}

.contact-form__agreement-feedback {
	position: static !important;
	display: none !important;
	margin: 0;
	font-size: 0.82rem;
	line-height: 1.3;
	color: #dc3545;
	opacity: 0 !important;
	visibility: hidden !important;
}

.contact-form.was-validated .contact-form__checkbox:invalid {
	border-color: #dc3545;
}

.contact-form.was-validated .contact-form__agreement:has(.contact-form__checkbox:invalid) {
	border-color: rgba(220, 53, 69, 0.38);
	background: rgba(220, 53, 69, 0.04);
}

.contact-form.was-validated .contact-form__agreement:has(.contact-form__checkbox:invalid) .contact-form__agreement-label {
	color: #8f1d1d;
}

.contact-form.was-validated .contact-form__agreement:has(.contact-form__checkbox:invalid) .contact-form__agreement-feedback {
	display: block !important;
	opacity: 1 !important;
	visibility: visible !important;
}

.contact-form__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	border-radius: 100px;
	padding-inline: 1.5rem;
}

.contact-form__note {
	font-size: 0.95rem;
	line-height: 1.6;
	color: #667085;
}

.contact-form__status {
	font-size: 0.95rem;
	font-weight: 500;
}

.contact-form__status:not(:empty) {
	min-height: 24px;
}

.contact-form__status.is-info {
	color: var(--primary-color);
}

.contact-form__status.is-success {
	color: #198754;
}

.contact-form__status.is-danger {
	color: #b42318;
}

/* Форма из #contact сидит внутри .contact-panel (уже фиолетовая
   градиентная), поэтому у себя она прозрачная, а поля — "стеклянные"
   полупрозрачно-белые, как в ТЗ. Модалка (.contact-form--modal) эту
   форму не переиспользует в тёмном варианте — там своя белая карточка,
   её не трогаем. */
.contact-form--section {
	background: transparent;
	border: none;
	box-shadow: none;
	padding: 0;
}

/* Компактнее, чем базовые .contact-form__control/textarea (те же значения
   формируют и высокую модалку — её не трогаем): форма в секции была
   заметно выше фото+карточек слева, из-за чего вся панель казалась
   раздутой и левая колонка "провисала". */
.contact-form--section .contact-form__header {
	margin-bottom: 0.75rem;
}

.contact-form--section .contact-form__control {
	min-height: 44px;
	padding: 0.55rem 1rem;
}

.contact-form--section .contact-form__control--textarea {
	min-height: 60px;
}

.contact-form--section .contact-form__footer {
	margin-top: 0.75rem;
	gap: 8px;
}

.contact-form--section .contact-form__agreement {
	padding: 0.55rem 0.85rem;
	gap: 0.25rem;
}

.contact-form--section .contact-form__label {
	margin-bottom: 0.3rem;
}

.contact-form--section .contact-form__note {
	font-size: 0.85rem;
}

.contact-form--section .row {
	--bs-gutter-y: 0.5rem;
}

.contact-form--section .contact-form__title,
.contact-form--section .contact-form__eyebrow {
	color: #fff;
}

.contact-form--section .contact-form__description {
	color: rgba(255, 255, 255, 0.8);
}

.contact-form--section .contact-form__label {
	color: rgba(255, 255, 255, 0.85);
}

.contact-form--section .contact-form__control {
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.3);
	color: #fff;
}

.contact-form--section .contact-form__control::placeholder {
	color: rgba(255, 255, 255, 0.65);
}

.contact-form--section .contact-form__control:focus {
	background: rgba(255, 255, 255, 0.16);
	border-color: rgba(255, 255, 255, 0.55);
	box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.15);
}

.contact-form--section .contact-form__agreement {
	background: rgba(255, 255, 255, 0.1);
	border-color: rgba(255, 255, 255, 0.3);
}

.contact-form--section .contact-form__agreement-label {
	color: rgba(255, 255, 255, 0.85);
}

.contact-form--section .contact-form__legal-link {
	color: #fff;
	text-decoration: underline;
}

.contact-form--section .contact-form__note {
	color: rgba(255, 255, 255, 0.7);
}

.contact-form--section .contact-form__submit {
	background-color: #fff;
	background-image: none;
	color: var(--primary-color);
	border-color: #fff;
}

.contact-form--section .contact-form__submit:hover,
.contact-form--section .contact-form__submit:focus-visible {
	background-color: #fff;
	color: var(--primary-color);
	filter: none;
}

.contact-modal .modal-dialog {
	width: min(780px, calc(100vw - 2rem));
	max-width: 100%;
	margin: 0 auto;
	min-height: calc(100dvh - 2rem);
	display: flex;
	align-items: center;
}

.contact-modal {
	padding: 1rem;
	overflow: hidden !important;
}

.contact-modal .modal-content {
	border: 0;
	border-radius: 32px;
	box-shadow: 0 30px 80px rgba(15, 23, 42, 0.2);
	min-height: 680px;
	max-height: none;
	overflow: visible;
}

.contact-modal .modal-header {
	padding: 22px 24px 0;
}

.contact-modal .modal-body {
	padding: 18px 24px 34px;
	overflow-y: visible;
}

.contact-modal .contact-form-card {
	padding: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

.contact-modal .contact-form--modal .row {
	--bs-gutter-x: 0.875rem;
	--bs-gutter-y: 0.875rem;
}

.contact-modal .contact-form--modal .contact-form__label {
	margin-bottom: 0.35rem;
}

.contact-modal .contact-form--modal .contact-form__control {
	min-height: 52px;
	padding: 0.85rem 0.95rem;
}

.contact-modal .contact-form--modal .contact-form__control--textarea {
	min-height: 112px;
}

.contact-modal .contact-form--modal .contact-form__footer {
	gap: 10px;
	margin-top: 1.5rem;
}

.contact-modal .contact-form--modal .contact-form__submit {
	min-height: 50px;
	padding-block: 0.75rem;
}

.contact-modal .contact-form--modal .contact-form__note,
.contact-modal .contact-form--modal .contact-form__status,
.contact-modal .text-secondary {
	font-size: 0.9rem;
	line-height: 1.45;
}

.contact-modal .contact-form--modal .invalid-feedback {
	position: static;
	left: auto;
	right: auto;
	top: auto;
	bottom: auto;
	margin-top: 0.08rem;
	font-size: 0.78rem;
}

.contact-modal .contact-form--modal.was-validated .contact-form__field:has(.contact-form__control:invalid) {
	padding-bottom: 0;
}

/* На low-height desktop сначала ужимаем modal-content, а скролл включаем только как fallback. */
@media (max-height: 860px) and (min-width: 992px) {
	.contact-modal {
		overflow: hidden !important;
		padding: 0.5rem;
	}

	.contact-modal .modal-dialog {
		width: min(728px, calc(100vw - 1rem));
		margin: 0 auto;
		min-height: calc(100dvh - 1rem);
	}

	.contact-modal .modal-content {
		min-height: 0;
		max-height: none;
		overflow: visible;
	}

	.contact-modal .modal-header {
		padding: 14px 18px 0;
	}

	.contact-modal .modal-title {
		font-size: 1.8rem;
	}

	.contact-modal .modal-body {
		padding: 10px 18px 16px;
		overflow-y: visible;
	}

	.contact-modal .contact-form--modal .row {
		--bs-gutter-x: 0.625rem;
		--bs-gutter-y: 0.625rem;
	}

	.contact-modal .contact-form--modal .contact-form__label {
		margin-bottom: 0.25rem;
		font-size: 0.88rem;
	}

	.contact-modal .contact-form--modal .contact-form__control {
		min-height: 42px;
		padding: 0.62rem 0.75rem;
		border-radius: 14px;
		font-size: 0.93rem;
	}

	.contact-modal .contact-form--modal .contact-form__control--textarea {
		min-height: 68px;
	}

	.contact-modal .contact-form__agreement {
		padding: 0.7rem 0.8rem;
		border-radius: 16px;
	}

	.contact-modal .contact-form__agreement-label {
		font-size: 0.84rem;
		line-height: 1.4;
	}

	.contact-modal .contact-form__agreement-feedback {
		font-size: 0.75rem;
	}

	.contact-modal .contact-form--modal .contact-form__footer {
		gap: 8px;
		margin-top: 0.75rem;
	}

	.contact-modal .contact-form--modal .contact-form__submit {
		min-height: 42px;
		padding-block: 0.55rem;
		font-size: 0.96rem;
	}

	.contact-modal .contact-form--modal .contact-form__note,
	.contact-modal .contact-form--modal .contact-form__status,
	.contact-modal .text-secondary {
		font-size: 0.82rem;
		line-height: 1.3;
	}
}

@media (max-height: 760px) and (min-width: 992px) {
	.contact-modal {
		padding: 0.35rem;
	}

	.contact-modal .modal-dialog {
		width: min(708px, calc(100vw - 0.7rem));
		margin: 0 auto;
		min-height: calc(100dvh - 0.7rem);
	}

	.contact-modal .modal-header {
		padding: 12px 16px 0;
	}

	.contact-modal .modal-title {
		font-size: 1.65rem;
	}

	.contact-modal .modal-body {
		padding: 8px 16px 14px;
	}

	.contact-modal .contact-form--modal .row {
		--bs-gutter-x: 0.5rem;
		--bs-gutter-y: 0.5rem;
	}

	.contact-modal .contact-form--modal .contact-form__label {
		margin-bottom: 0.2rem;
		font-size: 0.84rem;
	}

	.contact-modal .contact-form--modal .contact-form__control {
		min-height: 40px;
		padding: 0.56rem 0.7rem;
		border-radius: 13px;
		font-size: 0.9rem;
	}

	.contact-modal .contact-form--modal .contact-form__control--textarea {
		min-height: 60px;
	}

	.contact-modal .contact-form__agreement {
		padding: 0.62rem 0.75rem;
		border-radius: 14px;
	}

	.contact-modal .contact-form__agreement-label {
		font-size: 0.8rem;
		line-height: 1.34;
	}

	.contact-modal .contact-form__agreement-feedback {
		font-size: 0.72rem;
	}

	.contact-modal .contact-form--modal .invalid-feedback {
		margin-top: 0.25rem;
		font-size: 0.72rem;
	}

	.contact-modal .contact-form--modal .contact-form__footer {
		gap: 6px;
		margin-top: 0.65rem;
	}

	.contact-modal .contact-form--modal .contact-form__submit {
		min-height: 40px;
		padding-block: 0.5rem;
		font-size: 0.94rem;
	}

	.contact-modal .contact-form--modal .contact-form__note,
	.contact-modal .contact-form--modal .contact-form__status,
	.contact-modal .text-secondary {
		font-size: 0.78rem;
		line-height: 1.24;
	}
}

@media (max-height: 640px) and (min-width: 992px) {
	.contact-modal {
		overflow-y: auto !important;
	}

	.contact-modal.show {
		display: block !important;
	}

	.contact-modal .modal-dialog {
		margin: 0 auto;
		min-height: calc(100dvh - 1.5rem);
		align-items: flex-start;
	}

	.contact-modal .modal-content {
		max-height: calc(100vh - 1.5rem);
		overflow: hidden;
	}

	.contact-modal .modal-body {
		overflow-y: auto;
	}
}

@media (max-width: 1399.98px) {
	.contact-request__intro {
		padding: 32px;
	}

	.contact-form-card {
		padding: 28px;
	}

	.contact-request .contact-form-card {
		padding: 24px 22px;
	}

	.contact-form__control {
		min-height: 56px;
	}

	.contact-form__control--textarea {
		min-height: 128px;
	}

	.contact-request .contact-form__control--textarea {
		min-height: 116px;
	}

	.contact-request .contact-form__footer {
		gap: 10px;
		margin-top: 1.05rem;
	}

	.contact-request .contact-form .invalid-feedback,
	.contact-request .contact-form__agreement-feedback {
		font-size: 0.76rem;
		line-height: 1.2;
	}
}

@media (max-width: 1535.98px) {
	.contact-request__intro {
		padding: 28px 24px;
	}

	.contact-request__lead {
		font-size: 1rem;
		line-height: 1.6;
	}

	.contact-request__points {
		gap: 12px;
		margin-top: 1.5rem;
	}

	.contact-request__point {
		padding: 12px 14px;
		border-radius: 16px;
		font-size: 0.95rem;
	}

	.contact-form-card {
		padding: 24px 20px;
	}

	.contact-form__header {
		margin-bottom: 1.25rem;
	}

	.contact-form__label {
		font-size: 0.95rem;
	}

	.contact-form__control {
		min-height: 52px;
		padding: 0.85rem 0.95rem;
		font-size: 0.97rem;
	}

	.contact-form__control--textarea {
		min-height: 120px;
	}

	.contact-form__footer {
		gap: 12px;
		margin-top: 1.25rem;
	}
}

@media (max-width: 1199.98px) {
	.contact-request__intro {
		padding: 24px 20px;
	}

	.contact-request__point {
		font-size: 0.92rem;
	}

	.contact-form-card {
		padding: 20px 18px;
	}

	.contact-request .contact-form-card {
		padding: 18px 16px;
	}

	.contact-form__title {
		font-size: 1.65rem;
	}

	.contact-form__description,
	.contact-form__note {
		font-size: 0.92rem;
	}

	.contact-form__label {
		font-size: 0.9rem;
	}

	.contact-form__control {
		min-height: 48px;
		font-size: 0.95rem;
	}

	.contact-form__control--textarea {
		min-height: 108px;
	}

	.contact-form .invalid-feedback {
		font-size: 0.78rem;
	}

	.contact-request .contact-form__header {
		margin-bottom: 1rem;
	}

	.contact-request .contact-form__control {
		min-height: 46px;
		padding: 0.78rem 0.88rem;
	}

	.contact-request .contact-form__control--textarea {
		min-height: 92px;
	}

	.contact-request .contact-form__agreement {
		padding: 0.8rem 0.9rem;
	}

	.contact-request .contact-form__footer {
		gap: 9px;
		margin-top: 0.95rem;
	}

	.contact-request .contact-form .invalid-feedback,
	.contact-request .contact-form__agreement-feedback {
		font-size: 0.74rem;
		line-height: 1.18;
	}

	.contact-form.was-validated .contact-form__field:has(.contact-form__control:invalid) {
		padding-bottom: 1.32rem;
	}
}

@media (max-width: 991.98px) {
	.contact-request__intro,
	.contact-form-card,
	.contact-modal .modal-content {
		border-radius: 24px;
	}

	.contact-request__intro,
	.contact-form-card {
		padding: 24px;
	}

	.contact-modal .modal-dialog {
		width: min(680px, calc(100vw - 1.5rem));
		max-width: calc(100vw - 1.5rem);
		margin: 0.75rem auto;
	}

	.contact-modal .modal-content {
		max-height: calc(100vh - 1.5rem);
		overflow: hidden;
	}

	.contact-modal.show {
		overflow-y: auto !important;
	}

	.contact-modal .modal-body {
		overflow-y: auto;
	}

	.contact-form.was-validated .contact-form__field:has(.contact-form__control:invalid) {
		padding-bottom: 1.4rem;
	}

	.contact-request .contact-form .invalid-feedback,
	.contact-request .contact-form__agreement-feedback {
		font-size: 0.72rem;
		line-height: 1.16;
	}

	.contact-request .contact-form-card {
		padding: 20px;
	}

	.contact-request .contact-form__header {
		margin-bottom: 0.9rem;
	}

	.contact-request .contact-form__control {
		min-height: 44px;
		padding: 0.72rem 0.82rem;
	}

	.contact-request .contact-form__control--textarea {
		min-height: 84px;
	}

	.contact-request .contact-form__agreement {
		padding: 0.75rem 0.85rem;
	}

	.contact-request .contact-form__footer {
		gap: 8px;
		margin-top: 0.85rem;
	}
}

@media (max-width: 575.98px) {
    /* Логотипы — две равные колонки */
    #why-us .trust-logos {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
        width: 100%;
    }

    /* Каждая плашка растягивается по своей колонке */
    #why-us .trust-logo {
        width: 100%;
        min-width: 0;
        box-sizing: border-box;

        justify-content: flex-start;
        padding: 10px 12px 10px 10px;

        font-size: 14px;
    }

    #why-us .trust-logo span {
        min-width: 0;
        white-space: nowrap;
    }

    /* Иконки */
    #why-us .trust-logo i {
        width: 30px;
        height: 30px;
        flex: 0 0 30px;
    }

    /* Фото после логотипов */
    #why-us .trust-photo {
        display: block;
        width: 100%;
        max-width: 100%;
        height: auto;
        margin-top: 0;
    }
	 html,
    body {
        width: 100%;
        max-width: 100%;
    }

    /* overflow-x только на html, не на body: см. комментарий у html{} в
       начале файла — overflow-x на body ломает position: sticky у
       #site-header-root в Safari/Chrome на мобильных, из-за этого хедер
       переставал прилипать при скролле именно на мобилке. */
    html {
        overflow-x: hidden !important;
    }

    *,
    *::before,
    *::after {
        max-width: 100%;
    }

    /* Bootstrap-строки используют отрицательные margin для gutter'ов.
       Общее правило max-width: 100% выше обрезает эту растяжку и режет
       .row на gutter уже контейнера, из-за чего вся сетка "сдвигается"
       влево и справа остается пустой промежуток. Возвращаем строкам
       их естественную ширину. */
    .row {
        max-width: none;
    }

    /* Bootstrap container */
    .container,
    .container-sm,
    .container-md,
    .container-lg,
    .container-xl,
    .container-xxl {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Bootstrap row */
    .home-hero .home-hero__row {
        width: 100%;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
    }

    /* HERO */
    .home-hero {
        width: 100%;
        max-width: 100%;
        overflow: hidden;
    }

    .home-hero .hero-visual,
    .home-hero .hero-copy {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    .home-hero .hero-visual {
        margin-bottom: 25px;
        overflow: hidden;
    }

    /* Текст */
    .home-hero .hero-copy {
        overflow-wrap: break-word;
        word-wrap: break-word;
    }

    .home-hero .hero-copy h1,
    .home-hero .hero-copy p {
        max-width: 100%;
    }

    /* Кнопки */
    .home-hero .hero-copy .d-grid {
        width: 100%;
        max-width: 100%;
    }

    .home-hero .hero-copy .btn {
        max-width: 100%;
    }

    /* Статистика */
    .home-hero .hero-stats {
        max-width: 100%;
        overflow: hidden;
    }
	/* Сначала текст, потом изображение */
    .home-hero__row {
        display: flex;
        flex-direction: column;
    }

    .home-hero .hero-copy {
        order: 1;
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .home-hero .hero-visual {
        order: 2;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        margin-top: 30px;
        margin-bottom: 0;
    }

    /* Чтобы текст никогда не вылезал за экран */
    .home-hero .hero-copy {
        overflow-wrap: break-word;
        word-wrap: break-word;
    }

    /* Кнопки */
    .home-hero .hero-copy .d-grid {
        width: 100%;
        max-width: 100%;
    }

    .home-hero .hero-copy .btn {
        max-width: 100%;
    }
	footer .row {
		row-gap: 1rem;
	}

	footer .row > [class*='col-'] {
		flex: 0 0 100%;
		max-width: 100%;
		width: 100%;
		text-align: left !important;
	}

	footer .nav {
		flex-wrap: wrap;
		justify-content: flex-start !important;
		gap: 0.75rem;
	}

	footer .nav > li {
		margin-left: 0 !important;
	}

	#copyright,
	.site-footer__legal-link {
		overflow-wrap: anywhere;
	}

	.contact-request__lead {
		font-size: 1rem;
		line-height: 1.6;
	}

	.solution-hero__title {
		font-size: 2rem;
	}

	.solution-hero__text,
	.solution-section__text {
		font-size: 0.96rem;
		line-height: 1.7;
	}

	.contact-form__control {
		border-radius: 16px;
	}

	.contact-form__agreement {
		padding: 0.85rem 0.9rem;
		border-radius: 16px;
	}

	.contact-form__agreement-label {
		font-size: 0.89rem;
	}

	.contact-form__submit {
		width: 100%;
	}

	.contact-modal .modal-dialog {
		width: calc(100vw - 1rem);
		max-width: calc(100vw - 1rem);
		margin: 0.5rem auto;
	}

	.contact-modal .modal-content {
		max-height: calc(100vh - 1rem);
		overflow: hidden;
	}

	.contact-modal .modal-header,
	.contact-modal .modal-body {
		padding-left: 18px;
		padding-right: 18px;
	}

	.contact-modal.show {
		padding: 0.5rem;
	}

	.contact-modal .modal-body {
		overflow-y: auto;
	}
	#why-us .row {
        margin-left: 0;
        margin-right: 0;
        justify-content: center;
    }
    #why-us .col-12 {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
    }
	#skills .row {
        margin-left: 0;
        margin-right: 0;
    }
}

/* Bootstrap в этой сборке даёт order-утилиты только до order-lg-5,
   а в "Наш стек технологий" 8 карточек — добираем недостающие вручную. */
@media (min-width: 992px) {
	.order-lg-6 {
		order: 6;
	}

	.order-lg-7 {
		order: 7;
	}
}